@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.
Files changed (97) hide show
  1. package/dist/browser.esm.js +2 -2
  2. package/dist/browser.esm.js.map +1 -1
  3. package/dist/browser.umd.js +2 -2
  4. package/dist/browser.umd.js.map +1 -1
  5. package/lib/ActionList2/{MenuContext.d.ts → ActionListContainerContext.d.ts} +3 -3
  6. package/lib/ActionList2/{MenuContext.js → ActionListContainerContext.js} +3 -3
  7. package/lib/ActionList2/Item.js +4 -6
  8. package/lib/ActionList2/List.js +2 -2
  9. package/lib/ActionList2/Selection.js +4 -4
  10. package/lib/ActionMenu2.d.ts +13 -9
  11. package/lib/ActionMenu2.js +63 -29
  12. package/lib/Autocomplete/AutocompleteMenu.js +6 -13
  13. package/lib/CheckboxInputField.d.ts +10 -0
  14. package/lib/CheckboxInputField.js +73 -0
  15. package/lib/RadioInputField.d.ts +8 -0
  16. package/lib/RadioInputField.js +82 -0
  17. package/lib/TextInputField.d.ts +583 -0
  18. package/lib/TextInputField.js +66 -0
  19. package/lib/_InputCaption.d.ts +13 -0
  20. package/lib/_InputCaption.js +26 -0
  21. package/lib/_InputField/InputField.d.ts +39 -0
  22. package/lib/_InputField/InputField.js +90 -0
  23. package/lib/_InputField/InputFieldCaption.d.ts +3 -0
  24. package/lib/_InputField/InputFieldCaption.js +30 -0
  25. package/lib/_InputField/InputFieldLabel.d.ts +9 -0
  26. package/lib/_InputField/InputFieldLabel.js +34 -0
  27. package/lib/_InputField/InputFieldValidation.d.ts +6 -0
  28. package/lib/_InputField/InputFieldValidation.js +17 -0
  29. package/lib/_InputField/ToggleInputField.d.ts +13 -0
  30. package/lib/_InputField/ToggleInputField.js +71 -0
  31. package/lib/_InputField/ToggleInputLeadingVisual.d.ts +3 -0
  32. package/lib/_InputField/ToggleInputLeadingVisual.js +22 -0
  33. package/lib/_InputField/ValidationAnimationContainer.d.ts +6 -0
  34. package/lib/_InputField/ValidationAnimationContainer.js +48 -0
  35. package/lib/_InputField/index.d.ts +1 -0
  36. package/lib/_InputField/index.js +15 -0
  37. package/lib/_InputField/slots.d.ts +13 -0
  38. package/lib/_InputField/slots.js +17 -0
  39. package/lib/_InputLabel.d.ts +8 -0
  40. package/lib/_InputLabel.js +44 -0
  41. package/lib/_InputValidation.d.ts +8 -0
  42. package/lib/_InputValidation.js +56 -0
  43. package/lib/_VisuallyHidden.d.ts +6 -0
  44. package/lib/_VisuallyHidden.js +39 -0
  45. package/lib/hooks/index.d.ts +1 -0
  46. package/lib/hooks/index.js +9 -1
  47. package/lib/index.d.ts +3 -0
  48. package/lib/index.js +24 -0
  49. package/lib/utils/types/FormValidationStatus.d.ts +1 -0
  50. package/lib/utils/types/FormValidationStatus.js +1 -0
  51. package/lib-esm/ActionList2/{MenuContext.d.ts → ActionListContainerContext.d.ts} +3 -3
  52. package/lib-esm/ActionList2/{MenuContext.js → ActionListContainerContext.js} +1 -1
  53. package/lib-esm/ActionList2/Item.js +4 -6
  54. package/lib-esm/ActionList2/List.js +2 -2
  55. package/lib-esm/ActionList2/Selection.js +4 -4
  56. package/lib-esm/ActionMenu2.d.ts +13 -9
  57. package/lib-esm/ActionMenu2.js +60 -27
  58. package/lib-esm/Autocomplete/AutocompleteMenu.js +3 -13
  59. package/lib-esm/CheckboxInputField.d.ts +10 -0
  60. package/lib-esm/CheckboxInputField.js +56 -0
  61. package/lib-esm/RadioInputField.d.ts +8 -0
  62. package/lib-esm/RadioInputField.js +65 -0
  63. package/lib-esm/TextInputField.d.ts +583 -0
  64. package/lib-esm/TextInputField.js +50 -0
  65. package/lib-esm/_InputCaption.d.ts +13 -0
  66. package/lib-esm/_InputCaption.js +15 -0
  67. package/lib-esm/_InputField/InputField.d.ts +39 -0
  68. package/lib-esm/_InputField/InputField.js +70 -0
  69. package/lib-esm/_InputField/InputFieldCaption.d.ts +3 -0
  70. package/lib-esm/_InputField/InputFieldCaption.js +18 -0
  71. package/lib-esm/_InputField/InputFieldLabel.d.ts +9 -0
  72. package/lib-esm/_InputField/InputFieldLabel.js +22 -0
  73. package/lib-esm/_InputField/InputFieldValidation.d.ts +6 -0
  74. package/lib-esm/_InputField/InputFieldValidation.js +7 -0
  75. package/lib-esm/_InputField/ToggleInputField.d.ts +13 -0
  76. package/lib-esm/_InputField/ToggleInputField.js +54 -0
  77. package/lib-esm/_InputField/ToggleInputLeadingVisual.d.ts +3 -0
  78. package/lib-esm/_InputField/ToggleInputLeadingVisual.js +11 -0
  79. package/lib-esm/_InputField/ValidationAnimationContainer.d.ts +6 -0
  80. package/lib-esm/_InputField/ValidationAnimationContainer.js +33 -0
  81. package/lib-esm/_InputField/index.d.ts +1 -0
  82. package/lib-esm/_InputField/index.js +1 -0
  83. package/lib-esm/_InputField/slots.d.ts +13 -0
  84. package/lib-esm/_InputField/slots.js +5 -0
  85. package/lib-esm/_InputLabel.d.ts +8 -0
  86. package/lib-esm/_InputLabel.js +32 -0
  87. package/lib-esm/_InputValidation.d.ts +8 -0
  88. package/lib-esm/_InputValidation.js +43 -0
  89. package/lib-esm/_VisuallyHidden.d.ts +6 -0
  90. package/lib-esm/_VisuallyHidden.js +26 -0
  91. package/lib-esm/hooks/index.d.ts +1 -0
  92. package/lib-esm/hooks/index.js +2 -1
  93. package/lib-esm/index.d.ts +3 -0
  94. package/lib-esm/index.js +3 -0
  95. package/lib-esm/utils/types/FormValidationStatus.d.ts +1 -0
  96. package/lib-esm/utils/types/FormValidationStatus.js +1 -0
  97. 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,6 @@
