@prismicio/editor-ui 0.4.59 → 0.4.60

package/dist/components/BackgroundIcon/BackgroundIcon.d.ts

@@ -0,0 +1,14 @@
+import type { SX } from "../../theme";
+import { type IconName } from "../Icon";
+export interface BackgroundIconProps {
+    name: IconName;
+    color?: Color;
+    size?: "extraSmall" | "small" | "medium" | "large";
+    iconSize?: "small" | "medium" | "large";
+    radius?: "circle" | 6;
+    variant?: "soft" | "solid";
+    sx?: SX;
+}
+export declare function BackgroundIcon(props: BackgroundIconProps): JSX.Element;
+type Color = "amber" | "grey" | "purple" | "tomato" | "green" | "indigo";
+export {};

package/dist/components/BackgroundIcon/BackgroundIcon.stories.d.ts

@@ -0,0 +1,39 @@
+import { BackgroundIcon } from "./BackgroundIcon";
+declare const meta: {
+    title: string;
+    component: typeof BackgroundIcon;
+    argTypes: {
+        color: {
+            control: string;
+            options: string[];
+        };
+        name: {
+            control: string;
+            options: readonly ["add", "alert", "arrowBack", "arrowDownward", "arrowDropDown", "arrowDropDownCircle", "arrowForward", "arrowUpward", "attachFile", "autoFixHigh", "autorenew", "biToggle", "block", "calendarToday", "centerFocusWeak", "check", "checkBox", "checkBoxOutlinedBlank", "chevronLeft", "chevronRight", "close", "cloud", "cloudUpload", "code", "colorLens", "contentCopy", "contentPaste", "createNewFolder", "creditCard", "crop", "cropLandscape", "cropPortrait", "dataObject", "dataUsage", "database", "dateRange", "delete", "description", "desktopWindows", "dragIndicator", "driveFileMove", "edit", "event", "expandLess", "expandMore", "firstPage", "folder", "folderManaged", "formatBold", "formatClear", "formatItalic", "formatListBulleted", "formatListNumbered", "formatTextDirectionRToL", "groupWork", "hideImage", "image", "imageSearch", "insertDriveFile", "inventory", "invite", "javascript", "json", "keyboardArrowDown", "keyboardArrowUp", "label", "language", "link", "linkOff", "lock", "looks1", "looks2", "looks3", "looks4", "looks5", "looks6", "menuBook", "migrationRelease", "moreVert", "multipleStop", "musicNote", "notStarted", "notes", "openInFull", "openInNew", "outbound", "people", "phoneIphone", "photo", "pin", "place", "playCircle", "preview", "prismic", "public", "receiptLong", "refresh", "save", "schedule", "search", "security", "sentimentSatisfied", "settings", "settingsEthernet", "smartDisplay", "svelte", "tabletMac", "tag", "terminal", "textFields", "title", "toggleOff", "translate", "tune", "typescript", "unfoldMore", "unsplash", "upload", "videocam", "viewDay", "visibility", "vue", "warning", "zoomOutMap"];
+        };
+        size: import("@storybook/types").InputType | undefined;
+        variant: {
+            control: string;
+            options: string[];
+        };
+    };
+};
+export default meta;
+export declare const Default: {
+    name: string;
+    render: (args: {
+        name: "translate" | "visibility" | "search" | "link" | "description" | "code" | "add" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "attachFile" | "autoFixHigh" | "autorenew" | "biToggle" | "block" | "calendarToday" | "centerFocusWeak" | "check" | "checkBox" | "checkBoxOutlinedBlank" | "chevronLeft" | "chevronRight" | "close" | "cloud" | "cloudUpload" | "colorLens" | "contentCopy" | "contentPaste" | "createNewFolder" | "creditCard" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "dataUsage" | "database" | "dateRange" | "delete" | "desktopWindows" | "dragIndicator" | "driveFileMove" | "edit" | "event" | "expandLess" | "expandMore" | "firstPage" | "folder" | "folderManaged" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "groupWork" | "hideImage" | "image" | "imageSearch" | "insertDriveFile" | "inventory" | "invite" | "javascript" | "json" | "keyboardArrowDown" | "keyboardArrowUp" | "label" | "language" | "linkOff" | "lock" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "menuBook" | "migrationRelease" | "moreVert" | "multipleStop" | "musicNote" | "notStarted" | "notes" | "openInFull" | "openInNew" | "outbound" | "people" | "phoneIphone" | "photo" | "pin" | "place" | "playCircle" | "preview" | "prismic" | "public" | "receiptLong" | "refresh" | "save" | "schedule" | "security" | "sentimentSatisfied" | "settings" | "settingsEthernet" | "smartDisplay" | "svelte" | "tabletMac" | "tag" | "terminal" | "textFields" | "title" | "toggleOff" | "tune" | "typescript" | "unfoldMore" | "unsplash" | "upload" | "videocam" | "viewDay" | "vue" | "warning" | "zoomOutMap";
+        color?: ("green" | "grey" | "indigo" | "purple" | "tomato" | "amber") | undefined;
+        size?: "small" | "medium" | "large" | "extraSmall" | undefined;
+        iconSize?: "small" | "medium" | "large" | undefined;
+        radius?: 6 | "circle" | undefined;
+        variant?: "solid" | "soft" | undefined;
+        sx?: import("../../theme").SX | undefined;
+    }) => JSX.Element;
+    args: {
+        color: "grey";
+        name: "add";
+        size: "small";
+        variant: "soft";
+    };
+};

