@factorialco/f0-react 7.26.0 → 7.28.0

package/dist/f0.d.ts

@@ -1359,6 +1359,31 @@ export declare type AppendToolCall = {
     };
 };
 
+export declare type AppToastOptions = ToastCommonOptions & ToastTiming & {
+    /**
+     * The kind of toast. `app` is a status message about something the user
+     * did or the app did.
+     * @default "app"
+     */
+    type?: "app";
+    /**
+     * The actions to display in the toast
+     */
+    actions?: F0ToastActions;
+    /**
+     * The title of the toast
+     */
+    title?: string;
+    /**
+     * The description of the toast
+     */
+    description?: string;
+    /**
+     * The variant of the toast
+     */
+    variant?: F0ToastVariant;
+};
+
 export declare const AreaChart: WithDataTestIdReturnType_5<ForwardRefExoticComponent<Omit<LineChartPropsBase<LineChartConfig_2> & {
 lineType?: "step" | "linear" | "natural" | "monotoneX";
 marginTop?: number;
@@ -5536,6 +5561,14 @@ export declare const defaultTranslations: {
         readonly remove: "Remove favorite";
     };
     readonly notifications: "Notifications";
+    readonly toasts: {
+        readonly clearAll: "Clear all";
+        readonly messages: "Messages";
+        readonly moreMessages: {
+            readonly one: "+{{count}} more message";
+            readonly other: "+{{count}} more messages";
+        };
+    };
     readonly ai: {
         readonly openChat: "Open Chat with One AI";
         readonly closeChat: "Close Chat with One AI";
@@ -13258,6 +13291,12 @@ autoFocus?: boolean;
 * combobox — has to be tabbable, or focus can leave it and never come back.
 */
 tabIndex?: number;
+/**
+* Replaces the magnifier. For a field that finds things by some other means
+* than matching text — a question put to an assistant — and should not
+* promise that it matches text.
+*/
+icon?: IconType;
 } & Pick<InputFieldProps<string>, "onChange" | "name" | "size" | "role" | "aria-activedescendant" | "aria-autocomplete" | "aria-controls" | "aria-expanded" | "onFocus" | "onBlur" | "onKeyDown" | "loading" | "disabled" | "placeholder" | "clearable"> & RefAttributes<HTMLInputElement>>;
 
 export declare type F0SearchInputProps = {
@@ -13271,6 +13310,12 @@ export declare type F0SearchInputProps = {
      * combobox — has to be tabbable, or focus can leave it and never come back.
      */
     tabIndex?: number;
+    /**
+     * Replaces the magnifier. For a field that finds things by some other means
+     * than matching text — a question put to an assistant — and should not
+     * promise that it matches text.
+     */
+    icon?: IconType;
 } & Pick<InputFieldProps<string>, "size" | "loading" | "clearable" | "placeholder" | "disabled" | "onBlur" | "onFocus" | "onChange" | "name" | "role" | "onKeyDown" | "aria-controls" | "aria-expanded" | "aria-activedescendant" | "aria-autocomplete">;
 
 /**
@@ -14116,7 +14161,13 @@ export declare interface F0TimelineRowTaskProps extends F0TimelineRowBaseProps {
     otherActions?: F0TimelineRowOtherAction[];
 }
 
-declare type F0ToastProps = {
+declare type F0ToastActions = ToastActionButton | [ToastActionButton] | ToastActionLink | [ToastActionLink] | [ToastActionButton, ToastActionLink];
+
+declare type F0ToastProps = ToastCardProps & {
+    /**
+     * The actions to display in the toast
+     */
+    actions?: F0ToastActions;
     /**
      * The title of the toast
      */
@@ -14129,22 +14180,6 @@ declare type F0ToastProps = {
      * The variant of the toast
      */
     variant?: F0ToastVariant;
-    /**
-     * The duration of the toast in milliseconds (if not provided, the toast will stay open until the user closes it)
-     */
-    duration?: number;
-    /**
-     * Whether the toast is paused. If true, the duraction timer will not tick in anycase
-     */
-    forcePauseTimer?: boolean;
-    /**
-     * The callback to be called when the toast is closed
-     */
-    onClose?: () => void;
-    /**
-     * The actions to display in the toast ()
-     */
-    actions?: ToastActionButton | [ToastActionButton] | ToastActionLink | [ToastActionLink] | [ToastActionButton, ToastActionLink];
 };
 
 declare type F0ToastVariant = (typeof toastVariants)[number];
@@ -16593,6 +16628,48 @@ declare type Message_2 = {
 
 declare type MessageSlotComponent = ComponentType<any>;
 
+export declare type MessageToastOptions = ToastCommonOptions & ToastTiming & {
+    /**
+     * The kind of toast. `message` is something a person sent, shown with
+     * their avatar, like a chat notification.
+     */
+    type: "message";
+    /**
+     * The avatar of the sender (or of the conversation, for a group)
+     */
+    avatar: AvatarVariant;
+    /**
+     * The display name of the sender
+     */
+    sender: string;
+    /**
+     * Where the message was posted, e.g. the channel name. Omit for a direct
+     * message.
+     */
+    topic?: string;
+    /**
+     * The text of the message
+     */
+    message: string;
+    /**
+     * Called when the message is clicked, e.g. to open the conversation. The
+     * toast closes after it.
+     */
+    onClick?: () => void;
+    /**
+     * Groups messages of one conversation into a single toast
+     */
+    thread?: MessageToastThread;
+};
+
+export declare type MessageToastThread = {
+    /**
+     * Messages with the same thread id share one toast: each new message
+     * replaces it in place, restarts its timer and adds to its "+N more" count.
+     */
+    id: string;
+};
+
 declare type MetadataAction = {
     icon: IconType;
     label: string;
@@ -17438,6 +17515,11 @@ declare type OneFilterPickerRootProps<Definition extends FiltersDefinition> = {
     onChange: (value: FiltersState<Definition>) => void;
     /** The children of the component */
     children?: React.ReactNode;
+    /**
+     * An entry listed before the filters inside the panel, with a pane of its
+     * own. For a way of filtering that is not one filter.
+     */
+    quickFilter?: QuickFilterDefinition;
     /** The mode of the component */
     mode?: FiltersMode;
     /** Callback fired when filters open state is changed */
@@ -17884,6 +17966,15 @@ export declare type PresetDefinition<Filters extends FiltersDefinition> = {
      * boundary.
      */
     settings?: unknown;
+    /**
+     * Whatever the quick filter captured of its own narrowing, from
+     * {@link QuickFilterDefinition.capture}, handed back to `restore` when this
+     * view is applied. Opaque here: a view that narrows the list by something that
+     * is not a filter — a question, a saved lookup — would otherwise be saved as
+     * the filters it happens to have set, which for a narrowing that sets none at
+     * all is a view that shows everything.
+     */
+    quickFilter?: unknown;
     /** Function to count the number of items that match the filter */
     itemsCount?: (filters: FiltersState<Filters>) => Promise<number | undefined> | number | undefined;
 };
@@ -18195,6 +18286,89 @@ declare type QuestionPropsToOmit = "onAction" | "onChange" | "onAddNewElement";
 
 export declare type QuestionType = "rating" | "select" | "multi-select" | "dropdown-single" | "dropdown-multi" | "text" | "longText" | "numeric" | "link" | "date" | "file" | "checkbox";
 
+/**
+ * A way of narrowing the list that is not one filter: an entry listed above
+ * the filters inside the panel, with a pane of its own when picked. A natural
+ * language question, a saved view, "my team".
+ */
+export declare type QuickFilterDefinition = {
+    /** The entry's label in the filter list */
+    label: string;
+    /** Icon drawn before that label */
+    icon?: IconType;
+    /**
+     * Whether what is applied to the list right now came from this entry. The
+     * panel opens on the filter that carries a value when something is applied;
+     * when that something is the quick filter's own answer, it opens on the
+     * entry instead, so the reader returns to the question they asked rather
+     * than to one of the filters it set.
+     */
+    active?: boolean;
+    /**
+     * The pane shown when the entry is picked. f0 draws the entry and nothing
+     * else; the pane is the consumer's.
+     *
+     * `stage` merges into the draft the apply button commits — the same draft
+     * the filter panes write — so a staged key shows in the list at once, a
+     * tick made afterwards survives Apply, and nothing lingers past it. Pass a
+     * key with `undefined` to clear it. Nothing reaches the list until Apply.
+     */
+    render: (api: {
+        stage: (filters: Record<string, unknown>) => void;
+    }) => ReactNode;
+    /**
+     * Whether the quick filter is working on an answer right now. The collection
+     * shows it where it shows its own — a spinner beside the list's controls — so
+     * that a reader who asked and then closed the panel can still see that an
+     * answer is coming.
+     */
+    loading?: boolean;
+    /**
+     * What this entry has put on the list, in a form a saved view can hold. Called
+     * when a view is saved and whenever the current view is compared with one;
+     * `undefined` means the list is not showing this entry's work.
+     *
+     * Opaque to f0, which stores it and hands it back — the entry is the only thing
+     * that knows what its own narrowing is made of. Keep it small and serializable:
+     * it goes wherever saved views are kept. A reference, a question, an id — not a
+     * result, which would be stale by the time the view is opened again.
+     */
+    capture?: () => unknown;
+    /**
+     * Puts that back, with whatever `capture` returned, when a saved view is
+     * applied — and with `undefined` for a view that has none of this entry's work
+     * in it, which means clear whatever is there.
+     *
+     * Called after the view's filters, so a narrowing that depends on them can be
+     * worked out against the state they leave behind.
+     */
+    restore?: (state: unknown) => void;
+    /**
+     * Called when the apply button is pressed while this entry's pane is the one
+     * showing, just before the draft is committed and the panel closes.
+     *
+     * The button says "apply filters" and the reader has this pane in front of
+     * them, so whatever they have entered here is part of what they are applying.
+     * Without this, a pane that keeps its own unsubmitted state — a typed
+     * question, an unconfirmed choice — watches the panel close over it and
+     * appear to do nothing.
+     */
+    onApply?: () => void;
+    /**
+     * A chip in the applied-filters row for what the quick filter has put on
+     * the list that no filter chip can show — a set of rows, a computed column.
+     * Without it that narrowing has no surface once the panel closes, and the
+     * list reads as broken rather than as filtered. Listed first; its close
+     * control and the row's Clear both call `onRemove`, and clicking it opens
+     * the panel. Shown even while a preset stands in for the filter chips,
+     * because no preset stands in for this.
+     */
+    chip?: {
+        label: string;
+        onRemove: () => void;
+    };
+};
+
 export declare const RadarChart: WithDataTestIdReturnType_5<ForwardRefExoticComponent<Omit<RadarChartProps<ChartConfig_2> & {
 dataTestId?: string;
 } & RefAttributes<HTMLDivElement>, "ref"> & RefAttributes<HTMLElement | SVGElement>>>;
@@ -20037,51 +20211,48 @@ declare type ToastActionLink = {
     keepOpen?: boolean;
 };
 
-export declare type ToastId = string;
-
-export declare type ToastOptions = {
+declare type ToastCardProps = {
     /**
-     * The title of the toast
+     * How long the toast stays open, in milliseconds. Draws the countdown bar;
+     * closing the toast when it runs out is the toast provider's job.
      */
-    title?: string;
+    duration?: number;
     /**
-     * The description of the toast
+     * The callback to be called when the toast is closed
      */
-    description?: string;
+    onClose?: () => void;
     /**
-     * The variant of the toast
+     * Changes whenever the toast's timer starts again, so the countdown bar
+     * starts again from full.
      */
-    variant?: F0ToastVariant;
+    countdownKey?: string | number;
     /**
-     * The actions to display in the toast
+     * Changes whenever the toast's content is replaced in place, so the new
+     * text fades in.
      */
-    actions?: F0ToastProps["actions"];
+    contentKey?: number;
+};
+
+declare type ToastCommonOptions = {
     /**
      * Optional id for the toast. If not provided, a random id will be generated.
+     * Opening a toast with the id of an open one replaces it in place.
      */
     id?: ToastId;
-} & ({
-    /**
-     * The duration of the toast in milliseconds. Defaults to 5000ms, or
-     * 10000ms when the toast has an action (more time to read and reach it).
-     * Use `persistent: true` to keep it open until the user closes it.
-     * @default 5000
-     */
-    duration?: number;
-    /**
-     * Whether the toast should persist until the user closes it
-     */
-    persistent?: undefined;
-} | {
-    duration?: undefined;
-    persistent: true;
-});
+};
+
+export declare type ToastId = string;
+
+export declare type ToastOptions = AppToastOptions | MessageToastOptions;
 
 export declare const ToastProvider: ({ children, portalTargets, }: ToastProviderProps) => JSX_2.Element;
 
 /**
- * A toast as held by the store: the public options resolved into the props the
- * `F0Toast` component renders, plus a stable `id` and an `onClose` callback.
+ * @deprecated The toast store that held these items was replaced by Base UI's
+ * toast manager, and nothing reads this type any more.
+ * @removeIn 8.0.0
+ * @migration Remove the import. To open a toast, pass `ToastOptions` to
+ * `toasts.open`.
  */
 export declare type ToastProviderItem = F0ToastProps & {
     id: ToastId;
@@ -20089,7 +20260,7 @@ export declare type ToastProviderItem = F0ToastProps & {
 };
 
 declare type ToastProviderProps = {
-    children: React.ReactNode;
+    children: ReactNode;
     portalTargets?: Record<"mobile" | "desktop", string>;
 };
 
@@ -20102,6 +20273,14 @@ declare type ToastProviderProps = {
  * import { toasts } from "@factorialco/f0-react"
  *
  * const id = toasts.open({ title: "Saved", variant: "success" })
+ * toasts.open({
+ *   type: "message",
+ *   avatar: { type: "person", firstName: "Ana", lastName: "Ruiz" },
+ *   sender: "Ana Ruiz",
+ *   topic: "design",
+ *   message: "Can you take a look?",
+ *   thread: { id: channelId },
+ * })
  * toasts.close(id)
  * toasts.closeAll()
  */
@@ -20121,6 +20300,23 @@ export declare const toasts: {
     closeAll: () => void;
 };
 
+declare type ToastTiming = {
+    /**
+     * The duration of the toast in milliseconds. Defaults to 5000ms, or
+     * 10000ms when the toast has an action (more time to read and reach it).
+     * Use `persistent: true` to keep it open until the user closes it.
+     * @default 5000
+     */
+    duration?: number;
+    /**
+     * Whether the toast should persist until the user closes it
+     */
+    persistent?: undefined;
+} | {
+    duration?: undefined;
+    persistent: true;
+};
+
 declare const toastVariants: readonly ["error", "warning", "success", "loading", "default"];
 
 /** A button rendered in the footer at the bottom of the table of contents */
@@ -21733,10 +21929,8 @@ declare module "@tiptap/core" {
 
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {
-        videoEmbed: {
-            setVideoEmbed: (options: {
-                src: string;
-            }) => ReturnType;
+        transcript: {
+            insertTranscript: (data: TranscriptData) => ReturnType;
         };
     }
 }
@@ -21744,8 +21938,10 @@ declare module "@tiptap/core" {
 
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {
-        transcript: {
-            insertTranscript: (data: TranscriptData) => ReturnType;
+        videoEmbed: {
+            setVideoEmbed: (options: {
+                src: string;
+            }) => ReturnType;
         };
     }
 }