// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`OuiPopover children is rendered 1`] = `
<div
  class="ouiPopover ouiPopover--anchorDownCenter"
  id="1"
>
  <div
    class="ouiPopover__anchor"
  >
    <button />
  </div>
</div>
`;

exports[`OuiPopover is rendered 1`] = `
<div
  class="ouiPopover ouiPopover--anchorDownCenter testClass1 testClass2"
  data-test-subj="test subject string"
  id="0"
>
  <div
    class="ouiPopover__anchor"
  >
    <button />
  </div>
</div>
`;

exports[`OuiPopover props anchorClassName is rendered 1`] = `
<div
  class="ouiPopover ouiPopover--anchorDownCenter"
  id="3"
>
  <div
    class="ouiPopover__anchor test"
  >
    <button />
  </div>
</div>
`;

exports[`OuiPopover props anchorPosition defaults to centerDown 1`] = `
<div
  class="ouiPopover ouiPopover--anchorDownCenter"
  id="6"
>
  <div
    class="ouiPopover__anchor"
  >
    <button />
  </div>
</div>
`;

exports[`OuiPopover props anchorPosition downRight is rendered 1`] = `
<div
  class="ouiPopover ouiPopover--anchorDownRight"
  id="8"
>
  <div
    class="ouiPopover__anchor"
  >
    <button />
  </div>
</div>
`;

exports[`OuiPopover props anchorPosition leftCenter is rendered 1`] = `
<div
  class="ouiPopover ouiPopover--anchorLeftCenter"
  id="7"
>
  <div
    class="ouiPopover__anchor"
  >
    <button />
  </div>
</div>
`;

exports[`OuiPopover props arrowChildren is rendered 1`] = `
<div>
  <div
    class="ouiPopover ouiPopover--anchorDownCenter ouiPopover-isOpen"
    id="19"
  >
    <div
      class="ouiPopover__anchor"
    >
      <button />
    </div>
    <div
      data-focus-guard="true"
      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
      tabindex="-1"
    />
    <div
      data-focus-guard="true"
      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
      tabindex="-1"
    />
    <div
      data-focus-lock-disabled="disabled"
    >
      <div
        aria-describedby="generated-id"
        aria-live="off"
        aria-modal="true"
        class="ouiPanel ouiPanel--paddingMedium ouiPanel--borderRadiusMedium ouiPanel--plain ouiPanel--noShadow ouiPopover__panel ouiPopover__panel--bottom ouiPopover__panel-isOpen"
        data-autofocus="true"
        role="dialog"
        style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
        tabindex="0"
      >
        <div
          class="ouiPopover__panelArrow ouiPopover__panelArrow--bottom"
          style="left: 10px; top: 0px;"
        >
          <span />
        </div>
        <p
          class="ouiScreenReaderOnly"
          id="generated-id"
        >
          You are in a dialog. To close this dialog, hit escape.
        </p>
        <div />
      </div>
    </div>
    <div
      data-focus-guard="true"
      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
      tabindex="-1"
    />
  </div>
</div>
`;

exports[`OuiPopover props buffer 1`] = `
<div>
  <div
    class="ouiPopover ouiPopover--anchorDownCenter ouiPopover-isOpen"
    id="20"
  >
    <div
      class="ouiPopover__anchor"
    >
      <button />
    </div>
    <div
      data-focus-guard="true"
      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
      tabindex="-1"
    />
    <div
      data-focus-guard="true"
      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
      tabindex="-1"
    />
    <div
      data-focus-lock-disabled="disabled"
    >
      <div
        aria-describedby="generated-id"
        aria-live="off"
        aria-modal="true"
        class="ouiPanel ouiPanel--paddingMedium ouiPanel--borderRadiusMedium ouiPanel--plain ouiPanel--noShadow ouiPopover__panel ouiPopover__panel--bottom ouiPopover__panel-isOpen"
        data-autofocus="true"
        role="dialog"
        style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
        tabindex="0"
      >
        <div
          class="ouiPopover__panelArrow ouiPopover__panelArrow--bottom"
          style="left: 10px; top: 0px;"
        />
        <p
          class="ouiScreenReaderOnly"
          id="generated-id"
        >
          You are in a dialog. To close this dialog, hit escape.
        </p>
        <div />
      </div>
    </div>
    <div
      data-focus-guard="true"
      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
      tabindex="-1"
    />
  </div>
