@sarunyu/system-one 4.0.3 → 4.1.0

package/dist/index.cjs

@@ -3869,7 +3869,7 @@ const Table = React.forwardRef(function Table2({ className, responsive = true, .
   return /* @__PURE__ */ jsxRuntime.jsx(TableScrollShadowContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: scrollRef, className: "w-full overflow-x-auto", children: table }) });
 });
 const TableRow = React.forwardRef(
-  function TableRow2({ className, selected = false, hoverable = false, onMouseEnter, onMouseLeave, ...props }, ref) {
+  function TableRow2({ className, selected = false, hoverable = true, onMouseEnter, onMouseLeave, ...props }, ref) {
     const [hovered, setHovered] = React.useState(false);
     const handleMouseEnter = (e) => {
       if (hoverable) setHovered(true);
@@ -3902,7 +3902,7 @@ const TableHeaderCell = React.forwardRef(
     state = "default",
     sortable = true,
     icon,
-    sortDirection = "none",
+    sortDirection,
     onSortChange,
     checkState = false,
     onCheckChange,
@@ -3911,16 +3911,22 @@ const TableHeaderCell = React.forwardRef(
     fixedShadow,
     children = "Title text",
     style: styleProp,
+    onClick: onClickProp,
     ...props
   }, ref) {
     const { hasLeftOverflow, hasRightOverflow } = React.useContext(TableScrollShadowContext);
+    const [internalDirection, setInternalDirection] = React.useState("none");
+    const isControlledSort = sortDirection !== void 0;
+    const currentDirection = isControlledSort ? sortDirection : internalDirection;
     const stateClass = state === "disabled" ? "bg-[var(--bg-default-tertiary,#f3f4f6)] text-[var(--text-default-tertiary,#6a7282)]" : state === "hover" ? "bg-[var(--bg-default-secondary,#f9fafb)] text-[var(--text-default-tertiary,#6a7282)]" : "bg-[var(--bg-default-primary,white)] text-[var(--text-default-tertiary,#6a7282)]";
     const interactiveHoverClass = state === "default" ? "hover:bg-[var(--bg-default-secondary,#f9fafb)]" : "";
-    const sortIcon = sortDirection === "asc" ? /* @__PURE__ */ jsxRuntime.jsx(react.ArrowUp, { size: 16, weight: "fill", className: "shrink-0" }) : sortDirection === "desc" ? /* @__PURE__ */ jsxRuntime.jsx(react.ArrowDown, { size: 16, weight: "fill", className: "shrink-0" }) : /* @__PURE__ */ jsxRuntime.jsx(react.ArrowsDownUp, { size: 16, weight: "fill", className: "shrink-0" });
-    const handleSortClick = () => {
-      if (!sortable || !onSortChange) return;
-      const nextDirection = sortDirection === "none" ? "asc" : sortDirection === "asc" ? "desc" : "none";
-      onSortChange(nextDirection);
+    const sortIcon = currentDirection === "asc" ? /* @__PURE__ */ jsxRuntime.jsx(react.ArrowUp, { size: 16, weight: "fill", className: "shrink-0" }) : currentDirection === "desc" ? /* @__PURE__ */ jsxRuntime.jsx(react.ArrowDown, { size: 16, weight: "fill", className: "shrink-0" }) : /* @__PURE__ */ jsxRuntime.jsx(react.ArrowsDownUp, { size: 16, weight: "fill", className: "shrink-0" });
+    const handleClick = (e) => {
+      onClickProp == null ? void 0 : onClickProp(e);
+      if (type !== "text" || !sortable || state === "disabled") return;
+      const nextDirection = currentDirection === "none" ? "asc" : currentDirection === "asc" ? "desc" : "none";
+      if (!isControlledSort) setInternalDirection(nextDirection);
+      onSortChange == null ? void 0 : onSortChange(nextDirection);
     };
     const content = type === "text" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm leading-5 font-normal", children }),
@@ -3947,12 +3953,12 @@ const TableHeaderCell = React.forwardRef(
           stateClass,
           interactiveHoverClass,
           fixed && "sticky z-20",
-          sortable && type === "text" && onSortChange && "cursor-pointer select-none",
+          sortable && type === "text" && state !== "disabled" && "cursor-pointer select-none",
           className
         ),
         style: { ...fixedStyle, ...styleProp },
         ...props,
-        onClick: type === "text" ? handleSortClick : props.onClick,
+        onClick: handleClick,
         children: [
           shadowDirection && shouldShowShadow && /* @__PURE__ */ jsxRuntime.jsx(StickyShadowEdge, { direction: shadowDirection }),
           /* @__PURE__ */ jsxRuntime.jsx(