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

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (222) hide show

package/dist/esm/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\nimport React, { useMemo, useRef, useCallback, createRef } from 'react';\nimport { DSControlledCheckbox } from '@elliemae/ds-form-checkbox';\nimport { uid as genUid } from 'uid';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../../../configs/constants.js';\nimport { useInternalStore, usePropsStore } from '../../../configs/useStore/useStore.js';\n\nexport const multiSelectColumn: DSDataTableT.InternalColumn = {\n  // Build our multiSelecter column\n  id: 'multiSelecter', // Make sure it has an ID\n  Header: () => {\n    const onSelectionChange = usePropsStore((state) => state.onSelectionChange);\n    const selection = usePropsStore((state) => state.selection);\n    const disabledRows = usePropsStore((state) => state.disabledRows);\n    const noResultsMessage = usePropsStore((state) => state.noResultsMessage);\n    const noResultsSecondaryMessage = usePropsStore((state) => state.noResultsSecondaryMessage);\n    const allDataFlattened = usePropsStore((state) => state.allDataFlattened);\n    const flattenedData = usePropsStore((state) => state.flattenedData);\n    const isEmptyContent = usePropsStore((state) => state.isEmptyContent);\n    const firstFocuseableColumnHeaderId = usePropsStore((state) => state.firstFocuseableColumnHeaderId);\n    const domIdAffix = usePropsStore((state) => state.domIdAffix);\n    const visibleRangeRef = usePropsStore((state) => state.visibleRangeRef);\n\n    // We for sure have selection, so we just typecast it for TS reasons\n    const dtSelection = selection ?? {};\n    const selectionKeyCount = flattenedData.reduce(\n      (acc, cur) => (dtSelection[cur.uid] && !disabledRows[cur.uid] ? 1 : 0) + acc,\n      0,\n    );\n\n    const currentGlobalState = useMemo(\n      () =>\n        selectionKeyCount > 0 && selectionKeyCount < flattenedData.filter((datum) => !disabledRows[datum.uid]).length\n          ? 'mixed'\n          : selectionKeyCount > 0,\n      [selectionKeyCount, flattenedData, disabledRows],\n    );\n\n    // global state toggling: false to true, mixed to true, true to false\n    const newGlobalStateAfterToggle = useMemo(() => currentGlobalState !== true, [currentGlobalState]);\n\n    const newSelection: DSDataTableT.Selection = useMemo(() => {\n      if (!newGlobalStateAfterToggle) return {};\n\n      return allDataFlattened.reduce<DSDataTableT.Selection>((newSelectionObject, datum) => {\n        newSelectionObject[datum.uid] = !disabledRows[datum.uid];\n        return newSelectionObject;\n      }, {});\n    }, [newGlobalStateAfterToggle, allDataFlattened, disabledRows]);\n\n    const onChangeHandler = useCallback(\n      (newState: boolean, e: React.ChangeEvent | React.MouseEvent | React.KeyboardEvent) => {\n        onSelectionChange(newSelection, 'All', e);\n      },\n      [newSelection, onSelectionChange],\n    );\n\n    const ariaControls = useMemo(\n      () =>\n        allDataFlattened\n          .map((datum) => `data-table-checkbox-${datum.uid}${domIdAffix ? `-${domIdAffix}` : ''}`)\n          .join(' '),\n      [allDataFlattened, domIdAffix],\n    );\n\n    const startCandidate = visibleRangeRef.current.start - visibleRangeRef.current.overscan;\n    const start = startCandidate > 0 ? startCandidate : 0;\n    const endCandidate = visibleRangeRef.current.end + visibleRangeRef.current.overscan + 1;\n    const end = endCandidate > visibleRangeRef.current.size ? visibleRangeRef.current.size : endCandidate;\n    const visibleAriaControls = ariaControls.split(' ').slice(start, end).join(' ');\n\n    return (\n      <DSControlledCheckbox\n        aria-controls={visibleAriaControls}\n        data-testid={DATA_TESTID.DATA_TABLE_GLOBAL_CHECKBOX}\n        aria-label={\n          isEmptyContent && firstFocuseableColumnHeaderId === 'multiSelecter'\n            ? `${noResultsMessage}. ${\n                noResultsSecondaryMessage ? `${noResultsSecondaryMessage}.` : ''\n              } Toggle all rows selected`\n            : 'Toggle all rows selected'\n        }\n        checked={currentGlobalState}\n        onChange={onChangeHandler}\n      />\n    );\n  },\n  Cell: ({ cell, row, isRowSelected, domIdAffix = genUid(4) }) => {\n    const onSelectionChange = usePropsStore((state) => state.onSelectionChange);\n    const selection = usePropsStore((state) => state.selection);\n    const disabledRows = usePropsStore((state) => state.disabledRows);\n    const lastSelected = usePropsStore((state) => state.lastSelected);\n    const flattenedData = usePropsStore((state) => state.flattenedData);\n    const checkboxSelectAllProps = usePropsStore((state) => state.checkboxSelectAllProps);\n\n    const isShiftPressed = useInternalStore((state) => state.isShiftPressed);\n    const setIsShiftPressed = useInternalStore((state) => state.setIsShiftPressed);\n\n    const { uid } = row;\n    const selectedState = selection?.[uid] ?? false;\n\n    const isShiftPressedKeyRef = useRef(false);\n    const onChangeHandler = useCallback(\n      (newState: boolean, e: React.ChangeEvent | React.MouseEvent | React.KeyboardEvent) => {\n        const newSelection = { ...selection, [uid]: newState }; // we only want true and mixed values\n        if (!newState) delete newSelection[uid]; // if newState is false, remove from the new selection\n        const now = Number.parseInt(uid, 10);\n        if ((isShiftPressed || isShiftPressedKeyRef.current) && lastSelected.current > -1) {\n          for (let i = Math.min(lastSelected.current, now); i <= Math.max(lastSelected.current, now); i += 1) {\n            const correctDataIndex = flattenedData[i]?.id;\n            if (!Object.keys(disabledRows).includes(correctDataIndex))\n              newSelection[correctDataIndex] = newSelection[lastSelected.current];\n            if (!newSelection[correctDataIndex]) delete newSelection[correctDataIndex];\n          }\n        }\n        lastSelected.current = now;\n        onSelectionChange(newSelection, uid, e);\n      },\n      [disabledRows, flattenedData, isShiftPressed, lastSelected, onSelectionChange, selection, uid],\n    );\n\n    const onKeyDownHandler: React.KeyboardEventHandler = useCallback(\n      (e) => {\n        setIsShiftPressed(e.code === 'Shift' || e.shiftKey);\n        e.stopPropagation();\n      },\n      [setIsShiftPressed],\n    );\n\n    const onKeyUpHandler: React.KeyboardEventHandler = useCallback(\n      (e) => {\n        setIsShiftPressed(false);\n        isShiftPressedKeyRef.current = false;\n        lastSelected.current = -1;\n        e.stopPropagation();\n      },\n      [lastSelected, setIsShiftPressed],\n    );\n\n    const stopThePropagation = useCallback((e: React.MouseEvent | React.KeyboardEvent) => {\n      if (e.shiftKey) {\n        isShiftPressedKeyRef.current = true;\n      }\n      e.stopPropagation();\n    }, []);\n\n    return (\n      <div role=\"presentation\" onClick={stopThePropagation} onKeyDown={onKeyDownHandler} onKeyUp={onKeyUpHandler}>\n        <DSControlledCheckbox\n          id={`data-table-checkbox-${uid}-${domIdAffix}`}\n          data-testid={DATA_TESTID.DATA_TABLE_CHECKBOX}\n          aria-label=\"Toggle row selected\"\n          checked={selectedState}\n          onChange={onChangeHandler}\n          disabled={disabledRows[row.uid]}\n          innerRef={cell.ref}\n          tabIndex={isRowSelected ? 0 : -1}\n          {...checkboxSelectAllProps}\n        />\n      </div>\n    );\n  },\n  textWrap: 'wrap',\n  width: 32,\n  padding: 7,\n  canResize: false,\n  isFocuseable: false,\n  disableDnD: true,\n  parentId: null,\n  depth: 0,\n  ref: createRef(),\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\nimport React, { useMemo, useRef, useCallback, createRef } from 'react';\nimport { DSControlledCheckbox } from '@elliemae/ds-form-checkbox';\nimport { uid as genUid } from 'uid';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../../../configs/constants.js';\nimport { useInternalStore, usePropsStore } from '../../../configs/useStore/createInternalAndPropsContext.js';\n\nexport const multiSelectColumn: DSDataTableT.InternalColumn = {\n  // Build our multiSelecter column\n  id: 'multiSelecter', // Make sure it has an ID\n  Header: () => {\n    const onSelectionChange = usePropsStore((state) => state.onSelectionChange);\n    const selection = usePropsStore((state) => state.selection);\n    const disabledRows = usePropsStore((state) => state.disabledRows);\n    const noResultsMessage = usePropsStore((state) => state.noResultsMessage);\n    const noResultsSecondaryMessage = usePropsStore((state) => state.noResultsSecondaryMessage);\n    const allDataFlattened = usePropsStore((state) => state.allDataFlattened);\n    const flattenedData = usePropsStore((state) => state.flattenedData);\n    const isEmptyContent = usePropsStore((state) => state.isEmptyContent);\n    const firstFocuseableColumnHeaderId = usePropsStore((state) => state.firstFocuseableColumnHeaderId);\n    const domIdAffix = usePropsStore((state) => state.domIdAffix);\n    const visibleRangeRef = usePropsStore((state) => state.visibleRangeRef);\n\n    // We for sure have selection, so we just typecast it for TS reasons\n    const dtSelection = selection ?? {};\n    const selectionKeyCount = flattenedData.reduce(\n      (acc, cur) => (dtSelection[cur.uid] && !disabledRows[cur.uid] ? 1 : 0) + acc,\n      0,\n    );\n\n    const currentGlobalState = useMemo(\n      () =>\n        selectionKeyCount > 0 && selectionKeyCount < flattenedData.filter((datum) => !disabledRows[datum.uid]).length\n          ? 'mixed'\n          : selectionKeyCount > 0,\n      [selectionKeyCount, flattenedData, disabledRows],\n    );\n\n    // global state toggling: false to true, mixed to true, true to false\n    const newGlobalStateAfterToggle = useMemo(() => currentGlobalState !== true, [currentGlobalState]);\n\n    const newSelection: DSDataTableT.Selection = useMemo(() => {\n      if (!newGlobalStateAfterToggle) return {};\n\n      return allDataFlattened.reduce<DSDataTableT.Selection>((newSelectionObject, datum) => {\n        newSelectionObject[datum.uid] = !disabledRows[datum.uid];\n        return newSelectionObject;\n      }, {});\n    }, [newGlobalStateAfterToggle, allDataFlattened, disabledRows]);\n\n    const onChangeHandler = useCallback(\n      (newState: boolean, e: React.ChangeEvent | React.MouseEvent | React.KeyboardEvent) => {\n        onSelectionChange(newSelection, 'All', e);\n      },\n      [newSelection, onSelectionChange],\n    );\n\n    const ariaControls = useMemo(\n      () =>\n        allDataFlattened\n          .map((datum) => `data-table-checkbox-${datum.uid}${domIdAffix ? `-${domIdAffix}` : ''}`)\n          .join(' '),\n      [allDataFlattened, domIdAffix],\n    );\n\n    const startCandidate = visibleRangeRef.current.start - visibleRangeRef.current.overscan;\n    const start = startCandidate > 0 ? startCandidate : 0;\n    const endCandidate = visibleRangeRef.current.end + visibleRangeRef.current.overscan + 1;\n    const end = endCandidate > visibleRangeRef.current.size ? visibleRangeRef.current.size : endCandidate;\n    const visibleAriaControls = ariaControls.split(' ').slice(start, end).join(' ');\n\n    return (\n      <DSControlledCheckbox\n        aria-controls={visibleAriaControls}\n        data-testid={DATA_TESTID.DATA_TABLE_GLOBAL_CHECKBOX}\n        aria-label={\n          isEmptyContent && firstFocuseableColumnHeaderId === 'multiSelecter'\n            ? `${noResultsMessage}. ${\n                noResultsSecondaryMessage ? `${noResultsSecondaryMessage}.` : ''\n              } Toggle all rows selected`\n            : 'Toggle all rows selected'\n        }\n        checked={currentGlobalState}\n        onChange={onChangeHandler}\n      />\n    );\n  },\n  Cell: ({ cell, row, isRowSelected, domIdAffix = genUid(4) }) => {\n    const onSelectionChange = usePropsStore((state) => state.onSelectionChange);\n    const selection = usePropsStore((state) => state.selection);\n    const disabledRows = usePropsStore((state) => state.disabledRows);\n    const lastSelected = usePropsStore((state) => state.lastSelected);\n    const flattenedData = usePropsStore((state) => state.flattenedData);\n    const checkboxSelectAllProps = usePropsStore((state) => state.checkboxSelectAllProps);\n\n    const isShiftPressed = useInternalStore((state) => state.isShiftPressed);\n    const setIsShiftPressed = useInternalStore((state) => state.setIsShiftPressed);\n\n    const { uid } = row;\n    const selectedState = selection?.[uid] ?? false;\n\n    const isShiftPressedKeyRef = useRef(false);\n    const onChangeHandler = useCallback(\n      (newState: boolean, e: React.ChangeEvent | React.MouseEvent | React.KeyboardEvent) => {\n        const newSelection = { ...selection, [uid]: newState }; // we only want true and mixed values\n        if (!newState) delete newSelection[uid]; // if newState is false, remove from the new selection\n        const now = Number.parseInt(uid, 10);\n        if ((isShiftPressed || isShiftPressedKeyRef.current) && lastSelected.current > -1) {\n          for (let i = Math.min(lastSelected.current, now); i <= Math.max(lastSelected.current, now); i += 1) {\n            const correctDataIndex = flattenedData[i]?.id;\n            if (!Object.keys(disabledRows).includes(correctDataIndex))\n              newSelection[correctDataIndex] = newSelection[lastSelected.current];\n            if (!newSelection[correctDataIndex]) delete newSelection[correctDataIndex];\n          }\n        }\n        lastSelected.current = now;\n        onSelectionChange(newSelection, uid, e);\n      },\n      [disabledRows, flattenedData, isShiftPressed, lastSelected, onSelectionChange, selection, uid],\n    );\n\n    const onKeyDownHandler: React.KeyboardEventHandler = useCallback(\n      (e) => {\n        setIsShiftPressed(e.code === 'Shift' || e.shiftKey);\n        e.stopPropagation();\n      },\n      [setIsShiftPressed],\n    );\n\n    const onKeyUpHandler: React.KeyboardEventHandler = useCallback(\n      (e) => {\n        setIsShiftPressed(false);\n        isShiftPressedKeyRef.current = false;\n        e.stopPropagation();\n      },\n      [setIsShiftPressed],\n    );\n\n    const stopThePropagation = useCallback((e: React.MouseEvent | React.KeyboardEvent) => {\n      if (e.shiftKey) {\n        isShiftPressedKeyRef.current = true;\n      }\n      e.stopPropagation();\n    }, []);\n\n    return (\n      <div role=\"presentation\" onClick={stopThePropagation} onKeyDown={onKeyDownHandler} onKeyUp={onKeyUpHandler}>\n        <DSControlledCheckbox\n          id={`data-table-checkbox-${uid}-${domIdAffix}`}\n          data-testid={DATA_TESTID.DATA_TABLE_CHECKBOX}\n          aria-label=\"Toggle row selected\"\n          checked={selectedState}\n          onChange={onChangeHandler}\n          disabled={disabledRows[row.uid]}\n          innerRef={cell.ref}\n          tabIndex={isRowSelected ? 0 : -1}\n          {...checkboxSelectAllProps}\n        />\n      </div>\n    );\n  },\n  textWrap: 'wrap',\n  width: 32,\n  padding: 7,\n  canResize: false,\n  isFocuseable: false,\n  disableDnD: true,\n  parentId: null,\n  depth: 0,\n  ref: createRef(),\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/addons/Columns/ColumnSelectSingle/ColumnSelectSingle.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { DSControlledRadio } from "@elliemae/ds-form-radio";
 import { styled } from "@elliemae/ds-system";
 import { DATA_TESTID } from "../../../configs/constants.js";
 import { ScreenReaderOnly } from "../../../styled.js";
-import { usePropsStore } from "../../../configs/useStore/useStore.js";
+import { usePropsStore } from "../../../configs/useStore/createInternalAndPropsContext.js";
 import { DSDataTableName, DSDataTableSlots } from "../../../DSDataTableDefinitions.js";
 const CenteredContent = styled("div", { name: DSDataTableName, slot: DSDataTableSlots.SINGLE_CELL_CONTAINER })`
   display: flex;

package/dist/esm/addons/Columns/ColumnSelectSingle/ColumnSelectSingle.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/addons/Columns/ColumnSelectSingle/ColumnSelectSingle.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { createRef, useCallback } from 'react';\nimport { DSControlledRadio } from '@elliemae/ds-form-radio';\nimport { styled } from '@elliemae/ds-system';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../../../configs/constants.js';\nimport { ScreenReaderOnly } from '../../../styled.js';\nimport { usePropsStore } from '../../../configs/useStore/useStore.js';\nimport { DSDataTableName, DSDataTableSlots } from '../../../DSDataTableDefinitions.js';\n\nconst CenteredContent = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.SINGLE_CELL_CONTAINER })`\n  display: flex;\n  height: 100%;\n  width: 100%;\n  justify-content: center;\n  align-items: center;\n`;\n\nconst stopThePropagation = (e: React.MouseEvent | React.KeyboardEvent) => e.stopPropagation();\n\nexport const singleSelectColumn: DSDataTableT.InternalColumn = {\n  // Build our singleSelecter column\n  id: 'singleSelecter', // Make sure it has an ID\n  // The header doesn't need anything for single selection\n  Header: () => <ScreenReaderOnly>Single Select Column</ScreenReaderOnly>,\n  Cell: ({ cell, row, isRowSelected }) => {\n    const onSelectionChange = usePropsStore((state) => state.onSelectionChange);\n    const getOwnerProps = usePropsStore((store) => store.get);\n\n    const selection = usePropsStore((state) => state.selection);\n    const disabledRows = usePropsStore((state) => state.disabledRows);\n    const { uid } = row;\n    const selectedState = !!selection?.[uid];\n\n    const onChangeHandler = useCallback(\n      (newValue: string, e: React.ChangeEvent) => {\n        // in single select we only allow one item to be selected\n        onSelectionChange({ [uid]: !selectedState }, uid, e);\n      },\n      [onSelectionChange, selectedState, uid],\n    );\n\n    return (\n      <CenteredContent onClick={stopThePropagation} onKeyDown={stopThePropagation} getOwnerProps={getOwnerProps}>\n        <DSControlledRadio\n          aria-checked={selectedState}\n          aria-disabled={disabledRows[row.uid]}\n          title=\"Toggle row selected\"\n          aria-label=\"Toggle row selected\"\n          checked={selectedState}\n          onChange={onChangeHandler}\n          data-testid={DATA_TESTID.DATA_TABLE_RADIO}\n          disabled={disabledRows[row.uid]}\n          innerRef={cell.ref}\n          value={uid}\n          tabIndex={isRowSelected ? 0 : -1}\n        />\n      </CenteredContent>\n    );\n  },\n  textWrap: 'wrap',\n  width: 32,\n  padding: 4,\n  canResize: false,\n  isFocuseable: false,\n  disableDnD: true,\n  parentId: null,\n  depth: 0,\n  ref: createRef(),\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { createRef, useCallback } from 'react';\nimport { DSControlledRadio } from '@elliemae/ds-form-radio';\nimport { styled } from '@elliemae/ds-system';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../../../configs/constants.js';\nimport { ScreenReaderOnly } from '../../../styled.js';\nimport { usePropsStore } from '../../../configs/useStore/createInternalAndPropsContext.js';\nimport { DSDataTableName, DSDataTableSlots } from '../../../DSDataTableDefinitions.js';\n\nconst CenteredContent = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.SINGLE_CELL_CONTAINER })`\n  display: flex;\n  height: 100%;\n  width: 100%;\n  justify-content: center;\n  align-items: center;\n`;\n\nconst stopThePropagation = (e: React.MouseEvent | React.KeyboardEvent) => e.stopPropagation();\n\nexport const singleSelectColumn: DSDataTableT.InternalColumn = {\n  // Build our singleSelecter column\n  id: 'singleSelecter', // Make sure it has an ID\n  // The header doesn't need anything for single selection\n  Header: () => <ScreenReaderOnly>Single Select Column</ScreenReaderOnly>,\n  Cell: ({ cell, row, isRowSelected }) => {\n    const onSelectionChange = usePropsStore((state) => state.onSelectionChange);\n    const getOwnerProps = usePropsStore((store) => store.get);\n\n    const selection = usePropsStore((state) => state.selection);\n    const disabledRows = usePropsStore((state) => state.disabledRows);\n    const { uid } = row;\n    const selectedState = !!selection?.[uid];\n\n    const onChangeHandler = useCallback(\n      (newValue: string, e: React.ChangeEvent) => {\n        // in single select we only allow one item to be selected\n        onSelectionChange({ [uid]: !selectedState }, uid, e);\n      },\n      [onSelectionChange, selectedState, uid],\n    );\n\n    return (\n      <CenteredContent onClick={stopThePropagation} onKeyDown={stopThePropagation} getOwnerProps={getOwnerProps}>\n        <DSControlledRadio\n          aria-checked={selectedState}\n          aria-disabled={disabledRows[row.uid]}\n          title=\"Toggle row selected\"\n          aria-label=\"Toggle row selected\"\n          checked={selectedState}\n          onChange={onChangeHandler}\n          data-testid={DATA_TESTID.DATA_TABLE_RADIO}\n          disabled={disabledRows[row.uid]}\n          innerRef={cell.ref}\n          value={uid}\n          tabIndex={isRowSelected ? 0 : -1}\n        />\n      </CenteredContent>\n    );\n  },\n  textWrap: 'wrap',\n  width: 32,\n  padding: 4,\n  canResize: false,\n  isFocuseable: false,\n  disableDnD: true,\n  parentId: null,\n  depth: 0,\n  ref: createRef(),\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACuBP;AAvBhB,SAAgB,WAAW,mBAAmB;AAC9C,SAAS,yBAAyB;AAClC,SAAS,cAAc;AAEvB,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,kBAAkB,OAAO,OAAO,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,sBAAsB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ7G,MAAM,qBAAqB,CAAC,MAA8C,EAAE,gBAAgB;AAErF,MAAM,qBAAkD;AAAA;AAAA,EAE7D,IAAI;AAAA;AAAA;AAAA,EAEJ,QAAQ,MAAM,oBAAC,oBAAiB,kCAAoB;AAAA,EACpD,MAAM,CAAC,EAAE,MAAM,KAAK,cAAc,MAAM;AACtC,UAAM,oBAAoB,cAAc,CAAC,UAAU,MAAM,iBAAiB;AAC1E,UAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AAExD,UAAM,YAAY,cAAc,CAAC,UAAU,MAAM,SAAS;AAC1D,UAAM,eAAe,cAAc,CAAC,UAAU,MAAM,YAAY;AAChE,UAAM,EAAE,IAAI,IAAI;AAChB,UAAM,gBAAgB,CAAC,CAAC,YAAY,GAAG;AAEvC,UAAM,kBAAkB;AAAA,MACtB,CAAC,UAAkB,MAAyB;AAE1C,0BAAkB,EAAE,CAAC,GAAG,GAAG,CAAC,cAAc,GAAG,KAAK,CAAC;AAAA,MACrD;AAAA,MACA,CAAC,mBAAmB,eAAe,GAAG;AAAA,IACxC;AAEA,WACE,oBAAC,mBAAgB,SAAS,oBAAoB,WAAW,oBAAoB,eAC3E;AAAA,MAAC;AAAA;AAAA,QACC,gBAAc;AAAA,QACd,iBAAe,aAAa,IAAI,GAAG;AAAA,QACnC,OAAM;AAAA,QACN,cAAW;AAAA,QACX,SAAS;AAAA,QACT,UAAU;AAAA,QACV,eAAa,YAAY;AAAA,QACzB,UAAU,aAAa,IAAI,GAAG;AAAA,QAC9B,UAAU,KAAK;AAAA,QACf,OAAO;AAAA,QACP,UAAU,gBAAgB,IAAI;AAAA;AAAA,IAChC,GACF;AAAA,EAEJ;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,SAAS;AAAA,EACT,WAAW;AAAA,EACX,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,OAAO;AAAA,EACP,KAAK,UAAU;AACjB;",
   "names": []
 }

package/dist/esm/addons/Editables/ComboboxEditableCell/ComboboxEditableCell.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import { useState, useCallback, useMemo } from "react";
 import { DSComboBox } from "@elliemae/ds-form-combobox";
 import { EditableCell } from "../../../exported-related/index.js";
-import { usePropsStore } from "../../../configs/useStore/useStore.js";
+import { usePropsStore } from "../../../configs/useStore/createInternalAndPropsContext.js";
 const ComboboxEditableCell = (props) => {
   const { cell, DefaultCellRender, isRowSelected } = props;
   const onCellValueChange = usePropsStore((state) => state.onCellValueChange);

package/dist/esm/addons/Editables/ComboboxEditableCell/ComboboxEditableCell.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/addons/Editables/ComboboxEditableCell/ComboboxEditableCell.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable jsx-a11y/no-autofocus */\nimport React, { useState, useCallback, useMemo } from 'react';\nimport { DSComboBox, type DSComboboxT } from '@elliemae/ds-form-combobox';\nimport { EditableCell } from '../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\nimport { usePropsStore } from '../../../configs/useStore/useStore.js';\n\nexport const ComboboxEditableCell: React.ComponentType<DSDataTableT.EditableCellProps<HTMLDivElement>> = (props) => {\n  const { cell, DefaultCellRender, isRowSelected } = props;\n\n  const onCellValueChange = usePropsStore((state) => state.onCellValueChange);\n  const flattenedData = usePropsStore((state) => state.flattenedData);\n\n  const cellValue = useMemo(() => cell.value as string, [cell.value]);\n  const columnId = useMemo(() => cell.column.id, [cell.column.id]);\n\n  const [value, setValue] = useState<DSComboboxT.ItemOption>({\n    dsId: cellValue,\n    type: 'option',\n    value: cellValue,\n    label: cellValue,\n  });\n\n  const uniqueOptions = useMemo(() => {\n    if (cell.column.editOptions) {\n      return typeof cell.column.editOptions === 'function' ? cell.column.editOptions() : cell.column.editOptions;\n    }\n\n    const uniqueValuesMap: Record<string, boolean> = {};\n    return flattenedData.reduce((optionsSoFar, currRow) => {\n      const currValue = currRow.original[columnId] as string;\n      if (!uniqueValuesMap[currValue]) {\n        optionsSoFar.push({ dsId: currValue, type: 'option', value: currValue, label: currValue });\n        uniqueValuesMap[currValue] = true;\n      }\n      return optionsSoFar;\n    }, [] as DSDataTableT.EditOptionT[]);\n  }, [cell.column, flattenedData, columnId]);\n\n  const [currentOptions, setCurrentOptions] = useState(uniqueOptions);\n\n  const handleOnBlur = useCallback(() => {\n    const property = columnId;\n    onCellValueChange({ value: value?.value, property, rowIndex: cell.row.index });\n  }, [columnId, onCellValueChange, value?.value, cell]);\n\n  const handleOnChange = useCallback((newValue: DSComboboxT.SelectedOptionsT) => {\n    setValue(newValue as DSComboboxT.ItemOption);\n  }, []);\n\n  return (\n    <EditableCell\n      StandardRender={DefaultCellRender}\n      EditableRenderer={\n        <DSComboBox\n          selectedValues={value}\n          autoFocus\n          withoutPortal={false}\n          onBlur={handleOnBlur}\n          onChange={handleOnChange}\n          allOptions={uniqueOptions}\n          onFilter={setCurrentOptions}\n          filteredOptions={currentOptions}\n        />\n      }\n      cell={cell}\n      isRowSelected={isRowSelected}\n    />\n  );\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable jsx-a11y/no-autofocus */\nimport React, { useState, useCallback, useMemo } from 'react';\nimport { DSComboBox, type DSComboboxT } from '@elliemae/ds-form-combobox';\nimport { EditableCell } from '../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\nimport { usePropsStore } from '../../../configs/useStore/createInternalAndPropsContext.js';\n\nexport const ComboboxEditableCell: React.ComponentType<DSDataTableT.EditableCellProps<HTMLDivElement>> = (props) => {\n  const { cell, DefaultCellRender, isRowSelected } = props;\n\n  const onCellValueChange = usePropsStore((state) => state.onCellValueChange);\n  const flattenedData = usePropsStore((state) => state.flattenedData);\n\n  const cellValue = useMemo(() => cell.value as string, [cell.value]);\n  const columnId = useMemo(() => cell.column.id, [cell.column.id]);\n\n  const [value, setValue] = useState<DSComboboxT.ItemOption>({\n    dsId: cellValue,\n    type: 'option',\n    value: cellValue,\n    label: cellValue,\n  });\n\n  const uniqueOptions = useMemo(() => {\n    if (cell.column.editOptions) {\n      return typeof cell.column.editOptions === 'function' ? cell.column.editOptions() : cell.column.editOptions;\n    }\n\n    const uniqueValuesMap: Record<string, boolean> = {};\n    return flattenedData.reduce((optionsSoFar, currRow) => {\n      const currValue = currRow.original[columnId] as string;\n      if (!uniqueValuesMap[currValue]) {\n        optionsSoFar.push({ dsId: currValue, type: 'option', value: currValue, label: currValue });\n        uniqueValuesMap[currValue] = true;\n      }\n      return optionsSoFar;\n    }, [] as DSDataTableT.EditOptionT[]);\n  }, [cell.column, flattenedData, columnId]);\n\n  const [currentOptions, setCurrentOptions] = useState(uniqueOptions);\n\n  const handleOnBlur = useCallback(() => {\n    const property = columnId;\n    onCellValueChange({ value: value?.value, property, rowIndex: cell.row.index });\n  }, [columnId, onCellValueChange, value?.value, cell]);\n\n  const handleOnChange = useCallback((newValue: DSComboboxT.SelectedOptionsT) => {\n    setValue(newValue as DSComboboxT.ItemOption);\n  }, []);\n\n  return (\n    <EditableCell\n      StandardRender={DefaultCellRender}\n      EditableRenderer={\n        <DSComboBox\n          selectedValues={value}\n          autoFocus\n          withoutPortal={false}\n          onBlur={handleOnBlur}\n          onChange={handleOnChange}\n          allOptions={uniqueOptions}\n          onFilter={setCurrentOptions}\n          filteredOptions={currentOptions}\n        />\n      }\n      cell={cell}\n      isRowSelected={isRowSelected}\n    />\n  );\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACsDf;AArDR,SAAgB,UAAU,aAAa,eAAe;AACtD,SAAS,kBAAoC;AAC7C,SAAS,oBAAoB;AAE7B,SAAS,qBAAqB;AAEvB,MAAM,uBAA4F,CAAC,UAAU;AAClH,QAAM,EAAE,MAAM,mBAAmB,cAAc,IAAI;AAEnD,QAAM,oBAAoB,cAAc,CAAC,UAAU,MAAM,iBAAiB;AAC1E,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,aAAa;AAElE,QAAM,YAAY,QAAQ,MAAM,KAAK,OAAiB,CAAC,KAAK,KAAK,CAAC;AAClE,QAAM,WAAW,QAAQ,MAAM,KAAK,OAAO,IAAI,CAAC,KAAK,OAAO,EAAE,CAAC;AAE/D,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAiC;AAAA,IACzD,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,EACT,CAAC;AAED,QAAM,gBAAgB,QAAQ,MAAM;AAClC,QAAI,KAAK,OAAO,aAAa;AAC3B,aAAO,OAAO,KAAK,OAAO,gBAAgB,aAAa,KAAK,OAAO,YAAY,IAAI,KAAK,OAAO;AAAA,IACjG;AAEA,UAAM,kBAA2C,CAAC;AAClD,WAAO,cAAc,OAAO,CAAC,cAAc,YAAY;AACrD,YAAM,YAAY,QAAQ,SAAS,QAAQ;AAC3C,UAAI,CAAC,gBAAgB,SAAS,GAAG;AAC/B,qBAAa,KAAK,EAAE,MAAM,WAAW,MAAM,UAAU,OAAO,WAAW,OAAO,UAAU,CAAC;AACzF,wBAAgB,SAAS,IAAI;AAAA,MAC/B;AACA,aAAO;AAAA,IACT,GAAG,CAAC,CAA+B;AAAA,EACrC,GAAG,CAAC,KAAK,QAAQ,eAAe,QAAQ,CAAC;AAEzC,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,aAAa;AAElE,QAAM,eAAe,YAAY,MAAM;AACrC,UAAM,WAAW;AACjB,sBAAkB,EAAE,OAAO,OAAO,OAAO,UAAU,UAAU,KAAK,IAAI,MAAM,CAAC;AAAA,EAC/E,GAAG,CAAC,UAAU,mBAAmB,OAAO,OAAO,IAAI,CAAC;AAEpD,QAAM,iBAAiB,YAAY,CAAC,aAA2C;AAC7E,aAAS,QAAkC;AAAA,EAC7C,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MACC,gBAAgB;AAAA,MAChB,kBACE;AAAA,QAAC;AAAA;AAAA,UACC,gBAAgB;AAAA,UAChB,WAAS;AAAA,UACT,eAAe;AAAA,UACf,QAAQ;AAAA,UACR,UAAU;AAAA,UACV,YAAY;AAAA,UACZ,UAAU;AAAA,UACV,iBAAiB;AAAA;AAAA,MACnB;AAAA,MAEF;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/dist/esm/addons/Editables/DateEditableCell/DateEditableCell.js CHANGED Viewed

@@ -2,7 +2,7 @@ import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { useState, useCallback } from "react";
 import { EditableCell } from "../../../exported-related/index.js";
-import { usePropsStore } from "../../../configs/useStore/useStore.js";
+import { usePropsStore } from "../../../configs/useStore/createInternalAndPropsContext.js";
 const DateEditableCell = (props) => {
   const { cell, DefaultCellRender } = props;
   const onCellValueChange = usePropsStore((state) => state.onCellValueChange);

package/dist/esm/addons/Editables/DateEditableCell/DateEditableCell.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/addons/Editables/DateEditableCell/DateEditableCell.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable jsx-a11y/no-autofocus */\nimport React, { useState, useCallback } from 'react';\nimport { EditableCell } from '../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\nimport { usePropsStore } from '../../../configs/useStore/useStore.js';\n\nexport const DateEditableCell: React.ComponentType<{\n  cell: DSDataTableT.Cell<HTMLDivElement>;\n  DefaultCellRender: JSX.Element;\n  isRowSelected: boolean;\n}> = (props) => {\n  const { cell, DefaultCellRender } = props;\n\n  const onCellValueChange = usePropsStore((state) => state.onCellValueChange);\n\n  const [value, setValue] = useState(cell.value as string);\n\n  const handleOnChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\n    const {\n      target: { value: tValue },\n    } = e;\n    setValue(tValue);\n  }, []);\n\n  const handleOnBlur = useCallback(() => {\n    const property = cell.column.id;\n    const rowIndex = cell.row.index;\n    onCellValueChange({ value, property, rowIndex });\n  }, [value, onCellValueChange, cell.column.id, cell.row.index]);\n\n  return (\n    <EditableCell\n      StandardRender={DefaultCellRender}\n      EditableRenderer={<input value={value} onChange={handleOnChange} onBlur={handleOnBlur} autoFocus />}\n      cell={cell}\n    />\n  );\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable jsx-a11y/no-autofocus */\nimport React, { useState, useCallback } from 'react';\nimport { EditableCell } from '../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\nimport { usePropsStore } from '../../../configs/useStore/createInternalAndPropsContext.js';\n\nexport const DateEditableCell: React.ComponentType<{\n  cell: DSDataTableT.Cell<HTMLDivElement>;\n  DefaultCellRender: JSX.Element;\n  isRowSelected: boolean;\n}> = (props) => {\n  const { cell, DefaultCellRender } = props;\n\n  const onCellValueChange = usePropsStore((state) => state.onCellValueChange);\n\n  const [value, setValue] = useState(cell.value as string);\n\n  const handleOnChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\n    const {\n      target: { value: tValue },\n    } = e;\n    setValue(tValue);\n  }, []);\n\n  const handleOnBlur = useCallback(() => {\n    const property = cell.column.id;\n    const rowIndex = cell.row.index;\n    onCellValueChange({ value, property, rowIndex });\n  }, [value, onCellValueChange, cell.column.id, cell.row.index]);\n\n  return (\n    <EditableCell\n      StandardRender={DefaultCellRender}\n      EditableRenderer={<input value={value} onChange={handleOnChange} onBlur={handleOnBlur} autoFocus />}\n      cell={cell}\n    />\n  );\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACiCC;AAhCxB,SAAgB,UAAU,mBAAmB;AAC7C,SAAS,oBAAoB;AAE7B,SAAS,qBAAqB;AAEvB,MAAM,mBAIR,CAAC,UAAU;AACd,QAAM,EAAE,MAAM,kBAAkB,IAAI;AAEpC,QAAM,oBAAoB,cAAc,CAAC,UAAU,MAAM,iBAAiB;AAE1E,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,KAAK,KAAe;AAEvD,QAAM,iBAAiB,YAAY,CAAC,MAA2C;AAC7E,UAAM;AAAA,MACJ,QAAQ,EAAE,OAAO,OAAO;AAAA,IAC1B,IAAI;AACJ,aAAS,MAAM;AAAA,EACjB,GAAG,CAAC,CAAC;AAEL,QAAM,eAAe,YAAY,MAAM;AACrC,UAAM,WAAW,KAAK,OAAO;AAC7B,UAAM,WAAW,KAAK,IAAI;AAC1B,sBAAkB,EAAE,OAAO,UAAU,SAAS,CAAC;AAAA,EACjD,GAAG,CAAC,OAAO,mBAAmB,KAAK,OAAO,IAAI,KAAK,IAAI,KAAK,CAAC;AAE7D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,gBAAgB;AAAA,MAChB,kBAAkB,oBAAC,WAAM,OAAc,UAAU,gBAAgB,QAAQ,cAAc,WAAS,MAAC;AAAA,MACjG;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/dist/esm/addons/Editables/TextEditableCell/TextEditableCell.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import { useState, useCallback } from "react";
 import { styled } from "@elliemae/ds-system";
 import { EditableCell } from "../../../exported-related/index.js";
-import { usePropsStore } from "../../../configs/useStore/useStore.js";
+import { usePropsStore } from "../../../configs/useStore/createInternalAndPropsContext.js";
 import { DSDataTableName, DSDataTableSlots } from "../../../DSDataTableDefinitions.js";
 const StyledInput = styled("input", { name: DSDataTableName, slot: DSDataTableSlots.TEXT_EDITABLE_CELL_INPUT })`
   outline: none;

package/dist/esm/addons/Editables/TextEditableCell/TextEditableCell.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/addons/Editables/TextEditableCell/TextEditableCell.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable jsx-a11y/no-autofocus */\nimport React, { useState, useCallback } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { EditableCell } from '../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\nimport { usePropsStore } from '../../../configs/useStore/useStore.js';\nimport { DSDataTableName, DSDataTableSlots } from '../../../DSDataTableDefinitions.js';\n\nconst StyledInput = styled('input', { name: DSDataTableName, slot: DSDataTableSlots.TEXT_EDITABLE_CELL_INPUT })`\n  outline: none;\n  :focus {\n    border: 2px solid ${(props) => props.theme.colors.brand[700]};\n  }\n  max-width: 100%;\n`;\n\nexport const TextEditableCell: React.ComponentType<DSDataTableT.EditableCellProps<HTMLDivElement>> = (props) => {\n  const { cell, DefaultCellRender, isRowSelected } = props;\n\n  const onCellValueChange = usePropsStore((state) => state.onCellValueChange);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  const [value, setValue] = useState<string>(cell.value as string);\n\n  const handleOnChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\n    const {\n      target: { value: tValue },\n    } = e;\n    setValue(tValue);\n  }, []);\n\n  const handleOnBlur = useCallback(() => {\n    const property = cell.column.id;\n    const rowIndex = cell.row.index;\n    onCellValueChange({ value, property, rowIndex });\n  }, [value, onCellValueChange, cell.column.id, cell.row.index]);\n\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.code === 'Enter') {\n        cell.ref.current?.focus();\n        // will exec on blur callback from input and save new value\n      }\n      if (e.code === 'Escape') {\n        setValue(cell.value as string);\n        const auxRef = cell.ref.current;\n        // this prevent the on blur\n        setTimeout(() => {\n          auxRef?.focus();\n        });\n      }\n    },\n    [cell],\n  );\n  return (\n    <EditableCell\n      StandardRender={DefaultCellRender}\n      EditableRenderer={\n        <StyledInput\n          value={value}\n          onKeyDown={handleOnKeyDown}\n          onChange={handleOnChange}\n          onBlur={handleOnBlur}\n          autoFocus\n          getOwnerProps={getOwnerProps}\n        />\n      }\n      cell={cell}\n      isRowSelected={isRowSelected}\n    />\n  );\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable jsx-a11y/no-autofocus */\nimport React, { useState, useCallback } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { EditableCell } from '../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\nimport { usePropsStore } from '../../../configs/useStore/createInternalAndPropsContext.js';\nimport { DSDataTableName, DSDataTableSlots } from '../../../DSDataTableDefinitions.js';\n\nconst StyledInput = styled('input', { name: DSDataTableName, slot: DSDataTableSlots.TEXT_EDITABLE_CELL_INPUT })`\n  outline: none;\n  :focus {\n    border: 2px solid ${(props) => props.theme.colors.brand[700]};\n  }\n  max-width: 100%;\n`;\n\nexport const TextEditableCell: React.ComponentType<DSDataTableT.EditableCellProps<HTMLDivElement>> = (props) => {\n  const { cell, DefaultCellRender, isRowSelected } = props;\n\n  const onCellValueChange = usePropsStore((state) => state.onCellValueChange);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  const [value, setValue] = useState<string>(cell.value as string);\n\n  const handleOnChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\n    const {\n      target: { value: tValue },\n    } = e;\n    setValue(tValue);\n  }, []);\n\n  const handleOnBlur = useCallback(() => {\n    const property = cell.column.id;\n    const rowIndex = cell.row.index;\n    onCellValueChange({ value, property, rowIndex });\n  }, [value, onCellValueChange, cell.column.id, cell.row.index]);\n\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.code === 'Enter') {\n        cell.ref.current?.focus();\n        // will exec on blur callback from input and save new value\n      }\n      if (e.code === 'Escape') {\n        setValue(cell.value as string);\n        const auxRef = cell.ref.current;\n        // this prevent the on blur\n        setTimeout(() => {\n          auxRef?.focus();\n        });\n      }\n    },\n    [cell],\n  );\n  return (\n    <EditableCell\n      StandardRender={DefaultCellRender}\n      EditableRenderer={\n        <StyledInput\n          value={value}\n          onKeyDown={handleOnKeyDown}\n          onChange={handleOnChange}\n          onBlur={handleOnBlur}\n          autoFocus\n          getOwnerProps={getOwnerProps}\n        />\n      }\n      cell={cell}\n      isRowSelected={isRowSelected}\n    />\n  );\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;AC0Df;AAzDR,SAAgB,UAAU,mBAAmB;AAC7C,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAE7B,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,cAAc,OAAO,SAAS,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,yBAAyB,CAAC;AAAA;AAAA;AAAA,wBAGtF,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAKzD,MAAM,mBAAwF,CAAC,UAAU;AAC9G,QAAM,EAAE,MAAM,mBAAmB,cAAc,IAAI;AAEnD,QAAM,oBAAoB,cAAc,CAAC,UAAU,MAAM,iBAAiB;AAC1E,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AAExD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAiB,KAAK,KAAe;AAE/D,QAAM,iBAAiB,YAAY,CAAC,MAA2C;AAC7E,UAAM;AAAA,MACJ,QAAQ,EAAE,OAAO,OAAO;AAAA,IAC1B,IAAI;AACJ,aAAS,MAAM;AAAA,EACjB,GAAG,CAAC,CAAC;AAEL,QAAM,eAAe,YAAY,MAAM;AACrC,UAAM,WAAW,KAAK,OAAO;AAC7B,UAAM,WAAW,KAAK,IAAI;AAC1B,sBAAkB,EAAE,OAAO,UAAU,SAAS,CAAC;AAAA,EACjD,GAAG,CAAC,OAAO,mBAAmB,KAAK,OAAO,IAAI,KAAK,IAAI,KAAK,CAAC;AAE7D,QAAM,kBAAkB;AAAA,IACtB,CAAC,MAA2B;AAC1B,UAAI,EAAE,SAAS,SAAS;AACtB,aAAK,IAAI,SAAS,MAAM;AAAA,MAE1B;AACA,UAAI,EAAE,SAAS,UAAU;AACvB,iBAAS,KAAK,KAAe;AAC7B,cAAM,SAAS,KAAK,IAAI;AAExB,mBAAW,MAAM;AACf,kBAAQ,MAAM;AAAA,QAChB,CAAC;AAAA,MACH;AAAA,IACF;AAAA,IACA,CAAC,IAAI;AAAA,EACP;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,gBAAgB;AAAA,MAChB,kBACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,WAAW;AAAA,UACX,UAAU;AAAA,UACV,QAAQ;AAAA,UACR,WAAS;AAAA,UACT;AAAA;AAAA,MACF;AAAA,MAEF;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/dist/esm/addons/Filters/Components/SelectFilter/BaseSelectFilter.js CHANGED Viewed

@@ -7,7 +7,7 @@ import { SearchXsmall } from "@elliemae/ds-icons";
 import { uid } from "uid";
 import { FilterPopover } from "../../../../exported-related/index.js";
 import { DATA_TESTID, EMPTY_FILTER } from "../../../../configs/index.js";
-import { usePropsStore } from "../../../../configs/useStore/useStore.js";
+import { usePropsStore } from "../../../../configs/useStore/createInternalAndPropsContext.js";
 const getValue = (datum) => datum?.toString();
 const BaseSelectFilter = (props) => {
   const {

package/dist/esm/addons/Filters/Components/SelectFilter/BaseSelectFilter.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/addons/Filters/Components/SelectFilter/BaseSelectFilter.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useRef, useCallback, useEffect, useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { DSComboboxT } from '@elliemae/ds-form-combobox';\nimport { DSComboBox } from '@elliemae/ds-form-combobox';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { uid } from 'uid';\nimport { FilterPopover } from '../../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { DATA_TESTID, EMPTY_FILTER } from '../../../../configs/index.js';\nimport { usePropsStore } from '../../../../configs/useStore/useStore.js';\n\ninterface BaseSelectProps {\n  isMulti?: boolean;\n  creatable?: boolean;\n  type: string;\n}\n\ntype MaybeToStringable =\n  | string\n  | number\n  | boolean\n  | Date\n  | RegExp\n  | Array<unknown>\n  | Record<string, unknown>\n  | null\n  | undefined;\n\nconst getValue = (datum: unknown) => (datum as MaybeToStringable)?.toString();\n\ntype BaseSelectFilterValue = DSComboboxT.SelectedOptionsT;\n\nexport const BaseSelectFilter: React.ComponentType<\n  DSDataTableT.FilterProps<BaseSelectFilterValue> & BaseSelectProps\n> = (props) => {\n  const {\n    isMulti = false,\n    filterValue: selectedItems = null,\n    creatable = false,\n    column,\n    type,\n    column: { id, filterOptions: userFilterOptions, filterMinWidth },\n    reduxHeader,\n    patchHeaderFilterButtonAndMenu,\n    innerRef,\n    onValueChange,\n  } = props;\n\n  const data = usePropsStore((state) => state.data);\n\n  const ref = useRef<HTMLInputElement | null>(null);\n  const shouldFocus = useRef(true);\n  const filterOptions = useMemo(() => {\n    // If the user didn't provide options, use the available ones\n    if (!userFilterOptions) {\n      const automaticFilters = [...new Set(data.map((datum) => getValue(datum?.[id])))];\n\n      const hasEmptyValue = automaticFilters.some((item) => item === null || item === undefined || item === '');\n\n      const finalAutomaticFilters: DSDataTableT.FilterOptionT[] = automaticFilters\n        .filter((item) => item !== null && item !== undefined && item !== '')\n        .map((item) => ({\n          type: 'option',\n          dsId: item as string,\n          value: item as string,\n          label: item as string,\n        }));\n\n      if (hasEmptyValue) {\n        finalAutomaticFilters.push({\n          type: 'option',\n          dsId: EMPTY_FILTER,\n          value: EMPTY_FILTER,\n          label: '(Empty)',\n        });\n      }\n\n      return finalAutomaticFilters;\n    }\n\n    // If user provided the array itself, use it\n    if (Array.isArray(userFilterOptions)) return userFilterOptions;\n    // Otherwise, it is a function\n    return userFilterOptions();\n  }, [data, id, userFilterOptions]);\n\n  const [filters, setFilteredOptions] = useState(filterOptions);\n\n  useEffect(() => setFilteredOptions(filterOptions), [filterOptions]);\n\n  const handleOnChange = useCallback(\n    (value: BaseSelectFilterValue) => {\n      if (isMulti && Array.isArray(value)) {\n        onValueChange(type, value.length !== 0 ? value : undefined);\n      } else {\n        onValueChange(type, value !== null ? value : undefined);\n        patchHeaderFilterButtonAndMenu(column.id, true);\n        innerRef?.current?.focus();\n      }\n    },\n    [column.id, innerRef, isMulti, onValueChange, patchHeaderFilterButtonAndMenu, type],\n  );\n\n  const handleOnCreate = useCallback(\n    (label: string) => {\n      if (label.trim() === '') {\n        return;\n      }\n      if (filterOptions.some((item) => 'label' in item && item.label === label)) {\n        return;\n      }\n      const newId = uid();\n      const newItem: DSDataTableT.FilterOptionT = {\n        dsId: newId,\n        value: newId,\n        label,\n        type: 'option',\n      };\n      filterOptions.unshift(newItem);\n      handleOnChange(Array.isArray(selectedItems) ? [...selectedItems, newItem] : newItem);\n      setFilteredOptions([...filterOptions]);\n    },\n    [filterOptions, handleOnChange, selectedItems],\n  );\n\n  const handleRef = useCallback((newRef: HTMLInputElement | null) => {\n    ref.current = newRef;\n    if (shouldFocus.current) {\n      setTimeout(() => {\n        ref.current?.focus();\n        shouldFocus.current = false;\n      });\n    }\n  }, []);\n\n  useEffect(() => {\n    if (reduxHeader?.hideFilterMenu) {\n      shouldFocus.current = true;\n    }\n  }, [reduxHeader?.hideFilterMenu]);\n\n  const Select = useMemo(\n    () => (\n      <Grid\n        data-testid={\n          isMulti ? DATA_TESTID.DATA_TABLE_MULTISELECT_CONTROLLER : DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER\n        }\n      >\n        <DSComboBox\n          inline\n          aria-label=\"Search filter options\"\n          innerRef={handleRef}\n          allOptions={filters}\n          onCreate={creatable ? handleOnCreate : undefined}\n          onChange={handleOnChange}\n          selectedValues={selectedItems}\n          menuMaxHeight={300}\n        />\n      </Grid>\n    ),\n    [creatable, filters, handleOnChange, handleOnCreate, handleRef, isMulti, selectedItems],\n  );\n\n  const handleOnClickOutside = useCallback(() => {\n    setFilteredOptions(filterOptions);\n  }, [filterOptions]);\n\n  return (\n    <FilterPopover\n      reduxHeader={reduxHeader}\n      column={column}\n      columnId={column.id}\n      menuContent={Select}\n      triggerIcon={<SearchXsmall />}\n      innerRef={innerRef}\n      ariaLabel=\"Open Selection Filter\"\n      onClickOutsideMenu={handleOnClickOutside}\n      customStyles={{\n        backgroundColor: '#fff',\n        width: filterMinWidth ?? column.ref?.current?.offsetWidth,\n      }}\n    />\n  );\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useRef, useCallback, useEffect, useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { DSComboboxT } from '@elliemae/ds-form-combobox';\nimport { DSComboBox } from '@elliemae/ds-form-combobox';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { uid } from 'uid';\nimport { FilterPopover } from '../../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { DATA_TESTID, EMPTY_FILTER } from '../../../../configs/index.js';\nimport { usePropsStore } from '../../../../configs/useStore/createInternalAndPropsContext.js';\n\ninterface BaseSelectProps {\n  isMulti?: boolean;\n  creatable?: boolean;\n  type: string;\n}\n\ntype MaybeToStringable =\n  | string\n  | number\n  | boolean\n  | Date\n  | RegExp\n  | Array<unknown>\n  | Record<string, unknown>\n  | null\n  | undefined;\n\nconst getValue = (datum: unknown) => (datum as MaybeToStringable)?.toString();\n\ntype BaseSelectFilterValue = DSComboboxT.SelectedOptionsT;\n\nexport const BaseSelectFilter: React.ComponentType<\n  DSDataTableT.FilterProps<BaseSelectFilterValue> & BaseSelectProps\n> = (props) => {\n  const {\n    isMulti = false,\n    filterValue: selectedItems = null,\n    creatable = false,\n    column,\n    type,\n    column: { id, filterOptions: userFilterOptions, filterMinWidth },\n    reduxHeader,\n    patchHeaderFilterButtonAndMenu,\n    innerRef,\n    onValueChange,\n  } = props;\n\n  const data = usePropsStore((state) => state.data);\n\n  const ref = useRef<HTMLInputElement | null>(null);\n  const shouldFocus = useRef(true);\n  const filterOptions = useMemo(() => {\n    // If the user didn't provide options, use the available ones\n    if (!userFilterOptions) {\n      const automaticFilters = [...new Set(data.map((datum) => getValue(datum?.[id])))];\n\n      const hasEmptyValue = automaticFilters.some((item) => item === null || item === undefined || item === '');\n\n      const finalAutomaticFilters: DSDataTableT.FilterOptionT[] = automaticFilters\n        .filter((item) => item !== null && item !== undefined && item !== '')\n        .map((item) => ({\n          type: 'option',\n          dsId: item as string,\n          value: item as string,\n          label: item as string,\n        }));\n\n      if (hasEmptyValue) {\n        finalAutomaticFilters.push({\n          type: 'option',\n          dsId: EMPTY_FILTER,\n          value: EMPTY_FILTER,\n          label: '(Empty)',\n        });\n      }\n\n      return finalAutomaticFilters;\n    }\n\n    // If user provided the array itself, use it\n    if (Array.isArray(userFilterOptions)) return userFilterOptions;\n    // Otherwise, it is a function\n    return userFilterOptions();\n  }, [data, id, userFilterOptions]);\n\n  const [filters, setFilteredOptions] = useState(filterOptions);\n\n  useEffect(() => setFilteredOptions(filterOptions), [filterOptions]);\n\n  const handleOnChange = useCallback(\n    (value: BaseSelectFilterValue) => {\n      if (isMulti && Array.isArray(value)) {\n        onValueChange(type, value.length !== 0 ? value : undefined);\n      } else {\n        onValueChange(type, value !== null ? value : undefined);\n        patchHeaderFilterButtonAndMenu(column.id, true);\n        innerRef?.current?.focus();\n      }\n    },\n    [column.id, innerRef, isMulti, onValueChange, patchHeaderFilterButtonAndMenu, type],\n  );\n\n  const handleOnCreate = useCallback(\n    (label: string) => {\n      if (label.trim() === '') {\n        return;\n      }\n      if (filterOptions.some((item) => 'label' in item && item.label === label)) {\n        return;\n      }\n      const newId = uid();\n      const newItem: DSDataTableT.FilterOptionT = {\n        dsId: newId,\n        value: newId,\n        label,\n        type: 'option',\n      };\n      filterOptions.unshift(newItem);\n      handleOnChange(Array.isArray(selectedItems) ? [...selectedItems, newItem] : newItem);\n      setFilteredOptions([...filterOptions]);\n    },\n    [filterOptions, handleOnChange, selectedItems],\n  );\n\n  const handleRef = useCallback((newRef: HTMLInputElement | null) => {\n    ref.current = newRef;\n    if (shouldFocus.current) {\n      setTimeout(() => {\n        ref.current?.focus();\n        shouldFocus.current = false;\n      });\n    }\n  }, []);\n\n  useEffect(() => {\n    if (reduxHeader?.hideFilterMenu) {\n      shouldFocus.current = true;\n    }\n  }, [reduxHeader?.hideFilterMenu]);\n\n  const Select = useMemo(\n    () => (\n      <Grid\n        data-testid={\n          isMulti ? DATA_TESTID.DATA_TABLE_MULTISELECT_CONTROLLER : DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER\n        }\n      >\n        <DSComboBox\n          inline\n          aria-label=\"Search filter options\"\n          innerRef={handleRef}\n          allOptions={filters}\n          onCreate={creatable ? handleOnCreate : undefined}\n          onChange={handleOnChange}\n          selectedValues={selectedItems}\n          menuMaxHeight={300}\n        />\n      </Grid>\n    ),\n    [creatable, filters, handleOnChange, handleOnCreate, handleRef, isMulti, selectedItems],\n  );\n\n  const handleOnClickOutside = useCallback(() => {\n    setFilteredOptions(filterOptions);\n  }, [filterOptions]);\n\n  return (\n    <FilterPopover\n      reduxHeader={reduxHeader}\n      column={column}\n      columnId={column.id}\n      menuContent={Select}\n      triggerIcon={<SearchXsmall />}\n      innerRef={innerRef}\n      ariaLabel=\"Open Selection Filter\"\n      onClickOutsideMenu={handleOnClickOutside}\n      customStyles={{\n        backgroundColor: '#fff',\n        width: filterMinWidth ?? column.ref?.current?.offsetWidth,\n      }}\n    />\n  );\n};\n"],
   "mappings": "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",
   "names": []
 }

package/dist/esm/addons/Pagination/Pagination.js CHANGED Viewed

@@ -2,7 +2,7 @@ import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useMemo } from "react";
 import { DSPagination } from "@elliemae/ds-pagination";
-import { usePropsStore } from "../../configs/useStore/useStore.js";
+import { usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
 const Pagination = () => {
   const onPageChanged = usePropsStore((state) => state.onPageChanged);
   const PaginationComponent = usePropsStore((state) => state.Pagination);

package/dist/esm/addons/Pagination/Pagination.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/addons/Pagination/Pagination.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useEffect, useMemo } from 'react';\nimport { DSPagination } from '@elliemae/ds-pagination';\nimport { usePropsStore } from '../../configs/useStore/useStore.js';\n\nexport const Pagination: React.ComponentType<Record<string, never>> = () => {\n  const onPageChanged = usePropsStore((state) => state.onPageChanged);\n  const PaginationComponent = usePropsStore((state) => state.Pagination);\n  const paginationHelpers = usePropsStore((state) => state.paginationHelpers);\n  const page = usePropsStore((state) => state.flattenedData);\n\n  const originalPage = useMemo(() => page.map((row) => row.original), [page]);\n\n  useEffect(() => {\n    onPageChanged(originalPage);\n  }, [onPageChanged, originalPage]);\n\n  if (PaginationComponent !== undefined) return <PaginationComponent />;\n\n  return <DSPagination {...paginationHelpers} width=\"100%\" />;\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useEffect, useMemo } from 'react';\nimport { DSPagination } from '@elliemae/ds-pagination';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\n\nexport const Pagination: React.ComponentType<Record<string, never>> = () => {\n  const onPageChanged = usePropsStore((state) => state.onPageChanged);\n  const PaginationComponent = usePropsStore((state) => state.Pagination);\n  const paginationHelpers = usePropsStore((state) => state.paginationHelpers);\n  const page = usePropsStore((state) => state.flattenedData);\n\n  const originalPage = useMemo(() => page.map((row) => row.original), [page]);\n\n  useEffect(() => {\n    onPageChanged(originalPage);\n  }, [onPageChanged, originalPage]);\n\n  if (PaginationComponent !== undefined) return <PaginationComponent />;\n\n  return <DSPagination {...paginationHelpers} width=\"100%\" />;\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACgByB;AAhBhD,SAAgB,WAAW,eAAe;AAC1C,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAEvB,MAAM,aAAyD,MAAM;AAC1E,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,aAAa;AAClE,QAAM,sBAAsB,cAAc,CAAC,UAAU,MAAM,UAAU;AACrE,QAAM,oBAAoB,cAAc,CAAC,UAAU,MAAM,iBAAiB;AAC1E,QAAM,OAAO,cAAc,CAAC,UAAU,MAAM,aAAa;AAEzD,QAAM,eAAe,QAAQ,MAAM,KAAK,IAAI,CAAC,QAAQ,IAAI,QAAQ,GAAG,CAAC,IAAI,CAAC;AAE1E,YAAU,MAAM;AACd,kBAAc,YAAY;AAAA,EAC5B,GAAG,CAAC,eAAe,YAAY,CAAC;AAEhC,MAAI,wBAAwB,OAAW,QAAO,oBAAC,uBAAoB;AAEnE,SAAO,oBAAC,gBAAc,GAAG,mBAAmB,OAAM,QAAO;AAC3D;",
   "names": []
 }

package/dist/esm/configs/useStore/createInternalAndPropsContext.js ADDED Viewed

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { createInternalAndPropsContext } from "@elliemae/ds-zustand-helpers";
+const { PropsProvider, usePropsStore, InternalProvider, useInternalStore } = createInternalAndPropsContext();
+export {
+  InternalProvider,
+  PropsProvider,
+  useInternalStore,
+  usePropsStore
+};
+//# sourceMappingURL=createInternalAndPropsContext.js.map

package/dist/esm/configs/useStore/createInternalAndPropsContext.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/configs/useStore/createInternalAndPropsContext.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createInternalAndPropsContext } from '@elliemae/ds-zustand-helpers';\nimport { type DSDataTableT } from '../../react-desc-prop-types.js';\n\nexport const { PropsProvider, usePropsStore, InternalProvider, useInternalStore } = createInternalAndPropsContext<\n  DSDataTableT.InternalProps,\n  DSDataTableT.InternalAtoms,\n  DSDataTableT.UseAutoCalculatedT,\n  DSDataTableT.Selectors,\n  DSDataTableT.Reducers\n>();\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,qCAAqC;AAGvC,MAAM,EAAE,eAAe,eAAe,kBAAkB,iBAAiB,IAAI,8BAMlF;",
+  "names": []
+}

