@dust-tt/sparkle 0.2.56 → 0.2.58

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

@@ -7,12 +7,12 @@ export interface DropdownMenuProps {
 export declare function DropdownMenu({ children, className }: DropdownMenuProps): React.JSX.Element;
 export declare namespace DropdownMenu {
     var Button: ({ label, type, size, tooltip, icon, children, tooltipPosition, className, disabled, onClick, }: DropdownButtonProps) => React.JSX.Element;
-    var Item: ({ label, description, href, disabled, visual, icon, onClick, }: DropdownItemProps) => React.JSX.Element;
+    var Item: ({ label, description, href, disabled, visual, icon, onClick, hasChildren, children, }: DropdownItemProps) => React.JSX.Element;
     var Items: ({ origin, width, children, }: DropdownItemsProps) => React.JSX.Element;
 }
 export interface DropdownButtonProps {
     label?: string;
-    type?: "menu" | "select";
+    type?: "menu" | "submenu" | "select";
     size?: "sm" | "md";
     tooltip?: string;
     tooltipPosition?: TooltipProps["position"];
@@ -30,6 +30,8 @@ interface DropdownItemProps {
     visual?: string | React.ReactNode;
     icon?: ComponentType;
     onClick?: () => void;
+    hasChildren?: boolean;
+    children?: React.ReactNode;
 }
 interface DropdownItemsProps {
     origin?: "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "auto";

package/dist/cjs/index.js

@@ -32151,7 +32151,7 @@ function ContextItem(_a) {
         React.createElement("div", { className: "s-flex s-flex-row s-gap-3 s-px-2 s-py-4" },
             React.createElement("div", { className: "s-flex" }, visual),
             React.createElement("div", { className: "s-flex s-grow s-flex-col s-gap-1" },
-                React.createElement("div", { className: "s-flex s-grow s-flex-row" },
+                React.createElement("div", { className: "s-flex s-grow s-flex-row s-gap-3" },
                     React.createElement("div", { className: "s-text-normal s-flex s-flex-col s-justify-center s-font-semibold" }, title),
                     React.createElement("div", { className: "s-flex s-items-center s-text-element-600" }, subElement)),
                 React.createElement("div", { className: "-s-mt-1" }, children)),
@@ -32758,17 +32758,18 @@ DropdownMenu.Button = function (_a) {
     return (React.createElement(React.Fragment, null, tooltip ? (React.createElement(Tooltip, { label: tooltip, position: tooltipPosition },
         React.createElement(it.Button, { disabled: disabled, ref: buttonRef, className: classNames(disabled ? "s-cursor-default" : "s-cursor-pointer", className, "s-group s-flex s-justify-items-center s-text-sm s-font-medium focus:s-outline-none focus:s-ring-0", label ? (size === "md" ? "s-gap-2" : "s-gap-1.5") : "s-gap-0.5") },
             React.createElement(Icon, { visual: icon, size: size, className: finalIconClasses }),
-            React.createElement(Icon, { visual: type === "select" ? SvgChevronUpDown$1 : SvgChevronDown$1, size: size === "sm" ? "xs" : "sm", className: finalChevronClasses })))) : (React.createElement(it.Button, { disabled: disabled, ref: buttonRef, className: classNames(disabled ? "s-cursor-default" : "s-cursor-pointer", className, "s-group s-flex s-justify-items-center s-text-sm s-font-medium focus:s-outline-none focus:s-ring-0", label ? (size === "md" ? "s-gap-2" : "s-gap-1.5") : "s-gap-0.5") },
+            React.createElement(Icon, { visual: type === "select" ? SvgChevronUpDown$1 : SvgChevronDown$1, size: size === "sm" ? "xs" : "sm", className: finalChevronClasses })))) : (React.createElement(it.Button, { disabled: disabled, ref: buttonRef, className: classNames(disabled ? "s-cursor-default" : "s-cursor-pointer", className, "s-group s-flex s-justify-items-center s-text-sm s-font-medium focus:s-outline-none focus:s-ring-0", label ? (size === "md" ? "s-gap-2" : "s-gap-1.5") : "s-gap-0.5", type === "submenu" ? "s-opacity-50" : "") },
         React.createElement(Icon, { visual: icon, size: size, className: finalIconClasses }),
-        React.createElement("span", { className: finalLabelClasses }, label),
+        React.createElement("span", { className: classNames(finalLabelClasses, type === "submenu" ? "s-w-full" : "") }, label),
         React.createElement(Icon, { visual: type === "select" ? SvgChevronUpDown$1 : SvgChevronDown$1, size: size === "sm" ? "xs" : "sm", className: finalChevronClasses })))));
 };
 DropdownMenu.Item = function (_a) {
-    var label = _a.label, description = _a.description, href = _a.href, disabled = _a.disabled, visual = _a.visual, icon = _a.icon, onClick = _a.onClick;
+    var label = _a.label, description = _a.description, href = _a.href, disabled = _a.disabled, visual = _a.visual, icon = _a.icon, onClick = _a.onClick, hasChildren = _a.hasChildren, children = _a.children;
     return (
     // need to use as="div" -- otherwise we get a "forwardRef" error in the console
-    React.createElement(it.Item, { disabled: disabled, as: "div" },
-        React.createElement(Item.Dropdown, { className: "s-w-full s-px-4", href: href, onClick: onClick, label: label, visual: visual, icon: icon, description: description })));
+    React.createElement(it.Item, { disabled: disabled, as: "div" }, hasChildren ? (React.createElement(DropdownMenu, { className: "s-w-full s-gap-x-2 s-px-4 s-py-2" },
+        React.createElement(DropdownMenu.Button, { label: label, type: "submenu", className: "s-w-full" }),
+        children)) : (React.createElement(Item.Dropdown, { className: "s-w-full s-px-4", href: href, onClick: onClick, label: label, visual: visual, icon: icon, description: description }))));
 };
 DropdownMenu.Items = function (_a) {
     var _b = _a.origin, origin = _b === void 0 ? "auto" : _b, _c = _a.width, width = _c === void 0 ? 160 : _c, children = _a.children;