@primer/components 0.0.0-2021113204024 → 0.0.0-2021113205954

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 (277) hide show
  1. package/dist/browser.esm.js +2 -2227
  2. package/dist/browser.esm.js.map +1 -1
  3. package/dist/browser.umd.js +2 -2227
  4. package/dist/browser.umd.js.map +1 -1
  5. package/lib/ActionList/Header.js +1 -1
  6. package/lib/ActionList/Item.js +10 -10
  7. package/lib/ActionList/List.js +1 -1
  8. package/lib/ActionList2/Divider.d.ts +3 -2
  9. package/lib/ActionList2/Divider.js +10 -5
  10. package/lib/ActionList2/Item.js +22 -6
  11. package/lib/ActionList2/List.js +12 -2
  12. package/lib/ActionList2/MenuContext.d.ts +10 -0
  13. package/lib/{_InputField/InputFieldValidation.js → ActionList2/MenuContext.js} +4 -6
  14. package/lib/ActionList2/Selection.js +11 -0
  15. package/lib/ActionList2/index.d.ts +1 -2
  16. package/lib/ActionMenu2.d.ts +313 -0
  17. package/lib/ActionMenu2.js +91 -0
  18. package/lib/Autocomplete/Autocomplete.d.ts +2 -1
  19. package/lib/Autocomplete/AutocompleteInput.d.ts +2 -1
  20. package/lib/Autocomplete/AutocompleteMenu.js +13 -6
  21. package/lib/Avatar.d.ts +1 -2
  22. package/lib/Avatar.js +1 -1
  23. package/lib/BaseStyles.js +2 -20
  24. package/lib/BorderBox.js +1 -1
  25. package/lib/Box.js +1 -1
  26. package/lib/BranchName.d.ts +1 -2
  27. package/lib/BranchName.js +1 -1
  28. package/lib/Breadcrumbs.js +3 -3
  29. package/lib/Button/Button.d.ts +2 -2
  30. package/lib/Button/Button.js +1 -1
  31. package/lib/Button/ButtonClose.d.ts +2 -2
  32. package/lib/Button/ButtonDanger.d.ts +2 -2
  33. package/lib/Button/ButtonGroup.js +1 -1
  34. package/lib/Button/ButtonInvisible.d.ts +2 -2
  35. package/lib/Button/ButtonOutline.d.ts +2 -2
  36. package/lib/Button/ButtonPrimary.d.ts +2 -2
  37. package/lib/Checkbox.d.ts +1 -1
  38. package/lib/Checkbox.js +1 -1
  39. package/lib/CircleOcticon.d.ts +35 -35
  40. package/lib/Details.d.ts +1 -2
  41. package/lib/Details.js +2 -4
  42. package/lib/Dialog.d.ts +37 -37
  43. package/lib/Dropdown.d.ts +8 -72
  44. package/lib/DropdownMenu/DropdownButton.d.ts +6 -3
  45. package/lib/FilterList.d.ts +1 -1
  46. package/lib/FilteredActionList/FilteredActionList.js +1 -1
  47. package/lib/Flex.js +1 -1
  48. package/lib/Heading.d.ts +1 -2
  49. package/lib/Heading.js +1 -6
  50. package/lib/LabelGroup.js +1 -1
  51. package/lib/Overlay.js +1 -1
  52. package/lib/Pagination/Pagination.js +2 -2
  53. package/lib/Position.d.ts +4 -4
  54. package/lib/Position.js +1 -1
  55. package/lib/ProgressBar.d.ts +16 -11
  56. package/lib/ProgressBar.js +6 -10
  57. package/lib/SelectMenu/SelectMenu.d.ts +11 -10
  58. package/lib/SelectMenu/SelectMenu.js +1 -1
  59. package/lib/SelectMenu/SelectMenuFilter.js +1 -1
  60. package/lib/SelectMenu/SelectMenuFooter.js +1 -1
  61. package/lib/SelectMenu/SelectMenuItem.d.ts +1 -1
  62. package/lib/SelectMenu/SelectMenuItem.js +1 -1
  63. package/lib/SelectMenu/SelectMenuModal.d.ts +1 -1
  64. package/lib/SelectMenu/SelectMenuTab.js +1 -1
  65. package/lib/SelectMenu/SelectMenuTabPanel.js +1 -1
  66. package/lib/SelectMenu/SelectMenuTabs.js +1 -1
  67. package/lib/Spinner.d.ts +1 -2
  68. package/lib/Spinner.js +1 -3
  69. package/lib/StateLabel.js +1 -1
  70. package/lib/StyledOcticon.js +1 -1
  71. package/lib/SubNav.js +3 -3
  72. package/lib/TextInputWithTokens.d.ts +2 -1
  73. package/lib/ThemeProvider.d.ts +1 -0
  74. package/lib/ThemeProvider.js +17 -4
  75. package/lib/Timeline.js +4 -4
  76. package/lib/Token/AvatarToken.d.ts +1 -1
  77. package/lib/Token/AvatarToken.js +1 -1
  78. package/lib/Token/IssueLabelToken.d.ts +1 -1
  79. package/lib/Token/Token.d.ts +1 -1
  80. package/lib/Token/TokenBase.js +1 -1
  81. package/lib/Tooltip.js +1 -1
  82. package/lib/UnderlineNav.js +2 -2
  83. package/lib/drafts.d.ts +1 -0
  84. package/lib/drafts.js +13 -0
  85. package/lib/index.d.ts +0 -4
  86. package/lib/index.js +0 -38
  87. package/lib-esm/ActionList/Header.js +1 -1
  88. package/lib-esm/ActionList/Item.js +10 -10
  89. package/lib-esm/ActionList/List.js +1 -1
  90. package/lib-esm/ActionList2/Divider.d.ts +3 -2
  91. package/lib-esm/ActionList2/Divider.js +8 -5
  92. package/lib-esm/ActionList2/Item.js +20 -6
  93. package/lib-esm/ActionList2/List.js +10 -2
  94. package/lib-esm/ActionList2/MenuContext.d.ts +10 -0
  95. package/lib-esm/ActionList2/MenuContext.js +3 -0
  96. package/lib-esm/ActionList2/Selection.js +9 -0
  97. package/lib-esm/ActionList2/index.d.ts +1 -2
  98. package/lib-esm/ActionMenu2.d.ts +313 -0
  99. package/lib-esm/ActionMenu2.js +67 -0
  100. package/lib-esm/Autocomplete/Autocomplete.d.ts +2 -1
  101. package/lib-esm/Autocomplete/AutocompleteInput.d.ts +2 -1
  102. package/lib-esm/Autocomplete/AutocompleteMenu.js +13 -3
  103. package/lib-esm/Avatar.d.ts +1 -2
  104. package/lib-esm/Avatar.js +2 -2
  105. package/lib-esm/BaseStyles.js +2 -20
  106. package/lib-esm/BorderBox.js +1 -1
  107. package/lib-esm/Box.js +1 -1
  108. package/lib-esm/BranchName.d.ts +1 -2
  109. package/lib-esm/BranchName.js +2 -2
  110. package/lib-esm/Breadcrumbs.js +3 -3
  111. package/lib-esm/Button/Button.d.ts +2 -2
  112. package/lib-esm/Button/Button.js +1 -1
  113. package/lib-esm/Button/ButtonClose.d.ts +2 -2
  114. package/lib-esm/Button/ButtonDanger.d.ts +2 -2
  115. package/lib-esm/Button/ButtonGroup.js +1 -1
  116. package/lib-esm/Button/ButtonInvisible.d.ts +2 -2
  117. package/lib-esm/Button/ButtonOutline.d.ts +2 -2
  118. package/lib-esm/Button/ButtonPrimary.d.ts +2 -2
  119. package/lib-esm/Checkbox.d.ts +1 -1
  120. package/lib-esm/Checkbox.js +1 -1
  121. package/lib-esm/CircleOcticon.d.ts +35 -35
  122. package/lib-esm/Details.d.ts +1 -2
  123. package/lib-esm/Details.js +2 -3
  124. package/lib-esm/Dialog.d.ts +37 -37
  125. package/lib-esm/Dropdown.d.ts +8 -72
  126. package/lib-esm/DropdownMenu/DropdownButton.d.ts +6 -3
  127. package/lib-esm/FilterList.d.ts +1 -1
  128. package/lib-esm/FilteredActionList/FilteredActionList.js +1 -1
  129. package/lib-esm/Flex.js +1 -1
  130. package/lib-esm/Heading.d.ts +1 -2
  131. package/lib-esm/Heading.js +2 -6
  132. package/lib-esm/LabelGroup.js +1 -1
  133. package/lib-esm/Overlay.js +1 -1
  134. package/lib-esm/Pagination/Pagination.js +2 -2
  135. package/lib-esm/Position.d.ts +4 -4
  136. package/lib-esm/Position.js +1 -1
  137. package/lib-esm/ProgressBar.d.ts +16 -11
  138. package/lib-esm/ProgressBar.js +7 -11
  139. package/lib-esm/SelectMenu/SelectMenu.d.ts +11 -10
  140. package/lib-esm/SelectMenu/SelectMenu.js +1 -1
  141. package/lib-esm/SelectMenu/SelectMenuFilter.js +1 -1
  142. package/lib-esm/SelectMenu/SelectMenuFooter.js +1 -1
  143. package/lib-esm/SelectMenu/SelectMenuItem.d.ts +1 -1
  144. package/lib-esm/SelectMenu/SelectMenuItem.js +1 -1
  145. package/lib-esm/SelectMenu/SelectMenuModal.d.ts +1 -1
  146. package/lib-esm/SelectMenu/SelectMenuTab.js +1 -1
  147. package/lib-esm/SelectMenu/SelectMenuTabPanel.js +1 -1
  148. package/lib-esm/SelectMenu/SelectMenuTabs.js +1 -1
  149. package/lib-esm/Spinner.d.ts +1 -2
  150. package/lib-esm/Spinner.js +1 -2
  151. package/lib-esm/StateLabel.js +1 -1
  152. package/lib-esm/StyledOcticon.js +1 -1
  153. package/lib-esm/SubNav.js +3 -3
  154. package/lib-esm/TextInputWithTokens.d.ts +2 -1
  155. package/lib-esm/ThemeProvider.d.ts +1 -0
  156. package/lib-esm/ThemeProvider.js +17 -4
  157. package/lib-esm/Timeline.js +4 -4
  158. package/lib-esm/Token/AvatarToken.d.ts +1 -1
  159. package/lib-esm/Token/AvatarToken.js +1 -1
  160. package/lib-esm/Token/IssueLabelToken.d.ts +1 -1
  161. package/lib-esm/Token/Token.d.ts +1 -1
  162. package/lib-esm/Token/TokenBase.js +1 -1
  163. package/lib-esm/Tooltip.js +1 -1
  164. package/lib-esm/UnderlineNav.js +2 -2
  165. package/lib-esm/drafts.d.ts +1 -0
  166. package/lib-esm/drafts.js +2 -1
  167. package/lib-esm/index.d.ts +0 -4
  168. package/lib-esm/index.js +0 -4
  169. package/package.json +15 -9
  170. package/CHANGELOG.md +0 -986
  171. package/lib/CheckboxInputField.d.ts +0 -11
  172. package/lib/CheckboxInputField.js +0 -73
  173. package/lib/ChoiceFieldset/ChoiceFieldCaption.d.ts +0 -3
  174. package/lib/ChoiceFieldset/ChoiceFieldCaption.js +0 -35
  175. package/lib/ChoiceFieldset/ChoiceFieldLabel.d.ts +0 -3
  176. package/lib/ChoiceFieldset/ChoiceFieldLabel.js +0 -35
  177. package/lib/ChoiceFieldset/ChoiceFieldset.d.ts +0 -65
  178. package/lib/ChoiceFieldset/ChoiceFieldset.js +0 -95
  179. package/lib/ChoiceFieldset/ChoiceFieldsetDescription.d.ts +0 -3
  180. package/lib/ChoiceFieldset/ChoiceFieldsetDescription.js +0 -29
  181. package/lib/ChoiceFieldset/ChoiceFieldsetLegend.d.ts +0 -9
  182. package/lib/ChoiceFieldset/ChoiceFieldsetLegend.js +0 -44
  183. package/lib/ChoiceFieldset/ChoiceFieldsetList.d.ts +0 -9
  184. package/lib/ChoiceFieldset/ChoiceFieldsetList.js +0 -80
  185. package/lib/ChoiceFieldset/ChoiceFieldsetListContext.d.ts +0 -19
  186. package/lib/ChoiceFieldset/ChoiceFieldsetListContext.js +0 -15
  187. package/lib/ChoiceFieldset/ChoiceFieldsetListItem.d.ts +0 -25
  188. package/lib/ChoiceFieldset/ChoiceFieldsetListItem.js +0 -75
  189. package/lib/ChoiceFieldset/ChoiceFieldsetValidation.d.ts +0 -6
  190. package/lib/ChoiceFieldset/ChoiceFieldsetValidation.js +0 -17
  191. package/lib/ChoiceFieldset/index.d.ts +0 -3
  192. package/lib/ChoiceFieldset/index.js +0 -23
  193. package/lib/RadioInputField.d.ts +0 -9
  194. package/lib/RadioInputField.js +0 -82
  195. package/lib/TextInputField.d.ts +0 -581
  196. package/lib/TextInputField.js +0 -66
  197. package/lib/_InputCaption.d.ts +0 -13
  198. package/lib/_InputCaption.js +0 -27
  199. package/lib/_InputField/InputField.d.ts +0 -39
  200. package/lib/_InputField/InputField.js +0 -90
  201. package/lib/_InputField/InputFieldCaption.d.ts +0 -3
  202. package/lib/_InputField/InputFieldCaption.js +0 -30
  203. package/lib/_InputField/InputFieldLabel.d.ts +0 -9
  204. package/lib/_InputField/InputFieldLabel.js +0 -34
  205. package/lib/_InputField/InputFieldValidation.d.ts +0 -6
  206. package/lib/_InputField/ToggleInputField.d.ts +0 -13
  207. package/lib/_InputField/ToggleInputField.js +0 -71
  208. package/lib/_InputField/ToggleInputLeadingVisual.d.ts +0 -3
  209. package/lib/_InputField/ToggleInputLeadingVisual.js +0 -22
  210. package/lib/_InputField/ValidationAnimationContainer.d.ts +0 -6
  211. package/lib/_InputField/ValidationAnimationContainer.js +0 -48
  212. package/lib/_InputField/index.d.ts +0 -1
  213. package/lib/_InputField/index.js +0 -15
  214. package/lib/_InputField/slots.d.ts +0 -13
  215. package/lib/_InputField/slots.js +0 -17
  216. package/lib/_InputLabel.d.ts +0 -8
  217. package/lib/_InputLabel.js +0 -44
  218. package/lib/_InputValidation.d.ts +0 -8
  219. package/lib/_InputValidation.js +0 -56
  220. package/lib/_VisuallyHidden.d.ts +0 -6
  221. package/lib/_VisuallyHidden.js +0 -39
  222. package/lib/utils/types/FormValidationStatus.d.ts +0 -1
  223. package/lib/utils/types/FormValidationStatus.js +0 -1
  224. package/lib-esm/CheckboxInputField.d.ts +0 -11
  225. package/lib-esm/CheckboxInputField.js +0 -56
  226. package/lib-esm/ChoiceFieldset/ChoiceFieldCaption.d.ts +0 -3
  227. package/lib-esm/ChoiceFieldset/ChoiceFieldCaption.js +0 -20
  228. package/lib-esm/ChoiceFieldset/ChoiceFieldLabel.d.ts +0 -3
  229. package/lib-esm/ChoiceFieldset/ChoiceFieldLabel.js +0 -20
  230. package/lib-esm/ChoiceFieldset/ChoiceFieldset.d.ts +0 -65
  231. package/lib-esm/ChoiceFieldset/ChoiceFieldset.js +0 -72
  232. package/lib-esm/ChoiceFieldset/ChoiceFieldsetDescription.d.ts +0 -3
  233. package/lib-esm/ChoiceFieldset/ChoiceFieldsetDescription.js +0 -17
  234. package/lib-esm/ChoiceFieldset/ChoiceFieldsetLegend.d.ts +0 -9
  235. package/lib-esm/ChoiceFieldset/ChoiceFieldsetLegend.js +0 -31
  236. package/lib-esm/ChoiceFieldset/ChoiceFieldsetList.d.ts +0 -9
  237. package/lib-esm/ChoiceFieldset/ChoiceFieldsetList.js +0 -63
  238. package/lib-esm/ChoiceFieldset/ChoiceFieldsetListContext.d.ts +0 -19
  239. package/lib-esm/ChoiceFieldset/ChoiceFieldsetListContext.js +0 -5
  240. package/lib-esm/ChoiceFieldset/ChoiceFieldsetListItem.d.ts +0 -25
  241. package/lib-esm/ChoiceFieldset/ChoiceFieldsetListItem.js +0 -51
  242. package/lib-esm/ChoiceFieldset/ChoiceFieldsetValidation.d.ts +0 -6
  243. package/lib-esm/ChoiceFieldset/ChoiceFieldsetValidation.js +0 -7
  244. package/lib-esm/ChoiceFieldset/index.d.ts +0 -3
  245. package/lib-esm/ChoiceFieldset/index.js +0 -2
  246. package/lib-esm/RadioInputField.d.ts +0 -9
  247. package/lib-esm/RadioInputField.js +0 -65
  248. package/lib-esm/TextInputField.d.ts +0 -581
  249. package/lib-esm/TextInputField.js +0 -50
  250. package/lib-esm/_InputCaption.d.ts +0 -13
  251. package/lib-esm/_InputCaption.js +0 -16
  252. package/lib-esm/_InputField/InputField.d.ts +0 -39
  253. package/lib-esm/_InputField/InputField.js +0 -70
  254. package/lib-esm/_InputField/InputFieldCaption.d.ts +0 -3
  255. package/lib-esm/_InputField/InputFieldCaption.js +0 -18
  256. package/lib-esm/_InputField/InputFieldLabel.d.ts +0 -9
  257. package/lib-esm/_InputField/InputFieldLabel.js +0 -22
  258. package/lib-esm/_InputField/InputFieldValidation.d.ts +0 -6
  259. package/lib-esm/_InputField/InputFieldValidation.js +0 -7
  260. package/lib-esm/_InputField/ToggleInputField.d.ts +0 -13
  261. package/lib-esm/_InputField/ToggleInputField.js +0 -54
  262. package/lib-esm/_InputField/ToggleInputLeadingVisual.d.ts +0 -3
  263. package/lib-esm/_InputField/ToggleInputLeadingVisual.js +0 -11
  264. package/lib-esm/_InputField/ValidationAnimationContainer.d.ts +0 -6
  265. package/lib-esm/_InputField/ValidationAnimationContainer.js +0 -33
  266. package/lib-esm/_InputField/index.d.ts +0 -1
  267. package/lib-esm/_InputField/index.js +0 -1
  268. package/lib-esm/_InputField/slots.d.ts +0 -13
  269. package/lib-esm/_InputField/slots.js +0 -5
  270. package/lib-esm/_InputLabel.d.ts +0 -8
  271. package/lib-esm/_InputLabel.js +0 -32
  272. package/lib-esm/_InputValidation.d.ts +0 -8
  273. package/lib-esm/_InputValidation.js +0 -43
  274. package/lib-esm/_VisuallyHidden.d.ts +0 -6
  275. package/lib-esm/_VisuallyHidden.js +0 -26
  276. package/lib-esm/utils/types/FormValidationStatus.d.ts +0 -1
  277. package/lib-esm/utils/types/FormValidationStatus.js +0 -1
