@atlaskit/table-tree 9.12.2 → 10.0.1

package/dist/es2019/components/internal/loader-item.js

@@ -1,51 +1,34 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /* eslint-disable react/prop-types */
-import React, { Component } from 'react';
+import React, { useEffect, useState } from 'react';
 import Spinner from '@atlaskit/spinner';
 import CommonCell from './common-cell';
 import { indentBase, LoaderItemContainer, TreeRowContainer } from './styled';
-export default class LoaderItem extends Component {
-  constructor(...args) {
-    super(...args);
-    _defineProperty(this, "state", {
-      phase: 'loading'
-    });
-  }
-  static getDerivedStateFromProps(nextProps, prevState) {
-    if (nextProps.isCompleting && prevState.phase === 'loading') {
-      return {
-        phase: 'complete'
-      };
+const LoaderItem = ({
+  depth = 1,
+  loadingLabel,
+  isCompleting,
+  onComplete
+}) => {
+  const [phase, setPhase] = useState('loading');
+  useEffect(() => {
+    if (phase === 'loading' && isCompleting) {
+      setPhase(() => {
+        onComplete();
+        return 'complete';
+      });
     }
-    return null;
-  }
-  componentDidUpdate(prevProps, prevState) {
-    if (prevState.phase === 'loading' && this.state.phase === 'complete') {
-      if (this.props.onComplete) {
-        this.props.onComplete();
-      }
-    }
-  }
-  render() {
-    const {
-      depth,
-      loadingLabel
-    } = this.props;
-    const {
-      phase
-    } = this.state;
-    return phase === 'loading' ? /*#__PURE__*/React.createElement(TreeRowContainer, null, /*#__PURE__*/React.createElement(CommonCell, {
-      indent: `calc(${indentBase} * ${depth})`,
-      width: "100%"
-    }, /*#__PURE__*/React.createElement(LoaderItemContainer, {
-      isRoot: depth === 1
-    }, /*#__PURE__*/React.createElement(Spinner, {
-      size: "small",
-      testId: "table-tree-spinner",
-      label: loadingLabel
-    })))) : null;
-  }
-}
-_defineProperty(LoaderItem, "defaultProps", {
-  depth: 1
-});
+  }, [isCompleting, onComplete, phase]);
+  return phase === 'loading' ? /*#__PURE__*/React.createElement(TreeRowContainer, null, /*#__PURE__*/React.createElement(CommonCell, {
+    indent: `calc(${indentBase} * ${depth})`,
+    width: "100%"
+  }, /*#__PURE__*/React.createElement(LoaderItemContainer, {
+    isRoot: depth === 1
+  }, /*#__PURE__*/React.createElement(Spinner, {
+    size: "small",
+    testId: "table-tree-spinner",
+    label: loadingLabel
+  })))) : null;
+};
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export default LoaderItem;

package/dist/es2019/components/internal/with-column-width.js

@@ -20,10 +20,8 @@ export default function withColumnWidth(Cell) {
     let columnWidth;
     if (width !== null && width !== undefined) {
       columnWidth = width;
-    } else {
-      if (columnIndex !== undefined) {
-        columnWidth = getColumnWidth(columnIndex);
-      }
+    } else if (columnIndex !== undefined) {
+      columnWidth = getColumnWidth(columnIndex);
     }
     return /*#__PURE__*/React.createElement(Cell, _extends({
       width: columnWidth

package/dist/es2019/components/row.js

@@ -1,182 +1,130 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /**
  * @jsxRuntime classic
  * @jsx jsx
  */
-/* eslint-disable @repo/internal/react/no-clone-element */
-import React, { Component, Fragment } from 'react';
+import React, { Fragment, useEffect, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import toItemId from '../utils/to-item-id';
 import Chevron from './internal/chevron';
 import { TreeRowContainer } from './internal/styled';
 const treeRowClickableStyles = css({
   cursor: 'pointer'
 });
-const packageName = "@atlaskit/table-tree";
-const packageVersion = "9.12.2";
-
-/**
- * This is hard-coded here because our actual <TableTree /> has no typings
- * for its props.
- *
- * Adding types for real *might* break things so will need a little care.
- *
- * Defining it here for now lets us provide *something* without much headache.
- */
-
-class RowComponent extends Component {
-  constructor(...args) {
-    super(...args);
-    _defineProperty(this, "state", {
-      isExpanded: this.props.isDefaultExpanded || false
-    });
-    /**
-     * This ensures a user won't trigger a click event and expand the accordion
-     * when making a text selection.
-     */
-    _defineProperty(this, "onClickHandler", e => {
-      var _window$getSelection;
-      const selection = ((_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.toString()) || '';
-      if ((selection === null || selection === void 0 ? void 0 : selection.length) === 0) {
-        this.onExpandToggle();
-      }
-    });
-    _defineProperty(this, "onExpandToggle", () => {
-      const {
-        isExpanded
-      } = this.props;
-      if (isExpanded !== undefined) {
-        this.onExpandStateChange(!isExpanded);
-      } else {
-        this.setState({
-          isExpanded: !this.state.isExpanded
-        });
-        this.onExpandStateChange(!this.state.isExpanded);
-      }
-    });
-    _defineProperty(this, "getExtendedLabel", (cellContent, cellIndex, mainColumnForExpandCollapseLabel) => {
-      /**
-       * First condition - when we pass data via `items` property in `<TableTree />`
-       * Second condition - when we pass data via `<Rows />` as children in `<TableTree />`.
-       */
-      if (cellContent.hasOwnProperty('props')) {
-        return cellContent === null || cellContent === void 0 ? void 0 : cellContent.props[mainColumnForExpandCollapseLabel === null || mainColumnForExpandCollapseLabel === void 0 ? void 0 : mainColumnForExpandCollapseLabel.toLowerCase()];
-      } else if (cellIndex === mainColumnForExpandCollapseLabel) {
-        return cellContent;
-      }
-      return undefined;
-    });
+const getExtendedLabel = (cellContent, cellIndex, mainColumnForExpandCollapseLabel) => {
+  /**
+   * First condition - when we pass data via `items` property in `<TableTree />`
+   * Second condition - when we pass data via `<Rows />` as children in `<TableTree />`.
+   */
+  if (cellContent.hasOwnProperty('props')) {
+    return cellContent === null || cellContent === void 0 ? void 0 : cellContent.props[mainColumnForExpandCollapseLabel === null || mainColumnForExpandCollapseLabel === void 0 ? void 0 : mainColumnForExpandCollapseLabel.toLowerCase()];
+  } else if (cellIndex === mainColumnForExpandCollapseLabel) {
+    return cellContent;
   }
-  componentDidUpdate(prevProps) {
-    const {
-      isDefaultExpanded,
-      isExpanded
-    } = this.props;
-    if (isExpanded === undefined && isDefaultExpanded !== undefined && prevProps.isDefaultExpanded !== isDefaultExpanded && this.state.isExpanded !== isDefaultExpanded) {
-      // eslint-disable-next-line react/no-did-update-set-state
-      this.setState({
-        isExpanded: isDefaultExpanded
-      });
+  return undefined;
+};
+function Row({
+  shouldExpandOnClick,
+  hasChildren,
+  depth,
+  renderChildren,
+  isDefaultExpanded,
+  data,
+  onExpand: providedOnExpand,
+  onCollapse: providedOnCollapse,
+  mainColumnForExpandCollapseLabel,
+  expandLabel,
+  collapseLabel,
+  itemId,
+  children,
+  isExpanded: isProvidedExpanded
+}) {
+  const [isExpandedState, setIsExpandedState] = useState(isDefaultExpanded || false);
+  useEffect(() => {
+    if (isProvidedExpanded === undefined && isDefaultExpanded !== undefined && isExpandedState !== isDefaultExpanded) {
+      setIsExpandedState(isDefaultExpanded);
     }
-  }
-  onExpandStateChange(isExpanded) {
-    if (this.props.data) {
-      if (isExpanded && this.props.onExpand) {
-        this.props.onExpand(this.props.data);
-      } else if (!isExpanded && this.props.onCollapse) {
-        this.props.onCollapse(this.props.data);
+  }, [isDefaultExpanded, isProvidedExpanded, isExpandedState]);
+  const onExpand = usePlatformLeafEventHandler({
+    fn: value => providedOnExpand && providedOnExpand(value),
+    action: 'expanded',
+    actionSubject: 'tableTree',
+    componentName: 'row',
+    packageName: "@atlaskit/table-tree",
+    packageVersion: "10.0.1"
+  });
+  const onCollapse = usePlatformLeafEventHandler({
+    fn: value => providedOnCollapse && providedOnCollapse(value),
+    action: 'collapsed',
+    actionSubject: 'tableTree',
+    componentName: 'row',
+    packageName: "@atlaskit/table-tree",
+    packageVersion: "10.0.1"
+  });
+
+  /**
+   * This ensures a user won't trigger a click event and expand the accordion
+   * when making a text selection.
+   */
+  const onClickHandler = e => {
+    var _window$getSelection;
+    const selection = ((_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.toString()) || '';
+    if ((selection === null || selection === void 0 ? void 0 : selection.length) === 0) {
+      onExpandToggle();
+    }
+  };
+  const onExpandStateChange = isExpanded => {
+    if (data) {
+      if (isExpanded && onExpand) {
+        onExpand(data);
+      } else if (!isExpanded && onCollapse) {
+        onCollapse(data);
       }
     }
-  }
-  isExpanded() {
-    const {
-      isExpanded
-    } = this.props;
-    return isExpanded !== undefined ? isExpanded : this.state.isExpanded;
-  }
-  renderCell(cell, cellIndex) {
-    const {
-      props
-    } = this;
-    const isExpanded = this.isExpanded();
-    const {
-      hasChildren,
-      depth,
-      mainColumnForExpandCollapseLabel
-    } = props;
+  };
+  const onExpandToggle = () => {
+    if (isProvidedExpanded !== undefined) {
+      onExpandStateChange(!isProvidedExpanded);
+    } else {
+      setIsExpandedState(prevState => {
+        onExpandStateChange(!prevState);
+        return !prevState;
+      });
+    }
+  };
+  const renderCell = (cell, cellIndex) => {
     const isFirstCell = cellIndex === 0;
     const indentLevel = isFirstCell ? depth : 0;
     let cellContent = cell.props.children || [];
-    const extendedLabel = this.getExtendedLabel(cellContent, cellIndex, mainColumnForExpandCollapseLabel);
+    const extendedLabel = getExtendedLabel(cellContent, cellIndex, mainColumnForExpandCollapseLabel);
     if (isFirstCell && hasChildren) {
       cellContent = [jsx(Chevron, {
         key: "chevron",
-        expandLabel: props.expandLabel,
-        collapseLabel: props.collapseLabel,
+        expandLabel: expandLabel,
+        collapseLabel: collapseLabel,
         extendedLabel: extendedLabel,
-        isExpanded: isExpanded,
-        onExpandToggle: this.onExpandToggle,
-        ariaControls: isExpanded ? toItemId(props.itemId) : undefined,
-        rowId: props.itemId
+        isExpanded: isProvidedExpanded !== undefined ? isProvidedExpanded : isExpandedState,
+        onExpandToggle: onExpandToggle,
+        ariaControls: (isProvidedExpanded !== undefined ? isProvidedExpanded : isExpandedState) && !!itemId ? toItemId(itemId) : undefined,
+        rowId: !!itemId ? itemId : ''
       })].concat(cellContent);
     }
+    // eslint-disable-next-line @repo/internal/react/no-clone-element
     return /*#__PURE__*/React.cloneElement(cell, {
       key: cellIndex,
       columnIndex: cellIndex,
       indentLevel
     }, cellContent);
-  }
-  render() {
-    const {
-      shouldExpandOnClick,
-      hasChildren,
-      depth,
-      renderChildren
-    } = this.props;
-    const isExpanded = this.isExpanded();
-    const ariaAttrs = {};
-    if (hasChildren) {
-      ariaAttrs['aria-expanded'] = isExpanded;
-    }
-    if (depth !== undefined) {
-      ariaAttrs['aria-level'] = depth;
-    }
-    return jsx(Fragment, null, jsx(TreeRowContainer, _extends({
-      css: hasChildren && shouldExpandOnClick ? treeRowClickableStyles : undefined,
-      onClick: hasChildren && shouldExpandOnClick ? this.onClickHandler : undefined
-    }, ariaAttrs), React.Children.map(this.props.children, (cell, index) => this.renderCell(cell, index))), hasChildren && isExpanded && renderChildren && renderChildren());
-  }
+  };
+  return jsx(Fragment, null, jsx(TreeRowContainer, {
+    css: hasChildren && shouldExpandOnClick ? treeRowClickableStyles : undefined,
+    onClick: hasChildren && shouldExpandOnClick ? onClickHandler : undefined,
+    "aria-expanded": hasChildren ? isExpandedState : undefined,
+    "aria-level": depth ? depth : undefined
+  }, React.Children.map(children, (cell, index) => renderCell(cell, index))), hasChildren && (isProvidedExpanded !== undefined ? isProvidedExpanded : isExpandedState) && renderChildren && renderChildren());
 }
-export { RowComponent as RowWithoutAnalytics };
-const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
-const Row = withAnalyticsContext({
-  componentName: 'row',
-  packageName,
-  packageVersion
-})(withAnalyticsEvents({
-  onExpand: createAndFireEventOnAtlaskit({
-    action: 'expanded',
-    actionSubject: 'tableTree',
-    attributes: {
-      componentName: 'row',
-      packageName,
-      packageVersion
-    }
-  }),
-  onCollapse: createAndFireEventOnAtlaskit({
-    action: 'collapsed',
-    actionSubject: 'tableTree',
-    attributes: {
-      componentName: 'row',
-      packageName,
-      packageVersion
-    }
-  })
-})(RowComponent));
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default Row;

package/dist/es2019/components/rows.js

@@ -1,18 +1,18 @@
-import React, { Component } from 'react';
+import React from 'react';
 import Items from './internal/items';
-export default class Rows extends Component {
-  render() {
-    const {
-      items,
-      render,
-      loadingLabel = 'Loading'
-    } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
-      role: "rowgroup"
-    }, /*#__PURE__*/React.createElement(Items, {
-      items: items,
-      loadingLabel: loadingLabel,
-      render: render
-    }));
-  }
-}
+function Rows({
+  items,
+  render,
+  loadingLabel = 'Loading'
+}) {
+  return /*#__PURE__*/React.createElement("div", {
+    role: "rowgroup"
+  }, /*#__PURE__*/React.createElement(Items, {
+    items: items,
+    loadingLabel: loadingLabel,
+    render: render
+  }));
+}
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export default Rows;

package/dist/es2019/components/table-tree.js

@@ -1,13 +1,11 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /* eslint-disable react/prop-types */
-import React, { Component } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import Cell from './cell';
 import Header from './header';
 import Headers from './headers';
 import { TableTreeContext } from './internal/context';
 import Row from './row';
 import Rows from './rows';
-class Content extends Object {}
 
 /**
  * This is hard-coded here because our actual <TableTree /> has no typings
@@ -18,91 +16,69 @@ class Content extends Object {}
  * Defining it here for now lets us provide *something* without much headache.
  */
 
-export default class TableTree extends Component {
-  constructor(...args) {
-    super(...args);
-    _defineProperty(this, "state", {
-      columnWidths: []
-    });
-    _defineProperty(this, "setColumnWidth", (columnIndex, width) => {
-      const {
-        columnWidths
-      } = this.state;
-      if (width === columnWidths[columnIndex]) {
-        return;
-      }
-      columnWidths[columnIndex] = width;
-      this.setState({
-        columnWidths
-      });
-    });
-    _defineProperty(this, "getColumnWidth", columnIndex => {
-      return this.state && this.state.columnWidths[columnIndex] || null;
-    });
-  }
-  componentDidMount() {
-    const widths = this.props.columnWidths;
-    if (widths) {
-      this.setState({
-        columnWidths: widths
-      }); // eslint-disable-line
+const emptyColumnWidths = [];
+function TableTree({
+  children,
+  columns,
+  columnWidths: defaultColumnWidths = emptyColumnWidths,
+  headers,
+  shouldExpandOnClick,
+  items,
+  mainColumnForExpandCollapseLabel,
+  label,
+  referencedLabel
+}) {
+  const [columnWidths, setColumnWidths] = useState(defaultColumnWidths);
+  const setColumnWidth = useCallback((columnIndex, width) => {
+    if (width === columnWidths[columnIndex]) {
+      return;
     }
-  }
-  render() {
-    const {
-      items,
-      label,
-      referencedLabel,
-      shouldExpandOnClick,
-      headers,
-      columns,
-      columnWidths = [],
-      mainColumnForExpandCollapseLabel
-    } = this.props;
-    const heads = headers && /*#__PURE__*/React.createElement(Headers, null, headers.map((header, index) =>
-    /*#__PURE__*/
-    // eslint-disable-next-line react/no-array-index-key
-    React.createElement(Header, {
-      key: index,
-      columnIndex: index,
-      width: columnWidths[index]
-    }, header)));
-    let rows = null;
-    if (columns && items) {
-      rows = /*#__PURE__*/React.createElement(Rows, {
-        items: items,
-        render: ({
-          id,
-          children,
-          hasChildren,
-          content
-        }) => {
-          return /*#__PURE__*/React.createElement(Row, {
-            itemId: id,
-            items: children,
-            hasChildren: hasChildren,
-            shouldExpandOnClick: shouldExpandOnClick,
-            mainColumnForExpandCollapseLabel: mainColumnForExpandCollapseLabel
-          }, columns.map((CellContent, index) => /*#__PURE__*/React.createElement(Cell
-          // eslint-disable-next-line react/no-array-index-key
-          , {
-            key: index,
-            columnIndex: index,
-            width: columnWidths[index]
-          }, /*#__PURE__*/React.createElement(CellContent, content))));
-        }
-      });
-    }
-    return /*#__PURE__*/React.createElement(TableTreeContext.Provider, {
-      value: {
-        setColumnWidth: this.setColumnWidth,
-        getColumnWidth: this.getColumnWidth
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      role: "treegrid",
-      "aria-readonly": true,
-      "aria-label": label,
-      "aria-labelledby": referencedLabel
-    }, heads, rows, this.props.children));
-  }
-}
+    setColumnWidths(columnWidths => {
+      const newColumnWidths = [...columnWidths];
+      newColumnWidths[columnIndex] = width;
+      return newColumnWidths;
+    });
+  }, [columnWidths]);
+  const getColumnWidth = useCallback(columnIndex => {
+    return columnWidths[columnIndex] || null;
+  }, [columnWidths]);
+  const contextValue = useMemo(() => ({
+    setColumnWidth,
+    getColumnWidth
+  }), [setColumnWidth, getColumnWidth]);
+  const heads = headers && /*#__PURE__*/React.createElement(Headers, null, headers.map((header, index) => /*#__PURE__*/React.createElement(Header, {
+    key: index,
+    columnIndex: index,
+    width: columnWidths[index]
+  }, header)));
+  return /*#__PURE__*/React.createElement(TableTreeContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement("div", {
+    role: "treegrid",
+    "aria-readonly": true,
+    "aria-label": label,
+    "aria-labelledby": referencedLabel
+  }, heads, columns && items && /*#__PURE__*/React.createElement(Rows, {
+    items: items,
+    render: ({
+      id,
+      children,
+      content
+    }) => /*#__PURE__*/React.createElement(Row, {
+      itemId: id,
+      items: children,
+      hasChildren: !!children && children.length > 0,
+      shouldExpandOnClick: shouldExpandOnClick,
+      mainColumnForExpandCollapseLabel: mainColumnForExpandCollapseLabel
+    }, columns.map((CellContent, index) => {
+      return /*#__PURE__*/React.createElement(Cell, {
+        key: `cell-${index}`,
+        columnIndex: index,
+        width: columnWidths[index]
+      }, /*#__PURE__*/React.createElement(CellContent, content));
+    }))
+  }), children));
+}
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export default TableTree;

package/dist/esm/components/cell.js

@@ -1,48 +1,29 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 var _excluded = ["children", "singleLine", "indentLevel", "width", "className"];
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-import React, { Component } from 'react';
+import React from 'react';
 import CommonCell from './internal/common-cell';
 import OverflowContainer from './internal/overflow-container';
 import { indentBase } from './internal/styled';
 import withColumnWidth from './internal/with-column-width';
-var CellComponent = /*#__PURE__*/function (_Component) {
-  _inherits(CellComponent, _Component);
-  var _super = _createSuper(CellComponent);
-  function CellComponent() {
-    _classCallCheck(this, CellComponent);
-    return _super.apply(this, arguments);
-  }
-  _createClass(CellComponent, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        children = _this$props.children,
-        singleLine = _this$props.singleLine,
-        indentLevel = _this$props.indentLevel,
-        width = _this$props.width,
-        className = _this$props.className,
-        props = _objectWithoutProperties(_this$props, _excluded);
-      return /*#__PURE__*/React.createElement(CommonCell, _extends({
-        indent: indentLevel ? "calc(".concat(indentBase, " * ").concat(indentLevel, ")") : undefined,
-        width: width
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-        ,
-        className: className
-      }, props), /*#__PURE__*/React.createElement(OverflowContainer, {
-        isSingleLine: singleLine
-      }, children));
-    }
-  }]);
-  return CellComponent;
-}(Component);
+var CellComponent = function CellComponent(_ref) {
+  var children = _ref.children,
+    singleLine = _ref.singleLine,
+    indentLevel = _ref.indentLevel,
+    width = _ref.width,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(CommonCell, _extends({
+    indent: indentLevel ? "calc(".concat(indentBase, " * ").concat(indentLevel, ")") : undefined,
+    width: width
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: className
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  }, props), /*#__PURE__*/React.createElement(OverflowContainer, {
+    isSingleLine: singleLine
+  }, children));
+};
 var Cell = withColumnWidth(CellComponent);
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc