@firecms/ui 3.0.0-canary.118 → 3.0.0-canary.119

package/dist/components/Menu.d.ts

@@ -6,6 +6,8 @@ export type MenuProps = {
     defaultOpen?: boolean;
     onOpenChange?(open: boolean): void;
     portalContainer?: HTMLElement | null;
+    side?: "top" | "right" | "bottom" | "left";
+    align?: "start" | "center" | "end";
 };
 declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLButtonElement>>;
 export { Menu };

package/dist/components/MultiSelect.d.ts

@@ -17,10 +17,7 @@ export type MultiSelectProps = {
     disabled?: boolean;
     error?: boolean;
     position?: "item-aligned" | "popper";
-    endAdornment?: React.ReactNode;
     inputRef?: React.RefObject<HTMLButtonElement>;
-    padding?: boolean;
-    includeFocusOutline?: boolean;
     children?: React.ReactNode;
 };
 interface MultiSelectContextProps {
@@ -29,7 +26,7 @@ interface MultiSelectContextProps {
     onValueChangeInternal: (v: string) => void;
 }
 export declare const MultiSelectContext: React.Context<MultiSelectContextProps>;
-export declare function MultiSelect({ value, open, onMultiValueChange, size, label, disabled, renderValue, renderValues, includeFocusOutline, containerClassName, className, children, error }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
+export declare function MultiSelect({ value, open, onMultiValueChange, size, label, disabled, renderValue, renderValues, containerClassName, className, children, error }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
 export interface MultiSelectItemProps {
     value: string;
     children?: React.ReactNode;

package/dist/components/NewMultiSelect.d.ts

@@ -0,0 +1,60 @@
+import * as React from "react";
+/**
+ * Props for MultiSelect component
+ */
+interface MultiSelectProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * An array of option objects to be displayed in the multi-select component.
+     * Each option object has a label, value, and an optional icon.
+     */
+    options: {
+        /** The text to display for the option. */
+        label: string;
+        /** The unique value associated with the option. */
+        value: string;
+    }[];
+    /**
+     * Callback function triggered when the selected values change.
+     * Receives an array of the new selected values.
+     */
+    onValueChange: (value: string[]) => void;
+    /** The default selected values when the component mounts. */
+    defaultValue: string[];
+    /**
+     * Placeholder text to be displayed when no values are selected.
+     * Optional, defaults to "Select options".
+     */
+    placeholder?: string;
+    /**
+     * Animation duration in seconds for the visual effects (e.g., bouncing badges).
+     * Optional, defaults to 0 (no animation).
+     */
+    animation?: number;
+    /**
+     * Maximum number of items to display. Extra selected items will be summarized.
+     * Optional, defaults to 3.
+     */
+    maxCount?: number;
+    /**
+     * The modality of the popover. When set to true, interaction with outside elements
+     * will be disabled and only popover content will be visible to screen readers.
+     * Optional, defaults to false.
+     */
+    modalPopover?: boolean;
+    /**
+     * If true, renders the multi-select component as a child of another component.
+     * Optional, defaults to false.
+     */
+    asChild?: boolean;
+    /**
+     * Additional class names to apply custom styles to the multi-select component.
+     * Optional, can be used to add custom styles.
+     */
+    className?: string;
+    size?: "small" | "medium";
+    invisible?: boolean;
+    disabled?: boolean;
+    variant?: "default" | "secondary" | "destructive";
+}
+export declare const NewMultiSelect: React.ForwardRefExoticComponent<MultiSelectProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/components/index.d.ts

@@ -26,6 +26,7 @@ export * from "./Markdown";
 export * from "./Menu";
 export * from "./Menubar";
 export * from "./MultiSelect";
+export * from "./NewMultiSelect";
 export * from "./Paper";
 export * from "./RadioGroup";
 export * from "./SearchBar";

package/dist/index.es.js

@@ -16,13 +16,13 @@ import MarkdownIt from "markdown-it";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import * as MenubarPrimitive from "@radix-ui/react-menubar";
 import { Command } from "cmdk";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import * as SelectPrimitive from "@radix-ui/react-select";
-import * as SeparatorPrimitive from "@radix-ui/react-separator";
 import * as ReactDOM from "react-dom";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
 const focusedDisabled = "focus-visible:ring-0 focus-visible:ring-offset-0";
 const focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-slate-100 focus:dark:bg-gray-800 focus:dark:bg-opacity-60";
 const focusedClasses = "z-30 outline-none ring-2 ring-primary ring-opacity-75 ring-offset-2 ring-offset-transparent ";
@@ -14832,7 +14832,7 @@ const Dialog = ({
     if (!open) {
       const timeout = setTimeout(() => {
         setDisplayed(false);
-      }, 250);
+      }, 150);
       return () => clearTimeout(timeout);
     } else {
       setDisplayed(true);
@@ -15198,6 +15198,8 @@ const Menu = React__default.forwardRef(({
   trigger,
   open,
   defaultOpen,
+  side,
+  align,
   onOpenChange,
   portalContainer
 }, ref) => /* @__PURE__ */ jsxs(
@@ -15215,7 +15217,15 @@ const Menu = React__default.forwardRef(({
           children: trigger
         }
       ),
-      /* @__PURE__ */ jsx(DropdownMenu.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(DropdownMenu.Content, { className: cls(paperMixin, "shadow py-2 z-30"), children }) })
+      /* @__PURE__ */ jsx(DropdownMenu.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+        DropdownMenu.Content,
+        {
+          side,
+          align,
+          className: cls(paperMixin, focusedDisabled, "shadow py-2 z-30"),
+          children
+        }
+      ) })
     ]
   }
 ));
