@primer/components 31.0.2-rc.c7dafefb → 31.2.0-rc.25d7c83f

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (230) hide show
  1. package/.storybook/main.js +7 -9
  2. package/.storybook/preview.js +5 -1
  3. package/CHANGELOG.md +23 -1
  4. package/dist/browser.esm.js +623 -620
  5. package/dist/browser.esm.js.map +1 -1
  6. package/dist/browser.umd.js +164 -161
  7. package/dist/browser.umd.js.map +1 -1
  8. package/docs/content/ActionList2.mdx +354 -0
  9. package/docs/content/FilterList.md +2 -2
  10. package/docs/content/TextInputWithTokens.mdx +114 -0
  11. package/docs/content/getting-started.md +1 -1
  12. package/docs/content/theming.md +23 -0
  13. package/docs/src/@primer/gatsby-theme-doctocat/components/hero.js +1 -3
  14. package/docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js +1 -1
  15. package/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js +17 -0
  16. package/lib/ActionList/Header.js +1 -1
  17. package/lib/ActionList2/Description.d.ts +12 -0
  18. package/lib/ActionList2/Description.js +53 -0
  19. package/lib/ActionList2/Divider.d.ts +5 -0
  20. package/lib/ActionList2/Divider.js +35 -0
  21. package/lib/ActionList2/Group.d.ts +11 -0
  22. package/lib/ActionList2/Group.js +57 -0
  23. package/lib/ActionList2/Header.d.ts +26 -0
  24. package/lib/ActionList2/Header.js +55 -0
  25. package/lib/ActionList2/Item.d.ts +63 -0
  26. package/lib/ActionList2/Item.js +234 -0
  27. package/lib/ActionList2/LinkItem.d.ts +17 -0
  28. package/lib/ActionList2/LinkItem.js +57 -0
  29. package/lib/ActionList2/List.d.ts +26 -0
  30. package/lib/ActionList2/List.js +59 -0
  31. package/lib/ActionList2/Selection.d.ts +5 -0
  32. package/lib/ActionList2/Selection.js +70 -0
  33. package/lib/ActionList2/Visuals.d.ts +9 -0
  34. package/lib/ActionList2/Visuals.js +90 -0
  35. package/lib/ActionList2/index.d.ts +36 -0
  36. package/lib/ActionList2/index.js +47 -0
  37. package/lib/Autocomplete/Autocomplete.d.ts +4 -4
  38. package/lib/Autocomplete/AutocompleteInput.d.ts +4 -4
  39. package/lib/Button/Button.d.ts +5 -5
  40. package/lib/Button/ButtonBase.d.ts +1 -1
  41. package/lib/Button/ButtonClose.d.ts +3 -3
  42. package/lib/Button/ButtonDanger.d.ts +5 -5
  43. package/lib/Button/ButtonInvisible.d.ts +5 -5
  44. package/lib/Button/ButtonOutline.d.ts +5 -5
  45. package/lib/Button/ButtonPrimary.d.ts +5 -5
  46. package/lib/CircleBadge.d.ts +2 -2
  47. package/lib/CircleOcticon.d.ts +4 -4
  48. package/lib/Dialog.d.ts +4 -4
  49. package/lib/Dropdown.d.ts +16 -16
  50. package/lib/DropdownMenu/DropdownButton.d.ts +6 -6
  51. package/lib/FilterList.d.ts +3 -3
  52. package/lib/Flash.d.ts +1 -1
  53. package/lib/Label.d.ts +1 -1
  54. package/lib/Overlay.js +3 -1
  55. package/lib/Portal/Portal.js +3 -2
  56. package/lib/Position.d.ts +4 -4
  57. package/lib/ProgressBar.d.ts +1 -1
  58. package/lib/SelectMenu/SelectMenu.d.ts +24 -24
  59. package/lib/SelectMenu/SelectMenuItem.d.ts +1 -1
  60. package/lib/TextInputWithTokens.d.ts +8 -4
  61. package/lib/TextInputWithTokens.js +61 -8
  62. package/lib/Timeline.d.ts +4 -4
  63. package/lib/Token/AvatarToken.d.ts +1 -1
  64. package/lib/Token/IssueLabelToken.d.ts +1 -1
  65. package/lib/Token/Token.d.ts +1 -1
  66. package/lib/_TextInputWrapper.d.ts +1 -1
  67. package/lib/_TextInputWrapper.js +2 -2
  68. package/lib/__tests__/ActionList2.test.d.ts +1 -0
  69. package/lib/__tests__/ActionList2.test.js +53 -0
  70. package/lib/__tests__/AnchoredOverlay.test.js +4 -2
  71. package/lib/__tests__/KeyPaths.types.test.d.ts +11 -0
  72. package/lib/__tests__/KeyPaths.types.test.js +10 -0
  73. package/lib/__tests__/TextInputWithTokens.test.js +138 -7
  74. package/lib/__tests__/utils/createSlots.test.d.ts +1 -0
  75. package/lib/__tests__/utils/createSlots.test.js +75 -0
  76. package/lib/hooks/useAnchoredPosition.js +3 -2
  77. package/lib/hooks/useCombinedRefs.d.ts +2 -2
  78. package/lib/hooks/useCombinedRefs.js +4 -6
  79. package/lib/hooks/useResizeObserver.js +2 -2
  80. package/lib/stories/ActionList2.stories.js +907 -0
  81. package/lib/stories/TextInput.stories.js +144 -0
  82. package/lib/stories/TextInputWithTokens.stories.js +18 -1
  83. package/lib/stories/Token.stories.js +19 -2
  84. package/lib/sx.d.ts +10 -2
  85. package/lib/sx.js +8 -0
  86. package/lib/theme-preval.js +81 -2
  87. package/lib/theme.d.ts +78 -0
  88. package/lib/theme.js +3 -1
  89. package/lib/unreleased.d.ts +7 -0
  90. package/lib/unreleased.js +18 -0
  91. package/lib/utils/create-slots.d.ts +17 -0
  92. package/lib/utils/create-slots.js +105 -0
  93. package/lib/utils/testing.d.ts +14 -1
  94. package/lib/utils/types/KeyPaths.d.ts +3 -0
  95. package/lib/utils/types/KeyPaths.js +1 -0
  96. package/lib/utils/use-force-update.d.ts +1 -0
  97. package/lib/utils/use-force-update.js +19 -0
  98. package/lib/utils/useIsomorphicLayoutEffect.d.ts +3 -0
  99. package/lib/utils/useIsomorphicLayoutEffect.js +12 -0
  100. package/lib-esm/ActionList/Header.js +1 -1
  101. package/lib-esm/ActionList2/Description.d.ts +12 -0
  102. package/lib-esm/ActionList2/Description.js +37 -0
  103. package/lib-esm/ActionList2/Divider.d.ts +5 -0
  104. package/lib-esm/ActionList2/Divider.js +23 -0
  105. package/lib-esm/ActionList2/Group.d.ts +11 -0
  106. package/lib-esm/ActionList2/Group.js +40 -0
  107. package/lib-esm/ActionList2/Header.d.ts +26 -0
  108. package/lib-esm/ActionList2/Header.js +44 -0
  109. package/lib-esm/ActionList2/Item.d.ts +63 -0
  110. package/lib-esm/ActionList2/Item.js +201 -0
  111. package/lib-esm/ActionList2/LinkItem.d.ts +17 -0
  112. package/lib-esm/ActionList2/LinkItem.js +43 -0
  113. package/lib-esm/ActionList2/List.d.ts +26 -0
  114. package/lib-esm/ActionList2/List.js +37 -0
  115. package/lib-esm/ActionList2/Selection.d.ts +5 -0
  116. package/lib-esm/ActionList2/Selection.js +52 -0
  117. package/lib-esm/ActionList2/Visuals.d.ts +9 -0
  118. package/lib-esm/ActionList2/Visuals.js +68 -0
  119. package/lib-esm/ActionList2/index.d.ts +36 -0
  120. package/lib-esm/ActionList2/index.js +33 -0
  121. package/lib-esm/Autocomplete/Autocomplete.d.ts +4 -4
  122. package/lib-esm/Autocomplete/AutocompleteInput.d.ts +4 -4
  123. package/lib-esm/Button/Button.d.ts +5 -5
  124. package/lib-esm/Button/ButtonBase.d.ts +1 -1
  125. package/lib-esm/Button/ButtonClose.d.ts +3 -3
  126. package/lib-esm/Button/ButtonDanger.d.ts +5 -5
  127. package/lib-esm/Button/ButtonInvisible.d.ts +5 -5
  128. package/lib-esm/Button/ButtonOutline.d.ts +5 -5
  129. package/lib-esm/Button/ButtonPrimary.d.ts +5 -5
  130. package/lib-esm/CircleBadge.d.ts +2 -2
  131. package/lib-esm/CircleOcticon.d.ts +4 -4
  132. package/lib-esm/Dialog.d.ts +4 -4
  133. package/lib-esm/Dropdown.d.ts +16 -16
  134. package/lib-esm/DropdownMenu/DropdownButton.d.ts +6 -6
  135. package/lib-esm/FilterList.d.ts +3 -3
  136. package/lib-esm/Flash.d.ts +1 -1
  137. package/lib-esm/Label.d.ts +1 -1
  138. package/lib-esm/Overlay.js +2 -1
  139. package/lib-esm/Portal/Portal.js +2 -1
  140. package/lib-esm/Position.d.ts +4 -4
  141. package/lib-esm/ProgressBar.d.ts +1 -1
  142. package/lib-esm/SelectMenu/SelectMenu.d.ts +24 -24
  143. package/lib-esm/SelectMenu/SelectMenuItem.d.ts +1 -1
  144. package/lib-esm/TextInputWithTokens.d.ts +8 -4
  145. package/lib-esm/TextInputWithTokens.js +60 -8
  146. package/lib-esm/Timeline.d.ts +4 -4
  147. package/lib-esm/Token/AvatarToken.d.ts +1 -1
  148. package/lib-esm/Token/IssueLabelToken.d.ts +1 -1
  149. package/lib-esm/Token/Token.d.ts +1 -1
  150. package/lib-esm/_TextInputWrapper.d.ts +1 -1
  151. package/lib-esm/_TextInputWrapper.js +2 -2
  152. package/lib-esm/__tests__/ActionList2.test.d.ts +1 -0
  153. package/lib-esm/__tests__/ActionList2.test.js +41 -0
  154. package/lib-esm/__tests__/AnchoredOverlay.test.js +4 -2
  155. package/lib-esm/__tests__/KeyPaths.types.test.d.ts +11 -0
  156. package/lib-esm/__tests__/KeyPaths.types.test.js +3 -0
  157. package/lib-esm/__tests__/TextInputWithTokens.test.js +132 -8
  158. package/lib-esm/__tests__/utils/createSlots.test.d.ts +1 -0
  159. package/lib-esm/__tests__/utils/createSlots.test.js +67 -0
  160. package/lib-esm/hooks/useAnchoredPosition.js +2 -1
  161. package/lib-esm/hooks/useCombinedRefs.d.ts +2 -2
  162. package/lib-esm/hooks/useCombinedRefs.js +3 -2
  163. package/lib-esm/hooks/useResizeObserver.js +2 -2
  164. package/lib-esm/stories/ActionList2.stories.js +796 -0
  165. package/lib-esm/stories/TextInput.stories.js +117 -0
  166. package/lib-esm/stories/TextInputWithTokens.stories.js +14 -0
  167. package/lib-esm/stories/Token.stories.js +14 -1
  168. package/lib-esm/sx.d.ts +10 -2
  169. package/lib-esm/sx.js +3 -1
  170. package/lib-esm/theme-preval.js +81 -2
  171. package/lib-esm/theme.d.ts +78 -0
  172. package/lib-esm/theme.js +2 -1
  173. package/lib-esm/unreleased.d.ts +7 -0
  174. package/lib-esm/unreleased.js +8 -0
  175. package/lib-esm/utils/create-slots.d.ts +17 -0
  176. package/lib-esm/utils/create-slots.js +84 -0
  177. package/lib-esm/utils/testing.d.ts +14 -1
  178. package/lib-esm/utils/types/KeyPaths.d.ts +3 -0
  179. package/lib-esm/utils/types/KeyPaths.js +1 -0
  180. package/lib-esm/utils/use-force-update.d.ts +1 -0
  181. package/lib-esm/utils/use-force-update.js +6 -0
  182. package/lib-esm/utils/useIsomorphicLayoutEffect.d.ts +3 -0
  183. package/lib-esm/utils/useIsomorphicLayoutEffect.js +3 -0
  184. package/migrating.md +1 -1
  185. package/package-lock.json +38098 -45
  186. package/package.json +7 -3
  187. package/script/build +2 -0
  188. package/src/ActionList/Header.tsx +1 -1
  189. package/src/ActionList2/Description.tsx +49 -0
  190. package/src/ActionList2/Divider.tsx +24 -0
  191. package/src/ActionList2/Group.tsx +34 -0
  192. package/src/ActionList2/Header.tsx +58 -0
  193. package/src/ActionList2/Item.tsx +223 -0
  194. package/src/ActionList2/LinkItem.tsx +49 -0
  195. package/src/ActionList2/List.tsx +55 -0
  196. package/src/ActionList2/Selection.tsx +40 -0
  197. package/src/ActionList2/Visuals.tsx +76 -0
  198. package/src/ActionList2/index.ts +39 -0
  199. package/src/Overlay.tsx +2 -1
  200. package/src/Portal/Portal.tsx +2 -1
  201. package/src/TextInputWithTokens.tsx +64 -8
  202. package/src/_TextInputWrapper.tsx +8 -0
  203. package/src/__tests__/ActionList2.test.tsx +47 -0
  204. package/src/__tests__/AnchoredOverlay.test.tsx +2 -2
  205. package/src/__tests__/KeyPaths.types.test.ts +14 -0
  206. package/src/__tests__/TextInputWithTokens.test.tsx +123 -1
  207. package/src/__tests__/__snapshots__/ActionList2.test.tsx.snap +14 -0
  208. package/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap +35 -135
  209. package/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap +7 -0
  210. package/src/__tests__/__snapshots__/TextInput.test.tsx.snap +6 -0
  211. package/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap +463 -0
  212. package/src/__tests__/utils/__snapshots__/createSlots.test.tsx.snap +55 -0
  213. package/src/__tests__/utils/createSlots.test.tsx +74 -0
  214. package/src/hooks/useAnchoredPosition.ts +2 -1
  215. package/src/hooks/useCombinedRefs.ts +3 -3
  216. package/src/hooks/useResizeObserver.ts +2 -2
  217. package/src/stories/ActionList2.stories.tsx +1290 -0
  218. package/src/stories/Button.stories.tsx +1 -1
  219. package/src/stories/TextInput.stories.tsx +113 -0
  220. package/src/stories/TextInputWithTokens.stories.tsx +9 -0
  221. package/src/stories/Token.stories.tsx +12 -1
  222. package/src/sx.ts +17 -2
  223. package/src/theme-preval.js +1 -0
  224. package/src/theme.ts +86 -0
  225. package/src/unreleased.ts +9 -0
  226. package/src/utils/create-slots.tsx +96 -0
  227. package/src/utils/types/KeyPaths.ts +10 -0
  228. package/src/utils/use-force-update.ts +7 -0
  229. package/src/utils/useIsomorphicLayoutEffect.ts +10 -0
  230. package/stats.html +1 -1
