@primer/components 29.1.0-rc.79e8b21e → 29.1.0

package/lib-esm/stories/ActionMenu.stories.js

@@ -1,293 +0,0 @@
-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 { ServerIcon, PlusCircleIcon, TypographyIcon, VersionsIcon, SearchIcon, NoteIcon, ProjectIcon, FilterIcon, GearIcon, ArrowRightIcon } from '@primer/octicons-react';
-import React, { useCallback, useState, useRef } from 'react';
-import styled from 'styled-components';
-import { ThemeProvider } from '..';
-import { ActionMenu } from '../ActionMenu';
-import Link from '../Link';
-import Button from '../Button';
-import { ActionList } from '../ActionList';
-import BaseStyles from '../BaseStyles';
-import { DropdownButton } from '../DropdownMenu';
-const meta = {
-  title: 'Composite components/ActionMenu',
-  component: ActionMenu,
-  decorators: [Story => /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(Story, null)))],
-  parameters: {
-    controls: {
-      disabled: true
-    }
-  }
-};
-export default meta;
-const ErsatzOverlay = styled.div.withConfig({
-  displayName: "ActionMenustories__ErsatzOverlay",
-  componentId: "sc-1bfovxa-0"
-})(["border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,0.12),0 8px 24px rgba(149,157,165,0.2);padding:8px;"]);
-export function ActionsStory() {
-  const [option, setOption] = useState('Select an option');
-
-  const onAction = itemProps => {
-    var _itemProps$text;
-
-    setOption((_itemProps$text = itemProps.text) !== null && _itemProps$text !== void 0 ? _itemProps$text : '');
-  };
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Actions"), /*#__PURE__*/React.createElement("h2", null, "Last option activated: ", option), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionMenu, {
-    onAction: onAction,
-    anchorContent: /*#__PURE__*/React.createElement(ServerIcon, null),
-    items: [{
-      leadingVisual: ServerIcon,
-      text: 'Open current Codespace',
-      description: "Your existing Codespace will be opened to its previous state, and you'll be asked to manually switch to new-branch.",
-      descriptionVariant: 'block',
-      trailingText: '⌘O'
-    }, {
-      leadingVisual: PlusCircleIcon,
-      text: 'Create new Codespace',
-      description: 'Create a brand new Codespace with a fresh image and checkout this branch.',
-      descriptionVariant: 'block',
-      trailingText: '⌘C'
-    }]
-  })));
-}
-ActionsStory.storyName = 'Actions';
-export function SimpleListStory() {
-  const [option, setOption] = useState('Select an option');
-
-  const onAction = itemProps => {
-    setOption(itemProps.text || '');
-  };
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Simple List"), /*#__PURE__*/React.createElement("h2", null, "Last option activated: ", option), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionMenu, {
-    onAction: onAction,
-    anchorContent: "Menu",
-    overlayProps: {
-      'data-test-id': 'some_test_id',
-      onMouseDown: e => // eslint-disable-next-line no-console
-      console.log('onMouseDown in the internal Overlay can be useful for controlling event interactions', e)
-    },
-    items: [{
-      text: 'New file',
-      trailingText: '⌘O',
-      disabled: true,
-      leadingVisual: ProjectIcon
-    }, ActionList.Divider, {
-      text: 'Copy link',
-      trailingText: 'ctrl+C'
-    }, {
-      text: 'Edit file',
-      trailingText: '⌘E'
-    }, {
-      text: 'Delete file',
-      variant: 'danger',
-      trailingText: '⌘D'
-    }]
-  })));
-}
-SimpleListStory.storyName = 'Simple List';
-export function ExternalOpenState() {
-  const [option, setOption] = useState('Select an option');
-  const [open, setOpen] = useState(false);
-
-  const onAction = itemProps => {
-    setOption(itemProps.text);
-  };
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Simple List"), /*#__PURE__*/React.createElement("h2", null, "Last option activated: ", option), /*#__PURE__*/React.createElement("h2", null, "External Open State: ", open ? 'Open' : 'Closed'), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
-    onClick: () => setOpen(!open)
-  }, "Toggle External State")), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionMenu, {
-    onAction: onAction,
-    anchorContent: "Menu",
-    open: open,
-    setOpen: setOpen,
-    items: [{
-      text: 'New file',
-      trailingText: '⌘O',
-      disabled: true,
-      leadingVisual: ProjectIcon
-    }, ActionList.Divider, {
-      text: 'Copy link',
-      trailingText: 'ctrl+C'
-    }, {
-      text: 'Edit file',
-      trailingText: '⌘E'
-    }, {
-      text: 'Delete file',
-      variant: 'danger',
-      trailingText: '⌘D'
-    }]
-  })));
-}
-ExternalOpenState.storyName = 'External Open State';
-export function ComplexListStory() {
-  const [option, setOption] = useState('Select an option');
-
-  const onAction = itemProps => {
-    setOption(itemProps.text || '');
-  };
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Complex List"), /*#__PURE__*/React.createElement("h2", null, "Last option activated: ", option), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionMenu, {
-    onAction: onAction,
-    anchorContent: "Menu",
-    groupMetadata: [{
-      groupId: '0'
-    }, {
-      groupId: '1',
-      header: {
-        title: 'Live query',
-        variant: 'subtle'
-      }
-    }, {
-      groupId: '2',
-      header: {
-        title: 'Layout',
-        variant: 'subtle'
-      }
-    }, {
-      groupId: '3',
-      renderItem: props => /*#__PURE__*/React.createElement(ActionList.Item, _extends({
-        style: {
-          fontWeight: 'bold'
-        }
-      }, props))
-    }, {
-      groupId: '4'
-    }],
-    items: [{
-      leadingVisual: TypographyIcon,
-      text: 'Rename',
-      groupId: '0'
-    }, {
-      leadingVisual: VersionsIcon,
-      text: 'Duplicate',
-      groupId: '0'
-    }, {
-      leadingVisual: SearchIcon,
-      text: 'repo:github/github',
-      groupId: '1',
-      renderItem: props => /*#__PURE__*/React.createElement(ActionList.Item, _extends({
-        style: {
-          color: 'rebeccapurple'
-        }
-      }, props)),
-      trailingText: '⌘S',
-      trailingIcon: ArrowRightIcon
-    }, {
-      leadingVisual: NoteIcon,
-      text: 'Table',
-      description: 'Information-dense table optimized for operations across teams',
-      descriptionVariant: 'block',
-      groupId: '2'
-    }, {
-      leadingVisual: ProjectIcon,
-      text: 'Board',
-      description: 'Kanban-style board focused on visual states',
-      descriptionVariant: 'block',
-      groupId: '2'
-    }, {
-      leadingVisual: FilterIcon,
-      text: 'Save sort and filters to current view',
-      groupId: '3'
-    }, {
-      leadingVisual: FilterIcon,
-      text: 'Save sort and filters to new view',
-      groupId: '3'
-    }, {
-      leadingVisual: GearIcon,
-      text: 'View settings',
-      groupId: '4'
-    }]
-  })));
-}
-ComplexListStory.storyName = 'Complex List';
-export function CustomTrigger() {
-  const customAnchor = props => /*#__PURE__*/React.createElement(Link, _extends({}, props, {
-    sx: {
-      cursor: 'pointer'
-    }
-  }));
-
-  const [option, setOption] = useState('Select an option');
-  const onAction = useCallback(itemProps => {
-    setOption(itemProps.text || '');
-  }, []);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Custom Trigger"), /*#__PURE__*/React.createElement("h2", null, "Last option activated: ", option), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionMenu, {
-    onAction: onAction,
-    anchorContent: "Menu",
-    renderAnchor: customAnchor,
-    items: [{
-      text: 'New file'
-    }, ActionList.Divider, {
-      text: 'Copy link'
-    }, {
-      text: 'Edit file'
-    }, {
-      text: 'Delete file',
-      variant: 'danger'
-    }]
-  })));
-}
-CustomTrigger.storyName = 'Custom Trigger';
-export function ActionMenuWithExternalAnchor() {
-  const [isOpen, setIsOpen] = useState(false);
-  const buttonRef = useRef(null);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
-    ref: buttonRef,
-    onClick: () => setIsOpen(!isOpen)
-  }, "Open Menu"), /*#__PURE__*/React.createElement(ActionMenu, {
-    renderAnchor: null,
-    anchorRef: buttonRef,
-    open: isOpen,
-    setOpen: setIsOpen,
-    items: [{
-      text: 'New file'
-    }, ActionList.Divider, {
-      text: 'Copy link'
-    }, {
-      text: 'Edit file'
-    }, {
-      text: 'Delete file',
-      variant: 'danger'
-    }]
-  }));
-}
-
-const DoubleClickableAnchor = ({
-  onClick: callback,
-  ...rest
-}) => {
-  const onClick = useCallback(event => {
-    if (event.detail === 2) {
-      event.preventDefault();
-    }
-
-    callback === null || callback === void 0 ? void 0 : callback(event);
-  }, [callback]);
-  return /*#__PURE__*/React.createElement(DropdownButton, _extends({
-    onClick: onClick
-  }, rest));
-};
-
-DoubleClickableAnchor.displayName = "DoubleClickableAnchor";
-export function ActionMenuWithDoubleClickStory() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Actions"), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionMenu, {
-    renderAnchor: DoubleClickableAnchor,
-    anchorContent: /*#__PURE__*/React.createElement(ServerIcon, null),
-    items: [{
-      leadingVisual: ServerIcon,
-      text: 'Open current Codespace',
-      description: "Your existing Codespace will be opened to its previous state, and you'll be asked to manually switch to new-branch.",
-      descriptionVariant: 'block',
-      trailingText: '⌘O'
-    }, {
-      leadingVisual: PlusCircleIcon,
-      text: 'Create new Codespace',
-      description: 'Create a brand new Codespace with a fresh image and checkout this branch.',
-      descriptionVariant: 'block',
-      trailingText: '⌘C'
-    }]
-  })));
-}
-ActionMenuWithDoubleClickStory.storyName = 'ActionMenu with double-clickable anchor';

