@elliemae/ds-form-input-textarea 3.12.0-rc.0 → 3.12.0-rc.10

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.
@@ -36,7 +36,7 @@ var import_react_desc_prop_types = require("./react-desc-prop-types");
36
36
  var import_styles = require("./styles");
37
37
  var import_exported_related = require("./exported-related");
38
38
  const DSControlledLargeTextInput = (props) => {
39
- (0, import_ds_utilities.useValidateTypescriptPropTypes)(props, import_react_desc_prop_types.propTypes);
39
+ (0, import_ds_utilities.useValidateTypescriptPropTypes)(props, import_react_desc_prop_types.propTypes, import_exported_related.DSControlledLargeTextInputName);
40
40
  const propsWithDefault = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
41
41
  const { value, onChange, innerRef, resizable, name, id, hasError, maxHeight, ...otherProps } = propsWithDefault;
42
42
  const { className, ...globalAttributes } = (0, import_ds_utilities.useGetGlobalAttributes)(otherProps);
@@ -59,36 +59,42 @@ const DSControlledLargeTextInput = (props) => {
59
59
  ghostRef.current.style.maxHeight = `${maxHeight}px`;
60
60
  }
61
61
  }, [maxHeight, value]);
62
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledContainer, {
63
- className,
64
- "data-testid": import_exported_related.DSControlledLargetTextInputDatatestids.CONTAINER,
65
- ...xstyledProps,
66
- children: [
67
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.WrapperBorder, {
68
- $hasError: hasError,
69
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledTextArea, {
70
- ref: (0, import_ds_utilities.mergeRefs)(innerRef, textareaRef),
71
- "aria-multiline": true,
72
- value,
73
- $maxHeight: maxHeight,
74
- $minHeight: calculatedMinHeight,
75
- onChange: handleOnChange,
76
- resizable,
77
- name,
78
- id,
79
- "data-testid": import_exported_related.DSControlledLargetTextInputDatatestids.INPUT,
80
- ...globalAttributes
81
- })
82
- }),
83
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledTextArea, {
84
- disabled: true,
85
- ref: ghostRef,
86
- value,
87
- style: { visibility: "hidden", pointerEvents: "none", position: "absolute" },
88
- $maxHeight: maxHeight
89
- })
90
- ]
91
- });
62
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
63
+ import_styles.StyledContainer,
64
+ {
65
+ className,
66
+ "data-testid": import_exported_related.DSControlledLargetTextInputDatatestids.CONTAINER,
67
+ ...xstyledProps,
68
+ children: [
69
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.WrapperBorder, { $hasError: hasError, $isDisabled: otherProps.disabled, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
70
+ import_styles.StyledTextArea,
71
+ {
72
+ ref: (0, import_ds_utilities.mergeRefs)(innerRef, textareaRef),
73
+ "aria-multiline": true,
74
+ value,
75
+ $maxHeight: maxHeight,
76
+ $minHeight: calculatedMinHeight,
77
+ onChange: handleOnChange,
78
+ resizable,
79
+ name,
80
+ id,
81
+ "data-testid": import_exported_related.DSControlledLargetTextInputDatatestids.INPUT,
82
+ ...globalAttributes
83
+ }
84
+ ) }),
85
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
86
+ import_styles.StyledTextArea,
87
+ {
88
+ disabled: true,
89
+ ref: ghostRef,
90
+ value,
91
+ style: { visibility: "hidden", pointerEvents: "none", position: "absolute" },
92
+ $maxHeight: maxHeight
93
+ }
94
+ )
95
+ ]
96
+ }
97
+ );
92
98
  };
93
99
  DSControlledLargeTextInput.displayName = "DSControlledLargeTextInput";
