@prismicio/editor-ui 0.4.49 → 0.4.50

package/dist/components/Avatar/Avatar.d.ts

@@ -1,8 +1,16 @@
+import type { ReactNode } from "react";
 export interface AvatarProps {
     imageUrl?: string;
     firstName?: string;
     lastName?: string;
     hasBorder?: boolean;
-    size?: 16 | 24 | 32;
+    size?: 16 | 24 | 32 | 40;
+    variant?: "circle" | "square";
+    /**
+     * The content to show when the imageUrl was not provided
+     * or image is not available after delayMs.
+     * If not provided, the initials of the first and last name will be shown.
+     */
+    fallback?: ReactNode;
 }
 export declare function Avatar(props: AvatarProps): JSX.Element;

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

@@ -7,6 +7,7 @@ export declare const Default: {
         imageUrl: string;
         hasBorder: boolean;
         size: number;
+        variant: string;
     };
     name: string;
 };

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

@@ -59,7 +59,7 @@ export declare const Default: {
             bottomRight?: 0 | 2 | 1 | "50%" | "100%" | "inherit" | 4 | 6 | 8 | 10 | 12 | undefined;
         }) | undefined;
         borderStyle?: "none" | "dashed" | "solid" | undefined;
-        backgroundColor?: "inherit" | "currentColor" | "transparent" | "white" | "black" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark12" | "indigo2" | "indigo4" | "indigo5" | "indigo7" | "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" | 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;
         opacity?: 0 | 1 | 0.1 | 0.3 | 0.4 | 0.5 | 0.6 | 0.8 | 0.9 | undefined;
         visibility?: "hidden" | "visible" | undefined;
         overflowY?: "auto" | "hidden" | undefined;
@@ -123,7 +123,7 @@ export declare const Default: {
             bottomRight?: 0 | 2 | 1 | "50%" | "100%" | "inherit" | 4 | 6 | 8 | 10 | 12 | undefined;
         }) | undefined;
         borderStyle?: "none" | "dashed" | "solid" | undefined;
-        backgroundColor?: "inherit" | "currentColor" | "transparent" | "white" | "black" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark12" | "indigo2" | "indigo4" | "indigo5" | "indigo7" | "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" | 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;
         opacity?: 0 | 1 | 0.1 | 0.3 | 0.4 | 0.5 | 0.6 | 0.8 | 0.9 | undefined;
         visibility?: "hidden" | "visible" | undefined;
         overflowY?: "auto" | "hidden" | undefined;

package/dist/components/ComboBox/ComboBox.d.ts

@@ -1,23 +1,59 @@
-import { type ReactNode } from "react";
+import { type ReactNode, type RefObject } from "react";
 import type { SX } from "../../theme";
