@elliemae/ds-form-input-text 3.5.0-rc.4 → 3.5.0-rc.7
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 +4 -1
- package/dist/cjs/DSInputText.js.map +2 -2
- package/dist/cjs/config/useInputText.js +24 -15
- package/dist/cjs/config/useInputText.js.map +1 -1
- package/dist/cjs/exported-related/data-test-ids.js +4 -1
- package/dist/cjs/exported-related/data-test-ids.js.map +1 -1
- package/dist/cjs/exported-related/index.js +4 -1
- package/dist/cjs/exported-related/index.js.map +1 -1
- package/dist/cjs/exported-related/theming.js +4 -1
- package/dist/cjs/exported-related/theming.js.map +1 -1
- package/dist/cjs/index.js +4 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/react-desc-prop-types.js +4 -1
- package/dist/cjs/react-desc-prop-types.js.map +1 -1
- package/dist/cjs/styled/borders.js +4 -1
- package/dist/cjs/styled/borders.js.map +1 -1
- package/dist/cjs/styled/components.js +4 -1
- package/dist/cjs/styled/components.js.map +1 -1
- package/dist/esm/DSInputText.js.map +2 -2
- package/dist/esm/config/useInputText.js +20 -14
- package/dist/esm/config/useInputText.js.map +1 -1
- package/dist/esm/exported-related/data-test-ids.js.map +1 -1
- package/dist/esm/exported-related/index.js.map +1 -1
- package/dist/esm/exported-related/theming.js.map +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/react-desc-prop-types.js.map +1 -1
- package/dist/esm/styled/borders.js.map +1 -1
- package/dist/esm/styled/components.js.map +1 -1
- package/package.json +7 -7
package/dist/cjs/DSInputText.js
CHANGED
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var DSInputText_exports = {};
|
|
23
26
|
__export(DSInputText_exports, {
|
|
@@ -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 { DSInputTextPropTypes, DSInputTextT } 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 && 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": "
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA2C;AAC3C,sBAA4B;AAC5B,qBAA6B;AAC7B,0BAAoC;AACpC,0BAA6B;AAC7B,2BAAuC;AACvC,mCAAmD;AACnD,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,UAAU;AAExD,QAAM,kBAAc,0BAAY,MAAM;AACpC,YAAQ;AACR,cAAU,SAAS,MAAM;AAAA,EAC3B,GAAG,CAAC,OAAO,CAAC;AAEZ,SACE,6BAAAA,QAAA,cAAC;AAAA,IACC;AAAA,IACA,MAAM,2BAA2B,CAAC,QAAQ,aAAa,IAAI,CAAC,MAAM;AAAA,IAClE,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACC,GAAG;AAAA,KAEJ,6BAAAA,QAAA,cAAC;AAAA,IACC,eAAa,4CAAuB;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAK,+BAAU,UAAU,QAAQ;AAAA,IACjC;AAAA,IACA,oBAAkB,OAAO,SAAY,GAAG,wBAAwB;AAAA,IAChE;AAAA,IACC,GAAG;AAAA,IACH,GAAG;AAAA,GACN,GACC,4BACC,6BAAAA,QAAA,cAAC;AAAA,IACC,cAAW;AAAA,IACX,YAAW;AAAA,IACX,eAAa,4CAAuB;AAAA,IACpC,SAAS;AAAA,KAET,6BAAAA,QAAA,cAAC;AAAA,IAAY,OAAO,4BAAa;AAAA,GAAS,CAC5C,CAEJ;AAEJ;AAEA,YAAY,YAAY;AACxB,YAAY,cAAc;AACnB,MAAM,4BAAwB,8BAAS,WAAW;AACzD,sBAAsB,YAAY;",
|
|
6
|
+
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var useInputText_exports = {};
|
|
23
26
|
__export(useInputText_exports, {
|
|
@@ -33,9 +36,12 @@ const useInputText = (props) => {
|
|
|
33
36
|
(0, import_ds_utilities.useValidateTypescriptPropTypes)(props, import_react_desc_prop_types.DSInputTextPropTypes);
|
|
34
37
|
const { onValueChange } = propsWithDefault;
|
|
35
38
|
const [hasFocus, setHasFocus] = (0, import_react.useState)(false);
|
|
36
|
-
const handleOnChange = (0, import_react.useCallback)(
|
|
37
|
-
|
|
38
|
-
|
|
39
|
+
const handleOnChange = (0, import_react.useCallback)(
|
|
40
|
+
(e) => {
|
|
41
|
+
onValueChange(e.target.value, e);
|
|
42
|
+
},
|
|
43
|
+
[onValueChange]
|
|
44
|
+
);
|
|
39
45
|
const handleOnFocus = (0, import_react.useCallback)(() => {
|
|
40
46
|
setHasFocus(true);
|
|
41
47
|
}, []);
|
|
@@ -48,16 +54,19 @@ const useInputText = (props) => {
|
|
|
48
54
|
onBlur: handleOnBlur
|
|
49
55
|
});
|
|
50
56
|
const xstyledProps = (0, import_ds_utilities.useGetXstyledProps)(propsWithDefault);
|
|
51
|
-
return (0, import_react.useMemo)(
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
57
|
+
return (0, import_react.useMemo)(
|
|
58
|
+
() => ({
|
|
59
|
+
globalAttributes,
|
|
60
|
+
hasFocus,
|
|
61
|
+
handlers: {
|
|
62
|
+
onChange: handleOnChange,
|
|
63
|
+
onFocus: handleOnFocus,
|
|
64
|
+
onBlur: handleOnBlur
|
|
65
|
+
},
|
|
66
|
+
propsWithDefault,
|
|
67
|
+
xstyledProps
|
|
68
|
+
}),
|
|
69
|
+
[globalAttributes, handleOnBlur, handleOnChange, handleOnFocus, hasFocus, propsWithDefault, xstyledProps]
|
|
70
|
+
);
|
|
62
71
|
};
|
|
63
72
|
//# sourceMappingURL=useInputText.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/config/useInputText.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import {\n useGetGlobalAttributes,\n useGetXstyledProps,\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n} from '@elliemae/ds-utilities';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { defaultProps, DSInputTextPropTypes, DSInputTextT } 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": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAKO;AACP,mBAAsD;AACtD,mCAAiE;AAE1D,MAAM,eAAe,CAAC,UAA8B;AACzD,QAAM,uBAAmB,kDAA4D,OAAO,yCAAY;AAExG,0DAA+B,OAAO,iDAAoB;AAE1D,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
|
}
|
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var data_test_ids_exports = {};
|
|
23
26
|
__export(data_test_ids_exports, {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/exported-related/data-test-ids.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["export const DSInputTextDataTestIds = {\n INPUT: 'ds-input-text-input',\n CLEAR_BUTTON: 'ds-input-text-clear-button',\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,yBAAyB;AAAA,EACpC,OAAO;AAAA,EACP,cAAc;AAChB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -14,7 +14,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
14
14
|
return to;
|
|
15
15
|
};
|
|
16
16
|
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
17
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
17
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
18
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
19
|
+
mod
|
|
20
|
+
));
|
|
18
21
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
22
|
var exported_related_exports = {};
|
|
20
23
|
module.exports = __toCommonJS(exported_related_exports);
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/exported-related/index.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["export * from './data-test-ids';\nexport * from './theming';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,qCAAc,4BAAd;AACA,qCAAc,sBADd;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var theming_exports = {};
|
|
23
26
|
__export(theming_exports, {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/exported-related/theming.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["export const DSInputTextName = 'DS-InputText';\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
|
-
"mappings": "
|
|
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/cjs/index.js
CHANGED
|
@@ -14,7 +14,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
14
14
|
return to;
|
|
15
15
|
};
|
|
16
16
|
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
17
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
17
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
18
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
19
|
+
mod
|
|
20
|
+
));
|
|
18
21
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
22
|
var src_exports = {};
|
|
20
23
|
module.exports = __toCommonJS(src_exports);
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.ts", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["export * from './DSInputText';\nexport * from './exported-related';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc,0BAAd;AACA,wBAAc,+BADd;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var react_desc_prop_types_exports = {};
|
|
23
26
|
__export(react_desc_prop_types_exports, {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.ts", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React, { WeakValidationMap } from 'react';\nimport {\n PropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n GlobalAttributesT,\n XstyledProps,\n} from '@elliemae/ds-utilities';\n\nexport declare namespace DSInputTextT {\n export interface IProps {\n value?: string | number;\n onValueChange?: (nextValue: string | number, e: React.ChangeEvent<HTMLInputElement>) => void;\n onClear?: () => void;\n placeholder?: string;\n innerRef?: React.MutableRefObject<HTMLInputElement | null> | ((_ref: HTMLInputElement | null) => void);\n disabled?: boolean;\n readOnly?: boolean;\n hasError?: boolean;\n inputSize?: 's' | 'm';\n clearable?: boolean;\n }\n\n export interface Props extends IProps, Omit<GlobalAttributesT<HTMLInputElement>, keyof IProps>, XstyledProps {}\n}\n\nexport const defaultProps: DSInputTextT.Props = {\n onValueChange: () => null,\n onClear: () => null,\n placeholder: 'Hint Text',\n disabled: false,\n readOnly: false,\n hasError: false,\n inputSize: 'm',\n clearable: false,\n};\n\nexport const DSInputTextPropTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.arrayOf(PropTypes.string)])\n .description('Value of the input')\n .defaultValue(''),\n onValueChange: PropTypes.func\n .description('Callback triggered when the value changes')\n .defaultValue(() => null)\n .signature('((newValue: string, e: React.ChangeEvent) => void)'),\n placeholder: PropTypes.string.description('Value of the placeholder').defaultValue(''),\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func.signature('((ref: HTMLInputElement) => void)')])\n .description('Reference to the input')\n .defaultValue(null),\n disabled: PropTypes.bool.description('Whether the input is disabled').defaultValue(false),\n readOnly: PropTypes.bool.description('Whether the input is readonly').defaultValue(false),\n hasError: PropTypes.bool.description('Whether the input has error').defaultValue(false),\n inputSize: PropTypes.oneOf(['s', 'm']).description('Size of the input').defaultValue('m'),\n clearable: PropTypes.bool.description('Whether the input is clearable').defaultValue(false),\n onClear: PropTypes.func\n .description('Callback triggered when the clearable button is pressed')\n .defaultValue(() => null)\n .signature('(() => void)'),\n} as WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,0BAMO;AAmBA,MAAM,eAAmC;AAAA,EAC9C,eAAe,MAAM;AAAA,EACrB,SAAS,MAAM;AAAA,EACf,aAAa;AAAA,EACb,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,WAAW;AAAA,EACX,WAAW;AACb;AAEO,MAAM,uBAAuB;AAAA,EAClC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAO,8BAAU,UAAU,CAAC,8BAAU,QAAQ,8BAAU,QAAQ,8BAAU,QAAQ,8BAAU,MAAM,CAAC,CAAC,EACjG,YAAY,oBAAoB,EAChC,aAAa,EAAE;AAAA,EAClB,eAAe,8BAAU,KACtB,YAAY,2CAA2C,EACvD,aAAa,MAAM,IAAI,EACvB,UAAU,oDAAoD;AAAA,EACjE,aAAa,8BAAU,OAAO,YAAY,0BAA0B,EAAE,aAAa,EAAE;AAAA,EACrF,UAAU,8BAAU,UAAU,CAAC,8BAAU,QAAQ,8BAAU,KAAK,UAAU,mCAAmC,CAAC,CAAC,EAC5G,YAAY,wBAAwB,EACpC,aAAa,IAAI;AAAA,EACpB,UAAU,8BAAU,KAAK,YAAY,+BAA+B,EAAE,aAAa,KAAK;AAAA,EACxF,UAAU,8BAAU,KAAK,YAAY,+BAA+B,EAAE,aAAa,KAAK;AAAA,EACxF,UAAU,8BAAU,KAAK,YAAY,6BAA6B,EAAE,aAAa,KAAK;AAAA,EACtF,WAAW,8BAAU,MAAM,CAAC,KAAK,GAAG,CAAC,EAAE,YAAY,mBAAmB,EAAE,aAAa,GAAG;AAAA,EACxF,WAAW,8BAAU,KAAK,YAAY,gCAAgC,EAAE,aAAa,KAAK;AAAA,EAC1F,SAAS,8BAAU,KAChB,YAAY,yDAAyD,EACrE,aAAa,MAAM,IAAI,EACvB,UAAU,cAAc;AAC7B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var borders_exports = {};
|
|
23
26
|
__export(borders_exports, {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/styled/borders.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import { th, css, FlattenSimpleInterpolation } from '@elliemae/ds-system';\n\ninterface BorderNecessaryProps {\n isDisabled: boolean;\n hasError: boolean;\n isReadOnly: boolean;\n hasFocus: boolean;\n}\n\nconst commonBorderCss: FlattenSimpleInterpolation = css`\n border: 1px solid ${th.color('neutral-400')};\n`;\n\nconst readOnlyBorderCss: FlattenSimpleInterpolation = css`\n border: 1px solid transparent;\n border-top-color: ${th.color('neutral-400')};\n`;\n\nconst disabledBorderCss = commonBorderCss;\n\nconst hasErrorBorderCss: FlattenSimpleInterpolation = css`\n border: 1px solid ${th.color('danger-900')};\n`;\n\nconst hoverBorderCss: FlattenSimpleInterpolation = css`\n border: 1px solid ${th.color('brand-700')};\n`;\n\nconst focusBorderCss: FlattenSimpleInterpolation = css`\n border: 1px solid transparent;\n outline: 2px solid ${th.color('brand-700')};\n outline-offset: -2px;\n`;\n\nexport const getBorderCss = (props: BorderNecessaryProps): FlattenSimpleInterpolation => {\n if (props.isDisabled) return disabledBorderCss;\n if (props.hasFocus) return focusBorderCss;\n if (props.hasError) return hasErrorBorderCss;\n if (props.isReadOnly) return readOnlyBorderCss;\n return commonBorderCss;\n};\n\nexport const getHoverBorderCss = (props: BorderNecessaryProps): FlattenSimpleInterpolation => {\n if (props.isDisabled) return disabledBorderCss;\n if (props.hasFocus) return focusBorderCss;\n return hoverBorderCss;\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAoD;AASpD,MAAM,kBAA8C;AAAA,sBAC9B,oBAAG,MAAM,aAAa;AAAA;AAG5C,MAAM,oBAAgD;AAAA;AAAA,sBAEhC,oBAAG,MAAM,aAAa;AAAA;AAG5C,MAAM,oBAAoB;AAE1B,MAAM,oBAAgD;AAAA,sBAChC,oBAAG,MAAM,YAAY;AAAA;AAG3C,MAAM,iBAA6C;AAAA,sBAC7B,oBAAG,MAAM,WAAW;AAAA;AAG1C,MAAM,iBAA6C;AAAA;AAAA,uBAE5B,oBAAG,MAAM,WAAW;AAAA;AAAA;AAIpC,MAAM,eAAe,CAAC,UAA4D;AACvF,MAAI,MAAM;AAAY,WAAO;AAC7B,MAAI,MAAM;AAAU,WAAO;AAC3B,MAAI,MAAM;AAAU,WAAO;AAC3B,MAAI,MAAM;AAAY,WAAO;AAC7B,SAAO;AACT;AAEO,MAAM,oBAAoB,CAAC,UAA4D;AAC5F,MAAI,MAAM;AAAY,WAAO;AAC7B,MAAI,MAAM;AAAU,WAAO;AAC3B,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var components_exports = {};
|
|
23
26
|
__export(components_exports, {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/styled/components.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import { DSButtonV2 } from '@elliemae/ds-button';\nimport { Grid } from '@elliemae/ds-grid';\nimport { th, styled, layout, space, sizing } from '@elliemae/ds-system';\nimport { DSInputTextName, DSInputTextSlots } from '../exported-related';\nimport { getBorderCss, getHoverBorderCss } from './borders';\n\ninterface StyledInputWrapperProps {\n inputSize: string;\n isDisabled: boolean;\n hasError: boolean;\n isReadOnly: boolean;\n hasFocus: boolean;\n}\n\nexport const StyledInputWrapper = styled(Grid, {\n name: DSInputTextName,\n slot: DSInputTextSlots.INPUT_WRAPPER,\n})<StyledInputWrapperProps>`\n height: ${({ inputSize }) => (inputSize === 'm' ? '28px' : '24px')};\n\n ${getBorderCss}\n border-radius: 2px;\n\n :hover {\n ${getHoverBorderCss}\n }\n\n ${layout}\n ${space}\n ${sizing}\n`;\n\nexport const StyledInput = styled('input', { name: DSInputTextName, slot: DSInputTextSlots.INPUT })`\n padding: 0 ${th.space('xxs')};\n border: none;\n outline: none;\n border-radius: 2px;\n\n width: 100%;\n height: 100%;\n font-size: 13px;\n color: ${th.color('neutral-800')};\n\n ::placeholder {\n font-weight: ${th.fontWeight('regular')};\n font-style: italic;\n color: ${th.color('neutral-500')};\n }\n\n :disabled {\n background-color: ${th.color('neutral-080')};\n color: #616b7f;\n cursor: not-allowed;\n }\n`;\n\nexport const StyledClearButton = styled(DSButtonV2, { name: DSInputTextName, slot: DSInputTextSlots.CLEAR_BUTTON })`\n height: 100%;\n min-width: 20px;\n width: 20px;\n &:after {\n border-top-left-radius: 0px !important;\n border-bottom-left-radius: 0px !important;\n }\n :focus {\n border-width: 0px;\n }\n\n &:hover:not(:disabled) {\n background-color: transparent;\n }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA2B;AAC3B,qBAAqB;AACrB,uBAAkD;AAClD,8BAAkD;AAClD,qBAAgD;AAUzC,MAAM,yBAAqB,yBAAO,qBAAM;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,yCAAiB;AACzB,CAAC;AAAA,YACW,CAAC,EAAE,UAAU,MAAO,cAAc,MAAM,SAAS;AAAA;AAAA,IAEzD;AAAA;AAAA;AAAA;AAAA,MAIE;AAAA;AAAA;AAAA,IAGF;AAAA,IACA;AAAA,IACA;AAAA;AAGG,MAAM,kBAAc,yBAAO,SAAS,EAAE,MAAM,yCAAiB,MAAM,yCAAiB,MAAM,CAAC;AAAA,eACnF,oBAAG,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAQlB,oBAAG,MAAM,aAAa;AAAA;AAAA;AAAA,mBAGd,oBAAG,WAAW,SAAS;AAAA;AAAA,aAE7B,oBAAG,MAAM,aAAa;AAAA;AAAA;AAAA;AAAA,wBAIX,oBAAG,MAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAMvC,MAAM,wBAAoB,yBAAO,6BAAY,EAAE,MAAM,yCAAiB,MAAM,yCAAiB,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -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 { DSInputTextPropTypes, DSInputTextT } 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 && 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;
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,UAAS,aAAa,cAAc;AAC3C,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,UAAU,iBAAiB;AACpC,SAAS,oBAAoB;AAC7B,SAAS,8BAA8B;AACvC,SAAS,4BAA0C;AACnD,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,UAAU;AAExD,QAAM,cAAc,YAAY,MAAM;AACpC,YAAQ;AACR,cAAU,SAAS,MAAM;AAAA,EAC3B,GAAG,CAAC,OAAO,CAAC;AAEZ,SACE,gBAAAA,OAAA,cAAC;AAAA,IACC;AAAA,IACA,MAAM,2BAA2B,CAAC,QAAQ,aAAa,IAAI,CAAC,MAAM;AAAA,IAClE,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACC,GAAG;AAAA,KAEJ,gBAAAA,OAAA,cAAC;AAAA,IACC,eAAa,uBAAuB;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK,UAAU,UAAU,QAAQ;AAAA,IACjC;AAAA,IACA,oBAAkB,OAAO,SAAY,GAAG,wBAAwB;AAAA,IAChE;AAAA,IACC,GAAG;AAAA,IACH,GAAG;AAAA,GACN,GACC,4BACC,gBAAAA,OAAA,cAAC;AAAA,IACC,cAAW;AAAA,IACX,YAAW;AAAA,IACX,eAAa,uBAAuB;AAAA,IACpC,SAAS;AAAA,KAET,gBAAAA,OAAA,cAAC;AAAA,IAAY,OAAO,aAAa;AAAA,GAAS,CAC5C,CAEJ;AAEJ;AAEA,YAAY,YAAY;AACxB,YAAY,cAAc;AACnB,MAAM,wBAAwB,SAAS,WAAW;AACzD,sBAAsB,YAAY;",
|
|
6
|
+
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -12,9 +12,12 @@ const useInputText = (props) => {
|
|
|
12
12
|
useValidateTypescriptPropTypes(props, DSInputTextPropTypes);
|
|
13
13
|
const { onValueChange } = propsWithDefault;
|
|
14
14
|
const [hasFocus, setHasFocus] = useState(false);
|
|
15
|
-
const handleOnChange = useCallback(
|
|
16
|
-
|
|
17
|
-
|
|
15
|
+
const handleOnChange = useCallback(
|
|
16
|
+
(e) => {
|
|
17
|
+
onValueChange(e.target.value, e);
|
|
18
|
+
},
|
|
19
|
+
[onValueChange]
|
|
20
|
+
);
|
|
18
21
|
const handleOnFocus = useCallback(() => {
|
|
19
22
|
setHasFocus(true);
|
|
20
23
|
}, []);
|
|
@@ -27,17 +30,20 @@ const useInputText = (props) => {
|
|
|
27
30
|
onBlur: handleOnBlur
|
|
28
31
|
});
|
|
29
32
|
const xstyledProps = useGetXstyledProps(propsWithDefault);
|
|
30
|
-
return useMemo(
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
33
|
+
return useMemo(
|
|
34
|
+
() => ({
|
|
35
|
+
globalAttributes,
|
|
36
|
+
hasFocus,
|
|
37
|
+
handlers: {
|
|
38
|
+
onChange: handleOnChange,
|
|
39
|
+
onFocus: handleOnFocus,
|
|
40
|
+
onBlur: handleOnBlur
|
|
41
|
+
},
|
|
42
|
+
propsWithDefault,
|
|
43
|
+
xstyledProps
|
|
44
|
+
}),
|
|
45
|
+
[globalAttributes, handleOnBlur, handleOnChange, handleOnFocus, hasFocus, propsWithDefault, xstyledProps]
|
|
46
|
+
);
|
|
41
47
|
};
|
|
42
48
|
export {
|
|
43
49
|
useInputText
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useInputText.ts"],
|
|
4
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 React, { useCallback, useMemo, useState } from 'react';\nimport { defaultProps, DSInputTextPropTypes, DSInputTextT } 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;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAgB,aAAa,SAAS,gBAAgB;AACtD,SAAS,cAAc,4BAA0C;AAE1D,MAAM,eAAe,CAAC,UAA8B;AACzD,QAAM,mBAAmB,6BAA4D,OAAO,YAAY;AAExG,iCAA+B,OAAO,oBAAoB;AAE1D,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
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/data-test-ids.ts"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSInputTextDataTestIds = {\n INPUT: 'ds-input-text-input',\n CLEAR_BUTTON: 'ds-input-text-clear-button',\n};\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,yBAAyB;AAAA,EACpC,OAAO;AAAA,EACP,cAAc;AAChB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/index.ts"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './data-test-ids';\nexport * from './theming';\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/theming.ts"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSInputTextName = 'DS-InputText';\n\nexport const DSInputTextSlots = {\n INPUT_WRAPPER: 'root',\n INPUT: 'input',\n CLEAR_BUTTON: 'input-clear-button',\n};\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
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/dist/esm/index.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './DSInputText';\nexport * from './exported-related';\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { WeakValidationMap } from 'react';\nimport {\n PropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n GlobalAttributesT,\n XstyledProps,\n} from '@elliemae/ds-utilities';\n\nexport declare namespace DSInputTextT {\n export interface IProps {\n value?: string | number;\n onValueChange?: (nextValue: string | number, e: React.ChangeEvent<HTMLInputElement>) => void;\n onClear?: () => void;\n placeholder?: string;\n innerRef?: React.MutableRefObject<HTMLInputElement | null> | ((_ref: HTMLInputElement | null) => void);\n disabled?: boolean;\n readOnly?: boolean;\n hasError?: boolean;\n inputSize?: 's' | 'm';\n clearable?: boolean;\n }\n\n export interface Props extends IProps, Omit<GlobalAttributesT<HTMLInputElement>, keyof IProps>, XstyledProps {}\n}\n\nexport const defaultProps: DSInputTextT.Props = {\n onValueChange: () => null,\n onClear: () => null,\n placeholder: 'Hint Text',\n disabled: false,\n readOnly: false,\n hasError: false,\n inputSize: 'm',\n clearable: false,\n};\n\nexport const DSInputTextPropTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.arrayOf(PropTypes.string)])\n .description('Value of the input')\n .defaultValue(''),\n onValueChange: PropTypes.func\n .description('Callback triggered when the value changes')\n .defaultValue(() => null)\n .signature('((newValue: string, e: React.ChangeEvent) => void)'),\n placeholder: PropTypes.string.description('Value of the placeholder').defaultValue(''),\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func.signature('((ref: HTMLInputElement) => void)')])\n .description('Reference to the input')\n .defaultValue(null),\n disabled: PropTypes.bool.description('Whether the input is disabled').defaultValue(false),\n readOnly: PropTypes.bool.description('Whether the input is readonly').defaultValue(false),\n hasError: PropTypes.bool.description('Whether the input has error').defaultValue(false),\n inputSize: PropTypes.oneOf(['s', 'm']).description('Size of the input').defaultValue('m'),\n clearable: PropTypes.bool.description('Whether the input is clearable').defaultValue(false),\n onClear: PropTypes.func\n .description('Callback triggered when the clearable button is pressed')\n .defaultValue(() => null)\n .signature('(() => void)'),\n} as WeakValidationMap<unknown>;\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAmBA,MAAM,eAAmC;AAAA,EAC9C,eAAe,MAAM;AAAA,EACrB,SAAS,MAAM;AAAA,EACf,aAAa;AAAA,EACb,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,WAAW;AAAA,EACX,WAAW;AACb;AAEO,MAAM,uBAAuB;AAAA,EAClC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAO,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,QAAQ,UAAU,QAAQ,UAAU,MAAM,CAAC,CAAC,EACjG,YAAY,oBAAoB,EAChC,aAAa,EAAE;AAAA,EAClB,eAAe,UAAU,KACtB,YAAY,2CAA2C,EACvD,aAAa,MAAM,IAAI,EACvB,UAAU,oDAAoD;AAAA,EACjE,aAAa,UAAU,OAAO,YAAY,0BAA0B,EAAE,aAAa,EAAE;AAAA,EACrF,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,KAAK,UAAU,mCAAmC,CAAC,CAAC,EAC5G,YAAY,wBAAwB,EACpC,aAAa,IAAI;AAAA,EACpB,UAAU,UAAU,KAAK,YAAY,+BAA+B,EAAE,aAAa,KAAK;AAAA,EACxF,UAAU,UAAU,KAAK,YAAY,+BAA+B,EAAE,aAAa,KAAK;AAAA,EACxF,UAAU,UAAU,KAAK,YAAY,6BAA6B,EAAE,aAAa,KAAK;AAAA,EACtF,WAAW,UAAU,MAAM,CAAC,KAAK,GAAG,CAAC,EAAE,YAAY,mBAAmB,EAAE,aAAa,GAAG;AAAA,EACxF,WAAW,UAAU,KAAK,YAAY,gCAAgC,EAAE,aAAa,KAAK;AAAA,EAC1F,SAAS,UAAU,KAChB,YAAY,yDAAyD,EACrE,aAAa,MAAM,IAAI,EACvB,UAAU,cAAc;AAC7B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/styled/borders.ts"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { th, css, FlattenSimpleInterpolation } from '@elliemae/ds-system';\n\ninterface BorderNecessaryProps {\n isDisabled: boolean;\n hasError: boolean;\n isReadOnly: boolean;\n hasFocus: boolean;\n}\n\nconst commonBorderCss: FlattenSimpleInterpolation = css`\n border: 1px solid ${th.color('neutral-400')};\n`;\n\nconst readOnlyBorderCss: FlattenSimpleInterpolation = css`\n border: 1px solid transparent;\n border-top-color: ${th.color('neutral-400')};\n`;\n\nconst disabledBorderCss = commonBorderCss;\n\nconst hasErrorBorderCss: FlattenSimpleInterpolation = css`\n border: 1px solid ${th.color('danger-900')};\n`;\n\nconst hoverBorderCss: FlattenSimpleInterpolation = css`\n border: 1px solid ${th.color('brand-700')};\n`;\n\nconst focusBorderCss: FlattenSimpleInterpolation = css`\n border: 1px solid transparent;\n outline: 2px solid ${th.color('brand-700')};\n outline-offset: -2px;\n`;\n\nexport const getBorderCss = (props: BorderNecessaryProps): FlattenSimpleInterpolation => {\n if (props.isDisabled) return disabledBorderCss;\n if (props.hasFocus) return focusBorderCss;\n if (props.hasError) return hasErrorBorderCss;\n if (props.isReadOnly) return readOnlyBorderCss;\n return commonBorderCss;\n};\n\nexport const getHoverBorderCss = (props: BorderNecessaryProps): FlattenSimpleInterpolation => {\n if (props.isDisabled) return disabledBorderCss;\n if (props.hasFocus) return focusBorderCss;\n return hoverBorderCss;\n};\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,IAAI,WAAuC;AASpD,MAAM,kBAA8C;AAAA,sBAC9B,GAAG,MAAM,aAAa;AAAA;AAG5C,MAAM,oBAAgD;AAAA;AAAA,sBAEhC,GAAG,MAAM,aAAa;AAAA;AAG5C,MAAM,oBAAoB;AAE1B,MAAM,oBAAgD;AAAA,sBAChC,GAAG,MAAM,YAAY;AAAA;AAG3C,MAAM,iBAA6C;AAAA,sBAC7B,GAAG,MAAM,WAAW;AAAA;AAG1C,MAAM,iBAA6C;AAAA;AAAA,uBAE5B,GAAG,MAAM,WAAW;AAAA;AAAA;AAIpC,MAAM,eAAe,CAAC,UAA4D;AACvF,MAAI,MAAM;AAAY,WAAO;AAC7B,MAAI,MAAM;AAAU,WAAO;AAC3B,MAAI,MAAM;AAAU,WAAO;AAC3B,MAAI,MAAM;AAAY,WAAO;AAC7B,SAAO;AACT;AAEO,MAAM,oBAAoB,CAAC,UAA4D;AAC5F,MAAI,MAAM;AAAY,WAAO;AAC7B,MAAI,MAAM;AAAU,WAAO;AAC3B,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/styled/components.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSButtonV2 } from '@elliemae/ds-button';\nimport { Grid } from '@elliemae/ds-grid';\nimport { th, styled, layout, space, sizing } from '@elliemae/ds-system';\nimport { DSInputTextName, DSInputTextSlots } from '../exported-related';\nimport { getBorderCss, getHoverBorderCss } from './borders';\n\ninterface StyledInputWrapperProps {\n inputSize: string;\n isDisabled: boolean;\n hasError: boolean;\n isReadOnly: boolean;\n hasFocus: boolean;\n}\n\nexport const StyledInputWrapper = styled(Grid, {\n name: DSInputTextName,\n slot: DSInputTextSlots.INPUT_WRAPPER,\n})<StyledInputWrapperProps>`\n height: ${({ inputSize }) => (inputSize === 'm' ? '28px' : '24px')};\n\n ${getBorderCss}\n border-radius: 2px;\n\n :hover {\n ${getHoverBorderCss}\n }\n\n ${layout}\n ${space}\n ${sizing}\n`;\n\nexport const StyledInput = styled('input', { name: DSInputTextName, slot: DSInputTextSlots.INPUT })`\n padding: 0 ${th.space('xxs')};\n border: none;\n outline: none;\n border-radius: 2px;\n\n width: 100%;\n height: 100%;\n font-size: 13px;\n color: ${th.color('neutral-800')};\n\n ::placeholder {\n font-weight: ${th.fontWeight('regular')};\n font-style: italic;\n color: ${th.color('neutral-500')};\n }\n\n :disabled {\n background-color: ${th.color('neutral-080')};\n color: #616b7f;\n cursor: not-allowed;\n }\n`;\n\nexport const StyledClearButton = styled(DSButtonV2, { name: DSInputTextName, slot: DSInputTextSlots.CLEAR_BUTTON })`\n height: 100%;\n min-width: 20px;\n width: 20px;\n &:after {\n border-top-left-radius: 0px !important;\n border-bottom-left-radius: 0px !important;\n }\n :focus {\n border-width: 0px;\n }\n\n &:hover:not(:disabled) {\n background-color: transparent;\n }\n`;\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB,SAAS,IAAI,QAAQ,QAAQ,OAAO,cAAc;AAClD,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,cAAc,yBAAyB;AAUzC,MAAM,qBAAqB,OAAO,MAAM;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAAA,YACW,CAAC,EAAE,UAAU,MAAO,cAAc,MAAM,SAAS;AAAA;AAAA,IAEzD;AAAA;AAAA;AAAA;AAAA,MAIE;AAAA;AAAA;AAAA,IAGF;AAAA,IACA;AAAA,IACA;AAAA;AAGG,MAAM,cAAc,OAAO,SAAS,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,MAAM,CAAC;AAAA,eACnF,GAAG,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAQlB,GAAG,MAAM,aAAa;AAAA;AAAA;AAAA,mBAGd,GAAG,WAAW,SAAS;AAAA;AAAA,aAE7B,GAAG,MAAM,aAAa;AAAA;AAAA;AAAA;AAAA,wBAIX,GAAG,MAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAMvC,MAAM,oBAAoB,OAAO,YAAY,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
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.5.0-rc.
|
|
3
|
+
"version": "3.5.0-rc.7",
|
|
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.5.0-rc.
|
|
39
|
-
"@elliemae/ds-grid": "3.5.0-rc.
|
|
40
|
-
"@elliemae/ds-icon": "3.5.0-rc.
|
|
41
|
-
"@elliemae/ds-icons": "3.5.0-rc.
|
|
42
|
-
"@elliemae/ds-system": "3.5.0-rc.
|
|
43
|
-
"@elliemae/ds-utilities": "3.5.0-rc.
|
|
38
|
+
"@elliemae/ds-button": "3.5.0-rc.7",
|
|
39
|
+
"@elliemae/ds-grid": "3.5.0-rc.7",
|
|
40
|
+
"@elliemae/ds-icon": "3.5.0-rc.7",
|
|
41
|
+
"@elliemae/ds-icons": "3.5.0-rc.7",
|
|
42
|
+
"@elliemae/ds-system": "3.5.0-rc.7",
|
|
43
|
+
"@elliemae/ds-utilities": "3.5.0-rc.7"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@elliemae/pui-theme": "~2.6.0",
|