@webiny/ui 5.42.3-beta.1 → 5.43.0-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/Input/Input.js +1 -1
- package/Input/Input.js.map +1 -1
- package/package.json +6 -6
package/Input/Input.js
CHANGED
|
@@ -20,7 +20,7 @@ var _excluded = ["autoFocus", "value", "label", "description", "placeholder", "r
|
|
|
20
20
|
*/
|
|
21
21
|
|
|
22
22
|
// IconProps directly passed to RMWC
|
|
23
|
-
var rmwcProps = ["label", "type", "step", "disabled", "readOnly", "placeholder", "outlined", "onKeyDown", "onKeyPress", "onKeyUp", "onFocus", "rootProps", "fullwidth", "inputRef", "className", "maxLength", "characterCount"];
|
|
23
|
+
var rmwcProps = ["label", "type", "step", "disabled", "readOnly", "placeholder", "outlined", "onKeyDown", "onKeyPress", "onKeyUp", "onFocus", "rootProps", "fullwidth", "inputRef", "className", "maxLength", "characterCount", "autoComplete"];
|
|
24
24
|
var Input = exports.Input = function Input(props) {
|
|
25
25
|
var onChange = (0, _react.useCallback)(function (e) {
|
|
26
26
|
var onChange = props.onChange,
|
package/Input/Input.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_textfield","_FormElementMessage","_pick","_interopRequireDefault","_classnames","_styled","_excluded","rmwcProps","Input","exports","props","onChange","useCallback","e","rawOnChange","target","value","onBlur","validate","persist","autoFocus","label","description","placeholder","rows","validation","icon","trailingIcon","onEnter","size","rest","_objectWithoutProperties2","default","inputValue","_ref","validationIsValid","isValid","validationMessage","message","inputOnKeyDown","key","onKeyDown","createElement","Fragment","TextField","Object","assign","pick","textarea","Boolean","className","classNames","webinyInputStyles","concat","FormElementMessage","error"],"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 classNames from \"classnames\";\nimport { webinyInputStyles } from \"./styled\";\n\nexport type InputProps<TValue = any> = FormComponentProps<TValue> &\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 // Size - small, medium or large\n size?: \"small\" | \"medium\" | \"large\";\n\n children?: React.ReactNode;\n };\n\nexport type InputOnKeyDownProps = React.SyntheticEvent<HTMLInputElement> & {\n key?: string;\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 = (props: InputProps) => {\n const onChange = useCallback(\n (e: React.SyntheticEvent<HTMLInputElement>) => {\n const { onChange, rawOnChange } = props;\n if (!onChange) {\n return;\n }\n\n // @ts-expect-error\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 size,\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(\n (e: InputOnKeyDownProps) => {\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 [rest.onKeyDown, onEnter]\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={placeholder}\n trailingIcon={trailingIcon}\n rows={rows}\n className={classNames(\n \"webiny-ui-input\",\n webinyInputStyles,\n props.size ? `webiny-ui-input--size-${size}` : null\n )}\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"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAD,OAAA;AACA,IAAAE,mBAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAGA,IAAAK,WAAA,GAAAD,sBAAA,CAAAJ,OAAA;AACA,IAAAM,OAAA,GAAAN,OAAA;AAA6C,IAAAO,SAAA;AA+C7C;AACA;AACA;AACA;;AAEA;AACA,IAAMC,SAAS,GAAG,CACd,OAAO,EACP,MAAM,EACN,MAAM,EACN,UAAU,EACV,UAAU,EACV,aAAa,EACb,UAAU,EACV,WAAW,EACX,YAAY,EACZ,SAAS,EACT,SAAS,EACT,WAAW,EACX,WAAW,EACX,UAAU,EACV,WAAW,EACX,WAAW,EACX,gBAAgB,
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_textfield","_FormElementMessage","_pick","_interopRequireDefault","_classnames","_styled","_excluded","rmwcProps","Input","exports","props","onChange","useCallback","e","rawOnChange","target","value","onBlur","validate","persist","autoFocus","label","description","placeholder","rows","validation","icon","trailingIcon","onEnter","size","rest","_objectWithoutProperties2","default","inputValue","_ref","validationIsValid","isValid","validationMessage","message","inputOnKeyDown","key","onKeyDown","createElement","Fragment","TextField","Object","assign","pick","textarea","Boolean","className","classNames","webinyInputStyles","concat","FormElementMessage","error"],"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 classNames from \"classnames\";\nimport { webinyInputStyles } from \"./styled\";\n\nexport type InputProps<TValue = any> = FormComponentProps<TValue> &\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 // Size - small, medium or large\n size?: \"small\" | \"medium\" | \"large\";\n\n children?: React.ReactNode;\n };\n\nexport type InputOnKeyDownProps = React.SyntheticEvent<HTMLInputElement> & {\n key?: string;\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 \"autoComplete\"\n];\n\nexport const Input = (props: InputProps) => {\n const onChange = useCallback(\n (e: React.SyntheticEvent<HTMLInputElement>) => {\n const { onChange, rawOnChange } = props;\n if (!onChange) {\n return;\n }\n\n // @ts-expect-error\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 size,\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(\n (e: InputOnKeyDownProps) => {\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 [rest.onKeyDown, onEnter]\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={placeholder}\n trailingIcon={trailingIcon}\n rows={rows}\n className={classNames(\n \"webiny-ui-input\",\n webinyInputStyles,\n props.size ? `webiny-ui-input--size-${size}` : null\n )}\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"],"mappings":"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","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webiny/ui",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.43.0-beta.0",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"@rmwc/typography": "14.2.2",
|
|
44
44
|
"@svgr/webpack": "6.5.1",
|
|
45
45
|
"@tanstack/react-table": "8.7.9",
|
|
46
|
-
"@webiny/utils": "5.
|
|
46
|
+
"@webiny/utils": "5.43.0-beta.0",
|
|
47
47
|
"brace": "0.11.1",
|
|
48
48
|
"classnames": "2.5.1",
|
|
49
49
|
"cropperjs": "1.5.13",
|
|
@@ -74,9 +74,9 @@
|
|
|
74
74
|
"@types/react-color": "2.17.11",
|
|
75
75
|
"@types/react-custom-scrollbars": "4.0.10",
|
|
76
76
|
"@types/react-transition-group": "4.4.5",
|
|
77
|
-
"@webiny/form": "5.
|
|
78
|
-
"@webiny/project-utils": "5.
|
|
79
|
-
"@webiny/validation": "5.
|
|
77
|
+
"@webiny/form": "5.43.0-beta.0",
|
|
78
|
+
"@webiny/project-utils": "5.43.0-beta.0",
|
|
79
|
+
"@webiny/validation": "5.43.0-beta.0",
|
|
80
80
|
"babel-loader": "9.2.1",
|
|
81
81
|
"execa": "5.1.1",
|
|
82
82
|
"ncp": "2.0.0",
|
|
@@ -114,5 +114,5 @@
|
|
|
114
114
|
]
|
|
115
115
|
}
|
|
116
116
|
},
|
|
117
|
-
"gitHead": "
|
|
117
|
+
"gitHead": "abfb4ec7b4391f2414cd22f2c5539c84b6c8abbf"
|
|
118
118
|
}
|