@primer/components 0.0.0-202111613730 → 0.0.0-2021116163027
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/dist/browser.esm.js +2 -2
- package/dist/browser.esm.js.map +1 -1
- package/dist/browser.umd.js +2 -2
- package/dist/browser.umd.js.map +1 -1
- package/lib/ActionList2/{MenuContext.d.ts → ActionListContainerContext.d.ts} +3 -3
- package/lib/ActionList2/{MenuContext.js → ActionListContainerContext.js} +3 -3
- package/lib/ActionList2/Item.js +4 -6
- package/lib/ActionList2/List.js +2 -2
- package/lib/ActionList2/Selection.js +4 -4
- package/lib/ActionMenu2.d.ts +13 -9
- package/lib/ActionMenu2.js +63 -29
- package/lib/Autocomplete/AutocompleteMenu.js +6 -13
- package/lib/CheckboxInputField.d.ts +10 -0
- package/lib/CheckboxInputField.js +73 -0
- package/lib/RadioInputField.d.ts +8 -0
- package/lib/RadioInputField.js +82 -0
- package/lib/TextInputField.d.ts +583 -0
- package/lib/TextInputField.js +66 -0
- package/lib/_InputCaption.d.ts +13 -0
- package/lib/_InputCaption.js +26 -0
- package/lib/_InputField/InputField.d.ts +39 -0
- package/lib/_InputField/InputField.js +90 -0
- package/lib/_InputField/InputFieldCaption.d.ts +3 -0
- package/lib/_InputField/InputFieldCaption.js +30 -0
- package/lib/_InputField/InputFieldLabel.d.ts +9 -0
- package/lib/_InputField/InputFieldLabel.js +34 -0
- package/lib/_InputField/InputFieldValidation.d.ts +6 -0
- package/lib/_InputField/InputFieldValidation.js +17 -0
- package/lib/_InputField/ToggleInputField.d.ts +13 -0
- package/lib/_InputField/ToggleInputField.js +71 -0
- package/lib/_InputField/ToggleInputLeadingVisual.d.ts +3 -0
- package/lib/_InputField/ToggleInputLeadingVisual.js +22 -0
- package/lib/_InputField/ValidationAnimationContainer.d.ts +6 -0
- package/lib/_InputField/ValidationAnimationContainer.js +48 -0
- package/lib/_InputField/index.d.ts +1 -0
- package/lib/_InputField/index.js +15 -0
- package/lib/_InputField/slots.d.ts +13 -0
- package/lib/_InputField/slots.js +17 -0
- package/lib/_InputLabel.d.ts +8 -0
- package/lib/_InputLabel.js +44 -0
- package/lib/_InputValidation.d.ts +8 -0
- package/lib/_InputValidation.js +56 -0
- package/lib/_VisuallyHidden.d.ts +6 -0
- package/lib/_VisuallyHidden.js +39 -0
- package/lib/hooks/index.d.ts +1 -0
- package/lib/hooks/index.js +9 -1
- package/lib/index.d.ts +3 -0
- package/lib/index.js +24 -0
- package/lib/utils/types/FormValidationStatus.d.ts +1 -0
- package/lib/utils/types/FormValidationStatus.js +1 -0
- package/lib-esm/ActionList2/{MenuContext.d.ts → ActionListContainerContext.d.ts} +3 -3
- package/lib-esm/ActionList2/{MenuContext.js → ActionListContainerContext.js} +1 -1
- package/lib-esm/ActionList2/Item.js +4 -6
- package/lib-esm/ActionList2/List.js +2 -2
- package/lib-esm/ActionList2/Selection.js +4 -4
- package/lib-esm/ActionMenu2.d.ts +13 -9
- package/lib-esm/ActionMenu2.js +60 -27
- package/lib-esm/Autocomplete/AutocompleteMenu.js +3 -13
- package/lib-esm/CheckboxInputField.d.ts +10 -0
- package/lib-esm/CheckboxInputField.js +56 -0
- package/lib-esm/RadioInputField.d.ts +8 -0
- package/lib-esm/RadioInputField.js +65 -0
- package/lib-esm/TextInputField.d.ts +583 -0
- package/lib-esm/TextInputField.js +50 -0
- package/lib-esm/_InputCaption.d.ts +13 -0
- package/lib-esm/_InputCaption.js +15 -0
- package/lib-esm/_InputField/InputField.d.ts +39 -0
- package/lib-esm/_InputField/InputField.js +70 -0
- package/lib-esm/_InputField/InputFieldCaption.d.ts +3 -0
- package/lib-esm/_InputField/InputFieldCaption.js +18 -0
- package/lib-esm/_InputField/InputFieldLabel.d.ts +9 -0
- package/lib-esm/_InputField/InputFieldLabel.js +22 -0
- package/lib-esm/_InputField/InputFieldValidation.d.ts +6 -0
- package/lib-esm/_InputField/InputFieldValidation.js +7 -0
- package/lib-esm/_InputField/ToggleInputField.d.ts +13 -0
- package/lib-esm/_InputField/ToggleInputField.js +54 -0
- package/lib-esm/_InputField/ToggleInputLeadingVisual.d.ts +3 -0
- package/lib-esm/_InputField/ToggleInputLeadingVisual.js +11 -0
- package/lib-esm/_InputField/ValidationAnimationContainer.d.ts +6 -0
- package/lib-esm/_InputField/ValidationAnimationContainer.js +33 -0
- package/lib-esm/_InputField/index.d.ts +1 -0
- package/lib-esm/_InputField/index.js +1 -0
- package/lib-esm/_InputField/slots.d.ts +13 -0
- package/lib-esm/_InputField/slots.js +5 -0
- package/lib-esm/_InputLabel.d.ts +8 -0
- package/lib-esm/_InputLabel.js +32 -0
- package/lib-esm/_InputValidation.d.ts +8 -0
- package/lib-esm/_InputValidation.js +43 -0
- package/lib-esm/_VisuallyHidden.d.ts +6 -0
- package/lib-esm/_VisuallyHidden.js +26 -0
- package/lib-esm/hooks/index.d.ts +1 -0
- package/lib-esm/hooks/index.js +2 -1
- package/lib-esm/index.d.ts +3 -0
- package/lib-esm/index.js +3 -0
- package/lib-esm/utils/types/FormValidationStatus.d.ts +1 -0
- package/lib-esm/utils/types/FormValidationStatus.js +1 -0
- package/package.json +2 -2
@@ -0,0 +1,56 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.default = void 0;
|
7
|
+
|
8
|
+
var _octiconsReact = require("@primer/octicons-react");
|
9
|
+
|
10
|
+
var _react = _interopRequireDefault(require("react"));
|
11
|
+
|
12
|
+
var _ = require(".");
|
13
|
+
|
14
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
15
|
+
|
16
|
+
const validationIconMap = {
|
17
|
+
success: _octiconsReact.CheckCircleFillIcon,
|
18
|
+
error: _octiconsReact.AlertFillIcon
|
19
|
+
};
|
20
|
+
const validationColorMap = {
|
21
|
+
success: 'success.fg',
|
22
|
+
error: 'danger.fg'
|
23
|
+
};
|
24
|
+
|
25
|
+
const InputValidation = ({
|
26
|
+
children,
|
27
|
+
id,
|
28
|
+
validationStatus
|
29
|
+
}) => {
|
30
|
+
const IconComponent = validationStatus ? validationIconMap[validationStatus] : undefined;
|
31
|
+
const fgColor = validationStatus ? validationColorMap[validationStatus] : undefined;
|
32
|
+
return /*#__PURE__*/_react.default.createElement(_.Text, {
|
33
|
+
display: "flex",
|
34
|
+
color: fgColor,
|
35
|
+
fontSize: 0,
|
36
|
+
sx: {
|
37
|
+
alignItems: 'baseline',
|
38
|
+
a: {
|
39
|
+
color: 'currentColor',
|
40
|
+
textDecoration: 'underline'
|
41
|
+
}
|
42
|
+
}
|
43
|
+
}, IconComponent && /*#__PURE__*/_react.default.createElement(_.Box, {
|
44
|
+
as: "span",
|
45
|
+
mr: 1
|
46
|
+
}, /*#__PURE__*/_react.default.createElement(IconComponent, {
|
47
|
+
size: 12,
|
48
|
+
fill: "currentColor"
|
49
|
+
})), /*#__PURE__*/_react.default.createElement("span", {
|
50
|
+
id: id
|
51
|
+
}, children));
|
52
|
+
};
|
53
|
+
|
54
|
+
InputValidation.displayName = "InputValidation";
|
55
|
+
var _default = InputValidation;
|
56
|
+
exports.default = _default;
|
@@ -0,0 +1,39 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.default = void 0;
|
7
|
+
|
8
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
9
|
+
|
10
|
+
var _sx = _interopRequireDefault(require("./sx"));
|
11
|
+
|
12
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
13
|
+
|
14
|
+
const VisuallyHidden = _styledComponents.default.span.withConfig({
|
15
|
+
displayName: "_VisuallyHidden__VisuallyHidden",
|
16
|
+
componentId: "sc-1k15c4h-0"
|
17
|
+
})(["", ""], props => {
|
18
|
+
if (props.isVisible) {
|
19
|
+
return _sx.default;
|
20
|
+
}
|
21
|
+
|
22
|
+
return `
|
23
|
+
position: absolute;
|
24
|
+
width: 1px;
|
25
|
+
height: 1px;
|
26
|
+
padding: 0;
|
27
|
+
margin: -1px;
|
28
|
+
overflow: hidden;
|
29
|
+
clip: rect(0, 0, 0, 0);
|
30
|
+
white-space: nowrap;
|
31
|
+
border-width: 0;
|
32
|
+
`;
|
33
|
+
});
|
34
|
+
|
35
|
+
VisuallyHidden.defaultProps = {
|
36
|
+
isVisible: true
|
37
|
+
};
|
38
|
+
var _default = VisuallyHidden;
|
39
|
+
exports.default = _default;
|
package/lib/hooks/index.d.ts
CHANGED
@@ -9,3 +9,4 @@ export { useAnchoredPosition } from './useAnchoredPosition';
|
|
9
9
|
export { useOverlay } from './useOverlay';
|
10
10
|
export type { UseOverlaySettings } from './useOverlay';
|
11
11
|
export { useRenderForcingRef } from './useRenderForcingRef';
|
12
|
+
export { useProvidedStateOrCreate } from './useProvidedStateOrCreate';
|
package/lib/hooks/index.js
CHANGED
@@ -45,6 +45,12 @@ Object.defineProperty(exports, "useRenderForcingRef", {
|
|
45
45
|
return _useRenderForcingRef.useRenderForcingRef;
|
46
46
|
}
|
47
47
|
});
|
48
|
+
Object.defineProperty(exports, "useProvidedStateOrCreate", {
|
49
|
+
enumerable: true,
|
50
|
+
get: function () {
|
51
|
+
return _useProvidedStateOrCreate.useProvidedStateOrCreate;
|
52
|
+
}
|
53
|
+
});
|
48
54
|
|
49
55
|
var _useOnOutsideClick = require("./useOnOutsideClick");
|
50
56
|
|
@@ -58,4 +64,6 @@ var _useAnchoredPosition = require("./useAnchoredPosition");
|
|
58
64
|
|
59
65
|
var _useOverlay = require("./useOverlay");
|
60
66
|
|
61
|
-
var _useRenderForcingRef = require("./useRenderForcingRef");
|
67
|
+
var _useRenderForcingRef = require("./useRenderForcingRef");
|
68
|
+
|
69
|
+
var _useProvidedStateOrCreate = require("./useProvidedStateOrCreate");
|
package/lib/index.d.ts
CHANGED
@@ -48,6 +48,7 @@ export { default as CircleBadge } from './CircleBadge';
|
|
48
48
|
export type { CircleBadgeProps, CircleBadgeIconProps } from './CircleBadge';
|
49
49
|
export { default as CircleOcticon } from './CircleOcticon';
|
50
50
|
export type { CircleOcticonProps } from './CircleOcticon';
|
51
|
+
export { default as CheckboxInputField } from './CheckboxInputField';
|
51
52
|
export { default as CounterLabel } from './CounterLabel';
|
52
53
|
export type { CounterLabelProps } from './CounterLabel';
|
53
54
|
export { default as Details } from './Details';
|
@@ -88,6 +89,7 @@ export { default as Popover } from './Popover';
|
|
88
89
|
export type { PopoverProps, PopoverContentProps } from './Popover';
|
89
90
|
export { default as ProgressBar } from './ProgressBar';
|
90
91
|
export type { ProgressBarProps } from './ProgressBar';
|
92
|
+
export { default as RadioInputField } from './RadioInputField';
|
91
93
|
export { default as SelectMenu } from './SelectMenu';
|
92
94
|
export type { SelectMenuProps, SelectMenuDividerProps, SelectMenuFilterProps, SelectMenuFooterProps, SelectMenuItemProps, SelectMenuListProps, SelectMenuModalProps, SelectMenuTabsProps, SelectMenuHeaderProps, SelectMenuTabProps, SelectMenuTabPanelProps, SelectMenuLoadingAnimationProps } from './SelectMenu';
|
93
95
|
export { default as SideNav } from './SideNav';
|
@@ -104,6 +106,7 @@ export { default as TabNav } from './TabNav';
|
|
104
106
|
export type { TabNavProps, TabNavLinkProps } from './TabNav';
|
105
107
|
export { default as TextInput } from './TextInput';
|
106
108
|
export type { TextInputProps } from './TextInput';
|
109
|
+
export { default as TextInputField } from './TextInputField';
|
107
110
|
export { default as TextInputWithTokens } from './TextInputWithTokens';
|
108
111
|
export type { TextInputWithTokensProps } from './TextInputWithTokens';
|
109
112
|
export { default as Text } from './Text';
|
package/lib/index.js
CHANGED
@@ -273,6 +273,12 @@ Object.defineProperty(exports, "CircleOcticon", {
|
|
273
273
|
return _CircleOcticon.default;
|
274
274
|
}
|
275
275
|
});
|
276
|
+
Object.defineProperty(exports, "CheckboxInputField", {
|
277
|
+
enumerable: true,
|
278
|
+
get: function () {
|
279
|
+
return _CheckboxInputField.default;
|
280
|
+
}
|
281
|
+
});
|
276
282
|
Object.defineProperty(exports, "CounterLabel", {
|
277
283
|
enumerable: true,
|
278
284
|
get: function () {
|
@@ -399,6 +405,12 @@ Object.defineProperty(exports, "ProgressBar", {
|
|
399
405
|
return _ProgressBar.default;
|
400
406
|
}
|
401
407
|
});
|
408
|
+
Object.defineProperty(exports, "RadioInputField", {
|
409
|
+
enumerable: true,
|
410
|
+
get: function () {
|
411
|
+
return _RadioInputField.default;
|
412
|
+
}
|
413
|
+
});
|
402
414
|
Object.defineProperty(exports, "SelectMenu", {
|
403
415
|
enumerable: true,
|
404
416
|
get: function () {
|
@@ -447,6 +459,12 @@ Object.defineProperty(exports, "TextInput", {
|
|
447
459
|
return _TextInput.default;
|
448
460
|
}
|
449
461
|
});
|
462
|
+
Object.defineProperty(exports, "TextInputField", {
|
463
|
+
enumerable: true,
|
464
|
+
get: function () {
|
465
|
+
return _TextInputField.default;
|
466
|
+
}
|
467
|
+
});
|
450
468
|
Object.defineProperty(exports, "TextInputWithTokens", {
|
451
469
|
enumerable: true,
|
452
470
|
get: function () {
|
@@ -580,6 +598,8 @@ var _CircleBadge = _interopRequireDefault(require("./CircleBadge"));
|
|
580
598
|
|
581
599
|
var _CircleOcticon = _interopRequireDefault(require("./CircleOcticon"));
|
582
600
|
|
601
|
+
var _CheckboxInputField = _interopRequireDefault(require("./CheckboxInputField"));
|
602
|
+
|
583
603
|
var _CounterLabel = _interopRequireDefault(require("./CounterLabel"));
|
584
604
|
|
585
605
|
var _Details = _interopRequireDefault(require("./Details"));
|
@@ -620,6 +640,8 @@ var _Popover = _interopRequireDefault(require("./Popover"));
|
|
620
640
|
|
621
641
|
var _ProgressBar = _interopRequireDefault(require("./ProgressBar"));
|
622
642
|
|
643
|
+
var _RadioInputField = _interopRequireDefault(require("./RadioInputField"));
|
644
|
+
|
623
645
|
var _SelectMenu = _interopRequireDefault(require("./SelectMenu"));
|
624
646
|
|
625
647
|
var _SideNav = _interopRequireDefault(require("./SideNav"));
|
@@ -636,6 +658,8 @@ var _TabNav = _interopRequireDefault(require("./TabNav"));
|
|
636
658
|
|
637
659
|
var _TextInput = _interopRequireDefault(require("./TextInput"));
|
638
660
|
|
661
|
+
var _TextInputField = _interopRequireDefault(require("./TextInputField"));
|
662
|
+
|
639
663
|
var _TextInputWithTokens = _interopRequireDefault(require("./TextInputWithTokens"));
|
640
664
|
|
641
665
|
var _Text = _interopRequireDefault(require("./Text"));
|
@@ -0,0 +1 @@
|
|
1
|
+
export declare type FormValidationStatus = 'error' | 'success';
|
@@ -0,0 +1 @@
|
|
1
|
+
"use strict";
|
@@ -1,10 +1,10 @@
|
|
1
1
|
/** This context can be used by components that compose ActionList inside a Menu */
|
2
2
|
import React from 'react';
|
3
3
|
declare type ContextProps = {
|
4
|
-
|
4
|
+
container?: string;
|
5
5
|
listRole?: string;
|
6
6
|
itemRole?: string;
|
7
|
-
afterSelect?:
|
7
|
+
afterSelect?: Function;
|
8
8
|
};
|
9
|
-
export declare const
|
9
|
+
export declare const ActionListContainerContext: React.Context<ContextProps>;
|
10
10
|
export {};
|
@@ -8,7 +8,7 @@ import Box from '../Box';
|
|
8
8
|
import sx, { merge } from '../sx';
|
9
9
|
import createSlots from '../utils/create-slots';
|
10
10
|
import { ListContext } from './List';
|
11
|
-
import {
|
11
|
+
import { ActionListContainerContext } from './ActionListContainerContext';
|
12
12
|
import { Selection } from './Selection';
|
13
13
|
export const getVariantStyles = (variant, disabled) => {
|
14
14
|
if (disabled) {
|
@@ -66,7 +66,7 @@ export const Item = /*#__PURE__*/React.forwardRef(({
|
|
66
66
|
const {
|
67
67
|
itemRole,
|
68
68
|
afterSelect
|
69
|
-
} = React.useContext(
|
69
|
+
} = React.useContext(ActionListContainerContext);
|
70
70
|
const {
|
71
71
|
theme
|
72
72
|
} = useTheme();
|
@@ -139,21 +139,19 @@ export const Item = /*#__PURE__*/React.forwardRef(({
|
|
139
139
|
}
|
140
140
|
};
|
141
141
|
const clickHandler = React.useCallback(event => {
|
142
|
-
if (typeof onSelect !== 'function') return;
|
143
142
|
if (disabled) return;
|
144
143
|
|
145
144
|
if (!event.defaultPrevented) {
|
146
|
-
onSelect(event); // if this Item is inside a Menu, close the Menu
|
145
|
+
if (typeof onSelect === 'function') onSelect(event); // if this Item is inside a Menu, close the Menu
|
147
146
|
|
148
147
|
if (typeof afterSelect === 'function') afterSelect();
|
149
148
|
}
|
150
149
|
}, [onSelect, disabled, afterSelect]);
|
151
150
|
const keyPressHandler = React.useCallback(event => {
|
152
|
-
if (typeof onSelect !== 'function') return;
|
153
151
|
if (disabled) return;
|
154
152
|
|
155
153
|
if (!event.defaultPrevented && [' ', 'Enter'].includes(event.key)) {
|
156
|
-
onSelect(event); // if this Item is inside a Menu, close the Menu
|
154
|
+
if (typeof onSelect === 'function') onSelect(event); // if this Item is inside a Menu, close the Menu
|
157
155
|
|
158
156
|
if (typeof afterSelect === 'function') afterSelect();
|
159
157
|
}
|
@@ -3,7 +3,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
3
3
|
import React from 'react';
|
4
4
|
import styled from 'styled-components';
|
5
5
|
import sx, { merge } from '../sx';
|
6
|
-
import {
|
6
|
+
import { ActionListContainerContext } from './ActionListContainerContext';
|
7
7
|
export const ListContext = /*#__PURE__*/React.createContext({});
|
8
8
|
const ListBox = styled.ul.withConfig({
|
9
9
|
displayName: "List__ListBox",
|
@@ -27,7 +27,7 @@ export const List = /*#__PURE__*/React.forwardRef(({
|
|
27
27
|
|
28
28
|
const {
|
29
29
|
listRole
|
30
|
-
} = React.useContext(
|
30
|
+
} = React.useContext(ActionListContainerContext);
|
31
31
|
return /*#__PURE__*/React.createElement(ListBox, _extends({
|
32
32
|
sx: merge(styles, sxProp),
|
33
33
|
role: role || listRole
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
2
2
|
import { CheckIcon } from '@primer/octicons-react';
|
3
3
|
import { ListContext } from './List';
|
4
4
|
import { GroupContext } from './Group';
|
5
|
-
import {
|
5
|
+
import { ActionListContainerContext } from './ActionListContainerContext';
|
6
6
|
import { LeadingVisualContainer } from './Visuals';
|
7
7
|
export const Selection = ({
|
8
8
|
selected
|
@@ -14,8 +14,8 @@ export const Selection = ({
|
|
14
14
|
selectionVariant: groupSelectionVariant
|
15
15
|
} = React.useContext(GroupContext);
|
16
16
|
const {
|
17
|
-
|
18
|
-
} = React.useContext(
|
17
|
+
container
|
18
|
+
} = React.useContext(ActionListContainerContext);
|
19
19
|
/** selectionVariant in Group can override the selectionVariant in List root */
|
20
20
|
|
21
21
|
const selectionVariant = typeof groupSelectionVariant !== 'undefined' ? groupSelectionVariant : listSelectionVariant; // if selectionVariant is not set on List, don't show selection
|
@@ -26,7 +26,7 @@ export const Selection = ({
|
|
26
26
|
return null;
|
27
27
|
}
|
28
28
|
|
29
|
-
if (
|
29
|
+
if (container === 'ActionMenu') {
|
30
30
|
throw new Error('ActionList cannot have a selectionVariant inside ActionMenu, please use DropdownMenu or SelectPanel instead. More information: https://primer.style/design/components/action-list#application');
|
31
31
|
return null;
|
32
32
|
}
|
package/lib-esm/ActionMenu2.d.ts
CHANGED
@@ -1,10 +1,12 @@
|
|
1
1
|
import { ButtonProps } from './Button';
|
2
2
|
import React from 'react';
|
3
|
+
import { AnchoredOverlayProps } from './AnchoredOverlay';
|
3
4
|
import { OverlayProps } from './Overlay';
|
4
|
-
|
5
|
-
declare
|
5
|
+
declare type MenuContextProps = Pick<AnchoredOverlayProps, 'anchorRef' | 'renderAnchor' | 'open' | 'onOpen' | 'onClose'>;
|
6
|
+
export declare const MenuContext: React.Context<MenuContextProps>;
|
7
|
+
export declare type ActionMenuProps = {
|
6
8
|
/**
|
7
|
-
* Recommended: `ActionMenu.Button` or `ActionMenu.Anchor` with
|
9
|
+
* Recommended: `ActionMenu.Button` or `ActionMenu.Anchor` with `ActionMenu.Overlay`
|
8
10
|
*/
|
9
11
|
children: React.ReactElement[] | React.ReactElement;
|
10
12
|
/**
|
@@ -15,17 +17,18 @@ declare type ActionMenuBaseProps = {
|
|
15
17
|
* If defined, will control the open/closed state of the overlay. Must be used in conjuction with `open`.
|
16
18
|
*/
|
17
19
|
onOpenChange?: (s: boolean) => void;
|
18
|
-
|
19
|
-
* Props to be spread on the internal `Overlay` component.
|
20
|
-
*/
|
21
|
-
overlayProps?: Partial<OverlayProps>;
|
22
|
-
};
|
23
|
-
export declare type ActionMenuProps = ActionMenuBaseProps & AnchoredOverlayWrapperAnchorProps;
|
20
|
+
} & Pick<AnchoredOverlayProps, 'anchorRef'>;
|
24
21
|
export declare type MenuAnchorProps = {
|
25
22
|
children: React.ReactElement;
|
26
23
|
};
|
27
24
|
/** this component is syntactical sugar 🍭 */
|
28
25
|
export declare type MenuButtonProps = ButtonProps;
|
26
|
+
declare type MenuOverlayProps = Partial<OverlayProps> & {
|
27
|
+
/**
|
28
|
+
* Recommended: `ActionList`
|
29
|
+
*/
|
30
|
+
children: React.ReactElement[] | React.ReactElement;
|
31
|
+
};
|
29
32
|
export declare const ActionMenu: React.FC<ActionMenuProps> & {
|
30
33
|
Button: React.ForwardRefExoticComponent<Pick<{
|
31
34
|
color?: string | undefined;
|
@@ -308,6 +311,7 @@ export declare const ActionMenu: React.FC<ActionMenuProps> & {
|
|
308
311
|
variant?: "small" | "medium" | "large" | undefined;
|
309
312
|
}> & React.RefAttributes<React.RefObject<HTMLElement> | undefined>>;
|
310
313
|
Anchor: React.ForwardRefExoticComponent<MenuAnchorProps & React.RefAttributes<React.RefObject<HTMLElement> | undefined>>;
|
314
|
+
Overlay: React.FC<MenuOverlayProps>;
|
311
315
|
Divider: React.FC<import("./sx").SxProp>;
|
312
316
|
};
|
313
317
|
export {};
|
package/lib-esm/ActionMenu2.js
CHANGED
@@ -1,49 +1,49 @@
|
|
1
1
|
import Button from './Button';
|
2
2
|
import React from 'react';
|
3
3
|
import { AnchoredOverlay } from './AnchoredOverlay';
|
4
|
-
import { useProvidedStateOrCreate } from './hooks
|
5
|
-
import { useProvidedRefOrCreate } from './hooks';
|
4
|
+
import { useProvidedRefOrCreate, useProvidedStateOrCreate } from './hooks';
|
6
5
|
import { Divider } from './ActionList2/Divider';
|
7
|
-
import {
|
6
|
+
import { ActionListContainerContext } from './ActionList2/ActionListContainerContext';
|
7
|
+
export const MenuContext = /*#__PURE__*/React.createContext({
|
8
|
+
renderAnchor: null,
|
9
|
+
open: false
|
10
|
+
});
|
8
11
|
|
9
|
-
const
|
12
|
+
const Menu = ({
|
10
13
|
anchorRef: externalAnchorRef,
|
11
14
|
open,
|
12
15
|
onOpenChange,
|
13
|
-
overlayProps,
|
14
16
|
children
|
15
17
|
}) => {
|
16
18
|
const [combinedOpenState, setCombinedOpenState] = useProvidedStateOrCreate(open, onOpenChange, false);
|
17
|
-
const anchorRef = useProvidedRefOrCreate(externalAnchorRef);
|
18
19
|
const onOpen = React.useCallback(() => setCombinedOpenState(true), [setCombinedOpenState]);
|
19
20
|
const onClose = React.useCallback(() => setCombinedOpenState(false), [setCombinedOpenState]);
|
20
|
-
|
21
|
-
|
22
|
-
|
21
|
+
const anchorRef = useProvidedRefOrCreate(externalAnchorRef);
|
22
|
+
let renderAnchor = null; // 🚨 Hack for good API!
|
23
|
+
// we strip out Anchor from children and pass it to AnchoredOverlay to render
|
24
|
+
// with additional props for accessibility
|
25
|
+
|
26
|
+
const contents = React.Children.map(children, child => {
|
23
27
|
if (child.type === MenuButton || child.type === Anchor) {
|
24
28
|
renderAnchor = anchorProps => /*#__PURE__*/React.cloneElement(child, anchorProps);
|
25
|
-
|
26
|
-
|
29
|
+
|
30
|
+
return null;
|
27
31
|
}
|
32
|
+
|
33
|
+
return child;
|
28
34
|
});
|
29
|
-
return /*#__PURE__*/React.createElement(
|
30
|
-
renderAnchor: renderAnchor,
|
31
|
-
anchorRef: anchorRef,
|
32
|
-
open: combinedOpenState,
|
33
|
-
onOpen: onOpen,
|
34
|
-
onClose: onClose,
|
35
|
-
overlayProps: overlayProps
|
36
|
-
}, /*#__PURE__*/React.createElement(ActionListMenuContext.Provider, {
|
35
|
+
return /*#__PURE__*/React.createElement(MenuContext.Provider, {
|
37
36
|
value: {
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
37
|
+
anchorRef,
|
38
|
+
renderAnchor,
|
39
|
+
open: combinedOpenState,
|
40
|
+
onOpen,
|
41
|
+
onClose
|
42
42
|
}
|
43
|
-
}, contents)
|
43
|
+
}, contents);
|
44
44
|
};
|
45
45
|
|
46
|
-
|
46
|
+
Menu.displayName = "Menu";
|
47
47
|
const Anchor = /*#__PURE__*/React.forwardRef(({
|
48
48
|
children,
|
49
49
|
...anchorProps
|
@@ -59,9 +59,42 @@ const MenuButton = /*#__PURE__*/React.forwardRef((props, anchorRef) => {
|
|
59
59
|
ref: anchorRef
|
60
60
|
}, /*#__PURE__*/React.createElement(Button, props));
|
61
61
|
});
|
62
|
-
|
63
|
-
|
62
|
+
|
63
|
+
const Overlay = ({
|
64
|
+
children,
|
65
|
+
...overlayProps
|
66
|
+
}) => {
|
67
|
+
// we typecast anchorRef as required instead of optional
|
68
|
+
// because we know that we're setting it in context in Menu
|
69
|
+
const {
|
70
|
+
anchorRef,
|
71
|
+
renderAnchor,
|
72
|
+
open,
|
73
|
+
onOpen,
|
74
|
+
onClose
|
75
|
+
} = React.useContext(MenuContext);
|
76
|
+
return /*#__PURE__*/React.createElement(AnchoredOverlay, {
|
77
|
+
anchorRef: anchorRef,
|
78
|
+
renderAnchor: renderAnchor,
|
79
|
+
open: open,
|
80
|
+
onOpen: onOpen,
|
81
|
+
onClose: onClose,
|
82
|
+
overlayProps: overlayProps
|
83
|
+
}, /*#__PURE__*/React.createElement(ActionListContainerContext.Provider, {
|
84
|
+
value: {
|
85
|
+
container: 'ActionMenu',
|
86
|
+
listRole: 'menu',
|
87
|
+
itemRole: 'menuitem',
|
88
|
+
afterSelect: onClose
|
89
|
+
}
|
90
|
+
}, children));
|
91
|
+
};
|
92
|
+
|
93
|
+
Overlay.displayName = "Overlay";
|
94
|
+
Menu.displayName = 'ActionMenu';
|
95
|
+
export const ActionMenu = Object.assign(Menu, {
|
64
96
|
Button: MenuButton,
|
65
97
|
Anchor,
|
98
|
+
Overlay,
|
66
99
|
Divider
|
67
100
|
});
|
@@ -6,6 +6,7 @@ import { AutocompleteContext } from './AutocompleteContext';
|
|
6
6
|
import { PlusIcon } from '@primer/octicons-react';
|
7
7
|
import { uniqueId } from '../utils/uniqueId';
|
8
8
|
import { scrollIntoViewingArea } from '../behaviors/scrollIntoViewingArea';
|
9
|
+
import VisuallyHidden from '../_VisuallyHidden';
|
9
10
|
|
10
11
|
const getDefaultSortFn = isItemSelectedFn => (itemIdA, itemIdB) => isItemSelectedFn(itemIdA) === isItemSelectedFn(itemIdB) ? 0 : isItemSelectedFn(itemIdA) ? -1 : 1;
|
11
12
|
|
@@ -164,19 +165,8 @@ function AutocompleteMenu(props) {
|
|
164
165
|
setSelectedItemLength(selectedItemIds.length);
|
165
166
|
}
|
166
167
|
}, [selectedItemIds, setSelectedItemLength]);
|
167
|
-
return /*#__PURE__*/React.createElement(
|
168
|
-
|
169
|
-
// visually hides this label for sighted users
|
170
|
-
position: 'absolute',
|
171
|
-
width: '1px',
|
172
|
-
height: '1px',
|
173
|
-
padding: '0',
|
174
|
-
margin: '-1px',
|
175
|
-
overflow: 'hidden',
|
176
|
-
clip: 'rect(0, 0, 0, 0)',
|
177
|
-
whiteSpace: 'nowrap',
|
178
|
-
borderWidth: '0'
|
179
|
-
} : {}
|
168
|
+
return /*#__PURE__*/React.createElement(VisuallyHidden, {
|
169
|
+
isVisible: showMenu
|
180
170
|
}, loading ? /*#__PURE__*/React.createElement(Box, {
|
181
171
|
p: 3,
|
182
172
|
display: "flex",
|
@@ -0,0 +1,10 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
declare const _default: React.FC<import("./_InputField/ToggleInputField").Props> & {
|
3
|
+
Input: React.FC<Omit<React.HTMLProps<HTMLInputElement>, "ref"> & {
|
4
|
+
ref?: React.Ref<HTMLInputElement> | undefined;
|
5
|
+
}>;
|
6
|
+
Caption: React.FC<{}>;
|
7
|
+
Label: React.FC<import("./_InputField/InputFieldLabel").Props>;
|
8
|
+
LeadingVisual: React.FC<{}>;
|
9
|
+
};
|
10
|
+
export default _default;
|
@@ -0,0 +1,56 @@
|
|
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 { Checkbox } from '.';
|
5
|
+
import InputField from './_InputField/InputField';
|
6
|
+
import { Slot } from './_InputField/slots';
|
7
|
+
import ToggleInputField from './_InputField/ToggleInputField';
|
8
|
+
import ToggleInputLeadingVisual from './_InputField/ToggleInputLeadingVisual';
|
9
|
+
|
10
|
+
const Input = ({
|
11
|
+
id: idProp,
|
12
|
+
required: requiredProp,
|
13
|
+
disabled: disabledProp,
|
14
|
+
...rest
|
15
|
+
}) => {
|
16
|
+
if (idProp) {
|
17
|
+
// eslint-disable-next-line no-console
|
18
|
+
console.warn("instead of passing the 'id' prop directly to <TextInputField.Input>, it should be passed to the parent component, <TextInputField>");
|
19
|
+
}
|
20
|
+
|
21
|
+
if (disabledProp) {
|
22
|
+
// eslint-disable-next-line no-console
|
23
|
+
console.warn("instead of passing the 'disabled' prop directly to <TextInputField.Input>, it should be passed to the parent component, <TextInputField>");
|
24
|
+
}
|
25
|
+
|
26
|
+
if (requiredProp) {
|
27
|
+
// eslint-disable-next-line no-console
|
28
|
+
console.warn("instead of passing the 'required' prop directly to <TextInputField.Input>, it should be passed to the parent component, <TextInputField>");
|
29
|
+
}
|
30
|
+
|
31
|
+
return /*#__PURE__*/React.createElement(Slot, {
|
32
|
+
name: "Input"
|
33
|
+
}, ({
|
34
|
+
disabled,
|
35
|
+
id,
|
36
|
+
required,
|
37
|
+
captionId
|
38
|
+
}) => /*#__PURE__*/React.createElement(Checkbox, _extends({
|
39
|
+
"aria-describedby": captionId,
|
40
|
+
id: id,
|
41
|
+
required: required,
|
42
|
+
disabled: disabled
|
43
|
+
}, rest)));
|
44
|
+
};
|
45
|
+
|
46
|
+
Input.displayName = "Input";
|
47
|
+
|
48
|
+
const CheckboxInputField = props => /*#__PURE__*/React.createElement(ToggleInputField, props);
|
49
|
+
|
50
|
+
CheckboxInputField.displayName = "CheckboxInputField";
|
51
|
+
export default Object.assign(CheckboxInputField, {
|
52
|
+
Input,
|
53
|
+
Caption: InputField.Caption,
|
54
|
+
Label: InputField.Label,
|
55
|
+
LeadingVisual: ToggleInputLeadingVisual
|
56
|
+
});
|
@@ -0,0 +1,8 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
declare const _default: React.FC<import("./_InputField/ToggleInputField").Props> & {
|
3
|
+
Input: React.FC<React.HTMLProps<HTMLInputElement>>;
|
4
|
+
Caption: React.FC<{}>;
|
5
|
+
Label: React.FC<import("./_InputField/InputFieldLabel").Props>;
|
6
|
+
LeadingVisual: React.FC<{}>;
|
7
|
+
};
|
8
|
+
export default _default;
|