</div>
`;

exports[`OuiPopover props buffer for all sides 1`] = `
<div>
  <div
    class="ouiPopover ouiPopover--anchorDownCenter ouiPopover-isOpen"
    id="21"
  >
    <div
      class="ouiPopover__anchor"
    >
      <button />
    </div>
    <div
      data-focus-guard="true"
      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
      tabindex="-1"
    />
    <div
      data-focus-guard="true"
      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
      tabindex="-1"
    />
    <div
      data-focus-lock-disabled="disabled"
    >
      <div
        aria-describedby="generated-id"
        aria-live="off"
        aria-modal="true"
        class="ouiPanel ouiPanel--paddingMedium ouiPanel--borderRadiusMedium ouiPanel--plain ouiPanel--noShadow ouiPopover__panel ouiPopover__panel--bottom ouiPopover__panel-isOpen"
        data-autofocus="true"
        role="dialog"
        style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
        tabindex="0"
      >
        <div
          class="ouiPopover__panelArrow ouiPopover__panelArrow--bottom"
          style="left: 10px; top: 0px;"
        />
        <p
          class="ouiScreenReaderOnly"
          id="generated-id"
        >
          You are in a dialog. To close this dialog, hit escape.
        </p>
        <div />
      </div>
    </div>
    <div
      data-focus-guard="true"
      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
      tabindex="-1"
    />
  </div>
</div>
`;

exports[`OuiPopover props display block is rendered 1`] = `
<div
  class="ouiPopover ouiPopover--anchorDownCenter ouiPopover--displayBlock"
  id="2"
>
  <div
    class="ouiPopover__anchor"
  >
    <button />
  </div>
</div>
`;

exports[`OuiPopover props focusTrapProps is rendered 1`] = `
<div>
  <div
    class="ouiPopover ouiPopover--anchorDownCenter ouiPopover-isOpen"
    id="16"
  >
    <div
      class="ouiPopover__anchor"
    >
      <button />
    </div>
    <div
      data-focus-guard="true"
      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
      tabindex="-1"
    />
    <div
      data-focus-guard="true"
      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
      tabindex="-1"
    />
    <div
      data-focus-lock-disabled="disabled"
    >
      <div
        aria-describedby="generated-id"
        aria-live="off"
        aria-modal="true"
        class="ouiPanel ouiPanel--paddingMedium ouiPanel--borderRadiusMedium ouiPanel--plain ouiPanel--noShadow ouiPopover__panel ouiPopover__panel--bottom ouiPopover__panel-isOpen"
        data-autofocus="true"
        role="dialog"
        style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
        tabindex="0"
      >
        <div
          class="ouiPopover__panelArrow ouiPopover__panelArrow--bottom"
          style="left: 10px; top: 0px;"
        />
        <p
          class="ouiScreenReaderOnly"
          id="generated-id"
        >
          You are in a dialog. To close this dialog, hit escape.
        </p>
        <div />
      </div>
    </div>
    <div
      data-focus-guard="true"
      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
      tabindex="-1"
    />
  </div>
</div>
`;

exports[`OuiPopover props isOpen defaults to false 1`] = `
<div
  class="ouiPopover ouiPopover--anchorDownCenter"
  id="9"
>
  <div
    class="ouiPopover__anchor"
  >
    <button />
  </div>
</div>
`;

exports[`OuiPopover props isOpen renders true 1`] = `
<div>
  <div
    class="ouiPopover ouiPopover--anchorDownCenter ouiPopover-isOpen"
    id="10"
  >
    <div
      class="ouiPopover__anchor"
    >
      <button />
    </div>
    <div
      data-focus-guard="true"
      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
      tabindex="-1"
    />
    <div
      data-focus-guard="true"
      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
      tabindex="-1"
    />
    <div
      data-focus-lock-disabled="disabled"
    >
      <div
        aria-describedby="generated-id"
        aria-live="off"
        aria-modal="true"
        class="ouiPanel ouiPanel--paddingMedium ouiPanel--borderRadiusMedium ouiPanel--plain ouiPanel--noShadow ouiPopover__panel ouiPopover__panel--bottom ouiPopover__panel-isOpen"
        data-autofocus="true"
        role="dialog"
        style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
        tabindex="0"
      >
        <div
          class="ouiPopover__panelArrow ouiPopover__panelArrow--bottom"
          style="left: 10px; top: 0px;"
        />
        <p
          class="ouiScreenReaderOnly"
          id="generated-id"
        >
          You are in a dialog. To close this dialog, hit escape.
        </p>
        <div />
      </div>
    </div>
    <div
      data-focus-guard="true"
      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
      tabindex="-1"
    />
  </div>
