@lobehub/ui 6.0.0-beta.7 → 6.0.0-beta.9

package/es/Table/render/useScrollSync.mjs

@@ -0,0 +1,104 @@
+import { useEventCallback } from "../../hooks/useEventCallback.mjs";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+//#region src/Table/render/useScrollSync.ts
+const forceScroll = (scrollLeft, target) => {
+	if (target && target.scrollLeft !== scrollLeft) target.scrollLeft = scrollLeft;
+};
+const useScrollSync = ({ bodyRef, columnCount, fixHeader, horizonScroll, prefixCls, rows, sticky }) => {
+	const rootRef = useRef(null);
+	const headerRef = useRef(null);
+	const summaryRef = useRef(null);
+	const stickyRef = useRef(null);
+	const shadowRef = useRef({
+		end: false,
+		start: false
+	});
+	const lockRef = useRef({ target: null });
+	const [scrollbarSize, setScrollbarSize] = useState(0);
+	const [, forceRender] = useState(0);
+	const applyShadow = () => {
+		const root = rootRef.current;
+		if (!root) return;
+		root.classList.toggle(`${prefixCls}-fix-start-shadow-show`, horizonScroll && shadowRef.current.start);
+		root.classList.toggle(`${prefixCls}-fix-end-shadow-show`, horizonScroll && shadowRef.current.end);
+	};
+	const onInternalScroll = useEventCallback(({ currentTarget, scrollLeft }) => {
+		const target = currentTarget ?? bodyRef.current;
+		const left = typeof scrollLeft === "number" ? scrollLeft : target?.scrollLeft ?? 0;
+		const lock = lockRef.current;
+		if (!lock.target || lock.target === target) {
+			lock.target = target ?? null;
+			clearTimeout(lock.timer);
+			lock.timer = setTimeout(() => {
+				lock.target = null;
+			}, 100);
+			forceScroll(left, headerRef.current);
+			forceScroll(left, bodyRef.current);
+			forceScroll(left, summaryRef.current);
+			stickyRef.current?.setScrollLeft(left);
+		}
+		const measure = target ?? headerRef.current;
+		if (measure) {
+			const { clientWidth, scrollWidth } = measure;
+			const abs = Math.abs(left);
+			shadowRef.current = scrollWidth === clientWidth ? {
+				end: false,
+				start: false
+			} : {
+				end: abs < scrollWidth - clientWidth - 1,
+				start: abs > 0
+			};
+			applyShadow();
+		}
+	});
+	useLayoutEffect(() => {
+		applyShadow();
+	});
+	useLayoutEffect(() => {
+		const root = rootRef.current;
+		if (!root || typeof ResizeObserver === "undefined") return;
+		const update = () => {
+			root.style.setProperty("--lobe-table-component-width", `${root.offsetWidth}px`);
+			stickyRef.current?.checkVisible();
+			if (horizonScroll) onInternalScroll({ currentTarget: bodyRef.current });
+		};
+		update();
+		const observer = new ResizeObserver(update);
+		observer.observe(root);
+		return () => observer.disconnect();
+	}, [
+		horizonScroll,
+		bodyRef,
+		onInternalScroll
+	]);
+	useEffect(() => {
+		if (horizonScroll) onInternalScroll({ currentTarget: bodyRef.current });
+	}, [
+		horizonScroll,
+		rows,
+		columnCount,
+		bodyRef,
+		onInternalScroll
+	]);
+	useLayoutEffect(() => {
+		const body = bodyRef.current;
+		if (!fixHeader || !body) return;
+		const size = body.offsetWidth - body.clientWidth;
+		setScrollbarSize((previous) => previous === size ? previous : Math.max(0, size));
+	});
+	useEffect(() => {
+		if (sticky) forceRender((count) => count + 1);
+	}, [sticky]);
+	return {
+		headerRef,
+		onInternalScroll,
+		rootRef,
+		scrollbarSize,
+		stickyRef,
+		summaryRef
+	};
+};
+//#endregion
+export { useScrollSync };
+
+//# sourceMappingURL=useScrollSync.mjs.map

