npm - @elliemae/ds-data-table - Versions diffs - 3.51.0-next.1 → 3.51.0-next.3 - Mend

@elliemae/ds-data-table 3.51.0-next.1 → 3.51.0-next.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (222) hide show

package/dist/esm/exported-related/RowRenderer/DefaultRowContentRenderer.js CHANGED Viewed

@@ -1,11 +1,11 @@
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useMemo, useLayoutEffect, useRef } from "react";
+import { useLayoutEffect, useMemo, useRef } from "react";
 import { INTERNAL_COLUMNS } from "../../addons/Columns/index.js";
 import { DATA_TESTID, DropIndicatorPosition } from "../../configs/constants.js";
+import { usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
 import { Cells } from "../../parts/Cells/index.js";
 import { StyledCellContainer } from "../../styled.js";
-import { usePropsStore } from "../../configs/useStore/useStore.js";
 const DetailsWrapper = (props) => (
   // This can be further customized
   // eslint-disable-next-line jsx-a11y/no-static-element-interactions
@@ -29,7 +29,8 @@ const getDefaultAriaLabelMessageForRow = ({
   disabled,
   expanded,
   expandable
-}) => `Row number ${row.realIndex + 1}${row.parentIndex !== null ? `, child of row number ${row.parentIndex + 1}` : ""}. ${selected ? "Selected. " : ""}${disabled ? "Disabled. " : "To interact with the cells press enter. "}${expandable ? expanded ? "Expanded. " : "Collapsed. " : ""}`;
+}) => `Row number ${row.realIndex + 1}${row.parentIndex !== null ? `, child of row number ${row.parentIndex + 1}` : ""}. ${selected ? "Selected. " : ""}${disabled ? "Disabled. " : "To interact with the cells press enter. "}${// eslint-disable-next-line no-nested-ternary
+expandable ? expanded ? "Expanded. " : "Collapsed. " : ""}`;
 const DefaultRowContentRenderer = (props) => {
   const {
     row,

package/dist/esm/exported-related/RowRenderer/DefaultRowContentRenderer.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/RowRenderer/DefaultRowContentRenderer.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useMemo, useLayoutEffect, useRef, type PropsWithChildren } from 'react';\nimport { INTERNAL_COLUMNS } from '../../addons/Columns/index.js';\nimport { DATA_TESTID, DropIndicatorPosition } from '../../configs/constants.js';\nimport { Cells } from '../../parts/Cells/index.js';\nimport type { RowVariantProps } from '../../parts/RowVariants/types.js';\nimport { StyledCellContainer } from '../../styled.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { usePropsStore } from '../../configs/useStore/useStore.js';\n\nconst DetailsWrapper: React.ComponentType<PropsWithChildren> = (props) => (\n  // This can be further customized\n  // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n  <div\n    data-role=\"detail-view\"\n    style={{\n      borderTop: '1px solid #EBEDF0',\n      borderBottom: '1px solid #EBEDF0',\n    }}\n    onClick={(e) => e.stopPropagation()}\n    onKeyDown={(e) => e.stopPropagation()}\n  >\n    {props.children}\n  </div>\n);\n\nconst getDefaultAriaLabelMessageForRow = ({\n  row,\n  selected,\n  disabled,\n  expanded,\n  expandable,\n}: {\n  row: DSDataTableT.InternalRow;\n  selected: boolean;\n  disabled: boolean;\n  expanded: boolean;\n  expandable: boolean;\n}) =>\n  `Row number ${row.realIndex + 1}${row.parentIndex !== null ? `, child of row number ${row.parentIndex + 1}` : ''}. ${\n    selected ? 'Selected. ' : ''\n  }${disabled ? 'Disabled. ' : 'To interact with the cells press enter. '}${\n    expandable ? (expanded ? 'Expanded. ' : 'Collapsed. ') : ''\n  }`;\n\nexport const DefaultRowContentRenderer: React.ComponentType<RowVariantProps> = (props) => {\n  const {\n    row,\n    draggableProps,\n    isDragOverlay,\n    backgroundColor = 'neutral-000',\n    dropIndicatorPosition,\n    isDropValid,\n    focusedRowId,\n    drilldownRowId,\n    compact,\n  } = props;\n\n  const isExpandable = usePropsStore((state) => state.isExpandable);\n  const selection = usePropsStore((state) => state.selection);\n  const noSelectionColumn = usePropsStore((state) => state.noSelectionColumn);\n  const expandedRows = usePropsStore((state) => state.expandedRows);\n  const disabledRows = usePropsStore((state) => state.disabledRows);\n  const getAriaLabelForRow = usePropsStore((state) => state.getAriaLabelForRow);\n  const visibleColumns = usePropsStore((state) => state.visibleColumns);\n  const domIdAffix = usePropsStore((state) => state.domIdAffix);\n\n  const rowRef = useRef<HTMLDivElement>(null);\n  const isDndActive = draggableProps && draggableProps.active;\n  const isDragging = draggableProps && draggableProps.isDragging;\n\n  useLayoutEffect(() => {\n    if (row.uid === focusedRowId) {\n      rowRef.current?.focus();\n    }\n  }, [focusedRowId, row.uid]);\n\n  const detailsIndent = useMemo(() => {\n    let padding = 0;\n    for (let i = 0; i < visibleColumns.length; i += 1) {\n      if (INTERNAL_COLUMNS.includes(visibleColumns[i].id)) {\n        padding += visibleColumns[i].width as number;\n      } else {\n        padding += row.depth * 32 + 15;\n        break;\n      }\n    }\n    return padding;\n  }, [row.depth, visibleColumns]);\n\n  const DetailsView = row.original.tableRowDetails;\n\n  const rowAriaLabelProps = {\n    row,\n    selected: selection?.[row.uid] === true,\n    disabled: disabledRows[row.uid],\n    expandable: isExpandable,\n    expanded: expandedRows[row.uid] === true,\n  };\n\n  return (\n    <>\n      <StyledCellContainer\n        innerRef={rowRef}\n        key={row.uid}\n        tabIndex={0}\n        role=\"row\"\n        aria-rowindex={row.realIndex + 1}\n        aria-label={(getAriaLabelForRow ?? getDefaultAriaLabelMessageForRow)(rowAriaLabelProps)}\n        aria-selected={selection?.[row.uid] === true}\n        aria-disabled={disabledRows[row.uid]}\n        backgroundColor={backgroundColor}\n        height={compact ? '24px' : 'auto'}\n        minHeight={compact ? '24px' : '36px'}\n        isDropIndicatorPositionInside={dropIndicatorPosition === DropIndicatorPosition.Inside}\n        isDropValid={isDropValid}\n        shouldDisplayHover={!isDndActive && !isDragging && !isDragOverlay}\n        isDragOverlay={isDragOverlay}\n        isDragging={isDragging}\n        selected={noSelectionColumn && selection?.[row.uid] === true}\n        isDisabled={disabledRows[row.uid]}\n        data-testid={DATA_TESTID.DATA_TABLE_ROW_CONTENT}\n      >\n        <Cells\n          row={row}\n          isRowSelected={drilldownRowId === row.uid}\n          isDragOverlay={isDragOverlay}\n          key={row.uid}\n          domIdAffix={domIdAffix}\n        />\n      </StyledCellContainer>\n      {!isDragOverlay && isExpandable && row.isExpanded && DetailsView && (\n        <DetailsWrapper>\n          <DetailsView row={row} detailsIndent={detailsIndent} />\n        </DetailsWrapper>\n      )}\n    </>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useLayoutEffect, useMemo, useRef, type PropsWithChildren } from 'react';\nimport { INTERNAL_COLUMNS } from '../../addons/Columns/index.js';\nimport { DATA_TESTID, DropIndicatorPosition } from '../../configs/constants.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport { Cells } from '../../parts/Cells/index.js';\nimport type { RowVariantProps } from '../../parts/RowVariants/types.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { StyledCellContainer } from '../../styled.js';\n\nconst DetailsWrapper: React.ComponentType<PropsWithChildren> = (props) => (\n  // This can be further customized\n  // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n  <div\n    data-role=\"detail-view\"\n    style={{\n      borderTop: '1px solid #EBEDF0',\n      borderBottom: '1px solid #EBEDF0',\n    }}\n    onClick={(e) => e.stopPropagation()}\n    onKeyDown={(e) => e.stopPropagation()}\n  >\n    {props.children}\n  </div>\n);\n\nconst getDefaultAriaLabelMessageForRow = ({\n  row,\n  selected,\n  disabled,\n  expanded,\n  expandable,\n}: {\n  row: DSDataTableT.InternalRow;\n  selected: boolean;\n  disabled: boolean;\n  expanded: boolean;\n  expandable: boolean;\n}) =>\n  `Row number ${row.realIndex + 1}${row.parentIndex !== null ? `, child of row number ${row.parentIndex + 1}` : ''}. ${\n    selected ? 'Selected. ' : ''\n  }${disabled ? 'Disabled. ' : 'To interact with the cells press enter. '}${\n    // eslint-disable-next-line no-nested-ternary\n    expandable ? (expanded ? 'Expanded. ' : 'Collapsed. ') : ''\n  }`;\n\nexport const DefaultRowContentRenderer: React.ComponentType<RowVariantProps> = (props) => {\n  const {\n    row,\n    draggableProps,\n    isDragOverlay,\n    backgroundColor = 'neutral-000',\n    dropIndicatorPosition,\n    isDropValid,\n    focusedRowId,\n    drilldownRowId,\n    compact,\n  } = props;\n\n  const isExpandable = usePropsStore((state) => state.isExpandable);\n  const selection = usePropsStore((state) => state.selection);\n  const noSelectionColumn = usePropsStore((state) => state.noSelectionColumn);\n  const expandedRows = usePropsStore((state) => state.expandedRows);\n  const disabledRows = usePropsStore((state) => state.disabledRows);\n  const getAriaLabelForRow = usePropsStore((state) => state.getAriaLabelForRow);\n  const visibleColumns = usePropsStore((state) => state.visibleColumns);\n  const domIdAffix = usePropsStore((state) => state.domIdAffix);\n\n  const rowRef = useRef<HTMLDivElement>(null);\n  const isDndActive = draggableProps && draggableProps.active;\n  const isDragging = draggableProps && draggableProps.isDragging;\n\n  useLayoutEffect(() => {\n    if (row.uid === focusedRowId) {\n      rowRef.current?.focus();\n    }\n  }, [focusedRowId, row.uid]);\n\n  const detailsIndent = useMemo(() => {\n    let padding = 0;\n    for (let i = 0; i < visibleColumns.length; i += 1) {\n      if (INTERNAL_COLUMNS.includes(visibleColumns[i].id)) {\n        padding += visibleColumns[i].width as number;\n      } else {\n        padding += row.depth * 32 + 15;\n        break;\n      }\n    }\n    return padding;\n  }, [row.depth, visibleColumns]);\n\n  const DetailsView = row.original.tableRowDetails;\n\n  const rowAriaLabelProps = {\n    row,\n    selected: selection?.[row.uid] === true,\n    disabled: disabledRows[row.uid],\n    expandable: isExpandable,\n    expanded: expandedRows[row.uid] === true,\n  };\n\n  return (\n    <>\n      <StyledCellContainer\n        innerRef={rowRef}\n        key={row.uid}\n        tabIndex={0}\n        role=\"row\"\n        aria-rowindex={row.realIndex + 1}\n        aria-label={(getAriaLabelForRow ?? getDefaultAriaLabelMessageForRow)(rowAriaLabelProps)}\n        aria-selected={selection?.[row.uid] === true}\n        aria-disabled={disabledRows[row.uid]}\n        backgroundColor={backgroundColor}\n        height={compact ? '24px' : 'auto'}\n        minHeight={compact ? '24px' : '36px'}\n        isDropIndicatorPositionInside={dropIndicatorPosition === DropIndicatorPosition.Inside}\n        isDropValid={isDropValid}\n        shouldDisplayHover={!isDndActive && !isDragging && !isDragOverlay}\n        isDragOverlay={isDragOverlay}\n        isDragging={isDragging}\n        selected={noSelectionColumn && selection?.[row.uid] === true}\n        isDisabled={disabledRows[row.uid]}\n        data-testid={DATA_TESTID.DATA_TABLE_ROW_CONTENT}\n      >\n        <Cells\n          row={row}\n          isRowSelected={drilldownRowId === row.uid}\n          isDragOverlay={isDragOverlay}\n          key={row.uid}\n          // @ts-expect-error - data-table typescript is broken\n          domIdAffix={domIdAffix}\n        />\n      </StyledCellContainer>\n      {!isDragOverlay && isExpandable && row.isExpanded && DetailsView && (\n        <DetailsWrapper>\n          <DetailsView row={row} detailsIndent={detailsIndent} />\n        </DetailsWrapper>\n      )}\n    </>\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/exported-related/RowRenderer/index.js CHANGED Viewed

@@ -2,14 +2,14 @@ import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createElement } from "react";
 import { useContext } from "react";
