@elliemae/ds-form-input-textarea 3.3.0-next.4 → 3.3.0-next.7

package/dist/cjs/DSControlledLargeTextInput.js

@@ -3,34 +3,8 @@ var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -60,47 +34,39 @@ var import_exported_related = require("./exported-related");
 const DSControlledLargeTextInput = (props) => {
   (0, import_ds_utilities.useValidateTypescriptPropTypes)(props, import_react_desc_prop_types.propTypes);
   const propsWithDefault = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
-  const _a = propsWithDefault, {
-    maxLength,
-    value,
-    onChange,
-    innerRef,
-    resizable,
-    name,
-    id,
-    withoutCharacterCounter,
-    hasError
-  } = _a, otherProps = __objRest(_a, [
-    "maxLength",
-    "value",
-    "onChange",
-    "innerRef",
-    "resizable",
-    "name",
-    "id",
-    "withoutCharacterCounter",
-    "hasError"
-  ]);
-  const _b = (0, import_ds_utilities.useGetGlobalAttributes)(otherProps), { className } = _b, globalAttributes = __objRest(_b, ["className"]);
+  const { value, onChange, innerRef, resizable, name, id, hasError, maxHeight, ...otherProps } = propsWithDefault;
+  const { className, ...globalAttributes } = (0, import_ds_utilities.useGetGlobalAttributes)(otherProps);
   const xstyledProps = (0, import_ds_utilities.useGetXstyledProps)(otherProps);
+  const textareaRef = (0, import_react.useRef)(null);
   const handleOnChange = (0, import_react.useCallback)((e) => onChange(e.target.value, e), [onChange]);
-  return /* @__PURE__ */ import_react.default.createElement(import_styles.StyledContainer, __spreadValues({
+  (0, import_react.useLayoutEffect)(() => {
+    if (textareaRef && textareaRef.current && value !== "") {
+      textareaRef.current.style.maxHeight = "0px";
+      const { scrollHeight } = textareaRef.current;
+      if (maxHeight !== void 0 && scrollHeight >= maxHeight)
+        textareaRef.current.style.minHeight = `${maxHeight}px`;
+      else
+        textareaRef.current.style.minHeight = `${scrollHeight}px`;
+      textareaRef.current.style.maxHeight = `${maxHeight}px`;
+    }
+  }, [maxHeight, value]);
+  return /* @__PURE__ */ import_react.default.createElement(import_styles.StyledContainer, {
     className,
-    "data-testid": import_exported_related.DSControlledLargetTextInputDatatestids.CONTAINER
-  }, xstyledProps), /* @__PURE__ */ import_react.default.createElement(import_styles.StyledTextArea, __spreadValues({
-    ref: innerRef,
-    maxLength,
+    "data-testid": import_exported_related.DSControlledLargetTextInputDatatestids.CONTAINER,
+    ...xstyledProps
+  }, /* @__PURE__ */ import_react.default.createElement(import_styles.StyledTextArea, {
+    ref: (0, import_ds_utilities.mergeRefs)(innerRef, textareaRef),
     "aria-multiline": true,
     value,
+    $maxHeight: maxHeight,
     onChange: handleOnChange,
     resizable,
     name,
     id,
     "data-testid": import_exported_related.DSControlledLargetTextInputDatatestids.INPUT,
-    hasError
-  }, globalAttributes)), maxLength && !withoutCharacterCounter && /* @__PURE__ */ import_react.default.createElement(import_styles.StyledCharCounter, {
-    "data-testid": import_exported_related.DSControlledLargetTextInputDatatestids.CHAR_COUNTER
-  }, `${value.length}/${maxLength}`));
+    $hasError: hasError,
+    ...globalAttributes
+  }));
 };
 DSControlledLargeTextInput.displayName = "DSControlledLargeTextInput";
 const DSControlledLargeTextInputWithSchema = (0, import_ds_utilities.describe)(DSControlledLargeTextInput);

