@firecms/ui 3.0.0-canary.12 → 3.0.0-canary.120

package/src/components/NewMultiSelect.tsx

@@ -0,0 +1,370 @@
+// src/components/multi-select.tsx
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { cls } from "../util";
+import { CloseIcon, ExpandMoreIcon } from "../icons";
+import { Separator } from "./Separator";
+import { Checkbox } from "./Checkbox";
+import { Chip } from "./Chip";
+import {
+    defaultBorderMixin,
+    fieldBackgroundDisabledMixin,
+    fieldBackgroundHoverMixin,
+    fieldBackgroundInvisibleMixin,
+    fieldBackgroundMixin,
+    focusedDisabled
+} from "../styles";
+
+/**
+ * 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 const NewMultiSelect = React.forwardRef<
+    HTMLButtonElement,
+    MultiSelectProps
+>(
+    (
+        {
+            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<string[]>(defaultValue);
+        const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
+        // const [isAnimating, setIsAnimating] = React.useState(false);
+
+        React.useEffect(() => {
+            setSelectedValues(defaultValue);
+        }, [defaultValue]);
+
+        const handleInputKeyDown = (
+            event: React.KeyboardEvent<HTMLInputElement>
+        ) => {
+            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: string) => {
+            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 (
+            <PopoverPrimitive.Root
+                open={isPopoverOpen}
+                onOpenChange={setIsPopoverOpen}
+                modal={modalPopover}
+            >
+                <PopoverPrimitive.Trigger asChild>
+                    <button
+                        ref={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
+                        )}
+                    >
+                        {selectedValues.length > 0 ? (
+                            <div className="flex justify-between items-center w-full">
+                                <div className="flex flex-wrap items-center">
+                                    {selectedValues.slice(0, maxCount).map((value) => {
+                                        const option = options.find((o) => o.value === value);
+                                        return (
+                                            <Chip
+                                                key={value}
+                                                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` }}
+                                            >
+                                                {option?.label}
+                                                <CloseIcon
+                                                    size={"smallest"}
+                                                    onClick={(event) => {
+                                                        event.stopPropagation();
+                                                        toggleOption(value);
+                                                    }}
+                                                />
+                                            </Chip>
+                                        );
+                                    })}
+                                    {selectedValues.length > maxCount && (
+                                        <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` }}
+                                        >
+                                            {`+ ${selectedValues.length - maxCount} more`}
+                                            <CloseIcon
+                                                size={"smallest"}
+                                                onClick={(event) => {
+                                                    event.stopPropagation();
+                                                    clearExtraOptions();
+                                                }}
+                                            />
+                                        </Chip>
+                                    )}
+                                </div>
+                                <div className="flex items-center justify-between">
+                                    <CloseIcon
+                                        size={"small"}
+                                        onClick={(event) => {
+                                            event.stopPropagation();
+                                            handleClear();
+                                        }}
+                                    />
+                                    <Separator
+                                        orientation="vertical"
+                                    />
+
+                                    <div className={cls("px-2 h-full flex items-center")}>
+                                        <ExpandMoreIcon size={"small"}
+                                                        className={cls("transition", isPopoverOpen ? "rotate-180" : "")}/>
+                                    </div>
+                                </div>
+                            </div>
+                        ) : (
+                            <div className="flex items-center justify-between w-full mx-auto">
+                                <span className="text-sm text-muted-foreground mx-3">
+                                  {placeholder}
+                                </span>
+                                <div className={cls("px-2 h-full flex items-center")}>
+                                    <ExpandMoreIcon size={"small"}
+                                                    className={cls("transition", isPopoverOpen ? "rotate-180" : "")}/>
+                                </div>
+                            </div>
+                        )}
+                    </button>
+                </PopoverPrimitive.Trigger>
+                <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)}
+                >
+                    <CommandPrimitive>
+                        <CommandPrimitive.Input
+                            className={cls(focusedDisabled, "bg-transparent outline-none flex-1 h-full w-full m-4")}
+                            placeholder="Search..."
+                            onKeyDown={handleInputKeyDown}
+                        />
+                        <CommandPrimitive.List>
+                            <CommandPrimitive.Empty>No results found.</CommandPrimitive.Empty>
+                            <CommandPrimitive.Group>
+                                <CommandPrimitive.Item
+                                    key="all"
+                                    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
+                                        )
+                                    }
+                                >
+                                    <Checkbox checked={selectedValues.length === options.length} size={"small"}/>
+                                    <span>(Select All)</span>
+                                </CommandPrimitive.Item>
+                                {options.map((option) => {
+                                    const isSelected = selectedValues.includes(option.value);
+                                    return (
+                                        <CommandPrimitive.Item
+                                            key={option.value}
+                                            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
+                                            )}
+                                        >
+
+                                            <Checkbox checked={isSelected} size={"small"}/>
+                                            <span>{option.label}</span>
+                                        </CommandPrimitive.Item>
+                                    );
+                                })}
+                            </CommandPrimitive.Group>
+                            <CommandPrimitive.Separator/>
+                            <CommandPrimitive.Group>
+                                <div className="flex items-center justify-between">
+                                    {selectedValues.length > 0 && (
+                                        <>
+                                            <CommandPrimitive.Item
+                                                onSelect={handleClear}
+                                                className="flex-1 justify-center cursor-pointer"
+                                            >
+                                                Clear
+                                            </CommandPrimitive.Item>
+                                            <Separator
+                                                orientation="vertical"
+                                            />
+                                        </>
+                                    )}
+                                    <CommandPrimitive.Item
+                                        onSelect={() => setIsPopoverOpen(false)}
+                                        className="flex-1 justify-center cursor-pointer max-w-full"
+                                    >
+                                        Close
+                                    </CommandPrimitive.Item>
+                                </div>
+                            </CommandPrimitive.Group>
+                        </CommandPrimitive.List>
+                    </CommandPrimitive>
+                </PopoverPrimitive.Content>
+                {/*{animation > 0 && selectedValues.length > 0 && (*/}
+                {/*    <WandSparkles*/}
+                {/*        className={cls(*/}
+                {/*            "cursor-pointer my-2 text-foreground bg-background w-3 h-3",*/}
+                {/*            isAnimating ? "" : "text-muted-foreground"*/}
+                {/*        )}*/}
+                {/*        onClick={() => setIsAnimating(!isAnimating)}*/}
+                {/*    />*/}
+                {/*)}*/}
+            </PopoverPrimitive.Root>
+        );
+    }
+);
+
+NewMultiSelect.displayName = "MultiSelect";

