@dust-tt/sparkle 0.2.97 → 0.2.98-pr

package/dist/cjs/components/Tab.d.ts

@@ -1,19 +1,35 @@
 import React, { ComponentType, MouseEvent } from "react";
+type TabType = {
+    label: string;
+    id?: string;
+    hideLabel?: boolean;
+    current: boolean;
+    sizing?: "hug" | "expand";
+    icon?: ComponentType<{
+        className?: string;
+    }>;
+    hasSeparator?: boolean;
+} & ({
+    onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+    href?: never;
+} | {
+    onClick?: never;
+    href: string;
+});
 type TabProps = {
     variant?: "default" | "stepper";
-    tabs: Array<{
-        label: string;
-        hideLabel?: boolean;
-        current: boolean;
-        sizing?: "hug" | "expand";
-        icon?: ComponentType<{
-            className?: string;
-        }>;
-        href?: string;
-        hasSeparator?: boolean;
-    }>;
-    onTabClick?: (tabName: string, event: MouseEvent<HTMLAnchorElement>) => void;
+    tabs: Array<TabType>;
+    setCurrentTab?: (tabId: string, e: MouseEvent<HTMLAnchorElement>) => void;
     className?: string;
 };
-export declare function Tab({ variant, tabs, onTabClick, className, }: TabProps): React.JSX.Element;
+/**
+ * Tab component displaying a list of tabs.
+ *
+ * Tab click action is specified:
+ * - either per tab, by providing either an href or an onClick handler in tab
+ *   data (mutually exclusive);
+ * - or globally, by providing a setCurrentTab function.
+ * Both per-tab and global actions can be set, the per-tab action taking precedence.
+ */
+export declare function Tab({ variant, tabs, setCurrentTab, className, }: TabProps): React.JSX.Element;
 export {};

package/dist/cjs/index.js

@@ -32097,12 +32097,21 @@ var tabSizingClasses = {
     hug: "",
     expand: "s-flex-1",
 };
+/**
+ * Tab component displaying a list of tabs.
+ *
+ * Tab click action is specified:
+ * - either per tab, by providing either an href or an onClick handler in tab
+ *   data (mutually exclusive);
+ * - or globally, by providing a setCurrentTab function.
+ * Both per-tab and global actions can be set, the per-tab action taking precedence.
+ */
 function Tab(_a) {
-    var _b = _a.variant, variant = _b === void 0 ? "default" : _b, tabs = _a.tabs, onTabClick = _a.onTabClick, _c = _a.className, className = _c === void 0 ? "" : _c;
+    var _b = _a.variant, variant = _b === void 0 ? "default" : _b, tabs = _a.tabs, setCurrentTab = _a.setCurrentTab, _c = _a.className, className = _c === void 0 ? "" : _c;
     var components = React.useContext(SparkleContext).components;
     var renderTabs = function () {
         return tabs.map(function (tab, i) {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e;
             var tabStateClasses = variant === "stepper"
                 ? tab.current
                     ? tabClasses.stepperSelected
@@ -32124,19 +32133,29 @@ function Tab(_a) {
             var Link = tab.href
                 ? components.link
                 : noHrefLink;
-            var content = (React.createElement(Link, { key: tab.label, className: finalTabClasses, "aria-current": tab.current ? "page" : undefined, onClick: function (event) { return onTabClick === null || onTabClick === void 0 ? void 0 : onTabClick(tab.label ? tab.label : "", event); }, href: tab.href || "#" },
+            // precedence on href and onClick (mutually exclusive), then setCurrentTab
+            var setCurrentTabFn = function (e) {
+                if (!tab.id) {
+                    throw new Error("Tab id is required to use setCurrentTab");
+                }
+                setCurrentTab === null || setCurrentTab === void 0 ? void 0 : setCurrentTab(tab.id, e);
+            };
+            var onClickAction = tab.href
+                ? undefined
+                : (_a = tab.onClick) !== null && _a !== void 0 ? _a : setCurrentTabFn;
+            var content = (React.createElement(Link, { key: tab.label, className: finalTabClasses, "aria-current": tab.current ? "page" : undefined, onClick: onClickAction, href: tab.href || "#" },
                 React.createElement("div", { className: tab.current
                         ? "s-flex s-gap-x-2"
                         : "s-flex s-gap-x-2 s-transition s-duration-300 s-ease-out" },
-                    tab.icon && (React.createElement(Icon, { visual: tab.icon, className: finalIconClasses, size: "sm" })), (_a = tab.hideLabel) !== null && _a !== void 0 ? _a : tab.label,
+                    tab.icon && (React.createElement(Icon, { visual: tab.icon, className: finalIconClasses, size: "sm" })), (_b = tab.hideLabel) !== null && _b !== void 0 ? _b : tab.label,
                     variant === "stepper" && i < tabs.length - 1 && (React.createElement(Icon, { visual: SvgChevronRight$1, className: "s-mx-2 s-text-element-500", size: "sm" })))));
             return tab.hideLabel ? (tab.label ? (React.createElement(React.Fragment, { key: "tab-".concat(i) },
-                React.createElement("div", { className: tabSizingClasses[(_b = tab.sizing) !== null && _b !== void 0 ? _b : "hug"] },
+                React.createElement("div", { className: tabSizingClasses[(_c = tab.sizing) !== null && _c !== void 0 ? _c : "hug"] },
                     React.createElement(Tooltip, { label: tab.label }, content)),
                 tab.hasSeparator && (React.createElement("div", { className: "s-flex s-h-full s-grow", key: "sep-".concat(i) })))) : (React.createElement(React.Fragment, { key: "tab-".concat(i) },
-                React.createElement("div", { className: tabSizingClasses[(_c = tab.sizing) !== null && _c !== void 0 ? _c : "hug"] }, content),
-                tab.hasSeparator && (React.createElement("div", { className: "s-flex s-h-full s-grow", key: "sep-".concat(i) }))))) : (React.createElement(React.Fragment, { key: "tab-".concat(i) },
                 React.createElement("div", { className: tabSizingClasses[(_d = tab.sizing) !== null && _d !== void 0 ? _d : "hug"] }, content),
+                tab.hasSeparator && (React.createElement("div", { className: "s-flex s-h-full s-grow", key: "sep-".concat(i) }))))) : (React.createElement(React.Fragment, { key: "tab-".concat(i) },
+                React.createElement("div", { className: tabSizingClasses[(_e = tab.sizing) !== null && _e !== void 0 ? _e : "hug"] }, content),
                 tab.hasSeparator && (React.createElement("div", { className: "s-flex s-h-full s-grow", key: "sep-".concat(i) }))));
         });
     };