@uva-glass/component-library 3.27.1 → 3.27.3

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.
Files changed (23) hide show
  1. package/dist/assets/ControlsButton.css +1 -1
  2. package/dist/assets/MultiSelectBox.css +1 -1
  3. package/dist/assets/TextArea.css +1 -1
  4. package/dist/components/CheckboxButtonBar/CheckboxButtonBar.d.ts +2 -1
  5. package/dist/components/CheckboxButtonBar/CheckboxButtonBar.js +14 -13
  6. package/dist/components/CheckboxButtonBar/CheckboxButtonBar.js.map +1 -1
  7. package/dist/components/CheckboxButtonBar/CheckboxButtonBar.stories.d.ts +1 -0
  8. package/dist/components/CheckboxButtonBar/CheckboxButtonBar.stories.js +50 -8
  9. package/dist/components/CheckboxButtonBar/CheckboxButtonBar.stories.js.map +1 -1
  10. package/dist/components/ControlsButton/ControlsButton.d.ts +2 -1
  11. package/dist/components/ControlsButton/ControlsButton.js +34 -24
  12. package/dist/components/ControlsButton/ControlsButton.js.map +1 -1
  13. package/dist/components/ControlsButton/ControlsButton.stories.js +3 -3
  14. package/dist/components/ControlsButton/ControlsButton.stories.js.map +1 -1
  15. package/dist/components/MultiSelectBox/MultiSelectBox.d.ts +3 -1
  16. package/dist/components/MultiSelectBox/MultiSelectBox.js +82 -78
  17. package/dist/components/MultiSelectBox/MultiSelectBox.js.map +1 -1
  18. package/dist/components/SelectListbox/SelectListBox.stories.js +5 -0
  19. package/dist/components/SelectListbox/SelectListBox.stories.js.map +1 -1
  20. package/dist/components/SelectListbox/SelectProvider.js +24 -33
  21. package/dist/components/SelectListbox/SelectProvider.js.map +1 -1
  22. package/dist/components/TextArea/TextArea.js +14 -14
  23. package/package.json +15 -15
@@ -1,50 +1,41 @@
1
1
  import { jsx as m } from "react/jsx-runtime";