1
+ import { SxProp } from './sx';
2
+ interface Props {
3
+ isVisible?: boolean;
4
+ }
5
+ declare const VisuallyHidden: import("styled-components").StyledComponent<"span", any, Props & SxProp, never>;
6
+ export default VisuallyHidden;
@@ -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;
@@ -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';
@@ -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
- parent?: string;
4
+ container?: string;
5
5
  listRole?: string;
6
6
  itemRole?: string;
7
- afterSelect?: () => void;
7
+ afterSelect?: Function;
8
8
  };
9
- export declare const MenuContext: React.Context<ContextProps>;
9
+ export declare const ActionListContainerContext: React.Context<ContextProps>;
10
10
  export {};
@@ -1,3 +1,3 @@
1
1
  /** This context can be used by components that compose ActionList inside a Menu */
2
2
  import React from 'react';
3
- export const MenuContext = /*#__PURE__*/React.createContext({});
3
+ export const ActionListContainerContext = /*#__PURE__*/React.createContext({});
@@ -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 { MenuContext } from './MenuContext';
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(MenuContext);
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 { MenuContext } from './MenuContext';
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(MenuContext);
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 { MenuContext } from './MenuContext';
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
- parent
18
- } = React.useContext(MenuContext);
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 (parent === 'ActionMenu') {
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
  }
@@ -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
- import { AnchoredOverlayWrapperAnchorProps } from './AnchoredOverlay/AnchoredOverlay';
5
- declare type ActionMenuBaseProps = {
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 ActionList`
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 {};
@@ -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/useProvidedStateOrCreate';
5
- import { useProvidedRefOrCreate } from './hooks';
4
+ import { useProvidedRefOrCreate, useProvidedStateOrCreate } from './hooks';
6
5
  import { Divider } from './ActionList2/Divider';
7
- import { MenuContext as ActionListMenuContext } from './ActionList2/MenuContext';
6
+ import { ActionListContainerContext } from './ActionList2/ActionListContainerContext';
7
+ export const MenuContext = /*#__PURE__*/React.createContext({
8
+ renderAnchor: null,
9
+ open: false
10
+ });
8
11
 
9
- const ActionMenuBase = ({
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
- let renderAnchor = null;
21
- const contents = [];
22
- React.Children.map(children, child => {
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
- } else {
26
- contents.push(child);
29
+
30
+ return null;
27
31
  }
32
+
33
+ return child;
28
34
  });
29
- return /*#__PURE__*/React.createElement(AnchoredOverlay, {
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
- parent: 'ActionMenu',
39
- listRole: 'menu',
40
- itemRole: 'menuitem',
41
- afterSelect: onClose
37
+ anchorRef,
38
+ renderAnchor,
39
+ open: combinedOpenState,
40
+ onOpen,
41
+ onClose
42
42
  }
43
- }, contents));
43
+ }, contents);
44
44
  };
45
45
 
46
- ActionMenuBase.displayName = "ActionMenuBase";
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
- ActionMenuBase.displayName = 'ActionMenu';
63
- export const ActionMenu = Object.assign(ActionMenuBase, {
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(Box, {
168
- sx: !showMenu ? {
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;