@elliemae/ds-form-input-text 3.57.0-next.5 → 3.57.0-next.50
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 +12 -16
- package/dist/cjs/DSInputText.js.map +3 -3
- package/dist/cjs/config/useInputText.js +23 -16
- package/dist/cjs/config/useInputText.js.map +3 -3
- package/dist/cjs/package.json +4 -1
- package/dist/esm/DSInputText.js +12 -16
- package/dist/esm/DSInputText.js.map +3 -3
- package/dist/esm/config/useInputText.js +23 -16
- package/dist/esm/config/useInputText.js.map +3 -3
- package/dist/esm/package.json +4 -1
- package/dist/types/config/useInputText.d.ts +5 -7
- package/package.json +30 -29
package/dist/cjs/DSInputText.js
CHANGED
|
@@ -34,19 +34,21 @@ __export(DSInputText_exports, {
|
|
|
34
34
|
module.exports = __toCommonJS(DSInputText_exports);
|
|
35
35
|
var React = __toESM(require("react"));
|
|
36
36
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
37
|
-
var import_react = __toESM(require("react"));
|
|
38
|
-
var import_ds_icons = require("@elliemae/ds-icons");
|
|
39
37
|
var import_ds_icon = require("@elliemae/ds-icon");
|
|
40
|
-
var
|
|
38
|
+
var import_ds_icons = require("@elliemae/ds-icons");
|
|
41
39
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
40
|
+
var import_ds_system = require("@elliemae/ds-system");
|
|
41
|
+
var import_react = require("react");
|
|
42
42
|
var import_useInputText = require("./config/useInputText.js");
|
|
43
43
|
var import_react_desc_prop_types = require("./react-desc-prop-types.js");
|
|
44
44
|
var import_components = require("./styled/components.js");
|
|
45
45
|
const DSInputText = (props) => {
|
|
46
46
|
const {
|
|
47
|
-
globalAttributes: { className, id, ...otherGlobalAttributes },
|
|
47
|
+
globalAttributes: { className, id, value: discardedVal, ...otherGlobalAttributes },
|
|
48
48
|
hasFocus,
|
|
49
|
-
|
|
49
|
+
handleOnFocus,
|
|
50
|
+
handleOnBlur,
|
|
51
|
+
handleOnChange,
|
|
50
52
|
propsWithDefault,
|
|
51
53
|
xstyledProps,
|
|
52
54
|
ownerPropsConfig
|
|
@@ -74,14 +76,6 @@ const DSInputText = (props) => {
|
|
|
74
76
|
onClear();
|
|
75
77
|
inputRef?.current?.focus();
|
|
76
78
|
}, [onClear]);
|
|
77
|
-
const shouldCallOnChange = import_react.default.useMemo(() => !applyAriaDisabled && !readOnly, [applyAriaDisabled, readOnly]);
|
|
78
|
-
const otherGlobalAttributesCleaned = import_react.default.useMemo(
|
|
79
|
-
() => ({
|
|
80
|
-
...otherGlobalAttributes,
|
|
81
|
-
...shouldCallOnChange ? {} : { onChange: void 0 }
|
|
82
|
-
}),
|
|
83
|
-
[otherGlobalAttributes, shouldCallOnChange]
|
|
84
|
-
);
|
|
85
79
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
86
80
|
import_components.StyledInputWrapper,
|
|
87
81
|
{
|
|
@@ -104,14 +98,16 @@ const DSInputText = (props) => {
|
|
|
104
98
|
placeholder,
|
|
105
99
|
readOnly,
|
|
106
100
|
innerRef: (0, import_ds_system.mergeRefs)(innerRef, inputRef),
|
|
107
|
-
value,
|
|
108
101
|
"aria-describedby": defaultAriaDescribedBy || ariaDescribedBy ? `${defaultAriaDescribedBy} ${ariaDescribedBy}` : void 0,
|
|
109
102
|
"aria-invalid": hasError,
|
|
110
103
|
id,
|
|
111
104
|
"aria-disabled": applyAriaDisabled,
|
|
112
105
|
"aria-readonly": readOnly,
|
|
113
|
-
|
|
114
|
-
|
|
106
|
+
onFocus: handleOnFocus,
|
|
107
|
+
onBlur: handleOnBlur,
|
|
108
|
+
...otherGlobalAttributes,
|
|
109
|
+
onChange: handleOnChange,
|
|
110
|
+
value: value === void 0 && applyAriaDisabled ? "" : value,
|
|
115
111
|
...ownerPropsConfig
|
|
116
112
|
}
|
|
117
113
|
),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSInputText.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\nimport
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
6
|
-
"names": [
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\nimport { DSIconColors } from '@elliemae/ds-icon';\nimport { CloseMedium } from '@elliemae/ds-icons';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport React, { useCallback, useMemo, useRef } from 'react';\nimport { useInputText } from './config/useInputText.js';\nimport type { DSInputTextT } from './react-desc-prop-types.js';\nimport { DSInputTextPropTypesSchema } from './react-desc-prop-types.js';\nimport { StyledClearButton, StyledInput, StyledInputWrapper } from './styled/components.js';\n\nexport const DSInputText: React.ComponentType<DSInputTextT.Props> = (props) => {\n const {\n globalAttributes: { className, id, value: discardedVal, ...otherGlobalAttributes },\n hasFocus,\n handleOnFocus,\n handleOnBlur,\n handleOnChange,\n propsWithDefault,\n xstyledProps,\n ownerPropsConfig,\n } = useInputText(props);\n\n const {\n clearable,\n disabled,\n hasError,\n innerRef,\n placeholder,\n readOnly,\n inputSize,\n onClear,\n value,\n applyAriaDisabled,\n ariaDescribedBy,\n } = propsWithDefault;\n\n const inputRef = useRef<HTMLInputElement>(null);\n const shouldDisplayClearButton = clearable && !disabled && value !== '' && !applyAriaDisabled && !readOnly;\n\n const defaultAriaDescribedBy = useMemo(\n () => (id !== undefined ? `${id}_feedback_message ${id}_error_message` : undefined),\n [id],\n );\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 applyAriaDisabled={applyAriaDisabled}\n isReadOnly={readOnly}\n hasError={hasError}\n hasFocus={hasFocus}\n inputSize={inputSize}\n {...xstyledProps}\n {...ownerPropsConfig}\n >\n <StyledInput\n inputSize={inputSize}\n disabled={disabled}\n placeholder={placeholder}\n readOnly={readOnly}\n innerRef={mergeRefs(innerRef, inputRef)}\n aria-describedby={\n defaultAriaDescribedBy || ariaDescribedBy ? `${defaultAriaDescribedBy} ${ariaDescribedBy}` : undefined\n }\n aria-invalid={hasError}\n id={id}\n aria-disabled={applyAriaDisabled}\n aria-readonly={readOnly}\n // if user provide their own onFocus/onBlur, they will be handled in useGetGlobalAttributes\n // when they don't, we still need to provide our own handlers or useGetGlobalAttributes won't attach them\n onFocus={handleOnFocus}\n onBlur={handleOnBlur}\n {...otherGlobalAttributes}\n onChange={handleOnChange}\n // PUI-17313 - value === undefined && applyAriaDisabled === true -> user can still type.\n // the following looks stupid. But the thing is, we are not validating that user never provides undefined.\n // when user provides undefined, merging keeps undefined, react enters in \"uncontrolled\" mode\n // when in uncontrolled mode, we can't prevent react from changing the dom value directly\n // which means \"if applyAriaDisabled never change the input\" constraint can't be enforced by us\n // to accomplish all that, we have to specifically make react behave still in controlled mode by providing ''\n // we had a team discussion, while this is mostly tech-debt, it would potentially be a breaking change to fix this to always default to ''\n // scenarios where user provides undefined and expect uncontrolled behavior might exist (without applyAriaDisabled)\n // as such, we only specifically fix the case that would cause a bug (applyAriaDisabled = true && value = undefined)\n value={value === undefined && applyAriaDisabled ? '' : value}\n {...ownerPropsConfig}\n />\n {shouldDisplayClearButton && (\n <StyledClearButton\n disabled={disabled || applyAriaDisabled || readOnly}\n aria-label={`Clear input value ${value}`}\n aria-controls={id}\n aria-describedby={`${id}_block_label`}\n buttonType=\"icon\"\n onClick={handleClear}\n size=\"s\"\n {...ownerPropsConfig}\n >\n <CloseMedium color={DSIconColors.PRIMARY} size=\"s\" />\n </StyledClearButton>\n )}\n </StyledInputWrapper>\n );\n};\n\nDSInputText.displayName = 'DSInputText';\nexport const DSInputTextWithSchema = describe(DSInputText);\nDSInputTextWithSchema.propTypes = DSInputTextPropTypesSchema;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmDnB;AAlDJ,qBAA6B;AAC7B,sBAA4B;AAC5B,8BAAyB;AACzB,uBAA0B;AAC1B,mBAAoD;AACpD,0BAA6B;AAE7B,mCAA2C;AAC3C,wBAAmE;AAE5D,MAAM,cAAuD,CAAC,UAAU;AAC7E,QAAM;AAAA,IACJ,kBAAkB,EAAE,WAAW,IAAI,OAAO,cAAc,GAAG,sBAAsB;AAAA,IACjF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,kCAAa,KAAK;AAEtB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,eAAW,qBAAyB,IAAI;AAC9C,QAAM,2BAA2B,aAAa,CAAC,YAAY,UAAU,MAAM,CAAC,qBAAqB,CAAC;AAElG,QAAM,6BAAyB;AAAA,IAC7B,MAAO,OAAO,SAAY,GAAG,EAAE,qBAAqB,EAAE,mBAAmB;AAAA,IACzE,CAAC,EAAE;AAAA,EACL;AAEA,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;AAAA,MACA,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,cAAU,4BAAU,UAAU,QAAQ;AAAA,YACtC,oBACE,0BAA0B,kBAAkB,GAAG,sBAAsB,IAAI,eAAe,KAAK;AAAA,YAE/F,gBAAc;AAAA,YACd;AAAA,YACA,iBAAe;AAAA,YACf,iBAAe;AAAA,YAGf,SAAS;AAAA,YACT,QAAQ;AAAA,YACP,GAAG;AAAA,YACJ,UAAU;AAAA,YAUV,OAAO,UAAU,UAAa,oBAAoB,KAAK;AAAA,YACtD,GAAG;AAAA;AAAA,QACN;AAAA,QACC,4BACC;AAAA,UAAC;AAAA;AAAA,YACC,UAAU,YAAY,qBAAqB;AAAA,YAC3C,cAAY,qBAAqB,KAAK;AAAA,YACtC,iBAAe;AAAA,YACf,oBAAkB,GAAG,EAAE;AAAA,YACvB,YAAW;AAAA,YACX,SAAS;AAAA,YACT,MAAK;AAAA,YACJ,GAAG;AAAA,YAEJ,sDAAC,+BAAY,OAAO,4BAAa,SAAS,MAAK,KAAI;AAAA;AAAA,QACrD;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,YAAY,cAAc;AACnB,MAAM,4BAAwB,kCAAS,WAAW;AACzD,sBAAsB,YAAY;",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
|
@@ -33,20 +33,25 @@ __export(useInputText_exports, {
|
|
|
33
33
|
module.exports = __toCommonJS(useInputText_exports);
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
36
|
-
var import_react = require("react");
|
|
36
|
+
var import_react = __toESM(require("react"));
|
|
37
37
|
var import_constants = require("../constants/index.js");
|
|
38
38
|
var import_react_desc_prop_types = require("../react-desc-prop-types.js");
|
|
39
39
|
const useInputText = (props) => {
|
|
40
40
|
const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.DSInputTextDefaultProps);
|
|
41
41
|
(0, import_ds_props_helpers.useValidateTypescriptPropTypes)(props, import_react_desc_prop_types.DSInputTextPropTypes, import_constants.DSInputTextName);
|
|
42
|
-
const { onValueChange, applyAriaDisabled } = propsWithDefault;
|
|
42
|
+
const { onValueChange, applyAriaDisabled, onChange } = propsWithDefault;
|
|
43
|
+
const userOnChangeRef = import_react.default.useRef(onChange);
|
|
44
|
+
userOnChangeRef.current = onChange;
|
|
45
|
+
const userOnValueChangeRef = import_react.default.useRef(onValueChange);
|
|
46
|
+
userOnValueChangeRef.current = onValueChange;
|
|
43
47
|
const [hasFocus, setHasFocus] = (0, import_react.useState)(false);
|
|
44
48
|
const handleOnChange = (0, import_react.useCallback)(
|
|
45
49
|
(e) => {
|
|
46
50
|
if (applyAriaDisabled) return;
|
|
47
|
-
|
|
51
|
+
userOnChangeRef?.current?.(e);
|
|
52
|
+
userOnValueChangeRef?.current?.(e.target.value, e);
|
|
48
53
|
},
|
|
49
|
-
[
|
|
54
|
+
[applyAriaDisabled]
|
|
50
55
|
);
|
|
51
56
|
const handleOnFocus = (0, import_react.useCallback)(() => {
|
|
52
57
|
setHasFocus(true);
|
|
@@ -54,32 +59,34 @@ const useInputText = (props) => {
|
|
|
54
59
|
const handleOnBlur = (0, import_react.useCallback)(() => {
|
|
55
60
|
setHasFocus(false);
|
|
56
61
|
}, []);
|
|
57
|
-
const globalAttributes = (0, import_ds_props_helpers.useGetGlobalAttributes)(
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
+
const globalAttributes = (0, import_ds_props_helpers.useGetGlobalAttributes)(
|
|
63
|
+
propsWithDefault,
|
|
64
|
+
// the second argument will automatically handle invoking both the user provided event handler, and our event handlers
|
|
65
|
+
// BUT ONLY IF THE USER PROVIDES THE EVENT IN THE FIRST PLACE, ELSE IT'S IGNORED!!!
|
|
66
|
+
{
|
|
67
|
+
onFocus: handleOnFocus,
|
|
68
|
+
onBlur: handleOnBlur
|
|
69
|
+
}
|
|
70
|
+
);
|
|
62
71
|
const xstyledProps = (0, import_ds_props_helpers.useGetXstyledProps)(propsWithDefault);
|
|
63
72
|
const ownerPropsConfig = (0, import_ds_props_helpers.useOwnerProps)(propsWithDefault, { ...props });
|
|
64
73
|
return (0, import_react.useMemo)(
|
|
65
74
|
() => ({
|
|
66
75
|
globalAttributes,
|
|
67
76
|
hasFocus,
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
onBlur: handleOnBlur
|
|
72
|
-
},
|
|
77
|
+
handleOnFocus,
|
|
78
|
+
handleOnBlur,
|
|
79
|
+
handleOnChange,
|
|
73
80
|
propsWithDefault,
|
|
74
81
|
xstyledProps,
|
|
75
82
|
ownerPropsConfig
|
|
76
83
|
}),
|
|
77
84
|
[
|
|
78
85
|
globalAttributes,
|
|
86
|
+
hasFocus,
|
|
87
|
+
handleOnFocus,
|
|
79
88
|
handleOnBlur,
|
|
80
89
|
handleOnChange,
|
|
81
|
-
handleOnFocus,
|
|
82
|
-
hasFocus,
|
|
83
90
|
propsWithDefault,
|
|
84
91
|
xstyledProps,
|
|
85
92
|
ownerPropsConfig
|
|
@@ -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 useOwnerProps,\n useValidateTypescriptPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAMO;
|
|
6
|
-
"names": []
|
|
4
|
+
"sourcesContent": ["import {\n useGetGlobalAttributes,\n useGetXstyledProps,\n useMemoMergePropsWithDefault,\n useOwnerProps,\n useValidateTypescriptPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { DSInputTextName } from '../constants/index.js';\nimport type { DSInputTextT } from '../react-desc-prop-types.js';\nimport { DSInputTextDefaultProps, DSInputTextPropTypes } from '../react-desc-prop-types.js';\n\nexport const useInputText = (props: DSInputTextT.Props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<Required<DSInputTextT.Props>>(props, DSInputTextDefaultProps);\n\n useValidateTypescriptPropTypes(props, DSInputTextPropTypes, DSInputTextName);\n\n const { onValueChange, applyAriaDisabled, onChange } = propsWithDefault;\n // we don't want to recreate handleOnChange if user fails to memoize their onChange handler\n // we only to invoke latest version of it, when the event triggers, so this ref will serve that purpose.\n const userOnChangeRef = React.useRef(onChange);\n userOnChangeRef.current = onChange;\n // same for onValueChange\n const userOnValueChangeRef = React.useRef(onValueChange);\n userOnValueChangeRef.current = onValueChange;\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 if (applyAriaDisabled) return;\n // this could be passed via the second parameter of useGetGlobalAttributes\n // but when applyAriaDisabled is true\n // user provided onChange should NOT be called, this is the simplest way to achieve that.\n // explicitly manually invoking user provided onChange only when appropriate.\n // we use the ref to always get the latest version of it without recreating handleOnChange.\n userOnChangeRef?.current?.(e);\n userOnValueChangeRef?.current?.(e.target.value, e);\n },\n [applyAriaDisabled],\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(\n propsWithDefault,\n // the second argument will automatically handle invoking both the user provided event handler, and our event handlers\n // BUT ONLY IF THE USER PROVIDES THE EVENT IN THE FIRST PLACE, ELSE IT'S IGNORED!!!\n {\n onFocus: handleOnFocus,\n onBlur: handleOnBlur,\n },\n );\n\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n\n const ownerPropsConfig = useOwnerProps(propsWithDefault, { ...props });\n\n return useMemo(\n () => ({\n globalAttributes,\n hasFocus,\n handleOnFocus,\n handleOnBlur,\n handleOnChange,\n propsWithDefault,\n xstyledProps,\n ownerPropsConfig,\n }),\n [\n globalAttributes,\n hasFocus,\n handleOnFocus,\n handleOnBlur,\n handleOnChange,\n propsWithDefault,\n xstyledProps,\n ownerPropsConfig,\n ],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAMO;AACP,mBAAsD;AACtD,uBAAgC;AAEhC,mCAA8D;AAEvD,MAAM,eAAe,CAAC,UAA8B;AACzD,QAAM,uBAAmB,sDAA2D,OAAO,oDAAuB;AAElH,8DAA+B,OAAO,mDAAsB,gCAAe;AAE3E,QAAM,EAAE,eAAe,mBAAmB,SAAS,IAAI;AAGvD,QAAM,kBAAkB,aAAAA,QAAM,OAAO,QAAQ;AAC7C,kBAAgB,UAAU;AAE1B,QAAM,uBAAuB,aAAAA,QAAM,OAAO,aAAa;AACvD,uBAAqB,UAAU;AAK/B,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,KAAK;AAK9C,QAAM,qBAA6D;AAAA,IACjE,CAAC,MAAM;AACL,UAAI,kBAAmB;AAMvB,uBAAiB,UAAU,CAAC;AAC5B,4BAAsB,UAAU,EAAE,OAAO,OAAO,CAAC;AAAA,IACnD;AAAA,IACA,CAAC,iBAAiB;AAAA,EACpB;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;AAAA,IACvB;AAAA;AAAA;AAAA,IAGA;AAAA,MACE,SAAS;AAAA,MACT,QAAQ;AAAA,IACV;AAAA,EACF;AAEA,QAAM,mBAAe,4CAAmB,gBAAgB;AAExD,QAAM,uBAAmB,uCAAc,kBAAkB,EAAE,GAAG,MAAM,CAAC;AAErE,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
|
|
6
|
+
"names": ["React"]
|
|
7
7
|
}
|
package/dist/cjs/package.json
CHANGED
package/dist/esm/DSInputText.js
CHANGED
|
@@ -1,18 +1,20 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
-
import React2, { useCallback, useMemo, useRef } from "react";
|
|
4
|
-
import { CloseMedium } from "@elliemae/ds-icons";
|
|
5
3
|
import { DSIconColors } from "@elliemae/ds-icon";
|
|
6
|
-
import {
|
|
4
|
+
import { CloseMedium } from "@elliemae/ds-icons";
|
|
7
5
|
import { describe } from "@elliemae/ds-props-helpers";
|
|
6
|
+
import { mergeRefs } from "@elliemae/ds-system";
|
|
7
|
+
import { useCallback, useMemo, useRef } from "react";
|
|
8
8
|
import { useInputText } from "./config/useInputText.js";
|
|
9
9
|
import { DSInputTextPropTypesSchema } from "./react-desc-prop-types.js";
|
|
10
10
|
import { StyledClearButton, StyledInput, StyledInputWrapper } from "./styled/components.js";
|
|
11
11
|
const DSInputText = (props) => {
|
|
12
12
|
const {
|
|
13
|
-
globalAttributes: { className, id, ...otherGlobalAttributes },
|
|
13
|
+
globalAttributes: { className, id, value: discardedVal, ...otherGlobalAttributes },
|
|
14
14
|
hasFocus,
|
|
15
|
-
|
|
15
|
+
handleOnFocus,
|
|
16
|
+
handleOnBlur,
|
|
17
|
+
handleOnChange,
|
|
16
18
|
propsWithDefault,
|
|
17
19
|
xstyledProps,
|
|
18
20
|
ownerPropsConfig
|
|
@@ -40,14 +42,6 @@ const DSInputText = (props) => {
|
|
|
40
42
|
onClear();
|
|
41
43
|
inputRef?.current?.focus();
|
|
42
44
|
}, [onClear]);
|
|
43
|
-
const shouldCallOnChange = React2.useMemo(() => !applyAriaDisabled && !readOnly, [applyAriaDisabled, readOnly]);
|
|
44
|
-
const otherGlobalAttributesCleaned = React2.useMemo(
|
|
45
|
-
() => ({
|
|
46
|
-
...otherGlobalAttributes,
|
|
47
|
-
...shouldCallOnChange ? {} : { onChange: void 0 }
|
|
48
|
-
}),
|
|
49
|
-
[otherGlobalAttributes, shouldCallOnChange]
|
|
50
|
-
);
|
|
51
45
|
return /* @__PURE__ */ jsxs(
|
|
52
46
|
StyledInputWrapper,
|
|
53
47
|
{
|
|
@@ -70,14 +64,16 @@ const DSInputText = (props) => {
|
|
|
70
64
|
placeholder,
|
|
71
65
|
readOnly,
|
|
72
66
|
innerRef: mergeRefs(innerRef, inputRef),
|
|
73
|
-
value,
|
|
74
67
|
"aria-describedby": defaultAriaDescribedBy || ariaDescribedBy ? `${defaultAriaDescribedBy} ${ariaDescribedBy}` : void 0,
|
|
75
68
|
"aria-invalid": hasError,
|
|
76
69
|
id,
|
|
77
70
|
"aria-disabled": applyAriaDisabled,
|
|
78
71
|
"aria-readonly": readOnly,
|
|
79
|
-
|
|
80
|
-
|
|
72
|
+
onFocus: handleOnFocus,
|
|
73
|
+
onBlur: handleOnBlur,
|
|
74
|
+
...otherGlobalAttributes,
|
|
75
|
+
onChange: handleOnChange,
|
|
76
|
+
value: value === void 0 && applyAriaDisabled ? "" : value,
|
|
81
77
|
...ownerPropsConfig
|
|
82
78
|
}
|
|
83
79
|
),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSInputText.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
6
|
-
"names": [
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport { DSIconColors } from '@elliemae/ds-icon';\nimport { CloseMedium } from '@elliemae/ds-icons';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport React, { useCallback, useMemo, useRef } from 'react';\nimport { useInputText } from './config/useInputText.js';\nimport type { DSInputTextT } from './react-desc-prop-types.js';\nimport { DSInputTextPropTypesSchema } from './react-desc-prop-types.js';\nimport { StyledClearButton, StyledInput, StyledInputWrapper } from './styled/components.js';\n\nexport const DSInputText: React.ComponentType<DSInputTextT.Props> = (props) => {\n const {\n globalAttributes: { className, id, value: discardedVal, ...otherGlobalAttributes },\n hasFocus,\n handleOnFocus,\n handleOnBlur,\n handleOnChange,\n propsWithDefault,\n xstyledProps,\n ownerPropsConfig,\n } = useInputText(props);\n\n const {\n clearable,\n disabled,\n hasError,\n innerRef,\n placeholder,\n readOnly,\n inputSize,\n onClear,\n value,\n applyAriaDisabled,\n ariaDescribedBy,\n } = propsWithDefault;\n\n const inputRef = useRef<HTMLInputElement>(null);\n const shouldDisplayClearButton = clearable && !disabled && value !== '' && !applyAriaDisabled && !readOnly;\n\n const defaultAriaDescribedBy = useMemo(\n () => (id !== undefined ? `${id}_feedback_message ${id}_error_message` : undefined),\n [id],\n );\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 applyAriaDisabled={applyAriaDisabled}\n isReadOnly={readOnly}\n hasError={hasError}\n hasFocus={hasFocus}\n inputSize={inputSize}\n {...xstyledProps}\n {...ownerPropsConfig}\n >\n <StyledInput\n inputSize={inputSize}\n disabled={disabled}\n placeholder={placeholder}\n readOnly={readOnly}\n innerRef={mergeRefs(innerRef, inputRef)}\n aria-describedby={\n defaultAriaDescribedBy || ariaDescribedBy ? `${defaultAriaDescribedBy} ${ariaDescribedBy}` : undefined\n }\n aria-invalid={hasError}\n id={id}\n aria-disabled={applyAriaDisabled}\n aria-readonly={readOnly}\n // if user provide their own onFocus/onBlur, they will be handled in useGetGlobalAttributes\n // when they don't, we still need to provide our own handlers or useGetGlobalAttributes won't attach them\n onFocus={handleOnFocus}\n onBlur={handleOnBlur}\n {...otherGlobalAttributes}\n onChange={handleOnChange}\n // PUI-17313 - value === undefined && applyAriaDisabled === true -> user can still type.\n // the following looks stupid. But the thing is, we are not validating that user never provides undefined.\n // when user provides undefined, merging keeps undefined, react enters in \"uncontrolled\" mode\n // when in uncontrolled mode, we can't prevent react from changing the dom value directly\n // which means \"if applyAriaDisabled never change the input\" constraint can't be enforced by us\n // to accomplish all that, we have to specifically make react behave still in controlled mode by providing ''\n // we had a team discussion, while this is mostly tech-debt, it would potentially be a breaking change to fix this to always default to ''\n // scenarios where user provides undefined and expect uncontrolled behavior might exist (without applyAriaDisabled)\n // as such, we only specifically fix the case that would cause a bug (applyAriaDisabled = true && value = undefined)\n value={value === undefined && applyAriaDisabled ? '' : value}\n {...ownerPropsConfig}\n />\n {shouldDisplayClearButton && (\n <StyledClearButton\n disabled={disabled || applyAriaDisabled || readOnly}\n aria-label={`Clear input value ${value}`}\n aria-controls={id}\n aria-describedby={`${id}_block_label`}\n buttonType=\"icon\"\n onClick={handleClear}\n size=\"s\"\n {...ownerPropsConfig}\n >\n <CloseMedium color={DSIconColors.PRIMARY} size=\"s\" />\n </StyledClearButton>\n )}\n </StyledInputWrapper>\n );\n};\n\nDSInputText.displayName = 'DSInputText';\nexport const DSInputTextWithSchema = describe(DSInputText);\nDSInputTextWithSchema.propTypes = DSInputTextPropTypesSchema;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACmDnB,SAYE,KAZF;AAlDJ,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAC1B,SAAgB,aAAa,SAAS,cAAc;AACpD,SAAS,oBAAoB;AAE7B,SAAS,kCAAkC;AAC3C,SAAS,mBAAmB,aAAa,0BAA0B;AAE5D,MAAM,cAAuD,CAAC,UAAU;AAC7E,QAAM;AAAA,IACJ,kBAAkB,EAAE,WAAW,IAAI,OAAO,cAAc,GAAG,sBAAsB;AAAA,IACjF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,aAAa,KAAK;AAEtB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,WAAW,OAAyB,IAAI;AAC9C,QAAM,2BAA2B,aAAa,CAAC,YAAY,UAAU,MAAM,CAAC,qBAAqB,CAAC;AAElG,QAAM,yBAAyB;AAAA,IAC7B,MAAO,OAAO,SAAY,GAAG,EAAE,qBAAqB,EAAE,mBAAmB;AAAA,IACzE,CAAC,EAAE;AAAA,EACL;AAEA,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;AAAA,MACA,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,UAAU,UAAU,UAAU,QAAQ;AAAA,YACtC,oBACE,0BAA0B,kBAAkB,GAAG,sBAAsB,IAAI,eAAe,KAAK;AAAA,YAE/F,gBAAc;AAAA,YACd;AAAA,YACA,iBAAe;AAAA,YACf,iBAAe;AAAA,YAGf,SAAS;AAAA,YACT,QAAQ;AAAA,YACP,GAAG;AAAA,YACJ,UAAU;AAAA,YAUV,OAAO,UAAU,UAAa,oBAAoB,KAAK;AAAA,YACtD,GAAG;AAAA;AAAA,QACN;AAAA,QACC,4BACC;AAAA,UAAC;AAAA;AAAA,YACC,UAAU,YAAY,qBAAqB;AAAA,YAC3C,cAAY,qBAAqB,KAAK;AAAA,YACtC,iBAAe;AAAA,YACf,oBAAkB,GAAG,EAAE;AAAA,YACvB,YAAW;AAAA,YACX,SAAS;AAAA,YACT,MAAK;AAAA,YACJ,GAAG;AAAA,YAEJ,8BAAC,eAAY,OAAO,aAAa,SAAS,MAAK,KAAI;AAAA;AAAA,QACrD;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,YAAY,cAAc;AACnB,MAAM,wBAAwB,SAAS,WAAW;AACzD,sBAAsB,YAAY;",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
|
@@ -6,20 +6,25 @@ import {
|
|
|
6
6
|
useOwnerProps,
|
|
7
7
|
useValidateTypescriptPropTypes
|
|
8
8
|
} from "@elliemae/ds-props-helpers";
|
|
9
|
-
import { useCallback, useMemo, useState } from "react";
|
|
9
|
+
import React2, { useCallback, useMemo, useState } from "react";
|
|
10
10
|
import { DSInputTextName } from "../constants/index.js";
|
|
11
11
|
import { DSInputTextDefaultProps, DSInputTextPropTypes } from "../react-desc-prop-types.js";
|
|
12
12
|
const useInputText = (props) => {
|
|
13
13
|
const propsWithDefault = useMemoMergePropsWithDefault(props, DSInputTextDefaultProps);
|
|
14
14
|
useValidateTypescriptPropTypes(props, DSInputTextPropTypes, DSInputTextName);
|
|
15
|
-
const { onValueChange, applyAriaDisabled } = propsWithDefault;
|
|
15
|
+
const { onValueChange, applyAriaDisabled, onChange } = propsWithDefault;
|
|
16
|
+
const userOnChangeRef = React2.useRef(onChange);
|
|
17
|
+
userOnChangeRef.current = onChange;
|
|
18
|
+
const userOnValueChangeRef = React2.useRef(onValueChange);
|
|
19
|
+
userOnValueChangeRef.current = onValueChange;
|
|
16
20
|
const [hasFocus, setHasFocus] = useState(false);
|
|
17
21
|
const handleOnChange = useCallback(
|
|
18
22
|
(e) => {
|
|
19
23
|
if (applyAriaDisabled) return;
|
|
20
|
-
|
|
24
|
+
userOnChangeRef?.current?.(e);
|
|
25
|
+
userOnValueChangeRef?.current?.(e.target.value, e);
|
|
21
26
|
},
|
|
22
|
-
[
|
|
27
|
+
[applyAriaDisabled]
|
|
23
28
|
);
|
|
24
29
|
const handleOnFocus = useCallback(() => {
|
|
25
30
|
setHasFocus(true);
|
|
@@ -27,32 +32,34 @@ const useInputText = (props) => {
|
|
|
27
32
|
const handleOnBlur = useCallback(() => {
|
|
28
33
|
setHasFocus(false);
|
|
29
34
|
}, []);
|
|
30
|
-
const globalAttributes = useGetGlobalAttributes(
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
+
const globalAttributes = useGetGlobalAttributes(
|
|
36
|
+
propsWithDefault,
|
|
37
|
+
// the second argument will automatically handle invoking both the user provided event handler, and our event handlers
|
|
38
|
+
// BUT ONLY IF THE USER PROVIDES THE EVENT IN THE FIRST PLACE, ELSE IT'S IGNORED!!!
|
|
39
|
+
{
|
|
40
|
+
onFocus: handleOnFocus,
|
|
41
|
+
onBlur: handleOnBlur
|
|
42
|
+
}
|
|
43
|
+
);
|
|
35
44
|
const xstyledProps = useGetXstyledProps(propsWithDefault);
|
|
36
45
|
const ownerPropsConfig = useOwnerProps(propsWithDefault, { ...props });
|
|
37
46
|
return useMemo(
|
|
38
47
|
() => ({
|
|
39
48
|
globalAttributes,
|
|
40
49
|
hasFocus,
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
onBlur: handleOnBlur
|
|
45
|
-
},
|
|
50
|
+
handleOnFocus,
|
|
51
|
+
handleOnBlur,
|
|
52
|
+
handleOnChange,
|
|
46
53
|
propsWithDefault,
|
|
47
54
|
xstyledProps,
|
|
48
55
|
ownerPropsConfig
|
|
49
56
|
}),
|
|
50
57
|
[
|
|
51
58
|
globalAttributes,
|
|
59
|
+
hasFocus,
|
|
60
|
+
handleOnFocus,
|
|
52
61
|
handleOnBlur,
|
|
53
62
|
handleOnChange,
|
|
54
|
-
handleOnFocus,
|
|
55
|
-
hasFocus,
|
|
56
63
|
propsWithDefault,
|
|
57
64
|
xstyledProps,
|
|
58
65
|
ownerPropsConfig
|
|
@@ -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 useOwnerProps,\n useValidateTypescriptPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;
|
|
6
|
-
"names": []
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import {\n useGetGlobalAttributes,\n useGetXstyledProps,\n useMemoMergePropsWithDefault,\n useOwnerProps,\n useValidateTypescriptPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { DSInputTextName } from '../constants/index.js';\nimport type { DSInputTextT } from '../react-desc-prop-types.js';\nimport { DSInputTextDefaultProps, DSInputTextPropTypes } from '../react-desc-prop-types.js';\n\nexport const useInputText = (props: DSInputTextT.Props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<Required<DSInputTextT.Props>>(props, DSInputTextDefaultProps);\n\n useValidateTypescriptPropTypes(props, DSInputTextPropTypes, DSInputTextName);\n\n const { onValueChange, applyAriaDisabled, onChange } = propsWithDefault;\n // we don't want to recreate handleOnChange if user fails to memoize their onChange handler\n // we only to invoke latest version of it, when the event triggers, so this ref will serve that purpose.\n const userOnChangeRef = React.useRef(onChange);\n userOnChangeRef.current = onChange;\n // same for onValueChange\n const userOnValueChangeRef = React.useRef(onValueChange);\n userOnValueChangeRef.current = onValueChange;\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 if (applyAriaDisabled) return;\n // this could be passed via the second parameter of useGetGlobalAttributes\n // but when applyAriaDisabled is true\n // user provided onChange should NOT be called, this is the simplest way to achieve that.\n // explicitly manually invoking user provided onChange only when appropriate.\n // we use the ref to always get the latest version of it without recreating handleOnChange.\n userOnChangeRef?.current?.(e);\n userOnValueChangeRef?.current?.(e.target.value, e);\n },\n [applyAriaDisabled],\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(\n propsWithDefault,\n // the second argument will automatically handle invoking both the user provided event handler, and our event handlers\n // BUT ONLY IF THE USER PROVIDES THE EVENT IN THE FIRST PLACE, ELSE IT'S IGNORED!!!\n {\n onFocus: handleOnFocus,\n onBlur: handleOnBlur,\n },\n );\n\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n\n const ownerPropsConfig = useOwnerProps(propsWithDefault, { ...props });\n\n return useMemo(\n () => ({\n globalAttributes,\n hasFocus,\n handleOnFocus,\n handleOnBlur,\n handleOnChange,\n propsWithDefault,\n xstyledProps,\n ownerPropsConfig,\n }),\n [\n globalAttributes,\n hasFocus,\n handleOnFocus,\n handleOnBlur,\n handleOnChange,\n propsWithDefault,\n xstyledProps,\n ownerPropsConfig,\n ],\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,OAAOA,UAAS,aAAa,SAAS,gBAAgB;AACtD,SAAS,uBAAuB;AAEhC,SAAS,yBAAyB,4BAA4B;AAEvD,MAAM,eAAe,CAAC,UAA8B;AACzD,QAAM,mBAAmB,6BAA2D,OAAO,uBAAuB;AAElH,iCAA+B,OAAO,sBAAsB,eAAe;AAE3E,QAAM,EAAE,eAAe,mBAAmB,SAAS,IAAI;AAGvD,QAAM,kBAAkBA,OAAM,OAAO,QAAQ;AAC7C,kBAAgB,UAAU;AAE1B,QAAM,uBAAuBA,OAAM,OAAO,aAAa;AACvD,uBAAqB,UAAU;AAK/B,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAK9C,QAAM,iBAA6D;AAAA,IACjE,CAAC,MAAM;AACL,UAAI,kBAAmB;AAMvB,uBAAiB,UAAU,CAAC;AAC5B,4BAAsB,UAAU,EAAE,OAAO,OAAO,CAAC;AAAA,IACnD;AAAA,IACA,CAAC,iBAAiB;AAAA,EACpB;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;AAAA,IACvB;AAAA;AAAA;AAAA,IAGA;AAAA,MACE,SAAS;AAAA,MACT,QAAQ;AAAA,IACV;AAAA,EACF;AAEA,QAAM,eAAe,mBAAmB,gBAAgB;AAExD,QAAM,mBAAmB,cAAc,kBAAkB,EAAE,GAAG,MAAM,CAAC;AAErE,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
|
|
6
|
+
"names": ["React"]
|
|
7
7
|
}
|
package/dist/esm/package.json
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import type { DSInputTextT } from '../react-desc-prop-types.js';
|
|
3
3
|
export declare const useInputText: (props: DSInputTextT.Props) => {
|
|
4
4
|
globalAttributes: Partial<Pick<object, "value" | "placeholder" | "disabled" | "readOnly" | "form" | "list" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "async" | "autoComplete" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cite" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "data" | "dateTime" | "default" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "label" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "noValidate" | "open" | "optimum" | "pattern" | "playsInline" | "poster" | "preload" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "span" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "summary" | "target" | "type" | "useMap" | "width" | "wmode" | "wrap"> & Omit<{
|
|
@@ -80,7 +80,7 @@ export declare const useInputText: (props: DSInputTextT.Props) => {
|
|
|
80
80
|
onBlurCapture?: React.FocusEventHandler<Element> | undefined;
|
|
81
81
|
onChange?: React.FormEventHandler<Element> | undefined;
|
|
82
82
|
onChangeCapture?: React.FormEventHandler<Element> | undefined;
|
|
83
|
-
onBeforeInput?: React.
|
|
83
|
+
onBeforeInput?: React.InputEventHandler<Element> | undefined;
|
|
84
84
|
onBeforeInputCapture?: React.FormEventHandler<Element> | undefined;
|
|
85
85
|
onInput?: React.FormEventHandler<Element> | undefined;
|
|
86
86
|
onInputCapture?: React.FormEventHandler<Element> | undefined;
|
|
@@ -368,11 +368,9 @@ export declare const useInputText: (props: DSInputTextT.Props) => {
|
|
|
368
368
|
wrap?: string | undefined | undefined;
|
|
369
369
|
}, never>>;
|
|
370
370
|
hasFocus: boolean;
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
onBlur: React.FocusEventHandler<HTMLInputElement>;
|
|
375
|
-
};
|
|
371
|
+
handleOnFocus: React.FocusEventHandler<HTMLInputElement>;
|
|
372
|
+
handleOnBlur: React.FocusEventHandler<HTMLInputElement>;
|
|
373
|
+
handleOnChange: React.ChangeEventHandler<HTMLInputElement>;
|
|
376
374
|
propsWithDefault: Required<DSInputTextT.Props>;
|
|
377
375
|
xstyledProps: import("@elliemae/ds-props-helpers").XstyledProps;
|
|
378
376
|
ownerPropsConfig: {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-form-input-text",
|
|
3
|
-
"version": "3.57.0-next.
|
|
3
|
+
"version": "3.57.0-next.50",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Controlled Form Input Text",
|
|
6
6
|
"files": [
|
|
@@ -35,41 +35,42 @@
|
|
|
35
35
|
"reportFile": "tests.xml",
|
|
36
36
|
"indent": 4
|
|
37
37
|
},
|
|
38
|
+
"scripts": {
|
|
39
|
+
"dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",
|
|
40
|
+
"test": "pui-cli test --passWithNoTests --coverage=\"false\"",
|
|
41
|
+
"lint": "node ../../../scripts/lint.mjs --fix",
|
|
42
|
+
"lint:strict": "node ../../../scripts/lint-strict.mjs",
|
|
43
|
+
"dts": "node ../../../scripts/dts.mjs",
|
|
44
|
+
"build": "cross-env NODE_ENV=production node ../../../scripts/build/build.mjs",
|
|
45
|
+
"checkDeps": "npm exec ../../util/ds-codemods -- check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
|
|
46
|
+
},
|
|
38
47
|
"dependencies": {
|
|
39
|
-
"@elliemae/ds-button-v2": "3.57.0-next.
|
|
40
|
-
"@elliemae/ds-grid": "3.57.0-next.
|
|
41
|
-
"@elliemae/ds-icon": "3.57.0-next.
|
|
42
|
-
"@elliemae/ds-
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-
|
|
48
|
+
"@elliemae/ds-button-v2": "3.57.0-next.50",
|
|
49
|
+
"@elliemae/ds-grid": "3.57.0-next.50",
|
|
50
|
+
"@elliemae/ds-icon": "3.57.0-next.50",
|
|
51
|
+
"@elliemae/ds-icons": "3.57.0-next.50",
|
|
52
|
+
"@elliemae/ds-props-helpers": "3.57.0-next.50",
|
|
53
|
+
"@elliemae/ds-system": "3.57.0-next.50"
|
|
45
54
|
},
|
|
46
55
|
"devDependencies": {
|
|
47
|
-
"@elliemae/
|
|
48
|
-
"@elliemae/
|
|
49
|
-
"
|
|
50
|
-
"
|
|
51
|
-
"
|
|
52
|
-
"
|
|
53
|
-
"
|
|
56
|
+
"@elliemae/ds-monorepo-devops": "3.57.0-next.50",
|
|
57
|
+
"@elliemae/ds-test-utils": "3.57.0-next.50",
|
|
58
|
+
"@elliemae/pui-cli": "catalog:",
|
|
59
|
+
"@elliemae/pui-theme": "catalog:",
|
|
60
|
+
"jest": "catalog:",
|
|
61
|
+
"styled-components": "catalog:",
|
|
62
|
+
"styled-system": "catalog:"
|
|
54
63
|
},
|
|
55
64
|
"peerDependencies": {
|
|
56
|
-
"@elliemae/pui-theme": "
|
|
57
|
-
"react": "
|
|
58
|
-
"react-dom": "
|
|
59
|
-
"styled-components": "
|
|
60
|
-
"styled-system": "
|
|
65
|
+
"@elliemae/pui-theme": "catalog:",
|
|
66
|
+
"react": "catalog:",
|
|
67
|
+
"react-dom": "catalog:",
|
|
68
|
+
"styled-components": "catalog:",
|
|
69
|
+
"styled-system": "catalog:"
|
|
61
70
|
},
|
|
62
71
|
"publishConfig": {
|
|
63
72
|
"access": "public",
|
|
64
73
|
"typeSafety": true
|
|
65
74
|
},
|
|
66
|
-
"
|
|
67
|
-
|
|
68
|
-
"test": "pui-cli test --passWithNoTests --coverage=\"false\"",
|
|
69
|
-
"lint": "node ../../../scripts/lint.mjs --fix",
|
|
70
|
-
"lint:strict": "node ../../../scripts/lint-strict.mjs",
|
|
71
|
-
"dts": "node ../../../scripts/dts.mjs",
|
|
72
|
-
"build": "cross-env NODE_ENV=production node ../../../scripts/build/build.mjs",
|
|
73
|
-
"checkDeps": "npm exec ../../util/ds-codemods -- check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
|
|
74
|
-
}
|
|
75
|
-
}
|
|
75
|
+
"gitHead": "990bc67e15cecbb87e61ba44977d9d00de40aad5"
|
|
76
|
+
}
|