@carbon/react 1.108.0 → 1.109.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.
@@ -126,12 +126,21 @@ const ComboBox = forwardRef((props, ref) => {
126
126
  const [isFocused, setIsFocused] = useState(false);
127
127
  const prevInputValue = useRef(inputValue);
128
128
  const prevSelectedItemProp = useRef(selectedItemProp);
129
+ const isSyncingControlledSelectionRef = useRef(false);
130
+ const pendingControlledSelectionRef = useRef({
131
+ pending: false,
132
+ value: void 0
133
+ });
129
134
  useEffect(() => {
130
135
  isManualClearingRef.current = isClearing;
131
136
  if (isClearing) setIsClearing(false);
132
137
  }, [isClearing]);
133
138
  useEffect(() => {
134
139
  if (prevSelectedItemProp.current !== selectedItemProp) {
140
+ pendingControlledSelectionRef.current = {
141
+ pending: true,
142
+ value: selectedItemProp
143
+ };
135
144
  const currentInputValue = getInputValue({
136
145
  initialSelectedItem,
137
146
  itemToString,
@@ -346,11 +355,14 @@ const ComboBox = forwardRef((props, ref) => {
346
355
  isItemDisabled: isDisabledItem,
347
356
  ...downshiftProps,
348
357
  onStateChange: ({ type, selectedItem: newSelectedItem }) => {
358
+ if (isManualClearingRef.current || isSyncingControlledSelectionRef.current) {
359
+ isSyncingControlledSelectionRef.current = false;
360
+ return;
361
+ }
349
362
  downshiftProps?.onStateChange?.({
350
363
  type,
351
364
  selectedItem: newSelectedItem
352
365
  });
353
- if (isManualClearingRef.current) return;
354
366
  if ((type === ItemClick || type === FunctionSelectItem || type === InputKeyDownEnter || !allowCustomValue && type === InputBlur) && typeof newSelectedItem !== "undefined" && !isEqual(currentSelectedItem, newSelectedItem)) {
355
367
  if (items.some((item) => isEqual(item, newSelectedItem))) committedCustomValueRef.current = "";
356
368
  onChange({ selectedItem: newSelectedItem });
@@ -358,6 +370,21 @@ const ComboBox = forwardRef((props, ref) => {
358
370
  }
359
371
  });
360
372
  const currentSelectedItem = typeof selectedItemProp !== "undefined" ? selectedItemProp : selectedItem;
373
+ useEffect(() => {
374
+ if (pendingControlledSelectionRef.current.pending) {
375
+ const { value } = pendingControlledSelectionRef.current;
376
+ const nextSelectedItem = typeof value === "undefined" ? null : value;
377
+ pendingControlledSelectionRef.current.pending = false;
378
+ if (!isEqual(selectedItem, nextSelectedItem)) {
379
+ isSyncingControlledSelectionRef.current = true;
380
+ selectItem(nextSelectedItem);
381
+ }
382
+ }
383
+ }, [
384
+ selectedItem,
385
+ selectedItemProp,
386
+ selectItem
387
+ ]);
361
388
  useEffect(() => {
362
389
  if (downshiftActions) downshiftActions.current = {
363
390
  closeMenu,
@@ -69,6 +69,7 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
69
69
  selectedRows: (DataTableRow<ColTypes> & RowType)[];
70
70
  getHeaderProps: (options: {
71
71
  header: DataTableHeader;
72
+ id?: string;
72
73
  isSortable?: boolean;
73
74
  onClick?: (event: MouseEvent<HTMLButtonElement>, sortState: {
74
75
  sortHeaderKey: string;
@@ -76,6 +77,7 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
76
77
  }) => void;
77
78
  [key: string]: unknown;
78
79
  }) => {
80
+ id: string;
79
81
  isSortable: boolean | undefined;
80
82
  isSortHeader: boolean;
81
83
  key: string;
@@ -135,7 +137,7 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
135
137
  getToolbarProps: (options?: {
136
138
  [key: string]: unknown;
137
139
  }) => {
138
- size: 'sm' | undefined;
140
+ size: 'xs' | 'sm' | undefined;
139
141
  [key: string]: unknown;
140
142
  };
141
143
  getBatchActionProps: (options?: {
@@ -163,9 +165,12 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
163
165
  };
164
166
  getCellProps: (options: {
165
167
  cell: DataTableCell<ColTypes>;
168
+ headers?: string;
169
+ [key: string]: unknown;
166
170
  }) => {
167
171
  [key: string]: unknown;
168
172
  hasAILabelHeader?: boolean;
173
+ headers: string;
169
174
  key: string;
170
175
  };
171
176
  /**
@@ -384,7 +389,7 @@ export declare const DataTable: {
384
389
  TableToolbarAction: import("react").ForwardRefExoticComponent<import("./TableToolbarAction").TableToolbarActionProps & import("react").RefAttributes<HTMLDivElement>>;
385
390
  TableToolbarContent: (props: import("react").HTMLAttributes<"div">) => ReactElement;
386
391
  TableToolbarSearch: {
387
- ({ className, searchContainerClass, onChange: onChangeProp, onClear, translateWithId: t, placeholder, labelText, expanded: expandedProp, defaultExpanded, defaultValue, disabled, onExpand, persistent, id, onBlur, onFocus, size, tabIndex, ...rest }: import("./TableToolbarSearch").TableToolbarSearchProps): import("react/jsx-runtime").JSX.Element;
392
+ ({ className, searchContainerClass, onChange: onChangeProp, onClear, translateWithId: t, placeholder, labelText, expanded: expandedProp, defaultExpanded, defaultValue, disabled, onExpand, persistent, id, onBlur, onFocus, size: sizeProp, tabIndex, ...rest }: import("./TableToolbarSearch").TableToolbarSearchProps): import("react/jsx-runtime").JSX.Element;
388
393
  propTypes: {
389
394
  children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
390
395
  className: PropTypes.Requireable<string>;
@@ -408,13 +413,14 @@ export declare const DataTable: {
408
413
  };
409
414
  };
410
415
  TableToolbarMenu: {
411
- ({ className, renderIcon, iconDescription, children, menuOptionsClass, ...rest }: import("./TableToolbarMenu").TableToolbarMenuProps): import("react/jsx-runtime").JSX.Element;
416
+ ({ className, renderIcon, iconDescription, children, menuOptionsClass, size: sizeProp, ...rest }: import("./TableToolbarMenu").TableToolbarMenuProps): import("react/jsx-runtime").JSX.Element;
412
417
  propTypes: {
413
418
  children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
414
419
  className: PropTypes.Requireable<string>;
415
420
  iconDescription: PropTypes.Requireable<string>;
416
421
  menuOptionsClass: PropTypes.Requireable<string>;
417
422
  renderIcon: PropTypes.Requireable<object>;
423
+ size: PropTypes.Requireable<string>;
418
424
  };
419
425
  };
420
426
  propTypes: {
@@ -103,8 +103,10 @@ const DataTable = (props) => {
103
103
  const getHeaderProps = ({ header, onClick, isSortable: headerIsSortable, ...rest }) => {
104
104
  const { sortDirection, sortHeaderKey } = state;
105
105
  const { key, slug, decorator } = header;
106
+ const id = typeof rest.id === "string" && rest.id.length ? rest.id : getHeaderId(key);
106
107
  return {
107
108
  ...rest,
109
+ id,
108
110
  key,
109
111
  sortDirection,
110
112
  isSortable: headerIsSortable ?? header.isSortable ?? isSortable,
@@ -204,13 +206,10 @@ const DataTable = (props) => {
204
206
  onSelect: composeEventHandlers([handleSelectAll, onClick])
205
207
  };
206
208
  };
207
- const getToolbarProps = (props) => {
208
- const isSmall = size === "xs" || size === "sm";
209
- return {
210
- ...props,
211
- size: isSmall ? "sm" : void 0
212
- };
213
- };
209
+ const getToolbarProps = (props) => ({
210
+ ...props,
211
+ size: size === "xs" || size === "sm" ? size : void 0
212
+ });
214
213
  const getBatchActionProps = (props) => {
215
214
  const { shouldShowBatchActions } = state;
216
215
  const selectedRowCount = selectedRows.length;
@@ -240,10 +239,12 @@ const DataTable = (props) => {
240
239
  useStaticWidth
241
240
  };
242
241
  };
243
- const getCellProps = ({ cell: { hasAILabelHeader, id }, ...rest }) => {
242
+ const getCellProps = ({ cell: { hasAILabelHeader, id, info: { header } }, headers: customHeaders, ...rest }) => {
243
+ const headers = typeof customHeaders === "string" && customHeaders.length ? customHeaders : getHeaderId(header);
244
244
  return {
245
245
  ...rest,
246
246
  hasAILabelHeader,
247
+ headers,
247
248
  key: id
248
249
  };
249
250
  };
@@ -265,6 +266,7 @@ const DataTable = (props) => {
265
266
  * Generates a prefix for table related IDs.
266
267
  */
267
268
  const getTablePrefix = () => `data-table-${instanceId}`;
269
+ const getHeaderId = (headerKey) => `${getTablePrefix()}__header-${headerKey}`;
268
270
  /**
269
271
  * Generates a new `rowsById` object with updated selection state.
270
272
  */
@@ -1,11 +1,17 @@
1
1
  /**
2
- * Copyright IBM Corp. 2016, 2025
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.
6
6
  */
7
7
  import PropTypes from 'prop-types';
8
8
  import React from 'react';
9
+ export declare const TableToolbarContext: React.Context<{
10
+ size?: "xs" | "sm" | "lg";
11
+ }>;
12
+ export declare const useTableToolbar: () => {
13
+ size?: "xs" | "sm" | "lg";
14
+ };
9
15
  export interface TableToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
10
16
  /**
11
17
  * Specify a label to be read by screen readers on the container node
@@ -24,7 +30,7 @@ export interface TableToolbarProps extends React.HTMLAttributes<HTMLDivElement>
24
30
  /**
25
31
  * `lg` Change the row height of table
26
32
  */
27
- size?: 'sm' | 'lg';
33
+ size?: 'xs' | 'sm' | 'lg';
28
34
  }
29
35
  declare const TableToolbar: {
30
36
  ({ ["aria-label"]: ariaLabel, ariaLabel: deprecatedAriaLabel, children, size, ...rest }: TableToolbarProps): import("react/jsx-runtime").JSX.Element;
@@ -8,35 +8,45 @@
8
8
  import { usePrefix } from "../../internal/usePrefix.js";
9
9
  import { deprecate } from "../../prop-types/deprecate.js";
10
10
  import classNames from "classnames";
11
- import "react";
11
+ import { createContext, useContext } from "react";
12
12
  import PropTypes from "prop-types";
13
13
  import { jsx } from "react/jsx-runtime";
14
14
  //#region src/components/DataTable/TableToolbar.tsx
15
15
  /**
16
- * Copyright IBM Corp. 2016, 2025
16
+ * Copyright IBM Corp. 2016, 2026
17
17
  *
18
18
  * This source code is licensed under the Apache-2.0 license found in the
19
19
  * LICENSE file in the root directory of this source tree.
20
20
  */
21
+ const TableToolbarContext = createContext({});
22
+ const useTableToolbar = () => useContext(TableToolbarContext);
21
23
  const TableToolbar = ({ ["aria-label"]: ariaLabel = "data table toolbar", ariaLabel: deprecatedAriaLabel, children, size, ...rest }) => {
22
24
  const prefix = usePrefix();
23
25
  const className = classNames({
24
26
  [`${prefix}--table-toolbar`]: true,
25
- [`${prefix}--table-toolbar--${size}`]: size
27
+ [`${prefix}--table-toolbar--${size}`]: size,
28
+ [`${prefix}--layout--size-${size}`]: size
26
29
  });
27
- return /* @__PURE__ */ jsx("section", {
28
- role: "group",
29
- "aria-label": deprecatedAriaLabel || ariaLabel,
30
- ...rest,
31
- className,
32
- children
30
+ return /* @__PURE__ */ jsx(TableToolbarContext.Provider, {
31
+ value: { size },
32
+ children: /* @__PURE__ */ jsx("section", {
33
+ role: "group",
34
+ "aria-label": deprecatedAriaLabel || ariaLabel,
35
+ ...rest,
36
+ className,
37
+ children
38
+ })
33
39
  });
34
40
  };
35
41
  TableToolbar.propTypes = {
36
42
  ["aria-label"]: PropTypes.string,
37
43
  ariaLabel: deprecate(PropTypes.string, "This prop syntax has been deprecated. Please use the new `aria-label`."),
38
44
  children: PropTypes.node,
39
- size: PropTypes.oneOf(["sm", "lg"])
45
+ size: PropTypes.oneOf([
46
+ "xs",
47
+ "sm",
48
+ "lg"
49
+ ])
40
50
  };
41
51
  //#endregion
42
- export { TableToolbar as default };
52
+ export { TableToolbar as default, useTableToolbar };
@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
8
8
  import { OverflowMenuProps } from '../OverflowMenu';
9
9
  export type TableToolbarMenuProps = OverflowMenuProps;
10
10
  declare const TableToolbarMenu: {
11
- ({ className, renderIcon, iconDescription, children, menuOptionsClass, ...rest }: TableToolbarMenuProps): import("react/jsx-runtime").JSX.Element;
11
+ ({ className, renderIcon, iconDescription, children, menuOptionsClass, size: sizeProp, ...rest }: TableToolbarMenuProps): import("react/jsx-runtime").JSX.Element;
12
12
  propTypes: {
13
13
  children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
14
14
  /**
@@ -27,6 +27,10 @@ declare const TableToolbarMenu: {
27
27
  * A component used to render an icon.
28
28
  */
29
29
  renderIcon: PropTypes.Requireable<object>;
30
+ /**
31
+ * Specify the size of the ToolbarMenu.
32
+ */
33
+ size: PropTypes.Requireable<string>;
30
34
  };
31
35
  };
32
36
  export default TableToolbarMenu;
@@ -6,6 +6,7 @@
6
6
  */
7
7
 
8
8
  import { usePrefix } from "../../internal/usePrefix.js";
9
+ import { useTableToolbar } from "./TableToolbar.js";
9
10
  import OverflowMenu from "../OverflowMenu/index.js";
10
11
  import classNames from "classnames";
11
12
  import "react";
@@ -20,13 +21,16 @@ import { Settings } from "@carbon/icons-react";
20
21
  * LICENSE file in the root directory of this source tree.
21
22
  */
22
23
  const defaultIconDescription = "Settings";
23
- const TableToolbarMenu = ({ className, renderIcon = Settings, iconDescription = defaultIconDescription, children, menuOptionsClass, ...rest }) => {
24
+ const TableToolbarMenu = ({ className, renderIcon = Settings, iconDescription = defaultIconDescription, children, menuOptionsClass, size: sizeProp, ...rest }) => {
25
+ const toolbarContext = useTableToolbar();
26
+ const size = sizeProp ?? toolbarContext.size;
24
27
  const prefix = usePrefix();
25
28
  return /* @__PURE__ */ jsx(OverflowMenu, {
26
29
  renderIcon,
27
30
  className: classNames(className, `${prefix}--toolbar-action ${prefix}--overflow-menu`),
28
31
  iconDescription,
29
32
  menuOptionsClass: classNames(menuOptionsClass, `${prefix}--toolbar-action__menu`),
33
+ size,
30
34
  flipped: true,
31
35
  ...rest,
32
36
  children
@@ -37,7 +41,13 @@ TableToolbarMenu.propTypes = {
37
41
  className: PropTypes.string,
38
42
  iconDescription: PropTypes.string,
39
43
  menuOptionsClass: PropTypes.string,
40
- renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
44
+ renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
45
+ size: PropTypes.oneOf([
46
+ "xs",
47
+ "sm",
48
+ "md",
49
+ "lg"
50
+ ])
41
51
  };
42
52
  //#endregion
43
53
  export { TableToolbarMenu as default };
@@ -13,7 +13,7 @@ declare const translationIds: {
13
13
  readonly 'carbon.table.toolbar.search.placeholder': "carbon.table.toolbar.search.placeholder";
14
14
  };
15
15
  type TranslationKey = keyof typeof translationIds;
16
- type ExcludedInheritedProps = 'defaultValue' | 'labelText' | 'onBlur' | 'onChange' | 'onExpand' | 'onFocus' | 'tabIndex' | 'size';
16
+ type ExcludedInheritedProps = 'defaultValue' | 'labelText' | 'onBlur' | 'onChange' | 'onExpand' | 'onFocus' | 'tabIndex';
17
17
  export type TableToolbarSearchHandleExpand = (event: FocusEvent<HTMLInputElement>, newValue?: boolean) => void;
18
18
  /**
19
19
  * @deprecated Passing `''` as the event sentinel is legacy compatibility
@@ -69,14 +69,10 @@ export interface TableToolbarSearchProps extends Omit<SearchProps, ExcludedInher
69
69
  * Provide an optional className for the overall container of the Search
70
70
  */
71
71
  searchContainerClass?: string;
72
- /**
73
- * Specify the size of the Search
74
- */
75
- size?: 'sm' | 'md' | 'lg';
76
72
  tabIndex?: number | string;
77
73
  }
78
74
  declare const TableToolbarSearch: {
79
- ({ className, searchContainerClass, onChange: onChangeProp, onClear, translateWithId: t, placeholder, labelText, expanded: expandedProp, defaultExpanded, defaultValue, disabled, onExpand, persistent, id, onBlur, onFocus, size, tabIndex, ...rest }: TableToolbarSearchProps): import("react/jsx-runtime").JSX.Element;
75
+ ({ className, searchContainerClass, onChange: onChangeProp, onClear, translateWithId: t, placeholder, labelText, expanded: expandedProp, defaultExpanded, defaultValue, disabled, onExpand, persistent, id, onBlur, onFocus, size: sizeProp, tabIndex, ...rest }: TableToolbarSearchProps): import("react/jsx-runtime").JSX.Element;
80
76
  propTypes: {
81
77
  children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
82
78
  /**
@@ -9,6 +9,7 @@ import { usePrefix } from "../../internal/usePrefix.js";
9
9
  import { useId } from "../../internal/useId.js";
10
10
  import { noopFn } from "../../internal/noopFn.js";
11
11
  import Search_default from "../Search/index.js";
12
+ import { useTableToolbar } from "./TableToolbar.js";
12
13
  import classNames from "classnames";
13
14
  import { useEffect, useRef, useState } from "react";
14
15
  import PropTypes from "prop-types";
@@ -31,7 +32,9 @@ const defaultTranslations = {
31
32
  const defaultTranslateWithId = (messageId) => {
32
33
  return defaultTranslations[messageId];
33
34
  };
34
- const TableToolbarSearch = ({ className, searchContainerClass, onChange: onChangeProp, onClear = noopFn, translateWithId: t = defaultTranslateWithId, placeholder, labelText, expanded: expandedProp, defaultExpanded, defaultValue, disabled, onExpand, persistent = false, id, onBlur, onFocus, size = "lg", tabIndex = "0", ...rest }) => {
35
+ const TableToolbarSearch = ({ className, searchContainerClass, onChange: onChangeProp, onClear = noopFn, translateWithId: t = defaultTranslateWithId, placeholder, labelText, expanded: expandedProp, defaultExpanded, defaultValue, disabled, onExpand, persistent = false, id, onBlur, onFocus, size: sizeProp, tabIndex = "0", ...rest }) => {
36
+ const toolbarContext = useTableToolbar();
37
+ const size = sizeProp ?? toolbarContext.size;
35
38
  const { current: controlled } = useRef(expandedProp !== void 0);
36
39
  const [expandedState, setExpandedState] = useState(Boolean(defaultExpanded || defaultValue));
37
40
  const expanded = controlled ? expandedProp : expandedState;
@@ -100,6 +103,7 @@ TableToolbarSearch.propTypes = {
100
103
  placeholder: PropTypes.string,
101
104
  searchContainerClass: PropTypes.string,
102
105
  size: PropTypes.oneOf([
106
+ "xs",
103
107
  "sm",
104
108
  "md",
105
109
  "lg"
@@ -33,7 +33,7 @@ import { isTopmostVisibleModal } from "./isTopmostVisibleModal.js";
33
33
  import { usePreviousValue } from "../../internal/usePreviousValue.js";
34
34
  import { ModalPresence, ModalPresenceContext, useExclusiveModalPresenceContext } from "./ModalPresence.js";
35
35
  import classNames from "classnames";
36
- import React, { cloneElement, useCallback, useContext, useEffect, useRef } from "react";
36
+ import React, { cloneElement, useCallback, useContext, useEffect, useRef, useState } from "react";
37
37
  import PropTypes from "prop-types";
38
38
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
39
39
  import { Close } from "@carbon/icons-react";
@@ -167,11 +167,18 @@ const ModalDialog = React.forwardRef(function ModalDialog({ "aria-label": ariaLa
167
167
  [`${prefix}--modal-container--${size}`]: size,
168
168
  [`${prefix}--modal-container--full-width`]: isFullWidth
169
169
  });
170
- /**
171
- * isScrollable is implicitly dependent on height, when height gets updated
172
- * via `useResizeObserver`, clientHeight and scrollHeight get updated too
173
- */
174
- const isScrollable = !!contentRef.current && contentRef?.current?.scrollHeight > contentRef?.current?.clientHeight;
170
+ const currentScrollHeight = contentRef.current?.scrollHeight || 0;
171
+ const currentClientHeight = contentRef.current?.clientHeight || 0;
172
+ const [isScrollable, setIsScrollable] = useState(currentScrollHeight > currentClientHeight);
173
+ useEffect(() => {
174
+ if (!contentRef.current) {
175
+ setIsScrollable(false);
176
+ return;
177
+ }
178
+ const diff = contentRef.current.scrollHeight - contentRef.current.clientHeight;
179
+ if (diff > 5) setIsScrollable(true);
180
+ else if (diff < -5) setIsScrollable(false);
181
+ }, [currentScrollHeight, currentClientHeight]);
175
182
  const contentClasses = classNames(`${prefix}--modal-content`, {
176
183
  [`${prefix}--modal-scroll-content`]: hasScrollingContent || isScrollable,
177
184
  [`${prefix}--modal-scroll-content--no-fade`]: height <= 300
package/es/index.d.ts CHANGED
@@ -46,6 +46,7 @@ export * from './components/FormLabel';
46
46
  export * from './components/Grid';
47
47
  export * from './components/Icon/Icon.Skeleton';
48
48
  export * from './components/IdPrefix';
49
+ export { InlineCheckbox } from './components/InlineCheckbox';
49
50
  export * from './components/InlineLoading';
50
51
  export * from './components/Link';
51
52
  export * from './components/ListItem';
package/es/index.js CHANGED
@@ -82,6 +82,7 @@ import TableExpandedRow from "./components/DataTable/TableExpandedRow.js";
82
82
  import TableHead from "./components/DataTable/TableHead.js";
83
83
  import TableHeader from "./components/DataTable/TableHeader.js";
84
84
  import TableRow from "./components/DataTable/TableRow.js";
85
+ import InlineCheckbox from "./components/InlineCheckbox/InlineCheckbox.js";
85
86
  import TableSelectAll from "./components/DataTable/TableSelectAll.js";
86
87
  import RadioButton from "./components/RadioButton/RadioButton.js";
87
88
  import TableSelectRow from "./components/DataTable/TableSelectRow.js";
@@ -249,4 +250,4 @@ import { GlobalTheme, Theme, ThemeContext, usePrefersDarkScheme, useTheme } from
249
250
  * LICENSE file in the root directory of this source tree.
250
251
  */
251
252
  //#endregion
252
- export { AILabel, AILabelActions, AILabelContent, AISkeletonIcon, AISkeletonPlaceholder, AISkeletonText, Accordion, AccordionItem, AccordionSkeleton, ActionableNotification, AspectRatio, Breadcrumb, BreadcrumbItem, BreadcrumbSkeleton, Button, ButtonKinds, ButtonSet, ButtonSizes, ButtonSkeleton, ButtonTooltipAlignments, ButtonTooltipPositions, Callout, Checkbox, CheckboxGroup, CheckboxSkeleton, ClassPrefix, ClickableTile, CodeSnippet, CodeSnippetSkeleton, Column, ColumnHangComponent as ColumnHang, ComboBox, ComboButton, ComposedModal, ComposedModalPresence, ContainedList, ContainedListItem_default as ContainedListItem, Content, ContentSwitcher, ControlledPasswordInput, Copy, CopyButton, DangerButton, DataTable, DataTableSkeleton, DatePicker, DatePickerInput, DatePickerSkeleton, DefinitionTooltip, DismissibleTag, Dropdown, DropdownSkeleton, ErrorBoundary, ErrorBoundaryContext, ExpandableSearch, ExpandableTile, FeatureFlags, FileUploader, FileUploaderButton, FileUploaderDropContainer, FileUploaderItem, FileUploaderSkeleton, Filename, FilterableMultiSelect, FlexGridComponent as FlexGrid, FluidComboBox, FluidComboBoxSkeleton, FluidDatePicker, FluidDatePickerInput, FluidDatePickerSkeleton, FluidDropdown, FluidDropdownSkeleton, FluidForm, FluidMultiSelect, FluidMultiSelectSkeleton, FluidNumberInput, FluidNumberInputSkeleton, FluidPasswordInput, FluidSearch, FluidSearchSkeleton, FluidSelect, FluidSelectSkeleton, FluidTextArea, FluidTextAreaSkeleton, FluidTextInput, FluidTextInputSkeleton, FluidTimePicker, FluidTimePickerSelect, FluidTimePickerSkeleton, Form, FormContext, FormGroup, FormItem, FormLabel, GlobalTheme, GridAsGridComponent as Grid, GridSettings, HStack, Header, HeaderContainer, HeaderGlobalAction, HeaderGlobalBar, HeaderMenu, HeaderMenuButton, HeaderMenuItem, HeaderName, HeaderNavigation, HeaderPanel, HeaderSideNavItems, Heading, IconButton, IconButtonKinds, IconSkeleton, IconSwitch, IconTab, IdPrefix, InlineLoading, InlineNotification, Layer, Link, ListItem, Loading, Menu, MenuButton, MenuItem, MenuItemDivider, MenuItemGroup, MenuItemRadioGroup, MenuItemSelectable, Modal, ModalBody, ModalFooter, ModalHeader, ModalPresence, ModalWrapper, MultiSelect, NotificationActionButton, NotificationButton, NumberInput, NumberInputSkeleton, OperationalTag, OrderedList, OverflowMenu, OverflowMenuItem, Pagination, PaginationNav, PaginationSkeleton, PasswordInput, Popover, PopoverContent, PrefixContext, PrimaryButton, ProgressBar, ProgressIndicator, ProgressIndicatorSkeleton, ProgressStep, RadioButton, RadioButtonGroup, RadioButtonSkeleton, RadioTile, Row, Search, SearchSkeleton, SecondaryButton, Section, Select, SelectItem, SelectItemGroup, SelectSkeleton, SelectableTag, SelectableTile, SideNav, SideNavDetails, SideNavDivider, SideNavFooter, SideNavHeader, SideNavIcon, SideNavItem, SideNavItems, SideNavLink, SideNavLinkText, SideNavMenu, SideNavMenuItem, SideNavSwitcher, SkeletonIcon, SkeletonPlaceholder, SkeletonText, SkipToContent, Slider, SliderSkeleton, Stack, StaticNotification, StructuredListBody, StructuredListCell, StructuredListHead, StructuredListInput, StructuredListRow, StructuredListSkeleton, StructuredListWrapper, Switch, Switcher, SwitcherDivider, SwitcherItem, Tab, TabContent, TabList, TabListVertical, TabPanel, TabPanels, Table, TableActionList, TableBatchAction, TableBatchActions, TableBody, TableCell, TableContainer, TableDecoratorRow, TableExpandHeader, TableExpandRow, TableExpandedRow, TableHead, TableHeader, TableRow, TableSelectAll, TableSelectRow, TableSlugRow, TableToolbar, TableToolbarAction, TableToolbarContent, TableToolbarMenu, TableToolbarSearch, Tabs, TabsSkeleton, TabsVertical, Tag, TagSkeleton, TextArea, TextAreaSkeleton, TextInput, TextInputSkeleton, Theme, ThemeContext, Tile, TileAboveTheFoldContent, TileBelowTheFoldContent, TileGroup, TimePicker, TimePickerSelect, ToastNotification, Toggle, ToggleSkeleton, ToggleSmallSkeleton, Toggletip, ToggletipActions, ToggletipButton, ToggletipContent, ToggletipLabel, Tooltip, TreeNode, TreeView, UnorderedList, VStack, FeatureFlags as preview_FeatureFlags, Layout as preview_Layout, LayoutDirection as preview_LayoutDirection, OverflowMenuV2 as preview_OverflowMenuV2, PageSelector as preview_PageSelector, Pagination$1 as preview_Pagination, Text as preview_Text, TextDirection as preview_TextDirection, AISkeletonIcon as preview__AiSkeletonIcon, AISkeletonPlaceholder as preview__AiSkeletonPlaceholder, AISkeletonText as preview__AiSkeletonText, ChatButton as preview__ChatButton, ChatButtonSkeleton as preview__ChatButtonSkeleton, Dialog_exports as preview__Dialog, FluidComboBox as preview__FluidComboBox, FluidComboBoxSkeleton as preview__FluidComboBoxSkeleton, FluidDatePicker as preview__FluidDatePicker, FluidDatePickerInput as preview__FluidDatePickerInput, FluidDatePickerSkeleton as preview__FluidDatePickerSkeleton, FluidDropdown as preview__FluidDropdown, FluidDropdownSkeleton as preview__FluidDropdownSkeleton, FluidMultiSelect as preview__FluidMultiSelect, FluidMultiSelectSkeleton as preview__FluidMultiSelectSkeleton, FluidNumberInput as preview__FluidNumberInput, FluidNumberInputSkeleton as preview__FluidNumberInputSkeleton, FluidSearch as preview__FluidSearch, FluidSearchSkeleton as preview__FluidSearchSkeleton, FluidSelect as preview__FluidSelect, FluidSelectSkeleton as preview__FluidSelectSkeleton, FluidTextArea as preview__FluidTextArea, FluidTextAreaSkeleton as preview__FluidTextAreaSkeleton, FluidTextInput as preview__FluidTextInput, FluidTextInputSkeleton as preview__FluidTextInputSkeleton, FluidTimePicker as preview__FluidTimePicker, FluidTimePickerSelect as preview__FluidTimePickerSelect, FluidTimePickerSkeleton as preview__FluidTimePickerSkeleton, IconIndicator as preview__IconIndicator, PageHeader_exports as preview__PageHeader, ShapeIndicator as preview__ShapeIndicator, AILabel as preview__Slug, AILabelActions as preview__SlugActions, AILabelContent as preview__SlugContent, useFeatureFlag as preview_useFeatureFlag, useFeatureFlags as preview_useFeatureFlags, useLayoutDirection as preview_useLayoutDirection, FeatureFlags as unstable_FeatureFlags, Layout as unstable_Layout, LayoutDirection as unstable_LayoutDirection, OverflowMenuV2 as unstable_OverflowMenuV2, PageSelector as unstable_PageSelector, Pagination$1 as unstable_Pagination, Text as unstable_Text, TextDirection as unstable_TextDirection, AISkeletonIcon as unstable__AiSkeletonIcon, AISkeletonPlaceholder as unstable__AiSkeletonPlaceholder, AISkeletonText as unstable__AiSkeletonText, ChatButton as unstable__ChatButton, ChatButtonSkeleton as unstable__ChatButtonSkeleton, FluidComboBox as unstable__FluidComboBox, FluidComboBoxSkeleton as unstable__FluidComboBoxSkeleton, FluidDatePicker as unstable__FluidDatePicker, FluidDatePickerInput as unstable__FluidDatePickerInput, FluidDatePickerSkeleton as unstable__FluidDatePickerSkeleton, FluidDropdown as unstable__FluidDropdown, FluidDropdownSkeleton as unstable__FluidDropdownSkeleton, FluidMultiSelect as unstable__FluidMultiSelect, FluidMultiSelectSkeleton as unstable__FluidMultiSelectSkeleton, FluidNumberInput as unstable__FluidNumberInput, FluidNumberInputSkeleton as unstable__FluidNumberInputSkeleton, FluidSearch as unstable__FluidSearch, FluidSearchSkeleton as unstable__FluidSearchSkeleton, FluidSelect as unstable__FluidSelect, FluidSelectSkeleton as unstable__FluidSelectSkeleton, FluidTextArea as unstable__FluidTextArea, FluidTextAreaSkeleton as unstable__FluidTextAreaSkeleton, FluidTextInput as unstable__FluidTextInput, FluidTextInputSkeleton as unstable__FluidTextInputSkeleton, FluidTimePicker as unstable__FluidTimePicker, FluidTimePickerSelect as unstable__FluidTimePickerSelect, FluidTimePickerSkeleton as unstable__FluidTimePickerSkeleton, IconIndicator as unstable__IconIndicator, PageHeader_exports as unstable__PageHeader, ShapeIndicator as unstable__ShapeIndicator, AILabel as unstable__Slug, AILabelActions as unstable__SlugActions, AILabelContent as unstable__SlugContent, useFeatureFlag as unstable_useFeatureFlag, useFeatureFlags as unstable_useFeatureFlags, useLayoutDirection as unstable_useLayoutDirection, useContextMenu, useFeatureFlag, useFeatureFlags, useIdPrefix, useLayer, usePrefersDarkScheme, usePrefix, useTheme, validateNumberSeparators, withComposedModalPresence, withModalPresence };
253
+ export { AILabel, AILabelActions, AILabelContent, AISkeletonIcon, AISkeletonPlaceholder, AISkeletonText, Accordion, AccordionItem, AccordionSkeleton, ActionableNotification, AspectRatio, Breadcrumb, BreadcrumbItem, BreadcrumbSkeleton, Button, ButtonKinds, ButtonSet, ButtonSizes, ButtonSkeleton, ButtonTooltipAlignments, ButtonTooltipPositions, Callout, Checkbox, CheckboxGroup, CheckboxSkeleton, ClassPrefix, ClickableTile, CodeSnippet, CodeSnippetSkeleton, Column, ColumnHangComponent as ColumnHang, ComboBox, ComboButton, ComposedModal, ComposedModalPresence, ContainedList, ContainedListItem_default as ContainedListItem, Content, ContentSwitcher, ControlledPasswordInput, Copy, CopyButton, DangerButton, DataTable, DataTableSkeleton, DatePicker, DatePickerInput, DatePickerSkeleton, DefinitionTooltip, DismissibleTag, Dropdown, DropdownSkeleton, ErrorBoundary, ErrorBoundaryContext, ExpandableSearch, ExpandableTile, FeatureFlags, FileUploader, FileUploaderButton, FileUploaderDropContainer, FileUploaderItem, FileUploaderSkeleton, Filename, FilterableMultiSelect, FlexGridComponent as FlexGrid, FluidComboBox, FluidComboBoxSkeleton, FluidDatePicker, FluidDatePickerInput, FluidDatePickerSkeleton, FluidDropdown, FluidDropdownSkeleton, FluidForm, FluidMultiSelect, FluidMultiSelectSkeleton, FluidNumberInput, FluidNumberInputSkeleton, FluidPasswordInput, FluidSearch, FluidSearchSkeleton, FluidSelect, FluidSelectSkeleton, FluidTextArea, FluidTextAreaSkeleton, FluidTextInput, FluidTextInputSkeleton, FluidTimePicker, FluidTimePickerSelect, FluidTimePickerSkeleton, Form, FormContext, FormGroup, FormItem, FormLabel, GlobalTheme, GridAsGridComponent as Grid, GridSettings, HStack, Header, HeaderContainer, HeaderGlobalAction, HeaderGlobalBar, HeaderMenu, HeaderMenuButton, HeaderMenuItem, HeaderName, HeaderNavigation, HeaderPanel, HeaderSideNavItems, Heading, IconButton, IconButtonKinds, IconSkeleton, IconSwitch, IconTab, IdPrefix, InlineCheckbox, InlineLoading, InlineNotification, Layer, Link, ListItem, Loading, Menu, MenuButton, MenuItem, MenuItemDivider, MenuItemGroup, MenuItemRadioGroup, MenuItemSelectable, Modal, ModalBody, ModalFooter, ModalHeader, ModalPresence, ModalWrapper, MultiSelect, NotificationActionButton, NotificationButton, NumberInput, NumberInputSkeleton, OperationalTag, OrderedList, OverflowMenu, OverflowMenuItem, Pagination, PaginationNav, PaginationSkeleton, PasswordInput, Popover, PopoverContent, PrefixContext, PrimaryButton, ProgressBar, ProgressIndicator, ProgressIndicatorSkeleton, ProgressStep, RadioButton, RadioButtonGroup, RadioButtonSkeleton, RadioTile, Row, Search, SearchSkeleton, SecondaryButton, Section, Select, SelectItem, SelectItemGroup, SelectSkeleton, SelectableTag, SelectableTile, SideNav, SideNavDetails, SideNavDivider, SideNavFooter, SideNavHeader, SideNavIcon, SideNavItem, SideNavItems, SideNavLink, SideNavLinkText, SideNavMenu, SideNavMenuItem, SideNavSwitcher, SkeletonIcon, SkeletonPlaceholder, SkeletonText, SkipToContent, Slider, SliderSkeleton, Stack, StaticNotification, StructuredListBody, StructuredListCell, StructuredListHead, StructuredListInput, StructuredListRow, StructuredListSkeleton, StructuredListWrapper, Switch, Switcher, SwitcherDivider, SwitcherItem, Tab, TabContent, TabList, TabListVertical, TabPanel, TabPanels, Table, TableActionList, TableBatchAction, TableBatchActions, TableBody, TableCell, TableContainer, TableDecoratorRow, TableExpandHeader, TableExpandRow, TableExpandedRow, TableHead, TableHeader, TableRow, TableSelectAll, TableSelectRow, TableSlugRow, TableToolbar, TableToolbarAction, TableToolbarContent, TableToolbarMenu, TableToolbarSearch, Tabs, TabsSkeleton, TabsVertical, Tag, TagSkeleton, TextArea, TextAreaSkeleton, TextInput, TextInputSkeleton, Theme, ThemeContext, Tile, TileAboveTheFoldContent, TileBelowTheFoldContent, TileGroup, TimePicker, TimePickerSelect, ToastNotification, Toggle, ToggleSkeleton, ToggleSmallSkeleton, Toggletip, ToggletipActions, ToggletipButton, ToggletipContent, ToggletipLabel, Tooltip, TreeNode, TreeView, UnorderedList, VStack, FeatureFlags as preview_FeatureFlags, Layout as preview_Layout, LayoutDirection as preview_LayoutDirection, OverflowMenuV2 as preview_OverflowMenuV2, PageSelector as preview_PageSelector, Pagination$1 as preview_Pagination, Text as preview_Text, TextDirection as preview_TextDirection, AISkeletonIcon as preview__AiSkeletonIcon, AISkeletonPlaceholder as preview__AiSkeletonPlaceholder, AISkeletonText as preview__AiSkeletonText, ChatButton as preview__ChatButton, ChatButtonSkeleton as preview__ChatButtonSkeleton, Dialog_exports as preview__Dialog, FluidComboBox as preview__FluidComboBox, FluidComboBoxSkeleton as preview__FluidComboBoxSkeleton, FluidDatePicker as preview__FluidDatePicker, FluidDatePickerInput as preview__FluidDatePickerInput, FluidDatePickerSkeleton as preview__FluidDatePickerSkeleton, FluidDropdown as preview__FluidDropdown, FluidDropdownSkeleton as preview__FluidDropdownSkeleton, FluidMultiSelect as preview__FluidMultiSelect, FluidMultiSelectSkeleton as preview__FluidMultiSelectSkeleton, FluidNumberInput as preview__FluidNumberInput, FluidNumberInputSkeleton as preview__FluidNumberInputSkeleton, FluidSearch as preview__FluidSearch, FluidSearchSkeleton as preview__FluidSearchSkeleton, FluidSelect as preview__FluidSelect, FluidSelectSkeleton as preview__FluidSelectSkeleton, FluidTextArea as preview__FluidTextArea, FluidTextAreaSkeleton as preview__FluidTextAreaSkeleton, FluidTextInput as preview__FluidTextInput, FluidTextInputSkeleton as preview__FluidTextInputSkeleton, FluidTimePicker as preview__FluidTimePicker, FluidTimePickerSelect as preview__FluidTimePickerSelect, FluidTimePickerSkeleton as preview__FluidTimePickerSkeleton, IconIndicator as preview__IconIndicator, PageHeader_exports as preview__PageHeader, ShapeIndicator as preview__ShapeIndicator, AILabel as preview__Slug, AILabelActions as preview__SlugActions, AILabelContent as preview__SlugContent, useFeatureFlag as preview_useFeatureFlag, useFeatureFlags as preview_useFeatureFlags, useLayoutDirection as preview_useLayoutDirection, FeatureFlags as unstable_FeatureFlags, Layout as unstable_Layout, LayoutDirection as unstable_LayoutDirection, OverflowMenuV2 as unstable_OverflowMenuV2, PageSelector as unstable_PageSelector, Pagination$1 as unstable_Pagination, Text as unstable_Text, TextDirection as unstable_TextDirection, AISkeletonIcon as unstable__AiSkeletonIcon, AISkeletonPlaceholder as unstable__AiSkeletonPlaceholder, AISkeletonText as unstable__AiSkeletonText, ChatButton as unstable__ChatButton, ChatButtonSkeleton as unstable__ChatButtonSkeleton, FluidComboBox as unstable__FluidComboBox, FluidComboBoxSkeleton as unstable__FluidComboBoxSkeleton, FluidDatePicker as unstable__FluidDatePicker, FluidDatePickerInput as unstable__FluidDatePickerInput, FluidDatePickerSkeleton as unstable__FluidDatePickerSkeleton, FluidDropdown as unstable__FluidDropdown, FluidDropdownSkeleton as unstable__FluidDropdownSkeleton, FluidMultiSelect as unstable__FluidMultiSelect, FluidMultiSelectSkeleton as unstable__FluidMultiSelectSkeleton, FluidNumberInput as unstable__FluidNumberInput, FluidNumberInputSkeleton as unstable__FluidNumberInputSkeleton, FluidSearch as unstable__FluidSearch, FluidSearchSkeleton as unstable__FluidSearchSkeleton, FluidSelect as unstable__FluidSelect, FluidSelectSkeleton as unstable__FluidSelectSkeleton, FluidTextArea as unstable__FluidTextArea, FluidTextAreaSkeleton as unstable__FluidTextAreaSkeleton, FluidTextInput as unstable__FluidTextInput, FluidTextInputSkeleton as unstable__FluidTextInputSkeleton, FluidTimePicker as unstable__FluidTimePicker, FluidTimePickerSelect as unstable__FluidTimePickerSelect, FluidTimePickerSkeleton as unstable__FluidTimePickerSkeleton, IconIndicator as unstable__IconIndicator, PageHeader_exports as unstable__PageHeader, ShapeIndicator as unstable__ShapeIndicator, AILabel as unstable__Slug, AILabelActions as unstable__SlugActions, AILabelContent as unstable__SlugContent, useFeatureFlag as unstable_useFeatureFlag, useFeatureFlags as unstable_useFeatureFlags, useLayoutDirection as unstable_useLayoutDirection, useContextMenu, useFeatureFlag, useFeatureFlags, useIdPrefix, useLayer, usePrefersDarkScheme, usePrefix, useTheme, validateNumberSeparators, withComposedModalPresence, withModalPresence };
@@ -113,7 +113,10 @@ const FloatingMenu = ({ children, flipped, focusTrap, menuDirection = DIRECTION_
113
113
  position: getComputedStyle(target()).position
114
114
  }
115
115
  });
116
- if (!floatingPosition || floatingPosition.left !== newFloatingPosition.left || floatingPosition.top !== newFloatingPosition.top) setFloatingPosition(newFloatingPosition);
116
+ setFloatingPosition((prev) => {
117
+ if (prev && prev.left === newFloatingPosition.left && prev.top === newFloatingPosition.top) return prev;
118
+ return newFloatingPosition;
119
+ });
117
120
  if (!isAdjustment) {
118
121
  const newMenuSize = menuBody.getBoundingClientRect();
119
122
  if (newMenuSize.width !== menuSize.width || newMenuSize.height !== menuSize.height) updateMenuPosition(true);
@@ -125,8 +128,7 @@ const FloatingMenu = ({ children, flipped, focusTrap, menuDirection = DIRECTION_
125
128
  menuDirection,
126
129
  flipped,
127
130
  target,
128
- updateOrientation,
129
- floatingPosition
131
+ updateOrientation
130
132
  ]);
131
133
  const focusMenuContent = (menuBody) => {
132
134
  const primaryFocusNode = selectorPrimaryFocus ? menuBody.querySelector(selectorPrimaryFocus) : null;
@@ -131,12 +131,21 @@ const ComboBox = (0, react.forwardRef)((props, ref) => {
131
131
  const [isFocused, setIsFocused] = (0, react.useState)(false);
132
132
  const prevInputValue = (0, react.useRef)(inputValue);
133
133
  const prevSelectedItemProp = (0, react.useRef)(selectedItemProp);
134
+ const isSyncingControlledSelectionRef = (0, react.useRef)(false);
135
+ const pendingControlledSelectionRef = (0, react.useRef)({
136
+ pending: false,
137
+ value: void 0
138
+ });
134
139
  (0, react.useEffect)(() => {
135
140
  isManualClearingRef.current = isClearing;
136
141
  if (isClearing) setIsClearing(false);
137
142
  }, [isClearing]);
138
143
  (0, react.useEffect)(() => {
139
144
  if (prevSelectedItemProp.current !== selectedItemProp) {
145
+ pendingControlledSelectionRef.current = {
146
+ pending: true,
147
+ value: selectedItemProp
148
+ };
140
149
  const currentInputValue = getInputValue({
141
150
  initialSelectedItem,
142
151
  itemToString,
@@ -351,11 +360,14 @@ const ComboBox = (0, react.forwardRef)((props, ref) => {
351
360
  isItemDisabled: isDisabledItem,
352
361
  ...downshiftProps,
353
362
  onStateChange: ({ type, selectedItem: newSelectedItem }) => {
363
+ if (isManualClearingRef.current || isSyncingControlledSelectionRef.current) {
364
+ isSyncingControlledSelectionRef.current = false;
365
+ return;
366
+ }
354
367
  downshiftProps?.onStateChange?.({
355
368
  type,
356
369
  selectedItem: newSelectedItem
357
370
  });
358
- if (isManualClearingRef.current) return;
359
371
  if ((type === ItemClick || type === FunctionSelectItem || type === InputKeyDownEnter || !allowCustomValue && type === InputBlur) && typeof newSelectedItem !== "undefined" && !(0, react_fast_compare.default)(currentSelectedItem, newSelectedItem)) {
360
372
  if (items.some((item) => (0, react_fast_compare.default)(item, newSelectedItem))) committedCustomValueRef.current = "";
361
373
  onChange({ selectedItem: newSelectedItem });
@@ -363,6 +375,21 @@ const ComboBox = (0, react.forwardRef)((props, ref) => {
363
375
  }
364
376
  });
365
377
  const currentSelectedItem = typeof selectedItemProp !== "undefined" ? selectedItemProp : selectedItem;
378
+ (0, react.useEffect)(() => {
379
+ if (pendingControlledSelectionRef.current.pending) {
380
+ const { value } = pendingControlledSelectionRef.current;
381
+ const nextSelectedItem = typeof value === "undefined" ? null : value;
382
+ pendingControlledSelectionRef.current.pending = false;
383
+ if (!(0, react_fast_compare.default)(selectedItem, nextSelectedItem)) {
384
+ isSyncingControlledSelectionRef.current = true;
385
+ selectItem(nextSelectedItem);
386
+ }
387
+ }
388
+ }, [
389
+ selectedItem,
390
+ selectedItemProp,
391
+ selectItem
392
+ ]);
366
393
  (0, react.useEffect)(() => {
367
394
  if (downshiftActions) downshiftActions.current = {
368
395
  closeMenu,
@@ -69,6 +69,7 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
69
69
  selectedRows: (DataTableRow<ColTypes> & RowType)[];
70
70
  getHeaderProps: (options: {
71
71
  header: DataTableHeader;
72
+ id?: string;
72
73
  isSortable?: boolean;
73
74
  onClick?: (event: MouseEvent<HTMLButtonElement>, sortState: {
74
75
  sortHeaderKey: string;
@@ -76,6 +77,7 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
76
77
  }) => void;
77
78
  [key: string]: unknown;
78
79
  }) => {
80
+ id: string;
79
81
  isSortable: boolean | undefined;
80
82
  isSortHeader: boolean;
81
83
  key: string;
@@ -135,7 +137,7 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
135
137
  getToolbarProps: (options?: {
136
138
  [key: string]: unknown;
137
139
  }) => {
138
- size: 'sm' | undefined;
140
+ size: 'xs' | 'sm' | undefined;
139
141
  [key: string]: unknown;
140
142
  };
141
143
  getBatchActionProps: (options?: {
@@ -163,9 +165,12 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
163
165
  };
164
166
  getCellProps: (options: {
165
167
  cell: DataTableCell<ColTypes>;
168
+ headers?: string;
169
+ [key: string]: unknown;
166
170
  }) => {
167
171
  [key: string]: unknown;
168
172
  hasAILabelHeader?: boolean;
173
+ headers: string;
169
174
  key: string;
170
175
  };
171
176
  /**
@@ -384,7 +389,7 @@ export declare const DataTable: {
384
389
  TableToolbarAction: import("react").ForwardRefExoticComponent<import("./TableToolbarAction").TableToolbarActionProps & import("react").RefAttributes<HTMLDivElement>>;
385
390
  TableToolbarContent: (props: import("react").HTMLAttributes<"div">) => ReactElement;
386
391
  TableToolbarSearch: {
387
- ({ className, searchContainerClass, onChange: onChangeProp, onClear, translateWithId: t, placeholder, labelText, expanded: expandedProp, defaultExpanded, defaultValue, disabled, onExpand, persistent, id, onBlur, onFocus, size, tabIndex, ...rest }: import("./TableToolbarSearch").TableToolbarSearchProps): import("react/jsx-runtime").JSX.Element;
392
+ ({ className, searchContainerClass, onChange: onChangeProp, onClear, translateWithId: t, placeholder, labelText, expanded: expandedProp, defaultExpanded, defaultValue, disabled, onExpand, persistent, id, onBlur, onFocus, size: sizeProp, tabIndex, ...rest }: import("./TableToolbarSearch").TableToolbarSearchProps): import("react/jsx-runtime").JSX.Element;
388
393
  propTypes: {
389
394
  children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
390
395
  className: PropTypes.Requireable<string>;
@@ -408,13 +413,14 @@ export declare const DataTable: {
408
413
  };
409
414
  };
410
415
  TableToolbarMenu: {
411
- ({ className, renderIcon, iconDescription, children, menuOptionsClass, ...rest }: import("./TableToolbarMenu").TableToolbarMenuProps): import("react/jsx-runtime").JSX.Element;
416
+ ({ className, renderIcon, iconDescription, children, menuOptionsClass, size: sizeProp, ...rest }: import("./TableToolbarMenu").TableToolbarMenuProps): import("react/jsx-runtime").JSX.Element;
412
417
  propTypes: {
413
418
  children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
414
419
  className: PropTypes.Requireable<string>;
415
420
  iconDescription: PropTypes.Requireable<string>;
416
421
  menuOptionsClass: PropTypes.Requireable<string>;
417
422
  renderIcon: PropTypes.Requireable<object>;
423
+ size: PropTypes.Requireable<string>;
418
424
  };
419
425
  };
420
426
  propTypes: {