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

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

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

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

@@ -28,7 +28,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__ */ jsx(
       DSButtonV2,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/FilterBar/DeprecatedDropdown.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "// 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"],
-  "mappings": "AAAA,YAAY,WAAW;ACqDf;AAlDR,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,mBAAmB;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,YAAY;AAAA,QACzB,YAAW;AAAA,QACX,UAAU;AAAA,QACV,SAAS;AAAA,QACT,cAAW;AAAA,QACX,OAAO,EAAE,YAAY,OAAO;AAAA,QAE5B,8BAAC,mBAAgB;AAAA;AAAA,IACnB;AAAA;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "// 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"],
+  "mappings": "AAAA,YAAY,WAAW;AC0Df;AAvDR,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,mBAAmB;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,YAAY;AAAA,QACzB,YAAW;AAAA,QACX,UAAU;AAAA,QACV,SAAS;AAAA,QACT,cAAW;AAAA,QACX,OAAO,EAAE,YAAY,OAAO;AAAA,QAE5B,8BAAC,mBAAgB;AAAA;AAAA,IACnB;AAAA;AAEJ;",
   "names": []
 }

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

@@ -12,7 +12,7 @@ import {
 } from "./components/index.js";
 import { StyledWrapper } from "./styled.js";
 import { DeprecatedDropdown } from "./DeprecatedDropdown.js";