-type Variant = "attached" | "detached";
+import { type IconProps } from "../Icon";
+type Variant = "attached" | "detached" | "detached-connected";
 export interface ComboBoxProps {
     children: ReactNode;
+    /**
+     * Variant defines the appearance and behavior of the ComboBox
+     * - "detached" - the dropdown is hiding or appearing according to user focus on the input
+     * - "detached-connected" - same as "detached" but the dropdown is connected to the input visually
+     * - "attached" - dropdown is connected to the input both visually and functionally (it's always shown)
+     */
     variant?: Variant;
+    /**
+     * Aligns content above the input or below
+     * Supports only "detached*" variants
+     */
+    side?: "top" | "bottom";
     sx?: SX;
+    /**
+     * Controls the visibility of the list
+     * Enables "detached*" variants to be controlled from the outside
+     */
+    isOpen?: boolean;
+    /**
+     * Callback to be called when the list is closed
+     * Enables "detached*" variants to be controlled from the outside
+     */
+    onClose?: () => void;
+    /**
+     * Refs to elements that should not close the list when clicked
+     */
+    dropdownRefs?: RefObject<HTMLDivElement>[];
+    /**
+     * Enables a translucent grey overlay that appears when the list is open
+     * Supports only "detached*" variants
+     */
+    overlay?: boolean;
 }
 export declare const ComboBox: (props: ComboBoxProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
 interface ComboBoxContentProps {
     children: ReactNode;
-    /**
-     * Aligns "detached" content above the input or below
-     * @variant - detached
-     */
-    side?: "top" | "bottom";
     /**
      * Adds padding to the top and bottom of the content
      */
     paddingBlock?: 0 | 2 | 4;
+    /**
+     * Maximum height of the content
+     */
+    maxHeight?: 200 | "full";
+    /**
+     * Disable default onClick handler.
+     * Useful when you want to handle click events manually,
+     * ie. with a Link component to make cmd+click work.
+     */
+    disableOnClick?: boolean;
 }
 export declare const ComboBoxContent: (props: ComboBoxContentProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
 type ComboBoxItemProps = {
@@ -26,6 +62,12 @@ type ComboBoxItemProps = {
     onCheckedChange?: (checked: boolean) => void;
     disabled?: boolean;
     children: ReactNode;
+    iconStyle?: Pick<IconProps, "color" | "size">;
+    /**
+     * Changes the style of the item
+     * "action-list-item" styles the item as if it was an ActionListItem component
+     */
+    variant?: "default" | "action-list-item";
 };
 export declare const ComboBoxItem: (props: ComboBoxItemProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
 interface ComboBoxInputProps {
@@ -37,6 +79,13 @@ interface ComboBoxInputProps {
      * Needed when ComboBox is nested within Popovers
      */
     autoFocus?: boolean;
+    /**
+     * Callback to be called when the input is focused
+     * Returning false will prevent the list from opening
+     */
+    onFocus?: () => boolean;
+    maxLength?: number;
+    endAdornment?: boolean;
 }
 export declare const ComboBoxInput: (props: ComboBoxInputProps & import("react").RefAttributes<HTMLInputElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
 interface ComboBoxActionProps {

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

@@ -9,6 +9,9 @@ declare const meta: {
             control: string;
             options: string[];
         };
+        overlay: {
+            control: string;
+        };
     };
 };
 export default meta;

package/dist/components/DropdownMenu/DropdownMenu.d.ts

@@ -54,7 +54,7 @@ export interface DropdownMenuContentProps {
      */
     childrenFocusScope?: boolean;
 }
-export declare function DropdownMenuContent(props: DropdownMenuContentProps): JSX.Element;
+export declare const DropdownMenuContent: (props: DropdownMenuContentProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
 interface DropdownMenuItemProps {
     children: ReactNode;
     disabled?: boolean;

package/dist/components/Form/FormField.d.ts

@@ -11,6 +11,7 @@ type LabelProps = {
     label: string;
     id: string;
 } | object;
+export type RoundedSide = "all" | "top" | "bottom";
 export type FormInputFieldProps = {
     children?: ReactNode;
     error?: boolean | string;
@@ -18,6 +19,7 @@ export type FormInputFieldProps = {
     disabled?: boolean;
     size?: "small" | "medium" | "large";
     sx?: SX;
+    roundedSide?: RoundedSide;
 } & LabelProps;
 export declare const FormInputField: (props: FormInputFieldProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
 export {};

package/dist/components/Form/FormSearchInput.d.ts

@@ -1,6 +1,6 @@
 import { type AriaRole, type FocusEvent } from "react";
 import { type FormInputFieldProps } from "./FormField";
-export interface FormSearchInputProps extends Pick<FormInputFieldProps, "disabled" | "error" | "sx" | "description"> {
+export interface FormSearchInputProps extends Pick<FormInputFieldProps, "disabled" | "error" | "sx" | "description" | "roundedSide"> {
     label?: string;
     placeholder?: string;
     maxLength?: number;

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" | "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" | undefined;
-        backgroundColor?: "inherit" | "currentColor" | "transparent" | "white" | "black" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark12" | "indigo2" | "indigo4" | "indigo5" | "indigo7" | "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" | undefined;
-        labelColor?: "inherit" | "currentColor" | "transparent" | "white" | "black" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark12" | "indigo2" | "indigo4" | "indigo5" | "indigo7" | "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" | 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;
         height?: "large" | "normal" | "collapsed" | undefined;
         transition?: "slow" | "fast" | undefined;
         sx?: import("../../theme").SX | undefined;