@expcat/tigercat-react 2.1.2 → 2.1.4

package/dist/chunk-TTYKX6G4.mjs

@@ -0,0 +1,355 @@
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/VirtualTable.tsx
+import {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import {
+  classNames,
+  isActivationKey,
+  resolveLocaleText,
+  mergeTigerLocale,
+  calculateVirtualColumnRange,
+  EMPTY_VIRTUAL_TABLE_COLUMNS,
+  EMPTY_VIRTUAL_TABLE_ROWS,
+  getVirtualTableContainerClasses,
+  getVirtualTableRowClasses,
+  getVirtualTableRowWindow,
+  getVirtualTableSpacerHeights,
+  getVirtualTableColumnWidths,
+  getNextVirtualTableSelection,
+  getVirtualTableFixedInfo,
+  getVirtualTableFixedCellStyle,
+  getVirtualTableFixedCellClasses,
+  getVirtualTableFixedHeaderCellClasses,
+  getTableColgroup,
+  isVirtualTableCellControlTarget,
+  resolveVirtualTableColumnVirtualization,
+  resolveVirtualTableRowIdentity,
+  resolveVirtualTableSelectedKeys,
+  resolveVirtualTableWidth,
+  tableBaseClasses,
+  tableVirtualSpacerCellClasses,
+  virtualTableHeaderClasses,
+  virtualTableHeaderCellClasses,
+  virtualTableCellClasses,
+  virtualTableEmptyClasses,
+  virtualTableLoadingClasses,
+  virtualTableRowFocusClasses,
+  VIRTUAL_TABLE_HEADER_ROW_HEIGHT
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+function alignClass(align) {
+  if (align === "center") return "text-center";
+  if (align === "right") return "text-end";
+  return "text-start";
+}
+function VirtualTableInner({
+  dataSource: dataSourceProp,
+  columns: columnsProp,
+  virtualItemHeight = 48,
+  virtualHeight = 400,
+  width: widthProp = "auto",
+  overscan = 5,
+  stickyHeader = true,
+  virtualizeColumns = false,
+  rowKey,
+  rowClassName,
+  loading = false,
+  emptyText,
+  locale,
+  rowSelection,
+  striped = false,
+  bordered = false,
+  className,
+  id,
+  style,
+  onRowClick,
+  onSelectionChange,
+  ...rest
+}, ref) {
+  const dataSource = dataSourceProp ?? EMPTY_VIRTUAL_TABLE_ROWS;
+  const columns = columnsProp ?? EMPTY_VIRTUAL_TABLE_COLUMNS;
+  const width = resolveVirtualTableWidth(widthProp);
+  const config = useTigerConfig();
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const containerRef = useRef(null);
+  const [scrollTop, setScrollTop] = useState(0);
+  const [scrollLeft, setScrollLeft] = useState(0);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [uncontrolledSelectedKeys, setUncontrolledSelectedKeys] = useState(
+    () => resolveVirtualTableSelectedKeys(rowSelection?.defaultSelectedRowKeys)
+  );
+  const isSelectionControlled = rowSelection?.selectedRowKeys !== void 0;
+  const selectedKeys = isSelectionControlled ? resolveVirtualTableSelectedKeys(rowSelection.selectedRowKeys) : uncontrolledSelectedKeys;
+  const hasSelection = !!rowSelection;
+  const isInteractive = !!onRowClick || hasSelection;
+  const headerHeight = stickyHeader ? VIRTUAL_TABLE_HEADER_ROW_HEIGHT : 0;
+  const range = useMemo(
+    () => getVirtualTableRowWindow(
+      scrollTop,
+      virtualHeight,
+      dataSource.length,
+      virtualItemHeight,
+      overscan,
+      headerHeight
+    ),
+    [scrollTop, virtualHeight, dataSource.length, virtualItemHeight, overscan, headerHeight]
+  );
+  const spacers = getVirtualTableSpacerHeights(range, virtualItemHeight);
+  const visibleData = useMemo(
+    () => dataSource.slice(range.start, range.end),
+    [dataSource, range.start, range.end]
+  );
+  const selectedSet = useMemo(() => new Set(selectedKeys), [selectedKeys]);
+  const scrollToIndex = useCallback(
+    (index) => {
+      const next = Math.max(0, index) * virtualItemHeight;
+      const el = containerRef.current;
+      if (el) el.scrollTop = next;
+      setScrollTop(next);
+    },
+    [virtualItemHeight]
+  );
+  useImperativeHandle(ref, () => ({ scrollToIndex }), [scrollToIndex]);
+  const commitSelection = useCallback(
+    (nextKeys) => {
+      if (!isSelectionControlled) {
+        setUncontrolledSelectedKeys(nextKeys);
+      }
+      onSelectionChange?.(nextKeys);
+    },
+    [isSelectionControlled, onSelectionChange]
+  );
+  const toggleRowSelection = useCallback(
+    (key, row) => {
+      if (!rowSelection || rowSelection.getCheckboxProps?.(row)?.disabled) return;
+      commitSelection(
+        getNextVirtualTableSelection({
+          type: rowSelection.type,
+          selectedKeys,
+          key
+        })
+      );
+    },
+    [commitSelection, rowSelection, selectedKeys]
+  );
+  const onScroll = useCallback(() => {
+    if (containerRef.current) {
+      setScrollTop(containerRef.current.scrollTop);
+      setScrollLeft(containerRef.current.scrollLeft);
+    }
+  }, []);
+  const containerClasses = useMemo(
+    () => getVirtualTableContainerClasses(bordered, className),
+    [bordered, className]
+  );
+  const fixedInfo = useMemo(() => getVirtualTableFixedInfo(columns), [columns]);
+  const columnWidths = useMemo(() => getVirtualTableColumnWidths(columns), [columns]);
+  const colVirtual = resolveVirtualTableColumnVirtualization({
+    virtualizeColumns,
+    hasFixedColumns: fixedInfo.hasFixedColumns,
+    width
+  });
+  const colRange = useMemo(
+    () => colVirtual.active ? calculateVirtualColumnRange(scrollLeft, colVirtual.viewportWidth, columnWidths) : void 0,
+    [colVirtual, scrollLeft, columnWidths]
+  );
+  const visibleColumns = colRange ? columns.slice(colRange.start, colRange.end) : columns;
+  const colIndexOffset = colRange ? colRange.start : 0;
+  const colgroupEntries = getTableColgroup({
+    columns: visibleColumns,
+    size: "md",
+    hasSelectionColumn: false,
+    expand: false
+  });
+  const colSpan = visibleColumns.length + (colRange && colRange.leftPad > 0 ? 1 : 0) + (colRange && colRange.rightPad > 0 ? 1 : 0);
+  const resolveRowClassName = (row, index) => typeof rowClassName === "function" ? rowClassName(row, index) : rowClassName;
+  const focusIndex = visibleData.some((_, localIdx) => range.start + localIdx === activeIndex) ? activeIndex : range.start;
+  const moveActive = (nextIndex) => {
+    const clamped = Math.max(0, Math.min(dataSource.length - 1, nextIndex));
+    setActiveIndex(clamped);
+    if (clamped < range.start || clamped >= range.end) {
+      scrollToIndex(clamped);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      id,
+      className: containerClasses,
+      style: {
+        height: `${virtualHeight}px`,
+        ...width !== "auto" ? { width: `${width}px` } : {},
+        ...style
+      },
+      onScroll,
+      "aria-busy": loading || void 0,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "table",
+          {
+            className: classNames(tableBaseClasses, "table-fixed"),
+            style: fixedInfo.minTableWidth > 0 ? { minWidth: `${fixedInfo.minTableWidth}px` } : void 0,
+            "aria-rowcount": dataSource.length + 1,
+            "aria-colcount": columns.length,
+            children: [
+              colgroupEntries.length > 0 && /* @__PURE__ */ jsxs("colgroup", { children: [
+                colRange && colRange.leftPad > 0 && /* @__PURE__ */ jsx("col", { style: { width: `${colRange.leftPad}px` } }),
+                colgroupEntries.map((entry) => /* @__PURE__ */ jsx(
+                  "col",
+                  {
+                    "data-tiger-table-col": entry.key,
+                    style: entry.width ? { width: entry.width } : void 0
+                  },
+                  entry.key
+                )),
+                colRange && colRange.rightPad > 0 && /* @__PURE__ */ jsx("col", { style: { width: `${colRange.rightPad}px` } })
+              ] }),
+              /* @__PURE__ */ jsx("thead", { className: stickyHeader ? virtualTableHeaderClasses : void 0, children: /* @__PURE__ */ jsxs("tr", { "aria-rowindex": 1, children: [
+                colRange && colRange.leftPad > 0 && /* @__PURE__ */ jsx("th", { "aria-hidden": true, style: { width: `${colRange.leftPad}px`, padding: 0 } }),
+                visibleColumns.map((col) => {
+                  const widthStyle = col.width ? { width: typeof col.width === "number" ? `${col.width}px` : col.width } : {};
+                  const stickyStyle = getVirtualTableFixedCellStyle(col.key, fixedInfo);
+                  return /* @__PURE__ */ jsx(
+                    "th",
+                    {
+                      className: classNames(
+                        virtualTableHeaderCellClasses,
+                        alignClass(col.align),
+                        getVirtualTableFixedHeaderCellClasses(col, fixedInfo, stickyHeader)
+                      ),
+                      style: { ...widthStyle, ...stickyStyle },
+                      children: col.renderHeader ? col.renderHeader() : col.title ?? ""
+                    },
+                    col.key
+                  );
+                }),
+                colRange && colRange.rightPad > 0 && /* @__PURE__ */ jsx("th", { "aria-hidden": true, style: { width: `${colRange.rightPad}px`, padding: 0 } })
+              ] }) }),
+              /* @__PURE__ */ jsxs("tbody", { children: [
+                spacers.top > 0 && /* @__PURE__ */ jsx("tr", { "data-tiger-table-virtual-spacer": "", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+                  "td",
+                  {
+                    colSpan: Math.max(1, colSpan),
+                    className: tableVirtualSpacerCellClasses,
+                    style: { height: `${spacers.top}px` }
+                  }
+                ) }),
+                visibleData.map((row, localIdx) => {
+                  const globalIdx = range.start + localIdx;
+                  const identity = rowSelection?.getRowKey ? { key: rowSelection.getRowKey(row), domKey: rowSelection.getRowKey(row) } : resolveVirtualTableRowIdentity(row, globalIdx, rowKey);
+                  const isSelected = identity.key !== void 0 && selectedSet.has(identity.key);
+                  const isDisabled = !!rowSelection?.getCheckboxProps?.(row)?.disabled;
+                  const tabIndex = loading || !isInteractive || isDisabled ? void 0 : globalIdx === focusIndex ? 0 : -1;
+                  const activate = (event) => {
+                    if (event && isVirtualTableCellControlTarget(event.target)) return;
+                    onRowClick?.(row, globalIdx);
+                    if (hasSelection && identity.key !== void 0 && !isDisabled) {
+                      toggleRowSelection(identity.key, row);
+                    }
+                  };
+                  return /* @__PURE__ */ jsxs(
+                    "tr",
+                    {
+                      className: classNames(
+                        getVirtualTableRowClasses(globalIdx, striped, isSelected),
+                        isInteractive && virtualTableRowFocusClasses,
+                        resolveRowClassName(row, globalIdx)
+                      ),
+                      style: { height: `${virtualItemHeight}px`, overflow: "hidden" },
+                      "aria-rowindex": globalIdx + 2,
+                      "aria-selected": hasSelection ? isSelected : void 0,
+                      "aria-disabled": isDisabled || void 0,
+                      tabIndex,
+                      onClick: isInteractive ? activate : void 0,
+                      onKeyDown: isInteractive ? (e) => {
+                        if (isActivationKey(e)) {
+                          e.preventDefault();
+                          activate(e);
+                          return;
+                        }
+                        if (e.key === "ArrowDown") {
+                          e.preventDefault();
+                          moveActive(globalIdx + 1);
+                        }
+                        if (e.key === "ArrowUp") {
+                          e.preventDefault();
+                          moveActive(globalIdx - 1);
+                        }
+                      } : void 0,
+                      children: [
+                        colRange && colRange.leftPad > 0 && /* @__PURE__ */ jsx("td", { "aria-hidden": true, style: { width: `${colRange.leftPad}px`, padding: 0 } }),
+                        visibleColumns.map((col, colIdx) => {
+                          const dataKey = col.dataKey || col.key;
+                          const value = row[dataKey];
+                          return /* @__PURE__ */ jsx(
+                            "td",
+                            {
+                              "aria-colindex": colIndexOffset + colIdx + 1,
+                              className: classNames(
+                                virtualTableCellClasses,
+                                alignClass(col.align),
+                                getVirtualTableFixedCellClasses({
+                                  column: col,
+                                  record: row,
+                                  rowIndex: globalIdx,
+                                  striped,
+                                  selected: isSelected,
+                                  hoverable: true,
+                                  fixedInfo
+                                })
+                              ),
+                              style: {
+                                height: `${virtualItemHeight}px`,
+                                overflow: "hidden",
+                                ...getVirtualTableFixedCellStyle(col.key, fixedInfo)
+                              },
+                              children: col.render ? col.render(row, globalIdx) : value
+                            },
+                            col.key
+                          );
+                        }),
+                        colRange && colRange.rightPad > 0 && /* @__PURE__ */ jsx("td", { "aria-hidden": true, style: { width: `${colRange.rightPad}px`, padding: 0 } })
+                      ]
+                    },
+                    identity.domKey
+                  );
+                }),
+                spacers.bottom > 0 && /* @__PURE__ */ jsx("tr", { "data-tiger-table-virtual-spacer": "", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+                  "td",
+                  {
+                    colSpan: Math.max(1, colSpan),
+                    className: tableVirtualSpacerCellClasses,
+                    style: { height: `${spacers.bottom}px` }
+                  }
+                ) })
+              ] })
+            ]
+          }
+        ),
+        dataSource.length === 0 && !loading && /* @__PURE__ */ jsx("div", { className: virtualTableEmptyClasses, children: resolveLocaleText("No data", emptyText, mergedLocale?.common?.emptyText) }),
+        loading && /* @__PURE__ */ jsx("div", { className: virtualTableLoadingClasses, "aria-live": "polite", children: resolveLocaleText("Loading...", mergedLocale?.common?.loadingText) })
+      ]
+    }
+  );
+}
+var VirtualTable = forwardRef(VirtualTableInner);
+var VirtualTable_default = VirtualTable;
+
+export {
+  VirtualTable,
+  VirtualTable_default
+};

