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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Headers/HeaderCellTitle.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADcK;AAb5B,kCAAqC;AAGrC,yBAA4B;AAC5B,uBAA4B;AAQ5B,MAAM,cAAc,CAAC,EAAE,MAAM,SAAS,MACpC,aAAa,aAAa,4CAAC,oDAAqB,OAAO,MAAM,IAAK;AAE7D,MAAM,kBAA6D,CAAC,EAAE,QAAQ,gBAAgB,SAAS,MAC5G,6CAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,SAAS,GAAG,eAAa,6BAAY,8BAC7E;AAAA,SAAO,OAAO,WAAW,WACxB,4CAAC,eAAY,MAAM,OAAO,QAAQ,UAAU,OAAO,YAAY,UAAU,IAEzE,4CAAC,OAAO,QAAP,EAAc,QAAgB,gBAAgC;AAAA,EAEhE,OAAO,YAAY,4CAAC,kCAAY;AAAA,GACnC;",
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoBK;AAnB5B,kCAAqC;AAGrC,yBAA4B;AAC5B,uBAA4B;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,4CAAC,oDAAqB,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,6BAAY;AAAA,MAExB;AAAA,eAAO,OAAO,WAAW,WACxB,4CAAC,eAAY,MAAM,OAAO,QAAQ,UAAU,mBAAmB,IAE/D,4CAAC,OAAO,QAAP,EAAc,QAAgB,gBAAgC;AAAA,QAEhE,OAAO,YAAY,4CAAC,kCAAY;AAAA;AAAA;AAAA,EACnC;AAEJ;",
   "names": []
 }

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

@@ -37,13 +37,23 @@ var import_react = require("react");
 var import_styled = require("../../styled.js");
 var import_useHeaderResizer = require("./useHeaderResizer.js");
 var import_createInternalAndPropsContext = require("../../configs/useStore/createInternalAndPropsContext.js");
+var import_constants = require("../../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 } = (0, import_useHeaderResizer.useHeaderResizer)({
+  const { isResizing, columnWidth, onResizeStart, onResizeEnd, onResizeHandler, handleKeyboardResize } = (0, import_useHeaderResizer.useHeaderResizer)({
     columnId: column.id,
     innerRef
   });
   const getOwnerProps = (0, import_createInternalAndPropsContext.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 ?? import_constants.DEFAULT_MIN_COLUMN_WIDTH, columnWidth, Math.min);
+  const valueMax = bracketBound(column.maxWidth ?? import_constants.DEFAULT_MAX_COLUMN_WIDTH, columnWidth, Math.max);
+  const sliderValue = columnWidth ?? valueMin;
+  const valueText = columnWidth === void 0 ? void 0 : `${columnWidth} pixels`;
   (0, import_react.useEffect)(() => {
     const addEvents = () => {
       document.addEventListener("mousemove", onResizeHandler);
@@ -61,22 +71,34 @@ const HeaderResizer = ({ column, innerRef, isReachable }) => {
     else removeEvents();
     return removeEvents;
   }, [isResizing, onResizeHandler, onResizeEnd]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_styled.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__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_styled.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__ */ (0, import_jsx_runtime.jsx)("span", { id: instructionId, style: HIDDEN_STYLE, children: RESIZE_INSTRUCTION })
+  ] });
 };
 //# sourceMappingURL=HeaderResizer.js.map

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

@@ -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/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;",
+  "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';\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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuEnB;AAvEJ,mBAAiC;AACjC,oBAA8B;AAE9B,8BAAiC;AACjC,2CAA8B;AAC9B,uBAAmE;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,QACjG,0CAAiB;AAAA,IACf,UAAU,OAAO;AAAA,IACjB;AAAA,EACF,CAAC;AACH,QAAM,oBAAgB,oDAAc,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,2CAA0B,aAAa,KAAK,GAAG;AAChG,QAAM,WAAW,aAAa,OAAO,YAAY,2CAA0B,aAAa,KAAK,GAAG;AAChG,QAAM,cAAc,eAAe;AACnC,QAAM,YAAY,gBAAgB,SAAY,SAAY,GAAG,WAAW;AAIxE,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,4EACE;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,4CAAC,UAAK,IAAI,eAAe,OAAO,cAC7B,8BACH;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/cjs/{exported-related/FilterPopover/useOnClickOutside.js → parts/Headers/buildScreenReaderInstructions.js}

