@pingux/astro 2.9.2 → 2.13.0-alpha.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -2
- package/lib/README.md +6 -2
- package/lib/cjs/components/AccordionGridGroup/AccordionGridGroup.mdx +40 -0
- package/lib/cjs/components/AccordionGridGroup/AccordionGridGroup.test.js +2 -2
- package/lib/cjs/components/AccordionGroup/Accordion.styles.js +1 -2
- package/lib/cjs/components/AccordionGroup/AccordionGroup.js +4 -5
- package/lib/cjs/components/AccordionGroup/AccordionGroup.mdx +41 -0
- package/lib/cjs/components/ArrayField/ArrayField.mdx +34 -0
- package/lib/cjs/components/AstroWrapper/AstroWrapper.mdx +16 -0
- package/lib/cjs/components/Avatar/Avatar.mdx +14 -0
- package/lib/cjs/components/Badge/Badge.mdx +24 -0
- package/lib/cjs/components/Box/Box.d.ts +4 -0
- package/lib/cjs/components/Box/Box.js +4 -19
- package/lib/cjs/components/Box/Box.mdx +23 -0
- package/lib/cjs/components/Box/Box.styles.d.ts +6 -0
- package/lib/cjs/components/Box/Box.test.d.ts +1 -0
- package/lib/cjs/components/Box/Box.test.js +2 -6
- package/lib/cjs/components/Box/index.d.ts +1 -0
- package/lib/cjs/components/Bracket/Bracket.mdx +17 -0
- package/lib/cjs/components/Breadcrumbs/Breadcrumbs.mdx +40 -0
- package/lib/cjs/components/Button/Button.mdx +40 -0
- package/lib/cjs/components/Button/Button.stories.js +30 -5
- package/lib/cjs/components/Button/Buttons.styles.js +25 -7
- package/lib/cjs/components/Calendar/Calendar.mdx +39 -0
- package/lib/cjs/components/Calendar/Calendar.test.js +2 -2
- package/lib/cjs/components/Calendar/CalendarCell.js +2 -3
- package/lib/cjs/components/Calendar/CalendarGrid.js +1 -3
- package/lib/cjs/components/Callout/Callout.mdx +28 -0
- package/lib/cjs/components/Card/Card.mdx +32 -0
- package/lib/cjs/components/Checkbox/Checkbox.js +1 -2
- package/lib/cjs/components/Checkbox/CheckboxBase.js +1 -2
- package/lib/cjs/components/CheckboxField/CheckboxField.mdx +42 -0
- package/lib/cjs/components/CodeView/CodeView.mdx +23 -0
- package/lib/cjs/components/CodeView/CodeView.test.js +1 -1
- package/lib/cjs/components/CollapsiblePanel/CollapsiblePanel.mdx +29 -0
- package/lib/cjs/components/CollapsiblePanelContainer/CollapsiblePanelBadge.js +0 -1
- package/lib/cjs/components/CollapsiblePanelContainer/CollapsiblePanelContainer.js +2 -3
- package/lib/cjs/components/ColorField/ColorField.mdx +38 -0
- package/lib/cjs/components/ComboBoxField/ComboBoxField.mdx +66 -0
- package/lib/cjs/components/ComboBoxField/ComboBoxField.stories.js +1 -1
- package/lib/cjs/components/ComboBoxField/ComboBoxField.test.js +2 -2
- package/lib/cjs/components/CopyText/CopyText.mdx +23 -0
- package/lib/cjs/components/CopyText/CopyText.test.js +1 -1
- package/lib/cjs/components/DataTable/DataTable.mdx +54 -0
- package/lib/cjs/components/DataTable/DataTable.stories.js +1 -1
- package/lib/cjs/components/DataTable/DataTable.test.js +2 -2
- package/lib/cjs/components/DataTable/DataTableVirtualizer.js +2 -3
- package/lib/cjs/components/DatePicker/DateField.js +4 -5
- package/lib/cjs/components/DatePicker/DatePicker.js +4 -6
- package/lib/cjs/components/DatePicker/DatePicker.mdx +49 -0
- package/lib/cjs/components/DatePicker/DatePicker.test.js +2 -2
- package/lib/cjs/components/DatePicker/DateSegment.js +1 -2
- package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js +3 -3
- package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.mdx +36 -0
- package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.stories.js +29 -45
- package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.test.js +1 -1
- package/lib/cjs/components/FieldHelperText/FieldHelperText.js +4 -4
- package/lib/cjs/components/FileInputField/FileInputField.mdx +33 -0
- package/lib/cjs/components/HelpHint/HelpHint.js +145 -27
- package/lib/cjs/components/HelpHint/HelpHint.mdx +32 -0
- package/lib/cjs/components/HelpHint/HelpHint.stories.js +40 -7
- package/lib/cjs/components/HelpHint/HelpHint.styles.js +9 -1
- package/lib/cjs/components/HelpHint/HelpHint.test.js +213 -30
- package/lib/cjs/components/Icon/Icon.d.ts +4 -0
- package/lib/cjs/components/Icon/Icon.js +4 -27
- package/lib/cjs/components/Icon/Icon.mdx +49 -0
- package/lib/cjs/components/Icon/Icon.stories.d.ts +8 -0
- package/lib/cjs/components/Icon/Icon.test.d.ts +1 -0
- package/lib/cjs/components/Icon/index.d.ts +1 -0
- package/lib/cjs/components/IconBadge/IconBadge.mdx +14 -0
- package/lib/cjs/components/IconButton/IconButton.mdx +33 -0
- package/lib/cjs/components/IconButtonToggle/IconButtonToggle.mdx +31 -0
- package/lib/cjs/components/Image/Image.mdx +28 -0
- package/lib/cjs/components/ImageUploadField/ImageUploadField.mdx +38 -0
- package/lib/cjs/components/ImageUploadField/ImageUploadField.stories.js +1 -1
- package/lib/cjs/components/ImageUploadField/ImageUploadField.test.js +2 -2
- package/lib/cjs/components/Input/Input.js +2 -3
- package/lib/cjs/components/Label/Label.styles.js +1 -1
- package/lib/cjs/components/Link/Link.mdx +27 -0
- package/lib/cjs/components/Link/Link.styles.js +10 -0
- package/lib/cjs/components/LinkSelectField/LinkSelectField.mdx +47 -0
- package/lib/cjs/components/LinkSelectField/LinkSelectField.stories.js +1 -1
- package/lib/cjs/components/LinkSelectField/LinkSelectField.test.js +2 -2
- package/lib/cjs/components/ListBox/ListBox.test.js +2 -2
- package/lib/cjs/components/ListItem/ListItem.mdx +21 -0
- package/lib/cjs/components/ListView/ListView.mdx +44 -0
- package/lib/cjs/components/ListView/ListView.stories.js +95 -49
- package/lib/cjs/components/ListView/ListView.test.js +2 -2
- package/lib/cjs/components/Loader/Loader.d.ts +4 -0
- package/lib/cjs/components/Loader/Loader.js +0 -14
- package/lib/cjs/components/Loader/Loader.mdx +29 -0
- package/lib/cjs/components/Loader/Loader.styles.d.ts +53 -0
- package/lib/cjs/components/Loader/Loader.test.d.ts +1 -0
- package/lib/cjs/components/Loader/index.d.ts +1 -0
- package/lib/cjs/components/Menu/Menu.mdx +43 -0
- package/lib/cjs/components/MenuItem/MenuItem.js +2 -3
- package/lib/cjs/components/Messages/Messages.mdx +35 -0
- package/lib/cjs/components/Modal/Modal.mdx +59 -0
- package/lib/cjs/components/Modal/tests/Modal.integration.test.js +1 -2
- package/lib/cjs/components/MultivaluesField/MultivaluesField.js +43 -9
- package/lib/cjs/components/MultivaluesField/MultivaluesField.mdx +44 -0
- package/lib/cjs/components/MultivaluesField/MultivaluesField.test.js +3 -3
- package/lib/cjs/components/NavBar/NavBar.mdx +42 -0
- package/lib/cjs/components/NavBarSection/NavBarSection.js +2 -3
- package/lib/cjs/components/NumberField/NumberField.mdx +39 -0
- package/lib/cjs/components/OverlayPanel/OverlayPanel.mdx +39 -0
- package/lib/cjs/components/PasswordField/PasswordField.mdx +33 -0
- package/lib/cjs/components/PasswordField/PasswordField.test.js +2 -3
- package/lib/cjs/components/PopoverContainer/PopoverContainer.d.ts +9 -0
- package/lib/cjs/components/PopoverContainer/PopoverContainer.js +10 -42
- package/lib/cjs/components/PopoverContainer/index.d.ts +2 -0
- package/lib/cjs/components/PopoverMenu/PopoverMenu.mdx +53 -0
- package/lib/cjs/components/Radio/Radio.js +1 -2
- package/lib/cjs/components/RadioGroupField/RadioGroupField.mdx +41 -0
- package/lib/cjs/components/RadioGroupField/RadioGroupField.test.js +2 -2
- package/lib/cjs/components/RequirementsList/RequirementsList.mdx +17 -0
- package/lib/cjs/components/RockerButtonGroup/RockerButtonGroup.mdx +36 -0
- package/lib/cjs/components/ScrollBox/ScrollBox.mdx +17 -0
- package/lib/cjs/components/SearchField/SearchField.mdx +33 -0
- package/lib/cjs/components/SelectField/Select.styles.js +1 -1
- package/lib/cjs/components/SelectField/SelectField.mdx +46 -0
- package/lib/cjs/components/SelectField/SelectField.stories.js +1 -1
- package/lib/cjs/components/SelectFieldBase/SelectFieldBase.js +4 -4
- package/lib/cjs/components/SelectFieldBase/SelectFieldBase.test.js +2 -2
- package/lib/cjs/components/Separator/Separator.mdx +19 -0
- package/lib/cjs/components/Stepper/Stepper.mdx +41 -0
- package/lib/cjs/components/Stepper/Stepper.styles.js +1 -1
- package/lib/cjs/components/Stepper/Stepper.test.js +2 -3
- package/lib/cjs/components/Switch/Switch.js +1 -2
- package/lib/cjs/components/SwitchField/SwitchField.js +1 -0
- package/lib/cjs/components/SwitchField/SwitchField.mdx +36 -0
- package/lib/cjs/components/Tab/Tab.js +2 -3
- package/lib/cjs/components/TabPicker/TabPicker.js +1 -1
- package/lib/cjs/components/Table/Table.mdx +30 -0
- package/lib/cjs/components/TableBody/TableBody.js +0 -1
- package/lib/cjs/components/TableCaption/TableCaption.js +0 -1
- package/lib/cjs/components/TableCell/TableCell.d.ts +12 -0
- package/lib/cjs/components/TableCell/TableCell.js +0 -6
- package/lib/cjs/components/TableCell/TableCell.test.d.ts +1 -0
- package/lib/cjs/components/TableCell/index.d.ts +1 -0
- package/lib/cjs/components/TableHead/TableHead.js +0 -1
- package/lib/cjs/components/TableRow/TableRow.js +0 -1
- package/lib/cjs/components/Tabs/Tabs.mdx +40 -0
- package/lib/cjs/components/Tabs/Tabs.test.js +3 -4
- package/lib/cjs/components/Text/Text.d.ts +4 -0
- package/lib/cjs/components/Text/Text.js +3 -7
- package/lib/cjs/components/Text/Text.mdx +13 -0
- package/lib/cjs/components/Text/Text.stories.d.ts +6 -0
- package/lib/cjs/components/Text/Text.styles.d.ts +286 -0
- package/lib/cjs/components/Text/Text.test.d.ts +1 -0
- package/lib/cjs/components/Text/index.d.ts +1 -0
- package/lib/cjs/components/TextArea/TextArea.js +1 -3
- package/lib/cjs/components/TextAreaField/TextAreaField.mdx +34 -0
- package/lib/cjs/components/TextField/TextField.js +1 -1
- package/lib/cjs/components/TextField/TextField.mdx +34 -0
- package/lib/cjs/components/TimeZonePicker/TimeZonePicker.mdx +18 -0
- package/lib/cjs/components/TooltipTrigger/Tooltip.styles.js +2 -1
- package/lib/cjs/components/TooltipTrigger/TooltipTrigger.js +2 -0
- package/lib/cjs/components/TooltipTrigger/TooltipTrigger.mdx +23 -0
- package/lib/cjs/components/TooltipTrigger/TooltipTrigger.test.js +47 -1
- package/lib/cjs/docs/Props.stories.mdx +35 -0
- package/lib/cjs/docs/Welcome.stories.mdx +149 -0
- package/lib/cjs/docs/hooks/useDebounce.stories.mdx +59 -0
- package/lib/cjs/docs/hooks/useModalState.stories.mdx +83 -0
- package/lib/cjs/docs/hooks/useOverlayPanelState.stories.mdx +84 -0
- package/lib/cjs/docs/theme/AstroNanoTheme.stories.mdx +174 -0
- package/lib/cjs/docs/theme/AstroTheme.stories.mdx +20 -0
- package/lib/cjs/docs/theme/CustomThemes.stories.mdx +70 -0
- package/lib/cjs/docs/theme/StylingGuideline.stories.mdx +116 -0
- package/lib/cjs/docs/utils/messagesReducer.stories.mdx +64 -0
- package/lib/cjs/experimental/EditButton/EditButton.js +63 -0
- package/lib/cjs/experimental/EditButton/EditButton.mdx +9 -0
- package/lib/cjs/experimental/EditButton/EditButton.stories.js +91 -0
- package/lib/cjs/experimental/EditButton/EditButton.test.js +71 -0
- package/lib/cjs/experimental/EditButton/index.js +14 -0
- package/lib/cjs/experimental/ListView/ListView.mdx +47 -0
- package/lib/cjs/experimental/ListView/ListView.stories.js +742 -0
- package/lib/cjs/experimental/ListViewItem/ListViewItem.js +23 -5
- package/lib/cjs/experimental/ListViewItem/ListViewItem.mdx +36 -0
- package/lib/cjs/experimental/ListViewItem/ListViewItem.stories.js +31 -7
- package/lib/cjs/experimental/ListViewItem/ListViewItem.test.js +51 -7
- package/lib/cjs/experimental/ListViewItem/controls/ListViewItemEditButton.js +2 -7
- package/lib/cjs/experimental/ListViewItem/controls/ListViewItemEditButton.stories.js +4 -1
- package/lib/cjs/experimental/ListViewItem/controls/ListViewItemMenu.js +0 -1
- package/lib/cjs/experimental/ListViewItem/controls/ListViewItemMenu.test.js +2 -2
- package/lib/cjs/experimental/ListViewItem/controls/ListViewItemSwitchField.js +2 -3
- package/lib/cjs/experimental/ListViewItem/listViewItemAttributes.js +28 -13
- package/lib/cjs/experimental/PanelHeader/PanelHeader.js +88 -0
- package/lib/cjs/experimental/PanelHeader/PanelHeader.mdx +19 -0
- package/lib/cjs/experimental/PanelHeader/PanelHeader.stories.js +71 -0
- package/lib/cjs/experimental/PanelHeader/PanelHeader.styles.js +38 -0
- package/lib/cjs/experimental/PanelHeader/PanelHeader.test.js +46 -0
- package/lib/cjs/experimental/PanelHeader/controls/PanelHeaderCloseButton.js +32 -0
- package/lib/cjs/experimental/PanelHeader/controls/PanelHeaderCloseButton.stories.js +31 -0
- package/lib/cjs/experimental/PanelHeader/controls/PanelHeaderCloseButton.test.js +25 -0
- package/lib/cjs/experimental/PanelHeader/controls/PanelHeaderMenu.js +25 -0
- package/lib/cjs/experimental/PanelHeader/controls/PanelHeaderMenu.stories.js +36 -0
- package/lib/cjs/experimental/PanelHeader/controls/PanelHeaderMenu.test.js +58 -0
- package/lib/cjs/experimental/PanelHeader/controls/PanelHeaderSwitchField.js +25 -0
- package/lib/cjs/experimental/PanelHeader/controls/PanelHeaderSwitchField.stories.js +41 -0
- package/lib/cjs/experimental/PanelHeader/controls/PanelHeaderSwitchField.test.js +25 -0
- package/lib/cjs/experimental/PanelHeader/index.js +14 -0
- package/lib/cjs/experimental/README.stories.mdx +7 -0
- package/lib/cjs/experimental/SaveBar/SaveBar.mdx +13 -0
- package/lib/cjs/experimental/recipes/ListAndPanel.stories.js +1 -1
- package/lib/cjs/hooks/useComponentToggle/useComponentToggle.test.js +2 -2
- package/lib/cjs/hooks/useCopyToClipboard/useCopyToClipboard.js +2 -2
- package/lib/cjs/hooks/useCopyToClipboard/useCopyToClipboard.test.js +1 -1
- package/lib/cjs/hooks/useOverlappingMenuHoverState/useOverlappingMenuHoverState.test.js +2 -2
- package/lib/cjs/hooks/usePropWarning/usePropWarning.js +1 -1
- package/lib/cjs/hooks/useStatusClasses/useStatusClasses.js +2 -2
- package/lib/cjs/hooks/useTShirtSize/useTShirtSize.js +1 -1
- package/lib/cjs/index.d.ts +173 -0
- package/lib/cjs/index.js +53 -1
- package/lib/cjs/recipes/ApplicationSearchDropdown.stories.hidden.js +1 -1
- package/lib/cjs/recipes/{AttributesAndPingOneMapping.stories.js → AttributeMapping.stories.js} +392 -132
- package/lib/cjs/recipes/Slider.stories.js +1 -1
- package/lib/cjs/styles/colors.js +1 -1
- package/lib/cjs/styles/forms/index.js +1 -1
- package/lib/cjs/styles/variants/README.md +98 -0
- package/lib/cjs/styles/variants/variants.js +2 -0
- package/lib/cjs/types/box.d.ts +10 -0
- package/lib/cjs/types/box.js +6 -0
- package/lib/cjs/types/icon.d.ts +34 -0
- package/lib/cjs/types/icon.js +6 -0
- package/lib/cjs/types/index.d.ts +7 -0
- package/lib/cjs/types/index.js +86 -0
- package/lib/cjs/types/loader.d.ts +14 -0
- package/lib/cjs/types/loader.js +6 -0
- package/lib/cjs/types/mdx.d.js +1 -0
- package/lib/cjs/types/popoverContainer.d.ts +23 -0
- package/lib/cjs/types/popoverContainer.js +6 -0
- package/lib/cjs/types/shared/dom.d.ts +9 -0
- package/lib/cjs/types/shared/dom.js +6 -0
- package/lib/cjs/types/shared/index.d.ts +3 -0
- package/lib/cjs/types/shared/index.js +42 -0
- package/lib/cjs/types/shared/style.d.ts +11 -0
- package/lib/cjs/types/shared/style.js +6 -0
- package/lib/cjs/types/shared/test.d.ts +3 -0
- package/lib/cjs/types/shared/test.js +6 -0
- package/lib/cjs/types/shared/utils.d.ts +1 -0
- package/lib/cjs/types/shared/utils.js +6 -0
- package/lib/cjs/types/tableCell.d.ts +5 -0
- package/lib/cjs/types/tableCell.js +6 -0
- package/lib/cjs/types/text.d.ts +3 -0
- package/lib/cjs/types/text.js +6 -0
- package/lib/cjs/utils/designUtils/figmaLinks.js +2 -1
- package/lib/cjs/utils/devUtils/constants/variants.js +1 -2
- package/lib/cjs/utils/testUtils/testAxe.js +2 -2
- package/lib/cjs/utils/testUtils/testWrapper.js +2 -0
- package/lib/components/AccordionGridGroup/AccordionGridGroup.mdx +40 -0
- package/lib/components/AccordionGridGroup/AccordionGridGroup.test.js +2 -2
- package/lib/components/AccordionGroup/Accordion.styles.js +1 -2
- package/lib/components/AccordionGroup/AccordionGroup.mdx +41 -0
- package/lib/components/ArrayField/ArrayField.mdx +34 -0
- package/lib/components/AstroWrapper/AstroWrapper.mdx +16 -0
- package/lib/components/Avatar/Avatar.mdx +14 -0
- package/lib/components/Badge/Badge.mdx +24 -0
- package/lib/components/Box/Box.js +4 -19
- package/lib/components/Box/Box.mdx +23 -0
- package/lib/components/Box/Box.test.js +2 -6
- package/lib/components/Bracket/Bracket.mdx +17 -0
- package/lib/components/Breadcrumbs/Breadcrumbs.mdx +40 -0
- package/lib/components/Button/Button.mdx +40 -0
- package/lib/components/Button/Button.stories.js +30 -5
- package/lib/components/Button/Buttons.styles.js +25 -7
- package/lib/components/Calendar/Calendar.mdx +39 -0
- package/lib/components/Calendar/Calendar.test.js +2 -2
- package/lib/components/Callout/Callout.mdx +28 -0
- package/lib/components/Card/Card.mdx +32 -0
- package/lib/components/CheckboxField/CheckboxField.mdx +42 -0
- package/lib/components/CodeView/CodeView.mdx +23 -0
- package/lib/components/CodeView/CodeView.test.js +1 -1
- package/lib/components/CollapsiblePanel/CollapsiblePanel.mdx +29 -0
- package/lib/components/ColorField/ColorField.mdx +38 -0
- package/lib/components/ComboBoxField/ComboBoxField.mdx +66 -0
- package/lib/components/ComboBoxField/ComboBoxField.stories.js +1 -1
- package/lib/components/ComboBoxField/ComboBoxField.test.js +2 -2
- package/lib/components/CopyText/CopyText.mdx +23 -0
- package/lib/components/CopyText/CopyText.test.js +1 -1
- package/lib/components/DataTable/DataTable.mdx +54 -0
- package/lib/components/DataTable/DataTable.stories.js +1 -1
- package/lib/components/DataTable/DataTable.test.js +1 -1
- package/lib/components/DatePicker/DatePicker.mdx +49 -0
- package/lib/components/DatePicker/DatePicker.test.js +2 -2
- package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js +3 -3
- package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.mdx +36 -0
- package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.stories.js +29 -45
- package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.test.js +1 -1
- package/lib/components/FileInputField/FileInputField.mdx +33 -0
- package/lib/components/HelpHint/HelpHint.js +148 -30
- package/lib/components/HelpHint/HelpHint.mdx +32 -0
- package/lib/components/HelpHint/HelpHint.stories.js +37 -6
- package/lib/components/HelpHint/HelpHint.styles.js +9 -1
- package/lib/components/HelpHint/HelpHint.test.js +213 -30
- package/lib/components/Icon/Icon.js +2 -25
- package/lib/components/Icon/Icon.mdx +49 -0
- package/lib/components/IconBadge/IconBadge.mdx +14 -0
- package/lib/components/IconButton/IconButton.mdx +33 -0
- package/lib/components/IconButtonToggle/IconButtonToggle.mdx +31 -0
- package/lib/components/Image/Image.mdx +28 -0
- package/lib/components/ImageUploadField/ImageUploadField.mdx +38 -0
- package/lib/components/ImageUploadField/ImageUploadField.stories.js +1 -1
- package/lib/components/ImageUploadField/ImageUploadField.test.js +2 -2
- package/lib/components/Link/Link.mdx +27 -0
- package/lib/components/Link/Link.styles.js +10 -0
- package/lib/components/LinkSelectField/LinkSelectField.mdx +47 -0
- package/lib/components/LinkSelectField/LinkSelectField.stories.js +1 -1
- package/lib/components/LinkSelectField/LinkSelectField.test.js +2 -2
- package/lib/components/ListBox/ListBox.test.js +2 -2
- package/lib/components/ListItem/ListItem.mdx +21 -0
- package/lib/components/ListView/ListView.mdx +44 -0
- package/lib/components/ListView/ListView.stories.js +96 -50
- package/lib/components/ListView/ListView.test.js +2 -2
- package/lib/components/Loader/Loader.js +0 -14
- package/lib/components/Loader/Loader.mdx +29 -0
- package/lib/components/Menu/Menu.mdx +43 -0
- package/lib/components/Messages/Messages.mdx +35 -0
- package/lib/components/Modal/Modal.mdx +59 -0
- package/lib/components/MultivaluesField/MultivaluesField.js +43 -9
- package/lib/components/MultivaluesField/MultivaluesField.mdx +44 -0
- package/lib/components/MultivaluesField/MultivaluesField.test.js +3 -3
- package/lib/components/NavBar/NavBar.mdx +42 -0
- package/lib/components/NumberField/NumberField.mdx +39 -0
- package/lib/components/OverlayPanel/OverlayPanel.mdx +39 -0
- package/lib/components/PasswordField/PasswordField.mdx +33 -0
- package/lib/components/PasswordField/PasswordField.test.js +2 -2
- package/lib/components/PopoverContainer/PopoverContainer.js +7 -38
- package/lib/components/PopoverMenu/PopoverMenu.mdx +53 -0
- package/lib/components/RadioGroupField/RadioGroupField.mdx +41 -0
- package/lib/components/RadioGroupField/RadioGroupField.test.js +2 -2
- package/lib/components/RequirementsList/RequirementsList.mdx +17 -0
- package/lib/components/RockerButtonGroup/RockerButtonGroup.mdx +36 -0
- package/lib/components/ScrollBox/ScrollBox.mdx +17 -0
- package/lib/components/SearchField/SearchField.mdx +33 -0
- package/lib/components/SelectField/SelectField.mdx +46 -0
- package/lib/components/SelectField/SelectField.stories.js +1 -1
- package/lib/components/SelectFieldBase/SelectFieldBase.test.js +2 -2
- package/lib/components/Separator/Separator.mdx +19 -0
- package/lib/components/Stepper/Stepper.mdx +41 -0
- package/lib/components/Stepper/Stepper.test.js +2 -2
- package/lib/components/SwitchField/SwitchField.mdx +36 -0
- package/lib/components/Table/Table.mdx +30 -0
- package/lib/components/TableCell/TableCell.js +0 -5
- package/lib/components/Tabs/Tabs.mdx +40 -0
- package/lib/components/Tabs/Tabs.test.js +2 -2
- package/lib/components/Text/Text.js +3 -7
- package/lib/components/Text/Text.mdx +13 -0
- package/lib/components/TextAreaField/TextAreaField.mdx +34 -0
- package/lib/components/TextField/TextField.js +1 -1
- package/lib/components/TextField/TextField.mdx +34 -0
- package/lib/components/TimeZonePicker/TimeZonePicker.mdx +18 -0
- package/lib/components/TooltipTrigger/Tooltip.styles.js +1 -1
- package/lib/components/TooltipTrigger/TooltipTrigger.js +2 -0
- package/lib/components/TooltipTrigger/TooltipTrigger.mdx +23 -0
- package/lib/components/TooltipTrigger/TooltipTrigger.test.js +48 -2
- package/lib/docs/Props.stories.mdx +35 -0
- package/lib/docs/Welcome.stories.mdx +149 -0
- package/lib/docs/hooks/useDebounce.stories.mdx +59 -0
- package/lib/docs/hooks/useModalState.stories.mdx +83 -0
- package/lib/docs/hooks/useOverlayPanelState.stories.mdx +84 -0
- package/lib/docs/theme/AstroNanoTheme.stories.mdx +174 -0
- package/lib/docs/theme/AstroTheme.stories.mdx +20 -0
- package/lib/docs/theme/CustomThemes.stories.mdx +70 -0
- package/lib/docs/theme/StylingGuideline.stories.mdx +116 -0
- package/lib/docs/utils/messagesReducer.stories.mdx +64 -0
- package/lib/experimental/EditButton/EditButton.js +50 -0
- package/lib/experimental/EditButton/EditButton.mdx +9 -0
- package/lib/experimental/EditButton/EditButton.stories.js +75 -0
- package/lib/experimental/EditButton/EditButton.test.js +68 -0
- package/lib/experimental/EditButton/index.js +1 -0
- package/lib/experimental/ListView/ListView.mdx +47 -0
- package/lib/experimental/ListView/ListView.stories.js +729 -0
- package/lib/experimental/ListViewItem/ListViewItem.js +24 -6
- package/lib/experimental/ListViewItem/ListViewItem.mdx +36 -0
- package/lib/experimental/ListViewItem/ListViewItem.stories.js +28 -5
- package/lib/experimental/ListViewItem/ListViewItem.test.js +45 -1
- package/lib/experimental/ListViewItem/controls/ListViewItemEditButton.js +1 -4
- package/lib/experimental/ListViewItem/controls/ListViewItemEditButton.stories.js +4 -1
- package/lib/experimental/ListViewItem/controls/ListViewItemMenu.test.js +2 -2
- package/lib/experimental/ListViewItem/controls/ListViewItemSwitchField.js +1 -0
- package/lib/experimental/ListViewItem/listViewItemAttributes.js +25 -12
- package/lib/experimental/PanelHeader/PanelHeader.js +75 -0
- package/lib/experimental/PanelHeader/PanelHeader.mdx +19 -0
- package/lib/experimental/PanelHeader/PanelHeader.stories.js +59 -0
- package/lib/experimental/PanelHeader/PanelHeader.styles.js +30 -0
- package/lib/experimental/PanelHeader/PanelHeader.test.js +43 -0
- package/lib/experimental/PanelHeader/controls/PanelHeaderCloseButton.js +25 -0
- package/lib/experimental/PanelHeader/controls/PanelHeaderCloseButton.stories.js +21 -0
- package/lib/experimental/PanelHeader/controls/PanelHeaderCloseButton.test.js +22 -0
- package/lib/experimental/PanelHeader/controls/PanelHeaderMenu.js +18 -0
- package/lib/experimental/PanelHeader/controls/PanelHeaderMenu.stories.js +26 -0
- package/lib/experimental/PanelHeader/controls/PanelHeaderMenu.test.js +55 -0
- package/lib/experimental/PanelHeader/controls/PanelHeaderSwitchField.js +18 -0
- package/lib/experimental/PanelHeader/controls/PanelHeaderSwitchField.stories.js +32 -0
- package/lib/experimental/PanelHeader/controls/PanelHeaderSwitchField.test.js +22 -0
- package/lib/experimental/PanelHeader/index.js +1 -0
- package/lib/experimental/README.stories.mdx +7 -0
- package/lib/experimental/SaveBar/SaveBar.mdx +13 -0
- package/lib/experimental/recipes/ListAndPanel.stories.js +1 -1
- package/lib/hooks/useComponentToggle/useComponentToggle.test.js +2 -2
- package/lib/hooks/useCopyToClipboard/useCopyToClipboard.js +2 -2
- package/lib/hooks/useCopyToClipboard/useCopyToClipboard.test.js +1 -1
- package/lib/hooks/useOverlappingMenuHoverState/useOverlappingMenuHoverState.test.js +2 -2
- package/lib/hooks/usePropWarning/usePropWarning.js +1 -1
- package/lib/hooks/useStatusClasses/useStatusClasses.js +2 -2
- package/lib/hooks/useTShirtSize/useTShirtSize.js +1 -1
- package/lib/index.js +6 -0
- package/lib/recipes/AttributeMapping.stories.js +540 -0
- package/lib/styles/colors.js +1 -1
- package/lib/styles/variants/README.md +98 -0
- package/lib/styles/variants/variants.js +2 -0
- package/lib/types/box.js +1 -0
- package/lib/types/icon.js +1 -0
- package/lib/types/index.js +7 -0
- package/lib/types/loader.js +1 -0
- package/lib/types/mdx.d.js +0 -0
- package/lib/types/popoverContainer.js +1 -0
- package/lib/types/shared/dom.js +1 -0
- package/lib/types/shared/index.js +3 -0
- package/lib/types/shared/style.js +1 -0
- package/lib/types/shared/test.js +1 -0
- package/lib/types/shared/utils.js +1 -0
- package/lib/types/tableCell.js +1 -0
- package/lib/types/text.js +1 -0
- package/lib/utils/designUtils/figmaLinks.js +2 -1
- package/lib/utils/testUtils/testAxe.js +2 -2
- package/package.json +23 -9
- package/CHANGELOG.md +0 -2565
- package/NOTICE +0 -2481
- package/NOTICE.html +0 -9174
- package/lib/cjs/recipes/AttributeMappingReadOnlyField.stories.js +0 -254
- package/lib/recipes/AttributeMappingReadOnlyField.stories.js +0 -243
- 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,
|
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: '
|
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
|
536
|
-
|
537
|
-
|
538
|
-
|
539
|
-
|
540
|
-
|
541
|
-
|
542
|
-
|
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(
|
545
|
-
var args = _extends({}, (_objectDestructuringEmpty(
|
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
|
-
|
552
|
-
data:
|
553
|
-
|
554
|
-
|
555
|
-
|
556
|
-
|
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
|
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
|
643
|
+
return _ref3.apply(this, arguments);
|
594
644
|
};
|
595
645
|
}();
|
596
646
|
var fetchApiData = /*#__PURE__*/function () {
|
597
|
-
var
|
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
|
701
|
+
return _ref4.apply(this, arguments);
|
652
702
|
};
|
653
703
|
}();
|
654
704
|
var list = useAsyncList({
|
655
|
-
load: function load(
|
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 =
|
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
|
-
|
697
|
-
|
698
|
-
|
699
|
-
|
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(
|
715
|
-
var args = _extends({}, (_objectDestructuringEmpty(
|
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
|
-
|
723
|
-
|
724
|
-
|
725
|
-
|
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.
|