package/dist/chunk-UJTAHHQT.mjs

@@ -0,0 +1,41 @@
+// src/hooks/useControlledState.ts
+import { useCallback, useRef, useState } from "react";
+function useControlledState(options) {
+  const { value: controlledValue, defaultValue, onChange, postState } = options;
+  const postStateRef = useRef(postState);
+  postStateRef.current = postState;
+  const applyPostState = (next) => {
+    const fn = postStateRef.current;
+    return fn ? fn(next) : next;
+  };
+  const [internalValue, setInternalValue] = useState(() => applyPostState(defaultValue));
+  const isControlled = controlledValue !== void 0;
+  const raw = isControlled ? controlledValue : internalValue;
+  const value = applyPostState(raw);
+  if (isControlled && !Object.is(internalValue, value)) {
+    setInternalValue(value);
+  }
+  const valueRef = useRef(value);
+  valueRef.current = value;
+  const isControlledRef = useRef(isControlled);
+  isControlledRef.current = isControlled;
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const setValue = useCallback((next, ...args) => {
+    const prev = valueRef.current;
+    const resolvedRaw = typeof next === "function" ? next(prev) : next;
+    const post = postStateRef.current;
+    const resolved = post ? post(resolvedRaw) : resolvedRaw;
+    if (Object.is(resolved, prev)) return;
+    valueRef.current = resolved;
+    if (!isControlledRef.current) {
+      setInternalValue(resolved);
+    }
+    onChangeRef.current?.(resolved, ...args);
+  }, []);
+  return [value, setValue];
+}
+
+export {
+  useControlledState
+};

