@algolia/satellite 1.0.0-beta.130 → 1.0.0-beta.133
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/cjs/AnnouncementBadge/AnnouncementBadge.d.ts +3 -2
- package/cjs/AnnouncementBadge/AnnouncementBadge.js +13 -7
- package/cjs/AutoComplete/AutoComplete.d.ts +28 -17
- package/cjs/AutoComplete/AutoComplete.js +204 -124
- package/cjs/AutoComplete/components/AutoCompleteEmptyState.d.ts +4 -4
- package/cjs/AutoComplete/components/AutoCompleteEmptyState.js +16 -13
- package/cjs/AutoComplete/components/DefaultOptionItem.d.ts +6 -2
- package/cjs/AutoComplete/components/DefaultOptionItem.js +24 -17
- package/cjs/AutoComplete/types.d.ts +33 -25
- package/cjs/AutoComplete/utils.d.ts +4 -4
- package/cjs/Avatars/ApplicationAvatar.js +6 -5
- package/cjs/Avatars/UserAvatar.js +19 -20
- package/cjs/Avatars/utils.d.ts +1 -1
- package/cjs/Badge/Badge.d.ts +5 -5
- package/cjs/Badge/Badge.js +21 -12
- package/cjs/Banner/Banner.d.ts +4 -4
- package/cjs/Banner/Banner.js +30 -25
- package/cjs/Banners/Alert/Alert.d.ts +4 -4
- package/cjs/Banners/Alert/Alert.js +29 -23
- package/cjs/Banners/BigBertha/BigBertha.d.ts +2 -2
- package/cjs/Banners/BigBertha/BigBertha.js +11 -9
- package/cjs/Banners/Promote/Promote.d.ts +5 -5
- package/cjs/Banners/Promote/Promote.js +38 -30
- package/cjs/Button/Button.js +23 -17
- package/cjs/Button/ButtonGroup.d.ts +1 -1
- package/cjs/Button/ButtonGroup.js +6 -5
- package/cjs/Button/IconButton.d.ts +2 -2
- package/cjs/Button/IconButton.js +24 -22
- package/cjs/Button/styles.d.ts +1 -1
- package/cjs/Button/types.d.ts +5 -5
- package/cjs/Card/Card.d.ts +3 -3
- package/cjs/Card/Card.js +8 -11
- package/cjs/Card/components/CardHeader.js +8 -4
- package/cjs/Card/components/CardTitle.d.ts +1 -1
- package/cjs/Card/components/CardTitle.js +11 -6
- package/cjs/Checkbox/Checkbox.d.ts +3 -3
- package/cjs/Checkbox/Checkbox.js +33 -30
- package/cjs/ClickAwayContainer/ClickAwayContainer.d.ts +2 -2
- package/cjs/ClickAwayContainer/ClickAwayContainer.js +6 -9
- package/cjs/DatePicker/DatePicker/DatePicker.d.ts +13 -19
- package/cjs/DatePicker/DatePicker/DatePicker.js +84 -63
- package/cjs/DatePicker/DatePicker/datePickerReducer.d.ts +2 -2
- package/cjs/DatePicker/DatePicker/datePickerReducer.js +2 -2
- package/cjs/DatePicker/DateRangePicker/DateRangePicker.d.ts +11 -17
- package/cjs/DatePicker/DateRangePicker/DateRangePicker.js +89 -69
- package/cjs/DatePicker/DateRangePicker/DateRangePickerDisplay.d.ts +3 -1
- package/cjs/DatePicker/DateRangePicker/DateRangePickerDisplay.js +18 -12
- package/cjs/DatePicker/DateRangePicker/dateRangePickerReducer.d.ts +3 -3
- package/cjs/DatePicker/DateRangePicker/dateRangePickerReducer.js +5 -5
- package/cjs/DatePicker/components/Calendar.d.ts +5 -2
- package/cjs/DatePicker/components/Calendar.js +12 -10
- package/cjs/DatePicker/components/Display.d.ts +3 -3
- package/cjs/DatePicker/components/Display.js +6 -5
- package/cjs/DatePicker/components/Footer.d.ts +2 -2
- package/cjs/DatePicker/components/Footer.js +6 -5
- package/cjs/DatePicker/components/FooterActions.d.ts +3 -1
- package/cjs/DatePicker/components/FooterActions.js +17 -13
- package/cjs/DatePicker/components/Modal.d.ts +5 -5
- package/cjs/DatePicker/components/Modal.js +18 -16
- package/cjs/DatePicker/components/NavBar.d.ts +6 -3
- package/cjs/DatePicker/components/NavBar.js +42 -41
- package/cjs/DatePicker/components/SidePanel.d.ts +2 -2
- package/cjs/DatePicker/components/SidePanel.js +9 -7
- package/cjs/DatePicker/types.d.ts +17 -0
- package/cjs/DatePicker/types.js +5 -0
- package/cjs/Dropdown/Dropdown.d.ts +8 -8
- package/cjs/Dropdown/Dropdown.js +49 -40
- package/cjs/Dropdown/DropdownButton.d.ts +3 -3
- package/cjs/Dropdown/DropdownButton.js +15 -9
- package/cjs/Dropdown/DropdownContext.d.ts +2 -2
- package/cjs/Dropdown/DropdownContext.js +2 -9
- package/cjs/Dropdown/components/DropdownButtonItem.d.ts +1 -1
- package/cjs/Dropdown/components/DropdownButtonItem.js +14 -14
- package/cjs/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItem.d.ts +4 -4
- package/cjs/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItem.js +30 -29
- package/cjs/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsGroup.d.ts +1 -1
- package/cjs/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsGroup.js +6 -7
- package/cjs/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsMultiGroup.d.ts +1 -1
- package/cjs/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsMultiGroup.js +6 -9
- package/cjs/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsSingleGroup.d.ts +1 -1
- package/cjs/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsSingleGroup.js +6 -9
- package/cjs/Dropdown/components/DropdownDivider.js +3 -3
- package/cjs/Dropdown/components/DropdownFooterItem.d.ts +2 -2
- package/cjs/Dropdown/components/DropdownFooterItem.js +11 -5
- package/cjs/Dropdown/components/DropdownLinkItem.js +14 -13
- package/cjs/Dropdown/components/DropdownRadioItem.d.ts +2 -2
- package/cjs/Dropdown/components/DropdownRadioItem.js +17 -16
- package/cjs/Dropdown/components/DropdownTitle.d.ts +1 -1
- package/cjs/Dropdown/components/DropdownTitle.js +8 -4
- package/cjs/Dropdown/components/DropdownToggleItem.d.ts +3 -3
- package/cjs/Dropdown/components/DropdownToggleItem.js +16 -16
- package/cjs/Dropdown/useDropdownItemProps.d.ts +3 -3
- package/cjs/Dropzone/Dropzone.d.ts +2 -2
- package/cjs/Dropzone/Dropzone.js +58 -53
- package/cjs/EmptyState/EmptyState.d.ts +1 -1
- package/cjs/EmptyState/EmptyState.js +29 -22
- package/cjs/EmptyState/types.d.ts +7 -7
- package/cjs/Field/Field.d.ts +3 -3
- package/cjs/Field/Field.js +33 -26
- package/cjs/Flag/Flag.d.ts +2 -2
- package/cjs/Flag/Flag.js +45 -40
- package/cjs/Flag/Flags.d.ts +3 -3
- package/cjs/Flag/Flags.js +32 -22
- package/cjs/Flag/types.d.ts +4 -4
- package/cjs/FlexGrid/FlexGrid.d.ts +1 -1
- package/cjs/FlexGrid/FlexGrid.js +15 -9
- package/cjs/FlexGrid/FlexGrid.tailwind.js +2 -2
- package/cjs/HelpUnderline/HelpUnderline.d.ts +2 -1
- package/cjs/HelpUnderline/HelpUnderline.js +9 -7
- package/cjs/Input/Input.d.ts +5 -5
- package/cjs/Input/Input.js +119 -114
- package/cjs/Input/Input.tailwind.js +0 -3
- package/cjs/Insert/Insert.d.ts +2 -2
- package/cjs/Insert/Insert.js +29 -23
- package/cjs/KeyboardKey/KeyboardKey.d.ts +7 -0
- package/cjs/KeyboardKey/KeyboardKey.js +47 -0
- package/cjs/KeyboardKey/KeyboardKey.tailwind.d.ts +5 -0
- package/cjs/KeyboardKey/KeyboardKey.tailwind.js +33 -0
- package/cjs/KeyboardKey/index.d.ts +2 -0
- package/cjs/KeyboardKey/index.js +26 -0
- package/cjs/Link/BaseLink.d.ts +3 -3
- package/cjs/Link/BaseLink.js +7 -7
- package/cjs/Link/ButtonLink.d.ts +1 -1
- package/cjs/Link/ButtonLink.js +9 -5
- package/cjs/Link/IconButtonLink.d.ts +1 -1
- package/cjs/Link/IconButtonLink.js +8 -4
- package/cjs/Link/Link.d.ts +5 -5
- package/cjs/Link/Link.js +16 -15
- package/cjs/Medallion/Medallion.d.ts +2 -2
- package/cjs/Medallion/Medallion.js +8 -7
- package/cjs/Modal/Modal.d.ts +7 -5
- package/cjs/Modal/Modal.js +64 -40
- package/cjs/Modal/components/ModalFooter.d.ts +2 -2
- package/cjs/Modal/components/ModalFooter.js +16 -10
- package/cjs/Modal/components/ModalSection.d.ts +1 -1
- package/cjs/Modal/components/ModalSection.js +6 -5
- package/cjs/Pagination/CompactPagination/CompactPagination.d.ts +12 -0
- package/cjs/Pagination/CompactPagination/CompactPagination.js +40 -38
- package/cjs/Pagination/DotPagination/DotPagination.d.ts +4 -1
- package/cjs/Pagination/DotPagination/DotPagination.js +21 -17
- package/cjs/Pagination/Pagination/Pagination.d.ts +7 -1
- package/cjs/Pagination/Pagination/Pagination.js +62 -49
- package/cjs/ProgressBar/ProgressBar.d.ts +2 -2
- package/cjs/ProgressBar/ProgressBar.js +16 -11
- package/cjs/ProgressSpinner/ProgressSpinner.d.ts +2 -2
- package/cjs/ProgressSpinner/ProgressSpinner.js +21 -11
- package/cjs/RadioGroup/RadioButton.d.ts +3 -3
- package/cjs/RadioGroup/RadioButton.js +8 -8
- package/cjs/RadioGroup/RadioGroup.d.ts +3 -3
- package/cjs/RadioGroup/RadioGroup.js +36 -34
- package/cjs/RangeSlider/RangeSlider.d.ts +3 -3
- package/cjs/RangeSlider/RangeSlider.js +37 -36
- package/cjs/Satellite/Satellite.d.ts +2 -2
- package/cjs/Satellite/Satellite.js +6 -5
- package/cjs/Satellite/SatelliteContext.js +2 -2
- package/cjs/Satellite/SatelliteRouter.d.ts +1 -1
- package/cjs/ScrollIndicator/ScrollIndicator.d.ts +5 -3
- package/cjs/ScrollIndicator/ScrollIndicator.js +13 -16
- package/cjs/Select/Select.d.ts +3 -3
- package/cjs/Select/Select.js +8 -8
- package/cjs/Sidebar/Sidebar.d.ts +6 -4
- package/cjs/Sidebar/Sidebar.js +18 -10
- package/cjs/Sidebar/SidebarContext.d.ts +1 -1
- package/cjs/Sidebar/components/SidebarHeader.d.ts +2 -2
- package/cjs/Sidebar/components/SidebarHeader.js +11 -6
- package/cjs/Sidebar/components/SidebarLink.d.ts +3 -3
- package/cjs/Sidebar/components/SidebarLink.js +32 -22
- package/cjs/Switch/Switch.d.ts +3 -3
- package/cjs/Switch/Switch.js +17 -19
- package/cjs/Switch/SwitchOption.d.ts +1 -1
- package/cjs/Switch/SwitchOption.js +24 -16
- package/cjs/Tables/DataTable/DataTable.d.ts +15 -5
- package/cjs/Tables/DataTable/DataTable.js +62 -60
- package/cjs/Tables/DataTable/components/Body.d.ts +6 -6
- package/cjs/Tables/DataTable/components/Body.js +62 -47
- package/cjs/Tables/DataTable/components/Footer.d.ts +1 -1
- package/cjs/Tables/DataTable/components/Footer.js +6 -6
- package/cjs/Tables/DataTable/components/Header.js +24 -20
- package/cjs/Tables/DataTable/components/HeaderCell.d.ts +3 -3
- package/cjs/Tables/DataTable/components/HeaderCell.js +20 -14
- package/cjs/Tables/DataTable/components/Loader.d.ts +3 -1
- package/cjs/Tables/DataTable/components/Loader.js +19 -20
- package/cjs/Tables/DataTable/types.d.ts +3 -3
- package/cjs/Tables/DataTable/utils.d.ts +1 -1
- package/cjs/Tables/Table/Table.d.ts +3 -3
- package/cjs/Tables/Table/Table.js +19 -12
- package/cjs/Tables/Table/components/Footer.d.ts +2 -2
- package/cjs/Tables/Table/components/Footer.js +6 -5
- package/cjs/Tabs/ContentTabs.d.ts +1 -1
- package/cjs/Tabs/ContentTabs.js +39 -38
- package/cjs/Tabs/LinkTabs.d.ts +1 -1
- package/cjs/Tabs/LinkTabs.js +16 -16
- package/cjs/Tabs/components/LinkTab.d.ts +3 -3
- package/cjs/Tabs/components/LinkTab.js +18 -12
- package/cjs/Tabs/types.d.ts +6 -6
- package/cjs/Tabs/utils.d.ts +1 -1
- package/cjs/Tag/Tag.d.ts +7 -4
- package/cjs/Tag/Tag.js +24 -20
- package/cjs/TextArea/TextArea.d.ts +3 -3
- package/cjs/TextArea/TextArea.js +8 -8
- package/cjs/TextWrap/TextWrap.js +20 -20
- package/cjs/Toggle/Toggle.d.ts +3 -3
- package/cjs/Toggle/Toggle.js +23 -21
- package/cjs/Tooltip/OverflowTooltipWrapper.d.ts +3 -2
- package/cjs/Tooltip/OverflowTooltipWrapper.js +32 -24
- package/cjs/Tooltip/Tooltip.d.ts +3 -3
- package/cjs/Tooltip/Tooltip.js +8 -8
- package/cjs/Tooltip/TooltipWrapper.d.ts +3 -3
- package/cjs/Tooltip/TooltipWrapper.js +47 -39
- package/cjs/Tooltip/types.d.ts +2 -2
- package/cjs/Typography/Typography.tailwind.js +2 -2
- package/cjs/UserContent/UserContent.js +3 -3
- package/cjs/UserContent/UserContent.tailwind.js +2 -4
- package/cjs/index.d.ts +1 -0
- package/cjs/index.js +14 -0
- package/cjs/styles/tailwind.config.js +3 -3
- package/cjs/tailwind-types.d.ts +1 -1
- package/cjs/types.d.ts +3 -3
- package/cjs/utilities/utilities.tailwind.d.ts +2 -0
- package/cjs/utilities/utilities.tailwind.js +32 -0
- package/cjs/utils/genericChangeHandler.d.ts +3 -3
- package/cjs/utils/isCssPropertySupported.d.ts +1 -1
- package/cjs/utils/isRenderedChild.d.ts +2 -2
- package/cjs/utils/pluralize.js +6 -1
- package/cjs/utils/useForwardedRef.d.ts +2 -2
- package/cjs/utils/useLinkProps.d.ts +2 -2
- package/cjs/utils/useTriggerInputChange.d.ts +2 -2
- package/esm/AnnouncementBadge/AnnouncementBadge.d.ts +3 -2
- package/esm/AnnouncementBadge/AnnouncementBadge.js +12 -6
- package/esm/AutoComplete/AutoComplete.d.ts +28 -17
- package/esm/AutoComplete/AutoComplete.js +208 -116
- package/esm/AutoComplete/components/AutoCompleteEmptyState.d.ts +4 -4
- package/esm/AutoComplete/components/AutoCompleteEmptyState.js +16 -12
- package/esm/AutoComplete/components/DefaultOptionItem.d.ts +6 -2
- package/esm/AutoComplete/components/DefaultOptionItem.js +25 -16
- package/esm/AutoComplete/types.d.ts +33 -25
- package/esm/AutoComplete/utils.d.ts +4 -4
- package/esm/Avatars/ApplicationAvatar.js +5 -4
- package/esm/Avatars/UserAvatar.js +19 -14
- package/esm/Avatars/utils.d.ts +1 -1
- package/esm/Badge/Badge.d.ts +5 -5
- package/esm/Badge/Badge.js +21 -11
- package/esm/Banner/Banner.d.ts +4 -4
- package/esm/Banner/Banner.js +31 -25
- package/esm/Banners/Alert/Alert.d.ts +4 -4
- package/esm/Banners/Alert/Alert.js +30 -23
- package/esm/Banners/BigBertha/BigBertha.d.ts +2 -2
- package/esm/Banners/BigBertha/BigBertha.js +11 -8
- package/esm/Banners/Promote/Promote.d.ts +5 -5
- package/esm/Banners/Promote/Promote.js +37 -28
- package/esm/Button/Button.js +23 -16
- package/esm/Button/ButtonGroup.d.ts +1 -1
- package/esm/Button/ButtonGroup.js +5 -4
- package/esm/Button/IconButton.d.ts +2 -2
- package/esm/Button/IconButton.js +24 -19
- package/esm/Button/styles.d.ts +1 -1
- package/esm/Button/types.d.ts +5 -5
- package/esm/Card/Card.d.ts +3 -3
- package/esm/Card/Card.js +6 -4
- package/esm/Card/components/CardHeader.js +8 -3
- package/esm/Card/components/CardTitle.d.ts +1 -1
- package/esm/Card/components/CardTitle.js +11 -5
- package/esm/Checkbox/Checkbox.d.ts +3 -3
- package/esm/Checkbox/Checkbox.js +35 -26
- package/esm/ClickAwayContainer/ClickAwayContainer.d.ts +2 -2
- package/esm/ClickAwayContainer/ClickAwayContainer.js +6 -4
- package/esm/DatePicker/DatePicker/DatePicker.d.ts +13 -19
- package/esm/DatePicker/DatePicker/DatePicker.js +87 -59
- package/esm/DatePicker/DatePicker/datePickerReducer.d.ts +2 -2
- package/esm/DatePicker/DatePicker/datePickerReducer.js +2 -2
- package/esm/DatePicker/DateRangePicker/DateRangePicker.d.ts +11 -17
- package/esm/DatePicker/DateRangePicker/DateRangePicker.js +95 -67
- package/esm/DatePicker/DateRangePicker/DateRangePickerDisplay.d.ts +3 -1
- package/esm/DatePicker/DateRangePicker/DateRangePickerDisplay.js +19 -11
- package/esm/DatePicker/DateRangePicker/dateRangePickerReducer.d.ts +3 -3
- package/esm/DatePicker/DateRangePicker/dateRangePickerReducer.js +4 -4
- package/esm/DatePicker/components/Calendar.d.ts +5 -2
- package/esm/DatePicker/components/Calendar.js +13 -5
- package/esm/DatePicker/components/Display.d.ts +3 -3
- package/esm/DatePicker/components/Display.js +5 -4
- package/esm/DatePicker/components/Footer.d.ts +2 -2
- package/esm/DatePicker/components/Footer.js +5 -4
- package/esm/DatePicker/components/FooterActions.d.ts +3 -1
- package/esm/DatePicker/components/FooterActions.js +18 -13
- package/esm/DatePicker/components/Modal.d.ts +5 -5
- package/esm/DatePicker/components/Modal.js +19 -12
- package/esm/DatePicker/components/NavBar.d.ts +6 -3
- package/esm/DatePicker/components/NavBar.js +42 -35
- package/esm/DatePicker/components/SidePanel.d.ts +2 -2
- package/esm/DatePicker/components/SidePanel.js +8 -6
- package/esm/DatePicker/types.d.ts +17 -0
- package/esm/DatePicker/types.js +1 -0
- package/esm/Dropdown/Dropdown.d.ts +8 -8
- package/esm/Dropdown/Dropdown.js +45 -30
- package/esm/Dropdown/DropdownButton.d.ts +3 -3
- package/esm/Dropdown/DropdownButton.js +15 -8
- package/esm/Dropdown/DropdownContext.d.ts +2 -2
- package/esm/Dropdown/DropdownContext.js +2 -2
- package/esm/Dropdown/components/DropdownButtonItem.d.ts +1 -1
- package/esm/Dropdown/components/DropdownButtonItem.js +14 -12
- package/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItem.d.ts +4 -4
- package/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItem.js +29 -22
- package/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsGroup.d.ts +1 -1
- package/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsGroup.js +5 -4
- package/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsMultiGroup.d.ts +1 -1
- package/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsMultiGroup.js +6 -4
- package/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsSingleGroup.d.ts +1 -1
- package/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsSingleGroup.js +6 -4
- package/esm/Dropdown/components/DropdownDivider.js +2 -2
- package/esm/Dropdown/components/DropdownFooterItem.d.ts +2 -2
- package/esm/Dropdown/components/DropdownFooterItem.js +11 -4
- package/esm/Dropdown/components/DropdownLinkItem.js +14 -11
- package/esm/Dropdown/components/DropdownRadioItem.d.ts +2 -2
- package/esm/Dropdown/components/DropdownRadioItem.js +17 -14
- package/esm/Dropdown/components/DropdownTitle.d.ts +1 -1
- package/esm/Dropdown/components/DropdownTitle.js +8 -3
- package/esm/Dropdown/components/DropdownToggleItem.d.ts +3 -3
- package/esm/Dropdown/components/DropdownToggleItem.js +16 -14
- package/esm/Dropdown/useDropdownItemProps.d.ts +3 -3
- package/esm/Dropzone/Dropzone.d.ts +2 -2
- package/esm/Dropzone/Dropzone.js +58 -47
- package/esm/EmptyState/EmptyState.d.ts +1 -1
- package/esm/EmptyState/EmptyState.js +29 -21
- package/esm/EmptyState/types.d.ts +7 -7
- package/esm/Field/Field.d.ts +3 -3
- package/esm/Field/Field.js +33 -25
- package/esm/Flag/Flag.d.ts +2 -2
- package/esm/Flag/Flag.js +44 -33
- package/esm/Flag/Flags.d.ts +3 -3
- package/esm/Flag/Flags.js +30 -21
- package/esm/Flag/types.d.ts +4 -4
- package/esm/FlexGrid/FlexGrid.d.ts +1 -1
- package/esm/FlexGrid/FlexGrid.js +13 -8
- package/esm/FlexGrid/FlexGrid.tailwind.js +2 -2
- package/esm/HelpUnderline/HelpUnderline.d.ts +2 -1
- package/esm/HelpUnderline/HelpUnderline.js +8 -6
- package/esm/Input/Input.d.ts +5 -5
- package/esm/Input/Input.js +119 -108
- package/esm/Input/Input.tailwind.js +0 -3
- package/esm/Insert/Insert.d.ts +2 -2
- package/esm/Insert/Insert.js +28 -21
- package/esm/KeyboardKey/KeyboardKey.d.ts +7 -0
- package/esm/KeyboardKey/KeyboardKey.js +30 -0
- package/esm/KeyboardKey/KeyboardKey.tailwind.d.ts +5 -0
- package/esm/KeyboardKey/KeyboardKey.tailwind.js +31 -0
- package/esm/KeyboardKey/index.d.ts +2 -0
- package/esm/KeyboardKey/index.js +2 -0
- package/esm/Link/BaseLink.d.ts +3 -3
- package/esm/Link/BaseLink.js +9 -3
- package/esm/Link/ButtonLink.d.ts +1 -1
- package/esm/Link/ButtonLink.js +9 -4
- package/esm/Link/IconButtonLink.d.ts +1 -1
- package/esm/Link/IconButtonLink.js +9 -4
- package/esm/Link/Link.d.ts +5 -5
- package/esm/Link/Link.js +18 -10
- package/esm/Medallion/Medallion.d.ts +2 -2
- package/esm/Medallion/Medallion.js +7 -6
- package/esm/Modal/Modal.d.ts +7 -5
- package/esm/Modal/Modal.js +65 -35
- package/esm/Modal/components/ModalFooter.d.ts +2 -2
- package/esm/Modal/components/ModalFooter.js +16 -9
- package/esm/Modal/components/ModalSection.d.ts +1 -1
- package/esm/Modal/components/ModalSection.js +5 -4
- package/esm/Pagination/CompactPagination/CompactPagination.d.ts +12 -0
- package/esm/Pagination/CompactPagination/CompactPagination.js +41 -38
- package/esm/Pagination/DotPagination/DotPagination.d.ts +4 -1
- package/esm/Pagination/DotPagination/DotPagination.js +20 -16
- package/esm/Pagination/Pagination/Pagination.d.ts +7 -1
- package/esm/Pagination/Pagination/Pagination.js +63 -48
- package/esm/ProgressBar/ProgressBar.d.ts +2 -2
- package/esm/ProgressBar/ProgressBar.js +16 -10
- package/esm/ProgressSpinner/ProgressSpinner.d.ts +2 -2
- package/esm/ProgressSpinner/ProgressSpinner.js +21 -10
- package/esm/RadioGroup/RadioButton.d.ts +3 -3
- package/esm/RadioGroup/RadioButton.js +9 -3
- package/esm/RadioGroup/RadioGroup.d.ts +3 -3
- package/esm/RadioGroup/RadioGroup.js +36 -28
- package/esm/RangeSlider/RangeSlider.d.ts +3 -3
- package/esm/RangeSlider/RangeSlider.js +39 -31
- package/esm/Satellite/Satellite.d.ts +2 -2
- package/esm/Satellite/Satellite.js +5 -4
- package/esm/Satellite/SatelliteContext.js +2 -2
- package/esm/Satellite/SatelliteRouter.d.ts +1 -1
- package/esm/ScrollIndicator/ScrollIndicator.d.ts +5 -3
- package/esm/ScrollIndicator/ScrollIndicator.js +12 -10
- package/esm/Select/Select.d.ts +3 -3
- package/esm/Select/Select.js +8 -3
- package/esm/Sidebar/Sidebar.d.ts +6 -4
- package/esm/Sidebar/Sidebar.js +16 -8
- package/esm/Sidebar/SidebarContext.d.ts +1 -1
- package/esm/Sidebar/components/SidebarHeader.d.ts +2 -2
- package/esm/Sidebar/components/SidebarHeader.js +11 -5
- package/esm/Sidebar/components/SidebarLink.d.ts +3 -3
- package/esm/Sidebar/components/SidebarLink.js +34 -21
- package/esm/Switch/Switch.d.ts +3 -3
- package/esm/Switch/Switch.js +16 -12
- package/esm/Switch/SwitchOption.d.ts +1 -1
- package/esm/Switch/SwitchOption.js +24 -15
- package/esm/Tables/DataTable/DataTable.d.ts +15 -5
- package/esm/Tables/DataTable/DataTable.js +61 -53
- package/esm/Tables/DataTable/components/Body.d.ts +6 -6
- package/esm/Tables/DataTable/components/Body.js +60 -45
- package/esm/Tables/DataTable/components/Footer.d.ts +1 -1
- package/esm/Tables/DataTable/components/Footer.js +5 -5
- package/esm/Tables/DataTable/components/Header.js +22 -18
- package/esm/Tables/DataTable/components/HeaderCell.d.ts +3 -3
- package/esm/Tables/DataTable/components/HeaderCell.js +20 -13
- package/esm/Tables/DataTable/components/Loader.d.ts +3 -1
- package/esm/Tables/DataTable/components/Loader.js +18 -14
- package/esm/Tables/DataTable/types.d.ts +3 -3
- package/esm/Tables/DataTable/utils.d.ts +1 -1
- package/esm/Tables/Table/Table.d.ts +3 -3
- package/esm/Tables/Table/Table.js +20 -11
- package/esm/Tables/Table/components/Footer.d.ts +2 -2
- package/esm/Tables/Table/components/Footer.js +5 -4
- package/esm/Tabs/ContentTabs.d.ts +1 -1
- package/esm/Tabs/ContentTabs.js +38 -31
- package/esm/Tabs/LinkTabs.d.ts +1 -1
- package/esm/Tabs/LinkTabs.js +14 -14
- package/esm/Tabs/components/LinkTab.d.ts +3 -3
- package/esm/Tabs/components/LinkTab.js +18 -11
- package/esm/Tabs/types.d.ts +6 -6
- package/esm/Tabs/utils.d.ts +1 -1
- package/esm/Tag/Tag.d.ts +7 -4
- package/esm/Tag/Tag.js +25 -15
- package/esm/TextArea/TextArea.d.ts +3 -3
- package/esm/TextArea/TextArea.js +9 -3
- package/esm/TextWrap/TextWrap.js +22 -17
- package/esm/Toggle/Toggle.d.ts +3 -3
- package/esm/Toggle/Toggle.js +25 -16
- package/esm/Tooltip/OverflowTooltipWrapper.d.ts +3 -2
- package/esm/Tooltip/OverflowTooltipWrapper.js +35 -19
- package/esm/Tooltip/Tooltip.d.ts +3 -3
- package/esm/Tooltip/Tooltip.js +8 -3
- package/esm/Tooltip/TooltipWrapper.d.ts +3 -3
- package/esm/Tooltip/TooltipWrapper.js +48 -33
- package/esm/Tooltip/types.d.ts +2 -2
- package/esm/Typography/Typography.tailwind.js +2 -2
- package/esm/UserContent/UserContent.js +2 -2
- package/esm/UserContent/UserContent.tailwind.js +2 -4
- package/esm/index.d.ts +1 -0
- package/esm/index.js +1 -0
- package/esm/styles/tailwind.config.js +3 -3
- package/esm/tailwind-types.d.ts +1 -1
- package/esm/types.d.ts +3 -3
- package/esm/utilities/utilities.tailwind.d.ts +2 -0
- package/esm/utilities/utilities.tailwind.js +27 -0
- package/esm/utils/genericChangeHandler.d.ts +3 -3
- package/esm/utils/isCssPropertySupported.d.ts +1 -1
- package/esm/utils/isRenderedChild.d.ts +2 -2
- package/esm/utils/pluralize.js +6 -1
- package/esm/utils/useForwardedRef.d.ts +2 -2
- package/esm/utils/useForwardedRef.js +1 -1
- package/esm/utils/useLinkProps.d.ts +2 -2
- package/esm/utils/useTriggerInputChange.d.ts +2 -2
- package/package.json +4 -4
- package/satellite.css +37 -4
- package/satellite.min.css +1 -1
package/esm/Dropzone/Dropzone.js
CHANGED
@@ -7,12 +7,12 @@ var _excluded = ["id", "placeholder", "disabled", "multiple", "clearable", "onCh
|
|
7
7
|
|
8
8
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
|
9
9
|
|
10
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object);
|
10
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
11
11
|
|
12
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
12
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
13
13
|
|
14
14
|
import cx from "classnames";
|
15
|
-
import
|
15
|
+
import { Fragment, useCallback, useMemo, useState } from "react";
|
16
16
|
import { useDropzone } from "react-dropzone";
|
17
17
|
import { Check, UploadCloud, X } from "react-feather";
|
18
18
|
import { IconButton } from "../Button";
|
@@ -20,12 +20,15 @@ import { useFieldState } from "../Field";
|
|
20
20
|
import stl from "../styles/helpers/satellitePrefixer";
|
21
21
|
import { formatHumanSize } from "../utils/formatters";
|
22
22
|
import { uniqueId } from "../utils/uniqueId";
|
23
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
24
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
23
25
|
|
24
26
|
var DropzoneFileItem = function DropzoneFileItem(_ref) {
|
25
27
|
var file = _ref.file;
|
26
|
-
return /*#__PURE__*/
|
27
|
-
className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["truncate text-grey-900"])))
|
28
|
-
|
28
|
+
return /*#__PURE__*/_jsxs("span", {
|
29
|
+
className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["truncate text-grey-900"]))),
|
30
|
+
children: [file.name, " - ", formatHumanSize(file.size)]
|
31
|
+
});
|
29
32
|
};
|
30
33
|
|
31
34
|
var STATUS_CLASSNAMES = {
|
@@ -35,13 +38,13 @@ var STATUS_CLASSNAMES = {
|
|
35
38
|
};
|
36
39
|
|
37
40
|
var InvalidIcon = function InvalidIcon() {
|
38
|
-
return /*#__PURE__*/
|
41
|
+
return /*#__PURE__*/_jsx(X, {
|
39
42
|
className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["mr-4 h-4 w-4 text-white bg-red-700 p-px rounded-full"])))
|
40
43
|
});
|
41
44
|
};
|
42
45
|
|
43
46
|
var ValidatedIcon = function ValidatedIcon() {
|
44
|
-
return /*#__PURE__*/
|
47
|
+
return /*#__PURE__*/_jsx(Check, {
|
45
48
|
className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["mr-4 h-4 w-4 text-white bg-accent-700 p-px rounded-full"])))
|
46
49
|
});
|
47
50
|
};
|
@@ -98,8 +101,8 @@ export var Dropzone = function Dropzone(_ref2) {
|
|
98
101
|
return id !== null && id !== void 0 ? id : uniqueId("dropzone");
|
99
102
|
}, [id]);
|
100
103
|
var isValueEmpty = files.length === 0;
|
101
|
-
var StatusIcon = status === "invalid" ? InvalidIcon : status === "validated" ? ValidatedIcon :
|
102
|
-
return /*#__PURE__*/
|
104
|
+
var StatusIcon = status === "invalid" ? InvalidIcon : status === "validated" ? ValidatedIcon : Fragment;
|
105
|
+
return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({}, getRootProps({
|
103
106
|
"aria-controls": dropzoneId,
|
104
107
|
className: cx(stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n input group\n ", "\n ", "\n min-h-16 cursor-pointer\n ", ""])), focused && "input-focused", disabled && "input-disabled cursor-not-allowed", isDragReject ? "border-red-200 cursor-not-allowed" : isDragActive ? "border-nebula-500" : null), STATUS_CLASSNAMES[status], className),
|
105
108
|
onClick: function onClick(evt) {
|
@@ -108,42 +111,50 @@ export var Dropzone = function Dropzone(_ref2) {
|
|
108
111
|
evt.stopPropagation();
|
109
112
|
}
|
110
113
|
}
|
111
|
-
}),
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
114
|
+
})), {}, {
|
115
|
+
children: [/*#__PURE__*/_jsx("input", _objectSpread({}, getInputProps({
|
116
|
+
id: dropzoneId,
|
117
|
+
onFocus: function onFocus() {
|
118
|
+
return setFocused(true);
|
119
|
+
},
|
120
|
+
onBlur: function onBlur() {
|
121
|
+
return setFocused(false);
|
122
|
+
}
|
123
|
+
}))), /*#__PURE__*/_jsx("div", {
|
124
|
+
className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["flex-1 flex items-center justify-center space-x-2 display-body"]))),
|
125
|
+
children: files.length > 0 ? files.length > 1 ? /*#__PURE__*/_jsx("ul", {
|
126
|
+
children: files.map(function (file) {
|
127
|
+
return /*#__PURE__*/_jsx("li", {
|
128
|
+
children: /*#__PURE__*/_jsx(DropzoneFileItem, {
|
129
|
+
file: file
|
130
|
+
})
|
131
|
+
}, file.name);
|
132
|
+
})
|
133
|
+
}) : /*#__PURE__*/_jsx(DropzoneFileItem, {
|
134
|
+
file: files[0]
|
135
|
+
}) : /*#__PURE__*/_jsxs("div", {
|
136
|
+
className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["flex items-center justify-center space-x-2 display-body"]))),
|
137
|
+
children: [/*#__PURE__*/_jsx(UploadCloud, {
|
138
|
+
size: "1rem",
|
139
|
+
className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["", ""])), disabled ? "text-grey-200" : "text-grey-500")
|
140
|
+
}), /*#__PURE__*/_jsx("p", {
|
141
|
+
className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["", ""])), disabled ? "text-grey-300" : "typo-subdued"),
|
142
|
+
children: placeholder !== null && placeholder !== void 0 ? placeholder : "Drop ".concat(multiple ? "files" : "file", " here or click to select.")
|
143
|
+
})]
|
144
|
+
})
|
145
|
+
}), clearable && !disabled && !isValueEmpty && /*#__PURE__*/_jsx("span", {
|
146
|
+
className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral([""]))),
|
147
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
148
|
+
className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["mr-2 ", ""])), focused ? "visible" : "invisible group-hover:visible"),
|
149
|
+
title: "Clear input",
|
150
|
+
icon: X,
|
151
|
+
variant: "subtle",
|
152
|
+
size: "small",
|
153
|
+
tabIndex: -1,
|
154
|
+
"aria-hidden": true,
|
155
|
+
onClick: handleClear
|
156
|
+
})
|
157
|
+
}), /*#__PURE__*/_jsx(StatusIcon, {})]
|
158
|
+
}));
|
148
159
|
};
|
149
160
|
export default Dropzone;
|
@@ -1,5 +1,5 @@
|
|
1
1
|
/// <reference types="react" />
|
2
|
-
import { EmptyStateProps } from "./types";
|
2
|
+
import type { EmptyStateProps } from "./types";
|
3
3
|
/**
|
4
4
|
* Empty states are used when a list, table, chart or page has no items or data to show. This is an opportunity to provide explanation or guidance to help users progress. This can also be shown when a features hasn't been enable.
|
5
5
|
*
|
@@ -2,10 +2,11 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
|
|
2
2
|
|
3
3
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24;
|
4
4
|
|
5
|
-
import React from "react";
|
6
5
|
import cx from "classnames";
|
7
|
-
import stl from "../styles/helpers/satellitePrefixer";
|
8
6
|
import FlexGrid from "../FlexGrid";
|
7
|
+
import stl from "../styles/helpers/satellitePrefixer";
|
8
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
9
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
9
10
|
var CONTAINER_CONTEXT_CLASSNAMES = {
|
10
11
|
result: {
|
11
12
|
medium: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["max-w-xs"]))),
|
@@ -61,25 +62,32 @@ var renderEmptyState = function renderEmptyState(_ref) {
|
|
61
62
|
var titleClassNames = cx(stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["text-grey-900"]))), TITLE_CONTEXT_CLASSNAMES[usageContext]);
|
62
63
|
var descriptionClassNames = cx(stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["text-grey-600"]))), DESCRIPTION_CONTEXT_CLASSNAMES[usageContext]);
|
63
64
|
var actionsClassNames = cx(ACTIONS_CONTEXT_CLASSNAMES[usageContext]);
|
64
|
-
return /*#__PURE__*/
|
65
|
-
className: containerClassNames
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
65
|
+
return /*#__PURE__*/_jsxs("div", {
|
66
|
+
className: containerClassNames,
|
67
|
+
children: [/*#__PURE__*/_jsxs("div", {
|
68
|
+
className: stl(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["min-w-2/5"]))),
|
69
|
+
children: [centered && medallion && /*#__PURE__*/_jsx("div", {
|
70
|
+
className: MEDALLION_CONTEXT_CLASSNAMES[usageContext],
|
71
|
+
children: medallion
|
72
|
+
}), /*#__PURE__*/_jsx("h2", {
|
73
|
+
className: titleClassNames,
|
74
|
+
children: title
|
75
|
+
}), description && /*#__PURE__*/_jsx("p", {
|
76
|
+
className: descriptionClassNames,
|
77
|
+
children: description
|
78
|
+
}), actions && /*#__PURE__*/_jsx(FlexGrid, {
|
79
|
+
className: actionsClassNames,
|
80
|
+
alignment: centered ? "center" : "leading",
|
81
|
+
distribution: centered ? "center" : "leading",
|
82
|
+
direction: actionsDirection !== null && actionsDirection !== void 0 ? actionsDirection : centered ? "column" : "row",
|
83
|
+
spacing: "sm",
|
84
|
+
children: actions
|
85
|
+
})]
|
86
|
+
}), illustration && !centered && usageContext === "page" && /*#__PURE__*/_jsx("div", {
|
87
|
+
className: stl(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["empty-state-illustration ml-16 hidden lg:flex items-center justify-center"]))),
|
88
|
+
children: illustration
|
89
|
+
})]
|
90
|
+
});
|
83
91
|
};
|
84
92
|
/**
|
85
93
|
* Empty states are used when a list, table, chart or page has no items or data to show. This is an opportunity to provide explanation or guidance to help users progress. This can also be shown when a features hasn't been enable.
|
@@ -1,20 +1,20 @@
|
|
1
|
-
|
2
|
-
import { FlexGridDirection } from "../FlexGrid";
|
1
|
+
import type { ReactNode } from "react";
|
2
|
+
import type { FlexGridDirection } from "../FlexGrid";
|
3
3
|
export declare type EmptyStateUsageContexts = "result" | "feature" | "page";
|
4
4
|
export declare type EmptyStateWidths = "medium" | "large" | "xlarge";
|
5
5
|
export interface EmptyStatePropsAll {
|
6
6
|
/** Descriptive title for the state */
|
7
|
-
title:
|
7
|
+
title: ReactNode;
|
8
8
|
/** Optional description to explain why the screen is empty or define next steps */
|
9
|
-
description?:
|
9
|
+
description?: ReactNode;
|
10
10
|
/** Buttons */
|
11
|
-
actions?:
|
11
|
+
actions?: ReactNode;
|
12
12
|
/** Direction overwrite for the buttons */
|
13
13
|
actionsDirection?: FlexGridDirection;
|
14
14
|
/** Add a <Medallion /> element in there */
|
15
|
-
medallion?:
|
15
|
+
medallion?: ReactNode;
|
16
16
|
/** Plop in an `img` element or `svg` here */
|
17
|
-
illustration?:
|
17
|
+
illustration?: ReactNode;
|
18
18
|
/**
|
19
19
|
* UsageContext of the component
|
20
20
|
* @default "feature"
|
package/esm/Field/Field.d.ts
CHANGED
@@ -1,13 +1,13 @@
|
|
1
|
-
import
|
1
|
+
import type { FunctionComponent, ReactChild, ReactNode } from "react";
|
2
2
|
import { FieldState } from "./FieldStateContext";
|
3
3
|
export interface FieldProps {
|
4
4
|
/** @ignore */
|
5
5
|
className?: string;
|
6
6
|
/** Label to display above the nested input */
|
7
|
-
label?:
|
7
|
+
label?: ReactChild;
|
8
8
|
labelFor?: string;
|
9
9
|
/** Helpful description to show below the `Field` */
|
10
|
-
description?:
|
10
|
+
description?: ReactNode;
|
11
11
|
/**
|
12
12
|
* An object to handle state
|
13
13
|
* @default DEFAULT_STATE
|
package/esm/Field/Field.js
CHANGED
@@ -2,11 +2,12 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
|
|
2
2
|
|
3
3
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
|
4
4
|
|
5
|
-
import React from "react";
|
6
5
|
import cx from "classnames";
|
7
6
|
import { AlertCircle } from "react-feather";
|
8
7
|
import stl from "../styles/helpers/satellitePrefixer";
|
9
8
|
import FieldStateContext, { DEFAULT_STATE } from "./FieldStateContext";
|
9
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
10
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
10
11
|
|
11
12
|
/**
|
12
13
|
* Use text fields to help users enter, select, and search for text. Text fields are normally found within a form but can also be part of a modal, search, or card
|
@@ -52,29 +53,36 @@ export var Field = function Field(_ref) {
|
|
52
53
|
_ref$inline = _ref.inline,
|
53
54
|
inline = _ref$inline === void 0 ? false : _ref$inline,
|
54
55
|
children = _ref.children;
|
55
|
-
return /*#__PURE__*/
|
56
|
-
value: state
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
56
|
+
return /*#__PURE__*/_jsx(FieldStateContext.Provider, {
|
57
|
+
value: state,
|
58
|
+
children: /*#__PURE__*/_jsxs("div", {
|
59
|
+
className: className,
|
60
|
+
children: [/*#__PURE__*/_jsxs("label", {
|
61
|
+
className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["cursor-pointer flex ", ""])), !inline && "flex-col"),
|
62
|
+
htmlFor: labelFor,
|
63
|
+
children: [label && /*#__PURE__*/_jsx("div", {
|
64
|
+
className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["truncate ", ""])), inline ? "mr-2" : "mb-1"),
|
65
|
+
children: label
|
66
|
+
}), /*#__PURE__*/_jsx("div", {
|
67
|
+
className: cx(inline && stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["ml-auto mt-1"])))),
|
68
|
+
children: children
|
69
|
+
})]
|
70
|
+
}), state.status === "invalid" && state.errors.length > 0 ? /*#__PURE__*/_jsx("ul", {
|
71
|
+
className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["mb-1 mt-2 display-caption"]))),
|
72
|
+
children: state.errors.map(function (error) {
|
73
|
+
return /*#__PURE__*/_jsxs("li", {
|
74
|
+
className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["flex items-center"]))),
|
75
|
+
children: [/*#__PURE__*/_jsx(AlertCircle, {
|
76
|
+
className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["text-red-700 mr-1"]))),
|
77
|
+
size: "1rem"
|
78
|
+
}), error]
|
79
|
+
}, error);
|
80
|
+
})
|
81
|
+
}) : description ? /*#__PURE__*/_jsx("p", {
|
82
|
+
className: cx(stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["display-caption text-grey-600"]))), inline ? stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["mt-1"]))) : stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["mt-2"])))),
|
83
|
+
children: description
|
84
|
+
}) : null]
|
85
|
+
})
|
86
|
+
});
|
79
87
|
};
|
80
88
|
export default Field;
|
package/esm/Flag/Flag.d.ts
CHANGED
@@ -1,5 +1,5 @@
|
|
1
|
-
import { FunctionComponent } from "react";
|
2
|
-
import { Notification } from "./types";
|
1
|
+
import type { FunctionComponent } from "react";
|
2
|
+
import type { Notification } from "./types";
|
3
3
|
export declare type FlagProps = Omit<Notification, "id" | "content">;
|
4
4
|
export declare const Flag: FunctionComponent<FlagProps>;
|
5
5
|
export default Flag;
|
package/esm/Flag/Flag.js
CHANGED
@@ -3,13 +3,15 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
|
|
3
3
|
|
4
4
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
|
5
5
|
|
6
|
-
import React, { useEffect, useRef, useState } from "react";
|
7
6
|
import cx from "classnames";
|
8
|
-
import {
|
9
|
-
import
|
10
|
-
import ProgressSpinner from "../ProgressSpinner";
|
7
|
+
import { useEffect, useRef, useState } from "react";
|
8
|
+
import { Check, X } from "react-feather";
|
11
9
|
import { IconButton } from "../Button";
|
12
10
|
import { Card } from "../Card";
|
11
|
+
import ProgressSpinner from "../ProgressSpinner";
|
12
|
+
import stl from "../styles/helpers/satellitePrefixer";
|
13
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
14
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
13
15
|
var VARIANT_CLASSNAMES = {
|
14
16
|
grey: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["bg-grey-500"]))),
|
15
17
|
accent: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["bg-accent-500"]))),
|
@@ -57,35 +59,44 @@ export var Flag = function Flag(_ref) {
|
|
57
59
|
return clearTimeout(timer);
|
58
60
|
};
|
59
61
|
}, [autoDismissAfter, hovered]);
|
60
|
-
return /*#__PURE__*/
|
62
|
+
return /*#__PURE__*/_jsx(Card, {
|
61
63
|
fullBleed: true,
|
62
|
-
className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["flag shadow-z500"])))
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
64
|
+
className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["flag shadow-z500"]))),
|
65
|
+
children: /*#__PURE__*/_jsxs("div", {
|
66
|
+
className: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["p-4 flex"]))),
|
67
|
+
onMouseEnter: function onMouseEnter() {
|
68
|
+
return setHovered(true);
|
69
|
+
},
|
70
|
+
onMouseLeave: function onMouseLeave() {
|
71
|
+
return setHovered(false);
|
72
|
+
},
|
73
|
+
children: [loading ? /*#__PURE__*/_jsx(ProgressSpinner, {
|
74
|
+
size: 16,
|
75
|
+
className: cx(stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["mt-1"]))), VARIANT_SPINNER_CLASSNAMES[variant])
|
76
|
+
}) : /*#__PURE__*/_jsx(Icon, {
|
77
|
+
className: cx(stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["flex-shrink-0 text-white rounded-full p-2px mt-1"]))), VARIANT_CLASSNAMES[variant]),
|
78
|
+
size: 16
|
79
|
+
}), /*#__PURE__*/_jsxs("div", {
|
80
|
+
className: stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["flex-1 ml-4"]))),
|
81
|
+
children: [/*#__PURE__*/_jsxs("div", {
|
82
|
+
className: stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["flex justify-between"]))),
|
83
|
+
children: [hasTitle ? /*#__PURE__*/_jsx("h3", {
|
84
|
+
children: title
|
85
|
+
}) : /*#__PURE__*/_jsx("div", {
|
86
|
+
children: children
|
87
|
+
}), onDismiss && /*#__PURE__*/_jsx(IconButton, {
|
88
|
+
icon: X,
|
89
|
+
title: "Dismiss",
|
90
|
+
variant: "subtle",
|
91
|
+
size: "small",
|
92
|
+
onClick: onDismiss
|
93
|
+
})]
|
94
|
+
}), hasTitle && children && /*#__PURE__*/_jsx("div", {
|
95
|
+
className: stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["text-grey-600 mt-2"]))),
|
96
|
+
children: children
|
97
|
+
})]
|
98
|
+
})]
|
99
|
+
})
|
100
|
+
});
|
90
101
|
};
|
91
102
|
export default Flag;
|
package/esm/Flag/Flags.d.ts
CHANGED
@@ -1,5 +1,5 @@
|
|
1
|
-
|
2
|
-
import { Notification } from "./types";
|
1
|
+
/// <reference types="react" />
|
2
|
+
import type { Notification } from "./types";
|
3
3
|
export interface FlagsProps {
|
4
4
|
/**
|
5
5
|
* Array of notifications
|
@@ -44,5 +44,5 @@ export interface FlagsProps {
|
|
44
44
|
*
|
45
45
|
* When there are multiple flags, they will stack on top of one another with the most recent flag on top. When a user dismisses a flag, any older flags 'below' will come to the top. Careful consideration should be taken to take into account the ordering and priority of flags in the stack. Never use dismissible and non-dismissible flags in a stack as flags that automatically dismiss can do so and not be visible to the user.
|
46
46
|
*/
|
47
|
-
export declare const Flags: ({ notifications }: FlagsProps) =>
|
47
|
+
export declare const Flags: ({ notifications }: FlagsProps) => import("react").ReactPortal;
|
48
48
|
export default Flags;
|
package/esm/Flag/Flags.js
CHANGED
@@ -1,14 +1,19 @@
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
1
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
2
3
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
3
4
|
var _excluded = ["content", "id"];
|
4
5
|
|
5
6
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
6
7
|
|
7
|
-
|
8
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
9
|
+
|
10
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
11
|
+
|
8
12
|
import { createPortal } from "react-dom";
|
9
13
|
import { CSSTransition, TransitionGroup } from "react-transition-group";
|
10
14
|
import stl from "../styles/helpers/satellitePrefixer";
|
11
15
|
import Flag from "./Flag";
|
16
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
12
17
|
var TRANSITION_TIMEOUT = 500;
|
13
18
|
/**
|
14
19
|
* Use flags for messages containing confirmations, alerts, and acknowledgments that require minimal user interaction. These event-driven messages appear at the bottom of the screen and overlay any content.
|
@@ -51,27 +56,31 @@ var TRANSITION_TIMEOUT = 500;
|
|
51
56
|
export var Flags = function Flags(_ref) {
|
52
57
|
var _ref$notifications = _ref.notifications,
|
53
58
|
notifications = _ref$notifications === void 0 ? [] : _ref$notifications;
|
54
|
-
return /*#__PURE__*/createPortal( /*#__PURE__*/
|
59
|
+
return /*#__PURE__*/createPortal( /*#__PURE__*/_jsx(TransitionGroup, {
|
55
60
|
className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["z-notification bottom-0 right-0 fixed flex flex-col items-end p-4"]))),
|
56
|
-
component: "ul"
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
+
component: "ul",
|
62
|
+
children: notifications.map(function (_ref2) {
|
63
|
+
var content = _ref2.content,
|
64
|
+
id = _ref2.id,
|
65
|
+
rest = _objectWithoutProperties(_ref2, _excluded);
|
61
66
|
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
67
|
+
return /*#__PURE__*/_jsx(CSSTransition, {
|
68
|
+
classNames: {
|
69
|
+
enter: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flags_item-enter"]))),
|
70
|
+
enterActive: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["flags_item-enter-active"]))),
|
71
|
+
exit: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["flags_item-exit"]))),
|
72
|
+
exitActive: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["flags_item-exit-active"])))
|
73
|
+
},
|
74
|
+
timeout: TRANSITION_TIMEOUT,
|
75
|
+
appear: true,
|
76
|
+
children: /*#__PURE__*/_jsx("li", {
|
77
|
+
className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["mt-4"]))),
|
78
|
+
children: /*#__PURE__*/_jsx(Flag, _objectSpread(_objectSpread({}, rest), {}, {
|
79
|
+
children: content
|
80
|
+
}))
|
81
|
+
})
|
82
|
+
}, id);
|
83
|
+
})
|
84
|
+
}), document.body);
|
76
85
|
};
|
77
86
|
export default Flags;
|
package/esm/Flag/types.d.ts
CHANGED
@@ -1,12 +1,12 @@
|
|
1
|
-
|
2
|
-
import { IconComponentType } from "../types";
|
3
|
-
import { ColorVariant } from "../types";
|
1
|
+
import type { ReactNode } from "react";
|
2
|
+
import type { IconComponentType } from "../types";
|
3
|
+
import type { ColorVariant } from "../types";
|
4
4
|
export interface Notification {
|
5
5
|
/** Unique notification ID */
|
6
6
|
id: string;
|
7
7
|
title?: string;
|
8
8
|
/** Content goes here */
|
9
|
-
content:
|
9
|
+
content: ReactNode;
|
10
10
|
/** Icon to accompany the notification */
|
11
11
|
icon?: IconComponentType;
|
12
12
|
/** @default false */
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { FunctionComponent } from "react";
|
1
|
+
import type { FunctionComponent } from "react";
|
2
2
|
export declare type FlexGridDirection = "row" | "column";
|
3
3
|
export declare type FlexGridAlignment = "leading" | "trailing" | "center" | "fill" | "baseline";
|
4
4
|
export declare type FlexGridDistribution = "equalSpacing" | "leading" | "trailing" | "center" | "fill" | "fillEvenly";
|
package/esm/FlexGrid/FlexGrid.js
CHANGED
@@ -3,10 +3,11 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
|
|
3
3
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
|
4
4
|
|
5
5
|
// Heavily inspired by https://github.com/Shopify/polaris-react/blob/2b34f8609e9f08c1a767abea0a235bcc17706b63/src/components/Stack/Stack.tsx#L1
|
6
|
-
import React from "react";
|
7
6
|
import cx from "classnames";
|
7
|
+
import { Children, isValidElement } from "react";
|
8
8
|
import stl from "../styles/helpers/satellitePrefixer";
|
9
9
|
import isRenderedChild from "../utils/isRenderedChild";
|
10
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
10
11
|
var SPACING_CLASSNAMES = {
|
11
12
|
none: "",
|
12
13
|
sm: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex-grid-sm"]))),
|
@@ -48,12 +49,16 @@ export var FlexGrid = function FlexGrid(_ref) {
|
|
48
49
|
_ref$wrap = _ref.wrap,
|
49
50
|
wrap = _ref$wrap === void 0 ? false : _ref$wrap,
|
50
51
|
children = _ref.children;
|
51
|
-
return /*#__PURE__*/
|
52
|
-
className: cx(inline && stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["flex-grid-inline"]))), className)
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
52
|
+
return /*#__PURE__*/_jsx("div", {
|
53
|
+
className: cx(inline && stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["flex-grid-inline"]))), className),
|
54
|
+
children: /*#__PURE__*/_jsx("div", {
|
55
|
+
className: cx(stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["flex-grid-inner"]))), inline ? stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["inline-flex"]))) : stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["flex"]))), wrap && stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["flex-wrap"]))), SPACING_CLASSNAMES[spacing], DIRECTION_CLASSNAMES[direction], ALIGNMENT_CLASSNAMES[alignment], DISTRIBUTION_CLASSNAMES[distribution]),
|
56
|
+
children: Children.map(children, function (child) {
|
57
|
+
return /*#__PURE__*/isValidElement(child) ? child : isRenderedChild(child) ? /*#__PURE__*/_jsx("span", {
|
58
|
+
children: child
|
59
|
+
}) : child;
|
60
|
+
})
|
61
|
+
})
|
62
|
+
});
|
58
63
|
};
|
59
64
|
export default FlexGrid;
|