package/es/Table/render/useScrollSync.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollSync.mjs","names":[],"sources":["../../../src/Table/render/useScrollSync.ts"],"sourcesContent":["import { type RefObject, useEffect, useLayoutEffect, useRef, useState } from 'react';\n\nimport { useEventCallback } from '@/hooks/useEventCallback';\n\nimport type { StickyScrollBarApi } from './StickyScrollBar';\n\nconst forceScroll = (scrollLeft: number, target: HTMLElement | null | undefined) => {\n  if (target && target.scrollLeft !== scrollLeft) target.scrollLeft = scrollLeft;\n};\n\ninterface ScrollSyncOptions {\n  bodyRef: RefObject<HTMLDivElement | null>;\n  columnCount: number;\n  fixHeader: boolean;\n  horizonScroll: boolean;\n  prefixCls: string;\n  rows: unknown;\n  sticky: boolean;\n}\n\nexport const useScrollSync = ({\n  bodyRef,\n  columnCount,\n  fixHeader,\n  horizonScroll,\n  prefixCls,\n  rows,\n  sticky,\n}: ScrollSyncOptions) => {\n  const rootRef = useRef<HTMLDivElement | null>(null);\n  const headerRef = useRef<HTMLDivElement | null>(null);\n  const summaryRef = useRef<HTMLDivElement | null>(null);\n  const stickyRef = useRef<StickyScrollBarApi>(null);\n  const shadowRef = useRef({ end: false, start: false });\n  const lockRef = useRef<{ target: EventTarget | null; timer?: ReturnType<typeof setTimeout> }>({\n    target: null,\n  });\n  const [scrollbarSize, setScrollbarSize] = useState(0);\n  const [, forceRender] = useState(0);\n\n  const applyShadow = () => {\n    const root = rootRef.current;\n    if (!root) return;\n    root.classList.toggle(\n      `${prefixCls}-fix-start-shadow-show`,\n      horizonScroll && shadowRef.current.start,\n    );\n    root.classList.toggle(\n      `${prefixCls}-fix-end-shadow-show`,\n      horizonScroll && shadowRef.current.end,\n    );\n  };\n\n  const onInternalScroll = useEventCallback(\n    ({\n      currentTarget,\n      scrollLeft,\n    }: {\n      currentTarget?: HTMLElement | null;\n      scrollLeft?: number;\n    }) => {\n      const target = currentTarget ?? bodyRef.current;\n      const left = typeof scrollLeft === 'number' ? scrollLeft : (target?.scrollLeft ?? 0);\n      const lock = lockRef.current;\n      if (!lock.target || lock.target === target) {\n        lock.target = target ?? null;\n        clearTimeout(lock.timer);\n        lock.timer = setTimeout(() => {\n          lock.target = null;\n        }, 100);\n        forceScroll(left, headerRef.current);\n        forceScroll(left, bodyRef.current);\n        forceScroll(left, summaryRef.current);\n        stickyRef.current?.setScrollLeft(left);\n      }\n      const measure = target ?? headerRef.current;\n      if (measure) {\n        const { clientWidth, scrollWidth } = measure;\n        const abs = Math.abs(left);\n        shadowRef.current =\n          scrollWidth === clientWidth\n            ? { end: false, start: false }\n            : { end: abs < scrollWidth - clientWidth - 1, start: abs > 0 };\n        applyShadow();\n      }\n    },\n  );\n\n  useLayoutEffect(() => {\n    applyShadow();\n  });\n\n  useLayoutEffect(() => {\n    const root = rootRef.current;\n    if (!root || typeof ResizeObserver === 'undefined') return;\n    const update = () => {\n      root.style.setProperty('--lobe-table-component-width', `${root.offsetWidth}px`);\n      stickyRef.current?.checkVisible();\n      if (horizonScroll) onInternalScroll({ currentTarget: bodyRef.current });\n    };\n    update();\n    const observer = new ResizeObserver(update);\n    observer.observe(root);\n    return () => observer.disconnect();\n  }, [horizonScroll, bodyRef, onInternalScroll]);\n\n  useEffect(() => {\n    if (horizonScroll) onInternalScroll({ currentTarget: bodyRef.current });\n  }, [horizonScroll, rows, columnCount, bodyRef, onInternalScroll]);\n\n  useLayoutEffect(() => {\n    const body = bodyRef.current;\n    if (!fixHeader || !body) return;\n    const size = body.offsetWidth - body.clientWidth;\n    setScrollbarSize((previous) => (previous === size ? previous : Math.max(0, size)));\n  });\n\n  useEffect(() => {\n    if (sticky) forceRender((count) => count + 1);\n  }, [sticky]);\n\n  return { headerRef, onInternalScroll, rootRef, scrollbarSize, stickyRef, summaryRef };\n};\n"],"mappings":";;;AAMA,MAAM,eAAe,YAAoB,WAA2C;CAClF,IAAI,UAAU,OAAO,eAAe,YAAY,OAAO,aAAa;AACtE;AAYA,MAAa,iBAAiB,EAC5B,SACA,aACA,WACA,eACA,WACA,MACA,aACuB;CACvB,MAAM,UAAU,OAA8B,IAAI;CAClD,MAAM,YAAY,OAA8B,IAAI;CACpD,MAAM,aAAa,OAA8B,IAAI;CACrD,MAAM,YAAY,OAA2B,IAAI;CACjD,MAAM,YAAY,OAAO;EAAE,KAAK;EAAO,OAAO;CAAM,CAAC;CACrD,MAAM,UAAU,OAA8E,EAC5F,QAAQ,KACV,CAAC;CACD,MAAM,CAAC,eAAe,oBAAoB,SAAS,CAAC;CACpD,MAAM,GAAG,eAAe,SAAS,CAAC;CAElC,MAAM,oBAAoB;EACxB,MAAM,OAAO,QAAQ;EACrB,IAAI,CAAC,MAAM;EACX,KAAK,UAAU,OACb,GAAG,UAAU,yBACb,iBAAiB,UAAU,QAAQ,KACrC;EACA,KAAK,UAAU,OACb,GAAG,UAAU,uBACb,iBAAiB,UAAU,QAAQ,GACrC;CACF;CAEA,MAAM,mBAAmB,kBACtB,EACC,eACA,iBAII;EACJ,MAAM,SAAS,iBAAiB,QAAQ;EACxC,MAAM,OAAO,OAAO,eAAe,WAAW,aAAc,QAAQ,cAAc;EAClF,MAAM,OAAO,QAAQ;EACrB,IAAI,CAAC,KAAK,UAAU,KAAK,WAAW,QAAQ;GAC1C,KAAK,SAAS,UAAU;GACxB,aAAa,KAAK,KAAK;GACvB,KAAK,QAAQ,iBAAiB;IAC5B,KAAK,SAAS;GAChB,GAAG,GAAG;GACN,YAAY,MAAM,UAAU,OAAO;GACnC,YAAY,MAAM,QAAQ,OAAO;GACjC,YAAY,MAAM,WAAW,OAAO;GACpC,UAAU,SAAS,cAAc,IAAI;EACvC;EACA,MAAM,UAAU,UAAU,UAAU;EACpC,IAAI,SAAS;GACX,MAAM,EAAE,aAAa,gBAAgB;GACrC,MAAM,MAAM,KAAK,IAAI,IAAI;GACzB,UAAU,UACR,gBAAgB,cACZ;IAAE,KAAK;IAAO,OAAO;GAAM,IAC3B;IAAE,KAAK,MAAM,cAAc,cAAc;IAAG,OAAO,MAAM;GAAE;GACjE,YAAY;EACd;CACF,CACF;CAEA,sBAAsB;EACpB,YAAY;CACd,CAAC;CAED,sBAAsB;EACpB,MAAM,OAAO,QAAQ;EACrB,IAAI,CAAC,QAAQ,OAAO,mBAAmB,aAAa;EACpD,MAAM,eAAe;GACnB,KAAK,MAAM,YAAY,gCAAgC,GAAG,KAAK,YAAY,GAAG;GAC9E,UAAU,SAAS,aAAa;GAChC,IAAI,eAAe,iBAAiB,EAAE,eAAe,QAAQ,QAAQ,CAAC;EACxE;EACA,OAAO;EACP,MAAM,WAAW,IAAI,eAAe,MAAM;EAC1C,SAAS,QAAQ,IAAI;EACrB,aAAa,SAAS,WAAW;CACnC,GAAG;EAAC;EAAe;EAAS;CAAgB,CAAC;CAE7C,gBAAgB;EACd,IAAI,eAAe,iBAAiB,EAAE,eAAe,QAAQ,QAAQ,CAAC;CACxE,GAAG;EAAC;EAAe;EAAM;EAAa;EAAS;CAAgB,CAAC;CAEhE,sBAAsB;EACpB,MAAM,OAAO,QAAQ;EACrB,IAAI,CAAC,aAAa,CAAC,MAAM;EACzB,MAAM,OAAO,KAAK,cAAc,KAAK;EACrC,kBAAkB,aAAc,aAAa,OAAO,WAAW,KAAK,IAAI,GAAG,IAAI,CAAE;CACnF,CAAC;CAED,gBAAgB;EACd,IAAI,QAAQ,aAAa,UAAU,QAAQ,CAAC;CAC9C,GAAG,CAAC,MAAM,CAAC;CAEX,OAAO;EAAE;EAAW;EAAkB;EAAS;EAAe;EAAW;CAAW;AACtF"}

