@elliemae/ds-data-table 3.51.0-next.11 → 3.51.0-next.12

package/dist/cjs/configs/useAutocalculated/index.js

@@ -33,10 +33,10 @@ __export(useAutocalculated_exports, {
 module.exports = __toCommonJS(useAutocalculated_exports);
 var React = __toESM(require("react"));
 var import_react = require("react");
+var import_react_virtual = require("react-virtual");
 var import_useTableColsWithAddons = require("../useTableColsWithAddons.js");
 var import_useRowFlattenization = require("../useRowFlattenization.js");
 var import_usePaginationConfig = require("../usePaginationConfig.js");
-var import_react_virtual = require("react-virtual");
 var import_columnsToGrid = require("../../helpers/columnsToGrid.js");
 var import_constants = require("../constants.js");
 var import_useTableResizeCb = require("../useTableResizeCb.js");
@@ -47,18 +47,7 @@ const useAutoCalculated = (propsWithDefaults) => {
   const virtualListRef = (0, import_react.useRef)(null);
   const columnHeaderRef = (0, import_react.useRef)(null);
   const lastSelected = (0, import_react.useRef)(-1);
-  const tableColsWithAddons = (0, import_useTableColsWithAddons.useTableColsWithAddons)(propsWithDefaults);
-  const visibleColumns = (0, import_react.useMemo)(
-    () => tableColsWithAddons.filter((col) => col.accessor === void 0 || !hiddenColumns?.includes(col.accessor)).map((col) => {
-      if (col.columns) {
-        col.columns = col.columns.filter(
-          (subCol) => subCol.accessor === void 0 || !hiddenColumns?.includes(subCol.accessor)
-        );
-      }
-      return col;
-    }),
-    [hiddenColumns, tableColsWithAddons]
-  );
+  const visibleColumns = (0, import_useTableColsWithAddons.useTableColsWithAddons)(propsWithDefaults, hiddenColumns);
   const [flattenedData, allDataFlattened] = (0, import_useRowFlattenization.useRowFlattenization)(propsWithDefaults);
   const [paginatedData, paginationHelpers] = (0, import_usePaginationConfig.usePaginationConfig)(propsWithDefaults, flattenedData);
   const dataLength = (0, import_react.useMemo)(() => (paginatedData || flattenedData).length, [flattenedData, paginatedData]);

package/dist/cjs/configs/useAutocalculated/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/configs/useAutocalculated/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useEffect, useMemo, useRef } from 'react';\nimport { type DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useTableColsWithAddons } from '../useTableColsWithAddons.js';\nimport { useRowFlattenization } from '../useRowFlattenization.js';\nimport { usePaginationConfig } from '../usePaginationConfig.js';\nimport { useVirtual, defaultRangeExtractor, type Range } from 'react-virtual';\nimport { columnsToGrid } from '../../helpers/columnsToGrid.js';\nimport { ColsLayoutStyle } from '../constants.js';\nimport { useTableResizeCb } from '../useTableResizeCb.js';\n\nconst estimateSize = () => 36;\n\nexport const useAutoCalculated = (propsWithDefaults: DSDataTableT.InternalProps): DSDataTableT.UseAutoCalculatedT => {\n  const { actionRef, colsLayoutStyle, hiddenColumns, isLoading } = propsWithDefaults;\n\n  const visibleRangeRef = useRef<Range>({ start: 0, end: 0 });\n  const virtualListRef = useRef<HTMLDivElement | null>(null);\n  const columnHeaderRef = useRef<HTMLDivElement | null>(null);\n  const lastSelected = useRef<number>(-1);\n\n  // ===========================================================================\n  // Column config\n  // ===========================================================================\n  const tableColsWithAddons = useTableColsWithAddons(propsWithDefaults);\n  const visibleColumns = useMemo(\n    () =>\n      tableColsWithAddons\n        .filter((col) => col.accessor === undefined || !hiddenColumns?.includes(col.accessor))\n        .map((col) => {\n          if (col.columns) {\n            col.columns = col.columns.filter(\n              (subCol: DSDataTableT.Column) =>\n                subCol.accessor === undefined || !hiddenColumns?.includes(subCol.accessor),\n            );\n          }\n          return col;\n        }),\n    [hiddenColumns, tableColsWithAddons],\n  );\n\n  // ===========================================================================\n  // Data flattenization and pagination\n  // ===========================================================================\n\n  const [flattenedData, allDataFlattened] = useRowFlattenization(propsWithDefaults);\n\n  const [paginatedData, paginationHelpers] = usePaginationConfig(propsWithDefaults, flattenedData);\n\n  const dataLength = useMemo(() => (paginatedData || flattenedData).length, [flattenedData, paginatedData]);\n\n  // estimateSize should not be really required given what was stated on\n  // https://github.com/tannerlinsley/react-virtual/issues/23\n  const virtualListHelpers = useVirtual({\n    size: dataLength,\n    parentRef: virtualListRef,\n    overscan: 15,\n    paddingStart: columnHeaderRef.current?.getBoundingClientRect()?.height ?? 24,\n    estimateSize,\n    rangeExtractor: React.useCallback((range: Range) => {\n      visibleRangeRef.current = range;\n\n      return defaultRangeExtractor(range);\n    }, []),\n  });\n\n  // ===========================================================================\n  // Empty content config\n  // ===========================================================================\n\n  const isEmptyContent = useMemo(() => !isLoading && flattenedData.length === 0, [isLoading, flattenedData.length]);\n\n  const firstFocuseableColumnHeaderId = useMemo(() => {\n    for (let i = 0; i < visibleColumns.length; i++) {\n      const column = visibleColumns[i];\n      if (column.isFocuseable === false && column.id !== 'expander' && column.id !== 'multiSelecter') {\n        continue;\n      }\n      return column.id;\n    }\n  }, [visibleColumns]);\n\n  // ===========================================================================\n  // Layout config\n  // ===========================================================================\n\n  const gridLayout = useMemo(() => columnsToGrid(visibleColumns, colsLayoutStyle), [colsLayoutStyle, visibleColumns]);\n\n  // We need to listen and update the state based on this props\n  const totalColumnsWidth = useMemo(\n    () =>\n      colsLayoutStyle === ColsLayoutStyle.Fixed\n        ? gridLayout.reduce((acc: number, cur: string) => acc + Number.parseInt(cur, 10), 0)\n        : '100%',\n    [colsLayoutStyle, gridLayout],\n  );\n\n  const layoutHelpers = useMemo(\n    () => ({\n      gridLayout,\n      totalColumnsWidth,\n    }),\n    [gridLayout, totalColumnsWidth],\n  );\n\n  useTableResizeCb({ virtualListRef, propsWithDefault: propsWithDefaults });\n\n  // ===========================================================================\n  // Action ref setup\n  // ===========================================================================\n  useEffect(() => {\n    if (actionRef) {\n      actionRef.current.scrollToIndex = virtualListHelpers.scrollToIndex;\n      actionRef.current.scrollToOffset = virtualListHelpers.scrollToOffset;\n    }\n  }, [actionRef, virtualListHelpers.scrollToIndex, virtualListHelpers.scrollToOffset]);\n\n  return {\n    visibleRangeRef,\n    layoutHelpers,\n    paginationHelpers,\n    visibleColumns,\n    virtualListHelpers,\n    flattenedData: paginatedData || flattenedData,\n    allDataFlattened,\n    isEmptyContent,\n    firstFocuseableColumnHeaderId,\n    virtualListRef,\n    columnHeaderRef,\n    lastSelected,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-statements */\nimport { useEffect, useMemo, useRef } from 'react';\nimport { useVirtual, defaultRangeExtractor, type Range } from 'react-virtual';\nimport { type DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useTableColsWithAddons } from '../useTableColsWithAddons.js';\nimport { useRowFlattenization } from '../useRowFlattenization.js';\nimport { usePaginationConfig } from '../usePaginationConfig.js';\nimport { columnsToGrid } from '../../helpers/columnsToGrid.js';\nimport { ColsLayoutStyle } from '../constants.js';\nimport { useTableResizeCb } from '../useTableResizeCb.js';\n\nconst estimateSize = () => 36;\n\nexport const useAutoCalculated = (propsWithDefaults: DSDataTableT.InternalProps): DSDataTableT.UseAutoCalculatedT => {\n  const { actionRef, colsLayoutStyle, hiddenColumns, isLoading } = propsWithDefaults;\n\n  const visibleRangeRef = useRef<Range>({ start: 0, end: 0 });\n  const virtualListRef = useRef<HTMLDivElement | null>(null);\n  const columnHeaderRef = useRef<HTMLDivElement | null>(null);\n  const lastSelected = useRef<number>(-1);\n\n  // ===========================================================================\n  // Column config\n  // ===========================================================================\n  const visibleColumns = useTableColsWithAddons(propsWithDefaults, hiddenColumns);\n\n  // ===========================================================================\n  // Data flattenization and pagination\n  // ===========================================================================\n\n  const [flattenedData, allDataFlattened] = useRowFlattenization(propsWithDefaults);\n\n  const [paginatedData, paginationHelpers] = usePaginationConfig(propsWithDefaults, flattenedData);\n\n  const dataLength = useMemo(() => (paginatedData || flattenedData).length, [flattenedData, paginatedData]);\n\n  // estimateSize should not be really required given what was stated on\n  // https://github.com/tannerlinsley/react-virtual/issues/23\n  const virtualListHelpers = useVirtual({\n    size: dataLength,\n    parentRef: virtualListRef,\n    overscan: 15,\n    paddingStart: columnHeaderRef.current?.getBoundingClientRect()?.height ?? 24,\n    estimateSize,\n    rangeExtractor: React.useCallback((range: Range) => {\n      visibleRangeRef.current = range;\n\n      return defaultRangeExtractor(range);\n    }, []),\n  });\n\n  // ===========================================================================\n  // Empty content config\n  // ===========================================================================\n\n  const isEmptyContent = useMemo(() => !isLoading && flattenedData.length === 0, [isLoading, flattenedData.length]);\n\n  const firstFocuseableColumnHeaderId = useMemo(() => {\n    for (let i = 0; i < visibleColumns.length; i++) {\n      const column = visibleColumns[i];\n      if (column.isFocuseable === false && column.id !== 'expander' && column.id !== 'multiSelecter') {\n        continue;\n      }\n      return column.id;\n    }\n  }, [visibleColumns]);\n\n  // ===========================================================================\n  // Layout config\n  // ===========================================================================\n\n  const gridLayout = useMemo(() => columnsToGrid(visibleColumns, colsLayoutStyle), [colsLayoutStyle, visibleColumns]);\n\n  // We need to listen and update the state based on this props\n  const totalColumnsWidth = useMemo(\n    () =>\n      colsLayoutStyle === ColsLayoutStyle.Fixed\n        ? gridLayout.reduce((acc: number, cur: string) => acc + Number.parseInt(cur, 10), 0)\n        : '100%',\n    [colsLayoutStyle, gridLayout],\n  );\n\n  const layoutHelpers = useMemo(\n    () => ({\n      gridLayout,\n      totalColumnsWidth,\n    }),\n    [gridLayout, totalColumnsWidth],\n  );\n\n  useTableResizeCb({ virtualListRef, propsWithDefault: propsWithDefaults });\n\n  // ===========================================================================\n  // Action ref setup\n  // ===========================================================================\n  useEffect(() => {\n    if (actionRef) {\n      actionRef.current.scrollToIndex = virtualListHelpers.scrollToIndex;\n      actionRef.current.scrollToOffset = virtualListHelpers.scrollToOffset;\n    }\n  }, [actionRef, virtualListHelpers.scrollToIndex, virtualListHelpers.scrollToOffset]);\n\n  return {\n    visibleRangeRef,\n    layoutHelpers,\n    paginationHelpers,\n    visibleColumns,\n    virtualListHelpers,\n    flattenedData: paginatedData || flattenedData,\n    allDataFlattened,\n    isEmptyContent,\n    firstFocuseableColumnHeaderId,\n    virtualListRef,\n    columnHeaderRef,\n    lastSelected,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA2C;AAC3C,2BAA8D;AAE9D,oCAAuC;AACvC,kCAAqC;AACrC,iCAAoC;AACpC,2BAA8B;AAC9B,uBAAgC;AAChC,8BAAiC;AAEjC,MAAM,eAAe,MAAM;AAEpB,MAAM,oBAAoB,CAAC,sBAAmF;AACnH,QAAM,EAAE,WAAW,iBAAiB,eAAe,UAAU,IAAI;AAEjE,QAAM,sBAAkB,qBAAc,EAAE,OAAO,GAAG,KAAK,EAAE,CAAC;AAC1D,QAAM,qBAAiB,qBAA8B,IAAI;AACzD,QAAM,sBAAkB,qBAA8B,IAAI;AAC1D,QAAM,mBAAe,qBAAe,EAAE;AAKtC,QAAM,qBAAiB,sDAAuB,mBAAmB,aAAa;AAM9E,QAAM,CAAC,eAAe,gBAAgB,QAAI,kDAAqB,iBAAiB;AAEhF,QAAM,CAAC,eAAe,iBAAiB,QAAI,gDAAoB,mBAAmB,aAAa;AAE/F,QAAM,iBAAa,sBAAQ,OAAO,iBAAiB,eAAe,QAAQ,CAAC,eAAe,aAAa,CAAC;AAIxG,QAAM,yBAAqB,iCAAW;AAAA,IACpC,MAAM;AAAA,IACN,WAAW;AAAA,IACX,UAAU;AAAA,IACV,cAAc,gBAAgB,SAAS,sBAAsB,GAAG,UAAU;AAAA,IAC1E;AAAA,IACA,gBAAgB,MAAM,YAAY,CAAC,UAAiB;AAClD,sBAAgB,UAAU;AAE1B,iBAAO,4CAAsB,KAAK;AAAA,IACpC,GAAG,CAAC,CAAC;AAAA,EACP,CAAC;AAMD,QAAM,qBAAiB,sBAAQ,MAAM,CAAC,aAAa,cAAc,WAAW,GAAG,CAAC,WAAW,cAAc,MAAM,CAAC;AAEhH,QAAM,oCAAgC,sBAAQ,MAAM;AAClD,aAAS,IAAI,GAAG,IAAI,eAAe,QAAQ,KAAK;AAC9C,YAAM,SAAS,eAAe,CAAC;AAC/B,UAAI,OAAO,iBAAiB,SAAS,OAAO,OAAO,cAAc,OAAO,OAAO,iBAAiB;AAC9F;AAAA,MACF;AACA,aAAO,OAAO;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,cAAc,CAAC;AAMnB,QAAM,iBAAa,sBAAQ,UAAM,oCAAc,gBAAgB,eAAe,GAAG,CAAC,iBAAiB,cAAc,CAAC;AAGlH,QAAM,wBAAoB;AAAA,IACxB,MACE,oBAAoB,iCAAgB,QAChC,WAAW,OAAO,CAAC,KAAa,QAAgB,MAAM,OAAO,SAAS,KAAK,EAAE,GAAG,CAAC,IACjF;AAAA,IACN,CAAC,iBAAiB,UAAU;AAAA,EAC9B;AAEA,QAAM,oBAAgB;AAAA,IACpB,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,YAAY,iBAAiB;AAAA,EAChC;AAEA,gDAAiB,EAAE,gBAAgB,kBAAkB,kBAAkB,CAAC;AAKxE,8BAAU,MAAM;AACd,QAAI,WAAW;AACb,gBAAU,QAAQ,gBAAgB,mBAAmB;AACrD,gBAAU,QAAQ,iBAAiB,mBAAmB;AAAA,IACxD;AAAA,EACF,GAAG,CAAC,WAAW,mBAAmB,eAAe,mBAAmB,cAAc,CAAC;AAEnF,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe,iBAAiB;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/cjs/configs/useTableColsWithAddons.js

@@ -61,7 +61,7 @@ const useTableColsWithAddons = ({
   selection,
   dragAndDropRows,
   noSelectionColumn
-}) => {
+}, hiddenColumns) => {
   const withSelection = Boolean(selection);
   return (0, import_react.useMemo)(() => {
     const columnsWithAddons = [...augmentColumns(columns)];
@@ -80,7 +80,28 @@ const useTableColsWithAddons = ({
     colsToAppend.forEach((col) => {
       if (!isColumnInArrayOfColumns(columnsWithAddons, col)) columnsWithAddons.push(col);
     });
-    return columnsWithAddons;
-  }, [columns, isExpandable, withSelection, noSelectionColumn, dragAndDropRows, renderRowActions, selectSingle]);
+    return columnsWithAddons.filter((col) => col.accessor === void 0 || !isColumnVisible(col.accessor, col.columns, hiddenColumns)).map((col) => {
+      if (col.columns) {
+        col.columns = col.columns.filter(
+          (subCol) => subCol.accessor === void 0 || !hiddenColumns?.includes(subCol.accessor)
+        );
+      }
+      return col;
+    });
+  }, [
+    columns,
+    isExpandable,
+    withSelection,
+    noSelectionColumn,
+    dragAndDropRows,
+    renderRowActions,
+    selectSingle,
+    hiddenColumns
+  ]);
+};
+const isColumnVisible = (columnAccessor, columns, hiddenColumns) => {
+  if (!columns) return hiddenColumns.includes(columnAccessor);
+  if (hiddenColumns.includes(columnAccessor)) return true;
+  return columns.every((col) => hiddenColumns.includes(col.accessor || col.id));
 };
 //# sourceMappingURL=useTableColsWithAddons.js.map

package/dist/cjs/configs/useTableColsWithAddons.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/configs/useTableColsWithAddons.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-params */\nimport { createRef, useMemo } from 'react';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\nimport {\n  dragHandleColumn,\n  expandRowColumn,\n  actionColumn,\n  singleSelectColumn,\n  multiSelectColumn,\n} from '../addons/Columns/index.js';\n\ntype UseTableColsWithAddonsType = (config: DSDataTableT.InternalProps) => DSDataTableT.InternalColumn[];\n\nconst augmentColumns = (columns: DSDataTableT.Column[]): DSDataTableT.InternalColumn[] => {\n  const augmentColumn = (\n    column: DSDataTableT.Column,\n    index: number,\n    parentId: string | null = null,\n    depth = 0,\n  ): DSDataTableT.InternalColumn => {\n    let id = `column${index}`;\n    if (typeof column.Header === 'string') id = column.Header;\n    if (typeof column.accessor === 'string') id = column.accessor;\n    const { columns: childColumns, ...restOfColumn } = column;\n    const newCol: DSDataTableT.InternalColumn = {\n      id,\n      parentId,\n      depth,\n      ...restOfColumn,\n      ref: createRef<HTMLTableColElement>() as React.MutableRefObject<HTMLTableColElement>,\n    };\n    if (childColumns) newCol.columns = childColumns.map((col, i) => augmentColumn(col, i, id, depth + 1));\n    return newCol;\n  };\n  return columns.map((col, index) => augmentColumn(col, index));\n};\n\nconst isColumnInArrayOfColumns = (columns: DSDataTableT.Column[], col: DSDataTableT.Column) =>\n  columns.some((column) => column.id === col.id);\n\nconst useTableColsWithAddons: UseTableColsWithAddonsType = ({\n  columns,\n  renderRowActions,\n  isExpandable,\n  selectSingle,\n  selection,\n  dragAndDropRows,\n  noSelectionColumn,\n}) => {\n  const withSelection = Boolean(selection);\n\n  return useMemo(() => {\n    const columnsWithAddons = [...augmentColumns(columns)];\n\n    // Columns to be prepended\n    const colsToPrepend: DSDataTableT.InternalColumn[] = [];\n    // Columns to be appended\n    const colsToAppend: DSDataTableT.InternalColumn[] = [];\n\n    if (isExpandable) colsToPrepend.push(expandRowColumn);\n    if (withSelection && !noSelectionColumn) {\n      if (selectSingle) colsToPrepend.push(singleSelectColumn as unknown as DSDataTableT.InternalColumn);\n      else colsToPrepend.push(multiSelectColumn as unknown as DSDataTableT.InternalColumn);\n    }\n    if (dragAndDropRows) colsToPrepend.push(dragHandleColumn as unknown as DSDataTableT.InternalColumn);\n    if (renderRowActions) colsToAppend.push(actionColumn(renderRowActions));\n\n    // Prepend or append all the columns that were not extended by the user\n    colsToPrepend.forEach((col) => {\n      if (!isColumnInArrayOfColumns(columnsWithAddons, col)) columnsWithAddons.unshift(col);\n    });\n    colsToAppend.forEach((col) => {\n      if (!isColumnInArrayOfColumns(columnsWithAddons, col)) columnsWithAddons.push(col);\n    });\n\n    return columnsWithAddons;\n  }, [columns, isExpandable, withSelection, noSelectionColumn, dragAndDropRows, renderRowActions, selectSingle]);\n};\n\nexport { useTableColsWithAddons };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAmC;AAEnC,qBAMO;AAIP,MAAM,iBAAiB,CAAC,YAAkE;AACxF,QAAM,gBAAgB,CACpB,QACA,OACA,WAA0B,MAC1B,QAAQ,MACwB;AAChC,QAAI,KAAK,SAAS,KAAK;AACvB,QAAI,OAAO,OAAO,WAAW,SAAU,MAAK,OAAO;AACnD,QAAI,OAAO,OAAO,aAAa,SAAU,MAAK,OAAO;AACrD,UAAM,EAAE,SAAS,cAAc,GAAG,aAAa,IAAI;AACnD,UAAM,SAAsC;AAAA,MAC1C;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,MACH,SAAK,wBAA+B;AAAA,IACtC;AACA,QAAI,aAAc,QAAO,UAAU,aAAa,IAAI,CAAC,KAAK,MAAM,cAAc,KAAK,GAAG,IAAI,QAAQ,CAAC,CAAC;AACpG,WAAO;AAAA,EACT;AACA,SAAO,QAAQ,IAAI,CAAC,KAAK,UAAU,cAAc,KAAK,KAAK,CAAC;AAC9D;AAEA,MAAM,2BAA2B,CAAC,SAAgC,QAChE,QAAQ,KAAK,CAAC,WAAW,OAAO,OAAO,IAAI,EAAE;AAE/C,MAAM,yBAAqD,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,gBAAgB,QAAQ,SAAS;AAEvC,aAAO,sBAAQ,MAAM;AACnB,UAAM,oBAAoB,CAAC,GAAG,eAAe,OAAO,CAAC;AAGrD,UAAM,gBAA+C,CAAC;AAEtD,UAAM,eAA8C,CAAC;AAErD,QAAI,aAAc,eAAc,KAAK,8BAAe;AACpD,QAAI,iBAAiB,CAAC,mBAAmB;AACvC,UAAI,aAAc,eAAc,KAAK,iCAA4D;AAAA,UAC5F,eAAc,KAAK,gCAA2D;AAAA,IACrF;AACA,QAAI,gBAAiB,eAAc,KAAK,+BAA0D;AAClG,QAAI,iBAAkB,cAAa,SAAK,6BAAa,gBAAgB,CAAC;AAGtE,kBAAc,QAAQ,CAAC,QAAQ;AAC7B,UAAI,CAAC,yBAAyB,mBAAmB,GAAG,EAAG,mBAAkB,QAAQ,GAAG;AAAA,IACtF,CAAC;AACD,iBAAa,QAAQ,CAAC,QAAQ;AAC5B,UAAI,CAAC,yBAAyB,mBAAmB,GAAG,EAAG,mBAAkB,KAAK,GAAG;AAAA,IACnF,CAAC;AAED,WAAO;AAAA,EACT,GAAG,CAAC,SAAS,cAAc,eAAe,mBAAmB,iBAAiB,kBAAkB,YAAY,CAAC;AAC/G;",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-use-before-define */\n/* eslint-disable max-params */\nimport { createRef, useMemo } from 'react';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\nimport {\n  dragHandleColumn,\n  expandRowColumn,\n  actionColumn,\n  singleSelectColumn,\n  multiSelectColumn,\n} from '../addons/Columns/index.js';\n\nconst augmentColumns = (columns: DSDataTableT.Column[]): DSDataTableT.InternalColumn[] => {\n  const augmentColumn = (\n    column: DSDataTableT.Column,\n    index: number,\n    parentId: string | null = null,\n    depth = 0,\n  ): DSDataTableT.InternalColumn => {\n    let id = `column${index}`;\n    if (typeof column.Header === 'string') id = column.Header;\n    if (typeof column.accessor === 'string') id = column.accessor;\n    const { columns: childColumns, ...restOfColumn } = column;\n    const newCol: DSDataTableT.InternalColumn = {\n      id,\n      parentId,\n      depth,\n      ...restOfColumn,\n      ref: createRef<HTMLTableColElement>() as React.MutableRefObject<HTMLTableColElement>,\n    };\n    if (childColumns) newCol.columns = childColumns.map((col, i) => augmentColumn(col, i, id, depth + 1));\n    return newCol;\n  };\n  return columns.map((col, index) => augmentColumn(col, index));\n};\n\nconst isColumnInArrayOfColumns = (columns: DSDataTableT.Column[], col: DSDataTableT.Column) =>\n  columns.some((column) => column.id === col.id);\n\nconst useTableColsWithAddons = (\n  {\n    columns,\n    renderRowActions,\n    isExpandable,\n    selectSingle,\n    selection,\n    dragAndDropRows,\n    noSelectionColumn,\n  }: DSDataTableT.InternalProps,\n  hiddenColumns: string[],\n) => {\n  const withSelection = Boolean(selection);\n\n  return useMemo(() => {\n    const columnsWithAddons = [...augmentColumns(columns)];\n    // Columns to be prepended\n    const colsToPrepend: DSDataTableT.InternalColumn[] = [];\n    // Columns to be appended\n    const colsToAppend: DSDataTableT.InternalColumn[] = [];\n\n    if (isExpandable) colsToPrepend.push(expandRowColumn);\n    if (withSelection && !noSelectionColumn) {\n      if (selectSingle) colsToPrepend.push(singleSelectColumn as unknown as DSDataTableT.InternalColumn);\n      else colsToPrepend.push(multiSelectColumn as unknown as DSDataTableT.InternalColumn);\n    }\n    if (dragAndDropRows) colsToPrepend.push(dragHandleColumn as unknown as DSDataTableT.InternalColumn);\n    if (renderRowActions) colsToAppend.push(actionColumn(renderRowActions));\n\n    // Prepend or append all the columns that were not extended by the user\n    colsToPrepend.forEach((col) => {\n      if (!isColumnInArrayOfColumns(columnsWithAddons, col)) columnsWithAddons.unshift(col);\n    });\n    colsToAppend.forEach((col) => {\n      if (!isColumnInArrayOfColumns(columnsWithAddons, col)) columnsWithAddons.push(col);\n    });\n\n    return columnsWithAddons\n      .filter((col) => col.accessor === undefined || !isColumnVisible(col.accessor, col.columns, hiddenColumns))\n      .map((col) => {\n        if (col.columns) {\n          col.columns = col.columns.filter(\n            (subCol: DSDataTableT.Column) => subCol.accessor === undefined || !hiddenColumns?.includes(subCol.accessor),\n          );\n        }\n        return col;\n      });\n  }, [\n    columns,\n    isExpandable,\n    withSelection,\n    noSelectionColumn,\n    dragAndDropRows,\n    renderRowActions,\n    selectSingle,\n    hiddenColumns,\n  ]);\n};\n\nexport { useTableColsWithAddons };\n\nconst isColumnVisible = (\n  columnAccessor: string,\n  columns: DSDataTableT.Column[] | undefined,\n  hiddenColumns: string[],\n) => {\n  if (!columns) return hiddenColumns.includes(columnAccessor);\n  if (hiddenColumns.includes(columnAccessor)) return true;\n  return columns.every((col) => hiddenColumns.includes(col.accessor || col.id!));\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAAmC;AAEnC,qBAMO;AAEP,MAAM,iBAAiB,CAAC,YAAkE;AACxF,QAAM,gBAAgB,CACpB,QACA,OACA,WAA0B,MAC1B,QAAQ,MACwB;AAChC,QAAI,KAAK,SAAS,KAAK;AACvB,QAAI,OAAO,OAAO,WAAW,SAAU,MAAK,OAAO;AACnD,QAAI,OAAO,OAAO,aAAa,SAAU,MAAK,OAAO;AACrD,UAAM,EAAE,SAAS,cAAc,GAAG,aAAa,IAAI;AACnD,UAAM,SAAsC;AAAA,MAC1C;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,MACH,SAAK,wBAA+B;AAAA,IACtC;AACA,QAAI,aAAc,QAAO,UAAU,aAAa,IAAI,CAAC,KAAK,MAAM,cAAc,KAAK,GAAG,IAAI,QAAQ,CAAC,CAAC;AACpG,WAAO;AAAA,EACT;AACA,SAAO,QAAQ,IAAI,CAAC,KAAK,UAAU,cAAc,KAAK,KAAK,CAAC;AAC9D;AAEA,MAAM,2BAA2B,CAAC,SAAgC,QAChE,QAAQ,KAAK,CAAC,WAAW,OAAO,OAAO,IAAI,EAAE;AAE/C,MAAM,yBAAyB,CAC7B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GACA,kBACG;AACH,QAAM,gBAAgB,QAAQ,SAAS;AAEvC,aAAO,sBAAQ,MAAM;AACnB,UAAM,oBAAoB,CAAC,GAAG,eAAe,OAAO,CAAC;AAErD,UAAM,gBAA+C,CAAC;AAEtD,UAAM,eAA8C,CAAC;AAErD,QAAI,aAAc,eAAc,KAAK,8BAAe;AACpD,QAAI,iBAAiB,CAAC,mBAAmB;AACvC,UAAI,aAAc,eAAc,KAAK,iCAA4D;AAAA,UAC5F,eAAc,KAAK,gCAA2D;AAAA,IACrF;AACA,QAAI,gBAAiB,eAAc,KAAK,+BAA0D;AAClG,QAAI,iBAAkB,cAAa,SAAK,6BAAa,gBAAgB,CAAC;AAGtE,kBAAc,QAAQ,CAAC,QAAQ;AAC7B,UAAI,CAAC,yBAAyB,mBAAmB,GAAG,EAAG,mBAAkB,QAAQ,GAAG;AAAA,IACtF,CAAC;AACD,iBAAa,QAAQ,CAAC,QAAQ;AAC5B,UAAI,CAAC,yBAAyB,mBAAmB,GAAG,EAAG,mBAAkB,KAAK,GAAG;AAAA,IACnF,CAAC;AAED,WAAO,kBACJ,OAAO,CAAC,QAAQ,IAAI,aAAa,UAAa,CAAC,gBAAgB,IAAI,UAAU,IAAI,SAAS,aAAa,CAAC,EACxG,IAAI,CAAC,QAAQ;AACZ,UAAI,IAAI,SAAS;AACf,YAAI,UAAU,IAAI,QAAQ;AAAA,UACxB,CAAC,WAAgC,OAAO,aAAa,UAAa,CAAC,eAAe,SAAS,OAAO,QAAQ;AAAA,QAC5G;AAAA,MACF;AACA,aAAO;AAAA,IACT,CAAC;AAAA,EACL,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH;AAIA,MAAM,kBAAkB,CACtB,gBACA,SACA,kBACG;AACH,MAAI,CAAC,QAAS,QAAO,cAAc,SAAS,cAAc;AAC1D,MAAI,cAAc,SAAS,cAAc,EAAG,QAAO;AACnD,SAAO,QAAQ,MAAM,CAAC,QAAQ,cAAc,SAAS,IAAI,YAAY,IAAI,EAAG,CAAC;AAC/E;",
   "names": []
 }

package/dist/cjs/exported-related/Toolbar/Toolbar.js

@@ -73,7 +73,8 @@ const ToolbarPosition = (0, import_ds_system.styled)("div", { name: import_DSDat
   height: 28px;
   margin-top: 4px;
   width: 100%;
-  padding-left: 2px;
+  padding-left: 1px;
+  padding-right: 1px;
   outline: none;
   &:hover {
     z-index: 1;

package/dist/cjs/exported-related/Toolbar/Toolbar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/exported-related/Toolbar/Toolbar.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { css, mergeRefs, styled } from '@elliemae/ds-system';\nimport React, { useCallback, useRef, useState } from 'react';\nimport useOnClickOutside from 'use-onclickoutside';\nimport { DSDataTableName, DSDataTableSlots } from '../../DSDataTableDefinitions.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\n\nconst ToolbarBtns = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_BUTTONS_WRAPPER })``;\n\nconst boxShadow = css`\n  box-shadow:\n    0 1px 2px 0 rgba(0, 0, 0, 0.13),\n    0 1px 2px 0 rgba(0, 0, 0, 0.2);\n  & > .toolbar-trigger {\n    border: none;\n  }\n`;\n\nconst ToolbarWrapper = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_WRAPPER })<{\n  isOpen: boolean;\n}>`\n  display: flex;\n  align-items: center;\n  pointer-events: all;\n\n  & .toolbar-trigger:focus {\n    z-index: 8;\n  }\n\n  ${({ isOpen }) => isOpen && boxShadow}\n`;\n\nconst StyledButton = styled(DSButtonV3, { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_BUTTON })`\n  background-color: transparent;\n`;\n\nconst ToolbarPosition = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_POSITION })`\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  pointer-events: none;\n  background: transparent;\n  height: 28px;\n  margin-top: 4px;\n  width: 100%;\n  padding-left: 2px;\n  outline: none;\n  &:hover {\n    z-index: 1;\n  }\n  :after {\n    content: '';\n    position: absolute;\n    left: 0px;\n    top: 4px;\n    bottom: 4px;\n    width: 1px;\n    background-color: neutral-080;\n    z-index: 7;\n  }\n`;\n\ninterface ToolbarProps {\n  isRowSelected?: boolean;\n  cell: DSDataTableT.Cell;\n  children: React.ReactNode;\n}\n\nexport const Toolbar: React.ComponentType<ToolbarProps> = ({ isRowSelected, cell, children }) => {\n  const [show, setShow] = useState(false);\n\n  const toolbarRef = useRef<HTMLDivElement | null>(null);\n  const toolbarTriggerRef = useRef<HTMLButtonElement | null>(null);\n\n  const handleOnClickOutside = useCallback(() => setShow(false), []);\n\n  const handleOnClick = useCallback(() => setShow((prev) => !prev), []);\n\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  const stopPropagation: React.MouseEventHandler = useCallback((e) => e.stopPropagation(), []);\n\n  useOnClickOutside(toolbarRef, handleOnClickOutside);\n\n  const onToolbarKeyDown = useCallback((e: React.KeyboardEvent) => {\n    if (e.code === 'Escape') {\n      setShow(false);\n      toolbarTriggerRef.current?.focus();\n    }\n    e.stopPropagation();\n  }, []);\n\n  const handleOnBlurToolBar = useCallback(() => {\n    setTimeout(() => {\n      if (!toolbarRef?.current?.contains?.(document.activeElement)) {\n        setShow(false);\n      }\n    });\n  }, []);\n\n  return (\n    <ToolbarPosition onBlur={handleOnBlurToolBar} innerRef={toolbarRef} tabIndex={-1} getOwnerProps={getOwnerProps}>\n      <ToolbarWrapper\n        onKeyDown={onToolbarKeyDown}\n        onClick={stopPropagation}\n        isOpen={show}\n        getOwnerProps={getOwnerProps}\n      >\n        {show && <ToolbarBtns getOwnerProps={getOwnerProps}>{children}</ToolbarBtns>}\n        <StyledButton\n          buttonType=\"icon\"\n          className=\"toolbar-trigger\"\n          data-testid={DATA_TESTID.DATA_TABLE_TOOLBAR_TRIGGER}\n          innerRef={mergeRefs(toolbarTriggerRef, cell?.ref)}\n          onClick={handleOnClick}\n          tabIndex={isRowSelected === false ? -1 : 0}\n          aria-label=\"Row actions\"\n        >\n          <MoreOptionsVert />\n        </StyledButton>\n      </ToolbarWrapper>\n    </ToolbarPosition>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyGjB;AAzGN,0BAA2B;AAC3B,sBAAgC;AAChC,uBAAuC;AACvC,mBAAqD;AACrD,gCAA8B;AAC9B,oCAAkD;AAClD,uBAA4B;AAC5B,2CAA8B;AAG9B,MAAM,kBAAc,yBAAO,OAAO,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,wBAAwB,CAAC;AAE3G,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASlB,MAAM,qBAAiB,yBAAO,OAAO,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWlG,CAAC,EAAE,OAAO,MAAM,UAAU,SAAS;AAAA;AAGvC,MAAM,mBAAe,yBAAO,gCAAY,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,eAAe,CAAC;AAAA;AAAA;AAIxG,MAAM,sBAAkB,yBAAO,OAAO,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,iBAAiB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgCjG,MAAM,UAA6C,CAAC,EAAE,eAAe,MAAM,SAAS,MAAM;AAC/F,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,KAAK;AAEtC,QAAM,iBAAa,qBAA8B,IAAI;AACrD,QAAM,wBAAoB,qBAAiC,IAAI;AAE/D,QAAM,2BAAuB,0BAAY,MAAM,QAAQ,KAAK,GAAG,CAAC,CAAC;AAEjE,QAAM,oBAAgB,0BAAY,MAAM,QAAQ,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,CAAC;AAEpE,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,GAAG;AAExD,QAAM,sBAA2C,0BAAY,CAAC,MAAM,EAAE,gBAAgB,GAAG,CAAC,CAAC;AAE3F,gCAAAA,SAAkB,YAAY,oBAAoB;AAElD,QAAM,uBAAmB,0BAAY,CAAC,MAA2B;AAC/D,QAAI,EAAE,SAAS,UAAU;AACvB,cAAQ,KAAK;AACb,wBAAkB,SAAS,MAAM;AAAA,IACnC;AACA,MAAE,gBAAgB;AAAA,EACpB,GAAG,CAAC,CAAC;AAEL,QAAM,0BAAsB,0BAAY,MAAM;AAC5C,eAAW,MAAM;AACf,UAAI,CAAC,YAAY,SAAS,WAAW,SAAS,aAAa,GAAG;AAC5D,gBAAQ,KAAK;AAAA,MACf;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,SACE,4CAAC,mBAAgB,QAAQ,qBAAqB,UAAU,YAAY,UAAU,IAAI,eAChF;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,SAAS;AAAA,MACT,QAAQ;AAAA,MACR;AAAA,MAEC;AAAA,gBAAQ,4CAAC,eAAY,eAA+B,UAAS;AAAA,QAC9D;AAAA,UAAC;AAAA;AAAA,YACC,YAAW;AAAA,YACX,WAAU;AAAA,YACV,eAAa,6BAAY;AAAA,YACzB,cAAU,4BAAU,mBAAmB,MAAM,GAAG;AAAA,YAChD,SAAS;AAAA,YACT,UAAU,kBAAkB,QAAQ,KAAK;AAAA,YACzC,cAAW;AAAA,YAEX,sDAAC,mCAAgB;AAAA;AAAA,QACnB;AAAA;AAAA;AAAA,EACF,GACF;AAEJ;",
+  "sourcesContent": ["import { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { css, mergeRefs, styled } from '@elliemae/ds-system';\nimport React, { useCallback, useRef, useState } from 'react';\nimport useOnClickOutside from 'use-onclickoutside';\nimport { DSDataTableName, DSDataTableSlots } from '../../DSDataTableDefinitions.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\n\nconst ToolbarBtns = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_BUTTONS_WRAPPER })``;\n\nconst boxShadow = css`\n  box-shadow:\n    0 1px 2px 0 rgba(0, 0, 0, 0.13),\n    0 1px 2px 0 rgba(0, 0, 0, 0.2);\n  & > .toolbar-trigger {\n    border: none;\n  }\n`;\n\nconst ToolbarWrapper = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_WRAPPER })<{\n  isOpen: boolean;\n}>`\n  display: flex;\n  align-items: center;\n  pointer-events: all;\n\n  & .toolbar-trigger:focus {\n    z-index: 8;\n  }\n\n  ${({ isOpen }) => isOpen && boxShadow}\n`;\n\nconst StyledButton = styled(DSButtonV3, { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_BUTTON })`\n  background-color: transparent;\n`;\n\nconst ToolbarPosition = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_POSITION })`\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  pointer-events: none;\n  background: transparent;\n  height: 28px;\n  margin-top: 4px;\n  width: 100%;\n  padding-left: 1px;\n  padding-right: 1px;\n  outline: none;\n  &:hover {\n    z-index: 1;\n  }\n  :after {\n    content: '';\n    position: absolute;\n    left: 0px;\n    top: 4px;\n    bottom: 4px;\n    width: 1px;\n    background-color: neutral-080;\n    z-index: 7;\n  }\n`;\n\ninterface ToolbarProps {\n  isRowSelected?: boolean;\n  cell: DSDataTableT.Cell;\n  children: React.ReactNode;\n}\n\nexport const Toolbar: React.ComponentType<ToolbarProps> = ({ isRowSelected, cell, children }) => {\n  const [show, setShow] = useState(false);\n\n  const toolbarRef = useRef<HTMLDivElement | null>(null);\n  const toolbarTriggerRef = useRef<HTMLButtonElement | null>(null);\n\n  const handleOnClickOutside = useCallback(() => setShow(false), []);\n\n  const handleOnClick = useCallback(() => setShow((prev) => !prev), []);\n\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  const stopPropagation: React.MouseEventHandler = useCallback((e) => e.stopPropagation(), []);\n\n  useOnClickOutside(toolbarRef, handleOnClickOutside);\n\n  const onToolbarKeyDown = useCallback((e: React.KeyboardEvent) => {\n    if (e.code === 'Escape') {\n      setShow(false);\n      toolbarTriggerRef.current?.focus();\n    }\n    e.stopPropagation();\n  }, []);\n\n  const handleOnBlurToolBar = useCallback(() => {\n    setTimeout(() => {\n      if (!toolbarRef?.current?.contains?.(document.activeElement)) {\n        setShow(false);\n      }\n    });\n  }, []);\n\n  return (\n    <ToolbarPosition onBlur={handleOnBlurToolBar} innerRef={toolbarRef} tabIndex={-1} getOwnerProps={getOwnerProps}>\n      <ToolbarWrapper\n        onKeyDown={onToolbarKeyDown}\n        onClick={stopPropagation}\n        isOpen={show}\n        getOwnerProps={getOwnerProps}\n      >\n        {show && <ToolbarBtns getOwnerProps={getOwnerProps}>{children}</ToolbarBtns>}\n        <StyledButton\n          buttonType=\"icon\"\n          className=\"toolbar-trigger\"\n          data-testid={DATA_TESTID.DATA_TABLE_TOOLBAR_TRIGGER}\n          innerRef={mergeRefs(toolbarTriggerRef, cell?.ref)}\n          onClick={handleOnClick}\n          tabIndex={isRowSelected === false ? -1 : 0}\n          aria-label=\"Row actions\"\n        >\n          <MoreOptionsVert />\n        </StyledButton>\n      </ToolbarWrapper>\n    </ToolbarPosition>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0GjB;AA1GN,0BAA2B;AAC3B,sBAAgC;AAChC,uBAAuC;AACvC,mBAAqD;AACrD,gCAA8B;AAC9B,oCAAkD;AAClD,uBAA4B;AAC5B,2CAA8B;AAG9B,MAAM,kBAAc,yBAAO,OAAO,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,wBAAwB,CAAC;AAE3G,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASlB,MAAM,qBAAiB,yBAAO,OAAO,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWlG,CAAC,EAAE,OAAO,MAAM,UAAU,SAAS;AAAA;AAGvC,MAAM,mBAAe,yBAAO,gCAAY,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,eAAe,CAAC;AAAA;AAAA;AAIxG,MAAM,sBAAkB,yBAAO,OAAO,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,iBAAiB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiCjG,MAAM,UAA6C,CAAC,EAAE,eAAe,MAAM,SAAS,MAAM;AAC/F,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,KAAK;AAEtC,QAAM,iBAAa,qBAA8B,IAAI;AACrD,QAAM,wBAAoB,qBAAiC,IAAI;AAE/D,QAAM,2BAAuB,0BAAY,MAAM,QAAQ,KAAK,GAAG,CAAC,CAAC;AAEjE,QAAM,oBAAgB,0BAAY,MAAM,QAAQ,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,CAAC;AAEpE,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,GAAG;AAExD,QAAM,sBAA2C,0BAAY,CAAC,MAAM,EAAE,gBAAgB,GAAG,CAAC,CAAC;AAE3F,gCAAAA,SAAkB,YAAY,oBAAoB;AAElD,QAAM,uBAAmB,0BAAY,CAAC,MAA2B;AAC/D,QAAI,EAAE,SAAS,UAAU;AACvB,cAAQ,KAAK;AACb,wBAAkB,SAAS,MAAM;AAAA,IACnC;AACA,MAAE,gBAAgB;AAAA,EACpB,GAAG,CAAC,CAAC;AAEL,QAAM,0BAAsB,0BAAY,MAAM;AAC5C,eAAW,MAAM;AACf,UAAI,CAAC,YAAY,SAAS,WAAW,SAAS,aAAa,GAAG;AAC5D,gBAAQ,KAAK;AAAA,MACf;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,SACE,4CAAC,mBAAgB,QAAQ,qBAAqB,UAAU,YAAY,UAAU,IAAI,eAChF;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,SAAS;AAAA,MACT,QAAQ;AAAA,MACR;AAAA,MAEC;AAAA,gBAAQ,4CAAC,eAAY,eAA+B,UAAS;AAAA,QAC9D;AAAA,UAAC;AAAA;AAAA,YACC,YAAW;AAAA,YACX,WAAU;AAAA,YACV,eAAa,6BAAY;AAAA,YACzB,cAAU,4BAAU,mBAAmB,MAAM,GAAG;AAAA,YAChD,SAAS;AAAA,YACT,UAAU,kBAAkB,QAAQ,KAAK;AAAA,YACzC,cAAW;AAAA,YAEX,sDAAC,mCAAgB;AAAA;AAAA,QACnB;AAAA;AAAA;AAAA,EACF,GACF;AAEJ;",
   "names": ["useOnClickOutside"]
 }

package/dist/cjs/parts/SortByCaret.js

@@ -56,7 +56,7 @@ const SortByCaret = import_react.default.memo(({ isSortedDesc, isReachable, redu
     }
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ArrowheadUp, { color: iconColor });
   }, [isSortedDesc]);
-  if (!showSortCaret && !isMenuOpen && !isIconVisible) return null;
+  if (!showSortCaret && !isMenuOpen && !isIconVisible && isSortedDesc === void 0) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_ds_button_v2.DSButtonV2,
     {

package/dist/cjs/parts/SortByCaret.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/SortByCaret.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useMemo } from 'react';\nimport type { SvgIconT } from '@elliemae/ds-icons';\nimport { ArrowheadDown, ArrowheadUp, SortNeutral } from '@elliemae/ds-icons';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../configs/constants.js';\nimport { useGetFilterVisibility } from '../exported-related/FilterPopover/useGetFilterVisibility.js';\nconst iconColor: SvgIconT.ColorType = ['brand-primary', '800'];\n\nexport const SortByCaret: React.ComponentType<{\n  isSortedDesc: boolean | undefined;\n  onClick: (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n  isReachable: boolean;\n  column: DSDataTableT.InternalColumn;\n  reduxHeader: DSDataTableT.ReduxHeader;\n  innerRef: React.RefObject<HTMLButtonElement>;\n}> = React.memo(({ isSortedDesc, isReachable, reduxHeader, innerRef, column, onClick }) => {\n  const { isMenuOpen, isIconVisible } = useGetFilterVisibility(reduxHeader);\n\n  const { showSortCaret } = useMemo(\n    () =>\n      reduxHeader || {\n        showSortCaret: false,\n      },\n    [reduxHeader],\n  );\n\n  const icon = useMemo(() => {\n    if (isSortedDesc === undefined) {\n      return <SortNeutral color={iconColor} />;\n    }\n\n    if (isSortedDesc) {\n      return <ArrowheadDown size=\"s\" color={iconColor} />;\n    }\n\n    return <ArrowheadUp color={iconColor} />;\n  }, [isSortedDesc]);\n\n  if (!showSortCaret && !isMenuOpen && !isIconVisible) return null;\n\n  return (\n    <DSButtonV2\n      onClick={onClick}\n      tabIndex={isReachable ? 0 : -1}\n      buttonType=\"icon\"\n      style={{ marginLeft: '4px' }}\n      aria-label={`Sort ${column.id} ${isSortedDesc ? 'ascending' : 'descending'}`}\n      size=\"s\"\n      innerRef={innerRef}\n      data-testid={DATA_TESTID.DATA_TABLE_SORT_BUTTON}\n    >\n      {icon}\n    </DSButtonV2>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6BV;AA7Bb,mBAA+B;AAE/B,sBAAwD;AACxD,0BAA2B;AAE3B,uBAA4B;AAC5B,oCAAuC;AACvC,MAAM,YAAgC,CAAC,iBAAiB,KAAK;AAEtD,MAAM,cAOR,aAAAA,QAAM,KAAK,CAAC,EAAE,cAAc,aAAa,aAAa,UAAU,QAAQ,QAAQ,MAAM;AACzF,QAAM,EAAE,YAAY,cAAc,QAAI,sDAAuB,WAAW;AAExE,QAAM,EAAE,cAAc,QAAI;AAAA,IACxB,MACE,eAAe;AAAA,MACb,eAAe;AAAA,IACjB;AAAA,IACF,CAAC,WAAW;AAAA,EACd;AAEA,QAAM,WAAO,sBAAQ,MAAM;AACzB,QAAI,iBAAiB,QAAW;AAC9B,aAAO,4CAAC,+BAAY,OAAO,WAAW;AAAA,IACxC;AAEA,QAAI,cAAc;AAChB,aAAO,4CAAC,iCAAc,MAAK,KAAI,OAAO,WAAW;AAAA,IACnD;AAEA,WAAO,4CAAC,+BAAY,OAAO,WAAW;AAAA,EACxC,GAAG,CAAC,YAAY,CAAC;AAEjB,MAAI,CAAC,iBAAiB,CAAC,cAAc,CAAC,cAAe,QAAO;AAE5D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAU,cAAc,IAAI;AAAA,MAC5B,YAAW;AAAA,MACX,OAAO,EAAE,YAAY,MAAM;AAAA,MAC3B,cAAY,QAAQ,OAAO,EAAE,IAAI,eAAe,cAAc,YAAY;AAAA,MAC1E,MAAK;AAAA,MACL;AAAA,MACA,eAAa,6BAAY;AAAA,MAExB;AAAA;AAAA,EACH;AAEJ,CAAC;",
+  "sourcesContent": ["import React, { useMemo } from 'react';\nimport type { SvgIconT } from '@elliemae/ds-icons';\nimport { ArrowheadDown, ArrowheadUp, SortNeutral } from '@elliemae/ds-icons';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../configs/constants.js';\nimport { useGetFilterVisibility } from '../exported-related/FilterPopover/useGetFilterVisibility.js';\nconst iconColor: SvgIconT.ColorType = ['brand-primary', '800'];\n\nexport const SortByCaret: React.ComponentType<{\n  isSortedDesc: boolean | undefined;\n  onClick: (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n  isReachable: boolean;\n  column: DSDataTableT.InternalColumn;\n  reduxHeader: DSDataTableT.ReduxHeader;\n  innerRef: React.RefObject<HTMLButtonElement>;\n}> = React.memo(({ isSortedDesc, isReachable, reduxHeader, innerRef, column, onClick }) => {\n  const { isMenuOpen, isIconVisible } = useGetFilterVisibility(reduxHeader);\n\n  const { showSortCaret } = useMemo(\n    () =>\n      reduxHeader || {\n        showSortCaret: false,\n      },\n    [reduxHeader],\n  );\n\n  const icon = useMemo(() => {\n    if (isSortedDesc === undefined) {\n      return <SortNeutral color={iconColor} />;\n    }\n\n    if (isSortedDesc) {\n      return <ArrowheadDown size=\"s\" color={iconColor} />;\n    }\n\n    return <ArrowheadUp color={iconColor} />;\n  }, [isSortedDesc]);\n\n  if (!showSortCaret && !isMenuOpen && !isIconVisible && isSortedDesc === undefined) return null;\n\n  return (\n    <DSButtonV2\n      onClick={onClick}\n      tabIndex={isReachable ? 0 : -1}\n      buttonType=\"icon\"\n      style={{ marginLeft: '4px' }}\n      aria-label={`Sort ${column.id} ${isSortedDesc ? 'ascending' : 'descending'}`}\n      size=\"s\"\n      innerRef={innerRef}\n      data-testid={DATA_TESTID.DATA_TABLE_SORT_BUTTON}\n    >\n      {icon}\n    </DSButtonV2>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6BV;AA7Bb,mBAA+B;AAE/B,sBAAwD;AACxD,0BAA2B;AAE3B,uBAA4B;AAC5B,oCAAuC;AACvC,MAAM,YAAgC,CAAC,iBAAiB,KAAK;AAEtD,MAAM,cAOR,aAAAA,QAAM,KAAK,CAAC,EAAE,cAAc,aAAa,aAAa,UAAU,QAAQ,QAAQ,MAAM;AACzF,QAAM,EAAE,YAAY,cAAc,QAAI,sDAAuB,WAAW;AAExE,QAAM,EAAE,cAAc,QAAI;AAAA,IACxB,MACE,eAAe;AAAA,MACb,eAAe;AAAA,IACjB;AAAA,IACF,CAAC,WAAW;AAAA,EACd;AAEA,QAAM,WAAO,sBAAQ,MAAM;AACzB,QAAI,iBAAiB,QAAW;AAC9B,aAAO,4CAAC,+BAAY,OAAO,WAAW;AAAA,IACxC;AAEA,QAAI,cAAc;AAChB,aAAO,4CAAC,iCAAc,MAAK,KAAI,OAAO,WAAW;AAAA,IACnD;AAEA,WAAO,4CAAC,+BAAY,OAAO,WAAW;AAAA,EACxC,GAAG,CAAC,YAAY,CAAC;AAEjB,MAAI,CAAC,iBAAiB,CAAC,cAAc,CAAC,iBAAiB,iBAAiB,OAAW,QAAO;AAE1F,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAU,cAAc,IAAI;AAAA,MAC5B,YAAW;AAAA,MACX,OAAO,EAAE,YAAY,MAAM;AAAA,MAC3B,cAAY,QAAQ,OAAO,EAAE,IAAI,eAAe,cAAc,YAAY;AAAA,MAC1E,MAAK;AAAA,MACL;AAAA,MACA,eAAa,6BAAY;AAAA,MAExB;AAAA;AAAA,EACH;AAEJ,CAAC;",
   "names": ["React"]
 }

package/dist/esm/configs/useAutocalculated/index.js

@@ -1,9 +1,9 @@
 import * as React from "react";
 import { useEffect, useMemo, useRef } from "react";
+import { useVirtual, defaultRangeExtractor } from "react-virtual";
 import { useTableColsWithAddons } from "../useTableColsWithAddons.js";
 import { useRowFlattenization } from "../useRowFlattenization.js";
 import { usePaginationConfig } from "../usePaginationConfig.js";
-import { useVirtual, defaultRangeExtractor } from "react-virtual";
 import { columnsToGrid } from "../../helpers/columnsToGrid.js";
 import { ColsLayoutStyle } from "../constants.js";
 import { useTableResizeCb } from "../useTableResizeCb.js";
@@ -14,18 +14,7 @@ const useAutoCalculated = (propsWithDefaults) => {
   const virtualListRef = useRef(null);
   const columnHeaderRef = useRef(null);
   const lastSelected = useRef(-1);
-  const tableColsWithAddons = useTableColsWithAddons(propsWithDefaults);
-  const visibleColumns = useMemo(
-    () => tableColsWithAddons.filter((col) => col.accessor === void 0 || !hiddenColumns?.includes(col.accessor)).map((col) => {
-      if (col.columns) {
-        col.columns = col.columns.filter(
-          (subCol) => subCol.accessor === void 0 || !hiddenColumns?.includes(subCol.accessor)
-        );
-      }
-      return col;
-    }),
-    [hiddenColumns, tableColsWithAddons]
-  );
+  const visibleColumns = useTableColsWithAddons(propsWithDefaults, hiddenColumns);
   const [flattenedData, allDataFlattened] = useRowFlattenization(propsWithDefaults);
   const [paginatedData, paginationHelpers] = usePaginationConfig(propsWithDefaults, flattenedData);
   const dataLength = useMemo(() => (paginatedData || flattenedData).length, [flattenedData, paginatedData]);

package/dist/esm/configs/useAutocalculated/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/configs/useAutocalculated/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useEffect, useMemo, useRef } from 'react';\nimport { type DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useTableColsWithAddons } from '../useTableColsWithAddons.js';\nimport { useRowFlattenization } from '../useRowFlattenization.js';\nimport { usePaginationConfig } from '../usePaginationConfig.js';\nimport { useVirtual, defaultRangeExtractor, type Range } from 'react-virtual';\nimport { columnsToGrid } from '../../helpers/columnsToGrid.js';\nimport { ColsLayoutStyle } from '../constants.js';\nimport { useTableResizeCb } from '../useTableResizeCb.js';\n\nconst estimateSize = () => 36;\n\nexport const useAutoCalculated = (propsWithDefaults: DSDataTableT.InternalProps): DSDataTableT.UseAutoCalculatedT => {\n  const { actionRef, colsLayoutStyle, hiddenColumns, isLoading } = propsWithDefaults;\n\n  const visibleRangeRef = useRef<Range>({ start: 0, end: 0 });\n  const virtualListRef = useRef<HTMLDivElement | null>(null);\n  const columnHeaderRef = useRef<HTMLDivElement | null>(null);\n  const lastSelected = useRef<number>(-1);\n\n  // ===========================================================================\n  // Column config\n  // ===========================================================================\n  const tableColsWithAddons = useTableColsWithAddons(propsWithDefaults);\n  const visibleColumns = useMemo(\n    () =>\n      tableColsWithAddons\n        .filter((col) => col.accessor === undefined || !hiddenColumns?.includes(col.accessor))\n        .map((col) => {\n          if (col.columns) {\n            col.columns = col.columns.filter(\n              (subCol: DSDataTableT.Column) =>\n                subCol.accessor === undefined || !hiddenColumns?.includes(subCol.accessor),\n            );\n          }\n          return col;\n        }),\n    [hiddenColumns, tableColsWithAddons],\n  );\n\n  // ===========================================================================\n  // Data flattenization and pagination\n  // ===========================================================================\n\n  const [flattenedData, allDataFlattened] = useRowFlattenization(propsWithDefaults);\n\n  const [paginatedData, paginationHelpers] = usePaginationConfig(propsWithDefaults, flattenedData);\n\n  const dataLength = useMemo(() => (paginatedData || flattenedData).length, [flattenedData, paginatedData]);\n\n  // estimateSize should not be really required given what was stated on\n  // https://github.com/tannerlinsley/react-virtual/issues/23\n  const virtualListHelpers = useVirtual({\n    size: dataLength,\n    parentRef: virtualListRef,\n    overscan: 15,\n    paddingStart: columnHeaderRef.current?.getBoundingClientRect()?.height ?? 24,\n    estimateSize,\n    rangeExtractor: React.useCallback((range: Range) => {\n      visibleRangeRef.current = range;\n\n      return defaultRangeExtractor(range);\n    }, []),\n  });\n\n  // ===========================================================================\n  // Empty content config\n  // ===========================================================================\n\n  const isEmptyContent = useMemo(() => !isLoading && flattenedData.length === 0, [isLoading, flattenedData.length]);\n\n  const firstFocuseableColumnHeaderId = useMemo(() => {\n    for (let i = 0; i < visibleColumns.length; i++) {\n      const column = visibleColumns[i];\n      if (column.isFocuseable === false && column.id !== 'expander' && column.id !== 'multiSelecter') {\n        continue;\n      }\n      return column.id;\n    }\n  }, [visibleColumns]);\n\n  // ===========================================================================\n  // Layout config\n  // ===========================================================================\n\n  const gridLayout = useMemo(() => columnsToGrid(visibleColumns, colsLayoutStyle), [colsLayoutStyle, visibleColumns]);\n\n  // We need to listen and update the state based on this props\n  const totalColumnsWidth = useMemo(\n    () =>\n      colsLayoutStyle === ColsLayoutStyle.Fixed\n        ? gridLayout.reduce((acc: number, cur: string) => acc + Number.parseInt(cur, 10), 0)\n        : '100%',\n    [colsLayoutStyle, gridLayout],\n  );\n\n  const layoutHelpers = useMemo(\n    () => ({\n      gridLayout,\n      totalColumnsWidth,\n    }),\n    [gridLayout, totalColumnsWidth],\n  );\n\n  useTableResizeCb({ virtualListRef, propsWithDefault: propsWithDefaults });\n\n  // ===========================================================================\n  // Action ref setup\n  // ===========================================================================\n  useEffect(() => {\n    if (actionRef) {\n      actionRef.current.scrollToIndex = virtualListHelpers.scrollToIndex;\n      actionRef.current.scrollToOffset = virtualListHelpers.scrollToOffset;\n    }\n  }, [actionRef, virtualListHelpers.scrollToIndex, virtualListHelpers.scrollToOffset]);\n\n  return {\n    visibleRangeRef,\n    layoutHelpers,\n    paginationHelpers,\n    visibleColumns,\n    virtualListHelpers,\n    flattenedData: paginatedData || flattenedData,\n    allDataFlattened,\n    isEmptyContent,\n    firstFocuseableColumnHeaderId,\n    virtualListRef,\n    columnHeaderRef,\n    lastSelected,\n  };\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\nimport { useEffect, useMemo, useRef } from 'react';\nimport { useVirtual, defaultRangeExtractor, type Range } from 'react-virtual';\nimport { type DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useTableColsWithAddons } from '../useTableColsWithAddons.js';\nimport { useRowFlattenization } from '../useRowFlattenization.js';\nimport { usePaginationConfig } from '../usePaginationConfig.js';\nimport { columnsToGrid } from '../../helpers/columnsToGrid.js';\nimport { ColsLayoutStyle } from '../constants.js';\nimport { useTableResizeCb } from '../useTableResizeCb.js';\n\nconst estimateSize = () => 36;\n\nexport const useAutoCalculated = (propsWithDefaults: DSDataTableT.InternalProps): DSDataTableT.UseAutoCalculatedT => {\n  const { actionRef, colsLayoutStyle, hiddenColumns, isLoading } = propsWithDefaults;\n\n  const visibleRangeRef = useRef<Range>({ start: 0, end: 0 });\n  const virtualListRef = useRef<HTMLDivElement | null>(null);\n  const columnHeaderRef = useRef<HTMLDivElement | null>(null);\n  const lastSelected = useRef<number>(-1);\n\n  // ===========================================================================\n  // Column config\n  // ===========================================================================\n  const visibleColumns = useTableColsWithAddons(propsWithDefaults, hiddenColumns);\n\n  // ===========================================================================\n  // Data flattenization and pagination\n  // ===========================================================================\n\n  const [flattenedData, allDataFlattened] = useRowFlattenization(propsWithDefaults);\n\n  const [paginatedData, paginationHelpers] = usePaginationConfig(propsWithDefaults, flattenedData);\n\n  const dataLength = useMemo(() => (paginatedData || flattenedData).length, [flattenedData, paginatedData]);\n\n  // estimateSize should not be really required given what was stated on\n  // https://github.com/tannerlinsley/react-virtual/issues/23\n  const virtualListHelpers = useVirtual({\n    size: dataLength,\n    parentRef: virtualListRef,\n    overscan: 15,\n    paddingStart: columnHeaderRef.current?.getBoundingClientRect()?.height ?? 24,\n    estimateSize,\n    rangeExtractor: React.useCallback((range: Range) => {\n      visibleRangeRef.current = range;\n\n      return defaultRangeExtractor(range);\n    }, []),\n  });\n\n  // ===========================================================================\n  // Empty content config\n  // ===========================================================================\n\n  const isEmptyContent = useMemo(() => !isLoading && flattenedData.length === 0, [isLoading, flattenedData.length]);\n\n  const firstFocuseableColumnHeaderId = useMemo(() => {\n    for (let i = 0; i < visibleColumns.length; i++) {\n      const column = visibleColumns[i];\n      if (column.isFocuseable === false && column.id !== 'expander' && column.id !== 'multiSelecter') {\n        continue;\n      }\n      return column.id;\n    }\n  }, [visibleColumns]);\n\n  // ===========================================================================\n  // Layout config\n  // ===========================================================================\n\n  const gridLayout = useMemo(() => columnsToGrid(visibleColumns, colsLayoutStyle), [colsLayoutStyle, visibleColumns]);\n\n  // We need to listen and update the state based on this props\n  const totalColumnsWidth = useMemo(\n    () =>\n      colsLayoutStyle === ColsLayoutStyle.Fixed\n        ? gridLayout.reduce((acc: number, cur: string) => acc + Number.parseInt(cur, 10), 0)\n        : '100%',\n    [colsLayoutStyle, gridLayout],\n  );\n\n  const layoutHelpers = useMemo(\n    () => ({\n      gridLayout,\n      totalColumnsWidth,\n    }),\n    [gridLayout, totalColumnsWidth],\n  );\n\n  useTableResizeCb({ virtualListRef, propsWithDefault: propsWithDefaults });\n\n  // ===========================================================================\n  // Action ref setup\n  // ===========================================================================\n  useEffect(() => {\n    if (actionRef) {\n      actionRef.current.scrollToIndex = virtualListHelpers.scrollToIndex;\n      actionRef.current.scrollToOffset = virtualListHelpers.scrollToOffset;\n    }\n  }, [actionRef, virtualListHelpers.scrollToIndex, virtualListHelpers.scrollToOffset]);\n\n  return {\n    visibleRangeRef,\n    layoutHelpers,\n    paginationHelpers,\n    visibleColumns,\n    virtualListHelpers,\n    flattenedData: paginatedData || flattenedData,\n    allDataFlattened,\n    isEmptyContent,\n    firstFocuseableColumnHeaderId,\n    virtualListRef,\n    columnHeaderRef,\n    lastSelected,\n  };\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,WAAW,SAAS,cAAc;AAC3C,SAAS,YAAY,6BAAyC;AAE9D,SAAS,8BAA8B;AACvC,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AACpC,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AAEjC,MAAM,eAAe,MAAM;AAEpB,MAAM,oBAAoB,CAAC,sBAAmF;AACnH,QAAM,EAAE,WAAW,iBAAiB,eAAe,UAAU,IAAI;AAEjE,QAAM,kBAAkB,OAAc,EAAE,OAAO,GAAG,KAAK,EAAE,CAAC;AAC1D,QAAM,iBAAiB,OAA8B,IAAI;AACzD,QAAM,kBAAkB,OAA8B,IAAI;AAC1D,QAAM,eAAe,OAAe,EAAE;AAKtC,QAAM,iBAAiB,uBAAuB,mBAAmB,aAAa;AAM9E,QAAM,CAAC,eAAe,gBAAgB,IAAI,qBAAqB,iBAAiB;AAEhF,QAAM,CAAC,eAAe,iBAAiB,IAAI,oBAAoB,mBAAmB,aAAa;AAE/F,QAAM,aAAa,QAAQ,OAAO,iBAAiB,eAAe,QAAQ,CAAC,eAAe,aAAa,CAAC;AAIxG,QAAM,qBAAqB,WAAW;AAAA,IACpC,MAAM;AAAA,IACN,WAAW;AAAA,IACX,UAAU;AAAA,IACV,cAAc,gBAAgB,SAAS,sBAAsB,GAAG,UAAU;AAAA,IAC1E;AAAA,IACA,gBAAgB,MAAM,YAAY,CAAC,UAAiB;AAClD,sBAAgB,UAAU;AAE1B,aAAO,sBAAsB,KAAK;AAAA,IACpC,GAAG,CAAC,CAAC;AAAA,EACP,CAAC;AAMD,QAAM,iBAAiB,QAAQ,MAAM,CAAC,aAAa,cAAc,WAAW,GAAG,CAAC,WAAW,cAAc,MAAM,CAAC;AAEhH,QAAM,gCAAgC,QAAQ,MAAM;AAClD,aAAS,IAAI,GAAG,IAAI,eAAe,QAAQ,KAAK;AAC9C,YAAM,SAAS,eAAe,CAAC;AAC/B,UAAI,OAAO,iBAAiB,SAAS,OAAO,OAAO,cAAc,OAAO,OAAO,iBAAiB;AAC9F;AAAA,MACF;AACA,aAAO,OAAO;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,cAAc,CAAC;AAMnB,QAAM,aAAa,QAAQ,MAAM,cAAc,gBAAgB,eAAe,GAAG,CAAC,iBAAiB,cAAc,CAAC;AAGlH,QAAM,oBAAoB;AAAA,IACxB,MACE,oBAAoB,gBAAgB,QAChC,WAAW,OAAO,CAAC,KAAa,QAAgB,MAAM,OAAO,SAAS,KAAK,EAAE,GAAG,CAAC,IACjF;AAAA,IACN,CAAC,iBAAiB,UAAU;AAAA,EAC9B;AAEA,QAAM,gBAAgB;AAAA,IACpB,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,YAAY,iBAAiB;AAAA,EAChC;AAEA,mBAAiB,EAAE,gBAAgB,kBAAkB,kBAAkB,CAAC;AAKxE,YAAU,MAAM;AACd,QAAI,WAAW;AACb,gBAAU,QAAQ,gBAAgB,mBAAmB;AACrD,gBAAU,QAAQ,iBAAiB,mBAAmB;AAAA,IACxD;AAAA,EACF,GAAG,CAAC,WAAW,mBAAmB,eAAe,mBAAmB,cAAc,CAAC;AAEnF,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe,iBAAiB;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/esm/configs/useTableColsWithAddons.js

@@ -34,7 +34,7 @@ const useTableColsWithAddons = ({
   selection,
   dragAndDropRows,
   noSelectionColumn
-}) => {
+}, hiddenColumns) => {
   const withSelection = Boolean(selection);
   return useMemo(() => {
     const columnsWithAddons = [...augmentColumns(columns)];
@@ -53,8 +53,29 @@ const useTableColsWithAddons = ({
     colsToAppend.forEach((col) => {
       if (!isColumnInArrayOfColumns(columnsWithAddons, col)) columnsWithAddons.push(col);
     });
-    return columnsWithAddons;
-  }, [columns, isExpandable, withSelection, noSelectionColumn, dragAndDropRows, renderRowActions, selectSingle]);
+    return columnsWithAddons.filter((col) => col.accessor === void 0 || !isColumnVisible(col.accessor, col.columns, hiddenColumns)).map((col) => {
+      if (col.columns) {
+        col.columns = col.columns.filter(
+          (subCol) => subCol.accessor === void 0 || !hiddenColumns?.includes(subCol.accessor)
+        );
+      }
+      return col;
+    });
+  }, [
+    columns,
+    isExpandable,
+    withSelection,
+    noSelectionColumn,
+    dragAndDropRows,
+    renderRowActions,
+    selectSingle,
+    hiddenColumns
+  ]);
+};
+const isColumnVisible = (columnAccessor, columns, hiddenColumns) => {
+  if (!columns) return hiddenColumns.includes(columnAccessor);
+  if (hiddenColumns.includes(columnAccessor)) return true;
+  return columns.every((col) => hiddenColumns.includes(col.accessor || col.id));
 };
 export {
   useTableColsWithAddons

package/dist/esm/configs/useTableColsWithAddons.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/configs/useTableColsWithAddons.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\nimport { createRef, useMemo } from 'react';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\nimport {\n  dragHandleColumn,\n  expandRowColumn,\n  actionColumn,\n  singleSelectColumn,\n  multiSelectColumn,\n} from '../addons/Columns/index.js';\n\ntype UseTableColsWithAddonsType = (config: DSDataTableT.InternalProps) => DSDataTableT.InternalColumn[];\n\nconst augmentColumns = (columns: DSDataTableT.Column[]): DSDataTableT.InternalColumn[] => {\n  const augmentColumn = (\n    column: DSDataTableT.Column,\n    index: number,\n    parentId: string | null = null,\n    depth = 0,\n  ): DSDataTableT.InternalColumn => {\n    let id = `column${index}`;\n    if (typeof column.Header === 'string') id = column.Header;\n    if (typeof column.accessor === 'string') id = column.accessor;\n    const { columns: childColumns, ...restOfColumn } = column;\n    const newCol: DSDataTableT.InternalColumn = {\n      id,\n      parentId,\n      depth,\n      ...restOfColumn,\n      ref: createRef<HTMLTableColElement>() as React.MutableRefObject<HTMLTableColElement>,\n    };\n    if (childColumns) newCol.columns = childColumns.map((col, i) => augmentColumn(col, i, id, depth + 1));\n    return newCol;\n  };\n  return columns.map((col, index) => augmentColumn(col, index));\n};\n\nconst isColumnInArrayOfColumns = (columns: DSDataTableT.Column[], col: DSDataTableT.Column) =>\n  columns.some((column) => column.id === col.id);\n\nconst useTableColsWithAddons: UseTableColsWithAddonsType = ({\n  columns,\n  renderRowActions,\n  isExpandable,\n  selectSingle,\n  selection,\n  dragAndDropRows,\n  noSelectionColumn,\n}) => {\n  const withSelection = Boolean(selection);\n\n  return useMemo(() => {\n    const columnsWithAddons = [...augmentColumns(columns)];\n\n    // Columns to be prepended\n    const colsToPrepend: DSDataTableT.InternalColumn[] = [];\n    // Columns to be appended\n    const colsToAppend: DSDataTableT.InternalColumn[] = [];\n\n    if (isExpandable) colsToPrepend.push(expandRowColumn);\n    if (withSelection && !noSelectionColumn) {\n      if (selectSingle) colsToPrepend.push(singleSelectColumn as unknown as DSDataTableT.InternalColumn);\n      else colsToPrepend.push(multiSelectColumn as unknown as DSDataTableT.InternalColumn);\n    }\n    if (dragAndDropRows) colsToPrepend.push(dragHandleColumn as unknown as DSDataTableT.InternalColumn);\n    if (renderRowActions) colsToAppend.push(actionColumn(renderRowActions));\n\n    // Prepend or append all the columns that were not extended by the user\n    colsToPrepend.forEach((col) => {\n      if (!isColumnInArrayOfColumns(columnsWithAddons, col)) columnsWithAddons.unshift(col);\n    });\n    colsToAppend.forEach((col) => {\n      if (!isColumnInArrayOfColumns(columnsWithAddons, col)) columnsWithAddons.push(col);\n    });\n\n    return columnsWithAddons;\n  }, [columns, isExpandable, withSelection, noSelectionColumn, dragAndDropRows, renderRowActions, selectSingle]);\n};\n\nexport { useTableColsWithAddons };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,WAAW,eAAe;AAEnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAIP,MAAM,iBAAiB,CAAC,YAAkE;AACxF,QAAM,gBAAgB,CACpB,QACA,OACA,WAA0B,MAC1B,QAAQ,MACwB;AAChC,QAAI,KAAK,SAAS,KAAK;AACvB,QAAI,OAAO,OAAO,WAAW,SAAU,MAAK,OAAO;AACnD,QAAI,OAAO,OAAO,aAAa,SAAU,MAAK,OAAO;AACrD,UAAM,EAAE,SAAS,cAAc,GAAG,aAAa,IAAI;AACnD,UAAM,SAAsC;AAAA,MAC1C;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,MACH,KAAK,UAA+B;AAAA,IACtC;AACA,QAAI,aAAc,QAAO,UAAU,aAAa,IAAI,CAAC,KAAK,MAAM,cAAc,KAAK,GAAG,IAAI,QAAQ,CAAC,CAAC;AACpG,WAAO;AAAA,EACT;AACA,SAAO,QAAQ,IAAI,CAAC,KAAK,UAAU,cAAc,KAAK,KAAK,CAAC;AAC9D;AAEA,MAAM,2BAA2B,CAAC,SAAgC,QAChE,QAAQ,KAAK,CAAC,WAAW,OAAO,OAAO,IAAI,EAAE;AAE/C,MAAM,yBAAqD,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,gBAAgB,QAAQ,SAAS;AAEvC,SAAO,QAAQ,MAAM;AACnB,UAAM,oBAAoB,CAAC,GAAG,eAAe,OAAO,CAAC;AAGrD,UAAM,gBAA+C,CAAC;AAEtD,UAAM,eAA8C,CAAC;AAErD,QAAI,aAAc,eAAc,KAAK,eAAe;AACpD,QAAI,iBAAiB,CAAC,mBAAmB;AACvC,UAAI,aAAc,eAAc,KAAK,kBAA4D;AAAA,UAC5F,eAAc,KAAK,iBAA2D;AAAA,IACrF;AACA,QAAI,gBAAiB,eAAc,KAAK,gBAA0D;AAClG,QAAI,iBAAkB,cAAa,KAAK,aAAa,gBAAgB,CAAC;AAGtE,kBAAc,QAAQ,CAAC,QAAQ;AAC7B,UAAI,CAAC,yBAAyB,mBAAmB,GAAG,EAAG,mBAAkB,QAAQ,GAAG;AAAA,IACtF,CAAC;AACD,iBAAa,QAAQ,CAAC,QAAQ;AAC5B,UAAI,CAAC,yBAAyB,mBAAmB,GAAG,EAAG,mBAAkB,KAAK,GAAG;AAAA,IACnF,CAAC;AAED,WAAO;AAAA,EACT,GAAG,CAAC,SAAS,cAAc,eAAe,mBAAmB,iBAAiB,kBAAkB,YAAY,CAAC;AAC/G;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-use-before-define */\n/* eslint-disable max-params */\nimport { createRef, useMemo } from 'react';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\nimport {\n  dragHandleColumn,\n  expandRowColumn,\n  actionColumn,\n  singleSelectColumn,\n  multiSelectColumn,\n} from '../addons/Columns/index.js';\n\nconst augmentColumns = (columns: DSDataTableT.Column[]): DSDataTableT.InternalColumn[] => {\n  const augmentColumn = (\n    column: DSDataTableT.Column,\n    index: number,\n    parentId: string | null = null,\n    depth = 0,\n  ): DSDataTableT.InternalColumn => {\n    let id = `column${index}`;\n    if (typeof column.Header === 'string') id = column.Header;\n    if (typeof column.accessor === 'string') id = column.accessor;\n    const { columns: childColumns, ...restOfColumn } = column;\n    const newCol: DSDataTableT.InternalColumn = {\n      id,\n      parentId,\n      depth,\n      ...restOfColumn,\n      ref: createRef<HTMLTableColElement>() as React.MutableRefObject<HTMLTableColElement>,\n    };\n    if (childColumns) newCol.columns = childColumns.map((col, i) => augmentColumn(col, i, id, depth + 1));\n    return newCol;\n  };\n  return columns.map((col, index) => augmentColumn(col, index));\n};\n\nconst isColumnInArrayOfColumns = (columns: DSDataTableT.Column[], col: DSDataTableT.Column) =>\n  columns.some((column) => column.id === col.id);\n\nconst useTableColsWithAddons = (\n  {\n    columns,\n    renderRowActions,\n    isExpandable,\n    selectSingle,\n    selection,\n    dragAndDropRows,\n    noSelectionColumn,\n  }: DSDataTableT.InternalProps,\n  hiddenColumns: string[],\n) => {\n  const withSelection = Boolean(selection);\n\n  return useMemo(() => {\n    const columnsWithAddons = [...augmentColumns(columns)];\n    // Columns to be prepended\n    const colsToPrepend: DSDataTableT.InternalColumn[] = [];\n    // Columns to be appended\n    const colsToAppend: DSDataTableT.InternalColumn[] = [];\n\n    if (isExpandable) colsToPrepend.push(expandRowColumn);\n    if (withSelection && !noSelectionColumn) {\n      if (selectSingle) colsToPrepend.push(singleSelectColumn as unknown as DSDataTableT.InternalColumn);\n      else colsToPrepend.push(multiSelectColumn as unknown as DSDataTableT.InternalColumn);\n    }\n    if (dragAndDropRows) colsToPrepend.push(dragHandleColumn as unknown as DSDataTableT.InternalColumn);\n    if (renderRowActions) colsToAppend.push(actionColumn(renderRowActions));\n\n    // Prepend or append all the columns that were not extended by the user\n    colsToPrepend.forEach((col) => {\n      if (!isColumnInArrayOfColumns(columnsWithAddons, col)) columnsWithAddons.unshift(col);\n    });\n    colsToAppend.forEach((col) => {\n      if (!isColumnInArrayOfColumns(columnsWithAddons, col)) columnsWithAddons.push(col);\n    });\n\n    return columnsWithAddons\n      .filter((col) => col.accessor === undefined || !isColumnVisible(col.accessor, col.columns, hiddenColumns))\n      .map((col) => {\n        if (col.columns) {\n          col.columns = col.columns.filter(\n            (subCol: DSDataTableT.Column) => subCol.accessor === undefined || !hiddenColumns?.includes(subCol.accessor),\n          );\n        }\n        return col;\n      });\n  }, [\n    columns,\n    isExpandable,\n    withSelection,\n    noSelectionColumn,\n    dragAndDropRows,\n    renderRowActions,\n    selectSingle,\n    hiddenColumns,\n  ]);\n};\n\nexport { useTableColsWithAddons };\n\nconst isColumnVisible = (\n  columnAccessor: string,\n  columns: DSDataTableT.Column[] | undefined,\n  hiddenColumns: string[],\n) => {\n  if (!columns) return hiddenColumns.includes(columnAccessor);\n  if (hiddenColumns.includes(columnAccessor)) return true;\n  return columns.every((col) => hiddenColumns.includes(col.accessor || col.id!));\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,WAAW,eAAe;AAEnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,iBAAiB,CAAC,YAAkE;AACxF,QAAM,gBAAgB,CACpB,QACA,OACA,WAA0B,MAC1B,QAAQ,MACwB;AAChC,QAAI,KAAK,SAAS,KAAK;AACvB,QAAI,OAAO,OAAO,WAAW,SAAU,MAAK,OAAO;AACnD,QAAI,OAAO,OAAO,aAAa,SAAU,MAAK,OAAO;AACrD,UAAM,EAAE,SAAS,cAAc,GAAG,aAAa,IAAI;AACnD,UAAM,SAAsC;AAAA,MAC1C;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,MACH,KAAK,UAA+B;AAAA,IACtC;AACA,QAAI,aAAc,QAAO,UAAU,aAAa,IAAI,CAAC,KAAK,MAAM,cAAc,KAAK,GAAG,IAAI,QAAQ,CAAC,CAAC;AACpG,WAAO;AAAA,EACT;AACA,SAAO,QAAQ,IAAI,CAAC,KAAK,UAAU,cAAc,KAAK,KAAK,CAAC;AAC9D;AAEA,MAAM,2BAA2B,CAAC,SAAgC,QAChE,QAAQ,KAAK,CAAC,WAAW,OAAO,OAAO,IAAI,EAAE;AAE/C,MAAM,yBAAyB,CAC7B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GACA,kBACG;AACH,QAAM,gBAAgB,QAAQ,SAAS;AAEvC,SAAO,QAAQ,MAAM;AACnB,UAAM,oBAAoB,CAAC,GAAG,eAAe,OAAO,CAAC;AAErD,UAAM,gBAA+C,CAAC;AAEtD,UAAM,eAA8C,CAAC;AAErD,QAAI,aAAc,eAAc,KAAK,eAAe;AACpD,QAAI,iBAAiB,CAAC,mBAAmB;AACvC,UAAI,aAAc,eAAc,KAAK,kBAA4D;AAAA,UAC5F,eAAc,KAAK,iBAA2D;AAAA,IACrF;AACA,QAAI,gBAAiB,eAAc,KAAK,gBAA0D;AAClG,QAAI,iBAAkB,cAAa,KAAK,aAAa,gBAAgB,CAAC;AAGtE,kBAAc,QAAQ,CAAC,QAAQ;AAC7B,UAAI,CAAC,yBAAyB,mBAAmB,GAAG,EAAG,mBAAkB,QAAQ,GAAG;AAAA,IACtF,CAAC;AACD,iBAAa,QAAQ,CAAC,QAAQ;AAC5B,UAAI,CAAC,yBAAyB,mBAAmB,GAAG,EAAG,mBAAkB,KAAK,GAAG;AAAA,IACnF,CAAC;AAED,WAAO,kBACJ,OAAO,CAAC,QAAQ,IAAI,aAAa,UAAa,CAAC,gBAAgB,IAAI,UAAU,IAAI,SAAS,aAAa,CAAC,EACxG,IAAI,CAAC,QAAQ;AACZ,UAAI,IAAI,SAAS;AACf,YAAI,UAAU,IAAI,QAAQ;AAAA,UACxB,CAAC,WAAgC,OAAO,aAAa,UAAa,CAAC,eAAe,SAAS,OAAO,QAAQ;AAAA,QAC5G;AAAA,MACF;AACA,aAAO;AAAA,IACT,CAAC;AAAA,EACL,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH;AAIA,MAAM,kBAAkB,CACtB,gBACA,SACA,kBACG;AACH,MAAI,CAAC,QAAS,QAAO,cAAc,SAAS,cAAc;AAC1D,MAAI,cAAc,SAAS,cAAc,EAAG,QAAO;AACnD,SAAO,QAAQ,MAAM,CAAC,QAAQ,cAAc,SAAS,IAAI,YAAY,IAAI,EAAG,CAAC;AAC/E;",
   "names": []
 }

package/dist/esm/exported-related/Toolbar/Toolbar.js

@@ -40,7 +40,8 @@ const ToolbarPosition = styled("div", { name: DSDataTableName, slot: DSDataTable
   height: 28px;
   margin-top: 4px;
   width: 100%;
-  padding-left: 2px;
+  padding-left: 1px;
+  padding-right: 1px;
   outline: none;
   &:hover {
     z-index: 1;

package/dist/esm/exported-related/Toolbar/Toolbar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/Toolbar/Toolbar.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { css, mergeRefs, styled } from '@elliemae/ds-system';\nimport React, { useCallback, useRef, useState } from 'react';\nimport useOnClickOutside from 'use-onclickoutside';\nimport { DSDataTableName, DSDataTableSlots } from '../../DSDataTableDefinitions.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\n\nconst ToolbarBtns = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_BUTTONS_WRAPPER })``;\n\nconst boxShadow = css`\n  box-shadow:\n    0 1px 2px 0 rgba(0, 0, 0, 0.13),\n    0 1px 2px 0 rgba(0, 0, 0, 0.2);\n  & > .toolbar-trigger {\n    border: none;\n  }\n`;\n\nconst ToolbarWrapper = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_WRAPPER })<{\n  isOpen: boolean;\n}>`\n  display: flex;\n  align-items: center;\n  pointer-events: all;\n\n  & .toolbar-trigger:focus {\n    z-index: 8;\n  }\n\n  ${({ isOpen }) => isOpen && boxShadow}\n`;\n\nconst StyledButton = styled(DSButtonV3, { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_BUTTON })`\n  background-color: transparent;\n`;\n\nconst ToolbarPosition = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_POSITION })`\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  pointer-events: none;\n  background: transparent;\n  height: 28px;\n  margin-top: 4px;\n  width: 100%;\n  padding-left: 2px;\n  outline: none;\n  &:hover {\n    z-index: 1;\n  }\n  :after {\n    content: '';\n    position: absolute;\n    left: 0px;\n    top: 4px;\n    bottom: 4px;\n    width: 1px;\n    background-color: neutral-080;\n    z-index: 7;\n  }\n`;\n\ninterface ToolbarProps {\n  isRowSelected?: boolean;\n  cell: DSDataTableT.Cell;\n  children: React.ReactNode;\n}\n\nexport const Toolbar: React.ComponentType<ToolbarProps> = ({ isRowSelected, cell, children }) => {\n  const [show, setShow] = useState(false);\n\n  const toolbarRef = useRef<HTMLDivElement | null>(null);\n  const toolbarTriggerRef = useRef<HTMLButtonElement | null>(null);\n\n  const handleOnClickOutside = useCallback(() => setShow(false), []);\n\n  const handleOnClick = useCallback(() => setShow((prev) => !prev), []);\n\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  const stopPropagation: React.MouseEventHandler = useCallback((e) => e.stopPropagation(), []);\n\n  useOnClickOutside(toolbarRef, handleOnClickOutside);\n\n  const onToolbarKeyDown = useCallback((e: React.KeyboardEvent) => {\n    if (e.code === 'Escape') {\n      setShow(false);\n      toolbarTriggerRef.current?.focus();\n    }\n    e.stopPropagation();\n  }, []);\n\n  const handleOnBlurToolBar = useCallback(() => {\n    setTimeout(() => {\n      if (!toolbarRef?.current?.contains?.(document.activeElement)) {\n        setShow(false);\n      }\n    });\n  }, []);\n\n  return (\n    <ToolbarPosition onBlur={handleOnBlurToolBar} innerRef={toolbarRef} tabIndex={-1} getOwnerProps={getOwnerProps}>\n      <ToolbarWrapper\n        onKeyDown={onToolbarKeyDown}\n        onClick={stopPropagation}\n        isOpen={show}\n        getOwnerProps={getOwnerProps}\n      >\n        {show && <ToolbarBtns getOwnerProps={getOwnerProps}>{children}</ToolbarBtns>}\n        <StyledButton\n          buttonType=\"icon\"\n          className=\"toolbar-trigger\"\n          data-testid={DATA_TESTID.DATA_TABLE_TOOLBAR_TRIGGER}\n          innerRef={mergeRefs(toolbarTriggerRef, cell?.ref)}\n          onClick={handleOnClick}\n          tabIndex={isRowSelected === false ? -1 : 0}\n          aria-label=\"Row actions\"\n        >\n          <MoreOptionsVert />\n        </StyledButton>\n      </ToolbarWrapper>\n    </ToolbarPosition>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACyGjB,SAMW,KANX;AAzGN,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,KAAK,WAAW,cAAc;AACvC,SAAgB,aAAa,QAAQ,gBAAgB;AACrD,OAAO,uBAAuB;AAC9B,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAG9B,MAAM,cAAc,OAAO,OAAO,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,wBAAwB,CAAC;AAE3G,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASlB,MAAM,iBAAiB,OAAO,OAAO,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWlG,CAAC,EAAE,OAAO,MAAM,UAAU,SAAS;AAAA;AAGvC,MAAM,eAAe,OAAO,YAAY,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,eAAe,CAAC;AAAA;AAAA;AAIxG,MAAM,kBAAkB,OAAO,OAAO,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,iBAAiB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgCjG,MAAM,UAA6C,CAAC,EAAE,eAAe,MAAM,SAAS,MAAM;AAC/F,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAEtC,QAAM,aAAa,OAA8B,IAAI;AACrD,QAAM,oBAAoB,OAAiC,IAAI;AAE/D,QAAM,uBAAuB,YAAY,MAAM,QAAQ,KAAK,GAAG,CAAC,CAAC;AAEjE,QAAM,gBAAgB,YAAY,MAAM,QAAQ,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,CAAC;AAEpE,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AAExD,QAAM,kBAA2C,YAAY,CAAC,MAAM,EAAE,gBAAgB,GAAG,CAAC,CAAC;AAE3F,oBAAkB,YAAY,oBAAoB;AAElD,QAAM,mBAAmB,YAAY,CAAC,MAA2B;AAC/D,QAAI,EAAE,SAAS,UAAU;AACvB,cAAQ,KAAK;AACb,wBAAkB,SAAS,MAAM;AAAA,IACnC;AACA,MAAE,gBAAgB;AAAA,EACpB,GAAG,CAAC,CAAC;AAEL,QAAM,sBAAsB,YAAY,MAAM;AAC5C,eAAW,MAAM;AACf,UAAI,CAAC,YAAY,SAAS,WAAW,SAAS,aAAa,GAAG;AAC5D,gBAAQ,KAAK;AAAA,MACf;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,SACE,oBAAC,mBAAgB,QAAQ,qBAAqB,UAAU,YAAY,UAAU,IAAI,eAChF;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,SAAS;AAAA,MACT,QAAQ;AAAA,MACR;AAAA,MAEC;AAAA,gBAAQ,oBAAC,eAAY,eAA+B,UAAS;AAAA,QAC9D;AAAA,UAAC;AAAA;AAAA,YACC,YAAW;AAAA,YACX,WAAU;AAAA,YACV,eAAa,YAAY;AAAA,YACzB,UAAU,UAAU,mBAAmB,MAAM,GAAG;AAAA,YAChD,SAAS;AAAA,YACT,UAAU,kBAAkB,QAAQ,KAAK;AAAA,YACzC,cAAW;AAAA,YAEX,8BAAC,mBAAgB;AAAA;AAAA,QACnB;AAAA;AAAA;AAAA,EACF,GACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { css, mergeRefs, styled } from '@elliemae/ds-system';\nimport React, { useCallback, useRef, useState } from 'react';\nimport useOnClickOutside from 'use-onclickoutside';\nimport { DSDataTableName, DSDataTableSlots } from '../../DSDataTableDefinitions.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\n\nconst ToolbarBtns = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_BUTTONS_WRAPPER })``;\n\nconst boxShadow = css`\n  box-shadow:\n    0 1px 2px 0 rgba(0, 0, 0, 0.13),\n    0 1px 2px 0 rgba(0, 0, 0, 0.2);\n  & > .toolbar-trigger {\n    border: none;\n  }\n`;\n\nconst ToolbarWrapper = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_WRAPPER })<{\n  isOpen: boolean;\n}>`\n  display: flex;\n  align-items: center;\n  pointer-events: all;\n\n  & .toolbar-trigger:focus {\n    z-index: 8;\n  }\n\n  ${({ isOpen }) => isOpen && boxShadow}\n`;\n\nconst StyledButton = styled(DSButtonV3, { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_BUTTON })`\n  background-color: transparent;\n`;\n\nconst ToolbarPosition = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_POSITION })`\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  pointer-events: none;\n  background: transparent;\n  height: 28px;\n  margin-top: 4px;\n  width: 100%;\n  padding-left: 1px;\n  padding-right: 1px;\n  outline: none;\n  &:hover {\n    z-index: 1;\n  }\n  :after {\n    content: '';\n    position: absolute;\n    left: 0px;\n    top: 4px;\n    bottom: 4px;\n    width: 1px;\n    background-color: neutral-080;\n    z-index: 7;\n  }\n`;\n\ninterface ToolbarProps {\n  isRowSelected?: boolean;\n  cell: DSDataTableT.Cell;\n  children: React.ReactNode;\n}\n\nexport const Toolbar: React.ComponentType<ToolbarProps> = ({ isRowSelected, cell, children }) => {\n  const [show, setShow] = useState(false);\n\n  const toolbarRef = useRef<HTMLDivElement | null>(null);\n  const toolbarTriggerRef = useRef<HTMLButtonElement | null>(null);\n\n  const handleOnClickOutside = useCallback(() => setShow(false), []);\n\n  const handleOnClick = useCallback(() => setShow((prev) => !prev), []);\n\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  const stopPropagation: React.MouseEventHandler = useCallback((e) => e.stopPropagation(), []);\n\n  useOnClickOutside(toolbarRef, handleOnClickOutside);\n\n  const onToolbarKeyDown = useCallback((e: React.KeyboardEvent) => {\n    if (e.code === 'Escape') {\n      setShow(false);\n      toolbarTriggerRef.current?.focus();\n    }\n    e.stopPropagation();\n  }, []);\n\n  const handleOnBlurToolBar = useCallback(() => {\n    setTimeout(() => {\n      if (!toolbarRef?.current?.contains?.(document.activeElement)) {\n        setShow(false);\n      }\n    });\n  }, []);\n\n  return (\n    <ToolbarPosition onBlur={handleOnBlurToolBar} innerRef={toolbarRef} tabIndex={-1} getOwnerProps={getOwnerProps}>\n      <ToolbarWrapper\n        onKeyDown={onToolbarKeyDown}\n        onClick={stopPropagation}\n        isOpen={show}\n        getOwnerProps={getOwnerProps}\n      >\n        {show && <ToolbarBtns getOwnerProps={getOwnerProps}>{children}</ToolbarBtns>}\n        <StyledButton\n          buttonType=\"icon\"\n          className=\"toolbar-trigger\"\n          data-testid={DATA_TESTID.DATA_TABLE_TOOLBAR_TRIGGER}\n          innerRef={mergeRefs(toolbarTriggerRef, cell?.ref)}\n          onClick={handleOnClick}\n          tabIndex={isRowSelected === false ? -1 : 0}\n          aria-label=\"Row actions\"\n        >\n          <MoreOptionsVert />\n        </StyledButton>\n      </ToolbarWrapper>\n    </ToolbarPosition>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC0GjB,SAMW,KANX;AA1GN,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,KAAK,WAAW,cAAc;AACvC,SAAgB,aAAa,QAAQ,gBAAgB;AACrD,OAAO,uBAAuB;AAC9B,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAG9B,MAAM,cAAc,OAAO,OAAO,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,wBAAwB,CAAC;AAE3G,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASlB,MAAM,iBAAiB,OAAO,OAAO,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWlG,CAAC,EAAE,OAAO,MAAM,UAAU,SAAS;AAAA;AAGvC,MAAM,eAAe,OAAO,YAAY,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,eAAe,CAAC;AAAA;AAAA;AAIxG,MAAM,kBAAkB,OAAO,OAAO,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,iBAAiB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiCjG,MAAM,UAA6C,CAAC,EAAE,eAAe,MAAM,SAAS,MAAM;AAC/F,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAEtC,QAAM,aAAa,OAA8B,IAAI;AACrD,QAAM,oBAAoB,OAAiC,IAAI;AAE/D,QAAM,uBAAuB,YAAY,MAAM,QAAQ,KAAK,GAAG,CAAC,CAAC;AAEjE,QAAM,gBAAgB,YAAY,MAAM,QAAQ,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,CAAC;AAEpE,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AAExD,QAAM,kBAA2C,YAAY,CAAC,MAAM,EAAE,gBAAgB,GAAG,CAAC,CAAC;AAE3F,oBAAkB,YAAY,oBAAoB;AAElD,QAAM,mBAAmB,YAAY,CAAC,MAA2B;AAC/D,QAAI,EAAE,SAAS,UAAU;AACvB,cAAQ,KAAK;AACb,wBAAkB,SAAS,MAAM;AAAA,IACnC;AACA,MAAE,gBAAgB;AAAA,EACpB,GAAG,CAAC,CAAC;AAEL,QAAM,sBAAsB,YAAY,MAAM;AAC5C,eAAW,MAAM;AACf,UAAI,CAAC,YAAY,SAAS,WAAW,SAAS,aAAa,GAAG;AAC5D,gBAAQ,KAAK;AAAA,MACf;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,SACE,oBAAC,mBAAgB,QAAQ,qBAAqB,UAAU,YAAY,UAAU,IAAI,eAChF;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,SAAS;AAAA,MACT,QAAQ;AAAA,MACR;AAAA,MAEC;AAAA,gBAAQ,oBAAC,eAAY,eAA+B,UAAS;AAAA,QAC9D;AAAA,UAAC;AAAA;AAAA,YACC,YAAW;AAAA,YACX,WAAU;AAAA,YACV,eAAa,YAAY;AAAA,YACzB,UAAU,UAAU,mBAAmB,MAAM,GAAG;AAAA,YAChD,SAAS;AAAA,YACT,UAAU,kBAAkB,QAAQ,KAAK;AAAA,YACzC,cAAW;AAAA,YAEX,8BAAC,mBAAgB;AAAA;AAAA,QACnB;AAAA;AAAA;AAAA,EACF,GACF;AAEJ;",
   "names": []
 }

package/dist/esm/parts/SortByCaret.js

@@ -23,7 +23,7 @@ const SortByCaret = React2.memo(({ isSortedDesc, isReachable, reduxHeader, inner
     }
     return /* @__PURE__ */ jsx(ArrowheadUp, { color: iconColor });
   }, [isSortedDesc]);
-  if (!showSortCaret && !isMenuOpen && !isIconVisible) return null;
+  if (!showSortCaret && !isMenuOpen && !isIconVisible && isSortedDesc === void 0) return null;
   return /* @__PURE__ */ jsx(
     DSButtonV2,
     {

package/dist/esm/parts/SortByCaret.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/SortByCaret.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport type { SvgIconT } from '@elliemae/ds-icons';\nimport { ArrowheadDown, ArrowheadUp, SortNeutral } from '@elliemae/ds-icons';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../configs/constants.js';\nimport { useGetFilterVisibility } from '../exported-related/FilterPopover/useGetFilterVisibility.js';\nconst iconColor: SvgIconT.ColorType = ['brand-primary', '800'];\n\nexport const SortByCaret: React.ComponentType<{\n  isSortedDesc: boolean | undefined;\n  onClick: (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n  isReachable: boolean;\n  column: DSDataTableT.InternalColumn;\n  reduxHeader: DSDataTableT.ReduxHeader;\n  innerRef: React.RefObject<HTMLButtonElement>;\n}> = React.memo(({ isSortedDesc, isReachable, reduxHeader, innerRef, column, onClick }) => {\n  const { isMenuOpen, isIconVisible } = useGetFilterVisibility(reduxHeader);\n\n  const { showSortCaret } = useMemo(\n    () =>\n      reduxHeader || {\n        showSortCaret: false,\n      },\n    [reduxHeader],\n  );\n\n  const icon = useMemo(() => {\n    if (isSortedDesc === undefined) {\n      return <SortNeutral color={iconColor} />;\n    }\n\n    if (isSortedDesc) {\n      return <ArrowheadDown size=\"s\" color={iconColor} />;\n    }\n\n    return <ArrowheadUp color={iconColor} />;\n  }, [isSortedDesc]);\n\n  if (!showSortCaret && !isMenuOpen && !isIconVisible) return null;\n\n  return (\n    <DSButtonV2\n      onClick={onClick}\n      tabIndex={isReachable ? 0 : -1}\n      buttonType=\"icon\"\n      style={{ marginLeft: '4px' }}\n      aria-label={`Sort ${column.id} ${isSortedDesc ? 'ascending' : 'descending'}`}\n      size=\"s\"\n      innerRef={innerRef}\n      data-testid={DATA_TESTID.DATA_TABLE_SORT_BUTTON}\n    >\n      {icon}\n    </DSButtonV2>\n  );\n});\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC6BV;AA7Bb,OAAOA,UAAS,eAAe;AAE/B,SAAS,eAAe,aAAa,mBAAmB;AACxD,SAAS,kBAAkB;AAE3B,SAAS,mBAAmB;AAC5B,SAAS,8BAA8B;AACvC,MAAM,YAAgC,CAAC,iBAAiB,KAAK;AAEtD,MAAM,cAORA,OAAM,KAAK,CAAC,EAAE,cAAc,aAAa,aAAa,UAAU,QAAQ,QAAQ,MAAM;AACzF,QAAM,EAAE,YAAY,cAAc,IAAI,uBAAuB,WAAW;AAExE,QAAM,EAAE,cAAc,IAAI;AAAA,IACxB,MACE,eAAe;AAAA,MACb,eAAe;AAAA,IACjB;AAAA,IACF,CAAC,WAAW;AAAA,EACd;AAEA,QAAM,OAAO,QAAQ,MAAM;AACzB,QAAI,iBAAiB,QAAW;AAC9B,aAAO,oBAAC,eAAY,OAAO,WAAW;AAAA,IACxC;AAEA,QAAI,cAAc;AAChB,aAAO,oBAAC,iBAAc,MAAK,KAAI,OAAO,WAAW;AAAA,IACnD;AAEA,WAAO,oBAAC,eAAY,OAAO,WAAW;AAAA,EACxC,GAAG,CAAC,YAAY,CAAC;AAEjB,MAAI,CAAC,iBAAiB,CAAC,cAAc,CAAC,cAAe,QAAO;AAE5D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAU,cAAc,IAAI;AAAA,MAC5B,YAAW;AAAA,MACX,OAAO,EAAE,YAAY,MAAM;AAAA,MAC3B,cAAY,QAAQ,OAAO,EAAE,IAAI,eAAe,cAAc,YAAY;AAAA,MAC1E,MAAK;AAAA,MACL;AAAA,MACA,eAAa,YAAY;AAAA,MAExB;AAAA;AAAA,EACH;AAEJ,CAAC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport type { SvgIconT } from '@elliemae/ds-icons';\nimport { ArrowheadDown, ArrowheadUp, SortNeutral } from '@elliemae/ds-icons';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../configs/constants.js';\nimport { useGetFilterVisibility } from '../exported-related/FilterPopover/useGetFilterVisibility.js';\nconst iconColor: SvgIconT.ColorType = ['brand-primary', '800'];\n\nexport const SortByCaret: React.ComponentType<{\n  isSortedDesc: boolean | undefined;\n  onClick: (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n  isReachable: boolean;\n  column: DSDataTableT.InternalColumn;\n  reduxHeader: DSDataTableT.ReduxHeader;\n  innerRef: React.RefObject<HTMLButtonElement>;\n}> = React.memo(({ isSortedDesc, isReachable, reduxHeader, innerRef, column, onClick }) => {\n  const { isMenuOpen, isIconVisible } = useGetFilterVisibility(reduxHeader);\n\n  const { showSortCaret } = useMemo(\n    () =>\n      reduxHeader || {\n        showSortCaret: false,\n      },\n    [reduxHeader],\n  );\n\n  const icon = useMemo(() => {\n    if (isSortedDesc === undefined) {\n      return <SortNeutral color={iconColor} />;\n    }\n\n    if (isSortedDesc) {\n      return <ArrowheadDown size=\"s\" color={iconColor} />;\n    }\n\n    return <ArrowheadUp color={iconColor} />;\n  }, [isSortedDesc]);\n\n  if (!showSortCaret && !isMenuOpen && !isIconVisible && isSortedDesc === undefined) return null;\n\n  return (\n    <DSButtonV2\n      onClick={onClick}\n      tabIndex={isReachable ? 0 : -1}\n      buttonType=\"icon\"\n      style={{ marginLeft: '4px' }}\n      aria-label={`Sort ${column.id} ${isSortedDesc ? 'ascending' : 'descending'}`}\n      size=\"s\"\n      innerRef={innerRef}\n      data-testid={DATA_TESTID.DATA_TABLE_SORT_BUTTON}\n    >\n      {icon}\n    </DSButtonV2>\n  );\n});\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC6BV;AA7Bb,OAAOA,UAAS,eAAe;AAE/B,SAAS,eAAe,aAAa,mBAAmB;AACxD,SAAS,kBAAkB;AAE3B,SAAS,mBAAmB;AAC5B,SAAS,8BAA8B;AACvC,MAAM,YAAgC,CAAC,iBAAiB,KAAK;AAEtD,MAAM,cAORA,OAAM,KAAK,CAAC,EAAE,cAAc,aAAa,aAAa,UAAU,QAAQ,QAAQ,MAAM;AACzF,QAAM,EAAE,YAAY,cAAc,IAAI,uBAAuB,WAAW;AAExE,QAAM,EAAE,cAAc,IAAI;AAAA,IACxB,MACE,eAAe;AAAA,MACb,eAAe;AAAA,IACjB;AAAA,IACF,CAAC,WAAW;AAAA,EACd;AAEA,QAAM,OAAO,QAAQ,MAAM;AACzB,QAAI,iBAAiB,QAAW;AAC9B,aAAO,oBAAC,eAAY,OAAO,WAAW;AAAA,IACxC;AAEA,QAAI,cAAc;AAChB,aAAO,oBAAC,iBAAc,MAAK,KAAI,OAAO,WAAW;AAAA,IACnD;AAEA,WAAO,oBAAC,eAAY,OAAO,WAAW;AAAA,EACxC,GAAG,CAAC,YAAY,CAAC;AAEjB,MAAI,CAAC,iBAAiB,CAAC,cAAc,CAAC,iBAAiB,iBAAiB,OAAW,QAAO;AAE1F,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAU,cAAc,IAAI;AAAA,MAC5B,YAAW;AAAA,MACX,OAAO,EAAE,YAAY,MAAM;AAAA,MAC3B,cAAY,QAAQ,OAAO,EAAE,IAAI,eAAe,cAAc,YAAY;AAAA,MAC1E,MAAK;AAAA,MACL;AAAA,MACA,eAAa,YAAY;AAAA,MAExB;AAAA;AAAA,EACH;AAEJ,CAAC;",
   "names": ["React"]
 }

package/dist/types/configs/useTableColsWithAddons.d.ts

@@ -1,4 +1,3 @@
 import type { DSDataTableT } from '../react-desc-prop-types.js';
-type UseTableColsWithAddonsType = (config: DSDataTableT.InternalProps) => DSDataTableT.InternalColumn[];
-declare const useTableColsWithAddons: UseTableColsWithAddonsType;
+declare const useTableColsWithAddons: ({ columns, renderRowActions, isExpandable, selectSingle, selection, dragAndDropRows, noSelectionColumn, }: DSDataTableT.InternalProps, hiddenColumns: string[]) => DSDataTableT.InternalColumn[];
 export { useTableColsWithAddons };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-data-table",
-  "version": "3.51.0-next.11",
+  "version": "3.51.0-next.12",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Data Table",
   "files": [
@@ -39,39 +39,39 @@
     "react-virtual": "~2.10.4",
     "uid": "~2.0.1",
     "use-onclickoutside": "0.4.1",
-    "@elliemae/ds-button": "3.51.0-next.11",
-    "@elliemae/ds-button-v2": "3.51.0-next.11",
-    "@elliemae/ds-circular-progress-indicator": "3.51.0-next.11",
-    "@elliemae/ds-dropdownmenu": "3.51.0-next.11",
-    "@elliemae/ds-drag-and-drop": "3.51.0-next.11",
-    "@elliemae/ds-dropdownmenu-v2": "3.51.0-next.11",
-    "@elliemae/ds-form-checkbox": "3.51.0-next.11",
-    "@elliemae/ds-form-date-range-picker": "3.51.0-next.11",
-    "@elliemae/ds-form-combobox": "3.51.0-next.11",
-    "@elliemae/ds-form-helpers-mask-hooks": "3.51.0-next.11",
-    "@elliemae/ds-form-date-time-picker": "3.51.0-next.11",
-    "@elliemae/ds-form-layout-blocks": "3.51.0-next.11",
-    "@elliemae/ds-form-radio": "3.51.0-next.11",
-    "@elliemae/ds-form-input-text": "3.51.0-next.11",
-    "@elliemae/ds-grid": "3.51.0-next.11",
-    "@elliemae/ds-pagination": "3.51.0-next.11",
-    "@elliemae/ds-popperjs": "3.51.0-next.11",
-    "@elliemae/ds-pills-v2": "3.51.0-next.11",
-    "@elliemae/ds-icons": "3.51.0-next.11",
-    "@elliemae/ds-system": "3.51.0-next.11",
-    "@elliemae/ds-skeleton": "3.51.0-next.11",
-    "@elliemae/ds-truncated-tooltip-text": "3.51.0-next.11",
-    "@elliemae/ds-props-helpers": "3.51.0-next.11",
-    "@elliemae/ds-typescript-helpers": "3.51.0-next.11",
-    "@elliemae/ds-zustand-helpers": "3.51.0-next.11"
+    "@elliemae/ds-button": "3.51.0-next.12",
+    "@elliemae/ds-button-v2": "3.51.0-next.12",
+    "@elliemae/ds-drag-and-drop": "3.51.0-next.12",
+    "@elliemae/ds-circular-progress-indicator": "3.51.0-next.12",
+    "@elliemae/ds-dropdownmenu": "3.51.0-next.12",
+    "@elliemae/ds-form-checkbox": "3.51.0-next.12",
+    "@elliemae/ds-dropdownmenu-v2": "3.51.0-next.12",
+    "@elliemae/ds-form-combobox": "3.51.0-next.12",
+    "@elliemae/ds-form-date-time-picker": "3.51.0-next.12",
+    "@elliemae/ds-form-date-range-picker": "3.51.0-next.12",
+    "@elliemae/ds-form-helpers-mask-hooks": "3.51.0-next.12",
+    "@elliemae/ds-form-input-text": "3.51.0-next.12",
+    "@elliemae/ds-form-layout-blocks": "3.51.0-next.12",
+    "@elliemae/ds-grid": "3.51.0-next.12",
+    "@elliemae/ds-pagination": "3.51.0-next.12",
+    "@elliemae/ds-icons": "3.51.0-next.12",
+    "@elliemae/ds-form-radio": "3.51.0-next.12",
+    "@elliemae/ds-pills-v2": "3.51.0-next.12",
+    "@elliemae/ds-popperjs": "3.51.0-next.12",
+    "@elliemae/ds-skeleton": "3.51.0-next.12",
+    "@elliemae/ds-props-helpers": "3.51.0-next.12",
+    "@elliemae/ds-system": "3.51.0-next.12",
+    "@elliemae/ds-truncated-tooltip-text": "3.51.0-next.12",
+    "@elliemae/ds-typescript-helpers": "3.51.0-next.12",
+    "@elliemae/ds-zustand-helpers": "3.51.0-next.12"
   },
   "devDependencies": {
     "@elliemae/pui-cli": "9.0.0-next.55",
     "jest": "~29.7.0",
     "styled-components": "~5.3.9",
     "styled-system": "^5.1.5",
-    "@elliemae/ds-monorepo-devops": "3.51.0-next.11",
-    "@elliemae/ds-toolbar-v2": "3.51.0-next.11"
+    "@elliemae/ds-monorepo-devops": "3.51.0-next.12",
+    "@elliemae/ds-toolbar-v2": "3.51.0-next.12"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",