@uva-glass/component-library 3.50.8 → 3.50.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -17,6 +17,7 @@ export interface SelectListboxContext {
17
17
  activeIndex: number;
18
18
  setActiveIndex: (v: number) => void;
19
19
  listboxId: string;
20
+ isDirty: boolean;
20
21
  }
21
22
  interface Props {
22
23
  options: OptionValue[];
@@ -1,43 +1,44 @@
1
- import { jsx as m } from "react/jsx-runtime";
2
- import { createContext as w, useContext as L, useState as a, useRef as g, useId as C, useEffect as P } from "react";
3
- const i = w({}), O = ({ options: e, defaultValue: n, children: v }) => {
4
- const [s, d] = a({ value: "", label: "" }), [x, c] = a(!1), [b, u] = a(-1), f = g(C()), I = () => {
5
- c((t) => !t);
6
- }, l = (t) => e.find((r) => r.value === t) || {
1
+ import { jsx as g } from "react/jsx-runtime";
2
+ import { createContext as y, useContext as C, useState as c, useRef as P, useId as p, useEffect as D } from "react";
3
+ const v = y({}), h = ({ options: e, defaultValue: s, children: d }) => {
4
+ const [l, x] = c({ value: "", label: "" }), [b, o] = c(!1), [f, i] = c(-1), [I, u] = c(!1), S = P(p()), m = () => {
5
+ o((t) => !t), u(!1);
6
+ }, n = (t) => e.find((a) => a.value === t) || {
7
7
  value: -1,
8
8
  label: "",
9
9
  selectedLabel: "-"
10
- }, o = (t) => {
11
- const r = e.findIndex((S) => S.value === t.value);
12
- u(r), d(t), c(!1);
10
+ }, r = (t, a = !1) => {
11
+ const w = e.findIndex((L) => L.value === t.value);
12
+ i(w), x(t), o(!1), u(!a);
13
13
  };
14
- return n !== -1 && !s.value && o(l(n)), P(() => {
15
- l(s.value || n).label !== s.label && o(l(s.value || n));
16
- }, [e, n]), /* @__PURE__ */ m(
17
- i.Provider,
14
+ return s !== -1 && !l.value && r(n(s), !0), D(() => {
15
+ n(l.value || s).label !== l.label && r(n(l.value || s));
16
+ }, [e, s]), /* @__PURE__ */ g(
17
+ v.Provider,
18
18
  {
19
19
  value: {
20
20
  options: e,
21
- selectedValue: s,
22
- setSelectedValue: o,
23
- isOpen: x,
24
- setIsOpen: c,
25
- toggleListbox: I,
26
- getValue: l,
27
- activeIndex: b,
28
- setActiveIndex: u,
29
- listboxId: f.current
21
+ selectedValue: l,
22
+ setSelectedValue: r,
23
+ isOpen: b,
24
+ setIsOpen: o,
25
+ toggleListbox: m,
26
+ getValue: n,
27
+ activeIndex: f,
28
+ setActiveIndex: i,
29
+ listboxId: S.current,
30
+ isDirty: I
30
31
  },
31
- children: v
32
+ children: d
32
33
  }
33
34
  );
34
- }, h = () => {
35
- const e = L(i);
35
+ }, j = () => {
36
+ const e = C(v);
36
37
  if (e === void 0) throw new Error("useSelect can only be used in an SelectProvider");
37
38
  return e;
38
39
  };
39
40
  export {
40
- O as SelectProvider,
41
- h as useSelect
41
+ h as SelectProvider,
42
+ j as useSelect
42
43
  };
43
44
  //# sourceMappingURL=SelectProvider.js.map
@@ -1 +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 if (defaultValue !== -1 && !value.value) {\n setSelectedValue(getValue(defaultValue));\n }\n\n useEffect(() => {\n const newLabel = getValue(value.value || defaultValue).label;\n if (newLabel !== value.label) {\n setSelectedValue(getValue(value.value || defaultValue));\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [options, 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","jsx","useSelect","context","useContext"],"mappings":";;AAyBA,MAAMA,IAAgBC,EAAoC,EAA0B,GAOvEC,IAAiB,CAAC,EAAE,SAAAC,GAAS,cAAAC,GAAc,UAAAC,QAAyC;AAC/F,QAAM,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;AAC1B,IAAAN,EAAU,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,EAAA,GAKfc,IAAmB,CAACd,MAAuB;AAC/C,UAAMe,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,SAChCc,EAAiBF,EAASd,CAAY,CAAC,GAGzCkB,EAAU,MAAM;AAEd,IADiBJ,EAASZ,EAAM,SAASF,CAAY,EAAE,UACtCE,EAAM,SACrBc,EAAiBF,EAASZ,EAAM,SAASF,CAAY,CAAC;AAAA,EAG1D,GAAG,CAACD,GAASC,CAAY,CAAC,GAGxB,gBAAAmB;AAAA,IAACvB,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,MAAA;AAAA,MAGtB,UAAAR;AAAA,IAAA;AAAA,EAAA;AAGP,GAEamB,IAAY,MAAM;AAC7B,QAAMC,IAAUC,EAAW1B,CAAa;AAExC,MAAIyB,MAAY,OAAW,OAAM,IAAI,MAAM,iDAAiD;AAE5F,SAAOA;AACT;"}
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 isDirty: boolean;\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 [isDirty, setIsDirty] = useState(false);\n const listboxId = useRef<string>(useId());\n\n const toggleListbox = () => {\n setIsOpen((status) => !status);\n setIsDirty(false);\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, isDefault = false) => {\n const selectedIndex = options.findIndex((option) => option.value === value.value);\n setActiveIndex(selectedIndex);\n setValue(value);\n setIsOpen(false);\n setIsDirty(!isDefault);\n };\n\n if (defaultValue !== -1 && !value.value) {\n setSelectedValue(getValue(defaultValue), true);\n }\n\n useEffect(() => {\n const newLabel = getValue(value.value || defaultValue).label;\n if (newLabel !== value.label) {\n setSelectedValue(getValue(value.value || defaultValue));\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [options, 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 isDirty,\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","isDirty","setIsDirty","listboxId","useRef","useId","toggleListbox","status","getValue","option","setSelectedValue","isDefault","selectedIndex","useEffect","jsx","useSelect","context","useContext"],"mappings":";;AA0BA,MAAMA,IAAgBC,EAAoC,EAA0B,GAOvEC,IAAiB,CAAC,EAAE,SAAAC,GAAS,cAAAC,GAAc,UAAAC,QAAyC;AAC/F,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAsB,EAAE,OAAO,IAAI,OAAO,IAAI,GAClE,CAACC,GAAQC,CAAS,IAAIF,EAAS,EAAK,GACpC,CAACG,GAAaC,CAAc,IAAIJ,EAAS,EAAE,GAC3C,CAACK,GAASC,CAAU,IAAIN,EAAS,EAAK,GACtCO,IAAYC,EAAeC,GAAO,GAElCC,IAAgB,MAAM;AAC1B,IAAAR,EAAU,CAACS,MAAW,CAACA,CAAM,GAC7BL,EAAW,EAAK;AAAA,EAClB,GAEMM,IAAW,CAACd,MAEdH,EAAQ,KAAK,CAACkB,MAAWA,EAAO,UAAUf,CAAK,KAAK;AAAA,IAClD,OAAO;AAAA,IACP,OAAO;AAAA,IACP,eAAe;AAAA,EAAA,GAKfgB,IAAmB,CAAChB,GAAoBiB,IAAY,OAAU;AAClE,UAAMC,IAAgBrB,EAAQ,UAAU,CAACkB,MAAWA,EAAO,UAAUf,EAAM,KAAK;AAChF,IAAAM,EAAeY,CAAa,GAC5BjB,EAASD,CAAK,GACdI,EAAU,EAAK,GACfI,EAAW,CAACS,CAAS;AAAA,EACvB;AAEA,SAAInB,MAAiB,MAAM,CAACE,EAAM,SAChCgB,EAAiBF,EAAShB,CAAY,GAAG,EAAI,GAG/CqB,EAAU,MAAM;AAEd,IADiBL,EAASd,EAAM,SAASF,CAAY,EAAE,UACtCE,EAAM,SACrBgB,EAAiBF,EAASd,EAAM,SAASF,CAAY,CAAC;AAAA,EAG1D,GAAG,CAACD,GAASC,CAAY,CAAC,GAGxB,gBAAAsB;AAAA,IAAC1B,EAAc;AAAA,IAAd;AAAA,MACC,OAAO;AAAA,QACL,SAAAG;AAAA,QACA,eAAeG;AAAA,QACf,kBAAAgB;AAAA,QACA,QAAAb;AAAA,QACA,WAAAC;AAAA,QACA,eAAAQ;AAAA,QACA,UAAAE;AAAA,QACA,aAAAT;AAAA,QACA,gBAAAC;AAAA,QACA,WAAWG,EAAU;AAAA,QACrB,SAAAF;AAAA,MAAA;AAAA,MAGD,UAAAR;AAAA,IAAA;AAAA,EAAA;AAGP,GAEasB,IAAY,MAAM;AAC7B,QAAMC,IAAUC,EAAW7B,CAAa;AAExC,MAAI4B,MAAY,OAAW,OAAM,IAAI,MAAM,iDAAiD;AAE5F,SAAOA;AACT;"}
@@ -1,60 +1,58 @@
1
- import { jsx as c, jsxs as K } from "react/jsx-runtime";
2
- import { c as m } from "../../../clsx-OuTLNxxd.js";
3
- import { forwardRef as N, useRef as h, useEffect as u } from "react";
1
+ import { jsx as n, jsxs as E } from "react/jsx-runtime";
2
+ import { c as g } from "../../../clsx-OuTLNxxd.js";
3
+ import { forwardRef as K, useRef as N, useEffect as x } from "react";
4
4
  import { s as t } from "../../../SelectListbox.module-CgZyIxwT.js";
5
- import { Icon as R } from "../../Icon/Icon.js";
6
- import { useSelect as S } from "../SelectProvider.js";
7
- const O = N((y, b) => {
8
- 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) => {
5
+ import { Icon as S } from "../../Icon/Icon.js";
6
+ import { useSelect as W } from "../SelectProvider.js";
7
+ const P = K((m, c) => {
8
+ const { variant: b, size: h = "default", onChange: o, buttonLabelProp: y = "label", buttonLabelBold: k, disabled: w = !1 } = m, l = N(null), { listboxId: I, isOpen: e, selectedValue: s, toggleListbox: L, setIsOpen: i, setActiveIndex: f, options: p, isDirty: D } = W() || {}, C = (r) => {
9
9
  if (r.key.length === 1) {
10
- const a = r.key.toLocaleLowerCase(), g = d.findIndex(
11
- (x) => !x.disabled && x.label.toLocaleLowerCase().startsWith(a)
10
+ const a = r.key.toLocaleLowerCase(), u = p.findIndex(
11
+ (d) => !d.disabled && d.label.toLocaleLowerCase().startsWith(a)
12
12
  );
13
- if (g !== -1) {
14
- p(g), e || n(!0), r.preventDefault();
13
+ if (u !== -1) {
14
+ f(u), e || i(!0), r.preventDefault();
15
15
  return;
16
16
  }
17
17
  }
18
18
  switch (r.key) {
19
19
  case "Enter":
20
20
  if (r.preventDefault(), !e) {
21
- n(!0);
21
+ i(!0);
22
22
  return;
23
23
  }
24
24
  break;
25
25
  case "Escape":
26
- e && (r.stopPropagation(), p(d.findIndex((a) => a.value === s?.value)), n(!1));
26
+ e && (r.stopPropagation(), f(p.findIndex((a) => a.value === s?.value)), i(!1));
27
27
  break;
28
28
  }
29
29
  };
30
- return u(() => {
31
- e ? (l.current?.children[0]).blur() : !i.current && (l.current?.children[0]).focus();
32
- }, [e]), u(() => (i.current = !1, () => {
33
- i.current = !0;
34
- }), []), u(() => {
35
- o && o(s);
36
- }, [o, s]), /* @__PURE__ */ c("span", { ref: l, children: /* @__PURE__ */ K(
30
+ return x(() => {
31
+ e && (l.current?.children[0]).blur();
32
+ }, [e]), x(() => {
33
+ o && o(s), D && (l.current?.children[0]).focus();
34
+ }, [o, s]), /* @__PURE__ */ n("span", { ref: l, children: /* @__PURE__ */ E(
37
35
  "button",
38
36
  {
39
- className: m(t["select-listbox-trigger"], t[`select-listbox-trigger--${k}`], {
40
- [t[`select-listbox-trigger--${f}`]]: f,
41
- [t["select-listbox-trigger--bold"]]: I
37
+ className: g(t["select-listbox-trigger"], t[`select-listbox-trigger--${h}`], {
38
+ [t[`select-listbox-trigger--${b}`]]: b,
39
+ [t["select-listbox-trigger--bold"]]: k
42
40
  }),
43
41
  type: "button",
44
- onClick: D,
45
- onKeyDown: E,
42
+ onClick: L,
43
+ onKeyDown: C,
46
44
  "aria-expanded": e,
47
45
  "aria-haspopup": "listbox",
48
46
  "aria-label": `${s.label}`,
49
- disabled: L,
50
- "aria-controls": C,
51
- ...b && { ref: b },
47
+ disabled: w,
48
+ "aria-controls": I,
49
+ ...c && { ref: c },
52
50
  children: [
53
- /* @__PURE__ */ c("span", { className: t["select-listbox-trigger-label"], children: s[w] }),
54
- /* @__PURE__ */ c(
55
- R,
51
+ /* @__PURE__ */ n("span", { className: t["select-listbox-trigger-label"], children: s[y] }),
52
+ /* @__PURE__ */ n(
53
+ S,
56
54
  {
57
- className: m(t["select-listbox-trigger-icon"], {
55
+ className: g(t["select-listbox-trigger-icon"], {
58
56
  [t["select-listbox-trigger-icon--open"]]: e
59
57
  }),
60
58
  name: "CheveronDown",
@@ -66,6 +64,6 @@ const O = N((y, b) => {
66
64
  ) });
67
65
  });
68
66
  export {
69
- O as SelectButton
67
+ P as SelectButton
70
68
  };
71
69
  //# sourceMappingURL=SelectButton.js.map
@@ -1 +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' | 'roundedLeft' | 'roundedRight';\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,MACF;AAAA,IACF;AAEA,YAAQA,EAAM,KAAA;AAAA,MACZ,KAAK;AAEH,YADAA,EAAM,eAAA,GACF,CAACR,GAAQ;AACX,UAAAG,EAAU,EAAI;AACd;AAAA,QACF;AACA;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,EAEN;AAEA,SAAAS,EAAU,MAAM;AACd,IAAAZ,KACKJ,EAAc,SAAS,SAAS,CAAC,GAAwB,KAAA,IAC1D,CAACE,EAAc,YAAYF,EAAc,SAAS,SAAS,CAAC,GAAwB,MAAA;AAAA,EAC1F,GAAG,CAACI,CAAM,CAAC,GAEXY,EAAU,OACRd,EAAc,UAAU,IAEjB,MAAM;AACX,IAAAA,EAAc,UAAU;AAAA,EAC1B,IACC,CAAA,CAAE,GAELc,EAAU,MAAM;AACd,IAAIpB,OAAmBS,CAAa;AAAA,EACtC,GAAG,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;"}
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' | 'roundedLeft' | 'roundedRight';\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 { listboxId, isOpen, selectedValue, toggleListbox, setIsOpen, setActiveIndex, options, isDirty } =\n 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 if (isOpen) {\n (buttonWrapper.current?.children[0] as HTMLButtonElement).blur();\n }\n }, [isOpen]);\n\n useEffect(() => {\n if (onChange) {\n onChange(selectedValue);\n }\n\n isDirty && (buttonWrapper.current?.children[0] as HTMLButtonElement).focus();\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\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","listboxId","isOpen","selectedValue","toggleListbox","setIsOpen","setActiveIndex","options","isDirty","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,GAC5C,EAAE,WAAAC,GAAW,QAAAC,GAAQ,eAAAC,GAAe,eAAAC,GAAe,WAAAC,GAAW,gBAAAC,GAAgB,SAAAC,GAAS,SAAAC,MAC3FC,EAAA,KAAe,CAAA,GAEXC,IAAmB,CAACC,MAA4C;AACpE,QAAIA,EAAM,IAAI,WAAW,GAAG;AAC1B,YAAMC,IAAMD,EAAM,IAAI,kBAAA,GAChBE,IAA2BN,EAAQ;AAAA,QACvC,CAACO,MAAW,CAACA,EAAO,YAAYA,EAAO,MAAM,oBAAoB,WAAWF,CAAG;AAAA,MAAA;AAEjF,UAAIC,MAA6B,IAAI;AACnC,QAAAP,EAAeO,CAAwB,GAClCX,KAAQG,EAAU,EAAI,GAC3BM,EAAM,eAAA;AACN;AAAA,MACF;AAAA,IACF;AAEA,YAAQA,EAAM,KAAA;AAAA,MACZ,KAAK;AAEH,YADAA,EAAM,eAAA,GACF,CAACT,GAAQ;AACX,UAAAG,EAAU,EAAI;AACd;AAAA,QACF;AACA;AAAA,MACF,KAAK;AACH,QAAIH,MACFS,EAAM,gBAAA,GACNL,EAAeC,EAAQ,UAAU,CAACO,MAAWA,EAAO,UAAUX,GAAe,KAAK,CAAC,GACnFE,EAAU,EAAK;AAEjB;AAAA,IAAA;AAAA,EAEN;AAEA,SAAAU,EAAU,MAAM;AACd,IAAIb,MACDH,EAAc,SAAS,SAAS,CAAC,GAAwB,KAAA;AAAA,EAE9D,GAAG,CAACG,CAAM,CAAC,GAEXa,EAAU,MAAM;AACd,IAAIpB,KACFA,EAASQ,CAAa,GAGxBK,MAAYT,EAAc,SAAS,SAAS,CAAC,GAAwB,MAAA;AAAA,EAGvE,GAAG,CAACJ,GAAUQ,CAAa,CAAC,GAG1B,gBAAAa,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,SAASO;AAAA,MACT,WAAWM;AAAA,MACX,iBAAeR;AAAA,MACf,iBAAc;AAAA,MACd,cAAY,GAAGC,EAAc,KAAK;AAAA,MAClC,UAAAL;AAAA,MACA,iBAAeG;AAAA,MACd,GAAIT,KAAO,EAAE,KAAAA,EAAA;AAAA,MAEd,UAAA;AAAA,QAAA,gBAAAwB,EAAC,UAAK,WAAWG,EAAO,8BAA8B,GACnD,UAAAhB,EAAcP,CAAoC,GACrD;AAAA,QAEA,gBAAAoB;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,WAAWF,EAAKC,EAAO,6BAA6B,GAAG;AAAA,cACrD,CAACA,EAAO,mCAAmC,CAAC,GAAGjB;AAAA,YAAA,CAChD;AAAA,YACD,MAAK;AAAA,YACL,MAAM;AAAA,UAAA;AAAA,QAAA;AAAA,MACR;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ,CAAC;"}
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@uva-glass/component-library",
3
3
  "author": "Team Glass - Frontend vrienden",
4
4
  "private": false,
5
- "version": "3.50.8",
5
+ "version": "3.50.10",
6
6
  "type": "module",
7
7
  "main": "dist/index.js",
8
8
  "types": "dist/index.d.ts",
@@ -53,15 +53,15 @@
53
53
  "@semantic-release/git": "^10.0.1",
54
54
  "@semantic-release/gitlab": "^13.2.9",
55
55
  "@semantic-release/npm": "^13.0.0",
56
- "@storybook/addon-a11y": "^9.1.10",
57
- "@storybook/addon-docs": "^9.1.10",
58
- "@storybook/addon-links": "^9.1.10",
59
- "@storybook/react": "^9.1.10",
60
- "@storybook/react-vite": "^9.1.10",
56
+ "@storybook/addon-a11y": "^9.1.12",
57
+ "@storybook/addon-docs": "^9.1.12",
58
+ "@storybook/addon-links": "^9.1.12",
59
+ "@storybook/react": "^9.1.12",
60
+ "@storybook/react-vite": "^9.1.12",
61
61
  "@testing-library/jest-dom": "^6.9.1",
62
62
  "@testing-library/react": "^16.3.0",
63
63
  "@types/jest": "^30.0.0",
64
- "@types/node": "^24.7.2",
64
+ "@types/node": "^24.8.1",
65
65
  "@types/react": "^19.2.2",
66
66
  "@types/react-dom": "^19.2.2",
67
67
  "@uva-glass/eslint-config": "^1.3.11",
@@ -83,7 +83,7 @@
83
83
  "react-dom": "^19.2.0",
84
84
  "react-router": "^7.9.4",
85
85
  "semantic-release": "^24.2.9",
86
- "storybook": "^9.1.10",
86
+ "storybook": "^9.1.12",
87
87
  "style-dictionary": "^5.1.1",
88
88
  "stylelint": "^16.25.0",
89
89
  "stylelint-config-recommended": "^17.0.0",
@@ -91,10 +91,10 @@
91
91
  "stylelint-order": "^7.0.0",
92
92
  "ts-node": "^10.9.2",
93
93
  "typescript": "^5.9.3",
94
- "vite": "^7.1.9",
94
+ "vite": "^7.1.10",
95
95
  "vite-plugin-dts": "^4.5.4",
96
96
  "vite-plugin-lib-inject-css": "^2.2.2",
97
- "vite-plugin-static-copy": "^3.1.3",
97
+ "vite-plugin-static-copy": "^3.1.4",
98
98
  "vite-plugin-svgr": "^4.5.0",
99
99
  "vite-tsconfig-paths": "^5.1.4"
100
100
  },