create-react-admin-template 0.0.0-stage → 0.1.0

package/template/src/components/AppTable/table/layout/useTableAdaptiveHeight.ts

@@ -0,0 +1,238 @@
+import {
+  useCallback,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type Dispatch,
+  type RefObject,
+  type SetStateAction,
+} from 'react'
+import {
+  measureTableGridContentHeight,
+  resolveTableGridHeight,
+  type TableHeight,
+  type TableHeightGridInstance,
+} from '@/components/AppTable/engine/table/layout/height'
+import { createTableLayoutScheduler } from '@/components/AppTable/engine/table/layout/layoutScheduler'
+
+const nHeightTolerance = 1
+
+export { resolveTableInitialGridHeight } from '@/components/AppTable/engine/table/layout/height'
+
+interface IAdaptiveHeightGridInstance extends TableHeightGridInstance {
+  isDestroyed: boolean
+}
+
+interface IAdaptiveHeightController {
+  readonly instance: IAdaptiveHeightGridInstance | null
+  subscribeGridLayout: (fnListener: () => void) => () => void
+}
+
+interface IUseTableAdaptiveHeightOptions {
+  objSectionRef: RefObject<HTMLElement | null>
+  objContainerRef: RefObject<HTMLDivElement | null>
+  objController: IAdaptiveHeightController
+  objHeight: TableHeight
+  nRowCount: number
+  /** 远程首批数据尚未结算时先完成离屏测量，不开放临时高度。 */
+  bWaitForFirstStableHeight?: boolean
+  /** 首批查询已经结算，可以把测量完成的网格交给浏览器绘制。 */
+  bCanReveal?: boolean
+  /** 外层布局动画期间暂停额外高度测量，结束后只结算一次。 */
+  bLayoutTransitioning?: boolean
+  fnSetGridHeight: Dispatch<SetStateAction<number>>
+}
+
+function fnReadChromeHeight(
+  objSection: HTMLElement,
+  objGridRegion: HTMLElement
+) {
+  let objGridBranch: HTMLElement = objGridRegion
+  while (
+    objGridBranch.parentElement &&
+    objGridBranch.parentElement !== objSection
+  ) {
+    objGridBranch = objGridBranch.parentElement
+  }
+
+  const nSectionChromeHeight = Array.from(objSection.children).reduce(
+    (nHeight, objChild) => {
+      if (!(objChild instanceof HTMLElement) || objChild === objGridBranch) {
+        return nHeight
+      }
+      return nHeight + objChild.getBoundingClientRect().height
+    },
+    0
+  )
+  const objGridColumn = objGridRegion.parentElement
+  if (!objGridColumn || objGridColumn === objSection) {
+    return nSectionChromeHeight
+  }
+
+  const nGridColumnChromeHeight = Array.from(objGridColumn.children).reduce(
+    (nHeight, objChild) => {
+      if (!(objChild instanceof HTMLElement) || objChild === objGridRegion) {
+        return nHeight
+      }
+      return nHeight + objChild.getBoundingClientRect().height
+    },
+    0
+  )
+  return nSectionChromeHeight + nGridColumnChromeHeight
+}
+
+function fnMeasureGridHeight({
+  objSection,
+  objContainer,
+  objGridRegion,
+  objHeightSlot,
+  objController,
+  objHeight,
+  nRowCount,
+}: {
+  objSection: HTMLElement
+  objContainer: HTMLDivElement
+  objGridRegion: HTMLElement
+  objHeightSlot: HTMLElement
+  objController: IAdaptiveHeightController
+  objHeight: TableHeight
+  nRowCount: number
+}) {
+  const objInstance = objController.instance
+  if (!objInstance || objInstance.isDestroyed) return null
+
+  const nAvailableHeight = Math.max(
+    1,
+    objHeightSlot.clientHeight - fnReadChromeHeight(objSection, objGridRegion)
+  )
+  const objHolder = objContainer.querySelector<HTMLElement>(
+    '.handsontable.ht_master .wtHolder'
+  )
+  const nHeaderHeight =
+    objContainer
+      .querySelector<HTMLElement>('.handsontable.ht_master thead')
+      ?.getBoundingClientRect().height ?? 0
+  const nHorizontalScrollbarHeight = objHolder
+    ? Math.max(0, objHolder.offsetHeight - objHolder.clientHeight)
+    : 0
+  const nContentHeight = measureTableGridContentHeight({
+    instance: objInstance,
+    rowCount: nRowCount,
+    headerHeight: nHeaderHeight,
+    horizontalScrollbarHeight: nHorizontalScrollbarHeight,
+    availableHeight: nAvailableHeight,
+  })
+  return resolveTableGridHeight({
+    height: objHeight,
+    contentHeight: nContentHeight,
+    availableHeight: nAvailableHeight,
+  })
+}
+
+/** 将统一高度策略映射为 React/Handsontable 的响应式像素高度。 */
+export function useTableAdaptiveHeight({
+  objSectionRef,
+  objContainerRef,
+  objController,
+  objHeight,
+  nRowCount,
+  bWaitForFirstStableHeight = false,
+  bCanReveal = true,
+  bLayoutTransitioning = false,
+  fnSetGridHeight,
+}: IUseTableAdaptiveHeightOptions) {
+  const [objMeasuredHeight, fnSetMeasuredHeight] = useState<TableHeight>()
+
+  const fnSyncHeight = useCallback(() => {
+    const objSection = objSectionRef.current
+    const objContainer = objContainerRef.current
+    const objGridRegion = objContainer?.parentElement
+    const objHeightSlot = objSection?.parentElement
+    if (!objSection || !objContainer || !objGridRegion || !objHeightSlot) return
+
+    const nNextHeight = fnMeasureGridHeight({
+      objSection,
+      objContainer,
+      objGridRegion,
+      objHeightSlot,
+      objController,
+      objHeight,
+      nRowCount,
+    })
+    if (nNextHeight === null) return
+    fnSetGridHeight((nCurrentHeight) =>
+      Math.abs(nCurrentHeight - nNextHeight) < nHeightTolerance
+        ? nCurrentHeight
+        : nNextHeight
+    )
+    if (bCanReveal) fnSetMeasuredHeight(objHeight)
+  }, [
+    bCanReveal,
+    fnSetGridHeight,
+    nRowCount,
+    objContainerRef,
+    objController,
+    objHeight,
+    objSectionRef,
+  ])
+  const fnSyncHeightRef = useRef(fnSyncHeight)
+  const objLayoutSchedulerRef = useRef<
+    ReturnType<typeof createTableLayoutScheduler> | undefined
+  >(undefined)
+  const objLayoutTransitioningRef = useRef(bLayoutTransitioning)
+  useLayoutEffect(() => {
+    fnSyncHeightRef.current = fnSyncHeight
+    objLayoutTransitioningRef.current = bLayoutTransitioning
+  }, [fnSyncHeight, bLayoutTransitioning])
+  objLayoutSchedulerRef.current ??= createTableLayoutScheduler({
+    onSettled: () => fnSyncHeightRef.current(),
+  })
+
+  const fnScheduleHeightSync = useCallback(() => {
+    if (objLayoutTransitioningRef.current) return
+    objLayoutSchedulerRef.current?.scheduleSettled()
+  }, [])
+
+  useLayoutEffect(() => {
+    if (bLayoutTransitioning) {
+      objLayoutSchedulerRef.current?.cancel()
+      return
+    }
+    fnScheduleHeightSync()
+  }, [bLayoutTransitioning, fnScheduleHeightSync])
+
+  useLayoutEffect(() => {
+    fnScheduleHeightSync()
+  }, [fnScheduleHeightSync, fnSyncHeight])
+
+  useLayoutEffect(() => {
+    const objSection = objSectionRef.current
+    const objContainer = objContainerRef.current
+    const objGridRegion = objContainer?.parentElement
+    const objHeightSlot = objSection?.parentElement
+    if (!objSection || !objContainer || !objGridRegion || !objHeightSlot) return
+
+    const fnUnsubscribeLayout =
+      objController.subscribeGridLayout(fnScheduleHeightSync)
+    const objObserver = new ResizeObserver(fnScheduleHeightSync)
+    objObserver.observe(objHeightSlot)
+    Array.from(objSection.children).forEach((objChild) => {
+      if (objChild instanceof HTMLElement && objChild !== objGridRegion) {
+        objObserver.observe(objChild)
+      }
+    })
+    fnScheduleHeightSync()
+
+    return () => {
+      objLayoutSchedulerRef.current?.cancel()
+      fnUnsubscribeLayout()
+      objObserver.disconnect()
+    }
+  }, [objContainerRef, objController, objSectionRef, fnScheduleHeightSync])
+
+  return {
+    bHeightReady:
+      !bWaitForFirstStableHeight ||
+      (bCanReveal && Object.is(objMeasuredHeight, objHeight)),
+  }
+}

