@dynatrace/strato-components 3.10.4 → 3.11.0

package/esm/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnSettingsModal.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnSettingsModal.tsx"],
-  "sourcesContent": ["import {\n  type Column,\n  type ColumnPinningState,\n  type RowData,\n} from '@tanstack/react-table';\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n  type JSX,\n  type Ref,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport type { DataTableColumnSettingsModalRef } from './column-settings-types.js';\nimport {\n  generateColumnOrderWithParentIds,\n  generateColumnVisibilityObject,\n  getCombinedVisibilityState,\n  getHasColumnOrderChanged,\n  getHasColumnPinningChanged,\n  getHasVisibilityChanged,\n  getMultipleLocalColumnVisibility,\n  getVisibilityLimitMessage,\n  getOverrideValue,\n  getIsSettingEnabled,\n  resolveEffectiveLimit,\n} from './column-settings-utils.js';\nimport { DataTableAllColumnsHiddenEmptyState } from './DataTableAllColumnsHiddenEmptyState.js';\nimport { DataTableColumnsList } from './DataTableColumnsList.js';\nimport { DataTableVisibilityFilterControls } from './DataTableVisibilityFilterControls.js';\nimport { Flex } from '../../../../../layouts/flex/Flex.js';\nimport { useDataTable } from '../../../contexts/DataTableContext.js';\nimport type { DataTablePinnedColumnState } from '../../../features/ColumnPinning/column-pinning-types.js';\nimport type {\n  DataTableColumnVisibilityState,\n  DataTableVisibleColumnLimits,\n} from '../../../features/ColumnVisibility/column-visibility-types.js';\nimport type { TDataTableFeatures } from '../../../features/types/features.types.js';\nimport { dataTableMessages } from '../../../messages.js';\nimport type { DataTableColumnSettingsConfig } from '../../../public.api.js';\nimport { DataTableSettingsModal } from '../../SettingsModal/DataTableSettingsModal.js';\n\ninterface DataTableColumnSettingsModalProps {\n  /**\n   * Whether column visibility settings are available in the modal.\n   */\n  visibilitySettings: boolean;\n  /**\n   * Whether column order settings are available in the modal.\n   */\n  columnOrderSettings: boolean;\n  /**\n   * Whether column pinning settings are available in the modal.\n   */\n  columnPinningSettings: boolean;\n  /**\n   * Default column visibility when settings are reset.\n   */\n  resetColumnVisibility?: DataTableColumnVisibilityState;\n  /**\n   * Default column order when settings are reset.\n   */\n  resetColumnOrder?: string[];\n  /**\n   * Default column pinning state when settings are reset.\n   */\n  resetColumnPinning?: DataTablePinnedColumnState;\n  /**\n   * Optional upper limits for the number of visible columns from the toolbar slot.\n   */\n  visibleColumnLimits?: DataTableVisibleColumnLimits;\n}\n\n/**\n * Modal combining UI controls for column visibility and column ordering.\n * All changes that made within the modal are only applied once the user click the Confirm button.\n * When clicking Close, the changes won't be applied and discarded.\n */\nfunction ColumnSettingsModal<\n  TFeatures extends TDataTableFeatures,\n  TData extends RowData,\n>(\n  props: DataTableColumnSettingsModalProps & {\n    onModalClose: () => void;\n    columnSettingsOverride?: DataTableColumnSettingsConfig;\n  },\n): JSX.Element {\n  const {\n    visibilitySettings: toolbarVisibilitySettings,\n    columnOrderSettings: toolbarColumnOrderSettings,\n    columnPinningSettings: toolbarColumnPinningSettings,\n    resetColumnOrder,\n    resetColumnVisibility,\n    resetColumnPinning,\n    visibleColumnLimits: slotVisibleColumnLimits,\n    onModalClose,\n    columnSettingsOverride,\n  } = props;\n\n  const intl = useIntl();\n  const table = useDataTable();\n  const leafColumnsWithoutBuiltin = table.getLeafColumnsWithoutBuiltin();\n\n  const visibilityOverride = columnSettingsOverride?.columnVisibility;\n  const columnOrderOverride = columnSettingsOverride?.columnOrder;\n  const columnPinningOverride = columnSettingsOverride?.columnPinning;\n\n  // Programmatic override takes precedence over the slot value\n  const rawVisibleColumnLimits =\n    getOverrideValue(visibilityOverride, 'visibleColumnLimits') ??\n    slotVisibleColumnLimits;\n\n  const mandatoryVisibleColumnsCount = useMemo(\n    () =>\n      leafColumnsWithoutBuiltin.filter(\n        (col) => col.columnDef.enableHiding === false,\n      ).length,\n    [leafColumnsWithoutBuiltin],\n  );\n\n  const { warningLimit, errorLimit } = useMemo(\n    () =>\n      resolveEffectiveLimit(\n        rawVisibleColumnLimits,\n        mandatoryVisibleColumnsCount,\n      ),\n    [rawVisibleColumnLimits, mandatoryVisibleColumnsCount],\n  );\n\n  const visibilitySettingsEnabled = getIsSettingEnabled(\n    visibilityOverride,\n    toolbarVisibilitySettings,\n  );\n  const columnOrderSettingsEnabled = getIsSettingEnabled(\n    columnOrderOverride,\n    toolbarColumnOrderSettings,\n  );\n  const columnPinningSettingsEnabled = getIsSettingEnabled(\n    columnPinningOverride,\n    toolbarColumnPinningSettings,\n  );\n\n  // original column order state\n  const {\n    columnOrderWithParents: tableColumnOrder,\n    uniqueParentIds: allLocalColumnsParentIds,\n  } = generateColumnOrderWithParentIds(\n    table.getColumn,\n    table.atoms.columnOrder?.get() ?? [],\n  );\n\n  // immediate search input value (drives the controlled input and clear button)\n  const [filterInputValue, setFilterInputValue] = useState('');\n  // debounced value that actually filters the column list\n  const [activeFilterValue, setActiveFilterValue] = useState<string>('');\n\n  const clearFilter = useCallback(() => {\n    setFilterInputValue('');\n    setActiveFilterValue('');\n  }, []);\n\n  // original column visibility state\n  const initialColumnVisibility = useMemo(\n    () => generateColumnVisibilityObject(leafColumnsWithoutBuiltin),\n    [leafColumnsWithoutBuiltin],\n  );\n\n  // current column visibility state while modal is open\n  const [localColumnVisibility, setLocalColumnVisibility] = useState<\n    Record<string, boolean>\n  >(initialColumnVisibility);\n\n  // current column order state while modal is open\n  const [localColumnOrder, setLocalColumnOrder] =\n    useState<string[]>(tableColumnOrder);\n\n  // current column pinning state while modal is open\n  const [localColumnPinning, setLocalColumnPinning] =\n    useState<ColumnPinningState>(\n      // original column pinning state\n      () => table.store.state.columnPinning,\n    );\n\n  // flag whether the \"Reset to default\" status message for screen readers should be displayed\n  const [showResetStatus, setShowResetStatus] = useState(false);\n  // flag whether the lower-bound (min=1) error should be displayed\n  const [showMinError, setShowMinError] = useState(false);\n\n  const [listHiddenColumns, setListHiddenColumns] = useState(true);\n\n  const onListHiddenColumnsChange = () => {\n    setListHiddenColumns((prev) => !prev);\n  };\n\n  const contentRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const contentNode = contentRef.current;\n    if (!contentNode) {\n      return;\n    }\n\n    const modalDialog = contentNode.closest<HTMLDivElement>('[role=\"dialog\"]');\n    if (!modalDialog) {\n      return;\n    }\n\n    const observer = new ResizeObserver((entries) => {\n      const height = entries[0]?.contentRect?.height;\n      if (height && height > 0) {\n        modalDialog.style.minHeight = CSS.supports('min-height', '1dvh')\n          ? `min(${height}px, 96dvh)`\n          : `min(${height}px, 96vh)`;\n        observer.disconnect();\n      }\n    });\n    observer.observe(modalDialog);\n    return () => {\n      observer.disconnect();\n    };\n  }, []);\n\n  const columnOrderToReset =\n    getOverrideValue(columnOrderOverride, 'resetColumnOrder') ??\n    resetColumnOrder ??\n    table.options.originalColumnOrder;\n  const columnVisibilityToReset =\n    getOverrideValue(visibilityOverride, 'resetColumnVisibility') ??\n    resetColumnVisibility ??\n    table.options.originalColumnVisibility;\n  const columnPinningToReset =\n    getOverrideValue(columnPinningOverride, 'resetColumnPinning') ??\n    resetColumnPinning ??\n    table.options.originalColumnPinning;\n\n  // Memoize filtered column order for comparison\n  const filteredLocalColumnOrder = useMemo(\n    () =>\n      localColumnOrder.filter(\n        (colId) => !allLocalColumnsParentIds.includes(colId),\n      ),\n    [localColumnOrder, allLocalColumnsParentIds],\n  );\n\n  // checks if local default column visibility has changed\n  const hasVisibilityChanged = useMemo(\n    () =>\n      visibilitySettingsEnabled &&\n      getHasVisibilityChanged(columnVisibilityToReset, localColumnVisibility),\n    [visibilitySettingsEnabled, columnVisibilityToReset, localColumnVisibility],\n  );\n\n  // checks if local default column order has changed\n  const hasColumnOrderChanged =\n    columnOrderSettingsEnabled &&\n    getHasColumnOrderChanged(columnOrderToReset, filteredLocalColumnOrder);\n\n  // checks if local default column pinning state has changed\n  const hasColumnPinningChanged =\n    columnPinningSettingsEnabled &&\n    getHasColumnPinningChanged(\n      {\n        left: columnPinningToReset?.left ?? [],\n        right: columnPinningToReset?.right ?? [],\n      },\n      localColumnPinning,\n    );\n\n  // Drives the \"Show all\"/\"Hide all\" button disabled states.\n  const showHideAllState = getCombinedVisibilityState(\n    localColumnVisibility,\n    leafColumnsWithoutBuiltin,\n    true,\n  );\n\n  const visibleColumnCount = Object.values(localColumnVisibility).filter(\n    Boolean,\n  ).length;\n  const totalColumnCount = Object.values(localColumnVisibility).length;\n  const hiddenColumnCount = totalColumnCount - visibleColumnCount;\n\n  const exceedsError =\n    errorLimit !== undefined && visibleColumnCount > errorLimit;\n\n  const limitMessage = getVisibilityLimitMessage(\n    showMinError,\n    errorLimit,\n    warningLimit,\n    visibleColumnCount,\n    intl,\n  );\n\n  /**\n   * Updates the local column visibility state.\n   * @param column - the column to update.\n   * @param currentVisibilityState - the current visibility state of the column.\n   */\n  const updateLocalColumnVisibility = (\n    column: Column<TFeatures, TData>,\n    currentVisibilityState: boolean | 'indeterminate',\n  ): void => {\n    const childColumns = column.columns;\n    if (childColumns.length === 0) {\n      setLocalColumnVisibility((prevState) => ({\n        ...prevState,\n        [column.id]: !currentVisibilityState,\n      }));\n    } else {\n      setLocalColumnVisibility((prevState) =>\n        getMultipleLocalColumnVisibility(\n          childColumns,\n          currentVisibilityState,\n          prevState,\n        ),\n      );\n    }\n    showResetStatus && setShowResetStatus(false);\n    showMinError && setShowMinError(false);\n  };\n\n  /**\n   * Updates the local column order state.\n   * @param newColumnOrder - the new column order.\n   */\n  const updateLocalColumnOrder = (newColumnOrder: string[]): void => {\n    setLocalColumnOrder(newColumnOrder);\n    showResetStatus && setShowResetStatus(false);\n  };\n\n  /**\n   * Updates the local column pinning state.\n   * @param newState - the new column pinning state.\n   */\n  const updateLocalColumnPinning = (newState: ColumnPinningState): void => {\n    setLocalColumnPinning(newState);\n    showResetStatus && setShowResetStatus(false);\n  };\n\n  const clearStatusMessages = () => {\n    showResetStatus && setShowResetStatus(false);\n    showMinError && setShowMinError(false);\n  };\n\n  const onShowAll = () => {\n    setLocalColumnVisibility((prevState) =>\n      getMultipleLocalColumnVisibility(\n        leafColumnsWithoutBuiltin,\n        // passing false sets all hideable columns to visible\n        false,\n        prevState,\n      ),\n    );\n    clearStatusMessages();\n  };\n\n  const onHideAll = () => {\n    setLocalColumnVisibility((prevState) =>\n      getMultipleLocalColumnVisibility(\n        leafColumnsWithoutBuiltin,\n        // passing true sets all hideable columns to hidden\n        true,\n        prevState,\n      ),\n    );\n    clearStatusMessages();\n  };\n\n  const showFilterControl =\n    visibilitySettingsEnabled || columnPinningSettingsEnabled;\n\n  // The visibility control row (the \"list hidden columns\" switch + counter)\n  // is hidden while a search is active.\n  const showVisibilityControlRow =\n    visibilitySettingsEnabled && !filterInputValue;\n\n  // During search, always include hidden columns so they can be found by name.\n  const effectiveListHiddenColumns =\n    listHiddenColumns || activeFilterValue.length > 0;\n\n  // Show the empty state when all columns are hidden and hidden columns are not listed\n  const showAllColumnsHiddenEmptyState =\n    visibilitySettingsEnabled &&\n    visibleColumnCount === 0 &&\n    !effectiveListHiddenColumns;\n\n  const onReset = () => {\n    let didReset = false;\n\n    // reset visibility, order and/or pinning state if they are enabled\n    if (visibilitySettingsEnabled && columnVisibilityToReset) {\n      setLocalColumnVisibility(\n        generateColumnVisibilityObject(\n          leafColumnsWithoutBuiltin,\n          columnVisibilityToReset,\n        ),\n      );\n      didReset = true;\n    }\n\n    if (columnOrderSettingsEnabled && columnOrderToReset) {\n      const { columnOrderWithParents } = generateColumnOrderWithParentIds(\n        table.getColumn,\n        columnOrderToReset,\n      );\n\n      setLocalColumnOrder(columnOrderWithParents);\n      didReset = true;\n    }\n\n    if (columnPinningSettingsEnabled && columnPinningToReset) {\n      setLocalColumnPinning({\n        left: columnPinningToReset?.left ?? [],\n        right: columnPinningToReset?.right ?? [],\n      });\n      didReset = true;\n    }\n\n    // if settings were successfully reset,\n    // show a status message for the screen reader\n    didReset && setShowResetStatus(true);\n    showMinError && setShowMinError(false);\n  };\n\n  const onApply = () => {\n    if (visibilitySettingsEnabled && visibleColumnCount < 1) {\n      setShowMinError(true);\n      return;\n    }\n    table.setColumnVisibility(localColumnVisibility);\n    table.setColumnOrder(filteredLocalColumnOrder);\n    table.setColumnPinning(localColumnPinning);\n    onModalClose();\n  };\n\n  return (\n    <DataTableSettingsModal\n      title={intl.formatMessage(dataTableMessages.columnSettingsTitle)}\n      show={true}\n      showResetStatus={showResetStatus}\n      onDismiss={onModalClose}\n      onReset={onReset}\n      onApply={onApply}\n      disableButtons={{\n        reset:\n          !hasColumnOrderChanged &&\n          !hasVisibilityChanged &&\n          !hasColumnPinningChanged,\n        apply: exceedsError,\n      }}\n      footerMessage={limitMessage}\n      controlLabels={{\n        reset: intl.formatMessage(\n          dataTableMessages.resetColumnSettingsButtonText,\n        ),\n        cancel: intl.formatMessage(dataTableMessages.cancelButtonText),\n        apply: intl.formatMessage(dataTableMessages.applyButtonText),\n      }}\n    >\n      <Flex ref={contentRef} flexDirection=\"column\" gap={12} flex={1}>\n        <DataTableVisibilityFilterControls\n          showVisibilityControl={visibilitySettingsEnabled}\n          showFilterControl={showFilterControl}\n          filterValue={filterInputValue}\n          onFilterValueChange={setFilterInputValue}\n          setActiveFilterValue={setActiveFilterValue}\n          showAllDisabled={showHideAllState === true}\n          hideAllDisabled={showHideAllState === false}\n          onShowAll={onShowAll}\n          onHideAll={onHideAll}\n          listHiddenColumns={listHiddenColumns}\n          onListHiddenColumnsChange={onListHiddenColumnsChange}\n          hiddenColumnCount={hiddenColumnCount}\n          visibleColumnCount={visibleColumnCount}\n          totalColumnCount={totalColumnCount}\n        />\n        {showAllColumnsHiddenEmptyState ? (\n          <Flex flex={1} alignItems=\"center\" justifyContent=\"center\">\n            <DataTableAllColumnsHiddenEmptyState\n              onListHiddenColumns={onListHiddenColumnsChange}\n            />\n          </Flex>\n        ) : (\n          <DataTableColumnsList\n            visibilitySettings={visibilitySettingsEnabled}\n            columnOrderSettings={columnOrderSettingsEnabled}\n            columnPinningSettings={columnPinningSettingsEnabled}\n            activeFilterValue={activeFilterValue}\n            listHiddenColumns={effectiveListHiddenColumns}\n            localColumnVisibility={localColumnVisibility}\n            updateLocalColumnVisibility={updateLocalColumnVisibility}\n            localColumnOrder={localColumnOrder}\n            updateLocalColumnOrder={updateLocalColumnOrder}\n            localColumnPinning={localColumnPinning}\n            updateLocalColumnPinning={updateLocalColumnPinning}\n            hasFilterBar={showFilterControl}\n            hasVisibilityControl={showVisibilityControlRow}\n            hasMessage={limitMessage !== undefined}\n            onClearFilter={clearFilter}\n          />\n        )}\n      </Flex>\n    </DataTableSettingsModal>\n  );\n}\n\nfunction DataTableColumnSettingsModalFwd(\n  props: DataTableColumnSettingsModalProps,\n  forwardedRef: Ref<DataTableColumnSettingsModalRef>,\n): JSX.Element | null {\n  const [modalOpen, setModalOpen] = useState(false);\n  const [columnSettingsOverride, setColumnSettingsOverride] =\n    useState<DataTableColumnSettingsConfig>();\n\n  // open the modal from outside\n  useImperativeHandle(forwardedRef, () => ({\n    openColumnSettings: (columnSettings?: DataTableColumnSettingsConfig) => {\n      setColumnSettingsOverride(columnSettings);\n      setModalOpen(true);\n    },\n  }));\n\n  if (modalOpen) {\n    return (\n      <ColumnSettingsModal\n        {...props}\n        columnSettingsOverride={columnSettingsOverride}\n        onModalClose={() => setModalOpen(false)}\n      />\n    );\n  }\n  return null;\n}\n\n/**\n * @internal\n */\nexport const DataTableColumnSettingsModal = forwardRef(\n  DataTableColumnSettingsModalFwd,\n);\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  type Column,\n  type ColumnPinningState,\n  type RowData,\n} from '@tanstack/react-table';\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n  type JSX,\n  type Ref,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport type { DataTableColumnSettingsModalRef } from './column-settings-types.js';\nimport {\n  generateColumnOrderWithParentIds,\n  generateColumnVisibilityObject,\n  getCombinedVisibilityState,\n  getHasColumnOrderChanged,\n  getHasColumnPinningChanged,\n  getHasVisibilityChanged,\n  getMultipleLocalColumnVisibility,\n  getVisibilityLimitMessage,\n  getOverrideValue,\n  getIsSettingEnabled,\n  resolveEffectiveLimit,\n} from './column-settings-utils.js';\nimport { DataTableAllColumnsHiddenEmptyState } from './DataTableAllColumnsHiddenEmptyState.js';\nimport { DataTableColumnsList } from './DataTableColumnsList.js';\nimport { DataTableVisibilityFilterControls } from './DataTableVisibilityFilterControls.js';\nimport { Flex } from '../../../../../layouts/flex/Flex.js';\nimport { useDataTable } from '../../../contexts/DataTableContext.js';\nimport type { DataTablePinnedColumnState } from '../../../features/ColumnPinning/column-pinning-types.js';\nimport type {\n  DataTableColumnVisibilityState,\n  DataTableVisibleColumnLimits,\n} from '../../../features/ColumnVisibility/column-visibility-types.js';\nimport type { TDataTableFeatures } from '../../../features/types/features.types.js';\nimport { dataTableMessages } from '../../../messages.js';\nimport type { DataTableColumnSettingsConfig } from '../../../public.api.js';\nimport { DataTableSettingsModal } from '../../SettingsModal/DataTableSettingsModal.js';\n\ninterface DataTableColumnSettingsModalProps {\n  /**\n   * Whether column visibility settings are available in the modal.\n   */\n  visibilitySettings: boolean;\n  /**\n   * Whether column order settings are available in the modal.\n   */\n  columnOrderSettings: boolean;\n  /**\n   * Whether column pinning settings are available in the modal.\n   */\n  columnPinningSettings: boolean;\n  /**\n   * Default column visibility when settings are reset.\n   */\n  resetColumnVisibility?: DataTableColumnVisibilityState;\n  /**\n   * Default column order when settings are reset.\n   */\n  resetColumnOrder?: string[];\n  /**\n   * Default column pinning state when settings are reset.\n   */\n  resetColumnPinning?: DataTablePinnedColumnState;\n  /**\n   * Optional upper limits for the number of visible columns from the toolbar slot.\n   */\n  visibleColumnLimits?: DataTableVisibleColumnLimits;\n}\n\n/**\n * Modal combining UI controls for column visibility and column ordering.\n * All changes that made within the modal are only applied once the user click the Confirm button.\n * When clicking Close, the changes won't be applied and discarded.\n */\nfunction ColumnSettingsModal<\n  TFeatures extends TDataTableFeatures,\n  TData extends RowData,\n>(\n  props: DataTableColumnSettingsModalProps & {\n    onModalClose: () => void;\n    columnSettingsOverride?: DataTableColumnSettingsConfig;\n  },\n): JSX.Element {\n  const {\n    visibilitySettings: toolbarVisibilitySettings,\n    columnOrderSettings: toolbarColumnOrderSettings,\n    columnPinningSettings: toolbarColumnPinningSettings,\n    resetColumnOrder,\n    resetColumnVisibility,\n    resetColumnPinning,\n    visibleColumnLimits: slotVisibleColumnLimits,\n    onModalClose,\n    columnSettingsOverride,\n  } = props;\n\n  const intl = useIntl();\n  const table = useDataTable();\n  const leafColumnsWithoutBuiltin = table.getLeafColumnsWithoutBuiltin();\n\n  const visibilityOverride = columnSettingsOverride?.columnVisibility;\n  const columnOrderOverride = columnSettingsOverride?.columnOrder;\n  const columnPinningOverride = columnSettingsOverride?.columnPinning;\n\n  // Programmatic override takes precedence over the slot value\n  const rawVisibleColumnLimits =\n    getOverrideValue(visibilityOverride, 'visibleColumnLimits') ??\n    slotVisibleColumnLimits;\n\n  const mandatoryVisibleColumnsCount = useMemo(\n    () =>\n      leafColumnsWithoutBuiltin.filter(\n        (col) => col.columnDef.enableHiding === false,\n      ).length,\n    [leafColumnsWithoutBuiltin],\n  );\n\n  const { warningLimit, errorLimit } = useMemo(\n    () =>\n      resolveEffectiveLimit(\n        rawVisibleColumnLimits,\n        mandatoryVisibleColumnsCount,\n      ),\n    [rawVisibleColumnLimits, mandatoryVisibleColumnsCount],\n  );\n\n  const visibilitySettingsEnabled = getIsSettingEnabled(\n    visibilityOverride,\n    toolbarVisibilitySettings,\n  );\n  const columnOrderSettingsEnabled = getIsSettingEnabled(\n    columnOrderOverride,\n    toolbarColumnOrderSettings,\n  );\n  const columnPinningSettingsEnabled = getIsSettingEnabled(\n    columnPinningOverride,\n    toolbarColumnPinningSettings,\n  );\n\n  // original column order state\n  const {\n    columnOrderWithParents: tableColumnOrder,\n    uniqueParentIds: allLocalColumnsParentIds,\n  } = generateColumnOrderWithParentIds(\n    table.getColumn,\n    table.atoms.columnOrder?.get() ?? [],\n  );\n\n  // immediate search input value (drives the controlled input and clear button)\n  const [filterInputValue, setFilterInputValue] = useState('');\n  // debounced value that actually filters the column list\n  const [activeFilterValue, setActiveFilterValue] = useState<string>('');\n\n  const clearFilter = useCallback(() => {\n    setFilterInputValue('');\n    setActiveFilterValue('');\n  }, []);\n\n  // original column visibility state\n  const initialColumnVisibility = useMemo(\n    () => generateColumnVisibilityObject(leafColumnsWithoutBuiltin),\n    [leafColumnsWithoutBuiltin],\n  );\n\n  // current column visibility state while modal is open\n  const [localColumnVisibility, setLocalColumnVisibility] = useState<\n    Record<string, boolean>\n  >(initialColumnVisibility);\n\n  // Merge columns that arrived after the modal opened (e.g. loading state) into the\n  // draft so they reflect their actual visibility instead of defaulting to hidden.\n  const newEntries = Object.entries(initialColumnVisibility).filter(\n    ([id]) => !(id in localColumnVisibility),\n  );\n  if (newEntries.length > 0) {\n    setLocalColumnVisibility((prev) => ({\n      ...Object.fromEntries(newEntries),\n      ...prev,\n    }));\n  }\n\n  // current column order state while modal is open\n  const [localColumnOrder, setLocalColumnOrder] =\n    useState<string[]>(tableColumnOrder);\n\n  // current column pinning state while modal is open\n  const [localColumnPinning, setLocalColumnPinning] =\n    useState<ColumnPinningState>(\n      // original column pinning state\n      () => table.store.state.columnPinning,\n    );\n\n  // flag whether the \"Reset to default\" status message for screen readers should be displayed\n  const [showResetStatus, setShowResetStatus] = useState(false);\n  // flag whether the lower-bound (min=1) error should be displayed\n  const [showMinError, setShowMinError] = useState(false);\n\n  const [listHiddenColumns, setListHiddenColumns] = useState(true);\n\n  const onListHiddenColumnsChange = () => {\n    setListHiddenColumns((prev) => !prev);\n  };\n\n  const contentRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const contentNode = contentRef.current;\n    if (!contentNode) {\n      return;\n    }\n\n    const modalDialog = contentNode.closest<HTMLDivElement>('[role=\"dialog\"]');\n    if (!modalDialog) {\n      return;\n    }\n\n    const observer = new ResizeObserver((entries) => {\n      const height = entries[0]?.contentRect?.height;\n      if (height && height > 0) {\n        modalDialog.style.minHeight = CSS.supports('min-height', '1dvh')\n          ? `min(${height}px, 96dvh)`\n          : `min(${height}px, 96vh)`;\n        observer.disconnect();\n      }\n    });\n    observer.observe(modalDialog);\n    return () => {\n      observer.disconnect();\n    };\n  }, []);\n\n  const columnOrderToReset =\n    getOverrideValue(columnOrderOverride, 'resetColumnOrder') ??\n    resetColumnOrder ??\n    table.options.originalColumnOrder;\n  const columnVisibilityToReset =\n    getOverrideValue(visibilityOverride, 'resetColumnVisibility') ??\n    resetColumnVisibility ??\n    table.options.originalColumnVisibility;\n  const columnPinningToReset =\n    getOverrideValue(columnPinningOverride, 'resetColumnPinning') ??\n    resetColumnPinning ??\n    table.options.originalColumnPinning;\n\n  // Memoize filtered column order for comparison\n  const filteredLocalColumnOrder = useMemo(\n    () =>\n      localColumnOrder.filter(\n        (colId) => !allLocalColumnsParentIds.includes(colId),\n      ),\n    [localColumnOrder, allLocalColumnsParentIds],\n  );\n\n  // checks if local default column visibility has changed\n  const hasVisibilityChanged = useMemo(\n    () =>\n      visibilitySettingsEnabled &&\n      getHasVisibilityChanged(columnVisibilityToReset, localColumnVisibility),\n    [visibilitySettingsEnabled, columnVisibilityToReset, localColumnVisibility],\n  );\n\n  // checks if local default column order has changed\n  const hasColumnOrderChanged =\n    columnOrderSettingsEnabled &&\n    getHasColumnOrderChanged(columnOrderToReset, filteredLocalColumnOrder);\n\n  // checks if local default column pinning state has changed\n  const hasColumnPinningChanged =\n    columnPinningSettingsEnabled &&\n    getHasColumnPinningChanged(\n      {\n        left: columnPinningToReset?.left ?? [],\n        right: columnPinningToReset?.right ?? [],\n      },\n      localColumnPinning,\n    );\n\n  // Drives the \"Show all\"/\"Hide all\" button disabled states.\n  const showHideAllState = getCombinedVisibilityState(\n    localColumnVisibility,\n    leafColumnsWithoutBuiltin,\n    true,\n  );\n\n  const visibleColumnCount = Object.values(localColumnVisibility).filter(\n    Boolean,\n  ).length;\n  const totalColumnCount = Object.values(localColumnVisibility).length;\n  const hiddenColumnCount = totalColumnCount - visibleColumnCount;\n\n  const exceedsError =\n    errorLimit !== undefined && visibleColumnCount > errorLimit;\n\n  const limitMessage = getVisibilityLimitMessage(\n    showMinError,\n    errorLimit,\n    warningLimit,\n    visibleColumnCount,\n    intl,\n  );\n\n  /**\n   * Updates the local column visibility state.\n   * @param column - the column to update.\n   * @param currentVisibilityState - the current visibility state of the column.\n   */\n  const updateLocalColumnVisibility = (\n    column: Column<TFeatures, TData>,\n    currentVisibilityState: boolean | 'indeterminate',\n  ): void => {\n    const childColumns = column.columns;\n    if (childColumns.length === 0) {\n      setLocalColumnVisibility((prevState) => ({\n        ...prevState,\n        [column.id]: !currentVisibilityState,\n      }));\n    } else {\n      setLocalColumnVisibility((prevState) =>\n        getMultipleLocalColumnVisibility(\n          childColumns,\n          currentVisibilityState,\n          prevState,\n        ),\n      );\n    }\n    showResetStatus && setShowResetStatus(false);\n    showMinError && setShowMinError(false);\n  };\n\n  /**\n   * Updates the local column order state.\n   * @param newColumnOrder - the new column order.\n   */\n  const updateLocalColumnOrder = (newColumnOrder: string[]): void => {\n    setLocalColumnOrder(newColumnOrder);\n    showResetStatus && setShowResetStatus(false);\n  };\n\n  /**\n   * Updates the local column pinning state.\n   * @param newState - the new column pinning state.\n   */\n  const updateLocalColumnPinning = (newState: ColumnPinningState): void => {\n    setLocalColumnPinning(newState);\n    showResetStatus && setShowResetStatus(false);\n  };\n\n  const clearStatusMessages = () => {\n    showResetStatus && setShowResetStatus(false);\n    showMinError && setShowMinError(false);\n  };\n\n  const onShowAll = () => {\n    setLocalColumnVisibility((prevState) =>\n      getMultipleLocalColumnVisibility(\n        leafColumnsWithoutBuiltin,\n        // passing false sets all hideable columns to visible\n        false,\n        prevState,\n      ),\n    );\n    clearStatusMessages();\n  };\n\n  const onHideAll = () => {\n    setLocalColumnVisibility((prevState) =>\n      getMultipleLocalColumnVisibility(\n        leafColumnsWithoutBuiltin,\n        // passing true sets all hideable columns to hidden\n        true,\n        prevState,\n      ),\n    );\n    clearStatusMessages();\n  };\n\n  const showFilterControl =\n    visibilitySettingsEnabled || columnPinningSettingsEnabled;\n\n  // The visibility control row (the \"list hidden columns\" switch + counter)\n  // is hidden while a search is active.\n  const showVisibilityControlRow =\n    visibilitySettingsEnabled && !filterInputValue;\n\n  // During search, always include hidden columns so they can be found by name.\n  const effectiveListHiddenColumns =\n    listHiddenColumns || activeFilterValue.length > 0;\n\n  // Show the empty state when all columns are hidden and hidden columns are not listed\n  const showAllColumnsHiddenEmptyState =\n    visibilitySettingsEnabled &&\n    visibleColumnCount === 0 &&\n    !effectiveListHiddenColumns;\n\n  const onReset = () => {\n    let didReset = false;\n\n    // reset visibility, order and/or pinning state if they are enabled\n    if (visibilitySettingsEnabled && columnVisibilityToReset) {\n      setLocalColumnVisibility(\n        generateColumnVisibilityObject(\n          leafColumnsWithoutBuiltin,\n          columnVisibilityToReset,\n        ),\n      );\n      didReset = true;\n    }\n\n    if (columnOrderSettingsEnabled && columnOrderToReset) {\n      const { columnOrderWithParents } = generateColumnOrderWithParentIds(\n        table.getColumn,\n        columnOrderToReset,\n      );\n\n      setLocalColumnOrder(columnOrderWithParents);\n      didReset = true;\n    }\n\n    if (columnPinningSettingsEnabled && columnPinningToReset) {\n      setLocalColumnPinning({\n        left: columnPinningToReset?.left ?? [],\n        right: columnPinningToReset?.right ?? [],\n      });\n      didReset = true;\n    }\n\n    // if settings were successfully reset,\n    // show a status message for the screen reader\n    didReset && setShowResetStatus(true);\n    showMinError && setShowMinError(false);\n  };\n\n  const onApply = () => {\n    if (visibilitySettingsEnabled && visibleColumnCount < 1) {\n      setShowMinError(true);\n      return;\n    }\n    table.setColumnVisibility(localColumnVisibility);\n    table.setColumnOrder(filteredLocalColumnOrder);\n    table.setColumnPinning(localColumnPinning);\n    onModalClose();\n  };\n\n  return (\n    <DataTableSettingsModal\n      title={intl.formatMessage(dataTableMessages.columnSettingsTitle)}\n      show={true}\n      showResetStatus={showResetStatus}\n      onDismiss={onModalClose}\n      onReset={onReset}\n      onApply={onApply}\n      disableButtons={{\n        reset:\n          !hasColumnOrderChanged &&\n          !hasVisibilityChanged &&\n          !hasColumnPinningChanged,\n        apply: exceedsError,\n      }}\n      footerMessage={limitMessage}\n      controlLabels={{\n        reset: intl.formatMessage(\n          dataTableMessages.resetColumnSettingsButtonText,\n        ),\n        cancel: intl.formatMessage(dataTableMessages.cancelButtonText),\n        apply: intl.formatMessage(dataTableMessages.applyButtonText),\n      }}\n    >\n      <Flex ref={contentRef} flexDirection=\"column\" gap={12} flex={1}>\n        <DataTableVisibilityFilterControls\n          showVisibilityControl={visibilitySettingsEnabled}\n          showFilterControl={showFilterControl}\n          filterValue={filterInputValue}\n          onFilterValueChange={setFilterInputValue}\n          setActiveFilterValue={setActiveFilterValue}\n          showAllDisabled={showHideAllState === true}\n          hideAllDisabled={showHideAllState === false}\n          onShowAll={onShowAll}\n          onHideAll={onHideAll}\n          listHiddenColumns={listHiddenColumns}\n          onListHiddenColumnsChange={onListHiddenColumnsChange}\n          hiddenColumnCount={hiddenColumnCount}\n          visibleColumnCount={visibleColumnCount}\n          totalColumnCount={totalColumnCount}\n        />\n        {showAllColumnsHiddenEmptyState ? (\n          <Flex flex={1} alignItems=\"center\" justifyContent=\"center\">\n            <DataTableAllColumnsHiddenEmptyState\n              onListHiddenColumns={onListHiddenColumnsChange}\n            />\n          </Flex>\n        ) : (\n          <DataTableColumnsList\n            visibilitySettings={visibilitySettingsEnabled}\n            columnOrderSettings={columnOrderSettingsEnabled}\n            columnPinningSettings={columnPinningSettingsEnabled}\n            activeFilterValue={activeFilterValue}\n            listHiddenColumns={effectiveListHiddenColumns}\n            localColumnVisibility={localColumnVisibility}\n            updateLocalColumnVisibility={updateLocalColumnVisibility}\n            localColumnOrder={localColumnOrder}\n            updateLocalColumnOrder={updateLocalColumnOrder}\n            localColumnPinning={localColumnPinning}\n            updateLocalColumnPinning={updateLocalColumnPinning}\n            hasFilterBar={showFilterControl}\n            hasVisibilityControl={showVisibilityControlRow}\n            hasMessage={limitMessage !== undefined}\n            onClearFilter={clearFilter}\n          />\n        )}\n      </Flex>\n    </DataTableSettingsModal>\n  );\n}\n\nfunction DataTableColumnSettingsModalFwd(\n  props: DataTableColumnSettingsModalProps,\n  forwardedRef: Ref<DataTableColumnSettingsModalRef>,\n): JSX.Element | null {\n  const [modalOpen, setModalOpen] = useState(false);\n  const [columnSettingsOverride, setColumnSettingsOverride] =\n    useState<DataTableColumnSettingsConfig>();\n\n  // open the modal from outside\n  useImperativeHandle(forwardedRef, () => ({\n    openColumnSettings: (columnSettings?: DataTableColumnSettingsConfig) => {\n      setColumnSettingsOverride(columnSettings);\n      setModalOpen(true);\n    },\n  }));\n\n  if (modalOpen) {\n    return (\n      <ColumnSettingsModal\n        {...props}\n        columnSettingsOverride={columnSettingsOverride}\n        onModalClose={() => setModalOpen(false)}\n      />\n    );\n  }\n  return null;\n}\n\n/**\n * @internal\n */\nexport const DataTableColumnSettingsModal = forwardRef(\n  DataTableColumnSettingsModalFwd,\n);\n"],
+  "mappings": "AA2dM,SACE,KADF;AAtdN;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AACP,SAAS,eAAe;AAGxB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,2CAA2C;AACpD,SAAS,4BAA4B;AACrC,SAAS,yCAAyC;AAClD,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAO7B,SAAS,yBAAyB;AAElC,SAAS,8BAA8B;AAsCvC,SAAS,oBAIP,OAIa;AACb,QAAM;AAAA,IACJ,oBAAoB;AAAA,IACpB,qBAAqB;AAAA,IACrB,uBAAuB;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA,IACrB;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,OAAO,QAAQ;AACrB,QAAM,QAAQ,aAAa;AAC3B,QAAM,4BAA4B,MAAM,6BAA6B;AAErE,QAAM,qBAAqB,wBAAwB;AACnD,QAAM,sBAAsB,wBAAwB;AACpD,QAAM,wBAAwB,wBAAwB;AAGtD,QAAM,yBACJ,iBAAiB,oBAAoB,qBAAqB,KAC1D;AAEF,QAAM,+BAA+B;AAAA,IACnC,MACE,0BAA0B;AAAA,MACxB,CAAC,QAAQ,IAAI,UAAU,iBAAiB;AAAA,IAC1C,EAAE;AAAA,IACJ,CAAC,yBAAyB;AAAA,EAC5B;AAEA,QAAM,EAAE,cAAc,WAAW,IAAI;AAAA,IACnC,MACE;AAAA,MACE;AAAA,MACA;AAAA,IACF;AAAA,IACF,CAAC,wBAAwB,4BAA4B;AAAA,EACvD;AAEA,QAAM,4BAA4B;AAAA,IAChC;AAAA,IACA;AAAA,EACF;AACA,QAAM,6BAA6B;AAAA,IACjC;AAAA,IACA;AAAA,EACF;AACA,QAAM,+BAA+B;AAAA,IACnC;AAAA,IACA;AAAA,EACF;AAGA,QAAM;AAAA,IACJ,wBAAwB;AAAA,IACxB,iBAAiB;AAAA,EACnB,IAAI;AAAA,IACF,MAAM;AAAA,IACN,MAAM,MAAM,aAAa,IAAI,KAAK,CAAC;AAAA,EACrC;AAGA,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAS,EAAE;AAE3D,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAiB,EAAE;AAErE,QAAM,cAAc,YAAY,MAAM;AACpC,wBAAoB,EAAE;AACtB,yBAAqB,EAAE;AAAA,EACzB,GAAG,CAAC,CAAC;AAGL,QAAM,0BAA0B;AAAA,IAC9B,MAAM,+BAA+B,yBAAyB;AAAA,IAC9D,CAAC,yBAAyB;AAAA,EAC5B;AAGA,QAAM,CAAC,uBAAuB,wBAAwB,IAAI,SAExD,uBAAuB;AAIzB,QAAM,aAAa,OAAO,QAAQ,uBAAuB,EAAE;AAAA,IACzD,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM;AAAA,EACpB;AACA,MAAI,WAAW,SAAS,GAAG;AACzB,6BAAyB,CAAC,UAAU;AAAA,MAClC,GAAG,OAAO,YAAY,UAAU;AAAA,MAChC,GAAG;AAAA,IACL,EAAE;AAAA,EACJ;AAGA,QAAM,CAAC,kBAAkB,mBAAmB,IAC1C,SAAmB,gBAAgB;AAGrC,QAAM,CAAC,oBAAoB,qBAAqB,IAC9C;AAAA;AAAA,IAEE,MAAM,MAAM,MAAM,MAAM;AAAA,EAC1B;AAGF,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAS,KAAK;AAE5D,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AAEtD,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,IAAI;AAE/D,QAAM,4BAA4B,MAAM;AACtC,yBAAqB,CAAC,SAAS,CAAC,IAAI;AAAA,EACtC;AAEA,QAAM,aAAa,OAAuB,IAAI;AAE9C,YAAU,MAAM;AACd,UAAM,cAAc,WAAW;AAC/B,QAAI,CAAC,aAAa;AAChB;AAAA,IACF;AAEA,UAAM,cAAc,YAAY,QAAwB,iBAAiB;AACzE,QAAI,CAAC,aAAa;AAChB;AAAA,IACF;AAEA,UAAM,WAAW,IAAI,eAAe,CAAC,YAAY;AAC/C,YAAM,SAAS,QAAQ,CAAC,GAAG,aAAa;AACxC,UAAI,UAAU,SAAS,GAAG;AACxB,oBAAY,MAAM,YAAY,IAAI,SAAS,cAAc,MAAM,IAC3D,OAAO,MAAM,eACb,OAAO,MAAM;AACjB,iBAAS,WAAW;AAAA,MACtB;AAAA,IACF,CAAC;AACD,aAAS,QAAQ,WAAW;AAC5B,WAAO,MAAM;AACX,eAAS,WAAW;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,qBACJ,iBAAiB,qBAAqB,kBAAkB,KACxD,oBACA,MAAM,QAAQ;AAChB,QAAM,0BACJ,iBAAiB,oBAAoB,uBAAuB,KAC5D,yBACA,MAAM,QAAQ;AAChB,QAAM,uBACJ,iBAAiB,uBAAuB,oBAAoB,KAC5D,sBACA,MAAM,QAAQ;AAGhB,QAAM,2BAA2B;AAAA,IAC/B,MACE,iBAAiB;AAAA,MACf,CAAC,UAAU,CAAC,yBAAyB,SAAS,KAAK;AAAA,IACrD;AAAA,IACF,CAAC,kBAAkB,wBAAwB;AAAA,EAC7C;AAGA,QAAM,uBAAuB;AAAA,IAC3B,MACE,6BACA,wBAAwB,yBAAyB,qBAAqB;AAAA,IACxE,CAAC,2BAA2B,yBAAyB,qBAAqB;AAAA,EAC5E;AAGA,QAAM,wBACJ,8BACA,yBAAyB,oBAAoB,wBAAwB;AAGvE,QAAM,0BACJ,gCACA;AAAA,IACE;AAAA,MACE,MAAM,sBAAsB,QAAQ,CAAC;AAAA,MACrC,OAAO,sBAAsB,SAAS,CAAC;AAAA,IACzC;AAAA,IACA;AAAA,EACF;AAGF,QAAM,mBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,qBAAqB,OAAO,OAAO,qBAAqB,EAAE;AAAA,IAC9D;AAAA,EACF,EAAE;AACF,QAAM,mBAAmB,OAAO,OAAO,qBAAqB,EAAE;AAC9D,QAAM,oBAAoB,mBAAmB;AAE7C,QAAM,eACJ,eAAe,UAAa,qBAAqB;AAEnD,QAAM,eAAe;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAOA,QAAM,8BAA8B,CAClC,QACA,2BACS;AACT,UAAM,eAAe,OAAO;AAC5B,QAAI,aAAa,WAAW,GAAG;AAC7B,+BAAyB,CAAC,eAAe;AAAA,QACvC,GAAG;AAAA,QACH,CAAC,OAAO,EAAE,GAAG,CAAC;AAAA,MAChB,EAAE;AAAA,IACJ,OAAO;AACL;AAAA,QAAyB,CAAC,cACxB;AAAA,UACE;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAAA,IACF;AACA,uBAAmB,mBAAmB,KAAK;AAC3C,oBAAgB,gBAAgB,KAAK;AAAA,EACvC;AAMA,QAAM,yBAAyB,CAAC,mBAAmC;AACjE,wBAAoB,cAAc;AAClC,uBAAmB,mBAAmB,KAAK;AAAA,EAC7C;AAMA,QAAM,2BAA2B,CAAC,aAAuC;AACvE,0BAAsB,QAAQ;AAC9B,uBAAmB,mBAAmB,KAAK;AAAA,EAC7C;AAEA,QAAM,sBAAsB,MAAM;AAChC,uBAAmB,mBAAmB,KAAK;AAC3C,oBAAgB,gBAAgB,KAAK;AAAA,EACvC;AAEA,QAAM,YAAY,MAAM;AACtB;AAAA,MAAyB,CAAC,cACxB;AAAA,QACE;AAAA;AAAA,QAEA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AACA,wBAAoB;AAAA,EACtB;AAEA,QAAM,YAAY,MAAM;AACtB;AAAA,MAAyB,CAAC,cACxB;AAAA,QACE;AAAA;AAAA,QAEA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AACA,wBAAoB;AAAA,EACtB;AAEA,QAAM,oBACJ,6BAA6B;AAI/B,QAAM,2BACJ,6BAA6B,CAAC;AAGhC,QAAM,6BACJ,qBAAqB,kBAAkB,SAAS;AAGlD,QAAM,iCACJ,6BACA,uBAAuB,KACvB,CAAC;AAEH,QAAM,UAAU,MAAM;AACpB,QAAI,WAAW;AAGf,QAAI,6BAA6B,yBAAyB;AACxD;AAAA,QACE;AAAA,UACE;AAAA,UACA;AAAA,QACF;AAAA,MACF;AACA,iBAAW;AAAA,IACb;AAEA,QAAI,8BAA8B,oBAAoB;AACpD,YAAM,EAAE,uBAAuB,IAAI;AAAA,QACjC,MAAM;AAAA,QACN;AAAA,MACF;AAEA,0BAAoB,sBAAsB;AAC1C,iBAAW;AAAA,IACb;AAEA,QAAI,gCAAgC,sBAAsB;AACxD,4BAAsB;AAAA,QACpB,MAAM,sBAAsB,QAAQ,CAAC;AAAA,QACrC,OAAO,sBAAsB,SAAS,CAAC;AAAA,MACzC,CAAC;AACD,iBAAW;AAAA,IACb;AAIA,gBAAY,mBAAmB,IAAI;AACnC,oBAAgB,gBAAgB,KAAK;AAAA,EACvC;AAEA,QAAM,UAAU,MAAM;AACpB,QAAI,6BAA6B,qBAAqB,GAAG;AACvD,sBAAgB,IAAI;AACpB;AAAA,IACF;AACA,UAAM,oBAAoB,qBAAqB;AAC/C,UAAM,eAAe,wBAAwB;AAC7C,UAAM,iBAAiB,kBAAkB;AACzC,iBAAa;AAAA,EACf;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,KAAK,cAAc,kBAAkB,mBAAmB;AAAA,MAC/D,MAAM;AAAA,MACN;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,gBAAgB;AAAA,QACd,OACE,CAAC,yBACD,CAAC,wBACD,CAAC;AAAA,QACH,OAAO;AAAA,MACT;AAAA,MACA,eAAe;AAAA,MACf,eAAe;AAAA,QACb,OAAO,KAAK;AAAA,UACV,kBAAkB;AAAA,QACpB;AAAA,QACA,QAAQ,KAAK,cAAc,kBAAkB,gBAAgB;AAAA,QAC7D,OAAO,KAAK,cAAc,kBAAkB,eAAe;AAAA,MAC7D;AAAA,MAEA,+BAAC,QAAK,KAAK,YAAY,eAAc,UAAS,KAAK,IAAI,MAAM,GAC3D;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,uBAAuB;AAAA,YACvB;AAAA,YACA,aAAa;AAAA,YACb,qBAAqB;AAAA,YACrB;AAAA,YACA,iBAAiB,qBAAqB;AAAA,YACtC,iBAAiB,qBAAqB;AAAA,YACtC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA,QACC,iCACC,oBAAC,QAAK,MAAM,GAAG,YAAW,UAAS,gBAAe,UAChD;AAAA,UAAC;AAAA;AAAA,YACC,qBAAqB;AAAA;AAAA,QACvB,GACF,IAEA;AAAA,UAAC;AAAA;AAAA,YACC,oBAAoB;AAAA,YACpB,qBAAqB;AAAA,YACrB,uBAAuB;AAAA,YACvB;AAAA,YACA,mBAAmB;AAAA,YACnB;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,cAAc;AAAA,YACd,sBAAsB;AAAA,YACtB,YAAY,iBAAiB;AAAA,YAC7B,eAAe;AAAA;AAAA,QACjB;AAAA,SAEJ;AAAA;AAAA,EACF;AAEJ;AAEA,SAAS,gCACP,OACA,cACoB;AACpB,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,CAAC,wBAAwB,yBAAyB,IACtD,SAAwC;AAG1C,sBAAoB,cAAc,OAAO;AAAA,IACvC,oBAAoB,CAAC,mBAAmD;AACtE,gCAA0B,cAAc;AACxC,mBAAa,IAAI;AAAA,IACnB;AAAA,EACF,EAAE;AAEF,MAAI,WAAW;AACb,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA,cAAc,MAAM,aAAa,KAAK;AAAA;AAAA,IACxC;AAAA,EAEJ;AACA,SAAO;AACT;AAKO,MAAM,+BAA+B;AAAA,EAC1C;AACF;",
   "names": []
 }

