@elliemae/ds-form-input-text 3.12.0-rc.1 → 3.12.0-rc.3
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/cjs/DSInputText.js +40 -33
- package/dist/cjs/DSInputText.js.map +1 -1
- package/dist/cjs/config/useInputText.js +2 -1
- package/dist/cjs/config/useInputText.js.map +2 -2
- package/dist/cjs/exported-related/theming.js +1 -1
- package/dist/cjs/exported-related/theming.js.map +1 -1
- package/dist/esm/DSInputText.js +40 -33
- package/dist/esm/DSInputText.js.map +1 -1
- package/dist/esm/config/useInputText.js +2 -1
- package/dist/esm/config/useInputText.js.map +2 -2
- package/dist/esm/exported-related/theming.js +1 -1
- package/dist/esm/exported-related/theming.js.map +1 -1
- package/package.json +7 -7
package/dist/cjs/DSInputText.js
CHANGED
|
@@ -53,39 +53,46 @@ const DSInputText = (props) => {
|
|
|
53
53
|
onClear();
|
|
54
54
|
inputRef?.current?.focus();
|
|
55
55
|
}, [onClear]);
|
|
56
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
56
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
57
|
+
import_components.StyledInputWrapper,
|
|
58
|
+
{
|
|
59
|
+
className,
|
|
60
|
+
cols: shouldDisplayClearButton ? ["auto", "min-content"] : ["auto"],
|
|
61
|
+
isDisabled: disabled,
|
|
62
|
+
isReadOnly: readOnly,
|
|
63
|
+
hasError,
|
|
64
|
+
hasFocus,
|
|
65
|
+
inputSize,
|
|
66
|
+
...xstyledProps,
|
|
67
|
+
children: [
|
|
68
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
69
|
+
import_components.StyledInput,
|
|
70
|
+
{
|
|
71
|
+
"data-testid": import_data_test_ids.DSInputTextDataTestIds.INPUT,
|
|
72
|
+
disabled,
|
|
73
|
+
placeholder,
|
|
74
|
+
readOnly,
|
|
75
|
+
ref: (0, import_ds_utilities.mergeRefs)(innerRef, inputRef),
|
|
76
|
+
value,
|
|
77
|
+
"aria-describedby": id !== void 0 ? `${id}_feedback_message` : void 0,
|
|
78
|
+
id,
|
|
79
|
+
...handlers,
|
|
80
|
+
...otherGlobalAttributes
|
|
81
|
+
}
|
|
82
|
+
),
|
|
83
|
+
shouldDisplayClearButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
84
|
+
import_components.StyledClearButton,
|
|
85
|
+
{
|
|
86
|
+
"aria-label": "Clear input value",
|
|
87
|
+
buttonType: "icon",
|
|
88
|
+
"data-testid": import_data_test_ids.DSInputTextDataTestIds.CLEAR_BUTTON,
|
|
89
|
+
onClick: handleClear,
|
|
90
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.CloseMedium, { color: import_ds_icon.DSIconColors.PRIMARY })
|
|
91
|
+
}
|
|
92
|
+
)
|
|
93
|
+
]
|
|
94
|
+
}
|
|
95
|
+
);
|
|
89
96
|
};
|
|
90
97
|
DSInputText.propTypes = import_react_desc_prop_types.DSInputTextPropTypes;
|
|
91
98
|
DSInputText.displayName = "DSInputText";
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSInputText.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React, { useCallback, useRef } from 'react';\nimport { CloseMedium } from '@elliemae/ds-icons';\nimport { DSIconColors } from '@elliemae/ds-icon';\nimport { describe, mergeRefs } from '@elliemae/ds-utilities';\nimport { useInputText } from './config/useInputText';\nimport { DSInputTextDataTestIds } from './exported-related/data-test-ids';\nimport type { DSInputTextT } from './react-desc-prop-types';\nimport { DSInputTextPropTypes } from './react-desc-prop-types';\nimport { StyledClearButton, StyledInput, StyledInputWrapper } from './styled/components';\n\nexport const DSInputText: React.ComponentType<DSInputTextT.Props> = (props) => {\n const {\n globalAttributes: { className, id, ...otherGlobalAttributes },\n hasFocus,\n handlers,\n propsWithDefault,\n xstyledProps,\n } = useInputText(props);\n\n const { clearable, disabled, hasError, innerRef, placeholder, readOnly, inputSize, onClear, value } =\n propsWithDefault;\n\n const inputRef = useRef<HTMLInputElement>(null);\n const shouldDisplayClearButton = clearable && !disabled && value !== '';\n\n const handleClear = useCallback(() => {\n onClear();\n inputRef?.current?.focus();\n }, [onClear]);\n\n return (\n <StyledInputWrapper\n className={className}\n cols={shouldDisplayClearButton ? ['auto', 'min-content'] : ['auto']}\n isDisabled={disabled}\n isReadOnly={readOnly}\n hasError={hasError}\n hasFocus={hasFocus}\n inputSize={inputSize}\n {...xstyledProps}\n >\n <StyledInput\n data-testid={DSInputTextDataTestIds.INPUT}\n disabled={disabled}\n placeholder={placeholder}\n readOnly={readOnly}\n ref={mergeRefs(innerRef, inputRef)}\n value={value}\n aria-describedby={id !== undefined ? `${id}_feedback_message` : undefined}\n id={id}\n {...handlers}\n {...otherGlobalAttributes}\n />\n {shouldDisplayClearButton && (\n <StyledClearButton\n aria-label=\"Clear input value\"\n buttonType=\"icon\"\n data-testid={DSInputTextDataTestIds.CLEAR_BUTTON}\n onClick={handleClear}\n >\n <CloseMedium color={DSIconColors.PRIMARY} />\n </StyledClearButton>\n )}\n </StyledInputWrapper>\n );\n};\n\nDSInputText.propTypes = DSInputTextPropTypes;\nDSInputText.displayName = 'DSInputText';\nexport const DSInputTextWithSchema = describe(DSInputText);\nDSInputTextWithSchema.propTypes = DSInputTextPropTypes;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+BnB;AA/BJ,mBAA2C;AAC3C,sBAA4B;AAC5B,qBAA6B;AAC7B,0BAAoC;AACpC,0BAA6B;AAC7B,2BAAuC;AAEvC,mCAAqC;AACrC,wBAAmE;AAE5D,MAAM,cAAuD,CAAC,UAAU;AAC7E,QAAM;AAAA,IACJ,kBAAkB,EAAE,WAAW,OAAO,sBAAsB;AAAA,IAC5D;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,kCAAa,KAAK;AAEtB,QAAM,EAAE,WAAW,UAAU,UAAU,UAAU,aAAa,UAAU,WAAW,SAAS,MAAM,IAChG;AAEF,QAAM,eAAW,qBAAyB,IAAI;AAC9C,QAAM,2BAA2B,aAAa,CAAC,YAAY,UAAU;AAErE,QAAM,kBAAc,0BAAY,MAAM;AACpC,YAAQ;AACR,cAAU,SAAS,MAAM;AAAA,EAC3B,GAAG,CAAC,OAAO,CAAC;AAEZ,SACE,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+BnB;AA/BJ,mBAA2C;AAC3C,sBAA4B;AAC5B,qBAA6B;AAC7B,0BAAoC;AACpC,0BAA6B;AAC7B,2BAAuC;AAEvC,mCAAqC;AACrC,wBAAmE;AAE5D,MAAM,cAAuD,CAAC,UAAU;AAC7E,QAAM;AAAA,IACJ,kBAAkB,EAAE,WAAW,OAAO,sBAAsB;AAAA,IAC5D;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,kCAAa,KAAK;AAEtB,QAAM,EAAE,WAAW,UAAU,UAAU,UAAU,aAAa,UAAU,WAAW,SAAS,MAAM,IAChG;AAEF,QAAM,eAAW,qBAAyB,IAAI;AAC9C,QAAM,2BAA2B,aAAa,CAAC,YAAY,UAAU;AAErE,QAAM,kBAAc,0BAAY,MAAM;AACpC,YAAQ;AACR,cAAU,SAAS,MAAM;AAAA,EAC3B,GAAG,CAAC,OAAO,CAAC;AAEZ,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAM,2BAA2B,CAAC,QAAQ,aAAa,IAAI,CAAC,MAAM;AAAA,MAClE,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,eAAa,4CAAuB;AAAA,YACpC;AAAA,YACA;AAAA,YACA;AAAA,YACA,SAAK,+BAAU,UAAU,QAAQ;AAAA,YACjC;AAAA,YACA,oBAAkB,OAAO,SAAY,GAAG,wBAAwB;AAAA,YAChE;AAAA,YACC,GAAG;AAAA,YACH,GAAG;AAAA;AAAA,QACN;AAAA,QACC,4BACC;AAAA,UAAC;AAAA;AAAA,YACC,cAAW;AAAA,YACX,YAAW;AAAA,YACX,eAAa,4CAAuB;AAAA,YACpC,SAAS;AAAA,YAET,sDAAC,+BAAY,OAAO,4BAAa,SAAS;AAAA;AAAA,QAC5C;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,YAAY,YAAY;AACxB,YAAY,cAAc;AACnB,MAAM,4BAAwB,8BAAS,WAAW;AACzD,sBAAsB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -29,11 +29,12 @@ __export(useInputText_exports, {
|
|
|
29
29
|
module.exports = __toCommonJS(useInputText_exports);
|
|
30
30
|
var React = __toESM(require("react"));
|
|
31
31
|
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
32
|
+
var import_exported_related = require("../exported-related");
|
|
32
33
|
var import_react = require("react");
|
|
33
34
|
var import_react_desc_prop_types = require("../react-desc-prop-types");
|
|
34
35
|
const useInputText = (props) => {
|
|
35
36
|
const propsWithDefault = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
|
|
36
|
-
(0, import_ds_utilities.useValidateTypescriptPropTypes)(props, import_react_desc_prop_types.DSInputTextPropTypes);
|
|
37
|
+
(0, import_ds_utilities.useValidateTypescriptPropTypes)(props, import_react_desc_prop_types.DSInputTextPropTypes, import_exported_related.DSInputTextName);
|
|
37
38
|
const { onValueChange } = propsWithDefault;
|
|
38
39
|
const [hasFocus, setHasFocus] = (0, import_react.useState)(false);
|
|
39
40
|
const handleOnChange = (0, import_react.useCallback)(
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/config/useInputText.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import {\n useGetGlobalAttributes,\n useGetXstyledProps,\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n} from '@elliemae/ds-utilities';\nimport type React from 'react';\nimport { useCallback, useMemo, useState } from 'react';\nimport type { DSInputTextT } from '../react-desc-prop-types';\nimport { defaultProps, DSInputTextPropTypes } from '../react-desc-prop-types';\n\nexport const useInputText = (props: DSInputTextT.Props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<Required<DSInputTextT.IProps>>(props, defaultProps);\n\n useValidateTypescriptPropTypes(props, DSInputTextPropTypes);\n\n const { onValueChange } = propsWithDefault;\n\n // =============================================================================\n // INTERNAL STATE\n // =============================================================================\n const [hasFocus, setHasFocus] = useState(false);\n\n // ===========================================================================\n // INTERNAL HANDLERS\n // ===========================================================================\n const handleOnChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(\n (e) => {\n onValueChange(e.target.value, e);\n },\n [onValueChange],\n );\n\n const handleOnFocus: React.FocusEventHandler<HTMLInputElement> = useCallback(() => {\n setHasFocus(true);\n }, []);\n\n const handleOnBlur: React.FocusEventHandler<HTMLInputElement> = useCallback(() => {\n setHasFocus(false);\n }, []);\n\n // =============================================================================\n // GLOBAL ATTRIBUTES & XSTYLED PROPS\n // =============================================================================\n const globalAttributes = useGetGlobalAttributes(propsWithDefault, {\n onChange: handleOnChange,\n onFocus: handleOnFocus,\n onBlur: handleOnBlur,\n });\n\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n\n return useMemo(\n () => ({\n globalAttributes,\n hasFocus,\n handlers: {\n onChange: handleOnChange,\n onFocus: handleOnFocus,\n onBlur: handleOnBlur,\n },\n propsWithDefault,\n xstyledProps,\n }),\n [globalAttributes, handleOnBlur, handleOnChange, handleOnFocus, hasFocus, propsWithDefault, xstyledProps],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAKO;
|
|
4
|
+
"sourcesContent": ["import {\n useGetGlobalAttributes,\n useGetXstyledProps,\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n} from '@elliemae/ds-utilities';\nimport { DSInputTextName } from '../exported-related';\nimport type React from 'react';\nimport { useCallback, useMemo, useState } from 'react';\nimport type { DSInputTextT } from '../react-desc-prop-types';\nimport { defaultProps, DSInputTextPropTypes } from '../react-desc-prop-types';\n\nexport const useInputText = (props: DSInputTextT.Props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<Required<DSInputTextT.IProps>>(props, defaultProps);\n\n useValidateTypescriptPropTypes(props, DSInputTextPropTypes, DSInputTextName);\n\n const { onValueChange } = propsWithDefault;\n\n // =============================================================================\n // INTERNAL STATE\n // =============================================================================\n const [hasFocus, setHasFocus] = useState(false);\n\n // ===========================================================================\n // INTERNAL HANDLERS\n // ===========================================================================\n const handleOnChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(\n (e) => {\n onValueChange(e.target.value, e);\n },\n [onValueChange],\n );\n\n const handleOnFocus: React.FocusEventHandler<HTMLInputElement> = useCallback(() => {\n setHasFocus(true);\n }, []);\n\n const handleOnBlur: React.FocusEventHandler<HTMLInputElement> = useCallback(() => {\n setHasFocus(false);\n }, []);\n\n // =============================================================================\n // GLOBAL ATTRIBUTES & XSTYLED PROPS\n // =============================================================================\n const globalAttributes = useGetGlobalAttributes(propsWithDefault, {\n onChange: handleOnChange,\n onFocus: handleOnFocus,\n onBlur: handleOnBlur,\n });\n\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n\n return useMemo(\n () => ({\n globalAttributes,\n hasFocus,\n handlers: {\n onChange: handleOnChange,\n onFocus: handleOnFocus,\n onBlur: handleOnBlur,\n },\n propsWithDefault,\n xstyledProps,\n }),\n [globalAttributes, handleOnBlur, handleOnChange, handleOnFocus, hasFocus, propsWithDefault, xstyledProps],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAKO;AACP,8BAAgC;AAEhC,mBAA+C;AAE/C,mCAAmD;AAE5C,MAAM,eAAe,CAAC,UAA8B;AACzD,QAAM,uBAAmB,kDAA4D,OAAO,yCAAY;AAExG,0DAA+B,OAAO,mDAAsB,uCAAe;AAE3E,QAAM,EAAE,cAAc,IAAI;AAK1B,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,KAAK;AAK9C,QAAM,qBAA6D;AAAA,IACjE,CAAC,MAAM;AACL,oBAAc,EAAE,OAAO,OAAO,CAAC;AAAA,IACjC;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AAEA,QAAM,oBAA2D,0BAAY,MAAM;AACjF,gBAAY,IAAI;AAAA,EAClB,GAAG,CAAC,CAAC;AAEL,QAAM,mBAA0D,0BAAY,MAAM;AAChF,gBAAY,KAAK;AAAA,EACnB,GAAG,CAAC,CAAC;AAKL,QAAM,uBAAmB,4CAAuB,kBAAkB;AAAA,IAChE,UAAU;AAAA,IACV,SAAS;AAAA,IACT,QAAQ;AAAA,EACV,CAAC;AAED,QAAM,mBAAe,wCAAmB,gBAAgB;AAExD,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,UAAU;AAAA,QACR,UAAU;AAAA,QACV,SAAS;AAAA,QACT,QAAQ;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,cAAc,gBAAgB,eAAe,UAAU,kBAAkB,YAAY;AAAA,EAC1G;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -29,7 +29,7 @@ __export(theming_exports, {
|
|
|
29
29
|
});
|
|
30
30
|
module.exports = __toCommonJS(theming_exports);
|
|
31
31
|
var React = __toESM(require("react"));
|
|
32
|
-
const DSInputTextName = "
|
|
32
|
+
const DSInputTextName = "DSInputText";
|
|
33
33
|
const DSInputTextSlots = {
|
|
34
34
|
INPUT_WRAPPER: "root",
|
|
35
35
|
INPUT: "input",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/exported-related/theming.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export const DSInputTextName = '
|
|
4
|
+
"sourcesContent": ["export const DSInputTextName = 'DSInputText';\n\nexport const DSInputTextSlots = {\n INPUT_WRAPPER: 'root',\n INPUT: 'input',\n CLEAR_BUTTON: 'input-clear-button',\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,kBAAkB;AAExB,MAAM,mBAAmB;AAAA,EAC9B,eAAe;AAAA,EACf,OAAO;AAAA,EACP,cAAc;AAChB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/DSInputText.js
CHANGED
|
@@ -23,39 +23,46 @@ const DSInputText = (props) => {
|
|
|
23
23
|
onClear();
|
|
24
24
|
inputRef?.current?.focus();
|
|
25
25
|
}, [onClear]);
|
|
26
|
-
return /* @__PURE__ */ jsxs(
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
26
|
+
return /* @__PURE__ */ jsxs(
|
|
27
|
+
StyledInputWrapper,
|
|
28
|
+
{
|
|
29
|
+
className,
|
|
30
|
+
cols: shouldDisplayClearButton ? ["auto", "min-content"] : ["auto"],
|
|
31
|
+
isDisabled: disabled,
|
|
32
|
+
isReadOnly: readOnly,
|
|
33
|
+
hasError,
|
|
34
|
+
hasFocus,
|
|
35
|
+
inputSize,
|
|
36
|
+
...xstyledProps,
|
|
37
|
+
children: [
|
|
38
|
+
/* @__PURE__ */ jsx(
|
|
39
|
+
StyledInput,
|
|
40
|
+
{
|
|
41
|
+
"data-testid": DSInputTextDataTestIds.INPUT,
|
|
42
|
+
disabled,
|
|
43
|
+
placeholder,
|
|
44
|
+
readOnly,
|
|
45
|
+
ref: mergeRefs(innerRef, inputRef),
|
|
46
|
+
value,
|
|
47
|
+
"aria-describedby": id !== void 0 ? `${id}_feedback_message` : void 0,
|
|
48
|
+
id,
|
|
49
|
+
...handlers,
|
|
50
|
+
...otherGlobalAttributes
|
|
51
|
+
}
|
|
52
|
+
),
|
|
53
|
+
shouldDisplayClearButton && /* @__PURE__ */ jsx(
|
|
54
|
+
StyledClearButton,
|
|
55
|
+
{
|
|
56
|
+
"aria-label": "Clear input value",
|
|
57
|
+
buttonType: "icon",
|
|
58
|
+
"data-testid": DSInputTextDataTestIds.CLEAR_BUTTON,
|
|
59
|
+
onClick: handleClear,
|
|
60
|
+
children: /* @__PURE__ */ jsx(CloseMedium, { color: DSIconColors.PRIMARY })
|
|
61
|
+
}
|
|
62
|
+
)
|
|
63
|
+
]
|
|
64
|
+
}
|
|
65
|
+
);
|
|
59
66
|
};
|
|
60
67
|
DSInputText.propTypes = DSInputTextPropTypes;
|
|
61
68
|
DSInputText.displayName = "DSInputText";
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSInputText.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useRef } from 'react';\nimport { CloseMedium } from '@elliemae/ds-icons';\nimport { DSIconColors } from '@elliemae/ds-icon';\nimport { describe, mergeRefs } from '@elliemae/ds-utilities';\nimport { useInputText } from './config/useInputText';\nimport { DSInputTextDataTestIds } from './exported-related/data-test-ids';\nimport type { DSInputTextT } from './react-desc-prop-types';\nimport { DSInputTextPropTypes } from './react-desc-prop-types';\nimport { StyledClearButton, StyledInput, StyledInputWrapper } from './styled/components';\n\nexport const DSInputText: React.ComponentType<DSInputTextT.Props> = (props) => {\n const {\n globalAttributes: { className, id, ...otherGlobalAttributes },\n hasFocus,\n handlers,\n propsWithDefault,\n xstyledProps,\n } = useInputText(props);\n\n const { clearable, disabled, hasError, innerRef, placeholder, readOnly, inputSize, onClear, value } =\n propsWithDefault;\n\n const inputRef = useRef<HTMLInputElement>(null);\n const shouldDisplayClearButton = clearable && !disabled && value !== '';\n\n const handleClear = useCallback(() => {\n onClear();\n inputRef?.current?.focus();\n }, [onClear]);\n\n return (\n <StyledInputWrapper\n className={className}\n cols={shouldDisplayClearButton ? ['auto', 'min-content'] : ['auto']}\n isDisabled={disabled}\n isReadOnly={readOnly}\n hasError={hasError}\n hasFocus={hasFocus}\n inputSize={inputSize}\n {...xstyledProps}\n >\n <StyledInput\n data-testid={DSInputTextDataTestIds.INPUT}\n disabled={disabled}\n placeholder={placeholder}\n readOnly={readOnly}\n ref={mergeRefs(innerRef, inputRef)}\n value={value}\n aria-describedby={id !== undefined ? `${id}_feedback_message` : undefined}\n id={id}\n {...handlers}\n {...otherGlobalAttributes}\n />\n {shouldDisplayClearButton && (\n <StyledClearButton\n aria-label=\"Clear input value\"\n buttonType=\"icon\"\n data-testid={DSInputTextDataTestIds.CLEAR_BUTTON}\n onClick={handleClear}\n >\n <CloseMedium color={DSIconColors.PRIMARY} />\n </StyledClearButton>\n )}\n </StyledInputWrapper>\n );\n};\n\nDSInputText.propTypes = DSInputTextPropTypes;\nDSInputText.displayName = 'DSInputText';\nexport const DSInputTextWithSchema = describe(DSInputText);\nDSInputTextWithSchema.propTypes = DSInputTextPropTypes;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;AC+BnB,SAUE,KAVF;AA/BJ,SAAgB,aAAa,cAAc;AAC3C,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,UAAU,iBAAiB;AACpC,SAAS,oBAAoB;AAC7B,SAAS,8BAA8B;AAEvC,SAAS,4BAA4B;AACrC,SAAS,mBAAmB,aAAa,0BAA0B;AAE5D,MAAM,cAAuD,CAAC,UAAU;AAC7E,QAAM;AAAA,IACJ,kBAAkB,EAAE,WAAW,OAAO,sBAAsB;AAAA,IAC5D;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,aAAa,KAAK;AAEtB,QAAM,EAAE,WAAW,UAAU,UAAU,UAAU,aAAa,UAAU,WAAW,SAAS,MAAM,IAChG;AAEF,QAAM,WAAW,OAAyB,IAAI;AAC9C,QAAM,2BAA2B,aAAa,CAAC,YAAY,UAAU;AAErE,QAAM,cAAc,YAAY,MAAM;AACpC,YAAQ;AACR,cAAU,SAAS,MAAM;AAAA,EAC3B,GAAG,CAAC,OAAO,CAAC;AAEZ,SACE,
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC+BnB,SAUE,KAVF;AA/BJ,SAAgB,aAAa,cAAc;AAC3C,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,UAAU,iBAAiB;AACpC,SAAS,oBAAoB;AAC7B,SAAS,8BAA8B;AAEvC,SAAS,4BAA4B;AACrC,SAAS,mBAAmB,aAAa,0BAA0B;AAE5D,MAAM,cAAuD,CAAC,UAAU;AAC7E,QAAM;AAAA,IACJ,kBAAkB,EAAE,WAAW,OAAO,sBAAsB;AAAA,IAC5D;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,aAAa,KAAK;AAEtB,QAAM,EAAE,WAAW,UAAU,UAAU,UAAU,aAAa,UAAU,WAAW,SAAS,MAAM,IAChG;AAEF,QAAM,WAAW,OAAyB,IAAI;AAC9C,QAAM,2BAA2B,aAAa,CAAC,YAAY,UAAU;AAErE,QAAM,cAAc,YAAY,MAAM;AACpC,YAAQ;AACR,cAAU,SAAS,MAAM;AAAA,EAC3B,GAAG,CAAC,OAAO,CAAC;AAEZ,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAM,2BAA2B,CAAC,QAAQ,aAAa,IAAI,CAAC,MAAM;AAAA,MAClE,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,eAAa,uBAAuB;AAAA,YACpC;AAAA,YACA;AAAA,YACA;AAAA,YACA,KAAK,UAAU,UAAU,QAAQ;AAAA,YACjC;AAAA,YACA,oBAAkB,OAAO,SAAY,GAAG,wBAAwB;AAAA,YAChE;AAAA,YACC,GAAG;AAAA,YACH,GAAG;AAAA;AAAA,QACN;AAAA,QACC,4BACC;AAAA,UAAC;AAAA;AAAA,YACC,cAAW;AAAA,YACX,YAAW;AAAA,YACX,eAAa,uBAAuB;AAAA,YACpC,SAAS;AAAA,YAET,8BAAC,eAAY,OAAO,aAAa,SAAS;AAAA;AAAA,QAC5C;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,YAAY,YAAY;AACxB,YAAY,cAAc;AACnB,MAAM,wBAAwB,SAAS,WAAW;AACzD,sBAAsB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -5,11 +5,12 @@ import {
|
|
|
5
5
|
useMemoMergePropsWithDefault,
|
|
6
6
|
useValidateTypescriptPropTypes
|
|
7
7
|
} from "@elliemae/ds-utilities";
|
|
8
|
+
import { DSInputTextName } from "../exported-related";
|
|
8
9
|
import { useCallback, useMemo, useState } from "react";
|
|
9
10
|
import { defaultProps, DSInputTextPropTypes } from "../react-desc-prop-types";
|
|
10
11
|
const useInputText = (props) => {
|
|
11
12
|
const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
|
|
12
|
-
useValidateTypescriptPropTypes(props, DSInputTextPropTypes);
|
|
13
|
+
useValidateTypescriptPropTypes(props, DSInputTextPropTypes, DSInputTextName);
|
|
13
14
|
const { onValueChange } = propsWithDefault;
|
|
14
15
|
const [hasFocus, setHasFocus] = useState(false);
|
|
15
16
|
const handleOnChange = useCallback(
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useInputText.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import {\n useGetGlobalAttributes,\n useGetXstyledProps,\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n} from '@elliemae/ds-utilities';\nimport type React from 'react';\nimport { useCallback, useMemo, useState } from 'react';\nimport type { DSInputTextT } from '../react-desc-prop-types';\nimport { defaultProps, DSInputTextPropTypes } from '../react-desc-prop-types';\n\nexport const useInputText = (props: DSInputTextT.Props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<Required<DSInputTextT.IProps>>(props, defaultProps);\n\n useValidateTypescriptPropTypes(props, DSInputTextPropTypes);\n\n const { onValueChange } = propsWithDefault;\n\n // =============================================================================\n // INTERNAL STATE\n // =============================================================================\n const [hasFocus, setHasFocus] = useState(false);\n\n // ===========================================================================\n // INTERNAL HANDLERS\n // ===========================================================================\n const handleOnChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(\n (e) => {\n onValueChange(e.target.value, e);\n },\n [onValueChange],\n );\n\n const handleOnFocus: React.FocusEventHandler<HTMLInputElement> = useCallback(() => {\n setHasFocus(true);\n }, []);\n\n const handleOnBlur: React.FocusEventHandler<HTMLInputElement> = useCallback(() => {\n setHasFocus(false);\n }, []);\n\n // =============================================================================\n // GLOBAL ATTRIBUTES & XSTYLED PROPS\n // =============================================================================\n const globalAttributes = useGetGlobalAttributes(propsWithDefault, {\n onChange: handleOnChange,\n onFocus: handleOnFocus,\n onBlur: handleOnBlur,\n });\n\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n\n return useMemo(\n () => ({\n globalAttributes,\n hasFocus,\n handlers: {\n onChange: handleOnChange,\n onFocus: handleOnFocus,\n onBlur: handleOnBlur,\n },\n propsWithDefault,\n xstyledProps,\n }),\n [globalAttributes, handleOnBlur, handleOnChange, handleOnFocus, hasFocus, propsWithDefault, xstyledProps],\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import {\n useGetGlobalAttributes,\n useGetXstyledProps,\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n} from '@elliemae/ds-utilities';\nimport { DSInputTextName } from '../exported-related';\nimport type React from 'react';\nimport { useCallback, useMemo, useState } from 'react';\nimport type { DSInputTextT } from '../react-desc-prop-types';\nimport { defaultProps, DSInputTextPropTypes } from '../react-desc-prop-types';\n\nexport const useInputText = (props: DSInputTextT.Props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<Required<DSInputTextT.IProps>>(props, defaultProps);\n\n useValidateTypescriptPropTypes(props, DSInputTextPropTypes, DSInputTextName);\n\n const { onValueChange } = propsWithDefault;\n\n // =============================================================================\n // INTERNAL STATE\n // =============================================================================\n const [hasFocus, setHasFocus] = useState(false);\n\n // ===========================================================================\n // INTERNAL HANDLERS\n // ===========================================================================\n const handleOnChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(\n (e) => {\n onValueChange(e.target.value, e);\n },\n [onValueChange],\n );\n\n const handleOnFocus: React.FocusEventHandler<HTMLInputElement> = useCallback(() => {\n setHasFocus(true);\n }, []);\n\n const handleOnBlur: React.FocusEventHandler<HTMLInputElement> = useCallback(() => {\n setHasFocus(false);\n }, []);\n\n // =============================================================================\n // GLOBAL ATTRIBUTES & XSTYLED PROPS\n // =============================================================================\n const globalAttributes = useGetGlobalAttributes(propsWithDefault, {\n onChange: handleOnChange,\n onFocus: handleOnFocus,\n onBlur: handleOnBlur,\n });\n\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n\n return useMemo(\n () => ({\n globalAttributes,\n hasFocus,\n handlers: {\n onChange: handleOnChange,\n onFocus: handleOnFocus,\n onBlur: handleOnBlur,\n },\n propsWithDefault,\n xstyledProps,\n }),\n [globalAttributes, handleOnBlur, handleOnChange, handleOnFocus, hasFocus, propsWithDefault, xstyledProps],\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,uBAAuB;AAEhC,SAAS,aAAa,SAAS,gBAAgB;AAE/C,SAAS,cAAc,4BAA4B;AAE5C,MAAM,eAAe,CAAC,UAA8B;AACzD,QAAM,mBAAmB,6BAA4D,OAAO,YAAY;AAExG,iCAA+B,OAAO,sBAAsB,eAAe;AAE3E,QAAM,EAAE,cAAc,IAAI;AAK1B,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAK9C,QAAM,iBAA6D;AAAA,IACjE,CAAC,MAAM;AACL,oBAAc,EAAE,OAAO,OAAO,CAAC;AAAA,IACjC;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AAEA,QAAM,gBAA2D,YAAY,MAAM;AACjF,gBAAY,IAAI;AAAA,EAClB,GAAG,CAAC,CAAC;AAEL,QAAM,eAA0D,YAAY,MAAM;AAChF,gBAAY,KAAK;AAAA,EACnB,GAAG,CAAC,CAAC;AAKL,QAAM,mBAAmB,uBAAuB,kBAAkB;AAAA,IAChE,UAAU;AAAA,IACV,SAAS;AAAA,IACT,QAAQ;AAAA,EACV,CAAC;AAED,QAAM,eAAe,mBAAmB,gBAAgB;AAExD,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,UAAU;AAAA,QACR,UAAU;AAAA,QACV,SAAS;AAAA,QACT,QAAQ;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,cAAc,gBAAgB,eAAe,UAAU,kBAAkB,YAAY;AAAA,EAC1G;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/theming.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSInputTextName = '
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSInputTextName = 'DSInputText';\n\nexport const DSInputTextSlots = {\n INPUT_WRAPPER: 'root',\n INPUT: 'input',\n CLEAR_BUTTON: 'input-clear-button',\n};\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,kBAAkB;AAExB,MAAM,mBAAmB;AAAA,EAC9B,eAAe;AAAA,EACf,OAAO;AAAA,EACP,cAAc;AAChB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-form-input-text",
|
|
3
|
-
"version": "3.12.0-rc.
|
|
3
|
+
"version": "3.12.0-rc.3",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Controlled Form Input Text",
|
|
6
6
|
"files": [
|
|
@@ -35,12 +35,12 @@
|
|
|
35
35
|
"indent": 4
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@elliemae/ds-button": "3.12.0-rc.
|
|
39
|
-
"@elliemae/ds-grid": "3.12.0-rc.
|
|
40
|
-
"@elliemae/ds-icon": "3.12.0-rc.
|
|
41
|
-
"@elliemae/ds-icons": "3.12.0-rc.
|
|
42
|
-
"@elliemae/ds-system": "3.12.0-rc.
|
|
43
|
-
"@elliemae/ds-utilities": "3.12.0-rc.
|
|
38
|
+
"@elliemae/ds-button": "3.12.0-rc.3",
|
|
39
|
+
"@elliemae/ds-grid": "3.12.0-rc.3",
|
|
40
|
+
"@elliemae/ds-icon": "3.12.0-rc.3",
|
|
41
|
+
"@elliemae/ds-icons": "3.12.0-rc.3",
|
|
42
|
+
"@elliemae/ds-system": "3.12.0-rc.3",
|
|
43
|
+
"@elliemae/ds-utilities": "3.12.0-rc.3"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@elliemae/pui-theme": "~2.6.0",
|