+import { DATA_TESTID } from "../../configs/constants.js";
+import { usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
+import { DropIndicator } from "../../parts/DropIndicator.js";
+import { SortableItemContext } from "../../parts/HoC/SortableItemContext.js";
 import { StyledFullsizeGrid } from "../../styled.js";
 import { DefaultRowContentRenderer } from "./DefaultRowContentRenderer.js";
 import { useRowRendererHandlers } from "./useRowRendererHandlers.js";
 import { useRowRendererProperties } from "./useRowRendererProperties.js";
-import { DropIndicator } from "../../parts/DropIndicator.js";
-import { SortableItemContext } from "../../parts/HoC/SortableItemContext.js";
-import { DATA_TESTID } from "../../configs/constants.js";
-import { usePropsStore } from "../../configs/useStore/useStore.js";
 const magicDottedBorder = /* @__PURE__ */ jsx("svg", { width: "100%", height: "1px", children: /* @__PURE__ */ jsx(
   "line",
   {

package/dist/esm/exported-related/RowRenderer/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/RowRenderer/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useContext } from 'react';\nimport type { XstyledProps } from '@elliemae/ds-props-helpers';\nimport type { RowVariantProps } from '../../parts/RowVariants/types.js';\nimport { StyledFullsizeGrid } from '../../styled.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { DefaultRowContentRenderer } from './DefaultRowContentRenderer.js';\nimport { useRowRendererHandlers } from './useRowRendererHandlers.js';\nimport { useRowRendererProperties } from './useRowRendererProperties.js';\nimport { DropIndicator } from '../../parts/DropIndicator.js';\nimport { SortableItemContext } from '../../parts/HoC/SortableItemContext.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { usePropsStore } from '../../configs/useStore/useStore.js';\n\ninterface RowRendererProps {\n  row: DSDataTableT.InternalRow;\n  compact?: boolean;\n  itemIndex: number;\n  isDragOverlay: boolean;\n  minHeight: string;\n  height: string;\n  rowsLayout?: string[] | number[];\n  CustomRowContentRenderer?: React.ComponentType<RowVariantProps>;\n  focusedRowId: string | null;\n  drilldownRowId: string | null;\n  backgroundColor?: XstyledProps['backgroundColor'];\n}\n\n// CSS don't let us modify the spacing between the dots, so one solution is to use SVG\nconst magicDottedBorder = (\n  <svg width=\"100%\" height=\"1px\">\n    <line\n      x1=\"0\"\n      y1=\"0\"\n      x2=\"100%\"\n      y2=\"0\"\n      stroke=\"#B0B9C8FF\"\n      strokeWidth=\"1.5\"\n      strokeDasharray=\"0, 5\"\n      strokeDashoffset=\"0\"\n      strokeLinecap=\"round\"\n    />\n  </svg>\n);\n\nconst RowRenderer: React.ComponentType<RowRendererProps> = (props) => {\n  const {\n    row,\n    itemIndex,\n    minHeight = '36px',\n    height = 'auto',\n    rowsLayout = [1],\n    CustomRowContentRenderer,\n    focusedRowId,\n    drilldownRowId,\n    isDragOverlay,\n  } = props;\n\n  const flattenedData = usePropsStore((state) => state.flattenedData);\n  const { draggableProps } = useContext(SortableItemContext);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  // ===========================================================================\n  // Properties for the row\n  // ===========================================================================\n\n  const { userDataProperties, rowStyle, shouldAppendDottedBorder, dropIndicatorPosition, isDropValid } =\n    useRowRendererProperties({\n      row,\n    });\n\n  // ===========================================================================\n  // Handlers\n  // ===========================================================================\n\n  const { handleItemClick, handleKeyDown, handleOnBlur, handleOnFocus } = useRowRendererHandlers({\n    row,\n    itemIndex,\n    items: flattenedData,\n    draggableProps,\n    isDragOverlay,\n    drilldownRowId,\n  });\n\n  const rowContentProps: RowVariantProps = {\n    ...props,\n    focusedRowId,\n    drilldownRowId,\n    draggableProps,\n    dropIndicatorPosition,\n    isDropValid,\n  };\n\n  return (\n    <StyledFullsizeGrid\n      data-testid={DATA_TESTID.DATA_TABLE_ROW}\n      key={row.uid}\n      {...userDataProperties}\n      style={rowStyle}\n      onClick={handleItemClick}\n      onKeyDown={handleKeyDown}\n      onBlur={handleOnBlur}\n      onFocus={handleOnFocus}\n      data-expandable={Boolean(row.original.tableRowDetails)}\n      data-is-row-expanded={row.isExpanded}\n      rows={rowsLayout}\n      minHeight={minHeight}\n      height={height}\n      getOwnerProps={getOwnerProps}\n    >\n      {CustomRowContentRenderer ? (\n        <CustomRowContentRenderer {...rowContentProps} />\n      ) : (\n        <DefaultRowContentRenderer {...rowContentProps} key={row.uid} />\n      )}\n      {shouldAppendDottedBorder && !isDragOverlay && magicDottedBorder}\n      <DropIndicator\n        vertical={false}\n        dropIndicatorPosition={dropIndicatorPosition}\n        isDropValid={isDropValid}\n        isLast={row.index === flattenedData.length - 1 && draggableProps && draggableProps.isDragging}\n      />\n    </StyledFullsizeGrid>\n  );\n};\n\nexport { RowRenderer };\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC+BnB,cA+DA,YA/DA;AAkFI;AAhHR,SAAgB,kBAAkB;AAGlC,SAAS,0BAA0B;AAEnC,SAAS,iCAAiC;AAC1C,SAAS,8BAA8B;AACvC,SAAS,gCAAgC;AACzC,SAAS,qBAAqB;AAC9B,SAAS,2BAA2B;AACpC,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAiB9B,MAAM,oBACJ,oBAAC,SAAI,OAAM,QAAO,QAAO,OACvB;AAAA,EAAC;AAAA;AAAA,IACC,IAAG;AAAA,IACH,IAAG;AAAA,IACH,IAAG;AAAA,IACH,IAAG;AAAA,IACH,QAAO;AAAA,IACP,aAAY;AAAA,IACZ,iBAAgB;AAAA,IAChB,kBAAiB;AAAA,IACjB,eAAc;AAAA;AAChB,GACF;AAGF,MAAM,cAAqD,CAAC,UAAU;AACpE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,aAAa,CAAC,CAAC;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,aAAa;AAClE,QAAM,EAAE,eAAe,IAAI,WAAW,mBAAmB;AACzD,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AAMxD,QAAM,EAAE,oBAAoB,UAAU,0BAA0B,uBAAuB,YAAY,IACjG,yBAAyB;AAAA,IACvB;AAAA,EACF,CAAC;AAMH,QAAM,EAAE,iBAAiB,eAAe,cAAc,cAAc,IAAI,uBAAuB;AAAA,IAC7F;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,kBAAmC;AAAA,IACvC,GAAG;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,YAAY;AAAA,MAExB,GAAG;AAAA,MACJ,OAAO;AAAA,MACP,SAAS;AAAA,MACT,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,mBAAiB,QAAQ,IAAI,SAAS,eAAe;AAAA,MACrD,wBAAsB,IAAI;AAAA,MAC1B,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA,mCACC,oBAAC,4BAA0B,GAAG,iBAAiB,IAE/C,8BAAC,6BAA2B,GAAG,iBAAiB,KAAK,IAAI,KAAK;AAAA,QAE/D,4BAA4B,CAAC,iBAAiB;AAAA,QAC/C;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV;AAAA,YACA;AAAA,YACA,QAAQ,IAAI,UAAU,cAAc,SAAS,KAAK,kBAAkB,eAAe;AAAA;AAAA,QACrF;AAAA;AAAA;AAAA,IAzBK,IAAI;AAAA,EA0BX;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport type { XstyledProps } from '@elliemae/ds-props-helpers';\nimport React, { useContext } from 'react';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport { DropIndicator } from '../../parts/DropIndicator.js';\nimport { SortableItemContext } from '../../parts/HoC/SortableItemContext.js';\nimport type { RowVariantProps } from '../../parts/RowVariants/types.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { StyledFullsizeGrid } from '../../styled.js';\nimport { DefaultRowContentRenderer } from './DefaultRowContentRenderer.js';\nimport { useRowRendererHandlers } from './useRowRendererHandlers.js';\nimport { useRowRendererProperties } from './useRowRendererProperties.js';\n\ninterface RowRendererProps {\n  row: DSDataTableT.InternalRow;\n  compact?: boolean;\n  itemIndex: number;\n  isDragOverlay: boolean;\n  minHeight: string;\n  height: string;\n  rowsLayout?: string[] | number[];\n  CustomRowContentRenderer?: React.ComponentType<RowVariantProps>;\n  focusedRowId: string | null;\n  drilldownRowId: string | null;\n  backgroundColor?: XstyledProps['backgroundColor'];\n}\n\n// CSS don't let us modify the spacing between the dots, so one solution is to use SVG\nconst magicDottedBorder = (\n  <svg width=\"100%\" height=\"1px\">\n    <line\n      x1=\"0\"\n      y1=\"0\"\n      x2=\"100%\"\n      y2=\"0\"\n      stroke=\"#B0B9C8FF\"\n      strokeWidth=\"1.5\"\n      strokeDasharray=\"0, 5\"\n      strokeDashoffset=\"0\"\n      strokeLinecap=\"round\"\n    />\n  </svg>\n);\n\nconst RowRenderer: React.ComponentType<RowRendererProps> = (props) => {\n  const {\n    row,\n    itemIndex,\n    minHeight = '36px',\n    height = 'auto',\n    rowsLayout = [1],\n    CustomRowContentRenderer,\n    focusedRowId,\n    drilldownRowId,\n    isDragOverlay,\n  } = props;\n\n  const flattenedData = usePropsStore((state) => state.flattenedData);\n  const { draggableProps } = useContext(SortableItemContext);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  // ===========================================================================\n  // Properties for the row\n  // ===========================================================================\n\n  const { userDataProperties, rowStyle, shouldAppendDottedBorder, dropIndicatorPosition, isDropValid } =\n    useRowRendererProperties({\n      row,\n    });\n\n  // ===========================================================================\n  // Handlers\n  // ===========================================================================\n\n  const { handleItemClick, handleKeyDown, handleOnBlur, handleOnFocus } = useRowRendererHandlers({\n    row,\n    itemIndex,\n    items: flattenedData,\n    draggableProps,\n    isDragOverlay,\n    drilldownRowId,\n  });\n\n  const rowContentProps: RowVariantProps = {\n    ...props,\n    focusedRowId,\n    drilldownRowId,\n    draggableProps,\n    dropIndicatorPosition,\n    isDropValid,\n  };\n\n  return (\n    <StyledFullsizeGrid\n      data-testid={DATA_TESTID.DATA_TABLE_ROW}\n      key={row.uid}\n      {...userDataProperties}\n      style={rowStyle}\n      onClick={handleItemClick}\n      onKeyDown={handleKeyDown}\n      onBlur={handleOnBlur}\n      onFocus={handleOnFocus}\n      data-expandable={Boolean(row.original.tableRowDetails)}\n      data-is-row-expanded={row.isExpanded}\n      rows={rowsLayout}\n      minHeight={minHeight}\n      height={height}\n      getOwnerProps={getOwnerProps}\n    >\n      {CustomRowContentRenderer ? (\n        <CustomRowContentRenderer {...rowContentProps} />\n      ) : (\n        <DefaultRowContentRenderer {...rowContentProps} key={row.uid} />\n      )}\n      {shouldAppendDottedBorder && !isDragOverlay && magicDottedBorder}\n      <DropIndicator\n        vertical={false}\n        dropIndicatorPosition={dropIndicatorPosition}\n        isDropValid={isDropValid}\n        isLast={row.index === flattenedData.length - 1 && draggableProps && draggableProps.isDragging}\n      />\n    </StyledFullsizeGrid>\n  );\n};\n\nexport { RowRenderer };\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC+BnB,cA+DA,YA/DA;AAkFI;AA/GR,SAAgB,kBAAkB;AAClC,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB;AAC9B,SAAS,2BAA2B;AAGpC,SAAS,0BAA0B;AACnC,SAAS,iCAAiC;AAC1C,SAAS,8BAA8B;AACvC,SAAS,gCAAgC;AAiBzC,MAAM,oBACJ,oBAAC,SAAI,OAAM,QAAO,QAAO,OACvB;AAAA,EAAC;AAAA;AAAA,IACC,IAAG;AAAA,IACH,IAAG;AAAA,IACH,IAAG;AAAA,IACH,IAAG;AAAA,IACH,QAAO;AAAA,IACP,aAAY;AAAA,IACZ,iBAAgB;AAAA,IAChB,kBAAiB;AAAA,IACjB,eAAc;AAAA;AAChB,GACF;AAGF,MAAM,cAAqD,CAAC,UAAU;AACpE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,aAAa,CAAC,CAAC;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,aAAa;AAClE,QAAM,EAAE,eAAe,IAAI,WAAW,mBAAmB;AACzD,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AAMxD,QAAM,EAAE,oBAAoB,UAAU,0BAA0B,uBAAuB,YAAY,IACjG,yBAAyB;AAAA,IACvB;AAAA,EACF,CAAC;AAMH,QAAM,EAAE,iBAAiB,eAAe,cAAc,cAAc,IAAI,uBAAuB;AAAA,IAC7F;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,kBAAmC;AAAA,IACvC,GAAG;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,YAAY;AAAA,MAExB,GAAG;AAAA,MACJ,OAAO;AAAA,MACP,SAAS;AAAA,MACT,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,mBAAiB,QAAQ,IAAI,SAAS,eAAe;AAAA,MACrD,wBAAsB,IAAI;AAAA,MAC1B,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA,mCACC,oBAAC,4BAA0B,GAAG,iBAAiB,IAE/C,8BAAC,6BAA2B,GAAG,iBAAiB,KAAK,IAAI,KAAK;AAAA,QAE/D,4BAA4B,CAAC,iBAAiB;AAAA,QAC/C;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV;AAAA,YACA;AAAA,YACA,QAAQ,IAAI,UAAU,cAAc,SAAS,KAAK,kBAAkB,eAAe;AAAA;AAAA,QACrF;AAAA;AAAA;AAAA,IAzBK,IAAI;AAAA,EA0BX;AAEJ;",
   "names": []
 }

package/dist/esm/exported-related/RowRenderer/useRowRendererHandlers.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { useCallback } from "react";
-import { useInternalStore, usePropsStore } from "../../configs/useStore/useStore.js";
+import { useInternalStore, usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
 const useRowRendererHandlers = ({
   row,
   itemIndex,

package/dist/esm/exported-related/RowRenderer/useRowRendererHandlers.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/RowRenderer/useRowRendererHandlers.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport type React from 'react';\nimport { useCallback } from 'react';\nimport type { SortableItemContextType } from '../../parts/HoC/SortableItemContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/useStore.js';\n\nexport const useRowRendererHandlers = ({\n  row,\n  itemIndex,\n  items,\n  draggableProps,\n  isDragOverlay,\n  drilldownRowId,\n}: {\n  row: DSDataTableT.InternalRow;\n  itemIndex: number;\n  items: DSDataTableT.InternalRow[];\n  draggableProps: SortableItemContextType['draggableProps'];\n  isDragOverlay: boolean;\n  drilldownRowId: string | null;\n}): {\n  handleItemClick: React.MouseEventHandler;\n  handleKeyDown: React.KeyboardEventHandler;\n  handleOnBlur: React.FocusEventHandler;\n  handleOnFocus: React.FocusEventHandler;\n} => {\n  const onRowClick = usePropsStore((state) => state.onRowClick);\n  const onSelectionChange = usePropsStore((state) => state.onSelectionChange);\n  const selectSingle = usePropsStore((state) => state.selectSingle);\n  const selection = usePropsStore((state) => state.selection);\n  const onRowFocus = usePropsStore((state) => state.onRowFocus);\n  const disabledRows = usePropsStore((state) => state.disabledRows);\n  const lastSelected = usePropsStore((state) => state.lastSelected);\n  const flattenedData = usePropsStore((state) => state.flattenedData);\n  const { scrollToIndex } = usePropsStore((state) => state.virtualListHelpers);\n  const setDrilldownRowId = useInternalStore((state) => state.setDrilldownRowId);\n  const setFocusedRowId = useInternalStore((state) => state.setFocusedRowId);\n\n  const findInCircularList = (\n    list: DSDataTableT.InternalRow[],\n    from: number,\n    step = 1,\n    // eslint-disable-next-line max-params\n  ): number => {\n    for (\n      let i = (from + step + list.length) % list.length;\n      i !== from && from > -1;\n      i = (i + step + list.length) % list.length\n    ) {\n      return i;\n    }\n    return from; // return same item\n  };\n\n  const handleItemClick = useCallback(\n    (e: React.MouseEvent | React.KeyboardEvent, { original, uid } = row) => {\n      if (disabledRows[uid]) return;\n      onRowClick(original, e, uid);\n      if (selection && onSelectionChange) {\n        if (selectSingle) {\n          onSelectionChange({ [uid]: true }, uid, e);\n        } else {\n          const newSelection = { ...selection, [uid]: !selection[uid] }; // we only want true and mixed values\n          if (!newSelection[uid]) delete newSelection[uid]; // if newState is false, remove from the new selection\n          const now = Number.parseInt(uid, 10);\n          if (e.shiftKey && lastSelected.current > -1) {\n            for (let i = Math.min(lastSelected.current, now); i <= Math.max(lastSelected.current, now); i += 1) {\n              const correctDataIndex = flattenedData[i]?.id;\n              if (!Object.keys(disabledRows).includes(correctDataIndex))\n                newSelection[correctDataIndex] = newSelection[lastSelected.current];\n              if (!newSelection[correctDataIndex]) delete newSelection[correctDataIndex];\n            }\n          }\n          lastSelected.current = now;\n\n          onSelectionChange(newSelection, uid, e);\n        }\n      }\n      onRowFocus(\n        {\n          itemIndex,\n          scrollToItem: (\n            opts: { align: 'auto' | 'start' | 'center' | 'end' } = {\n              align: 'start',\n            },\n          ) => scrollToIndex(itemIndex, opts),\n          original,\n        },\n        e,\n      );\n    },\n    [\n      row,\n      disabledRows,\n      onRowClick,\n      selection,\n      onSelectionChange,\n      onRowFocus,\n      itemIndex,\n      selectSingle,\n      lastSelected,\n      flattenedData,\n      scrollToIndex,\n    ],\n  );\n\n  const isActive = draggableProps && draggableProps.active;\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (isDragOverlay || isActive) {\n        e.preventDefault();\n        return;\n      }\n      const { target } = e;\n      const isChildEvent = (target as HTMLElement).getAttribute('role') !== 'row'; // if the event comes from a row\n\n      if (e.code === 'Enter') {\n        if (!isChildEvent) {\n          e.preventDefault();\n          if (drilldownRowId !== row.uid) {\n            setDrilldownRowId(row.uid);\n            setTimeout(() => {\n              const focuseableCell = row.cells.find((cell) => cell.ref.current !== null);\n              if (focuseableCell) focuseableCell.ref.current?.focus?.();\n            });\n          }\n        }\n      }\n      if (e.code === 'Space') {\n        if (!isChildEvent) {\n          e.preventDefault();\n        }\n        handleItemClick(e, row);\n      }\n      if (e.code === 'ArrowDown') {\n        e.preventDefault();\n        e.stopPropagation();\n        const next = findInCircularList(items, itemIndex);\n        setFocusedRowId(items[next].uid);\n      }\n      if (e.code === 'ArrowUp') {\n        e.preventDefault();\n        const prev = findInCircularList(items, itemIndex, -1);\n        setFocusedRowId(items[prev].uid);\n      }\n    },\n    [\n      isDragOverlay,\n      isActive,\n      drilldownRowId,\n      row,\n      setDrilldownRowId,\n      handleItemClick,\n      items,\n      itemIndex,\n      setFocusedRowId,\n    ],\n  );\n\n  const handleOnBlur: React.FocusEventHandler = useCallback(\n    (e) => {\n      if (e.relatedTarget?.getAttribute('role') === 'row') {\n        setDrilldownRowId(null);\n      }\n    },\n    [setDrilldownRowId],\n  );\n\n  const handleOnFocus: React.FocusEventHandler = useCallback(\n    (e) => {\n      if (e.target && e.target.getAttribute('role') === 'row') {\n        setFocusedRowId(row.uid);\n      }\n    },\n    [row.uid, setFocusedRowId],\n  );\n\n  return { handleItemClick, handleKeyDown, handleOnBlur, handleOnFocus };\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport type React from 'react';\nimport { useCallback } from 'react';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { SortableItemContextType } from '../../parts/HoC/SortableItemContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\n\nexport const useRowRendererHandlers = ({\n  row,\n  itemIndex,\n  items,\n  draggableProps,\n  isDragOverlay,\n  drilldownRowId,\n}: {\n  row: DSDataTableT.InternalRow;\n  itemIndex: number;\n  items: DSDataTableT.InternalRow[];\n  draggableProps: SortableItemContextType['draggableProps'];\n  isDragOverlay: boolean;\n  drilldownRowId: string | null;\n}): {\n  handleItemClick: React.MouseEventHandler;\n  handleKeyDown: React.KeyboardEventHandler;\n  handleOnBlur: React.FocusEventHandler;\n  handleOnFocus: React.FocusEventHandler;\n} => {\n  const onRowClick = usePropsStore((state) => state.onRowClick);\n  const onSelectionChange = usePropsStore((state) => state.onSelectionChange);\n  const selectSingle = usePropsStore((state) => state.selectSingle);\n  const selection = usePropsStore((state) => state.selection);\n  const onRowFocus = usePropsStore((state) => state.onRowFocus);\n  const disabledRows = usePropsStore((state) => state.disabledRows);\n  const lastSelected = usePropsStore((state) => state.lastSelected);\n  const flattenedData = usePropsStore((state) => state.flattenedData);\n  const { scrollToIndex } = usePropsStore((state) => state.virtualListHelpers);\n  const setDrilldownRowId = useInternalStore((state) => state.setDrilldownRowId);\n  const setFocusedRowId = useInternalStore((state) => state.setFocusedRowId);\n\n  const findInCircularList = (\n    list: DSDataTableT.InternalRow[],\n    from: number,\n    step = 1,\n    // eslint-disable-next-line max-params\n  ): number => {\n    // the following loop is dark magic, requires a PHD in math to understand what's going on, but it works so...\n    // eslint-disable-next-line no-unreachable-loop\n    for (\n      let i = (from + step + list.length) % list.length;\n      i !== from && from > -1;\n      i = (i + step + list.length) % list.length\n    ) {\n      return i;\n    }\n    return from; // return same item\n  };\n\n  const handleItemClick = useCallback(\n    (e: React.MouseEvent | React.KeyboardEvent, { original, uid } = row) => {\n      if (disabledRows[uid]) return;\n      onRowClick(original, e, uid);\n      if (selection && onSelectionChange) {\n        if (selectSingle) {\n          onSelectionChange({ [uid]: true }, uid, e);\n        } else {\n          const newSelection = { ...selection, [uid]: !selection[uid] }; // we only want true and mixed values\n          if (!newSelection[uid]) delete newSelection[uid]; // if newState is false, remove from the new selection\n          const now = Number.parseInt(uid, 10);\n          if (e.shiftKey && lastSelected.current > -1) {\n            for (let i = Math.min(lastSelected.current, now); i <= Math.max(lastSelected.current, now); i += 1) {\n              const correctDataIndex = flattenedData[i]?.id;\n              if (!Object.keys(disabledRows).includes(correctDataIndex))\n                newSelection[correctDataIndex] = newSelection[lastSelected.current];\n              if (!newSelection[correctDataIndex]) delete newSelection[correctDataIndex];\n            }\n          }\n          lastSelected.current = now;\n\n          onSelectionChange(newSelection, uid, e);\n        }\n      }\n      onRowFocus(\n        {\n          itemIndex,\n          scrollToItem: (\n            opts: { align: 'auto' | 'start' | 'center' | 'end' } = {\n              align: 'start',\n            },\n          ) => scrollToIndex(itemIndex, opts),\n          original,\n        },\n        e,\n      );\n    },\n    [\n      row,\n      disabledRows,\n      onRowClick,\n      selection,\n      onSelectionChange,\n      onRowFocus,\n      itemIndex,\n      selectSingle,\n      lastSelected,\n      flattenedData,\n      scrollToIndex,\n    ],\n  );\n\n  const isActive = draggableProps && draggableProps.active;\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (isDragOverlay || isActive) {\n        e.preventDefault();\n        return;\n      }\n      const { target } = e;\n      const isChildEvent = (target as HTMLElement).getAttribute('role') !== 'row'; // if the event comes from a row\n\n      if (e.code === 'Enter') {\n        if (!isChildEvent) {\n          e.preventDefault();\n          if (drilldownRowId !== row.uid) {\n            setDrilldownRowId(row.uid);\n            setTimeout(() => {\n              const focuseableCell = row.cells.find((cell) => cell.ref.current !== null);\n              if (focuseableCell) focuseableCell.ref.current?.focus?.();\n            });\n          }\n        }\n      }\n      if (e.code === 'Space') {\n        if (!isChildEvent) {\n          e.preventDefault();\n        }\n        handleItemClick(e, row);\n      }\n      if (e.code === 'ArrowDown') {\n        e.preventDefault();\n        e.stopPropagation();\n        const next = findInCircularList(items, itemIndex);\n        setFocusedRowId(items[next].uid);\n      }\n      if (e.code === 'ArrowUp') {\n        e.preventDefault();\n        const prev = findInCircularList(items, itemIndex, -1);\n        setFocusedRowId(items[prev].uid);\n      }\n    },\n    [\n      isDragOverlay,\n      isActive,\n      drilldownRowId,\n      row,\n      setDrilldownRowId,\n      handleItemClick,\n      items,\n      itemIndex,\n      setFocusedRowId,\n    ],\n  );\n\n  const handleOnBlur: React.FocusEventHandler = useCallback(\n    (e) => {\n      if (e.relatedTarget?.getAttribute('role') === 'row') {\n        setDrilldownRowId(null);\n      }\n    },\n    [setDrilldownRowId],\n  );\n\n  const handleOnFocus: React.FocusEventHandler = useCallback(\n    (e) => {\n      if (e.target && e.target.getAttribute('role') === 'row') {\n        setFocusedRowId(row.uid);\n      }\n    },\n    [row.uid, setFocusedRowId],\n  );\n\n  return { handleItemClick, handleKeyDown, handleOnBlur, handleOnFocus };\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/exported-related/RowRenderer/useRowRendererProperties.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { useMemo } from "react";
+import { usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
 import { useRowStyle } from "./useRowStyle.js";
-import { usePropsStore } from "../../configs/useStore/useStore.js";
 const useRowRendererProperties = ({
   row
 }) => {

package/dist/esm/exported-related/RowRenderer/useRowRendererProperties.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/RowRenderer/useRowRendererProperties.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useMemo } from 'react';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useRowStyle } from './useRowStyle.js';\nimport { usePropsStore } from '../../configs/useStore/useStore.js';\n\nexport const useRowRendererProperties = ({\n  row,\n}: {\n  row: DSDataTableT.InternalRow;\n}): {\n  userDataProperties: Record<string, unknown>;\n  colsLayoutStyle: DSDataTableT.ColsLayoutStyleValues;\n} & ReturnType<typeof useRowStyle> => {\n  const colsLayoutStyle = usePropsStore((state) => state.colsLayoutStyle);\n\n  const userDataProperties = useMemo(\n    () =>\n      Object.keys(row.original).reduce(\n        (acc, cur) => {\n          if (cur.startsWith('data-')) acc[cur] = row.original[cur];\n          return acc;\n        },\n        {} as Record<string, unknown>,\n      ),\n    [row],\n  );\n\n  const styleRelatedProps = useRowStyle(row);\n\n  return {\n    userDataProperties,\n    colsLayoutStyle,\n    ...styleRelatedProps,\n  };\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,eAAe;AAExB,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAEvB,MAAM,2BAA2B,CAAC;AAAA,EACvC;AACF,MAKsC;AACpC,QAAM,kBAAkB,cAAc,CAAC,UAAU,MAAM,eAAe;AAEtE,QAAM,qBAAqB;AAAA,IACzB,MACE,OAAO,KAAK,IAAI,QAAQ,EAAE;AAAA,MACxB,CAAC,KAAK,QAAQ;AACZ,YAAI,IAAI,WAAW,OAAO,EAAG,KAAI,GAAG,IAAI,IAAI,SAAS,GAAG;AACxD,eAAO;AAAA,MACT;AAAA,MACA,CAAC;AAAA,IACH;AAAA,IACF,CAAC,GAAG;AAAA,EACN;AAEA,QAAM,oBAAoB,YAAY,GAAG;AAEzC,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useMemo } from 'react';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useRowStyle } from './useRowStyle.js';\n\nexport const useRowRendererProperties = ({\n  row,\n}: {\n  row: DSDataTableT.InternalRow;\n}): {\n  userDataProperties: Record<string, unknown>;\n  colsLayoutStyle: DSDataTableT.ColsLayoutStyleValues;\n} & ReturnType<typeof useRowStyle> => {\n  const colsLayoutStyle = usePropsStore((state) => state.colsLayoutStyle);\n\n  const userDataProperties = useMemo(\n    () =>\n      Object.keys(row.original).reduce(\n        (acc, cur) => {\n          if (cur.startsWith('data-')) acc[cur] = row.original[cur];\n          return acc;\n        },\n        {} as Record<string, unknown>,\n      ),\n    [row],\n  );\n\n  const styleRelatedProps = useRowStyle(row);\n\n  return {\n    userDataProperties,\n    colsLayoutStyle,\n    ...styleRelatedProps,\n  };\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,eAAe;AACxB,SAAS,qBAAqB;AAE9B,SAAS,mBAAmB;AAErB,MAAM,2BAA2B,CAAC;AAAA,EACvC;AACF,MAKsC;AACpC,QAAM,kBAAkB,cAAc,CAAC,UAAU,MAAM,eAAe;AAEtE,QAAM,qBAAqB;AAAA,IACzB,MACE,OAAO,KAAK,IAAI,QAAQ,EAAE;AAAA,MACxB,CAAC,KAAK,QAAQ;AACZ,YAAI,IAAI,WAAW,OAAO,EAAG,KAAI,GAAG,IAAI,IAAI,SAAS,GAAG;AACxD,eAAO;AAAA,MACT;AAAA,MACA,CAAC;AAAA,IACH;AAAA,IACF,CAAC,GAAG;AAAA,EACN;AAEA,QAAM,oBAAoB,YAAY,GAAG;AAEzC,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL;AACF;",
   "names": []
 }

package/dist/esm/exported-related/RowRenderer/useRowStyle.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { useContext, useMemo } from "react";
+import { usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
 import { SortableItemContext } from "../../parts/HoC/SortableItemContext.js";
-import { usePropsStore } from "../../configs/useStore/useStore.js";
 const useRowStyle = (row) => {
   const flattenedData = usePropsStore((state) => state.flattenedData);
   const { draggableProps } = useContext(SortableItemContext);

package/dist/esm/exported-related/RowRenderer/useRowStyle.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/RowRenderer/useRowStyle.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext, useMemo } from 'react';\nimport { SortableItemContext } from '../../parts/HoC/SortableItemContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { usePropsStore } from '../../configs/useStore/useStore.js';\n\nexport const useRowStyle = (\n  row: DSDataTableT.InternalRow,\n): {\n  rowStyle: Record<string, unknown>;\n  shouldAppendDottedBorder: boolean;\n  dropIndicatorPosition: false | DSDataTableT.DropIndicatorPositionValues;\n  isDropValid: boolean;\n} => {\n  const flattenedData = usePropsStore((state) => state.flattenedData);\n\n  const { draggableProps } = useContext(SortableItemContext);\n\n  // ---------------------------------------------------------------------------\n  // Border calculation\n  // ---------------------------------------------------------------------------\n  const [borderTop, borderBottom, shouldAppendDottedBorder]: [string, string, boolean] = useMemo(() => {\n    if (row.original.dimsumHeaderValue) {\n      return ['none', 'none', false];\n    }\n    if (row.isExpanded && row.original.subRows && row.depth === 0) {\n      return ['1px solid #EBEDF0', 'none', true];\n    }\n\n    if (row.depth >= 1) {\n      if (row.realIndex < flattenedData.length - 1 && flattenedData[row.realIndex + 1].depth === 0) {\n        return ['none', '2px solid #EBEDF0', false];\n      }\n      return ['none', 'none', true];\n    }\n\n    return ['none', '1px solid #EBEDF0', false];\n  }, [row, flattenedData]);\n\n  const rowStyle = useMemo(() => ({ borderTop, borderBottom }), [borderTop, borderBottom]);\n\n  const dropIndicatorPosition =\n    draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;\n  const isDropValid = draggableProps && draggableProps.isDropValid;\n\n  return {\n    rowStyle,\n    shouldAppendDottedBorder,\n    dropIndicatorPosition,\n    isDropValid,\n  };\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY,eAAe;AACpC,SAAS,2BAA2B;AAEpC,SAAS,qBAAqB;AAEvB,MAAM,cAAc,CACzB,QAMG;AACH,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,aAAa;AAElE,QAAM,EAAE,eAAe,IAAI,WAAW,mBAAmB;AAKzD,QAAM,CAAC,WAAW,cAAc,wBAAwB,IAA+B,QAAQ,MAAM;AACnG,QAAI,IAAI,SAAS,mBAAmB;AAClC,aAAO,CAAC,QAAQ,QAAQ,KAAK;AAAA,IAC/B;AACA,QAAI,IAAI,cAAc,IAAI,SAAS,WAAW,IAAI,UAAU,GAAG;AAC7D,aAAO,CAAC,qBAAqB,QAAQ,IAAI;AAAA,IAC3C;AAEA,QAAI,IAAI,SAAS,GAAG;AAClB,UAAI,IAAI,YAAY,cAAc,SAAS,KAAK,cAAc,IAAI,YAAY,CAAC,EAAE,UAAU,GAAG;AAC5F,eAAO,CAAC,QAAQ,qBAAqB,KAAK;AAAA,MAC5C;AACA,aAAO,CAAC,QAAQ,QAAQ,IAAI;AAAA,IAC9B;AAEA,WAAO,CAAC,QAAQ,qBAAqB,KAAK;AAAA,EAC5C,GAAG,CAAC,KAAK,aAAa,CAAC;AAEvB,QAAM,WAAW,QAAQ,OAAO,EAAE,WAAW,aAAa,IAAI,CAAC,WAAW,YAAY,CAAC;AAEvF,QAAM,wBACJ,kBAAkB,eAAe,mCAAmC,eAAe;AACrF,QAAM,cAAc,kBAAkB,eAAe;AAErD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext, useMemo } from 'react';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport { SortableItemContext } from '../../parts/HoC/SortableItemContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\n\nexport const useRowStyle = (\n  row: DSDataTableT.InternalRow,\n): {\n  rowStyle: Record<string, unknown>;\n  shouldAppendDottedBorder: boolean;\n  dropIndicatorPosition: false | DSDataTableT.DropIndicatorPositionValues;\n  isDropValid: boolean;\n} => {\n  const flattenedData = usePropsStore((state) => state.flattenedData);\n\n  const { draggableProps } = useContext(SortableItemContext);\n\n  // ---------------------------------------------------------------------------\n  // Border calculation\n  // ---------------------------------------------------------------------------\n  const [borderTop, borderBottom, shouldAppendDottedBorder]: [string, string, boolean] = useMemo(() => {\n    if (row.original.dimsumHeaderValue) {\n      return ['none', 'none', false];\n    }\n    if (row.isExpanded && row.original.subRows && row.depth === 0) {\n      return ['1px solid #EBEDF0', 'none', true];\n    }\n\n    if (row.depth >= 1) {\n      if (row.realIndex < flattenedData.length - 1 && flattenedData[row.realIndex + 1].depth === 0) {\n        return ['none', '2px solid #EBEDF0', false];\n      }\n      return ['none', 'none', true];\n    }\n\n    return ['none', '1px solid #EBEDF0', false];\n  }, [row, flattenedData]);\n\n  const rowStyle = useMemo(() => ({ borderTop, borderBottom }), [borderTop, borderBottom]);\n\n  const dropIndicatorPosition =\n    draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;\n  const isDropValid = draggableProps && draggableProps.isDropValid;\n\n  return {\n    rowStyle,\n    shouldAppendDottedBorder,\n    dropIndicatorPosition,\n    isDropValid,\n  };\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY,eAAe;AACpC,SAAS,qBAAqB;AAC9B,SAAS,2BAA2B;AAG7B,MAAM,cAAc,CACzB,QAMG;AACH,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,aAAa;AAElE,QAAM,EAAE,eAAe,IAAI,WAAW,mBAAmB;AAKzD,QAAM,CAAC,WAAW,cAAc,wBAAwB,IAA+B,QAAQ,MAAM;AACnG,QAAI,IAAI,SAAS,mBAAmB;AAClC,aAAO,CAAC,QAAQ,QAAQ,KAAK;AAAA,IAC/B;AACA,QAAI,IAAI,cAAc,IAAI,SAAS,WAAW,IAAI,UAAU,GAAG;AAC7D,aAAO,CAAC,qBAAqB,QAAQ,IAAI;AAAA,IAC3C;AAEA,QAAI,IAAI,SAAS,GAAG;AAClB,UAAI,IAAI,YAAY,cAAc,SAAS,KAAK,cAAc,IAAI,YAAY,CAAC,EAAE,UAAU,GAAG;AAC5F,eAAO,CAAC,QAAQ,qBAAqB,KAAK;AAAA,MAC5C;AACA,aAAO,CAAC,QAAQ,QAAQ,IAAI;AAAA,IAC9B;AAEA,WAAO,CAAC,QAAQ,qBAAqB,KAAK;AAAA,EAC5C,GAAG,CAAC,KAAK,aAAa,CAAC;AAEvB,QAAM,WAAW,QAAQ,OAAO,EAAE,WAAW,aAAa,IAAI,CAAC,WAAW,YAAY,CAAC;AAEvF,QAAM,wBACJ,kBAAkB,eAAe,mCAAmC,eAAe;AACrF,QAAM,cAAc,kBAAkB,eAAe;AAErD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

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

@@ -1,13 +1,13 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useRef, useState } from "react";
-import useOnClickOutside from "use-onclickoutside";
-import { styled, css, mergeRefs } from "@elliemae/ds-system";
 import { DSButtonV3 } from "@elliemae/ds-button-v2";
 import { MoreOptionsVert } from "@elliemae/ds-icons";
-import { DATA_TESTID } from "../../configs/constants.js";
+import { css, mergeRefs, styled } from "@elliemae/ds-system";
+import { useCallback, useRef, useState } from "react";
+import useOnClickOutside from "use-onclickoutside";
 import { DSDataTableName, DSDataTableSlots } from "../../DSDataTableDefinitions.js";
-import { usePropsStore } from "../../configs/useStore/useStore.js";
+import { DATA_TESTID } from "../../configs/constants.js";
+import { usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
 const ToolbarBtns = styled("div", { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_BUTTONS_WRAPPER })``;
 const boxShadow = css`
   box-shadow:

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

@@ -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 React, { useCallback, useRef, useState } from 'react';\nimport useOnClickOutside from 'use-onclickoutside';\nimport { styled, css, mergeRefs } from '@elliemae/ds-system';\nimport { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { DSDataTableName, DSDataTableSlots } from '../../DSDataTableDefinitions.js';\nimport { usePropsStore } from '../../configs/useStore/useStore.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,SAAgB,aAAa,QAAQ,gBAAgB;AACrD,OAAO,uBAAuB;AAC9B,SAAS,QAAQ,KAAK,iBAAiB;AACvC,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAE5B,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,qBAAqB;AAE9B,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: 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;",
   "names": []
 }

package/dist/esm/parts/Cells/Cell.js CHANGED Viewed

@@ -1,15 +1,15 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import React2, { useContext, useMemo, memo } from "react";
-import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
 import { Grid } from "@elliemae/ds-grid";
-import { StyledCell, StyledCellContent } from "../../styled.js";
-import { outOfTheBoxEditables } from "../../addons/Editables/index.js";
-import { SortableItemContext } from "../HoC/SortableItemContext.js";
+import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
+import React2, { memo, useContext, useMemo } from "react";
 import { expandRowColumn } from "../../addons/Columns/index.js";
+import { outOfTheBoxEditables } from "../../addons/Editables/index.js";
 import { DATA_TESTID } from "../../configs/constants.js";
+import { usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
+import { StyledCell, StyledCellContent } from "../../styled.js";
+import { SortableItemContext } from "../HoC/SortableItemContext.js";
 import { useCellStyle } from "./useCellStyle.js";
-import { usePropsStore } from "../../configs/useStore/useStore.js";
 const PureStandardCell = memo(({ cellStyle, children, column }) => /* @__PURE__ */ jsx(StyledCell, { column, style: cellStyle, role: "cell", "data-testid": DATA_TESTID.DATA_TABLE_CELL, children }));
 const Cell = ({
   cell,
@@ -43,7 +43,13 @@ const Cell = ({
   );
   const CellComponent = cell.render;
   const textValue = useMemo(
-    () => appliedTextWrap === "truncate" ? /* @__PURE__ */ jsx(SimpleTruncatedTooltipText, { value: /* @__PURE__ */ jsx(CellComponent, { ...cellProps }) }) : /* @__PURE__ */ jsx(CellComponent, { ...cellProps }),
+    () => appliedTextWrap === "truncate" ? (
+      // @ts-expect-error - data-table typescript is broken
+      /* @__PURE__ */ jsx(SimpleTruncatedTooltipText, { value: /* @__PURE__ */ jsx(CellComponent, { ...cellProps }) })
+    ) : (
+      // @ts-expect-error - data-table typescript is broken
+      /* @__PURE__ */ jsx(CellComponent, { ...cellProps })
+    ),
     [CellComponent, appliedTextWrap, cellProps]
   );
   const pureCellContent = useMemo(() => {
@@ -61,7 +67,7 @@ const Cell = ({
   );
   const EditableContentJSX = useMemo(() => {
     if (typeof column.editable === "string") {
-      const { EditableComponent } = outOfTheBoxEditables?.[column.editable];
+      const { EditableComponent } = outOfTheBoxEditables?.[column.editable] ?? {};
       if (EditableComponent) return /* @__PURE__ */ jsx(EditableComponent, { ...cellProps, DefaultCellRender: DefaultCellContentJSX });
     }
     if (typeof column.editable === "function")

package/dist/esm/parts/Cells/Cell.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Cells/Cell.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useContext, useMemo, memo, type PropsWithChildren } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { Grid } from '@elliemae/ds-grid';\nimport { StyledCell, StyledCellContent } from '../../styled.js';\nimport { outOfTheBoxEditables } from '../../addons/Editables/index.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { SortableItemContext } from '../HoC/SortableItemContext.js';\nimport { expandRowColumn } from '../../addons/Columns/index.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { useCellStyle } from './useCellStyle.js';\nimport { usePropsStore } from '../../configs/useStore/useStore.js';\n\nconst PureStandardCell = memo<\n  PropsWithChildren<{ cellStyle: React.CSSProperties; column: DSDataTableT.InternalColumn }>\n>(({ cellStyle, children, column }) => (\n  <StyledCell column={column} style={cellStyle} role=\"cell\" data-testid={DATA_TESTID.DATA_TABLE_CELL}>\n    {children}\n  </StyledCell>\n));\n\ninterface CellProps {\n  cell: DSDataTableT.Cell;\n  column: DSDataTableT.InternalColumn;\n  row: DSDataTableT.InternalRow;\n  isRowSelected: boolean;\n  shouldAddExpandCell: boolean;\n  isDragOverlay: boolean;\n}\n\nconst Cell: React.ComponentType<CellProps> = ({\n  cell,\n  column,\n  row,\n  isRowSelected,\n  shouldAddExpandCell,\n  isDragOverlay,\n}) => {\n  const cellRendererProps = usePropsStore((state) => state.cellRendererProps);\n  const disabledRows = usePropsStore((state) => state.disabledRows);\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = React.useCallback(() => cell, [cell]);\n  const isDisabledRow = disabledRows[row.uid];\n\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const [appliedTextWrap, cellStyle] = useCellStyle(column, shouldAddExpandCell);\n\n  const cellProps = useMemo(\n    () => ({\n      ...cellRendererProps,\n      cell,\n      row,\n      isRowSelected,\n      draggableProps,\n      isDragOverlay,\n      role: 'cell',\n      cellStyle,\n      column,\n      isDisabledRow,\n    }),\n    [cellRendererProps, cell, row, isRowSelected, draggableProps, isDragOverlay, cellStyle, column, isDisabledRow],\n  );\n\n  const CellComponent = cell.render;\n\n  const textValue = useMemo(\n    () =>\n      appliedTextWrap === 'truncate' ? (\n        <SimpleTruncatedTooltipText value={<CellComponent {...cellProps} />} />\n      ) : (\n        <CellComponent {...cellProps} />\n      ),\n    [CellComponent, appliedTextWrap, cellProps],\n  );\n  const pureCellContent = useMemo(() => {\n    if (shouldAddExpandCell) {\n      return (\n        <Grid cols={['min-content', 'auto']} alignItems=\"center\" height=\"100%\">\n          {shouldAddExpandCell && expandRowColumn.Cell && <expandRowColumn.Cell {...cellProps} />}\n          {textValue}\n        </Grid>\n      );\n    }\n    return textValue;\n  }, [cellProps, shouldAddExpandCell, textValue]);\n  const DefaultCellContentJSX = useMemo(\n    () => (\n      <StyledCellContent getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n        {pureCellContent}\n      </StyledCellContent>\n    ),\n    [getOwnerProps, getOwnerPropsArguments, pureCellContent],\n  );\n\n  const EditableContentJSX = useMemo(() => {\n    if (typeof column.editable === 'string') {\n      const { EditableComponent } = outOfTheBoxEditables?.[column.editable];\n      if (EditableComponent) return <EditableComponent {...cellProps} DefaultCellRender={DefaultCellContentJSX} />;\n    }\n    if (typeof column.editable === 'function')\n      return column.editable({\n        DefaultCellRender: DefaultCellContentJSX,\n        ...cellProps,\n      }) as JSX.Element;\n\n    return null;\n  }, [DefaultCellContentJSX, cellProps, column]);\n\n  return (\n    <PureStandardCell {...cellProps}>\n      {column.editable && !disabledRows[row.uid] ? EditableContentJSX : DefaultCellContentJSX}\n    </PureStandardCell>\n  );\n};\n\nexport { Cell };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACgBrB,cA8DM,YA9DN;AAfF,OAAOA,UAAS,YAAY,SAAS,YAAoC;AACzE,SAAS,kCAAkC;AAC3C,SAAS,YAAY;AACrB,SAAS,YAAY,yBAAyB;AAC9C,SAAS,4BAA4B;AAErC,SAAS,2BAA2B;AACpC,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAE9B,MAAM,mBAAmB,KAEvB,CAAC,EAAE,WAAW,UAAU,OAAO,MAC/B,oBAAC,cAAW,QAAgB,OAAO,WAAW,MAAK,QAAO,eAAa,YAAY,iBAChF,UACH,CACD;AAWD,MAAM,OAAuC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,oBAAoB,cAAc,CAAC,UAAU,MAAM,iBAAiB;AAC1E,QAAM,eAAe,cAAc,CAAC,UAAU,MAAM,YAAY;AAChE,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyBA,OAAM,YAAY,MAAM,MAAM,CAAC,IAAI,CAAC;AACnE,QAAM,gBAAgB,aAAa,IAAI,GAAG;AAE1C,QAAM,EAAE,eAAe,IAAI,WAAW,mBAAmB;AAEzD,QAAM,CAAC,iBAAiB,SAAS,IAAI,aAAa,QAAQ,mBAAmB;AAE7E,QAAM,YAAY;AAAA,IAChB,OAAO;AAAA,MACL,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,mBAAmB,MAAM,KAAK,eAAe,gBAAgB,eAAe,WAAW,QAAQ,aAAa;AAAA,EAC/G;AAEA,QAAM,gBAAgB,KAAK;AAE3B,QAAM,YAAY;AAAA,IAChB,MACE,oBAAoB,aAClB,oBAAC,8BAA2B,OAAO,oBAAC,iBAAe,GAAG,WAAW,GAAI,IAErE,oBAAC,iBAAe,GAAG,WAAW;AAAA,IAElC,CAAC,eAAe,iBAAiB,SAAS;AAAA,EAC5C;AACA,QAAM,kBAAkB,QAAQ,MAAM;AACpC,QAAI,qBAAqB;AACvB,aACE,qBAAC,QAAK,MAAM,CAAC,eAAe,MAAM,GAAG,YAAW,UAAS,QAAO,QAC7D;AAAA,+BAAuB,gBAAgB,QAAQ,oBAAC,gBAAgB,MAAhB,EAAsB,GAAG,WAAW;AAAA,QACpF;AAAA,SACH;AAAA,IAEJ;AACA,WAAO;AAAA,EACT,GAAG,CAAC,WAAW,qBAAqB,SAAS,CAAC;AAC9C,QAAM,wBAAwB;AAAA,IAC5B,MACE,oBAAC,qBAAkB,eAA8B,wBAC9C,2BACH;AAAA,IAEF,CAAC,eAAe,wBAAwB,eAAe;AAAA,EACzD;AAEA,QAAM,qBAAqB,QAAQ,MAAM;AACvC,QAAI,OAAO,OAAO,aAAa,UAAU;AACvC,YAAM,EAAE,kBAAkB,IAAI,uBAAuB,OAAO,QAAQ;AACpE,UAAI,kBAAmB,QAAO,oBAAC,qBAAmB,GAAG,WAAW,mBAAmB,uBAAuB;AAAA,IAC5G;AACA,QAAI,OAAO,OAAO,aAAa;AAC7B,aAAO,OAAO,SAAS;AAAA,QACrB,mBAAmB;AAAA,QACnB,GAAG;AAAA,MACL,CAAC;AAEH,WAAO;AAAA,EACT,GAAG,CAAC,uBAAuB,WAAW,MAAM,CAAC;AAE7C,SACE,oBAAC,oBAAkB,GAAG,WACnB,iBAAO,YAAY,CAAC,aAAa,IAAI,GAAG,IAAI,qBAAqB,uBACpE;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { Grid } from '@elliemae/ds-grid';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport React, { memo, useContext, useMemo, type PropsWithChildren } from 'react';\nimport { expandRowColumn } from '../../addons/Columns/index.js';\nimport { outOfTheBoxEditables } from '../../addons/Editables/index.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { StyledCell, StyledCellContent } from '../../styled.js';\nimport { SortableItemContext } from '../HoC/SortableItemContext.js';\nimport { useCellStyle } from './useCellStyle.js';\n\nconst PureStandardCell = memo<\n  PropsWithChildren<{ cellStyle: React.CSSProperties; column: DSDataTableT.InternalColumn }>\n>(({ cellStyle, children, column }) => (\n  <StyledCell column={column} style={cellStyle} role=\"cell\" data-testid={DATA_TESTID.DATA_TABLE_CELL}>\n    {children}\n  </StyledCell>\n));\n\ninterface CellProps {\n  cell: DSDataTableT.Cell;\n  column: DSDataTableT.InternalColumn;\n  row: DSDataTableT.InternalRow;\n  isRowSelected: boolean;\n  shouldAddExpandCell: boolean;\n  isDragOverlay: boolean;\n}\n\nconst Cell: React.ComponentType<CellProps> = ({\n  cell,\n  column,\n  row,\n  isRowSelected,\n  shouldAddExpandCell,\n  isDragOverlay,\n}) => {\n  const cellRendererProps = usePropsStore((state) => state.cellRendererProps);\n  const disabledRows = usePropsStore((state) => state.disabledRows);\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = React.useCallback(() => cell, [cell]);\n  const isDisabledRow = disabledRows[row.uid];\n\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const [appliedTextWrap, cellStyle] = useCellStyle(column, shouldAddExpandCell);\n\n  const cellProps = useMemo(\n    () => ({\n      ...cellRendererProps,\n      cell,\n      row,\n      isRowSelected,\n      draggableProps,\n      isDragOverlay,\n      role: 'cell',\n      cellStyle,\n      column,\n      isDisabledRow,\n    }),\n    [cellRendererProps, cell, row, isRowSelected, draggableProps, isDragOverlay, cellStyle, column, isDisabledRow],\n  );\n\n  const CellComponent = cell.render;\n\n  const textValue = useMemo(\n    () =>\n      appliedTextWrap === 'truncate' ? (\n        // @ts-expect-error - data-table typescript is broken\n        <SimpleTruncatedTooltipText value={<CellComponent {...cellProps} />} />\n      ) : (\n        // @ts-expect-error - data-table typescript is broken\n        <CellComponent {...cellProps} />\n      ),\n    [CellComponent, appliedTextWrap, cellProps],\n  );\n  const pureCellContent = useMemo(() => {\n    if (shouldAddExpandCell) {\n      return (\n        <Grid cols={['min-content', 'auto']} alignItems=\"center\" height=\"100%\">\n          {/* @ts-expect-error - data-table typescript is broken */}\n          {shouldAddExpandCell && expandRowColumn.Cell && <expandRowColumn.Cell {...cellProps} />}\n          {textValue}\n        </Grid>\n      );\n    }\n    return textValue;\n  }, [cellProps, shouldAddExpandCell, textValue]);\n  const DefaultCellContentJSX = useMemo(\n    () => (\n      <StyledCellContent getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n        {pureCellContent}\n      </StyledCellContent>\n    ),\n    [getOwnerProps, getOwnerPropsArguments, pureCellContent],\n  );\n\n  const EditableContentJSX = useMemo(() => {\n    if (typeof column.editable === 'string') {\n      const { EditableComponent } = outOfTheBoxEditables?.[column.editable] ?? {};\n      // @ts-expect-error - data-table typescript is broken\n      if (EditableComponent) return <EditableComponent {...cellProps} DefaultCellRender={DefaultCellContentJSX} />;\n    }\n    if (typeof column.editable === 'function')\n      // @ts-expect-error - data-table typescript is broken\n      return column.editable({\n        DefaultCellRender: DefaultCellContentJSX,\n        ...cellProps,\n      }) as JSX.Element;\n\n    return null;\n  }, [DefaultCellContentJSX, cellProps, column]);\n\n  return (\n    <PureStandardCell {...cellProps}>\n      {column.editable && !disabledRows[row.uid] ? EditableContentJSX : DefaultCellContentJSX}\n    </PureStandardCell>\n  );\n};\n\nexport { Cell };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACgBrB,cAgEM,YAhEN;AAfF,SAAS,YAAY;AACrB,SAAS,kCAAkC;AAC3C,OAAOA,UAAS,MAAM,YAAY,eAAuC;AACzE,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AACrC,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAE9B,SAAS,YAAY,yBAAyB;AAC9C,SAAS,2BAA2B;AACpC,SAAS,oBAAoB;AAE7B,MAAM,mBAAmB,KAEvB,CAAC,EAAE,WAAW,UAAU,OAAO,MAC/B,oBAAC,cAAW,QAAgB,OAAO,WAAW,MAAK,QAAO,eAAa,YAAY,iBAChF,UACH,CACD;AAWD,MAAM,OAAuC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,oBAAoB,cAAc,CAAC,UAAU,MAAM,iBAAiB;AAC1E,QAAM,eAAe,cAAc,CAAC,UAAU,MAAM,YAAY;AAChE,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyBA,OAAM,YAAY,MAAM,MAAM,CAAC,IAAI,CAAC;AACnE,QAAM,gBAAgB,aAAa,IAAI,GAAG;AAE1C,QAAM,EAAE,eAAe,IAAI,WAAW,mBAAmB;AAEzD,QAAM,CAAC,iBAAiB,SAAS,IAAI,aAAa,QAAQ,mBAAmB;AAE7E,QAAM,YAAY;AAAA,IAChB,OAAO;AAAA,MACL,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,mBAAmB,MAAM,KAAK,eAAe,gBAAgB,eAAe,WAAW,QAAQ,aAAa;AAAA,EAC/G;AAEA,QAAM,gBAAgB,KAAK;AAE3B,QAAM,YAAY;AAAA,IAChB,MACE,oBAAoB;AAAA;AAAA,MAElB,oBAAC,8BAA2B,OAAO,oBAAC,iBAAe,GAAG,WAAW,GAAI;AAAA;AAAA;AAAA,MAGrE,oBAAC,iBAAe,GAAG,WAAW;AAAA;AAAA,IAElC,CAAC,eAAe,iBAAiB,SAAS;AAAA,EAC5C;AACA,QAAM,kBAAkB,QAAQ,MAAM;AACpC,QAAI,qBAAqB;AACvB,aACE,qBAAC,QAAK,MAAM,CAAC,eAAe,MAAM,GAAG,YAAW,UAAS,QAAO,QAE7D;AAAA,+BAAuB,gBAAgB,QAAQ,oBAAC,gBAAgB,MAAhB,EAAsB,GAAG,WAAW;AAAA,QACpF;AAAA,SACH;AAAA,IAEJ;AACA,WAAO;AAAA,EACT,GAAG,CAAC,WAAW,qBAAqB,SAAS,CAAC;AAC9C,QAAM,wBAAwB;AAAA,IAC5B,MACE,oBAAC,qBAAkB,eAA8B,wBAC9C,2BACH;AAAA,IAEF,CAAC,eAAe,wBAAwB,eAAe;AAAA,EACzD;AAEA,QAAM,qBAAqB,QAAQ,MAAM;AACvC,QAAI,OAAO,OAAO,aAAa,UAAU;AACvC,YAAM,EAAE,kBAAkB,IAAI,uBAAuB,OAAO,QAAQ,KAAK,CAAC;AAE1E,UAAI,kBAAmB,QAAO,oBAAC,qBAAmB,GAAG,WAAW,mBAAmB,uBAAuB;AAAA,IAC5G;AACA,QAAI,OAAO,OAAO,aAAa;AAE7B,aAAO,OAAO,SAAS;AAAA,QACrB,mBAAmB;AAAA,QACnB,GAAG;AAAA,MACL,CAAC;AAEH,WAAO;AAAA,EACT,GAAG,CAAC,uBAAuB,WAAW,MAAM,CAAC;AAE7C,SACE,oBAAC,oBAAkB,GAAG,WACnB,iBAAO,YAAY,CAAC,aAAa,IAAI,GAAG,IAAI,qBAAqB,uBACpE;AAEJ;",
   "names": ["React"]
 }

package/dist/esm/parts/Cells/CellFactory.js CHANGED Viewed

@@ -1,14 +1,14 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import React2, { useContext, useMemo, memo } from "react";
 import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
-import { StyledCell, StyledCellContent } from "../../styled.js";
-import { outOfTheBoxEditables } from "../../addons/Editables/index.js";
-import { SortableItemContext } from "../HoC/SortableItemContext.js";
+import React2, { memo, useContext, useMemo } from "react";
 import { expandRowColumn } from "../../addons/Columns/index.js";
+import { outOfTheBoxEditables } from "../../addons/Editables/index.js";
 import { DATA_TESTID } from "../../configs/constants.js";
+import { usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
+import { StyledCell, StyledCellContent } from "../../styled.js";
+import { SortableItemContext } from "../HoC/SortableItemContext.js";
 import { useCellStyle } from "./useCellStyle.js";
-import { usePropsStore } from "../../configs/useStore/useStore.js";
 const PureStandardCell = memo(
   ({ column, cell, shouldAddExpandCell, cellIsNextToExpander, row, children }) => {
     const cellStyle = useCellStyle(column, shouldAddExpandCell, cellIsNextToExpander, row)[1];
@@ -49,7 +49,7 @@ const EditableCell = memo((props) => {
   const { column } = props;
   const DefaultCellContentJSX = /* @__PURE__ */ jsx(DefaultCellContent, { ...props });
   if (typeof column.editable === "string") {
-    const { EditableComponent } = outOfTheBoxEditables?.[column.editable];
+    const { EditableComponent } = outOfTheBoxEditables?.[column.editable] ?? {};
     if (EditableComponent) return /* @__PURE__ */ jsx(EditableComponent, { ...props, DefaultCellRender: DefaultCellContentJSX });
   }
   if (typeof column.editable === "function") {

package/dist/esm/parts/Cells/CellFactory.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Cells/CellFactory.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useContext, useMemo, memo, type PropsWithChildren } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledCell, StyledCellContent } from '../../styled.js';\nimport { outOfTheBoxEditables } from '../../addons/Editables/index.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { SortableItemContext } from '../HoC/SortableItemContext.js';\nimport { expandRowColumn } from '../../addons/Columns/index.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { useCellStyle } from './useCellStyle.js';\nimport { usePropsStore } from '../../configs/useStore/useStore.js';\n\nconst PureStandardCell = memo<PropsWithChildren<DSDataTableT.CellProps>>(\n  ({ column, cell, shouldAddExpandCell, cellIsNextToExpander, row, children }) => {\n    const cellStyle = useCellStyle(column, shouldAddExpandCell, cellIsNextToExpander, row)[1];\n    const getOwnerProps = usePropsStore((store) => store.get);\n    const getOwnerPropsArguments = React.useCallback(() => cell, [cell]);\n    return (\n      <StyledCell\n        column={column}\n        style={cellStyle}\n        role=\"cell\"\n        data-testid={DATA_TESTID.DATA_TABLE_CELL}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {children}\n      </StyledCell>\n    );\n  },\n);\n\nconst TruncableCellContent = memo((props: DSDataTableT.CellProps) => {\n  const { cell, column } = props;\n  const { render: CellComponent } = cell;\n\n  const textWrap = usePropsStore((state) => state.textWrap);\n  const appliedTextWrap = column.textWrap || textWrap;\n  if (appliedTextWrap === 'truncate') {\n    return <SimpleTruncatedTooltipText value={<CellComponent {...props} />} />;\n  }\n  return <CellComponent {...props} />;\n});\n\nconst ExpandableCellContent = memo(\n  (props: DSDataTableT.CellProps) => expandRowColumn.Cell && <expandRowColumn.Cell {...props} />,\n);\n\nconst DefaultCellContent = memo((props: DSDataTableT.CellProps) => {\n  const { shouldAddExpandCell } = props;\n\n  return (\n    <StyledCellContent>\n      {shouldAddExpandCell ? <ExpandableCellContent {...props} /> : <TruncableCellContent {...props} />}\n    </StyledCellContent>\n  );\n});\n\nconst EditableCell = memo((props: DSDataTableT.CellProps) => {\n  const { column } = props;\n  const DefaultCellContentJSX = <DefaultCellContent {...props} />;\n\n  if (typeof column.editable === 'string') {\n    const { EditableComponent } = outOfTheBoxEditables?.[column.editable];\n    if (EditableComponent) return <EditableComponent {...props} DefaultCellRender={DefaultCellContentJSX} />;\n  }\n  if (typeof column.editable === 'function') {\n    const ColumnEditableRenderProps = column.editable as React.ComponentType<\n      DSDataTableT.CellProps & { DefaultCellRender: JSX.Element }\n    >;\n    return <ColumnEditableRenderProps {...props} DefaultCellRender={DefaultCellContentJSX} />;\n  }\n\n  return null;\n});\n\ninterface CellFactoryProps {\n  cell: DSDataTableT.Cell;\n  column: DSDataTableT.InternalColumn;\n  row: DSDataTableT.InternalRow;\n  isRowSelected: boolean;\n  shouldAddExpandCell: boolean;\n  cellIsNextToExpander: boolean;\n  isDragOverlay: boolean;\n}\n\nconst CellFactory: React.ComponentType<CellFactoryProps> = (props) => {\n  const { column, row } = props;\n  const cellRendererProps = usePropsStore((state) => state.cellRendererProps);\n  const disabledRows = usePropsStore((state) => state.disabledRows);\n  const domIdAffix = usePropsStore((state) => state.domIdAffix);\n  const isDisabledRow = disabledRows[row.uid];\n\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const cellProps: DSDataTableT.CellProps = useMemo(\n    () => ({\n      ...cellRendererProps,\n      ...props,\n      role: 'cell',\n      draggableProps,\n      isDisabledRow,\n      domIdAffix,\n    }),\n    [cellRendererProps, props, draggableProps, isDisabledRow, domIdAffix],\n  );\n\n  return (\n    <PureStandardCell {...cellProps}>\n      {column.editable && !disabledRows[row.uid] ? (\n        <EditableCell {...cellProps} />\n      ) : (\n        <DefaultCellContent {...cellProps} />\n      )}\n    </PureStandardCell>\n  );\n};\n\nexport { CellFactory };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport React, { memo, useContext, useMemo, type PropsWithChildren } from 'react';\nimport { expandRowColumn } from '../../addons/Columns/index.js';\nimport { outOfTheBoxEditables } from '../../addons/Editables/index.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { StyledCell, StyledCellContent } from '../../styled.js';\nimport { SortableItemContext } from '../HoC/SortableItemContext.js';\nimport { useCellStyle } from './useCellStyle.js';\n\nconst PureStandardCell = memo<PropsWithChildren<DSDataTableT.CellProps>>(\n  ({ column, cell, shouldAddExpandCell, cellIsNextToExpander, row, children }) => {\n    const cellStyle = useCellStyle(column, shouldAddExpandCell, cellIsNextToExpander, row)[1];\n    const getOwnerProps = usePropsStore((store) => store.get);\n    const getOwnerPropsArguments = React.useCallback(() => cell, [cell]);\n    return (\n      <StyledCell\n        column={column}\n        style={cellStyle}\n        role=\"cell\"\n        data-testid={DATA_TESTID.DATA_TABLE_CELL}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {children}\n      </StyledCell>\n    );\n  },\n);\n\nconst TruncableCellContent = memo((props: DSDataTableT.CellProps) => {\n  const { cell, column } = props;\n  const { render: CellComponent } = cell;\n\n  const textWrap = usePropsStore((state) => state.textWrap);\n  const appliedTextWrap = column.textWrap || textWrap;\n  if (appliedTextWrap === 'truncate') {\n    return <SimpleTruncatedTooltipText value={<CellComponent {...props} />} />;\n  }\n  return <CellComponent {...props} />;\n});\n\nconst ExpandableCellContent = memo(\n  (props: DSDataTableT.CellProps) => expandRowColumn.Cell && <expandRowColumn.Cell {...props} />,\n);\n\nconst DefaultCellContent = memo((props: DSDataTableT.CellProps) => {\n  const { shouldAddExpandCell } = props;\n\n  return (\n    <StyledCellContent>\n      {shouldAddExpandCell ? <ExpandableCellContent {...props} /> : <TruncableCellContent {...props} />}\n    </StyledCellContent>\n  );\n});\n\nconst EditableCell = memo((props: DSDataTableT.CellProps) => {\n  const { column } = props;\n  const DefaultCellContentJSX = <DefaultCellContent {...props} />;\n\n  if (typeof column.editable === 'string') {\n    const { EditableComponent } = outOfTheBoxEditables?.[column.editable] ?? {};\n    // @ts-expect-error - data-table typescript is broken\n    if (EditableComponent) return <EditableComponent {...props} DefaultCellRender={DefaultCellContentJSX} />;\n  }\n  if (typeof column.editable === 'function') {\n    const ColumnEditableRenderProps = column.editable as React.ComponentType<\n      DSDataTableT.CellProps & { DefaultCellRender: JSX.Element }\n    >;\n    return <ColumnEditableRenderProps {...props} DefaultCellRender={DefaultCellContentJSX} />;\n  }\n\n  return null;\n});\n\ninterface CellFactoryProps {\n  cell: DSDataTableT.Cell;\n  column: DSDataTableT.InternalColumn;\n  row: DSDataTableT.InternalRow;\n  isRowSelected: boolean;\n  shouldAddExpandCell: boolean;\n  cellIsNextToExpander: boolean;\n  isDragOverlay: boolean;\n}\n\nconst CellFactory: React.ComponentType<CellFactoryProps> = (props) => {\n  const { column, row } = props;\n  const cellRendererProps = usePropsStore((state) => state.cellRendererProps);\n  const disabledRows = usePropsStore((state) => state.disabledRows);\n  const domIdAffix = usePropsStore((state) => state.domIdAffix);\n  const isDisabledRow = disabledRows[row.uid];\n\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const cellProps: DSDataTableT.CellProps = useMemo(\n    () => ({\n      ...cellRendererProps,\n      ...props,\n      role: 'cell',\n      draggableProps,\n      isDisabledRow,\n      domIdAffix,\n    }),\n    [cellRendererProps, props, draggableProps, isDisabledRow, domIdAffix],\n  );\n\n  return (\n    <PureStandardCell {...cellProps}>\n      {column.editable && !disabledRows[row.uid] ? (\n        <EditableCell {...cellProps} />\n      ) : (\n        <DefaultCellContent {...cellProps} />\n      )}\n    </PureStandardCell>\n  );\n};\n\nexport { CellFactory };\n"],
+  "mappings": "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",
   "names": ["React"]
 }

package/dist/esm/parts/Cells/index.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { Fragment, jsx } from "react/jsx-runtime";
 import { INTERNAL_COLUMNS } from "../../addons/Columns/index.js";
+import { usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
 import { StyledActionCell } from "../../styled.js";
-import { usePropsStore } from "../../configs/useStore/useStore.js";
 import { CellFactory } from "./CellFactory.js";
 const Cells = (props) => {
   const { row, isRowSelected, isDragOverlay } = props;

package/dist/esm/parts/Cells/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Cells/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React from 'react';\nimport { INTERNAL_COLUMNS } from '../../addons/Columns/index.js';\nimport { StyledActionCell } from '../../styled.js';\nimport { usePropsStore } from '../../configs/useStore/useStore.js';\n\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { CellFactory } from './CellFactory.js';\n\nconst Cells: React.ComponentType<{\n  row: DSDataTableT.InternalRow;\n  isRowSelected: boolean;\n  isDragOverlay: boolean;\n}> = (props) => {\n  const { row, isRowSelected, isDragOverlay } = props;\n  const getOwnerProps = usePropsStore((store) => store.get);\n  // we won't print sub-rows more nested than the first level\n  if (row.depth <= 1) {\n    let userCellIsNextToExpander = false;\n    let userCellsProcessed = 0;\n    return (\n      <>\n        {row.cells.map((cell) => {\n          const { column } = cell;\n\n          const isUserCell = !INTERNAL_COLUMNS.includes(column.id);\n\n          let jsx = null;\n\n          if (column.id === 'rowActions') {\n            const ActionComponent = cell.render;\n            jsx = (\n              <StyledActionCell role=\"cell\" key={cell.id} getOwnerProps={getOwnerProps}>\n                <ActionComponent\n                  {...props}\n                  cell={cell}\n                  column={column}\n                  shouldAddExpandCell={isUserCell && userCellIsNextToExpander}\n                />\n              </StyledActionCell>\n            );\n          } else if (column.id === 'expander') {\n            // Next user's cell will be next to expander\n            userCellIsNextToExpander = !isDragOverlay; // Don't add it on drag overlay\n            jsx = (\n              <CellFactory\n                cell={cell}\n                column={column}\n                row={row}\n                isRowSelected={isRowSelected}\n                shouldAddExpandCell\n                isDragOverlay={isDragOverlay}\n                key={cell.id}\n              />\n            );\n          } else {\n            jsx = (\n              <CellFactory\n                cell={cell}\n                column={column}\n                row={row}\n                isRowSelected={isRowSelected}\n                shouldAddExpandCell={false}\n                cellIsNextToExpander={isUserCell && userCellIsNextToExpander}\n                isDragOverlay={isDragOverlay}\n                key={cell.id}\n              />\n            );\n          }\n\n          // Drag overlay only need to print the DnD handle and the first user's cell\n          if (isDragOverlay) {\n            if (column.id !== 'dragHandleColumn' && (!isUserCell || userCellsProcessed !== 0)) jsx = null;\n          }\n\n          // Reset expand cell\n          if (isUserCell) {\n            userCellIsNextToExpander = false;\n            userCellsProcessed += 1;\n          }\n          return jsx;\n        })}\n      </>\n    );\n  }\n\n  return null;\n};\n\nexport { Cells };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACqBjB,mBAYU,WAZV;AAnBN,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAG9B,SAAS,mBAAmB;AAE5B,MAAM,QAID,CAAC,UAAU;AACd,QAAM,EAAE,KAAK,eAAe,cAAc,IAAI;AAC9C,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AAExD,MAAI,IAAI,SAAS,GAAG;AAClB,QAAI,2BAA2B;AAC/B,QAAI,qBAAqB;AACzB,WACE,gCACG,cAAI,MAAM,IAAI,CAAC,SAAS;AACvB,YAAM,EAAE,OAAO,IAAI;AAEnB,YAAM,aAAa,CAAC,iBAAiB,SAAS,OAAO,EAAE;AAEvD,UAAIA,OAAM;AAEV,UAAI,OAAO,OAAO,cAAc;AAC9B,cAAM,kBAAkB,KAAK;AAC7B,QAAAA,OACE,oBAAC,oBAAiB,MAAK,QAAqB,eAC1C;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACJ;AAAA,YACA;AAAA,YACA,qBAAqB,cAAc;AAAA;AAAA,QACrC,KANiC,KAAK,EAOxC;AAAA,MAEJ,WAAW,OAAO,OAAO,YAAY;AAEnC,mCAA2B,CAAC;AAC5B,QAAAA,OACE;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,qBAAmB;AAAA,YACnB;AAAA;AAAA,UACK,KAAK;AAAA,QACZ;AAAA,MAEJ,OAAO;AACL,QAAAA,OACE;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,qBAAqB;AAAA,YACrB,sBAAsB,cAAc;AAAA,YACpC;AAAA;AAAA,UACK,KAAK;AAAA,QACZ;AAAA,MAEJ;AAGA,UAAI,eAAe;AACjB,YAAI,OAAO,OAAO,uBAAuB,CAAC,cAAc,uBAAuB,GAAI,CAAAA,OAAM;AAAA,MAC3F;AAGA,UAAI,YAAY;AACd,mCAA2B;AAC3B,8BAAsB;AAAA,MACxB;AACA,aAAOA;AAAA,IACT,CAAC,GACH;AAAA,EAEJ;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React from 'react';\nimport { INTERNAL_COLUMNS } from '../../addons/Columns/index.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport { StyledActionCell } from '../../styled.js';\n\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { CellFactory } from './CellFactory.js';\n\nconst Cells: React.ComponentType<{\n  row: DSDataTableT.InternalRow;\n  isRowSelected: boolean;\n  isDragOverlay: boolean;\n}> = (props) => {\n  const { row, isRowSelected, isDragOverlay } = props;\n  const getOwnerProps = usePropsStore((store) => store.get);\n  // we won't print sub-rows more nested than the first level\n  if (row.depth <= 1) {\n    let userCellIsNextToExpander = false;\n    let userCellsProcessed = 0;\n    return (\n      <>\n        {row.cells.map((cell) => {\n          const { column } = cell;\n\n          const isUserCell = !INTERNAL_COLUMNS.includes(column.id);\n\n          let jsx = null;\n\n          if (column.id === 'rowActions') {\n            const ActionComponent = cell.render;\n            jsx = (\n              <StyledActionCell role=\"cell\" key={cell.id} getOwnerProps={getOwnerProps}>\n                <ActionComponent\n                  {...props}\n                  cell={cell}\n                  column={column}\n                  shouldAddExpandCell={isUserCell && userCellIsNextToExpander}\n                />\n              </StyledActionCell>\n            );\n          } else if (column.id === 'expander') {\n            // Next user's cell will be next to expander\n            userCellIsNextToExpander = !isDragOverlay; // Don't add it on drag overlay\n            jsx = (\n              <CellFactory\n                cell={cell}\n                column={column}\n                row={row}\n                isRowSelected={isRowSelected}\n                shouldAddExpandCell\n                isDragOverlay={isDragOverlay}\n                key={cell.id}\n              />\n            );\n          } else {\n            jsx = (\n              <CellFactory\n                cell={cell}\n                column={column}\n                row={row}\n                isRowSelected={isRowSelected}\n                shouldAddExpandCell={false}\n                cellIsNextToExpander={isUserCell && userCellIsNextToExpander}\n                isDragOverlay={isDragOverlay}\n                key={cell.id}\n              />\n            );\n          }\n\n          // Drag overlay only need to print the DnD handle and the first user's cell\n          if (isDragOverlay) {\n            if (column.id !== 'dragHandleColumn' && (!isUserCell || userCellsProcessed !== 0)) jsx = null;\n          }\n\n          // Reset expand cell\n          if (isUserCell) {\n            userCellIsNextToExpander = false;\n            userCellsProcessed += 1;\n          }\n          return jsx;\n        })}\n      </>\n    );\n  }\n\n  return null;\n};\n\nexport { Cells };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACqBjB,mBAYU,WAZV;AAnBN,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AAGjC,SAAS,mBAAmB;AAE5B,MAAM,QAID,CAAC,UAAU;AACd,QAAM,EAAE,KAAK,eAAe,cAAc,IAAI;AAC9C,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AAExD,MAAI,IAAI,SAAS,GAAG;AAClB,QAAI,2BAA2B;AAC/B,QAAI,qBAAqB;AACzB,WACE,gCACG,cAAI,MAAM,IAAI,CAAC,SAAS;AACvB,YAAM,EAAE,OAAO,IAAI;AAEnB,YAAM,aAAa,CAAC,iBAAiB,SAAS,OAAO,EAAE;AAEvD,UAAIA,OAAM;AAEV,UAAI,OAAO,OAAO,cAAc;AAC9B,cAAM,kBAAkB,KAAK;AAC7B,QAAAA,OACE,oBAAC,oBAAiB,MAAK,QAAqB,eAC1C;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACJ;AAAA,YACA;AAAA,YACA,qBAAqB,cAAc;AAAA;AAAA,QACrC,KANiC,KAAK,EAOxC;AAAA,MAEJ,WAAW,OAAO,OAAO,YAAY;AAEnC,mCAA2B,CAAC;AAC5B,QAAAA,OACE;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,qBAAmB;AAAA,YACnB;AAAA;AAAA,UACK,KAAK;AAAA,QACZ;AAAA,MAEJ,OAAO;AACL,QAAAA,OACE;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,qBAAqB;AAAA,YACrB,sBAAsB,cAAc;AAAA,YACpC;AAAA;AAAA,UACK,KAAK;AAAA,QACZ;AAAA,MAEJ;AAGA,UAAI,eAAe;AACjB,YAAI,OAAO,OAAO,uBAAuB,CAAC,cAAc,uBAAuB,GAAI,CAAAA,OAAM;AAAA,MAC3F;AAGA,UAAI,YAAY;AACd,mCAA2B;AAC3B,8BAAsB;AAAA,MACxB;AACA,aAAOA;AAAA,IACT,CAAC,GACH;AAAA,EAEJ;AAEA,SAAO;AACT;",
   "names": ["jsx"]
 }

package/dist/esm/parts/Cells/useCellStyle.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { useMemo } from "react";
-import { usePropsStore } from "../../configs/useStore/useStore.js";
+import { usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
 const useCellStyle = (column, shouldAddExpandCell, cellIsNextToExpander, row) => {
   const textWrap = usePropsStore((state) => state.textWrap);
   const appliedTextWrap = column.textWrap || textWrap;
@@ -21,7 +21,7 @@ const useCellStyle = (column, shouldAddExpandCell, cellIsNextToExpander, row) =>
     if (shouldAddExpandCell) {
       newStyle.padding = `0 16px 0 2px`;
     }
-    if (cellIsNextToExpander) {
+    if (cellIsNextToExpander && row) {
       newStyle.paddingLeft = `${10 + row.depth * 32}px`;
     }
     return { ...newStyle, ...column.cellStyle ?? {} };

package/dist/esm/parts/Cells/useCellStyle.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Cells/useCellStyle.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\nimport { useMemo, type CSSProperties } from 'react';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { usePropsStore } from '../../configs/useStore/useStore.js';\n\nexport const useCellStyle = (\n  column: DSDataTableT.InternalColumn,\n  shouldAddExpandCell: boolean,\n  cellIsNextToExpander: boolean,\n  row: DSDataTableT.InternalRow,\n): [string, CSSProperties] => {\n  const textWrap = usePropsStore((state) => state.textWrap);\n\n  const appliedTextWrap = column.textWrap || textWrap;\n\n  const cellStyle = useMemo(() => {\n    const newStyle: CSSProperties = {};\n    switch (appliedTextWrap) {\n      case 'wrap-all':\n        newStyle.wordBreak = 'break-all';\n        break;\n      case 'truncate':\n        newStyle.whiteSpace = 'nowrap';\n        break;\n      case 'wrap':\n      default:\n        newStyle.whiteSpace = 'normal';\n        break;\n    }\n    if (shouldAddExpandCell) {\n      newStyle.padding = `0 16px 0 2px`;\n    }\n    if (cellIsNextToExpander) {\n      newStyle.paddingLeft = `${10 + row.depth * 32}px`;\n    }\n    return { ...newStyle, ...(column.cellStyle ?? {}) };\n  }, [appliedTextWrap, column.cellStyle, shouldAddExpandCell, cellIsNextToExpander, row]);\n\n  return [appliedTextWrap, cellStyle];\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,eAAmC;AAE5C,SAAS,qBAAqB;AAEvB,MAAM,eAAe,CAC1B,QACA,qBACA,sBACA,QAC4B;AAC5B,QAAM,WAAW,cAAc,CAAC,UAAU,MAAM,QAAQ;AAExD,QAAM,kBAAkB,OAAO,YAAY;AAE3C,QAAM,YAAY,QAAQ,MAAM;AAC9B,UAAM,WAA0B,CAAC;AACjC,YAAQ,iBAAiB;AAAA,MACvB,KAAK;AACH,iBAAS,YAAY;AACrB;AAAA,MACF,KAAK;AACH,iBAAS,aAAa;AACtB;AAAA,MACF,KAAK;AAAA,MACL;AACE,iBAAS,aAAa;AACtB;AAAA,IACJ;AACA,QAAI,qBAAqB;AACvB,eAAS,UAAU;AAAA,IACrB;AACA,QAAI,sBAAsB;AACxB,eAAS,cAAc,GAAG,KAAK,IAAI,QAAQ,EAAE;AAAA,IAC/C;AACA,WAAO,EAAE,GAAG,UAAU,GAAI,OAAO,aAAa,CAAC,EAAG;AAAA,EACpD,GAAG,CAAC,iBAAiB,OAAO,WAAW,qBAAqB,sBAAsB,GAAG,CAAC;AAEtF,SAAO,CAAC,iBAAiB,SAAS;AACpC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\nimport { useMemo, type CSSProperties } from 'react';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\n\nexport const useCellStyle = (\n  column: DSDataTableT.InternalColumn,\n  shouldAddExpandCell: boolean,\n  cellIsNextToExpander?: boolean,\n  row?: DSDataTableT.InternalRow,\n): [string, CSSProperties] => {\n  const textWrap = usePropsStore((state) => state.textWrap);\n\n  const appliedTextWrap = column.textWrap || textWrap;\n\n  const cellStyle = useMemo(() => {\n    const newStyle: CSSProperties = {};\n    switch (appliedTextWrap) {\n      case 'wrap-all':\n        newStyle.wordBreak = 'break-all';\n        break;\n      case 'truncate':\n        newStyle.whiteSpace = 'nowrap';\n        break;\n      case 'wrap':\n      default:\n        newStyle.whiteSpace = 'normal';\n        break;\n    }\n    if (shouldAddExpandCell) {\n      newStyle.padding = `0 16px 0 2px`;\n    }\n    if (cellIsNextToExpander && row) {\n      newStyle.paddingLeft = `${10 + row.depth * 32}px`;\n    }\n    return { ...newStyle, ...(column.cellStyle ?? {}) };\n  }, [appliedTextWrap, column.cellStyle, shouldAddExpandCell, cellIsNextToExpander, row]);\n\n  return [appliedTextWrap, cellStyle];\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,eAAmC;AAC5C,SAAS,qBAAqB;AAGvB,MAAM,eAAe,CAC1B,QACA,qBACA,sBACA,QAC4B;AAC5B,QAAM,WAAW,cAAc,CAAC,UAAU,MAAM,QAAQ;AAExD,QAAM,kBAAkB,OAAO,YAAY;AAE3C,QAAM,YAAY,QAAQ,MAAM;AAC9B,UAAM,WAA0B,CAAC;AACjC,YAAQ,iBAAiB;AAAA,MACvB,KAAK;AACH,iBAAS,YAAY;AACrB;AAAA,MACF,KAAK;AACH,iBAAS,aAAa;AACtB;AAAA,MACF,KAAK;AAAA,MACL;AACE,iBAAS,aAAa;AACtB;AAAA,IACJ;AACA,QAAI,qBAAqB;AACvB,eAAS,UAAU;AAAA,IACrB;AACA,QAAI,wBAAwB,KAAK;AAC/B,eAAS,cAAc,GAAG,KAAK,IAAI,QAAQ,EAAE;AAAA,IAC/C;AACA,WAAO,EAAE,GAAG,UAAU,GAAI,OAAO,aAAa,CAAC,EAAG;AAAA,EACpD,GAAG,CAAC,iBAAiB,OAAO,WAAW,qBAAqB,sBAAsB,GAAG,CAAC;AAEtF,SAAO,CAAC,iBAAiB,SAAS;AACpC;",
   "names": []
 }

package/dist/esm/parts/DnDHandle.js CHANGED Viewed

@@ -1,13 +1,13 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { createElement } from "react";
-import { useContext } from "react";
 import { GripperVertical } from "@elliemae/ds-icons";
-import { styled, mergeRefs } from "@elliemae/ds-system";
-import { SortableItemContext } from "./HoC/SortableItemContext.js";
-import { DATA_TESTID } from "../configs/constants.js";
+import { mergeRefs, styled } from "@elliemae/ds-system";
+import { useContext } from "react";
+import { usePropsStore } from "../configs/useStore/createInternalAndPropsContext.js";
 import { DSDataTableName, DSDataTableSlots } from "../DSDataTableDefinitions.js";
-import { usePropsStore } from "../configs/useStore/useStore.js";
+import { DATA_TESTID } from "../configs/constants.js";
+import { SortableItemContext } from "./HoC/SortableItemContext.js";
 const StyledGripperButton = styled("div", { name: DSDataTableName, slot: DSDataTableSlots.DRAG_AND_DROP_GRIPPER })`
   pointer-events: ${({ isDisabled }) => isDisabled ? "none" : ""};
   cursor: ${({ isActive, isDragOverlay, isDisabled }) => {