package/es/Table/render/useViewContexts.mjs

@@ -0,0 +1,134 @@
+import { useEventCallback } from "../../hooks/useEventCallback.mjs";
+import { PREFIX_CLS } from "../constants.mjs";
+import { DEFAULT_SORT_DIRECTIONS } from "../pipeline/useSorter.mjs";
+import { useMemo } from "react";
+//#region src/Table/render/useViewContexts.ts
+const DEFAULT_SORTER_TOOLTIP = { target: "full-header" };
+const useViewContexts = ({ controller, props, semanticClassNames, semanticStyles }) => {
+	const { components, expandable, getPopupContainer, onHeaderRow, onRow, rowClassName, rowHoverable = true, rowSelection, showSorterTooltip = DEFAULT_SORTER_TOOLTIP, sortDirections = DEFAULT_SORT_DIRECTIONS, virtual } = props;
+	const { model, selection, state, tableLocale } = controller;
+	const { expandedRowClassName, expandedRowRender, expandRowByClick, forceRender, rowExpandable } = expandable ?? {};
+	const { columnTitle, getTitleCheckboxProps, hideSelectAll, renderCell, type: selectionType = "checkbox" } = rowSelection ?? {};
+	const leafColumns = model.leafColumns;
+	const componentSet = useMemo(() => {
+		const fallback = virtual ? "div" : void 0;
+		return {
+			bodyCell: components?.body?.cell ?? fallback,
+			bodyRow: components?.body?.row ?? fallback,
+			bodyWrapper: components?.body?.wrapper,
+			headerCell: components?.header?.cell,
+			headerRow: components?.header?.row,
+			headerTable: components?.header?.table,
+			headerWrapper: components?.header?.wrapper,
+			table: components?.table
+		};
+	}, [components, virtual]);
+	const toggleExpand = useEventCallback((record) => controller.toggleExpand(record));
+	const fixColumn = controller.horizonScroll && leafColumns.some((leaf) => leaf.fixed);
+	const viewValue = useMemo(() => ({
+		components: componentSet,
+		expand: {
+			expandedRowClassName,
+			expandedRowRender,
+			expandIcon: controller.expandIcon,
+			expandRowByClick,
+			forceRender,
+			indentSize: controller.indentSize,
+			nestIconColumnIndex: controller.nestIconColumnIndex,
+			rowExpandable,
+			toggle: toggleExpand,
+			type: controller.expandType
+		},
+		fixColumn,
+		getRowKey: controller.getRowKey,
+		horizonScroll: controller.horizonScroll,
+		leafColumns,
+		onRow,
+		prefixCls: PREFIX_CLS,
+		rowClassName,
+		rowHoverable,
+		semanticClassNames,
+		semanticStyles,
+		virtualWidths: controller.virtualWidths
+	}), [
+		componentSet,
+		expandedRowClassName,
+		expandedRowRender,
+		expandRowByClick,
+		forceRender,
+		rowExpandable,
+		controller.expandIcon,
+		controller.indentSize,
+		controller.nestIconColumnIndex,
+		toggleExpand,
+		controller.expandType,
+		fixColumn,
+		controller.getRowKey,
+		controller.horizonScroll,
+		leafColumns,
+		onRow,
+		rowClassName,
+		rowHoverable,
+		semanticClassNames,
+		semanticStyles,
+		controller.virtualWidths
+	]);
+	const selectionValue = useMemo(() => ({
+		actions: selection.actions,
+		checkboxPropsMap: selection.checkboxPropsMap,
+		expandType: controller.expandType,
+		getRowKey: controller.getRowKey,
+		getTitleCheckboxProps,
+		hideSelectAll,
+		locale: tableLocale,
+		renderCell,
+		selections: selection.mergedSelections,
+		title: columnTitle,
+		type: selectionType
+	}), [
+		selection.actions,
+		selection.checkboxPropsMap,
+		selection.mergedSelections,
+		controller.expandType,
+		controller.getRowKey,
+		getTitleCheckboxProps,
+		hideSelectAll,
+		renderCell,
+		columnTitle,
+		selectionType,
+		tableLocale
+	]);
+	const triggerSort = useEventCallback(state.triggerSort);
+	const triggerFilter = useEventCallback(state.triggerFilter);
+	return {
+		headerValue: useMemo(() => ({
+			filterStates: state.filterStates,
+			getPopupContainer,
+			locale: tableLocale,
+			onHeaderRow,
+			showSorterTooltip,
+			sortDirections,
+			sortStates: state.sortStates,
+			titleProps: state.titleProps,
+			triggerFilter,
+			triggerSort
+		}), [
+			state.filterStates,
+			getPopupContainer,
+			tableLocale,
+			onHeaderRow,
+			showSorterTooltip,
+			sortDirections,
+			state.sortStates,
+			state.titleProps,
+			triggerFilter,
+			triggerSort
+		]),
+		selectionValue,
+		viewValue
+	};
+};
+//#endregion
+export { useViewContexts };
+
+//# sourceMappingURL=useViewContexts.mjs.map