package/dist/components/BackgroundIcon/index.d.ts

@@ -0,0 +1 @@
+export { BackgroundIcon, type BackgroundIconProps } from "./BackgroundIcon";

package/dist/components/Box/Box.d.ts

@@ -1,7 +1,7 @@
 import { type CSSProperties, type ReactNode } from "react";
 import { type ThemeKeys } from "../../theme";
 export type BoxProps = {
-    as?: "div" | "nav" | "ul" | "ol" | "article" | "header" | "form" | "span";
+    as?: "div" | "nav" | "article" | "header" | "span";
     children?: ReactNode;
     position?: "absolute" | "relative" | "sticky" | "fixed";
     top?: number | string;

package/dist/components/Button/Button.d.ts

@@ -1,4 +1,4 @@
-import { type ButtonHTMLAttributes, type MouseEvent, type ReactNode } from "react";
+import { type MouseEvent, type ReactNode } from "react";
 import { type Keys } from "react-hotkeys-hook";
 import type { SX } from "../../theme";
 import { type IconName } from "../Icon";
@@ -42,11 +42,18 @@ export interface ButtonProps {
     /**  Underlines the text content of the button. Only applies to invisible buttons */
     underline?: boolean | "hover";
     hiddenLabel?: string;
+    /**
+     * The type of HTML button to render. Defaults to "button".
+     * You may want to use "submit" for your primary form button.
+     */
+    type?: "button" | "submit" | "reset";
+    /**
+     * The form ID this button is associated with.
+     */
+    form?: string;
     onClick?: (event: MouseEvent | KeyboardEvent) => void;
     onMouseDown?: (event: MouseEvent) => void;
     onMouseUp?: (event: MouseEvent) => void;
-    type?: ButtonHTMLAttributes<HTMLButtonElement>["type"];
-    form?: ButtonHTMLAttributes<HTMLButtonElement>["form"];
 }
 export declare const Button: (props: ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
 interface ButtonChildrenProps {

package/dist/components/Button/Button.stories.d.ts

@@ -35,11 +35,11 @@ export declare const Default: {
         hasPadding?: boolean | undefined;
         underline?: boolean | "hover" | undefined;
         hiddenLabel?: string | undefined;
+        type?: "button" | "submit" | "reset" | undefined;
+        form?: string | undefined;
         onClick?: ((event: import("react").MouseEvent<Element, MouseEvent> | KeyboardEvent) => void) | undefined;
         onMouseDown?: ((event: import("react").MouseEvent<Element, MouseEvent>) => void) | undefined;
         onMouseUp?: ((event: import("react").MouseEvent<Element, MouseEvent>) => void) | undefined;
-        type?: "button" | "submit" | "reset" | undefined;
-        form?: string | undefined;
         ref?: import("react").Ref<HTMLButtonElement> | undefined;
         key?: import("react").Key | null | undefined;
     }) => JSX.Element;

package/dist/components/EditableText/EditableText.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type ThemeKeys } from "../../theme";
 import { textVariantMapping } from "../Text";
 export interface EditableTextProps {
@@ -6,8 +7,7 @@ export interface EditableTextProps {
     color?: ThemeKeys<"color">;
     variant?: keyof typeof textVariantMapping;
     disabled?: boolean;
-    onFocus?: () => void;
     onBlur?: () => void;
     onChange?: (value: string) => void;
 }
-export declare function EditableText(props: EditableTextProps): JSX.Element;
+export declare const EditableText: (props: EditableTextProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;

package/dist/components/EditableText/EditableText.stories.d.ts

@@ -1,7 +1,8 @@
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("./EditableText").EditableTextProps>;
+/// <reference types="react" />
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("./EditableText").EditableTextProps & import("react").RefAttributes<HTMLDivElement>>;
 export default _default;
 export declare const Default: {
-    render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("./EditableText").EditableTextProps>;
+    render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("./EditableText").EditableTextProps & import("react").RefAttributes<HTMLDivElement>>;
     args: {
         "aria-label": string;
         value: string;

package/dist/components/IconButton/IconButton.d.ts

@@ -14,7 +14,15 @@ export interface IconButtonProps {
     sx?: SX;
     variant?: "solid" | "ghost";
     disabled?: boolean;
-    type?: "button";
+    /**
+     * The type of HTML button to render. Defaults to "button".
+     * You may want to use "submit" for your primary form button.
+     */
+    type?: "button" | "submit" | "reset";
+    /**
+     * The form ID this button is associated with.
+     */
+    form?: string;
     onClick?: (event: MouseEvent | KeyboardEvent) => void;
     onMouseDown?: (event: MouseEvent) => void;
     onMouseUp?: (event: MouseEvent) => void;

package/dist/components/ProgressBar/ProgressBar.stories.d.ts

@@ -61,9 +61,9 @@ declare const meta: {
         max?: number | undefined;
         getValueLabel?: ((value: number, max: number) => string) | undefined;
         displayLabel?: boolean | undefined;
-        color?: "inherit" | "currentColor" | "transparent" | "white" | "black" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark12" | "indigo2" | "indigo4" | "indigo5" | "indigo7" | "indigo8" | "indigo10" | "indigo11" | "indigo12" | "green3" | "green4" | "green9" | "green10" | "green11" | "green12" | "amber3" | "amber4" | "amber9" | "amber10" | "amber11" | "amber12" | "tomato1" | "tomato2" | "tomato3" | "tomato4" | "tomato5" | "tomato6" | "tomato7" | "tomato8" | "tomato9" | "tomato10" | "tomato11" | "tomato12" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "greyAlpha1" | "logoPurple" | "logoBlue" | "logoYellow" | "logoRed" | undefined;
-        backgroundColor?: "inherit" | "currentColor" | "transparent" | "white" | "black" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark12" | "indigo2" | "indigo4" | "indigo5" | "indigo7" | "indigo8" | "indigo10" | "indigo11" | "indigo12" | "green3" | "green4" | "green9" | "green10" | "green11" | "green12" | "amber3" | "amber4" | "amber9" | "amber10" | "amber11" | "amber12" | "tomato1" | "tomato2" | "tomato3" | "tomato4" | "tomato5" | "tomato6" | "tomato7" | "tomato8" | "tomato9" | "tomato10" | "tomato11" | "tomato12" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "greyAlpha1" | "logoPurple" | "logoBlue" | "logoYellow" | "logoRed" | undefined;
-        labelColor?: "inherit" | "currentColor" | "transparent" | "white" | "black" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark12" | "indigo2" | "indigo4" | "indigo5" | "indigo7" | "indigo8" | "indigo10" | "indigo11" | "indigo12" | "green3" | "green4" | "green9" | "green10" | "green11" | "green12" | "amber3" | "amber4" | "amber9" | "amber10" | "amber11" | "amber12" | "tomato1" | "tomato2" | "tomato3" | "tomato4" | "tomato5" | "tomato6" | "tomato7" | "tomato8" | "tomato9" | "tomato10" | "tomato11" | "tomato12" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "greyAlpha1" | "logoPurple" | "logoBlue" | "logoYellow" | "logoRed" | undefined;
+        color?: "inherit" | "currentColor" | "transparent" | "white" | "black" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark12" | "indigo2" | "indigo3" | "indigo4" | "indigo5" | "indigo7" | "indigo8" | "indigo10" | "indigo11" | "indigo12" | "green3" | "green4" | "green8" | "green9" | "green10" | "green11" | "green12" | "amber3" | "amber4" | "amber9" | "amber10" | "amber11" | "amber12" | "tomato1" | "tomato2" | "tomato3" | "tomato4" | "tomato5" | "tomato6" | "tomato7" | "tomato8" | "tomato9" | "tomato10" | "tomato11" | "tomato12" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "greyAlpha1" | "logoPurple" | "logoBlue" | "logoYellow" | "logoRed" | undefined;
+        backgroundColor?: "inherit" | "currentColor" | "transparent" | "white" | "black" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark12" | "indigo2" | "indigo3" | "indigo4" | "indigo5" | "indigo7" | "indigo8" | "indigo10" | "indigo11" | "indigo12" | "green3" | "green4" | "green8" | "green9" | "green10" | "green11" | "green12" | "amber3" | "amber4" | "amber9" | "amber10" | "amber11" | "amber12" | "tomato1" | "tomato2" | "tomato3" | "tomato4" | "tomato5" | "tomato6" | "tomato7" | "tomato8" | "tomato9" | "tomato10" | "tomato11" | "tomato12" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "greyAlpha1" | "logoPurple" | "logoBlue" | "logoYellow" | "logoRed" | undefined;
+        labelColor?: "inherit" | "currentColor" | "transparent" | "white" | "black" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark12" | "indigo2" | "indigo3" | "indigo4" | "indigo5" | "indigo7" | "indigo8" | "indigo10" | "indigo11" | "indigo12" | "green3" | "green4" | "green8" | "green9" | "green10" | "green11" | "green12" | "amber3" | "amber4" | "amber9" | "amber10" | "amber11" | "amber12" | "tomato1" | "tomato2" | "tomato3" | "tomato4" | "tomato5" | "tomato6" | "tomato7" | "tomato8" | "tomato9" | "tomato10" | "tomato11" | "tomato12" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "greyAlpha1" | "logoPurple" | "logoBlue" | "logoYellow" | "logoRed" | undefined;
         height?: "large" | "normal" | "collapsed" | undefined;
         transition?: "slow" | "fast" | undefined;
         sx?: import("../../theme").SX | undefined;

package/dist/components/Tooltip/Tooltip.d.ts

@@ -1,5 +1,5 @@
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { type ReactNode } from "react";
+import { type ReactNode, type RefObject } from "react";
 export declare const TooltipProvider: import("react").FC<TooltipPrimitive.TooltipProviderProps>;
 interface BaseTooltipProps {
     children: ReactNode;
@@ -9,12 +9,11 @@ interface BaseTooltipProps {
     delayDuration?: Parameters<typeof TooltipPrimitive.Root>[0]["delayDuration"];
     open?: boolean;
     /**
-     * Try not to use this.
-     * You only need this with bad components like Tiptap's BubbleMenu which renders inline instead of using a Portal.
-     * Remove this prop once this is done: https://linear.app/prismic/issue/PBD-1067/repeatable-zone-header-covers-link-dropdown
-     * i.e, when the Tiptap BubbleMenu has been rewritten.
+     * If you want to render the tooltip inside a specific container, you can pass a ref to that container.
+     * This is useful when you want to render the tooltip inside a container that is not the root element,
+     * i.e. when wanting to render the tooltip inside Tiptap's BubbleMenu.
      */
-    zIndexHack?: boolean;
+    containerRef?: RefObject<HTMLDivElement>;
     visible?: boolean;
     /**
      * By enabling the stable mount a `div` will be rendered around your trigger item.

package/dist/components/Tooltip/Tooltip.stories.d.ts

@@ -3,6 +3,6 @@ import { Tooltip } from "./Tooltip";
 declare const meta: Meta<typeof Tooltip>;
 export default meta;
 export declare const Default: {
-    render: () => JSX.Element;
     name: string;
+    render: () => JSX.Element;
 };