package/lib-esm/stories/AnchoredOverlay.stories.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-import { Meta } from '@storybook/react';
-declare const _default: Meta<import("@storybook/react").Args>;
-export default _default;
-export declare const DefaultPortal: () => JSX.Element;
-export declare const PortalInsideScrollingElement: () => JSX.Element;

package/lib-esm/stories/AnchoredOverlay.stories.js

@@ -1,101 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { BaseStyles, Box, ThemeProvider } from '..';
-import Heading from '../Heading';
-import DropdownButton from '../Button';
-import { AnchoredOverlay } from '../AnchoredOverlay';
-import { registerPortalRoot } from '../Portal';
-export default {
-  title: 'Generic behaviors/AnchoredOverlay',
-  decorators: [Story => {
-    return /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(Story, null)));
-  }]
-};
-
-const HeaderAndLayout = ({
-  children
-}) => {
-  const scrollingElementRef = useRef(null);
-  useEffect(() => {
-    if (scrollingElementRef.current) {
-      registerPortalRoot(scrollingElementRef.current, 'scrollingPortal');
-    }
-  }, [scrollingElementRef]);
-  return /*#__PURE__*/React.createElement(Box, {
-    position: "absolute",
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-    padding: 4,
-    backgroundColor: "lavenderblush"
-  }, /*#__PURE__*/React.createElement(Heading, null, "Header or some such"), /*#__PURE__*/React.createElement(Box, {
-    position: "absolute",
-    top: 10,
-    right: 4,
-    bottom: 4,
-    left: 4,
-    overflow: "scroll",
-    backgroundColor: "powderblue"
-  }, children, /*#__PURE__*/React.createElement(Box, {
-    ref: scrollingElementRef,
-    position: "absolute",
-    top: 0,
-    left: 0
-  })));
-};
-
-HeaderAndLayout.displayName = "HeaderAndLayout";
-
-const ButtonWithAnchoredOverlay = ({
-  portalContainerName
-}) => {
-  const [open, setOpen] = useState(false);
-  return /*#__PURE__*/React.createElement(AnchoredOverlay, {
-    open: open,
-    onOpen: () => setOpen(true),
-    onClose: () => setOpen(false),
-    width: "small",
-    height: "auto",
-    renderAnchor: props => /*#__PURE__*/React.createElement(DropdownButton, props, "Kitten, please"),
-    overlayProps: {
-      portalContainerName
-    }
-  }, /*#__PURE__*/React.createElement(Box, {
-    width: "100%",
-    height: "100%",
-    backgroundColor: "thistle",
-    display: "flex",
-    flexDirection: "column"
-  }, /*#__PURE__*/React.createElement("img", {
-    src: `//placekitten.com/200/300`,
-    alt: "kitten"
-  })));
-};
-
-ButtonWithAnchoredOverlay.displayName = "ButtonWithAnchoredOverlay";
-export const DefaultPortal = () => {
-  const rows = 40;
-  const columns = 20;
-  return /*#__PURE__*/React.createElement(HeaderAndLayout, null, /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("tbody", null, Array(rows).fill(null).map((_, i) => /*#__PURE__*/React.createElement("tr", {
-    key: i
-  }, Array(columns).fill(null).map((_1, j) => /*#__PURE__*/React.createElement("td", {
-    key: `${i}${j}`
-  }, /*#__PURE__*/React.createElement(Box, {
-    m: 2
-  }, /*#__PURE__*/React.createElement(ButtonWithAnchoredOverlay, null)))))))));
-};
-DefaultPortal.displayName = "DefaultPortal";
-export const PortalInsideScrollingElement = () => {
-  const rows = 40;
-  const columns = 20;
-  return /*#__PURE__*/React.createElement(HeaderAndLayout, null, /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("tbody", null, Array(rows).fill(null).map((_, i) => /*#__PURE__*/React.createElement("tr", {
-    key: i
-  }, Array(columns).fill(null).map((_1, j) => /*#__PURE__*/React.createElement("td", {
-    key: `${i}${j}`
-  }, /*#__PURE__*/React.createElement(Box, {
-    m: 2
-  }, /*#__PURE__*/React.createElement(ButtonWithAnchoredOverlay, {
-    portalContainerName: "scrollingPortal"
-  })))))))));
-};
-PortalInsideScrollingElement.displayName = "PortalInsideScrollingElement";