package/template/src/components/AppTable/table/layout/useTablePanels.ts

@@ -0,0 +1,329 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { TABLE_DEFAULT_ROW_KEY } from '@/components/AppTable/engine/config/constants'
+import type { TablePreferenceUpdater } from '@/components/AppTable/engine/preference/preference'
+import type { TablePreference } from '@/components/AppTable/engine/preference/types'
+import { getTableRowValue } from '@/components/AppTable/engine/shared/row'
+import type { TableRow } from '@/components/AppTable/engine/shared/types'
+import type { TableController } from '@/components/AppTable/engine/table/controller/TableController'
+import type { TableSnapshot } from '@/components/AppTable/engine/table/controller/types'
+import type {
+  ResolvedTableComponentProps,
+  TableBottomPanelConfig,
+  TableRightPanelConfig,
+} from '../../config'
+import { useResizablePanel } from './useResizablePanel'
+
+const TABLE_BOTTOM_PANEL_DEFAULTS = {
+  nHeight: 280,
+  nMinHeight: 100,
+  nMaxHeight: 600,
+}
+const TABLE_RIGHT_PANEL_DEFAULTS = {
+  nWidth: 360,
+  nMinWidth: 240,
+  nMaxWidth: 720,
+}
+
+function usePanelOpen(
+  objConfig:
+    | false
+    | Pick<
+        TableBottomPanelConfig | TableRightPanelConfig,
+        'defaultOpen' | 'open' | 'onOpenChange'
+      >
+    | undefined
+) {
+  const [bInternalOpen, fnSetInternalOpen] = useState(() =>
+    Boolean(objConfig && objConfig.defaultOpen)
+  )
+  const bControlled = Boolean(objConfig && typeof objConfig.open === 'boolean')
+  const bOpen = Boolean(
+    objConfig && (bControlled ? objConfig.open : bInternalOpen)
+  )
+  const fnSetOpen = useCallback(
+    (bNextOpen: boolean) => {
+      if (!objConfig) return
+      if (!bControlled) fnSetInternalOpen(bNextOpen)
+      objConfig.onOpenChange?.(bNextOpen)
+    },
+    [bControlled, objConfig]
+  )
+
+  useEffect(() => {
+    if (objConfig !== false) return
+    fnSetInternalOpen(false)
+  }, [objConfig])
+
+  return { bOpen, fnSetOpen }
+}
+
+interface IUseTablePanelsOptions<T extends TableRow> {
+  objController: TableController<T>
+  objSnapshot: TableSnapshot<T>
+  objProps: ResolvedTableComponentProps<T>
+  objPreference: TablePreference
+  fnUpdatePreference: (updater: TablePreferenceUpdater) => Promise<unknown>
+}
+
+/** React 底部、右侧和详情面板共享状态与尺寸持久化协调器。 */
+export function useTablePanels<T extends TableRow>({
+  objController,
+  objSnapshot,
+  objProps,
+  objPreference,
+  fnUpdatePreference,
+}: IUseTablePanelsOptions<T>) {
+  const objBottomConfig = objProps.bottomPanel
+  const objRightConfig = objProps.rightPanel
+  const objRowDetailConfig = objProps.rowDetailPanel
+  const strRowDetailPlacement =
+    (objRowDetailConfig && objRowDetailConfig.placement) || 'bottom'
+  const objDetailOpenConfig = useMemo(
+    () => (objRowDetailConfig ? {} : undefined),
+    [objRowDetailConfig]
+  )
+  const objBottomOpen = usePanelOpen(objBottomConfig || objDetailOpenConfig)
+  const objRightOpen = usePanelOpen(objRightConfig || objDetailOpenConfig)
+  const bBottomOpen = objBottomOpen.bOpen
+  const bRightOpen = objRightOpen.bOpen
+  const fnSetBottomOpen = objBottomOpen.fnSetOpen
+  const fnSetRightOpen = objRightOpen.fnSetOpen
+  const [objInternalCurrentRow, fnSetInternalCurrentRow] = useState<T>()
+  const bCurrentRowControlled = Boolean(
+    objRowDetailConfig &&
+    Object.prototype.hasOwnProperty.call(objRowDetailConfig, 'activeRow')
+  )
+  const objCurrentRow = bCurrentRowControlled
+    ? (objRowDetailConfig && objRowDetailConfig.activeRow) || undefined
+    : objInternalCurrentRow
+  const fnSetCurrentRow = useCallback(
+    (objRow: T | undefined) => {
+      if (!bCurrentRowControlled) fnSetInternalCurrentRow(objRow)
+      if (objRowDetailConfig) {
+        objRowDetailConfig.onActiveRowChange?.(objRow)
+      }
+    },
+    [bCurrentRowControlled, objRowDetailConfig]
+  )
+
+  const fnGetRowKey = useCallback(
+    (objRow: T) =>
+      getTableRowValue(
+        objRow,
+        String(objProps.rowKey ?? TABLE_DEFAULT_ROW_KEY)
+      ),
+    [objProps.rowKey]
+  )
+
+  useEffect(() => {
+    if (!objCurrentRow) return
+    const objCurrentKey = fnGetRowKey(objCurrentRow)
+    const objNextRow = objSnapshot.rows.find((objRow) =>
+      Object.is(fnGetRowKey(objRow), objCurrentKey)
+    )
+    if (objNextRow) {
+      if (objNextRow !== objCurrentRow) fnSetCurrentRow(objNextRow)
+      return
+    }
+    fnSetCurrentRow(undefined)
+    if (strRowDetailPlacement === 'right') fnSetRightOpen(false)
+    else fnSetBottomOpen(false)
+  }, [
+    fnGetRowKey,
+    fnSetCurrentRow,
+    objCurrentRow,
+    objSnapshot.rows,
+    strRowDetailPlacement,
+    fnSetBottomOpen,
+    fnSetRightOpen,
+  ])
+
+  useEffect(() => {
+    if (objRowDetailConfig !== false) return
+    fnSetCurrentRow(undefined)
+    fnSetBottomOpen(false)
+    fnSetRightOpen(false)
+  }, [fnSetBottomOpen, fnSetCurrentRow, fnSetRightOpen, objRowDetailConfig])
+
+  const objPreviousControlledDetailRef = useRef<{
+    bActive: boolean
+    objRowKey?: unknown
+  }>({ bActive: false })
+  useEffect(() => {
+    const bActive = bCurrentRowControlled && Boolean(objCurrentRow)
+    const objRowKey = objCurrentRow
+      ? (fnGetRowKey(objCurrentRow) ?? objCurrentRow)
+      : undefined
+    const objPrevious = objPreviousControlledDetailRef.current
+    objPreviousControlledDetailRef.current = { bActive, objRowKey }
+    if (
+      !bActive ||
+      (objPrevious.bActive && Object.is(objPrevious.objRowKey, objRowKey))
+    ) {
+      return
+    }
+    if (strRowDetailPlacement === 'right') {
+      fnSetRightOpen(true)
+      fnSetBottomOpen(false)
+    } else {
+      fnSetBottomOpen(true)
+      fnSetRightOpen(false)
+    }
+  }, [
+    bCurrentRowControlled,
+    fnGetRowKey,
+    fnSetBottomOpen,
+    fnSetRightOpen,
+    objCurrentRow,
+    strRowDetailPlacement,
+  ])
+
+  const strPreviousPlacementRef = useRef(strRowDetailPlacement)
+  useEffect(() => {
+    const strPreviousPlacement = strPreviousPlacementRef.current
+    strPreviousPlacementRef.current = strRowDetailPlacement
+    if (!objCurrentRow || strPreviousPlacement === strRowDetailPlacement) return
+    const bWasOpen = strPreviousPlacement === 'right' ? bRightOpen : bBottomOpen
+    if (!bWasOpen) return
+    if (strRowDetailPlacement === 'right') {
+      fnSetBottomOpen(false)
+      fnSetRightOpen(true)
+    } else {
+      fnSetRightOpen(false)
+      fnSetBottomOpen(true)
+    }
+    objController.refreshDimensions()
+  }, [
+    bBottomOpen,
+    bRightOpen,
+    fnSetBottomOpen,
+    fnSetRightOpen,
+    objController,
+    objCurrentRow,
+    strRowDetailPlacement,
+  ])
+
+  const objBottomResize = useResizablePanel({
+    strAxis: 'vertical',
+    objInitialSize: objPreference.bottomHeight,
+    nDefaultSize:
+      objBottomConfig && typeof objBottomConfig.defaultHeight === 'number'
+        ? objBottomConfig.defaultHeight
+        : TABLE_BOTTOM_PANEL_DEFAULTS.nHeight,
+    nMinSize:
+      objBottomConfig && typeof objBottomConfig.minHeight === 'number'
+        ? objBottomConfig.minHeight
+        : TABLE_BOTTOM_PANEL_DEFAULTS.nMinHeight,
+    nMaxSize:
+      objBottomConfig && typeof objBottomConfig.maxHeight === 'number'
+        ? objBottomConfig.maxHeight
+        : TABLE_BOTTOM_PANEL_DEFAULTS.nMaxHeight,
+    bDisabled: Boolean(objBottomConfig && objBottomConfig.resizable === false),
+    fnOnResize: () => objController.refreshDimensions(),
+    fnOnResizeEnd: (nHeight) => {
+      void fnUpdatePreference((objCurrent) => ({
+        ...objCurrent,
+        bottomHeight: nHeight,
+      }))
+    },
+  })
+  const objRightResize = useResizablePanel({
+    strAxis: 'horizontal',
+    strEdge: 'start',
+    objInitialSize: objPreference.rightWidth,
+    nDefaultSize:
+      objRightConfig && typeof objRightConfig.width === 'number'
+        ? objRightConfig.width
+        : TABLE_RIGHT_PANEL_DEFAULTS.nWidth,
+    nMinSize:
+      objRightConfig && typeof objRightConfig.minWidth === 'number'
+        ? objRightConfig.minWidth
+        : TABLE_RIGHT_PANEL_DEFAULTS.nMinWidth,
+    nMaxSize:
+      objRightConfig && typeof objRightConfig.maxWidth === 'number'
+        ? objRightConfig.maxWidth
+        : TABLE_RIGHT_PANEL_DEFAULTS.nMaxWidth,
+    bDisabled: Boolean(objRightConfig && objRightConfig.resizable === false),
+    fnGetDirection: () =>
+      document.documentElement.dir === 'rtl' ? 'rtl' : 'ltr',
+    fnOnResize: () => objController.refreshDimensions(),
+    fnOnResizeEnd: (nWidth) => {
+      void fnUpdatePreference((objCurrent) => ({
+        ...objCurrent,
+        rightWidth: nWidth,
+      }))
+    },
+  })
+
+  const fnOpenRowDetailPanel = useCallback(
+    (objRow?: T) => {
+      if (!objRowDetailConfig) return
+      const objNextRow = objRow ?? objCurrentRow
+      if (!objNextRow) return
+      fnSetCurrentRow(objNextRow)
+      if (strRowDetailPlacement === 'right') {
+        fnSetBottomOpen(false)
+        fnSetRightOpen(true)
+      } else {
+        fnSetRightOpen(false)
+        fnSetBottomOpen(true)
+      }
+    },
+    [
+      objCurrentRow,
+      objRowDetailConfig,
+      strRowDetailPlacement,
+      fnSetCurrentRow,
+      fnSetBottomOpen,
+      fnSetRightOpen,
+    ]
+  )
+  const fnCloseRowDetailPanel = useCallback(() => {
+    fnSetCurrentRow(undefined)
+    if (strRowDetailPlacement === 'right') fnSetRightOpen(false)
+    else fnSetBottomOpen(false)
+  }, [fnSetBottomOpen, fnSetCurrentRow, fnSetRightOpen, strRowDetailPlacement])
+  const fnCollapseOnQuery = useCallback(() => {
+    if (!objBottomConfig || objBottomConfig.collapseOnQuery !== false) {
+      fnSetBottomOpen(false)
+    }
+    if (!objRightConfig || objRightConfig.collapseOnQuery !== false) {
+      fnSetRightOpen(false)
+    }
+  }, [fnSetBottomOpen, fnSetRightOpen, objBottomConfig, objRightConfig])
+
+  const bBottomUsesDetail = Boolean(
+    objCurrentRow && objRowDetailConfig && strRowDetailPlacement === 'bottom'
+  )
+  const bRightUsesDetail = Boolean(
+    objCurrentRow && objRowDetailConfig && strRowDetailPlacement === 'right'
+  )
+
+  return {
+    objCurrentRow,
+    bBottomOpen:
+      bBottomOpen &&
+      Boolean(
+        (objBottomConfig && objBottomConfig.component) || bBottomUsesDetail
+      ),
+    bRightOpen:
+      bRightOpen &&
+      Boolean((objRightConfig && objRightConfig.component) || bRightUsesDetail),
+    bBottomUsesDetail,
+    bRightUsesDetail,
+    objBottomResize,
+    objRightResize,
+    objRightWidth:
+      objPreference.rightWidth === undefined &&
+      !objRightResize.bResizing &&
+      objRightConfig &&
+      typeof objRightConfig.width === 'string'
+        ? objRightConfig.width
+        : objRightResize.nSize,
+    fnCloseBottomPanel: () => fnSetBottomOpen(false),
+    fnCloseRightPanel: () => fnSetRightOpen(false),
+    fnCloseRowDetailPanel,
+    fnOpenRowDetailPanel,
+    fnCollapseOnQuery,
+  }
+}

