@maxio-com/react-ui-components 9.26.0 → 9.27.0

package/dist/skills/maxio-react/references/components-forms-combobox.md

@@ -91,6 +91,37 @@ const [account, setAccount] = React.useState('acme');
 </ComboBox>
 ```
 
+## Async Loading
+
+Pass fetched options through `items` and set `isLoading` while fetching initial
+results, searching, or loading another page. ComboBox uses ListBox's loading
+spinner and calls `onLoadMore` when the user scrolls near the bottom. Use
+`scrollOffset` to adjust how early the next page loads (default: one scroll-area
+height). Omit `onLoadMore` when no pages remain, or use a callback such as
+`useAsyncList`'s `loadMore`, which stops at the end.
+
+For async search, connect `inputValue` and `onInputChange` to your query state and
+pass the matching results through `items`. Unlike `defaultItems`, `items` are not
+filtered locally. The **Async Loading** story demonstrates this with `useAsyncList`.
+
+```tsx
+<ComboBox
+  label="Account"
+  items={list.items}
+  inputValue={list.filterText}
+  onInputChange={list.setFilterText}
+  isLoading={list.isLoading}
+  onLoadMore={list.loadMore}
+  renderEmptyState={() => 'No accounts found.'}
+>
+  {(account) => <ComboBox.Item id={account.id}>{account.name}</ComboBox.Item>}
+</ComboBox>
+```
+
+The popup can open with no options while `isLoading`, `onLoadMore`, or
+`renderEmptyState` is provided. Set `allowsEmptyCollection` explicitly to override
+this behavior. The empty state appears only when loading has finished.
+
 ## Imports
 
 ```tsx
