@elliemae/ds-form-input-textarea 3.33.1 → 3.34.0-next.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/DSControlledLargeTextInput.js +7 -1
- package/dist/cjs/DSControlledLargeTextInput.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +1 -1
- package/dist/cjs/react-desc-prop-types.js.map +1 -1
- package/dist/esm/DSControlledLargeTextInput.js +7 -1
- package/dist/esm/DSControlledLargeTextInput.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +1 -1
- package/dist/esm/react-desc-prop-types.js.map +1 -1
- package/package.json +5 -5
|
@@ -96,7 +96,13 @@ const DSControlledLargeTextInput = (props) => {
|
|
|
96
96
|
"aria-label": "ghost textarea",
|
|
97
97
|
innerRef: ghostRef,
|
|
98
98
|
value,
|
|
99
|
-
style: {
|
|
99
|
+
style: {
|
|
100
|
+
visibility: "hidden",
|
|
101
|
+
pointerEvents: "none",
|
|
102
|
+
position: "absolute",
|
|
103
|
+
paddingLeft: "9px",
|
|
104
|
+
paddingRight: "9px"
|
|
105
|
+
},
|
|
100
106
|
$maxHeight: maxHeight,
|
|
101
107
|
rows
|
|
102
108
|
}
|
|
@@ -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 type { WeakValidationMap } from 'react';\nimport React, { useCallback, useMemo, useRef, useState, useLayoutEffect } from 'react';\nimport {\n describe,\n useValidateTypescriptPropTypes,\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useGetXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-utilities';\nimport { propTypes, defaultProps } from './react-desc-prop-types.js';\nimport { StyledTextArea, StyledContainer, WrapperBorder } from './styles.js';\nimport { DSControlledLargeTextInputName, DSControlledLargetTextInputDatatestids } from './exported-related/index.js';\nimport type { DSControlledLargeTextInputT } from './react-desc-prop-types.js';\n\nconst DSControlledLargeTextInput = (props: DSControlledLargeTextInputT.Props): JSX.Element => {\n useValidateTypescriptPropTypes(props, propTypes, DSControlledLargeTextInputName);\n\n const propsWithDefault = useMemoMergePropsWithDefault<DSControlledLargeTextInputT.InternalProps>(props, defaultProps);\n\n const { value, onChange, innerRef, name, id, hasError, maxHeight, ...otherProps } = propsWithDefault;\n\n const { className, rows, ...globalAttributes } = useGetGlobalAttributes(otherProps);\n\n const xstyledProps = useGetXstyledProps(otherProps);\n\n const [calculatedMinHeight, setCalculatedMinHeight] = useState<number>();\n\n const textareaRef = useRef<HTMLTextAreaElement | null>(null);\n const ghostRef = useRef<HTMLTextAreaElement | null>(null);\n\n const handleOnChange = useCallback<React.KeyboardEventHandler<HTMLTextAreaElement>>(\n (e) => onChange(e.currentTarget.value, e),\n [onChange],\n );\n\n useLayoutEffect(() => {\n if (ghostRef && ghostRef.current) {\n const { offsetHeight, scrollHeight } = ghostRef.current;\n if (rows !== undefined) setCalculatedMinHeight(offsetHeight);\n else if (maxHeight !== undefined && scrollHeight >= maxHeight) setCalculatedMinHeight(maxHeight);\n else setCalculatedMinHeight(scrollHeight);\n }\n }, [maxHeight, value, rows]);\n\n const referenceSetter = useMemo(() => mergeRefs(textareaRef, innerRef), [innerRef]);\n\n return (\n <StyledContainer\n className={className}\n data-testid={DSControlledLargetTextInputDatatestids.CONTAINER}\n $isDisabled={otherProps.disabled}\n {...xstyledProps}\n >\n <WrapperBorder $hasError={hasError} $isDisabled={otherProps.disabled}>\n <StyledTextArea\n innerRef={referenceSetter}\n aria-multiline\n value={value}\n $maxHeight={maxHeight}\n $minHeight={calculatedMinHeight}\n onChange={handleOnChange}\n name={name}\n id={id}\n data-testid={DSControlledLargetTextInputDatatestids.INPUT}\n rows={rows}\n {...globalAttributes}\n />\n </WrapperBorder>\n <StyledTextArea\n disabled\n aria-label=\"ghost textarea\"\n innerRef={ghostRef}\n value={value}\n style={{
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgDnB;AA/CJ,mBAA+E;AAC/E,8BAMO;AACP,0BAA0B;AAC1B,mCAAwC;AACxC,oBAA+D;AAC/D,8BAAuF;AAGvF,MAAM,6BAA6B,CAAC,UAA0D;AAC5F,8DAA+B,OAAO,wCAAW,sDAA8B;AAE/E,QAAM,uBAAmB,sDAAwE,OAAO,yCAAY;AAEpH,QAAM,EAAE,OAAO,UAAU,UAAU,MAAM,IAAI,UAAU,WAAW,GAAG,WAAW,IAAI;AAEpF,QAAM,EAAE,WAAW,MAAM,GAAG,iBAAiB,QAAI,gDAAuB,UAAU;AAElF,QAAM,mBAAe,4CAAmB,UAAU;AAElD,QAAM,CAAC,qBAAqB,sBAAsB,QAAI,uBAAiB;AAEvE,QAAM,kBAAc,qBAAmC,IAAI;AAC3D,QAAM,eAAW,qBAAmC,IAAI;AAExD,QAAM,qBAAiB;AAAA,IACrB,CAAC,MAAM,SAAS,EAAE,cAAc,OAAO,CAAC;AAAA,IACxC,CAAC,QAAQ;AAAA,EACX;AAEA,oCAAgB,MAAM;AACpB,QAAI,YAAY,SAAS,SAAS;AAChC,YAAM,EAAE,cAAc,aAAa,IAAI,SAAS;AAChD,UAAI,SAAS;AAAW,+BAAuB,YAAY;AAAA,eAClD,cAAc,UAAa,gBAAgB;AAAW,+BAAuB,SAAS;AAAA;AAC1F,+BAAuB,YAAY;AAAA,IAC1C;AAAA,EACF,GAAG,CAAC,WAAW,OAAO,IAAI,CAAC;AAE3B,QAAM,sBAAkB,sBAAQ,UAAM,+BAAU,aAAa,QAAQ,GAAG,CAAC,QAAQ,CAAC;AAElF,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa,+DAAuC;AAAA,MACpD,aAAa,WAAW;AAAA,MACvB,GAAG;AAAA,MAEJ;AAAA,oDAAC,+BAAc,WAAW,UAAU,aAAa,WAAW,UAC1D;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV,kBAAc;AAAA,YACd;AAAA,YACA,YAAY;AAAA,YACZ,YAAY;AAAA,YACZ,UAAU;AAAA,YACV;AAAA,YACA;AAAA,YACA,eAAa,+DAAuC;AAAA,YACpD;AAAA,YACC,GAAG;AAAA;AAAA,QACN,GACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,UAAQ;AAAA,YACR,cAAW;AAAA,YACX,UAAU;AAAA,YACV;AAAA,YACA,OAAO,
|
|
4
|
+
"sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport React, { useCallback, useMemo, useRef, useState, useLayoutEffect } from 'react';\nimport {\n describe,\n useValidateTypescriptPropTypes,\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useGetXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-utilities';\nimport { propTypes, defaultProps } from './react-desc-prop-types.js';\nimport { StyledTextArea, StyledContainer, WrapperBorder } from './styles.js';\nimport { DSControlledLargeTextInputName, DSControlledLargetTextInputDatatestids } from './exported-related/index.js';\nimport type { DSControlledLargeTextInputT } from './react-desc-prop-types.js';\n\nconst DSControlledLargeTextInput = (props: DSControlledLargeTextInputT.Props): JSX.Element => {\n useValidateTypescriptPropTypes(props, propTypes, DSControlledLargeTextInputName);\n\n const propsWithDefault = useMemoMergePropsWithDefault<DSControlledLargeTextInputT.InternalProps>(props, defaultProps);\n\n const { value, onChange, innerRef, name, id, hasError, maxHeight, ...otherProps } = propsWithDefault;\n\n const { className, rows, ...globalAttributes } = useGetGlobalAttributes(otherProps);\n\n const xstyledProps = useGetXstyledProps(otherProps);\n\n const [calculatedMinHeight, setCalculatedMinHeight] = useState<number>();\n\n const textareaRef = useRef<HTMLTextAreaElement | null>(null);\n const ghostRef = useRef<HTMLTextAreaElement | null>(null);\n\n const handleOnChange = useCallback<React.KeyboardEventHandler<HTMLTextAreaElement>>(\n (e) => onChange(e.currentTarget.value, e),\n [onChange],\n );\n\n useLayoutEffect(() => {\n if (ghostRef && ghostRef.current) {\n const { offsetHeight, scrollHeight } = ghostRef.current;\n if (rows !== undefined) setCalculatedMinHeight(offsetHeight);\n else if (maxHeight !== undefined && scrollHeight >= maxHeight) setCalculatedMinHeight(maxHeight);\n else setCalculatedMinHeight(scrollHeight);\n }\n }, [maxHeight, value, rows]);\n\n const referenceSetter = useMemo(() => mergeRefs(textareaRef, innerRef), [innerRef]);\n\n return (\n <StyledContainer\n className={className}\n data-testid={DSControlledLargetTextInputDatatestids.CONTAINER}\n $isDisabled={otherProps.disabled}\n {...xstyledProps}\n >\n <WrapperBorder $hasError={hasError} $isDisabled={otherProps.disabled}>\n <StyledTextArea\n innerRef={referenceSetter}\n aria-multiline\n value={value}\n $maxHeight={maxHeight}\n $minHeight={calculatedMinHeight}\n onChange={handleOnChange}\n name={name}\n id={id}\n data-testid={DSControlledLargetTextInputDatatestids.INPUT}\n rows={rows}\n {...globalAttributes}\n />\n </WrapperBorder>\n <StyledTextArea\n disabled\n aria-label=\"ghost textarea\"\n innerRef={ghostRef}\n value={value}\n style={{\n visibility: 'hidden',\n pointerEvents: 'none',\n position: 'absolute',\n paddingLeft: '9px',\n paddingRight: '9px',\n }}\n $maxHeight={maxHeight}\n rows={rows}\n />\n </StyledContainer>\n );\n};\n\nDSControlledLargeTextInput.displayName = 'DSControlledLargeTextInput';\nconst DSControlledLargeTextInputWithSchema = describe(DSControlledLargeTextInput);\nDSControlledLargeTextInputWithSchema.propTypes = propTypes as WeakValidationMap<unknown>;\nexport { DSControlledLargeTextInput, DSControlledLargeTextInputWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgDnB;AA/CJ,mBAA+E;AAC/E,8BAMO;AACP,0BAA0B;AAC1B,mCAAwC;AACxC,oBAA+D;AAC/D,8BAAuF;AAGvF,MAAM,6BAA6B,CAAC,UAA0D;AAC5F,8DAA+B,OAAO,wCAAW,sDAA8B;AAE/E,QAAM,uBAAmB,sDAAwE,OAAO,yCAAY;AAEpH,QAAM,EAAE,OAAO,UAAU,UAAU,MAAM,IAAI,UAAU,WAAW,GAAG,WAAW,IAAI;AAEpF,QAAM,EAAE,WAAW,MAAM,GAAG,iBAAiB,QAAI,gDAAuB,UAAU;AAElF,QAAM,mBAAe,4CAAmB,UAAU;AAElD,QAAM,CAAC,qBAAqB,sBAAsB,QAAI,uBAAiB;AAEvE,QAAM,kBAAc,qBAAmC,IAAI;AAC3D,QAAM,eAAW,qBAAmC,IAAI;AAExD,QAAM,qBAAiB;AAAA,IACrB,CAAC,MAAM,SAAS,EAAE,cAAc,OAAO,CAAC;AAAA,IACxC,CAAC,QAAQ;AAAA,EACX;AAEA,oCAAgB,MAAM;AACpB,QAAI,YAAY,SAAS,SAAS;AAChC,YAAM,EAAE,cAAc,aAAa,IAAI,SAAS;AAChD,UAAI,SAAS;AAAW,+BAAuB,YAAY;AAAA,eAClD,cAAc,UAAa,gBAAgB;AAAW,+BAAuB,SAAS;AAAA;AAC1F,+BAAuB,YAAY;AAAA,IAC1C;AAAA,EACF,GAAG,CAAC,WAAW,OAAO,IAAI,CAAC;AAE3B,QAAM,sBAAkB,sBAAQ,UAAM,+BAAU,aAAa,QAAQ,GAAG,CAAC,QAAQ,CAAC;AAElF,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa,+DAAuC;AAAA,MACpD,aAAa,WAAW;AAAA,MACvB,GAAG;AAAA,MAEJ;AAAA,oDAAC,+BAAc,WAAW,UAAU,aAAa,WAAW,UAC1D;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV,kBAAc;AAAA,YACd;AAAA,YACA,YAAY;AAAA,YACZ,YAAY;AAAA,YACZ,UAAU;AAAA,YACV;AAAA,YACA;AAAA,YACA,eAAa,+DAAuC;AAAA,YACpD;AAAA,YACC,GAAG;AAAA;AAAA,QACN,GACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,UAAQ;AAAA,YACR,cAAW;AAAA,YACX,UAAU;AAAA,YACV;AAAA,YACA,OAAO;AAAA,cACL,YAAY;AAAA,cACZ,eAAe;AAAA,cACf,UAAU;AAAA,cACV,aAAa;AAAA,cACb,cAAc;AAAA,YAChB;AAAA,YACA,YAAY;AAAA,YACZ;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,2BAA2B,cAAc;AACzC,MAAM,2CAAuC,kCAAS,0BAA0B;AAChF,qCAAqC,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -53,7 +53,7 @@ const propTypes = {
|
|
|
53
53
|
innerRef: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.object, import_ds_props_helpers.PropTypes.func]).description("Inner ref to the input."),
|
|
54
54
|
disabled: import_ds_props_helpers.PropTypes.bool.description("Set disabled state."),
|
|
55
55
|
readOnly: import_ds_props_helpers.PropTypes.bool.description("Set readonly state."),
|
|
56
|
-
maxHeight: import_ds_props_helpers.PropTypes.number.description("Set max height to
|
|
56
|
+
maxHeight: import_ds_props_helpers.PropTypes.number.description("Set max height to resize input text"),
|
|
57
57
|
hasError: import_ds_props_helpers.PropTypes.bool.description("Set error state.").defaultValue(false)
|
|
58
58
|
};
|
|
59
59
|
//# sourceMappingURL=react-desc-prop-types.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type React from 'react';\nimport {\n PropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n type GlobalAttributesT,\n type XstyledProps,\n} from '@elliemae/ds-props-helpers';\n\nconst noop = () => {};\n\nexport declare namespace DSControlledLargeTextInputT {\n export interface DefaultProps {\n value: string;\n onChange: (newVal: string, event: React.SyntheticEvent<HTMLTextAreaElement>) => void;\n hasError: boolean;\n }\n\n export interface RequiredProps {}\n\n export interface PropsOptional {\n name?: string;\n id: string;\n rows?: string;\n disabled?: boolean;\n readOnly?: boolean;\n maxHeight?: number;\n innerRef?: React.MutableRefObject<HTMLTextAreaElement | null>;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n PropsOptional,\n RequiredProps,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof PropsOptional>,\n Omit<XstyledProps, keyof PropsOptional> {}\n\n export interface InternalProps\n extends DefaultProps,\n PropsOptional,\n RequiredProps,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof PropsOptional>,\n Omit<XstyledProps, keyof PropsOptional> {}\n}\n\nexport const defaultProps: DSControlledLargeTextInputT.DefaultProps = {\n value: '',\n onChange: noop,\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 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
|
|
4
|
+
"sourcesContent": ["import type React from 'react';\nimport {\n PropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n type GlobalAttributesT,\n type XstyledProps,\n} from '@elliemae/ds-props-helpers';\n\nconst noop = () => {};\n\nexport declare namespace DSControlledLargeTextInputT {\n export interface DefaultProps {\n value: string;\n onChange: (newVal: string, event: React.SyntheticEvent<HTMLTextAreaElement>) => void;\n hasError: boolean;\n }\n\n export interface RequiredProps {}\n\n export interface PropsOptional {\n name?: string;\n id: string;\n rows?: string;\n disabled?: boolean;\n readOnly?: boolean;\n maxHeight?: number;\n innerRef?: React.MutableRefObject<HTMLTextAreaElement | null>;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n PropsOptional,\n RequiredProps,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof PropsOptional>,\n Omit<XstyledProps, keyof PropsOptional> {}\n\n export interface InternalProps\n extends DefaultProps,\n PropsOptional,\n RequiredProps,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof PropsOptional>,\n Omit<XstyledProps, keyof PropsOptional> {}\n}\n\nexport const defaultProps: DSControlledLargeTextInputT.DefaultProps = {\n value: '',\n onChange: noop,\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 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 resize input text'),\n hasError: PropTypes.bool.description('Set error state.').defaultValue(false),\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAMO;AAEP,MAAM,OAAO,MAAM;AAAC;AAoCb,MAAM,eAAyD;AAAA,EACpE,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AACZ;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAO,kCAAU,OAAO,YAAY,iBAAiB,EAAE,aAAa,EAAE;AAAA,EACtE,UAAU,kCAAU,KAAK,YAAY,cAAc,EAAE,aAAa,UAAU;AAAA,EAC5E,MAAM,kCAAU,OAAO;AAAA,IACrB;AAAA,EACF;AAAA,EACA,IAAI,kCAAU,OAAO,YAAY,YAAY;AAAA,EAC7C,UAAU,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,IAAI,CAAC,EAAE,YAAY,yBAAyB;AAAA,EACvG,UAAU,kCAAU,KAAK,YAAY,qBAAqB;AAAA,EAC1D,UAAU,kCAAU,KAAK,YAAY,qBAAqB;AAAA,EAC1D,WAAW,kCAAU,OAAO,YAAY,qCAAqC;AAAA,EAC7E,UAAU,kCAAU,KAAK,YAAY,kBAAkB,EAAE,aAAa,KAAK;AAC7E;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -68,7 +68,13 @@ const DSControlledLargeTextInput = (props) => {
|
|
|
68
68
|
"aria-label": "ghost textarea",
|
|
69
69
|
innerRef: ghostRef,
|
|
70
70
|
value,
|
|
71
|
-
style: {
|
|
71
|
+
style: {
|
|
72
|
+
visibility: "hidden",
|
|
73
|
+
pointerEvents: "none",
|
|
74
|
+
position: "absolute",
|
|
75
|
+
paddingLeft: "9px",
|
|
76
|
+
paddingRight: "9px"
|
|
77
|
+
},
|
|
72
78
|
$maxHeight: maxHeight,
|
|
73
79
|
rows
|
|
74
80
|
}
|
|
@@ -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 type { WeakValidationMap } from 'react';\nimport React, { useCallback, useMemo, useRef, useState, useLayoutEffect } from 'react';\nimport {\n describe,\n useValidateTypescriptPropTypes,\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useGetXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-utilities';\nimport { propTypes, defaultProps } from './react-desc-prop-types.js';\nimport { StyledTextArea, StyledContainer, WrapperBorder } from './styles.js';\nimport { DSControlledLargeTextInputName, DSControlledLargetTextInputDatatestids } from './exported-related/index.js';\nimport type { DSControlledLargeTextInputT } from './react-desc-prop-types.js';\n\nconst DSControlledLargeTextInput = (props: DSControlledLargeTextInputT.Props): JSX.Element => {\n useValidateTypescriptPropTypes(props, propTypes, DSControlledLargeTextInputName);\n\n const propsWithDefault = useMemoMergePropsWithDefault<DSControlledLargeTextInputT.InternalProps>(props, defaultProps);\n\n const { value, onChange, innerRef, name, id, hasError, maxHeight, ...otherProps } = propsWithDefault;\n\n const { className, rows, ...globalAttributes } = useGetGlobalAttributes(otherProps);\n\n const xstyledProps = useGetXstyledProps(otherProps);\n\n const [calculatedMinHeight, setCalculatedMinHeight] = useState<number>();\n\n const textareaRef = useRef<HTMLTextAreaElement | null>(null);\n const ghostRef = useRef<HTMLTextAreaElement | null>(null);\n\n const handleOnChange = useCallback<React.KeyboardEventHandler<HTMLTextAreaElement>>(\n (e) => onChange(e.currentTarget.value, e),\n [onChange],\n );\n\n useLayoutEffect(() => {\n if (ghostRef && ghostRef.current) {\n const { offsetHeight, scrollHeight } = ghostRef.current;\n if (rows !== undefined) setCalculatedMinHeight(offsetHeight);\n else if (maxHeight !== undefined && scrollHeight >= maxHeight) setCalculatedMinHeight(maxHeight);\n else setCalculatedMinHeight(scrollHeight);\n }\n }, [maxHeight, value, rows]);\n\n const referenceSetter = useMemo(() => mergeRefs(textareaRef, innerRef), [innerRef]);\n\n return (\n <StyledContainer\n className={className}\n data-testid={DSControlledLargetTextInputDatatestids.CONTAINER}\n $isDisabled={otherProps.disabled}\n {...xstyledProps}\n >\n <WrapperBorder $hasError={hasError} $isDisabled={otherProps.disabled}>\n <StyledTextArea\n innerRef={referenceSetter}\n aria-multiline\n value={value}\n $maxHeight={maxHeight}\n $minHeight={calculatedMinHeight}\n onChange={handleOnChange}\n name={name}\n id={id}\n data-testid={DSControlledLargetTextInputDatatestids.INPUT}\n rows={rows}\n {...globalAttributes}\n />\n </WrapperBorder>\n <StyledTextArea\n disabled\n aria-label=\"ghost textarea\"\n innerRef={ghostRef}\n value={value}\n style={{
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACgDnB,SAOI,KAPJ;AA/CJ,SAAgB,aAAa,SAAS,QAAQ,UAAU,uBAAuB;AAC/E;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,iBAAiB;AAC1B,SAAS,WAAW,oBAAoB;AACxC,SAAS,gBAAgB,iBAAiB,qBAAqB;AAC/D,SAAS,gCAAgC,8CAA8C;AAGvF,MAAM,6BAA6B,CAAC,UAA0D;AAC5F,iCAA+B,OAAO,WAAW,8BAA8B;AAE/E,QAAM,mBAAmB,6BAAwE,OAAO,YAAY;AAEpH,QAAM,EAAE,OAAO,UAAU,UAAU,MAAM,IAAI,UAAU,WAAW,GAAG,WAAW,IAAI;AAEpF,QAAM,EAAE,WAAW,MAAM,GAAG,iBAAiB,IAAI,uBAAuB,UAAU;AAElF,QAAM,eAAe,mBAAmB,UAAU;AAElD,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,SAAiB;AAEvE,QAAM,cAAc,OAAmC,IAAI;AAC3D,QAAM,WAAW,OAAmC,IAAI;AAExD,QAAM,iBAAiB;AAAA,IACrB,CAAC,MAAM,SAAS,EAAE,cAAc,OAAO,CAAC;AAAA,IACxC,CAAC,QAAQ;AAAA,EACX;AAEA,kBAAgB,MAAM;AACpB,QAAI,YAAY,SAAS,SAAS;AAChC,YAAM,EAAE,cAAc,aAAa,IAAI,SAAS;AAChD,UAAI,SAAS;AAAW,+BAAuB,YAAY;AAAA,eAClD,cAAc,UAAa,gBAAgB;AAAW,+BAAuB,SAAS;AAAA;AAC1F,+BAAuB,YAAY;AAAA,IAC1C;AAAA,EACF,GAAG,CAAC,WAAW,OAAO,IAAI,CAAC;AAE3B,QAAM,kBAAkB,QAAQ,MAAM,UAAU,aAAa,QAAQ,GAAG,CAAC,QAAQ,CAAC;AAElF,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa,uCAAuC;AAAA,MACpD,aAAa,WAAW;AAAA,MACvB,GAAG;AAAA,MAEJ;AAAA,4BAAC,iBAAc,WAAW,UAAU,aAAa,WAAW,UAC1D;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV,kBAAc;AAAA,YACd;AAAA,YACA,YAAY;AAAA,YACZ,YAAY;AAAA,YACZ,UAAU;AAAA,YACV;AAAA,YACA;AAAA,YACA,eAAa,uCAAuC;AAAA,YACpD;AAAA,YACC,GAAG;AAAA;AAAA,QACN,GACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,UAAQ;AAAA,YACR,cAAW;AAAA,YACX,UAAU;AAAA,YACV;AAAA,YACA,OAAO,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport React, { useCallback, useMemo, useRef, useState, useLayoutEffect } from 'react';\nimport {\n describe,\n useValidateTypescriptPropTypes,\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useGetXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-utilities';\nimport { propTypes, defaultProps } from './react-desc-prop-types.js';\nimport { StyledTextArea, StyledContainer, WrapperBorder } from './styles.js';\nimport { DSControlledLargeTextInputName, DSControlledLargetTextInputDatatestids } from './exported-related/index.js';\nimport type { DSControlledLargeTextInputT } from './react-desc-prop-types.js';\n\nconst DSControlledLargeTextInput = (props: DSControlledLargeTextInputT.Props): JSX.Element => {\n useValidateTypescriptPropTypes(props, propTypes, DSControlledLargeTextInputName);\n\n const propsWithDefault = useMemoMergePropsWithDefault<DSControlledLargeTextInputT.InternalProps>(props, defaultProps);\n\n const { value, onChange, innerRef, name, id, hasError, maxHeight, ...otherProps } = propsWithDefault;\n\n const { className, rows, ...globalAttributes } = useGetGlobalAttributes(otherProps);\n\n const xstyledProps = useGetXstyledProps(otherProps);\n\n const [calculatedMinHeight, setCalculatedMinHeight] = useState<number>();\n\n const textareaRef = useRef<HTMLTextAreaElement | null>(null);\n const ghostRef = useRef<HTMLTextAreaElement | null>(null);\n\n const handleOnChange = useCallback<React.KeyboardEventHandler<HTMLTextAreaElement>>(\n (e) => onChange(e.currentTarget.value, e),\n [onChange],\n );\n\n useLayoutEffect(() => {\n if (ghostRef && ghostRef.current) {\n const { offsetHeight, scrollHeight } = ghostRef.current;\n if (rows !== undefined) setCalculatedMinHeight(offsetHeight);\n else if (maxHeight !== undefined && scrollHeight >= maxHeight) setCalculatedMinHeight(maxHeight);\n else setCalculatedMinHeight(scrollHeight);\n }\n }, [maxHeight, value, rows]);\n\n const referenceSetter = useMemo(() => mergeRefs(textareaRef, innerRef), [innerRef]);\n\n return (\n <StyledContainer\n className={className}\n data-testid={DSControlledLargetTextInputDatatestids.CONTAINER}\n $isDisabled={otherProps.disabled}\n {...xstyledProps}\n >\n <WrapperBorder $hasError={hasError} $isDisabled={otherProps.disabled}>\n <StyledTextArea\n innerRef={referenceSetter}\n aria-multiline\n value={value}\n $maxHeight={maxHeight}\n $minHeight={calculatedMinHeight}\n onChange={handleOnChange}\n name={name}\n id={id}\n data-testid={DSControlledLargetTextInputDatatestids.INPUT}\n rows={rows}\n {...globalAttributes}\n />\n </WrapperBorder>\n <StyledTextArea\n disabled\n aria-label=\"ghost textarea\"\n innerRef={ghostRef}\n value={value}\n style={{\n visibility: 'hidden',\n pointerEvents: 'none',\n position: 'absolute',\n paddingLeft: '9px',\n paddingRight: '9px',\n }}\n $maxHeight={maxHeight}\n rows={rows}\n />\n </StyledContainer>\n );\n};\n\nDSControlledLargeTextInput.displayName = 'DSControlledLargeTextInput';\nconst DSControlledLargeTextInputWithSchema = describe(DSControlledLargeTextInput);\nDSControlledLargeTextInputWithSchema.propTypes = propTypes as WeakValidationMap<unknown>;\nexport { DSControlledLargeTextInput, DSControlledLargeTextInputWithSchema };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACgDnB,SAOI,KAPJ;AA/CJ,SAAgB,aAAa,SAAS,QAAQ,UAAU,uBAAuB;AAC/E;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,iBAAiB;AAC1B,SAAS,WAAW,oBAAoB;AACxC,SAAS,gBAAgB,iBAAiB,qBAAqB;AAC/D,SAAS,gCAAgC,8CAA8C;AAGvF,MAAM,6BAA6B,CAAC,UAA0D;AAC5F,iCAA+B,OAAO,WAAW,8BAA8B;AAE/E,QAAM,mBAAmB,6BAAwE,OAAO,YAAY;AAEpH,QAAM,EAAE,OAAO,UAAU,UAAU,MAAM,IAAI,UAAU,WAAW,GAAG,WAAW,IAAI;AAEpF,QAAM,EAAE,WAAW,MAAM,GAAG,iBAAiB,IAAI,uBAAuB,UAAU;AAElF,QAAM,eAAe,mBAAmB,UAAU;AAElD,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,SAAiB;AAEvE,QAAM,cAAc,OAAmC,IAAI;AAC3D,QAAM,WAAW,OAAmC,IAAI;AAExD,QAAM,iBAAiB;AAAA,IACrB,CAAC,MAAM,SAAS,EAAE,cAAc,OAAO,CAAC;AAAA,IACxC,CAAC,QAAQ;AAAA,EACX;AAEA,kBAAgB,MAAM;AACpB,QAAI,YAAY,SAAS,SAAS;AAChC,YAAM,EAAE,cAAc,aAAa,IAAI,SAAS;AAChD,UAAI,SAAS;AAAW,+BAAuB,YAAY;AAAA,eAClD,cAAc,UAAa,gBAAgB;AAAW,+BAAuB,SAAS;AAAA;AAC1F,+BAAuB,YAAY;AAAA,IAC1C;AAAA,EACF,GAAG,CAAC,WAAW,OAAO,IAAI,CAAC;AAE3B,QAAM,kBAAkB,QAAQ,MAAM,UAAU,aAAa,QAAQ,GAAG,CAAC,QAAQ,CAAC;AAElF,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa,uCAAuC;AAAA,MACpD,aAAa,WAAW;AAAA,MACvB,GAAG;AAAA,MAEJ;AAAA,4BAAC,iBAAc,WAAW,UAAU,aAAa,WAAW,UAC1D;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV,kBAAc;AAAA,YACd;AAAA,YACA,YAAY;AAAA,YACZ,YAAY;AAAA,YACZ,UAAU;AAAA,YACV;AAAA,YACA;AAAA,YACA,eAAa,uCAAuC;AAAA,YACpD;AAAA,YACC,GAAG;AAAA;AAAA,QACN,GACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,UAAQ;AAAA,YACR,cAAW;AAAA,YACX,UAAU;AAAA,YACV;AAAA,YACA,OAAO;AAAA,cACL,YAAY;AAAA,cACZ,eAAe;AAAA,cACf,UAAU;AAAA,cACV,aAAa;AAAA,cACb,cAAc;AAAA,YAChB;AAAA,YACA,YAAY;AAAA,YACZ;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,2BAA2B,cAAc;AACzC,MAAM,uCAAuC,SAAS,0BAA0B;AAChF,qCAAqC,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -23,7 +23,7 @@ const propTypes = {
|
|
|
23
23
|
innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description("Inner ref to the input."),
|
|
24
24
|
disabled: PropTypes.bool.description("Set disabled state."),
|
|
25
25
|
readOnly: PropTypes.bool.description("Set readonly state."),
|
|
26
|
-
maxHeight: PropTypes.number.description("Set max height to
|
|
26
|
+
maxHeight: PropTypes.number.description("Set max height to resize input text"),
|
|
27
27
|
hasError: PropTypes.bool.description("Set error state.").defaultValue(false)
|
|
28
28
|
};
|
|
29
29
|
export {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport {\n PropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n type GlobalAttributesT,\n type XstyledProps,\n} from '@elliemae/ds-props-helpers';\n\nconst noop = () => {};\n\nexport declare namespace DSControlledLargeTextInputT {\n export interface DefaultProps {\n value: string;\n onChange: (newVal: string, event: React.SyntheticEvent<HTMLTextAreaElement>) => void;\n hasError: boolean;\n }\n\n export interface RequiredProps {}\n\n export interface PropsOptional {\n name?: string;\n id: string;\n rows?: string;\n disabled?: boolean;\n readOnly?: boolean;\n maxHeight?: number;\n innerRef?: React.MutableRefObject<HTMLTextAreaElement | null>;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n PropsOptional,\n RequiredProps,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof PropsOptional>,\n Omit<XstyledProps, keyof PropsOptional> {}\n\n export interface InternalProps\n extends DefaultProps,\n PropsOptional,\n RequiredProps,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof PropsOptional>,\n Omit<XstyledProps, keyof PropsOptional> {}\n}\n\nexport const defaultProps: DSControlledLargeTextInputT.DefaultProps = {\n value: '',\n onChange: noop,\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 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
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport {\n PropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n type GlobalAttributesT,\n type XstyledProps,\n} from '@elliemae/ds-props-helpers';\n\nconst noop = () => {};\n\nexport declare namespace DSControlledLargeTextInputT {\n export interface DefaultProps {\n value: string;\n onChange: (newVal: string, event: React.SyntheticEvent<HTMLTextAreaElement>) => void;\n hasError: boolean;\n }\n\n export interface RequiredProps {}\n\n export interface PropsOptional {\n name?: string;\n id: string;\n rows?: string;\n disabled?: boolean;\n readOnly?: boolean;\n maxHeight?: number;\n innerRef?: React.MutableRefObject<HTMLTextAreaElement | null>;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n PropsOptional,\n RequiredProps,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof PropsOptional>,\n Omit<XstyledProps, keyof PropsOptional> {}\n\n export interface InternalProps\n extends DefaultProps,\n PropsOptional,\n RequiredProps,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof PropsOptional>,\n Omit<XstyledProps, keyof PropsOptional> {}\n}\n\nexport const defaultProps: DSControlledLargeTextInputT.DefaultProps = {\n value: '',\n onChange: noop,\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 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 resize input text'),\n hasError: PropTypes.bool.description('Set error state.').defaultValue(false),\n};\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACCvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAEP,MAAM,OAAO,MAAM;AAAC;AAoCb,MAAM,eAAyD;AAAA,EACpE,OAAO;AAAA,EACP,UAAU;AAAA,EACV,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,MAAM,UAAU,OAAO;AAAA,IACrB;AAAA,EACF;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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-form-input-textarea",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.34.0-next.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Controlled Form Input Textarea",
|
|
6
6
|
"files": [
|
|
@@ -35,16 +35,16 @@
|
|
|
35
35
|
"indent": 4
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@elliemae/ds-props-helpers": "3.
|
|
39
|
-
"@elliemae/ds-
|
|
40
|
-
"@elliemae/ds-
|
|
38
|
+
"@elliemae/ds-props-helpers": "3.34.0-next.2",
|
|
39
|
+
"@elliemae/ds-utilities": "3.34.0-next.2",
|
|
40
|
+
"@elliemae/ds-system": "3.34.0-next.2"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
43
|
"@elliemae/pui-cli": "~9.0.0-next.31",
|
|
44
44
|
"@elliemae/pui-theme": "~2.9.3",
|
|
45
45
|
"@xstyled/system": "~3.7.3",
|
|
46
46
|
"styled-components": "~5.3.9",
|
|
47
|
-
"@elliemae/ds-monorepo-devops": "3.
|
|
47
|
+
"@elliemae/ds-monorepo-devops": "3.34.0-next.2"
|
|
48
48
|
},
|
|
49
49
|
"peerDependencies": {
|
|
50
50
|
"@elliemae/pui-theme": "~2.9.3",
|