@pingux/astro 2.9.2 → 2.13.0-alpha.11

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 (434) hide show
  1. package/README.md +6 -2
  2. package/lib/README.md +6 -2
  3. package/lib/cjs/components/AccordionGridGroup/AccordionGridGroup.mdx +40 -0
  4. package/lib/cjs/components/AccordionGridGroup/AccordionGridGroup.test.js +2 -2
  5. package/lib/cjs/components/AccordionGroup/Accordion.styles.js +1 -2
  6. package/lib/cjs/components/AccordionGroup/AccordionGroup.js +4 -5
  7. package/lib/cjs/components/AccordionGroup/AccordionGroup.mdx +41 -0
  8. package/lib/cjs/components/ArrayField/ArrayField.mdx +34 -0
  9. package/lib/cjs/components/AstroWrapper/AstroWrapper.mdx +16 -0
  10. package/lib/cjs/components/Avatar/Avatar.mdx +14 -0
  11. package/lib/cjs/components/Badge/Badge.mdx +24 -0
  12. package/lib/cjs/components/Box/Box.d.ts +4 -0
  13. package/lib/cjs/components/Box/Box.js +4 -19
  14. package/lib/cjs/components/Box/Box.mdx +23 -0
  15. package/lib/cjs/components/Box/Box.styles.d.ts +6 -0
  16. package/lib/cjs/components/Box/Box.test.d.ts +1 -0
  17. package/lib/cjs/components/Box/Box.test.js +2 -6
  18. package/lib/cjs/components/Box/index.d.ts +1 -0
  19. package/lib/cjs/components/Bracket/Bracket.mdx +17 -0
  20. package/lib/cjs/components/Breadcrumbs/Breadcrumbs.mdx +40 -0
  21. package/lib/cjs/components/Button/Button.mdx +40 -0
  22. package/lib/cjs/components/Button/Button.stories.js +30 -5
  23. package/lib/cjs/components/Button/Buttons.styles.js +25 -7
  24. package/lib/cjs/components/Calendar/Calendar.mdx +39 -0
  25. package/lib/cjs/components/Calendar/Calendar.test.js +2 -2
  26. package/lib/cjs/components/Calendar/CalendarCell.js +2 -3
  27. package/lib/cjs/components/Calendar/CalendarGrid.js +1 -3
  28. package/lib/cjs/components/Callout/Callout.mdx +28 -0
  29. package/lib/cjs/components/Card/Card.mdx +32 -0
  30. package/lib/cjs/components/Checkbox/Checkbox.js +1 -2
  31. package/lib/cjs/components/Checkbox/CheckboxBase.js +1 -2
  32. package/lib/cjs/components/CheckboxField/CheckboxField.mdx +42 -0
  33. package/lib/cjs/components/CodeView/CodeView.mdx +23 -0
  34. package/lib/cjs/components/CodeView/CodeView.test.js +1 -1
  35. package/lib/cjs/components/CollapsiblePanel/CollapsiblePanel.mdx +29 -0
  36. package/lib/cjs/components/CollapsiblePanelContainer/CollapsiblePanelBadge.js +0 -1
  37. package/lib/cjs/components/CollapsiblePanelContainer/CollapsiblePanelContainer.js +2 -3
  38. package/lib/cjs/components/ColorField/ColorField.mdx +38 -0
  39. package/lib/cjs/components/ComboBoxField/ComboBoxField.mdx +66 -0
  40. package/lib/cjs/components/ComboBoxField/ComboBoxField.stories.js +1 -1
  41. package/lib/cjs/components/ComboBoxField/ComboBoxField.test.js +2 -2
  42. package/lib/cjs/components/CopyText/CopyText.mdx +23 -0
  43. package/lib/cjs/components/CopyText/CopyText.test.js +1 -1
  44. package/lib/cjs/components/DataTable/DataTable.mdx +54 -0
  45. package/lib/cjs/components/DataTable/DataTable.stories.js +1 -1
  46. package/lib/cjs/components/DataTable/DataTable.test.js +2 -2
  47. package/lib/cjs/components/DataTable/DataTableVirtualizer.js +2 -3
  48. package/lib/cjs/components/DatePicker/DateField.js +4 -5
  49. package/lib/cjs/components/DatePicker/DatePicker.js +4 -6
  50. package/lib/cjs/components/DatePicker/DatePicker.mdx +49 -0
  51. package/lib/cjs/components/DatePicker/DatePicker.test.js +2 -2
  52. package/lib/cjs/components/DatePicker/DateSegment.js +1 -2
  53. package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js +3 -3
  54. package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.mdx +36 -0
  55. package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.stories.js +29 -45
  56. package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.test.js +1 -1
  57. package/lib/cjs/components/FieldHelperText/FieldHelperText.js +4 -4
  58. package/lib/cjs/components/FileInputField/FileInputField.mdx +33 -0
  59. package/lib/cjs/components/HelpHint/HelpHint.js +145 -27
  60. package/lib/cjs/components/HelpHint/HelpHint.mdx +32 -0
  61. package/lib/cjs/components/HelpHint/HelpHint.stories.js +40 -7
  62. package/lib/cjs/components/HelpHint/HelpHint.styles.js +9 -1
  63. package/lib/cjs/components/HelpHint/HelpHint.test.js +213 -30
  64. package/lib/cjs/components/Icon/Icon.d.ts +4 -0
  65. package/lib/cjs/components/Icon/Icon.js +4 -27
  66. package/lib/cjs/components/Icon/Icon.mdx +49 -0
  67. package/lib/cjs/components/Icon/Icon.stories.d.ts +8 -0
  68. package/lib/cjs/components/Icon/Icon.test.d.ts +1 -0
  69. package/lib/cjs/components/Icon/index.d.ts +1 -0
  70. package/lib/cjs/components/IconBadge/IconBadge.mdx +14 -0
  71. package/lib/cjs/components/IconButton/IconButton.mdx +33 -0
  72. package/lib/cjs/components/IconButtonToggle/IconButtonToggle.mdx +31 -0
  73. package/lib/cjs/components/Image/Image.mdx +28 -0
  74. package/lib/cjs/components/ImageUploadField/ImageUploadField.mdx +38 -0
  75. package/lib/cjs/components/ImageUploadField/ImageUploadField.stories.js +1 -1
  76. package/lib/cjs/components/ImageUploadField/ImageUploadField.test.js +2 -2
  77. package/lib/cjs/components/Input/Input.js +2 -3
  78. package/lib/cjs/components/Label/Label.styles.js +1 -1
  79. package/lib/cjs/components/Link/Link.mdx +27 -0
  80. package/lib/cjs/components/Link/Link.styles.js +10 -0
  81. package/lib/cjs/components/LinkSelectField/LinkSelectField.mdx +47 -0
  82. package/lib/cjs/components/LinkSelectField/LinkSelectField.stories.js +1 -1
  83. package/lib/cjs/components/LinkSelectField/LinkSelectField.test.js +2 -2
  84. package/lib/cjs/components/ListBox/ListBox.test.js +2 -2
  85. package/lib/cjs/components/ListItem/ListItem.mdx +21 -0
  86. package/lib/cjs/components/ListView/ListView.mdx +44 -0
  87. package/lib/cjs/components/ListView/ListView.stories.js +95 -49
  88. package/lib/cjs/components/ListView/ListView.test.js +2 -2
  89. package/lib/cjs/components/Loader/Loader.d.ts +4 -0
  90. package/lib/cjs/components/Loader/Loader.js +0 -14
  91. package/lib/cjs/components/Loader/Loader.mdx +29 -0
  92. package/lib/cjs/components/Loader/Loader.styles.d.ts +53 -0
  93. package/lib/cjs/components/Loader/Loader.test.d.ts +1 -0
  94. package/lib/cjs/components/Loader/index.d.ts +1 -0
  95. package/lib/cjs/components/Menu/Menu.mdx +43 -0
  96. package/lib/cjs/components/MenuItem/MenuItem.js +2 -3
  97. package/lib/cjs/components/Messages/Messages.mdx +35 -0
  98. package/lib/cjs/components/Modal/Modal.mdx +59 -0
  99. package/lib/cjs/components/Modal/tests/Modal.integration.test.js +1 -2
  100. package/lib/cjs/components/MultivaluesField/MultivaluesField.js +43 -9
  101. package/lib/cjs/components/MultivaluesField/MultivaluesField.mdx +44 -0
  102. package/lib/cjs/components/MultivaluesField/MultivaluesField.test.js +3 -3
  103. package/lib/cjs/components/NavBar/NavBar.mdx +42 -0
  104. package/lib/cjs/components/NavBarSection/NavBarSection.js +2 -3
  105. package/lib/cjs/components/NumberField/NumberField.mdx +39 -0
  106. package/lib/cjs/components/OverlayPanel/OverlayPanel.mdx +39 -0
  107. package/lib/cjs/components/PasswordField/PasswordField.mdx +33 -0
  108. package/lib/cjs/components/PasswordField/PasswordField.test.js +2 -3
  109. package/lib/cjs/components/PopoverContainer/PopoverContainer.d.ts +9 -0
  110. package/lib/cjs/components/PopoverContainer/PopoverContainer.js +10 -42
  111. package/lib/cjs/components/PopoverContainer/index.d.ts +2 -0
  112. package/lib/cjs/components/PopoverMenu/PopoverMenu.mdx +53 -0
  113. package/lib/cjs/components/Radio/Radio.js +1 -2
  114. package/lib/cjs/components/RadioGroupField/RadioGroupField.mdx +41 -0
  115. package/lib/cjs/components/RadioGroupField/RadioGroupField.test.js +2 -2
  116. package/lib/cjs/components/RequirementsList/RequirementsList.mdx +17 -0
  117. package/lib/cjs/components/RockerButtonGroup/RockerButtonGroup.mdx +36 -0
  118. package/lib/cjs/components/ScrollBox/ScrollBox.mdx +17 -0
  119. package/lib/cjs/components/SearchField/SearchField.mdx +33 -0
  120. package/lib/cjs/components/SelectField/Select.styles.js +1 -1
  121. package/lib/cjs/components/SelectField/SelectField.mdx +46 -0
  122. package/lib/cjs/components/SelectField/SelectField.stories.js +1 -1
  123. package/lib/cjs/components/SelectFieldBase/SelectFieldBase.js +4 -4
  124. package/lib/cjs/components/SelectFieldBase/SelectFieldBase.test.js +2 -2
  125. package/lib/cjs/components/Separator/Separator.mdx +19 -0
  126. package/lib/cjs/components/Stepper/Stepper.mdx +41 -0
  127. package/lib/cjs/components/Stepper/Stepper.styles.js +1 -1
  128. package/lib/cjs/components/Stepper/Stepper.test.js +2 -3
  129. package/lib/cjs/components/Switch/Switch.js +1 -2
  130. package/lib/cjs/components/SwitchField/SwitchField.js +1 -0
  131. package/lib/cjs/components/SwitchField/SwitchField.mdx +36 -0
  132. package/lib/cjs/components/Tab/Tab.js +2 -3
  133. package/lib/cjs/components/TabPicker/TabPicker.js +1 -1
  134. package/lib/cjs/components/Table/Table.mdx +30 -0
  135. package/lib/cjs/components/TableBody/TableBody.js +0 -1
  136. package/lib/cjs/components/TableCaption/TableCaption.js +0 -1
  137. package/lib/cjs/components/TableCell/TableCell.d.ts +12 -0
  138. package/lib/cjs/components/TableCell/TableCell.js +0 -6
  139. package/lib/cjs/components/TableCell/TableCell.test.d.ts +1 -0
  140. package/lib/cjs/components/TableCell/index.d.ts +1 -0
  141. package/lib/cjs/components/TableHead/TableHead.js +0 -1
  142. package/lib/cjs/components/TableRow/TableRow.js +0 -1
  143. package/lib/cjs/components/Tabs/Tabs.mdx +40 -0
  144. package/lib/cjs/components/Tabs/Tabs.test.js +3 -4
  145. package/lib/cjs/components/Text/Text.d.ts +4 -0
  146. package/lib/cjs/components/Text/Text.js +3 -7
  147. package/lib/cjs/components/Text/Text.mdx +13 -0
  148. package/lib/cjs/components/Text/Text.stories.d.ts +6 -0
  149. package/lib/cjs/components/Text/Text.styles.d.ts +286 -0
  150. package/lib/cjs/components/Text/Text.test.d.ts +1 -0
  151. package/lib/cjs/components/Text/index.d.ts +1 -0
  152. package/lib/cjs/components/TextArea/TextArea.js +1 -3
  153. package/lib/cjs/components/TextAreaField/TextAreaField.mdx +34 -0
  154. package/lib/cjs/components/TextField/TextField.js +1 -1
  155. package/lib/cjs/components/TextField/TextField.mdx +34 -0
  156. package/lib/cjs/components/TimeZonePicker/TimeZonePicker.mdx +18 -0
  157. package/lib/cjs/components/TooltipTrigger/Tooltip.styles.js +2 -1
  158. package/lib/cjs/components/TooltipTrigger/TooltipTrigger.js +2 -0
  159. package/lib/cjs/components/TooltipTrigger/TooltipTrigger.mdx +23 -0
  160. package/lib/cjs/components/TooltipTrigger/TooltipTrigger.test.js +47 -1
  161. package/lib/cjs/docs/Props.stories.mdx +35 -0
  162. package/lib/cjs/docs/Welcome.stories.mdx +149 -0
  163. package/lib/cjs/docs/hooks/useDebounce.stories.mdx +59 -0
  164. package/lib/cjs/docs/hooks/useModalState.stories.mdx +83 -0
  165. package/lib/cjs/docs/hooks/useOverlayPanelState.stories.mdx +84 -0
  166. package/lib/cjs/docs/theme/AstroNanoTheme.stories.mdx +174 -0
  167. package/lib/cjs/docs/theme/AstroTheme.stories.mdx +20 -0
  168. package/lib/cjs/docs/theme/CustomThemes.stories.mdx +70 -0
  169. package/lib/cjs/docs/theme/StylingGuideline.stories.mdx +116 -0
  170. package/lib/cjs/docs/utils/messagesReducer.stories.mdx +64 -0
  171. package/lib/cjs/experimental/EditButton/EditButton.js +63 -0
  172. package/lib/cjs/experimental/EditButton/EditButton.mdx +9 -0
  173. package/lib/cjs/experimental/EditButton/EditButton.stories.js +91 -0
  174. package/lib/cjs/experimental/EditButton/EditButton.test.js +71 -0
  175. package/lib/cjs/experimental/EditButton/index.js +14 -0
  176. package/lib/cjs/experimental/ListView/ListView.mdx +47 -0
  177. package/lib/cjs/experimental/ListView/ListView.stories.js +742 -0
  178. package/lib/cjs/experimental/ListViewItem/ListViewItem.js +23 -5
  179. package/lib/cjs/experimental/ListViewItem/ListViewItem.mdx +36 -0
  180. package/lib/cjs/experimental/ListViewItem/ListViewItem.stories.js +31 -7
  181. package/lib/cjs/experimental/ListViewItem/ListViewItem.test.js +51 -7
  182. package/lib/cjs/experimental/ListViewItem/controls/ListViewItemEditButton.js +2 -7
  183. package/lib/cjs/experimental/ListViewItem/controls/ListViewItemEditButton.stories.js +4 -1
  184. package/lib/cjs/experimental/ListViewItem/controls/ListViewItemMenu.js +0 -1
  185. package/lib/cjs/experimental/ListViewItem/controls/ListViewItemMenu.test.js +2 -2
  186. package/lib/cjs/experimental/ListViewItem/controls/ListViewItemSwitchField.js +2 -3
  187. package/lib/cjs/experimental/ListViewItem/listViewItemAttributes.js +28 -13
  188. package/lib/cjs/experimental/PanelHeader/PanelHeader.js +88 -0
  189. package/lib/cjs/experimental/PanelHeader/PanelHeader.mdx +19 -0
  190. package/lib/cjs/experimental/PanelHeader/PanelHeader.stories.js +71 -0
  191. package/lib/cjs/experimental/PanelHeader/PanelHeader.styles.js +38 -0
  192. package/lib/cjs/experimental/PanelHeader/PanelHeader.test.js +46 -0
  193. package/lib/cjs/experimental/PanelHeader/controls/PanelHeaderCloseButton.js +32 -0
  194. package/lib/cjs/experimental/PanelHeader/controls/PanelHeaderCloseButton.stories.js +31 -0
  195. package/lib/cjs/experimental/PanelHeader/controls/PanelHeaderCloseButton.test.js +25 -0
  196. package/lib/cjs/experimental/PanelHeader/controls/PanelHeaderMenu.js +25 -0
  197. package/lib/cjs/experimental/PanelHeader/controls/PanelHeaderMenu.stories.js +36 -0
  198. package/lib/cjs/experimental/PanelHeader/controls/PanelHeaderMenu.test.js +58 -0
  199. package/lib/cjs/experimental/PanelHeader/controls/PanelHeaderSwitchField.js +25 -0
  200. package/lib/cjs/experimental/PanelHeader/controls/PanelHeaderSwitchField.stories.js +41 -0
  201. package/lib/cjs/experimental/PanelHeader/controls/PanelHeaderSwitchField.test.js +25 -0
  202. package/lib/cjs/experimental/PanelHeader/index.js +14 -0
  203. package/lib/cjs/experimental/README.stories.mdx +7 -0
  204. package/lib/cjs/experimental/SaveBar/SaveBar.mdx +13 -0
  205. package/lib/cjs/experimental/recipes/ListAndPanel.stories.js +1 -1
  206. package/lib/cjs/hooks/useComponentToggle/useComponentToggle.test.js +2 -2
  207. package/lib/cjs/hooks/useCopyToClipboard/useCopyToClipboard.js +2 -2
  208. package/lib/cjs/hooks/useCopyToClipboard/useCopyToClipboard.test.js +1 -1
  209. package/lib/cjs/hooks/useOverlappingMenuHoverState/useOverlappingMenuHoverState.test.js +2 -2
  210. package/lib/cjs/hooks/usePropWarning/usePropWarning.js +1 -1
  211. package/lib/cjs/hooks/useStatusClasses/useStatusClasses.js +2 -2
  212. package/lib/cjs/hooks/useTShirtSize/useTShirtSize.js +1 -1
  213. package/lib/cjs/index.d.ts +173 -0
  214. package/lib/cjs/index.js +53 -1
  215. package/lib/cjs/recipes/ApplicationSearchDropdown.stories.hidden.js +1 -1
  216. package/lib/cjs/recipes/{AttributesAndPingOneMapping.stories.js → AttributeMapping.stories.js} +405 -132
  217. package/lib/cjs/recipes/Slider.stories.js +1 -1
  218. package/lib/cjs/styles/colors.js +1 -1
  219. package/lib/cjs/styles/forms/index.js +1 -1
  220. package/lib/cjs/styles/variants/README.md +98 -0
  221. package/lib/cjs/styles/variants/variants.js +2 -0
  222. package/lib/cjs/types/box.d.ts +10 -0
  223. package/lib/cjs/types/box.js +6 -0
  224. package/lib/cjs/types/icon.d.ts +34 -0
  225. package/lib/cjs/types/icon.js +6 -0
  226. package/lib/cjs/types/index.d.ts +7 -0
  227. package/lib/cjs/types/index.js +86 -0
  228. package/lib/cjs/types/loader.d.ts +14 -0
  229. package/lib/cjs/types/loader.js +6 -0
  230. package/lib/cjs/types/mdx.d.js +1 -0
  231. package/lib/cjs/types/popoverContainer.d.ts +23 -0
  232. package/lib/cjs/types/popoverContainer.js +6 -0
  233. package/lib/cjs/types/shared/dom.d.ts +9 -0
  234. package/lib/cjs/types/shared/dom.js +6 -0
  235. package/lib/cjs/types/shared/index.d.ts +3 -0
  236. package/lib/cjs/types/shared/index.js +42 -0
  237. package/lib/cjs/types/shared/style.d.ts +11 -0
  238. package/lib/cjs/types/shared/style.js +6 -0
  239. package/lib/cjs/types/shared/test.d.ts +3 -0
  240. package/lib/cjs/types/shared/test.js +6 -0
  241. package/lib/cjs/types/shared/utils.d.ts +1 -0
  242. package/lib/cjs/types/shared/utils.js +6 -0
  243. package/lib/cjs/types/tableCell.d.ts +5 -0
  244. package/lib/cjs/types/tableCell.js +6 -0
  245. package/lib/cjs/types/text.d.ts +3 -0
  246. package/lib/cjs/types/text.js +6 -0
  247. package/lib/cjs/utils/designUtils/figmaLinks.js +7 -1
  248. package/lib/cjs/utils/devUtils/constants/variants.js +1 -2
  249. package/lib/cjs/utils/testUtils/testAxe.js +2 -2
  250. package/lib/cjs/utils/testUtils/testWrapper.js +2 -0
  251. package/lib/components/AccordionGridGroup/AccordionGridGroup.mdx +40 -0
  252. package/lib/components/AccordionGridGroup/AccordionGridGroup.test.js +2 -2
  253. package/lib/components/AccordionGroup/Accordion.styles.js +1 -2
  254. package/lib/components/AccordionGroup/AccordionGroup.mdx +41 -0
  255. package/lib/components/ArrayField/ArrayField.mdx +34 -0
  256. package/lib/components/AstroWrapper/AstroWrapper.mdx +16 -0
  257. package/lib/components/Avatar/Avatar.mdx +14 -0
  258. package/lib/components/Badge/Badge.mdx +24 -0
  259. package/lib/components/Box/Box.js +4 -19
  260. package/lib/components/Box/Box.mdx +23 -0
  261. package/lib/components/Box/Box.test.js +2 -6
  262. package/lib/components/Bracket/Bracket.mdx +17 -0
  263. package/lib/components/Breadcrumbs/Breadcrumbs.mdx +40 -0
  264. package/lib/components/Button/Button.mdx +40 -0
  265. package/lib/components/Button/Button.stories.js +30 -5
  266. package/lib/components/Button/Buttons.styles.js +25 -7
  267. package/lib/components/Calendar/Calendar.mdx +39 -0
  268. package/lib/components/Calendar/Calendar.test.js +2 -2
  269. package/lib/components/Callout/Callout.mdx +28 -0
  270. package/lib/components/Card/Card.mdx +32 -0
  271. package/lib/components/CheckboxField/CheckboxField.mdx +42 -0
  272. package/lib/components/CodeView/CodeView.mdx +23 -0
  273. package/lib/components/CodeView/CodeView.test.js +1 -1
  274. package/lib/components/CollapsiblePanel/CollapsiblePanel.mdx +29 -0
  275. package/lib/components/ColorField/ColorField.mdx +38 -0
  276. package/lib/components/ComboBoxField/ComboBoxField.mdx +66 -0
  277. package/lib/components/ComboBoxField/ComboBoxField.stories.js +1 -1
  278. package/lib/components/ComboBoxField/ComboBoxField.test.js +2 -2
  279. package/lib/components/CopyText/CopyText.mdx +23 -0
  280. package/lib/components/CopyText/CopyText.test.js +1 -1
  281. package/lib/components/DataTable/DataTable.mdx +54 -0
  282. package/lib/components/DataTable/DataTable.stories.js +1 -1
  283. package/lib/components/DataTable/DataTable.test.js +1 -1
  284. package/lib/components/DatePicker/DatePicker.mdx +49 -0
  285. package/lib/components/DatePicker/DatePicker.test.js +2 -2
  286. package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js +3 -3
  287. package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.mdx +36 -0
  288. package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.stories.js +29 -45
  289. package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.test.js +1 -1
  290. package/lib/components/FileInputField/FileInputField.mdx +33 -0
  291. package/lib/components/HelpHint/HelpHint.js +148 -30
  292. package/lib/components/HelpHint/HelpHint.mdx +32 -0
  293. package/lib/components/HelpHint/HelpHint.stories.js +37 -6
  294. package/lib/components/HelpHint/HelpHint.styles.js +9 -1
  295. package/lib/components/HelpHint/HelpHint.test.js +213 -30
  296. package/lib/components/Icon/Icon.js +2 -25
  297. package/lib/components/Icon/Icon.mdx +49 -0
  298. package/lib/components/IconBadge/IconBadge.mdx +14 -0
  299. package/lib/components/IconButton/IconButton.mdx +33 -0
  300. package/lib/components/IconButtonToggle/IconButtonToggle.mdx +31 -0
  301. package/lib/components/Image/Image.mdx +28 -0
  302. package/lib/components/ImageUploadField/ImageUploadField.mdx +38 -0
  303. package/lib/components/ImageUploadField/ImageUploadField.stories.js +1 -1
  304. package/lib/components/ImageUploadField/ImageUploadField.test.js +2 -2
  305. package/lib/components/Link/Link.mdx +27 -0
  306. package/lib/components/Link/Link.styles.js +10 -0
  307. package/lib/components/LinkSelectField/LinkSelectField.mdx +47 -0
  308. package/lib/components/LinkSelectField/LinkSelectField.stories.js +1 -1
  309. package/lib/components/LinkSelectField/LinkSelectField.test.js +2 -2
  310. package/lib/components/ListBox/ListBox.test.js +2 -2
  311. package/lib/components/ListItem/ListItem.mdx +21 -0
  312. package/lib/components/ListView/ListView.mdx +44 -0
  313. package/lib/components/ListView/ListView.stories.js +96 -50
  314. package/lib/components/ListView/ListView.test.js +2 -2
  315. package/lib/components/Loader/Loader.js +0 -14
  316. package/lib/components/Loader/Loader.mdx +29 -0
  317. package/lib/components/Menu/Menu.mdx +43 -0
  318. package/lib/components/Messages/Messages.mdx +35 -0
  319. package/lib/components/Modal/Modal.mdx +59 -0
  320. package/lib/components/MultivaluesField/MultivaluesField.js +43 -9
  321. package/lib/components/MultivaluesField/MultivaluesField.mdx +44 -0
  322. package/lib/components/MultivaluesField/MultivaluesField.test.js +3 -3
  323. package/lib/components/NavBar/NavBar.mdx +42 -0
  324. package/lib/components/NumberField/NumberField.mdx +39 -0
  325. package/lib/components/OverlayPanel/OverlayPanel.mdx +39 -0
  326. package/lib/components/PasswordField/PasswordField.mdx +33 -0
  327. package/lib/components/PasswordField/PasswordField.test.js +2 -2
  328. package/lib/components/PopoverContainer/PopoverContainer.js +7 -38
  329. package/lib/components/PopoverMenu/PopoverMenu.mdx +53 -0
  330. package/lib/components/RadioGroupField/RadioGroupField.mdx +41 -0
  331. package/lib/components/RadioGroupField/RadioGroupField.test.js +2 -2
  332. package/lib/components/RequirementsList/RequirementsList.mdx +17 -0
  333. package/lib/components/RockerButtonGroup/RockerButtonGroup.mdx +36 -0
  334. package/lib/components/ScrollBox/ScrollBox.mdx +17 -0
  335. package/lib/components/SearchField/SearchField.mdx +33 -0
  336. package/lib/components/SelectField/SelectField.mdx +46 -0
  337. package/lib/components/SelectField/SelectField.stories.js +1 -1
  338. package/lib/components/SelectFieldBase/SelectFieldBase.test.js +2 -2
  339. package/lib/components/Separator/Separator.mdx +19 -0
  340. package/lib/components/Stepper/Stepper.mdx +41 -0
  341. package/lib/components/Stepper/Stepper.test.js +2 -2
  342. package/lib/components/SwitchField/SwitchField.mdx +36 -0
  343. package/lib/components/Table/Table.mdx +30 -0
  344. package/lib/components/TableCell/TableCell.js +0 -5
  345. package/lib/components/Tabs/Tabs.mdx +40 -0
  346. package/lib/components/Tabs/Tabs.test.js +2 -2
  347. package/lib/components/Text/Text.js +3 -7
  348. package/lib/components/Text/Text.mdx +13 -0
  349. package/lib/components/TextAreaField/TextAreaField.mdx +34 -0
  350. package/lib/components/TextField/TextField.js +1 -1
  351. package/lib/components/TextField/TextField.mdx +34 -0
  352. package/lib/components/TimeZonePicker/TimeZonePicker.mdx +18 -0
  353. package/lib/components/TooltipTrigger/Tooltip.styles.js +1 -1
  354. package/lib/components/TooltipTrigger/TooltipTrigger.js +2 -0
  355. package/lib/components/TooltipTrigger/TooltipTrigger.mdx +23 -0
  356. package/lib/components/TooltipTrigger/TooltipTrigger.test.js +48 -2
  357. package/lib/docs/Props.stories.mdx +35 -0
  358. package/lib/docs/Welcome.stories.mdx +149 -0
  359. package/lib/docs/hooks/useDebounce.stories.mdx +59 -0
  360. package/lib/docs/hooks/useModalState.stories.mdx +83 -0
  361. package/lib/docs/hooks/useOverlayPanelState.stories.mdx +84 -0
  362. package/lib/docs/theme/AstroNanoTheme.stories.mdx +174 -0
  363. package/lib/docs/theme/AstroTheme.stories.mdx +20 -0
  364. package/lib/docs/theme/CustomThemes.stories.mdx +70 -0
  365. package/lib/docs/theme/StylingGuideline.stories.mdx +116 -0
  366. package/lib/docs/utils/messagesReducer.stories.mdx +64 -0
  367. package/lib/experimental/EditButton/EditButton.js +50 -0
  368. package/lib/experimental/EditButton/EditButton.mdx +9 -0
  369. package/lib/experimental/EditButton/EditButton.stories.js +75 -0
  370. package/lib/experimental/EditButton/EditButton.test.js +68 -0
  371. package/lib/experimental/EditButton/index.js +1 -0
  372. package/lib/experimental/ListView/ListView.mdx +47 -0
  373. package/lib/experimental/ListView/ListView.stories.js +729 -0
  374. package/lib/experimental/ListViewItem/ListViewItem.js +24 -6
  375. package/lib/experimental/ListViewItem/ListViewItem.mdx +36 -0
  376. package/lib/experimental/ListViewItem/ListViewItem.stories.js +28 -5
  377. package/lib/experimental/ListViewItem/ListViewItem.test.js +45 -1
  378. package/lib/experimental/ListViewItem/controls/ListViewItemEditButton.js +1 -4
  379. package/lib/experimental/ListViewItem/controls/ListViewItemEditButton.stories.js +4 -1
  380. package/lib/experimental/ListViewItem/controls/ListViewItemMenu.test.js +2 -2
  381. package/lib/experimental/ListViewItem/controls/ListViewItemSwitchField.js +1 -0
  382. package/lib/experimental/ListViewItem/listViewItemAttributes.js +25 -12
  383. package/lib/experimental/PanelHeader/PanelHeader.js +75 -0
  384. package/lib/experimental/PanelHeader/PanelHeader.mdx +19 -0
  385. package/lib/experimental/PanelHeader/PanelHeader.stories.js +59 -0
  386. package/lib/experimental/PanelHeader/PanelHeader.styles.js +30 -0
  387. package/lib/experimental/PanelHeader/PanelHeader.test.js +43 -0
  388. package/lib/experimental/PanelHeader/controls/PanelHeaderCloseButton.js +25 -0
  389. package/lib/experimental/PanelHeader/controls/PanelHeaderCloseButton.stories.js +21 -0
  390. package/lib/experimental/PanelHeader/controls/PanelHeaderCloseButton.test.js +22 -0
  391. package/lib/experimental/PanelHeader/controls/PanelHeaderMenu.js +18 -0
  392. package/lib/experimental/PanelHeader/controls/PanelHeaderMenu.stories.js +26 -0
  393. package/lib/experimental/PanelHeader/controls/PanelHeaderMenu.test.js +55 -0
  394. package/lib/experimental/PanelHeader/controls/PanelHeaderSwitchField.js +18 -0
  395. package/lib/experimental/PanelHeader/controls/PanelHeaderSwitchField.stories.js +32 -0
  396. package/lib/experimental/PanelHeader/controls/PanelHeaderSwitchField.test.js +22 -0
  397. package/lib/experimental/PanelHeader/index.js +1 -0
  398. package/lib/experimental/README.stories.mdx +7 -0
  399. package/lib/experimental/SaveBar/SaveBar.mdx +13 -0
  400. package/lib/experimental/recipes/ListAndPanel.stories.js +1 -1
  401. package/lib/hooks/useComponentToggle/useComponentToggle.test.js +2 -2
  402. package/lib/hooks/useCopyToClipboard/useCopyToClipboard.js +2 -2
  403. package/lib/hooks/useCopyToClipboard/useCopyToClipboard.test.js +1 -1
  404. package/lib/hooks/useOverlappingMenuHoverState/useOverlappingMenuHoverState.test.js +2 -2
  405. package/lib/hooks/usePropWarning/usePropWarning.js +1 -1
  406. package/lib/hooks/useStatusClasses/useStatusClasses.js +2 -2
  407. package/lib/hooks/useTShirtSize/useTShirtSize.js +1 -1
  408. package/lib/index.js +6 -0
  409. package/lib/recipes/AttributeMapping.stories.js +553 -0
  410. package/lib/styles/colors.js +1 -1
  411. package/lib/styles/variants/README.md +98 -0
  412. package/lib/styles/variants/variants.js +2 -0
  413. package/lib/types/box.js +1 -0
  414. package/lib/types/icon.js +1 -0
  415. package/lib/types/index.js +7 -0
  416. package/lib/types/loader.js +1 -0
  417. package/lib/types/mdx.d.js +0 -0
  418. package/lib/types/popoverContainer.js +1 -0
  419. package/lib/types/shared/dom.js +1 -0
  420. package/lib/types/shared/index.js +3 -0
  421. package/lib/types/shared/style.js +1 -0
  422. package/lib/types/shared/test.js +1 -0
  423. package/lib/types/shared/utils.js +1 -0
  424. package/lib/types/tableCell.js +1 -0
  425. package/lib/types/text.js +1 -0
  426. package/lib/utils/designUtils/figmaLinks.js +7 -1
  427. package/lib/utils/testUtils/testAxe.js +2 -2
  428. package/package.json +23 -9
  429. package/CHANGELOG.md +0 -2565
  430. package/NOTICE +0 -2481
  431. package/NOTICE.html +0 -9174
  432. package/lib/cjs/recipes/AttributeMappingReadOnlyField.stories.js +0 -254
  433. package/lib/recipes/AttributeMappingReadOnlyField.stories.js +0 -243
  434. package/lib/recipes/AttributesAndPingOneMapping.stories.js +0 -282