package/dist/cjs/DSControlledLargeTextInput.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSControlledLargeTextInput.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "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, StyledCharCounter } 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 {\n    maxLength,\n    value,\n    onChange,\n    innerRef,\n    resizable,\n    name,\n    id,\n    withoutCharacterCounter,\n    hasError,\n    ...otherProps\n  } = propsWithDefault;\n\n  const { className, ...globalAttributes } = useGetGlobalAttributes(otherProps);\n\n  const xstyledProps = useGetXstyledProps(otherProps);\n\n  const handleOnChange = useCallback(\n    (e: React.KeyboardEvent) => onChange((e.target as HTMLInputElement).value, e),\n    [onChange],\n  );\n\n  return (\n    <StyledContainer\n      className={className}\n      data-testid={DSControlledLargetTextInputDatatestids.CONTAINER}\n      {...xstyledProps}\n    >\n      <StyledTextArea\n        ref={innerRef}\n        maxLength={maxLength}\n        aria-multiline\n        value={value}\n        onChange={handleOnChange}\n        resizable={resizable}\n        name={name}\n        id={id}\n        data-testid={DSControlledLargetTextInputDatatestids.INPUT}\n        hasError={hasError}\n        {...globalAttributes}\n      />\n      {maxLength && !withoutCharacterCounter && (\n        <StyledCharCounter\n          data-testid={DSControlledLargetTextInputDatatestids.CHAR_COUNTER}\n        >{`${value.length}/${maxLength}`}</StyledCharCounter>\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"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAsD;AACtD,0BAMO;AACP,mCAAwC;AACxC,oBAAmE;AACnE,8BAAuD;AAGvD,MAAM,6BAA6B,CAAC,UAA0D;AAC5F,0DAA+B,OAAO,sCAAS;AAE/C,QAAM,mBAAmB,sDAAgE,OAAO,yCAAY;AAE5G,QAWI,uBAVF;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MAEE,IADC,uBACD,IADC;AAAA,IATH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAIF,QAA2C,qDAAuB,UAAU,GAApE,gBAAmC,IAArB,6BAAqB,IAArB,CAAd;AAER,QAAM,eAAe,4CAAmB,UAAU;AAElD,QAAM,iBAAiB,8BACrB,CAAC,MAA2B,SAAU,EAAE,OAA4B,OAAO,CAAC,GAC5E,CAAC,QAAQ,CACX;AAEA,SACE,mDAAC;AAAA,IACC;AAAA,IACA,eAAa,+DAAuC;AAAA,KAChD,eAEJ,mDAAC;AAAA,IACC,KAAK;AAAA,IACL;AAAA,IACA,kBAAc;AAAA,IACd;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAa,+DAAuC;AAAA,IACpD;AAAA,KACI,iBACN,GACC,aAAa,CAAC,2BACb,mDAAC;AAAA,IACC,eAAa,+DAAuC;AAAA,KACpD,GAAG,MAAM,UAAU,WAAY,CAErC;AAEJ;AAEA,2BAA2B,cAAc;AACzC,MAAM,uCAAuC,kCAAS,0BAA0B;AAChF,qCAAqC,YAAY;",
+  "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"],
+  "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;",
   "names": []
 }

package/dist/cjs/react-desc-prop-types.js

@@ -1,27 +1,10 @@
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -47,23 +30,24 @@ var import_ds_utilities = require("@elliemae/ds-utilities");
 const noop = () => {
 };
 const defaultProps = {
+  rows: "2",
   value: "",
   onChange: noop,
-  withoutCharacterCounter: false,
   resizable: false,
   hasError: false
 };