</div>
`;

exports[`OuiPopover props offset with arrow 1`] = `
<div>
  <div
    class="ouiPopover ouiPopover--anchorDownCenter ouiPopover-isOpen"
    id="17"
    offset="10"
  >
    <div
      class="ouiPopover__anchor"
    >
      <button />
    </div>
    <div
      data-focus-guard="true"
      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
      tabindex="-1"
    />
    <div
      data-focus-guard="true"
      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
      tabindex="-1"
    />
    <div
      data-focus-lock-disabled="disabled"
    >
      <div
        aria-describedby="generated-id"
        aria-live="off"
        aria-modal="true"
        class="ouiPanel ouiPanel--paddingMedium ouiPanel--borderRadiusMedium ouiPanel--plain ouiPanel--noShadow ouiPopover__panel ouiPopover__panel--bottom ouiPopover__panel-isOpen"
        data-autofocus="true"
        role="dialog"
        style="top: 26px; left: -22px; will-change: transform, opacity; z-index: 2000;"
        tabindex="0"
      >
        <div
          class="ouiPopover__panelArrow ouiPopover__panelArrow--bottom"
          style="left: 10px; top: 0px;"
        />
        <p
          class="ouiScreenReaderOnly"
          id="generated-id"
        >
          You are in a dialog. To close this dialog, hit escape.
        </p>
        <div />
      </div>
    </div>
    <div
      data-focus-guard="true"
      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
      tabindex="-1"
    />
  </div>
</div>
`;

exports[`OuiPopover props offset without arrow 1`] = `
<div>
  <div
    class="ouiPopover ouiPopover--anchorDownCenter ouiPopover-isOpen"
    id="18"
    offset="10"
  >
    <div
      class="ouiPopover__anchor"
    >
      <button />
    </div>
    <div
      data-focus-guard="true"
      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
      tabindex="-1"
    />
    <div
      data-focus-guard="true"
      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
      tabindex="-1"
    />
    <div
      data-focus-lock-disabled="disabled"
    >
      <div
        aria-describedby="generated-id"
        aria-live="off"
        aria-modal="true"
        class="ouiPanel ouiPanel--paddingMedium ouiPanel--borderRadiusMedium ouiPanel--plain ouiPanel--noShadow ouiPopover__panel ouiPopover__panel--bottom ouiPopover__panel-isOpen ouiPopover__panel-noArrow"
        data-autofocus="true"
        role="dialog"
        style="top: 18px; left: -22px; will-change: transform, opacity; z-index: 2000;"
        tabindex="0"
      >
        <div
          class="ouiPopover__panelArrow ouiPopover__panelArrow--bottom"
        />
        <p
          class="ouiScreenReaderOnly"
          id="generated-id"
        >
          You are in a dialog. To close this dialog, hit escape.
        </p>
        <div />
      </div>
    </div>
    <div
      data-focus-guard="true"
      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
      tabindex="-1"
    />
  </div>
</div>
`;

exports[`OuiPopover props ownFocus defaults to true 1`] = `
<div>
  <div
    class="ouiPopover ouiPopover--anchorDownCenter ouiPopover-isOpen"
    id="11"
  >
    <div
      class="ouiPopover__anchor"
    >
      <button />
    </div>
    <div
      data-focus-guard="true"
      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
      tabindex="-1"
    />
    <div
      data-focus-guard="true"
      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
      tabindex="-1"
    />
    <div
      data-focus-lock-disabled="disabled"
    >
      <div
        aria-describedby="generated-id"
        aria-live="off"
        aria-modal="true"
        class="ouiPanel ouiPanel--paddingMedium ouiPanel--borderRadiusMedium ouiPanel--plain ouiPanel--noShadow ouiPopover__panel ouiPopover__panel--bottom ouiPopover__panel-isOpen"
        data-autofocus="true"
        role="dialog"
        style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
        tabindex="0"
      >
        <div
          class="ouiPopover__panelArrow ouiPopover__panelArrow--bottom"
          style="left: 10px; top: 0px;"
        />
        <p
          class="ouiScreenReaderOnly"
          id="generated-id"
        >
          You are in a dialog. To close this dialog, hit escape.
        </p>
        <div />
      </div>
    </div>
    <div
      data-focus-guard="true"
      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
      tabindex="-1"
    />
  </div>
</div>
`;

exports[`OuiPopover props ownFocus renders false 1`] = `
<div>
  <div
    class="ouiPopover ouiPopover--anchorDownCenter ouiPopover-isOpen"
    id="12"
  >
    <div
      class="ouiPopover__anchor"
    >
      <button />
    </div>
    <div
      data-focus-guard="true"
      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
      tabindex="-1"
    />
    <div
      data-focus-guard="true"
      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
      tabindex="-1"
    />
    <div
      data-focus-lock-disabled="disabled"
    >
      <div
        aria-live="assertive"
        aria-modal="true"
        class="ouiPanel ouiPanel--paddingMedium ouiPanel--borderRadiusMedium ouiPanel--plain ouiPanel--noShadow ouiPopover__panel ouiPopover__panel--bottom ouiPopover__panel-isOpen"
        role="dialog"
        style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
      >
        <div
          class="ouiPopover__panelArrow ouiPopover__panelArrow--bottom"
          style="left: 10px; top: 0px;"
        />
        <div />
      </div>
    </div>
    <div
      data-focus-guard="true"
      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
      tabindex="-1"
    />
  </div>
