@nurix/ui-component-library 1.1.7-stage.138 → 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)(

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);

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.138",
+  "version": "1.1.7-stage.139",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",