@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.
- package/.storybook/main.js +7 -9
- package/.storybook/preview.js +5 -1
- package/CHANGELOG.md +23 -1
- package/dist/browser.esm.js +623 -620
- package/dist/browser.esm.js.map +1 -1
- package/dist/browser.umd.js +164 -161
- package/dist/browser.umd.js.map +1 -1
- package/docs/content/ActionList2.mdx +354 -0
- package/docs/content/FilterList.md +2 -2
- package/docs/content/TextInputWithTokens.mdx +114 -0
- package/docs/content/getting-started.md +1 -1
- package/docs/content/theming.md +23 -0
- package/docs/src/@primer/gatsby-theme-doctocat/components/hero.js +1 -3
- package/docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js +1 -1
- package/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js +17 -0
- package/lib/ActionList/Header.js +1 -1
- package/lib/ActionList2/Description.d.ts +12 -0
- package/lib/ActionList2/Description.js +53 -0
- package/lib/ActionList2/Divider.d.ts +5 -0
- package/lib/ActionList2/Divider.js +35 -0
- package/lib/ActionList2/Group.d.ts +11 -0
- package/lib/ActionList2/Group.js +57 -0
- package/lib/ActionList2/Header.d.ts +26 -0
- package/lib/ActionList2/Header.js +55 -0
- package/lib/ActionList2/Item.d.ts +63 -0
- package/lib/ActionList2/Item.js +234 -0
- package/lib/ActionList2/LinkItem.d.ts +17 -0
- package/lib/ActionList2/LinkItem.js +57 -0
- package/lib/ActionList2/List.d.ts +26 -0
- package/lib/ActionList2/List.js +59 -0
- package/lib/ActionList2/Selection.d.ts +5 -0
- package/lib/ActionList2/Selection.js +70 -0
- package/lib/ActionList2/Visuals.d.ts +9 -0
- package/lib/ActionList2/Visuals.js +90 -0
- package/lib/ActionList2/index.d.ts +36 -0
- package/lib/ActionList2/index.js +47 -0
- package/lib/Autocomplete/Autocomplete.d.ts +4 -4
- package/lib/Autocomplete/AutocompleteInput.d.ts +4 -4
- package/lib/Button/Button.d.ts +5 -5
- package/lib/Button/ButtonBase.d.ts +1 -1
- package/lib/Button/ButtonClose.d.ts +3 -3
- package/lib/Button/ButtonDanger.d.ts +5 -5
- package/lib/Button/ButtonInvisible.d.ts +5 -5
- package/lib/Button/ButtonOutline.d.ts +5 -5
- package/lib/Button/ButtonPrimary.d.ts +5 -5
- package/lib/CircleBadge.d.ts +2 -2
- package/lib/CircleOcticon.d.ts +4 -4
- package/lib/Dialog.d.ts +4 -4
- package/lib/Dropdown.d.ts +16 -16
- package/lib/DropdownMenu/DropdownButton.d.ts +6 -6
- package/lib/FilterList.d.ts +3 -3
- package/lib/Flash.d.ts +1 -1
- package/lib/Label.d.ts +1 -1
- package/lib/Overlay.js +3 -1
- package/lib/Portal/Portal.js +3 -2
- package/lib/Position.d.ts +4 -4
- package/lib/ProgressBar.d.ts +1 -1
- package/lib/SelectMenu/SelectMenu.d.ts +24 -24
- package/lib/SelectMenu/SelectMenuItem.d.ts +1 -1
- package/lib/TextInputWithTokens.d.ts +8 -4
- package/lib/TextInputWithTokens.js +61 -8
- package/lib/Timeline.d.ts +4 -4
- package/lib/Token/AvatarToken.d.ts +1 -1
- package/lib/Token/IssueLabelToken.d.ts +1 -1
- package/lib/Token/Token.d.ts +1 -1
- package/lib/_TextInputWrapper.d.ts +1 -1
- package/lib/_TextInputWrapper.js +2 -2
- package/lib/__tests__/ActionList2.test.d.ts +1 -0
- package/lib/__tests__/ActionList2.test.js +53 -0
- package/lib/__tests__/AnchoredOverlay.test.js +4 -2
- package/lib/__tests__/KeyPaths.types.test.d.ts +11 -0
- package/lib/__tests__/KeyPaths.types.test.js +10 -0
- package/lib/__tests__/TextInputWithTokens.test.js +138 -7
- package/lib/__tests__/utils/createSlots.test.d.ts +1 -0
- package/lib/__tests__/utils/createSlots.test.js +75 -0
- package/lib/hooks/useAnchoredPosition.js +3 -2
- package/lib/hooks/useCombinedRefs.d.ts +2 -2
- package/lib/hooks/useCombinedRefs.js +4 -6
- package/lib/hooks/useResizeObserver.js +2 -2
- package/lib/stories/ActionList2.stories.js +907 -0
- package/lib/stories/TextInput.stories.js +144 -0
- package/lib/stories/TextInputWithTokens.stories.js +18 -1
- package/lib/stories/Token.stories.js +19 -2
- package/lib/sx.d.ts +10 -2
- package/lib/sx.js +8 -0
- package/lib/theme-preval.js +81 -2
- package/lib/theme.d.ts +78 -0
- package/lib/theme.js +3 -1
- package/lib/unreleased.d.ts +7 -0
- package/lib/unreleased.js +18 -0
- package/lib/utils/create-slots.d.ts +17 -0
- package/lib/utils/create-slots.js +105 -0
- package/lib/utils/testing.d.ts +14 -1
- package/lib/utils/types/KeyPaths.d.ts +3 -0
- package/lib/utils/types/KeyPaths.js +1 -0
- package/lib/utils/use-force-update.d.ts +1 -0
- package/lib/utils/use-force-update.js +19 -0
- package/lib/utils/useIsomorphicLayoutEffect.d.ts +3 -0
- package/lib/utils/useIsomorphicLayoutEffect.js +12 -0
- package/lib-esm/ActionList/Header.js +1 -1
- package/lib-esm/ActionList2/Description.d.ts +12 -0
- package/lib-esm/ActionList2/Description.js +37 -0
- package/lib-esm/ActionList2/Divider.d.ts +5 -0
- package/lib-esm/ActionList2/Divider.js +23 -0
- package/lib-esm/ActionList2/Group.d.ts +11 -0
- package/lib-esm/ActionList2/Group.js +40 -0
- package/lib-esm/ActionList2/Header.d.ts +26 -0
- package/lib-esm/ActionList2/Header.js +44 -0
- package/lib-esm/ActionList2/Item.d.ts +63 -0
- package/lib-esm/ActionList2/Item.js +201 -0
- package/lib-esm/ActionList2/LinkItem.d.ts +17 -0
- package/lib-esm/ActionList2/LinkItem.js +43 -0
- package/lib-esm/ActionList2/List.d.ts +26 -0
- package/lib-esm/ActionList2/List.js +37 -0
- package/lib-esm/ActionList2/Selection.d.ts +5 -0
- package/lib-esm/ActionList2/Selection.js +52 -0
- package/lib-esm/ActionList2/Visuals.d.ts +9 -0
- package/lib-esm/ActionList2/Visuals.js +68 -0
- package/lib-esm/ActionList2/index.d.ts +36 -0
- package/lib-esm/ActionList2/index.js +33 -0
- package/lib-esm/Autocomplete/Autocomplete.d.ts +4 -4
- package/lib-esm/Autocomplete/AutocompleteInput.d.ts +4 -4
- package/lib-esm/Button/Button.d.ts +5 -5
- package/lib-esm/Button/ButtonBase.d.ts +1 -1
- package/lib-esm/Button/ButtonClose.d.ts +3 -3
- package/lib-esm/Button/ButtonDanger.d.ts +5 -5
- package/lib-esm/Button/ButtonInvisible.d.ts +5 -5
- package/lib-esm/Button/ButtonOutline.d.ts +5 -5
- package/lib-esm/Button/ButtonPrimary.d.ts +5 -5
- package/lib-esm/CircleBadge.d.ts +2 -2
- package/lib-esm/CircleOcticon.d.ts +4 -4
- package/lib-esm/Dialog.d.ts +4 -4
- package/lib-esm/Dropdown.d.ts +16 -16
- package/lib-esm/DropdownMenu/DropdownButton.d.ts +6 -6
- package/lib-esm/FilterList.d.ts +3 -3
- package/lib-esm/Flash.d.ts +1 -1
- package/lib-esm/Label.d.ts +1 -1
- package/lib-esm/Overlay.js +2 -1
- package/lib-esm/Portal/Portal.js +2 -1
- package/lib-esm/Position.d.ts +4 -4
- package/lib-esm/ProgressBar.d.ts +1 -1
- package/lib-esm/SelectMenu/SelectMenu.d.ts +24 -24
- package/lib-esm/SelectMenu/SelectMenuItem.d.ts +1 -1
- package/lib-esm/TextInputWithTokens.d.ts +8 -4
- package/lib-esm/TextInputWithTokens.js +60 -8
- package/lib-esm/Timeline.d.ts +4 -4
- package/lib-esm/Token/AvatarToken.d.ts +1 -1
- package/lib-esm/Token/IssueLabelToken.d.ts +1 -1
- package/lib-esm/Token/Token.d.ts +1 -1
- package/lib-esm/_TextInputWrapper.d.ts +1 -1
- package/lib-esm/_TextInputWrapper.js +2 -2
- package/lib-esm/__tests__/ActionList2.test.d.ts +1 -0
- package/lib-esm/__tests__/ActionList2.test.js +41 -0
- package/lib-esm/__tests__/AnchoredOverlay.test.js +4 -2
- package/lib-esm/__tests__/KeyPaths.types.test.d.ts +11 -0
- package/lib-esm/__tests__/KeyPaths.types.test.js +3 -0
- package/lib-esm/__tests__/TextInputWithTokens.test.js +132 -8
- package/lib-esm/__tests__/utils/createSlots.test.d.ts +1 -0
- package/lib-esm/__tests__/utils/createSlots.test.js +67 -0
- package/lib-esm/hooks/useAnchoredPosition.js +2 -1
- package/lib-esm/hooks/useCombinedRefs.d.ts +2 -2
- package/lib-esm/hooks/useCombinedRefs.js +3 -2
- package/lib-esm/hooks/useResizeObserver.js +2 -2
- package/lib-esm/stories/ActionList2.stories.js +796 -0
- package/lib-esm/stories/TextInput.stories.js +117 -0
- package/lib-esm/stories/TextInputWithTokens.stories.js +14 -0
- package/lib-esm/stories/Token.stories.js +14 -1
- package/lib-esm/sx.d.ts +10 -2
- package/lib-esm/sx.js +3 -1
- package/lib-esm/theme-preval.js +81 -2
- package/lib-esm/theme.d.ts +78 -0
- package/lib-esm/theme.js +2 -1
- package/lib-esm/unreleased.d.ts +7 -0
- package/lib-esm/unreleased.js +8 -0
- package/lib-esm/utils/create-slots.d.ts +17 -0
- package/lib-esm/utils/create-slots.js +84 -0
- package/lib-esm/utils/testing.d.ts +14 -1
- package/lib-esm/utils/types/KeyPaths.d.ts +3 -0
- package/lib-esm/utils/types/KeyPaths.js +1 -0
- package/lib-esm/utils/use-force-update.d.ts +1 -0
- package/lib-esm/utils/use-force-update.js +6 -0
- package/lib-esm/utils/useIsomorphicLayoutEffect.d.ts +3 -0
- package/lib-esm/utils/useIsomorphicLayoutEffect.js +3 -0
- package/migrating.md +1 -1
- package/package-lock.json +38098 -45
- package/package.json +7 -3
- package/script/build +2 -0
- package/src/ActionList/Header.tsx +1 -1
- package/src/ActionList2/Description.tsx +49 -0
- package/src/ActionList2/Divider.tsx +24 -0
- package/src/ActionList2/Group.tsx +34 -0
- package/src/ActionList2/Header.tsx +58 -0
- package/src/ActionList2/Item.tsx +223 -0
- package/src/ActionList2/LinkItem.tsx +49 -0
- package/src/ActionList2/List.tsx +55 -0
- package/src/ActionList2/Selection.tsx +40 -0
- package/src/ActionList2/Visuals.tsx +76 -0
- package/src/ActionList2/index.ts +39 -0
- package/src/Overlay.tsx +2 -1
- package/src/Portal/Portal.tsx +2 -1
- package/src/TextInputWithTokens.tsx +64 -8
- package/src/_TextInputWrapper.tsx +8 -0
- package/src/__tests__/ActionList2.test.tsx +47 -0
- package/src/__tests__/AnchoredOverlay.test.tsx +2 -2
- package/src/__tests__/KeyPaths.types.test.ts +14 -0
- package/src/__tests__/TextInputWithTokens.test.tsx +123 -1
- package/src/__tests__/__snapshots__/ActionList2.test.tsx.snap +14 -0
- package/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap +35 -135
- package/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap +7 -0
- package/src/__tests__/__snapshots__/TextInput.test.tsx.snap +6 -0
- package/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap +463 -0
- package/src/__tests__/utils/__snapshots__/createSlots.test.tsx.snap +55 -0
- package/src/__tests__/utils/createSlots.test.tsx +74 -0
- package/src/hooks/useAnchoredPosition.ts +2 -1
- package/src/hooks/useCombinedRefs.ts +3 -3
- package/src/hooks/useResizeObserver.ts +2 -2
- package/src/stories/ActionList2.stories.tsx +1290 -0
- package/src/stories/Button.stories.tsx +1 -1
- package/src/stories/TextInput.stories.tsx +113 -0
- package/src/stories/TextInputWithTokens.stories.tsx +9 -0
- package/src/stories/Token.stories.tsx +12 -1
- package/src/sx.ts +17 -2
- package/src/theme-preval.js +1 -0
- package/src/theme.ts +86 -0
- package/src/unreleased.ts +9 -0
- package/src/utils/create-slots.tsx +96 -0
- package/src/utils/types/KeyPaths.ts +10 -0
- package/src/utils/use-force-update.ts +7 -0
- package/src/utils/useIsomorphicLayoutEffect.ts +10 -0
- 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,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,
|
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,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';
|