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

@elliemae/ds-data-table 3.50.1-next.8 → 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/cjs/parts/DropIndicator.js CHANGED Viewed

@@ -34,10 +34,10 @@ module.exports = __toCommonJS(DropIndicator_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_system = require("@elliemae/ds-system");
-var import_zIndexInternalConfig = require("../configs/zIndexInternalConfig.js");
-var import_constants = require("../configs/constants.js");
 var import_DSDataTableDefinitions = require("../DSDataTableDefinitions.js");
-var import_useStore = require("../configs/useStore/useStore.js");
+var import_constants = require("../configs/constants.js");
+var import_createInternalAndPropsContext = require("../configs/useStore/createInternalAndPropsContext.js");
+var import_zIndexInternalConfig = require("../configs/zIndexInternalConfig.js");
 const getPositionStyles = ({ dropIndicatorPosition, vertical }) => {
   if (vertical) {
     return `
@@ -74,7 +74,7 @@ const StyledIndicator = (0, import_ds_system.styled)("div", {
 const CircleIndicator = (style, isDropValid) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { height: "6", width: "6", style, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "3", cy: "3", r: "3", strokeWidth: "0", fill: isDropValid ? "#1E79C2" : "#C64252" }) });
 const DropIndicator = (props) => {
   const { vertical, dropIndicatorPosition, isLast, isDropValid } = props;
-  const getOwnerProps = (0, import_useStore.usePropsStore)((store) => store.get);
+  const getOwnerProps = (0, import_createInternalAndPropsContext.usePropsStore)((store) => store.get);
   if (dropIndicatorPosition === false || dropIndicatorPosition === import_constants.DropIndicatorPosition.None || dropIndicatorPosition === import_constants.DropIndicatorPosition.Inside)
     return null;
   const safeDropIndicatorPosition = isLast ? import_constants.DropIndicatorPosition.Before : dropIndicatorPosition;

package/dist/cjs/parts/DropIndicator.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/DropIndicator.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { ZIndexDataTable } from '../configs/zIndexInternalConfig.js';\nimport { DropIndicatorPosition } from '../configs/constants.js';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\nimport { DSDataTableName, DSDataTableSlots } from '../DSDataTableDefinitions.js';\nimport { usePropsStore } from '../configs/useStore/useStore.js';\n\ninterface DropIndicatorProps {\n  vertical: boolean;\n  dropIndicatorPosition: false | DSDataTableT.DropIndicatorPositionValues;\n  isDropValid: boolean;\n  isLast?: boolean;\n}\n\nconst getPositionStyles = ({ dropIndicatorPosition, vertical }: DropIndicatorProps) => {\n  if (vertical) {\n    return `\n      left: ${dropIndicatorPosition === DropIndicatorPosition.Before ? '0' : 'unset'};\n      right: ${dropIndicatorPosition === DropIndicatorPosition.After ? '0' : 'unset'};\n    `;\n  }\n  return `\n      top: ${dropIndicatorPosition === DropIndicatorPosition.Before ? '0' : 'unset'};\n      bottom: ${dropIndicatorPosition === DropIndicatorPosition.After ? '0' : 'unset'};\n    `;\n};\n\nconst getCircleStyles = ({ dropIndicatorPosition, vertical }: DropIndicatorProps) => ({\n  position: 'absolute',\n  zIndex: ZIndexDataTable.DROP_INDICATOR,\n  top: vertical || dropIndicatorPosition === DropIndicatorPosition.After ? 'unset' : '-2px',\n  bottom: vertical || dropIndicatorPosition === DropIndicatorPosition.Before ? 'unset' : '-2px',\n  left: !vertical || dropIndicatorPosition === DropIndicatorPosition.After ? 'unset' : '-2px',\n  right: !vertical || dropIndicatorPosition === DropIndicatorPosition.Before ? 'unset' : '-2px',\n  opacity: 1,\n});\n\nconst StyledIndicator = styled('div', {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.DROP_INDICATOR,\n})<DropIndicatorProps>`\n  position: absolute;\n  ${getPositionStyles}\n  box-sizing: border-box;\n  width: ${(props) => (props.vertical ? '2px' : '100%')};\n  height: ${(props) => (props.vertical ? '100%' : '2px')};\n  background-color: ${({ isDropValid, theme }) => (isDropValid ? theme.colors.brand[600] : theme.colors.danger[900])};\n  z-index: ${ZIndexDataTable.DROP_INDICATOR};\n`;\n\nconst CircleIndicator = (style: Record<string, unknown>, isDropValid: boolean) => (\n  <svg height=\"6\" width=\"6\" style={style}>\n    <circle cx=\"3\" cy=\"3\" r=\"3\" strokeWidth=\"0\" fill={isDropValid ? '#1E79C2' : '#C64252'} />\n  </svg>\n);\n\nconst DropIndicator: React.ComponentType<DropIndicatorProps> = (props) => {\n  const { vertical, dropIndicatorPosition, isLast, isDropValid } = props;\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  if (\n    dropIndicatorPosition === false ||\n    dropIndicatorPosition === DropIndicatorPosition.None ||\n    dropIndicatorPosition === DropIndicatorPosition.Inside\n  )\n    return null;\n\n  const safeDropIndicatorPosition = isLast ? DropIndicatorPosition.Before : dropIndicatorPosition;\n\n  return (\n    <>\n      {CircleIndicator(getCircleStyles({ ...props, dropIndicatorPosition: safeDropIndicatorPosition }), isDropValid)}\n      <StyledIndicator\n        vertical={vertical}\n        dropIndicatorPosition={safeDropIndicatorPosition}\n        isDropValid={isDropValid}\n        getOwnerProps={getOwnerProps}\n      />\n    </>\n  );\n};\n\nexport { DropIndicator };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqDnB;AApDJ,uBAAuB;AACvB,kCAAgC;AAChC,uBAAsC;AAEtC,oCAAkD;AAClD,sBAA8B;AAS9B,MAAM,oBAAoB,CAAC,EAAE,uBAAuB,SAAS,MAA0B;AACrF,MAAI,UAAU;AACZ,WAAO;AAAA,cACG,0BAA0B,uCAAsB,SAAS,MAAM,OAAO;AAAA,eACrE,0BAA0B,uCAAsB,QAAQ,MAAM,OAAO;AAAA;AAAA,EAElF;AACA,SAAO;AAAA,aACI,0BAA0B,uCAAsB,SAAS,MAAM,OAAO;AAAA,gBACnE,0BAA0B,uCAAsB,QAAQ,MAAM,OAAO;AAAA;AAErF;AAEA,MAAM,kBAAkB,CAAC,EAAE,uBAAuB,SAAS,OAA2B;AAAA,EACpF,UAAU;AAAA,EACV,QAAQ,4CAAgB;AAAA,EACxB,KAAK,YAAY,0BAA0B,uCAAsB,QAAQ,UAAU;AAAA,EACnF,QAAQ,YAAY,0BAA0B,uCAAsB,SAAS,UAAU;AAAA,EACvF,MAAM,CAAC,YAAY,0BAA0B,uCAAsB,QAAQ,UAAU;AAAA,EACrF,OAAO,CAAC,YAAY,0BAA0B,uCAAsB,SAAS,UAAU;AAAA,EACvF,SAAS;AACX;AAEA,MAAM,sBAAkB,yBAAO,OAAO;AAAA,EACpC,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AAAA;AAAA,IAEG,iBAAiB;AAAA;AAAA,WAEV,CAAC,UAAW,MAAM,WAAW,QAAQ,MAAO;AAAA,YAC3C,CAAC,UAAW,MAAM,WAAW,SAAS,KAAM;AAAA,sBAClC,CAAC,EAAE,aAAa,MAAM,MAAO,cAAc,MAAM,OAAO,MAAM,GAAG,IAAI,MAAM,OAAO,OAAO,GAAG,CAAE;AAAA,aACvG,4CAAgB,cAAc;AAAA;AAG3C,MAAM,kBAAkB,CAAC,OAAgC,gBACvD,4CAAC,SAAI,QAAO,KAAI,OAAM,KAAI,OACxB,sDAAC,YAAO,IAAG,KAAI,IAAG,KAAI,GAAE,KAAI,aAAY,KAAI,MAAM,cAAc,YAAY,WAAW,GACzF;AAGF,MAAM,gBAAyD,CAAC,UAAU;AACxE,QAAM,EAAE,UAAU,uBAAuB,QAAQ,YAAY,IAAI;AACjE,QAAM,oBAAgB,+BAAc,CAAC,UAAU,MAAM,GAAG;AAExD,MACE,0BAA0B,SAC1B,0BAA0B,uCAAsB,QAChD,0BAA0B,uCAAsB;AAEhD,WAAO;AAET,QAAM,4BAA4B,SAAS,uCAAsB,SAAS;AAE1E,SACE,4EACG;AAAA,oBAAgB,gBAAgB,EAAE,GAAG,OAAO,uBAAuB,0BAA0B,CAAC,GAAG,WAAW;AAAA,IAC7G;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,uBAAuB;AAAA,QACvB;AAAA,QACA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport { DSDataTableName, DSDataTableSlots } from '../DSDataTableDefinitions.js';\nimport { DropIndicatorPosition } from '../configs/constants.js';\nimport { usePropsStore } from '../configs/useStore/createInternalAndPropsContext.js';\nimport { ZIndexDataTable } from '../configs/zIndexInternalConfig.js';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\n\ninterface DropIndicatorProps {\n  vertical: boolean;\n  dropIndicatorPosition: false | DSDataTableT.DropIndicatorPositionValues;\n  isDropValid: boolean;\n  isLast?: boolean;\n}\n\nconst getPositionStyles = ({ dropIndicatorPosition, vertical }: DropIndicatorProps) => {\n  if (vertical) {\n    return `\n      left: ${dropIndicatorPosition === DropIndicatorPosition.Before ? '0' : 'unset'};\n      right: ${dropIndicatorPosition === DropIndicatorPosition.After ? '0' : 'unset'};\n    `;\n  }\n  return `\n      top: ${dropIndicatorPosition === DropIndicatorPosition.Before ? '0' : 'unset'};\n      bottom: ${dropIndicatorPosition === DropIndicatorPosition.After ? '0' : 'unset'};\n    `;\n};\n\nconst getCircleStyles = ({ dropIndicatorPosition, vertical }: DropIndicatorProps) => ({\n  position: 'absolute',\n  zIndex: ZIndexDataTable.DROP_INDICATOR,\n  top: vertical || dropIndicatorPosition === DropIndicatorPosition.After ? 'unset' : '-2px',\n  bottom: vertical || dropIndicatorPosition === DropIndicatorPosition.Before ? 'unset' : '-2px',\n  left: !vertical || dropIndicatorPosition === DropIndicatorPosition.After ? 'unset' : '-2px',\n  right: !vertical || dropIndicatorPosition === DropIndicatorPosition.Before ? 'unset' : '-2px',\n  opacity: 1,\n});\n\nconst StyledIndicator = styled('div', {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.DROP_INDICATOR,\n})<DropIndicatorProps>`\n  position: absolute;\n  ${getPositionStyles}\n  box-sizing: border-box;\n  width: ${(props) => (props.vertical ? '2px' : '100%')};\n  height: ${(props) => (props.vertical ? '100%' : '2px')};\n  background-color: ${({ isDropValid, theme }) => (isDropValid ? theme.colors.brand[600] : theme.colors.danger[900])};\n  z-index: ${ZIndexDataTable.DROP_INDICATOR};\n`;\n\nconst CircleIndicator = (style: Record<string, unknown>, isDropValid: boolean) => (\n  <svg height=\"6\" width=\"6\" style={style}>\n    <circle cx=\"3\" cy=\"3\" r=\"3\" strokeWidth=\"0\" fill={isDropValid ? '#1E79C2' : '#C64252'} />\n  </svg>\n);\n\nconst DropIndicator: React.ComponentType<DropIndicatorProps> = (props) => {\n  const { vertical, dropIndicatorPosition, isLast, isDropValid } = props;\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  if (\n    dropIndicatorPosition === false ||\n    dropIndicatorPosition === DropIndicatorPosition.None ||\n    dropIndicatorPosition === DropIndicatorPosition.Inside\n  )\n    return null;\n\n  const safeDropIndicatorPosition = isLast ? DropIndicatorPosition.Before : dropIndicatorPosition;\n\n  return (\n    <>\n      {CircleIndicator(getCircleStyles({ ...props, dropIndicatorPosition: safeDropIndicatorPosition }), isDropValid)}\n      <StyledIndicator\n        vertical={vertical}\n        dropIndicatorPosition={safeDropIndicatorPosition}\n        isDropValid={isDropValid}\n        getOwnerProps={getOwnerProps}\n      />\n    </>\n  );\n};\n\nexport { DropIndicator };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqDnB;AArDJ,uBAAuB;AAEvB,oCAAkD;AAClD,uBAAsC;AACtC,2CAA8B;AAC9B,kCAAgC;AAUhC,MAAM,oBAAoB,CAAC,EAAE,uBAAuB,SAAS,MAA0B;AACrF,MAAI,UAAU;AACZ,WAAO;AAAA,cACG,0BAA0B,uCAAsB,SAAS,MAAM,OAAO;AAAA,eACrE,0BAA0B,uCAAsB,QAAQ,MAAM,OAAO;AAAA;AAAA,EAElF;AACA,SAAO;AAAA,aACI,0BAA0B,uCAAsB,SAAS,MAAM,OAAO;AAAA,gBACnE,0BAA0B,uCAAsB,QAAQ,MAAM,OAAO;AAAA;AAErF;AAEA,MAAM,kBAAkB,CAAC,EAAE,uBAAuB,SAAS,OAA2B;AAAA,EACpF,UAAU;AAAA,EACV,QAAQ,4CAAgB;AAAA,EACxB,KAAK,YAAY,0BAA0B,uCAAsB,QAAQ,UAAU;AAAA,EACnF,QAAQ,YAAY,0BAA0B,uCAAsB,SAAS,UAAU;AAAA,EACvF,MAAM,CAAC,YAAY,0BAA0B,uCAAsB,QAAQ,UAAU;AAAA,EACrF,OAAO,CAAC,YAAY,0BAA0B,uCAAsB,SAAS,UAAU;AAAA,EACvF,SAAS;AACX;AAEA,MAAM,sBAAkB,yBAAO,OAAO;AAAA,EACpC,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AAAA;AAAA,IAEG,iBAAiB;AAAA;AAAA,WAEV,CAAC,UAAW,MAAM,WAAW,QAAQ,MAAO;AAAA,YAC3C,CAAC,UAAW,MAAM,WAAW,SAAS,KAAM;AAAA,sBAClC,CAAC,EAAE,aAAa,MAAM,MAAO,cAAc,MAAM,OAAO,MAAM,GAAG,IAAI,MAAM,OAAO,OAAO,GAAG,CAAE;AAAA,aACvG,4CAAgB,cAAc;AAAA;AAG3C,MAAM,kBAAkB,CAAC,OAAgC,gBACvD,4CAAC,SAAI,QAAO,KAAI,OAAM,KAAI,OACxB,sDAAC,YAAO,IAAG,KAAI,IAAG,KAAI,GAAE,KAAI,aAAY,KAAI,MAAM,cAAc,YAAY,WAAW,GACzF;AAGF,MAAM,gBAAyD,CAAC,UAAU;AACxE,QAAM,EAAE,UAAU,uBAAuB,QAAQ,YAAY,IAAI;AACjE,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,GAAG;AAExD,MACE,0BAA0B,SAC1B,0BAA0B,uCAAsB,QAChD,0BAA0B,uCAAsB;AAEhD,WAAO;AAET,QAAM,4BAA4B,SAAS,uCAAsB,SAAS;AAE1E,SACE,4EACG;AAAA,oBAAgB,gBAAgB,EAAE,GAAG,OAAO,uBAAuB,0BAA0B,CAAC,GAAG,WAAW;AAAA,IAC7G;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,uBAAuB;AAAA,QACvB;AAAA,QACA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/cjs/parts/EmptyContent.js CHANGED Viewed

@@ -33,12 +33,12 @@ __export(EmptyContent_exports, {
 module.exports = __toCommonJS(EmptyContent_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = __toESM(require("react"));
+var import_ds_button_v2 = require("@elliemae/ds-button-v2");
 var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_icons = require("@elliemae/ds-icons");
 var import_ds_system = require("@elliemae/ds-system");
-var import_ds_button_v2 = require("@elliemae/ds-button-v2");
-var import_useStore = require("../configs/useStore/useStore.js");
+var import_react = __toESM(require("react"));
+var import_createInternalAndPropsContext = require("../configs/useStore/createInternalAndPropsContext.js");
 var import_DSDataTableDefinitions = require("../DSDataTableDefinitions.js");
 const EmptyStateWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_DSDataTableDefinitions.DSDataTableName, slot: import_DSDataTableDefinitions.DSDataTableSlots.EMPTY_STATE_WRAPPER })`
   position: sticky;
@@ -80,13 +80,13 @@ const CenterContentFlexWrapper = (0, import_ds_system.styled)("div", {
   align-items: center;
 `;
 const EmptyContent = () => {
-  const noResultsPlaceholder = (0, import_useStore.usePropsStore)((state) => state.noResultsPlaceholder);
-  const noResultsMessage = (0, import_useStore.usePropsStore)((state) => state.noResultsMessage);
-  const noResultsSecondaryMessage = (0, import_useStore.usePropsStore)((state) => state.noResultsSecondaryMessage);
-  const noResultsButtonLabel = (0, import_useStore.usePropsStore)((state) => state.noResultsButtonLabel);
-  const onNoResultsButtonClick = (0, import_useStore.usePropsStore)((state) => state.onNoResultsButtonClick);
-  const virtualListRef = (0, import_useStore.usePropsStore)((state) => state.virtualListRef);
-  const getOwnerProps = (0, import_useStore.usePropsStore)((store) => store.get);
+  const noResultsPlaceholder = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.noResultsPlaceholder);
+  const noResultsMessage = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.noResultsMessage);
+  const noResultsSecondaryMessage = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.noResultsSecondaryMessage);
+  const noResultsButtonLabel = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.noResultsButtonLabel);
+  const onNoResultsButtonClick = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.onNoResultsButtonClick);
+  const virtualListRef = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.virtualListRef);
+  const getOwnerProps = (0, import_createInternalAndPropsContext.usePropsStore)((store) => store.get);
   if (import_react.default.isValidElement(noResultsPlaceholder))
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CenterContentFlexWrapper, { width: "100%", role: "row", getOwnerProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       EmptyStateWrapper,

package/dist/cjs/parts/EmptyContent.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/EmptyContent.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { WarningTriangle } from '@elliemae/ds-icons';\nimport { __UNSAFE_SPACE_TO_DIMSUM, toMobile, styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { usePropsStore } from '../configs/useStore/useStore.js';\nimport { DSDataTableName, DSDataTableSlots } from '../DSDataTableDefinitions.js';\n\nconst EmptyStateWrapper = styled(Grid, { name: DSDataTableName, slot: DSDataTableSlots.EMPTY_STATE_WRAPPER })`\n  position: sticky;\n  height: fit-content;\n  top: 0;\n  left: 0;\n`;\nconst Icon = styled(WarningTriangle, { name: DSDataTableName, slot: DSDataTableSlots.WARNING_ICON })`\n  fill: ${(props) => props.theme.colors.neutral[300]};\n  color: ${(props) => props.theme.colors.neutral[300]};\n  justify-self: center;\n`;\nconst PrimaryMessage = styled('p', { name: DSDataTableName, slot: DSDataTableSlots.EMPTY_PRIMARY_MESSAGE })`\n  text-align: center;\n  font-weight: bold;\n  font-size: ${(props) => toMobile(props.theme.fontSizes.value[400])};\n  color: ${(props) => props.theme.colors.neutral[600]};\n  margin-top: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.s)};\n  margin-bottom: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs)};\n`;\nconst SecondaryMessage = styled('p', { name: DSDataTableName, slot: DSDataTableSlots.EMPTY_SECONDARY_MESSAGE })`\n  text-align: center;\n  font-size: ${(props) => toMobile(props.theme.fontSizes.value[400])}; /* 13px */\n  color: ${(props) => props.theme.colors.neutral[500]};\n  margin: 0;\n`;\nconst Button = styled(DSButtonV2, { name: DSDataTableName, slot: DSDataTableSlots.EMPTY_BUTTON })`\n  margin-top: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m)};\n  justify-self: center;\n  width: fit-content;\n`;\nconst CenterContentFlexWrapper = styled('div', {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.CENTER_CONTENT_FLEX_WRAPPER,\n})<{ width: string }>`\n  width: ${({ width }) => width};\n  height: 100%;\n  display: flex;\n  align-items: center;\n`;\n\nconst EmptyContent: React.ComponentType = () => {\n  const noResultsPlaceholder = usePropsStore((state) => state.noResultsPlaceholder);\n  const noResultsMessage = usePropsStore((state) => state.noResultsMessage);\n  const noResultsSecondaryMessage = usePropsStore((state) => state.noResultsSecondaryMessage);\n  const noResultsButtonLabel = usePropsStore((state) => state.noResultsButtonLabel);\n  const onNoResultsButtonClick = usePropsStore((state) => state.onNoResultsButtonClick);\n  const virtualListRef = usePropsStore((state) => state.virtualListRef);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  if (React.isValidElement(noResultsPlaceholder))\n    return (\n      <CenterContentFlexWrapper width=\"100%\" role=\"row\" getOwnerProps={getOwnerProps}>\n        <EmptyStateWrapper\n          width={virtualListRef.current?.clientWidth}\n          justifyContent=\"center\"\n          role=\"cell\"\n          aria-live=\"assertive\"\n          getOwnerProps={getOwnerProps}\n        >\n          {noResultsPlaceholder}\n        </EmptyStateWrapper>\n      </CenterContentFlexWrapper>\n    );\n\n  return (\n    <CenterContentFlexWrapper width=\"100%\" role=\"row\" getOwnerProps={getOwnerProps}>\n      <EmptyStateWrapper\n        width={virtualListRef.current?.clientWidth}\n        justifyContent=\"center\"\n        role=\"cell\"\n        aria-live=\"assertive\"\n        getOwnerProps={getOwnerProps}\n      >\n        <Icon size=\"xxl\" />\n        <PrimaryMessage getOwnerProps={getOwnerProps}>{noResultsMessage}</PrimaryMessage>\n        {noResultsSecondaryMessage ? (\n          <SecondaryMessage getOwnerProps={getOwnerProps}>{noResultsSecondaryMessage}</SecondaryMessage>\n        ) : null}\n        {noResultsButtonLabel && onNoResultsButtonClick ? (\n          <Button buttonType=\"outline\" onClick={onNoResultsButtonClick}>\n            {noResultsButtonLabel}\n          </Button>\n        ) : null}\n      </EmptyStateWrapper>\n    </CenterContentFlexWrapper>\n  );\n};\n\nexport { EmptyContent };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { WarningTriangle } from '@elliemae/ds-icons';\nimport { __UNSAFE_SPACE_TO_DIMSUM, styled, toMobile } from '@elliemae/ds-system';\nimport React from 'react';\nimport { usePropsStore } from '../configs/useStore/createInternalAndPropsContext.js';\nimport { DSDataTableName, DSDataTableSlots } from '../DSDataTableDefinitions.js';\n\nconst EmptyStateWrapper = styled(Grid, { name: DSDataTableName, slot: DSDataTableSlots.EMPTY_STATE_WRAPPER })`\n  position: sticky;\n  height: fit-content;\n  top: 0;\n  left: 0;\n`;\nconst Icon = styled(WarningTriangle, { name: DSDataTableName, slot: DSDataTableSlots.WARNING_ICON })`\n  fill: ${(props) => props.theme.colors.neutral[300]};\n  color: ${(props) => props.theme.colors.neutral[300]};\n  justify-self: center;\n`;\nconst PrimaryMessage = styled('p', { name: DSDataTableName, slot: DSDataTableSlots.EMPTY_PRIMARY_MESSAGE })`\n  text-align: center;\n  font-weight: bold;\n  font-size: ${(props) => toMobile(props.theme.fontSizes.value[400])};\n  color: ${(props) => props.theme.colors.neutral[600]};\n  margin-top: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.s)};\n  margin-bottom: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs)};\n`;\nconst SecondaryMessage = styled('p', { name: DSDataTableName, slot: DSDataTableSlots.EMPTY_SECONDARY_MESSAGE })`\n  text-align: center;\n  font-size: ${(props) => toMobile(props.theme.fontSizes.value[400])}; /* 13px */\n  color: ${(props) => props.theme.colors.neutral[500]};\n  margin: 0;\n`;\nconst Button = styled(DSButtonV2, { name: DSDataTableName, slot: DSDataTableSlots.EMPTY_BUTTON })`\n  margin-top: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m)};\n  justify-self: center;\n  width: fit-content;\n`;\nconst CenterContentFlexWrapper = styled('div', {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.CENTER_CONTENT_FLEX_WRAPPER,\n})<{ width: string }>`\n  width: ${({ width }) => width};\n  height: 100%;\n  display: flex;\n  align-items: center;\n`;\n\nconst EmptyContent: React.ComponentType = () => {\n  const noResultsPlaceholder = usePropsStore((state) => state.noResultsPlaceholder);\n  const noResultsMessage = usePropsStore((state) => state.noResultsMessage);\n  const noResultsSecondaryMessage = usePropsStore((state) => state.noResultsSecondaryMessage);\n  const noResultsButtonLabel = usePropsStore((state) => state.noResultsButtonLabel);\n  const onNoResultsButtonClick = usePropsStore((state) => state.onNoResultsButtonClick);\n  const virtualListRef = usePropsStore((state) => state.virtualListRef);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  if (React.isValidElement(noResultsPlaceholder))\n    return (\n      <CenterContentFlexWrapper width=\"100%\" role=\"row\" getOwnerProps={getOwnerProps}>\n        <EmptyStateWrapper\n          width={virtualListRef.current?.clientWidth}\n          justifyContent=\"center\"\n          role=\"cell\"\n          aria-live=\"assertive\"\n          getOwnerProps={getOwnerProps}\n        >\n          {noResultsPlaceholder}\n        </EmptyStateWrapper>\n      </CenterContentFlexWrapper>\n    );\n\n  return (\n    <CenterContentFlexWrapper width=\"100%\" role=\"row\" getOwnerProps={getOwnerProps}>\n      <EmptyStateWrapper\n        width={virtualListRef.current?.clientWidth}\n        justifyContent=\"center\"\n        role=\"cell\"\n        aria-live=\"assertive\"\n        getOwnerProps={getOwnerProps}\n      >\n        <Icon size=\"xxl\" />\n        <PrimaryMessage getOwnerProps={getOwnerProps}>{noResultsMessage}</PrimaryMessage>\n        {noResultsSecondaryMessage ? (\n          <SecondaryMessage getOwnerProps={getOwnerProps}>{noResultsSecondaryMessage}</SecondaryMessage>\n        ) : null}\n        {noResultsButtonLabel && onNoResultsButtonClick ? (\n          <Button buttonType=\"outline\" onClick={onNoResultsButtonClick}>\n            {noResultsButtonLabel}\n          </Button>\n        ) : null}\n      </EmptyStateWrapper>\n    </CenterContentFlexWrapper>\n  );\n};\n\nexport { EmptyContent };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["React"]
 }

package/dist/cjs/parts/FilterBar/DeprecatedDropdown.js CHANGED Viewed

@@ -61,7 +61,12 @@ const DeprecatedDropdown = ({
           if (["Enter", "Space"].includes(e.code)) removeAllFilters();
         }
       },
-      ...filterBarProps?.extraOptions || []
+      ...(filterBarProps?.extraOptions || []).map((option) => ({
+        ...option,
+        onKeyDown: (e) => {
+          if (["Enter", "Space"].includes(e.code)) option?.onClick?.(e);
+        }
+      }))
     ],
     triggerComponent: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_ds_button_v2.DSButtonV2,

package/dist/cjs/parts/FilterBar/DeprecatedDropdown.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/FilterBar/DeprecatedDropdown.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-nocheck This is using the deprecated dropdown menu\nimport React from 'react';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { DSDropdownMenu } from '@elliemae/ds-dropdownmenu';\nimport { DATA_TESTID } from '../../configs/index.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\n\ninterface DeprecatedDropdownProps {\n  finalIsOpen: boolean;\n  onFilterBarClose: () => void;\n  onFilterBarOnClickOutside: () => void;\n  removeAllFilters: () => void;\n  filterBarProps: DSDataTableT.Props['filterBarProps'];\n  dropdownMenuRef: React.MutableRefObject<HTMLButtonElement | null>;\n  onTriggerClick: () => void;\n}\n\nexport const DeprecatedDropdown: React.ComponentType<DeprecatedDropdownProps> = ({\n  finalIsOpen,\n  onFilterBarClose,\n  onFilterBarOnClickOutside,\n  removeAllFilters,\n  filterBarProps,\n  dropdownMenuRef,\n  onTriggerClick,\n}) => (\n  <DSDropdownMenu\n    preventOverflow=\"scrollParent\"\n    isOpen={finalIsOpen}\n    onClose={onFilterBarClose}\n    onClickOutsideMenu={onFilterBarOnClickOutside}\n    options={[\n      {\n        id: '__internal__option__clear__filters',\n        label: 'Clear Filters',\n        onClick: removeAllFilters,\n        onKeyDown: (e: React.KeyboardEvent) => {\n          if (['Enter', 'Space'].includes(e.code)) removeAllFilters();\n        },\n      },\n      ...(filterBarProps?.extraOptions || []),\n    ]}\n    triggerComponent={\n      <DSButtonV2\n        data-testid={DATA_TESTID.DATA_TABLE_FILTER_BAR_DD_MENU_BUTTON}\n        buttonType=\"icon\"\n        innerRef={dropdownMenuRef}\n        onClick={onTriggerClick}\n        aria-label=\"Filter bar addon\"\n        style={{ marginLeft: 'auto' }}\n      >\n        <MoreOptionsVert />\n      </DSButtonV2>\n    }\n  />\n);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqDf;AAlDR,0BAA2B;AAC3B,sBAAgC;AAChC,6BAA+B;AAC/B,qBAA4B;AAarB,MAAM,qBAAmE,CAAC;AAAA,EAC/E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE;AAAA,EAAC;AAAA;AAAA,IACC,iBAAgB;AAAA,IAChB,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,oBAAoB;AAAA,IACpB,SAAS;AAAA,MACP;AAAA,QACE,IAAI;AAAA,QACJ,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAW,CAAC,MAA2B;AACrC,cAAI,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,EAAG,kBAAiB;AAAA,QAC5D;AAAA,MACF;AAAA,MACA,GAAI,gBAAgB,gBAAgB,CAAC;AAAA,IACvC;AAAA,IACA,kBACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAa,2BAAY;AAAA,QACzB,YAAW;AAAA,QACX,UAAU;AAAA,QACV,SAAS;AAAA,QACT,cAAW;AAAA,QACX,OAAO,EAAE,YAAY,OAAO;AAAA,QAE5B,sDAAC,mCAAgB;AAAA;AAAA,IACnB;AAAA;AAEJ;",
+  "sourcesContent": ["// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-nocheck This is using the deprecated dropdown menu\nimport React from 'react';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { DSDropdownMenu } from '@elliemae/ds-dropdownmenu';\nimport { DATA_TESTID } from '../../configs/index.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\n\ninterface DeprecatedDropdownProps {\n  finalIsOpen: boolean;\n  onFilterBarClose: () => void;\n  onFilterBarOnClickOutside: () => void;\n  removeAllFilters: () => void;\n  filterBarProps: DSDataTableT.Props['filterBarProps'];\n  dropdownMenuRef: React.MutableRefObject<HTMLButtonElement | null>;\n  onTriggerClick: () => void;\n}\n\nexport const DeprecatedDropdown: React.ComponentType<DeprecatedDropdownProps> = ({\n  finalIsOpen,\n  onFilterBarClose,\n  onFilterBarOnClickOutside,\n  removeAllFilters,\n  filterBarProps,\n  dropdownMenuRef,\n  onTriggerClick,\n}) => (\n  <DSDropdownMenu\n    preventOverflow=\"scrollParent\"\n    isOpen={finalIsOpen}\n    onClose={onFilterBarClose}\n    onClickOutsideMenu={onFilterBarOnClickOutside}\n    options={[\n      {\n        id: '__internal__option__clear__filters',\n        label: 'Clear Filters',\n        onClick: removeAllFilters,\n        onKeyDown: (e: React.KeyboardEvent) => {\n          if (['Enter', 'Space'].includes(e.code)) removeAllFilters();\n        },\n      },\n      ...(filterBarProps?.extraOptions || []).map((option) => ({\n        ...option,\n        onKeyDown: (e: React.KeyboardEvent) => {\n          if (['Enter', 'Space'].includes(e.code)) option?.onClick?.(e);\n        },\n      })),\n    ]}\n    triggerComponent={\n      <DSButtonV2\n        data-testid={DATA_TESTID.DATA_TABLE_FILTER_BAR_DD_MENU_BUTTON}\n        buttonType=\"icon\"\n        innerRef={dropdownMenuRef}\n        onClick={onTriggerClick}\n        aria-label=\"Filter bar addon\"\n        style={{ marginLeft: 'auto' }}\n      >\n        <MoreOptionsVert />\n      </DSButtonV2>\n    }\n  />\n);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0Df;AAvDR,0BAA2B;AAC3B,sBAAgC;AAChC,6BAA+B;AAC/B,qBAA4B;AAarB,MAAM,qBAAmE,CAAC;AAAA,EAC/E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE;AAAA,EAAC;AAAA;AAAA,IACC,iBAAgB;AAAA,IAChB,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,oBAAoB;AAAA,IACpB,SAAS;AAAA,MACP;AAAA,QACE,IAAI;AAAA,QACJ,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAW,CAAC,MAA2B;AACrC,cAAI,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,EAAG,kBAAiB;AAAA,QAC5D;AAAA,MACF;AAAA,MACA,IAAI,gBAAgB,gBAAgB,CAAC,GAAG,IAAI,CAAC,YAAY;AAAA,QACvD,GAAG;AAAA,QACH,WAAW,CAAC,MAA2B;AACrC,cAAI,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,EAAG,SAAQ,UAAU,CAAC;AAAA,QAC9D;AAAA,MACF,EAAE;AAAA,IACJ;AAAA,IACA,kBACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAa,2BAAY;AAAA,QACzB,YAAW;AAAA,QACX,UAAU;AAAA,QACV,SAAS;AAAA,QACT,cAAW;AAAA,QACX,OAAO,EAAE,YAAY,OAAO;AAAA,QAE5B,sDAAC,mCAAgB;AAAA;AAAA,IACnB;AAAA;AAEJ;",
   "names": []
 }

package/dist/cjs/parts/FilterBar/FiltersBar.js CHANGED Viewed

@@ -38,7 +38,7 @@ var import_exported_related = require("../../exported-related/index.js");
 var import_components = require("./components/index.js");
 var import_styled = require("./styled.js");
 var import_DeprecatedDropdown = require("./DeprecatedDropdown.js");
-var import_useStore = require("../../configs/useStore/useStore.js");
+var import_createInternalAndPropsContext = require("../../configs/useStore/createInternalAndPropsContext.js");
 const pillRenderMapper = {
   [import_exported_related.FILTER_TYPES.SELECT]: import_components.SelectPill,
   [import_exported_related.FILTER_TYPES.MULTI_SELECT]: import_components.MultiSelectPill,
@@ -49,12 +49,12 @@ const pillRenderMapper = {
   [import_exported_related.FILTER_TYPES.CURRENCY_RANGE]: import_components.NumberRangePill
 };
 const FiltersBar = () => {
-  const width = (0, import_useStore.usePropsStore)((state) => state.width);
-  const filterBarProps = (0, import_useStore.usePropsStore)((state) => state.filterBarProps);
-  const onFiltersChange = (0, import_useStore.usePropsStore)((state) => state.onFiltersChange);
-  const filters = (0, import_useStore.usePropsStore)((state) => state.filters);
-  const visibleColumns = (0, import_useStore.usePropsStore)((state) => state.visibleColumns);
-  const getOwnerProps = (0, import_useStore.usePropsStore)((store) => store.get);
+  const width = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.width);
+  const filterBarProps = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.filterBarProps);
+  const onFiltersChange = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.onFiltersChange);
+  const filters = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.filters);
+  const visibleColumns = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.visibleColumns);
+  const getOwnerProps = (0, import_createInternalAndPropsContext.usePropsStore)((store) => store.get);
   const [isOpen, setIsOpen] = (0, import_react.useState)(false);
   const pillGroupRefs = (0, import_react.useMemo)(() => {
     const refs = [];

package/dist/cjs/parts/FilterBar/FiltersBar.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/FilterBar/FiltersBar.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { FILTER_TYPES } from '../../exported-related/index.js';\nimport {\n  SelectPill,\n  MultiSelectPill,\n  SingleDatePill,\n  DateRangePill,\n  NumberRangePill,\n  DateSwitcherPill,\n} from './components/index.js';\nimport { StyledWrapper } from './styled.js';\nimport { DeprecatedDropdown } from './DeprecatedDropdown.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { usePropsStore } from '../../configs/useStore/useStore.js';\n\nconst pillRenderMapper = {\n  [FILTER_TYPES.SELECT]: SelectPill,\n  [FILTER_TYPES.MULTI_SELECT]: MultiSelectPill,\n  [FILTER_TYPES.SINGLE_DATE]: SingleDatePill,\n  [FILTER_TYPES.DATE_RANGE]: DateRangePill,\n  [FILTER_TYPES.DATE_SWITCHER]: DateSwitcherPill,\n  [FILTER_TYPES.NUMBER_RANGE]: NumberRangePill,\n  [FILTER_TYPES.CURRENCY_RANGE]: NumberRangePill,\n} as const;\n\nexport const FiltersBar: React.ComponentType = () => {\n  const width = usePropsStore((state) => state.width);\n  const filterBarProps = usePropsStore((state) => state.filterBarProps);\n  const onFiltersChange = usePropsStore((state) => state.onFiltersChange);\n  const filters = usePropsStore((state) => state.filters);\n  const visibleColumns = usePropsStore((state) => state.visibleColumns);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  const [isOpen, setIsOpen] = useState(false);\n\n  const pillGroupRefs = useMemo(() => {\n    const refs: React.RefObject<HTMLElement>[] = [];\n    for (let i = 0; i < filters.length; i += 1) refs.push(React.createRef());\n    return refs;\n  }, [filters.length]);\n\n  const dropdownMenuRef = useRef<HTMLButtonElement | null>(null);\n\n  const {\n    filterBarAddonRenderer: FilterBarAddonRenderer,\n    onClearAllFiltersClick,\n    onDropdownMenuToggle,\n    onDropdownMenuClickOutside,\n    onDropdownMenuTriggerClick,\n    isDropdownMenuOpen,\n  } = filterBarProps || {};\n\n  const removeAllFilters = useCallback(() => {\n    onFiltersChange([]);\n    onClearAllFiltersClick?.();\n    setIsOpen(false);\n  }, [onFiltersChange, onClearAllFiltersClick]);\n\n  const onFilterBarClose = useCallback(() => {\n    onDropdownMenuToggle?.(false, 'onClose');\n    dropdownMenuRef.current?.focus();\n    setIsOpen(false);\n  }, [onDropdownMenuToggle]);\n\n  const onFilterBarOpen = useCallback(() => {\n    onDropdownMenuToggle?.(true, 'onOpen');\n    setIsOpen(true);\n  }, [onDropdownMenuToggle]);\n\n  const onFilterBarOnClickOutside = useCallback(() => {\n    onDropdownMenuToggle?.(false, 'onClickOutside');\n    onDropdownMenuClickOutside?.();\n    setIsOpen(false);\n  }, [onDropdownMenuClickOutside, onDropdownMenuToggle]);\n\n  const onTriggerClick = useCallback(() => {\n    onDropdownMenuTriggerClick?.();\n    onFilterBarOpen();\n  }, [onDropdownMenuTriggerClick, onFilterBarOpen]);\n\n  const finalIsOpen = useMemo(() => {\n    if (typeof isDropdownMenuOpen === 'boolean') return isDropdownMenuOpen;\n    return isOpen;\n  }, [isDropdownMenuOpen, isOpen]);\n\n  return (\n    <StyledWrapper\n      width={width}\n      aria-live=\"polite\"\n      aria-relevant=\"additions removals\"\n      gutter=\"xs\"\n      getOwnerProps={getOwnerProps}\n    >\n      {filters.map(({ id: column, type, value }, index) => {\n        const columnHeader = visibleColumns.find((col) => col.accessor === column)?.Header;\n        let Component:\n          | TypescriptHelpersT.ObjectValues<typeof pillRenderMapper>\n          | React.ComponentType<DSDataTableT.FilterPillProps<unknown>> = () => null;\n\n        const filterType = type;\n        if (filterType in pillRenderMapper) {\n          Component = pillRenderMapper[filterType as keyof typeof pillRenderMapper];\n        } else if (filterBarProps?.customPillRenderer) {\n          Component = filterBarProps.customPillRenderer;\n        }\n        return (\n          <Component\n            key={column}\n            columnHeader={typeof columnHeader === 'string' ? columnHeader : column}\n            column={column}\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment\n            value={value as any}\n            filters={filters}\n            onFiltersChange={onFiltersChange}\n            prevRef={pillGroupRefs[index - 1]}\n            innerRef={pillGroupRefs[index]}\n            nextRef={pillGroupRefs[index + 1] ?? dropdownMenuRef}\n          />\n        );\n      })}\n      {FilterBarAddonRenderer ? (\n        <FilterBarAddonRenderer innerRef={dropdownMenuRef} />\n      ) : (\n        <DeprecatedDropdown\n          finalIsOpen={finalIsOpen}\n          onFilterBarClose={onFilterBarClose}\n          onFilterBarOnClickOutside={onFilterBarOnClickOutside}\n          removeAllFilters={removeAllFilters}\n          filterBarProps={filterBarProps}\n          dropdownMenuRef={dropdownMenuRef}\n          onTriggerClick={onTriggerClick}\n        />\n      )}\n    </StyledWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { FILTER_TYPES } from '../../exported-related/index.js';\nimport {\n  SelectPill,\n  MultiSelectPill,\n  SingleDatePill,\n  DateRangePill,\n  NumberRangePill,\n  DateSwitcherPill,\n} from './components/index.js';\nimport { StyledWrapper } from './styled.js';\nimport { DeprecatedDropdown } from './DeprecatedDropdown.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\n\nconst pillRenderMapper = {\n  [FILTER_TYPES.SELECT]: SelectPill,\n  [FILTER_TYPES.MULTI_SELECT]: MultiSelectPill,\n  [FILTER_TYPES.SINGLE_DATE]: SingleDatePill,\n  [FILTER_TYPES.DATE_RANGE]: DateRangePill,\n  [FILTER_TYPES.DATE_SWITCHER]: DateSwitcherPill,\n  [FILTER_TYPES.NUMBER_RANGE]: NumberRangePill,\n  [FILTER_TYPES.CURRENCY_RANGE]: NumberRangePill,\n} as const;\n\nexport const FiltersBar: React.ComponentType = () => {\n  const width = usePropsStore((state) => state.width);\n  const filterBarProps = usePropsStore((state) => state.filterBarProps);\n  const onFiltersChange = usePropsStore((state) => state.onFiltersChange);\n  const filters = usePropsStore((state) => state.filters);\n  const visibleColumns = usePropsStore((state) => state.visibleColumns);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  const [isOpen, setIsOpen] = useState(false);\n\n  const pillGroupRefs = useMemo(() => {\n    const refs: React.RefObject<HTMLElement>[] = [];\n    for (let i = 0; i < filters.length; i += 1) refs.push(React.createRef());\n    return refs;\n  }, [filters.length]);\n\n  const dropdownMenuRef = useRef<HTMLButtonElement | null>(null);\n\n  const {\n    filterBarAddonRenderer: FilterBarAddonRenderer,\n    onClearAllFiltersClick,\n    onDropdownMenuToggle,\n    onDropdownMenuClickOutside,\n    onDropdownMenuTriggerClick,\n    isDropdownMenuOpen,\n  } = filterBarProps || {};\n\n  const removeAllFilters = useCallback(() => {\n    onFiltersChange([]);\n    onClearAllFiltersClick?.();\n    setIsOpen(false);\n  }, [onFiltersChange, onClearAllFiltersClick]);\n\n  const onFilterBarClose = useCallback(() => {\n    onDropdownMenuToggle?.(false, 'onClose');\n    dropdownMenuRef.current?.focus();\n    setIsOpen(false);\n  }, [onDropdownMenuToggle]);\n\n  const onFilterBarOpen = useCallback(() => {\n    onDropdownMenuToggle?.(true, 'onOpen');\n    setIsOpen(true);\n  }, [onDropdownMenuToggle]);\n\n  const onFilterBarOnClickOutside = useCallback(() => {\n    onDropdownMenuToggle?.(false, 'onClickOutside');\n    onDropdownMenuClickOutside?.();\n    setIsOpen(false);\n  }, [onDropdownMenuClickOutside, onDropdownMenuToggle]);\n\n  const onTriggerClick = useCallback(() => {\n    onDropdownMenuTriggerClick?.();\n    onFilterBarOpen();\n  }, [onDropdownMenuTriggerClick, onFilterBarOpen]);\n\n  const finalIsOpen = useMemo(() => {\n    if (typeof isDropdownMenuOpen === 'boolean') return isDropdownMenuOpen;\n    return isOpen;\n  }, [isDropdownMenuOpen, isOpen]);\n\n  return (\n    <StyledWrapper\n      width={width}\n      aria-live=\"polite\"\n      aria-relevant=\"additions removals\"\n      gutter=\"xs\"\n      getOwnerProps={getOwnerProps}\n    >\n      {filters.map(({ id: column, type, value }, index) => {\n        const columnHeader = visibleColumns.find((col) => col.accessor === column)?.Header;\n        let Component:\n          | TypescriptHelpersT.ObjectValues<typeof pillRenderMapper>\n          | React.ComponentType<DSDataTableT.FilterPillProps<unknown>> = () => null;\n\n        const filterType = type;\n        if (filterType in pillRenderMapper) {\n          Component = pillRenderMapper[filterType as keyof typeof pillRenderMapper];\n        } else if (filterBarProps?.customPillRenderer) {\n          Component = filterBarProps.customPillRenderer;\n        }\n        return (\n          <Component\n            key={column}\n            columnHeader={typeof columnHeader === 'string' ? columnHeader : column}\n            column={column}\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment\n            value={value as any}\n            filters={filters}\n            onFiltersChange={onFiltersChange}\n            prevRef={pillGroupRefs[index - 1]}\n            innerRef={pillGroupRefs[index]}\n            nextRef={pillGroupRefs[index + 1] ?? dropdownMenuRef}\n          />\n        );\n      })}\n      {FilterBarAddonRenderer ? (\n        <FilterBarAddonRenderer innerRef={dropdownMenuRef} />\n      ) : (\n        <DeprecatedDropdown\n          finalIsOpen={finalIsOpen}\n          onFilterBarClose={onFilterBarClose}\n          onFilterBarOnClickOutside={onFilterBarOnClickOutside}\n          removeAllFilters={removeAllFilters}\n          filterBarProps={filterBarProps}\n          dropdownMenuRef={dropdownMenuRef}\n          onTriggerClick={onTriggerClick}\n        />\n      )}\n    </StyledWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuFnB;AAvFJ,mBAA8D;AAE9D,8BAA6B;AAC7B,wBAOO;AACP,oBAA8B;AAC9B,gCAAmC;AAEnC,2CAA8B;AAE9B,MAAM,mBAAmB;AAAA,EACvB,CAAC,qCAAa,MAAM,GAAG;AAAA,EACvB,CAAC,qCAAa,YAAY,GAAG;AAAA,EAC7B,CAAC,qCAAa,WAAW,GAAG;AAAA,EAC5B,CAAC,qCAAa,UAAU,GAAG;AAAA,EAC3B,CAAC,qCAAa,aAAa,GAAG;AAAA,EAC9B,CAAC,qCAAa,YAAY,GAAG;AAAA,EAC7B,CAAC,qCAAa,cAAc,GAAG;AACjC;AAEO,MAAM,aAAkC,MAAM;AACnD,QAAM,YAAQ,oDAAc,CAAC,UAAU,MAAM,KAAK;AAClD,QAAM,qBAAiB,oDAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,sBAAkB,oDAAc,CAAC,UAAU,MAAM,eAAe;AACtE,QAAM,cAAU,oDAAc,CAAC,UAAU,MAAM,OAAO;AACtD,QAAM,qBAAiB,oDAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,GAAG;AAExD,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,KAAK;AAE1C,QAAM,oBAAgB,sBAAQ,MAAM;AAClC,UAAM,OAAuC,CAAC;AAC9C,aAAS,IAAI,GAAG,IAAI,QAAQ,QAAQ,KAAK,EAAG,MAAK,KAAK,aAAAA,QAAM,UAAU,CAAC;AACvE,WAAO;AAAA,EACT,GAAG,CAAC,QAAQ,MAAM,CAAC;AAEnB,QAAM,sBAAkB,qBAAiC,IAAI;AAE7D,QAAM;AAAA,IACJ,wBAAwB;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,kBAAkB,CAAC;AAEvB,QAAM,uBAAmB,0BAAY,MAAM;AACzC,oBAAgB,CAAC,CAAC;AAClB,6BAAyB;AACzB,cAAU,KAAK;AAAA,EACjB,GAAG,CAAC,iBAAiB,sBAAsB,CAAC;AAE5C,QAAM,uBAAmB,0BAAY,MAAM;AACzC,2BAAuB,OAAO,SAAS;AACvC,oBAAgB,SAAS,MAAM;AAC/B,cAAU,KAAK;AAAA,EACjB,GAAG,CAAC,oBAAoB,CAAC;AAEzB,QAAM,sBAAkB,0BAAY,MAAM;AACxC,2BAAuB,MAAM,QAAQ;AACrC,cAAU,IAAI;AAAA,EAChB,GAAG,CAAC,oBAAoB,CAAC;AAEzB,QAAM,gCAA4B,0BAAY,MAAM;AAClD,2BAAuB,OAAO,gBAAgB;AAC9C,iCAA6B;AAC7B,cAAU,KAAK;AAAA,EACjB,GAAG,CAAC,4BAA4B,oBAAoB,CAAC;AAErD,QAAM,qBAAiB,0BAAY,MAAM;AACvC,iCAA6B;AAC7B,oBAAgB;AAAA,EAClB,GAAG,CAAC,4BAA4B,eAAe,CAAC;AAEhD,QAAM,kBAAc,sBAAQ,MAAM;AAChC,QAAI,OAAO,uBAAuB,UAAW,QAAO;AACpD,WAAO;AAAA,EACT,GAAG,CAAC,oBAAoB,MAAM,CAAC;AAE/B,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,aAAU;AAAA,MACV,iBAAc;AAAA,MACd,QAAO;AAAA,MACP;AAAA,MAEC;AAAA,gBAAQ,IAAI,CAAC,EAAE,IAAI,QAAQ,MAAM,MAAM,GAAG,UAAU;AACnD,gBAAM,eAAe,eAAe,KAAK,CAAC,QAAQ,IAAI,aAAa,MAAM,GAAG;AAC5E,cAAI,YAE6D,MAAM;AAEvE,gBAAM,aAAa;AACnB,cAAI,cAAc,kBAAkB;AAClC,wBAAY,iBAAiB,UAA2C;AAAA,UAC1E,WAAW,gBAAgB,oBAAoB;AAC7C,wBAAY,eAAe;AAAA,UAC7B;AACA,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,cAAc,OAAO,iBAAiB,WAAW,eAAe;AAAA,cAChE;AAAA,cAEA;AAAA,cACA;AAAA,cACA;AAAA,cACA,SAAS,cAAc,QAAQ,CAAC;AAAA,cAChC,UAAU,cAAc,KAAK;AAAA,cAC7B,SAAS,cAAc,QAAQ,CAAC,KAAK;AAAA;AAAA,YAThC;AAAA,UAUP;AAAA,QAEJ,CAAC;AAAA,QACA,yBACC,4CAAC,0BAAuB,UAAU,iBAAiB,IAEnD;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;",
   "names": ["React"]
 }

package/dist/cjs/parts/Filters/index.js CHANGED Viewed

@@ -33,11 +33,11 @@ __export(Filters_exports, {
 module.exports = __toCommonJS(Filters_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
 var import_lodash = require("lodash");
+var import_react = require("react");
 var import_Filters = require("../../addons/Filters/index.js");
+var import_createInternalAndPropsContext = require("../../configs/useStore/createInternalAndPropsContext.js");
 var import_exported_related = require("../../exported-related/index.js");
-var import_useStore = require("../../configs/useStore/useStore.js");
 const FilterMapper = {
   [import_exported_related.FILTER_TYPES.SELECT]: import_Filters.SingleSelectFilter,
   [import_exported_related.FILTER_TYPES.CREATABLE_SELECT]: import_Filters.SingleCreatableFilter,
@@ -51,9 +51,9 @@ const FilterMapper = {
 };
 const FilterMapItem = (props) => {
   const { column, filters, onFiltersChange } = props;
-  const domIdAffix = (0, import_useStore.usePropsStore)((state) => state.domIdAffix);
-  const patchHeaderFilterButtonAndMenu = (0, import_useStore.useInternalStore)((state) => state.patchHeaderFilterButtonAndMenu);
-  const patchHeader = (0, import_useStore.useInternalStore)((state) => state.patchHeader);
+  const domIdAffix = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.domIdAffix);
+  const patchHeaderFilterButtonAndMenu = (0, import_createInternalAndPropsContext.useInternalStore)((state) => state.patchHeaderFilterButtonAndMenu);
+  const patchHeader = (0, import_createInternalAndPropsContext.useInternalStore)((state) => state.patchHeader);
   const filterValue = (0, import_react.useMemo)(() => filters.find((filter) => filter.id === column.id), [column.id, filters]);
   const onValueChange = (0, import_react.useCallback)(
     (type, newValue) => {

package/dist/cjs/parts/Filters/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Filters/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useCallback, useMemo } from 'react';\nimport { cloneDeep } from 'lodash';\nimport {\n  DateRangeFilter,\n  DateSwitcherFilter,\n  NumberRangeFilter,\n  SingleSelectFilter,\n  SingleCreatableFilter,\n  MultiSelectFilter,\n  MultiCreatableFilter,\n  SingleDateFilter,\n  CurrencyRangeFilter,\n} from '../../addons/Filters/index.js';\nimport { FILTER_TYPES } from '../../exported-related/index.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/useStore.js';\n\nconst FilterMapper = {\n  [FILTER_TYPES.SELECT]: SingleSelectFilter,\n  [FILTER_TYPES.CREATABLE_SELECT]: SingleCreatableFilter,\n  [FILTER_TYPES.MULTI_SELECT]: MultiSelectFilter,\n  [FILTER_TYPES.CREATABLE_MULTI_SELECT]: MultiCreatableFilter,\n  [FILTER_TYPES.SINGLE_DATE]: SingleDateFilter,\n  [FILTER_TYPES.DATE_RANGE]: DateRangeFilter,\n  [FILTER_TYPES.DATE_SWITCHER]: DateSwitcherFilter,\n  [FILTER_TYPES.NUMBER_RANGE]: NumberRangeFilter,\n  [FILTER_TYPES.CURRENCY_RANGE]: CurrencyRangeFilter,\n} as const;\n\nexport const FilterMapItem: React.ComponentType<DSDataTableT.FilterItemProps> = (props) => {\n  const { column, filters, onFiltersChange } = props;\n  const domIdAffix = usePropsStore((state) => state.domIdAffix);\n  const patchHeaderFilterButtonAndMenu = useInternalStore((state) => state.patchHeaderFilterButtonAndMenu);\n  const patchHeader = useInternalStore((state) => state.patchHeader);\n\n  const filterValue = useMemo(() => filters.find((filter) => filter.id === column.id), [column.id, filters]);\n\n  const onValueChange = useCallback(\n    (type: string, newValue: unknown) => {\n      const filterIndex = filters.findIndex((filter) => filter.id === column.id);\n      if (newValue === undefined) {\n        const newFilters = filters.filter((filter) => filter.id !== column.id);\n        onFiltersChange(newFilters);\n      } else if (filterIndex === -1) {\n        onFiltersChange([...cloneDeep(filters), { id: column.id, type, value: newValue }]);\n      } else {\n        const newFilters = cloneDeep(filters);\n        newFilters[filterIndex].type = type;\n        newFilters[filterIndex].value = newValue;\n        onFiltersChange(newFilters);\n      }\n    },\n    [column.id, filters, onFiltersChange],\n  );\n\n  const filterProps = {\n    ...props,\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any\n    filterValue: filterValue?.value as any,\n    onValueChange,\n    patchHeader,\n    patchHeaderFilterButtonAndMenu,\n    domIdAffix,\n  };\n\n  if (typeof column.filter === 'string') {\n    if (!(column.filter in FilterMapper)) {\n      throw new Error(`column.filter must be a supported out-of-the-box filter in ${column.id}`);\n    }\n    const FilterComp = FilterMapper[column.filter as keyof typeof FilterMapper];\n    return <FilterComp {...filterProps} />;\n  }\n\n  if (column.Filter) {\n    const FilterComp = column.Filter;\n    return <FilterComp {...filterProps} />;\n  }\n\n  // Column doesn't have any filters\n  return null;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsEZ;AAtEX,mBAA4C;AAC5C,oBAA0B;AAC1B,qBAUO;AACP,8BAA6B;AAE7B,sBAAgD;AAEhD,MAAM,eAAe;AAAA,EACnB,CAAC,qCAAa,MAAM,GAAG;AAAA,EACvB,CAAC,qCAAa,gBAAgB,GAAG;AAAA,EACjC,CAAC,qCAAa,YAAY,GAAG;AAAA,EAC7B,CAAC,qCAAa,sBAAsB,GAAG;AAAA,EACvC,CAAC,qCAAa,WAAW,GAAG;AAAA,EAC5B,CAAC,qCAAa,UAAU,GAAG;AAAA,EAC3B,CAAC,qCAAa,aAAa,GAAG;AAAA,EAC9B,CAAC,qCAAa,YAAY,GAAG;AAAA,EAC7B,CAAC,qCAAa,cAAc,GAAG;AACjC;AAEO,MAAM,gBAAmE,CAAC,UAAU;AACzF,QAAM,EAAE,QAAQ,SAAS,gBAAgB,IAAI;AAC7C,QAAM,iBAAa,+BAAc,CAAC,UAAU,MAAM,UAAU;AAC5D,QAAM,qCAAiC,kCAAiB,CAAC,UAAU,MAAM,8BAA8B;AACvG,QAAM,kBAAc,kCAAiB,CAAC,UAAU,MAAM,WAAW;AAEjE,QAAM,kBAAc,sBAAQ,MAAM,QAAQ,KAAK,CAAC,WAAW,OAAO,OAAO,OAAO,EAAE,GAAG,CAAC,OAAO,IAAI,OAAO,CAAC;AAEzG,QAAM,oBAAgB;AAAA,IACpB,CAAC,MAAc,aAAsB;AACnC,YAAM,cAAc,QAAQ,UAAU,CAAC,WAAW,OAAO,OAAO,OAAO,EAAE;AACzE,UAAI,aAAa,QAAW;AAC1B,cAAM,aAAa,QAAQ,OAAO,CAAC,WAAW,OAAO,OAAO,OAAO,EAAE;AACrE,wBAAgB,UAAU;AAAA,MAC5B,WAAW,gBAAgB,IAAI;AAC7B,wBAAgB,CAAC,OAAG,yBAAU,OAAO,GAAG,EAAE,IAAI,OAAO,IAAI,MAAM,OAAO,SAAS,CAAC,CAAC;AAAA,MACnF,OAAO;AACL,cAAM,iBAAa,yBAAU,OAAO;AACpC,mBAAW,WAAW,EAAE,OAAO;AAC/B,mBAAW,WAAW,EAAE,QAAQ;AAChC,wBAAgB,UAAU;AAAA,MAC5B;AAAA,IACF;AAAA,IACA,CAAC,OAAO,IAAI,SAAS,eAAe;AAAA,EACtC;AAEA,QAAM,cAAc;AAAA,IAClB,GAAG;AAAA;AAAA,IAEH,aAAa,aAAa;AAAA,IAC1B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,MAAI,OAAO,OAAO,WAAW,UAAU;AACrC,QAAI,EAAE,OAAO,UAAU,eAAe;AACpC,YAAM,IAAI,MAAM,8DAA8D,OAAO,EAAE,EAAE;AAAA,IAC3F;AACA,UAAM,aAAa,aAAa,OAAO,MAAmC;AAC1E,WAAO,4CAAC,cAAY,GAAG,aAAa;AAAA,EACtC;AAEA,MAAI,OAAO,QAAQ;AACjB,UAAM,aAAa,OAAO;AAC1B,WAAO,4CAAC,cAAY,GAAG,aAAa;AAAA,EACtC;AAGA,SAAO;AACT;",
+  "sourcesContent": ["import { cloneDeep } from 'lodash';\nimport React, { useCallback, useMemo } from 'react';\nimport {\n  CurrencyRangeFilter,\n  DateRangeFilter,\n  DateSwitcherFilter,\n  MultiCreatableFilter,\n  MultiSelectFilter,\n  NumberRangeFilter,\n  SingleCreatableFilter,\n  SingleDateFilter,\n  SingleSelectFilter,\n} from '../../addons/Filters/index.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport { FILTER_TYPES } from '../../exported-related/index.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\n\nconst FilterMapper = {\n  [FILTER_TYPES.SELECT]: SingleSelectFilter,\n  [FILTER_TYPES.CREATABLE_SELECT]: SingleCreatableFilter,\n  [FILTER_TYPES.MULTI_SELECT]: MultiSelectFilter,\n  [FILTER_TYPES.CREATABLE_MULTI_SELECT]: MultiCreatableFilter,\n  [FILTER_TYPES.SINGLE_DATE]: SingleDateFilter,\n  [FILTER_TYPES.DATE_RANGE]: DateRangeFilter,\n  [FILTER_TYPES.DATE_SWITCHER]: DateSwitcherFilter,\n  [FILTER_TYPES.NUMBER_RANGE]: NumberRangeFilter,\n  [FILTER_TYPES.CURRENCY_RANGE]: CurrencyRangeFilter,\n} as const;\n\nexport const FilterMapItem: React.ComponentType<DSDataTableT.FilterItemProps> = (props) => {\n  const { column, filters, onFiltersChange } = props;\n  const domIdAffix = usePropsStore((state) => state.domIdAffix);\n  const patchHeaderFilterButtonAndMenu = useInternalStore((state) => state.patchHeaderFilterButtonAndMenu);\n  const patchHeader = useInternalStore((state) => state.patchHeader);\n\n  const filterValue = useMemo(() => filters.find((filter) => filter.id === column.id), [column.id, filters]);\n\n  const onValueChange = useCallback(\n    (type: string, newValue: unknown) => {\n      const filterIndex = filters.findIndex((filter) => filter.id === column.id);\n      if (newValue === undefined) {\n        const newFilters = filters.filter((filter) => filter.id !== column.id);\n        onFiltersChange(newFilters);\n      } else if (filterIndex === -1) {\n        onFiltersChange([...cloneDeep(filters), { id: column.id, type, value: newValue }]);\n      } else {\n        const newFilters = cloneDeep(filters);\n        newFilters[filterIndex].type = type;\n        newFilters[filterIndex].value = newValue;\n        onFiltersChange(newFilters);\n      }\n    },\n    [column.id, filters, onFiltersChange],\n  );\n\n  const filterProps = {\n    ...props,\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any\n    filterValue: filterValue?.value as any,\n    onValueChange,\n    patchHeader,\n    patchHeaderFilterButtonAndMenu,\n    domIdAffix,\n  };\n\n  if (typeof column.filter === 'string') {\n    if (!(column.filter in FilterMapper)) {\n      throw new Error(`column.filter must be a supported out-of-the-box filter in ${column.id}`);\n    }\n    const FilterComp = FilterMapper[column.filter as keyof typeof FilterMapper];\n    return <FilterComp {...filterProps} />;\n  }\n\n  if (column.Filter) {\n    const FilterComp = column.Filter;\n    return <FilterComp {...filterProps} />;\n  }\n\n  // Column doesn't have any filters\n  return null;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsEZ;AAtEX,oBAA0B;AAC1B,mBAA4C;AAC5C,qBAUO;AACP,2CAAgD;AAChD,8BAA6B;AAG7B,MAAM,eAAe;AAAA,EACnB,CAAC,qCAAa,MAAM,GAAG;AAAA,EACvB,CAAC,qCAAa,gBAAgB,GAAG;AAAA,EACjC,CAAC,qCAAa,YAAY,GAAG;AAAA,EAC7B,CAAC,qCAAa,sBAAsB,GAAG;AAAA,EACvC,CAAC,qCAAa,WAAW,GAAG;AAAA,EAC5B,CAAC,qCAAa,UAAU,GAAG;AAAA,EAC3B,CAAC,qCAAa,aAAa,GAAG;AAAA,EAC9B,CAAC,qCAAa,YAAY,GAAG;AAAA,EAC7B,CAAC,qCAAa,cAAc,GAAG;AACjC;AAEO,MAAM,gBAAmE,CAAC,UAAU;AACzF,QAAM,EAAE,QAAQ,SAAS,gBAAgB,IAAI;AAC7C,QAAM,iBAAa,oDAAc,CAAC,UAAU,MAAM,UAAU;AAC5D,QAAM,qCAAiC,uDAAiB,CAAC,UAAU,MAAM,8BAA8B;AACvG,QAAM,kBAAc,uDAAiB,CAAC,UAAU,MAAM,WAAW;AAEjE,QAAM,kBAAc,sBAAQ,MAAM,QAAQ,KAAK,CAAC,WAAW,OAAO,OAAO,OAAO,EAAE,GAAG,CAAC,OAAO,IAAI,OAAO,CAAC;AAEzG,QAAM,oBAAgB;AAAA,IACpB,CAAC,MAAc,aAAsB;AACnC,YAAM,cAAc,QAAQ,UAAU,CAAC,WAAW,OAAO,OAAO,OAAO,EAAE;AACzE,UAAI,aAAa,QAAW;AAC1B,cAAM,aAAa,QAAQ,OAAO,CAAC,WAAW,OAAO,OAAO,OAAO,EAAE;AACrE,wBAAgB,UAAU;AAAA,MAC5B,WAAW,gBAAgB,IAAI;AAC7B,wBAAgB,CAAC,OAAG,yBAAU,OAAO,GAAG,EAAE,IAAI,OAAO,IAAI,MAAM,OAAO,SAAS,CAAC,CAAC;AAAA,MACnF,OAAO;AACL,cAAM,iBAAa,yBAAU,OAAO;AACpC,mBAAW,WAAW,EAAE,OAAO;AAC/B,mBAAW,WAAW,EAAE,QAAQ;AAChC,wBAAgB,UAAU;AAAA,MAC5B;AAAA,IACF;AAAA,IACA,CAAC,OAAO,IAAI,SAAS,eAAe;AAAA,EACtC;AAEA,QAAM,cAAc;AAAA,IAClB,GAAG;AAAA;AAAA,IAEH,aAAa,aAAa;AAAA,IAC1B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,MAAI,OAAO,OAAO,WAAW,UAAU;AACrC,QAAI,EAAE,OAAO,UAAU,eAAe;AACpC,YAAM,IAAI,MAAM,8DAA8D,OAAO,EAAE,EAAE;AAAA,IAC3F;AACA,UAAM,aAAa,aAAa,OAAO,MAAmC;AAC1E,WAAO,4CAAC,cAAY,GAAG,aAAa;AAAA,EACtC;AAEA,MAAI,OAAO,QAAQ;AACjB,UAAM,aAAa,OAAO;AAC1B,WAAO,4CAAC,cAAY,GAAG,aAAa;AAAA,EACtC;AAGA,SAAO;AACT;",
   "names": []
 }

package/dist/cjs/parts/Headers/EmptyChildrenGroup.js CHANGED Viewed

@@ -35,14 +35,14 @@ var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_system = require("@elliemae/ds-system");
 var import_DSDataTableDefinitions = require("../../DSDataTableDefinitions.js");
-var import_useStore = require("../../configs/useStore/useStore.js");
+var import_createInternalAndPropsContext = require("../../configs/useStore/createInternalAndPropsContext.js");
 const StyledBox = (0, import_ds_system.styled)("div", { name: import_DSDataTableDefinitions.DSDataTableName, slot: import_DSDataTableDefinitions.DSDataTableSlots.EMPTY_HEADER })`
   height: 24px;
   margin: 0 ${(props) => props.theme.space.xxs};
   border-top: 1px solid ${(props) => props.theme.colors.neutral[200]};
 `;
 const EmptyChildrenGroup = () => {
-  const getOwnerProps = (0, import_useStore.usePropsStore)((store) => store.get);
+  const getOwnerProps = (0, import_createInternalAndPropsContext.usePropsStore)((store) => store.get);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledBox, { getOwnerProps });
 };
 //# sourceMappingURL=EmptyChildrenGroup.js.map

package/dist/cjs/parts/Headers/EmptyChildrenGroup.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Headers/EmptyChildrenGroup.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSDataTableName, DSDataTableSlots } from '../../DSDataTableDefinitions.js';\nimport { usePropsStore } from '../../configs/useStore/useStore.js';\n\nconst StyledBox = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.EMPTY_HEADER })`\n  height: 24px;\n  margin: 0 ${(props) => props.theme.space.xxs};\n  border-top: 1px solid ${(props) => props.theme.colors.neutral[200]};\n`;\n\nexport const EmptyChildrenGroup: React.ComponentType<Record<string, never>> = () => {\n  const getOwnerProps = usePropsStore((store) => store.get);\n  return <StyledBox getOwnerProps={getOwnerProps} />;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADad;AAZT,uBAAuB;AACvB,oCAAkD;AAClD,sBAA8B;AAE9B,MAAM,gBAAY,yBAAO,OAAO,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,aAAa,CAAC;AAAA;AAAA,cAEhF,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA,0BACpB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAG7D,MAAM,qBAAiE,MAAM;AAClF,QAAM,oBAAgB,+BAAc,CAAC,UAAU,MAAM,GAAG;AACxD,SAAO,4CAAC,aAAU,eAA8B;AAClD;",
+  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport { DSDataTableName, DSDataTableSlots } from '../../DSDataTableDefinitions.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\n\nconst StyledBox = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.EMPTY_HEADER })`\n  height: 24px;\n  margin: 0 ${(props) => props.theme.space.xxs};\n  border-top: 1px solid ${(props) => props.theme.colors.neutral[200]};\n`;\n\nexport const EmptyChildrenGroup: React.ComponentType<Record<string, never>> = () => {\n  const getOwnerProps = usePropsStore((store) => store.get);\n  return <StyledBox getOwnerProps={getOwnerProps} />;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADad;AAbT,uBAAuB;AAEvB,oCAAkD;AAClD,2CAA8B;AAE9B,MAAM,gBAAY,yBAAO,OAAO,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,aAAa,CAAC;AAAA;AAAA,cAEhF,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA,0BACpB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAG7D,MAAM,qBAAiE,MAAM;AAClF,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,GAAG;AACxD,SAAO,4CAAC,aAAU,eAA8B;AAClD;",
   "names": []
 }

package/dist/cjs/parts/Headers/HeaderCell.js CHANGED Viewed

@@ -45,7 +45,7 @@ var import_useHeaderCellHandlers = require("./useHeaderCellHandlers.js");
 var import_useHeaderCellConfig = require("./useHeaderCellConfig.js");
 var import_constants = require("../../configs/constants.js");
 var import_HeaderCellTitle = require("./HeaderCellTitle.js");
-var import_useStore = require("../../configs/useStore/useStore.js");
+var import_createInternalAndPropsContext = require("../../configs/useStore/createInternalAndPropsContext.js");
 const buildScreenReaderInstructions = ({
   colSpan,
   draggable,
@@ -64,18 +64,18 @@ const buildScreenReaderInstructions = ({
 };
 const HeaderCell = (props) => {
   const { column, isDragOverlay, colSpan } = props;
-  const disabledRows = (0, import_useStore.usePropsStore)((state) => state.disabledRows);
-  const dragAndDropColumns = (0, import_useStore.usePropsStore)((state) => state.dragAndDropColumns);
-  const onFiltersChange = (0, import_useStore.usePropsStore)((state) => state.onFiltersChange);
-  const filters = (0, import_useStore.usePropsStore)((state) => state.filters);
-  const textWrap = (0, import_useStore.usePropsStore)((state) => state.textWrap);
-  const noResultsMessage = (0, import_useStore.usePropsStore)((state) => state.noResultsMessage);
-  const domIdAffix = (0, import_useStore.usePropsStore)((state) => state.domIdAffix);
-  const noResultsSecondaryMessage = (0, import_useStore.usePropsStore)((state) => state.noResultsSecondaryMessage);
-  const isEmptyContent = (0, import_useStore.usePropsStore)((state) => state.isEmptyContent);
-  const firstFocuseableColumnHeaderId = (0, import_useStore.usePropsStore)((state) => state.firstFocuseableColumnHeaderId);
-  const getOwnerProps = (0, import_useStore.usePropsStore)((store) => store.get);
-  const reduxHeaders = (0, import_useStore.useInternalStore)((state) => state.reduxHeaders);
+  const disabledRows = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.disabledRows);
+  const dragAndDropColumns = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.dragAndDropColumns);
+  const onFiltersChange = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.onFiltersChange);
+  const filters = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.filters);
+  const textWrap = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.textWrap);
+  const noResultsMessage = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.noResultsMessage);
+  const domIdAffix = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.domIdAffix);
+  const noResultsSecondaryMessage = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.noResultsSecondaryMessage);
+  const isEmptyContent = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.isEmptyContent);
+  const firstFocuseableColumnHeaderId = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.firstFocuseableColumnHeaderId);
+  const getOwnerProps = (0, import_createInternalAndPropsContext.usePropsStore)((store) => store.get);
+  const reduxHeaders = (0, import_createInternalAndPropsContext.useInternalStore)((state) => state.reduxHeaders);
   const reduxHeader = (0, import_react.useMemo)(() => reduxHeaders[column.id], [reduxHeaders, column]);
   const dragHandleRef = (0, import_react.useRef)(null);
   const filterIconRef = (0, import_react.useRef)(null);

package/dist/cjs/parts/Headers/HeaderCell.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Headers/HeaderCell.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable no-nested-ternary */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useCallback, useContext, useMemo, useRef } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { StyledHeadTh, StyledHeaderRightIconsWrapper, StyledFocusWithin } from '../../styled.js';\nimport { SortByCaret } from '../SortByCaret.js';\nimport { DragHandle } from '../DnDHandle.js';\nimport { SortableItemContext } from '../HoC/SortableItemContext.js';\nimport { FilterMapItem } from '../Filters/index.js';\nimport { HeaderResizer } from './HeaderResizer.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useHeaderCellHandlers } from './useHeaderCellHandlers.js';\nimport { useHeaderCellConfig } from './useHeaderCellConfig.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { HeaderCellTitle } from './HeaderCellTitle.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/useStore.js';\n\nconst buildScreenReaderInstructions = ({\n  colSpan,\n  draggable,\n  filterable,\n  sortable,\n}: {\n  colSpan: number;\n  draggable: boolean;\n  filterable: boolean;\n  sortable: boolean;\n}) => {\n  const preffix = colSpan === 1 ? '' : 'Column Group. ';\n  if (!draggable && !filterable && !sortable) return preffix;\n\n  let message = sortable\n    ? 'You can sort the data ascendingly/descendingly by this column. Use the up / down arrows keys to do so'\n    : '';\n  if (draggable && filterable) {\n    message = `This column is draggable and filterable. To enable these interactions press the enter key. ${message}`;\n  } else if (draggable || filterable) {\n    message = `This column is ${\n      draggable ? 'draggable' : 'filterable'\n    }. To enable this interaction press the enter key. ${message}`;\n  }\n  return `${preffix}${message}`;\n};\n\ninterface HeaderCellCompProps {\n  column: DSDataTableT.InternalColumn;\n  isDragOverlay?: boolean;\n  colSpan: number;\n}\n\nexport const HeaderCell: React.ComponentType<HeaderCellCompProps> = (props) => {\n  const { column, isDragOverlay, colSpan } = props;\n  const disabledRows = usePropsStore((state) => state.disabledRows);\n  const dragAndDropColumns = usePropsStore((state) => state.dragAndDropColumns);\n  const onFiltersChange = usePropsStore((state) => state.onFiltersChange);\n  const filters = usePropsStore((state) => state.filters);\n  const textWrap = usePropsStore((state) => state.textWrap);\n  const noResultsMessage = usePropsStore((state) => state.noResultsMessage);\n  const domIdAffix = usePropsStore((state) => state.domIdAffix);\n  const noResultsSecondaryMessage = usePropsStore((state) => state.noResultsSecondaryMessage);\n  const isEmptyContent = usePropsStore((state) => state.isEmptyContent);\n  const firstFocuseableColumnHeaderId = usePropsStore((state) => state.firstFocuseableColumnHeaderId);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  const reduxHeaders = useInternalStore((state) => state.reduxHeaders);\n  const reduxHeader = useMemo(() => reduxHeaders[column.id], [reduxHeaders, column]);\n  const dragHandleRef = useRef<HTMLDivElement | null>(null);\n  const filterIconRef = useRef<HTMLButtonElement | null>(null);\n  const resizeHandlerRef = useRef<HTMLInputElement | null>(null);\n  const sortRef = useRef<HTMLButtonElement | null>(null);\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const { hasFilter, hasDnD, hasSortingCaret, hasRightIcons, shouldShowDnD, hCols, isDragging, shouldShowResize } =\n    useHeaderCellConfig(props);\n\n  const { handleSort, ...handlers } = useHeaderCellHandlers({\n    hasFilter,\n    column,\n    hasDnD,\n    dragHandleRef,\n    filterIconRef,\n    resizeHandlerRef,\n    sortRef,\n    hasSortingCaret,\n    isDragOverlay,\n    draggableProps,\n  });\n\n  const rightIcons = useMemo(() => {\n    if (!hasRightIcons) return null;\n    return (\n      <StyledHeaderRightIconsWrapper getOwnerProps={getOwnerProps}>\n        <FilterMapItem\n          column={column}\n          onFiltersChange={onFiltersChange}\n          reduxHeader={reduxHeader}\n          filters={filters}\n          innerRef={filterIconRef}\n        />\n        {hasSortingCaret && (\n          <SortByCaret\n            isSortedDesc={column.isSortedDesc}\n            onClick={(e) => {\n              e.stopPropagation();\n              handleSort(e as React.MouseEvent);\n            }}\n            isReachable={reduxHeader?.withTabStops ?? false}\n            column={column}\n            reduxHeader={reduxHeader}\n            innerRef={sortRef}\n          />\n        )}\n      </StyledHeaderRightIconsWrapper>\n    );\n  }, [hasRightIcons, getOwnerProps, handleSort, column, onFiltersChange, reduxHeader, filters, hasSortingCaret]);\n\n  const DnDHandleComponent = useMemo(\n    () => (\n      <Grid mr=\"2px\" alignItems=\"center\" style={{ position: 'relative' }}>\n        <StyledFocusWithin hideFocus={isDragging}>\n          <DragHandle\n            key={column.id}\n            innerRef={dragHandleRef}\n            isReachable={reduxHeader?.withTabStops ?? false}\n            id={`header-dnd-handle-${column.id}-${domIdAffix}`}\n            isDragOverlay={isDragOverlay}\n            isDisabled={disabledRows[column.id]}\n          />\n        </StyledFocusWithin>\n      </Grid>\n    ),\n    [column.id, disabledRows, domIdAffix, isDragOverlay, isDragging, reduxHeader?.withTabStops],\n  );\n\n  const handleRef = useCallback(\n    (_ref: HTMLTableColElement | null) => {\n      if (!isDragOverlay) {\n        column.ref.current = _ref;\n      }\n    },\n    [column.ref, isDragOverlay],\n  );\n\n  const screenReaderInstructionsId = `sr-${column.id}-instructions-${domIdAffix}`.replace(/ /g, '');\n\n  return (\n    <StyledHeadTh\n      column={column}\n      onClick={handleSort}\n      {...handlers}\n      role=\"columnheader\"\n      {...(isEmptyContent && column.id === firstFocuseableColumnHeaderId\n        ? { 'aria-label': `${noResultsMessage}. ${noResultsSecondaryMessage ? `${noResultsSecondaryMessage}.` : ''}` }\n        : {})}\n      aria-describedby={screenReaderInstructionsId}\n      aria-sort={hasSortingCaret ? (column.isSortedDesc ? 'descending' : 'ascending') : 'none'}\n      data-testid={DATA_TESTID.DATA_TABLE_HEADER}\n      tabIndex={column.isFocuseable === false ? -1 : 0}\n      isDraggingActive={Boolean(draggableProps && draggableProps.active)}\n      shouldShowDnD={shouldShowDnD}\n      innerRef={handleRef}\n      getOwnerProps={getOwnerProps}\n    >\n      <Grid width=\"100%\" cols={hCols}>\n        {shouldShowDnD && DnDHandleComponent}\n        <HeaderCellTitle column={column} draggableProps={draggableProps} textWrap={textWrap} />\n        {rightIcons}\n        {shouldShowResize && (\n          <HeaderResizer column={column} innerRef={resizeHandlerRef} isReachable={reduxHeader?.withTabStops ?? false} />\n        )}\n      </Grid>\n      <span id={screenReaderInstructionsId} style={{ display: 'none' }} aria-hidden=\"false\">\n        {buildScreenReaderInstructions({\n          colSpan,\n          draggable: dragAndDropColumns && column.disableDnD !== true,\n          filterable: hasFilter,\n          sortable: column.canSort ?? false,\n        })}\n      </span>\n    </StyledHeadTh>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable no-nested-ternary */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useCallback, useContext, useMemo, useRef } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { StyledHeadTh, StyledHeaderRightIconsWrapper, StyledFocusWithin } from '../../styled.js';\nimport { SortByCaret } from '../SortByCaret.js';\nimport { DragHandle } from '../DnDHandle.js';\nimport { SortableItemContext } from '../HoC/SortableItemContext.js';\nimport { FilterMapItem } from '../Filters/index.js';\nimport { HeaderResizer } from './HeaderResizer.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useHeaderCellHandlers } from './useHeaderCellHandlers.js';\nimport { useHeaderCellConfig } from './useHeaderCellConfig.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { HeaderCellTitle } from './HeaderCellTitle.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\n\nconst buildScreenReaderInstructions = ({\n  colSpan,\n  draggable,\n  filterable,\n  sortable,\n}: {\n  colSpan: number;\n  draggable: boolean;\n  filterable: boolean;\n  sortable: boolean;\n}) => {\n  const preffix = colSpan === 1 ? '' : 'Column Group. ';\n  if (!draggable && !filterable && !sortable) return preffix;\n\n  let message = sortable\n    ? 'You can sort the data ascendingly/descendingly by this column. Use the up / down arrows keys to do so'\n    : '';\n  if (draggable && filterable) {\n    message = `This column is draggable and filterable. To enable these interactions press the enter key. ${message}`;\n  } else if (draggable || filterable) {\n    message = `This column is ${\n      draggable ? 'draggable' : 'filterable'\n    }. To enable this interaction press the enter key. ${message}`;\n  }\n  return `${preffix}${message}`;\n};\n\ninterface HeaderCellCompProps {\n  column: DSDataTableT.InternalColumn;\n  isDragOverlay?: boolean;\n  colSpan: number;\n}\n\nexport const HeaderCell: React.ComponentType<HeaderCellCompProps> = (props) => {\n  const { column, isDragOverlay, colSpan } = props;\n  const disabledRows = usePropsStore((state) => state.disabledRows);\n  const dragAndDropColumns = usePropsStore((state) => state.dragAndDropColumns);\n  const onFiltersChange = usePropsStore((state) => state.onFiltersChange);\n  const filters = usePropsStore((state) => state.filters);\n  const textWrap = usePropsStore((state) => state.textWrap);\n  const noResultsMessage = usePropsStore((state) => state.noResultsMessage);\n  const domIdAffix = usePropsStore((state) => state.domIdAffix);\n  const noResultsSecondaryMessage = usePropsStore((state) => state.noResultsSecondaryMessage);\n  const isEmptyContent = usePropsStore((state) => state.isEmptyContent);\n  const firstFocuseableColumnHeaderId = usePropsStore((state) => state.firstFocuseableColumnHeaderId);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  const reduxHeaders = useInternalStore((state) => state.reduxHeaders);\n  const reduxHeader = useMemo(() => reduxHeaders[column.id], [reduxHeaders, column]);\n  const dragHandleRef = useRef<HTMLDivElement | null>(null);\n  const filterIconRef = useRef<HTMLButtonElement | null>(null);\n  const resizeHandlerRef = useRef<HTMLInputElement | null>(null);\n  const sortRef = useRef<HTMLButtonElement | null>(null);\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const { hasFilter, hasDnD, hasSortingCaret, hasRightIcons, shouldShowDnD, hCols, isDragging, shouldShowResize } =\n    useHeaderCellConfig(props);\n\n  const { handleSort, ...handlers } = useHeaderCellHandlers({\n    hasFilter,\n    column,\n    hasDnD,\n    dragHandleRef,\n    filterIconRef,\n    resizeHandlerRef,\n    sortRef,\n    hasSortingCaret,\n    isDragOverlay,\n    draggableProps,\n  });\n\n  const rightIcons = useMemo(() => {\n    if (!hasRightIcons) return null;\n    return (\n      <StyledHeaderRightIconsWrapper getOwnerProps={getOwnerProps}>\n        <FilterMapItem\n          column={column}\n          onFiltersChange={onFiltersChange}\n          reduxHeader={reduxHeader}\n          filters={filters}\n          innerRef={filterIconRef}\n        />\n        {hasSortingCaret && (\n          <SortByCaret\n            isSortedDesc={column.isSortedDesc}\n            onClick={(e) => {\n              e.stopPropagation();\n              handleSort(e as React.MouseEvent);\n            }}\n            isReachable={reduxHeader?.withTabStops ?? false}\n            column={column}\n            reduxHeader={reduxHeader}\n            innerRef={sortRef}\n          />\n        )}\n      </StyledHeaderRightIconsWrapper>\n    );\n  }, [hasRightIcons, getOwnerProps, handleSort, column, onFiltersChange, reduxHeader, filters, hasSortingCaret]);\n\n  const DnDHandleComponent = useMemo(\n    () => (\n      <Grid mr=\"2px\" alignItems=\"center\" style={{ position: 'relative' }}>\n        <StyledFocusWithin hideFocus={isDragging}>\n          <DragHandle\n            key={column.id}\n            innerRef={dragHandleRef}\n            isReachable={reduxHeader?.withTabStops ?? false}\n            id={`header-dnd-handle-${column.id}-${domIdAffix}`}\n            isDragOverlay={isDragOverlay}\n            isDisabled={disabledRows[column.id]}\n          />\n        </StyledFocusWithin>\n      </Grid>\n    ),\n    [column.id, disabledRows, domIdAffix, isDragOverlay, isDragging, reduxHeader?.withTabStops],\n  );\n\n  const handleRef = useCallback(\n    (_ref: HTMLTableColElement | null) => {\n      if (!isDragOverlay) {\n        column.ref.current = _ref;\n      }\n    },\n    [column.ref, isDragOverlay],\n  );\n\n  const screenReaderInstructionsId = `sr-${column.id}-instructions-${domIdAffix}`.replace(/ /g, '');\n\n  return (\n    <StyledHeadTh\n      column={column}\n      onClick={handleSort}\n      {...handlers}\n      role=\"columnheader\"\n      {...(isEmptyContent && column.id === firstFocuseableColumnHeaderId\n        ? { 'aria-label': `${noResultsMessage}. ${noResultsSecondaryMessage ? `${noResultsSecondaryMessage}.` : ''}` }\n        : {})}\n      aria-describedby={screenReaderInstructionsId}\n      aria-sort={hasSortingCaret ? (column.isSortedDesc ? 'descending' : 'ascending') : 'none'}\n      data-testid={DATA_TESTID.DATA_TABLE_HEADER}\n      tabIndex={column.isFocuseable === false ? -1 : 0}\n      isDraggingActive={Boolean(draggableProps && draggableProps.active)}\n      shouldShowDnD={shouldShowDnD}\n      innerRef={handleRef}\n      getOwnerProps={getOwnerProps}\n    >\n      <Grid width=\"100%\" cols={hCols}>\n        {shouldShowDnD && DnDHandleComponent}\n        <HeaderCellTitle column={column} draggableProps={draggableProps} textWrap={textWrap} />\n        {rightIcons}\n        {shouldShowResize && (\n          <HeaderResizer column={column} innerRef={resizeHandlerRef} isReachable={reduxHeader?.withTabStops ?? false} />\n        )}\n      </Grid>\n      <span id={screenReaderInstructionsId} style={{ display: 'none' }} aria-hidden=\"false\">\n        {buildScreenReaderInstructions({\n          colSpan,\n          draggable: dragAndDropColumns && column.disableDnD !== true,\n          filterable: hasFilter,\n          sortable: column.canSort ?? false,\n        })}\n      </span>\n    </StyledHeadTh>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/parts/Headers/HeaderCellGroup.js CHANGED Viewed

@@ -34,18 +34,18 @@ __export(HeaderCellGroup_exports, {
 module.exports = __toCommonJS(HeaderCellGroup_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
 var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_system = require("@elliemae/ds-system");
-var import_HeaderCell = require("./HeaderCell.js");
-var import_SortableItemContext = require("../HoC/SortableItemContext.js");
-var import_internal = require("../internal.js");
+var import_react = require("react");
+var import_DSDataTableDefinitions = require("../../DSDataTableDefinitions.js");
+var import_configs = require("../../configs/index.js");
+var import_createInternalAndPropsContext = require("../../configs/useStore/createInternalAndPropsContext.js");
 var import_DropIndicator = require("../DropIndicator.js");
+var import_SortableItemContext = require("../HoC/SortableItemContext.js");
+var import_withDnDSortableColumnContext = require("../HoC/withDnDSortableColumnContext.js");
 var import_SortableHeaderCell = require("../SortableHeaderCell.js");
 var import_EmptyChildrenGroup = require("./EmptyChildrenGroup.js");
-var import_configs = require("../../configs/index.js");
-var import_useStore = require("../../configs/useStore/useStore.js");
-var import_DSDataTableDefinitions = require("../../DSDataTableDefinitions.js");
+var import_HeaderCell = require("./HeaderCell.js");
 const StyledWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_DSDataTableDefinitions.DSDataTableName, slot: import_DSDataTableDefinitions.DSDataTableSlots.HEADER_CELL_WRAPPER })`
   position: relative;
   ${({ shouldDropOneLevel, isDragOverlay }) => shouldDropOneLevel && !isDragOverlay ? `top: 50%; height: 50%;` : ""}
