@elliemae/ds-form-input-text 3.50.1-next.9 → 3.51.0-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/DSInputText.js +7 -2
- package/dist/cjs/DSInputText.js.map +2 -2
- package/dist/cjs/exported-related/theming.js +1 -1
- package/dist/cjs/exported-related/theming.js.map +1 -1
- package/dist/cjs/react-desc-prop-types.js +1 -0
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/styled/borders.js +11 -12
- package/dist/cjs/styled/borders.js.map +2 -2
- package/dist/cjs/styled/components.js +7 -2
- package/dist/cjs/styled/components.js.map +2 -2
- package/dist/esm/DSInputText.js +8 -3
- package/dist/esm/DSInputText.js.map +2 -2
- package/dist/esm/exported-related/theming.js +1 -1
- package/dist/esm/exported-related/theming.js.map +1 -1
- package/dist/esm/react-desc-prop-types.js +1 -0
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/styled/borders.js +11 -12
- package/dist/esm/styled/borders.js.map +2 -2
- package/dist/esm/styled/components.js +7 -2
- package/dist/esm/styled/components.js.map +2 -2
- package/dist/types/exported-related/theming.d.ts +1 -1
- package/dist/types/react-desc-prop-types.d.ts +4 -3
- package/package.json +13 -13
package/dist/cjs/DSInputText.js
CHANGED
|
@@ -61,10 +61,15 @@ const DSInputText = (props) => {
|
|
|
61
61
|
inputSize,
|
|
62
62
|
onClear,
|
|
63
63
|
value,
|
|
64
|
-
applyAriaDisabled
|
|
64
|
+
applyAriaDisabled,
|
|
65
|
+
ariaDescribedBy
|
|
65
66
|
} = propsWithDefault;
|
|
66
67
|
const inputRef = (0, import_react.useRef)(null);
|
|
67
68
|
const shouldDisplayClearButton = clearable && !disabled && value !== "";
|
|
69
|
+
const defaultAriaDescribedBy = (0, import_react.useMemo)(
|
|
70
|
+
() => id !== void 0 ? `${id}_feedback_message ${id}_error_message` : void 0,
|
|
71
|
+
[id]
|
|
72
|
+
);
|
|
68
73
|
const handleClear = (0, import_react.useCallback)(() => {
|
|
69
74
|
onClear();
|
|
70
75
|
inputRef?.current?.focus();
|
|
@@ -92,7 +97,7 @@ const DSInputText = (props) => {
|
|
|
92
97
|
readOnly,
|
|
93
98
|
innerRef: (0, import_ds_system.mergeRefs)(innerRef, inputRef),
|
|
94
99
|
value,
|
|
95
|
-
"aria-describedby":
|
|
100
|
+
"aria-describedby": defaultAriaDescribedBy || ariaDescribedBy ? `${defaultAriaDescribedBy} ${ariaDescribedBy}` : void 0,
|
|
96
101
|
"aria-invalid": hasError,
|
|
97
102
|
id,
|
|
98
103
|
"aria-disabled": applyAriaDisabled,
|
|
@@ -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 { mergeRefs } from '@elliemae/ds-system';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useInputText } from './config/useInputText.js';\nimport { DSInputTextDataTestIds } from './exported-related/data-test-ids.js';\nimport type { DSInputTextT } from './react-desc-prop-types.js';\nimport { DSInputTextPropTypes } 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, ...otherGlobalAttributes },\n hasFocus,\n handlers,\n propsWithDefault,\n xstyledProps,\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 } = propsWithDefault;\n\n const inputRef = useRef<HTMLInputElement>(null);\n const shouldDisplayClearButton = clearable && !disabled && value !== '';\n\n const handleClear = useCallback(() => {\n onClear();\n inputRef?.current?.focus();\n }, [onClear]);\n\n return (\n <StyledInputWrapper\n className={className}\n cols={shouldDisplayClearButton ? ['auto', 'min-content'] : ['auto']}\n isDisabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\n isReadOnly={readOnly}\n hasError={hasError}\n hasFocus={hasFocus}\n inputSize={inputSize}\n {...xstyledProps}\n >\n <StyledInput\n inputSize={inputSize}\n data-testid={DSInputTextDataTestIds.INPUT}\n disabled={disabled}\n placeholder={placeholder}\n readOnly={readOnly}\n innerRef={mergeRefs(innerRef, inputRef)}\n value={value}\n aria-describedby={
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React, { useCallback, useMemo, useRef } from 'react';\nimport { CloseMedium } from '@elliemae/ds-icons';\nimport { DSIconColors } from '@elliemae/ds-icon';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useInputText } from './config/useInputText.js';\nimport { DSInputTextDataTestIds } from './exported-related/data-test-ids.js';\nimport type { DSInputTextT } from './react-desc-prop-types.js';\nimport { DSInputTextPropTypes } 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, ...otherGlobalAttributes },\n hasFocus,\n handlers,\n propsWithDefault,\n xstyledProps,\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 !== '';\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 >\n <StyledInput\n inputSize={inputSize}\n data-testid={DSInputTextDataTestIds.INPUT}\n disabled={disabled}\n placeholder={placeholder}\n readOnly={readOnly}\n innerRef={mergeRefs(innerRef, inputRef)}\n value={value}\n aria-describedby={\n defaultAriaDescribedBy || ariaDescribedBy ? `${defaultAriaDescribedBy} ${ariaDescribedBy}` : undefined\n }\n aria-invalid={hasError}\n id={id}\n aria-disabled={applyAriaDisabled}\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 size=\"s\"\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 = DSInputTextPropTypes;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgDnB;AAhDJ,mBAAoD;AACpD,sBAA4B;AAC5B,qBAA6B;AAC7B,uBAA0B;AAC1B,8BAAyB;AACzB,0BAA6B;AAC7B,2BAAuC;AAEvC,mCAAqC;AACrC,wBAAmE;AAE5D,MAAM,cAAuD,CAAC,UAAU;AAC7E,QAAM;AAAA,IACJ,kBAAkB,EAAE,WAAW,IAAI,GAAG,sBAAsB;AAAA,IAC5D;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;AAErE,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,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,eAAa,4CAAuB;AAAA,YACpC;AAAA,YACA;AAAA,YACA;AAAA,YACA,cAAU,4BAAU,UAAU,QAAQ;AAAA,YACtC;AAAA,YACA,oBACE,0BAA0B,kBAAkB,GAAG,sBAAsB,IAAI,eAAe,KAAK;AAAA,YAE/F,gBAAc;AAAA,YACd;AAAA,YACA,iBAAe;AAAA,YACd,GAAG;AAAA,YACH,GAAG;AAAA;AAAA,QACN;AAAA,QACC,4BACC;AAAA,UAAC;AAAA;AAAA,YACC,cAAW;AAAA,YACX,YAAW;AAAA,YACX,eAAa,4CAAuB;AAAA,YACpC,SAAS;AAAA,YACT,MAAK;AAAA,YAEL,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
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -33,7 +33,7 @@ __export(theming_exports, {
|
|
|
33
33
|
});
|
|
34
34
|
module.exports = __toCommonJS(theming_exports);
|
|
35
35
|
var React = __toESM(require("react"));
|
|
36
|
-
const DSInputTextName = "
|
|
36
|
+
const DSInputTextName = "DSInputtext";
|
|
37
37
|
const DSInputTextSlots = {
|
|
38
38
|
INPUT_WRAPPER: "root",
|
|
39
39
|
INPUT: "input",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/exported-related/theming.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export const DSInputTextName = '
|
|
4
|
+
"sourcesContent": ["export const DSInputTextName = 'DSInputtext';\n\nexport const DSInputTextSlots = {\n INPUT_WRAPPER: 'root',\n INPUT: 'input',\n CLEAR_BUTTON: 'input-clear-button',\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,kBAAkB;AAExB,MAAM,mBAAmB;AAAA,EAC9B,eAAe;AAAA,EACf,OAAO;AAAA,EACP,cAAc;AAChB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -62,6 +62,7 @@ const DSInputTextPropTypes = {
|
|
|
62
62
|
applyAriaDisabled: import_ds_props_helpers.PropTypes.bool.description(
|
|
63
63
|
"Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION"
|
|
64
64
|
).defaultValue(false),
|
|
65
|
+
ariaDescribedBy: import_ds_props_helpers.PropTypes.string.description("Value passed to the aria-describedby attribute"),
|
|
65
66
|
onClear: import_ds_props_helpers.PropTypes.func.description("Callback triggered when the clearable button is pressed").defaultValue(() => null).signature("(() => void)")
|
|
66
67
|
};
|
|
67
68
|
//# sourceMappingURL=react-desc-prop-types.js.map
|
|
@@ -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 type
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import type React from 'react';\nimport type { GlobalAttributesT, XstyledProps, ValidationMap } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\n\nexport declare namespace DSInputTextT {\n export interface IProps {\n value?: string | number;\n onValueChange?: (\n nextValue: string,\n e: React.ChangeEvent<HTMLInputElement>,\n ) => void | React.Dispatch<React.SetStateAction<string>>;\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 applyAriaDisabled?: boolean;\n ariaDescribedBy?: string;\n }\n\n export interface Props extends IProps, Omit<GlobalAttributesT<HTMLInputElement>, keyof IProps>, XstyledProps {}\n}\n\nexport const defaultProps: DSInputTextT.Props = {\n onValueChange: () => {},\n onClear: () => {},\n placeholder: '',\n disabled: false,\n readOnly: false,\n hasError: false,\n inputSize: 'm',\n clearable: false,\n applyAriaDisabled: 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 applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION',\n )\n .defaultValue(false),\n ariaDescribedBy: PropTypes.string.description('Value passed to the aria-describedby attribute'),\n onClear: PropTypes.func\n .description('Callback triggered when the clearable button is pressed')\n .defaultValue(() => null)\n .signature('(() => void)'),\n} as ValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAAuE;AAwBhE,MAAM,eAAmC;AAAA,EAC9C,eAAe,MAAM;AAAA,EAAC;AAAA,EACtB,SAAS,MAAM;AAAA,EAAC;AAAA,EAChB,aAAa;AAAA,EACb,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,WAAW;AAAA,EACX,WAAW;AAAA,EACX,mBAAmB;AACrB;AAEO,MAAM,uBAAuB;AAAA,EAClC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAO,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,QAAQ,kCAAU,QAAQ,kCAAU,MAAM,CAAC,CAAC,EACjG,YAAY,oBAAoB,EAChC,aAAa,EAAE;AAAA,EAClB,eAAe,kCAAU,KACtB,YAAY,2CAA2C,EACvD,aAAa,MAAM,IAAI,EACvB,UAAU,oDAAoD;AAAA,EACjE,aAAa,kCAAU,OAAO,YAAY,0BAA0B,EAAE,aAAa,EAAE;AAAA,EACrF,UAAU,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,KAAK,UAAU,mCAAmC,CAAC,CAAC,EAC5G,YAAY,wBAAwB,EACpC,aAAa,IAAI;AAAA,EACpB,UAAU,kCAAU,KAAK,YAAY,+BAA+B,EAAE,aAAa,KAAK;AAAA,EACxF,UAAU,kCAAU,KAAK,YAAY,+BAA+B,EAAE,aAAa,KAAK;AAAA,EACxF,UAAU,kCAAU,KAAK,YAAY,6BAA6B,EAAE,aAAa,KAAK;AAAA,EACtF,WAAW,kCAAU,MAAM,CAAC,KAAK,GAAG,CAAC,EAAE,YAAY,mBAAmB,EAAE,aAAa,GAAG;AAAA,EACxF,WAAW,kCAAU,KAAK,YAAY,gCAAgC,EAAE,aAAa,KAAK;AAAA,EAC1F,mBAAmB,kCAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,iBAAiB,kCAAU,OAAO,YAAY,gDAAgD;AAAA,EAC9F,SAAS,kCAAU,KAChB,YAAY,yDAAyD,EACrE,aAAa,MAAM,IAAI,EACvB,UAAU,cAAc;AAC7B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -38,8 +38,9 @@ const commonBorderCss = import_ds_system.css`
|
|
|
38
38
|
border: 1px solid ${import_ds_system.th.color("neutral-400")};
|
|
39
39
|
`;
|
|
40
40
|
const readOnlyBorderCss = import_ds_system.css`
|
|
41
|
-
|
|
42
|
-
border
|
|
41
|
+
background-color: ${import_ds_system.th.color("neutral-050")};
|
|
42
|
+
border: 1px solid ${import_ds_system.th.color("neutral-080")};
|
|
43
|
+
border-bottom: 1px solid ${import_ds_system.th.color("neutral-400")};
|
|
43
44
|
`;
|
|
44
45
|
const disabledBorderCss = commonBorderCss;
|
|
45
46
|
const hasErrorBorderCss = import_ds_system.css`
|
|
@@ -48,6 +49,9 @@ const hasErrorBorderCss = import_ds_system.css`
|
|
|
48
49
|
const hoverBorderCss = import_ds_system.css`
|
|
49
50
|
border: 1px solid ${import_ds_system.th.color("brand-700")};
|
|
50
51
|
`;
|
|
52
|
+
const hoverReadOnlyBorderCss = import_ds_system.css`
|
|
53
|
+
border: 1px solid ${import_ds_system.th.color("brand-600")};
|
|
54
|
+
`;
|
|
51
55
|
const focusBorderCss = import_ds_system.css`
|
|
52
56
|
border: 1px solid transparent;
|
|
53
57
|
outline: 2px solid ${import_ds_system.th.color("brand-700")};
|
|
@@ -55,24 +59,19 @@ const focusBorderCss = import_ds_system.css`
|
|
|
55
59
|
`;
|
|
56
60
|
const getBorderCss = (props) => {
|
|
57
61
|
if (props.isDisabled) return disabledBorderCss;
|
|
58
|
-
if (props.applyAriaDisabled) {
|
|
59
|
-
if (props.hasFocus) return focusBorderCss;
|
|
60
|
-
return disabledBorderCss;
|
|
61
|
-
}
|
|
62
62
|
if (props.hasFocus) return focusBorderCss;
|
|
63
63
|
if (props.hasError) return hasErrorBorderCss;
|
|
64
|
-
if (props.isReadOnly) return readOnlyBorderCss;
|
|
64
|
+
if (props.isReadOnly || props.applyAriaDisabled) return readOnlyBorderCss;
|
|
65
65
|
return commonBorderCss;
|
|
66
66
|
};
|
|
67
67
|
const getHoverBorderCss = (props) => {
|
|
68
68
|
if (props.isDisabled) return disabledBorderCss;
|
|
69
|
-
if (props.applyAriaDisabled) {
|
|
70
|
-
if (props.hasFocus) return focusBorderCss;
|
|
71
|
-
return disabledBorderCss;
|
|
72
|
-
}
|
|
73
69
|
if (props.hasFocus) return focusBorderCss;
|
|
74
70
|
if (props.hasError) return hasErrorBorderCss;
|
|
75
|
-
if (props.isReadOnly)
|
|
71
|
+
if (props.isReadOnly || props.applyAriaDisabled) {
|
|
72
|
+
if (props.hasFocus) return focusBorderCss;
|
|
73
|
+
return hoverReadOnlyBorderCss;
|
|
74
|
+
}
|
|
76
75
|
return hoverBorderCss;
|
|
77
76
|
};
|
|
78
77
|
//# sourceMappingURL=borders.js.map
|
|
@@ -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 { th, css } from '@elliemae/ds-system';\n\ninterface BorderNecessaryProps {\n isDisabled: boolean;\n applyAriaDisabled: boolean;\n hasError: boolean;\n isReadOnly: boolean;\n hasFocus: boolean;\n}\n\nconst commonBorderCss = css`\n border: 1px solid ${th.color('neutral-400')};\n`;\n\nconst readOnlyBorderCss = css`\n border: 1px solid
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwB;AAUxB,MAAM,kBAAkB;AAAA,sBACF,oBAAG,MAAM,aAAa,CAAC;AAAA;AAG7C,MAAM,oBAAoB;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["import { th, css } from '@elliemae/ds-system';\n\ninterface BorderNecessaryProps {\n isDisabled: boolean;\n applyAriaDisabled: boolean;\n hasError: boolean;\n isReadOnly: boolean;\n hasFocus: boolean;\n}\n\nconst commonBorderCss = css`\n border: 1px solid ${th.color('neutral-400')};\n`;\n\nconst readOnlyBorderCss = css`\n background-color: ${th.color('neutral-050')};\n border: 1px solid ${th.color('neutral-080')};\n border-bottom: 1px solid ${th.color('neutral-400')};\n`;\n\nconst disabledBorderCss = commonBorderCss;\n\nconst hasErrorBorderCss = css`\n border: 1px solid ${th.color('danger-900')};\n`;\n\nconst hoverBorderCss = css`\n border: 1px solid ${th.color('brand-700')};\n`;\n\nconst hoverReadOnlyBorderCss = css`\n border: 1px solid ${th.color('brand-600')};\n`;\n\nconst focusBorderCss = css`\n border: 1px solid transparent;\n outline: 2px solid ${th.color('brand-700')};\n outline-offset: -2px;\n`;\n\nexport const getBorderCss = (props: BorderNecessaryProps): ReturnType<typeof css> => {\n if (props.isDisabled) return disabledBorderCss;\n if (props.hasFocus) return focusBorderCss;\n if (props.hasError) return hasErrorBorderCss;\n if (props.isReadOnly || props.applyAriaDisabled) return readOnlyBorderCss;\n return commonBorderCss;\n};\n\nexport const getHoverBorderCss = (props: BorderNecessaryProps): ReturnType<typeof css> => {\n if (props.isDisabled) return disabledBorderCss;\n if (props.hasFocus) return focusBorderCss;\n if (props.hasError) return hasErrorBorderCss;\n if (props.isReadOnly || props.applyAriaDisabled) {\n if (props.hasFocus) return focusBorderCss;\n return hoverReadOnlyBorderCss;\n }\n return hoverBorderCss;\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwB;AAUxB,MAAM,kBAAkB;AAAA,sBACF,oBAAG,MAAM,aAAa,CAAC;AAAA;AAG7C,MAAM,oBAAoB;AAAA,sBACJ,oBAAG,MAAM,aAAa,CAAC;AAAA,sBACvB,oBAAG,MAAM,aAAa,CAAC;AAAA,6BAChB,oBAAG,MAAM,aAAa,CAAC;AAAA;AAGpD,MAAM,oBAAoB;AAE1B,MAAM,oBAAoB;AAAA,sBACJ,oBAAG,MAAM,YAAY,CAAC;AAAA;AAG5C,MAAM,iBAAiB;AAAA,sBACD,oBAAG,MAAM,WAAW,CAAC;AAAA;AAG3C,MAAM,yBAAyB;AAAA,sBACT,oBAAG,MAAM,WAAW,CAAC;AAAA;AAG3C,MAAM,iBAAiB;AAAA;AAAA,uBAEA,oBAAG,MAAM,WAAW,CAAC;AAAA;AAAA;AAIrC,MAAM,eAAe,CAAC,UAAwD;AACnF,MAAI,MAAM,WAAY,QAAO;AAC7B,MAAI,MAAM,SAAU,QAAO;AAC3B,MAAI,MAAM,SAAU,QAAO;AAC3B,MAAI,MAAM,cAAc,MAAM,kBAAmB,QAAO;AACxD,SAAO;AACT;AAEO,MAAM,oBAAoB,CAAC,UAAwD;AACxF,MAAI,MAAM,WAAY,QAAO;AAC7B,MAAI,MAAM,SAAU,QAAO;AAC3B,MAAI,MAAM,SAAU,QAAO;AAC3B,MAAI,MAAM,cAAc,MAAM,mBAAmB;AAC/C,QAAI,MAAM,SAAU,QAAO;AAC3B,WAAO;AAAA,EACT;AACA,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -70,13 +70,18 @@ const StyledInput = (0, import_ds_system.styled)("input", { name: import_exporte
|
|
|
70
70
|
color: ${import_ds_system.th.color("neutral-500")};
|
|
71
71
|
}
|
|
72
72
|
|
|
73
|
-
:disabled
|
|
74
|
-
&[aria-disabled='true'] {
|
|
73
|
+
:disabled {
|
|
75
74
|
background-color: ${import_ds_system.th.color("neutral-080")};
|
|
76
75
|
color: #616b7f;
|
|
77
76
|
cursor: not-allowed;
|
|
78
77
|
caret-color: transparent;
|
|
79
78
|
}
|
|
79
|
+
|
|
80
|
+
&[aria-disabled='true'],
|
|
81
|
+
&[aria-readonly='true'],
|
|
82
|
+
:read-only {
|
|
83
|
+
background-color: ${import_ds_system.th.color("neutral-050")};
|
|
84
|
+
}
|
|
80
85
|
`;
|
|
81
86
|
const StyledClearButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV2, { name: import_exported_related.DSInputTextName, slot: import_exported_related.DSInputTextSlots.CLEAR_BUTTON })`
|
|
82
87
|
height: 100%;
|
|
@@ -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-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { th, styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSInputTextName, DSInputTextSlots } from '../exported-related/index.js';\nimport { getBorderCss, getHoverBorderCss } from './borders.js';\n\ninterface StyledInputWrapperProps {\n isDisabled: boolean;\n applyAriaDisabled: boolean;\n hasError: boolean;\n isReadOnly: boolean;\n hasFocus: boolean;\n inputSize: string;\n}\n\nexport const StyledInputWrapper = styled(Grid, {\n name: DSInputTextName,\n slot: DSInputTextSlots.INPUT_WRAPPER,\n})<StyledInputWrapperProps>`\n ${getBorderCss}\n border-radius: 2px;\n :hover {\n ${getHoverBorderCss}\n }\n min-height: ${({ inputSize }) => (inputSize === 'm' ? '28px' : '24px')};\n ${xStyledCommonProps}\n`;\n\nexport const StyledInput = styled('input', { name: DSInputTextName, slot: DSInputTextSlots.INPUT })<{\n inputSize: string;\n}>`\n padding: ${({ inputSize }) => (inputSize === 'm' ? '4px' : '3px')} ${th.space('xxs')};\n @media (max-width: ${th.breakpoint('small')}) {\n padding: ${({ inputSize }) => (inputSize === 'm' ? '3px' : '1.25px')} ${th.space('xxs')};\n }\n border: none;\n outline: none;\n border-radius: 2px;\n\n width: 100%;\n height: 100%;\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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA2B;AAC3B,qBAAqB;AACrB,uBAA+C;AAC/C,8BAAkD;AAClD,qBAAgD;AAWzC,MAAM,yBAAqB,yBAAO,qBAAM;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,yCAAiB;AACzB,CAAC;AAAA,IACG,2BAAY;AAAA;AAAA;AAAA,MAGV,gCAAiB;AAAA;AAAA,gBAEP,CAAC,EAAE,UAAU,MAAO,cAAc,MAAM,SAAS,MAAO;AAAA,IACpE,mCAAkB;AAAA;AAGf,MAAM,kBAAc,yBAAO,SAAS,EAAE,MAAM,yCAAiB,MAAM,yCAAiB,MAAM,CAAC;AAAA,aAGrF,CAAC,EAAE,UAAU,MAAO,cAAc,MAAM,QAAQ,KAAM,IAAI,oBAAG,MAAM,KAAK,CAAC;AAAA,uBAC/D,oBAAG,WAAW,OAAO,CAAC;AAAA,eAC9B,CAAC,EAAE,UAAU,MAAO,cAAc,MAAM,QAAQ,QAAS,IAAI,oBAAG,MAAM,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAQhF,oBAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAAA,mBAGf,oBAAG,WAAW,SAAS,CAAC;AAAA;AAAA,aAE9B,oBAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA
|
|
4
|
+
"sourcesContent": ["import { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { th, styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSInputTextName, DSInputTextSlots } from '../exported-related/index.js';\nimport { getBorderCss, getHoverBorderCss } from './borders.js';\n\ninterface StyledInputWrapperProps {\n isDisabled: boolean;\n applyAriaDisabled: boolean;\n hasError: boolean;\n isReadOnly: boolean;\n hasFocus: boolean;\n inputSize: string;\n}\n\nexport const StyledInputWrapper = styled(Grid, {\n name: DSInputTextName,\n slot: DSInputTextSlots.INPUT_WRAPPER,\n})<StyledInputWrapperProps>`\n ${getBorderCss}\n border-radius: 2px;\n :hover {\n ${getHoverBorderCss}\n }\n min-height: ${({ inputSize }) => (inputSize === 'm' ? '28px' : '24px')};\n ${xStyledCommonProps}\n`;\n\nexport const StyledInput = styled('input', { name: DSInputTextName, slot: DSInputTextSlots.INPUT })<{\n inputSize: string;\n}>`\n padding: ${({ inputSize }) => (inputSize === 'm' ? '4px' : '3px')} ${th.space('xxs')};\n @media (max-width: ${th.breakpoint('small')}) {\n padding: ${({ inputSize }) => (inputSize === 'm' ? '3px' : '1.25px')} ${th.space('xxs')};\n }\n border: none;\n outline: none;\n border-radius: 2px;\n\n width: 100%;\n height: 100%;\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 caret-color: transparent;\n }\n\n &[aria-disabled='true'],\n &[aria-readonly='true'],\n :read-only {\n background-color: ${th.color('neutral-050')};\n }\n`;\n\nexport const StyledClearButton = styled(DSButtonV2, { name: DSInputTextName, slot: DSInputTextSlots.CLEAR_BUTTON })`\n height: 100%;\n\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 &:hover:not([aria-disabled='true']) {\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,0BAA2B;AAC3B,qBAAqB;AACrB,uBAA+C;AAC/C,8BAAkD;AAClD,qBAAgD;AAWzC,MAAM,yBAAqB,yBAAO,qBAAM;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,yCAAiB;AACzB,CAAC;AAAA,IACG,2BAAY;AAAA;AAAA;AAAA,MAGV,gCAAiB;AAAA;AAAA,gBAEP,CAAC,EAAE,UAAU,MAAO,cAAc,MAAM,SAAS,MAAO;AAAA,IACpE,mCAAkB;AAAA;AAGf,MAAM,kBAAc,yBAAO,SAAS,EAAE,MAAM,yCAAiB,MAAM,yCAAiB,MAAM,CAAC;AAAA,aAGrF,CAAC,EAAE,UAAU,MAAO,cAAc,MAAM,QAAQ,KAAM,IAAI,oBAAG,MAAM,KAAK,CAAC;AAAA,uBAC/D,oBAAG,WAAW,OAAO,CAAC;AAAA,eAC9B,CAAC,EAAE,UAAU,MAAO,cAAc,MAAM,QAAQ,QAAS,IAAI,oBAAG,MAAM,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAQhF,oBAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAAA,mBAGf,oBAAG,WAAW,SAAS,CAAC;AAAA;AAAA,aAE9B,oBAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA,wBAIZ,oBAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASvB,oBAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAIxC,MAAM,wBAAoB,yBAAO,gCAAY,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,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useCallback, useRef } from "react";
|
|
3
|
+
import { useCallback, useMemo, useRef } from "react";
|
|
4
4
|
import { CloseMedium } from "@elliemae/ds-icons";
|
|
5
5
|
import { DSIconColors } from "@elliemae/ds-icon";
|
|
6
6
|
import { mergeRefs } from "@elliemae/ds-system";
|
|
@@ -27,10 +27,15 @@ const DSInputText = (props) => {
|
|
|
27
27
|
inputSize,
|
|
28
28
|
onClear,
|
|
29
29
|
value,
|
|
30
|
-
applyAriaDisabled
|
|
30
|
+
applyAriaDisabled,
|
|
31
|
+
ariaDescribedBy
|
|
31
32
|
} = propsWithDefault;
|
|
32
33
|
const inputRef = useRef(null);
|
|
33
34
|
const shouldDisplayClearButton = clearable && !disabled && value !== "";
|
|
35
|
+
const defaultAriaDescribedBy = useMemo(
|
|
36
|
+
() => id !== void 0 ? `${id}_feedback_message ${id}_error_message` : void 0,
|
|
37
|
+
[id]
|
|
38
|
+
);
|
|
34
39
|
const handleClear = useCallback(() => {
|
|
35
40
|
onClear();
|
|
36
41
|
inputRef?.current?.focus();
|
|
@@ -58,7 +63,7 @@ const DSInputText = (props) => {
|
|
|
58
63
|
readOnly,
|
|
59
64
|
innerRef: mergeRefs(innerRef, inputRef),
|
|
60
65
|
value,
|
|
61
|
-
"aria-describedby":
|
|
66
|
+
"aria-describedby": defaultAriaDescribedBy || ariaDescribedBy ? `${defaultAriaDescribedBy} ${ariaDescribedBy}` : void 0,
|
|
62
67
|
"aria-invalid": hasError,
|
|
63
68
|
id,
|
|
64
69
|
"aria-disabled": applyAriaDisabled,
|
|
@@ -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 { mergeRefs } from '@elliemae/ds-system';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useInputText } from './config/useInputText.js';\nimport { DSInputTextDataTestIds } from './exported-related/data-test-ids.js';\nimport type { DSInputTextT } from './react-desc-prop-types.js';\nimport { DSInputTextPropTypes } 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, ...otherGlobalAttributes },\n hasFocus,\n handlers,\n propsWithDefault,\n xstyledProps,\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 } = propsWithDefault;\n\n const inputRef = useRef<HTMLInputElement>(null);\n const shouldDisplayClearButton = clearable && !disabled && value !== '';\n\n const handleClear = useCallback(() => {\n onClear();\n inputRef?.current?.focus();\n }, [onClear]);\n\n return (\n <StyledInputWrapper\n className={className}\n cols={shouldDisplayClearButton ? ['auto', 'min-content'] : ['auto']}\n isDisabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\n isReadOnly={readOnly}\n hasError={hasError}\n hasFocus={hasFocus}\n inputSize={inputSize}\n {...xstyledProps}\n >\n <StyledInput\n inputSize={inputSize}\n data-testid={DSInputTextDataTestIds.INPUT}\n disabled={disabled}\n placeholder={placeholder}\n readOnly={readOnly}\n innerRef={mergeRefs(innerRef, inputRef)}\n value={value}\n aria-describedby={
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useMemo, useRef } from 'react';\nimport { CloseMedium } from '@elliemae/ds-icons';\nimport { DSIconColors } from '@elliemae/ds-icon';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useInputText } from './config/useInputText.js';\nimport { DSInputTextDataTestIds } from './exported-related/data-test-ids.js';\nimport type { DSInputTextT } from './react-desc-prop-types.js';\nimport { DSInputTextPropTypes } 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, ...otherGlobalAttributes },\n hasFocus,\n handlers,\n propsWithDefault,\n xstyledProps,\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 !== '';\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 >\n <StyledInput\n inputSize={inputSize}\n data-testid={DSInputTextDataTestIds.INPUT}\n disabled={disabled}\n placeholder={placeholder}\n readOnly={readOnly}\n innerRef={mergeRefs(innerRef, inputRef)}\n value={value}\n aria-describedby={\n defaultAriaDescribedBy || ariaDescribedBy ? `${defaultAriaDescribedBy} ${ariaDescribedBy}` : undefined\n }\n aria-invalid={hasError}\n id={id}\n aria-disabled={applyAriaDisabled}\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 size=\"s\"\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 = DSInputTextPropTypes;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACgDnB,SAWE,KAXF;AAhDJ,SAAgB,aAAa,SAAS,cAAc;AACpD,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAC7B,SAAS,8BAA8B;AAEvC,SAAS,4BAA4B;AACrC,SAAS,mBAAmB,aAAa,0BAA0B;AAE5D,MAAM,cAAuD,CAAC,UAAU;AAC7E,QAAM;AAAA,IACJ,kBAAkB,EAAE,WAAW,IAAI,GAAG,sBAAsB;AAAA,IAC5D;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;AAErE,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,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,eAAa,uBAAuB;AAAA,YACpC;AAAA,YACA;AAAA,YACA;AAAA,YACA,UAAU,UAAU,UAAU,QAAQ;AAAA,YACtC;AAAA,YACA,oBACE,0BAA0B,kBAAkB,GAAG,sBAAsB,IAAI,eAAe,KAAK;AAAA,YAE/F,gBAAc;AAAA,YACd;AAAA,YACA,iBAAe;AAAA,YACd,GAAG;AAAA,YACH,GAAG;AAAA;AAAA,QACN;AAAA,QACC,4BACC;AAAA,UAAC;AAAA;AAAA,YACC,cAAW;AAAA,YACX,YAAW;AAAA,YACX,eAAa,uBAAuB;AAAA,YACpC,SAAS;AAAA,YACT,MAAK;AAAA,YAEL,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
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/theming.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSInputTextName = '
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSInputTextName = 'DSInputtext';\n\nexport const DSInputTextSlots = {\n INPUT_WRAPPER: 'root',\n INPUT: 'input',\n CLEAR_BUTTON: 'input-clear-button',\n};\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,kBAAkB;AAExB,MAAM,mBAAmB;AAAA,EAC9B,eAAe;AAAA,EACf,OAAO;AAAA,EACP,cAAc;AAChB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -28,6 +28,7 @@ const DSInputTextPropTypes = {
|
|
|
28
28
|
applyAriaDisabled: PropTypes.bool.description(
|
|
29
29
|
"Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION"
|
|
30
30
|
).defaultValue(false),
|
|
31
|
+
ariaDescribedBy: PropTypes.string.description("Value passed to the aria-describedby attribute"),
|
|
31
32
|
onClear: PropTypes.func.description("Callback triggered when the clearable button is pressed").defaultValue(() => null).signature("(() => void)")
|
|
32
33
|
};
|
|
33
34
|
export {
|
|
@@ -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 type
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport type { GlobalAttributesT, XstyledProps, ValidationMap } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\n\nexport declare namespace DSInputTextT {\n export interface IProps {\n value?: string | number;\n onValueChange?: (\n nextValue: string,\n e: React.ChangeEvent<HTMLInputElement>,\n ) => void | React.Dispatch<React.SetStateAction<string>>;\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 applyAriaDisabled?: boolean;\n ariaDescribedBy?: string;\n }\n\n export interface Props extends IProps, Omit<GlobalAttributesT<HTMLInputElement>, keyof IProps>, XstyledProps {}\n}\n\nexport const defaultProps: DSInputTextT.Props = {\n onValueChange: () => {},\n onClear: () => {},\n placeholder: '',\n disabled: false,\n readOnly: false,\n hasError: false,\n inputSize: 'm',\n clearable: false,\n applyAriaDisabled: 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 applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION',\n )\n .defaultValue(false),\n ariaDescribedBy: PropTypes.string.description('Value passed to the aria-describedby attribute'),\n onClear: PropTypes.func\n .description('Callback triggered when the clearable button is pressed')\n .defaultValue(() => null)\n .signature('(() => void)'),\n} as ValidationMap<unknown>;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,WAAW,2BAA2B,wBAAwB;AAwBhE,MAAM,eAAmC;AAAA,EAC9C,eAAe,MAAM;AAAA,EAAC;AAAA,EACtB,SAAS,MAAM;AAAA,EAAC;AAAA,EAChB,aAAa;AAAA,EACb,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,WAAW;AAAA,EACX,WAAW;AAAA,EACX,mBAAmB;AACrB;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,mBAAmB,UAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,iBAAiB,UAAU,OAAO,YAAY,gDAAgD;AAAA,EAC9F,SAAS,UAAU,KAChB,YAAY,yDAAyD,EACrE,aAAa,MAAM,IAAI,EACvB,UAAU,cAAc;AAC7B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -4,8 +4,9 @@ const commonBorderCss = css`
|
|
|
4
4
|
border: 1px solid ${th.color("neutral-400")};
|
|
5
5
|
`;
|
|
6
6
|
const readOnlyBorderCss = css`
|
|
7
|
-
|
|
8
|
-
border
|
|
7
|
+
background-color: ${th.color("neutral-050")};
|
|
8
|
+
border: 1px solid ${th.color("neutral-080")};
|
|
9
|
+
border-bottom: 1px solid ${th.color("neutral-400")};
|
|
9
10
|
`;
|
|
10
11
|
const disabledBorderCss = commonBorderCss;
|
|
11
12
|
const hasErrorBorderCss = css`
|
|
@@ -14,6 +15,9 @@ const hasErrorBorderCss = css`
|
|
|
14
15
|
const hoverBorderCss = css`
|
|
15
16
|
border: 1px solid ${th.color("brand-700")};
|
|
16
17
|
`;
|
|
18
|
+
const hoverReadOnlyBorderCss = css`
|
|
19
|
+
border: 1px solid ${th.color("brand-600")};
|
|
20
|
+
`;
|
|
17
21
|
const focusBorderCss = css`
|
|
18
22
|
border: 1px solid transparent;
|
|
19
23
|
outline: 2px solid ${th.color("brand-700")};
|
|
@@ -21,24 +25,19 @@ const focusBorderCss = css`
|
|
|
21
25
|
`;
|
|
22
26
|
const getBorderCss = (props) => {
|
|
23
27
|
if (props.isDisabled) return disabledBorderCss;
|
|
24
|
-
if (props.applyAriaDisabled) {
|
|
25
|
-
if (props.hasFocus) return focusBorderCss;
|
|
26
|
-
return disabledBorderCss;
|
|
27
|
-
}
|
|
28
28
|
if (props.hasFocus) return focusBorderCss;
|
|
29
29
|
if (props.hasError) return hasErrorBorderCss;
|
|
30
|
-
if (props.isReadOnly) return readOnlyBorderCss;
|
|
30
|
+
if (props.isReadOnly || props.applyAriaDisabled) return readOnlyBorderCss;
|
|
31
31
|
return commonBorderCss;
|
|
32
32
|
};
|
|
33
33
|
const getHoverBorderCss = (props) => {
|
|
34
34
|
if (props.isDisabled) return disabledBorderCss;
|
|
35
|
-
if (props.applyAriaDisabled) {
|
|
36
|
-
if (props.hasFocus) return focusBorderCss;
|
|
37
|
-
return disabledBorderCss;
|
|
38
|
-
}
|
|
39
35
|
if (props.hasFocus) return focusBorderCss;
|
|
40
36
|
if (props.hasError) return hasErrorBorderCss;
|
|
41
|
-
if (props.isReadOnly)
|
|
37
|
+
if (props.isReadOnly || props.applyAriaDisabled) {
|
|
38
|
+
if (props.hasFocus) return focusBorderCss;
|
|
39
|
+
return hoverReadOnlyBorderCss;
|
|
40
|
+
}
|
|
42
41
|
return hoverBorderCss;
|
|
43
42
|
};
|
|
44
43
|
export {
|
|
@@ -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 { th, css } from '@elliemae/ds-system';\n\ninterface BorderNecessaryProps {\n isDisabled: boolean;\n applyAriaDisabled: boolean;\n hasError: boolean;\n isReadOnly: boolean;\n hasFocus: boolean;\n}\n\nconst commonBorderCss = css`\n border: 1px solid ${th.color('neutral-400')};\n`;\n\nconst readOnlyBorderCss = css`\n border: 1px solid
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,IAAI,WAAW;AAUxB,MAAM,kBAAkB;AAAA,sBACF,GAAG,MAAM,aAAa,CAAC;AAAA;AAG7C,MAAM,oBAAoB;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { th, css } from '@elliemae/ds-system';\n\ninterface BorderNecessaryProps {\n isDisabled: boolean;\n applyAriaDisabled: boolean;\n hasError: boolean;\n isReadOnly: boolean;\n hasFocus: boolean;\n}\n\nconst commonBorderCss = css`\n border: 1px solid ${th.color('neutral-400')};\n`;\n\nconst readOnlyBorderCss = css`\n background-color: ${th.color('neutral-050')};\n border: 1px solid ${th.color('neutral-080')};\n border-bottom: 1px solid ${th.color('neutral-400')};\n`;\n\nconst disabledBorderCss = commonBorderCss;\n\nconst hasErrorBorderCss = css`\n border: 1px solid ${th.color('danger-900')};\n`;\n\nconst hoverBorderCss = css`\n border: 1px solid ${th.color('brand-700')};\n`;\n\nconst hoverReadOnlyBorderCss = css`\n border: 1px solid ${th.color('brand-600')};\n`;\n\nconst focusBorderCss = css`\n border: 1px solid transparent;\n outline: 2px solid ${th.color('brand-700')};\n outline-offset: -2px;\n`;\n\nexport const getBorderCss = (props: BorderNecessaryProps): ReturnType<typeof css> => {\n if (props.isDisabled) return disabledBorderCss;\n if (props.hasFocus) return focusBorderCss;\n if (props.hasError) return hasErrorBorderCss;\n if (props.isReadOnly || props.applyAriaDisabled) return readOnlyBorderCss;\n return commonBorderCss;\n};\n\nexport const getHoverBorderCss = (props: BorderNecessaryProps): ReturnType<typeof css> => {\n if (props.isDisabled) return disabledBorderCss;\n if (props.hasFocus) return focusBorderCss;\n if (props.hasError) return hasErrorBorderCss;\n if (props.isReadOnly || props.applyAriaDisabled) {\n if (props.hasFocus) return focusBorderCss;\n return hoverReadOnlyBorderCss;\n }\n return hoverBorderCss;\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,IAAI,WAAW;AAUxB,MAAM,kBAAkB;AAAA,sBACF,GAAG,MAAM,aAAa,CAAC;AAAA;AAG7C,MAAM,oBAAoB;AAAA,sBACJ,GAAG,MAAM,aAAa,CAAC;AAAA,sBACvB,GAAG,MAAM,aAAa,CAAC;AAAA,6BAChB,GAAG,MAAM,aAAa,CAAC;AAAA;AAGpD,MAAM,oBAAoB;AAE1B,MAAM,oBAAoB;AAAA,sBACJ,GAAG,MAAM,YAAY,CAAC;AAAA;AAG5C,MAAM,iBAAiB;AAAA,sBACD,GAAG,MAAM,WAAW,CAAC;AAAA;AAG3C,MAAM,yBAAyB;AAAA,sBACT,GAAG,MAAM,WAAW,CAAC;AAAA;AAG3C,MAAM,iBAAiB;AAAA;AAAA,uBAEA,GAAG,MAAM,WAAW,CAAC;AAAA;AAAA;AAIrC,MAAM,eAAe,CAAC,UAAwD;AACnF,MAAI,MAAM,WAAY,QAAO;AAC7B,MAAI,MAAM,SAAU,QAAO;AAC3B,MAAI,MAAM,SAAU,QAAO;AAC3B,MAAI,MAAM,cAAc,MAAM,kBAAmB,QAAO;AACxD,SAAO;AACT;AAEO,MAAM,oBAAoB,CAAC,UAAwD;AACxF,MAAI,MAAM,WAAY,QAAO;AAC7B,MAAI,MAAM,SAAU,QAAO;AAC3B,MAAI,MAAM,SAAU,QAAO;AAC3B,MAAI,MAAM,cAAc,MAAM,mBAAmB;AAC/C,QAAI,MAAM,SAAU,QAAO;AAC3B,WAAO;AAAA,EACT;AACA,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -35,13 +35,18 @@ const StyledInput = styled("input", { name: DSInputTextName, slot: DSInputTextSl
|
|
|
35
35
|
color: ${th.color("neutral-500")};
|
|
36
36
|
}
|
|
37
37
|
|
|
38
|
-
:disabled
|
|
39
|
-
&[aria-disabled='true'] {
|
|
38
|
+
:disabled {
|
|
40
39
|
background-color: ${th.color("neutral-080")};
|
|
41
40
|
color: #616b7f;
|
|
42
41
|
cursor: not-allowed;
|
|
43
42
|
caret-color: transparent;
|
|
44
43
|
}
|
|
44
|
+
|
|
45
|
+
&[aria-disabled='true'],
|
|
46
|
+
&[aria-readonly='true'],
|
|
47
|
+
:read-only {
|
|
48
|
+
background-color: ${th.color("neutral-050")};
|
|
49
|
+
}
|
|
45
50
|
`;
|
|
46
51
|
const StyledClearButton = styled(DSButtonV2, { name: DSInputTextName, slot: DSInputTextSlots.CLEAR_BUTTON })`
|
|
47
52
|
height: 100%;
|
|
@@ -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-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { th, styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSInputTextName, DSInputTextSlots } from '../exported-related/index.js';\nimport { getBorderCss, getHoverBorderCss } from './borders.js';\n\ninterface StyledInputWrapperProps {\n isDisabled: boolean;\n applyAriaDisabled: boolean;\n hasError: boolean;\n isReadOnly: boolean;\n hasFocus: boolean;\n inputSize: string;\n}\n\nexport const StyledInputWrapper = styled(Grid, {\n name: DSInputTextName,\n slot: DSInputTextSlots.INPUT_WRAPPER,\n})<StyledInputWrapperProps>`\n ${getBorderCss}\n border-radius: 2px;\n :hover {\n ${getHoverBorderCss}\n }\n min-height: ${({ inputSize }) => (inputSize === 'm' ? '28px' : '24px')};\n ${xStyledCommonProps}\n`;\n\nexport const StyledInput = styled('input', { name: DSInputTextName, slot: DSInputTextSlots.INPUT })<{\n inputSize: string;\n}>`\n padding: ${({ inputSize }) => (inputSize === 'm' ? '4px' : '3px')} ${th.space('xxs')};\n @media (max-width: ${th.breakpoint('small')}) {\n padding: ${({ inputSize }) => (inputSize === 'm' ? '3px' : '1.25px')} ${th.space('xxs')};\n }\n border: none;\n outline: none;\n border-radius: 2px;\n\n width: 100%;\n height: 100%;\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
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB,SAAS,IAAI,QAAQ,0BAA0B;AAC/C,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,cAAc,yBAAyB;AAWzC,MAAM,qBAAqB,OAAO,MAAM;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAAA,IACG,YAAY;AAAA;AAAA;AAAA,MAGV,iBAAiB;AAAA;AAAA,gBAEP,CAAC,EAAE,UAAU,MAAO,cAAc,MAAM,SAAS,MAAO;AAAA,IACpE,kBAAkB;AAAA;AAGf,MAAM,cAAc,OAAO,SAAS,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,MAAM,CAAC;AAAA,aAGrF,CAAC,EAAE,UAAU,MAAO,cAAc,MAAM,QAAQ,KAAM,IAAI,GAAG,MAAM,KAAK,CAAC;AAAA,uBAC/D,GAAG,WAAW,OAAO,CAAC;AAAA,eAC9B,CAAC,EAAE,UAAU,MAAO,cAAc,MAAM,QAAQ,QAAS,IAAI,GAAG,MAAM,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAQhF,GAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAAA,mBAGf,GAAG,WAAW,SAAS,CAAC;AAAA;AAAA,aAE9B,GAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { th, styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSInputTextName, DSInputTextSlots } from '../exported-related/index.js';\nimport { getBorderCss, getHoverBorderCss } from './borders.js';\n\ninterface StyledInputWrapperProps {\n isDisabled: boolean;\n applyAriaDisabled: boolean;\n hasError: boolean;\n isReadOnly: boolean;\n hasFocus: boolean;\n inputSize: string;\n}\n\nexport const StyledInputWrapper = styled(Grid, {\n name: DSInputTextName,\n slot: DSInputTextSlots.INPUT_WRAPPER,\n})<StyledInputWrapperProps>`\n ${getBorderCss}\n border-radius: 2px;\n :hover {\n ${getHoverBorderCss}\n }\n min-height: ${({ inputSize }) => (inputSize === 'm' ? '28px' : '24px')};\n ${xStyledCommonProps}\n`;\n\nexport const StyledInput = styled('input', { name: DSInputTextName, slot: DSInputTextSlots.INPUT })<{\n inputSize: string;\n}>`\n padding: ${({ inputSize }) => (inputSize === 'm' ? '4px' : '3px')} ${th.space('xxs')};\n @media (max-width: ${th.breakpoint('small')}) {\n padding: ${({ inputSize }) => (inputSize === 'm' ? '3px' : '1.25px')} ${th.space('xxs')};\n }\n border: none;\n outline: none;\n border-radius: 2px;\n\n width: 100%;\n height: 100%;\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 caret-color: transparent;\n }\n\n &[aria-disabled='true'],\n &[aria-readonly='true'],\n :read-only {\n background-color: ${th.color('neutral-050')};\n }\n`;\n\nexport const StyledClearButton = styled(DSButtonV2, { name: DSInputTextName, slot: DSInputTextSlots.CLEAR_BUTTON })`\n height: 100%;\n\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 &:hover:not([aria-disabled='true']) {\n background-color: transparent;\n }\n`;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB,SAAS,IAAI,QAAQ,0BAA0B;AAC/C,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,cAAc,yBAAyB;AAWzC,MAAM,qBAAqB,OAAO,MAAM;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAAA,IACG,YAAY;AAAA;AAAA;AAAA,MAGV,iBAAiB;AAAA;AAAA,gBAEP,CAAC,EAAE,UAAU,MAAO,cAAc,MAAM,SAAS,MAAO;AAAA,IACpE,kBAAkB;AAAA;AAGf,MAAM,cAAc,OAAO,SAAS,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,MAAM,CAAC;AAAA,aAGrF,CAAC,EAAE,UAAU,MAAO,cAAc,MAAM,QAAQ,KAAM,IAAI,GAAG,MAAM,KAAK,CAAC;AAAA,uBAC/D,GAAG,WAAW,OAAO,CAAC;AAAA,eAC9B,CAAC,EAAE,UAAU,MAAO,cAAc,MAAM,QAAQ,QAAS,IAAI,GAAG,MAAM,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAQhF,GAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAAA,mBAGf,GAAG,WAAW,SAAS,CAAC;AAAA;AAAA,aAE9B,GAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA,wBAIZ,GAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASvB,GAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAIxC,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
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
/// <reference types="prop-types" />
|
|
2
2
|
import type React from 'react';
|
|
3
|
-
import type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';
|
|
3
|
+
import type { GlobalAttributesT, XstyledProps, ValidationMap } from '@elliemae/ds-props-helpers';
|
|
4
4
|
export declare namespace DSInputTextT {
|
|
5
5
|
interface IProps {
|
|
6
6
|
value?: string | number;
|
|
@@ -14,9 +14,10 @@ export declare namespace DSInputTextT {
|
|
|
14
14
|
inputSize?: 's' | 'm';
|
|
15
15
|
clearable?: boolean;
|
|
16
16
|
applyAriaDisabled?: boolean;
|
|
17
|
+
ariaDescribedBy?: string;
|
|
17
18
|
}
|
|
18
19
|
interface Props extends IProps, Omit<GlobalAttributesT<HTMLInputElement>, keyof IProps>, XstyledProps {
|
|
19
20
|
}
|
|
20
21
|
}
|
|
21
22
|
export declare const defaultProps: DSInputTextT.Props;
|
|
22
|
-
export declare const DSInputTextPropTypes:
|
|
23
|
+
export declare const DSInputTextPropTypes: ValidationMap<unknown>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-form-input-text",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.51.0-beta.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Controlled Form Input Text",
|
|
6
6
|
"files": [
|
|
@@ -25,8 +25,8 @@
|
|
|
25
25
|
"url": "https://git.elliemae.io/platform-ui/dimsum.git"
|
|
26
26
|
},
|
|
27
27
|
"engines": {
|
|
28
|
-
"pnpm": ">=
|
|
29
|
-
"node": ">=
|
|
28
|
+
"pnpm": ">=9",
|
|
29
|
+
"node": ">=22"
|
|
30
30
|
},
|
|
31
31
|
"author": "ICE MT",
|
|
32
32
|
"jestSonar": {
|
|
@@ -36,25 +36,25 @@
|
|
|
36
36
|
"indent": 4
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@elliemae/ds-button-v2": "3.
|
|
40
|
-
"@elliemae/ds-grid": "3.
|
|
41
|
-
"@elliemae/ds-icon": "3.
|
|
42
|
-
"@elliemae/ds-
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-system": "3.
|
|
39
|
+
"@elliemae/ds-button-v2": "3.51.0-beta.2",
|
|
40
|
+
"@elliemae/ds-grid": "3.51.0-beta.2",
|
|
41
|
+
"@elliemae/ds-icon": "3.51.0-beta.2",
|
|
42
|
+
"@elliemae/ds-props-helpers": "3.51.0-beta.2",
|
|
43
|
+
"@elliemae/ds-icons": "3.51.0-beta.2",
|
|
44
|
+
"@elliemae/ds-system": "3.51.0-beta.2"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
|
-
"@elliemae/pui-cli": "9.0.0-next.
|
|
47
|
+
"@elliemae/pui-cli": "9.0.0-next.55",
|
|
48
48
|
"@elliemae/pui-theme": "~2.10.0",
|
|
49
49
|
"jest": "~29.7.0",
|
|
50
50
|
"styled-components": "~5.3.9",
|
|
51
51
|
"styled-system": "^5.1.5",
|
|
52
|
-
"@elliemae/ds-monorepo-devops": "3.
|
|
52
|
+
"@elliemae/ds-monorepo-devops": "3.51.0-beta.2"
|
|
53
53
|
},
|
|
54
54
|
"peerDependencies": {
|
|
55
55
|
"@elliemae/pui-theme": "~2.10.0",
|
|
56
|
-
"react": "^
|
|
57
|
-
"react-dom": "^
|
|
56
|
+
"react": "^18.3.1",
|
|
57
|
+
"react-dom": "^18.3.1",
|
|
58
58
|
"styled-components": "~5.3.9",
|
|
59
59
|
"styled-system": "^5.1.5"
|
|
60
60
|
},
|