package/es/Table/render/useViewContexts.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useViewContexts.mjs","names":[],"sources":["../../../src/Table/render/useViewContexts.ts"],"sourcesContent":["import { type CSSProperties, useMemo } from 'react';\n\nimport { useEventCallback } from '@/hooks/useEventCallback';\n\nimport { PREFIX_CLS } from '../constants';\nimport { DEFAULT_SORT_DIRECTIONS } from '../pipeline/useSorter';\nimport type { NormalizedSemantic } from '../semantic';\nimport type { TableProps, TableSorterTooltipProps } from '../type';\nimport type { useTableController } from '../useTableController';\nimport type { HeaderView, SelectionView, TableComponentSet, TableViewValue } from './context';\n\nconst DEFAULT_SORTER_TOOLTIP: TableSorterTooltipProps = { target: 'full-header' };\n\ninterface ViewContextsOptions<T> {\n  controller: ReturnType<typeof useTableController<T>>;\n  props: TableProps<T>;\n  semanticClassNames: NormalizedSemantic<string>;\n  semanticStyles: NormalizedSemantic<CSSProperties>;\n}\n\nexport const useViewContexts = <T>({\n  controller,\n  props,\n  semanticClassNames,\n  semanticStyles,\n}: ViewContextsOptions<T>) => {\n  const {\n    components,\n    expandable,\n    getPopupContainer,\n    onHeaderRow,\n    onRow,\n    rowClassName,\n    rowHoverable = true,\n    rowSelection,\n    showSorterTooltip = DEFAULT_SORTER_TOOLTIP,\n    sortDirections = DEFAULT_SORT_DIRECTIONS,\n    virtual,\n  } = props;\n  const { model, selection, state, tableLocale } = controller;\n  const { expandedRowClassName, expandedRowRender, expandRowByClick, forceRender, rowExpandable } =\n    expandable ?? {};\n  const {\n    columnTitle,\n    getTitleCheckboxProps,\n    hideSelectAll,\n    renderCell,\n    type: selectionType = 'checkbox',\n  } = rowSelection ?? {};\n  const leafColumns = model.leafColumns;\n\n  const componentSet = useMemo((): TableComponentSet => {\n    const fallback = virtual ? 'div' : undefined;\n    return {\n      bodyCell: components?.body?.cell ?? fallback,\n      bodyRow: components?.body?.row ?? fallback,\n      bodyWrapper: components?.body?.wrapper,\n      headerCell: components?.header?.cell,\n      headerRow: components?.header?.row,\n      headerTable: components?.header?.table,\n      headerWrapper: components?.header?.wrapper,\n      table: components?.table,\n    };\n  }, [components, virtual]);\n\n  const toggleExpand = useEventCallback((record: T) => controller.toggleExpand(record));\n  const fixColumn = controller.horizonScroll && leafColumns.some((leaf) => leaf.fixed);\n\n  const viewValue = useMemo(\n    (): TableViewValue<T> => ({\n      components: componentSet,\n      expand: {\n        expandedRowClassName,\n        expandedRowRender,\n        expandIcon: controller.expandIcon,\n        expandRowByClick,\n        forceRender,\n        indentSize: controller.indentSize,\n        nestIconColumnIndex: controller.nestIconColumnIndex,\n        rowExpandable,\n        toggle: toggleExpand,\n        type: controller.expandType,\n      },\n      fixColumn,\n      getRowKey: controller.getRowKey,\n      horizonScroll: controller.horizonScroll,\n      leafColumns,\n      onRow,\n      prefixCls: PREFIX_CLS,\n      rowClassName,\n      rowHoverable,\n      semanticClassNames,\n      semanticStyles,\n      virtualWidths: controller.virtualWidths,\n    }),\n    [\n      componentSet,\n      expandedRowClassName,\n      expandedRowRender,\n      expandRowByClick,\n      forceRender,\n      rowExpandable,\n      controller.expandIcon,\n      controller.indentSize,\n      controller.nestIconColumnIndex,\n      toggleExpand,\n      controller.expandType,\n      fixColumn,\n      controller.getRowKey,\n      controller.horizonScroll,\n      leafColumns,\n      onRow,\n      rowClassName,\n      rowHoverable,\n      semanticClassNames,\n      semanticStyles,\n      controller.virtualWidths,\n    ],\n  );\n\n  const selectionValue = useMemo(\n    (): SelectionView<T> => ({\n      actions: selection.actions,\n      checkboxPropsMap: selection.checkboxPropsMap,\n      expandType: controller.expandType,\n      getRowKey: controller.getRowKey,\n      getTitleCheckboxProps,\n      hideSelectAll,\n      locale: tableLocale,\n      renderCell,\n      selections: selection.mergedSelections,\n      title: columnTitle,\n      type: selectionType,\n    }),\n    [\n      selection.actions,\n      selection.checkboxPropsMap,\n      selection.mergedSelections,\n      controller.expandType,\n      controller.getRowKey,\n      getTitleCheckboxProps,\n      hideSelectAll,\n      renderCell,\n      columnTitle,\n      selectionType,\n      tableLocale,\n    ],\n  );\n\n  const triggerSort = useEventCallback(state.triggerSort);\n  const triggerFilter = useEventCallback(state.triggerFilter);\n  const headerValue = useMemo(\n    (): HeaderView<T> => ({\n      filterStates: state.filterStates,\n      getPopupContainer,\n      locale: tableLocale,\n      onHeaderRow,\n      showSorterTooltip,\n      sortDirections,\n      sortStates: state.sortStates,\n      titleProps: state.titleProps,\n      triggerFilter,\n      triggerSort,\n    }),\n    [\n      state.filterStates,\n      getPopupContainer,\n      tableLocale,\n      onHeaderRow,\n      showSorterTooltip,\n      sortDirections,\n      state.sortStates,\n      state.titleProps,\n      triggerFilter,\n      triggerSort,\n    ],\n  );\n\n  return { headerValue, selectionValue, viewValue };\n};\n"],"mappings":";;;;;AAWA,MAAM,yBAAkD,EAAE,QAAQ,cAAc;AAShF,MAAa,mBAAsB,EACjC,YACA,OACA,oBACA,qBAC4B;CAC5B,MAAM,EACJ,YACA,YACA,mBACA,aACA,OACA,cACA,eAAe,MACf,cACA,oBAAoB,wBACpB,iBAAiB,yBACjB,YACE;CACJ,MAAM,EAAE,OAAO,WAAW,OAAO,gBAAgB;CACjD,MAAM,EAAE,sBAAsB,mBAAmB,kBAAkB,aAAa,kBAC9E,cAAc,CAAC;CACjB,MAAM,EACJ,aACA,uBACA,eACA,YACA,MAAM,gBAAgB,eACpB,gBAAgB,CAAC;CACrB,MAAM,cAAc,MAAM;CAE1B,MAAM,eAAe,cAAiC;EACpD,MAAM,WAAW,UAAU,QAAQ,KAAA;EACnC,OAAO;GACL,UAAU,YAAY,MAAM,QAAQ;GACpC,SAAS,YAAY,MAAM,OAAO;GAClC,aAAa,YAAY,MAAM;GAC/B,YAAY,YAAY,QAAQ;GAChC,WAAW,YAAY,QAAQ;GAC/B,aAAa,YAAY,QAAQ;GACjC,eAAe,YAAY,QAAQ;GACnC,OAAO,YAAY;EACrB;CACF,GAAG,CAAC,YAAY,OAAO,CAAC;CAExB,MAAM,eAAe,kBAAkB,WAAc,WAAW,aAAa,MAAM,CAAC;CACpF,MAAM,YAAY,WAAW,iBAAiB,YAAY,MAAM,SAAS,KAAK,KAAK;CAEnF,MAAM,YAAY,eACU;EACxB,YAAY;EACZ,QAAQ;GACN;GACA;GACA,YAAY,WAAW;GACvB;GACA;GACA,YAAY,WAAW;GACvB,qBAAqB,WAAW;GAChC;GACA,QAAQ;GACR,MAAM,WAAW;EACnB;EACA;EACA,WAAW,WAAW;EACtB,eAAe,WAAW;EAC1B;EACA;EACA,WAAW;EACX;EACA;EACA;EACA;EACA,eAAe,WAAW;CAC5B,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA,WAAW;EACX,WAAW;EACX,WAAW;EACX;EACA,WAAW;EACX;EACA,WAAW;EACX,WAAW;EACX;EACA;EACA;EACA;EACA;EACA;EACA,WAAW;CACb,CACF;CAEA,MAAM,iBAAiB,eACI;EACvB,SAAS,UAAU;EACnB,kBAAkB,UAAU;EAC5B,YAAY,WAAW;EACvB,WAAW,WAAW;EACtB;EACA;EACA,QAAQ;EACR;EACA,YAAY,UAAU;EACtB,OAAO;EACP,MAAM;CACR,IACA;EACE,UAAU;EACV,UAAU;EACV,UAAU;EACV,WAAW;EACX,WAAW;EACX;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,MAAM,cAAc,iBAAiB,MAAM,WAAW;CACtD,MAAM,gBAAgB,iBAAiB,MAAM,aAAa;CA4B1D,OAAO;EAAE,aA3BW,eACI;GACpB,cAAc,MAAM;GACpB;GACA,QAAQ;GACR;GACA;GACA;GACA,YAAY,MAAM;GAClB,YAAY,MAAM;GAClB;GACA;EACF,IACA;GACE,MAAM;GACN;GACA;GACA;GACA;GACA;GACA,MAAM;GACN,MAAM;GACN;GACA;EACF,CAGiB;EAAG;EAAgB;CAAU;AAClD"}

