@commercelayer/app-elements 7.16.0 → 7.17.1

package/dist/main.js

@@ -1,5 +1,5 @@
 "use client";
-import { an as s, ao as t, ap as o, aq as r, ar as c, as as n, at as u, af as d, au as i, av as l, aw as p, ax as g, ay as b, al as m, az as S, aA as k, aB as I, a1 as T, ae as R, a9 as D, aC as y, aD as C, aE as h, aF as A, aG as P, aH as f, aI as H, aJ as v, aK as F, aL as L, aM as B, aN as O, aO as E, aP as N, aQ as M, aR as G, aS as w, aT as V, aU as x, aV as W, aW as J, aX as U, aY as j, aZ as q, a_ as z, a$ as Y, b0 as K, ah as Q, b1 as X, a0 as Z, ab as _, b2 as $, b3 as aa, b4 as ea, b5 as sa, aj as ta, ai as oa, b6 as ra, b7 as ca, b8 as na, b9 as ua, ba as da, a7 as ia, bb as la, bc as pa, bd as ga, be as ba, bf as ma, bg as Sa, bh as ka, bi as Ia, bj as Ta, bk as Ra, bl as Da, bm as ya, bn as Ca, bo as ha, bp as Aa, bq as Pa, br as fa, bs as Ha, bt as va, bu as Fa, bv as La, bw as Ba, bx as Oa, by as Ea, bz as Na, bA as Ma, bB as Ga, bC as wa, bD as Va, bE as xa, bF as Wa, bG as Ja, bH as Ua, bI as ja, bJ as qa, bK as za, bL as Ya, bM as Ka, bN as Qa, bO as Xa, bP as Za, bQ as _a, bR as $a, bS as ae, ag as ee, bT as se, bU as te, bV as oe, bW as re, bX as ce, bY as ne, bZ as ue, b_ as de, b$ as ie, c0 as le, c1 as pe, a8 as ge, c2 as be, c3 as me, c4 as Se, c5 as ke, c6 as Ie, c7 as Te, c8 as Re, c9 as De, ca as ye, cb as Ce, cc as he, cd as Ae, ce as Pe, cf as fe, cg as He, ch as ve, ci as Fe, cj as Le, ck as Be, cl as Oe, cm as Ee, cn as Ne, co as Me, cp as Ge, cq as we, cr as Ve, cs as xe, ct as We, cu as Je, cv as Ue, cw as je, cx as qe, cy as ze, cz as Ye, cA as Ke, cB as Qe, cC as Xe, cD as Ze, cE as _e, cF as $e, cG as as, cH as es, cI as ss, cJ as ts, cK as os, cL as rs, cM as cs, cN as ns, cO as us, cP as ds, cQ as is, cR as ls, cS as ps, cT as gs, cU as bs, cV as ms, cW as Ss, cX as ks, cY as Is, cZ as Ts, S as Rs, c_ as Ds, c$ as ys, d0 as Cs, ad as hs, aa as As, d1 as Ps, d2 as fs, d3 as Hs, d4 as vs, d5 as Fs, d6 as Ls, d7 as Bs, d8 as Os, d9 as Es, da as Ns, db as Ms, dc as Gs, dd as ws, de as Vs, df as xs, dg as Ws, dh as Js, di as Us, dj as js, a5 as qs, a4 as zs, dk as Ys, dl as Ks, dm as Qs, dn as Xs, dp as Zs, dq as _s, dr as $s, ds as at, dt as et, du as st, dv as tt, dw as ot, dx as rt, u as ct, dy as nt, ac as ut, dz as dt, dA as it, dB as lt } from "./main-CvmWwRKp.js";
+import { an as s, ao as t, ap as o, aq as r, ar as c, as as n, at as u, af as d, au as i, av as l, aw as p, ax as g, ay as b, al as m, az as S, aA as k, aB as I, a1 as T, ae as R, a9 as D, aC as y, aD as C, aE as h, aF as A, aG as P, aH as f, aI as H, aJ as v, aK as F, aL as L, aM as B, aN as O, aO as E, aP as N, aQ as M, aR as G, aS as w, aT as V, aU as x, aV as W, aW as J, aX as U, aY as j, aZ as q, a_ as z, a$ as Y, b0 as K, ah as Q, b1 as X, a0 as Z, ab as _, b2 as $, b3 as aa, b4 as ea, b5 as sa, aj as ta, ai as oa, b6 as ra, b7 as ca, b8 as na, b9 as ua, ba as da, a7 as ia, bb as la, bc as pa, bd as ga, be as ba, bf as ma, bg as Sa, bh as ka, bi as Ia, bj as Ta, bk as Ra, bl as Da, bm as ya, bn as Ca, bo as ha, bp as Aa, bq as Pa, br as fa, bs as Ha, bt as va, bu as Fa, bv as La, bw as Ba, bx as Oa, by as Ea, bz as Na, bA as Ma, bB as Ga, bC as wa, bD as Va, bE as xa, bF as Wa, bG as Ja, bH as Ua, bI as ja, bJ as qa, bK as za, bL as Ya, bM as Ka, bN as Qa, bO as Xa, bP as Za, bQ as _a, bR as $a, bS as ae, ag as ee, bT as se, bU as te, bV as oe, bW as re, bX as ce, bY as ne, bZ as ue, b_ as de, b$ as ie, c0 as le, c1 as pe, a8 as ge, c2 as be, c3 as me, c4 as Se, c5 as ke, c6 as Ie, c7 as Te, c8 as Re, c9 as De, ca as ye, cb as Ce, cc as he, cd as Ae, ce as Pe, cf as fe, cg as He, ch as ve, ci as Fe, cj as Le, ck as Be, cl as Oe, cm as Ee, cn as Ne, co as Me, cp as Ge, cq as we, cr as Ve, cs as xe, ct as We, cu as Je, cv as Ue, cw as je, cx as qe, cy as ze, cz as Ye, cA as Ke, cB as Qe, cC as Xe, cD as Ze, cE as _e, cF as $e, cG as as, cH as es, cI as ss, cJ as ts, cK as os, cL as rs, cM as cs, cN as ns, cO as us, cP as ds, cQ as is, cR as ls, cS as ps, cT as gs, cU as bs, cV as ms, cW as Ss, cX as ks, cY as Is, cZ as Ts, S as Rs, c_ as Ds, c$ as ys, d0 as Cs, ad as hs, aa as As, d1 as Ps, d2 as fs, d3 as Hs, d4 as vs, d5 as Fs, d6 as Ls, d7 as Bs, d8 as Os, d9 as Es, da as Ns, db as Ms, dc as Gs, dd as ws, de as Vs, df as xs, dg as Ws, dh as Js, di as Us, dj as js, a5 as qs, a4 as zs, dk as Ys, dl as Ks, dm as Qs, dn as Xs, dp as Zs, dq as _s, dr as $s, ds as at, dt as et, du as st, dv as tt, dw as ot, dx as rt, u as ct, dy as nt, ac as ut, dz as dt, dA as it, dB as lt } from "./main-BCESaaEa.js";
 export {
   s as A,
   t as ActionButtons,

package/dist/{parseISO-D28VuYUV.js → parseISO-72Xlmtu7.js}

@@ -1,5 +1,5 @@
 "use client";
-import { t as D, c as T, m as p, a as N } from "./main-CvmWwRKp.js";
+import { t as D, c as T, m as p, a as N } from "./main-BCESaaEa.js";
 function W(t, e) {
   const n = () => T(e?.in, NaN), a = I(t);
   let s;

package/dist/ui/atoms/Icon/icons.d.ts

@@ -72,6 +72,7 @@ export declare const iconMapping: {
     readonly globeHemisphereWest: phosphor.Icon;
     readonly googleLogo: phosphor.Icon;
     readonly hourglass: phosphor.Icon;
+    readonly hourglassHigh: phosphor.Icon;
     readonly houseSimple: phosphor.Icon;
     readonly info: phosphor.Icon;
     readonly key: phosphor.Icon;

package/dist/ui/forms/InputSelect/AsyncPaginateComponent.d.ts

@@ -0,0 +1,15 @@
+import { GroupBase, SelectInstance, StylesConfig } from 'react-select';
+import { InputSelectBaseProps, InputSelectValue, LoadAsyncValuesPaginated } from './InputSelect';
+export interface AsyncPaginateSelectComponentProps extends Omit<InputSelectBaseProps, "label" | "hint" | "asTextSearch" | "isCreatable"> {
+    loadAsyncValues: LoadAsyncValuesPaginated;
+    styles: StylesConfig<InputSelectValue>;
+}
+/**
+ * The async select that loads the next page as its menu is scrolled, instead of
+ * leaving everything past the first page reachable only by typing.
+ *
+ * Options are always what the server returned — client-side filtering stays off,
+ * as filtering a list that is only partly loaded would quietly hide matches
+ * sitting on a page that has not been fetched yet.
+ */
+export declare const AsyncPaginateSelectComponent: import('react').ForwardRefExoticComponent<AsyncPaginateSelectComponentProps & import('react').RefAttributes<SelectInstance<InputSelectValue, boolean, GroupBase<InputSelectValue>>>>;

package/dist/ui/forms/InputSelect/CreatableComponent.d.ts

@@ -1,6 +1,6 @@
 import { GroupBase, SelectInstance, StylesConfig } from 'react-select';
-import { InputSelectProps, InputSelectValue } from './InputSelect';
-export interface CreatableComponentProps extends Omit<InputSelectProps, "loadAsyncValues" | "label" | "hint"> {
+import { InputSelectBaseProps, InputSelectValue } from './InputSelect';
+export interface CreatableComponentProps extends Omit<InputSelectBaseProps, "label" | "hint"> {
     styles: StylesConfig<InputSelectValue>;
 }
 export declare const CreatableComponent: import('react').ForwardRefExoticComponent<CreatableComponentProps & import('react').RefAttributes<SelectInstance<InputSelectValue, boolean, GroupBase<InputSelectValue>>>>;

package/dist/ui/forms/InputSelect/GenericAsyncComponent.d.ts

@@ -2,9 +2,9 @@ import { default as React } from 'react';
 import { GroupBase, SelectInstance, StylesConfig } from 'react-select';
 import { default as AsyncSelect } from 'react-select/async';
 import { default as AsyncCreatableSelect } from 'react-select/async-creatable';
-import { SetRequired } from 'type-fest';
-import { InputSelectProps, InputSelectValue } from './InputSelect';
-export interface GenericAsyncSelectComponentProps extends Omit<SetRequired<InputSelectProps, "loadAsyncValues">, "label" | "hint"> {
+import { InputSelectBaseProps, InputSelectValue, LoadAsyncValues } from './InputSelect';
+export interface GenericAsyncSelectComponentProps extends Omit<InputSelectBaseProps, "label" | "hint"> {
+    loadAsyncValues: LoadAsyncValues;
     styles: StylesConfig<InputSelectValue>;
 }
 export declare const GenericAsyncSelectComponent: React.ForwardRefExoticComponent<GenericAsyncSelectComponentProps & {

package/dist/ui/forms/InputSelect/HookedInputSelect.d.ts

@@ -1,5 +1,5 @@
-import { InputSelectProps, PossibleSelectValue } from './InputSelect';
-export interface HookedInputSelectProps extends Omit<InputSelectProps, "onSelect" | "defaultValue"> {
+import { InputSelectAsyncProps, InputSelectBaseProps, PossibleSelectValue } from './InputSelect';
+interface HookedInputSelectOwnProps extends Omit<InputSelectBaseProps, "onSelect" | "defaultValue"> {
     /**
      * field name to match hook-form state
      */
@@ -27,9 +27,16 @@ export interface HookedInputSelectProps extends Omit<InputSelectProps, "onSelect
      */
     onSelect?: (value: PossibleSelectValue) => void;
 }
+/**
+ * The async half is intersected in rather than derived with `Omit`/`Pick`, as
+ * both collapse a union — and with it the rule that `infiniteScroll` requires the
+ * paginated loader.
+ */
+export type HookedInputSelectProps = HookedInputSelectOwnProps & InputSelectAsyncProps;
 /**
  * `InputSelect` component ready to be used with the `react-hook-form` context.
  * Value to be stored in the field can be controlled from the `pathToValue` prop.
  * @see InputSelect
  */
 export declare const HookedInputSelect: React.FC<HookedInputSelectProps>;
+export {};

package/dist/ui/forms/InputSelect/InputSelect.d.ts

@@ -12,7 +12,7 @@ export interface InputSelectValue {
     isDisabled?: boolean;
 }
 export type PossibleSelectValue = MultiValue<InputSelectValue> | SingleValue<InputSelectValue>;
-export interface InputSelectProps extends InputWrapperBaseProps {
+export interface InputSelectBaseProps extends InputWrapperBaseProps {
     /**
      * Initial values to populate the select options. It can be a flat array of values or a grouped array.
      */
@@ -94,10 +94,6 @@ export interface InputSelectProps extends InputWrapperBaseProps {
      * CSS class name
      */
     className?: string;
-    /**
-     * Function to load async values on search
-     */
-    loadAsyncValues?: (inputValue: string) => Promise<GroupedSelectValues | InputSelectValue[]>;
     /**
      * Optional text to display at the bottom of the dropdown menu
      */
@@ -132,6 +128,52 @@ export interface InputSelectProps extends InputWrapperBaseProps {
      */
     menuPortalTarget?: HTMLElement | null;
 }
+/**
+ * Loads the options matching what has been typed, all in one go.
+ */
+export type LoadAsyncValues = (inputValue: string) => Promise<GroupedSelectValues | InputSelectValue[]>;
+/**
+ * Loads one page of the options matching what has been typed.
+ *
+ * `hasMore` is what stops the paging: while it is `true` the menu asks for the
+ * page after the current one as it is scrolled to the bottom.
+ */
+export type LoadAsyncValuesPaginated = (inputValue: string, meta: {
+    page: number;
+}) => Promise<{
+    options: InputSelectValue[];
+    hasMore: boolean;
+}>;
+/**
+ * How the options are loaded, which also decides which select is mounted.
+ *
+ * The two are kept apart rather than folded into one optional flag so that
+ * turning `infiniteScroll` on makes the paginated loader mandatory — a loader
+ * that ignores the page it is handed would silently return the first page
+ * forever.
+ */
+export type InputSelectAsyncProps = {
+    /**
+     * Load the next page of options as the menu is scrolled, so that a list
+     * longer than one page can be browsed instead of only searched.
+     *
+     * Opt-in: without it the select keeps loading options the way it always
+     * has, one non-paginated request per search.
+     */
+    infiniteScroll?: false;
+    /**
+     * Function to load async values on search
+     */
+    loadAsyncValues?: LoadAsyncValues;
+} | {
+    infiniteScroll: true;
+    /**
+     * Function to load one page of async values. Called again with the next
+     * page as the menu is scrolled to the bottom.
+     */
+    loadAsyncValues: LoadAsyncValuesPaginated;
+};
+export type InputSelectProps = InputSelectBaseProps & InputSelectAsyncProps;
 /**
  * Advanced select component with support for async options loading and multi-select.
  * It's a wrapper around `react-select` with a subset of props exposed.

package/dist/ui/forms/InputSelect/SelectComponent.d.ts

@@ -1,6 +1,6 @@
 import { GroupBase, SelectInstance, StylesConfig } from 'react-select';
-import { InputSelectProps, InputSelectValue } from './InputSelect';
-export interface SelectComponentProps extends Omit<InputSelectProps, "loadAsyncValues" | "label" | "hint"> {
+import { InputSelectBaseProps, InputSelectValue } from './InputSelect';
+export interface SelectComponentProps extends Omit<InputSelectBaseProps, "label" | "hint"> {
     styles: StylesConfig<InputSelectValue>;
 }
 export declare const SelectComponent: import('react').ForwardRefExoticComponent<SelectComponentProps & import('react').RefAttributes<SelectInstance<InputSelectValue, boolean, GroupBase<InputSelectValue>>>>;

package/dist/ui/forms/InputSelect/index.d.ts

@@ -1,3 +1,3 @@
 export { HookedInputSelect, type HookedInputSelectProps, } from './HookedInputSelect';
-export { type GroupedSelectValues, InputSelect, type InputSelectProps, type InputSelectValue, type PossibleSelectValue, } from './InputSelect';
+export { type GroupedSelectValues, InputSelect, type InputSelectAsyncProps, type InputSelectBaseProps, type InputSelectProps, type InputSelectValue, type LoadAsyncValues, type LoadAsyncValuesPaginated, type PossibleSelectValue, } from './InputSelect';
 export { flatSelectValues, getDefaultValueFromFlatten, isGroupedSelectValues, isMultiValueSelected, isSingleValueSelected, } from './utils';

package/dist/ui/resources/useResourceFilters/useResourceSelectOptions.d.ts

@@ -18,8 +18,23 @@ export interface ResourceSelectOptions {
     recordCount?: number;
     /** Whether the labels of the current selection have been resolved. */
     hasResolvedSelection: boolean;
-    /** Server-side search, when the instruction sets `searchBy`. */
-    loadAsyncValues?: (hint: string) => Promise<InputSelectValue[]>;
+    /**
+     * Whether anything exists beyond `initialValues`. When it does not, the whole
+     * list is already in hand and the select needs no request of its own.
+     */
+    hasMorePages: boolean;
+    /** Whether typing narrows the list server-side, i.e. `searchBy` is set. */
+    isSearchable: boolean;
+    /**
+     * Loads one page of options, narrowed by what has been typed when the
+     * instruction sets `searchBy`. Feeds the select's infinite scroll.
+     */
+    loadAsyncValues: (hint: string, meta: {
+        page: number;
+    }) => Promise<{
+        options: InputSelectValue[];
+        hasMore: boolean;
+    }>;
 }
 /**
  * Loads the options of a resource-backed filter select.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercelayer/app-elements",
-  "version": "7.16.0",
+  "version": "7.17.1",
   "type": "module",
   "license": "MIT",
   "files": [
@@ -59,6 +59,7 @@
     "react-hook-form": "7.62.0",
     "react-i18next": "^15.7.4",
     "react-select": "^5.10.2",
+    "react-select-async-paginate": "^0.7.11",
     "react-toastify": "^11.1.0",
     "react-tooltip": "^5.30.1",
     "stable-hash": "^0.0.6",