@dynatrace/strato-components 3.12.2 → 3.13.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  // 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": "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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  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.atoms.columnPinning?.get() ?? { start: [], end: [] },\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        start: columnPinningToReset?.left ?? [],\n        end: 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<TDataTableFeatures, RowData>,\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        start: columnPinningToReset?.left ?? [],\n        end: 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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",
   "names": []
 }

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

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

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

@@ -131,42 +131,42 @@ function DataTableColumnsList(props) {
     itemType: "column"
   });
   const orderedLeftFlatColumns = useMemo(() => {
-    const localColumnsPinned = localColumnPinning.left?.map((id) => columnsById.get(id)).filter((column) => !!column) ?? [];
+    const localColumnsPinned = localColumnPinning.start?.map((id) => columnsById.get(id)).filter((column) => !!column) ?? [];
     const groupedColumns = groupColumns(localColumnsPinned);
-    return groupedColumns.map((col, idx) => mapToListItem(col, idx, "left"));
-  }, [columnsById, localColumnPinning.left]);
+    return groupedColumns.map((col, idx) => mapToListItem(col, idx, "start"));
+  }, [columnsById, localColumnPinning.start]);
   const orderedCenterFlatColumns = useMemo(() => {
     const localColumnsUnpinned = allLeafColumnsWithoutBuiltin.filter(
-      (column) => !localColumnPinning.left?.includes(column.id) && !localColumnPinning.right?.includes(column.id)
+      (column) => !localColumnPinning.start?.includes(column.id) && !localColumnPinning.end?.includes(column.id)
     );
     const groupedColumns = groupColumns(localColumnsUnpinned);
     return groupedColumns.toSorted(compareColumns).map((col, idx) => mapToListItem(col, idx, false));
   }, [
     allLeafColumnsWithoutBuiltin,
     compareColumns,
-    localColumnPinning.left,
-    localColumnPinning.right
+    localColumnPinning.start,
+    localColumnPinning.end
   ]);
   const orderedRightFlatColumns = useMemo(() => {
-    const localColumnsPinned = localColumnPinning.right?.map((id) => columnsById.get(id)).filter((column) => !!column) ?? [];
+    const localColumnsPinned = localColumnPinning.end?.map((id) => columnsById.get(id)).filter((column) => !!column) ?? [];
     const groupedColumns = groupColumns(localColumnsPinned);
-    return groupedColumns.map((col, idx) => mapToListItem(col, idx, "right"));
-  }, [columnsById, localColumnPinning.right]);
+    return groupedColumns.map((col, idx) => mapToListItem(col, idx, "end"));
+  }, [columnsById, localColumnPinning.end]);
   const orderedFlatColumns = {
     left: orderedLeftFlatColumns,
     center: orderedCenterFlatColumns,
     right: orderedRightFlatColumns
   };
