@prismicio/editor-ui 0.4.14 → 0.4.16
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.
- package/dist/components/Checkbox/Checkbox.d.ts +1 -0
- package/dist/components/Checkbox/Checkbox.stories.d.ts +2 -0
- package/dist/components/DateInput/DateInput.d.ts +2 -0
- package/dist/components/DateInput/DateSegments.d.ts +8 -2
- package/dist/components/DropdownMenu/DropdownMenu.css.d.ts +1 -0
- package/dist/components/DropdownMenu/DropdownMenu.d.ts +2 -1
- package/dist/components/DropdownMenu/DropdownMenu.stories.d.ts +4 -2
- package/dist/components/EditableText/EditableText.d.ts +1 -0
- package/dist/components/EditableText/EditableText.stories.d.ts +1 -0
- package/dist/components/Form/FormDateInput.d.ts +2 -0
- package/dist/components/IconButton/IconButton.css.d.ts +17 -2
- package/dist/components/IconButton/IconButton.d.ts +5 -4
- package/dist/components/IconButton/IconButton.stories.d.ts +1 -3
- package/dist/components/SearchInput/SearchInput.d.ts +3 -4
- package/dist/components/SearchInput/SearchInput.stories.d.ts +2 -10
- package/dist/components/Skeleton/Skeleton.css.d.ts +1 -0
- package/dist/components/Suspense/AnimatedSuspense.css.d.ts +1 -0
- package/dist/components/Suspense/AnimatedSuspense.d.ts +9 -0
- package/dist/components/Suspense/index.d.ts +1 -0
- package/dist/components/Table/Table.css.d.ts +9 -6
- package/dist/components/Table/Table.d.ts +45 -6
- package/dist/components/Toast/ToastContext.d.ts +2 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.es.js +7630 -7550
- package/dist/style.css +1 -1
- package/dist/theme/selectors.d.ts +20 -20
- package/dist/theme/sprinkles.css.d.ts +2071 -581
- package/dist/theme/vars.css.d.ts +18 -0
- package/package.json +2 -2
|
@@ -4,8 +4,10 @@ export declare const Default: import("@storybook/types").StoryAnnotations<import
|
|
|
4
4
|
checked?: boolean | undefined;
|
|
5
5
|
disabled?: boolean | undefined;
|
|
6
6
|
onCheckedChange?: ((checked: boolean) => void) | undefined;
|
|
7
|
+
tabIndex?: number | undefined;
|
|
7
8
|
}, {
|
|
8
9
|
disabled?: boolean | undefined;
|
|
10
|
+
tabIndex?: number | undefined;
|
|
9
11
|
checked?: boolean | undefined;
|
|
10
12
|
onCheckedChange?: ((checked: boolean) => void) | undefined;
|
|
11
13
|
}>;
|
|
@@ -1,3 +1,9 @@
|
|
|
1
|
-
import type
|
|
1
|
+
import { CalendarDate, type DateValue, type Time, ZonedDateTime } from "@internationalized/date";
|
|
2
2
|
import { type AriaDateFieldProps } from "@react-aria/datepicker";
|
|
3
|
-
|
|
3
|
+
interface DateSegmentsProps {
|
|
4
|
+
ariaDateFieldProps: AriaDateFieldProps<DateValue>;
|
|
5
|
+
defaultTime?: Time;
|
|
6
|
+
placeholderValue: CalendarDate | ZonedDateTime;
|
|
7
|
+
}
|
|
8
|
+
export declare function DateSegments(props: DateSegmentsProps): JSX.Element;
|
|
9
|
+
export {};
|
|
@@ -9,9 +9,10 @@ interface DropdownMenuTriggerProps {
|
|
|
9
9
|
children: ReactNode;
|
|
10
10
|
}
|
|
11
11
|
export declare function DropdownMenuTrigger(props: DropdownMenuTriggerProps): JSX.Element;
|
|
12
|
-
interface DropdownMenuContentProps {
|
|
12
|
+
export interface DropdownMenuContentProps {
|
|
13
13
|
align?: "center" | "end" | "start";
|
|
14
14
|
side?: "bottom" | "left" | "right" | "top";
|
|
15
|
+
minWidth?: 128 | 256;
|
|
15
16
|
children: ReactNode;
|
|
16
17
|
containerRef?: MutableRefObject<null>;
|
|
17
18
|
}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
import { type DropdownMenuContentProps, type DropdownMenuProps } from "./DropdownMenu";
|
|
2
|
+
type Args = DropdownMenuProps & Pick<DropdownMenuContentProps, "minWidth">;
|
|
3
|
+
declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, Args>;
|
|
2
4
|
export default _default;
|
|
3
5
|
export declare const Default: {
|
|
4
|
-
render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R,
|
|
6
|
+
render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, Args>;
|
|
5
7
|
name: string;
|
|
6
8
|
};
|
|
@@ -3,6 +3,7 @@ export default _default;
|
|
|
3
3
|
export declare const Default: {
|
|
4
4
|
render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("./EditableText").EditableTextProps>;
|
|
5
5
|
args: {
|
|
6
|
+
"aria-label": string;
|
|
6
7
|
value: string;
|
|
7
8
|
color: string;
|
|
8
9
|
variant: string;
|
|
@@ -1,8 +1,10 @@
|
|
|
1
|
+
import { Time } from "@internationalized/date";
|
|
1
2
|
import type { SX } from "../../theme/util";
|
|
2
3
|
import type { DateInputProps } from "../DateInput/DateInput";
|
|
3
4
|
export interface FormDateInputProps {
|
|
4
5
|
label: string;
|
|
5
6
|
value?: Date;
|
|
7
|
+
defaultTime?: Time;
|
|
6
8
|
mode: DateInputProps["mode"];
|
|
7
9
|
/**
|
|
8
10
|
* The minimum allowed date that a user may select.
|
|
@@ -3,13 +3,28 @@ export declare const cursor: {
|
|
|
3
3
|
default: string;
|
|
4
4
|
pointer: string;
|
|
5
5
|
};
|
|
6
|
-
export declare const
|
|
6
|
+
export declare const noPaddingSize: {
|
|
7
7
|
small: string;
|
|
8
8
|
medium: string;
|
|
9
9
|
large: string;
|
|
10
10
|
};
|
|
11
|
-
export declare const
|
|
11
|
+
export declare const radius: {
|
|
12
|
+
medium: string;
|
|
13
|
+
full: string;
|
|
14
|
+
};
|
|
15
|
+
export declare const size: {
|
|
12
16
|
small: string;
|
|
13
17
|
medium: string;
|
|
14
18
|
large: string;
|
|
15
19
|
};
|
|
20
|
+
export declare const variant: {
|
|
21
|
+
ghost: string;
|
|
22
|
+
solid: string;
|
|
23
|
+
};
|
|
24
|
+
export declare const color: {
|
|
25
|
+
grey: string;
|
|
26
|
+
green: string;
|
|
27
|
+
amber: string;
|
|
28
|
+
purple: string;
|
|
29
|
+
tomato: string;
|
|
30
|
+
};
|
|
@@ -1,13 +1,14 @@
|
|
|
1
|
-
import type { ThemeColor } from "../../theme/colors";
|
|
2
1
|
import type { IconName } from "../Icon/iconNames";
|
|
3
2
|
import * as styles from "./IconButton.css";
|
|
4
3
|
export interface IconButtonProps {
|
|
5
|
-
|
|
6
|
-
size?: keyof typeof styles.size;
|
|
4
|
+
color?: keyof typeof styles.color;
|
|
7
5
|
cursor?: keyof typeof styles.cursor;
|
|
8
6
|
hasPadding?: boolean;
|
|
9
|
-
|
|
7
|
+
icon: IconName | JSX.Element;
|
|
10
8
|
loading?: boolean;
|
|
11
9
|
onClick?: () => void;
|
|
10
|
+
radius?: keyof typeof styles.radius;
|
|
11
|
+
size?: keyof typeof styles.size;
|
|
12
|
+
variant?: keyof typeof styles.variant;
|
|
12
13
|
}
|
|
13
14
|
export declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
@@ -1,12 +1,10 @@
|
|
|
1
1
|
declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("./IconButton").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
2
2
|
export default _default;
|
|
3
3
|
export declare const Default: {
|
|
4
|
+
render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("./IconButton").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
4
5
|
args: {
|
|
5
6
|
icon: string;
|
|
6
7
|
cursor: string;
|
|
7
|
-
loading: boolean;
|
|
8
|
-
hasPadding: boolean;
|
|
9
|
-
size: string;
|
|
10
8
|
};
|
|
11
9
|
name: string;
|
|
12
10
|
};
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
export interface SearchInputProps {
|
|
2
2
|
value: string;
|
|
3
3
|
onValueChange: (value: string) => void;
|
|
4
4
|
placeholder?: string;
|
|
5
|
-
}
|
|
6
|
-
export declare
|
|
7
|
-
export {};
|
|
5
|
+
}
|
|
6
|
+
export declare function SearchInput(props: SearchInputProps): JSX.Element;
|
|
@@ -1,15 +1,7 @@
|
|
|
1
|
-
declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R,
|
|
2
|
-
value: string;
|
|
3
|
-
onValueChange: (value: string) => void;
|
|
4
|
-
placeholder?: string | undefined;
|
|
5
|
-
}>>;
|
|
1
|
+
declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("./SearchInput").SearchInputProps>;
|
|
6
2
|
export default _default;
|
|
7
3
|
export declare const Default: {
|
|
8
|
-
render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R,
|
|
9
|
-
value: string;
|
|
10
|
-
onValueChange: (value: string) => void;
|
|
11
|
-
placeholder?: string | undefined;
|
|
12
|
-
}>>;
|
|
4
|
+
render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("./SearchInput").SearchInputProps>;
|
|
13
5
|
args: {
|
|
14
6
|
value: string;
|
|
15
7
|
placeholder: string;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const childrenAnimationWrapper: string;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { type ReactNode } from "react";
|
|
2
|
+
import { type Sprinkles } from "../../theme/sprinkles.css";
|
|
3
|
+
interface AnimatedSuspenseProps {
|
|
4
|
+
children: ReactNode;
|
|
5
|
+
fallback?: ReactNode;
|
|
6
|
+
animationDuration?: Sprinkles["animationDuration"];
|
|
7
|
+
}
|
|
8
|
+
export declare function AnimatedSuspense(props: AnimatedSuspenseProps): JSX.Element;
|
|
9
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { AnimatedSuspense } from "./AnimatedSuspense";
|
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
export declare const root: string;
|
|
2
|
-
export declare const
|
|
3
|
-
export declare const head: string;
|
|
4
|
-
export declare const body: string;
|
|
5
|
-
export declare const row: string;
|
|
2
|
+
export declare const header: string;
|
|
6
3
|
export declare const bodyRow: string;
|
|
7
|
-
export declare const
|
|
4
|
+
export declare const disablePointerEvents: string;
|
|
5
|
+
export declare const onClickBodyRow: string;
|
|
6
|
+
export declare const staticBodyRow: string;
|
|
7
|
+
export declare const headerCell: string;
|
|
8
|
+
export declare const bodyCell: string;
|
|
8
9
|
export declare const cell: string;
|
|
9
|
-
export declare const
|
|
10
|
+
export declare const linkedRowContainer: string;
|
|
11
|
+
export declare const linkElementWrapper: string;
|
|
12
|
+
export declare const link: string;
|
|
@@ -1,24 +1,63 @@
|
|
|
1
|
-
import { type
|
|
1
|
+
import { type ReactNode } from "react";
|
|
2
2
|
export interface TableProps {
|
|
3
3
|
children: ReactNode;
|
|
4
|
+
/** The number and size of columns. See [grid-template-columns](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns). */
|
|
5
|
+
columnLayout: string;
|
|
4
6
|
}
|
|
5
|
-
|
|
7
|
+
/**
|
|
8
|
+
* Outer table component. This should wrap any table header and body in order to
|
|
9
|
+
* set the layout context.
|
|
10
|
+
*/
|
|
11
|
+
export declare function Table(props: TableProps): JSX.Element;
|
|
6
12
|
export interface TableHeadProps {
|
|
7
13
|
children: ReactNode;
|
|
8
14
|
}
|
|
9
|
-
|
|
15
|
+
/**
|
|
16
|
+
* Wrapper for the entire table header. This ensures any rows contained in it have the
|
|
17
|
+
* header row style applied.
|
|
18
|
+
*/
|
|
19
|
+
export declare function TableHead(props: TableHeadProps): JSX.Element;
|
|
10
20
|
export interface TableBodyProps {
|
|
11
21
|
children: ReactNode;
|
|
12
22
|
}
|
|
13
|
-
|
|
14
|
-
|
|
23
|
+
/**
|
|
24
|
+
* Wrapper for the entire table body and its rows. This ensures any rows contained in
|
|
25
|
+
* it have the body row style applied.
|
|
26
|
+
*/
|
|
27
|
+
export declare function TableBody(props: TableBodyProps): JSX.Element;
|
|
28
|
+
export interface ClickableTableRowProps {
|
|
15
29
|
children: ReactNode;
|
|
16
|
-
|
|
30
|
+
/** Callback fired when the row is clicked */
|
|
31
|
+
onClick?: () => void;
|
|
32
|
+
renderLink?: never;
|
|
17
33
|
}
|
|
34
|
+
export interface LinkTableRowProps {
|
|
35
|
+
children: ReactNode;
|
|
36
|
+
onClick?: never;
|
|
37
|
+
/** Anchor tag wrapper for the row to enable using any routing library such as next Link or react-router. */
|
|
38
|
+
renderLink: ({ children }: {
|
|
39
|
+
children: ReactNode;
|
|
40
|
+
}) => JSX.Element;
|
|
41
|
+
}
|
|
42
|
+
type TableRowProps = ClickableTableRowProps | LinkTableRowProps;
|
|
43
|
+
/**
|
|
44
|
+
* A possibly interactable table row. This component is used in
|
|
45
|
+
* both the header and the table body. The interactivity works in 1 of 3 ways:
|
|
46
|
+
*
|
|
47
|
+
* - Not giving any props other than children: The table acts as a static element which you can't interact with
|
|
48
|
+
* - Given an onClick prop: fires the onClick callback when the row is clicked
|
|
49
|
+
* - Given a renderLink: wraps the **entire** row in the given component. E.g. wrapping it in `react-router-dom` `<Link>`
|
|
50
|
+
*/
|
|
18
51
|
export declare function TableRow(props: TableRowProps): JSX.Element;
|
|
19
52
|
export interface TableCellProps {
|
|
20
53
|
children?: ReactNode;
|
|
21
54
|
/** How to align the content in the cell. Note that undefined defaults to start */
|
|
22
55
|
align?: "center" | "end";
|
|
56
|
+
/** Whether the content of the cell is interactive, this disables the link properties for that cell. Defaults to `false`. */
|
|
57
|
+
interactive?: boolean;
|
|
23
58
|
}
|
|
59
|
+
/**
|
|
60
|
+
* Table cells wrap the individual content of the table.
|
|
61
|
+
*/
|
|
24
62
|
export declare function TableCell(props: TableCellProps): JSX.Element;
|
|
63
|
+
export {};
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { type PropsWithChildren } from "react";
|
|
2
|
+
import type { IconName } from "../Icon";
|
|
2
3
|
interface ToastConfig {
|
|
3
4
|
title: string;
|
|
4
5
|
seconds?: number;
|
|
@@ -6,6 +7,7 @@ interface ToastConfig {
|
|
|
6
7
|
title: string;
|
|
7
8
|
onClick: () => void;
|
|
8
9
|
};
|
|
10
|
+
icon?: IconName;
|
|
9
11
|
}
|
|
10
12
|
interface ToastContext {
|
|
11
13
|
showToast: (config: ToastConfig) => void;
|
package/dist/index.d.ts
CHANGED
|
@@ -56,6 +56,7 @@ export { Separator } from "./components/Separator";
|
|
|
56
56
|
export { Skeleton } from "./components/Skeleton";
|
|
57
57
|
export { SliceCard, SliceSelectCard } from "./components/Slice";
|
|
58
58
|
export { Slider } from "./components/Slider";
|
|
59
|
+
export { AnimatedSuspense } from "./components/Suspense";
|
|
59
60
|
export { Switch } from "./components/Switch";
|
|
60
61
|
export { Tab } from "./components/Tab";
|
|
61
62
|
export { Table, TableBody, TableCell, TableHead, TableRow } from "./components/Table";
|