@carbon/react 1.82.1 → 1.83.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 +943 -828
- package/es/components/AILabel/index.js +13 -13
- package/es/components/AISkeleton/AISkeletonIcon.js +2 -2
- package/es/components/AISkeleton/AISkeletonPlaceholder.js +2 -2
- package/es/components/AISkeleton/AISkeletonText.js +2 -2
- package/es/components/Accordion/Accordion.Skeleton.js +15 -15
- package/es/components/Accordion/Accordion.js +3 -3
- package/es/components/Accordion/AccordionItem.js +9 -9
- package/es/components/Accordion/AccordionProvider.js +2 -2
- package/es/components/AccordionItem/index.d.ts +9 -0
- package/es/components/AspectRatio/AspectRatio.js +2 -2
- package/es/components/BadgeIndicator/index.js +3 -3
- package/es/components/Breadcrumb/Breadcrumb.Skeleton.js +5 -5
- package/es/components/Breadcrumb/Breadcrumb.js +3 -3
- package/es/components/Breadcrumb/BreadcrumbItem.js +9 -9
- package/es/components/Button/Button.Skeleton.js +3 -3
- package/es/components/Button/Button.js +5 -5
- package/es/components/Button/ButtonBase.js +5 -5
- package/es/components/ButtonSet/ButtonSet.js +2 -2
- package/es/components/ChatButton/ChatButton.Skeleton.js +2 -2
- package/es/components/ChatButton/ChatButton.js +3 -3
- package/es/components/Checkbox/Checkbox.Skeleton.js +4 -4
- package/es/components/Checkbox/Checkbox.js +15 -15
- package/es/components/CheckboxGroup/CheckboxGroup.js +12 -12
- package/es/components/ClassPrefix/index.js +2 -2
- package/es/components/CodeSnippet/CodeSnippet.Skeleton.js +7 -7
- package/es/components/CodeSnippet/CodeSnippet.js +16 -16
- package/es/components/ComboBox/ComboBox.js +18 -18
- package/es/components/ComboButton/index.js +7 -7
- package/es/components/ComposedModal/ComposedModal.js +20 -20
- package/es/components/ComposedModal/ModalFooter.js +8 -8
- package/es/components/ComposedModal/ModalHeader.js +8 -8
- package/es/components/ContainedList/ContainedList.js +7 -7
- package/es/components/ContainedList/ContainedListItem/ContainedListItem.js +7 -7
- package/es/components/ContentSwitcher/ContentSwitcher.d.ts +8 -0
- package/es/components/ContentSwitcher/ContentSwitcher.js +13 -7
- package/es/components/Copy/Copy.js +2 -2
- package/es/components/CopyButton/CopyButton.js +4 -4
- package/es/components/DangerButton/DangerButton.js +2 -2
- package/es/components/DataTable/DataTable.d.ts +81 -283
- package/es/components/DataTable/DataTable.js +83 -123
- package/es/components/DataTable/Table.d.ts +2 -2
- package/es/components/DataTable/Table.js +4 -4
- package/es/components/DataTable/TableActionList.d.ts +1 -1
- package/es/components/DataTable/TableBatchAction.js +2 -2
- package/es/components/DataTable/TableBatchActions.js +9 -9
- package/es/components/DataTable/TableBody.d.ts +3 -3
- package/es/components/DataTable/TableBody.js +2 -2
- package/es/components/DataTable/TableCell.d.ts +3 -4
- package/es/components/DataTable/TableCell.js +2 -2
- package/es/components/DataTable/TableContainer.d.ts +2 -3
- package/es/components/DataTable/TableContainer.js +6 -6
- package/es/components/DataTable/TableDecoratorRow.js +4 -4
- package/es/components/DataTable/TableExpandHeader.d.ts +2 -3
- package/es/components/DataTable/TableExpandHeader.js +4 -4
- package/es/components/DataTable/TableExpandRow.js +8 -8
- package/es/components/DataTable/TableExpandedRow.d.ts +3 -3
- package/es/components/DataTable/TableExpandedRow.js +4 -4
- package/es/components/DataTable/TableHead.d.ts +1 -1
- package/es/components/DataTable/TableHeader.d.ts +4 -4
- package/es/components/DataTable/TableHeader.js +15 -15
- package/es/components/DataTable/TableRow.d.ts +3 -4
- package/es/components/DataTable/TableRow.js +4 -4
- package/es/components/DataTable/TableSelectAll.js +3 -3
- package/es/components/DataTable/TableSelectRow.js +4 -4
- package/es/components/DataTable/TableSlugRow.js +3 -3
- package/es/components/DataTable/TableToolbar.js +2 -2
- package/es/components/DataTable/TableToolbarAction.js +2 -2
- package/es/components/DataTable/TableToolbarContent.d.ts +1 -1
- package/es/components/DataTable/TableToolbarMenu.js +2 -2
- package/es/components/DataTable/TableToolbarSearch.js +2 -2
- package/es/components/DataTable/index.d.ts +1 -1
- package/es/components/DataTableSkeleton/DataTableSkeleton.js +15 -15
- package/es/components/DatePicker/DatePicker.Skeleton.js +8 -8
- package/es/components/DatePicker/DatePicker.d.ts +1 -1
- package/es/components/DatePicker/DatePicker.js +23 -20
- package/es/components/DatePickerInput/DatePickerInput.d.ts +3 -4
- package/es/components/DatePickerInput/DatePickerInput.js +19 -19
- package/es/components/Dialog/index.d.ts +5 -6
- package/es/components/Dialog/index.js +10 -10
- package/es/components/Dropdown/Dropdown.Skeleton.d.ts +2 -3
- package/es/components/Dropdown/Dropdown.Skeleton.js +4 -4
- package/es/components/Dropdown/Dropdown.d.ts +3 -3
- package/es/components/Dropdown/Dropdown.js +18 -18
- package/es/components/ErrorBoundary/ErrorBoundary.js +2 -2
- package/es/components/ExpandableSearch/ExpandableSearch.js +3 -3
- package/es/components/FeatureFlags/index.js +2 -2
- package/es/components/FileUploader/FileUploader.Skeleton.d.ts +3 -3
- package/es/components/FileUploader/FileUploader.Skeleton.js +5 -5
- package/es/components/FileUploader/FileUploader.d.ts +2 -3
- package/es/components/FileUploader/FileUploader.js +12 -12
- package/es/components/FileUploader/FileUploaderButton.d.ts +3 -4
- package/es/components/FileUploader/FileUploaderButton.js +6 -5
- package/es/components/FileUploader/FileUploaderDropContainer.d.ts +2 -3
- package/es/components/FileUploader/FileUploaderDropContainer.js +5 -5
- package/es/components/FileUploader/FileUploaderItem.d.ts +2 -3
- package/es/components/FileUploader/FileUploaderItem.js +13 -13
- package/es/components/FileUploader/Filename.d.ts +3 -4
- package/es/components/FileUploader/Filename.js +7 -7
- package/es/components/FluidComboBox/FluidComboBox.Skeleton.js +5 -5
- package/es/components/FluidComboBox/FluidComboBox.js +4 -4
- package/es/components/FluidDatePicker/FluidDatePicker.Skeleton.js +11 -11
- package/es/components/FluidDatePicker/FluidDatePicker.js +4 -4
- package/es/components/FluidDatePickerInput/FluidDatePickerInput.js +3 -3
- package/es/components/FluidDropdown/FluidDropdown.Skeleton.js +5 -5
- package/es/components/FluidDropdown/FluidDropdown.js +4 -4
- package/es/components/FluidForm/FluidForm.d.ts +3 -4
- package/es/components/FluidForm/FluidForm.js +3 -3
- package/es/components/FluidMultiSelect/FluidMultiSelect.Skeleton.js +5 -5
- package/es/components/FluidMultiSelect/FluidMultiSelect.js +5 -5
- package/es/components/FluidNumberInput/FluidNumberInput.Skeleton.js +5 -5
- package/es/components/FluidNumberInput/FluidNumberInput.js +4 -4
- package/es/components/FluidSearch/FluidSearch.Skeleton.js +5 -5
- package/es/components/FluidSearch/FluidSearch.js +4 -4
- package/es/components/FluidSelect/FluidSelect.Skeleton.js +5 -5
- package/es/components/FluidSelect/FluidSelect.js +4 -4
- package/es/components/FluidTextArea/FluidTextArea.Skeleton.js +5 -5
- package/es/components/FluidTextArea/FluidTextArea.js +3 -3
- package/es/components/FluidTextInput/FluidTextInput.Skeleton.js +5 -5
- package/es/components/FluidTextInput/FluidTextInput.js +5 -5
- package/es/components/FluidTimePicker/FluidTimePicker.Skeleton.js +3 -3
- package/es/components/FluidTimePicker/FluidTimePicker.js +13 -13
- package/es/components/FluidTimePickerSelect/FluidTimePickerSelect.js +3 -3
- package/es/components/Form/Form.js +2 -2
- package/es/components/FormGroup/FormGroup.d.ts +3 -4
- package/es/components/FormGroup/FormGroup.js +4 -4
- package/es/components/FormItem/FormItem.js +2 -2
- package/es/components/FormLabel/FormLabel.js +2 -2
- package/es/components/Grid/CSSGrid.js +8 -8
- package/es/components/Grid/Column.d.ts +5 -5
- package/es/components/Grid/Column.js +15 -15
- package/es/components/Grid/ColumnHang.js +2 -2
- package/es/components/Grid/FlexGrid.js +4 -4
- package/es/components/Grid/Grid.js +3 -3
- package/es/components/Grid/GridContext.d.ts +2 -2
- package/es/components/Grid/GridContext.js +1 -1
- package/es/components/Grid/Row.js +2 -2
- package/es/components/Heading/index.js +9 -9
- package/es/components/Icon/Icon.Skeleton.js +2 -2
- package/es/components/IconButton/index.js +11 -6
- package/es/components/IconIndicator/index.js +4 -4
- package/es/components/IdPrefix/index.js +2 -2
- package/es/components/InlineCheckbox/InlineCheckbox.js +6 -6
- package/es/components/InlineLoading/InlineLoading.js +10 -10
- package/es/components/Layer/LayerContext.js +2 -2
- package/es/components/Layer/index.d.ts +4 -0
- package/es/components/Layer/index.js +15 -8
- package/es/components/Layout/index.js +5 -5
- package/es/components/LayoutDirection/LayoutDirection.js +4 -4
- package/es/components/LayoutDirection/LayoutDirectionContext.js +2 -2
- package/es/components/LayoutDirection/index.d.ts +8 -0
- package/es/components/Link/Link.js +6 -6
- package/es/components/ListBox/ListBox.d.ts +2 -3
- package/es/components/ListBox/ListBox.js +5 -5
- package/es/components/ListBox/ListBoxField.d.ts +3 -4
- package/es/components/ListBox/ListBoxField.js +2 -2
- package/es/components/ListBox/ListBoxMenu.d.ts +2 -3
- package/es/components/ListBox/ListBoxMenu.js +2 -2
- package/es/components/ListBox/ListBoxMenuIcon.js +4 -4
- package/es/components/ListBox/ListBoxMenuItem.d.ts +2 -3
- package/es/components/ListBox/ListBoxMenuItem.js +3 -3
- package/es/components/ListBox/ListBoxSelection.js +6 -6
- package/es/components/ListBox/next/ListBoxSelection.js +7 -7
- package/es/components/ListBox/next/ListBoxTrigger.js +4 -4
- package/es/components/ListItem/ListItem.js +2 -2
- package/es/components/Loading/Loading.d.ts +3 -3
- package/es/components/Loading/Loading.js +6 -6
- package/es/components/Menu/Menu.js +5 -4
- package/es/components/Menu/MenuItem.js +18 -17
- package/es/components/MenuButton/index.js +4 -4
- package/es/components/Modal/Modal.d.ts +3 -4
- package/es/components/Modal/Modal.js +40 -38
- package/es/components/ModalWrapper/ModalWrapper.js +7 -7
- package/es/components/MultiSelect/FilterableMultiSelect.js +22 -26
- package/es/components/MultiSelect/MultiSelect.js +23 -23
- package/es/components/Notification/Notification.js +41 -41
- package/es/components/NumberInput/NumberInput.Skeleton.js +4 -4
- package/es/components/NumberInput/NumberInput.js +22 -22
- package/es/components/OrderedList/OrderedList.js +2 -2
- package/es/components/OverflowMenu/OverflowMenu.js +7 -7
- package/es/components/OverflowMenu/index.js +3 -3
- package/es/components/OverflowMenu/next/index.js +6 -6
- package/es/components/OverflowMenuItem/OverflowMenuItem.js +4 -4
- package/es/components/OverflowMenuV2/index.js +3 -3
- package/es/components/PageHeader/PageHeader.js +29 -29
- package/es/components/Pagination/Pagination.Skeleton.js +8 -8
- package/es/components/Pagination/Pagination.js +17 -17
- package/es/components/Pagination/experimental/PageSelector.js +3 -3
- package/es/components/Pagination/experimental/Pagination.js +14 -14
- package/es/components/PaginationNav/PaginationNav.js +31 -31
- package/es/components/Popover/index.js +15 -15
- package/es/components/PrimaryButton/PrimaryButton.js +2 -2
- package/es/components/ProgressBar/ProgressBar.js +13 -13
- package/es/components/ProgressIndicator/ProgressIndicator.Skeleton.js +7 -7
- package/es/components/ProgressIndicator/ProgressIndicator.js +20 -20
- package/es/components/RadioButton/RadioButton.Skeleton.js +4 -4
- package/es/components/RadioButton/RadioButton.js +10 -10
- package/es/components/RadioButtonGroup/RadioButtonGroup.js +16 -16
- package/es/components/RadioTile/RadioTile.js +12 -12
- package/es/components/Search/Search.Skeleton.js +4 -4
- package/es/components/Search/Search.js +11 -11
- package/es/components/SecondaryButton/SecondaryButton.js +2 -2
- package/es/components/Select/Select.Skeleton.js +5 -5
- package/es/components/Select/Select.js +19 -19
- package/es/components/SelectItem/SelectItem.js +2 -2
- package/es/components/SelectItemGroup/SelectItemGroup.js +2 -2
- package/es/components/ShapeIndicator/index.js +7 -7
- package/es/components/SkeletonIcon/SkeletonIcon.d.ts +0 -4
- package/es/components/SkeletonIcon/SkeletonIcon.js +3 -7
- package/es/components/SkeletonPlaceholder/SkeletonPlaceholder.js +2 -2
- package/es/components/SkeletonText/SkeletonText.js +4 -4
- package/es/components/Slider/Slider.Skeleton.js +17 -17
- package/es/components/Slider/Slider.d.ts +8 -0
- package/es/components/Slider/Slider.js +44 -38
- package/es/components/Slider/SliderHandles.js +19 -19
- package/es/components/Stack/HStack.js +2 -2
- package/es/components/Stack/Stack.js +2 -2
- package/es/components/Stack/VStack.js +2 -2
- package/es/components/StructuredList/StructuredList.Skeleton.js +12 -12
- package/es/components/StructuredList/StructuredList.js +24 -24
- package/es/components/Switch/IconSwitch.js +3 -3
- package/es/components/Switch/Switch.js +4 -4
- package/es/components/TabContent/TabContent.js +2 -2
- package/es/components/Tabs/Tabs.Skeleton.js +7 -7
- package/es/components/Tabs/Tabs.js +65 -62
- package/es/components/Tag/DismissibleTag.d.ts +4 -0
- package/es/components/Tag/DismissibleTag.js +18 -13
- package/es/components/Tag/OperationalTag.js +6 -6
- package/es/components/Tag/SelectableTag.d.ts +4 -0
- package/es/components/Tag/SelectableTag.js +18 -9
- package/es/components/Tag/Tag.Skeleton.js +2 -2
- package/es/components/Tag/Tag.js +15 -15
- package/es/components/Text/Text.js +4 -4
- package/es/components/Text/TextDirection.js +2 -2
- package/es/components/Text/createTextComponent.js +2 -2
- package/es/components/TextArea/TextArea.Skeleton.js +4 -4
- package/es/components/TextArea/TextArea.js +19 -19
- package/es/components/TextInput/ControlledPasswordInput.d.ts +2 -3
- package/es/components/TextInput/ControlledPasswordInput.js +13 -13
- package/es/components/TextInput/PasswordInput.js +15 -15
- package/es/components/TextInput/TextInput.Skeleton.js +4 -4
- package/es/components/TextInput/TextInput.js +17 -17
- package/es/components/Theme/index.js +10 -10
- package/es/components/Tile/Tile.js +36 -36
- package/es/components/TileGroup/TileGroup.d.ts +3 -4
- package/es/components/TileGroup/TileGroup.js +8 -8
- package/es/components/TimePicker/TimePicker.d.ts +2 -3
- package/es/components/TimePicker/TimePicker.js +14 -14
- package/es/components/TimePickerSelect/TimePickerSelect.js +4 -4
- package/es/components/Toggle/Toggle.Skeleton.js +4 -4
- package/es/components/Toggle/Toggle.js +10 -10
- package/es/components/ToggleSmall/ToggleSmall.Skeleton.js +8 -8
- package/es/components/Toggletip/index.js +12 -12
- package/es/components/Tooltip/DefinitionTooltip.js +4 -4
- package/es/components/Tooltip/Tooltip.d.ts +3 -0
- package/es/components/Tooltip/Tooltip.js +25 -13
- package/es/components/TreeView/TreeNode.js +45 -36
- package/es/components/TreeView/TreeView.js +30 -21
- package/es/components/UIShell/Content.js +2 -2
- package/es/components/UIShell/Header.js +2 -2
- package/es/components/UIShell/HeaderContainer.js +2 -2
- package/es/components/UIShell/HeaderGlobalAction.js +3 -3
- package/es/components/UIShell/HeaderGlobalBar.d.ts +1 -1
- package/es/components/UIShell/HeaderMenu.js +14 -14
- package/es/components/UIShell/HeaderMenuButton.js +4 -4
- package/es/components/UIShell/HeaderMenuItem.js +11 -9
- package/es/components/UIShell/HeaderName.js +3 -3
- package/es/components/UIShell/HeaderNavigation.js +3 -3
- package/es/components/UIShell/HeaderPanel.js +3 -3
- package/es/components/UIShell/HeaderSideNavItems.js +2 -2
- package/es/components/UIShell/Link.js +3 -3
- package/es/components/UIShell/SideNav.js +7 -7
- package/es/components/UIShell/SideNavDetails.js +3 -3
- package/es/components/UIShell/SideNavDivider.js +3 -3
- package/es/components/UIShell/SideNavFooter.js +7 -7
- package/es/components/UIShell/SideNavHeader.js +3 -3
- package/es/components/UIShell/SideNavIcon.js +2 -2
- package/es/components/UIShell/SideNavItem.js +2 -2
- package/es/components/UIShell/SideNavItems.js +5 -5
- package/es/components/UIShell/SideNavLink.js +5 -5
- package/es/components/UIShell/SideNavLinkText.js +2 -2
- package/es/components/UIShell/SideNavMenu.js +10 -10
- package/es/components/UIShell/SideNavMenuItem.js +5 -5
- package/es/components/UIShell/SideNavSwitcher.js +8 -8
- package/es/components/UIShell/SkipToContent.js +2 -2
- package/es/components/UIShell/Switcher.js +9 -9
- package/es/components/UIShell/SwitcherDivider.js +2 -2
- package/es/components/UIShell/SwitcherItem.js +3 -3
- package/es/components/UnorderedList/UnorderedList.js +2 -2
- package/es/feature-flags.d.ts +7 -0
- package/es/index.js +25 -26
- package/es/internal/FloatingMenu.js +4 -4
- package/es/internal/__mocks__/mockHTMLElement.d.ts +9 -0
- package/es/internal/createClassWrapper.js +2 -2
- package/es/internal/debounce.d.ts +8 -0
- package/es/internal/environment.d.ts +12 -0
- package/es/internal/useId.js +2 -2
- package/es/internal/useIdPrefix.js +3 -3
- package/es/internal/useNormalizedInputProps.js +3 -3
- package/es/internal/usePrefix.js +3 -3
- package/es/internal/usePreviousValue.d.ts +17 -0
- package/es/internal/usePreviousValue.js +28 -0
- package/es/internal/useResizeObserver.d.ts +14 -0
- package/es/internal/useResizeObserver.js +74 -0
- package/es/internal/wrapFocus.js +3 -6
- package/es/prop-types/AriaPropTypes.d.ts +8 -0
- package/es/tools/wrapComponent.d.ts +3 -4
- package/es/tools/wrapComponent.js +2 -2
- package/es/types/common.d.ts +0 -2
- package/lib/components/AccordionItem/index.d.ts +9 -0
- package/lib/components/CodeSnippet/CodeSnippet.js +2 -3
- package/lib/components/ContentSwitcher/ContentSwitcher.d.ts +8 -0
- package/lib/components/ContentSwitcher/ContentSwitcher.js +7 -1
- package/lib/components/DataTable/DataTable.d.ts +81 -283
- package/lib/components/DataTable/DataTable.js +82 -123
- package/lib/components/DataTable/Table.d.ts +2 -2
- package/lib/components/DataTable/TableActionList.d.ts +1 -1
- package/lib/components/DataTable/TableBody.d.ts +3 -3
- package/lib/components/DataTable/TableCell.d.ts +3 -4
- package/lib/components/DataTable/TableContainer.d.ts +2 -3
- package/lib/components/DataTable/TableExpandHeader.d.ts +2 -3
- package/lib/components/DataTable/TableExpandedRow.d.ts +3 -3
- package/lib/components/DataTable/TableHead.d.ts +1 -1
- package/lib/components/DataTable/TableHeader.d.ts +4 -4
- package/lib/components/DataTable/TableRow.d.ts +3 -4
- package/lib/components/DataTable/TableToolbarContent.d.ts +1 -1
- package/lib/components/DataTable/index.d.ts +1 -1
- package/lib/components/DatePicker/DatePicker.d.ts +1 -1
- package/lib/components/DatePicker/DatePicker.js +6 -3
- package/lib/components/DatePickerInput/DatePickerInput.d.ts +3 -4
- package/lib/components/Dialog/index.d.ts +5 -6
- package/lib/components/Dropdown/Dropdown.Skeleton.d.ts +2 -3
- package/lib/components/Dropdown/Dropdown.d.ts +3 -3
- package/lib/components/FileUploader/FileUploader.Skeleton.d.ts +3 -3
- package/lib/components/FileUploader/FileUploader.d.ts +2 -3
- package/lib/components/FileUploader/FileUploaderButton.d.ts +3 -4
- package/lib/components/FileUploader/FileUploaderButton.js +3 -2
- package/lib/components/FileUploader/FileUploaderDropContainer.d.ts +2 -3
- package/lib/components/FileUploader/FileUploaderItem.d.ts +2 -3
- package/lib/components/FileUploader/Filename.d.ts +3 -4
- package/lib/components/FluidForm/FluidForm.d.ts +3 -4
- package/lib/components/FormGroup/FormGroup.d.ts +3 -4
- package/lib/components/Grid/Column.d.ts +5 -5
- package/lib/components/Grid/Column.js +10 -10
- package/lib/components/Grid/GridContext.d.ts +2 -2
- package/lib/components/Grid/GridContext.js +5 -23
- package/lib/components/IconButton/index.js +6 -1
- package/lib/components/Layer/index.d.ts +4 -0
- package/lib/components/Layer/index.js +9 -2
- package/lib/components/LayoutDirection/index.d.ts +8 -0
- package/lib/components/Link/Link.js +1 -1
- package/lib/components/ListBox/ListBox.d.ts +2 -3
- package/lib/components/ListBox/ListBoxField.d.ts +3 -4
- package/lib/components/ListBox/ListBoxMenu.d.ts +2 -3
- package/lib/components/ListBox/ListBoxMenuItem.d.ts +2 -3
- package/lib/components/Loading/Loading.d.ts +3 -3
- package/lib/components/Menu/Menu.js +2 -1
- package/lib/components/Menu/MenuItem.js +2 -1
- package/lib/components/Modal/Modal.d.ts +3 -4
- package/lib/components/Modal/Modal.js +5 -3
- package/lib/components/MultiSelect/FilterableMultiSelect.js +1 -5
- package/lib/components/SkeletonIcon/SkeletonIcon.d.ts +0 -4
- package/lib/components/SkeletonIcon/SkeletonIcon.js +1 -5
- package/lib/components/Slider/Slider.d.ts +8 -0
- package/lib/components/Slider/Slider.js +6 -0
- package/lib/components/Tabs/Tabs.js +5 -2
- package/lib/components/Tag/DismissibleTag.d.ts +4 -0
- package/lib/components/Tag/DismissibleTag.js +8 -3
- package/lib/components/Tag/SelectableTag.d.ts +4 -0
- package/lib/components/Tag/SelectableTag.js +12 -3
- package/lib/components/TextInput/ControlledPasswordInput.d.ts +2 -3
- package/lib/components/TileGroup/TileGroup.d.ts +3 -4
- package/lib/components/TimePicker/TimePicker.d.ts +2 -3
- package/lib/components/Tooltip/Tooltip.d.ts +3 -0
- package/lib/components/Tooltip/Tooltip.js +18 -6
- package/lib/components/TreeView/TreeNode.js +20 -11
- package/lib/components/TreeView/TreeView.js +27 -18
- package/lib/components/UIShell/HeaderGlobalBar.d.ts +1 -1
- package/lib/components/UIShell/HeaderMenuItem.js +7 -5
- package/lib/components/UIShell/Switcher.js +3 -3
- package/lib/feature-flags.d.ts +7 -0
- package/lib/index.js +50 -51
- package/lib/internal/__mocks__/mockHTMLElement.d.ts +9 -0
- package/lib/internal/debounce.d.ts +8 -0
- package/lib/internal/environment.d.ts +12 -0
- package/lib/internal/usePreviousValue.d.ts +17 -0
- package/lib/internal/usePreviousValue.js +32 -0
- package/lib/internal/useResizeObserver.d.ts +14 -0
- package/lib/internal/useResizeObserver.js +78 -0
- package/lib/internal/wrapFocus.js +3 -6
- package/lib/prop-types/AriaPropTypes.d.ts +8 -0
- package/lib/tools/wrapComponent.d.ts +3 -4
- package/lib/types/common.d.ts +0 -2
- package/package.json +5 -6
- package/scss/components/content-switcher/_tokens.scss +9 -0
- package/telemetry.yml +5 -1
- package/es/components/DataTable/index.js +0 -76
- package/es/prop-types/tools/getDisplayName.js +0 -34
- package/es/prop-types/types.js +0 -13
- package/lib/components/DataTable/index.js +0 -82
- package/lib/prop-types/tools/getDisplayName.js +0 -38
- package/lib/prop-types/types.js +0 -17
|
@@ -25,6 +25,7 @@ var wrapFocus = require('../../internal/wrapFocus.js');
|
|
|
25
25
|
var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
|
|
26
26
|
var useId = require('../../internal/useId.js');
|
|
27
27
|
var usePrefix = require('../../internal/usePrefix.js');
|
|
28
|
+
var usePreviousValue = require('../../internal/usePreviousValue.js');
|
|
28
29
|
var keys = require('../../internal/keyboard/keys.js');
|
|
29
30
|
var match = require('../../internal/keyboard/match.js');
|
|
30
31
|
var index$2 = require('../IconButton/index.js');
|
|
@@ -89,6 +90,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
|
|
|
89
90
|
const startTrap = React.useRef(null);
|
|
90
91
|
const endTrap = React.useRef(null);
|
|
91
92
|
const [isScrollable, setIsScrollable] = React.useState(false);
|
|
93
|
+
const prevOpen = usePreviousValue.usePreviousValue(open);
|
|
92
94
|
const modalInstanceId = `modal-${useId.useId()}`;
|
|
93
95
|
const modalLabelId = `${prefix}--modal-header__label--${modalInstanceId}`;
|
|
94
96
|
const modalHeadingId = `${prefix}--modal-header__heading--${modalInstanceId}`;
|
|
@@ -211,14 +213,14 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
|
|
|
211
213
|
}
|
|
212
214
|
}, [open, prefix, enableDialogElement]);
|
|
213
215
|
React.useEffect(() => {
|
|
214
|
-
if (!enableDialogElement && !open && launcherButtonRef) {
|
|
216
|
+
if (!enableDialogElement && prevOpen && !open && launcherButtonRef) {
|
|
215
217
|
setTimeout(() => {
|
|
216
218
|
if ('current' in launcherButtonRef) {
|
|
217
219
|
launcherButtonRef.current?.focus();
|
|
218
220
|
}
|
|
219
221
|
});
|
|
220
222
|
}
|
|
221
|
-
}, [open, launcherButtonRef, enableDialogElement]);
|
|
223
|
+
}, [open, prevOpen, launcherButtonRef, enableDialogElement]);
|
|
222
224
|
React.useEffect(() => {
|
|
223
225
|
if (!enableDialogElement) {
|
|
224
226
|
const initialFocus = focusContainerElement => {
|
|
@@ -445,7 +447,7 @@ Modal.propTypes = {
|
|
|
445
447
|
*/
|
|
446
448
|
className: PropTypes__default["default"].string,
|
|
447
449
|
/**
|
|
448
|
-
* Specify
|
|
450
|
+
* Specify label for the close button of the modal; defaults to close
|
|
449
451
|
*/
|
|
450
452
|
closeButtonLabel: PropTypes__default["default"].string,
|
|
451
453
|
/**
|
|
@@ -555,11 +555,7 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
|
|
|
555
555
|
}
|
|
556
556
|
}
|
|
557
557
|
} : {};
|
|
558
|
-
const clearSelectionContent = controlledSelectedItems.length > 0 ?
|
|
559
|
-
className: `${prefix}--visually-hidden`
|
|
560
|
-
}, clearSelectionDescription, " ", controlledSelectedItems.length, ",", clearSelectionText) : /*#__PURE__*/React__default["default"].createElement("span", {
|
|
561
|
-
className: `${prefix}--visually-hidden`
|
|
562
|
-
}, clearSelectionDescription, ": 0");
|
|
558
|
+
const clearSelectionContent = controlledSelectedItems.length > 0 ? `${clearSelectionDescription} ${controlledSelectedItems.length}. ${clearSelectionText}.` : `${clearSelectionDescription} 0.`;
|
|
563
559
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
564
560
|
className: wrapperClasses
|
|
565
561
|
}, titleText ? /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({
|
|
@@ -4,10 +4,6 @@ export interface SkeletonIconProps {
|
|
|
4
4
|
* Specify an optional className to add.
|
|
5
5
|
*/
|
|
6
6
|
className?: string;
|
|
7
|
-
/**
|
|
8
|
-
* The CSS styles.
|
|
9
|
-
*/
|
|
10
|
-
style?: React.CSSProperties;
|
|
11
7
|
}
|
|
12
8
|
declare const SkeletonIcon: React.FC<SkeletonIconProps>;
|
|
13
9
|
export default SkeletonIcon;
|
|
@@ -38,11 +38,7 @@ SkeletonIcon.propTypes = {
|
|
|
38
38
|
/**
|
|
39
39
|
* Specify an optional className to add.
|
|
40
40
|
*/
|
|
41
|
-
className: PropTypes__default["default"].string
|
|
42
|
-
/**
|
|
43
|
-
* The CSS styles.
|
|
44
|
-
*/
|
|
45
|
-
style: PropTypes__default["default"].object
|
|
41
|
+
className: PropTypes__default["default"].string
|
|
46
42
|
};
|
|
47
43
|
|
|
48
44
|
exports["default"] = SkeletonIcon;
|
|
@@ -73,6 +73,10 @@ export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
|
|
|
73
73
|
* The label for the slider.
|
|
74
74
|
*/
|
|
75
75
|
labelText?: ReactNode;
|
|
76
|
+
/**
|
|
77
|
+
* Specify whether you want the underlying label to be visually hidden
|
|
78
|
+
*/
|
|
79
|
+
hideLabel?: boolean;
|
|
76
80
|
/**
|
|
77
81
|
* @deprecated
|
|
78
82
|
* `true` to use the light version.
|
|
@@ -215,6 +219,10 @@ declare class Slider extends PureComponent<SliderProps> {
|
|
|
215
219
|
* The label for the slider.
|
|
216
220
|
*/
|
|
217
221
|
labelText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
222
|
+
/**
|
|
223
|
+
* Specify whether you want the underlying label to be visually hidden
|
|
224
|
+
*/
|
|
225
|
+
hideLabel: PropTypes.Requireable<boolean>;
|
|
218
226
|
/**
|
|
219
227
|
* `true` to use the light version.
|
|
220
228
|
*/
|
|
@@ -955,6 +955,7 @@ class Slider extends React.PureComponent {
|
|
|
955
955
|
maxLabel = '',
|
|
956
956
|
formatLabel = defaultFormatLabel,
|
|
957
957
|
labelText,
|
|
958
|
+
hideLabel,
|
|
958
959
|
step = 1,
|
|
959
960
|
stepMultiplier: _stepMultiplier,
|
|
960
961
|
inputType = 'number',
|
|
@@ -988,6 +989,7 @@ class Slider extends React.PureComponent {
|
|
|
988
989
|
return /*#__PURE__*/React__default["default"].createElement(usePrefix.PrefixContext.Consumer, null, prefix => {
|
|
989
990
|
const labelId = `${id}-label`;
|
|
990
991
|
const labelClasses = cx__default["default"](`${prefix}--label`, {
|
|
992
|
+
[`${prefix}--visually-hidden`]: hideLabel,
|
|
991
993
|
[`${prefix}--label--disabled`]: disabled
|
|
992
994
|
});
|
|
993
995
|
const containerClasses = cx__default["default"](`${prefix}--slider-container`, {
|
|
@@ -1241,6 +1243,10 @@ _rollupPluginBabelHelpers.defineProperty(Slider, "propTypes", {
|
|
|
1241
1243
|
* The label for the slider.
|
|
1242
1244
|
*/
|
|
1243
1245
|
labelText: PropTypes__default["default"].node,
|
|
1246
|
+
/**
|
|
1247
|
+
* Specify whether you want the underlying label to be visually hidden
|
|
1248
|
+
*/
|
|
1249
|
+
hideLabel: PropTypes__default["default"].bool,
|
|
1244
1250
|
/**
|
|
1245
1251
|
* `true` to use the light version.
|
|
1246
1252
|
*/
|
|
@@ -329,9 +329,12 @@ function TabList(_ref4) {
|
|
|
329
329
|
});
|
|
330
330
|
const tabs = React.useRef([]);
|
|
331
331
|
const debouncedOnScroll = React.useCallback(() => {
|
|
332
|
-
|
|
333
|
-
|
|
332
|
+
const updateScroll = debounce.debounce(() => {
|
|
333
|
+
if (ref.current) {
|
|
334
|
+
setScrollLeft(ref.current.scrollLeft);
|
|
335
|
+
}
|
|
334
336
|
}, scrollDebounceWait);
|
|
337
|
+
updateScroll();
|
|
335
338
|
}, [scrollDebounceWait]);
|
|
336
339
|
function onKeyDown(event) {
|
|
337
340
|
if (match.matches(event, [keys.ArrowRight, keys.ArrowLeft, keys.Home, keys.End])) {
|
|
@@ -20,6 +20,10 @@ export interface DismissibleTagBaseProps {
|
|
|
20
20
|
* Specify if the `DismissibleTag` is disabled
|
|
21
21
|
*/
|
|
22
22
|
disabled?: boolean;
|
|
23
|
+
/**
|
|
24
|
+
* Provide a custom tooltip label for the dismiss button
|
|
25
|
+
*/
|
|
26
|
+
dismissTooltipLabel?: string;
|
|
23
27
|
/**
|
|
24
28
|
* Specify the id for the selectable tag.
|
|
25
29
|
*/
|
|
@@ -46,6 +46,7 @@ const DismissibleTag = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
|
|
|
46
46
|
text,
|
|
47
47
|
tagTitle,
|
|
48
48
|
type,
|
|
49
|
+
dismissTooltipLabel = 'Dismiss tag',
|
|
49
50
|
...other
|
|
50
51
|
} = _ref;
|
|
51
52
|
const prefix = usePrefix.usePrefix();
|
|
@@ -79,7 +80,7 @@ const DismissibleTag = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
|
|
|
79
80
|
onClick,
|
|
80
81
|
...otherProps
|
|
81
82
|
} = other;
|
|
82
|
-
const
|
|
83
|
+
const dismissActionLabel = isEllipsisApplied ? dismissTooltipLabel : title;
|
|
83
84
|
return /*#__PURE__*/React__default["default"].createElement(Tag["default"], _rollupPluginBabelHelpers["extends"]({
|
|
84
85
|
ref: combinedRef,
|
|
85
86
|
type: type,
|
|
@@ -96,7 +97,7 @@ const DismissibleTag = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
|
|
|
96
97
|
}, text), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
97
98
|
className: `${prefix}--tag__decorator`
|
|
98
99
|
}, normalizedDecorator) : '', /*#__PURE__*/React__default["default"].createElement(Tooltip.Tooltip, {
|
|
99
|
-
label:
|
|
100
|
+
label: dismissActionLabel,
|
|
100
101
|
align: "bottom",
|
|
101
102
|
className: tooltipClasses,
|
|
102
103
|
leaveDelayMs: 0,
|
|
@@ -106,7 +107,7 @@ const DismissibleTag = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
|
|
|
106
107
|
className: `${prefix}--tag__close-icon`,
|
|
107
108
|
onClick: handleClose,
|
|
108
109
|
disabled: disabled,
|
|
109
|
-
"aria-label":
|
|
110
|
+
"aria-label": dismissActionLabel
|
|
110
111
|
}, _Close || (_Close = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, null))))));
|
|
111
112
|
});
|
|
112
113
|
DismissibleTag.propTypes = {
|
|
@@ -122,6 +123,10 @@ DismissibleTag.propTypes = {
|
|
|
122
123
|
* Specify if the `DismissibleTag` is disabled
|
|
123
124
|
*/
|
|
124
125
|
disabled: PropTypes__default["default"].bool,
|
|
126
|
+
/**
|
|
127
|
+
* Provide a custom tooltip label for the dismiss button
|
|
128
|
+
*/
|
|
129
|
+
dismissTooltipLabel: PropTypes__default["default"].string,
|
|
125
130
|
/**
|
|
126
131
|
* Specify the id for the tag.
|
|
127
132
|
*/
|
|
@@ -36,6 +36,10 @@ export interface SelectableTagBaseProps {
|
|
|
36
36
|
* Specify the state of the selectable tag.
|
|
37
37
|
*/
|
|
38
38
|
selected?: boolean;
|
|
39
|
+
/**
|
|
40
|
+
* Specify the default state of the selectable tag.
|
|
41
|
+
*/
|
|
42
|
+
defaultSelected?: boolean;
|
|
39
43
|
/**
|
|
40
44
|
* Specify the size of the Tag. Currently supports either `sm`,
|
|
41
45
|
* `md` (default) or `lg` sizes.
|
|
@@ -21,6 +21,7 @@ var Tooltip = require('../Tooltip/Tooltip.js');
|
|
|
21
21
|
require('../Text/index.js');
|
|
22
22
|
var isEllipsisActive = require('./isEllipsisActive.js');
|
|
23
23
|
var mergeRefs = require('../../tools/mergeRefs.js');
|
|
24
|
+
var useControllableState = require('../../internal/useControllableState.js');
|
|
24
25
|
var Text = require('../Text/Text.js');
|
|
25
26
|
|
|
26
27
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
@@ -37,15 +38,20 @@ const SelectableTag = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
|
|
|
37
38
|
renderIcon,
|
|
38
39
|
onChange,
|
|
39
40
|
onClick,
|
|
40
|
-
selected
|
|
41
|
+
selected,
|
|
41
42
|
size,
|
|
42
43
|
text,
|
|
44
|
+
defaultSelected = false,
|
|
43
45
|
...other
|
|
44
46
|
} = _ref;
|
|
45
47
|
const prefix = usePrefix.usePrefix();
|
|
46
48
|
const tagRef = React.useRef(null);
|
|
47
49
|
const tagId = id || `tag-${useId.useId()}`;
|
|
48
|
-
const [selectedTag, setSelectedTag] =
|
|
50
|
+
const [selectedTag, setSelectedTag] = useControllableState.useControllableState({
|
|
51
|
+
value: selected,
|
|
52
|
+
onChange: onChange,
|
|
53
|
+
defaultValue: defaultSelected
|
|
54
|
+
});
|
|
49
55
|
const tagClasses = cx__default["default"](`${prefix}--tag--selectable`, className, {
|
|
50
56
|
[`${prefix}--tag--selectable-selected`]: selectedTag
|
|
51
57
|
});
|
|
@@ -58,7 +64,6 @@ const SelectableTag = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
|
|
|
58
64
|
const combinedRef = mergeRefs["default"](tagRef, forwardRef);
|
|
59
65
|
const handleClick = e => {
|
|
60
66
|
setSelectedTag(!selectedTag);
|
|
61
|
-
onChange?.(!selectedTag);
|
|
62
67
|
onClick?.(e);
|
|
63
68
|
};
|
|
64
69
|
if (isEllipsisApplied) {
|
|
@@ -125,6 +130,10 @@ SelectableTag.propTypes = {
|
|
|
125
130
|
* Specify the state of the selectable tag.
|
|
126
131
|
*/
|
|
127
132
|
selected: PropTypes__default["default"].bool,
|
|
133
|
+
/**
|
|
134
|
+
* Specify the default state of the selectable tag.
|
|
135
|
+
*/
|
|
136
|
+
defaultSelected: PropTypes__default["default"].bool,
|
|
128
137
|
/**
|
|
129
138
|
* Specify the size of the Tag. Currently supports either `sm`,
|
|
130
139
|
* `md` (default) or `lg` sizes.
|
|
@@ -4,9 +4,8 @@
|
|
|
4
4
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
|
-
import React from 'react';
|
|
8
|
-
|
|
9
|
-
export interface ControlledPasswordInputProps extends ReactAttr<HTMLInputElement> {
|
|
7
|
+
import React, { type HTMLAttributes } from 'react';
|
|
8
|
+
export interface ControlledPasswordInputProps extends HTMLAttributes<HTMLInputElement> {
|
|
10
9
|
/**
|
|
11
10
|
* Provide a custom className that is applied directly to the underlying
|
|
12
11
|
* `<input>` node
|
|
@@ -1,14 +1,13 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Copyright IBM Corp. 2016,
|
|
2
|
+
* Copyright IBM Corp. 2016, 2025
|
|
3
3
|
*
|
|
4
4
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
7
|
import PropTypes from 'prop-types';
|
|
8
|
-
import { ReactNode } from 'react';
|
|
9
|
-
import { ReactAttr } from '../../types/common';
|
|
8
|
+
import { type HTMLAttributes, type ReactNode } from 'react';
|
|
10
9
|
type ExcludedAttributes = 'onChange';
|
|
11
|
-
export interface TileGroupProps extends Omit<
|
|
10
|
+
export interface TileGroupProps extends Omit<HTMLAttributes<HTMLFieldSetElement>, ExcludedAttributes> {
|
|
12
11
|
/**
|
|
13
12
|
* Provide a collection of <RadioTile> components to render in the group
|
|
14
13
|
*/
|
|
@@ -4,10 +4,9 @@
|
|
|
4
4
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
|
-
import React from 'react';
|
|
8
|
-
import { ReactAttr } from '../../types/common';
|
|
7
|
+
import React, { type HTMLAttributes } from 'react';
|
|
9
8
|
type ExcludedAttributes = 'id' | 'value';
|
|
10
|
-
export interface TimePickerProps extends Omit<
|
|
9
|
+
export interface TimePickerProps extends Omit<HTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
|
|
11
10
|
/**
|
|
12
11
|
* Pass in the children that will be rendered next to the form control
|
|
13
12
|
*/
|
|
@@ -54,6 +54,9 @@ interface TooltipBaseProps {
|
|
|
54
54
|
/**
|
|
55
55
|
* Provide the label to be rendered inside of the Tooltip. The label will use
|
|
56
56
|
* `aria-labelledby` and will fully describe the child node that is provided.
|
|
57
|
+
* If the child already has an `aria-label`, the tooltip will not apply
|
|
58
|
+
* `aria-labelledby`. If the child has its own `aria-labelledby`, that value
|
|
59
|
+
* will be kept. Otherwise, the tooltip will use its own ID to label the child.
|
|
57
60
|
* This means that if you have text in the child node, that it will not be
|
|
58
61
|
* announced to the screen reader.
|
|
59
62
|
*
|
|
@@ -56,6 +56,21 @@ const Tooltip = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =>
|
|
|
56
56
|
const id = useId.useId('tooltip');
|
|
57
57
|
const prefix = usePrefix.usePrefix();
|
|
58
58
|
const child = React__default["default"].Children.only(children);
|
|
59
|
+
const {
|
|
60
|
+
'aria-label': ariaLabel,
|
|
61
|
+
'aria-labelledby': ariaLabelledBy,
|
|
62
|
+
'aria-describedby': ariaDescribedBy
|
|
63
|
+
} = child?.props ?? {};
|
|
64
|
+
const hasLabel = !!label;
|
|
65
|
+
const hasAriaLabel = typeof ariaLabel === 'string' ? ariaLabel.trim() !== '' : false;
|
|
66
|
+
|
|
67
|
+
// An `aria-label` takes precedence over `aria-describedby`, but when it's
|
|
68
|
+
// needed and the user doesn't specify one, the fallback `id` is used.
|
|
69
|
+
const labelledBy = hasAriaLabel ? null : hasLabel ? ariaLabelledBy ?? id : undefined;
|
|
70
|
+
|
|
71
|
+
// If `aria-label` is present, use any provided `aria-describedby`.
|
|
72
|
+
// If not, fallback to child's `aria-describedby` or the tooltip `id` if needed.
|
|
73
|
+
const describedBy = hasAriaLabel ? ariaDescribedBy : ariaDescribedBy ?? (!hasLabel && !ariaLabelledBy ? id : undefined);
|
|
59
74
|
const triggerProps = {
|
|
60
75
|
onFocus: () => !focusByMouse && setOpen(true),
|
|
61
76
|
onBlur: () => {
|
|
@@ -68,7 +83,9 @@ const Tooltip = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =>
|
|
|
68
83
|
onMouseLeave,
|
|
69
84
|
onMouseDown,
|
|
70
85
|
onMouseMove: onMouseMove,
|
|
71
|
-
onTouchStart: onDragStart
|
|
86
|
+
onTouchStart: onDragStart,
|
|
87
|
+
'aria-labelledby': labelledBy,
|
|
88
|
+
'aria-describedby': describedBy
|
|
72
89
|
};
|
|
73
90
|
function getChildEventHandlers(childProps) {
|
|
74
91
|
const eventHandlerFunctions = Object.keys(triggerProps).filter(prop => prop.startsWith('on'));
|
|
@@ -83,11 +100,6 @@ const Tooltip = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =>
|
|
|
83
100
|
});
|
|
84
101
|
return eventHandlers;
|
|
85
102
|
}
|
|
86
|
-
if (label) {
|
|
87
|
-
triggerProps['aria-labelledby'] = id;
|
|
88
|
-
} else {
|
|
89
|
-
triggerProps['aria-describedby'] = id;
|
|
90
|
-
}
|
|
91
103
|
const onKeyDown = React.useCallback(event => {
|
|
92
104
|
if (open && match.match(event, keys.Escape)) {
|
|
93
105
|
event.stopPropagation();
|
|
@@ -80,19 +80,28 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef((_ref, forwar
|
|
|
80
80
|
forwardedRef.current = element;
|
|
81
81
|
}
|
|
82
82
|
};
|
|
83
|
-
|
|
84
|
-
|
|
83
|
+
function enhanceTreeNodes(children) {
|
|
84
|
+
return React__default["default"].Children.map(children, node => {
|
|
85
|
+
if (! /*#__PURE__*/React__default["default"].isValidElement(node)) return node;
|
|
86
|
+
const isTreeNode = node.type.displayName === 'TreeNode';
|
|
87
|
+
if (isTreeNode) {
|
|
88
|
+
return /*#__PURE__*/React__default["default"].cloneElement(node, {
|
|
89
|
+
active,
|
|
90
|
+
depth: depth + 1,
|
|
91
|
+
disabled: disabled || node.props.disabled,
|
|
92
|
+
onTreeSelect,
|
|
93
|
+
onNodeFocusEvent,
|
|
94
|
+
selected,
|
|
95
|
+
tabIndex: node.props.disabled ? null : -1
|
|
96
|
+
});
|
|
97
|
+
}
|
|
98
|
+
const newChildren = enhanceTreeNodes(node.props.children);
|
|
85
99
|
return /*#__PURE__*/React__default["default"].cloneElement(node, {
|
|
86
|
-
|
|
87
|
-
depth: depth + 1,
|
|
88
|
-
disabled: disabled || node.props.disabled,
|
|
89
|
-
onTreeSelect,
|
|
90
|
-
onNodeFocusEvent,
|
|
91
|
-
selected,
|
|
92
|
-
tabIndex: !node.props.disabled && -1 || null
|
|
100
|
+
children: newChildren
|
|
93
101
|
});
|
|
94
|
-
}
|
|
95
|
-
}
|
|
102
|
+
});
|
|
103
|
+
}
|
|
104
|
+
const nodesWithProps = enhanceTreeNodes(children);
|
|
96
105
|
const isActive = active === id;
|
|
97
106
|
const isSelected = selected.includes(id);
|
|
98
107
|
const treeNodeClasses = cx__default["default"](className, `${prefix}--tree-node`, {
|
|
@@ -121,24 +121,33 @@ const TreeView = _ref => {
|
|
|
121
121
|
}
|
|
122
122
|
}
|
|
123
123
|
let focusTarget = false;
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
124
|
+
function enhanceTreeNodes(children) {
|
|
125
|
+
return React__default["default"].Children.map(children, child => {
|
|
126
|
+
if (! /*#__PURE__*/React__default["default"].isValidElement(child)) return child;
|
|
127
|
+
const isTreeNode = child.type.displayName === 'TreeNode';
|
|
128
|
+
if (isTreeNode) {
|
|
129
|
+
const node = child;
|
|
130
|
+
const sharedNodeProps = {
|
|
131
|
+
active,
|
|
132
|
+
depth: 0,
|
|
133
|
+
onNodeFocusEvent: handleFocusEvent,
|
|
134
|
+
onTreeSelect: handleTreeSelect,
|
|
135
|
+
selected,
|
|
136
|
+
tabIndex: node.props.disabled ? undefined : -1
|
|
137
|
+
};
|
|
138
|
+
if (!focusTarget && !node.props.disabled) {
|
|
139
|
+
sharedNodeProps.tabIndex = 0;
|
|
140
|
+
focusTarget = true;
|
|
141
|
+
}
|
|
142
|
+
return /*#__PURE__*/React__default["default"].cloneElement(child, sharedNodeProps);
|
|
143
|
+
}
|
|
144
|
+
const newChildren = enhanceTreeNodes(child.props.children);
|
|
145
|
+
return /*#__PURE__*/React__default["default"].cloneElement(child, {
|
|
146
|
+
children: newChildren
|
|
147
|
+
});
|
|
148
|
+
});
|
|
149
|
+
}
|
|
150
|
+
const nodesWithProps = enhanceTreeNodes(children);
|
|
142
151
|
function handleKeyDown(event) {
|
|
143
152
|
event.stopPropagation();
|
|
144
153
|
if (match.matches(event, [keys.ArrowUp, keys.ArrowDown, keys.Home, keys.End])) {
|
|
@@ -7,5 +7,5 @@
|
|
|
7
7
|
/**
|
|
8
8
|
* Generic container for `HeaderGlobalAction` components
|
|
9
9
|
*/
|
|
10
|
-
declare const HeaderGlobalBar: (props: import("
|
|
10
|
+
declare const HeaderGlobalBar: (props: import("react").HTMLAttributes<"div">) => React.ReactElement<any>;
|
|
11
11
|
export default HeaderGlobalBar;
|
|
@@ -38,17 +38,19 @@ const HeaderMenuItem = /*#__PURE__*/React.forwardRef(function HeaderMenuItem(_re
|
|
|
38
38
|
if (isCurrentPage) {
|
|
39
39
|
isActive = isCurrentPage;
|
|
40
40
|
}
|
|
41
|
+
// We set the current class only if `isActive` is passed in and we do
|
|
42
|
+
// not have an `aria-current="page"` set for the breadcrumb item. When this
|
|
43
|
+
// class is added we also set `aria-current` as `true`
|
|
44
|
+
const hasCurrentClass = isActive && ariaCurrent !== 'page';
|
|
41
45
|
const linkClassName = cx__default["default"]({
|
|
42
46
|
[`${prefix}--header__menu-item`]: true,
|
|
43
|
-
|
|
44
|
-
// not have an `aria-current="page"` set for the breadcrumb item
|
|
45
|
-
[`${prefix}--header__menu-item--current`]: isActive && ariaCurrent !== 'page'
|
|
47
|
+
[`${prefix}--header__menu-item--current`]: hasCurrentClass
|
|
46
48
|
});
|
|
47
49
|
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
48
50
|
className: className,
|
|
49
51
|
role: role
|
|
50
52
|
}, /*#__PURE__*/React__default["default"].createElement(Link["default"], _rollupPluginBabelHelpers["extends"]({}, rest, {
|
|
51
|
-
"aria-current": ariaCurrent,
|
|
53
|
+
"aria-current": hasCurrentClass ? true : ariaCurrent,
|
|
52
54
|
className: linkClassName,
|
|
53
55
|
ref: ref,
|
|
54
56
|
tabIndex: tabIndex
|
|
@@ -73,7 +75,7 @@ HeaderMenuItem.propTypes = {
|
|
|
73
75
|
*/
|
|
74
76
|
className: PropTypes__default["default"].string,
|
|
75
77
|
/**
|
|
76
|
-
*
|
|
78
|
+
* If `true` and `aria-current !== 'page'`, applies selected styles to the item and sets `aria-current="true"`.
|
|
77
79
|
*/
|
|
78
80
|
isActive: PropTypes__default["default"].bool,
|
|
79
81
|
/**
|
|
@@ -16,7 +16,7 @@ var usePrefix = require('../../internal/usePrefix.js');
|
|
|
16
16
|
var useMergedRefs = require('../../internal/useMergedRefs.js');
|
|
17
17
|
var PropTypes = require('prop-types');
|
|
18
18
|
var AriaPropTypes = require('../../prop-types/AriaPropTypes.js');
|
|
19
|
-
var
|
|
19
|
+
var SwitcherItem = require('./SwitcherItem.js');
|
|
20
20
|
|
|
21
21
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
22
22
|
|
|
@@ -48,7 +48,7 @@ const Switcher = /*#__PURE__*/React.forwardRef(function Switcher(props, forwardR
|
|
|
48
48
|
direction
|
|
49
49
|
} = _ref;
|
|
50
50
|
const enabledIndices = React__default["default"].Children.toArray(children).reduce((acc, curr, i) => {
|
|
51
|
-
if (/*#__PURE__*/React__default["default"].isValidElement(curr) && Object.keys(curr.props).length !== 0 &&
|
|
51
|
+
if (/*#__PURE__*/React__default["default"].isValidElement(curr) && Object.keys(curr.props).length !== 0 && curr.type === SwitcherItem["default"]) {
|
|
52
52
|
acc.push(i);
|
|
53
53
|
}
|
|
54
54
|
return acc;
|
|
@@ -76,7 +76,7 @@ const Switcher = /*#__PURE__*/React.forwardRef(function Switcher(props, forwardR
|
|
|
76
76
|
};
|
|
77
77
|
const childrenWithProps = React__default["default"].Children.toArray(children).map((child, index) => {
|
|
78
78
|
// only setup click handlers if onChange event is passed
|
|
79
|
-
if (/*#__PURE__*/React__default["default"].isValidElement(child) && child.type
|
|
79
|
+
if (/*#__PURE__*/React__default["default"].isValidElement(child) && child.type === SwitcherItem["default"]) {
|
|
80
80
|
return /*#__PURE__*/React__default["default"].cloneElement(child, {
|
|
81
81
|
handleSwitcherItemFocus,
|
|
82
82
|
index,
|