@primer/components 33.1.0-rc.6856bcf5 → 33.1.0

package/lib/__tests__/useSafeTimeout.test.js

@@ -1,45 +0,0 @@
-"use strict";
-
-var _reactHooks = require("@testing-library/react-hooks");
-
-var _useSafeTimeout = _interopRequireDefault(require("../hooks/useSafeTimeout"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-afterEach(() => {
-  jest.useRealTimers();
-});
-test('should call callback after time', async () => {
-  const {
-    result,
-    waitFor
-  } = (0, _reactHooks.renderHook)(() => (0, _useSafeTimeout.default)());
-  const mockFunction = jest.fn();
-  result.current.safeSetTimeout(mockFunction, 300);
-  await waitFor(() => expect(mockFunction).toHaveBeenCalled());
-});
-test('should clear timeouts when safeClearTimeout is called', () => {
-  jest.useFakeTimers();
-  jest.spyOn(global, 'clearTimeout');
-  const {
-    result
-  } = (0, _reactHooks.renderHook)(() => (0, _useSafeTimeout.default)());
-  const mockFunction = jest.fn();
-  const timeoutId = result.current.safeSetTimeout(mockFunction, 300);
-  result.current.safeClearTimeout(timeoutId);
-  expect(clearTimeout).toHaveBeenCalledTimes(1);
-  expect(clearTimeout).toHaveBeenLastCalledWith(timeoutId);
-});
-test('should clear timeouts when the component is unmounted', () => {
-  jest.useFakeTimers();
-  jest.spyOn(global, 'clearTimeout');
-  const {
-    result,
-    unmount
-  } = (0, _reactHooks.renderHook)(() => (0, _useSafeTimeout.default)());
-  const mockFunction = jest.fn();
-  const timeoutId = result.current.safeSetTimeout(mockFunction, 300);
-  unmount();
-  expect(clearTimeout).toHaveBeenCalledTimes(1);
-  expect(clearTimeout).toHaveBeenLastCalledWith(timeoutId);
-});

package/lib/__tests__/utils/createSlots.test.d.ts

@@ -1 +0,0 @@
-import 'babel-polyfill';

package/lib/__tests__/utils/createSlots.test.js

@@ -1,75 +0,0 @@
-"use strict";
-
-var _react = _interopRequireDefault(require("react"));
-
-require("babel-polyfill");
-
-var _react2 = require("@testing-library/react");
-
-var _createSlots = _interopRequireDefault(require("../../utils/create-slots"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-// setup a component with slots
-const {
-  Slots,
-  Slot
-} = (0, _createSlots.default)(['One', 'Two', 'Three']);
-
-const ComponentWithSlots = ({
-  salutation,
-  children
-}) => {
-  return /*#__PURE__*/_react.default.createElement(Slots, {
-    context: {
-      salutation
-    }
-  }, slots => /*#__PURE__*/_react.default.createElement("div", null, slots.One, /*#__PURE__*/_react.default.createElement("span", null, children, " ", slots.Two, " ", slots.Three)));
-};
-
-ComponentWithSlots.displayName = "ComponentWithSlots";
-
-const SlotItem1 = ({
-  children
-}) => /*#__PURE__*/_react.default.createElement(Slot, {
-  name: "One"
-}, children);
-
-SlotItem1.displayName = "SlotItem1";
-
-const SlotItem2 = ({
-  children
-}) => /*#__PURE__*/_react.default.createElement(Slot, {
-  name: "Two"
-}, children);
-
-SlotItem2.displayName = "SlotItem2";
-
-const SlotItem3 = ({
-  children
-}) => /*#__PURE__*/_react.default.createElement(Slot, {
-  name: "Three"
-}, context => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, context.salutation, " ", children));
-
-SlotItem3.displayName = "SlotItem3";
-describe('ComponentWithSlots', () => {
-  it('renders all slots', async () => {
-    const component = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(ComponentWithSlots, null, /*#__PURE__*/_react.default.createElement(SlotItem1, null, "first"), /*#__PURE__*/_react.default.createElement(SlotItem2, null, "second"), "free form"));
-    await (0, _react2.waitFor)(() => component.getByText('first'));
-    expect(component.container).toMatchSnapshot();
-  });
-  it('renders without any slots', async () => {
-    const component = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(ComponentWithSlots, null, "free form"));
-    expect(component.container).toMatchSnapshot();
-  });
-  it('renders with just one slot', async () => {
-    const component = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(ComponentWithSlots, null, /*#__PURE__*/_react.default.createElement(SlotItem1, null, "first"), "free form"));
-    expect(component.container).toMatchSnapshot();
-  });
-  it('renders with context passed to children', async () => {
-    const component = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(ComponentWithSlots, {
-      salutation: "hi"
-    }, /*#__PURE__*/_react.default.createElement(SlotItem3, null, "third"), "free form"));
-    expect(component.container).toMatchSnapshot();
-  });
-});