@@ -15507,7 +15517,6 @@ function MultiSelect({
   disabled,
   renderValue,
   renderValues,
-  includeFocusOutline = true,
   containerClassName,
   className,
   children,
@@ -15606,38 +15615,46 @@ function MultiSelect({
               ]
             }
           ),
-          /* @__PURE__ */ jsx(DialogPrimitive.Root, { open: openInternal, onOpenChange: setOpenInternal, children: /* @__PURE__ */ jsx(DialogPrimitive.Portal, { children: /* @__PURE__ */ jsx(
-            MultiSelectContext.Provider,
+          /* @__PURE__ */ jsx(
+            DialogPrimitive.Root,
             {
-              value: {
-                fieldValue: value,
-                setInputValue,
-                onValueChangeInternal
-              },
-              children: /* @__PURE__ */ jsx(
-                "div",
+              open: openInternal,
+              modal: true,
+              onOpenChange: setOpenInternal,
+              children: /* @__PURE__ */ jsx(DialogPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+                MultiSelectContext.Provider,
                 {
-                  ref: listRef,
-                  className: "z-50 absolute overflow-auto outline-none",
-                  style: {
-                    pointerEvents: openInternal ? "auto" : "none",
-                    top: (usedBoundingRect?.top ?? 0) + (usedBoundingRect?.height ?? 0),
-                    left: usedBoundingRect?.left,
-                    // right: boundingRect?.right,
-                    width: usedBoundingRect?.width,
-                    maxHeight
+                  value: {
+                    fieldValue: value,
+                    setInputValue,
+                    onValueChangeInternal
                   },
                   children: /* @__PURE__ */ jsx(
-                    Command.Group,
+                    "div",
                     {
-                      className: "mt-2 text-slate-900 dark:text-white animate-in z-50 border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-800 p-2 rounded-lg shadow-lg flex flex-col outline-none w-full",
-                      children
+                      ref: listRef,
+                      className: "z-50 absolute overflow-auto outline-none",
+                      style: {
+                        pointerEvents: openInternal ? "auto" : "none",
+                        top: (usedBoundingRect?.top ?? 0) + (usedBoundingRect?.height ?? 0),
+                        left: usedBoundingRect?.left,
+                        // right: boundingRect?.right,
+                        width: usedBoundingRect?.width,
+                        maxHeight
+                      },
+                      children: /* @__PURE__ */ jsx(
+                        Command.Group,
+                        {
+                          className: "mt-2 text-slate-900 dark:text-white animate-in z-50 border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-800 p-2 rounded-lg shadow-lg flex flex-col outline-none w-full",
+                          children
+                        }
+                      )
                     }
                   )
                 }
-              )
+              ) })
             }
-          ) }) })
+          )
         ]
       }
     )
