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

@elliemae/ds-data-table 3.50.1-next.9 → 3.51.0-beta.1

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 (233) hide show

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/addons/Columns/ColumnExpand/ColumnExpand.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useMemo, useCallback, createRef } from 'react';\nimport { ArrowheadDown, ArrowheadRight, ArrowShortReturn, type SvgIconT } from '@elliemae/ds-icons';\nimport { styled, css } from '@elliemae/ds-system';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\nimport { StyledFocusWithin } from '../../../styled.js';\nimport { DATA_TESTID } from '../../../configs/constants.js';\nimport { usePropsStore } from '../../../configs/useStore/useStore.js';\nimport { DSDataTableName, DSDataTableSlots } from '../../../DSDataTableDefinitions.js';\n\nconst disabledCaret = css`\n  cursor: not-allowed;\n  pointer-events: none;\n`;\nconst StyledSpan = styled('span', { name: DSDataTableName, slot: DSDataTableSlots.EXPAND_CELL_CONTAINER })<{\n  disabled?: boolean;\n}>`\n  cursor: pointer;\n  box-sizing: border-box;\n  outline: none;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  ${({ disabled }) => disabled && disabledCaret}\n  z-index: 1; // to be clickable over right cell padding that covers the whole cell (hack to satisfy the design)\n`;\n\nconst ArrowDown: React.ComponentType<SvgIconT.Props> = ({ color = ['brand-primary', '600'], ...rest }) => (\n  <ArrowheadDown size=\"s\" color={color} data-testid={DATA_TESTID.DATA_TABLE_ICON_ARROW_DOWN} {...rest} />\n);\n\nconst ArrowMixed = () => (\n  <ArrowheadRight\n    size=\"s\"\n    color={['brand-primary', '600']}\n    data-testid={DATA_TESTID.DATA_TABLE_ICON_ARROW_MIXED}\n    style={{ transform: 'rotate(45deg)' }}\n  />\n);\n\nconst ArrowRight: React.ComponentType<SvgIconT.Props> = ({ color = ['brand-primary', '600'], ...rest }) => (\n  <ArrowheadRight size=\"s\" color={color} data-testid={DATA_TESTID.DATA_TABLE_ICON_ARROW_RIGHT} {...rest} />\n);\n\nexport const expandRowColumn: DSDataTableT.InternalColumn = {\n  // Build our expander column\n  id: 'expander', // Make sure it has an ID\n  accessor: 'expandRowColumn',\n  Header: () => {\n    const expandedRows = usePropsStore((state) => state.expandedRows);\n    const onRowExpand = usePropsStore((state) => state.onRowExpand);\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 isEmptyContent = usePropsStore((state) => state.isEmptyContent);\n    const firstFocuseableColumnHeaderId = usePropsStore((state) => state.firstFocuseableColumnHeaderId);\n    const getOwnerProps = usePropsStore((store) => store.get);\n    const getOwnerPropsArguments = useCallback(\n      () => ({\n        isGlobal: true,\n      }),\n      [],\n    );\n    const allExpandable = useMemo(() => {\n      const expandable: Record<string, boolean> = {};\n      allDataFlattened.forEach((row) => {\n        const isExpandableRow = row.original.subRows || row.original.tableRowDetails || row.original.dimsumHeaderValue;\n        if (!disabledRows[row.uid] && isExpandableRow) expandable[row.uid] = true;\n      });\n      return expandable;\n    }, [allDataFlattened, disabledRows]);\n\n    const isAllRowsExpanded = useMemo(\n      () => Object.keys(allExpandable).length === Object.keys(expandedRows).length,\n      [allExpandable, expandedRows],\n    );\n\n    const onExpandedAllHandler = useCallback(() => {\n      if (isAllRowsExpanded) onRowExpand({}, 'All');\n      else onRowExpand({ ...allExpandable }, 'All');\n    }, [allExpandable, isAllRowsExpanded, onRowExpand]);\n\n    const onKeyDownHandler = useCallback(\n      (e: React.KeyboardEvent) => {\n        if (['Enter', 'Space'].includes(e.code)) {\n          onExpandedAllHandler();\n          e.preventDefault();\n        }\n      },\n      [onExpandedAllHandler],\n    );\n\n    const GlobalExpandIcon = useMemo(() => {\n      if (isAllRowsExpanded) return <ArrowDown />;\n      if (Object.keys(expandedRows).length) return <ArrowMixed />;\n      return <ArrowRight />;\n    }, [expandedRows, isAllRowsExpanded]);\n\n    return (\n      <StyledFocusWithin>\n        <StyledSpan\n          role=\"button\"\n          tabIndex={0}\n          title={\n            isEmptyContent && firstFocuseableColumnHeaderId === 'expander'\n              ? `${noResultsMessage}. ${\n                  noResultsSecondaryMessage ? `${noResultsSecondaryMessage}.` : ''\n                } Toggle All Rows Expanded`\n              : 'Toggle All Rows Expanded'\n          }\n          onClick={onExpandedAllHandler}\n          onKeyDown={onKeyDownHandler}\n          data-testid={DATA_TESTID.DATA_TABLE_GLOBAL_EXPAND_CELL}\n          aria-expanded={isAllRowsExpanded}\n          style={{ width: '24px', height: '24px' }}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          {GlobalExpandIcon}\n        </StyledSpan>\n      </StyledFocusWithin>\n    );\n  },\n  Cell: ({ cell, row, isRowSelected, draggableProps }) => {\n    const dragAndDropRows = usePropsStore((state) => state.dragAndDropRows);\n    const expandedRows = usePropsStore((state) => state.expandedRows);\n    const onRowExpand = usePropsStore((state) => state.onRowExpand);\n    const disabledRows = usePropsStore((state) => state.disabledRows);\n    const getOwnerProps = usePropsStore((store) => store.get);\n    const getOwnerPropsArguments = useCallback(\n      () => ({\n        isGlobal: false,\n      }),\n      [],\n    );\n    const uniqueId = row.uid;\n\n    const isExpanded = !!expandedRows[uniqueId];\n\n    const shouldPrintCaret = useMemo(\n      () =>\n        (row.original.subRows?.length && row.depth === 0) || // only allows 1 level of expands\n        row.original.tableRowDetails ||\n        row.original.dimsumHeaderValue,\n      [row.depth, row.original.dimsumHeaderValue, row.original.subRows?.length, row.original.tableRowDetails],\n    );\n\n    const onRowExpandHandler = useCallback(\n      (e: React.MouseEvent | React.KeyboardEvent) => {\n        if (disabledRows[row.uid]) return;\n        e.stopPropagation(); // to prevent on row click\n        const newExpandedRows = { ...expandedRows };\n        if (newExpandedRows[uniqueId]) {\n          delete newExpandedRows[uniqueId];\n        } else {\n          newExpandedRows[uniqueId] = true;\n        }\n        onRowExpand(newExpandedRows, uniqueId);\n      },\n      [disabledRows, row.uid, expandedRows, uniqueId, onRowExpand],\n    );\n\n    const onKeyDownHandler = useCallback(\n      (e: React.KeyboardEvent) => {\n        if (['Enter', 'Space'].includes(e.code)) {\n          e.preventDefault();\n          onRowExpandHandler(e);\n        }\n      },\n      [onRowExpandHandler],\n    );\n\n    const isDragging = draggableProps && draggableProps.isDragging;\n    const isDragOverlay = dragAndDropRows && !draggableProps;\n\n    const indentStyle: React.CSSProperties = useMemo(\n      () => ({\n        marginLeft: `${row.depth * 32}px`,\n        marginRight: '12px',\n        paddingLeft: '3px',\n        paddingRight: '2px',\n        position: 'relative',\n        height: '100%',\n        display: 'flex',\n        alignItems: 'center',\n      }),\n      [row.depth],\n    );\n\n    const PureCaretIcon = useMemo(() => {\n      const Caret = isExpanded && !isDragging && !isDragOverlay ? ArrowDown : ArrowRight;\n      return (\n        <Caret\n          data-is-col-expanded={isExpanded}\n          data-role=\"row-expander-col\"\n          color={disabledRows[row.uid] ? ['neutral', '400'] : ['brand-primary', '600']}\n        />\n      );\n    }, [isExpanded, isDragging, isDragOverlay, disabledRows, row.uid]);\n\n    if (shouldPrintCaret)\n      return (\n        <StyledFocusWithin style={indentStyle}>\n          <StyledSpan\n            role=\"button\"\n            key={`${row.uid}-expand-button`}\n            title=\"Toggle Row Expanded\"\n            onClick={onRowExpandHandler}\n            onKeyDown={onKeyDownHandler}\n            innerRef={cell.ref}\n            tabIndex={isRowSelected && !disabledRows[row.uid] ? 0 : -1}\n            data-testid=\"data-table-row-expand-cell\"\n            aria-expanded={isExpanded}\n            disabled={disabledRows[row.uid]}\n            aria-disabled={disabledRows[row.uid]}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            {PureCaretIcon}\n          </StyledSpan>\n        </StyledFocusWithin>\n      );\n\n    if (row.depth !== 0)\n      return (\n        <span style={indentStyle}>\n          <ArrowShortReturn\n            size=\"s\"\n            data-testid={DATA_TESTID.DATA_TABLE_ICON_CHILD}\n            style={{ transform: 'rotate(90deg) scaleY(-1)' }}\n            color={['brand-primary', '600']}\n          />\n        </span>\n      );\n\n    return <div style={{ width: '36px' }} />;\n  },\n  textWrap: 'wrap',\n  canResize: false,\n  width: 25,\n  padding: 0,\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", "/* eslint-disable max-lines */\nimport React, { useMemo, useCallback, createRef } from 'react';\nimport { ArrowheadDown, ArrowheadRight, ArrowShortReturn, type SvgIconT } from '@elliemae/ds-icons';\nimport { styled, css } from '@elliemae/ds-system';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\nimport { StyledFocusWithin } from '../../../styled.js';\nimport { DATA_TESTID } from '../../../configs/constants.js';\nimport { usePropsStore } from '../../../configs/useStore/createInternalAndPropsContext.js';\nimport { DSDataTableName, DSDataTableSlots } from '../../../DSDataTableDefinitions.js';\n\nconst disabledCaret = css`\n  cursor: not-allowed;\n  pointer-events: none;\n`;\nconst StyledSpan = styled('span', { name: DSDataTableName, slot: DSDataTableSlots.EXPAND_CELL_CONTAINER })<{\n  disabled?: boolean;\n}>`\n  cursor: pointer;\n  box-sizing: border-box;\n  outline: none;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  ${({ disabled }) => disabled && disabledCaret}\n  z-index: 1; // to be clickable over right cell padding that covers the whole cell (hack to satisfy the design)\n`;\n\nconst ArrowDown: React.ComponentType<SvgIconT.Props> = ({ color = ['brand-primary', '600'], ...rest }) => (\n  <ArrowheadDown size=\"s\" color={color} data-testid={DATA_TESTID.DATA_TABLE_ICON_ARROW_DOWN} {...rest} />\n);\n\nconst ArrowMixed = () => (\n  <ArrowheadRight\n    size=\"s\"\n    color={['brand-primary', '600']}\n    data-testid={DATA_TESTID.DATA_TABLE_ICON_ARROW_MIXED}\n    style={{ transform: 'rotate(45deg)' }}\n  />\n);\n\nconst ArrowRight: React.ComponentType<SvgIconT.Props> = ({ color = ['brand-primary', '600'], ...rest }) => (\n  <ArrowheadRight size=\"s\" color={color} data-testid={DATA_TESTID.DATA_TABLE_ICON_ARROW_RIGHT} {...rest} />\n);\n\nexport const expandRowColumn: DSDataTableT.InternalColumn = {\n  // Build our expander column\n  id: 'expander', // Make sure it has an ID\n  accessor: 'expandRowColumn',\n  Header: () => {\n    const expandedRows = usePropsStore((state) => state.expandedRows);\n    const onRowExpand = usePropsStore((state) => state.onRowExpand);\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 isEmptyContent = usePropsStore((state) => state.isEmptyContent);\n    const firstFocuseableColumnHeaderId = usePropsStore((state) => state.firstFocuseableColumnHeaderId);\n    const getOwnerProps = usePropsStore((store) => store.get);\n    const getOwnerPropsArguments = useCallback(\n      () => ({\n        isGlobal: true,\n      }),\n      [],\n    );\n    const allExpandable = useMemo(() => {\n      const expandable: Record<string, boolean> = {};\n      allDataFlattened.forEach((row) => {\n        const isExpandableRow = row.original.subRows || row.original.tableRowDetails || row.original.dimsumHeaderValue;\n        if (!disabledRows[row.uid] && isExpandableRow) expandable[row.uid] = true;\n      });\n      return expandable;\n    }, [allDataFlattened, disabledRows]);\n\n    const isAllRowsExpanded = useMemo(\n      () => Object.keys(allExpandable).length === Object.keys(expandedRows).length,\n      [allExpandable, expandedRows],\n    );\n\n    const onExpandedAllHandler = useCallback(() => {\n      if (isAllRowsExpanded) onRowExpand({}, 'All');\n      else onRowExpand({ ...allExpandable }, 'All');\n    }, [allExpandable, isAllRowsExpanded, onRowExpand]);\n\n    const onKeyDownHandler = useCallback(\n      (e: React.KeyboardEvent) => {\n        if (['Enter', 'Space'].includes(e.code)) {\n          onExpandedAllHandler();\n          e.preventDefault();\n        }\n      },\n      [onExpandedAllHandler],\n    );\n\n    const GlobalExpandIcon = useMemo(() => {\n      if (isAllRowsExpanded) return <ArrowDown />;\n      if (Object.keys(expandedRows).length) return <ArrowMixed />;\n      return <ArrowRight />;\n    }, [expandedRows, isAllRowsExpanded]);\n\n    return (\n      <StyledFocusWithin>\n        <StyledSpan\n          role=\"button\"\n          tabIndex={0}\n          title={\n            isEmptyContent && firstFocuseableColumnHeaderId === 'expander'\n              ? `${noResultsMessage}. ${\n                  noResultsSecondaryMessage ? `${noResultsSecondaryMessage}.` : ''\n                } Toggle All Rows Expanded`\n              : 'Toggle All Rows Expanded'\n          }\n          onClick={onExpandedAllHandler}\n          onKeyDown={onKeyDownHandler}\n          data-testid={DATA_TESTID.DATA_TABLE_GLOBAL_EXPAND_CELL}\n          aria-expanded={isAllRowsExpanded}\n          style={{ width: '24px', height: '24px' }}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          {GlobalExpandIcon}\n        </StyledSpan>\n      </StyledFocusWithin>\n    );\n  },\n  Cell: ({ cell, row, isRowSelected, draggableProps }) => {\n    const dragAndDropRows = usePropsStore((state) => state.dragAndDropRows);\n    const expandedRows = usePropsStore((state) => state.expandedRows);\n    const onRowExpand = usePropsStore((state) => state.onRowExpand);\n    const disabledRows = usePropsStore((state) => state.disabledRows);\n    const getOwnerProps = usePropsStore((store) => store.get);\n    const getOwnerPropsArguments = useCallback(\n      () => ({\n        isGlobal: false,\n      }),\n      [],\n    );\n    const uniqueId = row.uid;\n\n    const isExpanded = !!expandedRows[uniqueId];\n\n    const shouldPrintCaret = useMemo(\n      () =>\n        (row.original.subRows?.length && row.depth === 0) || // only allows 1 level of expands\n        row.original.tableRowDetails ||\n        row.original.dimsumHeaderValue,\n      [row.depth, row.original.dimsumHeaderValue, row.original.subRows?.length, row.original.tableRowDetails],\n    );\n\n    const onRowExpandHandler = useCallback(\n      (e: React.MouseEvent | React.KeyboardEvent) => {\n        if (disabledRows[row.uid]) return;\n        e.stopPropagation(); // to prevent on row click\n        const newExpandedRows = { ...expandedRows };\n        if (newExpandedRows[uniqueId]) {\n          delete newExpandedRows[uniqueId];\n        } else {\n          newExpandedRows[uniqueId] = true;\n        }\n        onRowExpand(newExpandedRows, uniqueId);\n      },\n      [disabledRows, row.uid, expandedRows, uniqueId, onRowExpand],\n    );\n\n    const onKeyDownHandler = useCallback(\n      (e: React.KeyboardEvent) => {\n        if (['Enter', 'Space'].includes(e.code)) {\n          e.preventDefault();\n          onRowExpandHandler(e);\n        }\n      },\n      [onRowExpandHandler],\n    );\n\n    const isDragging = draggableProps && draggableProps.isDragging;\n    const isDragOverlay = dragAndDropRows && !draggableProps;\n\n    const indentStyle: React.CSSProperties = useMemo(\n      () => ({\n        marginLeft: `${row.depth * 32}px`,\n        marginRight: '12px',\n        paddingLeft: '3px',\n        paddingRight: '2px',\n        position: 'relative',\n        height: '100%',\n        display: 'flex',\n        alignItems: 'center',\n      }),\n      [row.depth],\n    );\n\n    const PureCaretIcon = useMemo(() => {\n      const Caret = isExpanded && !isDragging && !isDragOverlay ? ArrowDown : ArrowRight;\n      return (\n        <Caret\n          data-is-col-expanded={isExpanded}\n          data-role=\"row-expander-col\"\n          color={disabledRows[row.uid] ? ['neutral', '400'] : ['brand-primary', '600']}\n        />\n      );\n    }, [isExpanded, isDragging, isDragOverlay, disabledRows, row.uid]);\n\n    if (shouldPrintCaret)\n      return (\n        <StyledFocusWithin style={indentStyle}>\n          <StyledSpan\n            role=\"button\"\n            key={`${row.uid}-expand-button`}\n            title=\"Toggle Row Expanded\"\n            onClick={onRowExpandHandler}\n            onKeyDown={onKeyDownHandler}\n            innerRef={cell.ref}\n            tabIndex={isRowSelected && !disabledRows[row.uid] ? 0 : -1}\n            data-testid=\"data-table-row-expand-cell\"\n            aria-expanded={isExpanded}\n            disabled={disabledRows[row.uid]}\n            aria-disabled={disabledRows[row.uid]}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            {PureCaretIcon}\n          </StyledSpan>\n        </StyledFocusWithin>\n      );\n\n    if (row.depth !== 0)\n      return (\n        <span style={indentStyle}>\n          <ArrowShortReturn\n            size=\"s\"\n            data-testid={DATA_TESTID.DATA_TABLE_ICON_CHILD}\n            style={{ transform: 'rotate(90deg) scaleY(-1)' }}\n            color={['brand-primary', '600']}\n          />\n        </span>\n      );\n\n    return <div style={{ width: '36px' }} />;\n  },\n  textWrap: 'wrap',\n  canResize: false,\n  width: 25,\n  padding: 0,\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/ColumnSelectMultiple/ColumnSelectMultiple.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { useMemo, useRef, useCallback, createRef } from "react";
 import { DSControlledCheckbox } from "@elliemae/ds-form-checkbox";
 import { uid as genUid } from "uid";
 import { DATA_TESTID } from "../../../configs/constants.js";
-import { useInternalStore, usePropsStore } from "../../../configs/useStore/useStore.js";
+import { useInternalStore, usePropsStore } from "../../../configs/useStore/createInternalAndPropsContext.js";
 const multiSelectColumn = {
   // Build our multiSelecter column
   id: "multiSelecter",
@@ -105,10 +105,9 @@ const multiSelectColumn = {
       (e) => {
         setIsShiftPressed(false);
         isShiftPressedKeyRef.current = false;
-        lastSelected.current = -1;
         e.stopPropagation();
       },
-      [lastSelected, setIsShiftPressed]
+      [setIsShiftPressed]
     );
     const stopThePropagation = useCallback((e) => {
       if (e.shiftKey) {

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": "AAAA,YAAY,WAAW;ACyEjB;AAxEN,SAAgB,SAAS,QAAQ,aAAa,iBAAiB;AAC/D,SAAS,4BAA4B;AACrC,SAAS,OAAO,cAAc;AAE9B,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB,qBAAqB;AAEzC,MAAM,oBAAiD;AAAA;AAAA,EAE5D,IAAI;AAAA;AAAA,EACJ,QAAQ,MAAM;AACZ,UAAM,oBAAoB,cAAc,CAAC,UAAU,MAAM,iBAAiB;AAC1E,UAAM,YAAY,cAAc,CAAC,UAAU,MAAM,SAAS;AAC1D,UAAM,eAAe,cAAc,CAAC,UAAU,MAAM,YAAY;AAChE,UAAM,mBAAmB,cAAc,CAAC,UAAU,MAAM,gBAAgB;AACxE,UAAM,4BAA4B,cAAc,CAAC,UAAU,MAAM,yBAAyB;AAC1F,UAAM,mBAAmB,cAAc,CAAC,UAAU,MAAM,gBAAgB;AACxE,UAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,aAAa;AAClE,UAAM,iBAAiB,cAAc,CAAC,UAAU,MAAM,cAAc;AACpE,UAAM,gCAAgC,cAAc,CAAC,UAAU,MAAM,6BAA6B;AAClG,UAAM,aAAa,cAAc,CAAC,UAAU,MAAM,UAAU;AAC5D,UAAM,kBAAkB,cAAc,CAAC,UAAU,MAAM,eAAe;AAGtE,UAAM,cAAc,aAAa,CAAC;AAClC,UAAM,oBAAoB,cAAc;AAAA,MACtC,CAAC,KAAK,SAAS,YAAY,IAAI,GAAG,KAAK,CAAC,aAAa,IAAI,GAAG,IAAI,IAAI,KAAK;AAAA,MACzE;AAAA,IACF;AAEA,UAAM,qBAAqB;AAAA,MACzB,MACE,oBAAoB,KAAK,oBAAoB,cAAc,OAAO,CAAC,UAAU,CAAC,aAAa,MAAM,GAAG,CAAC,EAAE,SACnG,UACA,oBAAoB;AAAA,MAC1B,CAAC,mBAAmB,eAAe,YAAY;AAAA,IACjD;AAGA,UAAM,4BAA4B,QAAQ,MAAM,uBAAuB,MAAM,CAAC,kBAAkB,CAAC;AAEjG,UAAM,eAAuC,QAAQ,MAAM;AACzD,UAAI,CAAC,0BAA2B,QAAO,CAAC;AAExC,aAAO,iBAAiB,OAA+B,CAAC,oBAAoB,UAAU;AACpF,2BAAmB,MAAM,GAAG,IAAI,CAAC,aAAa,MAAM,GAAG;AACvD,eAAO;AAAA,MACT,GAAG,CAAC,CAAC;AAAA,IACP,GAAG,CAAC,2BAA2B,kBAAkB,YAAY,CAAC;AAE9D,UAAM,kBAAkB;AAAA,MACtB,CAAC,UAAmB,MAAkE;AACpF,0BAAkB,cAAc,OAAO,CAAC;AAAA,MAC1C;AAAA,MACA,CAAC,cAAc,iBAAiB;AAAA,IAClC;AAEA,UAAM,eAAe;AAAA,MACnB,MACE,iBACG,IAAI,CAAC,UAAU,uBAAuB,MAAM,GAAG,GAAG,aAAa,IAAI,UAAU,KAAK,EAAE,EAAE,EACtF,KAAK,GAAG;AAAA,MACb,CAAC,kBAAkB,UAAU;AAAA,IAC/B;AAEA,UAAM,iBAAiB,gBAAgB,QAAQ,QAAQ,gBAAgB,QAAQ;AAC/E,UAAM,QAAQ,iBAAiB,IAAI,iBAAiB;AACpD,UAAM,eAAe,gBAAgB,QAAQ,MAAM,gBAAgB,QAAQ,WAAW;AACtF,UAAM,MAAM,eAAe,gBAAgB,QAAQ,OAAO,gBAAgB,QAAQ,OAAO;AACzF,UAAM,sBAAsB,aAAa,MAAM,GAAG,EAAE,MAAM,OAAO,GAAG,EAAE,KAAK,GAAG;AAE9E,WACE;AAAA,MAAC;AAAA;AAAA,QACC,iBAAe;AAAA,QACf,eAAa,YAAY;AAAA,QACzB,cACE,kBAAkB,kCAAkC,kBAChD,GAAG,gBAAgB,KACjB,4BAA4B,GAAG,yBAAyB,MAAM,EAChE,8BACA;AAAA,QAEN,SAAS;AAAA,QACT,UAAU;AAAA;AAAA,IACZ;AAAA,EAEJ;AAAA,EACA,MAAM,CAAC,EAAE,MAAM,KAAK,eAAe,aAAa,OAAO,CAAC,EAAE,MAAM;AAC9D,UAAM,oBAAoB,cAAc,CAAC,UAAU,MAAM,iBAAiB;AAC1E,UAAM,YAAY,cAAc,CAAC,UAAU,MAAM,SAAS;AAC1D,UAAM,eAAe,cAAc,CAAC,UAAU,MAAM,YAAY;AAChE,UAAM,eAAe,cAAc,CAAC,UAAU,MAAM,YAAY;AAChE,UAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,aAAa;AAClE,UAAM,yBAAyB,cAAc,CAAC,UAAU,MAAM,sBAAsB;AAEpF,UAAM,iBAAiB,iBAAiB,CAAC,UAAU,MAAM,cAAc;AACvE,UAAM,oBAAoB,iBAAiB,CAAC,UAAU,MAAM,iBAAiB;AAE7E,UAAM,EAAE,IAAI,IAAI;AAChB,UAAM,gBAAgB,YAAY,GAAG,KAAK;AAE1C,UAAM,uBAAuB,OAAO,KAAK;AACzC,UAAM,kBAAkB;AAAA,MACtB,CAAC,UAAmB,MAAkE;AACpF,cAAM,eAAe,EAAE,GAAG,WAAW,CAAC,GAAG,GAAG,SAAS;AACrD,YAAI,CAAC,SAAU,QAAO,aAAa,GAAG;AACtC,cAAM,MAAM,OAAO,SAAS,KAAK,EAAE;AACnC,aAAK,kBAAkB,qBAAqB,YAAY,aAAa,UAAU,IAAI;AACjF,mBAAS,IAAI,KAAK,IAAI,aAAa,SAAS,GAAG,GAAG,KAAK,KAAK,IAAI,aAAa,SAAS,GAAG,GAAG,KAAK,GAAG;AAClG,kBAAM,mBAAmB,cAAc,CAAC,GAAG;AAC3C,gBAAI,CAAC,OAAO,KAAK,YAAY,EAAE,SAAS,gBAAgB;AACtD,2BAAa,gBAAgB,IAAI,aAAa,aAAa,OAAO;AACpE,gBAAI,CAAC,aAAa,gBAAgB,EAAG,QAAO,aAAa,gBAAgB;AAAA,UAC3E;AAAA,QACF;AACA,qBAAa,UAAU;AACvB,0BAAkB,cAAc,KAAK,CAAC;AAAA,MACxC;AAAA,MACA,CAAC,cAAc,eAAe,gBAAgB,cAAc,mBAAmB,WAAW,GAAG;AAAA,IAC/F;AAEA,UAAM,mBAA+C;AAAA,MACnD,CAAC,MAAM;AACL,0BAAkB,EAAE,SAAS,WAAW,EAAE,QAAQ;AAClD,UAAE,gBAAgB;AAAA,MACpB;AAAA,MACA,CAAC,iBAAiB;AAAA,IACpB;AAEA,UAAM,iBAA6C;AAAA,MACjD,CAAC,MAAM;AACL,0BAAkB,KAAK;AACvB,6BAAqB,UAAU;AAC/B,UAAE,gBAAgB;AAAA,MACpB;AAAA,MACA,CAAC,iBAAiB;AAAA,IACpB;AAEA,UAAM,qBAAqB,YAAY,CAAC,MAA8C;AACpF,UAAI,EAAE,UAAU;AACd,6BAAqB,UAAU;AAAA,MACjC;AACA,QAAE,gBAAgB;AAAA,IACpB,GAAG,CAAC,CAAC;AAEL,WACE,oBAAC,SAAI,MAAK,gBAAe,SAAS,oBAAoB,WAAW,kBAAkB,SAAS,gBAC1F;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,uBAAuB,GAAG,IAAI,UAAU;AAAA,QAC5C,eAAa,YAAY;AAAA,QACzB,cAAW;AAAA,QACX,SAAS;AAAA,QACT,UAAU;AAAA,QACV,UAAU,aAAa,IAAI,GAAG;AAAA,QAC9B,UAAU,KAAK;AAAA,QACf,UAAU,gBAAgB,IAAI;AAAA,QAC7B,GAAG;AAAA;AAAA,IACN,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/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;" : ""}