@expcat/tigercat-react 0.3.70 → 0.4.2

package/dist/{chunk-ZTVATZB6.js → chunk-6OVVMHZJ.js}

@@ -66,12 +66,14 @@ function Table({
   stickyHeader = false,
   maxHeight,
   tableLayout = "auto",
+  expandable,
   onChange,
   onRowClick,
   onSelectionChange,
   onSortChange,
   onFilterChange,
   onPageChange,
+  onExpandedRowsChange,
   className,
   ...props
 }) {
@@ -124,6 +126,24 @@ function Table({
       setUncontrolledSelectedRowKeys(rowSelection?.selectedRowKeys ?? []);
     }
   }, [isSelectionControlled, rowSelection?.selectedRowKeys]);
+  const isExpandControlled = expandable?.expandedRowKeys !== void 0;
+  const [uncontrolledExpandedRowKeys, setUncontrolledExpandedRowKeys] = react.useState(expandable?.defaultExpandedRowKeys ?? expandable?.expandedRowKeys ?? []);
+  const expandedRowKeys = isExpandControlled ? expandable.expandedRowKeys : uncontrolledExpandedRowKeys;
+  const expandedRowKeySet = react.useMemo(
+    () => new Set(expandedRowKeys),
+    [expandedRowKeys]
+  );
+  const handleToggleExpand = react.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] = react.useState({});
   const displayColumns = react.useMemo(() => {
     return columns.map((column) => {
@@ -134,6 +154,12 @@ function Table({
       };
     });
   }, [columns, fixedOverrides]);
+  const totalColumnCount = react.useMemo(() => {
+    let count = displayColumns.length;
+    if (rowSelection && rowSelection.showCheckbox !== false) count++;
+    if (expandable) count++;
+    return count;
+  }, [displayColumns.length, rowSelection, expandable]);
   const columnByKey = react.useMemo(() => {
     const map = {};
     for (const column of displayColumns) {
@@ -345,6 +371,7 @@ function Table({
   }, [selectedRowKeys.length, allSelected]);
   const renderTableHeader = react.useCallback(() => {
     return /* @__PURE__ */ jsxRuntime.jsx("thead", { className: tigercatCore.getTableHeaderClasses(stickyHeader), children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+      expandable && expandable.expandIconPosition !== "end" && /* @__PURE__ */ jsxRuntime.jsx("th", { className: tigercatCore.getExpandCellClasses(size) }),
       rowSelection && rowSelection.showCheckbox !== false && rowSelection.type !== "radio" && /* @__PURE__ */ jsxRuntime.jsx("th", { className: tigercatCore.getCheckboxCellClasses(size), children: /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
@@ -437,7 +464,8 @@ function Table({
           },
           column.key
         );
-      })
+      }),
+      expandable && expandable.expandIconPosition === "end" && /* @__PURE__ */ jsxRuntime.jsx("th", { className: tigercatCore.getExpandCellClasses(size) })
     ] }) });
   }, [
     displayColumns,
@@ -452,86 +480,121 @@ function Table({
     handleSelectAll,
     columnLockable,
     toggleColumnLock,
-    fixedColumnsInfo
+    fixedColumnsInfo,
+    expandable
   ]);
   const renderTableBody = react.useCallback(() => {
     if (loading) {
       return null;
     }
     if (paginatedData.length === 0) {
-      return /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx(
-        "td",
-        {
-          colSpan: displayColumns.length + (rowSelection ? 1 : 0),
-          className: tigercatCore.tableEmptyStateClasses,
-          children: /* @__PURE__ */ jsxRuntime.jsx("div", { role: "status", "aria-live": "polite", children: emptyText })
-        }
-      ) }) });
+      return /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: totalColumnCount, className: tigercatCore.tableEmptyStateClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { role: "status", "aria-live": "polite", children: emptyText }) }) }) });
     }
+    const ExpandToggle = ({ rowKey: rk, expandableRow, expanded }) => expandableRow ? /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        className: tigercatCore.classNames(tigercatCore.expandIconButtonClasses, tigercatCore.getExpandIconRotationClasses(expanded)),
+        "aria-label": expanded ? "Collapse row" : "Expand row",
+        onClick: (e) => {
+          e.stopPropagation();
+          handleToggleExpand(rk);
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: tigercatCore.icon16ViewBox,
+            fill: "currentColor",
+            className: "w-4 h-4",
+            children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 3l6 5-6 5V3z" })
+          }
+        )
+      }
+    ) : null;
     return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
