@firecms/ui 3.1.0-canary.1df3b2c → 3.1.0-canary.24c8270

package/dist/index.umd.js

@@ -34920,7 +34920,7 @@
     let t12;
     let t13;
     if ($[9] !== children) {
-      t13 = children ? React.Children.map(children, _temp$2).filter(Boolean) : [];
+      t13 = children ? React.Children.map(children, _temp$2)?.filter(Boolean) ?? [] : [];
       $[9] = children;
       $[10] = t13;
     } else {
@@ -37020,7 +37020,7 @@
   });
   TextField.displayName = "TextField";
   function Tabs(t0) {
-    const $ = reactCompilerRuntime.c(10);
+    const $ = reactCompilerRuntime.c(26);
     const {
       value,
       onValueChange,
@@ -37028,35 +37028,149 @@
       innerClassName,
       children
     } = t0;
+    const scrollContainerRef = React.useRef(null);
+    const [showLeftScroll, setShowLeftScroll] = React.useState(false);
+    const [showRightScroll, setShowRightScroll] = React.useState(false);
+    const [isScrollable, setIsScrollable] = React.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__ */ jsxRuntime.jsx(TabsPrimitive__namespace.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__ */ jsxRuntime.jsx(TabsPrimitive__namespace.Root, { value, onValueChange, className, children: t2 });
+    if ($[2] !== children) {
+      t3 = [children];
+      $[2] = children;
+      $[3] = t3;
+    } else {
+      t3 = $[3];
+    }
+    React.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { ref: scrollContainerRef, className: "flex-1 overflow-x-auto no-scrollbar min-w-0", onScroll: checkScroll, style: t7, children: /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.List, { className: t8, children }) });
+      $[13] = children;
+      $[14] = t8;
+      $[15] = t9;
+    } else {
+      t9 = $[15];
+    }
+    let t10;
+    if ($[16] !== isScrollable || $[17] !== showRightScroll) {
+      t10 = isScrollable && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(TabsPrimitive__namespace.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 $ = reactCompilerRuntime.c(8);
@@ -37530,7 +37644,7 @@
   Badge.displayName = "Badge";
   function DebouncedTextField(props) {
     const $ = reactCompilerRuntime.c(13);
-    const previousEventRef = React.useRef();
+    const previousEventRef = React.useRef(void 0);
     const [internalValue, setInternalValue] = React.useState(props.value);
     const deferredValue = React.useDeferredValue(internalValue);
     let t0;