package/dist/esm/configs/useStore/index.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import * as React from "react";
-import { PropsProvider, usePropsStore, InternalProvider, useInternalStore, useWholeStore, config } from "./useStore.js";
+import { useWholeStore, config } from "./useStore.js";
+import { PropsProvider, usePropsStore, InternalProvider, useInternalStore } from "./createInternalAndPropsContext.js";
 export {
   InternalProvider,
   PropsProvider,

package/dist/esm/configs/useStore/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/configs/useStore/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { PropsProvider, usePropsStore, InternalProvider, useInternalStore, useWholeStore, config } from './useStore.js';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,eAAe,eAAe,kBAAkB,kBAAkB,eAAe,cAAc;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { useWholeStore, config } from './useStore.js';\nexport { PropsProvider, usePropsStore, InternalProvider, useInternalStore } from './createInternalAndPropsContext.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,eAAe,cAAc;AACtC,SAAS,eAAe,eAAe,kBAAkB,wBAAwB;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 import * as React from "react";
-import { createInternalAndPropsContext } from "@elliemae/ds-zustand-helpers";
 import { defaultProps } from "../../react-desc-prop-types.js";
 import { useAutoCalculated } from "../useAutocalculated/index.js";
+import { InternalProvider, PropsProvider, useInternalStore, usePropsStore } from "./createInternalAndPropsContext.js";
 const internalAtomDefaultValues = {
   drilldownRowId: null,
   focusedRowId: null,
@@ -29,7 +29,6 @@ const reducers = (get, set) => ({
 });
 const subscribers = () => {
 };
-const { PropsProvider, usePropsStore, InternalProvider, useInternalStore } = createInternalAndPropsContext();
 const useWholeStore = () => {
   const {
     columnHeaderRef,
@@ -75,11 +74,7 @@ const config = {
   useInternalStore
 };
 export {
-  InternalProvider,
-  PropsProvider,
   config,
-  useInternalStore,
-  usePropsStore,
   useWholeStore
 };
 //# sourceMappingURL=useStore.js.map

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

@@ -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 { createInternalAndPropsContext, type ZustandT } from '@elliemae/ds-zustand-helpers';\nimport { defaultProps, type DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useAutoCalculated } from '../useAutocalculated/index.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 { PropsProvider, usePropsStore, InternalProvider, useInternalStore } = createInternalAndPropsContext<\n  DSDataTableT.InternalProps,\n  DSDataTableT.InternalAtoms,\n  DSDataTableT.UseAutoCalculatedT,\n  DSDataTableT.Selectors,\n  DSDataTableT.Reducers\n>();\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: internalAtomDefaultValues,\n  useAutoCalculated,\n  selectors,\n  reducers,\n  subscribers,\n  PropsProvider,\n  usePropsStore,\n  InternalProvider,\n  useInternalStore,\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,qCAAoD;AAC7D,SAAS,oBAAuC;AAChD,SAAS,yBAAyB;AAElC,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,EAAE,eAAe,eAAe,kBAAkB,iBAAiB,IAAI,8BAMlF;AAEK,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};\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;",
   "names": []
 }

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

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState, useCallback, useLayoutEffect } from "react";
-import { StyledPencilIcon, StyledEditableContainer } from "../styled.js";
-import { usePropsStore } from "../configs/useStore/useStore.js";
+import { useCallback, useLayoutEffect, useState } from "react";
+import { usePropsStore } from "../configs/useStore/createInternalAndPropsContext.js";
+import { StyledEditableContainer, StyledPencilIcon } from "../styled.js";
 const EditableCell = (props) => {
   const { StandardRender, EditableRenderer, cell, isRowSelected } = props;
   const domIdAffix = usePropsStore((state) => state.domIdAffix);

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

@@ -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, { useState, useCallback, useLayoutEffect } from 'react';\nimport { StyledPencilIcon, StyledEditableContainer } from '../styled.js';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\nimport { usePropsStore } from '../configs/useStore/useStore.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,UAAU,aAAa,uBAAuB;AAC9D,SAAS,kBAAkB,+BAA+B;AAE1D,SAAS,qBAAqB;AAEvB,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;",
+  "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": []
 }

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

@@ -5,7 +5,7 @@ import { 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/useStore.js";
+import { usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
 const FilterBarDropdownMenu = (props) => {
   const onFiltersChange = usePropsStore((state) => state.onFiltersChange);
   const [isOpened, setIsOpened] = useState(false);

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

@@ -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/useStore.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"],
+  "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;",
   "names": []
 }

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

@@ -1,14 +1,14 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from "react";
 import { DSButtonV2 } from "@elliemae/ds-button-v2";
 import { DSPopperJS } from "@elliemae/ds-popperjs";
-import { styled, mergeRefs } from "@elliemae/ds-system";
+import { mergeRefs, styled } from "@elliemae/ds-system";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { DSDataTableName, DSDataTableSlots } from "../../DSDataTableDefinitions.js";
 import { DATA_TESTID } from "../../configs/constants.js";
-import { useGetFilterVisibility } from "./useGetFilterVisibility.js";
+import { useInternalStore, usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
 import { useGetFilterHandlers } from "./useGetFilterHandlers.js";
-import { useInternalStore, usePropsStore } from "../../configs/useStore/useStore.js";
-import { DSDataTableName, DSDataTableSlots } from "../../DSDataTableDefinitions.js";
+import { useGetFilterVisibility } from "./useGetFilterVisibility.js";
 const FilterButton = styled("span", { name: DSDataTableName, slot: DSDataTableSlots.FILTER_POPOVER_BUTTON })`
   display: inline-grid;
   ${(props) => props.hide ? "opacity: 0; display: none; width: 0;" : ""}

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

@@ -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 React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport type { DSPopperJST } from '@elliemae/ds-popperjs';\nimport { styled, mergeRefs } from '@elliemae/ds-system';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { useGetFilterVisibility } from './useGetFilterVisibility.js';\nimport type { FilterPopoverProps } from './types.js';\nimport { useGetFilterHandlers } from './useGetFilterHandlers.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/useStore.js';\nimport { DSDataTableName, DSDataTableSlots } from '../../DSDataTableDefinitions.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 '../../DSDataTableDefinitions.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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",
   "names": []
 }

package/dist/esm/exported-related/FilterPopover/useGetFilterHandlers.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { useCallback, useEffect, useRef } from "react";
-import { useInternalStore } from "../../configs/useStore/useStore.js";
+import { useInternalStore } from "../../configs/useStore/createInternalAndPropsContext.js";
 const emptyFunc = () => null;
 const useIframeClickCloseWorkaround = ({
   columnId,

package/dist/esm/exported-related/FilterPopover/useGetFilterHandlers.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/FilterPopover/useGetFilterHandlers.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\nimport type React from 'react';\nimport { useCallback, useEffect, useRef } from 'react';\nimport type { FilterPopoverProps } from './types.js';\nimport { useInternalStore } from '../../configs/useStore/useStore.js';\n\nconst emptyFunc = () => null;\n\n// https://jira.elliemae.io/browse/PUI-12457\nconst useIframeClickCloseWorkaround = ({\n  columnId,\n  isMenuOpen,\n}: {\n  columnId: FilterPopoverProps['columnId'];\n  isMenuOpen: boolean;\n}) => {\n  // due to how browser handle events when iframes are involved we can only listen to window \"blur\" event to understand if the user clicked on any iframe\n  // out of the box the filter are supposed to close when the user clicks outside of the filter contextual region\n  // this helper ensure that the filter will close even if the user clicks on an iframe.\n  // since we must do vanilla javascript we need to handle this with extreme care and ensure we optimize as much as possible.\n  // we want to attach/detach the event listener only when the filter is open and we want to detach it as soon as the filter is closed.\n  // this is to ensure that no matter how many columns have filter functionality we only pay the performance cost for the filter that would do anything with it.\n  const patchHeaderFilterButtonAndMenu = useInternalStore((state) => state.patchHeaderFilterButtonAndMenu);\n\n  // we only care to invoke the latest version of patchHeaderFilterButtonAndMenu\n  // we do not need to reattach the event listener if pathHeaderFilterButtonAndMenu changes\n  // event attachment/detachment is more expensive than a simple ref update performance wise.\n  const patchRef = useRef(patchHeaderFilterButtonAndMenu);\n  useEffect(() => {\n    patchRef.current = patchHeaderFilterButtonAndMenu;\n  }, [patchHeaderFilterButtonAndMenu]);\n\n  // extremely optimized event listener attachment/detachment\n  //  we run this side effect strictly when required to ensure the best performance possible.\n  //  it's strictly required when:\n  //    - the filter is open ( so clicking an iframe will close it )\n  //    - the columnId changes ( so we close the correct filter )\n  //  if patchHeaderFilterButtonAndMenu changes we do not care to reattach the event listener\n  //    as long as the .current ref is updated in time before the close event is triggered.\n  //  which is guaranteed by:\n  //    - the fact that we update the ref in the useEffect above\n  //    - the fact that we invoke patchRef.current as a consquence of the user \"clicking\" on the filter button (which happens after the previous useEffect)\n  useEffect(() => {\n    // we declare the function locally in the closure to ensure we can detach it later\n    // useEffect is run after render, useCallBack is run before render,\n    // which means that using useCallback here could potentially cause a memory-leak/dangling reference/attached event listener that is never detached\n    const handleBlur = () => {\n      patchRef.current(columnId, true);\n    };\n\n    if (isMenuOpen) window.addEventListener('blur', handleBlur);\n    else window.removeEventListener('blur', handleBlur);\n\n    return () => {\n      window.removeEventListener('blur', handleBlur);\n    };\n  }, [columnId, isMenuOpen]);\n};\n\nexport const useGetFilterHandlers = (\n  props: FilterPopoverProps,\n  isMenuOpen: boolean,\n  buttonReference: HTMLButtonElement | null,\n  setIsButtonFocused: React.Dispatch<React.SetStateAction<boolean>>,\n) => {\n  const { columnId, onTriggerClick = emptyFunc, onClickOutsideMenu = emptyFunc } = props;\n  useIframeClickCloseWorkaround({ columnId, isMenuOpen });\n\n  const patchHeaderFilterButtonAndMenu = useInternalStore((state) => state.patchHeaderFilterButtonAndMenu);\n  const patchHeader = useInternalStore((state) => state.patchHeader);\n\n  const handleTriggerClick = useCallback(\n    (e: React.MouseEvent | React.KeyboardEvent) => {\n      onTriggerClick(columnId, e);\n      patchHeader(columnId, { hideFilterMenu: isMenuOpen, hideFilterButton: false });\n      e.stopPropagation();\n    },\n    [columnId, isMenuOpen, onTriggerClick, patchHeader],\n  );\n\n  const handleTriggerOnFocus = useCallback(() => setIsButtonFocused(true), [setIsButtonFocused]);\n  const handleTriggerOnBlur = useCallback(() => setIsButtonFocused(false), [setIsButtonFocused]);\n\n  const handleClickOutsideMenu = useCallback(() => {\n    onClickOutsideMenu(columnId);\n    if (isMenuOpen) patchHeaderFilterButtonAndMenu(columnId, true);\n  }, [columnId, isMenuOpen, onClickOutsideMenu, patchHeaderFilterButtonAndMenu]);\n\n  const handleMenuOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      e.stopPropagation();\n      if (e.code === 'Escape') {\n        patchHeader(columnId, { hideFilterMenu: true, hideFilterButton: false, showSortCaret: true });\n        buttonReference?.focus();\n      }\n      // Stop propagation for some reason is not enough to prevent scrolling of the datatable\n      // so we just prevent default behaviour in this case\n      if (['ArrowUp', 'ArrowDown'].includes(e.code)) {\n        e.preventDefault();\n      }\n    },\n    [buttonReference, columnId, patchHeader],\n  );\n\n  return { handleTriggerClick, handleClickOutsideMenu, handleMenuOnKeyDown, handleTriggerOnFocus, handleTriggerOnBlur };\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,aAAa,WAAW,cAAc;AAE/C,SAAS,wBAAwB;AAEjC,MAAM,YAAY,MAAM;AAGxB,MAAM,gCAAgC,CAAC;AAAA,EACrC;AAAA,EACA;AACF,MAGM;AAOJ,QAAM,iCAAiC,iBAAiB,CAAC,UAAU,MAAM,8BAA8B;AAKvG,QAAM,WAAW,OAAO,8BAA8B;AACtD,YAAU,MAAM;AACd,aAAS,UAAU;AAAA,EACrB,GAAG,CAAC,8BAA8B,CAAC;AAYnC,YAAU,MAAM;AAId,UAAM,aAAa,MAAM;AACvB,eAAS,QAAQ,UAAU,IAAI;AAAA,IACjC;AAEA,QAAI,WAAY,QAAO,iBAAiB,QAAQ,UAAU;AAAA,QACrD,QAAO,oBAAoB,QAAQ,UAAU;AAElD,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,UAAU;AAAA,IAC/C;AAAA,EACF,GAAG,CAAC,UAAU,UAAU,CAAC;AAC3B;AAEO,MAAM,uBAAuB,CAClC,OACA,YACA,iBACA,uBACG;AACH,QAAM,EAAE,UAAU,iBAAiB,WAAW,qBAAqB,UAAU,IAAI;AACjF,gCAA8B,EAAE,UAAU,WAAW,CAAC;AAEtD,QAAM,iCAAiC,iBAAiB,CAAC,UAAU,MAAM,8BAA8B;AACvG,QAAM,cAAc,iBAAiB,CAAC,UAAU,MAAM,WAAW;AAEjE,QAAM,qBAAqB;AAAA,IACzB,CAAC,MAA8C;AAC7C,qBAAe,UAAU,CAAC;AAC1B,kBAAY,UAAU,EAAE,gBAAgB,YAAY,kBAAkB,MAAM,CAAC;AAC7E,QAAE,gBAAgB;AAAA,IACpB;AAAA,IACA,CAAC,UAAU,YAAY,gBAAgB,WAAW;AAAA,EACpD;AAEA,QAAM,uBAAuB,YAAY,MAAM,mBAAmB,IAAI,GAAG,CAAC,kBAAkB,CAAC;AAC7F,QAAM,sBAAsB,YAAY,MAAM,mBAAmB,KAAK,GAAG,CAAC,kBAAkB,CAAC;AAE7F,QAAM,yBAAyB,YAAY,MAAM;AAC/C,uBAAmB,QAAQ;AAC3B,QAAI,WAAY,gCAA+B,UAAU,IAAI;AAAA,EAC/D,GAAG,CAAC,UAAU,YAAY,oBAAoB,8BAA8B,CAAC;AAE7E,QAAM,sBAAsB;AAAA,IAC1B,CAAC,MAA2B;AAC1B,QAAE,gBAAgB;AAClB,UAAI,EAAE,SAAS,UAAU;AACvB,oBAAY,UAAU,EAAE,gBAAgB,MAAM,kBAAkB,OAAO,eAAe,KAAK,CAAC;AAC5F,yBAAiB,MAAM;AAAA,MACzB;AAGA,UAAI,CAAC,WAAW,WAAW,EAAE,SAAS,EAAE,IAAI,GAAG;AAC7C,UAAE,eAAe;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,iBAAiB,UAAU,WAAW;AAAA,EACzC;AAEA,SAAO,EAAE,oBAAoB,wBAAwB,qBAAqB,sBAAsB,oBAAoB;AACtH;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\nimport type React from 'react';\nimport { useCallback, useEffect, useRef } from 'react';\nimport { useInternalStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { FilterPopoverProps } from './types.js';\n\nconst emptyFunc = () => null;\n\n// https://jira.elliemae.io/browse/PUI-12457\nconst useIframeClickCloseWorkaround = ({\n  columnId,\n  isMenuOpen,\n}: {\n  columnId: FilterPopoverProps['columnId'];\n  isMenuOpen: boolean;\n}) => {\n  // due to how browser handle events when iframes are involved we can only listen to window \"blur\" event to understand if the user clicked on any iframe\n  // out of the box the filter are supposed to close when the user clicks outside of the filter contextual region\n  // this helper ensure that the filter will close even if the user clicks on an iframe.\n  // since we must do vanilla javascript we need to handle this with extreme care and ensure we optimize as much as possible.\n  // we want to attach/detach the event listener only when the filter is open and we want to detach it as soon as the filter is closed.\n  // this is to ensure that no matter how many columns have filter functionality we only pay the performance cost for the filter that would do anything with it.\n  const patchHeaderFilterButtonAndMenu = useInternalStore((state) => state.patchHeaderFilterButtonAndMenu);\n\n  // we only care to invoke the latest version of patchHeaderFilterButtonAndMenu\n  // we do not need to reattach the event listener if pathHeaderFilterButtonAndMenu changes\n  // event attachment/detachment is more expensive than a simple ref update performance wise.\n  const patchRef = useRef(patchHeaderFilterButtonAndMenu);\n  useEffect(() => {\n    patchRef.current = patchHeaderFilterButtonAndMenu;\n  }, [patchHeaderFilterButtonAndMenu]);\n\n  // extremely optimized event listener attachment/detachment\n  //  we run this side effect strictly when required to ensure the best performance possible.\n  //  it's strictly required when:\n  //    - the filter is open ( so clicking an iframe will close it )\n  //    - the columnId changes ( so we close the correct filter )\n  //  if patchHeaderFilterButtonAndMenu changes we do not care to reattach the event listener\n  //    as long as the .current ref is updated in time before the close event is triggered.\n  //  which is guaranteed by:\n  //    - the fact that we update the ref in the useEffect above\n  //    - the fact that we invoke patchRef.current as a consquence of the user \"clicking\" on the filter button (which happens after the previous useEffect)\n  useEffect(() => {\n    // we declare the function locally in the closure to ensure we can detach it later\n    // useEffect is run after render, useCallBack is run before render,\n    // which means that using useCallback here could potentially cause a memory-leak/dangling reference/attached event listener that is never detached\n    const handleBlur = () => {\n      patchRef.current(columnId, true);\n    };\n\n    if (isMenuOpen) window.addEventListener('blur', handleBlur);\n    else window.removeEventListener('blur', handleBlur);\n\n    return () => {\n      window.removeEventListener('blur', handleBlur);\n    };\n  }, [columnId, isMenuOpen]);\n};\n\nexport const useGetFilterHandlers = (\n  props: FilterPopoverProps,\n  isMenuOpen: boolean,\n  buttonReference: HTMLButtonElement | null,\n  setIsButtonFocused: React.Dispatch<React.SetStateAction<boolean>>,\n) => {\n  const { columnId, onTriggerClick = emptyFunc, onClickOutsideMenu = emptyFunc } = props;\n  useIframeClickCloseWorkaround({ columnId, isMenuOpen });\n\n  const patchHeaderFilterButtonAndMenu = useInternalStore((state) => state.patchHeaderFilterButtonAndMenu);\n  const patchHeader = useInternalStore((state) => state.patchHeader);\n\n  const handleTriggerClick = useCallback(\n    (e: React.MouseEvent | React.KeyboardEvent) => {\n      onTriggerClick(columnId, e);\n      patchHeader(columnId, { hideFilterMenu: isMenuOpen, hideFilterButton: false });\n      e.stopPropagation();\n    },\n    [columnId, isMenuOpen, onTriggerClick, patchHeader],\n  );\n\n  const handleTriggerOnFocus = useCallback(() => setIsButtonFocused(true), [setIsButtonFocused]);\n  const handleTriggerOnBlur = useCallback(() => setIsButtonFocused(false), [setIsButtonFocused]);\n\n  const handleClickOutsideMenu = useCallback(() => {\n    onClickOutsideMenu(columnId);\n    if (isMenuOpen) patchHeaderFilterButtonAndMenu(columnId, true);\n  }, [columnId, isMenuOpen, onClickOutsideMenu, patchHeaderFilterButtonAndMenu]);\n\n  const handleMenuOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      e.stopPropagation();\n      if (e.code === 'Escape') {\n        patchHeader(columnId, { hideFilterMenu: true, hideFilterButton: false, showSortCaret: true });\n        buttonReference?.focus();\n      }\n      // Stop propagation for some reason is not enough to prevent scrolling of the datatable\n      // so we just prevent default behaviour in this case\n      if (['ArrowUp', 'ArrowDown'].includes(e.code)) {\n        e.preventDefault();\n      }\n    },\n    [buttonReference, columnId, patchHeader],\n  );\n\n  return { handleTriggerClick, handleClickOutsideMenu, handleMenuOnKeyDown, handleTriggerOnFocus, handleTriggerOnBlur };\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,aAAa,WAAW,cAAc;AAC/C,SAAS,wBAAwB;AAGjC,MAAM,YAAY,MAAM;AAGxB,MAAM,gCAAgC,CAAC;AAAA,EACrC;AAAA,EACA;AACF,MAGM;AAOJ,QAAM,iCAAiC,iBAAiB,CAAC,UAAU,MAAM,8BAA8B;AAKvG,QAAM,WAAW,OAAO,8BAA8B;AACtD,YAAU,MAAM;AACd,aAAS,UAAU;AAAA,EACrB,GAAG,CAAC,8BAA8B,CAAC;AAYnC,YAAU,MAAM;AAId,UAAM,aAAa,MAAM;AACvB,eAAS,QAAQ,UAAU,IAAI;AAAA,IACjC;AAEA,QAAI,WAAY,QAAO,iBAAiB,QAAQ,UAAU;AAAA,QACrD,QAAO,oBAAoB,QAAQ,UAAU;AAElD,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,UAAU;AAAA,IAC/C;AAAA,EACF,GAAG,CAAC,UAAU,UAAU,CAAC;AAC3B;AAEO,MAAM,uBAAuB,CAClC,OACA,YACA,iBACA,uBACG;AACH,QAAM,EAAE,UAAU,iBAAiB,WAAW,qBAAqB,UAAU,IAAI;AACjF,gCAA8B,EAAE,UAAU,WAAW,CAAC;AAEtD,QAAM,iCAAiC,iBAAiB,CAAC,UAAU,MAAM,8BAA8B;AACvG,QAAM,cAAc,iBAAiB,CAAC,UAAU,MAAM,WAAW;AAEjE,QAAM,qBAAqB;AAAA,IACzB,CAAC,MAA8C;AAC7C,qBAAe,UAAU,CAAC;AAC1B,kBAAY,UAAU,EAAE,gBAAgB,YAAY,kBAAkB,MAAM,CAAC;AAC7E,QAAE,gBAAgB;AAAA,IACpB;AAAA,IACA,CAAC,UAAU,YAAY,gBAAgB,WAAW;AAAA,EACpD;AAEA,QAAM,uBAAuB,YAAY,MAAM,mBAAmB,IAAI,GAAG,CAAC,kBAAkB,CAAC;AAC7F,QAAM,sBAAsB,YAAY,MAAM,mBAAmB,KAAK,GAAG,CAAC,kBAAkB,CAAC;AAE7F,QAAM,yBAAyB,YAAY,MAAM;AAC/C,uBAAmB,QAAQ;AAC3B,QAAI,WAAY,gCAA+B,UAAU,IAAI;AAAA,EAC/D,GAAG,CAAC,UAAU,YAAY,oBAAoB,8BAA8B,CAAC;AAE7E,QAAM,sBAAsB;AAAA,IAC1B,CAAC,MAA2B;AAC1B,QAAE,gBAAgB;AAClB,UAAI,EAAE,SAAS,UAAU;AACvB,oBAAY,UAAU,EAAE,gBAAgB,MAAM,kBAAkB,OAAO,eAAe,KAAK,CAAC;AAC5F,yBAAiB,MAAM;AAAA,MACzB;AAGA,UAAI,CAAC,WAAW,WAAW,EAAE,SAAS,EAAE,IAAI,GAAG;AAC7C,UAAE,eAAe;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,iBAAiB,UAAU,WAAW;AAAA,EACzC;AAEA,SAAO,EAAE,oBAAoB,wBAAwB,qBAAqB,sBAAsB,oBAAoB;AACtH;",
   "names": []
 }