@primer/components 29.1.1 → 30.0.0-rc.48fd5c94

package/lib/stories/ConfirmationDialog.stories.js

@@ -0,0 +1,111 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ShorthandHookFromActionMenu = exports.ShorthandHook = exports.BasicConfirmationDialog = exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ = require("..");
+
+var _ConfirmationDialog = require("../Dialog/ConfirmationDialog");
+
+var _ActionMenu = require("../ActionMenu");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var _default = {
+  title: 'Internal components/ConfirmationDialog',
+  component: _ConfirmationDialog.ConfirmationDialog,
+  decorators: [Story => {
+    // Since portal roots are registered globally, we need this line so that each storybook
+    // story works in isolation.
+    return /*#__PURE__*/_react.default.createElement(_.ThemeProvider, null, /*#__PURE__*/_react.default.createElement(_.BaseStyles, null, /*#__PURE__*/_react.default.createElement(Story, null)));
+  }]
+};
+exports.default = _default;
+
+const BasicConfirmationDialog = () => {
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  const buttonRef = (0, _react.useRef)(null);
+  const onDialogClose = (0, _react.useCallback)(() => setIsOpen(false), []);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.Button, {
+    ref: buttonRef,
+    onClick: () => setIsOpen(!isOpen)
+  }, "Show dialog"), isOpen && /*#__PURE__*/_react.default.createElement(_ConfirmationDialog.ConfirmationDialog, {
+    title: "Delete universe?",
+    onClose: onDialogClose,
+    confirmButtonContent: "Delete it!",
+    confirmButtonType: "danger"
+  }, "Deleting the universe could have disastrous effects, including but not limited to destroying all life on Earth."));
+};
+
+exports.BasicConfirmationDialog = BasicConfirmationDialog;
+
+const ShorthandHook = () => {
+  const confirm = (0, _ConfirmationDialog.useConfirm)();
+  const {
+    theme
+  } = (0, _.useTheme)();
+  const onButtonClick = (0, _react.useCallback)(async event => {
+    if ((await confirm({
+      title: 'Are you sure?',
+      content: 'Do you really want to turn this button green?'
+    })) && event.target instanceof HTMLElement) {
+      var _theme$colors$auto$gr;
+
+      event.target.style.backgroundColor = (_theme$colors$auto$gr = theme === null || theme === void 0 ? void 0 : theme.colors.auto.green[3]) !== null && _theme$colors$auto$gr !== void 0 ? _theme$colors$auto$gr : 'green';
+      event.target.textContent = "I'm green!";
+    }
+  }, [confirm, theme]);
+  return /*#__PURE__*/_react.default.createElement(_.Box, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start"
+  }, /*#__PURE__*/_react.default.createElement(_.Button, {
+    mb: 2,
+    onClick: onButtonClick
+  }, "Turn me green!"), /*#__PURE__*/_react.default.createElement(_.Button, {
+    mb: 2,
+    onClick: onButtonClick
+  }, "Turn me green!"), /*#__PURE__*/_react.default.createElement(_.Button, {
+    mb: 2,
+    onClick: onButtonClick
+  }, "Turn me green!"), /*#__PURE__*/_react.default.createElement(_.Button, {
+    mb: 2,
+    onClick: onButtonClick
+  }, "Turn me green!"));
+};
+
+exports.ShorthandHook = ShorthandHook;
+ShorthandHook.displayName = "ShorthandHook";
+
+const ShorthandHookFromActionMenu = () => {
+  const confirm = (0, _ConfirmationDialog.useConfirm)();
+  const [text, setText] = (0, _react.useState)('open me');
+  const onButtonClick = (0, _react.useCallback)(async () => {
+    if (await confirm({
+      title: 'Are you sure?',
+      content: 'Do you really want to do a trick?'
+    })) {
+      setText('tada!');
+    }
+  }, [confirm]);
+  return /*#__PURE__*/_react.default.createElement(_.Box, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start"
+  }, /*#__PURE__*/_react.default.createElement(_ActionMenu.ActionMenu, {
+    renderAnchor: props => /*#__PURE__*/_react.default.createElement(_.Button, props, text),
+    items: [{
+      text: 'Do a trick!',
+      onAction: onButtonClick
+    }]
+  }));
+};
+
+exports.ShorthandHookFromActionMenu = ShorthandHookFromActionMenu;
+ShorthandHookFromActionMenu.displayName = "ShorthandHookFromActionMenu";