-        "tr",
-        {
-          className: tigercatCore.classNames(
-            tigercatCore.getTableRowClasses(hoverable, striped, index % 2 === 0, rowClass),
-            fixedColumnsInfo.hasFixedColumns && "group"
-          ),
-          onClick: () => handleRowClick(record, index),
-          children: [
-            rowSelection && rowSelection.showCheckbox !== false && /* @__PURE__ */ jsxRuntime.jsx("td", { className: tigercatCore.getCheckboxCellClasses(size), children: /* @__PURE__ */ jsxRuntime.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 ? tigercatCore.classNames(
-                stickyBgClass,
-                hoverable && "group-hover:bg-[var(--tiger-surface-muted,#f9fafb)]"
-              ) : void 0;
-              return /* @__PURE__ */ jsxRuntime.jsx(
-                "td",
+      return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "tr",
+          {
+            className: tigercatCore.classNames(
+              tigercatCore.getTableRowClasses(hoverable, striped, index % 2 === 0, rowClass),
+              fixedColumnsInfo.hasFixedColumns && "group"
+            ),
+            onClick: () => handleRowClick(record, index),
+            children: [
+              expandable && expandable.expandIconPosition !== "end" && /* @__PURE__ */ jsxRuntime.jsx("td", { className: tigercatCore.getExpandCellClasses(size), children: /* @__PURE__ */ jsxRuntime.jsx(
+                ExpandToggle,
                 {
-                  className: tigercatCore.classNames(
-                    tigercatCore.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__ */ jsxRuntime.jsx("td", { className: tigercatCore.getCheckboxCellClasses(size), children: /* @__PURE__ */ jsxRuntime.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 ? tigercatCore.classNames(
+                  stickyBgClass,
+                  hoverable && "group-hover:bg-[var(--tiger-surface-muted,#f9fafb)]"
+                ) : void 0;
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  "td",
+                  {
+                    className: tigercatCore.classNames(
+                      tigercatCore.getTableCellClasses(size, column.align || "left", column.className),
+                      stickyCellClass
+                    ),
+                    style,
+                    children: column.render ? column.render(record, index) : cellValue
+                  },
+                  column.key
+                );
+              }),
+              expandable && expandable.expandIconPosition === "end" && /* @__PURE__ */ jsxRuntime.jsx("td", { className: tigercatCore.getExpandCellClasses(size), children: /* @__PURE__ */ jsxRuntime.jsx(
+                ExpandToggle,
+                {
+                  rowKey: key,
+                  expandableRow: isExpandableRow,
+                  expanded: isExpanded
+                }
+              ) })
+            ]
+          }
+        ),
+        expandable && isExpanded && isExpandableRow && /* @__PURE__ */ jsxRuntime.jsx("tr", { className: tigercatCore.expandedRowContentClasses, children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: totalColumnCount, children: expandable.expandedRowRender(record, index) }) })
+      ] }, key);
     }) });
   }, [
     loading,
@@ -547,7 +610,11 @@ function Table({
     size,
     handleRowClick,
     handleSelectRow,
-    fixedColumnsInfo
+    fixedColumnsInfo,
+    expandable,
+    expandedRowKeySet,
+    handleToggleExpand,
+    totalColumnCount
   ]);
   const renderPagination = react.useCallback(() => {
     if (pagination === false || !paginationInfo) {

package/dist/{chunk-ZGQOYCQT.mjs → chunk-FX2IBA4W.mjs}

@@ -1,4 +1,4 @@
-import { Table } from './chunk-3577FW3I.mjs';
+import { Table } from './chunk-PJ7NS7NX.mjs';
 import { Select } from './chunk-MDZDPGRK.mjs';
 import { Pagination } from './chunk-NZLOLMT2.mjs';
 import { Input } from './chunk-RPTLVIBF.mjs';

package/dist/{chunk-PWZB45Z7.js → chunk-JQK354YN.js}

@@ -39,9 +39,9 @@ var SubMenu = ({
   const [isHovered, setIsHovered] = React.useState(false);
   const [isOpenByKeyboard, setIsOpenByKeyboard] = React.useState(false);
   const effectiveCollapsed = collapsedOverride ?? (menuContext ? menuContext.collapsed : false);
-  const isPopup = !!menuContext && menuContext.mode === "vertical" && effectiveCollapsed;
+  const isPopup = !!menuContext && (menuContext.mode === "horizontal" || menuContext.mode === "vertical" && effectiveCollapsed);
   const isOpen = !!menuContext && tigercatCore.isKeyOpen(itemKey, menuContext.openKeys);
-  const isExpanded = menuContext?.mode === "horizontal" || isPopup ? isHovered || isOpenByKeyboard : isOpen;
+  const isExpanded = isPopup ? isHovered || isOpenByKeyboard : isOpen;
   const isInlineOrVertical = menuContext?.mode !== "horizontal" && !isPopup;
   const [hasRenderedInline, setHasRenderedInline] = React.useState(
     () => isInlineOrVertical ? isExpanded : false
@@ -56,11 +56,13 @@ var SubMenu = ({
   }, [menuContext, disabled, className]);
   const contentClasses = React.useMemo(() => {
     if (!menuContext) return "";
-    if (menuContext.mode === "horizontal") return tigercatCore.submenuContentHorizontalClasses;
+    if (menuContext.mode === "horizontal") {
+      return level === 0 ? tigercatCore.submenuContentHorizontalClasses : tigercatCore.submenuContentHorizontalNestedClasses;
+    }
     if (isPopup) return tigercatCore.submenuContentPopupClasses;
     if (menuContext.mode === "inline") return tigercatCore.submenuContentInlineClasses;
     return tigercatCore.submenuContentVerticalClasses;
-  }, [menuContext, isPopup]);
+  }, [menuContext, isPopup, level]);
   const handleTitleClick = React.useCallback(() => {
     if (!menuContext || disabled) return;
     if (menuContext.mode === "horizontal") return;
@@ -185,19 +187,19 @@ var SubMenu = ({
         return React__default.default.cloneElement(
           child,
           {
-            level: nextLevel,
-            collapsed: isPopup ? false : void 0
+            level: nextLevel
           }
         );
       }
       return child;
     });
-    if (menuContext.mode === "horizontal" || isPopup) {
+    const popupZIndex = isPopup ? tigercatCore.getSubmenuPopupZIndex(level) : {};
+    if (isPopup) {
       return /* @__PURE__ */ jsxRuntime.jsx(
         "ul",
         {
           className: contentClasses,
-          style: { display: isExpanded ? "block" : "none" },
+          style: { display: isExpanded ? "block" : "none", ...popupZIndex },
           role: "menu",
           "aria-hidden": isExpanded ? void 0 : "true",
           children: enhancedChildren
@@ -222,7 +224,7 @@ var SubMenu = ({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "li",
     {
-      className: menuContext.mode === "horizontal" || isPopup ? "relative" : "",
+      className: isPopup ? "relative" : "",
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       role: "none",