@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
|
@@ -150,7 +150,7 @@ const MenuItem = /*#__PURE__*/forwardRef(function MenuItem({
|
|
|
150
150
|
}, [direction]);
|
|
151
151
|
useEffect(() => {
|
|
152
152
|
if (IconElement && !context.state.hasIcons) {
|
|
153
|
-
// @ts-
|
|
153
|
+
// @ts-expect-error - TODO: Should we be passing payload?
|
|
154
154
|
context.dispatch({
|
|
155
155
|
type: 'enableIcons'
|
|
156
156
|
});
|
|
@@ -225,17 +225,14 @@ MenuItem.propTypes = {
|
|
|
225
225
|
/**
|
|
226
226
|
* Provide an optional function to be called when the MenuItem is clicked.
|
|
227
227
|
*/
|
|
228
|
-
// @ts-ignore-next-line -- avoid spurious (?) TS2322 error
|
|
229
228
|
onClick: PropTypes.func,
|
|
230
229
|
/**
|
|
231
230
|
* A component used to render an icon.
|
|
232
231
|
*/
|
|
233
|
-
// @ts-ignore-next-line -- avoid spurious (?) TS2322 error
|
|
234
232
|
renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
|
|
235
233
|
/**
|
|
236
234
|
* Provide a shortcut for the action of this MenuItem. Note that the component will only render it as a hint but not actually register the shortcut.
|
|
237
235
|
*/
|
|
238
|
-
// @ts-ignore-next-line -- avoid spurious (?) TS2322 error
|
|
239
236
|
shortcut: PropTypes.string
|
|
240
237
|
};
|
|
241
238
|
const MenuItemSelectable = /*#__PURE__*/forwardRef(function MenuItemSelectable({
|
|
@@ -253,12 +250,12 @@ const MenuItemSelectable = /*#__PURE__*/forwardRef(function MenuItemSelectable({
|
|
|
253
250
|
onChange,
|
|
254
251
|
defaultValue: defaultSelected ?? false
|
|
255
252
|
});
|
|
256
|
-
function handleClick(
|
|
253
|
+
function handleClick() {
|
|
257
254
|
setChecked(!checked);
|
|
258
255
|
}
|
|
259
256
|
useEffect(() => {
|
|
260
257
|
if (!context.state.hasSelectableItems) {
|
|
261
|
-
// @ts-
|
|
258
|
+
// @ts-expect-error - TODO: Should we be passing payload?
|
|
262
259
|
context.dispatch({
|
|
263
260
|
type: 'enableSelectableItems'
|
|
264
261
|
});
|
|
@@ -282,7 +279,6 @@ MenuItemSelectable.propTypes = {
|
|
|
282
279
|
/**
|
|
283
280
|
* Specify whether the option should be selected by default.
|
|
284
281
|
*/
|
|
285
|
-
// @ts-ignore-next-line -- avoid spurious (?) TS2322 error
|
|
286
282
|
defaultSelected: PropTypes.bool,
|
|
287
283
|
/**
|
|
288
284
|
* A required label titling this option.
|
|
@@ -291,12 +287,10 @@ MenuItemSelectable.propTypes = {
|
|
|
291
287
|
/**
|
|
292
288
|
* Provide an optional function to be called when the selection state changes.
|
|
293
289
|
*/
|
|
294
|
-
// @ts-ignore-next-line -- avoid spurious (?) TS2322 error
|
|
295
290
|
onChange: PropTypes.func,
|
|
296
291
|
/**
|
|
297
292
|
* Pass a bool to props.selected to control the state of this option.
|
|
298
293
|
*/
|
|
299
|
-
// @ts-ignore-next-line -- avoid spurious (?) TS2322 error
|
|
300
294
|
selected: PropTypes.bool
|
|
301
295
|
};
|
|
302
296
|
const MenuItemGroup = /*#__PURE__*/forwardRef(function MenuItemGroup({
|
|
@@ -348,12 +342,13 @@ const MenuItemRadioGroup = /*#__PURE__*/forwardRef(function MenuItemRadioGroup({
|
|
|
348
342
|
onChange,
|
|
349
343
|
defaultValue: defaultSelectedItem ?? {}
|
|
350
344
|
});
|
|
345
|
+
//eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
351
346
|
function handleClick(item, e) {
|
|
352
347
|
setSelection(item);
|
|
353
348
|
}
|
|
354
349
|
useEffect(() => {
|
|
355
350
|
if (!context.state.hasSelectableItems) {
|
|
356
|
-
// @ts-
|
|
351
|
+
// @ts-expect-error - TODO: Should we be passing payload?
|
|
357
352
|
context.dispatch({
|
|
358
353
|
type: 'enableSelectableItems'
|
|
359
354
|
});
|
|
@@ -389,12 +384,10 @@ MenuItemRadioGroup.propTypes = {
|
|
|
389
384
|
/**
|
|
390
385
|
* Provide a function to convert an item to the string that will be rendered. Defaults to item.toString().
|
|
391
386
|
*/
|
|
392
|
-
// @ts-ignore-next-line -- avoid spurious (?) TS2322 error
|
|
393
387
|
itemToString: PropTypes.func,
|
|
394
388
|
/**
|
|
395
389
|
* Provide the options for this radio group. Can be of any type, as long as you provide an appropriate props.itemToString function.
|
|
396
390
|
*/
|
|
397
|
-
// @ts-ignore-next-line -- avoid spurious (?) TS2322 error
|
|
398
391
|
items: PropTypes.array,
|
|
399
392
|
/**
|
|
400
393
|
* A required label titling this radio group.
|
|
@@ -403,7 +396,6 @@ MenuItemRadioGroup.propTypes = {
|
|
|
403
396
|
/**
|
|
404
397
|
* Provide an optional function to be called when the selection changes.
|
|
405
398
|
*/
|
|
406
|
-
// @ts-ignore-next-line -- avoid spurious (?) TS2322 error
|
|
407
399
|
onChange: PropTypes.func,
|
|
408
400
|
/**
|
|
409
401
|
* Provide props.selectedItem to control the state of this radio group. Must match the type of props.items.
|
|
@@ -23,7 +23,8 @@ import mergeRefs from '../../tools/mergeRefs.js';
|
|
|
23
23
|
|
|
24
24
|
const validButtonKinds = ['primary', 'tertiary', 'ghost'];
|
|
25
25
|
const defaultButtonKind = 'primary';
|
|
26
|
-
|
|
26
|
+
// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
27
|
+
const MenuButton = /*#__PURE__*/forwardRef(({
|
|
27
28
|
children,
|
|
28
29
|
className,
|
|
29
30
|
disabled,
|
|
@@ -34,13 +35,14 @@ const MenuButton = /*#__PURE__*/forwardRef(function MenuButton({
|
|
|
34
35
|
tabIndex = 0,
|
|
35
36
|
menuTarget,
|
|
36
37
|
...rest
|
|
37
|
-
}, forwardRef) {
|
|
38
|
+
}, forwardRef) => {
|
|
38
39
|
// feature flag utilized to separate out only the dynamic styles from @floating-ui
|
|
39
40
|
// flag is turned on when collision detection (ie. flip, hide) logic is not desired
|
|
40
41
|
const enableOnlyFloatingStyles = useFeatureFlag('enable-v12-dynamic-floating-styles');
|
|
41
42
|
const id = useId('MenuButton');
|
|
42
43
|
const prefix = usePrefix();
|
|
43
44
|
const triggerRef = useRef(null);
|
|
45
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
44
46
|
let middlewares = [];
|
|
45
47
|
if (!enableOnlyFloatingStyles) {
|
|
46
48
|
middlewares = [flip({
|
|
@@ -159,6 +161,7 @@ MenuButton.propTypes = {
|
|
|
159
161
|
/**
|
|
160
162
|
* Specify the type of button to be used as the base for the trigger button.
|
|
161
163
|
*/
|
|
164
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
162
165
|
// @ts-ignore-next-line -- avoid spurious (?) TS2322 error
|
|
163
166
|
kind: PropTypes.oneOf(validButtonKinds),
|
|
164
167
|
/**
|
|
@@ -172,11 +175,13 @@ MenuButton.propTypes = {
|
|
|
172
175
|
/**
|
|
173
176
|
* Specify the size of the button and menu.
|
|
174
177
|
*/
|
|
178
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
175
179
|
// @ts-ignore-next-line -- avoid spurious (?) TS2322 error
|
|
176
180
|
size: PropTypes.oneOf(['sm', 'md', 'lg']),
|
|
177
181
|
/**
|
|
178
182
|
* Specify the tabIndex of the button.
|
|
179
183
|
*/
|
|
184
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
180
185
|
// @ts-ignore-next-line -- avoid spurious (?) TS2322 error
|
|
181
186
|
tabIndex: PropTypes.number,
|
|
182
187
|
/**
|
|
@@ -173,6 +173,8 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal({
|
|
|
173
173
|
}
|
|
174
174
|
const lastContent = modalContent.children[modalContent.children.length - 1];
|
|
175
175
|
const gradientSpacing = modalContent.scrollHeight - lastContent.offsetTop - lastContent.clientHeight;
|
|
176
|
+
|
|
177
|
+
// eslint-disable-next-line prefer-const -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
176
178
|
for (let elem of modalContent.children) {
|
|
177
179
|
if (elem.contains(currentActiveNode)) {
|
|
178
180
|
const spaceBelow = modalContent.clientHeight - elem.offsetTop + modalContent.scrollTop - elem.clientHeight;
|
|
@@ -235,6 +237,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal({
|
|
|
235
237
|
return () => {
|
|
236
238
|
document.removeEventListener('keydown', handleEscapeKey, true);
|
|
237
239
|
};
|
|
240
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
238
241
|
}, [open]);
|
|
239
242
|
useEffect(() => {
|
|
240
243
|
return () => {
|
|
@@ -17,6 +17,7 @@ import { Escape } from '../../internal/keyboard/keys.js';
|
|
|
17
17
|
import { match } from '../../internal/keyboard/match.js';
|
|
18
18
|
|
|
19
19
|
let didWarnAboutDeprecation = false;
|
|
20
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
20
21
|
process.env.NODE_ENV !== 'production';
|
|
21
22
|
class ModalWrapper extends React.Component {
|
|
22
23
|
constructor(...args) {
|
|
@@ -53,6 +54,7 @@ class ModalWrapper extends React.Component {
|
|
|
53
54
|
handleSubmit?.(evt);
|
|
54
55
|
});
|
|
55
56
|
}
|
|
57
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
56
58
|
if(isDev) {
|
|
57
59
|
process.env.NODE_ENV !== "production" ? warning(didWarnAboutDeprecation, '`<ModalWrapper>` has been deprecated in favor of `<ComposedModal/>` and will be removed in the next major version, `@carbon/react@v2.x`') : void 0;
|
|
58
60
|
didWarnAboutDeprecation = true;
|
|
@@ -111,6 +111,7 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
|
|
|
111
111
|
isFluid
|
|
112
112
|
} = useContext(FormContext);
|
|
113
113
|
const isFirstRender = useRef(true);
|
|
114
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
114
115
|
const [isFocused, setIsFocused] = useState(false);
|
|
115
116
|
const [isOpen, setIsOpen] = useState(!!open);
|
|
116
117
|
const [prevOpen, setPrevOpen] = useState(!!open);
|
|
@@ -121,7 +122,10 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
|
|
|
121
122
|
itemToString,
|
|
122
123
|
inputValue
|
|
123
124
|
}), [items, inputValue, itemToString, filterItems]);
|
|
124
|
-
const nonSelectAllItems = useMemo(
|
|
125
|
+
const nonSelectAllItems = useMemo(
|
|
126
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
127
|
+
() => filteredItems.filter(item => !item.isSelectAll), [filteredItems]);
|
|
128
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
125
129
|
const selectAll = filteredItems.some(item => item.isSelectAll);
|
|
126
130
|
const {
|
|
127
131
|
selectedItems: controlledSelectedItems,
|
|
@@ -137,7 +141,9 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
|
|
|
137
141
|
filteredItems
|
|
138
142
|
});
|
|
139
143
|
const selectAllStatus = useMemo(() => {
|
|
140
|
-
const selectable = nonSelectAllItems.filter(
|
|
144
|
+
const selectable = nonSelectAllItems.filter(
|
|
145
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
146
|
+
item => !item.disabled);
|
|
141
147
|
const nonSelectedCount = selectable.filter(item => !controlledSelectedItems.some(sel => isEqual(sel, item))).length;
|
|
142
148
|
const totalCount = selectable.length;
|
|
143
149
|
return {
|
|
@@ -146,6 +152,7 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
|
|
|
146
152
|
};
|
|
147
153
|
}, [controlledSelectedItems, nonSelectAllItems]);
|
|
148
154
|
const handleSelectAllClick = useCallback(() => {
|
|
155
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
149
156
|
const selectable = nonSelectAllItems.filter(i => !i.disabled);
|
|
150
157
|
const {
|
|
151
158
|
checked,
|
|
@@ -162,6 +169,7 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
|
|
|
162
169
|
const toSelect = selectable.filter(e => !controlledSelectedItems.some(sel => isEqual(sel, e)));
|
|
163
170
|
toggleAll([...controlledSelectedItems, ...toSelect]);
|
|
164
171
|
}
|
|
172
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
165
173
|
}, [nonSelectAllItems, selectAllStatus, controlledSelectedItems, toggleAll]);
|
|
166
174
|
const {
|
|
167
175
|
refs,
|
|
@@ -212,11 +220,14 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
|
|
|
212
220
|
|
|
213
221
|
// memoize sorted items to reduce unnecessary expensive sort on rerender
|
|
214
222
|
const sortedItems = useMemo(() => {
|
|
215
|
-
// eslint-disable-next-line @typescript-eslint/no-
|
|
223
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
216
224
|
const selectAllItem = items.find(item => item.isSelectAll);
|
|
217
|
-
const selectableRealItems = nonSelectAllItems.filter(
|
|
225
|
+
const selectableRealItems = nonSelectAllItems.filter(
|
|
226
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
227
|
+
item => !item.disabled);
|
|
218
228
|
|
|
219
229
|
// Sort only non-select-all items, select-all item must stay at the top
|
|
230
|
+
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
220
231
|
const sortedReal = sortItems(nonSelectAllItems, {
|
|
221
232
|
selectedItems: {
|
|
222
233
|
top: controlledSelectedItems,
|
|
@@ -233,6 +244,7 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
|
|
|
233
244
|
return [selectAllItem, ...sortedReal];
|
|
234
245
|
}
|
|
235
246
|
return sortedReal;
|
|
247
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
236
248
|
}, [items, inputValue, controlledSelectedItems, topItems, selectionFeedback, itemToString, compareItems, locale, sortItems, nonSelectAllItems]);
|
|
237
249
|
const inline = type === 'inline';
|
|
238
250
|
const showWarning = !invalid && warn;
|
|
@@ -316,6 +328,7 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
|
|
|
316
328
|
return () => {
|
|
317
329
|
document.removeEventListener('mousedown', handleClickOutside);
|
|
318
330
|
};
|
|
331
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
319
332
|
}, [isOpen, inputFocused]);
|
|
320
333
|
const {
|
|
321
334
|
getToggleButtonProps,
|
|
@@ -338,7 +351,9 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
|
|
|
338
351
|
inputId,
|
|
339
352
|
inputValue,
|
|
340
353
|
stateReducer,
|
|
354
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
341
355
|
isItemDisabled(item, _index) {
|
|
356
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
342
357
|
return item?.disabled;
|
|
343
358
|
}
|
|
344
359
|
});
|
|
@@ -509,7 +524,9 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
|
|
|
509
524
|
}) : null;
|
|
510
525
|
|
|
511
526
|
// exclude the select-all item from the count
|
|
512
|
-
const selectedItemsLength = controlledSelectedItems.filter(
|
|
527
|
+
const selectedItemsLength = controlledSelectedItems.filter(
|
|
528
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
529
|
+
item => !item.isSelectAll).length;
|
|
513
530
|
const className = cx(`${prefix}--multi-select`, `${prefix}--combo-box`, `${prefix}--multi-select--filterable`, {
|
|
514
531
|
[`${prefix}--multi-select--invalid`]: invalid,
|
|
515
532
|
[`${prefix}--multi-select--invalid--focused`]: invalid && inputFocused,
|
|
@@ -690,6 +707,7 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
|
|
|
690
707
|
}, normalizedDecorator) : '', /*#__PURE__*/React.createElement(ListBox.Menu, menuProps, isOpen ? sortedItems.map((item, index) => {
|
|
691
708
|
let isChecked;
|
|
692
709
|
let isIndeterminate = false;
|
|
710
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
693
711
|
if (item.isSelectAll) {
|
|
694
712
|
isChecked = selectAllStatus.checked;
|
|
695
713
|
isIndeterminate = selectAllStatus.indeterminate;
|
|
@@ -787,6 +805,7 @@ FilterableMultiSelect.propTypes = {
|
|
|
787
805
|
* change, and in some cases they can not be shimmed by Carbon to shield you
|
|
788
806
|
* from potentially breaking changes.
|
|
789
807
|
*/
|
|
808
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
790
809
|
// @ts-ignore
|
|
791
810
|
downshiftProps: PropTypes.shape(Downshift.propTypes),
|
|
792
811
|
/**
|
|
@@ -111,12 +111,15 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
|
|
|
111
111
|
return true; // Return true if item is not an object with undefined values
|
|
112
112
|
});
|
|
113
113
|
}, [items]);
|
|
114
|
+
|
|
115
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
114
116
|
const selectAll = filteredItems.some(item => item.isSelectAll);
|
|
115
117
|
const prefix = usePrefix();
|
|
116
118
|
const {
|
|
117
119
|
isFluid
|
|
118
120
|
} = useContext(FormContext);
|
|
119
121
|
const multiSelectInstanceId = useId();
|
|
122
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
120
123
|
const [isFocused, setIsFocused] = useState(false);
|
|
121
124
|
const [inputFocused, setInputFocused] = useState(false);
|
|
122
125
|
const [isOpen, setIsOpen] = useState(open || false);
|
|
@@ -185,13 +188,15 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
|
|
|
185
188
|
stateReducer,
|
|
186
189
|
isOpen,
|
|
187
190
|
itemToString: filteredItems => {
|
|
188
|
-
return Array.isArray(filteredItems) && filteredItems.map(
|
|
191
|
+
return Array.isArray(filteredItems) && filteredItems.map(item => {
|
|
189
192
|
return itemToString(item);
|
|
190
193
|
}).join(', ') || '';
|
|
191
194
|
},
|
|
192
195
|
selectedItem: controlledSelectedItems,
|
|
193
196
|
items: filteredItems,
|
|
197
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
194
198
|
isItemDisabled(item, _index) {
|
|
199
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
195
200
|
return item?.disabled;
|
|
196
201
|
},
|
|
197
202
|
...downshiftProps
|
|
@@ -386,6 +391,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
|
|
|
386
391
|
[`${prefix}--list-box__field--wrapper--input-focused`]: inputFocused
|
|
387
392
|
});
|
|
388
393
|
const handleFocus = evt => {
|
|
394
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
389
395
|
evt.target.classList.contains(`${prefix}--tag__close-icon`) ? setIsFocused(false) : setIsFocused(evt.type === 'focus' ? true : false);
|
|
390
396
|
};
|
|
391
397
|
const readOnlyEventHandlers = readOnly ? {
|
|
@@ -413,7 +419,9 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
|
|
|
413
419
|
size: 'mini'
|
|
414
420
|
}) : null;
|
|
415
421
|
const itemsSelectedText = selectedItems.length > 0 && selectedItems.map(item => item?.text);
|
|
416
|
-
const selectedItemsLength = selectAll ?
|
|
422
|
+
const selectedItemsLength = selectAll ?
|
|
423
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
424
|
+
selectedItems.filter(item => !item.isSelectAll).length : selectedItems.length;
|
|
417
425
|
|
|
418
426
|
// Memoize the value of getMenuProps to avoid an infinite loop
|
|
419
427
|
const menuProps = useMemo(() => getMenuProps({
|
|
@@ -432,7 +440,9 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
|
|
|
432
440
|
nonSelectAllSelectedCount,
|
|
433
441
|
totalSelectableCount
|
|
434
442
|
};
|
|
435
|
-
},
|
|
443
|
+
},
|
|
444
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
445
|
+
[selectedItems, filteredItems]);
|
|
436
446
|
return /*#__PURE__*/React.createElement("div", {
|
|
437
447
|
className: wrapperClasses
|
|
438
448
|
}, /*#__PURE__*/React.createElement("label", _extends({
|
|
@@ -484,14 +494,20 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
|
|
|
484
494
|
translateWithId: translateWithId
|
|
485
495
|
})), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {
|
|
486
496
|
className: `${prefix}--list-box__inner-wrapper--decorator`
|
|
487
|
-
}, normalizedDecorator) : ''), /*#__PURE__*/React.createElement(ListBox.Menu, menuProps, isOpen &&
|
|
497
|
+
}, normalizedDecorator) : ''), /*#__PURE__*/React.createElement(ListBox.Menu, menuProps, isOpen &&
|
|
498
|
+
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
499
|
+
sortItems(filteredItems, sortOptions).map((item, index) => {
|
|
488
500
|
const {
|
|
489
501
|
hasIndividualSelections,
|
|
490
502
|
nonSelectAllSelectedCount,
|
|
491
503
|
totalSelectableCount
|
|
492
504
|
} = getSelectionStats(selectedItems, filteredItems);
|
|
505
|
+
|
|
506
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
493
507
|
const isChecked = item.isSelectAll ? nonSelectAllSelectedCount === totalSelectableCount && totalSelectableCount > 0 : selectedItems.some(selected => isEqual(selected, item));
|
|
494
|
-
const isIndeterminate =
|
|
508
|
+
const isIndeterminate =
|
|
509
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
510
|
+
item.isSelectAll && hasIndividualSelections && nonSelectAllSelectedCount < totalSelectableCount;
|
|
495
511
|
const itemProps = getItemProps({
|
|
496
512
|
item,
|
|
497
513
|
// we don't want Downshift to set aria-selected for us
|
|
@@ -108,7 +108,6 @@ function NotificationButton({
|
|
|
108
108
|
[`${prefix}--${notificationType}-notification__close-icon`]: notificationType
|
|
109
109
|
});
|
|
110
110
|
return /*#__PURE__*/React.createElement("button", _extends({}, rest, {
|
|
111
|
-
// eslint-disable-next-line react/button-has-type
|
|
112
111
|
type: type,
|
|
113
112
|
"aria-label": deprecatedAriaLabel || ariaLabel,
|
|
114
113
|
title: deprecatedAriaLabel || ariaLabel,
|
|
@@ -808,6 +807,7 @@ Callout.propTypes = {
|
|
|
808
807
|
/**
|
|
809
808
|
* @deprecated Use `CalloutProps` instead.
|
|
810
809
|
*/
|
|
810
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-object-type -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
811
811
|
|
|
812
812
|
let didWarnAboutDeprecation = false;
|
|
813
813
|
const StaticNotification = props => {
|
|
@@ -41,7 +41,8 @@ const defaultTranslations = {
|
|
|
41
41
|
[translationIds['increment.number']]: 'Increment number',
|
|
42
42
|
[translationIds['decrement.number']]: 'Decrement number'
|
|
43
43
|
};
|
|
44
|
-
|
|
44
|
+
// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
45
|
+
const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
|
|
45
46
|
const {
|
|
46
47
|
allowEmpty = false,
|
|
47
48
|
className: customClassName,
|
|
@@ -101,6 +102,7 @@ const NumberInput = /*#__PURE__*/React.forwardRef(function NumberInput(props, fo
|
|
|
101
102
|
}
|
|
102
103
|
return 0;
|
|
103
104
|
});
|
|
105
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
104
106
|
const [prevControlledValue, setPrevControlledValue] = useState(controlledValue);
|
|
105
107
|
const numberParser = useMemo(() => new NumberParser(locale, formatOptions), [locale, formatOptions]);
|
|
106
108
|
/**
|
|
@@ -233,6 +235,8 @@ const NumberInput = /*#__PURE__*/React.forwardRef(function NumberInput(props, fo
|
|
|
233
235
|
[`${prefix}--number-input--fluid--focus`]: isFluid && isFocused,
|
|
234
236
|
[`${prefix}--number-input--fluid--disabled`]: isFluid && disabled
|
|
235
237
|
});
|
|
238
|
+
|
|
239
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
236
240
|
const Icon = normalizedProps.icon;
|
|
237
241
|
const getDecimalPlaces = num => {
|
|
238
242
|
const parts = num.toString().split('.');
|
|
@@ -342,7 +346,9 @@ const NumberInput = /*#__PURE__*/React.forwardRef(function NumberInput(props, fo
|
|
|
342
346
|
onKeyUp: onKeyUp,
|
|
343
347
|
onKeyDown: e => {
|
|
344
348
|
if (type === 'text') {
|
|
349
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
345
350
|
match(e, ArrowUp) && handleStep(e, 'up');
|
|
351
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
346
352
|
match(e, ArrowDown) && handleStep(e, 'down');
|
|
347
353
|
}
|
|
348
354
|
if (rest?.onKeyDown) {
|
|
@@ -66,6 +66,7 @@ const getMenuOffset = (menuBody, direction, trigger, flip) => {
|
|
|
66
66
|
if (process.env.NODE_ENV !== 'production') {
|
|
67
67
|
!(triggerButtonPositionProp && triggerButtonPositionFactor) ? process.env.NODE_ENV !== "production" ? invariant(false, '[OverflowMenu] wrong floating menu direction: `%s`', direction) : invariant(false) : void 0;
|
|
68
68
|
}
|
|
69
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
69
70
|
const {
|
|
70
71
|
offsetWidth: menuWidth,
|
|
71
72
|
offsetHeight: menuHeight
|
|
@@ -88,6 +89,7 @@ const getMenuOffset = (menuBody, direction, trigger, flip) => {
|
|
|
88
89
|
};
|
|
89
90
|
}
|
|
90
91
|
};
|
|
92
|
+
// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
91
93
|
const OverflowMenu = /*#__PURE__*/forwardRef(({
|
|
92
94
|
align,
|
|
93
95
|
['aria-label']: ariaLabel = null,
|
|
@@ -23,7 +23,8 @@ import deprecateValuesWithin from '../../../prop-types/deprecateValuesWithin.js'
|
|
|
23
23
|
import { mapPopoverAlign } from '../../../tools/mapPopoverAlign.js';
|
|
24
24
|
|
|
25
25
|
const defaultSize = 'md';
|
|
26
|
-
|
|
26
|
+
// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
27
|
+
const OverflowMenu = /*#__PURE__*/React.forwardRef(({
|
|
27
28
|
autoAlign = false,
|
|
28
29
|
children,
|
|
29
30
|
className,
|
|
@@ -34,7 +35,7 @@ const OverflowMenu = /*#__PURE__*/React.forwardRef(function OverflowMenu({
|
|
|
34
35
|
tooltipAlignment,
|
|
35
36
|
menuTarget,
|
|
36
37
|
...rest
|
|
37
|
-
}, forwardRef) {
|
|
38
|
+
}, forwardRef) => {
|
|
38
39
|
const enableFloatingStyles = useFeatureFlag('enable-v12-dynamic-floating-styles') || autoAlign;
|
|
39
40
|
const {
|
|
40
41
|
refs,
|
|
@@ -89,12 +89,14 @@ const OverflowMenuItem = frFn((props, ref) => {
|
|
|
89
89
|
// ref as any: the type of `ref` is `ForwardedRef<HTMLButtonElement>` in `Button` component
|
|
90
90
|
// but `OverflowMenuItem` can be rendered as `a` tag as well, which is `HTMLAnchorElement`
|
|
91
91
|
// so we have to use `any` here
|
|
92
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
92
93
|
,
|
|
93
94
|
ref: ref,
|
|
94
95
|
tabIndex: -1
|
|
95
96
|
// itemText as any: itemText may be a ReactNode, but `title` only accepts string
|
|
96
97
|
// to avoid compatibility issue, we use `any` here. Consider to enforce `itemText` to be `string?`
|
|
97
98
|
// in the next major release
|
|
99
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
98
100
|
,
|
|
99
101
|
title: requireTitle ? title || itemText : undefined
|
|
100
102
|
}, rest), OverflowMenuItemContent));
|
|
@@ -26,7 +26,7 @@ interface PageHeaderBreadcrumbBarProps {
|
|
|
26
26
|
/**
|
|
27
27
|
* `true` by default to render BreadcrumbBar bottom border.
|
|
28
28
|
*/
|
|
29
|
-
border?:
|
|
29
|
+
border?: boolean;
|
|
30
30
|
children?: React.ReactNode;
|
|
31
31
|
className?: string;
|
|
32
32
|
/**
|
|
@@ -40,7 +40,7 @@ interface PageHeaderBreadcrumbBarProps {
|
|
|
40
40
|
/**
|
|
41
41
|
* `true` to set content actions flush against page actions
|
|
42
42
|
*/
|
|
43
|
-
contentActionsFlush?:
|
|
43
|
+
contentActionsFlush?: boolean;
|
|
44
44
|
/**
|
|
45
45
|
* The PageHeaderContent's page actions
|
|
46
46
|
*/
|
|
@@ -48,7 +48,7 @@ interface PageHeaderBreadcrumbBarProps {
|
|
|
48
48
|
/**
|
|
49
49
|
* `true` to set page actions flush with page
|
|
50
50
|
*/
|
|
51
|
-
pageActionsFlush?:
|
|
51
|
+
pageActionsFlush?: boolean;
|
|
52
52
|
}
|
|
53
53
|
declare const PageHeaderBreadcrumbBar: React.ForwardRefExoticComponent<PageHeaderBreadcrumbBarProps & React.RefAttributes<HTMLDivElement>>;
|
|
54
54
|
/**
|
|
@@ -42,11 +42,11 @@ import { Text } from '../Text/Text.js';
|
|
|
42
42
|
* ----------
|
|
43
43
|
*/
|
|
44
44
|
|
|
45
|
-
const PageHeader = /*#__PURE__*/React.forwardRef(
|
|
45
|
+
const PageHeader = /*#__PURE__*/React.forwardRef(({
|
|
46
46
|
className,
|
|
47
47
|
children,
|
|
48
48
|
...other
|
|
49
|
-
}, ref) {
|
|
49
|
+
}, ref) => {
|
|
50
50
|
const prefix = usePrefix();
|
|
51
51
|
const classNames = cx({
|
|
52
52
|
[`${prefix}--page-header`]: true
|
|
@@ -64,7 +64,7 @@ PageHeader.displayName = 'PageHeader';
|
|
|
64
64
|
* -----------------------
|
|
65
65
|
*/
|
|
66
66
|
|
|
67
|
-
const PageHeaderBreadcrumbBar = /*#__PURE__*/React.forwardRef(
|
|
67
|
+
const PageHeaderBreadcrumbBar = /*#__PURE__*/React.forwardRef(({
|
|
68
68
|
border = true,
|
|
69
69
|
className,
|
|
70
70
|
children,
|
|
@@ -74,7 +74,7 @@ const PageHeaderBreadcrumbBar = /*#__PURE__*/React.forwardRef(function PageHeade
|
|
|
74
74
|
pageActions,
|
|
75
75
|
pageActionsFlush,
|
|
76
76
|
...other
|
|
77
|
-
}, ref) {
|
|
77
|
+
}, ref) => {
|
|
78
78
|
const prefix = usePrefix();
|
|
79
79
|
const classNames = cx({
|
|
80
80
|
[`${prefix}--page-header__breadcrumb-bar`]: true,
|
|
@@ -111,7 +111,7 @@ PageHeaderBreadcrumbBar.displayName = 'PageHeaderBreadcrumbBar';
|
|
|
111
111
|
* -----------------
|
|
112
112
|
*/
|
|
113
113
|
|
|
114
|
-
const PageHeaderContent = /*#__PURE__*/React.forwardRef(
|
|
114
|
+
const PageHeaderContent = /*#__PURE__*/React.forwardRef(({
|
|
115
115
|
className,
|
|
116
116
|
children,
|
|
117
117
|
title,
|
|
@@ -119,7 +119,7 @@ const PageHeaderContent = /*#__PURE__*/React.forwardRef(function PageHeaderConte
|
|
|
119
119
|
contextualActions,
|
|
120
120
|
pageActions,
|
|
121
121
|
...other
|
|
122
|
-
}, ref) {
|
|
122
|
+
}, ref) => {
|
|
123
123
|
const prefix = usePrefix();
|
|
124
124
|
const classNames = cx({
|
|
125
125
|
[`${prefix}--page-header__content`]: true
|
|
@@ -131,6 +131,7 @@ const PageHeaderContent = /*#__PURE__*/React.forwardRef(function PageHeaderConte
|
|
|
131
131
|
return element.offsetHeight < element.scrollHeight;
|
|
132
132
|
};
|
|
133
133
|
useLayoutEffect(() => {
|
|
134
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
134
135
|
titleRef.current && isEllipsisActive(titleRef.current);
|
|
135
136
|
}, [title]);
|
|
136
137
|
return /*#__PURE__*/React.createElement("div", _extends({
|
|
@@ -202,6 +203,7 @@ PageHeaderContent.propTypes = {
|
|
|
202
203
|
|
|
203
204
|
const PageHeaderContentPageActions = ({
|
|
204
205
|
className,
|
|
206
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
205
207
|
children,
|
|
206
208
|
menuButtonLabel = 'Actions',
|
|
207
209
|
actions,
|
|
@@ -237,6 +239,7 @@ const PageHeaderContentPageActions = ({
|
|
|
237
239
|
}
|
|
238
240
|
}
|
|
239
241
|
});
|
|
242
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
240
243
|
}, []);
|
|
241
244
|
return /*#__PURE__*/React.createElement("div", _extends({
|
|
242
245
|
className: classNames,
|
|
@@ -359,12 +362,12 @@ PageHeaderHeroImage.propTypes = {
|
|
|
359
362
|
* ----------------
|
|
360
363
|
*/
|
|
361
364
|
|
|
362
|
-
const PageHeaderTabBar = /*#__PURE__*/React.forwardRef(
|
|
365
|
+
const PageHeaderTabBar = /*#__PURE__*/React.forwardRef(({
|
|
363
366
|
className,
|
|
364
367
|
children,
|
|
365
368
|
tags = [],
|
|
366
369
|
...other
|
|
367
|
-
}, ref) {
|
|
370
|
+
}, ref) => {
|
|
368
371
|
const prefix = usePrefix();
|
|
369
372
|
const classNames = cx({
|
|
370
373
|
[`${prefix}--page-header__tab-bar`]: true
|
|
@@ -380,18 +383,26 @@ const PageHeaderTabBar = /*#__PURE__*/React.forwardRef(function PageHeaderTabBar
|
|
|
380
383
|
sm: 4
|
|
381
384
|
}, children)));
|
|
382
385
|
}
|
|
386
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
383
387
|
const [openPopover, setOpenPopover] = useState(false);
|
|
384
388
|
const tagSize = tags[0]?.size || 'md';
|
|
389
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
385
390
|
const instanceId = useId('PageHeaderTabBar');
|
|
391
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
386
392
|
const tagsWithIds = useMemo(() => {
|
|
387
393
|
return tags.map((tag, index) => ({
|
|
388
394
|
...tag,
|
|
389
395
|
id: tag.id || `tag-${index}-${instanceId}`
|
|
390
396
|
}));
|
|
397
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
391
398
|
}, [tags]);
|
|
399
|
+
|
|
400
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
392
401
|
const tagsContainerRef = useRef(null);
|
|
402
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
393
403
|
const offsetRef = useRef(null);
|
|
394
404
|
// To close popover when window resizes
|
|
405
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
395
406
|
useEffect(() => {
|
|
396
407
|
const handleResize = () => {
|
|
397
408
|
// Close the popover when window resizes to prevent unwanted opens
|
|
@@ -408,11 +419,14 @@ const PageHeaderTabBar = /*#__PURE__*/React.forwardRef(function PageHeaderTabBar
|
|
|
408
419
|
visibleItems = [],
|
|
409
420
|
hiddenItems = [],
|
|
410
421
|
itemRefHandler = () => {}
|
|
422
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
411
423
|
} = useOverflowItems(tagsWithIds, tagsContainerRef, offsetRef) || {
|
|
412
424
|
visibleItems: [],
|
|
413
425
|
hiddenItems: [],
|
|
414
426
|
itemRefHandler: () => {}
|
|
415
427
|
};
|
|
428
|
+
|
|
429
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
416
430
|
const handleOverflowClick = useCallback(event => {
|
|
417
431
|
event.stopPropagation();
|
|
418
432
|
setOpenPopover(prev => !prev);
|