</div>
`;

exports[`OuiPopover props panelClassName is rendered 1`] = `
<div>
  <div
    class="ouiPopover ouiPopover--anchorDownCenter ouiPopover-isOpen"
    id="13"
  >
    <div
      class="ouiPopover__anchor"
    >
      <button />
    </div>
    <div
      data-focus-guard="true"
      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
      tabindex="-1"
    />
    <div
      data-focus-guard="true"
      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
      tabindex="-1"
    />
    <div
      data-focus-lock-disabled="disabled"
    >
      <div
        aria-describedby="generated-id"
        aria-live="off"
        aria-modal="true"
        class="ouiPanel ouiPanel--paddingMedium ouiPanel--borderRadiusMedium ouiPanel--plain ouiPanel--noShadow ouiPopover__panel ouiPopover__panel--bottom ouiPopover__panel-isOpen test"
        data-autofocus="true"
        role="dialog"
        style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
        tabindex="0"
      >
        <div
          class="ouiPopover__panelArrow ouiPopover__panelArrow--bottom"
          style="left: 10px; top: 0px;"
        />
        <p
          class="ouiScreenReaderOnly"
          id="generated-id"
        >
          You are in a dialog. To close this dialog, hit escape.
        </p>
        <div />
      </div>
    </div>
    <div
      data-focus-guard="true"
      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
      tabindex="-1"
    />
  </div>
</div>
`;

exports[`OuiPopover props panelPaddingSize is rendered 1`] = `
<div>
  <div
    class="ouiPopover ouiPopover--anchorDownCenter ouiPopover-isOpen"
    id="14"
  >
    <div
      class="ouiPopover__anchor"
    >
      <button />
    </div>
    <div
      data-focus-guard="true"
      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
      tabindex="-1"
    />
    <div
      data-focus-guard="true"
      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
      tabindex="-1"
    />
    <div
      data-focus-lock-disabled="disabled"
    >
      <div
        aria-describedby="generated-id"
        aria-live="off"
        aria-modal="true"
        class="ouiPanel ouiPanel--paddingSmall ouiPanel--borderRadiusMedium ouiPanel--plain ouiPanel--noShadow ouiPopover__panel ouiPopover__panel--bottom ouiPopover__panel-isOpen"
        data-autofocus="true"
        role="dialog"
        style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
        tabindex="0"
      >
        <div
          class="ouiPopover__panelArrow ouiPopover__panelArrow--bottom"
          style="left: 10px; top: 0px;"
        />
        <p
          class="ouiScreenReaderOnly"
          id="generated-id"
        >
          You are in a dialog. To close this dialog, hit escape.
        </p>
        <div />
      </div>
    </div>
    <div
      data-focus-guard="true"
      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
      tabindex="-1"
    />
  </div>
</div>
`;

exports[`OuiPopover props panelProps is rendered 1`] = `
<div>
  <div
    class="ouiPopover ouiPopover--anchorDownCenter ouiPopover-isOpen"
    id="15"
  >
    <div
      class="ouiPopover__anchor"
    >
      <button />
    </div>
    <div
      data-focus-guard="true"
      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
      tabindex="-1"
    />
    <div
      data-focus-guard="true"
      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
      tabindex="-1"
    />
    <div
      data-focus-lock-disabled="disabled"
    >
      <div
        aria-describedby="generated-id"
        aria-live="off"
        aria-modal="true"
        class="ouiPanel ouiPanel--paddingMedium ouiPanel--borderRadiusMedium ouiPanel--plain ouiPanel--noShadow ouiPopover__panel ouiPopover__panel--bottom ouiPopover__panel-isOpen testClass1 testClass2"
        data-autofocus="true"
        data-test-subj="test subject string"
        role="dialog"
        style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
        tabindex="0"
      >
        <div
          class="ouiPopover__panelArrow ouiPopover__panelArrow--bottom"
          style="left: 10px; top: 0px;"
        />
        <p
          class="ouiScreenReaderOnly"
          id="generated-id"
        >
          You are in a dialog. To close this dialog, hit escape.
        </p>
        <div />
      </div>
    </div>
    <div
      data-focus-guard="true"
      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
      tabindex="-1"
    />
  </div>
</div>
`;