@firecms/ui 3.0.0-canary.210 → 3.0.0-canary.211

package/dist/components/MultiSelect.d.ts

@@ -1,33 +1,25 @@
 import * as React from "react";
 import { ChangeEvent } from "react";
-interface MultiSelectContextProps {
-    fieldValue?: string[];
-    onItemClick: (v: string) => void;
+export type MultiSelectValue = string | number | boolean;
+interface MultiSelectContextProps<T extends MultiSelectValue = string> {
+    fieldValue?: T[];
+    onItemClick: (v: T) => void;
 }
-export declare const MultiSelectContext: React.Context<MultiSelectContextProps>;
+export declare const MultiSelectContext: React.Context<MultiSelectContextProps<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.
-     */
+interface MultiSelectProps<T extends MultiSelectValue = string> {
     modalPopover?: boolean;
-    /**
-     * Additional class names to apply custom styles to the multi-select component.
-     * Optional, can be used to add custom styles.
-     */
     className?: string;
     open?: boolean;
     name?: string;
     id?: string;
     onOpenChange?: (open: boolean) => void;
-    value?: string[];
+    value?: T[];
     inputClassName?: string;
     onChange?: React.EventHandler<ChangeEvent<HTMLSelectElement>>;
-    onValueChange?: (updatedValue: string[]) => void;
+    onValueChange?: (updatedValue: T[]) => void;
     placeholder?: React.ReactNode;
     size?: "small" | "medium";
     useChips?: boolean;
@@ -43,13 +35,13 @@ interface MultiSelectProps {
     padding?: boolean;
     invisible?: boolean;
     children: React.ReactNode;
-    renderValues?: (values: string[]) => React.ReactNode;
+    renderValues?: (values: T[]) => React.ReactNode;
 }
-export declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps & React.RefAttributes<HTMLButtonElement>>;
-export interface MultiSelectItemProps {
-    value: string;
+export declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps<string> & React.RefAttributes<HTMLButtonElement>>;
+export interface MultiSelectItemProps<T extends MultiSelectValue = string> {
+    value: T;
     children?: React.ReactNode;
     className?: string;
 }
-export declare function MultiSelectItem({ children, value, className }: MultiSelectItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function MultiSelectItem<T extends MultiSelectValue = string>({ children, value, className }: MultiSelectItemProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Select.d.ts

@@ -1,17 +1,18 @@
 import React, { ChangeEvent } from "react";
-export type SelectProps = {
+export type SelectValue = string | number | boolean;
+export type SelectProps<T extends SelectValue = string> = {
     open?: boolean;
     name?: string;
     fullWidth?: boolean;
     id?: string;
     onOpenChange?: (open: boolean) => void;
-    value?: string;
+    value?: T;
     className?: string;
     inputClassName?: string;
     onChange?: React.EventHandler<ChangeEvent<HTMLSelectElement>>;
-    onValueChange?: (updatedValue: string) => void;
+    onValueChange?: (updatedValue: T) => void;
     placeholder?: React.ReactNode;
-    renderValue?: (value: string) => React.ReactNode;
+    renderValue?: (value: T) => React.ReactNode;
     size?: "small" | "medium" | "large";
     label?: React.ReactNode | string;
     disabled?: boolean;
@@ -23,14 +24,14 @@ export type SelectProps = {
     invisible?: boolean;
     children?: React.ReactNode;
 };
-export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLDivElement>>;
-export type SelectItemProps = {
-    value: string;
+export declare const Select: React.ForwardRefExoticComponent<SelectProps<string> & React.RefAttributes<HTMLDivElement>>;
+export type SelectItemProps<T extends SelectValue = string> = {
+    value: T;
     children?: React.ReactNode;
     disabled?: boolean;
     className?: string;
 };
-export declare function SelectItem({ value, children, disabled, className }: SelectItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function SelectItem<T extends SelectValue = string>({ value, children, disabled, className }: SelectItemProps<T>): import("react/jsx-runtime").JSX.Element;
 export type SelectGroupProps = {
     label: React.ReactNode;
     children: React.ReactNode;

package/dist/index.es.js

@@ -29713,8 +29713,8 @@ const MultiSelect = React.forwardRef((t0, ref) => {
   if ($[12] !== onValueChange || $[13] !== selectedValues) {
     onItemClick = function onItemClick2(newValue) {
       let newSelectedValues;
-      if (selectedValues.includes(newValue)) {
-        newSelectedValues = selectedValues.filter((v) => v !== newValue);
+      if (selectedValues.some((v_0) => String(v_0) === String(newValue))) {
+        newSelectedValues = selectedValues.filter((v) => String(v) !== String(newValue));
       } else {
         newSelectedValues = [...selectedValues, newValue];
       }
@@ -29756,7 +29756,7 @@ const MultiSelect = React.forwardRef((t0, ref) => {
   let t13;
   if ($[20] !== selectedValues || $[21] !== updateValues) {
     t13 = (value_0) => {
-      const newSelectedValues_1 = selectedValues.includes(value_0) ? selectedValues.filter((v_0) => v_0 !== value_0) : [...selectedValues, value_0];
+      const newSelectedValues_1 = selectedValues.some((v_2) => String(v_2) === String(value_0)) ? selectedValues.filter((v_1) => String(v_1) !== String(value_0)) : [...selectedValues, value_0];
       updateValues(newSelectedValues_1);
     };
     $[20] = selectedValues;
@@ -29857,7 +29857,7 @@ const MultiSelect = React.forwardRef((t0, ref) => {
         renderValues && renderValues(selectedValues),
         !renderValues && selectedValues.map((value_1) => {
           const childrenProps = Children.map(children, _temp2).filter(Boolean);
-          const option = childrenProps.find((o) => o.value === value_1);
+          const option = childrenProps.find((o) => String(o.value) === String(value_1));
           if (!useChips) {
             return option?.children;
           }
@@ -29867,7 +29867,7 @@ const MultiSelect = React.forwardRef((t0, ref) => {
               event_0.stopPropagation();
               toggleOption(value_1);
             } })
-          ] }, value_1);
+          ] }, String(value_1));
         })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
@@ -30053,7 +30053,7 @@ const MultiSelect = React.forwardRef((t0, ref) => {
 });
 MultiSelect.displayName = "MultiSelect";
 function MultiSelectItem(t0) {
-  const $ = c(18);
+  const $ = c(20);
   const {
     children,
     value,
@@ -30077,7 +30077,15 @@ function MultiSelectItem(t0) {
   }
   let t2;
   if ($[2] !== t1 || $[3] !== value) {
-    t2 = t1.includes(value);
+    let t32;
+    if ($[5] !== value) {
+      t32 = (v) => String(v) === String(value);
+      $[5] = value;
+      $[6] = t32;
+    } else {
+      t32 = $[6];
+    }
+    t2 = t1.some(t32);
     $[2] = t1;
     $[3] = value;
     $[4] = t2;
@@ -30086,47 +30094,47 @@ function MultiSelectItem(t0) {
   }
   const isSelected = t2;
   let t3;
-  if ($[5] !== onItemClick || $[6] !== value) {
+  if ($[7] !== onItemClick || $[8] !== value) {
     t3 = (_) => {
       onItemClick(value);
     };
-    $[5] = onItemClick;
-    $[6] = value;
-    $[7] = t3;
+    $[7] = onItemClick;
+    $[8] = value;
+    $[9] = t3;
   } else {
-    t3 = $[7];
+    t3 = $[9];
   }
   const t4 = isSelected ? "bg-surface-accent-200 dark:bg-surface-accent-950" : "";
   let t5;
-  if ($[8] !== className || $[9] !== t4) {
+  if ($[10] !== className || $[11] !== t4) {
     t5 = cls("flex flex-row items-center gap-1.5", t4, "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-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900", "cursor-pointer p-2 rounded aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900", className);
-    $[8] = className;
-    $[9] = t4;
-    $[10] = t5;
+    $[10] = className;
+    $[11] = t4;
+    $[12] = t5;
   } else {
-    t5 = $[10];
+    t5 = $[12];
   }
   let t6;
-  if ($[11] !== isSelected) {
+  if ($[13] !== isSelected) {
     t6 = /* @__PURE__ */ jsx(InnerCheckBox, { checked: isSelected });
-    $[11] = isSelected;
-    $[12] = t6;
+    $[13] = isSelected;
+    $[14] = t6;
   } else {
-    t6 = $[12];
+    t6 = $[14];
   }
   let t7;
-  if ($[13] !== children || $[14] !== t3 || $[15] !== t5 || $[16] !== t6) {
+  if ($[15] !== children || $[16] !== t3 || $[17] !== t5 || $[18] !== t6) {
     t7 = /* @__PURE__ */ jsxs(Command.Item, { onMouseDown: _temp3, onSelect: t3, className: t5, children: [
       t6,
       children
     ] });
-    $[13] = children;
-    $[14] = t3;
-    $[15] = t5;
-    $[16] = t6;
-    $[17] = t7;
+    $[15] = children;
+    $[16] = t3;
+    $[17] = t5;
+    $[18] = t6;
+    $[19] = t7;
   } else {
-    t7 = $[17];
+    t7 = $[19];
   }
   return t7;
 }
@@ -30488,19 +30496,24 @@ const Select = forwardRef(({
     setOpenInternal(open ?? false);
   }, [open]);
   const onValueChangeInternal = useCallback((newValue) => {
-    onValueChange?.(newValue);
+    let typedValue = newValue;
+    if (newValue === "true") typedValue = true;
+    else if (newValue === "false") typedValue = false;
+    else if (!isNaN(Number(newValue)) && newValue.trim() !== "") typedValue = Number(newValue);
+    onValueChange?.(typedValue);
     if (onChange) {
       const event = {
         target: {
           name,
-          value: newValue
+          value: typedValue
         }
       };
       onChange(event);
     }
-  }, [onChange, value, onValueChange]);
+  }, [onChange, onValueChange, name]);
   const hasValue = Array.isArray(value) ? value.length > 0 : value != null && value !== "" && value !== void 0;
-  return /* @__PURE__ */ jsxs(SelectPrimitive.Root, { name, value, open: openInternal, disabled, onValueChange: onValueChangeInternal, onOpenChange: (open_0) => {
+  const stringValue = value !== void 0 ? String(value) : void 0;
+  return /* @__PURE__ */ jsxs(SelectPrimitive.Root, { name, value: stringValue, open: openInternal, disabled, onValueChange: onValueChangeInternal, onOpenChange: (open_0) => {
     onOpenChange?.(open_0);
     setOpenInternal(open_0);
   }, ...props, children: [
@@ -30530,14 +30543,14 @@ const Select = forwardRef(({
         e.preventDefault();
         e.stopPropagation();
       }, placeholder, className: "w-full", children: [
-        hasValue && value && renderValue ? renderValue(value) : placeholder,
+        hasValue && value !== void 0 && renderValue ? renderValue(value) : placeholder,
         hasValue && !renderValue && (() => {
           const childrenProps = Children.map(children, (child) => {
             if (React__default.isValidElement(child)) {
               return child.props;
             }
           }).filter(Boolean);
-          const option = childrenProps.find((o) => o.value === value);
+          const option = childrenProps.find((o) => String(o.value) === String(value));
           return option?.children;
         })()
       ] }) }),
@@ -30564,6 +30577,7 @@ function SelectItem(t0) {
     disabled,
     className
   } = t0;
+  const stringValue = String(value);
   const t1 = disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer";
   let t2;
   if ($[0] !== className || $[1] !== t1) {
@@ -30590,15 +30604,15 @@ function SelectItem(t0) {
     t4 = $[5];
   }
   let t5;
-  if ($[6] !== disabled || $[7] !== t2 || $[8] !== t3 || $[9] !== value) {
-    t5 = /* @__PURE__ */ jsxs(SelectPrimitive.Item, { value, disabled, className: t2, children: [
+  if ($[6] !== disabled || $[7] !== stringValue || $[8] !== t2 || $[9] !== t3) {
+    t5 = /* @__PURE__ */ jsxs(SelectPrimitive.Item, { value: stringValue, disabled, className: t2, children: [
       t3,
       t4
-    ] }, value);
+    ] }, stringValue);
     $[6] = disabled;
-    $[7] = t2;
-    $[8] = t3;
-    $[9] = value;
+    $[7] = stringValue;
+    $[8] = t2;
+    $[9] = t3;
     $[10] = t5;
   } else {
     t5 = $[10];