@carbon/react 1.83.0 → 1.84.0-rc.0

package/lib/components/ContainedList/ContainedListItem/ContainedListItem.js

@@ -22,16 +22,15 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const ContainedListItem = _ref => {
-  let {
-    action,
-    children,
-    className,
-    disabled = false,
-    onClick,
-    renderIcon: IconElement,
-    ...rest
-  } = _ref;
+const ContainedListItem = ({
+  action,
+  children,
+  className,
+  disabled = false,
+  onClick,
+  renderIcon: IconElement,
+  ...rest
+}) => {
   const prefix = usePrefix.usePrefix();
   const isClickable = onClick !== undefined;
   const classes = cx__default["default"](`${prefix}--contained-list-item`, className, {

package/lib/components/ContentSwitcher/ContentSwitcher.d.ts

@@ -1,11 +1,11 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-import React, { HTMLAttributes, ReactElement } from 'react';
+import { type HTMLAttributes, type ReactElement } from 'react';
 export interface SwitchEventHandlersParams {
     index?: number;
     name?: string | number;
@@ -46,24 +46,14 @@ export interface ContentSwitcherProps extends Omit<HTMLAttributes<HTMLElement>,
      */
     selectionMode?: 'automatic' | 'manual';
     /**
-     * Specify the size of the Content Switcher. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
+     * Specify the size of the Content Switcher. Currently supports either `sm`, `md` (default) or `lg` as an option.
      */
     size: 'sm' | 'md' | 'lg';
 }
-export interface ContentSwitcherState {
-    selectedIndex?: number;
-}
-export default class ContentSwitcher extends React.Component<ContentSwitcherProps, ContentSwitcherState> {
-    /**
-     * The DOM references of child `<Switch>`.
-     * @type {Array<Element>}
-     * @private
-     */
-    _switchRefs: HTMLButtonElement[];
-    state: {
-        selectedIndex: undefined;
-    };
-    static propTypes: {
+export declare const ContentSwitcher: {
+    ({ children, className, light, lowContrast, selectedIndex: selectedIndexProp, selectionMode, size, onChange, ...other }: ContentSwitcherProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    propTypes: {
         /**
          * Pass in Switch components to be rendered in the ContentSwitcher
          */
@@ -94,18 +84,8 @@ export default class ContentSwitcher extends React.Component<ContentSwitcherProp
          */
         selectionMode: PropTypes.Requireable<string>;
         /**
-         * Specify the size of the Content Switcher. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
+         * Specify the size of the Content Switcher. Currently supports either `sm`, `md` (default) or `lg` as an option.
          */
         size: PropTypes.Requireable<string>;
     };
-    static contextType: React.Context<string>;
-    static getDerivedStateFromProps({ selectedIndex }: {
-        selectedIndex?: number | undefined;
-    }, state: any): {
-        selectedIndex: number;
-        prevSelectedIndex: number;
-    } | null;
-    handleItemRef: (index: any) => (ref: any) => void;
-    handleChildChange: (data: any) => void;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
+};

package/lib/components/ContentSwitcher/ContentSwitcher.js

@@ -28,131 +28,100 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-class ContentSwitcher extends React__default["default"].Component {
-  constructor() {
-    super(...arguments);
-    /**
-     * The DOM references of child `<Switch>`.
-     * @type {Array<Element>}
-     * @private
-     */
-    _rollupPluginBabelHelpers.defineProperty(this, "_switchRefs", []);
-    _rollupPluginBabelHelpers.defineProperty(this, "state", {
-      selectedIndex: undefined
-    });
-    _rollupPluginBabelHelpers.defineProperty(this, "handleItemRef", index => ref => {
-      this._switchRefs[index] = ref;
-    });
-    _rollupPluginBabelHelpers.defineProperty(this, "handleChildChange", data => {
-      const {
-        selectionMode = 'automatic'
-      } = this.props;
-      // the currently selected child index
-      const {
-        selectedIndex
-      } = this.state;
-      // the newly selected child index
-      const {
-        index
-      } = data;
-      const {
-        key
-      } = data;
-      if (match.matches(data, [keys.ArrowRight, keys.ArrowLeft])) {
-        const nextIndex = navigation.getNextIndex(key, index, this.props.children?.length);
-        const children = React__default["default"].Children.toArray(this.props.children);
-        if (selectionMode === 'manual') {
-          const switchRef = this._switchRefs[nextIndex];
-          switchRef && switchRef.focus();
-        } else {
-          this.setState({
-            selectedIndex: nextIndex
-          }, () => {
-            if (typeof this.state.selectedIndex !== 'number') {
-              return;
-            }
-            const child = children[this.state.selectedIndex];
-            const switchRef = this._switchRefs[this.state.selectedIndex];
-            switchRef && switchRef.focus();
-            this.props.onChange({
-              ...data,
-              index: this.state.selectedIndex,
-              name: child.props.name,
-              text: child.props.text
-            });
+const ContentSwitcher = ({
+  children,
+  className,
+  light,
+  lowContrast,
+  selectedIndex: selectedIndexProp = 0,
+  selectionMode = 'automatic',
+  size,
+  onChange = noopFn.noopFn,
+  ...other
+}) => {
+  const prefix = React.useContext(usePrefix.PrefixContext);
+  const [selectedIndex, setSelectedIndex] = React.useState(selectedIndexProp);
+  const prevSelectedIndexRef = React.useRef(selectedIndexProp);
+  const switchRefs = React.useRef([]);
+  const childrenArray = React.Children.toArray(children);
+  React.useEffect(() => {
+    if (prevSelectedIndexRef.current !== selectedIndexProp) {
+      setSelectedIndex(selectedIndexProp);
+      prevSelectedIndexRef.current = selectedIndexProp;
+    }
+  }, [selectedIndexProp]);
+  const handleItemRef = index => ref => {
+    if (ref) {
+      switchRefs.current[index] = ref;
+    }
+  };
+  const focusSwitch = index => {
+    const ref = switchRefs.current[index];
+    if (ref) {
+      ref.focus();
+    }
+  };
+  const isKeyboardEvent = event => event && typeof event === 'object' && 'key' in event;
+  const handleChildChange = event => {
+    if (typeof event.index === 'undefined') return;
+    const {
+      index
+    } = event;
+    if (isKeyboardEvent(event) && match.matches(event, [keys.ArrowRight, keys.ArrowLeft])) {
+      const nextIndex = navigation.getNextIndex(event.key, index, childrenArray.length);
+      if (typeof nextIndex !== 'number') return;
+      focusSwitch(nextIndex);
+      if (selectionMode !== 'manual') {
+        const child = childrenArray[nextIndex];
+        setSelectedIndex(nextIndex);
+        if (/*#__PURE__*/React.isValidElement(child)) {
+          onChange({
+            ...event,
+            index: nextIndex,
+            name: child.props.name,
+            text: child.props.text
           });
         }
-      } else if (selectedIndex !== index) {
-        this.setState({
-          selectedIndex: index
-        }, () => {
-          const switchRef = this._switchRefs[index];
-          switchRef && switchRef.focus();
-          this.props.onChange(data);
-        });
-      }
-    });
-  }
-  static getDerivedStateFromProps(_ref, state) {
-    let {
-      selectedIndex = 0
-    } = _ref;
-    const {
-      prevSelectedIndex
-    } = state;
-    return prevSelectedIndex === selectedIndex ? null : {
-      selectedIndex,
-      prevSelectedIndex: selectedIndex
-    };
-  }
-  render() {
-    const prefix = this.context;
-    const {
-      children,
-      className,
-      light,
-      lowContrast,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      selectedIndex = 0,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      selectionMode = 'automatic',
-      size,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      onChange = noopFn.noopFn,
-      ...other
-    } = this.props;
-    const isIconOnly = React__default["default"].Children?.map(children, child => {
-      return child.type.displayName === 'IconSwitch';
-    })?.every(val => val === true);
-    const classes = cx__default["default"](`${prefix}--content-switcher`, className, {
-      [`${prefix}--content-switcher--light`]: light,
-      [`${prefix}--content-switcher--${size}`]: size,
-      // TODO: V12 - Remove this class
-      [`${prefix}--layout--size-${size}`]: size,
-      [`${prefix}--content-switcher--icon-only`]: isIconOnly,
-      [`${prefix}--content-switcher--low-contrast`]: lowContrast
-    });
-    return /*#__PURE__*/React__default["default"].createElement(index.LayoutConstraint, _rollupPluginBabelHelpers["extends"]({
-      size: {
-        default: 'md',
-        min: 'sm',
-        max: 'lg'
       }
-    }, other, {
-      className: classes,
-      role: "tablist",
-      onChange: undefined
-    }), children && React__default["default"].Children.toArray(children).map((child, index) => /*#__PURE__*/React__default["default"].cloneElement(child, {
-      index,
-      onClick: events.composeEventHandlers([this.handleChildChange, child.props.onClick]),
-      onKeyDown: this.handleChildChange,
-      selected: index === this.state.selectedIndex,
-      ref: this.handleItemRef(index),
-      size
-    })));
-  }
-}
-_rollupPluginBabelHelpers.defineProperty(ContentSwitcher, "propTypes", {
+    } else if (selectedIndex !== index) {
+      setSelectedIndex(index);
+      focusSwitch(index);
+      onChange(event);
+    }
+  };
+  const isIconOnly = childrenArray.every(
+  // TODO: Update this code when
+  // https://github.com/carbon-design-system/carbon/pull/18971 is merged.
+  child => child.type.displayName === 'IconSwitch');
+  const classes = cx__default["default"](`${prefix}--content-switcher`, className, {
+    [`${prefix}--content-switcher--light`]: light,
+    [`${prefix}--content-switcher--${size}`]: size,
+    // TODO: V12 - Remove this class
+    [`${prefix}--layout--size-${size}`]: size,
+    [`${prefix}--content-switcher--icon-only`]: isIconOnly,
+    [`${prefix}--content-switcher--low-contrast`]: lowContrast
+  });
+  return /*#__PURE__*/React__default["default"].createElement(index.LayoutConstraint, _rollupPluginBabelHelpers["extends"]({
+    size: {
+      default: 'md',
+      min: 'sm',
+      max: 'lg'
+    }
+  }, other, {
+    className: classes,
+    role: "tablist",
+    onChange: undefined
+  }), children && React.Children.map(children, (child, index) => /*#__PURE__*/React.cloneElement(child, {
+    index,
+    onClick: events.composeEventHandlers([handleChildChange, child.props.onClick]),
+    onKeyDown: events.composeEventHandlers([handleChildChange, child.props.onKeyDown]),
+    selected: index === selectedIndex,
+    ref: handleItemRef(index),
+    size
+  })));
+};
+ContentSwitcher.displayName = 'ContentSwitcher';
+ContentSwitcher.propTypes = {
   /**
    * Pass in Switch components to be rendered in the ContentSwitcher
    */
@@ -183,10 +152,9 @@ _rollupPluginBabelHelpers.defineProperty(ContentSwitcher, "propTypes", {
    */
   selectionMode: PropTypes__default["default"].oneOf(['automatic', 'manual']),
   /**
-   * Specify the size of the Content Switcher. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
+   * Specify the size of the Content Switcher. Currently supports either `sm`, `md` (default) or `lg` as an option.
    */
   size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg'])
-});
-_rollupPluginBabelHelpers.defineProperty(ContentSwitcher, "contextType", usePrefix.PrefixContext);
+};
 
-exports["default"] = ContentSwitcher;
+exports.ContentSwitcher = ContentSwitcher;

package/lib/components/ContentSwitcher/index.d.ts

@@ -1,10 +1,9 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { ContentSwitcherProps } from './ContentSwitcher';
-declare const ContentSwitcher: import("react").FunctionComponent<ContentSwitcherProps>;
+import { ContentSwitcher } from './ContentSwitcher';
 export default ContentSwitcher;
-export { ContentSwitcher };
+export * from './ContentSwitcher';

package/lib/components/ContextMenu/useContextMenu.js

@@ -15,8 +15,7 @@ var React = require('react');
  * @param {TriggerType} [trigger=document] The element or ref which should trigger the Menu on right-click
  * @returns {ContextMenuProps} Props object to pass onto Menu component
  */
-function useContextMenu() {
-  let trigger = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document;
+function useContextMenu(trigger = document) {
   const [open, setOpen] = React.useState(false);
   const [position, setPosition] = React.useState([0, 0]);
   function openContextMenu(e) {

package/lib/components/Copy/Copy.js

@@ -27,18 +27,17 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-function Copy(_ref) {
-  let {
-    align = 'bottom',
-    autoAlign = false,
-    children,
-    className,
-    feedback = 'Copied!',
-    feedbackTimeout = 2000,
-    onAnimationEnd,
-    onClick = noopFn.noopFn,
-    ...other
-  } = _ref;
+function Copy({
+  align = 'bottom',
+  autoAlign = false,
+  children,
+  className,
+  feedback = 'Copied!',
+  feedbackTimeout = 2000,
+  onAnimationEnd,
+  onClick = noopFn.noopFn,
+  ...other
+}) {
   const [animation, setAnimation] = React.useState('');
   const prefix = usePrefix.usePrefix();
   const classNames = cx__default["default"](className, `${prefix}--copy`, {

package/lib/components/CopyButton/CopyButton.js

@@ -27,17 +27,16 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-function CopyButton(_ref) {
-  let {
-    align = 'bottom',
-    autoAlign = false,
-    feedback = 'Copied!',
-    feedbackTimeout = 2000,
-    iconDescription = 'Copy to clipboard',
-    className,
-    onClick = noopFn.noopFn,
-    ...other
-  } = _ref;
+function CopyButton({
+  align = 'bottom',
+  autoAlign = false,
+  feedback = 'Copied!',
+  feedbackTimeout = 2000,
+  iconDescription = 'Copy to clipboard',
+  className,
+  onClick = noopFn.noopFn,
+  ...other
+}) {
   const prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React__default["default"].createElement(index.LayoutConstraint, {
     size: {

package/lib/components/DataTable/DataTable.js

@@ -87,9 +87,7 @@ const translateWithId = id => defaultTranslations[id];
  */
 class DataTable extends React.Component {
   constructor(_props) {
-    var _this;
     super(_props);
-    _this = this;
     _rollupPluginBabelHelpers.defineProperty(this, "instanceId", void 0);
     // TODO: Replace with a `type` when this component is converted to a
     // functional component.
@@ -98,13 +96,12 @@ class DataTable extends React.Component {
      * Get the props associated with the given header. Mostly used for adding in
      * sorting behavior.
      */
-    _rollupPluginBabelHelpers.defineProperty(this, "getHeaderProps", _ref => {
-      let {
-        header,
-        onClick,
-        isSortable = this.props.isSortable,
-        ...rest
-      } = _ref;
+    _rollupPluginBabelHelpers.defineProperty(this, "getHeaderProps", ({
+      header,
+      onClick,
+      isSortable = this.props.isSortable,
+      ...rest
+    }) => {
       const {
         sortDirection,
         sortHeaderKey
@@ -133,20 +130,19 @@ class DataTable extends React.Component {
     /**
      * Get the props associated with the given expand header.
      */
-    _rollupPluginBabelHelpers.defineProperty(this, "getExpandHeaderProps", function () {
-      let {
-        onClick,
-        onExpand,
-        ...rest
-      } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    _rollupPluginBabelHelpers.defineProperty(this, "getExpandHeaderProps", ({
+      onClick,
+      onExpand,
+      ...rest
+    } = {}) => {
       const {
         translateWithId: t = translateWithId
-      } = _this.props;
+      } = this.props;
       const {
         isExpandedAll,
         rowIds,
         rowsById
-      } = _this.state;
+      } = this.state;
       const isExpanded = isExpandedAll || rowIds.every(id => rowsById[id].isExpanded);
       const translationKey = isExpanded ? translationKeys.collapseAll : translationKeys.expandAll;
       return {
@@ -157,7 +153,7 @@ class DataTable extends React.Component {
         isExpanded,
         // Compose the event handlers so we don't overwrite a consumer's `onClick`
         // handler
-        onExpand: events.composeEventHandlers([_this.handleOnExpandAll, onExpand, onClick && _this.handleOnExpandHeaderClick(onClick, {
+        onExpand: events.composeEventHandlers([this.handleOnExpandAll, onExpand, onClick && this.handleOnExpandHeaderClick(onClick, {
           isExpanded
         })])
       };
@@ -177,12 +173,11 @@ class DataTable extends React.Component {
     /**
      * Get the props associated with the given row. Mostly used for expansion.
      */
-    _rollupPluginBabelHelpers.defineProperty(this, "getRowProps", _ref2 => {
-      let {
-        row,
-        onClick,
-        ...rest
-      } = _ref2;
+    _rollupPluginBabelHelpers.defineProperty(this, "getRowProps", ({
+      row,
+      onClick,
+      ...rest
+    }) => {
       const {
         translateWithId: t = translateWithId
       } = this.props;
@@ -203,11 +198,10 @@ class DataTable extends React.Component {
     /**
      * Get the props associated with an expanded row
      */
-    _rollupPluginBabelHelpers.defineProperty(this, "getExpandedRowProps", _ref3 => {
-      let {
-        row,
-        ...rest
-      } = _ref3;
+    _rollupPluginBabelHelpers.defineProperty(this, "getExpandedRowProps", ({
+      row,
+      ...rest
+    }) => {
       return {
         ...rest,
         id: `expanded-row-${row.id}`
@@ -218,15 +212,14 @@ class DataTable extends React.Component {
      * applicable. Most often used to indicate selection status of the table or
      * for a specific row.
      */
-    _rollupPluginBabelHelpers.defineProperty(this, "getSelectionProps", function () {
-      let {
-        onClick,
-        row,
-        ...rest
-      } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    _rollupPluginBabelHelpers.defineProperty(this, "getSelectionProps", ({
+      onClick,
+      row,
+      ...rest
+    } = {}) => {
       const {
         translateWithId: t = translateWithId
-      } = _this.props;
+      } = this.props;
 
       // If we're given a row, return the selection state values for that row
       if (row) {
@@ -234,19 +227,19 @@ class DataTable extends React.Component {
         return {
           ...rest,
           checked: row.isSelected,
-          onSelect: events.composeEventHandlers([_this.handleOnSelectRow(row.id), onClick]),
-          id: `${_this.getTablePrefix()}__select-row-${row.id}`,
-          name: `select-row-${_this.instanceId}`,
+          onSelect: events.composeEventHandlers([this.handleOnSelectRow(row.id), onClick]),
+          id: `${this.getTablePrefix()}__select-row-${row.id}`,
+          name: `select-row-${this.instanceId}`,
           'aria-label': t(translationKey),
           disabled: row.disabled,
-          radio: _this.props.radio
+          radio: this.props.radio
         };
       }
 
       // Otherwise, we're working on `TableSelectAll` which handles toggling the
       // selection state of all rows.
-      const rowCount = _this.state.rowIds.length;
-      const selectedRowCount = _this.getSelectedRows().length;
+      const rowCount = this.state.rowIds.length;
+      const selectedRowCount = this.getSelectedRows().length;
       const checked = rowCount > 0 && selectedRowCount === rowCount;
       const indeterminate = rowCount > 0 && selectedRowCount > 0 && selectedRowCount !== rowCount;
       const translationKey = checked || indeterminate ? translationKeys.unselectAll : translationKeys.selectAll;
@@ -254,10 +247,10 @@ class DataTable extends React.Component {
         ...rest,
         'aria-label': t(translationKey),
         checked,
-        id: `${_this.getTablePrefix()}__select-all`,
+        id: `${this.getTablePrefix()}__select-all`,
         indeterminate,
-        name: `select-all-${_this.instanceId}`,
-        onSelect: events.composeEventHandlers([_this.handleSelectAll, onClick])
+        name: `select-all-${this.instanceId}`,
+        onSelect: events.composeEventHandlers([this.handleSelectAll, onClick])
       };
     });
     _rollupPluginBabelHelpers.defineProperty(this, "getToolbarProps", props => {
@@ -317,14 +310,13 @@ class DataTable extends React.Component {
     /**
      * Get the props associated with the given table cell.
      */
-    _rollupPluginBabelHelpers.defineProperty(this, "getCellProps", _ref4 => {
-      let {
-        cell: {
-          hasAILabelHeader,
-          hasDecoratorHeader
-        },
-        ...rest
-      } = _ref4;
+    _rollupPluginBabelHelpers.defineProperty(this, "getCellProps", ({
+      cell: {
+        hasAILabelHeader,
+        hasDecoratorHeader
+      },
+      ...rest
+    }) => {
       return {
         ...rest,
         hasAILabelHeader,

package/lib/components/DataTable/Table.js

@@ -53,20 +53,19 @@ const isElementWrappingContent = (element, context) => {
   }
   return false;
 };
-const Table = _ref => {
-  let {
-    className,
-    children,
-    useZebraStyles,
-    size = 'lg',
-    isSortable = false,
-    useStaticWidth,
-    stickyHeader,
-    overflowMenuOnHover = true,
-    experimentalAutoAlign = false,
-    tabIndex,
-    ...other
-  } = _ref;
+const Table = ({
+  className,
+  children,
+  useZebraStyles,
+  size = 'lg',
+  isSortable = false,
+  useStaticWidth,
+  stickyHeader,
+  overflowMenuOnHover = true,
+  experimentalAutoAlign = false,
+  tabIndex,
+  ...other
+}) => {
   const {
     titleId,
     descriptionId
@@ -82,12 +81,10 @@ const Table = _ref => {
     [`${prefix}--data-table--sticky-header`]: stickyHeader,
     [`${prefix}--data-table--visible-overflow-menu`]: !overflowMenuOnHover
   });
-  const toggleTableBodyAlignmentClass = React.useCallback(function () {
-    let alignTop = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  const toggleTableBodyAlignmentClass = React.useCallback((alignTop = false) => {
     alignTop ? tableRef.current?.classList.add(`${prefix}--data-table--top-aligned-body`) : tableRef.current?.classList.remove(`${prefix}--data-table--top-aligned-body`);
   }, [prefix]);
-  const toggleTableHeaderAlignmentClass = React.useCallback(function () {
-    let alignTop = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  const toggleTableHeaderAlignmentClass = React.useCallback((alignTop = false) => {
     alignTop ? tableRef.current?.classList.add(`${prefix}--data-table--top-aligned-header`) : tableRef.current?.classList.remove(`${prefix}--data-table--top-aligned-header`);
   }, [prefix]);
   const setTableAlignment = React.useCallback(() => {