@@ -1,6 +0,0 @@
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;
@@ -1,39 +0,0 @@
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;
@@ -1 +0,0 @@
1
- export declare type FormValidationStatus = 'error' | 'success';
@@ -1 +0,0 @@
1
- "use strict";
@@ -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,56 +0,0 @@
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
- });
@@ -1,3 +0,0 @@
1
- import React from 'react';
2
- declare const ChoiceFieldCaption: React.FC;
3
- export default ChoiceFieldCaption;
@@ -1,20 +0,0 @@
1
- import React, { useContext } from 'react';
2
- import ChoiceFieldsetListContext from './ChoiceFieldsetListContext';
3
-
4
- const ChoiceFieldCaption = ({
5
- children
6
- }) => {
7
- const choiceFieldsetListContext = useContext(ChoiceFieldsetListContext);
8
-
9
- if (choiceFieldsetListContext === null) {
10
- throw new Error('ChoiceFieldsetListContext returned null');
11
- }
12
-
13
- const {
14
- fieldComponent: FieldComponent
15
- } = choiceFieldsetListContext;
16
- return /*#__PURE__*/React.createElement(FieldComponent.Caption, null, children);
17
- };
18
-
19
- ChoiceFieldCaption.displayName = "ChoiceFieldCaption";
20
- export default ChoiceFieldCaption;
@@ -1,3 +0,0 @@
1
- import React from 'react';
2
- declare const ChoiceFieldLabel: React.FC;
3
- export default ChoiceFieldLabel;
@@ -1,20 +0,0 @@
1
- import React, { useContext } from 'react';
2
- import ChoiceFieldsetListContext from './ChoiceFieldsetListContext';
3
-
4
- const ChoiceFieldLabel = ({
5
- children
6
- }) => {
7
- const choiceFieldsetListContext = useContext(ChoiceFieldsetListContext);
8
-
9
- if (choiceFieldsetListContext === null) {
10
- throw new Error('ChoiceFieldsetListContext returned null');
11
- }
12
-
13
- const {
14
- fieldComponent: FieldComponent
15
- } = choiceFieldsetListContext;
16
- return /*#__PURE__*/React.createElement(FieldComponent.Label, null, children);
17
- };
18
-
19
- ChoiceFieldLabel.displayName = "ChoiceFieldLabel";
20
- export default ChoiceFieldLabel;
@@ -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,72 +0,0 @@
1
- import React from 'react';
2
- import { Box } from '..';
3
- import createSlots from '../utils/create-slots';
4
- import { uniqueId } from '../utils/uniqueId';
5
- import ValidationAnimationContainer from '../_InputField/ValidationAnimationContainer';
6
- import InputValidation from '../_InputValidation';
7
- import ChoiceFieldsetListItem from './ChoiceFieldsetListItem';
8
- import ChoiceFieldsetDescription from './ChoiceFieldsetDescription';
9
- import ChoiceFieldsetLegend from './ChoiceFieldsetLegend';
10
- import ChoiceFieldsetList from './ChoiceFieldsetList';
11
- import ChoiceFieldsetValidation from './ChoiceFieldsetValidation';
12
- const {
13
- Slots,
14
- Slot
15
- } = createSlots(['Description', 'ChoiceList', 'Legend', 'Validation']);
16
- export { Slot };
17
-
18
- const ChoiceFieldset = ({
19
- children,
20
- disabled,
21
- id,
22
- name,
23
- onSelect,
24
- required,
25
- selected,
26
- validationMap,
27
- validationResult
28
- }) => {
29
- var _React$Children$map;
30
-
31
- const fieldsetId = id || uniqueId();
32
- const validationChildren = (_React$Children$map = React.Children.map(children, child => /*#__PURE__*/React.isValidElement(child) && child.type === ChoiceFieldsetValidation ? child : null)) === null || _React$Children$map === void 0 ? void 0 : _React$Children$map.filter(Boolean);
33
- const validationChildToRender = validationChildren === null || validationChildren === void 0 ? void 0 : validationChildren.find(child => child.props.validationKey === validationResult);
34
- const validationMessageId = validationChildToRender ? `${fieldsetId}-validationMsg` : undefined;
35
- return /*#__PURE__*/React.createElement(Slots, {
36
- context: {
37
- disabled,
38
- name,
39
- onSelect,
40
- required,
41
- selected,
42
- validationMessageId
43
- }
44
- }, slots => {
45
- const isLegendVisible = /*#__PURE__*/React.isValidElement(slots.Legend) && slots.Legend.props.isVisible;
46
- return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Box, {
47
- as: "fieldset",
48
- border: "none",
49
- margin: 0,
50
- padding: 0,
51
- "aria-describedby": [validationMessageId].filter(Boolean).join(' ')
52
- }, React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child) && child.type !== ChoiceFieldsetValidation), /*#__PURE__*/React.createElement(Box, {
53
- mb: isLegendVisible ? 3 : undefined
54
- }, slots.Legend, slots.Description), slots.ChoiceList), validationChildToRender && /*#__PURE__*/React.createElement(Box, {
55
- mt: 3
56
- }, validationMap && validationResult && validationMessageId && /*#__PURE__*/React.createElement(ValidationAnimationContainer, {
57
- show: true
58
- }, /*#__PURE__*/React.createElement(InputValidation, {
59
- validationStatus: validationMap[validationResult],
60
- id: validationMessageId
61
- }, validationChildToRender))));
62
- });
63
- };
64
-
65
- ChoiceFieldset.displayName = "ChoiceFieldset";
66
- export default Object.assign(ChoiceFieldset, {
67
- Description: ChoiceFieldsetDescription,
68
- Item: ChoiceFieldsetListItem,
69
- Legend: ChoiceFieldsetLegend,
70
- List: ChoiceFieldsetList,
71
- Validation: ChoiceFieldsetValidation
72
- });
@@ -1,3 +0,0 @@
1
- import React from 'react';
2
- declare const ChoiceFieldsetDescription: React.FC;
3
- export default ChoiceFieldsetDescription;
@@ -1,17 +0,0 @@
1
- import React from 'react';
2
- import { Text } from '..';
3
- import { Slot } from './ChoiceFieldset';
4
-
5
- const ChoiceFieldsetDescription = ({
6
- children
7
- }) => /*#__PURE__*/React.createElement(Slot, {
8
- name: "Description"
9
- }, ({
10
- disabled
11
- }) => /*#__PURE__*/React.createElement(Text, {
12
- color: disabled ? 'fg.muted' : 'fg.default',
13
- fontSize: 1
14
- }, children));
15
-
16
- ChoiceFieldsetDescription.displayName = "ChoiceFieldsetDescription";
17
- export default ChoiceFieldsetDescription;
@@ -1,9 +0,0 @@
1
- import React from 'react';
2
- export interface ChoiceFieldsetLegendProps {
3
- /**
4
- * Whether to visually hide the fieldset legend
5
- */
6
- visuallyHidden?: boolean;
7
- }
8
- declare const ChoiceFieldsetLegend: React.FC<ChoiceFieldsetLegendProps>;
9
- export default ChoiceFieldsetLegend;
@@ -1,31 +0,0 @@
1
- import React from 'react';
2
- import { Box } from '..';
3
- import VisuallyHidden from '../_VisuallyHidden';
4
- import { Slot } from './ChoiceFieldset';
5
-
6
- const ChoiceFieldsetLegend = ({
7
- children,
8
- visuallyHidden
9
- }) => /*#__PURE__*/React.createElement(Slot, {
10
- name: "Legend"
11
- }, ({
12
- required,
13
- disabled
14
- }) => /*#__PURE__*/React.createElement(VisuallyHidden, {
15
- as: "legend",
16
- isVisible: !visuallyHidden,
17
- title: required ? 'required field' : undefined,
18
- sx: {
19
- color: disabled ? 'fg.muted' : undefined,
20
- fontSize: 2,
21
- padding: 0
22
- }
23
- }, required ? /*#__PURE__*/React.createElement(Box, {
24
- display: "flex",
25
- as: "span"
26
- }, /*#__PURE__*/React.createElement(Box, {
27
- mr: 1
28
- }, children), /*#__PURE__*/React.createElement("span", null, "*")) : children));
29
-
30
- ChoiceFieldsetLegend.displayName = "ChoiceFieldsetLegend";
31
- export default ChoiceFieldsetLegend;
@@ -1,9 +0,0 @@
1
- import React from 'react';
2
- export interface ChoiceFieldsetListProps {
3
- /**
4
- * Whether multiple items or a single item can be selected
5
- */
6
- selectionVariant?: 'single' | 'multiple';
7
- }
8
- declare const ChoiceFieldsetList: React.FC<ChoiceFieldsetListProps>;
9
- export default ChoiceFieldsetList;
@@ -1,63 +0,0 @@
1
- import React from 'react';
2
- import styled from 'styled-components';
3
- import { CheckboxInputField, RadioInputField } from '..';
4
- import { get } from '../constants';
5
- import { uniqueId } from '../utils/uniqueId';
6
- import { Slot } from './ChoiceFieldset';
7
- import ChoiceFieldsetListContext from './ChoiceFieldsetListContext';
8
- const List = styled.ul.withConfig({
9
- displayName: "ChoiceFieldsetList__List",
10
- componentId: "sc-16da7ba-0"
11
- })(["display:flex;flex-direction:column;list-style:none;margin:0;padding:0;> li + li{margin-top:", ";}"], get('space.2'));
12
-
13
- const ChoiceFieldsetList = ({
14
- selectionVariant,
15
- children
16
- }) => {
17
- // generates a name to pass to radio inputs if one was not passed in ChoiceFieldset props
18
- const getRadioGroupName = nameFromContext => {
19
- if (nameFromContext || selectionVariant === 'multiple') {
20
- return nameFromContext;
21
- }
22
-
23
- return uniqueId();
24
- };
25
-
26
- return /*#__PURE__*/React.createElement(Slot, {
27
- name: "ChoiceList"
28
- }, ({
29
- name,
30
- onSelect,
31
- disabled,
32
- selected = []
33
- }) => {
34
- const getSelectedCheckboxes = (value, checked) => {
35
- if (checked) {
36
- return selectionVariant === 'multiple' ? [...selected, value] : [value];
37
- }
38
-
39
- return selected.filter(selectedValue => selectedValue !== value);
40
- };
41
-
42
- return /*#__PURE__*/React.createElement(ChoiceFieldsetListContext.Provider, {
43
- value: {
44
- disabled,
45
- selected,
46
- name: getRadioGroupName(name),
47
- fieldComponent: selectionVariant === 'multiple' ? CheckboxInputField : RadioInputField,
48
- onChange: e => {
49
- onSelect && onSelect(getSelectedCheckboxes(e.currentTarget.value, e.currentTarget.checked));
50
- },
51
- selectionVariant
52
- }
53
- }, /*#__PURE__*/React.createElement(List, null, React.Children.map(children, (child, i) => /*#__PURE__*/React.createElement("li", {
54
- key: i
55
- }, child))));
56
- });
57
- };
58
-
59
- ChoiceFieldsetList.displayName = "ChoiceFieldsetList";
60
- ChoiceFieldsetList.defaultProps = {
61
- selectionVariant: 'single'
62
- };
63
- export default ChoiceFieldsetList;
@@ -1,19 +0,0 @@
1
- import { ChangeEventHandler } from 'react';
2
- import { CheckboxInputField, RadioInputField } from '..';
3
- import { ComponentProps } from '../utils/types';
4
- import InputField from '../_InputField';
5
- import ToggleInputField, { ToggleInputFieldProps } from '../_InputField/ToggleInputField';
6
- declare const ChoiceFieldsetListContext: import("react").Context<{
7
- disabled?: boolean | undefined;
8
- name?: string | undefined;
9
- onChange: ChangeEventHandler<HTMLInputElement>;
10
- fieldComponent: React.FC<ToggleInputFieldProps> & {
11
- Input: React.FC<ComponentProps<typeof RadioInputField.Input>> | React.FC<ComponentProps<typeof CheckboxInputField.Input>>;
12
- Caption: React.FC<ComponentProps<typeof InputField.Caption>>;
13
- Label: React.FC<ComponentProps<typeof InputField.Label>>;
14
- LeadingVisual: React.FC<ComponentProps<typeof ToggleInputField.LeadingVisual>>;
15
- };
16
- selected?: string[] | undefined;
17
- selectionVariant?: "single" | "multiple" | undefined;
18
- } | null>;
19
- export default ChoiceFieldsetListContext;
@@ -1,5 +0,0 @@
1
- import { createContext } from 'react';
2
- import { CheckboxInputField } from '..';
3
- const ChoiceFieldsetListContext = /*#__PURE__*/createContext(null);
4
- CheckboxInputField.Input;
5
- export default ChoiceFieldsetListContext;
@@ -1,25 +0,0 @@
1
- import React from 'react';
2
- import { ComponentProps } from '../utils/types';
3
- export interface ChoiceFieldProps {
4
- /**
5
- * Whether the field is ready for user input
6
- */
7
- disabled?: boolean;
8
- /**
9
- * The unique identifier for this field. Used to associate the label, validation text, and caption text.
10
- * If an ID is not provided, one will be automatically generated.
11
- */
12
- id?: string;
13
- /**
14
- * The value that is being selected
15
- */
16
- value: string;
17
- }
18
- declare const ChoiceFieldsetListItem: React.FC<ChoiceFieldProps>;
19
- export declare type ChoiceFieldComponentProps = ComponentProps<typeof ChoiceFieldsetListItem>;
20
- declare const _default: React.FC<ChoiceFieldProps> & {
21
- Caption: React.FC<{}>;
22
- Label: React.FC<{}>;
23
- LeadingVisual: React.FC<{}>;
24
- };
25
- export default _default;
@@ -1,51 +0,0 @@
1
- import React, { useContext } from 'react';
2
- import { uniqueId } from '../utils/uniqueId';
3
- import ToggleInputLeadingVisual from '../_InputField/ToggleInputLeadingVisual';
4
- import ChoiceFieldCaption from './ChoiceFieldCaption';
5
- import ChoiceFieldLabel from './ChoiceFieldLabel';
6
- import ChoiceFieldsetListContext from './ChoiceFieldsetListContext';
7
-
8
- const ChoiceFieldsetListItem = ({
9
- children,
10
- id,
11
- disabled: disabledProp,
12
- value
13
- }) => {
14
- const choiceFieldsetListContext = useContext(ChoiceFieldsetListContext);
15
-
16
- if (choiceFieldsetListContext === null) {
17
- throw new Error('ChoiceFieldsetListContext returned null');
18
- }
19
-
20
- const {
21
- name,
22
- onChange,
23
- fieldComponent: FieldComponent,
24
- selected,
25
- disabled,
26
- selectionVariant
27
- } = choiceFieldsetListContext;
28
- const fieldId = id || uniqueId();
29
- const labelChild = React.Children.toArray(children).find(child => /*#__PURE__*/React.isValidElement(child) && child.type === ChoiceFieldLabel);
30
- const otherValidChildren = React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child) && (child.type === ChoiceFieldCaption || child.type === ToggleInputLeadingVisual));
31
- return /*#__PURE__*/React.createElement(FieldComponent, {
32
- id: fieldId,
33
- disabled: disabledProp || disabled
34
- }, /*#__PURE__*/React.createElement(FieldComponent.Input, {
35
- checked: selected === null || selected === void 0 ? void 0 : selected.includes(value),
36
- value: value,
37
- name: selectionVariant === 'multiple' ? value : name,
38
- onChange: onChange
39
- }), labelChild ? // if <Item.Label> was passed, we can just render the children as-is
40
- children :
41
- /*#__PURE__*/
42
- // if <Item.Label> was NOT passed, treat all the children except <Item.Caption> and <Item.LeadingVisual> as the label
43
- React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FieldComponent.Label, null, children), otherValidChildren));
44
- };
45
-
46
- ChoiceFieldsetListItem.displayName = "ChoiceFieldsetListItem";
47
- export default Object.assign(ChoiceFieldsetListItem, {
48
- Caption: ChoiceFieldCaption,
49
- Label: ChoiceFieldLabel,
50
- LeadingVisual: ToggleInputLeadingVisual
51
- });
@@ -1,6 +0,0 @@
1
- import React from 'react';
2
- export interface ChoiceFieldsetValidationProps {
3
- validationKey: string;
4
- }
5
- declare const ChoiceFieldsetValidation: React.FC<ChoiceFieldsetValidationProps>;
6
- export default ChoiceFieldsetValidation;
@@ -1,7 +0,0 @@
1
- import React from 'react';
2
-
3
- const ChoiceFieldsetValidation = ({
4
- children
5
- }) => /*#__PURE__*/React.createElement(React.Fragment, null, children);
6
-
7
- export default ChoiceFieldsetValidation;
@@ -1,3 +0,0 @@
1
- export { default } from './ChoiceFieldset';
2
- export { default as Item } from './ChoiceFieldsetListItem';
3
- export type { ChoiceFieldsetProps } from './ChoiceFieldset';
@@ -1,2 +0,0 @@
1
- export { default } from './ChoiceFieldset';
2
- export { default as Item } from './ChoiceFieldsetListItem';
@@ -1,9 +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
- Caption: React.FC<{}>;
6
- Label: React.FC<import("./_InputField/InputFieldLabel").Props>;
7
- LeadingVisual: React.FC<{}>;
8
- };
9
- export default _default;
@@ -1,65 +0,0 @@
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 InputField from './_InputField/InputField';
5
- import { Slot } from './_InputField/slots';
6
- import ToggleInputField from './_InputField/ToggleInputField';
7
- import ToggleInputLeadingVisual from './_InputField/ToggleInputLeadingVisual'; // TODO: use Primer's checkbox input once it's available
8
- // https://github.com/github/primer/issues/489
9
-
10
- const RadioInput = props => {
11
- return /*#__PURE__*/React.createElement("input", _extends({
12
- type: "radio"
13
- }, props));
14
- };
15
-
16
- RadioInput.displayName = "RadioInput";
17
-
18
- // pulling out `id`, `disabled`, and `required` because those should come from the parent TextInputField component
19
- const Input = ({
20
- id: idProp,
21
- required: requiredProp,
22
- disabled: disabledProp,
23
- ...rest
24
- }) => {
25
- if (idProp) {
26
- // eslint-disable-next-line no-console
27
- console.warn("instead of passing the 'id' prop directly to <TextInputField.Input>, it should be passed to the parent component, <TextInputField>");
28
- }
29
-
30
- if (disabledProp) {
31
- // eslint-disable-next-line no-console
32
- console.warn("instead of passing the 'disabled' prop directly to <TextInputField.Input>, it should be passed to the parent component, <TextInputField>");
33
- }
34
-
35
- if (requiredProp) {
36
- // eslint-disable-next-line no-console
37
- console.warn("instead of passing the 'required' prop directly to <TextInputField.Input>, it should be passed to the parent component, <TextInputField>");
38
- }
39
-
40
- return /*#__PURE__*/React.createElement(Slot, {
41
- name: "Input"
42
- }, ({
43
- disabled,
44
- id,
45
- required,
46
- captionId
47
- }) => /*#__PURE__*/React.createElement(RadioInput, _extends({
48
- "aria-describedby": captionId,
49
- id: id,
50
- required: required,
51
- disabled: disabled
52
- }, rest)));
53
- };
54
-
55
- Input.displayName = "Input";
56
-
57
- const RadioInputField = props => /*#__PURE__*/React.createElement(ToggleInputField, props);
58
-
59
- RadioInputField.displayName = "RadioInputField";
60
- export default Object.assign(RadioInputField, {
61
- Input,
62
- Caption: InputField.Caption,
63
- Label: InputField.Label,
64
- LeadingVisual: ToggleInputLeadingVisual
65
- });