@primer/components 29.1.0 → 29.1.1-rc.cea79543

package/lib-esm/__tests__/hooks/useOnOutsideClick.js

@@ -0,0 +1,68 @@
+import { useOnOutsideClick } from '../../hooks/useOnOutsideClick';
+import { render } from '@testing-library/react';
+import React, { useRef } from 'react';
+import userEvent from '@testing-library/user-event';
+
+const Component = ({
+  callback
+}) => {
+  const containerRef = useRef(null);
+  const outerButton = useRef(null);
+  const secondButton = useRef(null);
+  useOnOutsideClick({
+    ignoreClickRefs: [secondButton],
+    containerRef,
+    onClickOutside: callback
+  });
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
+    ref: outerButton
+  }, "button"), /*#__PURE__*/React.createElement("button", {
+    ref: secondButton
+  }, "button two"), /*#__PURE__*/React.createElement("div", {
+    ref: containerRef
+  }, "content"));
+};
+
+Component.displayName = "Component";
+it('should call function when user clicks outside container', () => {
+  const mockFunction = jest.fn();
+  const {
+    getByText
+  } = render( /*#__PURE__*/React.createElement(Component, {
+    callback: mockFunction
+  }));
+  userEvent.click(getByText('button'));
+  expect(mockFunction).toHaveBeenCalledTimes(1);
+});
+it('should not call function when user right clicks', () => {
+  const mockFunction = jest.fn();
+  const {
+    getByText
+  } = render( /*#__PURE__*/React.createElement(Component, {
+    callback: mockFunction
+  }));
+  userEvent.click(getByText('button'), {
+    button: 1
+  });
+  expect(mockFunction).toHaveBeenCalledTimes(0);
+});
+it('should not call function when clicking on ignored refs', () => {
+  const mockFunction = jest.fn();
+  const {
+    getByText
+  } = render( /*#__PURE__*/React.createElement(Component, {
+    callback: mockFunction
+  }));
+  userEvent.click(getByText('button two'));
+  expect(mockFunction).toHaveBeenCalledTimes(0);
+});
+it('should not call function when clicking inside container', () => {
+  const mockFunction = jest.fn();
+  const {
+    getByText
+  } = render( /*#__PURE__*/React.createElement(Component, {
+    callback: mockFunction
+  }));
+  userEvent.click(getByText('content'));
+  expect(mockFunction).toHaveBeenCalledTimes(0);
+});

package/lib-esm/__tests__/hooks/useOpenAndCloseFocus.d.ts

@@ -0,0 +1 @@
+export {};

package/lib-esm/__tests__/hooks/useOpenAndCloseFocus.js

@@ -0,0 +1,52 @@
+import React, { useRef } from 'react';
+import { render, waitFor } from '@testing-library/react';
+import { useOpenAndCloseFocus } from '../../hooks/useOpenAndCloseFocus';
+
+const Component = () => {
+  const containerRef = useRef(null);
+  const returnFocusRef = useRef(null);
+  const noButtonRef = useRef(null);
+  useOpenAndCloseFocus({
+    containerRef,
+    initialFocusRef: noButtonRef,
+    returnFocusRef
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+    ref: returnFocusRef
+  }, "trigger"), /*#__PURE__*/React.createElement("div", {
+    ref: containerRef
+  }, /*#__PURE__*/React.createElement("button", null, "yes"), /*#__PURE__*/React.createElement("button", {
+    ref: noButtonRef
+  }, "no")));
+};
+
+const ComponentTwo = () => {
+  const buttonRef = useRef(null);
+  const containerRef = useRef(null);
+  useOpenAndCloseFocus({
+    containerRef,
+    returnFocusRef: buttonRef
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+    ref: buttonRef
+  }, "button trigger"), /*#__PURE__*/React.createElement("div", {
+    ref: containerRef
+  }, /*#__PURE__*/React.createElement("button", null, "yes"), /*#__PURE__*/React.createElement("button", null, "no")));
+};
+
+it('should focus element passed into function', async () => {
+  const {
+    getByText
+  } = render( /*#__PURE__*/React.createElement(Component, null));
+  await waitFor(() => getByText('no'));
+  const noButton = getByText('no');
+  expect(document.activeElement).toEqual(noButton);
+});
+it('should focus first element when nothing is passed', async () => {
+  const {
+    getByText
+  } = render( /*#__PURE__*/React.createElement(ComponentTwo, null));
+  await waitFor(() => getByText('yes'));
+  const yesButton = getByText('yes');
+  expect(document.activeElement).toEqual(yesButton);
+});

