@maxio-com/react-ui-components 9.24.1 → 9.25.0

package/dist/skills/maxio-react/references/components-listbox.md

@@ -99,6 +99,19 @@ selection when all options are selected, and updates controlled and uncontrolled
 state through the same `onSelectionChange` API. When `disallowEmptySelection` is
 set, the toggle is disabled after all options are selected.
 
+## Async Loading
+
+Set `onLoadMore` on `ListBox` to load another page when the user scrolls near the
+bottom, and set `isLoading` while options are loading. ListBox manages the loading
+item internally and displays a small spinner for both initial loading and
+pagination. Use `scrollOffset` to adjust how early the next page loads.
+
+Pass options through `items` with a child render function, or use static children.
+Give the listbox a bounded height with scrolling, as shown in the **Async Loading**
+story. Omit `onLoadMore` when no pages remain, or use a pagination callback that
+stops requesting pages at the end (as `useAsyncList` does). `renderEmptyState`
+provides the message when loading finishes without results.
+
 ## Imports
 
 ```tsx
@@ -217,3 +230,43 @@ const EmptyState = () => (
   </ListBox>
 );
 ```
+
+### Async Loading
+
+Load options in pages as users scroll. This example simulates a delayed API
+with 60 options, loading 20 at a time without an external network request.
+
+```tsx
+const AsyncLoading = () => {
+  const list = useAsyncList<{ id: number; name: string }>({
+    async load({ cursor }) {
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+
+      const start = Number(cursor ?? 0);
+      const end = start + 20;
+
+      return {
+        items: Array.from({ length: 20 }, (_, index) => ({
+          id: start + index + 1,
+          name: `Option ${start + index + 1}`,
+        })),
+        cursor: end < 60 ? String(end) : undefined,
+      };
+    },
+  });
+
+  return (
+    <ListBox
+      aria-label="Async options"
+      selectionMode="single"
+      items={list.items}
+      isLoading={list.isLoading}
+      onLoadMore={list.loadMore}
+      style={{ height: 240, width: 280, overflow: 'auto' }}
+      renderEmptyState={() => 'No results found.'}
+    >
+      {(item) => <ListBox.Item id={item.id}>{item.name}</ListBox.Item>}
+    </ListBox>
+  );
+};
+```

