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

package/src/components/Select.tsx

@@ -16,75 +16,59 @@ export type SelectProps = {
     name?: string,
     id?: string,
     onOpenChange?: (open: boolean) => void,
-    value?: string | string[],
+    value?: string,
     className?: string,
     inputClassName?: string,
     onChange?: React.EventHandler<ChangeEvent<HTMLSelectElement>>,
     onValueChange?: (updatedValue: string) => void,
-    onMultiValueChange?: (updatedValue: string[]) => void,
     placeholder?: React.ReactNode,
-    renderValue?: (value: string, index: number) => React.ReactNode,
-    renderValues?: (values: string[]) => React.ReactNode,
+    renderValue?: (value: string) => React.ReactNode,
     size?: "small" | "medium",
     label?: React.ReactNode | string,
     disabled?: boolean,
     error?: boolean,
     position?: "item-aligned" | "popper",
     endAdornment?: React.ReactNode,
-    multiple?: boolean,
     inputRef?: React.RefObject<HTMLButtonElement>,
     padding?: boolean,
-    includeFocusOutline?: boolean,
     invisible?: boolean,
-    children?: React.ReactNode
+    children?: React.ReactNode;
 };
 
 export const Select = forwardRef<HTMLDivElement, SelectProps>(({
-                                                                      inputRef,
-                                                                      open,
-                                                                      name,
-                                                                      id,
-                                                                      onOpenChange,
-                                                                      value,
-                                                                      onChange,
-                                                                      onValueChange,
-                                                                      onMultiValueChange,
-                                                                      className,
-                                                                      inputClassName,
-                                                                      placeholder,
-                                                                      renderValue,
-                                                                      renderValues,
-                                                                      label,
-                                                                      size = "medium",
-                                                                      includeFocusOutline = true,
-                                                                      error,
-                                                                      disabled,
-                                                                      padding = true,
-                                                                      position = "item-aligned",
-                                                                      endAdornment,
-                                                                      multiple,
-                                                                      invisible,
-                                                                      children,
-                                                                      ...props
-                                                                  }, ref) => {
+                                                                   inputRef,
+                                                                   open,
+                                                                   name,
+                                                                   id,
+                                                                   onOpenChange,
+                                                                   value,
+                                                                   onChange,
+                                                                   onValueChange,
+                                                                   className,
+                                                                   inputClassName,
+                                                                   placeholder,
+                                                                   renderValue,
+                                                                   label,
+                                                                   size = "medium",
+                                                                   error,
+                                                                   disabled,
+                                                                   padding = true,
+                                                                   position = "item-aligned",
+                                                                   endAdornment,
+                                                                   invisible,
+                                                                   children,
+                                                                   ...props
+                                                               }, ref) => {
 
-    const [openInternal, setOpenInternal] = useState(false);
+    const [openInternal, setOpenInternal] = useState(open ?? false);
 
     useEffect(() => {
         setOpenInternal(open ?? false);
     }, [open]);
 
     const onValueChangeInternal = useCallback((newValue: string) => {
-        if (multiple) {
-            if (Array.isArray(value) && value.includes(newValue)) {
-                onMultiValueChange?.(value.filter(v => v !== newValue));
-            } else {
-                onMultiValueChange?.([...(value as string[] ?? []), newValue]);
-            }
-        } else {
-            onValueChange?.(newValue);
-        }
-        if (!multiple && onChange) {
+        onValueChange?.(newValue);
+        if (onChange) {
             const event = {
                 target: {
                     name,
@@ -93,15 +77,14 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
             } as ChangeEvent<HTMLSelectElement>;
             onChange(event);
         }
-    }, [multiple, onChange, value, onMultiValueChange, onValueChange]);
+    }, [onChange, value, onValueChange]);
 
     const hasValue = Array.isArray(value) ? value.length > 0 : value != null;
 
     return (
         <SelectPrimitive.Root
             name={name}
-            value={Array.isArray(value) ? undefined : value}
-            defaultOpen={open}
+            value={value}
             open={openInternal}
             disabled={disabled}
             onValueChange={onValueChangeInternal}
@@ -136,6 +119,11 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
                         "relative flex items-center",
                         inputClassName
                     )}
+
+                    onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                    }}
                 >
                     <div
                         ref={ref}
@@ -145,14 +133,16 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
                             size === "small" ? "h-[42px]" : "h-[64px]"
                         )}
                     >
-                        <SelectPrimitive.Value placeholder={placeholder} className={"w-full"}>
-                            {renderValue && (hasValue && Array.isArray(value) ? value.map((v, i) => (
-                                <div key={v} className={"flex items-center gap-1 max-w-full"}>
-                                    {renderValue ? renderValue(v, i) : v}
-                                </div>
-                            )) : (typeof value === "string" ? (renderValue ? renderValue(value, 0) : value) : placeholder))}
-                            {renderValues && (!hasValue || Array.isArray(value)) ? renderValues(value as string[] ?? []) : null}
-                            {!renderValue && !renderValues && hasValue}
+                        <SelectPrimitive.Value
+                            onClick={(e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                            }}
+                            placeholder={placeholder}
+                            className={"w-full"}>
+                            {!hasValue && placeholder}
+                            {hasValue && value && renderValue ? renderValue(value) : placeholder}
+                            {hasValue && !renderValue && value}
                         </SelectPrimitive.Value>
                     </div>
                     <SelectPrimitive.Icon className={cls("px-2 h-full flex items-center")}>
