@elliemae/ds-form-input-text 3.29.1 → 3.30.0-next.0
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 +2 -0
- package/dist/cjs/DSInputText.js.map +2 -2
- package/dist/cjs/styled/borders.js.map +2 -2
- package/dist/cjs/styled/components.js +6 -7
- package/dist/cjs/styled/components.js.map +2 -2
- package/dist/esm/DSInputText.js +2 -0
- package/dist/esm/DSInputText.js.map +2 -2
- package/dist/esm/styled/borders.js.map +2 -2
- package/dist/esm/styled/components.js +7 -8
- package/dist/esm/styled/components.js.map +2 -2
- package/dist/types/styled/borders.d.ts +3 -3
- package/dist/types/styled/components.d.ts +5 -3
- package/package.json +10 -10
package/dist/cjs/DSInputText.js
CHANGED
|
@@ -73,6 +73,7 @@ const DSInputText = (props) => {
|
|
|
73
73
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
74
74
|
import_components.StyledInput,
|
|
75
75
|
{
|
|
76
|
+
inputSize,
|
|
76
77
|
"data-testid": import_data_test_ids.DSInputTextDataTestIds.INPUT,
|
|
77
78
|
disabled,
|
|
78
79
|
placeholder,
|
|
@@ -92,6 +93,7 @@ const DSInputText = (props) => {
|
|
|
92
93
|
buttonType: "icon",
|
|
93
94
|
"data-testid": import_data_test_ids.DSInputTextDataTestIds.CLEAR_BUTTON,
|
|
94
95
|
onClick: handleClear,
|
|
96
|
+
size: "s",
|
|
95
97
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.CloseMedium, { color: import_ds_icon.DSIconColors.PRIMARY })
|
|
96
98
|
}
|
|
97
99
|
)
|
|
@@ -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-utilities';\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 { clearable, disabled, hasError, innerRef, placeholder, readOnly, inputSize, onClear, value } =\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 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 innerRef={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;ADgCnB;AAhCJ,mBAA2C;AAC3C,sBAA4B;AAC5B,qBAA6B;AAC7B,0BAA0B;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,EAAE,WAAW,UAAU,UAAU,UAAU,aAAa,UAAU,WAAW,SAAS,MAAM,IAChG;AAEF,QAAM,eAAW,qBAAyB,IAAI;AAC9C,QAAM,2BAA2B,aAAa,CAAC,YAAY,UAAU;AAErE,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,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,eAAa,4CAAuB;AAAA,YACpC;AAAA,YACA;AAAA,YACA;AAAA,YACA,cAAU,+BAAU,UAAU,QAAQ;AAAA,YACtC;AAAA,YACA,oBAAkB,OAAO,SAAY,GAAG,wBAAwB;AAAA,YAChE;AAAA,YACC,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,
|
|
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-utilities';\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 { clearable, disabled, hasError, innerRef, placeholder, readOnly, inputSize, onClear, value } =\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 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={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 size=\"s\"\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;ADgCnB;AAhCJ,mBAA2C;AAC3C,sBAA4B;AAC5B,qBAA6B;AAC7B,0BAA0B;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,EAAE,WAAW,UAAU,UAAU,UAAU,aAAa,UAAU,WAAW,SAAS,MAAM,IAChG;AAEF,QAAM,eAAW,qBAAyB,IAAI;AAC9C,QAAM,2BAA2B,aAAa,CAAC,YAAY,UAAU;AAErE,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,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,+BAAU,UAAU,QAAQ;AAAA,YACtC;AAAA,YACA,oBAAkB,OAAO,SAAY,GAAG,wBAAwB;AAAA,YAChE;AAAA,YACC,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;AAAA;AAAA,QAC5C;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,YAAY,YAAY;AACxB,YAAY,cAAc;AACnB,MAAM,4BAAwB,kCAAS,WAAW;AACzD,sBAAsB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -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;
|
|
4
|
+
"sourcesContent": ["import { th, css } from '@elliemae/ds-system';\n\ninterface BorderNecessaryProps {\n isDisabled: 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 transparent;\n border-top-color: ${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 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) 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) return readOnlyBorderCss;\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;AASxB,MAAM,kBAAkB;AAAA,sBACF,oBAAG,MAAM,aAAa;AAAA;AAG5C,MAAM,oBAAoB;AAAA;AAAA,sBAEJ,oBAAG,MAAM,aAAa;AAAA;AAG5C,MAAM,oBAAoB;AAE1B,MAAM,oBAAoB;AAAA,sBACJ,oBAAG,MAAM,YAAY;AAAA;AAG3C,MAAM,iBAAiB;AAAA,sBACD,oBAAG,MAAM,WAAW;AAAA;AAG1C,MAAM,iBAAiB;AAAA;AAAA,uBAEA,oBAAG,MAAM,WAAW;AAAA;AAAA;AAIpC,MAAM,eAAe,CAAC,UAAwD;AACnF,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,UAAwD;AACxF,MAAI,MAAM;AAAY,WAAO;AAC7B,MAAI,MAAM;AAAU,WAAO;AAC3B,MAAI,MAAM;AAAU,WAAO;AAC3B,MAAI,MAAM;AAAY,WAAO;AAC7B,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -43,18 +43,18 @@ const StyledInputWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, {
|
|
|
43
43
|
name: import_exported_related.DSInputTextName,
|
|
44
44
|
slot: import_exported_related.DSInputTextSlots.INPUT_WRAPPER
|
|
45
45
|
})`
|
|
46
|
-
height: ${({ inputSize }) => inputSize === "m" ? "28px" : "24px"};
|
|
47
|
-
|
|
48
46
|
${import_borders.getBorderCss}
|
|
49
47
|
border-radius: 2px;
|
|
50
|
-
|
|
51
48
|
:hover {
|
|
52
49
|
${import_borders.getHoverBorderCss}
|
|
53
50
|
}
|
|
54
51
|
${import_ds_system.xStyledCommonProps}
|
|
55
52
|
`;
|
|
56
53
|
const StyledInput = (0, import_ds_system.styled)("input", { name: import_exported_related.DSInputTextName, slot: import_exported_related.DSInputTextSlots.INPUT })`
|
|
57
|
-
padding:
|
|
54
|
+
padding: ${({ inputSize }) => inputSize === "m" ? "5px" : "3px"} ${import_ds_system.th.space("xxs")};
|
|
55
|
+
@media (max-width: ${import_ds_system.th.breakpoint("small")}) {
|
|
56
|
+
padding: ${({ inputSize }) => inputSize === "m" ? "3.25px" : "1.25px"} ${import_ds_system.th.space("xxs")};
|
|
57
|
+
}
|
|
58
58
|
border: none;
|
|
59
59
|
outline: none;
|
|
60
60
|
border-radius: 2px;
|
|
@@ -75,10 +75,9 @@ const StyledInput = (0, import_ds_system.styled)("input", { name: import_exporte
|
|
|
75
75
|
cursor: not-allowed;
|
|
76
76
|
}
|
|
77
77
|
`;
|
|
78
|
-
const StyledClearButton = (0, import_ds_system.styled)(import_ds_button_v2.
|
|
78
|
+
const StyledClearButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV3, { name: import_exported_related.DSInputTextName, slot: import_exported_related.DSInputTextSlots.CLEAR_BUTTON })`
|
|
79
79
|
height: 100%;
|
|
80
|
-
|
|
81
|
-
width: 20px;
|
|
80
|
+
|
|
82
81
|
&:after {
|
|
83
82
|
border-top-left-radius: 0px !important;
|
|
84
83
|
border-bottom-left-radius: 0px !important;
|
|
@@ -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 {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA2B;AAC3B,qBAAqB;AACrB,uBAA+C;AAC/C,8BAAkD;AAClD,qBAAgD;AAUzC,MAAM,yBAAqB,yBAAO,qBAAM;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,yCAAiB;AACzB,CAAC;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 '../exported-related/index.js';\nimport { getBorderCss, getHoverBorderCss } from './borders.js';\n\ninterface StyledInputWrapperProps {\n isDisabled: 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 ${xStyledCommonProps}\n`;\n\nexport const StyledInput = styled('input', { name: DSInputTextName, slot: DSInputTextSlots.INPUT })<{\n inputSize: string;\n}>`\n padding: ${({ inputSize }) => (inputSize === 'm' ? '5px' : '3px')} ${th.space('xxs')};\n @media (max-width: ${th.breakpoint('small')}) {\n padding: ${({ inputSize }) => (inputSize === 'm' ? '3.25px' : '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 }\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 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;AAUzC,MAAM,yBAAqB,yBAAO,qBAAM;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,yCAAiB;AACzB,CAAC;AAAA,IACG;AAAA;AAAA;AAAA,MAGE;AAAA;AAAA,IAEF;AAAA;AAGG,MAAM,kBAAc,yBAAO,SAAS,EAAE,MAAM,yCAAiB,MAAM,yCAAiB,MAAM,CAAC;AAAA,aAGrF,CAAC,EAAE,UAAU,MAAO,cAAc,MAAM,QAAQ,SAAU,oBAAG,MAAM,KAAK;AAAA,uBAC9D,oBAAG,WAAW,OAAO;AAAA,eAC7B,CAAC,EAAE,UAAU,MAAO,cAAc,MAAM,WAAW,YAAa,oBAAG,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAQlF,oBAAG,MAAM,aAAa;AAAA;AAAA;AAAA,mBAGd,oBAAG,WAAW,SAAS;AAAA;AAAA,aAE7B,oBAAG,MAAM,aAAa;AAAA;AAAA;AAAA;AAAA,wBAIX,oBAAG,MAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAMvC,MAAM,wBAAoB,yBAAO,gCAAY,EAAE,MAAM,yCAAiB,MAAM,yCAAiB,aAAa,CAAC;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
|
@@ -39,6 +39,7 @@ const DSInputText = (props) => {
|
|
|
39
39
|
/* @__PURE__ */ jsx(
|
|
40
40
|
StyledInput,
|
|
41
41
|
{
|
|
42
|
+
inputSize,
|
|
42
43
|
"data-testid": DSInputTextDataTestIds.INPUT,
|
|
43
44
|
disabled,
|
|
44
45
|
placeholder,
|
|
@@ -58,6 +59,7 @@ const DSInputText = (props) => {
|
|
|
58
59
|
buttonType: "icon",
|
|
59
60
|
"data-testid": DSInputTextDataTestIds.CLEAR_BUTTON,
|
|
60
61
|
onClick: handleClear,
|
|
62
|
+
size: "s",
|
|
61
63
|
children: /* @__PURE__ */ jsx(CloseMedium, { color: DSIconColors.PRIMARY })
|
|
62
64
|
}
|
|
63
65
|
)
|
|
@@ -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-utilities';\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 { clearable, disabled, hasError, innerRef, placeholder, readOnly, inputSize, onClear, value } =\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 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 innerRef={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,YAAY,WAAW;ACgCnB,SAUE,KAVF;AAhCJ,SAAgB,aAAa,cAAc;AAC3C,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,EAAE,WAAW,UAAU,UAAU,UAAU,aAAa,UAAU,WAAW,SAAS,MAAM,IAChG;AAEF,QAAM,WAAW,OAAyB,IAAI;AAC9C,QAAM,2BAA2B,aAAa,CAAC,YAAY,UAAU;AAErE,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,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,eAAa,uBAAuB;AAAA,YACpC;AAAA,YACA;AAAA,YACA;AAAA,YACA,UAAU,UAAU,UAAU,QAAQ;AAAA,YACtC;AAAA,YACA,oBAAkB,OAAO,SAAY,GAAG,wBAAwB;AAAA,YAChE;AAAA,YACC,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,
|
|
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-utilities';\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 { clearable, disabled, hasError, innerRef, placeholder, readOnly, inputSize, onClear, value } =\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 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={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 size=\"s\"\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,YAAY,WAAW;ACgCnB,SAUE,KAVF;AAhCJ,SAAgB,aAAa,cAAc;AAC3C,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,EAAE,WAAW,UAAU,UAAU,UAAU,aAAa,UAAU,WAAW,SAAS,MAAM,IAChG;AAEF,QAAM,WAAW,OAAyB,IAAI;AAC9C,QAAM,2BAA2B,aAAa,CAAC,YAAY,UAAU;AAErE,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,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,oBAAkB,OAAO,SAAY,GAAG,wBAAwB;AAAA,YAChE;AAAA,YACC,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;AAAA;AAAA,QAC5C;AAAA;AAAA;AAAA,EAEJ;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/styled/borders.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { th, css } from '@elliemae/ds-system';\n\ninterface BorderNecessaryProps {\n isDisabled: 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 transparent;\n border-top-color: ${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 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) 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) return readOnlyBorderCss;\n return hoverBorderCss;\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,IAAI,WAAW;AASxB,MAAM,kBAAkB;AAAA,sBACF,GAAG,MAAM,aAAa;AAAA;AAG5C,MAAM,oBAAoB;AAAA;AAAA,sBAEJ,GAAG,MAAM,aAAa;AAAA;AAG5C,MAAM,oBAAoB;AAE1B,MAAM,oBAAoB;AAAA,sBACJ,GAAG,MAAM,YAAY;AAAA;AAG3C,MAAM,iBAAiB;AAAA,sBACD,GAAG,MAAM,WAAW;AAAA;AAG1C,MAAM,iBAAiB;AAAA;AAAA,uBAEA,GAAG,MAAM,WAAW;AAAA;AAAA;AAIpC,MAAM,eAAe,CAAC,UAAwD;AACnF,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,UAAwD;AACxF,MAAI,MAAM;AAAY,WAAO;AAC7B,MAAI,MAAM;AAAU,WAAO;AAC3B,MAAI,MAAM;AAAU,WAAO;AAC3B,MAAI,MAAM;AAAY,WAAO;AAC7B,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import {
|
|
2
|
+
import { DSButtonV3 } from "@elliemae/ds-button-v2";
|
|
3
3
|
import { Grid } from "@elliemae/ds-grid";
|
|
4
4
|
import { th, styled, xStyledCommonProps } from "@elliemae/ds-system";
|
|
5
5
|
import { DSInputTextName, DSInputTextSlots } from "../exported-related/index.js";
|
|
@@ -8,18 +8,18 @@ const StyledInputWrapper = styled(Grid, {
|
|
|
8
8
|
name: DSInputTextName,
|
|
9
9
|
slot: DSInputTextSlots.INPUT_WRAPPER
|
|
10
10
|
})`
|
|
11
|
-
height: ${({ inputSize }) => inputSize === "m" ? "28px" : "24px"};
|
|
12
|
-
|
|
13
11
|
${getBorderCss}
|
|
14
12
|
border-radius: 2px;
|
|
15
|
-
|
|
16
13
|
:hover {
|
|
17
14
|
${getHoverBorderCss}
|
|
18
15
|
}
|
|
19
16
|
${xStyledCommonProps}
|
|
20
17
|
`;
|
|
21
18
|
const StyledInput = styled("input", { name: DSInputTextName, slot: DSInputTextSlots.INPUT })`
|
|
22
|
-
padding:
|
|
19
|
+
padding: ${({ inputSize }) => inputSize === "m" ? "5px" : "3px"} ${th.space("xxs")};
|
|
20
|
+
@media (max-width: ${th.breakpoint("small")}) {
|
|
21
|
+
padding: ${({ inputSize }) => inputSize === "m" ? "3.25px" : "1.25px"} ${th.space("xxs")};
|
|
22
|
+
}
|
|
23
23
|
border: none;
|
|
24
24
|
outline: none;
|
|
25
25
|
border-radius: 2px;
|
|
@@ -40,10 +40,9 @@ const StyledInput = styled("input", { name: DSInputTextName, slot: DSInputTextSl
|
|
|
40
40
|
cursor: not-allowed;
|
|
41
41
|
}
|
|
42
42
|
`;
|
|
43
|
-
const StyledClearButton = styled(
|
|
43
|
+
const StyledClearButton = styled(DSButtonV3, { name: DSInputTextName, slot: DSInputTextSlots.CLEAR_BUTTON })`
|
|
44
44
|
height: 100%;
|
|
45
|
-
|
|
46
|
-
width: 20px;
|
|
45
|
+
|
|
47
46
|
&:after {
|
|
48
47
|
border-top-left-radius: 0px !important;
|
|
49
48
|
border-bottom-left-radius: 0px !important;
|
|
@@ -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 {
|
|
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;AAUzC,MAAM,qBAAqB,OAAO,MAAM;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;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 '../exported-related/index.js';\nimport { getBorderCss, getHoverBorderCss } from './borders.js';\n\ninterface StyledInputWrapperProps {\n isDisabled: 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 ${xStyledCommonProps}\n`;\n\nexport const StyledInput = styled('input', { name: DSInputTextName, slot: DSInputTextSlots.INPUT })<{\n inputSize: string;\n}>`\n padding: ${({ inputSize }) => (inputSize === 'm' ? '5px' : '3px')} ${th.space('xxs')};\n @media (max-width: ${th.breakpoint('small')}) {\n padding: ${({ inputSize }) => (inputSize === 'm' ? '3.25px' : '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 }\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 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;AAUzC,MAAM,qBAAqB,OAAO,MAAM;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAAA,IACG;AAAA;AAAA;AAAA,MAGE;AAAA;AAAA,IAEF;AAAA;AAGG,MAAM,cAAc,OAAO,SAAS,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,MAAM,CAAC;AAAA,aAGrF,CAAC,EAAE,UAAU,MAAO,cAAc,MAAM,QAAQ,SAAU,GAAG,MAAM,KAAK;AAAA,uBAC9D,GAAG,WAAW,OAAO;AAAA,eAC7B,CAAC,EAAE,UAAU,MAAO,cAAc,MAAM,WAAW,YAAa,GAAG,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAQlF,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;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { css } from '@elliemae/ds-system';
|
|
2
2
|
interface BorderNecessaryProps {
|
|
3
3
|
isDisabled: boolean;
|
|
4
4
|
hasError: boolean;
|
|
5
5
|
isReadOnly: boolean;
|
|
6
6
|
hasFocus: boolean;
|
|
7
7
|
}
|
|
8
|
-
export declare const getBorderCss: (props: BorderNecessaryProps) =>
|
|
9
|
-
export declare const getHoverBorderCss: (props: BorderNecessaryProps) =>
|
|
8
|
+
export declare const getBorderCss: (props: BorderNecessaryProps) => ReturnType<typeof css>;
|
|
9
|
+
export declare const getHoverBorderCss: (props: BorderNecessaryProps) => ReturnType<typeof css>;
|
|
10
10
|
export {};
|
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
interface StyledInputWrapperProps {
|
|
3
|
-
inputSize: string;
|
|
4
3
|
isDisabled: boolean;
|
|
5
4
|
hasError: boolean;
|
|
6
5
|
isReadOnly: boolean;
|
|
7
6
|
hasFocus: boolean;
|
|
7
|
+
inputSize: string;
|
|
8
8
|
}
|
|
9
9
|
export declare const StyledInputWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, StyledInputWrapperProps & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
|
|
10
|
-
export declare const StyledInput: import("styled-components").StyledComponent<"input", import("@elliemae/ds-system").Theme,
|
|
11
|
-
|
|
10
|
+
export declare const StyledInput: import("styled-components").StyledComponent<"input", import("@elliemae/ds-system").Theme, {
|
|
11
|
+
inputSize: string;
|
|
12
|
+
} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"input">, never>;
|
|
13
|
+
export declare const StyledClearButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV3T.Props>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV3T.Props>>, never>;
|
|
12
14
|
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-form-input-text",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.30.0-next.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Controlled Form Input Text",
|
|
6
6
|
"files": [
|
|
@@ -35,20 +35,20 @@
|
|
|
35
35
|
"indent": 4
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@elliemae/ds-button-v2": "3.
|
|
39
|
-
"@elliemae/ds-grid": "3.
|
|
40
|
-
"@elliemae/ds-icon": "3.
|
|
41
|
-
"@elliemae/ds-
|
|
42
|
-
"@elliemae/ds-
|
|
43
|
-
"@elliemae/ds-system": "3.
|
|
44
|
-
"@elliemae/ds-utilities": "3.
|
|
38
|
+
"@elliemae/ds-button-v2": "3.30.0-next.0",
|
|
39
|
+
"@elliemae/ds-grid": "3.30.0-next.0",
|
|
40
|
+
"@elliemae/ds-icon": "3.30.0-next.0",
|
|
41
|
+
"@elliemae/ds-props-helpers": "3.30.0-next.0",
|
|
42
|
+
"@elliemae/ds-icons": "3.30.0-next.0",
|
|
43
|
+
"@elliemae/ds-system": "3.30.0-next.0",
|
|
44
|
+
"@elliemae/ds-utilities": "3.30.0-next.0"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
47
|
"@elliemae/pui-cli": "~9.0.0-next.31",
|
|
48
48
|
"@elliemae/pui-theme": "~2.7.0",
|
|
49
49
|
"styled-components": "~5.3.9",
|
|
50
50
|
"styled-system": "~5.1.5",
|
|
51
|
-
"@elliemae/ds-monorepo-devops": "3.
|
|
51
|
+
"@elliemae/ds-monorepo-devops": "3.30.0-next.0"
|
|
52
52
|
},
|
|
53
53
|
"peerDependencies": {
|
|
54
54
|
"@elliemae/pui-theme": "~2.7.0",
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
},
|
|
60
60
|
"publishConfig": {
|
|
61
61
|
"access": "public",
|
|
62
|
-
"typeSafety":
|
|
62
|
+
"typeSafety": true
|
|
63
63
|
},
|
|
64
64
|
"scripts": {
|
|
65
65
|
"dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",
|