package/lib-esm/__tests__/hooks/useProvidedStateOrCreate.d.ts

@@ -0,0 +1 @@
+export {};

package/lib-esm/__tests__/hooks/useProvidedStateOrCreate.js

@@ -0,0 +1,36 @@
+import { useProvidedStateOrCreate } from '../../hooks/useProvidedStateOrCreate';
+import { render } from '@testing-library/react';
+import React, { useState } from 'react';
+it('will use the provided state', () => {
+  const Component = () => {
+    const [state, setState] = useState('foo');
+    const [combinedState] = useProvidedStateOrCreate(state, setState, 'bar');
+    return /*#__PURE__*/React.createElement("div", null, combinedState);
+  };
+
+  const doc = render( /*#__PURE__*/React.createElement(Component, null));
+  expect(doc.baseElement.textContent).toEqual('foo');
+});
+it('will set state correctly when provided a set state method', () => {
+  const Component = () => {
+    const [state, setState] = useState('foo');
+    const [combinedState, setCombinedState] = useProvidedStateOrCreate(state, setState, 'bar');
+    if (combinedState !== 'baz') setCombinedState('baz');
+    return /*#__PURE__*/React.createElement("div", null, combinedState);
+  };
+
+  const doc = render( /*#__PURE__*/React.createElement(Component, null));
+  expect(doc.baseElement.textContent).toEqual('baz');
+});
+it('if not provided a state, will use an internal state', () => {
+  const Component = () => {
+    const state = undefined;
+    const setState = undefined;
+    const [combinedState, setCombinedState] = useProvidedStateOrCreate(state, setState, '');
+    if (combinedState !== 'bar') setCombinedState('bar');
+    return /*#__PURE__*/React.createElement("div", null, combinedState);
+  };
+
+  const doc = render( /*#__PURE__*/React.createElement(Component, null));
+  expect(doc.baseElement.textContent).toEqual('bar');
+});

package/lib-esm/__tests__/theme.d.ts

@@ -0,0 +1 @@
+export {};

package/lib-esm/__tests__/theme.js

@@ -0,0 +1,33 @@
+import { isShadowValue } from '../utils/theme';
+describe('isShadowValue', () => {
+  it('accepts transparent', () => {
+    expect(isShadowValue('0 0 0 transparent')).toBe(true);
+  });
+  it('accepts hex colors', () => {
+    expect(isShadowValue('0 0 0 #ff0000')).toBe(true);
+    expect(isShadowValue('0 0 0 #ff0')).toBe(true);
+  });
+  it('accepts rgba colors', () => {
+    expect(isShadowValue('0 0 0 rgb(255, 0, 0)')).toBe(true);
+    expect(isShadowValue('0 0 0 rgba(255,0,0,0.2)')).toBe(true);
+  });
+  it('accepts px values', () => {
+    expect(isShadowValue('12px 24px 0 #000')).toBe(true);
+  });
+  it('accepts em values', () => {
+    expect(isShadowValue('0.5em 1em 0 #000')).toBe(true);
+  });
+  it('accepts inset values', () => {
+    expect(isShadowValue('inset 12px 24px 0 #000')).toBe(true);
+  });
+  it('rejects individual colors', () => {
+    expect(isShadowValue('red')).toBe(false);
+    expect(isShadowValue('#f00')).toBe(false);
+    expect(isShadowValue('rgb(255, 0, 0)')).toBe(false);
+  });
+  it('rejects individual numeric values', () => {
+    expect(isShadowValue('0')).toBe(false);
+    expect(isShadowValue('12px')).toBe(false);
+    expect(isShadowValue('0.5em')).toBe(false);
+  });
+});

package/lib-esm/__tests__/themeGet.d.ts

@@ -0,0 +1 @@
+export {};

package/lib-esm/__tests__/themeGet.js

@@ -0,0 +1,22 @@
+import { themeGet } from '..';
+describe('themeGet', () => {
+  it('acccepts theme prop', () => {
+    expect(themeGet('example')({
+      theme: {
+        example: 'test'
+      }
+    })).toBe('test');
+  });
+  it('allows theme prop to override primer theme', () => {
+    expect(themeGet('colors.gray.0')({
+      theme: {
+        colors: {
+          gray: ['#f00']
+        }
+      }
+    })).toBe('#f00');
+  });
+  it('uses primer theme as fallback', () => {
+    expect(themeGet('space.1')({})).toBe('4px');
+  });
+});