@@ -162,7 +152,10 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
                 {endAdornment && (
                     <div
                         className={cls("absolute h-full flex items-center", size === "small" ? "right-10" : "right-14")}
-                        onClick={(e) => e.stopPropagation()}>
+                        onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                        }}>
                         {endAdornment}
                     </div>
                 )}

package/src/components/Separator.tsx

@@ -1,20 +1,26 @@
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { cls } from "../util";
 
-export function Separator({ orientation, decorative }: {
+export function Separator({
+                              orientation,
+                              decorative,
+                              className
+                          }: {
     orientation: "horizontal" | "vertical",
-    decorative?: boolean
+    decorative?: boolean,
+    className?: string
 }) {
     if (orientation === "horizontal")
         return (
             <SeparatorPrimitive.Root
                 decorative={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]"/>
+                className={cls("dark:bg-opacity-80 dark:bg-gray-800 bg-gray-100 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px my-4", className)}/>
         );
     else
         return (
             <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]"
+                className={cls("dark:bg-opacity-80 dark:bg-gray-800 bg-gray-100 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px mx-4", className)}
                 decorative={decorative}
                 orientation="vertical"
             />

package/src/components/_MultiSelect.tsx

@@ -0,0 +1,222 @@
+// import * as React from "react";
+// import { useEffect } from "react";
+// import * as Dialog from "@radix-ui/react-dialog";
+//
+// import { Command as CommandPrimitive } from "cmdk";
+//
+// import { ExpandMoreIcon } from "../icons";
+// import { fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundMixin, focusedDisabled } from "../styles";
+// import { cls } from "../util";
+// import { SelectInputLabel } from "./common/SelectInputLabel";
+// import { useOutsideAlerter } from "../hooks";
+//
+// 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,
+//     placeholder?: React.ReactNode,
+//     renderValue?: (values: string, index:number) => React.ReactNode,
+//     renderValues?: (values: string[]) => React.ReactNode,
+//     size?: "small" | "medium",
+//     label?: React.ReactNode,
+//     disabled?: boolean,
+//     error?: boolean,
+//     position?: "item-aligned" | "popper",
+//     inputRef?: React.RefObject<HTMLButtonElement>,
+//     children?: React.ReactNode,
+// };
+//
+// interface MultiSelectContextProps {
+//     fieldValue?: string[];
+//     setInputValue: (v: string) => void;
+//     onValueChangeInternal: (v: string) => void;
+// }
+//
+// export const MultiSelectContext = React.createContext<MultiSelectContextProps>({} as any);
+//
+// export function MultiSelect({
+//                                 value,
+//                                 open,
+//                                 onMultiValueChange,
+//                                 size = "medium",
+//                                 label,
+//                                 disabled,
+//                                 renderValue,
+//                                 renderValues,
+//                                 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]);
+//         }
+//     }, [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);
+//                 }
+//             }
+//             // This is not a default behaviour of the <input /> field
+//             if (e.key === "Escape") {
+//                 input.blur();
+//                 setOpenInternal(false);
+//                 e.stopPropagation();
+//             }
+//         }
+//     }, [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={cls("relative overflow-visible bg-transparent", containerClassName)}>
+//                 <div
+//                     ref={containerRef}
+//                     className={cls(
+//                         "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" : "",
+//                         className)}
+//                 >
+//                     <div className={cls("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={cls("ml-2 bg-transparent outline-none flex-1 h-full w-full ", focusedDisabled)}
+//                         />
+//                     </div>
+//                     <div className={"px-2 h-full flex items-center"}>
+//                         <ExpandMoreIcon size={"small"}
+//                                         className={cls("transition ", openInternal ? "rotate-180" : "")}/>
+//                     </div>
+//
+//                 </div>
+//
+//                 <Dialog.Root open={openInternal}
+//                              modal={true}
+//                              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,
+//                                     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"
+//                                 >
+//
+//                                     {children}
+//                                 </CommandPrimitive.Group>
+//
+//                             </div>
+//                         </MultiSelectContext.Provider>
+//                     </Dialog.Portal>
+//                 </Dialog.Root>
+//             </CommandPrimitive>
+//
+//         </>
+//     )
+// }
+//
+// export interface MultiSelectItemProps {
+//     value: string;
+//     children?: React.ReactNode,
+//     className?: string;
+// }
+//
+// 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;
+//
+//     return <CommandPrimitive.Item
+//         onMouseDown={(e) => {
+//             e.preventDefault();
+//             e.stopPropagation();
+//         }}
+//         onSelect={(_) => {
+//             setInputValue("");
+//             onValueChangeInternal(value);
+//         }}
+//         className={cls(
+//             (fieldValue ?? []).includes(value) ? "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",
+//             "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
+//         )}
+//     >
+//         {children}
+//     </CommandPrimitive.Item>;
+// }

package/src/components/index.tsx

@@ -26,7 +26,6 @@ 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/tailwind.config.js

@@ -58,9 +58,9 @@ export default {
                     300: "#B7B7BF",
                     400: "#A0A0A9",
                     500: "#87878F",
-                    600: "#6C6C75",
-                    700: "#505058",
-                    800: "#35353A",
+                    600: "#6B6B74",
+                    700: "#454552",
+                    800: "#292934",
                     900: "#18181C",
                     950: "#101013"
                 }

package/dist/components/NewMultiSelect.d.ts

@@ -1,60 +0,0 @@
-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 {};