@carbon/react 1.86.0 → 1.87.0
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/.playwright/INTERNAL_AVT_REPORT_DO_NOT_USE.json +871 -871
- package/es/_virtual/_rollupPluginBabelHelpers.js +4 -4
- package/es/components/Button/Button.Skeleton.js +2 -1
- package/es/components/Button/Button.d.ts +1 -1
- package/es/components/Button/Button.js +3 -3
- package/es/components/Button/ButtonBase.js +2 -0
- package/es/components/Button/index.js +5 -1
- package/es/components/ButtonSet/index.js +4 -1
- package/es/components/Checkbox/index.js +4 -1
- package/es/components/CodeSnippet/CodeSnippet.js +1 -0
- package/es/components/ComboBox/ComboBox.d.ts +7 -0
- package/es/components/ComboBox/ComboBox.js +11 -2
- package/es/components/ComboBox/index.js +4 -1
- package/es/components/ComposedModal/ComposedModal.js +18 -8
- package/es/components/ContainedList/ContainedList.d.ts +1 -1
- package/es/components/ContainedList/ContainedList.js +3 -3
- package/es/components/ContainedList/ContainedListItem/index.js +4 -1
- package/es/components/ContainedList/index.js +2 -2
- package/es/components/Copy/Copy.js +1 -1
- package/es/components/Copy/index.js +4 -1
- package/es/components/CopyButton/index.js +4 -1
- package/es/components/DataTable/Table.js +1 -1
- package/es/components/DataTable/state/getDerivedStateFromProps.d.ts +19 -0
- package/es/components/DataTable/state/getDerivedStateFromProps.js +1 -2
- package/es/components/DataTable/state/sorting.d.ts +15 -0
- package/es/components/DataTable/state/sorting.js +1 -2
- package/es/components/DataTable/tools/denormalize.d.ts +22 -0
- package/es/components/DataTable/tools/denormalize.js +1 -2
- package/es/components/DataTable/tools/normalize.d.ts +9 -0
- package/es/components/DataTable/tools/normalize.js +1 -2
- package/es/components/DatePicker/DatePicker.js +18 -11
- package/es/components/DatePicker/index.js +4 -1
- package/es/components/DatePicker/plugins/fixEventsPlugin.d.ts +2 -0
- package/es/components/DatePicker/plugins/rangePlugin.d.ts +2 -0
- package/es/components/DatePickerInput/DatePickerInput.js +6 -0
- package/es/components/DatePickerInput/index.js +4 -1
- package/es/components/Dialog/index.js +2 -2
- package/es/components/Dropdown/Dropdown.Skeleton.js +4 -4
- package/es/components/Dropdown/Dropdown.js +2 -2
- package/es/components/Dropdown/index.js +4 -1
- package/es/components/FeatureFlags/index.js +2 -2
- package/es/components/FluidNumberInput/FluidNumberInput.d.ts +3 -2
- package/es/components/FluidNumberInput/FluidNumberInput.js +3 -2
- package/es/components/FluidSelect/index.js +4 -1
- package/es/components/FluidTextInput/index.js +4 -1
- package/es/components/IconButton/index.d.ts +1 -1
- package/es/components/IconIndicator/index.js +1 -1
- package/es/components/InlineCheckbox/index.js +4 -1
- package/es/components/InlineLoading/index.js +4 -1
- package/es/components/LayoutDirection/LayoutDirection.js +1 -2
- package/es/components/Link/index.js +4 -1
- package/es/components/ListBox/ListBox.js +1 -1
- package/es/components/Loading/index.js +4 -1
- package/es/components/Menu/Menu.d.ts +3 -1
- package/es/components/Menu/Menu.js +3 -1
- package/es/components/Menu/MenuItem.js +1 -1
- package/es/components/Modal/Modal.js +16 -5
- package/es/components/Modal/index.js +4 -1
- package/es/components/MultiSelect/FilterableMultiSelect.d.ts +7 -0
- package/es/components/MultiSelect/FilterableMultiSelect.js +20 -10
- package/es/components/MultiSelect/MultiSelect.js +2 -2
- package/es/components/MultiSelect/filter.js +0 -4
- package/es/components/MultiSelect/tools/itemToString.d.ts +1 -0
- package/es/components/MultiSelect/tools/sorting.d.ts +9 -0
- package/es/components/Notification/Notification.js +2 -2
- package/es/components/NumberInput/NumberInput.d.ts +3 -2
- package/es/components/NumberInput/NumberInput.js +5 -4
- package/es/components/OverflowMenu/next/index.js +1 -1
- package/es/components/OverflowMenuItem/index.js +4 -1
- package/es/components/OverflowMenuV2/index.d.ts +1 -0
- package/es/components/PageHeader/PageHeader.js +1 -1
- package/es/components/Pagination/experimental/PageSelector.d.ts +19 -0
- package/es/components/Pagination/experimental/Pagination.d.ts +43 -0
- package/es/components/Pagination/experimental/index.d.ts +3 -0
- package/es/components/Popover/index.js +26 -8
- package/es/components/RadioButton/index.js +4 -1
- package/es/components/RadioTile/index.js +4 -1
- package/es/components/Search/Search.js +1 -1
- package/es/components/Search/index.js +4 -1
- package/es/components/Select/index.js +4 -1
- package/es/components/SelectItem/index.js +4 -1
- package/es/components/ShapeIndicator/index.js +1 -1
- package/es/components/SkeletonText/index.js +4 -1
- package/es/components/Slider/Slider.js +1 -1
- package/es/components/Switch/IconSwitch.d.ts +3 -0
- package/es/components/Switch/IconSwitch.js +1 -2
- package/es/components/TabContent/TabContent.js +2 -22
- package/es/components/Tabs/Tabs.js +5 -5
- package/es/components/Tag/DismissibleTag.js +1 -1
- package/es/components/TextArea/TextArea.js +1 -1
- package/es/components/TextArea/index.js +4 -1
- package/es/components/TextInput/index.js +4 -1
- package/es/components/TextInput/util.d.ts +9 -0
- package/es/components/Toggletip/index.d.ts +1 -1
- package/es/components/Toggletip/index.js +3 -3
- package/es/components/UIShell/HeaderMenu.js +2 -2
- package/es/components/UIShell/SideNav.js +1 -1
- package/es/components/UIShell/_utils.d.ts +7 -0
- package/es/feature-flags.d.ts +1 -0
- package/es/internal/FloatingMenu.js +1 -1
- package/es/internal/deprecateFieldOnObject.js +1 -1
- package/es/internal/useEvent.d.ts +2 -2
- package/es/internal/useEvent.js +4 -3
- package/es/internal/useId.d.ts +21 -0
- package/es/internal/useId.js +27 -1
- package/es/internal/useOverflowItems.js +0 -6
- package/es/node_modules/es-toolkit/dist/compat/function/{debounce.mjs.js → debounce.js} +1 -1
- package/es/node_modules/es-toolkit/dist/compat/function/{throttle.mjs.js → throttle.js} +1 -1
- package/es/prop-types/deprecateComponent.d.ts +1 -0
- package/es/prop-types/deprecateComponent.js +1 -4
- package/es/prop-types/deprecateValuesWithin.d.ts +1 -0
- package/es/prop-types/requiredIfGivenPropIsTruthy.d.ts +14 -0
- package/es/tools/mergeRefs.d.ts +12 -0
- package/es/tools/mergeRefs.js +1 -2
- package/icons/index.js +1 -3
- package/lib/_virtual/_rollupPluginBabelHelpers.js +5 -7
- package/lib/components/AILabel/index.js +35 -43
- package/lib/components/AISkeleton/AISkeletonIcon.js +5 -11
- package/lib/components/AISkeleton/AISkeletonPlaceholder.js +4 -10
- package/lib/components/AISkeleton/AISkeletonText.js +8 -14
- package/lib/components/Accordion/Accordion.Skeleton.js +21 -27
- package/lib/components/Accordion/Accordion.js +11 -17
- package/lib/components/Accordion/AccordionItem.js +19 -25
- package/lib/components/Accordion/AccordionProvider.js +1 -7
- package/lib/components/AspectRatio/AspectRatio.js +7 -13
- package/lib/components/BadgeIndicator/index.js +7 -13
- package/lib/components/Breadcrumb/Breadcrumb.Skeleton.js +7 -13
- package/lib/components/Breadcrumb/Breadcrumb.js +9 -15
- package/lib/components/Breadcrumb/BreadcrumbItem.js +16 -22
- package/lib/components/Button/Button.Skeleton.js +9 -14
- package/lib/components/Button/Button.d.ts +1 -1
- package/lib/components/Button/Button.js +32 -37
- package/lib/components/Button/ButtonBase.js +8 -11
- package/lib/components/Button/index.js +3 -3
- package/lib/components/ButtonSet/ButtonSet.js +6 -12
- package/lib/components/ButtonSet/index.js +2 -2
- package/lib/components/ChatButton/ChatButton.Skeleton.js +5 -11
- package/lib/components/ChatButton/ChatButton.js +12 -18
- package/lib/components/Checkbox/Checkbox.Skeleton.js +6 -12
- package/lib/components/Checkbox/Checkbox.js +33 -39
- package/lib/components/Checkbox/index.js +3 -3
- package/lib/components/CheckboxGroup/CheckboxGroup.js +24 -30
- package/lib/components/ClassPrefix/index.js +3 -10
- package/lib/components/CodeSnippet/CodeSnippet.Skeleton.js +10 -16
- package/lib/components/CodeSnippet/CodeSnippet.js +40 -46
- package/lib/components/ComboBox/ComboBox.d.ts +7 -0
- package/lib/components/ComboBox/ComboBox.js +65 -63
- package/lib/components/ComboBox/index.js +2 -2
- package/lib/components/ComboButton/index.js +20 -28
- package/lib/components/ComposedModal/ComposedModal.js +61 -57
- package/lib/components/ComposedModal/ModalFooter.js +37 -45
- package/lib/components/ComposedModal/ModalHeader.js +23 -31
- package/lib/components/ContainedList/ContainedList.d.ts +1 -1
- package/lib/components/ContainedList/ContainedList.js +19 -25
- package/lib/components/ContainedList/ContainedListItem/ContainedListItem.js +14 -20
- package/lib/components/ContainedList/ContainedListItem/index.js +2 -2
- package/lib/components/ContainedList/index.js +5 -5
- package/lib/components/ContentSwitcher/ContentSwitcher.js +11 -19
- package/lib/components/ContextMenu/useContextMenu.js +1 -1
- package/lib/components/Copy/Copy.js +12 -18
- package/lib/components/Copy/index.js +2 -2
- package/lib/components/CopyButton/CopyButton.js +12 -18
- package/lib/components/CopyButton/index.js +2 -2
- package/lib/components/DangerButton/DangerButton.js +2 -6
- package/lib/components/DataTable/DataTable.js +48 -55
- package/lib/components/DataTable/Table.js +18 -24
- package/lib/components/DataTable/TableActionList.js +2 -2
- package/lib/components/DataTable/TableBatchAction.js +4 -9
- package/lib/components/DataTable/TableBatchActions.js +19 -25
- package/lib/components/DataTable/TableBody.js +5 -10
- package/lib/components/DataTable/TableCell.js +8 -14
- package/lib/components/DataTable/TableContainer.js +14 -20
- package/lib/components/DataTable/TableContext.js +0 -2
- package/lib/components/DataTable/TableDecoratorRow.js +5 -11
- package/lib/components/DataTable/TableExpandHeader.js +16 -22
- package/lib/components/DataTable/TableExpandRow.js +20 -26
- package/lib/components/DataTable/TableExpandedRow.js +8 -14
- package/lib/components/DataTable/TableHead.js +2 -2
- package/lib/components/DataTable/TableHeader.js +26 -32
- package/lib/components/DataTable/TableRow.js +8 -14
- package/lib/components/DataTable/TableSelectAll.js +13 -19
- package/lib/components/DataTable/TableSelectRow.js +15 -21
- package/lib/components/DataTable/TableSlugRow.js +7 -13
- package/lib/components/DataTable/TableToolbar.js +7 -13
- package/lib/components/DataTable/TableToolbarAction.js +5 -10
- package/lib/components/DataTable/TableToolbarContent.js +2 -2
- package/lib/components/DataTable/TableToolbarMenu.js +9 -15
- package/lib/components/DataTable/TableToolbarSearch.js +22 -28
- package/lib/components/DataTable/state/getDerivedStateFromProps.d.ts +19 -0
- package/lib/components/DataTable/state/getDerivedStateFromProps.js +2 -3
- package/lib/components/DataTable/state/sortStates.js +0 -2
- package/lib/components/DataTable/state/sorting.d.ts +15 -0
- package/lib/components/DataTable/state/sorting.js +0 -2
- package/lib/components/DataTable/tools/cells.js +0 -2
- package/lib/components/DataTable/tools/denormalize.d.ts +22 -0
- package/lib/components/DataTable/tools/denormalize.js +1 -2
- package/lib/components/DataTable/tools/filter.js +0 -2
- package/lib/components/DataTable/tools/normalize.d.ts +9 -0
- package/lib/components/DataTable/tools/normalize.js +1 -2
- package/lib/components/DataTable/tools/sorting.js +0 -2
- package/lib/components/DataTableSkeleton/DataTableSkeleton.js +25 -31
- package/lib/components/DatePicker/DatePicker.Skeleton.js +14 -20
- package/lib/components/DatePicker/DatePicker.js +65 -66
- package/lib/components/DatePicker/index.js +3 -3
- package/lib/components/DatePicker/plugins/appendToPlugin.js +0 -2
- package/lib/components/DatePicker/plugins/fixEventsPlugin.d.ts +2 -0
- package/lib/components/DatePicker/plugins/fixEventsPlugin.js +1 -1
- package/lib/components/DatePicker/plugins/rangePlugin.d.ts +2 -0
- package/lib/components/DatePicker/plugins/rangePlugin.js +2 -6
- package/lib/components/DatePickerInput/DatePickerInput.js +49 -49
- package/lib/components/DatePickerInput/index.js +2 -2
- package/lib/components/Dialog/index.js +72 -80
- package/lib/components/Dropdown/Dropdown.Skeleton.js +10 -16
- package/lib/components/Dropdown/Dropdown.js +49 -55
- package/lib/components/Dropdown/index.js +3 -3
- package/lib/components/ErrorBoundary/ErrorBoundary.js +4 -9
- package/lib/components/ErrorBoundary/ErrorBoundaryContext.js +0 -2
- package/lib/components/ExpandableSearch/ExpandableSearch.js +6 -11
- package/lib/components/FeatureFlags/index.js +10 -17
- package/lib/components/FileUploader/FileUploader.Skeleton.js +7 -13
- package/lib/components/FileUploader/FileUploader.js +30 -36
- package/lib/components/FileUploader/FileUploaderButton.js +19 -25
- package/lib/components/FileUploader/FileUploaderDropContainer.js +18 -24
- package/lib/components/FileUploader/FileUploaderItem.js +23 -29
- package/lib/components/FileUploader/Filename.js +13 -18
- package/lib/components/FluidComboBox/FluidComboBox.Skeleton.js +7 -13
- package/lib/components/FluidComboBox/FluidComboBox.js +24 -30
- package/lib/components/FluidDatePicker/FluidDatePicker.Skeleton.js +14 -20
- package/lib/components/FluidDatePicker/FluidDatePicker.js +12 -18
- package/lib/components/FluidDatePickerInput/FluidDatePickerInput.js +4 -8
- package/lib/components/FluidDropdown/FluidDropdown.Skeleton.js +7 -13
- package/lib/components/FluidDropdown/FluidDropdown.js +24 -30
- package/lib/components/FluidForm/FluidForm.js +6 -12
- package/lib/components/FluidForm/FormContext.js +0 -2
- package/lib/components/FluidMultiSelect/FluidMultiSelect.Skeleton.js +7 -13
- package/lib/components/FluidMultiSelect/FluidMultiSelect.js +36 -42
- package/lib/components/FluidNumberInput/FluidNumberInput.Skeleton.js +7 -13
- package/lib/components/FluidNumberInput/FluidNumberInput.d.ts +3 -2
- package/lib/components/FluidNumberInput/FluidNumberInput.js +33 -38
- package/lib/components/FluidSearch/FluidSearch.Skeleton.js +7 -13
- package/lib/components/FluidSearch/FluidSearch.js +19 -25
- package/lib/components/FluidSelect/FluidSelect.Skeleton.js +7 -13
- package/lib/components/FluidSelect/FluidSelect.js +17 -23
- package/lib/components/FluidSelect/index.js +3 -3
- package/lib/components/FluidTextArea/FluidTextArea.Skeleton.js +7 -13
- package/lib/components/FluidTextArea/FluidTextArea.js +25 -31
- package/lib/components/FluidTextInput/FluidPasswordInput.js +18 -22
- package/lib/components/FluidTextInput/FluidTextInput.Skeleton.js +7 -13
- package/lib/components/FluidTextInput/FluidTextInput.js +23 -29
- package/lib/components/FluidTextInput/index.js +3 -3
- package/lib/components/FluidTimePicker/FluidTimePicker.Skeleton.js +6 -12
- package/lib/components/FluidTimePicker/FluidTimePicker.js +23 -29
- package/lib/components/FluidTimePickerSelect/FluidTimePickerSelect.js +10 -15
- package/lib/components/Form/Form.js +5 -11
- package/lib/components/FormGroup/FormGroup.js +13 -19
- package/lib/components/FormItem/FormItem.js +5 -11
- package/lib/components/FormLabel/FormLabel.js +6 -12
- package/lib/components/Grid/CSSGrid.js +20 -28
- package/lib/components/Grid/Column.js +31 -37
- package/lib/components/Grid/ColumnHang.js +5 -13
- package/lib/components/Grid/FlexGrid.js +10 -18
- package/lib/components/Grid/Grid.js +9 -16
- package/lib/components/Grid/GridContext.js +7 -14
- package/lib/components/Grid/Row.js +8 -14
- package/lib/components/Heading/index.js +14 -21
- package/lib/components/Icon/Icon.Skeleton.js +4 -10
- package/lib/components/IconButton/index.d.ts +1 -1
- package/lib/components/IconButton/index.js +25 -33
- package/lib/components/IconIndicator/index.js +9 -15
- package/lib/components/IdPrefix/index.js +3 -10
- package/lib/components/InlineCheckbox/InlineCheckbox.js +17 -22
- package/lib/components/InlineCheckbox/index.js +2 -2
- package/lib/components/InlineLoading/InlineLoading.js +17 -23
- package/lib/components/InlineLoading/index.js +2 -2
- package/lib/components/Layer/LayerContext.js +1 -7
- package/lib/components/Layer/LayerLevel.js +0 -2
- package/lib/components/Layer/index.js +11 -19
- package/lib/components/Layout/index.js +22 -30
- package/lib/components/LayoutDirection/LayoutDirection.js +6 -13
- package/lib/components/LayoutDirection/LayoutDirectionContext.js +1 -7
- package/lib/components/LayoutDirection/useLayoutDirection.js +0 -2
- package/lib/components/Link/Link.js +15 -21
- package/lib/components/Link/index.js +2 -2
- package/lib/components/ListBox/ListBox.js +17 -23
- package/lib/components/ListBox/ListBoxField.js +7 -12
- package/lib/components/ListBox/ListBoxMenu.js +7 -12
- package/lib/components/ListBox/ListBoxMenuIcon.js +7 -13
- package/lib/components/ListBox/ListBoxMenuItem.js +9 -15
- package/lib/components/ListBox/ListBoxPropTypes.js +2 -8
- package/lib/components/ListBox/ListBoxSelection.js +14 -20
- package/lib/components/ListBox/index.js +7 -7
- package/lib/components/ListBox/next/ListBoxSelection.js +18 -24
- package/lib/components/ListBox/next/ListBoxTrigger.js +7 -13
- package/lib/components/ListItem/ListItem.js +5 -11
- package/lib/components/Loading/Loading.js +14 -20
- package/lib/components/Loading/index.js +2 -2
- package/lib/components/Menu/Menu.d.ts +3 -1
- package/lib/components/Menu/Menu.js +18 -24
- package/lib/components/Menu/MenuContext.js +0 -2
- package/lib/components/Menu/MenuItem.js +44 -52
- package/lib/components/MenuButton/index.js +16 -24
- package/lib/components/Modal/Modal.js +91 -86
- package/lib/components/Modal/index.js +2 -2
- package/lib/components/ModalWrapper/ModalWrapper.js +30 -35
- package/lib/components/MultiSelect/FilterableMultiSelect.d.ts +7 -0
- package/lib/components/MultiSelect/FilterableMultiSelect.js +71 -71
- package/lib/components/MultiSelect/MultiSelect.js +61 -70
- package/lib/components/MultiSelect/MultiSelectPropTypes.js +2 -8
- package/lib/components/MultiSelect/filter.js +0 -6
- package/lib/components/MultiSelect/tools/itemToString.d.ts +1 -0
- package/lib/components/MultiSelect/tools/itemToString.js +1 -7
- package/lib/components/MultiSelect/tools/sorting.d.ts +9 -0
- package/lib/components/MultiSelect/tools/sorting.js +0 -2
- package/lib/components/Notification/Notification.js +118 -126
- package/lib/components/NumberInput/NumberFormatPropTypes.js +21 -27
- package/lib/components/NumberInput/NumberInput.Skeleton.js +8 -14
- package/lib/components/NumberInput/NumberInput.d.ts +3 -2
- package/lib/components/NumberInput/NumberInput.js +70 -77
- package/lib/components/OrderedList/OrderedList.js +8 -14
- package/lib/components/OverflowMenu/OverflowMenu.js +42 -49
- package/lib/components/OverflowMenu/index.js +3 -7
- package/lib/components/OverflowMenu/next/index.js +18 -26
- package/lib/components/OverflowMenuItem/OverflowMenuItem.js +27 -33
- package/lib/components/OverflowMenuItem/index.js +2 -2
- package/lib/components/OverflowMenuV2/index.d.ts +1 -0
- package/lib/components/OverflowMenuV2/index.js +2 -8
- package/lib/components/PageHeader/PageHeader.js +70 -78
- package/lib/components/PageHeader/index.js +0 -2
- package/lib/components/Pagination/Pagination.Skeleton.js +10 -16
- package/lib/components/Pagination/Pagination.js +44 -51
- package/lib/components/Pagination/experimental/PageSelector.d.ts +19 -0
- package/lib/components/Pagination/experimental/PageSelector.js +9 -15
- package/lib/components/Pagination/experimental/Pagination.d.ts +43 -0
- package/lib/components/Pagination/experimental/Pagination.js +34 -40
- package/lib/components/Pagination/experimental/index.d.ts +3 -0
- package/lib/components/PaginationNav/PaginationNav.js +54 -60
- package/lib/components/Popover/index.js +60 -50
- package/lib/components/PrimaryButton/PrimaryButton.js +2 -6
- package/lib/components/ProgressBar/ProgressBar.js +25 -31
- package/lib/components/ProgressIndicator/ProgressIndicator.Skeleton.js +10 -16
- package/lib/components/ProgressIndicator/ProgressIndicator.js +41 -49
- package/lib/components/RadioButton/RadioButton.Skeleton.js +6 -12
- package/lib/components/RadioButton/RadioButton.js +26 -32
- package/lib/components/RadioButton/index.js +2 -2
- package/lib/components/RadioButtonGroup/RadioButtonGroup.js +37 -43
- package/lib/components/RadioTile/RadioTile.js +25 -31
- package/lib/components/RadioTile/index.js +2 -2
- package/lib/components/Search/Search.Skeleton.js +7 -13
- package/lib/components/Search/Search.js +33 -39
- package/lib/components/Search/index.js +3 -3
- package/lib/components/SecondaryButton/SecondaryButton.js +2 -6
- package/lib/components/Select/Select.Skeleton.js +8 -14
- package/lib/components/Select/Select.js +42 -48
- package/lib/components/Select/index.js +3 -3
- package/lib/components/SelectItem/SelectItem.js +8 -14
- package/lib/components/SelectItem/index.js +2 -2
- package/lib/components/SelectItemGroup/SelectItemGroup.js +7 -13
- package/lib/components/ShapeIndicator/index.js +12 -18
- package/lib/components/SkeletonIcon/SkeletonIcon.js +4 -10
- package/lib/components/SkeletonPlaceholder/SkeletonPlaceholder.js +4 -10
- package/lib/components/SkeletonText/SkeletonText.js +11 -17
- package/lib/components/SkeletonText/index.js +2 -2
- package/lib/components/Slider/Slider.Skeleton.js +29 -35
- package/lib/components/Slider/Slider.js +84 -90
- package/lib/components/Slider/SliderHandles.js +18 -24
- package/lib/components/Slider/index.js +3 -3
- package/lib/components/Stack/HStack.js +1 -7
- package/lib/components/Stack/Stack.js +7 -15
- package/lib/components/Stack/VStack.js +1 -7
- package/lib/components/StructuredList/StructuredList.Skeleton.js +15 -21
- package/lib/components/StructuredList/StructuredList.js +60 -68
- package/lib/components/Switch/IconSwitch.d.ts +3 -0
- package/lib/components/Switch/IconSwitch.js +18 -25
- package/lib/components/Switch/Switch.js +14 -20
- package/lib/components/TabContent/TabContent.js +7 -33
- package/lib/components/Tabs/Tabs.Skeleton.js +10 -16
- package/lib/components/Tabs/Tabs.js +121 -129
- package/lib/components/Tabs/usePressable.js +0 -2
- package/lib/components/Tag/DismissibleTag.js +24 -30
- package/lib/components/Tag/OperationalTag.js +16 -22
- package/lib/components/Tag/SelectableTag.js +19 -25
- package/lib/components/Tag/Tag.Skeleton.js +5 -11
- package/lib/components/Tag/Tag.js +28 -34
- package/lib/components/Tag/isEllipsisActive.js +0 -2
- package/lib/components/Text/Text.js +6 -13
- package/lib/components/Text/TextDirection.js +4 -11
- package/lib/components/Text/TextDirectionContext.js +0 -2
- package/lib/components/Text/createTextComponent.js +1 -7
- package/lib/components/Text/index.js +0 -2
- package/lib/components/TextArea/TextArea.Skeleton.js +7 -13
- package/lib/components/TextArea/TextArea.js +49 -55
- package/lib/components/TextArea/index.js +3 -3
- package/lib/components/TextInput/ControlledPasswordInput.js +36 -42
- package/lib/components/TextInput/PasswordInput.js +48 -54
- package/lib/components/TextInput/TextInput.Skeleton.js +7 -13
- package/lib/components/TextInput/TextInput.js +47 -53
- package/lib/components/TextInput/index.js +3 -3
- package/lib/components/TextInput/util.d.ts +9 -0
- package/lib/components/TextInput/util.js +0 -2
- package/lib/components/Theme/index.js +16 -24
- package/lib/components/Tile/Tile.js +92 -100
- package/lib/components/TileGroup/TileGroup.js +15 -22
- package/lib/components/TimePicker/TimePicker.js +39 -45
- package/lib/components/TimePickerSelect/TimePickerSelect.js +10 -16
- package/lib/components/Toggle/Toggle.Skeleton.js +7 -13
- package/lib/components/Toggle/Toggle.js +28 -34
- package/lib/components/ToggleSmall/ToggleSmall.Skeleton.js +12 -20
- package/lib/components/Toggletip/index.d.ts +1 -1
- package/lib/components/Toggletip/index.js +33 -41
- package/lib/components/Tooltip/DefinitionTooltip.js +14 -22
- package/lib/components/Tooltip/Tooltip.js +19 -27
- package/lib/components/TreeView/TreeContext.js +0 -2
- package/lib/components/TreeView/TreeNode.js +41 -47
- package/lib/components/TreeView/TreeView.js +17 -23
- package/lib/components/UIShell/Content.js +6 -12
- package/lib/components/UIShell/Header.js +4 -10
- package/lib/components/UIShell/HeaderContainer.js +4 -9
- package/lib/components/UIShell/HeaderGlobalAction.js +11 -17
- package/lib/components/UIShell/HeaderGlobalBar.js +2 -2
- package/lib/components/UIShell/HeaderMenu.js +17 -23
- package/lib/components/UIShell/HeaderMenuButton.js +9 -15
- package/lib/components/UIShell/HeaderMenuItem.js +11 -17
- package/lib/components/UIShell/HeaderName.js +8 -14
- package/lib/components/UIShell/HeaderNavigation.js +6 -12
- package/lib/components/UIShell/HeaderPanel.js +11 -17
- package/lib/components/UIShell/HeaderSideNavItems.js +6 -12
- package/lib/components/UIShell/Link.js +6 -11
- package/lib/components/UIShell/SideNav.js +23 -29
- package/lib/components/UIShell/SideNavDetails.js +7 -13
- package/lib/components/UIShell/SideNavDivider.js +5 -11
- package/lib/components/UIShell/SideNavFooter.js +12 -18
- package/lib/components/UIShell/SideNavHeader.js +8 -14
- package/lib/components/UIShell/SideNavIcon.js +6 -12
- package/lib/components/UIShell/SideNavItem.js +6 -12
- package/lib/components/UIShell/SideNavItems.js +9 -15
- package/lib/components/UIShell/SideNavLink.js +13 -19
- package/lib/components/UIShell/SideNavLinkText.js +5 -11
- package/lib/components/UIShell/SideNavMenu.js +20 -26
- package/lib/components/UIShell/SideNavMenuItem.js +13 -19
- package/lib/components/UIShell/SideNavSwitcher.js +13 -19
- package/lib/components/UIShell/SkipToContent.js +7 -13
- package/lib/components/UIShell/Switcher.js +9 -15
- package/lib/components/UIShell/SwitcherDivider.js +4 -10
- package/lib/components/UIShell/SwitcherItem.js +15 -21
- package/lib/components/UIShell/_utils.d.ts +7 -0
- package/lib/components/UIShell/_utils.js +0 -2
- package/lib/components/UnorderedList/UnorderedList.js +7 -13
- package/lib/feature-flags.d.ts +1 -0
- package/lib/feature-flags.js +3 -4
- package/lib/index.js +180 -182
- package/lib/internal/FloatingMenu.js +10 -18
- package/lib/internal/OptimizedResize.js +2 -8
- package/lib/internal/Selection.js +1 -7
- package/lib/internal/clamp.js +0 -2
- package/lib/internal/createClassWrapper.js +1 -7
- package/lib/internal/deprecateFieldOnObject.js +1 -3
- package/lib/internal/environment.js +0 -2
- package/lib/internal/getAnnouncement.js +0 -2
- package/lib/internal/keyboard/keys.js +0 -2
- package/lib/internal/keyboard/match.js +0 -2
- package/lib/internal/keyboard/navigation.js +0 -2
- package/lib/internal/noopFn.js +0 -2
- package/lib/internal/useAttachedMenu.js +0 -2
- package/lib/internal/useControllableState.js +0 -2
- package/lib/internal/useDelayedState.js +0 -2
- package/lib/internal/useEvent.d.ts +2 -2
- package/lib/internal/useEvent.js +4 -5
- package/lib/internal/useId.d.ts +21 -0
- package/lib/internal/useId.js +27 -7
- package/lib/internal/useIdPrefix.js +2 -8
- package/lib/internal/useIsomorphicEffect.js +1 -1
- package/lib/internal/useMatchMedia.js +0 -2
- package/lib/internal/useMergedRefs.js +0 -2
- package/lib/internal/useNoInteractiveChildren.js +0 -2
- package/lib/internal/useNormalizedInputProps.js +2 -8
- package/lib/internal/useOutsideClick.js +0 -2
- package/lib/internal/useOverflowItems.js +1 -7
- package/lib/internal/usePrefix.js +2 -8
- package/lib/internal/usePreviousValue.js +0 -2
- package/lib/internal/useResizeObserver.js +0 -2
- package/lib/internal/useSavedCallback.js +0 -2
- package/lib/internal/utils.js +0 -2
- package/lib/internal/warning.js +0 -2
- package/lib/internal/wrapFocus.js +0 -2
- package/lib/node_modules/es-toolkit/dist/compat/function/{debounce.mjs.js → debounce.js} +1 -3
- package/lib/node_modules/es-toolkit/dist/compat/function/{throttle.mjs.js → throttle.js} +1 -3
- package/lib/node_modules/es-toolkit/dist/function/{debounce.mjs.js → debounce.js} +0 -2
- package/lib/prop-types/AriaPropTypes.js +2 -8
- package/lib/prop-types/deprecate.js +0 -2
- package/lib/prop-types/deprecateComponent.d.ts +1 -0
- package/lib/prop-types/deprecateComponent.js +2 -5
- package/lib/prop-types/deprecateValuesWithin.d.ts +1 -0
- package/lib/prop-types/deprecateValuesWithin.js +1 -1
- package/lib/prop-types/isRequiredOneOf.js +0 -2
- package/lib/prop-types/requiredIfGivenPropIsTruthy.d.ts +14 -0
- package/lib/prop-types/requiredIfGivenPropIsTruthy.js +1 -1
- package/lib/tools/events.js +0 -2
- package/lib/tools/mapPopoverAlign.js +0 -2
- package/lib/tools/mergeRefs.d.ts +12 -0
- package/lib/tools/mergeRefs.js +1 -2
- package/lib/tools/setupGetInstanceId.js +0 -2
- package/lib/tools/toggleClass.js +0 -2
- package/lib/tools/wrapComponent.js +4 -10
- package/package.json +12 -12
- package/telemetry.yml +1 -0
- /package/es/node_modules/es-toolkit/dist/function/{debounce.mjs.js → debounce.js} +0 -0
|
@@ -17,12 +17,6 @@ var usePrefix = require('../../internal/usePrefix.js');
|
|
|
17
17
|
var deprecate = require('../../prop-types/deprecate.js');
|
|
18
18
|
var iconsReact = require('@carbon/icons-react');
|
|
19
19
|
|
|
20
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
21
|
-
|
|
22
|
-
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
|
23
|
-
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
|
|
24
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
25
|
-
|
|
26
20
|
const frFn = React.forwardRef;
|
|
27
21
|
const TimePicker = frFn((props, ref) => {
|
|
28
22
|
const {
|
|
@@ -52,8 +46,8 @@ const TimePicker = frFn((props, ref) => {
|
|
|
52
46
|
...rest
|
|
53
47
|
} = props;
|
|
54
48
|
const prefix = usePrefix.usePrefix();
|
|
55
|
-
const [isValue, setValue] =
|
|
56
|
-
const [prevValue, setPrevValue] =
|
|
49
|
+
const [isValue, setValue] = React.useState(value);
|
|
50
|
+
const [prevValue, setPrevValue] = React.useState(value);
|
|
57
51
|
if (value !== prevValue) {
|
|
58
52
|
setValue(value);
|
|
59
53
|
setPrevValue(value);
|
|
@@ -80,11 +74,11 @@ const TimePicker = frFn((props, ref) => {
|
|
|
80
74
|
onBlur(evt);
|
|
81
75
|
}
|
|
82
76
|
}
|
|
83
|
-
const timePickerInputClasses =
|
|
77
|
+
const timePickerInputClasses = cx(`${prefix}--time-picker__input-field`, `${prefix}--text-input`, [inputClassName], {
|
|
84
78
|
[`${prefix}--text-input--light`]: light,
|
|
85
79
|
[`${prefix}--time-picker__input-field-error`]: invalid || warning
|
|
86
80
|
});
|
|
87
|
-
const timePickerClasses =
|
|
81
|
+
const timePickerClasses = cx({
|
|
88
82
|
[`${prefix}--time-picker`]: true,
|
|
89
83
|
[`${prefix}--time-picker--light`]: light,
|
|
90
84
|
[`${prefix}--time-picker--invalid`]: invalid,
|
|
@@ -95,11 +89,11 @@ const TimePicker = frFn((props, ref) => {
|
|
|
95
89
|
[pickerClassName]: true
|
|
96
90
|
})
|
|
97
91
|
});
|
|
98
|
-
const labelClasses =
|
|
92
|
+
const labelClasses = cx(`${prefix}--label`, {
|
|
99
93
|
[`${prefix}--visually-hidden`]: hideLabel,
|
|
100
94
|
[`${prefix}--label--disabled`]: disabled
|
|
101
95
|
});
|
|
102
|
-
const label = labelText ? /*#__PURE__*/
|
|
96
|
+
const label = labelText ? /*#__PURE__*/React.createElement("label", {
|
|
103
97
|
htmlFor: id,
|
|
104
98
|
className: labelClasses
|
|
105
99
|
}, labelText) : null;
|
|
@@ -121,10 +115,10 @@ const TimePicker = frFn((props, ref) => {
|
|
|
121
115
|
}
|
|
122
116
|
}
|
|
123
117
|
};
|
|
124
|
-
const mappedChildren =
|
|
118
|
+
const mappedChildren = React.Children.map(children, pickerSelect => {
|
|
125
119
|
const item = pickerSelect;
|
|
126
120
|
if (item) {
|
|
127
|
-
return /*#__PURE__*/
|
|
121
|
+
return /*#__PURE__*/React.cloneElement(item, {
|
|
128
122
|
...item.props,
|
|
129
123
|
disabled: item.props.disabled ?? disabled,
|
|
130
124
|
readOnly: readOnly,
|
|
@@ -137,13 +131,13 @@ const TimePicker = frFn((props, ref) => {
|
|
|
137
131
|
const readOnlyProps = {
|
|
138
132
|
readOnly: readOnly
|
|
139
133
|
};
|
|
140
|
-
return /*#__PURE__*/
|
|
141
|
-
className:
|
|
142
|
-
}, label, /*#__PURE__*/
|
|
134
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
135
|
+
className: cx(`${prefix}--form-item`, className)
|
|
136
|
+
}, label, /*#__PURE__*/React.createElement("div", {
|
|
143
137
|
className: timePickerClasses
|
|
144
|
-
}, /*#__PURE__*/
|
|
138
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
145
139
|
className: `${prefix}--time-picker__input`
|
|
146
|
-
}, /*#__PURE__*/
|
|
140
|
+
}, /*#__PURE__*/React.createElement("input", _rollupPluginBabelHelpers.extends({
|
|
147
141
|
className: timePickerInputClasses,
|
|
148
142
|
"data-invalid": invalid ? invalid : undefined,
|
|
149
143
|
disabled: disabled,
|
|
@@ -157,15 +151,15 @@ const TimePicker = frFn((props, ref) => {
|
|
|
157
151
|
ref: ref,
|
|
158
152
|
type: type,
|
|
159
153
|
value: value
|
|
160
|
-
}, rest, readOnlyProps)), (invalid || warning) && /*#__PURE__*/
|
|
154
|
+
}, rest, readOnlyProps)), (invalid || warning) && /*#__PURE__*/React.createElement("div", {
|
|
161
155
|
className: `${prefix}--time-picker__error__icon`
|
|
162
|
-
}, invalid ? /*#__PURE__*/
|
|
156
|
+
}, invalid ? /*#__PURE__*/React.createElement(iconsReact.WarningFilled, {
|
|
163
157
|
className: `${prefix}--checkbox__invalid-icon`,
|
|
164
158
|
size: 16
|
|
165
|
-
}) : /*#__PURE__*/
|
|
159
|
+
}) : /*#__PURE__*/React.createElement(iconsReact.WarningAltFilled, {
|
|
166
160
|
className: `${prefix}--text-input__invalid-icon--warning`,
|
|
167
161
|
size: 16
|
|
168
|
-
}))), getInternalPickerSelects()), (invalid || warning) && /*#__PURE__*/
|
|
162
|
+
}))), getInternalPickerSelects()), (invalid || warning) && /*#__PURE__*/React.createElement("div", {
|
|
169
163
|
className: `${prefix}--form-requirement`
|
|
170
164
|
}, invalid ? invalidText : warningText));
|
|
171
165
|
});
|
|
@@ -173,91 +167,91 @@ TimePicker.propTypes = {
|
|
|
173
167
|
/**
|
|
174
168
|
* Pass in the children that will be rendered next to the form control
|
|
175
169
|
*/
|
|
176
|
-
children:
|
|
170
|
+
children: PropTypes.node,
|
|
177
171
|
/**
|
|
178
172
|
* Specify an optional className to be applied to the container node
|
|
179
173
|
*/
|
|
180
|
-
className:
|
|
174
|
+
className: PropTypes.string,
|
|
181
175
|
/**
|
|
182
176
|
* Specify whether the `<input>` should be disabled
|
|
183
177
|
*/
|
|
184
|
-
disabled:
|
|
178
|
+
disabled: PropTypes.bool,
|
|
185
179
|
/**
|
|
186
180
|
* Specify whether you want the underlying label to be visually hidden
|
|
187
181
|
*/
|
|
188
|
-
hideLabel:
|
|
182
|
+
hideLabel: PropTypes.bool,
|
|
189
183
|
/**
|
|
190
184
|
* Specify a custom `id` for the `<input>`
|
|
191
185
|
*/
|
|
192
|
-
id:
|
|
186
|
+
id: PropTypes.string.isRequired,
|
|
193
187
|
/**
|
|
194
188
|
* Specify whether the control is currently invalid
|
|
195
189
|
*/
|
|
196
|
-
invalid:
|
|
190
|
+
invalid: PropTypes.bool,
|
|
197
191
|
/**
|
|
198
192
|
* Provide the text that is displayed when the control is in an invalid state
|
|
199
193
|
*/
|
|
200
|
-
invalidText:
|
|
194
|
+
invalidText: PropTypes.node,
|
|
201
195
|
/**
|
|
202
196
|
* Provide the text that will be read by a screen reader when visiting this
|
|
203
197
|
* control
|
|
204
198
|
*/
|
|
205
|
-
labelText:
|
|
199
|
+
labelText: PropTypes.node,
|
|
206
200
|
/**
|
|
207
201
|
* The `light` prop for `TimePicker` has been deprecated. It will be removed in v12. Use the `Layer` component instead.
|
|
208
202
|
*/
|
|
209
|
-
light: deprecate.deprecate(
|
|
203
|
+
light: deprecate.deprecate(PropTypes.bool, 'The `light` prop for `TimePicker` is no longer needed and has been deprecated. It will be removed in the next major release. Use the `Layer` component instead.'),
|
|
210
204
|
/**
|
|
211
205
|
* Specify the maximum length of the time string in `<input>`
|
|
212
206
|
*/
|
|
213
|
-
maxLength:
|
|
207
|
+
maxLength: PropTypes.number,
|
|
214
208
|
/**
|
|
215
209
|
* Optionally provide an `onBlur` handler that is called whenever the
|
|
216
210
|
* `<input>` loses focus
|
|
217
211
|
*/
|
|
218
|
-
onBlur:
|
|
212
|
+
onBlur: PropTypes.func,
|
|
219
213
|
/**
|
|
220
214
|
* Optionally provide an `onChange` handler that is called whenever `<input>`
|
|
221
215
|
* is updated
|
|
222
216
|
*/
|
|
223
|
-
onChange:
|
|
217
|
+
onChange: PropTypes.func,
|
|
224
218
|
/**
|
|
225
219
|
* Optionally provide an `onClick` handler that is called whenever the
|
|
226
220
|
* `<input>` is clicked
|
|
227
221
|
*/
|
|
228
|
-
onClick:
|
|
222
|
+
onClick: PropTypes.func,
|
|
229
223
|
/**
|
|
230
224
|
* Specify the regular expression working as the pattern of the time string in `<input>`
|
|
231
225
|
*/
|
|
232
|
-
pattern:
|
|
226
|
+
pattern: PropTypes.string,
|
|
233
227
|
/**
|
|
234
228
|
* Specify the placeholder attribute for the `<input>`
|
|
235
229
|
*/
|
|
236
|
-
placeholder:
|
|
230
|
+
placeholder: PropTypes.string,
|
|
237
231
|
/**
|
|
238
232
|
* Specify whether the TimePicker should be read-only
|
|
239
233
|
*/
|
|
240
|
-
readOnly:
|
|
234
|
+
readOnly: PropTypes.bool,
|
|
241
235
|
/**
|
|
242
236
|
* Specify the size of the Time Picker.
|
|
243
237
|
*/
|
|
244
|
-
size:
|
|
238
|
+
size: PropTypes.oneOf(['sm', 'md', 'lg']),
|
|
245
239
|
/**
|
|
246
240
|
* Specify the type of the `<input>`
|
|
247
241
|
*/
|
|
248
|
-
type:
|
|
242
|
+
type: PropTypes.string,
|
|
249
243
|
/**
|
|
250
244
|
* Specify the value of the `<input>`
|
|
251
245
|
*/
|
|
252
|
-
value:
|
|
246
|
+
value: PropTypes.string,
|
|
253
247
|
/**
|
|
254
248
|
* Specify a warning message
|
|
255
249
|
*/
|
|
256
|
-
warning:
|
|
250
|
+
warning: PropTypes.bool,
|
|
257
251
|
/**
|
|
258
252
|
* Provide the text that is displayed when the control is in an warning state
|
|
259
253
|
*/
|
|
260
|
-
warningText:
|
|
254
|
+
warningText: PropTypes.node
|
|
261
255
|
};
|
|
262
256
|
|
|
263
|
-
exports
|
|
257
|
+
exports.default = TimePicker;
|
|
@@ -16,12 +16,6 @@ var PropTypes = require('prop-types');
|
|
|
16
16
|
var React = require('react');
|
|
17
17
|
var usePrefix = require('../../internal/usePrefix.js');
|
|
18
18
|
|
|
19
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
20
|
-
|
|
21
|
-
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
|
22
|
-
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
|
|
23
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
24
|
-
|
|
25
19
|
const frFn = React.forwardRef;
|
|
26
20
|
const TimePickerSelect = frFn((props, ref) => {
|
|
27
21
|
const {
|
|
@@ -33,22 +27,22 @@ const TimePickerSelect = frFn((props, ref) => {
|
|
|
33
27
|
...rest
|
|
34
28
|
} = props;
|
|
35
29
|
const prefix = usePrefix.usePrefix();
|
|
36
|
-
const selectClasses =
|
|
30
|
+
const selectClasses = cx({
|
|
37
31
|
[`${prefix}--select`]: true,
|
|
38
32
|
[`${prefix}--time-picker__select`]: true,
|
|
39
33
|
...(className && {
|
|
40
34
|
[className]: true
|
|
41
35
|
})
|
|
42
36
|
});
|
|
43
|
-
return /*#__PURE__*/
|
|
37
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
44
38
|
className: selectClasses
|
|
45
|
-
}, /*#__PURE__*/
|
|
39
|
+
}, /*#__PURE__*/React.createElement("select", _rollupPluginBabelHelpers.extends({
|
|
46
40
|
"aria-label": ariaLabel,
|
|
47
41
|
className: `${prefix}--select-input`,
|
|
48
42
|
disabled: disabled,
|
|
49
43
|
id: id,
|
|
50
44
|
ref: ref
|
|
51
|
-
}, rest), children), /*#__PURE__*/
|
|
45
|
+
}, rest), children), /*#__PURE__*/React.createElement(iconsReact.ChevronDown, {
|
|
52
46
|
className: `${prefix}--select__arrow`,
|
|
53
47
|
"aria-hidden": "true"
|
|
54
48
|
}));
|
|
@@ -57,23 +51,23 @@ TimePickerSelect.propTypes = {
|
|
|
57
51
|
/**
|
|
58
52
|
* Provide the contents of your TimePickerSelect
|
|
59
53
|
*/
|
|
60
|
-
children:
|
|
54
|
+
children: PropTypes.node,
|
|
61
55
|
/**
|
|
62
56
|
* Specify an optional className to be applied to the node containing the label and the select box
|
|
63
57
|
*/
|
|
64
|
-
className:
|
|
58
|
+
className: PropTypes.string,
|
|
65
59
|
/**
|
|
66
60
|
* Optionally provide the default value of the `<select>`
|
|
67
61
|
*/
|
|
68
|
-
defaultValue:
|
|
62
|
+
defaultValue: PropTypes.any,
|
|
69
63
|
/**
|
|
70
64
|
* Specify whether the control is disabled
|
|
71
65
|
*/
|
|
72
|
-
disabled:
|
|
66
|
+
disabled: PropTypes.bool,
|
|
73
67
|
/**
|
|
74
68
|
* Specify a custom `id` for the `<select>`
|
|
75
69
|
*/
|
|
76
|
-
id:
|
|
70
|
+
id: PropTypes.string.isRequired
|
|
77
71
|
};
|
|
78
72
|
|
|
79
|
-
exports
|
|
73
|
+
exports.default = TimePickerSelect;
|
|
@@ -15,30 +15,24 @@ var React = require('react');
|
|
|
15
15
|
var cx = require('classnames');
|
|
16
16
|
var usePrefix = require('../../internal/usePrefix.js');
|
|
17
17
|
|
|
18
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
19
|
-
|
|
20
|
-
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
|
|
21
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
22
|
-
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
|
23
|
-
|
|
24
18
|
const ToggleSkeleton = ({
|
|
25
19
|
className,
|
|
26
20
|
...rest
|
|
27
21
|
}) => {
|
|
28
22
|
const prefix = usePrefix.usePrefix();
|
|
29
|
-
const skeletonClassNames =
|
|
30
|
-
return /*#__PURE__*/
|
|
23
|
+
const skeletonClassNames = cx(`${prefix}--toggle ${prefix}--toggle--skeleton`, className);
|
|
24
|
+
return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
|
|
31
25
|
className: skeletonClassNames
|
|
32
|
-
}, rest), /*#__PURE__*/
|
|
26
|
+
}, rest), /*#__PURE__*/React.createElement("div", {
|
|
33
27
|
className: `${prefix}--toggle__skeleton-circle`
|
|
34
|
-
}), /*#__PURE__*/
|
|
28
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
35
29
|
className: `${prefix}--toggle__skeleton-rectangle`
|
|
36
30
|
}));
|
|
37
31
|
};
|
|
38
32
|
ToggleSkeleton.propTypes = {
|
|
39
|
-
'aria-label':
|
|
40
|
-
className:
|
|
33
|
+
'aria-label': PropTypes.string,
|
|
34
|
+
className: PropTypes.string
|
|
41
35
|
};
|
|
42
36
|
|
|
43
37
|
exports.ToggleSkeleton = ToggleSkeleton;
|
|
44
|
-
exports
|
|
38
|
+
exports.default = ToggleSkeleton;
|
|
@@ -18,12 +18,6 @@ var usePrefix = require('../../internal/usePrefix.js');
|
|
|
18
18
|
require('../Text/index.js');
|
|
19
19
|
var Text = require('../Text/Text.js');
|
|
20
20
|
|
|
21
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
22
|
-
|
|
23
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
24
|
-
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
|
|
25
|
-
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
|
26
|
-
|
|
27
21
|
var _path;
|
|
28
22
|
function Toggle({
|
|
29
23
|
'aria-labelledby': ariaLabelledby,
|
|
@@ -61,24 +55,24 @@ function Toggle({
|
|
|
61
55
|
const sideLabel = hideLabel ? labelText : checked ? labelB : labelA;
|
|
62
56
|
const renderSideLabel = !(hideLabel && !labelText);
|
|
63
57
|
const LabelComponent = labelText ? 'label' : 'div';
|
|
64
|
-
const wrapperClasses =
|
|
58
|
+
const wrapperClasses = cx(`${prefix}--toggle`, {
|
|
65
59
|
[`${prefix}--toggle--disabled`]: disabled,
|
|
66
60
|
[`${prefix}--toggle--readonly`]: readOnly
|
|
67
61
|
}, className);
|
|
68
|
-
const labelTextClasses =
|
|
62
|
+
const labelTextClasses = cx(`${prefix}--toggle__label-text`, {
|
|
69
63
|
[`${prefix}--visually-hidden`]: hideLabel
|
|
70
64
|
});
|
|
71
|
-
const appearanceClasses =
|
|
65
|
+
const appearanceClasses = cx(`${prefix}--toggle__appearance`, {
|
|
72
66
|
[`${prefix}--toggle__appearance--sm`]: isSm
|
|
73
67
|
});
|
|
74
|
-
const switchClasses =
|
|
68
|
+
const switchClasses = cx(`${prefix}--toggle__switch`, {
|
|
75
69
|
[`${prefix}--toggle__switch--checked`]: checked
|
|
76
70
|
});
|
|
77
71
|
const labelId = `${id}_label`;
|
|
78
72
|
return (
|
|
79
73
|
/*#__PURE__*/
|
|
80
74
|
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
|
|
81
|
-
|
|
75
|
+
React.createElement("div", {
|
|
82
76
|
className: wrapperClasses,
|
|
83
77
|
onClick: !labelText ? e => {
|
|
84
78
|
// the underlying <button> can only be activated by keyboard as it is visually hidden;
|
|
@@ -91,7 +85,7 @@ function Toggle({
|
|
|
91
85
|
buttonElement.current.focus();
|
|
92
86
|
}
|
|
93
87
|
} : undefined
|
|
94
|
-
}, /*#__PURE__*/
|
|
88
|
+
}, /*#__PURE__*/React.createElement("button", _rollupPluginBabelHelpers.extends({}, other, {
|
|
95
89
|
ref: buttonElement,
|
|
96
90
|
id: id,
|
|
97
91
|
className: `${prefix}--toggle__button`,
|
|
@@ -101,26 +95,26 @@ function Toggle({
|
|
|
101
95
|
"aria-labelledby": ariaLabelledby ?? (labelText ? labelId : undefined),
|
|
102
96
|
disabled: disabled,
|
|
103
97
|
onClick: handleClick
|
|
104
|
-
})), /*#__PURE__*/
|
|
98
|
+
})), /*#__PURE__*/React.createElement(LabelComponent, {
|
|
105
99
|
id: labelId,
|
|
106
100
|
htmlFor: ariaLabelledby ? undefined : id,
|
|
107
101
|
className: `${prefix}--toggle__label`
|
|
108
|
-
}, labelText && /*#__PURE__*/
|
|
102
|
+
}, labelText && /*#__PURE__*/React.createElement(Text.Text, {
|
|
109
103
|
className: labelTextClasses
|
|
110
|
-
}, labelText), /*#__PURE__*/
|
|
104
|
+
}, labelText), /*#__PURE__*/React.createElement("div", {
|
|
111
105
|
className: appearanceClasses
|
|
112
|
-
}, /*#__PURE__*/
|
|
106
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
113
107
|
className: switchClasses
|
|
114
|
-
}, isSm && /*#__PURE__*/
|
|
108
|
+
}, isSm && /*#__PURE__*/React.createElement("svg", {
|
|
115
109
|
"aria-hidden": "true",
|
|
116
110
|
focusable: "false",
|
|
117
111
|
className: `${prefix}--toggle__check`,
|
|
118
112
|
width: "6px",
|
|
119
113
|
height: "5px",
|
|
120
114
|
viewBox: "0 0 6 5"
|
|
121
|
-
}, _path || (_path = /*#__PURE__*/
|
|
115
|
+
}, _path || (_path = /*#__PURE__*/React.createElement("path", {
|
|
122
116
|
d: "M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"
|
|
123
|
-
})))), renderSideLabel && /*#__PURE__*/
|
|
117
|
+
})))), renderSideLabel && /*#__PURE__*/React.createElement(Text.Text, {
|
|
124
118
|
className: `${prefix}--toggle__text`,
|
|
125
119
|
"aria-hidden": "true"
|
|
126
120
|
}, sideLabel))))
|
|
@@ -130,64 +124,64 @@ Toggle.propTypes = {
|
|
|
130
124
|
/**
|
|
131
125
|
* Specify another element's id to be used as the label for this toggle
|
|
132
126
|
*/
|
|
133
|
-
'aria-labelledby':
|
|
127
|
+
'aria-labelledby': PropTypes.string,
|
|
134
128
|
/**
|
|
135
129
|
* Specify a custom className to apply to the form-item node
|
|
136
130
|
*/
|
|
137
|
-
className:
|
|
131
|
+
className: PropTypes.string,
|
|
138
132
|
/**
|
|
139
133
|
* Specify whether the toggle should be on by default
|
|
140
134
|
*/
|
|
141
|
-
defaultToggled:
|
|
135
|
+
defaultToggled: PropTypes.bool,
|
|
142
136
|
/**
|
|
143
137
|
* Whether this control should be disabled
|
|
144
138
|
*/
|
|
145
|
-
disabled:
|
|
139
|
+
disabled: PropTypes.bool,
|
|
146
140
|
/**
|
|
147
141
|
* If true, the side labels (props.labelA and props.labelB) will be replaced by
|
|
148
142
|
* props.labelText (if passed), so that the toggle doesn't render a top label.
|
|
149
143
|
*/
|
|
150
|
-
hideLabel:
|
|
144
|
+
hideLabel: PropTypes.bool,
|
|
151
145
|
/**
|
|
152
146
|
* Provide an id that unique represents the underlying `<button>`
|
|
153
147
|
*/
|
|
154
|
-
id:
|
|
148
|
+
id: PropTypes.string.isRequired,
|
|
155
149
|
/**
|
|
156
150
|
* Specify the label for the "off" position
|
|
157
151
|
*/
|
|
158
|
-
labelA:
|
|
152
|
+
labelA: PropTypes.node,
|
|
159
153
|
/**
|
|
160
154
|
* Specify the label for the "on" position
|
|
161
155
|
*/
|
|
162
|
-
labelB:
|
|
156
|
+
labelB: PropTypes.node,
|
|
163
157
|
/**
|
|
164
158
|
* Provide the text that will be read by a screen reader when visiting this
|
|
165
159
|
* control. This should be provided unless 'aria-labelledby' is set instead
|
|
166
160
|
* or you use an external <label> element with its "for" attribute set to the
|
|
167
161
|
* toggle's id.
|
|
168
162
|
*/
|
|
169
|
-
labelText:
|
|
163
|
+
labelText: PropTypes.string,
|
|
170
164
|
/**
|
|
171
165
|
* Provide an event listener that is called when the control is clicked
|
|
172
166
|
*/
|
|
173
|
-
onClick:
|
|
167
|
+
onClick: PropTypes.func,
|
|
174
168
|
/**
|
|
175
169
|
* Provide an event listener that is called when the control is toggled
|
|
176
170
|
*/
|
|
177
|
-
onToggle:
|
|
171
|
+
onToggle: PropTypes.func,
|
|
178
172
|
/**
|
|
179
173
|
* Whether the toggle should be read-only
|
|
180
174
|
*/
|
|
181
|
-
readOnly:
|
|
175
|
+
readOnly: PropTypes.bool,
|
|
182
176
|
/**
|
|
183
177
|
* Specify the size of the Toggle. Currently only supports 'sm' or 'md' (default)
|
|
184
178
|
*/
|
|
185
|
-
size:
|
|
179
|
+
size: PropTypes.oneOf(['sm', 'md']),
|
|
186
180
|
/**
|
|
187
181
|
* Specify whether the control is toggled
|
|
188
182
|
*/
|
|
189
|
-
toggled:
|
|
183
|
+
toggled: PropTypes.bool
|
|
190
184
|
};
|
|
191
185
|
|
|
192
186
|
exports.Toggle = Toggle;
|
|
193
|
-
exports
|
|
187
|
+
exports.default = Toggle;
|
|
@@ -7,20 +7,12 @@
|
|
|
7
7
|
|
|
8
8
|
'use strict';
|
|
9
9
|
|
|
10
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
11
|
-
|
|
12
10
|
var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
|
|
13
11
|
var PropTypes = require('prop-types');
|
|
14
12
|
var React = require('react');
|
|
15
13
|
var cx = require('classnames');
|
|
16
14
|
var usePrefix = require('../../internal/usePrefix.js');
|
|
17
15
|
|
|
18
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
19
|
-
|
|
20
|
-
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
|
|
21
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
22
|
-
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
|
23
|
-
|
|
24
16
|
var _path;
|
|
25
17
|
const ToggleSmallSkeleton = ({
|
|
26
18
|
id,
|
|
@@ -29,44 +21,44 @@ const ToggleSmallSkeleton = ({
|
|
|
29
21
|
...rest
|
|
30
22
|
}) => {
|
|
31
23
|
const prefix = React.useContext(usePrefix.PrefixContext);
|
|
32
|
-
return /*#__PURE__*/
|
|
33
|
-
className:
|
|
34
|
-
}, rest), /*#__PURE__*/
|
|
24
|
+
return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
|
|
25
|
+
className: cx(`${prefix}--form-item`, className)
|
|
26
|
+
}, rest), /*#__PURE__*/React.createElement("input", {
|
|
35
27
|
type: "checkbox",
|
|
36
28
|
id: id,
|
|
37
29
|
className: `${prefix}--toggle ${prefix}--toggle--small ${prefix}--skeleton`
|
|
38
|
-
}), /*#__PURE__*/
|
|
30
|
+
}), /*#__PURE__*/React.createElement("label", {
|
|
39
31
|
className: `${prefix}--toggle__label ${prefix}--skeleton`,
|
|
40
32
|
htmlFor: id
|
|
41
|
-
}, labelText && /*#__PURE__*/
|
|
33
|
+
}, labelText && /*#__PURE__*/React.createElement("span", {
|
|
42
34
|
className: `${prefix}--toggle__label-text`
|
|
43
|
-
}, labelText), /*#__PURE__*/
|
|
35
|
+
}, labelText), /*#__PURE__*/React.createElement("span", {
|
|
44
36
|
className: `${prefix}--toggle__appearance`
|
|
45
|
-
}, /*#__PURE__*/
|
|
37
|
+
}, /*#__PURE__*/React.createElement("svg", {
|
|
46
38
|
className: `${prefix}--toggle__check`,
|
|
47
39
|
width: "6px",
|
|
48
40
|
height: "5px",
|
|
49
41
|
viewBox: "0 0 6 5"
|
|
50
|
-
}, _path || (_path = /*#__PURE__*/
|
|
42
|
+
}, _path || (_path = /*#__PURE__*/React.createElement("path", {
|
|
51
43
|
d: "M2.2403 2.7299L4.9245 0 6 1.1117 2.2384 5 0 2.6863 1.0612 1.511z"
|
|
52
44
|
}))))));
|
|
53
45
|
};
|
|
54
46
|
ToggleSmallSkeleton.propTypes = {
|
|
55
|
-
['aria-label']:
|
|
47
|
+
['aria-label']: PropTypes.string.isRequired,
|
|
56
48
|
/**
|
|
57
49
|
* Specify an optional className to add to the form item wrapper.
|
|
58
50
|
*/
|
|
59
|
-
className:
|
|
51
|
+
className: PropTypes.string,
|
|
60
52
|
/**
|
|
61
53
|
* Provide an id that unique represents the underlying `<input>`
|
|
62
54
|
*/
|
|
63
|
-
id:
|
|
55
|
+
id: PropTypes.string,
|
|
64
56
|
/**
|
|
65
57
|
* Provide the text that will be read by a screen reader when visiting this
|
|
66
58
|
* control. `aria-label` is always required but will be `null` if `labelText`
|
|
67
59
|
* is also provided.
|
|
68
60
|
*/
|
|
69
|
-
labelText:
|
|
61
|
+
labelText: PropTypes.string
|
|
70
62
|
};
|
|
71
63
|
|
|
72
64
|
exports.ToggleSmallSkeleton = ToggleSmallSkeleton;
|
|
@@ -58,7 +58,7 @@ export declare namespace Toggletip {
|
|
|
58
58
|
*/
|
|
59
59
|
align: PropTypes.Requireable<string>;
|
|
60
60
|
/**
|
|
61
|
-
* Provide an offset value for alignment axis.
|
|
61
|
+
* **Experimental:** Provide an offset value for alignment axis. Only takes effect when `autoalign` is enabled.
|
|
62
62
|
*/
|
|
63
63
|
alignmentAxisOffset: PropTypes.Requireable<number>;
|
|
64
64
|
/**
|