package/src/components/Paper.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import { paperMixin } from "../styles";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export function Paper({
                           children,
@@ -15,7 +15,7 @@ export function Paper({
 }) {
     return (
         <div
-            className={cn(paperMixin, className)}
+            className={cls(paperMixin, className)}
             style={style}>
             {children}
         </div>

package/src/components/Popover.tsx

@@ -2,7 +2,8 @@ import React from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 
 import { paperMixin } from "../styles";
-import { cn, useInjectStyles } from "../util";
+import { cls } from "../util";
+import { useInjectStyles } from "../hooks";
 
 export type PopoverSide = "top" | "right" | "bottom" | "left";
 export type PopoverAlign = "start" | "center" | "end";
@@ -23,6 +24,7 @@ export interface PopoverProps {
     enabled?: boolean;
     modal?: boolean;
     className?: string;
+    portalContainer?: HTMLElement | null;
 }
 
 export function Popover({
@@ -40,6 +42,7 @@ export function Popover({
                             avoidCollisions,
                             enabled = true,
                             modal = false,
+                            portalContainer,
                             className
                         }: PopoverProps) {
 
@@ -50,22 +53,22 @@ export function Popover({
 
     return <PopoverPrimitive.Root open={open}
                                   onOpenChange={onOpenChange}
-                                  modal={modal}
-    >
+                                  modal={modal}>
         <PopoverPrimitive.Trigger asChild>
             {trigger}
         </PopoverPrimitive.Trigger>
-        <PopoverPrimitive.Portal>
-            <PopoverPrimitive.Content className={cn(paperMixin,
-                "PopoverContent shadow z-40", className)}
-                                      side={side}
-                                      sideOffset={sideOffset}
-                                      align={align}
-                                      alignOffset={alignOffset}
-                                      arrowPadding={arrowPadding}
-                                      sticky={sticky}
-                                      hideWhenDetached={hideWhenDetached}
-                                      avoidCollisions={avoidCollisions}>
+        <PopoverPrimitive.Portal container={portalContainer}>
+            <PopoverPrimitive.Content
+                className={cls(paperMixin,
+                    "PopoverContent shadow z-40", className)}
+                side={side}
+                sideOffset={sideOffset}
+                align={align}
+                alignOffset={alignOffset}
+                arrowPadding={arrowPadding}
+                sticky={sticky}
+                hideWhenDetached={hideWhenDetached}
+                avoidCollisions={avoidCollisions}>
 
                 {children}
                 <PopoverPrimitive.Arrow className="fill-white dark:fill-slate-950"/>

package/src/components/RadioGroup.tsx

@@ -1,15 +1,36 @@
 import * as React from "react"
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
-import { cn } from "../util";
-import { CircleIcon } from "../icons";
+import { cls } from "../util";
+
+export interface RadioGroupProps {
+    id?: string;
+    children: React.ReactNode;
+    name?: string
+    required?: boolean;
+    disabled?: boolean;
+    /**
+     * Whether keyboard navigation should loop around
+     * @defaultValue false
+     */
+    loop?: boolean;
+    defaultValue?: string;
+    value?: string;
+
+    onValueChange?(value: string): void;
+
+    className?: string;
+}
 
 const RadioGroup = React.forwardRef<
     React.ElementRef<typeof RadioGroupPrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
->(({ className, ...props }, ref) => {
+    RadioGroupProps
+>(({
+       className,
+       ...props
+   }, ref) => {
     return (
         <RadioGroupPrimitive.Root
-            className={cn("grid gap-2", className)}
+            className={cls("grid gap-2", className)}
             {...props}
             ref={ref}
         />
@@ -17,21 +38,32 @@ const RadioGroup = React.forwardRef<
 })
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
 
+export interface RadioGroupItemProps {
+    id?: string;
+    value: string;
+    checked?: boolean;
+    required?: boolean;
+    className?: string;
+    disabled?: boolean;
+}
 const RadioGroupItem = React.forwardRef<
     React.ElementRef<typeof RadioGroupPrimitive.Item>,
-    React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
->(({ className, ...props }, ref) => {
+    RadioGroupItemProps
+>(({
+       className,
+       ...props
+   }, ref) => {
     return (
         <RadioGroupPrimitive.Item
             ref={ref}
-            className={cn(
+            className={cls(
                 "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
                 className
             )}
             {...props}
         >
             <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-                <div className="h-2.5 w-2.5 fill-current text-current bg-primary rounded-lg" />
+                <div className="h-2.5 w-2.5 fill-current text-current bg-primary rounded-lg"/>
             </RadioGroupPrimitive.Indicator>
         </RadioGroupPrimitive.Item>
     )

package/src/components/SearchBar.tsx

@@ -1,10 +1,10 @@
 import React, { useCallback, useState } from "react";
 
-import { defaultBorderMixin, focusedMixin } from "../styles";
+import { defaultBorderMixin } from "../styles";
 import { CircularProgress, IconButton } from "./index";
 import { ClearIcon, SearchIcon } from "../icons";
-import { cn } from "../util";
-import { useDebounceValue } from "../util/useDebounceValue";
+import { cls } from "../util";
+import { useDebounceValue } from "../hooks";
 
 interface SearchBarProps {
     onClick?: () => void;
@@ -60,14 +60,14 @@ export function SearchBar({
     return (
         <div
             onClick={onClick}
-            className={cn("relative",
+            className={cls("relative",
                 large ? "h-14" : "h-[42px]",
-                "bg-slate-50 dark:bg-gray-800 transition duration-150 ease-in-out border",
+                "bg-slate-50 dark:bg-gray-800 border",
                 defaultBorderMixin,
                 "rounded",
                 className)}>
             <div
-                className="absolute p-0 px-4 h-full absolute pointer-events-none flex items-center justify-center top-0">
+                className="absolute p-0 px-4 h-full pointer-events-none flex items-center justify-center top-0">
                 {loading ? <CircularProgress size={"small"}/> : <SearchIcon className={"text-slate-500 dark:text-gray-500"}/>}
             </div>
             <input
@@ -84,12 +84,11 @@ export function SearchBar({
                 autoFocus={autoFocus}
                 onFocus={() => setActive(true)}
                 onBlur={() => setActive(false)}
-                className={cn(
+                className={cls(
                     (disabled || loading) && "pointer-events-none",
                     "relative flex items-center rounded transition-all bg-transparent outline-none appearance-none border-none",
                     "pl-12 h-full text-current ",
                     expandable ? (active ? "w-[220px]" : "w-[180px]") : "",
-                    focusedMixin,
                     innerClassName
                 )}
             />