@webiny/ui 5.33.2-beta.2 → 5.33.3-beta.0
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/Accordion/Accordion.d.ts +1 -1
- package/Accordion/Accordion.js.map +1 -1
- package/Accordion/AccordionItem.js +5 -4
- package/Accordion/AccordionItem.js.map +1 -1
- package/Button/Button.js +4 -8
- package/Button/Button.js.map +1 -1
- package/Button/IconButton/IconButton.js +1 -2
- package/Button/IconButton/IconButton.js.map +1 -1
- package/Input/Input.d.ts +1 -11
- package/Input/Input.js +90 -127
- package/Input/Input.js.map +1 -1
- package/package.json +7 -7
package/Accordion/Accordion.d.ts
CHANGED
|
@@ -5,7 +5,7 @@ export interface AccordionProps {
|
|
|
5
5
|
/**
|
|
6
6
|
* Element displayed when accordion is expanded.
|
|
7
7
|
*/
|
|
8
|
-
children: React.ReactElement<typeof ListItem>[] | React.ReactElement<typeof AccordionItem>[];
|
|
8
|
+
children: React.ReactElement<typeof ListItem>[] | React.ReactElement<typeof AccordionItem> | React.ReactElement<typeof AccordionItem>[];
|
|
9
9
|
/**
|
|
10
10
|
* Elevation number, default set to 2
|
|
11
11
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["listStyle","css","padding","Accordion","props","children","elevation","className","other","classNames"],"sources":["Accordion.tsx"],"sourcesContent":["import React from \"react\";\nimport { List, ListItem } from \"../List\";\nimport { AccordionItem } from \"./AccordionItem\";\nimport { Elevation } from \"../Elevation\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\n\nexport interface AccordionProps {\n /**\n * Element displayed when accordion is expanded.\n */\n children
|
|
1
|
+
{"version":3,"names":["listStyle","css","padding","Accordion","props","children","elevation","className","other","classNames"],"sources":["Accordion.tsx"],"sourcesContent":["import React from \"react\";\nimport { List, ListItem } from \"../List\";\nimport { AccordionItem } from \"./AccordionItem\";\nimport { Elevation } from \"../Elevation\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\n\nexport interface AccordionProps {\n /**\n * Element displayed when accordion is expanded.\n */\n children:\n | React.ReactElement<typeof ListItem>[]\n | React.ReactElement<typeof AccordionItem>\n | React.ReactElement<typeof AccordionItem>[];\n\n /**\n * Elevation number, default set to 2\n */\n elevation?: number;\n\n /**\n * Append a class name\n */\n className?: string;\n}\n\nconst listStyle = css({\n \"&.mdc-list\": {\n padding: 0\n }\n});\n\nconst Accordion: React.FC<AccordionProps> = props => {\n const { children, elevation = 2, className, ...other } = props;\n return (\n <Elevation z={elevation} className={classNames(\"webiny-ui-accordion\", className)}>\n <List twoLine className={listStyle} {...other}>\n {children}\n </List>\n </Elevation>\n );\n};\n\nexport { Accordion };\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;AAsBA,IAAMA,SAAS,gBAAG,IAAAC,YAAA,EAAI;EAClB,cAAc;IACVC,OAAO,EAAE;EADC;AADI,CAAJ,qBAAlB;;AAMA,IAAMC,SAAmC,GAAG,SAAtCA,SAAsC,CAAAC,KAAK,EAAI;EACjD,IAAQC,QAAR,GAAyDD,KAAzD,CAAQC,QAAR;EAAA,uBAAyDD,KAAzD,CAAkBE,SAAlB;EAAA,IAAkBA,SAAlB,iCAA8B,CAA9B;EAAA,IAAiCC,SAAjC,GAAyDH,KAAzD,CAAiCG,SAAjC;EAAA,IAA+CC,KAA/C,0CAAyDJ,KAAzD;EACA,oBACI,6BAAC,oBAAD;IAAW,CAAC,EAAEE,SAAd;IAAyB,SAAS,EAAE,IAAAG,mBAAA,EAAW,qBAAX,EAAkCF,SAAlC;EAApC,gBACI,6BAAC,UAAD;IAAM,OAAO,MAAb;IAAc,SAAS,EAAEP;EAAzB,GAAwCQ,KAAxC,GACKH,QADL,CADJ,CADJ;AAOH,CATD"}
|
|
@@ -46,9 +46,10 @@ var Content = /*#__PURE__*/(0, _styled.default)("div", {
|
|
|
46
46
|
boxSizing: "border-box"
|
|
47
47
|
});
|
|
48
48
|
var listItem = /*#__PURE__*/(0, _emotion.css)({
|
|
49
|
-
padding: "
|
|
49
|
+
padding: "0 16px",
|
|
50
50
|
cursor: "pointer",
|
|
51
51
|
borderBottom: "1px solid var(--mdc-theme-background)",
|
|
52
|
+
height: 48,
|
|
52
53
|
"&:last-child": {
|
|
53
54
|
borderBottom: "none"
|
|
54
55
|
},
|
|
@@ -93,20 +94,20 @@ var transitionStyles = {
|
|
|
93
94
|
entering: {
|
|
94
95
|
opacity: 0,
|
|
95
96
|
height: 0,
|
|
96
|
-
padding: "20px
|
|
97
|
+
padding: "20px",
|
|
97
98
|
pointerEvents: "auto",
|
|
98
99
|
overflow: "initial"
|
|
99
100
|
},
|
|
100
101
|
entered: {
|
|
101
102
|
opacity: 1,
|
|
102
103
|
height: "auto",
|
|
103
|
-
padding: "20px
|
|
104
|
+
padding: "20px",
|
|
104
105
|
pointerEvents: "auto",
|
|
105
106
|
overflow: "initial"
|
|
106
107
|
},
|
|
107
108
|
exiting: {
|
|
108
109
|
height: "auto",
|
|
109
|
-
padding: "20px
|
|
110
|
+
padding: "20px",
|
|
110
111
|
pointerEvents: "auto",
|
|
111
112
|
overflow: "initial"
|
|
112
113
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Content","styled","width","borderRight","borderBottom","borderLeft","boxSizing","listItem","css","padding","cursor","marginRight","ListItemTitle","fontWeight","marginBottom","ListItemDescription","TitleContent","display","flexDirection","openedState","backgroundColor","duration","defaultStyle","transition","opacity","
|
|
1
|
+
{"version":3,"names":["Content","styled","width","borderRight","borderBottom","borderLeft","boxSizing","listItem","css","padding","cursor","height","marginRight","ListItemTitle","fontWeight","marginBottom","ListItemDescription","TitleContent","display","flexDirection","openedState","backgroundColor","duration","defaultStyle","transition","opacity","pointerEvents","overflow","transitionStyles","entering","entered","exiting","AccordionItem","props","useState","open","setState","toggleState","useCallback","useEffect","classNames","className","icon","iconClassName","title","description","state","children"],"sources":["AccordionItem.tsx"],"sourcesContent":["import React, { useState, useCallback, useEffect } from \"react\";\nimport { ListItem, ListItemGraphic, ListItemMeta } from \"../List\";\nimport Transition from \"react-transition-group/Transition\";\nimport { Icon } from \"~/Icon\";\nimport styled from \"@emotion/styled\";\nimport { css } from \"emotion\";\nimport { Typography } from \"~/Typography\";\n\nimport { ReactComponent as UpArrow } from \"./icons/round-keyboard_arrow_up-24px.svg\";\nimport { ReactComponent as DownArrow } from \"./icons/round-keyboard_arrow_down-24px.svg\";\nimport classNames from \"classnames\";\n\nconst Content = styled(\"div\")({\n width: \"100%\",\n borderRight: \"1px solid var(--mdc-theme-background)\",\n borderBottom: \"1px solid var(--mdc-theme-background)\",\n borderLeft: \"1px solid var(--mdc-theme-background)\",\n boxSizing: \"border-box\"\n});\n\nconst listItem = css({\n padding: \"0 16px\",\n cursor: \"pointer\",\n borderBottom: \"1px solid var(--mdc-theme-background)\",\n height: 48,\n \"&:last-child\": {\n borderBottom: \"none\"\n },\n \".mdc-list-item__graphic\": {\n marginRight: 20\n }\n});\n\nconst ListItemTitle = styled(\"div\")({\n fontWeight: 600,\n marginBottom: 5\n});\n\nconst ListItemDescription = styled(\"div\")({});\n\nconst TitleContent = styled(\"div\")({\n display: \"flex\",\n flexDirection: \"column\"\n});\n\nconst openedState = css({\n backgroundColor: \"var(--mdc-theme-on-background)\"\n});\n\nconst duration = 150;\nconst defaultStyle = {\n transition: `all ${duration}ms ease-in-out`,\n opacity: 0,\n height: 0,\n pointerEvents: \"none\",\n overflow: \"hidden\"\n};\n\ntype TransitionStylesState = \"entering\" | \"entered\" | \"exiting\";\n\n/**\n * We are casting pointerEvents as any because csstype does not have PointerEvents exported. Or at least, that is the error.\n */\nconst transitionStyles = {\n entering: {\n opacity: 0,\n height: 0,\n padding: \"20px\",\n pointerEvents: \"auto\" as any,\n overflow: \"initial\"\n },\n entered: {\n opacity: 1,\n height: \"auto\",\n padding: \"20px\",\n pointerEvents: \"auto\" as any,\n overflow: \"initial\"\n },\n exiting: {\n height: \"auto\",\n padding: \"20px\",\n pointerEvents: \"auto\" as any,\n overflow: \"initial\"\n }\n};\n\nexport interface AccordionItemProps {\n /**\n * Left side icon\n */\n icon?: React.ReactElement | null;\n\n /**\n * Accordion title\n */\n title?: React.ReactNode;\n\n /**\n * Optional description\n */\n description?: string;\n\n /**\n * Append a class name\n */\n className?: string;\n\n /**\n * Render item opened by default\n */\n open?: boolean;\n /**\n * For testing purpose\n */\n \"data-testid\"?: string;\n /**\n * Append a class name to Icon\n */\n iconClassName?: string;\n}\n\nconst AccordionItem: React.FC<AccordionItemProps> = props => {\n const [open, setState] = useState<boolean>(props.open ? props.open : false);\n\n const toggleState = useCallback(() => {\n setState(!open);\n }, [open]);\n\n useEffect(() => {\n setState(props.open ? true : false);\n }, [props.open]);\n\n return (\n <div className={classNames(\"webiny-ui-accordion-item\", props.className)}>\n <ListItem\n className={classNames(\n listItem,\n { [openedState]: open },\n \"webiny-ui-accordion-item__list-item\"\n )}\n onClick={toggleState}\n data-testid={props[\"data-testid\"]}\n >\n {props.icon && (\n <ListItemGraphic>\n <Icon icon={props.icon} className={props.iconClassName} />\n </ListItemGraphic>\n )}\n\n <TitleContent className=\"webiny-ui-accordion-item__title\">\n <ListItemTitle>{props.title}</ListItemTitle>\n {props.description && (\n <ListItemDescription>\n <Typography use={\"subtitle2\"}>{props.description}</Typography>\n </ListItemDescription>\n )}\n </TitleContent>\n <ListItemMeta>\n <Icon icon={!open ? <DownArrow /> : <UpArrow />} />\n </ListItemMeta>\n </ListItem>\n <Transition in={open} timeout={duration}>\n {(state: TransitionStylesState) => (\n <Content\n style={{ ...defaultStyle, ...transitionStyles[state] }}\n className=\"webiny-ui-accordion-item__content\"\n >\n {props.children}\n </Content>\n )}\n </Transition>\n </div>\n );\n};\n\nexport { AccordionItem };\n"],"mappings":"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"}
|
package/Button/Button.js
CHANGED
|
@@ -33,8 +33,7 @@ var ButtonDefault = function ButtonDefault(props) {
|
|
|
33
33
|
onClick = props.onClick,
|
|
34
34
|
children = props.children,
|
|
35
35
|
small = props.small,
|
|
36
|
-
|
|
37
|
-
ripple = _props$ripple === void 0 ? true : _props$ripple,
|
|
36
|
+
ripple = props.ripple,
|
|
38
37
|
_props$className = props.className,
|
|
39
38
|
className = _props$className === void 0 ? "" : _props$className,
|
|
40
39
|
style = props.style;
|
|
@@ -63,8 +62,7 @@ var ButtonPrimary = function ButtonPrimary(props) {
|
|
|
63
62
|
small = _props$small === void 0 ? false : _props$small,
|
|
64
63
|
_props$flat = props.flat,
|
|
65
64
|
flat = _props$flat === void 0 ? false : _props$flat,
|
|
66
|
-
|
|
67
|
-
ripple = _props$ripple2 === void 0 ? true : _props$ripple2,
|
|
65
|
+
ripple = props.ripple,
|
|
68
66
|
_props$style = props.style,
|
|
69
67
|
style = _props$style === void 0 ? {} : _props$style,
|
|
70
68
|
_props$className2 = props.className,
|
|
@@ -94,8 +92,7 @@ var ButtonSecondary = function ButtonSecondary(props) {
|
|
|
94
92
|
children = props.children,
|
|
95
93
|
_props$small2 = props.small,
|
|
96
94
|
small = _props$small2 === void 0 ? false : _props$small2,
|
|
97
|
-
|
|
98
|
-
ripple = _props$ripple3 === void 0 ? true : _props$ripple3,
|
|
95
|
+
ripple = props.ripple,
|
|
99
96
|
_props$className3 = props.className,
|
|
100
97
|
className = _props$className3 === void 0 ? null : _props$className3,
|
|
101
98
|
_props$style2 = props.style,
|
|
@@ -125,8 +122,7 @@ var ButtonFloating = function ButtonFloating(props) {
|
|
|
125
122
|
small = _props$small3 === void 0 ? false : _props$small3,
|
|
126
123
|
_props$label = props.label,
|
|
127
124
|
label = _props$label === void 0 ? null : _props$label,
|
|
128
|
-
|
|
129
|
-
ripple = _props$ripple4 === void 0 ? true : _props$ripple4,
|
|
125
|
+
ripple = props.ripple,
|
|
130
126
|
_props$className4 = props.className,
|
|
131
127
|
className = _props$className4 === void 0 ? null : _props$className4,
|
|
132
128
|
rest = (0, _objectWithoutProperties2.default)(props, _excluded);
|
package/Button/Button.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["ButtonDefault","props","disabled","onClick","children","small","ripple","className","style","classNames","ButtonPrimary","flat","ButtonSecondary","webinyButtonStyles","ButtonFloating","icon","label","rest","ButtonIcon"],"sources":["Button.tsx"],"sourcesContent":["import React from \"react\";\nimport * as RmwcButton from \"@rmwc/button\";\nimport { Fab, FabProps } from \"@rmwc/fab\";\nimport { Icon, IconProps } from \"../Icon/Icon\";\nimport classNames from \"classnames\";\nimport { SyntheticEvent } from \"react\";\nimport { webinyButtonStyles } from \"./Button.styles\";\nexport interface ButtonProps {\n // Make button flat (only applicable to Primary button).\n flat?: boolean;\n\n // Make button smaller.\n small?: boolean;\n\n // onClick handler.\n onClick?: (event: React.MouseEvent<any, MouseEvent>) => void | null;\n\n // Label and optionally an icon (using Button.Icon component).\n children?: React.ReactNode;\n\n // Show ripple effect on button click. Default: true\n ripple?: boolean;\n\n className?: string;\n\n disabled?: boolean;\n\n style?: { [key: string]: any };\n\n // For testing purposes.\n \"data-testid\"?: string;\n}\n\n/**\n * Shows a default button, used typically when action is not of high priority.\n */\nexport const ButtonDefault: React.FC<ButtonProps> = props => {\n const { disabled, onClick, children, small, ripple
|
|
1
|
+
{"version":3,"names":["ButtonDefault","props","disabled","onClick","children","small","ripple","className","style","classNames","ButtonPrimary","flat","ButtonSecondary","webinyButtonStyles","ButtonFloating","icon","label","rest","ButtonIcon"],"sources":["Button.tsx"],"sourcesContent":["import React from \"react\";\nimport * as RmwcButton from \"@rmwc/button\";\nimport { Fab, FabProps } from \"@rmwc/fab\";\nimport { Icon, IconProps } from \"../Icon/Icon\";\nimport classNames from \"classnames\";\nimport { SyntheticEvent } from \"react\";\nimport { webinyButtonStyles } from \"./Button.styles\";\nexport interface ButtonProps {\n // Make button flat (only applicable to Primary button).\n flat?: boolean;\n\n // Make button smaller.\n small?: boolean;\n\n // onClick handler.\n onClick?: (event: React.MouseEvent<any, MouseEvent>) => void | null;\n\n // Label and optionally an icon (using Button.Icon component).\n children?: React.ReactNode;\n\n // Show ripple effect on button click. Default: true\n ripple?: boolean;\n\n className?: string;\n\n disabled?: boolean;\n\n style?: { [key: string]: any };\n\n // For testing purposes.\n \"data-testid\"?: string;\n}\n\n/**\n * Shows a default button, used typically when action is not of high priority.\n */\nexport const ButtonDefault: React.FC<ButtonProps> = props => {\n const { disabled, onClick, children, small, ripple, className = \"\", style } = props;\n\n return (\n <RmwcButton.Button\n style={style}\n disabled={disabled}\n dense={small}\n onClick={onClick}\n ripple={ripple}\n className={classNames(\"webiny-ui-button\", className)}\n data-testid={props[\"data-testid\"]}\n >\n {children}\n </RmwcButton.Button>\n );\n};\n\n/**\n * Shows primary button, eg. for submitting forms.\n */\nexport const ButtonPrimary: React.FC<ButtonProps> = props => {\n const {\n disabled,\n onClick,\n children,\n small = false,\n flat = false,\n ripple,\n style = {},\n className = null\n } = props;\n return (\n <RmwcButton.Button\n raised={!flat}\n dense={small}\n disabled={disabled}\n unelevated={flat}\n ripple={ripple}\n onClick={onClick}\n style={style}\n className={classNames(\"webiny-ui-button webiny-ui-button--primary\", className)}\n data-testid={props[\"data-testid\"]}\n >\n {children}\n </RmwcButton.Button>\n );\n};\n\n/**\n * Shows a secondary button - eg. for doing a reset on a form.\n */\nexport const ButtonSecondary: React.FC<ButtonProps> = props => {\n const {\n disabled,\n onClick,\n children,\n small = false,\n ripple,\n className = null,\n style = {}\n } = props;\n\n return (\n <RmwcButton.Button\n disabled={disabled}\n outlined\n dense={small}\n ripple={ripple}\n onClick={onClick}\n style={style}\n className={classNames(\n \"webiny-ui-button webiny-ui-button--secondary\",\n webinyButtonStyles,\n className\n )}\n data-testid={props[\"data-testid\"]}\n >\n {children}\n </RmwcButton.Button>\n );\n};\n\nexport type ButtonFloatingProps = ButtonProps &\n FabProps & {\n label?: React.ReactNode;\n icon?: React.ReactNode;\n onMouseDown?: (e: SyntheticEvent) => void;\n onMouseUp?: (e: SyntheticEvent) => void;\n };\n\n/**\n * A floating button, shown on the side of the screen, typically used for creating new content or accessing settings.\n */\nexport const ButtonFloating: React.FC<ButtonFloatingProps> = props => {\n const {\n disabled,\n icon,\n onClick,\n small = false,\n label = null,\n ripple,\n className = null,\n ...rest\n } = props;\n return (\n <Fab\n data-testid={props[\"data-testid\"]}\n disabled={disabled}\n mini={small}\n onClick={onClick}\n label={label}\n ripple={ripple}\n icon={icon}\n className={classNames(\"webiny-ui-button--floating\", className)}\n {...rest}\n />\n );\n};\n\n/**\n * Shows an icon, suitable to be shown inside of a button.\n */\nexport const ButtonIcon: React.FC<IconProps> = props => <Icon {...props} />;\n"],"mappings":"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"}
|
|
@@ -21,8 +21,7 @@ var IconButton = function IconButton(props) {
|
|
|
21
21
|
onClick = props.onClick,
|
|
22
22
|
className = props.className,
|
|
23
23
|
disabled = props.disabled,
|
|
24
|
-
|
|
25
|
-
ripple = _props$ripple === void 0 ? true : _props$ripple;
|
|
24
|
+
ripple = props.ripple;
|
|
26
25
|
return /*#__PURE__*/_react.default.createElement(_iconButton.IconButton, {
|
|
27
26
|
id: id,
|
|
28
27
|
"data-testid": props["data-testid"],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["IconButton","props","id","icon","label","onClick","className","disabled","ripple"],"sources":["IconButton.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n IconButton as RIconButton,\n IconButtonProps as RmwcIconButtonProps\n} from \"@rmwc/icon-button\";\n\nimport { FormComponentProps } from \"../../types\";\n\nexport interface IconButtonProps extends Omit<FormComponentProps, \"onChange\">, RmwcIconButtonProps {\n id?: string;\n /**\n * Icon should be provided as an SvgComponent.\n */\n icon: React.ReactNode;\n\n /**\n * Button label\n */\n label?: string;\n\n /**\n * onClick handler\n * @param event\n */\n onClick?: (event: React.MouseEvent) => void;\n\n /**\n * Custom CSS class\n */\n className?: string;\n /**\n * For testing purposes.\n */\n\n \"data-testid\"?: string;\n\n /**\n * Should icon be disabled?\n */\n disabled?: boolean;\n}\n\n/**\n * Shows the icon button.\n */\nconst IconButton: React.FC<IconButtonProps> = props => {\n const { id, icon, label, onClick, className, disabled, ripple
|
|
1
|
+
{"version":3,"names":["IconButton","props","id","icon","label","onClick","className","disabled","ripple"],"sources":["IconButton.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n IconButton as RIconButton,\n IconButtonProps as RmwcIconButtonProps\n} from \"@rmwc/icon-button\";\n\nimport { FormComponentProps } from \"../../types\";\n\nexport interface IconButtonProps extends Omit<FormComponentProps, \"onChange\">, RmwcIconButtonProps {\n id?: string;\n /**\n * Icon should be provided as an SvgComponent.\n */\n icon: React.ReactNode;\n\n /**\n * Button label\n */\n label?: string;\n\n /**\n * onClick handler\n * @param event\n */\n onClick?: (event: React.MouseEvent) => void;\n\n /**\n * Custom CSS class\n */\n className?: string;\n /**\n * For testing purposes.\n */\n\n \"data-testid\"?: string;\n\n /**\n * Should icon be disabled?\n */\n disabled?: boolean;\n}\n\n/**\n * Shows the icon button.\n */\nconst IconButton: React.FC<IconButtonProps> = props => {\n const { id, icon, label, onClick, className, disabled, ripple } = props;\n\n return (\n <RIconButton\n id={id}\n data-testid={props[\"data-testid\"]}\n onClick={onClick}\n disabled={disabled}\n className={className}\n label={label}\n icon={icon}\n ripple={ripple}\n />\n );\n};\n\nexport { IconButton };\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAyCA;AACA;AACA;AACA,IAAMA,UAAqC,GAAG,SAAxCA,UAAwC,CAAAC,KAAK,EAAI;EACnD,IAAQC,EAAR,GAAkED,KAAlE,CAAQC,EAAR;EAAA,IAAYC,IAAZ,GAAkEF,KAAlE,CAAYE,IAAZ;EAAA,IAAkBC,KAAlB,GAAkEH,KAAlE,CAAkBG,KAAlB;EAAA,IAAyBC,OAAzB,GAAkEJ,KAAlE,CAAyBI,OAAzB;EAAA,IAAkCC,SAAlC,GAAkEL,KAAlE,CAAkCK,SAAlC;EAAA,IAA6CC,QAA7C,GAAkEN,KAAlE,CAA6CM,QAA7C;EAAA,IAAuDC,MAAvD,GAAkEP,KAAlE,CAAuDO,MAAvD;EAEA,oBACI,6BAAC,sBAAD;IACI,EAAE,EAAEN,EADR;IAEI,eAAaD,KAAK,CAAC,aAAD,CAFtB;IAGI,OAAO,EAAEI,OAHb;IAII,QAAQ,EAAEE,QAJd;IAKI,SAAS,EAAED,SALf;IAMI,KAAK,EAAEF,KANX;IAOI,IAAI,EAAED,IAPV;IAQI,MAAM,EAAEK;EARZ,EADJ;AAYH,CAfD"}
|
package/Input/Input.d.ts
CHANGED
|
@@ -17,14 +17,4 @@ export declare type InputProps = FormComponentProps & TextFieldProps & {
|
|
|
17
17
|
className?: string;
|
|
18
18
|
"data-testid"?: string;
|
|
19
19
|
};
|
|
20
|
-
|
|
21
|
-
* Use Input component to store short string values, like first name, last name, e-mail etc.
|
|
22
|
-
* Additionally, with rows prop, it can also be turned into a text area, to store longer strings.
|
|
23
|
-
*/
|
|
24
|
-
export declare class Input extends React.Component<InputProps> {
|
|
25
|
-
static defaultProps: InputProps;
|
|
26
|
-
static rmwcProps: string[];
|
|
27
|
-
onChange: (e: React.SyntheticEvent<HTMLInputElement>) => void;
|
|
28
|
-
onBlur: (e: React.SyntheticEvent<HTMLInputElement>) => Promise<void>;
|
|
29
|
-
render(): JSX.Element;
|
|
30
|
-
}
|
|
20
|
+
export declare const Input: React.FC<InputProps>;
|
package/Input/Input.js
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
4
|
|
|
5
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
6
|
+
|
|
5
7
|
Object.defineProperty(exports, "__esModule", {
|
|
6
8
|
value: true
|
|
7
9
|
});
|
|
@@ -13,19 +15,7 @@ var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helper
|
|
|
13
15
|
|
|
14
16
|
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
|
|
15
17
|
|
|
16
|
-
var
|
|
17
|
-
|
|
18
|
-
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
19
|
-
|
|
20
|
-
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
|
|
21
|
-
|
|
22
|
-
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
23
|
-
|
|
24
|
-
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
|
|
25
|
-
|
|
26
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
27
|
-
|
|
28
|
-
var _react = _interopRequireDefault(require("react"));
|
|
18
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
29
19
|
|
|
30
20
|
var _textfield = require("@rmwc/textfield");
|
|
31
21
|
|
|
@@ -43,139 +33,112 @@ var _excluded = ["autoFocus", "value", "label", "description", "placeholder", "r
|
|
|
43
33
|
* fix label position when autofilled
|
|
44
34
|
* @type {string}
|
|
45
35
|
*/
|
|
46
|
-
var webinyInputStyles = /*#__PURE__*/(0, _emotion.css)(".mdc-text-field__input:-webkit-autofill + .mdc-floating-label{transform:translateY(-106%) scale(0.75);}
|
|
36
|
+
var webinyInputStyles = /*#__PURE__*/(0, _emotion.css)(".mdc-text-field__input:-webkit-autofill + .mdc-floating-label{transform:translateY(-106%) scale(0.75);}label:webinyInputStyles;");
|
|
47
37
|
/**
|
|
48
38
|
* Use Input component to store short string values, like first name, last name, e-mail etc.
|
|
49
39
|
* Additionally, with rows prop, it can also be turned into a text area, to store longer strings.
|
|
50
40
|
*/
|
|
41
|
+
// IconProps directly passed to RMWC
|
|
51
42
|
|
|
52
|
-
var
|
|
53
|
-
(0, _inherits2.default)(Input, _React$Component);
|
|
43
|
+
var rmwcProps = ["label", "type", "step", "disabled", "readOnly", "placeholder", "outlined", "onKeyDown", "onKeyPress", "onKeyUp", "onFocus", "rootProps", "fullwidth", "inputRef", "className", "maxLength", "characterCount"];
|
|
54
44
|
|
|
55
|
-
|
|
45
|
+
var Input = function Input(props) {
|
|
46
|
+
var onChange = (0, _react.useCallback)(function (e) {
|
|
47
|
+
var onChange = props.onChange,
|
|
48
|
+
rawOnChange = props.rawOnChange;
|
|
56
49
|
|
|
57
|
-
|
|
58
|
-
|
|
50
|
+
if (!onChange) {
|
|
51
|
+
return;
|
|
52
|
+
} // @ts-ignore
|
|
59
53
|
|
|
60
|
-
(0, _classCallCheck2.default)(this, Input);
|
|
61
54
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
55
|
+
onChange(rawOnChange ? e : e.target.value);
|
|
56
|
+
}, [props.onChange, props.rawOnChange]);
|
|
57
|
+
var onBlur = (0, _react.useCallback)( /*#__PURE__*/function () {
|
|
58
|
+
var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(e) {
|
|
59
|
+
var validate, onBlur;
|
|
60
|
+
return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
|
|
61
|
+
while (1) {
|
|
62
|
+
switch (_context.prev = _context.next) {
|
|
63
|
+
case 0:
|
|
64
|
+
validate = props.validate, onBlur = props.onBlur;
|
|
65
65
|
|
|
66
|
-
|
|
67
|
-
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onChange", function (e) {
|
|
68
|
-
var _this$props = _this.props,
|
|
69
|
-
onChange = _this$props.onChange,
|
|
70
|
-
rawOnChange = _this$props.rawOnChange;
|
|
71
|
-
|
|
72
|
-
if (!onChange) {
|
|
73
|
-
return;
|
|
74
|
-
} // @ts-ignore
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
onChange(rawOnChange ? e : e.target.value);
|
|
78
|
-
});
|
|
79
|
-
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onBlur", /*#__PURE__*/function () {
|
|
80
|
-
var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(e) {
|
|
81
|
-
var _this$props2, validate, onBlur;
|
|
82
|
-
|
|
83
|
-
return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
|
|
84
|
-
while (1) {
|
|
85
|
-
switch (_context.prev = _context.next) {
|
|
86
|
-
case 0:
|
|
87
|
-
_this$props2 = _this.props, validate = _this$props2.validate, onBlur = _this$props2.onBlur;
|
|
88
|
-
|
|
89
|
-
if (!validate) {
|
|
90
|
-
_context.next = 5;
|
|
91
|
-
break;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
// Since we are accessing event in an async operation, we need to persist it.
|
|
95
|
-
// See https://reactjs.org/docs/events.html#event-pooling.
|
|
96
|
-
e.persist();
|
|
66
|
+
if (!validate) {
|
|
97
67
|
_context.next = 5;
|
|
98
|
-
|
|
68
|
+
break;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
// Since we are accessing event in an async operation, we need to persist it.
|
|
72
|
+
// See https://reactjs.org/docs/events.html#event-pooling.
|
|
73
|
+
e.persist();
|
|
74
|
+
_context.next = 5;
|
|
75
|
+
return validate();
|
|
99
76
|
|
|
100
|
-
|
|
101
|
-
|
|
77
|
+
case 5:
|
|
78
|
+
onBlur && onBlur(e);
|
|
102
79
|
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
}
|
|
80
|
+
case 6:
|
|
81
|
+
case "end":
|
|
82
|
+
return _context.stop();
|
|
107
83
|
}
|
|
108
|
-
}
|
|
109
|
-
})
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
}
|
|
115
|
-
|
|
84
|
+
}
|
|
85
|
+
}, _callee);
|
|
86
|
+
}));
|
|
87
|
+
|
|
88
|
+
return function (_x) {
|
|
89
|
+
return _ref.apply(this, arguments);
|
|
90
|
+
};
|
|
91
|
+
}(), [props.validate, props.onBlur]);
|
|
92
|
+
var autoFocus = props.autoFocus,
|
|
93
|
+
value = props.value,
|
|
94
|
+
label = props.label,
|
|
95
|
+
description = props.description,
|
|
96
|
+
placeholder = props.placeholder,
|
|
97
|
+
rows = props.rows,
|
|
98
|
+
validation = props.validation,
|
|
99
|
+
icon = props.icon,
|
|
100
|
+
trailingIcon = props.trailingIcon,
|
|
101
|
+
onEnter = props.onEnter,
|
|
102
|
+
rest = (0, _objectWithoutProperties2.default)(props, _excluded);
|
|
103
|
+
var inputValue = value;
|
|
104
|
+
|
|
105
|
+
if (value === null || typeof value === "undefined") {
|
|
106
|
+
inputValue = "";
|
|
116
107
|
}
|
|
117
108
|
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
var _this$props3 = this.props,
|
|
122
|
-
autoFocus = _this$props3.autoFocus,
|
|
123
|
-
value = _this$props3.value,
|
|
124
|
-
label = _this$props3.label,
|
|
125
|
-
description = _this$props3.description,
|
|
126
|
-
placeholder = _this$props3.placeholder,
|
|
127
|
-
rows = _this$props3.rows,
|
|
128
|
-
validation = _this$props3.validation,
|
|
129
|
-
icon = _this$props3.icon,
|
|
130
|
-
trailingIcon = _this$props3.trailingIcon,
|
|
131
|
-
onEnter = _this$props3.onEnter,
|
|
132
|
-
props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
|
|
133
|
-
var inputValue = value;
|
|
134
|
-
|
|
135
|
-
if (value === null || typeof value === "undefined") {
|
|
136
|
-
inputValue = "";
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
var _ref2 = validation || {},
|
|
140
|
-
validationIsValid = _ref2.isValid,
|
|
141
|
-
validationMessage = _ref2.message;
|
|
142
|
-
|
|
143
|
-
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_textfield.TextField, Object.assign({}, (0, _pick.default)(props, Input.rmwcProps), {
|
|
144
|
-
onKeyDown: function onKeyDown(e) {
|
|
145
|
-
if (typeof onEnter === "function" && e.key === "Enter") {
|
|
146
|
-
onEnter();
|
|
147
|
-
}
|
|
109
|
+
var _ref2 = validation || {},
|
|
110
|
+
validationIsValid = _ref2.isValid,
|
|
111
|
+
validationMessage = _ref2.message;
|
|
148
112
|
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
113
|
+
var inputOnKeyDown = (0, _react.useCallback)(function (e) {
|
|
114
|
+
if (typeof onEnter === "function" && e.key === "Enter") {
|
|
115
|
+
onEnter();
|
|
116
|
+
}
|
|
153
117
|
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
},
|
|
157
|
-
autoFocus: autoFocus,
|
|
158
|
-
textarea: Boolean(rows),
|
|
159
|
-
value: inputValue,
|
|
160
|
-
onChange: this.onChange,
|
|
161
|
-
onBlur: this.onBlur,
|
|
162
|
-
label: label,
|
|
163
|
-
icon: icon,
|
|
164
|
-
placeholder: !label && placeholder || undefined,
|
|
165
|
-
trailingIcon: trailingIcon,
|
|
166
|
-
rows: this.props.rows,
|
|
167
|
-
className: (0, _classnames.default)("webiny-ui-input", webinyInputStyles),
|
|
168
|
-
"data-testid": props["data-testid"]
|
|
169
|
-
})), validationIsValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
|
|
170
|
-
error: true
|
|
171
|
-
}, validationMessage), validationIsValid !== false && description && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, description));
|
|
118
|
+
if (typeof rest.onKeyDown === "function") {
|
|
119
|
+
return rest.onKeyDown(e);
|
|
172
120
|
}
|
|
173
|
-
}]);
|
|
174
|
-
return
|
|
175
|
-
|
|
121
|
+
}, []);
|
|
122
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_textfield.TextField, Object.assign({}, (0, _pick.default)(rest, rmwcProps), {
|
|
123
|
+
onKeyDown: inputOnKeyDown,
|
|
124
|
+
autoFocus: autoFocus,
|
|
125
|
+
textarea: Boolean(rows),
|
|
126
|
+
value: inputValue,
|
|
127
|
+
onChange: onChange,
|
|
128
|
+
onBlur: onBlur,
|
|
129
|
+
label: label,
|
|
130
|
+
icon: icon,
|
|
131
|
+
placeholder: !label && placeholder || undefined,
|
|
132
|
+
trailingIcon: trailingIcon,
|
|
133
|
+
rows: rows,
|
|
134
|
+
className: (0, _classnames.default)("webiny-ui-input", webinyInputStyles),
|
|
135
|
+
"data-testid": props["data-testid"]
|
|
136
|
+
})), validationIsValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
|
|
137
|
+
error: true
|
|
138
|
+
}, validationMessage), validationIsValid !== false && description && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, description));
|
|
139
|
+
};
|
|
176
140
|
|
|
177
141
|
exports.Input = Input;
|
|
178
|
-
|
|
142
|
+
Input.defaultProps = {
|
|
179
143
|
rawOnChange: false
|
|
180
|
-
}
|
|
181
|
-
(0, _defineProperty2.default)(Input, "rmwcProps", ["label", "type", "step", "disabled", "readOnly", "placeholder", "outlined", "onKeyDown", "onKeyPress", "onKeyUp", "onFocus", "rootProps", "fullwidth", "inputRef", "className", "maxLength", "characterCount"]);
|
|
144
|
+
};
|
package/Input/Input.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["webinyInputStyles","css","
|
|
1
|
+
{"version":3,"names":["webinyInputStyles","css","rmwcProps","Input","props","onChange","useCallback","e","rawOnChange","target","value","onBlur","validate","persist","autoFocus","label","description","placeholder","rows","validation","icon","trailingIcon","onEnter","rest","inputValue","validationIsValid","isValid","validationMessage","message","inputOnKeyDown","key","onKeyDown","pick","Boolean","undefined","classNames","defaultProps"],"sources":["Input.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { TextField, TextFieldProps } from \"@rmwc/textfield\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport pick from \"lodash/pick\";\nimport { FormComponentProps } from \"~/types\";\nimport { ReactElement } from \"react\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\n\nexport type InputProps = FormComponentProps &\n TextFieldProps & {\n // Should this input be filled with browser values\n autoComplete?: string;\n\n // If true, will pass native `event` to the `onChange` callback\n rawOnChange?: boolean;\n\n // Auto-focus input\n autoFocus?: boolean;\n\n // Input placeholder\n placeholder?: string;\n\n // Description beneath the input.\n description?: string | ReactElement;\n\n // Converts input into a text area with given number of rows.\n rows?: number;\n\n maxLength?: number;\n\n // A callback that is executed when input focus is lost.\n onBlur?: (e: React.SyntheticEvent<HTMLInputElement>) => any;\n\n onKeyDown?: (e: React.SyntheticEvent<HTMLInputElement>) => any;\n\n // A callback that gets triggered when the user presses the \"Enter\" key.\n onEnter?: () => any;\n\n // CSS class name\n className?: string;\n\n // For testing purposes.\n \"data-testid\"?: string;\n };\n\n/**\n * fix label position when autofilled\n * @type {string}\n */\nconst webinyInputStyles = css`\n .mdc-text-field__input:-webkit-autofill + .mdc-floating-label {\n transform: translateY(-106%) scale(0.75);\n }\n`;\n\n/**\n * Use Input component to store short string values, like first name, last name, e-mail etc.\n * Additionally, with rows prop, it can also be turned into a text area, to store longer strings.\n */\n\n// IconProps directly passed to RMWC\nconst rmwcProps = [\n \"label\",\n \"type\",\n \"step\",\n \"disabled\",\n \"readOnly\",\n \"placeholder\",\n \"outlined\",\n \"onKeyDown\",\n \"onKeyPress\",\n \"onKeyUp\",\n \"onFocus\",\n \"rootProps\",\n \"fullwidth\",\n \"inputRef\",\n \"className\",\n \"maxLength\",\n \"characterCount\"\n];\n\nexport const Input: React.FC<InputProps> = props => {\n const onChange = useCallback(\n (e: React.SyntheticEvent<HTMLInputElement>) => {\n const { onChange, rawOnChange } = props;\n if (!onChange) {\n return;\n }\n\n // @ts-ignore\n onChange(rawOnChange ? e : e.target.value);\n },\n [props.onChange, props.rawOnChange]\n );\n\n const onBlur = useCallback(\n async (e: React.SyntheticEvent<HTMLInputElement>) => {\n const { validate, onBlur } = props;\n if (validate) {\n // Since we are accessing event in an async operation, we need to persist it.\n // See https://reactjs.org/docs/events.html#event-pooling.\n e.persist();\n await validate();\n }\n onBlur && onBlur(e);\n },\n [props.validate, props.onBlur]\n );\n\n const {\n autoFocus,\n value,\n label,\n description,\n placeholder,\n rows,\n validation,\n icon,\n trailingIcon,\n onEnter,\n ...rest\n } = props;\n\n let inputValue = value;\n if (value === null || typeof value === \"undefined\") {\n inputValue = \"\";\n }\n\n const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n const inputOnKeyDown = useCallback(e => {\n if (typeof onEnter === \"function\" && e.key === \"Enter\") {\n onEnter();\n }\n\n if (typeof rest.onKeyDown === \"function\") {\n return rest.onKeyDown(e);\n }\n }, []);\n\n return (\n <React.Fragment>\n <TextField\n {...pick(rest, rmwcProps)}\n onKeyDown={inputOnKeyDown}\n autoFocus={autoFocus}\n textarea={Boolean(rows)}\n value={inputValue}\n onChange={onChange}\n onBlur={onBlur}\n label={label}\n icon={icon}\n placeholder={(!label && placeholder) || undefined}\n trailingIcon={trailingIcon}\n rows={rows}\n className={classNames(\"webiny-ui-input\", webinyInputStyles)}\n data-testid={props[\"data-testid\"]}\n />\n\n {validationIsValid === false && (\n <FormElementMessage error>{validationMessage}</FormElementMessage>\n )}\n {validationIsValid !== false && description && (\n <FormElementMessage>{description}</FormElementMessage>\n )}\n </React.Fragment>\n );\n};\n\nInput.defaultProps = { rawOnChange: false };\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAGA;;AACA;;;;AAuCA;AACA;AACA;AACA;AACA,IAAMA,iBAAiB,oBAAGC,YAAH,oIAAvB;AAMA;AACA;AACA;AACA;AAEA;;AACA,IAAMC,SAAS,GAAG,CACd,OADc,EAEd,MAFc,EAGd,MAHc,EAId,UAJc,EAKd,UALc,EAMd,aANc,EAOd,UAPc,EAQd,WARc,EASd,YATc,EAUd,SAVc,EAWd,SAXc,EAYd,WAZc,EAad,WAbc,EAcd,UAdc,EAed,WAfc,EAgBd,WAhBc,EAiBd,gBAjBc,CAAlB;;AAoBO,IAAMC,KAA2B,GAAG,SAA9BA,KAA8B,CAAAC,KAAK,EAAI;EAChD,IAAMC,QAAQ,GAAG,IAAAC,kBAAA,EACb,UAACC,CAAD,EAA+C;IAC3C,IAAQF,QAAR,GAAkCD,KAAlC,CAAQC,QAAR;IAAA,IAAkBG,WAAlB,GAAkCJ,KAAlC,CAAkBI,WAAlB;;IACA,IAAI,CAACH,QAAL,EAAe;MACX;IACH,CAJ0C,CAM3C;;;IACAA,QAAQ,CAACG,WAAW,GAAGD,CAAH,GAAOA,CAAC,CAACE,MAAF,CAASC,KAA5B,CAAR;EACH,CATY,EAUb,CAACN,KAAK,CAACC,QAAP,EAAiBD,KAAK,CAACI,WAAvB,CAVa,CAAjB;EAaA,IAAMG,MAAM,GAAG,IAAAL,kBAAA;IAAA,kGACX,iBAAOC,CAAP;MAAA;MAAA;QAAA;UAAA;YAAA;cACYK,QADZ,GACiCR,KADjC,CACYQ,QADZ,EACsBD,MADtB,GACiCP,KADjC,CACsBO,MADtB;;cAAA,KAEQC,QAFR;gBAAA;gBAAA;cAAA;;cAGQ;cACA;cACAL,CAAC,CAACM,OAAF;cALR;cAAA,OAMcD,QAAQ,EANtB;;YAAA;cAQID,MAAM,IAAIA,MAAM,CAACJ,CAAD,CAAhB;;YARJ;YAAA;cAAA;UAAA;QAAA;MAAA;IAAA,CADW;;IAAA;MAAA;IAAA;EAAA,KAWX,CAACH,KAAK,CAACQ,QAAP,EAAiBR,KAAK,CAACO,MAAvB,CAXW,CAAf;EAcA,IACIG,SADJ,GAYIV,KAZJ,CACIU,SADJ;EAAA,IAEIJ,KAFJ,GAYIN,KAZJ,CAEIM,KAFJ;EAAA,IAGIK,KAHJ,GAYIX,KAZJ,CAGIW,KAHJ;EAAA,IAIIC,WAJJ,GAYIZ,KAZJ,CAIIY,WAJJ;EAAA,IAKIC,WALJ,GAYIb,KAZJ,CAKIa,WALJ;EAAA,IAMIC,IANJ,GAYId,KAZJ,CAMIc,IANJ;EAAA,IAOIC,UAPJ,GAYIf,KAZJ,CAOIe,UAPJ;EAAA,IAQIC,IARJ,GAYIhB,KAZJ,CAQIgB,IARJ;EAAA,IASIC,YATJ,GAYIjB,KAZJ,CASIiB,YATJ;EAAA,IAUIC,OAVJ,GAYIlB,KAZJ,CAUIkB,OAVJ;EAAA,IAWOC,IAXP,0CAYInB,KAZJ;EAcA,IAAIoB,UAAU,GAAGd,KAAjB;;EACA,IAAIA,KAAK,KAAK,IAAV,IAAkB,OAAOA,KAAP,KAAiB,WAAvC,EAAoD;IAChDc,UAAU,GAAG,EAAb;EACH;;EAED,YAAmEL,UAAU,IAAI,EAAjF;EAAA,IAAiBM,iBAAjB,SAAQC,OAAR;EAAA,IAA6CC,iBAA7C,SAAoCC,OAApC;;EAEA,IAAMC,cAAc,GAAG,IAAAvB,kBAAA,EAAY,UAAAC,CAAC,EAAI;IACpC,IAAI,OAAOe,OAAP,KAAmB,UAAnB,IAAiCf,CAAC,CAACuB,GAAF,KAAU,OAA/C,EAAwD;MACpDR,OAAO;IACV;;IAED,IAAI,OAAOC,IAAI,CAACQ,SAAZ,KAA0B,UAA9B,EAA0C;MACtC,OAAOR,IAAI,CAACQ,SAAL,CAAexB,CAAf,CAAP;IACH;EACJ,CARsB,EAQpB,EARoB,CAAvB;EAUA,oBACI,6BAAC,cAAD,CAAO,QAAP,qBACI,6BAAC,oBAAD,oBACQ,IAAAyB,aAAA,EAAKT,IAAL,EAAWrB,SAAX,CADR;IAEI,SAAS,EAAE2B,cAFf;IAGI,SAAS,EAAEf,SAHf;IAII,QAAQ,EAAEmB,OAAO,CAACf,IAAD,CAJrB;IAKI,KAAK,EAAEM,UALX;IAMI,QAAQ,EAAEnB,QANd;IAOI,MAAM,EAAEM,MAPZ;IAQI,KAAK,EAAEI,KARX;IASI,IAAI,EAAEK,IATV;IAUI,WAAW,EAAG,CAACL,KAAD,IAAUE,WAAX,IAA2BiB,SAV5C;IAWI,YAAY,EAAEb,YAXlB;IAYI,IAAI,EAAEH,IAZV;IAaI,SAAS,EAAE,IAAAiB,mBAAA,EAAW,iBAAX,EAA8BnC,iBAA9B,CAbf;IAcI,eAAaI,KAAK,CAAC,aAAD;EAdtB,GADJ,EAkBKqB,iBAAiB,KAAK,KAAtB,iBACG,6BAAC,sCAAD;IAAoB,KAAK;EAAzB,GAA2BE,iBAA3B,CAnBR,EAqBKF,iBAAiB,KAAK,KAAtB,IAA+BT,WAA/B,iBACG,6BAAC,sCAAD,QAAqBA,WAArB,CAtBR,CADJ;AA2BH,CAtFM;;;AAwFPb,KAAK,CAACiC,YAAN,GAAqB;EAAE5B,WAAW,EAAE;AAAf,CAArB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webiny/ui",
|
|
3
|
-
"version": "5.33.
|
|
3
|
+
"version": "5.33.3-beta.0",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -80,11 +80,11 @@
|
|
|
80
80
|
"@types/react-custom-scrollbars": "^4.0.10",
|
|
81
81
|
"@types/react-transition-group": "^4.4.4",
|
|
82
82
|
"@types/shortid": "^0.0.29",
|
|
83
|
-
"@webiny/cli": "^5.33.
|
|
84
|
-
"@webiny/form": "^5.33.
|
|
85
|
-
"@webiny/project-utils": "^5.33.
|
|
86
|
-
"@webiny/storybook-utils": "^5.33.
|
|
87
|
-
"@webiny/validation": "^5.33.
|
|
83
|
+
"@webiny/cli": "^5.33.3-beta.0",
|
|
84
|
+
"@webiny/form": "^5.33.3-beta.0",
|
|
85
|
+
"@webiny/project-utils": "^5.33.3-beta.0",
|
|
86
|
+
"@webiny/storybook-utils": "^5.33.3-beta.0",
|
|
87
|
+
"@webiny/validation": "^5.33.3-beta.0",
|
|
88
88
|
"babel-loader": "^8.0.0-beta.6",
|
|
89
89
|
"babel-plugin-emotion": "^9.2.8",
|
|
90
90
|
"execa": "^5.0.0",
|
|
@@ -130,5 +130,5 @@
|
|
|
130
130
|
]
|
|
131
131
|
}
|
|
132
132
|
},
|
|
133
|
-
"gitHead": "
|
|
133
|
+
"gitHead": "3222a0878e8c6fa15b8c69378fdb7cfc6f473b75"
|
|
134
134
|
}
|