@@ -0,0 +1 @@
1
+ export declare const useForceUpdate: () => () => void;
@@ -0,0 +1,19 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.useForceUpdate = void 0;
7
+
8
+ var _react = _interopRequireDefault(require("react"));
9
+
10
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
+
12
+ // Inspired from reach-ui: https://github.com/reach/reach-ui/blob/develop/packages/utils/src/use-force-update.ts
13
+ const useForceUpdate = () => {
14
+ const [, rerender] = _react.default.useState({});
15
+
16
+ return _react.default.useCallback(() => rerender({}), []);
17
+ };
18
+
19
+ exports.useForceUpdate = useForceUpdate;
@@ -0,0 +1,3 @@
1
+ import { useEffect } from 'react';
2
+ declare const useIsomorphicLayoutEffect: typeof useEffect;
3
+ export default useIsomorphicLayoutEffect;
@@ -0,0 +1,12 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ var _react = require("react");
9
+
10
+ const useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? _react.useLayoutEffect : _react.useEffect;
11
+ var _default = useIsomorphicLayoutEffect;
12
+ exports.default = _default;
@@ -28,6 +28,6 @@ export function Header({
28
28
  return /*#__PURE__*/React.createElement(StyledHeader, _extends({
29
29
  role: "heading",
30
30
  variant: variant
31
- }, props), title, auxiliaryText && /*#__PURE__*/React.createElement("span", null, "auxiliaryText"));
31
+ }, props), title, auxiliaryText && /*#__PURE__*/React.createElement("span", null, auxiliaryText));
32
32
  }
