@sequenceholdings/atlas-ui 1.0.0 → 1.0.1

package/dist/index.d.ts

@@ -1878,7 +1878,7 @@ declare interface MetricGridProps {
     className?: string;
 }
 
-export declare function MultiSelect({ label, countLabel, options, selected, onChange, searchPlaceholder, emptyMessage, maxStackedIcons, hideWhenEmpty, className, }: MultiSelectProps): JSX.Element | null;
+export declare function MultiSelect({ label, countLabel, options, selected, onChange, searchPlaceholder, emptyMessage, maxStackedIcons, hideWhenEmpty, modal, className, }: MultiSelectProps): JSX.Element | null;
 
 /**
  * Fields shared by `MultiSelect` (trigger + popover) and the standalone
@@ -1995,6 +1995,27 @@ declare interface MultiSelectProps extends MultiSelectCoreProps {
      * that hasn't loaded yet).
      */
     hideWhenEmpty?: boolean;
+    /**
+     * Render the popover as a modal layer. Pass `true` when the MultiSelect
+     * lives inside a Dialog.
+     *
+     * A Dialog scroll-locks the page with react-remove-scroll, allowing wheel
+     * events only within the dialog's own content subtree. This popover portals
+     * to the body, so it sits outside that subtree and the lock swallows every
+     * wheel event over the option list — the list is a real scroll container
+     * (`max-h-[300px] overflow-y-auto`) but cannot be scrolled, stranding every
+     * option past the ~7th. Radix `Select` is unaffected because it implements
+     * its own scrolling rather than relying on native overflow.
+     *
+     * Modal mode gives the popover its own scroll lock. react-remove-scroll
+     * keeps a stack of locks with only the innermost active, so the popover's
+     * lock supersedes the dialog's and allows wheel within the popover.
+     *
+     * Defaults to `false` because modal mode also traps focus and blocks outside
+     * pointer events — in a filter toolbar that breaks clicking straight from one
+     * open facet to the next, which is the dominant use of this component.
+     */
+    modal?: boolean;
     className?: string;
 }
 

package/dist/index.mjs

@@ -9587,28 +9587,29 @@ function _y() {
 		children: /* @__PURE__ */ O(Cn, { className: "size-icon-sm" })
 	});
 }
-function vy({ label: e, countLabel: t, options: n, selected: i, onChange: a, searchPlaceholder: o, emptyMessage: s = "No matches.", maxStackedIcons: c = 3, hideWhenEmpty: l = !0, className: u }) {
-	let [d, f] = E(!1), [p, m] = E(""), h = i.length > 0, g = t ?? e.toLowerCase(), _ = w(() => {
+function vy({ label: e, countLabel: t, options: n, selected: i, onChange: a, searchPlaceholder: o, emptyMessage: s = "No matches.", maxStackedIcons: c = 3, hideWhenEmpty: l = !0, modal: u = !1, className: d }) {
+	let [f, p] = E(!1), [m, h] = E(""), g = i.length > 0, _ = t ?? e.toLowerCase(), v = w(() => {
 		let e = new Set(i);
 		return n.filter((t) => e.has(t.value));
-	}, [n, i]).slice(0, c), v = w(() => n.some((e) => e.icon != null), [n]);
+	}, [n, i]).slice(0, c), y = w(() => n.some((e) => e.icon != null), [n]);
 	return l && n.length === 0 ? null : /* @__PURE__ */ k(o_, {
-		open: d,
+		open: f,
 		onOpenChange: (e) => {
-			f(e), e || m("");
+			p(e), e || h("");
 		},
+		modal: u,
 		children: [/* @__PURE__ */ O(s_, {
 			asChild: !0,
 			children: /* @__PURE__ */ O("button", {
 				type: "button",
 				"data-slot": "multi-select-trigger",
 				"aria-haspopup": "listbox",
-				"aria-expanded": d,
-				className: r("flex h-9 items-center gap-2 whitespace-nowrap rounded-field border border-input bg-field px-3 py-1 text-base md:text-sm", "ring-offset-background transition-colors", "focus:outline-none focus:ring-1 focus:ring-ring", "disabled:cursor-not-allowed disabled:opacity-50", h ? "text-foreground" : "text-muted-foreground hover:text-foreground", u),
-				children: h ? /* @__PURE__ */ k(D, { children: [
-					v && _.length > 0 && /* @__PURE__ */ O("span", {
+				"aria-expanded": f,
+				className: r("flex h-9 items-center gap-2 whitespace-nowrap rounded-field border border-input bg-field px-3 py-1 text-base md:text-sm", "ring-offset-background transition-colors", "focus:outline-none focus:ring-1 focus:ring-ring", "disabled:cursor-not-allowed disabled:opacity-50", g ? "text-foreground" : "text-muted-foreground hover:text-foreground", d),
+				children: g ? /* @__PURE__ */ k(D, { children: [
+					y && v.length > 0 && /* @__PURE__ */ O("span", {
 						className: "flex shrink-0 flex-row-reverse -space-x-1.5 space-x-reverse",
-						children: [..._].reverse().map((e) => /* @__PURE__ */ O("span", {
+						children: [...v].reverse().map((e) => /* @__PURE__ */ O("span", {
 							className: "flex size-5 shrink-0 items-center justify-center rounded-full ring-2 ring-background",
 							children: e.icon ?? /* @__PURE__ */ O(_y, {})
 						}, e.value))
@@ -9621,7 +9622,7 @@ function vy({ label: e, countLabel: t, options: n, selected: i, onChange: a, sea
 								children: i.length
 							}),
 							" ",
-							g
+							_
 						]
 					}),
 					/* @__PURE__ */ O("span", {
@@ -9647,7 +9648,7 @@ function vy({ label: e, countLabel: t, options: n, selected: i, onChange: a, sea
 					className: "min-w-0 truncate",
 					children: e
 				}), /* @__PURE__ */ O(ln, {
-					className: r("size-icon shrink-0 opacity-50 transition-transform", d && "rotate-180"),
+					className: r("size-icon shrink-0 opacity-50 transition-transform", f && "rotate-180"),
 					"aria-hidden": !0
 				})] })
 			})
@@ -9660,8 +9661,8 @@ function vy({ label: e, countLabel: t, options: n, selected: i, onChange: a, sea
 				onChange: a,
 				searchPlaceholder: o ?? e,
 				emptyMessage: s,
-				query: p,
-				onQueryChange: m
+				query: m,
+				onQueryChange: h
 			})
 		})]
 	});

package/package.json

@@ -9,7 +9,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Atlas shared UI component library for Artifact Studio apps",
   "type": "module",
   "sideEffects": [