@prismicio/editor-ui 0.4.18 → 0.4.20
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/ActionList/ActionList.d.ts +1 -1
- package/dist/components/Alert/Alert.d.ts +3 -6
- package/dist/components/Alert/Alert.stories.d.ts +2 -2
- package/dist/components/Alert/AlertContext.d.ts +17 -3
- package/dist/components/Alert/index.d.ts +1 -1
- package/dist/components/AnimatedElement/AnimatedElement.d.ts +1 -1
- package/dist/components/AnimatedList/AnimatedList.d.ts +10 -1
- package/dist/components/Badge/Badge.d.ts +2 -2
- package/dist/components/Badge/Badge.stories.d.ts +2 -2
- package/dist/components/BaseInput/BaseInput.d.ts +16 -9
- package/dist/components/BlankSlate/BlankSlate.d.ts +29 -14
- package/dist/components/Box/Box.d.ts +2 -1
- package/dist/components/Button/Button.d.ts +2 -1
- package/dist/components/Button/Button.stories.d.ts +6 -5
- package/dist/components/ButtonGroup/ButtonGroup.d.ts +1 -1
- package/dist/components/ButtonGroup/ButtonGroup.stories.d.ts +2 -2
- package/dist/components/Card/Card.d.ts +1 -1
- package/dist/components/ColorInput/ColorInput.d.ts +5 -6
- package/dist/components/ColorInput/ColorInput.stories.d.ts +2 -12
- package/dist/components/Cropper/Cropper.stories.d.ts +6 -6
- package/dist/components/DateInput/DateInput.d.ts +2 -2
- package/dist/components/Dialog/Dialog.d.ts +4 -0
- package/dist/components/Dialog/Options/DialogOptions.d.ts +1 -1
- package/dist/components/DocumentCard/DocumentCard.d.ts +6 -21
- package/dist/components/DocumentCard/DocumentCard.stories.d.ts +29 -5
- package/dist/components/Dot/Dot.d.ts +6 -0
- package/dist/components/Dot/Dot.stories.d.ts +20 -0
- package/dist/components/Dot/index.d.ts +1 -0
- package/dist/components/DropdownMenu/DropdownMenu.d.ts +2 -2
- package/dist/components/EditableText/EditableText.d.ts +1 -0
- package/dist/components/ErrorBoundary/DefaultErrorMessage.d.ts +2 -0
- package/dist/components/Field/Field.d.ts +6 -7
- package/dist/components/Field/Field.stories.d.ts +1 -1
- package/dist/components/FileUpload/FileDropZone/FileDropZone.d.ts +1 -0
- package/dist/components/FileUpload/FileUpload.stories.d.ts +2 -2
- package/dist/components/FileUpload/index.d.ts +0 -1
- package/dist/components/FileUploadButton/FileUploadButton.d.ts +19 -0
- package/dist/components/FileUploadButton/index.d.ts +1 -0
- package/dist/components/Form/Form.d.ts +1 -1
- package/dist/components/Form/FormDateInput.d.ts +2 -1
- package/dist/components/Form/FormField.d.ts +1 -1
- package/dist/components/Form/FormInput.d.ts +4 -1
- package/dist/components/Form/FormSearchInput.d.ts +11 -0
- package/dist/components/Form/index.d.ts +2 -0
- package/dist/components/Gradient/Gradient.d.ts +1 -1
- package/dist/components/Group/Group.d.ts +3 -2
- package/dist/components/Group/Group.stories.d.ts +6 -10
- package/dist/components/HairlineButton/HairlineButton.d.ts +1 -1
- package/dist/components/Icon/Icon.d.ts +1 -2
- package/dist/components/Icon/iconNames.d.ts +1 -1
- package/dist/components/IconButton/IconButton.d.ts +1 -0
- package/dist/components/Image/Image.d.ts +3 -2
- package/dist/components/Line/Line.d.ts +6 -0
- package/dist/components/Line/Line.stories.d.ts +20 -0
- package/dist/components/Line/index.d.ts +1 -0
- package/dist/components/List/UnorderedList.d.ts +1 -1
- package/dist/components/List/UnorderedList.stories.d.ts +1 -1
- package/dist/components/MediaCard/MediaCard.d.ts +1 -1
- package/dist/components/MediaCard/MediaCard.stories.d.ts +1 -1
- package/dist/components/NumberInput/NumberInput.d.ts +4 -2
- package/dist/components/Portal/Portal.d.ts +9 -0
- package/dist/components/Portal/index.d.ts +1 -0
- package/dist/components/Radio/RadioGroup.d.ts +1 -1
- package/dist/components/ScrollArea/ScrollArea.d.ts +2 -2
- package/dist/components/ScrollArea/ScrollArea.stories.d.ts +3 -3
- package/dist/components/SearchInput/SearchInput.d.ts +1 -1
- package/dist/components/Select/Select.css.d.ts +2 -1
- package/dist/components/Select/Select.d.ts +1 -1
- package/dist/components/Separator/Separator.d.ts +1 -1
- package/dist/components/Separator/Separator.stories.d.ts +1 -1
- package/dist/components/Skeleton/Skeleton.d.ts +12 -13
- package/dist/components/Slider/Slider.stories.d.ts +2 -2
- package/dist/components/Switch/Switch.d.ts +3 -1
- package/dist/components/Tab/Tab.d.ts +4 -0
- package/dist/components/Text/Text.css.d.ts +1 -1
- package/dist/components/Text/Text.d.ts +1 -1
- package/dist/components/TextArea/TextArea.d.ts +4 -1
- package/dist/components/TextInput/TextInput.d.ts +6 -6
- package/dist/components/TextInput/index.d.ts +1 -1
- package/dist/components/Toast/Toast.d.ts +4 -0
- package/dist/components/Toast/Toast.stories.d.ts +2 -2
- package/dist/components/ToggleButton/ToggleButton.stories.d.ts +2 -2
- package/dist/components/ToggleButtonGroup/ToggleButtonGroup.stories.d.ts +2 -2
- package/dist/components/Toolbar/Toolbar.d.ts +1 -1
- package/dist/components/Tooltip/Tooltip.d.ts +1 -1
- package/dist/components/Video/Video.d.ts +1 -1
- package/dist/components/Video/Video.stories.d.ts +1 -1
- package/dist/index.cjs.js +384 -0
- package/dist/index.d.ts +9 -6
- package/dist/index.es.js +10051 -9711
- package/dist/style.css +1 -1
- package/dist/theme/mode.css.d.ts +1 -1
- package/dist/theme/new/index.d.ts +3 -0
- package/dist/theme/new/sx.d.ts +13 -13
- package/dist/theme/new/theme.d.ts +9 -11
- package/dist/theme/new/utils.d.ts +1 -1
- package/dist/theme/selectors.d.ts +20 -20
- package/dist/theme/sprinkles.css.d.ts +558 -558
- package/package.json +6 -3
- package/dist/components/Alert/Alert.css.d.ts +0 -6
- package/dist/components/AnimatedList/AnimatedList.css.d.ts +0 -13
- package/dist/components/BaseInput/BaseInput.css.d.ts +0 -15
- package/dist/components/BlankSlate/BlankSlate.css.d.ts +0 -10
- package/dist/components/DocumentStatusBar/DocumentStatusBar.css.d.ts +0 -1
- package/dist/components/DocumentStatusBar/DocumentStatusBar.d.ts +0 -5
- package/dist/components/DocumentStatusBar/DocumentStatusBar.stories.d.ts +0 -10
- package/dist/components/DocumentStatusBar/index.d.ts +0 -1
- package/dist/components/DocumentStatusDot/DocumentStatusDot.css.d.ts +0 -1
- package/dist/components/DocumentStatusDot/DocumentStatusDot.d.ts +0 -5
- package/dist/components/DocumentStatusDot/DocumentStatusDot.stories.d.ts +0 -10
- package/dist/components/DocumentStatusDot/index.d.ts +0 -1
- package/dist/components/EditableText/EditableText.css.d.ts +0 -2
- package/dist/components/Field/Field.css.d.ts +0 -9
- package/dist/components/FileUpload/FileDropZone/FileDropZone.css.d.ts +0 -4
- package/dist/components/FileUpload/FileUploadTrigger/FileUploadTrigger.css.d.ts +0 -3
- package/dist/components/FileUpload/FileUploadTrigger/FileUploadTrigger.d.ts +0 -10
- package/dist/components/Tab/Tab.css.d.ts +0 -5
- package/dist/components/TextArea/TextArea.css.d.ts +0 -4
- package/dist/components/Tooltip/Tooltip.css.d.ts +0 -6
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { type MouseEvent, type PropsWithChildren, type ReactNode } from "react";
|
|
2
2
|
import { type IconName } from "../Icon";
|
|
3
|
-
export type ActionListVariants = "
|
|
3
|
+
export type ActionListVariants = "borderless" | "bordered";
|
|
4
4
|
export interface ActionListProps extends PropsWithChildren {
|
|
5
5
|
variant?: ActionListVariants;
|
|
6
6
|
}
|
|
@@ -1,12 +1,9 @@
|
|
|
1
|
+
import type { ReactNode } from "react";
|
|
1
2
|
type Props = {
|
|
2
3
|
title: string;
|
|
3
|
-
subtitle?:
|
|
4
|
-
footerButtons?:
|
|
4
|
+
subtitle?: ReactNode;
|
|
5
|
+
footerButtons?: ReactNode;
|
|
5
6
|
onClose?: () => void;
|
|
6
7
|
};
|
|
7
8
|
export declare function Alert({ title, subtitle, footerButtons, onClose }: Props): JSX.Element;
|
|
8
|
-
export declare const AlertButton: ({ title, onClick }: {
|
|
9
|
-
title: string;
|
|
10
|
-
onClick: () => void;
|
|
11
|
-
}) => JSX.Element;
|
|
12
9
|
export {};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, {
|
|
2
2
|
title: string;
|
|
3
|
-
subtitle?:
|
|
3
|
+
subtitle?: import("react").ReactNode;
|
|
4
4
|
footerButtons?: import("react").ReactNode;
|
|
5
5
|
onClose?: (() => void) | undefined;
|
|
6
6
|
}>;
|
|
@@ -8,7 +8,7 @@ export default _default;
|
|
|
8
8
|
export declare const Default: {
|
|
9
9
|
render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, {
|
|
10
10
|
title: string;
|
|
11
|
-
subtitle?:
|
|
11
|
+
subtitle?: import("react").ReactNode;
|
|
12
12
|
footerButtons?: import("react").ReactNode;
|
|
13
13
|
onClose?: (() => void) | undefined;
|
|
14
14
|
}>;
|
|
@@ -1,13 +1,27 @@
|
|
|
1
|
-
import { type
|
|
1
|
+
import { type ReactNode, type RefObject } from "react";
|
|
2
|
+
import type { IconName } from "../Icon";
|
|
2
3
|
export interface AlertConfig {
|
|
4
|
+
id?: string;
|
|
3
5
|
title: string;
|
|
4
|
-
subtitle:
|
|
6
|
+
subtitle: ReactNode;
|
|
7
|
+
buttons?: {
|
|
8
|
+
text: string;
|
|
9
|
+
onClick: () => void;
|
|
10
|
+
icon?: IconName;
|
|
11
|
+
}[];
|
|
5
12
|
onRetry?: () => void;
|
|
6
13
|
}
|
|
7
14
|
interface AlertContext {
|
|
8
15
|
showAlert: (config: AlertConfig) => void;
|
|
16
|
+
/** Useful to ignore click events when interacting with the alerts.
|
|
17
|
+
*
|
|
18
|
+
* E.g. if you don't want to close a dialog when dismissing an alert. */
|
|
19
|
+
containerRef: RefObject<HTMLDivElement> | null;
|
|
9
20
|
}
|
|
10
21
|
declare const AlertContext: import("react").Context<AlertContext>;
|
|
11
|
-
|
|
22
|
+
interface AlertProviderProps {
|
|
23
|
+
children: ReactNode;
|
|
24
|
+
}
|
|
25
|
+
export declare function AlertProvider(props: AlertProviderProps): JSX.Element;
|
|
12
26
|
export declare function useAlert(): AlertContext;
|
|
13
27
|
export {};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { Alert
|
|
1
|
+
export { Alert } from "./Alert";
|
|
2
2
|
export { type AlertConfig, AlertProvider, useAlert } from "./AlertContext";
|
|
@@ -2,6 +2,7 @@ import { type ReactNode } from "react";
|
|
|
2
2
|
import { type Sprinkles } from "../../theme/sprinkles.css";
|
|
3
3
|
import type { tokens } from "../../theme/vars.css";
|
|
4
4
|
import { type RenderDragPreview, type RenderDropIndicator } from "./dnd";
|
|
5
|
+
import { type State } from "./layout";
|
|
5
6
|
export interface AnimatedListProps<ITEM> {
|
|
6
7
|
ariaLabel: string;
|
|
7
8
|
gap?: keyof typeof tokens.space;
|
|
@@ -13,7 +14,15 @@ export interface AnimatedListProps<ITEM> {
|
|
|
13
14
|
renderDragPreview?: RenderDragPreview;
|
|
14
15
|
renderDropIndicator?: RenderDropIndicator;
|
|
15
16
|
onReorder?: (items: ITEM[]) => void;
|
|
17
|
+
stacked?: {
|
|
18
|
+
/** Offset between stacked items */
|
|
19
|
+
offset: number;
|
|
20
|
+
/** Scaling factor between items */
|
|
21
|
+
scaleFactor: number;
|
|
22
|
+
/** Maximum number of items to stack, others will be hidden */
|
|
23
|
+
maxDepth: number;
|
|
24
|
+
};
|
|
16
25
|
}
|
|
17
26
|
export declare function AnimatedList<ITEM>(props: AnimatedListProps<ITEM>): JSX.Element;
|
|
18
|
-
type ChildrenFunction<ITEM> = (item: ITEM, index: number) => ReactNode;
|
|
27
|
+
type ChildrenFunction<ITEM> = (item: ITEM, index: number, state: State<ITEM>["state"]) => ReactNode;
|
|
19
28
|
export {};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { type ReactNode } from "react";
|
|
2
2
|
export declare const Badge: import("react").ForwardRefExoticComponent<Readonly<{
|
|
3
3
|
title: ReactNode;
|
|
4
|
-
color?: "
|
|
4
|
+
color?: "green" | "grey" | "purple" | "tomato" | "amber" | undefined;
|
|
5
5
|
size?: "medium" | "large" | undefined;
|
|
6
6
|
maxWidth?: 150 | 250 | undefined;
|
|
7
7
|
onClose?: (() => void) | undefined;
|
|
8
|
-
icon?: "add" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "autoFixHigh" | "calendarToday" | "centerFocusWeak" | "check" | "checkBox" | "checkBoxOutlinedBlank" | "chevronLeft" | "chevronRight" | "close" | "cloud" | "cloudUpload" | "
|
|
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
9
|
onClick?: (() => void) | undefined;
|
|
10
10
|
selected?: boolean | undefined;
|
|
11
11
|
onMouseEnter?: (() => void) | undefined;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, Readonly<{
|
|
2
2
|
title: import("react").ReactNode;
|
|
3
|
-
color?: "
|
|
3
|
+
color?: "green" | "grey" | "purple" | "tomato" | "amber" | undefined;
|
|
4
4
|
size?: "medium" | "large" | undefined;
|
|
5
5
|
maxWidth?: 150 | 250 | undefined;
|
|
6
6
|
onClose?: (() => void) | undefined;
|
|
7
|
-
icon?: "add" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "autoFixHigh" | "calendarToday" | "centerFocusWeak" | "check" | "checkBox" | "checkBoxOutlinedBlank" | "chevronLeft" | "chevronRight" | "close" | "cloud" | "cloudUpload" | "
|
|
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
8
|
onClick?: (() => void) | undefined;
|
|
9
9
|
selected?: boolean | undefined;
|
|
10
10
|
onMouseEnter?: (() => void) | undefined;
|
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
import { type KeyboardEvent, type ReactNode } from "react";
|
|
2
|
-
import type { SX } from "../../theme/new
|
|
3
|
-
import * as styles from "./BaseInput.css";
|
|
2
|
+
import type { SX, ThemeKeys } from "../../theme/new";
|
|
4
3
|
export interface BaseInputProps {
|
|
5
4
|
autoComplete?: string;
|
|
6
|
-
className?: string;
|
|
7
5
|
id?: string;
|
|
8
6
|
inputMode?: "decimal" | "text";
|
|
9
7
|
name?: string;
|
|
@@ -11,15 +9,24 @@ export interface BaseInputProps {
|
|
|
11
9
|
readOnly?: boolean;
|
|
12
10
|
startAdornment?: ReactNode;
|
|
13
11
|
endAdornment?: ReactNode;
|
|
12
|
+
padding?: Padding;
|
|
14
13
|
value: string;
|
|
15
|
-
variant?:
|
|
14
|
+
variant?: "normal" | "link" | "success";
|
|
15
|
+
cursor?: "text" | "pointer";
|
|
16
|
+
maxLength?: number;
|
|
17
|
+
sx?: SX;
|
|
16
18
|
onFocus?: () => void;
|
|
17
19
|
onBlur?: () => void;
|
|
18
|
-
|
|
19
|
-
cursor?: keyof typeof styles.cursor;
|
|
20
|
+
onValueChange?: (value: string) => void;
|
|
20
21
|
onKeyDown?: (event: KeyboardEvent) => void;
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
22
|
+
}
|
|
23
|
+
interface Padding {
|
|
24
|
+
input?: {
|
|
25
|
+
inline: ThemeKeys<"space">;
|
|
26
|
+
};
|
|
27
|
+
adornment?: {
|
|
28
|
+
inline: ThemeKeys<"space">;
|
|
29
|
+
};
|
|
24
30
|
}
|
|
25
31
|
export declare const BaseInput: import("react").ForwardRefExoticComponent<BaseInputProps & import("react").RefAttributes<HTMLInputElement>>;
|
|
32
|
+
export {};
|
|
@@ -1,25 +1,40 @@
|
|
|
1
|
-
import type { CSSProperties,
|
|
2
|
-
import { type ThemeKeys } from "../../theme/new
|
|
1
|
+
import type { CSSProperties, ReactNode } from "react";
|
|
2
|
+
import { type ThemeKeys } from "../../theme/new";
|
|
3
3
|
import { type IconName } from "../Icon";
|
|
4
|
-
|
|
5
|
-
export interface BlankSlateProps extends PropsWithChildren {
|
|
4
|
+
export interface BlankSlateProps {
|
|
6
5
|
style?: CSSProperties;
|
|
6
|
+
children?: ReactNode;
|
|
7
7
|
}
|
|
8
|
-
export declare
|
|
9
|
-
|
|
8
|
+
export declare function BlankSlate(props: BlankSlateProps): JSX.Element;
|
|
9
|
+
interface BlankSlateIconProps {
|
|
10
10
|
name: IconName;
|
|
11
11
|
lineColor?: ThemeKeys<"color">;
|
|
12
12
|
backgroundColor?: ThemeKeys<"color">;
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
size?: keyof typeof styles.titleSizeVariant;
|
|
13
|
+
borderColor?: ThemeKeys<"color">;
|
|
14
|
+
borderStyle?: CSSProperties["borderStyle"];
|
|
15
|
+
size?: "medium" | "large";
|
|
17
16
|
}
|
|
18
|
-
export declare
|
|
19
|
-
|
|
20
|
-
|
|
17
|
+
export declare function BlankSlateIcon(props: BlankSlateIconProps): JSX.Element;
|
|
18
|
+
declare const titleSizeVariant: {
|
|
19
|
+
readonly regular: "normal";
|
|
20
|
+
readonly big: "h2";
|
|
21
|
+
};
|
|
22
|
+
export interface BlankSlateTitleProps {
|
|
23
|
+
size?: keyof typeof titleSizeVariant;
|
|
24
|
+
children?: ReactNode;
|
|
25
|
+
}
|
|
26
|
+
export declare function BlankSlateTitle(props: BlankSlateTitleProps): JSX.Element;
|
|
27
|
+
interface BlankSlateDescriptionProps {
|
|
28
|
+
width?: number;
|
|
29
|
+
children?: ReactNode;
|
|
30
|
+
}
|
|
31
|
+
export declare function BlankSlateDescription(props: BlankSlateDescriptionProps): JSX.Element;
|
|
32
|
+
interface BlankSlateImageProps {
|
|
21
33
|
fixedHeight?: boolean;
|
|
34
|
+
children?: ReactNode;
|
|
22
35
|
}
|
|
23
36
|
export declare function BlankSlateImage(props: BlankSlateImageProps): JSX.Element;
|
|
24
|
-
export declare
|
|
37
|
+
export declare function BlankSlateActions(props: {
|
|
38
|
+
children: ReactNode;
|
|
39
|
+
}): JSX.Element;
|
|
25
40
|
export {};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type ReactNode } from "react";
|
|
1
|
+
import { type CSSProperties, type ReactNode } from "react";
|
|
2
2
|
import { type ThemeColor } from "../../theme/colors";
|
|
3
3
|
import { type Sprinkles } from "../../theme/sprinkles.css";
|
|
4
4
|
export type BoxProps = {
|
|
@@ -32,6 +32,7 @@ export type BoxProps = {
|
|
|
32
32
|
overflow?: Sprinkles["overflow"];
|
|
33
33
|
gridColumn?: string;
|
|
34
34
|
gridRow?: string;
|
|
35
|
+
transform?: CSSProperties["transform"];
|
|
35
36
|
} & DisplayProps;
|
|
36
37
|
type DisplayProps = {
|
|
37
38
|
gap?: Sprinkles["gap"];
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type MouseEvent, type ReactNode } from "react";
|
|
2
|
-
import type { SX } from "../../theme/new
|
|
2
|
+
import type { SX } from "../../theme/new";
|
|
3
3
|
import { type IconName } from "../Icon";
|
|
4
4
|
export interface ButtonProps {
|
|
5
5
|
children?: ReactNode;
|
|
@@ -7,6 +7,7 @@ export interface ButtonProps {
|
|
|
7
7
|
size?: "small" | "medium" | "large";
|
|
8
8
|
disabled?: boolean;
|
|
9
9
|
loading?: boolean;
|
|
10
|
+
textColor?: "placeholder";
|
|
10
11
|
/**
|
|
11
12
|
* Whether to make the text (children) content of the Button take all the available space.
|
|
12
13
|
* This can be useful when the Button's width is set from the outside instead of being "auto".
|
|
@@ -7,7 +7,7 @@ declare const meta: {
|
|
|
7
7
|
control: {
|
|
8
8
|
type: string;
|
|
9
9
|
};
|
|
10
|
-
options: readonly ["add", "alert", "arrowBack", "arrowDownward", "arrowDropDown", "arrowDropDownCircle", "arrowForward", "arrowUpward", "autoFixHigh", "calendarToday", "centerFocusWeak", "check", "checkBox", "checkBoxOutlinedBlank", "chevronLeft", "chevronRight", "close", "cloud", "cloudUpload", "code", "colorLens", "contentCopy", "crop", "cropLandscape", "cropPortrait", "dataObject", "database", "dateRange", "delete", "description", "desktopWindows", "dragIndicator", "driveFileMove", "edit", "event", "expandLess", "expandMore", "firstPage", "folder", "formatBold", "formatClear", "formatItalic", "formatListBulleted", "formatListNumbered", "formatTextDirectionRToL", "hideImage", "image", "imageSearch", "insertDriveFile", "inventory", "keyboardArrowDown", "keyboardArrowUp", "label", "link", "linkOff", "lock", "looks1", "looks2", "looks3", "looks4", "looks5", "looks6", "moreVert", "musicNote", "notes", "openInNew", "phoneIphone", "photo", "pin", "place", "preview", "prismic", "public", "refresh", "save", "schedule", "search", "smartDisplay", "tabletMac", "tag", "textFields", "toggleOff", "unfoldMore", "unsplash", "viewDay", "visibility", "zoomOutMap"];
|
|
10
|
+
options: readonly ["add", "alert", "arrowBack", "arrowDownward", "arrowDropDown", "arrowDropDownCircle", "arrowForward", "arrowUpward", "autoFixHigh", "block", "calendarToday", "centerFocusWeak", "check", "checkBox", "checkBoxOutlinedBlank", "chevronLeft", "chevronRight", "close", "cloud", "cloudUpload", "code", "colorLens", "contentCopy", "crop", "cropLandscape", "cropPortrait", "dataObject", "database", "dateRange", "delete", "description", "desktopWindows", "dragIndicator", "driveFileMove", "edit", "event", "expandLess", "expandMore", "firstPage", "folder", "formatBold", "formatClear", "formatItalic", "formatListBulleted", "formatListNumbered", "formatTextDirectionRToL", "hideImage", "image", "imageSearch", "insertDriveFile", "inventory", "keyboardArrowDown", "keyboardArrowUp", "label", "link", "linkOff", "lock", "looks1", "looks2", "looks3", "looks4", "looks5", "looks6", "moreVert", "musicNote", "notes", "openInFull", "openInNew", "phoneIphone", "photo", "pin", "place", "preview", "prismic", "public", "refresh", "save", "schedule", "search", "smartDisplay", "tabletMac", "tag", "textFields", "toggleOff", "unfoldMore", "unsplash", "viewDay", "visibility", "zoomOutMap"];
|
|
11
11
|
};
|
|
12
12
|
};
|
|
13
13
|
};
|
|
@@ -15,15 +15,16 @@ export default meta;
|
|
|
15
15
|
export declare const Default: {
|
|
16
16
|
render: (args: {
|
|
17
17
|
children?: import("react").ReactNode;
|
|
18
|
-
color?: "
|
|
18
|
+
color?: "dark" | "green" | "grey" | "purple" | "tomato" | "amber" | undefined;
|
|
19
19
|
size?: "small" | "medium" | "large" | undefined;
|
|
20
20
|
disabled?: boolean | undefined;
|
|
21
21
|
loading?: boolean | undefined;
|
|
22
|
+
textColor?: "placeholder" | undefined;
|
|
22
23
|
flexContent?: boolean | undefined;
|
|
23
24
|
textWeight?: "bold" | "normal" | undefined;
|
|
24
|
-
sx?: import("../../theme/new
|
|
25
|
-
startIcon?: "add" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "autoFixHigh" | "calendarToday" | "centerFocusWeak" | "check" | "checkBox" | "checkBoxOutlinedBlank" | "chevronLeft" | "chevronRight" | "close" | "cloud" | "cloudUpload" | "
|
|
26
|
-
endIcon?: "add" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "autoFixHigh" | "calendarToday" | "centerFocusWeak" | "check" | "checkBox" | "checkBoxOutlinedBlank" | "chevronLeft" | "chevronRight" | "close" | "cloud" | "cloudUpload" | "
|
|
25
|
+
sx?: import("../../theme/new").SX | undefined;
|
|
26
|
+
startIcon?: "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;
|
|
27
|
+
endIcon?: "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;
|
|
27
28
|
renderStartIcon?: ((icon: import("react").ReactNode) => import("react").ReactNode) | undefined;
|
|
28
29
|
renderEndIcon?: ((icon: import("react").ReactNode) => import("react").ReactNode) | undefined;
|
|
29
30
|
onClick?: ((event: import("react").MouseEvent<Element, MouseEvent>) => void) | undefined;
|
|
@@ -33,9 +33,9 @@ export declare const Default: {
|
|
|
33
33
|
children?: import("react").ReactNode;
|
|
34
34
|
disabled?: boolean | undefined;
|
|
35
35
|
size?: "small" | "medium" | "large" | undefined;
|
|
36
|
-
color?: "
|
|
36
|
+
color?: "dark" | "grey" | "purple" | undefined;
|
|
37
37
|
density?: "compact" | "regular" | undefined;
|
|
38
|
-
sx?: import("../../theme/new
|
|
38
|
+
sx?: import("../../theme/new").SX | undefined;
|
|
39
39
|
ref?: import("react").Ref<HTMLDivElement> | undefined;
|
|
40
40
|
key?: import("react").Key | null | undefined;
|
|
41
41
|
}) => JSX.Element;
|
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
export interface ColorInputProps {
|
|
2
2
|
value?: string;
|
|
3
|
-
onValueChange: (value?: string) => void;
|
|
4
|
-
"aria-labelledby": string;
|
|
5
3
|
placeholder?: string;
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
4
|
+
"aria-labelledby": string;
|
|
5
|
+
onValueChange: (value?: string) => void;
|
|
6
|
+
}
|
|
7
|
+
export declare function ColorInput(props: ColorInputProps): JSX.Element;
|
|
@@ -1,17 +1,7 @@
|
|
|
1
|
-
declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R,
|
|
2
|
-
value?: string | undefined;
|
|
3
|
-
onValueChange: (value?: string | undefined) => void;
|
|
4
|
-
"aria-labelledby": string;
|
|
5
|
-
placeholder?: string | undefined;
|
|
6
|
-
}>;
|
|
1
|
+
declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("./ColorInput").ColorInputProps>;
|
|
7
2
|
export default _default;
|
|
8
3
|
export declare const Default: {
|
|
9
|
-
render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R,
|
|
10
|
-
value?: string | undefined;
|
|
11
|
-
onValueChange: (value?: string | undefined) => void;
|
|
12
|
-
"aria-labelledby": string;
|
|
13
|
-
placeholder?: string | undefined;
|
|
14
|
-
}>;
|
|
4
|
+
render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("./ColorInput").ColorInputProps>;
|
|
15
5
|
args: {
|
|
16
6
|
value: string;
|
|
17
7
|
};
|
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, {
|
|
2
|
+
zoom: number;
|
|
2
3
|
crop: import("react-easy-crop").Point;
|
|
3
4
|
image?: string | undefined;
|
|
4
|
-
|
|
5
|
-
onCropChange: (location: import("react-easy-crop").Point) => void;
|
|
5
|
+
aspect: number;
|
|
6
6
|
onZoomChange?: ((zoom: number) => void) | undefined;
|
|
7
|
+
onCropChange: (location: import("react-easy-crop").Point) => void;
|
|
7
8
|
onCropAreaChange?: ((croppedArea: import("react-easy-crop").Area, croppedAreaPixels: import("react-easy-crop").Area) => void) | undefined;
|
|
8
|
-
aspect: number;
|
|
9
9
|
initialCroppedAreaPixels?: import("react-easy-crop").Area | undefined;
|
|
10
10
|
}>;
|
|
11
11
|
export default _default;
|
|
12
12
|
export declare const Default: {
|
|
13
13
|
render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, {
|
|
14
|
+
zoom: number;
|
|
14
15
|
crop: import("react-easy-crop").Point;
|
|
15
16
|
image?: string | undefined;
|
|
16
|
-
|
|
17
|
-
onCropChange: (location: import("react-easy-crop").Point) => void;
|
|
17
|
+
aspect: number;
|
|
18
18
|
onZoomChange?: ((zoom: number) => void) | undefined;
|
|
19
|
+
onCropChange: (location: import("react-easy-crop").Point) => void;
|
|
19
20
|
onCropAreaChange?: ((croppedArea: import("react-easy-crop").Area, croppedAreaPixels: import("react-easy-crop").Area) => void) | undefined;
|
|
20
|
-
aspect: number;
|
|
21
21
|
initialCroppedAreaPixels?: import("react-easy-crop").Area | undefined;
|
|
22
22
|
}>;
|
|
23
23
|
args: {
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { Time } from "@internationalized/date";
|
|
2
|
-
import type { SX } from "../../theme/new
|
|
2
|
+
import type { SX } from "../../theme/new";
|
|
3
3
|
export type DateInputProps = {
|
|
4
4
|
value?: Date;
|
|
5
5
|
mode: Mode;
|
|
6
6
|
defaultTime?: Time;
|
|
7
|
-
|
|
7
|
+
disabled?: boolean;
|
|
8
8
|
/**
|
|
9
9
|
* The minimum allowed date that a user may select.
|
|
10
10
|
*/
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { type DialogContentProps } from "@radix-ui/react-dialog";
|
|
1
2
|
import type { FC, PropsWithChildren, ReactNode } from "react";
|
|
2
3
|
import { type IconName } from "../Icon";
|
|
3
4
|
export interface Custom {
|
|
@@ -8,12 +9,14 @@ export interface DialogProps {
|
|
|
8
9
|
modal?: boolean;
|
|
9
10
|
trigger?: ReactNode;
|
|
10
11
|
children?: ReactNode;
|
|
12
|
+
renderTooltip?: (trigger: ReactNode) => ReactNode;
|
|
11
13
|
open?: boolean;
|
|
12
14
|
onOpenChange?: (open: boolean) => void;
|
|
13
15
|
onAnimationEnd?: () => void;
|
|
14
16
|
hasClose?: boolean;
|
|
15
17
|
size?: "small" | "large" | "fullscreen" | Custom;
|
|
16
18
|
position?: "center" | "bottomRight";
|
|
19
|
+
onPointerDownOutside?: DialogContentProps["onPointerDownOutside"];
|
|
17
20
|
}
|
|
18
21
|
/**
|
|
19
22
|
* A Dialog rendered in document.body.
|
|
@@ -33,6 +36,7 @@ type ActionsProps = {
|
|
|
33
36
|
onClick: () => void;
|
|
34
37
|
loading?: boolean;
|
|
35
38
|
disabled?: boolean;
|
|
39
|
+
disabledTooltip?: string;
|
|
36
40
|
};
|
|
37
41
|
cancel?: {
|
|
38
42
|
text: string;
|
|
@@ -1,29 +1,14 @@
|
|
|
1
1
|
import type { FilterOption } from "../FilterField";
|
|
2
|
-
export interface DocumentCardProps
|
|
3
|
-
onSelect: () => void;
|
|
4
|
-
documentURL: string;
|
|
5
|
-
}
|
|
6
|
-
export declare function DocumentCard(props: DocumentCardProps): JSX.Element;
|
|
7
|
-
interface DocumentTypeBadgeProps {
|
|
2
|
+
export interface DocumentCardProps {
|
|
8
3
|
documentType: string;
|
|
9
|
-
|
|
10
|
-
}
|
|
11
|
-
interface TitleProps {
|
|
4
|
+
documentURL: string;
|
|
12
5
|
title: string;
|
|
13
|
-
|
|
14
|
-
status?: "published" | "release" | "archived" | "unclassified";
|
|
15
|
-
}
|
|
16
|
-
interface DescriptionProps {
|
|
17
|
-
description?: string;
|
|
18
|
-
loading?: boolean;
|
|
19
|
-
}
|
|
20
|
-
interface PreviewImageProps {
|
|
6
|
+
statusColor: "grey" | "green" | "amber" | "purple";
|
|
21
7
|
previewImageUrl?: string;
|
|
8
|
+
description?: string;
|
|
22
9
|
loading?: boolean;
|
|
23
|
-
}
|
|
24
|
-
interface FooterProps {
|
|
25
10
|
tags: string[];
|
|
26
|
-
loading?: boolean;
|
|
27
11
|
tagsFilter?: Set<FilterOption>;
|
|
12
|
+
onSelect: () => void;
|
|
28
13
|
}
|
|
29
|
-
export
|
|
14
|
+
export declare function DocumentCard(props: DocumentCardProps): JSX.Element;
|
|
@@ -1,16 +1,40 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import { DocumentCard } from "./DocumentCard";
|
|
2
|
+
declare const meta: {
|
|
3
|
+
title: string;
|
|
4
|
+
component: typeof DocumentCard;
|
|
5
|
+
argTypes: {
|
|
6
|
+
statusColor: {
|
|
7
|
+
control: {
|
|
8
|
+
type: string;
|
|
9
|
+
};
|
|
10
|
+
options: string[];
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
export default meta;
|
|
3
15
|
export declare const Default: {
|
|
4
|
-
render:
|
|
16
|
+
render: (args: {
|
|
17
|
+
documentType: string;
|
|
18
|
+
documentURL: string;
|
|
19
|
+
title: string;
|
|
20
|
+
statusColor: "green" | "grey" | "purple" | "amber";
|
|
21
|
+
previewImageUrl?: string | undefined;
|
|
22
|
+
description?: string | undefined;
|
|
23
|
+
loading?: boolean | undefined;
|
|
24
|
+
tags: string[];
|
|
25
|
+
tagsFilter?: Set<import("../FilterField").FilterOption> | undefined;
|
|
26
|
+
onSelect: () => void;
|
|
27
|
+
}) => JSX.Element;
|
|
5
28
|
args: {
|
|
6
29
|
documentType: string;
|
|
30
|
+
documentURL: string;
|
|
7
31
|
title: string;
|
|
8
32
|
description: string;
|
|
9
33
|
tags: string[];
|
|
10
34
|
previewImageUrl: string;
|
|
11
35
|
onSelect: () => undefined;
|
|
12
|
-
loading:
|
|
13
|
-
|
|
36
|
+
loading: false;
|
|
37
|
+
statusColor: "green";
|
|
14
38
|
};
|
|
15
39
|
name: string;
|
|
16
40
|
};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { Dot } from "./Dot";
|
|
2
|
+
declare const meta: {
|
|
3
|
+
title: string;
|
|
4
|
+
component: typeof Dot;
|
|
5
|
+
argTypes: {
|
|
6
|
+
color: {
|
|
7
|
+
control: {
|
|
8
|
+
type: string;
|
|
9
|
+
};
|
|
10
|
+
options: string[];
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
export default meta;
|
|
15
|
+
export declare const Default: {
|
|
16
|
+
name: string;
|
|
17
|
+
args: {
|
|
18
|
+
color: "green";
|
|
19
|
+
};
|
|
20
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Dot } from "./Dot";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type
|
|
1
|
+
import { type ReactNode } from "react";
|
|
2
2
|
export interface DropdownMenuProps {
|
|
3
3
|
modal?: boolean;
|
|
4
4
|
children: ReactNode;
|
|
@@ -14,7 +14,7 @@ export interface DropdownMenuContentProps {
|
|
|
14
14
|
side?: "bottom" | "left" | "right" | "top";
|
|
15
15
|
minWidth?: 128 | 256;
|
|
16
16
|
children: ReactNode;
|
|
17
|
-
|
|
17
|
+
asPortal?: boolean;
|
|
18
18
|
maxHeight?: 256;
|
|
19
19
|
}
|
|
20
20
|
export declare function DropdownMenuContent(props: DropdownMenuContentProps): JSX.Element;
|