@@ -1,5 +1,5 @@
1
- import _Symbol from "@babel/runtime-corejs3/core-js-stable/symbol";
2
1
  import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
2
+ import _Symbol from "@babel/runtime-corejs3/core-js-stable/symbol";
3
3
  import _Object$create from "@babel/runtime-corejs3/core-js-stable/object/create";
4
4
  import _Object$getPrototypeOf from "@babel/runtime-corejs3/core-js-stable/object/get-prototype-of";
5
5
  import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
@@ -9,7 +9,7 @@ import _typeof from "@babel/runtime-corejs3/helpers/esm/typeof";
9
9
  import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
10
10
  import _objectDestructuringEmpty from "@babel/runtime-corejs3/helpers/esm/objectDestructuringEmpty";
11
11
  import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
12
- function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return exports; }; var exports = {}, Op = Object.prototype, hasOwn = Op.hasOwnProperty, $Symbol = "function" == typeof _Symbol ? _Symbol : {}, iteratorSymbol = $Symbol.iterator || "@@iterator", asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator", toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag"; function define(obj, key, value) { return _Object$defineProperty(obj, key, { value: value, enumerable: !0, configurable: !0, writable: !0 }), obj[key]; } try { define({}, ""); } catch (err) { define = function define(obj, key, value) { return obj[key] = value; }; } function wrap(innerFn, outerFn, self, tryLocsList) { var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator, generator = _Object$create(protoGenerator.prototype), context = new Context(tryLocsList || []); return generator._invoke = function (innerFn, self, context) { var state = "suspendedStart"; return function (method, arg) { if ("executing" === state) throw new Error("Generator is already running"); if ("completed" === state) { if ("throw" === method) throw arg; return doneResult(); } for (context.method = method, context.arg = arg;;) { var delegate = context.delegate; if (delegate) { var delegateResult = maybeInvokeDelegate(delegate, context); if (delegateResult) { if (delegateResult === ContinueSentinel) continue; return delegateResult; } } if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) { if ("suspendedStart" === state) throw state = "completed", context.arg; context.dispatchException(context.arg); } else "return" === context.method && context.abrupt("return", context.arg); state = "executing"; var record = tryCatch(innerFn, self, context); if ("normal" === record.type) { if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue; return { value: record.arg, done: context.done }; } "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg); } }; }(innerFn, self, context), generator; } function tryCatch(fn, obj, arg) { try { return { type: "normal", arg: fn.call(obj, arg) }; } catch (err) { return { type: "throw", arg: err }; } } exports.wrap = wrap; var ContinueSentinel = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var IteratorPrototype = {}; define(IteratorPrototype, iteratorSymbol, function () { return this; }); var getProto = _Object$getPrototypeOf, NativeIteratorPrototype = getProto && getProto(getProto(values([]))); NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype); var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = _Object$create(IteratorPrototype); function defineIteratorMethods(prototype) { var _context4; _forEachInstanceProperty(_context4 = ["next", "throw", "return"]).call(_context4, function (method) { define(prototype, method, function (arg) { return this._invoke(method, arg); }); }); } function AsyncIterator(generator, PromiseImpl) { function invoke(method, arg, resolve, reject) { var record = tryCatch(generator[method], generator, arg); if ("throw" !== record.type) { var result = record.arg, value = result.value; return value && "object" == _typeof(value) && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) { invoke("next", value, resolve, reject); }, function (err) { invoke("throw", err, resolve, reject); }) : PromiseImpl.resolve(value).then(function (unwrapped) { result.value = unwrapped, resolve(result); }, function (error) { return invoke("throw", error, resolve, reject); }); } reject(record.arg); } var previousPromise; this._invoke = function (method, arg) { function callInvokeWithMethodAndArg() { return new PromiseImpl(function (resolve, reject) { invoke(method, arg, resolve, reject); }); } return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); }; } function maybeInvokeDelegate(delegate, context) { var method = delegate.iterator[context.method]; if (undefined === method) { if (context.delegate = null, "throw" === context.method) { if (delegate.iterator["return"] && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method)) return ContinueSentinel; context.method = "throw", context.arg = new TypeError("The iterator does not provide a 'throw' method"); } return ContinueSentinel; } var record = tryCatch(method, delegate.iterator, context.arg); if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel; var info = record.arg; return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel); } function pushTryEntry(locs) { var entry = { tryLoc: locs[0] }; 1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry); } function resetTryEntry(entry) { var record = entry.completion || {}; record.type = "normal", delete record.arg, entry.completion = record; } function Context(tryLocsList) { this.tryEntries = [{ tryLoc: "root" }], _forEachInstanceProperty(tryLocsList).call(tryLocsList, pushTryEntry, this), this.reset(!0); } function values(iterable) { if (iterable) { var iteratorMethod = iterable[iteratorSymbol]; if (iteratorMethod) return iteratorMethod.call(iterable); if ("function" == typeof iterable.next) return iterable; if (!isNaN(iterable.length)) { var i = -1, next = function next() { for (; ++i < iterable.length;) { if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next; } return next.value = undefined, next.done = !0, next; }; return next.next = next; } } return { next: doneResult }; } function doneResult() { return { value: undefined, done: !0 }; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, define(Gp, "constructor", GeneratorFunctionPrototype), define(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) { var ctor = "function" == typeof genFun && genFun.constructor; return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name)); }, exports.mark = function (genFun) { return _Object$setPrototypeOf ? _Object$setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = _Object$create(Gp), genFun; }, exports.awrap = function (arg) { return { __await: arg }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () { return this; }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) { void 0 === PromiseImpl && (PromiseImpl = _Promise); var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl); return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) { return result.done ? result.value : iter.next(); }); }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () { return this; }), define(Gp, "toString", function () { return "[object Generator]"; }), exports.keys = function (object) { var keys = []; for (var key in object) { keys.push(key); } return _reverseInstanceProperty(keys).call(keys), function next() { for (; keys.length;) { var key = keys.pop(); if (key in object) return next.value = key, next.done = !1, next; } return next.done = !0, next; }; }, exports.values = values, Context.prototype = { constructor: Context, reset: function reset(skipTempReset) { var _context5; if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, _forEachInstanceProperty(_context5 = this.tryEntries).call(_context5, resetTryEntry), !skipTempReset) for (var name in this) { "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+_sliceInstanceProperty(name).call(name, 1)) && (this[name] = undefined); } }, stop: function stop() { this.done = !0; var rootRecord = this.tryEntries[0].completion; if ("throw" === rootRecord.type) throw rootRecord.arg; return this.rval; }, dispatchException: function dispatchException(exception) { if (this.done) throw exception; var context = this; function handle(loc, caught) { return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught; } for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i], record = entry.completion; if ("root" === entry.tryLoc) return handle("end"); if (entry.tryLoc <= this.prev) { var hasCatch = hasOwn.call(entry, "catchLoc"), hasFinally = hasOwn.call(entry, "finallyLoc"); if (hasCatch && hasFinally) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } else if (hasCatch) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); } else { if (!hasFinally) throw new Error("try statement without catch or finally"); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } } } }, abrupt: function abrupt(type, arg) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) { var finallyEntry = entry; break; } } finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null); var record = finallyEntry ? finallyEntry.completion : {}; return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record); }, complete: function complete(record, afterLoc) { if ("throw" === record.type) throw record.arg; return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel; }, finish: function finish(finallyLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel; } }, "catch": function _catch(tryLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc === tryLoc) { var record = entry.completion; if ("throw" === record.type) { var thrown = record.arg; resetTryEntry(entry); } return thrown; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(iterable, resultName, nextLoc) { return this.delegate = { iterator: values(iterable), resultName: resultName, nextLoc: nextLoc }, "next" === this.method && (this.arg = undefined), ContinueSentinel; } }, exports; }
12
+ function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return exports; }; var exports = {}, Op = Object.prototype, hasOwn = Op.hasOwnProperty, defineProperty = _Object$defineProperty || function (obj, key, desc) { obj[key] = desc.value; }, $Symbol = "function" == typeof _Symbol ? _Symbol : {}, iteratorSymbol = $Symbol.iterator || "@@iterator", asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator", toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag"; function define(obj, key, value) { return _Object$defineProperty(obj, key, { value: value, enumerable: !0, configurable: !0, writable: !0 }), obj[key]; } try { define({}, ""); } catch (err) { define = function define(obj, key, value) { return obj[key] = value; }; } function wrap(innerFn, outerFn, self, tryLocsList) { var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator, generator = _Object$create(protoGenerator.prototype), context = new Context(tryLocsList || []); return defineProperty(generator, "_invoke", { value: makeInvokeMethod(innerFn, self, context) }), generator; } function tryCatch(fn, obj, arg) { try { return { type: "normal", arg: fn.call(obj, arg) }; } catch (err) { return { type: "throw", arg: err }; } } exports.wrap = wrap; var ContinueSentinel = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var IteratorPrototype = {}; define(IteratorPrototype, iteratorSymbol, function () { return this; }); var getProto = _Object$getPrototypeOf, NativeIteratorPrototype = getProto && getProto(getProto(values([]))); NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype); var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = _Object$create(IteratorPrototype); function defineIteratorMethods(prototype) { var _context4; _forEachInstanceProperty(_context4 = ["next", "throw", "return"]).call(_context4, function (method) { define(prototype, method, function (arg) { return this._invoke(method, arg); }); }); } function AsyncIterator(generator, PromiseImpl) { function invoke(method, arg, resolve, reject) { var record = tryCatch(generator[method], generator, arg); if ("throw" !== record.type) { var result = record.arg, value = result.value; return value && "object" == _typeof(value) && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) { invoke("next", value, resolve, reject); }, function (err) { invoke("throw", err, resolve, reject); }) : PromiseImpl.resolve(value).then(function (unwrapped) { result.value = unwrapped, resolve(result); }, function (error) { return invoke("throw", error, resolve, reject); }); } reject(record.arg); } var previousPromise; defineProperty(this, "_invoke", { value: function value(method, arg) { function callInvokeWithMethodAndArg() { return new PromiseImpl(function (resolve, reject) { invoke(method, arg, resolve, reject); }); } return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(innerFn, self, context) { var state = "suspendedStart"; return function (method, arg) { if ("executing" === state) throw new Error("Generator is already running"); if ("completed" === state) { if ("throw" === method) throw arg; return doneResult(); } for (context.method = method, context.arg = arg;;) { var delegate = context.delegate; if (delegate) { var delegateResult = maybeInvokeDelegate(delegate, context); if (delegateResult) { if (delegateResult === ContinueSentinel) continue; return delegateResult; } } if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) { if ("suspendedStart" === state) throw state = "completed", context.arg; context.dispatchException(context.arg); } else "return" === context.method && context.abrupt("return", context.arg); state = "executing"; var record = tryCatch(innerFn, self, context); if ("normal" === record.type) { if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue; return { value: record.arg, done: context.done }; } "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg); } }; } function maybeInvokeDelegate(delegate, context) { var methodName = context.method, method = delegate.iterator[methodName]; if (undefined === method) return context.delegate = null, "throw" === methodName && delegate.iterator["return"] && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method) || "return" !== methodName && (context.method = "throw", context.arg = new TypeError("The iterator does not provide a '" + methodName + "' method")), ContinueSentinel; var record = tryCatch(method, delegate.iterator, context.arg); if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel; var info = record.arg; return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel); } function pushTryEntry(locs) { var entry = { tryLoc: locs[0] }; 1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry); } function resetTryEntry(entry) { var record = entry.completion || {}; record.type = "normal", delete record.arg, entry.completion = record; } function Context(tryLocsList) { this.tryEntries = [{ tryLoc: "root" }], _forEachInstanceProperty(tryLocsList).call(tryLocsList, pushTryEntry, this), this.reset(!0); } function values(iterable) { if (iterable) { var iteratorMethod = iterable[iteratorSymbol]; if (iteratorMethod) return iteratorMethod.call(iterable); if ("function" == typeof iterable.next) return iterable; if (!isNaN(iterable.length)) { var i = -1, next = function next() { for (; ++i < iterable.length;) { if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next; } return next.value = undefined, next.done = !0, next; }; return next.next = next; } } return { next: doneResult }; } function doneResult() { return { value: undefined, done: !0 }; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, defineProperty(Gp, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), defineProperty(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) { var ctor = "function" == typeof genFun && genFun.constructor; return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name)); }, exports.mark = function (genFun) { return _Object$setPrototypeOf ? _Object$setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = _Object$create(Gp), genFun; }, exports.awrap = function (arg) { return { __await: arg }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () { return this; }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) { void 0 === PromiseImpl && (PromiseImpl = _Promise); var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl); return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) { return result.done ? result.value : iter.next(); }); }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () { return this; }), define(Gp, "toString", function () { return "[object Generator]"; }), exports.keys = function (val) { var object = Object(val), keys = []; for (var key in object) { keys.push(key); } return _reverseInstanceProperty(keys).call(keys), function next() { for (; keys.length;) { var key = keys.pop(); if (key in object) return next.value = key, next.done = !1, next; } return next.done = !0, next; }; }, exports.values = values, Context.prototype = { constructor: Context, reset: function reset(skipTempReset) { var _context5; if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, _forEachInstanceProperty(_context5 = this.tryEntries).call(_context5, resetTryEntry), !skipTempReset) for (var name in this) { "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+_sliceInstanceProperty(name).call(name, 1)) && (this[name] = undefined); } }, stop: function stop() { this.done = !0; var rootRecord = this.tryEntries[0].completion; if ("throw" === rootRecord.type) throw rootRecord.arg; return this.rval; }, dispatchException: function dispatchException(exception) { if (this.done) throw exception; var context = this; function handle(loc, caught) { return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught; } for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i], record = entry.completion; if ("root" === entry.tryLoc) return handle("end"); if (entry.tryLoc <= this.prev) { var hasCatch = hasOwn.call(entry, "catchLoc"), hasFinally = hasOwn.call(entry, "finallyLoc"); if (hasCatch && hasFinally) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } else if (hasCatch) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); } else { if (!hasFinally) throw new Error("try statement without catch or finally"); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } } } }, abrupt: function abrupt(type, arg) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) { var finallyEntry = entry; break; } } finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null); var record = finallyEntry ? finallyEntry.completion : {}; return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record); }, complete: function complete(record, afterLoc) { if ("throw" === record.type) throw record.arg; return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel; }, finish: function finish(finallyLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel; } }, "catch": function _catch(tryLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc === tryLoc) { var record = entry.completion; if ("throw" === record.type) { var thrown = record.arg; resetTryEntry(entry); } return thrown; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(iterable, resultName, nextLoc) { return this.delegate = { iterator: values(iterable), resultName: resultName, nextLoc: nextLoc }, "next" === this.method && (this.arg = undefined), ContinueSentinel; } }, exports; }
13
13
  import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/index-of";