package/lib/stories/Dialog.stories.js

@@ -0,0 +1,265 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StressTest = exports.WithCustomRenderers = exports.BasicDialog = exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _2 = require("..");
+
+var _Dialog = require("../Dialog/Dialog");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var _default = {
+  title: 'Internal components/Dialog',
+  component: _Dialog.Dialog,
+  decorators: [Story => {
+    // Since portal roots are registered globally, we need this line so that each storybook
+    // story works in isolation.
+    return /*#__PURE__*/_react.default.createElement(_2.ThemeProvider, null, /*#__PURE__*/_react.default.createElement(_2.BaseStyles, null, /*#__PURE__*/_react.default.createElement(Story, null)));
+  }],
+  argTypes: {
+    width: {
+      defaultValue: 'xlarge',
+      control: {
+        type: 'radio',
+        options: ['small', 'medium', 'large', 'xlarge']
+      }
+    },
+    height: {
+      defaultValue: 'auto',
+      control: {
+        type: 'radio',
+        options: ['small', 'large', 'auto']
+      }
+    },
+    subtitle: {
+      name: 'show subtitle',
+      defaultValue: true,
+      control: {
+        type: 'boolean'
+      }
+    },
+    title: {
+      table: {
+        disable: true
+      }
+    },
+    renderHeader: {
+      table: {
+        disable: true
+      }
+    },
+    renderBody: {
+      table: {
+        disable: true
+      }
+    },
+    renderFooter: {
+      table: {
+        disable: true
+      }
+    },
+    onClose: {
+      table: {
+        disable: true
+      }
+    },
+    role: {
+      table: {
+        disable: true
+      }
+    },
+    ref: {
+      table: {
+        disable: true
+      }
+    },
+    key: {
+      table: {
+        disable: true
+      }
+    },
+    footerButtons: {
+      table: {
+        disable: true
+      }
+    }
+  }
+};
+exports.default = _default;
+
+const lipsum = /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    fontSize: '14px'
+  }
+}, /*#__PURE__*/_react.default.createElement("p", {
+  style: {
+    marginBlockStart: 0
+  }
+}, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sollicitudin mauris maximus elit sagittis, nec lobortis ligula elementum. Nam iaculis, urna nec lobortis posuere, eros urna venenatis eros, vel accumsan turpis nunc vitae enim. Maecenas et lorem lectus. Vivamus iaculis tortor eget ante placerat, nec posuere nisl tincidunt. Cras condimentum ante in accumsan ultricies. Morbi quis porta est, sit amet congue augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consequat nunc id quam tempus, id tincidunt neque venenatis. Mauris fringilla tempor est, vitae fermentum enim elementum vitae. Nullam eleifend odio ut porta efficitur. Phasellus luctus tempus posuere."), /*#__PURE__*/_react.default.createElement("p", null, "Curabitur scelerisque bibendum faucibus. Duis rhoncus nunc est, at pharetra eros tristique a. Nam sodales turpis lectus, quis faucibus felis fermentum in. Curabitur vel velit vel eros laoreet pharetra. Aenean in facilisis sapien, eu porttitor ex. Donec ultrices ac arcu ut lobortis. Pellentesque vitae rutrum orci. Etiam pretium et enim sit amet scelerisque. Nulla sed odio nec lorem dapibus condimentum at sagittis quam. Sed in ornare ex, sed luctus sem. Mauris a est tellus."), /*#__PURE__*/_react.default.createElement("p", null, "Sed fringilla est ac urna aliquet, eget condimentum felis vulputate. Sed sagittis eros non mauris sodales molestie. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam ante leo, condimentum sed lectus non, rutrum octopodes urna. Mauris neque ante, interdum molestie tellus pharetra, eleifend dapibus justo. Sed at diam ligula. Donec dapibus ipsum quis elit euismod, sed suscipit eros euismod. Aliquam pretium felis quis risus luctus fringilla. Ut purus lacus, mattis a turpis eget, sollicitudin pellentesque neque."), /*#__PURE__*/_react.default.createElement("p", null, "Nunc sodales quis ante quis porttitor. Vestibulum ornare lacinia ante. Donec a nisi nec arcu aliquam pretium in nec nunc. Donec fringilla erat vitae viverra feugiat. Sed non odio vel ipsum porttitor maximus. Donec id eleifend lectus. Proin varius felis sit amet neque eleifend, vitae porttitor ligula commodo."), /*#__PURE__*/_react.default.createElement("p", null, "Vivamus felis quam, porttitor a justo sit amet, placerat ultricies nisl. Suspendisse potenti. Maecenas non consequat lorem, eu porta ante. Pellentesque elementum diam sapien, nec ultrices risus convallis eget. Nam pharetra dolor at dictum tempor. Quisque ut est a ligula hendrerit sodales. Curabitur ornare a nulla in laoreet. Maecenas semper mi egestas, dignissim nisi et, elementum neque."));
+
+const BasicDialog = ({
+  width,
+  height,
+  subtitle
+}) => {
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  const [secondOpen, setSecondOpen] = (0, _react.useState)(false);
+  const buttonRef = (0, _react.useRef)(null);
+  const onDialogClose = (0, _react.useCallback)(() => setIsOpen(false), []);
+  const onSecondDialogClose = (0, _react.useCallback)(() => setSecondOpen(false), []);
+  const openSecondDialog = (0, _react.useCallback)(() => setSecondOpen(true), []);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_2.Button, {
+    ref: buttonRef,
+    onClick: () => setIsOpen(!isOpen)
+  }, "Show dialog"), isOpen && /*#__PURE__*/_react.default.createElement(_Dialog.Dialog, {
+    title: "My Dialog",
+    subtitle: subtitle ? 'This is a subtitle!' : undefined,
+    onClose: onDialogClose,
+    width: width,
+    height: height,
+    footerButtons: [{
+      buttonType: 'danger',
+      content: 'Delete the universe',
+      onClick: onDialogClose
+    }, {
+      buttonType: 'primary',
+      content: 'Proceed',
+      onClick: openSecondDialog,
+      autoFocus: true
+    }]
+  }, lipsum, secondOpen && /*#__PURE__*/_react.default.createElement(_Dialog.Dialog, {
+    title: "Inner dialog!",
+    onClose: onSecondDialogClose,
+    width: "small"
+  }, "Hello world")));
+};
+
+exports.BasicDialog = BasicDialog;
+
+function CustomHeader({
+  title,
+  subtitle,
+  dialogLabelId,
+  dialogDescriptionId,
+  onClose
+}) {
+  const onCloseClick = (0, _react.useCallback)(() => {
+    onClose('close-button');
+  }, [onClose]);
+
+  if (typeof title === 'string' && typeof subtitle === 'string') {
+    return /*#__PURE__*/_react.default.createElement(_2.Box, {
+      bg: "auto.blue.3"
+    }, /*#__PURE__*/_react.default.createElement("h1", {
+      id: dialogLabelId
+    }, title.toUpperCase()), /*#__PURE__*/_react.default.createElement("h2", {
+      id: dialogDescriptionId
+    }, subtitle.toLowerCase()), /*#__PURE__*/_react.default.createElement(_Dialog.Dialog.CloseButton, {
+      onClose: onCloseClick
+    }));
+  }
+
+  return null;
+}
+
+function CustomBody({
+  children
+}) {
+  return /*#__PURE__*/_react.default.createElement(_Dialog.Dialog.Body, {
+    bg: "auto.red.3"
+  }, children);
+}
+
+CustomBody.displayName = "CustomBody";
+
+function CustomFooter({
+  footerButtons
+}) {
+  return /*#__PURE__*/_react.default.createElement(_Dialog.Dialog.Footer, {
+    bg: "auto.yellow.3"
+  }, footerButtons ? /*#__PURE__*/_react.default.createElement(_Dialog.Dialog.Buttons, {
+    buttons: footerButtons
+  }) : null);
+}
+
+CustomFooter.displayName = "CustomFooter";
+
+const WithCustomRenderers = ({
+  width,
+  height,
+  subtitle
+}) => {
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  const onDialogClose = (0, _react.useCallback)(() => setIsOpen(false), []);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_2.Button, {
+    onClick: () => setIsOpen(!isOpen)
+  }, "Show dialog"), isOpen && /*#__PURE__*/_react.default.createElement(_Dialog.Dialog, {
+    title: "My Dialog",
+    subtitle: subtitle ? 'This is a subtitle!' : undefined,
+    width: width,
+    height: height,
+    renderHeader: CustomHeader,
+    renderBody: CustomBody,
+    renderFooter: CustomFooter,
+    onClose: onDialogClose,
+    footerButtons: [{
+      buttonType: 'danger',
+      content: 'Delete the universe',
+      onClick: onDialogClose
+    }, {
+      buttonType: 'primary',
+      content: 'Proceed'
+    }]
+  }, lipsum));
+};
+
+exports.WithCustomRenderers = WithCustomRenderers;
+
+const StressTest = ({
+  width,
+  height,
+  subtitle
+}) => {
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  const [secondOpen, setSecondOpen] = (0, _react.useState)(false);
+  const buttonRef = (0, _react.useRef)(null);
+  const onDialogClose = (0, _react.useCallback)(() => setIsOpen(false), []);
+  const onSecondDialogClose = (0, _react.useCallback)(() => setSecondOpen(false), []);
+  const openSecondDialog = (0, _react.useCallback)(() => setSecondOpen(true), []);
+  const manyButtons = new Array(10).fill(undefined).map((_, i) => ({
+    content: `Button ${i}`
+  }));
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_2.Button, {
+    ref: buttonRef,
+    onClick: () => setIsOpen(!isOpen)
+  }, "Show dialog"), isOpen && /*#__PURE__*/_react.default.createElement(_Dialog.Dialog, {
+    title: "This dialog has a really long title. So long, in fact, that it should cause wrapping, going to multiple lines!.",
+    subtitle: subtitle ? "It's not a common scenario, sure, but what if the subtitle is generated from a really long value? Do we just break the dialog? Or do we handle it because we are pros?" : undefined,
+    onClose: onDialogClose,
+    width: width,
+    height: height,
+    footerButtons: [...manyButtons, {
+      buttonType: 'danger',
+      content: 'Delete the universe',
+      onClick: onDialogClose
+    }, {
+      buttonType: 'primary',
+      content: 'Proceed',
+      onClick: openSecondDialog,
+      autoFocus: true
+    }]
+  }, lipsum, secondOpen && /*#__PURE__*/_react.default.createElement(_Dialog.Dialog, {
+    title: "Inner dialog!",
+    onClose: onSecondDialogClose,
+    width: "small"
+  }, "Hello world")));
+};
+
+exports.StressTest = StressTest;

