@elliemae/ds-data-table 3.57.0-next.2 → 3.57.0-next.21

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/FilterPopover/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/no-cycle */\n/* eslint-disable no-void */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport type { DSPopperJST } from '@elliemae/ds-popperjs';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { mergeRefs, styled } from '@elliemae/ds-system';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { DSDataTableName, DSDataTableSlots } from '../../DSDataTableDefinitions.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { FilterPopoverProps } from './types.js';\nimport { useGetFilterHandlers } from './useGetFilterHandlers.js';\nimport { useGetFilterVisibility } from './useGetFilterVisibility.js';\n\nconst FilterButton = styled('span', { name: DSDataTableName, slot: DSDataTableSlots.FILTER_POPOVER_BUTTON })<{\n  hide: boolean;\n}>`\n  display: inline-grid;\n  ${(props) => (props.hide ? 'opacity: 0; display: none; width: 0;' : '')}\n`;\n\nconst PopperContent = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.FILTER_POPOVER_CONTENT })`\n  background-color: #fff;\n`;\n\nconst ButtonTrap = ({ cb }: { cb: () => void }) => (\n  <span\n    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n    tabIndex={0}\n    onFocus={(e: React.FocusEvent) => {\n      e.stopPropagation();\n      cb();\n    }}\n  />\n);\n\nexport const FilterPopover: React.ComponentType<FilterPopoverProps> = (props: FilterPopoverProps) => {\n  const { column, customStyles, reduxHeader, menuContent, columnId, ariaLabel, triggerIcon, innerRef } = props;\n\n  const filters = usePropsStore((state) => state.filters);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  const patchHeader = useInternalStore((state) => state.patchHeader);\n\n  const { isIconVisible, isMenuOpen } = useGetFilterVisibility(reduxHeader);\n\n  const [buttonReference, setButtonReference] = useState<HTMLButtonElement | null>(null);\n\n  const [isButtonFocused, setIsButtonFocused] = useState(false);\n\n  const { handleTriggerClick, handleClickOutsideMenu, handleMenuOnKeyDown, handleTriggerOnFocus, handleTriggerOnBlur } =\n    useGetFilterHandlers(props, isMenuOpen, buttonReference, setIsButtonFocused);\n\n  const buttonTrapCallback = useCallback(() => {\n    patchHeader(columnId, { hideFilterMenu: true, hideFilterButton: false });\n    buttonReference?.focus();\n  }, [columnId, patchHeader, buttonReference]);\n\n  const actionRef: Required<DSPopperJST.Props>['actionRef'] = useRef({\n    update: null,\n  });\n\n  useEffect(() => {\n    // When the filters change, we need to update the popper position,\n    // because the filter bar might push the datatable up or down, causing the popper to be misaligned\n    void actionRef.current.update?.();\n  }, [filters]);\n\n  return (\n    <div\n      // This is here to prevent propagation, and not trigger the sort functionality\n      onClick={(e) => e.stopPropagation()}\n      onKeyDown={handleMenuOnKeyDown}\n    >\n      <FilterButton\n        hide={!isIconVisible}\n        data-testid={DATA_TESTID.DATA_TABLE_FILTER_BUTTON}\n        getOwnerProps={getOwnerProps}\n      >\n        <DSButtonV2\n          buttonType=\"icon\"\n          size=\"s\"\n          onClick={handleTriggerClick}\n          onFocus={handleTriggerOnFocus}\n          onBlur={handleTriggerOnBlur}\n          innerRef={mergeRefs(isIconVisible && setButtonReference, innerRef)}\n          tabIndex={reduxHeader?.withTabStops ? 0 : -1}\n          aria-label={ariaLabel}\n          aria-hidden={!isButtonFocused}\n          data-testid={DATA_TESTID.DATA_TABLE_FILTER_BUTTON_ELEMENT}\n        >\n          {triggerIcon}\n        </DSButtonV2>\n      </FilterButton>\n      {buttonReference && (\n        <DSPopperJS\n          actionRef={actionRef}\n          referenceElement={buttonReference}\n          showPopover={isMenuOpen}\n          closeContextMenu={handleClickOutsideMenu}\n          data-testid={DATA_TESTID.DATA_TABLE_FILTER_MENU_CONTENT}\n          startPlacementPreference=\"bottom-end\"\n          customOffset={[5, 4]}\n          withoutArrow\n          withoutAnimation\n          extraPopperStyles={{\n            ...customStyles,\n            minWidth: column.ref?.current?.offsetWidth ?? '0px',\n          }}\n          placementOrderPreference={['bottom-end', 'top-end']}\n        >\n          <PopperContent getOwnerProps={getOwnerProps}>\n            <ButtonTrap cb={buttonTrapCallback} />\n            {menuContent}\n            <ButtonTrap cb={buttonTrapCallback} />\n          </PopperContent>\n        </DSPopperJS>\n      )}\n    </div>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/no-cycle */\n/* eslint-disable no-void */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport type { DSPopperJST } from '@elliemae/ds-popperjs';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { mergeRefs, styled } from '@elliemae/ds-system';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { DSDataTableName, DSDataTableSlots } from '../../constants/index.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { FilterPopoverProps } from './types.js';\nimport { useGetFilterHandlers } from './useGetFilterHandlers.js';\nimport { useGetFilterVisibility } from './useGetFilterVisibility.js';\n\nconst FilterButton = styled('span', { name: DSDataTableName, slot: DSDataTableSlots.FILTER_POPOVER_BUTTON })<{\n  hide: boolean;\n}>`\n  display: inline-grid;\n  ${(props) => (props.hide ? 'opacity: 0; display: none; width: 0;' : '')}\n`;\n\nconst PopperContent = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.FILTER_POPOVER_CONTENT })`\n  background-color: #fff;\n`;\n\nconst StyledPoppoverJS = styled(DSPopperJS, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.FILTER_POPOVER,\n})``;\n\nconst ButtonTrap = ({ cb }: { cb: () => void }) => (\n  <span\n    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n    tabIndex={0}\n    onFocus={(e: React.FocusEvent) => {\n      e.stopPropagation();\n      cb();\n    }}\n  />\n);\n\nexport const FilterPopover: React.ComponentType<FilterPopoverProps> = (props: FilterPopoverProps) => {\n  const { column, customStyles, reduxHeader, menuContent, columnId, ariaLabel, triggerIcon, innerRef } = props;\n\n  const filters = usePropsStore((state) => state.filters);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  const getOwnerPropsArguments = useCallback(\n    () => ({\n      columnId: column.id,\n    }),\n    [column.id],\n  );\n\n  const patchHeader = useInternalStore((state) => state.patchHeader);\n\n  const { isIconVisible, isMenuOpen } = useGetFilterVisibility(reduxHeader);\n\n  const [buttonReference, setButtonReference] = useState<HTMLButtonElement | null>(null);\n\n  const [isButtonFocused, setIsButtonFocused] = useState(false);\n\n  const { handleTriggerClick, handleClickOutsideMenu, handleMenuOnKeyDown, handleTriggerOnFocus, handleTriggerOnBlur } =\n    useGetFilterHandlers(props, isMenuOpen, buttonReference, setIsButtonFocused);\n\n  const buttonTrapCallback = useCallback(() => {\n    patchHeader(columnId, { hideFilterMenu: true, hideFilterButton: false });\n    buttonReference?.focus();\n  }, [columnId, patchHeader, buttonReference]);\n\n  const actionRef: Required<DSPopperJST.Props>['actionRef'] = useRef({\n    update: null,\n  });\n\n  useEffect(() => {\n    // When the filters change, we need to update the popper position,\n    // because the filter bar might push the datatable up or down, causing the popper to be misaligned\n    void actionRef.current.update?.();\n  }, [filters]);\n\n  return (\n    <div\n      // This is here to prevent propagation, and not trigger the sort functionality\n      onClick={(e) => e.stopPropagation()}\n      onKeyDown={handleMenuOnKeyDown}\n    >\n      <FilterButton\n        hide={!isIconVisible}\n        data-testid={DATA_TESTID.DATA_TABLE_FILTER_BUTTON}\n        getOwnerProps={getOwnerProps}\n      >\n        <DSButtonV2\n          buttonType=\"icon\"\n          size=\"s\"\n          onClick={handleTriggerClick}\n          onFocus={handleTriggerOnFocus}\n          onBlur={handleTriggerOnBlur}\n          innerRef={mergeRefs(isIconVisible && setButtonReference, innerRef)}\n          tabIndex={reduxHeader?.withTabStops ? 0 : -1}\n          aria-label={ariaLabel}\n          aria-hidden={!isButtonFocused}\n          data-testid={DATA_TESTID.DATA_TABLE_FILTER_BUTTON_ELEMENT}\n        >\n          {triggerIcon}\n        </DSButtonV2>\n      </FilterButton>\n      {buttonReference && (\n        <StyledPoppoverJS\n          actionRef={actionRef}\n          referenceElement={buttonReference}\n          showPopover={isMenuOpen}\n          closeContextMenu={handleClickOutsideMenu}\n          data-testid={DATA_TESTID.DATA_TABLE_FILTER_MENU_CONTENT}\n          startPlacementPreference=\"bottom-end\"\n          customOffset={[5, 4]}\n          withoutArrow\n          withoutAnimation\n          extraPopperStyles={{\n            ...customStyles,\n            minWidth: column.ref?.current?.offsetWidth ?? '0px',\n          }}\n          placementOrderPreference={['bottom-end', 'top-end']}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          <PopperContent getOwnerProps={getOwnerProps}>\n            <ButtonTrap cb={buttonTrapCallback} />\n            {menuContent}\n            <ButtonTrap cb={buttonTrapCallback} />\n          </PopperContent>\n        </StyledPoppoverJS>\n      )}\n    </div>\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -5,7 +5,7 @@ import { MoreOptionsVert } from "@elliemae/ds-icons";
 import { css, mergeRefs, styled } from "@elliemae/ds-system";
 import { useCallback, useRef, useState } from "react";
 import useOnClickOutside from "use-onclickoutside";
-import { DSDataTableName, DSDataTableSlots } from "../../DSDataTableDefinitions.js";
+import { DSDataTableName, DSDataTableSlots } from "../../constants/index.js";
 import { DATA_TESTID } from "../../configs/constants.js";
 import { usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
 const ToolbarBtns = styled("div", { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_BUTTONS_WRAPPER })``;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/Toolbar/Toolbar.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/no-cycle */\nimport { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { css, mergeRefs, styled } from '@elliemae/ds-system';\nimport React, { useCallback, useRef, useState } from 'react';\nimport useOnClickOutside from 'use-onclickoutside';\nimport { DSDataTableName, DSDataTableSlots } from '../../DSDataTableDefinitions.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\n\nconst ToolbarBtns = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_BUTTONS_WRAPPER })``;\n\nconst boxShadow = css`\n  box-shadow:\n    0 1px 2px 0 rgba(0, 0, 0, 0.13),\n    0 1px 2px 0 rgba(0, 0, 0, 0.2);\n  & > .toolbar-trigger {\n    border: none;\n  }\n`;\n\nconst ToolbarWrapper = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_WRAPPER })<{\n  isOpen: boolean;\n}>`\n  display: flex;\n  align-items: center;\n  pointer-events: all;\n\n  & .toolbar-trigger:focus {\n    z-index: 8;\n  }\n\n  ${({ isOpen }) => isOpen && boxShadow}\n`;\n\nconst StyledButton = styled(DSButtonV3, { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_BUTTON })`\n  background-color: transparent;\n`;\n\nconst ToolbarPosition = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_POSITION })`\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  pointer-events: none;\n  background: transparent;\n  height: 28px;\n  margin-top: 4px;\n  width: 100%;\n  padding-left: 1px;\n  padding-right: 1px;\n  outline: none;\n  &:hover {\n    z-index: 1;\n  }\n  :after {\n    content: '';\n    position: absolute;\n    left: 0px;\n    top: 4px;\n    bottom: 4px;\n    width: 1px;\n    background-color: neutral-080;\n    z-index: 7;\n  }\n`;\n\ninterface ToolbarProps {\n  isRowSelected?: boolean;\n  cell: DSDataTableT.Cell;\n  children: React.ReactNode;\n}\n\nexport const Toolbar: React.ComponentType<ToolbarProps> = ({ isRowSelected, cell, children }) => {\n  const [show, setShow] = useState(false);\n\n  const toolbarRef = useRef<HTMLDivElement | null>(null);\n  const toolbarTriggerRef = useRef<HTMLButtonElement | null>(null);\n\n  const handleOnClickOutside = useCallback(() => setShow(false), []);\n\n  const handleOnClick = useCallback(() => setShow((prev) => !prev), []);\n\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  const stopPropagation: React.MouseEventHandler = useCallback((e) => e.stopPropagation(), []);\n\n  useOnClickOutside(toolbarRef, handleOnClickOutside);\n\n  const onToolbarKeyDown = useCallback((e: React.KeyboardEvent) => {\n    if (e.code === 'Escape') {\n      setShow(false);\n      toolbarTriggerRef.current?.focus();\n    }\n    e.stopPropagation();\n  }, []);\n\n  const handleOnBlurToolBar = useCallback(() => {\n    setTimeout(() => {\n      if (!toolbarRef?.current?.contains?.(document.activeElement)) {\n        setShow(false);\n      }\n    });\n  }, []);\n\n  return (\n    <ToolbarPosition onBlur={handleOnBlurToolBar} innerRef={toolbarRef} tabIndex={-1} getOwnerProps={getOwnerProps}>\n      <ToolbarWrapper\n        onKeyDown={onToolbarKeyDown}\n        onClick={stopPropagation}\n        isOpen={show}\n        getOwnerProps={getOwnerProps}\n      >\n        {show && <ToolbarBtns getOwnerProps={getOwnerProps}>{children}</ToolbarBtns>}\n        <StyledButton\n          buttonType=\"icon\"\n          className=\"toolbar-trigger\"\n          data-testid={DATA_TESTID.DATA_TABLE_TOOLBAR_TRIGGER}\n          innerRef={mergeRefs(toolbarTriggerRef, cell?.ref)}\n          onClick={handleOnClick}\n          tabIndex={isRowSelected === false ? -1 : 0}\n          aria-label=\"Row actions\"\n        >\n          <MoreOptionsVert />\n        </StyledButton>\n      </ToolbarWrapper>\n    </ToolbarPosition>\n  );\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/no-cycle */\nimport { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { css, mergeRefs, styled } from '@elliemae/ds-system';\nimport React, { useCallback, useRef, useState } from 'react';\nimport useOnClickOutside from 'use-onclickoutside';\nimport { DSDataTableName, DSDataTableSlots } from '../../constants/index.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\n\nconst ToolbarBtns = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_BUTTONS_WRAPPER })``;\n\nconst boxShadow = css`\n  box-shadow:\n    0 1px 2px 0 rgba(0, 0, 0, 0.13),\n    0 1px 2px 0 rgba(0, 0, 0, 0.2);\n  & > .toolbar-trigger {\n    border: none;\n  }\n`;\n\nconst ToolbarWrapper = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_WRAPPER })<{\n  isOpen: boolean;\n}>`\n  display: flex;\n  align-items: center;\n  pointer-events: all;\n\n  & .toolbar-trigger:focus {\n    z-index: 8;\n  }\n\n  ${({ isOpen }) => isOpen && boxShadow}\n`;\n\nconst StyledButton = styled(DSButtonV3, { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_BUTTON })`\n  background-color: transparent;\n`;\n\nconst ToolbarPosition = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_POSITION })`\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  pointer-events: none;\n  background: transparent;\n  height: 28px;\n  margin-top: 4px;\n  width: 100%;\n  padding-left: 1px;\n  padding-right: 1px;\n  outline: none;\n  &:hover {\n    z-index: 1;\n  }\n  :after {\n    content: '';\n    position: absolute;\n    left: 0px;\n    top: 4px;\n    bottom: 4px;\n    width: 1px;\n    background-color: neutral-080;\n    z-index: 7;\n  }\n`;\n\ninterface ToolbarProps {\n  isRowSelected?: boolean;\n  cell: DSDataTableT.Cell;\n  children: React.ReactNode;\n}\n\nexport const Toolbar: React.ComponentType<ToolbarProps> = ({ isRowSelected, cell, children }) => {\n  const [show, setShow] = useState(false);\n\n  const toolbarRef = useRef<HTMLDivElement | null>(null);\n  const toolbarTriggerRef = useRef<HTMLButtonElement | null>(null);\n\n  const handleOnClickOutside = useCallback(() => setShow(false), []);\n\n  const handleOnClick = useCallback(() => setShow((prev) => !prev), []);\n\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  const stopPropagation: React.MouseEventHandler = useCallback((e) => e.stopPropagation(), []);\n\n  useOnClickOutside(toolbarRef, handleOnClickOutside);\n\n  const onToolbarKeyDown = useCallback((e: React.KeyboardEvent) => {\n    if (e.code === 'Escape') {\n      setShow(false);\n      toolbarTriggerRef.current?.focus();\n    }\n    e.stopPropagation();\n  }, []);\n\n  const handleOnBlurToolBar = useCallback(() => {\n    setTimeout(() => {\n      if (!toolbarRef?.current?.contains?.(document.activeElement)) {\n        setShow(false);\n      }\n    });\n  }, []);\n\n  return (\n    <ToolbarPosition onBlur={handleOnBlurToolBar} innerRef={toolbarRef} tabIndex={-1} getOwnerProps={getOwnerProps}>\n      <ToolbarWrapper\n        onKeyDown={onToolbarKeyDown}\n        onClick={stopPropagation}\n        isOpen={show}\n        getOwnerProps={getOwnerProps}\n      >\n        {show && <ToolbarBtns getOwnerProps={getOwnerProps}>{children}</ToolbarBtns>}\n        <StyledButton\n          buttonType=\"icon\"\n          className=\"toolbar-trigger\"\n          data-testid={DATA_TESTID.DATA_TABLE_TOOLBAR_TRIGGER}\n          innerRef={mergeRefs(toolbarTriggerRef, cell?.ref)}\n          onClick={handleOnClick}\n          tabIndex={isRowSelected === false ? -1 : 0}\n          aria-label=\"Row actions\"\n        >\n          <MoreOptionsVert />\n        </StyledButton>\n      </ToolbarWrapper>\n    </ToolbarPosition>\n  );\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;AC2GjB,SAMW,KANX;AA1GN,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,KAAK,WAAW,cAAc;AACvC,SAAgB,aAAa,QAAQ,gBAAgB;AACrD,OAAO,uBAAuB;AAC9B,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAG9B,MAAM,cAAc,OAAO,OAAO,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,wBAAwB,CAAC;AAE3G,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASlB,MAAM,iBAAiB,OAAO,OAAO,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWlG,CAAC,EAAE,OAAO,MAAM,UAAU,SAAS;AAAA;AAGvC,MAAM,eAAe,OAAO,YAAY,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,eAAe,CAAC;AAAA;AAAA;AAIxG,MAAM,kBAAkB,OAAO,OAAO,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,iBAAiB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiCjG,MAAM,UAA6C,CAAC,EAAE,eAAe,MAAM,SAAS,MAAM;AAC/F,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAEtC,QAAM,aAAa,OAA8B,IAAI;AACrD,QAAM,oBAAoB,OAAiC,IAAI;AAE/D,QAAM,uBAAuB,YAAY,MAAM,QAAQ,KAAK,GAAG,CAAC,CAAC;AAEjE,QAAM,gBAAgB,YAAY,MAAM,QAAQ,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,CAAC;AAEpE,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AAExD,QAAM,kBAA2C,YAAY,CAAC,MAAM,EAAE,gBAAgB,GAAG,CAAC,CAAC;AAE3F,oBAAkB,YAAY,oBAAoB;AAElD,QAAM,mBAAmB,YAAY,CAAC,MAA2B;AAC/D,QAAI,EAAE,SAAS,UAAU;AACvB,cAAQ,KAAK;AACb,wBAAkB,SAAS,MAAM;AAAA,IACnC;AACA,MAAE,gBAAgB;AAAA,EACpB,GAAG,CAAC,CAAC;AAEL,QAAM,sBAAsB,YAAY,MAAM;AAC5C,eAAW,MAAM;AACf,UAAI,CAAC,YAAY,SAAS,WAAW,SAAS,aAAa,GAAG;AAC5D,gBAAQ,KAAK;AAAA,MACf;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,SACE,oBAAC,mBAAgB,QAAQ,qBAAqB,UAAU,YAAY,UAAU,IAAI,eAChF;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,SAAS;AAAA,MACT,QAAQ;AAAA,MACR;AAAA,MAEC;AAAA,gBAAQ,oBAAC,eAAY,eAA+B,UAAS;AAAA,QAC9D;AAAA,UAAC;AAAA;AAAA,YACC,YAAW;AAAA,YACX,WAAU;AAAA,YACV,eAAa,YAAY;AAAA,YACzB,UAAU,UAAU,mBAAmB,MAAM,GAAG;AAAA,YAChD,SAAS;AAAA,YACT,UAAU,kBAAkB,QAAQ,KAAK;AAAA,YACzC,cAAW;AAAA,YAEX,8BAAC,mBAAgB;AAAA;AAAA,QACnB;AAAA;AAAA;AAAA,EACF,GACF;AAEJ;",
   "names": []
 }

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

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

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

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

package/dist/esm/index.js

@@ -17,6 +17,7 @@ import {
   currencyRangeFilterFn,
   dateRangeFilterFn,
   FilterBarDropdownMenu,
+  FilterMenuButton,
   SkeletonCell,
   SkeletonHeaderCell
 } from "./exported-related/index.js";
@@ -29,13 +30,25 @@ import {
   INTERNAL_COLUMNS
 } from "./addons/Columns/index.js";
 import { useWholeStore } from "./configs/useStore/useStore.js";
-export * from "./DSDataTableDefinitions.js";
+import {
+  DATA_TABLE_DATA_TESTID,
+  DATA_TABLE_SLOTS,
+  DSDataTableDataTestIds,
+  DSDataTableName,
+  DSDataTableSlots
+} from "./constants/index.js";
 export {
+  DATA_TABLE_DATA_TESTID,
+  DATA_TABLE_SLOTS,
+  DSDataTableDataTestIds,
+  DSDataTableName,
+  DSDataTableSlots,
   DataTable,
   DataTableWithSchema,
   EditableCell,
   FILTER_TYPES,
   FilterBarDropdownMenu,
+  FilterMenuButton,
   FilterPopover,
   INTERNAL_COLUMNS,
   ROW_VARIANTS,

package/dist/esm/index.js.map

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

package/dist/esm/parts/DnDHandle.js

@@ -5,7 +5,7 @@ import { GripperVertical } from "@elliemae/ds-icons";
 import { mergeRefs, styled } from "@elliemae/ds-system";
 import { useContext } from "react";
 import { usePropsStore } from "../configs/useStore/createInternalAndPropsContext.js";
-import { DSDataTableName, DSDataTableSlots } from "../DSDataTableDefinitions.js";
+import { DSDataTableName, DSDataTableSlots } from "../constants/index.js";
 import { DATA_TESTID } from "../configs/constants.js";
 import { SortableItemContext } from "./HoC/SortableItemContext.js";
 const StyledGripperButton = styled("div", { name: DSDataTableName, slot: DSDataTableSlots.DRAG_AND_DROP_GRIPPER })`

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/DnDHandle.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { GripperVertical } from '@elliemae/ds-icons';\nimport { mergeRefs, styled } from '@elliemae/ds-system';\nimport React, { useContext } from 'react';\nimport { usePropsStore } from '../configs/useStore/createInternalAndPropsContext.js';\nimport { DSDataTableName, DSDataTableSlots } from '../DSDataTableDefinitions.js';\nimport { DATA_TESTID } from '../configs/constants.js';\nimport { SortableItemContext } from './HoC/SortableItemContext.js';\n\nconst StyledGripperButton = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.DRAG_AND_DROP_GRIPPER })<{\n  isActive: boolean;\n  isDragOverlay?: boolean;\n  isDisabled?: boolean;\n  isDragging: boolean;\n}>`\n  pointer-events: ${({ isDisabled }) => (isDisabled ? 'none' : '')};\n  cursor: ${({ isActive, isDragOverlay, isDisabled }) => {\n    if (isDisabled) return 'not-allowed';\n    if (isActive || isDragOverlay) return 'grabbing';\n    return 'grab';\n  }};\n  outline: none;\n  display: flex;\n  align-items: center;\n  touch-action: none;\n\n  svg {\n    fill: ${({ isDragging, theme }) => isDragging && theme.colors.neutral['500']};\n  }\n`;\n\nexport const DragHandle: React.ComponentType<{\n  id: string;\n  isReachable: boolean;\n  isDragOverlay?: boolean;\n  isDisabled?: boolean;\n  innerRef: React.RefObject<HTMLDivElement> | React.RefCallback<HTMLDivElement>;\n}> = ({ id, isReachable, isDragOverlay, innerRef, isDisabled }) => {\n  const { draggableProps } = useContext(SortableItemContext);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  const isActive = draggableProps && !!draggableProps.active;\n  const isDragging = draggableProps && draggableProps.isDragging;\n  const setActivatorNodeRef = draggableProps && draggableProps.setActivatorNodeRef;\n\n  return (\n    <StyledGripperButton\n      role=\"button\"\n      {...(draggableProps &&\n        !isDisabled && {\n          ...draggableProps.listeners,\n          ...draggableProps.attributes,\n        })}\n      isActive={isActive}\n      isDragOverlay={isDragOverlay}\n      innerRef={mergeRefs(innerRef, setActivatorNodeRef)}\n      tabIndex={isReachable ? 0 : -1}\n      data-testid={DATA_TESTID.DATA_TABLE_DRAG_HANDLE}\n      id={`drag-handle-btn-${id}`} // the domIdAffix should already be part of the props.id...\n      key={`${id}-drag-handle`}\n      aria-label=\"Drag handle\"\n      isDragging={isDragging}\n      isDisabled={isDisabled}\n      getOwnerProps={getOwnerProps}\n    >\n      <GripperVertical size=\"s\" />\n    </StyledGripperButton>\n  );\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { GripperVertical } from '@elliemae/ds-icons';\nimport { mergeRefs, styled } from '@elliemae/ds-system';\nimport React, { useContext } from 'react';\nimport { usePropsStore } from '../configs/useStore/createInternalAndPropsContext.js';\nimport { DSDataTableName, DSDataTableSlots } from '../constants/index.js';\nimport { DATA_TESTID } from '../configs/constants.js';\nimport { SortableItemContext } from './HoC/SortableItemContext.js';\n\nconst StyledGripperButton = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.DRAG_AND_DROP_GRIPPER })<{\n  isActive: boolean;\n  isDragOverlay?: boolean;\n  isDisabled?: boolean;\n  isDragging: boolean;\n}>`\n  pointer-events: ${({ isDisabled }) => (isDisabled ? 'none' : '')};\n  cursor: ${({ isActive, isDragOverlay, isDisabled }) => {\n    if (isDisabled) return 'not-allowed';\n    if (isActive || isDragOverlay) return 'grabbing';\n    return 'grab';\n  }};\n  outline: none;\n  display: flex;\n  align-items: center;\n  touch-action: none;\n\n  svg {\n    fill: ${({ isDragging, theme }) => isDragging && theme.colors.neutral['500']};\n  }\n`;\n\nexport const DragHandle: React.ComponentType<{\n  id: string;\n  isReachable: boolean;\n  isDragOverlay?: boolean;\n  isDisabled?: boolean;\n  innerRef: React.RefObject<HTMLDivElement> | React.RefCallback<HTMLDivElement>;\n}> = ({ id, isReachable, isDragOverlay, innerRef, isDisabled }) => {\n  const { draggableProps } = useContext(SortableItemContext);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  const isActive = draggableProps && !!draggableProps.active;\n  const isDragging = draggableProps && draggableProps.isDragging;\n  const setActivatorNodeRef = draggableProps && draggableProps.setActivatorNodeRef;\n\n  return (\n    <StyledGripperButton\n      role=\"button\"\n      {...(draggableProps &&\n        !isDisabled && {\n          ...draggableProps.listeners,\n          ...draggableProps.attributes,\n        })}\n      isActive={isActive}\n      isDragOverlay={isDragOverlay}\n      innerRef={mergeRefs(innerRef, setActivatorNodeRef)}\n      tabIndex={isReachable ? 0 : -1}\n      data-testid={DATA_TESTID.DATA_TABLE_DRAG_HANDLE}\n      id={`drag-handle-btn-${id}`} // the domIdAffix should already be part of the props.id...\n      key={`${id}-drag-handle`}\n      aria-label=\"Drag handle\"\n      isDragging={isDragging}\n      isDisabled={isDisabled}\n      getOwnerProps={getOwnerProps}\n    >\n      <GripperVertical size=\"s\" />\n    </StyledGripperButton>\n  );\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACgEjB;AAnBF;AA7CJ,SAAS,uBAAuB;AAChC,SAAS,WAAW,cAAc;AAClC,SAAgB,kBAAkB;AAClC,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,mBAAmB;AAC5B,SAAS,2BAA2B;AAEpC,MAAM,sBAAsB,OAAO,OAAO,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,sBAAsB,CAAC;AAAA,oBAM7F,CAAC,EAAE,WAAW,MAAO,aAAa,SAAS,EAAG;AAAA,YACtD,CAAC,EAAE,UAAU,eAAe,WAAW,MAAM;AACrD,MAAI,WAAY,QAAO;AACvB,MAAI,YAAY,cAAe,QAAO;AACtC,SAAO;AACT,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOS,CAAC,EAAE,YAAY,MAAM,MAAM,cAAc,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAIzE,MAAM,aAMR,CAAC,EAAE,IAAI,aAAa,eAAe,UAAU,WAAW,MAAM;AACjE,QAAM,EAAE,eAAe,IAAI,WAAW,mBAAmB;AACzD,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AAExD,QAAM,WAAW,kBAAkB,CAAC,CAAC,eAAe;AACpD,QAAM,aAAa,kBAAkB,eAAe;AACpD,QAAM,sBAAsB,kBAAkB,eAAe;AAE7D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACJ,GAAI,kBACH,CAAC,cAAc;AAAA,QACb,GAAG,eAAe;AAAA,QAClB,GAAG,eAAe;AAAA,MACpB;AAAA,MACF;AAAA,MACA;AAAA,MACA,UAAU,UAAU,UAAU,mBAAmB;AAAA,MACjD,UAAU,cAAc,IAAI;AAAA,MAC5B,eAAa,YAAY;AAAA,MACzB,IAAI,mBAAmB,EAAE;AAAA,MACzB,KAAK,GAAG,EAAE;AAAA,MACV,cAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEA,oBAAC,mBAAgB,MAAK,KAAI;AAAA,EAC5B;AAEJ;",
   "names": []
 }

package/dist/esm/parts/DropIndicator.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { styled } from "@elliemae/ds-system";
-import { DSDataTableName, DSDataTableSlots } from "../DSDataTableDefinitions.js";
+import { DSDataTableName, DSDataTableSlots } from "../constants/index.js";
 import { DropIndicatorPosition } from "../configs/constants.js";
 import { usePropsStore } from "../configs/useStore/createInternalAndPropsContext.js";
 import { ZIndexDataTable } from "../configs/zIndexInternalConfig.js";

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/DropIndicator.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport { DSDataTableName, DSDataTableSlots } from '../constants/index.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"],
   "mappings": "AAAA,YAAY,WAAW;ACqDnB,SAkBA,UAlBA,KAkBA,YAlBA;AArDJ,SAAS,cAAc;AAEvB,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,6BAA6B;AACtC,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AAUhC,MAAM,oBAAoB,CAAC,EAAE,uBAAuB,SAAS,MAA0B;AACrF,MAAI,UAAU;AACZ,WAAO;AAAA,cACG,0BAA0B,sBAAsB,SAAS,MAAM,OAAO;AAAA,eACrE,0BAA0B,sBAAsB,QAAQ,MAAM,OAAO;AAAA;AAAA,EAElF;AACA,SAAO;AAAA,aACI,0BAA0B,sBAAsB,SAAS,MAAM,OAAO;AAAA,gBACnE,0BAA0B,sBAAsB,QAAQ,MAAM,OAAO;AAAA;AAErF;AAEA,MAAM,kBAAkB,CAAC,EAAE,uBAAuB,SAAS,OAA2B;AAAA,EACpF,UAAU;AAAA,EACV,QAAQ,gBAAgB;AAAA,EACxB,KAAK,YAAY,0BAA0B,sBAAsB,QAAQ,UAAU;AAAA,EACnF,QAAQ,YAAY,0BAA0B,sBAAsB,SAAS,UAAU;AAAA,EACvF,MAAM,CAAC,YAAY,0BAA0B,sBAAsB,QAAQ,UAAU;AAAA,EACrF,OAAO,CAAC,YAAY,0BAA0B,sBAAsB,SAAS,UAAU;AAAA,EACvF,SAAS;AACX;AAEA,MAAM,kBAAkB,OAAO,OAAO;AAAA,EACpC,MAAM;AAAA,EACN,MAAM,iBAAiB;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,gBAAgB,cAAc;AAAA;AAG3C,MAAM,kBAAkB,CAAC,OAAgC,gBACvD,oBAAC,SAAI,QAAO,KAAI,OAAM,KAAI,OACxB,8BAAC,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,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AAExD,MACE,0BAA0B,SAC1B,0BAA0B,sBAAsB,QAChD,0BAA0B,sBAAsB;AAEhD,WAAO;AAET,QAAM,4BAA4B,SAAS,sBAAsB,SAAS;AAE1E,SACE,iCACG;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/esm/parts/EmptyContent.js

@@ -6,7 +6,7 @@ import { WarningTriangle } from "@elliemae/ds-icons";
 import { __UNSAFE_SPACE_TO_DIMSUM, styled, toMobile } from "@elliemae/ds-system";
 import React2 from "react";
 import { usePropsStore } from "../configs/useStore/createInternalAndPropsContext.js";
-import { DSDataTableName, DSDataTableSlots } from "../DSDataTableDefinitions.js";
+import { DSDataTableName, DSDataTableSlots } from "../constants/index.js";
 const Icon = styled(WarningTriangle, { name: DSDataTableName, slot: DSDataTableSlots.WARNING_ICON })`
   fill: ${(props) => props.theme.colors.neutral[300]};
   color: ${(props) => props.theme.colors.neutral[300]};

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/EmptyContent.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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 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`;\n\nconst EmptyStateContent = () => {\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 isSkeleton = usePropsStore((state) => state.isSkeleton);\n  const noResultsPlaceholder = usePropsStore((state) => state.noResultsPlaceholder);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  if (isSkeleton) return null;\n\n  if (React.isValidElement(noResultsPlaceholder)) return noResultsPlaceholder;\n\n  return (\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    </>\n  );\n};\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`;\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`;\n\nconst EmptyContent: React.ComponentType = () => {\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const bodyClientWidth = usePropsStore((state) => state.bodyClientWidth);\n\n  return (\n    <CenterContentFlexWrapper width=\"100%\" role=\"row\" getOwnerProps={getOwnerProps}>\n      <EmptyStateWrapper\n        width={bodyClientWidth}\n        justifyContent=\"center\"\n        role=\"cell\"\n        aria-live=\"assertive\"\n        getOwnerProps={getOwnerProps}\n      >\n        <EmptyStateContent />\n      </EmptyStateWrapper>\n    </CenterContentFlexWrapper>\n  );\n};\n\nexport { EmptyContent };\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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 '../constants/index.js';\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`;\n\nconst EmptyStateContent = () => {\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 isSkeleton = usePropsStore((state) => state.isSkeleton);\n  const noResultsPlaceholder = usePropsStore((state) => state.noResultsPlaceholder);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  if (isSkeleton) return null;\n\n  if (React.isValidElement(noResultsPlaceholder)) return noResultsPlaceholder;\n\n  return (\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    </>\n  );\n};\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`;\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`;\n\nconst EmptyContent: React.ComponentType = () => {\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const bodyClientWidth = usePropsStore((state) => state.bodyClientWidth);\n\n  return (\n    <CenterContentFlexWrapper width=\"100%\" role=\"row\" getOwnerProps={getOwnerProps}>\n      <EmptyStateWrapper\n        width={bodyClientWidth}\n        justifyContent=\"center\"\n        role=\"cell\"\n        aria-live=\"assertive\"\n        getOwnerProps={getOwnerProps}\n      >\n        <EmptyStateContent />\n      </EmptyStateWrapper>\n    </CenterContentFlexWrapper>\n  );\n};\n\nexport { EmptyContent };\n"],
   "mappings": "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",
   "names": ["React"]
 }

package/dist/esm/parts/FilterBar/styled.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Grid } from "@elliemae/ds-grid";
 import { styled } from "@elliemae/ds-system";
-import { DSDataTableName, DSDataTableSlots } from "../../DSDataTableDefinitions.js";
+import { DSDataTableName, DSDataTableSlots } from "../../constants/index.js";
 const StyledWrapper = styled(Grid, { name: DSDataTableName, slot: DSDataTableSlots.FILTER_BAR_WRAPPER })`
   display: flex;
   flex-wrap: wrap;

package/dist/esm/parts/FilterBar/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/FilterBar/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { DSDataTableName, DSDataTableSlots } from '../../DSDataTableDefinitions.js';\n\nexport const StyledWrapper = styled(Grid, { name: DSDataTableName, slot: DSDataTableSlots.FILTER_BAR_WRAPPER })`\n  display: flex;\n  flex-wrap: wrap;\n  width: ${(props) => props.width};\n  align-items: center;\n  min-height: 33px; // height of the pills\n  padding: 0 ${(props) => props.theme.space.xxxs};\n`;\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { DSDataTableName, DSDataTableSlots } from '../../constants/index.js';\n\nexport const StyledWrapper = styled(Grid, { name: DSDataTableName, slot: DSDataTableSlots.FILTER_BAR_WRAPPER })`\n  display: flex;\n  flex-wrap: wrap;\n  width: ${(props) => props.width};\n  align-items: center;\n  min-height: 33px; // height of the pills\n  padding: 0 ${(props) => props.theme.space.xxxs};\n`;\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,SAAS,iBAAiB,wBAAwB;AAE3C,MAAM,gBAAgB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,mBAAmB,CAAC;AAAA;AAAA;AAAA,WAGnG,CAAC,UAAU,MAAM,KAAK;AAAA;AAAA;AAAA,eAGlB,CAAC,UAAU,MAAM,MAAM,MAAM,IAAI;AAAA;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { styled } from "@elliemae/ds-system";
-import { DSDataTableName, DSDataTableSlots } from "../../DSDataTableDefinitions.js";
+import { DSDataTableName, DSDataTableSlots } from "../../constants/index.js";
 import { usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
 const StyledBox = styled("div", { name: DSDataTableName, slot: DSDataTableSlots.EMPTY_HEADER })`
   height: 24px;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Headers/EmptyChildrenGroup.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport { DSDataTableName, DSDataTableSlots } from '../../constants/index.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"],
   "mappings": "AAAA,YAAY,WAAW;ACad;AAbT,SAAS,cAAc;AAEvB,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,qBAAqB;AAE9B,MAAM,YAAY,OAAO,OAAO,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,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,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,SAAO,oBAAC,aAAU,eAA8B;AAClD;",
   "names": []
 }

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

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Grid } from "@elliemae/ds-grid";
 import { styled } from "@elliemae/ds-system";
 import { useContext } from "react";
-import { DSDataTableName, DSDataTableSlots } from "../../DSDataTableDefinitions.js";
+import { DSDataTableName, DSDataTableSlots } from "../../constants/index.js";
 import { DATA_TESTID } from "../../configs/index.js";
 import { usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
 import { DropIndicator } from "../DropIndicator.js";

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Headers/HeaderCellGroup.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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 '../../constants/index.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"],
   "mappings": "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",
   "names": []
 }

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

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

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

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

package/dist/esm/parts/Loader.js

@@ -4,7 +4,7 @@ import { DSCircularProgressIndicator } from "@elliemae/ds-circular-progress-indi
 import { Grid } from "@elliemae/ds-grid";
 import { styled } from "@elliemae/ds-system";
 import { memo } from "react";
-import { DSDataTableName, DSDataTableSlots } from "../DSDataTableDefinitions.js";
+import { DSDataTableName, DSDataTableSlots } from "../constants/index.js";
 import { usePropsStore } from "../configs/useStore/createInternalAndPropsContext.js";
 const StyledLoaderWrapper = styled(Grid, { name: DSDataTableName, slot: DSDataTableSlots.LOADER_WRAPPER })`
   place-items: center;