@uva-glass/component-library 3.53.7 → 3.53.9

package/dist/components/TextArea/TextArea.d.ts

@@ -7,6 +7,8 @@ export interface TextAreaProps {
     subLabel?: string;
     /** The max amount of allowed charecters in the text area */
     maxCharacters?: number;
+    /** The max number of visible lines in the text area */
+    heightAsTextField?: boolean;
     /** The default value for the text area */
     defaultValue?: string;
     /** `true` to show an asterisk to indicate an item is required; otherwise, `false`. */
@@ -14,4 +16,4 @@ export interface TextAreaProps {
     /** `true` to color border red to show not valid; otherwise, `false`. */
     notValid?: boolean;
 }
-export declare function TextArea({ onChange, label, subLabel, maxCharacters, defaultValue, required, notValid, }: TextAreaProps): import("react/jsx-runtime").JSX.Element;
+export declare function TextArea({ onChange, label, subLabel, maxCharacters, heightAsTextField, defaultValue, required, notValid, }: TextAreaProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/TextArea/TextArea.js

@@ -1,38 +1,40 @@
 import { jsxs as r, jsx as _ } from "react/jsx-runtime";
-import { useRef as h, useState as w } from "react";
-import { c as n } from "../../clsx-OuTLNxxd.js";
-import '../../assets/TextArea.css';const m = "_required_di3u1_25", e = {
-  "text-area__wrapper": "_text-area__wrapper_di3u1_1",
-  "text-area__header": "_text-area__header_di3u1_7",
-  "text-area__label-wrapper": "_text-area__label-wrapper_di3u1_13",
-  "text-area__label": "_text-area__label_di3u1_13",
-  required: m,
-  "text-area__sub-label": "_text-area__sub-label_di3u1_33",
-  "text-area__word-count": "_text-area__word-count_di3u1_38",
-  "text-area__word-count--alert": "_text-area__word-count--alert_di3u1_43",
-  "text-area": "_text-area_di3u1_1",
-  "not-valid": "_not-valid_di3u1_61"
+import { useRef as q, useState as w } from "react";
+import { c as l } from "../../clsx-OuTLNxxd.js";
+import '../../assets/TextArea.css';const k = "_required_19dqk_25", e = {
+  "text-area__wrapper": "_text-area__wrapper_19dqk_1",
+  "text-area__header": "_text-area__header_19dqk_7",
+  "text-area__label-wrapper": "_text-area__label-wrapper_19dqk_13",
+  "text-area__label": "_text-area__label_19dqk_13",
+  required: k,
+  "text-area__sub-label": "_text-area__sub-label_19dqk_33",
+  "text-area__word-count": "_text-area__word-count_19dqk_38",
+  "text-area__word-count--alert": "_text-area__word-count--alert_19dqk_43",
+  "text-area": "_text-area_19dqk_1",
+  "text-area--oneLine": "_text-area--oneLine_19dqk_61",
+  "not-valid": "_not-valid_19dqk_66"
 };
-function N({
-  onChange: s,
-  label: l,
-  subLabel: u,
+function b({
+  onChange: c,
+  label: n,
+  subLabel: d,
   maxCharacters: a = 0,
-  defaultValue: d = "",
-  required: c = !1,
-  notValid: o = !1
+  heightAsTextField: x = !1,
+  defaultValue: s = "",
+  required: i = !1,
+  notValid: u = !1
 }) {
-  const t = h(null), [i, x] = w(d.length), p = () => {
-    t.current && (t.current.style.height = "auto", t.current.style.height = `${t.current.scrollHeight}px`, x(t.current.value.length), s(t.current.value.trim()));
+  const t = q(null), [o, p] = w(s.length), h = () => {
+    t.current && (t.current.style.height = "auto", t.current.style.height = `${t.current.scrollHeight}px`, p(t.current.value.length), c(t.current.value.trim()));
   };
   return /* @__PURE__ */ r("div", { className: e["text-area__wrapper"], children: [
-    (l || a > 0) && /* @__PURE__ */ r("div", { className: e["text-area__header"], children: [
+    (n || a > 0) && /* @__PURE__ */ r("div", { className: e["text-area__header"], children: [
       /* @__PURE__ */ r("span", { className: e["text-area__label-wrapper"], children: [
-        l && /* @__PURE__ */ _("span", { className: n(e["text-area__label"], { [e.required]: c }), children: l }),
-        u && /* @__PURE__ */ _("span", { className: e["text-area__sub-label"], children: u })
+        n && /* @__PURE__ */ _("span", { className: l(e["text-area__label"], { [e.required]: i }), children: n }),
+        d && /* @__PURE__ */ _("span", { className: e["text-area__sub-label"], children: d })
       ] }),
       a > 0 && /* @__PURE__ */ r("div", { className: e["text-area__word-count"], children: [
-        /* @__PURE__ */ _("span", { className: n({ [e["text-area__word-count--alert"]]: i === a }), children: i }),
+        /* @__PURE__ */ _("span", { className: l({ [e["text-area__word-count--alert"]]: o === a }), children: o }),
         " / ",
         a
       ] })
@@ -41,15 +43,18 @@ function N({
       "textarea",
       {
         ref: t,
-        className: n(e["text-area"], { [e["not-valid"]]: o }),
+        className: l(e["text-area"], {
+          [e["not-valid"]]: u,
+          [e["text-area--oneLine"]]: x
+        }),
         maxLength: a > 0 ? a : void 0,
-        onInput: p,
-        defaultValue: d
+        onInput: h,
+        defaultValue: s
       }
     )
   ] });
 }
 export {
-  N as TextArea
+  b as TextArea
 };
 //# sourceMappingURL=TextArea.js.map

package/dist/components/TextArea/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","sources":["../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport styles from './TextArea.module.css';\n\nexport interface TextAreaProps {\n  /** Returns entered values as trimmed string */\n  onChange: (value: string) => void;\n  /** The label for the text area */\n  label?: string;\n  /** Optional sub label for the text area */\n  subLabel?: string;\n  /** The max amount of allowed charecters in the text area */\n  maxCharacters?: number;\n  /** The default value for the text area */\n  defaultValue?: string;\n  /** `true` to show an asterisk to indicate an item is required; otherwise, `false`. */\n  required?: boolean;\n  /** `true` to color border red to show not valid; otherwise, `false`. */\n  notValid?: boolean;\n}\n\nexport function TextArea({\n  onChange,\n  label,\n  subLabel,\n  maxCharacters = 0,\n  defaultValue = '',\n  required = false,\n  notValid = false,\n}: TextAreaProps) {\n  const textAreaRef = useRef<HTMLTextAreaElement>(null);\n  const [characterCount, setCharacterCount] = useState(defaultValue.length);\n\n  const handleInput = () => {\n    if (textAreaRef.current) {\n      textAreaRef.current.style.height = 'auto';\n      textAreaRef.current.style.height = `${textAreaRef.current.scrollHeight}px`;\n\n      setCharacterCount(textAreaRef.current.value.length);\n      onChange(textAreaRef.current.value.trim());\n    }\n  };\n\n  return (\n    <div className={styles['text-area__wrapper']}>\n      {(label || maxCharacters > 0) && (\n        <div className={styles['text-area__header']}>\n          <span className={styles['text-area__label-wrapper']}>\n            {label && (\n              <span className={clsx(styles['text-area__label'], { [styles['required']]: required })}>{label}</span>\n            )}\n            {subLabel && <span className={styles['text-area__sub-label']}>{subLabel}</span>}\n          </span>\n          {maxCharacters > 0 && (\n            <div className={styles['text-area__word-count']}>\n              <span className={clsx({ [styles['text-area__word-count--alert']]: characterCount === maxCharacters })}>\n                {characterCount}\n              </span>\n              &nbsp;/&nbsp;{maxCharacters}\n            </div>\n          )}\n        </div>\n      )}\n\n      <textarea\n        ref={textAreaRef}\n        className={clsx(styles['text-area'], { [styles['not-valid']]: notValid })}\n        maxLength={maxCharacters > 0 ? maxCharacters : undefined}\n        onInput={handleInput}\n        defaultValue={defaultValue}\n      />\n    </div>\n  );\n}\n"],"names":["TextArea","onChange","label","subLabel","maxCharacters","defaultValue","required","notValid","textAreaRef","useRef","characterCount","setCharacterCount","useState","handleInput","jsxs","styles","clsx","jsx"],"mappings":";;;;;;;;;;;;;;;AAsBO,SAASA,EAAS;AAAA,EACvB,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,cAAAC,IAAe;AAAA,EACf,UAAAC,IAAW;AAAA,EACX,UAAAC,IAAW;AACb,GAAkB;AAChB,QAAMC,IAAcC,EAA4B,IAAI,GAC9C,CAACC,GAAgBC,CAAiB,IAAIC,EAASP,EAAa,MAAM,GAElEQ,IAAc,MAAM;AACxB,IAAIL,EAAY,YACdA,EAAY,QAAQ,MAAM,SAAS,QACnCA,EAAY,QAAQ,MAAM,SAAS,GAAGA,EAAY,QAAQ,YAAY,MAEtEG,EAAkBH,EAAY,QAAQ,MAAM,MAAM,GAClDP,EAASO,EAAY,QAAQ,MAAM,KAAA,CAAM;AAAA,EAE7C;AAEA,SACE,gBAAAM,EAAC,OAAA,EAAI,WAAWC,EAAO,oBAAoB,GACvC,UAAA;AAAA,KAAAb,KAASE,IAAgB,MACzB,gBAAAU,EAAC,SAAI,WAAWC,EAAO,mBAAmB,GACxC,UAAA;AAAA,MAAA,gBAAAD,EAAC,QAAA,EAAK,WAAWC,EAAO,0BAA0B,GAC/C,UAAA;AAAA,QAAAb,uBACE,QAAA,EAAK,WAAWc,EAAKD,EAAO,kBAAkB,GAAG,EAAE,CAACA,EAAO,QAAW,GAAGT,EAAA,CAAU,GAAI,UAAAJ,GAAM;AAAA,QAE/FC,KAAY,gBAAAc,EAAC,QAAA,EAAK,WAAWF,EAAO,sBAAsB,GAAI,UAAAZ,EAAA,CAAS;AAAA,MAAA,GAC1E;AAAA,MACCC,IAAgB,KACf,gBAAAU,EAAC,SAAI,WAAWC,EAAO,uBAAuB,GAC5C,UAAA;AAAA,QAAA,gBAAAE,EAAC,QAAA,EAAK,WAAWD,EAAK,EAAE,CAACD,EAAO,8BAA8B,CAAC,GAAGL,MAAmBN,EAAA,CAAe,GACjG,UAAAM,EAAA,CACH;AAAA,QAAO;AAAA,QACON;AAAA,MAAA,EAAA,CAChB;AAAA,IAAA,GAEJ;AAAA,IAGF,gBAAAa;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKT;AAAA,QACL,WAAWQ,EAAKD,EAAO,WAAW,GAAG,EAAE,CAACA,EAAO,WAAW,CAAC,GAAGR,GAAU;AAAA,QACxE,WAAWH,IAAgB,IAAIA,IAAgB;AAAA,QAC/C,SAASS;AAAA,QACT,cAAAR;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}
+{"version":3,"file":"TextArea.js","sources":["../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport styles from './TextArea.module.css';\n\nexport interface TextAreaProps {\n  /** Returns entered values as trimmed string */\n  onChange: (value: string) => void;\n  /** The label for the text area */\n  label?: string;\n  /** Optional sub label for the text area */\n  subLabel?: string;\n  /** The max amount of allowed charecters in the text area */\n  maxCharacters?: number;\n  /** The max number of visible lines in the text area */\n  heightAsTextField?: boolean;\n  /** The default value for the text area */\n  defaultValue?: string;\n  /** `true` to show an asterisk to indicate an item is required; otherwise, `false`. */\n  required?: boolean;\n  /** `true` to color border red to show not valid; otherwise, `false`. */\n  notValid?: boolean;\n}\n\nexport function TextArea({\n  onChange,\n  label,\n  subLabel,\n  maxCharacters = 0,\n  heightAsTextField = false,\n  defaultValue = '',\n  required = false,\n  notValid = false,\n}: TextAreaProps) {\n  const textAreaRef = useRef<HTMLTextAreaElement>(null);\n  const [characterCount, setCharacterCount] = useState(defaultValue.length);\n\n  const handleInput = () => {\n    if (textAreaRef.current) {\n      textAreaRef.current.style.height = 'auto';\n      textAreaRef.current.style.height = `${textAreaRef.current.scrollHeight}px`;\n\n      setCharacterCount(textAreaRef.current.value.length);\n      onChange(textAreaRef.current.value.trim());\n    }\n  };\n\n  return (\n    <div className={styles['text-area__wrapper']}>\n      {(label || maxCharacters > 0) && (\n        <div className={styles['text-area__header']}>\n          <span className={styles['text-area__label-wrapper']}>\n            {label && (\n              <span className={clsx(styles['text-area__label'], { [styles['required']]: required })}>{label}</span>\n            )}\n            {subLabel && <span className={styles['text-area__sub-label']}>{subLabel}</span>}\n          </span>\n          {maxCharacters > 0 && (\n            <div className={styles['text-area__word-count']}>\n              <span className={clsx({ [styles['text-area__word-count--alert']]: characterCount === maxCharacters })}>\n                {characterCount}\n              </span>\n              &nbsp;/&nbsp;{maxCharacters}\n            </div>\n          )}\n        </div>\n      )}\n\n      <textarea\n        ref={textAreaRef}\n        className={clsx(styles['text-area'], {\n          [styles['not-valid']]: notValid,\n          [styles['text-area--oneLine']]: heightAsTextField,\n        })}\n        maxLength={maxCharacters > 0 ? maxCharacters : undefined}\n        onInput={handleInput}\n        defaultValue={defaultValue}\n      />\n    </div>\n  );\n}\n"],"names":["TextArea","onChange","label","subLabel","maxCharacters","heightAsTextField","defaultValue","required","notValid","textAreaRef","useRef","characterCount","setCharacterCount","useState","handleInput","jsxs","styles","clsx","jsx"],"mappings":";;;;;;;;;;;;;;;;AAwBO,SAASA,EAAS;AAAA,EACvB,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,mBAAAC,IAAoB;AAAA,EACpB,cAAAC,IAAe;AAAA,EACf,UAAAC,IAAW;AAAA,EACX,UAAAC,IAAW;AACb,GAAkB;AAChB,QAAMC,IAAcC,EAA4B,IAAI,GAC9C,CAACC,GAAgBC,CAAiB,IAAIC,EAASP,EAAa,MAAM,GAElEQ,IAAc,MAAM;AACxB,IAAIL,EAAY,YACdA,EAAY,QAAQ,MAAM,SAAS,QACnCA,EAAY,QAAQ,MAAM,SAAS,GAAGA,EAAY,QAAQ,YAAY,MAEtEG,EAAkBH,EAAY,QAAQ,MAAM,MAAM,GAClDR,EAASQ,EAAY,QAAQ,MAAM,KAAA,CAAM;AAAA,EAE7C;AAEA,SACE,gBAAAM,EAAC,OAAA,EAAI,WAAWC,EAAO,oBAAoB,GACvC,UAAA;AAAA,KAAAd,KAASE,IAAgB,MACzB,gBAAAW,EAAC,SAAI,WAAWC,EAAO,mBAAmB,GACxC,UAAA;AAAA,MAAA,gBAAAD,EAAC,QAAA,EAAK,WAAWC,EAAO,0BAA0B,GAC/C,UAAA;AAAA,QAAAd,uBACE,QAAA,EAAK,WAAWe,EAAKD,EAAO,kBAAkB,GAAG,EAAE,CAACA,EAAO,QAAW,GAAGT,EAAA,CAAU,GAAI,UAAAL,GAAM;AAAA,QAE/FC,KAAY,gBAAAe,EAAC,QAAA,EAAK,WAAWF,EAAO,sBAAsB,GAAI,UAAAb,EAAA,CAAS;AAAA,MAAA,GAC1E;AAAA,MACCC,IAAgB,KACf,gBAAAW,EAAC,SAAI,WAAWC,EAAO,uBAAuB,GAC5C,UAAA;AAAA,QAAA,gBAAAE,EAAC,QAAA,EAAK,WAAWD,EAAK,EAAE,CAACD,EAAO,8BAA8B,CAAC,GAAGL,MAAmBP,EAAA,CAAe,GACjG,UAAAO,EAAA,CACH;AAAA,QAAO;AAAA,QACOP;AAAA,MAAA,EAAA,CAChB;AAAA,IAAA,GAEJ;AAAA,IAGF,gBAAAc;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKT;AAAA,QACL,WAAWQ,EAAKD,EAAO,WAAW,GAAG;AAAA,UACnC,CAACA,EAAO,WAAW,CAAC,GAAGR;AAAA,UACvB,CAACQ,EAAO,oBAAoB,CAAC,GAAGX;AAAA,QAAA,CACjC;AAAA,QACD,WAAWD,IAAgB,IAAIA,IAAgB;AAAA,QAC/C,SAASU;AAAA,QACT,cAAAR;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@uva-glass/component-library",
   "author": "Team Glass - Frontend vrienden",
   "private": false,
-  "version": "3.53.7",
+  "version": "3.53.9",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -61,8 +61,8 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",
     "@types/jest": "^30.0.0",
-    "@types/node": "^25.0.5",
-    "@types/react": "^19.2.7",
+    "@types/node": "^25.0.6",
+    "@types/react": "^19.2.8",
     "@types/react-dom": "^19.2.3",
     "@uva-glass/eslint-config": "^1.3.11",
     "@uva-glass/stylelint-config": "^1.2.3",
@@ -109,7 +109,7 @@
     "lexical": "^0.39.0"
   },
   "optionalDependencies": {
-    "@ast-grep/napi-linux-x64-gnu": "0.40.4",
+    "@ast-grep/napi-linux-x64-gnu": "0.40.5",
     "@rollup/rollup-linux-x64-gnu": "^4.55.1",
     "@rspack/binding-darwin-arm64": "1.7.1",
     "@rspack/binding-linux-x64-gnu": "1.7.1"