@elliemae/ds-form-input-textarea 3.3.0-next.6 → 3.3.0-next.9
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/DSControlledLargeTextInput.js +17 -18
- package/dist/cjs/DSControlledLargeTextInput.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +2 -3
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/styles.js +5 -9
- package/dist/cjs/styles.js.map +2 -2
- package/dist/esm/DSControlledLargeTextInput.js +20 -20
- package/dist/esm/DSControlledLargeTextInput.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +2 -3
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/styles.js +5 -9
- package/dist/esm/styles.js.map +2 -2
- package/package.json +3 -3
|
@@ -34,40 +34,39 @@ var import_exported_related = require("./exported-related");
|
|
|
34
34
|
const DSControlledLargeTextInput = (props) => {
|
|
35
35
|
(0, import_ds_utilities.useValidateTypescriptPropTypes)(props, import_react_desc_prop_types.propTypes);
|
|
36
36
|
const propsWithDefault = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
|
|
37
|
-
const {
|
|
38
|
-
maxLength,
|
|
39
|
-
value,
|
|
40
|
-
onChange,
|
|
41
|
-
innerRef,
|
|
42
|
-
resizable,
|
|
43
|
-
name,
|
|
44
|
-
id,
|
|
45
|
-
withoutCharacterCounter,
|
|
46
|
-
hasError,
|
|
47
|
-
...otherProps
|
|
48
|
-
} = propsWithDefault;
|
|
37
|
+
const { value, onChange, innerRef, resizable, name, id, hasError, maxHeight, ...otherProps } = propsWithDefault;
|
|
49
38
|
const { className, ...globalAttributes } = (0, import_ds_utilities.useGetGlobalAttributes)(otherProps);
|
|
50
39
|
const xstyledProps = (0, import_ds_utilities.useGetXstyledProps)(otherProps);
|
|
40
|
+
const textareaRef = (0, import_react.useRef)(null);
|
|
51
41
|
const handleOnChange = (0, import_react.useCallback)((e) => onChange(e.target.value, e), [onChange]);
|
|
42
|
+
(0, import_react.useLayoutEffect)(() => {
|
|
43
|
+
if (textareaRef && textareaRef.current && value !== "") {
|
|
44
|
+
textareaRef.current.style.maxHeight = "0px";
|
|
45
|
+
const { scrollHeight } = textareaRef.current;
|
|
46
|
+
if (maxHeight !== void 0 && scrollHeight >= maxHeight)
|
|
47
|
+
textareaRef.current.style.minHeight = `${maxHeight}px`;
|
|
48
|
+
else
|
|
49
|
+
textareaRef.current.style.minHeight = `${scrollHeight}px`;
|
|
50
|
+
textareaRef.current.style.maxHeight = `${maxHeight}px`;
|
|
51
|
+
}
|
|
52
|
+
}, [maxHeight, value]);
|
|
52
53
|
return /* @__PURE__ */ import_react.default.createElement(import_styles.StyledContainer, {
|
|
53
54
|
className,
|
|
54
55
|
"data-testid": import_exported_related.DSControlledLargetTextInputDatatestids.CONTAINER,
|
|
55
56
|
...xstyledProps
|
|
56
57
|
}, /* @__PURE__ */ import_react.default.createElement(import_styles.StyledTextArea, {
|
|
57
|
-
ref: innerRef,
|
|
58
|
-
maxLength,
|
|
58
|
+
ref: (0, import_ds_utilities.mergeRefs)(innerRef, textareaRef),
|
|
59
59
|
"aria-multiline": true,
|
|
60
60
|
value,
|
|
61
|
+
$maxHeight: maxHeight,
|
|
61
62
|
onChange: handleOnChange,
|
|
62
63
|
resizable,
|
|
63
64
|
name,
|
|
64
65
|
id,
|
|
65
66
|
"data-testid": import_exported_related.DSControlledLargetTextInputDatatestids.INPUT,
|
|
66
|
-
hasError,
|
|
67
|
+
$hasError: hasError,
|
|
67
68
|
...globalAttributes
|
|
68
|
-
})
|
|
69
|
-
"data-testid": import_exported_related.DSControlledLargetTextInputDatatestids.CHAR_COUNTER
|
|
70
|
-
}, `${value.length}/${maxLength}`));
|
|
69
|
+
}));
|
|
71
70
|
};
|
|
72
71
|
DSControlledLargeTextInput.displayName = "DSControlledLargeTextInput";
|
|
73
72
|
const DSControlledLargeTextInputWithSchema = (0, import_ds_utilities.describe)(DSControlledLargeTextInput);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSControlledLargeTextInput.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useCallback, WeakValidationMap } from 'react';\nimport {\n describe,\n useValidateTypescriptPropTypes,\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useGetXstyledProps,\n} from '@elliemae/ds-utilities';\nimport { propTypes, defaultProps } from './react-desc-prop-types';\nimport { StyledTextArea, StyledContainer
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,
|
|
4
|
+
"sourcesContent": ["import React, { useCallback, WeakValidationMap, useRef, useLayoutEffect } from 'react';\nimport {\n describe,\n mergeRefs,\n useValidateTypescriptPropTypes,\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useGetXstyledProps,\n} from '@elliemae/ds-utilities';\nimport { propTypes, defaultProps } from './react-desc-prop-types';\nimport { StyledTextArea, StyledContainer } from './styles';\nimport { DSControlledLargetTextInputDatatestids } from './exported-related';\nimport type { DSControlledLargeTextInputT } from './react-desc-prop-types';\n\nconst DSControlledLargeTextInput = (props: DSControlledLargeTextInputT.Props): JSX.Element => {\n useValidateTypescriptPropTypes(props, propTypes);\n\n const propsWithDefault = useMemoMergePropsWithDefault<DSControlledLargeTextInputT.Props>(props, defaultProps);\n\n const { value, onChange, innerRef, resizable, name, id, hasError, maxHeight, ...otherProps } = propsWithDefault;\n\n const { className, ...globalAttributes } = useGetGlobalAttributes(otherProps);\n\n const xstyledProps = useGetXstyledProps(otherProps);\n\n const textareaRef = useRef<HTMLTextAreaElement | null>(null);\n\n const handleOnChange = useCallback(\n (e: React.KeyboardEvent) => onChange((e.target as HTMLInputElement).value, e),\n [onChange],\n );\n\n useLayoutEffect(() => {\n if (textareaRef && textareaRef.current && value !== '') {\n textareaRef.current.style.maxHeight = '0px';\n const { scrollHeight } = textareaRef.current;\n if (maxHeight !== undefined && scrollHeight >= maxHeight) textareaRef.current.style.minHeight = `${maxHeight}px`;\n else textareaRef.current.style.minHeight = `${scrollHeight}px`;\n textareaRef.current.style.maxHeight = `${maxHeight}px`;\n }\n }, [maxHeight, value]);\n\n return (\n <StyledContainer\n className={className}\n data-testid={DSControlledLargetTextInputDatatestids.CONTAINER}\n {...xstyledProps}\n >\n <StyledTextArea\n ref={mergeRefs(innerRef, textareaRef)}\n aria-multiline\n value={value}\n $maxHeight={maxHeight}\n onChange={handleOnChange}\n resizable={resizable}\n name={name}\n id={id}\n data-testid={DSControlledLargetTextInputDatatestids.INPUT}\n $hasError={hasError}\n {...globalAttributes}\n />\n </StyledContainer>\n );\n};\n\nDSControlledLargeTextInput.displayName = 'DSControlledLargeTextInput';\nconst DSControlledLargeTextInputWithSchema = describe(DSControlledLargeTextInput);\nDSControlledLargeTextInputWithSchema.propTypes = propTypes as WeakValidationMap<unknown>;\n\nexport { DSControlledLargeTextInput, DSControlledLargeTextInputWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA+E;AAC/E,0BAOO;AACP,mCAAwC;AACxC,oBAAgD;AAChD,8BAAuD;AAGvD,MAAM,6BAA6B,CAAC,UAA0D;AAC5F,0DAA+B,OAAO,sCAAS;AAE/C,QAAM,mBAAmB,sDAAgE,OAAO,yCAAY;AAE5G,QAAM,EAAE,OAAO,UAAU,UAAU,WAAW,MAAM,IAAI,UAAU,cAAc,eAAe;AAE/F,QAAM,EAAE,cAAc,qBAAqB,gDAAuB,UAAU;AAE5E,QAAM,eAAe,4CAAmB,UAAU;AAElD,QAAM,cAAc,yBAAmC,IAAI;AAE3D,QAAM,iBAAiB,8BACrB,CAAC,MAA2B,SAAU,EAAE,OAA4B,OAAO,CAAC,GAC5E,CAAC,QAAQ,CACX;AAEA,oCAAgB,MAAM;AACpB,QAAI,eAAe,YAAY,WAAW,UAAU,IAAI;AACtD,kBAAY,QAAQ,MAAM,YAAY;AACtC,YAAM,EAAE,iBAAiB,YAAY;AACrC,UAAI,cAAc,UAAa,gBAAgB;AAAW,oBAAY,QAAQ,MAAM,YAAY,GAAG;AAAA;AAC9F,oBAAY,QAAQ,MAAM,YAAY,GAAG;AAC9C,kBAAY,QAAQ,MAAM,YAAY,GAAG;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,WAAW,KAAK,CAAC;AAErB,SACE,mDAAC;AAAA,IACC;AAAA,IACA,eAAa,+DAAuC;AAAA,IACnD,GAAG;AAAA,KAEJ,mDAAC;AAAA,IACC,KAAK,mCAAU,UAAU,WAAW;AAAA,IACpC,kBAAc;AAAA,IACd;AAAA,IACA,YAAY;AAAA,IACZ,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAa,+DAAuC;AAAA,IACpD,WAAW;AAAA,IACV,GAAG;AAAA,GACN,CACF;AAEJ;AAEA,2BAA2B,cAAc;AACzC,MAAM,uCAAuC,kCAAS,0BAA0B;AAChF,qCAAqC,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -30,9 +30,9 @@ var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
|
30
30
|
const noop = () => {
|
|
31
31
|
};
|
|
32
32
|
const defaultProps = {
|
|
33
|
+
rows: "2",
|
|
33
34
|
value: "",
|
|
34
35
|
onChange: noop,
|
|
35
|
-
withoutCharacterCounter: false,
|
|
36
36
|
resizable: false,
|
|
37
37
|
hasError: false
|
|
38
38
|
};
|
|
@@ -43,12 +43,11 @@ const propTypes = {
|
|
|
43
43
|
onChange: import_ds_utilities.PropTypes.func.description("OnChange cb.").defaultValue("() => {}"),
|
|
44
44
|
resizable: import_ds_utilities.PropTypes.bool.description("Enables to resize the component.").defaultValue(false),
|
|
45
45
|
rows: import_ds_utilities.PropTypes.string.description("Sets the number of lines for the default height. Once lines are reached, scroll behavior enables."),
|
|
46
|
-
withoutCharacterCounter: import_ds_utilities.PropTypes.bool.description("Removes the character counter.").defaultValue(false),
|
|
47
46
|
id: import_ds_utilities.PropTypes.string.description("Unique id."),
|
|
48
47
|
innerRef: import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.object, import_ds_utilities.PropTypes.func]).description("Inner ref to the input."),
|
|
49
|
-
maxLength: import_ds_utilities.PropTypes.string.description("Max characters allowed."),
|
|
50
48
|
disabled: import_ds_utilities.PropTypes.bool.description("Set disabled state."),
|
|
51
49
|
readOnly: import_ds_utilities.PropTypes.bool.description("Set readonly state."),
|
|
50
|
+
maxHeight: import_ds_utilities.PropTypes.number.description("Set max height to recize input text"),
|
|
52
51
|
hasError: import_ds_utilities.PropTypes.bool.description("Set error state.").defaultValue(false)
|
|
53
52
|
};
|
|
54
53
|
//# 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 { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\n\nconst noop = () => {};\n\nexport declare namespace DSControlledLargeTextInputT {\n export interface DefaultProps {\n value: string;\n onChange: () => void;\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAAuE;AAEvE,MAAM,OAAO,MAAM;AAAC;
|
|
4
|
+
"sourcesContent": ["import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\n\nconst noop = () => {};\n\nexport declare namespace DSControlledLargeTextInputT {\n export interface DefaultProps {\n value: string;\n onChange: () => void;\n resizable: boolean;\n hasError: boolean;\n rows: string;\n }\n\n export interface RequiredProps {\n name: string;\n id: string;\n }\n\n export interface PropsOptional {\n disabled?: boolean;\n readOnly?: boolean;\n maxHeight?: number;\n innerRef?: React.MutableRefObject<HTMLTextAreaElement | null>;\n hasError?: boolean;\n }\n\n export interface Props extends DefaultProps, PropsOptional, RequiredProps {}\n}\n\nexport const defaultProps: DSControlledLargeTextInputT.DefaultProps = {\n rows: '2',\n value: '',\n onChange: noop,\n resizable: false,\n hasError: false,\n};\n\nexport const propTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n value: PropTypes.string.description('Text are value.').defaultValue(''),\n onChange: PropTypes.func.description('OnChange cb.').defaultValue('() => {}'),\n resizable: PropTypes.bool.description('Enables to resize the component.').defaultValue(false),\n rows: PropTypes.string.description(\n 'Sets the number of lines for the default height. Once lines are reached, scroll behavior enables.',\n ),\n id: PropTypes.string.description('Unique id.'),\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to the input.'),\n disabled: PropTypes.bool.description('Set disabled state.'),\n readOnly: PropTypes.bool.description('Set readonly state.'),\n maxHeight: PropTypes.number.description('Set max height to recize input text'),\n hasError: PropTypes.bool.description('Set error state.').defaultValue(false),\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAAuE;AAEvE,MAAM,OAAO,MAAM;AAAC;AA2Bb,MAAM,eAAyD;AAAA,EACpE,MAAM;AAAA,EACN,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX,UAAU;AACZ;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAO,8BAAU,OAAO,YAAY,iBAAiB,EAAE,aAAa,EAAE;AAAA,EACtE,UAAU,8BAAU,KAAK,YAAY,cAAc,EAAE,aAAa,UAAU;AAAA,EAC5E,WAAW,8BAAU,KAAK,YAAY,kCAAkC,EAAE,aAAa,KAAK;AAAA,EAC5F,MAAM,8BAAU,OAAO,YACrB,mGACF;AAAA,EACA,IAAI,8BAAU,OAAO,YAAY,YAAY;AAAA,EAC7C,UAAU,8BAAU,UAAU,CAAC,8BAAU,QAAQ,8BAAU,IAAI,CAAC,EAAE,YAAY,yBAAyB;AAAA,EACvG,UAAU,8BAAU,KAAK,YAAY,qBAAqB;AAAA,EAC1D,UAAU,8BAAU,KAAK,YAAY,qBAAqB;AAAA,EAC1D,WAAW,8BAAU,OAAO,YAAY,qCAAqC;AAAA,EAC7E,UAAU,8BAAU,KAAK,YAAY,kBAAkB,EAAE,aAAa,KAAK;AAC7E;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/styles.js
CHANGED
|
@@ -21,7 +21,6 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
21
21
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
22
|
var styles_exports = {};
|
|
23
23
|
__export(styles_exports, {
|
|
24
|
-
StyledCharCounter: () => StyledCharCounter,
|
|
25
24
|
StyledContainer: () => StyledContainer,
|
|
26
25
|
StyledTextArea: () => StyledTextArea
|
|
27
26
|
});
|
|
@@ -41,16 +40,13 @@ const StyledContainer = (0, import_ds_system.styled)("div", {
|
|
|
41
40
|
${import_ds_system.space}
|
|
42
41
|
${import_ds_system.sizing}
|
|
43
42
|
`;
|
|
44
|
-
const StyledCharCounter = (0, import_ds_system.styled)("span", {
|
|
45
|
-
name: import_exported_related.DSControlledLargeTextInputName,
|
|
46
|
-
slot: import_exported_related.DSControlledLargeTextInputSlots.CHAR_COUNTER
|
|
47
|
-
})`
|
|
48
|
-
justify-self: flex-end;
|
|
49
|
-
`;
|
|
50
43
|
const StyledTextArea = (0, import_ds_system.styled)("textarea", {
|
|
51
44
|
name: import_exported_related.DSControlledLargeTextInputName,
|
|
52
45
|
slot: import_exported_related.DSControlledLargeTextInputSlots.INPUT
|
|
53
46
|
})`
|
|
47
|
+
&:hover {
|
|
48
|
+
border: 1px solid ${({ theme }) => theme.colors.brand[700]};
|
|
49
|
+
}
|
|
54
50
|
width: 100%;
|
|
55
51
|
${({ resizable }) => resizable ? `` : `resize: none;`}
|
|
56
52
|
&:disabled {
|
|
@@ -58,7 +54,7 @@ const StyledTextArea = (0, import_ds_system.styled)("textarea", {
|
|
|
58
54
|
cursor: not-allowed;
|
|
59
55
|
}
|
|
60
56
|
}
|
|
61
|
-
|
|
62
|
-
${({ hasError }) => hasError ? `border: 1px solid red;` : ``}
|
|
57
|
+
${({ $maxHeight }) => $maxHeight ? `max-height: ${$maxHeight}px;` : ``}
|
|
58
|
+
${({ $hasError }) => $hasError ? `border: 1px solid red;` : ``}
|
|
63
59
|
`;
|
|
64
60
|
//# sourceMappingURL=styles.js.map
|
package/dist/cjs/styles.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styles.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { styled, layout, space, sizing } from '@elliemae/ds-system';\nimport { DSControlledLargeTextInputName, DSControlledLargeTextInputSlots } from './exported-related';\n\ninterface StyledTextAreaT {\n resizable: boolean;\n hasError: boolean;\n}\n\nexport const StyledContainer = styled('div', {\n name: DSControlledLargeTextInputName,\n slot: DSControlledLargeTextInputSlots.CONTAINER,\n})`\n display: grid;\n grid-gap: 4px;\n grid-template-rows: auto auto;\n grid-template-columns: fit-content;\n ${layout}\n ${space}\n ${sizing}\n`;\n\nexport const
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import { styled, layout, space, sizing } from '@elliemae/ds-system';\nimport { DSControlledLargeTextInputName, DSControlledLargeTextInputSlots } from './exported-related';\n\ninterface StyledTextAreaT {\n resizable: boolean;\n hasError: boolean;\n}\n\nexport const StyledContainer = styled('div', {\n name: DSControlledLargeTextInputName,\n slot: DSControlledLargeTextInputSlots.CONTAINER,\n})`\n display: grid;\n grid-gap: 4px;\n grid-template-rows: auto auto;\n grid-template-columns: fit-content;\n ${layout}\n ${space}\n ${sizing}\n`;\n\nexport const StyledTextArea = styled('textarea', {\n name: DSControlledLargeTextInputName,\n slot: DSControlledLargeTextInputSlots.INPUT,\n})<StyledTextAreaT>`\n &:hover { \n border: 1px solid ${({theme}) => theme.colors.brand[700]};\n }\n width: 100%;\n ${({ resizable }) => (resizable ? `` : `resize: none;`)}\n &:disabled {\n &:hover {\n cursor: not-allowed;\n }\n }\n ${({ $maxHeight }) => ($maxHeight ? `max-height: ${$maxHeight}px;` : ``)}\n ${({ $hasError }) => ($hasError ? `border: 1px solid red;` : ``)}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA8C;AAC9C,8BAAgF;AAOzE,MAAM,kBAAkB,6BAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,wDAAgC;AACxC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKG;AAAA,IACA;AAAA,IACA;AAAA;AAGG,MAAM,iBAAiB,6BAAO,YAAY;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,wDAAgC;AACxC,CAAC;AAAA;AAAA,wBAEuB,CAAC,EAAC,YAAW,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA,IAGpD,CAAC,EAAE,gBAAiB,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMrC,CAAC,EAAE,iBAAkB,aAAa,eAAe,kBAAkB;AAAA,IACnE,CAAC,EAAE,gBAAiB,YAAY,2BAA2B;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,53 +1,53 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
import * as React from "react";
|
|
3
|
-
import React2, { useCallback } from "react";
|
|
3
|
+
import React2, { useCallback, useRef, useLayoutEffect } from "react";
|
|
4
4
|
import {
|
|
5
5
|
describe,
|
|
6
|
+
mergeRefs,
|
|
6
7
|
useValidateTypescriptPropTypes,
|
|
7
8
|
useMemoMergePropsWithDefault,
|
|
8
9
|
useGetGlobalAttributes,
|
|
9
10
|
useGetXstyledProps
|
|
10
11
|
} from "@elliemae/ds-utilities";
|
|
11
12
|
import { propTypes, defaultProps } from "./react-desc-prop-types";
|
|
12
|
-
import { StyledTextArea, StyledContainer
|
|
13
|
+
import { StyledTextArea, StyledContainer } from "./styles";
|
|
13
14
|
import { DSControlledLargetTextInputDatatestids } from "./exported-related";
|
|
14
15
|
const DSControlledLargeTextInput = (props) => {
|
|
15
16
|
useValidateTypescriptPropTypes(props, propTypes);
|
|
16
17
|
const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
|
|
17
|
-
const {
|
|
18
|
-
maxLength,
|
|
19
|
-
value,
|
|
20
|
-
onChange,
|
|
21
|
-
innerRef,
|
|
22
|
-
resizable,
|
|
23
|
-
name,
|
|
24
|
-
id,
|
|
25
|
-
withoutCharacterCounter,
|
|
26
|
-
hasError,
|
|
27
|
-
...otherProps
|
|
28
|
-
} = propsWithDefault;
|
|
18
|
+
const { value, onChange, innerRef, resizable, name, id, hasError, maxHeight, ...otherProps } = propsWithDefault;
|
|
29
19
|
const { className, ...globalAttributes } = useGetGlobalAttributes(otherProps);
|
|
30
20
|
const xstyledProps = useGetXstyledProps(otherProps);
|
|
21
|
+
const textareaRef = useRef(null);
|
|
31
22
|
const handleOnChange = useCallback((e) => onChange(e.target.value, e), [onChange]);
|
|
23
|
+
useLayoutEffect(() => {
|
|
24
|
+
if (textareaRef && textareaRef.current && value !== "") {
|
|
25
|
+
textareaRef.current.style.maxHeight = "0px";
|
|
26
|
+
const { scrollHeight } = textareaRef.current;
|
|
27
|
+
if (maxHeight !== void 0 && scrollHeight >= maxHeight)
|
|
28
|
+
textareaRef.current.style.minHeight = `${maxHeight}px`;
|
|
29
|
+
else
|
|
30
|
+
textareaRef.current.style.minHeight = `${scrollHeight}px`;
|
|
31
|
+
textareaRef.current.style.maxHeight = `${maxHeight}px`;
|
|
32
|
+
}
|
|
33
|
+
}, [maxHeight, value]);
|
|
32
34
|
return /* @__PURE__ */ React2.createElement(StyledContainer, {
|
|
33
35
|
className,
|
|
34
36
|
"data-testid": DSControlledLargetTextInputDatatestids.CONTAINER,
|
|
35
37
|
...xstyledProps
|
|
36
38
|
}, /* @__PURE__ */ React2.createElement(StyledTextArea, {
|
|
37
|
-
ref: innerRef,
|
|
38
|
-
maxLength,
|
|
39
|
+
ref: mergeRefs(innerRef, textareaRef),
|
|
39
40
|
"aria-multiline": true,
|
|
40
41
|
value,
|
|
42
|
+
$maxHeight: maxHeight,
|
|
41
43
|
onChange: handleOnChange,
|
|
42
44
|
resizable,
|
|
43
45
|
name,
|
|
44
46
|
id,
|
|
45
47
|
"data-testid": DSControlledLargetTextInputDatatestids.INPUT,
|
|
46
|
-
hasError,
|
|
48
|
+
$hasError: hasError,
|
|
47
49
|
...globalAttributes
|
|
48
|
-
})
|
|
49
|
-
"data-testid": DSControlledLargetTextInputDatatestids.CHAR_COUNTER
|
|
50
|
-
}, `${value.length}/${maxLength}`));
|
|
50
|
+
}));
|
|
51
51
|
};
|
|
52
52
|
DSControlledLargeTextInput.displayName = "DSControlledLargeTextInput";
|
|
53
53
|
const DSControlledLargeTextInputWithSchema = describe(DSControlledLargeTextInput);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSControlledLargeTextInput.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, WeakValidationMap } from 'react';\nimport {\n describe,\n useValidateTypescriptPropTypes,\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useGetXstyledProps,\n} from '@elliemae/ds-utilities';\nimport { propTypes, defaultProps } from './react-desc-prop-types';\nimport { StyledTextArea, StyledContainer
|
|
5
|
-
"mappings": ";AAAA;ACAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, WeakValidationMap, useRef, useLayoutEffect } from 'react';\nimport {\n describe,\n mergeRefs,\n useValidateTypescriptPropTypes,\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useGetXstyledProps,\n} from '@elliemae/ds-utilities';\nimport { propTypes, defaultProps } from './react-desc-prop-types';\nimport { StyledTextArea, StyledContainer } from './styles';\nimport { DSControlledLargetTextInputDatatestids } from './exported-related';\nimport type { DSControlledLargeTextInputT } from './react-desc-prop-types';\n\nconst DSControlledLargeTextInput = (props: DSControlledLargeTextInputT.Props): JSX.Element => {\n useValidateTypescriptPropTypes(props, propTypes);\n\n const propsWithDefault = useMemoMergePropsWithDefault<DSControlledLargeTextInputT.Props>(props, defaultProps);\n\n const { value, onChange, innerRef, resizable, name, id, hasError, maxHeight, ...otherProps } = propsWithDefault;\n\n const { className, ...globalAttributes } = useGetGlobalAttributes(otherProps);\n\n const xstyledProps = useGetXstyledProps(otherProps);\n\n const textareaRef = useRef<HTMLTextAreaElement | null>(null);\n\n const handleOnChange = useCallback(\n (e: React.KeyboardEvent) => onChange((e.target as HTMLInputElement).value, e),\n [onChange],\n );\n\n useLayoutEffect(() => {\n if (textareaRef && textareaRef.current && value !== '') {\n textareaRef.current.style.maxHeight = '0px';\n const { scrollHeight } = textareaRef.current;\n if (maxHeight !== undefined && scrollHeight >= maxHeight) textareaRef.current.style.minHeight = `${maxHeight}px`;\n else textareaRef.current.style.minHeight = `${scrollHeight}px`;\n textareaRef.current.style.maxHeight = `${maxHeight}px`;\n }\n }, [maxHeight, value]);\n\n return (\n <StyledContainer\n className={className}\n data-testid={DSControlledLargetTextInputDatatestids.CONTAINER}\n {...xstyledProps}\n >\n <StyledTextArea\n ref={mergeRefs(innerRef, textareaRef)}\n aria-multiline\n value={value}\n $maxHeight={maxHeight}\n onChange={handleOnChange}\n resizable={resizable}\n name={name}\n id={id}\n data-testid={DSControlledLargetTextInputDatatestids.INPUT}\n $hasError={hasError}\n {...globalAttributes}\n />\n </StyledContainer>\n );\n};\n\nDSControlledLargeTextInput.displayName = 'DSControlledLargeTextInput';\nconst DSControlledLargeTextInputWithSchema = describe(DSControlledLargeTextInput);\nDSControlledLargeTextInputWithSchema.propTypes = propTypes as WeakValidationMap<unknown>;\n\nexport { DSControlledLargeTextInput, DSControlledLargeTextInputWithSchema };\n"],
|
|
5
|
+
"mappings": ";AAAA;ACAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA;AACA;AACA;AAGA,MAAM,6BAA6B,CAAC,UAA0D;AAC5F,iCAA+B,OAAO,SAAS;AAE/C,QAAM,mBAAmB,6BAAgE,OAAO,YAAY;AAE5G,QAAM,EAAE,OAAO,UAAU,UAAU,WAAW,MAAM,IAAI,UAAU,cAAc,eAAe;AAE/F,QAAM,EAAE,cAAc,qBAAqB,uBAAuB,UAAU;AAE5E,QAAM,eAAe,mBAAmB,UAAU;AAElD,QAAM,cAAc,OAAmC,IAAI;AAE3D,QAAM,iBAAiB,YACrB,CAAC,MAA2B,SAAU,EAAE,OAA4B,OAAO,CAAC,GAC5E,CAAC,QAAQ,CACX;AAEA,kBAAgB,MAAM;AACpB,QAAI,eAAe,YAAY,WAAW,UAAU,IAAI;AACtD,kBAAY,QAAQ,MAAM,YAAY;AACtC,YAAM,EAAE,iBAAiB,YAAY;AACrC,UAAI,cAAc,UAAa,gBAAgB;AAAW,oBAAY,QAAQ,MAAM,YAAY,GAAG;AAAA;AAC9F,oBAAY,QAAQ,MAAM,YAAY,GAAG;AAC9C,kBAAY,QAAQ,MAAM,YAAY,GAAG;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,WAAW,KAAK,CAAC;AAErB,SACE,qCAAC;AAAA,IACC;AAAA,IACA,eAAa,uCAAuC;AAAA,IACnD,GAAG;AAAA,KAEJ,qCAAC;AAAA,IACC,KAAK,UAAU,UAAU,WAAW;AAAA,IACpC,kBAAc;AAAA,IACd;AAAA,IACA,YAAY;AAAA,IACZ,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAa,uCAAuC;AAAA,IACpD,WAAW;AAAA,IACV,GAAG;AAAA,GACN,CACF;AAEJ;AAEA,2BAA2B,cAAc;AACzC,MAAM,uCAAuC,SAAS,0BAA0B;AAChF,qCAAqC,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -4,9 +4,9 @@ import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from "@elliema
|
|
|
4
4
|
const noop = () => {
|
|
5
5
|
};
|
|
6
6
|
const defaultProps = {
|
|
7
|
+
rows: "2",
|
|
7
8
|
value: "",
|
|
8
9
|
onChange: noop,
|
|
9
|
-
withoutCharacterCounter: false,
|
|
10
10
|
resizable: false,
|
|
11
11
|
hasError: false
|
|
12
12
|
};
|
|
@@ -17,12 +17,11 @@ const propTypes = {
|
|
|
17
17
|
onChange: PropTypes.func.description("OnChange cb.").defaultValue("() => {}"),
|
|
18
18
|
resizable: PropTypes.bool.description("Enables to resize the component.").defaultValue(false),
|
|
19
19
|
rows: PropTypes.string.description("Sets the number of lines for the default height. Once lines are reached, scroll behavior enables."),
|
|
20
|
-
withoutCharacterCounter: PropTypes.bool.description("Removes the character counter.").defaultValue(false),
|
|
21
20
|
id: PropTypes.string.description("Unique id."),
|
|
22
21
|
innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description("Inner ref to the input."),
|
|
23
|
-
maxLength: PropTypes.string.description("Max characters allowed."),
|
|
24
22
|
disabled: PropTypes.bool.description("Set disabled state."),
|
|
25
23
|
readOnly: PropTypes.bool.description("Set readonly state."),
|
|
24
|
+
maxHeight: PropTypes.number.description("Set max height to recize input text"),
|
|
26
25
|
hasError: PropTypes.bool.description("Set error state.").defaultValue(false)
|
|
27
26
|
};
|
|
28
27
|
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 { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\n\nconst noop = () => {};\n\nexport declare namespace DSControlledLargeTextInputT {\n export interface DefaultProps {\n value: string;\n onChange: () => void;\n
|
|
5
|
-
"mappings": ";AAAA;ACAA;AAEA,MAAM,OAAO,MAAM;AAAC;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\n\nconst noop = () => {};\n\nexport declare namespace DSControlledLargeTextInputT {\n export interface DefaultProps {\n value: string;\n onChange: () => void;\n resizable: boolean;\n hasError: boolean;\n rows: string;\n }\n\n export interface RequiredProps {\n name: string;\n id: string;\n }\n\n export interface PropsOptional {\n disabled?: boolean;\n readOnly?: boolean;\n maxHeight?: number;\n innerRef?: React.MutableRefObject<HTMLTextAreaElement | null>;\n hasError?: boolean;\n }\n\n export interface Props extends DefaultProps, PropsOptional, RequiredProps {}\n}\n\nexport const defaultProps: DSControlledLargeTextInputT.DefaultProps = {\n rows: '2',\n value: '',\n onChange: noop,\n resizable: false,\n hasError: false,\n};\n\nexport const propTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n value: PropTypes.string.description('Text are value.').defaultValue(''),\n onChange: PropTypes.func.description('OnChange cb.').defaultValue('() => {}'),\n resizable: PropTypes.bool.description('Enables to resize the component.').defaultValue(false),\n rows: PropTypes.string.description(\n 'Sets the number of lines for the default height. Once lines are reached, scroll behavior enables.',\n ),\n id: PropTypes.string.description('Unique id.'),\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to the input.'),\n disabled: PropTypes.bool.description('Set disabled state.'),\n readOnly: PropTypes.bool.description('Set readonly state.'),\n maxHeight: PropTypes.number.description('Set max height to recize input text'),\n hasError: PropTypes.bool.description('Set error state.').defaultValue(false),\n};\n"],
|
|
5
|
+
"mappings": ";AAAA;ACAA;AAEA,MAAM,OAAO,MAAM;AAAC;AA2Bb,MAAM,eAAyD;AAAA,EACpE,MAAM;AAAA,EACN,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX,UAAU;AACZ;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAO,UAAU,OAAO,YAAY,iBAAiB,EAAE,aAAa,EAAE;AAAA,EACtE,UAAU,UAAU,KAAK,YAAY,cAAc,EAAE,aAAa,UAAU;AAAA,EAC5E,WAAW,UAAU,KAAK,YAAY,kCAAkC,EAAE,aAAa,KAAK;AAAA,EAC5F,MAAM,UAAU,OAAO,YACrB,mGACF;AAAA,EACA,IAAI,UAAU,OAAO,YAAY,YAAY;AAAA,EAC7C,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,IAAI,CAAC,EAAE,YAAY,yBAAyB;AAAA,EACvG,UAAU,UAAU,KAAK,YAAY,qBAAqB;AAAA,EAC1D,UAAU,UAAU,KAAK,YAAY,qBAAqB;AAAA,EAC1D,WAAW,UAAU,OAAO,YAAY,qCAAqC;AAAA,EAC7E,UAAU,UAAU,KAAK,YAAY,kBAAkB,EAAE,aAAa,KAAK;AAC7E;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styles.js
CHANGED
|
@@ -14,16 +14,13 @@ const StyledContainer = styled("div", {
|
|
|
14
14
|
${space}
|
|
15
15
|
${sizing}
|
|
16
16
|
`;
|
|
17
|
-
const StyledCharCounter = styled("span", {
|
|
18
|
-
name: DSControlledLargeTextInputName,
|
|
19
|
-
slot: DSControlledLargeTextInputSlots.CHAR_COUNTER
|
|
20
|
-
})`
|
|
21
|
-
justify-self: flex-end;
|
|
22
|
-
`;
|
|
23
17
|
const StyledTextArea = styled("textarea", {
|
|
24
18
|
name: DSControlledLargeTextInputName,
|
|
25
19
|
slot: DSControlledLargeTextInputSlots.INPUT
|
|
26
20
|
})`
|
|
21
|
+
&:hover {
|
|
22
|
+
border: 1px solid ${({ theme }) => theme.colors.brand[700]};
|
|
23
|
+
}
|
|
27
24
|
width: 100%;
|
|
28
25
|
${({ resizable }) => resizable ? `` : `resize: none;`}
|
|
29
26
|
&:disabled {
|
|
@@ -31,11 +28,10 @@ const StyledTextArea = styled("textarea", {
|
|
|
31
28
|
cursor: not-allowed;
|
|
32
29
|
}
|
|
33
30
|
}
|
|
34
|
-
|
|
35
|
-
${({ hasError }) => hasError ? `border: 1px solid red;` : ``}
|
|
31
|
+
${({ $maxHeight }) => $maxHeight ? `max-height: ${$maxHeight}px;` : ``}
|
|
32
|
+
${({ $hasError }) => $hasError ? `border: 1px solid red;` : ``}
|
|
36
33
|
`;
|
|
37
34
|
export {
|
|
38
|
-
StyledCharCounter,
|
|
39
35
|
StyledContainer,
|
|
40
36
|
StyledTextArea
|
|
41
37
|
};
|
package/dist/esm/styles.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, layout, space, sizing } from '@elliemae/ds-system';\nimport { DSControlledLargeTextInputName, DSControlledLargeTextInputSlots } from './exported-related';\n\ninterface StyledTextAreaT {\n resizable: boolean;\n hasError: boolean;\n}\n\nexport const StyledContainer = styled('div', {\n name: DSControlledLargeTextInputName,\n slot: DSControlledLargeTextInputSlots.CONTAINER,\n})`\n display: grid;\n grid-gap: 4px;\n grid-template-rows: auto auto;\n grid-template-columns: fit-content;\n ${layout}\n ${space}\n ${sizing}\n`;\n\nexport const
|
|
5
|
-
"mappings": ";AAAA;ACAA;AACA;AAOO,MAAM,kBAAkB,OAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,gCAAgC;AACxC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKG;AAAA,IACA;AAAA,IACA;AAAA;AAGG,MAAM,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, layout, space, sizing } from '@elliemae/ds-system';\nimport { DSControlledLargeTextInputName, DSControlledLargeTextInputSlots } from './exported-related';\n\ninterface StyledTextAreaT {\n resizable: boolean;\n hasError: boolean;\n}\n\nexport const StyledContainer = styled('div', {\n name: DSControlledLargeTextInputName,\n slot: DSControlledLargeTextInputSlots.CONTAINER,\n})`\n display: grid;\n grid-gap: 4px;\n grid-template-rows: auto auto;\n grid-template-columns: fit-content;\n ${layout}\n ${space}\n ${sizing}\n`;\n\nexport const StyledTextArea = styled('textarea', {\n name: DSControlledLargeTextInputName,\n slot: DSControlledLargeTextInputSlots.INPUT,\n})<StyledTextAreaT>`\n &:hover { \n border: 1px solid ${({theme}) => theme.colors.brand[700]};\n }\n width: 100%;\n ${({ resizable }) => (resizable ? `` : `resize: none;`)}\n &:disabled {\n &:hover {\n cursor: not-allowed;\n }\n }\n ${({ $maxHeight }) => ($maxHeight ? `max-height: ${$maxHeight}px;` : ``)}\n ${({ $hasError }) => ($hasError ? `border: 1px solid red;` : ``)}\n`;\n"],
|
|
5
|
+
"mappings": ";AAAA;ACAA;AACA;AAOO,MAAM,kBAAkB,OAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,gCAAgC;AACxC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKG;AAAA,IACA;AAAA,IACA;AAAA;AAGG,MAAM,iBAAiB,OAAO,YAAY;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,gCAAgC;AACxC,CAAC;AAAA;AAAA,wBAEuB,CAAC,EAAC,YAAW,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA,IAGpD,CAAC,EAAE,gBAAiB,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMrC,CAAC,EAAE,iBAAkB,aAAa,eAAe,kBAAkB;AAAA,IACnE,CAAC,EAAE,gBAAiB,YAAY,2BAA2B;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-form-input-textarea",
|
|
3
|
-
"version": "3.3.0-next.
|
|
3
|
+
"version": "3.3.0-next.9",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Controlled Form Input Textarea",
|
|
6
6
|
"files": [
|
|
@@ -35,8 +35,8 @@
|
|
|
35
35
|
"indent": 4
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@elliemae/ds-system": "3.3.0-next.
|
|
39
|
-
"@elliemae/ds-utilities": "3.3.0-next.
|
|
38
|
+
"@elliemae/ds-system": "3.3.0-next.9",
|
|
39
|
+
"@elliemae/ds-utilities": "3.3.0-next.9",
|
|
40
40
|
"@xstyled/styled-components": "~3.6.0"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|