@carbon/react 1.101.0 → 1.102.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 +987 -952
- package/es/components/Accordion/AccordionItem.js +8 -6
- package/es/components/CheckboxGroup/CheckboxGroup.d.ts +1 -1
- package/es/components/CheckboxGroup/CheckboxGroup.js +2 -2
- package/es/components/ComboBox/ComboBox.js +3 -4
- 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 +4 -4
- 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/TableExpandRow.js +2 -2
- 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/DataTable/tools/normalize.js +2 -1
- package/es/components/DataTableSkeleton/DataTableSkeleton.d.ts +2 -12
- package/es/components/DataTableSkeleton/DataTableSkeleton.js +1 -8
- package/es/components/DatePicker/DatePicker.js +7 -3
- package/es/components/DatePickerInput/DatePickerInput.d.ts +2 -5
- package/es/components/DatePickerInput/DatePickerInput.js +2 -13
- package/es/components/Dropdown/Dropdown.js +2 -3
- 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/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 +4 -3
- package/es/components/MultiSelect/MultiSelect.js +5 -8
- 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/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 +3 -3
- package/es/components/ProgressIndicator/ProgressIndicator.js +3 -3
- package/es/components/RadioButtonGroup/RadioButtonGroup.d.ts +1 -1
- package/es/components/RadioButtonGroup/RadioButtonGroup.js +8 -11
- 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 +1 -1
- package/es/components/SelectItem/SelectItem.d.ts +3 -3
- package/es/components/Slider/Slider.d.ts +1 -1
- package/es/components/Slider/Slider.js +2 -8
- 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 +1 -2
- package/es/components/TextArea/TextArea.js +4 -5
- package/es/components/TextInput/ControlledPasswordInput.js +1 -1
- package/es/components/TileGroup/TileGroup.d.ts +1 -1
- package/es/components/TileGroup/TileGroup.js +2 -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 +7 -4
- package/es/components/UIShell/SideNav.js +3 -3
- package/es/components/UIShell/Switcher.d.ts +1 -1
- package/es/components/UIShell/Switcher.js +6 -5
- package/es/feature-flags.js +2 -2
- package/es/internal/FloatingMenu.js +3 -3
- package/es/internal/useOverflowItems.d.ts +1 -5
- package/es/internal/useOverflowItems.js +6 -27
- package/lib/components/Accordion/AccordionItem.js +7 -5
- package/lib/components/CheckboxGroup/CheckboxGroup.d.ts +1 -1
- package/lib/components/CheckboxGroup/CheckboxGroup.js +1 -1
- package/lib/components/ComboBox/ComboBox.js +3 -4
- 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 +3 -3
- 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/TableExpandRow.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/DataTable/tools/normalize.js +2 -1
- package/lib/components/DataTableSkeleton/DataTableSkeleton.d.ts +2 -12
- package/lib/components/DataTableSkeleton/DataTableSkeleton.js +1 -8
- package/lib/components/DatePicker/DatePicker.js +7 -3
- package/lib/components/DatePickerInput/DatePickerInput.d.ts +2 -5
- package/lib/components/DatePickerInput/DatePickerInput.js +2 -13
- package/lib/components/Dropdown/Dropdown.js +2 -3
- 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/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 +4 -3
- package/lib/components/MultiSelect/MultiSelect.js +5 -8
- 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/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 +3 -3
- package/lib/components/ProgressIndicator/ProgressIndicator.js +3 -3
- package/lib/components/RadioButtonGroup/RadioButtonGroup.d.ts +1 -1
- package/lib/components/RadioButtonGroup/RadioButtonGroup.js +7 -10
- 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 +1 -1
- package/lib/components/SelectItem/SelectItem.d.ts +3 -3
- package/lib/components/Slider/Slider.d.ts +1 -1
- package/lib/components/Slider/Slider.js +2 -8
- 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 +1 -2
- package/lib/components/TextArea/TextArea.js +4 -5
- package/lib/components/TextInput/ControlledPasswordInput.js +1 -1
- package/lib/components/TileGroup/TileGroup.d.ts +1 -1
- package/lib/components/TileGroup/TileGroup.js +2 -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 +6 -3
- package/lib/components/UIShell/SideNav.js +3 -3
- package/lib/components/UIShell/Switcher.d.ts +1 -1
- package/lib/components/UIShell/Switcher.js +5 -4
- package/lib/feature-flags.js +2 -21
- package/lib/internal/FloatingMenu.js +3 -22
- package/lib/internal/useOverflowItems.d.ts +1 -5
- package/lib/internal/useOverflowItems.js +6 -27
- package/package.json +8 -8
- package/telemetry.yml +0 -1
|
@@ -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;
|
|
@@ -18,7 +18,7 @@ var keys = require('../../internal/keyboard/keys.js');
|
|
|
18
18
|
var match = require('../../internal/keyboard/match.js');
|
|
19
19
|
var navigation = require('../../internal/keyboard/navigation.js');
|
|
20
20
|
var usePrefix = require('../../internal/usePrefix.js');
|
|
21
|
-
var
|
|
21
|
+
var utils = require('../../internal/utils.js');
|
|
22
22
|
require('../Switch/Switch.js');
|
|
23
23
|
var IconSwitch = require('../Switch/IconSwitch.js');
|
|
24
24
|
|
|
@@ -30,7 +30,7 @@ const ContentSwitcher = ({
|
|
|
30
30
|
selectedIndex: selectedIndexProp = 0,
|
|
31
31
|
selectionMode = 'automatic',
|
|
32
32
|
size,
|
|
33
|
-
onChange
|
|
33
|
+
onChange,
|
|
34
34
|
...other
|
|
35
35
|
}) => {
|
|
36
36
|
const prefix = React.useContext(usePrefix.PrefixContext);
|
|
@@ -84,7 +84,7 @@ const ContentSwitcher = ({
|
|
|
84
84
|
}
|
|
85
85
|
};
|
|
86
86
|
const isIconOnly = React.Children.map(children, child => {
|
|
87
|
-
return
|
|
87
|
+
return utils.isComponentElement(child, IconSwitch.default);
|
|
88
88
|
})?.every(val => val === true);
|
|
89
89
|
const classes = cx(`${prefix}--content-switcher`, className, {
|
|
90
90
|
[`${prefix}--content-switcher--light`]: light,
|
|
@@ -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
|
*/
|
|
@@ -518,7 +518,9 @@ const DataTable = props => {
|
|
|
518
518
|
* Event handler for table filter input changes.
|
|
519
519
|
*/
|
|
520
520
|
const handleOnInputValueChange = (event, defaultValue) => {
|
|
521
|
-
|
|
521
|
+
// TODO: Remove `''` sentinel support once `TableToolbarSearch` no
|
|
522
|
+
// longer emits it on mount.
|
|
523
|
+
const value = defaultValue ?? (event === '' ? event : event.target.value);
|
|
522
524
|
setState(prev => ({
|
|
523
525
|
...prev,
|
|
524
526
|
filterInputValue: value
|
|
@@ -95,7 +95,7 @@ const Table = ({
|
|
|
95
95
|
const isBodyMultiline = Array.from(tableRef.current.querySelectorAll('td')).some(td => isElementWrappingContent(td, context));
|
|
96
96
|
const isHeaderMultiline = Array.from(tableRef.current.querySelectorAll('th')).some(th => {
|
|
97
97
|
const label = th.querySelector(`.${prefix}--table-header-label`);
|
|
98
|
-
return label && isElementWrappingContent(label, context);
|
|
98
|
+
return label instanceof HTMLElement && isElementWrappingContent(label, context);
|
|
99
99
|
});
|
|
100
100
|
toggleTableBodyAlignmentClass(isBodyMultiline);
|
|
101
101
|
toggleTableHeaderAlignmentClass(isHeaderMultiline);
|
|
@@ -54,7 +54,7 @@ const TableExpandRow = /*#__PURE__*/React.forwardRef(({
|
|
|
54
54
|
}
|
|
55
55
|
});
|
|
56
56
|
const normalizedChildren = React.Children.toArray(children).map(child => {
|
|
57
|
-
if (
|
|
57
|
+
if (!utils.isComponentElement(child, TableSlugRow.default) && !utils.isComponentElement(child, TableDecoratorRow.default)) {
|
|
58
58
|
return child;
|
|
59
59
|
}
|
|
60
60
|
});
|
|
@@ -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
|
*/
|
|
@@ -30,6 +30,13 @@ const defaultTranslations = {
|
|
|
30
30
|
const defaultTranslateWithId = messageId => {
|
|
31
31
|
return defaultTranslations[messageId];
|
|
32
32
|
};
|
|
33
|
+
|
|
34
|
+
/**
|
|
35
|
+
* @deprecated Passing `''` as the event sentinel is legacy compatibility
|
|
36
|
+
* behavior for `DataTable` filtering. In the next major release, this type
|
|
37
|
+
* should become an optional `ChangeEvent<HTMLInputElement>` instead.
|
|
38
|
+
*/
|
|
39
|
+
|
|
33
40
|
const TableToolbarSearch = ({
|
|
34
41
|
className,
|
|
35
42
|
searchContainerClass,
|
|
@@ -68,14 +75,14 @@ const TableToolbarSearch = ({
|
|
|
68
75
|
}, [focusTarget]);
|
|
69
76
|
React.useEffect(() => {
|
|
70
77
|
if (defaultValue) {
|
|
78
|
+
// TODO: Remove the `''` event sentinel and pass `undefined` for
|
|
79
|
+
// value initialization in the next major release.
|
|
71
80
|
onChangeProp?.('', defaultValue);
|
|
72
81
|
}
|
|
73
82
|
},
|
|
74
83
|
//eslint-disable-next-line react-hooks/exhaustive-deps
|
|
75
84
|
[]);
|
|
76
|
-
const searchClasses = cx(className, {
|
|
77
|
-
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
78
|
-
[searchContainerClass]: searchContainerClass,
|
|
85
|
+
const searchClasses = cx(className, searchContainerClass, {
|
|
79
86
|
[`${prefix}--toolbar-search-container-active`]: expanded,
|
|
80
87
|
[`${prefix}--toolbar-search-container-disabled`]: disabled,
|
|
81
88
|
[`${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
|
/**
|
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
11
11
|
|
|
12
12
|
var index = require('../../AILabel/index.js');
|
|
13
|
+
var utils = require('../../../internal/utils.js');
|
|
13
14
|
var cells = require('./cells.js');
|
|
14
15
|
|
|
15
16
|
/**
|
|
@@ -64,7 +65,7 @@ const normalize = (rows, headers, prevState = {}) => {
|
|
|
64
65
|
isEditing: false,
|
|
65
66
|
isValid: true,
|
|
66
67
|
errors: null,
|
|
67
|
-
hasAILabelHeader: !!(slug || decorator
|
|
68
|
+
hasAILabelHeader: !!(slug || utils.isComponentElement(decorator, index.AILabel)),
|
|
68
69
|
info: {
|
|
69
70
|
header: key
|
|
70
71
|
}
|
|
@@ -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
|
*/
|
|
@@ -21,7 +21,6 @@ const DataTableSkeleton = ({
|
|
|
21
21
|
rowCount = 5,
|
|
22
22
|
columnCount = 5,
|
|
23
23
|
zebra = false,
|
|
24
|
-
compact = false,
|
|
25
24
|
className,
|
|
26
25
|
showHeader = true,
|
|
27
26
|
showToolbar = true,
|
|
@@ -33,8 +32,7 @@ const DataTableSkeleton = ({
|
|
|
33
32
|
[`${prefix}--skeleton`]: true,
|
|
34
33
|
[`${prefix}--data-table`]: true,
|
|
35
34
|
[`${prefix}--data-table--${size}`]: size,
|
|
36
|
-
[`${prefix}--data-table--zebra`]: zebra
|
|
37
|
-
[`${prefix}--data-table--compact`]: compact
|
|
35
|
+
[`${prefix}--data-table--zebra`]: zebra
|
|
38
36
|
});
|
|
39
37
|
const rowRepeat = rowCount;
|
|
40
38
|
const rows = Array(rowRepeat);
|
|
@@ -80,11 +78,6 @@ DataTableSkeleton.propTypes = {
|
|
|
80
78
|
* Specify the number of columns that you want to render in the skeleton state
|
|
81
79
|
*/
|
|
82
80
|
columnCount: PropTypes.number,
|
|
83
|
-
/**
|
|
84
|
-
* Optionally specify whether you want the Skeleton to be rendered as a
|
|
85
|
-
* compact DataTable
|
|
86
|
-
*/
|
|
87
|
-
compact: PropTypes.bool,
|
|
88
81
|
/**
|
|
89
82
|
* Optionally specify the displayed headers
|
|
90
83
|
*/
|
|
@@ -22,6 +22,7 @@ var rangePlugin = require('./plugins/rangePlugin.js');
|
|
|
22
22
|
var deprecate = require('../../prop-types/deprecate.js');
|
|
23
23
|
var keys = require('../../internal/keyboard/keys.js');
|
|
24
24
|
var match = require('../../internal/keyboard/match.js');
|
|
25
|
+
var utils = require('../../internal/utils.js');
|
|
25
26
|
var usePrefix = require('../../internal/usePrefix.js');
|
|
26
27
|
var useSavedCallback = require('../../internal/useSavedCallback.js');
|
|
27
28
|
require('../FluidForm/FluidForm.js');
|
|
@@ -246,7 +247,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
246
247
|
const childrenWithProps = React.Children.toArray(children).map(
|
|
247
248
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
|
|
248
249
|
(child, index) => {
|
|
249
|
-
if (index === 0 && child
|
|
250
|
+
if (index === 0 && utils.isComponentElement(child, DatePickerInput.default)) {
|
|
250
251
|
return /*#__PURE__*/React.cloneElement(child, {
|
|
251
252
|
datePickerType,
|
|
252
253
|
ref: startInputField,
|
|
@@ -255,7 +256,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
255
256
|
warn: effectiveWarn
|
|
256
257
|
});
|
|
257
258
|
}
|
|
258
|
-
if (index === 1 && child
|
|
259
|
+
if (index === 1 && utils.isComponentElement(child, DatePickerInput.default)) {
|
|
259
260
|
return /*#__PURE__*/React.cloneElement(child, {
|
|
260
261
|
datePickerType,
|
|
261
262
|
ref: endInputField,
|
|
@@ -433,7 +434,10 @@ const DatePicker = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
433
434
|
calendarContainer.classList.add('open');
|
|
434
435
|
const selectedDateElem = calendarContainer.querySelector('.selected') && fpSelectedDateElem;
|
|
435
436
|
const todayDateElem = calendarContainer.querySelector('.today') && fpTodayDateElem;
|
|
436
|
-
|
|
437
|
+
const focusTarget = selectedDateElem || todayDateElem || calendarContainer.querySelector('.flatpickr-day[tabindex]') || calendarContainer;
|
|
438
|
+
if (focusTarget instanceof HTMLElement) {
|
|
439
|
+
focusTarget.focus();
|
|
440
|
+
}
|
|
437
441
|
if (event.target === startInputField.current) {
|
|
438
442
|
lastFocusedField.current = startInputField.current;
|
|
439
443
|
} 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
|
*/
|
|
@@ -208,20 +208,9 @@ DatePickerInput.propTypes = {
|
|
|
208
208
|
*/
|
|
209
209
|
onClick: PropTypes.func,
|
|
210
210
|
/**
|
|
211
|
-
* Provide a regular expression that the input value must match
|
|
211
|
+
* Provide a regular expression pattern string that the input value must match
|
|
212
212
|
*/
|
|
213
|
-
|
|
214
|
-
pattern: (props, propName, componentName) => {
|
|
215
|
-
if (props[propName] === undefined) {
|
|
216
|
-
return;
|
|
217
|
-
}
|
|
218
|
-
try {
|
|
219
|
-
new RegExp(props[propName]);
|
|
220
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20452
|
|
221
|
-
} catch (e) {
|
|
222
|
-
return new Error(`Invalid value of prop '${propName}' supplied to '${componentName}', it should be a valid regular expression`);
|
|
223
|
-
}
|
|
224
|
-
},
|
|
213
|
+
pattern: PropTypes.string,
|
|
225
214
|
/**
|
|
226
215
|
* Specify the placeholder text
|
|
227
216
|
*/
|
|
@@ -61,6 +61,7 @@ function stateReducer(state, actionAndChanges) {
|
|
|
61
61
|
} = actionAndChanges;
|
|
62
62
|
switch (type) {
|
|
63
63
|
case ItemMouseMove:
|
|
64
|
+
return state;
|
|
64
65
|
case MenuMouseLeave:
|
|
65
66
|
if (changes.highlightedIndex === state.highlightedIndex) {
|
|
66
67
|
// Prevent state update if highlightedIndex hasn't changed
|
|
@@ -175,9 +176,7 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
|
|
|
175
176
|
const {
|
|
176
177
|
highlightedIndex
|
|
177
178
|
} = changes;
|
|
178
|
-
if (highlightedIndex !== undefined && highlightedIndex > -1
|
|
179
|
-
// eslint-disable-next-line valid-typeof , no-constant-binary-expression -- https://github.com/carbon-design-system/carbon/issues/20452
|
|
180
|
-
typeof window !== undefined) {
|
|
179
|
+
if (highlightedIndex !== undefined && highlightedIndex > -1) {
|
|
181
180
|
const itemArray = document.querySelectorAll(`li.${prefix}--list-box__menu-item[role="option"]`);
|
|
182
181
|
const highlightedItem = itemArray[highlightedIndex];
|
|
183
182
|
if (highlightedItem) {
|
|
@@ -19,6 +19,7 @@ var events = require('../../tools/events.js');
|
|
|
19
19
|
var keys = require('../../internal/keyboard/keys.js');
|
|
20
20
|
var match = require('../../internal/keyboard/match.js');
|
|
21
21
|
var mergeRefs = require('../../tools/mergeRefs.js');
|
|
22
|
+
var utils = require('../Search/utils.js');
|
|
22
23
|
|
|
23
24
|
const frFn = React.forwardRef;
|
|
24
25
|
const ExpandableSearch = frFn((props, forwardedRef) => {
|
|
@@ -32,7 +33,7 @@ const ExpandableSearch = frFn((props, forwardedRef) => {
|
|
|
32
33
|
...rest
|
|
33
34
|
} = props;
|
|
34
35
|
const [expanded, setExpanded] = React.useState(isExpanded || false);
|
|
35
|
-
const [hasContent, setHasContent] = React.useState(
|
|
36
|
+
const [hasContent, setHasContent] = React.useState(utils.isSearchValuePresent(defaultValue));
|
|
36
37
|
const searchRef = React.useRef(null);
|
|
37
38
|
const prefix = usePrefix.usePrefix();
|
|
38
39
|
function handleBlur(evt) {
|
|
@@ -0,0 +1,17 @@
|
|
|
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
|
+
'use strict';
|
|
9
|
+
|
|
10
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
11
|
+
|
|
12
|
+
var ExpandableSearch = require('./ExpandableSearch.js');
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
exports.ExpandableSearch = ExpandableSearch.default;
|
|
17
|
+
exports.default = ExpandableSearch.default;
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
|
|
8
8
|
'use strict';
|
|
9
9
|
|
|
10
|
-
var
|
|
10
|
+
var featureFlags = require('@carbon/feature-flags');
|
|
11
11
|
var PropTypes = require('prop-types');
|
|
12
12
|
var React = require('react');
|
|
13
13
|
var deprecate = require('../../prop-types/deprecate.js');
|
|
@@ -17,7 +17,7 @@ var deprecate = require('../../prop-types/deprecate.js');
|
|
|
17
17
|
* Our FeatureFlagContext is used alongside the FeatureFlags component to enable
|
|
18
18
|
* or disable feature flags in a given React tree
|
|
19
19
|
*/
|
|
20
|
-
const FeatureFlagContext = /*#__PURE__*/React.createContext(
|
|
20
|
+
const FeatureFlagContext = /*#__PURE__*/React.createContext(featureFlags.FeatureFlags);
|
|
21
21
|
|
|
22
22
|
/**
|
|
23
23
|
* Supports an object of feature flag values with the `flags` prop, merging them
|
|
@@ -54,12 +54,12 @@ function FeatureFlags({
|
|
|
54
54
|
...flags
|
|
55
55
|
};
|
|
56
56
|
const [scope, updateScope] = React.useState(() => {
|
|
57
|
-
const scope =
|
|
57
|
+
const scope = featureFlags.createScope(combinedFlags);
|
|
58
58
|
scope.mergeWithScope(parentScope);
|
|
59
59
|
return scope;
|
|
60
60
|
});
|
|
61
61
|
if (parentScope !== prevParentScope) {
|
|
62
|
-
const scope =
|
|
62
|
+
const scope = featureFlags.createScope(combinedFlags);
|
|
63
63
|
scope.mergeWithScope(parentScope);
|
|
64
64
|
updateScope(scope);
|
|
65
65
|
setPrevParentScope(parentScope);
|
|
@@ -69,7 +69,7 @@ function FeatureFlags({
|
|
|
69
69
|
// for flags that are passed in. If they have changed, then we re-create the
|
|
70
70
|
// FeatureFlagScope using the new flags
|
|
71
71
|
useChangedValue(combinedFlags, isEqual, changedFlags => {
|
|
72
|
-
const scope =
|
|
72
|
+
const scope = featureFlags.createScope(changedFlags);
|
|
73
73
|
scope.mergeWithScope(parentScope);
|
|
74
74
|
updateScope(scope);
|
|
75
75
|
});
|
|
@@ -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
|
/**
|
|
@@ -35,8 +35,7 @@ const FluidTextArea = ({
|
|
|
35
35
|
};
|
|
36
36
|
FluidTextArea.propTypes = {
|
|
37
37
|
/**
|
|
38
|
-
* Provide a custom className that is applied
|
|
39
|
-
* `<textarea>` node
|
|
38
|
+
* Provide a custom className that is applied to the wrapper node
|
|
40
39
|
*/
|
|
41
40
|
className: PropTypes.string,
|
|
42
41
|
/**
|
|
@@ -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
|
*/
|
|
@@ -10,32 +10,13 @@
|
|
|
10
10
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
11
11
|
|
|
12
12
|
var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
|
|
13
|
-
var
|
|
13
|
+
var featureFlags = require('@carbon/feature-flags');
|
|
14
14
|
var cx = require('classnames');
|
|
15
15
|
var PropTypes = require('prop-types');
|
|
16
16
|
var React = require('react');
|
|
17
17
|
var usePrefix = require('../../internal/usePrefix.js');
|
|
18
18
|
var GridContext = require('./GridContext.js');
|
|
19
19
|
|
|
20
|
-
function _interopNamespaceDefault(e) {
|
|
21
|
-
var n = Object.create(null);
|
|
22
|
-
if (e) {
|
|
23
|
-
Object.keys(e).forEach(function (k) {
|
|
24
|
-
if (k !== 'default') {
|
|
25
|
-
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
26
|
-
Object.defineProperty(n, k, d.get ? d : {
|
|
27
|
-
enumerable: true,
|
|
28
|
-
get: function () { return e[k]; }
|
|
29
|
-
});
|
|
30
|
-
}
|
|
31
|
-
});
|
|
32
|
-
}
|
|
33
|
-
n.default = e;
|
|
34
|
-
return Object.freeze(n);
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
var FeatureFlags__namespace = /*#__PURE__*/_interopNamespaceDefault(FeatureFlags);
|
|
38
|
-
|
|
39
20
|
// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20452
|
|
40
21
|
const Column = /*#__PURE__*/React.forwardRef(({
|
|
41
22
|
as,
|
|
@@ -75,7 +56,7 @@ const Column = /*#__PURE__*/React.forwardRef(({
|
|
|
75
56
|
}, rest), children);
|
|
76
57
|
});
|
|
77
58
|
const percentSpanType = PropTypes.oneOf(['25%', '50%', '75%', '100%']);
|
|
78
|
-
const spanPropType =
|
|
59
|
+
const spanPropType = featureFlags.enabled('enable-css-grid') ? PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.shape({
|
|
79
60
|
span: PropTypes.oneOfType([PropTypes.number, percentSpanType]),
|
|
80
61
|
offset: PropTypes.number,
|
|
81
62
|
start: PropTypes.number,
|
|
@@ -40,7 +40,9 @@ function Loading({
|
|
|
40
40
|
className: loadingClassName
|
|
41
41
|
}), /*#__PURE__*/React.createElement("svg", {
|
|
42
42
|
className: `${prefix}--loading__svg`,
|
|
43
|
-
viewBox: "0 0 100 100"
|
|
43
|
+
viewBox: "0 0 100 100",
|
|
44
|
+
role: "img",
|
|
45
|
+
"aria-label": description
|
|
44
46
|
}, /*#__PURE__*/React.createElement("title", null, description), small ? /*#__PURE__*/React.createElement("circle", {
|
|
45
47
|
className: `${prefix}--loading__background`,
|
|
46
48
|
cx: "50%",
|
|
@@ -86,10 +86,14 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu({
|
|
|
86
86
|
}
|
|
87
87
|
function handleOpen() {
|
|
88
88
|
if (menu.current) {
|
|
89
|
-
|
|
89
|
+
const {
|
|
90
|
+
activeElement,
|
|
91
|
+
dir
|
|
92
|
+
} = document;
|
|
93
|
+
focusReturn.current = activeElement instanceof HTMLElement ? activeElement : null;
|
|
90
94
|
if (legacyAutoalign) {
|
|
91
95
|
const pos = calculatePosition();
|
|
92
|
-
if ((
|
|
96
|
+
if ((dir === 'rtl' || direction === 'rtl') && !rest?.id?.includes('MenuButton')) {
|
|
93
97
|
menu.current.style.insetInlineStart = `initial`;
|
|
94
98
|
menu.current.style.insetInlineEnd = `${pos[0]}px`;
|
|
95
99
|
} else {
|
|
@@ -71,7 +71,7 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem({
|
|
|
71
71
|
const context = React.useContext(MenuContext.MenuContext);
|
|
72
72
|
const menuItem = React.useRef(null);
|
|
73
73
|
const ref = useMergedRefs.useMergedRefs([forwardRef, menuItem, refs.setReference]);
|
|
74
|
-
const hasChildren =
|
|
74
|
+
const hasChildren = React.Children.toArray(children).length > 0;
|
|
75
75
|
const isDisabled = disabled && !hasChildren;
|
|
76
76
|
const isDanger = kind === 'danger' && !hasChildren;
|
|
77
77
|
function registerItem() {
|
|
@@ -79,7 +79,7 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem({
|
|
|
79
79
|
type: 'registerItem',
|
|
80
80
|
payload: {
|
|
81
81
|
ref: menuItem,
|
|
82
|
-
disabled:
|
|
82
|
+
disabled: disabled ?? false
|
|
83
83
|
}
|
|
84
84
|
});
|
|
85
85
|
}
|