package/lib-esm/stories/AvatarStack.stories.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-import { Meta } from '@storybook/react';
-declare const meta: Meta;
-export default meta;
-export declare function AvatarStackStory(): JSX.Element;
-export declare namespace AvatarStackStory {
-    var storyName: string;
-}

package/lib-esm/stories/AvatarStack.stories.js

@@ -1,32 +0,0 @@
-import AvatarStack from '../AvatarStack';
-import React from 'react';
-import { ThemeProvider } from '..';
-import BaseStyles from '../BaseStyles';
-const meta = {
-  title: 'Composite components/AvatarStack',
-  component: AvatarStack,
-  decorators: [Story => /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(Story, null)))],
-  parameters: {
-    controls: {
-      disabled: true
-    }
-  }
-};
-export default meta;
-export function AvatarStackStory() {
-  return /*#__PURE__*/React.createElement(AvatarStack, null, /*#__PURE__*/React.createElement("img", {
-    src: "https://avatars.githubusercontent.com/primer",
-    alt: ""
-  }), /*#__PURE__*/React.createElement("img", {
-    src: "https://avatars.githubusercontent.com/github",
-    alt: ""
-  }), /*#__PURE__*/React.createElement("img", {
-    src: "https://avatars.githubusercontent.com/primer",
-    alt: ""
-  }), /*#__PURE__*/React.createElement("img", {
-    src: "https://avatars.githubusercontent.com/github",
-    alt: ""
-  }));
-}
-AvatarStackStory.displayName = "AvatarStackStory";
-AvatarStackStory.storyName = 'AvatarStack';

