@orient-ai/aurora-ui 1.0.0-alpha.6 → 1.0.0-alpha.7

package/dist/index.js

@@ -11893,25 +11893,25 @@ var K = {
 };
 //#endregion
 //#region src/components/Popover/Popover.tsx
-function um({ children: e, header: n, blockSize: r = "auto", minBlockSize: i = "0", maxBlockSize: a = "none", inlineSize: o = "auto", minInlineSize: s = "0", maxInlineSize: c = "none", matchAnchorWidth: l = !1, scrollTabIndex: u, anchor: d, side: f = "bottom", align: m = "start", sideOffset: v = 4, alignOffset: y = 0, collisionPadding: b = 16, collisionAvoidance: x = {
+function um({ children: e, header: n, blockSize: r = "auto", minBlockSize: i = "0", maxBlockSize: a = "none", inlineSize: o = "auto", minInlineSize: s = "0", maxInlineSize: c = "none", matchAnchorWidth: l = !1, scrollRef: u, scrollTabIndex: d, anchor: f, side: m = "bottom", align: v = "start", sideOffset: y = 4, alignOffset: b = 0, collisionPadding: x = 16, collisionAvoidance: S = {
 	side: "flip",
 	align: "shift",
 	fallbackAxisSide: "none"
-}, initialFocus: S, finalFocus: C }) {
-	let w = t();
+}, initialFocus: C, finalFocus: w }) {
+	let T = t();
 	return /* @__PURE__ */ h(_.Portal, { children: /* @__PURE__ */ h(_.Positioner, {
-		dir: w,
-		anchor: d,
-		side: f,
-		align: m,
-		sideOffset: v,
-		alignOffset: y,
-		collisionPadding: b,
-		collisionAvoidance: x,
+		dir: T,
+		anchor: f,
+		side: m,
+		align: v,
+		sideOffset: y,
+		alignOffset: b,
+		collisionPadding: x,
+		collisionAvoidance: S,
 		className: K.positioner,
 		children: /* @__PURE__ */ g(_.Popup, {
-			initialFocus: S,
-			finalFocus: C,
+			initialFocus: C,
+			finalFocus: w,
 			className: p("aurora-base", K.popover),
 			style: {
 				blockSize: r === "auto" ? "fit-content" : r,
@@ -11925,8 +11925,9 @@ function um({ children: e, header: n, blockSize: r = "auto", minBlockSize: i = "
 				className: K.header,
 				children: n
 			}), /* @__PURE__ */ h("div", {
+				ref: u,
 				className: p(K.scroll, K.spacious),
-				tabIndex: u,
+				tabIndex: d,
 				children: e
 			})]
 		})
@@ -14106,32 +14107,52 @@ function qh({ id: e, label: n = "Date", preset: r, onPresetsChange: i, value: a,
 	});
 }
 var Jh = {
-	search: "_search_fipy4_1",
-	options: "_options_fipy4_7",
-	option: "_option_fipy4_7",
-	checkbox: "_checkbox_fipy4_38",
-	"option-label": "_option-label_fipy4_44",
-	loading: "_loading_fipy4_49",
-	empty: "_empty_fipy4_55"
+	search: "_search_1fbkm_1",
+	options: "_options_1fbkm_7",
+	option: "_option_1fbkm_7",
+	checkbox: "_checkbox_1fbkm_38",
+	"option-label": "_option-label_1fbkm_44",
+	loadMore: "_loadMore_1fbkm_49",
+	loading: "_loading_1fbkm_53",
+	empty: "_empty_1fbkm_59"
 };
 //#endregion
 //#region src/components/Filters/Select/Select.tsx
-function Yh({ id: e, label: t, options: n, filteredOptions: r, value: i, onChange: a, inputValue: o, onInputChange: s, open: c, onOpenChange: l, searchPlaceholder: f = "Search options", empty: m = "No results found", loading: _ = !1, disabled: v = !1 }) {
-	let y = d(null), b = u(() => new Map(n.map((e) => [e.value, e])), [n]), x = i.map((e) => b.get(e)?.text ?? e), S = r ?? n;
-	return /* @__PURE__ */ g(pm, {
-		open: c && !v,
-		onOpenChange: l,
+function Yh({ id: e, label: t, selectedOptions: n, options: r, value: i, onChange: a, inputValue: o, onInputChange: c, open: l, onOpenChange: u, searchPlaceholder: m = "Search options", empty: _ = "No results found", loading: v = !1, hasMore: y = !1, loadMore: b, isLoadingMore: x = !1, disabled: S = !1 }) {
+	let C = d(null), w = d(null), [T, E] = f(null);
+	return s(() => {
+		if (!l || S || v || x || !y || !b || !T) return;
+		let e = new IntersectionObserver(([t]) => {
+			t.isIntersecting && (e.disconnect(), b());
+		}, {
+			root: w.current,
+			rootMargin: "0px 0px 32px 0px"
+		});
+		return e.observe(T), () => e.disconnect();
+	}, [
+		l,
+		S,
+		v,
+		x,
+		y,
+		b,
+		T,
+		r.length
+	]), /* @__PURE__ */ g(pm, {
+		open: l && !S,
+		onOpenChange: u,
 		children: [/* @__PURE__ */ h(Hh, {
-			ref: y,
+			ref: C,
 			id: e,
 			label: t,
-			segments: [{ values: x }],
-			open: c,
-			disabled: v,
+			segments: [{ values: n.map((e) => e.text) }],
+			open: l,
+			disabled: S,
 			renderTrigger: /* @__PURE__ */ h(mm, {}),
 			onClear: () => a?.([])
 		}), /* @__PURE__ */ h(um, {
-			anchor: y,
+			anchor: C,
+			scrollRef: w,
 			matchAnchorWidth: !0,
 			minInlineSize: "256px",
 			maxBlockSize: "264px",
@@ -14139,40 +14160,52 @@ function Yh({ id: e, label: t, options: n, filteredOptions: r, value: i, onChang
 				className: Jh.search,
 				children: /* @__PURE__ */ h(Tm, {
 					value: o,
-					onChange: (e) => s?.(e.currentTarget.value),
-					placeholder: f,
+					onChange: (e) => c?.(e.currentTarget.value),
+					placeholder: m,
 					prefix: /* @__PURE__ */ h(V, { type: "search" })
 				})
 			}),
-			children: S.length > 0 ? /* @__PURE__ */ h("div", {
-				className: Jh.options,
-				children: S.map((e) => {
-					let t = i.includes(e.value);
-					return /* @__PURE__ */ g("button", {
-						type: "button",
-						disabled: _ || e.disabled,
-						"data-selected": t || void 0,
-						className: p("aurora-base", "aurora-button", Jh.option),
-						onClick: () => a?.(t ? i.filter((t) => t !== e.value) : [...i, e.value]),
-						children: [/* @__PURE__ */ h("span", {
-							className: Jh.checkbox,
-							inert: !0,
-							children: /* @__PURE__ */ h(Sm, {
-								checked: t,
-								disabled: _ || e.disabled
-							})
-						}), /* @__PURE__ */ h("span", {
-							className: Jh["option-label"],
-							children: e.label
-						})]
-					}, e.value);
-				})
-			}) : _ ? /* @__PURE__ */ h("div", {
-				className: Jh.loading,
-				children: /* @__PURE__ */ h(Te, {})
-			}) : /* @__PURE__ */ h("div", {
-				className: Jh.empty,
-				children: m
+			children: /* @__PURE__ */ g("div", {
+				"aria-busy": v || x,
+				children: [r.length > 0 ? /* @__PURE__ */ h("div", {
+					className: Jh.options,
+					children: r.map((e) => {
+						let t = i.includes(e.value);
+						return /* @__PURE__ */ g("button", {
+							type: "button",
+							disabled: v || e.disabled,
+							"data-selected": t || void 0,
+							className: p("aurora-base", "aurora-button", Jh.option),
+							onClick: () => a?.(t ? i.filter((t) => t !== e.value) : [...i, e.value]),
+							children: [/* @__PURE__ */ h("span", {
+								className: Jh.checkbox,
+								inert: !0,
+								children: /* @__PURE__ */ h(Sm, {
+									checked: t,
+									disabled: v || e.disabled
+								})
+							}), /* @__PURE__ */ h("span", {
+								className: Jh["option-label"],
+								children: e.label
+							})]
+						}, e.value);
+					})
+				}) : v ? /* @__PURE__ */ h("div", {
+					className: Jh.loading,
+					children: /* @__PURE__ */ h(Te, {})
+				}) : x ? null : /* @__PURE__ */ h("div", {
+					className: Jh.empty,
+					children: _
+				}), (y || x) && /* @__PURE__ */ h("div", {
+					ref: E,
+					className: Jh.loadMore,
+					children: x && /* @__PURE__ */ h("div", {
+						className: Jh.loading,
+						role: "status",
+						"aria-label": "Loading more options",
+						children: /* @__PURE__ */ h(Te, {})
+					})
+				})]
 			})
 		})]
 	});
@@ -14214,14 +14247,17 @@ function Zh({ definition: e, filter: t, onChange: n }) {
 	return /* @__PURE__ */ h(Yh, {
 		label: e.label,
 		disabled: e.disabled,
+		selectedOptions: e.selectedOptions,
 		options: e.options,
-		filteredOptions: e.filteredOptions,
 		value: t?.type === "select" ? t.value : [],
 		inputValue: e.inputValue,
 		onInputChange: e.onInputChange,
 		searchPlaceholder: e.searchPlaceholder,
 		empty: e.empty,
 		loading: e.loading,
+		hasMore: e.hasMore,
+		loadMore: e.loadMore,
+		isLoadingMore: e.isLoadingMore,
 		open: a && r,
 		onOpenChange: i,
 		onChange: (t) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orient-ai/aurora-ui",
-  "version": "1.0.0-alpha.6",
+  "version": "1.0.0-alpha.7",
   "description": "Aurora UI",
   "private": false,
   "type": "module",