33
33
  Header.displayName = "Header";
@@ -0,0 +1,12 @@
1
+ import React from 'react';
2
+ import { SxProp } from '../sx';
3
+ export declare type DescriptionProps = {
4
+ /**
5
+ * Secondary text style variations.
6
+ *
7
+ * - `"inline"` - Secondary text is positioned beside primary text.
8
+ * - `"block"` - Secondary text is positioned below primary text.
9
+ */
10
+ variant?: 'inline' | 'block';
11
+ } & SxProp;
12
+ export declare const Description: React.FC<DescriptionProps>;
@@ -0,0 +1,37 @@
1
+ import React from 'react';
2
+ import Box from '../Box';
3
+ import { merge } from '../sx';
4
+ import Truncate from '../Truncate';
5
+ import { Slot } from './Item';
6
+ export const Description = ({
7
+ variant = 'inline',
8
+ sx = {},
9
+ ...props
10
+ }) => {
11
+ const styles = {
12
+ color: 'fg.muted',
13
+ fontSize: 0,
14
+ lineHeight: '16px',
15
+ flexGrow: 1,
16
+ flexBasis: 0,
17
+ minWidth: 0,
18
+ marginLeft: variant === 'block' ? 0 : 2
19
+ };
20
+ return /*#__PURE__*/React.createElement(Slot, {
21
+ name: variant === 'block' ? 'BlockDescription' : 'InlineDescription'
22
+ }, ({
23
+ blockDescriptionId,
24
+ inlineDescriptionId
25
+ }) => variant === 'block' ? /*#__PURE__*/React.createElement(Box, {
26
+ as: "span",
27
+ sx: merge(styles, sx),
28
+ id: blockDescriptionId
29
+ }, props.children) : /*#__PURE__*/React.createElement(Truncate, {
30
+ id: inlineDescriptionId,
31
+ sx: merge(styles, sx),
32
+ title: props.children,
33
+ inline: true,
34
+ maxWidth: "100%"
35
+ }, props.children));
36
+ };
37
+ Description.displayName = "Description";
@@ -0,0 +1,5 @@
1
+ /// <reference types="react" />
2
+ /**
3
+ * Visually separates `Item`s or `Group`s in an `ActionList`.
4
+ */
5
+ export declare function Divider(): JSX.Element;
@@ -0,0 +1,23 @@
1
+ import React from 'react';
2
+ import Box from '../Box';
3
+ import { get } from '../constants';
4
+
5
+ /**
6
+ * Visually separates `Item`s or `Group`s in an `ActionList`.
7
+ */
8
+ export function Divider() {
9
+ return /*#__PURE__*/React.createElement(Box, {
10
+ as: "li",
11
+ role: "separator",
12
+ sx: {
13
+ height: 1,
14
+ backgroundColor: 'actionListItem.inlineDivider',
15
+ marginTop: theme => `calc(${get('space.2')(theme)} - 1px)`,
16
+ marginBottom: 2,
17
+ listStyle: 'none' // hide the ::marker inserted by browser's stylesheet
18
+
19
+ },
20
+ "data-component": "ActionList.Divider"
21
+ });
22
+ }
23
+ Divider.displayName = "Divider";
@@ -0,0 +1,11 @@
1
+ import React from 'react';
2
+ import { SxProp } from '../sx';
3
+ import { HeaderProps } from './Header';
4
+ import { ListProps } from './List';
5
+ export declare type GroupProps = HeaderProps & SxProp & {
6
+ selectionVariant?: ListProps['selectionVariant'] | false;
7
+ };
8
+ declare type ContextProps = Pick<GroupProps, 'selectionVariant'>;
9
+ export declare const GroupContext: React.Context<ContextProps>;
10
+ export declare const Group: React.FC<GroupProps>;
11
+ export {};
@@ -0,0 +1,40 @@
1
+ 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); }
2
+
3
+ import React from 'react';
4
+ import Box from '../Box';
5
+ import { Header } from './Header';
6
+ export const GroupContext = /*#__PURE__*/React.createContext({});
7
+ export const Group = ({
8
+ title,
9
+ variant,
10
+ auxiliaryText,
11
+ selectionVariant,
12
+ sx = {},
13
+ ...props
14
+ }) => {
15
+ return /*#__PURE__*/React.createElement(Box, _extends({
16
+ as: "li",
17
+ sx: {
18
+ '&:not(:first-child)': {
19
+ marginTop: 2
20
+ },
21
+ listStyle: 'none',
22
+ // hide the ::marker inserted by browser's stylesheet
23
+ ...sx
24
+ }
25
+ }, props), title && /*#__PURE__*/React.createElement(Header, {
26
+ title: title,
27
+ variant: variant,
28
+ auxiliaryText: auxiliaryText
29
+ }), /*#__PURE__*/React.createElement(GroupContext.Provider, {
30
+ value: {
31
+ selectionVariant
32
+ }
33
+ }, /*#__PURE__*/React.createElement(Box, {
34
+ as: "ul",
35
+ sx: {
36
+ paddingInlineStart: 0
37
+ }
38
+ }, props.children)));
39
+ };
40
+ Group.displayName = "Group";
@@ -0,0 +1,26 @@
1
+ /// <reference types="react" />
2
+ import { SxProp } from '../sx';
3
+ /**
4
+ * Contract for props passed to the `Header` component.
5
+ */
6
+ export declare type HeaderProps = {
7
+ /**
8
+ * Style variations. Usage is discretionary.
9
+ *
10
+ * - `"filled"` - Superimposed on a background, offset from nearby content
11
+ * - `"subtle"` - Relatively less offset from nearby content
12
+ */
13
+ variant?: 'subtle' | 'filled';
14
+ /**
15
+ * Primary text which names a `Group`.
16
+ */
17
+ title?: string;
18
+ /**
19
+ * Secondary text which provides additional information about a `Group`.
20
+ */
21
+ auxiliaryText?: string;
22
+ } & SxProp;
23
+ /**
24
+ * Displays the name and description of a `Group`.
25
+ */
26
+ export declare const Header: ({ variant, title, auxiliaryText, sx, ...props }: HeaderProps) => JSX.Element;
@@ -0,0 +1,44 @@
1
+ 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); }
2
+
3
+ import React from 'react';
4
+ import Box from '../Box';
5
+ import { ListContext } from './List';
6
+ /**
7
+ * Contract for props passed to the `Header` component.
8
+ */
9
+
10
+ /**
11
+ * Displays the name and description of a `Group`.
12
+ */
13
+ export const Header = ({
14
+ variant = 'subtle',
15
+ title,
16
+ auxiliaryText,
17
+ sx = {},
18
+ ...props
19
+ }) => {
20
+ const {
21
+ variant: listVariant
22
+ } = React.useContext(ListContext);
23
+ const styles = {
24
+ paddingY: '6px',
25
+ paddingX: listVariant === 'full' ? 2 : 3,
26
+ fontSize: 0,
27
+ fontWeight: 'bold',
28
+ color: 'fg.muted',
29
+ ...(variant === 'filled' && {
30
+ backgroundColor: 'canvas.subtle',
31
+ marginX: 0,
32
+ marginBottom: 2,
33
+ borderTop: '1px solid',
34
+ borderBottom: '1px solid',
35
+ borderColor: 'neutral.muted'
36
+ }),
37
+ ...sx
38
+ };
39
+ return /*#__PURE__*/React.createElement(Box, _extends({
40
+ sx: styles,
41
+ role: "heading"
42
+ }, props), title, auxiliaryText && /*#__PURE__*/React.createElement("span", null, auxiliaryText));
43
+ };
44
+ Header.displayName = "Header";
@@ -0,0 +1,63 @@
1
+ import React from 'react';
2
+ import { ForwardRefComponent as PolymorphicForwardRefComponent } from '@radix-ui/react-polymorphic';
3
+ import { SxProp } from '../sx';
4
+ import { AriaRole } from '../utils/types';
5
+ export declare const getVariantStyles: (variant: ItemProps['variant'], disabled: ItemProps['disabled']) => {
6
+ color: string;
7
+ iconColor: string;
8
+ annotationColor: string;
9
+ hoverColor?: undefined;
10
+ } | {
11
+ color: string;
12
+ iconColor: string;
13
+ annotationColor: string;
14
+ hoverColor: string;
15
+ };
16
+ export declare type ItemProps = {
17
+ /**
18
+ * Primary content for an Item
19
+ */
20
+ children?: React.ReactNode;
21
+ /**
22
+ * Callback that will trigger both on click selection and keyboard selection.
23
+ */
24
+ onSelect?: (event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement>) => void;
25
+ /**
26
+ * Is the `Item` is currently selected?
27
+ */
28
+ selected?: boolean;
29
+ /**
30
+ * Style variations associated with various `Item` types.
31
+ *
32
+ * - `"default"` - An action `Item`.
33
+ * - `"danger"` - A destructive action `Item`.
34
+ */
35
+ variant?: 'default' | 'danger';
36
+ /**
37
+ * Items that are disabled can not be clicked, selected, or navigated through.
38
+ */
39
+ disabled?: boolean;
40
+ /**
41
+ * The ARIA role describing the function of `Item` component. `option` is a common value.
42
+ */
43
+ role?: AriaRole;
44
+ /**
45
+ * id to attach to the root element of the Item
46
+ */
47
+ id?: string;
48
+ /**
49
+ * Private API for use internally only. Used by LinkItem to wrap contents in an anchor
50
+ */
51
+ _PrivateItemWrapper?: React.FC;
52
+ } & SxProp;
53
+ declare const Slot: React.FC<{
54
+ name: "LeadingVisual" | "InlineDescription" | "BlockDescription" | "TrailingVisual";
55
+ children: React.ReactNode;
56
+ }>;
57
+ export { Slot };
58
+ export declare type ItemContext = Pick<ItemProps, 'variant' | 'disabled'> & {
59
+ inlineDescriptionId: string;
60
+ blockDescriptionId: string;
61
+ };
62
+ export declare const TEXT_ROW_HEIGHT = "20px";
63
+ export declare const Item: PolymorphicForwardRefComponent<"li", ItemProps>;
@@ -0,0 +1,201 @@
1
+ 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); }
2
+
3
+ import React from 'react';
4
+ import { useSSRSafeId } from '@react-aria/ssr';
5
+ import styled from 'styled-components';
6
+ import { useTheme } from '../ThemeProvider';
7
+ import Box from '../Box';
8
+ import sx, { merge } from '../sx';
9
+ import createSlots from '../utils/create-slots';
10
+ import { ListContext } from './List';
11
+ import { Selection } from './Selection';
12
+ export const getVariantStyles = (variant, disabled) => {
13
+ if (disabled) {
14
+ return {
15
+ color: 'fg.muted',
16
+ iconColor: 'fg.muted',
17
+ annotationColor: 'fg.muted'
18
+ };
19
+ }
20
+
21
+ switch (variant) {
22
+ case 'danger':
23
+ return {
24
+ color: 'danger.fg',
25
+ iconColor: 'danger.fg',
26
+ annotationColor: 'fg.muted',
27
+ hoverColor: 'actionListItem.danger.hoverText'
28
+ };
29
+
30
+ default:
31
+ return {
32
+ color: 'fg.default',
33
+ iconColor: 'fg.muted',
34
+ annotationColor: 'fg.muted',
35
+ hoverColor: 'fg.default'
36
+ };
37
+ }
38
+ };
39
+ const {
40
+ Slots,
41
+ Slot
42
+ } = createSlots(['LeadingVisual', 'InlineDescription', 'BlockDescription', 'TrailingVisual']);
43
+ export { Slot };
44
+ const LiBox = styled.li.withConfig({
45
+ displayName: "Item__LiBox",
46
+ componentId: "c3scat-0"
47
+ })(sx);
48
+ export const TEXT_ROW_HEIGHT = '20px'; // custom value off the scale
49
+
50
+ export const Item = /*#__PURE__*/React.forwardRef(({
51
+ variant = 'default',
52
+ disabled = false,
53
+ selected = undefined,
54
+ onSelect = () => null,
55
+ sx: sxProp = {},
56
+ id,
57
+ _PrivateItemWrapper = ({
58
+ children
59
+ }) => /*#__PURE__*/React.createElement(React.Fragment, null, children),
60
+ ...props
61
+ }, forwardedRef) => {
62
+ const {
63
+ variant: listVariant,
64
+ showDividers
65
+ } = React.useContext(ListContext);
66
+ const {
67
+ theme
68
+ } = useTheme();
69
+ const styles = {
70
+ display: 'flex',
71
+ paddingX: 2,
72
+ fontSize: 1,
73
+ paddingY: '6px',
74
+ // custom value off the scale
75
+ lineHeight: TEXT_ROW_HEIGHT,
76
+ marginX: listVariant === 'inset' ? 2 : 0,
77
+ minHeight: 5,
78
+ borderRadius: 2,
79
+ transition: 'background 33.333ms linear',
80
+ color: getVariantStyles(variant, disabled).color,
81
+ textDecoration: 'none',
82
+ // for as="a"
83
+ ':not([aria-disabled])': {
84
+ cursor: 'pointer'
85
+ },
86
+ '@media (hover: hover) and (pointer: fine)': {
87
+ ':hover:not([aria-disabled])': {
88
+ backgroundColor: `actionListItem.${variant}.hoverBg`,
89
+ color: getVariantStyles(variant, disabled).hoverColor
90
+ },
91
+ ':focus:not([aria-disabled])': {
92
+ backgroundColor: `actionListItem.${variant}.selectedBg`,
93
+ color: getVariantStyles(variant, disabled).hoverColor,
94
+ outline: 'none'
95
+ },
96
+ ':active:not([aria-disabled])': {
97
+ backgroundColor: `actionListItem.${variant}.activeBg`,
98
+ color: getVariantStyles(variant, disabled).hoverColor
99
+ }
100
+ },
101
+
102
+ /** Divider styles */
103
+ '[data-component="ActionList.Item--DividerContainer"]': {
104
+ position: 'relative'
105
+ },
106
+ '[data-component="ActionList.Item--DividerContainer"]::before': {
107
+ content: '" "',
108
+ display: 'block',
109
+ position: 'absolute',
110
+ width: '100%',
111
+ top: '-7px',
112
+ border: '0 solid',
113
+ borderTopWidth: showDividers ? `1px` : '0',
114
+ borderColor: 'var(--divider-color, transparent)'
115
+ },
116
+ // show between 2 items
117
+ ':not(:first-of-type):not([aria-selected=true])': {
118
+ '--divider-color': theme === null || theme === void 0 ? void 0 : theme.colors.actionListItem.inlineDivider
119
+ },
120
+ // hide divider after dividers & group header, with higher importance!
121
+ '[data-component="ActionList.Divider"] + &': {
122
+ '--divider-color': 'transparent !important'
123
+ },
124
+ // hide border on current and previous item
125
+ '&:hover:not([aria-disabled]), &:focus:not([aria-disabled])': {
126
+ '--divider-color': 'transparent'
127
+ },
128
+ '&:hover:not([aria-disabled]) + &, &:focus:not([aria-disabled]) + &': {
129
+ '--divider-color': 'transparent'
130
+ },
131
+ // hide border around selected item
132
+ '&[aria-selected=true] + &': {
133
+ '--divider-color': 'transparent'
134
+ }
135
+ };
136
+ const clickHandler = React.useCallback(event => {
137
+ if (disabled) return;
138
+ if (!event.defaultPrevented) onSelect(event);
139
+ }, [onSelect, disabled]); // use props.id if provided, otherwise generate one.
140
+
141
+ const labelId = useSSRSafeId(id);
142
+ const inlineDescriptionId = useSSRSafeId(id && `${id}--inline-description`);
143
+ const blockDescriptionId = useSSRSafeId(id && `${id}--block-description`);
144
+ return /*#__PURE__*/React.createElement(Slots, {
145
+ context: {
146
+ variant,
147
+ disabled,
148
+ inlineDescriptionId,
149
+ blockDescriptionId
150
+ }
151
+ }, slots => /*#__PURE__*/React.createElement(LiBox, _extends({
152
+ ref: forwardedRef,
153
+ sx: merge(styles, sxProp),
154
+ onClick: clickHandler,
155
+ "aria-selected": selected,
156
+ "aria-disabled": disabled ? true : undefined,
157
+ tabIndex: disabled ? undefined : -1,
158
+ "aria-labelledby": `${labelId} ${slots.InlineDescription ? inlineDescriptionId : ''}`,
159
+ "aria-describedby": slots.BlockDescription ? blockDescriptionId : undefined
160
+ }, props), /*#__PURE__*/React.createElement(_PrivateItemWrapper, null, /*#__PURE__*/React.createElement(Selection, {
161
+ selected: selected,
162
+ disabled: disabled
163
+ }), slots.LeadingVisual, /*#__PURE__*/React.createElement(Box, {
164
+ "data-component": "ActionList.Item--DividerContainer",
165
+ sx: {
166
+ display: 'flex',
167
+ flexDirection: 'column',
168
+ flexGrow: 1,
169
+ minWidth: 0
170
+ }
171
+ }, /*#__PURE__*/React.createElement(ConditionalBox, {
172
+ if: Boolean(slots.TrailingVisual),
173
+ sx: {
174
+ display: 'flex',
175
+ flexGrow: 1
176
+ }
177
+ }, /*#__PURE__*/React.createElement(ConditionalBox, {
178
+ if: Boolean(slots.InlineDescription),
179
+ sx: {
180
+ display: 'flex',
181
+ flexGrow: 1,
182
+ alignItems: 'baseline',
183
+ minWidth: 0
184
+ }
185
+ }, /*#__PURE__*/React.createElement(Box, {
186
+ as: "span",
187
+ id: labelId,
188
+ sx: {
189
+ flexGrow: slots.InlineDescription ? 0 : 1
190
+ }
191
+ }, props.children), slots.InlineDescription), slots.TrailingVisual), slots.BlockDescription))));
192
+ });
193
+ Item.displayName = 'ActionList.Item';
194
+
195
+ const ConditionalBox = props => {
196
+ const {
197
+ if: condition,
198
+ ...rest
199
+ } = props;
200
+ if (condition) return /*#__PURE__*/React.createElement(Box, rest, props.children);else return /*#__PURE__*/React.createElement(React.Fragment, null, props.children);
201
+ };
@@ -0,0 +1,17 @@
1
+ import React from 'react';
2
+ import { ForwardRefComponent as PolymorphicForwardRefComponent } from '@radix-ui/react-polymorphic';
3
+ import { ItemProps } from './Item';
4
+ declare type LinkProps = {
5
+ download?: string;
6
+ href?: string;
7
+ hrefLang?: string;
8
+ media?: string;
9
+ ping?: string;
10
+ rel?: string;
11
+ target?: string;
12
+ type?: string;
13
+ referrerPolicy?: React.AnchorHTMLAttributes<HTMLAnchorElement>['referrerPolicy'];
14
+ };
15
+ declare type LinkItemProps = Pick<ItemProps, 'children' | 'sx'> & LinkProps;
16
+ export declare const LinkItem: PolymorphicForwardRefComponent<"a", LinkItemProps>;
17
+ export {};
@@ -0,0 +1,43 @@
1
+ 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); }
2
+
3
+ import React from 'react';
4
+ import Link from '../Link';
5
+ import { merge } from '../sx';
6
+ import { Item } from './Item'; // adopted from React.AnchorHTMLAttributes
7
+
8
+ export const LinkItem = /*#__PURE__*/React.forwardRef(({
9
+ sx = {},
10
+ as: Component,
11
+ ...props
12
+ }, forwardedRef) => {
13
+ const styles = {
14
+ // occupy full size of Item
15
+ paddingX: 2,
16
+ paddingY: '6px',
17
+ // custom value off the scale
18
+ display: 'flex',
19
+ flexGrow: 1,
20
+ // full width
21
+ borderRadius: 2,
22
+ // inherit Item styles
23
+ color: 'inherit',
24
+ '&:hover': {
25
+ color: 'inherit',
26
+ textDecoration: 'none'
27
+ }
28
+ };
29
+ return /*#__PURE__*/React.createElement(Item, {
30
+ sx: {
31
+ paddingY: 0,
32
+ paddingX: 0
33
+ },
34
+ _PrivateItemWrapper: ({
35
+ children
36
+ }) => /*#__PURE__*/React.createElement(Link, _extends({
37
+ as: Component,
38
+ sx: merge(styles, sx)
39
+ }, props, {
40
+ ref: forwardedRef
41
+ }), children)
42
+ }, props.children);
43
+ });
@@ -0,0 +1,26 @@
1
+ import React from 'react';
2
+ import { ForwardRefComponent as PolymorphicForwardRefComponent } from '@radix-ui/react-polymorphic';
3
+ import { SxProp } from '../sx';
4
+ import { AriaRole } from '../utils/types';
5
+ export declare type ListProps = {
6
+ /**
7
+ * `inset` children are offset (vertically and horizontally) from `List`’s edges, `full` children are flush (vertically and horizontally) with `List` edges
8
+ */
9
+ variant?: 'inset' | 'full';
10
+ /**
11
+ * Whether multiple Items or a single Item can be selected.
12
+ */
13
+ selectionVariant?: 'single' | 'multiple';
14
+ /**
15
+ * Display a divider above each `Item` in this `List` when it does not follow a `Header` or `Divider`.
16
+ */
17
+ showDividers?: boolean;
18
+ /**
19
+ * The ARIA role describing the function of `List` component. `listbox` or `menu` are a common values.
20
+ */
21
+ role?: AriaRole;
22
+ } & SxProp;
23
+ declare type ContextProps = Omit<ListProps, 'sx'>;
24
+ export declare const ListContext: React.Context<ContextProps>;
25
+ export declare const List: PolymorphicForwardRefComponent<"ul", ListProps>;
26
+ export {};
@@ -0,0 +1,37 @@
1
+ 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); }
2
+
3
+ import React from 'react';
4
+ import styled from 'styled-components';
5
+ import sx, { merge } from '../sx';
6
+ export const ListContext = /*#__PURE__*/React.createContext({});
7
+ const ListBox = styled.ul.withConfig({
8
+ displayName: "List__ListBox",
9
+ componentId: "cvbq60-0"
10
+ })(sx);
11
+ export const List = /*#__PURE__*/React.forwardRef(({
12
+ variant = 'inset',
13
+ selectionVariant,
14
+ showDividers = false,
15
+ sx: sxProp = {},
16
+ ...props
17
+ }, forwardedRef) => {
18
+ const styles = {
19
+ margin: 0,
20
+ paddingInlineStart: 0,
21
+ // reset ul styles
22
+ paddingY: variant === 'inset' ? 2 : 0
23
+ };
24
+ return /*#__PURE__*/React.createElement(ListBox, _extends({
25
+ sx: merge(styles, sxProp),
26
+ "aria-multiselectable": selectionVariant === 'multiple' ? true : undefined
27
+ }, props, {
28
+ ref: forwardedRef
29
+ }), /*#__PURE__*/React.createElement(ListContext.Provider, {
30
+ value: {
31
+ variant,
32
+ selectionVariant,
33
+ showDividers
34
+ }
35
+ }, props.children));
36
+ });
37
+ List.displayName = 'ActionList';
@@ -0,0 +1,5 @@
1
+ import React from 'react';
2
+ import { ItemProps } from './Item';
3
+ declare type SelectionProps = Pick<ItemProps, 'selected' | 'disabled'>;
4
+ export declare const Selection: React.FC<SelectionProps>;
5
+ export {};