@primer/components 32.0.1-rc.c4c2c50a → 32.1.0

package/lib/stories/ActionMenu.stories.js

@@ -1,348 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ActionsStory = ActionsStory;
-exports.SimpleListStory = SimpleListStory;
-exports.ExternalOpenState = ExternalOpenState;
-exports.ComplexListStory = ComplexListStory;
-exports.CustomTrigger = CustomTrigger;
-exports.ActionMenuWithExternalAnchor = ActionMenuWithExternalAnchor;
-exports.ActionMenuWithDoubleClickStory = ActionMenuWithDoubleClickStory;
-exports.default = void 0;
-
-var _octiconsReact = require("@primer/octicons-react");
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _ = require("..");
-
-var _ActionMenu = require("../ActionMenu");
-
-var _Link = _interopRequireDefault(require("../Link"));
-
-var _Button = _interopRequireDefault(require("../Button"));
-
-var _ActionList = require("../ActionList");
-
-var _BaseStyles = _interopRequireDefault(require("../BaseStyles"));
-
-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); }
-
-const meta = {
-  title: 'Composite components/ActionMenu',
-  component: _ActionMenu.ActionMenu,
-  decorators: [Story => /*#__PURE__*/_react.default.createElement(_.ThemeProvider, null, /*#__PURE__*/_react.default.createElement(_BaseStyles.default, null, /*#__PURE__*/_react.default.createElement(Story, null)))],
-  parameters: {
-    controls: {
-      disabled: true
-    }
-  }
-};
-var _default = meta;
-exports.default = _default;
-
-const ErsatzOverlay = _styledComponents.default.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;"]);
-
-function ActionsStory() {
-  const [option, setOption] = (0, _react.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.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Actions"), /*#__PURE__*/_react.default.createElement("h2", null, "Last option activated: ", option), /*#__PURE__*/_react.default.createElement(ErsatzOverlay, null, /*#__PURE__*/_react.default.createElement(_ActionMenu.ActionMenu, {
-    onAction: onAction,
-    anchorContent: /*#__PURE__*/_react.default.createElement(_octiconsReact.ServerIcon, null),
-    items: [{
-      leadingVisual: _octiconsReact.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: _octiconsReact.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';
-
-function SimpleListStory() {
-  const [option, setOption] = (0, _react.useState)('Select an option');
-
-  const onAction = itemProps => {
-    setOption(itemProps.text || '');
-  };
-
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Simple List"), /*#__PURE__*/_react.default.createElement("h2", null, "Last option activated: ", option), /*#__PURE__*/_react.default.createElement(ErsatzOverlay, null, /*#__PURE__*/_react.default.createElement(_ActionMenu.ActionMenu, {
-    onAction: onAction,
-    anchorContent: "Menu",
-    overlayProps: {
-      'data-test-id': 'some_test_id'
-    },
-    items: [{
-      text: 'New file',
-      trailingText: '⌘O',
-      disabled: true,
-      leadingVisual: _octiconsReact.ProjectIcon
-    }, _ActionList.ActionList.Divider, {
-      text: 'Copy link',
-      trailingText: 'ctrl+C'
-    }, {
-      text: 'Edit file',
-      trailingText: '⌘E'
-    }, {
-      text: 'Delete file',
-      variant: 'danger',
-      trailingText: '⌘D'
-    }]
-  })));
-}
-
-SimpleListStory.storyName = 'Simple List';
-
-function ExternalOpenState() {
-  const [option, setOption] = (0, _react.useState)('Select an option');
-  const [open, setOpen] = (0, _react.useState)(false);
-
-  const onAction = itemProps => {
-    setOption(itemProps.text);
-  };
-
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Simple List"), /*#__PURE__*/_react.default.createElement("h2", null, "Last option activated: ", option), /*#__PURE__*/_react.default.createElement("h2", null, "External Open State: ", open ? 'Open' : 'Closed'), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Button.default, {
-    onClick: () => setOpen(!open)
-  }, "Toggle External State")), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(ErsatzOverlay, null, /*#__PURE__*/_react.default.createElement(_ActionMenu.ActionMenu, {
-    onAction: onAction,
-    anchorContent: "Menu",
-    open: open,
-    setOpen: setOpen,
-    items: [{
-      text: 'New file',
-      trailingText: '⌘O',
-      disabled: true,
-      leadingVisual: _octiconsReact.ProjectIcon
-    }, _ActionList.ActionList.Divider, {
-      text: 'Copy link',
-      trailingText: 'ctrl+C'
-    }, {
-      text: 'Edit file',
-      trailingText: '⌘E'
-    }, {
-      text: 'Delete file',
-      variant: 'danger',
-      trailingVisual: '⌘D'
-    }]
-  })));
-}
-
-ExternalOpenState.storyName = 'External Open State';
-
-function ComplexListStory() {
-  const [option, setOption] = (0, _react.useState)('Select an option');
-
-  const onAction = itemProps => {
-    setOption(itemProps.text || '');
-  };
-
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Complex List"), /*#__PURE__*/_react.default.createElement("h2", null, "Last option activated: ", option), /*#__PURE__*/_react.default.createElement(ErsatzOverlay, null, /*#__PURE__*/_react.default.createElement(_ActionMenu.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.default.createElement(_ActionList.ActionList.Item, _extends({
-        style: {
-          fontWeight: 'bold'
-        }
-      }, props))
-    }, {
-      groupId: '4'
-    }],
-    items: [{
-      leadingVisual: _octiconsReact.TypographyIcon,
-      text: 'Rename',
-      groupId: '0'
-    }, {
-      leadingVisual: _octiconsReact.VersionsIcon,
-      text: 'Duplicate',
-      groupId: '0'
-    }, {
-      leadingVisual: _octiconsReact.SearchIcon,
-      text: 'repo:github/github',
-      groupId: '1',
-      renderItem: props => /*#__PURE__*/_react.default.createElement(_ActionList.ActionList.Item, _extends({
-        style: {
-          color: 'rebeccapurple'
-        }
-      }, props)),
-      trailingVisual: () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "\u2318S", /*#__PURE__*/_react.default.createElement(_octiconsReact.ArrowRightIcon, null))
-    }, {
-      leadingVisual: _octiconsReact.SearchIcon,
-      text: 'repo:github/github',
-      groupId: '1',
-      renderItem: props => /*#__PURE__*/_react.default.createElement(_ActionList.ActionList.Item, _extends({
-        style: {
-          color: 'rebeccapurple'
-        }
-      }, props)),
-      trailingText: '⌘S',
-      // backward compatible
-      trailingIcon: _octiconsReact.ArrowRightIcon // backward compatible
-
-    }, {
-      leadingVisual: _octiconsReact.NoteIcon,
-      text: 'Table',
-      description: 'Information-dense table optimized for operations across teams',
-      descriptionVariant: 'block',
-      groupId: '2'
-    }, {
-      leadingVisual: _octiconsReact.ProjectIcon,
-      text: 'Board',
-      description: 'Kanban-style board focused on visual states',
-      descriptionVariant: 'block',
-      groupId: '2'
-    }, {
-      leadingVisual: _octiconsReact.FilterIcon,
-      text: 'Save sort and filters to current view',
-      groupId: '3'
-    }, {
-      leadingVisual: _octiconsReact.FilterIcon,
-      text: 'Save sort and filters to new view',
-      groupId: '3'
-    }, {
-      leadingVisual: _octiconsReact.GearIcon,
-      text: 'View settings',
-      groupId: '4'
-    }]
-  })));
-}
-
-ComplexListStory.storyName = 'Complex List';
-
-function CustomTrigger() {
-  const customAnchor = props => /*#__PURE__*/_react.default.createElement(_Link.default, _extends({}, props, {
-    sx: {
-      cursor: 'pointer'
-    }
-  }));
-
-  const [option, setOption] = (0, _react.useState)('Select an option');
-  const onAction = (0, _react.useCallback)(itemProps => {
-    setOption(itemProps.text || '');
-  }, []);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Custom Trigger"), /*#__PURE__*/_react.default.createElement("h2", null, "Last option activated: ", option), /*#__PURE__*/_react.default.createElement(ErsatzOverlay, null, /*#__PURE__*/_react.default.createElement(_ActionMenu.ActionMenu, {
-    onAction: onAction,
-    anchorContent: "Menu",
-    renderAnchor: customAnchor,
-    items: [{
-      text: 'New file'
-    }, _ActionList.ActionList.Divider, {
-      text: 'Copy link'
-    }, {
-      text: 'Edit file'
-    }, {
-      text: 'Delete file',
-      variant: 'danger'
-    }]
-  })));
-}
-
-CustomTrigger.storyName = 'Custom Trigger';
-
-function ActionMenuWithExternalAnchor() {
-  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.default, {
-    ref: buttonRef,
-    onClick: () => setIsOpen(!isOpen)
-  }, "Open Menu"), /*#__PURE__*/_react.default.createElement(_ActionMenu.ActionMenu, {
-    renderAnchor: null,
-    anchorRef: buttonRef,
-    open: isOpen,
-    setOpen: setIsOpen,
-    items: [{
-      text: 'New file'
-    }, _ActionList.ActionList.Divider, {
-      text: 'Copy link'
-    }, {
-      text: 'Edit file'
-    }, {
-      text: 'Delete file',
-      variant: 'danger'
-    }]
-  }));
-}
-
-const DoubleClickableAnchor = ({
-  onClick: callback,
-  ...rest
-}) => {
-  const onClick = (0, _react.useCallback)(event => {
-    if (event.detail === 2) {
-      event.preventDefault();
-    }
-
-    callback === null || callback === void 0 ? void 0 : callback(event);
-  }, [callback]);
-  return /*#__PURE__*/_react.default.createElement(_DropdownMenu.DropdownButton, _extends({
-    onClick: onClick
-  }, rest));
-};
-
-DoubleClickableAnchor.displayName = "DoubleClickableAnchor";
-
-function ActionMenuWithDoubleClickStory() {
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Actions"), /*#__PURE__*/_react.default.createElement(ErsatzOverlay, null, /*#__PURE__*/_react.default.createElement(_ActionMenu.ActionMenu, {
-    renderAnchor: DoubleClickableAnchor,
-    anchorContent: /*#__PURE__*/_react.default.createElement(_octiconsReact.ServerIcon, null),
-    items: [{
-      leadingVisual: _octiconsReact.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: _octiconsReact.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/stories/AnchoredOverlay.stories.js

@@ -1,127 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.PortalInsideScrollingElement = exports.DefaultPortal = exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _2 = require("..");
-
-var _Heading = _interopRequireDefault(require("../Heading"));
-
-var _Button = _interopRequireDefault(require("../Button"));
-
-var _AnchoredOverlay = require("../AnchoredOverlay");
-
-var _Portal = require("../Portal");
-
-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; }
-
-var _default = {
-  title: 'Generic behaviors/AnchoredOverlay',
-  decorators: [Story => {
-    return /*#__PURE__*/_react.default.createElement(_2.ThemeProvider, null, /*#__PURE__*/_react.default.createElement(_2.BaseStyles, null, /*#__PURE__*/_react.default.createElement(Story, null)));
-  }]
-};
-exports.default = _default;
-
-const HeaderAndLayout = ({
-  children
-}) => {
-  const scrollingElementRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(() => {
-    if (scrollingElementRef.current) {
-      (0, _Portal.registerPortalRoot)(scrollingElementRef.current, 'scrollingPortal');
-    }
-  }, [scrollingElementRef]);
-  return /*#__PURE__*/_react.default.createElement(_2.Box, {
-    position: "absolute",
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-    padding: 4,
-    backgroundColor: "lavenderblush"
-  }, /*#__PURE__*/_react.default.createElement(_Heading.default, null, "Header or some such"), /*#__PURE__*/_react.default.createElement(_2.Box, {
-    position: "absolute",
-    top: 10,
-    right: 4,
-    bottom: 4,
-    left: 4,
-    overflow: "scroll",
-    backgroundColor: "powderblue"
-  }, children, /*#__PURE__*/_react.default.createElement(_2.Box, {
-    ref: scrollingElementRef,
-    position: "absolute",
-    top: 0,
-    left: 0
-  })));
-};
-
-HeaderAndLayout.displayName = "HeaderAndLayout";
-
-const ButtonWithAnchoredOverlay = ({
-  portalContainerName
-}) => {
-  const [open, setOpen] = (0, _react.useState)(false);
-  return /*#__PURE__*/_react.default.createElement(_AnchoredOverlay.AnchoredOverlay, {
-    open: open,
-    onOpen: () => setOpen(true),
-    onClose: () => setOpen(false),
-    width: "small",
-    height: "auto",
-    renderAnchor: props => /*#__PURE__*/_react.default.createElement(_Button.default, props, "Kitten, please"),
-    overlayProps: {
-      portalContainerName
-    }
-  }, /*#__PURE__*/_react.default.createElement(_2.Box, {
-    width: "100%",
-    height: "100%",
-    backgroundColor: "thistle",
-    display: "flex",
-    flexDirection: "column"
-  }, /*#__PURE__*/_react.default.createElement("img", {
-    src: `//placekitten.com/200/300`,
-    alt: "kitten"
-  })));
-};
-
-ButtonWithAnchoredOverlay.displayName = "ButtonWithAnchoredOverlay";
-
-const DefaultPortal = () => {
-  const rows = 40;
-  const columns = 20;
-  return /*#__PURE__*/_react.default.createElement(HeaderAndLayout, null, /*#__PURE__*/_react.default.createElement("table", null, /*#__PURE__*/_react.default.createElement("tbody", null, Array(rows).fill(null).map((_, i) => /*#__PURE__*/_react.default.createElement("tr", {
-    key: i
-  }, Array(columns).fill(null).map((_1, j) => /*#__PURE__*/_react.default.createElement("td", {
-    key: `${i}${j}`
-  }, /*#__PURE__*/_react.default.createElement(_2.Box, {
-    m: 2
-  }, /*#__PURE__*/_react.default.createElement(ButtonWithAnchoredOverlay, null)))))))));
-};
-
-exports.DefaultPortal = DefaultPortal;
-DefaultPortal.displayName = "DefaultPortal";
-
-const PortalInsideScrollingElement = () => {
-  const rows = 40;
-  const columns = 20;
-  return /*#__PURE__*/_react.default.createElement(HeaderAndLayout, null, /*#__PURE__*/_react.default.createElement("table", null, /*#__PURE__*/_react.default.createElement("tbody", null, Array(rows).fill(null).map((_, i) => /*#__PURE__*/_react.default.createElement("tr", {
-    key: i
-  }, Array(columns).fill(null).map((_1, j) => /*#__PURE__*/_react.default.createElement("td", {
-    key: `${i}${j}`
-  }, /*#__PURE__*/_react.default.createElement(_2.Box, {
-    m: 2
-  }, /*#__PURE__*/_react.default.createElement(ButtonWithAnchoredOverlay, {
-    portalContainerName: "scrollingPortal"
-  })))))))));
-};
-
-exports.PortalInsideScrollingElement = PortalInsideScrollingElement;
-PortalInsideScrollingElement.displayName = "PortalInsideScrollingElement";