-const propTypes = __spreadProps(__spreadValues(__spreadValues({}, import_ds_utilities.globalAttributesPropTypes), import_ds_utilities.xstyledPropTypes), {
+const propTypes = {
+  ...import_ds_utilities.globalAttributesPropTypes,
+  ...import_ds_utilities.xstyledPropTypes,
   value: import_ds_utilities.PropTypes.string.description("Text are value.").defaultValue(""),
   onChange: import_ds_utilities.PropTypes.func.description("OnChange cb.").defaultValue("() => {}"),
   resizable: import_ds_utilities.PropTypes.bool.description("Enables to resize the component.").defaultValue(false),
   rows: import_ds_utilities.PropTypes.string.description("Sets the number of lines for the default height. Once lines are reached, scroll behavior enables."),
-  withoutCharacterCounter: import_ds_utilities.PropTypes.bool.description("Removes the character counter.").defaultValue(false),
   id: import_ds_utilities.PropTypes.string.description("Unique id."),
   innerRef: import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.object, import_ds_utilities.PropTypes.func]).description("Inner ref to the input."),
-  maxLength: import_ds_utilities.PropTypes.string.description("Max characters allowed."),
   disabled: import_ds_utilities.PropTypes.bool.description("Set disabled state."),
   readOnly: import_ds_utilities.PropTypes.bool.description("Set readonly state."),
+  maxHeight: import_ds_utilities.PropTypes.number.description("Set max height to recize input text"),
   hasError: import_ds_utilities.PropTypes.bool.description("Set error state.").defaultValue(false)
-});
+};
 //# sourceMappingURL=react-desc-prop-types.js.map

package/dist/cjs/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react-desc-prop-types.ts", "../../../../scripts/build/transpile/react-shim.js"],
-  "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    withoutCharacterCounter: boolean;\n    resizable: boolean;\n    hasError: boolean;\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    innerRef?: React.MutableRefObject<HTMLTextAreaElement | null>;\n    maxLength?: string;\n    rows?: string;\n    hasError?: boolean;\n  }\n\n  export interface Props extends DefaultProps, PropsOptional, RequiredProps {}\n}\n\nexport const defaultProps: DSControlledLargeTextInputT.DefaultProps = {\n  value: '',\n  onChange: noop,\n  withoutCharacterCounter: false,\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  withoutCharacterCounter: PropTypes.bool.description('Removes the character counter.').defaultValue(false),\n  id: PropTypes.string.description('Unique id.'),\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to the input.'),\n  maxLength: PropTypes.string.description('Max characters allowed.'),\n  disabled: PropTypes.bool.description('Set disabled state.'),\n  readOnly: PropTypes.bool.description('Set readonly state.'),\n  hasError: PropTypes.bool.description('Set error state.').defaultValue(false),\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAAuE;AAEvE,MAAM,OAAO,MAAM;AAAC;AA4Bb,MAAM,eAAyD;AAAA,EACpE,OAAO;AAAA,EACP,UAAU;AAAA,EACV,yBAAyB;AAAA,EACzB,WAAW;AAAA,EACX,UAAU;AACZ;AAEO,MAAM,YAAY,gDACpB,gDACA,uCAFoB;AAAA,EAGvB,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,yBAAyB,8BAAU,KAAK,YAAY,gCAAgC,EAAE,aAAa,KAAK;AAAA,EACxG,IAAI,8BAAU,OAAO,YAAY,YAAY;AAAA,EAC7C,UAAU,8BAAU,UAAU,CAAC,8BAAU,QAAQ,8BAAU,IAAI,CAAC,EAAE,YAAY,yBAAyB;AAAA,EACvG,WAAW,8BAAU,OAAO,YAAY,yBAAyB;AAAA,EACjE,UAAU,8BAAU,KAAK,YAAY,qBAAqB;AAAA,EAC1D,UAAU,8BAAU,KAAK,YAAY,qBAAqB;AAAA,EAC1D,UAAU,8BAAU,KAAK,YAAY,kBAAkB,EAAE,aAAa,KAAK;AAC7E;",
+  "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"],
+  "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;",
   "names": []
 }

package/dist/cjs/styles.js

@@ -21,7 +21,6 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var styles_exports = {};
 __export(styles_exports, {
-  StyledCharCounter: () => StyledCharCounter,
   StyledContainer: () => StyledContainer,
   StyledTextArea: () => StyledTextArea
 });
