@prismicio/editor-ui 0.4.20 → 0.4.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/dist/components/Badge/Badge.d.ts +13 -11
  2. package/dist/components/Badge/Badge.stories.d.ts +2 -12
  3. package/dist/components/BlankSlate/BlankSlate.d.ts +1 -1
  4. package/dist/components/Dialog/Dialog.d.ts +2 -1
  5. package/dist/components/Dialog/Options/DialogOptions.d.ts +5 -1
  6. package/dist/components/DropdownMenu/index.d.ts +0 -1
  7. package/dist/components/EditableText/EditableText.d.ts +2 -2
  8. package/dist/components/FileUpload/FileUpload.utils.d.ts +2 -3
  9. package/dist/components/Form/FormInput.d.ts +1 -0
  10. package/dist/components/Form/FormSearchInput.d.ts +2 -1
  11. package/dist/components/InvisibleButton/InvisibleButton.d.ts +2 -2
  12. package/dist/components/MediaCard/MediaCard.d.ts +7 -0
  13. package/dist/components/MediaCard/MediaCard.stories.d.ts +3 -1
  14. package/dist/components/MediaCard/index.d.ts +1 -1
  15. package/dist/components/MediaProgress/index.d.ts +1 -1
  16. package/dist/components/SelectButton/SelectButton.d.ts +2 -2
  17. package/dist/components/Skeleton/Skeleton.d.ts +1 -1
  18. package/dist/components/Text/Text.d.ts +20 -7
  19. package/dist/components/Text/index.d.ts +3 -1
  20. package/dist/components/TextArea/TextArea.d.ts +1 -0
  21. package/dist/components/ToggleButtonGroup/ToggleButtonGroup.d.ts +3 -2
  22. package/dist/index.cjs.js +118 -116
  23. package/dist/index.d.ts +3 -2
  24. package/dist/index.es.js +6875 -6690
  25. package/dist/style.css +1 -1
  26. package/dist/theme/new/theme.d.ts +2 -0
  27. package/package.json +2 -2
  28. package/dist/components/Badge/Badge.css.d.ts +0 -30
  29. package/dist/components/ColorInput/ColorArea.css.d.ts +0 -2
  30. package/dist/components/ColorInput/ColorInput.css.d.ts +0 -7
  31. package/dist/components/ColorInput/ColorSlider.css.d.ts +0 -3
  32. package/dist/components/DropdownMenu/DropdownMenu.css.d.ts +0 -19
  33. package/dist/components/Group/Group.css.d.ts +0 -3
  34. package/dist/components/Group/GroupItem.css.d.ts +0 -4
  35. package/dist/components/Popover/Popover.css.d.ts +0 -1
  36. package/dist/components/Radio/RadioButton.css.d.ts +0 -3
  37. package/dist/components/Radio/RadioCard.css.d.ts +0 -1
  38. package/dist/components/Radio/RadioGroup.css.d.ts +0 -1
  39. package/dist/components/Radio/RadioItem.css.d.ts +0 -10
  40. package/dist/components/Select/Select.css.d.ts +0 -14
  41. package/dist/components/Slider/Slider.css.d.ts +0 -4
  42. package/dist/components/Tag/Tag.css.d.ts +0 -5
  43. package/dist/components/Text/Text.css.d.ts +0 -14
  44. package/dist/components/Toast/Toast.css.d.ts +0 -4
@@ -1,13 +1,15 @@
1
1
  import { type ReactNode } from "react";