package/lib/stories/DropdownMenu.stories.js

@@ -0,0 +1,122 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FavoriteColorStory = FavoriteColorStory;
+exports.ExternalAnchorStory = ExternalAnchorStory;
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+var _BaseStyles = _interopRequireDefault(require("../BaseStyles"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _DropdownMenu = require("../DropdownMenu");
+
+var _TextInput = _interopRequireDefault(require("../TextInput"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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); }
+
+const meta = {
+  title: 'Composite components/DropdownMenu',
+  component: _DropdownMenu.DropdownMenu,
+  decorators: [Story => {
+    return /*#__PURE__*/_react.default.createElement(_.ThemeProvider, {
+      theme: _.theme
+    }, /*#__PURE__*/_react.default.createElement(_BaseStyles.default, null, /*#__PURE__*/_react.default.createElement(Story, null)));
+  }],
+  parameters: {
+    controls: {
+      disable: true
+    }
+  }
+};
+var _default = meta;
+exports.default = _default;
+
+function FavoriteColorStory() {
+  const items = _react.default.useMemo(() => [{
+    text: '🔵 Cyan'
+  }, {
+    text: '🔴 Magenta'
+  }, {
+    text: '🟡 Yellow'
+  }], []);
+
+  const [selectedItem, setSelectedItem] = _react.default.useState();
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Favorite Color"), /*#__PURE__*/_react.default.createElement(_TextInput.default, {
+    placeholder: "Input for focus testing",
+    sx: {
+      mb: 2
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    id: "favorite-color-label"
+  }, "Please select your favorite color:"), /*#__PURE__*/_react.default.createElement(_DropdownMenu.DropdownMenu, {
+    renderAnchor: ({
+      children,
+      'aria-labelledby': ariaLabelledBy,
+      ...anchorProps
+    }) => /*#__PURE__*/_react.default.createElement(_DropdownMenu.DropdownButton, _extends({
+      "aria-labelledby": `favorite-color-label ${ariaLabelledBy}`
+    }, anchorProps), children),
+    placeholder: "\uD83C\uDFA8",
+    items: items,
+    selectedItem: selectedItem,
+    onChange: setSelectedItem
+  }));
+}
+
+FavoriteColorStory.storyName = 'Favorite Color';
+
+function ExternalAnchorStory() {
+  const items = _react.default.useMemo(() => [{
+    text: '🔵 Cyan'
+  }, {
+    text: '🔴 Magenta'
+  }, {
+    text: '🟡 Yellow'
+  }], []);
+
+  const [selectedItem, setSelectedItem] = _react.default.useState();
+
+  const anchorRef = _react.default.useRef(null);
+
+  const [open, setOpen] = _react.default.useState(false);
+
+  return /*#__PURE__*/_react.default.createElement(_Box.default, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start"
+  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
+    display: "flex",
+    flexDirection: "row"
+  }, /*#__PURE__*/_react.default.createElement(_DropdownMenu.DropdownButton, {
+    onClick: () => setOpen(true)
+  }, "Click me to open the dropdown"), /*#__PURE__*/_react.default.createElement(_Box.default, {
+    ref: anchorRef,
+    bg: "papayawhip",
+    p: 4,
+    ml: 40,
+    borderRadius: 2,
+    display: "inline-block"
+  }, "Anchored on me!")), /*#__PURE__*/_react.default.createElement(_DropdownMenu.DropdownMenu, {
+    renderAnchor: null,
+    anchorRef: anchorRef,
+    open: open,
+    onOpenChange: setOpen,
+    placeholder: "\uD83C\uDFA8",
+    items: items,
+    selectedItem: selectedItem,
+    onChange: setSelectedItem
+  }));
+}
+
+ExternalAnchorStory.displayName = "ExternalAnchorStory";
+ExternalAnchorStory.storyName = 'DropdownMenu with External Anchor';