@@ -41,16 +40,13 @@ const StyledContainer = (0, import_ds_system.styled)("div", {
   ${import_ds_system.space}
   ${import_ds_system.sizing}
 `;
-const StyledCharCounter = (0, import_ds_system.styled)("span", {
-  name: import_exported_related.DSControlledLargeTextInputName,
-  slot: import_exported_related.DSControlledLargeTextInputSlots.CHAR_COUNTER
-})`
-  justify-self: flex-end;
-`;
 const StyledTextArea = (0, import_ds_system.styled)("textarea", {
   name: import_exported_related.DSControlledLargeTextInputName,
   slot: import_exported_related.DSControlledLargeTextInputSlots.INPUT
 })`
+  &:hover { 
+    border: 1px solid ${({ theme }) => theme.colors.brand[700]};
+  }
   width: 100%;
   ${({ resizable }) => resizable ? `` : `resize: none;`}
   &:disabled {
@@ -58,7 +54,7 @@ const StyledTextArea = (0, import_ds_system.styled)("textarea", {
       cursor: not-allowed;
     }
   }
-
-  ${({ hasError }) => hasError ? `border: 1px solid red;` : ``}
+  ${({ $maxHeight }) => $maxHeight ? `max-height: ${$maxHeight}px;` : ``}
+  ${({ $hasError }) => $hasError ? `border: 1px solid red;` : ``}
 `;
 //# sourceMappingURL=styles.js.map

package/dist/cjs/styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/styles.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "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 StyledCharCounter = styled('span', {\n  name: DSControlledLargeTextInputName,\n  slot: DSControlledLargeTextInputSlots.CHAR_COUNTER,\n})`\n  justify-self: flex-end;\n`;\n\nexport const StyledTextArea = styled('textarea', {\n  name: DSControlledLargeTextInputName,\n  slot: DSControlledLargeTextInputSlots.INPUT,\n})<StyledTextAreaT>`\n  width: 100%;\n  ${({ resizable }) => (resizable ? `` : `resize: none;`)}\n  &:disabled {\n    &:hover {\n      cursor: not-allowed;\n    }\n  }\n\n  ${({ hasError }) => (hasError ? `border: 1px solid red;` : ``)}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;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,oBAAoB,6BAAO,QAAQ;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,wDAAgC;AACxC,CAAC;AAAA;AAAA;AAIM,MAAM,iBAAiB,6BAAO,YAAY;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,wDAAgC;AACxC,CAAC;AAAA;AAAA,IAEG,CAAC,EAAE,gBAAiB,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOrC,CAAC,EAAE,eAAgB,WAAW,2BAA2B;AAAA;",
+  "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"],
+  "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;",
   "names": []
 }

package/dist/esm/DSControlledLargeTextInput.js

@@ -1,88 +1,53 @@
 "use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 import * as React from "react";
-import React2, { useCallback } from "react";
+import React2, { useCallback, useRef, useLayoutEffect } from "react";
 import {
   describe,
+  mergeRefs,
   useValidateTypescriptPropTypes,
   useMemoMergePropsWithDefault,
   useGetGlobalAttributes,
   useGetXstyledProps
 } from "@elliemae/ds-utilities";
 import { propTypes, defaultProps } from "./react-desc-prop-types";
-import { StyledTextArea, StyledContainer, StyledCharCounter } from "./styles";
+import { StyledTextArea, StyledContainer } from "./styles";
 import { DSControlledLargetTextInputDatatestids } from "./exported-related";
 const DSControlledLargeTextInput = (props) => {
   useValidateTypescriptPropTypes(props, propTypes);
   const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
-  const _a = propsWithDefault, {
-    maxLength,
-    value,
-    onChange,
-    innerRef,
-    resizable,
-    name,
-    id,
-    withoutCharacterCounter,
-    hasError
-  } = _a, otherProps = __objRest(_a, [
-    "maxLength",
-    "value",
-    "onChange",
-    "innerRef",
-    "resizable",
-    "name",
-    "id",
-    "withoutCharacterCounter",
-    "hasError"
-  ]);
-  const _b = useGetGlobalAttributes(otherProps), { className } = _b, globalAttributes = __objRest(_b, ["className"]);
+  const { value, onChange, innerRef, resizable, name, id, hasError, maxHeight, ...otherProps } = propsWithDefault;
+  const { className, ...globalAttributes } = useGetGlobalAttributes(otherProps);
   const xstyledProps = useGetXstyledProps(otherProps);
+  const textareaRef = useRef(null);
   const handleOnChange = useCallback((e) => onChange(e.target.value, e), [onChange]);
-  return /* @__PURE__ */ React2.createElement(StyledContainer, __spreadValues({
+  useLayoutEffect(() => {
+    if (textareaRef && textareaRef.current && value !== "") {
+      textareaRef.current.style.maxHeight = "0px";
+      const { scrollHeight } = textareaRef.current;
+      if (maxHeight !== void 0 && scrollHeight >= maxHeight)
+        textareaRef.current.style.minHeight = `${maxHeight}px`;
+      else
+        textareaRef.current.style.minHeight = `${scrollHeight}px`;
+      textareaRef.current.style.maxHeight = `${maxHeight}px`;
+    }
+  }, [maxHeight, value]);
+  return /* @__PURE__ */ React2.createElement(StyledContainer, {
     className,
-    "data-testid": DSControlledLargetTextInputDatatestids.CONTAINER
-  }, xstyledProps), /* @__PURE__ */ React2.createElement(StyledTextArea, __spreadValues({
-    ref: innerRef,
-    maxLength,
+    "data-testid": DSControlledLargetTextInputDatatestids.CONTAINER,
+    ...xstyledProps
+  }, /* @__PURE__ */ React2.createElement(StyledTextArea, {
+    ref: mergeRefs(innerRef, textareaRef),
     "aria-multiline": true,
     value,
+    $maxHeight: maxHeight,
     onChange: handleOnChange,
     resizable,
     name,
     id,
     "data-testid": DSControlledLargetTextInputDatatestids.INPUT,
-    hasError
-  }, globalAttributes)), maxLength && !withoutCharacterCounter && /* @__PURE__ */ React2.createElement(StyledCharCounter, {
-    "data-testid": DSControlledLargetTextInputDatatestids.CHAR_COUNTER
-  }, `${value.length}/${maxLength}`));
+    $hasError: hasError,
+    ...globalAttributes
+  }));
 };
 DSControlledLargeTextInput.displayName = "DSControlledLargeTextInput";
 const DSControlledLargeTextInputWithSchema = describe(DSControlledLargeTextInput);

package/dist/esm/DSControlledLargeTextInput.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSControlledLargeTextInput.tsx"],
-  "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, StyledCharCounter } 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 {\n    maxLength,\n    value,\n    onChange,\n    innerRef,\n    resizable,\n    name,\n    id,\n    withoutCharacterCounter,\n    hasError,\n    ...otherProps\n  } = propsWithDefault;\n\n  const { className, ...globalAttributes } = useGetGlobalAttributes(otherProps);\n\n  const xstyledProps = useGetXstyledProps(otherProps);\n\n  const handleOnChange = useCallback(\n    (e: React.KeyboardEvent) => onChange((e.target as HTMLInputElement).value, e),\n    [onChange],\n  );\n\n  return (\n    <StyledContainer\n      className={className}\n      data-testid={DSControlledLargetTextInputDatatestids.CONTAINER}\n      {...xstyledProps}\n    >\n      <StyledTextArea\n        ref={innerRef}\n        maxLength={maxLength}\n        aria-multiline\n        value={value}\n        onChange={handleOnChange}\n        resizable={resizable}\n        name={name}\n        id={id}\n        data-testid={DSControlledLargetTextInputDatatestids.INPUT}\n        hasError={hasError}\n        {...globalAttributes}\n      />\n      {maxLength && !withoutCharacterCounter && (\n        <StyledCharCounter\n          data-testid={DSControlledLargetTextInputDatatestids.CHAR_COUNTER}\n        >{`${value.length}/${maxLength}`}</StyledCharCounter>\n      )}\n    </StyledContainer>\n  );\n};\n\nDSControlledLargeTextInput.displayName = 'DSControlledLargeTextInput';\nconst DSControlledLargeTextInputWithSchema = describe(DSControlledLargeTextInput);\nDSControlledLargeTextInputWithSchema.propTypes = propTypes as WeakValidationMap<unknown>;\n\nexport { DSControlledLargeTextInput, DSControlledLargeTextInputWithSchema };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;AACA;AACA;AAGA,MAAM,6BAA6B,CAAC,UAA0D;AAC5F,iCAA+B,OAAO,SAAS;AAE/C,QAAM,mBAAmB,6BAAgE,OAAO,YAAY;AAE5G,QAWI,uBAVF;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MAEE,IADC,uBACD,IADC;AAAA,IATH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAIF,QAA2C,4BAAuB,UAAU,GAApE,gBAAmC,IAArB,6BAAqB,IAArB,CAAd;AAER,QAAM,eAAe,mBAAmB,UAAU;AAElD,QAAM,iBAAiB,YACrB,CAAC,MAA2B,SAAU,EAAE,OAA4B,OAAO,CAAC,GAC5E,CAAC,QAAQ,CACX;AAEA,SACE,qCAAC;AAAA,IACC;AAAA,IACA,eAAa,uCAAuC;AAAA,KAChD,eAEJ,qCAAC;AAAA,IACC,KAAK;AAAA,IACL;AAAA,IACA,kBAAc;AAAA,IACd;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAa,uCAAuC;AAAA,IACpD;AAAA,KACI,iBACN,GACC,aAAa,CAAC,2BACb,qCAAC;AAAA,IACC,eAAa,uCAAuC;AAAA,KACpD,GAAG,MAAM,UAAU,WAAY,CAErC;AAEJ;AAEA,2BAA2B,cAAc;AACzC,MAAM,uCAAuC,SAAS,0BAA0B;AAChF,qCAAqC,YAAY;",
+  "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"],
+  "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;",
   "names": []
 }