package/es/Table/semantic.mjs

@@ -0,0 +1,45 @@
+import { useRef } from "react";
+import "clsx";
+//#region src/Table/semantic.ts
+const resolveSemantic = (value, info) => typeof value === "function" ? value(info) : value;
+const normalizeClassNames = (classNames) => {
+	const { body, header, pagination, ...rest } = classNames ?? {};
+	return {
+		...rest,
+		body: { ...body },
+		header: { ...header },
+		pagination: { ...pagination }
+	};
+};
+const normalizeStyles = (styles) => {
+	const { body, header, pagination, ...rest } = styles ?? {};
+	return {
+		...rest,
+		body: { ...body },
+		header: { ...header },
+		pagination: { ...pagination }
+	};
+};
+const sameValue = (a, b, depth) => {
+	if (Object.is(a, b)) return true;
+	if (depth === 0 || typeof a !== "object" || typeof b !== "object" || !a || !b) return false;
+	const keysA = Object.keys(a);
+	if (keysA.length !== Object.keys(b).length) return false;
+	return keysA.every((key) => sameValue(a[key], b[key], depth - 1));
+};
+const useStableValue = (value) => {
+	const ref = useRef(value);
+	if (!sameValue(ref.current, value, 3)) ref.current = value;
+	return ref.current;
+};
+const useStableSemantic = (classNames, styles, props) => {
+	const info = { props };
+	return {
+		classNames: useStableValue(normalizeClassNames(resolveSemantic(classNames, info))),
+		styles: useStableValue(normalizeStyles(resolveSemantic(styles, info)))
+	};
+};
+//#endregion
+export { normalizeClassNames, normalizeStyles, resolveSemantic, useStableSemantic };
+
+//# sourceMappingURL=semantic.mjs.map

