@orianatech/pire 0.7.0 → 0.8.0

package/dist/index.js

@@ -813,6 +813,7 @@ var enMessages = {
   toastDismiss: "Dismiss",
   toastRegionLabel: "Notifications",
   comboBoxShowSuggestions: "Show suggestions",
+  comboBoxLoading: "Searching\u2026",
   datePickerOpenCalendar: "Open calendar",
   datePickerPreviousMonth: "Previous month",
   datePickerNextMonth: "Next month",
@@ -844,6 +845,7 @@ var esMessages = {
   toastDismiss: "Descartar",
   toastRegionLabel: "Notificaciones",
   comboBoxShowSuggestions: "Mostrar sugerencias",
+  comboBoxLoading: "Buscando\u2026",
   datePickerOpenCalendar: "Abrir calendario",
   datePickerPreviousMonth: "Mes anterior",
   datePickerNextMonth: "Mes siguiente",
@@ -895,12 +897,19 @@ function ComboBox({
   errorMessage,
   size = "md",
   fullWidth = true,
+  isFilteredExternally,
+  isLoading,
+  loadingLabel,
+  emptyLabel,
+  onLoadMore,
   className,
   style,
   ...rest
 }) {
   const msg = usePireMessages();
   const items = options.map(norm2);
+  const collection = isFilteredExternally ? { items } : { defaultItems: items };
+  const showsStatus = isLoading || isFilteredExternally && items.length === 0 && emptyLabel != null;
   return /* @__PURE__ */ jsxs16(
     AriaComboBox,
     {
@@ -908,9 +917,13 @@ function ComboBox({
       style,
       selectedKey: value,
       defaultSelectedKey: defaultValue,
-      onSelectionChange: (k) => onChange?.(k == null ? null : String(k)),
+      onSelectionChange: (k) => {
+        if (isLoading) return;
+        onChange?.(k == null ? null : String(k));
+      },
       onInputChange,
-      defaultItems: items,
+      ...collection,
+      allowsEmptyCollection: isFilteredExternally || isLoading,
       menuTrigger: "input",
       validationBehavior: "aria",
       ...rest,
@@ -935,10 +948,21 @@ function ComboBox({
         ),
         description ? /* @__PURE__ */ jsx22(Text6, { slot: "description", className: "pire-field-hint", children: description }) : null,
         /* @__PURE__ */ jsx22(FieldError5, { className: "pire-field-error", children: errorMessage }),
-        /* @__PURE__ */ jsx22(Popover2, { className: "pire-popover", children: /* @__PURE__ */ jsx22(ListBox2, { className: "pire-listbox", children: (item) => /* @__PURE__ */ jsxs16(ListBoxItem2, { className: "pire-option", id: item.value, textValue: item.label, isDisabled: item.isDisabled, children: [
-          /* @__PURE__ */ jsx22("span", { style: { flex: 1 }, children: item.label }),
-          item.secondary ? /* @__PURE__ */ jsx22("span", { style: { font: "var(--type-code)", color: "var(--text-tertiary)" }, children: item.secondary }) : null
-        ] }) }) })
+        /* @__PURE__ */ jsx22(Popover2, { className: "pire-popover", children: /* @__PURE__ */ jsx22(
+          ListBox2,
+          {
+            className: "pire-listbox",
+            onScroll: onLoadMore ? (e) => {
+              const el = e.currentTarget;
+              if (el.scrollHeight - el.scrollTop - el.clientHeight < 48) onLoadMore();
+            } : void 0,
+            renderEmptyState: showsStatus ? () => /* @__PURE__ */ jsx22("div", { className: "pire-listbox-status", role: "status", "aria-live": "polite", children: isLoading ? loadingLabel ?? msg.comboBoxLoading : emptyLabel }) : void 0,
+            children: (item) => /* @__PURE__ */ jsxs16(ListBoxItem2, { className: "pire-option", id: item.value, textValue: item.label, isDisabled: item.isDisabled, children: [
+              /* @__PURE__ */ jsx22("span", { className: "pire-option-label", children: item.label }),
+              item.secondary ? /* @__PURE__ */ jsx22("span", { className: "pire-option-secondary", children: item.secondary }) : null
+            ] })
+          }
+        ) })
       ]
     }
   );
@@ -973,6 +997,11 @@ function MultiComboBox({
   errorMessage,
   allowsCustomValue,
   size = "md",
+  isFilteredExternally,
+  isLoading,
+  loadingLabel,
+  emptyLabel,
+  onLoadMore,
   fullWidth = true,
   className,
   style,
@@ -980,6 +1009,8 @@ function MultiComboBox({
 }) {
   const msg = usePireMessages();
   const items = React7.useMemo(() => options.map(norm3), [options]);
+  const collection = isFilteredExternally ? { items } : { defaultItems: items };
+  const showsStatus = isLoading || isFilteredExternally && items.length === 0 && emptyLabel != null;
   const [uncontrolled, setUncontrolled] = React7.useState(defaultValue ?? []);
   const [announcement, setAnnouncement] = React7.useState("");
   const inputRef = React7.useRef(null);
@@ -1025,9 +1056,12 @@ function MultiComboBox({
       style,
       selectionMode: "multiple",
       value: values,
-      onChange: (keys) => commit(keys.map(String)),
+      onChange: (keys) => {
+        if (!isLoading) commit(keys.map(String));
+      },
       onInputChange,
-      defaultItems: items,
+      ...collection,
+      allowsEmptyCollection: isFilteredExternally || isLoading,
       menuTrigger: "input",
       validationBehavior: "aria",
       ...rest,
@@ -1070,10 +1104,21 @@ function MultiComboBox({
         /* @__PURE__ */ jsx23(VisuallyHidden, { children: /* @__PURE__ */ jsx23("span", { "aria-live": "polite", children: announcement }) }),
         description ? /* @__PURE__ */ jsx23(Text7, { slot: "description", className: "pire-field-hint", children: description }) : null,
         /* @__PURE__ */ jsx23(FieldError6, { className: "pire-field-error", children: errorMessage }),
-        /* @__PURE__ */ jsx23(Popover3, { className: "pire-popover", children: /* @__PURE__ */ jsx23(ListBox3, { className: "pire-listbox", children: (item) => /* @__PURE__ */ jsxs17(ListBoxItem3, { className: "pire-option", id: item.value, textValue: item.label, isDisabled: item.isDisabled, children: [
-          /* @__PURE__ */ jsx23("span", { style: { flex: 1 }, children: item.label }),
-          item.secondary ? /* @__PURE__ */ jsx23("span", { style: { font: "var(--type-code)", color: "var(--text-tertiary)" }, children: item.secondary }) : null
-        ] }) }) })
+        /* @__PURE__ */ jsx23(Popover3, { className: "pire-popover", children: /* @__PURE__ */ jsx23(
+          ListBox3,
+          {
+            className: "pire-listbox",
+            onScroll: onLoadMore ? (e) => {
+              const el = e.currentTarget;
+              if (el.scrollHeight - el.scrollTop - el.clientHeight < 48) onLoadMore();
+            } : void 0,
+            renderEmptyState: showsStatus ? () => /* @__PURE__ */ jsx23("div", { className: "pire-listbox-status", role: "status", "aria-live": "polite", children: isLoading ? loadingLabel ?? msg.comboBoxLoading : emptyLabel }) : void 0,
+            children: (item) => /* @__PURE__ */ jsxs17(ListBoxItem3, { className: "pire-option", id: item.value, textValue: item.label, isDisabled: item.isDisabled, children: [
+              /* @__PURE__ */ jsx23("span", { className: "pire-option-label", children: item.label }),
+              item.secondary ? /* @__PURE__ */ jsx23("span", { className: "pire-option-secondary", children: item.secondary }) : null
+            ] })
+          }
+        ) })
       ]
     }
   );