@expcat/tigercat-react 0.3.70 → 0.4.2

package/dist/chunk-PEGJ2KHC.js

@@ -0,0 +1,273 @@
+'use strict';
+
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/InputNumber.tsx
+var InputNumber = ({
+  value: controlledValue,
+  defaultValue,
+  size = "md",
+  status = "default",
+  min = -Infinity,
+  max = Infinity,
+  step = 1,
+  precision,
+  disabled = false,
+  readonly = false,
+  placeholder,
+  name,
+  id,
+  keyboard = true,
+  controls = true,
+  controlsPosition = "right",
+  formatter,
+  parser,
+  autoFocus = false,
+  onChange,
+  onFocus,
+  onBlur,
+  className
+}) => {
+  const isControlled = controlledValue !== void 0;
+  const inputRef = react.useRef(null);
+  const [focused, setFocused] = react.useState(false);
+  const [internalValue, setInternalValue] = react.useState(
+    defaultValue ?? controlledValue ?? null
+  );
+  const [displayValue, setDisplayValue] = react.useState("");
+  const currentValue = isControlled ? controlledValue ?? null : internalValue;
+  const toDisplayValue = react.useCallback(
+    (val) => {
+      if (val === null || val === void 0) return "";
+      if (formatter) return formatter(val);
+      if (precision !== void 0) return val.toFixed(precision);
+      return String(val);
+    },
+    [formatter, precision]
+  );
+  const parseValue = react.useCallback(
+    (str) => {
+      if (str === "" || str === "-") return null;
+      if (parser) return parser(str);
+      const num = Number(str);
+      return Number.isNaN(num) ? null : num;
+    },
+    [parser]
+  );
+  react.useEffect(() => {
+    if (!focused) {
+      setDisplayValue(toDisplayValue(currentValue));
+    }
+  }, [currentValue, focused, toDisplayValue]);
+  react.useEffect(() => {
+    if (autoFocus && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [autoFocus]);
+  const commitValue = react.useCallback(
+    (val) => {
+      let finalVal = val;
+      if (finalVal !== null) {
+        finalVal = tigercatCore.clampValue(finalVal, min, max);
+        if (precision !== void 0) {
+          finalVal = tigercatCore.formatPrecision(finalVal, precision);
+        }
+      }
+      if (!isControlled) {
+        setInternalValue(finalVal);
+      }
+      onChange?.(finalVal);
+      setDisplayValue(toDisplayValue(finalVal));
+    },
+    [min, max, precision, isControlled, onChange, toDisplayValue]
+  );
+  const handleStep = react.useCallback(
+    (direction) => {
+      if (disabled || readonly) return;
+      const next = tigercatCore.stepValue(currentValue, step, direction, min, max, precision);
+      commitValue(next);
+    },
+    [currentValue, step, min, max, precision, disabled, readonly, commitValue]
+  );
+  const handleInput = react.useCallback((e) => {
+    setDisplayValue(e.target.value);
+  }, []);
+  const handleBlur = react.useCallback(
+    (e) => {
+      setFocused(false);
+      const parsed = parseValue(displayValue);
+      commitValue(parsed);
+      onBlur?.(e);
+    },
+    [displayValue, parseValue, commitValue, onBlur]
+  );
+  const handleFocus = react.useCallback(
+    (e) => {
+      setFocused(true);
+      if (formatter && currentValue !== null) {
+        setDisplayValue(String(currentValue));
+      }
+      onFocus?.(e);
+    },
+    [formatter, currentValue, onFocus]
+  );
+  const handleKeyDown = react.useCallback(
+    (e) => {
+      if (!keyboard || disabled || readonly) return;
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        handleStep("up");
+      } else if (e.key === "ArrowDown") {
+        e.preventDefault();
+        handleStep("down");
+      } else if (e.key === "Enter") {
+        const parsed = parseValue(displayValue);
+        commitValue(parsed);
+      }
+    },
+    [keyboard, disabled, readonly, handleStep, parseValue, displayValue, commitValue]
+  );
+  const atMin = tigercatCore.isAtMin(currentValue, min);
+  const atMax = tigercatCore.isAtMax(currentValue, max);
+  const wrapperClasses = react.useMemo(
+    () => tigercatCore.classNames(
+      tigercatCore.getInputNumberWrapperClasses(disabled),
+      tigercatCore.getInputNumberStatusClasses(status),
+      tigercatCore.getInputNumberSizeClasses(size),
+      focused && `ring-2 ${tigercatCore.getInputNumberFocusRingColor(status)}`,
+      className
+    ),
+    [disabled, status, size, focused, className]
+  );
+  const inputClasses = react.useMemo(
+    () => tigercatCore.getInputNumberInputClasses(
+      size,
+      controls && controlsPosition === "right",
+      controls && controlsPosition === "both"
+    ),
+    [size, controls, controlsPosition]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: wrapperClasses, children: [
+    controls && controlsPosition === "both" && /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        tabIndex: -1,
+        "aria-label": "Decrease",
+        className: tigercatCore.getInputNumberSideButtonClasses("left", disabled || atMin),
+        disabled: disabled || atMin,
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: () => handleStep("down"),
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            className: "w-4 h-4",
+            children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: tigercatCore.inputNumberMinusIconPathD })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "text",
+        inputMode: "decimal",
+        role: "spinbutton",
+        "aria-valuemin": min === -Infinity ? void 0 : min,
+        "aria-valuemax": max === Infinity ? void 0 : max,
+        "aria-valuenow": currentValue ?? void 0,
+        className: inputClasses,
+        value: displayValue,
+        placeholder,
+        disabled,
+        readOnly: readonly,
+        name,
+        id,
+        onChange: handleInput,
+        onBlur: handleBlur,
+        onFocus: handleFocus,
+        onKeyDown: handleKeyDown
+      }
+    ),
+    controls && controlsPosition === "both" && /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        tabIndex: -1,
+        "aria-label": "Increase",
+        className: tigercatCore.getInputNumberSideButtonClasses("right", disabled || atMax),
+        disabled: disabled || atMax,
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: () => handleStep("up"),
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            className: "w-4 h-4",
+            children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: tigercatCore.inputNumberPlusIconPathD })
+          }
+        )
+      }
+    ),
+    controls && controlsPosition === "right" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tigercatCore.inputNumberControlsRightClasses, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          tabIndex: -1,
+          "aria-label": "Increase",
+          className: tigercatCore.getInputNumberStepButtonClasses("up", disabled || atMax),
+          disabled: disabled || atMax,
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: () => handleStep("up"),
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              viewBox: "0 0 24 24",
+              fill: "currentColor",
+              className: "w-3 h-3",
+              children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: tigercatCore.inputNumberUpIconPathD })
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          tabIndex: -1,
+          "aria-label": "Decrease",
+          className: tigercatCore.getInputNumberStepButtonClasses("down", disabled || atMin),
+          disabled: disabled || atMin,
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: () => handleStep("down"),
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              viewBox: "0 0 24 24",
+              fill: "currentColor",
+              className: "w-3 h-3",
+              children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: tigercatCore.inputNumberDownIconPathD })
+            }
+          )
+        }
+      )
+    ] })
+  ] });
+};
+
+exports.InputNumber = InputNumber;

