@carbon/react 1.83.0-rc.0 → 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 +1008 -938
- 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/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.js +17 -17
- 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 +2 -3
- package/es/components/FileUploader/FileUploaderButton.js +4 -4
- 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.js +5 -5
- 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/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 +3 -3
- package/es/components/Menu/MenuItem.js +16 -16
- package/es/components/MenuButton/index.js +4 -4
- package/es/components/Modal/Modal.d.ts +2 -3
- package/es/components/Modal/Modal.js +35 -35
- 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.js +38 -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 +60 -60
- package/es/components/Tag/DismissibleTag.js +10 -10
- package/es/components/Tag/OperationalTag.js +6 -6
- package/es/components/Tag/SelectableTag.js +6 -6
- 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 +8 -8
- 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/index.js +23 -24
- 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/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/useResizeObserver.d.ts +14 -0
- package/es/internal/useResizeObserver.js +74 -0
- package/es/internal/wrapFocus.js +3 -6
- 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/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/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 +2 -3
- 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/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/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/Modal/Modal.d.ts +2 -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/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/index.js +46 -47
- package/lib/internal/__mocks__/mockHTMLElement.d.ts +9 -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/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 +4 -1
- package/es/components/DataTable/index.js +0 -76
- package/lib/components/DataTable/index.js +0 -82
|
@@ -9,11 +9,11 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
|
|
|
9
9
|
import * as FeatureFlags from '@carbon/feature-flags';
|
|
10
10
|
import cx from 'classnames';
|
|
11
11
|
import PropTypes from 'prop-types';
|
|
12
|
-
import
|
|
12
|
+
import React from 'react';
|
|
13
13
|
import { usePrefix } from '../../internal/usePrefix.js';
|
|
14
14
|
import { useGridSettings } from './GridContext.js';
|
|
15
15
|
|
|
16
|
-
const Column = /*#__PURE__*/
|
|
16
|
+
const Column = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
17
17
|
let {
|
|
18
18
|
as,
|
|
19
19
|
children,
|
|
@@ -31,7 +31,7 @@ const Column = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
|
|
|
31
31
|
const prefix = usePrefix();
|
|
32
32
|
const BaseComponent = as || 'div';
|
|
33
33
|
if (mode === 'css-grid') {
|
|
34
|
-
return /*#__PURE__*/
|
|
34
|
+
return /*#__PURE__*/React.createElement(CSSGridColumn, _extends({
|
|
35
35
|
as: BaseComponent,
|
|
36
36
|
className: customClassName,
|
|
37
37
|
sm: sm,
|
|
@@ -45,7 +45,7 @@ const Column = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
|
|
|
45
45
|
const className = cx(customClassName, columnClassName, {
|
|
46
46
|
[`${prefix}--col`]: columnClassName.length === 0
|
|
47
47
|
});
|
|
48
|
-
return /*#__PURE__*/
|
|
48
|
+
return /*#__PURE__*/React.createElement(BaseComponent, _extends({
|
|
49
49
|
className: className,
|
|
50
50
|
ref: ref
|
|
51
51
|
}, rest), children);
|
|
@@ -133,7 +133,7 @@ function CSSGridColumn(_ref2) {
|
|
|
133
133
|
const className = cx(containerClassName, breakpointClassName, spanClassName, {
|
|
134
134
|
[`${prefix}--css-grid-column`]: true
|
|
135
135
|
});
|
|
136
|
-
return /*#__PURE__*/
|
|
136
|
+
return /*#__PURE__*/React.createElement(BaseComponent, _extends({
|
|
137
137
|
className: className
|
|
138
138
|
}, rest), children);
|
|
139
139
|
}
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
9
9
|
import cx from 'classnames';
|
|
10
10
|
import PropTypes from 'prop-types';
|
|
11
|
-
import
|
|
11
|
+
import React from 'react';
|
|
12
12
|
import { usePrefix } from '../../internal/usePrefix.js';
|
|
13
13
|
|
|
14
14
|
/**
|
|
@@ -26,7 +26,7 @@ function ColumnHang(_ref) {
|
|
|
26
26
|
const className = cx(customClassName, `${prefix}--grid-column-hang`);
|
|
27
27
|
// cast as any to let TypeScript allow passing in attributes to base component
|
|
28
28
|
const BaseComponentAsAny = BaseComponent;
|
|
29
|
-
return /*#__PURE__*/
|
|
29
|
+
return /*#__PURE__*/React.createElement(BaseComponentAsAny, _extends({}, rest, {
|
|
30
30
|
className: className
|
|
31
31
|
}), children);
|
|
32
32
|
}
|
|
@@ -8,11 +8,11 @@
|
|
|
8
8
|
import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
9
9
|
import cx from 'classnames';
|
|
10
10
|
import PropTypes from 'prop-types';
|
|
11
|
-
import
|
|
11
|
+
import React from 'react';
|
|
12
12
|
import { usePrefix } from '../../internal/usePrefix.js';
|
|
13
13
|
import { GridSettings } from './GridContext.js';
|
|
14
14
|
|
|
15
|
-
const FlexGrid = /*#__PURE__*/
|
|
15
|
+
const FlexGrid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
16
16
|
let {
|
|
17
17
|
as,
|
|
18
18
|
condensed = false,
|
|
@@ -31,10 +31,10 @@ const FlexGrid = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
|
|
|
31
31
|
});
|
|
32
32
|
// cast as any to let TypeScript allow passing in attributes to base component
|
|
33
33
|
const BaseComponent = as || 'div';
|
|
34
|
-
return /*#__PURE__*/
|
|
34
|
+
return /*#__PURE__*/React.createElement(GridSettings, {
|
|
35
35
|
mode: "flexbox",
|
|
36
36
|
subgrid: false
|
|
37
|
-
}, /*#__PURE__*/
|
|
37
|
+
}, /*#__PURE__*/React.createElement(BaseComponent, _extends({
|
|
38
38
|
className: className,
|
|
39
39
|
ref: ref
|
|
40
40
|
}, rest), children));
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
import PropTypes from 'prop-types';
|
|
9
|
-
import
|
|
9
|
+
import React from 'react';
|
|
10
10
|
import { useFeatureFlag } from '../FeatureFlags/index.js';
|
|
11
11
|
import { CSSGrid as CSSGridComponent } from './CSSGrid.js';
|
|
12
12
|
import { FlexGrid as FlexGridComponent } from './FlexGrid.js';
|
|
@@ -14,9 +14,9 @@ import { FlexGrid as FlexGridComponent } from './FlexGrid.js';
|
|
|
14
14
|
function Grid(props) {
|
|
15
15
|
const enableCSSGrid = useFeatureFlag('enable-css-grid');
|
|
16
16
|
if (enableCSSGrid) {
|
|
17
|
-
return /*#__PURE__*/
|
|
17
|
+
return /*#__PURE__*/React.createElement(CSSGridComponent, props);
|
|
18
18
|
}
|
|
19
|
-
return /*#__PURE__*/
|
|
19
|
+
return /*#__PURE__*/React.createElement(FlexGridComponent, props);
|
|
20
20
|
}
|
|
21
21
|
Grid.propTypes = {
|
|
22
22
|
/**
|
|
@@ -1,10 +1,10 @@
|
|
|
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
|
-
import
|
|
7
|
+
import React from 'react';
|
|
8
8
|
export type GridMode = 'flexbox' | 'css-grid';
|
|
9
9
|
export interface GridSettingContext {
|
|
10
10
|
/**
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
9
9
|
import cx from 'classnames';
|
|
10
10
|
import PropTypes from 'prop-types';
|
|
11
|
-
import
|
|
11
|
+
import React from 'react';
|
|
12
12
|
import { usePrefix } from '../../internal/usePrefix.js';
|
|
13
13
|
|
|
14
14
|
function Row(_ref) {
|
|
@@ -28,7 +28,7 @@ function Row(_ref) {
|
|
|
28
28
|
});
|
|
29
29
|
// TypeScript type validation reports conflicts on different instances of keyof JSX.IntrinsicElements
|
|
30
30
|
const BaseComponentAsAny = BaseComponent;
|
|
31
|
-
return /*#__PURE__*/
|
|
31
|
+
return /*#__PURE__*/React.createElement(BaseComponentAsAny, _extends({
|
|
32
32
|
className: className
|
|
33
33
|
}, rest), children);
|
|
34
34
|
}
|
|
@@ -7,21 +7,21 @@
|
|
|
7
7
|
|
|
8
8
|
import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
9
9
|
import PropTypes from 'prop-types';
|
|
10
|
-
import
|
|
10
|
+
import React from 'react';
|
|
11
11
|
|
|
12
|
-
const HeadingContext = /*#__PURE__*/
|
|
13
|
-
const Section = /*#__PURE__*/
|
|
12
|
+
const HeadingContext = /*#__PURE__*/React.createContext(1);
|
|
13
|
+
const Section = /*#__PURE__*/React.forwardRef(function Section(_ref, ref) {
|
|
14
14
|
let {
|
|
15
15
|
as: BaseComponent = 'section',
|
|
16
16
|
level: levelOverride,
|
|
17
17
|
...rest
|
|
18
18
|
} = _ref;
|
|
19
|
-
const parentLevel =
|
|
19
|
+
const parentLevel = React.useContext(HeadingContext);
|
|
20
20
|
const level = levelOverride ?? parentLevel + 1;
|
|
21
21
|
const BaseComponentAsAny = BaseComponent;
|
|
22
|
-
return /*#__PURE__*/
|
|
22
|
+
return /*#__PURE__*/React.createElement(HeadingContext.Provider, {
|
|
23
23
|
value: Math.min(level, 6)
|
|
24
|
-
}, /*#__PURE__*/
|
|
24
|
+
}, /*#__PURE__*/React.createElement(BaseComponentAsAny, _extends({
|
|
25
25
|
ref: ref
|
|
26
26
|
}, rest)));
|
|
27
27
|
});
|
|
@@ -44,9 +44,9 @@ Section.propTypes = {
|
|
|
44
44
|
*/
|
|
45
45
|
level: PropTypes.number
|
|
46
46
|
};
|
|
47
|
-
const Heading = /*#__PURE__*/
|
|
48
|
-
const HeadingIntrinsic = `h${
|
|
49
|
-
return /*#__PURE__*/
|
|
47
|
+
const Heading = /*#__PURE__*/React.forwardRef(function Heading(props, ref) {
|
|
48
|
+
const HeadingIntrinsic = `h${React.useContext(HeadingContext)}`;
|
|
49
|
+
return /*#__PURE__*/React.createElement(HeadingIntrinsic, _extends({
|
|
50
50
|
ref: ref
|
|
51
51
|
}, props));
|
|
52
52
|
});
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
|
|
8
8
|
import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
9
9
|
import PropTypes from 'prop-types';
|
|
10
|
-
import
|
|
10
|
+
import React from 'react';
|
|
11
11
|
import cx from 'classnames';
|
|
12
12
|
import { usePrefix } from '../../internal/usePrefix.js';
|
|
13
13
|
|
|
@@ -17,7 +17,7 @@ const IconSkeleton = _ref => {
|
|
|
17
17
|
...rest
|
|
18
18
|
} = _ref;
|
|
19
19
|
const prefix = usePrefix();
|
|
20
|
-
return /*#__PURE__*/
|
|
20
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
|
21
21
|
className: cx(`${prefix}--icon--skeleton`, className)
|
|
22
22
|
}, rest));
|
|
23
23
|
};
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
|
|
8
8
|
import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
9
9
|
import PropTypes from 'prop-types';
|
|
10
|
-
import
|
|
10
|
+
import React from 'react';
|
|
11
11
|
import cx from 'classnames';
|
|
12
12
|
import '../Tooltip/DefinitionTooltip.js';
|
|
13
13
|
import { Tooltip } from '../Tooltip/Tooltip.js';
|
|
@@ -19,7 +19,7 @@ import { BadgeIndicator } from '../BadgeIndicator/index.js';
|
|
|
19
19
|
import { mapPopoverAlign } from '../../tools/mapPopoverAlign.js';
|
|
20
20
|
|
|
21
21
|
const IconButtonKinds = ['primary', 'secondary', 'ghost', 'tertiary'];
|
|
22
|
-
const IconButton = /*#__PURE__*/
|
|
22
|
+
const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(_ref, ref) {
|
|
23
23
|
let {
|
|
24
24
|
align,
|
|
25
25
|
autoAlign = false,
|
|
@@ -48,7 +48,7 @@ const IconButton = /*#__PURE__*/React__default.forwardRef(function IconButton(_r
|
|
|
48
48
|
console.warn("The prop BadgeCount must be used with hasIconOnly=true, kind='ghost' and size='lg'");
|
|
49
49
|
}
|
|
50
50
|
const badgeId = useId('badge-indicator');
|
|
51
|
-
return /*#__PURE__*/
|
|
51
|
+
return /*#__PURE__*/React.createElement(Tooltip, {
|
|
52
52
|
align: align,
|
|
53
53
|
autoAlign: autoAlign,
|
|
54
54
|
closeOnActivation: closeOnActivation,
|
|
@@ -59,7 +59,7 @@ const IconButton = /*#__PURE__*/React__default.forwardRef(function IconButton(_r
|
|
|
59
59
|
highContrast: highContrast,
|
|
60
60
|
label: label,
|
|
61
61
|
leaveDelayMs: leaveDelayMs
|
|
62
|
-
}, /*#__PURE__*/
|
|
62
|
+
}, /*#__PURE__*/React.createElement(ButtonBase, _extends({}, rest, {
|
|
63
63
|
disabled: disabled,
|
|
64
64
|
kind: kind,
|
|
65
65
|
ref: ref,
|
|
@@ -67,8 +67,8 @@ const IconButton = /*#__PURE__*/React__default.forwardRef(function IconButton(_r
|
|
|
67
67
|
isSelected: isSelected,
|
|
68
68
|
hasIconOnly: true,
|
|
69
69
|
className: className,
|
|
70
|
-
"aria-describedby": badgeCount && badgeId
|
|
71
|
-
}), children, !disabled && badgeCount !== undefined && /*#__PURE__*/
|
|
70
|
+
"aria-describedby": rest['aria-describedby'] || badgeCount && badgeId
|
|
71
|
+
}), children, !disabled && badgeCount !== undefined && /*#__PURE__*/React.createElement(BadgeIndicator, {
|
|
72
72
|
id: badgeId,
|
|
73
73
|
count: badgeCount > 0 ? badgeCount : undefined
|
|
74
74
|
})));
|
|
@@ -155,8 +155,13 @@ IconButton.propTypes = {
|
|
|
155
155
|
/**
|
|
156
156
|
* Provide the label to be rendered inside of the Tooltip. The label will use
|
|
157
157
|
* `aria-labelledby` and will fully describe the child node that is provided.
|
|
158
|
+
* If the child node already has an `aria-label`, the tooltip will not apply
|
|
159
|
+
* `aria-labelledby`. If the child node has `aria-labelledby`, that value will
|
|
160
|
+
* be used instead. Otherwise, the tooltip will use its own ID as the label.
|
|
158
161
|
* This means that if you have text in the child node it will not be
|
|
159
162
|
* announced to the screen reader.
|
|
163
|
+
* If using `badgeCount={0}`, make sure the label explains that there is a
|
|
164
|
+
* new notification.
|
|
160
165
|
*/
|
|
161
166
|
label: PropTypes.node.isRequired,
|
|
162
167
|
/**
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
import PropTypes from 'prop-types';
|
|
9
|
-
import
|
|
9
|
+
import React from 'react';
|
|
10
10
|
import cx from 'classnames';
|
|
11
11
|
import { usePrefix } from '../../internal/usePrefix.js';
|
|
12
12
|
import { ErrorFilled, WarningAltInvertedFilled, WarningAltFilled, UndefinedFilled, CheckmarkFilled, CheckmarkOutline, InProgress, Incomplete, CircleDash, PendingFilled, UnknownFilled, WarningSquareFilled } from '@carbon/icons-react';
|
|
@@ -26,7 +26,7 @@ const iconTypes = {
|
|
|
26
26
|
unknown: UnknownFilled,
|
|
27
27
|
informative: WarningSquareFilled
|
|
28
28
|
};
|
|
29
|
-
const IconIndicator = /*#__PURE__*/
|
|
29
|
+
const IconIndicator = /*#__PURE__*/React.forwardRef(function IconIndicatorContent(_ref, ref) {
|
|
30
30
|
let {
|
|
31
31
|
className: customClassName,
|
|
32
32
|
kind,
|
|
@@ -42,10 +42,10 @@ const IconIndicator = /*#__PURE__*/React__default.forwardRef(function IconIndica
|
|
|
42
42
|
if (!IconForKind) {
|
|
43
43
|
return null;
|
|
44
44
|
}
|
|
45
|
-
return /*#__PURE__*/
|
|
45
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
46
46
|
className: classNames,
|
|
47
47
|
ref: ref
|
|
48
|
-
}, /*#__PURE__*/
|
|
48
|
+
}, /*#__PURE__*/React.createElement(IconForKind, {
|
|
49
49
|
size: size,
|
|
50
50
|
className: `${prefix}--icon-indicator--${kind}`
|
|
51
51
|
}), label);
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
import PropTypes from 'prop-types';
|
|
9
|
-
import
|
|
9
|
+
import React from 'react';
|
|
10
10
|
import { IdPrefixContext } from '../../internal/useIdPrefix.js';
|
|
11
11
|
|
|
12
12
|
function IdPrefix(_ref) {
|
|
@@ -14,7 +14,7 @@ function IdPrefix(_ref) {
|
|
|
14
14
|
children,
|
|
15
15
|
prefix
|
|
16
16
|
} = _ref;
|
|
17
|
-
return /*#__PURE__*/
|
|
17
|
+
return /*#__PURE__*/React.createElement(IdPrefixContext.Provider, {
|
|
18
18
|
value: prefix
|
|
19
19
|
}, children);
|
|
20
20
|
}
|
|
@@ -6,12 +6,12 @@
|
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
import PropTypes from 'prop-types';
|
|
9
|
-
import
|
|
9
|
+
import React, { useRef, useEffect } from 'react';
|
|
10
10
|
import deprecate from '../../prop-types/deprecate.js';
|
|
11
11
|
import { usePrefix } from '../../internal/usePrefix.js';
|
|
12
12
|
import { useMergedRefs } from '../../internal/useMergedRefs.js';
|
|
13
13
|
|
|
14
|
-
const InlineCheckbox = /*#__PURE__*/
|
|
14
|
+
const InlineCheckbox = /*#__PURE__*/React.forwardRef(function InlineCheckbox(props, forwardRef) {
|
|
15
15
|
const {
|
|
16
16
|
['aria-label']: ariaLabel,
|
|
17
17
|
ariaLabel: deprecatedAriaLabel,
|
|
@@ -56,19 +56,19 @@ const InlineCheckbox = /*#__PURE__*/React__default.forwardRef(function InlineChe
|
|
|
56
56
|
}
|
|
57
57
|
onClick?.(evt);
|
|
58
58
|
}
|
|
59
|
-
return /*#__PURE__*/
|
|
59
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
60
60
|
className: `${prefix}--checkbox--inline`
|
|
61
|
-
}, /*#__PURE__*/
|
|
61
|
+
}, /*#__PURE__*/React.createElement("input", inputProps),
|
|
62
62
|
/*#__PURE__*/
|
|
63
63
|
/* eslint-disable jsx-a11y/label-has-for,jsx-a11y/label-has-associated-control,jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions */
|
|
64
|
-
|
|
64
|
+
React.createElement("label", {
|
|
65
65
|
htmlFor: id,
|
|
66
66
|
className: `${prefix}--checkbox-label`,
|
|
67
67
|
title: title,
|
|
68
68
|
onClick: evt => {
|
|
69
69
|
evt.stopPropagation();
|
|
70
70
|
}
|
|
71
|
-
}, /*#__PURE__*/
|
|
71
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
72
72
|
className: `${prefix}--visually-hidden`
|
|
73
73
|
}, deprecatedAriaLabel || ariaLabel)));
|
|
74
74
|
});
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
9
|
-
import
|
|
9
|
+
import React, { useRef, useEffect } from 'react';
|
|
10
10
|
import PropTypes from 'prop-types';
|
|
11
11
|
import cx from 'classnames';
|
|
12
12
|
import { ErrorFilled, CheckmarkFilled } from '@carbon/icons-react';
|
|
@@ -44,20 +44,20 @@ const InlineLoading = _ref => {
|
|
|
44
44
|
const getLoading = () => {
|
|
45
45
|
let iconLabel = iconDescription ? iconDescription : status;
|
|
46
46
|
if (status === 'error') {
|
|
47
|
-
return /*#__PURE__*/
|
|
47
|
+
return /*#__PURE__*/React.createElement(ErrorFilled, {
|
|
48
48
|
className: `${prefix}--inline-loading--error`
|
|
49
|
-
}, /*#__PURE__*/
|
|
49
|
+
}, /*#__PURE__*/React.createElement("title", null, iconLabel));
|
|
50
50
|
}
|
|
51
51
|
if (status === 'finished') {
|
|
52
|
-
return /*#__PURE__*/
|
|
52
|
+
return /*#__PURE__*/React.createElement(CheckmarkFilled, {
|
|
53
53
|
className: `${prefix}--inline-loading__checkmark-container`
|
|
54
|
-
}, /*#__PURE__*/
|
|
54
|
+
}, /*#__PURE__*/React.createElement("title", null, iconLabel));
|
|
55
55
|
}
|
|
56
56
|
if (status === 'active') {
|
|
57
57
|
if (!iconDescription) {
|
|
58
58
|
iconLabel = 'loading';
|
|
59
59
|
}
|
|
60
|
-
return /*#__PURE__*/
|
|
60
|
+
return /*#__PURE__*/React.createElement(Loading, {
|
|
61
61
|
small: true,
|
|
62
62
|
description: iconLabel,
|
|
63
63
|
withOverlay: false,
|
|
@@ -68,20 +68,20 @@ const InlineLoading = _ref => {
|
|
|
68
68
|
if (!iconDescription) {
|
|
69
69
|
iconLabel = 'not loading';
|
|
70
70
|
}
|
|
71
|
-
return /*#__PURE__*/
|
|
71
|
+
return /*#__PURE__*/React.createElement("title", {
|
|
72
72
|
className: `${prefix}--inline-loading__inactive-status`
|
|
73
73
|
}, iconLabel);
|
|
74
74
|
}
|
|
75
75
|
return undefined;
|
|
76
76
|
};
|
|
77
|
-
const loadingText = description && /*#__PURE__*/
|
|
77
|
+
const loadingText = description && /*#__PURE__*/React.createElement("div", {
|
|
78
78
|
className: `${prefix}--inline-loading__text`
|
|
79
79
|
}, description);
|
|
80
80
|
const loading = getLoading();
|
|
81
|
-
const loadingAnimation = loading && /*#__PURE__*/
|
|
81
|
+
const loadingAnimation = loading && /*#__PURE__*/React.createElement("div", {
|
|
82
82
|
className: `${prefix}--inline-loading__animation`
|
|
83
83
|
}, loading);
|
|
84
|
-
return /*#__PURE__*/
|
|
84
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
|
85
85
|
className: loadingClasses
|
|
86
86
|
}, rest, {
|
|
87
87
|
"aria-live": rest['aria-live'] ?? 'assertive'
|
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
-
import
|
|
8
|
+
import React from 'react';
|
|
9
9
|
|
|
10
|
-
const LayerContext = /*#__PURE__*/
|
|
10
|
+
const LayerContext = /*#__PURE__*/React.createContext(1);
|
|
11
11
|
|
|
12
12
|
export { LayerContext };
|
|
@@ -29,6 +29,10 @@ export interface LayerBaseProps {
|
|
|
29
29
|
* Specify the layer level and override any existing levels based on hierarchy
|
|
30
30
|
*/
|
|
31
31
|
level?: LayerLevel;
|
|
32
|
+
/**
|
|
33
|
+
* Applies a css background-color set to $layer-background
|
|
34
|
+
*/
|
|
35
|
+
withBackground?: boolean;
|
|
32
36
|
}
|
|
33
37
|
export type LayerProps<T extends React.ElementType> = PolymorphicComponentPropWithRef<T, LayerBaseProps>;
|
|
34
38
|
declare const Layer: React.ForwardRefExoticComponent<LayerBaseProps & {
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
9
|
-
import
|
|
9
|
+
import React from 'react';
|
|
10
10
|
import PropTypes from 'prop-types';
|
|
11
11
|
import cx from 'classnames';
|
|
12
12
|
import { usePrefix } from '../../internal/usePrefix.js';
|
|
@@ -20,29 +20,32 @@ import { clamp } from '../../internal/clamp.js';
|
|
|
20
20
|
* calls this hook is currently in
|
|
21
21
|
*/
|
|
22
22
|
function useLayer() {
|
|
23
|
-
const level =
|
|
23
|
+
const level = React.useContext(LayerContext);
|
|
24
24
|
return {
|
|
25
25
|
level
|
|
26
26
|
};
|
|
27
27
|
}
|
|
28
|
-
const Layer = /*#__PURE__*/
|
|
28
|
+
const Layer = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
29
29
|
let {
|
|
30
30
|
as,
|
|
31
31
|
className: customClassName,
|
|
32
32
|
children,
|
|
33
33
|
level: overrideLevel,
|
|
34
|
+
withBackground = false,
|
|
34
35
|
...rest
|
|
35
36
|
} = _ref;
|
|
36
|
-
const contextLevel =
|
|
37
|
+
const contextLevel = React.useContext(LayerContext);
|
|
37
38
|
const level = overrideLevel ?? contextLevel;
|
|
38
39
|
const prefix = usePrefix();
|
|
39
|
-
const className = cx(`${prefix}--layer-${levels[level]}`,
|
|
40
|
+
const className = cx(`${prefix}--layer-${levels[level]}`, {
|
|
41
|
+
[`${prefix}--layer__with-background`]: withBackground
|
|
42
|
+
}, customClassName);
|
|
40
43
|
// The level should be between MIN_LEVEL and MAX_LEVEL
|
|
41
44
|
const value = clamp(level + 1, MIN_LEVEL, MAX_LEVEL);
|
|
42
45
|
const BaseComponent = as || 'div';
|
|
43
|
-
return /*#__PURE__*/
|
|
46
|
+
return /*#__PURE__*/React.createElement(LayerContext.Provider, {
|
|
44
47
|
value: value
|
|
45
|
-
}, /*#__PURE__*/
|
|
48
|
+
}, /*#__PURE__*/React.createElement(BaseComponent, _extends({
|
|
46
49
|
ref: ref
|
|
47
50
|
}, rest, {
|
|
48
51
|
className: className
|
|
@@ -67,7 +70,11 @@ Layer.propTypes = {
|
|
|
67
70
|
/**
|
|
68
71
|
* Specify the layer level and override any existing levels based on hierarchy
|
|
69
72
|
*/
|
|
70
|
-
level: PropTypes.oneOf([0, 1, 2])
|
|
73
|
+
level: PropTypes.oneOf([0, 1, 2]),
|
|
74
|
+
/**
|
|
75
|
+
* Applies a css background-color set to $layer-background
|
|
76
|
+
*/
|
|
77
|
+
withBackground: PropTypes.bool
|
|
71
78
|
};
|
|
72
79
|
|
|
73
80
|
export { Layer, useLayer };
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
9
9
|
import cx from 'classnames';
|
|
10
10
|
import PropTypes from 'prop-types';
|
|
11
|
-
import
|
|
11
|
+
import React from 'react';
|
|
12
12
|
import { usePrefix } from '../../internal/usePrefix.js';
|
|
13
13
|
|
|
14
14
|
const sizes = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];
|
|
@@ -22,7 +22,7 @@ const densities = ['condensed', 'normal'];
|
|
|
22
22
|
* Size of components within this layout
|
|
23
23
|
*/
|
|
24
24
|
|
|
25
|
-
const Layout = /*#__PURE__*/
|
|
25
|
+
const Layout = /*#__PURE__*/React.forwardRef(function Layout(_ref, forwardRef) {
|
|
26
26
|
let {
|
|
27
27
|
as: BaseComponent = 'div',
|
|
28
28
|
children,
|
|
@@ -36,7 +36,7 @@ const Layout = /*#__PURE__*/React__default.forwardRef(function Layout(_ref, forw
|
|
|
36
36
|
[`${prefix}--layout--size-${size}`]: size && sizes.includes(size),
|
|
37
37
|
[`${prefix}--layout--density-${density}`]: density && densities.includes(density)
|
|
38
38
|
});
|
|
39
|
-
return /*#__PURE__*/
|
|
39
|
+
return /*#__PURE__*/React.createElement(BaseComponent, _extends({}, rest, {
|
|
40
40
|
ref: forwardRef,
|
|
41
41
|
className: classes
|
|
42
42
|
}), children);
|
|
@@ -65,7 +65,7 @@ Layout.propTypes = {
|
|
|
65
65
|
*/
|
|
66
66
|
size: PropTypes.oneOf(sizes)
|
|
67
67
|
};
|
|
68
|
-
const LayoutConstraint = /*#__PURE__*/
|
|
68
|
+
const LayoutConstraint = /*#__PURE__*/React.forwardRef(function Layout(_ref2, forwardRef) {
|
|
69
69
|
let {
|
|
70
70
|
as: BaseComponent = 'div',
|
|
71
71
|
children,
|
|
@@ -86,7 +86,7 @@ const LayoutConstraint = /*#__PURE__*/React__default.forwardRef(function Layout(
|
|
|
86
86
|
[`${prefix}--layout-constraint--${group}__max-${constraints?.max}`]: constraints?.max
|
|
87
87
|
};
|
|
88
88
|
}));
|
|
89
|
-
return /*#__PURE__*/
|
|
89
|
+
return /*#__PURE__*/React.createElement(BaseComponent, _extends({}, rest, {
|
|
90
90
|
ref: forwardRef,
|
|
91
91
|
className: classes
|
|
92
92
|
}), children);
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
|
|
8
8
|
import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
9
9
|
import PropTypes from 'prop-types';
|
|
10
|
-
import
|
|
10
|
+
import React from 'react';
|
|
11
11
|
import { LayoutDirectionContext } from './LayoutDirectionContext.js';
|
|
12
12
|
export { LayoutDirectionContext } from './LayoutDirectionContext.js';
|
|
13
13
|
|
|
@@ -18,14 +18,14 @@ function LayoutDirection(_ref) {
|
|
|
18
18
|
dir,
|
|
19
19
|
...rest
|
|
20
20
|
} = _ref;
|
|
21
|
-
const value =
|
|
21
|
+
const value = React.useMemo(() => {
|
|
22
22
|
return {
|
|
23
23
|
direction: dir
|
|
24
24
|
};
|
|
25
25
|
}, [dir]);
|
|
26
|
-
return /*#__PURE__*/
|
|
26
|
+
return /*#__PURE__*/React.createElement(LayoutDirectionContext.Provider, {
|
|
27
27
|
value: value
|
|
28
|
-
}, /*#__PURE__*/
|
|
28
|
+
}, /*#__PURE__*/React.createElement(BaseComponent, _extends({
|
|
29
29
|
dir: dir
|
|
30
30
|
}, rest), children));
|
|
31
31
|
}
|
|
@@ -5,9 +5,9 @@
|
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
-
import
|
|
8
|
+
import React from 'react';
|
|
9
9
|
|
|
10
|
-
const LayoutDirectionContext = /*#__PURE__*/
|
|
10
|
+
const LayoutDirectionContext = /*#__PURE__*/React.createContext({
|
|
11
11
|
direction: 'ltr'
|
|
12
12
|
});
|
|
13
13
|
|
|
@@ -8,11 +8,11 @@
|
|
|
8
8
|
import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
9
9
|
import cx from 'classnames';
|
|
10
10
|
import PropTypes from 'prop-types';
|
|
11
|
-
import
|
|
11
|
+
import React from 'react';
|
|
12
12
|
import { usePrefix } from '../../internal/usePrefix.js';
|
|
13
13
|
|
|
14
14
|
// First create the component with basic types
|
|
15
|
-
const LinkBase = /*#__PURE__*/
|
|
15
|
+
const LinkBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
16
16
|
let {
|
|
17
17
|
as: BaseComponent,
|
|
18
18
|
children,
|
|
@@ -35,7 +35,7 @@ const LinkBase = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
|
|
|
35
35
|
});
|
|
36
36
|
const rel = target === '_blank' ? 'noopener' : undefined;
|
|
37
37
|
const linkProps = {
|
|
38
|
-
className
|
|
38
|
+
className,
|
|
39
39
|
rel,
|
|
40
40
|
target
|
|
41
41
|
};
|
|
@@ -49,11 +49,11 @@ const LinkBase = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
|
|
|
49
49
|
linkProps['aria-disabled'] = true;
|
|
50
50
|
}
|
|
51
51
|
const BaseComponentAsAny = BaseComponent ?? 'a';
|
|
52
|
-
return /*#__PURE__*/
|
|
52
|
+
return /*#__PURE__*/React.createElement(BaseComponentAsAny, _extends({
|
|
53
53
|
ref: ref
|
|
54
|
-
}, linkProps, rest), children, !inline && Icon && /*#__PURE__*/
|
|
54
|
+
}, linkProps, rest), children, !inline && Icon && /*#__PURE__*/React.createElement("div", {
|
|
55
55
|
className: `${prefix}--link__icon`
|
|
56
|
-
}, /*#__PURE__*/
|
|
56
|
+
}, /*#__PURE__*/React.createElement(Icon, null)));
|
|
57
57
|
});
|
|
58
58
|
const Link = LinkBase;
|
|
59
59
|
Link.displayName = 'Link';
|
|
@@ -4,11 +4,10 @@
|
|
|
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';
|
|
7
|
+
import React, { type HTMLAttributes } from 'react';
|
|
8
8
|
import { type ListBoxSize, type ListBoxType } from '.';
|
|
9
|
-
import { ReactAttr } from '../../types/common';
|
|
10
9
|
type ExcludedAttributes = 'onKeyDown' | 'onKeyPress' | 'ref';
|
|
11
|
-
export interface ListBoxProps extends Omit<
|
|
10
|
+
export interface ListBoxProps extends Omit<HTMLAttributes<HTMLDivElement>, ExcludedAttributes> {
|
|
12
11
|
/**
|
|
13
12
|
* Specify whether the ListBox is currently disabled
|
|
14
13
|
*/
|