2
- export declare const Badge: import("react").ForwardRefExoticComponent<Readonly<{
2
+ import { type IconName } from "../Icon";
3
+ export interface BadgeProps {
3
4
  title: ReactNode;
4
- color?: "green" | "grey" | "purple" | "tomato" | "amber" | undefined;
5
- size?: "medium" | "large" | undefined;
6
- maxWidth?: 150 | 250 | undefined;
7
- onClose?: (() => void) | undefined;
8
- icon?: "visibility" | "search" | "link" | "description" | "code" | "block" | "add" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "autoFixHigh" | "calendarToday" | "centerFocusWeak" | "check" | "checkBox" | "checkBoxOutlinedBlank" | "chevronLeft" | "chevronRight" | "close" | "cloud" | "cloudUpload" | "colorLens" | "contentCopy" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "database" | "dateRange" | "delete" | "desktopWindows" | "dragIndicator" | "driveFileMove" | "edit" | "event" | "expandLess" | "expandMore" | "firstPage" | "folder" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "hideImage" | "image" | "imageSearch" | "insertDriveFile" | "inventory" | "keyboardArrowDown" | "keyboardArrowUp" | "label" | "linkOff" | "lock" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "moreVert" | "musicNote" | "notes" | "openInFull" | "openInNew" | "phoneIphone" | "photo" | "pin" | "place" | "preview" | "prismic" | "public" | "refresh" | "save" | "schedule" | "smartDisplay" | "tabletMac" | "tag" | "textFields" | "toggleOff" | "unfoldMore" | "unsplash" | "viewDay" | "zoomOutMap" | undefined;
9
- onClick?: (() => void) | undefined;
10
- selected?: boolean | undefined;
11
- onMouseEnter?: (() => void) | undefined;
12
- onMouseLeave?: (() => void) | undefined;
13
- }> & import("react").RefAttributes<HTMLDivElement>>;
5
+ color?: "grey" | "green" | "amber" | "purple" | "tomato";
6
+ size?: "large" | "medium";
7
+ maxWidth?: 150 | 250;
8
+ onClose?: () => void;
9
+ icon?: IconName;
10
+ onClick?: () => void;
11
+ selected?: boolean;
12
+ onMouseEnter?: () => void;
13
+ onMouseLeave?: () => void;
14
+ }
15
+ export declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLDivElement>>;
@@ -1,15 +1,4 @@
1
- declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, Readonly<{
2
- title: import("react").ReactNode;
3
- color?: "green" | "grey" | "purple" | "tomato" | "amber" | undefined;
4
- size?: "medium" | "large" | undefined;
5
- maxWidth?: 150 | 250 | undefined;
6
- onClose?: (() => void) | undefined;
7
- icon?: "visibility" | "search" | "link" | "description" | "code" | "block" | "add" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "autoFixHigh" | "calendarToday" | "centerFocusWeak" | "check" | "checkBox" | "checkBoxOutlinedBlank" | "chevronLeft" | "chevronRight" | "close" | "cloud" | "cloudUpload" | "colorLens" | "contentCopy" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "database" | "dateRange" | "delete" | "desktopWindows" | "dragIndicator" | "driveFileMove" | "edit" | "event" | "expandLess" | "expandMore" | "firstPage" | "folder" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "hideImage" | "image" | "imageSearch" | "insertDriveFile" | "inventory" | "keyboardArrowDown" | "keyboardArrowUp" | "label" | "linkOff" | "lock" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "moreVert" | "musicNote" | "notes" | "openInFull" | "openInNew" | "phoneIphone" | "photo" | "pin" | "place" | "preview" | "prismic" | "public" | "refresh" | "save" | "schedule" | "smartDisplay" | "tabletMac" | "tag" | "textFields" | "toggleOff" | "unfoldMore" | "unsplash" | "viewDay" | "zoomOutMap" | undefined;
8
- onClick?: (() => void) | undefined;
9
- selected?: boolean | undefined;
10
- onMouseEnter?: (() => void) | undefined;
11
- onMouseLeave?: (() => void) | undefined;
12
- }> & import("react").RefAttributes<HTMLDivElement>>;
1
+ declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("./Badge").BadgeProps & import("react").RefAttributes<HTMLDivElement>>;
13
2
  export default _default;