-  const showColumnPinningButton = !!table.optionsStore.state.enableColumnPinning && columnPinningSettings;
+  const showColumnPinningButton = !!table.options.enableColumnPinning && columnPinningSettings;
   const showSectionHeaders = showColumnPinningButton && (orderedLeftFlatColumns.length > 0 || orderedRightFlatColumns.length > 0);
   const listItems = useMemo(() => {
     const sections = [
       {
-        position: "left",
+        position: "start",
         columns: orderedLeftFlatColumns.filter(filterColumns)
       },
       {
-        position: "right",
+        position: "end",
         columns: orderedRightFlatColumns.filter(filterColumns)
       },
       {
@@ -248,7 +248,7 @@ function DataTableColumnsList(props) {
       /* @__PURE__ */ jsx(DataTableNoFilterResultsEmptyState, { onClearSearch: onClearFilter })
     ] });
   }
-  const canOrder = !!table.optionsStore.state.enableColumnOrdering && columnOrderSettings && activeFilterValue.length === 0;
+  const canOrder = !!table.options.enableColumnOrdering && columnOrderSettings && activeFilterValue.length === 0;
   const columnListItems = virtualItems.map((virtualItem) => {
     const column = listItems[virtualItem.index];
     if (column.itemType === "sectionHeader") {
@@ -265,13 +265,7 @@ function DataTableColumnsList(props) {
     const columnKey = column.key;
     const nextItem = listItems[virtualItem.index + 1];
     const isLastInSection = nextItem === void 0 || nextItem.itemType === "sectionHeader";
-    const canHide = getCanHide(
-      // Need to cast this one here in order to make sure that it allows
-      // instanciating with the same Subtype of RowData
-      table,
-      column,
-      isParentColumnHideable
-    );
+    const canHide = getCanHide(table, column, isParentColumnHideable);
     const visibilityState = getVisibilityState(localColumnVisibility, column);
     const showColumnOrderDragHandle = canOrder && column.pinned === false;
     return /* @__PURE__ */ jsx(

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';\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  hasFilterBar: boolean,\n  intl: IntlShape,\n): string {\n  if (!hasFilterBar) {\n    return '';\n  }\n\n  const count = listItems.filter(\n    (item) => item.itemType === 'column' && item.columns.length === 0,\n  ).length;\n\n  if (filterValueLength === 0) {\n    return intl.formatMessage(dataTableMessages.showingAllColumns, { count });\n  }\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    hasFilterBar,\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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",
+  "sourcesContent": ["import type {\n  ColumnPinningPosition,\n  ColumnPinningState,\n  Column,\n  RowData,\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  /**\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<TDataTableFeatures, RowData>,\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  listItems: ColumnSettingsListItem<TDataTableFeatures, RowData>[],\n  filterValueLength: number,\n  hasFilterBar: boolean,\n  intl: IntlShape,\n): string {\n  if (!hasFilterBar) {\n    return '';\n  }\n\n  const count = listItems.filter(\n    (item) => item.itemType === 'column' && item.columns.length === 0,\n  ).length;\n\n  if (filterValueLength === 0) {\n    return intl.formatMessage(dataTableMessages.showingAllColumns, { count });\n  }\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  props: Readonly<DataTableColumnsListProps>,\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    (\n      a: Column<TDataTableFeatures, RowData>,\n      b: Column<TDataTableFeatures, RowData>,\n    ) => {\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<TDataTableFeatures, RowData>,\n      _: number,\n      columnSection: ColumnListItem<TDataTableFeatures, RowData>[],\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<TDataTableFeatures, RowData>,\n    idx: number,\n    pinnedPosition: ColumnPinningPosition,\n  ): ColumnListItem<TDataTableFeatures, RowData> & { 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<TDataTableFeatures, RowData>[] =\n    useMemo(() => {\n      // map column IDs to columns\n      const localColumnsPinned =\n        localColumnPinning.start\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, 'start'));\n    }, [columnsById, localColumnPinning.start]);\n\n  const orderedCenterFlatColumns: ColumnListItem<\n    TDataTableFeatures,\n    RowData\n  >[] = useMemo(() => {\n    // find unpinned columns\n    const localColumnsUnpinned = allLeafColumnsWithoutBuiltin.filter(\n      (column) =>\n        !localColumnPinning.start?.includes(column.id) &&\n        !localColumnPinning.end?.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.start,\n    localColumnPinning.end,\n  ]);\n\n  const orderedRightFlatColumns: ColumnListItem<TDataTableFeatures, RowData>[] =\n    useMemo(() => {\n      // map column IDs to columns\n      const localColumnsPinned =\n        localColumnPinning.end\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, 'end'));\n    }, [columnsById, localColumnPinning.end]);\n\n  const orderedFlatColumns = {\n    left: orderedLeftFlatColumns,\n    center: orderedCenterFlatColumns,\n    right: orderedRightFlatColumns,\n  };\n\n  const showColumnPinningButton =\n    !!table.options.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<\n    ColumnSettingsListItem<TDataTableFeatures, RowData>[]\n  >(() => {\n    const sections: {\n      position: ColumnPinningPosition;\n      columns: ColumnListItem<TDataTableFeatures, RowData>[];\n    }[] = [\n      {\n        position: 'start',\n        columns: orderedLeftFlatColumns.filter(filterColumns),\n      },\n      {\n        position: 'end',\n        columns: orderedRightFlatColumns.filter(filterColumns),\n      },\n      {\n        position: false, // = center\n        columns: orderedCenterFlatColumns.filter(filterColumns),\n      },\n    ];\n\n    const items: ColumnSettingsListItem<TDataTableFeatures, RowData>[] = [];\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<\n          TDataTableFeatures,\n          RowData\n        >[]),\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    hasFilterBar,\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.options.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(table, column, isParentColumnHideable);\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-12-2";
-var virtualizationScrollContainer = _7a468({ defaultClassName: "_14dz1ui1-3-12-2", variantClassNames: { hasFilter: { true: "_14dz1ui2-3-12-2", false: "_14dz1ui3-3-12-2" }, hasVisibilityControl: { true: "_14dz1ui4-3-12-2", false: "_14dz1ui5-3-12-2" }, hasMessage: { true: "_14dz1ui6-3-12-2", false: "_14dz1ui7-3-12-2" }, hasPinnedColumns: { true: "_14dz1ui8-3-12-2", false: "_14dz1ui9-3-12-2" } }, defaultVariants: { hasFilter: false, hasVisibilityControl: false, hasMessage: false, hasPinnedColumns: false }, compoundVariants: [[{ hasFilter: false, hasMessage: false }, "_14dz1uia-3-12-2"], [{ hasFilter: true, hasVisibilityControl: false, hasMessage: false }, "_14dz1uib-3-12-2"], [{ hasFilter: true, hasVisibilityControl: true, hasMessage: false }, "_14dz1uic-3-12-2"], [{ hasFilter: false, hasMessage: true }, "_14dz1uid-3-12-2"], [{ hasFilter: true, hasVisibilityControl: false, hasMessage: true }, "_14dz1uie-3-12-2"], [{ hasFilter: true, hasVisibilityControl: true, hasMessage: true }, "_14dz1uif-3-12-2"]] });
+var virtualizationInnerContainer = "_14dz1uig-3-13-0";
+var virtualizationScrollContainer = _7a468({ defaultClassName: "_14dz1ui1-3-13-0", variantClassNames: { hasFilter: { true: "_14dz1ui2-3-13-0", false: "_14dz1ui3-3-13-0" }, hasVisibilityControl: { true: "_14dz1ui4-3-13-0", false: "_14dz1ui5-3-13-0" }, hasMessage: { true: "_14dz1ui6-3-13-0", false: "_14dz1ui7-3-13-0" }, hasPinnedColumns: { true: "_14dz1ui8-3-13-0", false: "_14dz1ui9-3-13-0" } }, defaultVariants: { hasFilter: false, hasVisibilityControl: false, hasMessage: false, hasPinnedColumns: false }, compoundVariants: [[{ hasFilter: false, hasMessage: false }, "_14dz1uia-3-13-0"], [{ hasFilter: true, hasVisibilityControl: false, hasMessage: false }, "_14dz1uib-3-13-0"], [{ hasFilter: true, hasVisibilityControl: true, hasMessage: false }, "_14dz1uic-3-13-0"], [{ hasFilter: false, hasMessage: true }, "_14dz1uid-3-13-0"], [{ hasFilter: true, hasVisibilityControl: false, hasMessage: true }, "_14dz1uie-3-13-0"], [{ hasFilter: true, hasVisibilityControl: true, hasMessage: true }, "_14dz1uif-3-13-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-12-2';\nexport var virtualizationScrollContainer = _7a468({defaultClassName:'_14dz1ui1-3-12-2',variantClassNames:{hasFilter:{true:'_14dz1ui2-3-12-2',false:'_14dz1ui3-3-12-2'},hasVisibilityControl:{true:'_14dz1ui4-3-12-2',false:'_14dz1ui5-3-12-2'},hasMessage:{true:'_14dz1ui6-3-12-2',false:'_14dz1ui7-3-12-2'},hasPinnedColumns:{true:'_14dz1ui8-3-12-2',false:'_14dz1ui9-3-12-2'}},defaultVariants:{hasFilter:false,hasVisibilityControl:false,hasMessage:false,hasPinnedColumns:false},compoundVariants:[[{hasFilter:false,hasMessage:false},'_14dz1uia-3-12-2'],[{hasFilter:true,hasVisibilityControl:false,hasMessage:false},'_14dz1uib-3-12-2'],[{hasFilter:true,hasVisibilityControl:true,hasMessage:false},'_14dz1uic-3-12-2'],[{hasFilter:false,hasMessage:true},'_14dz1uid-3-12-2'],[{hasFilter:true,hasVisibilityControl:false,hasMessage:true},'_14dz1uie-3-12-2'],[{hasFilter:true,hasVisibilityControl:true,hasMessage:true},'_14dz1uif-3-12-2']]});"],
+  "sourcesContent": ["import './DataTableColumnsList.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var virtualizationInnerContainer = '_14dz1uig-3-13-0';\nexport var virtualizationScrollContainer = _7a468({defaultClassName:'_14dz1ui1-3-13-0',variantClassNames:{hasFilter:{true:'_14dz1ui2-3-13-0',false:'_14dz1ui3-3-13-0'},hasVisibilityControl:{true:'_14dz1ui4-3-13-0',false:'_14dz1ui5-3-13-0'},hasMessage:{true:'_14dz1ui6-3-13-0',false:'_14dz1ui7-3-13-0'},hasPinnedColumns:{true:'_14dz1ui8-3-13-0',false:'_14dz1ui9-3-13-0'}},defaultVariants:{hasFilter:false,hasVisibilityControl:false,hasMessage:false,hasPinnedColumns:false},compoundVariants:[[{hasFilter:false,hasMessage:false},'_14dz1uia-3-13-0'],[{hasFilter:true,hasVisibilityControl:false,hasMessage:false},'_14dz1uib-3-13-0'],[{hasFilter:true,hasVisibilityControl:true,hasMessage:false},'_14dz1uic-3-13-0'],[{hasFilter:false,hasMessage:true},'_14dz1uid-3-13-0'],[{hasFilter:true,hasVisibilityControl:false,hasMessage:true},'_14dz1uie-3-13-0'],[{hasFilter:true,hasVisibilityControl:true,hasMessage:true},'_14dz1uif-3-13-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-12-2 {
+._13ypmcy0-3-13-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-12-2[data-parentcolumnid] {
+._13ypmcy0-3-13-0[data-parentcolumnid] {
   padding-left: var(--dt-spacings-size-28, 28px);
 }
-._13ypmcy0-3-12-2::after {
+._13ypmcy0-3-13-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-12-2:has(+ [data-parentcolumnid])::after {
+._13ypmcy0-3-13-0:has(+ [data-parentcolumnid])::after {
   left: var(--dt-spacings-size-28, 28px);
 }
-._13ypmcy1-3-12-2::after {
+._13ypmcy1-3-13-0::after {
   display: none;
 }
-._13ypmcy2-3-12-2 {
+._13ypmcy2-3-13-0 {
   padding-left: var(--dt-spacings-size-8, 8px);
 }
-._13ypmcy3-3-12-2 {
+._13ypmcy3-3-13-0 {
   visibility: hidden;
 }
-._13ypmcy4-3-12-2 {
+._13ypmcy4-3-13-0 {
   flex: 1 1 auto;
   min-width: 0;
 }
-._13ypmcy5-3-12-2 {
+._13ypmcy5-3-13-0 {
   padding: var(--dt-spacings-size-2, 2px) 0;
 }
-._13ypmcy6-3-12-2 {
+._13ypmcy6-3-13-0 {
   padding-left: var(--dt-spacings-size-8, 8px);
 }
-._13ypmcy7-3-12-2 {
+._13ypmcy7-3-13-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }

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

@@ -12,6 +12,7 @@ import { useMergeRefs } from "../../../../../core/hooks/useMergeRefs.js";
 import { Flex } from "../../../../../layouts/flex/Flex.js";
 import { Highlight } from "../../../../../typography/highlight/Highlight.js";
 import { getColumnLabel } from "../../../../utils/get-column-label.js";
+import { toPhysicalPinnedPosition } from "../../../features/ColumnPinning/column-pinning-utils.js";
 import { dataTableMessages } from "../../../messages.js";
 function InternalDataTableColumnsListItem(props) {
   const {
@@ -33,6 +34,8 @@ function InternalDataTableColumnsListItem(props) {
   const intl = useIntl();
   const columnName = getColumnLabel(props.column);
   const isHidden = currentVisibilityState === false;
+  const physicalPinnedPosition = toPhysicalPinnedPosition(props.column.pinned);
+  const dataPinnedPosition = physicalPinnedPosition === false ? void 0 : physicalPinnedPosition;
   const localColumnRef = useRef(null);
   const { setNodeRef, isDragging } = useSortable({
     id: props.column.key,
@@ -50,7 +53,7 @@ function InternalDataTableColumnsListItem(props) {
       "data-index": virtualIndex,
       "data-columnid": props.column.id,
       "data-parentcolumnid": props.column.parent?.id,
-      "data-pinned-position": props.column.pinned === false ? void 0 : props.column.pinned,
+      "data-pinned-position": dataPinnedPosition,
       ref: mergedRefs,
       justifyContent: "space-between",
       alignItems: "center",

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]: 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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",
+  "sourcesContent": ["import { useSortable } from '@dnd-kit/sortable';\nimport type {\n  ColumnPinningState,\n  Column,\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 { toPhysicalPinnedPosition } from '../../../features/ColumnPinning/column-pinning-utils.js';\nimport type { TDataTableFeatures } from '../../../features/types/features.types.js';\nimport { dataTableMessages } from '../../../messages.js';\n\ninterface DataTableColumnsListItemProps {\n  /**\n   * The column to render in the list.\n   */\n  column: ColumnListItem<TDataTableFeatures, RowData>;\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<TDataTableFeatures, RowData>[];\n    center: ColumnListItem<TDataTableFeatures, RowData>[];\n    right: ColumnListItem<TDataTableFeatures, RowData>[];\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<TDataTableFeatures, RowData>,\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  props: Readonly<DataTableColumnsListItemProps>,\n) {\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  const physicalPinnedPosition = toPhysicalPinnedPosition(props.column.pinned);\n  const dataPinnedPosition =\n    physicalPinnedPosition === false ? undefined : physicalPinnedPosition;\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={dataPinnedPosition}\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-12-2";
-var columnNameContainer = "_13ypmcy4-3-12-2";
-var columnNameIndented = "_13ypmcy6-3-12-2";
-var columnNameSubdued = "_13ypmcy7-3-12-2";
-var columnsListItem = "_13ypmcy0-3-12-2";
-var dragging = "_13ypmcy3-3-12-2";
-var lastInSection = "_13ypmcy1-3-12-2";
-var noDragHandle = "_13ypmcy2-3-12-2";
+var columnName = "_13ypmcy5-3-13-0";
+var columnNameContainer = "_13ypmcy4-3-13-0";
+var columnNameIndented = "_13ypmcy6-3-13-0";
+var columnNameSubdued = "_13ypmcy7-3-13-0";
+var columnsListItem = "_13ypmcy0-3-13-0";
+var dragging = "_13ypmcy3-3-13-0";
+var lastInSection = "_13ypmcy1-3-13-0";
+var noDragHandle = "_13ypmcy2-3-13-0";
 export {
   columnName,
   columnNameContainer,