package/dist/chunk-UK5NGPTQ.mjs

@@ -0,0 +1,62 @@
+import {
+  LayoutContext
+} from "./chunk-5J7EDMS7.mjs";
+
+// src/components/Layout.tsx
+import React, { forwardRef, useCallback, useContext, useMemo, useState } from "react";
+import {
+  classNames,
+  getLayoutRootClasses,
+  injectLayoutGridStyles,
+  isLayoutSiderTypeName,
+  resolveLayoutHasSider
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
+function isSiderChild(child) {
+  if (!React.isValidElement(child)) return false;
+  const type = child.type;
+  return isLayoutSiderTypeName(type.displayName) || isLayoutSiderTypeName(type.name);
+}
+function childrenHaveSider(children) {
+  return React.Children.toArray(children).some(isSiderChild);
+}
+var Layout = forwardRef(function Layout2({ className, children, hasSider, direction, fullHeight = false, style, ...props }, ref) {
+  injectLayoutGridStyles();
+  const parent = useContext(LayoutContext);
+  const nested = parent != null;
+  const childIsSider = childrenHaveSider(children);
+  const resolvedHasSider = resolveLayoutHasSider({ hasSider, direction, childIsSider });
+  const [siderCollapsed, setSiderCollapsedState] = useState(false);
+  const [contentEl, setContentElState] = useState(null);
+  const setSiderCollapsed = useCallback((collapsed) => {
+    setSiderCollapsedState(collapsed);
+  }, []);
+  const setContentEl = useCallback((el) => {
+    setContentElState(el);
+  }, []);
+  const contextValue = useMemo(
+    () => ({
+      nested,
+      hasSider: resolvedHasSider,
+      siderCollapsed,
+      setSiderCollapsed,
+      contentEl,
+      setContentEl
+    }),
+    [nested, resolvedHasSider, siderCollapsed, setSiderCollapsed, contentEl, setContentEl]
+  );
+  const layoutClasses = classNames(
+    getLayoutRootClasses({
+      hasSider: resolvedHasSider,
+      nested,
+      fullHeight
+    }),
+    className
+  );
+  return /* @__PURE__ */ jsx(LayoutContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { ref, className: layoutClasses, style, ...props, children }) });
+});
+Layout.displayName = "TigerLayout";
+
+export {
+  Layout
+};