package/dist/esm/react-desc-prop-types.js

@@ -1,47 +1,29 @@
 "use strict";
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import * as React from "react";
 import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from "@elliemae/ds-utilities";
 const noop = () => {
 };
 const defaultProps = {
+  rows: "2",
   value: "",
   onChange: noop,
-  withoutCharacterCounter: false,
   resizable: false,
   hasError: false
 };
-const propTypes = __spreadProps(__spreadValues(__spreadValues({}, globalAttributesPropTypes), xstyledPropTypes), {
+const propTypes = {
+  ...globalAttributesPropTypes,
+  ...xstyledPropTypes,
   value: PropTypes.string.description("Text are value.").defaultValue(""),
   onChange: PropTypes.func.description("OnChange cb.").defaultValue("() => {}"),
   resizable: PropTypes.bool.description("Enables to resize the component.").defaultValue(false),
   rows: PropTypes.string.description("Sets the number of lines for the default height. Once lines are reached, scroll behavior enables."),
-  withoutCharacterCounter: PropTypes.bool.description("Removes the character counter.").defaultValue(false),
   id: PropTypes.string.description("Unique id."),
   innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description("Inner ref to the input."),
-  maxLength: PropTypes.string.description("Max characters allowed."),
   disabled: PropTypes.bool.description("Set disabled state."),
   readOnly: PropTypes.bool.description("Set readonly state."),
+  maxHeight: PropTypes.number.description("Set max height to recize input text"),
   hasError: PropTypes.bool.description("Set error state.").defaultValue(false)
-});
+};
 export {
   defaultProps,
   propTypes

package/dist/esm/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
-  "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    withoutCharacterCounter: boolean;\n    resizable: boolean;\n    hasError: boolean;\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    innerRef?: React.MutableRefObject<HTMLTextAreaElement | null>;\n    maxLength?: string;\n    rows?: string;\n    hasError?: boolean;\n  }\n\n  export interface Props extends DefaultProps, PropsOptional, RequiredProps {}\n}\n\nexport const defaultProps: DSControlledLargeTextInputT.DefaultProps = {\n  value: '',\n  onChange: noop,\n  withoutCharacterCounter: false,\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  withoutCharacterCounter: PropTypes.bool.description('Removes the character counter.').defaultValue(false),\n  id: PropTypes.string.description('Unique id.'),\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to the input.'),\n  maxLength: PropTypes.string.description('Max characters allowed.'),\n  disabled: PropTypes.bool.description('Set disabled state.'),\n  readOnly: PropTypes.bool.description('Set readonly state.'),\n  hasError: PropTypes.bool.description('Set error state.').defaultValue(false),\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AAEA,MAAM,OAAO,MAAM;AAAC;AA4Bb,MAAM,eAAyD;AAAA,EACpE,OAAO;AAAA,EACP,UAAU;AAAA,EACV,yBAAyB;AAAA,EACzB,WAAW;AAAA,EACX,UAAU;AACZ;AAEO,MAAM,YAAY,gDACpB,4BACA,mBAFoB;AAAA,EAGvB,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,yBAAyB,UAAU,KAAK,YAAY,gCAAgC,EAAE,aAAa,KAAK;AAAA,EACxG,IAAI,UAAU,OAAO,YAAY,YAAY;AAAA,EAC7C,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,IAAI,CAAC,EAAE,YAAY,yBAAyB;AAAA,EACvG,WAAW,UAAU,OAAO,YAAY,yBAAyB;AAAA,EACjE,UAAU,UAAU,KAAK,YAAY,qBAAqB;AAAA,EAC1D,UAAU,UAAU,KAAK,YAAY,qBAAqB;AAAA,EAC1D,UAAU,UAAU,KAAK,YAAY,kBAAkB,EAAE,aAAa,KAAK;AAC7E;",
+  "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"],
+  "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;",
   "names": []
 }