package/dist/temporary-typings/src/components/ListBox/ListBox.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { ListBoxHeaderProps, ListBoxItemProps, ListBoxProps, ListBoxSectionProps } from './types';
 declare const ListBoxRoot: {
-    ({ className, render, showSelectAll, ...props }: ListBoxProps): React.JSX.Element;
+    <T extends object>({ className, children, items, render, renderEmptyState, isLoading, onLoadMore, scrollOffset, showSelectAll, ...props }: ListBoxProps<T>): React.JSX.Element;
     displayName: string;
 };
 declare const ListBoxItem: {

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

@@ -1 +1 @@
-{"version":3,"file":"ListBox.d.ts","sourceRoot":"","sources":["../../../../../src/components/ListBox/ListBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,KAAK,EACV,kBAAkB,EAClB,gBAAgB,EAChB,YAAY,EACZ,mBAAmB,EACpB,MAAM,SAAS,CAAC;AAGjB,QAAA,MAAM,WAAW;qDAKd,YAAY;;CAsDd,CAAC;AAKF,QAAA,MAAM,WAAW;8BAA6B,gBAAgB;;CAyB7D,CAAC;AAKF,QAAA,MAAM,cAAc;8BAA6B,mBAAmB;;CAKnE,CAAC;AAKF,QAAA,MAAM,aAAa;8BAA6B,kBAAkB;;CAEjE,CAAC;AAIF,MAAM,MAAM,gBAAgB,GAAG,OAAO,WAAW,GAAG;IAClD,IAAI,EAAE,OAAO,WAAW,CAAC;IACzB,OAAO,EAAE,OAAO,cAAc,CAAC;IAC/B,MAAM,EAAE,OAAO,aAAa,CAAC;CAC9B,CAAC;AAEF,QAAA,MAAM,OAAO,EAIP,gBAAgB,CAAC;AAEvB,eAAe,OAAO,CAAC"}
+{"version":3,"file":"ListBox.d.ts","sourceRoot":"","sources":["../../../../../src/components/ListBox/ListBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B,OAAO,KAAK,EACV,kBAAkB,EAClB,gBAAgB,EAChB,YAAY,EACZ,mBAAmB,EACpB,MAAM,SAAS,CAAC;AAGjB,QAAA,MAAM,WAAW;KAAI,CAAC,SAAS,MAAM,0HAWlC,YAAY,CAAC,CAAC,CAAC;;CA0EjB,CAAC;AAKF,QAAA,MAAM,WAAW;8BAA6B,gBAAgB;;CAyB7D,CAAC;AAKF,QAAA,MAAM,cAAc;8BAA6B,mBAAmB;;CAKnE,CAAC;AAKF,QAAA,MAAM,aAAa;8BAA6B,kBAAkB;;CAEjE,CAAC;AAIF,MAAM,MAAM,gBAAgB,GAAG,OAAO,WAAW,GAAG;IAClD,IAAI,EAAE,OAAO,WAAW,CAAC;IACzB,OAAO,EAAE,OAAO,cAAc,CAAC;IAC/B,MAAM,EAAE,OAAO,aAAa,CAAC;CAC9B,CAAC;AAEF,QAAA,MAAM,OAAO,EAIP,gBAAgB,CAAC;AAEvB,eAAe,OAAO,CAAC"}

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

@@ -1,6 +1,9 @@
-import type { HeaderProps as AriaHeaderProps, ListBoxItemProps as AriaListBoxItemProps, ListBoxProps as AriaListBoxProps, ListBoxSectionProps as AriaListBoxSectionProps } from 'react-aria-components';
+import type { HeaderProps as AriaHeaderProps, ListBoxItemProps as AriaListBoxItemProps, ListBoxLoadMoreItemProps as AriaListBoxLoadMoreItemProps, ListBoxProps as AriaListBoxProps, ListBoxSectionProps as AriaListBoxSectionProps } from 'react-aria-components';
 export type ListBoxProps<T extends object = object> = AriaListBoxProps<T> & {
     showSelectAll?: boolean;
+    isLoading?: boolean;
+    onLoadMore?: AriaListBoxLoadMoreItemProps['onLoadMore'];
+    scrollOffset?: AriaListBoxLoadMoreItemProps['scrollOffset'];
 };
 export type ListBoxItemProps = AriaListBoxItemProps;
 export type ListBoxSectionProps<T extends object = object> = AriaListBoxSectionProps<T>;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/ListBox/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,WAAW,IAAI,eAAe,EAC9B,gBAAgB,IAAI,oBAAoB,EACxC,YAAY,IAAI,gBAAgB,EAChC,mBAAmB,IAAI,uBAAuB,EAC/C,MAAM,uBAAuB,CAAC;AAE/B,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,gBAAgB,CAAC,CAAC,CAAC,GAAG;IAM1E,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AACF,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,CAAC;AACpD,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IACvD,uBAAuB,CAAC,CAAC,CAAC,CAAC;AAC7B,MAAM,MAAM,kBAAkB,GAAG,eAAe,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/ListBox/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,WAAW,IAAI,eAAe,EAC9B,gBAAgB,IAAI,oBAAoB,EACxC,wBAAwB,IAAI,4BAA4B,EACxD,YAAY,IAAI,gBAAgB,EAChC,mBAAmB,IAAI,uBAAuB,EAC/C,MAAM,uBAAuB,CAAC;AAE/B,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,gBAAgB,CAAC,CAAC,CAAC,GAAG;IAM1E,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,UAAU,CAAC,EAAE,4BAA4B,CAAC,YAAY,CAAC,CAAC;IAExD,YAAY,CAAC,EAAE,4BAA4B,CAAC,cAAc,CAAC,CAAC;CAC7D,CAAC;AACF,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,CAAC;AACpD,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IACvD,uBAAuB,CAAC,CAAC,CAAC,CAAC;AAC7B,MAAM,MAAM,kBAAkB,GAAG,eAAe,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maxio-com/react-ui-components",
-  "version": "9.24.1",
+  "version": "9.25.0",
   "description": "React UI components",
   "type": "module",
   "license": "MIT",
@@ -65,5 +65,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "57a63363b591a6d87a5e1c289159da6b1a4a55e7"
+  "gitHead": "ad1647de4f704ba3bee3e22932056ebb46dd6b76"
 }

package/typings/index.d.ts

@@ -1,7 +1,7 @@
 import React$1, { ReactNode, HTMLAttributes, LiHTMLAttributes, ButtonHTMLAttributes, AnchorHTMLAttributes, RefObject, FC, ElementType, InputHTMLAttributes } from 'react';
 import { RowData, Row, Table, ExpandedState, RowSelectionState, SortingState, TableOptions } from '@tanstack/react-table';
 export { createColumnHelper } from '@tanstack/react-table';
-import { PopoverProps as PopoverProps$1, ToggleButtonGroupProps, ToggleButtonProps, ListBoxProps as ListBoxProps$1, ListBoxItemProps as ListBoxItemProps$1, ListBoxSectionProps as ListBoxSectionProps$1, HeaderProps, ComboBoxProps as ComboBoxProps$1, ValidationResult, TextFieldProps as TextFieldProps$1, DateValue, CalendarProps as CalendarProps$1, RangeCalendarProps as RangeCalendarProps$1 } from 'react-aria-components';
+import { PopoverProps as PopoverProps$1, ToggleButtonGroupProps, ToggleButtonProps, ListBoxProps as ListBoxProps$1, ListBoxLoadMoreItemProps, ListBoxItemProps as ListBoxItemProps$1, ListBoxSectionProps as ListBoxSectionProps$1, HeaderProps, ComboBoxProps as ComboBoxProps$1, ValidationResult, TextFieldProps as TextFieldProps$1, DateValue, CalendarProps as CalendarProps$1, RangeCalendarProps as RangeCalendarProps$1 } from 'react-aria-components';
 export { DialogTrigger, Pressable } from 'react-aria-components';
 import * as _floating_ui_react_dom_interactions from '@floating-ui/react-dom-interactions';
 import { MotionProps } from 'framer-motion';
@@ -693,13 +693,16 @@ declare const CheckboxGroup: ({ helperText, className, errorMessage, children, d
 
 type ListBoxProps<T extends object = object> = ListBoxProps$1<T> & {
     showSelectAll?: boolean;
+    isLoading?: boolean;
+    onLoadMore?: ListBoxLoadMoreItemProps['onLoadMore'];
+    scrollOffset?: ListBoxLoadMoreItemProps['scrollOffset'];
 };
 type ListBoxItemProps = ListBoxItemProps$1;
 type ListBoxSectionProps<T extends object = object> = ListBoxSectionProps$1<T>;
 type ListBoxHeaderProps = HeaderProps;
 
 declare const ListBoxRoot: {
-    ({ className, render, showSelectAll, ...props }: ListBoxProps): React$1.JSX.Element;
+    <T extends object>({ className, children, items, render, renderEmptyState, isLoading, onLoadMore, scrollOffset, showSelectAll, ...props }: ListBoxProps<T>): React$1.JSX.Element;
     displayName: string;
 };
 declare const ListBoxItem: {