@elliemae/ds-data-table 3.51.0-rc.2 → 3.51.0-rc.21

package/dist/esm/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\nimport React, { useMemo, useRef, useCallback, createRef } from 'react';\nimport { DSControlledCheckbox } from '@elliemae/ds-form-checkbox';\nimport { uid as genUid } from 'uid';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../../../configs/constants.js';\nimport { useInternalStore, usePropsStore } from '../../../configs/useStore/createInternalAndPropsContext.js';\n\nexport const multiSelectColumn: DSDataTableT.InternalColumn = {\n  // Build our multiSelecter column\n  id: 'multiSelecter', // Make sure it has an ID\n  Header: () => {\n    const onSelectionChange = usePropsStore((state) => state.onSelectionChange);\n    const selection = usePropsStore((state) => state.selection);\n    const disabledRows = usePropsStore((state) => state.disabledRows);\n    const noResultsMessage = usePropsStore((state) => state.noResultsMessage);\n    const noResultsSecondaryMessage = usePropsStore((state) => state.noResultsSecondaryMessage);\n    const allDataFlattened = usePropsStore((state) => state.allDataFlattened);\n    const flattenedData = usePropsStore((state) => state.flattenedData);\n    const isEmptyContent = usePropsStore((state) => state.isEmptyContent);\n    const firstFocuseableColumnHeaderId = usePropsStore((state) => state.firstFocuseableColumnHeaderId);\n    const domIdAffix = usePropsStore((state) => state.domIdAffix);\n    const visibleRangeRef = usePropsStore((state) => state.visibleRangeRef);\n\n    // We for sure have selection, so we just typecast it for TS reasons\n    const dtSelection = selection ?? {};\n    const selectionKeyCount = flattenedData.reduce(\n      (acc, cur) => (dtSelection[cur.uid] && !disabledRows[cur.uid] ? 1 : 0) + acc,\n      0,\n    );\n\n    const currentGlobalState = useMemo(\n      () =>\n        selectionKeyCount > 0 && selectionKeyCount < flattenedData.filter((datum) => !disabledRows[datum.uid]).length\n          ? 'mixed'\n          : selectionKeyCount > 0,\n      [selectionKeyCount, flattenedData, disabledRows],\n    );\n\n    // global state toggling: false to true, mixed to true, true to false\n    const newGlobalStateAfterToggle = useMemo(() => currentGlobalState !== true, [currentGlobalState]);\n\n    const newSelection: DSDataTableT.Selection = useMemo(() => {\n      if (!newGlobalStateAfterToggle) return {};\n\n      return allDataFlattened.reduce<DSDataTableT.Selection>((newSelectionObject, datum) => {\n        newSelectionObject[datum.uid] = !disabledRows[datum.uid];\n        return newSelectionObject;\n      }, {});\n    }, [newGlobalStateAfterToggle, allDataFlattened, disabledRows]);\n\n    const onChangeHandler = useCallback(\n      (newState: boolean, e: React.ChangeEvent | React.MouseEvent | React.KeyboardEvent) => {\n        onSelectionChange(newSelection, 'All', e);\n      },\n      [newSelection, onSelectionChange],\n    );\n\n    const ariaControls = useMemo(\n      () =>\n        allDataFlattened\n          .map((datum) => `data-table-checkbox-${datum.uid}${domIdAffix ? `-${domIdAffix}` : ''}`)\n          .join(' '),\n      [allDataFlattened, domIdAffix],\n    );\n\n    const startCandidate = visibleRangeRef.current.start - visibleRangeRef.current.overscan;\n    const start = startCandidate > 0 ? startCandidate : 0;\n    const endCandidate = visibleRangeRef.current.end + visibleRangeRef.current.overscan + 1;\n    const end = endCandidate > visibleRangeRef.current.size ? visibleRangeRef.current.size : endCandidate;\n    const visibleAriaControls = ariaControls.split(' ').slice(start, end).join(' ');\n\n    return (\n      <DSControlledCheckbox\n        aria-controls={visibleAriaControls}\n        data-testid={DATA_TESTID.DATA_TABLE_GLOBAL_CHECKBOX}\n        aria-label={\n          isEmptyContent && firstFocuseableColumnHeaderId === 'multiSelecter'\n            ? `${noResultsMessage}. ${\n                noResultsSecondaryMessage ? `${noResultsSecondaryMessage}.` : ''\n              } Toggle all rows selected`\n            : 'Toggle all rows selected'\n        }\n        checked={currentGlobalState}\n        onChange={onChangeHandler}\n      />\n    );\n  },\n  Cell: ({ cell, row, isRowSelected, domIdAffix = genUid(4) }) => {\n    const onSelectionChange = usePropsStore((state) => state.onSelectionChange);\n    const selection = usePropsStore((state) => state.selection);\n    const disabledRows = usePropsStore((state) => state.disabledRows);\n    const lastSelected = usePropsStore((state) => state.lastSelected);\n    const flattenedData = usePropsStore((state) => state.flattenedData);\n    const checkboxSelectAllProps = usePropsStore((state) => state.checkboxSelectAllProps);\n\n    const isShiftPressed = useInternalStore((state) => state.isShiftPressed);\n    const setIsShiftPressed = useInternalStore((state) => state.setIsShiftPressed);\n\n    const { uid } = row;\n    const selectedState = selection?.[uid] ?? false;\n\n    const isShiftPressedKeyRef = useRef(false);\n    const onChangeHandler = useCallback(\n      (newState: boolean, e: React.ChangeEvent | React.MouseEvent | React.KeyboardEvent) => {\n        const newSelection = { ...selection, [uid]: newState }; // we only want true and mixed values\n        if (!newState) delete newSelection[uid]; // if newState is false, remove from the new selection\n        const now = Number.parseInt(uid, 10);\n        if ((isShiftPressed || isShiftPressedKeyRef.current) && lastSelected.current > -1) {\n          for (let i = Math.min(lastSelected.current, now); i <= Math.max(lastSelected.current, now); i += 1) {\n            const correctDataIndex = flattenedData[i]?.id;\n            if (!Object.keys(disabledRows).includes(correctDataIndex))\n              newSelection[correctDataIndex] = newSelection[lastSelected.current];\n            if (!newSelection[correctDataIndex]) delete newSelection[correctDataIndex];\n          }\n        }\n        lastSelected.current = now;\n        onSelectionChange(newSelection, uid, e);\n      },\n      [disabledRows, flattenedData, isShiftPressed, lastSelected, onSelectionChange, selection, uid],\n    );\n\n    const onKeyDownHandler: React.KeyboardEventHandler = useCallback(\n      (e) => {\n        setIsShiftPressed(e.code === 'Shift' || e.shiftKey);\n        e.stopPropagation();\n      },\n      [setIsShiftPressed],\n    );\n\n    const onKeyUpHandler: React.KeyboardEventHandler = useCallback(\n      (e) => {\n        setIsShiftPressed(false);\n        isShiftPressedKeyRef.current = false;\n        e.stopPropagation();\n      },\n      [setIsShiftPressed],\n    );\n\n    const stopThePropagation = useCallback((e: React.MouseEvent | React.KeyboardEvent) => {\n      if (e.shiftKey) {\n        isShiftPressedKeyRef.current = true;\n      }\n      e.stopPropagation();\n    }, []);\n\n    return (\n      <div role=\"presentation\" onClick={stopThePropagation} onKeyDown={onKeyDownHandler} onKeyUp={onKeyUpHandler}>\n        <DSControlledCheckbox\n          id={`data-table-checkbox-${uid}-${domIdAffix}`}\n          data-testid={DATA_TESTID.DATA_TABLE_CHECKBOX}\n          aria-label=\"Toggle row selected\"\n          checked={selectedState}\n          onChange={onChangeHandler}\n          disabled={disabledRows[row.uid]}\n          innerRef={cell.ref}\n          tabIndex={isRowSelected ? 0 : -1}\n          {...checkboxSelectAllProps}\n        />\n      </div>\n    );\n  },\n  textWrap: 'wrap',\n  width: 32,\n  padding: 7,\n  canResize: false,\n  isFocuseable: false,\n  disableDnD: true,\n  parentId: null,\n  depth: 0,\n  ref: createRef(),\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\nimport React, { useMemo, useRef, useCallback, createRef } from 'react';\nimport { DSControlledCheckbox } from '@elliemae/ds-form-checkbox';\nimport { uid as genUid } from 'uid';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../../../configs/constants.js';\nimport { useInternalStore, usePropsStore } from '../../../configs/useStore/createInternalAndPropsContext.js';\nimport { updateRangeSelection } from '../../../helpers/multipleSelectRow.js';\nexport const multiSelectColumn: DSDataTableT.InternalColumn = {\n  // Build our multiSelecter column\n  id: 'multiSelecter', // Make sure it has an ID\n  Header: () => {\n    const onSelectionChange = usePropsStore((state) => state.onSelectionChange);\n    const selection = usePropsStore((state) => state.selection);\n    const disabledRows = usePropsStore((state) => state.disabledRows);\n    const noResultsMessage = usePropsStore((state) => state.noResultsMessage);\n    const noResultsSecondaryMessage = usePropsStore((state) => state.noResultsSecondaryMessage);\n    const allDataFlattened = usePropsStore((state) => state.allDataFlattened);\n    const flattenedData = usePropsStore((state) => state.flattenedData);\n    const isEmptyContent = usePropsStore((state) => state.isEmptyContent);\n    const firstFocuseableColumnHeaderId = usePropsStore((state) => state.firstFocuseableColumnHeaderId);\n    const domIdAffix = usePropsStore((state) => state.domIdAffix);\n    const visibleRangeRef = usePropsStore((state) => state.visibleRangeRef);\n\n    // We for sure have selection, so we just typecast it for TS reasons\n    const dtSelection = selection ?? {};\n    const selectionKeyCount = flattenedData.reduce(\n      (acc, cur) => (dtSelection[cur.uid] && !disabledRows[cur.uid] ? 1 : 0) + acc,\n      0,\n    );\n\n    const currentGlobalState = useMemo(\n      () =>\n        selectionKeyCount > 0 && selectionKeyCount < flattenedData.filter((datum) => !disabledRows[datum.uid]).length\n          ? 'mixed'\n          : selectionKeyCount > 0,\n      [selectionKeyCount, flattenedData, disabledRows],\n    );\n\n    // global state toggling: false to true, mixed to true, true to false\n    const newGlobalStateAfterToggle = useMemo(() => currentGlobalState !== true, [currentGlobalState]);\n\n    const newSelection: DSDataTableT.Selection = useMemo(() => {\n      if (!newGlobalStateAfterToggle) return {};\n\n      return allDataFlattened.reduce<DSDataTableT.Selection>((newSelectionObject, datum) => {\n        newSelectionObject[datum.uid] = !disabledRows[datum.uid];\n        return newSelectionObject;\n      }, {});\n    }, [newGlobalStateAfterToggle, allDataFlattened, disabledRows]);\n\n    const onChangeHandler = useCallback(\n      (newState: boolean, e: React.ChangeEvent | React.MouseEvent | React.KeyboardEvent) => {\n        onSelectionChange(newSelection, 'All', e);\n      },\n      [newSelection, onSelectionChange],\n    );\n\n    const ariaControls = useMemo(\n      () =>\n        allDataFlattened\n          .map((datum) => `data-table-checkbox-${datum.uid}${domIdAffix ? `-${domIdAffix}` : ''}`)\n          .join(' '),\n      [allDataFlattened, domIdAffix],\n    );\n\n    const startCandidate = visibleRangeRef.current.start - visibleRangeRef.current.overscan;\n    const start = startCandidate > 0 ? startCandidate : 0;\n    const endCandidate = visibleRangeRef.current.end + visibleRangeRef.current.overscan + 1;\n    const end = endCandidate > visibleRangeRef.current.size ? visibleRangeRef.current.size : endCandidate;\n    const visibleAriaControls = ariaControls.split(' ').slice(start, end).join(' ');\n\n    return (\n      <DSControlledCheckbox\n        aria-controls={visibleAriaControls}\n        data-testid={DATA_TESTID.DATA_TABLE_GLOBAL_CHECKBOX}\n        aria-label={\n          isEmptyContent && firstFocuseableColumnHeaderId === 'multiSelecter'\n            ? `${noResultsMessage}. ${\n                noResultsSecondaryMessage ? `${noResultsSecondaryMessage}.` : ''\n              } Toggle all rows selected`\n            : 'Toggle all rows selected'\n        }\n        checked={currentGlobalState}\n        onChange={onChangeHandler}\n      />\n    );\n  },\n  Cell: ({ cell, row, isRowSelected, domIdAffix = genUid(4) }) => {\n    const onSelectionChange = usePropsStore((state) => state.onSelectionChange);\n    const selection = usePropsStore((state) => state.selection);\n    const disabledRows = usePropsStore((state) => state.disabledRows);\n    const lastSelected = usePropsStore((state) => state.lastSelected);\n    const flattenedData = usePropsStore((state) => state.flattenedData);\n    const checkboxSelectAllProps = usePropsStore((state) => state.checkboxSelectAllProps);\n\n    const isShiftPressed = useInternalStore((state) => state.isShiftPressed);\n    const setIsShiftPressed = useInternalStore((state) => state.setIsShiftPressed);\n\n    const { uid, realIndex } = row;\n    const selectedState = selection?.[uid] ?? false;\n    const isShiftPressedKeyRef = useRef(false);\n    const onChangeHandler = useCallback(\n      (newState: boolean, e: React.ChangeEvent | React.MouseEvent | React.KeyboardEvent) => {\n        let newSelection = { ...selection, [uid]: newState }; // we only want true and mixed values\n        if (!newState) delete newSelection[uid]; // if newState is false, remove from the new selection\n        const now = realIndex;\n        if ((isShiftPressed || isShiftPressedKeyRef.current) && lastSelected.current > -1) {\n          newSelection = updateRangeSelection(\n            newSelection,\n            lastSelected.current,\n            now,\n            flattenedData,\n            disabledRows,\n            newState,\n          );\n        }\n        lastSelected.current = now;\n        onSelectionChange(newSelection, uid, e);\n      },\n      [selection, uid, realIndex, isShiftPressed, lastSelected, onSelectionChange, flattenedData, disabledRows],\n    );\n\n    const onKeyDownHandler: React.KeyboardEventHandler = useCallback(\n      (e) => {\n        setIsShiftPressed(e.code === 'Shift' || e.shiftKey);\n        e.stopPropagation();\n      },\n      [setIsShiftPressed],\n    );\n\n    const onKeyUpHandler: React.KeyboardEventHandler = useCallback(\n      (e) => {\n        setIsShiftPressed(false);\n        isShiftPressedKeyRef.current = false;\n        e.stopPropagation();\n      },\n      [setIsShiftPressed],\n    );\n\n    const stopThePropagation = useCallback((e: React.MouseEvent | React.KeyboardEvent) => {\n      if (e.shiftKey) {\n        isShiftPressedKeyRef.current = true;\n      }\n      e.stopPropagation();\n    }, []);\n\n    return (\n      <div role=\"presentation\" onClick={stopThePropagation} onKeyDown={onKeyDownHandler} onKeyUp={onKeyUpHandler}>\n        <DSControlledCheckbox\n          id={`data-table-checkbox-${uid}-${domIdAffix}`}\n          data-testid={DATA_TESTID.DATA_TABLE_CHECKBOX}\n          aria-label=\"Toggle row selected\"\n          checked={selectedState}\n          onChange={onChangeHandler}\n          disabled={disabledRows[row.uid]}\n          innerRef={cell.ref}\n          tabIndex={isRowSelected ? 0 : -1}\n          {...checkboxSelectAllProps}\n        />\n      </div>\n    );\n  },\n  textWrap: 'wrap',\n  width: 32,\n  padding: 7,\n  canResize: false,\n  isFocuseable: false,\n  disableDnD: true,\n  parentId: null,\n  depth: 0,\n  ref: createRef(),\n};\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -16,7 +16,7 @@ const BaseSelectFilter = (props) => {
     creatable = false,
     column,
     type,
-    column: { id, filterOptions: userFilterOptions, filterMinWidth },
+    column: { id, filterOptions: userFilterOptions, filterMinWidth, disableFirstOptionFocusOnFilter = false },
     reduxHeader,
     patchHeaderFilterButtonAndMenu,
     innerRef,
@@ -110,6 +110,7 @@ const BaseSelectFilter = (props) => {
             innerRef: handleRef,
             allOptions: filters,
             onCreate: creatable ? handleOnCreate : void 0,
+            forceFocusFirstOptionOnType: creatable && disableFirstOptionFocusOnFilter === false,
             onChange: handleOnChange,
             selectedValues: selectedItems,
             menuMaxHeight: 300
@@ -117,7 +118,16 @@ const BaseSelectFilter = (props) => {
         )
       }
     ),
