@carbon/react 1.101.0-rc.0 → 1.102.0-rc.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 +1009 -974
- package/es/components/Accordion/AccordionItem.js +8 -6
- package/es/components/ComboBox/ComboBox.js +10 -5
- package/es/components/ComposedModal/ComposedModal.js +0 -1
- package/es/components/ContainedList/ContainedList.d.ts +1 -1
- package/es/components/ContainedList/ContainedList.js +9 -34
- package/es/components/ContentSwitcher/ContentSwitcher.d.ts +3 -3
- package/es/components/ContentSwitcher/ContentSwitcher.js +1 -2
- package/es/components/DataTable/DataTable.d.ts +6 -2
- package/es/components/DataTable/DataTable.js +3 -1
- package/es/components/DataTable/Table.js +1 -1
- package/es/components/DataTable/TableToolbarSearch.d.ts +11 -2
- package/es/components/DataTable/TableToolbarSearch.js +10 -3
- package/es/components/DataTable/stories/examples/TableToolbarFilter.d.ts +3 -0
- package/es/components/DataTableSkeleton/DataTableSkeleton.d.ts +2 -12
- package/es/components/DataTableSkeleton/DataTableSkeleton.js +1 -8
- package/es/components/DatePicker/DatePicker.js +4 -1
- package/es/components/DatePickerInput/DatePickerInput.d.ts +2 -5
- package/es/components/DatePickerInput/DatePickerInput.js +2 -13
- package/es/components/Dropdown/Dropdown.js +5 -4
- package/es/components/ExpandableSearch/ExpandableSearch.js +2 -1
- package/es/components/ExpandableSearch/index.js +12 -0
- package/es/components/FluidSelect/FluidSelect.d.ts +3 -3
- package/es/components/FluidTextArea/FluidTextArea.d.ts +2 -4
- package/es/components/FluidTextArea/FluidTextArea.js +1 -2
- package/es/components/FluidTimePickerSelect/FluidTimePickerSelect.d.ts +3 -3
- package/es/components/Grid/Column.d.ts +1 -1
- package/es/components/Grid/Column.js +2 -2
- package/es/components/ListBox/test-helpers.d.ts +71 -0
- package/es/components/Loading/Loading.d.ts +1 -1
- package/es/components/Loading/Loading.js +3 -1
- package/es/components/Menu/Menu.d.ts +1 -1
- package/es/components/Menu/Menu.js +6 -2
- package/es/components/Menu/MenuItem.js +2 -2
- package/es/components/Modal/Modal.js +0 -1
- package/es/components/MultiSelect/FilterableMultiSelect.js +5 -4
- package/es/components/MultiSelect/MultiSelect.js +6 -9
- package/es/components/MultiSelect/MultiSelectPropTypes.d.ts +6 -8
- package/es/components/MultiSelect/tools/sorting.d.ts +16 -9
- package/es/components/MultiSelect/tools/sorting.js +10 -14
- package/es/components/NumberInput/NumberInput.js +1 -1
- package/es/components/OverflowMenu/OverflowMenu.js +1 -0
- package/es/components/OverflowMenuItem/OverflowMenuItem.d.ts +5 -1
- package/es/components/OverflowMenuItem/OverflowMenuItem.js +12 -2
- package/es/components/Popover/index.js +4 -4
- package/es/components/ProgressIndicator/ProgressIndicator.d.ts +1 -1
- package/es/components/ProgressIndicator/ProgressIndicator.js +1 -1
- package/es/components/RadioButtonGroup/RadioButtonGroup.d.ts +1 -1
- package/es/components/RadioButtonGroup/RadioButtonGroup.js +8 -11
- package/es/components/Search/Search.d.ts +1 -1
- package/es/components/Search/Search.js +3 -2
- package/es/components/Search/utils.d.ts +7 -0
- package/es/components/Search/utils.js +10 -0
- package/es/components/Select/Select.d.ts +2 -2
- package/es/components/Select/Select.js +2 -2
- package/es/components/SelectItem/SelectItem.d.ts +3 -3
- package/es/components/StructuredList/StructuredList.js +2 -2
- package/es/components/Tabs/Tabs.js +9 -4
- package/es/components/Tag/DismissibleTag.d.ts +1 -1
- package/es/components/Tag/DismissibleTag.js +2 -2
- package/es/components/Tag/OperationalTag.d.ts +1 -1
- package/es/components/Tag/OperationalTag.js +2 -2
- package/es/components/Tag/SelectableTag.d.ts +1 -1
- package/es/components/Tag/SelectableTag.js +2 -2
- package/es/components/Tag/Tag.d.ts +1 -1
- package/es/components/Tag/Tag.js +2 -2
- package/es/components/TextArea/TextArea.d.ts +2 -3
- package/es/components/TextArea/TextArea.js +4 -5
- package/es/components/TextInput/ControlledPasswordInput.js +1 -1
- package/es/components/TimePickerSelect/TimePickerSelect.d.ts +4 -4
- package/es/components/Toggletip/index.js +1 -2
- package/es/components/TreeView/TreeNode.js +2 -2
- package/es/components/TreeView/TreeView.d.ts +1 -1
- package/es/components/UIShell/HeaderPanel.d.ts +1 -1
- package/es/components/UIShell/HeaderPanel.js +4 -2
- package/es/components/UIShell/SideNav.js +3 -3
- package/es/components/UIShell/Switcher.d.ts +1 -1
- package/es/components/UIShell/Switcher.js +1 -1
- package/es/feature-flags.js +2 -2
- package/es/internal/FloatingMenu.js +3 -3
- package/lib/components/Accordion/AccordionItem.js +7 -5
- package/lib/components/ComboBox/ComboBox.js +10 -5
- package/lib/components/ComposedModal/ComposedModal.js +0 -1
- package/lib/components/ContainedList/ContainedList.d.ts +1 -1
- package/lib/components/ContainedList/ContainedList.js +9 -34
- package/lib/components/ContentSwitcher/ContentSwitcher.d.ts +3 -3
- package/lib/components/ContentSwitcher/ContentSwitcher.js +1 -2
- package/lib/components/DataTable/DataTable.d.ts +6 -2
- package/lib/components/DataTable/DataTable.js +3 -1
- package/lib/components/DataTable/Table.js +1 -1
- package/lib/components/DataTable/TableToolbarSearch.d.ts +11 -2
- package/lib/components/DataTable/TableToolbarSearch.js +10 -3
- package/lib/components/DataTable/stories/examples/TableToolbarFilter.d.ts +3 -0
- package/lib/components/DataTableSkeleton/DataTableSkeleton.d.ts +2 -12
- package/lib/components/DataTableSkeleton/DataTableSkeleton.js +1 -8
- package/lib/components/DatePicker/DatePicker.js +4 -1
- package/lib/components/DatePickerInput/DatePickerInput.d.ts +2 -5
- package/lib/components/DatePickerInput/DatePickerInput.js +2 -13
- package/lib/components/Dropdown/Dropdown.js +5 -4
- package/lib/components/ExpandableSearch/ExpandableSearch.js +2 -1
- package/lib/components/ExpandableSearch/index.js +17 -0
- package/lib/components/FeatureFlags/index.js +5 -5
- package/lib/components/FluidSelect/FluidSelect.d.ts +3 -3
- package/lib/components/FluidTextArea/FluidTextArea.d.ts +2 -4
- package/lib/components/FluidTextArea/FluidTextArea.js +1 -2
- package/lib/components/FluidTimePickerSelect/FluidTimePickerSelect.d.ts +3 -3
- package/lib/components/Grid/Column.d.ts +1 -1
- package/lib/components/Grid/Column.js +2 -21
- package/lib/components/ListBox/test-helpers.d.ts +71 -0
- package/lib/components/Loading/Loading.d.ts +1 -1
- package/lib/components/Loading/Loading.js +3 -1
- package/lib/components/Menu/Menu.d.ts +1 -1
- package/lib/components/Menu/Menu.js +6 -2
- package/lib/components/Menu/MenuItem.js +2 -2
- package/lib/components/Modal/Modal.js +0 -1
- package/lib/components/MultiSelect/FilterableMultiSelect.js +5 -4
- package/lib/components/MultiSelect/MultiSelect.js +6 -9
- package/lib/components/MultiSelect/MultiSelectPropTypes.d.ts +6 -8
- package/lib/components/MultiSelect/tools/sorting.d.ts +16 -9
- package/lib/components/MultiSelect/tools/sorting.js +10 -14
- package/lib/components/NumberInput/NumberInput.js +1 -1
- package/lib/components/OverflowMenu/OverflowMenu.js +1 -0
- package/lib/components/OverflowMenuItem/OverflowMenuItem.d.ts +5 -1
- package/lib/components/OverflowMenuItem/OverflowMenuItem.js +12 -2
- package/lib/components/Popover/index.js +4 -4
- package/lib/components/ProgressIndicator/ProgressIndicator.d.ts +1 -1
- package/lib/components/ProgressIndicator/ProgressIndicator.js +1 -1
- package/lib/components/RadioButtonGroup/RadioButtonGroup.d.ts +1 -1
- package/lib/components/RadioButtonGroup/RadioButtonGroup.js +7 -10
- package/lib/components/Search/Search.d.ts +1 -1
- package/lib/components/Search/Search.js +3 -2
- package/lib/components/Search/utils.d.ts +7 -0
- package/lib/components/Search/utils.js +12 -0
- package/lib/components/Select/Select.d.ts +2 -2
- package/lib/components/Select/Select.js +2 -2
- package/lib/components/SelectItem/SelectItem.d.ts +3 -3
- package/lib/components/StructuredList/StructuredList.js +2 -2
- package/lib/components/Tabs/Tabs.js +9 -4
- package/lib/components/Tag/DismissibleTag.d.ts +1 -1
- package/lib/components/Tag/DismissibleTag.js +2 -2
- package/lib/components/Tag/OperationalTag.d.ts +1 -1
- package/lib/components/Tag/OperationalTag.js +2 -2
- package/lib/components/Tag/SelectableTag.d.ts +1 -1
- package/lib/components/Tag/SelectableTag.js +2 -2
- package/lib/components/Tag/Tag.d.ts +1 -1
- package/lib/components/Tag/Tag.js +2 -2
- package/lib/components/TextArea/TextArea.d.ts +2 -3
- package/lib/components/TextArea/TextArea.js +4 -5
- package/lib/components/TextInput/ControlledPasswordInput.js +1 -1
- package/lib/components/TimePickerSelect/TimePickerSelect.d.ts +4 -4
- package/lib/components/Toggletip/index.js +1 -2
- package/lib/components/TreeView/TreeNode.js +2 -2
- package/lib/components/TreeView/TreeView.d.ts +1 -1
- package/lib/components/UIShell/HeaderPanel.d.ts +1 -1
- package/lib/components/UIShell/HeaderPanel.js +4 -2
- package/lib/components/UIShell/SideNav.js +3 -3
- package/lib/components/UIShell/Switcher.d.ts +1 -1
- package/lib/components/UIShell/Switcher.js +1 -1
- package/lib/feature-flags.js +2 -21
- package/lib/internal/FloatingMenu.js +3 -22
- package/package.json +10 -10
- package/telemetry.yml +0 -1
|
@@ -9,7 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
|
|
|
9
9
|
import { ChevronRight } from '@carbon/icons-react';
|
|
10
10
|
import cx from 'classnames';
|
|
11
11
|
import PropTypes from 'prop-types';
|
|
12
|
-
import React, { useState, useContext } from 'react';
|
|
12
|
+
import React, { useState, useRef, useContext, useEffect } from 'react';
|
|
13
13
|
import { Text } from '../Text/Text.js';
|
|
14
14
|
import '../Text/TextDirection.js';
|
|
15
15
|
import { Escape } from '../../internal/keyboard/keys.js';
|
|
@@ -37,7 +37,7 @@ function AccordionItem({
|
|
|
37
37
|
...rest
|
|
38
38
|
}) {
|
|
39
39
|
const [isOpen, setIsOpen] = useState(open);
|
|
40
|
-
const
|
|
40
|
+
const prevOpenRef = useRef(open);
|
|
41
41
|
const accordionState = useContext(AccordionContext);
|
|
42
42
|
const disabledIsControlled = typeof controlledDisabled === 'boolean';
|
|
43
43
|
const disabled = disabledIsControlled ? controlledDisabled : accordionState.disabled;
|
|
@@ -60,10 +60,12 @@ function AccordionItem({
|
|
|
60
60
|
node.style.maxBlockSize = '';
|
|
61
61
|
}
|
|
62
62
|
}, [isOpen]);
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
63
|
+
useEffect(() => {
|
|
64
|
+
if (open !== prevOpenRef.current) {
|
|
65
|
+
setIsOpen(open);
|
|
66
|
+
prevOpenRef.current = open;
|
|
67
|
+
}
|
|
68
|
+
}, [open]);
|
|
67
69
|
|
|
68
70
|
// When the AccordionItem heading is clicked, toggle the open state of the
|
|
69
71
|
// panel
|
|
@@ -145,7 +145,8 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
145
145
|
middleware: autoAlign ? [flip(), hide()] : undefined,
|
|
146
146
|
whileElementsMounted: autoUpdate
|
|
147
147
|
} : {});
|
|
148
|
-
const
|
|
148
|
+
const referenceElement = refs?.reference?.current;
|
|
149
|
+
const parentWidth = referenceElement instanceof HTMLElement ? referenceElement.clientWidth : undefined;
|
|
149
150
|
useEffect(() => {
|
|
150
151
|
if (enableFloatingStyles) {
|
|
151
152
|
const updatedFloatingStyles = {
|
|
@@ -499,10 +500,9 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
499
500
|
onHighlightedIndexChange: ({
|
|
500
501
|
highlightedIndex
|
|
501
502
|
}) => {
|
|
502
|
-
// eslint-disable-next-line
|
|
503
|
+
// eslint-disable-next-line valid-typeof , no-constant-binary-expression -- https://github.com/carbon-design-system/carbon/issues/20452
|
|
503
504
|
if (highlightedIndex > -1 && typeof window !== undefined) {
|
|
504
505
|
const itemArray = document.querySelectorAll(`li.${prefix}--list-box__menu-item[role="option"]`);
|
|
505
|
-
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452
|
|
506
506
|
const highlightedItem = itemArray[highlightedIndex];
|
|
507
507
|
if (highlightedItem) {
|
|
508
508
|
highlightedItem.scrollIntoView({
|
|
@@ -781,15 +781,20 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
781
781
|
const {
|
|
782
782
|
'aria-disabled': unusedAriaDisabled,
|
|
783
783
|
// eslint-disable-line @typescript-eslint/no-unused-vars
|
|
784
|
+
'aria-selected': unusedAriaSelected,
|
|
785
|
+
// eslint-disable-line @typescript-eslint/no-unused-vars
|
|
784
786
|
...modifiedItemProps
|
|
785
787
|
} = itemProps;
|
|
788
|
+
const isSelected = isEqual(currentSelectedItem, item);
|
|
786
789
|
return /*#__PURE__*/React.createElement(ListBox.MenuItem, _extends({
|
|
787
790
|
key: itemProps.id,
|
|
788
|
-
isActive:
|
|
791
|
+
isActive: isSelected,
|
|
789
792
|
isHighlighted: highlightedIndex === index,
|
|
790
793
|
title: title,
|
|
791
794
|
disabled: disabled
|
|
792
|
-
}, modifiedItemProps
|
|
795
|
+
}, modifiedItemProps, {
|
|
796
|
+
"aria-selected": isSelected
|
|
797
|
+
}), itemToElement ? itemToElement(item) : itemToString(item), isSelected && /*#__PURE__*/React.createElement(Checkmark, {
|
|
793
798
|
className: `${prefix}--list-box__menu-item__selected-icon`
|
|
794
799
|
}));
|
|
795
800
|
}) : null)), helperText && !normalizedProps.invalid && !normalizedProps.warn && !isFluid && /*#__PURE__*/React.createElement(Text, {
|
|
@@ -196,7 +196,6 @@ const ComposedModalDialog = /*#__PURE__*/React.forwardRef(function ComposedModal
|
|
|
196
196
|
target
|
|
197
197
|
} = evt;
|
|
198
198
|
const mouseDownTarget = onMouseDownTarget.current;
|
|
199
|
-
evt.stopPropagation();
|
|
200
199
|
const shouldCloseOnOutsideClick =
|
|
201
200
|
// Passive modals can close on clicks outside the modal when
|
|
202
201
|
// preventCloseOnClickOutside is undefined or explicitly set to false.
|
|
@@ -10,36 +10,25 @@ import React from 'react';
|
|
|
10
10
|
import PropTypes from 'prop-types';
|
|
11
11
|
import cx from 'classnames';
|
|
12
12
|
import { LayoutConstraint } from '../Layout/index.js';
|
|
13
|
+
import { isComponentElement } from '../../internal/utils.js';
|
|
13
14
|
import { useId } from '../../internal/useId.js';
|
|
14
15
|
import { usePrefix } from '../../internal/usePrefix.js';
|
|
15
16
|
import ContainedListItem from './ContainedListItem/ContainedListItem.js';
|
|
17
|
+
import ExpandableSearch from '../ExpandableSearch/ExpandableSearch.js';
|
|
16
18
|
import Search from '../Search/Search.js';
|
|
17
19
|
import '../Search/Search.Skeleton.js';
|
|
18
20
|
|
|
19
21
|
const variants = ['on-page', 'disclosed'];
|
|
20
|
-
|
|
22
|
+
const isSearchComponent = node => isComponentElement(node, Search) || isComponentElement(node, ExpandableSearch);
|
|
23
|
+
const filterChildren = children => {
|
|
21
24
|
if (Array.isArray(children)) {
|
|
22
|
-
return children
|
|
25
|
+
return children.filter(child => !isSearchComponent(child));
|
|
23
26
|
}
|
|
24
|
-
if (children && !
|
|
27
|
+
if (children && !isSearchComponent(children)) {
|
|
25
28
|
return children;
|
|
26
29
|
}
|
|
27
30
|
return null;
|
|
28
|
-
}
|
|
29
|
-
function renderChildren(children) {
|
|
30
|
-
if (Array.isArray(children)) {
|
|
31
|
-
children.map((child, index) => {
|
|
32
|
-
if (index === 0 && child.type === Search) {
|
|
33
|
-
return child;
|
|
34
|
-
}
|
|
35
|
-
return child;
|
|
36
|
-
});
|
|
37
|
-
}
|
|
38
|
-
if (children && children.type === Search) {
|
|
39
|
-
return children;
|
|
40
|
-
}
|
|
41
|
-
return children;
|
|
42
|
-
}
|
|
31
|
+
};
|
|
43
32
|
const ContainedList = ({
|
|
44
33
|
action,
|
|
45
34
|
children,
|
|
@@ -59,21 +48,7 @@ const ContainedList = ({
|
|
|
59
48
|
[`${prefix}--layout--size-${size}`]: size
|
|
60
49
|
}, `${prefix}--contained-list--${kind}`, className);
|
|
61
50
|
const filteredChildren = filterChildren(children);
|
|
62
|
-
|
|
63
|
-
if (! /*#__PURE__*/React.isValidElement(action)) {
|
|
64
|
-
return false;
|
|
65
|
-
}
|
|
66
|
-
const actionTypes = ['Search', 'ExpandableSearch'];
|
|
67
|
-
let actionType = '';
|
|
68
|
-
if (typeof action.type === 'string') {
|
|
69
|
-
actionType = action.type;
|
|
70
|
-
} else {
|
|
71
|
-
actionType = action.type.displayName || '';
|
|
72
|
-
}
|
|
73
|
-
return actionTypes.includes(actionType);
|
|
74
|
-
}
|
|
75
|
-
const isActionSearch = isSearchAction(action);
|
|
76
|
-
const renderedChildren = renderChildren(children);
|
|
51
|
+
const isActionSearch = isSearchComponent(action);
|
|
77
52
|
return /*#__PURE__*/React.createElement("div", _extends({
|
|
78
53
|
className: classes
|
|
79
54
|
}, rest), label && /*#__PURE__*/React.createElement("div", {
|
|
@@ -100,7 +75,7 @@ const ContainedList = ({
|
|
|
100
75
|
React.createElement("ul", {
|
|
101
76
|
role: "list",
|
|
102
77
|
"aria-labelledby": label ? labelId : undefined
|
|
103
|
-
}, isActionSearch ? filteredChildren :
|
|
78
|
+
}, isActionSearch ? filteredChildren : children));
|
|
104
79
|
};
|
|
105
80
|
ContainedList.propTypes = {
|
|
106
81
|
/**
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Copyright IBM Corp. 2016,
|
|
2
|
+
* Copyright IBM Corp. 2016, 2026
|
|
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.
|
|
@@ -35,7 +35,7 @@ export interface ContentSwitcherProps extends Omit<HTMLAttributes<HTMLElement>,
|
|
|
35
35
|
/**
|
|
36
36
|
* Specify a selected index for the initially selected content
|
|
37
37
|
*/
|
|
38
|
-
selectedIndex
|
|
38
|
+
selectedIndex?: number;
|
|
39
39
|
/**
|
|
40
40
|
* Choose whether or not to automatically change selection on focus when left/right arrow pressed. Defaults to 'automatic'
|
|
41
41
|
*/
|
|
@@ -43,7 +43,7 @@ export interface ContentSwitcherProps extends Omit<HTMLAttributes<HTMLElement>,
|
|
|
43
43
|
/**
|
|
44
44
|
* Specify the size of the Content Switcher. Currently supports either `sm`, `md` (default) or `lg` as an option.
|
|
45
45
|
*/
|
|
46
|
-
size
|
|
46
|
+
size?: 'sm' | 'md' | 'lg';
|
|
47
47
|
}
|
|
48
48
|
export declare const ContentSwitcher: {
|
|
49
49
|
({ children, className, light, lowContrast, selectedIndex: selectedIndexProp, selectionMode, size, onChange, ...other }: ContentSwitcherProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -16,7 +16,6 @@ import { ArrowRight, ArrowLeft, Enter, Space } from '../../internal/keyboard/key
|
|
|
16
16
|
import { matches } from '../../internal/keyboard/match.js';
|
|
17
17
|
import { getNextIndex } from '../../internal/keyboard/navigation.js';
|
|
18
18
|
import { PrefixContext } from '../../internal/usePrefix.js';
|
|
19
|
-
import { noopFn } from '../../internal/noopFn.js';
|
|
20
19
|
import '../Switch/Switch.js';
|
|
21
20
|
import IconSwitch from '../Switch/IconSwitch.js';
|
|
22
21
|
|
|
@@ -28,7 +27,7 @@ const ContentSwitcher = ({
|
|
|
28
27
|
selectedIndex: selectedIndexProp = 0,
|
|
29
28
|
selectionMode = 'automatic',
|
|
30
29
|
size,
|
|
31
|
-
onChange
|
|
30
|
+
onChange,
|
|
32
31
|
...other
|
|
33
32
|
}) => {
|
|
34
33
|
const prefix = useContext(PrefixContext);
|
|
@@ -5,9 +5,10 @@
|
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
7
|
import PropTypes from 'prop-types';
|
|
8
|
-
import React, { type
|
|
8
|
+
import React, { type MouseEvent, type ReactElement, type ReactNode } from 'react';
|
|
9
9
|
import { type SortRowFn } from './state/sorting';
|
|
10
10
|
import type { DataTableSortState } from './state/sortStates';
|
|
11
|
+
import { type TableToolbarSearchOnChangeEvent } from './TableToolbarSearch';
|
|
11
12
|
import type { TranslateWithId } from '../../types/common';
|
|
12
13
|
declare const translationIds: {
|
|
13
14
|
readonly 'carbon.table.row.expand': "carbon.table.row.expand";
|
|
@@ -169,8 +170,11 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
|
|
|
169
170
|
};
|
|
170
171
|
/**
|
|
171
172
|
* Handles input value changes.
|
|
173
|
+
*
|
|
174
|
+
* Note: the `''` event sentinel is supported for compatibility with
|
|
175
|
+
* `TableToolbarSearch` and should be removed in the next major release.
|
|
172
176
|
*/
|
|
173
|
-
onInputChange: (event:
|
|
177
|
+
onInputChange: (event: TableToolbarSearchOnChangeEvent, defaultValue?: string) => void;
|
|
174
178
|
/**
|
|
175
179
|
* Sorts the table by a specific header.
|
|
176
180
|
*/
|
|
@@ -516,7 +516,9 @@ const DataTable = props => {
|
|
|
516
516
|
* Event handler for table filter input changes.
|
|
517
517
|
*/
|
|
518
518
|
const handleOnInputValueChange = (event, defaultValue) => {
|
|
519
|
-
|
|
519
|
+
// TODO: Remove `''` sentinel support once `TableToolbarSearch` no
|
|
520
|
+
// longer emits it on mount.
|
|
521
|
+
const value = defaultValue ?? (event === '' ? event : event.target.value);
|
|
520
522
|
setState(prev => ({
|
|
521
523
|
...prev,
|
|
522
524
|
filterInputValue: value
|
|
@@ -91,7 +91,7 @@ const Table = ({
|
|
|
91
91
|
const isBodyMultiline = Array.from(tableRef.current.querySelectorAll('td')).some(td => isElementWrappingContent(td, context));
|
|
92
92
|
const isHeaderMultiline = Array.from(tableRef.current.querySelectorAll('th')).some(th => {
|
|
93
93
|
const label = th.querySelector(`.${prefix}--table-header-label`);
|
|
94
|
-
return label && isElementWrappingContent(label, context);
|
|
94
|
+
return label instanceof HTMLElement && isElementWrappingContent(label, context);
|
|
95
95
|
});
|
|
96
96
|
toggleTableBodyAlignmentClass(isBodyMultiline);
|
|
97
97
|
toggleTableHeaderAlignmentClass(isHeaderMultiline);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Copyright IBM Corp. 2016,
|
|
2
|
+
* Copyright IBM Corp. 2016, 2026
|
|
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.
|
|
@@ -15,6 +15,12 @@ declare const translationIds: {
|
|
|
15
15
|
type TranslationKey = keyof typeof translationIds;
|
|
16
16
|
type ExcludedInheritedProps = 'defaultValue' | 'labelText' | 'onBlur' | 'onChange' | 'onExpand' | 'onFocus' | 'tabIndex';
|
|
17
17
|
export type TableToolbarSearchHandleExpand = (event: FocusEvent<HTMLInputElement>, newValue?: boolean) => void;
|
|
18
|
+
/**
|
|
19
|
+
* @deprecated Passing `''` as the event sentinel is legacy compatibility
|
|
20
|
+
* behavior for `DataTable` filtering. In the next major release, this type
|
|
21
|
+
* should become an optional `ChangeEvent<HTMLInputElement>` instead.
|
|
22
|
+
*/
|
|
23
|
+
export type TableToolbarSearchOnChangeEvent = '' | ChangeEvent<HTMLInputElement>;
|
|
18
24
|
export interface TableToolbarSearchProps extends Omit<SearchProps, ExcludedInheritedProps>, TranslateWithId<TranslationKey> {
|
|
19
25
|
/**
|
|
20
26
|
* Specifies if the search should initially render in an expanded state
|
|
@@ -40,8 +46,11 @@ export interface TableToolbarSearchProps extends Omit<SearchProps, ExcludedInher
|
|
|
40
46
|
onBlur?(event: FocusEvent<HTMLInputElement>, handleExpand: TableToolbarSearchHandleExpand): void;
|
|
41
47
|
/**
|
|
42
48
|
* Provide an optional hook that is called each time the input is updated
|
|
49
|
+
*
|
|
50
|
+
* Note: the `''` event sentinel is legacy compatibility behavior and will be
|
|
51
|
+
* removed in the next major release.
|
|
43
52
|
*/
|
|
44
|
-
onChange?: (event:
|
|
53
|
+
onChange?: (event: TableToolbarSearchOnChangeEvent, value?: string) => void;
|
|
45
54
|
/**
|
|
46
55
|
* Provide an optional hook that is called each time the input is expanded
|
|
47
56
|
*/
|
|
@@ -26,6 +26,13 @@ const defaultTranslations = {
|
|
|
26
26
|
const defaultTranslateWithId = messageId => {
|
|
27
27
|
return defaultTranslations[messageId];
|
|
28
28
|
};
|
|
29
|
+
|
|
30
|
+
/**
|
|
31
|
+
* @deprecated Passing `''` as the event sentinel is legacy compatibility
|
|
32
|
+
* behavior for `DataTable` filtering. In the next major release, this type
|
|
33
|
+
* should become an optional `ChangeEvent<HTMLInputElement>` instead.
|
|
34
|
+
*/
|
|
35
|
+
|
|
29
36
|
const TableToolbarSearch = ({
|
|
30
37
|
className,
|
|
31
38
|
searchContainerClass,
|
|
@@ -64,14 +71,14 @@ const TableToolbarSearch = ({
|
|
|
64
71
|
}, [focusTarget]);
|
|
65
72
|
useEffect(() => {
|
|
66
73
|
if (defaultValue) {
|
|
74
|
+
// TODO: Remove the `''` event sentinel and pass `undefined` for
|
|
75
|
+
// value initialization in the next major release.
|
|
67
76
|
onChangeProp?.('', defaultValue);
|
|
68
77
|
}
|
|
69
78
|
},
|
|
70
79
|
//eslint-disable-next-line react-hooks/exhaustive-deps
|
|
71
80
|
[]);
|
|
72
|
-
const searchClasses = cx(className, {
|
|
73
|
-
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
74
|
-
[searchContainerClass]: searchContainerClass,
|
|
81
|
+
const searchClasses = cx(className, searchContainerClass, {
|
|
75
82
|
[`${prefix}--toolbar-search-container-active`]: expanded,
|
|
76
83
|
[`${prefix}--toolbar-search-container-disabled`]: disabled,
|
|
77
84
|
[`${prefix}--toolbar-search-container-expandable`]: !persistent,
|
|
@@ -12,6 +12,9 @@ interface TableToolbarFilterProps {
|
|
|
12
12
|
className?: string;
|
|
13
13
|
/**
|
|
14
14
|
* Provide an optional hook that is called each time the input is updated
|
|
15
|
+
*
|
|
16
|
+
* Note: the `''` event sentinel exists for `DataTable` compatibility and
|
|
17
|
+
* should be removed in the next major release.
|
|
15
18
|
*/
|
|
16
19
|
onChange?: (event: '' | ChangeEvent<HTMLInputElement>) => void;
|
|
17
20
|
/**
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Copyright IBM Corp. 2016,
|
|
2
|
+
* Copyright IBM Corp. 2016, 2026
|
|
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.
|
|
@@ -22,11 +22,6 @@ export interface DataTableSkeletonProps extends TableHTMLAttributes<HTMLTableEle
|
|
|
22
22
|
* Specify the number of columns that you want to render in the skeleton state
|
|
23
23
|
*/
|
|
24
24
|
columnCount?: number;
|
|
25
|
-
/**
|
|
26
|
-
* Optionally specify whether you want the Skeleton to be rendered as a
|
|
27
|
-
* compact DataTable
|
|
28
|
-
*/
|
|
29
|
-
compact?: boolean;
|
|
30
25
|
/**
|
|
31
26
|
* Optionally specify the displayed headers
|
|
32
27
|
*/
|
|
@@ -57,7 +52,7 @@ export interface DataTableSkeletonProps extends TableHTMLAttributes<HTMLTableEle
|
|
|
57
52
|
className?: string;
|
|
58
53
|
}
|
|
59
54
|
declare const DataTableSkeleton: {
|
|
60
|
-
({ headers, rowCount, columnCount, zebra,
|
|
55
|
+
({ headers, rowCount, columnCount, zebra, className, showHeader, showToolbar, size, ...rest }: DataTableSkeletonProps): import("react/jsx-runtime").JSX.Element;
|
|
61
56
|
propTypes: {
|
|
62
57
|
/**
|
|
63
58
|
* Specify an optional className to add.
|
|
@@ -67,11 +62,6 @@ declare const DataTableSkeleton: {
|
|
|
67
62
|
* Specify the number of columns that you want to render in the skeleton state
|
|
68
63
|
*/
|
|
69
64
|
columnCount: PropTypes.Requireable<number>;
|
|
70
|
-
/**
|
|
71
|
-
* Optionally specify whether you want the Skeleton to be rendered as a
|
|
72
|
-
* compact DataTable
|
|
73
|
-
*/
|
|
74
|
-
compact: PropTypes.Requireable<boolean>;
|
|
75
65
|
/**
|
|
76
66
|
* Optionally specify the displayed headers
|
|
77
67
|
*/
|
|
@@ -17,7 +17,6 @@ const DataTableSkeleton = ({
|
|
|
17
17
|
rowCount = 5,
|
|
18
18
|
columnCount = 5,
|
|
19
19
|
zebra = false,
|
|
20
|
-
compact = false,
|
|
21
20
|
className,
|
|
22
21
|
showHeader = true,
|
|
23
22
|
showToolbar = true,
|
|
@@ -29,8 +28,7 @@ const DataTableSkeleton = ({
|
|
|
29
28
|
[`${prefix}--skeleton`]: true,
|
|
30
29
|
[`${prefix}--data-table`]: true,
|
|
31
30
|
[`${prefix}--data-table--${size}`]: size,
|
|
32
|
-
[`${prefix}--data-table--zebra`]: zebra
|
|
33
|
-
[`${prefix}--data-table--compact`]: compact
|
|
31
|
+
[`${prefix}--data-table--zebra`]: zebra
|
|
34
32
|
});
|
|
35
33
|
const rowRepeat = rowCount;
|
|
36
34
|
const rows = Array(rowRepeat);
|
|
@@ -76,11 +74,6 @@ DataTableSkeleton.propTypes = {
|
|
|
76
74
|
* Specify the number of columns that you want to render in the skeleton state
|
|
77
75
|
*/
|
|
78
76
|
columnCount: PropTypes.number,
|
|
79
|
-
/**
|
|
80
|
-
* Optionally specify whether you want the Skeleton to be rendered as a
|
|
81
|
-
* compact DataTable
|
|
82
|
-
*/
|
|
83
|
-
compact: PropTypes.bool,
|
|
84
77
|
/**
|
|
85
78
|
* Optionally specify the displayed headers
|
|
86
79
|
*/
|
|
@@ -429,7 +429,10 @@ const DatePicker = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
429
429
|
calendarContainer.classList.add('open');
|
|
430
430
|
const selectedDateElem = calendarContainer.querySelector('.selected') && fpSelectedDateElem;
|
|
431
431
|
const todayDateElem = calendarContainer.querySelector('.today') && fpTodayDateElem;
|
|
432
|
-
|
|
432
|
+
const focusTarget = selectedDateElem || todayDateElem || calendarContainer.querySelector('.flatpickr-day[tabindex]') || calendarContainer;
|
|
433
|
+
if (focusTarget instanceof HTMLElement) {
|
|
434
|
+
focusTarget.focus();
|
|
435
|
+
}
|
|
433
436
|
if (event.target === startInputField.current) {
|
|
434
437
|
lastFocusedField.current = startInputField.current;
|
|
435
438
|
} else if (event.target === endInputField.current) {
|
|
@@ -61,12 +61,9 @@ export interface DatePickerInputProps extends Omit<HTMLAttributes<HTMLInputEleme
|
|
|
61
61
|
*/
|
|
62
62
|
onClick?: func;
|
|
63
63
|
/**
|
|
64
|
-
* Provide a regular expression that the input value must match
|
|
65
|
-
* TODO:need to be rewritten
|
|
64
|
+
* Provide a regular expression pattern string that the input value must match
|
|
66
65
|
*/
|
|
67
|
-
pattern?:
|
|
68
|
-
[key: string]: any;
|
|
69
|
-
}, propName: string, componentName: string) => null | any | Error;
|
|
66
|
+
pattern?: string;
|
|
70
67
|
/**
|
|
71
68
|
* Specify the placeholder text
|
|
72
69
|
*/
|
|
@@ -204,20 +204,9 @@ DatePickerInput.propTypes = {
|
|
|
204
204
|
*/
|
|
205
205
|
onClick: PropTypes.func,
|
|
206
206
|
/**
|
|
207
|
-
* Provide a regular expression that the input value must match
|
|
207
|
+
* Provide a regular expression pattern string that the input value must match
|
|
208
208
|
*/
|
|
209
|
-
|
|
210
|
-
pattern: (props, propName, componentName) => {
|
|
211
|
-
if (props[propName] === undefined) {
|
|
212
|
-
return;
|
|
213
|
-
}
|
|
214
|
-
try {
|
|
215
|
-
new RegExp(props[propName]);
|
|
216
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20452
|
|
217
|
-
} catch (e) {
|
|
218
|
-
return new Error(`Invalid value of prop '${propName}' supplied to '${componentName}', it should be a valid regular expression`);
|
|
219
|
-
}
|
|
220
|
-
},
|
|
209
|
+
pattern: PropTypes.string,
|
|
221
210
|
/**
|
|
222
211
|
* Specify the placeholder text
|
|
223
212
|
*/
|
|
@@ -57,6 +57,7 @@ function stateReducer(state, actionAndChanges) {
|
|
|
57
57
|
} = actionAndChanges;
|
|
58
58
|
switch (type) {
|
|
59
59
|
case ItemMouseMove:
|
|
60
|
+
return state;
|
|
60
61
|
case MenuMouseLeave:
|
|
61
62
|
if (changes.highlightedIndex === state.highlightedIndex) {
|
|
62
63
|
// Prevent state update if highlightedIndex hasn't changed
|
|
@@ -260,7 +261,7 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
|
|
|
260
261
|
className: helperClasses
|
|
261
262
|
}, helperText) : null;
|
|
262
263
|
const handleFocus = evt => {
|
|
263
|
-
setIsFocused(evt.type === 'focus' && !selectedItem
|
|
264
|
+
setIsFocused(evt.type === 'focus' && !selectedItem);
|
|
264
265
|
};
|
|
265
266
|
const buttonRef = useRef(null);
|
|
266
267
|
const mergedRef = mergeRefs(toggleButtonProps.ref, ref, buttonRef);
|
|
@@ -349,10 +350,10 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
|
|
|
349
350
|
size: size$1,
|
|
350
351
|
className: className,
|
|
351
352
|
invalid: normalizedProps.invalid,
|
|
352
|
-
invalidText:
|
|
353
|
+
invalidText: invalidText,
|
|
353
354
|
invalidTextId: normalizedProps.invalidId,
|
|
354
355
|
warn: normalizedProps.warn,
|
|
355
|
-
warnText:
|
|
356
|
+
warnText: warnText,
|
|
356
357
|
warnTextId: normalizedProps.warnId,
|
|
357
358
|
light: light,
|
|
358
359
|
isOpen: isOpen,
|
|
@@ -398,7 +399,7 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
|
|
|
398
399
|
}, itemProps), itemToElement ? itemToElement(item) : itemToString(item), selectedItem === item && /*#__PURE__*/React.createElement(Checkmark, {
|
|
399
400
|
className: `${prefix}--list-box__menu-item__selected-icon`
|
|
400
401
|
}));
|
|
401
|
-
}))), !inline && !isFluid && !normalizedProps.validation && helper
|
|
402
|
+
}))), !inline && !isFluid && !normalizedProps.validation && helper);
|
|
402
403
|
});
|
|
403
404
|
|
|
404
405
|
// Workaround problems with forwardRef() and generics. In the long term, should stop using forwardRef().
|
|
@@ -15,6 +15,7 @@ import { composeEventHandlers } from '../../tools/events.js';
|
|
|
15
15
|
import { Escape } from '../../internal/keyboard/keys.js';
|
|
16
16
|
import { match } from '../../internal/keyboard/match.js';
|
|
17
17
|
import { mergeRefs } from '../../tools/mergeRefs.js';
|
|
18
|
+
import { isSearchValuePresent } from '../Search/utils.js';
|
|
18
19
|
|
|
19
20
|
const frFn = forwardRef;
|
|
20
21
|
const ExpandableSearch = frFn((props, forwardedRef) => {
|
|
@@ -28,7 +29,7 @@ const ExpandableSearch = frFn((props, forwardedRef) => {
|
|
|
28
29
|
...rest
|
|
29
30
|
} = props;
|
|
30
31
|
const [expanded, setExpanded] = useState(isExpanded || false);
|
|
31
|
-
const [hasContent, setHasContent] = useState(defaultValue
|
|
32
|
+
const [hasContent, setHasContent] = useState(isSearchValuePresent(defaultValue));
|
|
32
33
|
const searchRef = useRef(null);
|
|
33
34
|
const prefix = usePrefix();
|
|
34
35
|
function handleBlur(evt) {
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2016, 2023
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
import ExpandableSearch from './ExpandableSearch.js';
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
export { ExpandableSearch, ExpandableSearch as default };
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Copyright IBM Corp. 2022
|
|
2
|
+
* Copyright IBM Corp. 2022, 2026
|
|
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 React from 'react';
|
|
7
|
+
import React, { type SelectHTMLAttributes } from 'react';
|
|
8
8
|
export interface FluidSelectProps {
|
|
9
9
|
/**
|
|
10
10
|
* Provide the contents of your Select
|
|
@@ -17,7 +17,7 @@ export interface FluidSelectProps {
|
|
|
17
17
|
/**
|
|
18
18
|
* Optionally provide the default value of the `<select>`
|
|
19
19
|
*/
|
|
20
|
-
defaultValue?:
|
|
20
|
+
defaultValue?: SelectHTMLAttributes<HTMLSelectElement>['defaultValue'];
|
|
21
21
|
/**
|
|
22
22
|
* Specify whether the control is disabled
|
|
23
23
|
*/
|
|
@@ -8,8 +8,7 @@ import PropTypes from 'prop-types';
|
|
|
8
8
|
import React from 'react';
|
|
9
9
|
export interface FluidTextAreaProps {
|
|
10
10
|
/**
|
|
11
|
-
* Provide a custom className that is applied
|
|
12
|
-
* `<textarea>` node
|
|
11
|
+
* Provide a custom className that is applied to the wrapper node
|
|
13
12
|
*/
|
|
14
13
|
className?: string;
|
|
15
14
|
/**
|
|
@@ -101,8 +100,7 @@ declare const FluidTextArea: {
|
|
|
101
100
|
({ className, ...other }: FluidTextAreaProps): import("react/jsx-runtime").JSX.Element;
|
|
102
101
|
propTypes: {
|
|
103
102
|
/**
|
|
104
|
-
* Provide a custom className that is applied
|
|
105
|
-
* `<textarea>` node
|
|
103
|
+
* Provide a custom className that is applied to the wrapper node
|
|
106
104
|
*/
|
|
107
105
|
className: PropTypes.Requireable<string>;
|
|
108
106
|
/**
|
|
@@ -31,8 +31,7 @@ const FluidTextArea = ({
|
|
|
31
31
|
};
|
|
32
32
|
FluidTextArea.propTypes = {
|
|
33
33
|
/**
|
|
34
|
-
* Provide a custom className that is applied
|
|
35
|
-
* `<textarea>` node
|
|
34
|
+
* Provide a custom className that is applied to the wrapper node
|
|
36
35
|
*/
|
|
37
36
|
className: PropTypes.string,
|
|
38
37
|
/**
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Copyright IBM Corp. 2022
|
|
2
|
+
* Copyright IBM Corp. 2022, 2026
|
|
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 React from 'react';
|
|
7
|
+
import React, { type SelectHTMLAttributes } from 'react';
|
|
8
8
|
export interface FluidTimePickerSelectProps {
|
|
9
9
|
/**
|
|
10
10
|
* Provide the contents of your Select
|
|
@@ -17,7 +17,7 @@ export interface FluidTimePickerSelectProps {
|
|
|
17
17
|
/**
|
|
18
18
|
* Optionally provide the default value of the `<select>`
|
|
19
19
|
*/
|
|
20
|
-
defaultValue?:
|
|
20
|
+
defaultValue?: SelectHTMLAttributes<HTMLSelectElement>['defaultValue'];
|
|
21
21
|
/**
|
|
22
22
|
* Specify whether the control is disabled
|
|
23
23
|
*/
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
9
|
-
import
|
|
9
|
+
import { enabled } from '@carbon/feature-flags';
|
|
10
10
|
import cx from 'classnames';
|
|
11
11
|
import PropTypes from 'prop-types';
|
|
12
12
|
import React from 'react';
|
|
@@ -52,7 +52,7 @@ const Column = /*#__PURE__*/React.forwardRef(({
|
|
|
52
52
|
}, rest), children);
|
|
53
53
|
});
|
|
54
54
|
const percentSpanType = PropTypes.oneOf(['25%', '50%', '75%', '100%']);
|
|
55
|
-
const spanPropType =
|
|
55
|
+
const spanPropType = enabled('enable-css-grid') ? PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.shape({
|
|
56
56
|
span: PropTypes.oneOfType([PropTypes.number, percentSpanType]),
|
|
57
57
|
offset: PropTypes.number,
|
|
58
58
|
start: PropTypes.number,
|