2
- import { createContext as g, useContext as C, useState as c, useRef as L, useId as P, useEffect as V } from "react";
3
- const a = g({}), E = ({ options: t, defaultValue: l, children: u }) => {
4
- const [d, i] = c({ value: "", label: "" }), [v, n] = c(!1), [x, o] = c(-1), f = L(P()), b = () => {
5
- n((e) => !e);
6
- }, I = (e) => t.find((s) => s.value === e) || {
2
+ import { createContext as g, useContext as p, useState as l, useRef as C, useId as P } from "react";
3
+ const d = g({}), L = ({ options: e, defaultValue: o, children: i }) => {
4
+ const [c, v] = l({ value: "", label: "" }), [x, s] = l(!1), [f, r] = l(-1), I = C(P()), b = () => {
5
+ s((t) => !t);
6
+ }, u = (t) => e.find((n) => n.value === t) || {
7
7
  value: -1,
8
8
  label: "",
9
9
  selectedLabel: "-"
10
- }, r = (e) => {
11
- const s = t.findIndex((S) => S.value === e.value);
12
- o(s), i(e), n(!1);
10
+ }, a = (t) => {
11
+ const n = e.findIndex((S) => S.value === t.value);
12
+ r(n), v(t), s(!1);
13
13
  };
14
- return V(() => {
15
- if (l !== -1) {
16
- const e = t.find((s) => s.value === l) || {
17
- value: -1,
18
- label: "",
19
- selectedLabel: "-"
20
- };
21
- r(e);
22
- }
23
- }, [l]), /* @__PURE__ */ m(
24
- a.Provider,
14
+ return o !== -1 && !c.value && a(u(o)), /* @__PURE__ */ m(
15
+ d.Provider,
25
16
  {
26
17
  value: {
27
- options: t,
28
- selectedValue: d,
29
- setSelectedValue: r,
30
- isOpen: v,
31
- setIsOpen: n,
18
+ options: e,
19
+ selectedValue: c,
20
+ setSelectedValue: a,
21
+ isOpen: x,
22
+ setIsOpen: s,
32
23
  toggleListbox: b,
33
- getValue: I,
34
- activeIndex: x,
35
- setActiveIndex: o,
36
- listboxId: f.current
24
+ getValue: u,
25
+ activeIndex: f,
26
+ setActiveIndex: r,
27
+ listboxId: I.current
37
28
  },
38
- children: u
29
+ children: i
39
30
  }
40
31
  );
41
32
  }, O = () => {
42
- const t = C(a);
43
- if (t === void 0) throw new Error("useSelect can only be used in an SelectProvider");
44
- return t;
33
+ const e = p(d);
34
+ if (e === void 0) throw new Error("useSelect can only be used in an SelectProvider");
35
+ return e;
45
36
  };
46
37
  export {
47
- E as SelectProvider,
38
+ L as SelectProvider,
48
39
  O as useSelect
49
40
  };
50
41
  //# 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 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;"}
1
+ {"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;"}
@@ -1,23 +1,23 @@
1
1
  import { jsxs as _, jsx as n } from "react/jsx-runtime";
2
- import { useRef as x, useState as d } from "react";
3
- import { c as i } from "../../clsx-OuTLNxxd.js";
2
+ import { useRef as x, useState as p } from "react";
3
+ import { c as d } from "../../clsx-OuTLNxxd.js";
4
4
  import '../../assets/TextArea.css';const r = {
5
- "text-area__wrapper": "_text-area__wrapper_13728_1",
6
- "text-area__header": "_text-area__header_13728_7",
7
- "text-area__label": "_text-area__label_13728_13",
8
- "text-area__word-count": "_text-area__word-count_13728_20",
9
- "text-area__word-count--alert": "_text-area__word-count--alert_13728_25",
10
- "text-area": "_text-area_13728_1"
5
+ "text-area__wrapper": "_text-area__wrapper_1pu93_1",
6
+ "text-area__header": "_text-area__header_1pu93_7",
7
+ "text-area__label": "_text-area__label_1pu93_13",
8
+ "text-area__word-count": "_text-area__word-count_1pu93_20",
9
+ "text-area__word-count--alert": "_text-area__word-count--alert_1pu93_25",
10
+ "text-area": "_text-area_1pu93_1"
11
11
  };
12
- function w({ onChange: c, label: a, maxCharacters: t = 0, defaultValue: l = "" }) {
13
- const e = x(null), [o, s] = d(0), u = () => {
14
- 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()));
12
+ function w({ onChange: u, label: a, maxCharacters: t = 0, defaultValue: c = "" }) {
13
+ const e = x(null), [o, l] = p(0), s = () => {
14
+ 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()));
15
15
  };
16
16
  return /* @__PURE__ */ _("div", { className: r["text-area__wrapper"], children: [
17
17
  (a || t > 0) && /* @__PURE__ */ _("div", { className: r["text-area__header"], children: [
18
18
  a && /* @__PURE__ */ n("span", { className: r["text-area__label"], children: a }),
19
19
  t > 0 && /* @__PURE__ */ _("div", { className: r["text-area__word-count"], children: [
20
- /* @__PURE__ */ n("span", { className: i({ [r["text-area__word-count--alert"]]: o === t }), children: o }),
20
+ /* @__PURE__ */ n("span", { className: d({ [r["text-area__word-count--alert"]]: o === t }), children: o }),
21
21
  " / ",
22
22
  t
23
23
  ] })
@@ -28,8 +28,8 @@ function w({ onChange: c, label: a, maxCharacters: t = 0, defaultValue: l = "" }
28
28
  ref: e,
29
29
  className: r["text-area"],
30
30
  maxLength: t > 0 ? t : void 0,
31
- onInput: u,
32
- defaultValue: l
31
+ onInput: s,
32
+ defaultValue: c
33
33
  }
34
34
  )
35
35
  ] });
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.27.1",
5
+ "version": "3.27.3",
6
6
  "type": "module",
7
7
  "main": "dist/index.js",
8
8
  "types": "dist/index.d.ts",
@@ -45,10 +45,10 @@
45
45
  "devDependencies": {
46
46
  "@commitlint/cli": "^19.8.1",
47
47
  "@commitlint/config-conventional": "^19.8.1",
48
- "@react-aria/button": "^3.13.1",
49
- "@react-aria/dialog": "^3.5.25",
50
- "@react-aria/overlays": "^3.27.1",
51
- "@react-types/dialog": "^3.5.18",
48
+ "@react-aria/button": "^3.13.2",
49
+ "@react-aria/dialog": "^3.5.26",
50
+ "@react-aria/overlays": "^3.27.2",
51
+ "@react-types/dialog": "^3.5.19",
52
52
  "@semantic-release/git": "^10.0.1",
53
53
  "@semantic-release/gitlab": "^13.2.5",
54
54
  "@semantic-release/npm": "^12.0.1",
@@ -64,21 +64,21 @@
64
64
  "@testing-library/jest-dom": "^6.6.3",
65
65
  "@testing-library/react": "^16.3.0",
66
66
  "@types/jest": "^29.5.14",
67
- "@types/node": "^22.15.29",
67
+ "@types/node": "^22.15.31",
68
68
  "@types/react-dom": "^19.1.6",
69
- "@types/react": "^19.1.6",
69
+ "@types/react": "^19.1.7",
70
70
  "@uva-glass/eslint-config": "^1.3.10",
71
71
  "@uva-glass/stylelint-config": "^1.2.2",
72
- "@vitejs/plugin-react": "^4.5.1",
73
- "babel-jest": "^29.7.0",
72
+ "@vitejs/plugin-react": "^4.5.2",
73
+ "babel-jest": "^30.0.0",
74
74
  "babel-plugin-transform-vite-meta-env": "^1.0.3",
75
75
  "clsx": "^2.1.1",
76
76
  "eslint-plugin-react-hooks": "^6.0.0",
77
77
  "glob": "^11.0.2",
78
78
  "husky": "^9.1.7",
79
79
  "identity-obj-proxy": "^3.0.0",
80
- "jest": "^29.7.0",
81
- "jest-environment-jsdom": "^29.7.0",
80
+ "jest": "^30.0.0",
81
+ "jest-environment-jsdom": "^30.0.0",
82
82
  "jest-junit": "^16.0.0",
83
83
  "jsdom": "^26.1.0",
84
84
  "npm-run-all2": "^8.0.4",
@@ -112,9 +112,9 @@
112
112
  "lexical": "^0.32.1"
113
113
  },
114
114
  "optionalDependencies": {
115
- "@rollup/rollup-linux-x64-gnu": "^4.41.1",
116
- "@rspack/binding-darwin-arm64": "1.3.13",
117
- "@rspack/binding-linux-x64-gnu": "1.3.13",
118
- "@ast-grep/napi-linux-x64-gnu": "0.38.4"
115
+ "@rollup/rollup-linux-x64-gnu": "^4.42.0",
116
+ "@rspack/binding-darwin-arm64": "1.3.15",
117
+ "@rspack/binding-linux-x64-gnu": "1.3.15",
118
+ "@ast-grep/napi-linux-x64-gnu": "0.38.5"
119
119
  }
120
120
  }