14
14
  import _Promise from "@babel/runtime-corejs3/core-js-stable/promise";
15
15
  import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
@@ -17,16 +17,18 @@ import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instan
17
17
  import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
18
18
  import React from 'react';
19
19
  import { Item, useAsyncList } from 'react-stately';
20
+ import CreateIcon from '@pingux/mdi-react/CreateIcon';
20
21
  import FormSelectIcon from '@pingux/mdi-react/FormSelectIcon';
22
+ import MoreVertIcon from '@pingux/mdi-react/MoreVertIcon';
21
23
  import { action } from '@storybook/addon-actions';
22
24
  import isChromatic from 'chromatic/isChromatic';
23
25
  import DocsLayout from '../../../.storybook/storybookDocsLayout';
24
- import { Box, ListView, ListViewItem, ListViewItemMenu, ListViewItemSwitchField } from '../../index';
26
+ import { Box, Icon, IconButton, ListView, Text } from '../../index';
25
27
  import loadingStates from '../../utils/devUtils/constants/loadingStates';
26
28
  import ListViewReadme from './ListView.mdx';
27
29
  import { jsx as ___EmotionJSX } from "@emotion/react";
28
30
  export default {
29
- title: 'Experimental/ListView',
31
+ title: 'Components/ListView',
30
32
  component: ListView,
31
33
  parameters: {
32
34
  docs: {
@@ -45,20 +47,19 @@ export default {
45
47
  options: loadingStates
46
48
  }
47
49
  },
48
- disabledKeys: {},
50
+ disabledKeys: {
51
+ defaultValue: ['Snake']
52
+ },
49
53
  items: {
50
54
  control: {
51
55
  type: 'none'
52
56
  }
53
57
  },
54
58
  onSelectionChange: {
55
- control: 'none'
59
+ control: 'none',
60
+ // eslint-disable-next-line no-console
61
+ defaultValue: console.log
56
62
  }
57
- },
58
- args: {
59
- disabledKeys: ['Snake'],
60
- // eslint-disable-next-line no-console
61
- onSelectionChange: console.log
62
63
  }
63
64
  };
