@sarunyu/system-one 4.0.2 → 4.0.4

package/dist/index.js

@@ -3850,7 +3850,7 @@ const Table = forwardRef(function Table2({ className, responsive = true, ...prop
   return /* @__PURE__ */ jsx(TableScrollShadowContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { ref: scrollRef, className: "w-full overflow-x-auto", children: table }) });
 });
 const TableRow = 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] = useState(false);
     const handleMouseEnter = (e) => {
       if (hoverable) setHovered(true);
@@ -3883,7 +3883,7 @@ const TableHeaderCell = forwardRef(
     state = "default",
     sortable = true,
     icon,
-    sortDirection = "none",
+    sortDirection,
     onSortChange,
     checkState = false,
     onCheckChange,
@@ -3892,16 +3892,22 @@ const TableHeaderCell = forwardRef(
     fixedShadow,
     children = "Title text",
     style: styleProp,
+    onClick: onClickProp,
     ...props
   }, ref) {
     const { hasLeftOverflow, hasRightOverflow } = useContext(TableScrollShadowContext);
+    const [internalDirection, setInternalDirection] = 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__ */ jsx(ArrowUp, { size: 16, weight: "fill", className: "shrink-0" }) : sortDirection === "desc" ? /* @__PURE__ */ jsx(ArrowDown, { size: 16, weight: "fill", className: "shrink-0" }) : /* @__PURE__ */ jsx(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__ */ jsx(ArrowUp, { size: 16, weight: "fill", className: "shrink-0" }) : currentDirection === "desc" ? /* @__PURE__ */ jsx(ArrowDown, { size: 16, weight: "fill", className: "shrink-0" }) : /* @__PURE__ */ jsx(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__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("span", { className: "text-sm leading-5 font-normal", children }),
@@ -3928,12 +3934,12 @@ const TableHeaderCell = 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__ */ jsx(StickyShadowEdge, { direction: shadowDirection }),
           /* @__PURE__ */ jsx(
@@ -3957,7 +3963,7 @@ const TableCell = forwardRef(function TableCell2({
   textStyle = "default",
   selected,
   hovered,
-  label = "Text label",
+  label,
   description = "Text Description",
   imageSrc,
   tagText = "Tag",
@@ -3968,6 +3974,7 @@ const TableCell = forwardRef(function TableCell2({
   fixedOffset = 0,
   fixedShadow,
   style: styleProp,
+  children,
   ...props
 }, ref) {
   const { hasLeftOverflow, hasRightOverflow } = useContext(TableScrollShadowContext);
@@ -3982,6 +3989,7 @@ const TableCell = 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__ */ jsxs(
     "td",
     {
@@ -3999,13 +4007,13 @@ const TableCell = forwardRef(function TableCell2({
       children: [
         shadowDirection && shouldShowShadow && /* @__PURE__ */ jsx(StickyShadowEdge, { direction: shadowDirection }),
         type === "default" && /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col", children: [
-          /* @__PURE__ */ jsx("span", { className: cn("text-sm leading-5", primaryTextClass), children: label }),
+          /* @__PURE__ */ jsx("span", { className: cn("text-sm leading-5", primaryTextClass), children: primaryContent }),
           hasDescription && /* @__PURE__ */ jsx("span", { className: "text-xs leading-4 font-normal text-subtle-text", children: description })
         ] }),
         type === "text-icon" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
           icon ?? /* @__PURE__ */ jsx(Circle, { size: iconSize, weight: "regular", className: "shrink-0 text-subtle-text" }),
           /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col", children: [
-            /* @__PURE__ */ jsx("span", { className: cn("text-sm leading-5", primaryTextClass), children: label }),
+            /* @__PURE__ */ jsx("span", { className: cn("text-sm leading-5", primaryTextClass), children: primaryContent }),
             hasDescription && /* @__PURE__ */ jsx("span", { className: "text-xs leading-4 font-normal text-subtle-text", children: description })
           ] })
         ] }),
@@ -4019,7 +4027,7 @@ const TableCell = forwardRef(function TableCell2({
             }
           ) : /* @__PURE__ */ jsx("div", { className: "size-full bg-hover-bg" }) }),
           /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col", children: [
-            /* @__PURE__ */ jsx("span", { className: cn("text-sm leading-5", primaryTextClass), children: label }),
+            /* @__PURE__ */ jsx("span", { className: cn("text-sm leading-5", primaryTextClass), children: primaryContent }),
             hasDescription && /* @__PURE__ */ jsx("span", { className: "text-xs leading-4 font-normal text-subtle-text", children: description })
           ] })
         ] }),