@@ -131,6 +162,54 @@ const DynamicItems = (args) => (
 );
 ```
 
+### Async Loading
+
+Search asynchronously and load additional options as users scroll. This example
+simulates an API with 60 accounts and 20 results per page.
+
+```tsx
+const AsyncLoading = () => {
+  const list = useAsyncList<Account>({
+    async load({ cursor, filterText }) {
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+
+      const matchingAccounts = Array.from({ length: 60 }, (_, index) => ({
+        id: String(index + 1),
+        name: `Account ${index + 1}`,
+      })).filter((account) =>
+        account.name.toLowerCase().includes(filterText.toLowerCase())
+      );
+      const start = Number(cursor ?? 0);
+      const end = start + 20;
+
+      return {
+        items: matchingAccounts.slice(start, end),
+        cursor: end < matchingAccounts.length ? String(end) : undefined,
+      };
+    },
+  });
+
+  return (
+    <ComboBox<Account>
+      label="Account"
+      placeholder="Search accounts"
+      menuTrigger="focus"
+      items={list.items}
+      inputValue={list.filterText}
+      onInputChange={list.setFilterText}
+      isLoading={list.isLoading}
+      onLoadMore={list.loadMore}
+      renderEmptyState={() => 'No accounts found.'}
+      onChange={action('onChange')}
+    >
+      {(account) => (
+        <ComboBox.Item id={account.id}>{account.name}</ComboBox.Item>
+      )}
+    </ComboBox>
+  );
+};
+```
+
 ### With Sections
 
 Use sections when the option set mixes statuses, categories, or other groups

package/dist/temporary-typings/src/components/forms/ComboBox/ComboBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../../../../src/components/forms/ComboBox/ComboBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAGxC,OAAO,KAAK,EAAE,aAAa,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AA4LpE,KAAK,iBAAiB,GAAG,CAAC,CACxB,CAAC,SAAS,MAAM,GAAG,MAAM,EACzB,CAAC,SAAS,qBAAqB,GAAG,QAAQ,EAE1C,KAAK,EAAE,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC,KACvB,KAAK,CAAC,YAAY,CAAC,GAAG;IACzB,IAAI,EAAE,OAAO,OAAO,CAAC,IAAI,CAAC;IAC1B,OAAO,EAAE,OAAO,OAAO,CAAC,OAAO,CAAC;IAChC,MAAM,EAAE,OAAO,OAAO,CAAC,MAAM,CAAC;CAC/B,CAAC;AAEF,QAAA,MAAM,QAAQ,EAIR,iBAAiB,CAAC;AAExB,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../../../../src/components/forms/ComboBox/ComboBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAGxC,OAAO,KAAK,EAAE,aAAa,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAyMpE,KAAK,iBAAiB,GAAG,CAAC,CACxB,CAAC,SAAS,MAAM,GAAG,MAAM,EACzB,CAAC,SAAS,qBAAqB,GAAG,QAAQ,EAE1C,KAAK,EAAE,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC,KACvB,KAAK,CAAC,YAAY,CAAC,GAAG;IACzB,IAAI,EAAE,OAAO,OAAO,CAAC,IAAI,CAAC;IAC1B,OAAO,EAAE,OAAO,OAAO,CAAC,OAAO,CAAC;IAChC,MAAM,EAAE,OAAO,OAAO,CAAC,MAAM,CAAC;CAC/B,CAAC;AAEF,QAAA,MAAM,QAAQ,EAIR,iBAAiB,CAAC;AAExB,eAAe,QAAQ,CAAC"}

package/dist/temporary-typings/src/components/forms/ComboBox/types.d.ts

@@ -12,6 +12,9 @@ export interface ComboBoxProps<T extends object = object, M extends ComboBoxSele
     leadingElement?: ReactNode;
     children: ReactNode | ((item: T) => ReactNode);
     renderEmptyState?: ListBoxProps<T>['renderEmptyState'];
+    isLoading?: ListBoxProps<T>['isLoading'];
+    onLoadMore?: ListBoxProps<T>['onLoadMore'];
+    scrollOffset?: ListBoxProps<T>['scrollOffset'];
     className?: string;
 }
 //# sourceMappingURL=types.d.ts.map

package/dist/temporary-typings/src/components/forms/ComboBox/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/forms/ComboBox/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EACV,aAAa,IAAI,iBAAiB,EAClC,gBAAgB,EACjB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAExD,MAAM,MAAM,qBAAqB,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE1D,MAAM,WAAW,aAAa,CAC5B,CAAC,SAAS,MAAM,GAAG,MAAM,EACzB,CAAC,SAAS,qBAAqB,GAAG,QAAQ,CAC1C,SAAQ,IAAI,CAAC,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC;IAI/D,KAAK,CAAC,EAAE,MAAM,CAAC;IAIf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAIjC,SAAS,CAAC,EAAE,OAAO,CAAC;IAIpB,WAAW,CAAC,EAAE,MAAM,CAAC;IAIrB,YAAY,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,UAAU,EAAE,gBAAgB,KAAK,MAAM,CAAC,CAAC;IAInE,WAAW,CAAC,EAAE,MAAM,CAAC;IAIrB,cAAc,CAAC,EAAE,SAAS,CAAC;IAI3B,QAAQ,EAAE,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC,CAAC;IAI/C,gBAAgB,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC;IAIvD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/forms/ComboBox/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EACV,aAAa,IAAI,iBAAiB,EAClC,gBAAgB,EACjB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAExD,MAAM,MAAM,qBAAqB,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE1D,MAAM,WAAW,aAAa,CAC5B,CAAC,SAAS,MAAM,GAAG,MAAM,EACzB,CAAC,SAAS,qBAAqB,GAAG,QAAQ,CAC1C,SAAQ,IAAI,CAAC,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC;IAI/D,KAAK,CAAC,EAAE,MAAM,CAAC;IAIf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAIjC,SAAS,CAAC,EAAE,OAAO,CAAC;IAIpB,WAAW,CAAC,EAAE,MAAM,CAAC;IAIrB,YAAY,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,UAAU,EAAE,gBAAgB,KAAK,MAAM,CAAC,CAAC;IAInE,WAAW,CAAC,EAAE,MAAM,CAAC;IAIrB,cAAc,CAAC,EAAE,SAAS,CAAC;IAI3B,QAAQ,EAAE,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC,CAAC;IAI/C,gBAAgB,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC;IAEvD,SAAS,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;IAEzC,UAAU,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC;IAE3C,YAAY,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC;IAI/C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maxio-com/react-ui-components",
-  "version": "9.26.0",
+  "version": "9.27.0",
   "description": "React UI components",
   "type": "module",
   "license": "MIT",
@@ -65,5 +65,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d142e871d70bc9f58d2e35904ebef8b00ac307be"
+  "gitHead": "7195ec2e6d3a2162254662d25aa7ff0a56a8d211"
 }

package/typings/index.d.ts

@@ -735,6 +735,9 @@ interface ComboBoxProps<T extends object = object, M extends ComboBoxSelectionMo
     leadingElement?: ReactNode;
     children: ReactNode | ((item: T) => ReactNode);
     renderEmptyState?: ListBoxProps<T>['renderEmptyState'];
+    isLoading?: ListBoxProps<T>['isLoading'];
+    onLoadMore?: ListBoxProps<T>['onLoadMore'];
+    scrollOffset?: ListBoxProps<T>['scrollOffset'];
     className?: string;
 }