64
65
  var items = [{
@@ -532,33 +533,82 @@ var actions = {
532
533
  onFocus: action('onFocus'),
533
534
  onLoadMore: action('onLoadMore')
534
535
  };
535
- var Controls = function Controls() {
536
- return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(ListViewItemSwitchField, null), ___EmotionJSX(ListViewItemMenu, null, ___EmotionJSX(Item, {
537
- key: "enable"
538
- }, "Enable user"), ___EmotionJSX(Item, {
539
- key: "disable"
540
- }, "Disable user"), ___EmotionJSX(Item, {
541
- key: "delete"
542
- }, "Delete user")));
536
+ var ListElement = function ListElement(_ref) {
537
+ var item = _ref.item;
538
+ return ___EmotionJSX(Box, {
539
+ isRow: true
540
+ }, ___EmotionJSX(Box, {
541
+ isRow: true,
542
+ mr: "auto",
543
+ alignSelf: "center"
544
+ }, ___EmotionJSX(Icon, {
545
+ icon: FormSelectIcon,
546
+ mr: "sm",
547
+ color: "accent.40",
548
+ size: "md"
549
+ }), ___EmotionJSX(Text, {
550
+ variant: "itemTitle",
551
+ alignSelf: "center"
552
+ }, item.name)), ___EmotionJSX(Box, {
553
+ isRow: true,
554
+ alignSelf: "center",
555
+ gap: "sm"
556
+ }, ___EmotionJSX(IconButton, {
557
+ "aria-label": "create-icon"
558
+ }, ___EmotionJSX(Icon, {
559
+ icon: CreateIcon,
560
+ size: "sm"
561
+ })), ___EmotionJSX(IconButton, {
562
+ "aria-label": "actions-icon"
563
+ }, ___EmotionJSX(Icon, {
564
+ icon: MoreVertIcon,
565
+ size: "sm"
566
+ }))));
543
567
  };
544
- export var Default = function Default(_ref) {
545
- var args = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
568
+ export var Default = function Default(_ref2) {
569
+ var args = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
546
570
  return ___EmotionJSX(ListView, _extends({}, props, args, {
547
571
  items: items
548
572
  }), function (item) {
549
573
  return ___EmotionJSX(Item, {
550
- key: item.name
551
- }, ___EmotionJSX(ListViewItem, {
552
- data: {
553
- text: item.name,
554
- icon: FormSelectIcon
555
- }
556
- }, ___EmotionJSX(Controls, null)));
574
+ key: item.name,
575
+ textValue: item.name,
576
+ "data-id": item.key
577
+ }, ___EmotionJSX(Box, {
578
+ isRow: true
579
+ }, ___EmotionJSX(Box, {
580
+ isRow: true,
581
+ mr: "auto",
582
+ alignSelf: "center"
583
+ }, ___EmotionJSX(Icon, {
584
+ icon: FormSelectIcon,
585
+ mr: "sm",
586
+ color: "accent.40",
587
+ size: "md"
588
+ }), ___EmotionJSX(Text, {
589
+ variant: "itemTitle",
590
+ alignSelf: "center"
591
+ }, item.name)), ___EmotionJSX(Box, {
592
+ isRow: true,
593
+ alignSelf: "center",
594
+ gap: "sm"
595
+ }, ___EmotionJSX(IconButton, {
596
+ "aria-label": "create-icon"
597
+ }, ___EmotionJSX(Icon, {
598
+ icon: CreateIcon,
599
+ size: "sm"
600
+ })), ___EmotionJSX(IconButton, {
601
+ "aria-label": "actions-icon",
602
+ size: "sm"
603
+ }, ___EmotionJSX(Icon, {
604
+ icon: MoreVertIcon,
605
+ size: "sm"
606
+ })))));
557
607
  });
558
608
  };
559
609
  export var InfiniteLoadingList = function InfiniteLoadingList(args) {
560
610
  var getMockData = /*#__PURE__*/function () {
561
- var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(signal, cursor) {
611
+ var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(signal, cursor) {
562
612
  var pageNumber;
563
613
  return _regeneratorRuntime().wrap(function _callee$(_context) {
564
614
  while (1) {
@@ -590,11 +640,11 @@ export var InfiniteLoadingList = function InfiniteLoadingList(args) {
590
640
  }, _callee);
591
641
  }));
592
642
  return function getMockData(_x, _x2) {
593
- return _ref2.apply(this, arguments);
643
+ return _ref3.apply(this, arguments);
594
644
  };
595
645
  }();
596
646
  var fetchApiData = /*#__PURE__*/function () {
597
- var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(signal, cursor, filterText) {
647
+ var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(signal, cursor, filterText) {
598
648
  var res, json;
599
649
  return _regeneratorRuntime().wrap(function _callee2$(_context2) {
600
650
  while (1) {
@@ -648,18 +698,18 @@ export var InfiniteLoadingList = function InfiniteLoadingList(args) {
648
698
  }, _callee2, null, [[2, 14]]);
649
699
  }));
650
700
  return function fetchApiData(_x3, _x4, _x5) {
651
- return _ref3.apply(this, arguments);
701
+ return _ref4.apply(this, arguments);
652
702
  };
653
703
  }();
654
704
  var list = useAsyncList({
655
- load: function load(_ref4) {
705
+ load: function load(_ref5) {
656
706
  return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
657
707
  var signal, cursor, filterText;
658
708
  return _regeneratorRuntime().wrap(function _callee3$(_context3) {
659
709
  while (1) {
660
710
  switch (_context3.prev = _context3.next) {
661
711
  case 0:
662
- signal = _ref4.signal, cursor = _ref4.cursor, filterText = _ref4.filterText;
712
+ signal = _ref5.signal, cursor = _ref5.cursor, filterText = _ref5.filterText;
663
713
  if (cursor) {
664
714
  // eslint-disable-next-line
665
715
  cursor = cursor.replace(/^http:\/\//i, "https://");
@@ -692,13 +742,11 @@ export var InfiniteLoadingList = function InfiniteLoadingList(args) {
692
742
  onLoadMore: list.loadMore
693
743
  }), function (item) {
694
744
  return ___EmotionJSX(Item, {
695
- key: item.name
696
- }, ___EmotionJSX(ListViewItem, {
697
- data: {
698
- text: item.name,
699
- icon: FormSelectIcon
700
- }
701
- }, ___EmotionJSX(Controls, null)));
745
+ key: item.name,
746
+ textValue: item.name
747
+ }, ___EmotionJSX(ListElement, {
748
+ item: item
749
+ }));
702
750
  }));
703
751
  };
704
752
  InfiniteLoadingList.args = {
@@ -711,19 +759,17 @@ InfiniteLoadingList.parameters = {
711
759
  }
712
760
  }
713
761
  };
714
- export var MultipleSelection = function MultipleSelection(_ref5) {
715
- var args = _extends({}, (_objectDestructuringEmpty(_ref5), _ref5));
762
+ export var MultipleSelection = function MultipleSelection(_ref6) {
763
+ var args = _extends({}, (_objectDestructuringEmpty(_ref6), _ref6));
716
764
  return ___EmotionJSX(ListView, _extends({}, props, args, {
717
765
  items: items,
718
766
  selectionMode: "multiple"
719
767
  }), function (item) {
720
768
  return ___EmotionJSX(Item, {
721
- key: item.name
722
- }, ___EmotionJSX(ListViewItem, {
723
- data: {
724
- text: item.name,
725
- icon: FormSelectIcon
726
- }
727
- }, ___EmotionJSX(Controls, null)));
769
+ key: item.name,
770
+ textValue: item.name
771
+ }, ___EmotionJSX(ListElement, {
772
+ item: item
773
+ }));
728
774
  });
729
775
  };
@@ -1,5 +1,5 @@
1
- import _Symbol from "@babel/runtime-corejs3/core-js-stable/symbol";
2
1
  import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
2
+ import _Symbol from "@babel/runtime-corejs3/core-js-stable/symbol";
3
3
  import _Object$create from "@babel/runtime-corejs3/core-js-stable/object/create";
4
4
  import _Object$getPrototypeOf from "@babel/runtime-corejs3/core-js-stable/object/get-prototype-of";
5
5
  import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
@@ -11,7 +11,7 @@ import _typeof from "@babel/runtime-corejs3/helpers/esm/typeof";
11
11
  import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
12
12
  import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
13
13
  import _Set from "@babel/runtime-corejs3/core-js-stable/set";
14
- function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return exports; }; var exports = {}, Op = Object.prototype, hasOwn = Op.hasOwnProperty, $Symbol = "function" == typeof _Symbol ? _Symbol : {}, iteratorSymbol = $Symbol.iterator || "@@iterator", asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator", toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag"; function define(obj, key, value) { return _Object$defineProperty(obj, key, { value: value, enumerable: !0, configurable: !0, writable: !0 }), obj[key]; } try { define({}, ""); } catch (err) { define = function define(obj, key, value) { return obj[key] = value; }; } function wrap(innerFn, outerFn, self, tryLocsList) { var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator, generator = _Object$create(protoGenerator.prototype), context = new Context(tryLocsList || []); return generator._invoke = function (innerFn, self, context) { var state = "suspendedStart"; return function (method, arg) { if ("executing" === state) throw new Error("Generator is already running"); if ("completed" === state) { if ("throw" === method) throw arg; return doneResult(); } for (context.method = method, context.arg = arg;;) { var delegate = context.delegate; if (delegate) { var delegateResult = maybeInvokeDelegate(delegate, context); if (delegateResult) { if (delegateResult === ContinueSentinel) continue; return delegateResult; } } if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) { if ("suspendedStart" === state) throw state = "completed", context.arg; context.dispatchException(context.arg); } else "return" === context.method && context.abrupt("return", context.arg); state = "executing"; var record = tryCatch(innerFn, self, context); if ("normal" === record.type) { if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue; return { value: record.arg, done: context.done }; } "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg); } }; }(innerFn, self, context), generator; } function tryCatch(fn, obj, arg) { try { return { type: "normal", arg: fn.call(obj, arg) }; } catch (err) { return { type: "throw", arg: err }; } } exports.wrap = wrap; var ContinueSentinel = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var IteratorPrototype = {}; define(IteratorPrototype, iteratorSymbol, function () { return this; }); var getProto = _Object$getPrototypeOf, NativeIteratorPrototype = getProto && getProto(getProto(values([]))); NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype); var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = _Object$create(IteratorPrototype); function defineIteratorMethods(prototype) { var _context8; _forEachInstanceProperty(_context8 = ["next", "throw", "return"]).call(_context8, function (method) { define(prototype, method, function (arg) { return this._invoke(method, arg); }); }); } function AsyncIterator(generator, PromiseImpl) { function invoke(method, arg, resolve, reject) { var record = tryCatch(generator[method], generator, arg); if ("throw" !== record.type) { var result = record.arg, value = result.value; return value && "object" == _typeof(value) && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) { invoke("next", value, resolve, reject); }, function (err) { invoke("throw", err, resolve, reject); }) : PromiseImpl.resolve(value).then(function (unwrapped) { result.value = unwrapped, resolve(result); }, function (error) { return invoke("throw", error, resolve, reject); }); } reject(record.arg); } var previousPromise; this._invoke = function (method, arg) { function callInvokeWithMethodAndArg() { return new PromiseImpl(function (resolve, reject) { invoke(method, arg, resolve, reject); }); } return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); }; } function maybeInvokeDelegate(delegate, context) { var method = delegate.iterator[context.method]; if (undefined === method) { if (context.delegate = null, "throw" === context.method) { if (delegate.iterator["return"] && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method)) return ContinueSentinel; context.method = "throw", context.arg = new TypeError("The iterator does not provide a 'throw' method"); } return ContinueSentinel; } var record = tryCatch(method, delegate.iterator, context.arg); if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel; var info = record.arg; return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel); } function pushTryEntry(locs) { var entry = { tryLoc: locs[0] }; 1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry); } function resetTryEntry(entry) { var record = entry.completion || {}; record.type = "normal", delete record.arg, entry.completion = record; } function Context(tryLocsList) { this.tryEntries = [{ tryLoc: "root" }], _forEachInstanceProperty(tryLocsList).call(tryLocsList, pushTryEntry, this), this.reset(!0); } function values(iterable) { if (iterable) { var iteratorMethod = iterable[iteratorSymbol]; if (iteratorMethod) return iteratorMethod.call(iterable); if ("function" == typeof iterable.next) return iterable; if (!isNaN(iterable.length)) { var i = -1, next = function next() { for (; ++i < iterable.length;) { if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next; } return next.value = undefined, next.done = !0, next; }; return next.next = next; } } return { next: doneResult }; } function doneResult() { return { value: undefined, done: !0 }; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, define(Gp, "constructor", GeneratorFunctionPrototype), define(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) { var ctor = "function" == typeof genFun && genFun.constructor; return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name)); }, exports.mark = function (genFun) { return _Object$setPrototypeOf ? _Object$setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = _Object$create(Gp), genFun; }, exports.awrap = function (arg) { return { __await: arg }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () { return this; }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) { void 0 === PromiseImpl && (PromiseImpl = _Promise); var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl); return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) { return result.done ? result.value : iter.next(); }); }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () { return this; }), define(Gp, "toString", function () { return "[object Generator]"; }), exports.keys = function (object) { var keys = []; for (var key in object) { keys.push(key); } return _reverseInstanceProperty(keys).call(keys), function next() { for (; keys.length;) { var key = keys.pop(); if (key in object) return next.value = key, next.done = !1, next; } return next.done = !0, next; }; }, exports.values = values, Context.prototype = { constructor: Context, reset: function reset(skipTempReset) { var _context9; if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, _forEachInstanceProperty(_context9 = this.tryEntries).call(_context9, resetTryEntry), !skipTempReset) for (var name in this) { "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+_sliceInstanceProperty(name).call(name, 1)) && (this[name] = undefined); } }, stop: function stop() { this.done = !0; var rootRecord = this.tryEntries[0].completion; if ("throw" === rootRecord.type) throw rootRecord.arg; return this.rval; }, dispatchException: function dispatchException(exception) { if (this.done) throw exception; var context = this; function handle(loc, caught) { return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught; } for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i], record = entry.completion; if ("root" === entry.tryLoc) return handle("end"); if (entry.tryLoc <= this.prev) { var hasCatch = hasOwn.call(entry, "catchLoc"), hasFinally = hasOwn.call(entry, "finallyLoc"); if (hasCatch && hasFinally) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } else if (hasCatch) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); } else { if (!hasFinally) throw new Error("try statement without catch or finally"); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } } } }, abrupt: function abrupt(type, arg) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) { var finallyEntry = entry; break; } } finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null); var record = finallyEntry ? finallyEntry.completion : {}; return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record); }, complete: function complete(record, afterLoc) { if ("throw" === record.type) throw record.arg; return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel; }, finish: function finish(finallyLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel; } }, "catch": function _catch(tryLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc === tryLoc) { var record = entry.completion; if ("throw" === record.type) { var thrown = record.arg; resetTryEntry(entry); } return thrown; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(iterable, resultName, nextLoc) { return this.delegate = { iterator: values(iterable), resultName: resultName, nextLoc: nextLoc }, "next" === this.method && (this.arg = undefined), ContinueSentinel; } }, exports; }
14
+ function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return exports; }; var exports = {}, Op = Object.prototype, hasOwn = Op.hasOwnProperty, defineProperty = _Object$defineProperty || function (obj, key, desc) { obj[key] = desc.value; }, $Symbol = "function" == typeof _Symbol ? _Symbol : {}, iteratorSymbol = $Symbol.iterator || "@@iterator", asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator", toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag"; function define(obj, key, value) { return _Object$defineProperty(obj, key, { value: value, enumerable: !0, configurable: !0, writable: !0 }), obj[key]; } try { define({}, ""); } catch (err) { define = function define(obj, key, value) { return obj[key] = value; }; } function wrap(innerFn, outerFn, self, tryLocsList) { var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator, generator = _Object$create(protoGenerator.prototype), context = new Context(tryLocsList || []); return defineProperty(generator, "_invoke", { value: makeInvokeMethod(innerFn, self, context) }), generator; } function tryCatch(fn, obj, arg) { try { return { type: "normal", arg: fn.call(obj, arg) }; } catch (err) { return { type: "throw", arg: err }; } } exports.wrap = wrap; var ContinueSentinel = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var IteratorPrototype = {}; define(IteratorPrototype, iteratorSymbol, function () { return this; }); var getProto = _Object$getPrototypeOf, NativeIteratorPrototype = getProto && getProto(getProto(values([]))); NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype); var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = _Object$create(IteratorPrototype); function defineIteratorMethods(prototype) { var _context8; _forEachInstanceProperty(_context8 = ["next", "throw", "return"]).call(_context8, function (method) { define(prototype, method, function (arg) { return this._invoke(method, arg); }); }); } function AsyncIterator(generator, PromiseImpl) { function invoke(method, arg, resolve, reject) { var record = tryCatch(generator[method], generator, arg); if ("throw" !== record.type) { var result = record.arg, value = result.value; return value && "object" == _typeof(value) && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) { invoke("next", value, resolve, reject); }, function (err) { invoke("throw", err, resolve, reject); }) : PromiseImpl.resolve(value).then(function (unwrapped) { result.value = unwrapped, resolve(result); }, function (error) { return invoke("throw", error, resolve, reject); }); } reject(record.arg); } var previousPromise; defineProperty(this, "_invoke", { value: function value(method, arg) { function callInvokeWithMethodAndArg() { return new PromiseImpl(function (resolve, reject) { invoke(method, arg, resolve, reject); }); } return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(innerFn, self, context) { var state = "suspendedStart"; return function (method, arg) { if ("executing" === state) throw new Error("Generator is already running"); if ("completed" === state) { if ("throw" === method) throw arg; return doneResult(); } for (context.method = method, context.arg = arg;;) { var delegate = context.delegate; if (delegate) { var delegateResult = maybeInvokeDelegate(delegate, context); if (delegateResult) { if (delegateResult === ContinueSentinel) continue; return delegateResult; } } if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) { if ("suspendedStart" === state) throw state = "completed", context.arg; context.dispatchException(context.arg); } else "return" === context.method && context.abrupt("return", context.arg); state = "executing"; var record = tryCatch(innerFn, self, context); if ("normal" === record.type) { if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue; return { value: record.arg, done: context.done }; } "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg); } }; } function maybeInvokeDelegate(delegate, context) { var methodName = context.method, method = delegate.iterator[methodName]; if (undefined === method) return context.delegate = null, "throw" === methodName && delegate.iterator["return"] && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method) || "return" !== methodName && (context.method = "throw", context.arg = new TypeError("The iterator does not provide a '" + methodName + "' method")), ContinueSentinel; var record = tryCatch(method, delegate.iterator, context.arg); if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel; var info = record.arg; return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel); } function pushTryEntry(locs) { var entry = { tryLoc: locs[0] }; 1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry); } function resetTryEntry(entry) { var record = entry.completion || {}; record.type = "normal", delete record.arg, entry.completion = record; } function Context(tryLocsList) { this.tryEntries = [{ tryLoc: "root" }], _forEachInstanceProperty(tryLocsList).call(tryLocsList, pushTryEntry, this), this.reset(!0); } function values(iterable) { if (iterable) { var iteratorMethod = iterable[iteratorSymbol]; if (iteratorMethod) return iteratorMethod.call(iterable); if ("function" == typeof iterable.next) return iterable; if (!isNaN(iterable.length)) { var i = -1, next = function next() { for (; ++i < iterable.length;) { if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next; } return next.value = undefined, next.done = !0, next; }; return next.next = next; } } return { next: doneResult }; } function doneResult() { return { value: undefined, done: !0 }; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, defineProperty(Gp, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), defineProperty(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) { var ctor = "function" == typeof genFun && genFun.constructor; return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name)); }, exports.mark = function (genFun) { return _Object$setPrototypeOf ? _Object$setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = _Object$create(Gp), genFun; }, exports.awrap = function (arg) { return { __await: arg }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () { return this; }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) { void 0 === PromiseImpl && (PromiseImpl = _Promise); var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl); return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) { return result.done ? result.value : iter.next(); }); }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () { return this; }), define(Gp, "toString", function () { return "[object Generator]"; }), exports.keys = function (val) { var object = Object(val), keys = []; for (var key in object) { keys.push(key); } return _reverseInstanceProperty(keys).call(keys), function next() { for (; keys.length;) { var key = keys.pop(); if (key in object) return next.value = key, next.done = !1, next; } return next.done = !0, next; }; }, exports.values = values, Context.prototype = { constructor: Context, reset: function reset(skipTempReset) { var _context9; if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, _forEachInstanceProperty(_context9 = this.tryEntries).call(_context9, resetTryEntry), !skipTempReset) for (var name in this) { "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+_sliceInstanceProperty(name).call(name, 1)) && (this[name] = undefined); } }, stop: function stop() { this.done = !0; var rootRecord = this.tryEntries[0].completion; if ("throw" === rootRecord.type) throw rootRecord.arg; return this.rval; }, dispatchException: function dispatchException(exception) { if (this.done) throw exception; var context = this; function handle(loc, caught) { return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught; } for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i], record = entry.completion; if ("root" === entry.tryLoc) return handle("end"); if (entry.tryLoc <= this.prev) { var hasCatch = hasOwn.call(entry, "catchLoc"), hasFinally = hasOwn.call(entry, "finallyLoc"); if (hasCatch && hasFinally) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } else if (hasCatch) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); } else { if (!hasFinally) throw new Error("try statement without catch or finally"); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } } } }, abrupt: function abrupt(type, arg) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) { var finallyEntry = entry; break; } } finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null); var record = finallyEntry ? finallyEntry.completion : {}; return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record); }, complete: function complete(record, afterLoc) { if ("throw" === record.type) throw record.arg; return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel; }, finish: function finish(finallyLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel; } }, "catch": function _catch(tryLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc === tryLoc) { var record = entry.completion; if ("throw" === record.type) { var thrown = record.arg; resetTryEntry(entry); } return thrown; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(iterable, resultName, nextLoc) { return this.delegate = { iterator: values(iterable), resultName: resultName, nextLoc: nextLoc }, "next" === this.method && (this.arg = undefined), ContinueSentinel; } }, exports; }
15
15
  import React from 'react';