package/lib/stories/Overlay.stories.js

@@ -0,0 +1,185 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OverlayOnTopOfOverlay = exports.DialogOverlay = exports.DropdownOverlay = exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _ = require("..");
+
+var _DropdownMenu = require("../DropdownMenu");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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); }
+
+var _default = {
+  title: 'Internal components/Overlay',
+  component: _.Overlay,
+  decorators: [Story => {
+    return /*#__PURE__*/_react.default.createElement(_.ThemeProvider, null, /*#__PURE__*/_react.default.createElement(_.BaseStyles, null, /*#__PURE__*/_react.default.createElement(Story, null)));
+  }]
+};
+exports.default = _default;
+
+const DummyItem = _styledComponents.default.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;}"]);
+
+const DropdownOverlay = () => {
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  const buttonRef = (0, _react.useRef)(null);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.Button, {
+    ref: buttonRef,
+    sx: {
+      position: 'relative'
+    },
+    onClick: () => setIsOpen(!isOpen)
+  }, "open overlay"), isOpen ? /*#__PURE__*/_react.default.createElement(_.Overlay, {
+    returnFocusRef: buttonRef,
+    height: "auto",
+    width: "small",
+    ignoreClickRefs: [buttonRef],
+    onEscape: () => setIsOpen(false),
+    onClickOutside: () => setIsOpen(false)
+  }, /*#__PURE__*/_react.default.createElement(_.Box, {
+    display: "flex",
+    flexDirection: "column",
+    p: 2
+  }, /*#__PURE__*/_react.default.createElement(DummyItem, null, "Copy link"), /*#__PURE__*/_react.default.createElement(DummyItem, null, "Quote reply"), /*#__PURE__*/_react.default.createElement(DummyItem, null, "Reference in new issue"), /*#__PURE__*/_react.default.createElement(DummyItem, null, "Edit"), /*#__PURE__*/_react.default.createElement(DummyItem, null, "Delete"))) : null);
+};
+
+exports.DropdownOverlay = DropdownOverlay;
+
+const DialogOverlay = () => {
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  const buttonRef = (0, _react.useRef)(null);
+  const confirmButtonRef = (0, _react.useRef)(null);
+  const anchorRef = (0, _react.useRef)(null);
+
+  const closeOverlay = () => setIsOpen(false);
+
+  return /*#__PURE__*/_react.default.createElement(_.Box, {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+    ref: anchorRef
+  }, /*#__PURE__*/_react.default.createElement(_.Button, {
+    ref: buttonRef,
+    onClick: () => setIsOpen(!isOpen)
+  }, "open overlay"), isOpen ? /*#__PURE__*/_react.default.createElement(_.Overlay, {
+    initialFocusRef: confirmButtonRef,
+    returnFocusRef: buttonRef,
+    ignoreClickRefs: [buttonRef],
+    onEscape: closeOverlay,
+    onClickOutside: closeOverlay,
+    width: "small"
+  }, /*#__PURE__*/_react.default.createElement(_.Box, {
+    display: "flex",
+    flexDirection: "column",
+    p: 2
+  }, /*#__PURE__*/_react.default.createElement(_.Text, null, "Are you sure?"), /*#__PURE__*/_react.default.createElement(_.ButtonDanger, {
+    onClick: closeOverlay
+  }, "Cancel"), /*#__PURE__*/_react.default.createElement(_.Button, {
+    onClick: closeOverlay,
+    ref: confirmButtonRef
+  }, "Confirm"))) : null);
+};
+
+exports.DialogOverlay = DialogOverlay;
+DialogOverlay.displayName = "DialogOverlay";
+
+const OverlayOnTopOfOverlay = () => {
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  const [isSecondaryOpen, setIsSecondaryOpen] = (0, _react.useState)(false);
+  const buttonRef = (0, _react.useRef)(null);
+  const secondaryButtonRef = (0, _react.useRef)(null);
+  const confirmButtonRef = (0, _react.useRef)(null);
+  const anchorRef = (0, _react.useRef)(null);
+
+  const closeOverlay = () => setIsOpen(false); // intentionally not memoized
+
+
+  const closeSecondaryOverlay = (0, _react.useCallback)(() => setIsSecondaryOpen(false), [setIsSecondaryOpen]);
+
+  const items = _react.default.useMemo(() => [{
+    text: '🔵 Cyan',
+    onMouseDown: e => {
+      e.preventDefault();
+    }
+  }, {
+    text: '🔴 Magenta',
+    onMouseDown: e => {
+      e.preventDefault();
+    }
+  }, {
+    text: '🟡 Yellow',
+    onMouseDown: e => {
+      e.preventDefault();
+    }
+  }], []);
+
+  const [selectedItem, setSelectedItem] = _react.default.useState();
+
+  return /*#__PURE__*/_react.default.createElement(_.Box, {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+    ref: anchorRef
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    placeholder: "Input for focus testing"
+  }), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_.Button, {
+    ref: buttonRef,
+    onClick: () => setIsOpen(!isOpen)
+  }, "open overlay"), isOpen ? /*#__PURE__*/_react.default.createElement(_.Overlay, {
+    initialFocusRef: confirmButtonRef,
+    returnFocusRef: buttonRef,
+    onEscape: closeOverlay,
+    onClickOutside: closeOverlay,
+    width: "small"
+  }, /*#__PURE__*/_react.default.createElement(_.Button, {
+    ref: secondaryButtonRef,
+    onClick: () => setIsSecondaryOpen(!isSecondaryOpen)
+  }, "open overlay"), isSecondaryOpen ? /*#__PURE__*/_react.default.createElement(_.Overlay, {
+    initialFocusRef: confirmButtonRef,
+    returnFocusRef: secondaryButtonRef,
+    onEscape: closeSecondaryOverlay,
+    onClickOutside: closeSecondaryOverlay,
+    width: "small",
+    sx: {
+      top: '40px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_.Box, {
+    display: "flex",
+    flexDirection: "column",
+    p: 2
+  }, /*#__PURE__*/_react.default.createElement(_.Text, null, "Select an option!"), /*#__PURE__*/_react.default.createElement(_DropdownMenu.DropdownMenu, {
+    renderAnchor: ({
+      children,
+      'aria-labelledby': ariaLabelledBy,
+      ...anchorProps
+    }) => /*#__PURE__*/_react.default.createElement(_DropdownMenu.DropdownButton, _extends({
+      "aria-labelledby": `favorite-color-label ${ariaLabelledBy}`
+    }, anchorProps), children),
+    placeholder: "\uD83C\uDFA8",
+    items: items,
+    selectedItem: selectedItem,
+    onChange: setSelectedItem
+  }))) : null) : null);
+};
+
+exports.OverlayOnTopOfOverlay = OverlayOnTopOfOverlay;
+OverlayOnTopOfOverlay.displayName = "OverlayOnTopOfOverlay";