package/lib-esm/stories/Button.stories.d.ts

@@ -1,57 +0,0 @@
-/// <reference types="react" />
-import { Meta } from '@storybook/react';
-import { ButtonStyleProps } from 'styled-system';
-import { ButtonBaseProps } from '../Button/ButtonBase';
-declare type StrictButtonStyleProps = ButtonStyleProps & {
-    variant: ButtonBaseProps['variant'];
-};
-declare const _default: Meta<import("@storybook/react").Args>;
-export default _default;
-export declare const defaultButton: {
-    (args: StrictButtonStyleProps): JSX.Element;
-    args: {
-        variant: string;
-    };
-};
-export declare const dangerButton: {
-    (args: StrictButtonStyleProps): JSX.Element;
-    args: {
-        variant: string;
-    };
-};
-export declare const outlineButton: {
-    (args: StrictButtonStyleProps): JSX.Element;
-    args: {
-        variant: string;
-    };
-};
-export declare const primaryButton: {
-    (args: StrictButtonStyleProps): JSX.Element;
-    args: {
-        variant: string;
-    };
-};
-export declare const invisibleButton: {
-    (args: StrictButtonStyleProps): JSX.Element;
-    args: {
-        variant: string;
-    };
-};
-export declare const closeButton: {
-    (args: ButtonStyleProps): JSX.Element;
-    args: {
-        variant: string;
-    };
-};
-export declare const buttonGroup: {
-    (args: StrictButtonStyleProps): JSX.Element;
-    args: {
-        variant: string;
-    };
-};
-export declare const buttonTableList: {
-    (args: ButtonStyleProps): JSX.Element;
-    args: {
-        variant: string;
-    };
-};