-import { usePropsStore } from "../../configs/useStore/useStore.js";
+import { usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
 const pillRenderMapper = {
   [FILTER_TYPES.SELECT]: SelectPill,
   [FILTER_TYPES.MULTI_SELECT]: MultiSelectPill,

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

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

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

@@ -1,20 +1,20 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { useCallback, useMemo } from "react";
 import { cloneDeep } from "lodash";
+import { useCallback, useMemo } from "react";
 import {
+  CurrencyRangeFilter,
   DateRangeFilter,
   DateSwitcherFilter,
+  MultiCreatableFilter,
+  MultiSelectFilter,
   NumberRangeFilter,
-  SingleSelectFilter,
   SingleCreatableFilter,
-  MultiSelectFilter,
-  MultiCreatableFilter,
   SingleDateFilter,
-  CurrencyRangeFilter
+  SingleSelectFilter
 } from "../../addons/Filters/index.js";
+import { useInternalStore, usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
 import { FILTER_TYPES } from "../../exported-related/index.js";
-import { useInternalStore, usePropsStore } from "../../configs/useStore/useStore.js";
 const FilterMapper = {
   [FILTER_TYPES.SELECT]: SingleSelectFilter,
   [FILTER_TYPES.CREATABLE_SELECT]: SingleCreatableFilter,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Filters/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACsEZ;AAtEX,SAAgB,aAAa,eAAe;AAC5C,SAAS,iBAAiB;AAC1B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB;AAE7B,SAAS,kBAAkB,qBAAqB;AAEhD,MAAM,eAAe;AAAA,EACnB,CAAC,aAAa,MAAM,GAAG;AAAA,EACvB,CAAC,aAAa,gBAAgB,GAAG;AAAA,EACjC,CAAC,aAAa,YAAY,GAAG;AAAA,EAC7B,CAAC,aAAa,sBAAsB,GAAG;AAAA,EACvC,CAAC,aAAa,WAAW,GAAG;AAAA,EAC5B,CAAC,aAAa,UAAU,GAAG;AAAA,EAC3B,CAAC,aAAa,aAAa,GAAG;AAAA,EAC9B,CAAC,aAAa,YAAY,GAAG;AAAA,EAC7B,CAAC,aAAa,cAAc,GAAG;AACjC;AAEO,MAAM,gBAAmE,CAAC,UAAU;AACzF,QAAM,EAAE,QAAQ,SAAS,gBAAgB,IAAI;AAC7C,QAAM,aAAa,cAAc,CAAC,UAAU,MAAM,UAAU;AAC5D,QAAM,iCAAiC,iBAAiB,CAAC,UAAU,MAAM,8BAA8B;AACvG,QAAM,cAAc,iBAAiB,CAAC,UAAU,MAAM,WAAW;AAEjE,QAAM,cAAc,QAAQ,MAAM,QAAQ,KAAK,CAAC,WAAW,OAAO,OAAO,OAAO,EAAE,GAAG,CAAC,OAAO,IAAI,OAAO,CAAC;AAEzG,QAAM,gBAAgB;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,GAAG,UAAU,OAAO,GAAG,EAAE,IAAI,OAAO,IAAI,MAAM,OAAO,SAAS,CAAC,CAAC;AAAA,MACnF,OAAO;AACL,cAAM,aAAa,UAAU,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,oBAAC,cAAY,GAAG,aAAa;AAAA,EACtC;AAEA,MAAI,OAAO,QAAQ;AACjB,UAAM,aAAa,OAAO;AAC1B,WAAO,oBAAC,cAAY,GAAG,aAAa;AAAA,EACtC;AAGA,SAAO;AACT;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACsEZ;AAtEX,SAAS,iBAAiB;AAC1B,SAAgB,aAAa,eAAe;AAC5C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,kBAAkB,qBAAqB;AAChD,SAAS,oBAAoB;AAG7B,MAAM,eAAe;AAAA,EACnB,CAAC,aAAa,MAAM,GAAG;AAAA,EACvB,CAAC,aAAa,gBAAgB,GAAG;AAAA,EACjC,CAAC,aAAa,YAAY,GAAG;AAAA,EAC7B,CAAC,aAAa,sBAAsB,GAAG;AAAA,EACvC,CAAC,aAAa,WAAW,GAAG;AAAA,EAC5B,CAAC,aAAa,UAAU,GAAG;AAAA,EAC3B,CAAC,aAAa,aAAa,GAAG;AAAA,EAC9B,CAAC,aAAa,YAAY,GAAG;AAAA,EAC7B,CAAC,aAAa,cAAc,GAAG;AACjC;AAEO,MAAM,gBAAmE,CAAC,UAAU;AACzF,QAAM,EAAE,QAAQ,SAAS,gBAAgB,IAAI;AAC7C,QAAM,aAAa,cAAc,CAAC,UAAU,MAAM,UAAU;AAC5D,QAAM,iCAAiC,iBAAiB,CAAC,UAAU,MAAM,8BAA8B;AACvG,QAAM,cAAc,iBAAiB,CAAC,UAAU,MAAM,WAAW;AAEjE,QAAM,cAAc,QAAQ,MAAM,QAAQ,KAAK,CAAC,WAAW,OAAO,OAAO,OAAO,EAAE,GAAG,CAAC,OAAO,IAAI,OAAO,CAAC;AAEzG,QAAM,gBAAgB;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,GAAG,UAAU,OAAO,GAAG,EAAE,IAAI,OAAO,IAAI,MAAM,OAAO,SAAS,CAAC,CAAC;AAAA,MACnF,OAAO;AACL,cAAM,aAAa,UAAU,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,oBAAC,cAAY,GAAG,aAAa;AAAA,EACtC;AAEA,MAAI,OAAO,QAAQ;AACjB,UAAM,aAAa,OAAO;AAC1B,WAAO,oBAAC,cAAY,GAAG,aAAa;AAAA,EACtC;AAGA,SAAO;AACT;",
   "names": []
 }

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

@@ -2,7 +2,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 { usePropsStore } from "../../configs/useStore/useStore.js";
+import { usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
 const StyledBox = styled("div", { name: DSDataTableName, slot: DSDataTableSlots.EMPTY_HEADER })`
   height: 24px;
   margin: 0 ${(props) => props.theme.space.xxs};

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

@@ -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 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"],
-  "mappings": "AAAA,YAAY,WAAW;ACad;AAZT,SAAS,cAAc;AACvB,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;",
+  "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"],
+  "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/HeaderCell.js CHANGED Viewed

@@ -12,7 +12,7 @@ import { useHeaderCellHandlers } from "./useHeaderCellHandlers.js";
 import { useHeaderCellConfig } from "./useHeaderCellConfig.js";
 import { DATA_TESTID } from "../../configs/constants.js";
 import { HeaderCellTitle } from "./HeaderCellTitle.js";
-import { useInternalStore, usePropsStore } from "../../configs/useStore/useStore.js";
+import { useInternalStore, usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
 const buildScreenReaderInstructions = ({
   colSpan,
   draggable,

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

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

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

@@ -1,17 +1,17 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useContext } from "react";
 import { Grid } from "@elliemae/ds-grid";
 import { styled } from "@elliemae/ds-system";
-import { HeaderCell } from "./HeaderCell.js";
-import { SortableItemContext } from "../HoC/SortableItemContext.js";
-import { withDnDSortableColumnContext } from "../internal.js";
+import { useContext } from "react";
+import { DSDataTableName, DSDataTableSlots } from "../../DSDataTableDefinitions.js";
+import { DATA_TESTID } from "../../configs/index.js";
+import { usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
 import { DropIndicator } from "../DropIndicator.js";
+import { SortableItemContext } from "../HoC/SortableItemContext.js";
+import { withDnDSortableColumnContext } from "../HoC/withDnDSortableColumnContext.js";
 import { SortableHeaderCell } from "../SortableHeaderCell.js";
 import { EmptyChildrenGroup } from "./EmptyChildrenGroup.js";
-import { DATA_TESTID } from "../../configs/index.js";
-import { usePropsStore } from "../../configs/useStore/useStore.js";
-import { DSDataTableName, DSDataTableSlots } from "../../DSDataTableDefinitions.js";
+import { HeaderCell } from "./HeaderCell.js";
 const StyledWrapper = styled(Grid, { name: DSDataTableName, slot: DSDataTableSlots.HEADER_CELL_WRAPPER })`
   position: relative;
   ${({ shouldDropOneLevel, isDragOverlay }) => shouldDropOneLevel && !isDragOverlay ? `top: 50%; height: 50%;` : ""}

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

@@ -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 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"],
-  "mappings": "AAAA,YAAY,WAAW;ACqEnB,SAYE,KAZF;AAnEJ,SAAgB,kBAAkB;AAClC,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,2BAA2B;AACpC,SAAS,oCAAoC;AAC7C,SAAS,qBAAqB;AAC9B,SAAS,0BAA0B;AAEnC,SAAS,0BAA0B;AACnC,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,gBAAgB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,oBAAoB,CAAC;AAAA;AAAA,IASpG,CAAC,EAAE,oBAAoB,cAAc,MAAO,sBAAsB,CAAC,gBAAgB,2BAA2B,EAAG;AAAA,WAC1G,CAAC,UAAW,MAAM,gBAAgB,gBAAgB,MAAO;AAAA,iBACnD,CAAC,UAAU,MAAM,UAAU;AAAA,gBAC5B,CAAC,UAAW,MAAM,aAAa,MAAM,MAAM,OAAO,QAAQ,KAAK,IAAI,OAAQ;AAAA,aAC9E,CAAC,UAAW,MAAM,aAAa,MAAM,CAAE;AAAA,4BACxB,CAAC,UAAW,MAAM,gBAAgB,oBAAoB,aAAc;AAAA,iBAC/E,CAAC,EAAE,QAAQ,MAAO,UAAU,QAAQ,KAAM,UAAU,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,kBAC/F,CAAC,EAAE,OAAO,MAAO,SAAS,QAAQ,KAAM,UAAU,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAYhH,MAAM,sBAAqE,CAAC;AAAA,EAC1E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AACV,MAAM;AACJ,QAAM,iBAAiB,cAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AAExD,QAAM,EAAE,eAAe,IAAI,WAAW,mBAAmB;AAEzD,QAAM,eAAe,eAAe,KAAK,CAAC,QAAQ,CAAC,CAAC,IAAI,OAAO;AAE/D,QAAM,WAAW,OAAO;AAExB,QAAM,aAAc,kBAAkB,eAAe,cAAe;AACpE,QAAM,wBACJ,kBAAkB,eAAe,mCAAmC,eAAe;AAErF,QAAM,aAAa,gBAAgB,kBAAkB;AAErD,QAAM,UAAU,UAAU,UAAU;AACpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,iBAAiB,eAAe,aAAa;AAAA,MACvD,YAAY,gBAAgB,SAAS,QAAQ,OAAO;AAAA,MACpD;AAAA,MACA;AAAA,MACA,MAAM,CAAC,MAAM;AAAA,MACb,eAAa,gBAAgB,YAAY,iCAAiC;AAAA,MAC1E;AAAA,MACA;AAAA,MACA,oBAAoB,gBAAgB,UAAU,KAAK,CAAC;AAAA,MACpD;AAAA,MAEA;AAAA,4BAAC,cAAW,QAAQ,QAAQ,eAA8B,SAAkB;AAAA,QAC3E,CAAC,CAAC,UAAU,UAAU,CAAC,iBACtB,oBAAC,sBAAmB,SAAO,MAAC,OAAO,UAAU,eAA8B,OAAO,OAAO,IACtF,mBAAS,IAAI,CAAC,GAAG,UAChB;AAAA,UAAC;AAAA;AAAA,YAEC,QAAQ;AAAA,YACR;AAAA,YACA,kBAAkB;AAAA,YAClB,QAAQ,UAAU,SAAS,SAAS;AAAA,YACpC,SAAS,UAAU;AAAA,YACnB,OAAO,QAAQ;AAAA;AAAA,UANV,EAAE;AAAA,QAOT,CACD,GACH;AAAA,QAED,UAAU,UAAU,iBAAiB,oBAAC,sBAAmB;AAAA,QAC1D,oBAAC,iBAAc,UAAQ,MAAC,uBAA8C,QAAQ,UAAU,YAAY,aAAW,MAAC;AAAA;AAAA;AAAA,EAClH;AAEJ;AAIO,MAAM,kBAAkB;AAExB,MAAM,0BAA0B,6BAA6B,mBAAmB;",
+  "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"],
+  "mappings": "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",
   "names": []
 }

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

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import { useEffect } from "react";
 import { StyledResizer } from "../../styled.js";
 import { useHeaderResizer } from "./useHeaderResizer.js";
-import { usePropsStore } from "../../configs/useStore/useStore.js";
+import { usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
 const stopPropagation = (e) => e.stopPropagation();
 const HeaderResizer = ({ column, innerRef, isReachable }) => {
   const { isResizing, onResizeStart, onResizeEnd, onResizeHandler, handleKeyboardResize } = useHeaderResizer({

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Headers/HeaderResizer.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
   "mappings": "AAAA,YAAY,WAAW;AC2CnB;AA3CJ,SAAgB,iBAAiB;AACjC,SAAS,qBAAqB;AAE9B,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAE9B,MAAM,kBAAkB,CAAC,MAAwB,EAAE,gBAAgB;AAE5D,MAAM,gBAIR,CAAC,EAAE,QAAQ,UAAU,YAAY,MAAM;AAC1C,QAAM,EAAE,YAAY,eAAe,aAAa,iBAAiB,qBAAqB,IAAI,iBAAiB;AAAA,IACzG,UAAU,OAAO;AAAA,IACjB;AAAA,EACF,CAAC;AACD,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AAIxD,YAAU,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": []
 }

package/dist/esm/parts/Headers/index.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { withConditionalDnDColumnContext } from "../HoC/withConditionalDnDColumn
 import { HeaderCellGroupSortable } from "./HeaderCellGroup.js";
 import { SortableHeaderCell } from "../SortableHeaderCell.js";
 import { setSubColumnsGridLayout } from "../../helpers/gridLayoutHelpers.js";
-import { usePropsStore } from "../../configs/useStore/useStore.js";
+import { usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
 const HeadersComp = () => {
   const isExpandable = usePropsStore((state) => state.isExpandable);
   const isSkeleton = usePropsStore((state) => state.isSkeleton);

package/dist/esm/parts/Headers/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Headers/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useEffect } from 'react';\nimport { StyledHeadWrapper, StyledHeadTr } from '../../styled.js';\nimport { withConditionalDnDColumnContext } from '../HoC/withConditionalDnDColumnContext.js';\nimport { HeaderCellGroupSortable } from './HeaderCellGroup.js';\nimport { SortableHeaderCell } from '../SortableHeaderCell.js';\nimport { setSubColumnsGridLayout } from '../../helpers/gridLayoutHelpers.js';\nimport { usePropsStore } from '../../configs/useStore/useStore.js';\n\nconst HeadersComp = () => {\n  const isExpandable = usePropsStore((state) => state.isExpandable);\n  const isSkeleton = usePropsStore((state) => state.isSkeleton);\n  const colsLayoutStyle = usePropsStore((state) => state.colsLayoutStyle);\n  const visibleColumns = usePropsStore((state) => state.visibleColumns);\n  const columnHeaderRef = usePropsStore((state) => state.columnHeaderRef);\n  const virtualListRef = usePropsStore((state) => state.virtualListRef);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  useEffect(() => {\n    // TODO: remove this, for further info see the comment on setSubColumnsGridLayout\n    setSubColumnsGridLayout(virtualListRef.current, visibleColumns, true);\n  }, [virtualListRef, visibleColumns]);\n\n  if (visibleColumns.length === 0 && isSkeleton) {\n    return null;\n  }\n  return (\n    <StyledHeadWrapper colsLayoutStyle={colsLayoutStyle} innerRef={columnHeaderRef} getOwnerProps={getOwnerProps}>\n      <SortableHeaderCell items={visibleColumns}>\n        <StyledHeadTr\n          role=\"row\"\n          colsLayoutStyle={colsLayoutStyle}\n          isExpandable={isExpandable}\n          getOwnerProps={getOwnerProps}\n        >\n          {visibleColumns.map((h, index) => (\n            <HeaderCellGroupSortable header={h} key={h.id} isLast={index === visibleColumns.length - 1} />\n          ))}\n        </StyledHeadTr>\n      </SortableHeaderCell>\n    </StyledHeadWrapper>\n  );\n};\n\nexport const Headers = withConditionalDnDColumnContext(HeadersComp);\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useEffect } from 'react';\nimport { StyledHeadWrapper, StyledHeadTr } from '../../styled.js';\nimport { withConditionalDnDColumnContext } from '../HoC/withConditionalDnDColumnContext.js';\nimport { HeaderCellGroupSortable } from './HeaderCellGroup.js';\nimport { SortableHeaderCell } from '../SortableHeaderCell.js';\nimport { setSubColumnsGridLayout } from '../../helpers/gridLayoutHelpers.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\n\nconst HeadersComp = () => {\n  const isExpandable = usePropsStore((state) => state.isExpandable);\n  const isSkeleton = usePropsStore((state) => state.isSkeleton);\n  const colsLayoutStyle = usePropsStore((state) => state.colsLayoutStyle);\n  const visibleColumns = usePropsStore((state) => state.visibleColumns);\n  const columnHeaderRef = usePropsStore((state) => state.columnHeaderRef);\n  const virtualListRef = usePropsStore((state) => state.virtualListRef);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  useEffect(() => {\n    // TODO: remove this, for further info see the comment on setSubColumnsGridLayout\n    setSubColumnsGridLayout(virtualListRef.current, visibleColumns, true);\n  }, [virtualListRef, visibleColumns]);\n\n  if (visibleColumns.length === 0 && isSkeleton) {\n    return null;\n  }\n  return (\n    <StyledHeadWrapper colsLayoutStyle={colsLayoutStyle} innerRef={columnHeaderRef} getOwnerProps={getOwnerProps}>\n      <SortableHeaderCell items={visibleColumns}>\n        <StyledHeadTr\n          role=\"row\"\n          colsLayoutStyle={colsLayoutStyle}\n          isExpandable={isExpandable}\n          getOwnerProps={getOwnerProps}\n        >\n          {visibleColumns.map((h, index) => (\n            <HeaderCellGroupSortable header={h} key={h.id} isLast={index === visibleColumns.length - 1} />\n          ))}\n        </StyledHeadTr>\n      </SortableHeaderCell>\n    </StyledHeadWrapper>\n  );\n};\n\nexport const Headers = withConditionalDnDColumnContext(HeadersComp);\n"],
   "mappings": "AAAA,YAAY,WAAW;ACmCX;AAnCZ,SAAgB,iBAAiB;AACjC,SAAS,mBAAmB,oBAAoB;AAChD,SAAS,uCAAuC;AAChD,SAAS,+BAA+B;AACxC,SAAS,0BAA0B;AACnC,SAAS,+BAA+B;AACxC,SAAS,qBAAqB;AAE9B,MAAM,cAAc,MAAM;AACxB,QAAM,eAAe,cAAc,CAAC,UAAU,MAAM,YAAY;AAChE,QAAM,aAAa,cAAc,CAAC,UAAU,MAAM,UAAU;AAC5D,QAAM,kBAAkB,cAAc,CAAC,UAAU,MAAM,eAAe;AACtE,QAAM,iBAAiB,cAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,kBAAkB,cAAc,CAAC,UAAU,MAAM,eAAe;AACtE,QAAM,iBAAiB,cAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AAExD,YAAU,MAAM;AAEd,4BAAwB,eAAe,SAAS,gBAAgB,IAAI;AAAA,EACtE,GAAG,CAAC,gBAAgB,cAAc,CAAC;AAEnC,MAAI,eAAe,WAAW,KAAK,YAAY;AAC7C,WAAO;AAAA,EACT;AACA,SACE,oBAAC,qBAAkB,iBAAkC,UAAU,iBAAiB,eAC9E,8BAAC,sBAAmB,OAAO,gBACzB;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MAEC,yBAAe,IAAI,CAAC,GAAG,UACtB,oBAAC,2BAAwB,QAAQ,GAAc,QAAQ,UAAU,eAAe,SAAS,KAAhD,EAAE,EAAiD,CAC7F;AAAA;AAAA,EACH,GACF,GACF;AAEJ;AAEO,MAAM,UAAU,gCAAgC,WAAW;",
   "names": []
 }

package/dist/esm/parts/Headers/useHeaderCellConfig.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { useContext, useMemo } from "react";
 import { SortableItemContext } from "../HoC/SortableItemContext.js";
-import { useInternalStore, usePropsStore } from "../../configs/useStore/useStore.js";
+import { useInternalStore, usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
 const useHeaderCellConfig = ({ column, isDragOverlay = false }) => {
   const dragAndDropColumns = usePropsStore((state) => state.dragAndDropColumns);
   const isResizeable = usePropsStore((state) => state.isResizeable);

package/dist/esm/parts/Headers/useHeaderCellConfig.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Headers/useHeaderCellConfig.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport { useContext, useMemo } from 'react';\nimport { SortableItemContext } from '../HoC/SortableItemContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/useStore.js';\n\ntype UseHeaderCellConfigType = (args: { column: DSDataTableT.InternalColumn; isDragOverlay?: boolean }) => {\n  hasFilter: boolean;\n  hasDnD: boolean;\n  hasSortingCaret: boolean;\n  hasRightIcons: boolean;\n  isDragging: boolean;\n  shouldShowDnD: boolean;\n  shouldShowResize: boolean;\n  hCols: string[];\n};\n\nexport const useHeaderCellConfig: UseHeaderCellConfigType = ({ column, isDragOverlay = false }) => {\n  const dragAndDropColumns = usePropsStore((state) => state.dragAndDropColumns);\n  const isResizeable = usePropsStore((state) => state.isResizeable);\n  const reduxHeaders = useInternalStore((state) => state.reduxHeaders);\n\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const reduxHeader = useMemo(() => reduxHeaders[column.id], [reduxHeaders, column]);\n\n  const hasFilter = !!(column.filter || column.Filter);\n\n  const hasDnD = dragAndDropColumns && !column.disableDnD;\n\n  const hasSortingCaret = Boolean(column.canSort);\n\n  const hasRightIcons = !isDragOverlay && (hasSortingCaret || hasFilter);\n\n  const isDragging = draggableProps && draggableProps.isDragging;\n\n  const shouldShowDnD =\n    hasDnD &&\n    ((reduxHeader?.showDnDHandle && draggableProps && !draggableProps.active) ||\n      (draggableProps && draggableProps.isDragging) ||\n      isDragOverlay);\n\n  const hasResize = isResizeable && column.canResize !== false && !column.columns;\n\n  const shouldShowResize = hasResize && !isDragOverlay && !isDragging;\n\n  // Column definition\n  const hCols = ['auto'];\n  if (hasRightIcons) hCols.push('min-content');\n  if (shouldShowDnD) hCols.unshift('min-content');\n\n  return {\n    hasFilter,\n    hasDnD,\n    hasSortingCaret,\n    hasRightIcons,\n    isDragging,\n    hCols,\n    shouldShowDnD,\n    shouldShowResize,\n  };\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport { useContext, useMemo } from 'react';\nimport { SortableItemContext } from '../HoC/SortableItemContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\n\ntype UseHeaderCellConfigType = (args: { column: DSDataTableT.InternalColumn; isDragOverlay?: boolean }) => {\n  hasFilter: boolean;\n  hasDnD: boolean;\n  hasSortingCaret: boolean;\n  hasRightIcons: boolean;\n  isDragging: boolean;\n  shouldShowDnD: boolean;\n  shouldShowResize: boolean;\n  hCols: string[];\n};\n\nexport const useHeaderCellConfig: UseHeaderCellConfigType = ({ column, isDragOverlay = false }) => {\n  const dragAndDropColumns = usePropsStore((state) => state.dragAndDropColumns);\n  const isResizeable = usePropsStore((state) => state.isResizeable);\n  const reduxHeaders = useInternalStore((state) => state.reduxHeaders);\n\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const reduxHeader = useMemo(() => reduxHeaders[column.id], [reduxHeaders, column]);\n\n  const hasFilter = !!(column.filter || column.Filter);\n\n  const hasDnD = dragAndDropColumns && !column.disableDnD;\n\n  const hasSortingCaret = Boolean(column.canSort);\n\n  const hasRightIcons = !isDragOverlay && (hasSortingCaret || hasFilter);\n\n  const isDragging = draggableProps && draggableProps.isDragging;\n\n  const shouldShowDnD =\n    hasDnD &&\n    ((reduxHeader?.showDnDHandle && draggableProps && !draggableProps.active) ||\n      (draggableProps && draggableProps.isDragging) ||\n      isDragOverlay);\n\n  const hasResize = isResizeable && column.canResize !== false && !column.columns;\n\n  const shouldShowResize = hasResize && !isDragOverlay && !isDragging;\n\n  // Column definition\n  const hCols = ['auto'];\n  if (hasRightIcons) hCols.push('min-content');\n  if (shouldShowDnD) hCols.unshift('min-content');\n\n  return {\n    hasFilter,\n    hasDnD,\n    hasSortingCaret,\n    hasRightIcons,\n    isDragging,\n    hCols,\n    shouldShowDnD,\n    shouldShowResize,\n  };\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,YAAY,eAAe;AACpC,SAAS,2BAA2B;AAEpC,SAAS,kBAAkB,qBAAqB;AAazC,MAAM,sBAA+C,CAAC,EAAE,QAAQ,gBAAgB,MAAM,MAAM;AACjG,QAAM,qBAAqB,cAAc,CAAC,UAAU,MAAM,kBAAkB;AAC5E,QAAM,eAAe,cAAc,CAAC,UAAU,MAAM,YAAY;AAChE,QAAM,eAAe,iBAAiB,CAAC,UAAU,MAAM,YAAY;AAEnE,QAAM,EAAE,eAAe,IAAI,WAAW,mBAAmB;AAEzD,QAAM,cAAc,QAAQ,MAAM,aAAa,OAAO,EAAE,GAAG,CAAC,cAAc,MAAM,CAAC;AAEjF,QAAM,YAAY,CAAC,EAAE,OAAO,UAAU,OAAO;AAE7C,QAAM,SAAS,sBAAsB,CAAC,OAAO;AAE7C,QAAM,kBAAkB,QAAQ,OAAO,OAAO;AAE9C,QAAM,gBAAgB,CAAC,kBAAkB,mBAAmB;AAE5D,QAAM,aAAa,kBAAkB,eAAe;AAEpD,QAAM,gBACJ,WACE,aAAa,iBAAiB,kBAAkB,CAAC,eAAe,UAC/D,kBAAkB,eAAe,cAClC;AAEJ,QAAM,YAAY,gBAAgB,OAAO,cAAc,SAAS,CAAC,OAAO;AAExE,QAAM,mBAAmB,aAAa,CAAC,iBAAiB,CAAC;AAGzD,QAAM,QAAQ,CAAC,MAAM;AACrB,MAAI,cAAe,OAAM,KAAK,aAAa;AAC3C,MAAI,cAAe,OAAM,QAAQ,aAAa;AAE9C,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/esm/parts/Headers/useHeaderCellHandlers.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { useCallback, useMemo } from "react";
-import { useInternalStore, usePropsStore } from "../../configs/useStore/useStore.js";
+import { useInternalStore, usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
 const buildNextHeader = (reduxHeader, value, hasFilter, hasDnD, hasSortingCaret, withTabStops = false) => ({
   hideFilterMenu: true,
   // Do this to overwrite it if it exists

package/dist/esm/parts/Headers/useHeaderCellHandlers.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Headers/useHeaderCellHandlers.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable max-params */\nimport { useCallback, useMemo } from 'react';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/useStore.js';\ntype UseHeaderCellHandlersType = (args: {\n  hasFilter: boolean;\n  column: DSDataTableT.InternalColumn;\n  hasDnD: boolean;\n  dragHandleRef: React.MutableRefObject<HTMLDivElement | null>;\n  sortRef: React.MutableRefObject<HTMLButtonElement | null>;\n  filterIconRef: React.MutableRefObject<HTMLButtonElement | null>;\n  resizeHandlerRef: React.MutableRefObject<HTMLInputElement | null>;\n  hasSortingCaret: boolean;\n  isDragOverlay?: boolean;\n  draggableProps: DSDataTableT.DraggablePropsT;\n}) => {\n  onMouseEnter: React.MouseEventHandler;\n  onMouseLeave: React.MouseEventHandler;\n  handleSort: React.MouseEventHandler;\n  onKeyDown: React.KeyboardEventHandler;\n  onFocus: React.FocusEventHandler;\n  onBlur: React.FocusEventHandler;\n};\n\n// TODO: reduxHeader was a mistake from the start.\n// Please remove this and make this logic more simple and\n// easy to follow.\nconst buildNextHeader = (\n  reduxHeader: DSDataTableT.ReduxHeader,\n  value: boolean,\n  hasFilter: boolean,\n  hasDnD: boolean,\n  hasSortingCaret: boolean,\n  withTabStops = false,\n) => ({\n  hideFilterMenu: true, // Do this to overwrite it if it exists\n  ...reduxHeader,\n  hideFilterButton: !(hasFilter && value),\n  showDnDHandle: hasDnD && value,\n  showSortCaret: hasSortingCaret,\n  withTabStops,\n});\n\nconst getNextSortedVisibleColumns = (\n  visibleColumns: DSDataTableT.InternalColumn[],\n  columnId: string,\n  isSortedDesc: boolean,\n) => {\n  const doit = (columns: DSDataTableT.InternalColumn[]) =>\n    columns.map((col) => {\n      const newCol = { ...col };\n      delete newCol.isSortedDesc;\n      if (col.id === columnId) {\n        newCol.isSortedDesc = isSortedDesc;\n      }\n      if (newCol.columns) {\n        newCol.columns = doit(newCol.columns);\n      }\n      return newCol;\n    });\n  return doit(visibleColumns);\n};\n\nexport const useHeaderCellHandlers: UseHeaderCellHandlersType = ({\n  hasFilter,\n  column,\n  hasDnD,\n  dragHandleRef,\n  filterIconRef,\n  sortRef,\n  resizeHandlerRef,\n  hasSortingCaret,\n  isDragOverlay,\n  draggableProps,\n}) => {\n  const onColumnSortChange = usePropsStore((state) => state.onColumnSortChange);\n  const onColumnSort = usePropsStore((state) => state.onColumnSort);\n  const visibleColumns = usePropsStore((state) => state.visibleColumns);\n  const setFocusedRowId = useInternalStore((state) => state.setFocusedRowId);\n  const patchHeader = useInternalStore((state) => state.patchHeader);\n  const reduxHeaders = useInternalStore((state) => state.reduxHeaders);\n\n  const reduxHeader = useMemo(() => reduxHeaders[column.id], [reduxHeaders, column]);\n\n  const headerRef = column.ref;\n\n  const onMouseEnter: React.MouseEventHandler = useCallback(() => {\n    patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD, hasSortingCaret));\n  }, [column.id, hasDnD, hasFilter, patchHeader, reduxHeader, hasSortingCaret]);\n\n  const onMouseLeave: React.MouseEventHandler = useCallback(() => {\n    if (!headerRef?.current?.contains(document.activeElement)) {\n      patchHeader(column.id, buildNextHeader(reduxHeader, false, hasFilter, hasDnD, false));\n    }\n  }, [column.id, hasDnD, hasFilter, headerRef, patchHeader, reduxHeader]);\n\n  const handleSort: React.MouseEventHandler = useCallback(() => {\n    if (column.canSort) {\n      onColumnSortChange?.({\n        column: column.id,\n        direction: column.isSortedDesc ? 'ASC' : 'DESC',\n      });\n      onColumnSort(\n        getNextSortedVisibleColumns(visibleColumns, column.id, !column.isSortedDesc),\n        column.id,\n        column.isSortedDesc ? 'ASC' : 'DESC',\n      );\n    }\n  }, [column.canSort, column.id, column.isSortedDesc, onColumnSort, onColumnSortChange, visibleColumns]);\n\n  const isActive = draggableProps && draggableProps.active;\n\n  const onKeyDown: React.KeyboardEventHandler = useCallback(\n    (e) => {\n      // we do the same as the draggable rows.\n      // we stop the event if the overlay is active\n      // main reason is the tab key\n      if (isDragOverlay || isActive) {\n        e.preventDefault();\n      }\n\n      if (e.currentTarget !== e.target) return;\n      if (e.code === 'ArrowDown' && column.canSort) {\n        e.preventDefault();\n        onColumnSortChange?.({\n          column: column.id,\n          direction: 'DESC',\n        });\n        onColumnSort(getNextSortedVisibleColumns(visibleColumns, column.id, true), column.id, 'DESC');\n      } else if (e.code === 'ArrowUp' && column.canSort) {\n        e.preventDefault();\n        onColumnSortChange?.({\n          column: column.id,\n          direction: 'ASC',\n        });\n        onColumnSort(getNextSortedVisibleColumns(visibleColumns, column.id, false), column.id, 'ASC');\n      } else if (['Enter', 'Space'].includes(e.code)) {\n        patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD, hasSortingCaret, true));\n        // Elements don't not yet exist\n        setTimeout(() => {\n          if (dragHandleRef.current) dragHandleRef.current.focus();\n          else if (filterIconRef.current) filterIconRef.current.focus();\n          else if (resizeHandlerRef.current) resizeHandlerRef.current.focus();\n          else if (sortRef?.current) sortRef.current.focus();\n        });\n      }\n    },\n    [\n      isDragOverlay,\n      isActive,\n      column.canSort,\n      column.id,\n      onColumnSortChange,\n      onColumnSort,\n      visibleColumns,\n      patchHeader,\n      reduxHeader,\n      hasFilter,\n      hasDnD,\n      hasSortingCaret,\n      dragHandleRef,\n      filterIconRef,\n      resizeHandlerRef,\n      sortRef,\n    ],\n  );\n\n  const onFocus: React.FocusEventHandler = useCallback(\n    (e) => {\n      // Don't do anything if focus wasn't placed in the element (bubling issues)\n      const possibleTargets: (HTMLElement | null)[] = [\n        dragHandleRef.current,\n        filterIconRef.current,\n        resizeHandlerRef.current,\n      ];\n      if (e.target === headerRef?.current) {\n        patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD, hasSortingCaret));\n        setFocusedRowId(null);\n      }\n\n      if (possibleTargets.includes(e.target as HTMLElement | null)) {\n        patchHeader(column.id, {\n          hideFilterButton: !hasFilter,\n          showDnDHandle: hasDnD,\n          withTabStops: true,\n        });\n        setFocusedRowId(null);\n      }\n    },\n    [\n      column.id,\n      dragHandleRef,\n      filterIconRef,\n      hasDnD,\n      hasFilter,\n      headerRef,\n      patchHeader,\n      reduxHeader,\n      resizeHandlerRef,\n      setFocusedRowId,\n      hasSortingCaret,\n    ],\n  );\n\n  const onBlur: React.FocusEventHandler = useCallback(\n    (e) => {\n      // Don't do anything if blur was caused by going to a child\n      if (e.relatedTarget === dragHandleRef.current) return;\n      if (e.relatedTarget === filterIconRef.current) return;\n      if (e.relatedTarget === resizeHandlerRef.current) return;\n      if (e.relatedTarget === sortRef?.current) return;\n      patchHeader(column.id, buildNextHeader(reduxHeader, false, hasFilter, hasDnD, false));\n    },\n    [dragHandleRef, filterIconRef, resizeHandlerRef, sortRef, patchHeader, column.id, reduxHeader, hasFilter, hasDnD],\n  );\n\n  return { onMouseEnter, onMouseLeave, handleSort, onKeyDown, onBlur, onFocus };\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable max-params */\nimport { useCallback, useMemo } from 'react';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\ntype UseHeaderCellHandlersType = (args: {\n  hasFilter: boolean;\n  column: DSDataTableT.InternalColumn;\n  hasDnD: boolean;\n  dragHandleRef: React.MutableRefObject<HTMLDivElement | null>;\n  sortRef: React.MutableRefObject<HTMLButtonElement | null>;\n  filterIconRef: React.MutableRefObject<HTMLButtonElement | null>;\n  resizeHandlerRef: React.MutableRefObject<HTMLInputElement | null>;\n  hasSortingCaret: boolean;\n  isDragOverlay?: boolean;\n  draggableProps: DSDataTableT.DraggablePropsT;\n}) => {\n  onMouseEnter: React.MouseEventHandler;\n  onMouseLeave: React.MouseEventHandler;\n  handleSort: React.MouseEventHandler;\n  onKeyDown: React.KeyboardEventHandler;\n  onFocus: React.FocusEventHandler;\n  onBlur: React.FocusEventHandler;\n};\n\n// TODO: reduxHeader was a mistake from the start.\n// Please remove this and make this logic more simple and\n// easy to follow.\nconst buildNextHeader = (\n  reduxHeader: DSDataTableT.ReduxHeader,\n  value: boolean,\n  hasFilter: boolean,\n  hasDnD: boolean,\n  hasSortingCaret: boolean,\n  withTabStops = false,\n) => ({\n  hideFilterMenu: true, // Do this to overwrite it if it exists\n  ...reduxHeader,\n  hideFilterButton: !(hasFilter && value),\n  showDnDHandle: hasDnD && value,\n  showSortCaret: hasSortingCaret,\n  withTabStops,\n});\n\nconst getNextSortedVisibleColumns = (\n  visibleColumns: DSDataTableT.InternalColumn[],\n  columnId: string,\n  isSortedDesc: boolean,\n) => {\n  const doit = (columns: DSDataTableT.InternalColumn[]) =>\n    columns.map((col) => {\n      const newCol = { ...col };\n      delete newCol.isSortedDesc;\n      if (col.id === columnId) {\n        newCol.isSortedDesc = isSortedDesc;\n      }\n      if (newCol.columns) {\n        newCol.columns = doit(newCol.columns);\n      }\n      return newCol;\n    });\n  return doit(visibleColumns);\n};\n\nexport const useHeaderCellHandlers: UseHeaderCellHandlersType = ({\n  hasFilter,\n  column,\n  hasDnD,\n  dragHandleRef,\n  filterIconRef,\n  sortRef,\n  resizeHandlerRef,\n  hasSortingCaret,\n  isDragOverlay,\n  draggableProps,\n}) => {\n  const onColumnSortChange = usePropsStore((state) => state.onColumnSortChange);\n  const onColumnSort = usePropsStore((state) => state.onColumnSort);\n  const visibleColumns = usePropsStore((state) => state.visibleColumns);\n  const setFocusedRowId = useInternalStore((state) => state.setFocusedRowId);\n  const patchHeader = useInternalStore((state) => state.patchHeader);\n  const reduxHeaders = useInternalStore((state) => state.reduxHeaders);\n\n  const reduxHeader = useMemo(() => reduxHeaders[column.id], [reduxHeaders, column]);\n\n  const headerRef = column.ref;\n\n  const onMouseEnter: React.MouseEventHandler = useCallback(() => {\n    patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD, hasSortingCaret));\n  }, [column.id, hasDnD, hasFilter, patchHeader, reduxHeader, hasSortingCaret]);\n\n  const onMouseLeave: React.MouseEventHandler = useCallback(() => {\n    if (!headerRef?.current?.contains(document.activeElement)) {\n      patchHeader(column.id, buildNextHeader(reduxHeader, false, hasFilter, hasDnD, false));\n    }\n  }, [column.id, hasDnD, hasFilter, headerRef, patchHeader, reduxHeader]);\n\n  const handleSort: React.MouseEventHandler = useCallback(() => {\n    if (column.canSort) {\n      onColumnSortChange?.({\n        column: column.id,\n        direction: column.isSortedDesc ? 'ASC' : 'DESC',\n      });\n      onColumnSort(\n        getNextSortedVisibleColumns(visibleColumns, column.id, !column.isSortedDesc),\n        column.id,\n        column.isSortedDesc ? 'ASC' : 'DESC',\n      );\n    }\n  }, [column.canSort, column.id, column.isSortedDesc, onColumnSort, onColumnSortChange, visibleColumns]);\n\n  const isActive = draggableProps && draggableProps.active;\n\n  const onKeyDown: React.KeyboardEventHandler = useCallback(\n    (e) => {\n      // we do the same as the draggable rows.\n      // we stop the event if the overlay is active\n      // main reason is the tab key\n      if (isDragOverlay || isActive) {\n        e.preventDefault();\n      }\n\n      if (e.currentTarget !== e.target) return;\n      if (e.code === 'ArrowDown' && column.canSort) {\n        e.preventDefault();\n        onColumnSortChange?.({\n          column: column.id,\n          direction: 'DESC',\n        });\n        onColumnSort(getNextSortedVisibleColumns(visibleColumns, column.id, true), column.id, 'DESC');\n      } else if (e.code === 'ArrowUp' && column.canSort) {\n        e.preventDefault();\n        onColumnSortChange?.({\n          column: column.id,\n          direction: 'ASC',\n        });\n        onColumnSort(getNextSortedVisibleColumns(visibleColumns, column.id, false), column.id, 'ASC');\n      } else if (['Enter', 'Space'].includes(e.code)) {\n        patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD, hasSortingCaret, true));\n        // Elements don't not yet exist\n        setTimeout(() => {\n          if (dragHandleRef.current) dragHandleRef.current.focus();\n          else if (filterIconRef.current) filterIconRef.current.focus();\n          else if (resizeHandlerRef.current) resizeHandlerRef.current.focus();\n          else if (sortRef?.current) sortRef.current.focus();\n        });\n      }\n    },\n    [\n      isDragOverlay,\n      isActive,\n      column.canSort,\n      column.id,\n      onColumnSortChange,\n      onColumnSort,\n      visibleColumns,\n      patchHeader,\n      reduxHeader,\n      hasFilter,\n      hasDnD,\n      hasSortingCaret,\n      dragHandleRef,\n      filterIconRef,\n      resizeHandlerRef,\n      sortRef,\n    ],\n  );\n\n  const onFocus: React.FocusEventHandler = useCallback(\n    (e) => {\n      // Don't do anything if focus wasn't placed in the element (bubling issues)\n      const possibleTargets: (HTMLElement | null)[] = [\n        dragHandleRef.current,\n        filterIconRef.current,\n        resizeHandlerRef.current,\n      ];\n      if (e.target === headerRef?.current) {\n        patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD, hasSortingCaret));\n        setFocusedRowId(null);\n      }\n\n      if (possibleTargets.includes(e.target as HTMLElement | null)) {\n        patchHeader(column.id, {\n          hideFilterButton: !hasFilter,\n          showDnDHandle: hasDnD,\n          withTabStops: true,\n        });\n        setFocusedRowId(null);\n      }\n    },\n    [\n      column.id,\n      dragHandleRef,\n      filterIconRef,\n      hasDnD,\n      hasFilter,\n      headerRef,\n      patchHeader,\n      reduxHeader,\n      resizeHandlerRef,\n      setFocusedRowId,\n      hasSortingCaret,\n    ],\n  );\n\n  const onBlur: React.FocusEventHandler = useCallback(\n    (e) => {\n      // Don't do anything if blur was caused by going to a child\n      if (e.relatedTarget === dragHandleRef.current) return;\n      if (e.relatedTarget === filterIconRef.current) return;\n      if (e.relatedTarget === resizeHandlerRef.current) return;\n      if (e.relatedTarget === sortRef?.current) return;\n      patchHeader(column.id, buildNextHeader(reduxHeader, false, hasFilter, hasDnD, false));\n    },\n    [dragHandleRef, filterIconRef, resizeHandlerRef, sortRef, patchHeader, column.id, reduxHeader, hasFilter, hasDnD],\n  );\n\n  return { onMouseEnter, onMouseLeave, handleSort, onKeyDown, onBlur, onFocus };\n};\n"],
   "mappings": "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",
   "names": []
 }

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

@@ -1,13 +1,13 @@
 import * as React from "react";
-import { useCallback, useMemo, useState } from "react";
 import { cloneDeep } from "lodash";
+import { useCallback, useMemo, useState } from "react";
+import { usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
 import {
-  getGridLayout,
   changeGridLayout,
+  getGridLayout,
   removeGridLayout,
   setSubColumnsGridLayout
 } from "../../helpers/gridLayoutHelpers.js";
-import { usePropsStore } from "../../configs/useStore/useStore.js";
 const narrow = (value, min, max) => Math.min(Math.max(value, min ?? 30), max ?? Infinity);
 const getCorrectDelta = (e) => {
   let multiplier = 1;
@@ -63,7 +63,7 @@ const useHeaderResizer = ({
   }, [pushColumnSizeChange, virtualListRef, realColumnIndex]);
   const onResizeHandler = useCallback(
     (e) => {
-      if (realColumnIndex == -1) return;
+      if (realColumnIndex === -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 widthWithDelta = narrow(
@@ -80,7 +80,7 @@ const useHeaderResizer = ({
   );
   const handleKeyboardResize = useCallback(
     (e) => {
-      if (realColumnIndex == -1) return;
+      if (realColumnIndex === -1) return;
       if (e.key === "Enter") {
         e.stopPropagation();
       }

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

@@ -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 { useCallback, useMemo, useState } from 'react';\nimport { cloneDeep } from 'lodash';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport {\n  getGridLayout,\n  changeGridLayout,\n  removeGridLayout,\n  setSubColumnsGridLayout,\n} from '../../helpers/gridLayoutHelpers.js';\nimport { usePropsStore } from '../../configs/useStore/useStore.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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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { cloneDeep } from 'lodash';\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": "AAAA,YAAY,WAAW;ACAvB,SAAS,iBAAiB;AAC1B,SAAS,aAAa,SAAS,gBAAgB;AAC/C,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;AAGA,QAAM,uBAAuB;AAAA,IAC3B,CAAC,cAAsB;AAIrB,UAAI,cAAc,mBAAmB,eAAe,EAAE,MAAO;AAC7D,uBAAiB,UAAU,SAAS;AAEpC,iCAA2B,eAAe,EAAE,QAAQ;AACpD,yBAAmB,oBAAoB,UAAU,SAAS;AAAA,IAC5D;AAAA,IACA,CAAC,UAAU,gBAAgB,oBAAoB,iBAAiB,oBAAoB,0BAA0B;AAAA,EAChH;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,eAAe,CAAC;AAC3E,qBAAiB,eAAe,OAAO;AAAA,EACzC,GAAG,CAAC,sBAAsB,gBAAgB,eAAe,CAAC;AAG1D,QAAM,kBAAkB;AAAA,IACtB,CAAC,MAA+B;AAC9B,UAAI,oBAAoB,GAAI;AAE5B,YAAM,SACH,aAAa,IAAI,EAAE,UAAU,EAAE,QAAQ,CAAC,EAAE,YAAY,SAAS,SAAS,sBAAsB,EAAE,KAAK;AAExG,YAAM,gBAAgB,cAAc,eAAe,OAAO,EAAE,eAAe;AAE3E,YAAM,iBAAiB;AAAA,QACrB,gBAAgB;AAAA,QAChB,2BAA2B,eAAe,EAAE;AAAA,QAC5C,2BAA2B,eAAe,EAAE;AAAA,MAC9C;AAEA,uBAAiB,eAAe,SAAS,iBAAiB,cAAc;AACxE,8BAAwB,eAAe,SAAS,kBAAkB;AAKlE,QAAE,eAAe;AACjB,QAAE,gBAAgB;AAAA,IACpB;AAAA,IACA,CAAC,iBAAiB,UAAU,gBAAgB,oBAAoB,0BAA0B;AAAA,EAC5F;AAGA,QAAM,uBAAuB;AAAA,IAC3B,CAAC,MAA2B;AAC1B,UAAI,oBAAoB,GAAI;AAE5B,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,eAAe;AAE3E,YAAM,iBAAiB;AAAA,QACrB,gBAAgB;AAAA,QAChB,2BAA2B,eAAe,EAAE;AAAA,QAC5C,2BAA2B,eAAe,EAAE;AAAA,MAC9C;AAEA,uBAAiB,eAAe,SAAS,iBAAiB,cAAc;AACxE,8BAAwB,eAAe,SAAS,kBAAkB;AAElE,2BAAqB,cAAc,eAAe,OAAO,EAAE,eAAe,IAAI,KAAK;AACnF,uBAAiB,eAAe,OAAO;AAAA,IACzC;AAAA,IACA,CAAC,sBAAsB,iBAAiB,gBAAgB,oBAAoB,0BAA0B;AAAA,EACxG;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/esm/parts/HoC/DnDGroupContext.js ADDED Viewed

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { createContext } from "react";
+const DnDGroupContext = createContext({
+  activeIndex: null
+});
+export {
+  DnDGroupContext
+};
+//# sourceMappingURL=DnDGroupContext.js.map

package/dist/esm/parts/HoC/DnDGroupContext.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/HoC/DnDGroupContext.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext } from 'react';\nimport type { DnDGroupContextType } from './withConditionalDnDColumnContext.js';\n\nexport const DnDGroupContext = createContext<DnDGroupContextType>({\n  activeIndex: null,\n});\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,qBAAqB;AAGvB,MAAM,kBAAkB,cAAmC;AAAA,EAChE,aAAa;AACf,CAAC;",
+  "names": []
+}