package/dist/{chunk-3577FW3I.mjs → chunk-PJ7NS7NX.mjs}

@@ -1,5 +1,5 @@
-import { useState, useEffect, useMemo, useCallback } from 'react';
-import { getSpinnerSVG, getFixedColumnOffsets, filterData, sortData, paginateData, getRowKey, calculatePagination, getTableHeaderClasses, getCheckboxCellClasses, classNames, getTableHeaderCellClasses, tableEmptyStateClasses, getTableCellClasses, getTableRowClasses, getSimplePaginationContainerClasses, getSimplePaginationTotalClasses, getSimplePaginationControlsClasses, getSimplePaginationSelectClasses, getSimplePaginationButtonsWrapperClasses, getSimplePaginationButtonClasses, getSimplePaginationPageIndicatorClasses, getTableWrapperClasses, tableBaseClasses, tableLoadingOverlayClasses, icon24ViewBox, lockClosedIcon24PathD, lockOpenIcon24PathD, icon16ViewBox, getSortIconClasses, sortAscIcon16PathD, sortDescIcon16PathD, sortBothIcon16PathD, getLoadingOverlaySpinnerClasses } from '@expcat/tigercat-core';
+import { useState, useEffect, useMemo, useCallback, Fragment } from 'react';
+import { getSpinnerSVG, getFixedColumnOffsets, filterData, sortData, paginateData, getRowKey, calculatePagination, getTableHeaderClasses, getExpandCellClasses, getCheckboxCellClasses, classNames, getTableHeaderCellClasses, tableEmptyStateClasses, getTableCellClasses, getTableRowClasses, expandedRowContentClasses, getSimplePaginationContainerClasses, getSimplePaginationTotalClasses, getSimplePaginationControlsClasses, getSimplePaginationSelectClasses, getSimplePaginationButtonsWrapperClasses, getSimplePaginationButtonClasses, getSimplePaginationPageIndicatorClasses, getTableWrapperClasses, tableBaseClasses, tableLoadingOverlayClasses, icon16ViewBox, expandIconButtonClasses, getExpandIconRotationClasses, icon24ViewBox, lockClosedIcon24PathD, lockOpenIcon24PathD, getSortIconClasses, sortAscIcon16PathD, sortDescIcon16PathD, sortBothIcon16PathD, getLoadingOverlaySpinnerClasses } from '@expcat/tigercat-core';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // src/components/Table.tsx
@@ -64,12 +64,14 @@ function Table({
   stickyHeader = false,
   maxHeight,
   tableLayout = "auto",
+  expandable,
   onChange,
   onRowClick,
   onSelectionChange,
   onSortChange,
   onFilterChange,
   onPageChange,
+  onExpandedRowsChange,
   className,
   ...props
 }) {
@@ -122,6 +124,24 @@ function Table({
       setUncontrolledSelectedRowKeys(rowSelection?.selectedRowKeys ?? []);
     }
   }, [isSelectionControlled, rowSelection?.selectedRowKeys]);