@@ -65,8 +65,8 @@ const HeaderCellGroupComp = ({
   isFirst,
   level = 0
 }) => {
-  const visibleColumns = (0, import_useStore.usePropsStore)((state) => state.visibleColumns);
-  const getOwnerProps = (0, import_useStore.usePropsStore)((store) => store.get);
+  const visibleColumns = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.visibleColumns);
+  const getOwnerProps = (0, import_createInternalAndPropsContext.usePropsStore)((store) => store.get);
   const { draggableProps } = (0, import_react.useContext)(import_SortableItemContext.SortableItemContext);
   const isMultiLevel = visibleColumns.some((col) => !!col.columns);
   const children = header.columns;
@@ -108,5 +108,5 @@ const HeaderCellGroupComp = ({
   );
 };
 const HeaderCellGroup = HeaderCellGroupComp;
-const HeaderCellGroupSortable = (0, import_internal.withDnDSortableColumnContext)(HeaderCellGroupComp);
+const HeaderCellGroupSortable = (0, import_withDnDSortableColumnContext.withDnDSortableColumnContext)(HeaderCellGroupComp);
 //# sourceMappingURL=HeaderCellGroup.js.map

package/dist/cjs/parts/Headers/HeaderCellGroup.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Headers/HeaderCellGroup.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-use-before-define */\n/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { HeaderCell } from './HeaderCell.js';\nimport { SortableItemContext } from '../HoC/SortableItemContext.js';\nimport { withDnDSortableColumnContext } from '../internal.js';\nimport { DropIndicator } from '../DropIndicator.js';\nimport { SortableHeaderCell } from '../SortableHeaderCell.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { EmptyChildrenGroup } from './EmptyChildrenGroup.js';\nimport { DATA_TESTID } from '../../configs/index.js';\nimport { usePropsStore } from '../../configs/useStore/useStore.js';\nimport { DSDataTableName, DSDataTableSlots } from '../../DSDataTableDefinitions.js';\n\nconst StyledWrapper = styled(Grid, { name: DSDataTableName, slot: DSDataTableSlots.HEADER_CELL_WRAPPER })<{\n  shouldDropOneLevel: boolean;\n  isDragOverlay?: boolean;\n  isDragging?: boolean;\n  isFirst?: boolean;\n  isLast?: boolean;\n  gridColumn: string;\n}>`\n  position: relative;\n  ${({ shouldDropOneLevel, isDragOverlay }) => (shouldDropOneLevel && !isDragOverlay ? `top: 50%; height: 50%;` : '')}\n  width: ${(props) => (props.isDragOverlay ? 'fit-content' : '100%')};\n  grid-column: ${(props) => props.gridColumn};\n  background: ${(props) => (props.isDragging ? props.theme.colors.neutral['080'] : 'white')};\n  opacity: ${(props) => (props.isDragging ? 0.8 : 1)};\n  box-shadow: 0 2px 4px 0 ${(props) => (props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent')};\n  border-left: ${({ isFirst }) => (isFirst ? '0px' : '1px')} solid ${(props) => props.theme.colors.neutral['080']};\n  border-right: ${({ isLast }) => (isLast ? '1px' : '0px')} solid ${(props) => props.theme.colors.neutral['080']};\n`;\n\ninterface HeaderCellGroupCompProps {\n  header: DSDataTableT.InternalColumn;\n  isDragOverlay?: boolean;\n  isDraggingParent?: boolean;\n  isLast?: boolean;\n  isFirst?: boolean;\n  level?: number;\n}\n\nconst HeaderCellGroupComp: React.ComponentType<HeaderCellGroupCompProps> = ({\n  header,\n  isDragOverlay,\n  isDraggingParent,\n  isLast,\n  isFirst,\n  level = 0,\n}) => {\n  const visibleColumns = usePropsStore((state) => state.visibleColumns);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const isMultiLevel = visibleColumns.some((col) => !!col.columns);\n\n  const children = header.columns;\n\n  const isDragging = (draggableProps && draggableProps.isDragging) || isDraggingParent;\n  const dropIndicatorPosition =\n    draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;\n\n  const ChildGroup = isDragOverlay ? HeaderCellGroup : HeaderCellGroupSortable;\n\n  const colSpan = children?.length ?? 1;\n  return (\n    <StyledWrapper\n      innerRef={draggableProps ? draggableProps.setNodeRef : undefined}\n      gridColumn={isDragOverlay ? 'auto' : `span ${colSpan}`}\n      isDragOverlay={isDragOverlay}\n      isDragging={isDragging}\n      cols={['auto']}\n      data-testid={isDragOverlay ? DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY : undefined}\n      isFirst={isFirst}\n      isLast={isLast}\n      shouldDropOneLevel={isMultiLevel && level === 0 && !children}\n      getOwnerProps={getOwnerProps}\n    >\n      <HeaderCell column={header} isDragOverlay={isDragOverlay} colSpan={colSpan} />\n      {!!children?.length && !isDragOverlay && (\n        <SortableHeaderCell isGroup items={children} isDragOverlay={isDragOverlay} colId={header.id}>\n          {children.map((h, index) => (\n            <ChildGroup\n              key={h.id}\n              header={h}\n              isDragOverlay={isDragOverlay}\n              isDraggingParent={isDragging}\n              isLast={index === children.length - 1}\n              isFirst={index === 0}\n              level={level + 1}\n            />\n          ))}\n        </SortableHeaderCell>\n      )}\n      {children?.length && isDragOverlay && <EmptyChildrenGroup />}\n      <DropIndicator vertical dropIndicatorPosition={dropIndicatorPosition} isLast={isLast && isDragging} isDropValid />\n    </StyledWrapper>\n  );\n};\n\n// We need to declare this because we MUST avoid the useSortable call in the recursive calls of the function\n\nexport const HeaderCellGroup = HeaderCellGroupComp;\n\nexport const HeaderCellGroupSortable = withDnDSortableColumnContext(HeaderCellGroupComp);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-use-before-define */\n/* eslint-disable complexity */\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport React, { useContext } from 'react';\nimport { DSDataTableName, DSDataTableSlots } from '../../DSDataTableDefinitions.js';\nimport { DATA_TESTID } from '../../configs/index.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { DropIndicator } from '../DropIndicator.js';\nimport { SortableItemContext } from '../HoC/SortableItemContext.js';\nimport { withDnDSortableColumnContext } from '../HoC/withDnDSortableColumnContext.js';\nimport { SortableHeaderCell } from '../SortableHeaderCell.js';\nimport { EmptyChildrenGroup } from './EmptyChildrenGroup.js';\nimport { HeaderCell } from './HeaderCell.js';\n\nconst StyledWrapper = styled(Grid, { name: DSDataTableName, slot: DSDataTableSlots.HEADER_CELL_WRAPPER })<{\n  shouldDropOneLevel: boolean;\n  isDragOverlay?: boolean;\n  isDragging?: boolean;\n  isFirst?: boolean;\n  isLast?: boolean;\n  gridColumn: string;\n}>`\n  position: relative;\n  ${({ shouldDropOneLevel, isDragOverlay }) => (shouldDropOneLevel && !isDragOverlay ? `top: 50%; height: 50%;` : '')}\n  width: ${(props) => (props.isDragOverlay ? 'fit-content' : '100%')};\n  grid-column: ${(props) => props.gridColumn};\n  background: ${(props) => (props.isDragging ? props.theme.colors.neutral['080'] : 'white')};\n  opacity: ${(props) => (props.isDragging ? 0.8 : 1)};\n  box-shadow: 0 2px 4px 0 ${(props) => (props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent')};\n  border-left: ${({ isFirst }) => (isFirst ? '0px' : '1px')} solid ${(props) => props.theme.colors.neutral['080']};\n  border-right: ${({ isLast }) => (isLast ? '1px' : '0px')} solid ${(props) => props.theme.colors.neutral['080']};\n`;\n\ninterface HeaderCellGroupCompProps {\n  header: DSDataTableT.InternalColumn;\n  isDragOverlay?: boolean;\n  isDraggingParent?: boolean;\n  isLast?: boolean;\n  isFirst?: boolean;\n  level?: number;\n}\n\nconst HeaderCellGroupComp: React.ComponentType<HeaderCellGroupCompProps> = ({\n  header,\n  isDragOverlay,\n  isDraggingParent,\n  isLast,\n  isFirst,\n  level = 0,\n}) => {\n  const visibleColumns = usePropsStore((state) => state.visibleColumns);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const isMultiLevel = visibleColumns.some((col) => !!col.columns);\n\n  const children = header.columns;\n\n  const isDragging = (draggableProps && draggableProps.isDragging) || isDraggingParent;\n  const dropIndicatorPosition =\n    draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;\n\n  const ChildGroup = isDragOverlay ? HeaderCellGroup : HeaderCellGroupSortable;\n\n  const colSpan = children?.length ?? 1;\n  return (\n    <StyledWrapper\n      innerRef={draggableProps ? draggableProps.setNodeRef : undefined}\n      gridColumn={isDragOverlay ? 'auto' : `span ${colSpan}`}\n      isDragOverlay={isDragOverlay}\n      isDragging={isDragging}\n      cols={['auto']}\n      data-testid={isDragOverlay ? DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY : undefined}\n      isFirst={isFirst}\n      isLast={isLast}\n      shouldDropOneLevel={isMultiLevel && level === 0 && !children}\n      getOwnerProps={getOwnerProps}\n    >\n      <HeaderCell column={header} isDragOverlay={isDragOverlay} colSpan={colSpan} />\n      {!!children?.length && !isDragOverlay && (\n        <SortableHeaderCell isGroup items={children} isDragOverlay={isDragOverlay} colId={header.id}>\n          {children.map((h, index) => (\n            <ChildGroup\n              key={h.id}\n              header={h}\n              isDragOverlay={isDragOverlay}\n              isDraggingParent={isDragging}\n              isLast={index === children.length - 1}\n              isFirst={index === 0}\n              level={level + 1}\n            />\n          ))}\n        </SortableHeaderCell>\n      )}\n      {children?.length && isDragOverlay && <EmptyChildrenGroup />}\n      <DropIndicator vertical dropIndicatorPosition={dropIndicatorPosition} isLast={isLast && isDragging} isDropValid />\n    </StyledWrapper>\n  );\n};\n\n// We need to declare this because we MUST avoid the useSortable call in the recursive calls of the function\n\nexport const HeaderCellGroup = HeaderCellGroupComp;\n\nexport const HeaderCellGroupSortable = withDnDSortableColumnContext(HeaderCellGroupComp);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -36,14 +36,14 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_styled = require("../../styled.js");
 var import_useHeaderResizer = require("./useHeaderResizer.js");
-var import_useStore = require("../../configs/useStore/useStore.js");
+var import_createInternalAndPropsContext = require("../../configs/useStore/createInternalAndPropsContext.js");
 const stopPropagation = (e) => e.stopPropagation();
 const HeaderResizer = ({ column, innerRef, isReachable }) => {
   const { isResizing, onResizeStart, onResizeEnd, onResizeHandler, handleKeyboardResize } = (0, import_useHeaderResizer.useHeaderResizer)({
     columnId: column.id,
     innerRef
   });
-  const getOwnerProps = (0, import_useStore.usePropsStore)((store) => store.get);
+  const getOwnerProps = (0, import_createInternalAndPropsContext.usePropsStore)((store) => store.get);
   (0, import_react.useEffect)(() => {
     const addEvents = () => {
       document.addEventListener("mousemove", onResizeHandler);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Headers/HeaderResizer.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useEffect } from 'react';\nimport { StyledResizer } from '../../styled.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useHeaderResizer } from './useHeaderResizer.js';\nimport { usePropsStore } from '../../configs/useStore/useStore.js';\n\nconst stopPropagation = (e: React.MouseEvent) => e.stopPropagation();\n\nexport const HeaderResizer: React.ComponentType<{\n  column: DSDataTableT.InternalColumn;\n  innerRef: React.MutableRefObject<HTMLInputElement | null>;\n  isReachable: boolean;\n}> = ({ column, innerRef, isReachable }) => {\n  const { isResizing, onResizeStart, onResizeEnd, onResizeHandler, handleKeyboardResize } = useHeaderResizer({\n    columnId: column.id,\n    innerRef,\n  });\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  // This setups the event listeners for the resize (only for mouse)\n  // It reacts to the isResizing state change\n  useEffect(() => {\n    const addEvents = () => {\n      document.addEventListener('mousemove', onResizeHandler);\n      document.addEventListener('touchmove', onResizeHandler);\n      document.addEventListener('mouseup', onResizeEnd);\n      document.addEventListener('touchend', onResizeEnd);\n    };\n    const removeEvents = () => {\n      document.removeEventListener('mousemove', onResizeHandler);\n      document.removeEventListener('touchmove', onResizeHandler);\n      document.removeEventListener('mouseup', onResizeEnd);\n      document.removeEventListener('touchend', onResizeEnd);\n    };\n\n    if (isResizing) addEvents();\n    else removeEvents();\n\n    // just in case the component is unmounted\n    return removeEvents;\n  }, [isResizing, onResizeHandler, onResizeEnd]);\n\n  return (\n    <StyledResizer\n      type=\"range\"\n      aria-label=\"Resize column\"\n      tabIndex={isReachable ? 0 : -1}\n      innerRef={innerRef}\n      draggable={false}\n      onMouseDown={onResizeStart}\n      onTouchStart={onResizeStart}\n      onMouseUp={onResizeEnd}\n      onTouchEnd={onResizeEnd}\n      onClick={stopPropagation}\n      onKeyDown={handleKeyboardResize}\n      getOwnerProps={getOwnerProps}\n    />\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2CnB;AA3CJ,mBAAiC;AACjC,oBAA8B;AAE9B,8BAAiC;AACjC,sBAA8B;AAE9B,MAAM,kBAAkB,CAAC,MAAwB,EAAE,gBAAgB;AAE5D,MAAM,gBAIR,CAAC,EAAE,QAAQ,UAAU,YAAY,MAAM;AAC1C,QAAM,EAAE,YAAY,eAAe,aAAa,iBAAiB,qBAAqB,QAAI,0CAAiB;AAAA,IACzG,UAAU,OAAO;AAAA,IACjB;AAAA,EACF,CAAC;AACD,QAAM,oBAAgB,+BAAc,CAAC,UAAU,MAAM,GAAG;AAIxD,8BAAU,MAAM;AACd,UAAM,YAAY,MAAM;AACtB,eAAS,iBAAiB,aAAa,eAAe;AACtD,eAAS,iBAAiB,aAAa,eAAe;AACtD,eAAS,iBAAiB,WAAW,WAAW;AAChD,eAAS,iBAAiB,YAAY,WAAW;AAAA,IACnD;AACA,UAAM,eAAe,MAAM;AACzB,eAAS,oBAAoB,aAAa,eAAe;AACzD,eAAS,oBAAoB,aAAa,eAAe;AACzD,eAAS,oBAAoB,WAAW,WAAW;AACnD,eAAS,oBAAoB,YAAY,WAAW;AAAA,IACtD;AAEA,QAAI,WAAY,WAAU;AAAA,QACrB,cAAa;AAGlB,WAAO;AAAA,EACT,GAAG,CAAC,YAAY,iBAAiB,WAAW,CAAC;AAE7C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAW;AAAA,MACX,UAAU,cAAc,IAAI;AAAA,MAC5B;AAAA,MACA,WAAW;AAAA,MACX,aAAa;AAAA,MACb,cAAc;AAAA,MACd,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,WAAW;AAAA,MACX;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import React, { useEffect } from 'react';\nimport { StyledResizer } from '../../styled.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useHeaderResizer } from './useHeaderResizer.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\n\nconst stopPropagation = (e: React.MouseEvent) => e.stopPropagation();\n\nexport const HeaderResizer: React.ComponentType<{\n  column: DSDataTableT.InternalColumn;\n  innerRef: React.MutableRefObject<HTMLInputElement | null>;\n  isReachable: boolean;\n}> = ({ column, innerRef, isReachable }) => {\n  const { isResizing, onResizeStart, onResizeEnd, onResizeHandler, handleKeyboardResize } = useHeaderResizer({\n    columnId: column.id,\n    innerRef,\n  });\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  // This setups the event listeners for the resize (only for mouse)\n  // It reacts to the isResizing state change\n  useEffect(() => {\n    const addEvents = () => {\n      document.addEventListener('mousemove', onResizeHandler);\n      document.addEventListener('touchmove', onResizeHandler);\n      document.addEventListener('mouseup', onResizeEnd);\n      document.addEventListener('touchend', onResizeEnd);\n    };\n    const removeEvents = () => {\n      document.removeEventListener('mousemove', onResizeHandler);\n      document.removeEventListener('touchmove', onResizeHandler);\n      document.removeEventListener('mouseup', onResizeEnd);\n      document.removeEventListener('touchend', onResizeEnd);\n    };\n\n    if (isResizing) addEvents();\n    else removeEvents();\n\n    // just in case the component is unmounted\n    return removeEvents;\n  }, [isResizing, onResizeHandler, onResizeEnd]);\n\n  return (\n    <StyledResizer\n      type=\"range\"\n      aria-label=\"Resize column\"\n      tabIndex={isReachable ? 0 : -1}\n      innerRef={innerRef}\n      draggable={false}\n      onMouseDown={onResizeStart}\n      onTouchStart={onResizeStart}\n      onMouseUp={onResizeEnd}\n      onTouchEnd={onResizeEnd}\n      onClick={stopPropagation}\n      onKeyDown={handleKeyboardResize}\n      getOwnerProps={getOwnerProps}\n    />\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2CnB;AA3CJ,mBAAiC;AACjC,oBAA8B;AAE9B,8BAAiC;AACjC,2CAA8B;AAE9B,MAAM,kBAAkB,CAAC,MAAwB,EAAE,gBAAgB;AAE5D,MAAM,gBAIR,CAAC,EAAE,QAAQ,UAAU,YAAY,MAAM;AAC1C,QAAM,EAAE,YAAY,eAAe,aAAa,iBAAiB,qBAAqB,QAAI,0CAAiB;AAAA,IACzG,UAAU,OAAO;AAAA,IACjB;AAAA,EACF,CAAC;AACD,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,GAAG;AAIxD,8BAAU,MAAM;AACd,UAAM,YAAY,MAAM;AACtB,eAAS,iBAAiB,aAAa,eAAe;AACtD,eAAS,iBAAiB,aAAa,eAAe;AACtD,eAAS,iBAAiB,WAAW,WAAW;AAChD,eAAS,iBAAiB,YAAY,WAAW;AAAA,IACnD;AACA,UAAM,eAAe,MAAM;AACzB,eAAS,oBAAoB,aAAa,eAAe;AACzD,eAAS,oBAAoB,aAAa,eAAe;AACzD,eAAS,oBAAoB,WAAW,WAAW;AACnD,eAAS,oBAAoB,YAAY,WAAW;AAAA,IACtD;AAEA,QAAI,WAAY,WAAU;AAAA,QACrB,cAAa;AAGlB,WAAO;AAAA,EACT,GAAG,CAAC,YAAY,iBAAiB,WAAW,CAAC;AAE7C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAW;AAAA,MACX,UAAU,cAAc,IAAI;AAAA,MAC5B;AAAA,MACA,WAAW;AAAA,MACX,aAAa;AAAA,MACb,cAAc;AAAA,MACd,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,WAAW;AAAA,MACX;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }