@flamingo-stack/openframe-frontend-core 0.0.770 → 0.0.772

package/src/components/tickets/ticket-center.tsx

@@ -24,7 +24,6 @@ import { RefreshCw } from 'lucide-react';
 import { type ReactNode, useCallback, useState } from 'react';
 import { toast as defaultToast } from '../../hooks/use-toast';
 import type { DataSync } from '../../types/data-sync';
-import { cn } from '../../utils/cn';
 import { devSectionAnchorId } from '../../utils/dev-sections/dev-section-param-keys';
 import { ChatTicketItemSkeleton } from '../chat/entity-cards/chat-ticket-item';
 import { useChatIdentity } from '../chat/hooks/use-chat-identity';
@@ -36,7 +35,7 @@ import { Card } from '../ui/card';
 import { DataSyncLine } from '../ui/data-attribution';
 import { LoadingScope, useLoadingScope } from '../ui/loading-scope';
 import { useTicketActions } from './hooks/use-ticket-actions';
-import { useTicketsList } from './hooks/use-tickets-list';
+import { TICKETS_PAGE_SIZE, useTicketsList } from './hooks/use-tickets-list';
 import { TicketOpenForm, type TicketOpenFormProps } from './ticket-open-form';
 import { TicketRow } from './ticket-row';
 import type { AnyTicket, OptimisticTicket, TicketData } from './types';
@@ -46,11 +45,6 @@ import { isOptimistic } from './types';
 const TICKET_CENTER_CLASS = 'flex flex-col gap-6';
 const TICKET_LIST_BLOCK_CLASS = 'flex flex-col gap-2';
 const TICKET_ROW_FRAME_CLASS = 'border-b border-ods-border last:border-b-0';
