@elliemae/ds-data-table 3.4.2 → 3.4.3

package/dist/esm/parts/Headers/HeaderCell.js

@@ -1,5 +1,6 @@
 import * as React from "react";
-import React2, { useContext, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext, useMemo, useRef } from "react";
 import { Grid } from "@elliemae/ds-grid";
 import { StyledHeadTh, StyledHeaderRightIconsWrapper, StyledFocusWithin } from "../../styled";
 import { DataTableContext } from "../../DataTableContext";
@@ -47,30 +48,39 @@ const HeaderCell = (props) => {
   const rightIcons = useMemo(() => {
     if (!hasRightIcons)
       return null;
-    return /* @__PURE__ */ React2.createElement(StyledHeaderRightIconsWrapper, null, /* @__PURE__ */ React2.createElement(FilterMapItem, {
-      column,
-      ctx,
-      onFiltersChange,
-      reduxHeader,
-      filterValue: filters,
-      innerRef: filterIconRef
-    }), hasSortingCaret && /* @__PURE__ */ React2.createElement(SortByCaret, {
-      isSortedDesc: column.isSortedDesc
-    }));
+    return /* @__PURE__ */ jsxs(StyledHeaderRightIconsWrapper, {
+      children: [
+        /* @__PURE__ */ jsx(FilterMapItem, {
+          column,
+          ctx,
+          onFiltersChange,
+          reduxHeader,
+          filterValue: filters,
+          innerRef: filterIconRef
+        }),
+        hasSortingCaret && /* @__PURE__ */ jsx(SortByCaret, {
+          isSortedDesc: column.isSortedDesc
+        })
+      ]
+    });
   }, [hasRightIcons, column, ctx, onFiltersChange, reduxHeader, filters, hasSortingCaret]);
-  const DnDHandleComponent = useMemo(() => /* @__PURE__ */ React2.createElement(Grid, {
-    mr: "2px",
-    alignItems: "center",
-    style: { position: "relative" }
-  }, /* @__PURE__ */ React2.createElement(StyledFocusWithin, {
-    hideFocus: isDragging
-  }, /* @__PURE__ */ React2.createElement(DnDHandle, {
-    key: column.id,
-    innerRef: dragHandleRef,
-    isReachable: reduxHeader?.withTabStops,
-    id: column.id,
-    isDragOverlay
-  }))), [column.id, isDragOverlay, isDragging, reduxHeader?.withTabStops]);
+  const DnDHandleComponent = useMemo(
+    () => /* @__PURE__ */ jsx(Grid, {
+      mr: "2px",
+      alignItems: "center",
+      style: { position: "relative" },
+      children: /* @__PURE__ */ jsx(StyledFocusWithin, {
+        hideFocus: isDragging,
+        children: /* @__PURE__ */ jsx(DnDHandle, {
+          innerRef: dragHandleRef,
+          isReachable: reduxHeader?.withTabStops,
+          id: column.id,
+          isDragOverlay
+        }, column.id)
+      })
+    }),
+    [column.id, isDragOverlay, isDragging, reduxHeader?.withTabStops]
+  );
   const handlers = useHeaderCellHandlers({
     hasFilter,
     patchHeader,
@@ -82,7 +92,7 @@ const HeaderCell = (props) => {
     filterIconRef,
     headerRef: column.ref
   });
-  return /* @__PURE__ */ React2.createElement(StyledHeadTh, {
+  return /* @__PURE__ */ jsxs(StyledHeadTh, {
     column,
     ...handlers,
     role: colSpan === 1 ? "columnheader" : "group",
@@ -95,22 +105,38 @@ const HeaderCell = (props) => {
     isDragOverlay,
     isDraggingActive: draggableProps && draggableProps.active,
     shouldShowDnD,
-    ref: column.ref
-  }, /* @__PURE__ */ React2.createElement(Grid, {
-    width: "100%",
-    cols: hCols
-  }, shouldShowDnD && DnDHandleComponent, /* @__PURE__ */ React2.createElement(HeaderCellTitle, {
-    column,
-    ctx,
-    draggableProps,
-    textWrap
-  }), rightIcons, isResizeable && column.canResize !== false && !column.columns && /* @__PURE__ */ React2.createElement(HeaderResizer, {
-    column
-  })), /* @__PURE__ */ React2.createElement("span", {
-    id: `${column.id}-instructions`,
-    style: { display: "none" },
-    "aria-hidden": "false"
-  }, buildScreenReaderInstructions(colSpan, dragAndDropColumns && column.disableDnD !== true, hasFilter, column.canSort)));
+    ref: column.ref,
+    children: [
+      /* @__PURE__ */ jsxs(Grid, {
+        width: "100%",
+        cols: hCols,
+        children: [
+          shouldShowDnD && DnDHandleComponent,
+          /* @__PURE__ */ jsx(HeaderCellTitle, {
+            column,
+            ctx,
+            draggableProps,
+            textWrap
+          }),
+          rightIcons,
+          isResizeable && column.canResize !== false && !column.columns && /* @__PURE__ */ jsx(HeaderResizer, {
+            column
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx("span", {
+        id: `${column.id}-instructions`,
+        style: { display: "none" },
+        "aria-hidden": "false",
+        children: buildScreenReaderInstructions(
+          colSpan,
+          dragAndDropColumns && column.disableDnD !== true,
+          hasFilter,
+          column.canSort
+        )
+      })
+    ]
+  });
 };
 export {
   HeaderCell

package/dist/esm/parts/Headers/HeaderCell.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Headers/HeaderCell.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\n/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport React, { useContext, useMemo, useRef } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { StyledHeadTh, StyledHeaderRightIconsWrapper, StyledFocusWithin } from '../../styled';\nimport { DataTableContext } from '../../DataTableContext';\nimport { SortByCaret } from '../SortByCaret';\nimport { DnDHandle } from '..';\nimport { SortableItemContext } from '../HoC/SortableItemContext';\nimport { FilterMapItem } from '../Filters';\nimport { HeaderResizer } from './HeaderResizer';\nimport { TypescriptColumn } from '../../types/props';\nimport { useHeaderCellHandlers } from './useHeaderCellHandlers';\nimport { useHeaderCellConfig } from './useHeaderCellConfig';\nimport { DATA_TESTID } from '../../configs/constants';\nimport { HeaderCellTitle } from './HeaderCellTitle';\n\nconst buildScreenReaderInstructions = (colSpan: number, draggable: boolean, filterable: boolean, sortable: boolean) => {\n  const preffix = colSpan === 1 ? '' : 'Column Group. ';\n  if (!draggable && !filterable && !sortable) return preffix;\n\n  let message = sortable\n    ? 'You can sort the data ascendingly/descendingly by this column. Use the up / down arrows keys to do so'\n    : '';\n  if (draggable && filterable) {\n    message = `This column is draggable and filterable. To enable these interactions press the enter key. ${message}`;\n  } else if (draggable || filterable) {\n    message = `This column is ${\n      draggable ? 'draggable' : 'filterable'\n    }. To enable this interaction press the enter key. ${message}`;\n  }\n  return `${preffix}${message}`;\n};\n\ninterface HeaderCellCompProps {\n  column: TypescriptColumn;\n  isDragOverlay: boolean;\n  colSpan: number;\n}\n\nexport const HeaderCell: React.ComponentType<HeaderCellCompProps> = (props) => {\n  const { column, isDragOverlay, colSpan } = props;\n  const ctx = useContext(DataTableContext);\n  const {\n    tableProps: { isResizeable, onColumnSortChange, dragAndDropColumns, onFiltersChange, filters, textWrap },\n    flattenedData,\n    reduxHeaders,\n    patchHeader,\n  } = ctx;\n  const reduxHeader = useMemo(() => reduxHeaders[column.id], [reduxHeaders, column]);\n  const dragHandleRef = useRef<HTMLDivElement>(null);\n  const filterIconRef = useRef<HTMLDivElement>(null);\n\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const { hasFilter, hasDnD, hasSortingCaret, hasRightIcons, shouldShowDnD, hCols, isDragging } = useHeaderCellConfig({\n    column,\n    dragAndDropColumns,\n    draggableProps,\n    reduxHeader,\n    isDragOverlay,\n  });\n\n  const rightIcons = useMemo(() => {\n    if (!hasRightIcons) return null;\n    return (\n      <StyledHeaderRightIconsWrapper>\n        <FilterMapItem\n          column={column}\n          ctx={ctx}\n          onFiltersChange={onFiltersChange}\n          reduxHeader={reduxHeader}\n          filterValue={filters}\n          innerRef={filterIconRef}\n        />\n        {hasSortingCaret && <SortByCaret isSortedDesc={column.isSortedDesc} />}\n      </StyledHeaderRightIconsWrapper>\n    );\n  }, [hasRightIcons, column, ctx, onFiltersChange, reduxHeader, filters, hasSortingCaret]);\n\n  const DnDHandleComponent = useMemo(\n    () => (\n      <Grid mr=\"2px\" alignItems=\"center\" style={{ position: 'relative' }}>\n        <StyledFocusWithin hideFocus={isDragging}>\n          <DnDHandle\n            key={column.id}\n            innerRef={dragHandleRef}\n            isReachable={reduxHeader?.withTabStops}\n            id={column.id}\n            isDragOverlay={isDragOverlay}\n          />\n        </StyledFocusWithin>\n      </Grid>\n    ),\n    [column.id, isDragOverlay, isDragging, reduxHeader?.withTabStops],\n  );\n\n  const handlers = useHeaderCellHandlers({\n    hasFilter,\n    patchHeader,\n    column,\n    reduxHeader,\n    hasDnD,\n    onColumnSortChange,\n    dragHandleRef,\n    filterIconRef,\n    headerRef: column.ref,\n  });\n\n  return (\n    <StyledHeadTh\n      column={column}\n      {...handlers}\n      role={colSpan === 1 ? 'columnheader' : 'group'}\n      colSpan={colSpan}\n      aria-describedby={`${column.id}-instructions`}\n      // eslint-disable-next-line no-nested-ternary\n      aria-sort={hasSortingCaret ? (column.isSortedDesc ? 'descending' : 'ascending') : 'none'}\n      data-testid={DATA_TESTID.DATA_TABLE_HEADER}\n      isFirstRowGroup={!!flattenedData[0]?.original?.dimsumHeaderValue}\n      tabIndex={column.isFocuseable === false ? -1 : 0}\n      isDragOverlay={isDragOverlay}\n      isDraggingActive={draggableProps && draggableProps.active}\n      shouldShowDnD={shouldShowDnD}\n      ref={column.ref}\n    >\n      <Grid width=\"100%\" cols={hCols}>\n        {shouldShowDnD && DnDHandleComponent}\n        <HeaderCellTitle column={column} ctx={ctx} draggableProps={draggableProps} textWrap={textWrap} />\n        {rightIcons}\n        {isResizeable && column.canResize !== false && !column.columns && <HeaderResizer column={column} />}\n      </Grid>\n      <span id={`${column.id}-instructions`} style={{ display: 'none' }} aria-hidden=\"false\">\n        {buildScreenReaderInstructions(\n          colSpan,\n          dragAndDropColumns && column.disableDnD !== true,\n          hasFilter,\n          column.canSort,\n        )}\n      </span>\n    </StyledHeadTh>\n  );\n};\n"],
-  "mappings": "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",
+  "mappings": "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",
   "names": []
 }

package/dist/esm/parts/Headers/HeaderCellGroup.js

@@ -1,5 +1,6 @@
 import * as React from "react";
-import React2, { useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
 import { Grid } from "@elliemae/ds-grid";
 import { styled } from "@elliemae/ds-system";
 import { HeaderCell } from "./HeaderCell";
@@ -36,7 +37,7 @@ const HeaderCellGroupComp = ({
   const dropIndicatorPosition = draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;
   const ChildGroup = isDragOverlay ? HeaderCellGroup : HeaderCellGroupSortable;
   const colSpan = children?.length ?? 1;
-  return /* @__PURE__ */ React2.createElement(StyledWrapper, {
+  return /* @__PURE__ */ jsxs(StyledWrapper, {
     ref: draggableProps ? draggableProps.setNodeRef : null,
     gridColumn: isDragOverlay ? "auto" : `span ${colSpan}`,
     isDragOverlay,
@@ -44,28 +45,34 @@ const HeaderCellGroupComp = ({
     cols: ["auto"],
     "data-testid": isDragOverlay ? DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY : void 0,
     isFirst,
-    shouldDropOneLevel: isMultiLevel && level === 0 && !children
-  }, /* @__PURE__ */ React2.createElement(HeaderCell, {
-    column: header,
-    isDragOverlay,
-    colSpan
-  }), !!children?.length && !isDragOverlay && /* @__PURE__ */ React2.createElement(SortableHeaderCell, {
-    isGroup: true,
-    items: children,
-    isDragOverlay
-  }, children.map((h, index) => /* @__PURE__ */ React2.createElement(ChildGroup, {
-    key: h.id,
-    header: h,
-    isDragOverlay,
-    isDraggingParent: isDragging,
-    isLast: index === children.length - 1,
-    isFirst: index === 0,
-    level: level + 1
-  }))), children?.length && isDragOverlay && /* @__PURE__ */ React2.createElement(EmptyChildrenGroup, null), /* @__PURE__ */ React2.createElement(DropIndicator, {
-    vertical: true,
-    dropIndicatorPosition,
-    isLast: isLast && isDragging
-  }));
+    shouldDropOneLevel: isMultiLevel && level === 0 && !children,
+    children: [
+      /* @__PURE__ */ jsx(HeaderCell, {
+        column: header,
+        isDragOverlay,
+        colSpan
+      }),
+      !!children?.length && !isDragOverlay && /* @__PURE__ */ jsx(SortableHeaderCell, {
+        isGroup: true,
+        items: children,
+        isDragOverlay,
+        children: children.map((h, index) => /* @__PURE__ */ jsx(ChildGroup, {
+          header: h,
+          isDragOverlay,
+          isDraggingParent: isDragging,
+          isLast: index === children.length - 1,
+          isFirst: index === 0,
+          level: level + 1
+        }, h.id))
+      }),
+      children?.length && isDragOverlay && /* @__PURE__ */ jsx(EmptyChildrenGroup, {}),
+      /* @__PURE__ */ jsx(DropIndicator, {
+        vertical: true,
+        dropIndicatorPosition,
+        isLast: isLast && isDragging
+      })
+    ]
+  });
 };
 const HeaderCellGroup = HeaderCellGroupComp;
 const HeaderCellGroupSortable = withDnDSortableColumnContext(HeaderCellGroupComp);

package/dist/esm/parts/Headers/HeaderCellGroup.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Headers/HeaderCellGroup.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { HeaderCell } from './HeaderCell';\nimport { SortableItemContext } from '../HoC/SortableItemContext';\nimport { withDnDSortableColumnContext } from '../internal';\nimport { DropIndicator } from '../DropIndicator';\nimport { SortableHeaderCell } from '../SortableHeaderCell';\nimport { TypescriptColumn } from '../../types/props';\nimport { EmptyChildrenGroup } from './EmptyChildrenGroup';\nimport { DATA_TESTID } from '../../configs';\nimport DataTableContext from '../../DataTableContext';\n\nconst StyledWrapper = styled(Grid)`\n  position: relative;\n  ${({ shouldDropOneLevel, isDragOverlay }) => (shouldDropOneLevel && !isDragOverlay ? `top: 50%; height: 50%;` : '')}\n  width: ${(props) => (props.isDragOverlay ? 'fit-content' : '100%')};\n  grid-column: ${(props) => props.gridColumn};\n  background: ${(props) => (props.isDragging ? props.theme.colors.neutral['080'] : 'white')};\n  opacity: ${(props) => (props.isDragging ? 0.8 : 1)};\n  box-shadow: 0 2px 4px 0 ${(props) => (props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent')};\n  border-left: ${({ isFirst }) => (isFirst ? '0px' : '1px')} solid ${(props) => props.theme.colors.neutral['080']};\n`;\n\ninterface HeaderCellGroupCompProps {\n  header: TypescriptColumn;\n  isDragOverlay?: boolean;\n  isDraggingParent?: boolean;\n  isLast?: boolean;\n  isFirst?: boolean;\n  level?: number;\n}\n\nconst HeaderCellGroupComp: React.ComponentType<HeaderCellGroupCompProps> = ({\n  header,\n  isDragOverlay,\n  isDraggingParent,\n  isLast,\n  isFirst,\n  level = 0,\n}) => {\n  const { visibleColumns } = useContext(DataTableContext);\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const isMultiLevel = visibleColumns.some((col) => !!col.columns);\n\n  const children = header.columns;\n\n  const isDragging = (draggableProps && draggableProps.isDragging) || isDraggingParent;\n  const dropIndicatorPosition =\n    draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;\n\n  const ChildGroup = isDragOverlay ? HeaderCellGroup : HeaderCellGroupSortable;\n\n  const colSpan = children?.length ?? 1;\n  return (\n    <StyledWrapper\n      ref={draggableProps ? draggableProps.setNodeRef : null}\n      gridColumn={isDragOverlay ? 'auto' : `span ${colSpan}`}\n      isDragOverlay={isDragOverlay}\n      isDragging={isDragging}\n      cols={['auto']}\n      data-testid={isDragOverlay ? DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY : undefined}\n      isFirst={isFirst}\n      shouldDropOneLevel={isMultiLevel && level === 0 && !children}\n    >\n      <HeaderCell column={header} isDragOverlay={isDragOverlay} colSpan={colSpan} />\n      {!!children?.length && !isDragOverlay && (\n        <SortableHeaderCell isGroup items={children} isDragOverlay={isDragOverlay}>\n          {children.map((h, index) => (\n            <ChildGroup\n              key={h.id}\n              header={h}\n              isDragOverlay={isDragOverlay}\n              isDraggingParent={isDragging}\n              isLast={index === children.length - 1}\n              isFirst={index === 0}\n              level={level + 1}\n            />\n          ))}\n        </SortableHeaderCell>\n      )}\n      {children?.length && isDragOverlay && <EmptyChildrenGroup />}\n      <DropIndicator vertical dropIndicatorPosition={dropIndicatorPosition} isLast={isLast && isDragging} />\n    </StyledWrapper>\n  );\n};\n\n// We need to declare this because we MUST avoid the useSortable call in the recursive calls of the function\n\nexport const HeaderCellGroup = HeaderCellGroupComp;\n\nexport const HeaderCellGroupSortable = withDnDSortableColumnContext(HeaderCellGroupComp);\n\nexport default HeaderCellGroupSortable;\n"],
-  "mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA,MAAM,gBAAgB,OAAO,IAAI;AAAA;AAAA,IAE7B,CAAC,EAAE,oBAAoB,oBAAqB,sBAAsB,CAAC,gBAAgB,2BAA2B;AAAA,WACvG,CAAC,UAAW,MAAM,gBAAgB,gBAAgB;AAAA,iBAC5C,CAAC,UAAU,MAAM;AAAA,gBAClB,CAAC,UAAW,MAAM,aAAa,MAAM,MAAM,OAAO,QAAQ,SAAS;AAAA,aACtE,CAAC,UAAW,MAAM,aAAa,MAAM;AAAA,4BACtB,CAAC,UAAW,MAAM,gBAAgB,oBAAoB;AAAA,iBACjE,CAAC,EAAE,cAAe,UAAU,QAAQ,eAAgB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAY3G,MAAM,sBAAqE,CAAC;AAAA,EAC1E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,MACJ;AACJ,QAAM,EAAE,mBAAmB,WAAW,gBAAgB;AACtD,QAAM,EAAE,mBAAmB,WAAW,mBAAmB;AAEzD,QAAM,eAAe,eAAe,KAAK,CAAC,QAAQ,CAAC,CAAC,IAAI,OAAO;AAE/D,QAAM,WAAW,OAAO;AAExB,QAAM,aAAc,kBAAkB,eAAe,cAAe;AACpE,QAAM,wBACJ,kBAAkB,eAAe,mCAAmC,eAAe;AAErF,QAAM,aAAa,gBAAgB,kBAAkB;AAErD,QAAM,UAAU,UAAU,UAAU;AACpC,SACE,qCAAC;AAAA,IACC,KAAK,iBAAiB,eAAe,aAAa;AAAA,IAClD,YAAY,gBAAgB,SAAS,QAAQ;AAAA,IAC7C;AAAA,IACA;AAAA,IACA,MAAM,CAAC,MAAM;AAAA,IACb,eAAa,gBAAgB,YAAY,iCAAiC;AAAA,IAC1E;AAAA,IACA,oBAAoB,gBAAgB,UAAU,KAAK,CAAC;AAAA,KAEpD,qCAAC;AAAA,IAAW,QAAQ;AAAA,IAAQ;AAAA,IAA8B;AAAA,GAAkB,GAC3E,CAAC,CAAC,UAAU,UAAU,CAAC,iBACtB,qCAAC;AAAA,IAAmB,SAAO;AAAA,IAAC,OAAO;AAAA,IAAU;AAAA,KAC1C,SAAS,IAAI,CAAC,GAAG,UAChB,qCAAC;AAAA,IACC,KAAK,EAAE;AAAA,IACP,QAAQ;AAAA,IACR;AAAA,IACA,kBAAkB;AAAA,IAClB,QAAQ,UAAU,SAAS,SAAS;AAAA,IACpC,SAAS,UAAU;AAAA,IACnB,OAAO,QAAQ;AAAA,GACjB,CACD,CACH,GAED,UAAU,UAAU,iBAAiB,qCAAC,wBAAmB,GAC1D,qCAAC;AAAA,IAAc,UAAQ;AAAA,IAAC;AAAA,IAA8C,QAAQ,UAAU;AAAA,GAAY,CACtG;AAEJ;AAIO,MAAM,kBAAkB;AAExB,MAAM,0BAA0B,6BAA6B,mBAAmB;AAEvF,IAAO,0BAAQ;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAgB,kBAAkB;AAClC,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,2BAA2B;AACpC,SAAS,oCAAoC;AAC7C,SAAS,qBAAqB;AAC9B,SAAS,0BAA0B;AAEnC,SAAS,0BAA0B;AACnC,SAAS,mBAAmB;AAC5B,OAAO,sBAAsB;AAE7B,MAAM,gBAAgB,OAAO,IAAI;AAAA;AAAA,IAE7B,CAAC,EAAE,oBAAoB,cAAc,MAAO,sBAAsB,CAAC,gBAAgB,2BAA2B;AAAA,WACvG,CAAC,UAAW,MAAM,gBAAgB,gBAAgB;AAAA,iBAC5C,CAAC,UAAU,MAAM;AAAA,gBAClB,CAAC,UAAW,MAAM,aAAa,MAAM,MAAM,OAAO,QAAQ,SAAS;AAAA,aACtE,CAAC,UAAW,MAAM,aAAa,MAAM;AAAA,4BACtB,CAAC,UAAW,MAAM,gBAAgB,oBAAoB;AAAA,iBACjE,CAAC,EAAE,QAAQ,MAAO,UAAU,QAAQ,eAAgB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAY3G,MAAM,sBAAqE,CAAC;AAAA,EAC1E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AACV,MAAM;AACJ,QAAM,EAAE,eAAe,IAAI,WAAW,gBAAgB;AACtD,QAAM,EAAE,eAAe,IAAI,WAAW,mBAAmB;AAEzD,QAAM,eAAe,eAAe,KAAK,CAAC,QAAQ,CAAC,CAAC,IAAI,OAAO;AAE/D,QAAM,WAAW,OAAO;AAExB,QAAM,aAAc,kBAAkB,eAAe,cAAe;AACpE,QAAM,wBACJ,kBAAkB,eAAe,mCAAmC,eAAe;AAErF,QAAM,aAAa,gBAAgB,kBAAkB;AAErD,QAAM,UAAU,UAAU,UAAU;AACpC,SACE,qBAAC;AAAA,IACC,KAAK,iBAAiB,eAAe,aAAa;AAAA,IAClD,YAAY,gBAAgB,SAAS,QAAQ;AAAA,IAC7C;AAAA,IACA;AAAA,IACA,MAAM,CAAC,MAAM;AAAA,IACb,eAAa,gBAAgB,YAAY,iCAAiC;AAAA,IAC1E;AAAA,IACA,oBAAoB,gBAAgB,UAAU,KAAK,CAAC;AAAA,IAEpD;AAAA,0BAAC;AAAA,QAAW,QAAQ;AAAA,QAAQ;AAAA,QAA8B;AAAA,OAAkB;AAAA,MAC3E,CAAC,CAAC,UAAU,UAAU,CAAC,iBACtB,oBAAC;AAAA,QAAmB,SAAO;AAAA,QAAC,OAAO;AAAA,QAAU;AAAA,QAC1C,mBAAS,IAAI,CAAC,GAAG,UAChB,oBAAC;AAAA,UAEC,QAAQ;AAAA,UACR;AAAA,UACA,kBAAkB;AAAA,UAClB,QAAQ,UAAU,SAAS,SAAS;AAAA,UACpC,SAAS,UAAU;AAAA,UACnB,OAAO,QAAQ;AAAA,WANV,EAAE,EAOT,CACD;AAAA,OACH;AAAA,MAED,UAAU,UAAU,iBAAiB,oBAAC,sBAAmB;AAAA,MAC1D,oBAAC;AAAA,QAAc,UAAQ;AAAA,QAAC;AAAA,QAA8C,QAAQ,UAAU;AAAA,OAAY;AAAA;AAAA,GACtG;AAEJ;AAIO,MAAM,kBAAkB;AAExB,MAAM,0BAA0B,6BAA6B,mBAAmB;AAEvF,IAAO,0BAAQ;",
   "names": []
 }

package/dist/esm/parts/Headers/HeaderCellTitle.js

@@ -1,22 +1,28 @@
 import * as React from "react";
-import React2 from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
 import { RequiredDot } from "./RequiredDot";
 import { DATA_TESTID } from "../../configs/constants";
-const StringTitle = ({ column, textWrap }) => (column.textWrap || textWrap) === "truncate" ? /* @__PURE__ */ React2.createElement(SimpleTruncatedTooltipText, {
+const StringTitle = ({ column, textWrap }) => (column.textWrap || textWrap) === "truncate" ? /* @__PURE__ */ jsx(SimpleTruncatedTooltipText, {
   value: column.Header
-}) : /* @__PURE__ */ React2.createElement(React2.Fragment, null, column.Header);
-const HeaderCellTitle = ({ column, ctx, draggableProps, textWrap }) => /* @__PURE__ */ React2.createElement("div", {
+}) : /* @__PURE__ */ jsx(Fragment, {
+  children: column.Header
+});
+const HeaderCellTitle = ({ column, ctx, draggableProps, textWrap }) => /* @__PURE__ */ jsxs("div", {
   style: { display: "flex", alignItems: "center" },
-  "data-testid": DATA_TESTID.DATA_TABLE_HEADER_CELL_TITLE
-}, typeof column.Header === "string" ? /* @__PURE__ */ React2.createElement(StringTitle, {
-  column,
-  textWrap
-}) : /* @__PURE__ */ React2.createElement(column.Header, {
-  column,
-  ctx,
-  draggableProps
-}), column.required && /* @__PURE__ */ React2.createElement(RequiredDot, null));
+  "data-testid": DATA_TESTID.DATA_TABLE_HEADER_CELL_TITLE,
+  children: [
+    typeof column.Header === "string" ? /* @__PURE__ */ jsx(StringTitle, {
+      column,
+      textWrap
+    }) : /* @__PURE__ */ jsx(column.Header, {
+      column,
+      ctx,
+      draggableProps
+    }),
+    column.required && /* @__PURE__ */ jsx(RequiredDot, {})
+  ]
+});
 export {
   HeaderCellTitle
 };

package/dist/esm/parts/Headers/HeaderCellTitle.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Headers/HeaderCellTitle.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { TypescriptColumn, TypescriptContext } from '../../types/props';\nimport { SortableItemContextType } from '../HoC/SortableItemContext';\nimport { RequiredDot } from './RequiredDot';\nimport { DATA_TESTID } from '../../configs/constants';\n\ninterface HeaderCellTitle {\n  column: TypescriptColumn;\n  ctx: TypescriptContext;\n  draggableProps: SortableItemContextType['draggableProps'];\n  textWrap: 'wrap' | 'wrap-all' | 'truncate';\n}\n\nconst StringTitle = ({ column, textWrap }) =>\n  (column.textWrap || textWrap) === 'truncate' ? (\n    <SimpleTruncatedTooltipText value={column.Header} />\n  ) : (\n    <>{column.Header}</>\n  );\n\nexport const HeaderCellTitle: React.ComponentType<HeaderCellTitle> = ({ column, ctx, draggableProps, textWrap }) => (\n  <div style={{ display: 'flex', alignItems: 'center' }} data-testid={DATA_TESTID.DATA_TABLE_HEADER_CELL_TITLE}>\n    {typeof column.Header === 'string' ? (\n      <StringTitle column={column} textWrap={textWrap} />\n    ) : (\n      <column.Header column={column} ctx={ctx} draggableProps={draggableProps} />\n    )}\n    {column.required && <RequiredDot />}\n  </div>\n);\n"],
-  "mappings": "AAAA;ACAA;AACA;AAGA;AACA;AASA,MAAM,cAAc,CAAC,EAAE,QAAQ,eAC5B,QAAO,YAAY,cAAc,aAChC,qCAAC;AAAA,EAA2B,OAAO,OAAO;AAAA,CAAQ,IAElD,4DAAG,OAAO,MAAO;AAGd,MAAM,kBAAwD,CAAC,EAAE,QAAQ,KAAK,gBAAgB,eACnG,qCAAC;AAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,SAAS;AAAA,EAAG,eAAa,YAAY;AAAA,GAC7E,OAAO,OAAO,WAAW,WACxB,qCAAC;AAAA,EAAY;AAAA,EAAgB;AAAA,CAAoB,IAEjD,qCAAC,OAAO,QAAP;AAAA,EAAc;AAAA,EAAgB;AAAA,EAAU;AAAA,CAAgC,GAE1E,OAAO,YAAY,qCAAC,iBAAY,CACnC;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAS,kCAAkC;AAG3C,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAS5B,MAAM,cAAc,CAAC,EAAE,QAAQ,SAAS,OACrC,OAAO,YAAY,cAAc,aAChC,oBAAC;AAAA,EAA2B,OAAO,OAAO;AAAA,CAAQ,IAElD;AAAA,EAAG,iBAAO;AAAA,CAAO;AAGd,MAAM,kBAAwD,CAAC,EAAE,QAAQ,KAAK,gBAAgB,SAAS,MAC5G,qBAAC;AAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,SAAS;AAAA,EAAG,eAAa,YAAY;AAAA,EAC7E;AAAA,WAAO,OAAO,WAAW,WACxB,oBAAC;AAAA,MAAY;AAAA,MAAgB;AAAA,KAAoB,IAEjD,oBAAC,OAAO,QAAP;AAAA,MAAc;AAAA,MAAgB;AAAA,MAAU;AAAA,KAAgC;AAAA,IAE1E,OAAO,YAAY,oBAAC,eAAY;AAAA;AAAA,CACnC;",
   "names": []
 }

package/dist/esm/parts/Headers/HeaderResizer.js

@@ -1,5 +1,6 @@
 import * as React from "react";
-import React2, { useState, useCallback, useContext, useRef, useEffect, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useState, useCallback, useContext, useRef, useEffect, useMemo } from "react";
 import { ColsLayoutStyle } from "../../configs/constants";
 import { DataTableContext } from "../../DataTableContext";
 import { columnsToGrid } from "../../helpers";
@@ -13,12 +14,15 @@ const HeaderResizer = ({ column }) => {
   } = useContext(DataTableContext);
   const [isResizing, setIsResizing] = useState(false);
   const [nextWidth, setNextWidth] = useState(column.width ?? 150);
-  const visibleColumnsCopy = useMemo(() => visibleColumns.reduce((acc, col) => {
-    if (col.columns) {
-      return [...acc, ...col.columns];
-    }
-    return [...acc, { ...col }];
-  }, []), [visibleColumns]);
+  const visibleColumnsCopy = useMemo(
+    () => visibleColumns.reduce((acc, col) => {
+      if (col.columns) {
+        return [...acc, ...col.columns];
+      }
+      return [...acc, { ...col }];
+    }, []),
+    [visibleColumns]
+  );
   useEffect(() => {
     const realColumnIndex = visibleColumnsCopy.findIndex((visibleColumn) => visibleColumn.id === column.id);
     if (realColumnIndex > -1) {
@@ -30,21 +34,28 @@ const HeaderResizer = ({ column }) => {
   const onResizeStart = useCallback(() => {
     setIsResizing(true);
   }, []);
-  const onResizeHandler = useCallback((e) => {
-    const delta = ("clientX" in e ? e.clientX : e.touches[0].clientX) - (ref.current?.getBoundingClientRect().x ?? 0);
-    const realColumnIndex = visibleColumnsCopy.findIndex((visibleColumn) => visibleColumn.id === column.id);
-    if (realColumnIndex > -1) {
-      const widthWithDelta = narrow(nextWidth + delta, visibleColumnsCopy[realColumnIndex].minWidth, visibleColumnsCopy[realColumnIndex].maxWidth);
-      setNextWidth(widthWithDelta);
-    }
-    e.preventDefault();
-    e.stopPropagation();
-  }, [column.id, nextWidth, visibleColumnsCopy]);
+  const onResizeHandler = useCallback(
+    (e) => {
+      const delta = ("clientX" in e ? e.clientX : e.touches[0].clientX) - (ref.current?.getBoundingClientRect().x ?? 0);
+      const realColumnIndex = visibleColumnsCopy.findIndex((visibleColumn) => visibleColumn.id === column.id);
+      if (realColumnIndex > -1) {
+        const widthWithDelta = narrow(
+          nextWidth + delta,
+          visibleColumnsCopy[realColumnIndex].minWidth,
+          visibleColumnsCopy[realColumnIndex].maxWidth
+        );
+        setNextWidth(widthWithDelta);
+      }
+      e.preventDefault();
+      e.stopPropagation();
+    },
+    [column.id, nextWidth, visibleColumnsCopy]
+  );
   const onResizeEnd = useCallback(() => {
-    setGridLayout(columnsToGrid(visibleColumnsCopy, ColsLayoutStyle.Fixed));
+    setGridLayout(columnsToGrid(visibleColumns, ColsLayoutStyle.Fixed));
     setIsResizing(false);
     onColumnResize(column.id, nextWidth);
-  }, [onColumnResize, column.id, nextWidth, setGridLayout, visibleColumnsCopy]);
+  }, [onColumnResize, column.id, nextWidth, setGridLayout, visibleColumns]);
   useEffect(() => {
     const debouncedResizeHandler = onResizeHandler;
     const debouncedResizeEnd = onResizeEnd;
@@ -66,7 +77,7 @@ const HeaderResizer = ({ column }) => {
       removeEvents();
     return removeEvents;
   }, [isResizing, onResizeHandler, onResizeEnd]);
-  return /* @__PURE__ */ React2.createElement(StyledResizer, {
+  return /* @__PURE__ */ jsx(StyledResizer, {
     ref,
     role: "separator",
     draggable: false,

package/dist/esm/parts/Headers/HeaderResizer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Headers/HeaderResizer.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useCallback, useContext, useRef, useEffect, useMemo } from 'react';\nimport { ColsLayoutStyle } from '../../configs/constants';\nimport { DataTableContext } from '../../DataTableContext';\nimport { columnsToGrid } from '../../helpers';\nimport { StyledResizer } from '../../styled';\nimport { TypescriptColumn } from '../../types/props';\n\nconst narrow = (value: number, min: number | undefined, max: number | undefined): number =>\n  Math.min(Math.max(value, min ?? 30), max ?? Infinity);\n\nexport const HeaderResizer: React.ComponentType<{\n  column: TypescriptColumn;\n}> = ({ column }) => {\n  const {\n    layoutHelpers: { setGridLayout },\n    visibleColumns,\n    tableProps: { onColumnResize },\n  } = useContext(DataTableContext);\n\n  const [isResizing, setIsResizing] = useState(false);\n  const [nextWidth, setNextWidth] = useState(column.width ?? 150);\n  const visibleColumnsCopy = useMemo(\n    () =>\n      visibleColumns.reduce((acc, col) => {\n        if (col.columns) {\n          return [...acc, ...col.columns];\n        }\n        return [...acc, { ...col }];\n      }, [] as TypescriptColumn[]),\n    [visibleColumns],\n  );\n\n  useEffect(() => {\n    const realColumnIndex = visibleColumnsCopy.findIndex((visibleColumn) => visibleColumn.id === column.id);\n    if (realColumnIndex > -1) {\n      visibleColumnsCopy[realColumnIndex].width = nextWidth;\n      setGridLayout(columnsToGrid(visibleColumnsCopy, ColsLayoutStyle.Fixed));\n    }\n  }, [column.id, nextWidth, setGridLayout, visibleColumnsCopy]);\n\n  const ref = useRef<HTMLDivElement>(null);\n\n  const onResizeStart = useCallback(() => {\n    setIsResizing(true);\n  }, []);\n\n  const onResizeHandler = useCallback(\n    (e: MouseEvent | TouchEvent) => {\n      const delta = ('clientX' in e ? e.clientX : e.touches[0].clientX) - (ref.current?.getBoundingClientRect().x ?? 0); // delta in pixels\n\n      const realColumnIndex = visibleColumnsCopy.findIndex((visibleColumn) => visibleColumn.id === column.id);\n      if (realColumnIndex > -1) {\n        const widthWithDelta = narrow(\n          nextWidth + delta,\n          visibleColumnsCopy[realColumnIndex].minWidth,\n          visibleColumnsCopy[realColumnIndex].maxWidth,\n        );\n        setNextWidth(widthWithDelta);\n      }\n      // To prevent text selection\n      e.preventDefault();\n      e.stopPropagation();\n    },\n    [column.id, nextWidth, visibleColumnsCopy],\n  );\n\n  const onResizeEnd = useCallback(() => {\n    setGridLayout(columnsToGrid(visibleColumnsCopy, ColsLayoutStyle.Fixed));\n    setIsResizing(false);\n    onColumnResize(column.id, nextWidth);\n  }, [onColumnResize, column.id, nextWidth, setGridLayout, visibleColumnsCopy]);\n\n  useEffect(() => {\n    const debouncedResizeHandler = onResizeHandler;\n    const debouncedResizeEnd = onResizeEnd;\n    const addEvents = () => {\n      document.addEventListener('mousemove', debouncedResizeHandler);\n      document.addEventListener('touchmove', debouncedResizeHandler);\n      document.addEventListener('mouseup', debouncedResizeEnd);\n      document.addEventListener('touchend', debouncedResizeEnd);\n    };\n    const removeEvents = () => {\n      document.removeEventListener('mousemove', debouncedResizeHandler);\n      document.removeEventListener('touchmove', debouncedResizeHandler);\n      document.removeEventListener('mouseup', debouncedResizeEnd);\n      document.removeEventListener('touchend', debouncedResizeEnd);\n    };\n\n    if (isResizing) addEvents();\n    else removeEvents();\n\n    // just in case the component is unmounted\n    return removeEvents;\n  }, [isResizing, onResizeHandler, onResizeEnd]);\n\n  return (\n    <StyledResizer\n      ref={ref}\n      role=\"separator\"\n      draggable={false}\n      isResizing={isResizing}\n      onMouseDown={onResizeStart}\n      onTouchStart={onResizeStart}\n      onMouseUp={onResizeEnd}\n      onTouchEnd={onResizeEnd}\n      onClick={(e) => e.stopPropagation()}\n    />\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useCallback, useContext, useRef, useEffect, useMemo } from 'react';\nimport { ColsLayoutStyle } from '../../configs/constants';\nimport { DataTableContext } from '../../DataTableContext';\nimport { columnsToGrid } from '../../helpers';\nimport { StyledResizer } from '../../styled';\nimport { TypescriptColumn } from '../../types/props';\n\nconst narrow = (value: number, min: number | undefined, max: number | undefined): number =>\n  Math.min(Math.max(value, min ?? 30), max ?? Infinity);\n\nexport const HeaderResizer: React.ComponentType<{\n  column: TypescriptColumn;\n}> = ({ column }) => {\n  const {\n    layoutHelpers: { setGridLayout },\n    visibleColumns,\n    tableProps: { onColumnResize },\n  } = useContext(DataTableContext);\n\n  const [isResizing, setIsResizing] = useState(false);\n  const [nextWidth, setNextWidth] = useState(column.width ?? 150);\n  const visibleColumnsCopy = useMemo(\n    () =>\n      visibleColumns.reduce((acc, col) => {\n        if (col.columns) {\n          return [...acc, ...col.columns];\n        }\n        return [...acc, { ...col }];\n      }, [] as TypescriptColumn[]),\n    [visibleColumns],\n  );\n\n  useEffect(() => {\n    const realColumnIndex = visibleColumnsCopy.findIndex((visibleColumn) => visibleColumn.id === column.id);\n    if (realColumnIndex > -1) {\n      visibleColumnsCopy[realColumnIndex].width = nextWidth;\n      setGridLayout(columnsToGrid(visibleColumnsCopy, ColsLayoutStyle.Fixed));\n    }\n  }, [column.id, nextWidth, setGridLayout, visibleColumnsCopy]);\n\n  const ref = useRef<HTMLDivElement>(null);\n\n  const onResizeStart = useCallback(() => {\n    setIsResizing(true);\n  }, []);\n\n  const onResizeHandler = useCallback(\n    (e: MouseEvent | TouchEvent) => {\n      const delta = ('clientX' in e ? e.clientX : e.touches[0].clientX) - (ref.current?.getBoundingClientRect().x ?? 0); // delta in pixels\n\n      const realColumnIndex = visibleColumnsCopy.findIndex((visibleColumn) => visibleColumn.id === column.id);\n      if (realColumnIndex > -1) {\n        const widthWithDelta = narrow(\n          nextWidth + delta,\n          visibleColumnsCopy[realColumnIndex].minWidth,\n          visibleColumnsCopy[realColumnIndex].maxWidth,\n        );\n        setNextWidth(widthWithDelta);\n      }\n      // To prevent text selection\n      e.preventDefault();\n      e.stopPropagation();\n    },\n    [column.id, nextWidth, visibleColumnsCopy],\n  );\n\n  const onResizeEnd = useCallback(() => {\n    setGridLayout(columnsToGrid(visibleColumns, ColsLayoutStyle.Fixed));\n    setIsResizing(false);\n    onColumnResize(column.id, nextWidth);\n  }, [onColumnResize, column.id, nextWidth, setGridLayout, visibleColumns]);\n\n  useEffect(() => {\n    const debouncedResizeHandler = onResizeHandler;\n    const debouncedResizeEnd = onResizeEnd;\n    const addEvents = () => {\n      document.addEventListener('mousemove', debouncedResizeHandler);\n      document.addEventListener('touchmove', debouncedResizeHandler);\n      document.addEventListener('mouseup', debouncedResizeEnd);\n      document.addEventListener('touchend', debouncedResizeEnd);\n    };\n    const removeEvents = () => {\n      document.removeEventListener('mousemove', debouncedResizeHandler);\n      document.removeEventListener('touchmove', debouncedResizeHandler);\n      document.removeEventListener('mouseup', debouncedResizeEnd);\n      document.removeEventListener('touchend', debouncedResizeEnd);\n    };\n\n    if (isResizing) addEvents();\n    else removeEvents();\n\n    // just in case the component is unmounted\n    return removeEvents;\n  }, [isResizing, onResizeHandler, onResizeEnd]);\n\n  return (\n    <StyledResizer\n      ref={ref}\n      role=\"separator\"\n      draggable={false}\n      isResizing={isResizing}\n      onMouseDown={onResizeStart}\n      onTouchStart={onResizeStart}\n      onMouseUp={onResizeEnd}\n      onTouchEnd={onResizeEnd}\n      onClick={(e) => e.stopPropagation()}\n    />\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/parts/Headers/RequiredDot.js

@@ -1,15 +1,16 @@
 import * as React from "react";
-import React2 from "react";
-const RequiredDot = () => /* @__PURE__ */ React2.createElement("svg", {
+import { jsx } from "react/jsx-runtime";
+const RequiredDot = () => /* @__PURE__ */ jsx("svg", {
   height: "4",
   width: "4",
-  style: { marginBottom: "6px", marginLeft: "4px" }
-}, /* @__PURE__ */ React2.createElement("circle", {
-  cx: "2",
-  cy: "2",
-  r: "2",
-  fill: "red"
-}));
+  style: { marginBottom: "6px", marginLeft: "4px" },
+  children: /* @__PURE__ */ jsx("circle", {
+    cx: "2",
+    cy: "2",
+    r: "2",
+    fill: "red"
+  })
+});
 export {
   RequiredDot
 };

package/dist/esm/parts/Headers/RequiredDot.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Headers/RequiredDot.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\n\nexport const RequiredDot: React.ComponentType = () => (\n  <svg height=\"4\" width=\"4\" style={{ marginBottom: '6px', marginLeft: '4px' }}>\n    <circle cx=\"2\" cy=\"2\" r=\"2\" fill=\"red\" />\n  </svg>\n);\n"],
-  "mappings": "AAAA;ACAA;AAEO,MAAM,cAAmC,MAC9C,qCAAC;AAAA,EAAI,QAAO;AAAA,EAAI,OAAM;AAAA,EAAI,OAAO,EAAE,cAAc,OAAO,YAAY,MAAM;AAAA,GACxE,qCAAC;AAAA,EAAO,IAAG;AAAA,EAAI,IAAG;AAAA,EAAI,GAAE;AAAA,EAAI,MAAK;AAAA,CAAM,CACzC;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAEO,MAAM,cAAmC,MAC9C,oBAAC;AAAA,EAAI,QAAO;AAAA,EAAI,OAAM;AAAA,EAAI,OAAO,EAAE,cAAc,OAAO,YAAY,MAAM;AAAA,EACxE,8BAAC;AAAA,IAAO,IAAG;AAAA,IAAI,IAAG;AAAA,IAAI,GAAE;AAAA,IAAI,MAAK;AAAA,GAAM;AAAA,CACzC;",
   "names": []
 }

package/dist/esm/parts/Headers/index.js

@@ -1,5 +1,6 @@
 import * as React from "react";
-import React2, { useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useContext, useMemo } from "react";
 import { StyledHeadWrapper, StyledHeadTr } from "../../styled";
 import { DataTableContext } from "../../DataTableContext";
 import { withConditionalDnDColumnContext } from "../HoC/withConditionalDnDColumnContext";
@@ -12,23 +13,31 @@ const HeadersComp = () => {
     columnHeaderRef,
     visibleColumns
   } = useContext(DataTableContext);
-  const HeadersCells = useMemo(() => /* @__PURE__ */ React2.createElement(SortableHeaderCell, {
-    items: visibleColumns
-  }, /* @__PURE__ */ React2.createElement(StyledHeadTr, {
-    role: "row",
-    cols: gridLayout,
-    colsLayoutStyle,
-    isExpandable
-  }, visibleColumns.map((h, index) => /* @__PURE__ */ React2.createElement(HeaderCellGroupSortable, {
-    header: h,
-    key: h.id,
-    isLast: index === visibleColumns.length - 1
-  })))), [isExpandable, visibleColumns, gridLayout, colsLayoutStyle]);
-  const PureHeaders = useMemo(() => /* @__PURE__ */ React2.createElement(StyledHeadWrapper, {
-    totalColumnsWidth,
-    colsLayoutStyle,
-    ref: columnHeaderRef
-  }, HeadersCells), [totalColumnsWidth, colsLayoutStyle, columnHeaderRef, HeadersCells]);
+  const HeadersCells = useMemo(
+    () => /* @__PURE__ */ jsx(SortableHeaderCell, {
+      items: visibleColumns,
+      children: /* @__PURE__ */ jsx(StyledHeadTr, {
+        role: "row",
+        cols: gridLayout,
+        colsLayoutStyle,
+        isExpandable,
+        children: visibleColumns.map((h, index) => /* @__PURE__ */ jsx(HeaderCellGroupSortable, {
+          header: h,
+          isLast: index === visibleColumns.length - 1
+        }, h.id))
+      })
+    }),
+    [isExpandable, visibleColumns, gridLayout, colsLayoutStyle]
+  );
+  const PureHeaders = useMemo(
+    () => /* @__PURE__ */ jsx(StyledHeadWrapper, {
+      totalColumnsWidth,
+      colsLayoutStyle,
+      ref: columnHeaderRef,
+      children: HeadersCells
+    }),
+    [totalColumnsWidth, colsLayoutStyle, columnHeaderRef, HeadersCells]
+  );
   return PureHeaders;
 };
 const Headers = withConditionalDnDColumnContext(HeadersComp);

package/dist/esm/parts/Headers/index.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Headers/index.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { StyledHeadWrapper, StyledHeadTr } from '../../styled';\nimport { DataTableContext } from '../../DataTableContext';\nimport { withConditionalDnDColumnContext } from '../HoC/withConditionalDnDColumnContext';\nimport { HeaderCellGroupSortable } from './HeaderCellGroup';\nimport { SortableHeaderCell } from '../SortableHeaderCell';\nimport { TypescriptColumn } from '../../types/props';\n\nconst HeadersComp = (): JSX.Element => {\n  const {\n    tableProps: { isExpandable, colsLayoutStyle },\n    layoutHelpers: { gridLayout, totalColumnsWidth },\n    columnHeaderRef,\n    visibleColumns,\n  } = useContext(DataTableContext);\n  const HeadersCells = useMemo(\n    () => (\n      <SortableHeaderCell items={visibleColumns}>\n        <StyledHeadTr role=\"row\" cols={gridLayout} colsLayoutStyle={colsLayoutStyle} isExpandable={isExpandable}>\n          {visibleColumns.map((h: TypescriptColumn, index) => (\n            <HeaderCellGroupSortable header={h} key={h.id} isLast={index === visibleColumns.length - 1} />\n          ))}\n        </StyledHeadTr>\n      </SortableHeaderCell>\n    ),\n    [isExpandable, visibleColumns, gridLayout, colsLayoutStyle],\n  );\n\n  const PureHeaders = useMemo(\n    () => (\n      <StyledHeadWrapper totalColumnsWidth={totalColumnsWidth} colsLayoutStyle={colsLayoutStyle} ref={columnHeaderRef}>\n        {HeadersCells}\n      </StyledHeadWrapper>\n    ),\n    [totalColumnsWidth, colsLayoutStyle, columnHeaderRef, HeadersCells],\n  );\n  return PureHeaders;\n};\n\nexport const Headers = withConditionalDnDColumnContext(HeadersComp);\nexport default Headers;\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAGA,MAAM,cAAc,MAAmB;AACrC,QAAM;AAAA,IACJ,YAAY,EAAE,cAAc;AAAA,IAC5B,eAAe,EAAE,YAAY;AAAA,IAC7B;AAAA,IACA;AAAA,MACE,WAAW,gBAAgB;AAC/B,QAAM,eAAe,QACnB,MACE,qCAAC;AAAA,IAAmB,OAAO;AAAA,KACzB,qCAAC;AAAA,IAAa,MAAK;AAAA,IAAM,MAAM;AAAA,IAAY;AAAA,IAAkC;AAAA,KAC1E,eAAe,IAAI,CAAC,GAAqB,UACxC,qCAAC;AAAA,IAAwB,QAAQ;AAAA,IAAG,KAAK,EAAE;AAAA,IAAI,QAAQ,UAAU,eAAe,SAAS;AAAA,GAAG,CAC7F,CACH,CACF,GAEF,CAAC,cAAc,gBAAgB,YAAY,eAAe,CAC5D;AAEA,QAAM,cAAc,QAClB,MACE,qCAAC;AAAA,IAAkB;AAAA,IAAsC;AAAA,IAAkC,KAAK;AAAA,KAC7F,YACH,GAEF,CAAC,mBAAmB,iBAAiB,iBAAiB,YAAY,CACpE;AACA,SAAO;AACT;AAEO,MAAM,UAAU,gCAAgC,WAAW;AAClE,IAAO,kBAAQ;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,eAAe;AAC3C,SAAS,mBAAmB,oBAAoB;AAChD,SAAS,wBAAwB;AACjC,SAAS,uCAAuC;AAChD,SAAS,+BAA+B;AACxC,SAAS,0BAA0B;AAGnC,MAAM,cAAc,MAAmB;AACrC,QAAM;AAAA,IACJ,YAAY,EAAE,cAAc,gBAAgB;AAAA,IAC5C,eAAe,EAAE,YAAY,kBAAkB;AAAA,IAC/C;AAAA,IACA;AAAA,EACF,IAAI,WAAW,gBAAgB;AAC/B,QAAM,eAAe;AAAA,IACnB,MACE,oBAAC;AAAA,MAAmB,OAAO;AAAA,MACzB,8BAAC;AAAA,QAAa,MAAK;AAAA,QAAM,MAAM;AAAA,QAAY;AAAA,QAAkC;AAAA,QAC1E,yBAAe,IAAI,CAAC,GAAqB,UACxC,oBAAC;AAAA,UAAwB,QAAQ;AAAA,UAAc,QAAQ,UAAU,eAAe,SAAS;AAAA,WAAhD,EAAE,EAAiD,CAC7F;AAAA,OACH;AAAA,KACF;AAAA,IAEF,CAAC,cAAc,gBAAgB,YAAY,eAAe;AAAA,EAC5D;AAEA,QAAM,cAAc;AAAA,IAClB,MACE,oBAAC;AAAA,MAAkB;AAAA,MAAsC;AAAA,MAAkC,KAAK;AAAA,MAC7F;AAAA,KACH;AAAA,IAEF,CAAC,mBAAmB,iBAAiB,iBAAiB,YAAY;AAAA,EACpE;AACA,SAAO;AACT;AAEO,MAAM,UAAU,gCAAgC,WAAW;AAClE,IAAO,kBAAQ;",
   "names": []
 }

package/dist/esm/parts/Headers/useHeaderCellConfig.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Headers/useHeaderCellConfig.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport { TypescriptColumn } from '../../types/props';\nimport { SortableItemContextType } from '../HoC/SortableItemContext';\n\ntype useHeaderCellConfigType = (\n  args: {\n    column: TypescriptColumn;\n    dragAndDropColumns: boolean;\n    reduxHeader: { showDnDHandle: boolean };\n    isDragOverlay: boolean;\n  } & SortableItemContextType,\n) => {\n  hasFilter: boolean;\n  hasDnD: boolean;\n  hasSortingCaret: boolean;\n  hasRightIcons: boolean;\n  isDragging: boolean;\n  shouldShowDnD: boolean;\n  hCols: string[];\n};\n\nexport const useHeaderCellConfig: useHeaderCellConfigType = ({\n  column,\n  dragAndDropColumns,\n  draggableProps,\n  reduxHeader,\n  isDragOverlay,\n}) => {\n  const hasFilter = !!(column.filter || column.Filter);\n\n  const hasDnD = dragAndDropColumns && !column.disableDnD;\n\n  const hasSortingCaret = column.canSort && typeof column.isSortedDesc === 'boolean';\n\n  const hasRightIcons = !isDragOverlay && (hasSortingCaret || hasFilter);\n\n  const isDragging = draggableProps && draggableProps.isDragging;\n\n  const shouldShowDnD =\n    hasDnD &&\n    ((reduxHeader?.showDnDHandle && draggableProps && !draggableProps.active) ||\n      (draggableProps && draggableProps.isDragging) ||\n      isDragOverlay);\n\n  // Column definition\n  const hCols = ['auto'];\n  if (hasRightIcons) hCols.push('min-content');\n  if (shouldShowDnD) hCols.unshift('min-content');\n\n  return {\n    hasFilter,\n    hasDnD,\n    hasSortingCaret,\n    hasRightIcons,\n    isDragging,\n    hCols,\n    shouldShowDnD,\n  };\n};\n"],
-  "mappings": "AAAA;ACqBO,MAAM,sBAA+C,CAAC;AAAA,EAC3D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACI;AACJ,QAAM,YAAY,CAAC,CAAE,QAAO,UAAU,OAAO;AAE7C,QAAM,SAAS,sBAAsB,CAAC,OAAO;AAE7C,QAAM,kBAAkB,OAAO,WAAW,OAAO,OAAO,iBAAiB;AAEzE,QAAM,gBAAgB,CAAC,iBAAkB,oBAAmB;AAE5D,QAAM,aAAa,kBAAkB,eAAe;AAEpD,QAAM,gBACJ,UACE,cAAa,iBAAiB,kBAAkB,CAAC,eAAe,UAC/D,kBAAkB,eAAe,cAClC;AAGJ,QAAM,QAAQ,CAAC,MAAM;AACrB,MAAI;AAAe,UAAM,KAAK,aAAa;AAC3C,MAAI;AAAe,UAAM,QAAQ,aAAa;AAE9C,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "mappings": "AAAA,YAAY,WAAW;ACqBhB,MAAM,sBAA+C,CAAC;AAAA,EAC3D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,YAAY,CAAC,EAAE,OAAO,UAAU,OAAO;AAE7C,QAAM,SAAS,sBAAsB,CAAC,OAAO;AAE7C,QAAM,kBAAkB,OAAO,WAAW,OAAO,OAAO,iBAAiB;AAEzE,QAAM,gBAAgB,CAAC,kBAAkB,mBAAmB;AAE5D,QAAM,aAAa,kBAAkB,eAAe;AAEpD,QAAM,gBACJ,WACE,aAAa,iBAAiB,kBAAkB,CAAC,eAAe,UAC/D,kBAAkB,eAAe,cAClC;AAGJ,QAAM,QAAQ,CAAC,MAAM;AACrB,MAAI;AAAe,UAAM,KAAK,aAAa;AAC3C,MAAI;AAAe,UAAM,QAAQ,aAAa;AAE9C,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }