@uva-glass/component-library 3.39.0 → 3.39.1

package/dist/components/SelectListbox/components/SelectButton.js

@@ -1,52 +1,61 @@
-import { jsx as i, jsxs as C } from "react/jsx-runtime";
-import { c as p } from "../../../clsx-OuTLNxxd.js";
-import { forwardRef as E, useRef as f, useEffect as a } from "react";
-import { s as e } from "../../../SelectListbox.module-yzXaWwsm.js";
-import { Icon as L } from "../../Icon/Icon.js";
-import { useSelect as N } from "../SelectProvider.js";
-const O = E((g, c) => {
-  const { variant: u, size: d = "default", onChange: s, buttonLabelProp: x = "label", buttonLabelBold: m, disabled: h = !1 } = g, o = f(null), l = f(!0), { listboxId: w, isOpen: t, selectedValue: r, toggleListbox: y, setIsOpen: b, setActiveIndex: I, options: k } = N() || {}, v = (n) => {
-    switch (n.key) {
+import { jsx as c, jsxs as K } from "react/jsx-runtime";
+import { c as m } from "../../../clsx-OuTLNxxd.js";
+import { forwardRef as N, useRef as h, useEffect as u } from "react";
+import { s as t } from "../../../SelectListbox.module-yzXaWwsm.js";
+import { Icon as R } from "../../Icon/Icon.js";
+import { useSelect as S } from "../SelectProvider.js";
+const O = N((y, b) => {
+  const { variant: f, size: k = "default", onChange: o, buttonLabelProp: w = "label", buttonLabelBold: I, disabled: L = !1 } = y, l = h(null), i = h(!0), { listboxId: C, isOpen: e, selectedValue: s, toggleListbox: D, setIsOpen: n, setActiveIndex: p, options: d } = S() || {}, E = (r) => {
+    if (r.key.length === 1) {
+      const a = r.key.toLocaleLowerCase(), g = d.findIndex(
+        (x) => !x.disabled && x.label.toLocaleLowerCase().startsWith(a)
+      );
+      if (g !== -1) {
+        p(g), e || n(!0), r.preventDefault();
+        return;
+      }
+    }
+    switch (r.key) {
       case "Enter":
-        if (n.preventDefault(), !t) {
-          b(!0);
+        if (r.preventDefault(), !e) {
+          n(!0);
           return;
         }
         break;
       case "Escape":
-        t && (n.stopPropagation(), I(k.findIndex((D) => D.value === r?.value)), b(!1));
+        e && (r.stopPropagation(), p(d.findIndex((a) => a.value === s?.value)), n(!1));
         break;
     }
   };
-  return a(() => {
-    t ? (o.current?.children[0]).blur() : !l.current && (o.current?.children[0]).focus();
-  }, [t]), a(() => (l.current = !1, () => {
-    l.current = !0;
-  }), []), a(() => {
-    s && s(r);
-  }, [s, r]), /* @__PURE__ */ i("span", { ref: o, children: /* @__PURE__ */ C(
+  return u(() => {
+    e ? (l.current?.children[0]).blur() : !i.current && (l.current?.children[0]).focus();
+  }, [e]), u(() => (i.current = !1, () => {
+    i.current = !0;
+  }), []), u(() => {
+    o && o(s);
+  }, [o, s]), /* @__PURE__ */ c("span", { ref: l, children: /* @__PURE__ */ K(
     "button",
     {
-      className: p(e["select-listbox-trigger"], e[`select-listbox-trigger--${d}`], {
-        [e[`select-listbox-trigger--${u}`]]: u,
-        [e["select-listbox-trigger--bold"]]: m
+      className: m(t["select-listbox-trigger"], t[`select-listbox-trigger--${k}`], {
+        [t[`select-listbox-trigger--${f}`]]: f,
+        [t["select-listbox-trigger--bold"]]: I
       }),
       type: "button",
-      onClick: y,
-      onKeyDown: v,
-      "aria-expanded": t,
+      onClick: D,
+      onKeyDown: E,
+      "aria-expanded": e,
       "aria-haspopup": "listbox",
-      "aria-label": `${r.label}`,
-      disabled: h,
-      "aria-controls": w,
-      ...c && { ref: c },
+      "aria-label": `${s.label}`,
+      disabled: L,
+      "aria-controls": C,
+      ...b && { ref: b },
       children: [
-        /* @__PURE__ */ i("span", { className: e["select-listbox-trigger-label"], children: r[x] }),
-        /* @__PURE__ */ i(
-          L,
+        /* @__PURE__ */ c("span", { className: t["select-listbox-trigger-label"], children: s[w] }),
+        /* @__PURE__ */ c(
+          R,
           {
-            className: p(e["select-listbox-trigger-icon"], {
-              [e["select-listbox-trigger-icon--open"]]: t
+            className: m(t["select-listbox-trigger-icon"], {
+              [t["select-listbox-trigger-icon--open"]]: e
             }),
             name: "CheveronDown",
             size: 16

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

@@ -1 +1 @@
-{"version":3,"file":"SelectButton.js","sources":["../../../../src/components/SelectListbox/components/SelectButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef, forwardRef } from 'react';\n\nimport type { KeyboardEvent } from 'react';\nimport type { OptionValue, SelectValue } from 'components/SelectListbox/SelectProvider';\n\nimport styles from 'components/SelectListbox/SelectListbox.module.css';\nimport { Icon } from 'components/Icon';\nimport { useSelect } from 'components/SelectListbox/SelectProvider';\n\nexport interface SelectButtonProps {\n  variant?: 'noborder' | 'pill' | 'pillLeft' | 'pillRight' | 'darkBorder';\n  size?: 'small' | 'medium' | 'default';\n  onChange?: (option: OptionValue) => void;\n  buttonLabelProp?: string;\n  buttonLabelBold?: boolean;\n  disabled?: boolean;\n}\n\nexport const SelectButton = forwardRef<HTMLButtonElement, SelectButtonProps>((props, ref) => {\n  const { variant, size = 'default', onChange, buttonLabelProp = 'label', buttonLabelBold, disabled = false } = props;\n  const buttonWrapper = useRef<HTMLSpanElement>(null);\n  const isFirstRender = useRef(true);\n  const { listboxId, isOpen, selectedValue, toggleListbox, setIsOpen, setActiveIndex, options } = useSelect() || {};\n\n  const onTriggerKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    switch (event.key) {\n      case 'Enter':\n        event.preventDefault();\n        if (!isOpen) {\n          setIsOpen(true);\n          return;\n        }\n        break;\n      case 'Escape':\n        if (isOpen) {\n          event.stopPropagation();\n          setActiveIndex(options.findIndex((option) => option.value === selectedValue?.value));\n          setIsOpen(false);\n        }\n        break;\n    }\n  };\n\n  useEffect(() => {\n    isOpen\n      ? (buttonWrapper.current?.children[0] as HTMLButtonElement).blur()\n      : !isFirstRender.current && (buttonWrapper.current?.children[0] as HTMLButtonElement).focus();\n  }, [isOpen]);\n\n  useEffect(() => {\n    isFirstRender.current = false;\n\n    return () => {\n      isFirstRender.current = true;\n    };\n  }, []);\n\n  useEffect(() => {\n    if (onChange) onChange(selectedValue);\n  }, [onChange, selectedValue]);\n\n  return (\n    <span ref={buttonWrapper}>\n      <button\n        className={clsx(styles['select-listbox-trigger'], styles[`select-listbox-trigger--${size}`], {\n          [styles[`select-listbox-trigger--${variant}`]]: variant,\n          [styles['select-listbox-trigger--bold']]: buttonLabelBold,\n        })}\n        type=\"button\"\n        onClick={toggleListbox}\n        onKeyDown={onTriggerKeyDown}\n        aria-expanded={isOpen}\n        aria-haspopup=\"listbox\"\n        aria-label={`${selectedValue.label}`}\n        disabled={disabled}\n        aria-controls={listboxId}\n        {...(ref && { ref: ref })}\n      >\n        <span className={styles['select-listbox-trigger-label']}>\n          {selectedValue[buttonLabelProp as keyof SelectValue]}\n        </span>\n\n        <Icon\n          className={clsx(styles['select-listbox-trigger-icon'], {\n            [styles['select-listbox-trigger-icon--open']]: isOpen,\n          })}\n          name=\"CheveronDown\"\n          size={16}\n        />\n      </button>\n    </span>\n  );\n});\n"],"names":["SelectButton","forwardRef","props","ref","variant","size","onChange","buttonLabelProp","buttonLabelBold","disabled","buttonWrapper","useRef","isFirstRender","listboxId","isOpen","selectedValue","toggleListbox","setIsOpen","setActiveIndex","options","useSelect","onTriggerKeyDown","event","option","useEffect","jsx","jsxs","clsx","styles","Icon"],"mappings":";;;;;;AAmBO,MAAMA,IAAeC,EAAiD,CAACC,GAAOC,MAAQ;AAC3F,QAAM,EAAE,SAAAC,GAAS,MAAAC,IAAO,WAAW,UAAAC,GAAU,iBAAAC,IAAkB,SAAS,iBAAAC,GAAiB,UAAAC,IAAW,GAAA,IAAUP,GACxGQ,IAAgBC,EAAwB,IAAI,GAC5CC,IAAgBD,EAAO,EAAI,GAC3B,EAAE,WAAAE,GAAW,QAAAC,GAAQ,eAAAC,GAAe,eAAAC,GAAe,WAAAC,GAAW,gBAAAC,GAAgB,SAAAC,EAAA,IAAYC,EAAA,KAAe,CAAA,GAEzGC,IAAmB,CAACC,MAA4C;AACpE,YAAQA,EAAM,KAAA;AAAA,MACZ,KAAK;AAEH,YADAA,EAAM,eAAA,GACF,CAACR,GAAQ;AACX,UAAAG,EAAU,EAAI;AACd;AAAA,QAAA;AAEF;AAAA,MACF,KAAK;AACH,QAAIH,MACFQ,EAAM,gBAAA,GACNJ,EAAeC,EAAQ,UAAU,CAACI,MAAWA,EAAO,UAAUR,GAAe,KAAK,CAAC,GACnFE,EAAU,EAAK;AAEjB;AAAA,IAAA;AAAA,EACJ;AAGF,SAAAO,EAAU,MAAM;AACd,IAAAV,KACKJ,EAAc,SAAS,SAAS,CAAC,GAAwB,KAAA,IAC1D,CAACE,EAAc,YAAYF,EAAc,SAAS,SAAS,CAAC,GAAwB,MAAA;AAAA,EAAM,GAC7F,CAACI,CAAM,CAAC,GAEXU,EAAU,OACRZ,EAAc,UAAU,IAEjB,MAAM;AACX,IAAAA,EAAc,UAAU;AAAA,EAAA,IAEzB,EAAE,GAELY,EAAU,MAAM;AACd,IAAIlB,OAAmBS,CAAa;AAAA,EAAA,GACnC,CAACT,GAAUS,CAAa,CAAC,GAG1B,gBAAAU,EAAC,QAAA,EAAK,KAAKf,GACT,UAAA,gBAAAgB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,wBAAwB,GAAGA,EAAO,2BAA2BvB,CAAI,EAAE,GAAG;AAAA,QAC3F,CAACuB,EAAO,2BAA2BxB,CAAO,EAAE,CAAC,GAAGA;AAAA,QAChD,CAACwB,EAAO,8BAA8B,CAAC,GAAGpB;AAAA,MAAA,CAC3C;AAAA,MACD,MAAK;AAAA,MACL,SAASQ;AAAA,MACT,WAAWK;AAAA,MACX,iBAAeP;AAAA,MACf,iBAAc;AAAA,MACd,cAAY,GAAGC,EAAc,KAAK;AAAA,MAClC,UAAAN;AAAA,MACA,iBAAeI;AAAA,MACd,GAAIV,KAAO,EAAE,KAAAA,EAAA;AAAA,MAEd,UAAA;AAAA,QAAA,gBAAAsB,EAAC,UAAK,WAAWG,EAAO,8BAA8B,GACnD,UAAAb,EAAcR,CAAoC,GACrD;AAAA,QAEA,gBAAAkB;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,WAAWF,EAAKC,EAAO,6BAA6B,GAAG;AAAA,cACrD,CAACA,EAAO,mCAAmC,CAAC,GAAGd;AAAA,YAAA,CAChD;AAAA,YACD,MAAK;AAAA,YACL,MAAM;AAAA,UAAA;AAAA,QAAA;AAAA,MACR;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ,CAAC;"}
+{"version":3,"file":"SelectButton.js","sources":["../../../../src/components/SelectListbox/components/SelectButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef, forwardRef } from 'react';\n\nimport type { KeyboardEvent } from 'react';\nimport type { OptionValue, SelectValue } from 'components/SelectListbox/SelectProvider';\n\nimport styles from 'components/SelectListbox/SelectListbox.module.css';\nimport { Icon } from 'components/Icon';\nimport { useSelect } from 'components/SelectListbox/SelectProvider';\n\nexport interface SelectButtonProps {\n  variant?: 'noborder' | 'pill' | 'pillLeft' | 'pillRight' | 'darkBorder';\n  size?: 'small' | 'medium' | 'default';\n  onChange?: (option: OptionValue) => void;\n  buttonLabelProp?: string;\n  buttonLabelBold?: boolean;\n  disabled?: boolean;\n}\n\nexport const SelectButton = forwardRef<HTMLButtonElement, SelectButtonProps>((props, ref) => {\n  const { variant, size = 'default', onChange, buttonLabelProp = 'label', buttonLabelBold, disabled = false } = props;\n  const buttonWrapper = useRef<HTMLSpanElement>(null);\n  const isFirstRender = useRef(true);\n  const { listboxId, isOpen, selectedValue, toggleListbox, setIsOpen, setActiveIndex, options } = useSelect() || {};\n\n  const onTriggerKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (event.key.length === 1) {\n      const key = event.key.toLocaleLowerCase();\n      const optionIndexStartsWithKey = options.findIndex(\n        (option) => !option.disabled && option.label.toLocaleLowerCase().startsWith(key)\n      );\n      if (optionIndexStartsWithKey !== -1) {\n        setActiveIndex(optionIndexStartsWithKey);\n        if (!isOpen) setIsOpen(true);\n        event.preventDefault();\n        return;\n      }\n    }\n\n    switch (event.key) {\n      case 'Enter':\n        event.preventDefault();\n        if (!isOpen) {\n          setIsOpen(true);\n          return;\n        }\n        break;\n      case 'Escape':\n        if (isOpen) {\n          event.stopPropagation();\n          setActiveIndex(options.findIndex((option) => option.value === selectedValue?.value));\n          setIsOpen(false);\n        }\n        break;\n    }\n  };\n\n  useEffect(() => {\n    isOpen\n      ? (buttonWrapper.current?.children[0] as HTMLButtonElement).blur()\n      : !isFirstRender.current && (buttonWrapper.current?.children[0] as HTMLButtonElement).focus();\n  }, [isOpen]);\n\n  useEffect(() => {\n    isFirstRender.current = false;\n\n    return () => {\n      isFirstRender.current = true;\n    };\n  }, []);\n\n  useEffect(() => {\n    if (onChange) onChange(selectedValue);\n  }, [onChange, selectedValue]);\n\n  return (\n    <span ref={buttonWrapper}>\n      <button\n        className={clsx(styles['select-listbox-trigger'], styles[`select-listbox-trigger--${size}`], {\n          [styles[`select-listbox-trigger--${variant}`]]: variant,\n          [styles['select-listbox-trigger--bold']]: buttonLabelBold,\n        })}\n        type=\"button\"\n        onClick={toggleListbox}\n        onKeyDown={onTriggerKeyDown}\n        aria-expanded={isOpen}\n        aria-haspopup=\"listbox\"\n        aria-label={`${selectedValue.label}`}\n        disabled={disabled}\n        aria-controls={listboxId}\n        {...(ref && { ref: ref })}\n      >\n        <span className={styles['select-listbox-trigger-label']}>\n          {selectedValue[buttonLabelProp as keyof SelectValue]}\n        </span>\n\n        <Icon\n          className={clsx(styles['select-listbox-trigger-icon'], {\n            [styles['select-listbox-trigger-icon--open']]: isOpen,\n          })}\n          name=\"CheveronDown\"\n          size={16}\n        />\n      </button>\n    </span>\n  );\n});\n"],"names":["SelectButton","forwardRef","props","ref","variant","size","onChange","buttonLabelProp","buttonLabelBold","disabled","buttonWrapper","useRef","isFirstRender","listboxId","isOpen","selectedValue","toggleListbox","setIsOpen","setActiveIndex","options","useSelect","onTriggerKeyDown","event","key","optionIndexStartsWithKey","option","useEffect","jsx","jsxs","clsx","styles","Icon"],"mappings":";;;;;;AAmBO,MAAMA,IAAeC,EAAiD,CAACC,GAAOC,MAAQ;AAC3F,QAAM,EAAE,SAAAC,GAAS,MAAAC,IAAO,WAAW,UAAAC,GAAU,iBAAAC,IAAkB,SAAS,iBAAAC,GAAiB,UAAAC,IAAW,GAAA,IAAUP,GACxGQ,IAAgBC,EAAwB,IAAI,GAC5CC,IAAgBD,EAAO,EAAI,GAC3B,EAAE,WAAAE,GAAW,QAAAC,GAAQ,eAAAC,GAAe,eAAAC,GAAe,WAAAC,GAAW,gBAAAC,GAAgB,SAAAC,EAAA,IAAYC,EAAA,KAAe,CAAA,GAEzGC,IAAmB,CAACC,MAA4C;AACpE,QAAIA,EAAM,IAAI,WAAW,GAAG;AAC1B,YAAMC,IAAMD,EAAM,IAAI,kBAAA,GAChBE,IAA2BL,EAAQ;AAAA,QACvC,CAACM,MAAW,CAACA,EAAO,YAAYA,EAAO,MAAM,oBAAoB,WAAWF,CAAG;AAAA,MAAA;AAEjF,UAAIC,MAA6B,IAAI;AACnC,QAAAN,EAAeM,CAAwB,GAClCV,KAAQG,EAAU,EAAI,GAC3BK,EAAM,eAAA;AACN;AAAA,MAAA;AAAA,IACF;AAGF,YAAQA,EAAM,KAAA;AAAA,MACZ,KAAK;AAEH,YADAA,EAAM,eAAA,GACF,CAACR,GAAQ;AACX,UAAAG,EAAU,EAAI;AACd;AAAA,QAAA;AAEF;AAAA,MACF,KAAK;AACH,QAAIH,MACFQ,EAAM,gBAAA,GACNJ,EAAeC,EAAQ,UAAU,CAACM,MAAWA,EAAO,UAAUV,GAAe,KAAK,CAAC,GACnFE,EAAU,EAAK;AAEjB;AAAA,IAAA;AAAA,EACJ;AAGF,SAAAS,EAAU,MAAM;AACd,IAAAZ,KACKJ,EAAc,SAAS,SAAS,CAAC,GAAwB,KAAA,IAC1D,CAACE,EAAc,YAAYF,EAAc,SAAS,SAAS,CAAC,GAAwB,MAAA;AAAA,EAAM,GAC7F,CAACI,CAAM,CAAC,GAEXY,EAAU,OACRd,EAAc,UAAU,IAEjB,MAAM;AACX,IAAAA,EAAc,UAAU;AAAA,EAAA,IAEzB,EAAE,GAELc,EAAU,MAAM;AACd,IAAIpB,OAAmBS,CAAa;AAAA,EAAA,GACnC,CAACT,GAAUS,CAAa,CAAC,GAG1B,gBAAAY,EAAC,QAAA,EAAK,KAAKjB,GACT,UAAA,gBAAAkB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,wBAAwB,GAAGA,EAAO,2BAA2BzB,CAAI,EAAE,GAAG;AAAA,QAC3F,CAACyB,EAAO,2BAA2B1B,CAAO,EAAE,CAAC,GAAGA;AAAA,QAChD,CAAC0B,EAAO,8BAA8B,CAAC,GAAGtB;AAAA,MAAA,CAC3C;AAAA,MACD,MAAK;AAAA,MACL,SAASQ;AAAA,MACT,WAAWK;AAAA,MACX,iBAAeP;AAAA,MACf,iBAAc;AAAA,MACd,cAAY,GAAGC,EAAc,KAAK;AAAA,MAClC,UAAAN;AAAA,MACA,iBAAeI;AAAA,MACd,GAAIV,KAAO,EAAE,KAAAA,EAAA;AAAA,MAEd,UAAA;AAAA,QAAA,gBAAAwB,EAAC,UAAK,WAAWG,EAAO,8BAA8B,GACnD,UAAAf,EAAcR,CAAoC,GACrD;AAAA,QAEA,gBAAAoB;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,WAAWF,EAAKC,EAAO,6BAA6B,GAAG;AAAA,cACrD,CAACA,EAAO,mCAAmC,CAAC,GAAGhB;AAAA,YAAA,CAChD;AAAA,YACD,MAAK;AAAA,YACL,MAAM;AAAA,UAAA;AAAA,QAAA;AAAA,MACR;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ,CAAC;"}

package/dist/components/SelectListbox/components/SelectOption.js

@@ -1,58 +1,67 @@
-import { jsxs as k, Fragment as D, jsx as b } from "react/jsx-runtime";
-import { c as h } from "../../../clsx-OuTLNxxd.js";
-import { useRef as y, useEffect as m } from "react";
-import { useSelect as O } from "../SelectProvider.js";
+import { jsxs as v, Fragment as x, jsx as m } from "react/jsx-runtime";
+import { c as I } from "../../../clsx-OuTLNxxd.js";
+import { useRef as O, useEffect as k } from "react";
+import { useSelect as g } from "../SelectProvider.js";
 import { s as c } from "../../../SelectListbox.module-yzXaWwsm.js";
-const E = ({ option: l, index: t, dividerAfter: u, children: d }) => {
-  const i = y(null), { isOpen: a, activeIndex: e, setActiveIndex: r, selectedValue: n, setSelectedValue: p, setIsOpen: f, options: o } = O(), v = (s) => {
-    p(o[s]), f(!1);
-  }, w = (s) => {
-    switch (s.key) {
+const K = ({ option: a, index: s, dividerAfter: u, children: w }) => {
+  const i = O(null), { isOpen: l, activeIndex: t, setActiveIndex: r, selectedValue: n, setSelectedValue: p, setIsOpen: f, options: o } = g(), y = (e) => {
+    p(o[e]), f(!1);
+  }, h = (e) => {
+    if (e.key.length === 1) {
+      const D = e.key.toLocaleLowerCase(), d = o.findIndex(
+        (b) => !b.disabled && b.label.toLocaleLowerCase().startsWith(D)
+      );
+      if (d !== -1) {
+        r(d), e.preventDefault();
+        return;
+      }
+    }
+    switch (e.key) {
       case "Tab":
-        s.preventDefault(), a && f(!1);
+        e.preventDefault(), l && f(!1);
         break;
       case "ArrowDown":
       case "ArrowUp":
-        if (s.preventDefault(), !a)
+        if (e.preventDefault(), !l)
           return;
-        s.key === "ArrowDown" && e < o.length - 1 && r(e + 1), s.key === "ArrowUp" && e > 0 && r(e - 1);
+        e.key === "ArrowDown" && t < o.length - 1 && r(t + 1), e.key === "ArrowUp" && t > 0 && r(t - 1);
         break;
       case "Enter":
-        s.preventDefault(), o?.length && e > -1 && !o[e].disabled && v(e);
+        e.preventDefault(), o?.length && t > -1 && !o[t].disabled && y(t);
         break;
       case "Escape":
-        a && (s.stopPropagation(), f(!1));
+        l && (e.stopPropagation(), f(!1));
         break;
     }
   };
-  return m(() => {
-    t === e && (a ? i.current?.focus() : i.current?.blur());
-  }, [e, t, a]), m(() => {
-    n.value === l.value && r(t);
-  }, [t, l.value, n.value, r]), /* @__PURE__ */ k(D, { children: [
-    /* @__PURE__ */ b(
+  return k(() => {
+    s === t && (l ? i.current?.focus() : i.current?.blur());
+  }, [t, s, l]), k(() => {
+    n.value === a.value && r(s);
+  }, [s, a.value, n.value, r]), /* @__PURE__ */ v(x, { children: [
+    /* @__PURE__ */ m(
       "li",
       {
-        className: h(c["select-listbox-option"], {
-          [c["select-listbox-option--active"]]: t === e,
-          [c["select-listbox-option--divider"]]: t + 1 === u
+        className: I(c["select-listbox-option"], {
+          [c["select-listbox-option--active"]]: s === t,
+          [c["select-listbox-option--divider"]]: s + 1 === u
         }),
-        ...!l.disabled && {
-          onClick: () => p(l),
-          onKeyDown: w,
+        ...!a.disabled && {
+          onClick: () => p(a),
+          onKeyDown: h,
           tabIndex: 0,
           role: "option",
-          "aria-selected": n.value === l.value
+          "aria-selected": n.value === a.value
         },
         ref: i,
-        children: d
+        children: w
       },
-      `${l.value}`
+      `${a.value}`
     ),
-    t + 1 === u && /* @__PURE__ */ b("div", { className: c["select-listbox-divider"], "aria-hidden": "true" })
+    s + 1 === u && /* @__PURE__ */ m("div", { className: c["select-listbox-divider"], "aria-hidden": "true" })
   ] });
 };
 export {
-  E as SelectOption
+  K as SelectOption
 };
 //# sourceMappingURL=SelectOption.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SelectOption.js","sources":["../../../../src/components/SelectListbox/components/SelectOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\n\nimport type { KeyboardEvent, ReactNode } from 'react';\nimport type { OptionValue } from 'components/SelectListbox/SelectProvider';\n\nimport { useSelect } from 'components/SelectListbox/SelectProvider';\nimport styles from 'components/SelectListbox/SelectListbox.module.css';\n\nexport interface SelectOptionProps {\n  option: OptionValue;\n  index: number;\n  key: string | number;\n  dividerAfter?: number;\n  children: ReactNode;\n}\n\nexport const SelectOption = ({ option, index, dividerAfter, children }: SelectOptionProps) => {\n  const selectOptionRef = useRef<HTMLLIElement>(null);\n  const { isOpen, activeIndex, setActiveIndex, selectedValue, setSelectedValue, setIsOpen, options } = useSelect();\n\n  const handleSelectOption = (aIndex: number) => {\n    setSelectedValue(options[aIndex]);\n    setIsOpen(false);\n  };\n\n  const onOptionKeyDown = (event: KeyboardEvent<HTMLLIElement>) => {\n    switch (event.key) {\n      case 'Tab':\n        event.preventDefault();\n        if (isOpen) {\n          setIsOpen(false);\n        }\n        break;\n      case 'ArrowDown':\n      case 'ArrowUp':\n        event.preventDefault();\n        if (!isOpen) {\n          return;\n        }\n        if (event.key === 'ArrowDown' && activeIndex < options.length - 1) {\n          setActiveIndex(activeIndex + 1);\n        }\n        if (event.key === 'ArrowUp' && activeIndex > 0) {\n          setActiveIndex(activeIndex - 1);\n        }\n        break;\n      case 'Enter':\n        event.preventDefault();\n        if (options?.length && activeIndex > -1 && !options[activeIndex].disabled) {\n          handleSelectOption(activeIndex);\n        }\n        break;\n      case 'Escape':\n        if (isOpen) {\n          event.stopPropagation();\n          setIsOpen(false);\n        }\n        break;\n    }\n  };\n\n  useEffect(() => {\n    if (index === activeIndex) {\n      isOpen ? selectOptionRef.current?.focus() : selectOptionRef.current?.blur();\n    }\n  }, [activeIndex, index, isOpen]);\n\n  useEffect(() => {\n    if (selectedValue.value === option.value) {\n      setActiveIndex(index);\n    }\n  }, [index, option.value, selectedValue.value, setActiveIndex]);\n\n  return (\n    <>\n      <li\n        className={clsx(styles['select-listbox-option'], {\n          [styles['select-listbox-option--active']]: index === activeIndex,\n          [styles['select-listbox-option--divider']]: index + 1 === dividerAfter,\n        })}\n        key={`${option.value}`}\n        {...(!option.disabled && {\n          onClick: () => setSelectedValue(option),\n          onKeyDown: onOptionKeyDown,\n          tabIndex: 0,\n          role: 'option',\n          'aria-selected': selectedValue.value === option.value,\n        })}\n        ref={selectOptionRef}\n      >\n        {children}\n      </li>\n      {index + 1 === dividerAfter && <div className={styles['select-listbox-divider']} aria-hidden=\"true\" />}\n    </>\n  );\n};\n"],"names":["SelectOption","option","index","dividerAfter","children","selectOptionRef","useRef","isOpen","activeIndex","setActiveIndex","selectedValue","setSelectedValue","setIsOpen","options","useSelect","handleSelectOption","aIndex","onOptionKeyDown","event","useEffect","jsxs","Fragment","jsx","clsx","styles"],"mappings":";;;;;AAiBO,MAAMA,IAAe,CAAC,EAAE,QAAAC,GAAQ,OAAAC,GAAO,cAAAC,GAAc,UAAAC,QAAkC;AAC5F,QAAMC,IAAkBC,EAAsB,IAAI,GAC5C,EAAE,QAAAC,GAAQ,aAAAC,GAAa,gBAAAC,GAAgB,eAAAC,GAAe,kBAAAC,GAAkB,WAAAC,GAAW,SAAAC,EAAA,IAAYC,EAAA,GAE/FC,IAAqB,CAACC,MAAmB;AAC7C,IAAAL,EAAiBE,EAAQG,CAAM,CAAC,GAChCJ,EAAU,EAAK;AAAA,EAAA,GAGXK,IAAkB,CAACC,MAAwC;AAC/D,YAAQA,EAAM,KAAA;AAAA,MACZ,KAAK;AACH,QAAAA,EAAM,eAAA,GACFX,KACFK,EAAU,EAAK;AAEjB;AAAA,MACF,KAAK;AAAA,MACL,KAAK;AAEH,YADAM,EAAM,eAAA,GACF,CAACX;AACH;AAEF,QAAIW,EAAM,QAAQ,eAAeV,IAAcK,EAAQ,SAAS,KAC9DJ,EAAeD,IAAc,CAAC,GAE5BU,EAAM,QAAQ,aAAaV,IAAc,KAC3CC,EAAeD,IAAc,CAAC;AAEhC;AAAA,MACF,KAAK;AACH,QAAAU,EAAM,eAAA,GACFL,GAAS,UAAUL,IAAc,MAAM,CAACK,EAAQL,CAAW,EAAE,YAC/DO,EAAmBP,CAAW;AAEhC;AAAA,MACF,KAAK;AACH,QAAID,MACFW,EAAM,gBAAA,GACNN,EAAU,EAAK;AAEjB;AAAA,IAAA;AAAA,EACJ;AAGF,SAAAO,EAAU,MAAM;AACd,IAAIjB,MAAUM,MACZD,IAASF,EAAgB,SAAS,MAAA,IAAUA,EAAgB,SAAS,KAAA;AAAA,EACvE,GACC,CAACG,GAAaN,GAAOK,CAAM,CAAC,GAE/BY,EAAU,MAAM;AACd,IAAIT,EAAc,UAAUT,EAAO,SACjCQ,EAAeP,CAAK;AAAA,EACtB,GACC,CAACA,GAAOD,EAAO,OAAOS,EAAc,OAAOD,CAAc,CAAC,GAG3D,gBAAAW,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC,EAAKC,EAAO,uBAAuB,GAAG;AAAA,UAC/C,CAACA,EAAO,+BAA+B,CAAC,GAAGtB,MAAUM;AAAA,UACrD,CAACgB,EAAO,gCAAgC,CAAC,GAAGtB,IAAQ,MAAMC;AAAA,QAAA,CAC3D;AAAA,QAEA,GAAI,CAACF,EAAO,YAAY;AAAA,UACvB,SAAS,MAAMU,EAAiBV,CAAM;AAAA,UACtC,WAAWgB;AAAA,UACX,UAAU;AAAA,UACV,MAAM;AAAA,UACN,iBAAiBP,EAAc,UAAUT,EAAO;AAAA,QAAA;AAAA,QAElD,KAAKI;AAAA,QAEJ,UAAAD;AAAA,MAAA;AAAA,MAVI,GAAGH,EAAO,KAAK;AAAA,IAAA;AAAA,IAYrBC,IAAQ,MAAMC,KAAgB,gBAAAmB,EAAC,OAAA,EAAI,WAAWE,EAAO,wBAAwB,GAAG,eAAY,OAAA,CAAO;AAAA,EAAA,GACtG;AAEJ;"}
+{"version":3,"file":"SelectOption.js","sources":["../../../../src/components/SelectListbox/components/SelectOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\n\nimport type { KeyboardEvent, ReactNode } from 'react';\nimport type { OptionValue } from 'components/SelectListbox/SelectProvider';\n\nimport { useSelect } from 'components/SelectListbox/SelectProvider';\nimport styles from 'components/SelectListbox/SelectListbox.module.css';\n\nexport interface SelectOptionProps {\n  option: OptionValue;\n  index: number;\n  key: string | number;\n  dividerAfter?: number;\n  children: ReactNode;\n}\n\nexport const SelectOption = ({ option, index, dividerAfter, children }: SelectOptionProps) => {\n  const selectOptionRef = useRef<HTMLLIElement>(null);\n  const { isOpen, activeIndex, setActiveIndex, selectedValue, setSelectedValue, setIsOpen, options } = useSelect();\n\n  const handleSelectOption = (aIndex: number) => {\n    setSelectedValue(options[aIndex]);\n    setIsOpen(false);\n  };\n\n  const onOptionKeyDown = (event: KeyboardEvent<HTMLLIElement>) => {\n    if (event.key.length === 1) {\n      const key = event.key.toLocaleLowerCase();\n      const optionIndexStartsWithKey = options.findIndex(\n        (option) => !option.disabled && option.label.toLocaleLowerCase().startsWith(key)\n      );\n      if (optionIndexStartsWithKey !== -1) {\n        setActiveIndex(optionIndexStartsWithKey);\n        event.preventDefault();\n        return;\n      }\n    }\n\n    switch (event.key) {\n      case 'Tab':\n        event.preventDefault();\n        if (isOpen) {\n          setIsOpen(false);\n        }\n        break;\n      case 'ArrowDown':\n      case 'ArrowUp':\n        event.preventDefault();\n        if (!isOpen) {\n          return;\n        }\n        if (event.key === 'ArrowDown' && activeIndex < options.length - 1) {\n          setActiveIndex(activeIndex + 1);\n        }\n        if (event.key === 'ArrowUp' && activeIndex > 0) {\n          setActiveIndex(activeIndex - 1);\n        }\n        break;\n      case 'Enter':\n        event.preventDefault();\n        if (options?.length && activeIndex > -1 && !options[activeIndex].disabled) {\n          handleSelectOption(activeIndex);\n        }\n        break;\n      case 'Escape':\n        if (isOpen) {\n          event.stopPropagation();\n          setIsOpen(false);\n        }\n        break;\n    }\n  };\n\n  useEffect(() => {\n    if (index === activeIndex) {\n      isOpen ? selectOptionRef.current?.focus() : selectOptionRef.current?.blur();\n    }\n  }, [activeIndex, index, isOpen]);\n\n  useEffect(() => {\n    if (selectedValue.value === option.value) {\n      setActiveIndex(index);\n    }\n  }, [index, option.value, selectedValue.value, setActiveIndex]);\n\n  return (\n    <>\n      <li\n        className={clsx(styles['select-listbox-option'], {\n          [styles['select-listbox-option--active']]: index === activeIndex,\n          [styles['select-listbox-option--divider']]: index + 1 === dividerAfter,\n        })}\n        key={`${option.value}`}\n        {...(!option.disabled && {\n          onClick: () => setSelectedValue(option),\n          onKeyDown: onOptionKeyDown,\n          tabIndex: 0,\n          role: 'option',\n          'aria-selected': selectedValue.value === option.value,\n        })}\n        ref={selectOptionRef}\n      >\n        {children}\n      </li>\n      {index + 1 === dividerAfter && <div className={styles['select-listbox-divider']} aria-hidden=\"true\" />}\n    </>\n  );\n};\n"],"names":["SelectOption","option","index","dividerAfter","children","selectOptionRef","useRef","isOpen","activeIndex","setActiveIndex","selectedValue","setSelectedValue","setIsOpen","options","useSelect","handleSelectOption","aIndex","onOptionKeyDown","event","key","optionIndexStartsWithKey","useEffect","jsxs","Fragment","jsx","clsx","styles"],"mappings":";;;;;AAiBO,MAAMA,IAAe,CAAC,EAAE,QAAAC,GAAQ,OAAAC,GAAO,cAAAC,GAAc,UAAAC,QAAkC;AAC5F,QAAMC,IAAkBC,EAAsB,IAAI,GAC5C,EAAE,QAAAC,GAAQ,aAAAC,GAAa,gBAAAC,GAAgB,eAAAC,GAAe,kBAAAC,GAAkB,WAAAC,GAAW,SAAAC,EAAA,IAAYC,EAAA,GAE/FC,IAAqB,CAACC,MAAmB;AAC7C,IAAAL,EAAiBE,EAAQG,CAAM,CAAC,GAChCJ,EAAU,EAAK;AAAA,EAAA,GAGXK,IAAkB,CAACC,MAAwC;AAC/D,QAAIA,EAAM,IAAI,WAAW,GAAG;AAC1B,YAAMC,IAAMD,EAAM,IAAI,kBAAA,GAChBE,IAA2BP,EAAQ;AAAA,QACvC,CAACZ,MAAW,CAACA,EAAO,YAAYA,EAAO,MAAM,oBAAoB,WAAWkB,CAAG;AAAA,MAAA;AAEjF,UAAIC,MAA6B,IAAI;AACnC,QAAAX,EAAeW,CAAwB,GACvCF,EAAM,eAAA;AACN;AAAA,MAAA;AAAA,IACF;AAGF,YAAQA,EAAM,KAAA;AAAA,MACZ,KAAK;AACH,QAAAA,EAAM,eAAA,GACFX,KACFK,EAAU,EAAK;AAEjB;AAAA,MACF,KAAK;AAAA,MACL,KAAK;AAEH,YADAM,EAAM,eAAA,GACF,CAACX;AACH;AAEF,QAAIW,EAAM,QAAQ,eAAeV,IAAcK,EAAQ,SAAS,KAC9DJ,EAAeD,IAAc,CAAC,GAE5BU,EAAM,QAAQ,aAAaV,IAAc,KAC3CC,EAAeD,IAAc,CAAC;AAEhC;AAAA,MACF,KAAK;AACH,QAAAU,EAAM,eAAA,GACFL,GAAS,UAAUL,IAAc,MAAM,CAACK,EAAQL,CAAW,EAAE,YAC/DO,EAAmBP,CAAW;AAEhC;AAAA,MACF,KAAK;AACH,QAAID,MACFW,EAAM,gBAAA,GACNN,EAAU,EAAK;AAEjB;AAAA,IAAA;AAAA,EACJ;AAGF,SAAAS,EAAU,MAAM;AACd,IAAInB,MAAUM,MACZD,IAASF,EAAgB,SAAS,MAAA,IAAUA,EAAgB,SAAS,KAAA;AAAA,EACvE,GACC,CAACG,GAAaN,GAAOK,CAAM,CAAC,GAE/Bc,EAAU,MAAM;AACd,IAAIX,EAAc,UAAUT,EAAO,SACjCQ,EAAeP,CAAK;AAAA,EACtB,GACC,CAACA,GAAOD,EAAO,OAAOS,EAAc,OAAOD,CAAc,CAAC,GAG3D,gBAAAa,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC,EAAKC,EAAO,uBAAuB,GAAG;AAAA,UAC/C,CAACA,EAAO,+BAA+B,CAAC,GAAGxB,MAAUM;AAAA,UACrD,CAACkB,EAAO,gCAAgC,CAAC,GAAGxB,IAAQ,MAAMC;AAAA,QAAA,CAC3D;AAAA,QAEA,GAAI,CAACF,EAAO,YAAY;AAAA,UACvB,SAAS,MAAMU,EAAiBV,CAAM;AAAA,UACtC,WAAWgB;AAAA,UACX,UAAU;AAAA,UACV,MAAM;AAAA,UACN,iBAAiBP,EAAc,UAAUT,EAAO;AAAA,QAAA;AAAA,QAElD,KAAKI;AAAA,QAEJ,UAAAD;AAAA,MAAA;AAAA,MAVI,GAAGH,EAAO,KAAK;AAAA,IAAA;AAAA,IAYrBC,IAAQ,MAAMC,KAAgB,gBAAAqB,EAAC,OAAA,EAAI,WAAWE,EAAO,wBAAwB,GAAG,eAAY,OAAA,CAAO;AAAA,EAAA,GACtG;AAEJ;"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@uva-glass/component-library",
   "author": "Team Glass - Frontend vrienden",
   "private": false,
-  "version": "3.39.0",
+  "version": "3.39.1",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -61,20 +61,20 @@
     "@testing-library/react": "^16.3.0",
     "@types/jest": "^30.0.0",
     "@types/node": "^22.18.0",
-    "@types/react": "^19.1.11",
-    "@types/react-dom": "^19.1.7",
+    "@types/react": "^19.1.12",
+    "@types/react-dom": "^19.1.8",
     "@uva-glass/eslint-config": "^1.3.11",
     "@uva-glass/stylelint-config": "^1.2.3",
-    "@vitejs/plugin-react": "^5.0.1",
-    "babel-jest": "^30.0.5",
+    "@vitejs/plugin-react": "^5.0.2",
+    "babel-jest": "^30.1.1",
     "babel-plugin-transform-vite-meta-env": "^1.0.3",
     "clsx": "^2.1.1",
     "eslint-plugin-react-hooks": "^6.0.0",
     "glob": "^11.0.3",
     "husky": "^9.1.7",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^30.0.5",
-    "jest-environment-jsdom": "^30.0.5",
+    "jest": "^30.1.1",
+    "jest-environment-jsdom": "^30.1.1",
     "jest-junit": "^16.0.0",
     "jsdom": "^26.1.0",
     "npm-run-all2": "^8.0.4",
@@ -83,7 +83,7 @@
     "react-router": "^7.8.2",
     "semantic-release": "^24.2.7",
     "storybook": "^9.1.3",
-    "style-dictionary": "^5.0.2",
+    "style-dictionary": "^5.0.3",
     "stylelint": "^16.23.1",
     "stylelint-config-recommended": "^17.0.0",
     "stylelint-config-standard": "^39.0.0",
@@ -109,8 +109,8 @@
   },
   "optionalDependencies": {
     "@ast-grep/napi-linux-x64-gnu": "0.39.4",
-    "@rollup/rollup-linux-x64-gnu": "^4.48.1",
-    "@rspack/binding-darwin-arm64": "1.4.11",
-    "@rspack/binding-linux-x64-gnu": "1.4.11"
+    "@rollup/rollup-linux-x64-gnu": "^4.49.0",
+    "@rspack/binding-darwin-arm64": "1.5.0",
+    "@rspack/binding-linux-x64-gnu": "1.5.0"
   }
 }