@primer/components 0.0.0-2021116181214 → 0.0.0-2021116201150

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 (143) 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/Item.js +6 -4
  6. package/lib/ActionList2/List.js +2 -2
  7. package/lib/ActionList2/{ActionListContainerContext.d.ts → MenuContext.d.ts} +3 -3
  8. package/lib/ActionList2/{ActionListContainerContext.js → MenuContext.js} +3 -3
  9. package/lib/ActionList2/Selection.js +4 -4
  10. package/lib/ActionMenu2.d.ts +9 -13
  11. package/lib/ActionMenu2.js +29 -63
  12. package/lib/Autocomplete/AutocompleteMenu.js +13 -6
  13. package/lib/Checkbox.d.ts +1 -1
  14. package/lib/hooks/index.d.ts +0 -1
  15. package/lib/hooks/index.js +1 -9
  16. package/lib/index.d.ts +0 -6
  17. package/lib/index.js +0 -46
  18. package/lib-esm/ActionList2/Item.js +6 -4
  19. package/lib-esm/ActionList2/List.js +2 -2
  20. package/lib-esm/ActionList2/{ActionListContainerContext.d.ts → MenuContext.d.ts} +3 -3
  21. package/lib-esm/ActionList2/{ActionListContainerContext.js → MenuContext.js} +1 -1
  22. package/lib-esm/ActionList2/Selection.js +4 -4
  23. package/lib-esm/ActionMenu2.d.ts +9 -13
  24. package/lib-esm/ActionMenu2.js +27 -60
  25. package/lib-esm/Autocomplete/AutocompleteMenu.js +13 -3
  26. package/lib-esm/Checkbox.d.ts +1 -1
  27. package/lib-esm/hooks/index.d.ts +0 -1
  28. package/lib-esm/hooks/index.js +1 -2
  29. package/lib-esm/index.d.ts +0 -6
  30. package/lib-esm/index.js +0 -5
  31. package/package.json +2 -2
  32. package/lib/CheckboxInputField.d.ts +0 -11
  33. package/lib/CheckboxInputField.js +0 -73
  34. package/lib/ChoiceFieldset/ChoiceFieldCaption.d.ts +0 -3
  35. package/lib/ChoiceFieldset/ChoiceFieldCaption.js +0 -35
  36. package/lib/ChoiceFieldset/ChoiceFieldLabel.d.ts +0 -3
  37. package/lib/ChoiceFieldset/ChoiceFieldLabel.js +0 -35
  38. package/lib/ChoiceFieldset/ChoiceFieldset.d.ts +0 -65
  39. package/lib/ChoiceFieldset/ChoiceFieldset.js +0 -95
  40. package/lib/ChoiceFieldset/ChoiceFieldsetDescription.d.ts +0 -3
  41. package/lib/ChoiceFieldset/ChoiceFieldsetDescription.js +0 -29
  42. package/lib/ChoiceFieldset/ChoiceFieldsetLegend.d.ts +0 -9
  43. package/lib/ChoiceFieldset/ChoiceFieldsetLegend.js +0 -44
  44. package/lib/ChoiceFieldset/ChoiceFieldsetList.d.ts +0 -9
  45. package/lib/ChoiceFieldset/ChoiceFieldsetList.js +0 -69
  46. package/lib/ChoiceFieldset/ChoiceFieldsetListContext.d.ts +0 -19
  47. package/lib/ChoiceFieldset/ChoiceFieldsetListContext.js +0 -15
  48. package/lib/ChoiceFieldset/ChoiceFieldsetListItem.d.ts +0 -25
  49. package/lib/ChoiceFieldset/ChoiceFieldsetListItem.js +0 -75
  50. package/lib/ChoiceFieldset/ChoiceFieldsetValidation.d.ts +0 -6
  51. package/lib/ChoiceFieldset/ChoiceFieldsetValidation.js +0 -17
  52. package/lib/ChoiceFieldset/index.d.ts +0 -3
  53. package/lib/ChoiceFieldset/index.js +0 -23
  54. package/lib/Radio.d.ts +0 -38
  55. package/lib/Radio.js +0 -55
  56. package/lib/RadioInputField.d.ts +0 -10
  57. package/lib/RadioInputField.js +0 -74
  58. package/lib/TextInputField.d.ts +0 -583
  59. package/lib/TextInputField.js +0 -66
  60. package/lib/_InputCaption.d.ts +0 -13
  61. package/lib/_InputCaption.js +0 -27
  62. package/lib/_InputField/InputField.d.ts +0 -39
  63. package/lib/_InputField/InputField.js +0 -90
  64. package/lib/_InputField/InputFieldCaption.d.ts +0 -3
  65. package/lib/_InputField/InputFieldCaption.js +0 -30
  66. package/lib/_InputField/InputFieldLabel.d.ts +0 -9
  67. package/lib/_InputField/InputFieldLabel.js +0 -34
  68. package/lib/_InputField/InputFieldValidation.d.ts +0 -6
  69. package/lib/_InputField/InputFieldValidation.js +0 -17
  70. package/lib/_InputField/ToggleInputField.d.ts +0 -13
  71. package/lib/_InputField/ToggleInputField.js +0 -71
  72. package/lib/_InputField/ToggleInputLeadingVisual.d.ts +0 -3
  73. package/lib/_InputField/ToggleInputLeadingVisual.js +0 -22
  74. package/lib/_InputField/ValidationAnimationContainer.d.ts +0 -6
  75. package/lib/_InputField/ValidationAnimationContainer.js +0 -48
  76. package/lib/_InputField/index.d.ts +0 -1
  77. package/lib/_InputField/index.js +0 -15
  78. package/lib/_InputField/slots.d.ts +0 -13
  79. package/lib/_InputField/slots.js +0 -17
  80. package/lib/_InputLabel.d.ts +0 -8
  81. package/lib/_InputLabel.js +0 -44
  82. package/lib/_InputValidation.d.ts +0 -8
  83. package/lib/_InputValidation.js +0 -56
  84. package/lib/_VisuallyHidden.d.ts +0 -6
  85. package/lib/_VisuallyHidden.js +0 -39
  86. package/lib/utils/types/FormValidationStatus.d.ts +0 -1
  87. package/lib/utils/types/FormValidationStatus.js +0 -1
  88. package/lib-esm/CheckboxInputField.d.ts +0 -11
  89. package/lib-esm/CheckboxInputField.js +0 -56
  90. package/lib-esm/ChoiceFieldset/ChoiceFieldCaption.d.ts +0 -3
  91. package/lib-esm/ChoiceFieldset/ChoiceFieldCaption.js +0 -20
  92. package/lib-esm/ChoiceFieldset/ChoiceFieldLabel.d.ts +0 -3
  93. package/lib-esm/ChoiceFieldset/ChoiceFieldLabel.js +0 -20
  94. package/lib-esm/ChoiceFieldset/ChoiceFieldset.d.ts +0 -65
  95. package/lib-esm/ChoiceFieldset/ChoiceFieldset.js +0 -72
  96. package/lib-esm/ChoiceFieldset/ChoiceFieldsetDescription.d.ts +0 -3
  97. package/lib-esm/ChoiceFieldset/ChoiceFieldsetDescription.js +0 -17
  98. package/lib-esm/ChoiceFieldset/ChoiceFieldsetLegend.d.ts +0 -9
  99. package/lib-esm/ChoiceFieldset/ChoiceFieldsetLegend.js +0 -31
  100. package/lib-esm/ChoiceFieldset/ChoiceFieldsetList.d.ts +0 -9
  101. package/lib-esm/ChoiceFieldset/ChoiceFieldsetList.js +0 -52
  102. package/lib-esm/ChoiceFieldset/ChoiceFieldsetListContext.d.ts +0 -19
  103. package/lib-esm/ChoiceFieldset/ChoiceFieldsetListContext.js +0 -5
  104. package/lib-esm/ChoiceFieldset/ChoiceFieldsetListItem.d.ts +0 -25
  105. package/lib-esm/ChoiceFieldset/ChoiceFieldsetListItem.js +0 -51
  106. package/lib-esm/ChoiceFieldset/ChoiceFieldsetValidation.d.ts +0 -6
  107. package/lib-esm/ChoiceFieldset/ChoiceFieldsetValidation.js +0 -7
  108. package/lib-esm/ChoiceFieldset/index.d.ts +0 -3
  109. package/lib-esm/ChoiceFieldset/index.js +0 -2
  110. package/lib-esm/Radio.d.ts +0 -38
  111. package/lib-esm/Radio.js +0 -40
  112. package/lib-esm/RadioInputField.d.ts +0 -10
  113. package/lib-esm/RadioInputField.js +0 -56
  114. package/lib-esm/TextInputField.d.ts +0 -583
  115. package/lib-esm/TextInputField.js +0 -50
  116. package/lib-esm/_InputCaption.d.ts +0 -13
  117. package/lib-esm/_InputCaption.js +0 -16
  118. package/lib-esm/_InputField/InputField.d.ts +0 -39
  119. package/lib-esm/_InputField/InputField.js +0 -70
  120. package/lib-esm/_InputField/InputFieldCaption.d.ts +0 -3
  121. package/lib-esm/_InputField/InputFieldCaption.js +0 -18
  122. package/lib-esm/_InputField/InputFieldLabel.d.ts +0 -9
  123. package/lib-esm/_InputField/InputFieldLabel.js +0 -22
  124. package/lib-esm/_InputField/InputFieldValidation.d.ts +0 -6
  125. package/lib-esm/_InputField/InputFieldValidation.js +0 -7
  126. package/lib-esm/_InputField/ToggleInputField.d.ts +0 -13
  127. package/lib-esm/_InputField/ToggleInputField.js +0 -54
  128. package/lib-esm/_InputField/ToggleInputLeadingVisual.d.ts +0 -3
  129. package/lib-esm/_InputField/ToggleInputLeadingVisual.js +0 -11
  130. package/lib-esm/_InputField/ValidationAnimationContainer.d.ts +0 -6
  131. package/lib-esm/_InputField/ValidationAnimationContainer.js +0 -33
  132. package/lib-esm/_InputField/index.d.ts +0 -1
  133. package/lib-esm/_InputField/index.js +0 -1
  134. package/lib-esm/_InputField/slots.d.ts +0 -13
  135. package/lib-esm/_InputField/slots.js +0 -5
  136. package/lib-esm/_InputLabel.d.ts +0 -8
  137. package/lib-esm/_InputLabel.js +0 -32
  138. package/lib-esm/_InputValidation.d.ts +0 -8
  139. package/lib-esm/_InputValidation.js +0 -43
  140. package/lib-esm/_VisuallyHidden.d.ts +0 -6
  141. package/lib-esm/_VisuallyHidden.js +0 -26
  142. package/lib-esm/utils/types/FormValidationStatus.d.ts +0 -1
  143. package/lib-esm/utils/types/FormValidationStatus.js +0 -1
