@vuu-ui/vuu-ui-controls 0.8.99 → 0.9.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.
|
@@ -12,6 +12,7 @@ var VuuInput$1 = require('./VuuInput.css.js');
|
|
|
12
12
|
const classBase = "vuuInput";
|
|
13
13
|
const VuuInput = React.forwardRef(function VuuInput2({
|
|
14
14
|
className,
|
|
15
|
+
commitWhenCleared = false,
|
|
15
16
|
errorMessage,
|
|
16
17
|
id: idProp,
|
|
17
18
|
onCommit,
|
|
@@ -43,6 +44,16 @@ const VuuInput = React.forwardRef(function VuuInput2({
|
|
|
43
44
|
},
|
|
44
45
|
[onCommit, type]
|
|
45
46
|
);
|
|
47
|
+
const handleChange = React.useCallback(
|
|
48
|
+
(evt) => {
|
|
49
|
+
const value = evt.target.value;
|
|
50
|
+
if (value.trim() === "" && commitWhenCleared) {
|
|
51
|
+
onCommit?.(evt, value);
|
|
52
|
+
}
|
|
53
|
+
props.inputProps?.onChange?.(evt);
|
|
54
|
+
},
|
|
55
|
+
[commitWhenCleared, onCommit, props.inputProps]
|
|
56
|
+
);
|
|
46
57
|
const handleKeyDown = React.useCallback(
|
|
47
58
|
(evt) => {
|
|
48
59
|
if (evt.key === "Enter") {
|
|
@@ -71,7 +82,8 @@ const VuuInput = React.forwardRef(function VuuInput2({
|
|
|
71
82
|
id,
|
|
72
83
|
inputProps: {
|
|
73
84
|
autoComplete: "off",
|
|
74
|
-
...props.inputProps
|
|
85
|
+
...props.inputProps,
|
|
86
|
+
onChange: handleChange
|
|
75
87
|
},
|
|
76
88
|
className: cx(classBase, className, {
|
|
77
89
|
[`${classBase}-error`]: errorMessage
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VuuInput.js","sources":["../../src/vuu-input/VuuInput.tsx"],"sourcesContent":["import { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport { CommitHandler, isValidNumber, useId } from \"@vuu-ui/vuu-utils\";\nimport { Input, InputProps, Tooltip } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n FocusEventHandler,\n ForwardedRef,\n KeyboardEventHandler,\n ReactElement,\n ReactNode,\n forwardRef,\n useCallback,\n} from \"react\";\n\nimport vuuInputCss from \"./VuuInput.css\";\n\nconst classBase = \"vuuInput\";\n\nexport interface VuuInputProps<T extends VuuRowDataItemType = string>\n extends Omit<InputProps, \"validationStatus\"> {\n errorMessage?: ReactNode;\n onCommit: CommitHandler<HTMLInputElement, T | undefined>;\n type?: T;\n}\n\n/**\n * A variant of Salt Input that provides a commit callback prop,\n * TODO along with cancel behaviour ?\n */\nexport const VuuInput = forwardRef(function VuuInput<\n T extends VuuRowDataItemType = string,\n>(\n {\n className,\n errorMessage,\n id: idProp,\n onCommit,\n onKeyDown,\n type,\n ...props\n }: VuuInputProps<T>,\n forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-input\",\n css: vuuInputCss,\n window: targetWindow,\n });\n\n const id = useId(idProp);\n\n const commitValue = useCallback<CommitHandler>(\n (evt, value) => {\n if (type === \"number\") {\n const numericValue = parseFloat(value);\n if (isValidNumber(numericValue)) {\n onCommit(evt, numericValue as T, \"text-input\");\n } else {\n //TODO add validation logic\n throw Error(\"Invalid value\");\n }\n } else if (type === \"boolean\") {\n onCommit(evt, Boolean(value) as T, \"text-input\");\n } else {\n onCommit(evt, value as T, \"text-input\");\n }\n },\n [onCommit, type],\n );\n\n const handleKeyDown = useCallback<KeyboardEventHandler<HTMLInputElement>>(\n (evt) => {\n if (evt.key === \"Enter\") {\n evt.preventDefault();\n evt.stopPropagation();\n const { value } = evt.target as HTMLInputElement;\n commitValue(evt, value);\n }\n onKeyDown?.(evt);\n },\n [commitValue, onKeyDown],\n );\n\n const handleBlur = useCallback<FocusEventHandler<HTMLInputElement>>(\n (evt) => {\n const { value } = evt.target as HTMLInputElement;\n commitValue(evt, value);\n },\n [commitValue],\n );\n\n const endAdornment = errorMessage ? (\n <Tooltip content={errorMessage} status=\"error\">\n <span className={`${classBase}-errorIcon`} data-icon=\"error\" />\n </Tooltip>\n ) : undefined;\n\n return (\n <>\n <Input\n {...props}\n endAdornment={endAdornment}\n id={id}\n inputProps={{\n autoComplete: \"off\",\n ...props.inputProps,\n }}\n className={cx(classBase, className, {\n [`${classBase}-error`]: errorMessage,\n })}\n onBlur={handleBlur}\n ref={forwardedRef}\n onKeyDown={handleKeyDown}\n />\n </>\n );\n}) as <T extends VuuRowDataItemType = string>(\n props: VuuInputProps<T> & {\n ref?: ForwardedRef<HTMLDivElement>;\n },\n) => ReactElement<VuuInputProps<T>>;\n"],"names":["forwardRef","VuuInput","useWindow","useComponentCssInjection","vuuInputCss","useId","useCallback","isValidNumber","jsx","Tooltip","Fragment","Input"],"mappings":";;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"VuuInput.js","sources":["../../src/vuu-input/VuuInput.tsx"],"sourcesContent":["import { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport { CommitHandler, isValidNumber, useId } from \"@vuu-ui/vuu-utils\";\nimport { Input, InputProps, Tooltip } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n ChangeEventHandler,\n FocusEventHandler,\n ForwardedRef,\n KeyboardEventHandler,\n ReactElement,\n ReactNode,\n forwardRef,\n useCallback,\n} from \"react\";\n\nimport vuuInputCss from \"./VuuInput.css\";\n\nconst classBase = \"vuuInput\";\n\nexport interface VuuInputProps<T extends VuuRowDataItemType = string>\n extends Omit<InputProps, \"validationStatus\"> {\n commitWhenCleared?: boolean;\n errorMessage?: ReactNode;\n onCommit: CommitHandler<HTMLInputElement, T | undefined>;\n type?: T;\n}\n\n/**\n * A variant of Salt Input that provides a commit callback prop,\n * TODO along with cancel behaviour ?\n */\nexport const VuuInput = forwardRef(function VuuInput<\n T extends VuuRowDataItemType = string,\n>(\n {\n className,\n commitWhenCleared = false,\n errorMessage,\n id: idProp,\n onCommit,\n onKeyDown,\n type,\n ...props\n }: VuuInputProps<T>,\n forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-input\",\n css: vuuInputCss,\n window: targetWindow,\n });\n\n const id = useId(idProp);\n\n const commitValue = useCallback<CommitHandler>(\n (evt, value) => {\n if (type === \"number\") {\n const numericValue = parseFloat(value);\n if (isValidNumber(numericValue)) {\n onCommit(evt, numericValue as T, \"text-input\");\n } else {\n //TODO add validation logic\n throw Error(\"Invalid value\");\n }\n } else if (type === \"boolean\") {\n onCommit(evt, Boolean(value) as T, \"text-input\");\n } else {\n onCommit(evt, value as T, \"text-input\");\n }\n },\n [onCommit, type],\n );\n\n const handleChange = useCallback<ChangeEventHandler<HTMLInputElement>>(\n (evt) => {\n const value = evt.target.value;\n if (value.trim() === \"\" && commitWhenCleared) {\n onCommit?.(evt, value as T);\n }\n props.inputProps?.onChange?.(evt);\n },\n [commitWhenCleared, onCommit, props.inputProps],\n );\n\n const handleKeyDown = useCallback<KeyboardEventHandler<HTMLInputElement>>(\n (evt) => {\n if (evt.key === \"Enter\") {\n evt.preventDefault();\n evt.stopPropagation();\n const { value } = evt.target as HTMLInputElement;\n commitValue(evt, value);\n }\n onKeyDown?.(evt);\n },\n [commitValue, onKeyDown],\n );\n\n const handleBlur = useCallback<FocusEventHandler<HTMLInputElement>>(\n (evt) => {\n const { value } = evt.target as HTMLInputElement;\n commitValue(evt, value);\n },\n [commitValue],\n );\n\n const endAdornment = errorMessage ? (\n <Tooltip content={errorMessage} status=\"error\">\n <span className={`${classBase}-errorIcon`} data-icon=\"error\" />\n </Tooltip>\n ) : undefined;\n\n return (\n <>\n <Input\n {...props}\n endAdornment={endAdornment}\n id={id}\n inputProps={{\n autoComplete: \"off\",\n ...props.inputProps,\n onChange: handleChange,\n }}\n className={cx(classBase, className, {\n [`${classBase}-error`]: errorMessage,\n })}\n onBlur={handleBlur}\n ref={forwardedRef}\n onKeyDown={handleKeyDown}\n />\n </>\n );\n}) as <T extends VuuRowDataItemType = string>(\n props: VuuInputProps<T> & {\n ref?: ForwardedRef<HTMLDivElement>;\n },\n) => ReactElement<VuuInputProps<T>>;\n"],"names":["forwardRef","VuuInput","useWindow","useComponentCssInjection","vuuInputCss","useId","useCallback","isValidNumber","jsx","Tooltip","Fragment","Input"],"mappings":"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"}
|
|
@@ -10,6 +10,7 @@ import vuuInputCss from './VuuInput.css.js';
|
|
|
10
10
|
const classBase = "vuuInput";
|
|
11
11
|
const VuuInput = forwardRef(function VuuInput2({
|
|
12
12
|
className,
|
|
13
|
+
commitWhenCleared = false,
|
|
13
14
|
errorMessage,
|
|
14
15
|
id: idProp,
|
|
15
16
|
onCommit,
|
|
@@ -41,6 +42,16 @@ const VuuInput = forwardRef(function VuuInput2({
|
|
|
41
42
|
},
|
|
42
43
|
[onCommit, type]
|
|
43
44
|
);
|
|
45
|
+
const handleChange = useCallback(
|
|
46
|
+
(evt) => {
|
|
47
|
+
const value = evt.target.value;
|
|
48
|
+
if (value.trim() === "" && commitWhenCleared) {
|
|
49
|
+
onCommit?.(evt, value);
|
|
50
|
+
}
|
|
51
|
+
props.inputProps?.onChange?.(evt);
|
|
52
|
+
},
|
|
53
|
+
[commitWhenCleared, onCommit, props.inputProps]
|
|
54
|
+
);
|
|
44
55
|
const handleKeyDown = useCallback(
|
|
45
56
|
(evt) => {
|
|
46
57
|
if (evt.key === "Enter") {
|
|
@@ -69,7 +80,8 @@ const VuuInput = forwardRef(function VuuInput2({
|
|
|
69
80
|
id,
|
|
70
81
|
inputProps: {
|
|
71
82
|
autoComplete: "off",
|
|
72
|
-
...props.inputProps
|
|
83
|
+
...props.inputProps,
|
|
84
|
+
onChange: handleChange
|
|
73
85
|
},
|
|
74
86
|
className: cx(classBase, className, {
|
|
75
87
|
[`${classBase}-error`]: errorMessage
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VuuInput.js","sources":["../../src/vuu-input/VuuInput.tsx"],"sourcesContent":["import { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport { CommitHandler, isValidNumber, useId } from \"@vuu-ui/vuu-utils\";\nimport { Input, InputProps, Tooltip } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n FocusEventHandler,\n ForwardedRef,\n KeyboardEventHandler,\n ReactElement,\n ReactNode,\n forwardRef,\n useCallback,\n} from \"react\";\n\nimport vuuInputCss from \"./VuuInput.css\";\n\nconst classBase = \"vuuInput\";\n\nexport interface VuuInputProps<T extends VuuRowDataItemType = string>\n extends Omit<InputProps, \"validationStatus\"> {\n errorMessage?: ReactNode;\n onCommit: CommitHandler<HTMLInputElement, T | undefined>;\n type?: T;\n}\n\n/**\n * A variant of Salt Input that provides a commit callback prop,\n * TODO along with cancel behaviour ?\n */\nexport const VuuInput = forwardRef(function VuuInput<\n T extends VuuRowDataItemType = string,\n>(\n {\n className,\n errorMessage,\n id: idProp,\n onCommit,\n onKeyDown,\n type,\n ...props\n }: VuuInputProps<T>,\n forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-input\",\n css: vuuInputCss,\n window: targetWindow,\n });\n\n const id = useId(idProp);\n\n const commitValue = useCallback<CommitHandler>(\n (evt, value) => {\n if (type === \"number\") {\n const numericValue = parseFloat(value);\n if (isValidNumber(numericValue)) {\n onCommit(evt, numericValue as T, \"text-input\");\n } else {\n //TODO add validation logic\n throw Error(\"Invalid value\");\n }\n } else if (type === \"boolean\") {\n onCommit(evt, Boolean(value) as T, \"text-input\");\n } else {\n onCommit(evt, value as T, \"text-input\");\n }\n },\n [onCommit, type],\n );\n\n const handleKeyDown = useCallback<KeyboardEventHandler<HTMLInputElement>>(\n (evt) => {\n if (evt.key === \"Enter\") {\n evt.preventDefault();\n evt.stopPropagation();\n const { value } = evt.target as HTMLInputElement;\n commitValue(evt, value);\n }\n onKeyDown?.(evt);\n },\n [commitValue, onKeyDown],\n );\n\n const handleBlur = useCallback<FocusEventHandler<HTMLInputElement>>(\n (evt) => {\n const { value } = evt.target as HTMLInputElement;\n commitValue(evt, value);\n },\n [commitValue],\n );\n\n const endAdornment = errorMessage ? (\n <Tooltip content={errorMessage} status=\"error\">\n <span className={`${classBase}-errorIcon`} data-icon=\"error\" />\n </Tooltip>\n ) : undefined;\n\n return (\n <>\n <Input\n {...props}\n endAdornment={endAdornment}\n id={id}\n inputProps={{\n autoComplete: \"off\",\n ...props.inputProps,\n }}\n className={cx(classBase, className, {\n [`${classBase}-error`]: errorMessage,\n })}\n onBlur={handleBlur}\n ref={forwardedRef}\n onKeyDown={handleKeyDown}\n />\n </>\n );\n}) as <T extends VuuRowDataItemType = string>(\n props: VuuInputProps<T> & {\n ref?: ForwardedRef<HTMLDivElement>;\n },\n) => ReactElement<VuuInputProps<T>>;\n"],"names":["VuuInput"],"mappings":";;;;;;;;;
|
|
1
|
+
{"version":3,"file":"VuuInput.js","sources":["../../src/vuu-input/VuuInput.tsx"],"sourcesContent":["import { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport { CommitHandler, isValidNumber, useId } from \"@vuu-ui/vuu-utils\";\nimport { Input, InputProps, Tooltip } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n ChangeEventHandler,\n FocusEventHandler,\n ForwardedRef,\n KeyboardEventHandler,\n ReactElement,\n ReactNode,\n forwardRef,\n useCallback,\n} from \"react\";\n\nimport vuuInputCss from \"./VuuInput.css\";\n\nconst classBase = \"vuuInput\";\n\nexport interface VuuInputProps<T extends VuuRowDataItemType = string>\n extends Omit<InputProps, \"validationStatus\"> {\n commitWhenCleared?: boolean;\n errorMessage?: ReactNode;\n onCommit: CommitHandler<HTMLInputElement, T | undefined>;\n type?: T;\n}\n\n/**\n * A variant of Salt Input that provides a commit callback prop,\n * TODO along with cancel behaviour ?\n */\nexport const VuuInput = forwardRef(function VuuInput<\n T extends VuuRowDataItemType = string,\n>(\n {\n className,\n commitWhenCleared = false,\n errorMessage,\n id: idProp,\n onCommit,\n onKeyDown,\n type,\n ...props\n }: VuuInputProps<T>,\n forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-input\",\n css: vuuInputCss,\n window: targetWindow,\n });\n\n const id = useId(idProp);\n\n const commitValue = useCallback<CommitHandler>(\n (evt, value) => {\n if (type === \"number\") {\n const numericValue = parseFloat(value);\n if (isValidNumber(numericValue)) {\n onCommit(evt, numericValue as T, \"text-input\");\n } else {\n //TODO add validation logic\n throw Error(\"Invalid value\");\n }\n } else if (type === \"boolean\") {\n onCommit(evt, Boolean(value) as T, \"text-input\");\n } else {\n onCommit(evt, value as T, \"text-input\");\n }\n },\n [onCommit, type],\n );\n\n const handleChange = useCallback<ChangeEventHandler<HTMLInputElement>>(\n (evt) => {\n const value = evt.target.value;\n if (value.trim() === \"\" && commitWhenCleared) {\n onCommit?.(evt, value as T);\n }\n props.inputProps?.onChange?.(evt);\n },\n [commitWhenCleared, onCommit, props.inputProps],\n );\n\n const handleKeyDown = useCallback<KeyboardEventHandler<HTMLInputElement>>(\n (evt) => {\n if (evt.key === \"Enter\") {\n evt.preventDefault();\n evt.stopPropagation();\n const { value } = evt.target as HTMLInputElement;\n commitValue(evt, value);\n }\n onKeyDown?.(evt);\n },\n [commitValue, onKeyDown],\n );\n\n const handleBlur = useCallback<FocusEventHandler<HTMLInputElement>>(\n (evt) => {\n const { value } = evt.target as HTMLInputElement;\n commitValue(evt, value);\n },\n [commitValue],\n );\n\n const endAdornment = errorMessage ? (\n <Tooltip content={errorMessage} status=\"error\">\n <span className={`${classBase}-errorIcon`} data-icon=\"error\" />\n </Tooltip>\n ) : undefined;\n\n return (\n <>\n <Input\n {...props}\n endAdornment={endAdornment}\n id={id}\n inputProps={{\n autoComplete: \"off\",\n ...props.inputProps,\n onChange: handleChange,\n }}\n className={cx(classBase, className, {\n [`${classBase}-error`]: errorMessage,\n })}\n onBlur={handleBlur}\n ref={forwardedRef}\n onKeyDown={handleKeyDown}\n />\n </>\n );\n}) as <T extends VuuRowDataItemType = string>(\n props: VuuInputProps<T> & {\n ref?: ForwardedRef<HTMLDivElement>;\n },\n) => ReactElement<VuuInputProps<T>>;\n"],"names":["VuuInput"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.
|
|
2
|
+
"version": "0.9.0",
|
|
3
3
|
"description": "VUU UI Controls",
|
|
4
4
|
"author": "heswell",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"devDependencies": {
|
|
7
|
-
"@vuu-ui/vuu-data-types": "0.
|
|
8
|
-
"@vuu-ui/vuu-table-types": "0.
|
|
7
|
+
"@vuu-ui/vuu-data-types": "0.9.0",
|
|
8
|
+
"@vuu-ui/vuu-table-types": "0.9.0"
|
|
9
9
|
},
|
|
10
10
|
"dependencies": {
|
|
11
|
-
"@vuu-ui/vuu-data-react": "0.
|
|
12
|
-
"@vuu-ui/vuu-layout": "0.
|
|
13
|
-
"@vuu-ui/vuu-popups": "0.
|
|
14
|
-
"@vuu-ui/vuu-table": "0.
|
|
15
|
-
"@vuu-ui/vuu-utils": "0.
|
|
11
|
+
"@vuu-ui/vuu-data-react": "0.9.0",
|
|
12
|
+
"@vuu-ui/vuu-layout": "0.9.0",
|
|
13
|
+
"@vuu-ui/vuu-popups": "0.9.0",
|
|
14
|
+
"@vuu-ui/vuu-table": "0.9.0",
|
|
15
|
+
"@vuu-ui/vuu-utils": "0.9.0",
|
|
16
16
|
"@floating-ui/react": "^0.26.5",
|
|
17
17
|
"@salt-ds/core": "1.34.0",
|
|
18
18
|
"@salt-ds/icons": "1.12.1",
|
|
@@ -3,6 +3,7 @@ import { CommitHandler } from "@vuu-ui/vuu-utils";
|
|
|
3
3
|
import { InputProps } from "@salt-ds/core";
|
|
4
4
|
import { ForwardedRef, ReactElement, ReactNode } from "react";
|
|
5
5
|
export interface VuuInputProps<T extends VuuRowDataItemType = string> extends Omit<InputProps, "validationStatus"> {
|
|
6
|
+
commitWhenCleared?: boolean;
|
|
6
7
|
errorMessage?: ReactNode;
|
|
7
8
|
onCommit: CommitHandler<HTMLInputElement, T | undefined>;
|
|
8
9
|
type?: T;
|