16
16
  import { FocusScope } from 'react-aria';
17
17
  import { Item } from 'react-stately';
@@ -2,7 +2,6 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
2
2
  import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
3
3
  var _excluded = ["size"];
4
4
  import React, { forwardRef } from 'react';
5
- import PropTypes from 'prop-types';
6
5
  import Box from '../Box';
7
6
  import { jsx as ___EmotionJSX } from "@emotion/react";
8
7
  var Loader = /*#__PURE__*/forwardRef(function (props, ref) {
@@ -24,17 +23,4 @@ var Loader = /*#__PURE__*/forwardRef(function (props, ref) {
24
23
  variant: "loader.dotRight"
25
24
  }));
26
25
  });
27
- Loader.propTypes = {
28
- /**
29
- * Color key from theme or string value.
30
- * Default color inherits the font color.
31
- */
32
- color: PropTypes.string,
33
- /**
34
- * Size as number or pixel / em / rem value.
35
- * Sizes can either be a string such as xs, sm, md, etc or numeric size with unit such as 15px.
36
- * Default size inherits the font size.
37
- */
38
- size: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
39
- };
40
26
  export default Loader;
@@ -0,0 +1,29 @@
1
+ import { Meta } from '@storybook/addon-docs';
2
+
3
+ <Meta title="Components/Loader/Loader" />
4
+
5
+ # Loader
6
+
7
+ The Loader component provides users information about the loading or computing processes that are occurring.
8
+
9
+ This component should be:
10
+ - Used to show an indeterminate state.
11
+ - Restricted to a single use per view to avoid unnecessary disruption.
12
+
13
+ It should not be used:
14
+ - When the wait time for a process is known.
15
+ - When trying to communicate progression in steps.
16
+
17
+ The Loader component is based on the [useProgressBar](https://react-spectrum.adobe.com/react-aria/useProgressBar.html) React Aria component.
18
+
19
+ ### Required Components
20
+
21
+ This component can be used independently and does not require additional components.
22
+
23
+ ### Accessibility
24
+
25
+ #### Screen readers
26
+
27
+ This component uses the following attributes to assist screen readers:
28
+ - The **`aria-label`** attribute is used to provide an accessible name.
29
+ - The **`aria-live`** attribute is used to announce content changes in a live region.
@@ -0,0 +1,43 @@
1
+ import { Meta } from '@storybook/addon-docs';
2
+
3
+ <Meta title="Components/Menu/Menu" />
4
+
5
+ # Menu
6
+
7
+ The Menu component is intended to be used as a wrapper for MenuItems. It is based on the [useMenu](https://react-spectrum.adobe.com/react-aria/useMenu.html)
8
+ React Aria component, and is often used in a [PopoverMenu](./?path=/story/components-popovermenu--default).
9
+
10
+ Menus should:
11
+ - Only contain the most relevant categories for a quick scan.
12
+ - Be used to view actions and not content.
13
+
14
+ Menus shouldn’t:
15
+ - Display more than 5 items to easily interpret the scope of actions.
16
+ - Include ellipses (…) in menu item names. An ellipsis indicates that the user action prompt opens a new window.
17
+
18
+ ### Required Components
19
+
20
+ This component requires the Item component, which is exported within Astro, but originates from [react-stately/collections](https://react-spectrum.adobe.com/react-stately/collections.html).
21
+
22
+ ### Accessibility
23
+
24
+ This component should adhere to the [WAI-ARIA Menu](https://www.w3.org/WAI/tutorials/menus/) accessibility guidelines.
25
+
26
+ #### Keyboard Navigation
27
+
28
+ These keys provide additional functionality to the component.
29
+
30
+ | Key | Functions |
31
+ | ---- | ---- |
32
+ | Space or Enter | Selects the menu item. |
33
+ | Tab | Focuses the menu item and follows the page tab sequence. |
34
+ | Shift + Tab | Moves focus to the previous focusable component. |
35
+ | Home(Fn + Right Arrow Key) Or Control/Command + Home| Shifts the focus to the first row. |
36
+ | End(Fn + Left Arrow Key) Or Control/Command + End | Shifts the focus to the last visible row. |
37
+
38
+ #### Screen Readers
39
+
40
+ This component uses the following attributes to assist screen readers:
41
+ - The **`aria-label`** attribute is used to provide an accessible name.
42
+ - Each menu option has the default **`aria-disabled`** value as “False.”
43
+ - The **`aria-orientation`** attribute indicates whether the menu is horizontally or vertically oriented, or undefined.
@@ -0,0 +1,35 @@
1
+ import { Meta } from '@storybook/addon-docs';
2
+
3
+ <Meta title="Components/Messages/Messages" />
4
+
5
+ # Messages
6
+
7
+ Use this component to display warning or alert messages, which often highlight an imminent problem or confirm a risky action.
8
+
9
+ These messages should:
10
+ - Capture the user’s attention at the right time.
11
+ - Clearly explain the reason for the warning or alert and the actions the user needs to take.
12
+ - Explain what will happen if they don’t act, using the appropriate sense of urgency.
13
+ - Be short. Limit the number of alerts to one per component.
14
+
15
+ See our [Warning and alert messages writing guidelines](https://pingidentity.atlassian.net/wiki/spaces/CCC/pages/21137295/Warning+and+alert+messages) for additional information.
16
+
17
+ ### Required Components
18
+
19
+ This component requires the Item component, which is exported within Astro, but originates from [react-stately/collections](https://react-spectrum.adobe.com/react-stately/collections.html).
20
+
21
+ ### Accessibility
22
+
23
+ #### Keyboard Navigation
24
+
25
+ These keys provide additional functionality to the component.
26
+
27
+ | Key | Functions |
28
+ | ---- | ---- |
29
+ | Tab | Focuses the IconButton within the message and follows the page tab sequence. |
30
+ | Space or Enter | Selects the button when it is focused. |
31
+ | Shift + Tab | Moves focus to the previous focusable component. |
32
+
33
+ #### Screen Readers
34
+
35
+ The **`aria-live`** attribute is used to announce content changes in a live region.
@@ -0,0 +1,59 @@
1
+ import { Meta } from '@storybook/addon-docs';
2
+
3
+ <Meta title="Components/Modal/Modal" />
4
+
5
+ # Modal
6
+
7
+ Modals (also known as modal windows, overlays, and dialogs) are large UI elements that sit on top of an application's main window.
8
+ To return to the application's main interface, users must interact with the modal.
9
+
10
+ This component must be wrapped in an OverlayProvider and the first child component should be a trigger, such as a button.
11
+
12
+ If the modal is used to display an error message, it displays after users perform an action and require a response.
13
+ These messages should be short, meaningful, free of technical jargon, and follow status color guidelines.
14
+ They can also be used to educate users, but don’t try to explain complicated troubleshooting processes in error messages.
15
+
16
+ Error messages should clearly explain:
17
+ - What happened
18
+ - Why it happened, if that’s relevant
19
+ - The steps users should take to resolve the issue
20
+
21
+ See our [Error message writing guidelines](https://pingidentity.atlassian.net/wiki/spaces/CCC/pages/21137273/Error+messages) for additional information.
22
+
23
+ Modals should:
24
+ - Be used for important warnings and information requests as a way to prevent or correct critical errors.
25
+ - Be used to break down complex workflow to not overwhelm the user.
26
+ - Have all the critical information inside it to help users make decisions.
27
+
28
+ Modals should not:
29
+ - Be nested inside or replaced by another modal.
30
+ - Be overused as it disrupts the user’s workflow and requires a response.
31
+ - Have content that requires scrolling. If the content length is exceedingly large or requires complex forms, use the [OverlayPanel](./?path=/docs/components-overlaypanel--default) component.
32
+ - Be used for brief warnings and alerts, use the [Messages](./?path=/docs/components-messages--default) component instead.
33
+
34
+ ### Required Components
35
+
36
+ This component requires the OverlayProvider and [Button](./?path=/docs/components-button--default) components.
37
+
38
+ ### Accessibility
39
+
40
+ This component should adhere to the [WAI-ARIA Modal](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog/) accessibility guidelines.
41
+
42
+ #### Keyboard Navigation
43
+
44
+ These keys provide additional functionality to the component.
45
+
46
+ | Key | Functions |
47
+ | ---- | ---- |
48
+ | Tab | The trigger component and the content in the modal are focusable using the Tab key. |
49
+ | | When a modal opens, focus moves to an element contained in the modal, which is usually the first focusable element. If the first focusable element does not make sense, tabindex=”-1” should be added to a static element at the top of the modal, which could be the panel title. |
50
+ | Space or Enter | Opens the modal when the trigger is focused. Once opened, the focus is locked inside the modal. |
51
+ | Shift + Tab | Moves focus to the previous focusable component. |
52
+ | Esc | Pressing the escape key closes the modal and adds focus to the previously focused component. |
53
+
54
+ #### Screen Readers
55
+
56
+ This component uses the following attributes to assist screen readers:
57
+ - The button uses the **`aria-label`** attribute to provide an accessible name.
58
+ - The **`aria-labelledby`** attribute is supplied with label ID.
59
+ - The **`aria-modal`** attribute allows the assistive technologies to inform users that the ability to interact with or access other content on the page requires the modal dialog to be closed.