package/lib-esm/stories/Button.stories.js

@@ -1,78 +0,0 @@
-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 from 'react';
-import { BaseStyles, Button, ButtonClose, ButtonDanger, ButtonGroup, ButtonInvisible, ButtonOutline, ButtonPrimary, ButtonTableList, ThemeProvider } from '..';
-export default {
-  title: 'Composite components/Button',
-  decorators: [Story => {
-    return /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(Story, null)));
-  }],
-  argTypes: {
-    as: {
-      table: {
-        disable: true
-      }
-    },
-    theme: {
-      table: {
-        disable: true
-      }
-    },
-    sx: {
-      table: {
-        disable: true
-      }
-    },
-    variant: {
-      control: {
-        type: 'radio',
-        options: ['small', 'medium', 'large']
-      }
-    }
-  }
-};
-export const defaultButton = args => /*#__PURE__*/React.createElement(Button, args, "Default Button");
-defaultButton.displayName = "defaultButton";
-export const dangerButton = args => /*#__PURE__*/React.createElement(ButtonDanger, args, "Danger Button");
-dangerButton.displayName = "dangerButton";
-export const outlineButton = args => /*#__PURE__*/React.createElement(ButtonOutline, args, "Outline Button");
-outlineButton.displayName = "outlineButton";
-export const primaryButton = args => /*#__PURE__*/React.createElement(ButtonPrimary, args, "Primary Button");
-primaryButton.displayName = "primaryButton";
-export const invisibleButton = args => /*#__PURE__*/React.createElement(ButtonInvisible, args, "Invisible Button");
-invisibleButton.displayName = "invisibleButton";
-export const closeButton = args => /*#__PURE__*/React.createElement(ButtonClose, _extends({}, args, {
-  onClick: () => alert('button clicked.')
-}));
-closeButton.displayName = "closeButton";
-export const buttonGroup = args => /*#__PURE__*/React.createElement(ButtonGroup, {
-  display: "block",
-  my: 2
-}, /*#__PURE__*/React.createElement(Button, args, "Button 1"), /*#__PURE__*/React.createElement(Button, args, "Button 2"), /*#__PURE__*/React.createElement(Button, args, "Button 3"));
-buttonGroup.displayName = "buttonGroup";
-export const buttonTableList = args => /*#__PURE__*/React.createElement(ButtonTableList, args, "Button Table List");
-buttonTableList.displayName = "buttonTableList";
-defaultButton.args = {
-  variant: 'medium'
-};
-dangerButton.args = {
-  variant: 'medium'
-};
-outlineButton.args = {
-  variant: 'medium'
-};
-primaryButton.args = {
-  variant: 'medium'
-};
-invisibleButton.args = {
-  variant: 'medium'
-};
-closeButton.args = {
-  variant: 'medium'
-};
-buttonGroup.args = {
-  variant: 'medium'
-};
-buttonTableList.args = {
-  variant: 'medium'
-};