@@ -15672,6 +15689,305 @@ function MultiSelectItem({ children, value, className }) {
     }
   );
 }
+function Separator({ orientation, decorative }) {
+  if (orientation === "horizontal")
+    return /* @__PURE__ */ jsx(
+      SeparatorPrimitive.Root,
+      {
+        decorative,
+        orientation: "horizontal",
+        className: "dark:bg-opacity-50 bg-opacity-50 dark:bg-gray-600 bg-gray-300 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px my-[8px]"
+      }
+    );
+  else
+    return /* @__PURE__ */ jsx(
+      SeparatorPrimitive.Root,
+      {
+        className: "dark:bg-opacity-50 bg-opacity-50 dark:bg-gray-600 bg-gray-300 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px mx-[8px]",
+        decorative,
+        orientation: "vertical"
+      }
+    );
+}
+const NewMultiSelect = React.forwardRef(
+  ({
+    size,
+    options,
+    onValueChange,
+    invisible,
+    disabled,
+    variant,
+    defaultValue = [],
+    placeholder = "Select options",
+    animation = 0,
+    maxCount = 3,
+    modalPopover = false,
+    asChild = false,
+    className,
+    ...props
+  }, ref) => {
+    const [selectedValues, setSelectedValues] = React.useState(defaultValue);
+    const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
+    React.useEffect(() => {
+      setSelectedValues(defaultValue);
+    }, [defaultValue]);
+    const handleInputKeyDown = (event) => {
+      if (event.key === "Enter") {
+        setIsPopoverOpen(true);
+      } else if (event.key === "Backspace" && !event.currentTarget.value) {
+        const newSelectedValues = [...selectedValues];
+        newSelectedValues.pop();
+        setSelectedValues(newSelectedValues);
+        onValueChange(newSelectedValues);
+      }
+    };
+    const toggleOption = (value) => {
+      const newSelectedValues = selectedValues.includes(value) ? selectedValues.filter((v) => v !== value) : [...selectedValues, value];
+      setSelectedValues(newSelectedValues);
+      onValueChange(newSelectedValues);
+    };
+    const handleClear = () => {
+      setSelectedValues([]);
+      onValueChange([]);
+    };
+    const handleTogglePopover = () => {
+      setIsPopoverOpen((prev) => !prev);
+    };
+    const clearExtraOptions = () => {
+      const newSelectedValues = selectedValues.slice(0, maxCount);
+      setSelectedValues(newSelectedValues);
+      onValueChange(newSelectedValues);
+    };
+    const toggleAll = () => {
+      if (selectedValues.length === options.length) {
+        handleClear();
+      } else {
+        const allValues = options.map((option) => option.value);
+        setSelectedValues(allValues);
+        onValueChange(allValues);
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      PopoverPrimitive.Root,
+      {
+        open: isPopoverOpen,
+        onOpenChange: setIsPopoverOpen,
+        modal: modalPopover,
+        children: [
+          /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              ref,
+              ...props,
+              onClick: handleTogglePopover,
+              className: cls(
+                size === "small" ? "min-h-[42px]" : "min-h-[64px]",
+                "select-none rounded-md text-sm",
+                invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin,
+                disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
+                "relative flex items-center",
+                className
+              ),
+              children: selectedValues.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center w-full", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center", children: [
+                  selectedValues.slice(0, maxCount).map((value) => {
+                    const option = options.find((o) => o.value === value);
+                    return /* @__PURE__ */ jsxs(
+                      Chip,
+                      {
+                        className: cls(
+                          "m-1 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300",
+                          {
+                            "border-foreground/10 text-foreground bg-card hover:bg-card/80": variant === "default",
+                            "border-foreground/10 bg-secondary text-secondary-foreground hover:bg-secondary/80": variant === "secondary",
+                            "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80": variant === "destructive"
+                          }
+                        ),
+                        style: { animationDuration: `${animation}s` },
+                        children: [
+                          option?.label,
+                          /* @__PURE__ */ jsx(
+                            CloseIcon,
+                            {
+                              size: "smallest",
+                              onClick: (event) => {
+                                event.stopPropagation();
+                                toggleOption(value);
+                              }
+                            }
+                          )
+                        ]
+                      },
+                      value
+                    );
+                  }),
+                  selectedValues.length > maxCount && /* @__PURE__ */ jsxs(
+                    Chip,
+                    {
+                      className: cls(
+                        "bg-transparent text-foreground border-foreground/1 hover:bg-transparent",
+                        "m-1 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300",
+                        {
+                          "border-foreground/10 text-foreground bg-card hover:bg-card/80": variant === "default",
+                          "border-foreground/10 bg-secondary text-secondary-foreground hover:bg-secondary/80": variant === "secondary",
+                          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80": variant === "destructive"
+                        }
+                      ),
+                      style: { animationDuration: `${animation}s` },
+                      children: [
+                        `+ ${selectedValues.length - maxCount} more`,
+                        /* @__PURE__ */ jsx(
+                          CloseIcon,
+                          {
+                            size: "smallest",
+                            onClick: (event) => {
+                              event.stopPropagation();
+                              clearExtraOptions();
+                            }
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsx(
+                    CloseIcon,
+                    {
+                      size: "small",
+                      onClick: (event) => {
+                        event.stopPropagation();
+                        handleClear();
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Separator,
+                    {
+                      orientation: "vertical"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("div", { className: cls("px-2 h-full flex items-center"), children: /* @__PURE__ */ jsx(
+                    ExpandMoreIcon,
+                    {
+                      size: "small",
+                      className: cls("transition", isPopoverOpen ? "rotate-180" : "")
+                    }
+                  ) })
+                ] })
+              ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between w-full mx-auto", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground mx-3", children: placeholder }),
+                /* @__PURE__ */ jsx("div", { className: cls("px-2 h-full flex items-center"), children: /* @__PURE__ */ jsx(
+                  ExpandMoreIcon,
+                  {
+                    size: "small",
+                    className: cls("transition", isPopoverOpen ? "rotate-180" : "")
+                  }
+                ) })
+              ] })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            PopoverPrimitive.Content,
+            {
+              className: cls("z-50 relative overflow-hidden border bg-white dark:bg-gray-900 p-2 rounded-lg", defaultBorderMixin),
+              align: "start",
+              onEscapeKeyDown: () => setIsPopoverOpen(false),
+              children: /* @__PURE__ */ jsxs(Command, { children: [
+                /* @__PURE__ */ jsx(
+                  Command.Input,
+                  {
+                    className: cls(focusedDisabled, "bg-transparent outline-none flex-1 h-full w-full m-4"),
+                    placeholder: "Search...",
+                    onKeyDown: handleInputKeyDown
+                  }
+                ),
+                /* @__PURE__ */ jsxs(Command.List, { children: [
+                  /* @__PURE__ */ jsx(Command.Empty, { children: "No results found." }),
+                  /* @__PURE__ */ jsxs(Command.Group, { children: [
+                    /* @__PURE__ */ jsxs(
+                      Command.Item,
+                      {
+                        onSelect: toggleAll,
+                        className: cls(
+                          // (fieldValue ?? []).includes(value) ? "bg-slate-200 dark:bg-slate-950" : "",
+                          "cursor-pointer",
+                          "flex flex-row items-center gap-2",
+                          "ring-offset-transparent",
+                          "p-1 rounded aria-[selected=true]:outline-none aria-[selected=true]:ring-2 aria-[selected=true]:ring-primary aria-[selected=true]:ring-opacity-75 aria-[selected=true]:ring-offset-2",
+                          "aria-[selected=true]:bg-slate-100 aria-[selected=true]:dark:bg-slate-900",
+                          "cursor-pointer p-1 rounded aria-[selected=true]:bg-slate-100 aria-[selected=true]:dark:bg-slate-900",
+                          className
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsx(Checkbox, { checked: selectedValues.length === options.length, size: "small" }),
+                          /* @__PURE__ */ jsx("span", { children: "(Select All)" })
+                        ]
+                      },
+                      "all"
+                    ),
+                    options.map((option) => {
+                      const isSelected = selectedValues.includes(option.value);
+                      return /* @__PURE__ */ jsxs(
+                        Command.Item,
+                        {
+                          onSelect: () => toggleOption(option.value),
+                          className: cls(
+                            // (fieldValue ?? []).includes(value) ? "bg-slate-200 dark:bg-slate-950" : "",
+                            "cursor-pointer",
+                            "flex flex-row items-center gap-2",
+                            "ring-offset-transparent",
+                            "p-1 rounded aria-[selected=true]:outline-none aria-[selected=true]:ring-2 aria-[selected=true]:ring-primary aria-[selected=true]:ring-opacity-75 aria-[selected=true]:ring-offset-2",
+                            "aria-[selected=true]:bg-slate-100 aria-[selected=true]:dark:bg-slate-900",
+                            "cursor-pointer p-1 rounded aria-[selected=true]:bg-slate-100 aria-[selected=true]:dark:bg-slate-900",
+                            className
+                          ),
+                          children: [
+                            /* @__PURE__ */ jsx(Checkbox, { checked: isSelected, size: "small" }),
+                            /* @__PURE__ */ jsx("span", { children: option.label })
+                          ]
+                        },
+                        option.value
+                      );
+                    })
+                  ] }),
+                  /* @__PURE__ */ jsx(Command.Separator, {}),
+                  /* @__PURE__ */ jsx(Command.Group, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                    selectedValues.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(
+                        Command.Item,
+                        {
+                          onSelect: handleClear,
+                          className: "flex-1 justify-center cursor-pointer",
+                          children: "Clear"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Separator,
+                        {
+                          orientation: "vertical"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      Command.Item,
+                      {
+                        onSelect: () => setIsPopoverOpen(false),
+                        className: "flex-1 justify-center cursor-pointer max-w-full",
+                        children: "Close"
+                      }
+                    )
+                  ] }) })
+                ] })
+              ] })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+NewMultiSelect.displayName = "MultiSelect";
 function Paper({
   children,
   style,
@@ -15936,7 +16252,7 @@ const Select = forwardRef(({
           SelectPrimitive.Content,
           {
             position,
-            className: "z-50 relative overflow-hidden border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-800 p-2 rounded-lg shadow-lg",
+            className: cls("z-50 relative overflow-hidden border bg-white dark:bg-gray-900 p-2 rounded-lg", defaultBorderMixin),
             children: /* @__PURE__ */ jsx(
               SelectPrimitive.Viewport,
               {
@@ -15971,8 +16287,8 @@ function SelectItem({
         "w-full",
         "relative flex items-center p-2 rounded-md text-sm text-slate-700 dark:text-slate-300",
         "focus:z-10",
-        "data-[state=checked]:bg-slate-100 data-[state=checked]:dark:bg-slate-900 focus:bg-slate-100 dark:focus:bg-slate-950",
-        "data-[state=checked]:focus:bg-slate-200 data-[state=checked]:dark:focus:bg-slate-950",
+        "data-[state=checked]:bg-slate-100 data-[state=checked]:dark:bg-slate-800 focus:bg-slate-100 dark:focus:bg-gray-950",
+        "data-[state=checked]:focus:bg-slate-200 data-[state=checked]:dark:focus:bg-gray-950",
         disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
         "[&>*]:w-full",
         "overflow-visible",
@@ -16012,26 +16328,6 @@ function SelectGroup({
     children
   ] });
 }
-function Separator({ orientation, decorative }) {
-  if (orientation === "horizontal")
-    return /* @__PURE__ */ jsx(
-      SeparatorPrimitive.Root,
-      {
-        decorative,
-        orientation: "horizontal",
-        className: "dark:bg-opacity-50 bg-opacity-50 dark:bg-gray-600 bg-gray-300 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px my-[8px]"
-      }
-    );
-  else
-    return /* @__PURE__ */ jsx(
-      SeparatorPrimitive.Root,
-      {
-        className: "dark:bg-opacity-50 bg-opacity-50 dark:bg-gray-600 bg-gray-300 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px mx-[8px]",
-        decorative,
-        orientation: "vertical"
-      }
-    );
-}
 const Sheet = ({
   children,
   side = "right",
@@ -18992,6 +19288,7 @@ export {
   NetworkWifiLockedIcon,
   NeurologyIcon,
   NewLabelIcon,
+  NewMultiSelect,
   NewReleasesIcon,
   NewWindowIcon,
   NewsIcon,