package/es/Table/semantic.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"semantic.mjs","names":[],"sources":["../../src/Table/semantic.ts"],"sourcesContent":["import clsx from 'clsx';\nimport { type CSSProperties, useRef } from 'react';\n\nimport type { PaginationSemanticName } from '@/Pagination/type';\n\nimport type {\n  TableClassNames,\n  TableComponentsSemanticName,\n  TableProps,\n  TableSemanticInfo,\n  TableStyles,\n} from './type';\n\ntype Components<V> = Partial<Record<TableComponentsSemanticName, V>>;\n\nexport interface NormalizedSemantic<V> {\n  body: Components<V>;\n  content?: V;\n  footer?: V;\n  header: Components<V>;\n  pagination: Partial<Record<PaginationSemanticName, V>>;\n  root?: V;\n  section?: V;\n  title?: V;\n}\n\nexport const resolveSemantic = <V, T>(\n  value: V | ((info: TableSemanticInfo<T>) => V) | undefined,\n  info: TableSemanticInfo<T>,\n): V | undefined =>\n  typeof value === 'function' ? (value as (info: TableSemanticInfo<T>) => V)(info) : value;\n\nexport const normalizeClassNames = (\n  classNames: TableClassNames | undefined,\n): NormalizedSemantic<string> => {\n  const { body, header, pagination, ...rest } = classNames ?? {};\n  return { ...rest, body: { ...body }, header: { ...header }, pagination: { ...pagination } };\n};\n\nexport const normalizeStyles = (\n  styles: TableStyles | undefined,\n): NormalizedSemantic<CSSProperties> => {\n  const { body, header, pagination, ...rest } = styles ?? {};\n  return { ...rest, body: { ...body }, header: { ...header }, pagination: { ...pagination } };\n};\n\nexport const mergeClassName = (...names: (string | false | null | undefined)[]) =>\n  clsx(...names) || undefined;\n\nexport const mergeStyle = (...styles: (CSSProperties | undefined)[]) =>\n  styles.some(Boolean) ? Object.assign({}, ...styles) : undefined;\n\nconst sameValue = (a: unknown, b: unknown, depth: number): boolean => {\n  if (Object.is(a, b)) return true;\n  if (depth === 0 || typeof a !== 'object' || typeof b !== 'object' || !a || !b) return false;\n  const keysA = Object.keys(a);\n  if (keysA.length !== Object.keys(b).length) return false;\n  return keysA.every((key) => sameValue((a as any)[key], (b as any)[key], depth - 1));\n};\n\nconst useStableValue = <V>(value: V): V => {\n  const ref = useRef(value);\n  if (!sameValue(ref.current, value, 3)) ref.current = value;\n  return ref.current;\n};\n\nexport const useStableSemantic = <T>(\n  classNames: TableClassNames | ((info: TableSemanticInfo<T>) => TableClassNames) | undefined,\n  styles: TableStyles | ((info: TableSemanticInfo<T>) => TableStyles) | undefined,\n  props: TableProps<T>,\n) => {\n  const info = { props };\n  return {\n    classNames: useStableValue(normalizeClassNames(resolveSemantic(classNames, info))),\n    styles: useStableValue(normalizeStyles(resolveSemantic(styles, info))),\n  };\n};\n"],"mappings":";;;AA0BA,MAAa,mBACX,OACA,SAEA,OAAO,UAAU,aAAc,MAA4C,IAAI,IAAI;AAErF,MAAa,uBACX,eAC+B;CAC/B,MAAM,EAAE,MAAM,QAAQ,YAAY,GAAG,SAAS,cAAc,CAAC;CAC7D,OAAO;EAAE,GAAG;EAAM,MAAM,EAAE,GAAG,KAAK;EAAG,QAAQ,EAAE,GAAG,OAAO;EAAG,YAAY,EAAE,GAAG,WAAW;CAAE;AAC5F;AAEA,MAAa,mBACX,WACsC;CACtC,MAAM,EAAE,MAAM,QAAQ,YAAY,GAAG,SAAS,UAAU,CAAC;CACzD,OAAO;EAAE,GAAG;EAAM,MAAM,EAAE,GAAG,KAAK;EAAG,QAAQ,EAAE,GAAG,OAAO;EAAG,YAAY,EAAE,GAAG,WAAW;CAAE;AAC5F;AAQA,MAAM,aAAa,GAAY,GAAY,UAA2B;CACpE,IAAI,OAAO,GAAG,GAAG,CAAC,GAAG,OAAO;CAC5B,IAAI,UAAU,KAAK,OAAO,MAAM,YAAY,OAAO,MAAM,YAAY,CAAC,KAAK,CAAC,GAAG,OAAO;CACtF,MAAM,QAAQ,OAAO,KAAK,CAAC;CAC3B,IAAI,MAAM,WAAW,OAAO,KAAK,CAAC,CAAC,CAAC,QAAQ,OAAO;CACnD,OAAO,MAAM,OAAO,QAAQ,UAAW,EAAU,MAAO,EAAU,MAAM,QAAQ,CAAC,CAAC;AACpF;AAEA,MAAM,kBAAqB,UAAgB;CACzC,MAAM,MAAM,OAAO,KAAK;CACxB,IAAI,CAAC,UAAU,IAAI,SAAS,OAAO,CAAC,GAAG,IAAI,UAAU;CACrD,OAAO,IAAI;AACb;AAEA,MAAa,qBACX,YACA,QACA,UACG;CACH,MAAM,OAAO,EAAE,MAAM;CACrB,OAAO;EACL,YAAY,eAAe,oBAAoB,gBAAgB,YAAY,IAAI,CAAC,CAAC;EACjF,QAAQ,eAAe,gBAAgB,gBAAgB,QAAQ,IAAI,CAAC,CAAC;CACvE;AACF"}

