@elliemae/ds-data-table 3.57.0-next.9 → 3.57.0-rc.1

package/dist/esm/exported-related/FilterPopover/index.js

@@ -16,6 +16,10 @@ const FilterButton = styled("span", { name: DSDataTableName, slot: DSDataTableSl
 const PopperContent = styled("div", { name: DSDataTableName, slot: DSDataTableSlots.FILTER_POPOVER_CONTENT })`
   background-color: #fff;
 `;
+const StyledPoppoverJS = styled(DSPopperJS, {
+  name: DSDataTableName,
+  slot: DSDataTableSlots.FILTER_POPOVER
+})``;
 const ButtonTrap = ({ cb }) => /* @__PURE__ */ jsx(
   "span",
   {
@@ -30,6 +34,12 @@ const FilterPopover = (props) => {
   const { column, customStyles, reduxHeader, menuContent, columnId, ariaLabel, triggerIcon, innerRef } = props;
   const filters = usePropsStore((state) => state.filters);
   const getOwnerProps = usePropsStore((store) => store.get);
+  const getOwnerPropsArguments = useCallback(
+    () => ({
+      columnId: column.id
+    }),
+    [column.id]
+  );
   const patchHeader = useInternalStore((state) => state.patchHeader);
   const { isIconVisible, isMenuOpen } = useGetFilterVisibility(reduxHeader);
   const [buttonReference, setButtonReference] = useState(null);
@@ -76,7 +86,7 @@ const FilterPopover = (props) => {
           }
         ),
         buttonReference && /* @__PURE__ */ jsx(
-          DSPopperJS,
+          StyledPoppoverJS,
           {
             actionRef,
             referenceElement: buttonReference,
@@ -92,6 +102,8 @@ const FilterPopover = (props) => {
               minWidth: column.ref?.current?.offsetWidth ?? "0px"
             },
             placementOrderPreference: ["bottom-end", "top-end"],
+            getOwnerProps,
+            getOwnerPropsArguments,
             children: /* @__PURE__ */ jsxs(PopperContent, { getOwnerProps, children: [
               /* @__PURE__ */ jsx(ButtonTrap, { cb: buttonTrapCallback }),
               menuContent,

package/dist/esm/exported-related/FilterPopover/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/FilterPopover/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/no-cycle */\n/* eslint-disable no-void */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport type { DSPopperJST } from '@elliemae/ds-popperjs';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { mergeRefs, styled } from '@elliemae/ds-system';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { DSDataTableName, DSDataTableSlots } from '../../constants/index.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { FilterPopoverProps } from './types.js';\nimport { useGetFilterHandlers } from './useGetFilterHandlers.js';\nimport { useGetFilterVisibility } from './useGetFilterVisibility.js';\n\nconst FilterButton = styled('span', { name: DSDataTableName, slot: DSDataTableSlots.FILTER_POPOVER_BUTTON })<{\n  hide: boolean;\n}>`\n  display: inline-grid;\n  ${(props) => (props.hide ? 'opacity: 0; display: none; width: 0;' : '')}\n`;\n\nconst PopperContent = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.FILTER_POPOVER_CONTENT })`\n  background-color: #fff;\n`;\n\nconst ButtonTrap = ({ cb }: { cb: () => void }) => (\n  <span\n    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n    tabIndex={0}\n    onFocus={(e: React.FocusEvent) => {\n      e.stopPropagation();\n      cb();\n    }}\n  />\n);\n\nexport const FilterPopover: React.ComponentType<FilterPopoverProps> = (props: FilterPopoverProps) => {\n  const { column, customStyles, reduxHeader, menuContent, columnId, ariaLabel, triggerIcon, innerRef } = props;\n\n  const filters = usePropsStore((state) => state.filters);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  const patchHeader = useInternalStore((state) => state.patchHeader);\n\n  const { isIconVisible, isMenuOpen } = useGetFilterVisibility(reduxHeader);\n\n  const [buttonReference, setButtonReference] = useState<HTMLButtonElement | null>(null);\n\n  const [isButtonFocused, setIsButtonFocused] = useState(false);\n\n  const { handleTriggerClick, handleClickOutsideMenu, handleMenuOnKeyDown, handleTriggerOnFocus, handleTriggerOnBlur } =\n    useGetFilterHandlers(props, isMenuOpen, buttonReference, setIsButtonFocused);\n\n  const buttonTrapCallback = useCallback(() => {\n    patchHeader(columnId, { hideFilterMenu: true, hideFilterButton: false });\n    buttonReference?.focus();\n  }, [columnId, patchHeader, buttonReference]);\n\n  const actionRef: Required<DSPopperJST.Props>['actionRef'] = useRef({\n    update: null,\n  });\n\n  useEffect(() => {\n    // When the filters change, we need to update the popper position,\n    // because the filter bar might push the datatable up or down, causing the popper to be misaligned\n    void actionRef.current.update?.();\n  }, [filters]);\n\n  return (\n    <div\n      // This is here to prevent propagation, and not trigger the sort functionality\n      onClick={(e) => e.stopPropagation()}\n      onKeyDown={handleMenuOnKeyDown}\n    >\n      <FilterButton\n        hide={!isIconVisible}\n        data-testid={DATA_TESTID.DATA_TABLE_FILTER_BUTTON}\n        getOwnerProps={getOwnerProps}\n      >\n        <DSButtonV2\n          buttonType=\"icon\"\n          size=\"s\"\n          onClick={handleTriggerClick}\n          onFocus={handleTriggerOnFocus}\n          onBlur={handleTriggerOnBlur}\n          innerRef={mergeRefs(isIconVisible && setButtonReference, innerRef)}\n          tabIndex={reduxHeader?.withTabStops ? 0 : -1}\n          aria-label={ariaLabel}\n          aria-hidden={!isButtonFocused}\n          data-testid={DATA_TESTID.DATA_TABLE_FILTER_BUTTON_ELEMENT}\n        >\n          {triggerIcon}\n        </DSButtonV2>\n      </FilterButton>\n      {buttonReference && (\n        <DSPopperJS\n          actionRef={actionRef}\n          referenceElement={buttonReference}\n          showPopover={isMenuOpen}\n          closeContextMenu={handleClickOutsideMenu}\n          data-testid={DATA_TESTID.DATA_TABLE_FILTER_MENU_CONTENT}\n          startPlacementPreference=\"bottom-end\"\n          customOffset={[5, 4]}\n          withoutArrow\n          withoutAnimation\n          extraPopperStyles={{\n            ...customStyles,\n            minWidth: column.ref?.current?.offsetWidth ?? '0px',\n          }}\n          placementOrderPreference={['bottom-end', 'top-end']}\n        >\n          <PopperContent getOwnerProps={getOwnerProps}>\n            <ButtonTrap cb={buttonTrapCallback} />\n            {menuContent}\n            <ButtonTrap cb={buttonTrapCallback} />\n          </PopperContent>\n        </DSPopperJS>\n      )}\n    </div>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/no-cycle */\n/* eslint-disable no-void */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport type { DSPopperJST } from '@elliemae/ds-popperjs';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { mergeRefs, styled } from '@elliemae/ds-system';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { DSDataTableName, DSDataTableSlots } from '../../constants/index.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { FilterPopoverProps } from './types.js';\nimport { useGetFilterHandlers } from './useGetFilterHandlers.js';\nimport { useGetFilterVisibility } from './useGetFilterVisibility.js';\n\nconst FilterButton = styled('span', { name: DSDataTableName, slot: DSDataTableSlots.FILTER_POPOVER_BUTTON })<{\n  hide: boolean;\n}>`\n  display: inline-grid;\n  ${(props) => (props.hide ? 'opacity: 0; display: none; width: 0;' : '')}\n`;\n\nconst PopperContent = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.FILTER_POPOVER_CONTENT })`\n  background-color: #fff;\n`;\n\nconst StyledPoppoverJS = styled(DSPopperJS, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.FILTER_POPOVER,\n})``;\n\nconst ButtonTrap = ({ cb }: { cb: () => void }) => (\n  <span\n    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n    tabIndex={0}\n    onFocus={(e: React.FocusEvent) => {\n      e.stopPropagation();\n      cb();\n    }}\n  />\n);\n\nexport const FilterPopover: React.ComponentType<FilterPopoverProps> = (props: FilterPopoverProps) => {\n  const { column, customStyles, reduxHeader, menuContent, columnId, ariaLabel, triggerIcon, innerRef } = props;\n\n  const filters = usePropsStore((state) => state.filters);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  const getOwnerPropsArguments = useCallback(\n    () => ({\n      columnId: column.id,\n    }),\n    [column.id],\n  );\n\n  const patchHeader = useInternalStore((state) => state.patchHeader);\n\n  const { isIconVisible, isMenuOpen } = useGetFilterVisibility(reduxHeader);\n\n  const [buttonReference, setButtonReference] = useState<HTMLButtonElement | null>(null);\n\n  const [isButtonFocused, setIsButtonFocused] = useState(false);\n\n  const { handleTriggerClick, handleClickOutsideMenu, handleMenuOnKeyDown, handleTriggerOnFocus, handleTriggerOnBlur } =\n    useGetFilterHandlers(props, isMenuOpen, buttonReference, setIsButtonFocused);\n\n  const buttonTrapCallback = useCallback(() => {\n    patchHeader(columnId, { hideFilterMenu: true, hideFilterButton: false });\n    buttonReference?.focus();\n  }, [columnId, patchHeader, buttonReference]);\n\n  const actionRef: Required<DSPopperJST.Props>['actionRef'] = useRef({\n    update: null,\n  });\n\n  useEffect(() => {\n    // When the filters change, we need to update the popper position,\n    // because the filter bar might push the datatable up or down, causing the popper to be misaligned\n    void actionRef.current.update?.();\n  }, [filters]);\n\n  return (\n    <div\n      // This is here to prevent propagation, and not trigger the sort functionality\n      onClick={(e) => e.stopPropagation()}\n      onKeyDown={handleMenuOnKeyDown}\n    >\n      <FilterButton\n        hide={!isIconVisible}\n        data-testid={DATA_TESTID.DATA_TABLE_FILTER_BUTTON}\n        getOwnerProps={getOwnerProps}\n      >\n        <DSButtonV2\n          buttonType=\"icon\"\n          size=\"s\"\n          onClick={handleTriggerClick}\n          onFocus={handleTriggerOnFocus}\n          onBlur={handleTriggerOnBlur}\n          innerRef={mergeRefs(isIconVisible && setButtonReference, innerRef)}\n          tabIndex={reduxHeader?.withTabStops ? 0 : -1}\n          aria-label={ariaLabel}\n          aria-hidden={!isButtonFocused}\n          data-testid={DATA_TESTID.DATA_TABLE_FILTER_BUTTON_ELEMENT}\n        >\n          {triggerIcon}\n        </DSButtonV2>\n      </FilterButton>\n      {buttonReference && (\n        <StyledPoppoverJS\n          actionRef={actionRef}\n          referenceElement={buttonReference}\n          showPopover={isMenuOpen}\n          closeContextMenu={handleClickOutsideMenu}\n          data-testid={DATA_TESTID.DATA_TABLE_FILTER_MENU_CONTENT}\n          startPlacementPreference=\"bottom-end\"\n          customOffset={[5, 4]}\n          withoutArrow\n          withoutAnimation\n          extraPopperStyles={{\n            ...customStyles,\n            minWidth: column.ref?.current?.offsetWidth ?? '0px',\n          }}\n          placementOrderPreference={['bottom-end', 'top-end']}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          <PopperContent getOwnerProps={getOwnerProps}>\n            <ButtonTrap cb={buttonTrapCallback} />\n            {menuContent}\n            <ButtonTrap cb={buttonTrapCallback} />\n          </PopperContent>\n        </StyledPoppoverJS>\n      )}\n    </div>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACgCrB,cA8FQ,YA9FR;AA7BF,SAAS,kBAAkB;AAE3B,SAAS,kBAAkB;AAC3B,SAAS,WAAW,cAAc;AAClC,SAAgB,aAAa,WAAW,QAAQ,gBAAgB;AAChE,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB,qBAAqB;AAEhD,SAAS,4BAA4B;AACrC,SAAS,8BAA8B;AAEvC,MAAM,eAAe,OAAO,QAAQ,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,sBAAsB,CAAC;AAAA;AAAA,IAIvG,CAAC,UAAW,MAAM,OAAO,yCAAyC,EAAG;AAAA;AAGzE,MAAM,gBAAgB,OAAO,OAAO,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,uBAAuB,CAAC;AAAA;AAAA;AAI5G,MAAM,mBAAmB,OAAO,YAAY;AAAA,EAC1C,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAED,MAAM,aAAa,CAAC,EAAE,GAAG,MACvB;AAAA,EAAC;AAAA;AAAA,IAEC,UAAU;AAAA,IACV,SAAS,CAAC,MAAwB;AAChC,QAAE,gBAAgB;AAClB,SAAG;AAAA,IACL;AAAA;AACF;AAGK,MAAM,gBAAyD,CAAC,UAA8B;AACnG,QAAM,EAAE,QAAQ,cAAc,aAAa,aAAa,UAAU,WAAW,aAAa,SAAS,IAAI;AAEvG,QAAM,UAAU,cAAc,CAAC,UAAU,MAAM,OAAO;AACtD,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AAExD,QAAM,yBAAyB;AAAA,IAC7B,OAAO;AAAA,MACL,UAAU,OAAO;AAAA,IACnB;AAAA,IACA,CAAC,OAAO,EAAE;AAAA,EACZ;AAEA,QAAM,cAAc,iBAAiB,CAAC,UAAU,MAAM,WAAW;AAEjE,QAAM,EAAE,eAAe,WAAW,IAAI,uBAAuB,WAAW;AAExE,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAmC,IAAI;AAErF,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAS,KAAK;AAE5D,QAAM,EAAE,oBAAoB,wBAAwB,qBAAqB,sBAAsB,oBAAoB,IACjH,qBAAqB,OAAO,YAAY,iBAAiB,kBAAkB;AAE7E,QAAM,qBAAqB,YAAY,MAAM;AAC3C,gBAAY,UAAU,EAAE,gBAAgB,MAAM,kBAAkB,MAAM,CAAC;AACvE,qBAAiB,MAAM;AAAA,EACzB,GAAG,CAAC,UAAU,aAAa,eAAe,CAAC;AAE3C,QAAM,YAAsD,OAAO;AAAA,IACjE,QAAQ;AAAA,EACV,CAAC;AAED,YAAU,MAAM;AAGd,SAAK,UAAU,QAAQ,SAAS;AAAA,EAClC,GAAG,CAAC,OAAO,CAAC;AAEZ,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,MAClC,WAAW;AAAA,MAEX;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,CAAC;AAAA,YACP,eAAa,YAAY;AAAA,YACzB;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,YAAW;AAAA,gBACX,MAAK;AAAA,gBACL,SAAS;AAAA,gBACT,SAAS;AAAA,gBACT,QAAQ;AAAA,gBACR,UAAU,UAAU,iBAAiB,oBAAoB,QAAQ;AAAA,gBACjE,UAAU,aAAa,eAAe,IAAI;AAAA,gBAC1C,cAAY;AAAA,gBACZ,eAAa,CAAC;AAAA,gBACd,eAAa,YAAY;AAAA,gBAExB;AAAA;AAAA,YACH;AAAA;AAAA,QACF;AAAA,QACC,mBACC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,kBAAkB;AAAA,YAClB,aAAa;AAAA,YACb,kBAAkB;AAAA,YAClB,eAAa,YAAY;AAAA,YACzB,0BAAyB;AAAA,YACzB,cAAc,CAAC,GAAG,CAAC;AAAA,YACnB,cAAY;AAAA,YACZ,kBAAgB;AAAA,YAChB,mBAAmB;AAAA,cACjB,GAAG;AAAA,cACH,UAAU,OAAO,KAAK,SAAS,eAAe;AAAA,YAChD;AAAA,YACA,0BAA0B,CAAC,cAAc,SAAS;AAAA,YAClD;AAAA,YACA;AAAA,YAEA,+BAAC,iBAAc,eACb;AAAA,kCAAC,cAAW,IAAI,oBAAoB;AAAA,cACnC;AAAA,cACD,oBAAC,cAAW,IAAI,oBAAoB;AAAA,eACtC;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;",
   "names": []
 }

package/dist/esm/exported-related/index.js

@@ -14,12 +14,13 @@ import {
   currencyRangeFilterFn,
   dateRangeFilterFn
 } from "./Filters/index.js";
-import { FilterBarDropdownMenu } from "./FilterBar/index.js";
+import { FilterBarDropdownMenu, FilterMenuButton } from "./FilterBar/index.js";
 import { SkeletonCell, SkeletonHeaderCell } from "./Skeleton/index.js";
 export {
   EditableCell,
   FILTER_TYPES,
   FilterBarDropdownMenu,
+  FilterMenuButton,
   FilterPopover,
   ROW_VARIANTS,
   ROW_VARIANT_COMPACT_KEY,

package/dist/esm/exported-related/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { FilterPopover } from './FilterPopover/index.js';\nexport { EditableCell } from './EditableCell.js';\nexport { Toolbar } from './Toolbar/index.js';\nexport { groupBy } from './groupBy.js';\nexport { FILTER_TYPES } from './FilterTypes.js';\nexport { ROW_VARIANTS, ROW_VARIANT_KEY, ROW_VARIANT_COMPACT_KEY } from './RowVariants.js';\nexport {\n  applyOutOfTheBoxFilters,\n  singleDateFilterFn,\n  singleSelectFilterFn,\n  multiSelectFilterFn,\n  numberRangeFilterFn,\n  currencyRangeFilterFn,\n  dateRangeFilterFn,\n} from './Filters/index.js';\nexport { FilterBarDropdownMenu } from './FilterBar/index.js';\nexport { SkeletonCell, SkeletonHeaderCell } from './Skeleton/index.js';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,qBAAqB;AAC9B,SAAS,oBAAoB;AAC7B,SAAS,eAAe;AACxB,SAAS,eAAe;AACxB,SAAS,oBAAoB;AAC7B,SAAS,cAAc,iBAAiB,+BAA+B;AACvE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,6BAA6B;AACtC,SAAS,cAAc,0BAA0B;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { FilterPopover } from './FilterPopover/index.js';\nexport { EditableCell } from './EditableCell.js';\nexport { Toolbar } from './Toolbar/index.js';\nexport { groupBy } from './groupBy.js';\nexport { FILTER_TYPES } from './FilterTypes.js';\nexport { ROW_VARIANTS, ROW_VARIANT_KEY, ROW_VARIANT_COMPACT_KEY } from './RowVariants.js';\nexport {\n  applyOutOfTheBoxFilters,\n  singleDateFilterFn,\n  singleSelectFilterFn,\n  multiSelectFilterFn,\n  numberRangeFilterFn,\n  currencyRangeFilterFn,\n  dateRangeFilterFn,\n} from './Filters/index.js';\nexport { FilterBarDropdownMenu, FilterMenuButton } from './FilterBar/index.js';\nexport { SkeletonCell, SkeletonHeaderCell } from './Skeleton/index.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,qBAAqB;AAC9B,SAAS,oBAAoB;AAC7B,SAAS,eAAe;AACxB,SAAS,eAAe;AACxB,SAAS,oBAAoB;AAC7B,SAAS,cAAc,iBAAiB,+BAA+B;AACvE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,uBAAuB,wBAAwB;AACxD,SAAS,cAAc,0BAA0B;",
   "names": []
 }

package/dist/esm/index.js

@@ -17,6 +17,7 @@ import {
   currencyRangeFilterFn,
   dateRangeFilterFn,
   FilterBarDropdownMenu,
+  FilterMenuButton,
   SkeletonCell,
   SkeletonHeaderCell
 } from "./exported-related/index.js";
@@ -47,6 +48,7 @@ export {
   EditableCell,
   FILTER_TYPES,
   FilterBarDropdownMenu,
+  FilterMenuButton,
   FilterPopover,
   INTERNAL_COLUMNS,
   ROW_VARIANTS,

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DataTable, DataTableWithSchema } from './DataTable.js';\n\nexport {\n  FilterPopover,\n  EditableCell,\n  Toolbar,\n  groupBy,\n  FILTER_TYPES,\n  ROW_VARIANTS,\n  ROW_VARIANT_KEY,\n  ROW_VARIANT_COMPACT_KEY,\n  applyOutOfTheBoxFilters,\n  singleDateFilterFn,\n  singleSelectFilterFn,\n  multiSelectFilterFn,\n  numberRangeFilterFn,\n  currencyRangeFilterFn,\n  dateRangeFilterFn,\n  FilterBarDropdownMenu,\n  SkeletonCell,\n  SkeletonHeaderCell,\n} from './exported-related/index.js';\n\nexport {\n  actionColumn,\n  expandRowColumn,\n  multiSelectColumn,\n  singleSelectColumn,\n  dragHandleColumn,\n  INTERNAL_COLUMNS,\n} from './addons/Columns/index.js';\n\nexport type { DSDataTableT } from './react-desc-prop-types.js';\n\nexport { useWholeStore } from './configs/useStore/useStore.js';\n\nexport {\n  DATA_TABLE_DATA_TESTID,\n  DATA_TABLE_SLOTS,\n  DSDataTableDataTestIds,\n  DSDataTableName,\n  DSDataTableSlots,\n} from './constants/index.js';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW,2BAA2B;AAE/C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAIP,SAAS,qBAAqB;AAE9B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DataTable, DataTableWithSchema } from './DataTable.js';\n\nexport {\n  FilterPopover,\n  EditableCell,\n  Toolbar,\n  groupBy,\n  FILTER_TYPES,\n  ROW_VARIANTS,\n  ROW_VARIANT_KEY,\n  ROW_VARIANT_COMPACT_KEY,\n  applyOutOfTheBoxFilters,\n  singleDateFilterFn,\n  singleSelectFilterFn,\n  multiSelectFilterFn,\n  numberRangeFilterFn,\n  currencyRangeFilterFn,\n  dateRangeFilterFn,\n  FilterBarDropdownMenu,\n  FilterMenuButton,\n  SkeletonCell,\n  SkeletonHeaderCell,\n} from './exported-related/index.js';\n\nexport {\n  actionColumn,\n  expandRowColumn,\n  multiSelectColumn,\n  singleSelectColumn,\n  dragHandleColumn,\n  INTERNAL_COLUMNS,\n} from './addons/Columns/index.js';\n\nexport type { DSDataTableT } from './react-desc-prop-types.js';\n\nexport { useWholeStore } from './configs/useStore/useStore.js';\n\nexport {\n  DATA_TABLE_DATA_TESTID,\n  DATA_TABLE_SLOTS,\n  DSDataTableDataTestIds,\n  DSDataTableName,\n  DSDataTableSlots,\n} from './constants/index.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW,2BAA2B;AAE/C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAIP,SAAS,qBAAqB;AAE9B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;",
   "names": []
 }

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { cloneDeep } from "lodash-es";
-import { useCallback, useMemo, useState } from "react";
+import React2, { useCallback, useMemo, useState } from "react";
 import { usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
 import {
   changeGridLayout,
@@ -44,43 +44,45 @@ const useHeaderResizer = ({
     () => visibleColumnsOnGridLayout.findIndex((col) => col.id === columnId),
     [columnId, visibleColumnsOnGridLayout]
   );
+  const realColumnIndexRef = React2.useRef(realColumnIndex);
+  realColumnIndexRef.current = realColumnIndex;
   const pushColumnSizeChange = useCallback(
     (nextWidth) => {
-      if (nextWidth === visibleColumnsCopy[realColumnIndex].width) return;
+      if (nextWidth === visibleColumnsOnGridLayout[realColumnIndexRef.current].width) return;
       onColumnResize?.(columnId, nextWidth);
-      visibleColumnsOnGridLayout[realColumnIndex].width = nextWidth;
+      visibleColumnsOnGridLayout[realColumnIndexRef.current].width = nextWidth;
       onColumnSizeChange(visibleColumnsCopy, columnId, nextWidth);
     },
-    [columnId, onColumnResize, onColumnSizeChange, realColumnIndex, visibleColumnsCopy, visibleColumnsOnGridLayout]
+    [columnId, onColumnResize, onColumnSizeChange, realColumnIndexRef, visibleColumnsCopy, visibleColumnsOnGridLayout]
   );
   const onResizeStart = useCallback(() => {
     setIsResizing(true);
   }, []);
   const onResizeEnd = useCallback(() => {
     setIsResizing(false);
-    pushColumnSizeChange(getGridLayout(virtualListRef.current)[realColumnIndex]);
+    pushColumnSizeChange(getGridLayout(virtualListRef.current)[realColumnIndexRef.current]);
     removeGridLayout(virtualListRef.current);
-  }, [pushColumnSizeChange, virtualListRef, realColumnIndex]);
+  }, [pushColumnSizeChange, virtualListRef, realColumnIndexRef]);
   const onResizeHandler = useCallback(
     (e) => {
-      if (realColumnIndex === -1) return;
+      if (realColumnIndexRef.current === -1) return;
       const delta = ("clientX" in e ? e.clientX : e.touches[0].clientX) - (innerRef.current?.getBoundingClientRect().x ?? 0);
-      const originalWidth = getGridLayout(virtualListRef.current)[realColumnIndex];
+      const originalWidth = getGridLayout(virtualListRef.current)[realColumnIndexRef.current];
       const widthWithDelta = narrow(
         originalWidth + delta,
-        visibleColumnsOnGridLayout[realColumnIndex].minWidth,
-        visibleColumnsOnGridLayout[realColumnIndex].maxWidth
+        visibleColumnsOnGridLayout[realColumnIndexRef.current].minWidth,
+        visibleColumnsOnGridLayout[realColumnIndexRef.current].maxWidth
       );
-      changeGridLayout(virtualListRef.current, realColumnIndex, widthWithDelta);
+      changeGridLayout(virtualListRef.current, realColumnIndexRef.current, widthWithDelta);
       setSubColumnsGridLayout(virtualListRef.current, visibleColumnsCopy);
       e.preventDefault();
       e.stopPropagation();
     },
-    [realColumnIndex, innerRef, virtualListRef, visibleColumnsCopy, visibleColumnsOnGridLayout]
+    [innerRef, virtualListRef, visibleColumnsCopy, visibleColumnsOnGridLayout]
   );
   const handleKeyboardResize = useCallback(
     (e) => {
-      if (realColumnIndex === -1) return;
+      if (realColumnIndexRef.current === -1) return;
       if (e.key === "Enter") {
         e.stopPropagation();
       }
@@ -89,18 +91,18 @@ const useHeaderResizer = ({
       }
       const delta = getCorrectDelta(e);
       if (delta === 0) return;
-      const originalWidth = getGridLayout(virtualListRef.current)[realColumnIndex];
+      const originalWidth = getGridLayout(virtualListRef.current)[realColumnIndexRef.current];
       const widthWithDelta = narrow(
         originalWidth + delta,
-        visibleColumnsOnGridLayout[realColumnIndex].minWidth,
-        visibleColumnsOnGridLayout[realColumnIndex].maxWidth
+        visibleColumnsOnGridLayout[realColumnIndexRef.current].minWidth,
+        visibleColumnsOnGridLayout[realColumnIndexRef.current].maxWidth
       );
-      changeGridLayout(virtualListRef.current, realColumnIndex, widthWithDelta);
+      changeGridLayout(virtualListRef.current, realColumnIndexRef.current, widthWithDelta);
       setSubColumnsGridLayout(virtualListRef.current, visibleColumnsCopy);
-      pushColumnSizeChange(getGridLayout(virtualListRef.current)[realColumnIndex] + delta);
+      pushColumnSizeChange(getGridLayout(virtualListRef.current)[realColumnIndexRef.current] + delta);
       removeGridLayout(virtualListRef.current);
     },
-    [pushColumnSizeChange, realColumnIndex, virtualListRef, visibleColumnsCopy, visibleColumnsOnGridLayout]
+    [pushColumnSizeChange, virtualListRef, visibleColumnsCopy, visibleColumnsOnGridLayout]
   );
   return {
     isResizing,

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

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

package/dist/esm/parts/SortByCaret.js

@@ -23,14 +23,14 @@ const SortByCaret = React2.memo(({ isSortedDesc, isReachable, reduxHeader, inner
     }
     return /* @__PURE__ */ jsx(ArrowheadUp, { color: iconColor });
   }, [isSortedDesc]);
-  if (!showSortCaret && !isMenuOpen && !isIconVisible && isSortedDesc === void 0) return null;
+  const shouldHideButton = !showSortCaret && !isMenuOpen && !isIconVisible && isSortedDesc === void 0;
   return /* @__PURE__ */ jsx(
     DSButtonV2,
     {
       onClick,
       tabIndex: isReachable ? 0 : -1,
       buttonType: "icon",
-      style: { marginLeft: "4px" },
+      style: { marginLeft: "4px", display: shouldHideButton ? "none" : "revert" },
       "aria-label": `Sort ${column.id} ${isSortedDesc ? "ascending" : "descending"}`,
       size: "s",
       innerRef,

package/dist/esm/parts/SortByCaret.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/SortByCaret.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport type { SvgIconT } from '@elliemae/ds-icons';\nimport { ArrowheadDown, ArrowheadUp, SortNeutral } from '@elliemae/ds-icons';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../configs/constants.js';\nimport { useGetFilterVisibility } from '../exported-related/FilterPopover/useGetFilterVisibility.js';\nconst iconColor: SvgIconT.ColorType = ['brand-primary', '800'];\n\nexport const SortByCaret: React.ComponentType<{\n  isSortedDesc: boolean | undefined;\n  onClick: (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n  isReachable: boolean;\n  column: DSDataTableT.InternalColumn;\n  reduxHeader: DSDataTableT.ReduxHeader;\n  innerRef: React.RefObject<HTMLButtonElement>;\n}> = React.memo(({ isSortedDesc, isReachable, reduxHeader, innerRef, column, onClick }) => {\n  const { isMenuOpen, isIconVisible } = useGetFilterVisibility(reduxHeader);\n\n  const { showSortCaret } = useMemo(\n    () =>\n      reduxHeader || {\n        showSortCaret: false,\n      },\n    [reduxHeader],\n  );\n\n  const icon = useMemo(() => {\n    if (isSortedDesc === undefined) {\n      return <SortNeutral color={iconColor} />;\n    }\n\n    if (isSortedDesc) {\n      return <ArrowheadDown size=\"s\" color={iconColor} />;\n    }\n\n    return <ArrowheadUp color={iconColor} />;\n  }, [isSortedDesc]);\n\n  if (!showSortCaret && !isMenuOpen && !isIconVisible && isSortedDesc === undefined) return null;\n\n  return (\n    <DSButtonV2\n      onClick={onClick}\n      tabIndex={isReachable ? 0 : -1}\n      buttonType=\"icon\"\n      style={{ marginLeft: '4px' }}\n      aria-label={`Sort ${column.id} ${isSortedDesc ? 'ascending' : 'descending'}`}\n      size=\"s\"\n      innerRef={innerRef}\n      data-testid={DATA_TESTID.DATA_TABLE_SORT_BUTTON}\n    >\n      {icon}\n    </DSButtonV2>\n  );\n});\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC6BV;AA7Bb,OAAOA,UAAS,eAAe;AAE/B,SAAS,eAAe,aAAa,mBAAmB;AACxD,SAAS,kBAAkB;AAE3B,SAAS,mBAAmB;AAC5B,SAAS,8BAA8B;AACvC,MAAM,YAAgC,CAAC,iBAAiB,KAAK;AAEtD,MAAM,cAORA,OAAM,KAAK,CAAC,EAAE,cAAc,aAAa,aAAa,UAAU,QAAQ,QAAQ,MAAM;AACzF,QAAM,EAAE,YAAY,cAAc,IAAI,uBAAuB,WAAW;AAExE,QAAM,EAAE,cAAc,IAAI;AAAA,IACxB,MACE,eAAe;AAAA,MACb,eAAe;AAAA,IACjB;AAAA,IACF,CAAC,WAAW;AAAA,EACd;AAEA,QAAM,OAAO,QAAQ,MAAM;AACzB,QAAI,iBAAiB,QAAW;AAC9B,aAAO,oBAAC,eAAY,OAAO,WAAW;AAAA,IACxC;AAEA,QAAI,cAAc;AAChB,aAAO,oBAAC,iBAAc,MAAK,KAAI,OAAO,WAAW;AAAA,IACnD;AAEA,WAAO,oBAAC,eAAY,OAAO,WAAW;AAAA,EACxC,GAAG,CAAC,YAAY,CAAC;AAEjB,MAAI,CAAC,iBAAiB,CAAC,cAAc,CAAC,iBAAiB,iBAAiB,OAAW,QAAO;AAE1F,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAU,cAAc,IAAI;AAAA,MAC5B,YAAW;AAAA,MACX,OAAO,EAAE,YAAY,MAAM;AAAA,MAC3B,cAAY,QAAQ,OAAO,EAAE,IAAI,eAAe,cAAc,YAAY;AAAA,MAC1E,MAAK;AAAA,MACL;AAAA,MACA,eAAa,YAAY;AAAA,MAExB;AAAA;AAAA,EACH;AAEJ,CAAC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport type { SvgIconT } from '@elliemae/ds-icons';\nimport { ArrowheadDown, ArrowheadUp, SortNeutral } from '@elliemae/ds-icons';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../configs/constants.js';\nimport { useGetFilterVisibility } from '../exported-related/FilterPopover/useGetFilterVisibility.js';\nconst iconColor: SvgIconT.ColorType = ['brand-primary', '800'];\n\nexport const SortByCaret: React.ComponentType<{\n  isSortedDesc: boolean | undefined;\n  onClick: (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n  isReachable: boolean;\n  column: DSDataTableT.InternalColumn;\n  reduxHeader: DSDataTableT.ReduxHeader;\n  innerRef: React.RefObject<HTMLButtonElement>;\n}> = React.memo(({ isSortedDesc, isReachable, reduxHeader, innerRef, column, onClick }) => {\n  const { isMenuOpen, isIconVisible } = useGetFilterVisibility(reduxHeader);\n\n  const { showSortCaret } = useMemo(\n    () =>\n      reduxHeader || {\n        showSortCaret: false,\n      },\n    [reduxHeader],\n  );\n\n  const icon = useMemo(() => {\n    if (isSortedDesc === undefined) {\n      return <SortNeutral color={iconColor} />;\n    }\n\n    if (isSortedDesc) {\n      return <ArrowheadDown size=\"s\" color={iconColor} />;\n    }\n\n    return <ArrowheadUp color={iconColor} />;\n  }, [isSortedDesc]);\n\n  /**\n   * PUI - 15155 (https://jira.elliemae.io/browse/PUI-15155)\n   * Instead of conditionally rendering null, we use CSS to hide the button.\n   * This prevents the button from unmounting when the filter menu opens or closes,\n   * ensuring that event handlers (e.g., sorting clicks) remain attached.\n   * */\n  const shouldHideButton = !showSortCaret && !isMenuOpen && !isIconVisible && isSortedDesc === undefined;\n\n  return (\n    <DSButtonV2\n      onClick={onClick}\n      tabIndex={isReachable ? 0 : -1}\n      buttonType=\"icon\"\n      style={{ marginLeft: '4px', display: shouldHideButton ? 'none' : 'revert' }}\n      aria-label={`Sort ${column.id} ${isSortedDesc ? 'ascending' : 'descending'}`}\n      size=\"s\"\n      innerRef={innerRef}\n      data-testid={DATA_TESTID.DATA_TABLE_SORT_BUTTON}\n    >\n      {icon}\n    </DSButtonV2>\n  );\n});\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC6BV;AA7Bb,OAAOA,UAAS,eAAe;AAE/B,SAAS,eAAe,aAAa,mBAAmB;AACxD,SAAS,kBAAkB;AAE3B,SAAS,mBAAmB;AAC5B,SAAS,8BAA8B;AACvC,MAAM,YAAgC,CAAC,iBAAiB,KAAK;AAEtD,MAAM,cAORA,OAAM,KAAK,CAAC,EAAE,cAAc,aAAa,aAAa,UAAU,QAAQ,QAAQ,MAAM;AACzF,QAAM,EAAE,YAAY,cAAc,IAAI,uBAAuB,WAAW;AAExE,QAAM,EAAE,cAAc,IAAI;AAAA,IACxB,MACE,eAAe;AAAA,MACb,eAAe;AAAA,IACjB;AAAA,IACF,CAAC,WAAW;AAAA,EACd;AAEA,QAAM,OAAO,QAAQ,MAAM;AACzB,QAAI,iBAAiB,QAAW;AAC9B,aAAO,oBAAC,eAAY,OAAO,WAAW;AAAA,IACxC;AAEA,QAAI,cAAc;AAChB,aAAO,oBAAC,iBAAc,MAAK,KAAI,OAAO,WAAW;AAAA,IACnD;AAEA,WAAO,oBAAC,eAAY,OAAO,WAAW;AAAA,EACxC,GAAG,CAAC,YAAY,CAAC;AAQjB,QAAM,mBAAmB,CAAC,iBAAiB,CAAC,cAAc,CAAC,iBAAiB,iBAAiB;AAE7F,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAU,cAAc,IAAI;AAAA,MAC5B,YAAW;AAAA,MACX,OAAO,EAAE,YAAY,OAAO,SAAS,mBAAmB,SAAS,SAAS;AAAA,MAC1E,cAAY,QAAQ,OAAO,EAAE,IAAI,eAAe,cAAc,YAAY;AAAA,MAC1E,MAAK;AAAA,MACL;AAAA,MACA,eAAa,YAAY;AAAA,MAExB;AAAA;AAAA,EACH;AAEJ,CAAC;",
   "names": ["React"]
 }

package/dist/types/configs/constants.d.ts

@@ -30,7 +30,6 @@ export declare const DATA_TESTID: {
     readonly DATA_TABLE_FILTER_BUTTON: "data-table-filter-menu-button";
     readonly DATA_TABLE_FILTER_BUTTON_ELEMENT: "ds-button";
     readonly DATA_TABLE_FILTER_MENU_CONTENT: "data-table-filter-menu-content";
-    readonly DATA_TABLE_FILTER_FREE_TEXT_SEARCH_WRAPPER: "data-table-filter-free-text-search_wrapper";
     readonly DATA_TABLE_FILTER_FREE_TEXT_SEARCH: "data-table-filter-free-text-search";
     readonly DATA_TABLE_ROW_CONTENT: "data-table-row-content";
     readonly DATA_TABLE_ROW: "data-table-row";

package/dist/types/constants/index.d.ts

@@ -44,6 +44,8 @@ export declare const DATA_TABLE_SLOTS: {
     readonly FILTER_BAR_WRAPPER: "filter-bar-wrapper";
     readonly FREE_TEXT_SEARCH_FILTER: "free-text-search-filter";
     readonly FREE_TEXT_SEARCH_WRAPPER: "free-text-search-wrapper";
+    readonly FILTER_POPOVER: "filter-popover";
+    readonly FILTER_BAR_MENU_BUTTON: "filter-bar-menu-button";
 };
 export declare const DATA_TABLE_DATA_TESTID: {
     /**
@@ -62,6 +64,7 @@ export declare const DATA_TABLE_DATA_TESTID: {
     ROOT: string;
     VIRTUAL_LIST_WRAPPER: string;
     GROUP_HEADER_CONTAINER: string;
+    FILTER_BAR_MENU_BUTTON: string;
     EXPAND_CELL_CONTAINER: string;
     DATA_TABLE_WRAPPER: string;
     DATA_TABLE_GLOBAL_EXPAND_CELL: string;
@@ -130,6 +133,7 @@ export declare const DATA_TABLE_DATA_TESTID: {
     LOADER_WRAPPER: "ds-datatable-loader-wrapper";
     FILTER_BAR_WRAPPER: "ds-datatable-filter-bar-wrapper";
     FREE_TEXT_SEARCH_WRAPPER: "ds-datatable-free-text-search-wrapper";
+    FILTER_POPOVER: "ds-datatable-filter-popover";
 };
 export declare const DSDataTableSlots: {
     readonly ROOT: "root";
@@ -176,6 +180,8 @@ export declare const DSDataTableSlots: {
     readonly FILTER_BAR_WRAPPER: "filter-bar-wrapper";
     readonly FREE_TEXT_SEARCH_FILTER: "free-text-search-filter";
     readonly FREE_TEXT_SEARCH_WRAPPER: "free-text-search-wrapper";
+    readonly FILTER_POPOVER: "filter-popover";
+    readonly FILTER_BAR_MENU_BUTTON: "filter-bar-menu-button";
 };
 export declare const DSDataTableDataTestIds: {
     /**
@@ -194,6 +200,7 @@ export declare const DSDataTableDataTestIds: {
     ROOT: string;
     VIRTUAL_LIST_WRAPPER: string;
     GROUP_HEADER_CONTAINER: string;
+    FILTER_BAR_MENU_BUTTON: string;
     EXPAND_CELL_CONTAINER: string;
     DATA_TABLE_WRAPPER: string;
     DATA_TABLE_GLOBAL_EXPAND_CELL: string;
@@ -262,4 +269,5 @@ export declare const DSDataTableDataTestIds: {
     LOADER_WRAPPER: "ds-datatable-loader-wrapper";
     FILTER_BAR_WRAPPER: "ds-datatable-filter-bar-wrapper";
     FREE_TEXT_SEARCH_WRAPPER: "ds-datatable-free-text-search-wrapper";
+    FILTER_POPOVER: "ds-datatable-filter-popover";
 };

package/dist/types/exported-related/FilterBar/FilterMenuButton.d.ts

@@ -0,0 +1,19 @@
+import { type DSMenuButtonT } from '@elliemae/ds-menu-button';
+import type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';
+interface FilterMenuButtonProps {
+    options?: DSMenuButtonT.MenuItemInterface[];
+    innerRef?: React.RefObject<HTMLButtonElement>;
+    onClearFilters: TypescriptHelpersT.GenericFunc;
+    onItemSelected?: (newSelection: DSMenuButtonT.SelectionableMenuNodes[], metainfo: {
+        itemNode: DSMenuButtonT.SelectionableMenuNodes;
+        event?: React.SyntheticEvent;
+    }) => void | TypescriptHelpersT.StateSetter<DSMenuButtonT.SelectionableMenuNodes[]>;
+    onActivateItem?: (itemNode: DSMenuButtonT.PseudoFocusableMenuNodes, metainfo: {
+        itemNode: DSMenuButtonT.PseudoFocusableMenuNodes;
+        event?: React.SyntheticEvent;
+    }) => void;
+    [key: string]: unknown;
+    selectedItems?: DSMenuButtonT.SelectionableMenuNodes[] | DSMenuButtonT.SelectionableMenuItemInterface[];
+}
+export declare const FilterMenuButton: React.ComponentType<FilterMenuButtonProps>;
+export {};

package/dist/types/exported-related/FilterBar/index.d.ts

@@ -1 +1,2 @@
 export { FilterBarDropdownMenu } from './FilterBarDropdownMenu.js';
+export { FilterMenuButton } from './FilterMenuButton.js';

package/dist/types/exported-related/index.d.ts

@@ -5,5 +5,5 @@ export { groupBy } from './groupBy.js';
 export { FILTER_TYPES } from './FilterTypes.js';
 export { ROW_VARIANTS, ROW_VARIANT_KEY, ROW_VARIANT_COMPACT_KEY } from './RowVariants.js';
 export { applyOutOfTheBoxFilters, singleDateFilterFn, singleSelectFilterFn, multiSelectFilterFn, numberRangeFilterFn, currencyRangeFilterFn, dateRangeFilterFn, } from './Filters/index.js';
-export { FilterBarDropdownMenu } from './FilterBar/index.js';
+export { FilterBarDropdownMenu, FilterMenuButton } from './FilterBar/index.js';
 export { SkeletonCell, SkeletonHeaderCell } from './Skeleton/index.js';

package/dist/types/index.d.ts

@@ -1,5 +1,5 @@
 export { DataTable, DataTableWithSchema } from './DataTable.js';
-export { FilterPopover, EditableCell, Toolbar, groupBy, FILTER_TYPES, ROW_VARIANTS, ROW_VARIANT_KEY, ROW_VARIANT_COMPACT_KEY, applyOutOfTheBoxFilters, singleDateFilterFn, singleSelectFilterFn, multiSelectFilterFn, numberRangeFilterFn, currencyRangeFilterFn, dateRangeFilterFn, FilterBarDropdownMenu, SkeletonCell, SkeletonHeaderCell, } from './exported-related/index.js';
+export { FilterPopover, EditableCell, Toolbar, groupBy, FILTER_TYPES, ROW_VARIANTS, ROW_VARIANT_KEY, ROW_VARIANT_COMPACT_KEY, applyOutOfTheBoxFilters, singleDateFilterFn, singleSelectFilterFn, multiSelectFilterFn, numberRangeFilterFn, currencyRangeFilterFn, dateRangeFilterFn, FilterBarDropdownMenu, FilterMenuButton, SkeletonCell, SkeletonHeaderCell, } from './exported-related/index.js';
 export { actionColumn, expandRowColumn, multiSelectColumn, singleSelectColumn, dragHandleColumn, INTERNAL_COLUMNS, } from './addons/Columns/index.js';
 export type { DSDataTableT } from './react-desc-prop-types.js';
 export { useWholeStore } from './configs/useStore/useStore.js';

package/dist/types/parts/Headers/useHeaderResizer.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 export declare const useHeaderResizer: ({ columnId, innerRef, }: {
     columnId: string;
     innerRef: React.MutableRefObject<HTMLInputElement | null>;

package/dist/types/tests/playwright/DSDataTable.ControlledSortTestRenderer.d.ts

@@ -0,0 +1,2 @@
+export const ControlledSortTestRenderer: React.FunctionComponent<React.JSX.IntrinsicAttributes>;
+import React from 'react';

package/dist/types/tests/playwright/DSDataTable.test.playwright.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-data-table",
-  "version": "3.57.0-next.9",
+  "version": "3.57.0-rc.1",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Data Table",
   "files": [
@@ -35,63 +35,64 @@
     "reportFile": "tests.xml",
     "indent": 4
   },
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",
+    "test": "playwright test -c ./playwright.config.mjs && pui-cli test --passWithNoTests --coverage=\"false\"",
+    "lint": "node ../../../scripts/lint.mjs --fix",
+    "lint:strict": "node ../../../scripts/lint-strict.mjs",
+    "dts": "node ../../../scripts/dts.mjs",
+    "build": "cross-env NODE_ENV=production node ../../../scripts/build/build.mjs",
+    "checkDeps": "npm exec ../../util/ds-codemods -- check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
+  },
   "dependencies": {
-    "react-virtual": "~2.10.4",
-    "uid": "^2.0.2",
-    "use-onclickoutside": "0.4.1",
-    "@elliemae/ds-button": "3.57.0-next.9",
-    "@elliemae/ds-button-v2": "3.57.0-next.9",
-    "@elliemae/ds-circular-progress-indicator": "3.57.0-next.9",
-    "@elliemae/ds-drag-and-drop": "3.57.0-next.9",
-    "@elliemae/ds-dropdownmenu-v2": "3.57.0-next.9",
-    "@elliemae/ds-dropdownmenu": "3.57.0-next.9",
-    "@elliemae/ds-form-checkbox": "3.57.0-next.9",
-    "@elliemae/ds-form-combobox": "3.57.0-next.9",
-    "@elliemae/ds-form-date-time-picker": "3.57.0-next.9",
-    "@elliemae/ds-form-helpers-mask-hooks": "3.57.0-next.9",
-    "@elliemae/ds-form-layout-blocks": "3.57.0-next.9",
-    "@elliemae/ds-form-date-range-picker": "3.57.0-next.9",
-    "@elliemae/ds-form-input-text": "3.57.0-next.9",
-    "@elliemae/ds-form-radio": "3.57.0-next.9",
-    "@elliemae/ds-grid": "3.57.0-next.9",
-    "@elliemae/ds-pagination": "3.57.0-next.9",
-    "@elliemae/ds-pills-v2": "3.57.0-next.9",
-    "@elliemae/ds-icons": "3.57.0-next.9",
-    "@elliemae/ds-popperjs": "3.57.0-next.9",
-    "@elliemae/ds-props-helpers": "3.57.0-next.9",
-    "@elliemae/ds-skeleton": "3.57.0-next.9",
-    "@elliemae/ds-system": "3.57.0-next.9",
-    "@elliemae/ds-truncated-tooltip-text": "3.57.0-next.9",
-    "@elliemae/ds-typescript-helpers": "3.57.0-next.9",
-    "@elliemae/ds-zustand-helpers": "3.57.0-next.9"
+    "@elliemae/ds-button-v2": "3.57.0-rc.1",
+    "@elliemae/ds-circular-progress-indicator": "3.57.0-rc.1",
+    "@elliemae/ds-drag-and-drop": "3.57.0-rc.1",
+    "@elliemae/ds-dropdownmenu": "3.57.0-rc.1",
+    "@elliemae/ds-dropdownmenu-v2": "3.57.0-rc.1",
+    "@elliemae/ds-form-checkbox": "3.57.0-rc.1",
+    "@elliemae/ds-form-combobox": "3.57.0-rc.1",
+    "@elliemae/ds-form-date-range-picker": "3.57.0-rc.1",
+    "@elliemae/ds-form-date-time-picker": "3.57.0-rc.1",
+    "@elliemae/ds-form-helpers-mask-hooks": "3.57.0-rc.1",
+    "@elliemae/ds-form-input-text": "3.57.0-rc.1",
+    "@elliemae/ds-form-layout-blocks": "3.57.0-rc.1",
+    "@elliemae/ds-form-radio": "3.57.0-rc.1",
+    "@elliemae/ds-grid": "3.57.0-rc.1",
+    "@elliemae/ds-icons": "3.57.0-rc.1",
+    "@elliemae/ds-menu-button": "3.57.0-rc.1",
+    "@elliemae/ds-pagination": "3.57.0-rc.1",
+    "@elliemae/ds-pills-v2": "3.57.0-rc.1",
+    "@elliemae/ds-popperjs": "3.57.0-rc.1",
+    "@elliemae/ds-props-helpers": "3.57.0-rc.1",
+    "@elliemae/ds-skeleton": "3.57.0-rc.1",
+    "@elliemae/ds-system": "3.57.0-rc.1",
+    "@elliemae/ds-truncated-tooltip-text": "3.57.0-rc.1",
+    "@elliemae/ds-typescript-helpers": "3.57.0-rc.1",
+    "@elliemae/ds-zustand-helpers": "3.57.0-rc.1",
+    "react-virtual": "catalog:",
+    "uid": "catalog:",
+    "use-onclickoutside": "catalog:"
   },
   "devDependencies": {
-    "@elliemae/pui-cli": "9.0.0-next.65",
-    "jest": "~29.7.0",
-    "styled-components": "~5.3.9",
-    "styled-system": "^5.1.5",
-    "@elliemae/ds-test-utils": "3.57.0-next.9",
-    "@elliemae/ds-toolbar-v2": "3.57.0-next.9",
-    "@elliemae/ds-monorepo-devops": "3.57.0-next.9"
+    "@elliemae/ds-monorepo-devops": "3.57.0-rc.1",
+    "@elliemae/ds-test-utils": "3.57.0-rc.1",
+    "@elliemae/ds-toolbar-v2": "3.57.0-rc.1",
+    "@elliemae/pui-cli": "catalog:",
+    "jest": "catalog:",
+    "styled-components": "catalog:",
+    "styled-system": "catalog:"
   },
   "peerDependencies": {
-    "lodash-es": "^4.17.21",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "styled-components": "~5.3.9",
-    "styled-system": "^5.1.5"
+    "lodash-es": "catalog:",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "styled-components": "catalog:",
+    "styled-system": "catalog:"
   },
   "publishConfig": {
     "access": "public",
     "typeSafety": false
   },
-  "scripts": {
-    "dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",
-    "test": "pui-cli test --passWithNoTests --coverage=\"false\"",
-    "lint": "node ../../../scripts/lint.mjs --fix",
-    "lint:strict": "node ../../../scripts/lint-strict.mjs",
-    "dts": "node ../../../scripts/dts.mjs",
-    "build": "cross-env NODE_ENV=production node ../../../scripts/build/build.mjs",
-    "checkDeps": "npm exec ../../util/ds-codemods -- check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
-  }
-}
+  "gitHead": "d0d7cac7600d5ba2b1c5c80cba7573e6acc11a96"
+}