package/lib-esm/stories/ConfirmationDialog.stories.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import { Meta } from '@storybook/react';
-declare const _default: Meta<import("@storybook/react").Args>;
-export default _default;
-export declare const BasicConfirmationDialog: () => JSX.Element;
-export declare const ShorthandHook: () => JSX.Element;
-export declare const ShorthandHookFromActionMenu: () => JSX.Element;

package/lib-esm/stories/ConfirmationDialog.stories.js

@@ -1,86 +0,0 @@
-import React, { useState, useRef, useCallback } from 'react';
-import { BaseStyles, Button, Box, ThemeProvider, useTheme } from '..';
-import { ConfirmationDialog, useConfirm } from '../Dialog/ConfirmationDialog';
-import { ActionMenu } from '../ActionMenu';
-export default {
-  title: 'Internal components/ConfirmationDialog',
-  component: ConfirmationDialog,
-  decorators: [Story => {
-    // Since portal roots are registered globally, we need this line so that each storybook
-    // story works in isolation.
-    return /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(Story, null)));
-  }]
-};
-export const BasicConfirmationDialog = () => {
-  const [isOpen, setIsOpen] = useState(false);
-  const buttonRef = useRef(null);
-  const onDialogClose = useCallback(() => setIsOpen(false), []);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
-    ref: buttonRef,
-    onClick: () => setIsOpen(!isOpen)
-  }, "Show dialog"), isOpen && /*#__PURE__*/React.createElement(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."));
-};
-export const ShorthandHook = () => {
-  const confirm = useConfirm();
-  const {
-    theme
-  } = useTheme();
-  const onButtonClick = 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.createElement(Box, {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "flex-start"
-  }, /*#__PURE__*/React.createElement(Button, {
-    mb: 2,
-    onClick: onButtonClick
-  }, "Turn me green!"), /*#__PURE__*/React.createElement(Button, {
-    mb: 2,
-    onClick: onButtonClick
-  }, "Turn me green!"), /*#__PURE__*/React.createElement(Button, {
-    mb: 2,
-    onClick: onButtonClick
-  }, "Turn me green!"), /*#__PURE__*/React.createElement(Button, {
-    mb: 2,
-    onClick: onButtonClick
-  }, "Turn me green!"));
-};
-ShorthandHook.displayName = "ShorthandHook";
-export const ShorthandHookFromActionMenu = () => {
-  const confirm = useConfirm();
-  const [text, setText] = useState('open me');
-  const onButtonClick = useCallback(async () => {
-    if (await confirm({
-      title: 'Are you sure?',
-      content: 'Do you really want to do a trick?'
-    })) {
-      setText('tada!');
-    }
-  }, [confirm]);
-  return /*#__PURE__*/React.createElement(Box, {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "flex-start"
-  }, /*#__PURE__*/React.createElement(ActionMenu, {
-    renderAnchor: props => /*#__PURE__*/React.createElement(Button, props, text),
-    items: [{
-      text: 'Do a trick!',
-      onAction: onButtonClick
-    }]
-  }));
-};
-ShorthandHookFromActionMenu.displayName = "ShorthandHookFromActionMenu";