@sarunyu/system-one 4.0.2 → 4.0.4

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(
@@ -3976,7 +3982,7 @@ const TableCell = React.forwardRef(function TableCell2({
   textStyle = "default",
   selected,
   hovered,
-  label = "Text label",
+  label,
   description = "Text Description",
   imageSrc,
   tagText = "Tag",
@@ -3987,6 +3993,7 @@ const TableCell = React.forwardRef(function TableCell2({
   fixedOffset = 0,
   fixedShadow,
   style: styleProp,
+  children,
   ...props
 }, ref) {
   const { hasLeftOverflow, hasRightOverflow } = React.useContext(TableScrollShadowContext);
@@ -4001,6 +4008,7 @@ const TableCell = React.forwardRef(function TableCell2({
   const fixedStyle = fixed === "left" ? { left: fixedOffset } : fixed === "right" ? { right: fixedOffset } : void 0;
   const shadowDirection = resolveStickyShadowDirection(fixed, fixedShadow);
   const shouldShowShadow = shadowDirection === "right" ? hasLeftOverflow : shadowDirection === "left" ? hasRightOverflow : false;
+  const primaryContent = children ?? label ?? "Text label";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "td",
     {
@@ -4018,13 +4026,13 @@ const TableCell = React.forwardRef(function TableCell2({
       children: [
         shadowDirection && shouldShowShadow && /* @__PURE__ */ jsxRuntime.jsx(StickyShadowEdge, { direction: shadowDirection }),
         type === "default" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-sm leading-5", primaryTextClass), children: label }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-sm leading-5", primaryTextClass), children: primaryContent }),
           hasDescription && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs leading-4 font-normal text-subtle-text", children: description })
         ] }),
         type === "text-icon" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
           icon ?? /* @__PURE__ */ jsxRuntime.jsx(react.Circle, { size: iconSize, weight: "regular", className: "shrink-0 text-subtle-text" }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-sm leading-5", primaryTextClass), children: label }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-sm leading-5", primaryTextClass), children: primaryContent }),
             hasDescription && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs leading-4 font-normal text-subtle-text", children: description })
           ] })
         ] }),
@@ -4038,7 +4046,7 @@ const TableCell = React.forwardRef(function TableCell2({
             }
           ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-full bg-hover-bg" }) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-sm leading-5", primaryTextClass), children: label }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-sm leading-5", primaryTextClass), children: primaryContent }),
             hasDescription && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs leading-4 font-normal text-subtle-text", children: description })
           ] })
         ] }),