94
100
  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 type { WeakValidationMap } from 'react';\nimport React, { useCallback, useRef, useState, 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, WrapperBorder } 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 [calculatedMinHeight, setCalculatedMinHeight] = useState(undefined);\n\n const textareaRef = useRef<HTMLTextAreaElement | null>(null);\n const ghostRef = 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 (ghostRef && ghostRef.current && value !== '') {\n ghostRef.current.style.maxHeight = '0px';\n const { scrollHeight } = ghostRef.current;\n if (maxHeight !== undefined && scrollHeight >= maxHeight) setCalculatedMinHeight(`${maxHeight}`);\n else setCalculatedMinHeight(`${scrollHeight}`);\n ghostRef.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 <WrapperBorder $hasError={hasError}>\n <StyledTextArea\n ref={mergeRefs(innerRef, textareaRef)}\n aria-multiline\n value={value}\n $maxHeight={maxHeight}\n $minHeight={calculatedMinHeight}\n onChange={handleOnChange}\n resizable={resizable}\n name={name}\n id={id}\n data-testid={DSControlledLargetTextInputDatatestids.INPUT}\n {...globalAttributes}\n />\n </WrapperBorder>\n <StyledTextArea\n disabled\n ref={ghostRef}\n value={value}\n style={{ visibility: 'hidden', pointerEvents: 'none', position: 'absolute' }}\n $maxHeight={maxHeight}\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;AD+CnB;AA9CJ,mBAAsE;AACtE,0BAOO;AACP,mCAAwC;AACxC,oBAA+D;AAC/D,8BAAuD;AAGvD,MAAM,6BAA6B,CAAC,UAA0D;AAC5F,0DAA+B,OAAO,sCAAS;AAE/C,QAAM,uBAAmB,kDAAgE,OAAO,yCAAY;AAE5G,QAAM,EAAE,OAAO,UAAU,UAAU,WAAW,MAAM,IAAI,UAAU,cAAc,WAAW,IAAI;AAE/F,QAAM,EAAE,cAAc,iBAAiB,QAAI,4CAAuB,UAAU;AAE5E,QAAM,mBAAe,wCAAmB,UAAU;AAElD,QAAM,CAAC,qBAAqB,sBAAsB,QAAI,uBAAS,MAAS;AAExE,QAAM,kBAAc,qBAAmC,IAAI;AAC3D,QAAM,eAAW,qBAAmC,IAAI;AAExD,QAAM,qBAAiB;AAAA,IACrB,CAAC,MAA2B,SAAU,EAAE,OAA4B,OAAO,CAAC;AAAA,IAC5E,CAAC,QAAQ;AAAA,EACX;AAEA,oCAAgB,MAAM;AACpB,QAAI,YAAY,SAAS,WAAW,UAAU,IAAI;AAChD,eAAS,QAAQ,MAAM,YAAY;AACnC,YAAM,EAAE,aAAa,IAAI,SAAS;AAClC,UAAI,cAAc,UAAa,gBAAgB;AAAW,+BAAuB,GAAG,WAAW;AAAA;AAC1F,+BAAuB,GAAG,cAAc;AAC7C,eAAS,QAAQ,MAAM,YAAY,GAAG;AAAA,IACxC;AAAA,EACF,GAAG,CAAC,WAAW,KAAK,CAAC;AAErB,SACE,6CAAC;AAAA,IACC;AAAA,IACA,eAAa,+DAAuC;AAAA,IACnD,GAAG;AAAA,IAEJ;AAAA,kDAAC;AAAA,QAAc,WAAW;AAAA,QACxB,sDAAC;AAAA,UACC,SAAK,+BAAU,UAAU,WAAW;AAAA,UACpC,kBAAc;AAAA,UACd;AAAA,UACA,YAAY;AAAA,UACZ,YAAY;AAAA,UACZ,UAAU;AAAA,UACV;AAAA,UACA;AAAA,UACA;AAAA,UACA,eAAa,+DAAuC;AAAA,UACnD,GAAG;AAAA,SACN;AAAA,OACF;AAAA,MACA,4CAAC;AAAA,QACC,UAAQ;AAAA,QACR,KAAK;AAAA,QACL;AAAA,QACA,OAAO,EAAE,YAAY,UAAU,eAAe,QAAQ,UAAU,WAAW;AAAA,QAC3E,YAAY;AAAA,OACd;AAAA;AAAA,GACF;AAEJ;AAEA,2BAA2B,cAAc;AACzC,MAAM,2CAAuC,8BAAS,0BAA0B;AAChF,qCAAqC,YAAY;",
4
+ "sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport React, { useCallback, useRef, useState, 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, WrapperBorder } from './styles';\nimport { DSControlledLargeTextInputName, DSControlledLargetTextInputDatatestids } from './exported-related';\nimport type { DSControlledLargeTextInputT } from './react-desc-prop-types';\n\nconst DSControlledLargeTextInput = (props: DSControlledLargeTextInputT.Props): JSX.Element => {\n useValidateTypescriptPropTypes(props, propTypes, DSControlledLargeTextInputName);\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 [calculatedMinHeight, setCalculatedMinHeight] = useState(undefined);\n\n const textareaRef = useRef<HTMLTextAreaElement | null>(null);\n const ghostRef = 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 (ghostRef && ghostRef.current && value !== '') {\n ghostRef.current.style.maxHeight = '0px';\n const { scrollHeight } = ghostRef.current;\n if (maxHeight !== undefined && scrollHeight >= maxHeight) setCalculatedMinHeight(`${maxHeight}`);\n else setCalculatedMinHeight(`${scrollHeight}`);\n ghostRef.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 <WrapperBorder $hasError={hasError} $isDisabled={otherProps.disabled}>\n <StyledTextArea\n ref={mergeRefs(innerRef, textareaRef)}\n aria-multiline\n value={value}\n $maxHeight={maxHeight}\n $minHeight={calculatedMinHeight}\n onChange={handleOnChange}\n resizable={resizable}\n name={name}\n id={id}\n data-testid={DSControlledLargetTextInputDatatestids.INPUT}\n {...globalAttributes}\n />\n </WrapperBorder>\n <StyledTextArea\n disabled\n ref={ghostRef}\n value={value}\n style={{ visibility: 'hidden', pointerEvents: 'none', position: 'absolute' }}\n $maxHeight={maxHeight}\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;AD+CnB;AA9CJ,mBAAsE;AACtE,0BAOO;AACP,mCAAwC;AACxC,oBAA+D;AAC/D,8BAAuF;AAGvF,MAAM,6BAA6B,CAAC,UAA0D;AAC5F,0DAA+B,OAAO,wCAAW,sDAA8B;AAE/E,QAAM,uBAAmB,kDAAgE,OAAO,yCAAY;AAE5G,QAAM,EAAE,OAAO,UAAU,UAAU,WAAW,MAAM,IAAI,UAAU,cAAc,WAAW,IAAI;AAE/F,QAAM,EAAE,cAAc,iBAAiB,QAAI,4CAAuB,UAAU;AAE5E,QAAM,mBAAe,wCAAmB,UAAU;AAElD,QAAM,CAAC,qBAAqB,sBAAsB,QAAI,uBAAS,MAAS;AAExE,QAAM,kBAAc,qBAAmC,IAAI;AAC3D,QAAM,eAAW,qBAAmC,IAAI;AAExD,QAAM,qBAAiB;AAAA,IACrB,CAAC,MAA2B,SAAU,EAAE,OAA4B,OAAO,CAAC;AAAA,IAC5E,CAAC,QAAQ;AAAA,EACX;AAEA,oCAAgB,MAAM;AACpB,QAAI,YAAY,SAAS,WAAW,UAAU,IAAI;AAChD,eAAS,QAAQ,MAAM,YAAY;AACnC,YAAM,EAAE,aAAa,IAAI,SAAS;AAClC,UAAI,cAAc,UAAa,gBAAgB;AAAW,+BAAuB,GAAG,WAAW;AAAA;AAC1F,+BAAuB,GAAG,cAAc;AAC7C,eAAS,QAAQ,MAAM,YAAY,GAAG;AAAA,IACxC;AAAA,EACF,GAAG,CAAC,WAAW,KAAK,CAAC;AAErB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa,+DAAuC;AAAA,MACnD,GAAG;AAAA,MAEJ;AAAA,oDAAC,+BAAc,WAAW,UAAU,aAAa,WAAW,UAC1D;AAAA,UAAC;AAAA;AAAA,YACC,SAAK,+BAAU,UAAU,WAAW;AAAA,YACpC,kBAAc;AAAA,YACd;AAAA,YACA,YAAY;AAAA,YACZ,YAAY;AAAA,YACZ,UAAU;AAAA,YACV;AAAA,YACA;AAAA,YACA;AAAA,YACA,eAAa,+DAAuC;AAAA,YACnD,GAAG;AAAA;AAAA,QACN,GACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,UAAQ;AAAA,YACR,KAAK;AAAA,YACL;AAAA,YACA,OAAO,EAAE,YAAY,UAAU,eAAe,QAAQ,UAAU,WAAW;AAAA,YAC3E,YAAY;AAAA;AAAA,QACd;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,2BAA2B,cAAc;AACzC,MAAM,2CAAuC,8BAAS,0BAA0B;AAChF,qCAAqC,YAAY;",
6
6
  "names": []
7
7
  }