package/template/src/components/AppTable/table/layout/useTableTheme.ts

@@ -0,0 +1,123 @@
+import { useCallback, useEffect, useRef, useState, type RefObject } from 'react'
+import type { TablePreferenceUpdater } from '@/components/AppTable/engine/preference/preference'
+import {
+  createTableThemeController,
+  type TableDensity,
+} from '@/components/AppTable/engine/shared/theme'
+import type { TableRow } from '@/components/AppTable/engine/shared/types'
+import type { TableController } from '@/components/AppTable/engine/table/controller/TableController'
+import type { ResolvedTableComponentProps } from '../../config'
+
+interface IUseTableThemeOptions<T extends TableRow> {
+  strTableKey: string
+  objProps: ResolvedTableComponentProps<T>
+  objController: TableController<T>
+  objContainerRef: RefObject<HTMLDivElement | null>
+  fnReportError: (objError: unknown) => void
+  strPreferredDensity: TableDensity
+  fnUpdatePreference: (updater: TablePreferenceUpdater) => Promise<unknown>
+}
+
+export function useTableTheme<T extends TableRow>({
+  strTableKey,
+  objProps,
+  objController,
+  objContainerRef,
+  fnReportError,
+  strPreferredDensity,
+  fnUpdatePreference,
+}: IUseTableThemeOptions<T>) {
+  const objSectionRef = useRef<HTMLElement>(null)
+  const [strDensity, fnSetDensity] = useState(strPreferredDensity)
+  const [objThemeController] = useState(() =>
+    createTableThemeController({
+      tableKey: strTableKey,
+      theme: objProps.theme,
+      density: strPreferredDensity,
+      dark:
+        typeof document !== 'undefined' &&
+        document.documentElement.classList.contains('dark'),
+    })
+  )
+
+  useEffect(() => {
+    if (strDensity === strPreferredDensity) return
+    objThemeController.setDensity(strPreferredDensity)
+    fnSetDensity(strPreferredDensity)
+    objController.render()
+  }, [objController, objThemeController, strDensity, strPreferredDensity])
+
+  const fnSyncThemeTokens = useCallback(() => {
+    const objGrid =
+      objContainerRef.current?.querySelector<HTMLElement>('.handsontable')
+    const objHost = objSectionRef.current
+    if (!objGrid || !objHost) return
+    const strToken = getComputedStyle(objGrid)
+      .getPropertyValue('--ht-accent-color')
+      .trim()
+    if (!strToken) {
+      objHost.style.removeProperty('--table-component-primary')
+      return
+    }
+    const objProbe = document.createElement('span')
+    objProbe.style.color = 'var(--ht-accent-color)'
+    objProbe.style.position = 'absolute'
+    objProbe.style.visibility = 'hidden'
+    objProbe.style.pointerEvents = 'none'
+    objGrid.append(objProbe)
+    const strAccent = getComputedStyle(objProbe).color.trim()
+    objProbe.remove()
+    if (strAccent) {
+      objHost.style.setProperty('--table-component-primary', strAccent)
+    }
+  }, [objContainerRef])
+
+  useEffect(() => {
+    const objObserver = new MutationObserver(() => {
+      objThemeController.setDarkMode(
+        document.documentElement.classList.contains('dark')
+      )
+      objController.render()
+      window.requestAnimationFrame(fnSyncThemeTokens)
+    })
+    objObserver.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class'],
+    })
+    return () => objObserver.disconnect()
+  }, [fnSyncThemeTokens, objController, objThemeController])
+
+  const fnChangeDensity = useCallback(
+    (strNextDensity: TableDensity) => {
+      if (strNextDensity === strDensity) return
+      try {
+        objThemeController.setDensity(strNextDensity)
+        fnSetDensity(strNextDensity)
+        void fnUpdatePreference((objCurrent) => ({
+          ...objCurrent,
+          density: strNextDensity,
+        }))
+        objController.render()
+        window.requestAnimationFrame(fnSyncThemeTokens)
+      } catch (objError) {
+        fnReportError(objError)
+      }
+    },
+    [
+      fnReportError,
+      fnSyncThemeTokens,
+      fnUpdatePreference,
+      objController,
+      objThemeController,
+      strDensity,
+    ]
+  )
+
+  return {
+    objSectionRef,
+    objThemeController,
+    strDensity,
+    fnSyncThemeTokens,
+    fnChangeDensity,
+  }
+}