package/lib/stories/ActionList.stories.js

@@ -1,454 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ActionsStory = ActionsStory;
-exports.SimpleListStory = SimpleListStory;
-exports.SingleSelectListStory = SingleSelectListStory;
-exports.MultiSelectListStory = MultiSelectListStory;
-exports.ComplexListInsetVariantStory = ComplexListInsetVariantStory;
-exports.ComplexListFullVariantStory = ComplexListFullVariantStory;
-exports.HeaderStory = HeaderStory;
-exports.CustomItemChildren = CustomItemChildren;
-exports.SizeStressTestingStory = SizeStressTestingStory;
-exports.LinkItemStory = LinkItemStory;
-exports.DOMPropsStory = DOMPropsStory;
-exports.default = void 0;
-
-var _octiconsReact = require("@primer/octicons-react");
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _2 = require("..");
-
-var _ActionList2 = require("../ActionList");
-
-var _Header = require("../ActionList/Header");
-
-var _BaseStyles = _interopRequireDefault(require("../BaseStyles"));
-
-var _sx = _interopRequireDefault(require("../sx"));
-
-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 ActionList = Object.assign(_ActionList2.ActionList, {
-  Header: _Header.Header
-});
-const meta = {
-  title: 'Composite components/ActionList',
-  component: ActionList,
-  decorators: [Story => /*#__PURE__*/_react.default.createElement(_2.ThemeProvider, null, /*#__PURE__*/_react.default.createElement(_BaseStyles.default, null, /*#__PURE__*/_react.default.createElement(Story, null)))],
-  parameters: {
-    controls: {
-      disable: true
-    }
-  }
-};
-var _default = meta;
-exports.default = _default;
-
-const ErsatzOverlay = _styledComponents.default.div.withConfig({
-  displayName: "ActionListstories__ErsatzOverlay",
-  componentId: "sc-akdcn0-0"
-})(["border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,0.12),0 8px 24px rgba(149,157,165,0.2);overflow:hidden;max-width:", ";"], ({
-  maxWidth
-}) => maxWidth || 'none');
-
-function ActionsStory() {
-  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(ActionList, {
-    showItemDividers: true,
-    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'
-    }, {
-      leadingVisual: _octiconsReact.PlusCircleIcon,
-      text: 'Create new Codespace',
-      description: 'Create a brand new Codespace with a fresh image and checkout this branch.',
-      descriptionVariant: 'block'
-    }]
-  })));
-}
-
-ActionsStory.storyName = 'Actions';
-
-function SimpleListStory() {
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Simple List"), /*#__PURE__*/_react.default.createElement(ErsatzOverlay, null, /*#__PURE__*/_react.default.createElement(ActionList, {
-    items: [{
-      text: 'New file',
-      showDivider: true
-    }, ActionList.Divider, {
-      text: 'Copy link',
-      showDivider: true
-    }, {
-      text: 'Edit file',
-      showDivider: true
-    }, {
-      text: 'Delete file',
-      variant: 'danger',
-      showDivider: true
-    }]
-  })));
-}
-
-SimpleListStory.storyName = 'Simple List';
-const selectListItems = new Array(6).fill(undefined).map((_, i) => {
-  return {
-    text: `Item ${i}`,
-    id: i
-  };
-});
-
-function SingleSelectListStory() {
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Single Select List"), /*#__PURE__*/_react.default.createElement(ErsatzOverlay, null, /*#__PURE__*/_react.default.createElement(ActionList, {
-    items: selectListItems.map((item, index) => ({ ...item,
-      selected: index === 1
-    }))
-  })));
-}
-
-SingleSelectListStory.storyName = 'Single Select';
-
-function MultiSelectListStory() {
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Multi Select List"), /*#__PURE__*/_react.default.createElement(ErsatzOverlay, null, /*#__PURE__*/_react.default.createElement(ActionList, {
-    selectionVariant: "multiple",
-    items: selectListItems.map((item, index) => ({ ...item,
-      selected: index === 1 || index === 3
-    }))
-  })));
-}
-
-MultiSelectListStory.storyName = 'Multi Select';
-
-function ComplexListInsetVariantStory() {
-  const StyledDiv = _styledComponents.default.div.withConfig({
-    displayName: "ActionListstories__StyledDiv",
-    componentId: "sc-akdcn0-1"
-  })(["", ""], _sx.default);
-
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Complex List"), /*#__PURE__*/_react.default.createElement("h2", null, "Inset Variant"), /*#__PURE__*/_react.default.createElement(ErsatzOverlay, null, /*#__PURE__*/_react.default.createElement(ActionList, {
-    groupMetadata: [{
-      groupId: '0'
-    }, {
-      groupId: '1',
-      header: {
-        title: 'Live query',
-        variant: 'filled'
-      }
-    }, {
-      groupId: '2',
-      header: {
-        title: 'Layout',
-        variant: 'subtle'
-      },
-      showItemDividers: true
-    }, {
-      groupId: '3',
-      renderItem: props => /*#__PURE__*/_react.default.createElement(ActionList.Item, _extends({
-        style: {
-          fontWeight: 'bold'
-        }
-      }, props))
-    }, {
-      groupId: '4',
-      renderItem: ({
-        leadingVisual: LeadingVisual,
-        ...props
-      }) => /*#__PURE__*/_react.default.createElement(ActionList.Item, _extends({}, props, {
-        leadingVisual: () => /*#__PURE__*/_react.default.createElement(StyledDiv, {
-          sx: {
-            '&>svg': {
-              fill: 'white'
-            }
-          }
-        }, LeadingVisual && /*#__PURE__*/_react.default.createElement(LeadingVisual, null))
-      })),
-      renderGroup: ({
-        sx: sxProps,
-        ...props
-      }) => /*#__PURE__*/_react.default.createElement(ActionList.Group, _extends({}, props, {
-        sx: { ...sxProps,
-          backgroundColor: 'cornflowerblue',
-          color: 'white'
-        }
-      }))
-    }],
-    items: [{
-      leadingVisual: _octiconsReact.TypographyIcon,
-      text: 'Rename',
-      groupId: '0'
-    }, {
-      leadingVisual: _octiconsReact.VersionsIcon,
-      text: 'Duplicate',
-      description: 'Create a copy',
-      descriptionVariant: 'inline',
-      groupId: '0'
-    }, {
-      leadingVisual: _octiconsReact.SearchIcon,
-      text: 'repo:github/memex,github/github',
-      groupId: '1',
-      renderItem: props => /*#__PURE__*/_react.default.createElement(ActionList.Item, _extends({
-        style: {
-          color: 'rebeccapurple'
-        }
-      }, props))
-    }, {
-      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'
-    }]
-  })));
-}
-
-ComplexListInsetVariantStory.storyName = 'Complex List — Inset Variant';
-
-function ComplexListFullVariantStory() {
-  const StyledDiv = _styledComponents.default.div.withConfig({
-    displayName: "ActionListstories__StyledDiv",
-    componentId: "sc-akdcn0-2"
-  })(["", ""], _sx.default);
-
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Complex List"), /*#__PURE__*/_react.default.createElement("h2", null, "Full Variant"), /*#__PURE__*/_react.default.createElement(ErsatzOverlay, null, /*#__PURE__*/_react.default.createElement(ActionList, {
-    variant: "full",
-    groupMetadata: [{
-      groupId: '0'
-    }, {
-      groupId: '1',
-      header: {
-        title: 'Live query',
-        variant: 'filled'
-      }
-    }, {
-      groupId: '2',
-      header: {
-        title: 'Layout',
-        variant: 'subtle'
-      }
-    }, {
-      groupId: '3',
-      renderItem: props => /*#__PURE__*/_react.default.createElement(ActionList.Item, _extends({
-        style: {
-          fontWeight: 'bold'
-        }
-      }, props))
-    }, {
-      groupId: '4',
-      renderItem: ({
-        leadingVisual: LeadingVisual,
-        ...props
-      }) => /*#__PURE__*/_react.default.createElement(ActionList.Item, _extends({}, props, {
-        leadingVisual: () => /*#__PURE__*/_react.default.createElement(StyledDiv, {
-          sx: {
-            '&>svg': {
-              fill: 'white'
-            }
-          }
-        }, LeadingVisual && /*#__PURE__*/_react.default.createElement(LeadingVisual, null))
-      })),
-      renderGroup: ({
-        sx: sxProps,
-        ...props
-      }) => /*#__PURE__*/_react.default.createElement(ActionList.Group, _extends({}, props, {
-        sx: { ...sxProps,
-          backgroundColor: 'cornflowerblue',
-          color: 'white'
-        }
-      }))
-    }],
-    items: [{
-      leadingVisual: _octiconsReact.TypographyIcon,
-      text: 'Rename',
-      groupId: '0'
-    }, {
-      leadingVisual: _octiconsReact.VersionsIcon,
-      text: 'Duplicate',
-      groupId: '0'
-    }, {
-      leadingVisual: _octiconsReact.SearchIcon,
-      text: 'repo:github/memex,github/github',
-      groupId: '1',
-      renderItem: props => /*#__PURE__*/_react.default.createElement(ActionList.Item, _extends({
-        style: {
-          color: 'rebeccapurple'
-        }
-      }, props))
-    }, {
-      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'
-    }]
-  })));
-}
-
-ComplexListFullVariantStory.storyName = 'Complex List — Full Variant';
-
-function HeaderStory() {
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Header"), /*#__PURE__*/_react.default.createElement("h2", null, "Filled Variant"), /*#__PURE__*/_react.default.createElement(ActionList.Header, {
-    title: "Layout",
-    variant: "filled"
-  }), /*#__PURE__*/_react.default.createElement("h2", null, "Subtle Variant"), /*#__PURE__*/_react.default.createElement(ActionList.Header, {
-    title: "Layout",
-    variant: "subtle"
-  }));
-}
-
-HeaderStory.storyName = 'Header';
-
-function CustomItemChildren() {
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Custom Item Children"), /*#__PURE__*/_react.default.createElement(ErsatzOverlay, null, /*#__PURE__*/_react.default.createElement(ActionList, {
-    items: [{
-      leadingVisual: _octiconsReact.ArrowRightIcon,
-      children: /*#__PURE__*/_react.default.createElement(_2.Label, {
-        outline: true,
-        borderColor: "success.emphasis"
-      }, "Choose this one"),
-      trailingIcon: _octiconsReact.ArrowLeftIcon
-    }]
-  })));
-}
-
-CustomItemChildren.storyName = 'Custom Item Children';
-
-function SizeStressTestingStory() {
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Size Stress Testing"), /*#__PURE__*/_react.default.createElement(ErsatzOverlay, {
-    maxWidth: "300px"
-  }, /*#__PURE__*/_react.default.createElement(ActionList, {
-    items: [{
-      leadingVisual: _octiconsReact.ArrowRightIcon,
-      text: 'Block Description.  Long text should wrap',
-      description: 'This description is long, but it is block so it wraps',
-      descriptionVariant: 'block',
-      trailingVisual: _octiconsReact.ArrowLeftIcon,
-      showDivider: true
-    }, {
-      leadingVisual: _octiconsReact.ArrowRightIcon,
-      text: 'Inline Description',
-      description: 'This description gets truncated because it is inline',
-      trailingVisual: _octiconsReact.ArrowLeftIcon,
-      showDivider: true
-    }, {
-      leadingVisual: _octiconsReact.ArrowRightIcon,
-      text: 'Really long text without a description should wrap',
-      trailingIcon: _octiconsReact.ArrowLeftIcon,
-      // backward compatible
-      showDivider: true
-    }]
-  })));
-}
-
-SizeStressTestingStory.storyName = 'Size Stress Testing';
-const ReactRouterLikeLink = /*#__PURE__*/(0, _react.forwardRef)(({
-  to,
-  ...props
-}, ref) => {
-  // eslint-disable-next-line jsx-a11y/anchor-has-content
-  return /*#__PURE__*/_react.default.createElement("a", _extends({
-    ref: ref,
-    href: to
-  }, props));
-});
-const NextJSLikeLink = /*#__PURE__*/(0, _react.forwardRef)(({
-  href,
-  children
-}, ref) => {
-  const child = _react.default.Children.only(children);
-
-  const childProps = {
-    ref,
-    href
-  };
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.isValidElement(child) ? /*#__PURE__*/_react.default.cloneElement(child, childProps) : null);
-});
-
-function LinkItemStory() {
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Simple List"), /*#__PURE__*/_react.default.createElement(ErsatzOverlay, null, /*#__PURE__*/_react.default.createElement(ActionList, {
-    items: [{
-      text: 'A. Vanilla action',
-      renderItem: props => /*#__PURE__*/_react.default.createElement(ActionList.Item, _extends({
-        onAction: () => alert('hi?')
-      }, props))
-    }, {
-      text: 'B. Vanilla link',
-      renderItem: props => /*#__PURE__*/_react.default.createElement(ActionList.Item, _extends({
-        as: "a",
-        href: "/about"
-      }, props))
-    }, {
-      text: 'C. React Router link',
-      renderItem: props => /*#__PURE__*/_react.default.createElement(ActionList.Item, _extends({
-        as: ReactRouterLikeLink,
-        to: "/about"
-      }, props))
-    }, {
-      text: 'D. NextJS style',
-      renderItem: props => /*#__PURE__*/_react.default.createElement(NextJSLikeLink, {
-        href: "/about"
-      }, /*#__PURE__*/_react.default.createElement(ActionList.Item, _extends({
-        as: "a"
-      }, props)))
-    }]
-  })));
-}
-
-LinkItemStory.storyName = 'List with a link item';
-
-function DOMPropsStory() {
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Simple List"), /*#__PURE__*/_react.default.createElement(ErsatzOverlay, null, /*#__PURE__*/_react.default.createElement(ActionList, {
-    items: [{
-      text: 'One',
-      onClick: () => alert('Hello')
-    }]
-  })));
-}
-
-DOMPropsStory.storyName = 'List an item input including DOM props';