@vuu-ui/vuu-ui-controls 0.8.76 → 0.8.78
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/cjs/expando-input/ExpandoInput.js +3 -3
- package/cjs/expando-input/ExpandoInput.js.map +1 -1
- package/cjs/vuu-input/VuuInput.js +5 -4
- package/cjs/vuu-input/VuuInput.js.map +1 -1
- package/esm/expando-input/ExpandoInput.js +3 -3
- package/esm/expando-input/ExpandoInput.js.map +1 -1
- package/esm/vuu-input/VuuInput.js +5 -4
- package/esm/vuu-input/VuuInput.js.map +1 -1
- package/package.json +7 -7
- package/types/vuu-input/VuuInput.d.ts +2 -1
|
@@ -12,7 +12,7 @@ const classBase = "vuuExpandoInput";
|
|
|
12
12
|
const noop = () => void 0;
|
|
13
13
|
const ExpandoInput = React.forwardRef(function ExpandoInput2({
|
|
14
14
|
className: classNameProp,
|
|
15
|
-
|
|
15
|
+
TooltipProps,
|
|
16
16
|
value,
|
|
17
17
|
inputProps,
|
|
18
18
|
onCommit = noop,
|
|
@@ -28,14 +28,14 @@ const ExpandoInput = React.forwardRef(function ExpandoInput2({
|
|
|
28
28
|
"div",
|
|
29
29
|
{
|
|
30
30
|
className: cx(classBase, classNameProp, {
|
|
31
|
-
[`${classBase}-error`]:
|
|
31
|
+
[`${classBase}-error`]: TooltipProps
|
|
32
32
|
}),
|
|
33
33
|
"data-text": value,
|
|
34
34
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
35
35
|
VuuInput.VuuInput,
|
|
36
36
|
{
|
|
37
37
|
...props,
|
|
38
|
-
|
|
38
|
+
TooltipProps,
|
|
39
39
|
inputProps: { ...inputProps, className: `${classBase}-input` },
|
|
40
40
|
onCommit,
|
|
41
41
|
ref: forwardedRef,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpandoInput.js","sources":["../../src/expando-input/ExpandoInput.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ForwardedRef, forwardRef } from \"react\";\nimport { VuuInput, VuuInputProps } from \"../vuu-input\";\n\nimport expandoInputCss from \"./ExpandoInput.css\";\n\nconst classBase = \"vuuExpandoInput\";\n\nconst noop = () => undefined;\n\nexport interface ExpandoInputProps extends Omit<VuuInputProps, \"onCommit\"> {\n onCommit?: VuuInputProps[\"onCommit\"];\n}\n\nexport const ExpandoInput = forwardRef(function ExpandoInput(\n {\n className: classNameProp,\n
|
|
1
|
+
{"version":3,"file":"ExpandoInput.js","sources":["../../src/expando-input/ExpandoInput.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ForwardedRef, forwardRef } from \"react\";\nimport { VuuInput, VuuInputProps } from \"../vuu-input\";\n\nimport expandoInputCss from \"./ExpandoInput.css\";\n\nconst classBase = \"vuuExpandoInput\";\n\nconst noop = () => undefined;\n\nexport interface ExpandoInputProps extends Omit<VuuInputProps, \"onCommit\"> {\n onCommit?: VuuInputProps[\"onCommit\"];\n}\n\nexport const ExpandoInput = forwardRef(function ExpandoInput(\n {\n className: classNameProp,\n TooltipProps,\n value,\n inputProps,\n onCommit = noop,\n ...props\n }: ExpandoInputProps,\n forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-expando-input\",\n css: expandoInputCss,\n window: targetWindow,\n });\n\n return (\n <div\n className={cx(classBase, classNameProp, {\n [`${classBase}-error`]: TooltipProps,\n })}\n data-text={value}\n >\n <VuuInput\n {...props}\n TooltipProps={TooltipProps}\n inputProps={{ ...inputProps, className: `${classBase}-input` }}\n onCommit={onCommit}\n ref={forwardedRef}\n style={{ padding: 0 }}\n textAlign=\"left\"\n value={value}\n variant=\"secondary\"\n />\n </div>\n );\n});\n"],"names":["forwardRef","ExpandoInput","useWindow","useComponentCssInjection","expandoInputCss","jsx","VuuInput"],"mappings":";;;;;;;;;;AAQA,MAAM,SAAY,GAAA,iBAAA,CAAA;AAElB,MAAM,OAAO,MAAM,KAAA,CAAA,CAAA;AAMN,MAAA,YAAA,GAAeA,gBAAW,CAAA,SAASC,aAC9C,CAAA;AAAA,EACE,SAAW,EAAA,aAAA;AAAA,EACX,YAAA;AAAA,EACA,KAAA;AAAA,EACA,UAAA;AAAA,EACA,QAAW,GAAA,IAAA;AAAA,EACX,GAAG,KAAA;AACL,CAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAC,cAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EACE,uBAAAC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,aAAe,EAAA;AAAA,QACtC,CAAC,CAAA,EAAG,SAAS,CAAA,MAAA,CAAQ,GAAG,YAAA;AAAA,OACzB,CAAA;AAAA,MACD,WAAW,EAAA,KAAA;AAAA,MAEX,QAAA,kBAAAA,cAAA;AAAA,QAACC,iBAAA;AAAA,QAAA;AAAA,UACE,GAAG,KAAA;AAAA,UACJ,YAAA;AAAA,UACA,YAAY,EAAE,GAAG,YAAY,SAAW,EAAA,CAAA,EAAG,SAAS,CAAS,MAAA,CAAA,EAAA;AAAA,UAC7D,QAAA;AAAA,UACA,GAAK,EAAA,YAAA;AAAA,UACL,KAAA,EAAO,EAAE,OAAA,EAAS,CAAE,EAAA;AAAA,UACpB,SAAU,EAAA,MAAA;AAAA,UACV,KAAA;AAAA,UACA,OAAQ,EAAA,WAAA;AAAA,SAAA;AAAA,OACV;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -16,11 +16,11 @@ const constantInputProps = {
|
|
|
16
16
|
};
|
|
17
17
|
const VuuInput = React.forwardRef(function VuuInput2({
|
|
18
18
|
className,
|
|
19
|
-
errorMessage,
|
|
20
19
|
id: idProp,
|
|
21
20
|
onCommit,
|
|
22
21
|
onKeyDown,
|
|
23
22
|
type,
|
|
23
|
+
TooltipProps,
|
|
24
24
|
...props
|
|
25
25
|
}, forwardedRef) {
|
|
26
26
|
const targetWindow = window.useWindow();
|
|
@@ -32,7 +32,8 @@ const VuuInput = React.forwardRef(function VuuInput2({
|
|
|
32
32
|
const id = vuuUtils.useId(idProp);
|
|
33
33
|
const { anchorProps, tooltipProps } = vuuPopups.useTooltip({
|
|
34
34
|
id,
|
|
35
|
-
|
|
35
|
+
placement: TooltipProps?.placement,
|
|
36
|
+
tooltipContent: TooltipProps?.tooltipContent
|
|
36
37
|
});
|
|
37
38
|
const commitValue = React.useCallback(
|
|
38
39
|
(evt, value) => {
|
|
@@ -70,7 +71,7 @@ const VuuInput = React.forwardRef(function VuuInput2({
|
|
|
70
71
|
},
|
|
71
72
|
[commitValue]
|
|
72
73
|
);
|
|
73
|
-
const endAdornment =
|
|
74
|
+
const endAdornment = TooltipProps?.tooltipContent ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
74
75
|
"span",
|
|
75
76
|
{
|
|
76
77
|
...anchorProps,
|
|
@@ -90,7 +91,7 @@ const VuuInput = React.forwardRef(function VuuInput2({
|
|
|
90
91
|
...props.inputProps
|
|
91
92
|
},
|
|
92
93
|
className: cx(classBase, className, {
|
|
93
|
-
[`${classBase}-error`]:
|
|
94
|
+
[`${classBase}-error`]: TooltipProps?.tooltipContent
|
|
94
95
|
}),
|
|
95
96
|
onBlur: handleBlur,
|
|
96
97
|
ref: forwardedRef,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VuuInput.js","sources":["../../src/vuu-input/VuuInput.tsx"],"sourcesContent":["import { Tooltip, useTooltip } from \"@vuu-ui/vuu-popups\";\nimport { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport { isValidNumber, useId } from \"@vuu-ui/vuu-utils\";\nimport { Input, InputProps } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n FocusEventHandler,\n ForwardedRef,\n forwardRef,\n KeyboardEventHandler,\n ReactElement,\n SyntheticEvent,\n useCallback,\n} from \"react\";\n\nimport vuuInputCss from \"./VuuInput.css\";\n\nconst classBase = \"vuuInput\";\n\nconst constantInputProps = {\n autoComplete: \"off\",\n};\n\nexport type Commithandler<T extends VuuRowDataItemType = string> = (\n evt: SyntheticEvent<HTMLInputElement>,\n value: T\n) => void;\nexport interface VuuInputProps<T extends VuuRowDataItemType = string>\n extends InputProps {\n
|
|
1
|
+
{"version":3,"file":"VuuInput.js","sources":["../../src/vuu-input/VuuInput.tsx"],"sourcesContent":["import { Tooltip, TooltipHookProps, useTooltip } from \"@vuu-ui/vuu-popups\";\nimport { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport { isValidNumber, useId } from \"@vuu-ui/vuu-utils\";\nimport { Input, InputProps } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n FocusEventHandler,\n ForwardedRef,\n forwardRef,\n KeyboardEventHandler,\n ReactElement,\n SyntheticEvent,\n useCallback,\n} from \"react\";\n\nimport vuuInputCss from \"./VuuInput.css\";\n\nconst classBase = \"vuuInput\";\n\nconst constantInputProps = {\n autoComplete: \"off\",\n};\n\nexport type Commithandler<T extends VuuRowDataItemType = string> = (\n evt: SyntheticEvent<HTMLInputElement>,\n value: T\n) => void;\nexport interface VuuInputProps<T extends VuuRowDataItemType = string>\n extends InputProps {\n onCommit: Commithandler<T>;\n type?: T;\n TooltipProps?: Pick<TooltipHookProps, \"placement\" | \"tooltipContent\">;\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 id: idProp,\n onCommit,\n onKeyDown,\n type,\n TooltipProps,\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 const { anchorProps, tooltipProps } = useTooltip({\n id,\n placement: TooltipProps?.placement,\n tooltipContent: TooltipProps?.tooltipContent,\n });\n\n const commitValue = useCallback<Commithandler<string>>(\n (evt, value) => {\n if (type === \"number\") {\n const numericValue = parseFloat(value);\n if (isValidNumber(numericValue)) {\n onCommit(evt, numericValue as T);\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);\n } else {\n onCommit(evt, value as T);\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 = TooltipProps?.tooltipContent ? (\n <span\n {...anchorProps}\n className={`${classBase}-errorIcon`}\n data-icon=\"error\"\n />\n ) : undefined;\n\n return (\n <>\n <Input\n {...props}\n endAdornment={endAdornment}\n id={id}\n inputProps={{\n ...constantInputProps,\n ...props.inputProps,\n }}\n className={cx(classBase, className, {\n [`${classBase}-error`]: TooltipProps?.tooltipContent,\n })}\n onBlur={handleBlur}\n ref={forwardedRef}\n onKeyDown={handleKeyDown}\n />\n {tooltipProps ? <Tooltip {...tooltipProps} status=\"error\" /> : null}\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","useTooltip","useCallback","isValidNumber","jsx","jsxs","Fragment","Input","Tooltip"],"mappings":"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"}
|
|
@@ -10,7 +10,7 @@ const classBase = "vuuExpandoInput";
|
|
|
10
10
|
const noop = () => void 0;
|
|
11
11
|
const ExpandoInput = forwardRef(function ExpandoInput2({
|
|
12
12
|
className: classNameProp,
|
|
13
|
-
|
|
13
|
+
TooltipProps,
|
|
14
14
|
value,
|
|
15
15
|
inputProps,
|
|
16
16
|
onCommit = noop,
|
|
@@ -26,14 +26,14 @@ const ExpandoInput = forwardRef(function ExpandoInput2({
|
|
|
26
26
|
"div",
|
|
27
27
|
{
|
|
28
28
|
className: cx(classBase, classNameProp, {
|
|
29
|
-
[`${classBase}-error`]:
|
|
29
|
+
[`${classBase}-error`]: TooltipProps
|
|
30
30
|
}),
|
|
31
31
|
"data-text": value,
|
|
32
32
|
children: /* @__PURE__ */ jsx(
|
|
33
33
|
VuuInput,
|
|
34
34
|
{
|
|
35
35
|
...props,
|
|
36
|
-
|
|
36
|
+
TooltipProps,
|
|
37
37
|
inputProps: { ...inputProps, className: `${classBase}-input` },
|
|
38
38
|
onCommit,
|
|
39
39
|
ref: forwardedRef,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpandoInput.js","sources":["../../src/expando-input/ExpandoInput.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ForwardedRef, forwardRef } from \"react\";\nimport { VuuInput, VuuInputProps } from \"../vuu-input\";\n\nimport expandoInputCss from \"./ExpandoInput.css\";\n\nconst classBase = \"vuuExpandoInput\";\n\nconst noop = () => undefined;\n\nexport interface ExpandoInputProps extends Omit<VuuInputProps, \"onCommit\"> {\n onCommit?: VuuInputProps[\"onCommit\"];\n}\n\nexport const ExpandoInput = forwardRef(function ExpandoInput(\n {\n className: classNameProp,\n
|
|
1
|
+
{"version":3,"file":"ExpandoInput.js","sources":["../../src/expando-input/ExpandoInput.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ForwardedRef, forwardRef } from \"react\";\nimport { VuuInput, VuuInputProps } from \"../vuu-input\";\n\nimport expandoInputCss from \"./ExpandoInput.css\";\n\nconst classBase = \"vuuExpandoInput\";\n\nconst noop = () => undefined;\n\nexport interface ExpandoInputProps extends Omit<VuuInputProps, \"onCommit\"> {\n onCommit?: VuuInputProps[\"onCommit\"];\n}\n\nexport const ExpandoInput = forwardRef(function ExpandoInput(\n {\n className: classNameProp,\n TooltipProps,\n value,\n inputProps,\n onCommit = noop,\n ...props\n }: ExpandoInputProps,\n forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-expando-input\",\n css: expandoInputCss,\n window: targetWindow,\n });\n\n return (\n <div\n className={cx(classBase, classNameProp, {\n [`${classBase}-error`]: TooltipProps,\n })}\n data-text={value}\n >\n <VuuInput\n {...props}\n TooltipProps={TooltipProps}\n inputProps={{ ...inputProps, className: `${classBase}-input` }}\n onCommit={onCommit}\n ref={forwardedRef}\n style={{ padding: 0 }}\n textAlign=\"left\"\n value={value}\n variant=\"secondary\"\n />\n </div>\n );\n});\n"],"names":["ExpandoInput"],"mappings":";;;;;;;;AAQA,MAAM,SAAY,GAAA,iBAAA,CAAA;AAElB,MAAM,OAAO,MAAM,KAAA,CAAA,CAAA;AAMN,MAAA,YAAA,GAAe,UAAW,CAAA,SAASA,aAC9C,CAAA;AAAA,EACE,SAAW,EAAA,aAAA;AAAA,EACX,YAAA;AAAA,EACA,KAAA;AAAA,EACA,UAAA;AAAA,EACA,QAAW,GAAA,IAAA;AAAA,EACX,GAAG,KAAA;AACL,CAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAA,eAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,aAAe,EAAA;AAAA,QACtC,CAAC,CAAA,EAAG,SAAS,CAAA,MAAA,CAAQ,GAAG,YAAA;AAAA,OACzB,CAAA;AAAA,MACD,WAAW,EAAA,KAAA;AAAA,MAEX,QAAA,kBAAA,GAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACE,GAAG,KAAA;AAAA,UACJ,YAAA;AAAA,UACA,YAAY,EAAE,GAAG,YAAY,SAAW,EAAA,CAAA,EAAG,SAAS,CAAS,MAAA,CAAA,EAAA;AAAA,UAC7D,QAAA;AAAA,UACA,GAAK,EAAA,YAAA;AAAA,UACL,KAAA,EAAO,EAAE,OAAA,EAAS,CAAE,EAAA;AAAA,UACpB,SAAU,EAAA,MAAA;AAAA,UACV,KAAA;AAAA,UACA,OAAQ,EAAA,WAAA;AAAA,SAAA;AAAA,OACV;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -14,11 +14,11 @@ const constantInputProps = {
|
|
|
14
14
|
};
|
|
15
15
|
const VuuInput = forwardRef(function VuuInput2({
|
|
16
16
|
className,
|
|
17
|
-
errorMessage,
|
|
18
17
|
id: idProp,
|
|
19
18
|
onCommit,
|
|
20
19
|
onKeyDown,
|
|
21
20
|
type,
|
|
21
|
+
TooltipProps,
|
|
22
22
|
...props
|
|
23
23
|
}, forwardedRef) {
|
|
24
24
|
const targetWindow = useWindow();
|
|
@@ -30,7 +30,8 @@ const VuuInput = forwardRef(function VuuInput2({
|
|
|
30
30
|
const id = useId(idProp);
|
|
31
31
|
const { anchorProps, tooltipProps } = useTooltip({
|
|
32
32
|
id,
|
|
33
|
-
|
|
33
|
+
placement: TooltipProps?.placement,
|
|
34
|
+
tooltipContent: TooltipProps?.tooltipContent
|
|
34
35
|
});
|
|
35
36
|
const commitValue = useCallback(
|
|
36
37
|
(evt, value) => {
|
|
@@ -68,7 +69,7 @@ const VuuInput = forwardRef(function VuuInput2({
|
|
|
68
69
|
},
|
|
69
70
|
[commitValue]
|
|
70
71
|
);
|
|
71
|
-
const endAdornment =
|
|
72
|
+
const endAdornment = TooltipProps?.tooltipContent ? /* @__PURE__ */ jsx(
|
|
72
73
|
"span",
|
|
73
74
|
{
|
|
74
75
|
...anchorProps,
|
|
@@ -88,7 +89,7 @@ const VuuInput = forwardRef(function VuuInput2({
|
|
|
88
89
|
...props.inputProps
|
|
89
90
|
},
|
|
90
91
|
className: cx(classBase, className, {
|
|
91
|
-
[`${classBase}-error`]:
|
|
92
|
+
[`${classBase}-error`]: TooltipProps?.tooltipContent
|
|
92
93
|
}),
|
|
93
94
|
onBlur: handleBlur,
|
|
94
95
|
ref: forwardedRef,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VuuInput.js","sources":["../../src/vuu-input/VuuInput.tsx"],"sourcesContent":["import { Tooltip, useTooltip } from \"@vuu-ui/vuu-popups\";\nimport { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport { isValidNumber, useId } from \"@vuu-ui/vuu-utils\";\nimport { Input, InputProps } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n FocusEventHandler,\n ForwardedRef,\n forwardRef,\n KeyboardEventHandler,\n ReactElement,\n SyntheticEvent,\n useCallback,\n} from \"react\";\n\nimport vuuInputCss from \"./VuuInput.css\";\n\nconst classBase = \"vuuInput\";\n\nconst constantInputProps = {\n autoComplete: \"off\",\n};\n\nexport type Commithandler<T extends VuuRowDataItemType = string> = (\n evt: SyntheticEvent<HTMLInputElement>,\n value: T\n) => void;\nexport interface VuuInputProps<T extends VuuRowDataItemType = string>\n extends InputProps {\n
|
|
1
|
+
{"version":3,"file":"VuuInput.js","sources":["../../src/vuu-input/VuuInput.tsx"],"sourcesContent":["import { Tooltip, TooltipHookProps, useTooltip } from \"@vuu-ui/vuu-popups\";\nimport { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport { isValidNumber, useId } from \"@vuu-ui/vuu-utils\";\nimport { Input, InputProps } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n FocusEventHandler,\n ForwardedRef,\n forwardRef,\n KeyboardEventHandler,\n ReactElement,\n SyntheticEvent,\n useCallback,\n} from \"react\";\n\nimport vuuInputCss from \"./VuuInput.css\";\n\nconst classBase = \"vuuInput\";\n\nconst constantInputProps = {\n autoComplete: \"off\",\n};\n\nexport type Commithandler<T extends VuuRowDataItemType = string> = (\n evt: SyntheticEvent<HTMLInputElement>,\n value: T\n) => void;\nexport interface VuuInputProps<T extends VuuRowDataItemType = string>\n extends InputProps {\n onCommit: Commithandler<T>;\n type?: T;\n TooltipProps?: Pick<TooltipHookProps, \"placement\" | \"tooltipContent\">;\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 id: idProp,\n onCommit,\n onKeyDown,\n type,\n TooltipProps,\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 const { anchorProps, tooltipProps } = useTooltip({\n id,\n placement: TooltipProps?.placement,\n tooltipContent: TooltipProps?.tooltipContent,\n });\n\n const commitValue = useCallback<Commithandler<string>>(\n (evt, value) => {\n if (type === \"number\") {\n const numericValue = parseFloat(value);\n if (isValidNumber(numericValue)) {\n onCommit(evt, numericValue as T);\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);\n } else {\n onCommit(evt, value as T);\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 = TooltipProps?.tooltipContent ? (\n <span\n {...anchorProps}\n className={`${classBase}-errorIcon`}\n data-icon=\"error\"\n />\n ) : undefined;\n\n return (\n <>\n <Input\n {...props}\n endAdornment={endAdornment}\n id={id}\n inputProps={{\n ...constantInputProps,\n ...props.inputProps,\n }}\n className={cx(classBase, className, {\n [`${classBase}-error`]: TooltipProps?.tooltipContent,\n })}\n onBlur={handleBlur}\n ref={forwardedRef}\n onKeyDown={handleKeyDown}\n />\n {tooltipProps ? <Tooltip {...tooltipProps} status=\"error\" /> : null}\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":";;;;;;;;;;AAmBA,MAAM,SAAY,GAAA,UAAA,CAAA;AAElB,MAAM,kBAAqB,GAAA;AAAA,EACzB,YAAc,EAAA,KAAA;AAChB,CAAA,CAAA;AAiBa,MAAA,QAAA,GAAW,UAAW,CAAA,SAASA,SAG1C,CAAA;AAAA,EACE,SAAA;AAAA,EACA,EAAI,EAAA,MAAA;AAAA,EACJ,QAAA;AAAA,EACA,SAAA;AAAA,EACA,IAAA;AAAA,EACA,YAAA;AAAA,EACA,GAAG,KAAA;AACL,CAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,WAAA;AAAA,IACR,GAAK,EAAA,WAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA,CAAA;AACvB,EAAA,MAAM,EAAE,WAAA,EAAa,YAAa,EAAA,GAAI,UAAW,CAAA;AAAA,IAC/C,EAAA;AAAA,IACA,WAAW,YAAc,EAAA,SAAA;AAAA,IACzB,gBAAgB,YAAc,EAAA,cAAA;AAAA,GAC/B,CAAA,CAAA;AAED,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,CAAC,KAAK,KAAU,KAAA;AACd,MAAA,IAAI,SAAS,QAAU,EAAA;AACrB,QAAM,MAAA,YAAA,GAAe,WAAW,KAAK,CAAA,CAAA;AACrC,QAAI,IAAA,aAAA,CAAc,YAAY,CAAG,EAAA;AAC/B,UAAA,QAAA,CAAS,KAAK,YAAiB,CAAA,CAAA;AAAA,SAC1B,MAAA;AAEL,UAAA,MAAM,MAAM,eAAe,CAAA,CAAA;AAAA,SAC7B;AAAA,OACF,MAAA,IAAW,SAAS,SAAW,EAAA;AAC7B,QAAS,QAAA,CAAA,GAAA,EAAK,OAAQ,CAAA,KAAK,CAAM,CAAA,CAAA;AAAA,OAC5B,MAAA;AACL,QAAA,QAAA,CAAS,KAAK,KAAU,CAAA,CAAA;AAAA,OAC1B;AAAA,KACF;AAAA,IACA,CAAC,UAAU,IAAI,CAAA;AAAA,GACjB,CAAA;AAEA,EAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,IACpB,CAAC,GAAQ,KAAA;AACP,MAAI,IAAA,GAAA,CAAI,QAAQ,OAAS,EAAA;AACvB,QAAA,GAAA,CAAI,cAAe,EAAA,CAAA;AACnB,QAAA,GAAA,CAAI,eAAgB,EAAA,CAAA;AACpB,QAAM,MAAA,EAAE,KAAM,EAAA,GAAI,GAAI,CAAA,MAAA,CAAA;AACtB,QAAA,WAAA,CAAY,KAAK,KAAK,CAAA,CAAA;AAAA,OACxB;AACA,MAAA,SAAA,GAAY,GAAG,CAAA,CAAA;AAAA,KACjB;AAAA,IACA,CAAC,aAAa,SAAS,CAAA;AAAA,GACzB,CAAA;AAEA,EAAA,MAAM,UAAa,GAAA,WAAA;AAAA,IACjB,CAAC,GAAQ,KAAA;AACP,MAAM,MAAA,EAAE,KAAM,EAAA,GAAI,GAAI,CAAA,MAAA,CAAA;AACtB,MAAA,WAAA,CAAY,KAAK,KAAK,CAAA,CAAA;AAAA,KACxB;AAAA,IACA,CAAC,WAAW,CAAA;AAAA,GACd,CAAA;AAEA,EAAM,MAAA,YAAA,GAAe,cAAc,cACjC,mBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACE,GAAG,WAAA;AAAA,MACJ,SAAA,EAAW,GAAG,SAAS,CAAA,UAAA,CAAA;AAAA,MACvB,WAAU,EAAA,OAAA;AAAA,KAAA;AAAA,GAEV,GAAA,KAAA,CAAA,CAAA;AAEJ,EAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACE,GAAG,KAAA;AAAA,QACJ,YAAA;AAAA,QACA,EAAA;AAAA,QACA,UAAY,EAAA;AAAA,UACV,GAAG,kBAAA;AAAA,UACH,GAAG,KAAM,CAAA,UAAA;AAAA,SACX;AAAA,QACA,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAW,EAAA;AAAA,UAClC,CAAC,CAAA,EAAG,SAAS,CAAA,MAAA,CAAQ,GAAG,YAAc,EAAA,cAAA;AAAA,SACvC,CAAA;AAAA,QACD,MAAQ,EAAA,UAAA;AAAA,QACR,GAAK,EAAA,YAAA;AAAA,QACL,SAAW,EAAA,aAAA;AAAA,OAAA;AAAA,KACb;AAAA,IACC,+BAAgB,GAAA,CAAA,OAAA,EAAA,EAAS,GAAG,YAAc,EAAA,MAAA,EAAO,SAAQ,CAAK,GAAA,IAAA;AAAA,GACjE,EAAA,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
package/package.json
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.8.
|
|
2
|
+
"version": "0.8.78",
|
|
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.
|
|
8
|
-
"@vuu-ui/vuu-table-types": "0.8.
|
|
7
|
+
"@vuu-ui/vuu-data-types": "0.8.78",
|
|
8
|
+
"@vuu-ui/vuu-table-types": "0.8.78"
|
|
9
9
|
},
|
|
10
10
|
"dependencies": {
|
|
11
|
-
"@vuu-ui/vuu-layout": "0.8.
|
|
12
|
-
"@vuu-ui/vuu-popups": "0.8.
|
|
13
|
-
"@vuu-ui/vuu-table": "0.8.
|
|
14
|
-
"@vuu-ui/vuu-utils": "0.8.
|
|
11
|
+
"@vuu-ui/vuu-layout": "0.8.78",
|
|
12
|
+
"@vuu-ui/vuu-popups": "0.8.78",
|
|
13
|
+
"@vuu-ui/vuu-table": "0.8.78",
|
|
14
|
+
"@vuu-ui/vuu-utils": "0.8.78",
|
|
15
15
|
"@floating-ui/react": "0.26.5",
|
|
16
16
|
"@salt-ds/core": "1.27.1",
|
|
17
17
|
"@salt-ds/icons": "1.9.1",
|
|
@@ -1,11 +1,12 @@
|
|
|
1
|
+
import { TooltipHookProps } from "@vuu-ui/vuu-popups";
|
|
1
2
|
import { VuuRowDataItemType } from "@vuu-ui/vuu-protocol-types";
|
|
2
3
|
import { InputProps } from "@salt-ds/core";
|
|
3
4
|
import { ForwardedRef, ReactElement, SyntheticEvent } from "react";
|
|
4
5
|
export type Commithandler<T extends VuuRowDataItemType = string> = (evt: SyntheticEvent<HTMLInputElement>, value: T) => void;
|
|
5
6
|
export interface VuuInputProps<T extends VuuRowDataItemType = string> extends InputProps {
|
|
6
|
-
errorMessage?: string;
|
|
7
7
|
onCommit: Commithandler<T>;
|
|
8
8
|
type?: T;
|
|
9
|
+
TooltipProps?: Pick<TooltipHookProps, "placement" | "tooltipContent">;
|
|
9
10
|
}
|
|
10
11
|
/**
|
|
11
12
|
* A variant of Salt Input that provides a commit callback prop,
|