package/es/Table/store/createTableStore.d.mts

@@ -0,0 +1 @@
+import { Key } from "react";

package/es/Table/store/createTableStore.mjs

@@ -0,0 +1,40 @@
+//#region src/Table/store/createTableStore.ts
+const EMPTY_KEYS = /* @__PURE__ */ new Set();
+const EMPTY_COLUMNS = /* @__PURE__ */ new Set();
+const NO_HOVER = [-1, -1];
+const EMPTY_SUMMARY = {
+	checked: false,
+	disabled: false,
+	indeterminate: false
+};
+const createTableStore = (initial) => {
+	let state = {
+		expandedKeys: EMPTY_KEYS,
+		halfSelectedKeys: EMPTY_KEYS,
+		hover: NO_HOVER,
+		selectedKeys: EMPTY_KEYS,
+		selectionSummary: EMPTY_SUMMARY,
+		sortedColumns: EMPTY_COLUMNS,
+		...initial
+	};
+	const listeners = /* @__PURE__ */ new Set();
+	return {
+		getState: () => state,
+		setState: (patch) => {
+			if (!Object.keys(patch).some((key) => !Object.is(patch[key], state[key]))) return;
+			state = {
+				...state,
+				...patch
+			};
+			listeners.forEach((listener) => listener());
+		},
+		subscribe: (listener) => {
+			listeners.add(listener);
+			return () => listeners.delete(listener);
+		}
+	};
+};
+//#endregion
+export { createTableStore };
+
+//# sourceMappingURL=createTableStore.mjs.map

package/es/Table/store/createTableStore.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"createTableStore.mjs","names":[],"sources":["../../../src/Table/store/createTableStore.ts"],"sourcesContent":["import type { Key } from 'react';\n\nexport interface SelectionSummary {\n  checked: boolean;\n  disabled: boolean;\n  indeterminate: boolean;\n}\n\nexport interface TableStoreState {\n  expandedKeys: ReadonlySet<Key>;\n  halfSelectedKeys: ReadonlySet<Key>;\n  hover: readonly [number, number];\n  selectedKeys: ReadonlySet<Key>;\n  selectionSummary: SelectionSummary;\n  sortedColumns: ReadonlySet<string>;\n}\n\nexport interface TableStore {\n  getState: () => TableStoreState;\n  setState: (patch: Partial<TableStoreState>) => void;\n  subscribe: (listener: () => void) => () => void;\n}\n\nconst EMPTY_KEYS: ReadonlySet<Key> = new Set();\nconst EMPTY_COLUMNS: ReadonlySet<string> = new Set();\nconst NO_HOVER = [-1, -1] as const;\nconst EMPTY_SUMMARY: SelectionSummary = { checked: false, disabled: false, indeterminate: false };\n\nexport const createTableStore = (initial?: Partial<TableStoreState>): TableStore => {\n  let state: TableStoreState = {\n    expandedKeys: EMPTY_KEYS,\n    halfSelectedKeys: EMPTY_KEYS,\n    hover: NO_HOVER,\n    selectedKeys: EMPTY_KEYS,\n    selectionSummary: EMPTY_SUMMARY,\n    sortedColumns: EMPTY_COLUMNS,\n    ...initial,\n  };\n  const listeners = new Set<() => void>();\n\n  return {\n    getState: () => state,\n    setState: (patch) => {\n      const changed = (Object.keys(patch) as (keyof TableStoreState)[]).some(\n        (key) => !Object.is(patch[key], state[key]),\n      );\n      if (!changed) return;\n      state = { ...state, ...patch };\n      listeners.forEach((listener) => listener());\n    },\n    subscribe: (listener) => {\n      listeners.add(listener);\n      return () => listeners.delete(listener);\n    },\n  };\n};\n"],"mappings":";AAuBA,MAAM,6BAA+B,IAAI,IAAI;AAC7C,MAAM,gCAAqC,IAAI,IAAI;AACnD,MAAM,WAAW,CAAC,IAAI,EAAE;AACxB,MAAM,gBAAkC;CAAE,SAAS;CAAO,UAAU;CAAO,eAAe;AAAM;AAEhG,MAAa,oBAAoB,YAAmD;CAClF,IAAI,QAAyB;EAC3B,cAAc;EACd,kBAAkB;EAClB,OAAO;EACP,cAAc;EACd,kBAAkB;EAClB,eAAe;EACf,GAAG;CACL;CACA,MAAM,4BAAY,IAAI,IAAgB;CAEtC,OAAO;EACL,gBAAgB;EAChB,WAAW,UAAU;GAInB,IAAI,CAHa,OAAO,KAAK,KAAK,CAAC,CAA+B,MAC/D,QAAQ,CAAC,OAAO,GAAG,MAAM,MAAM,MAAM,IAAI,CAEjC,GAAG;GACd,QAAQ;IAAE,GAAG;IAAO,GAAG;GAAM;GAC7B,UAAU,SAAS,aAAa,SAAS,CAAC;EAC5C;EACA,YAAY,aAAa;GACvB,UAAU,IAAI,QAAQ;GACtB,aAAa,UAAU,OAAO,QAAQ;EACxC;CACF;AACF"}

