@uva-glass/component-library 3.34.9 → 3.34.11

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 (10) hide show
  1. package/dist/assets/CheckboxButtonBar.css +1 -1
  2. package/dist/assets/ControlsButton.css +1 -1
  3. package/dist/assets/PeriodSelector.css +1 -1
  4. package/dist/components/CheckboxButtonBar/CheckboxButtonBar.js +58 -76
  5. package/dist/components/CheckboxButtonBar/CheckboxButtonBar.js.map +1 -1
  6. package/dist/components/ControlsButton/ControlsButton.js +27 -27
  7. package/dist/components/MultiSelectBox/MultiSelectBox.js +3 -2
  8. package/dist/components/MultiSelectBox/MultiSelectBox.js.map +1 -1
  9. package/dist/components/PeriodSelector/PeriodSelector.js +27 -27
  10. package/package.json +1 -1
package/dist/assets/CheckboxButtonBar.css CHANGED
@@ -1 +1 @@
1
- ._checkbox-button-bar__container_148ge_1{display:grid;gap:.5rem;grid-template-columns:1fr;grid-template-rows:auto auto auto;width:fit-content}._checkbox-button-bar__container--label-left_148ge_9{grid-template-columns:auto 1fr;grid-template-rows:auto auto}._checkbox-button-bar__label_148ge_14{align-self:center;grid-column:1;grid-row:1}._checkbox-button-bar__bar_148ge_20{grid-column:1;grid-row:2}._checkbox-button-bar__bar--label-left_148ge_25{grid-column:2;grid-row:1}._checkbox-button-bar__footer_148ge_30{grid-column:1;grid-row:3}._checkbox-button-bar__footer-text_148ge_35{color:var(--new-color-grey-700);font-size:var(--font-size-text-non-essential)}._checkbox-button-bar__footer--label-left_148ge_40{grid-column:2;grid-row:2}._checkbox-button-bar__row_148ge_45{align-items:center;background-color:var(--new-color-uva-white);border:1px solid var(--new-color-grey-700);border-radius:.5rem;display:flex;flex-wrap:nowrap;gap:.25rem;padding:.25rem;width:fit-content}._checkbox-button-bar__row--not-validated_148ge_57{border-color:var(--new-color-red-600)}
1
+ ._checkbox-button-bar__container_5gd9n_1{display:flex;flex-wrap:wrap}._checkbox-button-bar__container--label-left_5gd9n_5{align-items:baseline;flex-direction:row;gap:1rem}._checkbox-button-bar__container--label-top_5gd9n_10{align-items:flex-start;flex-direction:column;gap:.5rem}._checkbox-button-bar__row-container_5gd9n_15{display:flex;flex-direction:column;gap:.5rem}._checkbox-button-bar__row_5gd9n_15{align-items:center;background-color:var(--new-color-uva-white);border:1px solid var(--new-color-grey-700);border-radius:.5rem;display:flex;flex-wrap:nowrap;gap:.25rem;padding:.25rem}._checkbox-button-bar__row--not-validated_5gd9n_30{border-color:var(--new-color-red-600)}._checkbox-button-bar__footer_5gd9n_33{color:var(--new-color-grey-700);font-size:var(--font-size-text-non-essential)}
package/dist/assets/ControlsButton.css CHANGED
@@ -1 +1 @@
1
- ._controls-button_1jd0n_1{align-items:center;background-color:var(--new-color-uva-white);border-radius:.25rem;cursor:pointer;display:inline-flex;font-size:var(--font-size-default);height:2.25rem;justify-content:center;min-width:2.25rem;padding:.5rem;position:relative;-webkit-user-select:none;user-select:none;white-space:nowrap}._controls-button--squared_1jd0n_17{width:2.25rem}._controls-input_1jd0n_21{aspect-ratio:unset;cursor:pointer;height:0;opacity:0;position:absolute;width:0}._controls-button_1jd0n_1:after{content:"";min-height:2.625rem;min-width:2.625rem;position:absolute;width:100%}._controls-input_1jd0n_21:focus-visible+label{outline:.125rem dotted var(--new-color-navy-600);outline-offset:.125rem}._controls-input_1jd0n_21:checked+label{background-color:var(--new-color-grey-200);border:1px solid var(--new-color-grey-700);font-weight:var(--semibold)}._controls-input_1jd0n_21:disabled+label,._controls-input_1jd0n_21:disabled:hover+label{background-color:var(--new-color-grey-400);color:var(--new-color-grey-700);cursor:not-allowed}._controls-input_1jd0n_21:hover+label{background-color:var(--new-color-grey-300)}._controls-button--with-prefix_1jd0n_60{height:auto;padding:.125rem .5rem;width:auto}._controls-button__wrapper_1jd0n_66{align-items:center;display:flex;flex-direction:column}._controls-button__prefix_1jd0n_72{color:var(--new-color-grey-700);font-size:var(--font-size-text-non-essential)}
1
+ ._controls-button_1jiif_1{align-items:center;background-color:var(--new-color-uva-white);border:1px solid transparent;border-radius:.25rem;box-sizing:border-box;cursor:pointer;display:inline-flex;font-size:var(--font-size-default);height:2.25rem;justify-content:center;min-width:2.25rem;padding:.5rem;position:relative;-webkit-user-select:none;user-select:none;white-space:nowrap}._controls-button--squared_1jiif_19{width:2.25rem}._controls-input_1jiif_23{aspect-ratio:unset;cursor:pointer;height:0;opacity:0;position:absolute;width:0}._controls-button_1jiif_1:after{content:"";min-height:2.625rem;min-width:2.625rem;position:absolute;width:100%}._controls-input_1jiif_23:focus-visible+label{outline:.125rem dotted var(--new-color-navy-600);outline-offset:.125rem}._controls-input_1jiif_23:checked+label{background-color:var(--new-color-grey-200);border:1px solid var(--new-color-grey-700);font-weight:var(--semibold)}._controls-input_1jiif_23:disabled+label,._controls-input_1jiif_23:disabled:hover+label{background-color:var(--new-color-grey-400);color:var(--new-color-grey-700);cursor:not-allowed}._controls-input_1jiif_23:hover+label{background-color:var(--new-color-grey-300)}._controls-button--with-prefix_1jiif_62{height:auto;padding:.125rem .5rem;width:auto}._controls-button__wrapper_1jiif_68{align-items:center;display:flex;flex-direction:column}._controls-button__prefix_1jiif_74{color:var(--new-color-grey-700);font-size:var(--font-size-text-non-essential)}
package/dist/assets/PeriodSelector.css CHANGED
@@ -1 +1 @@
1
- ._period-selector__container_d1p0j_1{display:flex;flex-wrap:wrap}._period-selector__container--label-left_d1p0j_6{flex-direction:row;gap:1rem;align-items:baseline}._period-selector__container--label-top_d1p0j_12{align-items:flex-start;flex-direction:column;gap:.5rem}._period-selector__selector-container_d1p0j_18{display:flex;flex-direction:column;line-height:1.5}._period-selector__selector-row_d1p0j_24{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.5rem}
1
+ ._period-selector__container_1txwd_1{display:flex;flex-wrap:wrap}._period-selector__container--label-left_1txwd_6{flex-direction:row;gap:1rem;align-items:baseline}._period-selector__container--label-top_1txwd_12{align-items:flex-start;flex-direction:column;gap:.5rem}._period-selector__selector-container_1txwd_18{display:flex;flex-direction:column;gap:.5rem}._period-selector__selector-row_1txwd_24{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem}
package/dist/components/CheckboxButtonBar/CheckboxButtonBar.js CHANGED
@@ -1,89 +1,71 @@
1
- import { jsxs as u, jsx as o } from "react/jsx-runtime";
2
- import { useState as N } from "react";
3
- import { c as r } from "../../clsx-OuTLNxxd.js";
4
- import { Label as C } from "../Label/Label.js";
1
+ import { jsxs as k, jsx as c } from "react/jsx-runtime";
2
+ import { useState as C } from "react";
3
+ import { c as x } from "../../clsx-OuTLNxxd.js";
4
+ import { Label as N } from "../Label/Label.js";
5
5
  import { FeedbackBox as S } from "../FeedbackBox/FeedbackBox.js";
