@uva-glass/component-library 3.52.1 → 3.52.3

package/dist/components/TextArea/TextArea.js

@@ -1,28 +1,38 @@
 import { jsxs as r, jsx as _ } from "react/jsx-runtime";
-import { useRef as p, useState as d } from "react";
-import { c as i } from "../../clsx-OuTLNxxd.js";
-import '../../assets/TextArea.css';const e = {
-  "text-area__wrapper": "_text-area__wrapper_1kj5x_1",
-  "text-area__header": "_text-area__header_1kj5x_7",
-  "text-area__label-wrapper": "_text-area__label-wrapper_1kj5x_13",
-  "text-area__label": "_text-area__label_1kj5x_13",
-  "text-area__sub-label": "_text-area__sub-label_1kj5x_25",
-  "text-area__word-count": "_text-area__word-count_1kj5x_30",
-  "text-area__word-count--alert": "_text-area__word-count--alert_1kj5x_35",
-  "text-area": "_text-area_1kj5x_1"
+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"
 };
-function j({ onChange: c, label: l, subLabel: n, maxCharacters: a = 0, defaultValue: x = "" }) {
-  const t = p(null), [s, o] = d(x.length), u = () => {
-    t.current && (t.current.style.height = "auto", t.current.style.height = `${t.current.scrollHeight}px`, o(t.current.value.length), c(t.current.value.trim()));
+function N({
+  onChange: s,
+  label: l,
+  subLabel: u,
+  maxCharacters: a = 0,
+  defaultValue: d = "",
+  required: c = !1,
+  notValid: o = !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()));
   };
   return /* @__PURE__ */ r("div", { className: e["text-area__wrapper"], children: [
     (l || 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: e["text-area__label"], children: l }),
-        n && /* @__PURE__ */ _("span", { className: e["text-area__sub-label"], children: n })
+        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 })
       ] }),
       a > 0 && /* @__PURE__ */ r("div", { className: e["text-area__word-count"], children: [
-        /* @__PURE__ */ _("span", { className: i({ [e["text-area__word-count--alert"]]: s === a }), children: s }),
+        /* @__PURE__ */ _("span", { className: n({ [e["text-area__word-count--alert"]]: i === a }), children: i }),
         " / ",
         a
       ] })
@@ -31,15 +41,15 @@ function j({ onChange: c, label: l, subLabel: n, maxCharacters: a = 0, defaultVa
       "textarea",
       {
         ref: t,
-        className: e["text-area"],
+        className: n(e["text-area"], { [e["not-valid"]]: o }),
         maxLength: a > 0 ? a : void 0,
-        onInput: u,
-        defaultValue: x
+        onInput: p,
+        defaultValue: d
       }
     )
   ] });
 }
 export {
-  j as TextArea
+  N 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}\n\nexport function TextArea({ onChange, label, subLabel, maxCharacters = 0, defaultValue = '' }: 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 && <span className={styles['text-area__label']}>{label}</span>}\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={styles['text-area']}\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","textAreaRef","useRef","characterCount","setCharacterCount","useState","handleInput","jsxs","styles","jsx","clsx"],"mappings":";;;;;;;;;;;;;AAkBO,SAASA,EAAS,EAAE,UAAAC,GAAU,OAAAC,GAAO,UAAAC,GAAU,eAAAC,IAAgB,GAAG,cAAAC,IAAe,MAAqB;AAC3G,QAAMC,IAAcC,EAA4B,IAAI,GAC9C,CAACC,GAAgBC,CAAiB,IAAIC,EAASL,EAAa,MAAM,GAElEM,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,GAClDL,EAASK,EAAY,QAAQ,MAAM,KAAA,CAAM;AAAA,EAE7C;AAEA,SACE,gBAAAM,EAAC,OAAA,EAAI,WAAWC,EAAO,oBAAoB,GACvC,UAAA;AAAA,KAAAX,KAASE,IAAgB,MACzB,gBAAAQ,EAAC,SAAI,WAAWC,EAAO,mBAAmB,GACxC,UAAA;AAAA,MAAA,gBAAAD,EAAC,QAAA,EAAK,WAAWC,EAAO,0BAA0B,GAC/C,UAAA;AAAA,QAAAX,uBAAU,QAAA,EAAK,WAAWW,EAAO,kBAAkB,GAAI,UAAAX,GAAM;AAAA,QAC7DC,KAAY,gBAAAW,EAAC,QAAA,EAAK,WAAWD,EAAO,sBAAsB,GAAI,UAAAV,EAAA,CAAS;AAAA,MAAA,GAC1E;AAAA,MACCC,IAAgB,KACf,gBAAAQ,EAAC,SAAI,WAAWC,EAAO,uBAAuB,GAC5C,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAA,EAAK,WAAWC,EAAK,EAAE,CAACF,EAAO,8BAA8B,CAAC,GAAGL,MAAmBJ,EAAA,CAAe,GACjG,UAAAI,EAAA,CACH;AAAA,QAAO;AAAA,QACOJ;AAAA,MAAA,EAAA,CAChB;AAAA,IAAA,GAEJ;AAAA,IAGF,gBAAAU;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKR;AAAA,QACL,WAAWO,EAAO,WAAW;AAAA,QAC7B,WAAWT,IAAgB,IAAIA,IAAgB;AAAA,QAC/C,SAASO;AAAA,QACT,cAAAN;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 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;"}

package/dist/components/TextArea/TextArea.stories.js

@@ -1,5 +1,5 @@
 import { jsx as r } from "react/jsx-runtime";
-import { l as a } from "../../index-DvUwfXNb.js";
+import { l as a } from "../../index-BJRrLdmi.js";
 import { TextArea as e } from "./TextArea.js";
 const o = `
   <TextArea label={label} maxCharacters={maxCharacters} defaultValue={string}/> `, x = {

package/dist/components/TextArea/TextArea.test.js

@@ -1,7 +1,7 @@
 import { jsx as a } from "react/jsx-runtime";
 import "../../index-DYPpFe2R.js";
 import { r as o, s as t, f as r } from "../../react.esm-DdELhthz.js";
-import { J as c } from "../../index-DvUwfXNb.js";
+import { J as c } from "../../index-BJRrLdmi.js";
 import { TextArea as n } from "./TextArea.js";
 describe("TextArea", () => {
   it("should render correctly with label", () => {

package/dist/components/ToggleSwitch/ToggleSwitch.stories.js

@@ -1,5 +1,5 @@
 import { jsx as o } from "react/jsx-runtime";
-import { l } from "../../index-DvUwfXNb.js";
+import { l } from "../../index-BJRrLdmi.js";
 import { ToggleSwitch as e } from "./ToggleSwitch.js";
 const a = `
 // Has all InputHTMLAttributes props available except "className" and "style" 

package/dist/components/VarIndicator/VarIndicator.stories.js

@@ -1,5 +1,5 @@
 import { jsx as r } from "react/jsx-runtime";
-import { l as n } from "../../index-DvUwfXNb.js";
+import { l as n } from "../../index-BJRrLdmi.js";
 import { VarIndicator as t } from "./VarIndicator.js";
 const o = {
   DRAFT: "Concept",