@commercelayer/app-elements 7.13.0 → 7.15.0

package/dist/ui/atoms/Stack.d.ts

@@ -1,9 +1,55 @@
 import { JSX, ReactNode } from 'react';
+export type StackSize = "regular" | "small";
 export interface StackProps {
     children: ReactNode;
+    /**
+     * How dense the row is.
+     *
+     * `regular` keeps the page-level rhythm. `small` tightens the padding and, from
+     * `@xl` up — where the cells sit side by side — sends the trailing cell to the
+     * right edge; stacked, every cell still reads from the left. `StackCell` takes its
+     * type sizes from this as well.
+     *
+     * ⚠️ Give a `small` row **two cells**. The pair is what the alignment is built
+     * for: one cell reading from the left edge, one from the right. A third cell
+     * lands in the middle with nothing to align to, so more facts go in further
+     * `Stack`s below — consecutive ones merge their borders and read as one block.
+     * A lone cell is fine as the remainder of an odd count; it stays left-aligned.
+     *
+     * @example
+     * ```jsx
+     * <Stack size='small'>
+     *   <StackCell label='Frequency'>Monthly</StackCell>
+     *   <StackCell label='Last run'>Mar 15, 2024</StackCell>
+     * </Stack>
+     * <Stack size='small'>
+     *   <StackCell label='Source order'>#1234</StackCell>
+     *   <StackCell label='Customer'>customer@commercelayer.io</StackCell>
+     * </Stack>
+     * ```
+     */
+    size?: StackSize;
 }
-declare function Stack({ children, ...props }: StackProps): JSX.Element;
+declare function Stack({ children, size, ...props }: StackProps): JSX.Element;
 declare namespace Stack {
     var displayName: string;
 }
-export { Stack };
+export interface StackCellProps {
+    /** Muted caption, above the value. */
+    label: string;
+    /** The value. When empty it renders as a dash, so the row keeps its grid. */
+    children?: ReactNode;
+    /** Overrides the size inherited from the surrounding `Stack`. */
+    size?: StackSize;
+}
+/**
+ * One cell of a `Stack`: a muted label with its value underneath.
+ *
+ * The type sizes and the gap follow the `Stack`'s `size`, so a `small` row is small
+ * throughout without every call site restating it.
+ */
+declare function StackCell({ label, children, size }: StackCellProps): JSX.Element;
+declare namespace StackCell {
+    var displayName: string;
+}
+export { Stack, StackCell };

package/dist/ui/atoms/Table/Table.d.ts

