@prismicio/editor-ui 0.4.50-alpha.xru-test-extension.0 → 0.4.50-shared-onboarding-in-page-builder.1
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/AnimatedList/AnimatedList.stories.d.ts +1 -1
- package/dist/components/Avatar/Avatar.d.ts +9 -1
- package/dist/components/Avatar/Avatar.stories.d.ts +1 -0
- package/dist/components/Box/Box.stories.d.ts +31 -31
- package/dist/components/Button/Button.stories.d.ts +2 -2
- package/dist/components/ComboBox/ComboBox.d.ts +56 -7
- package/dist/components/ComboBox/ComboBox.stories.d.ts +3 -0
- package/dist/components/DropdownMenu/DropdownMenu.d.ts +1 -1
- package/dist/components/Form/FormField.d.ts +2 -0
- package/dist/components/Form/FormSearchInput.d.ts +1 -1
- package/dist/components/OverflowContainer/OverflowContainer.stories.d.ts +1 -1
- package/dist/components/ProgressBar/ProgressBar.stories.d.ts +3 -3
- package/dist/components/Skeleton/Skeleton.d.ts +11 -11
- package/dist/components/Video/Video.stories.d.ts +1 -1
- package/dist/index.cjs.js +160 -160
- package/dist/index.es.js +7540 -7451
- package/dist/style.css +1 -1
- package/dist/theme/theme.d.ts +5 -0
- package/package.json +2 -2
|
@@ -8,7 +8,7 @@ export default meta;
|
|
|
8
8
|
export declare const Default: {
|
|
9
9
|
render: (args: {
|
|
10
10
|
ariaLabel: string;
|
|
11
|
-
gap?: 0 |
|
|
11
|
+
gap?: 0 | "auto" | "fieldSetGap" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
12
12
|
direction?: "horizontal" | "vertical" | undefined;
|
|
13
13
|
items: unknown[];
|
|
14
14
|
getItemKey: (item: unknown) => string;
|
|
@@ -1,8 +1,16 @@
|
|
|
1
|
+
import type { ReactNode } from "react";
|
|
1
2
|
export interface AvatarProps {
|
|
2
3
|
imageUrl?: string;
|
|
3
4
|
firstName?: string;
|
|
4
5
|
lastName?: string;
|
|
5
6
|
hasBorder?: boolean;
|
|
6
|
-
size?: 16 | 24 | 32;
|
|
7
|
+
size?: 16 | 24 | 32 | 40;
|
|
8
|
+
variant?: "circle" | "square";
|
|
9
|
+
/**
|
|
10
|
+
* The content to show when the imageUrl was not provided
|
|
11
|
+
* or image is not available after delayMs.
|
|
12
|
+
* If not provided, the initials of the first and last name will be shown.
|
|
13
|
+
*/
|
|
14
|
+
fallback?: ReactNode;
|
|
7
15
|
}
|
|
8
16
|
export declare function Avatar(props: AvatarProps): JSX.Element;
|
|
@@ -34,17 +34,17 @@ export declare const Default: {
|
|
|
34
34
|
duration?: 0 | 100 | 75 | 150 | 200 | 250 | 300 | 400 | undefined;
|
|
35
35
|
} | undefined;
|
|
36
36
|
transition?: {
|
|
37
|
-
property: "
|
|
37
|
+
property: "opacity" | "height" | "background-color";
|
|
38
38
|
duration?: 0 | 100 | 75 | 150 | 200 | 250 | 300 | 400 | undefined;
|
|
39
39
|
delay?: string | undefined;
|
|
40
40
|
} | undefined;
|
|
41
|
-
padding?: (0 |
|
|
42
|
-
block?: 0 |
|
|
43
|
-
inline?: 0 |
|
|
44
|
-
top?: 0 |
|
|
45
|
-
bottom?: 0 |
|
|
46
|
-
left?: 0 |
|
|
47
|
-
right?: 0 |
|
|
41
|
+
padding?: (0 | "auto" | "fieldSetGap" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | {
|
|
42
|
+
block?: 0 | "auto" | "fieldSetGap" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
43
|
+
inline?: 0 | "auto" | "fieldSetGap" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
44
|
+
top?: 0 | "auto" | "fieldSetGap" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
45
|
+
bottom?: 0 | "auto" | "fieldSetGap" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
46
|
+
left?: 0 | "auto" | "fieldSetGap" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
47
|
+
right?: 0 | "auto" | "fieldSetGap" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
48
48
|
}) | undefined;
|
|
49
49
|
border?: (boolean | {
|
|
50
50
|
top?: boolean | undefined;
|
|
@@ -52,14 +52,14 @@ export declare const Default: {
|
|
|
52
52
|
left?: boolean | undefined;
|
|
53
53
|
right?: boolean | undefined;
|
|
54
54
|
}) | undefined;
|
|
55
|
-
borderRadius?: (0 |
|
|
56
|
-
topLeft?: 0 |
|
|
57
|
-
topRight?: 0 |
|
|
58
|
-
bottomLeft?: 0 |
|
|
59
|
-
bottomRight?: 0 |
|
|
55
|
+
borderRadius?: (0 | "50%" | "100%" | "inherit" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | {
|
|
56
|
+
topLeft?: 0 | "50%" | "100%" | "inherit" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | undefined;
|
|
57
|
+
topRight?: 0 | "50%" | "100%" | "inherit" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | undefined;
|
|
58
|
+
bottomLeft?: 0 | "50%" | "100%" | "inherit" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | undefined;
|
|
59
|
+
bottomRight?: 0 | "50%" | "100%" | "inherit" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | undefined;
|
|
60
60
|
}) | undefined;
|
|
61
61
|
borderStyle?: "none" | "dashed" | "solid" | undefined;
|
|
62
|
-
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;
|
|
62
|
+
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;
|
|
63
63
|
opacity?: 0 | 1 | 0.1 | 0.3 | 0.4 | 0.5 | 0.6 | 0.8 | 0.9 | undefined;
|
|
64
64
|
visibility?: "hidden" | "visible" | undefined;
|
|
65
65
|
overflowY?: "auto" | "hidden" | undefined;
|
|
@@ -67,7 +67,7 @@ export declare const Default: {
|
|
|
67
67
|
gridColumn?: string | undefined;
|
|
68
68
|
gridRow?: string | undefined;
|
|
69
69
|
transform?: import("csstype").Property.Transform | undefined;
|
|
70
|
-
gap?: 0 |
|
|
70
|
+
gap?: 0 | "auto" | "fieldSetGap" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
71
71
|
alignItems?: "center" | "flex-start" | undefined;
|
|
72
72
|
justifyContent?: "center" | "end" | "space-between" | undefined;
|
|
73
73
|
display: "grid";
|
|
@@ -98,17 +98,17 @@ export declare const Default: {
|
|
|
98
98
|
duration?: 0 | 100 | 75 | 150 | 200 | 250 | 300 | 400 | undefined;
|
|
99
99
|
} | undefined;
|
|
100
100
|
transition?: {
|
|
101
|
-
property: "
|
|
101
|
+
property: "opacity" | "height" | "background-color";
|
|
102
102
|
duration?: 0 | 100 | 75 | 150 | 200 | 250 | 300 | 400 | undefined;
|
|
103
103
|
delay?: string | undefined;
|
|
104
104
|
} | undefined;
|
|
105
|
-
padding?: (0 |
|
|
106
|
-
block?: 0 |
|
|
107
|
-
inline?: 0 |
|
|
108
|
-
top?: 0 |
|
|
109
|
-
bottom?: 0 |
|
|
110
|
-
left?: 0 |
|
|
111
|
-
right?: 0 |
|
|
105
|
+
padding?: (0 | "auto" | "fieldSetGap" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | {
|
|
106
|
+
block?: 0 | "auto" | "fieldSetGap" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
107
|
+
inline?: 0 | "auto" | "fieldSetGap" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
108
|
+
top?: 0 | "auto" | "fieldSetGap" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
109
|
+
bottom?: 0 | "auto" | "fieldSetGap" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
110
|
+
left?: 0 | "auto" | "fieldSetGap" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
111
|
+
right?: 0 | "auto" | "fieldSetGap" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
112
112
|
}) | undefined;
|
|
113
113
|
border?: (boolean | {
|
|
114
114
|
top?: boolean | undefined;
|
|
@@ -116,14 +116,14 @@ export declare const Default: {
|
|
|
116
116
|
left?: boolean | undefined;
|
|
117
117
|
right?: boolean | undefined;
|
|
118
118
|
}) | undefined;
|
|
119
|
-
borderRadius?: (0 |
|
|
120
|
-
topLeft?: 0 |
|
|
121
|
-
topRight?: 0 |
|
|
122
|
-
bottomLeft?: 0 |
|
|
123
|
-
bottomRight?: 0 |
|
|
119
|
+
borderRadius?: (0 | "50%" | "100%" | "inherit" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | {
|
|
120
|
+
topLeft?: 0 | "50%" | "100%" | "inherit" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | undefined;
|
|
121
|
+
topRight?: 0 | "50%" | "100%" | "inherit" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | undefined;
|
|
122
|
+
bottomLeft?: 0 | "50%" | "100%" | "inherit" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | undefined;
|
|
123
|
+
bottomRight?: 0 | "50%" | "100%" | "inherit" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | undefined;
|
|
124
124
|
}) | undefined;
|
|
125
125
|
borderStyle?: "none" | "dashed" | "solid" | undefined;
|
|
126
|
-
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;
|
|
126
|
+
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;
|
|
127
127
|
opacity?: 0 | 1 | 0.1 | 0.3 | 0.4 | 0.5 | 0.6 | 0.8 | 0.9 | undefined;
|
|
128
128
|
visibility?: "hidden" | "visible" | undefined;
|
|
129
129
|
overflowY?: "auto" | "hidden" | undefined;
|
|
@@ -131,10 +131,10 @@ export declare const Default: {
|
|
|
131
131
|
gridColumn?: string | undefined;
|
|
132
132
|
gridRow?: string | undefined;
|
|
133
133
|
transform?: import("csstype").Property.Transform | undefined;
|
|
134
|
-
gap?: 0 |
|
|
134
|
+
gap?: 0 | "auto" | "fieldSetGap" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
135
135
|
alignItems?: "center" | "flex-start" | undefined;
|
|
136
136
|
justifyContent?: "center" | "end" | "space-between" | undefined;
|
|
137
|
-
display?: "flex" | "
|
|
137
|
+
display?: "inline-flex" | "flex" | undefined;
|
|
138
138
|
flexDirection?: "row" | "column" | undefined;
|
|
139
139
|
gridTemplateColumns?: undefined;
|
|
140
140
|
gridTemplateRows?: undefined;
|
|
@@ -26,8 +26,8 @@ export declare const Default: {
|
|
|
26
26
|
textWeight?: "bold" | "normal" | undefined;
|
|
27
27
|
radius?: "normal" | "full" | undefined;
|
|
28
28
|
sx?: import("../../theme").SX | undefined;
|
|
29
|
-
startIcon?: "
|
|
30
|
-
endIcon?: "
|
|
29
|
+
startIcon?: "search" | "link" | "code" | "add" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "attachFile" | "autoFixHigh" | "biToggle" | "block" | "calendarToday" | "centerFocusWeak" | "check" | "checkBox" | "checkBoxOutlinedBlank" | "chevronLeft" | "chevronRight" | "close" | "cloud" | "cloudUpload" | "colorLens" | "contentCopy" | "contentPaste" | "createNewFolder" | "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" | "invite" | "javascript" | "json" | "keyboardArrowDown" | "keyboardArrowUp" | "label" | "language" | "linkOff" | "lock" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "migrationRelease" | "moreVert" | "multipleStop" | "musicNote" | "notStarted" | "notes" | "openInFull" | "openInNew" | "outbound" | "people" | "phoneIphone" | "photo" | "pin" | "place" | "playCircle" | "preview" | "prismic" | "public" | "refresh" | "save" | "schedule" | "sentimentSatisfied" | "settings" | "settingsEthernet" | "smartDisplay" | "svelte" | "tabletMac" | "tag" | "terminal" | "textFields" | "title" | "toggleOff" | "translate" | "typescript" | "unfoldMore" | "unsplash" | "upload" | "videocam" | "viewDay" | "visibility" | "vue" | "zoomOutMap" | undefined;
|
|
30
|
+
endIcon?: "search" | "link" | "code" | "add" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "attachFile" | "autoFixHigh" | "biToggle" | "block" | "calendarToday" | "centerFocusWeak" | "check" | "checkBox" | "checkBoxOutlinedBlank" | "chevronLeft" | "chevronRight" | "close" | "cloud" | "cloudUpload" | "colorLens" | "contentCopy" | "contentPaste" | "createNewFolder" | "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" | "invite" | "javascript" | "json" | "keyboardArrowDown" | "keyboardArrowUp" | "label" | "language" | "linkOff" | "lock" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "migrationRelease" | "moreVert" | "multipleStop" | "musicNote" | "notStarted" | "notes" | "openInFull" | "openInNew" | "outbound" | "people" | "phoneIphone" | "photo" | "pin" | "place" | "playCircle" | "preview" | "prismic" | "public" | "refresh" | "save" | "schedule" | "sentimentSatisfied" | "settings" | "settingsEthernet" | "smartDisplay" | "svelte" | "tabletMac" | "tag" | "terminal" | "textFields" | "title" | "toggleOff" | "translate" | "typescript" | "unfoldMore" | "unsplash" | "upload" | "videocam" | "viewDay" | "visibility" | "vue" | "zoomOutMap" | undefined;
|
|
31
31
|
renderStartIcon?: ((icon: import("react").ReactNode) => import("react").ReactNode) | undefined;
|
|
32
32
|
renderEndIcon?: ((icon: import("react").ReactNode) => import("react").ReactNode) | undefined;
|
|
33
33
|
hotkeys?: import("react-hotkeys-hook").Keys | undefined;
|
|
@@ -1,23 +1,59 @@
|
|
|
1
|
-
import { type ReactNode } from "react";
|
|
1
|
+
import { type ReactNode, type RefObject } from "react";
|
|
2
2
|
import type { SX } from "../../theme";
|
|
3
|
-
type
|
|
3
|
+
import { type IconProps } from "../Icon";
|
|
4
|
+
type Variant = "attached" | "detached" | "detached-connected";
|
|
4
5
|
export interface ComboBoxProps {
|
|
5
6
|
children: ReactNode;
|
|
7
|
+
/**
|
|
8
|
+
* Variant defines the appearance and behavior of the ComboBox
|
|
9
|
+
* - "detached" - the dropdown is hiding or appearing according to user focus on the input
|
|
10
|
+
* - "detached-connected" - same as "detached" but the dropdown is connected to the input visually
|
|
11
|
+
* - "attached" - dropdown is connected to the input both visually and functionally (it's always shown)
|
|
12
|
+
*/
|
|
6
13
|
variant?: Variant;
|
|
14
|
+
/**
|
|
15
|
+
* Aligns content above the input or below
|
|
16
|
+
* Supports only "detached*" variants
|
|
17
|
+
*/
|
|
18
|
+
side?: "top" | "bottom";
|
|
7
19
|
sx?: SX;
|
|
20
|
+
/**
|
|
21
|
+
* Controls the visibility of the list
|
|
22
|
+
* Enables "detached*" variants to be controlled from the outside
|
|
23
|
+
*/
|
|
24
|
+
isOpen?: boolean;
|
|
25
|
+
/**
|
|
26
|
+
* Callback to be called when the list is closed
|
|
27
|
+
* Enables "detached*" variants to be controlled from the outside
|
|
28
|
+
*/
|
|
29
|
+
onClose?: () => void;
|
|
30
|
+
/**
|
|
31
|
+
* Refs to elements that should not close the list when clicked
|
|
32
|
+
*/
|
|
33
|
+
dropdownRefs?: RefObject<HTMLDivElement>[];
|
|
34
|
+
/**
|
|
35
|
+
* Enables a translucent grey overlay that appears when the list is open
|
|
36
|
+
* Supports only "detached*" variants
|
|
37
|
+
*/
|
|
38
|
+
overlay?: boolean;
|
|
8
39
|
}
|
|
9
40
|
export declare const ComboBox: (props: ComboBoxProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
|
|
10
41
|
interface ComboBoxContentProps {
|
|
11
42
|
children: ReactNode;
|
|
12
|
-
/**
|
|
13
|
-
* Aligns "detached" content above the input or below
|
|
14
|
-
* @variant - detached
|
|
15
|
-
*/
|
|
16
|
-
side?: "top" | "bottom";
|
|
17
43
|
/**
|
|
18
44
|
* Adds padding to the top and bottom of the content
|
|
19
45
|
*/
|
|
20
46
|
paddingBlock?: 0 | 2 | 4;
|
|
47
|
+
/**
|
|
48
|
+
* Maximum height of the content
|
|
49
|
+
*/
|
|
50
|
+
maxHeight?: 200 | "full";
|
|
51
|
+
/**
|
|
52
|
+
* Disable default onClick handler.
|
|
53
|
+
* Useful when you want to handle click events manually,
|
|
54
|
+
* ie. with a Link component to make cmd+click work.
|
|
55
|
+
*/
|
|
56
|
+
disableOnClick?: boolean;
|
|
21
57
|
}
|
|
22
58
|
export declare const ComboBoxContent: (props: ComboBoxContentProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
|
|
23
59
|
type ComboBoxItemProps = {
|
|
@@ -26,6 +62,12 @@ type ComboBoxItemProps = {
|
|
|
26
62
|
onCheckedChange?: (checked: boolean) => void;
|
|
27
63
|
disabled?: boolean;
|
|
28
64
|
children: ReactNode;
|
|
65
|
+
iconStyle?: Pick<IconProps, "color" | "size">;
|
|
66
|
+
/**
|
|
67
|
+
* Changes the style of the item
|
|
68
|
+
* "action-list-item" styles the item as if it was an ActionListItem component
|
|
69
|
+
*/
|
|
70
|
+
variant?: "default" | "action-list-item";
|
|
29
71
|
};
|
|
30
72
|
export declare const ComboBoxItem: (props: ComboBoxItemProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
|
|
31
73
|
interface ComboBoxInputProps {
|
|
@@ -37,6 +79,13 @@ interface ComboBoxInputProps {
|
|
|
37
79
|
* Needed when ComboBox is nested within Popovers
|
|
38
80
|
*/
|
|
39
81
|
autoFocus?: boolean;
|
|
82
|
+
/**
|
|
83
|
+
* Callback to be called when the input is focused
|
|
84
|
+
* Returning false will prevent the list from opening
|
|
85
|
+
*/
|
|
86
|
+
onFocus?: () => boolean;
|
|
87
|
+
maxLength?: number;
|
|
88
|
+
endAdornment?: boolean;
|
|
40
89
|
}
|
|
41
90
|
export declare const ComboBoxInput: (props: ComboBoxInputProps & import("react").RefAttributes<HTMLInputElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
|
|
42
91
|
interface ComboBoxActionProps {
|
|
@@ -54,7 +54,7 @@ export interface DropdownMenuContentProps {
|
|
|
54
54
|
*/
|
|
55
55
|
childrenFocusScope?: boolean;
|
|
56
56
|
}
|
|
57
|
-
export declare
|
|
57
|
+
export declare const DropdownMenuContent: (props: DropdownMenuContentProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
|
|
58
58
|
interface DropdownMenuItemProps {
|
|
59
59
|
children: ReactNode;
|
|
60
60
|
disabled?: boolean;
|
|
@@ -11,6 +11,7 @@ type LabelProps = {
|
|
|
11
11
|
label: string;
|
|
12
12
|
id: string;
|
|
13
13
|
} | object;
|
|
14
|
+
export type RoundedSide = "all" | "top" | "bottom";
|
|
14
15
|
export type FormInputFieldProps = {
|
|
15
16
|
children?: ReactNode;
|
|
16
17
|
error?: boolean | string;
|
|
@@ -18,6 +19,7 @@ export type FormInputFieldProps = {
|
|
|
18
19
|
disabled?: boolean;
|
|
19
20
|
size?: "small" | "medium" | "large";
|
|
20
21
|
sx?: SX;
|
|
22
|
+
roundedSide?: RoundedSide;
|
|
21
23
|
} & LabelProps;
|
|
22
24
|
export declare const FormInputField: (props: FormInputFieldProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
|
|
23
25
|
export {};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { type AriaRole, type FocusEvent } from "react";
|
|
2
2
|
import { type FormInputFieldProps } from "./FormField";
|
|
3
|
-
export interface FormSearchInputProps extends Pick<FormInputFieldProps, "disabled" | "error" | "sx" | "description"> {
|
|
3
|
+
export interface FormSearchInputProps extends Pick<FormInputFieldProps, "disabled" | "error" | "sx" | "description" | "roundedSide"> {
|
|
4
4
|
label?: string;
|
|
5
5
|
placeholder?: string;
|
|
6
6
|
maxLength?: number;
|
|
@@ -13,7 +13,7 @@ declare const meta: {
|
|
|
13
13
|
};
|
|
14
14
|
decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react/dist/types-0a347bb9").R, {
|
|
15
15
|
children: import("react").ReactNode[];
|
|
16
|
-
gap?: (0 |
|
|
16
|
+
gap?: (0 | 1 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100) | undefined;
|
|
17
17
|
}>) => JSX.Element)[];
|
|
18
18
|
};
|
|
19
19
|
export default meta;
|
|
@@ -61,9 +61,9 @@ declare const meta: {
|
|
|
61
61
|
max?: number | undefined;
|
|
62
62
|
getValueLabel?: ((value: number, max: number) => string) | undefined;
|
|
63
63
|
displayLabel?: boolean | undefined;
|
|
64
|
-
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;
|
|
65
|
-
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;
|
|
66
|
-
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;
|
|
64
|
+
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;
|
|
65
|
+
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;
|
|
66
|
+
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;
|
|
67
67
|
height?: "large" | "normal" | "collapsed" | undefined;
|
|
68
68
|
transition?: "slow" | "fast" | undefined;
|
|
69
69
|
sx?: import("../../theme").SX | undefined;
|
|
@@ -21,20 +21,20 @@ export declare function Skeleton(props: Props): import("react").DetailedReactHTM
|
|
|
21
21
|
flexShrink?: 0 | undefined;
|
|
22
22
|
flexBasis?: 0 | undefined;
|
|
23
23
|
flexWrap?: "wrap" | undefined;
|
|
24
|
-
order?: 0 |
|
|
24
|
+
order?: 0 | 1 | 2 | 3 | undefined;
|
|
25
25
|
alignSelf?: "center" | "stretch" | "start" | "end" | undefined;
|
|
26
26
|
justifySelf?: "center" | "stretch" | "start" | "end" | undefined;
|
|
27
27
|
visibility?: "hidden" | "visible" | undefined;
|
|
28
28
|
position?: "fixed" | "absolute" | "relative" | "sticky" | undefined;
|
|
29
|
-
marginLeft?: 0 |
|
|
30
|
-
marginRight?: 0 |
|
|
31
|
-
marginTop?: 0 |
|
|
32
|
-
marginBottom?: 0 |
|
|
33
|
-
marginInline?: 0 |
|
|
34
|
-
marginBlock?: 0 |
|
|
35
|
-
top?: 0 |
|
|
36
|
-
left?: 0 |
|
|
37
|
-
right?: 0 |
|
|
38
|
-
bottom?: 0 |
|
|
29
|
+
marginLeft?: 0 | "auto" | "fieldSetGap" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
30
|
+
marginRight?: 0 | "auto" | "fieldSetGap" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
31
|
+
marginTop?: 0 | "auto" | "fieldSetGap" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
32
|
+
marginBottom?: 0 | "auto" | "fieldSetGap" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
33
|
+
marginInline?: 0 | "auto" | "fieldSetGap" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
34
|
+
marginBlock?: 0 | "auto" | "fieldSetGap" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
35
|
+
top?: 0 | "auto" | "fieldSetGap" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
36
|
+
left?: 0 | "auto" | "fieldSetGap" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
37
|
+
right?: 0 | "auto" | "fieldSetGap" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
38
|
+
bottom?: 0 | "auto" | "fieldSetGap" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
39
39
|
};
|
|
40
40
|
}, HTMLElement>;
|
|
@@ -22,7 +22,7 @@ export declare const Default: {
|
|
|
22
22
|
src: string;
|
|
23
23
|
loop?: boolean | undefined;
|
|
24
24
|
autoPlay?: boolean | undefined;
|
|
25
|
-
sizing?: "
|
|
25
|
+
sizing?: "none" | "contain" | "cover" | undefined;
|
|
26
26
|
borderRadius?: 0 | 4 | undefined;
|
|
27
27
|
boxShadow?: "3" | undefined;
|
|
28
28
|
animateOnLoad?: boolean | undefined;
|