@uva-glass/component-library 3.27.1 → 3.27.2

package/dist/components/SelectListbox/SelectProvider.js

@@ -1,50 +1,41 @@
 import { jsx as m } from "react/jsx-runtime";
-import { createContext as g, useContext as C, useState as c, useRef as L, useId as P, useEffect as V } from "react";
-const a = g({}), E = ({ options: t, defaultValue: l, children: u }) => {
-  const [d, i] = c({ value: "", label: "" }), [v, n] = c(!1), [x, o] = c(-1), f = L(P()), b = () => {
-    n((e) => !e);
-  }, I = (e) => t.find((s) => s.value === e) || {
+import { createContext as g, useContext as p, useState as l, useRef as C, useId as P } from "react";
+const d = g({}), L = ({ options: e, defaultValue: o, children: i }) => {
+  const [c, v] = l({ value: "", label: "" }), [x, s] = l(!1), [f, r] = l(-1), I = C(P()), b = () => {
+    s((t) => !t);
+  }, u = (t) => e.find((n) => n.value === t) || {
     value: -1,
     label: "",
     selectedLabel: "-"
-  }, r = (e) => {
-    const s = t.findIndex((S) => S.value === e.value);
-    o(s), i(e), n(!1);
+  }, a = (t) => {
+    const n = e.findIndex((S) => S.value === t.value);
+    r(n), v(t), s(!1);
   };
-  return V(() => {
-    if (l !== -1) {
-      const e = t.find((s) => s.value === l) || {
-        value: -1,
-        label: "",
-        selectedLabel: "-"
-      };
-      r(e);
-    }
-  }, [l]), /* @__PURE__ */ m(
-    a.Provider,
+  return o !== -1 && !c.value && a(u(o)), /* @__PURE__ */ m(
+    d.Provider,
     {
       value: {
-        options: t,
-        selectedValue: d,
-        setSelectedValue: r,
-        isOpen: v,
-        setIsOpen: n,
+        options: e,
+        selectedValue: c,
+        setSelectedValue: a,
+        isOpen: x,
+        setIsOpen: s,
         toggleListbox: b,
-        getValue: I,
-        activeIndex: x,
-        setActiveIndex: o,
-        listboxId: f.current
+        getValue: u,
+        activeIndex: f,
+        setActiveIndex: r,
+        listboxId: I.current
       },
-      children: u
+      children: i
     }
   );
 }, O = () => {
-  const t = C(a);
-  if (t === void 0) throw new Error("useSelect can only be used in an SelectProvider");
-  return t;
+  const e = p(d);
+  if (e === void 0) throw new Error("useSelect can only be used in an SelectProvider");
+  return e;
 };
 export {
-  E as SelectProvider,
+  L as SelectProvider,
   O as useSelect
 };
 //# sourceMappingURL=SelectProvider.js.map

package/dist/components/SelectListbox/SelectProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectProvider.js","sources":["../../../src/components/SelectListbox/SelectProvider.tsx"],"sourcesContent":["import { createContext, useContext, useState, useId, useRef, useEffect } from 'react';\n\nimport type { PropsWithChildren } from 'react';\n\nexport type SelectValue = string | number | null;\n\nexport type OptionValue = {\n  value: SelectValue;\n  label: string;\n  selectedLabel?: string;\n  disabled?: boolean;\n};\nexport interface SelectListboxContext {\n  options: OptionValue[];\n  selectedValue: OptionValue;\n  setSelectedValue: (v: OptionValue) => void;\n  isOpen: boolean;\n  setIsOpen: (v: boolean) => void;\n  toggleListbox: () => void;\n  getValue: (value: SelectValue) => OptionValue;\n  activeIndex: number;\n  setActiveIndex: (v: number) => void;\n  listboxId: string;\n}\n\nconst SelectContext = createContext<SelectListboxContext>({} as SelectListboxContext);\n\ninterface Props {\n  options: OptionValue[];\n  defaultValue: SelectValue;\n}\n\nexport const SelectProvider = ({ options, defaultValue, children }: PropsWithChildren<Props>) => {\n  const [value, setValue] = useState<OptionValue>({ value: '', label: '' });\n  const [isOpen, setIsOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const listboxId = useRef<string>(useId());\n\n  const toggleListbox = () => {\n    setIsOpen((status) => !status);\n  };\n\n  const getValue = (value: SelectValue) => {\n    return (\n      options.find((option) => option.value === value) || {\n        value: -1,\n        label: '',\n        selectedLabel: '-',\n      }\n    );\n  };\n\n  const setSelectedValue = (value: OptionValue) => {\n    const selectedIndex = options.findIndex((option) => option.value === value.value);\n    setActiveIndex(selectedIndex);\n    setValue(value);\n    setIsOpen(false);\n  };\n\n  useEffect(() => {\n    if (defaultValue !== -1) {\n      const selectedValue = options.find((option) => option.value === defaultValue) || {\n        value: -1,\n        label: '',\n        selectedLabel: '-',\n      };\n      setSelectedValue(selectedValue);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [defaultValue]);\n\n  return (\n    <SelectContext.Provider\n      value={{\n        options,\n        selectedValue: value,\n        setSelectedValue,\n        isOpen,\n        setIsOpen,\n        toggleListbox,\n        getValue,\n        activeIndex,\n        setActiveIndex,\n        listboxId: listboxId.current,\n      }}\n    >\n      {children}\n    </SelectContext.Provider>\n  );\n};\n\nexport const useSelect = () => {\n  const context = useContext(SelectContext);\n\n  if (context === undefined) throw new Error('useSelect can only be used in an SelectProvider');\n\n  return context;\n};\n"],"names":["SelectContext","createContext","SelectProvider","options","defaultValue","children","value","setValue","useState","isOpen","setIsOpen","activeIndex","setActiveIndex","listboxId","useRef","useId","toggleListbox","status","getValue","option","setSelectedValue","selectedIndex","useEffect","selectedValue","jsx","useSelect","context","useContext"],"mappings":";;AAyBA,MAAMA,IAAgBC,EAAoC,EAA0B,GAOvEC,IAAiB,CAAC,EAAE,SAAAC,GAAS,cAAAC,GAAc,UAAAC,QAAyC;AACzF,QAAA,CAACC,GAAOC,CAAQ,IAAIC,EAAsB,EAAE,OAAO,IAAI,OAAO,IAAI,GAClE,CAACC,GAAQC,CAAS,IAAIF,EAAS,EAAK,GACpC,CAACG,GAAaC,CAAc,IAAIJ,EAAS,EAAE,GAC3CK,IAAYC,EAAeC,GAAO,GAElCC,IAAgB,MAAM;AAChB,IAAAN,EAAA,CAACO,MAAW,CAACA,CAAM;AAAA,EAC/B,GAEMC,IAAW,CAACZ,MAEdH,EAAQ,KAAK,CAACgB,MAAWA,EAAO,UAAUb,CAAK,KAAK;AAAA,IAClD,OAAO;AAAA,IACP,OAAO;AAAA,IACP,eAAe;AAAA,EACjB,GAIEc,IAAmB,CAACd,MAAuB;AACzC,UAAAe,IAAgBlB,EAAQ,UAAU,CAACgB,MAAWA,EAAO,UAAUb,EAAM,KAAK;AAChF,IAAAM,EAAeS,CAAa,GAC5Bd,EAASD,CAAK,GACdI,EAAU,EAAK;AAAA,EACjB;AAEA,SAAAY,EAAU,MAAM;AACd,QAAIlB,MAAiB,IAAI;AACjB,YAAAmB,IAAgBpB,EAAQ,KAAK,CAACgB,MAAWA,EAAO,UAAUf,CAAY,KAAK;AAAA,QAC/E,OAAO;AAAA,QACP,OAAO;AAAA,QACP,eAAe;AAAA,MACjB;AACA,MAAAgB,EAAiBG,CAAa;AAAA,IAAA;AAAA,EAChC,GAEC,CAACnB,CAAY,CAAC,GAGf,gBAAAoB;AAAA,IAACxB,EAAc;AAAA,IAAd;AAAA,MACC,OAAO;AAAA,QACL,SAAAG;AAAA,QACA,eAAeG;AAAA,QACf,kBAAAc;AAAA,QACA,QAAAX;AAAA,QACA,WAAAC;AAAA,QACA,eAAAM;AAAA,QACA,UAAAE;AAAA,QACA,aAAAP;AAAA,QACA,gBAAAC;AAAA,QACA,WAAWC,EAAU;AAAA,MACvB;AAAA,MAEC,UAAAR;AAAA,IAAA;AAAA,EACH;AAEJ,GAEaoB,IAAY,MAAM;AACvB,QAAAC,IAAUC,EAAW3B,CAAa;AAExC,MAAI0B,MAAY,OAAiB,OAAA,IAAI,MAAM,iDAAiD;AAErF,SAAAA;AACT;"}
+{"version":3,"file":"SelectProvider.js","sources":["../../../src/components/SelectListbox/SelectProvider.tsx"],"sourcesContent":["import { createContext, useContext, useState, useId, useRef } from 'react';\n\nimport type { PropsWithChildren } from 'react';\n\nexport type SelectValue = string | number | null;\n\nexport type OptionValue = {\n  value: SelectValue;\n  label: string;\n  selectedLabel?: string;\n  disabled?: boolean;\n};\nexport interface SelectListboxContext {\n  options: OptionValue[];\n  selectedValue: OptionValue;\n  setSelectedValue: (v: OptionValue) => void;\n  isOpen: boolean;\n  setIsOpen: (v: boolean) => void;\n  toggleListbox: () => void;\n  getValue: (value: SelectValue) => OptionValue;\n  activeIndex: number;\n  setActiveIndex: (v: number) => void;\n  listboxId: string;\n}\n\nconst SelectContext = createContext<SelectListboxContext>({} as SelectListboxContext);\n\ninterface Props {\n  options: OptionValue[];\n  defaultValue: SelectValue;\n}\n\nexport const SelectProvider = ({ options, defaultValue, children }: PropsWithChildren<Props>) => {\n  const [value, setValue] = useState<OptionValue>({ value: '', label: '' });\n  const [isOpen, setIsOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const listboxId = useRef<string>(useId());\n\n  const toggleListbox = () => {\n    setIsOpen((status) => !status);\n  };\n\n  const getValue = (value: SelectValue) => {\n    return (\n      options.find((option) => option.value === value) || {\n        value: -1,\n        label: '',\n        selectedLabel: '-',\n      }\n    );\n  };\n\n  const setSelectedValue = (value: OptionValue) => {\n    const selectedIndex = options.findIndex((option) => option.value === value.value);\n    setActiveIndex(selectedIndex);\n    setValue(value);\n    setIsOpen(false);\n  };\n\n  if (defaultValue !== -1 && !value.value) {\n    setSelectedValue(getValue(defaultValue));\n  }\n\n  return (\n    <SelectContext.Provider\n      value={{\n        options,\n        selectedValue: value,\n        setSelectedValue,\n        isOpen,\n        setIsOpen,\n        toggleListbox,\n        getValue,\n        activeIndex,\n        setActiveIndex,\n        listboxId: listboxId.current,\n      }}\n    >\n      {children}\n    </SelectContext.Provider>\n  );\n};\n\nexport const useSelect = () => {\n  const context = useContext(SelectContext);\n\n  if (context === undefined) throw new Error('useSelect can only be used in an SelectProvider');\n\n  return context;\n};\n"],"names":["SelectContext","createContext","SelectProvider","options","defaultValue","children","value","setValue","useState","isOpen","setIsOpen","activeIndex","setActiveIndex","listboxId","useRef","useId","toggleListbox","status","getValue","option","setSelectedValue","selectedIndex","jsx","useSelect","context","useContext"],"mappings":";;AAyBA,MAAMA,IAAgBC,EAAoC,EAA0B,GAOvEC,IAAiB,CAAC,EAAE,SAAAC,GAAS,cAAAC,GAAc,UAAAC,QAAyC;AACzF,QAAA,CAACC,GAAOC,CAAQ,IAAIC,EAAsB,EAAE,OAAO,IAAI,OAAO,IAAI,GAClE,CAACC,GAAQC,CAAS,IAAIF,EAAS,EAAK,GACpC,CAACG,GAAaC,CAAc,IAAIJ,EAAS,EAAE,GAC3CK,IAAYC,EAAeC,GAAO,GAElCC,IAAgB,MAAM;AAChB,IAAAN,EAAA,CAACO,MAAW,CAACA,CAAM;AAAA,EAC/B,GAEMC,IAAW,CAACZ,MAEdH,EAAQ,KAAK,CAACgB,MAAWA,EAAO,UAAUb,CAAK,KAAK;AAAA,IAClD,OAAO;AAAA,IACP,OAAO;AAAA,IACP,eAAe;AAAA,EACjB,GAIEc,IAAmB,CAACd,MAAuB;AACzC,UAAAe,IAAgBlB,EAAQ,UAAU,CAACgB,MAAWA,EAAO,UAAUb,EAAM,KAAK;AAChF,IAAAM,EAAeS,CAAa,GAC5Bd,EAASD,CAAK,GACdI,EAAU,EAAK;AAAA,EACjB;AAEA,SAAIN,MAAiB,MAAM,CAACE,EAAM,SACfc,EAAAF,EAASd,CAAY,CAAC,GAIvC,gBAAAkB;AAAA,IAACtB,EAAc;AAAA,IAAd;AAAA,MACC,OAAO;AAAA,QACL,SAAAG;AAAA,QACA,eAAeG;AAAA,QACf,kBAAAc;AAAA,QACA,QAAAX;AAAA,QACA,WAAAC;AAAA,QACA,eAAAM;AAAA,QACA,UAAAE;AAAA,QACA,aAAAP;AAAA,QACA,gBAAAC;AAAA,QACA,WAAWC,EAAU;AAAA,MACvB;AAAA,MAEC,UAAAR;AAAA,IAAA;AAAA,EACH;AAEJ,GAEakB,IAAY,MAAM;AACvB,QAAAC,IAAUC,EAAWzB,CAAa;AAExC,MAAIwB,MAAY,OAAiB,OAAA,IAAI,MAAM,iDAAiD;AAErF,SAAAA;AACT;"}

package/dist/components/TextArea/TextArea.js

@@ -1,23 +1,23 @@
 import { jsxs as _, jsx as n } from "react/jsx-runtime";
-import { useRef as x, useState as d } from "react";
-import { c as i } from "../../clsx-OuTLNxxd.js";
+import { useRef as x, useState as p } from "react";
+import { c as d } from "../../clsx-OuTLNxxd.js";
 import '../../assets/TextArea.css';const r = {
-  "text-area__wrapper": "_text-area__wrapper_13728_1",
-  "text-area__header": "_text-area__header_13728_7",
-  "text-area__label": "_text-area__label_13728_13",
-  "text-area__word-count": "_text-area__word-count_13728_20",
-  "text-area__word-count--alert": "_text-area__word-count--alert_13728_25",
-  "text-area": "_text-area_13728_1"
+  "text-area__wrapper": "_text-area__wrapper_1pu93_1",
+  "text-area__header": "_text-area__header_1pu93_7",
+  "text-area__label": "_text-area__label_1pu93_13",
+  "text-area__word-count": "_text-area__word-count_1pu93_20",
+  "text-area__word-count--alert": "_text-area__word-count--alert_1pu93_25",
+  "text-area": "_text-area_1pu93_1"
 };
-function w({ onChange: c, label: a, maxCharacters: t = 0, defaultValue: l = "" }) {
-  const e = x(null), [o, s] = d(0), u = () => {
-    e.current && (e.current.style.height = "auto", e.current.style.height = `${e.current.scrollHeight}px`, s(e.current.value.length), c(e.current.value.trim()));
+function w({ onChange: u, label: a, maxCharacters: t = 0, defaultValue: c = "" }) {
+  const e = x(null), [o, l] = p(0), s = () => {
+    e.current && (e.current.style.height = "auto", e.current.style.height = `${e.current.scrollHeight}px`, l(e.current.value.length), u(e.current.value.trim()));
   };
   return /* @__PURE__ */ _("div", { className: r["text-area__wrapper"], children: [
     (a || t > 0) && /* @__PURE__ */ _("div", { className: r["text-area__header"], children: [
       a && /* @__PURE__ */ n("span", { className: r["text-area__label"], children: a }),
       t > 0 && /* @__PURE__ */ _("div", { className: r["text-area__word-count"], children: [
-        /* @__PURE__ */ n("span", { className: i({ [r["text-area__word-count--alert"]]: o === t }), children: o }),
+        /* @__PURE__ */ n("span", { className: d({ [r["text-area__word-count--alert"]]: o === t }), children: o }),
         " / ",
         t
       ] })
@@ -28,8 +28,8 @@ function w({ onChange: c, label: a, maxCharacters: t = 0, defaultValue: l = "" }
         ref: e,
         className: r["text-area"],
         maxLength: t > 0 ? t : void 0,
-        onInput: u,
-        defaultValue: l
+        onInput: s,
+        defaultValue: c
       }
     )
   ] });

package/package.json

@@ -2,7 +2,7 @@
   "name": "@uva-glass/component-library",
   "author": "Team Glass - Frontend vrienden",
   "private": false,
-  "version": "3.27.1",
+  "version": "3.27.2",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",