@elliemae/ds-form-input-text 3.3.1-rc.0 → 3.3.1-rc.1
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 +6 -6
- package/dist/cjs/DSInputText.js.map +2 -2
- package/dist/cjs/config/useInputText.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js.map +1 -1
- package/dist/cjs/styled/borders.js +5 -5
- package/dist/cjs/styled/borders.js.map +2 -2
- package/dist/cjs/styled/components.js.map +2 -2
- package/dist/esm/DSInputText.js +7 -8
- package/dist/esm/DSInputText.js.map +2 -2
- package/dist/esm/config/useInputText.js +0 -1
- package/dist/esm/config/useInputText.js.map +2 -2
- package/dist/esm/exported-related/data-test-ids.js +0 -1
- package/dist/esm/exported-related/data-test-ids.js.map +1 -1
- package/dist/esm/exported-related/index.js +0 -1
- package/dist/esm/exported-related/index.js.map +1 -1
- package/dist/esm/exported-related/theming.js +0 -1
- package/dist/esm/exported-related/theming.js.map +1 -1
- package/dist/esm/index.js +0 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/react-desc-prop-types.js +0 -1
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/styled/borders.js +6 -7
- package/dist/esm/styled/borders.js.map +2 -2
- package/dist/esm/styled/components.js +0 -1
- package/dist/esm/styled/components.js.map +2 -2
- package/package.json +7 -7
package/dist/cjs/DSInputText.js
CHANGED
|
@@ -36,7 +36,7 @@ var import_react_desc_prop_types = require("./react-desc-prop-types");
|
|
|
36
36
|
var import_components = require("./styled/components");
|
|
37
37
|
const DSInputText = (props) => {
|
|
38
38
|
const {
|
|
39
|
-
globalAttributes: { className, ...otherGlobalAttributes },
|
|
39
|
+
globalAttributes: { className, id, ...otherGlobalAttributes },
|
|
40
40
|
hasFocus,
|
|
41
41
|
handlers,
|
|
42
42
|
propsWithDefault,
|
|
@@ -44,13 +44,11 @@ const DSInputText = (props) => {
|
|
|
44
44
|
} = (0, import_useInputText.useInputText)(props);
|
|
45
45
|
const { clearable, disabled, hasError, innerRef, placeholder, readOnly, inputSize, onClear, value } = propsWithDefault;
|
|
46
46
|
const inputRef = (0, import_react.useRef)(null);
|
|
47
|
-
const currentRef = innerRef ?? inputRef;
|
|
48
47
|
const shouldDisplayClearButton = clearable && value !== "";
|
|
49
48
|
const handleClear = (0, import_react.useCallback)(() => {
|
|
50
49
|
onClear();
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
}, [onClear, currentRef]);
|
|
50
|
+
inputRef?.current?.focus();
|
|
51
|
+
}, [onClear]);
|
|
54
52
|
return /* @__PURE__ */ import_react.default.createElement(import_components.StyledInputWrapper, {
|
|
55
53
|
className,
|
|
56
54
|
cols: shouldDisplayClearButton ? ["auto", "min-content"] : ["auto"],
|
|
@@ -65,8 +63,10 @@ const DSInputText = (props) => {
|
|
|
65
63
|
disabled,
|
|
66
64
|
placeholder,
|
|
67
65
|
readOnly,
|
|
68
|
-
ref:
|
|
66
|
+
ref: (0, import_ds_utilities.mergeRefs)(innerRef, inputRef),
|
|
69
67
|
value,
|
|
68
|
+
"aria-describedby": id !== void 0 ? `${id}_feedback_message` : void 0,
|
|
69
|
+
id,
|
|
70
70
|
...handlers,
|
|
71
71
|
...otherGlobalAttributes
|
|
72
72
|
}), shouldDisplayClearButton && /* @__PURE__ */ import_react.default.createElement(import_components.StyledClearButton, {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSInputText.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useCallback, useRef } from 'react';\nimport { CloseMedium } from '@elliemae/ds-icons';\nimport { DSIconColors } from '@elliemae/ds-icon';\nimport { describe } 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, ...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(null);\n const
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA2C;AAC3C,sBAA4B;AAC5B,qBAA6B;AAC7B,
|
|
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": ";;;;;;;;;;;;;;;;;;;;;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;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,sCAAa,KAAK;AAEtB,QAAM,EAAE,WAAW,UAAU,UAAU,UAAU,aAAa,UAAU,WAAW,SAAS,UAC1F;AAEF,QAAM,WAAW,yBAAyB,IAAI;AAC9C,QAAM,2BAA2B,aAAa,UAAU;AAExD,QAAM,cAAc,8BAAY,MAAM;AACpC,YAAQ;AACR,cAAU,SAAS,MAAM;AAAA,EAC3B,GAAG,CAAC,OAAO,CAAC;AAEZ,SACE,mDAAC;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,mDAAC;AAAA,IACC,eAAa,4CAAuB;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK,mCAAU,UAAU,QAAQ;AAAA,IACjC;AAAA,IACA,oBAAkB,OAAO,SAAY,GAAG,wBAAwB;AAAA,IAChE;AAAA,IACC,GAAG;AAAA,IACH,GAAG;AAAA,GACN,GACC,4BACC,mDAAC;AAAA,IACC,cAAW;AAAA,IACX,YAAW;AAAA,IACX,eAAa,4CAAuB;AAAA,IACpC,SAAS;AAAA,KAET,mDAAC;AAAA,IAAY,OAAO,4BAAa;AAAA,GAAS,CAC5C,CAEJ;AAEJ;AAEA,YAAY,YAAY;AACxB,YAAY,cAAc;AACnB,MAAM,wBAAwB,kCAAS,WAAW;AACzD,sBAAsB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/config/useInputText.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import {\n useGetGlobalAttributes,\n useGetXstyledProps,\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n} from '@elliemae/ds-utilities';\nimport 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(props, defaultProps);\n\n useValidateTypescriptPropTypes(props, DSInputTextPropTypes);\n\n const { onValueChange } = propsWithDefault;\n\n // =============================================================================\n // INTERNAL STATE\n // =============================================================================\n const [hasFocus, setHasFocus] = useState(false);\n\n // ===========================================================================\n // INTERNAL HANDLERS\n // ===========================================================================\n const handleOnChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(\n (e) => {\n onValueChange(e.target.value, e);\n },\n [onValueChange],\n );\n\n const handleOnFocus: React.FocusEventHandler<HTMLInputElement> = useCallback(() => {\n setHasFocus(true);\n }, []);\n\n const handleOnBlur: React.FocusEventHandler<HTMLInputElement> = useCallback(() => {\n setHasFocus(false);\n }, []);\n\n // =============================================================================\n // GLOBAL ATTRIBUTES & XSTYLED PROPS\n // =============================================================================\n const globalAttributes = useGetGlobalAttributes(propsWithDefault, {\n onChange: handleOnChange,\n onFocus: handleOnFocus,\n onBlur: handleOnBlur,\n });\n\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n\n return useMemo(\n () => ({\n globalAttributes,\n hasFocus,\n handlers: {\n onChange: handleOnChange,\n onFocus: handleOnFocus,\n onBlur: handleOnBlur,\n },\n propsWithDefault,\n xstyledProps,\n }),\n [globalAttributes, handleOnBlur, handleOnChange, handleOnFocus, hasFocus, propsWithDefault, xstyledProps],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAKO;AACP,mBAAsD;AACtD,mCAAiE;AAE1D,MAAM,eAAe,CAAC,UAA8B;AACzD,QAAM,mBAAmB,
|
|
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": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAKO;AACP,mBAAsD;AACtD,mCAAiE;AAE1D,MAAM,eAAe,CAAC,UAA8B;AACzD,QAAM,mBAAmB,sDAA4D,OAAO,yCAAY;AAExG,0DAA+B,OAAO,iDAAoB;AAE1D,QAAM,EAAE,kBAAkB;AAK1B,QAAM,CAAC,UAAU,eAAe,2BAAS,KAAK;AAK9C,QAAM,iBAA6D,8BACjE,CAAC,MAAM;AACL,kBAAc,EAAE,OAAO,OAAO,CAAC;AAAA,EACjC,GACA,CAAC,aAAa,CAChB;AAEA,QAAM,gBAA2D,8BAAY,MAAM;AACjF,gBAAY,IAAI;AAAA,EAClB,GAAG,CAAC,CAAC;AAEL,QAAM,eAA0D,8BAAY,MAAM;AAChF,gBAAY,KAAK;AAAA,EACnB,GAAG,CAAC,CAAC;AAKL,QAAM,mBAAmB,gDAAuB,kBAAkB;AAAA,IAChE,UAAU;AAAA,IACV,SAAS;AAAA,IACT,QAAQ;AAAA,EACV,CAAC;AAED,QAAM,eAAe,4CAAmB,gBAAgB;AAExD,SAAO,0BACL,MAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,UAAU;AAAA,MACR,UAAU;AAAA,MACV,SAAS;AAAA,MACT,QAAQ;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,EACF,IACA,CAAC,kBAAkB,cAAc,gBAAgB,eAAe,UAAU,kBAAkB,YAAY,CAC1G;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.ts", "../../../../scripts/build/transpile/react-shim.js"],
|
|
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 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.
|
|
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
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
|
}
|
|
@@ -28,22 +28,22 @@ module.exports = __toCommonJS(borders_exports);
|
|
|
28
28
|
var React = __toESM(require("react"));
|
|
29
29
|
var import_ds_system = require("@elliemae/ds-system");
|
|
30
30
|
const commonBorderCss = import_ds_system.css`
|
|
31
|
-
border: 1px solid
|
|
31
|
+
border: 1px solid neutral-400;
|
|
32
32
|
`;
|
|
33
33
|
const readOnlyBorderCss = import_ds_system.css`
|
|
34
34
|
border: 1px solid transparent;
|
|
35
|
-
border-top-color:
|
|
35
|
+
border-top-color: neutral-400;
|
|
36
36
|
`;
|
|
37
37
|
const disabledBorderCss = commonBorderCss;
|
|
38
38
|
const hasErrorBorderCss = import_ds_system.css`
|
|
39
|
-
border: 1px solid
|
|
39
|
+
border: 1px solid danger-900;
|
|
40
40
|
`;
|
|
41
41
|
const hoverBorderCss = import_ds_system.css`
|
|
42
|
-
border: 1px solid
|
|
42
|
+
border: 1px solid brand-700;
|
|
43
43
|
`;
|
|
44
44
|
const focusBorderCss = import_ds_system.css`
|
|
45
45
|
border: 1px solid transparent;
|
|
46
|
-
outline: 2px solid
|
|
46
|
+
outline: 2px solid brand-700;
|
|
47
47
|
outline-offset: -2px;
|
|
48
48
|
`;
|
|
49
49
|
const getBorderCss = (props) => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/styled/borders.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,
|
|
4
|
+
"sourcesContent": ["import { 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 neutral-400;\n`;\n\nconst readOnlyBorderCss: FlattenSimpleInterpolation = css`\n border: 1px solid transparent;\n border-top-color: neutral-400;\n`;\n\nconst disabledBorderCss = commonBorderCss;\n\nconst hasErrorBorderCss: FlattenSimpleInterpolation = css`\n border: 1px solid danger-900;\n`;\n\nconst hoverBorderCss: FlattenSimpleInterpolation = css`\n border: 1px solid brand-700;\n`;\n\nconst focusBorderCss: FlattenSimpleInterpolation = css`\n border: 1px solid transparent;\n outline: 2px solid 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": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAgD;AAShD,MAAM,kBAA8C;AAAA;AAAA;AAIpD,MAAM,oBAAgD;AAAA;AAAA;AAAA;AAKtD,MAAM,oBAAoB;AAE1B,MAAM,oBAAgD;AAAA;AAAA;AAItD,MAAM,iBAA6C;AAAA;AAAA;AAInD,MAAM,iBAA6C;AAAA;AAAA;AAAA;AAAA;AAM5C,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
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/styled/components.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
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 {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA2B;AAC3B,qBAAqB;AACrB,uBAAkD;AAClD,8BAAkD;
|
|
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": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA2B;AAC3B,qBAAqB;AACrB,uBAAkD;AAClD,8BAAkD;AAClD,qBAAgD;AAUzC,MAAM,qBAAqB,6BAAO,qBAAM;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,yCAAiB;AACzB,CAAC;AAAA,YACW,CAAC,EAAE,gBAAiB,cAAc,MAAM,SAAS;AAAA;AAAA,IAEzD;AAAA;AAAA;AAAA;AAAA,MAIE;AAAA;AAAA;AAAA,IAGF;AAAA,IACA;AAAA,IACA;AAAA;AAGG,MAAM,cAAc,6BAAO,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,oBAAoB,6BAAO,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
|
}
|
package/dist/esm/DSInputText.js
CHANGED
|
@@ -1,16 +1,15 @@
|
|
|
1
|
-
"use strict";
|
|
2
1
|
import * as React from "react";
|
|
3
2
|
import React2, { useCallback, useRef } from "react";
|
|
4
3
|
import { CloseMedium } from "@elliemae/ds-icons";
|
|
5
4
|
import { DSIconColors } from "@elliemae/ds-icon";
|
|
6
|
-
import { describe } from "@elliemae/ds-utilities";
|
|
5
|
+
import { describe, mergeRefs } from "@elliemae/ds-utilities";
|
|
7
6
|
import { useInputText } from "./config/useInputText";
|
|
8
7
|
import { DSInputTextDataTestIds } from "./exported-related/data-test-ids";
|
|
9
8
|
import { DSInputTextPropTypes } from "./react-desc-prop-types";
|
|
10
9
|
import { StyledClearButton, StyledInput, StyledInputWrapper } from "./styled/components";
|
|
11
10
|
const DSInputText = (props) => {
|
|
12
11
|
const {
|
|
13
|
-
globalAttributes: { className, ...otherGlobalAttributes },
|
|
12
|
+
globalAttributes: { className, id, ...otherGlobalAttributes },
|
|
14
13
|
hasFocus,
|
|
15
14
|
handlers,
|
|
16
15
|
propsWithDefault,
|
|
@@ -18,13 +17,11 @@ const DSInputText = (props) => {
|
|
|
18
17
|
} = useInputText(props);
|
|
19
18
|
const { clearable, disabled, hasError, innerRef, placeholder, readOnly, inputSize, onClear, value } = propsWithDefault;
|
|
20
19
|
const inputRef = useRef(null);
|
|
21
|
-
const currentRef = innerRef ?? inputRef;
|
|
22
20
|
const shouldDisplayClearButton = clearable && value !== "";
|
|
23
21
|
const handleClear = useCallback(() => {
|
|
24
22
|
onClear();
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
}, [onClear, currentRef]);
|
|
23
|
+
inputRef?.current?.focus();
|
|
24
|
+
}, [onClear]);
|
|
28
25
|
return /* @__PURE__ */ React2.createElement(StyledInputWrapper, {
|
|
29
26
|
className,
|
|
30
27
|
cols: shouldDisplayClearButton ? ["auto", "min-content"] : ["auto"],
|
|
@@ -39,8 +36,10 @@ const DSInputText = (props) => {
|
|
|
39
36
|
disabled,
|
|
40
37
|
placeholder,
|
|
41
38
|
readOnly,
|
|
42
|
-
ref:
|
|
39
|
+
ref: mergeRefs(innerRef, inputRef),
|
|
43
40
|
value,
|
|
41
|
+
"aria-describedby": id !== void 0 ? `${id}_feedback_message` : void 0,
|
|
42
|
+
id,
|
|
44
43
|
...handlers,
|
|
45
44
|
...otherGlobalAttributes
|
|
46
45
|
}), shouldDisplayClearButton && /* @__PURE__ */ React2.createElement(StyledClearButton, {
|
|
@@ -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", "import React, { useCallback, useRef } from 'react';\nimport { CloseMedium } from '@elliemae/ds-icons';\nimport { DSIconColors } from '@elliemae/ds-icon';\nimport { describe } 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, ...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(null);\n const
|
|
5
|
-
"mappings": "
|
|
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;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEO,MAAM,cAAuD,CAAC,UAAU;AAC7E,QAAM;AAAA,IACJ,kBAAkB,EAAE,WAAW,OAAO;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,aAAa,KAAK;AAEtB,QAAM,EAAE,WAAW,UAAU,UAAU,UAAU,aAAa,UAAU,WAAW,SAAS,UAC1F;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,qCAAC;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,qCAAC;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,qCAAC;AAAA,IACC,cAAW;AAAA,IACX,YAAW;AAAA,IACX,eAAa,uBAAuB;AAAA,IACpC,SAAS;AAAA,KAET,qCAAC;AAAA,IAAY,OAAO,aAAa;AAAA,GAAS,CAC5C,CAEJ;AAEJ;AAEA,YAAY,YAAY;AACxB,YAAY,cAAc;AACnB,MAAM,wBAAwB,SAAS,WAAW;AACzD,sBAAsB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useInputText.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import {\n useGetGlobalAttributes,\n useGetXstyledProps,\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n} from '@elliemae/ds-utilities';\nimport 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(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": "
|
|
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;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AACA;AAEO,MAAM,eAAe,CAAC,UAA8B;AACzD,QAAM,mBAAmB,6BAA4D,OAAO,YAAY;AAExG,iCAA+B,OAAO,oBAAoB;AAE1D,QAAM,EAAE,kBAAkB;AAK1B,QAAM,CAAC,UAAU,eAAe,SAAS,KAAK;AAK9C,QAAM,iBAA6D,YACjE,CAAC,MAAM;AACL,kBAAc,EAAE,OAAO,OAAO,CAAC;AAAA,EACjC,GACA,CAAC,aAAa,CAChB;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,QACL,MAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,UAAU;AAAA,MACR,UAAU;AAAA,MACV,SAAS;AAAA,MACT,QAAQ;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,EACF,IACA,CAAC,kBAAkB,cAAc,gBAAgB,eAAe,UAAU,kBAAkB,YAAY,CAC1G;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": "
|
|
5
|
+
"mappings": "AAAA;ACAO,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": "
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;",
|
|
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": "
|
|
5
|
+
"mappings": "AAAA;ACAO,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
CHANGED
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": "
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
|
|
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 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.
|
|
5
|
-
"mappings": "
|
|
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;ACCA;AAAA;AAAA;AAAA;AAAA;AAyBO,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
|
}
|
|
@@ -1,23 +1,22 @@
|
|
|
1
|
-
"use strict";
|
|
2
1
|
import * as React from "react";
|
|
3
|
-
import {
|
|
2
|
+
import { css } from "@elliemae/ds-system";
|
|
4
3
|
const commonBorderCss = css`
|
|
5
|
-
border: 1px solid
|
|
4
|
+
border: 1px solid neutral-400;
|
|
6
5
|
`;
|
|
7
6
|
const readOnlyBorderCss = css`
|
|
8
7
|
border: 1px solid transparent;
|
|
9
|
-
border-top-color:
|
|
8
|
+
border-top-color: neutral-400;
|
|
10
9
|
`;
|
|
11
10
|
const disabledBorderCss = commonBorderCss;
|
|
12
11
|
const hasErrorBorderCss = css`
|
|
13
|
-
border: 1px solid
|
|
12
|
+
border: 1px solid danger-900;
|
|
14
13
|
`;
|
|
15
14
|
const hoverBorderCss = css`
|
|
16
|
-
border: 1px solid
|
|
15
|
+
border: 1px solid brand-700;
|
|
17
16
|
`;
|
|
18
17
|
const focusBorderCss = css`
|
|
19
18
|
border: 1px solid transparent;
|
|
20
|
-
outline: 2px solid
|
|
19
|
+
outline: 2px solid brand-700;
|
|
21
20
|
outline-offset: -2px;
|
|
22
21
|
`;
|
|
23
22
|
const getBorderCss = (props) => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/styled/borders.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import {
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { 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 neutral-400;\n`;\n\nconst readOnlyBorderCss: FlattenSimpleInterpolation = css`\n border: 1px solid transparent;\n border-top-color: neutral-400;\n`;\n\nconst disabledBorderCss = commonBorderCss;\n\nconst hasErrorBorderCss: FlattenSimpleInterpolation = css`\n border: 1px solid danger-900;\n`;\n\nconst hoverBorderCss: FlattenSimpleInterpolation = css`\n border: 1px solid brand-700;\n`;\n\nconst focusBorderCss: FlattenSimpleInterpolation = css`\n border: 1px solid transparent;\n outline: 2px solid 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;ACAA;AASA,MAAM,kBAA8C;AAAA;AAAA;AAIpD,MAAM,oBAAgD;AAAA;AAAA;AAAA;AAKtD,MAAM,oBAAoB;AAE1B,MAAM,oBAAgD;AAAA;AAAA;AAItD,MAAM,iBAA6C;AAAA;AAAA;AAInD,MAAM,iBAA6C;AAAA;AAAA;AAAA;AAAA;AAM5C,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
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/styled/components.tsx"],
|
|
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 {
|
|
5
|
-
"mappings": "
|
|
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;ACAA;AACA;AACA;AACA;AACA;AAUO,MAAM,qBAAqB,OAAO,MAAM;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAAA,YACW,CAAC,EAAE,gBAAiB,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.3.1-rc.
|
|
3
|
+
"version": "3.3.1-rc.1",
|
|
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.3.1-rc.
|
|
39
|
-
"@elliemae/ds-grid": "3.3.1-rc.
|
|
40
|
-
"@elliemae/ds-icon": "3.3.1-rc.
|
|
41
|
-
"@elliemae/ds-icons": "3.3.1-rc.
|
|
42
|
-
"@elliemae/ds-system": "3.3.1-rc.
|
|
43
|
-
"@elliemae/ds-utilities": "3.3.1-rc.
|
|
38
|
+
"@elliemae/ds-button": "3.3.1-rc.1",
|
|
39
|
+
"@elliemae/ds-grid": "3.3.1-rc.1",
|
|
40
|
+
"@elliemae/ds-icon": "3.3.1-rc.1",
|
|
41
|
+
"@elliemae/ds-icons": "3.3.1-rc.1",
|
|
42
|
+
"@elliemae/ds-system": "3.3.1-rc.1",
|
|
43
|
+
"@elliemae/ds-utilities": "3.3.1-rc.1"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@elliemae/pui-theme": "~2.6.0",
|