@elliemae/ds-data-table 3.20.4 → 3.21.0-next.10

package/dist/cjs/addons/Filters/Components/SelectFilter/BaseSelectFilter.js

@@ -61,15 +61,23 @@ const BaseSelectFilter = (props) => {
   const shouldFocus = (0, import_react.useRef)(true);
   const filterOptions = (0, import_react.useMemo)(() => {
     if (!userFilterOptions) {
-      const automaticFilters = [
-        ...new Set(data.map((datum) => getValue(datum?.[id])).filter((val) => val !== void 0))
-      ].map((item) => ({
+      const automaticFilters = [...new Set(data.map((datum) => getValue(datum?.[id])))];
+      const hasEmptyValue = automaticFilters.some((item) => item === null || item === void 0 || item === "");
+      const finalAutomaticFilters = automaticFilters.filter((item) => item !== null && item !== void 0 && item !== "").map((item) => ({
         type: "option",
         dsId: item,
         value: item,
         label: item
       }));
-      return automaticFilters;
+      if (hasEmptyValue) {
+        finalAutomaticFilters.push({
+          type: "option",
+          dsId: import_configs.EMPTY_FILTER,
+          value: import_configs.EMPTY_FILTER,
+          label: "(Empty)"
+        });
+      }
+      return finalAutomaticFilters;
     }
     if (Array.isArray(userFilterOptions))
       return userFilterOptions;

package/dist/cjs/addons/Filters/Components/SelectFilter/BaseSelectFilter.js.map

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

package/dist/cjs/configs/constants.js

@@ -31,6 +31,7 @@ __export(constants_exports, {
   ColsLayoutStyle: () => ColsLayoutStyle,
   DATA_TESTID: () => DATA_TESTID,
   DropIndicatorPosition: () => DropIndicatorPosition,
+  EMPTY_FILTER: () => EMPTY_FILTER,
   momentFormat: () => momentFormat
 });
 module.exports = __toCommonJS(constants_exports);
@@ -81,4 +82,5 @@ const DATA_TESTID = {
   DATA_TABLE_HEADER_CELL_TITLE: "header-cell-title",
   DATA_TABLE_FILTER_BAR_DD_MENU_BUTTON: "filter-bar-ddmenu-button"
 };
+const EMPTY_FILTER = "ds-empty-filter";
 //# sourceMappingURL=constants.js.map

package/dist/cjs/configs/constants.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/configs/constants.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export const momentFormat = 'MM/DD/YYYY';\nexport const ColsLayoutStyle = {\n  Fixed: 'fixed',\n  Auto: 'auto',\n} as const;\n\nexport const DropIndicatorPosition = {\n  None: 'none',\n  Before: 'before',\n  After: 'after',\n  Inside: 'inside',\n} as const;\n\nexport const DATA_TESTID = {\n  DATA_TABLE_WRAPPER: 'data-table-wrapper',\n  DATA_TABLE_GLOBAL_EXPAND_CELL: 'data-table-global-expand-cell',\n  DATA_TABLE_ICON_ARROW_DOWN: 'ic-arrow-head-down',\n  DATA_TABLE_ICON_ARROW_RIGHT: 'ic-arrow-head-right',\n  DATA_TABLE_ICON_ARROW_MIXED: 'ic-arrow-head-mixed',\n  DATA_TABLE_ICON_CHILD: 'ic-arrow-child',\n  DATA_TABLE_GLOBAL_CHECKBOX: 'data-table-global-checkbox',\n  DATA_TABLE_CHECKBOX: 'data-table-checkbox',\n  DATA_TABLE_RADIO: 'data-table-radio',\n  DATA_TABLE_DATE_RANGE_CONTROLLER: 'data-table-date-range',\n  DATA_TABLE_DATE_RANGE_CONTROLLER_CHECKBOX_SWITCHER: 'data-table-date-range-checkbox-switcher-container',\n  DATA_TABLE_SINGLE_DATE_CONTROLLER: 'data-table-single-date',\n  DATA_TABLE_NUMBER_RANGE_CONTROLLER: 'data-table-number-range',\n  DATA_TABLE_CURRENCY_RANGE_CONTROLLER: 'data-table-currency-range',\n  DATA_TABLE_SELECT_MENU_ITEM: 'data-table-filter-menu-list-item',\n  DATA_TABLE_MULTISELECT_CONTROLLER: 'data-table-multi-select',\n  DATA_TABLE_SINGLESELECT_CONTROLLER: 'data-table-single-select',\n  DATA_TABLE_FILTER_BUTTON: 'data-table-filter-menu-button',\n  DATA_TABLE_FILTER_MENU_CONTENT: 'data-table-filter-menu-content',\n  DATA_TABLE_ROW_CONTENT: 'data-table-row-content',\n  DATA_TABLE_ROW: 'data-table-row',\n  DATA_TABLE_TOOLBAR_TRIGGER: 'data-table-toolbar-trigger',\n  DATA_TABLE_CELL: 'data-table-cell',\n  DATA_TABLE_DRAG_HANDLE: 'data-table-drag-handle',\n  DATA_TABLE_CONTENT_WRAPPER: 'data-table-content-wrapper',\n  DATA_TABLE_TABLE: 'data-table-table',\n  DATA_TABLE_SCROLLABLE_CONTAINER: 'data-table-scrollable-container',\n  DATA_TABLE_HEADER: 'data-table-header',\n  DATA_TABLE_ROW_HEADER_CONTENT: 'data-table-row-header-content',\n  DATA_TABLE_ROW_GROUP_HEADER: 'data-table-row-group-header',\n  DATA_TABLE_COLUMN_DRAG_OVERLAY: 'data-table-drag-column-drag-overlay',\n  DATA_TABLE_HEADER_CELL_TITLE: 'header-cell-title',\n  DATA_TABLE_FILTER_BAR_DD_MENU_BUTTON: 'filter-bar-ddmenu-button',\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,eAAe;AACrB,MAAM,kBAAkB;AAAA,EAC7B,OAAO;AAAA,EACP,MAAM;AACR;AAEO,MAAM,wBAAwB;AAAA,EACnC,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AACV;AAEO,MAAM,cAAc;AAAA,EACzB,oBAAoB;AAAA,EACpB,+BAA+B;AAAA,EAC/B,4BAA4B;AAAA,EAC5B,6BAA6B;AAAA,EAC7B,6BAA6B;AAAA,EAC7B,uBAAuB;AAAA,EACvB,4BAA4B;AAAA,EAC5B,qBAAqB;AAAA,EACrB,kBAAkB;AAAA,EAClB,kCAAkC;AAAA,EAClC,oDAAoD;AAAA,EACpD,mCAAmC;AAAA,EACnC,oCAAoC;AAAA,EACpC,sCAAsC;AAAA,EACtC,6BAA6B;AAAA,EAC7B,mCAAmC;AAAA,EACnC,oCAAoC;AAAA,EACpC,0BAA0B;AAAA,EAC1B,gCAAgC;AAAA,EAChC,wBAAwB;AAAA,EACxB,gBAAgB;AAAA,EAChB,4BAA4B;AAAA,EAC5B,iBAAiB;AAAA,EACjB,wBAAwB;AAAA,EACxB,4BAA4B;AAAA,EAC5B,kBAAkB;AAAA,EAClB,iCAAiC;AAAA,EACjC,mBAAmB;AAAA,EACnB,+BAA+B;AAAA,EAC/B,6BAA6B;AAAA,EAC7B,gCAAgC;AAAA,EAChC,8BAA8B;AAAA,EAC9B,sCAAsC;AACxC;",
+  "sourcesContent": ["export const momentFormat = 'MM/DD/YYYY';\nexport const ColsLayoutStyle = {\n  Fixed: 'fixed',\n  Auto: 'auto',\n} as const;\n\nexport const DropIndicatorPosition = {\n  None: 'none',\n  Before: 'before',\n  After: 'after',\n  Inside: 'inside',\n} as const;\n\nexport const DATA_TESTID = {\n  DATA_TABLE_WRAPPER: 'data-table-wrapper',\n  DATA_TABLE_GLOBAL_EXPAND_CELL: 'data-table-global-expand-cell',\n  DATA_TABLE_ICON_ARROW_DOWN: 'ic-arrow-head-down',\n  DATA_TABLE_ICON_ARROW_RIGHT: 'ic-arrow-head-right',\n  DATA_TABLE_ICON_ARROW_MIXED: 'ic-arrow-head-mixed',\n  DATA_TABLE_ICON_CHILD: 'ic-arrow-child',\n  DATA_TABLE_GLOBAL_CHECKBOX: 'data-table-global-checkbox',\n  DATA_TABLE_CHECKBOX: 'data-table-checkbox',\n  DATA_TABLE_RADIO: 'data-table-radio',\n  DATA_TABLE_DATE_RANGE_CONTROLLER: 'data-table-date-range',\n  DATA_TABLE_DATE_RANGE_CONTROLLER_CHECKBOX_SWITCHER: 'data-table-date-range-checkbox-switcher-container',\n  DATA_TABLE_SINGLE_DATE_CONTROLLER: 'data-table-single-date',\n  DATA_TABLE_NUMBER_RANGE_CONTROLLER: 'data-table-number-range',\n  DATA_TABLE_CURRENCY_RANGE_CONTROLLER: 'data-table-currency-range',\n  DATA_TABLE_SELECT_MENU_ITEM: 'data-table-filter-menu-list-item',\n  DATA_TABLE_MULTISELECT_CONTROLLER: 'data-table-multi-select',\n  DATA_TABLE_SINGLESELECT_CONTROLLER: 'data-table-single-select',\n  DATA_TABLE_FILTER_BUTTON: 'data-table-filter-menu-button',\n  DATA_TABLE_FILTER_MENU_CONTENT: 'data-table-filter-menu-content',\n  DATA_TABLE_ROW_CONTENT: 'data-table-row-content',\n  DATA_TABLE_ROW: 'data-table-row',\n  DATA_TABLE_TOOLBAR_TRIGGER: 'data-table-toolbar-trigger',\n  DATA_TABLE_CELL: 'data-table-cell',\n  DATA_TABLE_DRAG_HANDLE: 'data-table-drag-handle',\n  DATA_TABLE_CONTENT_WRAPPER: 'data-table-content-wrapper',\n  DATA_TABLE_TABLE: 'data-table-table',\n  DATA_TABLE_SCROLLABLE_CONTAINER: 'data-table-scrollable-container',\n  DATA_TABLE_HEADER: 'data-table-header',\n  DATA_TABLE_ROW_HEADER_CONTENT: 'data-table-row-header-content',\n  DATA_TABLE_ROW_GROUP_HEADER: 'data-table-row-group-header',\n  DATA_TABLE_COLUMN_DRAG_OVERLAY: 'data-table-drag-column-drag-overlay',\n  DATA_TABLE_HEADER_CELL_TITLE: 'header-cell-title',\n  DATA_TABLE_FILTER_BAR_DD_MENU_BUTTON: 'filter-bar-ddmenu-button',\n};\n\nexport const EMPTY_FILTER = 'ds-empty-filter';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,eAAe;AACrB,MAAM,kBAAkB;AAAA,EAC7B,OAAO;AAAA,EACP,MAAM;AACR;AAEO,MAAM,wBAAwB;AAAA,EACnC,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AACV;AAEO,MAAM,cAAc;AAAA,EACzB,oBAAoB;AAAA,EACpB,+BAA+B;AAAA,EAC/B,4BAA4B;AAAA,EAC5B,6BAA6B;AAAA,EAC7B,6BAA6B;AAAA,EAC7B,uBAAuB;AAAA,EACvB,4BAA4B;AAAA,EAC5B,qBAAqB;AAAA,EACrB,kBAAkB;AAAA,EAClB,kCAAkC;AAAA,EAClC,oDAAoD;AAAA,EACpD,mCAAmC;AAAA,EACnC,oCAAoC;AAAA,EACpC,sCAAsC;AAAA,EACtC,6BAA6B;AAAA,EAC7B,mCAAmC;AAAA,EACnC,oCAAoC;AAAA,EACpC,0BAA0B;AAAA,EAC1B,gCAAgC;AAAA,EAChC,wBAAwB;AAAA,EACxB,gBAAgB;AAAA,EAChB,4BAA4B;AAAA,EAC5B,iBAAiB;AAAA,EACjB,wBAAwB;AAAA,EACxB,4BAA4B;AAAA,EAC5B,kBAAkB;AAAA,EAClB,iCAAiC;AAAA,EACjC,mBAAmB;AAAA,EACnB,+BAA+B;AAAA,EAC/B,6BAA6B;AAAA,EAC7B,gCAAgC;AAAA,EAChC,8BAA8B;AAAA,EAC9B,sCAAsC;AACxC;AAEO,MAAM,eAAe;",
   "names": []
 }

package/dist/cjs/exported-related/Filters/multiSelectFilterFn.js

@@ -32,9 +32,17 @@ __export(multiSelectFilterFn_exports, {
 });
 module.exports = __toCommonJS(multiSelectFilterFn_exports);
 var React = __toESM(require("react"));
+var import_constants = require("../../configs/constants.js");
 const multiSelectFilterFn = (unfilteredData, filterKey, filterValue) => {
   if (filterValue.length > 0) {
-    return unfilteredData.filter((datum) => filterValue.some((item) => item.label === String(datum[filterKey])));
+    return unfilteredData.filter(
+      (datum) => filterValue.some((item) => {
+        if (item.value === import_constants.EMPTY_FILTER) {
+          return datum[filterKey] === null || datum[filterKey] === void 0 || datum[filterKey] === "";
+        }
+        return item.label === String(datum[filterKey]);
+      })
+    );
   }
   return unfilteredData;
 };

package/dist/cjs/exported-related/Filters/multiSelectFilterFn.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/exported-related/Filters/multiSelectFilterFn.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type { FilterFn } from './types.js';\n\nexport const multiSelectFilterFn: FilterFn<{ label: string }[]> = (unfilteredData, filterKey, filterValue) => {\n  if (filterValue.length > 0) {\n    return unfilteredData.filter((datum) => filterValue.some((item) => item.label === String(datum[filterKey])));\n  }\n  return unfilteredData;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEhB,MAAM,sBAAqD,CAAC,gBAAgB,WAAW,gBAAgB;AAC5G,MAAI,YAAY,SAAS,GAAG;AAC1B,WAAO,eAAe,OAAO,CAAC,UAAU,YAAY,KAAK,CAAC,SAAS,KAAK,UAAU,OAAO,MAAM,SAAS,CAAC,CAAC,CAAC;AAAA,EAC7G;AACA,SAAO;AACT;",
+  "sourcesContent": ["import { EMPTY_FILTER } from '../../configs/constants.js';\nimport type { FilterFn } from './types.js';\n\nexport const multiSelectFilterFn: FilterFn<{ label: string; value: string }[]> = (\n  unfilteredData,\n  filterKey,\n  filterValue,\n) => {\n  if (filterValue.length > 0) {\n    return unfilteredData.filter((datum) =>\n      filterValue.some((item) => {\n        if (item.value === EMPTY_FILTER) {\n          return datum[filterKey] === null || datum[filterKey] === undefined || datum[filterKey] === '';\n        }\n        return item.label === String(datum[filterKey]);\n      }),\n    );\n  }\n  return unfilteredData;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA6B;AAGtB,MAAM,sBAAoE,CAC/E,gBACA,WACA,gBACG;AACH,MAAI,YAAY,SAAS,GAAG;AAC1B,WAAO,eAAe;AAAA,MAAO,CAAC,UAC5B,YAAY,KAAK,CAAC,SAAS;AACzB,YAAI,KAAK,UAAU,+BAAc;AAC/B,iBAAO,MAAM,SAAS,MAAM,QAAQ,MAAM,SAAS,MAAM,UAAa,MAAM,SAAS,MAAM;AAAA,QAC7F;AACA,eAAO,KAAK,UAAU,OAAO,MAAM,SAAS,CAAC;AAAA,MAC/C,CAAC;AAAA,IACH;AAAA,EACF;AACA,SAAO;AACT;",
   "names": []
 }

package/dist/cjs/exported-related/Filters/singleSelectFilterFn.js

@@ -32,9 +32,15 @@ __export(singleSelectFilterFn_exports, {
 });
 module.exports = __toCommonJS(singleSelectFilterFn_exports);
 var React = __toESM(require("react"));
+var import_constants = require("../../configs/constants.js");
 const singleSelectFilterFn = (unfilteredData, filterKey, filterValue) => {
   if (filterValue) {
-    return unfilteredData.filter((datum) => String(datum[filterKey]) === filterValue.label);
+    return unfilteredData.filter((datum) => {
+      if (filterValue.value === import_constants.EMPTY_FILTER) {
+        return datum[filterKey] === null || datum[filterKey] === void 0 || datum[filterKey] === "";
+      }
+      return String(datum[filterKey]) === filterValue.label;
+    });
   }
   return unfilteredData;
 };

package/dist/cjs/exported-related/Filters/singleSelectFilterFn.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/exported-related/Filters/singleSelectFilterFn.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type { FilterFn } from './types.js';\n\nexport const singleSelectFilterFn: FilterFn<{ label: string }> = (unfilteredData, filterKey, filterValue) => {\n  if (filterValue) {\n    return unfilteredData.filter((datum) => String(datum[filterKey]) === filterValue.label);\n  }\n  return unfilteredData;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEhB,MAAM,uBAAoD,CAAC,gBAAgB,WAAW,gBAAgB;AAC3G,MAAI,aAAa;AACf,WAAO,eAAe,OAAO,CAAC,UAAU,OAAO,MAAM,SAAS,CAAC,MAAM,YAAY,KAAK;AAAA,EACxF;AACA,SAAO;AACT;",
+  "sourcesContent": ["import { EMPTY_FILTER } from '../../configs/constants.js';\nimport type { FilterFn } from './types.js';\n\nexport const singleSelectFilterFn: FilterFn<{ label: string; value: string }> = (\n  unfilteredData,\n  filterKey,\n  filterValue,\n) => {\n  if (filterValue) {\n    return unfilteredData.filter((datum) => {\n      if (filterValue.value === EMPTY_FILTER) {\n        return datum[filterKey] === null || datum[filterKey] === undefined || datum[filterKey] === '';\n      }\n      return String(datum[filterKey]) === filterValue.label;\n    });\n  }\n  return unfilteredData;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA6B;AAGtB,MAAM,uBAAmE,CAC9E,gBACA,WACA,gBACG;AACH,MAAI,aAAa;AACf,WAAO,eAAe,OAAO,CAAC,UAAU;AACtC,UAAI,YAAY,UAAU,+BAAc;AACtC,eAAO,MAAM,SAAS,MAAM,QAAQ,MAAM,SAAS,MAAM,UAAa,MAAM,SAAS,MAAM;AAAA,MAC7F;AACA,aAAO,OAAO,MAAM,SAAS,CAAC,MAAM,YAAY;AAAA,IAClD,CAAC;AAAA,EACH;AACA,SAAO;AACT;",
   "names": []
 }

package/dist/cjs/helpers/addCellData.js

@@ -32,8 +32,13 @@ __export(addCellData_exports, {
 });
 module.exports = __toCommonJS(addCellData_exports);
 var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
-const BasicCell = ({ cell }) => cell.value;
+const BasicCell = ({ cell }) => {
+  if (cell.value === null || cell.value === void 0 || cell.value === "")
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { "aria-label": "Empty cell" });
+  return cell.value;
+};
 const getCellValue = (row, accessor) => {
   if (accessor === void 0)
     return null;

package/dist/cjs/helpers/addCellData.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/addCellData.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\n\nconst BasicCell: React.ComponentType<{ cell: DSDataTableT.Cell }> = ({ cell }) => cell.value as JSX.Element;\n\nconst getCellValue = (row: DSDataTableT.InternalRow, accessor: string | undefined): unknown => {\n  if (accessor === undefined) return null;\n  return row.original[accessor] ?? null;\n};\n\nconst addColumnData = (datum: DSDataTableT.InternalRow, column: DSDataTableT.InternalColumn) => {\n  datum.cells.push({\n    column,\n    value: getCellValue(datum, column.accessor),\n    render: column.Cell ?? BasicCell,\n    row: datum,\n    ref: React.createRef(),\n    id: `${datum.uid}__${column.id}`,\n  });\n};\n\nexport const addCellData = (datum: DSDataTableT.InternalRow, columns: DSDataTableT.InternalColumn[]): void => {\n  datum.cells = [];\n  columns.forEach((column) => {\n    if (column.columns) column.columns.forEach((col) => addColumnData(datum, col));\n    else addColumnData(datum, column);\n  });\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAGlB,MAAM,YAA8D,CAAC,EAAE,KAAK,MAAM,KAAK;AAEvF,MAAM,eAAe,CAAC,KAA+B,aAA0C;AAC7F,MAAI,aAAa;AAAW,WAAO;AACnC,SAAO,IAAI,SAAS,QAAQ,KAAK;AACnC;AAEA,MAAM,gBAAgB,CAAC,OAAiC,WAAwC;AAC9F,QAAM,MAAM,KAAK;AAAA,IACf;AAAA,IACA,OAAO,aAAa,OAAO,OAAO,QAAQ;AAAA,IAC1C,QAAQ,OAAO,QAAQ;AAAA,IACvB,KAAK;AAAA,IACL,KAAK,aAAAA,QAAM,UAAU;AAAA,IACrB,IAAI,GAAG,MAAM,QAAQ,OAAO;AAAA,EAC9B,CAAC;AACH;AAEO,MAAM,cAAc,CAAC,OAAiC,YAAiD;AAC5G,QAAM,QAAQ,CAAC;AACf,UAAQ,QAAQ,CAAC,WAAW;AAC1B,QAAI,OAAO;AAAS,aAAO,QAAQ,QAAQ,CAAC,QAAQ,cAAc,OAAO,GAAG,CAAC;AAAA;AACxE,oBAAc,OAAO,MAAM;AAAA,EAClC,CAAC;AACH;",
+  "sourcesContent": ["import React from 'react';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\n\nconst BasicCell: React.ComponentType<{ cell: DSDataTableT.Cell }> = ({ cell }) => {\n  if (cell.value === null || cell.value === undefined || cell.value === '') return <p aria-label=\"Empty cell\"></p>;\n  return cell.value as JSX.Element;\n};\n\nconst getCellValue = (row: DSDataTableT.InternalRow, accessor: string | undefined): unknown => {\n  if (accessor === undefined) return null;\n  return row.original[accessor] ?? null;\n};\n\nconst addColumnData = (datum: DSDataTableT.InternalRow, column: DSDataTableT.InternalColumn) => {\n  datum.cells.push({\n    column,\n    value: getCellValue(datum, column.accessor),\n    render: column.Cell ?? BasicCell,\n    row: datum,\n    ref: React.createRef(),\n    id: `${datum.uid}__${column.id}`,\n  });\n};\n\nexport const addCellData = (datum: DSDataTableT.InternalRow, columns: DSDataTableT.InternalColumn[]): void => {\n  datum.cells = [];\n  columns.forEach((column) => {\n    if (column.columns) column.columns.forEach((col) => addColumnData(datum, col));\n    else addColumnData(datum, column);\n  });\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADI4D;AAJnF,mBAAkB;AAGlB,MAAM,YAA8D,CAAC,EAAE,KAAK,MAAM;AAChF,MAAI,KAAK,UAAU,QAAQ,KAAK,UAAU,UAAa,KAAK,UAAU;AAAI,WAAO,4CAAC,OAAE,cAAW,cAAa;AAC5G,SAAO,KAAK;AACd;AAEA,MAAM,eAAe,CAAC,KAA+B,aAA0C;AAC7F,MAAI,aAAa;AAAW,WAAO;AACnC,SAAO,IAAI,SAAS,QAAQ,KAAK;AACnC;AAEA,MAAM,gBAAgB,CAAC,OAAiC,WAAwC;AAC9F,QAAM,MAAM,KAAK;AAAA,IACf;AAAA,IACA,OAAO,aAAa,OAAO,OAAO,QAAQ;AAAA,IAC1C,QAAQ,OAAO,QAAQ;AAAA,IACvB,KAAK;AAAA,IACL,KAAK,aAAAA,QAAM,UAAU;AAAA,IACrB,IAAI,GAAG,MAAM,QAAQ,OAAO;AAAA,EAC9B,CAAC;AACH;AAEO,MAAM,cAAc,CAAC,OAAiC,YAAiD;AAC5G,QAAM,QAAQ,CAAC;AACf,UAAQ,QAAQ,CAAC,WAAW;AAC1B,QAAI,OAAO;AAAS,aAAO,QAAQ,QAAQ,CAAC,QAAQ,cAAc,OAAO,GAAG,CAAC;AAAA;AACxE,oBAAc,OAAO,MAAM;AAAA,EAClC,CAAC;AACH;",
   "names": ["React"]
 }

package/dist/cjs/helpers/gridLayoutHelpers.js

@@ -37,7 +37,10 @@ var React = __toESM(require("react"));
 const getGridLayout = (wrapper) => {
   if (!wrapper)
     return [];
-  return getComputedStyle(wrapper).getPropertyValue("--grid-layout").split("minmax(0,").slice(1).map((str) => str.replace("px) ", "").replace("px)", "")).map((str) => Number.parseInt(str, 10));
+  const gridLayoutVar = getComputedStyle(wrapper).getPropertyValue("--grid-layout");
+  if (!gridLayoutVar)
+    return [];
+  return gridLayoutVar.split("minmax(0,").slice(1).map((str) => str.replace("px) ", "").replace("px)", "")).map((str) => Number.parseInt(str, 10));
 };
 const changeGridLayout = (wrapper, colIndex, newWidth) => {
   if (!wrapper)

package/dist/cjs/helpers/gridLayoutHelpers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/gridLayoutHelpers.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type { DSDataTableT } from '../react-desc-prop-types.js';\n\n// Returns the current grid layout of the table (by reading the CSS variable --grid-layout)\nexport const getGridLayout = (wrapper: HTMLDivElement | null): number[] => {\n  if (!wrapper) return [];\n  return getComputedStyle(wrapper)\n    .getPropertyValue('--grid-layout')\n    .split('minmax(0,')\n    .slice(1)\n    .map((str) => str.replace('px) ', '').replace('px)', ''))\n    .map((str) => Number.parseInt(str, 10));\n};\n\n// Changes the grid layout of the table (by changing the CSS variable --grid-layout)\nexport const changeGridLayout = (wrapper: HTMLDivElement | null, colIndex: number, newWidth: number) => {\n  if (!wrapper) return;\n  const cols = getGridLayout(wrapper);\n  cols[colIndex] = newWidth;\n  wrapper.style.setProperty('--grid-layout', cols.map((col) => `minmax(0, ${col}px)`).join(' '));\n  wrapper.style.setProperty('--total-width', `${cols.reduce((acc, col) => acc + col, 0)}px`);\n};\n\n// TODO: @carusox remove this\n// Since the structure of the column grouping is not ideal (with this I mean that the columns are nested in the HTML DOM),\n// we need to create variables to keep track of the sub-columns layout for each different group\n// When we go ahead and implement the new behavior (also present nowadays on the specs, we should be removing this code)\nexport const setSubColumnsGridLayout = (wrapper: HTMLDivElement | null, columns: DSDataTableT.InternalColumn[]) => {\n  if (!wrapper) return;\n\n  const cols = getGridLayout(wrapper);\n\n  let prevIndex = 0;\n\n  const variables = columns.reduce((acc, cur) => {\n    const count = cur.columns ? cur.columns.length : 1;\n    acc.push({\n      cols: cols.slice(prevIndex, prevIndex + count),\n      id: cur.id,\n    });\n    prevIndex += count;\n    return acc;\n  }, [] as { cols: number[]; id: string }[]);\n\n  variables.forEach((variable) => {\n    wrapper.style.setProperty(\n      `--grid-layout-${variable.id}`,\n      variable.cols.map((col) => `minmax(0, ${col}px)`).join(' '),\n    );\n  });\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGhB,MAAM,gBAAgB,CAAC,YAA6C;AACzE,MAAI,CAAC;AAAS,WAAO,CAAC;AACtB,SAAO,iBAAiB,OAAO,EAC5B,iBAAiB,eAAe,EAChC,MAAM,WAAW,EACjB,MAAM,CAAC,EACP,IAAI,CAAC,QAAQ,IAAI,QAAQ,QAAQ,EAAE,EAAE,QAAQ,OAAO,EAAE,CAAC,EACvD,IAAI,CAAC,QAAQ,OAAO,SAAS,KAAK,EAAE,CAAC;AAC1C;AAGO,MAAM,mBAAmB,CAAC,SAAgC,UAAkB,aAAqB;AACtG,MAAI,CAAC;AAAS;AACd,QAAM,OAAO,cAAc,OAAO;AAClC,OAAK,QAAQ,IAAI;AACjB,UAAQ,MAAM,YAAY,iBAAiB,KAAK,IAAI,CAAC,QAAQ,aAAa,QAAQ,EAAE,KAAK,GAAG,CAAC;AAC7F,UAAQ,MAAM,YAAY,iBAAiB,GAAG,KAAK,OAAO,CAAC,KAAK,QAAQ,MAAM,KAAK,CAAC,KAAK;AAC3F;AAMO,MAAM,0BAA0B,CAAC,SAAgC,YAA2C;AACjH,MAAI,CAAC;AAAS;AAEd,QAAM,OAAO,cAAc,OAAO;AAElC,MAAI,YAAY;AAEhB,QAAM,YAAY,QAAQ,OAAO,CAAC,KAAK,QAAQ;AAC7C,UAAM,QAAQ,IAAI,UAAU,IAAI,QAAQ,SAAS;AACjD,QAAI,KAAK;AAAA,MACP,MAAM,KAAK,MAAM,WAAW,YAAY,KAAK;AAAA,MAC7C,IAAI,IAAI;AAAA,IACV,CAAC;AACD,iBAAa;AACb,WAAO;AAAA,EACT,GAAG,CAAC,CAAqC;AAEzC,YAAU,QAAQ,CAAC,aAAa;AAC9B,YAAQ,MAAM;AAAA,MACZ,iBAAiB,SAAS;AAAA,MAC1B,SAAS,KAAK,IAAI,CAAC,QAAQ,aAAa,QAAQ,EAAE,KAAK,GAAG;AAAA,IAC5D;AAAA,EACF,CAAC;AACH;",
+  "sourcesContent": ["import type { DSDataTableT } from '../react-desc-prop-types.js';\n\n// Returns the current grid layout of the table (by reading the CSS variable --grid-layout)\nexport const getGridLayout = (wrapper: HTMLDivElement | null): number[] => {\n  if (!wrapper) return [];\n  const gridLayoutVar = getComputedStyle(wrapper).getPropertyValue('--grid-layout');\n  if (!gridLayoutVar) return [];\n  return gridLayoutVar\n    .split('minmax(0,')\n    .slice(1)\n    .map((str) => str.replace('px) ', '').replace('px)', ''))\n    .map((str) => Number.parseInt(str, 10));\n};\n\n// Changes the grid layout of the table (by changing the CSS variable --grid-layout)\nexport const changeGridLayout = (wrapper: HTMLDivElement | null, colIndex: number, newWidth: number) => {\n  if (!wrapper) return;\n  const cols = getGridLayout(wrapper);\n  cols[colIndex] = newWidth;\n  wrapper.style.setProperty('--grid-layout', cols.map((col) => `minmax(0, ${col}px)`).join(' '));\n  wrapper.style.setProperty('--total-width', `${cols.reduce((acc, col) => acc + col, 0)}px`);\n};\n\n// TODO: @carusox remove this\n// Since the structure of the column grouping is not ideal (with this I mean that the columns are nested in the HTML DOM),\n// we need to create variables to keep track of the sub-columns layout for each different group\n// When we go ahead and implement the new behavior (also present nowadays on the specs, we should be removing this code)\nexport const setSubColumnsGridLayout = (wrapper: HTMLDivElement | null, columns: DSDataTableT.InternalColumn[]) => {\n  if (!wrapper) return;\n\n  const cols = getGridLayout(wrapper);\n\n  let prevIndex = 0;\n\n  const variables = columns.reduce((acc, cur) => {\n    const count = cur.columns ? cur.columns.length : 1;\n    acc.push({\n      cols: cols.slice(prevIndex, prevIndex + count),\n      id: cur.id,\n    });\n    prevIndex += count;\n    return acc;\n  }, [] as { cols: number[]; id: string }[]);\n\n  variables.forEach((variable) => {\n    wrapper.style.setProperty(\n      `--grid-layout-${variable.id}`,\n      variable.cols.map((col) => `minmax(0, ${col}px)`).join(' '),\n    );\n  });\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGhB,MAAM,gBAAgB,CAAC,YAA6C;AACzE,MAAI,CAAC;AAAS,WAAO,CAAC;AACtB,QAAM,gBAAgB,iBAAiB,OAAO,EAAE,iBAAiB,eAAe;AAChF,MAAI,CAAC;AAAe,WAAO,CAAC;AAC5B,SAAO,cACJ,MAAM,WAAW,EACjB,MAAM,CAAC,EACP,IAAI,CAAC,QAAQ,IAAI,QAAQ,QAAQ,EAAE,EAAE,QAAQ,OAAO,EAAE,CAAC,EACvD,IAAI,CAAC,QAAQ,OAAO,SAAS,KAAK,EAAE,CAAC;AAC1C;AAGO,MAAM,mBAAmB,CAAC,SAAgC,UAAkB,aAAqB;AACtG,MAAI,CAAC;AAAS;AACd,QAAM,OAAO,cAAc,OAAO;AAClC,OAAK,QAAQ,IAAI;AACjB,UAAQ,MAAM,YAAY,iBAAiB,KAAK,IAAI,CAAC,QAAQ,aAAa,QAAQ,EAAE,KAAK,GAAG,CAAC;AAC7F,UAAQ,MAAM,YAAY,iBAAiB,GAAG,KAAK,OAAO,CAAC,KAAK,QAAQ,MAAM,KAAK,CAAC,KAAK;AAC3F;AAMO,MAAM,0BAA0B,CAAC,SAAgC,YAA2C;AACjH,MAAI,CAAC;AAAS;AAEd,QAAM,OAAO,cAAc,OAAO;AAElC,MAAI,YAAY;AAEhB,QAAM,YAAY,QAAQ,OAAO,CAAC,KAAK,QAAQ;AAC7C,UAAM,QAAQ,IAAI,UAAU,IAAI,QAAQ,SAAS;AACjD,QAAI,KAAK;AAAA,MACP,MAAM,KAAK,MAAM,WAAW,YAAY,KAAK;AAAA,MAC7C,IAAI,IAAI;AAAA,IACV,CAAC;AACD,iBAAa;AACb,WAAO;AAAA,EACT,GAAG,CAAC,CAAqC;AAEzC,YAAU,QAAQ,CAAC,aAAa;AAC9B,YAAQ,MAAM;AAAA,MACZ,iBAAiB,SAAS;AAAA,MAC1B,SAAS,KAAK,IAAI,CAAC,QAAQ,aAAa,QAAQ,EAAE,KAAK,GAAG;AAAA,IAC5D;AAAA,EACF,CAAC;AACH;",
   "names": []
 }

package/dist/cjs/parts/Headers/index.js

@@ -39,12 +39,17 @@ var import_DataTableContext = require("../../DataTableContext.js");
 var import_withConditionalDnDColumnContext = require("../HoC/withConditionalDnDColumnContext.js");
 var import_HeaderCellGroup = require("./HeaderCellGroup.js");
 var import_SortableHeaderCell = require("../SortableHeaderCell.js");
+var import_gridLayoutHelpers = require("../../helpers/gridLayoutHelpers.js");
 const HeadersComp = () => {
   const {
     tableProps: { isExpandable, colsLayoutStyle },
     visibleColumns,
-    columnHeaderRef
+    columnHeaderRef,
+    virtualListRef
   } = (0, import_react.useContext)(import_DataTableContext.DataTableContext);
+  (0, import_react.useLayoutEffect)(() => {
+    (0, import_gridLayoutHelpers.setSubColumnsGridLayout)(virtualListRef.current, visibleColumns);
+  }, [virtualListRef, visibleColumns]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledHeadWrapper, { colsLayoutStyle, ref: columnHeaderRef, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SortableHeaderCell.SortableHeaderCell, { items: visibleColumns, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledHeadTr, { role: "row", colsLayoutStyle, isExpandable, children: visibleColumns.map((h, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_HeaderCellGroup.HeaderCellGroupSortable, { header: h, isLast: index === visibleColumns.length - 1 }, h.id)) }) }) });
 };
 const Headers = (0, import_withConditionalDnDColumnContext.withConditionalDnDColumnContext)(HeadersComp);

package/dist/cjs/parts/Headers/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Headers/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext } from 'react';\nimport { StyledHeadWrapper, StyledHeadTr } from '../../styled.js';\nimport { DataTableContext } from '../../DataTableContext.js';\nimport { withConditionalDnDColumnContext } from '../HoC/withConditionalDnDColumnContext.js';\nimport { HeaderCellGroupSortable } from './HeaderCellGroup.js';\nimport { SortableHeaderCell } from '../SortableHeaderCell.js';\n\nconst HeadersComp = (): JSX.Element => {\n  const {\n    tableProps: { isExpandable, colsLayoutStyle },\n    visibleColumns,\n    columnHeaderRef,\n  } = useContext(DataTableContext);\n\n  return (\n    <StyledHeadWrapper colsLayoutStyle={colsLayoutStyle} ref={columnHeaderRef}>\n      <SortableHeaderCell items={visibleColumns}>\n        <StyledHeadTr role=\"row\" colsLayoutStyle={colsLayoutStyle} isExpandable={isExpandable}>\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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmBX;AAnBZ,mBAAkC;AAClC,oBAAgD;AAChD,8BAAiC;AACjC,6CAAgD;AAChD,6BAAwC;AACxC,gCAAmC;AAEnC,MAAM,cAAc,MAAmB;AACrC,QAAM;AAAA,IACJ,YAAY,EAAE,cAAc,gBAAgB;AAAA,IAC5C;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,wCAAgB;AAE/B,SACE,4CAAC,mCAAkB,iBAAkC,KAAK,iBACxD,sDAAC,gDAAmB,OAAO,gBACzB,sDAAC,8BAAa,MAAK,OAAM,iBAAkC,cACxD,yBAAe,IAAI,CAAC,GAAG,UACtB,4CAAC,kDAAwB,QAAQ,GAAc,QAAQ,UAAU,eAAe,SAAS,KAAhD,EAAE,EAAiD,CAC7F,GACH,GACF,GACF;AAEJ;AAEO,MAAM,cAAU,wEAAgC,WAAW;",
+  "sourcesContent": ["import React, { useContext, useLayoutEffect } from 'react';\nimport { StyledHeadWrapper, StyledHeadTr } from '../../styled.js';\nimport { DataTableContext } from '../../DataTableContext.js';\nimport { withConditionalDnDColumnContext } from '../HoC/withConditionalDnDColumnContext.js';\nimport { HeaderCellGroupSortable } from './HeaderCellGroup.js';\nimport { SortableHeaderCell } from '../SortableHeaderCell.js';\nimport { setSubColumnsGridLayout } from '../../helpers/gridLayoutHelpers.js';\n\nconst HeadersComp = (): JSX.Element => {\n  const {\n    tableProps: { isExpandable, colsLayoutStyle },\n    visibleColumns,\n    columnHeaderRef,\n    virtualListRef,\n  } = useContext(DataTableContext);\n\n  useLayoutEffect(() => {\n    // TODO: remove this, for further info see the comment on setSubColumnsGridLayout\n    setSubColumnsGridLayout(virtualListRef.current, visibleColumns);\n  }, [virtualListRef, visibleColumns]);\n\n  return (\n    <StyledHeadWrapper colsLayoutStyle={colsLayoutStyle} ref={columnHeaderRef}>\n      <SortableHeaderCell items={visibleColumns}>\n        <StyledHeadTr role=\"row\" colsLayoutStyle={colsLayoutStyle} isExpandable={isExpandable}>\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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0BX;AA1BZ,mBAAmD;AACnD,oBAAgD;AAChD,8BAAiC;AACjC,6CAAgD;AAChD,6BAAwC;AACxC,gCAAmC;AACnC,+BAAwC;AAExC,MAAM,cAAc,MAAmB;AACrC,QAAM;AAAA,IACJ,YAAY,EAAE,cAAc,gBAAgB;AAAA,IAC5C;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,wCAAgB;AAE/B,oCAAgB,MAAM;AAEpB,0DAAwB,eAAe,SAAS,cAAc;AAAA,EAChE,GAAG,CAAC,gBAAgB,cAAc,CAAC;AAEnC,SACE,4CAAC,mCAAkB,iBAAkC,KAAK,iBACxD,sDAAC,gDAAmB,OAAO,gBACzB,sDAAC,8BAAa,MAAK,OAAM,iBAAkC,cACxD,yBAAe,IAAI,CAAC,GAAG,UACtB,4CAAC,kDAAwB,QAAQ,GAAc,QAAQ,UAAU,eAAe,SAAS,KAAhD,EAAE,EAAiD,CAC7F,GACH,GACF,GACF;AAEJ;AAEO,MAAM,cAAU,wEAAgC,WAAW;",
   "names": []
 }

package/dist/cjs/parts/Headers/useHeaderCellHandlers.js

@@ -138,11 +138,24 @@ const useHeaderCellHandlers = ({
   );
   const onFocus = (0, import_react.useCallback)(
     (e) => {
+      const possibleTargets = [
+        dragHandleRef.current,
+        filterIconRef.current,
+        resizeHandlerRef.current
+      ];
       if (e.target === headerRef?.current) {
         patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD));
       }
+      if (possibleTargets.includes(e.target)) {
+        patchHeader(column.id, {
+          hideFilterMenu: true,
+          hideFilterButton: !hasFilter,
+          showDnDHandle: hasDnD,
+          withTabStops: true
+        });
+      }
     },
-    [column.id, hasDnD, hasFilter, headerRef, patchHeader, reduxHeader]
+    [column.id, dragHandleRef, filterIconRef, hasDnD, hasFilter, headerRef, patchHeader, reduxHeader, resizeHandlerRef]
   );
   const onBlur = (0, import_react.useCallback)(
     (e) => {

package/dist/cjs/parts/Headers/useHeaderCellHandlers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Headers/useHeaderCellHandlers.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-params */\nimport { useCallback, useContext, useMemo } from 'react';\nimport { DataTableContext } from '../../DataTableContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\n\ntype UseHeaderCellHandlersType = (args: {\n  hasFilter: boolean;\n  column: DSDataTableT.InternalColumn;\n  hasDnD: boolean;\n  dragHandleRef: React.MutableRefObject<HTMLDivElement | null>;\n  filterIconRef: React.MutableRefObject<HTMLButtonElement | null>;\n  resizeHandlerRef: React.MutableRefObject<HTMLInputElement | null>;\n}) => {\n  onMouseEnter: React.MouseEventHandler;\n  onMouseLeave: React.MouseEventHandler;\n  onClick: React.MouseEventHandler;\n  onKeyDown: React.KeyboardEventHandler;\n  onFocus: React.FocusEventHandler;\n  onBlur: React.FocusEventHandler;\n};\n\nconst buildNextHeader = (\n  reduxHeader: DSDataTableT.ReduxHeader,\n  value: boolean,\n  hasFilter: boolean,\n  hasDnD: 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  withTabStops,\n});\n\nconst getNextSortedVisibleColumns = (\n  visibleColumns: DSDataTableT.InternalColumn<HTMLElement>[],\n  columnId: string,\n  isSortedDesc: boolean,\n) => {\n  const doit = (columns: DSDataTableT.InternalColumn<HTMLElement>[]) =>\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  resizeHandlerRef,\n}) => {\n  const {\n    tableProps: { onColumnSortChange, onColumnSort },\n    patchHeader,\n    reduxHeaders,\n    visibleColumns,\n  } = useContext(DataTableContext);\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));\n  }, [column.id, hasDnD, hasFilter, patchHeader, reduxHeader]);\n\n  const onMouseLeave: React.MouseEventHandler = useCallback(() => {\n    if (!headerRef?.current?.contains(document.activeElement)) {\n      patchHeader(column.id, buildNextHeader(reduxHeader, false, hasFilter, hasDnD));\n    }\n  }, [column.id, hasDnD, hasFilter, headerRef, patchHeader, reduxHeader]);\n\n  const onClick: 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 onKeyDown: React.KeyboardEventHandler = useCallback(\n    (e) => {\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, 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        });\n      }\n    },\n    [\n      column.canSort,\n      column.id,\n      onColumnSortChange,\n      onColumnSort,\n      visibleColumns,\n      patchHeader,\n      reduxHeader,\n      hasFilter,\n      hasDnD,\n      dragHandleRef,\n      filterIconRef,\n      resizeHandlerRef,\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      if (e.target === headerRef?.current) {\n        patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD));\n      }\n    },\n    [column.id, hasDnD, hasFilter, headerRef, patchHeader, reduxHeader],\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      patchHeader(column.id, buildNextHeader(reduxHeader, false, hasFilter, hasDnD));\n    },\n    [dragHandleRef, filterIconRef, resizeHandlerRef, patchHeader, column.id, reduxHeader, hasFilter, hasDnD],\n  );\n\n  return { onMouseEnter, onMouseLeave, onClick, onKeyDown, onBlur, onFocus };\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-params */\nimport { useCallback, useContext, useMemo } from 'react';\nimport { DataTableContext } from '../../DataTableContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\n\ntype UseHeaderCellHandlersType = (args: {\n  hasFilter: boolean;\n  column: DSDataTableT.InternalColumn;\n  hasDnD: boolean;\n  dragHandleRef: React.MutableRefObject<HTMLDivElement | null>;\n  filterIconRef: React.MutableRefObject<HTMLButtonElement | null>;\n  resizeHandlerRef: React.MutableRefObject<HTMLInputElement | null>;\n}) => {\n  onMouseEnter: React.MouseEventHandler;\n  onMouseLeave: React.MouseEventHandler;\n  onClick: 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  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  withTabStops,\n});\n\nconst getNextSortedVisibleColumns = (\n  visibleColumns: DSDataTableT.InternalColumn<HTMLElement>[],\n  columnId: string,\n  isSortedDesc: boolean,\n) => {\n  const doit = (columns: DSDataTableT.InternalColumn<HTMLElement>[]) =>\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  resizeHandlerRef,\n}) => {\n  const {\n    tableProps: { onColumnSortChange, onColumnSort },\n    patchHeader,\n    reduxHeaders,\n    visibleColumns,\n  } = useContext(DataTableContext);\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));\n  }, [column.id, hasDnD, hasFilter, patchHeader, reduxHeader]);\n\n  const onMouseLeave: React.MouseEventHandler = useCallback(() => {\n    if (!headerRef?.current?.contains(document.activeElement)) {\n      patchHeader(column.id, buildNextHeader(reduxHeader, false, hasFilter, hasDnD));\n    }\n  }, [column.id, hasDnD, hasFilter, headerRef, patchHeader, reduxHeader]);\n\n  const onClick: 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 onKeyDown: React.KeyboardEventHandler = useCallback(\n    (e) => {\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, 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        });\n      }\n    },\n    [\n      column.canSort,\n      column.id,\n      onColumnSortChange,\n      onColumnSort,\n      visibleColumns,\n      patchHeader,\n      reduxHeader,\n      hasFilter,\n      hasDnD,\n      dragHandleRef,\n      filterIconRef,\n      resizeHandlerRef,\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));\n      }\n\n      if (possibleTargets.includes(e.target as HTMLElement | null)) {\n        patchHeader(column.id, {\n          hideFilterMenu: true,\n          hideFilterButton: !hasFilter,\n          showDnDHandle: hasDnD,\n          withTabStops: true,\n        });\n      }\n    },\n    [column.id, dragHandleRef, filterIconRef, hasDnD, hasFilter, headerRef, patchHeader, reduxHeader, resizeHandlerRef],\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      patchHeader(column.id, buildNextHeader(reduxHeader, false, hasFilter, hasDnD));\n    },\n    [dragHandleRef, filterIconRef, resizeHandlerRef, patchHeader, column.id, reduxHeader, hasFilter, hasDnD],\n  );\n\n  return { onMouseEnter, onMouseLeave, onClick, onKeyDown, onBlur, onFocus };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -115,6 +115,9 @@ const useHeaderResizer = ({
       if (e.key === "Enter") {
         e.stopPropagation();
       }
+      if (e.code === "ArrowLeft" || e.code === "ArrowRight") {
+        e.preventDefault();
+      }
       const delta = getCorrectDelta(e);
       if (delta === 0)
         return;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Headers/useHeaderResizer.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useCallback, useContext, useMemo, useState } from 'react';\nimport { cloneDeep } from 'lodash';\nimport { DataTableContext } from '../../DataTableContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { getGridLayout, changeGridLayout, setSubColumnsGridLayout } from '../../helpers/gridLayoutHelpers.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 {\n    visibleColumns,\n    tableProps: { onColumnResize, onColumnSizeChange },\n    virtualListRef,\n  } = useContext(DataTableContext);\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      onColumnResize?.(columnId, nextWidth);\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  }, [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      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    },\n    [pushColumnSizeChange, realColumnIndex, virtualListRef, visibleColumnsCopy, visibleColumnsOnGridLayout],\n  );\n\n  return {\n    isResizing,\n    onResizeStart,\n    onResizeEnd,\n    onResizeHandler,\n    handleKeyboardResize,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useCallback, useContext, useMemo, useState } from 'react';\nimport { cloneDeep } from 'lodash';\nimport { DataTableContext } from '../../DataTableContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { getGridLayout, changeGridLayout, setSubColumnsGridLayout } from '../../helpers/gridLayoutHelpers.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 {\n    visibleColumns,\n    tableProps: { onColumnResize, onColumnSizeChange },\n    virtualListRef,\n  } = useContext(DataTableContext);\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      onColumnResize?.(columnId, nextWidth);\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  }, [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    },\n    [pushColumnSizeChange, realColumnIndex, virtualListRef, visibleColumnsCopy, visibleColumnsOnGridLayout],\n  );\n\n  return {\n    isResizing,\n    onResizeStart,\n    onResizeEnd,\n    onResizeHandler,\n    handleKeyboardResize,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/parts/HoC/withConditionalDnDRowContext.js

@@ -47,15 +47,16 @@ const withConditionalDnDRowContext = (Component) => (props) => {
   } = import_react.default.useContext(import_DataTableContext.DataTableContext);
   const onReorder = (0, import_react.useCallback)(
     (_active, targetIndex, { movedData, fromIndex, considerExpanding }) => {
+      const rootMovedData = movedData.root;
       const nodes = {};
-      movedData.forEach((row) => {
+      rootMovedData.forEach((row) => {
         if (row.original.subRows)
           delete row.original.subRows;
         delete row.original.subRows;
         nodes[row.uid] = row.original;
       });
       const newUserData = [];
-      movedData.forEach((row) => {
+      rootMovedData.forEach((row) => {
         if (row.parentId) {
           const parentNode = nodes[row.parentId];
           if (parentNode?.subRows)
@@ -80,6 +81,7 @@ const withConditionalDnDRowContext = (Component) => (props) => {
     maxDragAndDropLevel,
     getIsDropValid
   });
+  const containerSortableContextProps = sortableContextProps["root"];
   const visibleItems = (0, import_react.useMemo)(() => {
     if (!active)
       return flattenedData;
@@ -99,7 +101,7 @@ const withConditionalDnDRowContext = (Component) => (props) => {
   );
   if (dragAndDropRows)
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_drag_and_drop.DndContext, { ...dndContextProps, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_drag_and_drop.SortableContext, { ...sortableContextProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DnDTreeContext.DnDTreeContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_drag_and_drop.SortableContext, { ...containerSortableContextProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DnDTreeContext.DnDTreeContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props }) }) }),
       (0, import_react_dom.createPortal)(
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_drag_and_drop.DragOverlay, { style: { width: "auto" }, modifiers: [import_ds_drag_and_drop.restrictToFirstScrollableAncestor], children: active ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Row.Row, { row: dragOverlayRow, isDragOverlay: true }) : null }),
         document.body

package/dist/cjs/parts/HoC/withConditionalDnDRowContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/HoC/withConditionalDnDRowContext.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable react/function-component-definition */\nimport React, { useCallback, useMemo } from 'react';\nimport {\n  DndContext,\n  DragOverlay,\n  SortableContext,\n  useTreeDndkitConfig,\n  removeChildrenOf,\n  restrictToFirstScrollableAncestor,\n  type DnDKitTree,\n} from '@elliemae/ds-drag-and-drop';\nimport { createPortal } from 'react-dom';\nimport { DataTableContext } from '../../DataTableContext.js';\nimport type { FunctionalHOC } from '../../types/FunctionalHoC.js';\nimport { Row } from '../Row.js';\nimport { DnDTreeContext } from './DnDTreeContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\n\n// only wraps in \"DnDContext\" and \"DnDTreeContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDRowContext: FunctionalHOC = (Component) => (props) => {\n  const {\n    tableProps: { dragAndDropRows, isExpandable, onRowsReorder, maxDragAndDropLevel, getIsDropValid },\n    flattenedData,\n    allDataFlattened,\n  } = React.useContext(DataTableContext);\n\n  const onReorder: DnDKitTree.OnReorder<DSDataTableT.Row> = useCallback(\n    (_active, targetIndex, { movedData, fromIndex, considerExpanding }) => {\n      // Pull the row's original data into an object\n      const nodes: Record<string, DSDataTableT.Row> = {};\n      movedData.forEach((row) => {\n        if (row.original.subRows) delete row.original.subRows;\n        delete row.original.subRows;\n        nodes[row.uid] = row.original;\n      });\n      const newUserData = [] as DSDataTableT.Row[];\n      movedData.forEach((row) => {\n        // If row has parent, insert it to it's subrows\n        // otherwise append it to the new user data\n        if (row.parentId) {\n          const parentNode = nodes[row.parentId];\n          if (parentNode?.subRows) parentNode.subRows.push(row.original);\n          else parentNode.subRows = [row.original];\n        } else newUserData.push(row.original);\n      });\n      // Tell the user that the order has change, he can chose to commit it or not\n      onRowsReorder(newUserData, { targetIndex, fromIndex }, considerExpanding as string | null, {\n        flattenedData,\n        allDataFlattened,\n      });\n    },\n    [allDataFlattened, flattenedData, onRowsReorder],\n  );\n\n  const { dndContextProps, sortableContextProps, active, dropIndicatorPosition, isDropValid } = useTreeDndkitConfig({\n    flattenedItems: allDataFlattened,\n    isHorizontalDnD: false,\n    isExpandable,\n    onReorder,\n    maxDragAndDropLevel,\n    getIsDropValid: getIsDropValid,\n  });\n\n  const visibleItems = useMemo(() => {\n    if (!active) return flattenedData;\n    return removeChildrenOf(flattenedData, active.id) as DSDataTableT.InternalRow[];\n  }, [active, flattenedData]);\n\n  const ctx = useMemo(\n    () => ({\n      visibleItems,\n      dropIndicatorPosition,\n      isDropValid,\n    }),\n    [visibleItems, dropIndicatorPosition, isDropValid],\n  );\n\n  const dragOverlayRow = useMemo(\n    () => (active ? flattenedData.find((row) => row.uid === active.id) : null),\n    [active, flattenedData],\n  );\n\n  if (dragAndDropRows)\n    return (\n      <DndContext {...dndContextProps}>\n        <SortableContext {...sortableContextProps}>\n          <DnDTreeContext.Provider value={ctx}>\n            <Component {...props} />\n          </DnDTreeContext.Provider>\n        </SortableContext>\n        {createPortal(\n          <DragOverlay style={{ width: 'auto' }} modifiers={[restrictToFirstScrollableAncestor]}>\n            {active ? <Row row={dragOverlayRow as DSDataTableT.InternalRow} isDragOverlay /> : null}\n          </DragOverlay>,\n          document.body,\n        )}\n      </DndContext>\n    );\n  return <Component {...props} />;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoFjB;AAnFN,mBAA4C;AAC5C,8BAQO;AACP,uBAA6B;AAC7B,8BAAiC;AAEjC,iBAAoB;AACpB,4BAA+B;AAIxB,MAAM,+BAA8C,CAAC,cAAc,CAAC,UAAU;AACnF,QAAM;AAAA,IACJ,YAAY,EAAE,iBAAiB,cAAc,eAAe,qBAAqB,eAAe;AAAA,IAChG;AAAA,IACA;AAAA,EACF,IAAI,aAAAA,QAAM,WAAW,wCAAgB;AAErC,QAAM,gBAAoD;AAAA,IACxD,CAAC,SAAS,aAAa,EAAE,WAAW,WAAW,kBAAkB,MAAM;AAErE,YAAM,QAA0C,CAAC;AACjD,gBAAU,QAAQ,CAAC,QAAQ;AACzB,YAAI,IAAI,SAAS;AAAS,iBAAO,IAAI,SAAS;AAC9C,eAAO,IAAI,SAAS;AACpB,cAAM,IAAI,GAAG,IAAI,IAAI;AAAA,MACvB,CAAC;AACD,YAAM,cAAc,CAAC;AACrB,gBAAU,QAAQ,CAAC,QAAQ;AAGzB,YAAI,IAAI,UAAU;AAChB,gBAAM,aAAa,MAAM,IAAI,QAAQ;AACrC,cAAI,YAAY;AAAS,uBAAW,QAAQ,KAAK,IAAI,QAAQ;AAAA;AACxD,uBAAW,UAAU,CAAC,IAAI,QAAQ;AAAA,QACzC;AAAO,sBAAY,KAAK,IAAI,QAAQ;AAAA,MACtC,CAAC;AAED,oBAAc,aAAa,EAAE,aAAa,UAAU,GAAG,mBAAoC;AAAA,QACzF;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA,CAAC,kBAAkB,eAAe,aAAa;AAAA,EACjD;AAEA,QAAM,EAAE,iBAAiB,sBAAsB,QAAQ,uBAAuB,YAAY,QAAI,6CAAoB;AAAA,IAChH,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,mBAAe,sBAAQ,MAAM;AACjC,QAAI,CAAC;AAAQ,aAAO;AACpB,eAAO,0CAAiB,eAAe,OAAO,EAAE;AAAA,EAClD,GAAG,CAAC,QAAQ,aAAa,CAAC;AAE1B,QAAM,UAAM;AAAA,IACV,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,cAAc,uBAAuB,WAAW;AAAA,EACnD;AAEA,QAAM,qBAAiB;AAAA,IACrB,MAAO,SAAS,cAAc,KAAK,CAAC,QAAQ,IAAI,QAAQ,OAAO,EAAE,IAAI;AAAA,IACrE,CAAC,QAAQ,aAAa;AAAA,EACxB;AAEA,MAAI;AACF,WACE,6CAAC,sCAAY,GAAG,iBACd;AAAA,kDAAC,2CAAiB,GAAG,sBACnB,sDAAC,qCAAe,UAAf,EAAwB,OAAO,KAC9B,sDAAC,aAAW,GAAG,OAAO,GACxB,GACF;AAAA,UACC;AAAA,QACC,4CAAC,uCAAY,OAAO,EAAE,OAAO,OAAO,GAAG,WAAW,CAAC,yDAAiC,GACjF,mBAAS,4CAAC,kBAAI,KAAK,gBAA4C,eAAa,MAAC,IAAK,MACrF;AAAA,QACA,SAAS;AAAA,MACX;AAAA,OACF;AAEJ,SAAO,4CAAC,aAAW,GAAG,OAAO;AAC/B;",
+  "sourcesContent": ["/* eslint-disable react/function-component-definition */\nimport React, { useCallback, useMemo } from 'react';\nimport {\n  DndContext,\n  DragOverlay,\n  SortableContext,\n  useTreeDndkitConfig,\n  removeChildrenOf,\n  restrictToFirstScrollableAncestor,\n  type DnDKitTree,\n} from '@elliemae/ds-drag-and-drop';\nimport { createPortal } from 'react-dom';\nimport { DataTableContext } from '../../DataTableContext.js';\nimport type { FunctionalHOC } from '../../types/FunctionalHoC.js';\nimport { Row } from '../Row.js';\nimport { DnDTreeContext } from './DnDTreeContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\n\n// only wraps in \"DnDContext\" and \"DnDTreeContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDRowContext: FunctionalHOC = (Component) => (props) => {\n  const {\n    tableProps: { dragAndDropRows, isExpandable, onRowsReorder, maxDragAndDropLevel, getIsDropValid },\n    flattenedData,\n    allDataFlattened,\n  } = React.useContext(DataTableContext);\n  const onReorder: DnDKitTree.OnReorder<DSDataTableT.Row> = useCallback(\n    (_active, targetIndex, { movedData, fromIndex, considerExpanding }) => {\n      const rootMovedData = movedData.root;\n      // Pull the row's original data into an object\n      const nodes: Record<string, DSDataTableT.Row> = {};\n      rootMovedData.forEach((row) => {\n        if (row.original.subRows) delete row.original.subRows;\n        delete row.original.subRows;\n        nodes[row.uid] = row.original;\n      });\n      const newUserData = [] as DSDataTableT.Row[];\n      rootMovedData.forEach((row) => {\n        // If row has parent, insert it to it's subrows\n        // otherwise append it to the new user data\n        if (row.parentId) {\n          const parentNode = nodes[row.parentId];\n          if (parentNode?.subRows) parentNode.subRows.push(row.original);\n          else parentNode.subRows = [row.original];\n        } else newUserData.push(row.original);\n      });\n      // Tell the user that the order has change, he can chose to commit it or not\n      onRowsReorder(newUserData, { targetIndex, fromIndex }, considerExpanding as string | null, {\n        flattenedData,\n        allDataFlattened,\n      });\n    },\n    [allDataFlattened, flattenedData, onRowsReorder],\n  );\n\n  const { dndContextProps, sortableContextProps, active, dropIndicatorPosition, isDropValid } = useTreeDndkitConfig({\n    flattenedItems: allDataFlattened,\n    isHorizontalDnD: false,\n    isExpandable,\n    onReorder,\n    maxDragAndDropLevel,\n    getIsDropValid: getIsDropValid,\n  });\n\n  const containerSortableContextProps = sortableContextProps['root'];\n\n  const visibleItems = useMemo(() => {\n    if (!active) return flattenedData;\n    return removeChildrenOf(flattenedData, active.id) as DSDataTableT.InternalRow[];\n  }, [active, flattenedData]);\n\n  const ctx = useMemo(\n    () => ({\n      visibleItems,\n      dropIndicatorPosition,\n      isDropValid,\n    }),\n    [visibleItems, dropIndicatorPosition, isDropValid],\n  );\n\n  const dragOverlayRow = useMemo(\n    () => (active ? flattenedData.find((row) => row.uid === active.id) : null),\n    [active, flattenedData],\n  );\n\n  if (dragAndDropRows)\n    return (\n      <DndContext {...dndContextProps}>\n        <SortableContext {...containerSortableContextProps}>\n          <DnDTreeContext.Provider value={ctx}>\n            <Component {...props} />\n          </DnDTreeContext.Provider>\n        </SortableContext>\n        {createPortal(\n          <DragOverlay style={{ width: 'auto' }} modifiers={[restrictToFirstScrollableAncestor]}>\n            {active ? <Row row={dragOverlayRow as DSDataTableT.InternalRow} isDragOverlay /> : null}\n          </DragOverlay>,\n          document.body,\n        )}\n      </DndContext>\n    );\n  return <Component {...props} />;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsFjB;AArFN,mBAA4C;AAC5C,8BAQO;AACP,uBAA6B;AAC7B,8BAAiC;AAEjC,iBAAoB;AACpB,4BAA+B;AAIxB,MAAM,+BAA8C,CAAC,cAAc,CAAC,UAAU;AACnF,QAAM;AAAA,IACJ,YAAY,EAAE,iBAAiB,cAAc,eAAe,qBAAqB,eAAe;AAAA,IAChG;AAAA,IACA;AAAA,EACF,IAAI,aAAAA,QAAM,WAAW,wCAAgB;AACrC,QAAM,gBAAoD;AAAA,IACxD,CAAC,SAAS,aAAa,EAAE,WAAW,WAAW,kBAAkB,MAAM;AACrE,YAAM,gBAAgB,UAAU;AAEhC,YAAM,QAA0C,CAAC;AACjD,oBAAc,QAAQ,CAAC,QAAQ;AAC7B,YAAI,IAAI,SAAS;AAAS,iBAAO,IAAI,SAAS;AAC9C,eAAO,IAAI,SAAS;AACpB,cAAM,IAAI,GAAG,IAAI,IAAI;AAAA,MACvB,CAAC;AACD,YAAM,cAAc,CAAC;AACrB,oBAAc,QAAQ,CAAC,QAAQ;AAG7B,YAAI,IAAI,UAAU;AAChB,gBAAM,aAAa,MAAM,IAAI,QAAQ;AACrC,cAAI,YAAY;AAAS,uBAAW,QAAQ,KAAK,IAAI,QAAQ;AAAA;AACxD,uBAAW,UAAU,CAAC,IAAI,QAAQ;AAAA,QACzC;AAAO,sBAAY,KAAK,IAAI,QAAQ;AAAA,MACtC,CAAC;AAED,oBAAc,aAAa,EAAE,aAAa,UAAU,GAAG,mBAAoC;AAAA,QACzF;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA,CAAC,kBAAkB,eAAe,aAAa;AAAA,EACjD;AAEA,QAAM,EAAE,iBAAiB,sBAAsB,QAAQ,uBAAuB,YAAY,QAAI,6CAAoB;AAAA,IAChH,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,gCAAgC,qBAAqB,MAAM;AAEjE,QAAM,mBAAe,sBAAQ,MAAM;AACjC,QAAI,CAAC;AAAQ,aAAO;AACpB,eAAO,0CAAiB,eAAe,OAAO,EAAE;AAAA,EAClD,GAAG,CAAC,QAAQ,aAAa,CAAC;AAE1B,QAAM,UAAM;AAAA,IACV,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,cAAc,uBAAuB,WAAW;AAAA,EACnD;AAEA,QAAM,qBAAiB;AAAA,IACrB,MAAO,SAAS,cAAc,KAAK,CAAC,QAAQ,IAAI,QAAQ,OAAO,EAAE,IAAI;AAAA,IACrE,CAAC,QAAQ,aAAa;AAAA,EACxB;AAEA,MAAI;AACF,WACE,6CAAC,sCAAY,GAAG,iBACd;AAAA,kDAAC,2CAAiB,GAAG,+BACnB,sDAAC,qCAAe,UAAf,EAAwB,OAAO,KAC9B,sDAAC,aAAW,GAAG,OAAO,GACxB,GACF;AAAA,UACC;AAAA,QACC,4CAAC,uCAAY,OAAO,EAAE,OAAO,OAAO,GAAG,WAAW,CAAC,yDAAiC,GACjF,mBAAS,4CAAC,kBAAI,KAAK,gBAA4C,eAAa,MAAC,IAAK,MACrF;AAAA,QACA,SAAS;AAAA,MACX;AAAA,OACF;AAEJ,SAAO,4CAAC,aAAW,GAAG,OAAO;AAC/B;",
   "names": ["React"]
 }

package/dist/cjs/styled.js

@@ -201,22 +201,14 @@ const StyledResizer = (0, import_ds_system.styled)(import_ds_form_input_text.DSI
     cursor: col-resize;
     background-image: transparent;
     padding: 0;
+    border-radius: 0;
 
     &:focus::-webkit-slider-runnable-track {
       background: transparent;
     }
 
     &:focus-visible {
-      :after {
-        position: absolute;
-        content: ' ';
-        z-index: 2;
-        top: 0;
-        right: 0;
-        width: 8px;
-        height: 100%;
-        border: 2px solid brand-700;
-      }
+      background: brand-700;
       ::-webkit-slider-runnable-track {
         background: transparent;
       }