@@ -1,12 +1,10 @@
1
1
  import { ButtonProps } from './Button';
2
2
  import React from 'react';
3
- import { AnchoredOverlayProps } from './AnchoredOverlay';
4
3
  import { OverlayProps } from './Overlay';
5
- declare type MenuContextProps = Pick<AnchoredOverlayProps, 'anchorRef' | 'renderAnchor' | 'open' | 'onOpen' | 'onClose'>;
6
- export declare const MenuContext: React.Context<MenuContextProps>;
7
- export declare type ActionMenuProps = {
4
+ import { AnchoredOverlayWrapperAnchorProps } from './AnchoredOverlay/AnchoredOverlay';
5
+ declare type ActionMenuBaseProps = {
8
6
  /**
9
- * Recommended: `ActionMenu.Button` or `ActionMenu.Anchor` with `ActionMenu.Overlay`
7
+ * Recommended: `ActionMenu.Button` or `ActionMenu.Anchor` with ActionList`
10
8
  */
11
9
  children: React.ReactElement[] | React.ReactElement;
12
10
  /**
@@ -17,18 +15,17 @@ export declare type ActionMenuProps = {
17
15
  * If defined, will control the open/closed state of the overlay. Must be used in conjuction with `open`.
18
16
  */
19
17
  onOpenChange?: (s: boolean) => void;
20
- } & Pick<AnchoredOverlayProps, 'anchorRef'>;
18
+ /**
19
+ * Props to be spread on the internal `Overlay` component.
20
+ */
21
+ overlayProps?: Partial<OverlayProps>;
22
+ };
23
+ export declare type ActionMenuProps = ActionMenuBaseProps & AnchoredOverlayWrapperAnchorProps;
21
24
  export declare type MenuAnchorProps = {
22
25
  children: React.ReactElement;
23
26
  };