package/esm/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsList.css

@@ -1,38 +1,38 @@
-._14dz1ui1-3-10-4 {
-  --_14dz1ui0-3-10-4: 96dvh;
+._14dz1ui1-3-11-0 {
+  --_14dz1ui0-3-11-0: 96dvh;
   overflow: auto;
   position: relative;
 }
-._14dz1ui8-3-10-4 {
+._14dz1ui8-3-11-0 {
   margin-top: 0;
 }
-._14dz1ui9-3-10-4 {
+._14dz1ui9-3-11-0 {
   margin-top: var(--dt-spacings-size-8, 8px);
 }
-._14dz1uia-3-10-4 {
-  max-height: calc(var(--_14dz1ui0-3-10-4) - 146px);
+._14dz1uia-3-11-0 {
+  max-height: calc(var(--_14dz1ui0-3-11-0) - 146px);
 }
-._14dz1uib-3-10-4 {
-  max-height: calc(var(--_14dz1ui0-3-10-4) - 146px - 56px);
+._14dz1uib-3-11-0 {
+  max-height: calc(var(--_14dz1ui0-3-11-0) - 146px - 56px);
 }
-._14dz1uic-3-10-4 {
-  max-height: calc(var(--_14dz1ui0-3-10-4) - 146px - 56px - 28px);
+._14dz1uic-3-11-0 {
+  max-height: calc(var(--_14dz1ui0-3-11-0) - 146px - 56px - 28px);
 }
-._14dz1uid-3-10-4 {
-  max-height: calc(var(--_14dz1ui0-3-10-4) - 146px - 46px);
+._14dz1uid-3-11-0 {
+  max-height: calc(var(--_14dz1ui0-3-11-0) - 146px - 46px);
 }
-._14dz1uie-3-10-4 {
-  max-height: calc(var(--_14dz1ui0-3-10-4) - 146px - 56px - 46px);
+._14dz1uie-3-11-0 {
+  max-height: calc(var(--_14dz1ui0-3-11-0) - 146px - 56px - 46px);
 }
-._14dz1uif-3-10-4 {
-  max-height: calc(var(--_14dz1ui0-3-10-4) - 146px - 56px - 28px - 46px);
+._14dz1uif-3-11-0 {
+  max-height: calc(var(--_14dz1ui0-3-11-0) - 146px - 56px - 28px - 46px);
 }
-._14dz1uig-3-10-4 {
+._14dz1uig-3-11-0 {
   width: 100%;
   position: relative;
 }
 @supports not (height: 1dvh) {
-  ._14dz1ui1-3-10-4 {
-    --_14dz1ui0-3-10-4: 96vh;
+  ._14dz1ui1-3-11-0 {
+    --_14dz1ui0-3-11-0: 96vh;
   }
 }

package/esm/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsList.js

@@ -1,7 +1,8 @@
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import clsx from "clsx";
 import { useCallback, useMemo, useRef } from "react";
+import { useIntl } from "react-intl";
 import {
   generateColumnLabelsMap,
   getVisibilityState,
@@ -17,8 +18,19 @@ import { DataTableColumnsListItem } from "./DataTableColumnsListItem.js";
 import { DataTableColumnsSectionHeader } from "./DataTableColumnsSectionHeader.js";
 import { DataTableNoFilterResultsEmptyState } from "./DataTableNoFilterResultsEmptyState.js";
 import { Grid } from "../../../../../layouts/grid/Grid.js";
+import { screenReaderOnly } from "../../../../../styles/screen-reader-only.sty.js";
 import { useDataTable } from "../../../contexts/DataTableContext.js";
 import { getCanHide } from "../../../features/ColumnVisibility/ColumnVisibility.js";
+import { dataTableMessages } from "../../../messages.js";
+function getFilterResultAnnouncement(listItems, filterValueLength, intl) {
+  if (filterValueLength === 0) {
+    return "";
+  }
+  const count = listItems.filter(
+    (item) => item.itemType === "column" && item.columns.length === 0
+  ).length;
+  return count === 0 ? intl.formatMessage(dataTableMessages.noFilterResultsTitle) : intl.formatMessage(dataTableMessages.filterResultsCount, { count });
+}
 function DataTableColumnsList(props) {
   const {
     visibilitySettings: showVisibilityToggle,
@@ -37,6 +49,7 @@ function DataTableColumnsList(props) {
     hasMessage,
     onClearFilter
   } = props;
+  const intl = useIntl();
   const table = useDataTable();
   const parentRef = useRef(null);
   const allLeafColumnsWithoutBuiltin = table.getAllLeafColumnsWithoutBuiltin();
@@ -210,8 +223,26 @@ function DataTableColumnsList(props) {
     }
   });
   const virtualItems = columnVirtualizer.getVirtualItems();
+  const filterResultAnnouncement = getFilterResultAnnouncement(
+    listItems,
+    activeFilterValue.length,
+    intl
+  );
+  const liveRegion = /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "status",
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      className: screenReaderOnly,
+      children: filterResultAnnouncement
+    }
+  );
   if (listItems.length === 0) {
-    return /* @__PURE__ */ jsx(DataTableNoFilterResultsEmptyState, { onClearSearch: onClearFilter });
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      liveRegion,
+      /* @__PURE__ */ jsx(DataTableNoFilterResultsEmptyState, { onClearSearch: onClearFilter })
+    ] });
   }
   const canOrder = !!table.optionsStore.state.enableColumnOrdering && columnOrderSettings && activeFilterValue.length === 0;
   const columnListItems = virtualItems.map((virtualItem) => {
@@ -281,23 +312,29 @@ function DataTableColumnsList(props) {
           padding: 0,
           gap: 0,
           className: clsx(styles.virtualizationInnerContainer),
-          gridTemplateRows: columnVirtualizer.measurementsCache.map((el) => `${el.size}px`).join(" "),
+          gridTemplateRows: Array.from(
+            columnVirtualizer.measurementsCache,
+            (el) => `${el?.size ?? DATA_TABLE_COLUMNS_LIST_ITEM_MIN_HEIGHT}px`
+          ).join(" "),
           height: columnVirtualizer.getTotalSize() + 1,
           children: columnListItems
         }
       )
     }
   );
-  return canOrder ? /* @__PURE__ */ jsx(
-    ColumnOrderSettingsDragAndDropContext,
-    {
-      localColumnOrder,
-      updateLocalColumnOrder,
-      localColumnPinning,
-      itemVirtualizer: columnVirtualizer,
-      children: columnList
-    }
-  ) : columnList;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    liveRegion,
+    canOrder ? /* @__PURE__ */ jsx(
+      ColumnOrderSettingsDragAndDropContext,
+      {
+        localColumnOrder,
+        updateLocalColumnOrder,
+        localColumnPinning,
+        itemVirtualizer: columnVirtualizer,
+        children: columnList
+      }
+    ) : columnList
+  ] });
 }
 export {
   DataTableColumnsList

package/esm/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsList.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsList.tsx"],
-  "sourcesContent": ["import type {\n  ReactTable,\n  ColumnPinningPosition,\n  ColumnPinningState,\n  Column,\n  RowData,\n  TableFeatures,\n} from '@tanstack/react-table';\nimport { useVirtualizer } from '@tanstack/react-virtual';\nimport clsx from 'clsx';\nimport { type JSX, useCallback, useMemo, useRef } from 'react';\n\nimport type {\n  ColumnListItem,\n  ColumnSettingsListItem,\n} from './column-settings-types.js';\nimport {\n  generateColumnLabelsMap,\n  getVisibilityState,\n  groupColumns,\n  isParentColumnHideable,\n  processFilterValue,\n} from './column-settings-utils.js';\nimport { DATA_TABLE_COLUMNS_LIST_ITEM_MIN_HEIGHT } from './ColumnOrderSettings/column-order-settings-dnd-utils.js';\nimport { ColumnOrderSettingsDragAndDropContext } from './ColumnOrderSettings/ColumnOrderSettingsDragAndDrop.js';\nimport * as styles from './DataTableColumnsList.sty.js';\nimport { columnName } from './DataTableColumnsListItem.sty.js';\nimport { DataTableColumnsListItem } from './DataTableColumnsListItem.js';\nimport { DataTableColumnsSectionHeader } from './DataTableColumnsSectionHeader.js';\nimport { DataTableNoFilterResultsEmptyState } from './DataTableNoFilterResultsEmptyState.js';\nimport { Grid } from '../../../../../layouts/grid/Grid.js';\nimport { useDataTable } from '../../../contexts/DataTableContext.js';\nimport { getCanHide } from '../../../features/ColumnVisibility/ColumnVisibility.js';\nimport type { TDataTableFeatures } from '../../../features/types/features.types.js';\n\ninterface DataTableColumnsListProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> {\n  /**\n   * Whether the visibility settings (toggles) are enabled.\n   */\n  visibilitySettings: boolean;\n  /**\n   * Whether the column order settings (drag and drop) are enabled.\n   */\n  columnOrderSettings: boolean;\n  /**\n   * Whether the column pinning settings (pin/unpin buttons) are enabled.\n   */\n  columnPinningSettings: boolean;\n  /**\n   * Current value of the filter input in the column settings modal.\n   */\n  activeFilterValue: string;\n  /**\n   * Whether hidden columns are shown in the list.\n   * @defaultValue true\n   */\n  listHiddenColumns?: boolean;\n  /**\n   * Current local column visibility state in the column settings modal.\n   */\n  localColumnVisibility: Record<string, boolean>;\n  /**\n   * Updates the local column visibility state in the column settings modal.\n   * @param column - the column to update.\n   * @param currentVisibility - the current visibility state of the column.\n   */\n  updateLocalColumnVisibility: (\n    column: Column<TFeatures, TData>,\n    currentVisibility: boolean | 'indeterminate',\n  ) => void;\n  /**\n   * Current local column order in the column settings modal.\n   */\n  localColumnOrder: string[];\n  /**\n   * Updates the local column order in the column settings modal.\n   * @param newColumnOrder - the new column order.\n   */\n  updateLocalColumnOrder: (newColumnOrder: string[]) => void;\n  /**\n   * Current local column pinning state in the column settings modal.\n   */\n  localColumnPinning: ColumnPinningState;\n  /**\n   * Updates the local column pinning state in the column settings modal.\n   * @param newState - the new column pinning state.\n   */\n  updateLocalColumnPinning: (newState: ColumnPinningState) => void;\n  /**\n   * Whether the filter bar is present in the modal above the list.\n   */\n  hasFilterBar: boolean;\n  /**\n   * Whether the visibility controls (switch + column counter) are shown above the list.\n   */\n  hasVisibilityControl: boolean;\n  /**\n   * Whether a warning or error message is shown in the modal footer.\n   */\n  hasMessage: boolean;\n  /**\n   * Callback to clear the active search filter.\n   */\n  onClearFilter: () => void;\n}\n\n/**\n * Renders the ordered, filtered list of columns for the column settings modal.\n * @internal\n */\nexport function DataTableColumnsList<\n  TFeatures extends TDataTableFeatures,\n  TData extends RowData,\n>(\n  props: Readonly<DataTableColumnsListProps<TFeatures, TData>>,\n): JSX.Element | JSX.Element[] {\n  const {\n    visibilitySettings: showVisibilityToggle,\n    columnOrderSettings,\n    columnPinningSettings,\n    activeFilterValue,\n    listHiddenColumns = true,\n    localColumnVisibility,\n    updateLocalColumnVisibility,\n    localColumnOrder,\n    updateLocalColumnOrder,\n    localColumnPinning,\n    updateLocalColumnPinning,\n    hasFilterBar,\n    hasVisibilityControl,\n    hasMessage,\n    onClearFilter,\n  } = props;\n  const table = useDataTable();\n  const parentRef = useRef<HTMLDivElement | null>(null);\n\n  const allLeafColumnsWithoutBuiltin = table.getAllLeafColumnsWithoutBuiltin();\n  const columnsById = useMemo(\n    () => new Map(allLeafColumnsWithoutBuiltin.map((col) => [col.id, col])),\n    [allLeafColumnsWithoutBuiltin],\n  );\n\n  // Memoize column labels to avoid repeated getColumnLabel calls during filtering\n  const columnLabelsById = useMemo(\n    () => generateColumnLabelsMap(allLeafColumnsWithoutBuiltin),\n    [allLeafColumnsWithoutBuiltin],\n  );\n\n  // Pre-process filter value to lowercase words once\n  const activeFilterWords = useMemo(\n    () => processFilterValue(activeFilterValue),\n    [activeFilterValue],\n  );\n\n  // order the columns using the local column order\n  const compareColumns = useCallback(\n    (a: Column<TFeatures, TData>, b: Column<TFeatures, TData>) => {\n      const idChildColumnA = a.columns.at(0)?.id;\n      const idChildColumnB = b.columns.at(0)?.id;\n      const isBChildOfA = !!a.columns.find((childCol) => childCol.id === b.id);\n      const isAChildOfB = !!b.columns.find((childCol) => childCol.id === a.id);\n\n      if (isBChildOfA) {\n        return -1;\n      } else if (isAChildOfB) {\n        return 1;\n      }\n\n      return (\n        localColumnOrder.indexOf(idChildColumnA ?? a.id) -\n        localColumnOrder.indexOf(idChildColumnB ?? b.id)\n      );\n    },\n    [localColumnOrder],\n  );\n\n  // filter the flat columns using the active filter value specified in the search bar\n  const filterColumns = useCallback(\n    (\n      column: ColumnListItem<TFeatures, TData>,\n      _: number,\n      columnSection: ColumnListItem<TFeatures, TData>[],\n    ): boolean => {\n      // When listHiddenColumns is false, exclude hidden columns from the list.\n      if (!listHiddenColumns) {\n        const childCols = column.columns;\n        if (childCols.length === 0) {\n          if (!localColumnVisibility[column.id]) {\n            return false;\n          }\n        } else {\n          // Group column: hide if all children are hidden\n          const hasVisibleChild = childCols.some(\n            (c) => localColumnVisibility[c.id],\n          );\n          if (!hasVisibleChild) {\n            return false;\n          }\n        }\n      }\n\n      // Early return if no text filter\n      if (activeFilterWords.length === 0) {\n        return true;\n      }\n\n      // Helper function to check if a column matches the filter words\n      const matchesFilter = (columnId: string): boolean => {\n        const columnLabel = columnLabelsById.get(columnId) ?? '';\n        return activeFilterWords.every((word) => columnLabel.includes(word));\n      };\n\n      // a column always matches on its own label, regardless of nesting\n      if (matchesFilter(column.id)) {\n        return true;\n      }\n\n      const childColumns = column.columns;\n      if (childColumns.length === 0) {\n        // leaf column: also match its parent group label\n        // so the children stay visible when the parent group name is searched.\n        return column.parent !== undefined && matchesFilter(column.parent.id);\n      }\n\n      // parent (grouped) column: match any of its children\n      // within the current (un)pinned section.\n      return childColumns\n        .filter((child) => columnSection.find((col) => col.id === child.id))\n        .some((childColumn) => matchesFilter(childColumn.id));\n    },\n    [\n      activeFilterWords,\n      columnLabelsById,\n      listHiddenColumns,\n      localColumnVisibility,\n    ],\n  );\n\n  const mapToListItem = (\n    col: Column<TFeatures, TData>,\n    idx: number,\n    pinnedPosition: ColumnPinningPosition,\n  ): ColumnListItem<TFeatures, TData> & { itemType: 'column' } => ({\n    ...col,\n    key: `${col.id}_${idx}_${pinnedPosition}`, // unique React key; parent columns may appear multiple times in list\n    pinned: pinnedPosition,\n    itemType: 'column',\n  });\n\n  const orderedLeftFlatColumns: ColumnListItem<TFeatures, TData>[] =\n    useMemo(() => {\n      // map column IDs to columns\n      const localColumnsPinned =\n        localColumnPinning.left\n          ?.map((id) => columnsById.get(id))\n          .filter((column) => !!column) ?? [];\n\n      // group nested columns\n      const groupedColumns = groupColumns(localColumnsPinned);\n\n      // add unique key\n      return groupedColumns.map((col, idx) => mapToListItem(col, idx, 'left'));\n    }, [columnsById, localColumnPinning.left]);\n\n  const orderedCenterFlatColumns: ColumnListItem<TFeatures, TData>[] =\n    useMemo(() => {\n      // find unpinned columns\n      const localColumnsUnpinned = allLeafColumnsWithoutBuiltin.filter(\n        (column) =>\n          !localColumnPinning.left?.includes(column.id) &&\n          !localColumnPinning.right?.includes(column.id),\n      );\n\n      // group nested columns\n      const groupedColumns = groupColumns(localColumnsUnpinned);\n\n      // order columns and add unique key\n      return groupedColumns\n        .toSorted(compareColumns)\n        .map((col, idx) => mapToListItem(col, idx, false));\n    }, [\n      allLeafColumnsWithoutBuiltin,\n      compareColumns,\n      localColumnPinning.left,\n      localColumnPinning.right,\n    ]);\n\n  const orderedRightFlatColumns: ColumnListItem<TFeatures, TData>[] =\n    useMemo(() => {\n      // map column IDs to columns\n      const localColumnsPinned =\n        localColumnPinning.right\n          ?.map((id) => columnsById.get(id))\n          .filter((column) => !!column) ?? [];\n\n      // group nested columns\n      const groupedColumns = groupColumns(localColumnsPinned);\n\n      // add unique key\n      return groupedColumns.map((col, idx) => mapToListItem(col, idx, 'right'));\n    }, [columnsById, localColumnPinning.right]);\n\n  const orderedFlatColumns = {\n    left: orderedLeftFlatColumns,\n    center: orderedCenterFlatColumns,\n    right: orderedRightFlatColumns,\n  };\n\n  const showColumnPinningButton =\n    !!table.optionsStore.state.enableColumnPinning && columnPinningSettings;\n\n  // Section headers are only meaningful when pinning is available and at least\n  // one column is actually pinned; otherwise the list is a single ungrouped section.\n  const showSectionHeaders =\n    showColumnPinningButton &&\n    (orderedLeftFlatColumns.length > 0 || orderedRightFlatColumns.length > 0);\n\n  // Flat, virtualized list of items: each section's columns, optionally preceded\n  // by a section header. Empty sections (e.g. filtered out) are skipped.\n  const listItems = useMemo<ColumnSettingsListItem<TFeatures, TData>[]>(() => {\n    const sections: {\n      position: ColumnPinningPosition;\n      columns: ColumnListItem<TFeatures, TData>[];\n    }[] = [\n      {\n        position: 'left',\n        columns: orderedLeftFlatColumns.filter(filterColumns),\n      },\n      {\n        position: 'right',\n        columns: orderedRightFlatColumns.filter(filterColumns),\n      },\n      {\n        position: false, // = center\n        columns: orderedCenterFlatColumns.filter(filterColumns),\n      },\n    ];\n\n    const items: ColumnSettingsListItem<TFeatures, TData>[] = [];\n    for (const section of sections) {\n      if (section.columns.length === 0) {\n        continue;\n      }\n      if (showSectionHeaders) {\n        items.push({\n          itemType: 'sectionHeader',\n          position: section.position,\n          key: `__section_header_${section.position}`,\n        });\n      }\n      items.push(\n        ...(section.columns as ColumnSettingsListItem<TFeatures, TData>[]),\n      );\n    }\n    return items;\n  }, [\n    filterColumns,\n    orderedCenterFlatColumns,\n    orderedLeftFlatColumns,\n    orderedRightFlatColumns,\n    showSectionHeaders,\n  ]);\n\n  const getItemKey = useCallback(\n    (index: number) => listItems[index].key,\n    [listItems],\n  );\n\n  const columnVirtualizer = useVirtualizer({\n    count: listItems.length,\n    overscan: 5,\n    getScrollElement: () => parentRef.current,\n    getItemKey,\n    // Approximate height of a column list item\n    estimateSize: () => DATA_TABLE_COLUMNS_LIST_ITEM_MIN_HEIGHT,\n    measureElement: (element) => {\n      if (!element || !(element instanceof HTMLElement)) {\n        return DATA_TABLE_COLUMNS_LIST_ITEM_MIN_HEIGHT;\n      }\n\n      const labelElement = element.querySelector(`.${columnName}`);\n      if (!labelElement) {\n        // section headers (and any non-column items) are measured by their own height\n        return (\n          element.getBoundingClientRect().height ||\n          DATA_TABLE_COLUMNS_LIST_ITEM_MIN_HEIGHT\n        );\n      }\n\n      const computedStyle = getComputedStyle(element);\n      const borderTop = parseFloat(computedStyle.borderTopWidth);\n      const borderBottom = parseFloat(computedStyle.borderBottomWidth);\n\n      return (\n        labelElement.getBoundingClientRect().height +\n        2 * 4 + // padding top and bottom\n        borderTop +\n        borderBottom\n      );\n    },\n  });\n\n  const virtualItems = columnVirtualizer.getVirtualItems();\n\n  // fallback if no columns match the filter\n  if (listItems.length === 0) {\n    return <DataTableNoFilterResultsEmptyState onClearSearch={onClearFilter} />;\n  }\n\n  const canOrder =\n    !!table.optionsStore.state.enableColumnOrdering &&\n    columnOrderSettings &&\n    activeFilterValue.length === 0;\n\n  const columnListItems = virtualItems.map((virtualItem) => {\n    const column = listItems[virtualItem.index];\n\n    if (column.itemType === 'sectionHeader') {\n      return (\n        <DataTableColumnsSectionHeader\n          key={column.key}\n          position={column.position}\n          virtualIndex={virtualItem.index}\n          measureElement={columnVirtualizer.measureElement}\n        />\n      );\n    }\n\n    const columnKey = column.key;\n    const nextItem = listItems[virtualItem.index + 1];\n    const isLastInSection =\n      nextItem === undefined || nextItem.itemType === 'sectionHeader';\n    const canHide = getCanHide<TFeatures, TData>(\n      // Need to cast this one here in order to make sure that it allows\n      // instanciating with the same Subtype of RowData\n      table as unknown as ReactTable<TFeatures, TData>,\n      column,\n      isParentColumnHideable,\n    );\n    const visibilityState = getVisibilityState(localColumnVisibility, column);\n    const showColumnOrderDragHandle = canOrder && column.pinned === false;\n\n    return (\n      <DataTableColumnsListItem\n        key={columnKey}\n        column={column}\n        columnIndex={localColumnOrder.indexOf(column.id)}\n        filterWords={activeFilterWords}\n        orderedFlatColumns={orderedFlatColumns}\n        showVisibilityToggle={showVisibilityToggle}\n        enableVisibilityToggle={canHide}\n        currentVisibilityState={visibilityState}\n        onVisibilityChange={updateLocalColumnVisibility}\n        showColumnOrderDragHandle={showColumnOrderDragHandle}\n        showColumnPinningMenu={showColumnPinningButton}\n        localColumnPinning={localColumnPinning}\n        updateLocalColumnPinning={updateLocalColumnPinning}\n        isLastInSection={isLastInSection}\n        virtualIndex={virtualItem.index}\n        measureElement={columnVirtualizer.measureElement}\n      />\n    );\n  });\n\n  const columnList = (\n    <div\n      ref={parentRef}\n      className={clsx(\n        'strato-table-settings-virtualization-container',\n        styles.virtualizationScrollContainer({\n          hasFilter: hasFilterBar,\n          hasVisibilityControl,\n          hasMessage,\n          hasPinnedColumns: listItems[0].itemType === 'sectionHeader',\n        }),\n      )}\n    >\n      <Grid\n        gridTemplateColumns=\"1fr\"\n        padding={0}\n        gap={0}\n        className={clsx(styles.virtualizationInnerContainer)}\n        gridTemplateRows={columnVirtualizer.measurementsCache\n          .map((el) => `${el.size}px`)\n          .join(' ')}\n        // add 1px to prevent unwanted scrollbar during drag and drop\n        height={columnVirtualizer.getTotalSize() + 1}\n      >\n        {columnListItems}\n      </Grid>\n    </div>\n  );\n\n  return canOrder ? (\n    <ColumnOrderSettingsDragAndDropContext\n      localColumnOrder={localColumnOrder}\n      updateLocalColumnOrder={updateLocalColumnOrder}\n      localColumnPinning={localColumnPinning}\n      itemVirtualizer={columnVirtualizer}\n    >\n      {columnList}\n    </ColumnOrderSettingsDragAndDropContext>\n  ) : (\n    columnList\n  );\n}\n"],
-  "mappings": "AAyZW;AAjZX,SAAS,sBAAsB;AAC/B,OAAO,UAAU;AACjB,SAAmB,aAAa,SAAS,cAAc;AAMvD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,+CAA+C;AACxD,SAAS,6CAA6C;AACtD,YAAY,YAAY;AACxB,SAAS,kBAAkB;AAC3B,SAAS,gCAAgC;AACzC,SAAS,qCAAqC;AAC9C,SAAS,0CAA0C;AACnD,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAiFpB,SAAS,qBAId,OAC6B;AAC7B,QAAM;AAAA,IACJ,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,QAAQ,aAAa;AAC3B,QAAM,YAAY,OAA8B,IAAI;AAEpD,QAAM,+BAA+B,MAAM,gCAAgC;AAC3E,QAAM,cAAc;AAAA,IAClB,MAAM,IAAI,IAAI,6BAA6B,IAAI,CAAC,QAAQ,CAAC,IAAI,IAAI,GAAG,CAAC,CAAC;AAAA,IACtE,CAAC,4BAA4B;AAAA,EAC/B;AAGA,QAAM,mBAAmB;AAAA,IACvB,MAAM,wBAAwB,4BAA4B;AAAA,IAC1D,CAAC,4BAA4B;AAAA,EAC/B;AAGA,QAAM,oBAAoB;AAAA,IACxB,MAAM,mBAAmB,iBAAiB;AAAA,IAC1C,CAAC,iBAAiB;AAAA,EACpB;AAGA,QAAM,iBAAiB;AAAA,IACrB,CAAC,GAA6B,MAAgC;AAC5D,YAAM,iBAAiB,EAAE,QAAQ,GAAG,CAAC,GAAG;AACxC,YAAM,iBAAiB,EAAE,QAAQ,GAAG,CAAC,GAAG;AACxC,YAAM,cAAc,CAAC,CAAC,EAAE,QAAQ,KAAK,CAAC,aAAa,SAAS,OAAO,EAAE,EAAE;AACvE,YAAM,cAAc,CAAC,CAAC,EAAE,QAAQ,KAAK,CAAC,aAAa,SAAS,OAAO,EAAE,EAAE;AAEvE,UAAI,aAAa;AACf,eAAO;AAAA,MACT,WAAW,aAAa;AACtB,eAAO;AAAA,MACT;AAEA,aACE,iBAAiB,QAAQ,kBAAkB,EAAE,EAAE,IAC/C,iBAAiB,QAAQ,kBAAkB,EAAE,EAAE;AAAA,IAEnD;AAAA,IACA,CAAC,gBAAgB;AAAA,EACnB;AAGA,QAAM,gBAAgB;AAAA,IACpB,CACE,QACA,GACA,kBACY;AAEZ,UAAI,CAAC,mBAAmB;AACtB,cAAM,YAAY,OAAO;AACzB,YAAI,UAAU,WAAW,GAAG;AAC1B,cAAI,CAAC,sBAAsB,OAAO,EAAE,GAAG;AACrC,mBAAO;AAAA,UACT;AAAA,QACF,OAAO;AAEL,gBAAM,kBAAkB,UAAU;AAAA,YAChC,CAAC,MAAM,sBAAsB,EAAE,EAAE;AAAA,UACnC;AACA,cAAI,CAAC,iBAAiB;AACpB,mBAAO;AAAA,UACT;AAAA,QACF;AAAA,MACF;AAGA,UAAI,kBAAkB,WAAW,GAAG;AAClC,eAAO;AAAA,MACT;AAGA,YAAM,gBAAgB,CAAC,aAA8B;AACnD,cAAM,cAAc,iBAAiB,IAAI,QAAQ,KAAK;AACtD,eAAO,kBAAkB,MAAM,CAAC,SAAS,YAAY,SAAS,IAAI,CAAC;AAAA,MACrE;AAGA,UAAI,cAAc,OAAO,EAAE,GAAG;AAC5B,eAAO;AAAA,MACT;AAEA,YAAM,eAAe,OAAO;AAC5B,UAAI,aAAa,WAAW,GAAG;AAG7B,eAAO,OAAO,WAAW,UAAa,cAAc,OAAO,OAAO,EAAE;AAAA,MACtE;AAIA,aAAO,aACJ,OAAO,CAAC,UAAU,cAAc,KAAK,CAAC,QAAQ,IAAI,OAAO,MAAM,EAAE,CAAC,EAClE,KAAK,CAAC,gBAAgB,cAAc,YAAY,EAAE,CAAC;AAAA,IACxD;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,gBAAgB,CACpB,KACA,KACA,oBAC+D;AAAA,IAC/D,GAAG;AAAA,IACH,KAAK,GAAG,IAAI,EAAE,IAAI,GAAG,IAAI,cAAc;AAAA;AAAA,IACvC,QAAQ;AAAA,IACR,UAAU;AAAA,EACZ;AAEA,QAAM,yBACJ,QAAQ,MAAM;AAEZ,UAAM,qBACJ,mBAAmB,MACf,IAAI,CAAC,OAAO,YAAY,IAAI,EAAE,CAAC,EAChC,OAAO,CAAC,WAAW,CAAC,CAAC,MAAM,KAAK,CAAC;AAGtC,UAAM,iBAAiB,aAAa,kBAAkB;AAGtD,WAAO,eAAe,IAAI,CAAC,KAAK,QAAQ,cAAc,KAAK,KAAK,MAAM,CAAC;AAAA,EACzE,GAAG,CAAC,aAAa,mBAAmB,IAAI,CAAC;AAE3C,QAAM,2BACJ,QAAQ,MAAM;AAEZ,UAAM,uBAAuB,6BAA6B;AAAA,MACxD,CAAC,WACC,CAAC,mBAAmB,MAAM,SAAS,OAAO,EAAE,KAC5C,CAAC,mBAAmB,OAAO,SAAS,OAAO,EAAE;AAAA,IACjD;AAGA,UAAM,iBAAiB,aAAa,oBAAoB;AAGxD,WAAO,eACJ,SAAS,cAAc,EACvB,IAAI,CAAC,KAAK,QAAQ,cAAc,KAAK,KAAK,KAAK,CAAC;AAAA,EACrD,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB,mBAAmB;AAAA,EACrB,CAAC;AAEH,QAAM,0BACJ,QAAQ,MAAM;AAEZ,UAAM,qBACJ,mBAAmB,OACf,IAAI,CAAC,OAAO,YAAY,IAAI,EAAE,CAAC,EAChC,OAAO,CAAC,WAAW,CAAC,CAAC,MAAM,KAAK,CAAC;AAGtC,UAAM,iBAAiB,aAAa,kBAAkB;AAGtD,WAAO,eAAe,IAAI,CAAC,KAAK,QAAQ,cAAc,KAAK,KAAK,OAAO,CAAC;AAAA,EAC1E,GAAG,CAAC,aAAa,mBAAmB,KAAK,CAAC;AAE5C,QAAM,qBAAqB;AAAA,IACzB,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAEA,QAAM,0BACJ,CAAC,CAAC,MAAM,aAAa,MAAM,uBAAuB;AAIpD,QAAM,qBACJ,4BACC,uBAAuB,SAAS,KAAK,wBAAwB,SAAS;AAIzE,QAAM,YAAY,QAAoD,MAAM;AAC1E,UAAM,WAGA;AAAA,MACJ;AAAA,QACE,UAAU;AAAA,QACV,SAAS,uBAAuB,OAAO,aAAa;AAAA,MACtD;AAAA,MACA;AAAA,QACE,UAAU;AAAA,QACV,SAAS,wBAAwB,OAAO,aAAa;AAAA,MACvD;AAAA,MACA;AAAA,QACE,UAAU;AAAA;AAAA,QACV,SAAS,yBAAyB,OAAO,aAAa;AAAA,MACxD;AAAA,IACF;AAEA,UAAM,QAAoD,CAAC;AAC3D,eAAW,WAAW,UAAU;AAC9B,UAAI,QAAQ,QAAQ,WAAW,GAAG;AAChC;AAAA,MACF;AACA,UAAI,oBAAoB;AACtB,cAAM,KAAK;AAAA,UACT,UAAU;AAAA,UACV,UAAU,QAAQ;AAAA,UAClB,KAAK,oBAAoB,QAAQ,QAAQ;AAAA,QAC3C,CAAC;AAAA,MACH;AACA,YAAM;AAAA,QACJ,GAAI,QAAQ;AAAA,MACd;AAAA,IACF;AACA,WAAO;AAAA,EACT,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,aAAa;AAAA,IACjB,CAAC,UAAkB,UAAU,KAAK,EAAE;AAAA,IACpC,CAAC,SAAS;AAAA,EACZ;AAEA,QAAM,oBAAoB,eAAe;AAAA,IACvC,OAAO,UAAU;AAAA,IACjB,UAAU;AAAA,IACV,kBAAkB,MAAM,UAAU;AAAA,IAClC;AAAA;AAAA,IAEA,cAAc,MAAM;AAAA,IACpB,gBAAgB,CAAC,YAAY;AAC3B,UAAI,CAAC,WAAW,EAAE,mBAAmB,cAAc;AACjD,eAAO;AAAA,MACT;AAEA,YAAM,eAAe,QAAQ,cAAc,IAAI,UAAU,EAAE;AAC3D,UAAI,CAAC,cAAc;AAEjB,eACE,QAAQ,sBAAsB,EAAE,UAChC;AAAA,MAEJ;AAEA,YAAM,gBAAgB,iBAAiB,OAAO;AAC9C,YAAM,YAAY,WAAW,cAAc,cAAc;AACzD,YAAM,eAAe,WAAW,cAAc,iBAAiB;AAE/D,aACE,aAAa,sBAAsB,EAAE,SACrC,IAAI;AAAA,MACJ,YACA;AAAA,IAEJ;AAAA,EACF,CAAC;AAED,QAAM,eAAe,kBAAkB,gBAAgB;AAGvD,MAAI,UAAU,WAAW,GAAG;AAC1B,WAAO,oBAAC,sCAAmC,eAAe,eAAe;AAAA,EAC3E;AAEA,QAAM,WACJ,CAAC,CAAC,MAAM,aAAa,MAAM,wBAC3B,uBACA,kBAAkB,WAAW;AAE/B,QAAM,kBAAkB,aAAa,IAAI,CAAC,gBAAgB;AACxD,UAAM,SAAS,UAAU,YAAY,KAAK;AAE1C,QAAI,OAAO,aAAa,iBAAiB;AACvC,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,UAAU,OAAO;AAAA,UACjB,cAAc,YAAY;AAAA,UAC1B,gBAAgB,kBAAkB;AAAA;AAAA,QAH7B,OAAO;AAAA,MAId;AAAA,IAEJ;AAEA,UAAM,YAAY,OAAO;AACzB,UAAM,WAAW,UAAU,YAAY,QAAQ,CAAC;AAChD,UAAM,kBACJ,aAAa,UAAa,SAAS,aAAa;AAClD,UAAM,UAAU;AAAA;AAAA;AAAA,MAGd;AAAA,MACA;AAAA,MACA;AAAA,IACF;AACA,UAAM,kBAAkB,mBAAmB,uBAAuB,MAAM;AACxE,UAAM,4BAA4B,YAAY,OAAO,WAAW;AAEhE,WACE;AAAA,MAAC;AAAA;AAAA,QAEC;AAAA,QACA,aAAa,iBAAiB,QAAQ,OAAO,EAAE;AAAA,QAC/C,aAAa;AAAA,QACb;AAAA,QACA;AAAA,QACA,wBAAwB;AAAA,QACxB,wBAAwB;AAAA,QACxB,oBAAoB;AAAA,QACpB;AAAA,QACA,uBAAuB;AAAA,QACvB;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAc,YAAY;AAAA,QAC1B,gBAAgB,kBAAkB;AAAA;AAAA,MAf7B;AAAA,IAgBP;AAAA,EAEJ,CAAC;AAED,QAAM,aACJ;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW;AAAA,QACT;AAAA,QACA,OAAO,8BAA8B;AAAA,UACnC,WAAW;AAAA,UACX;AAAA,UACA;AAAA,UACA,kBAAkB,UAAU,CAAC,EAAE,aAAa;AAAA,QAC9C,CAAC;AAAA,MACH;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,qBAAoB;AAAA,UACpB,SAAS;AAAA,UACT,KAAK;AAAA,UACL,WAAW,KAAK,OAAO,4BAA4B;AAAA,UACnD,kBAAkB,kBAAkB,kBACjC,IAAI,CAAC,OAAO,GAAG,GAAG,IAAI,IAAI,EAC1B,KAAK,GAAG;AAAA,UAEX,QAAQ,kBAAkB,aAAa,IAAI;AAAA,UAE1C;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAGF,SAAO,WACL;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,iBAAiB;AAAA,MAEhB;AAAA;AAAA,EACH,IAEA;AAEJ;",
+  "sourcesContent": ["import type {\n  ReactTable,\n  ColumnPinningPosition,\n  ColumnPinningState,\n  Column,\n  RowData,\n  TableFeatures,\n} from '@tanstack/react-table';\nimport { useVirtualizer } from '@tanstack/react-virtual';\nimport clsx from 'clsx';\nimport { type JSX, useCallback, useMemo, useRef } from 'react';\nimport { useIntl, type IntlShape } from 'react-intl';\n\nimport type {\n  ColumnListItem,\n  ColumnSettingsListItem,\n} from './column-settings-types.js';\nimport {\n  generateColumnLabelsMap,\n  getVisibilityState,\n  groupColumns,\n  isParentColumnHideable,\n  processFilterValue,\n} from './column-settings-utils.js';\nimport { DATA_TABLE_COLUMNS_LIST_ITEM_MIN_HEIGHT } from './ColumnOrderSettings/column-order-settings-dnd-utils.js';\nimport { ColumnOrderSettingsDragAndDropContext } from './ColumnOrderSettings/ColumnOrderSettingsDragAndDrop.js';\nimport * as styles from './DataTableColumnsList.sty.js';\nimport { columnName } from './DataTableColumnsListItem.sty.js';\nimport { DataTableColumnsListItem } from './DataTableColumnsListItem.js';\nimport { DataTableColumnsSectionHeader } from './DataTableColumnsSectionHeader.js';\nimport { DataTableNoFilterResultsEmptyState } from './DataTableNoFilterResultsEmptyState.js';\nimport { Grid } from '../../../../../layouts/grid/Grid.js';\nimport { screenReaderOnly } from '../../../../../styles/screen-reader-only.sty.js';\nimport { useDataTable } from '../../../contexts/DataTableContext.js';\nimport { getCanHide } from '../../../features/ColumnVisibility/ColumnVisibility.js';\nimport type { TDataTableFeatures } from '../../../features/types/features.types.js';\nimport { dataTableMessages } from '../../../messages.js';\n\ninterface DataTableColumnsListProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> {\n  /**\n   * Whether the visibility settings (toggles) are enabled.\n   */\n  visibilitySettings: boolean;\n  /**\n   * Whether the column order settings (drag and drop) are enabled.\n   */\n  columnOrderSettings: boolean;\n  /**\n   * Whether the column pinning settings (pin/unpin buttons) are enabled.\n   */\n  columnPinningSettings: boolean;\n  /**\n   * Current value of the filter input in the column settings modal.\n   */\n  activeFilterValue: string;\n  /**\n   * Whether hidden columns are shown in the list.\n   * @defaultValue true\n   */\n  listHiddenColumns?: boolean;\n  /**\n   * Current local column visibility state in the column settings modal.\n   */\n  localColumnVisibility: Record<string, boolean>;\n  /**\n   * Updates the local column visibility state in the column settings modal.\n   * @param column - the column to update.\n   * @param currentVisibility - the current visibility state of the column.\n   */\n  updateLocalColumnVisibility: (\n    column: Column<TFeatures, TData>,\n    currentVisibility: boolean | 'indeterminate',\n  ) => void;\n  /**\n   * Current local column order in the column settings modal.\n   */\n  localColumnOrder: string[];\n  /**\n   * Updates the local column order in the column settings modal.\n   * @param newColumnOrder - the new column order.\n   */\n  updateLocalColumnOrder: (newColumnOrder: string[]) => void;\n  /**\n   * Current local column pinning state in the column settings modal.\n   */\n  localColumnPinning: ColumnPinningState;\n  /**\n   * Updates the local column pinning state in the column settings modal.\n   * @param newState - the new column pinning state.\n   */\n  updateLocalColumnPinning: (newState: ColumnPinningState) => void;\n  /**\n   * Whether the filter bar is present in the modal above the list.\n   */\n  hasFilterBar: boolean;\n  /**\n   * Whether the visibility controls (switch + column counter) are shown above the list.\n   */\n  hasVisibilityControl: boolean;\n  /**\n   * Whether a warning or error message is shown in the modal footer.\n   */\n  hasMessage: boolean;\n  /**\n   * Callback to clear the active search filter.\n   */\n  onClearFilter: () => void;\n}\n\n/**\n * Builds the screen-reader announcement for the current search outcome.\n * Reports the number of leaf columns matching the current filter value.\n * Nothing is announced when no filter is active.\n * @param listItems - the current list items shown in the column settings panel.\n * @param filterValueLength - length of the active filter string; 0 means no filter is active.\n * @returns the live-region message\n */\nfunction getFilterResultAnnouncement<\n  TFeatures extends TDataTableFeatures,\n  TData extends RowData,\n>(\n  listItems: ColumnSettingsListItem<TFeatures, TData>[],\n  filterValueLength: number,\n  intl: IntlShape,\n): string {\n  if (filterValueLength === 0) {\n    return '';\n  }\n\n  const count = listItems.filter(\n    (item) => item.itemType === 'column' && item.columns.length === 0,\n  ).length;\n\n  return count === 0\n    ? intl.formatMessage(dataTableMessages.noFilterResultsTitle)\n    : intl.formatMessage(dataTableMessages.filterResultsCount, { count });\n}\n\n/**\n * Renders the ordered, filtered list of columns for the column settings modal.\n * @internal\n */\nexport function DataTableColumnsList<\n  TFeatures extends TDataTableFeatures,\n  TData extends RowData,\n>(\n  props: Readonly<DataTableColumnsListProps<TFeatures, TData>>,\n): JSX.Element | JSX.Element[] {\n  const {\n    visibilitySettings: showVisibilityToggle,\n    columnOrderSettings,\n    columnPinningSettings,\n    activeFilterValue,\n    listHiddenColumns = true,\n    localColumnVisibility,\n    updateLocalColumnVisibility,\n    localColumnOrder,\n    updateLocalColumnOrder,\n    localColumnPinning,\n    updateLocalColumnPinning,\n    hasFilterBar,\n    hasVisibilityControl,\n    hasMessage,\n    onClearFilter,\n  } = props;\n  const intl = useIntl();\n  const table = useDataTable();\n  const parentRef = useRef<HTMLDivElement | null>(null);\n\n  const allLeafColumnsWithoutBuiltin = table.getAllLeafColumnsWithoutBuiltin();\n  const columnsById = useMemo(\n    () => new Map(allLeafColumnsWithoutBuiltin.map((col) => [col.id, col])),\n    [allLeafColumnsWithoutBuiltin],\n  );\n\n  // Memoize column labels to avoid repeated getColumnLabel calls during filtering\n  const columnLabelsById = useMemo(\n    () => generateColumnLabelsMap(allLeafColumnsWithoutBuiltin),\n    [allLeafColumnsWithoutBuiltin],\n  );\n\n  // Pre-process filter value to lowercase words once\n  const activeFilterWords = useMemo(\n    () => processFilterValue(activeFilterValue),\n    [activeFilterValue],\n  );\n\n  // order the columns using the local column order\n  const compareColumns = useCallback(\n    (a: Column<TFeatures, TData>, b: Column<TFeatures, TData>) => {\n      const idChildColumnA = a.columns.at(0)?.id;\n      const idChildColumnB = b.columns.at(0)?.id;\n      const isBChildOfA = !!a.columns.find((childCol) => childCol.id === b.id);\n      const isAChildOfB = !!b.columns.find((childCol) => childCol.id === a.id);\n\n      if (isBChildOfA) {\n        return -1;\n      } else if (isAChildOfB) {\n        return 1;\n      }\n\n      return (\n        localColumnOrder.indexOf(idChildColumnA ?? a.id) -\n        localColumnOrder.indexOf(idChildColumnB ?? b.id)\n      );\n    },\n    [localColumnOrder],\n  );\n\n  // filter the flat columns using the active filter value specified in the search bar\n  const filterColumns = useCallback(\n    (\n      column: ColumnListItem<TFeatures, TData>,\n      _: number,\n      columnSection: ColumnListItem<TFeatures, TData>[],\n    ): boolean => {\n      // When listHiddenColumns is false, exclude hidden columns from the list.\n      if (!listHiddenColumns) {\n        const childCols = column.columns;\n        if (childCols.length === 0) {\n          if (!localColumnVisibility[column.id]) {\n            return false;\n          }\n        } else {\n          // Group column: hide if all children are hidden\n          const hasVisibleChild = childCols.some(\n            (c) => localColumnVisibility[c.id],\n          );\n          if (!hasVisibleChild) {\n            return false;\n          }\n        }\n      }\n\n      // Early return if no text filter\n      if (activeFilterWords.length === 0) {\n        return true;\n      }\n\n      // Helper function to check if a column matches the filter words\n      const matchesFilter = (columnId: string): boolean => {\n        const columnLabel = columnLabelsById.get(columnId) ?? '';\n        return activeFilterWords.every((word) => columnLabel.includes(word));\n      };\n\n      // a column always matches on its own label, regardless of nesting\n      if (matchesFilter(column.id)) {\n        return true;\n      }\n\n      const childColumns = column.columns;\n      if (childColumns.length === 0) {\n        // leaf column: also match its parent group label\n        // so the children stay visible when the parent group name is searched.\n        return column.parent !== undefined && matchesFilter(column.parent.id);\n      }\n\n      // parent (grouped) column: match any of its children\n      // within the current (un)pinned section.\n      return childColumns\n        .filter((child) => columnSection.find((col) => col.id === child.id))\n        .some((childColumn) => matchesFilter(childColumn.id));\n    },\n    [\n      activeFilterWords,\n      columnLabelsById,\n      listHiddenColumns,\n      localColumnVisibility,\n    ],\n  );\n\n  const mapToListItem = (\n    col: Column<TFeatures, TData>,\n    idx: number,\n    pinnedPosition: ColumnPinningPosition,\n  ): ColumnListItem<TFeatures, TData> & { itemType: 'column' } => ({\n    ...col,\n    key: `${col.id}_${idx}_${pinnedPosition}`, // unique React key; parent columns may appear multiple times in list\n    pinned: pinnedPosition,\n    itemType: 'column',\n  });\n\n  const orderedLeftFlatColumns: ColumnListItem<TFeatures, TData>[] =\n    useMemo(() => {\n      // map column IDs to columns\n      const localColumnsPinned =\n        localColumnPinning.left\n          ?.map((id) => columnsById.get(id))\n          .filter((column) => !!column) ?? [];\n\n      // group nested columns\n      const groupedColumns = groupColumns(localColumnsPinned);\n\n      // add unique key\n      return groupedColumns.map((col, idx) => mapToListItem(col, idx, 'left'));\n    }, [columnsById, localColumnPinning.left]);\n\n  const orderedCenterFlatColumns: ColumnListItem<TFeatures, TData>[] =\n    useMemo(() => {\n      // find unpinned columns\n      const localColumnsUnpinned = allLeafColumnsWithoutBuiltin.filter(\n        (column) =>\n          !localColumnPinning.left?.includes(column.id) &&\n          !localColumnPinning.right?.includes(column.id),\n      );\n\n      // group nested columns\n      const groupedColumns = groupColumns(localColumnsUnpinned);\n\n      // order columns and add unique key\n      return groupedColumns\n        .toSorted(compareColumns)\n        .map((col, idx) => mapToListItem(col, idx, false));\n    }, [\n      allLeafColumnsWithoutBuiltin,\n      compareColumns,\n      localColumnPinning.left,\n      localColumnPinning.right,\n    ]);\n\n  const orderedRightFlatColumns: ColumnListItem<TFeatures, TData>[] =\n    useMemo(() => {\n      // map column IDs to columns\n      const localColumnsPinned =\n        localColumnPinning.right\n          ?.map((id) => columnsById.get(id))\n          .filter((column) => !!column) ?? [];\n\n      // group nested columns\n      const groupedColumns = groupColumns(localColumnsPinned);\n\n      // add unique key\n      return groupedColumns.map((col, idx) => mapToListItem(col, idx, 'right'));\n    }, [columnsById, localColumnPinning.right]);\n\n  const orderedFlatColumns = {\n    left: orderedLeftFlatColumns,\n    center: orderedCenterFlatColumns,\n    right: orderedRightFlatColumns,\n  };\n\n  const showColumnPinningButton =\n    !!table.optionsStore.state.enableColumnPinning && columnPinningSettings;\n\n  // Section headers are only meaningful when pinning is available and at least\n  // one column is actually pinned; otherwise the list is a single ungrouped section.\n  const showSectionHeaders =\n    showColumnPinningButton &&\n    (orderedLeftFlatColumns.length > 0 || orderedRightFlatColumns.length > 0);\n\n  // Flat, virtualized list of items: each section's columns, optionally preceded\n  // by a section header. Empty sections (e.g. filtered out) are skipped.\n  const listItems = useMemo<ColumnSettingsListItem<TFeatures, TData>[]>(() => {\n    const sections: {\n      position: ColumnPinningPosition;\n      columns: ColumnListItem<TFeatures, TData>[];\n    }[] = [\n      {\n        position: 'left',\n        columns: orderedLeftFlatColumns.filter(filterColumns),\n      },\n      {\n        position: 'right',\n        columns: orderedRightFlatColumns.filter(filterColumns),\n      },\n      {\n        position: false, // = center\n        columns: orderedCenterFlatColumns.filter(filterColumns),\n      },\n    ];\n\n    const items: ColumnSettingsListItem<TFeatures, TData>[] = [];\n    for (const section of sections) {\n      if (section.columns.length === 0) {\n        continue;\n      }\n      if (showSectionHeaders) {\n        items.push({\n          itemType: 'sectionHeader',\n          position: section.position,\n          key: `__section_header_${section.position}`,\n        });\n      }\n      items.push(\n        ...(section.columns as ColumnSettingsListItem<TFeatures, TData>[]),\n      );\n    }\n    return items;\n  }, [\n    filterColumns,\n    orderedCenterFlatColumns,\n    orderedLeftFlatColumns,\n    orderedRightFlatColumns,\n    showSectionHeaders,\n  ]);\n\n  const getItemKey = useCallback(\n    (index: number) => listItems[index].key,\n    [listItems],\n  );\n\n  const columnVirtualizer = useVirtualizer({\n    count: listItems.length,\n    overscan: 5,\n    getScrollElement: () => parentRef.current,\n    getItemKey,\n    // Approximate height of a column list item\n    estimateSize: () => DATA_TABLE_COLUMNS_LIST_ITEM_MIN_HEIGHT,\n    measureElement: (element) => {\n      if (!element || !(element instanceof HTMLElement)) {\n        return DATA_TABLE_COLUMNS_LIST_ITEM_MIN_HEIGHT;\n      }\n\n      const labelElement = element.querySelector(`.${columnName}`);\n      if (!labelElement) {\n        // section headers (and any non-column items) are measured by their own height\n        return (\n          element.getBoundingClientRect().height ||\n          DATA_TABLE_COLUMNS_LIST_ITEM_MIN_HEIGHT\n        );\n      }\n\n      const computedStyle = getComputedStyle(element);\n      const borderTop = parseFloat(computedStyle.borderTopWidth);\n      const borderBottom = parseFloat(computedStyle.borderBottomWidth);\n\n      return (\n        labelElement.getBoundingClientRect().height +\n        2 * 4 + // padding top and bottom\n        borderTop +\n        borderBottom\n      );\n    },\n  });\n\n  const virtualItems = columnVirtualizer.getVirtualItems();\n\n  const filterResultAnnouncement = getFilterResultAnnouncement(\n    listItems,\n    activeFilterValue.length,\n    intl,\n  );\n\n  const liveRegion = (\n    <div\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\"\n      className={screenReaderOnly}\n    >\n      {filterResultAnnouncement}\n    </div>\n  );\n\n  // fallback if no columns match the filter\n  if (listItems.length === 0) {\n    return (\n      <>\n        {liveRegion}\n        <DataTableNoFilterResultsEmptyState onClearSearch={onClearFilter} />\n      </>\n    );\n  }\n\n  const canOrder =\n    !!table.optionsStore.state.enableColumnOrdering &&\n    columnOrderSettings &&\n    activeFilterValue.length === 0;\n\n  const columnListItems = virtualItems.map((virtualItem) => {\n    const column = listItems[virtualItem.index];\n\n    if (column.itemType === 'sectionHeader') {\n      return (\n        <DataTableColumnsSectionHeader\n          key={column.key}\n          position={column.position}\n          virtualIndex={virtualItem.index}\n          measureElement={columnVirtualizer.measureElement}\n        />\n      );\n    }\n\n    const columnKey = column.key;\n    const nextItem = listItems[virtualItem.index + 1];\n    const isLastInSection =\n      nextItem === undefined || nextItem.itemType === 'sectionHeader';\n    const canHide = getCanHide<TFeatures, TData>(\n      // Need to cast this one here in order to make sure that it allows\n      // instanciating with the same Subtype of RowData\n      table as unknown as ReactTable<TFeatures, TData>,\n      column,\n      isParentColumnHideable,\n    );\n    const visibilityState = getVisibilityState(localColumnVisibility, column);\n    const showColumnOrderDragHandle = canOrder && column.pinned === false;\n\n    return (\n      <DataTableColumnsListItem\n        key={columnKey}\n        column={column}\n        columnIndex={localColumnOrder.indexOf(column.id)}\n        filterWords={activeFilterWords}\n        orderedFlatColumns={orderedFlatColumns}\n        showVisibilityToggle={showVisibilityToggle}\n        enableVisibilityToggle={canHide}\n        currentVisibilityState={visibilityState}\n        onVisibilityChange={updateLocalColumnVisibility}\n        showColumnOrderDragHandle={showColumnOrderDragHandle}\n        showColumnPinningMenu={showColumnPinningButton}\n        localColumnPinning={localColumnPinning}\n        updateLocalColumnPinning={updateLocalColumnPinning}\n        isLastInSection={isLastInSection}\n        virtualIndex={virtualItem.index}\n        measureElement={columnVirtualizer.measureElement}\n      />\n    );\n  });\n\n  const columnList = (\n    <div\n      ref={parentRef}\n      className={clsx(\n        'strato-table-settings-virtualization-container',\n        styles.virtualizationScrollContainer({\n          hasFilter: hasFilterBar,\n          hasVisibilityControl,\n          hasMessage,\n          hasPinnedColumns: listItems[0].itemType === 'sectionHeader',\n        }),\n      )}\n    >\n      <Grid\n        gridTemplateColumns=\"1fr\"\n        padding={0}\n        gap={0}\n        className={clsx(styles.virtualizationInnerContainer)}\n        // Array.from is used instead of .map() because measurementsCache can be sparse, causing gaps between options.\n        gridTemplateRows={Array.from(\n          columnVirtualizer.measurementsCache,\n          (el) => `${el?.size ?? DATA_TABLE_COLUMNS_LIST_ITEM_MIN_HEIGHT}px`,\n        ).join(' ')}\n        // add 1px to prevent unwanted scrollbar during drag and drop\n        height={columnVirtualizer.getTotalSize() + 1}\n      >\n        {columnListItems}\n      </Grid>\n    </div>\n  );\n\n  return (\n    <>\n      {liveRegion}\n      {canOrder ? (\n        <ColumnOrderSettingsDragAndDropContext\n          localColumnOrder={localColumnOrder}\n          updateLocalColumnOrder={updateLocalColumnOrder}\n          localColumnPinning={localColumnPinning}\n          itemVirtualizer={columnVirtualizer}\n        >\n          {columnList}\n        </ColumnOrderSettingsDragAndDropContext>\n      ) : (\n        columnList\n      )}\n    </>\n  );\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsList.sty.js

@@ -1,7 +1,7 @@
 import "./DataTableColumnsList.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var virtualizationInnerContainer = "_14dz1uig-3-10-4";
-var virtualizationScrollContainer = _7a468({ defaultClassName: "_14dz1ui1-3-10-4", variantClassNames: { hasFilter: { true: "_14dz1ui2-3-10-4", false: "_14dz1ui3-3-10-4" }, hasVisibilityControl: { true: "_14dz1ui4-3-10-4", false: "_14dz1ui5-3-10-4" }, hasMessage: { true: "_14dz1ui6-3-10-4", false: "_14dz1ui7-3-10-4" }, hasPinnedColumns: { true: "_14dz1ui8-3-10-4", false: "_14dz1ui9-3-10-4" } }, defaultVariants: { hasFilter: false, hasVisibilityControl: false, hasMessage: false, hasPinnedColumns: false }, compoundVariants: [[{ hasFilter: false, hasMessage: false }, "_14dz1uia-3-10-4"], [{ hasFilter: true, hasVisibilityControl: false, hasMessage: false }, "_14dz1uib-3-10-4"], [{ hasFilter: true, hasVisibilityControl: true, hasMessage: false }, "_14dz1uic-3-10-4"], [{ hasFilter: false, hasMessage: true }, "_14dz1uid-3-10-4"], [{ hasFilter: true, hasVisibilityControl: false, hasMessage: true }, "_14dz1uie-3-10-4"], [{ hasFilter: true, hasVisibilityControl: true, hasMessage: true }, "_14dz1uif-3-10-4"]] });
+var virtualizationInnerContainer = "_14dz1uig-3-11-0";
+var virtualizationScrollContainer = _7a468({ defaultClassName: "_14dz1ui1-3-11-0", variantClassNames: { hasFilter: { true: "_14dz1ui2-3-11-0", false: "_14dz1ui3-3-11-0" }, hasVisibilityControl: { true: "_14dz1ui4-3-11-0", false: "_14dz1ui5-3-11-0" }, hasMessage: { true: "_14dz1ui6-3-11-0", false: "_14dz1ui7-3-11-0" }, hasPinnedColumns: { true: "_14dz1ui8-3-11-0", false: "_14dz1ui9-3-11-0" } }, defaultVariants: { hasFilter: false, hasVisibilityControl: false, hasMessage: false, hasPinnedColumns: false }, compoundVariants: [[{ hasFilter: false, hasMessage: false }, "_14dz1uia-3-11-0"], [{ hasFilter: true, hasVisibilityControl: false, hasMessage: false }, "_14dz1uib-3-11-0"], [{ hasFilter: true, hasVisibilityControl: true, hasMessage: false }, "_14dz1uic-3-11-0"], [{ hasFilter: false, hasMessage: true }, "_14dz1uid-3-11-0"], [{ hasFilter: true, hasVisibilityControl: false, hasMessage: true }, "_14dz1uie-3-11-0"], [{ hasFilter: true, hasVisibilityControl: true, hasMessage: true }, "_14dz1uif-3-11-0"]] });
 export {
   virtualizationInnerContainer,
   virtualizationScrollContainer

package/esm/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsList.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsList.css.ts"],
-  "sourcesContent": ["import './DataTableColumnsList.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var virtualizationInnerContainer = '_14dz1uig-3-10-4';\nexport var virtualizationScrollContainer = _7a468({defaultClassName:'_14dz1ui1-3-10-4',variantClassNames:{hasFilter:{true:'_14dz1ui2-3-10-4',false:'_14dz1ui3-3-10-4'},hasVisibilityControl:{true:'_14dz1ui4-3-10-4',false:'_14dz1ui5-3-10-4'},hasMessage:{true:'_14dz1ui6-3-10-4',false:'_14dz1ui7-3-10-4'},hasPinnedColumns:{true:'_14dz1ui8-3-10-4',false:'_14dz1ui9-3-10-4'}},defaultVariants:{hasFilter:false,hasVisibilityControl:false,hasMessage:false,hasPinnedColumns:false},compoundVariants:[[{hasFilter:false,hasMessage:false},'_14dz1uia-3-10-4'],[{hasFilter:true,hasVisibilityControl:false,hasMessage:false},'_14dz1uib-3-10-4'],[{hasFilter:true,hasVisibilityControl:true,hasMessage:false},'_14dz1uic-3-10-4'],[{hasFilter:false,hasMessage:true},'_14dz1uid-3-10-4'],[{hasFilter:true,hasVisibilityControl:false,hasMessage:true},'_14dz1uie-3-10-4'],[{hasFilter:true,hasVisibilityControl:true,hasMessage:true},'_14dz1uif-3-10-4']]});"],
+  "sourcesContent": ["import './DataTableColumnsList.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var virtualizationInnerContainer = '_14dz1uig-3-11-0';\nexport var virtualizationScrollContainer = _7a468({defaultClassName:'_14dz1ui1-3-11-0',variantClassNames:{hasFilter:{true:'_14dz1ui2-3-11-0',false:'_14dz1ui3-3-11-0'},hasVisibilityControl:{true:'_14dz1ui4-3-11-0',false:'_14dz1ui5-3-11-0'},hasMessage:{true:'_14dz1ui6-3-11-0',false:'_14dz1ui7-3-11-0'},hasPinnedColumns:{true:'_14dz1ui8-3-11-0',false:'_14dz1ui9-3-11-0'}},defaultVariants:{hasFilter:false,hasVisibilityControl:false,hasMessage:false,hasPinnedColumns:false},compoundVariants:[[{hasFilter:false,hasMessage:false},'_14dz1uia-3-11-0'],[{hasFilter:true,hasVisibilityControl:false,hasMessage:false},'_14dz1uib-3-11-0'],[{hasFilter:true,hasVisibilityControl:true,hasMessage:false},'_14dz1uic-3-11-0'],[{hasFilter:false,hasMessage:true},'_14dz1uid-3-11-0'],[{hasFilter:true,hasVisibilityControl:false,hasMessage:true},'_14dz1uie-3-11-0'],[{hasFilter:true,hasVisibilityControl:true,hasMessage:true},'_14dz1uif-3-11-0']]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,+BAA+B;AACnC,IAAI,gCAAgC,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,WAAU,EAAC,MAAK,oBAAmB,OAAM,mBAAkB,GAAE,sBAAqB,EAAC,MAAK,oBAAmB,OAAM,mBAAkB,GAAE,YAAW,EAAC,MAAK,oBAAmB,OAAM,mBAAkB,GAAE,kBAAiB,EAAC,MAAK,oBAAmB,OAAM,mBAAkB,EAAC,GAAE,iBAAgB,EAAC,WAAU,OAAM,sBAAqB,OAAM,YAAW,OAAM,kBAAiB,MAAK,GAAE,kBAAiB,CAAC,CAAC,EAAC,WAAU,OAAM,YAAW,MAAK,GAAE,kBAAkB,GAAE,CAAC,EAAC,WAAU,MAAK,sBAAqB,OAAM,YAAW,MAAK,GAAE,kBAAkB,GAAE,CAAC,EAAC,WAAU,MAAK,sBAAqB,MAAK,YAAW,MAAK,GAAE,kBAAkB,GAAE,CAAC,EAAC,WAAU,OAAM,YAAW,KAAI,GAAE,kBAAkB,GAAE,CAAC,EAAC,WAAU,MAAK,sBAAqB,OAAM,YAAW,KAAI,GAAE,kBAAkB,GAAE,CAAC,EAAC,WAAU,MAAK,sBAAqB,MAAK,YAAW,KAAI,GAAE,kBAAkB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsListItem.css

@@ -1,4 +1,4 @@
-._13ypmcy0-3-10-4 {
+._13ypmcy0-3-11-0 {
   position: relative;
   flex: 0 1 auto;
   word-break: break-all;
@@ -6,10 +6,10 @@
   padding-bottom: var(--dt-spacings-size-4, 4px);
   border-bottom: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) transparent;
 }
-._13ypmcy0-3-10-4[data-parentcolumnid] {
+._13ypmcy0-3-11-0[data-parentcolumnid] {
   padding-left: var(--dt-spacings-size-28, 28px);
 }
-._13ypmcy0-3-10-4::after {
+._13ypmcy0-3-11-0::after {
   content: "";
   position: absolute;
   left: 0;
@@ -18,28 +18,28 @@
   height: var(--dt-borders-width-default, 1px);
   background-color: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._13ypmcy0-3-10-4:has(+ [data-parentcolumnid])::after {
+._13ypmcy0-3-11-0:has(+ [data-parentcolumnid])::after {
   left: var(--dt-spacings-size-28, 28px);
 }
-._13ypmcy1-3-10-4::after {
+._13ypmcy1-3-11-0::after {
   display: none;
 }
-._13ypmcy2-3-10-4 {
+._13ypmcy2-3-11-0 {
   padding-left: var(--dt-spacings-size-8, 8px);
 }
-._13ypmcy3-3-10-4 {
+._13ypmcy3-3-11-0 {
   visibility: hidden;
 }
-._13ypmcy4-3-10-4 {
+._13ypmcy4-3-11-0 {
   flex: 1 1 auto;
   min-width: 0;
 }
-._13ypmcy5-3-10-4 {
+._13ypmcy5-3-11-0 {
   padding: var(--dt-spacings-size-2, 2px) 0;
 }
-._13ypmcy6-3-10-4 {
+._13ypmcy6-3-11-0 {
   padding-left: var(--dt-spacings-size-8, 8px);
 }
-._13ypmcy7-3-10-4 {
+._13ypmcy7-3-11-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }

package/esm/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsListItem.js

@@ -76,10 +76,7 @@ function InternalDataTableColumnsListItem(props) {
             "div",
             {
               className: clsx(styles.columnName, {
-                [styles.columnNameSubdued]: (
-                  // subdue the label when the column is hidden or its visibility toggle is disabled
-                  isHidden || showVisibilityToggle && !enableVisibilityToggle
-                ),
+                [styles.columnNameSubdued]: isHidden,
                 [styles.columnNameIndented]: !showColumnOrderDragHandle && props.column.parent !== void 0
               }),
               children: /* @__PURE__ */ jsx(Highlight, { term: filterWords, children: columnName })

package/esm/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsListItem.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsListItem.tsx"],
-  "sourcesContent": ["import { useSortable } from '@dnd-kit/sortable';\nimport type {\n  ColumnPinningState,\n  Column,\n  TableFeatures,\n  RowData,\n} from '@tanstack/react-table';\nimport clsx from 'clsx';\nimport { memo, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport type { ColumnListItem } from './column-settings-types.js';\nimport { ColumnOrderDragHandle } from './ColumnOrderSettings/ColumnOrderDragHandle.js';\nimport { ColumnPinningMenu } from './ColumnPinningMenu.js';\nimport { ColumnVisibilityToggle } from './ColumnVisibilityToggle.js';\nimport * as styles from './DataTableColumnsListItem.sty.js';\nimport { Chip } from '../../../../../content/chip/Chip.js';\nimport { useMergeRefs } from '../../../../../core/hooks/useMergeRefs.js';\nimport { Flex } from '../../../../../layouts/flex/Flex.js';\nimport { Highlight } from '../../../../../typography/highlight/Highlight.js';\nimport { getColumnLabel } from '../../../../utils/get-column-label.js';\nimport { dataTableMessages } from '../../../messages.js';\n\ninterface DataTableColumnsListItemProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> {\n  /**\n   * The column to render in the list.\n   */\n  column: ColumnListItem<TFeatures, TData>;\n  /**\n   * The index of the column in the list.\n   */\n  columnIndex: number;\n  /**\n   * The ordered flat columns, grouped by pinning position.\n   */\n  orderedFlatColumns: {\n    left: ColumnListItem<TFeatures, TData>[];\n    center: ColumnListItem<TFeatures, TData>[];\n    right: ColumnListItem<TFeatures, TData>[];\n  };\n  /**\n   * Whether the visibility settings are enabled and a visibility toggle should be shown.\n   */\n  showVisibilityToggle: boolean;\n  /**\n   * Whether visibility can be changed for this column.\n   */\n  enableVisibilityToggle: boolean;\n  /**\n   * The current visibility state of the column.\n   */\n  currentVisibilityState: boolean | 'indeterminate';\n  /**\n   * Callback when the toggle is clicked and visibility of the column changes.\n   */\n  onVisibilityChange: (\n    column: Column<TFeatures, TData>,\n    currentVisibility: boolean | 'indeterminate',\n  ) => void;\n  /**\n   * Whether the column order settings are enabled and a drag handle should be shown.\n   */\n  showColumnOrderDragHandle: boolean;\n  /**\n   * Whether buttons to pin/unpin the column should be shown.\n   */\n  showColumnPinningMenu: boolean;\n  /**\n   * The local column pinning state.\n   */\n  localColumnPinning: ColumnPinningState;\n  /**\n   * Callback to update the local column pinning state.\n   */\n  updateLocalColumnPinning: (newState: ColumnPinningState) => void;\n  /**\n   * Active filter words to highlight in the column name.\n   */\n  filterWords: string[];\n  /**\n   * Whether this is the last item of its (pinned/unpinned) section. Used to\n   * omit the separator line at section boundaries.\n   */\n  isLastInSection: boolean;\n  /**\n   * The virtual index for grid row positioning.\n   */\n  virtualIndex: number;\n  /**\n   * Callback to measure the element for virtualization.\n   */\n  measureElement: (element: Element | null) => void;\n}\n\n/**\n * A single column item in the column settings list.\n */\nfunction InternalDataTableColumnsListItem<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(props: Readonly<DataTableColumnsListItemProps<TFeatures, TData>>) {\n  const {\n    columnIndex,\n    filterWords,\n    orderedFlatColumns,\n    showVisibilityToggle,\n    enableVisibilityToggle,\n    currentVisibilityState,\n    onVisibilityChange,\n    showColumnOrderDragHandle,\n    showColumnPinningMenu,\n    localColumnPinning,\n    updateLocalColumnPinning,\n    isLastInSection,\n    virtualIndex,\n    measureElement,\n  } = props;\n\n  const intl = useIntl();\n  const columnName = getColumnLabel(props.column);\n  const isHidden = currentVisibilityState === false;\n\n  //#region ordering\n  const localColumnRef = useRef<HTMLDivElement>(null);\n  const { setNodeRef, isDragging } = useSortable({\n    id: props.column.key,\n    data: {\n      column: props.column,\n      columnId: props.column.id,\n      columnIndex,\n      localColumnRef,\n    },\n  });\n\n  const mergedRefs = useMergeRefs([localColumnRef, setNodeRef, measureElement]);\n  //#endregion\n\n  return (\n    <Flex\n      data-index={virtualIndex}\n      data-columnid={props.column.id}\n      data-parentcolumnid={props.column.parent?.id}\n      data-pinned-position={\n        props.column.pinned === false ? undefined : props.column.pinned\n      }\n      ref={mergedRefs}\n      justifyContent=\"space-between\"\n      alignItems=\"center\"\n      className={clsx('strato-table-settings-item', styles.columnsListItem, {\n        [styles.dragging]: isDragging,\n        [styles.lastInSection]: isLastInSection,\n        [styles.noDragHandle]:\n          !showColumnOrderDragHandle && props.column.parent === undefined,\n      })}\n      style={{\n        gridRowStart: virtualIndex + 1,\n      }}\n    >\n      <Flex gap={4} alignItems=\"center\" className={styles.columnNameContainer}>\n        {showColumnOrderDragHandle && (\n          <ColumnOrderDragHandle\n            columnId={props.column.id}\n            columnKey={props.column.key}\n            isDraggingActive={isDragging}\n          />\n        )}\n        <div\n          className={clsx(styles.columnName, {\n            [styles.columnNameSubdued]:\n              // subdue the label when the column is hidden or its visibility toggle is disabled\n              isHidden || (showVisibilityToggle && !enableVisibilityToggle),\n            [styles.columnNameIndented]:\n              !showColumnOrderDragHandle && props.column.parent !== undefined,\n          })}\n        >\n          <Highlight term={filterWords}>{columnName}</Highlight>\n        </div>\n      </Flex>\n      <Flex gap={4} alignItems=\"center\">\n        {isHidden && (\n          <Chip>\n            {intl.formatMessage(dataTableMessages.columnHiddenChipLabel)}\n          </Chip>\n        )}\n        {showVisibilityToggle && (\n          <ColumnVisibilityToggle\n            column={props.column}\n            columnLabel={columnName}\n            enableToggle={enableVisibilityToggle}\n            currentState={currentVisibilityState}\n            onVisibilityChange={onVisibilityChange}\n          />\n        )}\n        {showColumnPinningMenu && (\n          <ColumnPinningMenu\n            column={props.column}\n            orderedFlatColumns={orderedFlatColumns}\n            localColumnPinning={localColumnPinning}\n            updateLocalColumnPinning={updateLocalColumnPinning}\n          />\n        )}\n      </Flex>\n    </Flex>\n  );\n}\n\nexport const DataTableColumnsListItem = memo(\n  InternalDataTableColumnsListItem,\n  (prevProps, nextProps) => {\n    // Custom props comparison to only re-render when relevant props change.\n    // Avoids unnecessary re-renders of all items, e.g. when the orderedFlatColumns prop changes.\n    return (\n      prevProps.column.key === nextProps.column.key &&\n      prevProps.columnIndex === nextProps.columnIndex &&\n      prevProps.filterWords === nextProps.filterWords &&\n      prevProps.showVisibilityToggle === nextProps.showVisibilityToggle &&\n      prevProps.enableVisibilityToggle === nextProps.enableVisibilityToggle &&\n      prevProps.currentVisibilityState === nextProps.currentVisibilityState &&\n      prevProps.showColumnOrderDragHandle ===\n        nextProps.showColumnOrderDragHandle &&\n      prevProps.showColumnPinningMenu === nextProps.showColumnPinningMenu &&\n      prevProps.localColumnPinning === nextProps.localColumnPinning &&\n      prevProps.isLastInSection === nextProps.isLastInSection &&\n      prevProps.virtualIndex === nextProps.virtualIndex\n    );\n  },\n);\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useSortable } from '@dnd-kit/sortable';\nimport type {\n  ColumnPinningState,\n  Column,\n  TableFeatures,\n  RowData,\n} from '@tanstack/react-table';\nimport clsx from 'clsx';\nimport { memo, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport type { ColumnListItem } from './column-settings-types.js';\nimport { ColumnOrderDragHandle } from './ColumnOrderSettings/ColumnOrderDragHandle.js';\nimport { ColumnPinningMenu } from './ColumnPinningMenu.js';\nimport { ColumnVisibilityToggle } from './ColumnVisibilityToggle.js';\nimport * as styles from './DataTableColumnsListItem.sty.js';\nimport { Chip } from '../../../../../content/chip/Chip.js';\nimport { useMergeRefs } from '../../../../../core/hooks/useMergeRefs.js';\nimport { Flex } from '../../../../../layouts/flex/Flex.js';\nimport { Highlight } from '../../../../../typography/highlight/Highlight.js';\nimport { getColumnLabel } from '../../../../utils/get-column-label.js';\nimport { dataTableMessages } from '../../../messages.js';\n\ninterface DataTableColumnsListItemProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> {\n  /**\n   * The column to render in the list.\n   */\n  column: ColumnListItem<TFeatures, TData>;\n  /**\n   * The index of the column in the list.\n   */\n  columnIndex: number;\n  /**\n   * The ordered flat columns, grouped by pinning position.\n   */\n  orderedFlatColumns: {\n    left: ColumnListItem<TFeatures, TData>[];\n    center: ColumnListItem<TFeatures, TData>[];\n    right: ColumnListItem<TFeatures, TData>[];\n  };\n  /**\n   * Whether the visibility settings are enabled and a visibility toggle should be shown.\n   */\n  showVisibilityToggle: boolean;\n  /**\n   * Whether visibility can be changed for this column.\n   */\n  enableVisibilityToggle: boolean;\n  /**\n   * The current visibility state of the column.\n   */\n  currentVisibilityState: boolean | 'indeterminate';\n  /**\n   * Callback when the toggle is clicked and visibility of the column changes.\n   */\n  onVisibilityChange: (\n    column: Column<TFeatures, TData>,\n    currentVisibility: boolean | 'indeterminate',\n  ) => void;\n  /**\n   * Whether the column order settings are enabled and a drag handle should be shown.\n   */\n  showColumnOrderDragHandle: boolean;\n  /**\n   * Whether buttons to pin/unpin the column should be shown.\n   */\n  showColumnPinningMenu: boolean;\n  /**\n   * The local column pinning state.\n   */\n  localColumnPinning: ColumnPinningState;\n  /**\n   * Callback to update the local column pinning state.\n   */\n  updateLocalColumnPinning: (newState: ColumnPinningState) => void;\n  /**\n   * Active filter words to highlight in the column name.\n   */\n  filterWords: string[];\n  /**\n   * Whether this is the last item of its (pinned/unpinned) section. Used to\n   * omit the separator line at section boundaries.\n   */\n  isLastInSection: boolean;\n  /**\n   * The virtual index for grid row positioning.\n   */\n  virtualIndex: number;\n  /**\n   * Callback to measure the element for virtualization.\n   */\n  measureElement: (element: Element | null) => void;\n}\n\n/**\n * A single column item in the column settings list.\n */\nfunction InternalDataTableColumnsListItem<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(props: Readonly<DataTableColumnsListItemProps<TFeatures, TData>>) {\n  const {\n    columnIndex,\n    filterWords,\n    orderedFlatColumns,\n    showVisibilityToggle,\n    enableVisibilityToggle,\n    currentVisibilityState,\n    onVisibilityChange,\n    showColumnOrderDragHandle,\n    showColumnPinningMenu,\n    localColumnPinning,\n    updateLocalColumnPinning,\n    isLastInSection,\n    virtualIndex,\n    measureElement,\n  } = props;\n\n  const intl = useIntl();\n  const columnName = getColumnLabel(props.column);\n  const isHidden = currentVisibilityState === false;\n\n  //#region ordering\n  const localColumnRef = useRef<HTMLDivElement>(null);\n  const { setNodeRef, isDragging } = useSortable({\n    id: props.column.key,\n    data: {\n      column: props.column,\n      columnId: props.column.id,\n      columnIndex,\n      localColumnRef,\n    },\n  });\n\n  const mergedRefs = useMergeRefs([localColumnRef, setNodeRef, measureElement]);\n  //#endregion\n\n  return (\n    <Flex\n      data-index={virtualIndex}\n      data-columnid={props.column.id}\n      data-parentcolumnid={props.column.parent?.id}\n      data-pinned-position={\n        props.column.pinned === false ? undefined : props.column.pinned\n      }\n      ref={mergedRefs}\n      justifyContent=\"space-between\"\n      alignItems=\"center\"\n      className={clsx('strato-table-settings-item', styles.columnsListItem, {\n        [styles.dragging]: isDragging,\n        [styles.lastInSection]: isLastInSection,\n        [styles.noDragHandle]:\n          !showColumnOrderDragHandle && props.column.parent === undefined,\n      })}\n      style={{\n        gridRowStart: virtualIndex + 1,\n      }}\n    >\n      <Flex gap={4} alignItems=\"center\" className={styles.columnNameContainer}>\n        {showColumnOrderDragHandle && (\n          <ColumnOrderDragHandle\n            columnId={props.column.id}\n            columnKey={props.column.key}\n            isDraggingActive={isDragging}\n          />\n        )}\n        <div\n          className={clsx(styles.columnName, {\n            [styles.columnNameSubdued]: isHidden,\n            [styles.columnNameIndented]:\n              !showColumnOrderDragHandle && props.column.parent !== undefined,\n          })}\n        >\n          <Highlight term={filterWords}>{columnName}</Highlight>\n        </div>\n      </Flex>\n      <Flex gap={4} alignItems=\"center\">\n        {isHidden && (\n          <Chip>\n            {intl.formatMessage(dataTableMessages.columnHiddenChipLabel)}\n          </Chip>\n        )}\n        {showVisibilityToggle && (\n          <ColumnVisibilityToggle\n            column={props.column}\n            columnLabel={columnName}\n            enableToggle={enableVisibilityToggle}\n            currentState={currentVisibilityState}\n            onVisibilityChange={onVisibilityChange}\n          />\n        )}\n        {showColumnPinningMenu && (\n          <ColumnPinningMenu\n            column={props.column}\n            orderedFlatColumns={orderedFlatColumns}\n            localColumnPinning={localColumnPinning}\n            updateLocalColumnPinning={updateLocalColumnPinning}\n          />\n        )}\n      </Flex>\n    </Flex>\n  );\n}\n\nexport const DataTableColumnsListItem = memo(\n  InternalDataTableColumnsListItem,\n  (prevProps, nextProps) => {\n    // Custom props comparison to only re-render when relevant props change.\n    // Avoids unnecessary re-renders of all items, e.g. when the orderedFlatColumns prop changes.\n    return (\n      prevProps.column.key === nextProps.column.key &&\n      prevProps.columnIndex === nextProps.columnIndex &&\n      prevProps.filterWords === nextProps.filterWords &&\n      prevProps.showVisibilityToggle === nextProps.showVisibilityToggle &&\n      prevProps.enableVisibilityToggle === nextProps.enableVisibilityToggle &&\n      prevProps.currentVisibilityState === nextProps.currentVisibilityState &&\n      prevProps.showColumnOrderDragHandle ===\n        nextProps.showColumnOrderDragHandle &&\n      prevProps.showColumnPinningMenu === nextProps.showColumnPinningMenu &&\n      prevProps.localColumnPinning === nextProps.localColumnPinning &&\n      prevProps.isLastInSection === nextProps.isLastInSection &&\n      prevProps.virtualIndex === nextProps.virtualIndex\n    );\n  },\n);\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsListItem.sty.js

@@ -1,12 +1,12 @@
 import "./DataTableColumnsListItem.css";
-var columnName = "_13ypmcy5-3-10-4";
-var columnNameContainer = "_13ypmcy4-3-10-4";
-var columnNameIndented = "_13ypmcy6-3-10-4";
-var columnNameSubdued = "_13ypmcy7-3-10-4";
-var columnsListItem = "_13ypmcy0-3-10-4";
-var dragging = "_13ypmcy3-3-10-4";
-var lastInSection = "_13ypmcy1-3-10-4";
-var noDragHandle = "_13ypmcy2-3-10-4";
+var columnName = "_13ypmcy5-3-11-0";
+var columnNameContainer = "_13ypmcy4-3-11-0";
+var columnNameIndented = "_13ypmcy6-3-11-0";
+var columnNameSubdued = "_13ypmcy7-3-11-0";
+var columnsListItem = "_13ypmcy0-3-11-0";
+var dragging = "_13ypmcy3-3-11-0";
+var lastInSection = "_13ypmcy1-3-11-0";
+var noDragHandle = "_13ypmcy2-3-11-0";
 export {
   columnName,
   columnNameContainer,