@ahrowe/ui 0.50.0 → 0.51.0

package/dist/types/common/chatMessageList/chatMessageList.types.d.ts

@@ -15,7 +15,7 @@ export interface ChatMessageListHandle {
 export interface ChatMessageListProps extends HtmlProps<HTMLDivElement> {
     /** `ChatMessage`s, and anything between them: a `Divider` with a date, a typing indicator. Oldest first. */
     children?: ReactNode;
-    /** Loads older messages when the user scrolls to the top. Prepend them; the view stays where it was. Leave it out once there are no more. */
+    /** Loads older messages as the user nears the top. Prepend them; the view stays where it was. Leave it out once there are no more. */
     onLoadMore?: () => Promise<void>;
     ref?: Ref<ChatMessageListHandle>;
     /** Overrides the text ChatMessageList renders of its own. Merged per key. */

package/dist/types/common/dropdown/dropdown.types.d.ts

@@ -8,7 +8,7 @@ export interface DropdownItem {
     disabled?: boolean;
 }
 export type DropdownSlots = 'root' | 'label' | 'field' | 'control' | 'icon' | 'placeholder' | 'list' | 'option';
-export interface DropdownProps extends Omit<HtmlProps, 'onFocus' | 'onBlur' | 'onMouseEnter' | 'onMouseLeave'> {
+export interface DropdownProps extends Omit<HtmlProps, 'onFocus' | 'onBlur' | 'onMouseEnter' | 'onMouseLeave' | 'onScroll'> {
     formValidator?: FormValidator | null;
     onMouseEnter?: ((event: React.MouseEvent) => void) | null;
     onMouseLeave?: ((event: React.MouseEvent) => void) | null;
@@ -27,7 +27,8 @@ export interface DropdownProps extends Omit<HtmlProps, 'onFocus' | 'onBlur' | 'o
     isRow?: boolean;
     disabled?: boolean;
     readOnly?: boolean;
-    onScroll?: () => Promise<void>;
+    /** Loads more items as the end of the open list comes near. Pass `undefined` once there are no more. */
+    onLoadMore?: () => Promise<void>;
     onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     dropdownLabel?: string;
     isDropdownListWider?: boolean;

package/dist/types/common/infiniteBlock/useInfiniteScroll.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-export declare function useInfiniteScroll(containerRef: React.RefObject<HTMLDivElement | null>, onScroll: () => Promise<void>, disabled: boolean): {
+export declare function useInfiniteScroll(containerRef: React.RefObject<HTMLDivElement | null>, onLoadMore: (() => Promise<void>) | undefined): {
     isLoading: boolean;
     sentinelRef: React.RefObject<HTMLDivElement | null>;
 };

package/docs/ChatMessageList.md

@@ -83,12 +83,12 @@ button while it does:
   bottom by hand does the same.
 - **After sending**, call `scrollToBottom()` on the handle, or a user who sent from further up
   never sees their own message arrive.
-- **Older messages.** With `onLoadMore`, reaching the top calls it and shows a loader there.
+- **Older messages.** With `onLoadMore`, nearing the top calls it and shows a loader there.
   Prepend what it loads; the message that was at the top stays exactly where it was, at the very
   top too, where the browser's own scroll anchoring does nothing and Safari has none at all. It is
-  called again while the loaded page still leaves the top in view. If it rejects, it is called
-  again after three seconds if the top is still in view, or whenever the user next scrolls there.
-  Pass `undefined` once there is nothing older.
+  called again while the loaded page still leaves the top near, but not after one that added
+  nothing. If it rejects, it is called again after three seconds if the top is still near, or
+  whenever the user next scrolls there. Pass `undefined` once there is nothing older.
 
 **Sizing.** The list scrolls itself and fills the height it is given: `flex: 1` in a column, as
 above, or a `height`. A conversation shorter than the list sits at the bottom, by the composer. To
@@ -99,7 +99,7 @@ start at the top instead, as an AI chat often does: `styles={{ content: { margin
 | Prop | Type | Description |
 |------|------|-------------|
 | `children` | `ReactNode` | Messages, oldest first, and anything between them: a `Divider` with a date, a typing indicator |
-| `onLoadMore` | `() => Promise<void>` | Loads older messages when the top comes into view, see above |
+| `onLoadMore` | `() => Promise<void>` | Loads older messages as the top comes near, see above |
 | `ref` | `Ref<ChatMessageListHandle>` | `scrollToBottom()`: back to the newest message, smoothly unless the user prefers reduced motion, and following again |
 
 **Accessibility:** the scrolling element is a `role="log"`, which screen readers announce

package/docs/Dropdown.md

@@ -36,13 +36,16 @@ const statusValidator = new FormValidator('', [Validators.required()]);
 // Bottom sheet on small touch screens, anchored to the input everywhere else
 <Dropdown label="Status" items={items} value={status} onChange={onChange} presentation={Presentation.Auto} />
 
-// Infinite scroll support
+// Infinite scroll: more items as the end of the open list comes near
 <Dropdown
   items={items}
-  onScroll={async () => { await loadMoreItems(); }}
+  onLoadMore={hasMore ? loadMoreItems : undefined}
 />
 ```
 
+Loading on scroll suits a list people browse. To find one entry among hundreds, typing beats
+scrolling: InputDropdown filters as the user types.
+
 **Key props:**
 
 | Prop | Type | Description |
@@ -57,7 +60,7 @@ const statusValidator = new FormValidator('', [Validators.required()]);
 | `disabled` | `boolean` | Greys the field out and prevents interaction |
 | `readOnly` | `boolean` | Locks the selection without the disabled styling — the field keeps its normal appearance and stays focusable, but the menu won't open and the value can't change (the chevron is hidden). Default `false` |
 | `placeholder` | `string` | Placeholder when no selection |
-| `onScroll` | `() => Promise<void>` | Load more on list scroll |
+| `onLoadMore` | `() => Promise<void>` | Loads more items as the end of the open list comes near, with a spinner meanwhile. Append what it loads. Called again while the end stays near, until a load appends nothing; pass `undefined` once there are no more to save that last call. A rejected load is tried again after three seconds |
 | `useMatLabelStyle` | `boolean` | Material-style floating label |
 | `presentation` | `Presentation` | Where the list opens: anchored to the input (`Default`), always a bottom sheet, or a sheet only on a small touch screen. Imported from the same package: `import { Presentation } from '@ahrowe/ui'` |
 | `alwaysFloatLabel` | `boolean` | Keep the material label floated in the border notch even when nothing is selected, so an empty dropdown reads as blank instead of showing the label as if it were the selected value. Only applies with `useMatLabelStyle` (default) |
@@ -87,3 +90,14 @@ outside (a wrapper, a grid column, `style={{ maxWidth: 240 }}`) rather than expe
 to the label: everything inside is absolutely positioned, so it has no width of its own to fall back on.
 
 **Slots:** `root` `label` `field` `control` `icon` `placeholder` `list` `option`
+
+## Migration from `onScroll`
+
+Before 0.51 the load-more callback was `onScroll`, and it was never called. TypeScript points at
+every use:
+
+| Before | After |
+|--------|-------|
+| `onScroll={…}` | `onLoadMore={…}` |
+
+Loading now actually happens, so pass `undefined` once there is nothing more to load.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ahrowe/ui",
-  "version": "0.50.0",
+  "version": "0.51.0",
   "description": "A React UI component library with theming, CSS Modules, and TypeScript support",
   "keywords": [
     "agent",