-    [creatable, filters, handleOnChange, handleOnCreate, handleRef, isMulti, selectedItems]
+    [
+      creatable,
+      disableFirstOptionFocusOnFilter,
+      filters,
+      handleOnChange,
+      handleOnCreate,
+      handleRef,
+      isMulti,
+      selectedItems
+    ]
   );
   const handleOnClickOutside = useCallback(() => {
     setFilteredOptions(filterOptions);

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

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

package/dist/esm/configs/useAutocalculated/index.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { useEffect, useMemo, useRef } from "react";
+import React2, { useEffect, useMemo, useRef } from "react";
 import { useVirtual, defaultRangeExtractor } from "react-virtual";
 import { useTableColsWithAddons } from "../useTableColsWithAddons.js";
 import { useRowFlattenization } from "../useRowFlattenization.js";
@@ -24,7 +24,7 @@ const useAutoCalculated = (propsWithDefaults) => {
     overscan: 15,
     paddingStart: columnHeaderRef.current?.getBoundingClientRect()?.height ?? 24,
     estimateSize,
-    rangeExtractor: React.useCallback((range) => {
+    rangeExtractor: React2.useCallback((range) => {
       visibleRangeRef.current = range;
       return defaultRangeExtractor(range);
     }, [])

package/dist/esm/configs/useAutocalculated/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/configs/useAutocalculated/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\nimport { useEffect, useMemo, useRef } from 'react';\nimport { useVirtual, defaultRangeExtractor, type Range } from 'react-virtual';\nimport { type DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useTableColsWithAddons } from '../useTableColsWithAddons.js';\nimport { useRowFlattenization } from '../useRowFlattenization.js';\nimport { usePaginationConfig } from '../usePaginationConfig.js';\nimport { columnsToGrid } from '../../helpers/columnsToGrid.js';\nimport { ColsLayoutStyle } from '../constants.js';\nimport { useTableResizeCb } from '../useTableResizeCb.js';\n\nconst estimateSize = () => 36;\n\nexport const useAutoCalculated = (propsWithDefaults: DSDataTableT.InternalProps): DSDataTableT.UseAutoCalculatedT => {\n  const { actionRef, colsLayoutStyle, hiddenColumns, isLoading } = propsWithDefaults;\n\n  const visibleRangeRef = useRef<Range>({ start: 0, end: 0 });\n  const virtualListRef = useRef<HTMLDivElement | null>(null);\n  const columnHeaderRef = useRef<HTMLDivElement | null>(null);\n  const lastSelected = useRef<number>(-1);\n\n  // ===========================================================================\n  // Column config\n  // ===========================================================================\n  const visibleColumns = useTableColsWithAddons(propsWithDefaults, hiddenColumns);\n\n  // ===========================================================================\n  // Data flattenization and pagination\n  // ===========================================================================\n\n  const [flattenedData, allDataFlattened] = useRowFlattenization(propsWithDefaults);\n\n  const [paginatedData, paginationHelpers] = usePaginationConfig(propsWithDefaults, flattenedData);\n\n  const dataLength = useMemo(() => (paginatedData || flattenedData).length, [flattenedData, paginatedData]);\n\n  // estimateSize should not be really required given what was stated on\n  // https://github.com/tannerlinsley/react-virtual/issues/23\n  const virtualListHelpers = useVirtual({\n    size: dataLength,\n    parentRef: virtualListRef,\n    overscan: 15,\n    paddingStart: columnHeaderRef.current?.getBoundingClientRect()?.height ?? 24,\n    estimateSize,\n    rangeExtractor: React.useCallback((range: Range) => {\n      visibleRangeRef.current = range;\n\n      return defaultRangeExtractor(range);\n    }, []),\n  });\n\n  // ===========================================================================\n  // Empty content config\n  // ===========================================================================\n\n  const isEmptyContent = useMemo(() => !isLoading && flattenedData.length === 0, [isLoading, flattenedData.length]);\n\n  const firstFocuseableColumnHeaderId = useMemo(() => {\n    for (let i = 0; i < visibleColumns.length; i++) {\n      const column = visibleColumns[i];\n      if (column.isFocuseable === false && column.id !== 'expander' && column.id !== 'multiSelecter') {\n        continue;\n      }\n      return column.id;\n    }\n  }, [visibleColumns]);\n\n  // ===========================================================================\n  // Layout config\n  // ===========================================================================\n\n  const gridLayout = useMemo(() => columnsToGrid(visibleColumns, colsLayoutStyle), [colsLayoutStyle, visibleColumns]);\n\n  // We need to listen and update the state based on this props\n  const totalColumnsWidth = useMemo(\n    () =>\n      colsLayoutStyle === ColsLayoutStyle.Fixed\n        ? gridLayout.reduce((acc: number, cur: string) => acc + Number.parseInt(cur, 10), 0)\n        : '100%',\n    [colsLayoutStyle, gridLayout],\n  );\n\n  const layoutHelpers = useMemo(\n    () => ({\n      gridLayout,\n      totalColumnsWidth,\n    }),\n    [gridLayout, totalColumnsWidth],\n  );\n\n  useTableResizeCb({ virtualListRef, propsWithDefault: propsWithDefaults });\n\n  // ===========================================================================\n  // Action ref setup\n  // ===========================================================================\n  useEffect(() => {\n    if (actionRef) {\n      actionRef.current.scrollToIndex = virtualListHelpers.scrollToIndex;\n      actionRef.current.scrollToOffset = virtualListHelpers.scrollToOffset;\n    }\n  }, [actionRef, virtualListHelpers.scrollToIndex, virtualListHelpers.scrollToOffset]);\n\n  return {\n    visibleRangeRef,\n    layoutHelpers,\n    paginationHelpers,\n    visibleColumns,\n    virtualListHelpers,\n    flattenedData: paginatedData || flattenedData,\n    allDataFlattened,\n    isEmptyContent,\n    firstFocuseableColumnHeaderId,\n    virtualListRef,\n    columnHeaderRef,\n    lastSelected,\n  };\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,WAAW,SAAS,cAAc;AAC3C,SAAS,YAAY,6BAAyC;AAE9D,SAAS,8BAA8B;AACvC,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AACpC,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AAEjC,MAAM,eAAe,MAAM;AAEpB,MAAM,oBAAoB,CAAC,sBAAmF;AACnH,QAAM,EAAE,WAAW,iBAAiB,eAAe,UAAU,IAAI;AAEjE,QAAM,kBAAkB,OAAc,EAAE,OAAO,GAAG,KAAK,EAAE,CAAC;AAC1D,QAAM,iBAAiB,OAA8B,IAAI;AACzD,QAAM,kBAAkB,OAA8B,IAAI;AAC1D,QAAM,eAAe,OAAe,EAAE;AAKtC,QAAM,iBAAiB,uBAAuB,mBAAmB,aAAa;AAM9E,QAAM,CAAC,eAAe,gBAAgB,IAAI,qBAAqB,iBAAiB;AAEhF,QAAM,CAAC,eAAe,iBAAiB,IAAI,oBAAoB,mBAAmB,aAAa;AAE/F,QAAM,aAAa,QAAQ,OAAO,iBAAiB,eAAe,QAAQ,CAAC,eAAe,aAAa,CAAC;AAIxG,QAAM,qBAAqB,WAAW;AAAA,IACpC,MAAM;AAAA,IACN,WAAW;AAAA,IACX,UAAU;AAAA,IACV,cAAc,gBAAgB,SAAS,sBAAsB,GAAG,UAAU;AAAA,IAC1E;AAAA,IACA,gBAAgB,MAAM,YAAY,CAAC,UAAiB;AAClD,sBAAgB,UAAU;AAE1B,aAAO,sBAAsB,KAAK;AAAA,IACpC,GAAG,CAAC,CAAC;AAAA,EACP,CAAC;AAMD,QAAM,iBAAiB,QAAQ,MAAM,CAAC,aAAa,cAAc,WAAW,GAAG,CAAC,WAAW,cAAc,MAAM,CAAC;AAEhH,QAAM,gCAAgC,QAAQ,MAAM;AAClD,aAAS,IAAI,GAAG,IAAI,eAAe,QAAQ,KAAK;AAC9C,YAAM,SAAS,eAAe,CAAC;AAC/B,UAAI,OAAO,iBAAiB,SAAS,OAAO,OAAO,cAAc,OAAO,OAAO,iBAAiB;AAC9F;AAAA,MACF;AACA,aAAO,OAAO;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,cAAc,CAAC;AAMnB,QAAM,aAAa,QAAQ,MAAM,cAAc,gBAAgB,eAAe,GAAG,CAAC,iBAAiB,cAAc,CAAC;AAGlH,QAAM,oBAAoB;AAAA,IACxB,MACE,oBAAoB,gBAAgB,QAChC,WAAW,OAAO,CAAC,KAAa,QAAgB,MAAM,OAAO,SAAS,KAAK,EAAE,GAAG,CAAC,IACjF;AAAA,IACN,CAAC,iBAAiB,UAAU;AAAA,EAC9B;AAEA,QAAM,gBAAgB;AAAA,IACpB,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,YAAY,iBAAiB;AAAA,EAChC;AAEA,mBAAiB,EAAE,gBAAgB,kBAAkB,kBAAkB,CAAC;AAKxE,YAAU,MAAM;AACd,QAAI,WAAW;AACb,gBAAU,QAAQ,gBAAgB,mBAAmB;AACrD,gBAAU,QAAQ,iBAAiB,mBAAmB;AAAA,IACxD;AAAA,EACF,GAAG,CAAC,WAAW,mBAAmB,eAAe,mBAAmB,cAAc,CAAC;AAEnF,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe,iBAAiB;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
-  "names": []
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/no-cycle */\n/* eslint-disable no-continue */\n/* eslint-disable consistent-return */\n/* eslint-disable no-plusplus */\n/* eslint-disable max-statements */\nimport React, { useEffect, useMemo, useRef } from 'react';\nimport { useVirtual, defaultRangeExtractor, type Range } from 'react-virtual';\nimport { type DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useTableColsWithAddons } from '../useTableColsWithAddons.js';\nimport { useRowFlattenization } from '../useRowFlattenization.js';\nimport { usePaginationConfig } from '../usePaginationConfig.js';\nimport { columnsToGrid } from '../../helpers/columnsToGrid.js';\nimport { ColsLayoutStyle } from '../constants.js';\nimport { useTableResizeCb } from '../useTableResizeCb.js';\n\nconst estimateSize = () => 36;\n\nexport const useAutoCalculated = (propsWithDefaults: DSDataTableT.InternalProps): DSDataTableT.UseAutoCalculatedT => {\n  const { actionRef, colsLayoutStyle, hiddenColumns, isLoading } = propsWithDefaults;\n\n  const visibleRangeRef = useRef<Range>({ start: 0, end: 0 });\n  const virtualListRef = useRef<HTMLDivElement | null>(null);\n  const columnHeaderRef = useRef<HTMLDivElement | null>(null);\n  const lastSelected = useRef<number>(-1);\n\n  // ===========================================================================\n  // Column config\n  // ===========================================================================\n  const visibleColumns = useTableColsWithAddons(propsWithDefaults, hiddenColumns);\n\n  // ===========================================================================\n  // Data flattenization and pagination\n  // ===========================================================================\n\n  const [flattenedData, allDataFlattened] = useRowFlattenization(propsWithDefaults);\n\n  const [paginatedData, paginationHelpers] = usePaginationConfig(propsWithDefaults, flattenedData);\n\n  const dataLength = useMemo(() => (paginatedData || flattenedData).length, [flattenedData, paginatedData]);\n\n  // estimateSize should not be really required given what was stated on\n  // https://github.com/tannerlinsley/react-virtual/issues/23\n  const virtualListHelpers = useVirtual({\n    size: dataLength,\n    parentRef: virtualListRef,\n    overscan: 15,\n    paddingStart: columnHeaderRef.current?.getBoundingClientRect()?.height ?? 24,\n    estimateSize,\n    rangeExtractor: React.useCallback((range: Range) => {\n      visibleRangeRef.current = range;\n\n      return defaultRangeExtractor(range);\n    }, []),\n  });\n\n  // ===========================================================================\n  // Empty content config\n  // ===========================================================================\n\n  const isEmptyContent = useMemo(() => !isLoading && flattenedData.length === 0, [isLoading, flattenedData.length]);\n\n  const firstFocuseableColumnHeaderId = useMemo(() => {\n    for (let i = 0; i < visibleColumns.length; i++) {\n      const column = visibleColumns[i];\n      if (column.isFocuseable === false && column.id !== 'expander' && column.id !== 'multiSelecter') {\n        continue;\n      }\n      return column.id;\n    }\n  }, [visibleColumns]);\n\n  // ===========================================================================\n  // Layout config\n  // ===========================================================================\n\n  const gridLayout = useMemo(() => columnsToGrid(visibleColumns, colsLayoutStyle), [colsLayoutStyle, visibleColumns]);\n\n  // We need to listen and update the state based on this props\n  const totalColumnsWidth = useMemo(\n    () =>\n      colsLayoutStyle === ColsLayoutStyle.Fixed\n        ? gridLayout.reduce((acc: number, cur: string) => acc + Number.parseInt(cur, 10), 0)\n        : '100%',\n    [colsLayoutStyle, gridLayout],\n  );\n\n  const layoutHelpers = useMemo(\n    () => ({\n      gridLayout,\n      totalColumnsWidth,\n    }),\n    [gridLayout, totalColumnsWidth],\n  );\n\n  useTableResizeCb({ virtualListRef, propsWithDefault: propsWithDefaults });\n\n  // ===========================================================================\n  // Action ref setup\n  // ===========================================================================\n  useEffect(() => {\n    if (actionRef) {\n      actionRef.current.scrollToIndex = virtualListHelpers.scrollToIndex;\n      actionRef.current.scrollToOffset = virtualListHelpers.scrollToOffset;\n    }\n  }, [actionRef, virtualListHelpers.scrollToIndex, virtualListHelpers.scrollToOffset]);\n\n  return {\n    visibleRangeRef,\n    layoutHelpers,\n    paginationHelpers,\n    visibleColumns,\n    virtualListHelpers,\n    flattenedData: paginatedData || flattenedData,\n    allDataFlattened,\n    isEmptyContent,\n    firstFocuseableColumnHeaderId,\n    virtualListRef,\n    columnHeaderRef,\n    lastSelected,\n  };\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACKvB,OAAOA,UAAS,WAAW,SAAS,cAAc;AAClD,SAAS,YAAY,6BAAyC;AAE9D,SAAS,8BAA8B;AACvC,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AACpC,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AAEjC,MAAM,eAAe,MAAM;AAEpB,MAAM,oBAAoB,CAAC,sBAAmF;AACnH,QAAM,EAAE,WAAW,iBAAiB,eAAe,UAAU,IAAI;AAEjE,QAAM,kBAAkB,OAAc,EAAE,OAAO,GAAG,KAAK,EAAE,CAAC;AAC1D,QAAM,iBAAiB,OAA8B,IAAI;AACzD,QAAM,kBAAkB,OAA8B,IAAI;AAC1D,QAAM,eAAe,OAAe,EAAE;AAKtC,QAAM,iBAAiB,uBAAuB,mBAAmB,aAAa;AAM9E,QAAM,CAAC,eAAe,gBAAgB,IAAI,qBAAqB,iBAAiB;AAEhF,QAAM,CAAC,eAAe,iBAAiB,IAAI,oBAAoB,mBAAmB,aAAa;AAE/F,QAAM,aAAa,QAAQ,OAAO,iBAAiB,eAAe,QAAQ,CAAC,eAAe,aAAa,CAAC;AAIxG,QAAM,qBAAqB,WAAW;AAAA,IACpC,MAAM;AAAA,IACN,WAAW;AAAA,IACX,UAAU;AAAA,IACV,cAAc,gBAAgB,SAAS,sBAAsB,GAAG,UAAU;AAAA,IAC1E;AAAA,IACA,gBAAgBA,OAAM,YAAY,CAAC,UAAiB;AAClD,sBAAgB,UAAU;AAE1B,aAAO,sBAAsB,KAAK;AAAA,IACpC,GAAG,CAAC,CAAC;AAAA,EACP,CAAC;AAMD,QAAM,iBAAiB,QAAQ,MAAM,CAAC,aAAa,cAAc,WAAW,GAAG,CAAC,WAAW,cAAc,MAAM,CAAC;AAEhH,QAAM,gCAAgC,QAAQ,MAAM;AAClD,aAAS,IAAI,GAAG,IAAI,eAAe,QAAQ,KAAK;AAC9C,YAAM,SAAS,eAAe,CAAC;AAC/B,UAAI,OAAO,iBAAiB,SAAS,OAAO,OAAO,cAAc,OAAO,OAAO,iBAAiB;AAC9F;AAAA,MACF;AACA,aAAO,OAAO;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,cAAc,CAAC;AAMnB,QAAM,aAAa,QAAQ,MAAM,cAAc,gBAAgB,eAAe,GAAG,CAAC,iBAAiB,cAAc,CAAC;AAGlH,QAAM,oBAAoB;AAAA,IACxB,MACE,oBAAoB,gBAAgB,QAChC,WAAW,OAAO,CAAC,KAAa,QAAgB,MAAM,OAAO,SAAS,KAAK,EAAE,GAAG,CAAC,IACjF;AAAA,IACN,CAAC,iBAAiB,UAAU;AAAA,EAC9B;AAEA,QAAM,gBAAgB;AAAA,IACpB,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,YAAY,iBAAiB;AAAA,EAChC;AAEA,mBAAiB,EAAE,gBAAgB,kBAAkB,kBAAkB,CAAC;AAKxE,YAAU,MAAM;AACd,QAAI,WAAW;AACb,gBAAU,QAAQ,gBAAgB,mBAAmB;AACrD,gBAAU,QAAQ,iBAAiB,mBAAmB;AAAA,IACxD;AAAA,EACF,GAAG,CAAC,WAAW,mBAAmB,eAAe,mBAAmB,cAAc,CAAC;AAEnF,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe,iBAAiB;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "names": ["React"]
 }

package/dist/esm/configs/usePaginationConfig.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/configs/usePaginationConfig.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useMemo } from 'react';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\n\nconst noPagination: Record<string, never> = {};\n\nconst emptyFunc = () => null;\n\nexport const usePaginationConfig = (\n  props: DSDataTableT.InternalProps,\n  flattenedData: DSDataTableT.InternalRow[],\n): [DSDataTableT.InternalRow[] | null, DSDataTableT.Pagination] => {\n  const { pagination, Pagination } = props;\n\n  const hasPagination = Boolean(pagination || Pagination);\n\n  // Set default values\n  const {\n    pageIndex = 1,\n    canPreviousPage = true,\n    canNextPage = true,\n    pageSize = 10,\n    perPageOptions = [10],\n    onPageSizeChange = emptyFunc,\n    onPreviousPage = emptyFunc,\n    onNextPage = emptyFunc,\n    onPageChange = emptyFunc,\n    pageCount = Math.ceil(flattenedData.length / pageSize),\n    isLoadingPageCount = false,\n    dataIsPage = false,\n    perPageStep = 5,\n    minPerPage = 0,\n    maxPerPage = 100,\n    showPerPageSelector = true,\n    pageDetails = [],\n    pageDetailsTitle = '',\n    ...rest\n  } = pagination || noPagination; // pagination can be false\n\n  // Get the needed page\n  const page = useMemo(() => {\n    if (!hasPagination || !pagination) return null;\n    if (dataIsPage) return flattenedData;\n    return flattenedData.slice((pageIndex - 1) * pageSize, pageIndex * pageSize);\n  }, [hasPagination, pagination, dataIsPage, flattenedData, pageIndex, pageSize]);\n\n  const paginationHelpers = useMemo(\n    () => ({\n      ...rest,\n      hasPagination,\n      pageIndex,\n      canPreviousPage,\n      canNextPage,\n      pageSize,\n      perPageOptions,\n      onPageSizeChange,\n      onPreviousPage,\n      onNextPage,\n      onPageChange,\n      pageCount,\n      isLoadingPageCount: isLoadingPageCount,\n      perPageStep,\n      minPerPage,\n      maxPerPage,\n      showPerPageSelector,\n      pageDetails,\n      pageDetailsTitle,\n    }),\n    [\n      hasPagination,\n      pageIndex,\n      canPreviousPage,\n      canNextPage,\n      pageSize,\n      perPageOptions,\n      onPageSizeChange,\n      onPreviousPage,\n      onNextPage,\n      onPageChange,\n      pageCount,\n      isLoadingPageCount,\n      perPageStep,\n      minPerPage,\n      maxPerPage,\n      showPerPageSelector,\n      pageDetails,\n      pageDetailsTitle,\n      rest,\n    ],\n  );\n  return [page, paginationHelpers];\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useMemo } from 'react';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\n\nconst noPagination: Record<string, never> = {};\n\nconst emptyFunc = () => null;\n\nexport const usePaginationConfig = (\n  props: DSDataTableT.InternalProps,\n  flattenedData: DSDataTableT.InternalRow[],\n): [DSDataTableT.InternalRow[] | null, DSDataTableT.Pagination] => {\n  const { pagination, Pagination } = props;\n\n  const hasPagination = Boolean(pagination || Pagination);\n\n  // Set default values\n  const {\n    pageIndex = 1,\n    canPreviousPage = true,\n    canNextPage = true,\n    pageSize = 10,\n    perPageOptions = [10],\n    onPageSizeChange = emptyFunc,\n    onPreviousPage = emptyFunc,\n    onNextPage = emptyFunc,\n    onPageChange = emptyFunc,\n    pageCount = Math.ceil(flattenedData.length / pageSize),\n    isLoadingPageCount = false,\n    dataIsPage = false,\n    perPageStep = 5,\n    minPerPage = 0,\n    maxPerPage = 100,\n    showPerPageSelector = true,\n    pageDetails = [],\n    pageDetailsTitle = '',\n    ...rest\n  } = pagination || noPagination; // pagination can be false\n\n  // Get the needed page\n  const page = useMemo(() => {\n    if (!hasPagination || !pagination) return null;\n    if (dataIsPage) return flattenedData;\n    return flattenedData.slice((pageIndex - 1) * pageSize, pageIndex * pageSize);\n  }, [hasPagination, pagination, dataIsPage, flattenedData, pageIndex, pageSize]);\n\n  const paginationHelpers = useMemo(\n    () => ({\n      ...rest,\n      hasPagination,\n      pageIndex,\n      canPreviousPage,\n      canNextPage,\n      pageSize,\n      perPageOptions,\n      onPageSizeChange,\n      onPreviousPage,\n      onNextPage,\n      onPageChange,\n      pageCount,\n      isLoadingPageCount,\n      perPageStep,\n      minPerPage,\n      maxPerPage,\n      showPerPageSelector,\n      pageDetails,\n      pageDetailsTitle,\n    }),\n    [\n      hasPagination,\n      pageIndex,\n      canPreviousPage,\n      canNextPage,\n      pageSize,\n      perPageOptions,\n      onPageSizeChange,\n      onPreviousPage,\n      onNextPage,\n      onPageChange,\n      pageCount,\n      isLoadingPageCount,\n      perPageStep,\n      minPerPage,\n      maxPerPage,\n      showPerPageSelector,\n      pageDetails,\n      pageDetailsTitle,\n      rest,\n    ],\n  );\n  return [page, paginationHelpers];\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,eAAe;AAGxB,MAAM,eAAsC,CAAC;AAE7C,MAAM,YAAY,MAAM;AAEjB,MAAM,sBAAsB,CACjC,OACA,kBACiE;AACjE,QAAM,EAAE,YAAY,WAAW,IAAI;AAEnC,QAAM,gBAAgB,QAAQ,cAAc,UAAU;AAGtD,QAAM;AAAA,IACJ,YAAY;AAAA,IACZ,kBAAkB;AAAA,IAClB,cAAc;AAAA,IACd,WAAW;AAAA,IACX,iBAAiB,CAAC,EAAE;AAAA,IACpB,mBAAmB;AAAA,IACnB,iBAAiB;AAAA,IACjB,aAAa;AAAA,IACb,eAAe;AAAA,IACf,YAAY,KAAK,KAAK,cAAc,SAAS,QAAQ;AAAA,IACrD,qBAAqB;AAAA,IACrB,aAAa;AAAA,IACb,cAAc;AAAA,IACd,aAAa;AAAA,IACb,aAAa;AAAA,IACb,sBAAsB;AAAA,IACtB,cAAc,CAAC;AAAA,IACf,mBAAmB;AAAA,IACnB,GAAG;AAAA,EACL,IAAI,cAAc;AAGlB,QAAM,OAAO,QAAQ,MAAM;AACzB,QAAI,CAAC,iBAAiB,CAAC,WAAY,QAAO;AAC1C,QAAI,WAAY,QAAO;AACvB,WAAO,cAAc,OAAO,YAAY,KAAK,UAAU,YAAY,QAAQ;AAAA,EAC7E,GAAG,CAAC,eAAe,YAAY,YAAY,eAAe,WAAW,QAAQ,CAAC;AAE9E,QAAM,oBAAoB;AAAA,IACxB,OAAO;AAAA,MACL,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACA,SAAO,CAAC,MAAM,iBAAiB;AACjC;",
   "names": []
 }

package/dist/esm/configs/useTableColsWithAddons.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/configs/useTableColsWithAddons.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-use-before-define */\n/* eslint-disable max-params */\nimport { createRef, useMemo } from 'react';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\nimport {\n  dragHandleColumn,\n  expandRowColumn,\n  actionColumn,\n  singleSelectColumn,\n  multiSelectColumn,\n} from '../addons/Columns/index.js';\n\nconst augmentColumns = (columns: DSDataTableT.Column[]): DSDataTableT.InternalColumn[] => {\n  const augmentColumn = (\n    column: DSDataTableT.Column,\n    index: number,\n    parentId: string | null = null,\n    depth = 0,\n  ): DSDataTableT.InternalColumn => {\n    let id = `column${index}`;\n    if (typeof column.Header === 'string') id = column.Header;\n    if (typeof column.accessor === 'string') id = column.accessor;\n    const { columns: childColumns, ...restOfColumn } = column;\n    const newCol: DSDataTableT.InternalColumn = {\n      id,\n      parentId,\n      depth,\n      ...restOfColumn,\n      ref: createRef<HTMLTableColElement>() as React.MutableRefObject<HTMLTableColElement>,\n    };\n    if (childColumns) newCol.columns = childColumns.map((col, i) => augmentColumn(col, i, id, depth + 1));\n    return newCol;\n  };\n  return columns.map((col, index) => augmentColumn(col, index));\n};\n\nconst isColumnInArrayOfColumns = (columns: DSDataTableT.Column[], col: DSDataTableT.Column) =>\n  columns.some((column) => column.id === col.id);\n\nconst useTableColsWithAddons = (\n  {\n    columns,\n    renderRowActions,\n    isExpandable,\n    selectSingle,\n    selection,\n    dragAndDropRows,\n    noSelectionColumn,\n  }: DSDataTableT.InternalProps,\n  hiddenColumns: string[],\n) => {\n  const withSelection = Boolean(selection);\n\n  return useMemo(() => {\n    const columnsWithAddons = [...augmentColumns(columns)];\n    // Columns to be prepended\n    const colsToPrepend: DSDataTableT.InternalColumn[] = [];\n    // Columns to be appended\n    const colsToAppend: DSDataTableT.InternalColumn[] = [];\n\n    if (isExpandable) colsToPrepend.push(expandRowColumn);\n    if (withSelection && !noSelectionColumn) {\n      if (selectSingle) colsToPrepend.push(singleSelectColumn as unknown as DSDataTableT.InternalColumn);\n      else colsToPrepend.push(multiSelectColumn as unknown as DSDataTableT.InternalColumn);\n    }\n    if (dragAndDropRows) colsToPrepend.push(dragHandleColumn as unknown as DSDataTableT.InternalColumn);\n    if (renderRowActions) colsToAppend.push(actionColumn(renderRowActions));\n\n    // Prepend or append all the columns that were not extended by the user\n    colsToPrepend.forEach((col) => {\n      if (!isColumnInArrayOfColumns(columnsWithAddons, col)) columnsWithAddons.unshift(col);\n    });\n    colsToAppend.forEach((col) => {\n      if (!isColumnInArrayOfColumns(columnsWithAddons, col)) columnsWithAddons.push(col);\n    });\n\n    return columnsWithAddons\n      .filter((col) => col.accessor === undefined || !isColumnVisible(col.accessor, col.columns, hiddenColumns))\n      .map((col) => {\n        if (col.columns) {\n          col.columns = col.columns.filter(\n            (subCol: DSDataTableT.Column) => subCol.accessor === undefined || !hiddenColumns?.includes(subCol.accessor),\n          );\n        }\n        return col;\n      });\n  }, [\n    columns,\n    isExpandable,\n    withSelection,\n    noSelectionColumn,\n    dragAndDropRows,\n    renderRowActions,\n    selectSingle,\n    hiddenColumns,\n  ]);\n};\n\nexport { useTableColsWithAddons };\n\nconst isColumnVisible = (\n  columnAccessor: string,\n  columns: DSDataTableT.Column[] | undefined,\n  hiddenColumns: string[],\n) => {\n  if (!columns) return hiddenColumns.includes(columnAccessor);\n  if (hiddenColumns.includes(columnAccessor)) return true;\n  return columns.every((col) => hiddenColumns.includes(col.accessor || col.id!));\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,WAAW,eAAe;AAEnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,iBAAiB,CAAC,YAAkE;AACxF,QAAM,gBAAgB,CACpB,QACA,OACA,WAA0B,MAC1B,QAAQ,MACwB;AAChC,QAAI,KAAK,SAAS,KAAK;AACvB,QAAI,OAAO,OAAO,WAAW,SAAU,MAAK,OAAO;AACnD,QAAI,OAAO,OAAO,aAAa,SAAU,MAAK,OAAO;AACrD,UAAM,EAAE,SAAS,cAAc,GAAG,aAAa,IAAI;AACnD,UAAM,SAAsC;AAAA,MAC1C;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,MACH,KAAK,UAA+B;AAAA,IACtC;AACA,QAAI,aAAc,QAAO,UAAU,aAAa,IAAI,CAAC,KAAK,MAAM,cAAc,KAAK,GAAG,IAAI,QAAQ,CAAC,CAAC;AACpG,WAAO;AAAA,EACT;AACA,SAAO,QAAQ,IAAI,CAAC,KAAK,UAAU,cAAc,KAAK,KAAK,CAAC;AAC9D;AAEA,MAAM,2BAA2B,CAAC,SAAgC,QAChE,QAAQ,KAAK,CAAC,WAAW,OAAO,OAAO,IAAI,EAAE;AAE/C,MAAM,yBAAyB,CAC7B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GACA,kBACG;AACH,QAAM,gBAAgB,QAAQ,SAAS;AAEvC,SAAO,QAAQ,MAAM;AACnB,UAAM,oBAAoB,CAAC,GAAG,eAAe,OAAO,CAAC;AAErD,UAAM,gBAA+C,CAAC;AAEtD,UAAM,eAA8C,CAAC;AAErD,QAAI,aAAc,eAAc,KAAK,eAAe;AACpD,QAAI,iBAAiB,CAAC,mBAAmB;AACvC,UAAI,aAAc,eAAc,KAAK,kBAA4D;AAAA,UAC5F,eAAc,KAAK,iBAA2D;AAAA,IACrF;AACA,QAAI,gBAAiB,eAAc,KAAK,gBAA0D;AAClG,QAAI,iBAAkB,cAAa,KAAK,aAAa,gBAAgB,CAAC;AAGtE,kBAAc,QAAQ,CAAC,QAAQ;AAC7B,UAAI,CAAC,yBAAyB,mBAAmB,GAAG,EAAG,mBAAkB,QAAQ,GAAG;AAAA,IACtF,CAAC;AACD,iBAAa,QAAQ,CAAC,QAAQ;AAC5B,UAAI,CAAC,yBAAyB,mBAAmB,GAAG,EAAG,mBAAkB,KAAK,GAAG;AAAA,IACnF,CAAC;AAED,WAAO,kBACJ,OAAO,CAAC,QAAQ,IAAI,aAAa,UAAa,CAAC,gBAAgB,IAAI,UAAU,IAAI,SAAS,aAAa,CAAC,EACxG,IAAI,CAAC,QAAQ;AACZ,UAAI,IAAI,SAAS;AACf,YAAI,UAAU,IAAI,QAAQ;AAAA,UACxB,CAAC,WAAgC,OAAO,aAAa,UAAa,CAAC,eAAe,SAAS,OAAO,QAAQ;AAAA,QAC5G;AAAA,MACF;AACA,aAAO;AAAA,IACT,CAAC;AAAA,EACL,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH;AAIA,MAAM,kBAAkB,CACtB,gBACA,SACA,kBACG;AACH,MAAI,CAAC,QAAS,QAAO,cAAc,SAAS,cAAc;AAC1D,MAAI,cAAc,SAAS,cAAc,EAAG,QAAO;AACnD,SAAO,QAAQ,MAAM,CAAC,QAAQ,cAAc,SAAS,IAAI,YAAY,IAAI,EAAG,CAAC;AAC/E;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/no-cycle */\n/* eslint-disable @typescript-eslint/no-use-before-define */\n/* eslint-disable max-params */\nimport { createRef, useMemo } from 'react';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\nimport {\n  dragHandleColumn,\n  expandRowColumn,\n  actionColumn,\n  singleSelectColumn,\n  multiSelectColumn,\n} from '../addons/Columns/index.js';\n\nconst augmentColumns = (columns: DSDataTableT.Column[]): DSDataTableT.InternalColumn[] => {\n  const augmentColumn = (\n    column: DSDataTableT.Column,\n    index: number,\n    parentId: string | null = null,\n    depth = 0,\n  ): DSDataTableT.InternalColumn => {\n    let id = `column${index}`;\n    if (typeof column.Header === 'string') id = column.Header;\n    if (typeof column.accessor === 'string') id = column.accessor;\n    const { columns: childColumns, ...restOfColumn } = column;\n    const newCol: DSDataTableT.InternalColumn = {\n      id,\n      parentId,\n      depth,\n      ...restOfColumn,\n      ref: createRef<HTMLTableColElement>() as React.MutableRefObject<HTMLTableColElement>,\n    };\n    if (childColumns) newCol.columns = childColumns.map((col, i) => augmentColumn(col, i, id, depth + 1));\n    return newCol;\n  };\n  return columns.map((col, index) => augmentColumn(col, index));\n};\n\nconst isColumnInArrayOfColumns = (columns: DSDataTableT.Column[], col: DSDataTableT.Column) =>\n  columns.some((column) => column.id === col.id);\n\nconst useTableColsWithAddons = (\n  {\n    columns,\n    renderRowActions,\n    isExpandable,\n    selectSingle,\n    selection,\n    dragAndDropRows,\n    noSelectionColumn,\n  }: DSDataTableT.InternalProps,\n  hiddenColumns: string[],\n) => {\n  const withSelection = Boolean(selection);\n\n  return useMemo(() => {\n    const columnsWithAddons = [...augmentColumns(columns)];\n    // Columns to be prepended\n    const colsToPrepend: DSDataTableT.InternalColumn[] = [];\n    // Columns to be appended\n    const colsToAppend: DSDataTableT.InternalColumn[] = [];\n\n    if (isExpandable) colsToPrepend.push(expandRowColumn);\n    if (withSelection && !noSelectionColumn) {\n      if (selectSingle) colsToPrepend.push(singleSelectColumn as unknown as DSDataTableT.InternalColumn);\n      else colsToPrepend.push(multiSelectColumn as unknown as DSDataTableT.InternalColumn);\n    }\n    if (dragAndDropRows) colsToPrepend.push(dragHandleColumn as unknown as DSDataTableT.InternalColumn);\n    if (renderRowActions) colsToAppend.push(actionColumn(renderRowActions));\n\n    // Prepend or append all the columns that were not extended by the user\n    colsToPrepend.forEach((col) => {\n      if (!isColumnInArrayOfColumns(columnsWithAddons, col)) columnsWithAddons.unshift(col);\n    });\n    colsToAppend.forEach((col) => {\n      if (!isColumnInArrayOfColumns(columnsWithAddons, col)) columnsWithAddons.push(col);\n    });\n\n    return columnsWithAddons\n      .filter((col) => col.accessor === undefined || !isColumnVisible(col.accessor, col.columns, hiddenColumns))\n      .map((col) => {\n        if (col.columns) {\n          col.columns = col.columns.filter(\n            (subCol: DSDataTableT.Column) => subCol.accessor === undefined || !hiddenColumns?.includes(subCol.accessor),\n          );\n        }\n        return col;\n      });\n  }, [\n    columns,\n    isExpandable,\n    withSelection,\n    noSelectionColumn,\n    dragAndDropRows,\n    renderRowActions,\n    selectSingle,\n    hiddenColumns,\n  ]);\n};\n\nexport { useTableColsWithAddons };\n\nconst isColumnVisible = (\n  columnAccessor: string,\n  columns: DSDataTableT.Column[] | undefined,\n  hiddenColumns: string[],\n) => {\n  if (!columns) return hiddenColumns.includes(columnAccessor);\n  if (hiddenColumns.includes(columnAccessor)) return true;\n  return columns.every((col) => hiddenColumns.includes(col.accessor || col.id!));\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,WAAW,eAAe;AAEnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,iBAAiB,CAAC,YAAkE;AACxF,QAAM,gBAAgB,CACpB,QACA,OACA,WAA0B,MAC1B,QAAQ,MACwB;AAChC,QAAI,KAAK,SAAS,KAAK;AACvB,QAAI,OAAO,OAAO,WAAW,SAAU,MAAK,OAAO;AACnD,QAAI,OAAO,OAAO,aAAa,SAAU,MAAK,OAAO;AACrD,UAAM,EAAE,SAAS,cAAc,GAAG,aAAa,IAAI;AACnD,UAAM,SAAsC;AAAA,MAC1C;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,MACH,KAAK,UAA+B;AAAA,IACtC;AACA,QAAI,aAAc,QAAO,UAAU,aAAa,IAAI,CAAC,KAAK,MAAM,cAAc,KAAK,GAAG,IAAI,QAAQ,CAAC,CAAC;AACpG,WAAO;AAAA,EACT;AACA,SAAO,QAAQ,IAAI,CAAC,KAAK,UAAU,cAAc,KAAK,KAAK,CAAC;AAC9D;AAEA,MAAM,2BAA2B,CAAC,SAAgC,QAChE,QAAQ,KAAK,CAAC,WAAW,OAAO,OAAO,IAAI,EAAE;AAE/C,MAAM,yBAAyB,CAC7B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GACA,kBACG;AACH,QAAM,gBAAgB,QAAQ,SAAS;AAEvC,SAAO,QAAQ,MAAM;AACnB,UAAM,oBAAoB,CAAC,GAAG,eAAe,OAAO,CAAC;AAErD,UAAM,gBAA+C,CAAC;AAEtD,UAAM,eAA8C,CAAC;AAErD,QAAI,aAAc,eAAc,KAAK,eAAe;AACpD,QAAI,iBAAiB,CAAC,mBAAmB;AACvC,UAAI,aAAc,eAAc,KAAK,kBAA4D;AAAA,UAC5F,eAAc,KAAK,iBAA2D;AAAA,IACrF;AACA,QAAI,gBAAiB,eAAc,KAAK,gBAA0D;AAClG,QAAI,iBAAkB,cAAa,KAAK,aAAa,gBAAgB,CAAC;AAGtE,kBAAc,QAAQ,CAAC,QAAQ;AAC7B,UAAI,CAAC,yBAAyB,mBAAmB,GAAG,EAAG,mBAAkB,QAAQ,GAAG;AAAA,IACtF,CAAC;AACD,iBAAa,QAAQ,CAAC,QAAQ;AAC5B,UAAI,CAAC,yBAAyB,mBAAmB,GAAG,EAAG,mBAAkB,KAAK,GAAG;AAAA,IACnF,CAAC;AAED,WAAO,kBACJ,OAAO,CAAC,QAAQ,IAAI,aAAa,UAAa,CAAC,gBAAgB,IAAI,UAAU,IAAI,SAAS,aAAa,CAAC,EACxG,IAAI,CAAC,QAAQ;AACZ,UAAI,IAAI,SAAS;AACf,YAAI,UAAU,IAAI,QAAQ;AAAA,UACxB,CAAC,WAAgC,OAAO,aAAa,UAAa,CAAC,eAAe,SAAS,OAAO,QAAQ;AAAA,QAC5G;AAAA,MACF;AACA,aAAO;AAAA,IACT,CAAC;AAAA,EACL,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH;AAIA,MAAM,kBAAkB,CACtB,gBACA,SACA,kBACG;AACH,MAAI,CAAC,QAAS,QAAO,cAAc,SAAS,cAAc;AAC1D,MAAI,cAAc,SAAS,cAAc,EAAG,QAAO;AACnD,SAAO,QAAQ,MAAM,CAAC,QAAQ,cAAc,SAAS,IAAI,YAAY,IAAI,EAAG,CAAC;AAC/E;",
   "names": []
 }

package/dist/esm/exported-related/RowRenderer/DefaultRowContentRenderer.js

@@ -12,7 +12,9 @@ const DetailsWrapper = (props) => (
   /* @__PURE__ */ jsx(
     "div",
     {
+      id: `${props.row.uid}-detail-view-container`,
       "data-role": "detail-view",
+      role: "region",
       style: {
         borderTop: "1px solid #EBEDF0",
         borderBottom: "1px solid #EBEDF0"
@@ -81,10 +83,12 @@ const DefaultRowContentRenderer = (props) => {
     expandable: isExpandable,
     expanded: expandedRows[row.uid] === true
   };
+  const isDetailShown = !isDragOverlay && isExpandable && row.isExpanded;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       StyledCellContainer,
       {
+        id: `${row.uid}-row`,
         innerRef: rowRef,
         tabIndex: 0,
         role: "row",
@@ -118,7 +122,7 @@ const DefaultRowContentRenderer = (props) => {
       },
       row.uid
     ),
-    !isDragOverlay && isExpandable && row.isExpanded && DetailsView && /* @__PURE__ */ jsx(DetailsWrapper, { children: /* @__PURE__ */ jsx(DetailsView, { row, detailsIndent }) })
+    isDetailShown && DetailsView ? /* @__PURE__ */ jsx(DetailsWrapper, { row, children: /* @__PURE__ */ jsx(DetailsView, { row, detailsIndent }) }) : null
   ] });
 };
 export {

package/dist/esm/exported-related/RowRenderer/DefaultRowContentRenderer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/RowRenderer/DefaultRowContentRenderer.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useMemo, useLayoutEffect, useRef, type PropsWithChildren, useCallback } from 'react';\nimport { INTERNAL_COLUMNS } from '../../addons/Columns/index.js';\nimport { DATA_TESTID, DropIndicatorPosition } from '../../configs/constants.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport { Cells } from '../../parts/Cells/index.js';\nimport type { RowVariantProps } from '../../parts/RowVariants/types.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { StyledCellContainer } from '../../styled.js';\n\nconst DetailsWrapper: React.ComponentType<PropsWithChildren> = (props) => (\n  // This can be further customized\n  // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n  <div\n    data-role=\"detail-view\"\n    style={{\n      borderTop: '1px solid #EBEDF0',\n      borderBottom: '1px solid #EBEDF0',\n    }}\n    onClick={(e) => e.stopPropagation()}\n    onKeyDown={(e) => e.stopPropagation()}\n  >\n    {props.children}\n  </div>\n);\n\nconst getDefaultAriaLabelMessageForRow = ({\n  row,\n  selected,\n  disabled,\n  expanded,\n  expandable,\n}: {\n  row: DSDataTableT.InternalRow;\n  selected: boolean;\n  disabled: boolean;\n  expanded: boolean;\n  expandable: boolean;\n}) =>\n  `Row number ${row.realIndex + 1}${row.parentIndex !== null ? `, child of row number ${row.parentIndex + 1}` : ''}. ${\n    selected ? 'Selected. ' : ''\n  }${disabled ? 'Disabled. ' : 'To interact with the cells press enter. '}${\n    // eslint-disable-next-line no-nested-ternary\n    expandable ? (expanded ? 'Expanded. ' : 'Collapsed. ') : ''\n  }`;\n\nexport const DefaultRowContentRenderer: React.ComponentType<RowVariantProps> = (props) => {\n  const {\n    row,\n    draggableProps,\n    isDragOverlay,\n    backgroundColor = 'neutral-000',\n    dropIndicatorPosition,\n    isDropValid,\n    focusedRowId,\n    drilldownRowId,\n    compact,\n  } = props;\n\n  const isExpandable = usePropsStore((state) => state.isExpandable);\n  const selection = usePropsStore((state) => state.selection);\n  const noSelectionColumn = usePropsStore((state) => state.noSelectionColumn);\n  const expandedRows = usePropsStore((state) => state.expandedRows);\n  const disabledRows = usePropsStore((state) => state.disabledRows);\n  const getAriaLabelForRow = usePropsStore((state) => state.getAriaLabelForRow);\n  const visibleColumns = usePropsStore((state) => state.visibleColumns);\n  const domIdAffix = usePropsStore((state) => state.domIdAffix);\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = useCallback(() => row, [row]);\n  const rowRef = useRef<HTMLDivElement>(null);\n  const isDndActive = draggableProps && draggableProps.active;\n  const isDragging = draggableProps && draggableProps.isDragging;\n\n  useLayoutEffect(() => {\n    if (row.uid === focusedRowId) {\n      rowRef.current?.focus();\n    }\n  }, [focusedRowId, row.uid]);\n\n  const detailsIndent = useMemo(() => {\n    let padding = 0;\n    for (let i = 0; i < visibleColumns.length; i += 1) {\n      if (INTERNAL_COLUMNS.includes(visibleColumns[i].id)) {\n        padding += visibleColumns[i].width as number;\n      } else {\n        padding += row.depth * 32 + 15;\n        break;\n      }\n    }\n    return padding;\n  }, [row.depth, visibleColumns]);\n\n  const DetailsView = row.original.tableRowDetails;\n\n  const rowAriaLabelProps = {\n    row,\n    selected: selection?.[row.uid] === true,\n    disabled: disabledRows[row.uid],\n    expandable: isExpandable,\n    expanded: expandedRows[row.uid] === true,\n  };\n\n  return (\n    <>\n      <StyledCellContainer\n        innerRef={rowRef}\n        key={row.uid}\n        tabIndex={0}\n        role=\"row\"\n        aria-rowindex={row.realIndex + 1}\n        aria-label={(getAriaLabelForRow ?? getDefaultAriaLabelMessageForRow)(rowAriaLabelProps)}\n        aria-selected={selection?.[row.uid] === true}\n        aria-disabled={disabledRows[row.uid]}\n        backgroundColor={backgroundColor}\n        height={compact ? '24px' : 'auto'}\n        minHeight={compact ? '24px' : '36px'}\n        isDropIndicatorPositionInside={dropIndicatorPosition === DropIndicatorPosition.Inside}\n        isDropValid={isDropValid}\n        shouldDisplayHover={!isDndActive && !isDragging && !isDragOverlay}\n        isDragOverlay={isDragOverlay}\n        isDragging={isDragging}\n        selected={noSelectionColumn && selection?.[row.uid] === true}\n        isDisabled={disabledRows[row.uid]}\n        data-testid={DATA_TESTID.DATA_TABLE_ROW_CONTENT}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <Cells\n          row={row}\n          isRowSelected={drilldownRowId === row.uid}\n          isDragOverlay={isDragOverlay}\n          key={row.uid}\n          // @ts-expect-error - data-table typescript is broken\n          domIdAffix={domIdAffix}\n        />\n      </StyledCellContainer>\n      {!isDragOverlay && isExpandable && row.isExpanded && DetailsView && (\n        <DetailsWrapper>\n          <DetailsView row={row} detailsIndent={detailsIndent} />\n        </DetailsWrapper>\n      )}\n    </>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */\n/* eslint-disable complexity */\nimport React, { useMemo, useLayoutEffect, useRef, type PropsWithChildren, useCallback } from 'react';\nimport { INTERNAL_COLUMNS } from '../../addons/Columns/index.js';\nimport { DATA_TESTID, DropIndicatorPosition } from '../../configs/constants.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport { Cells } from '../../parts/Cells/index.js';\nimport type { RowVariantProps } from '../../parts/RowVariants/types.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { StyledCellContainer } from '../../styled.js';\n\nconst DetailsWrapper: React.ComponentType<PropsWithChildren & { row: DSDataTableT.InternalRow }> = (props) => (\n  // This can be further customized\n  // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n  <div\n    id={`${props.row.uid}-detail-view-container`}\n    data-role=\"detail-view\"\n    role=\"region\"\n    style={{\n      borderTop: '1px solid #EBEDF0',\n      borderBottom: '1px solid #EBEDF0',\n    }}\n    onClick={(e) => e.stopPropagation()}\n    onKeyDown={(e) => e.stopPropagation()}\n  >\n    {props.children}\n  </div>\n);\n\nconst getDefaultAriaLabelMessageForRow = ({\n  row,\n  selected,\n  disabled,\n  expanded,\n  expandable,\n}: {\n  row: DSDataTableT.InternalRow;\n  selected: boolean;\n  disabled: boolean;\n  expanded: boolean;\n  expandable: boolean;\n}) =>\n  `Row number ${row.realIndex + 1}${row.parentIndex !== null ? `, child of row number ${row.parentIndex + 1}` : ''}. ${\n    selected ? 'Selected. ' : ''\n  }${disabled ? 'Disabled. ' : 'To interact with the cells press enter. '}${\n    // eslint-disable-next-line no-nested-ternary\n    expandable ? (expanded ? 'Expanded. ' : 'Collapsed. ') : ''\n  }`;\n\nexport const DefaultRowContentRenderer: React.ComponentType<RowVariantProps> = (props) => {\n  const {\n    row,\n    draggableProps,\n    isDragOverlay,\n    backgroundColor = 'neutral-000',\n    dropIndicatorPosition,\n    isDropValid,\n    focusedRowId,\n    drilldownRowId,\n    compact,\n  } = props;\n\n  const isExpandable = usePropsStore((state) => state.isExpandable);\n  const selection = usePropsStore((state) => state.selection);\n  const noSelectionColumn = usePropsStore((state) => state.noSelectionColumn);\n  const expandedRows = usePropsStore((state) => state.expandedRows);\n  const disabledRows = usePropsStore((state) => state.disabledRows);\n  const getAriaLabelForRow = usePropsStore((state) => state.getAriaLabelForRow);\n  const visibleColumns = usePropsStore((state) => state.visibleColumns);\n  const domIdAffix = usePropsStore((state) => state.domIdAffix);\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = useCallback(() => row, [row]);\n  const rowRef = useRef<HTMLDivElement>(null);\n  const isDndActive = draggableProps && draggableProps.active;\n  const isDragging = draggableProps && draggableProps.isDragging;\n\n  useLayoutEffect(() => {\n    if (row.uid === focusedRowId) {\n      rowRef.current?.focus();\n    }\n  }, [focusedRowId, row.uid]);\n\n  const detailsIndent = useMemo(() => {\n    let padding = 0;\n    for (let i = 0; i < visibleColumns.length; i += 1) {\n      if (INTERNAL_COLUMNS.includes(visibleColumns[i].id)) {\n        padding += visibleColumns[i].width as number;\n      } else {\n        padding += row.depth * 32 + 15;\n        break;\n      }\n    }\n    return padding;\n  }, [row.depth, visibleColumns]);\n\n  const DetailsView = row.original.tableRowDetails;\n\n  const rowAriaLabelProps = {\n    row,\n    selected: selection?.[row.uid] === true,\n    disabled: disabledRows[row.uid],\n    expandable: isExpandable,\n    expanded: expandedRows[row.uid] === true,\n  };\n\n  const isDetailShown = !isDragOverlay && isExpandable && row.isExpanded;\n\n  return (\n    <>\n      <StyledCellContainer\n        id={`${row.uid}-row`}\n        innerRef={rowRef}\n        key={row.uid}\n        tabIndex={0}\n        role=\"row\"\n        aria-rowindex={row.realIndex + 1}\n        aria-label={(getAriaLabelForRow ?? getDefaultAriaLabelMessageForRow)(rowAriaLabelProps)}\n        aria-selected={selection?.[row.uid] === true}\n        aria-disabled={disabledRows[row.uid]}\n        backgroundColor={backgroundColor}\n        height={compact ? '24px' : 'auto'}\n        minHeight={compact ? '24px' : '36px'}\n        isDropIndicatorPositionInside={dropIndicatorPosition === DropIndicatorPosition.Inside}\n        isDropValid={isDropValid}\n        shouldDisplayHover={!isDndActive && !isDragging && !isDragOverlay}\n        isDragOverlay={isDragOverlay}\n        isDragging={isDragging}\n        selected={noSelectionColumn && selection?.[row.uid] === true}\n        isDisabled={disabledRows[row.uid]}\n        data-testid={DATA_TESTID.DATA_TABLE_ROW_CONTENT}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <Cells\n          row={row}\n          isRowSelected={drilldownRowId === row.uid}\n          isDragOverlay={isDragOverlay}\n          key={row.uid}\n          // @ts-expect-error - data-table typescript is broken\n          domIdAffix={domIdAffix}\n        />\n      </StyledCellContainer>\n      {isDetailShown && DetailsView ? (\n        <DetailsWrapper row={row}>\n          <DetailsView row={row} detailsIndent={detailsIndent} />\n        </DetailsWrapper>\n      ) : null}\n    </>\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/exported-related/RowRenderer/useRowRendererHandlers.js

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { useCallback } from "react";
 import { useInternalStore, usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
+import { updateRangeSelection } from "../../helpers/multipleSelectRow.js";
 const useRowRendererHandlers = ({
   row,
   itemIndex,
@@ -34,16 +35,19 @@ const useRowRendererHandlers = ({
         if (selectSingle) {
           onSelectionChange({ [uid]: true }, uid, e);
         } else {
-          const newSelection = { ...selection, [uid]: !selection[uid] };
+          const newState = !selection[uid];
+          let newSelection = { ...selection, [uid]: newState };
           if (!newSelection[uid]) delete newSelection[uid];
-          const now = Number.parseInt(uid, 10);
+          const now = row.realIndex;
           if (e.shiftKey && lastSelected.current > -1) {
-            for (let i = Math.min(lastSelected.current, now); i <= Math.max(lastSelected.current, now); i += 1) {
-              const correctDataIndex = flattenedData[i]?.id;
-              if (!Object.keys(disabledRows).includes(correctDataIndex))
-                newSelection[correctDataIndex] = newSelection[lastSelected.current];
-              if (!newSelection[correctDataIndex]) delete newSelection[correctDataIndex];
-            }
+            newSelection = updateRangeSelection(
+              newSelection,
+              lastSelected.current,
+              now,
+              flattenedData,
+              disabledRows,
+              newState
+            );
           }
           lastSelected.current = now;
           onSelectionChange(newSelection, uid, e);

package/dist/esm/exported-related/RowRenderer/useRowRendererHandlers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/RowRenderer/useRowRendererHandlers.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport type React from 'react';\nimport { useCallback } from 'react';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { SortableItemContextType } from '../../parts/HoC/SortableItemContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\n\nexport const useRowRendererHandlers = ({\n  row,\n  itemIndex,\n  items,\n  draggableProps,\n  isDragOverlay,\n  drilldownRowId,\n}: {\n  row: DSDataTableT.InternalRow;\n  itemIndex: number;\n  items: DSDataTableT.InternalRow[];\n  draggableProps: SortableItemContextType['draggableProps'];\n  isDragOverlay: boolean;\n  drilldownRowId: string | null;\n}): {\n  handleItemClick: React.MouseEventHandler;\n  handleKeyDown: React.KeyboardEventHandler;\n  handleOnBlur: React.FocusEventHandler;\n  handleOnFocus: React.FocusEventHandler;\n} => {\n  const onRowClick = usePropsStore((state) => state.onRowClick);\n  const onSelectionChange = usePropsStore((state) => state.onSelectionChange);\n  const selectSingle = usePropsStore((state) => state.selectSingle);\n  const selection = usePropsStore((state) => state.selection);\n  const onRowFocus = usePropsStore((state) => state.onRowFocus);\n  const disabledRows = usePropsStore((state) => state.disabledRows);\n  const lastSelected = usePropsStore((state) => state.lastSelected);\n  const flattenedData = usePropsStore((state) => state.flattenedData);\n  const { scrollToIndex } = usePropsStore((state) => state.virtualListHelpers);\n  const setDrilldownRowId = useInternalStore((state) => state.setDrilldownRowId);\n  const setFocusedRowId = useInternalStore((state) => state.setFocusedRowId);\n\n  const findInCircularList = (\n    list: DSDataTableT.InternalRow[],\n    from: number,\n    step = 1,\n    // eslint-disable-next-line max-params\n  ): number => {\n    // the following loop is dark magic, requires a PHD in math to understand what's going on, but it works so...\n    // eslint-disable-next-line no-unreachable-loop\n    for (\n      let i = (from + step + list.length) % list.length;\n      i !== from && from > -1;\n      i = (i + step + list.length) % list.length\n    ) {\n      return i;\n    }\n    return from; // return same item\n  };\n\n  const handleItemClick = useCallback(\n    (e: React.MouseEvent | React.KeyboardEvent, { original, uid } = row) => {\n      if (disabledRows[uid]) return;\n      onRowClick(original, e, uid);\n      if (selection && onSelectionChange) {\n        if (selectSingle) {\n          onSelectionChange({ [uid]: true }, uid, e);\n        } else {\n          const newSelection = { ...selection, [uid]: !selection[uid] }; // we only want true and mixed values\n          if (!newSelection[uid]) delete newSelection[uid]; // if newState is false, remove from the new selection\n          const now = Number.parseInt(uid, 10);\n          if (e.shiftKey && lastSelected.current > -1) {\n            for (let i = Math.min(lastSelected.current, now); i <= Math.max(lastSelected.current, now); i += 1) {\n              const correctDataIndex = flattenedData[i]?.id;\n              if (!Object.keys(disabledRows).includes(correctDataIndex))\n                newSelection[correctDataIndex] = newSelection[lastSelected.current];\n              if (!newSelection[correctDataIndex]) delete newSelection[correctDataIndex];\n            }\n          }\n          lastSelected.current = now;\n\n          onSelectionChange(newSelection, uid, e);\n        }\n      }\n      onRowFocus(\n        {\n          itemIndex,\n          scrollToItem: (\n            opts: { align: 'auto' | 'start' | 'center' | 'end' } = {\n              align: 'start',\n            },\n          ) => scrollToIndex(itemIndex, opts),\n          original,\n        },\n        e,\n      );\n    },\n    [\n      row,\n      disabledRows,\n      onRowClick,\n      selection,\n      onSelectionChange,\n      onRowFocus,\n      itemIndex,\n      selectSingle,\n      lastSelected,\n      flattenedData,\n      scrollToIndex,\n    ],\n  );\n\n  const isActive = draggableProps && draggableProps.active;\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (isDragOverlay || isActive) {\n        e.preventDefault();\n        return;\n      }\n      const { target } = e;\n      const isChildEvent = (target as HTMLElement).getAttribute('role') !== 'row'; // if the event comes from a row\n\n      if (e.code === 'Enter') {\n        if (!isChildEvent) {\n          e.preventDefault();\n          if (drilldownRowId !== row.uid) {\n            setDrilldownRowId(row.uid);\n            setTimeout(() => {\n              const focuseableCell = row.cells.find((cell) => cell.ref.current !== null);\n              if (focuseableCell) focuseableCell.ref.current?.focus?.();\n            });\n          }\n        }\n      }\n      if (e.code === 'Space') {\n        if (!isChildEvent) {\n          e.preventDefault();\n        }\n        handleItemClick(e, row);\n      }\n      if (e.code === 'ArrowDown') {\n        e.preventDefault();\n        e.stopPropagation();\n        const next = findInCircularList(items, itemIndex);\n        setFocusedRowId(items[next].uid);\n      }\n      if (e.code === 'ArrowUp') {\n        e.preventDefault();\n        const prev = findInCircularList(items, itemIndex, -1);\n        setFocusedRowId(items[prev].uid);\n      }\n    },\n    [\n      isDragOverlay,\n      isActive,\n      drilldownRowId,\n      row,\n      setDrilldownRowId,\n      handleItemClick,\n      items,\n      itemIndex,\n      setFocusedRowId,\n    ],\n  );\n\n  const handleOnBlur: React.FocusEventHandler = useCallback(\n    (e) => {\n      if (e.relatedTarget?.getAttribute('role') === 'row') {\n        setDrilldownRowId(null);\n      }\n    },\n    [setDrilldownRowId],\n  );\n\n  const handleOnFocus: React.FocusEventHandler = useCallback(\n    (e) => {\n      if (e.target && e.target.getAttribute('role') === 'row') {\n        setFocusedRowId(row.uid);\n      }\n    },\n    [row.uid, setFocusedRowId],\n  );\n\n  return { handleItemClick, handleKeyDown, handleOnBlur, handleOnFocus };\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport type React from 'react';\nimport { useCallback } from 'react';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { SortableItemContextType } from '../../parts/HoC/SortableItemContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { updateRangeSelection } from '../../helpers/multipleSelectRow.js';\nexport const useRowRendererHandlers = ({\n  row,\n  itemIndex,\n  items,\n  draggableProps,\n  isDragOverlay,\n  drilldownRowId,\n}: {\n  row: DSDataTableT.InternalRow;\n  itemIndex: number;\n  items: DSDataTableT.InternalRow[];\n  draggableProps: SortableItemContextType['draggableProps'];\n  isDragOverlay: boolean;\n  drilldownRowId: string | null;\n}): {\n  handleItemClick: React.MouseEventHandler;\n  handleKeyDown: React.KeyboardEventHandler;\n  handleOnBlur: React.FocusEventHandler;\n  handleOnFocus: React.FocusEventHandler;\n} => {\n  const onRowClick = usePropsStore((state) => state.onRowClick);\n  const onSelectionChange = usePropsStore((state) => state.onSelectionChange);\n  const selectSingle = usePropsStore((state) => state.selectSingle);\n  const selection = usePropsStore((state) => state.selection);\n  const onRowFocus = usePropsStore((state) => state.onRowFocus);\n  const disabledRows = usePropsStore((state) => state.disabledRows);\n  const lastSelected = usePropsStore((state) => state.lastSelected);\n  const flattenedData = usePropsStore((state) => state.flattenedData);\n  const { scrollToIndex } = usePropsStore((state) => state.virtualListHelpers);\n  const setDrilldownRowId = useInternalStore((state) => state.setDrilldownRowId);\n  const setFocusedRowId = useInternalStore((state) => state.setFocusedRowId);\n\n  const findInCircularList = (\n    list: DSDataTableT.InternalRow[],\n    from: number,\n    step = 1,\n    // eslint-disable-next-line max-params\n  ): number => {\n    // the following loop is dark magic, requires a PHD in math to understand what's going on, but it works so...\n    // eslint-disable-next-line no-unreachable-loop\n    for (\n      let i = (from + step + list.length) % list.length;\n      i !== from && from > -1;\n      i = (i + step + list.length) % list.length\n    ) {\n      return i;\n    }\n    return from; // return same item\n  };\n\n  const handleItemClick = useCallback(\n    (e: React.MouseEvent | React.KeyboardEvent, { original, uid } = row) => {\n      if (disabledRows[uid]) return;\n      onRowClick(original, e, uid);\n      if (selection && onSelectionChange) {\n        if (selectSingle) {\n          onSelectionChange({ [uid]: true }, uid, e);\n        } else {\n          const newState = !selection[uid];\n          let newSelection = { ...selection, [uid]: newState }; // we only want true and mixed values\n          if (!newSelection[uid]) delete newSelection[uid]; // if newState is false, remove from the new selection\n          const now = row.realIndex;\n          if (e.shiftKey && lastSelected.current > -1) {\n            newSelection = updateRangeSelection(\n              newSelection,\n              lastSelected.current,\n              now,\n              flattenedData,\n              disabledRows,\n              newState,\n            );\n          }\n          lastSelected.current = now;\n\n          onSelectionChange(newSelection, uid, e);\n        }\n      }\n      onRowFocus(\n        {\n          itemIndex,\n          scrollToItem: (\n            opts: { align: 'auto' | 'start' | 'center' | 'end' } = {\n              align: 'start',\n            },\n          ) => scrollToIndex(itemIndex, opts),\n          original,\n        },\n        e,\n      );\n    },\n    [\n      row,\n      disabledRows,\n      onRowClick,\n      selection,\n      onSelectionChange,\n      onRowFocus,\n      itemIndex,\n      selectSingle,\n      lastSelected,\n      flattenedData,\n      scrollToIndex,\n    ],\n  );\n\n  const isActive = draggableProps && draggableProps.active;\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (isDragOverlay || isActive) {\n        e.preventDefault();\n        return;\n      }\n      const { target } = e;\n      const isChildEvent = (target as HTMLElement).getAttribute('role') !== 'row'; // if the event comes from a row\n\n      if (e.code === 'Enter') {\n        if (!isChildEvent) {\n          e.preventDefault();\n          if (drilldownRowId !== row.uid) {\n            setDrilldownRowId(row.uid);\n            setTimeout(() => {\n              const focuseableCell = row.cells.find((cell) => cell.ref.current !== null);\n              if (focuseableCell) focuseableCell.ref.current?.focus?.();\n            });\n          }\n        }\n      }\n      if (e.code === 'Space') {\n        if (!isChildEvent) {\n          e.preventDefault();\n        }\n        handleItemClick(e, row);\n      }\n      if (e.code === 'ArrowDown') {\n        e.preventDefault();\n        e.stopPropagation();\n        const next = findInCircularList(items, itemIndex);\n        setFocusedRowId(items[next].uid);\n      }\n      if (e.code === 'ArrowUp') {\n        e.preventDefault();\n        const prev = findInCircularList(items, itemIndex, -1);\n        setFocusedRowId(items[prev].uid);\n      }\n    },\n    [\n      isDragOverlay,\n      isActive,\n      drilldownRowId,\n      row,\n      setDrilldownRowId,\n      handleItemClick,\n      items,\n      itemIndex,\n      setFocusedRowId,\n    ],\n  );\n\n  const handleOnBlur: React.FocusEventHandler = useCallback(\n    (e) => {\n      if (e.relatedTarget?.getAttribute('role') === 'row') {\n        setDrilldownRowId(null);\n      }\n    },\n    [setDrilldownRowId],\n  );\n\n  const handleOnFocus: React.FocusEventHandler = useCallback(\n    (e) => {\n      if (e.target && e.target.getAttribute('role') === 'row') {\n        setFocusedRowId(row.uid);\n      }\n    },\n    [row.uid, setFocusedRowId],\n  );\n\n  return { handleItemClick, handleKeyDown, handleOnBlur, handleOnFocus };\n};\n"],
+  "mappings": "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",
   "names": []
 }

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

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

package/dist/esm/helpers/multipleSelectRow.js

@@ -0,0 +1,20 @@
+import * as React from "react";
+function updateRangeSelection(currentSelection, lastSelectedIndex, currentRowIndex, flattenedData, disabledRows, newState) {
+  const updatedSelection = { ...currentSelection };
+  const start = Math.min(lastSelectedIndex, currentRowIndex);
+  const end = Math.max(lastSelectedIndex, currentRowIndex);
+  for (let i = start; i <= end; i += 1) {
+    const uid = flattenedData[i]?.uid;
+    if (uid && !disabledRows[uid]) {
+      updatedSelection[uid] = newState;
+    }
+    if (!updatedSelection[uid]) {
+      delete updatedSelection[uid];
+    }
+  }
+  return updatedSelection;
+}
+export {
+  updateRangeSelection
+};
+//# sourceMappingURL=multipleSelectRow.js.map

package/dist/esm/helpers/multipleSelectRow.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/helpers/multipleSelectRow.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\n\nexport function updateRangeSelection(\n  currentSelection: DSDataTableT.Selection,\n  lastSelectedIndex: number,\n  currentRowIndex: number,\n  flattenedData: DSDataTableT.InternalRow[],\n  disabledRows: Record<string, boolean>,\n  newState: boolean,\n): DSDataTableT.Selection {\n  const updatedSelection = { ...currentSelection };\n  const start = Math.min(lastSelectedIndex, currentRowIndex);\n  const end = Math.max(lastSelectedIndex, currentRowIndex);\n  for (let i = start; i <= end; i += 1) {\n    const uid = flattenedData[i]?.uid;\n    if (uid && !disabledRows[uid]) {\n      updatedSelection[uid] = newState;\n    }\n    if (!updatedSelection[uid]) {\n      delete updatedSelection[uid];\n    }\n  }\n  return updatedSelection;\n}\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACGhB,SAAS,qBACd,kBACA,mBACA,iBACA,eACA,cACA,UACwB;AACxB,QAAM,mBAAmB,EAAE,GAAG,iBAAiB;AAC/C,QAAM,QAAQ,KAAK,IAAI,mBAAmB,eAAe;AACzD,QAAM,MAAM,KAAK,IAAI,mBAAmB,eAAe;AACvD,WAAS,IAAI,OAAO,KAAK,KAAK,KAAK,GAAG;AACpC,UAAM,MAAM,cAAc,CAAC,GAAG;AAC9B,QAAI,OAAO,CAAC,aAAa,GAAG,GAAG;AAC7B,uBAAiB,GAAG,IAAI;AAAA,IAC1B;AACA,QAAI,CAAC,iBAAiB,GAAG,GAAG;AAC1B,aAAO,iBAAiB,GAAG;AAAA,IAC7B;AAAA,EACF;AACA,SAAO;AACT;",
+  "names": []
+}

package/dist/esm/parts/HoC/withConditionalDnDColumnContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/HoC/withConditionalDnDColumnContext.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-underscore-dangle */\n/* eslint-disable max-params */\nimport {\n  DndContext,\n  DragOverlay,\n  arrayMove,\n  restrictToFirstScrollableAncestor,\n  useHierarchyDndkitConfig,\n  type DnDKitHierarchy,\n} from '@elliemae/ds-drag-and-drop';\nimport { useCallback, useMemo } from 'react';\nimport { INTERNAL_COLUMNS } from '../../addons/Columns/index.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport type { FunctionalHOC } from '../../types/FunctionalHoC.js';\nimport { HeaderCellGroup } from '../Headers/HeaderCellGroup.js';\nimport { DnDGroupContext } from './DnDGroupContext.js';\n\nexport type DnDGroupContextType = {\n  activeIndex: number | null;\n};\n\nconst flattenColumns = (cols: DSDataTableT.InternalColumn[]): DnDKitHierarchy.Item<DSDataTableT.InternalColumn>[] => {\n  const augmentedColumns = [] as DnDKitHierarchy.Item<DSDataTableT.InternalColumn>[];\n  const flatten = (col: DSDataTableT.InternalColumn, index: number, parentId: string | null = null) => {\n    const { id } = col;\n    augmentedColumns.push({ uid: id, parentId, realIndex: index, original: col });\n    if (col.columns)\n      col.columns.forEach((subColumn: DSDataTableT.InternalColumn, childIndex: number) =>\n        flatten(subColumn, childIndex, id),\n      );\n  };\n  cols.forEach((col, index) => flatten(col, index));\n  return augmentedColumns;\n};\n\n// only wraps in \"DnDContext\" and \"DnDGroupContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDColumnContext: FunctionalHOC = (Component) =>\n  function (props) {\n    const dragAndDropColumns = usePropsStore((state) => state.dragAndDropColumns);\n    const onColumnsReorder = usePropsStore((state) => state.onColumnsReorder);\n    const visibleColumns = usePropsStore((state) => state.visibleColumns);\n\n    const flattenedItems = useMemo(() => flattenColumns(visibleColumns), [visibleColumns]);\n\n    const onReorder: DnDKitHierarchy.OnReorder<DSDataTableT.InternalColumn> = useCallback(\n      (movedItem, indexes) => {\n        // Send from index to target index\n        const newFlattenedData = arrayMove(flattenedItems, indexes.fromIndex, indexes.targetIndex);\n        // Pull the cols's data into an object\n        const nodes: Record<string, DSDataTableT.InternalColumn> = {};\n        newFlattenedData.forEach(({ original: colData, ...dndData }) => {\n          delete colData.columns;\n          nodes[dndData.uid] = colData;\n        });\n        const newData = [] as DSDataTableT.Column[];\n        newFlattenedData.forEach(({ original: colData, ...dndData }) => {\n          // Don't send internal columns to the user\n          if (INTERNAL_COLUMNS.includes(dndData.uid as string)) {\n            return;\n          }\n          // If row has parent, insert it to it's subrows\n          // otherwise append it to the new user data\n          if (dndData.parentId) {\n            const parentNode = nodes[dndData.parentId];\n            if (parentNode.columns) parentNode.columns.push(colData);\n            else parentNode.columns = [colData];\n          } else newData.push(colData);\n        });\n        onColumnsReorder(newData, indexes);\n      },\n      [flattenedItems, onColumnsReorder],\n    );\n\n    const { dndContextProps, activeId, activeIndex } = useHierarchyDndkitConfig({\n      flattenedItems,\n      isHorizontalDnD: true,\n      onReorder,\n    });\n\n    const dragOverlayCol = useMemo(\n      () => (activeId ? flattenedItems.find((item) => item.uid === activeId)?.original : null),\n      [activeId, flattenedItems],\n    );\n    const DnDGroupContextVal = useMemo(() => ({ activeIndex }), [activeIndex]);\n\n    if (dragAndDropColumns)\n      return (\n        <DndContext {...dndContextProps}>\n          <DnDGroupContext.Provider value={DnDGroupContextVal}>\n            <Component {...props} />\n          </DnDGroupContext.Provider>\n          <DragOverlay modifiers={[restrictToFirstScrollableAncestor]}>\n            {activeId ? <HeaderCellGroup header={dragOverlayCol as DSDataTableT.InternalColumn} isDragOverlay /> : null}\n          </DragOverlay>\n        </DndContext>\n      );\n    return <Component {...props} />;\n  };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACwFf,SAEI,KAFJ;AAtFR;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,aAAa,eAAe;AACrC,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAG9B,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAMhC,MAAM,iBAAiB,CAAC,SAA6F;AACnH,QAAM,mBAAmB,CAAC;AAC1B,QAAM,UAAU,CAAC,KAAkC,OAAe,WAA0B,SAAS;AACnG,UAAM,EAAE,GAAG,IAAI;AACf,qBAAiB,KAAK,EAAE,KAAK,IAAI,UAAU,WAAW,OAAO,UAAU,IAAI,CAAC;AAC5E,QAAI,IAAI;AACN,UAAI,QAAQ;AAAA,QAAQ,CAAC,WAAwC,eAC3D,QAAQ,WAAW,YAAY,EAAE;AAAA,MACnC;AAAA,EACJ;AACA,OAAK,QAAQ,CAAC,KAAK,UAAU,QAAQ,KAAK,KAAK,CAAC;AAChD,SAAO;AACT;AAGO,MAAM,kCAAiD,CAAC,cAC7D,SAAU,OAAO;AACf,QAAM,qBAAqB,cAAc,CAAC,UAAU,MAAM,kBAAkB;AAC5E,QAAM,mBAAmB,cAAc,CAAC,UAAU,MAAM,gBAAgB;AACxE,QAAM,iBAAiB,cAAc,CAAC,UAAU,MAAM,cAAc;AAEpE,QAAM,iBAAiB,QAAQ,MAAM,eAAe,cAAc,GAAG,CAAC,cAAc,CAAC;AAErF,QAAM,YAAoE;AAAA,IACxE,CAAC,WAAW,YAAY;AAEtB,YAAM,mBAAmB,UAAU,gBAAgB,QAAQ,WAAW,QAAQ,WAAW;AAEzF,YAAM,QAAqD,CAAC;AAC5D,uBAAiB,QAAQ,CAAC,EAAE,UAAU,SAAS,GAAG,QAAQ,MAAM;AAC9D,eAAO,QAAQ;AACf,cAAM,QAAQ,GAAG,IAAI;AAAA,MACvB,CAAC;AACD,YAAM,UAAU,CAAC;AACjB,uBAAiB,QAAQ,CAAC,EAAE,UAAU,SAAS,GAAG,QAAQ,MAAM;AAE9D,YAAI,iBAAiB,SAAS,QAAQ,GAAa,GAAG;AACpD;AAAA,QACF;AAGA,YAAI,QAAQ,UAAU;AACpB,gBAAM,aAAa,MAAM,QAAQ,QAAQ;AACzC,cAAI,WAAW,QAAS,YAAW,QAAQ,KAAK,OAAO;AAAA,cAClD,YAAW,UAAU,CAAC,OAAO;AAAA,QACpC,MAAO,SAAQ,KAAK,OAAO;AAAA,MAC7B,CAAC;AACD,uBAAiB,SAAS,OAAO;AAAA,IACnC;AAAA,IACA,CAAC,gBAAgB,gBAAgB;AAAA,EACnC;AAEA,QAAM,EAAE,iBAAiB,UAAU,YAAY,IAAI,yBAAyB;AAAA,IAC1E;AAAA,IACA,iBAAiB;AAAA,IACjB;AAAA,EACF,CAAC;AAED,QAAM,iBAAiB;AAAA,IACrB,MAAO,WAAW,eAAe,KAAK,CAAC,SAAS,KAAK,QAAQ,QAAQ,GAAG,WAAW;AAAA,IACnF,CAAC,UAAU,cAAc;AAAA,EAC3B;AACA,QAAM,qBAAqB,QAAQ,OAAO,EAAE,YAAY,IAAI,CAAC,WAAW,CAAC;AAEzE,MAAI;AACF,WACE,qBAAC,cAAY,GAAG,iBACd;AAAA,0BAAC,gBAAgB,UAAhB,EAAyB,OAAO,oBAC/B,8BAAC,aAAW,GAAG,OAAO,GACxB;AAAA,MACA,oBAAC,eAAY,WAAW,CAAC,iCAAiC,GACvD,qBAAW,oBAAC,mBAAgB,QAAQ,gBAA+C,eAAa,MAAC,IAAK,MACzG;AAAA,OACF;AAEJ,SAAO,oBAAC,aAAW,GAAG,OAAO;AAC/B;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable func-names */\n/* eslint-disable no-underscore-dangle */\n/* eslint-disable max-params */\nimport {\n  DndContext,\n  DragOverlay,\n  arrayMove,\n  restrictToFirstScrollableAncestor,\n  useHierarchyDndkitConfig,\n  type DnDKitHierarchy,\n} from '@elliemae/ds-drag-and-drop';\nimport { useCallback, useMemo } from 'react';\nimport { INTERNAL_COLUMNS } from '../../addons/Columns/index.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport type { FunctionalHOC } from '../../types/FunctionalHoC.js';\nimport { HeaderCellGroup } from '../Headers/HeaderCellGroup.js';\nimport { DnDGroupContext } from './DnDGroupContext.js';\n\nexport type DnDGroupContextType = {\n  activeIndex: number | null;\n};\n\nconst flattenColumns = (cols: DSDataTableT.InternalColumn[]): DnDKitHierarchy.Item<DSDataTableT.InternalColumn>[] => {\n  const augmentedColumns = [] as DnDKitHierarchy.Item<DSDataTableT.InternalColumn>[];\n  const flatten = (col: DSDataTableT.InternalColumn, index: number, parentId: string | null = null) => {\n    const { id } = col;\n    augmentedColumns.push({ uid: id, parentId, realIndex: index, original: col });\n    if (col.columns)\n      col.columns.forEach((subColumn: DSDataTableT.InternalColumn, childIndex: number) =>\n        flatten(subColumn, childIndex, id),\n      );\n  };\n  cols.forEach((col, index) => flatten(col, index));\n  return augmentedColumns;\n};\n\n// only wraps in \"DnDContext\" and \"DnDGroupContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDColumnContext: FunctionalHOC = (Component) =>\n  function (props) {\n    const dragAndDropColumns = usePropsStore((state) => state.dragAndDropColumns);\n    const onColumnsReorder = usePropsStore((state) => state.onColumnsReorder);\n    const visibleColumns = usePropsStore((state) => state.visibleColumns);\n\n    const flattenedItems = useMemo(() => flattenColumns(visibleColumns), [visibleColumns]);\n\n    const onReorder: DnDKitHierarchy.OnReorder<DSDataTableT.InternalColumn> = useCallback(\n      (movedItem, indexes) => {\n        // Send from index to target index\n        const newFlattenedData = arrayMove(flattenedItems, indexes.fromIndex, indexes.targetIndex);\n        // Pull the cols's data into an object\n        const nodes: Record<string, DSDataTableT.InternalColumn> = {};\n        newFlattenedData.forEach(({ original: colData, ...dndData }) => {\n          delete colData.columns;\n          nodes[dndData.uid] = colData;\n        });\n        const newData = [] as DSDataTableT.Column[];\n        newFlattenedData.forEach(({ original: colData, ...dndData }) => {\n          // Don't send internal columns to the user\n          if (INTERNAL_COLUMNS.includes(dndData.uid as string)) {\n            return;\n          }\n          // If row has parent, insert it to it's subrows\n          // otherwise append it to the new user data\n          if (dndData.parentId) {\n            const parentNode = nodes[dndData.parentId];\n            if (parentNode.columns) parentNode.columns.push(colData);\n            else parentNode.columns = [colData];\n          } else newData.push(colData);\n        });\n        onColumnsReorder(newData, indexes);\n      },\n      [flattenedItems, onColumnsReorder],\n    );\n\n    const { dndContextProps, activeId, activeIndex } = useHierarchyDndkitConfig({\n      flattenedItems,\n      isHorizontalDnD: true,\n      onReorder,\n    });\n\n    const dragOverlayCol = useMemo(\n      () => (activeId ? flattenedItems.find((item) => item.uid === activeId)?.original : null),\n      [activeId, flattenedItems],\n    );\n    const DnDGroupContextVal = useMemo(() => ({ activeIndex }), [activeIndex]);\n\n    if (dragAndDropColumns)\n      return (\n        <DndContext {...dndContextProps}>\n          <DnDGroupContext.Provider value={DnDGroupContextVal}>\n            <Component {...props} />\n          </DnDGroupContext.Provider>\n          <DragOverlay modifiers={[restrictToFirstScrollableAncestor]}>\n            {activeId ? <HeaderCellGroup header={dragOverlayCol as DSDataTableT.InternalColumn} isDragOverlay /> : null}\n          </DragOverlay>\n        </DndContext>\n      );\n    return <Component {...props} />;\n  };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACyFf,SAEI,KAFJ;AAtFR;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,aAAa,eAAe;AACrC,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAG9B,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAMhC,MAAM,iBAAiB,CAAC,SAA6F;AACnH,QAAM,mBAAmB,CAAC;AAC1B,QAAM,UAAU,CAAC,KAAkC,OAAe,WAA0B,SAAS;AACnG,UAAM,EAAE,GAAG,IAAI;AACf,qBAAiB,KAAK,EAAE,KAAK,IAAI,UAAU,WAAW,OAAO,UAAU,IAAI,CAAC;AAC5E,QAAI,IAAI;AACN,UAAI,QAAQ;AAAA,QAAQ,CAAC,WAAwC,eAC3D,QAAQ,WAAW,YAAY,EAAE;AAAA,MACnC;AAAA,EACJ;AACA,OAAK,QAAQ,CAAC,KAAK,UAAU,QAAQ,KAAK,KAAK,CAAC;AAChD,SAAO;AACT;AAGO,MAAM,kCAAiD,CAAC,cAC7D,SAAU,OAAO;AACf,QAAM,qBAAqB,cAAc,CAAC,UAAU,MAAM,kBAAkB;AAC5E,QAAM,mBAAmB,cAAc,CAAC,UAAU,MAAM,gBAAgB;AACxE,QAAM,iBAAiB,cAAc,CAAC,UAAU,MAAM,cAAc;AAEpE,QAAM,iBAAiB,QAAQ,MAAM,eAAe,cAAc,GAAG,CAAC,cAAc,CAAC;AAErF,QAAM,YAAoE;AAAA,IACxE,CAAC,WAAW,YAAY;AAEtB,YAAM,mBAAmB,UAAU,gBAAgB,QAAQ,WAAW,QAAQ,WAAW;AAEzF,YAAM,QAAqD,CAAC;AAC5D,uBAAiB,QAAQ,CAAC,EAAE,UAAU,SAAS,GAAG,QAAQ,MAAM;AAC9D,eAAO,QAAQ;AACf,cAAM,QAAQ,GAAG,IAAI;AAAA,MACvB,CAAC;AACD,YAAM,UAAU,CAAC;AACjB,uBAAiB,QAAQ,CAAC,EAAE,UAAU,SAAS,GAAG,QAAQ,MAAM;AAE9D,YAAI,iBAAiB,SAAS,QAAQ,GAAa,GAAG;AACpD;AAAA,QACF;AAGA,YAAI,QAAQ,UAAU;AACpB,gBAAM,aAAa,MAAM,QAAQ,QAAQ;AACzC,cAAI,WAAW,QAAS,YAAW,QAAQ,KAAK,OAAO;AAAA,cAClD,YAAW,UAAU,CAAC,OAAO;AAAA,QACpC,MAAO,SAAQ,KAAK,OAAO;AAAA,MAC7B,CAAC;AACD,uBAAiB,SAAS,OAAO;AAAA,IACnC;AAAA,IACA,CAAC,gBAAgB,gBAAgB;AAAA,EACnC;AAEA,QAAM,EAAE,iBAAiB,UAAU,YAAY,IAAI,yBAAyB;AAAA,IAC1E;AAAA,IACA,iBAAiB;AAAA,IACjB;AAAA,EACF,CAAC;AAED,QAAM,iBAAiB;AAAA,IACrB,MAAO,WAAW,eAAe,KAAK,CAAC,SAAS,KAAK,QAAQ,QAAQ,GAAG,WAAW;AAAA,IACnF,CAAC,UAAU,cAAc;AAAA,EAC3B;AACA,QAAM,qBAAqB,QAAQ,OAAO,EAAE,YAAY,IAAI,CAAC,WAAW,CAAC;AAEzE,MAAI;AACF,WACE,qBAAC,cAAY,GAAG,iBACd;AAAA,0BAAC,gBAAgB,UAAhB,EAAyB,OAAO,oBAC/B,8BAAC,aAAW,GAAG,OAAO,GACxB;AAAA,MACA,oBAAC,eAAY,WAAW,CAAC,iCAAiC,GACvD,qBAAW,oBAAC,mBAAgB,QAAQ,gBAA+C,eAAa,MAAC,IAAK,MACzG;AAAA,OACF;AAEJ,SAAO,oBAAC,aAAW,GAAG,OAAO;AAC/B;",
   "names": []
 }

package/dist/esm/react-desc-prop-types.js

@@ -66,6 +66,19 @@ const DSDataTablePropTypes = {
       minWidth: PropTypes.number.description("Minimum width of this column, useful when resizing"),
       maxWidth: PropTypes.number.description("Maximum width of this column, useful when resizing"),
       canSort: PropTypes.bool.description("Whereas this column is sortable"),
+      disableFirstOptionFocusOnFilter: PropTypes.bool.description(
+        "Whereas the first option should not be focused on filter"
+      ),
+      filterMinWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description(
+        "Minimum width of the filter"
+      ),
+      filterOptions: PropTypes.arrayOf(
+        PropTypes.shape({
+          dsId: PropTypes.string,
+          value: PropTypes.string,
+          label: PropTypes.string
+        })
+      ).description("Filter options"),
       isSortedDesc: PropTypes.bool.description("Whereas this column is sorted descendingly"),
       required: PropTypes.bool.description("Whereas this column is required"),
       alwaysDisplayEditIcon: PropTypes.bool.description(