@@ -1,5 +1,13 @@
 import { default as React } from 'react';
 export interface TableProps {
+    /**
+     * Column definitions (`<col>` elements), rendered before the header.
+     *
+     * This is where column widths belong when the table lays out with
+     * `table-layout: fixed`: widths declared on the header row are lost as soon as
+     * the header is hidden, while a `colgroup` holds regardless.
+     */
+    colgroup?: React.ReactNode;
     thead?: React.ReactNode;
     className?: string;
     variant?: "boxed";

package/dist/ui/atoms/Tabs.d.ts

@@ -38,6 +38,14 @@ export interface TabProps {
      * This is the tab name used to render the Tab Navigation on top
      */
     name: string;
+    /**
+     * Draws a vertical rule before this tab in the navigation, to set the tabs that
+     * follow apart from the ones before — e.g. to separate the states an order moves
+     * through from the shelves it can be put on (carts, archive).
+     *
+     * Ignored on the first rendered tab, where there is nothing to separate.
+     */
+    separatorBefore?: boolean;
     /**
      * Tab Panel content
      */

package/dist/ui/atoms/VisibilityTrigger.d.ts

@@ -0,0 +1,19 @@
+import { default as React, JSX } from 'react';
+export interface VisibilityTriggerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Grows or shrinks the area that counts as visible, e.g. `"200px"` to start
+     * loading before the element actually reaches the viewport.
+     */
+    rootMargin?: string;
+    /** Invoked whenever the element enters or leaves the viewport. */
+    callback: (entry: IntersectionObserverEntry) => void;
+    /** When `false` the element still renders, but is not observed. */
+    enabled: boolean;
+}
+/**
+ * Renders an empty element and reports when it scrolls into view, so callers
+ * can load the next page of a long list as the user approaches the end of it.
+ *
+ * Place it after the last item you have rendered.
+ */
+export declare function VisibilityTrigger({ rootMargin, enabled, callback, className, ...rest }: VisibilityTriggerProps): JSX.Element;

package/dist/ui/atoms/VisibilityTrigger.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui/composite/Address.d.ts

@@ -23,6 +23,14 @@ export interface AddressProps {
      * The implemented method get triggered every time the edit button is clicked.
      */
     onEdit?: () => void;
+    /**
+     * When set, the address can be deleted.
+     *
+     * With both actions the two move into a `…` menu, as everywhere else a row
+     * carries more than one action; with only `onEdit` the pencil stays, since a
+     * menu holding a single item is a click for nothing.
+     */
+    onDelete?: () => void;
 }
 /**
  * Renders an all-in-one visualization to deal with a given address
@@ -48,6 +56,7 @@ export declare const Address: import('../atoms/SkeletonTemplate').SkeletonTempla
      */
      | undefined;
     onEdit?: (() => void) | undefined;
+    onDelete?: (() => void) | undefined;
     delayMs?: number | undefined;
     isLoading?: boolean | undefined;
 }>;

package/dist/ui/composite/ListDetailsItem.d.ts

@@ -26,8 +26,21 @@ export interface ListDetailsItemProps {
      * Specify `none` to remove side gutter
      */
     gutter?: "none";
+    /**
+     * Where the row is rendered, which sets how it uses the width it has.
+     *
+     * - `"default"` — stacked on a phone, label and value side by side from `md` up.
+     * - `"sidebar"` — the narrow column: from `lg` up (where `PageLayout` splits into
+     *   two columns) the row stays stacked and drops its divider, since 380px is not
+     *   enough for two columns and the gaps read better than lines. Below that it is a
+     *   full-width row like any other, so it renders as `"default"`.
+     *
+     * Inferred from where the row sits — `PageLayout`'s sidebar slot reports
+     * `"sidebar"` — so pass it only to force the other rendering.
+     */
+    surface?: "default" | "sidebar";
 }
-export declare function ListDetailsItem({ label, children, isLoading, border, gutter, childrenAlign, ...rest }: ListDetailsItemProps): JSX.Element;
+export declare function ListDetailsItem({ label, children, isLoading, border, gutter, childrenAlign, surface, ...rest }: ListDetailsItemProps): JSX.Element;
 export declare namespace ListDetailsItem {
     var displayName: string;
 }

package/dist/ui/composite/PageLayout.d.ts

@@ -7,54 +7,71 @@ export type PageLayoutProps = Pick<PageHeadingProps, "title" | "description" | "
      * Page content
      */
     children: ReactNode;