package/es/Table/store/hooks.mjs

@@ -0,0 +1,24 @@
+"use client";
+import { createTableStore } from "./createTableStore.mjs";
+import { createContext, use, useCallback, useSyncExternalStore } from "react";
+//#region src/Table/store/hooks.ts
+const fallbackStore = createTableStore();
+const TableStoreContext = createContext(fallbackStore);
+const TableStoreProvider = TableStoreContext.Provider;
+const useTableStoreInstance = () => use(TableStoreContext);
+const useTableStore = (selector) => {
+	const store = use(TableStoreContext);
+	const getSnapshot = useCallback(() => selector(store.getState()), [store, selector]);
+	return useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+};
+const useRowSelected = (key) => useTableStore(useCallback((state) => state.selectedKeys.has(key), [key]));
+const useRowHalfSelected = (key) => useTableStore(useCallback((state) => state.halfSelectedKeys.has(key), [key]));
+const useRowExpanded = (key) => useTableStore(useCallback((state) => state.expandedKeys.has(key), [key]));
+const useCellHovered = (index, rowSpan) => useTableStore(useCallback(({ hover: [start, end] }) => start <= index + rowSpan - 1 && end >= index, [index, rowSpan]));
+const useColumnSorted = (columnId) => useTableStore(useCallback((state) => state.sortedColumns.has(columnId), [columnId]));
+const selectSummary = (state) => state.selectionSummary;
+const useSelectionSummary = () => useTableStore(selectSummary);
+//#endregion
+export { TableStoreProvider, useCellHovered, useColumnSorted, useRowExpanded, useRowHalfSelected, useRowSelected, useSelectionSummary, useTableStore, useTableStoreInstance };
+
+//# sourceMappingURL=hooks.mjs.map

package/es/Table/store/hooks.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.mjs","names":[],"sources":["../../../src/Table/store/hooks.ts"],"sourcesContent":["'use client';\n\nimport { createContext, type Key, use, useCallback, useSyncExternalStore } from 'react';\n\nimport { createTableStore, type TableStore, type TableStoreState } from './createTableStore';\n\nconst fallbackStore = createTableStore();\n\nconst TableStoreContext = createContext<TableStore>(fallbackStore);\n\nexport const TableStoreProvider = TableStoreContext.Provider;\n\nexport const useTableStoreInstance = () => use(TableStoreContext);\n\nexport const useTableStore = <S>(selector: (state: TableStoreState) => S): S => {\n  const store = use(TableStoreContext);\n  const getSnapshot = useCallback(() => selector(store.getState()), [store, selector]);\n  return useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);\n};\n\nexport const useRowSelected = (key: Key) =>\n  useTableStore(useCallback((state: TableStoreState) => state.selectedKeys.has(key), [key]));\n\nexport const useRowHalfSelected = (key: Key) =>\n  useTableStore(useCallback((state: TableStoreState) => state.halfSelectedKeys.has(key), [key]));\n\nexport const useRowExpanded = (key: Key) =>\n  useTableStore(useCallback((state: TableStoreState) => state.expandedKeys.has(key), [key]));\n\nexport const useCellHovered = (index: number, rowSpan: number) =>\n  useTableStore(\n    useCallback(\n      ({ hover: [start, end] }: TableStoreState) => start <= index + rowSpan - 1 && end >= index,\n      [index, rowSpan],\n    ),\n  );\n\nexport const useColumnSorted = (columnId: string) =>\n  useTableStore(\n    useCallback((state: TableStoreState) => state.sortedColumns.has(columnId), [columnId]),\n  );\n\nconst selectSummary = (state: TableStoreState) => state.selectionSummary;\n\nexport const useSelectionSummary = () => useTableStore(selectSummary);\n"],"mappings":";;;;AAMA,MAAM,gBAAgB,iBAAiB;AAEvC,MAAM,oBAAoB,cAA0B,aAAa;AAEjE,MAAa,qBAAqB,kBAAkB;AAEpD,MAAa,8BAA8B,IAAI,iBAAiB;AAEhE,MAAa,iBAAoB,aAA+C;CAC9E,MAAM,QAAQ,IAAI,iBAAiB;CACnC,MAAM,cAAc,kBAAkB,SAAS,MAAM,SAAS,CAAC,GAAG,CAAC,OAAO,QAAQ,CAAC;CACnF,OAAO,qBAAqB,MAAM,WAAW,aAAa,WAAW;AACvE;AAEA,MAAa,kBAAkB,QAC7B,cAAc,aAAa,UAA2B,MAAM,aAAa,IAAI,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC;AAE3F,MAAa,sBAAsB,QACjC,cAAc,aAAa,UAA2B,MAAM,iBAAiB,IAAI,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC;AAE/F,MAAa,kBAAkB,QAC7B,cAAc,aAAa,UAA2B,MAAM,aAAa,IAAI,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC;AAE3F,MAAa,kBAAkB,OAAe,YAC5C,cACE,aACG,EAAE,OAAO,CAAC,OAAO,WAA4B,SAAS,QAAQ,UAAU,KAAK,OAAO,OACrF,CAAC,OAAO,OAAO,CACjB,CACF;AAEF,MAAa,mBAAmB,aAC9B,cACE,aAAa,UAA2B,MAAM,cAAc,IAAI,QAAQ,GAAG,CAAC,QAAQ,CAAC,CACvF;AAEF,MAAM,iBAAiB,UAA2B,MAAM;AAExD,MAAa,4BAA4B,cAAc,aAAa"}