@@ -26,35 +26,38 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var useOnClickOutside_exports = {};
-__export(useOnClickOutside_exports, {
-  useOnClickOutside: () => useOnClickOutside
+var buildScreenReaderInstructions_exports = {};
+__export(buildScreenReaderInstructions_exports, {
+  buildScreenReaderInstructions: () => buildScreenReaderInstructions
 });
-module.exports = __toCommonJS(useOnClickOutside_exports);
+module.exports = __toCommonJS(buildScreenReaderInstructions_exports);
 var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-function useOnClickOutside(ref, cb) {
-  const cbRef = import_react.default.useRef(cb);
-  (0, import_react.useEffect)(() => {
-    cbRef.current = cb;
-  }, [cb]);
-  (0, import_react.useEffect)(() => {
-    if (!ref) {
-      return () => {
-      };
-    }
-    const listener = (event) => {
-      const target = event.target;
-      if (!target) return;
-      if (ref.contains(target)) return;
-      cbRef.current(event);
-    };
-    document.addEventListener("mousedown", listener, true);
-    document.addEventListener("touchstart", listener, true);
-    return () => {
-      document.removeEventListener("mousedown", listener, true);
-      document.removeEventListener("touchstart", listener, true);
-    };
-  }, [ref]);
-}
-//# sourceMappingURL=useOnClickOutside.js.map
+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(" ")}`;
+};
+//# sourceMappingURL=buildScreenReaderInstructions.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/Headers/buildScreenReaderInstructions.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/**\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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADMvB,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/cjs/parts/Headers/index.js

@@ -45,7 +45,7 @@ const HeadersComp = () => {
   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 columnHeaderCallbackRef = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.columnHeaderCallbackRef);
   const virtualListRef = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.virtualListRef);
   const getOwnerProps = (0, import_createInternalAndPropsContext.usePropsStore)((store) => store.get);
   (0, import_react.useEffect)(() => {
@@ -54,16 +54,24 @@ const HeadersComp = () => {
   if (visibleColumns.length === 0 && isSkeleton) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledHeadWrapper, { colsLayoutStyle, innerRef: columnHeaderRef, getOwnerProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SortableHeaderCell.SortableHeaderCell, { items: visibleColumns, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_styled.StyledHeadTr,
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_styled.StyledHeadWrapper,
     {
-      role: "row",
       colsLayoutStyle,
-      isExpandable,
+      innerRef: columnHeaderCallbackRef,
       getOwnerProps,
-      children: visibleColumns.map((h, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_HeaderCellGroup.HeaderCellGroupSortable, { header: h, isLast: index === visibleColumns.length - 1 }, h.id))
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SortableHeaderCell.SortableHeaderCell, { items: visibleColumns, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_styled.StyledHeadTr,
+        {
+          role: "row",
+          colsLayoutStyle,
+          isExpandable,
+          getOwnerProps,
+          children: visibleColumns.map((h, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_HeaderCellGroup.HeaderCellGroupSortable, { header: h, isLast: index === visibleColumns.length - 1 }, h.id))
+        }
+      ) })
     }
-  ) }) });
+  );
 };
 const Headers = (0, import_withConditionalDnDColumnContext.withConditionalDnDColumnContext)(HeadersComp);
 //# sourceMappingURL=index.js.map

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

@@ -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/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;",
+  "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 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuCX;AAvCZ,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,8BAA0B,oDAAc,CAAC,UAAU,MAAM,uBAAuB;AACtF,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;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MAEA,sDAAC,gDAAmB,OAAO,gBACzB;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,UAEC,yBAAe,IAAI,CAAC,GAAG,UACtB,4CAAC,kDAAwB,QAAQ,GAAc,QAAQ,UAAU,eAAe,SAAS,KAAhD,EAAE,EAAiD,CAC7F;AAAA;AAAA,MACH,GACF;AAAA;AAAA,EACF;AAEJ;AAEO,MAAM,cAAU,wEAAgC,WAAW;",
   "names": []
 }

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

@@ -75,18 +75,27 @@ const useHeaderCellHandlers = ({
   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 closeFilterMenuIfOpen = (0, import_createInternalAndPropsContext.useInternalStore)((state) => state.closeFilterMenuIfOpen);
+  const resetAllHeadersExcept = (0, import_createInternalAndPropsContext.useInternalStore)((state) => state.resetAllHeadersExcept);
+  const hoveredColumnId = (0, import_createInternalAndPropsContext.useInternalStore)((state) => state.hoveredColumnId);
+  const setHoveredColumnId = (0, import_createInternalAndPropsContext.useInternalStore)((state) => state.setHoveredColumnId);
   const reduxHeaders = (0, import_createInternalAndPropsContext.useInternalStore)((state) => state.reduxHeaders);
   const reduxHeader = (0, import_react.useMemo)(() => reduxHeaders[column.id], [reduxHeaders, column]);
   const headerRef = referenceColumn.current;
   const onMouseEnter = (0, import_react.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 = (0, import_react.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 = (0, import_react.useCallback)(() => {
+    closeFilterMenuIfOpen(column.id);
     if (column.canSort) {
       onColumnSortChange?.({
         column: column.id,
@@ -98,7 +107,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 = (0, import_react.useCallback)(
     (e) => {
@@ -157,10 +174,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,
@@ -177,6 +196,7 @@ const useHeaderCellHandlers = ({
       hasFilter,
       headerRef,
       patchHeader,
+      resetAllHeadersExcept,
       reduxHeader,
       resizeHandlerRef,
       setFocusedRowId,
@@ -185,13 +205,29 @@ const useHeaderCellHandlers = ({
   );
   const onBlur = (0, import_react.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/cjs/parts/Headers/useHeaderCellHandlers.js.map

@@ -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/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", "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  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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -35,8 +35,9 @@ var React = __toESM(require("react"));
 var import_lodash_es = require("lodash-es");
 var import_react = __toESM(require("react"));
 var import_createInternalAndPropsContext = require("../../configs/useStore/createInternalAndPropsContext.js");
+var import_constants = require("../../configs/constants.js");
 var import_gridLayoutHelpers = require("../../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 ?? import_constants.DEFAULT_MIN_COLUMN_WIDTH), max ?? import_constants.DEFAULT_MAX_COLUMN_WIDTH);
 const getCorrectDelta = (e) => {
   let multiplier = 1;
   if (e.shiftKey) multiplier *= 5;
@@ -57,6 +58,8 @@ const useHeaderResizer = ({
   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 colsLayoutStyle = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.colsLayoutStyle);
+  const closeFilterMenuIfOpen = (0, import_createInternalAndPropsContext.useInternalStore)((state) => state.closeFilterMenuIfOpen);
   const [isResizing, setIsResizing] = (0, import_react.useState)(false);
   const visibleColumnsCopy = (0, import_react.useMemo)(() => (0, import_lodash_es.cloneDeep)(visibleColumns), [visibleColumns]);
   const visibleColumnsOnGridLayout = (0, import_react.useMemo)(
@@ -74,6 +77,9 @@ const useHeaderResizer = ({
   );
   const realColumnIndexRef = import_react.default.useRef(realColumnIndex);
   realColumnIndexRef.current = realColumnIndex;
+  const [columnWidth, setColumnWidth] = (0, import_react.useState)(
+    visibleColumnsOnGridLayout[realColumnIndex]?.width ?? (colsLayoutStyle === import_constants.ColsLayoutStyle.Auto ? void 0 : 150)
+  );
   const pushColumnSizeChange = (0, import_react.useCallback)(
     (nextWidth) => {
       if (nextWidth === visibleColumnsOnGridLayout[realColumnIndexRef.current].width) return;
@@ -85,7 +91,8 @@ const useHeaderResizer = ({
   );
   const onResizeStart = (0, import_react.useCallback)(() => {
     setIsResizing(true);
-  }, []);
+    closeFilterMenuIfOpen(columnId);
+  }, [closeFilterMenuIfOpen, columnId]);
   const onResizeEnd = (0, import_react.useCallback)(() => {
     setIsResizing(false);
     pushColumnSizeChange((0, import_gridLayoutHelpers.getGridLayout)(virtualListRef.current)[realColumnIndexRef.current]);
@@ -103,6 +110,7 @@ const useHeaderResizer = ({
       );
       (0, import_gridLayoutHelpers.changeGridLayout)(virtualListRef.current, realColumnIndexRef.current, widthWithDelta);
       (0, import_gridLayoutHelpers.setSubColumnsGridLayout)(virtualListRef.current, visibleColumnsCopy);
+      setColumnWidth(widthWithDelta);
       e.preventDefault();
       e.stopPropagation();
     },
@@ -127,13 +135,15 @@ const useHeaderResizer = ({
       );
       (0, import_gridLayoutHelpers.changeGridLayout)(virtualListRef.current, realColumnIndexRef.current, widthWithDelta);
       (0, import_gridLayoutHelpers.setSubColumnsGridLayout)(virtualListRef.current, visibleColumnsCopy);
-      pushColumnSizeChange((0, import_gridLayoutHelpers.getGridLayout)(virtualListRef.current)[realColumnIndexRef.current] + delta);
+      setColumnWidth(widthWithDelta);
+      pushColumnSizeChange(widthWithDelta);
       (0, import_gridLayoutHelpers.removeGridLayout)(virtualListRef.current);
     },
     [pushColumnSizeChange, virtualListRef, visibleColumnsCopy, visibleColumnsOnGridLayout]
   );
   return {
     isResizing,
+    columnWidth,
     onResizeStart,
     onResizeEnd,
     onResizeHandler,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Headers/useHeaderResizer.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { cloneDeep } from 'lodash-es';\nimport React, { 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  const realColumnIndexRef = React.useRef(realColumnIndex);\n  realColumnIndexRef.current = realColumnIndex;\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 === visibleColumnsOnGridLayout[realColumnIndexRef.current].width) return;\n      onColumnResize?.(columnId, nextWidth);\n      // this next line is updating also the visibleColumnsCopy via mutable changes\n      //   the mutable changes here works because what we mutate is a cloneDeep of the columns\n      visibleColumnsOnGridLayout[realColumnIndexRef.current].width = nextWidth;\n      onColumnSizeChange(visibleColumnsCopy, columnId, nextWidth);\n    },\n    [columnId, onColumnResize, onColumnSizeChange, realColumnIndexRef, 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)[realColumnIndexRef.current]);\n    removeGridLayout(virtualListRef.current);\n  }, [pushColumnSizeChange, virtualListRef, realColumnIndexRef]);\n\n  // Mouse resize\n  const onResizeHandler = useCallback(\n    (e: MouseEvent | TouchEvent) => {\n      if (realColumnIndexRef.current === -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)[realColumnIndexRef.current];\n\n      const widthWithDelta = narrow(\n        originalWidth + delta,\n        visibleColumnsOnGridLayout[realColumnIndexRef.current].minWidth,\n        visibleColumnsOnGridLayout[realColumnIndexRef.current].maxWidth,\n      );\n\n      changeGridLayout(virtualListRef.current, realColumnIndexRef.current, 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    [innerRef, virtualListRef, visibleColumnsCopy, visibleColumnsOnGridLayout],\n  );\n\n  // Keyboard resize\n  const handleKeyboardResize = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (realColumnIndexRef.current === -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)[realColumnIndexRef.current];\n\n      const widthWithDelta = narrow(\n        originalWidth + delta,\n        visibleColumnsOnGridLayout[realColumnIndexRef.current].minWidth,\n        visibleColumnsOnGridLayout[realColumnIndexRef.current].maxWidth,\n      );\n\n      changeGridLayout(virtualListRef.current, realColumnIndexRef.current, widthWithDelta);\n      setSubColumnsGridLayout(virtualListRef.current, visibleColumnsCopy);\n\n      pushColumnSizeChange(getGridLayout(virtualListRef.current)[realColumnIndexRef.current] + delta);\n      removeGridLayout(virtualListRef.current);\n    },\n    [pushColumnSizeChange, 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-es';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport { ColsLayoutStyle, DEFAULT_MAX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH } from '../../configs/constants.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 ?? DEFAULT_MIN_COLUMN_WIDTH), max ?? DEFAULT_MAX_COLUMN_WIDTH);\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  const colsLayoutStyle = usePropsStore((state) => state.colsLayoutStyle);\n  const closeFilterMenuIfOpen = useInternalStore((state) => state.closeFilterMenuIfOpen);\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  const realColumnIndexRef = React.useRef(realColumnIndex);\n  realColumnIndexRef.current = realColumnIndex;\n\n  // PUI-17784: real width in pixels, fed to aria-valuenow/valuetext. Initialized synchronously from\n  // props \u2014 no effect needed. Mirrors columnsToGridImpl's own default (helpers/columnsToGrid.tsx,\n  // keep both in sync if that default ever changes): an explicit column.width wins; otherwise Fixed\n  // layout resolves to a known 150px; Auto layout with no explicit width has no synchronous numeric\n  // value (it's a flexible '1fr' the browser resolves at layout time) \u2014 aria-valuenow is legitimately\n  // absent until the user's first resize populates it via the handlers below, which already call\n  // setColumnWidth on every mouse/keyboard resize using the real applied width.\n  const [columnWidth, setColumnWidth] = useState<number | undefined>(\n    visibleColumnsOnGridLayout[realColumnIndex]?.width ?? (colsLayoutStyle === ColsLayoutStyle.Auto ? undefined : 150),\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 === visibleColumnsOnGridLayout[realColumnIndexRef.current].width) return;\n      onColumnResize?.(columnId, nextWidth);\n      // this next line is updating also the visibleColumnsCopy via mutable changes\n      //   the mutable changes here works because what we mutate is a cloneDeep of the columns\n      visibleColumnsOnGridLayout[realColumnIndexRef.current].width = nextWidth;\n      onColumnSizeChange(visibleColumnsCopy, columnId, nextWidth);\n    },\n    [columnId, onColumnResize, onColumnSizeChange, realColumnIndexRef, visibleColumnsCopy, visibleColumnsOnGridLayout],\n  );\n\n  const onResizeStart = useCallback(() => {\n    setIsResizing(true);\n    /**\n     * PUI-18785: the resize handle shares the same containment root cause as the header click and\n     * drag handle \u2014 see closeFilterMenuIfOpen in useStore.tsx.\n     */\n    closeFilterMenuIfOpen(columnId);\n  }, [closeFilterMenuIfOpen, columnId]);\n\n  const onResizeEnd = useCallback(() => {\n    setIsResizing(false);\n    pushColumnSizeChange(getGridLayout(virtualListRef.current)[realColumnIndexRef.current]);\n    removeGridLayout(virtualListRef.current);\n  }, [pushColumnSizeChange, virtualListRef, realColumnIndexRef]);\n\n  // Mouse resize\n  const onResizeHandler = useCallback(\n    (e: MouseEvent | TouchEvent) => {\n      if (realColumnIndexRef.current === -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)[realColumnIndexRef.current];\n\n      const widthWithDelta = narrow(\n        originalWidth + delta,\n        visibleColumnsOnGridLayout[realColumnIndexRef.current].minWidth,\n        visibleColumnsOnGridLayout[realColumnIndexRef.current].maxWidth,\n      );\n\n      changeGridLayout(virtualListRef.current, realColumnIndexRef.current, widthWithDelta);\n      setSubColumnsGridLayout(virtualListRef.current, visibleColumnsCopy);\n      setColumnWidth(widthWithDelta);\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    [innerRef, virtualListRef, visibleColumnsCopy, visibleColumnsOnGridLayout],\n  );\n\n  // Keyboard resize\n  const handleKeyboardResize = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (realColumnIndexRef.current === -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)[realColumnIndexRef.current];\n\n      const widthWithDelta = narrow(\n        originalWidth + delta,\n        visibleColumnsOnGridLayout[realColumnIndexRef.current].minWidth,\n        visibleColumnsOnGridLayout[realColumnIndexRef.current].maxWidth,\n      );\n\n      changeGridLayout(virtualListRef.current, realColumnIndexRef.current, widthWithDelta);\n      setSubColumnsGridLayout(virtualListRef.current, visibleColumnsCopy);\n      setColumnWidth(widthWithDelta);\n\n      /**\n       * Commit the already-clamped width. getGridLayout() here would just re-read what\n       * changeGridLayout() set above (widthWithDelta) \u2014 adding delta again double-counted it and\n       * committed a width past minWidth/maxWidth (PUI-12696).\n       */\n      pushColumnSizeChange(widthWithDelta);\n      removeGridLayout(virtualListRef.current);\n    },\n    [pushColumnSizeChange, virtualListRef, visibleColumnsCopy, visibleColumnsOnGridLayout],\n  );\n\n  return {\n    isResizing,\n    columnWidth,\n    onResizeStart,\n    onResizeEnd,\n    onResizeHandler,\n    handleKeyboardResize,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["React"]
 }

package/dist/cjs/parts/HoC/withDnDSortableColumnContext.js

@@ -42,6 +42,7 @@ var import_DnDGroupContext = require("./DnDGroupContext.js");
 const withDnDSortableColumnContext = (Component) => (props) => {
   const dragAndDropColumns = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.dragAndDropColumns);
   const setIsHeaderCellDragging = (0, import_createInternalAndPropsContext.useInternalStore)((state) => state.setIsHeaderCellDragging);
+  const closeFilterMenuIfOpen = (0, import_createInternalAndPropsContext.useInternalStore)((state) => state.closeFilterMenuIfOpen);
   const { activeIndex } = (0, import_react.useContext)(import_DnDGroupContext.DnDGroupContext);
   const draggableOptions = (0, import_react.useMemo)(
     () => ({
@@ -53,10 +54,11 @@ const withDnDSortableColumnContext = (Component) => (props) => {
   (0, import_react.useEffect)(() => {
     if (useSortableHelpers.isDragging) {
       setIsHeaderCellDragging(true);
+      closeFilterMenuIfOpen(props.header.id);
     } else {
       setIsHeaderCellDragging(false);
     }
-  }, [useSortableHelpers.isDragging, setIsHeaderCellDragging]);
+  }, [useSortableHelpers.isDragging, setIsHeaderCellDragging, closeFilterMenuIfOpen, props.header.id]);
   const draggableProps = (0, import_react.useMemo)(() => {
     if (!dragAndDropColumns) return false;
     const { index, overIndex } = useSortableHelpers;