From b0b7640696e3f7952c5656f14f080d74ac431232 Mon Sep 17 00:00:00 2001
From: Dylan <99700808+dkilgore-eightfold@users.noreply.github.com>
Date: Thu, 19 Oct 2023 10:06:58 -0700
Subject: [PATCH] feat: table: add rowexpanddisabled prop (#731)

---
 src/components/Table/ExpandIcon.tsx           |  23 ++-
 .../Table/Internal/Body/Body.types.ts         |   2 +
 .../Table/Internal/Body/BodyRow.tsx           | 142 ++++++++++--------
 src/components/Table/Internal/Body/index.tsx  |   3 +
 .../Table/Internal/Hooks/useColumns.tsx       |  53 +++++--
 src/components/Table/Internal/OcTable.tsx     |   2 +
 .../Table/Internal/OcTable.types.ts           |  24 ++-
 .../Table/Internal/Tests/ExpandRow.test.js    |  21 +++
 .../Table/Internal/Utilities/expandUtil.tsx   |  16 +-
 src/components/Table/Styles/mixins.scss       |   6 +-
 src/components/Table/Styles/table.module.scss |  11 +-
 src/components/Table/Table.stories.tsx        |   2 +
 src/components/Table/Table.tsx                |   6 +-
 .../__snapshots__/Table.expand.test.tsx.snap  |  96 ++++++------
 14 files changed, 258 insertions(+), 149 deletions(-)

diff --git a/src/components/Table/ExpandIcon.tsx b/src/components/Table/ExpandIcon.tsx
index 9c9779c24..f20cba73c 100644
--- a/src/components/Table/ExpandIcon.tsx
+++ b/src/components/Table/ExpandIcon.tsx
@@ -4,10 +4,11 @@ import { mergeClasses } from '../../shared/utilities';
 import styles from './Styles/table.module.scss';
 
 interface DefaultExpandIconProps<RecordType> {
+  expandable: boolean;
+  expanded: boolean;
   onExpand: (record: RecordType, e: React.MouseEvent<HTMLElement>) => void;
   record: RecordType;
-  expanded: boolean;
-  expandable: boolean;
+  disabled?: boolean;
 }
 
 function renderExpandIcon(collapseText: string, expandText: string) {
@@ -16,14 +17,11 @@ function renderExpandIcon(collapseText: string, expandText: string) {
     record,
     expanded,
     expandable,
+    disabled,
   }: DefaultExpandIconProps<RecordType>) {
     return (
       <button
-        type="button"
-        onClick={(e) => {
-          onExpand(record, e!);
-          e.stopPropagation();
-        }}
+        aria-label={expanded ? collapseText : expandText}
         className={mergeClasses([
           styles.tableRowExpandIcon,
           { [styles.tableRowExpandIconSpaced]: !expandable },
@@ -31,8 +29,17 @@ function renderExpandIcon(collapseText: string, expandText: string) {
           {
             [styles.tableRowExpandIconCollapsed]: expandable && !expanded,
           },
+          { [styles.tableRowExpandIconDisabled]: !!disabled },
         ])}
-        aria-label={expanded ? collapseText : expandText}
+        disabled={disabled}
+        onClick={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+          if (disabled) {
+            return;
+          }
+          onExpand(record, e!);
+          e?.stopPropagation();
+        }}
+        type="button"
       />
     );
   };
diff --git a/src/components/Table/Internal/Body/Body.types.ts b/src/components/Table/Internal/Body/Body.types.ts
index edcd4d8db..76613bfed 100644
--- a/src/components/Table/Internal/Body/Body.types.ts
+++ b/src/components/Table/Internal/Body/Body.types.ts
@@ -37,6 +37,7 @@ export interface BodyRowProps<RecordType> {
   cellComponent: CustomizeComponent;
   onRow: GetComponentProps<RecordType>;
   rowExpandable: (record: RecordType) => boolean;
+  rowExpandDisabled?: (record: RecordType) => boolean;
   indent?: number;
   rowKey: React.Key;
   getRowKey: GetRowKey<RecordType>;
@@ -72,6 +73,7 @@ export interface BodyProps<RecordType> {
   expandedKeys: Set<Key>;
   onRow: GetComponentProps<RecordType>;
   rowExpandable: (record: RecordType) => boolean;
+  rowExpandDisabled?: (record: RecordType) => boolean;
   emptyNode: React.ReactNode;
   childrenColumnName: string;
   /**
diff --git a/src/components/Table/Internal/Body/BodyRow.tsx b/src/components/Table/Internal/Body/BodyRow.tsx
index 5393be98e..42ccba0f0 100644
--- a/src/components/Table/Internal/Body/BodyRow.tsx
+++ b/src/components/Table/Internal/Body/BodyRow.tsx
@@ -4,9 +4,14 @@ import Cell from '../Cell';
 import TableContext from '../Context/TableContext';
 import BodyContext from '../Context/BodyContext';
 import { getColumnsKey } from '../Utilities/valueUtil';
-import type { ColumnType } from '../OcTable.types';
+import type {
+  ColumnType,
+  DefaultRecordType,
+  TriggerEventHandler,
+} from '../OcTable.types';
 import { BodyRowProps } from './Body.types';
 import ExpandedRow from './ExpandedRow';
+import { FixedInfo } from '../Utilities/fixUtil';
 
 import styles from '../octable.module.scss';
 
@@ -21,6 +26,7 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
     renderIndex,
     rowKey,
     rowExpandable,
+    rowExpandDisabled,
     expandedKeys,
     onRow,
     indent = 0,
@@ -42,9 +48,9 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
     expandIcon,
     expandedRowRender,
   } = useContext(BodyContext);
-  const [expandRended, setExpandRended] = useState(false);
+  const [expandRended, setExpandRended] = useState<boolean>(false);
 
-  const expanded = expandedKeys && expandedKeys.has(props.recordKey);
+  const expanded: boolean = expandedKeys?.has(props.recordKey);
 
   useEffect(() => {
     if (expanded) {
@@ -52,16 +58,22 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
     }
   }, [expanded]);
 
-  const rowSupportExpand =
+  const rowSupportExpand: boolean =
     expandableType === 'row' && (!rowExpandable || rowExpandable(record));
+  const hasDisabled: boolean =
+    expandableType === 'row' && rowExpandDisabled
+      ? rowExpandDisabled(record)
+      : false;
   // Only when row is not expandable and `children` exist in record
-  const nestExpandable = expandableType === 'nest';
+  const nestExpandable: boolean = expandableType === 'nest';
   const hasNestChildren: boolean =
     childrenColumnName && record && (record as any)[childrenColumnName];
-  const mergedExpandable = rowSupportExpand || nestExpandable;
+  const mergedExpandable: boolean = rowSupportExpand || nestExpandable;
 
   // ======================== Expandable =========================
-  const onExpandRef = useRef(onTriggerExpand);
+  const onExpandRef: React.MutableRefObject<
+    TriggerEventHandler<DefaultRecordType>
+  > = useRef(onTriggerExpand);
   onExpandRef.current = onTriggerExpand;
 
   const onInternalTriggerExpand = (
@@ -92,7 +104,7 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
     computeRowClassName = rowClassName(record, index, indent);
   }
 
-  const columnsKey = getColumnsKey(flattenColumns);
+  const columnsKey: React.Key[] = getColumnsKey(flattenColumns);
   const baseRowNode = (
     <RowComponent
       {...additionalProps}
@@ -102,7 +114,7 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
         'table-row',
         `table-row-level-${indent}`,
         computeRowClassName,
-        additionalProps && additionalProps.className,
+        additionalProps?.className,
       ])}
       style={{
         ...style,
@@ -118,59 +130,62 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
         additionalProps?.onMouseLeave(e);
       }}
     >
-      {flattenColumns.map((column: ColumnType<RecordType>, colIndex) => {
-        const { render, dataIndex, classNames: columnClassName } = column;
-
-        const key = columnsKey[colIndex];
-        const fixedInfo = fixedInfoList[colIndex];
-
-        // ============= Used for nest expandable =============
-        let appendCellNode: React.ReactNode;
-        if (colIndex === 0 && nestExpandable) {
-          appendCellNode = (
-            <>
-              <span
-                style={{
-                  paddingLeft: `${indentSize * indent}px`,
-                }}
-                className={`table-row-indent indent-level-${indent}`}
-              />
-              {expandIcon({
-                expanded,
-                expandable: hasNestChildren,
-                record,
-                onExpand: onInternalTriggerExpand,
-              })}
-            </>
+      {flattenColumns.map(
+        (column: ColumnType<RecordType>, colIndex: number) => {
+          const { render, dataIndex, classNames: columnClassName } = column;
+
+          const key: React.Key = columnsKey[colIndex];
+          const fixedInfo: FixedInfo = fixedInfoList[colIndex];
+
+          // ============= Used for nest expandable =============
+          let appendCellNode: React.ReactNode;
+          if (colIndex === 0 && nestExpandable) {
+            appendCellNode = (
+              <>
+                <span
+                  style={{
+                    paddingLeft: `${indentSize * indent}px`,
+                  }}
+                  className={`table-row-indent indent-level-${indent}`}
+                />
+                {expandIcon({
+                  expanded,
+                  expandable: hasNestChildren,
+                  record,
+                  onExpand: onInternalTriggerExpand,
+                  disabled: hasDisabled,
+                })}
+              </>
+            );
+          }
+
+          let additionalCellProps: React.HTMLAttributes<HTMLElement>;
+          if (column.onCell) {
+            additionalCellProps = column.onCell(record, index);
+          }
+
+          return (
+            <Cell
+              classNames={columnClassName}
+              ellipsis={column.ellipsis}
+              align={column.align}
+              verticalAlign={column.verticalAlign}
+              component={cellComponent}
+              key={key}
+              record={record}
+              index={index}
+              renderIndex={renderIndex}
+              dataIndex={dataIndex}
+              render={render}
+              shouldCellUpdate={column.shouldCellUpdate}
+              expanded={appendCellNode && expanded}
+              {...fixedInfo}
+              appendNode={appendCellNode}
+              additionalProps={additionalCellProps}
+            />
           );
         }
-
-        let additionalCellProps: React.HTMLAttributes<HTMLElement>;
-        if (column.onCell) {
-          additionalCellProps = column.onCell(record, index);
-        }
-
-        return (
-          <Cell
-            classNames={columnClassName}
-            ellipsis={column.ellipsis}
-            align={column.align}
-            verticalAlign={column.verticalAlign}
-            component={cellComponent}
-            key={key}
-            record={record}
-            index={index}
-            renderIndex={renderIndex}
-            dataIndex={dataIndex}
-            render={render}
-            shouldCellUpdate={column.shouldCellUpdate}
-            expanded={appendCellNode && expanded}
-            {...fixedInfo}
-            appendNode={appendCellNode}
-            additionalProps={additionalCellProps}
-          />
-        );
-      })}
+      )}
     </RowComponent>
   );
 
@@ -183,8 +198,11 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
       indent + 1,
       expanded
     );
-    const computedExpandedRowClassName =
-      expandedRowClassName && expandedRowClassName(record, index, indent);
+    const computedExpandedRowClassName: string = expandedRowClassName?.(
+      record,
+      index,
+      indent
+    );
     expandRowNode = (
       <ExpandedRow
         expanded={expanded}
diff --git a/src/components/Table/Internal/Body/index.tsx b/src/components/Table/Internal/Body/index.tsx
index 3cd85405c..bb5c451b1 100644
--- a/src/components/Table/Internal/Body/index.tsx
+++ b/src/components/Table/Internal/Body/index.tsx
@@ -28,6 +28,7 @@ function Body<RecordType>({
   expandedKeys,
   onRow,
   rowExpandable,
+  rowExpandDisabled,
   emptyNode,
   childrenColumnName,
   onRowHoverEnter,
@@ -91,6 +92,7 @@ function Body<RecordType>({
             onRow={onRow}
             getRowKey={getRowKey}
             rowExpandable={rowExpandable}
+            rowExpandDisabled={rowExpandDisabled}
             childrenColumnName={childrenColumnName}
             indent={indent}
             onRowHoverEnter={onRowHoverEnter}
@@ -137,6 +139,7 @@ function Body<RecordType>({
     childrenColumnName,
     onColumnResize,
     rowExpandable,
+    rowExpandDisabled,
     flattenData,
   ]);
 
diff --git a/src/components/Table/Internal/Hooks/useColumns.tsx b/src/components/Table/Internal/Hooks/useColumns.tsx
index c78154bea..2363c0d73 100644
--- a/src/components/Table/Internal/Hooks/useColumns.tsx
+++ b/src/components/Table/Internal/Hooks/useColumns.tsx
@@ -10,8 +10,7 @@ import type {
   RenderExpandIcon,
   ColumnGroupType,
 } from '../OcTable.types';
-import { INTERNAL_COL_DEFINE } from '../constant';
-import { EXPAND_COLUMN } from '../constant';
+import { EXPAND_COLUMN, INTERNAL_COL_DEFINE } from '../constant';
 
 import styles from '../octable.module.scss';
 
@@ -119,6 +118,7 @@ function useColumns<RecordType>(
     onTriggerExpand,
     expandIcon,
     rowExpandable,
+    rowExpandDisabled,
     direction,
     expandRowByClick,
     columnWidth,
@@ -132,6 +132,7 @@ function useColumns<RecordType>(
     onTriggerExpand: TriggerEventHandler<RecordType>;
     expandIcon?: RenderExpandIcon<RecordType>;
     rowExpandable?: (record: RecordType) => boolean;
+    rowExpandDisabled?: (record: RecordType) => boolean;
     direction?: string;
     expandRowByClick?: boolean;
     columnWidth?: number | string;
@@ -149,7 +150,10 @@ function useColumns<RecordType>(
   // ========================== Expand ==========================
   const withExpandColumns = useMemo<ColumnsType<RecordType>>(() => {
     if (expandable) {
-      let cloneColumns = baseColumns.slice();
+      let cloneColumns: (
+        | ColumnGroupType<RecordType>
+        | ColumnType<RecordType>
+      )[] = baseColumns.slice();
 
       // >>> Insert expand column if not exist
       if (!cloneColumns.includes(EXPAND_COLUMN)) {
@@ -159,14 +163,15 @@ function useColumns<RecordType>(
         }
       }
 
-      const expandColumnIndex = cloneColumns.indexOf(EXPAND_COLUMN);
+      const expandColumnIndex: number = cloneColumns.indexOf(EXPAND_COLUMN);
       cloneColumns = cloneColumns.filter(
         (column, index) =>
           column !== EXPAND_COLUMN || index === expandColumnIndex
       );
 
       // >>> Check if expand column need to fixed
-      const prevColumn = baseColumns[expandColumnIndex];
+      const prevColumn: ColumnGroupType<RecordType> | ColumnType<RecordType> =
+        baseColumns[expandColumnIndex];
 
       let fixedColumn: FixedType | null;
       if (fixed === 'left' || fixed) {
@@ -188,30 +193,48 @@ function useColumns<RecordType>(
         className: styles.tableRowExpandIconCell,
         width: columnWidth,
         render: (_: any, record: any, index: number) => {
-          const rowKey = getRowKey(record, index);
-          const expanded = expandedKeys.has(rowKey);
-          const recordExpandable = rowExpandable ? rowExpandable(record) : true;
+          const rowKey: React.Key = getRowKey(record, index);
+          const expanded: boolean = expandedKeys.has(rowKey);
+          const recordExpandable: boolean = rowExpandable
+            ? rowExpandable(record)
+            : true;
+          const recordExpandDisabled: boolean = rowExpandDisabled
+            ? rowExpandDisabled(record)
+            : false;
 
-          const icon = expandIcon({
-            expanded,
+          const icon: React.ReactNode = expandIcon({
             expandable: recordExpandable,
-            record,
+            expanded,
             onExpand: onTriggerExpand,
+            record,
+            disabled: recordExpandDisabled,
           });
 
           if (expandRowByClick) {
-            return <span onClick={(e) => e.stopPropagation()}>{icon}</span>;
+            return (
+              <span
+                onClick={(e: React.MouseEvent<HTMLSpanElement, MouseEvent>) =>
+                  e?.stopPropagation()
+                }
+              >
+                {icon}
+              </span>
+            );
           }
           return icon;
         },
       };
 
-      return cloneColumns.map((col) =>
-        col === EXPAND_COLUMN ? expandColumn : col
+      return cloneColumns.map(
+        (col: ColumnGroupType<RecordType> | ColumnType<RecordType>) =>
+          col === EXPAND_COLUMN ? expandColumn : col
       );
     }
 
-    return baseColumns.filter((col) => col !== EXPAND_COLUMN);
+    return baseColumns.filter(
+      (col: ColumnGroupType<RecordType> | ColumnType<RecordType>) =>
+        col !== EXPAND_COLUMN
+    );
   }, [expandable, baseColumns, getRowKey, expandedKeys, expandIcon, direction]);
 
   // ========================= Transform ========================
diff --git a/src/components/Table/Internal/OcTable.tsx b/src/components/Table/Internal/OcTable.tsx
index 7ed67afb1..929ea78b9 100644
--- a/src/components/Table/Internal/OcTable.tsx
+++ b/src/components/Table/Internal/OcTable.tsx
@@ -167,6 +167,7 @@ function OcTable<RecordType extends DefaultRecordType>(
     onExpandedRowsChange,
     expandRowByClick,
     rowExpandable,
+    rowExpandDisabled,
     expandedRowClassName,
     childrenColumnName,
     indentSize,
@@ -534,6 +535,7 @@ function OcTable<RecordType extends DefaultRecordType>(
       measureColumnWidth={fixHeader || horizontalScroll || isSticky}
       expandedKeys={mergedExpandedKeys}
       rowExpandable={rowExpandable}
+      rowExpandDisabled={rowExpandDisabled}
       getRowKey={getRowKey}
       onRow={onRow}
       emptyNode={emptyNode}
diff --git a/src/components/Table/Internal/OcTable.types.ts b/src/components/Table/Internal/OcTable.types.ts
index 0c4a75aae..561f72ae0 100644
--- a/src/components/Table/Internal/OcTable.types.ts
+++ b/src/components/Table/Internal/OcTable.types.ts
@@ -307,10 +307,26 @@ export type ExpandedRowRender<ValueType> = (
 ) => React.ReactNode;
 
 export interface RenderExpandIconProps<RecordType> {
-  expanded: boolean;
-  record: RecordType;
+  /**
+   * Whether the expand icon button row is expandable.
+   */
   expandable: boolean;
+  /**
+   * Whether the expand icon button row is expanded.
+   */
+  expanded: boolean;
+  /**
+   * The expand icon row onExpand callback.
+   */
   onExpand: TriggerEventHandler<RecordType>;
+  /**
+   * The expand icon row record.
+   */
+  record: RecordType;
+  /**
+   * Whether the expand icon button is disabled.
+   */
+  disabled?: boolean;
 }
 
 export type RenderExpandIcon<RecordType> = (
@@ -380,6 +396,10 @@ export interface ExpandableConfig<RecordType> {
    * Enable row expandable.
    */
   rowExpandable?: (record: RecordType) => boolean;
+  /**
+   * Whether the expandability of a row is disabled.
+   */
+  rowExpandDisabled?: (record: RecordType) => boolean;
   /**
    * Show expand column.
    * @default true
diff --git a/src/components/Table/Internal/Tests/ExpandRow.test.js b/src/components/Table/Internal/Tests/ExpandRow.test.js
index 68cb31ab6..c53ab85b1 100644
--- a/src/components/Table/Internal/Tests/ExpandRow.test.js
+++ b/src/components/Table/Internal/Tests/ExpandRow.test.js
@@ -512,6 +512,27 @@ describe('Table.Expand', () => {
     ).toBeTruthy();
   });
 
+  it('some rows expandability should be disabled', () => {
+    const wrapper = mount(
+      createTable({
+        expandableConfig: {
+          expandedRowRender,
+          rowExpandDisabled: ({ key }) => key === 1,
+        },
+      })
+    );
+
+    expect(
+      wrapper.find('tbody tr').first().find('.table-row-spaced')
+    ).toBeTruthy();
+    expect(
+      wrapper.find('tbody tr').last().find('.table-row-collapsed')
+    ).toBeTruthy();
+    expect(
+      wrapper.find('tbody tr').last().find('.table-row-expand-icon-disabled')
+    ).toBeTruthy();
+  });
+
   it('`defaultExpandAllRows` with `childrenColumnName`', () => {
     const data = [
       {
diff --git a/src/components/Table/Internal/Utilities/expandUtil.tsx b/src/components/Table/Internal/Utilities/expandUtil.tsx
index f1c848d7b..82e5f44f4 100644
--- a/src/components/Table/Internal/Utilities/expandUtil.tsx
+++ b/src/components/Table/Internal/Utilities/expandUtil.tsx
@@ -5,10 +5,11 @@ import type { RenderExpandIconProps, Key, GetRowKey } from '../OcTable.types';
 import styles from '../octable.module.scss';
 
 export function renderExpandIcon<RecordType>({
-  record,
-  onExpand,
-  expanded,
   expandable,
+  expanded,
+  onExpand,
+  record,
+  disabled,
 }: RenderExpandIconProps<RecordType>) {
   const expandClassName = styles.tableRowExpandIcon;
 
@@ -20,9 +21,14 @@ export function renderExpandIcon<RecordType>({
     );
   }
 
-  const onClick: React.MouseEventHandler<HTMLElement> = (event) => {
+  const onClick: React.MouseEventHandler<HTMLElement> = (
+    event: React.MouseEvent<HTMLElement, MouseEvent>
+  ) => {
+    if (disabled) {
+      return;
+    }
     onExpand(record, event);
-    event.stopPropagation();
+    event?.stopPropagation();
   };
 
   return (
diff --git a/src/components/Table/Styles/mixins.scss b/src/components/Table/Styles/mixins.scss
index 3e3bdf589..09d7094a6 100644
--- a/src/components/Table/Styles/mixins.scss
+++ b/src/components/Table/Styles/mixins.scss
@@ -9,12 +9,12 @@ $border: $border-width solid $border-color;
   cursor: pointer;
   transition: color $motion-duration-extra-fast;
 
-  &:focus,
-  &:hover {
+  &:focus:not(:disabled),
+  &:hover:not(:disabled) {
     color: var(--primary-color);
   }
 
-  &:active {
+  &:active:not(:disabled) {
     color: var(--primary-color);
   }
 }
diff --git a/src/components/Table/Styles/table.module.scss b/src/components/Table/Styles/table.module.scss
index f84da0835..294590805 100644
--- a/src/components/Table/Styles/table.module.scss
+++ b/src/components/Table/Styles/table.module.scss
@@ -459,9 +459,9 @@
       transition: all $motion-duration-extra-fast;
       user-select: none;
 
-      &:focus,
-      &:hover,
-      &:active {
+      &:focus:not(:disabled),
+      &:hover:not(:disabled),
+      &:active:not(:disabled) {
         border-color: var(--table-header-icon-color);
       }
 
@@ -518,6 +518,11 @@
       &:focus-visible {
         outline: none;
       }
+
+      &-disabled {
+        cursor: not-allowed;
+        opacity: $disabled-alpha-value;
+      }
     }
 
     tr {
diff --git a/src/components/Table/Table.stories.tsx b/src/components/Table/Table.stories.tsx
index c81fb90e3..e77553894 100644
--- a/src/components/Table/Table.stories.tsx
+++ b/src/components/Table/Table.stories.tsx
@@ -1620,6 +1620,7 @@ Expandable_Row.args = {
       <p style={{ margin: 0 }}>{record.description}</p>
     ),
     rowExpandable: (record: DataType) => record.name !== 'Farida Ashfaq',
+    rowExpandDisabled: (record: DataType) => record.name === 'Cobbey Deevey',
   },
 };
 
@@ -1635,6 +1636,7 @@ Order_Select_And_Expand_Column.args = {
       <p style={{ margin: 0 }}>{record.description}</p>
     ),
     rowExpandable: (record: DataType) => record.name !== 'Farida Ashfaq',
+    rowExpandDisabled: (record: DataType) => record.name === 'Cobbey Deevey',
   },
 };
 
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index ad23e00d2..facf0d094 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -13,7 +13,7 @@ import { mergeClasses, omit, scrollTo } from '../../shared/utilities';
 import OcTable, { Summary } from './Internal';
 import type { OcTableProps } from './Internal/OcTable.types';
 import { convertChildrenToColumns } from './Internal/Hooks/useColumns';
-import { Spinner, SpinnerSize } from '../Spinner';
+import { Spinner } from '../Spinner';
 import { Pagination } from '../Pagination';
 import usePagination, {
   DEFAULT_PAGE_SIZE,
@@ -626,8 +626,8 @@ function InternalTable<RecordType extends object = any>(
   // ========================== Expandable ==========================
 
   mergedExpandableConfig.expandIcon = renderExpandIcon(
-    expandText,
-    collapseText
+    collapseText,
+    expandText
   );
 
   // Indent size
diff --git a/src/components/Table/Tests/__snapshots__/Table.expand.test.tsx.snap b/src/components/Table/Tests/__snapshots__/Table.expand.test.tsx.snap
index 525e89869..d681d993b 100644
--- a/src/components/Table/Tests/__snapshots__/Table.expand.test.tsx.snap
+++ b/src/components/Table/Tests/__snapshots__/Table.expand.test.tsx.snap
@@ -105,7 +105,7 @@ LoadedCheerio {
                                         "namespace": "http://www.w3.org/1999/xhtml",
                                         "next": Node {
                                           "attribs": Object {
-                                            "aria-label": "Expand row",
+                                            "aria-label": "Collapse row",
                                             "class": "table-row-expand-icon table-expanded-row",
                                             "type": "button",
                                           },
@@ -141,7 +141,7 @@ LoadedCheerio {
                                       },
                                       Node {
                                         "attribs": Object {
-                                          "aria-label": "Expand row",
+                                          "aria-label": "Collapse row",
                                           "class": "table-row-expand-icon table-expanded-row",
                                           "type": "button",
                                         },
@@ -221,7 +221,7 @@ LoadedCheerio {
                                           "namespace": "http://www.w3.org/1999/xhtml",
                                           "next": Node {
                                             "attribs": Object {
-                                              "aria-label": "Collapse row",
+                                              "aria-label": "Expand row",
                                               "class": "table-row-expand-icon table-row-expand-icon-spaced",
                                               "type": "button",
                                             },
@@ -257,7 +257,7 @@ LoadedCheerio {
                                         },
                                         Node {
                                           "attribs": Object {
-                                            "aria-label": "Collapse row",
+                                            "aria-label": "Expand row",
                                             "class": "table-row-expand-icon table-row-expand-icon-spaced",
                                             "type": "button",
                                           },
@@ -362,7 +362,7 @@ LoadedCheerio {
                                         "namespace": "http://www.w3.org/1999/xhtml",
                                         "next": Node {
                                           "attribs": Object {
-                                            "aria-label": "Collapse row",
+                                            "aria-label": "Expand row",
                                             "class": "table-row-expand-icon table-row-expand-icon-spaced",
                                             "type": "button",
                                           },
@@ -398,7 +398,7 @@ LoadedCheerio {
                                       },
                                       Node {
                                         "attribs": Object {
-                                          "aria-label": "Collapse row",
+                                          "aria-label": "Expand row",
                                           "class": "table-row-expand-icon table-row-expand-icon-spaced",
                                           "type": "button",
                                         },
@@ -480,7 +480,7 @@ LoadedCheerio {
                                           "namespace": "http://www.w3.org/1999/xhtml",
                                           "next": Node {
                                             "attribs": Object {
-                                              "aria-label": "Expand row",
+                                              "aria-label": "Collapse row",
                                               "class": "table-row-expand-icon table-expanded-row",
                                               "type": "button",
                                             },
@@ -516,7 +516,7 @@ LoadedCheerio {
                                         },
                                         Node {
                                           "attribs": Object {
-                                            "aria-label": "Expand row",
+                                            "aria-label": "Collapse row",
                                             "class": "table-row-expand-icon table-expanded-row",
                                             "type": "button",
                                           },
@@ -701,7 +701,7 @@ LoadedCheerio {
                                       "namespace": "http://www.w3.org/1999/xhtml",
                                       "next": Node {
                                         "attribs": Object {
-                                          "aria-label": "Expand row",
+                                          "aria-label": "Collapse row",
                                           "class": "table-row-expand-icon table-expanded-row",
                                           "type": "button",
                                         },
@@ -737,7 +737,7 @@ LoadedCheerio {
                                     },
                                     Node {
                                       "attribs": Object {
-                                        "aria-label": "Expand row",
+                                        "aria-label": "Collapse row",
                                         "class": "table-row-expand-icon table-expanded-row",
                                         "type": "button",
                                       },
@@ -817,7 +817,7 @@ LoadedCheerio {
                                         "namespace": "http://www.w3.org/1999/xhtml",
                                         "next": Node {
                                           "attribs": Object {
-                                            "aria-label": "Collapse row",
+                                            "aria-label": "Expand row",
                                             "class": "table-row-expand-icon table-row-expand-icon-spaced",
                                             "type": "button",
                                           },
@@ -853,7 +853,7 @@ LoadedCheerio {
                                       },
                                       Node {
                                         "attribs": Object {
-                                          "aria-label": "Collapse row",
+                                          "aria-label": "Expand row",
                                           "class": "table-row-expand-icon table-row-expand-icon-spaced",
                                           "type": "button",
                                         },
@@ -958,7 +958,7 @@ LoadedCheerio {
                                       "namespace": "http://www.w3.org/1999/xhtml",
                                       "next": Node {
                                         "attribs": Object {
-                                          "aria-label": "Collapse row",
+                                          "aria-label": "Expand row",
                                           "class": "table-row-expand-icon table-row-expand-icon-spaced",
                                           "type": "button",
                                         },
@@ -994,7 +994,7 @@ LoadedCheerio {
                                     },
                                     Node {
                                       "attribs": Object {
-                                        "aria-label": "Collapse row",
+                                        "aria-label": "Expand row",
                                         "class": "table-row-expand-icon table-row-expand-icon-spaced",
                                         "type": "button",
                                       },
@@ -1076,7 +1076,7 @@ LoadedCheerio {
                                         "namespace": "http://www.w3.org/1999/xhtml",
                                         "next": Node {
                                           "attribs": Object {
-                                            "aria-label": "Expand row",
+                                            "aria-label": "Collapse row",
                                             "class": "table-row-expand-icon table-expanded-row",
                                             "type": "button",
                                           },
@@ -1112,7 +1112,7 @@ LoadedCheerio {
                                       },
                                       Node {
                                         "attribs": Object {
-                                          "aria-label": "Expand row",
+                                          "aria-label": "Collapse row",
                                           "class": "table-row-expand-icon table-expanded-row",
                                           "type": "button",
                                         },
@@ -1255,7 +1255,7 @@ LoadedCheerio {
                                     "namespace": "http://www.w3.org/1999/xhtml",
                                     "next": Node {
                                       "attribs": Object {
-                                        "aria-label": "Expand row",
+                                        "aria-label": "Collapse row",
                                         "class": "table-row-expand-icon table-expanded-row",
                                         "type": "button",
                                       },
@@ -1291,7 +1291,7 @@ LoadedCheerio {
                                   },
                                   Node {
                                     "attribs": Object {
-                                      "aria-label": "Expand row",
+                                      "aria-label": "Collapse row",
                                       "class": "table-row-expand-icon table-expanded-row",
                                       "type": "button",
                                     },
@@ -1371,7 +1371,7 @@ LoadedCheerio {
                                       "namespace": "http://www.w3.org/1999/xhtml",
                                       "next": Node {
                                         "attribs": Object {
-                                          "aria-label": "Collapse row",
+                                          "aria-label": "Expand row",
                                           "class": "table-row-expand-icon table-row-expand-icon-spaced",
                                           "type": "button",
                                         },
@@ -1407,7 +1407,7 @@ LoadedCheerio {
                                     },
                                     Node {
                                       "attribs": Object {
-                                        "aria-label": "Collapse row",
+                                        "aria-label": "Expand row",
                                         "class": "table-row-expand-icon table-row-expand-icon-spaced",
                                         "type": "button",
                                       },
@@ -1512,7 +1512,7 @@ LoadedCheerio {
                                     "namespace": "http://www.w3.org/1999/xhtml",
                                     "next": Node {
                                       "attribs": Object {
-                                        "aria-label": "Collapse row",
+                                        "aria-label": "Expand row",
                                         "class": "table-row-expand-icon table-row-expand-icon-spaced",
                                         "type": "button",
                                       },
@@ -1548,7 +1548,7 @@ LoadedCheerio {
                                   },
                                   Node {
                                     "attribs": Object {
-                                      "aria-label": "Collapse row",
+                                      "aria-label": "Expand row",
                                       "class": "table-row-expand-icon table-row-expand-icon-spaced",
                                       "type": "button",
                                     },
@@ -1630,7 +1630,7 @@ LoadedCheerio {
                                       "namespace": "http://www.w3.org/1999/xhtml",
                                       "next": Node {
                                         "attribs": Object {
-                                          "aria-label": "Expand row",
+                                          "aria-label": "Collapse row",
                                           "class": "table-row-expand-icon table-expanded-row",
                                           "type": "button",
                                         },
@@ -1666,7 +1666,7 @@ LoadedCheerio {
                                     },
                                     Node {
                                       "attribs": Object {
-                                        "aria-label": "Expand row",
+                                        "aria-label": "Collapse row",
                                         "class": "table-row-expand-icon table-expanded-row",
                                         "type": "button",
                                       },
@@ -2392,7 +2392,7 @@ LoadedCheerio {
                                           "namespace": "http://www.w3.org/1999/xhtml",
                                           "next": Node {
                                             "attribs": Object {
-                                              "aria-label": "Expand row",
+                                              "aria-label": "Collapse row",
                                               "class": "table-row-expand-icon table-expanded-row",
                                               "type": "button",
                                             },
@@ -2428,7 +2428,7 @@ LoadedCheerio {
                                         },
                                         Node {
                                           "attribs": Object {
-                                            "aria-label": "Expand row",
+                                            "aria-label": "Collapse row",
                                             "class": "table-row-expand-icon table-expanded-row",
                                             "type": "button",
                                           },
@@ -2508,7 +2508,7 @@ LoadedCheerio {
                                             "namespace": "http://www.w3.org/1999/xhtml",
                                             "next": Node {
                                               "attribs": Object {
-                                                "aria-label": "Collapse row",
+                                                "aria-label": "Expand row",
                                                 "class": "table-row-expand-icon table-row-expand-icon-spaced",
                                                 "type": "button",
                                               },
@@ -2544,7 +2544,7 @@ LoadedCheerio {
                                           },
                                           Node {
                                             "attribs": Object {
-                                              "aria-label": "Collapse row",
+                                              "aria-label": "Expand row",
                                               "class": "table-row-expand-icon table-row-expand-icon-spaced",
                                               "type": "button",
                                             },
@@ -2649,7 +2649,7 @@ LoadedCheerio {
                                           "namespace": "http://www.w3.org/1999/xhtml",
                                           "next": Node {
                                             "attribs": Object {
-                                              "aria-label": "Collapse row",
+                                              "aria-label": "Expand row",
                                               "class": "table-row-expand-icon table-row-expand-icon-spaced",
                                               "type": "button",
                                             },
@@ -2685,7 +2685,7 @@ LoadedCheerio {
                                         },
                                         Node {
                                           "attribs": Object {
-                                            "aria-label": "Collapse row",
+                                            "aria-label": "Expand row",
                                             "class": "table-row-expand-icon table-row-expand-icon-spaced",
                                             "type": "button",
                                           },
@@ -2767,7 +2767,7 @@ LoadedCheerio {
                                             "namespace": "http://www.w3.org/1999/xhtml",
                                             "next": Node {
                                               "attribs": Object {
-                                                "aria-label": "Expand row",
+                                                "aria-label": "Collapse row",
                                                 "class": "table-row-expand-icon table-expanded-row",
                                                 "type": "button",
                                               },
@@ -2803,7 +2803,7 @@ LoadedCheerio {
                                           },
                                           Node {
                                             "attribs": Object {
-                                              "aria-label": "Expand row",
+                                              "aria-label": "Collapse row",
                                               "class": "table-row-expand-icon table-expanded-row",
                                               "type": "button",
                                             },
@@ -2988,7 +2988,7 @@ LoadedCheerio {
                                         "namespace": "http://www.w3.org/1999/xhtml",
                                         "next": Node {
                                           "attribs": Object {
-                                            "aria-label": "Expand row",
+                                            "aria-label": "Collapse row",
                                             "class": "table-row-expand-icon table-expanded-row",
                                             "type": "button",
                                           },
@@ -3024,7 +3024,7 @@ LoadedCheerio {
                                       },
                                       Node {
                                         "attribs": Object {
-                                          "aria-label": "Expand row",
+                                          "aria-label": "Collapse row",
                                           "class": "table-row-expand-icon table-expanded-row",
                                           "type": "button",
                                         },
@@ -3104,7 +3104,7 @@ LoadedCheerio {
                                           "namespace": "http://www.w3.org/1999/xhtml",
                                           "next": Node {
                                             "attribs": Object {
-                                              "aria-label": "Collapse row",
+                                              "aria-label": "Expand row",
                                               "class": "table-row-expand-icon table-row-expand-icon-spaced",
                                               "type": "button",
                                             },
@@ -3140,7 +3140,7 @@ LoadedCheerio {
                                         },
                                         Node {
                                           "attribs": Object {
-                                            "aria-label": "Collapse row",
+                                            "aria-label": "Expand row",
                                             "class": "table-row-expand-icon table-row-expand-icon-spaced",
                                             "type": "button",
                                           },
@@ -3245,7 +3245,7 @@ LoadedCheerio {
                                         "namespace": "http://www.w3.org/1999/xhtml",
                                         "next": Node {
                                           "attribs": Object {
-                                            "aria-label": "Collapse row",
+                                            "aria-label": "Expand row",
                                             "class": "table-row-expand-icon table-row-expand-icon-spaced",
                                             "type": "button",
                                           },
@@ -3281,7 +3281,7 @@ LoadedCheerio {
                                       },
                                       Node {
                                         "attribs": Object {
-                                          "aria-label": "Collapse row",
+                                          "aria-label": "Expand row",
                                           "class": "table-row-expand-icon table-row-expand-icon-spaced",
                                           "type": "button",
                                         },
@@ -3363,7 +3363,7 @@ LoadedCheerio {
                                           "namespace": "http://www.w3.org/1999/xhtml",
                                           "next": Node {
                                             "attribs": Object {
-                                              "aria-label": "Expand row",
+                                              "aria-label": "Collapse row",
                                               "class": "table-row-expand-icon table-expanded-row",
                                               "type": "button",
                                             },
@@ -3399,7 +3399,7 @@ LoadedCheerio {
                                         },
                                         Node {
                                           "attribs": Object {
-                                            "aria-label": "Expand row",
+                                            "aria-label": "Collapse row",
                                             "class": "table-row-expand-icon table-expanded-row",
                                             "type": "button",
                                           },
@@ -3542,7 +3542,7 @@ LoadedCheerio {
                                       "namespace": "http://www.w3.org/1999/xhtml",
                                       "next": Node {
                                         "attribs": Object {
-                                          "aria-label": "Expand row",
+                                          "aria-label": "Collapse row",
                                           "class": "table-row-expand-icon table-expanded-row",
                                           "type": "button",
                                         },
@@ -3578,7 +3578,7 @@ LoadedCheerio {
                                     },
                                     Node {
                                       "attribs": Object {
-                                        "aria-label": "Expand row",
+                                        "aria-label": "Collapse row",
                                         "class": "table-row-expand-icon table-expanded-row",
                                         "type": "button",
                                       },
@@ -3658,7 +3658,7 @@ LoadedCheerio {
                                         "namespace": "http://www.w3.org/1999/xhtml",
                                         "next": Node {
                                           "attribs": Object {
-                                            "aria-label": "Collapse row",
+                                            "aria-label": "Expand row",
                                             "class": "table-row-expand-icon table-row-expand-icon-spaced",
                                             "type": "button",
                                           },
@@ -3694,7 +3694,7 @@ LoadedCheerio {
                                       },
                                       Node {
                                         "attribs": Object {
-                                          "aria-label": "Collapse row",
+                                          "aria-label": "Expand row",
                                           "class": "table-row-expand-icon table-row-expand-icon-spaced",
                                           "type": "button",
                                         },
@@ -3799,7 +3799,7 @@ LoadedCheerio {
                                       "namespace": "http://www.w3.org/1999/xhtml",
                                       "next": Node {
                                         "attribs": Object {
-                                          "aria-label": "Collapse row",
+                                          "aria-label": "Expand row",
                                           "class": "table-row-expand-icon table-row-expand-icon-spaced",
                                           "type": "button",
                                         },
@@ -3835,7 +3835,7 @@ LoadedCheerio {
                                     },
                                     Node {
                                       "attribs": Object {
-                                        "aria-label": "Collapse row",
+                                        "aria-label": "Expand row",
                                         "class": "table-row-expand-icon table-row-expand-icon-spaced",
                                         "type": "button",
                                       },
@@ -3917,7 +3917,7 @@ LoadedCheerio {
                                         "namespace": "http://www.w3.org/1999/xhtml",
                                         "next": Node {
                                           "attribs": Object {
-                                            "aria-label": "Expand row",
+                                            "aria-label": "Collapse row",
                                             "class": "table-row-expand-icon table-expanded-row",
                                             "type": "button",
                                           },
@@ -3953,7 +3953,7 @@ LoadedCheerio {
                                       },
                                       Node {
                                         "attribs": Object {
-                                          "aria-label": "Expand row",
+                                          "aria-label": "Collapse row",
                                           "class": "table-row-expand-icon table-expanded-row",
                                           "type": "button",
                                         },