14
3
  export declare const Default: {
15
4
  args: {
@@ -18,6 +7,7 @@ export declare const Default: {
18
7
  size: string;
19
8
  onClose: () => undefined;
20
9
  icon: string;
10
+ selected: boolean;
21
11
  };
22
12
  name: string;
23
13
  };
@@ -12,7 +12,7 @@ interface BlankSlateIconProps {
12
12
  backgroundColor?: ThemeKeys<"color">;
13
13
  borderColor?: ThemeKeys<"color">;
14
14
  borderStyle?: CSSProperties["borderStyle"];
15
- size?: "medium" | "large";
15
+ size?: "medium" | "large" | "xlarge";
16
16
  }
17
17
  export declare function BlankSlateIcon(props: BlankSlateIconProps): JSX.Element;
18
18
  declare const titleSizeVariant: {
@@ -1,5 +1,5 @@
1
1
  import { type DialogContentProps } from "@radix-ui/react-dialog";
2
- import type { FC, PropsWithChildren, ReactNode } from "react";
2
+ import { type FC, type PropsWithChildren, type ReactNode } from "react";
3
3
  import { type IconName } from "../Icon";
4
4
  export interface Custom {
5
5
  width: number | "auto";
@@ -37,6 +37,7 @@ type ActionsProps = {
37
37
  loading?: boolean;
38
38
  disabled?: boolean;
39
39
  disabledTooltip?: string;
40
+ color?: "grey" | "purple" | "dark" | "tomato" | "amber" | "green";
40
41
  };
41
42
  cancel?: {
42
43
  text: string;
@@ -18,8 +18,12 @@ export interface DialogOptionsProps {
18
18
  * @default large
19
19
  */
20
20
  width?: "large" | "auto";
21
+ /**
22
+ * The sticky footer of the dialog options panel.
23
+ */
24
+ footer?: ReactNode;
21
25
  }
22
- export declare const DialogOptions: ({ value, onValueChange, children, width, padding }: DialogOptionsProps) => JSX.Element;
26
+ export declare const DialogOptions: ({ value, onValueChange, children, width, padding, footer }: DialogOptionsProps) => JSX.Element;
23
27
  interface DialogOptionsItemProps {
24
28
  value: string;
25
29
  icon?: IconName;
@@ -1,2 +1 @@
1
1
  export { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger } from "./DropdownMenu";
2
- export * as dropdownMenuStyles from "./DropdownMenu.css";
@@ -1,5 +1,5 @@
1
1
  import { colors } from "../../theme/colors";
2
- import { variant as textVariants } from "../Text/Text.css";
2
+ import { textVariantMapping } from "../Text";
3
3
  export interface EditableTextProps {
4
4
  "aria-label": string;
5
5
  value: string;
@@ -7,7 +7,7 @@ export interface EditableTextProps {
7
7
  onBlur?: () => void;
8
8
  onChange?: (value: string) => void;
9
9
  color?: keyof typeof colors;
10
- variant?: keyof typeof textVariants;
10
+ variant?: keyof typeof textVariantMapping;
11
11
  disabled?: boolean;
12
12
  }
13
13
  export declare function EditableText(props: EditableTextProps): JSX.Element;
@@ -1,11 +1,10 @@
1
- import type { FileDropItem } from "@react-aria/dnd";
2
1
  export declare const validExtensions: {
3
2
  readonly applicationAll: "application/*";
4
- readonly textAll: "text/*";
5
3
  readonly imageAll: "image/*";
6
4
  readonly videoAll: "video/*";
7
5
  readonly audioAll: "audio/*";
6
+ readonly csv: "text/csv";
8
7
  };
9
8
  export type MediaAssetType = "image" | "all";
10
- export declare function isValidFileExtension(item: FileDropItem, assetType: "image" | "all"): boolean;
9
+ export declare function isValidFileExtension(type: string, assetType: "image" | "all"): boolean;
11
10
  export declare function getNonSpecificExtension(inputString: string): string;
@@ -16,6 +16,7 @@ export interface FormInputProps {
16
16
  onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
17
17
  onValueChange?: (value: string) => void;
18
18
  onPaste?: ClipboardEventHandler<HTMLInputElement>;
19
+ onBlur?: () => void;
19
20
  }
20
21
  export declare function FormInput(props: FormInputProps): JSX.Element;
21
22
  type AutoCompleteValue = "username" | "current-password";
@@ -4,8 +4,9 @@ export interface FormSearchInputProps {
4
4
  placeholder?: string;
5
5
  maxLength?: number;
6
6
  isLoading?: boolean;
7
+ disabled?: boolean;
7
8
  value: string;
8
- sx?: SX;
9
9
  onValueChange: (value: string) => void;
10
+ sx?: SX;
10
11
  }
11
12
  export declare function FormSearchInput(props: FormSearchInputProps): JSX.Element;
@@ -1,6 +1,6 @@
1
1
  import { type MouseEvent } from "react";
2
2
  import { type IconName } from "../Icon";
3
- import type { variant } from "../Text/Text.css";
3
+ import { textVariantMapping } from "../Text";
4
4
  import * as styles from "./InvisibleButton.css";
5
5
  export interface InvisibleButtonProps {
6
6
  buttonText: string;
@@ -9,7 +9,7 @@ export interface InvisibleButtonProps {
9
9
  endIcon?: IconName;
10
10
  onClick?: (event: MouseEvent) => void;
11
11
  startIcon?: IconName;
12
- textVariant?: keyof typeof variant;
12
+ textVariant?: keyof typeof textVariantMapping;
13
13
  inline?: boolean;
14
14
  }
15
15
  export declare const InvisibleButton: import("react").ForwardRefExoticComponent<InvisibleButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
@@ -7,9 +7,11 @@ interface MediaCardProps {
7
7
  * @example "png"
8
8
  */
9
9
  extension: string;
10
+ kind?: string;
10
11
  width?: number;
11
12
  height?: number;
12
13
  selected?: boolean;
14
+ loading?: boolean;
13
15
  /**
14
16
  * The upload status of the media
15
17
  * @default idle
@@ -32,4 +34,9 @@ interface MediaCardProps {
32
34
  onCheckedChange?: (checked: boolean) => void;
33
35
  }
34
36
  export declare function MediaCard(props: MediaCardProps): JSX.Element;
37
+ interface MediaCardPlaceholderProps {
38
+ extension: MediaCardProps["extension"];
39
+ filename: MediaCardProps["filename"];
40
+ }
41
+ export declare function MediaCardPlaceholder(props: MediaCardPlaceholderProps): JSX.Element;
35
42
  export {};
@@ -43,10 +43,12 @@ export declare const Default: {
43
43
  url: string;
44
44
  filename: string;
45
45
  extension: string;
46
+ kind?: string | undefined;
46
47
  width?: number | undefined;
47
48
  height?: number | undefined;
48
49
  selected?: boolean | undefined;
49
- status?: import("../MediaProgress/MediaProgress").Status | undefined;
50
+ loading?: boolean | undefined;
51
+ status?: import("../MediaProgress").Status | undefined;
50
52
  size?: number | undefined;
51
53
  onCardClick?: (() => void) | undefined;
52
54
  onCheckedChange?: ((checked: boolean) => void) | undefined;
@@ -1 +1 @@
1
- export { MediaCard } from "./MediaCard";
1
+ export { MediaCard, MediaCardPlaceholder } from "./MediaCard";
@@ -1 +1 @@
1
- export { MediaProgress } from "./MediaProgress";
1
+ export { MediaProgress, type Status } from "./MediaProgress";
@@ -1,10 +1,10 @@
1
- import type { colors } from "../../theme/colors";
1
+ import type { ThemeKeys } from "../../theme/new";
2
2
  import { type IconName } from "../Icon";
3
3
  export interface SelectButtonProps {
4
4
  textContent: string;
5
5
  onSelect: () => void;
6
6
  icon?: IconName;
7
- color?: keyof typeof colors;
7
+ color?: ThemeKeys<"color">;
8
8
  disabled?: boolean;
9
9
  }
10
10
  /**
@@ -1,7 +1,7 @@
1
1
  import type { SX, ThemeKeys } from "../../theme/new";
2
2
  export interface Props {
3
3
  component?: "span";
4
- borderRadius?: ThemeKeys<"borderRadius", 0 | 4 | 6 | "100%">;
4
+ borderRadius?: ThemeKeys<"borderRadius", 0 | 4 | 6 | 12 | "100%">;
5
5
  color?: ThemeKeys<"color", "grey1" | "grey5">;
6
6
  width?: number | string;
7
7
  height?: number | string;
@@ -1,15 +1,13 @@
1
1
  import { type ReactNode } from "react";
2
- import { colors } from "../../theme/colors";
3
- import type { SX } from "../../theme/new";
4
- import * as styles from "./Text.css";
2
+ import { type SX, type ThemeKeys } from "../../theme/new";
5
3
  export interface TextProps {
6
- align?: keyof typeof styles.align;
4
+ align?: "inherit" | "start" | "center" | "end";
7
5
  children?: ReactNode;
8
6
  className?: string;
9
- color?: keyof typeof colors;
7
+ color?: ThemeKeys<"color">;
10
8
  component?: Component;
11
9
  noWrap?: boolean;
12
- variant?: Variant;
10
+ variant?: keyof typeof textVariantMapping;
13
11
  noSelect?: boolean;
14
12
  htmlFor?: string;
15
13
  underline?: boolean;
@@ -18,5 +16,20 @@ export interface TextProps {
18
16
  }
19
17
  export declare const Text: import("react").ForwardRefExoticComponent<TextProps & import("react").RefAttributes<HTMLElement>>;
20
18
  type Component = "code" | "h1" | "h2" | "h3" | "h4" | "h5" | "kbd" | "p" | "pre" | "span" | "label";
21
- type Variant = keyof typeof styles.variant;
19
+ export declare const textVariantMapping: {
20
+ readonly normal: "p";
21
+ readonly bold: "p";
22
+ readonly italic: "p";
23
+ readonly small: "p";
24
+ readonly extraSmall: "p";
25
+ readonly smallBold: "p";
26
+ readonly smallItalic: "p";
27
+ readonly emphasized: "p";
28
+ readonly h1: "h1";
29
+ readonly h2: "h2";
30
+ readonly h3: "h3";
31
+ readonly h4: "h4";
32
+ readonly h5: "h5";
33
+ readonly inherit: "p";
34
+ };
22
35
  export {};
@@ -1 +1,3 @@
1
- export { Text, type TextProps } from "./Text";
1
+ import textStyles from "./Text.module.css";
2
+ export { Text, type TextProps, textVariantMapping } from "./Text";
3
+ export { textStyles };
@@ -11,5 +11,6 @@ export interface TextAreaProps {
11
11
  paddingLeft?: ThemeKeys<"space">;
12
12
  paddingRight?: ThemeKeys<"space">;
13
13
  sx?: SX;
14
+ onBlur?: () => void;
14
15
  }
15
16
  export declare function TextArea(props: TextAreaProps): JSX.Element;
@@ -1,4 +1,5 @@
1
1
  import type { ReactNode } from "react";
2
+ import type { IconName } from "../Icon";
2
3
  type ToggleButtonGroupProps<Value extends string> = {
3
4
  children?: ReactNode;
4
5
  disabled?: boolean;
@@ -21,8 +22,8 @@ interface ToggleButtonGroupItemProps {
21
22
  children?: ReactNode;
22
23
  disabled?: boolean;
23
24
  value: string;
24
- endIcon?: ReactNode;
25
- startIcon?: ReactNode;
25
+ endIcon?: IconName;
26
+ startIcon?: IconName;
26
27
  }
27
28
  export declare function ToggleButtonGroupItem(props: ToggleButtonGroupItemProps): JSX.Element;
28
29
  export {};