+  const isExpandControlled = expandable?.expandedRowKeys !== void 0;
+  const [uncontrolledExpandedRowKeys, setUncontrolledExpandedRowKeys] = useState(expandable?.defaultExpandedRowKeys ?? expandable?.expandedRowKeys ?? []);
+  const expandedRowKeys = isExpandControlled ? expandable.expandedRowKeys : uncontrolledExpandedRowKeys;
+  const expandedRowKeySet = useMemo(
+    () => new Set(expandedRowKeys),
+    [expandedRowKeys]
+  );
+  const handleToggleExpand = useCallback(
+    (key) => {
+      const isExp = expandedRowKeySet.has(key);
+      const next = isExp ? expandedRowKeys.filter((k) => k !== key) : [...expandedRowKeys, key];
+      if (!isExpandControlled) {
+        setUncontrolledExpandedRowKeys(next);
+      }
+      onExpandedRowsChange?.(next);
+    },
+    [expandedRowKeys, expandedRowKeySet, isExpandControlled, onExpandedRowsChange]
+  );
   const [fixedOverrides, setFixedOverrides] = useState({});
   const displayColumns = useMemo(() => {
     return columns.map((column) => {
@@ -132,6 +152,12 @@ function Table({
       };
     });
   }, [columns, fixedOverrides]);
+  const totalColumnCount = useMemo(() => {
+    let count = displayColumns.length;
+    if (rowSelection && rowSelection.showCheckbox !== false) count++;
+    if (expandable) count++;
+    return count;
+  }, [displayColumns.length, rowSelection, expandable]);
   const columnByKey = useMemo(() => {
     const map = {};
     for (const column of displayColumns) {
@@ -343,6 +369,7 @@ function Table({
   }, [selectedRowKeys.length, allSelected]);
   const renderTableHeader = useCallback(() => {
     return /* @__PURE__ */ jsx("thead", { className: getTableHeaderClasses(stickyHeader), children: /* @__PURE__ */ jsxs("tr", { children: [
+      expandable && expandable.expandIconPosition !== "end" && /* @__PURE__ */ jsx("th", { className: getExpandCellClasses(size) }),
       rowSelection && rowSelection.showCheckbox !== false && rowSelection.type !== "radio" && /* @__PURE__ */ jsx("th", { className: getCheckboxCellClasses(size), children: /* @__PURE__ */ jsx(
         "input",
         {
@@ -435,7 +462,8 @@ function Table({
           },
           column.key
         );
-      })
+      }),
+      expandable && expandable.expandIconPosition === "end" && /* @__PURE__ */ jsx("th", { className: getExpandCellClasses(size) })
     ] }) });
   }, [
     displayColumns,
@@ -450,86 +478,121 @@ function Table({
     handleSelectAll,
     columnLockable,
     toggleColumnLock,
-    fixedColumnsInfo
+    fixedColumnsInfo,
+    expandable
   ]);
   const renderTableBody = useCallback(() => {
     if (loading) {
       return null;
     }
     if (paginatedData.length === 0) {
-      return /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
-        "td",
-        {
-          colSpan: displayColumns.length + (rowSelection ? 1 : 0),
-          className: tableEmptyStateClasses,
-          children: /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", children: emptyText })
-        }
-      ) }) });
+      return /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: totalColumnCount, className: tableEmptyStateClasses, children: /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", children: emptyText }) }) }) });
     }
+    const ExpandToggle = ({ rowKey: rk, expandableRow, expanded }) => expandableRow ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: classNames(expandIconButtonClasses, getExpandIconRotationClasses(expanded)),
+        "aria-label": expanded ? "Collapse row" : "Expand row",
+        onClick: (e) => {
+          e.stopPropagation();
+          handleToggleExpand(rk);
+        },
+        children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: icon16ViewBox,
+            fill: "currentColor",
+            className: "w-4 h-4",
+            children: /* @__PURE__ */ jsx("path", { d: "M6 3l6 5-6 5V3z" })
+          }
+        )
+      }
+    ) : null;
     return /* @__PURE__ */ jsx("tbody", { children: paginatedData.map((record, index) => {
       const key = pageRowKeys[index];
       const isSelected = selectedRowKeySet.has(key);
+      const isExpanded = expandedRowKeySet.has(key);
+      const isExpandableRow = expandable ? expandable.rowExpandable?.(record) ?? true : false;
       const rowClass = typeof rowClassName === "function" ? rowClassName(record, index) : rowClassName;
-      return /* @__PURE__ */ jsxs(
-        "tr",
-        {
-          className: classNames(
-            getTableRowClasses(hoverable, striped, index % 2 === 0, rowClass),
-            fixedColumnsInfo.hasFixedColumns && "group"
-          ),
-          onClick: () => handleRowClick(record, index),
-          children: [
-            rowSelection && rowSelection.showCheckbox !== false && /* @__PURE__ */ jsx("td", { className: getCheckboxCellClasses(size), children: /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: rowSelection?.type === "radio" ? "radio" : "checkbox",
-                className: rowSelection?.type === "radio" ? "border-gray-300 text-[var(--tiger-primary,#2563eb)] focus:ring-[var(--tiger-primary,#2563eb)]" : "rounded border-gray-300 text-[var(--tiger-primary,#2563eb)] focus:ring-[var(--tiger-primary,#2563eb)]",
-                checked: isSelected,
-                disabled: rowSelection?.getCheckboxProps?.(record)?.disabled,
-                onChange: (e) => handleSelectRow(key, e.target.checked),
-                onClick: (e) => e.stopPropagation()
-              }
-            ) }),
-            displayColumns.map((column) => {
-              const dataKey = column.dataKey || column.key;
-              const cellValue = record[dataKey];
-              const isFixedLeft = column.fixed === "left";
-              const isFixedRight = column.fixed === "right";
-              const fixedStyle = isFixedLeft ? {
-                position: "sticky",
-                left: `${fixedColumnsInfo.leftOffsets[column.key] || 0}px`,
-                zIndex: 10
-              } : isFixedRight ? {
-                position: "sticky",
-                right: `${fixedColumnsInfo.rightOffsets[column.key] || 0}px`,
-                zIndex: 10
-              } : void 0;
-              const widthStyle = column.width ? {
-                width: typeof column.width === "number" ? `${column.width}px` : column.width
-              } : void 0;
-              const style = fixedStyle ? { ...widthStyle, ...fixedStyle } : widthStyle;
-              const stickyBgClass = striped && index % 2 === 0 ? "bg-[var(--tiger-surface-muted,#f9fafb)]/50" : "bg-[var(--tiger-surface,#ffffff)]";
-              const stickyCellClass = isFixedLeft || isFixedRight ? classNames(
-                stickyBgClass,
-                hoverable && "group-hover:bg-[var(--tiger-surface-muted,#f9fafb)]"
-              ) : void 0;
-              return /* @__PURE__ */ jsx(
-                "td",
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(
+          "tr",
+          {
+            className: classNames(
+              getTableRowClasses(hoverable, striped, index % 2 === 0, rowClass),
+              fixedColumnsInfo.hasFixedColumns && "group"
+            ),
+            onClick: () => handleRowClick(record, index),
+            children: [
+              expandable && expandable.expandIconPosition !== "end" && /* @__PURE__ */ jsx("td", { className: getExpandCellClasses(size), children: /* @__PURE__ */ jsx(
+                ExpandToggle,
                 {
-                  className: classNames(
-                    getTableCellClasses(size, column.align || "left", column.className),
-                    stickyCellClass
-                  ),
-                  style,
-                  children: column.render ? column.render(record, index) : cellValue
-                },
-                column.key
-              );
-            })
-          ]
-        },
-        key
-      );
+                  rowKey: key,
+                  expandableRow: isExpandableRow,
+                  expanded: isExpanded
+                }
+              ) }),
+              rowSelection && rowSelection.showCheckbox !== false && /* @__PURE__ */ jsx("td", { className: getCheckboxCellClasses(size), children: /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: rowSelection?.type === "radio" ? "radio" : "checkbox",
+                  className: rowSelection?.type === "radio" ? "border-gray-300 text-[var(--tiger-primary,#2563eb)] focus:ring-[var(--tiger-primary,#2563eb)]" : "rounded border-gray-300 text-[var(--tiger-primary,#2563eb)] focus:ring-[var(--tiger-primary,#2563eb)]",
+                  checked: isSelected,
+                  disabled: rowSelection?.getCheckboxProps?.(record)?.disabled,
+                  onChange: (e) => handleSelectRow(key, e.target.checked),
+                  onClick: (e) => e.stopPropagation()
+                }
+              ) }),
+              displayColumns.map((column) => {
+                const dataKey = column.dataKey || column.key;
+                const cellValue = record[dataKey];
+                const isFixedLeft = column.fixed === "left";
+                const isFixedRight = column.fixed === "right";
+                const fixedStyle = isFixedLeft ? {
+                  position: "sticky",
+                  left: `${fixedColumnsInfo.leftOffsets[column.key] || 0}px`,
+                  zIndex: 10
+                } : isFixedRight ? {
+                  position: "sticky",
+                  right: `${fixedColumnsInfo.rightOffsets[column.key] || 0}px`,
+                  zIndex: 10
+                } : void 0;
+                const widthStyle = column.width ? {
+                  width: typeof column.width === "number" ? `${column.width}px` : column.width
+                } : void 0;
+                const style = fixedStyle ? { ...widthStyle, ...fixedStyle } : widthStyle;
+                const stickyBgClass = striped && index % 2 === 0 ? "bg-[var(--tiger-surface-muted,#f9fafb)]/50" : "bg-[var(--tiger-surface,#ffffff)]";
+                const stickyCellClass = isFixedLeft || isFixedRight ? classNames(
+                  stickyBgClass,
+                  hoverable && "group-hover:bg-[var(--tiger-surface-muted,#f9fafb)]"
+                ) : void 0;
+                return /* @__PURE__ */ jsx(
+                  "td",
+                  {
+                    className: classNames(
+                      getTableCellClasses(size, column.align || "left", column.className),
+                      stickyCellClass
+                    ),
+                    style,
+                    children: column.render ? column.render(record, index) : cellValue
+                  },
+                  column.key
+                );
+              }),
+              expandable && expandable.expandIconPosition === "end" && /* @__PURE__ */ jsx("td", { className: getExpandCellClasses(size), children: /* @__PURE__ */ jsx(
+                ExpandToggle,
+                {
+                  rowKey: key,
+                  expandableRow: isExpandableRow,
+                  expanded: isExpanded
+                }
+              ) })
+            ]
+          }
+        ),
+        expandable && isExpanded && isExpandableRow && /* @__PURE__ */ jsx("tr", { className: expandedRowContentClasses, children: /* @__PURE__ */ jsx("td", { colSpan: totalColumnCount, children: expandable.expandedRowRender(record, index) }) })
+      ] }, key);
     }) });
   }, [
     loading,
@@ -545,7 +608,11 @@ function Table({
     size,
     handleRowClick,
     handleSelectRow,
-    fixedColumnsInfo
+    fixedColumnsInfo,
+    expandable,
+    expandedRowKeySet,
+    handleToggleExpand,
+    totalColumnCount
   ]);
   const renderPagination = useCallback(() => {
     if (pagination === false || !paginationInfo) {