@elliemae/ds-data-table 3.52.1 → 3.53.0-alpha.2

package/dist/esm/configs/useInternalStateConfig.js

@@ -3,6 +3,7 @@ import { useCallback, useMemo, useState } from "react";
 const useInternalStateConfig = () => {
   const [drilldownRowId, setDrilldownRowId] = useState(null);
   const [focusedRowId, setFocusedRowId] = useState(null);
+  const [isHeaderCellDragging, setIsHeaderCellDragging] = useState(false);
   const [reduxHeaders, setReduxHeaders] = useState({});
   const patchHeader = useCallback((headerId, newHeader) => {
     setReduxHeaders((prevReduxHeaders) => {
@@ -26,7 +27,9 @@ const useInternalStateConfig = () => {
       setFocusedRowId,
       reduxHeaders,
       patchHeader,
-      patchHeaderFilterButtonAndMenu
+      patchHeaderFilterButtonAndMenu,
+      isHeaderCellDragging,
+      setIsHeaderCellDragging
     }),
     [
       drilldownRowId,
@@ -35,7 +38,9 @@ const useInternalStateConfig = () => {
       setFocusedRowId,
       reduxHeaders,
       patchHeader,
-      patchHeaderFilterButtonAndMenu
+      patchHeaderFilterButtonAndMenu,
+      isHeaderCellDragging,
+      setIsHeaderCellDragging
     ]
   );
 };

package/dist/esm/configs/useInternalStateConfig.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/configs/useInternalStateConfig.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useCallback, useMemo, useState } from 'react';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\n\nexport const useInternalStateConfig = () => {\n  const [drilldownRowId, setDrilldownRowId] = useState<string | null>(null);\n  const [focusedRowId, setFocusedRowId] = useState<string | null>(null);\n\n  // TODO: @uluduena partition this state better\n  const [reduxHeaders, setReduxHeaders] = useState<Record<string, DSDataTableT.ReduxHeader>>({});\n\n  const patchHeader = useCallback((headerId: string, newHeader: Partial<DSDataTableT.ReduxHeader>) => {\n    setReduxHeaders((prevReduxHeaders) => {\n      const nextReduxHeaders = { ...prevReduxHeaders };\n      nextReduxHeaders[headerId] = { ...(nextReduxHeaders?.[headerId] ?? {}), ...newHeader };\n      return nextReduxHeaders;\n    });\n  }, []);\n\n  const patchHeaderFilterButtonAndMenu = useCallback(\n    (headerId: string, value: boolean) => {\n      const newState = { hideFilterMenu: value, hideFilterButton: value };\n      patchHeader(headerId, newState);\n    },\n    [patchHeader],\n  );\n\n  return useMemo(\n    () => ({\n      drilldownRowId,\n      setDrilldownRowId,\n      focusedRowId,\n      setFocusedRowId,\n      reduxHeaders,\n      patchHeader,\n      patchHeaderFilterButtonAndMenu,\n    }),\n    [\n      drilldownRowId,\n      setDrilldownRowId,\n      focusedRowId,\n      setFocusedRowId,\n      reduxHeaders,\n      patchHeader,\n      patchHeaderFilterButtonAndMenu,\n    ],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,aAAa,SAAS,gBAAgB;AAGxC,MAAM,yBAAyB,MAAM;AAC1C,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAwB,IAAI;AACxE,QAAM,CAAC,cAAc,eAAe,IAAI,SAAwB,IAAI;AAGpE,QAAM,CAAC,cAAc,eAAe,IAAI,SAAmD,CAAC,CAAC;AAE7F,QAAM,cAAc,YAAY,CAAC,UAAkB,cAAiD;AAClG,oBAAgB,CAAC,qBAAqB;AACpC,YAAM,mBAAmB,EAAE,GAAG,iBAAiB;AAC/C,uBAAiB,QAAQ,IAAI,EAAE,GAAI,mBAAmB,QAAQ,KAAK,CAAC,GAAI,GAAG,UAAU;AACrF,aAAO;AAAA,IACT,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,QAAM,iCAAiC;AAAA,IACrC,CAAC,UAAkB,UAAmB;AACpC,YAAM,WAAW,EAAE,gBAAgB,OAAO,kBAAkB,MAAM;AAClE,kBAAY,UAAU,QAAQ;AAAA,IAChC;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useCallback, useMemo, useState } from 'react';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\n\nexport const useInternalStateConfig = () => {\n  const [drilldownRowId, setDrilldownRowId] = useState<string | null>(null);\n  const [focusedRowId, setFocusedRowId] = useState<string | null>(null);\n  const [isHeaderCellDragging, setIsHeaderCellDragging] = useState<boolean>(false);\n  // TODO: @uluduena partition this state better\n  const [reduxHeaders, setReduxHeaders] = useState<Record<string, DSDataTableT.ReduxHeader>>({});\n\n  const patchHeader = useCallback((headerId: string, newHeader: Partial<DSDataTableT.ReduxHeader>) => {\n    setReduxHeaders((prevReduxHeaders) => {\n      const nextReduxHeaders = { ...prevReduxHeaders };\n      nextReduxHeaders[headerId] = { ...(nextReduxHeaders?.[headerId] ?? {}), ...newHeader };\n      return nextReduxHeaders;\n    });\n  }, []);\n\n  const patchHeaderFilterButtonAndMenu = useCallback(\n    (headerId: string, value: boolean) => {\n      const newState = { hideFilterMenu: value, hideFilterButton: value };\n      patchHeader(headerId, newState);\n    },\n    [patchHeader],\n  );\n\n  return useMemo(\n    () => ({\n      drilldownRowId,\n      setDrilldownRowId,\n      focusedRowId,\n      setFocusedRowId,\n      reduxHeaders,\n      patchHeader,\n      patchHeaderFilterButtonAndMenu,\n      isHeaderCellDragging,\n      setIsHeaderCellDragging,\n    }),\n    [\n      drilldownRowId,\n      setDrilldownRowId,\n      focusedRowId,\n      setFocusedRowId,\n      reduxHeaders,\n      patchHeader,\n      patchHeaderFilterButtonAndMenu,\n      isHeaderCellDragging,\n      setIsHeaderCellDragging,\n    ],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,aAAa,SAAS,gBAAgB;AAGxC,MAAM,yBAAyB,MAAM;AAC1C,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAwB,IAAI;AACxE,QAAM,CAAC,cAAc,eAAe,IAAI,SAAwB,IAAI;AACpE,QAAM,CAAC,sBAAsB,uBAAuB,IAAI,SAAkB,KAAK;AAE/E,QAAM,CAAC,cAAc,eAAe,IAAI,SAAmD,CAAC,CAAC;AAE7F,QAAM,cAAc,YAAY,CAAC,UAAkB,cAAiD;AAClG,oBAAgB,CAAC,qBAAqB;AACpC,YAAM,mBAAmB,EAAE,GAAG,iBAAiB;AAC/C,uBAAiB,QAAQ,IAAI,EAAE,GAAI,mBAAmB,QAAQ,KAAK,CAAC,GAAI,GAAG,UAAU;AACrF,aAAO;AAAA,IACT,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,QAAM,iCAAiC;AAAA,IACrC,CAAC,UAAkB,UAAmB;AACpC,YAAM,WAAW,EAAE,gBAAgB,OAAO,kBAAkB,MAAM;AAClE,kBAAY,UAAU,QAAQ;AAAA,IAChC;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/esm/configs/useNativeResizeObserver.js

@@ -4,7 +4,7 @@ const useNativeResizeObserver = (el, callback) => {
   const resizeObserver = useMemo(
     () => new ResizeObserver((entries) => {
       const entry = entries[0];
-      const contentRect = entry.contentRect;
+      const { contentRect } = entry;
       const target = entry.target;
       callback({ contentRect, target });
     }),

package/dist/esm/configs/useNativeResizeObserver.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/configs/useNativeResizeObserver.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useEffect, useMemo } from 'react';\n\n// Custom hook to use the resize observer api,\n// to observe changes in the size of an **UNIQUE** element\n// Will trigger the callback with the contentRect,\n// which contains width, height, top, bottom, etc of the element,\n// and the html element itself, so you can query for offsetWidth, etc\nexport const useNativeResizeObserver = <T extends HTMLElement>(\n  el: T | null,\n  callback: (entry: { contentRect: DOMRectReadOnly; target: T }) => void,\n) => {\n  const resizeObserver = useMemo(\n    () =>\n      new ResizeObserver((entries) => {\n        const entry = entries[0]; // We will only observe one element\n\n        const contentRect = entry.contentRect;\n\n        const target = entry.target as T;\n\n        callback({ contentRect, target });\n      }),\n    [callback],\n  );\n\n  useEffect(() => {\n    if (el) resizeObserver.observe(el);\n    return () => resizeObserver.disconnect();\n  }, [el, resizeObserver]);\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW,eAAe;AAO5B,MAAM,0BAA0B,CACrC,IACA,aACG;AACH,QAAM,iBAAiB;AAAA,IACrB,MACE,IAAI,eAAe,CAAC,YAAY;AAC9B,YAAM,QAAQ,QAAQ,CAAC;AAEvB,YAAM,cAAc,MAAM;AAE1B,YAAM,SAAS,MAAM;AAErB,eAAS,EAAE,aAAa,OAAO,CAAC;AAAA,IAClC,CAAC;AAAA,IACH,CAAC,QAAQ;AAAA,EACX;AAEA,YAAU,MAAM;AACd,QAAI,GAAI,gBAAe,QAAQ,EAAE;AACjC,WAAO,MAAM,eAAe,WAAW;AAAA,EACzC,GAAG,CAAC,IAAI,cAAc,CAAC;AACzB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useEffect, useMemo } from 'react';\n\n// Custom hook to use the resize observer api,\n// to observe changes in the size of an **UNIQUE** element\n// Will trigger the callback with the contentRect,\n// which contains width, height, top, bottom, etc of the element,\n// and the html element itself, so you can query for offsetWidth, etc\nexport const useNativeResizeObserver = <T extends HTMLElement>(\n  el: T | null,\n  callback: (entry: { contentRect: DOMRectReadOnly; target: T }) => void,\n) => {\n  const resizeObserver = useMemo(\n    () =>\n      new ResizeObserver((entries) => {\n        const entry = entries[0]; // We will only observe one element\n\n        const { contentRect } = entry;\n\n        const target = entry.target as T;\n\n        callback({ contentRect, target });\n      }),\n    [callback],\n  );\n\n  useEffect(() => {\n    if (el) resizeObserver.observe(el);\n    return () => resizeObserver.disconnect();\n  }, [el, resizeObserver]);\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW,eAAe;AAO5B,MAAM,0BAA0B,CACrC,IACA,aACG;AACH,QAAM,iBAAiB;AAAA,IACrB,MACE,IAAI,eAAe,CAAC,YAAY;AAC9B,YAAM,QAAQ,QAAQ,CAAC;AAEvB,YAAM,EAAE,YAAY,IAAI;AAExB,YAAM,SAAS,MAAM;AAErB,eAAS,EAAE,aAAa,OAAO,CAAC;AAAA,IAClC,CAAC;AAAA,IACH,CAAC,QAAQ;AAAA,EACX;AAEA,YAAU,MAAM;AACd,QAAI,GAAI,gBAAe,QAAQ,EAAE;AACjC,WAAO,MAAM,eAAe,WAAW;AAAA,EACzC,GAAG,CAAC,IAAI,cAAc,CAAC;AACzB;",
   "names": []
 }

package/dist/esm/configs/useStore/useStore.js

@@ -6,7 +6,8 @@ const internalAtomDefaultValues = {
   drilldownRowId: null,
   focusedRowId: null,
   isShiftPressed: false,
-  reduxHeaders: {}
+  reduxHeaders: {},
+  isHeaderCellDragging: false
 };
 const selectors = () => ({});
 const reducers = (get, set) => ({

package/dist/esm/configs/useStore/useStore.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/configs/useStore/useStore.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { type ZustandT } from '@elliemae/ds-zustand-helpers';\nimport { defaultProps, type DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useAutoCalculated } from '../useAutocalculated/index.js';\nimport { InternalProvider, PropsProvider, useInternalStore, usePropsStore } from './createInternalAndPropsContext.js';\n\nconst internalAtomDefaultValues: DSDataTableT.InternalAtoms = {\n  drilldownRowId: null,\n  focusedRowId: null,\n  isShiftPressed: false,\n  reduxHeaders: {},\n};\n\nconst selectors: ZustandT.SelectorObject<DSDataTableT.ShuttleInternalStore, DSDataTableT.Selectors> = () => ({});\n\nconst reducers: ZustandT.ReducerObject<DSDataTableT.ShuttleInternalStore, DSDataTableT.Reducers> = (get, set) => ({\n  patchHeader: (headerId, newHeader) => {\n    set((state) => ({\n      reduxHeaders: {\n        ...state.reduxHeaders,\n        [headerId]: { ...(state.reduxHeaders?.[headerId] ?? {}), ...newHeader },\n      },\n    }));\n  },\n  patchHeaderFilterButtonAndMenu: (headerId, value) => {\n    set((state) => ({\n      reduxHeaders: {\n        ...state.reduxHeaders,\n        [headerId]: { ...(state.reduxHeaders?.[headerId] ?? {}), hideFilterMenu: value, hideFilterButton: value },\n      },\n    }));\n  },\n});\n\nconst subscribers: ZustandT.Subscribers<DSDataTableT.ShuttleInternalStore> = () => {};\n\nexport const useWholeStore = (): DSDataTableT.Context => {\n  const {\n    columnHeaderRef,\n    virtualListRef,\n    flattenedData,\n    allDataFlattened,\n    isEmptyContent,\n    firstFocuseableColumnHeaderId,\n    visibleColumns,\n    virtualListHelpers,\n    layoutHelpers,\n    paginationHelpers,\n    lastSelected,\n    ...tableProps\n  } = usePropsStore((state) => state);\n\n  const internalStore = useInternalStore((state) => state);\n  return {\n    tableProps,\n    columnHeaderRef,\n    virtualListRef,\n    flattenedData,\n    allDataFlattened,\n    isEmptyContent,\n    firstFocuseableColumnHeaderId,\n    visibleColumns,\n    virtualListHelpers,\n    layoutHelpers,\n    paginationHelpers,\n    lastSelected,\n    ...internalStore,\n  };\n};\n\nexport const config = {\n  defaultProps: defaultProps as () => DSDataTableT.InternalProps,\n  internalAtomDefaultValues,\n  useAutoCalculated,\n  selectors,\n  reducers,\n  subscribers,\n  PropsProvider,\n  usePropsStore,\n  InternalProvider,\n  useInternalStore,\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,oBAAuC;AAChD,SAAS,yBAAyB;AAClC,SAAS,kBAAkB,eAAe,kBAAkB,qBAAqB;AAEjF,MAAM,4BAAwD;AAAA,EAC5D,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,cAAc,CAAC;AACjB;AAEA,MAAM,YAAgG,OAAO,CAAC;AAE9G,MAAM,WAA6F,CAAC,KAAK,SAAS;AAAA,EAChH,aAAa,CAAC,UAAU,cAAc;AACpC,QAAI,CAAC,WAAW;AAAA,MACd,cAAc;AAAA,QACZ,GAAG,MAAM;AAAA,QACT,CAAC,QAAQ,GAAG,EAAE,GAAI,MAAM,eAAe,QAAQ,KAAK,CAAC,GAAI,GAAG,UAAU;AAAA,MACxE;AAAA,IACF,EAAE;AAAA,EACJ;AAAA,EACA,gCAAgC,CAAC,UAAU,UAAU;AACnD,QAAI,CAAC,WAAW;AAAA,MACd,cAAc;AAAA,QACZ,GAAG,MAAM;AAAA,QACT,CAAC,QAAQ,GAAG,EAAE,GAAI,MAAM,eAAe,QAAQ,KAAK,CAAC,GAAI,gBAAgB,OAAO,kBAAkB,MAAM;AAAA,MAC1G;AAAA,IACF,EAAE;AAAA,EACJ;AACF;AAEA,MAAM,cAAuE,MAAM;AAAC;AAE7E,MAAM,gBAAgB,MAA4B;AACvD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,cAAc,CAAC,UAAU,KAAK;AAElC,QAAM,gBAAgB,iBAAiB,CAAC,UAAU,KAAK;AACvD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL;AACF;AAEO,MAAM,SAAS;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { type ZustandT } from '@elliemae/ds-zustand-helpers';\nimport { defaultProps, type DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useAutoCalculated } from '../useAutocalculated/index.js';\nimport { InternalProvider, PropsProvider, useInternalStore, usePropsStore } from './createInternalAndPropsContext.js';\n\nconst internalAtomDefaultValues: DSDataTableT.InternalAtoms = {\n  drilldownRowId: null,\n  focusedRowId: null,\n  isShiftPressed: false,\n  reduxHeaders: {},\n  isHeaderCellDragging: false,\n};\n\nconst selectors: ZustandT.SelectorObject<DSDataTableT.ShuttleInternalStore, DSDataTableT.Selectors> = () => ({});\n\nconst reducers: ZustandT.ReducerObject<DSDataTableT.ShuttleInternalStore, DSDataTableT.Reducers> = (get, set) => ({\n  patchHeader: (headerId, newHeader) => {\n    set((state) => ({\n      reduxHeaders: {\n        ...state.reduxHeaders,\n        [headerId]: { ...(state.reduxHeaders?.[headerId] ?? {}), ...newHeader },\n      },\n    }));\n  },\n  patchHeaderFilterButtonAndMenu: (headerId, value) => {\n    set((state) => ({\n      reduxHeaders: {\n        ...state.reduxHeaders,\n        [headerId]: { ...(state.reduxHeaders?.[headerId] ?? {}), hideFilterMenu: value, hideFilterButton: value },\n      },\n    }));\n  },\n});\n\nconst subscribers: ZustandT.Subscribers<DSDataTableT.ShuttleInternalStore> = () => {};\n\nexport const useWholeStore = (): DSDataTableT.Context => {\n  const {\n    columnHeaderRef,\n    virtualListRef,\n    flattenedData,\n    allDataFlattened,\n    isEmptyContent,\n    firstFocuseableColumnHeaderId,\n    visibleColumns,\n    virtualListHelpers,\n    layoutHelpers,\n    paginationHelpers,\n    lastSelected,\n    ...tableProps\n  } = usePropsStore((state) => state);\n\n  const internalStore = useInternalStore((state) => state);\n  return {\n    tableProps,\n    columnHeaderRef,\n    virtualListRef,\n    flattenedData,\n    allDataFlattened,\n    isEmptyContent,\n    firstFocuseableColumnHeaderId,\n    visibleColumns,\n    virtualListHelpers,\n    layoutHelpers,\n    paginationHelpers,\n    lastSelected,\n    ...internalStore,\n  };\n};\n\nexport const config = {\n  defaultProps: defaultProps as () => DSDataTableT.InternalProps,\n  internalAtomDefaultValues,\n  useAutoCalculated,\n  selectors,\n  reducers,\n  subscribers,\n  PropsProvider,\n  usePropsStore,\n  InternalProvider,\n  useInternalStore,\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,oBAAuC;AAChD,SAAS,yBAAyB;AAClC,SAAS,kBAAkB,eAAe,kBAAkB,qBAAqB;AAEjF,MAAM,4BAAwD;AAAA,EAC5D,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,cAAc,CAAC;AAAA,EACf,sBAAsB;AACxB;AAEA,MAAM,YAAgG,OAAO,CAAC;AAE9G,MAAM,WAA6F,CAAC,KAAK,SAAS;AAAA,EAChH,aAAa,CAAC,UAAU,cAAc;AACpC,QAAI,CAAC,WAAW;AAAA,MACd,cAAc;AAAA,QACZ,GAAG,MAAM;AAAA,QACT,CAAC,QAAQ,GAAG,EAAE,GAAI,MAAM,eAAe,QAAQ,KAAK,CAAC,GAAI,GAAG,UAAU;AAAA,MACxE;AAAA,IACF,EAAE;AAAA,EACJ;AAAA,EACA,gCAAgC,CAAC,UAAU,UAAU;AACnD,QAAI,CAAC,WAAW;AAAA,MACd,cAAc;AAAA,QACZ,GAAG,MAAM;AAAA,QACT,CAAC,QAAQ,GAAG,EAAE,GAAI,MAAM,eAAe,QAAQ,KAAK,CAAC,GAAI,gBAAgB,OAAO,kBAAkB,MAAM;AAAA,MAC1G;AAAA,IACF,EAAE;AAAA,EACJ;AACF;AAEA,MAAM,cAAuE,MAAM;AAAC;AAE7E,MAAM,gBAAgB,MAA4B;AACvD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,cAAc,CAAC,UAAU,KAAK;AAElC,QAAM,gBAAgB,iBAAiB,CAAC,UAAU,KAAK;AACvD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL;AACF;AAEO,MAAM,SAAS;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;",
   "names": []
 }

package/dist/esm/configs/useTableColsWithAddons.js

@@ -14,6 +14,7 @@ const augmentColumns = (columns) => {
     if (typeof column.accessor === "string") id = column.accessor;
     const { columns: childColumns, ...restOfColumn } = column;
     const newCol = {
+      index,
       id,
       parentId,
       depth,

package/dist/esm/configs/useTableColsWithAddons.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/configs/useTableColsWithAddons.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/no-cycle */\n/* eslint-disable @typescript-eslint/no-use-before-define */\n/* eslint-disable max-params */\nimport { createRef, useMemo } from 'react';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\nimport {\n  dragHandleColumn,\n  expandRowColumn,\n  actionColumn,\n  singleSelectColumn,\n  multiSelectColumn,\n} from '../addons/Columns/index.js';\n\nconst augmentColumns = (columns: DSDataTableT.Column[]): DSDataTableT.InternalColumn[] => {\n  const augmentColumn = (\n    column: DSDataTableT.Column,\n    index: number,\n    parentId: string | null = null,\n    depth = 0,\n  ): DSDataTableT.InternalColumn => {\n    let id = `column${index}`;\n    if (typeof column.Header === 'string') id = column.Header;\n    if (typeof column.accessor === 'string') id = column.accessor;\n    const { columns: childColumns, ...restOfColumn } = column;\n    const newCol: DSDataTableT.InternalColumn = {\n      id,\n      parentId,\n      depth,\n      ...restOfColumn,\n      ref: createRef<HTMLTableColElement>() as React.MutableRefObject<HTMLTableColElement>,\n    };\n    if (childColumns) newCol.columns = childColumns.map((col, i) => augmentColumn(col, i, id, depth + 1));\n    return newCol;\n  };\n  return columns.map((col, index) => augmentColumn(col, index));\n};\n\nconst isColumnInArrayOfColumns = (columns: DSDataTableT.Column[], col: DSDataTableT.Column) =>\n  columns.some((column) => column.id === col.id);\n\nconst useTableColsWithAddons = (\n  {\n    columns,\n    renderRowActions,\n    isExpandable,\n    selectSingle,\n    selection,\n    dragAndDropRows,\n    noSelectionColumn,\n  }: DSDataTableT.InternalProps,\n  hiddenColumns: string[],\n) => {\n  const withSelection = Boolean(selection);\n\n  return useMemo(() => {\n    const columnsWithAddons = [...augmentColumns(columns)];\n    // Columns to be prepended\n    const colsToPrepend: DSDataTableT.InternalColumn[] = [];\n    // Columns to be appended\n    const colsToAppend: DSDataTableT.InternalColumn[] = [];\n\n    if (isExpandable) colsToPrepend.push(expandRowColumn);\n    if (withSelection && !noSelectionColumn) {\n      if (selectSingle) colsToPrepend.push(singleSelectColumn as unknown as DSDataTableT.InternalColumn);\n      else colsToPrepend.push(multiSelectColumn as unknown as DSDataTableT.InternalColumn);\n    }\n    if (dragAndDropRows) colsToPrepend.push(dragHandleColumn as unknown as DSDataTableT.InternalColumn);\n    if (renderRowActions) colsToAppend.push(actionColumn(renderRowActions));\n\n    // Prepend or append all the columns that were not extended by the user\n    colsToPrepend.forEach((col) => {\n      if (!isColumnInArrayOfColumns(columnsWithAddons, col)) columnsWithAddons.unshift(col);\n    });\n    colsToAppend.forEach((col) => {\n      if (!isColumnInArrayOfColumns(columnsWithAddons, col)) columnsWithAddons.push(col);\n    });\n\n    return columnsWithAddons\n      .filter((col) => col.accessor === undefined || !isColumnVisible(col.accessor, col.columns, hiddenColumns))\n      .map((col) => {\n        if (col.columns) {\n          col.columns = col.columns.filter(\n            (subCol: DSDataTableT.Column) => subCol.accessor === undefined || !hiddenColumns?.includes(subCol.accessor),\n          );\n        }\n        return col;\n      });\n  }, [\n    columns,\n    isExpandable,\n    withSelection,\n    noSelectionColumn,\n    dragAndDropRows,\n    renderRowActions,\n    selectSingle,\n    hiddenColumns,\n  ]);\n};\n\nexport { useTableColsWithAddons };\n\nconst isColumnVisible = (\n  columnAccessor: string,\n  columns: DSDataTableT.Column[] | undefined,\n  hiddenColumns: string[],\n) => {\n  if (!columns) return hiddenColumns.includes(columnAccessor);\n  if (hiddenColumns.includes(columnAccessor)) return true;\n  return columns.every((col) => hiddenColumns.includes(col.accessor || col.id!));\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,WAAW,eAAe;AAEnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,iBAAiB,CAAC,YAAkE;AACxF,QAAM,gBAAgB,CACpB,QACA,OACA,WAA0B,MAC1B,QAAQ,MACwB;AAChC,QAAI,KAAK,SAAS,KAAK;AACvB,QAAI,OAAO,OAAO,WAAW,SAAU,MAAK,OAAO;AACnD,QAAI,OAAO,OAAO,aAAa,SAAU,MAAK,OAAO;AACrD,UAAM,EAAE,SAAS,cAAc,GAAG,aAAa,IAAI;AACnD,UAAM,SAAsC;AAAA,MAC1C;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,MACH,KAAK,UAA+B;AAAA,IACtC;AACA,QAAI,aAAc,QAAO,UAAU,aAAa,IAAI,CAAC,KAAK,MAAM,cAAc,KAAK,GAAG,IAAI,QAAQ,CAAC,CAAC;AACpG,WAAO;AAAA,EACT;AACA,SAAO,QAAQ,IAAI,CAAC,KAAK,UAAU,cAAc,KAAK,KAAK,CAAC;AAC9D;AAEA,MAAM,2BAA2B,CAAC,SAAgC,QAChE,QAAQ,KAAK,CAAC,WAAW,OAAO,OAAO,IAAI,EAAE;AAE/C,MAAM,yBAAyB,CAC7B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GACA,kBACG;AACH,QAAM,gBAAgB,QAAQ,SAAS;AAEvC,SAAO,QAAQ,MAAM;AACnB,UAAM,oBAAoB,CAAC,GAAG,eAAe,OAAO,CAAC;AAErD,UAAM,gBAA+C,CAAC;AAEtD,UAAM,eAA8C,CAAC;AAErD,QAAI,aAAc,eAAc,KAAK,eAAe;AACpD,QAAI,iBAAiB,CAAC,mBAAmB;AACvC,UAAI,aAAc,eAAc,KAAK,kBAA4D;AAAA,UAC5F,eAAc,KAAK,iBAA2D;AAAA,IACrF;AACA,QAAI,gBAAiB,eAAc,KAAK,gBAA0D;AAClG,QAAI,iBAAkB,cAAa,KAAK,aAAa,gBAAgB,CAAC;AAGtE,kBAAc,QAAQ,CAAC,QAAQ;AAC7B,UAAI,CAAC,yBAAyB,mBAAmB,GAAG,EAAG,mBAAkB,QAAQ,GAAG;AAAA,IACtF,CAAC;AACD,iBAAa,QAAQ,CAAC,QAAQ;AAC5B,UAAI,CAAC,yBAAyB,mBAAmB,GAAG,EAAG,mBAAkB,KAAK,GAAG;AAAA,IACnF,CAAC;AAED,WAAO,kBACJ,OAAO,CAAC,QAAQ,IAAI,aAAa,UAAa,CAAC,gBAAgB,IAAI,UAAU,IAAI,SAAS,aAAa,CAAC,EACxG,IAAI,CAAC,QAAQ;AACZ,UAAI,IAAI,SAAS;AACf,YAAI,UAAU,IAAI,QAAQ;AAAA,UACxB,CAAC,WAAgC,OAAO,aAAa,UAAa,CAAC,eAAe,SAAS,OAAO,QAAQ;AAAA,QAC5G;AAAA,MACF;AACA,aAAO;AAAA,IACT,CAAC;AAAA,EACL,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH;AAIA,MAAM,kBAAkB,CACtB,gBACA,SACA,kBACG;AACH,MAAI,CAAC,QAAS,QAAO,cAAc,SAAS,cAAc;AAC1D,MAAI,cAAc,SAAS,cAAc,EAAG,QAAO;AACnD,SAAO,QAAQ,MAAM,CAAC,QAAQ,cAAc,SAAS,IAAI,YAAY,IAAI,EAAG,CAAC;AAC/E;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/no-cycle */\n/* eslint-disable @typescript-eslint/no-use-before-define */\n/* eslint-disable max-params */\nimport { createRef, useMemo } from 'react';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\nimport {\n  dragHandleColumn,\n  expandRowColumn,\n  actionColumn,\n  singleSelectColumn,\n  multiSelectColumn,\n} from '../addons/Columns/index.js';\n\nconst augmentColumns = (columns: DSDataTableT.Column[]): DSDataTableT.InternalColumn[] => {\n  const augmentColumn = (\n    column: DSDataTableT.Column,\n    index: number,\n    parentId: string | null = null,\n    depth = 0,\n  ): DSDataTableT.InternalColumn => {\n    let id = `column${index}`;\n    if (typeof column.Header === 'string') id = column.Header;\n    if (typeof column.accessor === 'string') id = column.accessor;\n    const { columns: childColumns, ...restOfColumn } = column;\n    const newCol: DSDataTableT.InternalColumn = {\n      index,\n      id,\n      parentId,\n      depth,\n      ...restOfColumn,\n      ref: createRef<HTMLTableColElement>() as React.MutableRefObject<HTMLTableColElement>,\n    };\n    if (childColumns) newCol.columns = childColumns.map((col, i) => augmentColumn(col, i, id, depth + 1));\n    return newCol;\n  };\n  return columns.map((col, index) => augmentColumn(col, index));\n};\n\nconst isColumnInArrayOfColumns = (columns: DSDataTableT.Column[], col: DSDataTableT.Column) =>\n  columns.some((column) => column.id === col.id);\n\nconst useTableColsWithAddons = (\n  {\n    columns,\n    renderRowActions,\n    isExpandable,\n    selectSingle,\n    selection,\n    dragAndDropRows,\n    noSelectionColumn,\n  }: DSDataTableT.InternalProps,\n  hiddenColumns: string[],\n) => {\n  const withSelection = Boolean(selection);\n\n  return useMemo(() => {\n    const columnsWithAddons = [...augmentColumns(columns)];\n    // Columns to be prepended\n    const colsToPrepend: DSDataTableT.InternalColumn[] = [];\n    // Columns to be appended\n    const colsToAppend: DSDataTableT.InternalColumn[] = [];\n\n    if (isExpandable) colsToPrepend.push(expandRowColumn);\n    if (withSelection && !noSelectionColumn) {\n      if (selectSingle) colsToPrepend.push(singleSelectColumn as unknown as DSDataTableT.InternalColumn);\n      else colsToPrepend.push(multiSelectColumn as unknown as DSDataTableT.InternalColumn);\n    }\n    if (dragAndDropRows) colsToPrepend.push(dragHandleColumn as unknown as DSDataTableT.InternalColumn);\n    if (renderRowActions) colsToAppend.push(actionColumn(renderRowActions));\n\n    // Prepend or append all the columns that were not extended by the user\n    colsToPrepend.forEach((col) => {\n      if (!isColumnInArrayOfColumns(columnsWithAddons, col)) columnsWithAddons.unshift(col);\n    });\n    colsToAppend.forEach((col) => {\n      if (!isColumnInArrayOfColumns(columnsWithAddons, col)) columnsWithAddons.push(col);\n    });\n\n    return columnsWithAddons\n      .filter((col) => col.accessor === undefined || !isColumnVisible(col.accessor, col.columns, hiddenColumns))\n      .map((col) => {\n        if (col.columns) {\n          col.columns = col.columns.filter(\n            (subCol: DSDataTableT.Column) => subCol.accessor === undefined || !hiddenColumns?.includes(subCol.accessor),\n          );\n        }\n        return col;\n      });\n  }, [\n    columns,\n    isExpandable,\n    withSelection,\n    noSelectionColumn,\n    dragAndDropRows,\n    renderRowActions,\n    selectSingle,\n    hiddenColumns,\n  ]);\n};\n\nexport { useTableColsWithAddons };\n\nconst isColumnVisible = (\n  columnAccessor: string,\n  columns: DSDataTableT.Column[] | undefined,\n  hiddenColumns: string[],\n) => {\n  if (!columns) return hiddenColumns.includes(columnAccessor);\n  if (hiddenColumns.includes(columnAccessor)) return true;\n  return columns.every((col) => hiddenColumns.includes(col.accessor || col.id!));\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,WAAW,eAAe;AAEnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,iBAAiB,CAAC,YAAkE;AACxF,QAAM,gBAAgB,CACpB,QACA,OACA,WAA0B,MAC1B,QAAQ,MACwB;AAChC,QAAI,KAAK,SAAS,KAAK;AACvB,QAAI,OAAO,OAAO,WAAW,SAAU,MAAK,OAAO;AACnD,QAAI,OAAO,OAAO,aAAa,SAAU,MAAK,OAAO;AACrD,UAAM,EAAE,SAAS,cAAc,GAAG,aAAa,IAAI;AACnD,UAAM,SAAsC;AAAA,MAC1C;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,MACH,KAAK,UAA+B;AAAA,IACtC;AACA,QAAI,aAAc,QAAO,UAAU,aAAa,IAAI,CAAC,KAAK,MAAM,cAAc,KAAK,GAAG,IAAI,QAAQ,CAAC,CAAC;AACpG,WAAO;AAAA,EACT;AACA,SAAO,QAAQ,IAAI,CAAC,KAAK,UAAU,cAAc,KAAK,KAAK,CAAC;AAC9D;AAEA,MAAM,2BAA2B,CAAC,SAAgC,QAChE,QAAQ,KAAK,CAAC,WAAW,OAAO,OAAO,IAAI,EAAE;AAE/C,MAAM,yBAAyB,CAC7B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GACA,kBACG;AACH,QAAM,gBAAgB,QAAQ,SAAS;AAEvC,SAAO,QAAQ,MAAM;AACnB,UAAM,oBAAoB,CAAC,GAAG,eAAe,OAAO,CAAC;AAErD,UAAM,gBAA+C,CAAC;AAEtD,UAAM,eAA8C,CAAC;AAErD,QAAI,aAAc,eAAc,KAAK,eAAe;AACpD,QAAI,iBAAiB,CAAC,mBAAmB;AACvC,UAAI,aAAc,eAAc,KAAK,kBAA4D;AAAA,UAC5F,eAAc,KAAK,iBAA2D;AAAA,IACrF;AACA,QAAI,gBAAiB,eAAc,KAAK,gBAA0D;AAClG,QAAI,iBAAkB,cAAa,KAAK,aAAa,gBAAgB,CAAC;AAGtE,kBAAc,QAAQ,CAAC,QAAQ;AAC7B,UAAI,CAAC,yBAAyB,mBAAmB,GAAG,EAAG,mBAAkB,QAAQ,GAAG;AAAA,IACtF,CAAC;AACD,iBAAa,QAAQ,CAAC,QAAQ;AAC5B,UAAI,CAAC,yBAAyB,mBAAmB,GAAG,EAAG,mBAAkB,KAAK,GAAG;AAAA,IACnF,CAAC;AAED,WAAO,kBACJ,OAAO,CAAC,QAAQ,IAAI,aAAa,UAAa,CAAC,gBAAgB,IAAI,UAAU,IAAI,SAAS,aAAa,CAAC,EACxG,IAAI,CAAC,QAAQ;AACZ,UAAI,IAAI,SAAS;AACf,YAAI,UAAU,IAAI,QAAQ;AAAA,UACxB,CAAC,WAAgC,OAAO,aAAa,UAAa,CAAC,eAAe,SAAS,OAAO,QAAQ;AAAA,QAC5G;AAAA,MACF;AACA,aAAO;AAAA,IACT,CAAC;AAAA,EACL,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH;AAIA,MAAM,kBAAkB,CACtB,gBACA,SACA,kBACG;AACH,MAAI,CAAC,QAAS,QAAO,cAAc,SAAS,cAAc;AAC1D,MAAI,cAAc,SAAS,cAAc,EAAG,QAAO;AACnD,SAAO,QAAQ,MAAM,CAAC,QAAQ,cAAc,SAAS,IAAI,YAAY,IAAI,EAAG,CAAC;AAC/E;",
   "names": []
 }

package/dist/esm/constants/index.js

@@ -0,0 +1,91 @@
+import * as React from "react";
+import { slotObjectToDataTestIds } from "@elliemae/ds-system";
+import { legacyDataTestIds } from "./legacyToBeDeprecated.js";
+const DSDataTableName = "DSDatatable";
+const DATA_TABLE_SLOTS = {
+  ROOT: "root",
+  CONTENT_WRAPPER: "content-wrapper",
+  TABLE_WRAPPER: "table-wrapper",
+  PAGINATION_WRAPPER: "pagination-wrapper",
+  TABLE_CONTENT_WRAPPER: "table-content-wrapper",
+  VIRTUAL_LIST_WRAPPER: "virtual-list-wrapper",
+  HEAD_WRAPPER: "head-wrapper",
+  HEAD_TR: "head-tr",
+  HEAD_TH: "head-th",
+  HEAD_RIGHT_ICONS_WRAPPER: "head-right-icons-wrapper",
+  HEADER_CELL_WRAPPER: "header-cell-wrapper",
+  EMPTY_HEADER: "empty-header",
+  RESIZER: "resizer",
+  ACTION_CELL: "action-cell",
+  EXPAND_CELL_CONTAINER: "expand-cell-container",
+  SINGLE_CELL_CONTAINER: "single-cell-container",
+  DRAG_AND_DROP_GRIPPER: "drag-and-drop-gripper",
+  TEXT_EDITABLE_CELL_INPUT: "text-editable-cell-input",
+  FILTER_POPOVER_BUTTON: "filter-popover-button",
+  FILTER_POPOVER_CONTENT: "filter-popover-content",
+  DROP_INDICATOR: "drop-indicator",
+  CELL: "cell",
+  CELL_CONTENT: "cell-content",
+  PENCIL_ICON: "pencil-icon",
+  EDITABLE_CONTAINER: "editable-container",
+  FULLSIZE_GRID: "fullsize-grid",
+  ROW: "row",
+  GROUP_HEADER_CONTAINER: "group-header-container",
+  GROUP_HEADER_TITLE: "header-title",
+  CELL_CONTAINER: "cells-container",
+  TOOLBAR_WRAPPER: "toolbar-wrapper",
+  TOOLBAR_BUTTONS_WRAPPER: "toolbar-buttons-wrapper",
+  TOOLBAR_BUTTON: "toolbar-button",
+  TOOLBAR_POSITION: "toolbar-position",
+  EMPTY_STATE_WRAPPER: "empty-state-wrapper",
+  WARNING_ICON: "warning-icon",
+  EMPTY_PRIMARY_MESSAGE: "empty-primary-message",
+  EMPTY_SECONDARY_MESSAGE: "empty-secondary-message",
+  EMPTY_BUTTON: "empty-button",
+  CENTER_CONTENT_FLEX_WRAPPER: "center-content-flex-wrapper",
+  LOADER_WRAPPER: "loader-wrapper",
+  FILTER_BAR_WRAPPER: "filter-bar-wrapper",
+  FREE_TEXT_SEARCH_FILTER: "free-text-search-filter",
+  FREE_TEXT_SEARCH_WRAPPER: "free-text-search-wrapper",
+  FILTER_POPOVER: "filter-popover",
+  FILTER_BAR_MENU_BUTTON: "filter-bar-menu-button"
+};
+const DATA_TABLE_DATA_TESTID = {
+  ...slotObjectToDataTestIds(DSDataTableName, DATA_TABLE_SLOTS),
+  /**
+   * These data-testid were defined in src/configs/constants.tsx
+   * but they were never exposed to consumers in the index.ts file.
+   * We are exposing them here for backward compatibility, as they are the ones used in the component implementation.
+   *
+   */
+  ...legacyDataTestIds,
+  /**
+   * As there is a mix of hardcoded data-testid and the ones auto generated by slot definitions
+   * we are overriding the auto generated ones with the hardcoded values for consistency.
+   */
+  CONTENT_WRAPPER: legacyDataTestIds.DATA_TABLE_CONTENT_WRAPPER,
+  TABLE_WRAPPER: legacyDataTestIds.DATA_TABLE_TABLE,
+  CELL_CONTAINER: legacyDataTestIds.DATA_TABLE_ROW_CONTENT,
+  DRAG_AND_DROP_GRIPPER: legacyDataTestIds.DATA_TABLE_DRAG_HANDLE,
+  FREE_TEXT_SEARCH_FILTER: legacyDataTestIds.DATA_TABLE_FILTER_FREE_TEXT_SEARCH,
+  FILTER_POPOVER_BUTTON: legacyDataTestIds.DATA_TABLE_FILTER_BUTTON,
+  HEAD_TH: legacyDataTestIds.DATA_TABLE_HEADER,
+  CELL: legacyDataTestIds.DATA_TABLE_CELL,
+  FULLSIZE_GRID: legacyDataTestIds.DATA_TABLE_ROW,
+  ROOT: legacyDataTestIds.DATA_TABLE_WRAPPER,
+  VIRTUAL_LIST_WRAPPER: legacyDataTestIds.DATA_TABLE_SCROLLABLE_CONTAINER,
+  GROUP_HEADER_CONTAINER: legacyDataTestIds.DATA_TABLE_ROW_GROUP_HEADER,
+  FILTER_BAR_MENU_BUTTON: legacyDataTestIds.DATA_TABLE_FILTER_BAR_DD_MENU_BUTTON,
+  // This one does not exist in the legacy list, but it was hardcoded in the component definition
+  EXPAND_CELL_CONTAINER: "data-table-row-expand-cell"
+};
+const DSDataTableSlots = DATA_TABLE_SLOTS;
+const DSDataTableDataTestIds = DATA_TABLE_DATA_TESTID;
+export {
+  DATA_TABLE_DATA_TESTID,
+  DATA_TABLE_SLOTS,
+  DSDataTableDataTestIds,
+  DSDataTableName,
+  DSDataTableSlots
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/constants/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\nimport { legacyDataTestIds } from './legacyToBeDeprecated.js';\n\nexport const DSDataTableName = 'DSDatatable';\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const DATA_TABLE_SLOTS = {\n  ROOT: 'root',\n  CONTENT_WRAPPER: 'content-wrapper',\n  TABLE_WRAPPER: 'table-wrapper',\n  PAGINATION_WRAPPER: 'pagination-wrapper',\n  TABLE_CONTENT_WRAPPER: 'table-content-wrapper',\n  VIRTUAL_LIST_WRAPPER: 'virtual-list-wrapper',\n  HEAD_WRAPPER: 'head-wrapper',\n  HEAD_TR: 'head-tr',\n  HEAD_TH: 'head-th',\n  HEAD_RIGHT_ICONS_WRAPPER: 'head-right-icons-wrapper',\n  HEADER_CELL_WRAPPER: 'header-cell-wrapper',\n  EMPTY_HEADER: 'empty-header',\n  RESIZER: 'resizer',\n  ACTION_CELL: 'action-cell',\n  EXPAND_CELL_CONTAINER: 'expand-cell-container',\n  SINGLE_CELL_CONTAINER: 'single-cell-container',\n  DRAG_AND_DROP_GRIPPER: 'drag-and-drop-gripper',\n  TEXT_EDITABLE_CELL_INPUT: 'text-editable-cell-input',\n  FILTER_POPOVER_BUTTON: 'filter-popover-button',\n  FILTER_POPOVER_CONTENT: 'filter-popover-content',\n  DROP_INDICATOR: 'drop-indicator',\n  CELL: 'cell',\n  CELL_CONTENT: 'cell-content',\n  PENCIL_ICON: 'pencil-icon',\n  EDITABLE_CONTAINER: 'editable-container',\n  FULLSIZE_GRID: 'fullsize-grid',\n  ROW: 'row',\n  GROUP_HEADER_CONTAINER: 'group-header-container',\n  GROUP_HEADER_TITLE: 'header-title',\n  CELL_CONTAINER: 'cells-container',\n  TOOLBAR_WRAPPER: 'toolbar-wrapper',\n  TOOLBAR_BUTTONS_WRAPPER: 'toolbar-buttons-wrapper',\n  TOOLBAR_BUTTON: 'toolbar-button',\n  TOOLBAR_POSITION: 'toolbar-position',\n  EMPTY_STATE_WRAPPER: 'empty-state-wrapper',\n  WARNING_ICON: 'warning-icon',\n  EMPTY_PRIMARY_MESSAGE: 'empty-primary-message',\n  EMPTY_SECONDARY_MESSAGE: 'empty-secondary-message',\n  EMPTY_BUTTON: 'empty-button',\n  CENTER_CONTENT_FLEX_WRAPPER: 'center-content-flex-wrapper',\n  LOADER_WRAPPER: 'loader-wrapper',\n  FILTER_BAR_WRAPPER: 'filter-bar-wrapper',\n  FREE_TEXT_SEARCH_FILTER: 'free-text-search-filter',\n  FREE_TEXT_SEARCH_WRAPPER: 'free-text-search-wrapper',\n  FILTER_POPOVER: 'filter-popover',\n  FILTER_BAR_MENU_BUTTON: 'filter-bar-menu-button',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const DATA_TABLE_DATA_TESTID = {\n  ...slotObjectToDataTestIds(DSDataTableName, DATA_TABLE_SLOTS),\n  /**\n   * These data-testid were defined in src/configs/constants.tsx\n   * but they were never exposed to consumers in the index.ts file.\n   * We are exposing them here for backward compatibility, as they are the ones used in the component implementation.\n   *\n   */\n  ...legacyDataTestIds,\n  /**\n   * As there is a mix of hardcoded data-testid and the ones auto generated by slot definitions\n   * we are overriding the auto generated ones with the hardcoded values for consistency.\n   */\n  CONTENT_WRAPPER: legacyDataTestIds.DATA_TABLE_CONTENT_WRAPPER,\n  TABLE_WRAPPER: legacyDataTestIds.DATA_TABLE_TABLE,\n  CELL_CONTAINER: legacyDataTestIds.DATA_TABLE_ROW_CONTENT,\n  DRAG_AND_DROP_GRIPPER: legacyDataTestIds.DATA_TABLE_DRAG_HANDLE,\n  FREE_TEXT_SEARCH_FILTER: legacyDataTestIds.DATA_TABLE_FILTER_FREE_TEXT_SEARCH,\n  FILTER_POPOVER_BUTTON: legacyDataTestIds.DATA_TABLE_FILTER_BUTTON,\n  HEAD_TH: legacyDataTestIds.DATA_TABLE_HEADER,\n  CELL: legacyDataTestIds.DATA_TABLE_CELL,\n  FULLSIZE_GRID: legacyDataTestIds.DATA_TABLE_ROW,\n  ROOT: legacyDataTestIds.DATA_TABLE_WRAPPER,\n  VIRTUAL_LIST_WRAPPER: legacyDataTestIds.DATA_TABLE_SCROLLABLE_CONTAINER,\n  GROUP_HEADER_CONTAINER: legacyDataTestIds.DATA_TABLE_ROW_GROUP_HEADER,\n  FILTER_BAR_MENU_BUTTON: legacyDataTestIds.DATA_TABLE_FILTER_BAR_DD_MENU_BUTTON,\n  // This one does not exist in the legacy list, but it was hardcoded in the component definition\n  EXPAND_CELL_CONTAINER: 'data-table-row-expand-cell',\n};\n\n// Legacy exports before Dimsum Compliance Task\nexport const DSDataTableSlots = DATA_TABLE_SLOTS;\nexport const DSDataTableDataTestIds = DATA_TABLE_DATA_TESTID;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AACxC,SAAS,yBAAyB;AAE3B,MAAM,kBAAkB;AAGxB,MAAM,mBAAmB;AAAA,EAC9B,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,oBAAoB;AAAA,EACpB,uBAAuB;AAAA,EACvB,sBAAsB;AAAA,EACtB,cAAc;AAAA,EACd,SAAS;AAAA,EACT,SAAS;AAAA,EACT,0BAA0B;AAAA,EAC1B,qBAAqB;AAAA,EACrB,cAAc;AAAA,EACd,SAAS;AAAA,EACT,aAAa;AAAA,EACb,uBAAuB;AAAA,EACvB,uBAAuB;AAAA,EACvB,uBAAuB;AAAA,EACvB,0BAA0B;AAAA,EAC1B,uBAAuB;AAAA,EACvB,wBAAwB;AAAA,EACxB,gBAAgB;AAAA,EAChB,MAAM;AAAA,EACN,cAAc;AAAA,EACd,aAAa;AAAA,EACb,oBAAoB;AAAA,EACpB,eAAe;AAAA,EACf,KAAK;AAAA,EACL,wBAAwB;AAAA,EACxB,oBAAoB;AAAA,EACpB,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,yBAAyB;AAAA,EACzB,gBAAgB;AAAA,EAChB,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,cAAc;AAAA,EACd,uBAAuB;AAAA,EACvB,yBAAyB;AAAA,EACzB,cAAc;AAAA,EACd,6BAA6B;AAAA,EAC7B,gBAAgB;AAAA,EAChB,oBAAoB;AAAA,EACpB,yBAAyB;AAAA,EACzB,0BAA0B;AAAA,EAC1B,gBAAgB;AAAA,EAChB,wBAAwB;AAC1B;AAGO,MAAM,yBAAyB;AAAA,EACpC,GAAG,wBAAwB,iBAAiB,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAO5D,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,EAKH,iBAAiB,kBAAkB;AAAA,EACnC,eAAe,kBAAkB;AAAA,EACjC,gBAAgB,kBAAkB;AAAA,EAClC,uBAAuB,kBAAkB;AAAA,EACzC,yBAAyB,kBAAkB;AAAA,EAC3C,uBAAuB,kBAAkB;AAAA,EACzC,SAAS,kBAAkB;AAAA,EAC3B,MAAM,kBAAkB;AAAA,EACxB,eAAe,kBAAkB;AAAA,EACjC,MAAM,kBAAkB;AAAA,EACxB,sBAAsB,kBAAkB;AAAA,EACxC,wBAAwB,kBAAkB;AAAA,EAC1C,wBAAwB,kBAAkB;AAAA;AAAA,EAE1C,uBAAuB;AACzB;AAGO,MAAM,mBAAmB;AACzB,MAAM,yBAAyB;",
+  "names": []
+}

package/dist/esm/constants/legacyToBeDeprecated.js

@@ -0,0 +1,45 @@
+import * as React from "react";
+const legacyDataTestIds = {
+  // DEFINED IN configs/constants.tsx
+  DATA_TABLE_WRAPPER: "data-table-wrapper",
+  DATA_TABLE_GLOBAL_EXPAND_CELL: "data-table-global-expand-cell",
+  DATA_TABLE_ICON_ARROW_DOWN: "ic-arrow-head-down",
+  DATA_TABLE_ICON_ARROW_RIGHT: "ic-arrow-head-right",
+  DATA_TABLE_ICON_ARROW_MIXED: "ic-arrow-head-mixed",
+  DATA_TABLE_ICON_CHILD: "ic-arrow-child",
+  DATA_TABLE_GLOBAL_CHECKBOX: "data-table-global-checkbox",
+  DATA_TABLE_CHECKBOX: "data-table-checkbox",
+  DATA_TABLE_RADIO: "data-table-radio",
+  DATA_TABLE_DATE_RANGE_CONTROLLER: "data-table-date-range",
+  DATA_TABLE_DATE_RANGE_CONTROLLER_CHECKBOX_SWITCHER: "data-table-date-range-checkbox-switcher-container",
+  DATA_TABLE_SINGLE_DATE_CONTROLLER: "data-table-single-date",
+  DATA_TABLE_NUMBER_RANGE_CONTROLLER: "data-table-number-range",
+  DATA_TABLE_CURRENCY_RANGE_CONTROLLER: "data-table-currency-range",
+  DATA_TABLE_SELECT_MENU_ITEM: "data-table-filter-menu-list-item",
+  DATA_TABLE_MULTISELECT_CONTROLLER: "data-table-multi-select",
+  DATA_TABLE_SINGLESELECT_CONTROLLER: "data-table-single-select",
+  DATA_TABLE_FILTER_BUTTON: "data-table-filter-menu-button",
+  DATA_TABLE_FILTER_BUTTON_ELEMENT: "ds-button",
+  // TODO 'data-table-filter-menu-button-element',
+  DATA_TABLE_FILTER_MENU_CONTENT: "data-table-filter-menu-content",
+  DATA_TABLE_FILTER_FREE_TEXT_SEARCH: "data-table-filter-free-text-search",
+  DATA_TABLE_ROW_CONTENT: "data-table-row-content",
+  DATA_TABLE_ROW: "data-table-row",
+  DATA_TABLE_TOOLBAR_TRIGGER: "data-table-toolbar-trigger",
+  DATA_TABLE_CELL: "data-table-cell",
+  DATA_TABLE_DRAG_HANDLE: "data-table-drag-handle",
+  DATA_TABLE_CONTENT_WRAPPER: "data-table-content-wrapper",
+  DATA_TABLE_TABLE: "data-table-table",
+  DATA_TABLE_SCROLLABLE_CONTAINER: "data-table-scrollable-container",
+  DATA_TABLE_HEADER: "data-table-header",
+  DATA_TABLE_ROW_HEADER_CONTENT: "data-table-row-header-content",
+  DATA_TABLE_ROW_GROUP_HEADER: "data-table-row-group-header",
+  DATA_TABLE_COLUMN_DRAG_OVERLAY: "data-table-drag-column-drag-overlay",
+  DATA_TABLE_HEADER_CELL_TITLE: "header-cell-title",
+  DATA_TABLE_FILTER_BAR_DD_MENU_BUTTON: "filter-bar-ddmenu-button",
+  DATA_TABLE_SORT_BUTTON: "data-table-sort-button"
+};
+export {
+  legacyDataTestIds
+};
+//# sourceMappingURL=legacyToBeDeprecated.js.map

package/dist/esm/constants/legacyToBeDeprecated.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/legacyToBeDeprecated.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const legacyDataTestIds = {\n  // DEFINED IN configs/constants.tsx\n  DATA_TABLE_WRAPPER: 'data-table-wrapper',\n  DATA_TABLE_GLOBAL_EXPAND_CELL: 'data-table-global-expand-cell',\n  DATA_TABLE_ICON_ARROW_DOWN: 'ic-arrow-head-down',\n  DATA_TABLE_ICON_ARROW_RIGHT: 'ic-arrow-head-right',\n  DATA_TABLE_ICON_ARROW_MIXED: 'ic-arrow-head-mixed',\n  DATA_TABLE_ICON_CHILD: 'ic-arrow-child',\n  DATA_TABLE_GLOBAL_CHECKBOX: 'data-table-global-checkbox',\n  DATA_TABLE_CHECKBOX: 'data-table-checkbox',\n  DATA_TABLE_RADIO: 'data-table-radio',\n  DATA_TABLE_DATE_RANGE_CONTROLLER: 'data-table-date-range',\n  DATA_TABLE_DATE_RANGE_CONTROLLER_CHECKBOX_SWITCHER: 'data-table-date-range-checkbox-switcher-container',\n  DATA_TABLE_SINGLE_DATE_CONTROLLER: 'data-table-single-date',\n  DATA_TABLE_NUMBER_RANGE_CONTROLLER: 'data-table-number-range',\n  DATA_TABLE_CURRENCY_RANGE_CONTROLLER: 'data-table-currency-range',\n  DATA_TABLE_SELECT_MENU_ITEM: 'data-table-filter-menu-list-item',\n  DATA_TABLE_MULTISELECT_CONTROLLER: 'data-table-multi-select',\n  DATA_TABLE_SINGLESELECT_CONTROLLER: 'data-table-single-select',\n  DATA_TABLE_FILTER_BUTTON: 'data-table-filter-menu-button',\n  DATA_TABLE_FILTER_BUTTON_ELEMENT: 'ds-button', // TODO 'data-table-filter-menu-button-element',\n  DATA_TABLE_FILTER_MENU_CONTENT: 'data-table-filter-menu-content',\n  DATA_TABLE_FILTER_FREE_TEXT_SEARCH: 'data-table-filter-free-text-search',\n  DATA_TABLE_ROW_CONTENT: 'data-table-row-content',\n  DATA_TABLE_ROW: 'data-table-row',\n  DATA_TABLE_TOOLBAR_TRIGGER: 'data-table-toolbar-trigger',\n  DATA_TABLE_CELL: 'data-table-cell',\n  DATA_TABLE_DRAG_HANDLE: 'data-table-drag-handle',\n  DATA_TABLE_CONTENT_WRAPPER: 'data-table-content-wrapper',\n  DATA_TABLE_TABLE: 'data-table-table',\n  DATA_TABLE_SCROLLABLE_CONTAINER: 'data-table-scrollable-container',\n  DATA_TABLE_HEADER: 'data-table-header',\n  DATA_TABLE_ROW_HEADER_CONTENT: 'data-table-row-header-content',\n  DATA_TABLE_ROW_GROUP_HEADER: 'data-table-row-group-header',\n  DATA_TABLE_COLUMN_DRAG_OVERLAY: 'data-table-drag-column-drag-overlay',\n  DATA_TABLE_HEADER_CELL_TITLE: 'header-cell-title',\n  DATA_TABLE_FILTER_BAR_DD_MENU_BUTTON: 'filter-bar-ddmenu-button',\n  DATA_TABLE_SORT_BUTTON: 'data-table-sort-button',\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,oBAAoB;AAAA;AAAA,EAE/B,oBAAoB;AAAA,EACpB,+BAA+B;AAAA,EAC/B,4BAA4B;AAAA,EAC5B,6BAA6B;AAAA,EAC7B,6BAA6B;AAAA,EAC7B,uBAAuB;AAAA,EACvB,4BAA4B;AAAA,EAC5B,qBAAqB;AAAA,EACrB,kBAAkB;AAAA,EAClB,kCAAkC;AAAA,EAClC,oDAAoD;AAAA,EACpD,mCAAmC;AAAA,EACnC,oCAAoC;AAAA,EACpC,sCAAsC;AAAA,EACtC,6BAA6B;AAAA,EAC7B,mCAAmC;AAAA,EACnC,oCAAoC;AAAA,EACpC,0BAA0B;AAAA,EAC1B,kCAAkC;AAAA;AAAA,EAClC,gCAAgC;AAAA,EAChC,oCAAoC;AAAA,EACpC,wBAAwB;AAAA,EACxB,gBAAgB;AAAA,EAChB,4BAA4B;AAAA,EAC5B,iBAAiB;AAAA,EACjB,wBAAwB;AAAA,EACxB,4BAA4B;AAAA,EAC5B,kBAAkB;AAAA,EAClB,iCAAiC;AAAA,EACjC,mBAAmB;AAAA,EACnB,+BAA+B;AAAA,EAC/B,6BAA6B;AAAA,EAC7B,gCAAgC;AAAA,EAChC,8BAA8B;AAAA,EAC9B,sCAAsC;AAAA,EACtC,wBAAwB;AAC1B;",
+  "names": []
+}

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useLayoutEffect, useState } from "react";
+import React2, { useCallback, useLayoutEffect, useState } from "react";
 import { usePropsStore } from "../configs/useStore/createInternalAndPropsContext.js";
 import { StyledEditableContainer, StyledPencilIcon } from "../styled.js";
 const EditableCell = (props) => {
@@ -8,6 +8,7 @@ const EditableCell = (props) => {
   const domIdAffix = usePropsStore((state) => state.domIdAffix);
   const virtualListHelpers = usePropsStore((state) => state.virtualListHelpers);
   const getOwnerProps = usePropsStore((store) => store.get);
+  const getOwnerPropsArguments = React2.useCallback(() => cell, [cell]);
   const [isEditing, setIsEditing] = useState(false);
   const [lastIsEditing, setLastIsEditing] = useState(false);
   useLayoutEffect(() => {
@@ -60,6 +61,7 @@ const EditableCell = (props) => {
       role: "group",
       "aria-labelledby": isEditing ? void 0 : cell.id,
       getOwnerProps,
+      getOwnerPropsArguments,
       children: [
         !isEditing ? StandardRender : EditableRenderer,
         !isEditing && /* @__PURE__ */ jsx(StyledPencilIcon, {}),

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/EditableCell.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useLayoutEffect, useState } from 'react';\nimport { usePropsStore } from '../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\nimport { StyledEditableContainer, StyledPencilIcon } from '../styled.js';\n\nexport const EditableCell: React.ComponentType<{\n  StandardRender: JSX.Element;\n  EditableRenderer: JSX.Element;\n  cell: DSDataTableT.Cell<HTMLDivElement>;\n  isRowSelected?: boolean;\n}> = (props) => {\n  const { StandardRender, EditableRenderer, cell, isRowSelected } = props;\n  const domIdAffix = usePropsStore((state) => state.domIdAffix);\n  const virtualListHelpers = usePropsStore((state) => state.virtualListHelpers);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  const [isEditing, setIsEditing] = useState(false);\n  const [lastIsEditing, setLastIsEditing] = useState(false);\n  // When an editable cell is switched on-off, we recalculate the height of the rows\n  useLayoutEffect(() => {\n    if (isEditing !== lastIsEditing) {\n      virtualListHelpers.measure();\n      setLastIsEditing(isEditing);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isEditing]);\n\n  const handleCellClick = useCallback(\n    (e: React.MouseEvent | React.KeyboardEvent) => {\n      if (!isEditing) {\n        e.stopPropagation();\n        setIsEditing(true);\n      }\n    },\n    [isEditing],\n  );\n\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (isEditing) {\n        e.stopPropagation();\n        if (['Enter', 'Escape'].includes(e.code)) {\n          setIsEditing(false);\n        }\n      } else if (['Enter', 'Space'].includes(e.code)) {\n        handleCellClick(e);\n      }\n    },\n    [isEditing, handleCellClick, setIsEditing],\n  );\n\n  const handleOnBlur = useCallback(\n    (event: React.FocusEvent) => {\n      if (isEditing && !event.currentTarget?.contains(event.relatedTarget)) {\n        // Not triggered when swapping focus between children\n        setIsEditing(false);\n      }\n    },\n    [isEditing],\n  );\n  const cols = !isEditing ? ['auto', 'min-content'] : ['auto'];\n  return (\n    <StyledEditableContainer\n      cols={cols}\n      tabIndex={isRowSelected && !isEditing ? 0 : -1}\n      innerRef={cell.ref}\n      onClick={handleCellClick}\n      onKeyDown={handleOnKeyDown}\n      onBlur={handleOnBlur}\n      shouldDisplayEditIcon={cell.column.alwaysDisplayEditIcon}\n      role=\"group\"\n      aria-labelledby={isEditing ? undefined : cell.id}\n      getOwnerProps={getOwnerProps}\n    >\n      {!isEditing ? StandardRender : EditableRenderer}\n      {!isEditing && <StyledPencilIcon />}\n      <span id={`editable-cell-${cell.id}-${domIdAffix}`} style={{ display: 'none' }} aria-hidden=\"true\">\n        {cell.value as string}, editable cell. To edit the content&apos;s of this cell, press the Enter key\n      </span>\n    </StyledEditableContainer>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC2EF,cACf,YADe;AA3ErB,SAAgB,aAAa,iBAAiB,gBAAgB;AAC9D,SAAS,qBAAqB;AAE9B,SAAS,yBAAyB,wBAAwB;AAEnD,MAAM,eAKR,CAAC,UAAU;AACd,QAAM,EAAE,gBAAgB,kBAAkB,MAAM,cAAc,IAAI;AAClE,QAAM,aAAa,cAAc,CAAC,UAAU,MAAM,UAAU;AAC5D,QAAM,qBAAqB,cAAc,CAAC,UAAU,MAAM,kBAAkB;AAC5E,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AAExD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AAExD,kBAAgB,MAAM;AACpB,QAAI,cAAc,eAAe;AAC/B,yBAAmB,QAAQ;AAC3B,uBAAiB,SAAS;AAAA,IAC5B;AAAA,EAEF,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,kBAAkB;AAAA,IACtB,CAAC,MAA8C;AAC7C,UAAI,CAAC,WAAW;AACd,UAAE,gBAAgB;AAClB,qBAAa,IAAI;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AAEA,QAAM,kBAAkB;AAAA,IACtB,CAAC,MAA2B;AAC1B,UAAI,WAAW;AACb,UAAE,gBAAgB;AAClB,YAAI,CAAC,SAAS,QAAQ,EAAE,SAAS,EAAE,IAAI,GAAG;AACxC,uBAAa,KAAK;AAAA,QACpB;AAAA,MACF,WAAW,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,GAAG;AAC9C,wBAAgB,CAAC;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,WAAW,iBAAiB,YAAY;AAAA,EAC3C;AAEA,QAAM,eAAe;AAAA,IACnB,CAAC,UAA4B;AAC3B,UAAI,aAAa,CAAC,MAAM,eAAe,SAAS,MAAM,aAAa,GAAG;AAEpE,qBAAa,KAAK;AAAA,MACpB;AAAA,IACF;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AACA,QAAM,OAAO,CAAC,YAAY,CAAC,QAAQ,aAAa,IAAI,CAAC,MAAM;AAC3D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAU,iBAAiB,CAAC,YAAY,IAAI;AAAA,MAC5C,UAAU,KAAK;AAAA,MACf,SAAS;AAAA,MACT,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,uBAAuB,KAAK,OAAO;AAAA,MACnC,MAAK;AAAA,MACL,mBAAiB,YAAY,SAAY,KAAK;AAAA,MAC9C;AAAA,MAEC;AAAA,SAAC,YAAY,iBAAiB;AAAA,QAC9B,CAAC,aAAa,oBAAC,oBAAiB;AAAA,QACjC,qBAAC,UAAK,IAAI,iBAAiB,KAAK,EAAE,IAAI,UAAU,IAAI,OAAO,EAAE,SAAS,OAAO,GAAG,eAAY,QACzF;AAAA,eAAK;AAAA,UAAgB;AAAA,WACxB;AAAA;AAAA;AAAA,EACF;AAEJ;",
-  "names": []
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useLayoutEffect, useState } from 'react';\nimport { usePropsStore } from '../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\nimport { StyledEditableContainer, StyledPencilIcon } from '../styled.js';\n\nexport const EditableCell: React.ComponentType<{\n  StandardRender: JSX.Element;\n  EditableRenderer: JSX.Element;\n  cell: DSDataTableT.Cell<HTMLDivElement>;\n  isRowSelected?: boolean;\n}> = (props) => {\n  const { StandardRender, EditableRenderer, cell, isRowSelected } = props;\n  const domIdAffix = usePropsStore((state) => state.domIdAffix);\n  const virtualListHelpers = usePropsStore((state) => state.virtualListHelpers);\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = React.useCallback(() => cell, [cell]);\n\n  const [isEditing, setIsEditing] = useState(false);\n  const [lastIsEditing, setLastIsEditing] = useState(false);\n  // When an editable cell is switched on-off, we recalculate the height of the rows\n  useLayoutEffect(() => {\n    if (isEditing !== lastIsEditing) {\n      virtualListHelpers.measure();\n      setLastIsEditing(isEditing);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isEditing]);\n\n  const handleCellClick = useCallback(\n    (e: React.MouseEvent | React.KeyboardEvent) => {\n      if (!isEditing) {\n        e.stopPropagation();\n        setIsEditing(true);\n      }\n    },\n    [isEditing],\n  );\n\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (isEditing) {\n        e.stopPropagation();\n        if (['Enter', 'Escape'].includes(e.code)) {\n          setIsEditing(false);\n        }\n      } else if (['Enter', 'Space'].includes(e.code)) {\n        handleCellClick(e);\n      }\n    },\n    [isEditing, handleCellClick, setIsEditing],\n  );\n\n  const handleOnBlur = useCallback(\n    (event: React.FocusEvent) => {\n      if (isEditing && !event.currentTarget?.contains(event.relatedTarget)) {\n        // Not triggered when swapping focus between children\n        setIsEditing(false);\n      }\n    },\n    [isEditing],\n  );\n  const cols = !isEditing ? ['auto', 'min-content'] : ['auto'];\n  return (\n    <StyledEditableContainer\n      cols={cols}\n      tabIndex={isRowSelected && !isEditing ? 0 : -1}\n      innerRef={cell.ref}\n      onClick={handleCellClick}\n      onKeyDown={handleOnKeyDown}\n      onBlur={handleOnBlur}\n      shouldDisplayEditIcon={cell.column.alwaysDisplayEditIcon}\n      role=\"group\"\n      aria-labelledby={isEditing ? undefined : cell.id}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      {!isEditing ? StandardRender : EditableRenderer}\n      {!isEditing && <StyledPencilIcon />}\n      <span id={`editable-cell-${cell.id}-${domIdAffix}`} style={{ display: 'none' }} aria-hidden=\"true\">\n        {cell.value as string}, editable cell. To edit the content&apos;s of this cell, press the Enter key\n      </span>\n    </StyledEditableContainer>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC6EF,cACf,YADe;AA7ErB,OAAOA,UAAS,aAAa,iBAAiB,gBAAgB;AAC9D,SAAS,qBAAqB;AAE9B,SAAS,yBAAyB,wBAAwB;AAEnD,MAAM,eAKR,CAAC,UAAU;AACd,QAAM,EAAE,gBAAgB,kBAAkB,MAAM,cAAc,IAAI;AAClE,QAAM,aAAa,cAAc,CAAC,UAAU,MAAM,UAAU;AAC5D,QAAM,qBAAqB,cAAc,CAAC,UAAU,MAAM,kBAAkB;AAC5E,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyBA,OAAM,YAAY,MAAM,MAAM,CAAC,IAAI,CAAC;AAEnE,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AAExD,kBAAgB,MAAM;AACpB,QAAI,cAAc,eAAe;AAC/B,yBAAmB,QAAQ;AAC3B,uBAAiB,SAAS;AAAA,IAC5B;AAAA,EAEF,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,kBAAkB;AAAA,IACtB,CAAC,MAA8C;AAC7C,UAAI,CAAC,WAAW;AACd,UAAE,gBAAgB;AAClB,qBAAa,IAAI;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AAEA,QAAM,kBAAkB;AAAA,IACtB,CAAC,MAA2B;AAC1B,UAAI,WAAW;AACb,UAAE,gBAAgB;AAClB,YAAI,CAAC,SAAS,QAAQ,EAAE,SAAS,EAAE,IAAI,GAAG;AACxC,uBAAa,KAAK;AAAA,QACpB;AAAA,MACF,WAAW,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,GAAG;AAC9C,wBAAgB,CAAC;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,WAAW,iBAAiB,YAAY;AAAA,EAC3C;AAEA,QAAM,eAAe;AAAA,IACnB,CAAC,UAA4B;AAC3B,UAAI,aAAa,CAAC,MAAM,eAAe,SAAS,MAAM,aAAa,GAAG;AAEpE,qBAAa,KAAK;AAAA,MACpB;AAAA,IACF;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AACA,QAAM,OAAO,CAAC,YAAY,CAAC,QAAQ,aAAa,IAAI,CAAC,MAAM;AAC3D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAU,iBAAiB,CAAC,YAAY,IAAI;AAAA,MAC5C,UAAU,KAAK;AAAA,MACf,SAAS;AAAA,MACT,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,uBAAuB,KAAK,OAAO;AAAA,MACnC,MAAK;AAAA,MACL,mBAAiB,YAAY,SAAY,KAAK;AAAA,MAC9C;AAAA,MACA;AAAA,MAEC;AAAA,SAAC,YAAY,iBAAiB;AAAA,QAC9B,CAAC,aAAa,oBAAC,oBAAiB;AAAA,QACjC,qBAAC,UAAK,IAAI,iBAAiB,KAAK,EAAE,IAAI,UAAU,IAAI,OAAO,EAAE,SAAS,OAAO,GAAG,eAAY,QACzF;AAAA,eAAK;AAAA,UAAgB;AAAA,WACxB;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "names": ["React"]
 }

package/dist/esm/exported-related/FilterBar/FilterBarDropdownMenu.js

@@ -1,11 +1,12 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { useState, useCallback, useMemo } from "react";
-import { DSDropdownMenuV2 } from "@elliemae/ds-dropdownmenu-v2";
+import { checkAndConvertOptions, DSDropdownMenuV2 } from "@elliemae/ds-dropdownmenu-v2";
 import { DSButtonV2, BUTTON_TYPES } from "@elliemae/ds-button-v2";
 import { MoreOptionsVert } from "@elliemae/ds-icons";
 import { DATA_TESTID } from "../../configs/index.js";
 import { usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
+import { FilterMenuButton } from "./FilterMenuButton.js";
 const FilterBarDropdownMenu = (props) => {
   const onFiltersChange = usePropsStore((state) => state.onFiltersChange);
   const [isOpened, setIsOpened] = useState(false);
@@ -15,6 +16,9 @@ const FilterBarDropdownMenu = (props) => {
     setIsOpened(false);
     innerRef?.current?.focus?.();
   }, [innerRef, onFiltersChange]);
+  const onClearFilters = useCallback(() => {
+    onFiltersChange([]);
+  }, [onFiltersChange]);
   const options = useMemo(
     () => [
       {
@@ -31,32 +35,42 @@ const FilterBarDropdownMenu = (props) => {
     ],
     [extraOptions, removeFilters]
   );
-  return /* @__PURE__ */ jsx("div", { style: { marginLeft: "auto" }, children: /* @__PURE__ */ jsx(
-    DSDropdownMenuV2,
-    {
-      isOpened,
-      startPlacementPreference: "bottom-end",
-      options,
-      onClickOutside: () => {
-        setIsOpened(false);
-      },
-      onKeyDown: (e) => {
-        if (e.code === "Escape") innerRef?.current?.focus?.();
-      },
-      children: /* @__PURE__ */ jsx(
-        DSButtonV2,
-        {
-          buttonType: BUTTON_TYPES.ICON,
-          onClick: () => setIsOpened((prevOpened) => !prevOpened),
-          innerRef,
-          "aria-label": "Filter bar addon",
-          "data-testid": DATA_TESTID.DATA_TABLE_FILTER_BAR_DD_MENU_BUTTON,
-          ...restProps,
-          children: /* @__PURE__ */ jsx(MoreOptionsVert, {})
-        }
-      )
-    }
-  ) });
+  try {
+    const { convertedOptions, report } = checkAndConvertOptions(extraOptions);
+    report.humanReadableWarnings.forEach((warning) => console.warn(warning));
+    return /* @__PURE__ */ jsx(FilterMenuButton, { options: convertedOptions, onClearFilters, innerRef });
+  } catch {
+    console.error(`
+      In upcoming releases, DSDropdownMenuV2 will be deprecated as it is not accessible. 
+      In effort to have compliant components we are enforcing MenuButton usage, by converting options.
+      If you find this error it is because the provided options are not possible to be made A11y accessible, and we are displaying the DSDropdownMenuV2 as fallback.`);
+    return /* @__PURE__ */ jsx("div", { style: { marginLeft: "auto" }, children: /* @__PURE__ */ jsx(
+      DSDropdownMenuV2,
+      {
+        isOpened,
+        startPlacementPreference: "bottom-end",
+        options,
+        onClickOutside: () => {
+          setIsOpened(false);
+        },
+        onKeyDown: (e) => {
+          if (e.code === "Escape") innerRef?.current?.focus?.();
+        },
+        children: /* @__PURE__ */ jsx(
+          DSButtonV2,
+          {
+            buttonType: BUTTON_TYPES.ICON,
+            onClick: () => setIsOpened((prevOpened) => !prevOpened),
+            innerRef,
+            "aria-label": "Filter bar addon",
+            "data-testid": DATA_TESTID.DATA_TABLE_FILTER_BAR_DD_MENU_BUTTON,
+            ...restProps,
+            children: /* @__PURE__ */ jsx(MoreOptionsVert, {})
+          }
+        )
+      }
+    ) });
+  }
 };
 export {
   FilterBarDropdownMenu

package/dist/esm/exported-related/FilterBar/FilterBarDropdownMenu.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/FilterBar/FilterBarDropdownMenu.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useCallback, useMemo } from 'react';\nimport { DSDropdownMenuV2, type DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';\nimport { DSButtonV2, BUTTON_TYPES } from '@elliemae/ds-button-v2';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { DATA_TESTID } from '../../configs/index.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\n\ninterface FilterBarDropdownMenuProps {\n  options?: DSDropdownMenuT.Props['options'];\n  innerRef?: React.RefObject<HTMLButtonElement>;\n}\n\nexport const FilterBarDropdownMenu: React.ComponentType<FilterBarDropdownMenuProps> = (props) => {\n  const onFiltersChange = usePropsStore((state) => state.onFiltersChange);\n  const [isOpened, setIsOpened] = useState(false);\n\n  const { options: extraOptions = [], innerRef, ...restProps } = props;\n  const removeFilters: React.MouseEventHandler & React.KeyboardEventHandler = useCallback(() => {\n    onFiltersChange([]);\n    setIsOpened(false);\n    innerRef?.current?.focus?.();\n  }, [innerRef, onFiltersChange]);\n\n  const options: DSDropdownMenuT.Item[] = useMemo(\n    () => [\n      {\n        dsId: '__internal__option__clear__filters',\n        label: 'Clear Filters',\n        value: 'clear',\n        type: 'action',\n        onClick: removeFilters,\n        onKeyDown: (e: React.KeyboardEvent) => {\n          if (['Enter', 'Space'].includes(e.code)) removeFilters(e);\n        },\n      } as unknown as DSDropdownMenuT.Item,\n      ...extraOptions,\n    ],\n    [extraOptions, removeFilters],\n  );\n\n  return (\n    <div style={{ marginLeft: 'auto' }}>\n      <DSDropdownMenuV2\n        isOpened={isOpened}\n        startPlacementPreference=\"bottom-end\"\n        options={options}\n        onClickOutside={() => {\n          setIsOpened(false);\n        }}\n        onKeyDown={(e: React.KeyboardEvent) => {\n          if (e.code === 'Escape') innerRef?.current?.focus?.();\n        }}\n      >\n        <DSButtonV2\n          buttonType={BUTTON_TYPES.ICON}\n          onClick={() => setIsOpened((prevOpened) => !prevOpened)}\n          innerRef={innerRef}\n          aria-label=\"Filter bar addon\"\n          data-testid={DATA_TESTID.DATA_TABLE_FILTER_BAR_DD_MENU_BUTTON}\n          {...restProps}\n        >\n          <MoreOptionsVert />\n        </DSButtonV2>\n      </DSDropdownMenuV2>\n    </div>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC6Db;AA7DV,SAAgB,UAAU,aAAa,eAAe;AACtD,SAAS,wBAA8C;AACvD,SAAS,YAAY,oBAAoB;AACzC,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAOvB,MAAM,wBAAyE,CAAC,UAAU;AAC/F,QAAM,kBAAkB,cAAc,CAAC,UAAU,MAAM,eAAe;AACtE,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAE9C,QAAM,EAAE,SAAS,eAAe,CAAC,GAAG,UAAU,GAAG,UAAU,IAAI;AAC/D,QAAM,gBAAsE,YAAY,MAAM;AAC5F,oBAAgB,CAAC,CAAC;AAClB,gBAAY,KAAK;AACjB,cAAU,SAAS,QAAQ;AAAA,EAC7B,GAAG,CAAC,UAAU,eAAe,CAAC;AAE9B,QAAM,UAAkC;AAAA,IACtC,MAAM;AAAA,MACJ;AAAA,QACE,MAAM;AAAA,QACN,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM;AAAA,QACN,SAAS;AAAA,QACT,WAAW,CAAC,MAA2B;AACrC,cAAI,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,EAAG,eAAc,CAAC;AAAA,QAC1D;AAAA,MACF;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA,CAAC,cAAc,aAAa;AAAA,EAC9B;AAEA,SACE,oBAAC,SAAI,OAAO,EAAE,YAAY,OAAO,GAC/B;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,0BAAyB;AAAA,MACzB;AAAA,MACA,gBAAgB,MAAM;AACpB,oBAAY,KAAK;AAAA,MACnB;AAAA,MACA,WAAW,CAAC,MAA2B;AACrC,YAAI,EAAE,SAAS,SAAU,WAAU,SAAS,QAAQ;AAAA,MACtD;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,YAAY,aAAa;AAAA,UACzB,SAAS,MAAM,YAAY,CAAC,eAAe,CAAC,UAAU;AAAA,UACtD;AAAA,UACA,cAAW;AAAA,UACX,eAAa,YAAY;AAAA,UACxB,GAAG;AAAA,UAEJ,8BAAC,mBAAgB;AAAA;AAAA,MACnB;AAAA;AAAA,EACF,GACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useCallback, useMemo } from 'react';\nimport { checkAndConvertOptions, DSDropdownMenuV2, type DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';\nimport { DSButtonV2, BUTTON_TYPES } from '@elliemae/ds-button-v2';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { DATA_TESTID } from '../../configs/index.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport { FilterMenuButton } from './FilterMenuButton.js';\n\ninterface FilterBarDropdownMenuProps {\n  options?: DSDropdownMenuT.Props['options'];\n  innerRef?: React.RefObject<HTMLButtonElement>;\n}\n\nexport const FilterBarDropdownMenu: React.ComponentType<FilterBarDropdownMenuProps> = (props) => {\n  const onFiltersChange = usePropsStore((state) => state.onFiltersChange);\n  const [isOpened, setIsOpened] = useState(false);\n\n  const { options: extraOptions = [], innerRef, ...restProps } = props;\n  const removeFilters: React.MouseEventHandler & React.KeyboardEventHandler = useCallback(() => {\n    onFiltersChange([]);\n    setIsOpened(false);\n    innerRef?.current?.focus?.();\n  }, [innerRef, onFiltersChange]);\n  const onClearFilters = useCallback(() => {\n    onFiltersChange([]);\n  }, [onFiltersChange]);\n\n  const options: DSDropdownMenuT.Item[] = useMemo(\n    () => [\n      {\n        dsId: '__internal__option__clear__filters',\n        label: 'Clear Filters',\n        value: 'clear',\n        type: 'action',\n        onClick: removeFilters,\n        onKeyDown: (e: React.KeyboardEvent) => {\n          if (['Enter', 'Space'].includes(e.code)) removeFilters(e);\n        },\n      } as unknown as DSDropdownMenuT.Item,\n      ...extraOptions,\n    ],\n    [extraOptions, removeFilters],\n  );\n\n  /** PUI-15557 (https://jira.elliemae.io/browse/PUI-15557)\n   * On behalf of this ticket, we are promoting the usage of withFilterBar always in combination with filterAddonRenderer, and never alone.\n   * On Storybook, we were using this component (FilterBarDropdownMenu) as the addon, which was using DSDropdownMenuV2.\n   * As DSDropdownMenuV2 is not accessible, we are enforcing the usage of DSMenuButton instead, by converting options from DSDropdownMenuV2 to DSMenuButton.\n   * If the conversion fails, we fallback to rendering the DSDropdownMenuV2 directly.\n   */\n\n  try {\n    const { convertedOptions, report } = checkAndConvertOptions(extraOptions);\n    // eslint-disable-next-line no-console\n    report.humanReadableWarnings.forEach((warning) => console.warn(warning));\n    return <FilterMenuButton options={convertedOptions} onClearFilters={onClearFilters} innerRef={innerRef} />;\n  } catch {\n    // eslint-disable-next-line no-console\n    console.error(`\n      In upcoming releases, DSDropdownMenuV2 will be deprecated as it is not accessible. \n      In effort to have compliant components we are enforcing MenuButton usage, by converting options.\n      If you find this error it is because the provided options are not possible to be made A11y accessible, and we are displaying the DSDropdownMenuV2 as fallback.`);\n    return (\n      <div style={{ marginLeft: 'auto' }}>\n        <DSDropdownMenuV2\n          isOpened={isOpened}\n          startPlacementPreference=\"bottom-end\"\n          options={options}\n          onClickOutside={() => {\n            setIsOpened(false);\n          }}\n          onKeyDown={(e: React.KeyboardEvent) => {\n            if (e.code === 'Escape') innerRef?.current?.focus?.();\n          }}\n        >\n          <DSButtonV2\n            buttonType={BUTTON_TYPES.ICON}\n            onClick={() => setIsOpened((prevOpened) => !prevOpened)}\n            innerRef={innerRef}\n            aria-label=\"Filter bar addon\"\n            data-testid={DATA_TESTID.DATA_TABLE_FILTER_BAR_DD_MENU_BUTTON}\n            {...restProps}\n          >\n            <MoreOptionsVert />\n          </DSButtonV2>\n        </DSDropdownMenuV2>\n      </div>\n    );\n  }\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACuDZ;AAvDX,SAAgB,UAAU,aAAa,eAAe;AACtD,SAAS,wBAAwB,wBAA8C;AAC/E,SAAS,YAAY,oBAAoB;AACzC,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AAO1B,MAAM,wBAAyE,CAAC,UAAU;AAC/F,QAAM,kBAAkB,cAAc,CAAC,UAAU,MAAM,eAAe;AACtE,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAE9C,QAAM,EAAE,SAAS,eAAe,CAAC,GAAG,UAAU,GAAG,UAAU,IAAI;AAC/D,QAAM,gBAAsE,YAAY,MAAM;AAC5F,oBAAgB,CAAC,CAAC;AAClB,gBAAY,KAAK;AACjB,cAAU,SAAS,QAAQ;AAAA,EAC7B,GAAG,CAAC,UAAU,eAAe,CAAC;AAC9B,QAAM,iBAAiB,YAAY,MAAM;AACvC,oBAAgB,CAAC,CAAC;AAAA,EACpB,GAAG,CAAC,eAAe,CAAC;AAEpB,QAAM,UAAkC;AAAA,IACtC,MAAM;AAAA,MACJ;AAAA,QACE,MAAM;AAAA,QACN,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM;AAAA,QACN,SAAS;AAAA,QACT,WAAW,CAAC,MAA2B;AACrC,cAAI,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,EAAG,eAAc,CAAC;AAAA,QAC1D;AAAA,MACF;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA,CAAC,cAAc,aAAa;AAAA,EAC9B;AASA,MAAI;AACF,UAAM,EAAE,kBAAkB,OAAO,IAAI,uBAAuB,YAAY;AAExE,WAAO,sBAAsB,QAAQ,CAAC,YAAY,QAAQ,KAAK,OAAO,CAAC;AACvE,WAAO,oBAAC,oBAAiB,SAAS,kBAAkB,gBAAgC,UAAoB;AAAA,EAC1G,QAAQ;AAEN,YAAQ,MAAM;AAAA;AAAA;AAAA,qKAGmJ;AACjK,WACE,oBAAC,SAAI,OAAO,EAAE,YAAY,OAAO,GAC/B;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,0BAAyB;AAAA,QACzB;AAAA,QACA,gBAAgB,MAAM;AACpB,sBAAY,KAAK;AAAA,QACnB;AAAA,QACA,WAAW,CAAC,MAA2B;AACrC,cAAI,EAAE,SAAS,SAAU,WAAU,SAAS,QAAQ;AAAA,QACtD;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,YAAY,aAAa;AAAA,YACzB,SAAS,MAAM,YAAY,CAAC,eAAe,CAAC,UAAU;AAAA,YACtD;AAAA,YACA,cAAW;AAAA,YACX,eAAa,YAAY;AAAA,YACxB,GAAG;AAAA,YAEJ,8BAAC,mBAAgB;AAAA;AAAA,QACnB;AAAA;AAAA,IACF,GACF;AAAA,EAEJ;AACF;",
   "names": []
 }

package/dist/esm/exported-related/FilterBar/FilterMenuButton.js

@@ -0,0 +1,83 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { BUTTON_TYPES } from "@elliemae/ds-button-v2";
+import { MoreOptionsVert } from "@elliemae/ds-icons";
+import { DSMenuButton, MENU_ITEMS_TYPES } from "@elliemae/ds-menu-button";
+import { styled } from "@elliemae/ds-system";
+import { useMemo } from "react";
+import { DATA_TESTID } from "../../configs/index.js";
+import { DATA_TABLE_SLOTS, DSDataTableName } from "../../constants/index.js";
+const StyledDSMenuButton = styled(DSMenuButton, {
+  name: DSDataTableName,
+  slot: DATA_TABLE_SLOTS.FILTER_BAR_MENU_BUTTON
+})``;
+const FilterMenuButton = ({
+  options = [],
+  innerRef,
+  onClearFilters,
+  onItemSelected,
+  onActivateItem,
+  selectedItems,
+  ...restProps
+}) => {
+  const menuButtonOptions = useMemo(
+    () => [
+      {
+        type: MENU_ITEMS_TYPES.ACTIVABLE_ITEM,
+        dsId: "__internal__option__clear__filters",
+        label: "Clear Filters",
+        value: "clear",
+        onClick: onClearFilters,
+        onKeyDown: (e) => {
+          if (["Enter", "Space"].includes(e.code)) {
+            e.preventDefault();
+            onClearFilters();
+          }
+          return null;
+        }
+      },
+      ...options.map((option) => {
+        if (option.type !== MENU_ITEMS_TYPES.SEPARATOR && option.type !== MENU_ITEMS_TYPES.GROUP && option.type !== MENU_ITEMS_TYPES.SKELETON_ITEM) {
+          return {
+            ...option,
+            onKeyDown: (e) => {
+              if (["Enter", "Space"].includes(e.code)) {
+                e.preventDefault();
+                if (typeof option?.onClick === "function") {
+                  option.onClick(e);
+                }
+              }
+              return null;
+            }
+          };
+        }
+        return option;
+      })
+    ],
+    [options, onClearFilters]
+  );
+  return /* @__PURE__ */ jsx("div", { style: { marginLeft: "auto" }, children: /* @__PURE__ */ jsx(
+    StyledDSMenuButton,
+    {
+      buttonType: BUTTON_TYPES.ICON,
+      options: menuButtonOptions,
+      innerRef,
+      "aria-label": "Filter bar addon",
+      "data-testid": DATA_TESTID.DATA_TABLE_FILTER_BAR_DD_MENU_BUTTON,
+      onClose: () => {
+        innerRef?.current?.focus?.();
+      },
+      onItemSelected: onItemSelected ?? (() => {
+      }),
+      onActivateItem: onActivateItem ?? (() => {
+      }),
+      selectedItems: selectedItems ?? [],
+      ...restProps,
+      children: /* @__PURE__ */ jsx(MoreOptionsVert, {})
+    }
+  ) });
+};
+export {
+  FilterMenuButton
+};
+//# sourceMappingURL=FilterMenuButton.js.map

package/dist/esm/exported-related/FilterBar/FilterMenuButton.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/FilterBar/FilterMenuButton.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { BUTTON_TYPES } from '@elliemae/ds-button-v2';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { DSMenuButton, MENU_ITEMS_TYPES, type DSMenuButtonT } from '@elliemae/ds-menu-button';\nimport { styled } from '@elliemae/ds-system';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { useMemo } from 'react';\nimport { DATA_TESTID } from '../../configs/index.js';\nimport { DATA_TABLE_SLOTS, DSDataTableName } from '../../constants/index.js';\n\ninterface FilterMenuButtonProps {\n  options?: DSMenuButtonT.MenuItemInterface[];\n  innerRef?: React.RefObject<HTMLButtonElement>;\n  onClearFilters: TypescriptHelpersT.GenericFunc;\n  onItemSelected?: (\n    newSelection: DSMenuButtonT.SelectionableMenuNodes[],\n    metainfo: { itemNode: DSMenuButtonT.SelectionableMenuNodes; event?: React.SyntheticEvent },\n  ) => void | TypescriptHelpersT.StateSetter<DSMenuButtonT.SelectionableMenuNodes[]>;\n  onActivateItem?: (\n    itemNode: DSMenuButtonT.PseudoFocusableMenuNodes,\n    metainfo: { itemNode: DSMenuButtonT.PseudoFocusableMenuNodes; event?: React.SyntheticEvent },\n  ) => void;\n  [key: string]: unknown;\n  selectedItems?: DSMenuButtonT.SelectionableMenuNodes[] | DSMenuButtonT.SelectionableMenuItemInterface[];\n}\n\nconst StyledDSMenuButton = styled(DSMenuButton, {\n  name: DSDataTableName,\n  slot: DATA_TABLE_SLOTS.FILTER_BAR_MENU_BUTTON,\n})``;\n\nexport const FilterMenuButton: React.ComponentType<FilterMenuButtonProps> = ({\n  options = [],\n  innerRef,\n  onClearFilters,\n  onItemSelected,\n  onActivateItem,\n  selectedItems,\n  ...restProps\n}) => {\n  const menuButtonOptions: DSMenuButtonT.MenuItemInterface[] = useMemo(\n    () => [\n      {\n        type: MENU_ITEMS_TYPES.ACTIVABLE_ITEM,\n        dsId: '__internal__option__clear__filters',\n        label: 'Clear Filters',\n        value: 'clear',\n        onClick: onClearFilters,\n        onKeyDown: (e: React.KeyboardEvent) => {\n          if (['Enter', 'Space'].includes(e.code)) {\n            e.preventDefault();\n            onClearFilters();\n          }\n          return null;\n        },\n      },\n      ...options.map((option) => {\n        if (\n          option.type !== MENU_ITEMS_TYPES.SEPARATOR &&\n          option.type !== MENU_ITEMS_TYPES.GROUP &&\n          option.type !== MENU_ITEMS_TYPES.SKELETON_ITEM\n        ) {\n          return {\n            ...option,\n            onKeyDown: (e: React.KeyboardEvent) => {\n              if (['Enter', 'Space'].includes(e.code)) {\n                e.preventDefault();\n                if (typeof option?.onClick === 'function') {\n                  option.onClick(e);\n                }\n              }\n              return null;\n            },\n          };\n        }\n        return option;\n      }),\n    ],\n    [options, onClearFilters],\n  );\n\n  return (\n    <div style={{ marginLeft: 'auto' }}>\n      <StyledDSMenuButton\n        buttonType={BUTTON_TYPES.ICON}\n        options={menuButtonOptions}\n        innerRef={innerRef}\n        aria-label=\"Filter bar addon\"\n        data-testid={DATA_TESTID.DATA_TABLE_FILTER_BAR_DD_MENU_BUTTON}\n        onClose={() => {\n          innerRef?.current?.focus?.();\n        }}\n        /** PUI-15557 (https://jira.elliemae.io/browse/PUI-15557)\n         * On behalf of this ticket, we are converting options from DSDropdownMenuV2 to DSMenuButton.\n         * As DSMenuButton handles selection differently than DSDropdownMenuV2, we are providing\n         * empty functions as onItemSelected and onActivateItem to avoid breaking changes for now.\n         * As those props are required if any of the options are selectionable/activable.\n         * In future releases, we should properly enforce user to provide these props as needed.\n         */\n        onItemSelected={onItemSelected ?? (() => {})}\n        onActivateItem={onActivateItem ?? (() => {})}\n        selectedItems={selectedItems ?? []}\n        {...restProps}\n      >\n        <MoreOptionsVert />\n      </StyledDSMenuButton>\n    </div>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACuGf;AAvGR,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,cAAc,wBAA4C;AACnE,SAAS,cAAc;AAEvB,SAAS,eAAe;AACxB,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB,uBAAuB;AAkBlD,MAAM,qBAAqB,OAAO,cAAc;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAEM,MAAM,mBAA+D,CAAC;AAAA,EAC3E,UAAU,CAAC;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,oBAAuD;AAAA,IAC3D,MAAM;AAAA,MACJ;AAAA,QACE,MAAM,iBAAiB;AAAA,QACvB,MAAM;AAAA,QACN,OAAO;AAAA,QACP,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAW,CAAC,MAA2B;AACrC,cAAI,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,GAAG;AACvC,cAAE,eAAe;AACjB,2BAAe;AAAA,UACjB;AACA,iBAAO;AAAA,QACT;AAAA,MACF;AAAA,MACA,GAAG,QAAQ,IAAI,CAAC,WAAW;AACzB,YACE,OAAO,SAAS,iBAAiB,aACjC,OAAO,SAAS,iBAAiB,SACjC,OAAO,SAAS,iBAAiB,eACjC;AACA,iBAAO;AAAA,YACL,GAAG;AAAA,YACH,WAAW,CAAC,MAA2B;AACrC,kBAAI,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,GAAG;AACvC,kBAAE,eAAe;AACjB,oBAAI,OAAO,QAAQ,YAAY,YAAY;AACzC,yBAAO,QAAQ,CAAC;AAAA,gBAClB;AAAA,cACF;AACA,qBAAO;AAAA,YACT;AAAA,UACF;AAAA,QACF;AACA,eAAO;AAAA,MACT,CAAC;AAAA,IACH;AAAA,IACA,CAAC,SAAS,cAAc;AAAA,EAC1B;AAEA,SACE,oBAAC,SAAI,OAAO,EAAE,YAAY,OAAO,GAC/B;AAAA,IAAC;AAAA;AAAA,MACC,YAAY,aAAa;AAAA,MACzB,SAAS;AAAA,MACT;AAAA,MACA,cAAW;AAAA,MACX,eAAa,YAAY;AAAA,MACzB,SAAS,MAAM;AACb,kBAAU,SAAS,QAAQ;AAAA,MAC7B;AAAA,MAQA,gBAAgB,mBAAmB,MAAM;AAAA,MAAC;AAAA,MAC1C,gBAAgB,mBAAmB,MAAM;AAAA,MAAC;AAAA,MAC1C,eAAe,iBAAiB,CAAC;AAAA,MAChC,GAAG;AAAA,MAEJ,8BAAC,mBAAgB;AAAA;AAAA,EACnB,GACF;AAEJ;",
+  "names": []
+}