@firecms/ui 3.0.0-canary.13 → 3.0.0-canary.130

package/src/components/MultiSelect.tsx

@@ -1,192 +1,331 @@
+import * as PopoverPrimitive from "@radix-ui/react-popover";
 import * as React from "react";
-import { useEffect } from "react";
-import * as Dialog from "@radix-ui/react-dialog";
-
+import { ChangeEvent, Children, useEffect } from "react";
 import { Command as CommandPrimitive } from "cmdk";
-
-import { ExpandMoreIcon } from "../icons";
-import { fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundMixin, focusedMixin } from "../styles";
-import { cn, useOutsideAlerter } from "../util";
+import { cls } from "../util";
+import { CloseIcon, ExpandMoreIcon, Icon } from "../icons";
+import { Separator } from "./Separator";
+import { Chip } from "./Chip";
 import { SelectInputLabel } from "./common/SelectInputLabel";
+import {
+    defaultBorderMixin,
+    fieldBackgroundDisabledMixin,
+    fieldBackgroundHoverMixin,
+    fieldBackgroundInvisibleMixin,
+    fieldBackgroundMixin,
+    focusedDisabled
+} from "../styles";
+import { useInjectStyles } from "../hooks";
+
+interface MultiSelectContextProps {
+    fieldValue?: string[];
+    onItemClick: (v: string) => void;
+}
+
+export const MultiSelectContext = React.createContext<MultiSelectContextProps>({} as any);
+
+/**
+ * Props for MultiSelect component
+ */
+interface MultiSelectProps {
+
+    /**
+     * 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;
+
+    /**
+     * Additional class names to apply custom styles to the multi-select component.
+     * Optional, can be used to add custom styles.
+     */
+    className?: string;
 
-export type MultiSelectProps = {
     open?: boolean,
     name?: string,
     id?: string,
     onOpenChange?: (open: boolean) => void,
     value?: string[],
-    containerClassName?: string,
-    className?: string,
     inputClassName?: string,
-    onMultiValueChange?: (updatedValue: string[]) => void,
+    onChange?: React.EventHandler<ChangeEvent<HTMLSelectElement>>,
+    onValueChange?: (updatedValue: string[]) => void,
     placeholder?: React.ReactNode,
-    renderValue?: (values: string, index:number) => React.ReactNode,
-    renderValues?: (values: string[]) => React.ReactNode,
     size?: "small" | "medium",
-    label?: React.ReactNode,
+    useChips?: boolean,
+    label?: React.ReactNode | string,
     disabled?: boolean,
     error?: boolean,
     position?: "item-aligned" | "popper",
     endAdornment?: React.ReactNode,
+    multiple?: boolean,
+    includeClear?: boolean,
     inputRef?: React.RefObject<HTMLButtonElement>,
     padding?: boolean,
-    includeFocusOutline?: boolean,
-    children?: React.ReactNode,
-};
-
-interface MultiSelectContextProps {
-    fieldValue?: string[];
-    setInputValue: (v: string) => void;
-    onValueChangeInternal: (v: string) => void;
+    invisible?: boolean,
+    children: React.ReactNode;
+    renderValues?: (values: string[]) => React.ReactNode;
 }
 
-export const MultiSelectContext = React.createContext<MultiSelectContextProps>({} as any);
+export const MultiSelect = React.forwardRef<
+    HTMLButtonElement,
+    MultiSelectProps
+>(
+    (
+        {
+            value,
+            size,
+            label,
+            error,
+            onValueChange,
+            invisible,
+            disabled,
+            placeholder,
+            modalPopover = false,
+            includeClear = true,
+            useChips = true,
+            className,
+            children,
+            renderValues,
+            open,
+            onOpenChange,
+        },
+        ref
+    ) => {
+        const [isPopoverOpen, setIsPopoverOpen] = React.useState(open ?? false);
+        const [selectedValues, setSelectedValues] = React.useState<string[]>(value ?? []);
 
-export function MultiSelect({
-                                value,
-                                open,
-                                onMultiValueChange,
-                                size = "medium",
-                                label,
-                                disabled,
-                                renderValue,
-                                renderValues,
-                                includeFocusOutline = true,
-                                containerClassName,
-                                className,
-                                children,
-                                error
-                            }: MultiSelectProps) {
-
-    const containerRef = React.useRef<HTMLInputElement>(null);
-    const inputRef = React.useRef<HTMLInputElement>(null);
-    const listRef = React.useRef<HTMLDivElement>(null);
-    useOutsideAlerter(listRef, () => setOpenInternal(false));
-
-    const [openInternal, setOpenInternal] = React.useState(false);
-    useEffect(() => {
-        setOpenInternal(open ?? false);
-    }, [open]);
-
-    const onValueChangeInternal = React.useCallback((newValue: string) => {
-        if (Array.isArray(value) && value.includes(newValue)) {
-            onMultiValueChange?.(value.filter(v => v !== newValue));
-        } else {
-            onMultiValueChange?.([...(value ?? []), newValue]);
+        const onPopoverOpenChange = (open: boolean) => {
+            setIsPopoverOpen(open);
+            onOpenChange?.(open);
         }
-    }, [value, onMultiValueChange]);
-
-    const [inputValue, setInputValue] = React.useState("");
-    const [boundingRect, setBoundingRect] = React.useState<DOMRect | null>(null);
-
-    const handleKeyDown = React.useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {
-        const input = inputRef.current
-        if (input) {
-            if (e.key === "Delete" || e.key === "Backspace") {
-                if (input.value === "") {
-                    const newSelected = [...(value ?? [])];
-                    newSelected.pop();
-                    onMultiValueChange?.(newSelected);
+
+        useEffect(() => {
+            setIsPopoverOpen(open ?? false);
+        }, [open]);
+
+        const allValues = children
+            ?
+            // @ts-ignore
+            Children.map(children, (child) => {
+                if (React.isValidElement(child)) {
+                    return child.props.value;
                 }
+                return null;
+            }).filter(Boolean) as string[]
+            : [];
+
+        React.useEffect(() => {
+            setSelectedValues(value ?? []);
+        }, [value]);
+
+        function onItemClick(newValue: string) {
+            let newSelectedValues: string[];
+            if (selectedValues.includes(newValue)) {
+                newSelectedValues = selectedValues.filter((v) => v !== newValue);
+            } else {
+                newSelectedValues = [...selectedValues, newValue];
             }
-            // This is not a default behaviour of the <input /> field
-            if (e.key === "Escape") {
-                input.blur();
-                setOpenInternal(false);
-                e.stopPropagation();
-            }
+            updateValues(newSelectedValues);
         }
-    }, [onMultiValueChange, value]);
-
-    const openDialog = React.useCallback(() => {
-        setBoundingRect(containerRef.current?.getBoundingClientRect() ?? null);
-        setOpenInternal(true);
-    }, []);
-
-    const usedBoundingRect = boundingRect ?? containerRef.current?.getBoundingClientRect();
-    const maxHeight = window.innerHeight - (usedBoundingRect?.top ?? 0) - (usedBoundingRect?.height ?? 0) - 16;
-
-    return (<>
-
-            {typeof label === "string" ? <SelectInputLabel error={error}>{label}</SelectInputLabel> : label}
-
-            <CommandPrimitive onKeyDown={handleKeyDown}
-                              onClick={() => {
-                                  inputRef.current?.focus();
-                                  openDialog()
-                              }}
-                              className={cn("relative overflow-visible bg-transparent", containerClassName)}>
-                <div
-                    ref={containerRef}
-                    className={cn(
-                        "flex flex-row",
-                        size === "small" ? "min-h-[42px]" : "min-h-[64px]",
-                        "select-none rounded-md text-sm",
-                        fieldBackgroundMixin,
-                        disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
-                        "relative flex items-center",
-                        "p-4",
-                        error ? "text-red-500 dark:text-red-600" : "focus:text-text-primary dark:focus:text-text-primary-dark",
-                        error ? "border border-red-500 dark:border-red-600" : "",
-                        includeFocusOutline ? focusedMixin : "",
-                        className)}
+
+        function updateValues(values: string[]) {
+            setSelectedValues(values);
+            onValueChange?.(values);
+        }
+
+        const handleInputKeyDown = (
+            event: React.KeyboardEvent<HTMLInputElement>
+        ) => {
+            if (event.key === "Enter") {
+                onPopoverOpenChange(true);
+            } else if (event.key === "Backspace" && !event.currentTarget.value) {
+                const newSelectedValues = [...selectedValues];
+                newSelectedValues.pop();
+                updateValues(newSelectedValues);
+            }
+        };
+
+        const toggleOption = (value: string) => {
+            const newSelectedValues = selectedValues.includes(value)
+                ? selectedValues.filter((v) => v !== value)
+                : [...selectedValues, value];
+            updateValues(newSelectedValues);
+        };
+
+        const handleClear = () => {
+            updateValues([]);
+        };
+
+        const handleTogglePopover = () => {
+            onPopoverOpenChange(!isPopoverOpen);
+        };
+
+        const toggleAll = () => {
+            if (selectedValues.length === allValues.length) {
+                handleClear();
+            } else {
+                updateValues(allValues);
+            }
+        };
+
+        useInjectStyles("MultiSelect", `
+[cmdk-group] {
+  max-height: 45vh;
+  overflow-y: auto;
+  // width: 400px;
+} `)
+
+        return (
+            <MultiSelectContext.Provider
+                value={{
+                    fieldValue: selectedValues,
+                    onItemClick
+                }}>
+
+                {typeof label === "string" ? <SelectInputLabel error={error}>{label}</SelectInputLabel> : label}
+
+                <PopoverPrimitive.Root
+                    open={isPopoverOpen}
+                    onOpenChange={onPopoverOpenChange}
+                    modal={modalPopover}
                 >
-                    <div className={cn("flex-grow flex gap-1.5 flex-wrap items-center")}>
-                        {renderValue && (value ?? []).map((v, i) => renderValue(v, i))}
-                        {renderValues && renderValues(value ?? [])}
-                        <CommandPrimitive.Input
-                            ref={inputRef}
-                            value={inputValue}
-                            onValueChange={setInputValue}
-                            // onBlur={() => setOpenInternal(false)}
-                            onFocus={openDialog}
-                            className="ml-2 bg-transparent outline-none flex-1 h-full w-full "
-                        />
-                    </div>
-                    <div className={"px-2 h-full flex items-center"}>
-                        <ExpandMoreIcon size={"small"}
-                                        className={cn("transition ", openInternal ? "rotate-180" : "")}/>
-                    </div>
-
-                </div>
-
-                <Dialog.Root open={openInternal} onOpenChange={setOpenInternal}>
-                    <Dialog.Portal>
-                        <MultiSelectContext.Provider
-                            value={{
-                                fieldValue: value,
-                                setInputValue,
-                                onValueChangeInternal
-                            }}>
-                            <div
-                                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: maxHeight,
-
-                                }}>
-
-                                <CommandPrimitive.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"
-                                >
+                    <PopoverPrimitive.Trigger asChild>
+                        <button
+                            ref={ref}
+                            onClick={handleTogglePopover}
+                            className={cls(
+                                size === "small" ? "min-h-[42px]" : "min-h-[64px]",
+                                "py-2",
+                                "px-4",
+                                "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 gap-1.5 text-start">
+                                        {renderValues && renderValues(selectedValues)}
+                                        {!renderValues && selectedValues.map((value) => {
+
+                                            // @ts-ignore
+                                            const childrenProps: MultiSelectItemProps[] = Children.map(children, (child) => {
+                                                if (React.isValidElement(child)) {
+                                                    return child.props;
+                                                }
+                                            }).filter(Boolean);
 
+                                            const option = childrenProps.find((o) => o.value === value);
+                                            if (!useChips) {
+                                                return option?.children;
+                                            }
+                                            return (
+                                                <Chip
+                                                    size={"small"}
+                                                    key={value}
+                                                    className={cls("flex flex-row items-center p-1")}
+                                                >
+                                                    {option?.children}
+                                                    <CloseIcon
+                                                        size={"smallest"}
+                                                        onClick={(event) => {
+                                                            event.stopPropagation();
+                                                            toggleOption(value);
+                                                        }}
+                                                    />
+                                                </Chip>
+                                            );
+                                        })}
+                                    </div>
+                                    <div className="flex items-center justify-between">
+                                        {includeClear && <CloseIcon
+                                            className={"ml-4"}
+                                            size={"small"}
+                                            onClick={(event) => {
+                                                event.stopPropagation();
+                                                handleClear();
+                                            }}
+                                        />}
+                                        <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">
+                                      {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 rounded-lg w-[400px]", defaultBorderMixin)}
+                        align="start"
+                        sideOffset={8}
+                        onEscapeKeyDown={() => onPopoverOpenChange(false)}
+                    >
+                        <CommandPrimitive>
+                            <div className={"flex flex-row items-center"}>
+                                <CommandPrimitive.Input
+                                    className={cls(focusedDisabled, "bg-transparent outline-none flex-1 h-full w-full m-4 flex-grow")}
+                                    placeholder="Search..."
+                                    onKeyDown={handleInputKeyDown}
+                                />
+                                {selectedValues.length > 0 && (
+                                    <div
+                                        onClick={handleClear}
+                                        className="text-sm justify-center cursor-pointer py-3 px-4 text-text-secondary dark:text-text-secondary-dark">
+                                        Clear
+                                    </div>
+                                )}
+                            </div>
+                            <Separator orientation={"horizontal"} className={"my-0"}/>
+                            <CommandPrimitive.List>
+                                <CommandPrimitive.Empty className={"px-4 py-2"}>
+                                    No results found.
+                                </CommandPrimitive.Empty>
+                                <CommandPrimitive.Group>
+                                    <CommandPrimitive.Item
+                                        key="all"
+                                        onSelect={toggleAll}
+                                        className={
+                                            cls(
+                                                "flex flex-row items-center gap-1.5",
+                                                "cursor-pointer",
+                                                "m-1",
+                                                "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-2 rounded aria-[selected=true]:bg-slate-100 aria-[selected=true]:dark:bg-slate-900"
+                                            )
+                                        }
+                                    >
+                                        <InnerCheckBox checked={selectedValues.length === allValues.length}/>
+                                        <span className={"text-sm text-text-secondary dark:text-text-secondary-dark"}>(Select All)</span>
+                                    </CommandPrimitive.Item>
                                     {children}
                                 </CommandPrimitive.Group>
 
-                            </div>
-                        </MultiSelectContext.Provider>
-                    </Dialog.Portal>
-                </Dialog.Root>
-            </CommandPrimitive>
+                            </CommandPrimitive.List>
+                        </CommandPrimitive>
+                    </PopoverPrimitive.Content>
+                </PopoverPrimitive.Root>
+            </MultiSelectContext.Provider>
+        );
+    }
+);
 
-        </>
-    )
-}
+MultiSelect.displayName = "MultiSelect";
 
 export interface MultiSelectItemProps {
     value: string;
@@ -194,32 +333,63 @@ export interface MultiSelectItemProps {
     className?: string;
 }
 
-export function MultiSelectItem({ children, value, className }: MultiSelectItemProps) {
+export function MultiSelectItem({
+                                    children,
+                                    value,
+                                    className
+                                }: MultiSelectItemProps) {
 
     const context = React.useContext(MultiSelectContext);
     if (!context) throw new Error("MultiSelectItem must be used inside a MultiSelect");
-    const { fieldValue, setInputValue, onValueChangeInternal } = context;
+    const {
+        fieldValue,
+        onItemClick
+    } = context;
 
+    const isSelected = (fieldValue ?? []).includes(value);
     return <CommandPrimitive.Item
+        // value={value}
         onMouseDown={(e) => {
             e.preventDefault();
             e.stopPropagation();
         }}
         onSelect={(_) => {
-            setInputValue("");
-            onValueChangeInternal(value);
+            onItemClick(value);
         }}
-        className={cn(
-            (fieldValue ?? []).includes(value) ? "bg-slate-200 dark:bg-slate-950" : "",
+        className={cls(
+            "flex flex-row items-center gap-1.5",
+            isSelected ? "bg-slate-200 dark:bg-slate-950" : "",
             "cursor-pointer",
             "m-1",
             "ring-offset-transparent",
-            "p-2 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",
+            "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-2 rounded aria-[selected=true]:bg-slate-100 aria-[selected=true]:dark:bg-slate-900",
             className
         )}
     >
+        <InnerCheckBox checked={isSelected}/>
         {children}
     </CommandPrimitive.Item>;
+
 }
+
+function InnerCheckBox({ checked }: { checked: boolean }) {
+    return <div className={cls(
+        "p-2",
+        "w-8 h-8",
+        "inline-flex items-center justify-center text-sm font-medium focus:outline-none transition-colors ease-in-out duration-150",
+    )}>
+        <div
+            className={cls(
+                "border-2 relative transition-colors ease-in-out duration-150",
+                "w-4 h-4 rounded flex items-center justify-center",
+                (checked ? "bg-primary" : "bg-white dark:bg-slate-900"),
+                (checked) ? "text-slate-100 dark:text-slate-900" : "",
+                (checked ? "border-transparent" : "border-slate-800 dark:border-slate-200")
+            )}>
+            {checked && <Icon iconKey={"check"} size={16} className={"absolute"}/>}
+        </div>
+    </div>
+}
+

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 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"/>