@elliemae/ds-data-table 3.70.0-next.6 → 3.70.0-next.60

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Headers/HeaderCell.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable 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  const getOwnerPropsArguments = useCallback(\n    () => ({\n      columnId: column.id,\n      firstFocuseableColumnHeaderId,\n    }),\n    [column.id, firstFocuseableColumnHeaderId],\n  );\n  const reference = useRef<HTMLDivElement | null>(null);\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    referenceColumn: reference,\n  });\n\n  const rightIcons = useMemo(() => {\n    if (!hasRightIcons) return null;\n    return (\n      <StyledHeaderRightIconsWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n        <FilterMapItem\n          column={column}\n          referenceColumn={!isDragOverlay ? reference.current : undefined}\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  }, [\n    hasRightIcons,\n    getOwnerProps,\n    getOwnerPropsArguments,\n    column,\n    isDragOverlay,\n    onFiltersChange,\n    reduxHeader,\n    filters,\n    hasSortingCaret,\n    handleSort,\n  ]);\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 screenReaderInstructionsId = `sr-${column.id}-instructions-${domIdAffix}`.replace(/ /g, '');\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={reference}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\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"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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 { buildScreenReaderInstructions } from './buildScreenReaderInstructions.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\n\ninterface HeaderCellCompProps {\n  column: DSDataTableT.InternalColumn;\n  isDragOverlay?: boolean;\n  colSpan: number;\n}\n\n/** Screen-reader instructions node \u2014 referenced via aria-describedby, never rendered visually. */\nconst HIDDEN_STYLE: React.CSSProperties = { display: 'none' };\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  const getOwnerPropsArguments = useCallback(\n    () => ({\n      columnId: column.id,\n      firstFocuseableColumnHeaderId,\n    }),\n    [column.id, firstFocuseableColumnHeaderId],\n  );\n  const reference = useRef<HTMLDivElement | null>(null);\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<HTMLDivElement | 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    referenceColumn: reference,\n  });\n\n  const rightIcons = useMemo(() => {\n    if (!hasRightIcons) return null;\n    return (\n      <StyledHeaderRightIconsWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n        <FilterMapItem\n          column={column}\n          referenceColumn={!isDragOverlay ? reference.current : undefined}\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  }, [\n    hasRightIcons,\n    getOwnerProps,\n    getOwnerPropsArguments,\n    column,\n    isDragOverlay,\n    onFiltersChange,\n    reduxHeader,\n    filters,\n    hasSortingCaret,\n    handleSort,\n  ]);\n\n  const DnDHandleComponent = useMemo(\n    () => (\n      <Grid mr=\"2px\" height=\"fit-content\" py=\"2px\" mt=\"2px\" alignItems=\"flex-start\" 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 screenReaderInstructionsId = `sr-${column.id}-instructions-${domIdAffix}`.replace(/ /g, '');\n  const instructions = buildScreenReaderInstructions({\n    colSpan,\n    draggable: dragAndDropColumns && column.disableDnD !== true,\n    filterable: hasFilter,\n    sortable: column.canSort ?? false,\n    resizable: shouldShowResize,\n  });\n\n  const headTh = (\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={reference}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\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      {/* Screen-reader instructions referenced by aria-describedby. display:none keeps them out of\n          the header's name-from-content (so they are not read twice) while still being announced as\n          the description \u2014 the same pattern used for filterable/sortable columns. */}\n      <span id={screenReaderInstructionsId} style={HIDDEN_STYLE}>\n        {instructions}\n      </span>\n    </StyledHeadTh>\n  );\n\n  return headTh;\n};\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -3,11 +3,31 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { TruncatedTooltipText } from "../../TruncatedTooltipText.js";
 import { RequiredDot } from "./RequiredDot.js";
 import { DATA_TESTID } from "../../configs/constants.js";
+const resolveWrapStyle = (textWrap) => {
+  if (textWrap === "wrap-all") return { whiteSpace: "pre-wrap", wordBreak: "break-all" };
+  if (textWrap === "wrap") return { whiteSpace: "pre-wrap", overflowWrap: "break-word" };
+  return {};
+};
 const StringTitle = ({ text, textWrap }) => textWrap === "truncate" ? /* @__PURE__ */ jsx(TruncatedTooltipText, { value: text }) : text;
-const HeaderCellTitle = ({ column, draggableProps, textWrap }) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center" }, "data-testid": DATA_TESTID.DATA_TABLE_HEADER_CELL_TITLE, children: [
-  typeof column.Header === "string" ? /* @__PURE__ */ jsx(StringTitle, { text: column.Header, textWrap: column.textWrap || textWrap }) : /* @__PURE__ */ jsx(column.Header, { column, draggableProps }),
-  column.required && /* @__PURE__ */ jsx(RequiredDot, {})
-] });
+const HeaderCellTitle = ({ column, draggableProps, textWrap }) => {
+  const effectiveTextWrap = column.textWrap || textWrap;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "flex-start",
+        paddingTop: typeof column.Header === "string" ? "5px" : void 0,
+        ...resolveWrapStyle(effectiveTextWrap)
+      },
+      "data-testid": DATA_TESTID.DATA_TABLE_HEADER_CELL_TITLE,
+      children: [
+        typeof column.Header === "string" ? /* @__PURE__ */ jsx(StringTitle, { text: column.Header, textWrap: effectiveTextWrap }) : /* @__PURE__ */ jsx(column.Header, { column, draggableProps }),
+        column.required && /* @__PURE__ */ jsx(RequiredDot, {})
+      ]
+    }
+  );
+};
 export {
   HeaderCellTitle
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Headers/HeaderCellTitle.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { TruncatedTooltipText } from '../../TruncatedTooltipText.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport type { SortableItemContextType } from '../HoC/SortableItemContext.js';\nimport { RequiredDot } from './RequiredDot.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\n\ninterface HeaderCellTitleProps {\n  column: DSDataTableT.InternalColumn;\n  draggableProps: SortableItemContextType['draggableProps'];\n  textWrap: 'wrap' | 'wrap-all' | 'truncate';\n}\n\nconst StringTitle = ({ text, textWrap }: { textWrap: HeaderCellTitleProps['textWrap']; text: string }) =>\n  textWrap === 'truncate' ? <TruncatedTooltipText value={text} /> : text;\n\nexport const HeaderCellTitle: React.ComponentType<HeaderCellTitleProps> = ({ column, draggableProps, textWrap }) => (\n  <div style={{ display: 'flex', alignItems: 'center' }} data-testid={DATA_TESTID.DATA_TABLE_HEADER_CELL_TITLE}>\n    {typeof column.Header === 'string' ? (\n      <StringTitle text={column.Header} textWrap={column.textWrap || textWrap} />\n    ) : (\n      <column.Header column={column} draggableProps={draggableProps} />\n    )}\n    {column.required && <RequiredDot />}\n  </div>\n);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACcK,cAG1B,YAH0B;AAb5B,SAAS,4BAA4B;AAGrC,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAQ5B,MAAM,cAAc,CAAC,EAAE,MAAM,SAAS,MACpC,aAAa,aAAa,oBAAC,wBAAqB,OAAO,MAAM,IAAK;AAE7D,MAAM,kBAA6D,CAAC,EAAE,QAAQ,gBAAgB,SAAS,MAC5G,qBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,SAAS,GAAG,eAAa,YAAY,8BAC7E;AAAA,SAAO,OAAO,WAAW,WACxB,oBAAC,eAAY,MAAM,OAAO,QAAQ,UAAU,OAAO,YAAY,UAAU,IAEzE,oBAAC,OAAO,QAAP,EAAc,QAAgB,gBAAgC;AAAA,EAEhE,OAAO,YAAY,oBAAC,eAAY;AAAA,GACnC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { TruncatedTooltipText } from '../../TruncatedTooltipText.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport type { SortableItemContextType } from '../HoC/SortableItemContext.js';\nimport { RequiredDot } from './RequiredDot.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\n\ninterface HeaderCellTitleProps {\n  column: DSDataTableT.InternalColumn;\n  draggableProps: SortableItemContextType['draggableProps'];\n  textWrap: 'wrap' | 'wrap-all' | 'truncate';\n}\n\nconst resolveWrapStyle = (textWrap: HeaderCellTitleProps['textWrap']): React.CSSProperties => {\n  if (textWrap === 'wrap-all') return { whiteSpace: 'pre-wrap', wordBreak: 'break-all' };\n  if (textWrap === 'wrap') return { whiteSpace: 'pre-wrap', overflowWrap: 'break-word' };\n  return {};\n};\n\nconst StringTitle = ({ text, textWrap }: { textWrap: HeaderCellTitleProps['textWrap']; text: string }) =>\n  textWrap === 'truncate' ? <TruncatedTooltipText value={text} /> : text;\n\nexport const HeaderCellTitle: React.ComponentType<HeaderCellTitleProps> = ({ column, draggableProps, textWrap }) => {\n  const effectiveTextWrap = column.textWrap || textWrap;\n  return (\n    <div\n      style={{\n        display: 'flex',\n        alignItems: 'flex-start',\n        paddingTop: typeof column.Header === 'string' ? '5px' : undefined,\n        ...resolveWrapStyle(effectiveTextWrap),\n      }}\n      data-testid={DATA_TESTID.DATA_TABLE_HEADER_CELL_TITLE}\n    >\n      {typeof column.Header === 'string' ? (\n        <StringTitle text={column.Header} textWrap={effectiveTextWrap} />\n      ) : (\n        <column.Header column={column} draggableProps={draggableProps} />\n      )}\n      {column.required && <RequiredDot />}\n    </div>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACoBK,cAKxB,YALwB;AAnB5B,SAAS,4BAA4B;AAGrC,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAQ5B,MAAM,mBAAmB,CAAC,aAAoE;AAC5F,MAAI,aAAa,WAAY,QAAO,EAAE,YAAY,YAAY,WAAW,YAAY;AACrF,MAAI,aAAa,OAAQ,QAAO,EAAE,YAAY,YAAY,cAAc,aAAa;AACrF,SAAO,CAAC;AACV;AAEA,MAAM,cAAc,CAAC,EAAE,MAAM,SAAS,MACpC,aAAa,aAAa,oBAAC,wBAAqB,OAAO,MAAM,IAAK;AAE7D,MAAM,kBAA6D,CAAC,EAAE,QAAQ,gBAAgB,SAAS,MAAM;AAClH,QAAM,oBAAoB,OAAO,YAAY;AAC7C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,YAAY,OAAO,OAAO,WAAW,WAAW,QAAQ;AAAA,QACxD,GAAG,iBAAiB,iBAAiB;AAAA,MACvC;AAAA,MACA,eAAa,YAAY;AAAA,MAExB;AAAA,eAAO,OAAO,WAAW,WACxB,oBAAC,eAAY,MAAM,OAAO,QAAQ,UAAU,mBAAmB,IAE/D,oBAAC,OAAO,QAAP,EAAc,QAAgB,gBAAgC;AAAA,QAEhE,OAAO,YAAY,oBAAC,eAAY;AAAA;AAAA;AAAA,EACnC;AAEJ;",
   "names": []
 }

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

@@ -1,16 +1,26 @@
 import * as React from "react";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect } from "react";
 import { StyledResizer } from "../../styled.js";
 import { useHeaderResizer } from "./useHeaderResizer.js";
 import { usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
+import { DEFAULT_MAX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH } from "../../configs/constants.js";
 const stopPropagation = (e) => e.stopPropagation();
+const HIDDEN_STYLE = { display: "none" };
+const RESIZE_INSTRUCTION = "Use the left and right arrow keys to increase or decrease the column width.";
+const bracketBound = (configuredBound, columnWidth, pickWider) => pickWider(configuredBound, columnWidth ?? configuredBound);
 const HeaderResizer = ({ column, innerRef, isReachable }) => {
-  const { isResizing, onResizeStart, onResizeEnd, onResizeHandler, handleKeyboardResize } = useHeaderResizer({
+  const { isResizing, columnWidth, onResizeStart, onResizeEnd, onResizeHandler, handleKeyboardResize } = useHeaderResizer({
     columnId: column.id,
     innerRef
   });
   const getOwnerProps = usePropsStore((store) => store.get);
+  const resizeLabel = typeof column.Header === "string" ? `Resize ${column.Header} column` : "Resize column";
+  const instructionId = `resize-instr-${column.id}`.replace(/ /g, "");
+  const valueMin = bracketBound(column.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH, columnWidth, Math.min);
+  const valueMax = bracketBound(column.maxWidth ?? DEFAULT_MAX_COLUMN_WIDTH, columnWidth, Math.max);
+  const sliderValue = columnWidth ?? valueMin;
+  const valueText = columnWidth === void 0 ? void 0 : `${columnWidth} pixels`;
   useEffect(() => {
     const addEvents = () => {
       document.addEventListener("mousemove", onResizeHandler);
@@ -28,23 +38,35 @@ const HeaderResizer = ({ column, innerRef, isReachable }) => {
     else removeEvents();
     return removeEvents;
   }, [isResizing, onResizeHandler, onResizeEnd]);
-  return /* @__PURE__ */ jsx(
-    StyledResizer,
-    {
-      type: "range",
-      "aria-label": "Resize column",
-      tabIndex: isReachable ? 0 : -1,
-      innerRef,
-      draggable: false,
-      onMouseDown: onResizeStart,
-      onTouchStart: onResizeStart,
-      onMouseUp: onResizeEnd,
-      onTouchEnd: onResizeEnd,
-      onClick: stopPropagation,
-      onKeyDown: handleKeyboardResize,
-      getOwnerProps
-    }
-  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      StyledResizer,
+      {
+        type: "range",
+        min: valueMin,
+        max: valueMax,
+        value: sliderValue,
+        "aria-valuenow": columnWidth,
+        "aria-valuemin": valueMin,
+        "aria-valuemax": valueMax,
+        "aria-valuetext": valueText,
+        "aria-label": resizeLabel,
+        "aria-describedby": instructionId,
+        "aria-hidden": isReachable ? void 0 : true,
+        tabIndex: isReachable ? 0 : -1,
+        innerRef,
+        draggable: false,
+        onMouseDown: onResizeStart,
+        onTouchStart: onResizeStart,
+        onMouseUp: onResizeEnd,
+        onTouchEnd: onResizeEnd,
+        onClick: stopPropagation,
+        onKeyDown: handleKeyboardResize,
+        getOwnerProps
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { id: instructionId, style: HIDDEN_STYLE, children: RESIZE_INSTRUCTION })
+  ] });
 };
 export {
   HeaderResizer

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Headers/HeaderResizer.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { 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"],
-  "mappings": "AAAA,YAAY,WAAW;AC2CnB;AA3CJ,SAAgB,iBAAiB;AACjC,SAAS,qBAAqB;AAE9B,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAE9B,MAAM,kBAAkB,CAAC,MAAwB,EAAE,gBAAgB;AAE5D,MAAM,gBAIR,CAAC,EAAE,QAAQ,UAAU,YAAY,MAAM;AAC1C,QAAM,EAAE,YAAY,eAAe,aAAa,iBAAiB,qBAAqB,IAAI,iBAAiB;AAAA,IACzG,UAAU,OAAO;AAAA,IACjB;AAAA,EACF,CAAC;AACD,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AAIxD,YAAU,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 * as React from 'react';\nexport { React };\n", "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';\nimport { DEFAULT_MAX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH } from '../../configs/constants.js';\n\nconst stopPropagation = (e: React.MouseEvent | React.KeyboardEvent) => e.stopPropagation();\n\n/** Instruction node \u2014 referenced via aria-describedby, never rendered visually. */\nconst HIDDEN_STYLE: React.CSSProperties = { display: 'none' };\nconst RESIZE_INSTRUCTION = 'Use the left and right arrow keys to increase or decrease the column width.';\n\n/**\n * PUI-17784: brackets the announced bounds around the actual current width, not just the configured\n * ones. The resize clamp (narrow() in useHeaderResizer.ts) only bounds INTERACTIVE resizing \u2014 an\n * explicit column.width set outside [minWidth, maxWidth] renders as-is on first paint (pre-existing,\n * unrelated to this ticket), so columnWidth can start below configuredMin or above configuredMax.\n * Reporting aria-valuenow outside [aria-valuemin, aria-valuemax] is an internally-inconsistent ARIA\n * value \u2014 exactly the class of meaningless-value problem this ticket exists to fix, just in a\n * narrower corner. Widening the bound to include the real value (rather than clamping the value to a\n * bound the column isn't actually honoring) keeps the announcement accurate; it self-corrects to the\n * configured bound on the first interactive resize, since narrow() clamps from then on.\n */\nconst bracketBound = (configuredBound: number, columnWidth: number | undefined, pickWider: typeof Math.min) =>\n  pickWider(configuredBound, columnWidth ?? configuredBound);\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, columnWidth, onResizeStart, onResizeEnd, onResizeHandler, handleKeyboardResize } =\n    useHeaderResizer({\n      columnId: column.id,\n      innerRef,\n    });\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  const resizeLabel = typeof column.Header === 'string' ? `Resize ${column.Header} column` : 'Resize column';\n  const instructionId = `resize-instr-${column.id}`.replace(/ /g, '');\n\n  const valueMin = bracketBound(column.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH, columnWidth, Math.min);\n  const valueMax = bracketBound(column.maxWidth ?? DEFAULT_MAX_COLUMN_WIDTH, columnWidth, Math.max);\n  const sliderValue = columnWidth ?? valueMin;\n  const valueText = columnWidth === undefined ? undefined : `${columnWidth} pixels`;\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    <>\n      <StyledResizer\n        type=\"range\"\n        min={valueMin}\n        max={valueMax}\n        value={sliderValue}\n        aria-valuenow={columnWidth}\n        aria-valuemin={valueMin}\n        aria-valuemax={valueMax}\n        aria-valuetext={valueText}\n        aria-label={resizeLabel}\n        aria-describedby={instructionId}\n        aria-hidden={isReachable ? undefined : true}\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      <span id={instructionId} style={HIDDEN_STYLE}>\n        {RESIZE_INSTRUCTION}\n      </span>\n    </>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACuEnB,mBACE,KADF;AAvEJ,SAAgB,iBAAiB;AACjC,SAAS,qBAAqB;AAE9B,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAC9B,SAAS,0BAA0B,gCAAgC;AAEnE,MAAM,kBAAkB,CAAC,MAA8C,EAAE,gBAAgB;AAGzF,MAAM,eAAoC,EAAE,SAAS,OAAO;AAC5D,MAAM,qBAAqB;AAa3B,MAAM,eAAe,CAAC,iBAAyB,aAAiC,cAC9E,UAAU,iBAAiB,eAAe,eAAe;AAEpD,MAAM,gBAIR,CAAC,EAAE,QAAQ,UAAU,YAAY,MAAM;AAC1C,QAAM,EAAE,YAAY,aAAa,eAAe,aAAa,iBAAiB,qBAAqB,IACjG,iBAAiB;AAAA,IACf,UAAU,OAAO;AAAA,IACjB;AAAA,EACF,CAAC;AACH,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AAExD,QAAM,cAAc,OAAO,OAAO,WAAW,WAAW,UAAU,OAAO,MAAM,YAAY;AAC3F,QAAM,gBAAgB,gBAAgB,OAAO,EAAE,GAAG,QAAQ,MAAM,EAAE;AAElE,QAAM,WAAW,aAAa,OAAO,YAAY,0BAA0B,aAAa,KAAK,GAAG;AAChG,QAAM,WAAW,aAAa,OAAO,YAAY,0BAA0B,aAAa,KAAK,GAAG;AAChG,QAAM,cAAc,eAAe;AACnC,QAAM,YAAY,gBAAgB,SAAY,SAAY,GAAG,WAAW;AAIxE,YAAU,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,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,OAAO;AAAA,QACP,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf,kBAAgB;AAAA,QAChB,cAAY;AAAA,QACZ,oBAAkB;AAAA,QAClB,eAAa,cAAc,SAAY;AAAA,QACvC,UAAU,cAAc,IAAI;AAAA,QAC5B;AAAA,QACA,WAAW;AAAA,QACX,aAAa;AAAA,QACb,cAAc;AAAA,QACd,WAAW;AAAA,QACX,YAAY;AAAA,QACZ,SAAS;AAAA,QACT,WAAW;AAAA,QACX;AAAA;AAAA,IACF;AAAA,IACA,oBAAC,UAAK,IAAI,eAAe,OAAO,cAC7B,8BACH;AAAA,KACF;AAEJ;",
   "names": []
 }

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

@@ -0,0 +1,33 @@
+import * as React from "react";
+const joinAffordances = (items) => {
+  if (items.length <= 1) return items[0] ?? "";
+  if (items.length === 2) return `${items[0]} and ${items[1]}`;
+  return `${items.slice(0, -1).join(", ")} and ${items[items.length - 1]}`;
+};
+const SORT_INSTRUCTION = "You can sort the data ascendingly or descendingly by this column. Use the up / down arrow keys to do so.";
+const buildScreenReaderInstructions = ({
+  colSpan,
+  draggable,
+  filterable,
+  sortable,
+  resizable
+}) => {
+  const prefix = colSpan === 1 ? "" : "Column Group. ";
+  const sentences = [];
+  const enterAffordances = [];
+  if (draggable) enterAffordances.push("draggable");
+  if (filterable) enterAffordances.push("filterable");
+  if (resizable) enterAffordances.push("resizable");
+  if (enterAffordances.length > 0) {
+    const interaction = enterAffordances.length > 1 ? "these interactions" : "this interaction";
+    sentences.push(
+      `This column is ${joinAffordances(enterAffordances)}. To enable ${interaction} press the enter key.`
+    );
+  }
+  if (sortable) sentences.push(SORT_INSTRUCTION);
+  return `${prefix}${sentences.join(" ")}`;
+};
+export {
+  buildScreenReaderInstructions
+};
+//# sourceMappingURL=buildScreenReaderInstructions.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Headers/buildScreenReaderInstructions.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/**\n * Joins affordance words into a natural-language list:\n *   ['a']            -> 'a'\n *   ['a', 'b']       -> 'a and b'\n *   ['a', 'b', 'c']  -> 'a, b and c'\n */\nconst joinAffordances = (items: string[]): string => {\n  if (items.length <= 1) return items[0] ?? '';\n  if (items.length === 2) return `${items[0]} and ${items[1]}`;\n  return `${items.slice(0, -1).join(', ')} and ${items[items.length - 1]}`;\n};\n\nconst SORT_INSTRUCTION =\n  'You can sort the data ascendingly or descendingly by this column. Use the up / down arrow keys to do so.';\n\n/**\n * Builds the screen-reader instructions announced for a column header (via the header's\n * aria-describedby).\n *\n * Draggable, filterable and resizable share the SAME activation \u2014 pressing Enter on the focused\n * header reveals and focuses those controls (see useHeaderCellHandlers onKeyDown) \u2014 so they are\n * announced together as a single grammatical list with ONE \"press the enter key\" instruction, for\n * any combination/permutation, instead of repeating the instruction per affordance.\n *\n * Sorting is a distinct interaction (Up / Down arrow keys directly on the header, no Enter), so it\n * gets its own sentence. Wording pending a11y SME review.\n */\nexport const buildScreenReaderInstructions = ({\n  colSpan,\n  draggable,\n  filterable,\n  sortable,\n  resizable,\n}: {\n  colSpan: number;\n  draggable: boolean;\n  filterable: boolean;\n  sortable: boolean;\n  resizable: boolean;\n}): string => {\n  const prefix = colSpan === 1 ? '' : 'Column Group. ';\n  const sentences: string[] = [];\n\n  // Enter-activated affordances \u2014 combined into one sentence regardless of which are present.\n  const enterAffordances: string[] = [];\n  if (draggable) enterAffordances.push('draggable');\n  if (filterable) enterAffordances.push('filterable');\n  if (resizable) enterAffordances.push('resizable');\n  if (enterAffordances.length > 0) {\n    const interaction = enterAffordances.length > 1 ? 'these interactions' : 'this interaction';\n    sentences.push(\n      `This column is ${joinAffordances(enterAffordances)}. To enable ${interaction} press the enter key.`,\n    );\n  }\n\n  // Sorting uses the up / down arrow keys directly on the focused header.\n  if (sortable) sentences.push(SORT_INSTRUCTION);\n\n  return `${prefix}${sentences.join(' ')}`;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACMvB,MAAM,kBAAkB,CAAC,UAA4B;AACnD,MAAI,MAAM,UAAU,EAAG,QAAO,MAAM,CAAC,KAAK;AAC1C,MAAI,MAAM,WAAW,EAAG,QAAO,GAAG,MAAM,CAAC,CAAC,QAAQ,MAAM,CAAC,CAAC;AAC1D,SAAO,GAAG,MAAM,MAAM,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,QAAQ,MAAM,MAAM,SAAS,CAAC,CAAC;AACxE;AAEA,MAAM,mBACJ;AAcK,MAAM,gCAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAMc;AACZ,QAAM,SAAS,YAAY,IAAI,KAAK;AACpC,QAAM,YAAsB,CAAC;AAG7B,QAAM,mBAA6B,CAAC;AACpC,MAAI,UAAW,kBAAiB,KAAK,WAAW;AAChD,MAAI,WAAY,kBAAiB,KAAK,YAAY;AAClD,MAAI,UAAW,kBAAiB,KAAK,WAAW;AAChD,MAAI,iBAAiB,SAAS,GAAG;AAC/B,UAAM,cAAc,iBAAiB,SAAS,IAAI,uBAAuB;AACzE,cAAU;AAAA,MACR,kBAAkB,gBAAgB,gBAAgB,CAAC,eAAe,WAAW;AAAA,IAC/E;AAAA,EACF;AAGA,MAAI,SAAU,WAAU,KAAK,gBAAgB;AAE7C,SAAO,GAAG,MAAM,GAAG,UAAU,KAAK,GAAG,CAAC;AACxC;",
+  "names": []
+}

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

@@ -12,7 +12,7 @@ const HeadersComp = () => {
   const isSkeleton = usePropsStore((state) => state.isSkeleton);
   const colsLayoutStyle = usePropsStore((state) => state.colsLayoutStyle);
   const visibleColumns = usePropsStore((state) => state.visibleColumns);
-  const columnHeaderRef = usePropsStore((state) => state.columnHeaderRef);
+  const columnHeaderCallbackRef = usePropsStore((state) => state.columnHeaderCallbackRef);
   const virtualListRef = usePropsStore((state) => state.virtualListRef);
   const getOwnerProps = usePropsStore((store) => store.get);
   useEffect(() => {
@@ -21,16 +21,24 @@ const HeadersComp = () => {
   if (visibleColumns.length === 0 && isSkeleton) {
     return null;
   }
-  return /* @__PURE__ */ jsx(StyledHeadWrapper, { colsLayoutStyle, innerRef: columnHeaderRef, getOwnerProps, children: /* @__PURE__ */ jsx(SortableHeaderCell, { items: visibleColumns, children: /* @__PURE__ */ jsx(
-    StyledHeadTr,
+  return /* @__PURE__ */ jsx(
+    StyledHeadWrapper,
     {
-      role: "row",
       colsLayoutStyle,
-      isExpandable,
+      innerRef: columnHeaderCallbackRef,
       getOwnerProps,
-      children: visibleColumns.map((h, index) => /* @__PURE__ */ jsx(HeaderCellGroupSortable, { header: h, isLast: index === visibleColumns.length - 1 }, h.id))
+      children: /* @__PURE__ */ jsx(SortableHeaderCell, { items: visibleColumns, children: /* @__PURE__ */ jsx(
+        StyledHeadTr,
+        {
+          role: "row",
+          colsLayoutStyle,
+          isExpandable,
+          getOwnerProps,
+          children: visibleColumns.map((h, index) => /* @__PURE__ */ jsx(HeaderCellGroupSortable, { header: h, isLast: index === visibleColumns.length - 1 }, h.id))
+        }
+      ) })
     }
-  ) }) });
+  );
 };
 const Headers = withConditionalDnDColumnContext(HeadersComp);
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Headers/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { 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"],
-  "mappings": "AAAA,YAAY,WAAW;ACmCX;AAnCZ,SAAgB,iBAAiB;AACjC,SAAS,mBAAmB,oBAAoB;AAChD,SAAS,uCAAuC;AAChD,SAAS,+BAA+B;AACxC,SAAS,0BAA0B;AACnC,SAAS,+BAA+B;AACxC,SAAS,qBAAqB;AAE9B,MAAM,cAAc,MAAM;AACxB,QAAM,eAAe,cAAc,CAAC,UAAU,MAAM,YAAY;AAChE,QAAM,aAAa,cAAc,CAAC,UAAU,MAAM,UAAU;AAC5D,QAAM,kBAAkB,cAAc,CAAC,UAAU,MAAM,eAAe;AACtE,QAAM,iBAAiB,cAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,kBAAkB,cAAc,CAAC,UAAU,MAAM,eAAe;AACtE,QAAM,iBAAiB,cAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AAExD,YAAU,MAAM;AAEd,4BAAwB,eAAe,SAAS,gBAAgB,IAAI;AAAA,EACtE,GAAG,CAAC,gBAAgB,cAAc,CAAC;AAEnC,MAAI,eAAe,WAAW,KAAK,YAAY;AAC7C,WAAO;AAAA,EACT;AACA,SACE,oBAAC,qBAAkB,iBAAkC,UAAU,iBAAiB,eAC9E,8BAAC,sBAAmB,OAAO,gBACzB;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MAEC,yBAAe,IAAI,CAAC,GAAG,UACtB,oBAAC,2BAAwB,QAAQ,GAAc,QAAQ,UAAU,eAAe,SAAS,KAAhD,EAAE,EAAiD,CAC7F;AAAA;AAAA,EACH,GACF,GACF;AAEJ;AAEO,MAAM,UAAU,gCAAgC,WAAW;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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 columnHeaderCallbackRef = usePropsStore((state) => state.columnHeaderCallbackRef);\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\n      colsLayoutStyle={colsLayoutStyle}\n      innerRef={columnHeaderCallbackRef}\n      getOwnerProps={getOwnerProps}\n    >\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"],
+  "mappings": "AAAA,YAAY,WAAW;ACuCX;AAvCZ,SAAgB,iBAAiB;AACjC,SAAS,mBAAmB,oBAAoB;AAChD,SAAS,uCAAuC;AAChD,SAAS,+BAA+B;AACxC,SAAS,0BAA0B;AACnC,SAAS,+BAA+B;AACxC,SAAS,qBAAqB;AAE9B,MAAM,cAAc,MAAM;AACxB,QAAM,eAAe,cAAc,CAAC,UAAU,MAAM,YAAY;AAChE,QAAM,aAAa,cAAc,CAAC,UAAU,MAAM,UAAU;AAC5D,QAAM,kBAAkB,cAAc,CAAC,UAAU,MAAM,eAAe;AACtE,QAAM,iBAAiB,cAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,0BAA0B,cAAc,CAAC,UAAU,MAAM,uBAAuB;AACtF,QAAM,iBAAiB,cAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AAExD,YAAU,MAAM;AAEd,4BAAwB,eAAe,SAAS,gBAAgB,IAAI;AAAA,EACtE,GAAG,CAAC,gBAAgB,cAAc,CAAC;AAEnC,MAAI,eAAe,WAAW,KAAK,YAAY;AAC7C,WAAO;AAAA,EACT;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MAEA,8BAAC,sBAAmB,OAAO,gBACzB;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,UAEC,yBAAe,IAAI,CAAC,GAAG,UACtB,oBAAC,2BAAwB,QAAQ,GAAc,QAAQ,UAAU,eAAe,SAAS,KAAhD,EAAE,EAAiD,CAC7F;AAAA;AAAA,MACH,GACF;AAAA;AAAA,EACF;AAEJ;AAEO,MAAM,UAAU,gCAAgC,WAAW;",
   "names": []
 }

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

@@ -42,18 +42,27 @@ const useHeaderCellHandlers = ({
   const visibleColumns = usePropsStore((state) => state.visibleColumns);
   const setFocusedRowId = useInternalStore((state) => state.setFocusedRowId);
   const patchHeader = useInternalStore((state) => state.patchHeader);
+  const closeFilterMenuIfOpen = useInternalStore((state) => state.closeFilterMenuIfOpen);
+  const resetAllHeadersExcept = useInternalStore((state) => state.resetAllHeadersExcept);
+  const hoveredColumnId = useInternalStore((state) => state.hoveredColumnId);
+  const setHoveredColumnId = useInternalStore((state) => state.setHoveredColumnId);
   const reduxHeaders = useInternalStore((state) => state.reduxHeaders);
   const reduxHeader = useMemo(() => reduxHeaders[column.id], [reduxHeaders, column]);
   const headerRef = referenceColumn.current;
   const onMouseEnter = useCallback(() => {
+    setHoveredColumnId(column.id);
     patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD, hasSortingCaret));
-  }, [column.id, hasDnD, hasFilter, patchHeader, reduxHeader, hasSortingCaret]);
+  }, [column.id, hasDnD, hasFilter, patchHeader, reduxHeader, hasSortingCaret, setHoveredColumnId]);
   const onMouseLeave = useCallback(() => {
+    setHoveredColumnId(
+      (currentHoveredColumnId) => currentHoveredColumnId === column.id ? null : currentHoveredColumnId
+    );
     if (!headerRef?.contains(document.activeElement)) {
       patchHeader(column.id, buildNextHeader(reduxHeader, false, hasFilter, hasDnD, false));
     }
-  }, [column.id, hasDnD, hasFilter, headerRef, patchHeader, reduxHeader]);
+  }, [column.id, hasDnD, hasFilter, headerRef, patchHeader, reduxHeader, setHoveredColumnId]);
   const handleSort = useCallback(() => {
+    closeFilterMenuIfOpen(column.id);
     if (column.canSort) {
       onColumnSortChange?.({
         column: column.id,
@@ -65,7 +74,15 @@ const useHeaderCellHandlers = ({
         column.isSortedDesc ? "ASC" : "DESC"
       );
     }
-  }, [column.canSort, column.id, column.isSortedDesc, onColumnSort, onColumnSortChange, visibleColumns]);
+  }, [
+    column.canSort,
+    column.id,
+    column.isSortedDesc,
+    onColumnSort,
+    onColumnSortChange,
+    visibleColumns,
+    closeFilterMenuIfOpen
+  ]);
   const isActive = draggableProps && draggableProps.active;
   const onKeyDown = useCallback(
     (e) => {
@@ -124,10 +141,12 @@ const useHeaderCellHandlers = ({
         resizeHandlerRef.current
       ];
       if (e.target === headerRef) {
+        resetAllHeadersExcept(column.id);
         patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD, hasSortingCaret));
         setFocusedRowId(null);
       }
       if (possibleTargets.includes(e.target)) {
+        resetAllHeadersExcept(column.id);
         patchHeader(column.id, {
           hideFilterButton: !hasFilter,
           showDnDHandle: hasDnD,
@@ -144,6 +163,7 @@ const useHeaderCellHandlers = ({
       hasFilter,
       headerRef,
       patchHeader,
+      resetAllHeadersExcept,
       reduxHeader,
       resizeHandlerRef,
       setFocusedRowId,
@@ -152,13 +172,29 @@ const useHeaderCellHandlers = ({
   );
   const onBlur = useCallback(
     (e) => {
-      if (e.relatedTarget === dragHandleRef.current) return;
-      if (e.relatedTarget === filterIconRef.current) return;
-      if (e.relatedTarget === resizeHandlerRef.current) return;
-      if (e.relatedTarget === sortRef?.current) return;
+      const { relatedTarget } = e;
+      if (relatedTarget && relatedTarget === dragHandleRef.current) return;
+      if (relatedTarget && relatedTarget === filterIconRef.current) return;
+      if (relatedTarget && relatedTarget === resizeHandlerRef.current) return;
+      if (relatedTarget && relatedTarget === sortRef?.current) return;
+      if (hoveredColumnId === column.id) {
+        patchHeader(column.id, { withTabStops: false });
+        return;
+      }
       patchHeader(column.id, buildNextHeader(reduxHeader, false, hasFilter, hasDnD, false));
     },
-    [dragHandleRef, filterIconRef, resizeHandlerRef, sortRef, patchHeader, column.id, reduxHeader, hasFilter, hasDnD]
+    [
+      dragHandleRef,
+      filterIconRef,
+      resizeHandlerRef,
+      sortRef,
+      patchHeader,
+      column.id,
+      reduxHeader,
+      hasFilter,
+      hasDnD,
+      hoveredColumnId
+    ]
   );
   return { onMouseEnter, onMouseLeave, handleSort, onKeyDown, onBlur, onFocus };
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Headers/useHeaderCellHandlers.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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  referenceColumn: React.MutableRefObject<HTMLDivElement | null>;\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  referenceColumn,\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 = referenceColumn.current;\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?.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) {\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"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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  referenceColumn: React.MutableRefObject<HTMLDivElement | null>;\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  referenceColumn,\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 closeFilterMenuIfOpen = useInternalStore((state) => state.closeFilterMenuIfOpen);\n  const resetAllHeadersExcept = useInternalStore((state) => state.resetAllHeadersExcept);\n  const hoveredColumnId = useInternalStore((state) => state.hoveredColumnId);\n  const setHoveredColumnId = useInternalStore((state) => state.setHoveredColumnId);\n  const reduxHeaders = useInternalStore((state) => state.reduxHeaders);\n\n  const reduxHeader = useMemo(() => reduxHeaders[column.id], [reduxHeaders, column]);\n\n  const headerRef = referenceColumn.current;\n\n  const onMouseEnter: React.MouseEventHandler = useCallback(() => {\n    // PUI-15154: tracked separately from reduxHeader's own fields \u2014 see resetAllHeadersExcept in\n    // useStore.tsx for why hover identity can't be folded into the same per-column booleans focus\n    // writes to.\n    setHoveredColumnId(column.id);\n    patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD, hasSortingCaret));\n  }, [column.id, hasDnD, hasFilter, patchHeader, reduxHeader, hasSortingCaret, setHoveredColumnId]);\n\n  const onMouseLeave: React.MouseEventHandler = useCallback(() => {\n    setHoveredColumnId((currentHoveredColumnId) =>\n      currentHoveredColumnId === column.id ? null : currentHoveredColumnId,\n    );\n    if (!headerRef?.contains(document.activeElement)) {\n      patchHeader(column.id, buildNextHeader(reduxHeader, false, hasFilter, hasDnD, false));\n    }\n  }, [column.id, hasDnD, hasFilter, headerRef, patchHeader, reduxHeader, setHoveredColumnId]);\n\n  const handleSort: React.MouseEventHandler = useCallback(() => {\n    /** PUI-18785: this handler runs for every click on the header (title, sort caret, a drag\n     * handle click that doesn't turn into an actual drag) \u2014 see closeFilterMenuIfOpen in\n     * useStore.tsx for why it needs to force-close the column's own filter menu here.\n     */\n    closeFilterMenuIfOpen(column.id);\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  }, [\n    column.canSort,\n    column.id,\n    column.isSortedDesc,\n    onColumnSort,\n    onColumnSortChange,\n    visibleColumns,\n    closeFilterMenuIfOpen,\n  ]);\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) {\n        // PUI-15154: proactively clear every other column's stuck DnD handle/sort caret \u2014 see\n        // resetAllHeadersExcept in useStore.tsx for why this can't rely solely on the previous\n        // column's own onBlur.\n        resetAllHeadersExcept(column.id);\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        resetAllHeadersExcept(column.id);\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      resetAllHeadersExcept,\n      reduxHeader,\n      resizeHandlerRef,\n      setFocusedRowId,\n      hasSortingCaret,\n    ],\n  );\n\n  const onBlur: React.FocusEventHandler = useCallback(\n    (e) => {\n      // PUI-15154: don't do anything if blur was caused by going to a child \u2014 but only when\n      // relatedTarget is a real element. When focus leaves with nowhere specific to land (a click\n      // on a non-focusable area, or Tab past the last focusable element), relatedTarget is null.\n      // Any of these refs is null too whenever that control isn't rendered for this column (e.g.\n      // filterIconRef when the column has no filter \u2014 FilterMapItem renders null). Comparing with\n      // plain === then false-matches null against null and skips the reset, leaving the DnD handle\n      // and sort caret visibly stuck even though focus genuinely left the header.\n      const { relatedTarget } = e;\n      if (relatedTarget && relatedTarget === dragHandleRef.current) return;\n      if (relatedTarget && relatedTarget === filterIconRef.current) return;\n      if (relatedTarget && relatedTarget === resizeHandlerRef.current) return;\n      if (relatedTarget && relatedTarget === sortRef?.current) return;\n      // PUI-15154: if the mouse is still hovering this same column, don't hide its hover-driven\n      // visibility just because focus left it \u2014 only the focus-derived tab-stop state resets.\n      // showDnDHandle/showSortCaret stay as hover set them.\n      if (hoveredColumnId === column.id) {\n        patchHeader(column.id, { withTabStops: false });\n        return;\n      }\n      patchHeader(column.id, buildNextHeader(reduxHeader, false, hasFilter, hasDnD, false));\n    },\n    [\n      dragHandleRef,\n      filterIconRef,\n      resizeHandlerRef,\n      sortRef,\n      patchHeader,\n      column.id,\n      reduxHeader,\n      hasFilter,\n      hasDnD,\n      hoveredColumnId,\n    ],\n  );\n\n  return { onMouseEnter, onMouseLeave, handleSort, onKeyDown, onBlur, onFocus };\n};\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,14 +1,15 @@
 import * as React from "react";
 import { cloneDeep } from "lodash-es";
 import React2, { useCallback, useMemo, useState } from "react";
-import { usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
+import { useInternalStore, usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
+import { ColsLayoutStyle, DEFAULT_MAX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH } from "../../configs/constants.js";
 import {
   changeGridLayout,
   getGridLayout,
   removeGridLayout,
   setSubColumnsGridLayout
 } from "../../helpers/gridLayoutHelpers.js";
-const narrow = (value, min, max) => Math.min(Math.max(value, min ?? 30), max ?? Infinity);
+const narrow = (value, min, max) => Math.min(Math.max(value, min ?? DEFAULT_MIN_COLUMN_WIDTH), max ?? DEFAULT_MAX_COLUMN_WIDTH);
 const getCorrectDelta = (e) => {
   let multiplier = 1;
   if (e.shiftKey) multiplier *= 5;
@@ -29,6 +30,8 @@ const useHeaderResizer = ({
   const onColumnResize = usePropsStore((state) => state.onColumnResize);
   const onColumnSizeChange = usePropsStore((state) => state.onColumnSizeChange);
   const virtualListRef = usePropsStore((state) => state.virtualListRef);
+  const colsLayoutStyle = usePropsStore((state) => state.colsLayoutStyle);
+  const closeFilterMenuIfOpen = useInternalStore((state) => state.closeFilterMenuIfOpen);
   const [isResizing, setIsResizing] = useState(false);
   const visibleColumnsCopy = useMemo(() => cloneDeep(visibleColumns), [visibleColumns]);
   const visibleColumnsOnGridLayout = useMemo(
@@ -46,6 +49,9 @@ const useHeaderResizer = ({
   );
   const realColumnIndexRef = React2.useRef(realColumnIndex);
   realColumnIndexRef.current = realColumnIndex;
+  const [columnWidth, setColumnWidth] = useState(
+    visibleColumnsOnGridLayout[realColumnIndex]?.width ?? (colsLayoutStyle === ColsLayoutStyle.Auto ? void 0 : 150)
+  );
   const pushColumnSizeChange = useCallback(
     (nextWidth) => {
       if (nextWidth === visibleColumnsOnGridLayout[realColumnIndexRef.current].width) return;
@@ -57,7 +63,8 @@ const useHeaderResizer = ({
   );
   const onResizeStart = useCallback(() => {
     setIsResizing(true);
-  }, []);
+    closeFilterMenuIfOpen(columnId);
+  }, [closeFilterMenuIfOpen, columnId]);
   const onResizeEnd = useCallback(() => {
     setIsResizing(false);
     pushColumnSizeChange(getGridLayout(virtualListRef.current)[realColumnIndexRef.current]);
@@ -75,6 +82,7 @@ const useHeaderResizer = ({
       );
       changeGridLayout(virtualListRef.current, realColumnIndexRef.current, widthWithDelta);
       setSubColumnsGridLayout(virtualListRef.current, visibleColumnsCopy);
+      setColumnWidth(widthWithDelta);
       e.preventDefault();
       e.stopPropagation();
     },
@@ -99,13 +107,15 @@ const useHeaderResizer = ({
       );
       changeGridLayout(virtualListRef.current, realColumnIndexRef.current, widthWithDelta);
       setSubColumnsGridLayout(virtualListRef.current, visibleColumnsCopy);
-      pushColumnSizeChange(getGridLayout(virtualListRef.current)[realColumnIndexRef.current] + delta);
+      setColumnWidth(widthWithDelta);
+      pushColumnSizeChange(widthWithDelta);
       removeGridLayout(virtualListRef.current);
     },
     [pushColumnSizeChange, virtualListRef, visibleColumnsCopy, visibleColumnsOnGridLayout]
   );
   return {
     isResizing,
+    columnWidth,
     onResizeStart,
     onResizeEnd,
     onResizeHandler,