+    /**
+     * Page-level notices, rendered full width between the heading and the content.
+     *
+     * For what is true of the resource as a whole — "generated via API", "pending
+     * because it has no usable payment method", a failed purchase — rather than of
+     * one section. Read before anything else, and spanning the sidebar too, since
+     * they are about the page and not about its main column.
+     *
+     * Pass the `Alert`s themselves: the spacing around them belongs here, so the
+     * gap stays the same whether a page shows one, two or none.
+     *
+     * @example
+     * ```jsx
+     * <PageLayout
+     *   title='Promotion'
+     *   alert={viaApi && <Alert status='info'>Generated via API.</Alert>}
+     * >
+     * ```
+     */
+    alert?: ReactNode;
     /**
      * Secondary content, rendered in a column beside `children` on large screens
      * and stacked below it on smaller ones.
      *
      * Meant for details pages, where the supporting information of a resource
      * (customer, addresses, tags, metadata, …) sits next to its main content.
-     * Only the structure is provided: wrap the content in a `Card` with a
-     * `Section` per block to get the look used by the dashboard.
+     * Pass one `Section` per block: the column's card is drawn here, so the slot
+     * takes the blocks themselves and no wrapper of its own.
      *
      * Best paired with `fullWidth`, since the default content width leaves too
      * little room for two columns.
      *
+     * Pair it with `gap="only-top"` and open `children` with a `Spacer top="14"`:
+     * the card is aligned to that spacer, and the heading's default bottom gap
+     * would otherwise be added on top of it.
+     *
      * @example
      * ```jsx
      * <PageLayout
      *   title='Order #1234'
      *   fullWidth
+     *   gap='only-top'
      *   sidebar={
-     *     <Card>
+     *     <>
      *       <Section title='Customer'>...</Section>
-     *       <Section title='Addresses'>...</Section>
-     *     </Card>
+     *       <Spacer top='10'>
+     *         <Section title='Addresses'>...</Section>
+     *       </Spacer>
+     *     </>
      *   }
      * >
-     *   <OrderSummary />
+     *   <Spacer top='14'>
+     *     <OrderSummary />
+     *   </Spacer>
      * </PageLayout>
      * ```
      */
     sidebar?: ReactNode;
-    /**
-     * Tail of the main content, rendered below `children` on large screens and
-     * below the `sidebar` once the layout collapses to a single column.
-     *
-     * Use it for sections that should stay last no matter the width, such as a
-     * timeline: `children` and `sidebar` alone would push the sidebar to the very
-     * bottom of the page when stacked.
-     *
-     * @example
-     * ```jsx
-     * <PageLayout sidebar={<Card>…</Card>} afterSidebar={<Timeline />}>
-     *   <OrderSummary />
-     * </PageLayout>
-     * ```
-     */
-    afterSidebar?: ReactNode;
     /**
      * When mode is `test`, it will render a `TEST DATA` Badge to inform user api is working in test mode.
      * Only if app is standalone mode.
+     *
+     * Defaults to the mode of the current token, so a page gets the badge without
+     * having to pass anything: forgetting it is invisible in the dashboard, where
+     * the badge is suppressed anyway, and only shows up standalone.
      */
     mode?: "test" | "live";
     /**
@@ -82,12 +99,13 @@ export declare const PageLayout: import('../atoms/SkeletonTemplate').SkeletonTem
         label: string;
         onClick: () => void;
         icon?: "x" | "arrowLeft";
+        variant?: "inline" | "button";
     } | undefined;
     minHeight?: boolean | undefined;
     fullWidth?: boolean | undefined;
     children: ReactNode;
+    alert?: ReactNode;
     sidebar?: ReactNode;
-    afterSidebar?: ReactNode;
     mode?: "test" | "live"
     /**
      * Optional prop to enable scroll to top behavior on location change
@@ -106,12 +124,13 @@ export declare const PageLayout: import('../atoms/SkeletonTemplate').SkeletonTem
         label: string;
         onClick: () => void;
         icon?: "x" | "arrowLeft";
+        variant?: "inline" | "button";
     } | undefined;
     minHeight?: boolean | undefined;
     fullWidth?: boolean | undefined;
     children: ReactNode;
+    alert?: ReactNode;
     sidebar?: ReactNode;
-    afterSidebar?: ReactNode;
     mode?: "test" | "live"
     /**
      * Optional prop to enable scroll to top behavior on location change

package/dist/ui/composite/PageLoading.d.ts

@@ -0,0 +1,35 @@
+export interface PageLoadingProps {
+    /**
+     * Milliseconds to wait before the spinner appears. A page that resolves faster
+     * than this shows no indicator at all, instead of a flash.
+     * @default 400
+     */
+    delayMs?: number;
+    /**
+     * Match the page being waited for, so its content does not shift sideways once
+     * it arrives.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Renders the test/live banner of the page being waited for, when it is known.
+     */
+    mode?: "test" | "live";
+}
+/**
+ * Placeholder for a page that has not loaded yet.
+ *
+ * It draws only what is true before the page is known: the frame and the band the
+ * title will occupy, so nothing jumps when the real page arrives, plus a spinner.
+ * Deliberately no fake rows, cards or search bars —
+ * a placeholder that mimics content has to be kept in step with every screen it
+ * stands in for, and silently starts lying the moment one of them changes.
+ *
+ * For loading *within* a page, where the shape is known, use `SkeletonTemplate`
+ * around the real components instead: it renders the actual markup, so it cannot
+ * drift.
+ */
+export declare function PageLoading({ delayMs, fullWidth, mode, }: PageLoadingProps): React.JSX.Element;
+export declare namespace PageLoading {
+    var displayName: string;
+}