package/dist/esm/styles.js

@@ -14,16 +14,13 @@ const StyledContainer = styled("div", {
   ${space}
   ${sizing}
 `;
-const StyledCharCounter = styled("span", {
-  name: DSControlledLargeTextInputName,
-  slot: DSControlledLargeTextInputSlots.CHAR_COUNTER
-})`
-  justify-self: flex-end;
-`;
 const StyledTextArea = styled("textarea", {
   name: DSControlledLargeTextInputName,
   slot: DSControlledLargeTextInputSlots.INPUT
 })`
+  &:hover { 
+    border: 1px solid ${({ theme }) => theme.colors.brand[700]};
+  }
   width: 100%;
   ${({ resizable }) => resizable ? `` : `resize: none;`}
   &:disabled {
@@ -31,11 +28,10 @@ const StyledTextArea = styled("textarea", {
       cursor: not-allowed;
     }
   }
-
-  ${({ hasError }) => hasError ? `border: 1px solid red;` : ``}
+  ${({ $maxHeight }) => $maxHeight ? `max-height: ${$maxHeight}px;` : ``}
+  ${({ $hasError }) => $hasError ? `border: 1px solid red;` : ``}
 `;
 export {
-  StyledCharCounter,
   StyledContainer,
   StyledTextArea
 };

package/dist/esm/styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
-  "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 StyledCharCounter = styled('span', {\n  name: DSControlledLargeTextInputName,\n  slot: DSControlledLargeTextInputSlots.CHAR_COUNTER,\n})`\n  justify-self: flex-end;\n`;\n\nexport const StyledTextArea = styled('textarea', {\n  name: DSControlledLargeTextInputName,\n  slot: DSControlledLargeTextInputSlots.INPUT,\n})<StyledTextAreaT>`\n  width: 100%;\n  ${({ resizable }) => (resizable ? `` : `resize: none;`)}\n  &:disabled {\n    &:hover {\n      cursor: not-allowed;\n    }\n  }\n\n  ${({ hasError }) => (hasError ? `border: 1px solid red;` : ``)}\n`;\n"],
-  "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,oBAAoB,OAAO,QAAQ;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,gCAAgC;AACxC,CAAC;AAAA;AAAA;AAIM,MAAM,iBAAiB,OAAO,YAAY;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,gCAAgC;AACxC,CAAC;AAAA;AAAA,IAEG,CAAC,EAAE,gBAAiB,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOrC,CAAC,EAAE,eAAgB,WAAW,2BAA2B;AAAA;",
+  "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"],
+  "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;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-form-input-textarea",
-  "version": "3.3.0-next.4",
+  "version": "3.3.0-next.7",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Controlled Form Input Textarea",
   "files": [
@@ -35,8 +35,8 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-system": "3.3.0-next.4",
-    "@elliemae/ds-utilities": "3.3.0-next.4",
+    "@elliemae/ds-system": "3.3.0-next.7",
+    "@elliemae/ds-utilities": "3.3.0-next.7",
     "@xstyled/styled-components": "~3.6.0"
   },
   "devDependencies": {