@smwb/ui-react 2.1.1 → 2.1.2
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/dist/components/inputs/textField/textField.js +24 -24
- package/dist/components/inputs/textField/textField.js.map +1 -1
- package/dist/headless/components/inputs/textField/textField.js +24 -24
- package/dist/headless/components/inputs/textField/textField.js.map +1 -1
- package/dist/index.cjs +2 -2
- package/dist/index.cjs.map +1 -1
- package/dist/react-table/components/inputs/textField/textField.js +24 -24
- package/dist/react-table/components/inputs/textField/textField.js.map +1 -1
- package/package.json +1 -1
|
@@ -13,8 +13,8 @@ const ie = t.forwardRef(function(a, S) {
|
|
|
13
13
|
size: _ = "medium",
|
|
14
14
|
required: h,
|
|
15
15
|
className: y,
|
|
16
|
-
disabled:
|
|
17
|
-
value:
|
|
16
|
+
disabled: i,
|
|
17
|
+
value: s,
|
|
18
18
|
defaultValue: B,
|
|
19
19
|
onChange: u,
|
|
20
20
|
onFocus: f,
|
|
@@ -32,28 +32,28 @@ const ie = t.forwardRef(function(a, S) {
|
|
|
32
32
|
autoComplete: A,
|
|
33
33
|
inputMode: I,
|
|
34
34
|
...M
|
|
35
|
-
} = a, [p, x] = t.useState(!1), [W, j] = t.useState(!1), { current:
|
|
36
|
-
if (
|
|
35
|
+
} = a, [p, x] = t.useState(!1), [W, j] = t.useState(!1), { current: o } = t.useRef(s != null), n = t.useRef(null), H = K(S, n), L = (e) => {
|
|
36
|
+
if (i) {
|
|
37
37
|
e.stopPropagation();
|
|
38
38
|
return;
|
|
39
39
|
}
|
|
40
40
|
f == null || f(e), x(!0);
|
|
41
41
|
}, O = (e) => {
|
|
42
|
-
if (!
|
|
43
|
-
const
|
|
44
|
-
|
|
45
|
-
value:
|
|
42
|
+
if (!o) {
|
|
43
|
+
const r = e.target || n.current;
|
|
44
|
+
l({
|
|
45
|
+
value: r.value
|
|
46
46
|
});
|
|
47
47
|
}
|
|
48
48
|
c == null || c(e, a), x(!1);
|
|
49
|
-
},
|
|
50
|
-
const
|
|
51
|
-
j((g) => g ===
|
|
49
|
+
}, l = t.useCallback((e) => {
|
|
50
|
+
const r = !!Q(e);
|
|
51
|
+
j((g) => g === r ? g : r);
|
|
52
52
|
}, []), V = (e) => {
|
|
53
|
-
if (!
|
|
54
|
-
const
|
|
55
|
-
|
|
56
|
-
value:
|
|
53
|
+
if (!o) {
|
|
54
|
+
const r = e.target || n.current;
|
|
55
|
+
l({
|
|
56
|
+
value: r.value
|
|
57
57
|
});
|
|
58
58
|
}
|
|
59
59
|
u == null || u(e, a);
|
|
@@ -61,12 +61,12 @@ const ie = t.forwardRef(function(a, S) {
|
|
|
61
61
|
n.current && e.currentTarget === e.target && (e.preventDefault(), n.current.focus());
|
|
62
62
|
};
|
|
63
63
|
t.useEffect(() => {
|
|
64
|
-
|
|
65
|
-
}, [
|
|
66
|
-
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
}, [
|
|
64
|
+
i && p && x(!1);
|
|
65
|
+
}, [i, p]), t.useEffect(() => {
|
|
66
|
+
o || l(n.current);
|
|
67
|
+
}), J(() => {
|
|
68
|
+
o && l({ value: s });
|
|
69
|
+
}, [s, o, l]);
|
|
70
70
|
const G = C(
|
|
71
71
|
"smwb-text-field__input",
|
|
72
72
|
(!F || m) && "smwb-text-field__input--show-placeholder",
|
|
@@ -80,7 +80,7 @@ const ie = t.forwardRef(function(a, S) {
|
|
|
80
80
|
label: F,
|
|
81
81
|
helperText: T,
|
|
82
82
|
variant: v,
|
|
83
|
-
disabled:
|
|
83
|
+
disabled: i,
|
|
84
84
|
className: C(y, _ !== "medium" && `smwb-text-field_size-${_}`),
|
|
85
85
|
error: b,
|
|
86
86
|
fullWidth: z,
|
|
@@ -104,8 +104,8 @@ const ie = t.forwardRef(function(a, S) {
|
|
|
104
104
|
"aria-invalid": b || void 0,
|
|
105
105
|
"aria-required": h || void 0,
|
|
106
106
|
placeholder: q,
|
|
107
|
-
disabled:
|
|
108
|
-
value:
|
|
107
|
+
disabled: i,
|
|
108
|
+
value: s,
|
|
109
109
|
className: G,
|
|
110
110
|
ref: H,
|
|
111
111
|
onChange: V,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textField.js","sources":["../../../../../src/components/inputs/textField/textField.tsx"],"sourcesContent":["import React, { ChangeEventHandler } from \"react\";\nimport cn from \"clsx\";\nimport { useSafeLayoutEffect } from \"../../../hooks/useSafeLayoutEffect\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\nimport { isFilled } from \"./utils\";\nimport { TextFieldWrapper } from \"./textFieldWrapper\";\n\nexport interface TextFieldProps extends Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n \"onChange\" | \"onBlur\" | \"size\"\n> {\n label?: string;\n helperText?: React.ReactNode;\n variant?: \"outlined\" | \"filled\";\n size?: \"small\" | \"medium\" | \"large\";\n required?: boolean;\n disabled?: boolean;\n value?: string | number;\n className?: string;\n placeholder?: string;\n defaultValue?: string;\n error?: boolean;\n name?: string;\n type?: string;\n readOnly?: boolean;\n fullWidth?: boolean;\n onBlur?: (event: React.FocusEvent<HTMLInputElement>, data: TextFieldProps) => void;\n onChange?: (event: React.ChangeEvent<HTMLInputElement>, data: TextFieldProps) => void;\n startAdornment?: React.ReactNode;\n endAdornment?: React.ReactNode;\n id?: string;\n inline?: boolean;\n autoComplete?: string;\n}\n\nexport const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(function TextField(props, ref) {\n const {\n label,\n helperText,\n variant = \"outlined\",\n size = \"medium\",\n required,\n className,\n disabled,\n value,\n defaultValue,\n onChange: onChangeProp,\n onFocus: onFocusProp,\n onBlur: onBlurProp,\n error,\n name,\n type = \"text\",\n readOnly,\n placeholder,\n fullWidth,\n id,\n startAdornment,\n endAdornment,\n inline,\n autoComplete,\n inputMode,\n ...rest\n } = props;\n const [isFocused, setIsFocused] = React.useState<boolean>(false);\n const [isFilledState, setIsFilledState] = React.useState<boolean>(false);\n\n const { current: isControlled } = React.useRef<boolean>(value != null);\n const inputRef = React.useRef<HTMLInputElement>(null);\n const inputForkRef = useForkRef<HTMLInputElement>(ref, inputRef);\n\n const onFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n if (disabled) {\n event.stopPropagation();\n return;\n }\n\n onFocusProp?.(event);\n\n setIsFocused(true);\n };\n\n const onBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n if (!isControlled) {\n const element = event.target || inputRef.current;\n\n checkDirty({\n value: element.value,\n });\n }\n onBlurProp?.(event, props);\n setIsFocused(false);\n };\n\n const checkDirty = React.useCallback((obj: Parameters<typeof isFilled>[0]) => {\n const filled = Boolean(isFilled(obj));\n setIsFilledState((prev) => (prev === filled ? prev : filled));\n }, []);\n\n const onChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n if (!isControlled) {\n const element = event.target || inputRef.current;\n\n checkDirty({\n value: element.value,\n });\n }\n onChangeProp?.(event, props);\n };\n\n const onHolderMouseDown: React.MouseEventHandler<HTMLDivElement> = (event) => {\n if (inputRef.current && event.currentTarget === event.target) {\n event.preventDefault();\n inputRef.current.focus();\n }\n };\n\n React.useEffect(() => {\n if (disabled && isFocused) {\n setIsFocused(false);\n }\n }, [disabled, isFocused]);\n\n React.useEffect(() => {\n checkDirty(inputRef.current);\n }
|
|
1
|
+
{"version":3,"file":"textField.js","sources":["../../../../../src/components/inputs/textField/textField.tsx"],"sourcesContent":["import React, { ChangeEventHandler } from \"react\";\nimport cn from \"clsx\";\nimport { useSafeLayoutEffect } from \"../../../hooks/useSafeLayoutEffect\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\nimport { isFilled } from \"./utils\";\nimport { TextFieldWrapper } from \"./textFieldWrapper\";\n\nexport interface TextFieldProps extends Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n \"onChange\" | \"onBlur\" | \"size\"\n> {\n label?: string;\n helperText?: React.ReactNode;\n variant?: \"outlined\" | \"filled\";\n size?: \"small\" | \"medium\" | \"large\";\n required?: boolean;\n disabled?: boolean;\n value?: string | number;\n className?: string;\n placeholder?: string;\n defaultValue?: string;\n error?: boolean;\n name?: string;\n type?: string;\n readOnly?: boolean;\n fullWidth?: boolean;\n onBlur?: (event: React.FocusEvent<HTMLInputElement>, data: TextFieldProps) => void;\n onChange?: (event: React.ChangeEvent<HTMLInputElement>, data: TextFieldProps) => void;\n startAdornment?: React.ReactNode;\n endAdornment?: React.ReactNode;\n id?: string;\n inline?: boolean;\n autoComplete?: string;\n}\n\nexport const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(function TextField(props, ref) {\n const {\n label,\n helperText,\n variant = \"outlined\",\n size = \"medium\",\n required,\n className,\n disabled,\n value,\n defaultValue,\n onChange: onChangeProp,\n onFocus: onFocusProp,\n onBlur: onBlurProp,\n error,\n name,\n type = \"text\",\n readOnly,\n placeholder,\n fullWidth,\n id,\n startAdornment,\n endAdornment,\n inline,\n autoComplete,\n inputMode,\n ...rest\n } = props;\n const [isFocused, setIsFocused] = React.useState<boolean>(false);\n const [isFilledState, setIsFilledState] = React.useState<boolean>(false);\n\n const { current: isControlled } = React.useRef<boolean>(value != null);\n const inputRef = React.useRef<HTMLInputElement>(null);\n const inputForkRef = useForkRef<HTMLInputElement>(ref, inputRef);\n\n const onFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n if (disabled) {\n event.stopPropagation();\n return;\n }\n\n onFocusProp?.(event);\n\n setIsFocused(true);\n };\n\n const onBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n if (!isControlled) {\n const element = event.target || inputRef.current;\n\n checkDirty({\n value: element.value,\n });\n }\n onBlurProp?.(event, props);\n setIsFocused(false);\n };\n\n const checkDirty = React.useCallback((obj: Parameters<typeof isFilled>[0]) => {\n const filled = Boolean(isFilled(obj));\n setIsFilledState((prev) => (prev === filled ? prev : filled));\n }, []);\n\n const onChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n if (!isControlled) {\n const element = event.target || inputRef.current;\n\n checkDirty({\n value: element.value,\n });\n }\n onChangeProp?.(event, props);\n };\n\n const onHolderMouseDown: React.MouseEventHandler<HTMLDivElement> = (event) => {\n if (inputRef.current && event.currentTarget === event.target) {\n event.preventDefault();\n inputRef.current.focus();\n }\n };\n\n React.useEffect(() => {\n if (disabled && isFocused) {\n setIsFocused(false);\n }\n }, [disabled, isFocused]);\n\n // Uncontrolled inputs can receive a value imperatively — e.g. react-hook-form's\n // `register` sets the DOM value on `reset(...)` without firing onChange. Re-derive\n // the filled state from the DOM on every render (the form re-renders on reset) so\n // the floating label still rises. `checkDirty` is a no-op when nothing changed.\n React.useEffect(() => {\n if (!isControlled) {\n checkDirty(inputRef.current);\n }\n });\n\n useSafeLayoutEffect(() => {\n if (isControlled) {\n checkDirty({ value });\n }\n }, [value, isControlled, checkDirty]);\n\n const inputClasses = cn(\n \"smwb-text-field__input\",\n (!label || inline) && \"smwb-text-field__input--show-placeholder\",\n startAdornment && \"smwb-text-field__input--adornment-start\",\n endAdornment && \"smwb-text-field__input--adornment-end\",\n inline && \"smwb-text-field__input--inline\"\n );\n\n return (\n <TextFieldWrapper\n label={label}\n helperText={helperText}\n variant={variant}\n disabled={disabled}\n className={cn(className, size !== \"medium\" && `smwb-text-field_size-${size}`)}\n error={error}\n fullWidth={fullWidth}\n isFilledState={isFilledState}\n isFocused={isFocused}\n htmlFor={id}\n shrink={Boolean(startAdornment)}\n onHolderMouseDown={onHolderMouseDown}\n startAdornment={startAdornment}\n endAdornment={endAdornment}\n inline={inline}\n {...rest}\n >\n <input\n type={type}\n defaultValue={defaultValue}\n name={name}\n readOnly={readOnly}\n required={required}\n aria-invalid={error || undefined}\n aria-required={required || undefined}\n placeholder={placeholder}\n disabled={disabled}\n value={value}\n className={inputClasses}\n ref={inputForkRef}\n onChange={onChange}\n onFocus={onFocus}\n onBlur={onBlur}\n id={id}\n autoComplete={autoComplete}\n inputMode={inputMode}\n />\n </TextFieldWrapper>\n );\n});\n"],"names":["TextField","React","props","ref","label","helperText","variant","size","required","className","disabled","value","defaultValue","onChangeProp","onFocusProp","onBlurProp","error","name","type","readOnly","placeholder","fullWidth","id","startAdornment","endAdornment","inline","autoComplete","inputMode","rest","isFocused","setIsFocused","isFilledState","setIsFilledState","isControlled","inputRef","inputForkRef","useForkRef","onFocus","event","onBlur","element","checkDirty","obj","filled","isFilled","prev","onChange","onHolderMouseDown","useSafeLayoutEffect","inputClasses","cn","jsx","TextFieldWrapper"],"mappings":";;;;;;;AAmCO,MAAMA,KAAYC,EAAM,WAA6C,SAAmBC,GAAOC,GAAK;AACzG,QAAM;AAAA,IACJ,OAAAC;AAAA,IACA,YAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,MAAAC,IAAO;AAAA,IACP,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAUC;AAAA,IACV,SAASC;AAAA,IACT,QAAQC;AAAA,IACR,OAAAC;AAAA,IACA,MAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,UAAAC;AAAA,IACA,aAAAC;AAAA,IACA,WAAAC;AAAA,IACA,IAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,QAAAC;AAAA,IACA,cAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACD1B,GACE,CAAC2B,GAAWC,CAAY,IAAI7B,EAAM,SAAkB,EAAK,GACzD,CAAC8B,GAAeC,CAAgB,IAAI/B,EAAM,SAAkB,EAAK,GAEjE,EAAE,SAASgC,EAAA,IAAiBhC,EAAM,OAAgBU,KAAS,IAAI,GAC/DuB,IAAWjC,EAAM,OAAyB,IAAI,GAC9CkC,IAAeC,EAA6BjC,GAAK+B,CAAQ,GAEzDG,IAAU,CAACC,MAA8C;AAC7D,QAAI5B,GAAU;AACZ,MAAA4B,EAAM,gBAAA;AACN;AAAA,IACF;AAEA,IAAAxB,KAAA,QAAAA,EAAcwB,IAEdR,EAAa,EAAI;AAAA,EACnB,GAEMS,IAAS,CAACD,MAA8C;AAC5D,QAAI,CAACL,GAAc;AACjB,YAAMO,IAAUF,EAAM,UAAUJ,EAAS;AAEzC,MAAAO,EAAW;AAAA,QACT,OAAOD,EAAQ;AAAA,MAAA,CAChB;AAAA,IACH;AACA,IAAAzB,KAAA,QAAAA,EAAauB,GAAOpC,IACpB4B,EAAa,EAAK;AAAA,EACpB,GAEMW,IAAaxC,EAAM,YAAY,CAACyC,MAAwC;AAC5E,UAAMC,IAAS,EAAQC,EAASF,CAAG;AACnC,IAAAV,EAAiB,CAACa,MAAUA,MAASF,IAASE,IAAOF,CAAO;AAAA,EAC9D,GAAG,CAAA,CAAE,GAECG,IAAiD,CAACR,MAAU;AAChE,QAAI,CAACL,GAAc;AACjB,YAAMO,IAAUF,EAAM,UAAUJ,EAAS;AAEzC,MAAAO,EAAW;AAAA,QACT,OAAOD,EAAQ;AAAA,MAAA,CAChB;AAAA,IACH;AACA,IAAA3B,KAAA,QAAAA,EAAeyB,GAAOpC;AAAA,EACxB,GAEM6C,IAA6D,CAACT,MAAU;AAC5E,IAAIJ,EAAS,WAAWI,EAAM,kBAAkBA,EAAM,WACpDA,EAAM,eAAA,GACNJ,EAAS,QAAQ,MAAA;AAAA,EAErB;AAEA,EAAAjC,EAAM,UAAU,MAAM;AACpB,IAAIS,KAAYmB,KACdC,EAAa,EAAK;AAAA,EAEtB,GAAG,CAACpB,GAAUmB,CAAS,CAAC,GAMxB5B,EAAM,UAAU,MAAM;AACpB,IAAKgC,KACHQ,EAAWP,EAAS,OAAO;AAAA,EAE/B,CAAC,GAEDc,EAAoB,MAAM;AACxB,IAAIf,KACFQ,EAAW,EAAE,OAAA9B,GAAO;AAAA,EAExB,GAAG,CAACA,GAAOsB,GAAcQ,CAAU,CAAC;AAEpC,QAAMQ,IAAeC;AAAA,IACnB;AAAA,KACC,CAAC9C,KAASqB,MAAW;AAAA,IACtBF,KAAkB;AAAA,IAClBC,KAAgB;AAAA,IAChBC,KAAU;AAAA,EAAA;AAGZ,SACE,gBAAA0B;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAAhD;AAAA,MACA,YAAAC;AAAA,MACA,SAAAC;AAAA,MACA,UAAAI;AAAA,MACA,WAAWwC,EAAGzC,GAAWF,MAAS,YAAY,wBAAwBA,CAAI,EAAE;AAAA,MAC5E,OAAAS;AAAA,MACA,WAAAK;AAAA,MACA,eAAAU;AAAA,MACA,WAAAF;AAAA,MACA,SAASP;AAAA,MACT,QAAQ,EAAQC;AAAA,MAChB,mBAAAwB;AAAA,MACA,gBAAAxB;AAAA,MACA,cAAAC;AAAA,MACA,QAAAC;AAAA,MACC,GAAGG;AAAA,MAEJ,UAAA,gBAAAuB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAAjC;AAAA,UACA,cAAAN;AAAA,UACA,MAAAK;AAAA,UACA,UAAAE;AAAA,UACA,UAAAX;AAAA,UACA,gBAAcQ,KAAS;AAAA,UACvB,iBAAeR,KAAY;AAAA,UAC3B,aAAAY;AAAA,UACA,UAAAV;AAAA,UACA,OAAAC;AAAA,UACA,WAAWsC;AAAA,UACX,KAAKd;AAAA,UACL,UAAAW;AAAA,UACA,SAAAT;AAAA,UACA,QAAAE;AAAA,UACA,IAAAjB;AAAA,UACA,cAAAI;AAAA,UACA,WAAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN,CAAC;"}
|