package/dist/ui/composite/PageLoading.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui/composite/PageSkeleton.d.ts

@@ -7,6 +7,12 @@ import { JSX } from 'react';
  * - list of items.
  *
  * <span type='info'>You can use this component to display generic loading UI when you can't rely on single SkeletonTemplate blocks.</span>
+ *
+ * @deprecated Use `PageLoading` instead. The elements drawn here have to be kept in
+ * step with every page this stands in for, and they no longer match: apps render
+ * tables, not a search bar over a list of items. `PageLoading` draws only the frame
+ * and a spinner, so it cannot drift. For loading *within* a page, where the shape is
+ * known, wrap the real components in `SkeletonTemplate`.
  **/
 declare function PageSkeleton(): JSX.Element;
 declare namespace PageSkeleton {

package/dist/ui/composite/Routes/LoadingPage.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -49,6 +49,15 @@ export interface InputSelectProps extends InputWrapperBaseProps {
      * When `true` it's possible to type to narrow down the options
      */
     isSearchable?: boolean;
+    /**
+     * How tall the control is.
+     *
+     * `small` (36px) lines it up with the other controls of a toolbar row — the
+     * search field and the buttons beside it. Otherwise the regular 44px of a form
+     * field.
+     * @default 'regular'
+     */
+    size?: "regular" | "small";
     /**
      * Allow to select multiple values
      */
@@ -110,6 +119,14 @@ export interface InputSelectProps extends InputWrapperBaseProps {
      * **This option is only available when `loadAsyncValues` is provided.**
      */
     asTextSearch?: boolean;
+    /**
+     * Hide the chevron on the right of the control.
+     *
+     * For a field that is a text entry first and a picker second — an email you may be
+     * typing for the first time — where the chevron promises a list of choices the
+     * value does not have to come from. The menu still opens on focus and on typing.
+     */
+    hideDropdownIndicator?: boolean;
     /**
      * Whether the menu should use a portal, and where it should attach to.
      */

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

@@ -1,4 +1,9 @@
 import { StylesConfig } from 'react-select';
 import { InputFeedbackProps } from '../InputFeedback';
 import { InputSelectValue } from '.';
-export declare const getSelectStyles: (feedbackVariant?: InputFeedbackProps["variant"]) => StylesConfig<InputSelectValue>;
+export declare const getSelectStyles: (feedbackVariant?: InputFeedbackProps["variant"], 
+/**
+ * `small` matches the height of the other controls in a toolbar row — the
+ * search field and the buttons beside it — where the regular 44px stands out.
+ */
+size?: "regular" | "small") => StylesConfig<InputSelectValue>;

package/dist/ui/internals/Overlay.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui/internals/bodyScrollLock.d.ts

@@ -0,0 +1,2 @@
+export declare function lockBodyScroll(): void;
+export declare function unlockBodyScroll(): void;

package/dist/ui/internals/overlayContext.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Where content is being rendered, so that it can adapt without every page passing
+ * a prop down.
+ *
+ * - `"page"` — the main column of a page, the widest surface.
+ * - `"drawer"` — inside a drawer, 680px from `md` up.
+ * - `"sidebar"` — `PageLayout`'s sidebar slot, a 380px column from `lg` up.
+ *
+ * Below the width at which each surface takes its own shape, all three are just
+ * full-width rows, so anything that adapts should differ only in `md:`/`lg:`-
+ * prefixed classes and read the same on a phone.
+ */
+export type Surface = "page" | "drawer" | "sidebar";
+/**
+ * Its own module rather than living in `Overlay` or `PageLayout`, so components that
+ * adapt to a surface (`PageHeading`, `ResourceDetails`) do not have to import the
+ * components that render them.
+ */
+export declare const OverlayContext: import('react').Context<{
+    surface: Surface;
+}>;
+/** Where the calling component is being rendered. */
+export declare function useSurface(): Surface;
+/**
+ * `true` when the calling component sits inside a drawer, `false` on a page, in the
+ * sidebar or in a full-screen overlay.
+ */
+export declare function useIsInDrawer(): boolean;
+/**
+ * The two renderings a block of resource details has: the narrow sidebar column, or
+ * everything else. A page and a drawer differ in width but not in how these blocks
+ * lay out, so they share one.
+ */
+export type SurfaceVariant = "default" | "sidebar";
+/** The rendering the calling component should use, from where it sits. */
+export declare function useSurfaceVariant(): SurfaceVariant;

package/dist/ui/resources/ResourceAddress/ResourceAddress.d.ts

@@ -11,6 +11,13 @@ export type ResourceAddressProps = Pick<AddressProps, "showBillingInfo" | "showN
      * requested resource before to render editable related functionalities.
      */
     editable?: boolean;
+    /**
+     * When set, the address can be deleted: the edit pencil becomes a `…` menu
+     * holding both actions. The handler is called on click — the confirmation and
+     * the delete itself belong to the caller, which knows what the address is
+     * attached to.
+     */
+    onDelete?: () => void;
     /**
      * Optional setting to define if given `Address` `billing_info` data is required.
      * @default false
@@ -35,10 +42,13 @@ export declare const ResourceAddress: import('../../atoms/SkeletonTemplate').Ske
     address?: (AddressType | null) | undefined;
     editable?: boolean
     /**
-     * Optional setting to define if given `Address` `billing_info` data is required.
-     * @default false
+     * When set, the address can be deleted: the edit pencil becomes a `…` menu
+     * holding both actions. The handler is called on click — the confirmation and
+     * the delete itself belong to the caller, which knows what the address is
+     * attached to.
      */
      | undefined;
+    onDelete?: (() => void) | undefined;
     requiresBillingInfo?: boolean
     /**
      * Get triggered as soon as the new address is created.

package/dist/ui/resources/ResourceDetails/ResourceDetails.d.ts

@@ -1,5 +1,13 @@
 import { Resource } from '@commercelayer/sdk';
 export interface ResourceDetailsProps {
+    /**
+     * How the block renders, overriding what it infers from where it sits.
+     *
+     * Inferred by default — `PageLayout`'s sidebar slot reports `"sidebar"`, while a
+     * page and a drawer both report the wider `"default"`. Pass it only to force a
+     * rendering the surrounding surface would not choose.
+     */
+    variant?: "default" | "sidebar";
     resource: Resource;
     onUpdated: () => Promise<void>;
 }
@@ -7,6 +15,7 @@ export interface ResourceDetailsProps {
  * This component provides a listed visualization of details attributes of a given resource.
  */
 export declare const ResourceDetails: import('../../atoms/SkeletonTemplate').SkeletonTemplateComponent<{
+    variant?: "default" | "sidebar" | undefined;
     resource: Resource;
     onUpdated: () => Promise<void>;
     delayMs?: number | undefined;

package/dist/ui/resources/ResourceDetails/ResourceDetails.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui/resources/ResourceDetailsModal/ResourceAttributes.d.ts

@@ -0,0 +1,11 @@
+import { Resource } from '@commercelayer/sdk';
+/**
+ * Lists a resource's plain attributes. Relationships are filtered out: they
+ * are rendered by whoever owns that concern, so they don't leak into this list
+ * as raw JSON.
+ */
+export declare const ResourceAttributes: import('../../atoms/SkeletonTemplate').SkeletonTemplateComponent<{
+    resource: Resource;
+    delayMs?: number | undefined;
+    isLoading?: boolean | undefined;
+}>;

package/dist/ui/resources/ResourceDetailsModal/ResourceDetailsContent.d.ts

@@ -0,0 +1,43 @@
+import { Resource } from '@commercelayer/sdk';
+import { FC, ReactNode } from 'react';
+export interface ResourceDetailsTab {
+    /** Tab label. */
+    name: string;
+    /** Receives the resource, so the tab can render data already loaded by the caller. */
+    content: (resource: Resource) => ReactNode;
+}
+export interface ResourceDetailsContentProps {
+    /**
+     * The resource to display, already loaded by the caller.
+     *
+     * Nothing is fetched here: the caller decides what to sideload, which keeps
+     * `include`/`fields` policy out of this component and avoids re-requesting a
+     * resource that is often already in hand.
+     */
+    resource: Resource;
+    /** Renders skeletons while the caller is still loading the resource. */
+    isLoading?: boolean;
+    /** Extra tabs, rendered between Attributes and Events. */
+    tabs?: ResourceDetailsTab[];
+    /**
+     * Fixed height for each tab panel, e.g. `"70vh"`. Set it when the surrounding
+     * container must not resize as tabs change (a modal, typically). Leave it
+     * unset on a page, so content flows naturally instead of gaining a nested
+     * scrollbar.
+     */
+    panelHeight?: string;
+    /**
+     * Id for the tab list, used to build the ids that link each tab to its panel.
+     * Defaults to a generated one, so several instances can coexist on the same
+     * page without colliding.
+     */
+    id?: string;
+}
+/**
+ * Tabbed view of a single resource: its attributes, any tabs the caller adds,
+ * and its event stream.
+ *
+ * Usable on its own inside a page, or wrapped in a modal via
+ * `useResourceDetailsModal`.
+ */
+export declare const ResourceDetailsContent: FC<ResourceDetailsContentProps>;

package/dist/ui/resources/ResourceDetailsModal/ResourceDetailsContent.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui/resources/ResourceDetailsModal/ResourceEvents.d.ts

@@ -0,0 +1,15 @@
+import { ResourceTypeLock } from '@commercelayer/sdk';
+import { FC } from 'react';
+/**
+ * Timeline of a resource's event stores, newest first, grouped by day and
+ * paginated as the user scrolls.
+ *
+ * Event stores are part of the Event Stream Hub, so organizations without it
+ * see an upsell instead. Enterprise-ness is read from the token provider
+ * extras. When it is absent (an app running outside the dashboard, where
+ * nothing populates it) the upsell is shown rather than the timeline.
+ */
+export declare const ResourceEvents: FC<{
+    resourceId: string;
+    resourceType: ResourceTypeLock;
+}>;

package/dist/ui/resources/ResourceDetailsModal/index.d.ts

@@ -0,0 +1,2 @@
+export { ResourceDetailsContent, type ResourceDetailsContentProps, type ResourceDetailsTab, } from './ResourceDetailsContent';
+export { type UseResourceDetailsModalProps, type UseResourceDetailsModalReturn, useResourceDetailsModal, } from './useResourceDetailsModal';

package/dist/ui/resources/ResourceDetailsModal/resourceFields.d.ts

@@ -0,0 +1,19 @@
+import { Resource } from '@commercelayer/sdk';
+/**
+ * An empty array is treated as a relationship: an emptied has-many
+ * (`payment_refunds: []`) is far more common than a top-level array-valued
+ * attribute, and there is no way to tell them apart from the payload alone.
+ */
+export declare function isRelationshipValue(value: unknown): boolean;
+export interface ResourceFields {
+    /** Plain attribute keys, alphabetically sorted. */
+    attributes: string[];
+    /** Relationship keys, alphabetically sorted. */
+    relationships: string[];
+}
+/**
+ * Splits a resource's keys into plain attributes and relationships, so each can
+ * be rendered separately. `id` and `type` are excluded: they identify the
+ * resource itself and are shown on their own.
+ */
+export declare function splitResourceFields(resource: Resource): ResourceFields;

package/dist/ui/resources/ResourceDetailsModal/resourceFields.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui/resources/ResourceDetailsModal/useInfiniteScrollCursor.d.ts

@@ -0,0 +1,39 @@
+import { ListResponse, Resource } from '@commercelayer/sdk';
+import { Arguments, BareFetcher } from 'swr';
+import { SWRInfiniteConfiguration } from 'swr/infinite';
+import { useCoreSdkProvider } from '../../../providers/CoreSdkProvider';
+/** The `@commercelayer/sdk` client, as provided by `CoreSdkProvider`. */
+type SdkClient = ReturnType<typeof useCoreSdkProvider>["sdkClient"];
+export interface CursorPage<Data extends ListResponse<Resource>> {
+    /**
+     * A serializable value that uniquely identifies this page request. It's used
+     * as the SWR cache key, so it must include everything that makes the request
+     * unique (resource type, parent id, cursor, ...).
+     */
+    key: Arguments;
+    /** Performs the actual cursor-paginated request and resolves the page data. */
+    fetch: () => Promise<Data>;
+}
+export type GetCursorPage<Data extends ListResponse<Resource>> = (params: {
+    sdkClient: SdkClient;
+    index: number;
+    previousPageData: Data | null;
+}) => CursorPage<Data> | null;
+/**
+ * Returns the `next` cursor from a cursor-paginated response, ready to be used
+ * as the `pageAfter` query param. Returns `undefined` for offset-paginated
+ * responses, missing data or when there are no more pages.
+ */
+export declare const getNextCursor: (page: ListResponse<Resource> | null | undefined) => string | undefined;
+export declare const useInfiniteScrollCursor: <Data extends ListResponse<Resource>, Error = unknown>(getCursorPage: GetCursorPage<Data>, config?: SWRInfiniteConfiguration<Data, Error, BareFetcher<Data>>) => {
+    data: (Data extends readonly (infer InnerArr)[] ? InnerArr : Data)[];
+    error: Error | undefined;
+    isLoading: boolean;
+    isValidating: boolean;
+    mutate: import('swr/infinite').SWRInfiniteKeyedMutator<Data[]>;
+    currentPage: number;
+    isLoadingMore: boolean;
+    fetchNextPage: (() => void) | undefined;
+    VisibilityTrigger: () => import("react/jsx-runtime").JSX.Element;
+};
+export {};

package/dist/ui/resources/ResourceDetailsModal/useResourceDetailsModal.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+import { ResourceDetailsContentProps } from './ResourceDetailsContent';
+export interface UseResourceDetailsModalProps extends Omit<ResourceDetailsContentProps, "panelHeight"> {
+    /** Modal heading. Defaults to a generic "Resource details". */
+    title?: string;
+}
+export interface UseResourceDetailsModalReturn {
+    /** Render this wherever the modal should mount. */
+    modal: ReactNode;
+    open: () => void;
+    close: () => void;
+}
+/**
+ * Shows a resource's details in a modal: its attributes, any caller-supplied
+ * tabs, and its event stream.
+ *
+ * The modal is returned as an *element*, not a component. A component created
+ * inside this hook would get a fresh identity on every render of the caller,
+ * so React would unmount and remount the whole subtree whenever the caller
+ * re-rendered (an SWR revalidation on window focus, say), discarding the
+ * active tab and repainting the contents.
+ */
+export declare function useResourceDetailsModal({ title, ...contentProps }: UseResourceDetailsModalProps): UseResourceDetailsModalReturn;