24
27
  /** this component is syntactical sugar 🍭 */
25
28
  export declare type MenuButtonProps = ButtonProps;
26
- declare type MenuOverlayProps = Partial<OverlayProps> & {
27
- /**
28
- * Recommended: `ActionList`
29
- */
30
- children: React.ReactElement[] | React.ReactElement;
31
- };
32
29
  export declare const ActionMenu: React.FC<ActionMenuProps> & {
33
30
  Button: React.ForwardRefExoticComponent<Pick<{
34
31
  color?: string | undefined;
@@ -311,7 +308,6 @@ export declare const ActionMenu: React.FC<ActionMenuProps> & {
311
308
  variant?: "small" | "medium" | "large" | undefined;
312
309
  }> & React.RefAttributes<React.RefObject<HTMLElement> | undefined>>;
313
310
  Anchor: React.ForwardRefExoticComponent<MenuAnchorProps & React.RefAttributes<React.RefObject<HTMLElement> | undefined>>;
314
- Overlay: React.FC<MenuOverlayProps>;
315
311
  Divider: React.FC<import("./sx").SxProp>;
316
312
  };
317
313
  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 { useProvidedRefOrCreate, useProvidedStateOrCreate } from './hooks';
4
+ import { useProvidedStateOrCreate } from './hooks/useProvidedStateOrCreate';
5
+ import { useProvidedRefOrCreate } from './hooks';
5
6
  import { Divider } from './ActionList2/Divider';
6
- import { ActionListContainerContext } from './ActionList2/ActionListContainerContext';
7
- export const MenuContext = /*#__PURE__*/React.createContext({
8
- renderAnchor: null,
9
- open: false
10
- });
7
+ import { MenuContext as ActionListMenuContext } from './ActionList2/MenuContext';
11
8
 
12
- const Menu = ({
9
+ const ActionMenuBase = ({
13
10
  anchorRef: externalAnchorRef,
14
11
  open,
15
12
  onOpenChange,
13
+ overlayProps,
16
14
  children
17
15
  }) => {
18
16
  const [combinedOpenState, setCombinedOpenState] = useProvidedStateOrCreate(open, onOpenChange, false);
17
+ const anchorRef = useProvidedRefOrCreate(externalAnchorRef);
19
18
  const onOpen = React.useCallback(() => setCombinedOpenState(true), [setCombinedOpenState]);
20
19
  const onClose = React.useCallback(() => setCombinedOpenState(false), [setCombinedOpenState]);
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 => {
20
+ let renderAnchor = null;
21
+ const contents = [];
22
+ React.Children.map(children, child => {
27
23
  if (child.type === MenuButton || child.type === Anchor) {
28
24
  renderAnchor = anchorProps => /*#__PURE__*/React.cloneElement(child, anchorProps);
29
-
30
- return null;
25
+ } else {
26
+ contents.push(child);
31
27
  }
32
-
33
- return child;
34
28
  });
35
- return /*#__PURE__*/React.createElement(MenuContext.Provider, {
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, {
36
37
  value: {
37
- anchorRef,
38
- renderAnchor,
39
- open: combinedOpenState,
40
- onOpen,
41
- onClose
38
+ parent: 'ActionMenu',
39
+ listRole: 'menu',
40
+ itemRole: 'menuitem',
41
+ afterSelect: onClose
42
42
  }
43
- }, contents);
43
+ }, contents));
44
44
  };
45
45
 
46
- Menu.displayName = "Menu";
46
+ ActionMenuBase.displayName = "ActionMenuBase";
47
47
  const Anchor = /*#__PURE__*/React.forwardRef(({
48
48
  children,
49
49
  ...anchorProps
@@ -59,42 +59,9 @@ const MenuButton = /*#__PURE__*/React.forwardRef((props, anchorRef) => {
59
59
  ref: anchorRef
60
60
  }, /*#__PURE__*/React.createElement(Button, props));
61
61
  });
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, {
62
+ ActionMenuBase.displayName = 'ActionMenu';
63
+ export const ActionMenu = Object.assign(ActionMenuBase, {
96
64
  Button: MenuButton,
97
65
  Anchor,
98
- Overlay,
99
66
  Divider
100
67
  });
@@ -6,7 +6,6 @@ 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';
10
9
 
11
10
  const getDefaultSortFn = isItemSelectedFn => (itemIdA, itemIdB) => isItemSelectedFn(itemIdA) === isItemSelectedFn(itemIdB) ? 0 : isItemSelectedFn(itemIdA) ? -1 : 1;
12
11
 
@@ -165,8 +164,19 @@ function AutocompleteMenu(props) {
165
164
  setSelectedItemLength(selectedItemIds.length);
166
165
  }
167
166
  }, [selectedItemIds, setSelectedItemLength]);
168
- return /*#__PURE__*/React.createElement(VisuallyHidden, {
169
- isVisible: showMenu
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
+ } : {}
170
180
  }, loading ? /*#__PURE__*/React.createElement(Box, {
171
181
  p: 3,
172
182
  display: "flex",
@@ -25,5 +25,5 @@ export declare type CheckboxProps = {
25
25
  /**
26
26
  * An accessible, native checkbox component
27
27
  */
28
- declare const Checkbox: React.ForwardRefExoticComponent<Pick<CheckboxProps, "sx" | keyof React.InputHTMLAttributes<HTMLInputElement> | "validationStatus" | "indeterminate"> & React.RefAttributes<HTMLInputElement>>;
28
+ declare const Checkbox: React.ForwardRefExoticComponent<Pick<CheckboxProps, "sx" | keyof React.InputHTMLAttributes<HTMLInputElement> | "indeterminate" | "validationStatus"> & React.RefAttributes<HTMLInputElement>>;
29
29
  export default Checkbox;
@@ -9,4 +9,3 @@ 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';
@@ -4,5 +4,4 @@ export { useOnEscapePress } from './useOnEscapePress';
4
4
  export { useOpenAndCloseFocus } from './useOpenAndCloseFocus';
5
5
  export { useAnchoredPosition } from './useAnchoredPosition';
6
6
  export { useOverlay } from './useOverlay';
7
- export { useRenderForcingRef } from './useRenderForcingRef';
8
- export { useProvidedStateOrCreate } from './useProvidedStateOrCreate';
7
+ export { useRenderForcingRef } from './useRenderForcingRef';
@@ -21,8 +21,6 @@ export { useOpenAndCloseFocus } from './hooks/useOpenAndCloseFocus';
21
21
  export { useOnEscapePress } from './hooks/useOnEscapePress';
22
22
  export { useOverlay } from './hooks/useOverlay';
23
23
  export { useConfirm } from './Dialog/ConfirmationDialog';
24
- export { default as Radio } from './Radio';
25
- export type { RadioProps } from './Radio';
26
24
  export { ActionList } from './ActionList';
27
25
  export { ActionMenu } from './ActionMenu';
28
26
  export type { ActionMenuProps } from './ActionMenu';
@@ -48,8 +46,6 @@ export { default as CircleBadge } from './CircleBadge';
48
46
  export type { CircleBadgeProps, CircleBadgeIconProps } from './CircleBadge';
49
47
  export { default as CircleOcticon } from './CircleOcticon';
50
48
  export type { CircleOcticonProps } from './CircleOcticon';
51
- export { default as CheckboxInputField } from './CheckboxInputField';
52
- export { default as ChoiceFieldset, Item } from './ChoiceFieldset';
53
49
  export { default as CounterLabel } from './CounterLabel';
54
50
  export type { CounterLabelProps } from './CounterLabel';
55
51
  export { default as Details } from './Details';
@@ -90,7 +86,6 @@ export { default as Popover } from './Popover';
90
86
  export type { PopoverProps, PopoverContentProps } from './Popover';
91
87
  export { default as ProgressBar } from './ProgressBar';
92
88
  export type { ProgressBarProps } from './ProgressBar';
93
- export { default as RadioInputField } from './RadioInputField';
94
89
  export { default as SelectMenu } from './SelectMenu';
95
90
  export type { SelectMenuProps, SelectMenuDividerProps, SelectMenuFilterProps, SelectMenuFooterProps, SelectMenuItemProps, SelectMenuListProps, SelectMenuModalProps, SelectMenuTabsProps, SelectMenuHeaderProps, SelectMenuTabProps, SelectMenuTabPanelProps, SelectMenuLoadingAnimationProps } from './SelectMenu';
96
91
  export { default as SideNav } from './SideNav';
@@ -107,7 +102,6 @@ export { default as TabNav } from './TabNav';
107
102
  export type { TabNavProps, TabNavLinkProps } from './TabNav';
108
103
  export { default as TextInput } from './TextInput';
109
104
  export type { TextInputProps } from './TextInput';
110
- export { default as TextInputField } from './TextInputField';
111
105
  export { default as TextInputWithTokens } from './TextInputWithTokens';
112
106
  export type { TextInputWithTokensProps } from './TextInputWithTokens';
113
107
  export { default as Text } from './Text';
package/lib-esm/index.js CHANGED
@@ -17,7 +17,6 @@ export { useOnEscapePress } from './hooks/useOnEscapePress';
17
17
  export { useOverlay } from './hooks/useOverlay';
18
18
  export { useConfirm } from './Dialog/ConfirmationDialog'; // Components
19
19
 
20
- export { default as Radio } from './Radio';
21
20
  export { ActionList } from './ActionList';
22
21
  export { ActionMenu } from './ActionMenu';
23
22
  export { default as Autocomplete } from './Autocomplete';
@@ -31,8 +30,6 @@ export { NewButton } from './NewButton';
31
30
  export { default as Caret } from './Caret';
32
31
  export { default as CircleBadge } from './CircleBadge';
33
32
  export { default as CircleOcticon } from './CircleOcticon';
34
- export { default as CheckboxInputField } from './CheckboxInputField';
35
- export { default as ChoiceFieldset, Item } from './ChoiceFieldset';
36
33
  export { default as CounterLabel } from './CounterLabel';
37
34
  export { default as Details } from './Details';
38
35
  export { default as Dialog } from './Dialog';
@@ -58,7 +55,6 @@ export { default as Popover } from './Popover';
58
55
  // export {default as Portal, registerPortalRoot} from './Portal'
59
56
  // export type {PortalProps} from './Portal'
60
57
  export { default as ProgressBar } from './ProgressBar';
61
- export { default as RadioInputField } from './RadioInputField';
62
58
  export { default as SelectMenu } from './SelectMenu';
63
59
  export { default as SideNav } from './SideNav';
64
60
  export { default as Spinner } from './Spinner';
@@ -67,7 +63,6 @@ export { default as StyledOcticon } from './StyledOcticon';
67
63
  export { default as SubNav } from './SubNav';
68
64
  export { default as TabNav } from './TabNav';
69
65
  export { default as TextInput } from './TextInput';
70
- export { default as TextInputField } from './TextInputField';
71
66
  export { default as TextInputWithTokens } from './TextInputWithTokens';
72
67
  export { default as Text } from './Text';
73
68
  export { default as Timeline } from './Timeline';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/components",
3
- "version": "0.0.0-2021116181214",
3
+ "version": "0.0.0-2021116201150",
4
4
  "description": "Primer react components",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib-esm/index.js",
@@ -43,7 +43,7 @@
43
43
  "author": "GitHub, Inc.",
44
44
  "license": "MIT",
45
45
  "dependencies": {
46
- "@primer/octicons-react": "16.1.1",
46
+ "@primer/octicons-react": "^16.1.0",
47
47
  "@primer/primitives": "7.1.1",
48
48
  "@radix-ui/react-polymorphic": "0.0.14",
49
49
  "@react-aria/ssr": "3.1.0",
@@ -1,11 +0,0 @@
1
- import React from 'react';
2
- import { ToggleInputFieldProps } from './_InputField/ToggleInputField';
3
- declare const _default: React.FC<ToggleInputFieldProps> & {
4
- Input: React.FC<React.HTMLProps<HTMLInputElement> & {
5
- ref?: React.Ref<HTMLInputElement> | undefined;
6
- }>;
7
- Caption: React.FC<{}>;
8
- Label: React.FC<import("./_InputField/InputFieldLabel").Props>;
9
- LeadingVisual: React.FC<{}>;
10
- };
11
- export default _default;
@@ -1,73 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
-
8
- var _react = _interopRequireDefault(require("react"));
9
-
10
- var _ = require(".");
11
-
12
- var _InputField = _interopRequireDefault(require("./_InputField/InputField"));
13
-
14
- var _slots = require("./_InputField/slots");
15
-
16
- var _ToggleInputField = _interopRequireDefault(require("./_InputField/ToggleInputField"));
17
-
18
- var _ToggleInputLeadingVisual = _interopRequireDefault(require("./_InputField/ToggleInputLeadingVisual"));
19
-
20
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21
-
22
- 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); }
23
-
24
- const Input = ({
25
- id: idProp,
26
- required: requiredProp,
27
- disabled: disabledProp,
28
- ...rest
29
- }) => {
30
- if (idProp) {
31
- // eslint-disable-next-line no-console
32
- console.warn("instead of passing the 'id' prop directly to <TextInputField.Input>, it should be passed to the parent component, <TextInputField>");
33
- }
34
-
35
- if (disabledProp) {
36
- // eslint-disable-next-line no-console
37
- console.warn("instead of passing the 'disabled' prop directly to <TextInputField.Input>, it should be passed to the parent component, <TextInputField>");
38
- }
39
-
40
- if (requiredProp) {
41
- // eslint-disable-next-line no-console
42
- console.warn("instead of passing the 'required' prop directly to <TextInputField.Input>, it should be passed to the parent component, <TextInputField>");
43
- }
44
-
45
- return /*#__PURE__*/_react.default.createElement(_slots.Slot, {
46
- name: "Input"
47
- }, ({
48
- disabled,
49
- id,
50
- required,
51
- captionId
52
- }) => /*#__PURE__*/_react.default.createElement(_.Checkbox, _extends({
53
- "aria-describedby": captionId,
54
- id: id,
55
- required: required,
56
- disabled: disabled
57
- }, rest)));
58
- };
59
-
60
- Input.displayName = "Input";
61
-
62
- const CheckboxInputField = props => /*#__PURE__*/_react.default.createElement(_ToggleInputField.default, props);
63
-
64
- CheckboxInputField.displayName = "CheckboxInputField";
65
-
66
- var _default = Object.assign(CheckboxInputField, {
67
- Input,
68
- Caption: _InputField.default.Caption,
69
- Label: _InputField.default.Label,
70
- LeadingVisual: _ToggleInputLeadingVisual.default
71
- });
72
-
73
- exports.default = _default;
@@ -1,3 +0,0 @@
1
- import React from 'react';
2
- declare const ChoiceFieldCaption: React.FC;
3
- export default ChoiceFieldCaption;
@@ -1,35 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
-
8
- var _react = _interopRequireWildcard(require("react"));
9
-
10
- var _ChoiceFieldsetListContext = _interopRequireDefault(require("./ChoiceFieldsetListContext"));
11
-
12
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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
- const ChoiceFieldCaption = ({
19
- children
20
- }) => {
21
- const choiceFieldsetListContext = (0, _react.useContext)(_ChoiceFieldsetListContext.default);
22
-
23
- if (choiceFieldsetListContext === null) {
24
- throw new Error('ChoiceFieldsetListContext returned null');
25
- }
26
-
27
- const {
28
- fieldComponent: FieldComponent
29
- } = choiceFieldsetListContext;
30
- return /*#__PURE__*/_react.default.createElement(FieldComponent.Caption, null, children);
31
- };
32
-
33
- ChoiceFieldCaption.displayName = "ChoiceFieldCaption";
34
- var _default = ChoiceFieldCaption;
35
- exports.default = _default;
@@ -1,3 +0,0 @@
1
- import React from 'react';
2
- declare const ChoiceFieldLabel: React.FC;
3
- export default ChoiceFieldLabel;
@@ -1,35 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
-
8
- var _react = _interopRequireWildcard(require("react"));
9
-
10
- var _ChoiceFieldsetListContext = _interopRequireDefault(require("./ChoiceFieldsetListContext"));
11
-
12
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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
- const ChoiceFieldLabel = ({
19
- children
20
- }) => {
21
- const choiceFieldsetListContext = (0, _react.useContext)(_ChoiceFieldsetListContext.default);
22
-
23
- if (choiceFieldsetListContext === null) {
24
- throw new Error('ChoiceFieldsetListContext returned null');
25
- }
26
-
27
- const {
28
- fieldComponent: FieldComponent
29
- } = choiceFieldsetListContext;
30
- return /*#__PURE__*/_react.default.createElement(FieldComponent.Label, null, children);
31
- };
32
-
33
- ChoiceFieldLabel.displayName = "ChoiceFieldLabel";
34
- var _default = ChoiceFieldLabel;
35
- exports.default = _default;
@@ -1,65 +0,0 @@
1
- import React, { ComponentProps } from 'react';
2
- import { FormValidationStatus } from '../utils/types/FormValidationStatus';
3
- export interface ChoiceFieldsetProps<T = Record<string, FormValidationStatus>> {
4
- children?: React.ReactNode;
5
- /**
6
- * Whether the fieldset is NOT ready for user input
7
- */
8
- disabled?: boolean;
9
- /**
10
- * The unique identifier for this fieldset. Used to associate the validation text with the fieldset
11
- * If an ID is not passed, one will be automatically generated
12
- */
13
- id?: string;
14
- /**
15
- * The unique identifier used to associate radio inputs with eachother
16
- * If a name is not passed and the fieldset renders radio inputs, a name will be automatically generated
17
- */
18
- name?: string;
19
- /**
20
- * The callback that is called when a user toggles a choice on or off
21
- */
22
- onSelect?: (selectedValues: string[]) => void;
23
- /**
24
- * Whether this field must have a value for the user to complete their task
25
- */
26
- required?: boolean;
27
- /**
28
- * The selected values
29
- */
30
- selected?: string[];
31
- /**
32
- * A map of validation statuses and their associated validation keys. When one of the validation keys is passed to the `validationResult` prop,
33
- * the associated validation message will be rendered in the correct style
34
- */
35
- validationMap?: T;
36
- /**
37
- * The key of the validation message to show
38
- */
39
- validationResult?: keyof T;
40
- }
41
- export interface ChoiceFieldsetContext extends ChoiceFieldsetProps {
42
- validationMessageId: string;
43
- }
44
- declare const Slot: React.FC<{
45
- name: "Description" | "ChoiceList" | "Legend" | "Validation";
46
- children: React.ReactNode;
47
- }>;
48
- export { Slot };
49
- declare const ChoiceFieldset: <T extends Record<string, FormValidationStatus>>({ children, disabled, id, name, onSelect, required, selected, validationMap, validationResult }: ChoiceFieldsetProps<T>) => JSX.Element;
50
- export declare type InputFieldComponentProps = ComponentProps<typeof ChoiceFieldset>;
51
- export type { ChoiceFieldsetListProps } from './ChoiceFieldsetList';
52
- export type { ChoiceFieldsetLegendProps } from './ChoiceFieldsetLegend';
53
- export type { ChoiceFieldProps } from './ChoiceFieldsetListItem';
54
- declare const _default: (<T extends Record<string, FormValidationStatus>>({ children, disabled, id, name, onSelect, required, selected, validationMap, validationResult }: ChoiceFieldsetProps<T>) => JSX.Element) & {
55
- Description: React.FC<{}>;
56
- Item: React.FC<import("./ChoiceFieldsetListItem").ChoiceFieldProps> & {
57
- Caption: React.FC<{}>;
58
- Label: React.FC<{}>;
59
- LeadingVisual: React.FC<{}>;
60
- };
61
- Legend: React.FC<import("./ChoiceFieldsetLegend").ChoiceFieldsetLegendProps>;
62
- List: React.FC<import("./ChoiceFieldsetList").ChoiceFieldsetListProps>;
63
- Validation: React.FC<import("./ChoiceFieldsetValidation").ChoiceFieldsetValidationProps>;
64
- };
65
- export default _default;
@@ -1,95 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = exports.Slot = void 0;
7
-
8
- var _react = _interopRequireDefault(require("react"));
9
-
10
- var _ = require("..");
11
-
12
- var _createSlots = _interopRequireDefault(require("../utils/create-slots"));
13
-
14
- var _uniqueId = require("../utils/uniqueId");
15
-
16
- var _ValidationAnimationContainer = _interopRequireDefault(require("../_InputField/ValidationAnimationContainer"));
17
-
18
- var _InputValidation = _interopRequireDefault(require("../_InputValidation"));
19
-
20
- var _ChoiceFieldsetListItem = _interopRequireDefault(require("./ChoiceFieldsetListItem"));
21
-
22
- var _ChoiceFieldsetDescription = _interopRequireDefault(require("./ChoiceFieldsetDescription"));
23
-
24
- var _ChoiceFieldsetLegend = _interopRequireDefault(require("./ChoiceFieldsetLegend"));
25
-
26
- var _ChoiceFieldsetList = _interopRequireDefault(require("./ChoiceFieldsetList"));
27
-
28
- var _ChoiceFieldsetValidation = _interopRequireDefault(require("./ChoiceFieldsetValidation"));
29
-
30
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
31
-
32
- const {
33
- Slots,
34
- Slot
35
- } = (0, _createSlots.default)(['Description', 'ChoiceList', 'Legend', 'Validation']);
36
- exports.Slot = Slot;
37
-
38
- const ChoiceFieldset = ({
39
- children,
40
- disabled,
41
- id,
42
- name,
43
- onSelect,
44
- required,
45
- selected,
46
- validationMap,
47
- validationResult
48
- }) => {
49
- var _React$Children$map;
50
-
51
- const fieldsetId = id || (0, _uniqueId.uniqueId)();
52
- const validationChildren = (_React$Children$map = _react.default.Children.map(children, child => /*#__PURE__*/_react.default.isValidElement(child) && child.type === _ChoiceFieldsetValidation.default ? child : null)) === null || _React$Children$map === void 0 ? void 0 : _React$Children$map.filter(Boolean);
53
- const validationChildToRender = validationChildren === null || validationChildren === void 0 ? void 0 : validationChildren.find(child => child.props.validationKey === validationResult);
54
- const validationMessageId = validationChildToRender ? `${fieldsetId}-validationMsg` : undefined;
55
- return /*#__PURE__*/_react.default.createElement(Slots, {
56
- context: {
57
- disabled,
58
- name,
59
- onSelect,
60
- required,
61
- selected,
62
- validationMessageId
63
- }
64
- }, slots => {
65
- const isLegendVisible = /*#__PURE__*/_react.default.isValidElement(slots.Legend) && slots.Legend.props.isVisible;
66
- return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_.Box, {
67
- as: "fieldset",
68
- border: "none",
69
- margin: 0,
70
- padding: 0,
71
- "aria-describedby": [validationMessageId].filter(Boolean).join(' ')
72
- }, _react.default.Children.toArray(children).filter(child => /*#__PURE__*/_react.default.isValidElement(child) && child.type !== _ChoiceFieldsetValidation.default), /*#__PURE__*/_react.default.createElement(_.Box, {
73
- mb: isLegendVisible ? 3 : undefined
74
- }, slots.Legend, slots.Description), slots.ChoiceList), validationChildToRender && /*#__PURE__*/_react.default.createElement(_.Box, {
75
- mt: 3
76
- }, validationMap && validationResult && validationMessageId && /*#__PURE__*/_react.default.createElement(_ValidationAnimationContainer.default, {
77
- show: true
78
- }, /*#__PURE__*/_react.default.createElement(_InputValidation.default, {
79
- validationStatus: validationMap[validationResult],
80
- id: validationMessageId
81
- }, validationChildToRender))));
82
- });
83
- };
84
-
85
- ChoiceFieldset.displayName = "ChoiceFieldset";
86
-
87
- var _default = Object.assign(ChoiceFieldset, {
88
- Description: _ChoiceFieldsetDescription.default,
89
- Item: _ChoiceFieldsetListItem.default,
90
- Legend: _ChoiceFieldsetLegend.default,
91
- List: _ChoiceFieldsetList.default,
92
- Validation: _ChoiceFieldsetValidation.default
93
- });
94
-
95
- exports.default = _default;
@@ -1,3 +0,0 @@
1
- import React from 'react';
2
- declare const ChoiceFieldsetDescription: React.FC;
3
- export default ChoiceFieldsetDescription;