@elliemae/ds-form-input-text 3.49.0-rc.30 → 3.49.0-rc.32
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 +3 -1
- package/dist/cjs/DSInputText.js.map +2 -2
- package/dist/cjs/styled/components.js +1 -0
- package/dist/cjs/styled/components.js.map +2 -2
- package/dist/esm/DSInputText.js +3 -1
- package/dist/esm/DSInputText.js.map +2 -2
- package/dist/esm/styled/components.js +1 -0
- package/dist/esm/styled/components.js.map +2 -2
- package/package.json +8 -8
package/dist/cjs/DSInputText.js
CHANGED
|
@@ -64,7 +64,7 @@ const DSInputText = (props) => {
|
|
|
64
64
|
ariaDescribedBy
|
|
65
65
|
} = propsWithDefault;
|
|
66
66
|
const inputRef = (0, import_react.useRef)(null);
|
|
67
|
-
const shouldDisplayClearButton = clearable && !disabled && value !== "";
|
|
67
|
+
const shouldDisplayClearButton = clearable && !disabled && value !== "" && !applyAriaDisabled && !readOnly;
|
|
68
68
|
const defaultAriaDescribedBy = (0, import_react.useMemo)(
|
|
69
69
|
() => id !== void 0 ? `${id}_feedback_message ${id}_error_message` : void 0,
|
|
70
70
|
[id]
|
|
@@ -99,6 +99,7 @@ const DSInputText = (props) => {
|
|
|
99
99
|
"aria-invalid": hasError,
|
|
100
100
|
id,
|
|
101
101
|
"aria-disabled": applyAriaDisabled,
|
|
102
|
+
"aria-readonly": readOnly,
|
|
102
103
|
...handlers,
|
|
103
104
|
...otherGlobalAttributes
|
|
104
105
|
}
|
|
@@ -110,6 +111,7 @@ const DSInputText = (props) => {
|
|
|
110
111
|
"aria-label": "Clear input value",
|
|
111
112
|
buttonType: "icon",
|
|
112
113
|
onClick: handleClear,
|
|
114
|
+
size: "s",
|
|
113
115
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.CloseMedium, { color: import_ds_icon.DSIconColors.PRIMARY, size: "s" })
|
|
114
116
|
}
|
|
115
117
|
)
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSInputText.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\nimport 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 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 !== '' && !applyAriaDisabled && !readOnly;\n\n const defaultAriaDescribedBy = useMemo(\n () => (id !== undefined ? `${id}_feedback_message ${id}_error_message` : undefined),\n [id],\n );\n\n const handleClear = useCallback(() => {\n onClear();\n inputRef?.current?.focus();\n }, [onClear]);\n\n return (\n <StyledInputWrapper\n className={className}\n cols={shouldDisplayClearButton ? ['auto', 'min-content'] : ['auto']}\n isDisabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\n isReadOnly={readOnly}\n hasError={hasError}\n hasFocus={hasFocus}\n inputSize={inputSize}\n {...xstyledProps}\n >\n <StyledInput\n inputSize={inputSize}\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 aria-readonly={readOnly}\n {...handlers}\n {...otherGlobalAttributes}\n />\n {shouldDisplayClearButton && (\n <StyledClearButton\n disabled={disabled || applyAriaDisabled || readOnly}\n aria-label=\"Clear input value\"\n buttonType=\"icon\"\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;AA/CJ,mBAAoD;AACpD,sBAA4B;AAC5B,qBAA6B;AAC7B,uBAA0B;AAC1B,8BAAyB;AACzB,0BAA6B;AAE7B,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,MAAM,CAAC,qBAAqB,CAAC;AAElG,QAAM,6BAAyB;AAAA,IAC7B,MAAO,OAAO,SAAY,GAAG,EAAE,qBAAqB,EAAE,mBAAmB;AAAA,IACzE,CAAC,EAAE;AAAA,EACL;AAEA,QAAM,kBAAc,0BAAY,MAAM;AACpC,YAAQ;AACR,cAAU,SAAS,MAAM;AAAA,EAC3B,GAAG,CAAC,OAAO,CAAC;AAEZ,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAM,2BAA2B,CAAC,QAAQ,aAAa,IAAI,CAAC,MAAM;AAAA,MAClE,YAAY;AAAA,MACZ;AAAA,MACA,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;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,YACf,iBAAe;AAAA,YACd,GAAG;AAAA,YACH,GAAG;AAAA;AAAA,QACN;AAAA,QACC,4BACC;AAAA,UAAC;AAAA;AAAA,YACC,UAAU,YAAY,qBAAqB;AAAA,YAC3C,cAAW;AAAA,YACX,YAAW;AAAA,YACX,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
|
}
|
|
@@ -81,6 +81,7 @@ const StyledInput = (0, import_ds_system.styled)("input", { name: import_constan
|
|
|
81
81
|
&[aria-readonly='true'] {
|
|
82
82
|
background-color: ${import_ds_system.th.color("neutral-050")};
|
|
83
83
|
caret-color: transparent;
|
|
84
|
+
cursor: text;
|
|
84
85
|
}
|
|
85
86
|
`;
|
|
86
87
|
const StyledClearButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV3, { name: import_constants.DSInputTextName, slot: import_constants.DSInputTextSlots.CLEAR_BUTTON })`
|
|
@@ -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 { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { th, styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSInputTextName, DSInputTextSlots } from '../constants/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 background-color: ${th.color('neutral-050')};\n caret-color: transparent;\n }\n`;\n\nexport const StyledClearButton = styled(DSButtonV3, { 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,uBAAkD;AAClD,qBAAgD;AAWzC,MAAM,yBAAqB,yBAAO,qBAAM;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,kCAAiB;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,kCAAiB,MAAM,kCAAiB,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,wBAQvB,oBAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { th, styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSInputTextName, DSInputTextSlots } from '../constants/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 background-color: ${th.color('neutral-050')};\n caret-color: transparent;\n cursor: text;\n }\n`;\n\nexport const StyledClearButton = styled(DSButtonV3, { 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,uBAAkD;AAClD,qBAAgD;AAWzC,MAAM,yBAAqB,yBAAO,qBAAM;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,kCAAiB;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,kCAAiB,MAAM,kCAAiB,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,wBAQvB,oBAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA;AAMxC,MAAM,wBAAoB,yBAAO,gCAAY,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,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
|
@@ -30,7 +30,7 @@ const DSInputText = (props) => {
|
|
|
30
30
|
ariaDescribedBy
|
|
31
31
|
} = propsWithDefault;
|
|
32
32
|
const inputRef = useRef(null);
|
|
33
|
-
const shouldDisplayClearButton = clearable && !disabled && value !== "";
|
|
33
|
+
const shouldDisplayClearButton = clearable && !disabled && value !== "" && !applyAriaDisabled && !readOnly;
|
|
34
34
|
const defaultAriaDescribedBy = useMemo(
|
|
35
35
|
() => id !== void 0 ? `${id}_feedback_message ${id}_error_message` : void 0,
|
|
36
36
|
[id]
|
|
@@ -65,6 +65,7 @@ const DSInputText = (props) => {
|
|
|
65
65
|
"aria-invalid": hasError,
|
|
66
66
|
id,
|
|
67
67
|
"aria-disabled": applyAriaDisabled,
|
|
68
|
+
"aria-readonly": readOnly,
|
|
68
69
|
...handlers,
|
|
69
70
|
...otherGlobalAttributes
|
|
70
71
|
}
|
|
@@ -76,6 +77,7 @@ const DSInputText = (props) => {
|
|
|
76
77
|
"aria-label": "Clear input value",
|
|
77
78
|
buttonType: "icon",
|
|
78
79
|
onClick: handleClear,
|
|
80
|
+
size: "s",
|
|
79
81
|
children: /* @__PURE__ */ jsx(CloseMedium, { color: DSIconColors.PRIMARY, size: "s" })
|
|
80
82
|
}
|
|
81
83
|
)
|
|
@@ -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", "
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport 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 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 !== '' && !applyAriaDisabled && !readOnly;\n\n const defaultAriaDescribedBy = useMemo(\n () => (id !== undefined ? `${id}_feedback_message ${id}_error_message` : undefined),\n [id],\n );\n\n const handleClear = useCallback(() => {\n onClear();\n inputRef?.current?.focus();\n }, [onClear]);\n\n return (\n <StyledInputWrapper\n className={className}\n cols={shouldDisplayClearButton ? ['auto', 'min-content'] : ['auto']}\n isDisabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\n isReadOnly={readOnly}\n hasError={hasError}\n hasFocus={hasFocus}\n inputSize={inputSize}\n {...xstyledProps}\n >\n <StyledInput\n inputSize={inputSize}\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 aria-readonly={readOnly}\n {...handlers}\n {...otherGlobalAttributes}\n />\n {shouldDisplayClearButton && (\n <StyledClearButton\n disabled={disabled || applyAriaDisabled || readOnly}\n aria-label=\"Clear input value\"\n buttonType=\"icon\"\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;AA/CJ,SAAgB,aAAa,SAAS,cAAc;AACpD,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAE7B,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,MAAM,CAAC,qBAAqB,CAAC;AAElG,QAAM,yBAAyB;AAAA,IAC7B,MAAO,OAAO,SAAY,GAAG,EAAE,qBAAqB,EAAE,mBAAmB;AAAA,IACzE,CAAC,EAAE;AAAA,EACL;AAEA,QAAM,cAAc,YAAY,MAAM;AACpC,YAAQ;AACR,cAAU,SAAS,MAAM;AAAA,EAC3B,GAAG,CAAC,OAAO,CAAC;AAEZ,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAM,2BAA2B,CAAC,QAAQ,aAAa,IAAI,CAAC,MAAM;AAAA,MAClE,YAAY;AAAA,MACZ;AAAA,MACA,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;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,YACf,iBAAe;AAAA,YACd,GAAG;AAAA,YACH,GAAG;AAAA;AAAA,QACN;AAAA,QACC,4BACC;AAAA,UAAC;AAAA;AAAA,YACC,UAAU,YAAY,qBAAqB;AAAA,YAC3C,cAAW;AAAA,YACX,YAAW;AAAA,YACX,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
|
}
|
|
@@ -46,6 +46,7 @@ const StyledInput = styled("input", { name: DSInputTextName, slot: DSInputTextSl
|
|
|
46
46
|
&[aria-readonly='true'] {
|
|
47
47
|
background-color: ${th.color("neutral-050")};
|
|
48
48
|
caret-color: transparent;
|
|
49
|
+
cursor: text;
|
|
49
50
|
}
|
|
50
51
|
`;
|
|
51
52
|
const StyledClearButton = styled(DSButtonV3, { name: DSInputTextName, slot: DSInputTextSlots.CLEAR_BUTTON })`
|
|
@@ -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 { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { th, styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSInputTextName, DSInputTextSlots } from '../constants/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 background-color: ${th.color('neutral-050')};\n caret-color: transparent;\n }\n`;\n\nexport const StyledClearButton = styled(DSButtonV3, { 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,wBAQvB,GAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { th, styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSInputTextName, DSInputTextSlots } from '../constants/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 background-color: ${th.color('neutral-050')};\n caret-color: transparent;\n cursor: text;\n }\n`;\n\nexport const StyledClearButton = styled(DSButtonV3, { 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,wBAQvB,GAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA;AAMxC,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.49.0-rc.
|
|
3
|
+
"version": "3.49.0-rc.32",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Controlled Form Input Text",
|
|
6
6
|
"files": [
|
|
@@ -36,12 +36,12 @@
|
|
|
36
36
|
"indent": 4
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@elliemae/ds-button-v2": "3.49.0-rc.
|
|
40
|
-
"@elliemae/ds-grid": "3.49.0-rc.
|
|
41
|
-
"@elliemae/ds-
|
|
42
|
-
"@elliemae/ds-
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-
|
|
39
|
+
"@elliemae/ds-button-v2": "3.49.0-rc.32",
|
|
40
|
+
"@elliemae/ds-grid": "3.49.0-rc.32",
|
|
41
|
+
"@elliemae/ds-icon": "3.49.0-rc.32",
|
|
42
|
+
"@elliemae/ds-system": "3.49.0-rc.32",
|
|
43
|
+
"@elliemae/ds-props-helpers": "3.49.0-rc.32",
|
|
44
|
+
"@elliemae/ds-icons": "3.49.0-rc.32"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
47
|
"@elliemae/pui-cli": "9.0.0-next.50",
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"jest-cli": "~29.7.0",
|
|
51
51
|
"styled-components": "~5.3.9",
|
|
52
52
|
"styled-system": "~5.1.5",
|
|
53
|
-
"@elliemae/ds-monorepo-devops": "3.49.0-rc.
|
|
53
|
+
"@elliemae/ds-monorepo-devops": "3.49.0-rc.32"
|
|
54
54
|
},
|
|
55
55
|
"peerDependencies": {
|
|
56
56
|
"@elliemae/pui-theme": "~2.10.0",
|