@factorialco/f0-react 9.2.1 → 9.3.0

package/dist/experimental.d.ts

@@ -111,6 +111,8 @@ import { TextareaHTMLAttributes } from 'react';
 import { TextCellValue } from './types/text';
 import { TextCellValue as TextCellValue_2 } from './experimental';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import { TooltipPopupProps as TooltipPopupProps_2 } from '@base-ui/react/tooltip';
+import { TooltipPositionerProps } from '@base-ui/react/tooltip';
 import { ValueDisplayRendererContext as ValueDisplayRendererContext_2 } from './experimental';
 import { VariantProps } from 'cva';
 import { VerticalBarChartProps } from './experimental';
@@ -3008,7 +3010,7 @@ declare type ChipVariants = {
 };
 
 export declare const chipVariants: (props?: ({
-    variant?: "selected" | "default" | undefined;
+    variant?: "default" | "selected" | undefined;
 } & ({
     class?: ClassValue;
     className?: never;
@@ -4410,7 +4412,7 @@ declare type CounterProps = {
 
 declare const counterVariants: (props?: ({
     size?: "md" | "sm" | undefined;
-    type?: "bold" | "selected" | "default" | undefined;
+    type?: "bold" | "default" | "selected" | undefined;
 } & ({
     class?: ClassValue;
     className?: never;
@@ -12208,7 +12210,7 @@ tabIndex?: number;
 * promise that it matches text.
 */
 icon?: IconType;
-} & Pick<InputFieldProps<string>, "name" | "role" | "aria-activedescendant" | "aria-autocomplete" | "aria-controls" | "aria-expanded" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "disabled" | "placeholder" | "size" | "loading" | "clearable"> & RefAttributes<HTMLInputElement>>;
+} & Pick<InputFieldProps<string>, "name" | "role" | "aria-activedescendant" | "aria-autocomplete" | "aria-controls" | "aria-expanded" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "disabled" | "size" | "placeholder" | "loading" | "clearable"> & RefAttributes<HTMLInputElement>>;
 
 export declare type F0SearchInputProps = {
     value?: string;
@@ -14405,7 +14407,7 @@ declare const inlineDismissReasons: readonly ["blur", "escape", "commit"];
  */
 export declare const Input: ForwardRefExoticComponent<Omit<F0TextInputProps, "ref"> & RefAttributes<HTMLInputElement>>;
 
-declare const Input_2: React_2.ForwardRefExoticComponent<Omit<React_2.InputHTMLAttributes<HTMLInputElement>, "onChange" | "size"> & Pick<InputFieldProps<string>, "label" | "role" | "onFocus" | "onBlur" | "onChange" | "disabled" | "status" | "maxLength" | "required" | "size" | "loading" | "icon" | "transparent" | "hint" | "error" | "editing" | "variant" | "append" | "hideLabel" | "isEmpty" | "labelIcon" | "onClickContent" | "readonly" | "clearable" | "autocomplete" | "onClear" | "onBlurWithin" | "emptyValue" | "hideMaxLength" | "appendTag" | "lengthProvider" | "buttonToggle" | "inlineText"> & React_2.RefAttributes<HTMLInputElement>>;
+declare const Input_2: React_2.ForwardRefExoticComponent<Omit<React_2.InputHTMLAttributes<HTMLInputElement>, "onChange" | "size"> & Pick<InputFieldProps<string>, "label" | "role" | "onFocus" | "onBlur" | "onChange" | "disabled" | "status" | "size" | "icon" | "transparent" | "hint" | "error" | "editing" | "required" | "loading" | "variant" | "append" | "hideLabel" | "maxLength" | "isEmpty" | "labelIcon" | "onClickContent" | "readonly" | "clearable" | "autocomplete" | "onClear" | "onBlurWithin" | "emptyValue" | "hideMaxLength" | "appendTag" | "lengthProvider" | "buttonToggle" | "inlineText"> & React_2.RefAttributes<HTMLInputElement>>;
 
 declare const INPUTFIELD_SIZES: readonly ["sm", "md"];
 
@@ -17113,7 +17115,7 @@ declare const privateProps_5: readonly ["alignOffset", "disableExitAnimation"];
 
 declare const privateProps_6: readonly ["compact"];
 
-declare const privateProps_7: readonly ["delay", "onOpen"];
+declare const privateProps_7: readonly ["delay", "closeDelay", "onOpen", "closeOnPress", "forceOpen", "side", "align", "sideOffset", "shortcutVariant"];
 
 declare type ProductUpdate = {
     title: string;
@@ -18845,8 +18847,8 @@ width?: "auto" | "full" | undefined;
 paddingY?: "none" | "p-2" | "p-4" | "p-8" | "p-12" | "p-16" | undefined;
 basis?: "0" | undefined;
 inline?: boolean | undefined;
-justifyContent?: "center" | "end" | "start" | "stretch" | "space-between" | undefined;
-alignItems?: "center" | "end" | "start" | "stretch" | "space-between" | undefined;
+justifyContent?: "center" | "start" | "end" | "stretch" | "space-between" | undefined;
+alignItems?: "center" | "start" | "end" | "stretch" | "space-between" | undefined;
 grow?: boolean | undefined;
 shrink?: boolean | undefined;
 } & ({
@@ -18912,8 +18914,8 @@ width?: "auto" | "full" | undefined;
 paddingY?: "none" | "p-2" | "p-4" | "p-8" | "p-12" | "p-16" | undefined;
 basis?: "0" | undefined;
 inline?: boolean | undefined;
-justifyContent?: "center" | "end" | "start" | "stretch" | "space-between" | undefined;
-alignItems?: "center" | "end" | "start" | "stretch" | "space-between" | undefined;
+justifyContent?: "center" | "start" | "end" | "stretch" | "space-between" | undefined;
+alignItems?: "center" | "start" | "end" | "stretch" | "space-between" | undefined;
 grow?: boolean | undefined;
 shrink?: boolean | undefined;
 } & ({
@@ -19465,7 +19467,7 @@ declare const Textarea_2: ForwardRefExoticComponent<Omit<TextareaHTMLAttributes<
 value?: string;
 /** Maximum height in pixels. When set, the textarea scrolls beyond this height instead of growing. */
 maxHeight?: number;
-} & Pick<InputFieldProps<string>, "value" | "label" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "status" | "maxLength" | "placeholder" | "required" | "size" | "loading" | "icon" | "hint" | "error" | "hideLabel" | "labelIcon" | "clearable" | "onClear"> & RefAttributes<HTMLTextAreaElement>>;
+} & Pick<InputFieldProps<string>, "value" | "label" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "status" | "size" | "icon" | "placeholder" | "hint" | "error" | "required" | "loading" | "hideLabel" | "maxLength" | "labelIcon" | "clearable" | "onClear"> & RefAttributes<HTMLTextAreaElement>>;
 
 /**
  * @deprecated Renamed to `F0TextAreaInputProps`. See the `Textarea`
@@ -19632,7 +19634,7 @@ declare type toggleActionType = {
 
 export declare const ToggleGroup: React_2.ForwardRefExoticComponent<((Omit<ToggleGroupPrimitive.ToggleGroupSingleProps & React_2.RefAttributes<HTMLDivElement>, "ref"> | Omit<ToggleGroupPrimitive.ToggleGroupMultipleProps & React_2.RefAttributes<HTMLDivElement>, "ref">) & VariantProps<(props?: ({
     variant?: "default" | "outline" | undefined;
-    size?: "default" | "lg" | "sm" | undefined;
+    size?: "lg" | "sm" | "default" | undefined;
 } & ({
     class?: ClassValue;
     className?: never;
@@ -19643,7 +19645,7 @@ export declare const ToggleGroup: React_2.ForwardRefExoticComponent<((Omit<Toggl
 
 export declare const ToggleGroupItem: React_2.ForwardRefExoticComponent<Omit<ToggleGroupPrimitive.ToggleGroupItemProps & React_2.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
     variant?: "default" | "outline" | undefined;
-    size?: "default" | "lg" | "sm" | undefined;
+    size?: "lg" | "sm" | "default" | undefined;
 } & ({
     class?: ClassValue;
     className?: never;
@@ -19655,7 +19657,7 @@ export declare const ToggleGroupItem: React_2.ForwardRefExoticComponent<Omit<Tog
 /**
  * @experimental This is an experimental component use it at your own risk
  */
-export declare const Tooltip: WithDataTestIdReturnType_3<(props: TooltipProps) => default_2.JSX.Element>;
+export declare const Tooltip: WithDataTestIdReturnType_3<(props: TooltipProps) => JSX_2.Element>;
 
 /**
  * The copy a tooltip shows. At least one of the three must be present — a
@@ -19675,12 +19677,82 @@ declare type TooltipCopyProps = {
     items: TooltipListItem[];
 };
 
+/**
+ * Triggers that wait out the delay once, together: while any tooltip in the
+ * group is on screen — or was, a moment ago — the next one opens on arrival.
+ * Having read one label, the user is reading the row, and making them wait
+ * again for every neighbour is the delay working against them.
+ *
+ * Grouping is a React context, so the group has to be an ancestor of its
+ * tooltips rather than a name they each repeat.
+ */
+export declare const TooltipGroup: ({ children, delay, closeDelay, timeout, }: TooltipGroupProps) => JSX_2.Element;
+
+export declare type TooltipGroupProps = {
+    children: ReactNode;
+    /**
+     * The wait before a tooltip in the group opens, for those that do not set
+     * their own `delay`.
+     */
+    delay?: number;
+    /**
+     * How long a bubble stays after the pointer leaves its trigger, so the
+     * pointer can cross onto it (WCAG 1.4.13). Tooltips in the group that set
+     * their own `closeDelay` keep it.
+     */
+    closeDelay?: number;
+    /**
+     * How long after one tooltip leaves its neighbours still open at once.
+     * @default 400
+     */
+    timeout?: number;
+};
+
 declare type TooltipInternalProps = {
-    children: default_2.ReactNode;
+    children: ReactNode;
     shortcut?: ComponentProps<typeof Shortcut>["keys"];
+    /**
+     * The wait before the bubble opens on hover. Inside a `TooltipGroup` the
+     * group's own value applies unless this is set.
+     */
     delay?: number;
+    /**
+     * How long the bubble stays after the pointer leaves the trigger. Inside a
+     * `TooltipGroup` the group's own value applies unless this is set.
+     */
+    closeDelay?: number;
     instant?: boolean;
     onOpen?: () => void;
+    /**
+     * Whether the bubble itself can be hovered. A tooltip that follows a column
+     * of targets must not: the bubble lands under the pointer on its way to the
+     * next item, which takes the hover off the trigger and closes the bubble,
+     * which puts the pointer back on the trigger — on and off for as long as the
+     * cursor keeps moving.
+     */
+    hoverable?: boolean;
+    /**
+     * Whether pressing the trigger puts the bubble away. It does by default —
+     * a press is an answer, and the label has done its job. A navigation rail
+     * says no: pressing a module changes the page under a pointer that has not
+     * moved, and a label that vanishes at that moment reads as the pointer
+     * having lost the thing it is still on.
+     */
+    closeOnPress?: boolean;
+    /**
+     * Holds the bubble open from outside, e.g. while the control it names has
+     * keyboard focus but is not itself the trigger.
+     */
+    forceOpen?: boolean;
+    side?: TooltipPopupProps["side"];
+    align?: TooltipPopupProps["align"];
+    sideOffset?: number;
+    /**
+     * The shortcut chip's treatment. "inverse" is the outlined one the bubble
+     * has always used; "default" is the filled, lighter chip the search box
+     * itself shows, for tooltips naming the same key.
+     */
+    shortcutVariant?: ComponentProps<typeof Shortcut>["variant"];
 } & TooltipCopyProps;
 
 /**
@@ -19693,6 +19765,21 @@ declare type TooltipListItem = string | {
     description?: string;
 };
 
+declare interface TooltipPopupProps extends Omit<TooltipPopupProps_2, "className" | "render"> {
+    className?: string;
+    side?: TooltipPositionerProps["side"];
+    align?: TooltipPositionerProps["align"];
+    sideOffset?: TooltipPositionerProps["sideOffset"];
+    alignOffset?: TooltipPositionerProps["alignOffset"];
+    collisionPadding?: TooltipPositionerProps["collisionPadding"];
+    /**
+     * Classes for the positioner — the box the bubble sits in. It is a hit
+     * target of its own, so anything about pointer events belongs here rather
+     * than on the bubble.
+     */
+    positionerClassName?: string;
+}
+
 export declare type TooltipProps = Omit<TooltipInternalProps, (typeof privateProps_7)[number]>;
 
 export declare interface TopLevelAppendNotesTextEditorPageDocumentPatch {
@@ -21274,9 +21361,9 @@ declare namespace Calendar {
 
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {
-        fontSize: {
-            setFontSize: (fontSize: string) => ReturnType;
-            unsetFontSize: () => ReturnType;
+        aiBlock: {
+            insertAIBlock: (data: AIBlockData, config: AIBlockConfig) => ReturnType;
+            executeAIAction: (actionType: string, config: AIBlockConfig) => ReturnType;
         };
     }
 }
@@ -21284,9 +21371,9 @@ declare module "@tiptap/core" {
 
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {
-        aiBlock: {
-            insertAIBlock: (data: AIBlockData, config: AIBlockConfig) => ReturnType;
-            executeAIAction: (actionType: string, config: AIBlockConfig) => ReturnType;
+        fontSize: {
+            setFontSize: (fontSize: string) => ReturnType;
+            unsetFontSize: () => ReturnType;
         };
     }
 }
@@ -21317,8 +21404,10 @@ declare module "@tiptap/core" {
 
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {
-        moodTracker: {
-            insertMoodTracker: (data: MoodTrackerData) => ReturnType;
+        videoEmbed: {
+            setVideoEmbed: (options: {
+                src: string;
+            }) => ReturnType;
         };
     }
 }
@@ -21326,10 +21415,8 @@ declare module "@tiptap/core" {
 
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {
-        videoEmbed: {
-            setVideoEmbed: (options: {
-                src: string;
-            }) => ReturnType;
+        transcript: {
+            insertTranscript: (data: TranscriptData) => ReturnType;
         };
     }
 }
@@ -21337,8 +21424,8 @@ declare module "@tiptap/core" {
 
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {
-        transcript: {
-            insertTranscript: (data: TranscriptData) => ReturnType;
+        moodTracker: {
+            insertMoodTracker: (data: MoodTrackerData) => ReturnType;
         };
     }
 }