-/**
- * Ticket rows the list's skeleton draws: what one screen shows under the open-ticket form (an 80px row; the form
- * leaves room for four on a 1440x900 desktop and, stacked, for two on a 390x844 phone).
- */
-const TICKET_LIST_FOLD = { phone: 2, wide: 4 } as const;
 
 export interface TicketCenterProps {
   /** Optional toast override (test-friendly). Defaults to the lib's
@@ -312,18 +306,15 @@ function TicketListHeader({
   );
 }
 
+/** The ticket list while it is read: ONE FULL PAGE of rows (the list reads `TICKETS_PAGE_SIZE` tickets), at every width. */
 function TicketListSkeleton() {
   return (
     <Card className="overflow-hidden">
-      {Array.from({ length: Math.max(TICKET_LIST_FOLD.phone, TICKET_LIST_FOLD.wide) }, (_, i) => (
+      {Array.from({ length: TICKETS_PAGE_SIZE }, (_, i) => (
         <div
           // biome-ignore lint/suspicious/noArrayIndexKey: skeleton rows never reorder
           key={i}
-          className={cn(
-            TICKET_ROW_FRAME_CLASS,
-            i >= TICKET_LIST_FOLD.phone && 'hidden md:block',
-            i >= TICKET_LIST_FOLD.wide && 'md:hidden',
-          )}
+          className={TICKET_ROW_FRAME_CLASS}
         >
           <ChatTicketItemSkeleton />
         </div>

package/src/components/ui/autocomplete.tsx

@@ -102,6 +102,11 @@ interface AutocompleteBaseProps<T = string> {
   loading?: boolean;
   /** Loading text */
   loadingText?: string;
+  /**
+   * Option rows the list draws while `loading`: the options the host reads (its search's limit). Default a typical
+   * count.
+   */
+  loadingRows?: number;
   /**
    * The field itself is read and has not arrived (its value and its options): it draws its skeleton, as in a
    * loading scope. DISTINCT from `loading`, a search in flight under a field that stays up.
@@ -172,8 +177,11 @@ const AUTOCOMPLETE_ANCHOR_HEIGHT_CLASS = 'min-h-11 md:min-h-12';
 /** An option row's frame, read by the rows and by the list's loading state. */
 const AUTOCOMPLETE_OPTION_ROW_CLASS =
   'flex min-h-11 items-center border-b border-ods-border px-[var(--spacing-system-mf)] py-[var(--spacing-system-xsf)] last:border-b-0 md:min-h-12 text-h4';
-/** Option rows the list's loading state draws: the 240px scroller holds five 48px rows. */
-const AUTOCOMPLETE_OPTIONS_FOLD = 5;
+/**
+ * Option rows the list's loading state draws when its host states no `loadingRows`: a typical count. A host that
+ * reads its options with a limit (a server search) passes that limit.
+ */
+const AUTOCOMPLETE_LOADING_ROWS = 5;
 const AUTOCOMPLETE_ANCHOR_SHAPE_CLASS = 'rounded-[6px]';
 
 export interface AutocompleteSkeletonProps {
@@ -214,6 +222,7 @@ function AutocompleteInner<T = string>(props: AutocompleteProps<T>, ref: Forward
     onInputChange,
     loading = false,
     loadingText = 'Loading options',
+    loadingRows = AUTOCOMPLETE_LOADING_ROWS,
     fieldLoading = false,
     creatable = false,
     onCreateOption,
@@ -690,7 +699,7 @@ function AutocompleteInner<T = string>(props: AutocompleteProps<T>, ref: Forward
                 // The options while they are read: the list's own rows, a label bar each (`loadingText` is what a
                 // screen reader hears).
                 <LoadingRegion label={loadingText}>
-                  {Array.from({ length: AUTOCOMPLETE_OPTIONS_FOLD }, (_, i) => (
+                  {Array.from({ length: loadingRows }, (_, i) => (
                     // biome-ignore lint/suspicious/noArrayIndexKey: skeleton rows never reorder
                     <div key={i} className={AUTOCOMPLETE_OPTION_ROW_CLASS} aria-hidden>
                       <TextLineSkeleton type="inherit" className="w-2/3" />

package/src/components/ui/data-table/data-table-body.tsx

@@ -11,6 +11,7 @@ import { DataTableEmpty } from './data-table-empty';
 import { useDataTableLoadMoreStore } from './data-table-load-more';
 import { DataTableRow } from './data-table-row';
 import { DataTableSkeleton, PlaceholderRows, ReservedEmptyState, ROW_STACK_CLASSES } from './data-table-skeleton';
+import { DATA_TABLE_SKELETON_ROWS, dataTablePageSize } from './utils';
 
 export interface DataTableBodyProps<T = unknown> {
   /** Show skeleton rows while `loading` is true and data is empty. */
@@ -19,7 +20,10 @@ export interface DataTableBodyProps<T = unknown> {
   emptyMessage?: string;
   /** Props for the empty state (NoData) shown when there are no rows. Overrides `emptyMessage`. */
   emptyState?: NoDataProps;
-  /** Skeleton row count when loading. Default `10`. */
+  /**
+   * Skeleton rows while loading: ONE FULL PAGE. Default the table's page size (`state.pagination.pageSize`), else
+   * `minRows`, else `DATA_TABLE_SKELETON_ROWS` (a typical count for an unpaged table).
+   */
   skeletonRows?: number;
   /**
    * The loading state announces itself (`LoadingRegion`: aria-busy plus one "Loading results" status).
@@ -101,7 +105,7 @@ export function DataTableBody<T = unknown>({
   loading: loadingProp,
   emptyMessage,
   emptyState,
-  skeletonRows = 10,
+  skeletonRows: skeletonRowsProp,
   loadingRegion = true,
   className,
   rowClassName,
@@ -113,6 +117,8 @@ export function DataTableBody<T = unknown>({
   renderSubRow,
 }: DataTableBodyProps<T>) {
   const table = useDataTableContext<T>();
+  const skeletonRows =
+    skeletonRowsProp ?? dataTablePageSize(table) ?? (minRows && minRows > 0 ? minRows : DATA_TABLE_SKELETON_ROWS);
   // In a page's loading state the body is loading: its rows are the row skeletons.
   const inScope = useLoadingScope();
   const loading = inScope || loadingProp;

package/src/components/ui/data-table/data-table-infinite-footer.tsx

@@ -7,12 +7,16 @@ import { Button } from '../button';
 import { useOptionalDataTableContext } from './data-table';
 import { useDataTableLoadMoreStore } from './data-table-load-more';
 import { DataTableSkeleton, ROW_STACK_CLASSES } from './data-table-skeleton';
+import { dataTablePageSize } from './utils';
 
 export interface DataTableInfiniteFooterProps {
   hasNextPage: boolean;
   isFetchingNextPage: boolean;
   onLoadMore: () => void;
-  /** Skeleton rows shown while fetching. Default `3`. */
+  /**
+   * Skeleton rows shown while the next page is fetched: that page, in full. Default the table's page size
+   * (`state.pagination.pageSize`), else a typical `3`.
+   */
   skeletonRows?: number;
   /**
    * `IntersectionObserver` rootMargin — how far ahead of the sentinel the next
@@ -93,7 +97,7 @@ export function DataTableInfiniteFooter({
   hasNextPage,
   isFetchingNextPage,
   onLoadMore,
-  skeletonRows = 3,
+  skeletonRows: skeletonRowsProp,
   rootMargin = DEFAULT_ROOT_MARGIN,
   loadedCount,
 }: DataTableInfiniteFooterProps) {
@@ -106,6 +110,9 @@ export function DataTableInfiniteFooter({
     onLoadMoreRef.current = onLoadMore;
   });
 
+  const table = useOptionalDataTableContext();
+  const skeletonRows = skeletonRowsProp ?? (table ? dataTablePageSize(table) : undefined) ?? 3;
+
   const loadMore = useDataTableLoadMoreStore();
   const bodyDrawsRows = useSyncExternalStore(loadMore.subscribe, loadMore.getHasRowsBody, getNoBody);
   const requestedRows = isFetchingNextPage ? skeletonRows : 0;
@@ -122,7 +129,7 @@ export function DataTableInfiniteFooter({
   // TAIL (how many rows, and which one is last) rather than the count alone: a
   // search that replaces 40 rows with 20 while a page is in flight ends that
   // fetch with FEWER rows, and that is a new list, not a stalled one.
-  const tableRows = useOptionalDataTableContext()?.getRowModel().rows;
+  const tableRows = table?.getRowModel().rows;
   const progressCount = loadedCount ?? tableRows?.length;
   const lastRowId = tableRows?.[tableRows.length - 1]?.id ?? '';
   const tail = progressCount === undefined ? null : `${progressCount}:${lastRowId}`;

package/src/components/ui/data-table/utils.ts

@@ -107,3 +107,21 @@ export const multiSelectFilterFn: FilterFn<unknown> = (row, columnId, filterValu
   const cellValue = row.getValue(columnId);
   return values.some(v => v === cellValue || String(v) === String(cellValue));
 };
+
+/** Skeleton rows of a table that knows no page size: a typical count for an UNPAGED table. */
+export const DATA_TABLE_SKELETON_ROWS = 10;
+
+/**
+ * The page size a host gave its table (`state.pagination.pageSize`, else `initialState.pagination.pageSize`), or
+ * undefined when it gave none. Read from the OPTIONS, never `getState()`: TanStack fills in a page size of 10 for a
+ * table that has no pagination at all, which is not a page this table loads.
+ */
+export function dataTablePageSize(table: {
+  options: {
+    state?: { pagination?: { pageSize?: number } };
+    initialState?: { pagination?: { pageSize?: number } };
+  };
+}): number | undefined {
+  const size = table.options.state?.pagination?.pageSize ?? table.options.initialState?.pagination?.pageSize;
+  return size && size > 0 ? size : undefined;
+}

package/src/components/ui/search-input.tsx

@@ -26,8 +26,11 @@ import { Tag } from './tag';
 
 /** A result row's frame, read by the rows and by their loading state. */
 const SEARCH_RESULT_ROW_CLASS = 'flex min-h-10 items-center border-b border-ods-border px-3 last:border-b-0';
-/** Rows the results' loading state draws: the dropdown's 320px scroller holds eight 40px rows. */
-const SEARCH_RESULTS_FOLD = 8;
+/**
+ * Rows the results' loading state draws when its host states no `loadingRows`: a typical count. A host whose search
+ * answers a limited number of results passes that limit.
+ */
+const SEARCH_RESULTS_LOADING_ROWS = 8;
 
 // ---------------------------------------------------------------------------
 // Types
@@ -68,6 +71,8 @@ export interface SearchInputProps {
   results?: SearchResult[];
   /** Whether results are loading */
   isLoading?: boolean;
+  /** Result rows drawn while `isLoading`: the results the host's search answers (its limit). Default a typical count. */
+  loadingRows?: number;
   /** Called when a result row is selected.
    *
    *  `modifiers` carries the click event's modifier-key state when the
@@ -172,6 +177,7 @@ export function SearchInput({
   onSubmit,
   results = [],
   isLoading = false,
+  loadingRows = SEARCH_RESULTS_LOADING_ROWS,
   onResultSelect,
   debounceMs = 300,
   renderResult,
@@ -420,7 +426,7 @@ export function SearchInput({
       // The results while they are read: the dropdown's own rows, a title bar each.
       return (
         <LoadingRegion label="Loading results">
-          {Array.from({ length: SEARCH_RESULTS_FOLD }, (_, i) => (
+          {Array.from({ length: loadingRows }, (_, i) => (
             // biome-ignore lint/suspicious/noArrayIndexKey: skeleton rows never reorder
             <div key={i} className={SEARCH_RESULT_ROW_CLASS} aria-hidden>
               <TextLineSkeleton type="h6" className="w-2/3" />

package/src/components/ui/searchable-select.tsx

@@ -17,9 +17,12 @@ const SELECT_ROW_CLASS =
   'flex w-full items-center gap-[var(--spacing-system-xs)] px-[var(--spacing-system-sf)] py-[var(--spacing-system-xs)] text-left';
 const SELECT_TILE_CLASS =
   'flex min-w-0 flex-col items-center justify-center gap-[var(--spacing-system-xxs)] border-b border-r border-ods-border p-[var(--spacing-system-xs)]';
-/** Options the loading state draws: the `max-h-80` (320px) list holds eight 40px rows, or about twelve tiles. */
-const SELECT_ROWS_FOLD = 8;
-const SELECT_TILES_FOLD = 12;
+/**
+ * Options the loading state draws (rows, or tiles in the grid layout) when its host states no `loadingRows`: a
+ * typical count. A host that reads its options with a limit passes that limit.
+ */
+const SELECT_LOADING_ROWS = 8;
+const SELECT_LOADING_TILES = 12;
 
 export interface SearchableSelectOption {
   value: string;
@@ -47,6 +50,8 @@ export interface SearchableSelectProps {
   emptyText?: string;
   loadingText?: string;
   isLoading?: boolean;
+  /** Options drawn while `isLoading`: the options the host reads (its limit). Default a typical count. */
+  loadingRows?: number;
   disabled?: boolean;
   /**
    * Custom trigger node (rendered via Popover.Trigger asChild). When omitted,
@@ -100,6 +105,7 @@ export function SearchableSelect(allProps: SearchableSelectProps) {
     emptyText = 'No results found',
     loadingText = 'Loading options',
     isLoading = false,
+    loadingRows,
     disabled = false,
     trigger,
     id,
@@ -248,12 +254,15 @@ export function SearchableSelect(allProps: SearchableSelectProps) {
               // The options while they are read: the list's own rows (or tiles), a label bar each; `loadingText` is
               // what a screen reader hears.
               <LoadingRegion label={loadingText} className="contents">
-                {Array.from({ length: isGrid ? SELECT_TILES_FOLD : SELECT_ROWS_FOLD }, (_, i) => (
-                  // biome-ignore lint/suspicious/noArrayIndexKey: skeleton rows never reorder
-                  <div key={i} className={isGrid ? SELECT_TILE_CLASS : SELECT_ROW_CLASS} aria-hidden>
-                    <TextLineSkeleton type={isGrid ? 'h6' : 'h4'} className={isGrid ? 'w-full' : 'w-2/3'} />
-                  </div>
-                ))}
+                {Array.from(
+                  { length: loadingRows ?? (isGrid ? SELECT_LOADING_TILES : SELECT_LOADING_ROWS) },
+                  (_, i) => (
+                    // biome-ignore lint/suspicious/noArrayIndexKey: skeleton rows never reorder
+                    <div key={i} className={isGrid ? SELECT_TILE_CLASS : SELECT_ROW_CLASS} aria-hidden>
+                      <TextLineSkeleton type={isGrid ? 'h6' : 'h4'} className={isGrid ? 'w-full' : 'w-2/3'} />
+                    </div>
+                  ),
+                )}
               </LoadingRegion>
             ) : filtered.length === 0 ? (
               <div className={statusClass}>{emptyText}</div>

package/src/components/ui/select.tsx

@@ -2,7 +2,7 @@
 
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { ChevronDown, ChevronUp } from 'lucide-react';
-import { type ComponentPropsWithoutRef, type ComponentRef, type ElementRef, forwardRef } from 'react';
+import { type ComponentPropsWithoutRef, type ComponentRef, type ElementRef, forwardRef, type ReactNode } from 'react';
 import { cn } from '../../utils/cn';
 import { Chevron02DownIcon } from '../icons-v2-generated/arrows/chevron-02-down-icon';
 import { CheckIcon } from '../icons-v2-generated/signs-and-symbols/check-icon';
@@ -154,14 +154,26 @@ SelectLabel.displayName = SelectPrimitive.Label.displayName;
 
 const SelectItem = forwardRef<
   ComponentRef<typeof SelectPrimitive.Item>,
-  ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => (
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Item> & {
+    /**
+     * A second, secondary-coloured line under the label. The row grows to
+     * fit it and both lines wrap, so a sentence longer than the list is read
+     * in full instead of being clipped at the edge. It sits outside
+     * `ItemText`, so the closed trigger mirrors the label alone and typeahead
+     * matches the label alone.
+     */
+    description?: ReactNode;
+  }
+>(({ className, children, description, ...props }, ref) => (
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      'flex h-11 w-full cursor-pointer select-none items-center justify-between border-b border-ods-border px-4 last:border-b-0 md:h-12',
+      'flex w-full cursor-pointer select-none items-center justify-between gap-2 border-b border-ods-border px-4 last:border-b-0',
       // Typography - match trigger
-      'whitespace-nowrap text-h4',
+      'text-h4',
+      description == null
+        ? 'h-11 whitespace-nowrap md:h-12'
+        : 'min-h-11 whitespace-normal py-[var(--spacing-system-xs)] md:min-h-12',
       // Hover state with visible background change
       'outline-none hover:bg-ods-bg-hover data-[highlighted]:bg-ods-bg-surface',
       'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
@@ -170,8 +182,17 @@ const SelectItem = forwardRef<
     )}
     {...props}
   >
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-    <SelectPrimitive.ItemIndicator>
+    {description == null ? (
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    ) : (
+      // min-w-0 lets the column shrink below its longest line, which is what
+      // makes the lines wrap instead of pushing past the list's edge.
+      <span className="flex min-w-0 flex-col text-left">
+        <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+        <span className="text-ods-text-secondary text-h6">{description}</span>
+      </span>
+    )}
+    <SelectPrimitive.ItemIndicator className="shrink-0">
       <CheckIcon className="text-ods-accent" size={20} />
     </SelectPrimitive.ItemIndicator>
   </SelectPrimitive.Item>

package/src/components/ui/table/table-skeleton.tsx

@@ -22,8 +22,8 @@ const ROW_HEIGHT_MOBILE = 'h-[66px]';
 
 /** @deprecated Use `DataTableSkeleton` from `data-table` instead. */
 /**
- * Rows a table's skeleton draws when its host states no count: one screen of rows under a page's header (a 68px row
- * card and its 8px gap; about ten fit under the header of a 1440x900 screen, nine of a phone's 66px rows).
+ * Rows a table's skeleton draws when it knows no page size: a typical count for an UNPAGED table. A table with page
+ * pagination draws its `pageSize` instead (one full page, at every width), and a host may state `skeletonRows`.
  */
 export const TABLE_SKELETON_ROWS = 10;
 

package/src/components/ui/table/table.tsx

@@ -104,7 +104,7 @@ export function Table<T = TableRowData>({
   rowKey,
   loading: loadingProp = false,
   emptyMessage,
-  skeletonRows = TABLE_SKELETON_ROWS,
+  skeletonRows: skeletonRowsProp,
   minRows,
   emptyState,
   keepHeightWhenEmpty,
@@ -137,6 +137,9 @@ export function Table<T = TableRowData>({
   animateRowReorder,
   actionsColumnWidth,
 }: TableProps<T>) {
+  // A loading table draws ONE FULL PAGE of rows: the host's count, else its page pagination's page size, else a
+  // typical count for an unpaged table.
+  const skeletonRows = skeletonRowsProp ?? pagePagination?.pageSize ?? TABLE_SKELETON_ROWS;
   // In a page's loading state the table is loading: its header real, its rows the row skeletons.
   const loading = useLoadingScope() || loadingProp;
   // Opt-in row-reorder animation: framer-motion is loaded lazily (its own chunk)

package/src/components/ui/table/types.ts

@@ -109,7 +109,8 @@ export interface TableProps<T = TableRowData> {
   emptyMessage?: string;
 
   // Skeleton configuration
-  skeletonRows?: number; // Number of skeleton rows to show when loading (default: 10)
+  /** Skeleton rows while loading: one full page. Default `pagePagination.pageSize`, else `TABLE_SKELETON_ROWS`. */
+  skeletonRows?: number;
   /**
    * Keep the table height stable by padding with invisible rows when the page
    * is short, AND by reserving the same slots (empty state centred over them)

package/src/types/category.ts

@@ -31,6 +31,11 @@ export interface RealCategoryCardProps {
   subcategoryCount?: number;
   vendors?: Vendor[];
   isLoading?: boolean;
+  /**
+   * The vendors the host reads for the card's strip (its fetch limit): the vendor icons the loading card draws.
+   * Default `CATEGORIES_CART_SKELETON_VENDORS`.
+   */
+  vendorLimit?: number;
   isLoadingVendorCount?: boolean;
   isLoadingSubcategoryCount?: boolean;
   className?: string;

package/src/types/logs.types.ts

@@ -21,6 +21,8 @@ export interface LogsListProps {
   showConnector?: boolean;
   onLogClick?: (log: LogEntry) => void;
   loading?: boolean;
+  /** Rows the loading state draws: the logs the host reads (its page size or limit). Default a typical count. */
+  skeletonRows?: number;
   emptyMessage?: string;
   className?: string;
 }