@firecms/ui 3.1.0-canary.1df3b2c → 3.1.0-canary.75005e4

package/dist/components/MultiSelect.d.ts

@@ -31,7 +31,7 @@ interface MultiSelectProps<T extends MultiSelectValue = string> {
     multiple?: boolean;
     includeSelectAll?: boolean;
     includeClear?: boolean;
-    inputRef?: React.RefObject<HTMLButtonElement>;
+    inputRef?: React.RefObject<HTMLButtonElement | null>;
     padding?: boolean;
     invisible?: boolean;
     children: React.ReactNode;

package/dist/components/Select.d.ts

@@ -20,7 +20,7 @@ export type SelectProps<T extends SelectValue = string> = {
     error?: boolean;
     position?: "item-aligned" | "popper";
     endAdornment?: React.ReactNode;
-    inputRef?: React.RefObject<HTMLButtonElement>;
+    inputRef?: React.RefObject<HTMLButtonElement | null>;
     padding?: boolean;
     invisible?: boolean;
     children?: React.ReactNode;

package/dist/hooks/useOutsideAlerter.d.ts

@@ -2,4 +2,4 @@ import { RefObject } from "react";
 /**
  * Hook that alerts clicks outside the passed ref
  */
-export declare function useOutsideAlerter(ref: RefObject<HTMLElement>, onOutsideClick: () => void, active?: boolean): void;
+export declare function useOutsideAlerter(ref: RefObject<HTMLElement | null>, onOutsideClick: () => void, active?: boolean): void;

package/dist/index.es.js

@@ -32933,7 +32933,7 @@ const DateTimeField = ({
   const [focused, setFocused] = useState(false);
   const [internalValue, setInternalValue] = useState("");
   const [isTyping, setIsTyping] = useState(false);
-  const invalidValue = value !== void 0 && value !== null && !(value instanceof Date);
+  const invalidValue = value !== void 0 && value !== null && (!(value instanceof Date) || isNaN(value.getTime()));
   useInjectStyles("DateTimeField", inputStyles);
   const handleClear = (e) => {
     e.preventDefault();
@@ -32956,7 +32956,12 @@ const DateTimeField = ({
       // undefined = local timezone
     };
     const formatter = new Intl.DateTimeFormat("en-CA", options);
-    const parts = formatter.formatToParts(dateValue);
+    let parts;
+    try {
+      parts = formatter.formatToParts(dateValue);
+    } catch {
+      return "";
+    }
     const getPart = (type) => parts.find((p) => p.type === type)?.value ?? "";
     const year = getPart("year");
     const month = getPart("month");
@@ -34910,7 +34915,7 @@ const MultiSelect = React.forwardRef((t0, ref) => {
   let t12;
   let t13;
   if ($[9] !== children) {
-    t13 = children ? Children.map(children, _temp$2).filter(Boolean) : [];
+    t13 = children ? Children.map(children, _temp$2)?.filter(Boolean) ?? [] : [];
     $[9] = children;
     $[10] = t13;
   } else {
@@ -37010,7 +37015,7 @@ const TextField = forwardRef(({
 });
 TextField.displayName = "TextField";
 function Tabs(t0) {
-  const $ = c(10);
+  const $ = c(26);
   const {
     value,
     onValueChange,
@@ -37018,35 +37023,149 @@ function Tabs(t0) {
     innerClassName,
     children
   } = t0;
+  const scrollContainerRef = useRef(null);
+  const [showLeftScroll, setShowLeftScroll] = useState(false);
+  const [showRightScroll, setShowRightScroll] = useState(false);
+  const [isScrollable, setIsScrollable] = useState(false);
   let t1;
-  if ($[0] !== innerClassName) {
-    t1 = cls("border", defaultBorderMixin, "gap-2", "inline-flex h-10 items-center justify-center rounded-md bg-surface-50 p-1 text-surface-600 dark:bg-surface-900 dark:text-surface-400", innerClassName);
-    $[0] = innerClassName;
-    $[1] = t1;
+  if ($[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t1 = () => {
+      if (scrollContainerRef.current) {
+        const {
+          scrollLeft,
+          scrollWidth,
+          clientWidth
+        } = scrollContainerRef.current;
+        setShowLeftScroll(scrollLeft > 0);
+        setShowRightScroll(Math.ceil(scrollLeft + clientWidth) < scrollWidth);
+        setIsScrollable(scrollWidth > clientWidth);
+      }
+    };
+    $[0] = t1;
   } else {
-    t1 = $[1];
+    t1 = $[0];
   }
+  const checkScroll = t1;
   let t2;
-  if ($[2] !== children || $[3] !== t1) {
-    t2 = /* @__PURE__ */ jsx(TabsPrimitive.List, { className: t1, children });
-    $[2] = children;
-    $[3] = t1;
-    $[4] = t2;
+  if ($[1] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t2 = () => {
+      checkScroll();
+      window.addEventListener("resize", checkScroll);
+      let observer;
+      if (scrollContainerRef.current) {
+        observer = new ResizeObserver(checkScroll);
+        observer.observe(scrollContainerRef.current);
+        if (scrollContainerRef.current.firstElementChild) {
+          observer.observe(scrollContainerRef.current.firstElementChild);
+        }
+      }
+      return () => {
+        window.removeEventListener("resize", checkScroll);
+        observer?.disconnect();
+      };
+    };
+    $[1] = t2;
   } else {
-    t2 = $[4];
+    t2 = $[1];
   }
   let t3;
-  if ($[5] !== className || $[6] !== onValueChange || $[7] !== t2 || $[8] !== value) {
-    t3 = /* @__PURE__ */ jsx(TabsPrimitive.Root, { value, onValueChange, className, children: t2 });
+  if ($[2] !== children) {
+    t3 = [children];
+    $[2] = children;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  useEffect(t2, t3);
+  let t4;
+  if ($[4] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t4 = (direction) => {
+      if (scrollContainerRef.current) {
+        const container = scrollContainerRef.current;
+        const scrollAmount = Math.max(container.clientWidth / 2, 200);
+        const targetScroll = container.scrollLeft + (direction === "left" ? -scrollAmount : scrollAmount);
+        container.scrollTo({
+          left: targetScroll,
+          behavior: "smooth"
+        });
+      }
+    };
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  const scroll = t4;
+  let t5;
+  if ($[5] !== className) {
+    t5 = cls("flex flex-row items-center min-w-0", className);
     $[5] = className;
-    $[6] = onValueChange;
-    $[7] = t2;
-    $[8] = value;
-    $[9] = t3;
+    $[6] = t5;
   } else {
-    t3 = $[9];
+    t5 = $[6];
   }
-  return t3;
+  let t6;
+  if ($[7] !== isScrollable || $[8] !== showLeftScroll) {
+    t6 = isScrollable && /* @__PURE__ */ jsx("button", { type: "button", disabled: !showLeftScroll, onClick: () => scroll("left"), className: cls("flex-shrink-0 z-10 flex items-center justify-center rounded-md px-0.5 py-1.5 transition-all h-10 w-6", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-surface-400", "disabled:pointer-events-none disabled:opacity-0", "text-surface-600 dark:text-surface-400 hover:bg-surface-200 dark:hover:bg-surface-800", "mr-1 bg-surface-50 dark:bg-surface-900 border", defaultBorderMixin), children: /* @__PURE__ */ jsx(ChevronLeftIcon, { size: "small" }) });
+    $[7] = isScrollable;
+    $[8] = showLeftScroll;
+    $[9] = t6;
+  } else {
+    t6 = $[9];
+  }
+  let t7;
+  if ($[10] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t7 = {
+      scrollbarWidth: "none",
+      msOverflowStyle: "none"
+    };
+    $[10] = t7;
+  } else {
+    t7 = $[10];
+  }
+  let t8;
+  if ($[11] !== innerClassName) {
+    t8 = cls("border", defaultBorderMixin, "gap-2", "inline-flex h-10 items-center justify-center rounded-md bg-surface-50 p-1 text-surface-600 dark:bg-surface-900 dark:text-surface-400", innerClassName);
+    $[11] = innerClassName;
+    $[12] = t8;
+  } else {
+    t8 = $[12];
+  }
+  let t9;
+  if ($[13] !== children || $[14] !== t8) {
+    t9 = /* @__PURE__ */ jsx("div", { ref: scrollContainerRef, className: "flex-1 overflow-x-auto no-scrollbar min-w-0", onScroll: checkScroll, style: t7, children: /* @__PURE__ */ jsx(TabsPrimitive.List, { className: t8, children }) });
+    $[13] = children;
+    $[14] = t8;
+    $[15] = t9;
+  } else {
+    t9 = $[15];
+  }
+  let t10;
+  if ($[16] !== isScrollable || $[17] !== showRightScroll) {
+    t10 = isScrollable && /* @__PURE__ */ jsx("button", { type: "button", disabled: !showRightScroll, onClick: () => scroll("right"), className: cls("flex-shrink-0 z-10 flex items-center justify-center rounded-md px-0.5 py-1.5 transition-all h-10 w-6", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-surface-400", "disabled:pointer-events-none disabled:opacity-0", "text-surface-600 dark:text-surface-400 hover:bg-surface-200 dark:hover:bg-surface-800", "ml-1 bg-surface-50 dark:bg-surface-900 border", defaultBorderMixin), children: /* @__PURE__ */ jsx(ChevronRightIcon, { size: "small" }) });
+    $[16] = isScrollable;
+    $[17] = showRightScroll;
+    $[18] = t10;
+  } else {
+    t10 = $[18];
+  }
+  let t11;
+  if ($[19] !== onValueChange || $[20] !== t10 || $[21] !== t5 || $[22] !== t6 || $[23] !== t9 || $[24] !== value) {
+    t11 = /* @__PURE__ */ jsxs(TabsPrimitive.Root, { value, onValueChange, className: t5, children: [
+      t6,
+      t9,
+      t10
+    ] });
+    $[19] = onValueChange;
+    $[20] = t10;
+    $[21] = t5;
+    $[22] = t6;
+    $[23] = t9;
+    $[24] = value;
+    $[25] = t11;
+  } else {
+    t11 = $[25];
+  }
+  return t11;
 }
 function Tab(t0) {
   const $ = c(8);
@@ -37520,7 +37639,7 @@ const Badge = React__default.forwardRef((t0, ref) => {
 Badge.displayName = "Badge";
 function DebouncedTextField(props) {
   const $ = c(13);
-  const previousEventRef = React__default.useRef();
+  const previousEventRef = React__default.useRef(void 0);
   const [internalValue, setInternalValue] = React__default.useState(props.value);
   const deferredValue = useDeferredValue(internalValue);
   let t0;