@prismicio/editor-ui 0.4.28 → 0.4.30
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/README.md +0 -4
- package/dist/components/Alert/Alert.stories.d.ts +1 -1
- package/dist/components/AnimatedElement/AnimatedElement.d.ts +1 -1
- package/dist/components/AnimatedElement/AnimatedElement.stories.d.ts +1 -1
- package/dist/components/AnimatedList/AnimatedList.d.ts +1 -1
- package/dist/components/AnimatedList/AnimatedList.stories.d.ts +1 -1
- package/dist/components/Badge/Badge.d.ts +2 -2
- package/dist/components/BaseInput/BaseInput.d.ts +1 -1
- package/dist/components/BlankSlate/BlankSlate.d.ts +1 -1
- package/dist/components/Box/Box.d.ts +1 -1
- package/dist/components/Box/Box.stories.d.ts +33 -33
- package/dist/components/Button/Button.d.ts +4 -2
- 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 +1 -1
- package/dist/components/Card/Card.d.ts +1 -1
- package/dist/components/Card/Card.stories.d.ts +1 -1
- package/dist/components/Checkbox/Checkbox.stories.d.ts +2 -2
- package/dist/components/ComboBox/ComboBox.d.ts +4 -3
- package/dist/components/ComboBox/useComboBox.d.ts +11 -0
- package/dist/components/Cropper/Cropper.stories.d.ts +2 -2
- package/dist/components/DateInput/DateInput.d.ts +1 -1
- package/dist/components/DateInput/DateInput.stories.d.ts +1 -1
- package/dist/components/Dialog/Options/DialogOptions.d.ts +1 -1
- package/dist/components/EditableText/EditableText.d.ts +1 -1
- package/dist/components/ErrorBoundary/DefaultErrorMessage.d.ts +1 -1
- package/dist/components/Form/Form.d.ts +1 -1
- package/dist/components/Form/Form.stories.d.ts +1 -1
- package/dist/components/Form/FormDateInput.d.ts +1 -1
- package/dist/components/Form/FormField.d.ts +1 -1
- package/dist/components/Form/FormInput.d.ts +1 -1
- package/dist/components/Form/FormSearchInput.d.ts +2 -1
- package/dist/components/Gradient/Gradient.d.ts +1 -1
- package/dist/components/Group/Group.d.ts +2 -4
- package/dist/components/Group/Group.stories.d.ts +2 -30
- package/dist/components/Group/GroupItem.d.ts +0 -1
- package/dist/components/HairlineButton/HairlineButton.d.ts +1 -1
- package/dist/components/Icon/Icon.d.ts +1 -1
- package/dist/components/Icon/iconNames.d.ts +1 -1
- package/dist/components/IconButton/IconButton.d.ts +3 -1
- package/dist/components/Image/Image.d.ts +1 -1
- package/dist/components/LazyRender/LazyRender.d.ts +1 -1
- 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 +5 -0
- package/dist/components/NumberInput/NumberInput.d.ts +1 -1
- package/dist/components/OverflowContainer/OverflowContainer.d.ts +1 -1
- package/dist/components/ProgressCircle/ProgressCircle.d.ts +1 -1
- package/dist/components/Radio/RadioBigCard.d.ts +12 -0
- package/dist/components/Radio/RadioGroup.d.ts +2 -1
- package/dist/components/Radio/index.d.ts +1 -0
- package/dist/components/SearchInput/SearchInput.d.ts +1 -1
- package/dist/components/Select/Select.d.ts +1 -1
- package/dist/components/SelectButton/SelectButton.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 -12
- package/dist/components/Skeleton/Skeleton.stories.d.ts +2 -2
- package/dist/components/Slider/Slider.stories.d.ts +2 -2
- package/dist/components/Suspense/AnimatedSuspense.d.ts +1 -1
- package/dist/components/Switch/Switch.d.ts +1 -1
- package/dist/components/Tab/Tab.d.ts +1 -1
- package/dist/components/Text/Text.d.ts +1 -1
- package/dist/components/TextArea/TextArea.d.ts +1 -1
- package/dist/components/TextInput/TextInput.d.ts +1 -1
- package/dist/components/ThemeProvider.d.ts +3 -4
- package/dist/components/Toast/Toast.stories.d.ts +2 -2
- package/dist/components/ToggleButton/ToggleButton.stories.d.ts +2 -2
- package/dist/components/Toolbar/Toolbar.d.ts +1 -1
- package/dist/components/Video/Video.d.ts +1 -1
- package/dist/components/Video/Video.stories.d.ts +2 -2
- package/dist/components/Window/Window.d.ts +1 -1
- package/dist/index.cjs.js +152 -148
- package/dist/index.d.ts +2 -9
- package/dist/index.es.js +20556 -20920
- package/dist/style.css +1 -1
- package/dist/theme/{new/index.d.ts → index.d.ts} +1 -1
- package/dist/theme/{new/useMediaQuery.d.ts → useMediaQuery.d.ts} +1 -0
- package/package.json +3 -7
- package/dist/components/Accordion/Accordion.d.ts +0 -16
- package/dist/components/Accordion/Accordion.stories.d.ts +0 -33
- package/dist/components/Accordion/index.d.ts +0 -3
- package/dist/components/Accordion/useAccordion.d.ts +0 -18
- package/dist/theme/colors.d.ts +0 -223
- package/dist/theme/mode.css.d.ts +0 -1
- package/dist/theme/selectors.d.ts +0 -48
- package/dist/theme/sprinkles.css.d.ts +0 -29801
- package/dist/theme/vars.css.d.ts +0 -487
- /package/dist/theme/{new/Theme.stories.d.ts → Theme.stories.d.ts} +0 -0
- /package/dist/theme/{new/install.d.ts → install.d.ts} +0 -0
- /package/dist/theme/{new/sx.d.ts → sx.d.ts} +0 -0
- /package/dist/theme/{new/theme.d.ts → theme.d.ts} +0 -0
- /package/dist/theme/{new/utils.d.ts → utils.d.ts} +0 -0
package/README.md
CHANGED
|
@@ -5,10 +5,6 @@
|
|
|
5
5
|
- When passing a React Node as children to a radix primitive that has the `asChild` prop, you must spread all unused props into that React Node, even if at the type level there doesn't seem to be any remaining props. This is because radix secretly set a lot of extra props on the React Node you gave it. For an example of this, see BaseInput's `otherProps`.
|
|
6
6
|
We favor using `asChild` to reduce the number of DOM nodes and make it easy to size children.
|
|
7
7
|
|
|
8
|
-
## vanilla-extract GOTCHAS
|
|
9
|
-
|
|
10
|
-
- You can not reference a parent selector that is made of ONLY `sprinkles` generated classNames. See Field.css.ts -> labelPosition to see a workaround: An empty object is passed to `styleVariant` which is equivalent to having an empty className generated with `style({})`.
|
|
11
|
-
|
|
12
8
|
## How to add a new SVG icon
|
|
13
9
|
|
|
14
10
|
1. Export the SVG icon from [Figma](https://www.figma.com/file/V5pub1BwPMJGY52YHmhTmX/Prismic---Design-System?node-id=46%3A2811). It should always be the variant with a viewbox of 24x24.
|
|
@@ -7,7 +7,7 @@ declare const meta: {
|
|
|
7
7
|
argTypes: {
|
|
8
8
|
icon: {
|
|
9
9
|
control: string;
|
|
10
|
-
options: readonly ["add", "alert", "arrowBack", "arrowDownward", "arrowDropDown", "arrowDropDownCircle", "arrowForward", "arrowUpward", "autoFixHigh", "biToggle", "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", "migrationRelease", "moreVert", "multipleStop", "musicNote", "notes", "openInFull", "openInNew", "phoneIphone", "photo", "pin", "place", "playCircle", "preview", "prismic", "public", "refresh", "save", "schedule", "search", "smartDisplay", "tabletMac", "tag", "textFields", "toggleOff", "unfoldMore", "unsplash", "upload", "viewDay", "visibility", "zoomOutMap"];
|
|
10
|
+
options: readonly ["add", "alert", "arrowBack", "arrowDownward", "arrowDropDown", "arrowDropDownCircle", "arrowForward", "arrowUpward", "autoFixHigh", "biToggle", "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", "language", "link", "linkOff", "lock", "looks1", "looks2", "looks3", "looks4", "looks5", "looks6", "migrationRelease", "moreVert", "multipleStop", "musicNote", "notes", "openInFull", "openInNew", "phoneIphone", "photo", "pin", "place", "playCircle", "preview", "prismic", "public", "refresh", "save", "schedule", "search", "smartDisplay", "tabletMac", "tag", "textFields", "toggleOff", "translate", "unfoldMore", "unsplash", "upload", "viewDay", "visibility", "zoomOutMap"];
|
|
11
11
|
};
|
|
12
12
|
color: {
|
|
13
13
|
control: string;
|
|
@@ -16,7 +16,7 @@ export declare const Default: {
|
|
|
16
16
|
} | undefined;
|
|
17
17
|
enterDuration?: 0 | 100 | 75 | 150 | 200 | 250 | 300 | 400 | undefined;
|
|
18
18
|
exitDuration?: 0 | 100 | 75 | 150 | 200 | 250 | 300 | 400 | undefined;
|
|
19
|
-
sx?: import("../../theme
|
|
19
|
+
sx?: import("../../theme").SX | undefined;
|
|
20
20
|
}) => JSX.Element;
|
|
21
21
|
args: {
|
|
22
22
|
children: null;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type ReactNode } from "react";
|
|
2
|
-
import { type ThemeKeys } from "../../theme
|
|
2
|
+
import { type ThemeKeys } from "../../theme";
|
|
3
3
|
import { type RenderDragPreview, type RenderDropIndicator } from "./dnd";
|
|
4
4
|
import { type State } from "./layout";
|
|
5
5
|
export interface AnimatedListProps<ITEM> {
|
|
@@ -8,7 +8,7 @@ export default meta;
|
|
|
8
8
|
export declare const Default: {
|
|
9
9
|
render: (args: {
|
|
10
10
|
ariaLabel: string;
|
|
11
|
-
gap?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 |
|
|
11
|
+
gap?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 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,5 +1,5 @@
|
|
|
1
1
|
import { type MouseEvent, type ReactNode } from "react";
|
|
2
|
-
import type { SX } from "../../theme
|
|
2
|
+
import type { SX } from "../../theme";
|
|
3
3
|
import { type IconName } from "../Icon";
|
|
4
4
|
export interface BadgeProps {
|
|
5
5
|
title: ReactNode;
|
|
@@ -14,6 +14,6 @@ export interface BadgeProps {
|
|
|
14
14
|
onMouseEnter?: () => void;
|
|
15
15
|
onMouseLeave?: () => void;
|
|
16
16
|
/** Makes the badge content editable, fires onBlur when the value has changed */
|
|
17
|
-
onEdit?: (newTitle: string) => void
|
|
17
|
+
onEdit?: (newTitle: string) => void | Promise<void>;
|
|
18
18
|
}
|
|
19
19
|
export declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type AriaRole, type ClipboardEventHandler, type FocusEvent, type KeyboardEvent, type ReactNode } from "react";
|
|
2
|
-
import type { SX, ThemeKeys } from "../../theme
|
|
2
|
+
import type { SX, ThemeKeys } from "../../theme";
|
|
3
3
|
/**
|
|
4
4
|
* Flexible base Input, provided with no height or block padding.
|
|
5
5
|
*/
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type CSSProperties, type ReactNode } from "react";
|
|
2
|
-
import { type ThemeKeys } from "../../theme
|
|
2
|
+
import { type ThemeKeys } from "../../theme";
|
|
3
3
|
export type BoxProps = {
|
|
4
4
|
as?: "div" | "nav" | "ul" | "ol" | "article" | "header" | "form" | "span";
|
|
5
5
|
children?: ReactNode;
|
|
@@ -13,7 +13,7 @@ declare const meta: {
|
|
|
13
13
|
export default meta;
|
|
14
14
|
export declare const Default: {
|
|
15
15
|
render: (args: {
|
|
16
|
-
as?: "
|
|
16
|
+
as?: "article" | "div" | "form" | "header" | "nav" | "ol" | "span" | "ul" | undefined;
|
|
17
17
|
children?: import("react").ReactNode;
|
|
18
18
|
position?: "fixed" | "absolute" | "relative" | "sticky" | undefined;
|
|
19
19
|
top?: string | number | undefined;
|
|
@@ -38,13 +38,13 @@ export declare const Default: {
|
|
|
38
38
|
duration?: 0 | 100 | 75 | 150 | 200 | 250 | 300 | 400 | undefined;
|
|
39
39
|
delay?: string | undefined;
|
|
40
40
|
} | undefined;
|
|
41
|
-
padding?: (0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 |
|
|
42
|
-
block?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 |
|
|
43
|
-
inline?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 |
|
|
44
|
-
top?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 |
|
|
45
|
-
bottom?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 |
|
|
46
|
-
left?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 |
|
|
47
|
-
right?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 |
|
|
41
|
+
padding?: (0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | {
|
|
42
|
+
block?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
43
|
+
inline?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
44
|
+
top?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
45
|
+
bottom?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
46
|
+
left?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
47
|
+
right?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 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,24 +52,24 @@ export declare const Default: {
|
|
|
52
52
|
left?: boolean | undefined;
|
|
53
53
|
right?: boolean | undefined;
|
|
54
54
|
}) | undefined;
|
|
55
|
-
borderRadius?: (0 | 2 | 1 |
|
|
56
|
-
topLeft?: 0 | 2 | 1 |
|
|
57
|
-
topRight?: 0 | 2 | 1 |
|
|
58
|
-
bottomLeft?: 0 | 2 | 1 |
|
|
59
|
-
bottomRight?: 0 | 2 | 1 |
|
|
55
|
+
borderRadius?: (0 | 2 | 1 | "50%" | "100%" | "inherit" | 4 | 6 | 8 | 10 | 12 | {
|
|
56
|
+
topLeft?: 0 | 2 | 1 | "50%" | "100%" | "inherit" | 4 | 6 | 8 | 10 | 12 | undefined;
|
|
57
|
+
topRight?: 0 | 2 | 1 | "50%" | "100%" | "inherit" | 4 | 6 | 8 | 10 | 12 | undefined;
|
|
58
|
+
bottomLeft?: 0 | 2 | 1 | "50%" | "100%" | "inherit" | 4 | 6 | 8 | 10 | 12 | undefined;
|
|
59
|
+
bottomRight?: 0 | 2 | 1 | "50%" | "100%" | "inherit" | 4 | 6 | 8 | 10 | 12 | undefined;
|
|
60
60
|
}) | undefined;
|
|
61
61
|
borderStyle?: "none" | "dashed" | "solid" | undefined;
|
|
62
62
|
borderColor?: "inherit" | "currentColor" | "transparent" | "white" | "black" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark12" | "indigo2" | "indigo4" | "indigo7" | "indigo10" | "indigo11" | "indigo12" | "green3" | "green4" | "green9" | "green10" | "green11" | "green12" | "amber3" | "amber4" | "amber9" | "amber10" | "amber11" | "amber12" | "tomato1" | "tomato2" | "tomato3" | "tomato4" | "tomato6" | "tomato7" | "tomato9" | "tomato10" | "tomato11" | "tomato12" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "greyAlpha1" | undefined;
|
|
63
|
-
boxShadow?: "
|
|
63
|
+
boxShadow?: "1" | "2" | "4" | "none" | "3" | "-1" | "purpleFocus" | "ghostFocus" | "greenFocus" | "amberFocus" | "tomatoFocus" | "gradient" | "greyFocus" | "cropper" | undefined;
|
|
64
64
|
backgroundColor?: "inherit" | "currentColor" | "transparent" | "white" | "black" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark12" | "indigo2" | "indigo4" | "indigo7" | "indigo10" | "indigo11" | "indigo12" | "green3" | "green4" | "green9" | "green10" | "green11" | "green12" | "amber3" | "amber4" | "amber9" | "amber10" | "amber11" | "amber12" | "tomato1" | "tomato2" | "tomato3" | "tomato4" | "tomato6" | "tomato7" | "tomato9" | "tomato10" | "tomato11" | "tomato12" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "greyAlpha1" | undefined;
|
|
65
65
|
opacity?: 0 | 1 | 0.1 | 0.3 | 0.4 | 0.5 | 0.6 | 0.8 | 0.9 | undefined;
|
|
66
66
|
visibility?: "hidden" | "visible" | undefined;
|
|
67
|
-
overflowY?: "
|
|
67
|
+
overflowY?: "auto" | "hidden" | undefined;
|
|
68
68
|
overflow?: "hidden" | undefined;
|
|
69
69
|
gridColumn?: string | undefined;
|
|
70
70
|
gridRow?: string | undefined;
|
|
71
71
|
transform?: import("csstype").Property.Transform | undefined;
|
|
72
|
-
gap?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 |
|
|
72
|
+
gap?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
73
73
|
alignItems?: "center" | "flex-start" | undefined;
|
|
74
74
|
justifyContent?: "center" | "end" | "space-between" | undefined;
|
|
75
75
|
display: "grid";
|
|
@@ -79,7 +79,7 @@ export declare const Default: {
|
|
|
79
79
|
ref?: import("react").Ref<HTMLElement> | undefined;
|
|
80
80
|
key?: import("react").Key | null | undefined;
|
|
81
81
|
} | {
|
|
82
|
-
as?: "
|
|
82
|
+
as?: "article" | "div" | "form" | "header" | "nav" | "ol" | "span" | "ul" | undefined;
|
|
83
83
|
children?: import("react").ReactNode;
|
|
84
84
|
position?: "fixed" | "absolute" | "relative" | "sticky" | undefined;
|
|
85
85
|
top?: string | number | undefined;
|
|
@@ -104,13 +104,13 @@ export declare const Default: {
|
|
|
104
104
|
duration?: 0 | 100 | 75 | 150 | 200 | 250 | 300 | 400 | undefined;
|
|
105
105
|
delay?: string | undefined;
|
|
106
106
|
} | undefined;
|
|
107
|
-
padding?: (0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 |
|
|
108
|
-
block?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 |
|
|
109
|
-
inline?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 |
|
|
110
|
-
top?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 |
|
|
111
|
-
bottom?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 |
|
|
112
|
-
left?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 |
|
|
113
|
-
right?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 |
|
|
107
|
+
padding?: (0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | {
|
|
108
|
+
block?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
109
|
+
inline?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
110
|
+
top?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
111
|
+
bottom?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
112
|
+
left?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
113
|
+
right?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
114
114
|
}) | undefined;
|
|
115
115
|
border?: (boolean | {
|
|
116
116
|
top?: boolean | undefined;
|
|
@@ -118,28 +118,28 @@ export declare const Default: {
|
|
|
118
118
|
left?: boolean | undefined;
|
|
119
119
|
right?: boolean | undefined;
|
|
120
120
|
}) | undefined;
|
|
121
|
-
borderRadius?: (0 | 2 | 1 |
|
|
122
|
-
topLeft?: 0 | 2 | 1 |
|
|
123
|
-
topRight?: 0 | 2 | 1 |
|
|
124
|
-
bottomLeft?: 0 | 2 | 1 |
|
|
125
|
-
bottomRight?: 0 | 2 | 1 |
|
|
121
|
+
borderRadius?: (0 | 2 | 1 | "50%" | "100%" | "inherit" | 4 | 6 | 8 | 10 | 12 | {
|
|
122
|
+
topLeft?: 0 | 2 | 1 | "50%" | "100%" | "inherit" | 4 | 6 | 8 | 10 | 12 | undefined;
|
|
123
|
+
topRight?: 0 | 2 | 1 | "50%" | "100%" | "inherit" | 4 | 6 | 8 | 10 | 12 | undefined;
|
|
124
|
+
bottomLeft?: 0 | 2 | 1 | "50%" | "100%" | "inherit" | 4 | 6 | 8 | 10 | 12 | undefined;
|
|
125
|
+
bottomRight?: 0 | 2 | 1 | "50%" | "100%" | "inherit" | 4 | 6 | 8 | 10 | 12 | undefined;
|
|
126
126
|
}) | undefined;
|
|
127
127
|
borderStyle?: "none" | "dashed" | "solid" | undefined;
|
|
128
128
|
borderColor?: "inherit" | "currentColor" | "transparent" | "white" | "black" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark12" | "indigo2" | "indigo4" | "indigo7" | "indigo10" | "indigo11" | "indigo12" | "green3" | "green4" | "green9" | "green10" | "green11" | "green12" | "amber3" | "amber4" | "amber9" | "amber10" | "amber11" | "amber12" | "tomato1" | "tomato2" | "tomato3" | "tomato4" | "tomato6" | "tomato7" | "tomato9" | "tomato10" | "tomato11" | "tomato12" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "greyAlpha1" | undefined;
|
|
129
|
-
boxShadow?: "
|
|
129
|
+
boxShadow?: "1" | "2" | "4" | "none" | "3" | "-1" | "purpleFocus" | "ghostFocus" | "greenFocus" | "amberFocus" | "tomatoFocus" | "gradient" | "greyFocus" | "cropper" | undefined;
|
|
130
130
|
backgroundColor?: "inherit" | "currentColor" | "transparent" | "white" | "black" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark12" | "indigo2" | "indigo4" | "indigo7" | "indigo10" | "indigo11" | "indigo12" | "green3" | "green4" | "green9" | "green10" | "green11" | "green12" | "amber3" | "amber4" | "amber9" | "amber10" | "amber11" | "amber12" | "tomato1" | "tomato2" | "tomato3" | "tomato4" | "tomato6" | "tomato7" | "tomato9" | "tomato10" | "tomato11" | "tomato12" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "greyAlpha1" | undefined;
|
|
131
131
|
opacity?: 0 | 1 | 0.1 | 0.3 | 0.4 | 0.5 | 0.6 | 0.8 | 0.9 | undefined;
|
|
132
132
|
visibility?: "hidden" | "visible" | undefined;
|
|
133
|
-
overflowY?: "
|
|
133
|
+
overflowY?: "auto" | "hidden" | undefined;
|
|
134
134
|
overflow?: "hidden" | undefined;
|
|
135
135
|
gridColumn?: string | undefined;
|
|
136
136
|
gridRow?: string | undefined;
|
|
137
137
|
transform?: import("csstype").Property.Transform | undefined;
|
|
138
|
-
gap?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 |
|
|
138
|
+
gap?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
139
139
|
alignItems?: "center" | "flex-start" | undefined;
|
|
140
140
|
justifyContent?: "center" | "end" | "space-between" | undefined;
|
|
141
141
|
display?: "flex" | "inline-flex" | undefined;
|
|
142
|
-
flexDirection?: "
|
|
142
|
+
flexDirection?: "column" | "row" | undefined;
|
|
143
143
|
gridTemplateColumns?: undefined;
|
|
144
144
|
gridTemplateRows?: undefined;
|
|
145
145
|
ref?: import("react").Ref<HTMLElement> | undefined;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { type MouseEvent, type ReactNode } from "react";
|
|
2
|
-
import type
|
|
2
|
+
import { type Keys } from "react-hotkeys-hook";
|
|
3
|
+
import type { SX } from "../../theme";
|
|
3
4
|
import { type IconName } from "../Icon";
|
|
4
5
|
export interface ButtonProps {
|
|
5
6
|
children?: ReactNode;
|
|
@@ -26,7 +27,8 @@ export interface ButtonProps {
|
|
|
26
27
|
endIcon?: IconName;
|
|
27
28
|
renderStartIcon?: (icon: ReactNode) => ReactNode;
|
|
28
29
|
renderEndIcon?: (icon: ReactNode) => ReactNode;
|
|
29
|
-
|
|
30
|
+
hotkeys?: Keys;
|
|
31
|
+
onClick?: (event: MouseEvent | KeyboardEvent) => void;
|
|
30
32
|
onMouseEnter?: (event: MouseEvent) => void;
|
|
31
33
|
onMouseLeave?: (event: MouseEvent) => void;
|
|
32
34
|
onMouseDown?: (event: MouseEvent) => void;
|
|
@@ -8,7 +8,7 @@ declare const meta: {
|
|
|
8
8
|
control: {
|
|
9
9
|
type: string;
|
|
10
10
|
};
|
|
11
|
-
options: readonly ["add", "alert", "arrowBack", "arrowDownward", "arrowDropDown", "arrowDropDownCircle", "arrowForward", "arrowUpward", "autoFixHigh", "biToggle", "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", "migrationRelease", "moreVert", "multipleStop", "musicNote", "notes", "openInFull", "openInNew", "phoneIphone", "photo", "pin", "place", "playCircle", "preview", "prismic", "public", "refresh", "save", "schedule", "search", "smartDisplay", "tabletMac", "tag", "textFields", "toggleOff", "unfoldMore", "unsplash", "upload", "viewDay", "visibility", "zoomOutMap"];
|
|
11
|
+
options: readonly ["add", "alert", "arrowBack", "arrowDownward", "arrowDropDown", "arrowDropDownCircle", "arrowForward", "arrowUpward", "autoFixHigh", "biToggle", "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", "language", "link", "linkOff", "lock", "looks1", "looks2", "looks3", "looks4", "looks5", "looks6", "migrationRelease", "moreVert", "multipleStop", "musicNote", "notes", "openInFull", "openInNew", "phoneIphone", "photo", "pin", "place", "playCircle", "preview", "prismic", "public", "refresh", "save", "schedule", "search", "smartDisplay", "tabletMac", "tag", "textFields", "toggleOff", "translate", "unfoldMore", "unsplash", "upload", "viewDay", "visibility", "zoomOutMap"];
|
|
12
12
|
};
|
|
13
13
|
};
|
|
14
14
|
};
|
|
@@ -23,12 +23,13 @@ export declare const Default: {
|
|
|
23
23
|
textColor?: "placeholder" | undefined;
|
|
24
24
|
flexContent?: boolean | undefined;
|
|
25
25
|
textWeight?: "bold" | "normal" | undefined;
|
|
26
|
-
sx?: import("../../theme
|
|
27
|
-
startIcon?: "
|
|
28
|
-
endIcon?: "
|
|
26
|
+
sx?: import("../../theme").SX | undefined;
|
|
27
|
+
startIcon?: "translate" | "visibility" | "search" | "link" | "description" | "code" | "add" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "autoFixHigh" | "biToggle" | "block" | "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" | "language" | "linkOff" | "lock" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "migrationRelease" | "moreVert" | "multipleStop" | "musicNote" | "notes" | "openInFull" | "openInNew" | "phoneIphone" | "photo" | "pin" | "place" | "playCircle" | "preview" | "prismic" | "public" | "refresh" | "save" | "schedule" | "smartDisplay" | "tabletMac" | "tag" | "textFields" | "toggleOff" | "unfoldMore" | "unsplash" | "upload" | "viewDay" | "zoomOutMap" | undefined;
|
|
28
|
+
endIcon?: "translate" | "visibility" | "search" | "link" | "description" | "code" | "add" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "autoFixHigh" | "biToggle" | "block" | "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" | "language" | "linkOff" | "lock" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "migrationRelease" | "moreVert" | "multipleStop" | "musicNote" | "notes" | "openInFull" | "openInNew" | "phoneIphone" | "photo" | "pin" | "place" | "playCircle" | "preview" | "prismic" | "public" | "refresh" | "save" | "schedule" | "smartDisplay" | "tabletMac" | "tag" | "textFields" | "toggleOff" | "unfoldMore" | "unsplash" | "upload" | "viewDay" | "zoomOutMap" | undefined;
|
|
29
29
|
renderStartIcon?: ((icon: import("react").ReactNode) => import("react").ReactNode) | undefined;
|
|
30
30
|
renderEndIcon?: ((icon: import("react").ReactNode) => import("react").ReactNode) | undefined;
|
|
31
|
-
|
|
31
|
+
hotkeys?: import("react-hotkeys-hook").Keys | undefined;
|
|
32
|
+
onClick?: ((event: import("react").MouseEvent<Element, MouseEvent> | KeyboardEvent) => void) | undefined;
|
|
32
33
|
onMouseEnter?: ((event: import("react").MouseEvent<Element, MouseEvent>) => void) | undefined;
|
|
33
34
|
onMouseLeave?: ((event: import("react").MouseEvent<Element, MouseEvent>) => void) | undefined;
|
|
34
35
|
onMouseDown?: ((event: import("react").MouseEvent<Element, MouseEvent>) => void) | undefined;
|
|
@@ -36,7 +36,7 @@ export declare const Default: {
|
|
|
36
36
|
size?: "small" | "medium" | "large" | undefined;
|
|
37
37
|
color?: "dark" | "grey" | "purple" | undefined;
|
|
38
38
|
density?: "regular" | "compact" | undefined;
|
|
39
|
-
sx?: import("../../theme
|
|
39
|
+
sx?: import("../../theme").SX | undefined;
|
|
40
40
|
ref?: import("react").Ref<HTMLDivElement> | undefined;
|
|
41
41
|
key?: import("react").Key | null | undefined;
|
|
42
42
|
}) => JSX.Element;
|
|
@@ -39,7 +39,7 @@ export declare const Default: {
|
|
|
39
39
|
paddingBlock?: 0 | 8 | 16 | 28 | undefined;
|
|
40
40
|
paddingInline?: 16 | 24 | undefined;
|
|
41
41
|
onSelect?: ((event: import("react").MouseEvent<Element, MouseEvent> | import("react").KeyboardEvent<Element>) => void) | undefined;
|
|
42
|
-
sx?: import("../../theme
|
|
42
|
+
sx?: import("../../theme").SX | undefined;
|
|
43
43
|
}) => JSX.Element;
|
|
44
44
|
args: {
|
|
45
45
|
color: "grey1";
|
|
@@ -8,9 +8,9 @@ export declare const Default: import("@storybook/types").StoryAnnotations<import
|
|
|
8
8
|
onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
|
|
9
9
|
tabIndex?: number | undefined;
|
|
10
10
|
}, {
|
|
11
|
-
tabIndex?: number | undefined;
|
|
12
|
-
onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
|
|
13
11
|
disabled?: boolean | undefined;
|
|
12
|
+
onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
|
|
13
|
+
tabIndex?: number | undefined;
|
|
14
14
|
checked?: boolean | undefined;
|
|
15
15
|
onCheckedChange?: ((checked: boolean) => void) | undefined;
|
|
16
16
|
}>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type ReactNode } from "react";
|
|
2
|
-
import type { SX } from "../../theme
|
|
2
|
+
import type { SX } from "../../theme";
|
|
3
3
|
type Variant = "attached" | "detached";
|
|
4
4
|
export interface ComboBoxProps {
|
|
5
5
|
children: ReactNode;
|
|
@@ -17,9 +17,10 @@ interface ComboBoxContentProps {
|
|
|
17
17
|
}
|
|
18
18
|
export declare const ComboBoxContent: import("react").ForwardRefExoticComponent<ComboBoxContentProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
19
19
|
type ComboBoxItemProps = {
|
|
20
|
-
|
|
20
|
+
value: string;
|
|
21
|
+
checked?: boolean;
|
|
22
|
+
onCheckedChange?: (checked: boolean) => void;
|
|
21
23
|
disabled?: boolean;
|
|
22
|
-
selected?: boolean;
|
|
23
24
|
children: ReactNode;
|
|
24
25
|
};
|
|
25
26
|
export declare const ComboBoxItem: import("react").ForwardRefExoticComponent<ComboBoxItemProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -17,5 +17,16 @@ export declare function useInternalSelection(props: UseInternalSelectionProps):
|
|
|
17
17
|
onItemPicked: () => void;
|
|
18
18
|
cleanupInternalState: () => void;
|
|
19
19
|
};
|
|
20
|
+
export declare function getValidItems(contentInnerRef: RefObject<HTMLDivElement>): Element[];
|
|
20
21
|
export declare function getSelectedItem(contentInnerRef: RefObject<HTMLDivElement>): Element | null | undefined;
|
|
22
|
+
interface UseSelectFirstArgs {
|
|
23
|
+
listIsOpen: boolean;
|
|
24
|
+
contentInnerRef: RefObject<HTMLDivElement>;
|
|
25
|
+
onChangeInternalSelection: (value: string | undefined) => void;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* Selects first option if there is no selected option or the selected option is not available anymore
|
|
29
|
+
* @private
|
|
30
|
+
*/
|
|
31
|
+
export declare function useSelectFirst(args: UseSelectFirstArgs): void;
|
|
21
32
|
export {};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, {
|
|
2
|
-
image?: string | undefined;
|
|
3
2
|
zoom: number;
|
|
4
3
|
crop: import("react-easy-crop").Point;
|
|
4
|
+
image?: string | undefined;
|
|
5
5
|
aspect: number;
|
|
6
6
|
onZoomChange?: ((zoom: number) => void) | undefined;
|
|
7
7
|
onCropChange: (location: import("react-easy-crop").Point) => void;
|
|
@@ -11,9 +11,9 @@ declare const _default: import("@storybook/types").ComponentAnnotations<import("
|
|
|
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
|
-
image?: string | undefined;
|
|
15
14
|
zoom: number;
|
|
16
15
|
crop: import("react-easy-crop").Point;
|
|
16
|
+
image?: string | undefined;
|
|
17
17
|
aspect: number;
|
|
18
18
|
onZoomChange?: ((zoom: number) => void) | undefined;
|
|
19
19
|
onCropChange: (location: import("react-easy-crop").Point) => void;
|
|
@@ -24,7 +24,7 @@ export declare const Default: {
|
|
|
24
24
|
disabled?: boolean | undefined;
|
|
25
25
|
minValue?: "today" | undefined;
|
|
26
26
|
"aria-labelledby": string;
|
|
27
|
-
sx?: import("../../theme
|
|
27
|
+
sx?: import("../../theme").SX | undefined;
|
|
28
28
|
onValueChange: (value?: Date | undefined) => void;
|
|
29
29
|
}) => JSX.Element;
|
|
30
30
|
args: {
|
|
@@ -15,7 +15,7 @@ export default meta;
|
|
|
15
15
|
export declare const Default: {
|
|
16
16
|
render: (args: {
|
|
17
17
|
children?: import("react").ReactNode;
|
|
18
|
-
sx?: import("../../theme
|
|
18
|
+
sx?: import("../../theme").SX | undefined;
|
|
19
19
|
onSubmit: () => void;
|
|
20
20
|
}) => JSX.Element;
|
|
21
21
|
args: {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type ClipboardEventHandler, type KeyboardEvent, type ReactNode } from "react";
|
|
2
|
-
import type { SX } from "../../theme
|
|
2
|
+
import type { SX } from "../../theme";
|
|
3
3
|
import { type IconName } from "../Icon";
|
|
4
4
|
export interface FormInputProps {
|
|
5
5
|
type?: "text" | "email" | "password" | "number";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type AriaRole, type FocusEvent } from "react";
|
|
2
|
-
import type { SX } from "../../theme
|
|
2
|
+
import type { SX } from "../../theme";
|
|
3
3
|
export interface FormSearchInputProps {
|
|
4
4
|
label?: string;
|
|
5
5
|
placeholder?: string;
|
|
@@ -13,5 +13,6 @@ export interface FormSearchInputProps {
|
|
|
13
13
|
onFocus?: (event: FocusEvent<HTMLInputElement, Element>) => void;
|
|
14
14
|
onBlur?: (event: FocusEvent<HTMLInputElement, Element>) => void;
|
|
15
15
|
endAdornment?: boolean;
|
|
16
|
+
autoFocus?: boolean;
|
|
16
17
|
}
|
|
17
18
|
export declare const FormSearchInput: import("react").ForwardRefExoticComponent<FormSearchInputProps & import("react").RefAttributes<HTMLInputElement>>;
|
|
@@ -1,13 +1,11 @@
|
|
|
1
1
|
import type { ReactNode } from "react";
|
|
2
|
-
|
|
3
|
-
export type GroupProps<ITEM> = {
|
|
2
|
+
export interface GroupProps<ITEM> {
|
|
4
3
|
items: ITEM[];
|
|
5
4
|
title?: string;
|
|
6
5
|
addItemButtonTitle?: string;
|
|
7
6
|
maxItems?: number;
|
|
8
|
-
accordionType: AccordionProps["type"];
|
|
9
7
|
getItemKey: (item: ITEM) => string;
|
|
10
8
|
children: (item: ITEM, index: number) => ReactNode;
|
|
11
9
|
onAddItem?: () => void;
|
|
12
|
-
}
|
|
10
|
+
}
|
|
13
11
|
export declare function Group<ITEM>(props: GroupProps<ITEM>): JSX.Element;
|
|
@@ -1,34 +1,6 @@
|
|
|
1
|
-
import type { StoryObj } from "@storybook/react";
|
|
1
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
2
|
import { Group } from "./Group";
|
|
3
3
|
type Story = StoryObj<typeof meta>;
|
|
4
|
-
declare const meta:
|
|
5
|
-
title: string;
|
|
6
|
-
component: typeof Group;
|
|
7
|
-
argTypes: {
|
|
8
|
-
children: {};
|
|
9
|
-
items: {
|
|
10
|
-
control: {
|
|
11
|
-
disable: boolean;
|
|
12
|
-
};
|
|
13
|
-
};
|
|
14
|
-
expanded: {
|
|
15
|
-
control: {
|
|
16
|
-
disable: boolean;
|
|
17
|
-
};
|
|
18
|
-
};
|
|
19
|
-
accordionType: {
|
|
20
|
-
control: {
|
|
21
|
-
type: string;
|
|
22
|
-
};
|
|
23
|
-
options: string[];
|
|
24
|
-
};
|
|
25
|
-
addItemButtonTitle: {
|
|
26
|
-
control: {
|
|
27
|
-
type: string;
|
|
28
|
-
};
|
|
29
|
-
};
|
|
30
|
-
onAddItem: {};
|
|
31
|
-
};
|
|
32
|
-
};
|
|
4
|
+
declare const meta: Meta<typeof Group>;
|
|
33
5
|
export default meta;
|
|
34
6
|
export declare const Default: Story;
|