text: function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
  
  import React, { useState, useRef, useCallback } from 'react';
  import styled from 'styled-components';
  import { BaseStyles, Overlay, Button, Text, ButtonDanger, ThemeProvider, Box } from '..';
  import { DropdownMenu, DropdownButton } from '../DropdownMenu';
  export default {
    title: 'Internal components/Overlay',
    component: Overlay,
    decorators: [Story => {
      return /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(Story, null)));
    }]
  };
  const DummyItem = styled.button.withConfig({
    displayName: "Overlaystories__DummyItem",
    componentId: "sc-92ppmu-0"
  })(["border-radius:6px;font-weight:400;padding:6px 8px;font-weight:400;text-align:left;margin:0;font-size:14px;background:none;border:none;&:hover{background:#f0f3f5;}&:focus{background:red;}"]);
  export const DropdownOverlay = () => {
    const [isOpen, setIsOpen] = useState(false);
    const buttonRef = useRef(null);
    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
      ref: buttonRef,
      sx: {
        position: 'relative'
      },
      onClick: () => setIsOpen(!isOpen)
    }, "open overlay"), isOpen ? /*#__PURE__*/React.createElement(Overlay, {
      returnFocusRef: buttonRef,
      height: "auto",
      width: "small",
      ignoreClickRefs: [buttonRef],
      onEscape: () => setIsOpen(false),
      onClickOutside: () => setIsOpen(false)
    }, /*#__PURE__*/React.createElement(Box, {
      display: "flex",
      flexDirection: "column",
      p: 2
    }, /*#__PURE__*/React.createElement(DummyItem, null, "Copy link"), /*#__PURE__*/React.createElement(DummyItem, null, "Quote reply"), /*#__PURE__*/React.createElement(DummyItem, null, "Reference in new issue"), /*#__PURE__*/React.createElement(DummyItem, null, "Edit"), /*#__PURE__*/React.createElement(DummyItem, null, "Delete"))) : null);
  };
  export const DialogOverlay = () => {
    const [isOpen, setIsOpen] = useState(false);
    const buttonRef = useRef(null);
    const confirmButtonRef = useRef(null);
    const anchorRef = useRef(null);
  
    const closeOverlay = () => setIsOpen(false);
  
    return /*#__PURE__*/React.createElement(Box, {
      position: "absolute",
      top: 0,
      left: 0,
      bottom: 0,
      right: 0,
      ref: anchorRef
    }, /*#__PURE__*/React.createElement(Button, {
      ref: buttonRef,
      onClick: () => setIsOpen(!isOpen)
    }, "open overlay"), isOpen ? /*#__PURE__*/React.createElement(Overlay, {
      initialFocusRef: confirmButtonRef,
      returnFocusRef: buttonRef,
      ignoreClickRefs: [buttonRef],
      onEscape: closeOverlay,
      onClickOutside: closeOverlay,
      width: "small"
    }, /*#__PURE__*/React.createElement(Box, {
      display: "flex",
      flexDirection: "column",
      p: 2
    }, /*#__PURE__*/React.createElement(Text, null, "Are you sure?"), /*#__PURE__*/React.createElement(ButtonDanger, {
      onClick: closeOverlay
    }, "Cancel"), /*#__PURE__*/React.createElement(Button, {
      onClick: closeOverlay,
      ref: confirmButtonRef
    }, "Confirm"))) : null);
  };
  DialogOverlay.displayName = "DialogOverlay";
  export const OverlayOnTopOfOverlay = () => {
    const [isOpen, setIsOpen] = useState(false);
    const [isSecondaryOpen, setIsSecondaryOpen] = useState(false);
    const buttonRef = useRef(null);
    const secondaryButtonRef = useRef(null);
    const confirmButtonRef = useRef(null);
    const anchorRef = useRef(null);
  
    const closeOverlay = () => setIsOpen(false); // intentionally not memoized
  
  
    const closeSecondaryOverlay = useCallback(() => setIsSecondaryOpen(false), [setIsSecondaryOpen]);
    const items = React.useMemo(() => [{
      text: '🔵 Cyan',
      onMouseDown: e => {
        e.preventDefault();
      }
    }, {
      text: '🔴 Magenta',
      onMouseDown: e => {
        e.preventDefault();
      }
    }, {
      text: '🟡 Yellow',
      onMouseDown: e => {
        e.preventDefault();
      }
    }], []);
    const [selectedItem, setSelectedItem] = React.useState();
    return /*#__PURE__*/React.createElement(Box, {
      position: "absolute",
      top: 0,
      left: 0,
      bottom: 0,
      right: 0,
      ref: anchorRef
    }, /*#__PURE__*/React.createElement("input", {
      placeholder: "Input for focus testing"
    }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Button, {
      ref: buttonRef,
      onClick: () => setIsOpen(!isOpen)
    }, "open overlay"), isOpen ? /*#__PURE__*/React.createElement(Overlay, {
      initialFocusRef: confirmButtonRef,
      returnFocusRef: buttonRef,
      onEscape: closeOverlay,
      onClickOutside: closeOverlay,
      width: "small"
    }, /*#__PURE__*/React.createElement(Button, {
      ref: secondaryButtonRef,
      onClick: () => setIsSecondaryOpen(!isSecondaryOpen)
    }, "open overlay"), isSecondaryOpen ? /*#__PURE__*/React.createElement(Overlay, {
      initialFocusRef: confirmButtonRef,
      returnFocusRef: secondaryButtonRef,
      onEscape: closeSecondaryOverlay,
      onClickOutside: closeSecondaryOverlay,
      width: "small",
      sx: {
        top: '40px'
      }
    }, /*#__PURE__*/React.createElement(Box, {
      display: "flex",
      flexDirection: "column",
      p: 2
    }, /*#__PURE__*/React.createElement(Text, null, "Select an option!"), /*#__PURE__*/React.createElement(DropdownMenu, {
      renderAnchor: ({
        children,
        'aria-labelledby': ariaLabelledBy,
        ...anchorProps
      }) => /*#__PURE__*/React.createElement(DropdownButton, _extends({
        "aria-labelledby": `favorite-color-label ${ariaLabelledBy}`
      }, anchorProps), children),
      placeholder: "\uD83C\uDFA8",
      items: items,
      selectedItem: selectedItem,
      onChange: setSelectedItem
    }))) : null) : null);
  };
  OverlayOnTopOfOverlay.displayName = "OverlayOnTopOfOverlay";