package/lib-esm/__tests__/useSafeTimeout.d.ts

@@ -0,0 +1 @@
+export {};

package/lib-esm/__tests__/useSafeTimeout.js

@@ -0,0 +1,39 @@
+import { renderHook } from '@testing-library/react-hooks';
+import useSafeTimeout from '../hooks/useSafeTimeout';
+afterEach(() => {
+  jest.useRealTimers();
+});
+test('should call callback after time', async () => {
+  const {
+    result,
+    waitFor
+  } = renderHook(() => useSafeTimeout());
+  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
+  } = renderHook(() => useSafeTimeout());
+  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
+  } = renderHook(() => useSafeTimeout());
+  const mockFunction = jest.fn();
+  const timeoutId = result.current.safeSetTimeout(mockFunction, 300);
+  unmount();
+  expect(clearTimeout).toHaveBeenCalledTimes(1);
+  expect(clearTimeout).toHaveBeenLastCalledWith(timeoutId);
+});

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

@@ -0,0 +1,334 @@
+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, ArrowLeftIcon } from '@primer/octicons-react';
+import React from 'react';
+import styled from 'styled-components';
+import { Label, ThemeProvider } from '..';
+import { ActionList as _ActionList } from '../ActionList';
+import { Header } from '../ActionList/Header';
+import BaseStyles from '../BaseStyles';
+import sx from '../sx';
+const ActionList = Object.assign(_ActionList, {
+  Header
+});
+const meta = {
+  title: 'Composite components/ActionList',
+  component: ActionList,
+  decorators: [Story => /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(Story, null)))],
+  parameters: {
+    controls: {
+      disable: true
+    }
+  }
+};
+export default meta;
+const ErsatzOverlay = styled.div.withConfig({
+  displayName: "ActionListstories__ErsatzOverlay",
+  componentId: "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');
+export function ActionsStory() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Actions"), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionList, {
+    showItemDividers: true,
+    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'
+    }, {
+      leadingVisual: PlusCircleIcon,
+      text: 'Create new Codespace',
+      description: 'Create a brand new Codespace with a fresh image and checkout this branch.',
+      descriptionVariant: 'block'
+    }]
+  })));
+}
+ActionsStory.storyName = 'Actions';
+export function SimpleListStory() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Simple List"), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.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
+  };
+});
+export function SingleSelectListStory() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Single Select List"), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionList, {
+    items: selectListItems.map((item, index) => ({ ...item,
+      selected: index === 1
+    }))
+  })));
+}
+SingleSelectListStory.storyName = 'Single Select';
+export function MultiSelectListStory() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Multi Select List"), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionList, {
+    selectionVariant: "multiple",
+    items: selectListItems.map((item, index) => ({ ...item,
+      selected: index === 1 || index === 3
+    }))
+  })));
+}
+MultiSelectListStory.storyName = 'Multi Select';
+export function ComplexListInsetVariantStory() {
+  const StyledDiv = styled.div.withConfig({
+    displayName: "ActionListstories__StyledDiv",
+    componentId: "akdcn0-1"
+  })(["", ""], sx);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Complex List"), /*#__PURE__*/React.createElement("h2", null, "Inset Variant"), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.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.createElement(ActionList.Item, _extends({
+        style: {
+          fontWeight: 'bold'
+        }
+      }, props))
+    }, {
+      groupId: '4',
+      renderItem: ({
+        leadingVisual: LeadingVisual,
+        ...props
+      }) => /*#__PURE__*/React.createElement(ActionList.Item, _extends({}, props, {
+        leadingVisual: () => /*#__PURE__*/React.createElement(StyledDiv, {
+          sx: {
+            '&>svg': {
+              fill: 'white'
+            }
+          }
+        }, LeadingVisual && /*#__PURE__*/React.createElement(LeadingVisual, null))
+      })),
+      renderGroup: ({
+        sx: sxProps,
+        ...props
+      }) => /*#__PURE__*/React.createElement(ActionList.Group, _extends({}, props, {
+        sx: { ...sxProps,
+          backgroundColor: 'cornflowerblue',
+          color: 'white'
+        }
+      }))
+    }],
+    items: [{
+      leadingVisual: TypographyIcon,
+      text: 'Rename',
+      groupId: '0'
+    }, {
+      leadingVisual: VersionsIcon,
+      text: 'Duplicate',
+      description: 'Create a copy',
+      descriptionVariant: 'inline',
+      groupId: '0'
+    }, {
+      leadingVisual: SearchIcon,
+      text: 'repo:github/memex,github/github',
+      groupId: '1',
+      renderItem: props => /*#__PURE__*/React.createElement(ActionList.Item, _extends({
+        style: {
+          color: 'rebeccapurple'
+        }
+      }, props))
+    }, {
+      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'
+    }]
+  })));
+}
+ComplexListInsetVariantStory.storyName = 'Complex List — Inset Variant';
+export function ComplexListFullVariantStory() {
+  const StyledDiv = styled.div.withConfig({
+    displayName: "ActionListstories__StyledDiv",
+    componentId: "akdcn0-2"
+  })(["", ""], sx);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Complex List"), /*#__PURE__*/React.createElement("h2", null, "Full Variant"), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.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.createElement(ActionList.Item, _extends({
+        style: {
+          fontWeight: 'bold'
+        }
+      }, props))
+    }, {
+      groupId: '4',
+      renderItem: ({
+        leadingVisual: LeadingVisual,
+        ...props
+      }) => /*#__PURE__*/React.createElement(ActionList.Item, _extends({}, props, {
+        leadingVisual: () => /*#__PURE__*/React.createElement(StyledDiv, {
+          sx: {
+            '&>svg': {
+              fill: 'white'
+            }
+          }
+        }, LeadingVisual && /*#__PURE__*/React.createElement(LeadingVisual, null))
+      })),
+      renderGroup: ({
+        sx: sxProps,
+        ...props
+      }) => /*#__PURE__*/React.createElement(ActionList.Group, _extends({}, props, {
+        sx: { ...sxProps,
+          backgroundColor: 'cornflowerblue',
+          color: 'white'
+        }
+      }))
+    }],
+    items: [{
+      leadingVisual: TypographyIcon,
+      text: 'Rename',
+      groupId: '0'
+    }, {
+      leadingVisual: VersionsIcon,
+      text: 'Duplicate',
+      groupId: '0'
+    }, {
+      leadingVisual: SearchIcon,
+      text: 'repo:github/memex,github/github',
+      groupId: '1',
+      renderItem: props => /*#__PURE__*/React.createElement(ActionList.Item, _extends({
+        style: {
+          color: 'rebeccapurple'
+        }
+      }, props))
+    }, {
+      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'
+    }]
+  })));
+}
+ComplexListFullVariantStory.storyName = 'Complex List — Full Variant';
+export function HeaderStory() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Header"), /*#__PURE__*/React.createElement("h2", null, "Filled Variant"), /*#__PURE__*/React.createElement(ActionList.Header, {
+    title: "Layout",
+    variant: "filled"
+  }), /*#__PURE__*/React.createElement("h2", null, "Subtle Variant"), /*#__PURE__*/React.createElement(ActionList.Header, {
+    title: "Layout",
+    variant: "subtle"
+  }));
+}
+HeaderStory.storyName = 'Header';
+export function CustomItemChildren() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Custom Item Children"), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionList, {
+    items: [{
+      leadingVisual: ArrowRightIcon,
+      children: /*#__PURE__*/React.createElement(Label, {
+        outline: true,
+        borderColor: "success.emphasis"
+      }, "Choose this one"),
+      trailingIcon: ArrowLeftIcon
+    }]
+  })));
+}
+CustomItemChildren.storyName = 'Custom Item Children';
+export function SizeStressTestingStory() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Size Stress Testing"), /*#__PURE__*/React.createElement(ErsatzOverlay, {
+    maxWidth: "300px"
+  }, /*#__PURE__*/React.createElement(ActionList, {
+    items: [{
+      leadingVisual: ArrowRightIcon,
+      text: 'Block Description.  Long text should wrap',
+      description: 'This description is long, but it is block so it wraps',
+      descriptionVariant: 'block',
+      trailingIcon: ArrowLeftIcon,
+      showDivider: true
+    }, {
+      leadingVisual: ArrowRightIcon,
+      text: 'Inline Description',
+      description: 'This description gets truncated because it is inline',
+      trailingIcon: ArrowLeftIcon,
+      showDivider: true
+    }, {
+      leadingVisual: ArrowRightIcon,
+      text: 'Really long text without a description should wrap',
+      trailingIcon: ArrowLeftIcon,
+      showDivider: true
+    }]
+  })));
+}
+SizeStressTestingStory.storyName = 'Size Stress Testing';