@carbon/react 1.90.0-rc.0 → 1.90.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 +743 -784
- package/es/components/AILabel/index.js +8 -6
- package/es/components/Breadcrumb/BreadcrumbItem.js +2 -0
- package/es/components/Button/Button.js +3 -0
- package/es/components/ChatButton/ChatButton.js +1 -0
- package/es/components/CheckboxGroup/CheckboxGroup.js +21 -2
- package/es/components/ComboBox/ComboBox.js +17 -1
- package/es/components/ComboButton/index.js +1 -0
- package/es/components/ComposedModal/ComposedModal.js +4 -1
- package/es/components/DataTable/DataTable.js +14 -0
- package/es/components/DataTable/Table.js +3 -3
- package/es/components/DataTable/TableExpandHeader.js +5 -1
- package/es/components/DataTable/TableExpandRow.js +1 -0
- package/es/components/DataTable/TableHeader.js +2 -0
- package/es/components/DataTable/TableRow.js +5 -0
- package/es/components/DataTable/TableSlugRow.js +1 -0
- package/es/components/DataTable/TableToolbarMenu.js +3 -0
- package/es/components/DataTable/state/sorting.d.ts +3 -1
- package/es/components/DataTable/state/sorting.js +2 -0
- package/es/components/DataTable/tools/sorting.js +1 -0
- package/es/components/DatePicker/DatePicker.js +14 -3
- package/es/components/DatePickerInput/DatePickerInput.js +6 -0
- package/es/components/Dialog/Dialog.js +10 -2
- package/es/components/Dropdown/Dropdown.js +16 -4
- package/es/components/ErrorBoundary/ErrorBoundaryContext.js +1 -0
- package/es/components/FileUploader/FileUploader.js +9 -2
- package/es/components/FileUploader/FileUploaderButton.js +1 -1
- package/es/components/FileUploader/FileUploaderDropContainer.js +1 -1
- package/es/components/FileUploader/FileUploaderItem.js +3 -0
- package/es/components/FluidMultiSelect/FluidMultiSelect.js +2 -0
- package/es/components/FluidNumberInput/FluidNumberInput.js +3 -2
- package/es/components/FluidSearch/FluidSearch.js +3 -2
- package/es/components/FluidSelect/FluidSelect.js +3 -2
- package/es/components/FluidTextInput/FluidTextInput.js +3 -2
- package/es/components/FluidTimePicker/FluidTimePicker.js +11 -4
- package/es/components/FluidTimePickerSelect/FluidTimePickerSelect.js +3 -2
- package/es/components/Grid/CSSGrid.js +5 -0
- package/es/components/Grid/Column.js +3 -0
- package/es/components/Grid/ColumnHang.js +1 -0
- package/es/components/Grid/FlexGrid.js +1 -0
- package/es/components/Grid/Row.js +1 -0
- package/es/components/Heading/index.js +3 -1
- package/es/components/IconButton/index.js +4 -2
- package/es/components/IconIndicator/index.js +4 -2
- package/es/components/InlineCheckbox/InlineCheckbox.js +3 -2
- package/es/components/Layout/index.js +6 -4
- package/es/components/LayoutDirection/LayoutDirection.js +2 -0
- package/es/components/Link/Link.js +3 -0
- package/es/components/ListBox/ListBoxMenuItem.js +4 -1
- package/es/components/ListBox/next/ListBoxTrigger.js +3 -2
- package/es/components/Menu/Menu.js +6 -9
- package/es/components/Menu/MenuContext.js +1 -0
- package/es/components/Menu/MenuItem.js +5 -13
- package/es/components/MenuButton/index.js +7 -2
- package/es/components/Modal/Modal.js +3 -0
- package/es/components/ModalWrapper/ModalWrapper.js +2 -0
- package/es/components/MultiSelect/FilterableMultiSelect.js +24 -5
- package/es/components/MultiSelect/MultiSelect.js +21 -5
- package/es/components/Notification/Notification.js +1 -1
- package/es/components/NumberInput/NumberInput.js +7 -1
- package/es/components/OverflowMenu/OverflowMenu.js +2 -0
- package/es/components/OverflowMenu/next/index.js +3 -2
- package/es/components/OverflowMenuItem/OverflowMenuItem.js +2 -0
- package/es/components/PageHeader/PageHeader.d.ts +3 -3
- package/es/components/PageHeader/PageHeader.js +22 -8
- package/es/components/Pagination/Pagination.js +6 -2
- package/es/components/PaginationNav/PaginationNav.js +2 -5
- package/es/components/Popover/index.js +14 -4
- package/es/components/ProgressBar/ProgressBar.js +4 -2
- package/es/components/RadioTile/RadioTile.js +2 -2
- package/es/components/Search/Search.js +2 -2
- package/es/components/Select/Select.js +2 -3
- package/es/components/ShapeIndicator/index.js +4 -2
- package/es/components/SkeletonPlaceholder/SkeletonPlaceholder.d.ts +4 -4
- package/es/components/SkeletonPlaceholder/SkeletonPlaceholder.js +1 -2
- package/es/components/SkeletonText/SkeletonText.js +0 -2
- package/es/components/Slider/Slider.js +11 -16
- package/es/components/Stack/HStack.js +1 -0
- package/es/components/Stack/Stack.js +6 -9
- package/es/components/Stack/VStack.js +1 -0
- package/es/components/StructuredList/StructuredList.js +3 -0
- package/es/components/Switch/Switch.js +1 -1
- package/es/components/Tabs/Tabs.js +28 -17
- package/es/components/Tag/DismissibleTag.js +2 -0
- package/es/components/Tag/OperationalTag.js +2 -0
- package/es/components/Tag/SelectableTag.js +2 -0
- package/es/components/Tag/Tag.js +4 -0
- package/es/components/Tag/isEllipsisActive.js +1 -0
- package/es/components/Text/Text.js +1 -0
- package/es/components/TextInput/ControlledPasswordInput.js +2 -4
- package/es/components/TextInput/PasswordInput.js +7 -2
- package/es/components/TextInput/TextInput.js +4 -2
- package/es/components/Theme/index.js +8 -3
- package/es/components/Tile/Tile.js +14 -17
- package/es/components/TimePicker/TimePicker.js +1 -0
- package/es/components/Toggle/Toggle.js +1 -1
- package/es/components/Toggletip/index.js +4 -0
- package/es/components/Tooltip/DefinitionTooltip.js +1 -0
- package/es/components/Tooltip/Tooltip.js +30 -23
- package/es/components/TreeView/TreeNode.js +13 -5
- package/es/components/TreeView/TreeView.js +7 -0
- package/es/components/UIShell/HeaderContainer.js +3 -1
- package/es/components/UIShell/HeaderGlobalAction.js +2 -2
- package/es/components/UIShell/HeaderMenu.js +3 -3
- package/es/components/UIShell/HeaderPanel.js +2 -2
- package/es/components/UIShell/Link.js +2 -0
- package/es/components/UIShell/SideNavItems.js +1 -0
- package/es/components/UIShell/SideNavMenu.js +2 -2
- package/es/components/UIShell/SideNavMenuItem.js +1 -1
- package/es/components/UIShell/SideNavSwitcher.js +1 -1
- package/es/components/UIShell/Switcher.js +2 -1
- package/es/components/UIShell/SwitcherItem.js +4 -2
- package/es/internal/FloatingMenu.js +7 -1
- package/es/internal/Selection.js +12 -3
- package/es/internal/useMergedRefs.js +1 -0
- package/es/internal/useNoInteractiveChildren.js +4 -0
- package/es/internal/useOutsideClick.js +1 -0
- package/es/internal/useOverflowItems.js +6 -0
- package/es/internal/useResizeObserver.js +4 -0
- package/es/internal/useSavedCallback.js +1 -0
- package/es/internal/warning.js +1 -0
- package/es/prop-types/isRequiredOneOf.js +4 -1
- package/es/tools/events.js +3 -1
- package/es/tools/wrapComponent.js +1 -0
- package/lib/components/AILabel/index.js +8 -6
- package/lib/components/Breadcrumb/BreadcrumbItem.js +2 -0
- package/lib/components/Button/Button.js +3 -0
- package/lib/components/ChatButton/ChatButton.js +1 -0
- package/lib/components/CheckboxGroup/CheckboxGroup.js +20 -1
- package/lib/components/ComboBox/ComboBox.js +17 -1
- package/lib/components/ComboButton/index.js +1 -0
- package/lib/components/ComposedModal/ComposedModal.js +4 -1
- package/lib/components/DataTable/DataTable.js +14 -0
- package/lib/components/DataTable/Table.js +3 -3
- package/lib/components/DataTable/TableExpandHeader.js +5 -1
- package/lib/components/DataTable/TableExpandRow.js +1 -0
- package/lib/components/DataTable/TableHeader.js +2 -0
- package/lib/components/DataTable/TableRow.js +5 -0
- package/lib/components/DataTable/TableSlugRow.js +1 -0
- package/lib/components/DataTable/TableToolbarMenu.js +3 -0
- package/lib/components/DataTable/state/sorting.d.ts +3 -1
- package/lib/components/DataTable/state/sorting.js +2 -0
- package/lib/components/DataTable/tools/sorting.js +1 -0
- package/lib/components/DatePicker/DatePicker.js +14 -3
- package/lib/components/DatePickerInput/DatePickerInput.js +6 -0
- package/lib/components/Dialog/Dialog.js +10 -2
- package/lib/components/Dropdown/Dropdown.js +16 -4
- package/lib/components/ErrorBoundary/ErrorBoundaryContext.js +1 -0
- package/lib/components/FileUploader/FileUploader.js +9 -2
- package/lib/components/FileUploader/FileUploaderButton.js +1 -1
- package/lib/components/FileUploader/FileUploaderDropContainer.js +1 -1
- package/lib/components/FileUploader/FileUploaderItem.js +3 -0
- package/lib/components/FluidMultiSelect/FluidMultiSelect.js +2 -0
- package/lib/components/FluidNumberInput/FluidNumberInput.js +3 -2
- package/lib/components/FluidSearch/FluidSearch.js +3 -2
- package/lib/components/FluidSelect/FluidSelect.js +3 -2
- package/lib/components/FluidTextInput/FluidTextInput.js +3 -2
- package/lib/components/FluidTimePicker/FluidTimePicker.js +11 -4
- package/lib/components/FluidTimePickerSelect/FluidTimePickerSelect.js +3 -2
- package/lib/components/Grid/CSSGrid.js +5 -0
- package/lib/components/Grid/Column.js +3 -0
- package/lib/components/Grid/ColumnHang.js +1 -0
- package/lib/components/Grid/FlexGrid.js +1 -0
- package/lib/components/Grid/Row.js +1 -0
- package/lib/components/Heading/index.js +3 -1
- package/lib/components/IconButton/index.js +4 -2
- package/lib/components/IconIndicator/index.js +4 -2
- package/lib/components/InlineCheckbox/InlineCheckbox.js +3 -2
- package/lib/components/Layout/index.js +6 -4
- package/lib/components/LayoutDirection/LayoutDirection.js +2 -0
- package/lib/components/Link/Link.js +3 -0
- package/lib/components/ListBox/ListBoxMenuItem.js +4 -1
- package/lib/components/ListBox/next/ListBoxTrigger.js +3 -2
- package/lib/components/Menu/Menu.js +6 -9
- package/lib/components/Menu/MenuContext.js +1 -0
- package/lib/components/Menu/MenuItem.js +5 -13
- package/lib/components/MenuButton/index.js +7 -2
- package/lib/components/Modal/Modal.js +3 -0
- package/lib/components/ModalWrapper/ModalWrapper.js +2 -0
- package/lib/components/MultiSelect/FilterableMultiSelect.js +24 -5
- package/lib/components/MultiSelect/MultiSelect.js +21 -5
- package/lib/components/Notification/Notification.js +1 -1
- package/lib/components/NumberInput/NumberInput.js +7 -1
- package/lib/components/OverflowMenu/OverflowMenu.js +2 -0
- package/lib/components/OverflowMenu/next/index.js +3 -2
- package/lib/components/OverflowMenuItem/OverflowMenuItem.js +2 -0
- package/lib/components/PageHeader/PageHeader.d.ts +3 -3
- package/lib/components/PageHeader/PageHeader.js +22 -8
- package/lib/components/Pagination/Pagination.js +6 -2
- package/lib/components/PaginationNav/PaginationNav.js +2 -5
- package/lib/components/Popover/index.js +14 -4
- package/lib/components/ProgressBar/ProgressBar.js +4 -2
- package/lib/components/RadioTile/RadioTile.js +2 -2
- package/lib/components/Search/Search.js +2 -2
- package/lib/components/Select/Select.js +2 -3
- package/lib/components/ShapeIndicator/index.js +4 -2
- package/lib/components/SkeletonPlaceholder/SkeletonPlaceholder.d.ts +4 -4
- package/lib/components/SkeletonPlaceholder/SkeletonPlaceholder.js +1 -2
- package/lib/components/SkeletonText/SkeletonText.js +0 -2
- package/lib/components/Slider/Slider.js +11 -16
- package/lib/components/Stack/HStack.js +1 -0
- package/lib/components/Stack/Stack.js +6 -9
- package/lib/components/Stack/VStack.js +1 -0
- package/lib/components/StructuredList/StructuredList.js +3 -0
- package/lib/components/Switch/Switch.js +1 -1
- package/lib/components/Tabs/Tabs.js +28 -17
- package/lib/components/Tag/DismissibleTag.js +2 -0
- package/lib/components/Tag/OperationalTag.js +2 -0
- package/lib/components/Tag/SelectableTag.js +2 -0
- package/lib/components/Tag/Tag.js +4 -0
- package/lib/components/Tag/isEllipsisActive.js +1 -0
- package/lib/components/Text/Text.js +1 -0
- package/lib/components/TextInput/ControlledPasswordInput.js +2 -4
- package/lib/components/TextInput/PasswordInput.js +7 -2
- package/lib/components/TextInput/TextInput.js +4 -2
- package/lib/components/Theme/index.js +8 -3
- package/lib/components/Tile/Tile.js +14 -17
- package/lib/components/TimePicker/TimePicker.js +1 -0
- package/lib/components/Toggle/Toggle.js +1 -1
- package/lib/components/Toggletip/index.js +4 -0
- package/lib/components/Tooltip/DefinitionTooltip.js +1 -0
- package/lib/components/Tooltip/Tooltip.js +30 -23
- package/lib/components/TreeView/TreeNode.js +13 -5
- package/lib/components/TreeView/TreeView.js +7 -0
- package/lib/components/UIShell/HeaderContainer.js +3 -1
- package/lib/components/UIShell/HeaderGlobalAction.js +2 -2
- package/lib/components/UIShell/HeaderMenu.js +3 -3
- package/lib/components/UIShell/HeaderPanel.js +2 -2
- package/lib/components/UIShell/Link.js +2 -0
- package/lib/components/UIShell/SideNavItems.js +1 -0
- package/lib/components/UIShell/SideNavMenu.js +2 -2
- package/lib/components/UIShell/SideNavMenuItem.js +1 -1
- package/lib/components/UIShell/SideNavSwitcher.js +1 -1
- package/lib/components/UIShell/Switcher.js +2 -1
- package/lib/components/UIShell/SwitcherItem.js +4 -2
- package/lib/internal/FloatingMenu.js +7 -1
- package/lib/internal/Selection.js +12 -3
- package/lib/internal/useMergedRefs.js +1 -0
- package/lib/internal/useNoInteractiveChildren.js +4 -0
- package/lib/internal/useOutsideClick.js +1 -0
- package/lib/internal/useOverflowItems.js +6 -0
- package/lib/internal/useResizeObserver.js +4 -0
- package/lib/internal/useSavedCallback.js +1 -0
- package/lib/internal/warning.js +1 -0
- package/lib/prop-types/isRequiredOneOf.js +4 -1
- package/lib/tools/events.js +3 -1
- package/lib/tools/wrapComponent.js +1 -0
- package/package.json +9 -9
|
@@ -49,7 +49,9 @@ function getPageSize(pageSizes, pageSize) {
|
|
|
49
49
|
}
|
|
50
50
|
return pageSizes[0].value;
|
|
51
51
|
}
|
|
52
|
-
|
|
52
|
+
|
|
53
|
+
// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
54
|
+
const Pagination = /*#__PURE__*/React.forwardRef(({
|
|
53
55
|
backwardText = 'Previous page',
|
|
54
56
|
className: customClassName = '',
|
|
55
57
|
disabled = false,
|
|
@@ -60,6 +62,7 @@ const Pagination = /*#__PURE__*/React.forwardRef(function Pagination({
|
|
|
60
62
|
itemRangeText = (min, max, total) => `${min}–${max} of ${total} items`,
|
|
61
63
|
itemsPerPageText = 'Items per page:',
|
|
62
64
|
onChange,
|
|
65
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
63
66
|
pageNumberText: _pageNumberText = 'Page Number',
|
|
64
67
|
pageRangeText = (_current, total) => `of ${total} ${total === 1 ? 'page' : 'pages'}`,
|
|
65
68
|
page: controlledPage = 1,
|
|
@@ -72,7 +75,7 @@ const Pagination = /*#__PURE__*/React.forwardRef(function Pagination({
|
|
|
72
75
|
size = 'md',
|
|
73
76
|
totalItems,
|
|
74
77
|
...rest
|
|
75
|
-
}, ref) {
|
|
78
|
+
}, ref) => {
|
|
76
79
|
const prefix = usePrefix();
|
|
77
80
|
const inputId = useFallbackId(id?.toString());
|
|
78
81
|
const backBtnRef = useRef(null);
|
|
@@ -122,6 +125,7 @@ const Pagination = /*#__PURE__*/React.forwardRef(function Pagination({
|
|
|
122
125
|
handleFocus(focusTarget);
|
|
123
126
|
setFocusTarget(null);
|
|
124
127
|
}
|
|
128
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
125
129
|
}, [focusTarget]);
|
|
126
130
|
|
|
127
131
|
// Sync state with props
|
|
@@ -107,7 +107,6 @@ function PaginationOverflow({
|
|
|
107
107
|
fromIndex = NaN,
|
|
108
108
|
count = NaN,
|
|
109
109
|
onSelect,
|
|
110
|
-
// eslint-disable-next-line react/prop-types
|
|
111
110
|
disableOverflow,
|
|
112
111
|
translateWithId: t = translateWithId
|
|
113
112
|
}) {
|
|
@@ -165,7 +164,7 @@ function PaginationOverflow({
|
|
|
165
164
|
}
|
|
166
165
|
return null;
|
|
167
166
|
}
|
|
168
|
-
const PaginationNav = /*#__PURE__*/React.forwardRef(
|
|
167
|
+
const PaginationNav = /*#__PURE__*/React.forwardRef(({
|
|
169
168
|
className,
|
|
170
169
|
onChange = () => {},
|
|
171
170
|
totalItems = NaN,
|
|
@@ -176,7 +175,7 @@ const PaginationNav = /*#__PURE__*/React.forwardRef(function PaginationNav({
|
|
|
176
175
|
size = 'lg',
|
|
177
176
|
translateWithId: t = translateWithId,
|
|
178
177
|
...rest
|
|
179
|
-
}, ref) {
|
|
178
|
+
}, ref) => {
|
|
180
179
|
const smMediaQuery = `(max-width: ${breakpoints.sm.width})`;
|
|
181
180
|
const isSm = useMatchMedia(smMediaQuery);
|
|
182
181
|
let numberOfPages;
|
|
@@ -396,8 +395,6 @@ PaginationNav.propTypes = {
|
|
|
396
395
|
* Set this to true if you are having performance problems with large data sets.
|
|
397
396
|
*/
|
|
398
397
|
disableOverflow: PropTypes.bool,
|
|
399
|
-
// eslint-disable-line react/prop-types
|
|
400
|
-
|
|
401
398
|
/**
|
|
402
399
|
* The number of items to be shown (minimum of 4 unless props.items < 4).
|
|
403
400
|
*/
|
|
@@ -48,8 +48,10 @@ const Popover = /*#__PURE__*/React.forwardRef(function PopoverRenderFunction({
|
|
|
48
48
|
open,
|
|
49
49
|
alignmentAxisOffset,
|
|
50
50
|
...rest
|
|
51
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
51
52
|
},
|
|
52
53
|
//this is a workaround, have to come back and fix this.
|
|
54
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
53
55
|
forwardRef) {
|
|
54
56
|
const prefix = usePrefix();
|
|
55
57
|
const floating = useRef(null);
|
|
@@ -91,7 +93,12 @@ forwardRef) {
|
|
|
91
93
|
// needs to be placed 1px further outside the popover content. To do so,
|
|
92
94
|
// we look to see if any of the children has a className containing "slug"
|
|
93
95
|
const initialCaretHeight = React.Children.toArray(children).some(x => {
|
|
94
|
-
return
|
|
96
|
+
return (
|
|
97
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
98
|
+
x?.props?.className?.includes('slug') ||
|
|
99
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
100
|
+
x?.props?.className?.includes('ai-label')
|
|
101
|
+
);
|
|
95
102
|
}) ? 7 : 6;
|
|
96
103
|
// These defaults match the defaults defined in packages/styles/scss/components/popover/_popover.scss
|
|
97
104
|
const popoverDimensions = useRef({
|
|
@@ -210,6 +217,7 @@ forwardRef) {
|
|
|
210
217
|
[`${prefix}--popover--tab-tip`]: isTabTip
|
|
211
218
|
}, customClassName);
|
|
212
219
|
const mappedChildren = React.Children.map(children, child => {
|
|
220
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
213
221
|
const item = child;
|
|
214
222
|
const displayName = item?.type?.displayName;
|
|
215
223
|
|
|
@@ -224,9 +232,13 @@ forwardRef) {
|
|
|
224
232
|
const isTriggerComponent = enableFloatingStyles && displayName && ['ToggletipButton'].includes(displayName);
|
|
225
233
|
const isAllowedTriggerComponent = enableFloatingStyles && !['ToggletipContent', 'PopoverContent'].includes(displayName);
|
|
226
234
|
if (/*#__PURE__*/React.isValidElement(item) && (isTriggerElement || isTriggerComponent || isAllowedTriggerComponent)) {
|
|
235
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
227
236
|
const className = item?.props?.className;
|
|
237
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
228
238
|
const ref = (item?.props).ref;
|
|
229
239
|
const tabTipClasses = cx(`${prefix}--popover--tab-tip__button`, className);
|
|
240
|
+
|
|
241
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
230
242
|
return /*#__PURE__*/React.cloneElement(item, {
|
|
231
243
|
className: isTabTip && item?.type === 'button' ? tabTipClasses : className || '',
|
|
232
244
|
// With cloneElement, if you pass a `ref`, it overrides the original ref.
|
|
@@ -358,9 +370,7 @@ Popover.propTypes = {
|
|
|
358
370
|
*/
|
|
359
371
|
open: PropTypes.bool.isRequired
|
|
360
372
|
};
|
|
361
|
-
function PopoverContentRenderFunction(
|
|
362
|
-
// eslint-disable-next-line react/prop-types
|
|
363
|
-
{
|
|
373
|
+
function PopoverContentRenderFunction({
|
|
364
374
|
className,
|
|
365
375
|
children,
|
|
366
376
|
...rest
|
|
@@ -55,14 +55,16 @@ function ProgressBar({
|
|
|
55
55
|
});
|
|
56
56
|
let StatusIcon = null;
|
|
57
57
|
if (isError) {
|
|
58
|
-
|
|
58
|
+
// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
59
|
+
StatusIcon = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
59
60
|
return /*#__PURE__*/React.createElement(ErrorFilled, _extends({
|
|
60
61
|
ref: ref,
|
|
61
62
|
size: 16
|
|
62
63
|
}, props));
|
|
63
64
|
});
|
|
64
65
|
} else if (isFinished) {
|
|
65
|
-
|
|
66
|
+
// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
67
|
+
StatusIcon = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
66
68
|
return /*#__PURE__*/React.createElement(CheckmarkFilled, _extends({
|
|
67
69
|
ref: ref,
|
|
68
70
|
size: 16
|
|
@@ -23,7 +23,7 @@ import { isComponentElement } from '../../internal/utils.js';
|
|
|
23
23
|
import { Text } from '../Text/Text.js';
|
|
24
24
|
|
|
25
25
|
var _RadioButtonChecked, _RadioButton, _CheckmarkFilled;
|
|
26
|
-
const RadioTile = /*#__PURE__*/React.forwardRef(
|
|
26
|
+
const RadioTile = /*#__PURE__*/React.forwardRef(({
|
|
27
27
|
children,
|
|
28
28
|
className: customClassName,
|
|
29
29
|
decorator,
|
|
@@ -39,7 +39,7 @@ const RadioTile = /*#__PURE__*/React.forwardRef(function RadioTile({
|
|
|
39
39
|
slug,
|
|
40
40
|
required,
|
|
41
41
|
...rest
|
|
42
|
-
}, ref) {
|
|
42
|
+
}, ref) => {
|
|
43
43
|
const prefix = usePrefix();
|
|
44
44
|
const inputId = useFallbackId(id);
|
|
45
45
|
const className = cx(customClassName, `${prefix}--tile`, `${prefix}--tile--selectable`, `${prefix}--tile--radio`, {
|
|
@@ -22,7 +22,7 @@ import { FormContext } from '../FluidForm/FormContext.js';
|
|
|
22
22
|
import { noopFn } from '../../internal/noopFn.js';
|
|
23
23
|
|
|
24
24
|
var _Close;
|
|
25
|
-
const Search = /*#__PURE__*/React.forwardRef(
|
|
25
|
+
const Search = /*#__PURE__*/React.forwardRef(({
|
|
26
26
|
autoComplete = 'off',
|
|
27
27
|
className,
|
|
28
28
|
closeButtonLabelText = 'Clear search input',
|
|
@@ -44,7 +44,7 @@ const Search = /*#__PURE__*/React.forwardRef(function Search({
|
|
|
44
44
|
type = 'text',
|
|
45
45
|
value,
|
|
46
46
|
...rest
|
|
47
|
-
}, forwardRef) {
|
|
47
|
+
}, forwardRef) => {
|
|
48
48
|
const hasPropValue = value || defaultValue ? true : false;
|
|
49
49
|
const prefix = usePrefix();
|
|
50
50
|
const {
|
|
@@ -21,7 +21,7 @@ import { AILabel } from '../AILabel/index.js';
|
|
|
21
21
|
import { isComponentElement } from '../../internal/utils.js';
|
|
22
22
|
import { Text } from '../Text/Text.js';
|
|
23
23
|
|
|
24
|
-
const Select = /*#__PURE__*/React.forwardRef(
|
|
24
|
+
const Select = /*#__PURE__*/React.forwardRef(({
|
|
25
25
|
className,
|
|
26
26
|
decorator,
|
|
27
27
|
id,
|
|
@@ -31,7 +31,6 @@ const Select = /*#__PURE__*/React.forwardRef(function Select({
|
|
|
31
31
|
children,
|
|
32
32
|
// reserved for use with Pagination component
|
|
33
33
|
noLabel = false,
|
|
34
|
-
// eslint-disable-next-line no-unused-vars
|
|
35
34
|
hideLabel = false,
|
|
36
35
|
invalid = false,
|
|
37
36
|
invalidText = '',
|
|
@@ -44,7 +43,7 @@ const Select = /*#__PURE__*/React.forwardRef(function Select({
|
|
|
44
43
|
onChange,
|
|
45
44
|
slug,
|
|
46
45
|
...other
|
|
47
|
-
}, ref) {
|
|
46
|
+
}, ref) => {
|
|
48
47
|
const prefix = usePrefix();
|
|
49
48
|
const {
|
|
50
49
|
isFluid
|
|
@@ -46,13 +46,15 @@ const shapeTypes = {
|
|
|
46
46
|
incomplete: incompleteIcon,
|
|
47
47
|
draft: CircleStroke
|
|
48
48
|
};
|
|
49
|
-
|
|
49
|
+
// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
50
|
+
const ShapeIndicator = /*#__PURE__*/React.forwardRef(({
|
|
50
51
|
className: customClassName,
|
|
51
52
|
kind,
|
|
52
53
|
label,
|
|
53
54
|
textSize = 12,
|
|
55
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
54
56
|
...rest
|
|
55
|
-
}, ref) {
|
|
57
|
+
}, ref) => {
|
|
56
58
|
const prefix = usePrefix();
|
|
57
59
|
const classNames = cx(`${prefix}--shape-indicator`, customClassName, {
|
|
58
60
|
[`${prefix}--shape-indicator--14`]: textSize == 14
|
|
@@ -1,11 +1,12 @@
|
|
|
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 { type HTMLAttributes } from 'react';
|
|
7
8
|
import PropTypes from 'prop-types';
|
|
8
|
-
export interface SkeletonPlaceholderProps {
|
|
9
|
+
export interface SkeletonPlaceholderProps extends HTMLAttributes<HTMLDivElement> {
|
|
9
10
|
/**
|
|
10
11
|
* Add a custom class to the component to set the height and width
|
|
11
12
|
*/
|
|
@@ -15,8 +16,7 @@ declare const SkeletonPlaceholder: {
|
|
|
15
16
|
({ className, ...other }: SkeletonPlaceholderProps): import("react/jsx-runtime").JSX.Element;
|
|
16
17
|
propTypes: {
|
|
17
18
|
/**
|
|
18
|
-
* Add a custom class to the component
|
|
19
|
-
* to set the height and width
|
|
19
|
+
* Add a custom class to the component to set the height and width
|
|
20
20
|
*/
|
|
21
21
|
className: PropTypes.Requireable<string>;
|
|
22
22
|
};
|
|
@@ -25,8 +25,7 @@ const SkeletonPlaceholder = ({
|
|
|
25
25
|
};
|
|
26
26
|
SkeletonPlaceholder.propTypes = {
|
|
27
27
|
/**
|
|
28
|
-
* Add a custom class to the component
|
|
29
|
-
* to set the height and width
|
|
28
|
+
* Add a custom class to the component to set the height and width
|
|
30
29
|
*/
|
|
31
30
|
className: PropTypes.string
|
|
32
31
|
};
|
|
@@ -66,8 +66,6 @@ const SkeletonText = ({
|
|
|
66
66
|
if (lineCountNumber !== 1) {
|
|
67
67
|
return /*#__PURE__*/React.createElement("div", null, lines);
|
|
68
68
|
}
|
|
69
|
-
|
|
70
|
-
// eslint-disable-next-line react/jsx-no-useless-fragment
|
|
71
69
|
return /*#__PURE__*/React.createElement(React.Fragment, null, lines);
|
|
72
70
|
};
|
|
73
71
|
SkeletonText.propTypes = {
|
|
@@ -31,23 +31,15 @@ const ThumbWrapper = ({
|
|
|
31
31
|
...rest
|
|
32
32
|
}) => {
|
|
33
33
|
if (hasTooltip) {
|
|
34
|
-
return (
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
className: className,
|
|
39
|
-
style: style
|
|
40
|
-
}, rest), children)
|
|
41
|
-
);
|
|
34
|
+
return /*#__PURE__*/React.createElement(Tooltip, _extends({
|
|
35
|
+
className: className,
|
|
36
|
+
style: style
|
|
37
|
+
}, rest), children);
|
|
42
38
|
} else {
|
|
43
|
-
return (
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
className: className,
|
|
48
|
-
style: style
|
|
49
|
-
}, children)
|
|
50
|
-
);
|
|
39
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
40
|
+
className: className,
|
|
41
|
+
style: style
|
|
42
|
+
}, children);
|
|
51
43
|
}
|
|
52
44
|
};
|
|
53
45
|
const translationIds = {
|
|
@@ -883,6 +875,7 @@ class Slider extends PureComponent {
|
|
|
883
875
|
hideLabel,
|
|
884
876
|
step = 1,
|
|
885
877
|
// TODO: Other properties are deleted below. Why isn't this one?
|
|
878
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
886
879
|
stepMultiplier: _stepMultiplier,
|
|
887
880
|
inputType = 'number',
|
|
888
881
|
invalidText,
|
|
@@ -912,9 +905,11 @@ class Slider extends PureComponent {
|
|
|
912
905
|
} = this.state;
|
|
913
906
|
const showWarning = !readOnly && warn ||
|
|
914
907
|
// TODO: https://github.com/carbon-design-system/carbon/issues/18991#issuecomment-2795709637
|
|
908
|
+
// eslint-disable-next-line valid-typeof , no-constant-binary-expression -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
915
909
|
typeof correctedValue !== null && correctedPosition === HandlePosition.LOWER && isValid;
|
|
916
910
|
const showWarningUpper = !readOnly && warn ||
|
|
917
911
|
// TODO: https://github.com/carbon-design-system/carbon/issues/18991#issuecomment-2795709637
|
|
912
|
+
// eslint-disable-next-line valid-typeof, no-constant-binary-expression -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
918
913
|
typeof correctedValue !== null && correctedPosition === (twoHandles ? HandlePosition.UPPER : HandlePosition.LOWER) && (twoHandles ? isValidUpper : isValid);
|
|
919
914
|
return /*#__PURE__*/React.createElement(PrefixContext.Consumer, null, prefix => {
|
|
920
915
|
const labelId = `${id}-label`;
|
|
@@ -9,6 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
|
|
|
9
9
|
import React, { forwardRef } from 'react';
|
|
10
10
|
import { Stack } from './Stack.js';
|
|
11
11
|
|
|
12
|
+
// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
12
13
|
const HStack = /*#__PURE__*/forwardRef((props, ref) => {
|
|
13
14
|
return /*#__PURE__*/React.createElement(Stack, _extends({}, props, {
|
|
14
15
|
ref: ref,
|
|
@@ -35,6 +35,7 @@ const SPACING_STEPS = Array.from({
|
|
|
35
35
|
* - https://paste.twilio.design/layout/stack/
|
|
36
36
|
* - https://github.com/Workday/canvas-kit/blob/f2f599654876700f483a1d8c5de82a41315c76f1/modules/labs-react/layout/lib/Stack.tsx
|
|
37
37
|
*/
|
|
38
|
+
// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
38
39
|
const Stack = /*#__PURE__*/forwardRef((props, ref) => {
|
|
39
40
|
const {
|
|
40
41
|
as: BaseComponent = 'div',
|
|
@@ -55,15 +56,11 @@ const Stack = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
55
56
|
if (typeof gap === 'string') {
|
|
56
57
|
style[`--${prefix}-stack-gap`] = gap;
|
|
57
58
|
}
|
|
58
|
-
return (
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
className: className,
|
|
64
|
-
style: style
|
|
65
|
-
}), children)
|
|
66
|
-
);
|
|
59
|
+
return /*#__PURE__*/React.createElement(BaseComponent, _extends({}, rest, {
|
|
60
|
+
ref: ref,
|
|
61
|
+
className: className,
|
|
62
|
+
style: style
|
|
63
|
+
}), children);
|
|
67
64
|
});
|
|
68
65
|
Stack.propTypes = {
|
|
69
66
|
/**
|
|
@@ -9,6 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
|
|
|
9
9
|
import React, { forwardRef } from 'react';
|
|
10
10
|
import { Stack } from './Stack.js';
|
|
11
11
|
|
|
12
|
+
// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
12
13
|
const VStack = /*#__PURE__*/forwardRef((props, ref) => {
|
|
13
14
|
return /*#__PURE__*/React.createElement(Stack, _extends({}, props, {
|
|
14
15
|
ref: ref,
|
|
@@ -150,6 +150,7 @@ function StructuredListRow(props) {
|
|
|
150
150
|
...other
|
|
151
151
|
} = props;
|
|
152
152
|
const [hasFocusWithin, setHasFocusWithin] = useState(false);
|
|
153
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
153
154
|
const rowId = id ?? useId('grid-input');
|
|
154
155
|
const selectedRow = React.useContext(GridSelectedRowStateContext);
|
|
155
156
|
const setSelectedRow = React.useContext(GridSelectedRowDispatchContext);
|
|
@@ -183,6 +184,7 @@ function StructuredListRow(props) {
|
|
|
183
184
|
ref: itemRef,
|
|
184
185
|
onClick: event => {
|
|
185
186
|
setSelectedRow?.(rowId);
|
|
187
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
186
188
|
onClick && onClick(event);
|
|
187
189
|
if (selection) {
|
|
188
190
|
// focus items only when selection is enabled
|
|
@@ -262,6 +264,7 @@ function StructuredListInput(props) {
|
|
|
262
264
|
value: row?.id ?? '',
|
|
263
265
|
onChange: event => {
|
|
264
266
|
setSelectedRow?.(event.target.value);
|
|
267
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
265
268
|
onChange && onChange(event);
|
|
266
269
|
},
|
|
267
270
|
id: id ?? defaultId,
|
|
@@ -12,7 +12,7 @@ import cx from 'classnames';
|
|
|
12
12
|
import { usePrefix } from '../../internal/usePrefix.js';
|
|
13
13
|
import { noopFn } from '../../internal/noopFn.js';
|
|
14
14
|
|
|
15
|
-
const Switch = /*#__PURE__*/React.forwardRef(
|
|
15
|
+
const Switch = /*#__PURE__*/React.forwardRef((props, tabRef) => {
|
|
16
16
|
const {
|
|
17
17
|
children,
|
|
18
18
|
className,
|
|
@@ -78,6 +78,7 @@ function Tabs({
|
|
|
78
78
|
}) {
|
|
79
79
|
const baseId = useId('ccs');
|
|
80
80
|
if (dismissable && !onTabCloseRequest) {
|
|
81
|
+
// eslint-disable-next-line no-console -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
81
82
|
console.error('dismissable property specified without also providing an onTabCloseRequest property.');
|
|
82
83
|
}
|
|
83
84
|
// The active index is used to track the element which has focus in our tablist
|
|
@@ -164,15 +165,11 @@ function TabsVertical({
|
|
|
164
165
|
};
|
|
165
166
|
const isSm = useMatchMedia(smMediaQuery);
|
|
166
167
|
if (!isSm) {
|
|
167
|
-
return (
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
height: height
|
|
173
|
-
}
|
|
174
|
-
}, /*#__PURE__*/React.createElement(Tabs, props, children))
|
|
175
|
-
);
|
|
168
|
+
return /*#__PURE__*/React.createElement(GridAsGridComponent, {
|
|
169
|
+
style: {
|
|
170
|
+
height: height
|
|
171
|
+
}
|
|
172
|
+
}, /*#__PURE__*/React.createElement(Tabs, props, children));
|
|
176
173
|
}
|
|
177
174
|
return /*#__PURE__*/React.createElement(Tabs, props, children);
|
|
178
175
|
}
|
|
@@ -276,6 +273,7 @@ function TabList({
|
|
|
276
273
|
let hasSecondaryLabelTabs = false;
|
|
277
274
|
if (contained) {
|
|
278
275
|
hasSecondaryLabelTabs = React.Children.toArray(children).some(child => {
|
|
276
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
279
277
|
const _child = child;
|
|
280
278
|
return /*#__PURE__*/React.isValidElement(child) && !!_child.props.secondaryLabel;
|
|
281
279
|
});
|
|
@@ -389,6 +387,7 @@ function TabList({
|
|
|
389
387
|
inline: 'nearest'
|
|
390
388
|
});
|
|
391
389
|
}
|
|
390
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
392
391
|
}, []);
|
|
393
392
|
useEffect(() => {
|
|
394
393
|
//adding 1 in calculation for firefox support
|
|
@@ -409,6 +408,7 @@ function TabList({
|
|
|
409
408
|
setSelectedIndex(tabs.current.indexOf(tab));
|
|
410
409
|
}
|
|
411
410
|
}
|
|
411
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
412
412
|
}, []);
|
|
413
413
|
useIsomorphicEffect(() => {
|
|
414
414
|
if (ref.current) {
|
|
@@ -495,7 +495,9 @@ function TabList({
|
|
|
495
495
|
hasSecondaryLabel: hasSecondaryLabelTabs,
|
|
496
496
|
contained
|
|
497
497
|
}
|
|
498
|
-
}, /*#__PURE__*/React.cloneElement(
|
|
498
|
+
}, /*#__PURE__*/React.cloneElement(
|
|
499
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
500
|
+
child, {
|
|
499
501
|
ref: node => {
|
|
500
502
|
tabs.current[index] = node;
|
|
501
503
|
}
|
|
@@ -629,6 +631,7 @@ function TabListVertical({
|
|
|
629
631
|
setSelectedIndex(tabs.current.indexOf(tab));
|
|
630
632
|
}
|
|
631
633
|
}
|
|
634
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
632
635
|
}, []);
|
|
633
636
|
useEffect(() => {
|
|
634
637
|
function handler() {
|
|
@@ -639,6 +642,7 @@ function TabListVertical({
|
|
|
639
642
|
if (containerTop && containerHeight) {
|
|
640
643
|
// scrolls so selected tab is in view
|
|
641
644
|
if (selectedPositionTop - halfTabHeight < containerTop || selectedPositionTop - containerTop + verticalTabHeight + halfTabHeight > containerHeight) {
|
|
645
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
642
646
|
ref.current && ref.current.scrollTo({
|
|
643
647
|
top: (selectedIndex - 1) * verticalTabHeight,
|
|
644
648
|
behavior: 'smooth'
|
|
@@ -693,7 +697,9 @@ function TabListVertical({
|
|
|
693
697
|
index,
|
|
694
698
|
hasSecondaryLabel: false
|
|
695
699
|
}
|
|
696
|
-
}, /*#__PURE__*/React.cloneElement(
|
|
700
|
+
}, /*#__PURE__*/React.cloneElement(
|
|
701
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
702
|
+
child, {
|
|
697
703
|
ref: node => {
|
|
698
704
|
tabs.current[index] = node;
|
|
699
705
|
}
|
|
@@ -769,7 +775,8 @@ function createLongPressBehavior(ref, direction, setScrollLeft) {
|
|
|
769
775
|
* Tab
|
|
770
776
|
*/
|
|
771
777
|
|
|
772
|
-
|
|
778
|
+
// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
779
|
+
const Tab = /*#__PURE__*/forwardRef(({
|
|
773
780
|
as = 'button',
|
|
774
781
|
children,
|
|
775
782
|
className: customClassName,
|
|
@@ -779,7 +786,7 @@ const Tab = /*#__PURE__*/forwardRef(function Tab({
|
|
|
779
786
|
secondaryLabel,
|
|
780
787
|
renderIcon: Icon,
|
|
781
788
|
...rest
|
|
782
|
-
}, forwardRef) {
|
|
789
|
+
}, forwardRef) => {
|
|
783
790
|
const prefix = usePrefix();
|
|
784
791
|
const {
|
|
785
792
|
selectedIndex,
|
|
@@ -803,6 +810,8 @@ const Tab = /*#__PURE__*/forwardRef(function Tab({
|
|
|
803
810
|
const id = `${baseId}-tab-${index}`;
|
|
804
811
|
const panelId = `${baseId}-tabpanel-${index}`;
|
|
805
812
|
const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
|
|
813
|
+
|
|
814
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
806
815
|
const isEllipsisActive = element => {
|
|
807
816
|
setIsEllipsisApplied(element.offsetHeight < element.scrollHeight);
|
|
808
817
|
return element.offsetHeight < element.scrollHeight;
|
|
@@ -1022,7 +1031,8 @@ Tab.propTypes = {
|
|
|
1022
1031
|
*/
|
|
1023
1032
|
|
|
1024
1033
|
const IconTabContext = /*#__PURE__*/createContext(false);
|
|
1025
|
-
|
|
1034
|
+
// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
1035
|
+
const IconTab = /*#__PURE__*/React.forwardRef(({
|
|
1026
1036
|
badgeIndicator,
|
|
1027
1037
|
children,
|
|
1028
1038
|
className: customClassName,
|
|
@@ -1031,7 +1041,7 @@ const IconTab = /*#__PURE__*/React.forwardRef(function IconTab({
|
|
|
1031
1041
|
leaveDelayMs,
|
|
1032
1042
|
label,
|
|
1033
1043
|
...rest
|
|
1034
|
-
}, ref) {
|
|
1044
|
+
}, ref) => {
|
|
1035
1045
|
const prefix = usePrefix();
|
|
1036
1046
|
const value = useMemo(() => ({
|
|
1037
1047
|
badgeIndicator
|
|
@@ -1093,11 +1103,12 @@ IconTab.propTypes = {
|
|
|
1093
1103
|
* TabPanel
|
|
1094
1104
|
*/
|
|
1095
1105
|
|
|
1096
|
-
|
|
1106
|
+
// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
1107
|
+
const TabPanel = /*#__PURE__*/React.forwardRef(({
|
|
1097
1108
|
children,
|
|
1098
1109
|
className: customClassName,
|
|
1099
1110
|
...rest
|
|
1100
|
-
}, forwardRef) {
|
|
1111
|
+
}, forwardRef) => {
|
|
1101
1112
|
const prefix = usePrefix();
|
|
1102
1113
|
const panel = useRef(null);
|
|
1103
1114
|
const ref = useMergedRefs([forwardRef, panel]);
|
|
@@ -24,6 +24,7 @@ import { isComponentElement } from '../../internal/utils.js';
|
|
|
24
24
|
import { Text } from '../Text/Text.js';
|
|
25
25
|
|
|
26
26
|
var _Close;
|
|
27
|
+
// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
27
28
|
const DismissibleTag = /*#__PURE__*/forwardRef(({
|
|
28
29
|
className,
|
|
29
30
|
decorator,
|
|
@@ -43,6 +44,7 @@ const DismissibleTag = /*#__PURE__*/forwardRef(({
|
|
|
43
44
|
}, forwardRef) => {
|
|
44
45
|
const prefix = usePrefix();
|
|
45
46
|
const tagLabelRef = useRef(null);
|
|
47
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
46
48
|
const tagId = id || `tag-${useId()}`;
|
|
47
49
|
const tagClasses = cx(`${prefix}--tag--filter`, className);
|
|
48
50
|
const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
|
|
@@ -31,6 +31,7 @@ const TYPES = {
|
|
|
31
31
|
'cool-gray': 'Cool-Gray',
|
|
32
32
|
'warm-gray': 'Warm-Gray'
|
|
33
33
|
};
|
|
34
|
+
// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
34
35
|
const OperationalTag = /*#__PURE__*/forwardRef(({
|
|
35
36
|
className,
|
|
36
37
|
disabled,
|
|
@@ -43,6 +44,7 @@ const OperationalTag = /*#__PURE__*/forwardRef(({
|
|
|
43
44
|
}, forwardRef) => {
|
|
44
45
|
const prefix = usePrefix();
|
|
45
46
|
const tagRef = useRef(null);
|
|
47
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
46
48
|
const tagId = id || `tag-${useId()}`;
|
|
47
49
|
const tagClasses = cx(`${prefix}--tag--operational`, className);
|
|
48
50
|
const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
|
|
@@ -20,6 +20,7 @@ import mergeRefs from '../../tools/mergeRefs.js';
|
|
|
20
20
|
import { useControllableState } from '../../internal/useControllableState.js';
|
|
21
21
|
import { Text } from '../Text/Text.js';
|
|
22
22
|
|
|
23
|
+
// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
23
24
|
const SelectableTag = /*#__PURE__*/forwardRef(({
|
|
24
25
|
className,
|
|
25
26
|
disabled,
|
|
@@ -35,6 +36,7 @@ const SelectableTag = /*#__PURE__*/forwardRef(({
|
|
|
35
36
|
}, forwardRef) => {
|
|
36
37
|
const prefix = usePrefix();
|
|
37
38
|
const tagRef = useRef(null);
|
|
39
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
38
40
|
const tagId = id || `tag-${useId()}`;
|
|
39
41
|
const [selectedTag, setSelectedTag] = useControllableState({
|
|
40
42
|
value: selected,
|
package/es/components/Tag/Tag.js
CHANGED
|
@@ -42,6 +42,7 @@ const SIZES = {
|
|
|
42
42
|
md: 'md',
|
|
43
43
|
lg: 'lg'
|
|
44
44
|
};
|
|
45
|
+
// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
45
46
|
const TagBase = /*#__PURE__*/React.forwardRef(({
|
|
46
47
|
children,
|
|
47
48
|
className,
|
|
@@ -64,12 +65,15 @@ const TagBase = /*#__PURE__*/React.forwardRef(({
|
|
|
64
65
|
const prefix = usePrefix();
|
|
65
66
|
const tagRef = useRef(null);
|
|
66
67
|
if (filter) {
|
|
68
|
+
// eslint-disable-next-line no-console -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
67
69
|
console.warn('The `filter` prop for Tag has been deprecated and will be removed in the next major version. Use DismissibleTag instead.');
|
|
68
70
|
}
|
|
69
71
|
if (onClose) {
|
|
72
|
+
// eslint-disable-next-line no-console -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
70
73
|
console.warn('The `onClose` prop for Tag has been deprecated and will be removed in the next major version. Use DismissibleTag instead.');
|
|
71
74
|
}
|
|
72
75
|
const ref = useMergedRefs([forwardRef, tagRef]);
|
|
76
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
73
77
|
const tagId = id || `tag-${useId()}`;
|
|
74
78
|
const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
|
|
75
79
|
useLayoutEffect(() => {
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
8
9
|
const isEllipsisActive = element => {
|
|
9
10
|
if (element) {
|
|
10
11
|
return element?.offsetWidth < element?.scrollWidth;
|
|
@@ -11,6 +11,7 @@ import React, { useContext, Children } from 'react';
|
|
|
11
11
|
import './index.js';
|
|
12
12
|
import { TextDirectionContext } from './TextDirectionContext.js';
|
|
13
13
|
|
|
14
|
+
// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
14
15
|
const TextBase = /*#__PURE__*/React.forwardRef(({
|
|
15
16
|
as,
|
|
16
17
|
children,
|