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

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

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 (244) hide show

package/dist/cjs/parts/Headers/HeaderCell.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Headers/HeaderCell.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable no-nested-ternary */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useCallback, useContext, useMemo, useRef } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { StyledHeadTh, StyledHeaderRightIconsWrapper, StyledFocusWithin } from '../../styled.js';\nimport { SortByCaret } from '../SortByCaret.js';\nimport { DragHandle } from '../DnDHandle.js';\nimport { SortableItemContext } from '../HoC/SortableItemContext.js';\nimport { FilterMapItem } from '../Filters/index.js';\nimport { HeaderResizer } from './HeaderResizer.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useHeaderCellHandlers } from './useHeaderCellHandlers.js';\nimport { useHeaderCellConfig } from './useHeaderCellConfig.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { HeaderCellTitle } from './HeaderCellTitle.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/useStore.js';\n\nconst buildScreenReaderInstructions = ({\n  colSpan,\n  draggable,\n  filterable,\n  sortable,\n}: {\n  colSpan: number;\n  draggable: boolean;\n  filterable: boolean;\n  sortable: boolean;\n}) => {\n  const preffix = colSpan === 1 ? '' : 'Column Group. ';\n  if (!draggable && !filterable && !sortable) return preffix;\n\n  let message = sortable\n    ? 'You can sort the data ascendingly/descendingly by this column. Use the up / down arrows keys to do so'\n    : '';\n  if (draggable && filterable) {\n    message = `This column is draggable and filterable. To enable these interactions press the enter key. ${message}`;\n  } else if (draggable || filterable) {\n    message = `This column is ${\n      draggable ? 'draggable' : 'filterable'\n    }. To enable this interaction press the enter key. ${message}`;\n  }\n  return `${preffix}${message}`;\n};\n\ninterface HeaderCellCompProps {\n  column: DSDataTableT.InternalColumn;\n  isDragOverlay?: boolean;\n  colSpan: number;\n}\n\nexport const HeaderCell: React.ComponentType<HeaderCellCompProps> = (props) => {\n  const { column, isDragOverlay, colSpan } = props;\n  const disabledRows = usePropsStore((state) => state.disabledRows);\n  const dragAndDropColumns = usePropsStore((state) => state.dragAndDropColumns);\n  const onFiltersChange = usePropsStore((state) => state.onFiltersChange);\n  const filters = usePropsStore((state) => state.filters);\n  const textWrap = usePropsStore((state) => state.textWrap);\n  const noResultsMessage = usePropsStore((state) => state.noResultsMessage);\n  const domIdAffix = usePropsStore((state) => state.domIdAffix);\n  const noResultsSecondaryMessage = usePropsStore((state) => state.noResultsSecondaryMessage);\n  const isEmptyContent = usePropsStore((state) => state.isEmptyContent);\n  const firstFocuseableColumnHeaderId = usePropsStore((state) => state.firstFocuseableColumnHeaderId);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  const reduxHeaders = useInternalStore((state) => state.reduxHeaders);\n  const reduxHeader = useMemo(() => reduxHeaders[column.id], [reduxHeaders, column]);\n  const dragHandleRef = useRef<HTMLDivElement | null>(null);\n  const filterIconRef = useRef<HTMLButtonElement | null>(null);\n  const resizeHandlerRef = useRef<HTMLInputElement | null>(null);\n  const sortRef = useRef<HTMLButtonElement | null>(null);\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const { hasFilter, hasDnD, hasSortingCaret, hasRightIcons, shouldShowDnD, hCols, isDragging, shouldShowResize } =\n    useHeaderCellConfig(props);\n\n  const { handleSort, ...handlers } = useHeaderCellHandlers({\n    hasFilter,\n    column,\n    hasDnD,\n    dragHandleRef,\n    filterIconRef,\n    resizeHandlerRef,\n    sortRef,\n    hasSortingCaret,\n    isDragOverlay,\n    draggableProps,\n  });\n\n  const rightIcons = useMemo(() => {\n    if (!hasRightIcons) return null;\n    return (\n      <StyledHeaderRightIconsWrapper getOwnerProps={getOwnerProps}>\n        <FilterMapItem\n          column={column}\n          onFiltersChange={onFiltersChange}\n          reduxHeader={reduxHeader}\n          filters={filters}\n          innerRef={filterIconRef}\n        />\n        {hasSortingCaret && (\n          <SortByCaret\n            isSortedDesc={column.isSortedDesc}\n            onClick={(e) => {\n              e.stopPropagation();\n              handleSort(e as React.MouseEvent);\n            }}\n            isReachable={reduxHeader?.withTabStops ?? false}\n            column={column}\n            reduxHeader={reduxHeader}\n            innerRef={sortRef}\n          />\n        )}\n      </StyledHeaderRightIconsWrapper>\n    );\n  }, [hasRightIcons, getOwnerProps, handleSort, column, onFiltersChange, reduxHeader, filters, hasSortingCaret]);\n\n  const DnDHandleComponent = useMemo(\n    () => (\n      <Grid mr=\"2px\" alignItems=\"center\" style={{ position: 'relative' }}>\n        <StyledFocusWithin hideFocus={isDragging}>\n          <DragHandle\n            key={column.id}\n            innerRef={dragHandleRef}\n            isReachable={reduxHeader?.withTabStops ?? false}\n            id={`header-dnd-handle-${column.id}-${domIdAffix}`}\n            isDragOverlay={isDragOverlay}\n            isDisabled={disabledRows[column.id]}\n          />\n        </StyledFocusWithin>\n      </Grid>\n    ),\n    [column.id, disabledRows, domIdAffix, isDragOverlay, isDragging, reduxHeader?.withTabStops],\n  );\n\n  const handleRef = useCallback(\n    (_ref: HTMLTableColElement | null) => {\n      if (!isDragOverlay) {\n        column.ref.current = _ref;\n      }\n    },\n    [column.ref, isDragOverlay],\n  );\n\n  const screenReaderInstructionsId = `sr-${column.id}-instructions-${domIdAffix}`.replace(/ /g, '');\n\n  return (\n    <StyledHeadTh\n      column={column}\n      onClick={handleSort}\n      {...handlers}\n      role=\"columnheader\"\n      {...(isEmptyContent && column.id === firstFocuseableColumnHeaderId\n        ? { 'aria-label': `${noResultsMessage}. ${noResultsSecondaryMessage ? `${noResultsSecondaryMessage}.` : ''}` }\n        : {})}\n      aria-describedby={screenReaderInstructionsId}\n      aria-sort={hasSortingCaret ? (column.isSortedDesc ? 'descending' : 'ascending') : 'none'}\n      data-testid={DATA_TESTID.DATA_TABLE_HEADER}\n      tabIndex={column.isFocuseable === false ? -1 : 0}\n      isDraggingActive={Boolean(draggableProps && draggableProps.active)}\n      shouldShowDnD={shouldShowDnD}\n      innerRef={handleRef}\n      getOwnerProps={getOwnerProps}\n    >\n      <Grid width=\"100%\" cols={hCols}>\n        {shouldShowDnD && DnDHandleComponent}\n        <HeaderCellTitle column={column} draggableProps={draggableProps} textWrap={textWrap} />\n        {rightIcons}\n        {shouldShowResize && (\n          <HeaderResizer column={column} innerRef={resizeHandlerRef} isReachable={reduxHeader?.withTabStops ?? false} />\n        )}\n      </Grid>\n      <span id={screenReaderInstructionsId} style={{ display: 'none' }} aria-hidden=\"false\">\n        {buildScreenReaderInstructions({\n          colSpan,\n          draggable: dragAndDropColumns && column.disableDnD !== true,\n          filterable: hasFilter,\n          sortable: column.canSort ?? false,\n        })}\n      </span>\n    </StyledHeadTh>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable no-nested-ternary */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useCallback, useContext, useMemo, useRef } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { StyledHeadTh, StyledHeaderRightIconsWrapper, StyledFocusWithin } from '../../styled.js';\nimport { SortByCaret } from '../SortByCaret.js';\nimport { DragHandle } from '../DnDHandle.js';\nimport { SortableItemContext } from '../HoC/SortableItemContext.js';\nimport { FilterMapItem } from '../Filters/index.js';\nimport { HeaderResizer } from './HeaderResizer.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useHeaderCellHandlers } from './useHeaderCellHandlers.js';\nimport { useHeaderCellConfig } from './useHeaderCellConfig.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { HeaderCellTitle } from './HeaderCellTitle.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\n\nconst buildScreenReaderInstructions = ({\n  colSpan,\n  draggable,\n  filterable,\n  sortable,\n}: {\n  colSpan: number;\n  draggable: boolean;\n  filterable: boolean;\n  sortable: boolean;\n}) => {\n  const preffix = colSpan === 1 ? '' : 'Column Group. ';\n  if (!draggable && !filterable && !sortable) return preffix;\n\n  let message = sortable\n    ? 'You can sort the data ascendingly/descendingly by this column. Use the up / down arrows keys to do so'\n    : '';\n  if (draggable && filterable) {\n    message = `This column is draggable and filterable. To enable these interactions press the enter key. ${message}`;\n  } else if (draggable || filterable) {\n    message = `This column is ${\n      draggable ? 'draggable' : 'filterable'\n    }. To enable this interaction press the enter key. ${message}`;\n  }\n  return `${preffix}${message}`;\n};\n\ninterface HeaderCellCompProps {\n  column: DSDataTableT.InternalColumn;\n  isDragOverlay?: boolean;\n  colSpan: number;\n}\n\nexport const HeaderCell: React.ComponentType<HeaderCellCompProps> = (props) => {\n  const { column, isDragOverlay, colSpan } = props;\n  const disabledRows = usePropsStore((state) => state.disabledRows);\n  const dragAndDropColumns = usePropsStore((state) => state.dragAndDropColumns);\n  const onFiltersChange = usePropsStore((state) => state.onFiltersChange);\n  const filters = usePropsStore((state) => state.filters);\n  const textWrap = usePropsStore((state) => state.textWrap);\n  const noResultsMessage = usePropsStore((state) => state.noResultsMessage);\n  const domIdAffix = usePropsStore((state) => state.domIdAffix);\n  const noResultsSecondaryMessage = usePropsStore((state) => state.noResultsSecondaryMessage);\n  const isEmptyContent = usePropsStore((state) => state.isEmptyContent);\n  const firstFocuseableColumnHeaderId = usePropsStore((state) => state.firstFocuseableColumnHeaderId);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  const reduxHeaders = useInternalStore((state) => state.reduxHeaders);\n  const reduxHeader = useMemo(() => reduxHeaders[column.id], [reduxHeaders, column]);\n  const dragHandleRef = useRef<HTMLDivElement | null>(null);\n  const filterIconRef = useRef<HTMLButtonElement | null>(null);\n  const resizeHandlerRef = useRef<HTMLInputElement | null>(null);\n  const sortRef = useRef<HTMLButtonElement | null>(null);\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const { hasFilter, hasDnD, hasSortingCaret, hasRightIcons, shouldShowDnD, hCols, isDragging, shouldShowResize } =\n    useHeaderCellConfig(props);\n\n  const { handleSort, ...handlers } = useHeaderCellHandlers({\n    hasFilter,\n    column,\n    hasDnD,\n    dragHandleRef,\n    filterIconRef,\n    resizeHandlerRef,\n    sortRef,\n    hasSortingCaret,\n    isDragOverlay,\n    draggableProps,\n  });\n\n  const rightIcons = useMemo(() => {\n    if (!hasRightIcons) return null;\n    return (\n      <StyledHeaderRightIconsWrapper getOwnerProps={getOwnerProps}>\n        <FilterMapItem\n          column={column}\n          onFiltersChange={onFiltersChange}\n          reduxHeader={reduxHeader}\n          filters={filters}\n          innerRef={filterIconRef}\n        />\n        {hasSortingCaret && (\n          <SortByCaret\n            isSortedDesc={column.isSortedDesc}\n            onClick={(e) => {\n              e.stopPropagation();\n              handleSort(e as React.MouseEvent);\n            }}\n            isReachable={reduxHeader?.withTabStops ?? false}\n            column={column}\n            reduxHeader={reduxHeader}\n            innerRef={sortRef}\n          />\n        )}\n      </StyledHeaderRightIconsWrapper>\n    );\n  }, [hasRightIcons, getOwnerProps, handleSort, column, onFiltersChange, reduxHeader, filters, hasSortingCaret]);\n\n  const DnDHandleComponent = useMemo(\n    () => (\n      <Grid mr=\"2px\" alignItems=\"center\" style={{ position: 'relative' }}>\n        <StyledFocusWithin hideFocus={isDragging}>\n          <DragHandle\n            key={column.id}\n            innerRef={dragHandleRef}\n            isReachable={reduxHeader?.withTabStops ?? false}\n            id={`header-dnd-handle-${column.id}-${domIdAffix}`}\n            isDragOverlay={isDragOverlay}\n            isDisabled={disabledRows[column.id]}\n          />\n        </StyledFocusWithin>\n      </Grid>\n    ),\n    [column.id, disabledRows, domIdAffix, isDragOverlay, isDragging, reduxHeader?.withTabStops],\n  );\n\n  const handleRef = useCallback(\n    (_ref: HTMLTableColElement | null) => {\n      if (!isDragOverlay) {\n        column.ref.current = _ref;\n      }\n    },\n    [column.ref, isDragOverlay],\n  );\n\n  const screenReaderInstructionsId = `sr-${column.id}-instructions-${domIdAffix}`.replace(/ /g, '');\n\n  return (\n    <StyledHeadTh\n      column={column}\n      onClick={handleSort}\n      {...handlers}\n      role=\"columnheader\"\n      {...(isEmptyContent && column.id === firstFocuseableColumnHeaderId\n        ? { 'aria-label': `${noResultsMessage}. ${noResultsSecondaryMessage ? `${noResultsSecondaryMessage}.` : ''}` }\n        : {})}\n      aria-describedby={screenReaderInstructionsId}\n      aria-sort={hasSortingCaret ? (column.isSortedDesc ? 'descending' : 'ascending') : 'none'}\n      data-testid={DATA_TESTID.DATA_TABLE_HEADER}\n      tabIndex={column.isFocuseable === false ? -1 : 0}\n      isDraggingActive={Boolean(draggableProps && draggableProps.active)}\n      shouldShowDnD={shouldShowDnD}\n      innerRef={handleRef}\n      getOwnerProps={getOwnerProps}\n    >\n      <Grid width=\"100%\" cols={hCols}>\n        {shouldShowDnD && DnDHandleComponent}\n        <HeaderCellTitle column={column} draggableProps={draggableProps} textWrap={textWrap} />\n        {rightIcons}\n        {shouldShowResize && (\n          <HeaderResizer column={column} innerRef={resizeHandlerRef} isReachable={reduxHeader?.withTabStops ?? false} />\n        )}\n      </Grid>\n      <span id={screenReaderInstructionsId} style={{ display: 'none' }} aria-hidden=\"false\">\n        {buildScreenReaderInstructions({\n          colSpan,\n          draggable: dragAndDropColumns && column.disableDnD !== true,\n          filterable: hasFilter,\n          sortable: column.canSort ?? false,\n        })}\n      </span>\n    </StyledHeadTh>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/parts/Headers/HeaderCellGroup.js CHANGED Viewed

@@ -34,18 +34,18 @@ __export(HeaderCellGroup_exports, {
 module.exports = __toCommonJS(HeaderCellGroup_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
 var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_system = require("@elliemae/ds-system");
-var import_HeaderCell = require("./HeaderCell.js");
-var import_SortableItemContext = require("../HoC/SortableItemContext.js");
-var import_internal = require("../internal.js");
+var import_react = require("react");
+var import_DSDataTableDefinitions = require("../../DSDataTableDefinitions.js");
+var import_configs = require("../../configs/index.js");
+var import_createInternalAndPropsContext = require("../../configs/useStore/createInternalAndPropsContext.js");
 var import_DropIndicator = require("../DropIndicator.js");
+var import_SortableItemContext = require("../HoC/SortableItemContext.js");
+var import_withDnDSortableColumnContext = require("../HoC/withDnDSortableColumnContext.js");
 var import_SortableHeaderCell = require("../SortableHeaderCell.js");
 var import_EmptyChildrenGroup = require("./EmptyChildrenGroup.js");
-var import_configs = require("../../configs/index.js");
-var import_useStore = require("../../configs/useStore/useStore.js");
-var import_DSDataTableDefinitions = require("../../DSDataTableDefinitions.js");
+var import_HeaderCell = require("./HeaderCell.js");
 const StyledWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_DSDataTableDefinitions.DSDataTableName, slot: import_DSDataTableDefinitions.DSDataTableSlots.HEADER_CELL_WRAPPER })`
   position: relative;
   ${({ shouldDropOneLevel, isDragOverlay }) => shouldDropOneLevel && !isDragOverlay ? `top: 50%; height: 50%;` : ""}
@@ -65,8 +65,8 @@ const HeaderCellGroupComp = ({
   isFirst,
   level = 0
 }) => {
-  const visibleColumns = (0, import_useStore.usePropsStore)((state) => state.visibleColumns);
-  const getOwnerProps = (0, import_useStore.usePropsStore)((store) => store.get);
+  const visibleColumns = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.visibleColumns);
+  const getOwnerProps = (0, import_createInternalAndPropsContext.usePropsStore)((store) => store.get);
   const { draggableProps } = (0, import_react.useContext)(import_SortableItemContext.SortableItemContext);
   const isMultiLevel = visibleColumns.some((col) => !!col.columns);
   const children = header.columns;
@@ -108,5 +108,5 @@ const HeaderCellGroupComp = ({
   );
 };
 const HeaderCellGroup = HeaderCellGroupComp;
-const HeaderCellGroupSortable = (0, import_internal.withDnDSortableColumnContext)(HeaderCellGroupComp);
+const HeaderCellGroupSortable = (0, import_withDnDSortableColumnContext.withDnDSortableColumnContext)(HeaderCellGroupComp);
 //# sourceMappingURL=HeaderCellGroup.js.map

package/dist/cjs/parts/Headers/HeaderCellGroup.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Headers/HeaderCellGroup.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-use-before-define */\n/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { HeaderCell } from './HeaderCell.js';\nimport { SortableItemContext } from '../HoC/SortableItemContext.js';\nimport { withDnDSortableColumnContext } from '../internal.js';\nimport { DropIndicator } from '../DropIndicator.js';\nimport { SortableHeaderCell } from '../SortableHeaderCell.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { EmptyChildrenGroup } from './EmptyChildrenGroup.js';\nimport { DATA_TESTID } from '../../configs/index.js';\nimport { usePropsStore } from '../../configs/useStore/useStore.js';\nimport { DSDataTableName, DSDataTableSlots } from '../../DSDataTableDefinitions.js';\n\nconst StyledWrapper = styled(Grid, { name: DSDataTableName, slot: DSDataTableSlots.HEADER_CELL_WRAPPER })<{\n  shouldDropOneLevel: boolean;\n  isDragOverlay?: boolean;\n  isDragging?: boolean;\n  isFirst?: boolean;\n  isLast?: boolean;\n  gridColumn: string;\n}>`\n  position: relative;\n  ${({ shouldDropOneLevel, isDragOverlay }) => (shouldDropOneLevel && !isDragOverlay ? `top: 50%; height: 50%;` : '')}\n  width: ${(props) => (props.isDragOverlay ? 'fit-content' : '100%')};\n  grid-column: ${(props) => props.gridColumn};\n  background: ${(props) => (props.isDragging ? props.theme.colors.neutral['080'] : 'white')};\n  opacity: ${(props) => (props.isDragging ? 0.8 : 1)};\n  box-shadow: 0 2px 4px 0 ${(props) => (props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent')};\n  border-left: ${({ isFirst }) => (isFirst ? '0px' : '1px')} solid ${(props) => props.theme.colors.neutral['080']};\n  border-right: ${({ isLast }) => (isLast ? '1px' : '0px')} solid ${(props) => props.theme.colors.neutral['080']};\n`;\n\ninterface HeaderCellGroupCompProps {\n  header: DSDataTableT.InternalColumn;\n  isDragOverlay?: boolean;\n  isDraggingParent?: boolean;\n  isLast?: boolean;\n  isFirst?: boolean;\n  level?: number;\n}\n\nconst HeaderCellGroupComp: React.ComponentType<HeaderCellGroupCompProps> = ({\n  header,\n  isDragOverlay,\n  isDraggingParent,\n  isLast,\n  isFirst,\n  level = 0,\n}) => {\n  const visibleColumns = usePropsStore((state) => state.visibleColumns);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const isMultiLevel = visibleColumns.some((col) => !!col.columns);\n\n  const children = header.columns;\n\n  const isDragging = (draggableProps && draggableProps.isDragging) || isDraggingParent;\n  const dropIndicatorPosition =\n    draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;\n\n  const ChildGroup = isDragOverlay ? HeaderCellGroup : HeaderCellGroupSortable;\n\n  const colSpan = children?.length ?? 1;\n  return (\n    <StyledWrapper\n      innerRef={draggableProps ? draggableProps.setNodeRef : undefined}\n      gridColumn={isDragOverlay ? 'auto' : `span ${colSpan}`}\n      isDragOverlay={isDragOverlay}\n      isDragging={isDragging}\n      cols={['auto']}\n      data-testid={isDragOverlay ? DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY : undefined}\n      isFirst={isFirst}\n      isLast={isLast}\n      shouldDropOneLevel={isMultiLevel && level === 0 && !children}\n      getOwnerProps={getOwnerProps}\n    >\n      <HeaderCell column={header} isDragOverlay={isDragOverlay} colSpan={colSpan} />\n      {!!children?.length && !isDragOverlay && (\n        <SortableHeaderCell isGroup items={children} isDragOverlay={isDragOverlay} colId={header.id}>\n          {children.map((h, index) => (\n            <ChildGroup\n              key={h.id}\n              header={h}\n              isDragOverlay={isDragOverlay}\n              isDraggingParent={isDragging}\n              isLast={index === children.length - 1}\n              isFirst={index === 0}\n              level={level + 1}\n            />\n          ))}\n        </SortableHeaderCell>\n      )}\n      {children?.length && isDragOverlay && <EmptyChildrenGroup />}\n      <DropIndicator vertical dropIndicatorPosition={dropIndicatorPosition} isLast={isLast && isDragging} isDropValid />\n    </StyledWrapper>\n  );\n};\n\n// We need to declare this because we MUST avoid the useSortable call in the recursive calls of the function\n\nexport const HeaderCellGroup = HeaderCellGroupComp;\n\nexport const HeaderCellGroupSortable = withDnDSortableColumnContext(HeaderCellGroupComp);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-use-before-define */\n/* eslint-disable complexity */\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport React, { useContext } from 'react';\nimport { DSDataTableName, DSDataTableSlots } from '../../DSDataTableDefinitions.js';\nimport { DATA_TESTID } from '../../configs/index.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { DropIndicator } from '../DropIndicator.js';\nimport { SortableItemContext } from '../HoC/SortableItemContext.js';\nimport { withDnDSortableColumnContext } from '../HoC/withDnDSortableColumnContext.js';\nimport { SortableHeaderCell } from '../SortableHeaderCell.js';\nimport { EmptyChildrenGroup } from './EmptyChildrenGroup.js';\nimport { HeaderCell } from './HeaderCell.js';\n\nconst StyledWrapper = styled(Grid, { name: DSDataTableName, slot: DSDataTableSlots.HEADER_CELL_WRAPPER })<{\n  shouldDropOneLevel: boolean;\n  isDragOverlay?: boolean;\n  isDragging?: boolean;\n  isFirst?: boolean;\n  isLast?: boolean;\n  gridColumn: string;\n}>`\n  position: relative;\n  ${({ shouldDropOneLevel, isDragOverlay }) => (shouldDropOneLevel && !isDragOverlay ? `top: 50%; height: 50%;` : '')}\n  width: ${(props) => (props.isDragOverlay ? 'fit-content' : '100%')};\n  grid-column: ${(props) => props.gridColumn};\n  background: ${(props) => (props.isDragging ? props.theme.colors.neutral['080'] : 'white')};\n  opacity: ${(props) => (props.isDragging ? 0.8 : 1)};\n  box-shadow: 0 2px 4px 0 ${(props) => (props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent')};\n  border-left: ${({ isFirst }) => (isFirst ? '0px' : '1px')} solid ${(props) => props.theme.colors.neutral['080']};\n  border-right: ${({ isLast }) => (isLast ? '1px' : '0px')} solid ${(props) => props.theme.colors.neutral['080']};\n`;\n\ninterface HeaderCellGroupCompProps {\n  header: DSDataTableT.InternalColumn;\n  isDragOverlay?: boolean;\n  isDraggingParent?: boolean;\n  isLast?: boolean;\n  isFirst?: boolean;\n  level?: number;\n}\n\nconst HeaderCellGroupComp: React.ComponentType<HeaderCellGroupCompProps> = ({\n  header,\n  isDragOverlay,\n  isDraggingParent,\n  isLast,\n  isFirst,\n  level = 0,\n}) => {\n  const visibleColumns = usePropsStore((state) => state.visibleColumns);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const isMultiLevel = visibleColumns.some((col) => !!col.columns);\n\n  const children = header.columns;\n\n  const isDragging = (draggableProps && draggableProps.isDragging) || isDraggingParent;\n  const dropIndicatorPosition =\n    draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;\n\n  const ChildGroup = isDragOverlay ? HeaderCellGroup : HeaderCellGroupSortable;\n\n  const colSpan = children?.length ?? 1;\n  return (\n    <StyledWrapper\n      innerRef={draggableProps ? draggableProps.setNodeRef : undefined}\n      gridColumn={isDragOverlay ? 'auto' : `span ${colSpan}`}\n      isDragOverlay={isDragOverlay}\n      isDragging={isDragging}\n      cols={['auto']}\n      data-testid={isDragOverlay ? DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY : undefined}\n      isFirst={isFirst}\n      isLast={isLast}\n      shouldDropOneLevel={isMultiLevel && level === 0 && !children}\n      getOwnerProps={getOwnerProps}\n    >\n      <HeaderCell column={header} isDragOverlay={isDragOverlay} colSpan={colSpan} />\n      {!!children?.length && !isDragOverlay && (\n        <SortableHeaderCell isGroup items={children} isDragOverlay={isDragOverlay} colId={header.id}>\n          {children.map((h, index) => (\n            <ChildGroup\n              key={h.id}\n              header={h}\n              isDragOverlay={isDragOverlay}\n              isDraggingParent={isDragging}\n              isLast={index === children.length - 1}\n              isFirst={index === 0}\n              level={level + 1}\n            />\n          ))}\n        </SortableHeaderCell>\n      )}\n      {children?.length && isDragOverlay && <EmptyChildrenGroup />}\n      <DropIndicator vertical dropIndicatorPosition={dropIndicatorPosition} isLast={isLast && isDragging} isDropValid />\n    </StyledWrapper>\n  );\n};\n\n// We need to declare this because we MUST avoid the useSortable call in the recursive calls of the function\n\nexport const HeaderCellGroup = HeaderCellGroupComp;\n\nexport const HeaderCellGroupSortable = withDnDSortableColumnContext(HeaderCellGroupComp);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/parts/Headers/HeaderResizer.js CHANGED Viewed

@@ -36,14 +36,14 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_styled = require("../../styled.js");
 var import_useHeaderResizer = require("./useHeaderResizer.js");
-var import_useStore = require("../../configs/useStore/useStore.js");
+var import_createInternalAndPropsContext = require("../../configs/useStore/createInternalAndPropsContext.js");
 const stopPropagation = (e) => e.stopPropagation();
 const HeaderResizer = ({ column, innerRef, isReachable }) => {
   const { isResizing, onResizeStart, onResizeEnd, onResizeHandler, handleKeyboardResize } = (0, import_useHeaderResizer.useHeaderResizer)({
     columnId: column.id,
     innerRef
   });
-  const getOwnerProps = (0, import_useStore.usePropsStore)((store) => store.get);
+  const getOwnerProps = (0, import_createInternalAndPropsContext.usePropsStore)((store) => store.get);
   (0, import_react.useEffect)(() => {
     const addEvents = () => {
       document.addEventListener("mousemove", onResizeHandler);

package/dist/cjs/parts/Headers/HeaderResizer.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Headers/HeaderResizer.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useEffect } from 'react';\nimport { StyledResizer } from '../../styled.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useHeaderResizer } from './useHeaderResizer.js';\nimport { usePropsStore } from '../../configs/useStore/useStore.js';\n\nconst stopPropagation = (e: React.MouseEvent) => e.stopPropagation();\n\nexport const HeaderResizer: React.ComponentType<{\n  column: DSDataTableT.InternalColumn;\n  innerRef: React.MutableRefObject<HTMLInputElement | null>;\n  isReachable: boolean;\n}> = ({ column, innerRef, isReachable }) => {\n  const { isResizing, onResizeStart, onResizeEnd, onResizeHandler, handleKeyboardResize } = useHeaderResizer({\n    columnId: column.id,\n    innerRef,\n  });\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  // This setups the event listeners for the resize (only for mouse)\n  // It reacts to the isResizing state change\n  useEffect(() => {\n    const addEvents = () => {\n      document.addEventListener('mousemove', onResizeHandler);\n      document.addEventListener('touchmove', onResizeHandler);\n      document.addEventListener('mouseup', onResizeEnd);\n      document.addEventListener('touchend', onResizeEnd);\n    };\n    const removeEvents = () => {\n      document.removeEventListener('mousemove', onResizeHandler);\n      document.removeEventListener('touchmove', onResizeHandler);\n      document.removeEventListener('mouseup', onResizeEnd);\n      document.removeEventListener('touchend', onResizeEnd);\n    };\n\n    if (isResizing) addEvents();\n    else removeEvents();\n\n    // just in case the component is unmounted\n    return removeEvents;\n  }, [isResizing, onResizeHandler, onResizeEnd]);\n\n  return (\n    <StyledResizer\n      type=\"range\"\n      aria-label=\"Resize column\"\n      tabIndex={isReachable ? 0 : -1}\n      innerRef={innerRef}\n      draggable={false}\n      onMouseDown={onResizeStart}\n      onTouchStart={onResizeStart}\n      onMouseUp={onResizeEnd}\n      onTouchEnd={onResizeEnd}\n      onClick={stopPropagation}\n      onKeyDown={handleKeyboardResize}\n      getOwnerProps={getOwnerProps}\n    />\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2CnB;AA3CJ,mBAAiC;AACjC,oBAA8B;AAE9B,8BAAiC;AACjC,sBAA8B;AAE9B,MAAM,kBAAkB,CAAC,MAAwB,EAAE,gBAAgB;AAE5D,MAAM,gBAIR,CAAC,EAAE,QAAQ,UAAU,YAAY,MAAM;AAC1C,QAAM,EAAE,YAAY,eAAe,aAAa,iBAAiB,qBAAqB,QAAI,0CAAiB;AAAA,IACzG,UAAU,OAAO;AAAA,IACjB;AAAA,EACF,CAAC;AACD,QAAM,oBAAgB,+BAAc,CAAC,UAAU,MAAM,GAAG;AAIxD,8BAAU,MAAM;AACd,UAAM,YAAY,MAAM;AACtB,eAAS,iBAAiB,aAAa,eAAe;AACtD,eAAS,iBAAiB,aAAa,eAAe;AACtD,eAAS,iBAAiB,WAAW,WAAW;AAChD,eAAS,iBAAiB,YAAY,WAAW;AAAA,IACnD;AACA,UAAM,eAAe,MAAM;AACzB,eAAS,oBAAoB,aAAa,eAAe;AACzD,eAAS,oBAAoB,aAAa,eAAe;AACzD,eAAS,oBAAoB,WAAW,WAAW;AACnD,eAAS,oBAAoB,YAAY,WAAW;AAAA,IACtD;AAEA,QAAI,WAAY,WAAU;AAAA,QACrB,cAAa;AAGlB,WAAO;AAAA,EACT,GAAG,CAAC,YAAY,iBAAiB,WAAW,CAAC;AAE7C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAW;AAAA,MACX,UAAU,cAAc,IAAI;AAAA,MAC5B;AAAA,MACA,WAAW;AAAA,MACX,aAAa;AAAA,MACb,cAAc;AAAA,MACd,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,WAAW;AAAA,MACX;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import React, { useEffect } from 'react';\nimport { StyledResizer } from '../../styled.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useHeaderResizer } from './useHeaderResizer.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\n\nconst stopPropagation = (e: React.MouseEvent) => e.stopPropagation();\n\nexport const HeaderResizer: React.ComponentType<{\n  column: DSDataTableT.InternalColumn;\n  innerRef: React.MutableRefObject<HTMLInputElement | null>;\n  isReachable: boolean;\n}> = ({ column, innerRef, isReachable }) => {\n  const { isResizing, onResizeStart, onResizeEnd, onResizeHandler, handleKeyboardResize } = useHeaderResizer({\n    columnId: column.id,\n    innerRef,\n  });\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  // This setups the event listeners for the resize (only for mouse)\n  // It reacts to the isResizing state change\n  useEffect(() => {\n    const addEvents = () => {\n      document.addEventListener('mousemove', onResizeHandler);\n      document.addEventListener('touchmove', onResizeHandler);\n      document.addEventListener('mouseup', onResizeEnd);\n      document.addEventListener('touchend', onResizeEnd);\n    };\n    const removeEvents = () => {\n      document.removeEventListener('mousemove', onResizeHandler);\n      document.removeEventListener('touchmove', onResizeHandler);\n      document.removeEventListener('mouseup', onResizeEnd);\n      document.removeEventListener('touchend', onResizeEnd);\n    };\n\n    if (isResizing) addEvents();\n    else removeEvents();\n\n    // just in case the component is unmounted\n    return removeEvents;\n  }, [isResizing, onResizeHandler, onResizeEnd]);\n\n  return (\n    <StyledResizer\n      type=\"range\"\n      aria-label=\"Resize column\"\n      tabIndex={isReachable ? 0 : -1}\n      innerRef={innerRef}\n      draggable={false}\n      onMouseDown={onResizeStart}\n      onTouchStart={onResizeStart}\n      onMouseUp={onResizeEnd}\n      onTouchEnd={onResizeEnd}\n      onClick={stopPropagation}\n      onKeyDown={handleKeyboardResize}\n      getOwnerProps={getOwnerProps}\n    />\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2CnB;AA3CJ,mBAAiC;AACjC,oBAA8B;AAE9B,8BAAiC;AACjC,2CAA8B;AAE9B,MAAM,kBAAkB,CAAC,MAAwB,EAAE,gBAAgB;AAE5D,MAAM,gBAIR,CAAC,EAAE,QAAQ,UAAU,YAAY,MAAM;AAC1C,QAAM,EAAE,YAAY,eAAe,aAAa,iBAAiB,qBAAqB,QAAI,0CAAiB;AAAA,IACzG,UAAU,OAAO;AAAA,IACjB;AAAA,EACF,CAAC;AACD,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,GAAG;AAIxD,8BAAU,MAAM;AACd,UAAM,YAAY,MAAM;AACtB,eAAS,iBAAiB,aAAa,eAAe;AACtD,eAAS,iBAAiB,aAAa,eAAe;AACtD,eAAS,iBAAiB,WAAW,WAAW;AAChD,eAAS,iBAAiB,YAAY,WAAW;AAAA,IACnD;AACA,UAAM,eAAe,MAAM;AACzB,eAAS,oBAAoB,aAAa,eAAe;AACzD,eAAS,oBAAoB,aAAa,eAAe;AACzD,eAAS,oBAAoB,WAAW,WAAW;AACnD,eAAS,oBAAoB,YAAY,WAAW;AAAA,IACtD;AAEA,QAAI,WAAY,WAAU;AAAA,QACrB,cAAa;AAGlB,WAAO;AAAA,EACT,GAAG,CAAC,YAAY,iBAAiB,WAAW,CAAC;AAE7C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAW;AAAA,MACX,UAAU,cAAc,IAAI;AAAA,MAC5B;AAAA,MACA,WAAW;AAAA,MACX,aAAa;AAAA,MACb,cAAc;AAAA,MACd,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,WAAW;AAAA,MACX;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/dist/cjs/parts/Headers/index.js CHANGED Viewed

@@ -39,15 +39,15 @@ var import_withConditionalDnDColumnContext = require("../HoC/withConditionalDnDC
 var import_HeaderCellGroup = require("./HeaderCellGroup.js");
 var import_SortableHeaderCell = require("../SortableHeaderCell.js");
 var import_gridLayoutHelpers = require("../../helpers/gridLayoutHelpers.js");
-var import_useStore = require("../../configs/useStore/useStore.js");
+var import_createInternalAndPropsContext = require("../../configs/useStore/createInternalAndPropsContext.js");
 const HeadersComp = () => {
-  const isExpandable = (0, import_useStore.usePropsStore)((state) => state.isExpandable);
-  const isSkeleton = (0, import_useStore.usePropsStore)((state) => state.isSkeleton);
-  const colsLayoutStyle = (0, import_useStore.usePropsStore)((state) => state.colsLayoutStyle);
-  const visibleColumns = (0, import_useStore.usePropsStore)((state) => state.visibleColumns);
-  const columnHeaderRef = (0, import_useStore.usePropsStore)((state) => state.columnHeaderRef);
-  const virtualListRef = (0, import_useStore.usePropsStore)((state) => state.virtualListRef);
-  const getOwnerProps = (0, import_useStore.usePropsStore)((store) => store.get);
+  const isExpandable = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.isExpandable);
+  const isSkeleton = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.isSkeleton);
+  const colsLayoutStyle = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.colsLayoutStyle);
+  const visibleColumns = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.visibleColumns);
+  const columnHeaderRef = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.columnHeaderRef);
+  const virtualListRef = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.virtualListRef);
+  const getOwnerProps = (0, import_createInternalAndPropsContext.usePropsStore)((store) => store.get);
   (0, import_react.useEffect)(() => {
     (0, import_gridLayoutHelpers.setSubColumnsGridLayout)(virtualListRef.current, visibleColumns, true);
   }, [virtualListRef, visibleColumns]);

package/dist/cjs/parts/Headers/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Headers/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useEffect } from 'react';\nimport { StyledHeadWrapper, StyledHeadTr } from '../../styled.js';\nimport { withConditionalDnDColumnContext } from '../HoC/withConditionalDnDColumnContext.js';\nimport { HeaderCellGroupSortable } from './HeaderCellGroup.js';\nimport { SortableHeaderCell } from '../SortableHeaderCell.js';\nimport { setSubColumnsGridLayout } from '../../helpers/gridLayoutHelpers.js';\nimport { usePropsStore } from '../../configs/useStore/useStore.js';\n\nconst HeadersComp = () => {\n  const isExpandable = usePropsStore((state) => state.isExpandable);\n  const isSkeleton = usePropsStore((state) => state.isSkeleton);\n  const colsLayoutStyle = usePropsStore((state) => state.colsLayoutStyle);\n  const visibleColumns = usePropsStore((state) => state.visibleColumns);\n  const columnHeaderRef = usePropsStore((state) => state.columnHeaderRef);\n  const virtualListRef = usePropsStore((state) => state.virtualListRef);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  useEffect(() => {\n    // TODO: remove this, for further info see the comment on setSubColumnsGridLayout\n    setSubColumnsGridLayout(virtualListRef.current, visibleColumns, true);\n  }, [virtualListRef, visibleColumns]);\n\n  if (visibleColumns.length === 0 && isSkeleton) {\n    return null;\n  }\n  return (\n    <StyledHeadWrapper colsLayoutStyle={colsLayoutStyle} innerRef={columnHeaderRef} getOwnerProps={getOwnerProps}>\n      <SortableHeaderCell items={visibleColumns}>\n        <StyledHeadTr\n          role=\"row\"\n          colsLayoutStyle={colsLayoutStyle}\n          isExpandable={isExpandable}\n          getOwnerProps={getOwnerProps}\n        >\n          {visibleColumns.map((h, index) => (\n            <HeaderCellGroupSortable header={h} key={h.id} isLast={index === visibleColumns.length - 1} />\n          ))}\n        </StyledHeadTr>\n      </SortableHeaderCell>\n    </StyledHeadWrapper>\n  );\n};\n\nexport const Headers = withConditionalDnDColumnContext(HeadersComp);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmCX;AAnCZ,mBAAiC;AACjC,oBAAgD;AAChD,6CAAgD;AAChD,6BAAwC;AACxC,gCAAmC;AACnC,+BAAwC;AACxC,sBAA8B;AAE9B,MAAM,cAAc,MAAM;AACxB,QAAM,mBAAe,+BAAc,CAAC,UAAU,MAAM,YAAY;AAChE,QAAM,iBAAa,+BAAc,CAAC,UAAU,MAAM,UAAU;AAC5D,QAAM,sBAAkB,+BAAc,CAAC,UAAU,MAAM,eAAe;AACtE,QAAM,qBAAiB,+BAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,sBAAkB,+BAAc,CAAC,UAAU,MAAM,eAAe;AACtE,QAAM,qBAAiB,+BAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,oBAAgB,+BAAc,CAAC,UAAU,MAAM,GAAG;AAExD,8BAAU,MAAM;AAEd,0DAAwB,eAAe,SAAS,gBAAgB,IAAI;AAAA,EACtE,GAAG,CAAC,gBAAgB,cAAc,CAAC;AAEnC,MAAI,eAAe,WAAW,KAAK,YAAY;AAC7C,WAAO;AAAA,EACT;AACA,SACE,4CAAC,mCAAkB,iBAAkC,UAAU,iBAAiB,eAC9E,sDAAC,gDAAmB,OAAO,gBACzB;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MAEC,yBAAe,IAAI,CAAC,GAAG,UACtB,4CAAC,kDAAwB,QAAQ,GAAc,QAAQ,UAAU,eAAe,SAAS,KAAhD,EAAE,EAAiD,CAC7F;AAAA;AAAA,EACH,GACF,GACF;AAEJ;AAEO,MAAM,cAAU,wEAAgC,WAAW;",
+  "sourcesContent": ["import React, { useEffect } from 'react';\nimport { StyledHeadWrapper, StyledHeadTr } from '../../styled.js';\nimport { withConditionalDnDColumnContext } from '../HoC/withConditionalDnDColumnContext.js';\nimport { HeaderCellGroupSortable } from './HeaderCellGroup.js';\nimport { SortableHeaderCell } from '../SortableHeaderCell.js';\nimport { setSubColumnsGridLayout } from '../../helpers/gridLayoutHelpers.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\n\nconst HeadersComp = () => {\n  const isExpandable = usePropsStore((state) => state.isExpandable);\n  const isSkeleton = usePropsStore((state) => state.isSkeleton);\n  const colsLayoutStyle = usePropsStore((state) => state.colsLayoutStyle);\n  const visibleColumns = usePropsStore((state) => state.visibleColumns);\n  const columnHeaderRef = usePropsStore((state) => state.columnHeaderRef);\n  const virtualListRef = usePropsStore((state) => state.virtualListRef);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  useEffect(() => {\n    // TODO: remove this, for further info see the comment on setSubColumnsGridLayout\n    setSubColumnsGridLayout(virtualListRef.current, visibleColumns, true);\n  }, [virtualListRef, visibleColumns]);\n\n  if (visibleColumns.length === 0 && isSkeleton) {\n    return null;\n  }\n  return (\n    <StyledHeadWrapper colsLayoutStyle={colsLayoutStyle} innerRef={columnHeaderRef} getOwnerProps={getOwnerProps}>\n      <SortableHeaderCell items={visibleColumns}>\n        <StyledHeadTr\n          role=\"row\"\n          colsLayoutStyle={colsLayoutStyle}\n          isExpandable={isExpandable}\n          getOwnerProps={getOwnerProps}\n        >\n          {visibleColumns.map((h, index) => (\n            <HeaderCellGroupSortable header={h} key={h.id} isLast={index === visibleColumns.length - 1} />\n          ))}\n        </StyledHeadTr>\n      </SortableHeaderCell>\n    </StyledHeadWrapper>\n  );\n};\n\nexport const Headers = withConditionalDnDColumnContext(HeadersComp);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmCX;AAnCZ,mBAAiC;AACjC,oBAAgD;AAChD,6CAAgD;AAChD,6BAAwC;AACxC,gCAAmC;AACnC,+BAAwC;AACxC,2CAA8B;AAE9B,MAAM,cAAc,MAAM;AACxB,QAAM,mBAAe,oDAAc,CAAC,UAAU,MAAM,YAAY;AAChE,QAAM,iBAAa,oDAAc,CAAC,UAAU,MAAM,UAAU;AAC5D,QAAM,sBAAkB,oDAAc,CAAC,UAAU,MAAM,eAAe;AACtE,QAAM,qBAAiB,oDAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,sBAAkB,oDAAc,CAAC,UAAU,MAAM,eAAe;AACtE,QAAM,qBAAiB,oDAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,GAAG;AAExD,8BAAU,MAAM;AAEd,0DAAwB,eAAe,SAAS,gBAAgB,IAAI;AAAA,EACtE,GAAG,CAAC,gBAAgB,cAAc,CAAC;AAEnC,MAAI,eAAe,WAAW,KAAK,YAAY;AAC7C,WAAO;AAAA,EACT;AACA,SACE,4CAAC,mCAAkB,iBAAkC,UAAU,iBAAiB,eAC9E,sDAAC,gDAAmB,OAAO,gBACzB;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MAEC,yBAAe,IAAI,CAAC,GAAG,UACtB,4CAAC,kDAAwB,QAAQ,GAAc,QAAQ,UAAU,eAAe,SAAS,KAAhD,EAAE,EAAiD,CAC7F;AAAA;AAAA,EACH,GACF,GACF;AAEJ;AAEO,MAAM,cAAU,wEAAgC,WAAW;",
   "names": []
 }

package/dist/cjs/parts/Headers/useHeaderCellConfig.js CHANGED Viewed

@@ -34,11 +34,11 @@ module.exports = __toCommonJS(useHeaderCellConfig_exports);
 var React = __toESM(require("react"));
 var import_react = require("react");
 var import_SortableItemContext = require("../HoC/SortableItemContext.js");
-var import_useStore = require("../../configs/useStore/useStore.js");
+var import_createInternalAndPropsContext = require("../../configs/useStore/createInternalAndPropsContext.js");
 const useHeaderCellConfig = ({ column, isDragOverlay = false }) => {
-  const dragAndDropColumns = (0, import_useStore.usePropsStore)((state) => state.dragAndDropColumns);
-  const isResizeable = (0, import_useStore.usePropsStore)((state) => state.isResizeable);
-  const reduxHeaders = (0, import_useStore.useInternalStore)((state) => state.reduxHeaders);
+  const dragAndDropColumns = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.dragAndDropColumns);
+  const isResizeable = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.isResizeable);
+  const reduxHeaders = (0, import_createInternalAndPropsContext.useInternalStore)((state) => state.reduxHeaders);
   const { draggableProps } = (0, import_react.useContext)(import_SortableItemContext.SortableItemContext);
   const reduxHeader = (0, import_react.useMemo)(() => reduxHeaders[column.id], [reduxHeaders, column]);
   const hasFilter = !!(column.filter || column.Filter);

package/dist/cjs/parts/Headers/useHeaderCellConfig.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Headers/useHeaderCellConfig.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\nimport { useContext, useMemo } from 'react';\nimport { SortableItemContext } from '../HoC/SortableItemContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/useStore.js';\n\ntype UseHeaderCellConfigType = (args: { column: DSDataTableT.InternalColumn; isDragOverlay?: boolean }) => {\n  hasFilter: boolean;\n  hasDnD: boolean;\n  hasSortingCaret: boolean;\n  hasRightIcons: boolean;\n  isDragging: boolean;\n  shouldShowDnD: boolean;\n  shouldShowResize: boolean;\n  hCols: string[];\n};\n\nexport const useHeaderCellConfig: UseHeaderCellConfigType = ({ column, isDragOverlay = false }) => {\n  const dragAndDropColumns = usePropsStore((state) => state.dragAndDropColumns);\n  const isResizeable = usePropsStore((state) => state.isResizeable);\n  const reduxHeaders = useInternalStore((state) => state.reduxHeaders);\n\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const reduxHeader = useMemo(() => reduxHeaders[column.id], [reduxHeaders, column]);\n\n  const hasFilter = !!(column.filter || column.Filter);\n\n  const hasDnD = dragAndDropColumns && !column.disableDnD;\n\n  const hasSortingCaret = Boolean(column.canSort);\n\n  const hasRightIcons = !isDragOverlay && (hasSortingCaret || hasFilter);\n\n  const isDragging = draggableProps && draggableProps.isDragging;\n\n  const shouldShowDnD =\n    hasDnD &&\n    ((reduxHeader?.showDnDHandle && draggableProps && !draggableProps.active) ||\n      (draggableProps && draggableProps.isDragging) ||\n      isDragOverlay);\n\n  const hasResize = isResizeable && column.canResize !== false && !column.columns;\n\n  const shouldShowResize = hasResize && !isDragOverlay && !isDragging;\n\n  // Column definition\n  const hCols = ['auto'];\n  if (hasRightIcons) hCols.push('min-content');\n  if (shouldShowDnD) hCols.unshift('min-content');\n\n  return {\n    hasFilter,\n    hasDnD,\n    hasSortingCaret,\n    hasRightIcons,\n    isDragging,\n    hCols,\n    shouldShowDnD,\n    shouldShowResize,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAoC;AACpC,iCAAoC;AAEpC,sBAAgD;AAazC,MAAM,sBAA+C,CAAC,EAAE,QAAQ,gBAAgB,MAAM,MAAM;AACjG,QAAM,yBAAqB,+BAAc,CAAC,UAAU,MAAM,kBAAkB;AAC5E,QAAM,mBAAe,+BAAc,CAAC,UAAU,MAAM,YAAY;AAChE,QAAM,mBAAe,kCAAiB,CAAC,UAAU,MAAM,YAAY;AAEnE,QAAM,EAAE,eAAe,QAAI,yBAAW,8CAAmB;AAEzD,QAAM,kBAAc,sBAAQ,MAAM,aAAa,OAAO,EAAE,GAAG,CAAC,cAAc,MAAM,CAAC;AAEjF,QAAM,YAAY,CAAC,EAAE,OAAO,UAAU,OAAO;AAE7C,QAAM,SAAS,sBAAsB,CAAC,OAAO;AAE7C,QAAM,kBAAkB,QAAQ,OAAO,OAAO;AAE9C,QAAM,gBAAgB,CAAC,kBAAkB,mBAAmB;AAE5D,QAAM,aAAa,kBAAkB,eAAe;AAEpD,QAAM,gBACJ,WACE,aAAa,iBAAiB,kBAAkB,CAAC,eAAe,UAC/D,kBAAkB,eAAe,cAClC;AAEJ,QAAM,YAAY,gBAAgB,OAAO,cAAc,SAAS,CAAC,OAAO;AAExE,QAAM,mBAAmB,aAAa,CAAC,iBAAiB,CAAC;AAGzD,QAAM,QAAQ,CAAC,MAAM;AACrB,MAAI,cAAe,OAAM,KAAK,aAAa;AAC3C,MAAI,cAAe,OAAM,QAAQ,aAAa;AAE9C,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport { useContext, useMemo } from 'react';\nimport { SortableItemContext } from '../HoC/SortableItemContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\n\ntype UseHeaderCellConfigType = (args: { column: DSDataTableT.InternalColumn; isDragOverlay?: boolean }) => {\n  hasFilter: boolean;\n  hasDnD: boolean;\n  hasSortingCaret: boolean;\n  hasRightIcons: boolean;\n  isDragging: boolean;\n  shouldShowDnD: boolean;\n  shouldShowResize: boolean;\n  hCols: string[];\n};\n\nexport const useHeaderCellConfig: UseHeaderCellConfigType = ({ column, isDragOverlay = false }) => {\n  const dragAndDropColumns = usePropsStore((state) => state.dragAndDropColumns);\n  const isResizeable = usePropsStore((state) => state.isResizeable);\n  const reduxHeaders = useInternalStore((state) => state.reduxHeaders);\n\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const reduxHeader = useMemo(() => reduxHeaders[column.id], [reduxHeaders, column]);\n\n  const hasFilter = !!(column.filter || column.Filter);\n\n  const hasDnD = dragAndDropColumns && !column.disableDnD;\n\n  const hasSortingCaret = Boolean(column.canSort);\n\n  const hasRightIcons = !isDragOverlay && (hasSortingCaret || hasFilter);\n\n  const isDragging = draggableProps && draggableProps.isDragging;\n\n  const shouldShowDnD =\n    hasDnD &&\n    ((reduxHeader?.showDnDHandle && draggableProps && !draggableProps.active) ||\n      (draggableProps && draggableProps.isDragging) ||\n      isDragOverlay);\n\n  const hasResize = isResizeable && column.canResize !== false && !column.columns;\n\n  const shouldShowResize = hasResize && !isDragOverlay && !isDragging;\n\n  // Column definition\n  const hCols = ['auto'];\n  if (hasRightIcons) hCols.push('min-content');\n  if (shouldShowDnD) hCols.unshift('min-content');\n\n  return {\n    hasFilter,\n    hasDnD,\n    hasSortingCaret,\n    hasRightIcons,\n    isDragging,\n    hCols,\n    shouldShowDnD,\n    shouldShowResize,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAoC;AACpC,iCAAoC;AAEpC,2CAAgD;AAazC,MAAM,sBAA+C,CAAC,EAAE,QAAQ,gBAAgB,MAAM,MAAM;AACjG,QAAM,yBAAqB,oDAAc,CAAC,UAAU,MAAM,kBAAkB;AAC5E,QAAM,mBAAe,oDAAc,CAAC,UAAU,MAAM,YAAY;AAChE,QAAM,mBAAe,uDAAiB,CAAC,UAAU,MAAM,YAAY;AAEnE,QAAM,EAAE,eAAe,QAAI,yBAAW,8CAAmB;AAEzD,QAAM,kBAAc,sBAAQ,MAAM,aAAa,OAAO,EAAE,GAAG,CAAC,cAAc,MAAM,CAAC;AAEjF,QAAM,YAAY,CAAC,EAAE,OAAO,UAAU,OAAO;AAE7C,QAAM,SAAS,sBAAsB,CAAC,OAAO;AAE7C,QAAM,kBAAkB,QAAQ,OAAO,OAAO;AAE9C,QAAM,gBAAgB,CAAC,kBAAkB,mBAAmB;AAE5D,QAAM,aAAa,kBAAkB,eAAe;AAEpD,QAAM,gBACJ,WACE,aAAa,iBAAiB,kBAAkB,CAAC,eAAe,UAC/D,kBAAkB,eAAe,cAClC;AAEJ,QAAM,YAAY,gBAAgB,OAAO,cAAc,SAAS,CAAC,OAAO;AAExE,QAAM,mBAAmB,aAAa,CAAC,iBAAiB,CAAC;AAGzD,QAAM,QAAQ,CAAC,MAAM;AACrB,MAAI,cAAe,OAAM,KAAK,aAAa;AAC3C,MAAI,cAAe,OAAM,QAAQ,aAAa;AAE9C,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/cjs/parts/Headers/useHeaderCellHandlers.js CHANGED Viewed

@@ -33,7 +33,7 @@ __export(useHeaderCellHandlers_exports, {
 module.exports = __toCommonJS(useHeaderCellHandlers_exports);
 var React = __toESM(require("react"));
 var import_react = require("react");
-var import_useStore = require("../../configs/useStore/useStore.js");
+var import_createInternalAndPropsContext = require("../../configs/useStore/createInternalAndPropsContext.js");
 const buildNextHeader = (reduxHeader, value, hasFilter, hasDnD, hasSortingCaret, withTabStops = false) => ({
   hideFilterMenu: true,
   // Do this to overwrite it if it exists
@@ -69,12 +69,12 @@ const useHeaderCellHandlers = ({
   isDragOverlay,
   draggableProps
 }) => {
-  const onColumnSortChange = (0, import_useStore.usePropsStore)((state) => state.onColumnSortChange);
-  const onColumnSort = (0, import_useStore.usePropsStore)((state) => state.onColumnSort);
-  const visibleColumns = (0, import_useStore.usePropsStore)((state) => state.visibleColumns);
-  const setFocusedRowId = (0, import_useStore.useInternalStore)((state) => state.setFocusedRowId);
-  const patchHeader = (0, import_useStore.useInternalStore)((state) => state.patchHeader);
-  const reduxHeaders = (0, import_useStore.useInternalStore)((state) => state.reduxHeaders);
+  const onColumnSortChange = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.onColumnSortChange);
+  const onColumnSort = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.onColumnSort);
+  const visibleColumns = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.visibleColumns);
+  const setFocusedRowId = (0, import_createInternalAndPropsContext.useInternalStore)((state) => state.setFocusedRowId);
+  const patchHeader = (0, import_createInternalAndPropsContext.useInternalStore)((state) => state.patchHeader);
+  const reduxHeaders = (0, import_createInternalAndPropsContext.useInternalStore)((state) => state.reduxHeaders);
   const reduxHeader = (0, import_react.useMemo)(() => reduxHeaders[column.id], [reduxHeaders, column]);
   const headerRef = column.ref;
   const onMouseEnter = (0, import_react.useCallback)(() => {

package/dist/cjs/parts/Headers/useHeaderCellHandlers.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Headers/useHeaderCellHandlers.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-params */\nimport { useCallback, useMemo } from 'react';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/useStore.js';\ntype UseHeaderCellHandlersType = (args: {\n  hasFilter: boolean;\n  column: DSDataTableT.InternalColumn;\n  hasDnD: boolean;\n  dragHandleRef: React.MutableRefObject<HTMLDivElement | null>;\n  sortRef: React.MutableRefObject<HTMLButtonElement | null>;\n  filterIconRef: React.MutableRefObject<HTMLButtonElement | null>;\n  resizeHandlerRef: React.MutableRefObject<HTMLInputElement | null>;\n  hasSortingCaret: boolean;\n  isDragOverlay?: boolean;\n  draggableProps: DSDataTableT.DraggablePropsT;\n}) => {\n  onMouseEnter: React.MouseEventHandler;\n  onMouseLeave: React.MouseEventHandler;\n  handleSort: React.MouseEventHandler;\n  onKeyDown: React.KeyboardEventHandler;\n  onFocus: React.FocusEventHandler;\n  onBlur: React.FocusEventHandler;\n};\n\n// TODO: reduxHeader was a mistake from the start.\n// Please remove this and make this logic more simple and\n// easy to follow.\nconst buildNextHeader = (\n  reduxHeader: DSDataTableT.ReduxHeader,\n  value: boolean,\n  hasFilter: boolean,\n  hasDnD: boolean,\n  hasSortingCaret: boolean,\n  withTabStops = false,\n) => ({\n  hideFilterMenu: true, // Do this to overwrite it if it exists\n  ...reduxHeader,\n  hideFilterButton: !(hasFilter && value),\n  showDnDHandle: hasDnD && value,\n  showSortCaret: hasSortingCaret,\n  withTabStops,\n});\n\nconst getNextSortedVisibleColumns = (\n  visibleColumns: DSDataTableT.InternalColumn[],\n  columnId: string,\n  isSortedDesc: boolean,\n) => {\n  const doit = (columns: DSDataTableT.InternalColumn[]) =>\n    columns.map((col) => {\n      const newCol = { ...col };\n      delete newCol.isSortedDesc;\n      if (col.id === columnId) {\n        newCol.isSortedDesc = isSortedDesc;\n      }\n      if (newCol.columns) {\n        newCol.columns = doit(newCol.columns);\n      }\n      return newCol;\n    });\n  return doit(visibleColumns);\n};\n\nexport const useHeaderCellHandlers: UseHeaderCellHandlersType = ({\n  hasFilter,\n  column,\n  hasDnD,\n  dragHandleRef,\n  filterIconRef,\n  sortRef,\n  resizeHandlerRef,\n  hasSortingCaret,\n  isDragOverlay,\n  draggableProps,\n}) => {\n  const onColumnSortChange = usePropsStore((state) => state.onColumnSortChange);\n  const onColumnSort = usePropsStore((state) => state.onColumnSort);\n  const visibleColumns = usePropsStore((state) => state.visibleColumns);\n  const setFocusedRowId = useInternalStore((state) => state.setFocusedRowId);\n  const patchHeader = useInternalStore((state) => state.patchHeader);\n  const reduxHeaders = useInternalStore((state) => state.reduxHeaders);\n\n  const reduxHeader = useMemo(() => reduxHeaders[column.id], [reduxHeaders, column]);\n\n  const headerRef = column.ref;\n\n  const onMouseEnter: React.MouseEventHandler = useCallback(() => {\n    patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD, hasSortingCaret));\n  }, [column.id, hasDnD, hasFilter, patchHeader, reduxHeader, hasSortingCaret]);\n\n  const onMouseLeave: React.MouseEventHandler = useCallback(() => {\n    if (!headerRef?.current?.contains(document.activeElement)) {\n      patchHeader(column.id, buildNextHeader(reduxHeader, false, hasFilter, hasDnD, false));\n    }\n  }, [column.id, hasDnD, hasFilter, headerRef, patchHeader, reduxHeader]);\n\n  const handleSort: React.MouseEventHandler = useCallback(() => {\n    if (column.canSort) {\n      onColumnSortChange?.({\n        column: column.id,\n        direction: column.isSortedDesc ? 'ASC' : 'DESC',\n      });\n      onColumnSort(\n        getNextSortedVisibleColumns(visibleColumns, column.id, !column.isSortedDesc),\n        column.id,\n        column.isSortedDesc ? 'ASC' : 'DESC',\n      );\n    }\n  }, [column.canSort, column.id, column.isSortedDesc, onColumnSort, onColumnSortChange, visibleColumns]);\n\n  const isActive = draggableProps && draggableProps.active;\n\n  const onKeyDown: React.KeyboardEventHandler = useCallback(\n    (e) => {\n      // we do the same as the draggable rows.\n      // we stop the event if the overlay is active\n      // main reason is the tab key\n      if (isDragOverlay || isActive) {\n        e.preventDefault();\n      }\n\n      if (e.currentTarget !== e.target) return;\n      if (e.code === 'ArrowDown' && column.canSort) {\n        e.preventDefault();\n        onColumnSortChange?.({\n          column: column.id,\n          direction: 'DESC',\n        });\n        onColumnSort(getNextSortedVisibleColumns(visibleColumns, column.id, true), column.id, 'DESC');\n      } else if (e.code === 'ArrowUp' && column.canSort) {\n        e.preventDefault();\n        onColumnSortChange?.({\n          column: column.id,\n          direction: 'ASC',\n        });\n        onColumnSort(getNextSortedVisibleColumns(visibleColumns, column.id, false), column.id, 'ASC');\n      } else if (['Enter', 'Space'].includes(e.code)) {\n        patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD, hasSortingCaret, true));\n        // Elements don't not yet exist\n        setTimeout(() => {\n          if (dragHandleRef.current) dragHandleRef.current.focus();\n          else if (filterIconRef.current) filterIconRef.current.focus();\n          else if (resizeHandlerRef.current) resizeHandlerRef.current.focus();\n          else if (sortRef?.current) sortRef.current.focus();\n        });\n      }\n    },\n    [\n      isDragOverlay,\n      isActive,\n      column.canSort,\n      column.id,\n      onColumnSortChange,\n      onColumnSort,\n      visibleColumns,\n      patchHeader,\n      reduxHeader,\n      hasFilter,\n      hasDnD,\n      hasSortingCaret,\n      dragHandleRef,\n      filterIconRef,\n      resizeHandlerRef,\n      sortRef,\n    ],\n  );\n\n  const onFocus: React.FocusEventHandler = useCallback(\n    (e) => {\n      // Don't do anything if focus wasn't placed in the element (bubling issues)\n      const possibleTargets: (HTMLElement | null)[] = [\n        dragHandleRef.current,\n        filterIconRef.current,\n        resizeHandlerRef.current,\n      ];\n      if (e.target === headerRef?.current) {\n        patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD, hasSortingCaret));\n        setFocusedRowId(null);\n      }\n\n      if (possibleTargets.includes(e.target as HTMLElement | null)) {\n        patchHeader(column.id, {\n          hideFilterButton: !hasFilter,\n          showDnDHandle: hasDnD,\n          withTabStops: true,\n        });\n        setFocusedRowId(null);\n      }\n    },\n    [\n      column.id,\n      dragHandleRef,\n      filterIconRef,\n      hasDnD,\n      hasFilter,\n      headerRef,\n      patchHeader,\n      reduxHeader,\n      resizeHandlerRef,\n      setFocusedRowId,\n      hasSortingCaret,\n    ],\n  );\n\n  const onBlur: React.FocusEventHandler = useCallback(\n    (e) => {\n      // Don't do anything if blur was caused by going to a child\n      if (e.relatedTarget === dragHandleRef.current) return;\n      if (e.relatedTarget === filterIconRef.current) return;\n      if (e.relatedTarget === resizeHandlerRef.current) return;\n      if (e.relatedTarget === sortRef?.current) return;\n      patchHeader(column.id, buildNextHeader(reduxHeader, false, hasFilter, hasDnD, false));\n    },\n    [dragHandleRef, filterIconRef, resizeHandlerRef, sortRef, patchHeader, column.id, reduxHeader, hasFilter, hasDnD],\n  );\n\n  return { onMouseEnter, onMouseLeave, handleSort, onKeyDown, onBlur, onFocus };\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-params */\nimport { useCallback, useMemo } from 'react';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\ntype UseHeaderCellHandlersType = (args: {\n  hasFilter: boolean;\n  column: DSDataTableT.InternalColumn;\n  hasDnD: boolean;\n  dragHandleRef: React.MutableRefObject<HTMLDivElement | null>;\n  sortRef: React.MutableRefObject<HTMLButtonElement | null>;\n  filterIconRef: React.MutableRefObject<HTMLButtonElement | null>;\n  resizeHandlerRef: React.MutableRefObject<HTMLInputElement | null>;\n  hasSortingCaret: boolean;\n  isDragOverlay?: boolean;\n  draggableProps: DSDataTableT.DraggablePropsT;\n}) => {\n  onMouseEnter: React.MouseEventHandler;\n  onMouseLeave: React.MouseEventHandler;\n  handleSort: React.MouseEventHandler;\n  onKeyDown: React.KeyboardEventHandler;\n  onFocus: React.FocusEventHandler;\n  onBlur: React.FocusEventHandler;\n};\n\n// TODO: reduxHeader was a mistake from the start.\n// Please remove this and make this logic more simple and\n// easy to follow.\nconst buildNextHeader = (\n  reduxHeader: DSDataTableT.ReduxHeader,\n  value: boolean,\n  hasFilter: boolean,\n  hasDnD: boolean,\n  hasSortingCaret: boolean,\n  withTabStops = false,\n) => ({\n  hideFilterMenu: true, // Do this to overwrite it if it exists\n  ...reduxHeader,\n  hideFilterButton: !(hasFilter && value),\n  showDnDHandle: hasDnD && value,\n  showSortCaret: hasSortingCaret,\n  withTabStops,\n});\n\nconst getNextSortedVisibleColumns = (\n  visibleColumns: DSDataTableT.InternalColumn[],\n  columnId: string,\n  isSortedDesc: boolean,\n) => {\n  const doit = (columns: DSDataTableT.InternalColumn[]) =>\n    columns.map((col) => {\n      const newCol = { ...col };\n      delete newCol.isSortedDesc;\n      if (col.id === columnId) {\n        newCol.isSortedDesc = isSortedDesc;\n      }\n      if (newCol.columns) {\n        newCol.columns = doit(newCol.columns);\n      }\n      return newCol;\n    });\n  return doit(visibleColumns);\n};\n\nexport const useHeaderCellHandlers: UseHeaderCellHandlersType = ({\n  hasFilter,\n  column,\n  hasDnD,\n  dragHandleRef,\n  filterIconRef,\n  sortRef,\n  resizeHandlerRef,\n  hasSortingCaret,\n  isDragOverlay,\n  draggableProps,\n}) => {\n  const onColumnSortChange = usePropsStore((state) => state.onColumnSortChange);\n  const onColumnSort = usePropsStore((state) => state.onColumnSort);\n  const visibleColumns = usePropsStore((state) => state.visibleColumns);\n  const setFocusedRowId = useInternalStore((state) => state.setFocusedRowId);\n  const patchHeader = useInternalStore((state) => state.patchHeader);\n  const reduxHeaders = useInternalStore((state) => state.reduxHeaders);\n\n  const reduxHeader = useMemo(() => reduxHeaders[column.id], [reduxHeaders, column]);\n\n  const headerRef = column.ref;\n\n  const onMouseEnter: React.MouseEventHandler = useCallback(() => {\n    patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD, hasSortingCaret));\n  }, [column.id, hasDnD, hasFilter, patchHeader, reduxHeader, hasSortingCaret]);\n\n  const onMouseLeave: React.MouseEventHandler = useCallback(() => {\n    if (!headerRef?.current?.contains(document.activeElement)) {\n      patchHeader(column.id, buildNextHeader(reduxHeader, false, hasFilter, hasDnD, false));\n    }\n  }, [column.id, hasDnD, hasFilter, headerRef, patchHeader, reduxHeader]);\n\n  const handleSort: React.MouseEventHandler = useCallback(() => {\n    if (column.canSort) {\n      onColumnSortChange?.({\n        column: column.id,\n        direction: column.isSortedDesc ? 'ASC' : 'DESC',\n      });\n      onColumnSort(\n        getNextSortedVisibleColumns(visibleColumns, column.id, !column.isSortedDesc),\n        column.id,\n        column.isSortedDesc ? 'ASC' : 'DESC',\n      );\n    }\n  }, [column.canSort, column.id, column.isSortedDesc, onColumnSort, onColumnSortChange, visibleColumns]);\n\n  const isActive = draggableProps && draggableProps.active;\n\n  const onKeyDown: React.KeyboardEventHandler = useCallback(\n    (e) => {\n      // we do the same as the draggable rows.\n      // we stop the event if the overlay is active\n      // main reason is the tab key\n      if (isDragOverlay || isActive) {\n        e.preventDefault();\n      }\n\n      if (e.currentTarget !== e.target) return;\n      if (e.code === 'ArrowDown' && column.canSort) {\n        e.preventDefault();\n        onColumnSortChange?.({\n          column: column.id,\n          direction: 'DESC',\n        });\n        onColumnSort(getNextSortedVisibleColumns(visibleColumns, column.id, true), column.id, 'DESC');\n      } else if (e.code === 'ArrowUp' && column.canSort) {\n        e.preventDefault();\n        onColumnSortChange?.({\n          column: column.id,\n          direction: 'ASC',\n        });\n        onColumnSort(getNextSortedVisibleColumns(visibleColumns, column.id, false), column.id, 'ASC');\n      } else if (['Enter', 'Space'].includes(e.code)) {\n        patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD, hasSortingCaret, true));\n        // Elements don't not yet exist\n        setTimeout(() => {\n          if (dragHandleRef.current) dragHandleRef.current.focus();\n          else if (filterIconRef.current) filterIconRef.current.focus();\n          else if (resizeHandlerRef.current) resizeHandlerRef.current.focus();\n          else if (sortRef?.current) sortRef.current.focus();\n        });\n      }\n    },\n    [\n      isDragOverlay,\n      isActive,\n      column.canSort,\n      column.id,\n      onColumnSortChange,\n      onColumnSort,\n      visibleColumns,\n      patchHeader,\n      reduxHeader,\n      hasFilter,\n      hasDnD,\n      hasSortingCaret,\n      dragHandleRef,\n      filterIconRef,\n      resizeHandlerRef,\n      sortRef,\n    ],\n  );\n\n  const onFocus: React.FocusEventHandler = useCallback(\n    (e) => {\n      // Don't do anything if focus wasn't placed in the element (bubling issues)\n      const possibleTargets: (HTMLElement | null)[] = [\n        dragHandleRef.current,\n        filterIconRef.current,\n        resizeHandlerRef.current,\n      ];\n      if (e.target === headerRef?.current) {\n        patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD, hasSortingCaret));\n        setFocusedRowId(null);\n      }\n\n      if (possibleTargets.includes(e.target as HTMLElement | null)) {\n        patchHeader(column.id, {\n          hideFilterButton: !hasFilter,\n          showDnDHandle: hasDnD,\n          withTabStops: true,\n        });\n        setFocusedRowId(null);\n      }\n    },\n    [\n      column.id,\n      dragHandleRef,\n      filterIconRef,\n      hasDnD,\n      hasFilter,\n      headerRef,\n      patchHeader,\n      reduxHeader,\n      resizeHandlerRef,\n      setFocusedRowId,\n      hasSortingCaret,\n    ],\n  );\n\n  const onBlur: React.FocusEventHandler = useCallback(\n    (e) => {\n      // Don't do anything if blur was caused by going to a child\n      if (e.relatedTarget === dragHandleRef.current) return;\n      if (e.relatedTarget === filterIconRef.current) return;\n      if (e.relatedTarget === resizeHandlerRef.current) return;\n      if (e.relatedTarget === sortRef?.current) return;\n      patchHeader(column.id, buildNextHeader(reduxHeader, false, hasFilter, hasDnD, false));\n    },\n    [dragHandleRef, filterIconRef, resizeHandlerRef, sortRef, patchHeader, column.id, reduxHeader, hasFilter, hasDnD],\n  );\n\n  return { onMouseEnter, onMouseLeave, handleSort, onKeyDown, onBlur, onFocus };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/parts/Headers/useHeaderResizer.js CHANGED Viewed

@@ -32,10 +32,10 @@ __export(useHeaderResizer_exports, {
 });
 module.exports = __toCommonJS(useHeaderResizer_exports);
 var React = __toESM(require("react"));
-var import_react = require("react");
 var import_lodash = require("lodash");
+var import_react = require("react");
+var import_createInternalAndPropsContext = require("../../configs/useStore/createInternalAndPropsContext.js");
 var import_gridLayoutHelpers = require("../../helpers/gridLayoutHelpers.js");
-var import_useStore = require("../../configs/useStore/useStore.js");
 const narrow = (value, min, max) => Math.min(Math.max(value, min ?? 30), max ?? Infinity);
 const getCorrectDelta = (e) => {
   let multiplier = 1;
@@ -53,10 +53,10 @@ const useHeaderResizer = ({
   columnId,
   innerRef
 }) => {
-  const visibleColumns = (0, import_useStore.usePropsStore)((state) => state.visibleColumns);
-  const onColumnResize = (0, import_useStore.usePropsStore)((state) => state.onColumnResize);
-  const onColumnSizeChange = (0, import_useStore.usePropsStore)((state) => state.onColumnSizeChange);
-  const virtualListRef = (0, import_useStore.usePropsStore)((state) => state.virtualListRef);
+  const visibleColumns = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.visibleColumns);
+  const onColumnResize = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.onColumnResize);
+  const onColumnSizeChange = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.onColumnSizeChange);
+  const virtualListRef = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.virtualListRef);
   const [isResizing, setIsResizing] = (0, import_react.useState)(false);
   const visibleColumnsCopy = (0, import_react.useMemo)(() => (0, import_lodash.cloneDeep)(visibleColumns), [visibleColumns]);
   const visibleColumnsOnGridLayout = (0, import_react.useMemo)(
@@ -91,7 +91,7 @@ const useHeaderResizer = ({
   }, [pushColumnSizeChange, virtualListRef, realColumnIndex]);
   const onResizeHandler = (0, import_react.useCallback)(
     (e) => {
-      if (realColumnIndex == -1) return;
+      if (realColumnIndex === -1) return;
       const delta = ("clientX" in e ? e.clientX : e.touches[0].clientX) - (innerRef.current?.getBoundingClientRect().x ?? 0);
       const originalWidth = (0, import_gridLayoutHelpers.getGridLayout)(virtualListRef.current)[realColumnIndex];
       const widthWithDelta = narrow(
@@ -108,7 +108,7 @@ const useHeaderResizer = ({
   );
   const handleKeyboardResize = (0, import_react.useCallback)(
     (e) => {
-      if (realColumnIndex == -1) return;
+      if (realColumnIndex === -1) return;
       if (e.key === "Enter") {
         e.stopPropagation();
       }

package/dist/cjs/parts/Headers/useHeaderResizer.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Headers/useHeaderResizer.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useCallback, useMemo, useState } from 'react';\nimport { cloneDeep } from 'lodash';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport {\n  getGridLayout,\n  changeGridLayout,\n  removeGridLayout,\n  setSubColumnsGridLayout,\n} from '../../helpers/gridLayoutHelpers.js';\nimport { usePropsStore } from '../../configs/useStore/useStore.js';\n\n// if number > max => max\n// if number < min => min\n// else => number\nconst narrow = (value: number, min: number | undefined, max: number | undefined): number =>\n  Math.min(Math.max(value, min ?? 30), max ?? Infinity);\n\n// Returns the delta of the keyboard event\nconst getCorrectDelta = (e: React.KeyboardEvent) => {\n  let multiplier = 1;\n\n  if (e.shiftKey) multiplier *= 5;\n  if (e.altKey) multiplier *= 10;\n\n  if (e.code === 'ArrowLeft') {\n    return -multiplier;\n  }\n  if (e.code === 'ArrowRight') {\n    return multiplier;\n  }\n  return 0;\n};\n\nexport const useHeaderResizer = ({\n  columnId,\n  innerRef,\n}: {\n  columnId: string;\n  innerRef: React.MutableRefObject<HTMLInputElement | null>;\n}) => {\n  const visibleColumns = usePropsStore((state) => state.visibleColumns);\n  const onColumnResize = usePropsStore((state) => state.onColumnResize);\n  const onColumnSizeChange = usePropsStore((state) => state.onColumnSizeChange);\n  const virtualListRef = usePropsStore((state) => state.virtualListRef);\n\n  const [isResizing, setIsResizing] = useState(false);\n\n  const visibleColumnsCopy = useMemo(() => cloneDeep(visibleColumns), [visibleColumns]);\n\n  const visibleColumnsOnGridLayout = useMemo(\n    () =>\n      visibleColumnsCopy.reduce((acc, cur) => {\n        if (cur.columns) {\n          return acc.concat(cur.columns);\n        }\n        return acc.concat(cur);\n      }, [] as DSDataTableT.InternalColumn[]),\n    [visibleColumnsCopy],\n  );\n\n  const realColumnIndex = useMemo(\n    () => visibleColumnsOnGridLayout.findIndex((col) => col.id === columnId),\n    [columnId, visibleColumnsOnGridLayout],\n  );\n\n  // Notifies the user of the change in the column size\n  const pushColumnSizeChange = useCallback(\n    (nextWidth: number) => {\n      // PUI-12695: Avoid unnecessary calls to onColumnResize\n      // Avoid calling onColumnResize if the width of the column has not changed\n      // unnecessary calls to onColumnResize can cause performance issues (next resizes were not working)\n      if (nextWidth === visibleColumnsCopy[realColumnIndex].width) return;\n      onColumnResize?.(columnId, nextWidth);\n      // this next line is updating also the visibleColumnsCopy\n      visibleColumnsOnGridLayout[realColumnIndex].width = nextWidth;\n      onColumnSizeChange(visibleColumnsCopy, columnId, nextWidth);\n    },\n    [columnId, onColumnResize, onColumnSizeChange, realColumnIndex, visibleColumnsCopy, visibleColumnsOnGridLayout],\n  );\n\n  const onResizeStart = useCallback(() => {\n    setIsResizing(true);\n  }, []);\n\n  const onResizeEnd = useCallback(() => {\n    setIsResizing(false);\n    pushColumnSizeChange(getGridLayout(virtualListRef.current)[realColumnIndex]);\n    removeGridLayout(virtualListRef.current);\n  }, [pushColumnSizeChange, virtualListRef, realColumnIndex]);\n\n  // Mouse resize\n  const onResizeHandler = useCallback(\n    (e: MouseEvent | TouchEvent) => {\n      if (realColumnIndex == -1) return;\n\n      const delta =\n        ('clientX' in e ? e.clientX : e.touches[0].clientX) - (innerRef.current?.getBoundingClientRect().x ?? 0); // delta in pixels\n\n      const originalWidth = getGridLayout(virtualListRef.current)[realColumnIndex];\n\n      const widthWithDelta = narrow(\n        originalWidth + delta,\n        visibleColumnsOnGridLayout[realColumnIndex].minWidth,\n        visibleColumnsOnGridLayout[realColumnIndex].maxWidth,\n      );\n\n      changeGridLayout(virtualListRef.current, realColumnIndex, widthWithDelta);\n      setSubColumnsGridLayout(virtualListRef.current, visibleColumnsCopy);\n\n      // We will notify the user of the change in the column size only when the user releases the mouse button\n\n      // To prevent text selection\n      e.preventDefault();\n      e.stopPropagation();\n    },\n    [realColumnIndex, innerRef, virtualListRef, visibleColumnsCopy, visibleColumnsOnGridLayout],\n  );\n\n  // Keyboard resize\n  const handleKeyboardResize = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (realColumnIndex == -1) return;\n\n      if (e.key === 'Enter') {\n        e.stopPropagation();\n      }\n\n      if (e.code === 'ArrowLeft' || e.code === 'ArrowRight') {\n        e.preventDefault();\n      }\n\n      const delta = getCorrectDelta(e);\n\n      if (delta === 0) return;\n\n      const originalWidth = getGridLayout(virtualListRef.current)[realColumnIndex];\n\n      const widthWithDelta = narrow(\n        originalWidth + delta,\n        visibleColumnsOnGridLayout[realColumnIndex].minWidth,\n        visibleColumnsOnGridLayout[realColumnIndex].maxWidth,\n      );\n\n      changeGridLayout(virtualListRef.current, realColumnIndex, widthWithDelta);\n      setSubColumnsGridLayout(virtualListRef.current, visibleColumnsCopy);\n\n      pushColumnSizeChange(getGridLayout(virtualListRef.current)[realColumnIndex] + delta);\n      removeGridLayout(virtualListRef.current);\n    },\n    [pushColumnSizeChange, realColumnIndex, virtualListRef, visibleColumnsCopy, visibleColumnsOnGridLayout],\n  );\n\n  return {\n    isResizing,\n    onResizeStart,\n    onResizeEnd,\n    onResizeHandler,\n    handleKeyboardResize,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { cloneDeep } from 'lodash';\nimport { useCallback, useMemo, useState } from 'react';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport {\n  changeGridLayout,\n  getGridLayout,\n  removeGridLayout,\n  setSubColumnsGridLayout,\n} from '../../helpers/gridLayoutHelpers.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\n\n// if number > max => max\n// if number < min => min\n// else => number\nconst narrow = (value: number, min: number | undefined, max: number | undefined): number =>\n  Math.min(Math.max(value, min ?? 30), max ?? Infinity);\n\n// Returns the delta of the keyboard event\nconst getCorrectDelta = (e: React.KeyboardEvent) => {\n  let multiplier = 1;\n\n  if (e.shiftKey) multiplier *= 5;\n  if (e.altKey) multiplier *= 10;\n\n  if (e.code === 'ArrowLeft') {\n    return -multiplier;\n  }\n  if (e.code === 'ArrowRight') {\n    return multiplier;\n  }\n  return 0;\n};\n\nexport const useHeaderResizer = ({\n  columnId,\n  innerRef,\n}: {\n  columnId: string;\n  innerRef: React.MutableRefObject<HTMLInputElement | null>;\n}) => {\n  const visibleColumns = usePropsStore((state) => state.visibleColumns);\n  const onColumnResize = usePropsStore((state) => state.onColumnResize);\n  const onColumnSizeChange = usePropsStore((state) => state.onColumnSizeChange);\n  const virtualListRef = usePropsStore((state) => state.virtualListRef);\n\n  const [isResizing, setIsResizing] = useState(false);\n\n  const visibleColumnsCopy = useMemo(() => cloneDeep(visibleColumns), [visibleColumns]);\n\n  const visibleColumnsOnGridLayout = useMemo(\n    () =>\n      visibleColumnsCopy.reduce((acc, cur) => {\n        if (cur.columns) {\n          return acc.concat(cur.columns);\n        }\n        return acc.concat(cur);\n      }, [] as DSDataTableT.InternalColumn[]),\n    [visibleColumnsCopy],\n  );\n\n  const realColumnIndex = useMemo(\n    () => visibleColumnsOnGridLayout.findIndex((col) => col.id === columnId),\n    [columnId, visibleColumnsOnGridLayout],\n  );\n\n  // Notifies the user of the change in the column size\n  const pushColumnSizeChange = useCallback(\n    (nextWidth: number) => {\n      // PUI-12695: Avoid unnecessary calls to onColumnResize\n      // Avoid calling onColumnResize if the width of the column has not changed\n      // unnecessary calls to onColumnResize can cause performance issues (next resizes were not working)\n      if (nextWidth === visibleColumnsCopy[realColumnIndex].width) return;\n      onColumnResize?.(columnId, nextWidth);\n      // this next line is updating also the visibleColumnsCopy\n      visibleColumnsOnGridLayout[realColumnIndex].width = nextWidth;\n      onColumnSizeChange(visibleColumnsCopy, columnId, nextWidth);\n    },\n    [columnId, onColumnResize, onColumnSizeChange, realColumnIndex, visibleColumnsCopy, visibleColumnsOnGridLayout],\n  );\n\n  const onResizeStart = useCallback(() => {\n    setIsResizing(true);\n  }, []);\n\n  const onResizeEnd = useCallback(() => {\n    setIsResizing(false);\n    pushColumnSizeChange(getGridLayout(virtualListRef.current)[realColumnIndex]);\n    removeGridLayout(virtualListRef.current);\n  }, [pushColumnSizeChange, virtualListRef, realColumnIndex]);\n\n  // Mouse resize\n  const onResizeHandler = useCallback(\n    (e: MouseEvent | TouchEvent) => {\n      if (realColumnIndex === -1) return;\n\n      const delta =\n        ('clientX' in e ? e.clientX : e.touches[0].clientX) - (innerRef.current?.getBoundingClientRect().x ?? 0); // delta in pixels\n\n      const originalWidth = getGridLayout(virtualListRef.current)[realColumnIndex];\n\n      const widthWithDelta = narrow(\n        originalWidth + delta,\n        visibleColumnsOnGridLayout[realColumnIndex].minWidth,\n        visibleColumnsOnGridLayout[realColumnIndex].maxWidth,\n      );\n\n      changeGridLayout(virtualListRef.current, realColumnIndex, widthWithDelta);\n      setSubColumnsGridLayout(virtualListRef.current, visibleColumnsCopy);\n\n      // We will notify the user of the change in the column size only when the user releases the mouse button\n\n      // To prevent text selection\n      e.preventDefault();\n      e.stopPropagation();\n    },\n    [realColumnIndex, innerRef, virtualListRef, visibleColumnsCopy, visibleColumnsOnGridLayout],\n  );\n\n  // Keyboard resize\n  const handleKeyboardResize = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (realColumnIndex === -1) return;\n\n      if (e.key === 'Enter') {\n        e.stopPropagation();\n      }\n\n      if (e.code === 'ArrowLeft' || e.code === 'ArrowRight') {\n        e.preventDefault();\n      }\n\n      const delta = getCorrectDelta(e);\n\n      if (delta === 0) return;\n\n      const originalWidth = getGridLayout(virtualListRef.current)[realColumnIndex];\n\n      const widthWithDelta = narrow(\n        originalWidth + delta,\n        visibleColumnsOnGridLayout[realColumnIndex].minWidth,\n        visibleColumnsOnGridLayout[realColumnIndex].maxWidth,\n      );\n\n      changeGridLayout(virtualListRef.current, realColumnIndex, widthWithDelta);\n      setSubColumnsGridLayout(virtualListRef.current, visibleColumnsCopy);\n\n      pushColumnSizeChange(getGridLayout(virtualListRef.current)[realColumnIndex] + delta);\n      removeGridLayout(virtualListRef.current);\n    },\n    [pushColumnSizeChange, realColumnIndex, virtualListRef, visibleColumnsCopy, visibleColumnsOnGridLayout],\n  );\n\n  return {\n    isResizing,\n    onResizeStart,\n    onResizeEnd,\n    onResizeHandler,\n    handleKeyboardResize,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,oBAA0B;AAC1B,mBAA+C;AAC/C,2CAA8B;AAC9B,+BAKO;AAMP,MAAM,SAAS,CAAC,OAAe,KAAyB,QACtD,KAAK,IAAI,KAAK,IAAI,OAAO,OAAO,EAAE,GAAG,OAAO,QAAQ;AAGtD,MAAM,kBAAkB,CAAC,MAA2B;AAClD,MAAI,aAAa;AAEjB,MAAI,EAAE,SAAU,eAAc;AAC9B,MAAI,EAAE,OAAQ,eAAc;AAE5B,MAAI,EAAE,SAAS,aAAa;AAC1B,WAAO,CAAC;AAAA,EACV;AACA,MAAI,EAAE,SAAS,cAAc;AAC3B,WAAO;AAAA,EACT;AACA,SAAO;AACT;AAEO,MAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA;AACF,MAGM;AACJ,QAAM,qBAAiB,oDAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,qBAAiB,oDAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,yBAAqB,oDAAc,CAAC,UAAU,MAAM,kBAAkB;AAC5E,QAAM,qBAAiB,oDAAc,CAAC,UAAU,MAAM,cAAc;AAEpE,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,KAAK;AAElD,QAAM,yBAAqB,sBAAQ,UAAM,yBAAU,cAAc,GAAG,CAAC,cAAc,CAAC;AAEpF,QAAM,iCAA6B;AAAA,IACjC,MACE,mBAAmB,OAAO,CAAC,KAAK,QAAQ;AACtC,UAAI,IAAI,SAAS;AACf,eAAO,IAAI,OAAO,IAAI,OAAO;AAAA,MAC/B;AACA,aAAO,IAAI,OAAO,GAAG;AAAA,IACvB,GAAG,CAAC,CAAkC;AAAA,IACxC,CAAC,kBAAkB;AAAA,EACrB;AAEA,QAAM,sBAAkB;AAAA,IACtB,MAAM,2BAA2B,UAAU,CAAC,QAAQ,IAAI,OAAO,QAAQ;AAAA,IACvE,CAAC,UAAU,0BAA0B;AAAA,EACvC;AAGA,QAAM,2BAAuB;AAAA,IAC3B,CAAC,cAAsB;AAIrB,UAAI,cAAc,mBAAmB,eAAe,EAAE,MAAO;AAC7D,uBAAiB,UAAU,SAAS;AAEpC,iCAA2B,eAAe,EAAE,QAAQ;AACpD,yBAAmB,oBAAoB,UAAU,SAAS;AAAA,IAC5D;AAAA,IACA,CAAC,UAAU,gBAAgB,oBAAoB,iBAAiB,oBAAoB,0BAA0B;AAAA,EAChH;AAEA,QAAM,oBAAgB,0BAAY,MAAM;AACtC,kBAAc,IAAI;AAAA,EACpB,GAAG,CAAC,CAAC;AAEL,QAAM,kBAAc,0BAAY,MAAM;AACpC,kBAAc,KAAK;AACnB,6BAAqB,wCAAc,eAAe,OAAO,EAAE,eAAe,CAAC;AAC3E,mDAAiB,eAAe,OAAO;AAAA,EACzC,GAAG,CAAC,sBAAsB,gBAAgB,eAAe,CAAC;AAG1D,QAAM,sBAAkB;AAAA,IACtB,CAAC,MAA+B;AAC9B,UAAI,oBAAoB,GAAI;AAE5B,YAAM,SACH,aAAa,IAAI,EAAE,UAAU,EAAE,QAAQ,CAAC,EAAE,YAAY,SAAS,SAAS,sBAAsB,EAAE,KAAK;AAExG,YAAM,oBAAgB,wCAAc,eAAe,OAAO,EAAE,eAAe;AAE3E,YAAM,iBAAiB;AAAA,QACrB,gBAAgB;AAAA,QAChB,2BAA2B,eAAe,EAAE;AAAA,QAC5C,2BAA2B,eAAe,EAAE;AAAA,MAC9C;AAEA,qDAAiB,eAAe,SAAS,iBAAiB,cAAc;AACxE,4DAAwB,eAAe,SAAS,kBAAkB;AAKlE,QAAE,eAAe;AACjB,QAAE,gBAAgB;AAAA,IACpB;AAAA,IACA,CAAC,iBAAiB,UAAU,gBAAgB,oBAAoB,0BAA0B;AAAA,EAC5F;AAGA,QAAM,2BAAuB;AAAA,IAC3B,CAAC,MAA2B;AAC1B,UAAI,oBAAoB,GAAI;AAE5B,UAAI,EAAE,QAAQ,SAAS;AACrB,UAAE,gBAAgB;AAAA,MACpB;AAEA,UAAI,EAAE,SAAS,eAAe,EAAE,SAAS,cAAc;AACrD,UAAE,eAAe;AAAA,MACnB;AAEA,YAAM,QAAQ,gBAAgB,CAAC;AAE/B,UAAI,UAAU,EAAG;AAEjB,YAAM,oBAAgB,wCAAc,eAAe,OAAO,EAAE,eAAe;AAE3E,YAAM,iBAAiB;AAAA,QACrB,gBAAgB;AAAA,QAChB,2BAA2B,eAAe,EAAE;AAAA,QAC5C,2BAA2B,eAAe,EAAE;AAAA,MAC9C;AAEA,qDAAiB,eAAe,SAAS,iBAAiB,cAAc;AACxE,4DAAwB,eAAe,SAAS,kBAAkB;AAElE,+BAAqB,wCAAc,eAAe,OAAO,EAAE,eAAe,IAAI,KAAK;AACnF,qDAAiB,eAAe,OAAO;AAAA,IACzC;AAAA,IACA,CAAC,sBAAsB,iBAAiB,gBAAgB,oBAAoB,0BAA0B;AAAA,EACxG;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/cjs/parts/HoC/DnDGroupContext.js ADDED Viewed

@@ -0,0 +1,39 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DnDGroupContext_exports = {};
+__export(DnDGroupContext_exports, {
+  DnDGroupContext: () => DnDGroupContext
+});
+module.exports = __toCommonJS(DnDGroupContext_exports);
+var React = __toESM(require("react"));
+var import_react = require("react");
+const DnDGroupContext = (0, import_react.createContext)({
+  activeIndex: null
+});
+//# sourceMappingURL=DnDGroupContext.js.map

package/dist/cjs/parts/HoC/DnDGroupContext.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/HoC/DnDGroupContext.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { createContext } from 'react';\nimport type { DnDGroupContextType } from './withConditionalDnDColumnContext.js';\n\nexport const DnDGroupContext = createContext<DnDGroupContextType>({\n  activeIndex: null,\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA8B;AAGvB,MAAM,sBAAkB,4BAAmC;AAAA,EAChE,aAAa;AACf,CAAC;",
+  "names": []
+}

package/dist/cjs/parts/HoC/withConditionalDnDColumnContext.js CHANGED Viewed

@@ -28,20 +28,17 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var withConditionalDnDColumnContext_exports = {};
 __export(withConditionalDnDColumnContext_exports, {
-  DnDGroupContext: () => DnDGroupContext,
   withConditionalDnDColumnContext: () => withConditionalDnDColumnContext
 });
 module.exports = __toCommonJS(withConditionalDnDColumnContext_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
 var import_ds_drag_and_drop = require("@elliemae/ds-drag-and-drop");
-var import_internal = require("../internal.js");
+var import_react = require("react");
 var import_Columns = require("../../addons/Columns/index.js");
-var import_useStore = require("../../configs/useStore/useStore.js");
-const DnDGroupContext = (0, import_react.createContext)({
-  activeIndex: null
-});
+var import_createInternalAndPropsContext = require("../../configs/useStore/createInternalAndPropsContext.js");
+var import_HeaderCellGroup = require("../Headers/HeaderCellGroup.js");
+var import_DnDGroupContext = require("./DnDGroupContext.js");
 const flattenColumns = (cols) => {
   const augmentedColumns = [];
   const flatten = (col, index, parentId = null) => {
@@ -56,9 +53,9 @@ const flattenColumns = (cols) => {
   return augmentedColumns;
 };
 const withConditionalDnDColumnContext = (Component) => function(props) {
-  const dragAndDropColumns = (0, import_useStore.usePropsStore)((state) => state.dragAndDropColumns);
-  const onColumnsReorder = (0, import_useStore.usePropsStore)((state) => state.onColumnsReorder);
-  const visibleColumns = (0, import_useStore.usePropsStore)((state) => state.visibleColumns);
+  const dragAndDropColumns = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.dragAndDropColumns);
+  const onColumnsReorder = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.onColumnsReorder);
+  const visibleColumns = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.visibleColumns);
   const flattenedItems = (0, import_react.useMemo)(() => flattenColumns(visibleColumns), [visibleColumns]);
   const onReorder = (0, import_react.useCallback)(
     (movedItem, indexes) => {
@@ -92,10 +89,11 @@ const withConditionalDnDColumnContext = (Component) => function(props) {
     () => activeId ? flattenedItems.find((item) => item.uid === activeId)?.original : null,
     [activeId, flattenedItems]
   );
+  const DnDGroupContextVal = (0, import_react.useMemo)(() => ({ activeIndex }), [activeIndex]);
   if (dragAndDropColumns)
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_drag_and_drop.DndContext, { ...dndContextProps, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DnDGroupContext.Provider, { value: { activeIndex }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_drag_and_drop.DragOverlay, { modifiers: [import_ds_drag_and_drop.restrictToFirstScrollableAncestor], children: activeId ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_internal.HeaderCellGroup, { header: dragOverlayCol, isDragOverlay: true }) : null })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DnDGroupContext.DnDGroupContext.Provider, { value: DnDGroupContextVal, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_drag_and_drop.DragOverlay, { modifiers: [import_ds_drag_and_drop.restrictToFirstScrollableAncestor], children: activeId ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_HeaderCellGroup.HeaderCellGroup, { header: dragOverlayCol, isDragOverlay: true }) : null })
     ] });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props });
 };