6
6
  import { ControlsButton as j } from "../ControlsButton/ControlsButton.js";
7
- import '../../assets/CheckboxButtonBar.css';const b = {
8
- "checkbox-button-bar__container": "_checkbox-button-bar__container_148ge_1",
9
- "checkbox-button-bar__container--label-left": "_checkbox-button-bar__container--label-left_148ge_9",
10
- "checkbox-button-bar__label": "_checkbox-button-bar__label_148ge_14",
11
- "checkbox-button-bar__bar": "_checkbox-button-bar__bar_148ge_20",
12
- "checkbox-button-bar__bar--label-left": "_checkbox-button-bar__bar--label-left_148ge_25",
13
- "checkbox-button-bar__footer": "_checkbox-button-bar__footer_148ge_30",
14
- "checkbox-button-bar__footer-text": "_checkbox-button-bar__footer-text_148ge_35",
15
- "checkbox-button-bar__footer--label-left": "_checkbox-button-bar__footer--label-left_148ge_40",
16
- "checkbox-button-bar__row": "_checkbox-button-bar__row_148ge_45",
17
- "checkbox-button-bar__row--not-validated": "_checkbox-button-bar__row--not-validated_148ge_57"
7
+ import '../../assets/CheckboxButtonBar.css';const t = {
8
+ "checkbox-button-bar__container": "_checkbox-button-bar__container_5gd9n_1",
9
+ "checkbox-button-bar__container--label-left": "_checkbox-button-bar__container--label-left_5gd9n_5",
10
+ "checkbox-button-bar__container--label-top": "_checkbox-button-bar__container--label-top_5gd9n_10",
11
+ "checkbox-button-bar__row-container": "_checkbox-button-bar__row-container_5gd9n_15",
12
+ "checkbox-button-bar__row": "_checkbox-button-bar__row_5gd9n_15",
13
+ "checkbox-button-bar__row--not-validated": "_checkbox-button-bar__row--not-validated_5gd9n_30",
14
+ "checkbox-button-bar__footer": "_checkbox-button-bar__footer_5gd9n_33"
18
15
  }, B = ({
19
- checkboxes: i,
20
- defaultValues: c,
21
- label: h,
22
- labelPosition: _ = "top",
16
+ checkboxes: d,
17
+ defaultValues: r,
18
+ label: a,
19
+ labelPosition: u = "top",
23
20
  required: m = !1,
24
- notValidated: d = !1,
25
- notValidatedText: a = "",
21
+ notValidated: f = !1,
22
+ notValidatedText: b = "",
26
23
  actAsRadioButtonBar: n = !1,
27
- footerText: x = "",
28
- disableGroup: g = !1,
29
- onSetValues: k
24
+ footerText: l = "",
25
+ disableGroup: p = !1,
26
+ onSetValues: i
30
27
  }) => {
31
- const [f, s] = N(
32
- c && !n ? c.map(String) : c && n ? c.slice(0, 1) : []
33
- ), p = (t) => {
34
- let e = f;
35
- n ? (s([t]), k([t])) : (e.includes(t) ? e = e.filter((l) => l !== t) : e = [...e, t], s(e), k(e));
28
+ const [h, s] = C(
29
+ r && !n ? r.map(String) : r && n ? r.slice(0, 1) : []
30
+ ), g = (e) => {
31
+ let o = h;
32
+ n ? (s([e]), i([e])) : (o.includes(e) ? o = o.filter((_) => _ !== e) : o = [...o, e], s(o), i(o));
36
33
  };
37
- return /* @__PURE__ */ u(
34
+ return /* @__PURE__ */ k(
38
35
  "div",
39
36
  {
40
- className: r(b["checkbox-button-bar__container"], [
41
- _ === "left" && b["checkbox-button-bar__container--label-left"]
42
- ]),
37
+ className: x(
38
+ t["checkbox-button-bar__container"],
39
+ t[`checkbox-button-bar__container--label-${u}`]
40
+ ),
43
41
  children: [
44
- /* @__PURE__ */ o("div", { className: b["checkbox-button-bar__label"], children: h && /* @__PURE__ */ o(C, { htmlFor: "", required: m, children: h }) }),
45
- /* @__PURE__ */ o(
46
- "div",
47
- {
48
- className: r(b["checkbox-button-bar__bar"], [
49
- _ === "left" && b["checkbox-button-bar__bar--label-left"]
50
- ]),
51
- children: /* @__PURE__ */ o(
52
- "div",
53
- {
54
- className: r(b["checkbox-button-bar__row"], {
55
- [b["checkbox-button-bar__row--not-validated"]]: d || a
56
- }),
57
- children: i.map(({ label: t, value: e, prefix: l, disabled: v }) => /* @__PURE__ */ o(
58
- j,
59
- {
60
- type: "checkbox",
61
- label: t,
62
- prefix: l,
63
- forceSquared: !0,
64
- value: e,
65
- checked: f.includes(e),
66
- disabled: v || g,
67
- onSetValue: (w) => p(w.target.value)
68
- },
69
- `${e}`
70
- ))
71
- }
72
- )
73
- }
74
- ),
75
- /* @__PURE__ */ u(
76
- "div",
77
- {
78
- className: r(b["checkbox-button-bar__footer"], [
79
- _ === "left" && b["checkbox-button-bar__footer--label-left"]
80
- ]),
81
- children: [
82
- x && /* @__PURE__ */ o("div", { className: b["checkbox-button-bar__footer-text"], children: x }),
83
- a !== "" && /* @__PURE__ */ o(S, { level: "error", feedback: a })
84
- ]
85
- }
86
- )
42
+ a && /* @__PURE__ */ c(N, { htmlFor: "", required: m, children: a }),
43
+ /* @__PURE__ */ k("div", { className: t["checkbox-button-bar__row-container"], children: [
44
+ /* @__PURE__ */ c(
45
+ "div",
46
+ {
47
+ className: x(t["checkbox-button-bar__row"], {
48
+ [t["checkbox-button-bar__row--not-validated"]]: f || b
49
+ }),
50
+ children: d.map(({ label: e, value: o, prefix: _, disabled: w }) => /* @__PURE__ */ c(
51
+ j,
52
+ {
53
+ type: "checkbox",
54
+ label: e,
55
+ prefix: _,
56
+ forceSquared: !0,
57
+ value: o,
58
+ checked: h.includes(o),
59
+ disabled: w || p,
60
+ onSetValue: (v) => g(v.target.value)
61
+ },
62
+ `${o}`
63
+ ))
64
+ }
65
+ ),
66
+ l && /* @__PURE__ */ c("div", { className: t["checkbox-button-bar__footer"], children: l }),
67
+ b !== "" && /* @__PURE__ */ c(S, { level: "error", feedback: b })
68
+ ] })
87
69
  ]
88
70
  }
89
71
  );
package/dist/components/CheckboxButtonBar/CheckboxButtonBar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CheckboxButtonBar.js","sources":["../../../src/components/CheckboxButtonBar/CheckboxButtonBar.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport styles from './CheckboxButtonBar.module.css';\n\nimport { Label } from 'components/Label';\nimport { FeedbackBox } from 'components/FeedbackBox';\nimport { ControlsButton } from 'components/ControlsButton';\n\ntype CheckboxProps = {\n label: string;\n value: string;\n prefix?: string;\n disabled?: boolean;\n};\n\nexport interface CheckboxButtonBarProps {\n /** array with objects with label, value, prefix and disabled*/\n checkboxes: CheckboxProps[];\n //** array with value(s) */\n defaultValues?: string[];\n label?: string;\n /** 'top' | 'left' */\n labelPosition?: 'top' | 'left';\n /** `true` to show an asterisk to indicate an item is required; otherwise, `false`. */\n required?: boolean;\n /** `true` to color border red to show missing in validation; otherwise, `false`. */\n notValidated?: boolean;\n /** error text to display under the bar */\n notValidatedText?: string;\n /** returns an array with only one value */\n actAsRadioButtonBar?: boolean;\n /** optional footer text */\n footerText?: string;\n /** disables all checkboxes in the bar */\n disableGroup?: boolean;\n onSetValues: (value: string[]) => void;\n}\n\nexport const CheckboxButtonBar = ({\n checkboxes,\n defaultValues,\n label,\n labelPosition = 'top',\n required = false,\n notValidated = false,\n notValidatedText = '',\n actAsRadioButtonBar = false,\n footerText = '',\n disableGroup = false,\n onSetValues,\n}: CheckboxButtonBarProps) => {\n const [currentValues, setCurrentValues] = useState<string[]>(\n defaultValues && !actAsRadioButtonBar\n ? defaultValues.map(String)\n : defaultValues && actAsRadioButtonBar\n ? defaultValues.slice(0, 1)\n : []\n );\n\n const handleChange = (value: string) => {\n let values = currentValues;\n\n if (actAsRadioButtonBar) {\n setCurrentValues([value]);\n onSetValues([value]);\n } else {\n if (values.includes(value)) {\n values = values.filter((val) => val !== value);\n } else {\n values = [...values, value];\n }\n setCurrentValues(values);\n onSetValues(values);\n }\n };\n\n return (\n <div\n className={clsx(styles['checkbox-button-bar__container'], [\n labelPosition === 'left' && styles['checkbox-button-bar__container--label-left'],\n ])}\n >\n <div className={styles['checkbox-button-bar__label']}>\n {label && (\n <Label htmlFor=\"\" required={required}>\n {label}\n </Label>\n )}\n </div>\n <div\n className={clsx(styles['checkbox-button-bar__bar'], [\n labelPosition === 'left' && styles['checkbox-button-bar__bar--label-left'],\n ])}\n >\n <div\n className={clsx(styles['checkbox-button-bar__row'], {\n [styles['checkbox-button-bar__row--not-validated']]: notValidated || notValidatedText,\n })}\n >\n {checkboxes.map(({ label, value, prefix, disabled }) => (\n <ControlsButton\n key={`${value}`}\n type=\"checkbox\"\n label={label}\n prefix={prefix}\n forceSquared={true}\n value={value}\n checked={currentValues.includes(value)}\n disabled={disabled || disableGroup}\n onSetValue={(event) => handleChange(event.target.value)}\n />\n ))}\n </div>\n </div>\n <div\n className={clsx(styles['checkbox-button-bar__footer'], [\n labelPosition === 'left' && styles['checkbox-button-bar__footer--label-left'],\n ])}\n >\n {footerText && <div className={styles['checkbox-button-bar__footer-text']}>{footerText}</div>}\n {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n </div>\n </div>\n );\n};\n"],"names":["CheckboxButtonBar","checkboxes","defaultValues","label","labelPosition","required","notValidated","notValidatedText","actAsRadioButtonBar","footerText","disableGroup","onSetValues","currentValues","setCurrentValues","useState","handleChange","value","values","val","jsxs","clsx","styles","jsx","Label","prefix","disabled","ControlsButton","event","FeedbackBox"],"mappings":";;;;;;;;;;;;;;;;;GAuCaA,IAAoB,CAAC;AAAA,EAChC,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,UAAAC,IAAW;AAAA,EACX,cAAAC,IAAe;AAAA,EACf,kBAAAC,IAAmB;AAAA,EACnB,qBAAAC,IAAsB;AAAA,EACtB,YAAAC,IAAa;AAAA,EACb,cAAAC,IAAe;AAAA,EACf,aAAAC;AACF,MAA8B;AAC5B,QAAM,CAACC,GAAeC,CAAgB,IAAIC;AAAA,IACxCZ,KAAiB,CAACM,IACdN,EAAc,IAAI,MAAM,IACxBA,KAAiBM,IACfN,EAAc,MAAM,GAAG,CAAC,IACxB,CAAA;AAAA,EAAC,GAGHa,IAAe,CAACC,MAAkB;AACtC,QAAIC,IAASL;AAEb,IAAIJ,KACFK,EAAiB,CAACG,CAAK,CAAC,GACxBL,EAAY,CAACK,CAAK,CAAC,MAEfC,EAAO,SAASD,CAAK,IACvBC,IAASA,EAAO,OAAO,CAACC,MAAQA,MAAQF,CAAK,IAE7CC,IAAS,CAAC,GAAGA,GAAQD,CAAK,GAE5BH,EAAiBI,CAAM,GACvBN,EAAYM,CAAM;AAAA,EACpB;AAGF,SACE,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,gCAAgC,GAAG;AAAA,QACxDjB,MAAkB,UAAUiB,EAAO,4CAA4C;AAAA,MAAA,CAChF;AAAA,MAED,UAAA;AAAA,QAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWD,EAAO,4BAA4B,GAChD,UAAAlB,KACC,gBAAAmB,EAACC,GAAA,EAAM,SAAQ,IAAG,UAAAlB,GACf,UAAAF,EAAA,CACH,GAEJ;AAAA,QACA,gBAAAmB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWF,EAAKC,EAAO,0BAA0B,GAAG;AAAA,cAClDjB,MAAkB,UAAUiB,EAAO,sCAAsC;AAAA,YAAA,CAC1E;AAAA,YAED,UAAA,gBAAAC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWF,EAAKC,EAAO,0BAA0B,GAAG;AAAA,kBAClD,CAACA,EAAO,yCAAyC,CAAC,GAAGf,KAAgBC;AAAA,gBAAA,CACtE;AAAA,gBAEA,UAAAN,EAAW,IAAI,CAAC,EAAE,OAAAE,GAAO,OAAAa,GAAO,QAAAQ,GAAQ,UAAAC,EAAA,MACvC,gBAAAH;AAAA,kBAACI;AAAA,kBAAA;AAAA,oBAEC,MAAK;AAAA,oBACL,OAAOvB;AAAAA,oBACP,QAAAqB;AAAA,oBACA,cAAc;AAAA,oBACd,OAAAR;AAAA,oBACA,SAASJ,EAAc,SAASI,CAAK;AAAA,oBACrC,UAAUS,KAAYf;AAAA,oBACtB,YAAY,CAACiB,MAAUZ,EAAaY,EAAM,OAAO,KAAK;AAAA,kBAAA;AAAA,kBARjD,GAAGX,CAAK;AAAA,gBAAA,CAUhB;AAAA,cAAA;AAAA,YAAA;AAAA,UACH;AAAA,QAAA;AAAA,QAEF,gBAAAG;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC,EAAKC,EAAO,6BAA6B,GAAG;AAAA,cACrDjB,MAAkB,UAAUiB,EAAO,yCAAyC;AAAA,YAAA,CAC7E;AAAA,YAEA,UAAA;AAAA,cAAAZ,uBAAe,OAAA,EAAI,WAAWY,EAAO,kCAAkC,GAAI,UAAAZ,GAAW;AAAA,cACtFF,MAAqB,MAAM,gBAAAe,EAACM,KAAY,OAAM,SAAQ,UAAUrB,EAAA,CAAkB;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACrF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
1
+ {"version":3,"file":"CheckboxButtonBar.js","sources":["../../../src/components/CheckboxButtonBar/CheckboxButtonBar.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport styles from './CheckboxButtonBar.module.css';\n\nimport { Label } from 'components/Label';\nimport { FeedbackBox } from 'components/FeedbackBox';\nimport { ControlsButton } from 'components/ControlsButton';\n\ntype CheckboxProps = {\n label: string;\n value: string;\n prefix?: string;\n disabled?: boolean;\n};\n\nexport interface CheckboxButtonBarProps {\n /** array with objects with label, value, prefix and disabled*/\n checkboxes: CheckboxProps[];\n //** array with value(s) */\n defaultValues?: string[];\n label?: string;\n /** 'top' | 'left' */\n labelPosition?: 'top' | 'left';\n /** `true` to show an asterisk to indicate an item is required; otherwise, `false`. */\n required?: boolean;\n /** `true` to color border red to show missing in validation; otherwise, `false`. */\n notValidated?: boolean;\n /** error text to display under the bar */\n notValidatedText?: string;\n /** returns an array with only one value */\n actAsRadioButtonBar?: boolean;\n /** optional footer text */\n footerText?: string;\n /** disables all checkboxes in the bar */\n disableGroup?: boolean;\n onSetValues: (value: string[]) => void;\n}\n\nexport const CheckboxButtonBar = ({\n checkboxes,\n defaultValues,\n label,\n labelPosition = 'top',\n required = false,\n notValidated = false,\n notValidatedText = '',\n actAsRadioButtonBar = false,\n footerText = '',\n disableGroup = false,\n onSetValues,\n}: CheckboxButtonBarProps) => {\n const [currentValues, setCurrentValues] = useState<string[]>(\n defaultValues && !actAsRadioButtonBar\n ? defaultValues.map(String)\n : defaultValues && actAsRadioButtonBar\n ? defaultValues.slice(0, 1)\n : []\n );\n\n const handleChange = (value: string) => {\n let values = currentValues;\n\n if (actAsRadioButtonBar) {\n setCurrentValues([value]);\n onSetValues([value]);\n } else {\n if (values.includes(value)) {\n values = values.filter((val) => val !== value);\n } else {\n values = [...values, value];\n }\n setCurrentValues(values);\n onSetValues(values);\n }\n };\n\n return (\n <div\n className={clsx(\n styles['checkbox-button-bar__container'],\n styles[`checkbox-button-bar__container--label-${labelPosition}`]\n )}\n >\n {label && (\n <Label htmlFor=\"\" required={required}>\n {label}\n </Label>\n )}\n <div className={styles['checkbox-button-bar__row-container']}>\n <div\n className={clsx(styles['checkbox-button-bar__row'], {\n [styles['checkbox-button-bar__row--not-validated']]: notValidated || notValidatedText,\n })}\n >\n {checkboxes.map(({ label, value, prefix, disabled }) => (\n <ControlsButton\n key={`${value}`}\n type=\"checkbox\"\n label={label}\n prefix={prefix}\n forceSquared={true}\n value={value}\n checked={currentValues.includes(value)}\n disabled={disabled || disableGroup}\n onSetValue={(event) => handleChange(event.target.value)}\n />\n ))}\n </div>\n {footerText && <div className={styles['checkbox-button-bar__footer']}>{footerText}</div>}\n {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n </div>\n </div>\n );\n};\n"],"names":["CheckboxButtonBar","checkboxes","defaultValues","label","labelPosition","required","notValidated","notValidatedText","actAsRadioButtonBar","footerText","disableGroup","onSetValues","currentValues","setCurrentValues","useState","handleChange","value","values","val","jsxs","clsx","styles","jsx","Label","prefix","disabled","ControlsButton","event","FeedbackBox"],"mappings":";;;;;;;;;;;;;;GAuCaA,IAAoB,CAAC;AAAA,EAChC,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,UAAAC,IAAW;AAAA,EACX,cAAAC,IAAe;AAAA,EACf,kBAAAC,IAAmB;AAAA,EACnB,qBAAAC,IAAsB;AAAA,EACtB,YAAAC,IAAa;AAAA,EACb,cAAAC,IAAe;AAAA,EACf,aAAAC;AACF,MAA8B;AAC5B,QAAM,CAACC,GAAeC,CAAgB,IAAIC;AAAA,IACxCZ,KAAiB,CAACM,IACdN,EAAc,IAAI,MAAM,IACxBA,KAAiBM,IACfN,EAAc,MAAM,GAAG,CAAC,IACxB,CAAA;AAAA,EAAC,GAGHa,IAAe,CAACC,MAAkB;AACtC,QAAIC,IAASL;AAEb,IAAIJ,KACFK,EAAiB,CAACG,CAAK,CAAC,GACxBL,EAAY,CAACK,CAAK,CAAC,MAEfC,EAAO,SAASD,CAAK,IACvBC,IAASA,EAAO,OAAO,CAACC,MAAQA,MAAQF,CAAK,IAE7CC,IAAS,CAAC,GAAGA,GAAQD,CAAK,GAE5BH,EAAiBI,CAAM,GACvBN,EAAYM,CAAM;AAAA,EACpB;AAGF,SACE,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACTC,EAAO,gCAAgC;AAAA,QACvCA,EAAO,yCAAyCjB,CAAa,EAAE;AAAA,MAAA;AAAA,MAGhE,UAAA;AAAA,QAAAD,KACC,gBAAAmB,EAACC,GAAA,EAAM,SAAQ,IAAG,UAAAlB,GACf,UAAAF,GACH;AAAA,QAEF,gBAAAgB,EAAC,OAAA,EAAI,WAAWE,EAAO,oCAAoC,GACzD,UAAA;AAAA,UAAA,gBAAAC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWF,EAAKC,EAAO,0BAA0B,GAAG;AAAA,gBAClD,CAACA,EAAO,yCAAyC,CAAC,GAAGf,KAAgBC;AAAA,cAAA,CACtE;AAAA,cAEA,UAAAN,EAAW,IAAI,CAAC,EAAE,OAAAE,GAAO,OAAAa,GAAO,QAAAQ,GAAQ,UAAAC,EAAA,MACvC,gBAAAH;AAAA,gBAACI;AAAA,gBAAA;AAAA,kBAEC,MAAK;AAAA,kBACL,OAAOvB;AAAAA,kBACP,QAAAqB;AAAA,kBACA,cAAc;AAAA,kBACd,OAAAR;AAAA,kBACA,SAASJ,EAAc,SAASI,CAAK;AAAA,kBACrC,UAAUS,KAAYf;AAAA,kBACtB,YAAY,CAACiB,MAAUZ,EAAaY,EAAM,OAAO,KAAK;AAAA,gBAAA;AAAA,gBARjD,GAAGX,CAAK;AAAA,cAAA,CAUhB;AAAA,YAAA;AAAA,UAAA;AAAA,UAEFP,KAAc,gBAAAa,EAAC,OAAA,EAAI,WAAWD,EAAO,6BAA6B,GAAI,UAAAZ,GAAW;AAAA,UACjFF,MAAqB,MAAM,gBAAAe,EAACM,KAAY,OAAM,SAAQ,UAAUrB,EAAA,CAAkB;AAAA,QAAA,EAAA,CACrF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
package/dist/components/ControlsButton/ControlsButton.js CHANGED
@@ -1,49 +1,49 @@
1
- import { jsxs as _, Fragment as b, jsx as r } from "react/jsx-runtime";
2
- import { useId as m } from "react";
3
- import { c as h } from "../../clsx-OuTLNxxd.js";
1
+ import { jsxs as i, Fragment as b, jsx as n } from "react/jsx-runtime";
2
+ import { useId as d } from "react";
3
+ import { c as m } from "../../clsx-OuTLNxxd.js";
4
4
  import '../../assets/ControlsButton.css';const t = {
5
- "controls-button": "_controls-button_1jd0n_1",
6
- "controls-button--squared": "_controls-button--squared_1jd0n_17",
7
- "controls-input": "_controls-input_1jd0n_21",
8
- "controls-button--with-prefix": "_controls-button--with-prefix_1jd0n_60",
9
- "controls-button__wrapper": "_controls-button__wrapper_1jd0n_66",
10
- "controls-button__prefix": "_controls-button__prefix_1jd0n_72"
5
+ "controls-button": "_controls-button_1jiif_1",
6
+ "controls-button--squared": "_controls-button--squared_1jiif_19",
7
+ "controls-input": "_controls-input_1jiif_23",
8
+ "controls-button--with-prefix": "_controls-button--with-prefix_1jiif_62",
9
+ "controls-button__wrapper": "_controls-button__wrapper_1jiif_68",
10
+ "controls-button__prefix": "_controls-button__prefix_1jiif_74"
11
11
  }, w = ({
12
- type: e = "checkbox",
12
+ type: _ = "checkbox",
13
13
  label: o,
14
- value: l,
15
- prefix: n,
14
+ value: e,
15
+ prefix: r,
16
16
  name: s,
17
- forceSquared: u = !1,
18
- checked: i,
17
+ forceSquared: l = !1,
18
+ checked: u,
19
19
  disabled: p,
20
20
  onSetValue: a
21
21
  }) => {
22
- const c = m();
23
- return /* @__PURE__ */ _(b, { children: [
24
- /* @__PURE__ */ r(
22
+ const c = d();
23
+ return /* @__PURE__ */ i(b, { children: [
24
+ /* @__PURE__ */ n(
25
25
  "input",
26
26
  {
27
- type: e,
27
+ type: _,
28
28
  id: `${c}${o.replace(/\s+/g, "_")}`,
29
29
  name: s || o.replace(/\s+/g, "_"),
30
30
  disabled: p,
31
- value: l,
32
- checked: i,
33
- onChange: (d) => a(d),
31
+ value: e,
32
+ checked: u,
33
+ onChange: (f) => a(f),
34
34
  className: t["controls-input"]
35
35
  }
36
36
  ),
37
- /* @__PURE__ */ r(
37
+ /* @__PURE__ */ n(
38
38
  "label",
39
39
  {
40
40
  htmlFor: `${c}${o.replace(/\s+/g, "_")}`,
41
- className: h(t["controls-button"], [
42
- u && t["controls-button--squared"],
43
- n && t["controls-button--with-prefix"]
41
+ className: m(t["controls-button"], [
42
+ l && t["controls-button--squared"],
43
+ r && t["controls-button--with-prefix"]
44
44
  ]),
45
- children: /* @__PURE__ */ _("div", { className: t["controls-button__wrapper"], children: [
46
- n && /* @__PURE__ */ r("div", { className: t["controls-button__prefix"], children: n }),
45
+ children: /* @__PURE__ */ i("div", { className: t["controls-button__wrapper"], children: [
46
+ r && /* @__PURE__ */ n("div", { className: t["controls-button__prefix"], children: r }),
47
47
  o
48
48
  ] })
49
49
  }
package/dist/components/MultiSelectBox/MultiSelectBox.js CHANGED
@@ -94,7 +94,7 @@ import '../../assets/MultiSelectBox.css';const r = {
94
94
  ), z = (e, t) => {
95
95
  if (t.disabled || e.target.tagName === "INPUT") return;
96
96
  const o = n.some((i) => i.value === t.value) ? n.filter((i) => i.value !== t.value) : [...n, t];
97
- h(o), k(o.length), m(o), M();
97
+ h(o), k(o.length), m(o);
98
98
  }, U = g(
99
99
  (e) => {
100
100
  const { checked: t, value: l } = e.target;
@@ -104,8 +104,9 @@ import '../../assets/MultiSelectBox.css';const r = {
104
104
  i && o.push(i);
105
105
  } else
106
106
  o = o.filter((i) => i.value !== l);
107
- h(o), k(o.length), m(o);
107
+ h(o), k(o.length), m(o), M();
108
108
  },
109
+ // eslint-disable-next-line react-hooks/exhaustive-deps
109
110
  [c, n, m]
110
111
  );
111
112
  return w(() => {
package/dist/components/MultiSelectBox/MultiSelectBox.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"MultiSelectBox.js","sources":["../../../src/components/MultiSelectBox/MultiSelectBox.tsx"],"sourcesContent":["import { useRef, useState, useId, useEffect, useCallback } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { KeyboardEvent, ChangeEvent, MouseEvent } from 'react';\n\nimport styles from './MultiSelectBox.module.css';\n\nimport { Icon } from 'components/Icon';\nimport { Checkbox } from 'components/Checkbox';\nimport { usePositionedFloaters } from 'components/hooks/usePositionedFloaters';\n\nexport type MultiSelectData = {\n label: string;\n value: string | number;\n disabled?: boolean;\n};\n\nexport interface MultiSelectBoxProps {\n /** Array of label, values pairs */\n selectData: MultiSelectData[];\n /** Retuns selected label, values */\n onChange: (values: MultiSelectData[]) => void;\n /** Array of label, value pairs that should be check by default */\n defaultSelectedItems?: MultiSelectData[];\n /** Suffix label in the selectbutton '[count] selected' */\n labelSuffix?: string;\n /** Disables the multiselect */\n disabled?: boolean;\n /** If true sets the option dropdown min-width to the width of the select button. */\n fullWidth?: boolean;\n /** Dark border. */\n darkBorder?: boolean;\n /** The max height of the options. */\n maxOptionHeight?: `${number}${'px' | 'rem'}`;\n /** `true` to align the right side of the options with the select box; otherwise, `false` to align on the left side. */\n optionPositionRight?: boolean;\n}\n\nexport const MultiSelectBox = ({\n selectData,\n onChange,\n defaultSelectedItems,\n labelSuffix = 'geselecteerd',\n disabled = false,\n fullWidth = false,\n darkBorder = false,\n maxOptionHeight,\n optionPositionRight,\n}: MultiSelectBoxProps) => {\n const multiselectboxId = useId();\n const [selectedItems, setSelectedItems] = useState<MultiSelectData[]>(defaultSelectedItems || []);\n const [selectedItemsCount, setSelectedItemsCount] = useState(defaultSelectedItems?.length || 0);\n const [isOpen, setIsOpen] = useState(false);\n const [activeIndex, setActiveIndex] = useState(-1);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const optionListRef = useRef<HTMLUListElement>(null);\n\n const [positionElement, setPositionElement] = useState<HTMLElement | null>(null);\n const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);\n const { style: positionStyle, updatePosition } = usePositionedFloaters(positionElement, referenceElement, {\n mouseEvent: 'click',\n position: 'bottomLeft',\n offset: 4,\n maxFixedHeight: maxOptionHeight,\n horizontalPosition: optionPositionRight ? 'right' : 'left',\n mobileBreakpoint: '28rem',\n fullWidth,\n });\n\n const onMouseEventOutside = useCallback(\n ({ target }: Event | MouseEvent) => {\n if (!target || !wrapperRef.current) return;\n\n if (!wrapperRef.current.contains(target as Node)) {\n setIsOpen(false);\n }\n },\n [setIsOpen]\n );\n\n const onTriggerKeyDown = useCallback(\n (event: KeyboardEvent<HTMLButtonElement>) => {\n switch (event.key) {\n case 'Enter':\n event.preventDefault();\n setIsOpen(true);\n break;\n case 'Escape':\n if (isOpen) {\n event.stopPropagation();\n setIsOpen(false);\n }\n break;\n default:\n break;\n }\n },\n [isOpen]\n );\n\n const onOptionKeyDown = useCallback(\n (event: KeyboardEvent<HTMLLIElement>) => {\n if (!isOpen) return;\n\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n setActiveIndex((prev) => {\n let nextIndex = prev;\n do {\n nextIndex = nextIndex < selectData.length - 1 ? nextIndex + 1 : 0;\n } while (selectData[nextIndex]?.disabled);\n return nextIndex;\n });\n break;\n case 'ArrowUp':\n event.preventDefault();\n setActiveIndex((prev) => {\n let nextIndex = prev;\n do {\n nextIndex = nextIndex <= 0 ? selectData.length - 1 : nextIndex - 1;\n } while (selectData[nextIndex]?.disabled);\n return nextIndex;\n });\n break;\n case 'Enter': {\n event.preventDefault();\n const selectedItem = selectData[activeIndex];\n if (!selectedItem || selectedItem.disabled) break;\n const isAlreadySelected = selectedItems.some((item) => item.value === selectedItem.value);\n const updatedSelectedItems = isAlreadySelected\n ? selectedItems.filter((item) => item.value !== selectedItem.value)\n : [...selectedItems, selectedItem];\n\n setSelectedItems(updatedSelectedItems);\n setSelectedItemsCount(updatedSelectedItems.length);\n onChange(updatedSelectedItems);\n break;\n }\n case 'Tab':\n event.preventDefault();\n setIsOpen(false);\n break;\n case 'Escape':\n event.stopPropagation();\n setIsOpen(false);\n break;\n default:\n break;\n }\n },\n [activeIndex, isOpen, selectData, selectedItems, onChange]\n );\n\n const onOptionClick = (event: MouseEvent<HTMLLIElement>, option: MultiSelectData) => {\n if (option.disabled) return;\n\n // Prevent toggle if click originated from the checkbox\n if ((event.target as HTMLElement).tagName === 'INPUT') return;\n\n const isAlreadySelected = selectedItems.some((item) => item.value === option.value);\n const updatedSelectedItems = isAlreadySelected\n ? selectedItems.filter((item) => item.value !== option.value)\n : [...selectedItems, option];\n\n setSelectedItems(updatedSelectedItems);\n setSelectedItemsCount(updatedSelectedItems.length);\n onChange(updatedSelectedItems);\n updatePosition();\n };\n\n const handleSelect = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const { checked, value } = event.target;\n let updatedSelectedItems = [...selectedItems];\n\n if (checked) {\n const selectedItem = selectData.find((item) => item.value === value);\n if (selectedItem) {\n updatedSelectedItems.push(selectedItem);\n }\n } else {\n updatedSelectedItems = updatedSelectedItems.filter((item) => item.value !== value);\n }\n\n setSelectedItems(updatedSelectedItems);\n setSelectedItemsCount(updatedSelectedItems.length);\n onChange(updatedSelectedItems);\n },\n [selectData, selectedItems, onChange]\n );\n\n useEffect(() => {\n if (isOpen) {\n setActiveIndex(0);\n }\n }, [isOpen]);\n\n useEffect(() => {\n const activeOption = optionListRef.current?.children[activeIndex] as HTMLElement;\n activeOption?.focus();\n }, [activeIndex]);\n\n useEffect(() => {\n if (!isOpen) return;\n\n document.addEventListener('click', onMouseEventOutside, true);\n document.addEventListener('scroll', onMouseEventOutside, true);\n\n return () => {\n document.removeEventListener('click', onMouseEventOutside, true);\n document.removeEventListener('scroll', onMouseEventOutside, true);\n };\n }, [onMouseEventOutside, isOpen]);\n\n return (\n <div className={styles['multi-select-box-wrapper']} ref={wrapperRef}>\n <button\n className={clsx(styles['multi-select-box-trigger'], {\n [styles['multi-select-box-trigger--darkBorder']]: darkBorder,\n })}\n type=\"button\"\n onClick={() => {\n setIsOpen(!isOpen);\n }}\n onKeyDown={onTriggerKeyDown}\n aria-expanded={isOpen}\n aria-haspopup=\"listbox\"\n aria-label={`${selectedItemsCount} ${labelSuffix}`}\n disabled={disabled}\n {...(isOpen && { 'aria-controls': multiselectboxId })}\n ref={setReferenceElement}\n >\n <span className={styles['multi-select-box-trigger-label']}>\n {selectedItemsCount} {labelSuffix}\n </span>\n <Icon\n className={clsx(styles['multi-select-box-trigger-icon'], {\n [styles['multi-select-box-trigger-icon--open']]: isOpen,\n })}\n name=\"CheveronDown\"\n size={16}\n />\n </button>\n\n <div\n id={multiselectboxId}\n className={clsx(styles['multi-select-box-listbox--wrapper'])}\n style={{ ...positionStyle.style, visibility: isOpen ? 'visible' : 'hidden' }}\n role=\"listbox\"\n ref={setPositionElement}\n >\n <ul className={styles['multi-select-box-listbox']} ref={optionListRef}>\n {selectData.map(({ label, value, disabled }, index) => (\n <li\n className={clsx(styles['multi-select-box-listbox-option'], {\n [styles['multi-select-box-listbox-option--active']]: index === activeIndex,\n [styles['multi-select-box-listbox-option--disabled']]: disabled,\n })}\n key={value}\n role=\"option\"\n onKeyDown={onOptionKeyDown}\n onClick={(event) => onOptionClick(event, { label, value, disabled })}\n onMouseOver={() => setActiveIndex(index)}\n onFocus={() => setActiveIndex(index)}\n tabIndex={0}\n aria-selected={selectedItems.some((item) => item.value === value)}\n >\n <label htmlFor={label} className={styles['multi-select-box-listbox-option-content']} tabIndex={-1}>\n <Checkbox\n id={`${label}-${multiselectboxId}`}\n onChange={handleSelect}\n value={value}\n tabIndex={-1}\n disabled={disabled}\n checked={selectedItems.some((item) => item.value === value)}\n />\n <span>{label}</span>\n </label>\n </li>\n ))}\n </ul>\n </div>\n </div>\n );\n};\n"],"names":["MultiSelectBox","selectData","onChange","defaultSelectedItems","labelSuffix","disabled","fullWidth","darkBorder","maxOptionHeight","optionPositionRight","multiselectboxId","useId","selectedItems","setSelectedItems","useState","selectedItemsCount","setSelectedItemsCount","isOpen","setIsOpen","activeIndex","setActiveIndex","wrapperRef","useRef","optionListRef","positionElement","setPositionElement","referenceElement","setReferenceElement","positionStyle","updatePosition","usePositionedFloaters","onMouseEventOutside","useCallback","target","onTriggerKeyDown","event","onOptionKeyDown","prev","nextIndex","selectedItem","updatedSelectedItems","item","onOptionClick","option","handleSelect","checked","value","useEffect","styles","jsxs","clsx","jsx","Icon","label","index","Checkbox"],"mappings":"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"}
1
+ {"version":3,"file":"MultiSelectBox.js","sources":["../../../src/components/MultiSelectBox/MultiSelectBox.tsx"],"sourcesContent":["import { useRef, useState, useId, useEffect, useCallback } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { KeyboardEvent, ChangeEvent, MouseEvent } from 'react';\n\nimport styles from './MultiSelectBox.module.css';\n\nimport { Icon } from 'components/Icon';\nimport { Checkbox } from 'components/Checkbox';\nimport { usePositionedFloaters } from 'components/hooks/usePositionedFloaters';\n\nexport type MultiSelectData = {\n label: string;\n value: string | number;\n disabled?: boolean;\n};\n\nexport interface MultiSelectBoxProps {\n /** Array of label, values pairs */\n selectData: MultiSelectData[];\n /** Retuns selected label, values */\n onChange: (values: MultiSelectData[]) => void;\n /** Array of label, value pairs that should be check by default */\n defaultSelectedItems?: MultiSelectData[];\n /** Suffix label in the selectbutton '[count] selected' */\n labelSuffix?: string;\n /** Disables the multiselect */\n disabled?: boolean;\n /** If true sets the option dropdown min-width to the width of the select button. */\n fullWidth?: boolean;\n /** Dark border. */\n darkBorder?: boolean;\n /** The max height of the options. */\n maxOptionHeight?: `${number}${'px' | 'rem'}`;\n /** `true` to align the right side of the options with the select box; otherwise, `false` to align on the left side. */\n optionPositionRight?: boolean;\n}\n\nexport const MultiSelectBox = ({\n selectData,\n onChange,\n defaultSelectedItems,\n labelSuffix = 'geselecteerd',\n disabled = false,\n fullWidth = false,\n darkBorder = false,\n maxOptionHeight,\n optionPositionRight,\n}: MultiSelectBoxProps) => {\n const multiselectboxId = useId();\n const [selectedItems, setSelectedItems] = useState<MultiSelectData[]>(defaultSelectedItems || []);\n const [selectedItemsCount, setSelectedItemsCount] = useState(defaultSelectedItems?.length || 0);\n const [isOpen, setIsOpen] = useState(false);\n const [activeIndex, setActiveIndex] = useState(-1);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const optionListRef = useRef<HTMLUListElement>(null);\n\n const [positionElement, setPositionElement] = useState<HTMLElement | null>(null);\n const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);\n const { style: positionStyle, updatePosition } = usePositionedFloaters(positionElement, referenceElement, {\n mouseEvent: 'click',\n position: 'bottomLeft',\n offset: 4,\n maxFixedHeight: maxOptionHeight,\n horizontalPosition: optionPositionRight ? 'right' : 'left',\n mobileBreakpoint: '28rem',\n fullWidth,\n });\n\n const onMouseEventOutside = useCallback(\n ({ target }: Event | MouseEvent) => {\n if (!target || !wrapperRef.current) return;\n\n if (!wrapperRef.current.contains(target as Node)) {\n setIsOpen(false);\n }\n },\n [setIsOpen]\n );\n\n const onTriggerKeyDown = useCallback(\n (event: KeyboardEvent<HTMLButtonElement>) => {\n switch (event.key) {\n case 'Enter':\n event.preventDefault();\n setIsOpen(true);\n break;\n case 'Escape':\n if (isOpen) {\n event.stopPropagation();\n setIsOpen(false);\n }\n break;\n default:\n break;\n }\n },\n [isOpen]\n );\n\n const onOptionKeyDown = useCallback(\n (event: KeyboardEvent<HTMLLIElement>) => {\n if (!isOpen) return;\n\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n setActiveIndex((prev) => {\n let nextIndex = prev;\n do {\n nextIndex = nextIndex < selectData.length - 1 ? nextIndex + 1 : 0;\n } while (selectData[nextIndex]?.disabled);\n return nextIndex;\n });\n break;\n case 'ArrowUp':\n event.preventDefault();\n setActiveIndex((prev) => {\n let nextIndex = prev;\n do {\n nextIndex = nextIndex <= 0 ? selectData.length - 1 : nextIndex - 1;\n } while (selectData[nextIndex]?.disabled);\n return nextIndex;\n });\n break;\n case 'Enter': {\n event.preventDefault();\n const selectedItem = selectData[activeIndex];\n if (!selectedItem || selectedItem.disabled) break;\n const isAlreadySelected = selectedItems.some((item) => item.value === selectedItem.value);\n const updatedSelectedItems = isAlreadySelected\n ? selectedItems.filter((item) => item.value !== selectedItem.value)\n : [...selectedItems, selectedItem];\n\n setSelectedItems(updatedSelectedItems);\n setSelectedItemsCount(updatedSelectedItems.length);\n onChange(updatedSelectedItems);\n break;\n }\n case 'Tab':\n event.preventDefault();\n setIsOpen(false);\n break;\n case 'Escape':\n event.stopPropagation();\n setIsOpen(false);\n break;\n default:\n break;\n }\n },\n [activeIndex, isOpen, selectData, selectedItems, onChange]\n );\n\n const onOptionClick = (event: MouseEvent<HTMLLIElement>, option: MultiSelectData) => {\n if (option.disabled) return;\n\n // Prevent toggle if click originated from the checkbox\n if ((event.target as HTMLElement).tagName === 'INPUT') return;\n\n const isAlreadySelected = selectedItems.some((item) => item.value === option.value);\n const updatedSelectedItems = isAlreadySelected\n ? selectedItems.filter((item) => item.value !== option.value)\n : [...selectedItems, option];\n\n setSelectedItems(updatedSelectedItems);\n setSelectedItemsCount(updatedSelectedItems.length);\n onChange(updatedSelectedItems);\n };\n\n const handleSelect = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const { checked, value } = event.target;\n let updatedSelectedItems = [...selectedItems];\n\n if (checked) {\n const selectedItem = selectData.find((item) => item.value === value);\n if (selectedItem) {\n updatedSelectedItems.push(selectedItem);\n }\n } else {\n updatedSelectedItems = updatedSelectedItems.filter((item) => item.value !== value);\n }\n\n setSelectedItems(updatedSelectedItems);\n setSelectedItemsCount(updatedSelectedItems.length);\n onChange(updatedSelectedItems);\n updatePosition();\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [selectData, selectedItems, onChange]\n );\n\n useEffect(() => {\n if (isOpen) {\n setActiveIndex(0);\n }\n }, [isOpen]);\n\n useEffect(() => {\n const activeOption = optionListRef.current?.children[activeIndex] as HTMLElement;\n activeOption?.focus();\n }, [activeIndex]);\n\n useEffect(() => {\n if (!isOpen) return;\n\n document.addEventListener('click', onMouseEventOutside, true);\n document.addEventListener('scroll', onMouseEventOutside, true);\n\n return () => {\n document.removeEventListener('click', onMouseEventOutside, true);\n document.removeEventListener('scroll', onMouseEventOutside, true);\n };\n }, [onMouseEventOutside, isOpen]);\n\n return (\n <div className={styles['multi-select-box-wrapper']} ref={wrapperRef}>\n <button\n className={clsx(styles['multi-select-box-trigger'], {\n [styles['multi-select-box-trigger--darkBorder']]: darkBorder,\n })}\n type=\"button\"\n onClick={() => {\n setIsOpen(!isOpen);\n }}\n onKeyDown={onTriggerKeyDown}\n aria-expanded={isOpen}\n aria-haspopup=\"listbox\"\n aria-label={`${selectedItemsCount} ${labelSuffix}`}\n disabled={disabled}\n {...(isOpen && { 'aria-controls': multiselectboxId })}\n ref={setReferenceElement}\n >\n <span className={styles['multi-select-box-trigger-label']}>\n {selectedItemsCount} {labelSuffix}\n </span>\n <Icon\n className={clsx(styles['multi-select-box-trigger-icon'], {\n [styles['multi-select-box-trigger-icon--open']]: isOpen,\n })}\n name=\"CheveronDown\"\n size={16}\n />\n </button>\n\n <div\n id={multiselectboxId}\n className={clsx(styles['multi-select-box-listbox--wrapper'])}\n style={{ ...positionStyle.style, visibility: isOpen ? 'visible' : 'hidden' }}\n role=\"listbox\"\n ref={setPositionElement}\n >\n <ul className={styles['multi-select-box-listbox']} ref={optionListRef}>\n {selectData.map(({ label, value, disabled }, index) => (\n <li\n className={clsx(styles['multi-select-box-listbox-option'], {\n [styles['multi-select-box-listbox-option--active']]: index === activeIndex,\n [styles['multi-select-box-listbox-option--disabled']]: disabled,\n })}\n key={value}\n role=\"option\"\n onKeyDown={onOptionKeyDown}\n onClick={(event) => onOptionClick(event, { label, value, disabled })}\n onMouseOver={() => setActiveIndex(index)}\n onFocus={() => setActiveIndex(index)}\n tabIndex={0}\n aria-selected={selectedItems.some((item) => item.value === value)}\n >\n <label htmlFor={label} className={styles['multi-select-box-listbox-option-content']} tabIndex={-1}>\n <Checkbox\n id={`${label}-${multiselectboxId}`}\n onChange={handleSelect}\n value={value}\n tabIndex={-1}\n disabled={disabled}\n checked={selectedItems.some((item) => item.value === value)}\n />\n <span>{label}</span>\n </label>\n </li>\n ))}\n </ul>\n </div>\n </div>\n );\n};\n"],"names":["MultiSelectBox","selectData","onChange","defaultSelectedItems","labelSuffix","disabled","fullWidth","darkBorder","maxOptionHeight","optionPositionRight","multiselectboxId","useId","selectedItems","setSelectedItems","useState","selectedItemsCount","setSelectedItemsCount","isOpen","setIsOpen","activeIndex","setActiveIndex","wrapperRef","useRef","optionListRef","positionElement","setPositionElement","referenceElement","setReferenceElement","positionStyle","updatePosition","usePositionedFloaters","onMouseEventOutside","useCallback","target","onTriggerKeyDown","event","onOptionKeyDown","prev","nextIndex","selectedItem","updatedSelectedItems","item","onOptionClick","option","handleSelect","checked","value","useEffect","styles","jsxs","clsx","jsx","Icon","label","index","Checkbox"],"mappings":"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"}
package/dist/components/PeriodSelector/PeriodSelector.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsxs as f, jsx as l } from "react/jsx-runtime";
2
- import { c as x } from "../../clsx-OuTLNxxd.js";
2
+ import { c as k } from "../../clsx-OuTLNxxd.js";
3
3
  import { useRef as v, useState as M, useEffect as $ } from "react";
4
4
  import "../Buttons/Button.js";
5
5
  import "../Buttons/LinkButton.js";
@@ -10,12 +10,12 @@ import "@react-aria/dialog";
10
10
  import "@react-aria/focus";
11
11
  import "@react-aria/overlays";
12
12
  import "../OverlayCloseButton/OverlayCloseButton.js";
13
- import { FeedbackBox as w } from "../FeedbackBox/FeedbackBox.js";
13
+ import { FeedbackBox as B } from "../FeedbackBox/FeedbackBox.js";
14
14
  import "../GridRow/GridRow.js";
15
15
  import "../IconButton/IconButton.js";
16
16
  import "../Input/Input.js";
17
17
  import "../InputField/InputField.js";
18
- import { Label as B } from "../Label/Label.js";
18
+ import { Label as D } from "../Label/Label.js";
19
19
  import "react-router";
20
20
  import "../../TablePlugin-CI_6HCsd.js";
21
21
  import "../RteEditor/Providers/LanguageProvider.js";
@@ -27,60 +27,60 @@ import "../SelectListbox/SelectProvider.js";
27
27
  import "../Sortable/components/SortableItem.js";
28
28
  import "../../SortableProvider-l8-7ClBJ.js";
29
29
  import '../../assets/PeriodSelector.css';const s = {
30
- "period-selector__container": "_period-selector__container_d1p0j_1",
31
- "period-selector__container--label-left": "_period-selector__container--label-left_d1p0j_6",
32
- "period-selector__container--label-top": "_period-selector__container--label-top_d1p0j_12",
33
- "period-selector__selector-container": "_period-selector__selector-container_d1p0j_18",
34
- "period-selector__selector-row": "_period-selector__selector-row_d1p0j_24"
35
- }, h = 0, S = 1, E = 2, _ = 3, D = 7, I = (i) => {
30
+ "period-selector__container": "_period-selector__container_1txwd_1",
31
+ "period-selector__container--label-left": "_period-selector__container--label-left_1txwd_6",
32
+ "period-selector__container--label-top": "_period-selector__container--label-top_1txwd_12",
33
+ "period-selector__selector-container": "_period-selector__selector-container_1txwd_18",
34
+ "period-selector__selector-row": "_period-selector__selector-row_1txwd_24"
35
+ }, h = 0, S = 1, E = 2, _ = 3, I = 7, j = (i) => {
36
36
  const n = [];
37
- for (let t = 0; t < i.length; t += _)
38
- n.push(i.slice(t, t + _));
37
+ for (let o = 0; o < i.length; o += _)
38
+ n.push(i.slice(o, o + _));
39
39
  return n;
40
40
  }, se = ({
41
- maxPeriods: i = D,
41
+ maxPeriods: i = I,
42
42
  defaultValues: n,
43
- label: t,
43
+ label: o,
44
44
  labelPosition: b = "top",
45
45
  required: m = !1,
46
46
  notValidatedText: p = "",
47
- onChange: g
47
+ onChange: x
48
48
  }) => {
49
- const R = Array.from({ length: i }, (e, r) => r + 1), a = I(R), j = a.map((e, r) => e.map((o) => ({
50
- label: `${r + 1}${e.length === 1 ? "" : `.${(o - 1) % _ + 1}`}`,
51
- value: o.toString()
49
+ const g = Array.from({ length: i }, (e, r) => r + 1), a = j(g), w = a.map((e, r) => e.map((t) => ({
50
+ label: `${r + 1}${e.length === 1 ? "" : `.${(t - 1) % _ + 1}`}`,
51
+ value: t.toString()
52
52
  }))), c = v(
53
53
  a.map(
54
- (e) => e.reduce((r, o) => (n?.includes(o) && r.push(o), r), [])
54
+ (e) => e.reduce((r, t) => (n?.includes(t) && r.push(t), r), [])
55
55
  )
56
- ), [P, d] = M([]), u = (e) => e[h].length !== 0 || e[S].length !== 0 ? [E] : e[E].length !== 0 ? [h, S] : [], k = (e, r) => {
57
- c.current[r] = e.map((o) => Number(o)), d(u(c.current)), g([...c.current.flat()].sort());
56
+ ), [R, d] = M([]), u = (e) => e[h].length !== 0 || e[S].length !== 0 ? [E] : e[E].length !== 0 ? [h, S] : [], P = (e, r) => {
57
+ c.current[r] = e.map((t) => Number(t)), d(u(c.current)), x([...c.current.flat()].sort());
58
58
  };
59
59
  return $(() => {
60
60
  d(u(c.current));
61
61
  }, []), /* @__PURE__ */ f(
62
62
  "div",
63
63
  {
64
- className: x(
64
+ className: k(
65
65
  s["period-selector__container"],
66
66
  s[`period-selector__container--label-${b}`]
67
67
  ),
68
68
  children: [
69
- t && /* @__PURE__ */ l(B, { htmlFor: "", required: m, children: t }),
69
+ o && /* @__PURE__ */ l(D, { htmlFor: "", required: m, children: o }),
70
70
  /* @__PURE__ */ f("div", { className: s["period-selector__selector-container"], children: [
71
- /* @__PURE__ */ l("div", { className: s["period-selector__selector-row"], children: j.map((e, r) => /* @__PURE__ */ l(
71
+ /* @__PURE__ */ l("div", { className: s["period-selector__selector-row"], children: w.map((e, r) => /* @__PURE__ */ l(
72
72
  N,
73
73
  {
74
74
  checkboxes: e,
75
- defaultValues: c.current[r].map((o) => o.toString()),
76
- disableGroup: P.includes(r),
75
+ defaultValues: c.current[r].map((t) => t.toString()),
76
+ disableGroup: R.includes(r),
77
77
  required: m,
78
- onSetValues: (o) => k(o, r),
78
+ onSetValues: (t) => P(t, r),
79
79
  notValidated: p !== ""
80
80
  },
81
81
  `group_${r}`
82
82
  )) }),
83
- p !== "" && /* @__PURE__ */ l(w, { level: "error", feedback: p })
83
+ p !== "" && /* @__PURE__ */ l(B, { level: "error", feedback: p })
84
84
  ] })
85
85
  ]
86
86
  }
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.34.9",
5
+ "version": "3.34.11",
6
6
  "type": "module",
7
7
  "main": "dist/index.js",
8
8
  "types": "dist/index.d.ts",