@@ -29,7 +29,7 @@ __export(theming_exports, {
29
29
  });
30
30
  module.exports = __toCommonJS(theming_exports);
31
31
  var React = __toESM(require("react"));
32
- const DSControlledLargeTextInputName = "DS-ControlledLargeTextInput";
32
+ const DSControlledLargeTextInputName = "DSControlledLargeTextInput";
33
33
  const DSControlledLargeTextInputSlots = {
34
34
  CONTAINER: "root",
35
35
  INPUT: "input",
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/exported-related/theming.ts", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["export const DSControlledLargeTextInputName = 'DS-ControlledLargeTextInput';\n\nexport const DSControlledLargeTextInputSlots = {\n CONTAINER: 'root',\n INPUT: 'input',\n CHAR_COUNTER: 'char-counter',\n};\n", "import * as React from 'react';\nexport { React };\n"],
4
+ "sourcesContent": ["export const DSControlledLargeTextInputName = 'DSControlledLargeTextInput';\n\nexport const DSControlledLargeTextInputSlots = {\n CONTAINER: 'root',\n INPUT: 'input',\n CHAR_COUNTER: 'char-counter',\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,iCAAiC;AAEvC,MAAM,kCAAkC;AAAA,EAC7C,WAAW;AAAA,EACX,OAAO;AAAA,EACP,cAAc;AAChB;",
6
6
  "names": []
7
7
  }
@@ -32,7 +32,7 @@ module.exports = __toCommonJS(styles_exports);
32
32
  var React = __toESM(require("react"));
33
33
  var import_ds_system = require("@elliemae/ds-system");
34
34
  var import_exported_related = require("./exported-related");
35
- const StyledContainer = (0, import_ds_system.styled)(import_ds_system.XStyledWrapper, {
35
+ const StyledContainer = (0, import_ds_system.styled)("div", {
36
36
  name: import_exported_related.DSControlledLargeTextInputName,
37
37
  slot: import_exported_related.DSControlledLargeTextInputSlots.CONTAINER
38
38
  })`
@@ -40,6 +40,7 @@ const StyledContainer = (0, import_ds_system.styled)(import_ds_system.XStyledWra
40
40
  grid-gap: 4px;
41
41
  grid-template-rows: auto auto;
42
42
  grid-template-columns: fit-content;
43
+ ${import_ds_system.xStyledCommonProps}
43
44
  `;
44
45
  const WrapperBorder = (0, import_ds_system.styled)("div")`
45
46
  &:hover::after,
@@ -61,6 +62,20 @@ const WrapperBorder = (0, import_ds_system.styled)("div")`
61
62
  position: relative;
62
63
  box-sizing: content-box;
63
64
  ${({ $hasError }) => $hasError ? `border: 2px solid red;` : ``}
65
+ ${({ $isDisabled }) => {
66
+ return $isDisabled ? `
67
+ &::after{
68
+ z-index: 1;
69
+ inset: 0px;
70
+ content: ' ';
71
+ position: absolute;
72
+ pointer-events: none;
73
+ background-color: #EBEDF0;
74
+ color: #616b7f;
75
+ cursor: not-allowed;
76
+ }
77
+ ` : ``;
78
+ }}
64
79
  `;
65
80
  const StyledTextArea = (0, import_ds_system.styled)("textarea", {
66
81
  name: import_exported_related.DSControlledLargeTextInputName,
@@ -71,14 +86,12 @@ const StyledTextArea = (0, import_ds_system.styled)("textarea", {
71
86
  width: 100%;
72
87
  border: none;
73
88
  padding: 8px;
74
- ${({ resizable }) => resizable ? `` : `resize: none;`}
75
- &:disabled {
76
- &:hover {
77
- cursor: not-allowed;
78
- }
79
- }
89
+ ${({ resizable }) => resizable ? `` : `resize: none;`}
80
90
  ${({ $maxHeight }) => $maxHeight ? `max-height: ${$maxHeight}px;` : ``}
81
91
  ${({ $minHeight }) => $minHeight ? `min-height: ${$minHeight}px;` : ``}
82
- ${({ disabled }) => disabled ? `overflow: hidden` : ""}
92
+ ${({ disabled }) => disabled ? `
93
+ overflow: hidden;
94
+ background-color: #EBEDF0;
95
+ ` : ""}
83
96
  `;
84
97
  //# sourceMappingURL=styles.js.map
@@ -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, XStyledWrapper } 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(XStyledWrapper, {\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`;\n\nexport const WrapperBorder = styled('div')`\n &:hover::after,\n &:focus::after {\n content: ' ';\n position: absolute;\n inset: 0px;\n border: 2px solid brand-700;\n border-radius: inherit;\n pointer-events: none;\n z-index: 1;\n }\n &:hover,\n &:focus {\n border-color: transparent;\n }\n border: 1px solid neutral-400;\n border-radius: 2px;\n position: relative;\n box-sizing: content-box;\n ${({ $hasError }) => ($hasError ? `border: 2px solid red;` : ``)}\n`;\n\nexport const StyledTextArea = styled('textarea', {\n name: DSControlledLargeTextInputName,\n slot: DSControlledLargeTextInputSlots.INPUT,\n})<StyledTextAreaT>`\n line-height: 1;\n outline: none;\n width: 100%;\n border: none;\n padding: 8px;\n ${({ resizable }) => (resizable ? `` : `resize: none;`)}\n &:disabled {\n &:hover {\n cursor: not-allowed;\n }\n }\n ${({ $maxHeight }) => ($maxHeight ? `max-height: ${$maxHeight}px;` : ``)}\n ${({ $minHeight }) => ($minHeight ? `min-height: ${$minHeight}px;` : ``)}\n ${({ disabled }) => (disabled ? `overflow: hidden` : '')}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuC;AACvC,8BAAgF;AAOzE,MAAM,sBAAkB,yBAAO,iCAAgB;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,wDAAgC;AACxC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOM,MAAM,oBAAgB,yBAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAmBrC,CAAC,EAAE,UAAU,MAAO,YAAY,2BAA2B;AAAA;AAGxD,MAAM,qBAAiB,yBAAO,YAAY;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,wDAAgC;AACxC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMG,CAAC,EAAE,UAAU,MAAO,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMrC,CAAC,EAAE,WAAW,MAAO,aAAa,eAAe,kBAAkB;AAAA,IACnE,CAAC,EAAE,WAAW,MAAO,aAAa,eAAe,kBAAkB;AAAA,IACnE,CAAC,EAAE,SAAS,MAAO,WAAW,qBAAqB;AAAA;",
4
+ "sourcesContent": ["import { styled, xStyledCommonProps, th } 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 ${xStyledCommonProps}\n`;\n\nexport const WrapperBorder = styled('div')`\n &:hover::after,\n &:focus::after {\n content: ' ';\n position: absolute;\n inset: 0px;\n border: 2px solid brand-700;\n border-radius: inherit;\n pointer-events: none;\n z-index: 1;\n }\n &:hover,\n &:focus {\n border-color: transparent;\n }\n border: 1px solid neutral-400;\n border-radius: 2px;\n position: relative;\n box-sizing: content-box;\n ${({ $hasError }) => ($hasError ? `border: 2px solid red;` : ``)}\n ${({ $isDisabled }) => {\n return ($isDisabled ? `\n &::after{\n z-index: 1;\n inset: 0px;\n content: ' ';\n position: absolute;\n pointer-events: none;\n background-color: #EBEDF0;\n color: #616b7f;\n cursor: not-allowed;\n }\n ` : ``)}}\n`;\n\nexport const StyledTextArea = styled('textarea', {\n name: DSControlledLargeTextInputName,\n slot: DSControlledLargeTextInputSlots.INPUT,\n})<StyledTextAreaT>`\n line-height: 1;\n outline: none;\n width: 100%;\n border: none;\n padding: 8px;\n ${({ resizable }) => (resizable ? `` : `resize: none;`)} \n ${({ $maxHeight }) => ($maxHeight ? `max-height: ${$maxHeight}px;` : ``)}\n ${({ $minHeight }) => ($minHeight ? `min-height: ${$minHeight}px;` : ``)}\n ${({ disabled }) => (disabled ? `\n overflow: hidden;\n background-color: #EBEDF0;\n ` : '')}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA+C;AAC/C,8BAAgF;AAOzE,MAAM,sBAAkB,yBAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,wDAAgC;AACxC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKG;AAAA;AAGG,MAAM,oBAAgB,yBAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAmBrC,CAAC,EAAE,UAAU,MAAO,YAAY,2BAA2B;AAAA,IAC3D,CAAC,EAAE,YAAY,MAAM;AACrB,SAAQ,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAWpB;AAAG;AAAA;AAGF,MAAM,qBAAiB,yBAAO,YAAY;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,wDAAgC;AACxC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMG,CAAC,EAAE,UAAU,MAAO,YAAY,KAAK;AAAA,IACrC,CAAC,EAAE,WAAW,MAAO,aAAa,eAAe,kBAAkB;AAAA,IACnE,CAAC,EAAE,WAAW,MAAO,aAAa,eAAe,kBAAkB;AAAA,IACnE,CAAC,EAAE,SAAS,MAAO,WAAW;AAAA;AAAA;AAAA,MAG5B;AAAA;",
6
6
  "names": []
7
7
  }
@@ -11,9 +11,9 @@ import {
11
11
  } from "@elliemae/ds-utilities";
12
12
  import { propTypes, defaultProps } from "./react-desc-prop-types";
13
13
  import { StyledTextArea, StyledContainer, WrapperBorder } from "./styles";
14
- import { DSControlledLargetTextInputDatatestids } from "./exported-related";
14
+ import { DSControlledLargeTextInputName, DSControlledLargetTextInputDatatestids } from "./exported-related";
15
15
  const DSControlledLargeTextInput = (props) => {
16
- useValidateTypescriptPropTypes(props, propTypes);
16
+ useValidateTypescriptPropTypes(props, propTypes, DSControlledLargeTextInputName);
17
17
  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
18
18
  const { value, onChange, innerRef, resizable, name, id, hasError, maxHeight, ...otherProps } = propsWithDefault;
19
19
  const { className, ...globalAttributes } = useGetGlobalAttributes(otherProps);
@@ -36,36 +36,42 @@ const DSControlledLargeTextInput = (props) => {
36
36
  ghostRef.current.style.maxHeight = `${maxHeight}px`;
37
37
  }
38
38
  }, [maxHeight, value]);
39
- return /* @__PURE__ */ jsxs(StyledContainer, {
40
- className,
41
- "data-testid": DSControlledLargetTextInputDatatestids.CONTAINER,
42
- ...xstyledProps,
43
- children: [
44
- /* @__PURE__ */ jsx(WrapperBorder, {
45
- $hasError: hasError,
46
- children: /* @__PURE__ */ jsx(StyledTextArea, {
47
- ref: mergeRefs(innerRef, textareaRef),
48
- "aria-multiline": true,
49
- value,
50
- $maxHeight: maxHeight,
51
- $minHeight: calculatedMinHeight,
52
- onChange: handleOnChange,
53
- resizable,
54
- name,
55
- id,
56
- "data-testid": DSControlledLargetTextInputDatatestids.INPUT,
57
- ...globalAttributes
58
- })
59
- }),
60
- /* @__PURE__ */ jsx(StyledTextArea, {
61
- disabled: true,
62
- ref: ghostRef,
63
- value,
64
- style: { visibility: "hidden", pointerEvents: "none", position: "absolute" },
65
- $maxHeight: maxHeight
66
- })
67
- ]
68
- });
39
+ return /* @__PURE__ */ jsxs(
40
+ StyledContainer,
41
+ {
42
+ className,
43
+ "data-testid": DSControlledLargetTextInputDatatestids.CONTAINER,
44
+ ...xstyledProps,
45
+ children: [
46
+ /* @__PURE__ */ jsx(WrapperBorder, { $hasError: hasError, $isDisabled: otherProps.disabled, children: /* @__PURE__ */ jsx(
47
+ StyledTextArea,
48
+ {
49
+ ref: mergeRefs(innerRef, textareaRef),
50
+ "aria-multiline": true,
51
+ value,
52
+ $maxHeight: maxHeight,
53
+ $minHeight: calculatedMinHeight,
54
+ onChange: handleOnChange,
55
+ resizable,
56
+ name,
57
+ id,
58
+ "data-testid": DSControlledLargetTextInputDatatestids.INPUT,
59
+ ...globalAttributes
60
+ }
61
+ ) }),
62
+ /* @__PURE__ */ jsx(
63
+ StyledTextArea,
64
+ {
65
+ disabled: true,
66
+ ref: ghostRef,
67
+ value,
68
+ style: { visibility: "hidden", pointerEvents: "none", position: "absolute" },
69
+ $maxHeight: maxHeight
70
+ }
71
+ )
72
+ ]
73
+ }
74
+ );
69
75
  };
70
76
  DSControlledLargeTextInput.displayName = "DSControlledLargeTextInput";
71
77
  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 type { WeakValidationMap } from 'react';\nimport React, { useCallback, useRef, useState, 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, WrapperBorder } 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 [calculatedMinHeight, setCalculatedMinHeight] = useState(undefined);\n\n const textareaRef = useRef<HTMLTextAreaElement | null>(null);\n const ghostRef = 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 (ghostRef && ghostRef.current && value !== '') {\n ghostRef.current.style.maxHeight = '0px';\n const { scrollHeight } = ghostRef.current;\n if (maxHeight !== undefined && scrollHeight >= maxHeight) setCalculatedMinHeight(`${maxHeight}`);\n else setCalculatedMinHeight(`${scrollHeight}`);\n ghostRef.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 <WrapperBorder $hasError={hasError}>\n <StyledTextArea\n ref={mergeRefs(innerRef, textareaRef)}\n aria-multiline\n value={value}\n $maxHeight={maxHeight}\n $minHeight={calculatedMinHeight}\n onChange={handleOnChange}\n resizable={resizable}\n name={name}\n id={id}\n data-testid={DSControlledLargetTextInputDatatestids.INPUT}\n {...globalAttributes}\n />\n </WrapperBorder>\n <StyledTextArea\n disabled\n ref={ghostRef}\n value={value}\n style={{ visibility: 'hidden', pointerEvents: 'none', position: 'absolute' }}\n $maxHeight={maxHeight}\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,YAAY,WAAW;AC+CnB,SAMI,KANJ;AA9CJ,SAAgB,aAAa,QAAQ,UAAU,uBAAuB;AACtE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,WAAW,oBAAoB;AACxC,SAAS,gBAAgB,iBAAiB,qBAAqB;AAC/D,SAAS,8CAA8C;AAGvD,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,WAAW,IAAI;AAE/F,QAAM,EAAE,cAAc,iBAAiB,IAAI,uBAAuB,UAAU;AAE5E,QAAM,eAAe,mBAAmB,UAAU;AAElD,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,SAAS,MAAS;AAExE,QAAM,cAAc,OAAmC,IAAI;AAC3D,QAAM,WAAW,OAAmC,IAAI;AAExD,QAAM,iBAAiB;AAAA,IACrB,CAAC,MAA2B,SAAU,EAAE,OAA4B,OAAO,CAAC;AAAA,IAC5E,CAAC,QAAQ;AAAA,EACX;AAEA,kBAAgB,MAAM;AACpB,QAAI,YAAY,SAAS,WAAW,UAAU,IAAI;AAChD,eAAS,QAAQ,MAAM,YAAY;AACnC,YAAM,EAAE,aAAa,IAAI,SAAS;AAClC,UAAI,cAAc,UAAa,gBAAgB;AAAW,+BAAuB,GAAG,WAAW;AAAA;AAC1F,+BAAuB,GAAG,cAAc;AAC7C,eAAS,QAAQ,MAAM,YAAY,GAAG;AAAA,IACxC;AAAA,EACF,GAAG,CAAC,WAAW,KAAK,CAAC;AAErB,SACE,qBAAC;AAAA,IACC;AAAA,IACA,eAAa,uCAAuC;AAAA,IACnD,GAAG;AAAA,IAEJ;AAAA,0BAAC;AAAA,QAAc,WAAW;AAAA,QACxB,8BAAC;AAAA,UACC,KAAK,UAAU,UAAU,WAAW;AAAA,UACpC,kBAAc;AAAA,UACd;AAAA,UACA,YAAY;AAAA,UACZ,YAAY;AAAA,UACZ,UAAU;AAAA,UACV;AAAA,UACA;AAAA,UACA;AAAA,UACA,eAAa,uCAAuC;AAAA,UACnD,GAAG;AAAA,SACN;AAAA,OACF;AAAA,MACA,oBAAC;AAAA,QACC,UAAQ;AAAA,QACR,KAAK;AAAA,QACL;AAAA,QACA,OAAO,EAAE,YAAY,UAAU,eAAe,QAAQ,UAAU,WAAW;AAAA,QAC3E,YAAY;AAAA,OACd;AAAA;AAAA,GACF;AAEJ;AAEA,2BAA2B,cAAc;AACzC,MAAM,uCAAuC,SAAS,0BAA0B;AAChF,qCAAqC,YAAY;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport React, { useCallback, useRef, useState, 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, WrapperBorder } from './styles';\nimport { DSControlledLargeTextInputName, DSControlledLargetTextInputDatatestids } from './exported-related';\nimport type { DSControlledLargeTextInputT } from './react-desc-prop-types';\n\nconst DSControlledLargeTextInput = (props: DSControlledLargeTextInputT.Props): JSX.Element => {\n useValidateTypescriptPropTypes(props, propTypes, DSControlledLargeTextInputName);\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 [calculatedMinHeight, setCalculatedMinHeight] = useState(undefined);\n\n const textareaRef = useRef<HTMLTextAreaElement | null>(null);\n const ghostRef = 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 (ghostRef && ghostRef.current && value !== '') {\n ghostRef.current.style.maxHeight = '0px';\n const { scrollHeight } = ghostRef.current;\n if (maxHeight !== undefined && scrollHeight >= maxHeight) setCalculatedMinHeight(`${maxHeight}`);\n else setCalculatedMinHeight(`${scrollHeight}`);\n ghostRef.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 <WrapperBorder $hasError={hasError} $isDisabled={otherProps.disabled}>\n <StyledTextArea\n ref={mergeRefs(innerRef, textareaRef)}\n aria-multiline\n value={value}\n $maxHeight={maxHeight}\n $minHeight={calculatedMinHeight}\n onChange={handleOnChange}\n resizable={resizable}\n name={name}\n id={id}\n data-testid={DSControlledLargetTextInputDatatestids.INPUT}\n {...globalAttributes}\n />\n </WrapperBorder>\n <StyledTextArea\n disabled\n ref={ghostRef}\n value={value}\n style={{ visibility: 'hidden', pointerEvents: 'none', position: 'absolute' }}\n $maxHeight={maxHeight}\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,YAAY,WAAW;AC+CnB,SAMI,KANJ;AA9CJ,SAAgB,aAAa,QAAQ,UAAU,uBAAuB;AACtE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,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,6BAAgE,OAAO,YAAY;AAE5G,QAAM,EAAE,OAAO,UAAU,UAAU,WAAW,MAAM,IAAI,UAAU,cAAc,WAAW,IAAI;AAE/F,QAAM,EAAE,cAAc,iBAAiB,IAAI,uBAAuB,UAAU;AAE5E,QAAM,eAAe,mBAAmB,UAAU;AAElD,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,SAAS,MAAS;AAExE,QAAM,cAAc,OAAmC,IAAI;AAC3D,QAAM,WAAW,OAAmC,IAAI;AAExD,QAAM,iBAAiB;AAAA,IACrB,CAAC,MAA2B,SAAU,EAAE,OAA4B,OAAO,CAAC;AAAA,IAC5E,CAAC,QAAQ;AAAA,EACX;AAEA,kBAAgB,MAAM;AACpB,QAAI,YAAY,SAAS,WAAW,UAAU,IAAI;AAChD,eAAS,QAAQ,MAAM,YAAY;AACnC,YAAM,EAAE,aAAa,IAAI,SAAS;AAClC,UAAI,cAAc,UAAa,gBAAgB;AAAW,+BAAuB,GAAG,WAAW;AAAA;AAC1F,+BAAuB,GAAG,cAAc;AAC7C,eAAS,QAAQ,MAAM,YAAY,GAAG;AAAA,IACxC;AAAA,EACF,GAAG,CAAC,WAAW,KAAK,CAAC;AAErB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa,uCAAuC;AAAA,MACnD,GAAG;AAAA,MAEJ;AAAA,4BAAC,iBAAc,WAAW,UAAU,aAAa,WAAW,UAC1D;AAAA,UAAC;AAAA;AAAA,YACC,KAAK,UAAU,UAAU,WAAW;AAAA,YACpC,kBAAc;AAAA,YACd;AAAA,YACA,YAAY;AAAA,YACZ,YAAY;AAAA,YACZ,UAAU;AAAA,YACV;AAAA,YACA;AAAA,YACA;AAAA,YACA,eAAa,uCAAuC;AAAA,YACnD,GAAG;AAAA;AAAA,QACN,GACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,UAAQ;AAAA,YACR,KAAK;AAAA,YACL;AAAA,YACA,OAAO,EAAE,YAAY,UAAU,eAAe,QAAQ,UAAU,WAAW;AAAA,YAC3E,YAAY;AAAA;AAAA,QACd;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,2BAA2B,cAAc;AACzC,MAAM,uCAAuC,SAAS,0BAA0B;AAChF,qCAAqC,YAAY;",
6
6
  "names": []
7
7
  }
@@ -1,5 +1,5 @@
1
1
  import * as React from "react";
2
- const DSControlledLargeTextInputName = "DS-ControlledLargeTextInput";
2
+ const DSControlledLargeTextInputName = "DSControlledLargeTextInput";
3
3
  const DSControlledLargeTextInputSlots = {
4
4
  CONTAINER: "root",
5
5
  INPUT: "input",
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/theming.ts"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSControlledLargeTextInputName = 'DS-ControlledLargeTextInput';\n\nexport const DSControlledLargeTextInputSlots = {\n CONTAINER: 'root',\n INPUT: 'input',\n CHAR_COUNTER: 'char-counter',\n};\n"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSControlledLargeTextInputName = 'DSControlledLargeTextInput';\n\nexport const DSControlledLargeTextInputSlots = {\n CONTAINER: 'root',\n INPUT: 'input',\n CHAR_COUNTER: 'char-counter',\n};\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,iCAAiC;AAEvC,MAAM,kCAAkC;AAAA,EAC7C,WAAW;AAAA,EACX,OAAO;AAAA,EACP,cAAc;AAChB;",
6
6
  "names": []
7
7
  }
@@ -1,7 +1,7 @@
1
1
  import * as React from "react";
2
- import { styled, XStyledWrapper } from "@elliemae/ds-system";
2
+ import { styled, xStyledCommonProps } from "@elliemae/ds-system";
3
3
  import { DSControlledLargeTextInputName, DSControlledLargeTextInputSlots } from "./exported-related";
4
- const StyledContainer = styled(XStyledWrapper, {
4
+ const StyledContainer = styled("div", {
5
5
  name: DSControlledLargeTextInputName,
6
6
  slot: DSControlledLargeTextInputSlots.CONTAINER
7
7
  })`
@@ -9,6 +9,7 @@ const StyledContainer = styled(XStyledWrapper, {
9
9
  grid-gap: 4px;
10
10
  grid-template-rows: auto auto;
11
11
  grid-template-columns: fit-content;
12
+ ${xStyledCommonProps}
12
13
  `;
13
14
  const WrapperBorder = styled("div")`
14
15
  &:hover::after,
@@ -30,6 +31,20 @@ const WrapperBorder = styled("div")`
30
31
  position: relative;
31
32
  box-sizing: content-box;
32
33
  ${({ $hasError }) => $hasError ? `border: 2px solid red;` : ``}
34
+ ${({ $isDisabled }) => {
35
+ return $isDisabled ? `
36
+ &::after{
37
+ z-index: 1;
38
+ inset: 0px;
39
+ content: ' ';
40
+ position: absolute;
41
+ pointer-events: none;
42
+ background-color: #EBEDF0;
43
+ color: #616b7f;
44
+ cursor: not-allowed;
45
+ }
46
+ ` : ``;
47
+ }}
33
48
  `;
34
49
  const StyledTextArea = styled("textarea", {
35
50
  name: DSControlledLargeTextInputName,
@@ -40,15 +55,13 @@ const StyledTextArea = styled("textarea", {
40
55
  width: 100%;
41
56
  border: none;
42
57
  padding: 8px;
43
- ${({ resizable }) => resizable ? `` : `resize: none;`}
44
- &:disabled {
45
- &:hover {
46
- cursor: not-allowed;
47
- }
48
- }
58
+ ${({ resizable }) => resizable ? `` : `resize: none;`}
49
59
  ${({ $maxHeight }) => $maxHeight ? `max-height: ${$maxHeight}px;` : ``}
50
60
  ${({ $minHeight }) => $minHeight ? `min-height: ${$minHeight}px;` : ``}
51
- ${({ disabled }) => disabled ? `overflow: hidden` : ""}
61
+ ${({ disabled }) => disabled ? `
62
+ overflow: hidden;
63
+ background-color: #EBEDF0;
64
+ ` : ""}
52
65
  `;
53
66
  export {
54
67
  StyledContainer,
@@ -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, XStyledWrapper } 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(XStyledWrapper, {\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`;\n\nexport const WrapperBorder = styled('div')`\n &:hover::after,\n &:focus::after {\n content: ' ';\n position: absolute;\n inset: 0px;\n border: 2px solid brand-700;\n border-radius: inherit;\n pointer-events: none;\n z-index: 1;\n }\n &:hover,\n &:focus {\n border-color: transparent;\n }\n border: 1px solid neutral-400;\n border-radius: 2px;\n position: relative;\n box-sizing: content-box;\n ${({ $hasError }) => ($hasError ? `border: 2px solid red;` : ``)}\n`;\n\nexport const StyledTextArea = styled('textarea', {\n name: DSControlledLargeTextInputName,\n slot: DSControlledLargeTextInputSlots.INPUT,\n})<StyledTextAreaT>`\n line-height: 1;\n outline: none;\n width: 100%;\n border: none;\n padding: 8px;\n ${({ resizable }) => (resizable ? `` : `resize: none;`)}\n &:disabled {\n &:hover {\n cursor: not-allowed;\n }\n }\n ${({ $maxHeight }) => ($maxHeight ? `max-height: ${$maxHeight}px;` : ``)}\n ${({ $minHeight }) => ($minHeight ? `min-height: ${$minHeight}px;` : ``)}\n ${({ disabled }) => (disabled ? `overflow: hidden` : '')}\n`;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,sBAAsB;AACvC,SAAS,gCAAgC,uCAAuC;AAOzE,MAAM,kBAAkB,OAAO,gBAAgB;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,gCAAgC;AACxC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOM,MAAM,gBAAgB,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAmBrC,CAAC,EAAE,UAAU,MAAO,YAAY,2BAA2B;AAAA;AAGxD,MAAM,iBAAiB,OAAO,YAAY;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,gCAAgC;AACxC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMG,CAAC,EAAE,UAAU,MAAO,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMrC,CAAC,EAAE,WAAW,MAAO,aAAa,eAAe,kBAAkB;AAAA,IACnE,CAAC,EAAE,WAAW,MAAO,aAAa,eAAe,kBAAkB;AAAA,IACnE,CAAC,EAAE,SAAS,MAAO,WAAW,qBAAqB;AAAA;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, xStyledCommonProps, th } 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 ${xStyledCommonProps}\n`;\n\nexport const WrapperBorder = styled('div')`\n &:hover::after,\n &:focus::after {\n content: ' ';\n position: absolute;\n inset: 0px;\n border: 2px solid brand-700;\n border-radius: inherit;\n pointer-events: none;\n z-index: 1;\n }\n &:hover,\n &:focus {\n border-color: transparent;\n }\n border: 1px solid neutral-400;\n border-radius: 2px;\n position: relative;\n box-sizing: content-box;\n ${({ $hasError }) => ($hasError ? `border: 2px solid red;` : ``)}\n ${({ $isDisabled }) => {\n return ($isDisabled ? `\n &::after{\n z-index: 1;\n inset: 0px;\n content: ' ';\n position: absolute;\n pointer-events: none;\n background-color: #EBEDF0;\n color: #616b7f;\n cursor: not-allowed;\n }\n ` : ``)}}\n`;\n\nexport const StyledTextArea = styled('textarea', {\n name: DSControlledLargeTextInputName,\n slot: DSControlledLargeTextInputSlots.INPUT,\n})<StyledTextAreaT>`\n line-height: 1;\n outline: none;\n width: 100%;\n border: none;\n padding: 8px;\n ${({ resizable }) => (resizable ? `` : `resize: none;`)} \n ${({ $maxHeight }) => ($maxHeight ? `max-height: ${$maxHeight}px;` : ``)}\n ${({ $minHeight }) => ($minHeight ? `min-height: ${$minHeight}px;` : ``)}\n ${({ disabled }) => (disabled ? `\n overflow: hidden;\n background-color: #EBEDF0;\n ` : '')}\n`;\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,0BAA8B;AAC/C,SAAS,gCAAgC,uCAAuC;AAOzE,MAAM,kBAAkB,OAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,gCAAgC;AACxC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKG;AAAA;AAGG,MAAM,gBAAgB,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAmBrC,CAAC,EAAE,UAAU,MAAO,YAAY,2BAA2B;AAAA,IAC3D,CAAC,EAAE,YAAY,MAAM;AACrB,SAAQ,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAWpB;AAAG;AAAA;AAGF,MAAM,iBAAiB,OAAO,YAAY;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,gCAAgC;AACxC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMG,CAAC,EAAE,UAAU,MAAO,YAAY,KAAK;AAAA,IACrC,CAAC,EAAE,WAAW,MAAO,aAAa,eAAe,kBAAkB;AAAA,IACnE,CAAC,EAAE,WAAW,MAAO,aAAa,eAAe,kBAAkB;AAAA,IACnE,CAAC,EAAE,SAAS,MAAO,WAAW;AAAA;AAAA;AAAA,MAG5B;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.12.0-rc.0",
3
+ "version": "3.12.0-rc.10",
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.12.0-rc.0",
39
- "@elliemae/ds-utilities": "3.12.0-rc.0"
38
+ "@elliemae/ds-system": "3.12.0-rc.10",
39
+ "@elliemae/ds-utilities": "3.12.0-rc.10"
40
40
  },
41
41
  "devDependencies": {
42
42
  "@elliemae/pui-theme": "~2.6.0",
@@ -44,13 +44,13 @@
44
44
  "@testing-library/jest-dom": "~5.16.4",
45
45
  "@testing-library/react": "~12.1.3",
46
46
  "@testing-library/user-event": "~13.5.0",
47
- "styled-components": "~5.3.5"
47
+ "styled-components": "~5.3.6"
48
48
  },
49
49
  "peerDependencies": {
50
50
  "@elliemae/pui-theme": "~2.6.0",
51
51
  "react": "^17.0.2",
52
52
  "react-dom": "^17.0.2",
53
- "styled-components": "^5.3.5",
53
+ "styled-components": "~5.3.6",
54
54
  "styled-system": "^5.1.5"
55
55
  },
56
56
  "publishConfig": {