@primer/components 0.0.0-2021104181937 → 0.0.0-2021108143211
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/CHANGELOG.md +3 -1
- package/dist/browser.esm.js +473 -474
- package/dist/browser.esm.js.map +1 -1
- package/dist/browser.umd.js +97 -98
- package/dist/browser.umd.js.map +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 +71 -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 +11 -0
- package/lib/ActionList2/Visuals.js +90 -0
- package/lib/ActionList2/index.d.ts +40 -0
- package/lib/ActionList2/index.js +47 -0
- package/lib/AnchoredOverlay/AnchoredOverlay.d.ts +2 -4
- package/lib/Autocomplete/Autocomplete.d.ts +30 -32
- package/lib/Autocomplete/AutocompleteInput.d.ts +30 -32
- package/lib/Button/Button.d.ts +25 -25
- package/lib/Button/Button.js +1 -1
- package/lib/Button/ButtonClose.d.ts +45 -45
- package/lib/Button/ButtonDanger.d.ts +25 -25
- package/lib/Button/ButtonInvisible.d.ts +25 -25
- package/lib/Button/ButtonOutline.d.ts +25 -25
- package/lib/Button/ButtonPrimary.d.ts +25 -25
- package/lib/CircleOcticon.d.ts +42 -42
- package/lib/Dialog.d.ts +45 -45
- package/lib/Dropdown.d.ts +176 -176
- package/lib/DropdownMenu/DropdownButton.d.ts +46 -46
- package/lib/FilterList.d.ts +42 -42
- package/lib/Position.d.ts +4 -4
- package/lib/SelectMenu/SelectMenu.d.ts +248 -250
- package/lib/SelectMenu/SelectMenuItem.d.ts +1 -1
- package/lib/SelectMenu/SelectMenuModal.d.ts +1 -1
- package/lib/TextInputWithTokens.d.ts +30 -32
- package/lib/Timeline.d.ts +43 -43
- 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/experiments.d.ts +1 -0
- package/lib/experiments.js +18 -0
- package/lib/hooks/useResizeObserver.d.ts +1 -1
- package/lib/hooks/useResizeObserver.js +1 -1
- package/lib/sx.d.ts +2 -0
- package/lib/sx.js +8 -0
- package/lib/theme-preval.js +79 -0
- package/lib/utils/create-slots.d.ts +17 -0
- package/lib/utils/create-slots.js +105 -0
- package/lib/utils/testing.d.ts +13 -0
- package/lib/utils/use-force-update.d.ts +1 -0
- package/lib/utils/use-force-update.js +19 -0
- 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 +71 -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 +11 -0
- package/lib-esm/ActionList2/Visuals.js +68 -0
- package/lib-esm/ActionList2/index.d.ts +40 -0
- package/lib-esm/ActionList2/index.js +33 -0
- package/lib-esm/AnchoredOverlay/AnchoredOverlay.d.ts +2 -4
- package/lib-esm/Autocomplete/Autocomplete.d.ts +30 -32
- package/lib-esm/Autocomplete/AutocompleteInput.d.ts +30 -32
- package/lib-esm/Button/Button.d.ts +25 -25
- package/lib-esm/Button/Button.js +1 -1
- package/lib-esm/Button/ButtonClose.d.ts +45 -45
- package/lib-esm/Button/ButtonDanger.d.ts +25 -25
- package/lib-esm/Button/ButtonInvisible.d.ts +25 -25
- package/lib-esm/Button/ButtonOutline.d.ts +25 -25
- package/lib-esm/Button/ButtonPrimary.d.ts +25 -25
- package/lib-esm/CircleOcticon.d.ts +42 -42
- package/lib-esm/Dialog.d.ts +45 -45
- package/lib-esm/Dropdown.d.ts +176 -176
- package/lib-esm/DropdownMenu/DropdownButton.d.ts +46 -46
- package/lib-esm/FilterList.d.ts +42 -42
- package/lib-esm/Position.d.ts +4 -4
- package/lib-esm/SelectMenu/SelectMenu.d.ts +248 -250
- package/lib-esm/SelectMenu/SelectMenuItem.d.ts +1 -1
- package/lib-esm/SelectMenu/SelectMenuModal.d.ts +1 -1
- package/lib-esm/TextInputWithTokens.d.ts +30 -32
- package/lib-esm/Timeline.d.ts +43 -43
- 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/experiments.d.ts +1 -0
- package/lib-esm/experiments.js +2 -0
- package/lib-esm/hooks/useResizeObserver.d.ts +1 -1
- package/lib-esm/hooks/useResizeObserver.js +1 -1
- package/lib-esm/sx.d.ts +2 -0
- package/lib-esm/sx.js +3 -1
- package/lib-esm/theme-preval.js +79 -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 +13 -0
- package/lib-esm/utils/use-force-update.d.ts +1 -0
- package/lib-esm/utils/use-force-update.js +6 -0
- package/package.json +10 -9
- package/lib/DatePicker/DatePicker.d.ts +0 -52
- package/lib/DatePicker/DatePicker.js +0 -109
- package/lib/DatePicker/DatePickerAnchor.d.ts +0 -5
- package/lib/DatePicker/DatePickerAnchor.js +0 -202
- package/lib/DatePicker/DatePickerOverlay.d.ts +0 -3
- package/lib/DatePicker/DatePickerOverlay.js +0 -55
- package/lib/DatePicker/DatePickerPanel.d.ts +0 -2
- package/lib/DatePicker/DatePickerPanel.js +0 -363
- package/lib/DatePicker/Day.d.ts +0 -15
- package/lib/DatePicker/Day.js +0 -204
- package/lib/DatePicker/Month.d.ts +0 -8
- package/lib/DatePicker/Month.js +0 -122
- package/lib/DatePicker/dateParser.d.ts +0 -12
- package/lib/DatePicker/dateParser.js +0 -193
- package/lib/DatePicker/index.d.ts +0 -2
- package/lib/DatePicker/index.js +0 -13
- package/lib/DatePicker/useDatePicker.d.ts +0 -107
- package/lib/DatePicker/useDatePicker.js +0 -561
- package/lib/hooks/useDebounce.d.ts +0 -2
- package/lib/hooks/useDebounce.js +0 -24
- package/lib-esm/DatePicker/DatePicker.d.ts +0 -52
- package/lib-esm/DatePicker/DatePicker.js +0 -92
- package/lib-esm/DatePicker/DatePickerAnchor.d.ts +0 -5
- package/lib-esm/DatePicker/DatePickerAnchor.js +0 -174
- package/lib-esm/DatePicker/DatePickerOverlay.d.ts +0 -3
- package/lib-esm/DatePicker/DatePickerOverlay.js +0 -40
- package/lib-esm/DatePicker/DatePickerPanel.d.ts +0 -2
- package/lib-esm/DatePicker/DatePickerPanel.js +0 -332
- package/lib-esm/DatePicker/Day.d.ts +0 -15
- package/lib-esm/DatePicker/Day.js +0 -180
- package/lib-esm/DatePicker/Month.d.ts +0 -8
- package/lib-esm/DatePicker/Month.js +0 -98
- package/lib-esm/DatePicker/dateParser.d.ts +0 -12
- package/lib-esm/DatePicker/dateParser.js +0 -179
- package/lib-esm/DatePicker/index.d.ts +0 -2
- package/lib-esm/DatePicker/index.js +0 -1
- package/lib-esm/DatePicker/useDatePicker.d.ts +0 -107
- package/lib-esm/DatePicker/useDatePicker.js +0 -526
- package/lib-esm/hooks/useDebounce.d.ts +0 -2
- package/lib-esm/hooks/useDebounce.js +0 -16
@@ -0,0 +1,59 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.List = exports.ListContext = void 0;
|
7
|
+
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
9
|
+
|
10
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
11
|
+
|
12
|
+
var _sx = _interopRequireWildcard(require("../sx"));
|
13
|
+
|
14
|
+
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); }
|
15
|
+
|
16
|
+
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; }
|
17
|
+
|
18
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
19
|
+
|
20
|
+
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); }
|
21
|
+
|
22
|
+
const ListContext = /*#__PURE__*/_react.default.createContext({});
|
23
|
+
|
24
|
+
exports.ListContext = ListContext;
|
25
|
+
|
26
|
+
const ListBox = _styledComponents.default.ul.withConfig({
|
27
|
+
displayName: "List__ListBox",
|
28
|
+
componentId: "cvbq60-0"
|
29
|
+
})(_sx.default);
|
30
|
+
|
31
|
+
const List = /*#__PURE__*/_react.default.forwardRef(({
|
32
|
+
variant = 'inset',
|
33
|
+
selectionVariant,
|
34
|
+
showDividers = false,
|
35
|
+
sx: propsSx = {},
|
36
|
+
...props
|
37
|
+
}, forwardedRef) => {
|
38
|
+
const styles = {
|
39
|
+
margin: 0,
|
40
|
+
paddingInlineStart: 0,
|
41
|
+
// reset ul styles
|
42
|
+
paddingY: variant === 'inset' ? 2 : 0
|
43
|
+
};
|
44
|
+
return /*#__PURE__*/_react.default.createElement(ListBox, _extends({
|
45
|
+
sx: (0, _sx.merge)(styles, propsSx),
|
46
|
+
"aria-multiselectable": selectionVariant === 'multiple' ? true : undefined
|
47
|
+
}, props, {
|
48
|
+
ref: forwardedRef
|
49
|
+
}), /*#__PURE__*/_react.default.createElement(ListContext.Provider, {
|
50
|
+
value: {
|
51
|
+
variant,
|
52
|
+
selectionVariant,
|
53
|
+
showDividers
|
54
|
+
}
|
55
|
+
}, props.children));
|
56
|
+
});
|
57
|
+
|
58
|
+
exports.List = List;
|
59
|
+
List.displayName = 'ActionList';
|
@@ -0,0 +1,70 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.Selection = void 0;
|
7
|
+
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
9
|
+
|
10
|
+
var _octiconsReact = require("@primer/octicons-react");
|
11
|
+
|
12
|
+
var _List = require("./List");
|
13
|
+
|
14
|
+
var _Group = require("./Group");
|
15
|
+
|
16
|
+
var _Visuals = require("./Visuals");
|
17
|
+
|
18
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
19
|
+
|
20
|
+
const Selection = ({
|
21
|
+
selected,
|
22
|
+
disabled
|
23
|
+
}) => {
|
24
|
+
const {
|
25
|
+
selectionVariant: listSelectionVariant
|
26
|
+
} = _react.default.useContext(_List.ListContext);
|
27
|
+
|
28
|
+
const {
|
29
|
+
selectionVariant: groupSelectionVariant
|
30
|
+
} = _react.default.useContext(_Group.GroupContext);
|
31
|
+
/** selectionVariant in Group can override the selectionVariant in List root */
|
32
|
+
|
33
|
+
|
34
|
+
const selectionVariant = typeof groupSelectionVariant !== 'undefined' ? groupSelectionVariant : listSelectionVariant; // if selectionVariant is not set on List, don't show selection
|
35
|
+
|
36
|
+
if (!selectionVariant) {
|
37
|
+
// to avoid confusion, fail loudly instead of silently ignoring
|
38
|
+
if (selected) throw new Error('For Item to be selected, ActionList or ActionList.Group needs to have a selectionVariant defined');
|
39
|
+
return null;
|
40
|
+
}
|
41
|
+
|
42
|
+
if (selectionVariant === 'single') {
|
43
|
+
return /*#__PURE__*/_react.default.createElement(_Visuals.LeadingVisualContainer, null, selected && /*#__PURE__*/_react.default.createElement(_octiconsReact.CheckIcon, null));
|
44
|
+
}
|
45
|
+
/**
|
46
|
+
* selectionVariant is multiple
|
47
|
+
* readOnly is required because we are doing a one-way bind to `checked`
|
48
|
+
* aria-readonly="false" tells screen that they can still interact with the checkbox
|
49
|
+
*/
|
50
|
+
|
51
|
+
|
52
|
+
return /*#__PURE__*/_react.default.createElement(_Visuals.LeadingVisualContainer, {
|
53
|
+
sx: {
|
54
|
+
input: {
|
55
|
+
margin: 0,
|
56
|
+
pointerEvents: 'none'
|
57
|
+
}
|
58
|
+
}
|
59
|
+
}, /*#__PURE__*/_react.default.createElement("input", {
|
60
|
+
type: "checkbox",
|
61
|
+
checked: selected,
|
62
|
+
disabled: disabled,
|
63
|
+
tabIndex: -1,
|
64
|
+
readOnly: true,
|
65
|
+
"aria-readonly": "false"
|
66
|
+
}));
|
67
|
+
};
|
68
|
+
|
69
|
+
exports.Selection = Selection;
|
70
|
+
Selection.displayName = "Selection";
|
@@ -0,0 +1,11 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { SxProp } from '../sx';
|
3
|
+
declare type VisualProps = SxProp & {
|
4
|
+
children: React.ReactNode;
|
5
|
+
};
|
6
|
+
export declare const LeadingVisualContainer: React.FC<SxProp>;
|
7
|
+
export declare type LeadingVisualProps = VisualProps;
|
8
|
+
export declare const LeadingVisual: React.FC<VisualProps>;
|
9
|
+
export declare type TrailingVisualProps = VisualProps;
|
10
|
+
export declare const TrailingVisual: React.FC<VisualProps>;
|
11
|
+
export {};
|
@@ -0,0 +1,90 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.TrailingVisual = exports.LeadingVisual = exports.LeadingVisualContainer = void 0;
|
7
|
+
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
9
|
+
|
10
|
+
var _Box = _interopRequireDefault(require("../Box"));
|
11
|
+
|
12
|
+
var _sx = require("../sx");
|
13
|
+
|
14
|
+
var _constants = require("../constants");
|
15
|
+
|
16
|
+
var _Item = require("./Item");
|
17
|
+
|
18
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
19
|
+
|
20
|
+
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); }
|
21
|
+
|
22
|
+
const LeadingVisualContainer = ({
|
23
|
+
sx = {},
|
24
|
+
...props
|
25
|
+
}) => {
|
26
|
+
return /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
|
27
|
+
as: "span",
|
28
|
+
sx: (0, _sx.merge)({
|
29
|
+
height: _Item.TEXT_ROW_HEIGHT,
|
30
|
+
// match height of text row
|
31
|
+
minWidth: (0, _constants.get)('space.3'),
|
32
|
+
maxWidth: _Item.TEXT_ROW_HEIGHT,
|
33
|
+
// square (same as height)
|
34
|
+
display: 'flex',
|
35
|
+
justifyContent: 'center',
|
36
|
+
alignItems: 'center',
|
37
|
+
flexShrink: 0,
|
38
|
+
marginRight: 2
|
39
|
+
}, sx)
|
40
|
+
}, props));
|
41
|
+
};
|
42
|
+
|
43
|
+
exports.LeadingVisualContainer = LeadingVisualContainer;
|
44
|
+
LeadingVisualContainer.displayName = "LeadingVisualContainer";
|
45
|
+
|
46
|
+
const LeadingVisual = ({
|
47
|
+
sx = {},
|
48
|
+
...props
|
49
|
+
}) => {
|
50
|
+
return /*#__PURE__*/_react.default.createElement(_Item.Slot, {
|
51
|
+
name: "LeadingVisual"
|
52
|
+
}, ({
|
53
|
+
variant,
|
54
|
+
disabled
|
55
|
+
}) => /*#__PURE__*/_react.default.createElement(LeadingVisualContainer, _extends({
|
56
|
+
sx: (0, _sx.merge)({
|
57
|
+
color: (0, _Item.getVariantStyles)(variant, disabled).iconColor,
|
58
|
+
svg: {
|
59
|
+
fontSize: 0
|
60
|
+
}
|
61
|
+
}, sx)
|
62
|
+
}, props), props.children));
|
63
|
+
};
|
64
|
+
|
65
|
+
exports.LeadingVisual = LeadingVisual;
|
66
|
+
LeadingVisual.displayName = "LeadingVisual";
|
67
|
+
|
68
|
+
const TrailingVisual = ({
|
69
|
+
sx = {},
|
70
|
+
...props
|
71
|
+
}) => {
|
72
|
+
return /*#__PURE__*/_react.default.createElement(_Item.Slot, {
|
73
|
+
name: "TrailingVisual"
|
74
|
+
}, ({
|
75
|
+
variant,
|
76
|
+
disabled
|
77
|
+
}) => /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
|
78
|
+
as: "span",
|
79
|
+
sx: (0, _sx.merge)({
|
80
|
+
height: '20px',
|
81
|
+
// match height of text row
|
82
|
+
flexShrink: 0,
|
83
|
+
color: (0, _Item.getVariantStyles)(variant, disabled).annotationColor,
|
84
|
+
marginLeft: 2
|
85
|
+
}, sx)
|
86
|
+
}, props), props.children));
|
87
|
+
};
|
88
|
+
|
89
|
+
exports.TrailingVisual = TrailingVisual;
|
90
|
+
TrailingVisual.displayName = "TrailingVisual";
|
@@ -0,0 +1,40 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
import { Divider } from './Divider';
|
3
|
+
export type { ListProps as ActionListProps } from './List';
|
4
|
+
export type { GroupProps } from './Group';
|
5
|
+
export type { ItemProps } from './Item';
|
6
|
+
export type { DescriptionProps } from './Description';
|
7
|
+
export type { LeadingVisualProps, TrailingVisualProps } from './Visuals';
|
8
|
+
/**
|
9
|
+
* Collection of list-related components.
|
10
|
+
*/
|
11
|
+
export declare const ActionList: import("@radix-ui/react-polymorphic").ForwardRefComponent<"ul", import("./List").ListProps> & {
|
12
|
+
/** Collects related `Items` in an `ActionList`. */
|
13
|
+
Group: import("react").FC<import("./Group").GroupProps>;
|
14
|
+
/** An actionable or selectable `Item` */
|
15
|
+
Item: import("@radix-ui/react-polymorphic").ForwardRefComponent<"li", import("./Item").ItemProps>;
|
16
|
+
/** A `Item` that renders a full-size anchor inside ListItem */
|
17
|
+
LinkItem: import("@radix-ui/react-polymorphic").ForwardRefComponent<"a", Pick<import("./Item").ItemProps, "children" | "sx"> & {
|
18
|
+
download?: string | undefined;
|
19
|
+
href?: string | undefined;
|
20
|
+
hrefLang?: string | undefined;
|
21
|
+
media?: string | undefined;
|
22
|
+
ping?: string | undefined;
|
23
|
+
rel?: string | undefined;
|
24
|
+
target?: string | undefined;
|
25
|
+
type?: string | undefined;
|
26
|
+
referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
|
27
|
+
}>;
|
28
|
+
/** Visually separates `Item`s or `Group`s in an `ActionList`. */
|
29
|
+
Divider: typeof Divider;
|
30
|
+
/** Secondary text which provides additional information about an `Item`. */
|
31
|
+
Description: import("react").FC<import("./Description").DescriptionProps>;
|
32
|
+
/** Icon (or similar) positioned before `Item` text. */
|
33
|
+
LeadingVisual: import("react").FC<import("../sx").SxProp & {
|
34
|
+
children: import("react").ReactNode;
|
35
|
+
}>;
|
36
|
+
/** Icon (or similar) positioned after `Item` text. */
|
37
|
+
TrailingVisual: import("react").FC<import("../sx").SxProp & {
|
38
|
+
children: import("react").ReactNode;
|
39
|
+
}>;
|
40
|
+
};
|
@@ -0,0 +1,47 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.ActionList = void 0;
|
7
|
+
|
8
|
+
var _List = require("./List");
|
9
|
+
|
10
|
+
var _Group = require("./Group");
|
11
|
+
|
12
|
+
var _Item = require("./Item");
|
13
|
+
|
14
|
+
var _LinkItem = require("./LinkItem");
|
15
|
+
|
16
|
+
var _Divider = require("./Divider");
|
17
|
+
|
18
|
+
var _Description = require("./Description");
|
19
|
+
|
20
|
+
var _Visuals = require("./Visuals");
|
21
|
+
|
22
|
+
/**
|
23
|
+
* Collection of list-related components.
|
24
|
+
*/
|
25
|
+
const ActionList = Object.assign(_List.List, {
|
26
|
+
/** Collects related `Items` in an `ActionList`. */
|
27
|
+
Group: _Group.Group,
|
28
|
+
|
29
|
+
/** An actionable or selectable `Item` */
|
30
|
+
Item: _Item.Item,
|
31
|
+
|
32
|
+
/** A `Item` that renders a full-size anchor inside ListItem */
|
33
|
+
LinkItem: _LinkItem.LinkItem,
|
34
|
+
|
35
|
+
/** Visually separates `Item`s or `Group`s in an `ActionList`. */
|
36
|
+
Divider: _Divider.Divider,
|
37
|
+
|
38
|
+
/** Secondary text which provides additional information about an `Item`. */
|
39
|
+
Description: _Description.Description,
|
40
|
+
|
41
|
+
/** Icon (or similar) positioned before `Item` text. */
|
42
|
+
LeadingVisual: _Visuals.LeadingVisual,
|
43
|
+
|
44
|
+
/** Icon (or similar) positioned after `Item` text. */
|
45
|
+
TrailingVisual: _Visuals.TrailingVisual
|
46
|
+
});
|
47
|
+
exports.ActionList = ActionList;
|
@@ -26,8 +26,6 @@ interface AnchoredOverlayPropsWithoutAnchor {
|
|
26
26
|
*/
|
27
27
|
anchorRef: React.RefObject<HTMLElement>;
|
28
28
|
}
|
29
|
-
export declare type OverlayOpenGesture = 'anchor-click' | 'anchor-key-press';
|
30
|
-
export declare type OverlayCloseGesture = 'anchor-click' | 'click-outside' | 'escape';
|
31
29
|
export declare type AnchoredOverlayWrapperAnchorProps = Partial<AnchoredOverlayPropsWithAnchor> | AnchoredOverlayPropsWithoutAnchor;
|
32
30
|
interface AnchoredOverlayBaseProps extends Pick<OverlayProps, 'height' | 'width'> {
|
33
31
|
/**
|
@@ -37,11 +35,11 @@ interface AnchoredOverlayBaseProps extends Pick<OverlayProps, 'height' | 'width'
|
|
37
35
|
/**
|
38
36
|
* A callback which is called whenever the overlay is currently closed and an "open gesture" is detected.
|
39
37
|
*/
|
40
|
-
onOpen?: (gesture:
|
38
|
+
onOpen?: (gesture: 'anchor-click' | 'anchor-key-press') => unknown;
|
41
39
|
/**
|
42
40
|
* A callback which is called whenever the overlay is currently open and a "close gesture" is detected.
|
43
41
|
*/
|
44
|
-
onClose?: (gesture:
|
42
|
+
onClose?: (gesture: 'anchor-click' | 'click-outside' | 'escape') => unknown;
|
45
43
|
/**
|
46
44
|
* Props to be spread on the internal `Overlay` component.
|
47
45
|
*/
|
@@ -12,17 +12,15 @@ export type { AutocompleteOverlayProps } from './AutocompleteOverlay';
|
|
12
12
|
declare const _default: React.FC<{
|
13
13
|
id?: string | undefined;
|
14
14
|
}> & {
|
15
|
-
Input: import("@radix-ui/react-polymorphic").ForwardRefComponent<React.ForwardRefExoticComponent<Pick<Omit<Pick<
|
15
|
+
Input: import("@radix-ui/react-polymorphic").ForwardRefComponent<React.ForwardRefExoticComponent<Pick<Omit<Pick<{
|
16
16
|
[x: string]: any;
|
17
17
|
[x: number]: any;
|
18
18
|
} & {
|
19
19
|
theme?: any;
|
20
|
-
} &
|
21
|
-
children?: React.ReactNode;
|
22
|
-
})) & {
|
20
|
+
} & {
|
23
21
|
as?: string | React.ComponentType<any> | undefined;
|
24
22
|
forwardedAs?: string | React.ComponentType<any> | undefined;
|
25
|
-
}, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "
|
23
|
+
}, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "icon" | "sx" | "variant" | "className" | "disabled" | "contrast"> & {
|
26
24
|
className?: string | undefined;
|
27
25
|
icon?: React.ComponentType<{
|
28
26
|
className?: string | undefined;
|
@@ -39,6 +37,10 @@ declare const _default: React.FC<{
|
|
39
37
|
slot?: string | undefined;
|
40
38
|
style?: React.CSSProperties | undefined;
|
41
39
|
title?: string | undefined;
|
40
|
+
block?: boolean | undefined;
|
41
|
+
sx?: import("../sx").BetterSystemStyleObject | undefined;
|
42
|
+
variant?: "small" | "large" | undefined;
|
43
|
+
role?: React.AriaRole | undefined;
|
42
44
|
key?: React.Key | null | undefined;
|
43
45
|
defaultChecked?: boolean | undefined;
|
44
46
|
defaultValue?: string | number | readonly string[] | undefined;
|
@@ -46,17 +48,16 @@ declare const _default: React.FC<{
|
|
46
48
|
suppressHydrationWarning?: boolean | undefined;
|
47
49
|
accessKey?: string | undefined;
|
48
50
|
className?: string | undefined;
|
49
|
-
contentEditable?: "inherit" | (boolean | "
|
51
|
+
contentEditable?: "inherit" | (boolean | "false" | "true") | undefined;
|
50
52
|
contextMenu?: string | undefined;
|
51
53
|
dir?: string | undefined;
|
52
|
-
draggable?: (boolean | "
|
54
|
+
draggable?: (boolean | "false" | "true") | undefined;
|
53
55
|
id?: string | undefined;
|
54
56
|
lang?: string | undefined;
|
55
57
|
placeholder?: string | undefined;
|
56
|
-
spellCheck?: (boolean | "
|
58
|
+
spellCheck?: (boolean | "false" | "true") | undefined;
|
57
59
|
tabIndex?: number | undefined;
|
58
60
|
radioGroup?: string | undefined;
|
59
|
-
role?: React.AriaRole | undefined;
|
60
61
|
about?: string | undefined;
|
61
62
|
datatype?: string | undefined;
|
62
63
|
inlist?: any;
|
@@ -79,47 +80,47 @@ declare const _default: React.FC<{
|
|
79
80
|
inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
|
80
81
|
is?: string | undefined;
|
81
82
|
'aria-activedescendant'?: string | undefined;
|
82
|
-
'aria-atomic'?: boolean | "
|
83
|
-
'aria-autocomplete'?: "none" | "
|
84
|
-
'aria-busy'?: boolean | "
|
85
|
-
'aria-checked'?: boolean | "
|
83
|
+
'aria-atomic'?: boolean | "false" | "true" | undefined;
|
84
|
+
'aria-autocomplete'?: "none" | "both" | "inline" | "list" | undefined;
|
85
|
+
'aria-busy'?: boolean | "false" | "true" | undefined;
|
86
|
+
'aria-checked'?: boolean | "mixed" | "false" | "true" | undefined;
|
86
87
|
'aria-colcount'?: number | undefined;
|
87
88
|
'aria-colindex'?: number | undefined;
|
88
89
|
'aria-colspan'?: number | undefined;
|
89
90
|
'aria-controls'?: string | undefined;
|
90
|
-
'aria-current'?: boolean | "time" | "
|
91
|
+
'aria-current'?: boolean | "time" | "page" | "false" | "true" | "step" | "location" | "date" | undefined;
|
91
92
|
'aria-describedby'?: string | undefined;
|
92
93
|
'aria-details'?: string | undefined;
|
93
|
-
'aria-disabled'?: boolean | "
|
94
|
-
'aria-dropeffect'?: "link" | "none" | "copy" | "
|
94
|
+
'aria-disabled'?: boolean | "false" | "true" | undefined;
|
95
|
+
'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
|
95
96
|
'aria-errormessage'?: string | undefined;
|
96
|
-
'aria-expanded'?: boolean | "
|
97
|
+
'aria-expanded'?: boolean | "false" | "true" | undefined;
|
97
98
|
'aria-flowto'?: string | undefined;
|
98
|
-
'aria-grabbed'?: boolean | "
|
99
|
-
'aria-haspopup'?: boolean | "grid" | "dialog" | "menu" | "listbox" | "
|
100
|
-
'aria-hidden'?: boolean | "
|
101
|
-
'aria-invalid'?: boolean | "
|
99
|
+
'aria-grabbed'?: boolean | "false" | "true" | undefined;
|
100
|
+
'aria-haspopup'?: boolean | "grid" | "dialog" | "menu" | "listbox" | "false" | "true" | "tree" | undefined;
|
101
|
+
'aria-hidden'?: boolean | "false" | "true" | undefined;
|
102
|
+
'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
|
102
103
|
'aria-keyshortcuts'?: string | undefined;
|
103
104
|
'aria-label'?: string | undefined;
|
104
105
|
'aria-labelledby'?: string | undefined;
|
105
106
|
'aria-level'?: number | undefined;
|
106
107
|
'aria-live'?: "off" | "assertive" | "polite" | undefined;
|
107
|
-
'aria-modal'?: boolean | "
|
108
|
-
'aria-multiline'?: boolean | "
|
109
|
-
'aria-multiselectable'?: boolean | "
|
108
|
+
'aria-modal'?: boolean | "false" | "true" | undefined;
|
109
|
+
'aria-multiline'?: boolean | "false" | "true" | undefined;
|
110
|
+
'aria-multiselectable'?: boolean | "false" | "true" | undefined;
|
110
111
|
'aria-orientation'?: "horizontal" | "vertical" | undefined;
|
111
112
|
'aria-owns'?: string | undefined;
|
112
113
|
'aria-placeholder'?: string | undefined;
|
113
114
|
'aria-posinset'?: number | undefined;
|
114
|
-
'aria-pressed'?: boolean | "
|
115
|
-
'aria-readonly'?: boolean | "
|
115
|
+
'aria-pressed'?: boolean | "mixed" | "false" | "true" | undefined;
|
116
|
+
'aria-readonly'?: boolean | "false" | "true" | undefined;
|
116
117
|
'aria-relevant'?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
|
117
|
-
'aria-required'?: boolean | "
|
118
|
+
'aria-required'?: boolean | "false" | "true" | undefined;
|
118
119
|
'aria-roledescription'?: string | undefined;
|
119
120
|
'aria-rowcount'?: number | undefined;
|
120
121
|
'aria-rowindex'?: number | undefined;
|
121
122
|
'aria-rowspan'?: number | undefined;
|
122
|
-
'aria-selected'?: boolean | "
|
123
|
+
'aria-selected'?: boolean | "false" | "true" | undefined;
|
123
124
|
'aria-setsize'?: number | undefined;
|
124
125
|
'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
|
125
126
|
'aria-valuemax'?: number | undefined;
|
@@ -289,15 +290,12 @@ declare const _default: React.FC<{
|
|
289
290
|
onAnimationIterationCapture?: React.AnimationEventHandler<HTMLSpanElement> | undefined;
|
290
291
|
onTransitionEnd?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
|
291
292
|
onTransitionEndCapture?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
|
292
|
-
block?: boolean | undefined;
|
293
|
-
sx?: import("../sx").BetterSystemStyleObject | undefined;
|
294
293
|
disabled?: boolean | undefined;
|
295
|
-
variant?: "small" | "large" | undefined;
|
296
294
|
hasIcon?: boolean | undefined;
|
297
295
|
contrast?: boolean | undefined;
|
298
296
|
} & {
|
299
297
|
theme?: any;
|
300
|
-
}, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "sx" | "
|
298
|
+
}, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "sx" | "variant" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement>>, {
|
301
299
|
as?: React.ComponentType<any> | undefined;
|
302
300
|
}>;
|
303
301
|
Menu: typeof AutocompleteMenu;
|
@@ -4,17 +4,15 @@ import { ComponentProps } from '../utils/types';
|
|
4
4
|
declare type InternalAutocompleteInputProps = {
|
5
5
|
as?: React.ComponentType<any>;
|
6
6
|
};
|
7
|
-
declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRefExoticComponent<Pick<Omit<Pick<
|
7
|
+
declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRefExoticComponent<Pick<Omit<Pick<{
|
8
8
|
[x: string]: any;
|
9
9
|
[x: number]: any;
|
10
10
|
} & {
|
11
11
|
theme?: any;
|
12
|
-
} &
|
13
|
-
children?: React.ReactNode;
|
14
|
-
})) & {
|
12
|
+
} & {
|
15
13
|
as?: string | React.ComponentType<any> | undefined;
|
16
14
|
forwardedAs?: string | React.ComponentType<any> | undefined;
|
17
|
-
}, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "
|
15
|
+
}, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "icon" | "sx" | "variant" | "className" | "disabled" | "contrast"> & {
|
18
16
|
className?: string | undefined;
|
19
17
|
icon?: React.ComponentType<{
|
20
18
|
className?: string | undefined;
|
@@ -31,6 +29,10 @@ declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRef
|
|
31
29
|
slot?: string | undefined;
|
32
30
|
style?: React.CSSProperties | undefined;
|
33
31
|
title?: string | undefined;
|
32
|
+
block?: boolean | undefined;
|
33
|
+
sx?: import("../sx").BetterSystemStyleObject | undefined;
|
34
|
+
variant?: "small" | "large" | undefined;
|
35
|
+
role?: React.AriaRole | undefined;
|
34
36
|
key?: React.Key | null | undefined;
|
35
37
|
defaultChecked?: boolean | undefined;
|
36
38
|
defaultValue?: string | number | readonly string[] | undefined;
|
@@ -38,17 +40,16 @@ declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRef
|
|
38
40
|
suppressHydrationWarning?: boolean | undefined;
|
39
41
|
accessKey?: string | undefined;
|
40
42
|
className?: string | undefined;
|
41
|
-
contentEditable?: "inherit" | (boolean | "
|
43
|
+
contentEditable?: "inherit" | (boolean | "false" | "true") | undefined;
|
42
44
|
contextMenu?: string | undefined;
|
43
45
|
dir?: string | undefined;
|
44
|
-
draggable?: (boolean | "
|
46
|
+
draggable?: (boolean | "false" | "true") | undefined;
|
45
47
|
id?: string | undefined;
|
46
48
|
lang?: string | undefined;
|
47
49
|
placeholder?: string | undefined;
|
48
|
-
spellCheck?: (boolean | "
|
50
|
+
spellCheck?: (boolean | "false" | "true") | undefined;
|
49
51
|
tabIndex?: number | undefined;
|
50
52
|
radioGroup?: string | undefined;
|
51
|
-
role?: React.AriaRole | undefined;
|
52
53
|
about?: string | undefined;
|
53
54
|
datatype?: string | undefined;
|
54
55
|
inlist?: any;
|
@@ -71,47 +72,47 @@ declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRef
|
|
71
72
|
inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
|
72
73
|
is?: string | undefined;
|
73
74
|
'aria-activedescendant'?: string | undefined;
|
74
|
-
'aria-atomic'?: boolean | "
|
75
|
-
'aria-autocomplete'?: "none" | "
|
76
|
-
'aria-busy'?: boolean | "
|
77
|
-
'aria-checked'?: boolean | "
|
75
|
+
'aria-atomic'?: boolean | "false" | "true" | undefined;
|
76
|
+
'aria-autocomplete'?: "none" | "both" | "inline" | "list" | undefined;
|
77
|
+
'aria-busy'?: boolean | "false" | "true" | undefined;
|
78
|
+
'aria-checked'?: boolean | "mixed" | "false" | "true" | undefined;
|
78
79
|
'aria-colcount'?: number | undefined;
|
79
80
|
'aria-colindex'?: number | undefined;
|
80
81
|
'aria-colspan'?: number | undefined;
|
81
82
|
'aria-controls'?: string | undefined;
|
82
|
-
'aria-current'?: boolean | "time" | "
|
83
|
+
'aria-current'?: boolean | "time" | "page" | "false" | "true" | "step" | "location" | "date" | undefined;
|
83
84
|
'aria-describedby'?: string | undefined;
|
84
85
|
'aria-details'?: string | undefined;
|
85
|
-
'aria-disabled'?: boolean | "
|
86
|
-
'aria-dropeffect'?: "link" | "none" | "copy" | "
|
86
|
+
'aria-disabled'?: boolean | "false" | "true" | undefined;
|
87
|
+
'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
|
87
88
|
'aria-errormessage'?: string | undefined;
|
88
|
-
'aria-expanded'?: boolean | "
|
89
|
+
'aria-expanded'?: boolean | "false" | "true" | undefined;
|
89
90
|
'aria-flowto'?: string | undefined;
|
90
|
-
'aria-grabbed'?: boolean | "
|
91
|
-
'aria-haspopup'?: boolean | "grid" | "dialog" | "menu" | "listbox" | "
|
92
|
-
'aria-hidden'?: boolean | "
|
93
|
-
'aria-invalid'?: boolean | "
|
91
|
+
'aria-grabbed'?: boolean | "false" | "true" | undefined;
|
92
|
+
'aria-haspopup'?: boolean | "grid" | "dialog" | "menu" | "listbox" | "false" | "true" | "tree" | undefined;
|
93
|
+
'aria-hidden'?: boolean | "false" | "true" | undefined;
|
94
|
+
'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
|
94
95
|
'aria-keyshortcuts'?: string | undefined;
|
95
96
|
'aria-label'?: string | undefined;
|
96
97
|
'aria-labelledby'?: string | undefined;
|
97
98
|
'aria-level'?: number | undefined;
|
98
99
|
'aria-live'?: "off" | "assertive" | "polite" | undefined;
|
99
|
-
'aria-modal'?: boolean | "
|
100
|
-
'aria-multiline'?: boolean | "
|
101
|
-
'aria-multiselectable'?: boolean | "
|
100
|
+
'aria-modal'?: boolean | "false" | "true" | undefined;
|
101
|
+
'aria-multiline'?: boolean | "false" | "true" | undefined;
|
102
|
+
'aria-multiselectable'?: boolean | "false" | "true" | undefined;
|
102
103
|
'aria-orientation'?: "horizontal" | "vertical" | undefined;
|
103
104
|
'aria-owns'?: string | undefined;
|
104
105
|
'aria-placeholder'?: string | undefined;
|
105
106
|
'aria-posinset'?: number | undefined;
|
106
|
-
'aria-pressed'?: boolean | "
|
107
|
-
'aria-readonly'?: boolean | "
|
107
|
+
'aria-pressed'?: boolean | "mixed" | "false" | "true" | undefined;
|
108
|
+
'aria-readonly'?: boolean | "false" | "true" | undefined;
|
108
109
|
'aria-relevant'?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
|
109
|
-
'aria-required'?: boolean | "
|
110
|
+
'aria-required'?: boolean | "false" | "true" | undefined;
|
110
111
|
'aria-roledescription'?: string | undefined;
|
111
112
|
'aria-rowcount'?: number | undefined;
|
112
113
|
'aria-rowindex'?: number | undefined;
|
113
114
|
'aria-rowspan'?: number | undefined;
|
114
|
-
'aria-selected'?: boolean | "
|
115
|
+
'aria-selected'?: boolean | "false" | "true" | undefined;
|
115
116
|
'aria-setsize'?: number | undefined;
|
116
117
|
'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
|
117
118
|
'aria-valuemax'?: number | undefined;
|
@@ -281,14 +282,11 @@ declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRef
|
|
281
282
|
onAnimationIterationCapture?: React.AnimationEventHandler<HTMLSpanElement> | undefined;
|
282
283
|
onTransitionEnd?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
|
283
284
|
onTransitionEndCapture?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
|
284
|
-
block?: boolean | undefined;
|
285
|
-
sx?: import("../sx").BetterSystemStyleObject | undefined;
|
286
285
|
disabled?: boolean | undefined;
|
287
|
-
variant?: "small" | "large" | undefined;
|
288
286
|
hasIcon?: boolean | undefined;
|
289
287
|
contrast?: boolean | undefined;
|
290
288
|
} & {
|
291
289
|
theme?: any;
|
292
|
-
}, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "sx" | "
|
290
|
+
}, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "sx" | "variant" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement>>, InternalAutocompleteInputProps>;
|
293
291
|
export declare type AutocompleteInputProps = ComponentProps<typeof AutocompleteInput>;
|
294
292
|
export default AutocompleteInput;
|