@inf-monkeys-tech/monkeys-design 1.0.96 → 1.0.97

package/dist/components/data-explorer/index.mjs

@@ -1,4 +1,4 @@
-import * as DropdownMenu3 from '@radix-ui/react-dropdown-menu';
+import * as DropdownMenu4 from '@radix-ui/react-dropdown-menu';
 import { forwardRef, useState, useContext, useMemo, createContext, useRef, useEffect, useCallback, Fragment as Fragment$1, useLayoutEffect } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { twMerge } from 'tailwind-merge';
@@ -757,8 +757,8 @@ function DataExplorerSelect({
     /* @__PURE__ */ jsx("span", { children: label }),
     /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: selected?.label ?? placeholder })
   ] }) : selected?.label ?? label ?? placeholder;
-  return /* @__PURE__ */ jsxs(DropdownMenu3.Root, { children: [
-    /* @__PURE__ */ jsx(DropdownMenu3.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs(DropdownMenu4.Root, { children: [
+    /* @__PURE__ */ jsx(DropdownMenu4.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
@@ -786,8 +786,8 @@ function DataExplorerSelect({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx(DropdownMenu3.Portal, { children: /* @__PURE__ */ jsx(
-      DropdownMenu3.Content,
+    /* @__PURE__ */ jsx(DropdownMenu4.Portal, { children: /* @__PURE__ */ jsx(
+      DropdownMenu4.Content,
       {
         align,
         sideOffset,
@@ -795,7 +795,7 @@ function DataExplorerSelect({
         style: theme.styles.menuContent,
         onClick: (event) => event.stopPropagation(),
         children: /* @__PURE__ */ jsx(
-          DropdownMenu3.RadioGroup,
+          DropdownMenu4.RadioGroup,
           {
             value,
             onValueChange: (nextValue) => {
@@ -803,7 +803,7 @@ function DataExplorerSelect({
               void onValueChange?.(nextValue);
             },
             children: options.map((option) => /* @__PURE__ */ jsxs(
-              DropdownMenu3.RadioItem,
+              DropdownMenu4.RadioItem,
               {
                 value: option.value,
                 title: option.title,
@@ -849,9 +849,9 @@ function renderMenuItem(action, context, theme, className) {
   const disabled = (resolveDataExplorerValue(action.disabled, context) ?? false) || (resolveDataExplorerValue(action.loading, context) ?? false);
   const active = resolveDataExplorerValue(action.active, context) ?? false;
   return /* @__PURE__ */ jsxs("div", { children: [
-    action.separatorBefore ? /* @__PURE__ */ jsx(DropdownMenu3.Separator, { className: theme.slots.menuSeparator }) : null,
+    action.separatorBefore ? /* @__PURE__ */ jsx(DropdownMenu4.Separator, { className: theme.slots.menuSeparator }) : null,
     /* @__PURE__ */ jsxs(
-      DropdownMenu3.Item,
+      DropdownMenu4.Item,
       {
         title: action.title,
         disabled,
@@ -872,7 +872,7 @@ function renderMenuItem(action, context, theme, className) {
         ]
       }
     ),
-    action.separatorAfter ? /* @__PURE__ */ jsx(DropdownMenu3.Separator, { className: theme.slots.menuSeparator }) : null
+    action.separatorAfter ? /* @__PURE__ */ jsx(DropdownMenu4.Separator, { className: theme.slots.menuSeparator }) : null
   ] }, action.id);
 }
 function renderMenuAction(action, context, theme, classNames, appearance) {
@@ -881,8 +881,8 @@ function renderMenuAction(action, context, theme, classNames, appearance) {
   const visibleItems = (action.items ?? []).filter(
     (item) => resolveDataExplorerValue(item.visible, context) ?? true
   );
-  return /* @__PURE__ */ jsxs(DropdownMenu3.Root, { children: [
-    /* @__PURE__ */ jsx(DropdownMenu3.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(DropdownMenu4.Root, { children: [
+    /* @__PURE__ */ jsx(DropdownMenu4.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
       DataExplorerButton,
       {
         title: action.title,
@@ -898,8 +898,8 @@ function renderMenuAction(action, context, theme, classNames, appearance) {
         className: classNames?.action
       }
     ) }),
-    /* @__PURE__ */ jsx(DropdownMenu3.Portal, { children: /* @__PURE__ */ jsxs(
-      DropdownMenu3.Content,
+    /* @__PURE__ */ jsx(DropdownMenu4.Portal, { children: /* @__PURE__ */ jsxs(
+      DropdownMenu4.Content,
       {
         align: action.align ?? "end",
         sideOffset: action.sideOffset ?? 6,
@@ -908,8 +908,8 @@ function renderMenuAction(action, context, theme, classNames, appearance) {
         onClick: (event) => event.stopPropagation(),
         children: [
           action.menuLabel ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(DropdownMenu3.Label, { className: theme.slots.menuLabel, children: action.menuLabel }),
-            /* @__PURE__ */ jsx(DropdownMenu3.Separator, { className: theme.slots.menuSeparator })
+            /* @__PURE__ */ jsx(DropdownMenu4.Label, { className: theme.slots.menuLabel, children: action.menuLabel }),
+            /* @__PURE__ */ jsx(DropdownMenu4.Separator, { className: theme.slots.menuSeparator })
           ] }) : null,
           visibleItems.map(
             (item) => renderMenuItem(item, context, theme, classNames?.menuItem)
@@ -3372,6 +3372,128 @@ function DataExplorerFilterBar({
     }
   );
 }
+function ChevronDownIcon3({ open }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-hidden": "true",
+      viewBox: "0 0 24 24",
+      className: cn("h-4 w-4 transition-transform", open && "rotate-180"),
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "2",
+      children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+    }
+  );
+}
+function DataExplorerSplitButton({
+  label,
+  icon,
+  items = [],
+  onPrimaryAction,
+  onAction,
+  menuLabel,
+  triggerLabel = "More actions",
+  title,
+  tone,
+  active = false,
+  disabled = false,
+  appearance,
+  className,
+  classNames
+}) {
+  const [open, setOpen] = useState(false);
+  const theme = resolveDataExplorerAppearance(appearance);
+  const hasItems = items.length > 0;
+  const resolvedActive = active || open;
+  const handlePrimaryClick = (event) => {
+    if (disabled) return;
+    onPrimaryAction?.(event);
+  };
+  return /* @__PURE__ */ jsxs(DropdownMenu4.Root, { open: hasItems && open, onOpenChange: (nextOpen) => setOpen(hasItems ? nextOpen : false), children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "inline-flex min-w-0 shrink-0 overflow-hidden rounded-md",
+          getDataExplorerActionToneClassName(theme, tone, resolvedActive),
+          classNames?.root,
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            DataExplorerButton,
+            {
+              label,
+              icon,
+              title,
+              disabled,
+              active: resolvedActive,
+              appearance,
+              className: cn("rounded-none border-r-0", classNames?.primary),
+              onClick: handlePrimaryClick
+            }
+          ),
+          hasItems ? /* @__PURE__ */ jsx(DropdownMenu4.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": triggerLabel,
+              title: triggerLabel,
+              disabled,
+              className: cn(
+                theme.slots.controlButton,
+                "w-9 shrink-0 rounded-none border-l-0 px-0",
+                resolvedActive ? getDataExplorerActionToneClassName(theme, tone, true) : getDataExplorerActionToneClassName(theme, tone, false),
+                classNames?.trigger
+              ),
+              onClick: (event) => event.stopPropagation(),
+              children: /* @__PURE__ */ jsx(ChevronDownIcon3, { open })
+            }
+          ) }) : null
+        ]
+      }
+    ),
+    hasItems ? /* @__PURE__ */ jsx(DropdownMenu4.Portal, { children: /* @__PURE__ */ jsxs(
+      DropdownMenu4.Content,
+      {
+        align: "start",
+        sideOffset: 6,
+        className: cn(theme.slots.menuContent, classNames?.content),
+        style: theme.styles.menuContent,
+        children: [
+          menuLabel ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(DropdownMenu4.Label, { className: theme.slots.menuLabel, children: menuLabel }),
+            /* @__PURE__ */ jsx(DropdownMenu4.Separator, { className: theme.slots.menuSeparator })
+          ] }) : null,
+          items.map((item) => /* @__PURE__ */ jsxs(
+            DropdownMenu4.Item,
+            {
+              title: item.title,
+              disabled: item.disabled,
+              className: cn(
+                theme.slots.menuItem,
+                getDataExplorerActionToneClassName(theme, item.tone, false),
+                classNames?.item
+              ),
+              style: theme.styles.menuItem,
+              onSelect: () => {
+                if (!item.disabled) onAction?.(item.id);
+              },
+              children: [
+                item.icon ? /* @__PURE__ */ jsx("span", { className: theme.slots.menuItemIcon, children: item.icon }) : null,
+                /* @__PURE__ */ jsx("span", { className: theme.slots.menuItemLabel, children: item.label })
+              ]
+            },
+            item.id
+          ))
+        ]
+      }
+    ) }) : null
+  ] });
+}
 function DataExplorerDetailField({
   field,
   label = field?.label,
@@ -4565,8 +4687,8 @@ function DataExplorerDisplayActionMenu({
   if (visibleActions.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx("span", { className: cn("inline-flex", classNames?.root), children: /* @__PURE__ */ jsxs(DropdownMenu3.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(DropdownMenu3.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("span", { className: cn("inline-flex", classNames?.root), children: /* @__PURE__ */ jsxs(DropdownMenu4.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(DropdownMenu4.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
@@ -4583,8 +4705,8 @@ function DataExplorerDisplayActionMenu({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx(DropdownMenu3.Portal, { children: /* @__PURE__ */ jsxs(
-      DropdownMenu3.Content,
+    /* @__PURE__ */ jsx(DropdownMenu4.Portal, { children: /* @__PURE__ */ jsxs(
+      DropdownMenu4.Content,
       {
         align,
         sideOffset,
@@ -4597,7 +4719,7 @@ function DataExplorerDisplayActionMenu({
         children: [
           label ? /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(
-              DropdownMenu3.Label,
+              DropdownMenu4.Label,
               {
                 className: cn(
                   theme.slots.menuLabel,
@@ -4607,7 +4729,7 @@ function DataExplorerDisplayActionMenu({
               }
             ),
             /* @__PURE__ */ jsx(
-              DropdownMenu3.Separator,
+              DropdownMenu4.Separator,
               {
                 className: cn(
                   theme.slots.menuSeparator,
@@ -4621,7 +4743,7 @@ function DataExplorerDisplayActionMenu({
             if (action.render) {
               return /* @__PURE__ */ jsxs("div", { children: [
                 action.separatorBefore ? /* @__PURE__ */ jsx(
-                  DropdownMenu3.Separator,
+                  DropdownMenu4.Separator,
                   {
                     className: cn(
                       theme.slots.menuSeparator,
@@ -4631,7 +4753,7 @@ function DataExplorerDisplayActionMenu({
                 ) : null,
                 action.render(context),
                 action.separatorAfter ? /* @__PURE__ */ jsx(
-                  DropdownMenu3.Separator,
+                  DropdownMenu4.Separator,
                   {
                     className: cn(
                       theme.slots.menuSeparator,
@@ -4643,7 +4765,7 @@ function DataExplorerDisplayActionMenu({
             }
             return /* @__PURE__ */ jsxs("div", { children: [
               action.separatorBefore ? /* @__PURE__ */ jsx(
-                DropdownMenu3.Separator,
+                DropdownMenu4.Separator,
                 {
                   className: cn(
                     "-mx-1 my-1 h-px bg-border",
@@ -4652,7 +4774,7 @@ function DataExplorerDisplayActionMenu({
                 }
               ) : null,
               /* @__PURE__ */ jsxs(
-                DropdownMenu3.Item,
+                DropdownMenu4.Item,
                 {
                   title: action.title,
                   disabled,
@@ -4703,7 +4825,7 @@ function DataExplorerDisplayActionMenu({
                 }
               ),
               action.separatorAfter ? /* @__PURE__ */ jsx(
-                DropdownMenu3.Separator,
+                DropdownMenu4.Separator,
                 {
                   className: cn(
                     theme.slots.menuSeparator,
@@ -6784,8 +6906,8 @@ function DataExplorerViewTree({
       return resolveDataExplorerValue(action.visible, payload) ?? true;
     });
     if (visibleActions.length === 0) return null;
-    return /* @__PURE__ */ jsxs(DropdownMenu3.Root, { children: [
-      /* @__PURE__ */ jsx(DropdownMenu3.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsxs(DropdownMenu4.Root, { children: [
+      /* @__PURE__ */ jsx(DropdownMenu4.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
@@ -6800,8 +6922,8 @@ function DataExplorerViewTree({
           children: /* @__PURE__ */ jsx(MoreIcon2, {})
         }
       ) }),
-      /* @__PURE__ */ jsx(DropdownMenu3.Portal, { children: /* @__PURE__ */ jsx(
-        DropdownMenu3.Content,
+      /* @__PURE__ */ jsx(DropdownMenu4.Portal, { children: /* @__PURE__ */ jsx(
+        DropdownMenu4.Content,
         {
           align: "end",
           sideOffset: 6,
@@ -6816,9 +6938,9 @@ function DataExplorerViewTree({
               return /* @__PURE__ */ jsx("div", { children: action.render(payload) }, action.id);
             }
             return /* @__PURE__ */ jsxs("div", { children: [
-              action.separatorBefore ? /* @__PURE__ */ jsx(DropdownMenu3.Separator, { className: theme.slots.menuSeparator }) : null,
+              action.separatorBefore ? /* @__PURE__ */ jsx(DropdownMenu4.Separator, { className: theme.slots.menuSeparator }) : null,
               /* @__PURE__ */ jsxs(
-                DropdownMenu3.Item,
+                DropdownMenu4.Item,
                 {
                   title: action.title,
                   disabled,
@@ -6840,7 +6962,7 @@ function DataExplorerViewTree({
                   ]
                 }
               ),
-              action.separatorAfter ? /* @__PURE__ */ jsx(DropdownMenu3.Separator, { className: theme.slots.menuSeparator }) : null
+              action.separatorAfter ? /* @__PURE__ */ jsx(DropdownMenu4.Separator, { className: theme.slots.menuSeparator }) : null
             ] }, action.id);
           })
         }
@@ -7381,6 +7503,6 @@ function DataExplorerViewShell({
   );
 }
 
-export { DataExplorerActionBar, DataExplorerButton, DataExplorerCheckbox, DataExplorerCollectionFooter, DataExplorerDetailField, DataExplorerDetailSection, DataExplorerDetailShell, DataExplorerDisplayActionMenu, DataExplorerDisplayCard, DataExplorerDisplayCollectionView, DataExplorerDisplayListItem, DataExplorerDisplayMedia, DataExplorerDraggableTree, DataExplorerFilterBar, DataExplorerImagePreview, DataExplorerPage, DataExplorerRecordCard, DataExplorerSelect, DataExplorerToolbarActions, DataExplorerToolbarShell, DataExplorerTree, DataExplorerTreeShell, DataExplorerView, DataExplorerViewCollection, DataExplorerViewItem, DataExplorerViewItemShell, DataExplorerViewShell, DataExplorerViewTree, getDataExplorerActionToneClassName, getDataExplorerMenuItemToneClassName, resolveDataExplorerAppearance };
+export { DataExplorerActionBar, DataExplorerButton, DataExplorerCheckbox, DataExplorerCollectionFooter, DataExplorerDetailField, DataExplorerDetailSection, DataExplorerDetailShell, DataExplorerDisplayActionMenu, DataExplorerDisplayCard, DataExplorerDisplayCollectionView, DataExplorerDisplayListItem, DataExplorerDisplayMedia, DataExplorerDraggableTree, DataExplorerFilterBar, DataExplorerImagePreview, DataExplorerPage, DataExplorerRecordCard, DataExplorerSelect, DataExplorerSplitButton, DataExplorerToolbarActions, DataExplorerToolbarShell, DataExplorerTree, DataExplorerTreeShell, DataExplorerView, DataExplorerViewCollection, DataExplorerViewItem, DataExplorerViewItemShell, DataExplorerViewShell, DataExplorerViewTree, getDataExplorerActionToneClassName, getDataExplorerMenuItemToneClassName, resolveDataExplorerAppearance };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map