@elliemae/ds-data-table 3.40.0 → 3.41.0-rc.0

package/dist/cjs/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-empty-interface */\nimport { uid } from 'uid';\nimport type { WeakValidationMap } from 'react';\nimport type { Range, useVirtual } from 'react-virtual/types';\nimport type { ZustandT } from '@elliemae/ds-zustand-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DnDKitTree, useSortable } from '@elliemae/ds-drag-and-drop';\nimport type { DSControlledCheckboxT } from '@elliemae/ds-form-checkbox';\nimport type { DSComboboxT } from '@elliemae/ds-form-combobox';\nimport { PropTypes, getPropsPerSlotPropTypes } from '@elliemae/ds-props-helpers';\nimport { FILTER_TYPES } from './exported-related/index.js';\nimport { type DropIndicatorPosition, ColsLayoutStyle } from './configs/constants.js';\nimport { DSDataTableName, DSDataTableSlots } from './DSDataTableDefinitions.js';\n\nexport namespace DSDataTableT {\n  // ===========================================================================\n  // Typescript definition for auxiliary types\n  // ===========================================================================\n  type PropsT<D, R, O> = Partial<D> & R & O;\n\n  type InternalPropsT<D, R, O> = D & R & O;\n\n  // ===========================================================================\n  // Typescript definition for zustand store\n  // ===========================================================================\n\n  export type InternalAtoms = {\n    drilldownRowId: string | null;\n    focusedRowId: string | null;\n    isShiftPressed: boolean;\n    reduxHeaders: Record<string, ReduxHeader>;\n  };\n  export type UseAutoCalculatedT = {\n    /**\n     * visibleRangeRef: React.MutableRefObject<Range>\n     * We can use this ref to get the visible range of the virtual list\n     * taking in consideration the end-start and overscan.\n     */\n    visibleRangeRef: React.MutableRefObject<Range>;\n    columnHeaderRef: React.MutableRefObject<HTMLDivElement | null>;\n    virtualListRef: React.MutableRefObject<HTMLDivElement | null>;\n    flattenedData: InternalRow[];\n    allDataFlattened: InternalRow[];\n    isEmptyContent: boolean;\n    firstFocuseableColumnHeaderId: string | undefined;\n    visibleColumns: InternalColumn[];\n    virtualListHelpers: ReturnType<typeof useVirtual>;\n    layoutHelpers: {\n      totalColumnsWidth: number | string;\n      gridLayout: string[];\n    };\n    paginationHelpers: Pagination;\n    lastSelected: React.MutableRefObject<number>;\n  };\n  export type Selectors = Record<string, never>;\n  export type Reducers = {\n    patchHeader: (headerId: string, newHeader: Partial<ReduxHeader>) => void;\n    patchHeaderFilterButtonAndMenu: (headerId: string, value: boolean) => void;\n  };\n  export type ShuttleInternalStore = ZustandT.InternalStore<InternalAtoms, Selectors, Reducers>;\n\n  // ===========================================================================\n  // Typescript definition for data table related things\n  // ===========================================================================\n\n  export interface Filter {\n    id: string;\n    type: string;\n    value: unknown;\n  }\n\n  export type FilterFn<T> = (unfilteredData: Row[], filterKey: string, filterValue: T) => Row[];\n  export type FilterFnOutOfTheBoxCurrencyRange = DSDataTableT.FilterFn<{ from: string; to: string }>;\n  export type FilterFnOutOfTheBoxDateRange = DSDataTableT.FilterFn<{ startDate: string; endDate: string }>;\n  export type FilterFnOutOfTheBoxDateSwitcher = DSDataTableT.FilterFn<{\n    startDate: string;\n    endDate: string;\n    isDateRange: boolean;\n  }>;\n  export type FilterFnOutOfTheBoxMultiSelect = DSDataTableT.FilterFn<{ label: string; value: string }[]>;\n  export type FilterFnOutOfTheBoxNumberRange = DSDataTableT.FilterFn<{ from?: number; to?: number }>;\n  export type FilterFnOutOfTheBoxSingleDate = DSDataTableT.FilterFn<string>;\n  export type FilterFnOutOfTheBoxSingleSelect = DSDataTableT.FilterFn<{ label: string; value: string }>;\n\n  export interface FilterItemProps {\n    column: InternalColumn;\n    filters: Filter[];\n    onFiltersChange: (filters: Filter[]) => void;\n    reduxHeader: ReduxHeader;\n    innerRef: React.MutableRefObject<HTMLButtonElement | null>;\n  }\n\n  export interface FilterProps<T> {\n    column: InternalColumn;\n    onValueChange: (type: string, value: T | undefined) => void;\n    patchHeaderFilterButtonAndMenu: (headerId: string, newState: boolean) => void;\n    patchHeader: (headerId: string, newHeader: ReduxHeader) => void;\n    filterValue: T;\n    reduxHeader: ReduxHeader;\n    innerRef: React.MutableRefObject<HTMLButtonElement | null>;\n    domIdAffix?: string;\n  }\n\n  export interface FilterPillProps<T> {\n    columnHeader: string;\n    column: string;\n    value: T;\n    filters: Filter[];\n    onFiltersChange: (filters: Filter[]) => void;\n    prevRef: React.RefObject<HTMLElement>;\n    innerRef: React.RefObject<HTMLElement>;\n    nextRef: React.RefObject<HTMLElement>;\n  }\n\n  export interface ReduxHeader {\n    hideFilterMenu?: boolean;\n    hideFilterButton?: boolean;\n    showDnDHandle?: boolean;\n    withTabStops?: boolean;\n  }\n\n  export type SelectionItem = boolean | 'mixed';\n\n  export type Selection = Record<string | number, SelectionItem>;\n\n  export type UniqueRowAccessorType = string | string[] | ((row: Row) => string) | undefined;\n\n  export interface SortBy {\n    id: string;\n    desc: boolean;\n  }\n\n  export interface Pagination {\n    hasPagination: boolean;\n    pageIndex?: number;\n    canPreviousPage?: boolean;\n    canNextPage?: boolean;\n    pageSize?: number;\n    dataIsPage?: boolean;\n    showPerPageSelector?: boolean;\n    perPageOptions?: number[];\n    perPageStep?: number;\n    minPerPage?: number;\n    maxPerPage?: number;\n    onPageSizeChange?: (pageSize: number) => void;\n    onPreviousPage?: () => void;\n    onNextPage?: () => void;\n    onPageChange?: (page: number) => void;\n    pageCount?: number | string;\n    isLoadingPageCount?: boolean;\n    pageDetails?: string[];\n    pageDetailsTitle?: string;\n  }\n\n  export type RowVariant = 'ds-header-group-row' | 'ds-primary-row' | 'ds-secondary-row';\n\n  export interface RenderRowActionsConfig {\n    columnWidth: number;\n    renderer: React.ComponentType<CellProps>;\n  }\n\n  export type RenderRowActions = false | RenderRowActionsConfig;\n\n  export type DropIndicatorPositionValues = TypescriptHelpersT.ObjectValues<typeof DropIndicatorPosition>;\n\n  export type ColsLayoutStyleValues = TypescriptHelpersT.ObjectValues<typeof ColsLayoutStyle>;\n\n  export type DraggablePropsT =\n    | false\n    | (ReturnType<typeof useSortable> & {\n        dropIndicatorPosition: DropIndicatorPositionValues;\n        shouldShowDropIndicatorPosition: boolean;\n        isDropValid: boolean;\n      });\n\n  export type FilterOptionT = DSComboboxT.Props['allOptions'][number];\n  export type EditOptionT = DSComboboxT.Props['allOptions'][number];\n\n  // ===========================================================================\n  // Typescript definition for the row and columns\n  // ===========================================================================\n\n  export interface Row {\n    [key: string]: unknown;\n    subRows?: Row[];\n    tableRowDetails?: React.ComponentType<DetailsProps>;\n    dimsumHeaderValue?: string;\n  }\n  export interface EditableCellProps<T extends HTMLElement = HTMLElement> extends CellProps<T> {\n    DefaultCellRender: JSX.Element;\n  }\n\n  export interface Column {\n    id?: string;\n    Header: string | React.ComponentType<HeaderProps>;\n    accessor?: string;\n    filter?: string;\n    filterOptions?: FilterOptionT[] | (() => FilterOptionT[]);\n    editOptions?: EditOptionT[] | (() => EditOptionT[]);\n    filterMinWidth?: number | string;\n    Filter?: React.ComponentType<FilterProps<unknown>>;\n    Cell?: React.ComponentType<CellRendererProps>;\n    editable?: string | React.ComponentType<EditableCellProps>;\n    disableDnD?: boolean;\n    width?: number;\n    minWidth?: number;\n    maxWidth?: number;\n    padding?: number;\n    columns?: Column[];\n    canSort?: boolean;\n    isSortedDesc?: boolean;\n    canResize?: boolean;\n    isFocuseable?: boolean;\n    textWrap?: 'wrap' | 'wrap-all' | 'truncate';\n    ref?: React.MutableRefObject<HTMLTableColElement | null>;\n    required?: boolean;\n    cellStyle?: React.CSSProperties;\n    alwaysDisplayEditIcon?: boolean;\n  }\n\n  // ===========================================================================\n  // Typescript definition for the internal representation of the row and columns\n  // ===========================================================================\n\n  export interface InternalRow {\n    id: string;\n    uid: string;\n    index: number;\n    realIndex: number;\n    parent: InternalRow | null;\n    parentId: string | null;\n    parentIndex: number | null;\n    depth: number;\n    isExpanded: boolean;\n    subRows: Row[];\n    childrenCount: number;\n    original: Row;\n    cells: Cell[];\n  }\n\n  export interface InternalColumn extends Column {\n    id: string;\n    parentId: string | null;\n    depth: number;\n    ref: React.MutableRefObject<HTMLTableColElement | null>;\n    columns?: InternalColumn[];\n  }\n\n  // ===========================================================================\n  // Typescript definition for the internal representation of the cell\n  // ===========================================================================\n\n  export interface CellRendererProps {\n    row: InternalRow;\n    column: InternalColumn;\n    cell: Cell;\n    isRowSelected: boolean;\n    isDragOverlay: boolean;\n    shouldAddExpandCell: boolean;\n    // cellIsNextToExpander: boolean;\n    isDisabledRow?: boolean;\n    draggableProps?: DraggablePropsT;\n    domIdAffix?: string;\n  }\n\n  export interface Cell<T extends HTMLElement = HTMLElement> {\n    column: InternalColumn;\n    value: unknown;\n    render: React.ComponentType<CellRendererProps>;\n    row: InternalRow;\n    ref: React.MutableRefObject<T | null>;\n    id: string;\n  }\n\n  // ===========================================================================\n  // Typescript definition for all component props\n  // ===========================================================================\n\n  export interface HeaderProps {\n    column: InternalColumn;\n    draggableProps: DraggablePropsT;\n  }\n\n  export interface CellProps<T extends HTMLElement = HTMLElement> {\n    row: InternalRow;\n    column: InternalColumn;\n    cell: Cell<T>;\n    domIdAffix?: string;\n    isRowSelected: boolean;\n    isDragOverlay: boolean;\n    shouldAddExpandCell: boolean;\n    cellIsNextToExpander: boolean;\n    isDisabledRow?: boolean;\n    draggableProps?: DraggablePropsT;\n  }\n\n  export interface DetailsProps {\n    detailsIndent: number;\n    row: InternalRow;\n  }\n  export interface RowVariantProps {\n    row: DSDataTableT.InternalRow;\n    itemIndex: number;\n    isDragOverlay: boolean;\n    focusedRowId: string | null;\n    drilldownRowId: string | null;\n  }\n\n  // ===========================================================================\n  // Typescript definition for the React Context\n  // ===========================================================================\n\n  export interface Context {\n    tableProps: InternalProps;\n    columnHeaderRef: React.MutableRefObject<HTMLDivElement | null>;\n    virtualListRef: React.MutableRefObject<HTMLDivElement | null>;\n    flattenedData: InternalRow[];\n    allDataFlattened: InternalRow[];\n    isEmptyContent: boolean;\n    firstFocuseableColumnHeaderId: string | undefined;\n    visibleColumns: InternalColumn[];\n    virtualListHelpers: ReturnType<typeof useVirtual>;\n    layoutHelpers: {\n      totalColumnsWidth: number | string;\n      gridLayout: string[];\n    };\n    paginationHelpers: Pagination;\n    drilldownRowId: string | null;\n    setDrilldownRowId: React.Dispatch<React.SetStateAction<string | null>>;\n    focusedRowId: string | null;\n    setFocusedRowId: React.Dispatch<React.SetStateAction<string | null>>;\n    reduxHeaders: Record<string, ReduxHeader>;\n    patchHeader: (headerId: string, newHeader: ReduxHeader) => void;\n    patchHeaderFilterButtonAndMenu: (headerId: string, value: boolean) => void;\n    isShiftPressed: boolean;\n    setIsShiftPressed: React.Dispatch<React.SetStateAction<boolean>>;\n    lastSelected: React.MutableRefObject<number>;\n  }\n\n  export interface DefaultProps {\n    height: string;\n    width: string;\n    renderRowActions: false | RenderRowActionsConfig;\n    getRowVariant: (\n      row: InternalRow,\n      defaultCellRenderer: React.ComponentType<{\n        row: DSDataTableT.InternalRow;\n        isRowSelected: boolean;\n        isDragOverlay: boolean;\n      }>,\n    ) => RowVariant | React.ComponentType<RowVariantProps>;\n    withFilterBar: boolean;\n    isExpandable: boolean;\n    expandedRows: Record<string, boolean>;\n    disabledRows: Record<string, boolean>;\n    isResizeable: boolean;\n    isLoading: boolean;\n    pagination: false | Pagination;\n    filters: Filter[];\n    colsLayoutStyle: ColsLayoutStyleValues;\n    hiddenColumns: string[];\n    noResultsMessage: string;\n    dragAndDropRows: boolean;\n    maxDragAndDropLevel: number;\n    onRowsReorder: (\n      newData: Row[],\n      indexes: { targetIndex: number; fromIndex: number },\n      considerExpanding: string | null,\n      extraData: { flattenedData: InternalRow[]; allDataFlattened: InternalRow[] },\n    ) => void;\n    dragAndDropColumns: boolean;\n    onColumnsReorder: (newData: Column[], indexes: { targetIndex: number; fromIndex: number }) => void;\n    getIsDropValid: (\n      active: DnDKitTree.Item<Row>,\n      over: DnDKitTree.Item<Row>,\n      dropIndicatorPosition: DropIndicatorPositionValues,\n    ) => boolean;\n    onColumnResize: (headerId: string, width: number) => void;\n    onColumnSizeChange: (newColumns: Column[], headerId: string, width: number) => void;\n    onRowClick: TypescriptHelpersT.GenericFunc;\n    onRowFocus: TypescriptHelpersT.GenericFunc;\n    noSelectionColumn: boolean;\n    selectSingle: boolean;\n    onSelectionChange: (\n      newSelection: Selection,\n      selectedControl: string,\n      event: React.ChangeEvent | React.MouseEvent | React.KeyboardEvent,\n    ) => void;\n    textWrap: 'wrap' | 'wrap-all' | 'truncate';\n    onCellValueChange: (cellChange: { value: unknown; property: unknown; rowIndex: number }) => void;\n    onFiltersChange: TypescriptHelpersT.GenericFunc;\n    onPageChanged: TypescriptHelpersT.GenericFunc;\n    onRowExpand: (expandedRows: Record<string, boolean>, toggledRow: string) => void;\n    onColumnSortChange: (newSortRequest: { column: unknown; direction: unknown }) => void;\n    onColumnSort: (newColumns: Column[], headerId: string, direction: 'ASC' | 'DESC') => void;\n    isSkeleton: boolean;\n    domIdAffix?: string;\n  }\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSDataTableName, typeof DSDataTableSlots> {\n    uniqueRowAccessor?: UniqueRowAccessorType;\n    cellRendererProps?: Record<string, unknown>;\n    selection?: Selection;\n    groupedRowsRenderHeader?:\n      | ((dimsumHeaderValue: string | undefined, subRows: Row[] | undefined) => JSX.Element)\n      | string;\n    filterBarProps?: {\n      filterBarAddonRenderer?: React.ComponentType<{ innerRef: React.MutableRefObject<HTMLButtonElement | null> }>;\n      customPillRenderer?: React.ComponentType<FilterPillProps<unknown>>;\n      onClearAllFiltersClick?: () => void;\n      onDropdownMenuToggle?: (isOpen: boolean, eventType: string) => void;\n      onDropdownMenuClickOutside?: () => void;\n      onDropdownMenuTriggerClick?: () => void;\n      isDropdownMenuOpen?: boolean;\n      extraOptions?: { type: string; id: string; label: string; onClick?: TypescriptHelpersT.GenericFunc }[];\n    };\n    actionRef?: React.MutableRefObject<{\n      scrollToIndex: ReturnType<typeof useVirtual>['scrollToIndex'];\n      scrollToOffset: ReturnType<typeof useVirtual>['scrollToOffset'];\n    }>;\n    noResultsSecondaryMessage?: string;\n    noResultsButtonLabel?: string;\n    noResultsPlaceholder?: TypescriptHelpersT.GenericFunc;\n    onNoResultsButtonClick?: TypescriptHelpersT.GenericFunc;\n    onTableResize?: TypescriptHelpersT.GenericFunc;\n    Pagination?: React.ComponentType<Record<string, never>>;\n    getAriaLabelForRow?: (args: {\n      row: InternalRow;\n      selected: boolean;\n      disabled: boolean;\n      expandable: boolean;\n      expanded: boolean;\n    }) => string;\n    checkboxSelectAllProps?: DSControlledCheckboxT.Props;\n  }\n  export interface RequiredProps {\n    columns: Column[];\n    data: Row[];\n  }\n\n  export type Props = PropsT<DefaultProps, RequiredProps, OptionalProps>;\n\n  export type InternalProps = InternalPropsT<DefaultProps, RequiredProps, OptionalProps>;\n}\n\n// default props is a function to ensure that the uid is unique for each instance of the component\n// this is supported by the useMemoMergePropsWithDefault function.\nexport const defaultProps: () => DSDataTableT.DefaultProps = () => ({\n  height: '100%',\n  width: '100%',\n  renderRowActions: false,\n  getRowVariant: () => 'ds-primary-row',\n  isExpandable: false,\n  expandedRows: {},\n  disabledRows: {},\n  isResizeable: false,\n  isLoading: false,\n  pagination: false,\n  withFilterBar: false,\n  filters: [],\n  getIsDropValid: () => true,\n  onColumnResize: () => null,\n  onColumnSortChange: () => null,\n  colsLayoutStyle: ColsLayoutStyle.Fixed,\n  hiddenColumns: [],\n  noResultsMessage: 'No Results Found',\n  dragAndDropRows: false,\n  maxDragAndDropLevel: 1,\n  onRowsReorder: () => null,\n  dragAndDropColumns: false,\n  onColumnsReorder: () => null,\n  onColumnSizeChange: () => null,\n  onRowClick: () => null,\n  onRowFocus: () => null,\n  noSelectionColumn: false,\n  selectSingle: false,\n  onSelectionChange: () => null,\n  textWrap: 'wrap',\n  onCellValueChange: () => null,\n  onFiltersChange: () => null,\n  onPageChanged: () => null,\n  onRowExpand: () => null,\n  onColumnSort: () => null,\n  isSkeleton: false,\n  domIdAffix: uid(4),\n});\n\nexport const DSDataTablePropTypes = {\n  ...getPropsPerSlotPropTypes(DSDataTableName, DSDataTableSlots),\n  columns: PropTypes.arrayOf(\n    PropTypes.shape({\n      Header: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node]).description(\n        'Header name or component',\n      ).isRequired,\n      accessor: PropTypes.string.description('The entry of the data that this column will display'),\n      id: PropTypes.string.description('The id of the column, will default to the Header or accessor if not present'),\n      filter: PropTypes.oneOf(Object.values(FILTER_TYPES)).description('out-of-the-box filters'),\n      Filter: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).description(\n        'The custom component to render as a filter',\n      ),\n      Cell: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('The custom cell renderer component'),\n      editable: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node]).description(\n        'The editable out-of-the-box or component to render',\n      ),\n      disableDnD: PropTypes.bool.description('Whereas this column should be draggable'),\n      canResize: PropTypes.bool.description('Whereas this column should be resizable'),\n      width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Width of this column'),\n      minWidth: PropTypes.number.description('Minimum width of this column, useful when resizing'),\n      maxWidth: PropTypes.number.description('Maximum width of this column, useful when resizing'),\n      canSort: PropTypes.bool.description('Whereas this column is sortable'),\n      isSortedDesc: PropTypes.bool.description('Whereas this column is sorted descendingly'),\n      required: PropTypes.bool.description('Whereas this column is required'),\n      alwaysDisplayEditIcon: PropTypes.bool.description(\n        'Whereas to always show the edit icon on this column if it is editable',\n      ),\n      textWrap: PropTypes.oneOf(['wrap', 'wrap-all', 'truncate']).description('How to wrap the text in the column'),\n    }),\n  ).description('Array of columns').isRequired,\n  data: PropTypes.arrayOf(\n    PropTypes.shape({\n      tableRowDetails: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).description('Component for row details'),\n      dimsumHeaderValue: PropTypes.string.description('Header displayed on the header variant of the row'),\n    }),\n  ).description('Array of rows'),\n  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Height of the datatable component'),\n  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Width of the datatable component'),\n  renderRowActions: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]).description(\n    'The renderer to use for the action toolbar',\n  ),\n  isExpandable: PropTypes.bool.description('Whether the datatable is expandable').defaultValue(false),\n  uniqueRowAccessor: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.arrayOf(PropTypes.string),\n    PropTypes.func,\n  ]).description(\n    'Column / Combination of columns / Function to call to produce a unique identifier for each row.' +\n      ' This is necessary for the selectable and drag and drop features',\n  ),\n  disabledRows: PropTypes.object.description(\n    'Object with the identifiers of the rows as keys, and booleans as values. Specifies if a row is disabled or not',\n  ),\n  expandedRows: PropTypes.object.description(\n    'Object with the identifiers of the rows as keys, and booleans as values. Specifies if a row is expanded or not',\n  ),\n  onRowExpand: PropTypes.func.description('Function invoked when a row is (un)expanded'),\n  cellRendererProps: PropTypes.object.description(\n    'Object with all the props you want the cells to have available when rendering',\n  ),\n  selectSingle: PropTypes.bool.description('Whether the selectable feature is single').defaultValue(false),\n  selection: PropTypes.object.description(\n    'Object with the identifiers of the rows as keys, and booleans as values. Specifies if a row is selected or not',\n  ),\n  onSelectionChange: PropTypes.func.description('Function invoked when a row is selected'),\n  groupedRowsRenderHeader: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).description(\n    'String | Function to call which will display in the row headers',\n  ),\n  isResizeable: PropTypes.bool.description(\"Whether the datatable's columns are resizeable\"),\n  filters: PropTypes.arrayOf(\n    PropTypes.shape({\n      id: PropTypes.string,\n      type: PropTypes.string,\n      value: PropTypes.any,\n    }),\n  ).description('Array of filter keys and values'),\n  withFilterBar: PropTypes.bool.description('Whether to display the filter bar'),\n  filterBarProps: PropTypes.shape({\n    filterBarAddonRenderer: PropTypes.func.description('Render filterbar right addon component'),\n    customPillRenderer: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).description(\n      'If you specify custom filters, you will need to render their pills here',\n    ),\n    isDropdownMenuOpen: PropTypes.bool.description('Wether the DropdownMenu is Open or not.'),\n    onDropdownMenuToggle: PropTypes.func.description('Callback to toggle the DropdownMenu.'),\n    onClearAllFiltersClick: PropTypes.func.description('Callback for Clear Al Filters option.'),\n    onDropdownMenuClickOutside: PropTypes.func.description('Callback triggered when clicking outside DropdownMenu.'),\n    onDropdownMenuTriggerClick: PropTypes.func.description('Callback triggered when clicking DropdownMenu ellipsis.'),\n    extraOptions: PropTypes.arrayOf(\n      PropTypes.shape({\n        type: PropTypes.string,\n        id: PropTypes.string,\n        label: PropTypes.string,\n        onClick: PropTypes.func,\n      }),\n    ).description('Any extra option you want in the dropdownmenu of the filter bar'),\n  }).description('Props for the filter bar'),\n  onFiltersChange: PropTypes.func.description('Function invoked when filters change'),\n  pagination: PropTypes.oneOfType([\n    PropTypes.oneOf([false]),\n    PropTypes.shape({\n      pageCount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('How many pages are there'),\n      isLoadingPageCount: PropTypes.bool.description('Whether the page count is loading'),\n      pageIndex: PropTypes.number.description('Index of the current page, starting from 1').defaultValue(1),\n      canPreviousPage: PropTypes.bool.description('Whether the previous button is disabled or not').defaultValue(true),\n      canNextPage: PropTypes.bool.description('Whether the next button is disabled or not').defaultValue(true),\n      pageSize: PropTypes.number.description('The current page size').defaultValue(10),\n      showPerPageSelector: PropTypes.bool.description('Whether to show the page selector').defaultValue(true),\n      perPageOptions: PropTypes.arrayOf(\n        PropTypes.oneOfType([\n          PropTypes.number,\n          PropTypes.shape({\n            dsId: PropTypes.string,\n            value: PropTypes.number,\n            label: PropTypes.string,\n            type: PropTypes.oneOf(['single']),\n          }),\n        ]),\n      )\n        .description('The available options for page size')\n        .defaultValue([10]),\n      perPageStep: PropTypes.number.description('Step for the per page options').defaultValue(5),\n      minPerPage: PropTypes.number.description('Step for the per page options').defaultValue(0),\n      maxPerPage: PropTypes.number.description('Step for the per page options').defaultValue(100),\n      onPageSizeChange: PropTypes.func\n        .description('Function invoked when the page size changes')\n        .defaultValue(() => null),\n      onPreviousPage: PropTypes.func\n        .description('Function invoked when the previous button is pressed')\n        .defaultValue(() => null),\n      onPageChange: PropTypes.func.description('Function invoked when the page changes').defaultValue(() => null),\n      onNextPage: PropTypes.func.description('Function invoked when next button is pressed').defaultValue(() => null),\n      pageDetails: PropTypes.arrayOf(PropTypes.string).description('Details to provide for each page').defaultValue([]),\n      dataIsPage: PropTypes.bool.description('Whether to treat data as a page').defaultValue(false),\n      pageDetailsTitle: PropTypes.string\n        .description('The title of the details (usually a column of your dataset)')\n        .defaultValue(''),\n    }),\n  ]).description('Object containing the data for the pagination'),\n  Pagination: PropTypes.func.description('Custom component to show in place of the pagination'),\n  colsLayoutStyle: PropTypes.oneOf(['auto', 'fixed']).description('Whether the datatable fills its container or not'),\n  hiddenColumns: PropTypes.arrayOf(PropTypes.string).description('IDs of columns not to render'),\n  dragAndDropRows: PropTypes.bool.description('Whether to turn on the d&d feature for the rows').defaultValue(false),\n  onRowsReorder: PropTypes.func.description('Function invoked when a row is reordered'),\n  maxDragAndDropLevel: PropTypes.number.description('Which level is the maximum allowed to drop into'),\n  dragAndDropColumns: PropTypes.bool.description('Whether to turn on the d&d feature for the columns'),\n  onColumnsReorder: PropTypes.func.description('Function invoked when a column is reordered'),\n  getIsDropValid: PropTypes.func.description('Function to determine if a drop is valid'),\n  textWrap: PropTypes.oneOf(['wrap', 'wrap-all', 'truncate']).description('Global wrapping rule'),\n  noResultsMessage: PropTypes.string.description('Message to show when no more data is available'),\n  noResultsSecondaryMessage: PropTypes.string.description('Secondary message to show when no more data is available'),\n  noResultsButtonLabel: PropTypes.string.description('Label of the button when no more data is available'),\n  noResultsPlaceholder: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).description(\n    'Custom content to show when dataset is empty',\n  ),\n  isLoading: PropTypes.bool.description('Whether to show a global loader in the datatable'),\n  onColumnResize: PropTypes.func\n    .description('Function invoked when a column is resized')\n    .deprecated({ version: '4.x', message: 'Use onColumnSizeChange' }),\n  onColumnSizeChange: PropTypes.func.description('Function invoked when a column is resized'),\n  onRowClick: PropTypes.func.description('Function invoked when clicking a row'),\n  onRowFocus: PropTypes.func.description('Function invoked when focusing a row'),\n  onCellValueChange: PropTypes.func.description(\"Function invoked when an editable cell's content is changed\"),\n  onColumnSortChange: PropTypes.func\n    .description('Function invoked when a column is sorted')\n    .deprecated({ version: '4.x', message: 'Use onColumnSort' }),\n  onColumnSort: PropTypes.func.description('Function invoked when a column is sorted'),\n  onTableResize: PropTypes.func.description(\n    'Function invoked when the size of the internal table changes, e.g. when a the browser window is resized',\n  ),\n  actionRef: PropTypes.object.description('Reference where all the exposed action callbacks will be exposed'),\n  getRowVariant: PropTypes.func\n    .description(\"Function invoked to determine a row's variant\")\n    .defaultValue(`() => 'ds-primary-row'`),\n  noSelectionColumn: PropTypes.bool.description('Whether to show the selection column or not').defaultValue(false),\n  onPageChanged: PropTypes.func.description('Function invoked when the page changes').defaultValue(() => null),\n  onNoResultsButtonClick: PropTypes.func\n    .description('Function invoked when the no results button is clicked')\n    .defaultValue(() => null),\n  isSkeleton: PropTypes.bool.description('Whether to show a skeleton loader in the datatable'),\n  getAriaLabelForRow: PropTypes.func.description('Function invoked to determine a row aria-label'),\n  domIdAffix: PropTypes.string\n    .description('Affix to avoid duplicate ids')\n    .defaultValue('4 randomly generated characters'),\n  checkboxSelectAllProps: PropTypes.object.description('Props for the select all checkbox'),\n};\n\nexport const DSDataTablePropTypesSchema = DSDataTablePropTypes as unknown as WeakValidationMap<DSDataTableT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-empty-interface */\nimport { uid } from 'uid';\nimport type { WeakValidationMap } from 'react';\nimport type { Range, useVirtual } from 'react-virtual/types';\nimport type { ZustandT } from '@elliemae/ds-zustand-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DnDKitTree, useSortable } from '@elliemae/ds-drag-and-drop';\nimport type { DSControlledCheckboxT } from '@elliemae/ds-form-checkbox';\nimport type { DSComboboxT } from '@elliemae/ds-form-combobox';\nimport { PropTypes, getPropsPerSlotPropTypes } from '@elliemae/ds-props-helpers';\nimport { FILTER_TYPES } from './exported-related/index.js';\nimport { type DropIndicatorPosition, ColsLayoutStyle } from './configs/constants.js';\nimport { DSDataTableName, DSDataTableSlots } from './DSDataTableDefinitions.js';\n\nexport namespace DSDataTableT {\n  // ===========================================================================\n  // Typescript definition for auxiliary types\n  // ===========================================================================\n  type PropsT<D, R, O> = Partial<D> & R & O;\n\n  type InternalPropsT<D, R, O> = D & R & O;\n\n  // ===========================================================================\n  // Typescript definition for zustand store\n  // ===========================================================================\n\n  export type InternalAtoms = {\n    drilldownRowId: string | null;\n    focusedRowId: string | null;\n    isShiftPressed: boolean;\n    reduxHeaders: Record<string, ReduxHeader>;\n  };\n  export type UseAutoCalculatedT = {\n    /**\n     * visibleRangeRef: React.MutableRefObject<Range>\n     * We can use this ref to get the visible range of the virtual list\n     * taking in consideration the end-start and overscan.\n     */\n    visibleRangeRef: React.MutableRefObject<Range>;\n    columnHeaderRef: React.MutableRefObject<HTMLDivElement | null>;\n    virtualListRef: React.MutableRefObject<HTMLDivElement | null>;\n    flattenedData: InternalRow[];\n    allDataFlattened: InternalRow[];\n    isEmptyContent: boolean;\n    firstFocuseableColumnHeaderId: string | undefined;\n    visibleColumns: InternalColumn[];\n    virtualListHelpers: ReturnType<typeof useVirtual>;\n    layoutHelpers: {\n      totalColumnsWidth: number | string;\n      gridLayout: string[];\n    };\n    paginationHelpers: Pagination;\n    lastSelected: React.MutableRefObject<number>;\n  };\n  export type Selectors = Record<string, never>;\n  export type Reducers = {\n    patchHeader: (headerId: string, newHeader: Partial<ReduxHeader>) => void;\n    patchHeaderFilterButtonAndMenu: (headerId: string, value: boolean) => void;\n  };\n  export type ShuttleInternalStore = ZustandT.InternalStore<InternalAtoms, Selectors, Reducers>;\n\n  // ===========================================================================\n  // Typescript definition for data table related things\n  // ===========================================================================\n\n  export interface Filter {\n    id: string;\n    type: string;\n    value: unknown;\n  }\n\n  export type FilterFn<T> = (unfilteredData: Row[], filterKey: string, filterValue: T) => Row[];\n  export type FilterFnOutOfTheBoxCurrencyRange = DSDataTableT.FilterFn<{ from: string; to: string }>;\n  export type FilterFnOutOfTheBoxDateRange = DSDataTableT.FilterFn<{ startDate: string; endDate: string }>;\n  export type FilterFnOutOfTheBoxDateSwitcher = DSDataTableT.FilterFn<{\n    startDate: string;\n    endDate: string;\n    isDateRange: boolean;\n  }>;\n  export type FilterFnOutOfTheBoxMultiSelect = DSDataTableT.FilterFn<{ label: string; value: string }[]>;\n  export type FilterFnOutOfTheBoxNumberRange = DSDataTableT.FilterFn<{ from?: number; to?: number }>;\n  export type FilterFnOutOfTheBoxSingleDate = DSDataTableT.FilterFn<string>;\n  export type FilterFnOutOfTheBoxSingleSelect = DSDataTableT.FilterFn<{ label: string; value: string }>;\n\n  export interface FilterItemProps {\n    column: InternalColumn;\n    filters: Filter[];\n    onFiltersChange: (filters: Filter[]) => void;\n    reduxHeader: ReduxHeader;\n    innerRef: React.MutableRefObject<HTMLButtonElement | null>;\n  }\n\n  export interface FilterProps<T> {\n    column: InternalColumn;\n    onValueChange: (type: string, value: T | undefined) => void;\n    patchHeaderFilterButtonAndMenu: (headerId: string, newState: boolean) => void;\n    patchHeader: (headerId: string, newHeader: ReduxHeader) => void;\n    filterValue: T;\n    reduxHeader: ReduxHeader;\n    innerRef: React.MutableRefObject<HTMLButtonElement | null>;\n    domIdAffix?: string;\n  }\n\n  export interface FilterPillProps<T> {\n    columnHeader: string;\n    column: string;\n    value: T;\n    filters: Filter[];\n    onFiltersChange: (filters: Filter[]) => void;\n    prevRef: React.RefObject<HTMLElement>;\n    innerRef: React.RefObject<HTMLElement>;\n    nextRef: React.RefObject<HTMLElement>;\n  }\n\n  export interface ReduxHeader {\n    hideFilterMenu?: boolean;\n    hideFilterButton?: boolean;\n    showDnDHandle?: boolean;\n    withTabStops?: boolean;\n    showSortCaret?: boolean;\n  }\n\n  export type SelectionItem = boolean | 'mixed';\n\n  export type Selection = Record<string | number, SelectionItem>;\n\n  export type UniqueRowAccessorType = string | string[] | ((row: Row) => string) | undefined;\n\n  export interface SortBy {\n    id: string;\n    desc: boolean;\n  }\n\n  export interface Pagination {\n    hasPagination: boolean;\n    pageIndex?: number;\n    canPreviousPage?: boolean;\n    canNextPage?: boolean;\n    pageSize?: number;\n    dataIsPage?: boolean;\n    showPerPageSelector?: boolean;\n    perPageOptions?: number[];\n    perPageStep?: number;\n    minPerPage?: number;\n    maxPerPage?: number;\n    onPageSizeChange?: (pageSize: number) => void;\n    onPreviousPage?: () => void;\n    onNextPage?: () => void;\n    onPageChange?: (page: number) => void;\n    pageCount?: number | string;\n    isLoadingPageCount?: boolean;\n    pageDetails?: string[];\n    pageDetailsTitle?: string;\n  }\n\n  export type RowVariant = 'ds-header-group-row' | 'ds-primary-row' | 'ds-secondary-row';\n\n  export interface RenderRowActionsConfig {\n    columnWidth: number;\n    renderer: React.ComponentType<CellProps>;\n  }\n\n  export type RenderRowActions = false | RenderRowActionsConfig;\n\n  export type DropIndicatorPositionValues = TypescriptHelpersT.ObjectValues<typeof DropIndicatorPosition>;\n\n  export type ColsLayoutStyleValues = TypescriptHelpersT.ObjectValues<typeof ColsLayoutStyle>;\n\n  export type DraggablePropsT =\n    | false\n    | (ReturnType<typeof useSortable> & {\n        dropIndicatorPosition: DropIndicatorPositionValues;\n        shouldShowDropIndicatorPosition: boolean;\n        isDropValid: boolean;\n      });\n\n  export type FilterOptionT = DSComboboxT.Props['allOptions'][number];\n  export type EditOptionT = DSComboboxT.Props['allOptions'][number];\n\n  // ===========================================================================\n  // Typescript definition for the row and columns\n  // ===========================================================================\n\n  export interface Row {\n    [key: string]: unknown;\n    subRows?: Row[];\n    tableRowDetails?: React.ComponentType<DetailsProps>;\n    dimsumHeaderValue?: string;\n  }\n  export interface EditableCellProps<T extends HTMLElement = HTMLElement> extends CellProps<T> {\n    DefaultCellRender: JSX.Element;\n  }\n\n  export interface Column {\n    id?: string;\n    Header: string | React.ComponentType<HeaderProps>;\n    accessor?: string;\n    filter?: string;\n    filterOptions?: FilterOptionT[] | (() => FilterOptionT[]);\n    editOptions?: EditOptionT[] | (() => EditOptionT[]);\n    filterMinWidth?: number | string;\n    Filter?: React.ComponentType<FilterProps<unknown>>;\n    Cell?: React.ComponentType<CellRendererProps>;\n    editable?: string | React.ComponentType<EditableCellProps>;\n    disableDnD?: boolean;\n    width?: number;\n    minWidth?: number;\n    maxWidth?: number;\n    padding?: number;\n    columns?: Column[];\n    canSort?: boolean;\n    isSortedDesc?: boolean;\n    canResize?: boolean;\n    isFocuseable?: boolean;\n    textWrap?: 'wrap' | 'wrap-all' | 'truncate';\n    ref?: React.MutableRefObject<HTMLTableColElement | null>;\n    required?: boolean;\n    cellStyle?: React.CSSProperties;\n    alwaysDisplayEditIcon?: boolean;\n  }\n\n  // ===========================================================================\n  // Typescript definition for the internal representation of the row and columns\n  // ===========================================================================\n\n  export interface InternalRow {\n    id: string;\n    uid: string;\n    index: number;\n    realIndex: number;\n    parent: InternalRow | null;\n    parentId: string | null;\n    parentIndex: number | null;\n    depth: number;\n    isExpanded: boolean;\n    subRows: Row[];\n    childrenCount: number;\n    original: Row;\n    cells: Cell[];\n  }\n\n  export interface InternalColumn extends Column {\n    id: string;\n    parentId: string | null;\n    depth: number;\n    ref: React.MutableRefObject<HTMLTableColElement | null>;\n    columns?: InternalColumn[];\n  }\n\n  // ===========================================================================\n  // Typescript definition for the internal representation of the cell\n  // ===========================================================================\n\n  export interface CellRendererProps {\n    row: InternalRow;\n    column: InternalColumn;\n    cell: Cell;\n    isRowSelected: boolean;\n    isDragOverlay: boolean;\n    shouldAddExpandCell: boolean;\n    // cellIsNextToExpander: boolean;\n    isDisabledRow?: boolean;\n    draggableProps?: DraggablePropsT;\n    domIdAffix?: string;\n  }\n\n  export interface Cell<T extends HTMLElement = HTMLElement> {\n    column: InternalColumn;\n    value: unknown;\n    render: React.ComponentType<CellRendererProps>;\n    row: InternalRow;\n    ref: React.MutableRefObject<T | null>;\n    id: string;\n  }\n\n  // ===========================================================================\n  // Typescript definition for all component props\n  // ===========================================================================\n\n  export interface HeaderProps {\n    column: InternalColumn;\n    draggableProps: DraggablePropsT;\n  }\n\n  export interface CellProps<T extends HTMLElement = HTMLElement> {\n    row: InternalRow;\n    column: InternalColumn;\n    cell: Cell<T>;\n    domIdAffix?: string;\n    isRowSelected: boolean;\n    isDragOverlay: boolean;\n    shouldAddExpandCell: boolean;\n    cellIsNextToExpander: boolean;\n    isDisabledRow?: boolean;\n    draggableProps?: DraggablePropsT;\n  }\n\n  export interface DetailsProps {\n    detailsIndent: number;\n    row: InternalRow;\n  }\n  export interface RowVariantProps {\n    row: DSDataTableT.InternalRow;\n    itemIndex: number;\n    isDragOverlay: boolean;\n    focusedRowId: string | null;\n    drilldownRowId: string | null;\n  }\n\n  // ===========================================================================\n  // Typescript definition for the React Context\n  // ===========================================================================\n\n  export interface Context {\n    tableProps: InternalProps;\n    columnHeaderRef: React.MutableRefObject<HTMLDivElement | null>;\n    virtualListRef: React.MutableRefObject<HTMLDivElement | null>;\n    flattenedData: InternalRow[];\n    allDataFlattened: InternalRow[];\n    isEmptyContent: boolean;\n    firstFocuseableColumnHeaderId: string | undefined;\n    visibleColumns: InternalColumn[];\n    virtualListHelpers: ReturnType<typeof useVirtual>;\n    layoutHelpers: {\n      totalColumnsWidth: number | string;\n      gridLayout: string[];\n    };\n    paginationHelpers: Pagination;\n    drilldownRowId: string | null;\n    setDrilldownRowId: React.Dispatch<React.SetStateAction<string | null>>;\n    focusedRowId: string | null;\n    setFocusedRowId: React.Dispatch<React.SetStateAction<string | null>>;\n    reduxHeaders: Record<string, ReduxHeader>;\n    patchHeader: (headerId: string, newHeader: ReduxHeader) => void;\n    patchHeaderFilterButtonAndMenu: (headerId: string, value: boolean) => void;\n    isShiftPressed: boolean;\n    setIsShiftPressed: React.Dispatch<React.SetStateAction<boolean>>;\n    lastSelected: React.MutableRefObject<number>;\n  }\n\n  export interface DefaultProps {\n    height: string;\n    width: string;\n    renderRowActions: false | RenderRowActionsConfig;\n    getRowVariant: (\n      row: InternalRow,\n      defaultCellRenderer: React.ComponentType<{\n        row: DSDataTableT.InternalRow;\n        isRowSelected: boolean;\n        isDragOverlay: boolean;\n      }>,\n    ) => RowVariant | React.ComponentType<RowVariantProps>;\n    withFilterBar: boolean;\n    isExpandable: boolean;\n    expandedRows: Record<string, boolean>;\n    disabledRows: Record<string, boolean>;\n    isResizeable: boolean;\n    isLoading: boolean;\n    pagination: false | Pagination;\n    filters: Filter[];\n    colsLayoutStyle: ColsLayoutStyleValues;\n    hiddenColumns: string[];\n    noResultsMessage: string;\n    dragAndDropRows: boolean;\n    maxDragAndDropLevel: number;\n    onRowsReorder: (\n      newData: Row[],\n      indexes: { targetIndex: number; fromIndex: number },\n      considerExpanding: string | null,\n      extraData: { flattenedData: InternalRow[]; allDataFlattened: InternalRow[] },\n    ) => void;\n    dragAndDropColumns: boolean;\n    onColumnsReorder: (newData: Column[], indexes: { targetIndex: number; fromIndex: number }) => void;\n    getIsDropValid: (\n      active: DnDKitTree.Item<Row>,\n      over: DnDKitTree.Item<Row>,\n      dropIndicatorPosition: DropIndicatorPositionValues,\n    ) => boolean;\n    onColumnResize: (headerId: string, width: number) => void;\n    onColumnSizeChange: (newColumns: Column[], headerId: string, width: number) => void;\n    onRowClick: TypescriptHelpersT.GenericFunc;\n    onRowFocus: TypescriptHelpersT.GenericFunc;\n    noSelectionColumn: boolean;\n    selectSingle: boolean;\n    onSelectionChange: (\n      newSelection: Selection,\n      selectedControl: string,\n      event: React.ChangeEvent | React.MouseEvent | React.KeyboardEvent,\n    ) => void;\n    textWrap: 'wrap' | 'wrap-all' | 'truncate';\n    onCellValueChange: (cellChange: { value: unknown; property: unknown; rowIndex: number }) => void;\n    onFiltersChange: TypescriptHelpersT.GenericFunc;\n    onPageChanged: TypescriptHelpersT.GenericFunc;\n    onRowExpand: (expandedRows: Record<string, boolean>, toggledRow: string) => void;\n    onColumnSortChange: (newSortRequest: { column: unknown; direction: unknown }) => void;\n    onColumnSort: (newColumns: Column[], headerId: string, direction: 'ASC' | 'DESC') => void;\n    isSkeleton: boolean;\n    domIdAffix?: string;\n  }\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSDataTableName, typeof DSDataTableSlots> {\n    uniqueRowAccessor?: UniqueRowAccessorType;\n    cellRendererProps?: Record<string, unknown>;\n    selection?: Selection;\n    groupedRowsRenderHeader?:\n      | ((dimsumHeaderValue: string | undefined, subRows: Row[] | undefined) => JSX.Element)\n      | string;\n    filterBarProps?: {\n      filterBarAddonRenderer?: React.ComponentType<{ innerRef: React.MutableRefObject<HTMLButtonElement | null> }>;\n      customPillRenderer?: React.ComponentType<FilterPillProps<unknown>>;\n      onClearAllFiltersClick?: () => void;\n      onDropdownMenuToggle?: (isOpen: boolean, eventType: string) => void;\n      onDropdownMenuClickOutside?: () => void;\n      onDropdownMenuTriggerClick?: () => void;\n      isDropdownMenuOpen?: boolean;\n      extraOptions?: { type: string; id: string; label: string; onClick?: TypescriptHelpersT.GenericFunc }[];\n    };\n    actionRef?: React.MutableRefObject<{\n      scrollToIndex: ReturnType<typeof useVirtual>['scrollToIndex'];\n      scrollToOffset: ReturnType<typeof useVirtual>['scrollToOffset'];\n    }>;\n    noResultsSecondaryMessage?: string;\n    noResultsButtonLabel?: string;\n    noResultsPlaceholder?: TypescriptHelpersT.GenericFunc;\n    onNoResultsButtonClick?: TypescriptHelpersT.GenericFunc;\n    onTableResize?: TypescriptHelpersT.GenericFunc;\n    Pagination?: React.ComponentType<Record<string, never>>;\n    getAriaLabelForRow?: (args: {\n      row: InternalRow;\n      selected: boolean;\n      disabled: boolean;\n      expandable: boolean;\n      expanded: boolean;\n    }) => string;\n    checkboxSelectAllProps?: DSControlledCheckboxT.Props;\n  }\n  export interface RequiredProps {\n    columns: Column[];\n    data: Row[];\n  }\n\n  export type Props = PropsT<DefaultProps, RequiredProps, OptionalProps>;\n\n  export type InternalProps = InternalPropsT<DefaultProps, RequiredProps, OptionalProps>;\n}\n\n// default props is a function to ensure that the uid is unique for each instance of the component\n// this is supported by the useMemoMergePropsWithDefault function.\nexport const defaultProps: () => DSDataTableT.DefaultProps = () => ({\n  height: '100%',\n  width: '100%',\n  renderRowActions: false,\n  getRowVariant: () => 'ds-primary-row',\n  isExpandable: false,\n  expandedRows: {},\n  disabledRows: {},\n  isResizeable: false,\n  isLoading: false,\n  pagination: false,\n  withFilterBar: false,\n  filters: [],\n  getIsDropValid: () => true,\n  onColumnResize: () => null,\n  onColumnSortChange: () => null,\n  colsLayoutStyle: ColsLayoutStyle.Fixed,\n  hiddenColumns: [],\n  noResultsMessage: 'No Results Found',\n  dragAndDropRows: false,\n  maxDragAndDropLevel: 1,\n  onRowsReorder: () => null,\n  dragAndDropColumns: false,\n  onColumnsReorder: () => null,\n  onColumnSizeChange: () => null,\n  onRowClick: () => null,\n  onRowFocus: () => null,\n  noSelectionColumn: false,\n  selectSingle: false,\n  onSelectionChange: () => null,\n  textWrap: 'wrap',\n  onCellValueChange: () => null,\n  onFiltersChange: () => null,\n  onPageChanged: () => null,\n  onRowExpand: () => null,\n  onColumnSort: () => null,\n  isSkeleton: false,\n  domIdAffix: uid(4),\n});\n\nexport const DSDataTablePropTypes = {\n  ...getPropsPerSlotPropTypes(DSDataTableName, DSDataTableSlots),\n  columns: PropTypes.arrayOf(\n    PropTypes.shape({\n      Header: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node]).description(\n        'Header name or component',\n      ).isRequired,\n      accessor: PropTypes.string.description('The entry of the data that this column will display'),\n      id: PropTypes.string.description('The id of the column, will default to the Header or accessor if not present'),\n      filter: PropTypes.oneOf(Object.values(FILTER_TYPES)).description('out-of-the-box filters'),\n      Filter: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).description(\n        'The custom component to render as a filter',\n      ),\n      Cell: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('The custom cell renderer component'),\n      editable: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node]).description(\n        'The editable out-of-the-box or component to render',\n      ),\n      disableDnD: PropTypes.bool.description('Whereas this column should be draggable'),\n      canResize: PropTypes.bool.description('Whereas this column should be resizable'),\n      width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Width of this column'),\n      minWidth: PropTypes.number.description('Minimum width of this column, useful when resizing'),\n      maxWidth: PropTypes.number.description('Maximum width of this column, useful when resizing'),\n      canSort: PropTypes.bool.description('Whereas this column is sortable'),\n      isSortedDesc: PropTypes.bool.description('Whereas this column is sorted descendingly'),\n      required: PropTypes.bool.description('Whereas this column is required'),\n      alwaysDisplayEditIcon: PropTypes.bool.description(\n        'Whereas to always show the edit icon on this column if it is editable',\n      ),\n      textWrap: PropTypes.oneOf(['wrap', 'wrap-all', 'truncate']).description('How to wrap the text in the column'),\n    }),\n  ).description('Array of columns').isRequired,\n  data: PropTypes.arrayOf(\n    PropTypes.shape({\n      tableRowDetails: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).description('Component for row details'),\n      dimsumHeaderValue: PropTypes.string.description('Header displayed on the header variant of the row'),\n    }),\n  ).description('Array of rows'),\n  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Height of the datatable component'),\n  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Width of the datatable component'),\n  renderRowActions: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]).description(\n    'The renderer to use for the action toolbar',\n  ),\n  isExpandable: PropTypes.bool.description('Whether the datatable is expandable').defaultValue(false),\n  uniqueRowAccessor: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.arrayOf(PropTypes.string),\n    PropTypes.func,\n  ]).description(\n    'Column / Combination of columns / Function to call to produce a unique identifier for each row.' +\n      ' This is necessary for the selectable and drag and drop features',\n  ),\n  disabledRows: PropTypes.object.description(\n    'Object with the identifiers of the rows as keys, and booleans as values. Specifies if a row is disabled or not',\n  ),\n  expandedRows: PropTypes.object.description(\n    'Object with the identifiers of the rows as keys, and booleans as values. Specifies if a row is expanded or not',\n  ),\n  onRowExpand: PropTypes.func.description('Function invoked when a row is (un)expanded'),\n  cellRendererProps: PropTypes.object.description(\n    'Object with all the props you want the cells to have available when rendering',\n  ),\n  selectSingle: PropTypes.bool.description('Whether the selectable feature is single').defaultValue(false),\n  selection: PropTypes.object.description(\n    'Object with the identifiers of the rows as keys, and booleans as values. Specifies if a row is selected or not',\n  ),\n  onSelectionChange: PropTypes.func.description('Function invoked when a row is selected'),\n  groupedRowsRenderHeader: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).description(\n    'String | Function to call which will display in the row headers',\n  ),\n  isResizeable: PropTypes.bool.description(\"Whether the datatable's columns are resizeable\"),\n  filters: PropTypes.arrayOf(\n    PropTypes.shape({\n      id: PropTypes.string,\n      type: PropTypes.string,\n      value: PropTypes.any,\n    }),\n  ).description('Array of filter keys and values'),\n  withFilterBar: PropTypes.bool.description('Whether to display the filter bar'),\n  filterBarProps: PropTypes.shape({\n    filterBarAddonRenderer: PropTypes.func.description('Render filterbar right addon component'),\n    customPillRenderer: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).description(\n      'If you specify custom filters, you will need to render their pills here',\n    ),\n    isDropdownMenuOpen: PropTypes.bool.description('Wether the DropdownMenu is Open or not.'),\n    onDropdownMenuToggle: PropTypes.func.description('Callback to toggle the DropdownMenu.'),\n    onClearAllFiltersClick: PropTypes.func.description('Callback for Clear Al Filters option.'),\n    onDropdownMenuClickOutside: PropTypes.func.description('Callback triggered when clicking outside DropdownMenu.'),\n    onDropdownMenuTriggerClick: PropTypes.func.description('Callback triggered when clicking DropdownMenu ellipsis.'),\n    extraOptions: PropTypes.arrayOf(\n      PropTypes.shape({\n        type: PropTypes.string,\n        id: PropTypes.string,\n        label: PropTypes.string,\n        onClick: PropTypes.func,\n      }),\n    ).description('Any extra option you want in the dropdownmenu of the filter bar'),\n  }).description('Props for the filter bar'),\n  onFiltersChange: PropTypes.func.description('Function invoked when filters change'),\n  pagination: PropTypes.oneOfType([\n    PropTypes.oneOf([false]),\n    PropTypes.shape({\n      pageCount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('How many pages are there'),\n      isLoadingPageCount: PropTypes.bool.description('Whether the page count is loading'),\n      pageIndex: PropTypes.number.description('Index of the current page, starting from 1').defaultValue(1),\n      canPreviousPage: PropTypes.bool.description('Whether the previous button is disabled or not').defaultValue(true),\n      canNextPage: PropTypes.bool.description('Whether the next button is disabled or not').defaultValue(true),\n      pageSize: PropTypes.number.description('The current page size').defaultValue(10),\n      showPerPageSelector: PropTypes.bool.description('Whether to show the page selector').defaultValue(true),\n      perPageOptions: PropTypes.arrayOf(\n        PropTypes.oneOfType([\n          PropTypes.number,\n          PropTypes.shape({\n            dsId: PropTypes.string,\n            value: PropTypes.number,\n            label: PropTypes.string,\n            type: PropTypes.oneOf(['single']),\n          }),\n        ]),\n      )\n        .description('The available options for page size')\n        .defaultValue([10]),\n      perPageStep: PropTypes.number.description('Step for the per page options').defaultValue(5),\n      minPerPage: PropTypes.number.description('Step for the per page options').defaultValue(0),\n      maxPerPage: PropTypes.number.description('Step for the per page options').defaultValue(100),\n      onPageSizeChange: PropTypes.func\n        .description('Function invoked when the page size changes')\n        .defaultValue(() => null),\n      onPreviousPage: PropTypes.func\n        .description('Function invoked when the previous button is pressed')\n        .defaultValue(() => null),\n      onPageChange: PropTypes.func.description('Function invoked when the page changes').defaultValue(() => null),\n      onNextPage: PropTypes.func.description('Function invoked when next button is pressed').defaultValue(() => null),\n      pageDetails: PropTypes.arrayOf(PropTypes.string).description('Details to provide for each page').defaultValue([]),\n      dataIsPage: PropTypes.bool.description('Whether to treat data as a page').defaultValue(false),\n      pageDetailsTitle: PropTypes.string\n        .description('The title of the details (usually a column of your dataset)')\n        .defaultValue(''),\n    }),\n  ]).description('Object containing the data for the pagination'),\n  Pagination: PropTypes.func.description('Custom component to show in place of the pagination'),\n  colsLayoutStyle: PropTypes.oneOf(['auto', 'fixed']).description('Whether the datatable fills its container or not'),\n  hiddenColumns: PropTypes.arrayOf(PropTypes.string).description('IDs of columns not to render'),\n  dragAndDropRows: PropTypes.bool.description('Whether to turn on the d&d feature for the rows').defaultValue(false),\n  onRowsReorder: PropTypes.func.description('Function invoked when a row is reordered'),\n  maxDragAndDropLevel: PropTypes.number.description('Which level is the maximum allowed to drop into'),\n  dragAndDropColumns: PropTypes.bool.description('Whether to turn on the d&d feature for the columns'),\n  onColumnsReorder: PropTypes.func.description('Function invoked when a column is reordered'),\n  getIsDropValid: PropTypes.func.description('Function to determine if a drop is valid'),\n  textWrap: PropTypes.oneOf(['wrap', 'wrap-all', 'truncate']).description('Global wrapping rule'),\n  noResultsMessage: PropTypes.string.description('Message to show when no more data is available'),\n  noResultsSecondaryMessage: PropTypes.string.description('Secondary message to show when no more data is available'),\n  noResultsButtonLabel: PropTypes.string.description('Label of the button when no more data is available'),\n  noResultsPlaceholder: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).description(\n    'Custom content to show when dataset is empty',\n  ),\n  isLoading: PropTypes.bool.description('Whether to show a global loader in the datatable'),\n  onColumnResize: PropTypes.func\n    .description('Function invoked when a column is resized')\n    .deprecated({ version: '4.x', message: 'Use onColumnSizeChange' }),\n  onColumnSizeChange: PropTypes.func.description('Function invoked when a column is resized'),\n  onRowClick: PropTypes.func.description('Function invoked when clicking a row'),\n  onRowFocus: PropTypes.func.description('Function invoked when focusing a row'),\n  onCellValueChange: PropTypes.func.description(\"Function invoked when an editable cell's content is changed\"),\n  onColumnSortChange: PropTypes.func\n    .description('Function invoked when a column is sorted')\n    .deprecated({ version: '4.x', message: 'Use onColumnSort' }),\n  onColumnSort: PropTypes.func.description('Function invoked when a column is sorted'),\n  onTableResize: PropTypes.func.description(\n    'Function invoked when the size of the internal table changes, e.g. when a the browser window is resized',\n  ),\n  actionRef: PropTypes.object.description('Reference where all the exposed action callbacks will be exposed'),\n  getRowVariant: PropTypes.func\n    .description(\"Function invoked to determine a row's variant\")\n    .defaultValue(`() => 'ds-primary-row'`),\n  noSelectionColumn: PropTypes.bool.description('Whether to show the selection column or not').defaultValue(false),\n  onPageChanged: PropTypes.func.description('Function invoked when the page changes').defaultValue(() => null),\n  onNoResultsButtonClick: PropTypes.func\n    .description('Function invoked when the no results button is clicked')\n    .defaultValue(() => null),\n  isSkeleton: PropTypes.bool.description('Whether to show a skeleton loader in the datatable'),\n  getAriaLabelForRow: PropTypes.func.description('Function invoked to determine a row aria-label'),\n  domIdAffix: PropTypes.string\n    .description('Affix to avoid duplicate ids')\n    .defaultValue('4 randomly generated characters'),\n  checkboxSelectAllProps: PropTypes.object.description('Props for the select all checkbox'),\n};\n\nexport const DSDataTablePropTypesSchema = DSDataTablePropTypes as unknown as WeakValidationMap<DSDataTableT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/addons/Filters/Components/CurrencyRangeFilter/index.js

@@ -27,6 +27,10 @@ const CurrencyRangeFilter = (props) => {
   } = props;
   const [from, setFrom] = useState(getNumberMaskedValue(filterValue.from ?? "", opts));
   const [to, setTo] = useState(getNumberMaskedValue(filterValue.to ?? "", opts));
+  useEffect(() => {
+    setFrom(getNumberMaskedValue(filterValue.from ?? "", opts));
+    setTo(getNumberMaskedValue(filterValue.to ?? "", opts));
+  }, [filterValue.from, filterValue.to]);
   const ref = useRef(null);
   const shouldFocus = useRef(true);
   const handleApplyChange = useCallback(

package/dist/esm/addons/Filters/Components/CurrencyRangeFilter/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/addons/Filters/Components/CurrencyRangeFilter/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef, useEffect, useCallback, useState } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { getNumberMaskedValue, useNumberMask } from '@elliemae/ds-form-helpers-mask-hooks';\nimport { DSFormLayoutBlockItem } from '@elliemae/ds-form-layout-blocks';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { uid } from 'uid';\nimport { FilterPopover, FILTER_TYPES } from '../../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\n\nconst opts = {\n  includeThousandsSeparator: false,\n  decimalPlaces: 2,\n  decimalRequired: true,\n};\n\nconst idPreffix = 'datatable-currency-range';\n\ninterface CurrentRangeFilterValue {\n  from: string | null;\n  to: string | null;\n}\n\nexport const CurrencyRangeFilter: React.ComponentType<DSDataTableT.FilterProps<CurrentRangeFilterValue>> = (props) => {\n  const {\n    column,\n    filterValue = { from: null, to: null },\n    reduxHeader,\n    patchHeader,\n    onValueChange,\n    innerRef,\n    domIdAffix = uid(4),\n  } = props;\n\n  const [from, setFrom] = useState(getNumberMaskedValue(filterValue.from ?? '', opts));\n  const [to, setTo] = useState(getNumberMaskedValue(filterValue.to ?? '', opts));\n\n  const ref = useRef<HTMLInputElement | null>(null);\n  const shouldFocus = useRef(true);\n\n  const handleApplyChange = useCallback(\n    ({ newFrom, newTo }: { newFrom?: string; newTo?: string }) => {\n      onValueChange(FILTER_TYPES.CURRENCY_RANGE, { from: newFrom ?? '', to: newTo ?? '' });\n    },\n    [onValueChange],\n  );\n\n  const handleFromChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>, newFrom?: string) => {\n      handleApplyChange({ newFrom, newTo: to });\n    },\n    [handleApplyChange, to],\n  );\n  const handleToChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>, newTo?: string) => {\n      handleApplyChange({ newFrom: from, newTo });\n    },\n    [from, handleApplyChange],\n  );\n\n  const fromInputProps = useNumberMask({\n    valueSetter: setFrom,\n    onChange: handleFromChange,\n    ...opts,\n  });\n\n  const toInputProps = useNumberMask({\n    valueSetter: setTo,\n    onChange: handleToChange,\n    ...opts,\n  });\n\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.code === 'Escape') {\n        patchHeader(column.id, { hideFilterMenu: true, hideFilterButton: false });\n        innerRef.current?.focus();\n      }\n    },\n    [column.id, innerRef, patchHeader],\n  );\n\n  const handleRef = useCallback(\n    (newRef: HTMLInputElement | null) => {\n      if (ref.current) ref.current = newRef;\n      if (shouldFocus.current) {\n        setTimeout(() => {\n          newRef?.focus();\n          shouldFocus.current = false;\n        });\n      }\n    },\n    [shouldFocus],\n  );\n\n  useEffect(() => {\n    if (reduxHeader?.hideFilterMenu) {\n      shouldFocus.current = true;\n    }\n  }, [reduxHeader?.hideFilterMenu]);\n\n  return (\n    <FilterPopover\n      reduxHeader={reduxHeader}\n      column={column}\n      columnId={column.id}\n      menuContent={\n        <Grid\n          data-testid={DATA_TESTID.DATA_TABLE_CURRENCY_RANGE_CONTROLLER}\n          gutter=\"xxxs\"\n          padding=\"xxs\"\n          cols={['auto', 'auto']}\n          style={{ background: 'white' }}\n          onKeyDown={handleOnKeyDown}\n        >\n          <DSFormLayoutBlockItem label=\"Min\" inputID={`${idPreffix}-min-${column.id}-${domIdAffix}`}>\n            <DSInputText\n              value={from}\n              {...fromInputProps}\n              id={`${idPreffix}-min-${column.id}-${domIdAffix}`}\n              style={{ textAlign: 'right' }}\n              placeholder=\"0.00\"\n              innerRef={handleRef}\n            />\n          </DSFormLayoutBlockItem>\n          <DSFormLayoutBlockItem label=\"Max\" inputID={`${idPreffix}-max-${column.id}-${domIdAffix}`}>\n            <DSInputText\n              value={to}\n              {...toInputProps}\n              id={`${idPreffix}-max-${column.id}s-${domIdAffix}`}\n              style={{ textAlign: 'right' }}\n              placeholder=\"0.00\"\n            />\n          </DSFormLayoutBlockItem>\n        </Grid>\n      }\n      triggerIcon={<SearchXsmall />}\n      customStyles={{ width: column.ref?.current?.offsetWidth ?? '0px' }}\n      innerRef={innerRef}\n      ariaLabel=\"Open Currency Range Filter\"\n    />\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef, useEffect, useCallback, useState } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { getNumberMaskedValue, useNumberMask } from '@elliemae/ds-form-helpers-mask-hooks';\nimport { DSFormLayoutBlockItem } from '@elliemae/ds-form-layout-blocks';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { uid } from 'uid';\nimport { FilterPopover, FILTER_TYPES } from '../../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\n\nconst opts = {\n  includeThousandsSeparator: false,\n  decimalPlaces: 2,\n  decimalRequired: true,\n};\n\nconst idPreffix = 'datatable-currency-range';\n\ninterface CurrentRangeFilterValue {\n  from: string | null;\n  to: string | null;\n}\n\nexport const CurrencyRangeFilter: React.ComponentType<DSDataTableT.FilterProps<CurrentRangeFilterValue>> = (props) => {\n  const {\n    column,\n    filterValue = { from: null, to: null },\n    reduxHeader,\n    patchHeader,\n    onValueChange,\n    innerRef,\n    domIdAffix = uid(4),\n  } = props;\n\n  const [from, setFrom] = useState(getNumberMaskedValue(filterValue.from ?? '', opts));\n  const [to, setTo] = useState(getNumberMaskedValue(filterValue.to ?? '', opts));\n\n  useEffect(() => {\n    // in order to update the input values when the user clear the filters\n    // we need to update the state when the filterValue changes\n    setFrom(getNumberMaskedValue(filterValue.from ?? '', opts));\n    setTo(getNumberMaskedValue(filterValue.to ?? '', opts));\n  }, [filterValue.from, filterValue.to]);\n\n  const ref = useRef<HTMLInputElement | null>(null);\n  const shouldFocus = useRef(true);\n\n  const handleApplyChange = useCallback(\n    ({ newFrom, newTo }: { newFrom?: string; newTo?: string }) => {\n      onValueChange(FILTER_TYPES.CURRENCY_RANGE, { from: newFrom ?? '', to: newTo ?? '' });\n    },\n    [onValueChange],\n  );\n\n  const handleFromChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>, newFrom?: string) => {\n      handleApplyChange({ newFrom, newTo: to });\n    },\n    [handleApplyChange, to],\n  );\n  const handleToChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>, newTo?: string) => {\n      handleApplyChange({ newFrom: from, newTo });\n    },\n    [from, handleApplyChange],\n  );\n\n  const fromInputProps = useNumberMask({\n    valueSetter: setFrom,\n    onChange: handleFromChange,\n    ...opts,\n  });\n\n  const toInputProps = useNumberMask({\n    valueSetter: setTo,\n    onChange: handleToChange,\n    ...opts,\n  });\n\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.code === 'Escape') {\n        patchHeader(column.id, { hideFilterMenu: true, hideFilterButton: false });\n        innerRef.current?.focus();\n      }\n    },\n    [column.id, innerRef, patchHeader],\n  );\n\n  const handleRef = useCallback(\n    (newRef: HTMLInputElement | null) => {\n      if (ref.current) ref.current = newRef;\n      if (shouldFocus.current) {\n        setTimeout(() => {\n          newRef?.focus();\n          shouldFocus.current = false;\n        });\n      }\n    },\n    [shouldFocus],\n  );\n\n  useEffect(() => {\n    if (reduxHeader?.hideFilterMenu) {\n      shouldFocus.current = true;\n    }\n  }, [reduxHeader?.hideFilterMenu]);\n\n  return (\n    <FilterPopover\n      reduxHeader={reduxHeader}\n      column={column}\n      columnId={column.id}\n      menuContent={\n        <Grid\n          data-testid={DATA_TESTID.DATA_TABLE_CURRENCY_RANGE_CONTROLLER}\n          gutter=\"xxxs\"\n          padding=\"xxs\"\n          cols={['auto', 'auto']}\n          style={{ background: 'white' }}\n          onKeyDown={handleOnKeyDown}\n        >\n          <DSFormLayoutBlockItem label=\"Min\" inputID={`${idPreffix}-min-${column.id}-${domIdAffix}`}>\n            <DSInputText\n              value={from}\n              {...fromInputProps}\n              id={`${idPreffix}-min-${column.id}-${domIdAffix}`}\n              style={{ textAlign: 'right' }}\n              placeholder=\"0.00\"\n              innerRef={handleRef}\n            />\n          </DSFormLayoutBlockItem>\n          <DSFormLayoutBlockItem label=\"Max\" inputID={`${idPreffix}-max-${column.id}-${domIdAffix}`}>\n            <DSInputText\n              value={to}\n              {...toInputProps}\n              id={`${idPreffix}-max-${column.id}s-${domIdAffix}`}\n              style={{ textAlign: 'right' }}\n              placeholder=\"0.00\"\n            />\n          </DSFormLayoutBlockItem>\n        </Grid>\n      }\n      triggerIcon={<SearchXsmall />}\n      customStyles={{ width: column.ref?.current?.offsetWidth ?? '0px' }}\n      innerRef={innerRef}\n      ariaLabel=\"Open Currency Range Filter\"\n    />\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/configs/constants.js

@@ -45,7 +45,8 @@ const DATA_TESTID = {
   DATA_TABLE_ROW_GROUP_HEADER: "data-table-row-group-header",
   DATA_TABLE_COLUMN_DRAG_OVERLAY: "data-table-drag-column-drag-overlay",
   DATA_TABLE_HEADER_CELL_TITLE: "header-cell-title",
-  DATA_TABLE_FILTER_BAR_DD_MENU_BUTTON: "filter-bar-ddmenu-button"
+  DATA_TABLE_FILTER_BAR_DD_MENU_BUTTON: "filter-bar-ddmenu-button",
+  DATA_TABLE_SORT_BUTTON: "data-table-sort-button"
 };
 const EMPTY_FILTER = "ds-empty-filter";
 export {

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

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

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

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

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

@@ -47,8 +47,19 @@ const HeaderCell = (props) => {
   const dragHandleRef = useRef(null);
   const filterIconRef = useRef(null);
   const resizeHandlerRef = useRef(null);
+  const sortRef = useRef(null);
   const { draggableProps } = useContext(SortableItemContext);
   const { hasFilter, hasDnD, hasSortingCaret, hasRightIcons, shouldShowDnD, hCols, isDragging, shouldShowResize } = useHeaderCellConfig(props);
+  const { handleSort, ...handlers } = useHeaderCellHandlers({
+    hasFilter,
+    column,
+    hasDnD,
+    dragHandleRef,
+    filterIconRef,
+    resizeHandlerRef,
+    sortRef,
+    hasSortingCaret
+  });
   const rightIcons = useMemo(() => {
     if (!hasRightIcons) return null;
     return /* @__PURE__ */ jsxs(StyledHeaderRightIconsWrapper, { getOwnerProps, children: [
@@ -62,9 +73,19 @@ const HeaderCell = (props) => {
           innerRef: filterIconRef
         }
       ),
-      hasSortingCaret && /* @__PURE__ */ jsx(SortByCaret, { isSortedDesc: column.isSortedDesc })
+      hasSortingCaret && /* @__PURE__ */ jsx(
+        SortByCaret,
+        {
+          isSortedDesc: column.isSortedDesc,
+          onClick: handleSort,
+          isReachable: reduxHeader?.withTabStops ?? false,
+          column,
+          reduxHeader,
+          innerRef: sortRef
+        }
+      )
     ] });
-  }, [hasRightIcons, getOwnerProps, column, onFiltersChange, reduxHeader, filters, hasSortingCaret]);
+  }, [hasRightIcons, getOwnerProps, handleSort, column, onFiltersChange, reduxHeader, filters, hasSortingCaret]);
   const DnDHandleComponent = useMemo(
     () => /* @__PURE__ */ jsx(Grid, { mr: "2px", alignItems: "center", style: { position: "relative" }, children: /* @__PURE__ */ jsx(StyledFocusWithin, { hideFocus: isDragging, children: /* @__PURE__ */ jsx(
       DragHandle,
@@ -87,19 +108,12 @@ const HeaderCell = (props) => {
     },
     [column.ref, isDragOverlay]
   );
-  const handlers = useHeaderCellHandlers({
-    hasFilter,
-    column,
-    hasDnD,
-    dragHandleRef,
-    filterIconRef,
-    resizeHandlerRef
-  });
   const screenReaderInstructionsId = `sr-${column.id}-instructions-${domIdAffix}`.replace(/ /g, "");
   return /* @__PURE__ */ jsxs(
     StyledHeadTh,
     {
       column,
+      onClick: handleSort,
       ...handlers,
       role: "columnheader",
       ...isEmptyContent && column.id === firstFocuseableColumnHeaderId ? { "aria-label": `${noResultsMessage}. ${noResultsSecondaryMessage ? `${noResultsSecondaryMessage}.` : ""}` } : {},

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

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

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

@@ -10,7 +10,7 @@ const useHeaderCellConfig = ({ column, isDragOverlay = false }) => {
   const reduxHeader = useMemo(() => reduxHeaders[column.id], [reduxHeaders, column]);
   const hasFilter = !!(column.filter || column.Filter);
   const hasDnD = dragAndDropColumns && !column.disableDnD;
-  const hasSortingCaret = Boolean(column.canSort) && typeof column.isSortedDesc === "boolean";
+  const hasSortingCaret = Boolean(column.canSort);
   const hasRightIcons = !isDragOverlay && (hasSortingCaret || hasFilter);
   const isDragging = draggableProps && draggableProps.isDragging;
   const shouldShowDnD = hasDnD && (reduxHeader?.showDnDHandle && draggableProps && !draggableProps.active || draggableProps && draggableProps.isDragging || isDragOverlay);

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

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

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

@@ -1,12 +1,13 @@
 import * as React from "react";
 import { useCallback, useMemo } from "react";
 import { useInternalStore, usePropsStore } from "../../configs/useStore/useStore.js";
-const buildNextHeader = (reduxHeader, value, hasFilter, hasDnD, withTabStops = false) => ({
+const buildNextHeader = (reduxHeader, value, hasFilter, hasDnD, hasSortingCaret, withTabStops = false) => ({
   hideFilterMenu: true,
   // Do this to overwrite it if it exists
   ...reduxHeader,
   hideFilterButton: !(hasFilter && value),
   showDnDHandle: hasDnD && value,
+  showSortCaret: hasSortingCaret,
   withTabStops
 });
 const getNextSortedVisibleColumns = (visibleColumns, columnId, isSortedDesc) => {
@@ -29,7 +30,9 @@ const useHeaderCellHandlers = ({
   hasDnD,
   dragHandleRef,
   filterIconRef,
-  resizeHandlerRef
+  sortRef,
+  resizeHandlerRef,
+  hasSortingCaret
 }) => {
   const onColumnSortChange = usePropsStore((state) => state.onColumnSortChange);
   const onColumnSort = usePropsStore((state) => state.onColumnSort);
@@ -40,14 +43,14 @@ const useHeaderCellHandlers = ({
   const reduxHeader = useMemo(() => reduxHeaders[column.id], [reduxHeaders, column]);
   const headerRef = column.ref;
   const onMouseEnter = useCallback(() => {
-    patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD));
-  }, [column.id, hasDnD, hasFilter, patchHeader, reduxHeader]);
+    patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD, hasSortingCaret));
+  }, [column.id, hasDnD, hasFilter, patchHeader, reduxHeader, hasSortingCaret]);
   const onMouseLeave = useCallback(() => {
     if (!headerRef?.current?.contains(document.activeElement)) {
-      patchHeader(column.id, buildNextHeader(reduxHeader, false, hasFilter, hasDnD));
+      patchHeader(column.id, buildNextHeader(reduxHeader, false, hasFilter, hasDnD, false));
     }
   }, [column.id, hasDnD, hasFilter, headerRef, patchHeader, reduxHeader]);
-  const onClick = useCallback(() => {
+  const handleSort = useCallback(() => {
     if (column.canSort) {
       onColumnSortChange?.({
         column: column.id,
@@ -62,6 +65,7 @@ const useHeaderCellHandlers = ({
   }, [column.canSort, column.id, column.isSortedDesc, onColumnSort, onColumnSortChange, visibleColumns]);
   const onKeyDown = useCallback(
     (e) => {
+      if (e.currentTarget !== e.target) return;
       if (e.code === "ArrowDown" && column.canSort) {
         e.preventDefault();
         onColumnSortChange?.({
@@ -77,11 +81,12 @@ const useHeaderCellHandlers = ({
         });
         onColumnSort(getNextSortedVisibleColumns(visibleColumns, column.id, false), column.id, "ASC");
       } else if (["Enter", "Space"].includes(e.code)) {
-        patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD, true));
+        patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD, hasSortingCaret, true));
         setTimeout(() => {
           if (dragHandleRef.current) dragHandleRef.current.focus();
           else if (filterIconRef.current) filterIconRef.current.focus();
           else if (resizeHandlerRef.current) resizeHandlerRef.current.focus();
+          else if (sortRef?.current) sortRef.current.focus();
         });
       }
     },
@@ -95,9 +100,11 @@ const useHeaderCellHandlers = ({
       reduxHeader,
       hasFilter,
       hasDnD,
+      hasSortingCaret,
       dragHandleRef,
       filterIconRef,
-      resizeHandlerRef
+      resizeHandlerRef,
+      sortRef
     ]
   );
   const onFocus = useCallback(
@@ -108,7 +115,7 @@ const useHeaderCellHandlers = ({
         resizeHandlerRef.current
       ];
       if (e.target === headerRef?.current) {
-        patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD));
+        patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD, hasSortingCaret));
         setFocusedRowId(null);
       }
       if (possibleTargets.includes(e.target)) {
@@ -130,7 +137,8 @@ const useHeaderCellHandlers = ({
       patchHeader,
       reduxHeader,
       resizeHandlerRef,
-      setFocusedRowId
+      setFocusedRowId,
+      hasSortingCaret
     ]
   );
   const onBlur = useCallback(
@@ -138,11 +146,12 @@ const useHeaderCellHandlers = ({
       if (e.relatedTarget === dragHandleRef.current) return;
       if (e.relatedTarget === filterIconRef.current) return;
       if (e.relatedTarget === resizeHandlerRef.current) return;
-      patchHeader(column.id, buildNextHeader(reduxHeader, false, hasFilter, hasDnD));
+      if (e.relatedTarget === sortRef?.current) return;
+      patchHeader(column.id, buildNextHeader(reduxHeader, false, hasFilter, hasDnD, false));
     },
-    [dragHandleRef, filterIconRef, resizeHandlerRef, patchHeader, column.id, reduxHeader, hasFilter, hasDnD]
+    [dragHandleRef, filterIconRef, resizeHandlerRef, sortRef, patchHeader, column.id, reduxHeader, hasFilter, hasDnD]
   );
-  return { onMouseEnter, onMouseLeave, onClick, onKeyDown, onBlur, onFocus };
+  return { onMouseEnter, onMouseLeave, handleSort, onKeyDown, onBlur, onFocus };
 };
 export {
   useHeaderCellHandlers