@nurix/ui-component-library 1.1.7-stage.137 → 1.1.7-stage.139

package/dist/index.js

@@ -15259,13 +15259,17 @@ function CompoundFilterSelect({
   const { theme } = useTheme();
   const themeClass = theme === "dark" ? "dark" : "light";
   const [open, setOpen] = React40.useState(false);
-  const container = React40.useMemo(
-    () => {
-      var _a5;
-      return typeof document !== "undefined" ? (_a5 = document.querySelector(".lego-land")) != null ? _a5 : void 0 : void 0;
-    },
-    []
+  const sentinelRef = React40.useRef(null);
+  const [container, setContainer] = React40.useState(
+    void 0
   );
+  React40.useEffect(() => {
+    var _a5, _b5;
+    const el = (_a5 = sentinelRef.current) == null ? void 0 : _a5.closest(".lego-land");
+    setContainer(
+      el != null ? el : typeof document !== "undefined" ? (_b5 = document.querySelector(".lego-land")) != null ? _b5 : void 0 : void 0
+    );
+  }, []);
   const selectedOption = options.find((opt) => opt.value === value);
   const effectiveLeadingIcon = leadingIcon != null ? leadingIcon : selectedOption == null ? void 0 : selectedOption.icon;
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
@@ -15284,6 +15288,7 @@ function CompoundFilterSelect({
       ),
       ...props,
       children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { ref: sentinelRef, style: { display: "contents" }, "aria-hidden": "true" }),
         /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(DropdownMenuPrimitive4.Root, { open, onOpenChange: setOpen, children: [
           /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DropdownMenuPrimitive4.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
             "button",
@@ -15332,12 +15337,17 @@ function CompoundFilterSelect({
                   className: cn(
                     "bg-token-white flex flex-col gap-1 p-1 rounded-[12px] shadow-sm min-w-[160px]",
                     "relative z-50 font-sans outline-none",
+                    // Cap height + scroll: with many options (e.g. a country
+                    // code list) the menu would otherwise overflow the viewport
+                    // and be impossible to reach the bottom items.
+                    "max-h-[var(--radix-dropdown-menu-content-available-height,300px)] overflow-y-auto",
                     "data-[state=open]:animate-in data-[state=closed]:animate-out",
                     "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
                   ),
                   side: "bottom",
                   align: "start",
                   sideOffset: 6,
+                  collisionPadding: 8,
                   children: options.map((opt) => {
                     const isSelected = opt.value === value;
                     return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
@@ -17298,15 +17308,27 @@ var Popover = React46.forwardRef(
       };
       const onScroll = (e) => {
         var _a6;
-        if ((_a6 = popoverRef.current) == null ? void 0 : _a6.contains(e.target)) return;
+        const target = e.target;
+        if ((_a6 = popoverRef.current) == null ? void 0 : _a6.contains(target)) return;
+        if (target && typeof target.closest === "function" && target.closest(
+          '[data-lego-popover][data-state="open"], [data-radix-popper-content-wrapper]'
+        )) {
+          return;
+        }
         update();
       };
       update();
       window.addEventListener("resize", update);
       window.addEventListener("scroll", onScroll, true);
+      let ro;
+      if (typeof ResizeObserver !== "undefined") {
+        ro = new ResizeObserver(() => update());
+        ro.observe(p);
+      }
       return () => {
         window.removeEventListener("resize", update);
         window.removeEventListener("scroll", onScroll, true);
+        ro == null ? void 0 : ro.disconnect();
       };
     }, [open, side, align, sideOffset]);
     React46.useEffect(() => {
@@ -17833,6 +17855,10 @@ var TimeRangeInput = React49.forwardRef(
     const parsed = React49.useMemo(() => parse24To12(value), [value]);
     const [hour, setHour] = React49.useState(parsed.hour);
     const [minute, setMinute] = React49.useState(parsed.minute);
+    const hourValueRef = React49.useRef(hour);
+    const minuteValueRef = React49.useRef(minute);
+    hourValueRef.current = hour;
+    minuteValueRef.current = minute;
     React49.useEffect(() => {
       setHour(parsed.hour);
       setMinute(parsed.minute);
@@ -17842,8 +17868,8 @@ var TimeRangeInput = React49.forwardRef(
     const commit = (next) => {
       var _a5, _b5, _c;
       const merged = {
-        hour: (_a5 = next.hour) != null ? _a5 : hour,
-        minute: (_b5 = next.minute) != null ? _b5 : minute,
+        hour: (_a5 = next.hour) != null ? _a5 : hourValueRef.current,
+        minute: (_b5 = next.minute) != null ? _b5 : minuteValueRef.current,
         period: (_c = next.period) != null ? _c : parsed.period
       };
       onChange(format12To24(merged));
@@ -17852,26 +17878,32 @@ var TimeRangeInput = React49.forwardRef(
       var _a5;
       const digits = raw.replace(/\D/g, "").slice(0, 2);
       setHour(digits);
+      hourValueRef.current = digits;
       const n = Number.parseInt(digits) || 0;
       if (digits.length === 2 && n >= 1 && n <= 12) {
         (_a5 = minuteRef.current) == null ? void 0 : _a5.focus();
       }
     };
     const handleHourBlur = () => {
-      const n = Number.parseInt(hour);
-      const clamped = !hour || n < 1 || n > 12 ? "12" : String(n);
+      const current = hourValueRef.current;
+      const n = Number.parseInt(current);
+      const clamped = !current || n < 1 || n > 12 ? "12" : String(n);
       setHour(clamped);
-      commit({ hour: clamped, minute: minute.padStart(2, "0") });
+      hourValueRef.current = clamped;
+      commit({ hour: clamped, minute: minuteValueRef.current.padStart(2, "0") });
     };
     const handleMinuteChange = (raw) => {
       const digits = raw.replace(/\D/g, "").slice(0, 2);
       setMinute(digits);
+      minuteValueRef.current = digits;
     };
     const handleMinuteBlur = () => {
-      const n = Number.parseInt(minute) || 0;
+      const current = minuteValueRef.current;
+      const n = Number.parseInt(current) || 0;
       const clamped = n > 59 ? "00" : String(n).padStart(2, "0");
       setMinute(clamped);
-      commit({ hour, minute: clamped });
+      minuteValueRef.current = clamped;
+      commit({ hour: hourValueRef.current, minute: clamped });
     };
     const handlePeriodChange = (next) => {
       if (next === "AM" || next === "PM") commit({ period: next });

package/dist/index.mjs

@@ -15154,13 +15154,17 @@ function CompoundFilterSelect({
   const { theme } = useTheme();
   const themeClass = theme === "dark" ? "dark" : "light";
   const [open, setOpen] = React40.useState(false);
-  const container = React40.useMemo(
-    () => {
-      var _a5;
-      return typeof document !== "undefined" ? (_a5 = document.querySelector(".lego-land")) != null ? _a5 : void 0 : void 0;
-    },
-    []
+  const sentinelRef = React40.useRef(null);
+  const [container, setContainer] = React40.useState(
+    void 0
   );
+  React40.useEffect(() => {
+    var _a5, _b5;
+    const el = (_a5 = sentinelRef.current) == null ? void 0 : _a5.closest(".lego-land");
+    setContainer(
+      el != null ? el : typeof document !== "undefined" ? (_b5 = document.querySelector(".lego-land")) != null ? _b5 : void 0 : void 0
+    );
+  }, []);
   const selectedOption = options.find((opt) => opt.value === value);
   const effectiveLeadingIcon = leadingIcon != null ? leadingIcon : selectedOption == null ? void 0 : selectedOption.icon;
   return /* @__PURE__ */ jsxs27(
@@ -15179,6 +15183,7 @@ function CompoundFilterSelect({
       ),
       ...props,
       children: [
+        /* @__PURE__ */ jsx36("span", { ref: sentinelRef, style: { display: "contents" }, "aria-hidden": "true" }),
         /* @__PURE__ */ jsxs27(DropdownMenuPrimitive4.Root, { open, onOpenChange: setOpen, children: [
           /* @__PURE__ */ jsx36(DropdownMenuPrimitive4.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs27(
             "button",
@@ -15227,12 +15232,17 @@ function CompoundFilterSelect({
                   className: cn(
                     "bg-token-white flex flex-col gap-1 p-1 rounded-[12px] shadow-sm min-w-[160px]",
                     "relative z-50 font-sans outline-none",
+                    // Cap height + scroll: with many options (e.g. a country
+                    // code list) the menu would otherwise overflow the viewport
+                    // and be impossible to reach the bottom items.
+                    "max-h-[var(--radix-dropdown-menu-content-available-height,300px)] overflow-y-auto",
                     "data-[state=open]:animate-in data-[state=closed]:animate-out",
                     "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
                   ),
                   side: "bottom",
                   align: "start",
                   sideOffset: 6,
+                  collisionPadding: 8,
                   children: options.map((opt) => {
                     const isSelected = opt.value === value;
                     return /* @__PURE__ */ jsxs27(
@@ -16167,7 +16177,7 @@ var MONACO_OPTIONS_DIALOG = {
 
 // src/json-editor/useJsonEditor.tsx
 var import_ajv = __toESM(require_ajv());
-import { useCallback as useCallback12, useEffect as useEffect13, useId, useRef as useRef9, useState as useState19 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect14, useId, useRef as useRef10, useState as useState19 } from "react";
 
 // src/json-editor/useJsonEditorErrorStore.ts
 var state = {
@@ -16223,16 +16233,16 @@ function useJsonEditor({
   const editorKey = useId();
   const registerError = useJsonEditorErrorStore((s) => s.registerError);
   const clearError = useJsonEditorErrorStore((s) => s.clearError);
-  const editorRef = useRef9(null);
-  const monacoRef = useRef9(null);
-  const expandedEditorRef = useRef9(null);
+  const editorRef = useRef10(null);
+  const monacoRef = useRef10(null);
+  const expandedEditorRef = useRef10(null);
   const [errors, setErrors] = useState19([]);
   const [copied, setCopied] = useState19(false);
   const [monacoReady, setMonacoReady] = useState19(false);
   const resolvedNodeId = nodeId != null ? nodeId : `_unbound_${editorKey}`;
-  const resolvedNodeIdRef = useRef9(resolvedNodeId);
+  const resolvedNodeIdRef = useRef10(resolvedNodeId);
   resolvedNodeIdRef.current = resolvedNodeId;
-  useEffect13(
+  useEffect14(
     () => () => {
       clearError(resolvedNodeIdRef.current, editorKey);
     },
@@ -16357,7 +16367,7 @@ function useJsonEditor({
     },
     [normalizeInput, onChange, validateJson]
   );
-  useEffect13(() => {
+  useEffect14(() => {
     const normalized = normalizeInput(value);
     if (normalized !== value) onChange(normalized);
     validateJson(normalized);
@@ -17193,15 +17203,27 @@ var Popover = React46.forwardRef(
       };
       const onScroll = (e) => {
         var _a6;
-        if ((_a6 = popoverRef.current) == null ? void 0 : _a6.contains(e.target)) return;
+        const target = e.target;
+        if ((_a6 = popoverRef.current) == null ? void 0 : _a6.contains(target)) return;
+        if (target && typeof target.closest === "function" && target.closest(
+          '[data-lego-popover][data-state="open"], [data-radix-popper-content-wrapper]'
+        )) {
+          return;
+        }
         update();
       };
       update();
       window.addEventListener("resize", update);
       window.addEventListener("scroll", onScroll, true);
+      let ro;
+      if (typeof ResizeObserver !== "undefined") {
+        ro = new ResizeObserver(() => update());
+        ro.observe(p);
+      }
       return () => {
         window.removeEventListener("resize", update);
         window.removeEventListener("scroll", onScroll, true);
+        ro == null ? void 0 : ro.disconnect();
       };
     }, [open, side, align, sideOffset]);
     React46.useEffect(() => {
@@ -17728,6 +17750,10 @@ var TimeRangeInput = React49.forwardRef(
     const parsed = React49.useMemo(() => parse24To12(value), [value]);
     const [hour, setHour] = React49.useState(parsed.hour);
     const [minute, setMinute] = React49.useState(parsed.minute);
+    const hourValueRef = React49.useRef(hour);
+    const minuteValueRef = React49.useRef(minute);
+    hourValueRef.current = hour;
+    minuteValueRef.current = minute;
     React49.useEffect(() => {
       setHour(parsed.hour);
       setMinute(parsed.minute);
@@ -17737,8 +17763,8 @@ var TimeRangeInput = React49.forwardRef(
     const commit = (next) => {
       var _a5, _b5, _c;
       const merged = {
-        hour: (_a5 = next.hour) != null ? _a5 : hour,
-        minute: (_b5 = next.minute) != null ? _b5 : minute,
+        hour: (_a5 = next.hour) != null ? _a5 : hourValueRef.current,
+        minute: (_b5 = next.minute) != null ? _b5 : minuteValueRef.current,
         period: (_c = next.period) != null ? _c : parsed.period
       };
       onChange(format12To24(merged));
@@ -17747,26 +17773,32 @@ var TimeRangeInput = React49.forwardRef(
       var _a5;
       const digits = raw.replace(/\D/g, "").slice(0, 2);
       setHour(digits);
+      hourValueRef.current = digits;
       const n = Number.parseInt(digits) || 0;
       if (digits.length === 2 && n >= 1 && n <= 12) {
         (_a5 = minuteRef.current) == null ? void 0 : _a5.focus();
       }
     };
     const handleHourBlur = () => {
-      const n = Number.parseInt(hour);
-      const clamped = !hour || n < 1 || n > 12 ? "12" : String(n);
+      const current = hourValueRef.current;
+      const n = Number.parseInt(current);
+      const clamped = !current || n < 1 || n > 12 ? "12" : String(n);
       setHour(clamped);
-      commit({ hour: clamped, minute: minute.padStart(2, "0") });
+      hourValueRef.current = clamped;
+      commit({ hour: clamped, minute: minuteValueRef.current.padStart(2, "0") });
     };
     const handleMinuteChange = (raw) => {
       const digits = raw.replace(/\D/g, "").slice(0, 2);
       setMinute(digits);
+      minuteValueRef.current = digits;
     };
     const handleMinuteBlur = () => {
-      const n = Number.parseInt(minute) || 0;
+      const current = minuteValueRef.current;
+      const n = Number.parseInt(current) || 0;
       const clamped = n > 59 ? "00" : String(n).padStart(2, "0");
       setMinute(clamped);
-      commit({ hour, minute: clamped });
+      minuteValueRef.current = clamped;
+      commit({ hour: hourValueRef.current, minute: clamped });
     };
     const handlePeriodChange = (next) => {
       if (next === "AM" || next === "PM") commit({ period: next });

package/dist/styles.css

@@ -646,6 +646,9 @@
   .lego-land .max-h-\[507px\] {
     max-height: 507px;
   }
+  .lego-land .max-h-\[var\(--radix-dropdown-menu-content-available-height\,300px\)\] {
+    max-height: var(--radix-dropdown-menu-content-available-height,300px);
+  }
   .lego-land .min-h-0 {
     min-height: calc(var(--spacing) * 0);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nurix/ui-component-library",
-  "version": "1.1.7-stage.137",
+  "version": "1.1.7-stage.139",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",