@uva-glass/component-library 3.22.0 → 3.24.0

package/dist/components/InfoBanner/InfoBanner.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { IconProps } from 'components/Icon';
+export interface InfoBannerProps {
+    /** The name of the icon to display in the banner. */
+    iconName?: IconProps['name'];
+    /** Content or message as sting or react component. */
+    content?: string | ReactNode;
+}
+export declare const InfoBanner: ({ iconName, content }: InfoBannerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/InfoBanner/InfoBanner.js

@@ -0,0 +1,12 @@
+import { jsxs as e, jsx as o } from "react/jsx-runtime";
+import { Icon as a } from "../Icon/Icon.js";
+import '../../assets/InfoBanner.css';const p = "_infobanner_wrapper_1ojyh_1", s = {
+  infobanner_wrapper: p
+}, f = ({ iconName: n, content: r }) => /* @__PURE__ */ e("div", { className: s.infobanner_wrapper, children: [
+  n && /* @__PURE__ */ o(a, { name: n, size: 24 }),
+  r
+] });
+export {
+  f as InfoBanner
+};
+//# sourceMappingURL=InfoBanner.js.map

package/dist/components/InfoBanner/InfoBanner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoBanner.js","sources":["../../../src/components/InfoBanner/InfoBanner.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\r\nimport type { IconProps } from 'components/Icon';\r\n\r\nimport styles from './InfoBanner.module.css';\r\n\r\nimport { Icon } from 'components/Icon';\r\n\r\nexport interface InfoBannerProps {\r\n  /** The name of the icon to display in the banner. */\r\n  iconName?: IconProps['name'];\r\n  /** Content or message as sting or react component. */\r\n  content?: string | ReactNode;\r\n}\r\n\r\nexport const InfoBanner = ({ iconName, content }: InfoBannerProps) => {\r\n  return (\r\n    <div className={styles['infobanner_wrapper']}>\r\n      {iconName && <Icon name={iconName} size={24} />}\r\n      {content}\r\n    </div>\r\n  );\r\n};\r\n"],"names":["InfoBanner","iconName","content","jsxs","styles","jsx","Icon"],"mappings":";;;;GAcaA,IAAa,CAAC,EAAE,UAAAC,GAAU,SAAAC,QAElC,gBAAAC,EAAA,OAAA,EAAI,WAAWC,EAAO,oBACpB,UAAA;AAAA,EAAAH,KAAa,gBAAAI,EAAAC,GAAA,EAAK,MAAML,GAAU,MAAM,IAAI;AAAA,EAC5CC;AAAA,GACH;"}

package/dist/components/InfoBanner/InfoBanner.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { InfoBannerProps } from 'components/InfoBanner';
+declare const _default: Meta<InfoBannerProps>;
+export default _default;
+export declare const InfoBannerExample: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, InfoBannerProps>;

package/dist/components/InfoBanner/InfoBanner.stories.js

@@ -0,0 +1,23 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { InfoBanner as n } from "./InfoBanner.js";
+const r = "<InfoBanner iconName={string} content={ReactNode} />", m = {
+  title: "Atoms/InfoBanner",
+  component: n,
+  argTypes: {},
+  parameters: {
+    inspectComponent: n,
+    codeString: r
+  }
+}, a = (o) => /* @__PURE__ */ e(n, { ...o }), s = a.bind({});
+s.args = {
+  content: /* @__PURE__ */ t("span", { children: [
+    "Je voert de roosterwensen in voor ",
+    /* @__PURE__ */ e("strong", { children: "vakaanbieding 2." })
+  ] }),
+  iconName: "CalendarEdit"
+};
+export {
+  s as InfoBannerExample,
+  m as default
+};
+//# sourceMappingURL=InfoBanner.stories.js.map

package/dist/components/InfoBanner/InfoBanner.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoBanner.stories.js","sources":["../../../src/components/InfoBanner/InfoBanner.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\r\nimport type { InfoBannerProps } from 'components/InfoBanner';\r\n\r\nimport { InfoBanner } from 'components/InfoBanner';\r\n\r\nconst codeString = `<InfoBanner iconName={string} content={ReactNode} />`;\r\n\r\n// eslint-disable-next-line import/no-default-export\r\nexport default {\r\n  title: 'Atoms/InfoBanner',\r\n  component: InfoBanner,\r\n  argTypes: {},\r\n  parameters: {\r\n    inspectComponent: InfoBanner,\r\n    codeString: codeString,\r\n  },\r\n} as Meta<InfoBannerProps>;\r\n\r\nconst Template: StoryFn<InfoBannerProps> = (args) => <InfoBanner {...args} />;\r\n\r\nexport const InfoBannerExample = Template.bind({});\r\nInfoBannerExample.args = {\r\n  content: (\r\n    <span>\r\n      Je voert de roosterwensen in voor <strong>vakaanbieding 2.</strong>\r\n    </span>\r\n  ),\r\n  iconName: 'CalendarEdit',\r\n};\r\n"],"names":["codeString","InfoBanner_stories","InfoBanner","Template","args","jsx","InfoBannerExample"],"mappings":";;AAKA,MAAMA,IAAa,wDAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU,CAAC;AAAA,EACX,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAqC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAY,GAAGE,GAAM,GAE9DE,IAAoBH,EAAS,KAAK,CAAE,CAAA;AACjDG,EAAkB,OAAO;AAAA,EACvB,2BACG,QAAK,EAAA,UAAA;AAAA,IAAA;AAAA,IAC8B,gBAAAD,EAAC,YAAO,UAAgB,mBAAA,CAAA;AAAA,EAAA,GAC5D;AAAA,EAEF,UAAU;AACZ;"}

package/dist/components/InfoBanner/index.d.ts

@@ -0,0 +1 @@
+export * from './InfoBanner';

package/dist/components/InfoBanner/index.js

@@ -0,0 +1,5 @@
+import { InfoBanner as r } from "./InfoBanner.js";
+export {
+  r as InfoBanner
+};
+//# sourceMappingURL=index.js.map

package/dist/components/InfoBanner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/Input/Input.js

@@ -1,28 +1,28 @@
 import { jsx as _ } from "react/jsx-runtime";
-import { forwardRef as h } from "react";
-import { c } from "../../clsx-OuTLNxxd.js";
-import '../../assets/Input.css';const f = "_input_1hohz_1", t = {
-  input: f,
-  "input--numeric": "_input--numeric_1hohz_13",
-  "input--error": "_input--error_1hohz_18",
-  "input--full-with": "_input--full-with_1hohz_23"
-}, w = h(function({ id: r, appearance: n, type: i = "text", isNumeric: u, fullWidth: o, ...p }, e) {
+import { forwardRef as c } from "react";
+import { c as f } from "../../clsx-OuTLNxxd.js";
+import '../../assets/Input.css';const m = "_input_1jwvu_1", t = {
+  input: m,
+  "input--numeric": "_input--numeric_1jwvu_13",
+  "input--error": "_input--error_1jwvu_18",
+  "input--full-with": "_input--full-with_1jwvu_23"
+}, a = c(function({ id: u, appearance: r, type: n = "text", isNumeric: i, fullWidth: p, ...o }, e) {
   return /* @__PURE__ */ _(
     "input",
     {
-      ...p,
+      ...o,
       ref: e,
-      id: r,
-      className: c(t.input, {
-        [t["input--error"]]: n === "error",
-        [t["input--full-with"]]: o,
-        [t["input--numeric"]]: u
+      id: u,
+      className: f(t.input, {
+        [t["input--error"]]: r === "error",
+        [t["input--full-with"]]: p,
+        [t["input--numeric"]]: i
       }),
-      type: i
+      type: n
     }
   );
 });
 export {
-  w as Input
+  a as Input
 };
 //# sourceMappingURL=Input.js.map

package/dist/components/InputField/InputField.stories.js

@@ -16,7 +16,7 @@ import "../GridRow/GridRow.js";
 import "../IconButton/IconButton.js";
 import "../Input/Input.js";
 import "react-router";
-import "../../TablePlugin-CrCof8yO.js";
+import "../../TablePlugin-Bj5FObQ_.js";
 import "../RteEditor/Providers/LanguageProvider.js";
 import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
 import "../RteEditor/hooks/components/Flyout.js";
@@ -24,7 +24,7 @@ import "../../index-DllfJcv4.js";
 import "../SelectListbox/SelectListbox.js";
 import "../SelectListbox/SelectProvider.js";
 import "../Sortable/components/SortableItem.js";
-import "../../SortableProvider-B3_u0pKv.js";
+import "../../SortableProvider-CwX1lFMa.js";
 const f = `
 // Has all HTMLInputElement props available except "className" and "style" 
 <InputField aria-labelledby={aria-labelledby} id={id} onChange={onChangeFunction}

package/dist/components/MultiSelect/MultiSelect.js

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
 import "../../clsx-OuTLNxxd.js";
 import "../../MultiSelectItem-DbOdEllV.js";
-import { M as p } from "../../TablePlugin-CrCof8yO.js";
+import { M as p } from "../../TablePlugin-Bj5FObQ_.js";
 export {
   p as MultiSelect
 };

package/dist/components/MultiSelect/MultiSelect.stories.js

@@ -1,7 +1,7 @@
 import { jsxs as S, jsx as r } from "react/jsx-runtime";
 import { fn as d } from "../../index-Dwqes6RH.js";
 import { useState as p } from "react";
-import { M as e } from "../../TablePlugin-CrCof8yO.js";
+import { M as e } from "../../TablePlugin-Bj5FObQ_.js";
 import { Container as M } from "../../storyComponents/Container/Container.js";
 const C = `
   // MultiSelectHeader can be added optionally

package/dist/components/MultiSelect/components/MultiSelectHeader.js

@@ -15,7 +15,7 @@ import "../../IconButton/IconButton.js";
 import "../../Input/Input.js";
 import "../../InputField/InputField.js";
 import "react-router";
-import { a as y } from "../../../TablePlugin-CrCof8yO.js";
+import { a as y } from "../../../TablePlugin-Bj5FObQ_.js";
 import "../../RteEditor/Providers/LanguageProvider.js";
 import "../../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
 import "../../RteEditor/hooks/components/Flyout.js";
@@ -23,7 +23,7 @@ import "../../../index-DllfJcv4.js";
 import "../../SelectListbox/SelectListbox.js";
 import "../../SelectListbox/SelectProvider.js";
 import "../../Sortable/components/SortableItem.js";
-import "../../../SortableProvider-B3_u0pKv.js";
+import "../../../SortableProvider-CwX1lFMa.js";
 export {
   y as MultiSelectHeader
 };

package/dist/components/MultiSelect/index.js

@@ -1,4 +1,4 @@
-import { M as l } from "../../TablePlugin-CrCof8yO.js";
+import { M as l } from "../../TablePlugin-Bj5FObQ_.js";
 export {
   l as MultiSelect
 };

package/dist/components/MultiSelectBox/MultiSelectBox.js

@@ -1,44 +1,44 @@
-import { jsxs as f, jsx as u } from "react/jsx-runtime";
-import { useId as U, useState as b, useRef as S, useCallback as g, useEffect as w } from "react";
+import { jsxs as g, jsx as u } from "react/jsx-runtime";
+import { useId as U, useState as b, useRef as S, useCallback as _, useEffect as y } from "react";
 import { c as I } from "../../clsx-OuTLNxxd.js";
 import { Icon as H } from "../Icon/Icon.js";
 import { Checkbox as q } from "../Checkbox/Checkbox.js";
 import { usePositionedFloaters as G } from "../hooks/usePositionedFloaters.js";
 import '../../assets/MultiSelectBox.css';const n = {
-  "multi-select-box-wrapper": "_multi-select-box-wrapper_1yhht_1",
-  "multi-select-box-trigger": "_multi-select-box-trigger_1yhht_5",
-  "multi-select-box-trigger-label": "_multi-select-box-trigger-label_1yhht_32",
-  "multi-select-box-trigger-icon": "_multi-select-box-trigger-icon_1yhht_41",
-  "multi-select-box-trigger-icon--open": "_multi-select-box-trigger-icon--open_1yhht_46",
-  "multi-select-box-listbox--wrapper": "_multi-select-box-listbox--wrapper_1yhht_50",
-  "multi-select-box-listbox": "_multi-select-box-listbox_1yhht_50",
-  "multi-select-box-listbox-option": "_multi-select-box-listbox-option_1yhht_77",
-  "multi-select-box-listbox-option--active": "_multi-select-box-listbox-option--active_1yhht_88",
-  "multi-select-box-listbox-option-content": "_multi-select-box-listbox-option-content_1yhht_99",
-  "multi-select-box-listbox-option--disabled": "_multi-select-box-listbox-option--disabled_1yhht_113"
+  "multi-select-box-wrapper": "_multi-select-box-wrapper_4fwo9_1",
+  "multi-select-box-trigger": "_multi-select-box-trigger_4fwo9_5",
+  "multi-select-box-trigger-label": "_multi-select-box-trigger-label_4fwo9_32",
+  "multi-select-box-trigger-icon": "_multi-select-box-trigger-icon_4fwo9_41",
+  "multi-select-box-trigger-icon--open": "_multi-select-box-trigger-icon--open_4fwo9_46",
+  "multi-select-box-listbox--wrapper": "_multi-select-box-listbox--wrapper_4fwo9_50",
+  "multi-select-box-listbox": "_multi-select-box-listbox_4fwo9_50",
+  "multi-select-box-listbox-option": "_multi-select-box-listbox-option_4fwo9_77",
+  "multi-select-box-listbox-option--active": "_multi-select-box-listbox-option--active_4fwo9_88",
+  "multi-select-box-listbox-option-content": "_multi-select-box-listbox-option-content_4fwo9_99",
+  "multi-select-box-listbox-option--disabled": "_multi-select-box-listbox-option--disabled_4fwo9_113"
 }, Z = ({
   selectData: c,
   onChange: m,
-  defaultSelectedItems: h,
+  defaultSelectedItems: f,
   labelSuffix: E = "geselecteerd",
   disabled: P = !1,
   fullWidth: C = !1,
   maxOptionHeight: L,
   optionPositionRight: O
 }) => {
-  const _ = U(), [r, y] = b(h || []), [N, v] = b((h == null ? void 0 : h.length) || 0), [i, a] = b(!1), [d, x] = b(-1), k = S(null), A = S(null), [F, K] = b(null), [R, $] = b(null), { style: D } = G(F, R, {
+  const w = U(), [r, h] = b(f || []), [N, v] = b((f == null ? void 0 : f.length) || 0), [i, a] = b(!1), [d, x] = b(-1), k = S(null), A = S(null), [F, K] = b(null), [R, $] = b(null), { style: D } = G(F, R, {
     mouseEvent: "click",
     offset: 4,
     maxFixedHeight: L,
     horizontalPosition: O ? "right" : "left",
     mobileBreakpoint: "28rem",
     fullWidth: C
-  }), p = g(
+  }), p = _(
     ({ target: e }) => {
       !e || !k.current || k.current.contains(e) || a(!1);
     },
     [a]
-  ), M = g(
+  ), M = _(
     (e) => {
       switch (e.key) {
         case "Enter":
@@ -50,36 +50,36 @@ import '../../assets/MultiSelectBox.css';const n = {
       }
     },
     [i]
-  ), T = g(
+  ), T = _(
     (e) => {
       if (i)
         switch (e.key) {
           case "ArrowDown":
             e.preventDefault(), x((t) => {
-              var l;
-              let o = t;
+              var o;
+              let l = t;
               do
-                o = o < c.length - 1 ? o + 1 : 0;
-              while ((l = c[o]) != null && l.disabled);
-              return o;
+                l = l < c.length - 1 ? l + 1 : 0;
+              while ((o = c[l]) != null && o.disabled);
+              return l;
             });
             break;
           case "ArrowUp":
             e.preventDefault(), x((t) => {
-              var l;
-              let o = t;
+              var o;
+              let l = t;
               do
-                o = o <= 0 ? c.length - 1 : o - 1;
-              while ((l = c[o]) != null && l.disabled);
-              return o;
+                l = l <= 0 ? c.length - 1 : l - 1;
+              while ((o = c[l]) != null && o.disabled);
+              return l;
             });
             break;
           case "Enter": {
             e.preventDefault();
             const t = c[d];
             if (!t || t.disabled) break;
-            const l = r.some((s) => s.value === t.value) ? r.filter((s) => s.value !== t.value) : [...r, t];
-            y(l), v(l.length), m(l);
+            const o = r.some((s) => s.value === t.value) ? r.filter((s) => s.value !== t.value) : [...r, t];
+            h(o), v(o.length), m(o);
             break;
           }
           case "Tab":
@@ -93,34 +93,34 @@ import '../../assets/MultiSelectBox.css';const n = {
     [d, i, c, r, m]
   ), j = (e, t) => {
     if (t.disabled || e.target.tagName === "INPUT") return;
-    const l = r.some((s) => s.value === t.value) ? r.filter((s) => s.value !== t.value) : [...r, t];
-    y(l), v(l.length), m(l);
-  }, z = g(
+    const o = r.some((s) => s.value === t.value) ? r.filter((s) => s.value !== t.value) : [...r, t];
+    h(o), v(o.length), m(o);
+  }, z = _(
     (e) => {
-      const { checked: t, value: o } = e.target;
-      let l = [...r];
+      const { checked: t, value: l } = e.target;
+      let o = [...r];
       if (t) {
-        const s = c.find((B) => B.value === o);
-        s && l.push(s);
+        const s = c.find((B) => B.value === l);
+        s && o.push(s);
       } else
-        l = l.filter((s) => s.value !== o);
-      y(l), v(l.length), m(l);
+        o = o.filter((s) => s.value !== l);
+      h(o), v(o.length), m(o);
     },
     [c, r, m]
   );
-  return w(() => {
+  return y(() => {
     i && x(0);
-  }, [i]), w(() => {
+  }, [i]), y(() => {
     var t;
     const e = (t = A.current) == null ? void 0 : t.children[d];
     e == null || e.focus();
-  }, [d]), w(() => {
+  }, [d]), y(() => {
     if (i)
       return document.addEventListener("click", p, !0), document.addEventListener("scroll", p, !0), () => {
         document.removeEventListener("click", p, !0), document.removeEventListener("scroll", p, !0);
       };
-  }, [p, i]), /* @__PURE__ */ f("div", { className: n["multi-select-box-wrapper"], ref: k, children: [
-    /* @__PURE__ */ f(
+  }, [p, i]), /* @__PURE__ */ g("div", { className: n["multi-select-box-wrapper"], ref: k, children: [
+    /* @__PURE__ */ g(
       "button",
       {
         className: n["multi-select-box-trigger"],
@@ -133,10 +133,10 @@ import '../../assets/MultiSelectBox.css';const n = {
         "aria-haspopup": "listbox",
         "aria-label": `${N} ${E}`,
         disabled: P,
-        ...i && { "aria-controls": _ },
+        ...i && { "aria-controls": w },
         ref: $,
         children: [
-          /* @__PURE__ */ f("span", { className: n["multi-select-box-trigger-label"], children: [
+          /* @__PURE__ */ g("span", { className: n["multi-select-box-trigger-label"], children: [
             N,
             " ",
             E
@@ -157,34 +157,34 @@ import '../../assets/MultiSelectBox.css';const n = {
     /* @__PURE__ */ u(
       "div",
       {
-        id: _,
+        id: w,
         className: I(n["multi-select-box-listbox--wrapper"]),
         style: { ...D.style, visibility: i ? "visible" : "hidden" },
         role: "listbox",
         ref: K,
-        children: /* @__PURE__ */ u("ul", { className: n["multi-select-box-listbox"], ref: A, children: c.map(({ label: e, value: t, disabled: o }, l) => /* @__PURE__ */ u(
+        children: /* @__PURE__ */ u("ul", { className: n["multi-select-box-listbox"], ref: A, children: c.map(({ label: e, value: t, disabled: l }, o) => /* @__PURE__ */ u(
           "li",
           {
             className: I(n["multi-select-box-listbox-option"], {
-              [n["multi-select-box-listbox-option--active"]]: l === d,
-              [n["multi-select-box-listbox-option--disabled"]]: o
+              [n["multi-select-box-listbox-option--active"]]: o === d,
+              [n["multi-select-box-listbox-option--disabled"]]: l
             }),
             role: "option",
             onKeyDown: T,
-            onClick: (s) => j(s, { label: e, value: t, disabled: o }),
-            onMouseOver: () => x(l),
-            onFocus: () => x(l),
+            onClick: (s) => j(s, { label: e, value: t, disabled: l }),
+            onMouseOver: () => x(o),
+            onFocus: () => x(o),
             tabIndex: 0,
             "aria-selected": r.some((s) => s.value === t),
-            children: /* @__PURE__ */ f("label", { htmlFor: e, className: n["multi-select-box-listbox-option-content"], tabIndex: -1, children: [
+            children: /* @__PURE__ */ g("label", { htmlFor: e, className: n["multi-select-box-listbox-option-content"], tabIndex: -1, children: [
               /* @__PURE__ */ u(
                 q,
                 {
-                  id: `${e}-${_}`,
+                  id: `${e}-${w}`,
                   onChange: z,
                   value: t,
                   tabIndex: -1,
-                  disabled: o,
+                  disabled: l,
                   checked: r.some((s) => s.value === t)
                 }
               ),

package/dist/components/MultiSelectBox/MultiSelectBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectBox.js","sources":["../../../src/components/MultiSelectBox/MultiSelectBox.tsx"],"sourcesContent":["import { useRef, useState, useId, useEffect, useCallback } from 'react';\r\nimport clsx from 'clsx';\r\n\r\nimport type { KeyboardEvent, ChangeEvent, MouseEvent } from 'react';\r\n\r\nimport styles from './MultiSelectBox.module.css';\r\n\r\nimport { Icon } from 'components/Icon';\r\nimport { Checkbox } from 'components/Checkbox';\r\nimport { usePositionedFloaters } from 'components/hooks/usePositionedFloaters';\r\n\r\nexport type MultiSelectData = {\r\n  label: string;\r\n  value: string | number;\r\n  disabled?: boolean;\r\n};\r\n\r\nexport interface MultiSelectBoxProps {\r\n  /** Array of label, values pairs */\r\n  selectData: MultiSelectData[];\r\n  /** Retuns selected label, values */\r\n  onChange: (values: MultiSelectData[]) => void;\r\n  /** Array of label, value pairs that should be check by default */\r\n  defaultSelectedItems?: MultiSelectData[];\r\n  /** Suffix label in the selectbutton '[count] selected' */\r\n  labelSuffix?: string;\r\n  /** Disables the multiselect */\r\n  disabled?: boolean;\r\n  /** If true sets the option dropdown min-width to the width of the select button. */\r\n  fullWidth?: boolean;\r\n  /** The max height of the options. */\r\n  maxOptionHeight?: `${number}${'px' | 'rem'}`;\r\n  /** `true` to align the right side of the options with the select box; otherwise, `false` to align on the left side. */\r\n  optionPositionRight?: boolean;\r\n}\r\n\r\nexport const MultiSelectBox = ({\r\n  selectData,\r\n  onChange,\r\n  defaultSelectedItems,\r\n  labelSuffix = 'geselecteerd',\r\n  disabled = false,\r\n  fullWidth = false,\r\n  maxOptionHeight,\r\n  optionPositionRight,\r\n}: MultiSelectBoxProps) => {\r\n  const multiselectboxId = useId();\r\n  const [selectedItems, setSelectedItems] = useState<MultiSelectData[]>(defaultSelectedItems || []);\r\n  const [selectedItemsCount, setSelectedItemsCount] = useState(defaultSelectedItems?.length || 0);\r\n  const [isOpen, setIsOpen] = useState(false);\r\n  const [activeIndex, setActiveIndex] = useState(-1);\r\n  const wrapperRef = useRef<HTMLDivElement>(null);\r\n  const optionListRef = useRef<HTMLUListElement>(null);\r\n\r\n  const [positionElement, setPositionElement] = useState<HTMLElement | null>(null);\r\n  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);\r\n  const { style: positionStyle } = usePositionedFloaters(positionElement, referenceElement, {\r\n    mouseEvent: 'click',\r\n    position: 'bottomLeft',\r\n    offset: 4,\r\n    maxFixedHeight: maxOptionHeight,\r\n    horizontalPosition: optionPositionRight ? 'right' : 'left',\r\n    mobileBreakpoint: '28rem',\r\n    fullWidth,\r\n  });\r\n\r\n  const onMouseEventOutside = useCallback(\r\n    ({ target }: Event | MouseEvent) => {\r\n      if (!target || !wrapperRef.current) return;\r\n\r\n      if (!wrapperRef.current.contains(target as Node)) {\r\n        setIsOpen(false);\r\n      }\r\n    },\r\n    [setIsOpen]\r\n  );\r\n\r\n  const onTriggerKeyDown = useCallback(\r\n    (event: KeyboardEvent<HTMLButtonElement>) => {\r\n      switch (event.key) {\r\n        case 'Enter':\r\n          event.preventDefault();\r\n          setIsOpen(true);\r\n          break;\r\n        case 'Escape':\r\n          if (isOpen) {\r\n            event.stopPropagation();\r\n            setIsOpen(false);\r\n          }\r\n          break;\r\n        default:\r\n          break;\r\n      }\r\n    },\r\n    [isOpen]\r\n  );\r\n\r\n  const onOptionKeyDown = useCallback(\r\n    (event: KeyboardEvent<HTMLLIElement>) => {\r\n      if (!isOpen) return;\r\n\r\n      switch (event.key) {\r\n        case 'ArrowDown':\r\n          event.preventDefault();\r\n          setActiveIndex((prev) => {\r\n            let nextIndex = prev;\r\n            do {\r\n              nextIndex = nextIndex < selectData.length - 1 ? nextIndex + 1 : 0;\r\n            } while (selectData[nextIndex]?.disabled);\r\n            return nextIndex;\r\n          });\r\n          break;\r\n        case 'ArrowUp':\r\n          event.preventDefault();\r\n          setActiveIndex((prev) => {\r\n            let nextIndex = prev;\r\n            do {\r\n              nextIndex = nextIndex <= 0 ? selectData.length - 1 : nextIndex - 1;\r\n            } while (selectData[nextIndex]?.disabled);\r\n            return nextIndex;\r\n          });\r\n          break;\r\n        case 'Enter': {\r\n          event.preventDefault();\r\n          const selectedItem = selectData[activeIndex];\r\n          if (!selectedItem || selectedItem.disabled) break;\r\n          const isAlreadySelected = selectedItems.some((item) => item.value === selectedItem.value);\r\n          const updatedSelectedItems = isAlreadySelected\r\n            ? selectedItems.filter((item) => item.value !== selectedItem.value)\r\n            : [...selectedItems, selectedItem];\r\n\r\n          setSelectedItems(updatedSelectedItems);\r\n          setSelectedItemsCount(updatedSelectedItems.length);\r\n          onChange(updatedSelectedItems);\r\n          break;\r\n        }\r\n        case 'Tab':\r\n          event.preventDefault();\r\n          setIsOpen(false);\r\n          break;\r\n        case 'Escape':\r\n          event.stopPropagation();\r\n          setIsOpen(false);\r\n          break;\r\n        default:\r\n          break;\r\n      }\r\n    },\r\n    [activeIndex, isOpen, selectData, selectedItems, onChange]\r\n  );\r\n\r\n  const onOptionClick = (event: MouseEvent<HTMLLIElement>, option: MultiSelectData) => {\r\n    if (option.disabled) return;\r\n\r\n    // Prevent toggle if click originated from the checkbox\r\n    if ((event.target as HTMLElement).tagName === 'INPUT') return;\r\n\r\n    const isAlreadySelected = selectedItems.some((item) => item.value === option.value);\r\n    const updatedSelectedItems = isAlreadySelected\r\n      ? selectedItems.filter((item) => item.value !== option.value)\r\n      : [...selectedItems, option];\r\n\r\n    setSelectedItems(updatedSelectedItems);\r\n    setSelectedItemsCount(updatedSelectedItems.length);\r\n    onChange(updatedSelectedItems);\r\n  };\r\n\r\n  const handleSelect = useCallback(\r\n    (event: ChangeEvent<HTMLInputElement>) => {\r\n      const { checked, value } = event.target;\r\n      let updatedSelectedItems = [...selectedItems];\r\n\r\n      if (checked) {\r\n        const selectedItem = selectData.find((item) => item.value === value);\r\n        if (selectedItem) {\r\n          updatedSelectedItems.push(selectedItem);\r\n        }\r\n      } else {\r\n        updatedSelectedItems = updatedSelectedItems.filter((item) => item.value !== value);\r\n      }\r\n\r\n      setSelectedItems(updatedSelectedItems);\r\n      setSelectedItemsCount(updatedSelectedItems.length);\r\n      onChange(updatedSelectedItems);\r\n    },\r\n    [selectData, selectedItems, onChange]\r\n  );\r\n\r\n  useEffect(() => {\r\n    if (isOpen) {\r\n      setActiveIndex(0);\r\n    }\r\n  }, [isOpen]);\r\n\r\n  useEffect(() => {\r\n    const activeOption = optionListRef.current?.children[activeIndex] as HTMLElement;\r\n    activeOption?.focus();\r\n  }, [activeIndex]);\r\n\r\n  useEffect(() => {\r\n    if (!isOpen) return;\r\n\r\n    document.addEventListener('click', onMouseEventOutside, true);\r\n    document.addEventListener('scroll', onMouseEventOutside, true);\r\n\r\n    return () => {\r\n      document.removeEventListener('click', onMouseEventOutside, true);\r\n      document.removeEventListener('scroll', onMouseEventOutside, true);\r\n    };\r\n  }, [onMouseEventOutside, isOpen]);\r\n\r\n  return (\r\n    <div className={styles['multi-select-box-wrapper']} ref={wrapperRef}>\r\n      <button\r\n        className={styles['multi-select-box-trigger']}\r\n        type=\"button\"\r\n        onClick={() => {\r\n          setIsOpen(!isOpen);\r\n        }}\r\n        onKeyDown={onTriggerKeyDown}\r\n        aria-expanded={isOpen}\r\n        aria-haspopup=\"listbox\"\r\n        aria-label={`${selectedItemsCount} ${labelSuffix}`}\r\n        disabled={disabled}\r\n        {...(isOpen && { 'aria-controls': multiselectboxId })}\r\n        ref={setReferenceElement}\r\n      >\r\n        <span className={styles['multi-select-box-trigger-label']}>\r\n          {selectedItemsCount} {labelSuffix}\r\n        </span>\r\n        <Icon\r\n          className={clsx(styles['multi-select-box-trigger-icon'], {\r\n            [styles['multi-select-box-trigger-icon--open']]: isOpen,\r\n          })}\r\n          name=\"CheveronDown\"\r\n          size={16}\r\n        />\r\n      </button>\r\n\r\n      <div\r\n        id={multiselectboxId}\r\n        className={clsx(styles['multi-select-box-listbox--wrapper'])}\r\n        style={{ ...positionStyle.style, visibility: isOpen ? 'visible' : 'hidden' }}\r\n        role=\"listbox\"\r\n        ref={setPositionElement}\r\n      >\r\n        <ul className={styles['multi-select-box-listbox']} ref={optionListRef}>\r\n          {selectData.map(({ label, value, disabled }, index) => (\r\n            <li\r\n              className={clsx(styles['multi-select-box-listbox-option'], {\r\n                [styles['multi-select-box-listbox-option--active']]: index === activeIndex,\r\n                [styles['multi-select-box-listbox-option--disabled']]: disabled,\r\n              })}\r\n              key={value}\r\n              role=\"option\"\r\n              onKeyDown={onOptionKeyDown}\r\n              onClick={(event) => onOptionClick(event, { label, value, disabled })}\r\n              onMouseOver={() => setActiveIndex(index)}\r\n              onFocus={() => setActiveIndex(index)}\r\n              tabIndex={0}\r\n              aria-selected={selectedItems.some((item) => item.value === value)}\r\n            >\r\n              <label htmlFor={label} className={styles['multi-select-box-listbox-option-content']} tabIndex={-1}>\r\n                <Checkbox\r\n                  id={`${label}-${multiselectboxId}`}\r\n                  onChange={handleSelect}\r\n                  value={value}\r\n                  tabIndex={-1}\r\n                  disabled={disabled}\r\n                  checked={selectedItems.some((item) => item.value === value)}\r\n                />\r\n                <span>{label}</span>\r\n              </label>\r\n            </li>\r\n          ))}\r\n        </ul>\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n"],"names":["MultiSelectBox","selectData","onChange","defaultSelectedItems","labelSuffix","disabled","fullWidth","maxOptionHeight","optionPositionRight","multiselectboxId","useId","selectedItems","setSelectedItems","useState","selectedItemsCount","setSelectedItemsCount","isOpen","setIsOpen","activeIndex","setActiveIndex","wrapperRef","useRef","optionListRef","positionElement","setPositionElement","referenceElement","setReferenceElement","positionStyle","usePositionedFloaters","onMouseEventOutside","useCallback","target","onTriggerKeyDown","event","onOptionKeyDown","prev","nextIndex","_a","selectedItem","updatedSelectedItems","item","onOptionClick","option","handleSelect","checked","value","useEffect","activeOption","styles","jsxs","jsx","Icon","clsx","label","index","Checkbox"],"mappings":"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"}
+{"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  /** 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  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 } = 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    },\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={styles['multi-select-box-trigger']}\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","maxOptionHeight","optionPositionRight","multiselectboxId","useId","selectedItems","setSelectedItems","useState","selectedItemsCount","setSelectedItemsCount","isOpen","setIsOpen","activeIndex","setActiveIndex","wrapperRef","useRef","optionListRef","positionElement","setPositionElement","referenceElement","setReferenceElement","positionStyle","usePositionedFloaters","onMouseEventOutside","useCallback","target","onTriggerKeyDown","event","onOptionKeyDown","prev","nextIndex","_a","selectedItem","updatedSelectedItems","item","onOptionClick","option","handleSelect","checked","value","useEffect","activeOption","styles","jsxs","jsx","Icon","clsx","label","index","Checkbox"],"mappings":"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"}

package/dist/components/MultiSelectBox/MultiSelectBox.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectBox.stories.js","sources":["../../../src/components/MultiSelectBox/MultiSelectBox.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\r\n\r\nimport type { Meta, StoryFn } from '@storybook/react';\r\nimport type { MultiSelectBoxProps } from './MultiSelectBox';\r\n\r\nimport { MultiSelectBox } from './MultiSelectBox';\r\n\r\nconst codeString = `<MultiSelectBox selectData={[{label, value}]} onChange={fn} labelSuffix={string} />`;\r\n\r\n// eslint-disable-next-line import/no-default-export\r\nexport default {\r\n  title: 'Organisms/MultiSelectBox',\r\n  component: MultiSelectBox,\r\n  argTypes: {},\r\n  parameters: {\r\n    inspectComponent: MultiSelectBox,\r\n    codeString: codeString,\r\n  },\r\n} as Meta<MultiSelectBoxProps>;\r\n\r\nconst mockItems = [\r\n  { label: 'A.B. Docent', value: '1' },\r\n  { label: 'B.C. Docent met lange achternaam', value: '2' },\r\n  {\r\n    label: 'prof. F.G. Docent met lang achternaam',\r\n    value: '3',\r\n  },\r\n  { label: 'H.I. Docent', value: '4' },\r\n  { label: 'K.L. Docent ', value: '5' },\r\n  { label: 'A.B. Docent', value: '6' },\r\n  { label: 'B.C. Docent met lange achternaam', value: '7' },\r\n  {\r\n    label: 'prof. F.G. Docent met lang achternaam',\r\n    value: '8',\r\n  },\r\n  { label: 'H.I. Docent', value: '9' },\r\n  { label: 'K.L. Docent ', value: '10' },\r\n];\r\n\r\nconst Template: StoryFn<MultiSelectBoxProps> = (args) => {\r\n  return (\r\n    <div style={{ width: '30rem', margin: '0rem auto 0 auto' }}>\r\n      <MultiSelectBox {...args} />\r\n    </div>\r\n  );\r\n};\r\n\r\nconst defaultArgs: Partial<MultiSelectBoxProps> = {\r\n  fullWidth: false,\r\n  labelSuffix: 'geselecteerd',\r\n  maxOptionHeight: '20rem',\r\n  optionPositionRight: false,\r\n  disabled: false,\r\n  selectData: mockItems,\r\n  onChange: fn(),\r\n};\r\n\r\nexport const MultiSelectBoxExample = Template.bind({});\r\nMultiSelectBoxExample.args = {\r\n  ...defaultArgs,\r\n};\r\n\r\nexport const WithDefaultSelectedItems = Template.bind({});\r\nWithDefaultSelectedItems.args = {\r\n  ...defaultArgs,\r\n  defaultSelectedItems: [\r\n    { label: 'A.B. Docent', value: '1' },\r\n    { label: 'H.I. Docent', value: '4' },\r\n    { label: 'A.B. Docent', value: '6' },\r\n  ],\r\n};\r\n"],"names":["codeString","MultiSelectBox_stories","MultiSelectBox","mockItems","Template","args","jsx","defaultArgs","fn","MultiSelectBoxExample","WithDefaultSelectedItems"],"mappings":";;;AAOA,MAAMA,IAAa,uFAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU,CAAC;AAAA,EACX,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAY;AAAA,EAChB,EAAE,OAAO,eAAe,OAAO,IAAI;AAAA,EACnC,EAAE,OAAO,oCAAoC,OAAO,IAAI;AAAA,EACxD;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA,EAAE,OAAO,eAAe,OAAO,IAAI;AAAA,EACnC,EAAE,OAAO,gBAAgB,OAAO,IAAI;AAAA,EACpC,EAAE,OAAO,eAAe,OAAO,IAAI;AAAA,EACnC,EAAE,OAAO,oCAAoC,OAAO,IAAI;AAAA,EACxD;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA,EAAE,OAAO,eAAe,OAAO,IAAI;AAAA,EACnC,EAAE,OAAO,gBAAgB,OAAO,KAAK;AACvC,GAEMC,IAAyC,CAACC,MAE3C,gBAAAC,EAAA,OAAA,EAAI,OAAO,EAAE,OAAO,SAAS,QAAQ,mBAAA,GACpC,UAAA,gBAAAA,EAACJ,GAAgB,EAAA,GAAGG,EAAM,CAAA,GAC5B,GAIEE,IAA4C;AAAA,EAChD,WAAW;AAAA,EACX,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,UAAU;AAAA,EACV,YAAYJ;AAAA,EACZ,UAAUK,EAAG;AACf,GAEaC,IAAwBL,EAAS,KAAK,CAAE,CAAA;AACrDK,EAAsB,OAAO;AAAA,EAC3B,GAAGF;AACL;AAEO,MAAMG,IAA2BN,EAAS,KAAK,CAAE,CAAA;AACxDM,EAAyB,OAAO;AAAA,EAC9B,GAAGH;AAAA,EACH,sBAAsB;AAAA,IACpB,EAAE,OAAO,eAAe,OAAO,IAAI;AAAA,IACnC,EAAE,OAAO,eAAe,OAAO,IAAI;AAAA,IACnC,EAAE,OAAO,eAAe,OAAO,IAAI;AAAA,EAAA;AAEvC;"}
+{"version":3,"file":"MultiSelectBox.stories.js","sources":["../../../src/components/MultiSelectBox/MultiSelectBox.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { MultiSelectBoxProps } from './MultiSelectBox';\n\nimport { MultiSelectBox } from './MultiSelectBox';\n\nconst codeString = `<MultiSelectBox selectData={[{label, value}]} onChange={fn} labelSuffix={string} />`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Organisms/MultiSelectBox',\n  component: MultiSelectBox,\n  argTypes: {},\n  parameters: {\n    inspectComponent: MultiSelectBox,\n    codeString: codeString,\n  },\n} as Meta<MultiSelectBoxProps>;\n\nconst mockItems = [\n  { label: 'A.B. Docent', value: '1' },\n  { label: 'B.C. Docent met lange achternaam', value: '2' },\n  {\n    label: 'prof. F.G. Docent met lang achternaam',\n    value: '3',\n  },\n  { label: 'H.I. Docent', value: '4' },\n  { label: 'K.L. Docent ', value: '5' },\n  { label: 'A.B. Docent', value: '6' },\n  { label: 'B.C. Docent met lange achternaam', value: '7' },\n  {\n    label: 'prof. F.G. Docent met lang achternaam',\n    value: '8',\n  },\n  { label: 'H.I. Docent', value: '9' },\n  { label: 'K.L. Docent ', value: '10' },\n];\n\nconst Template: StoryFn<MultiSelectBoxProps> = (args) => {\n  return (\n    <div style={{ width: '30rem', margin: '0rem auto 0 auto' }}>\n      <MultiSelectBox {...args} />\n    </div>\n  );\n};\n\nconst defaultArgs: Partial<MultiSelectBoxProps> = {\n  fullWidth: false,\n  labelSuffix: 'geselecteerd',\n  maxOptionHeight: '20rem',\n  optionPositionRight: false,\n  disabled: false,\n  selectData: mockItems,\n  onChange: fn(),\n};\n\nexport const MultiSelectBoxExample = Template.bind({});\nMultiSelectBoxExample.args = {\n  ...defaultArgs,\n};\n\nexport const WithDefaultSelectedItems = Template.bind({});\nWithDefaultSelectedItems.args = {\n  ...defaultArgs,\n  defaultSelectedItems: [\n    { label: 'A.B. Docent', value: '1' },\n    { label: 'H.I. Docent', value: '4' },\n    { label: 'A.B. Docent', value: '6' },\n  ],\n};\n"],"names":["codeString","MultiSelectBox_stories","MultiSelectBox","mockItems","Template","args","jsx","defaultArgs","fn","MultiSelectBoxExample","WithDefaultSelectedItems"],"mappings":";;;AAOA,MAAMA,IAAa,uFAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU,CAAC;AAAA,EACX,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAY;AAAA,EAChB,EAAE,OAAO,eAAe,OAAO,IAAI;AAAA,EACnC,EAAE,OAAO,oCAAoC,OAAO,IAAI;AAAA,EACxD;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA,EAAE,OAAO,eAAe,OAAO,IAAI;AAAA,EACnC,EAAE,OAAO,gBAAgB,OAAO,IAAI;AAAA,EACpC,EAAE,OAAO,eAAe,OAAO,IAAI;AAAA,EACnC,EAAE,OAAO,oCAAoC,OAAO,IAAI;AAAA,EACxD;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA,EAAE,OAAO,eAAe,OAAO,IAAI;AAAA,EACnC,EAAE,OAAO,gBAAgB,OAAO,KAAK;AACvC,GAEMC,IAAyC,CAACC,MAE3C,gBAAAC,EAAA,OAAA,EAAI,OAAO,EAAE,OAAO,SAAS,QAAQ,mBAAA,GACpC,UAAA,gBAAAA,EAACJ,GAAgB,EAAA,GAAGG,EAAM,CAAA,GAC5B,GAIEE,IAA4C;AAAA,EAChD,WAAW;AAAA,EACX,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,UAAU;AAAA,EACV,YAAYJ;AAAA,EACZ,UAAUK,EAAG;AACf,GAEaC,IAAwBL,EAAS,KAAK,CAAE,CAAA;AACrDK,EAAsB,OAAO;AAAA,EAC3B,GAAGF;AACL;AAEO,MAAMG,IAA2BN,EAAS,KAAK,CAAE,CAAA;AACxDM,EAAyB,OAAO;AAAA,EAC9B,GAAGH;AAAA,EACH,sBAAsB;AAAA,IACpB,EAAE,OAAO,eAAe,OAAO,IAAI;AAAA,IACnC,EAAE,OAAO,eAAe,OAAO,IAAI;AAAA,IACnC,EAAE,OAAO,eAAe,OAAO,IAAI;AAAA,EAAA;AAEvC;"}

package/dist/components/MultiSelectBox/MultiSelectBox.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectBox.test.js","sources":["../../../src/components/MultiSelectBox/MultiSelectBox.test.tsx"],"sourcesContent":["import '@testing-library/jest-dom';\r\nimport { render, screen, fireEvent } from '@testing-library/react';\r\n\r\nimport { MultiSelectBox } from './MultiSelectBox';\r\n\r\nconst onChangeSpy = jest.fn();\r\n\r\nconst mockSelectData = [\r\n  { label: 'Option 1', value: '1' },\r\n  { label: 'Option 2', value: '2' },\r\n  { label: 'Option 3', value: '3' },\r\n];\r\n\r\ndescribe('MultiSelectBox', () => {\r\n  it('renders the component with default props', () => {\r\n    render(<MultiSelectBox selectData={mockSelectData} onChange={onChangeSpy} labelSuffix=\"selected\" />);\r\n    const button = screen.getByRole('button');\r\n    expect(button).toBeInTheDocument();\r\n    expect(button).toHaveAttribute('aria-expanded', 'false');\r\n  });\r\n\r\n  it('opens the dropdown when the button is clicked', () => {\r\n    render(<MultiSelectBox selectData={mockSelectData} onChange={onChangeSpy} labelSuffix=\"selected\" />);\r\n    const button = screen.getByRole('button');\r\n    fireEvent.click(button);\r\n    expect(button).toHaveAttribute('aria-expanded', 'true');\r\n    expect(screen.getByRole('listbox')).toBeInTheDocument();\r\n  });\r\n\r\n  it('closes the dropdown when clicking outside', () => {\r\n    render(\r\n      <>\r\n        <MultiSelectBox selectData={mockSelectData} onChange={onChangeSpy} labelSuffix=\"selected\" />\r\n        <div data-testid=\"outside-element\">Outside</div>\r\n      </>\r\n    );\r\n\r\n    const button = screen.getByRole('button');\r\n    fireEvent.click(button);\r\n    expect(button).toHaveAttribute('aria-expanded', 'true');\r\n    const outsideElement = screen.getByTestId('outside-element');\r\n    fireEvent.click(outsideElement);\r\n    expect(button).toHaveAttribute('aria-expanded', 'false');\r\n  });\r\n});\r\n"],"names":["onChangeSpy","mockSelectData","render","jsx","MultiSelectBox","button","screen","fireEvent","jsxs","Fragment","outsideElement"],"mappings":";;;;AAKA,MAAMA,IAAc,KAAK,GAAG,GAEtBC,IAAiB;AAAA,EACrB,EAAE,OAAO,YAAY,OAAO,IAAI;AAAA,EAChC,EAAE,OAAO,YAAY,OAAO,IAAI;AAAA,EAChC,EAAE,OAAO,YAAY,OAAO,IAAI;AAClC;AAEA,SAAS,kBAAkB,MAAM;AAC/B,KAAG,4CAA4C,MAAM;AAC5C,IAAAC,EAAA,gBAAAC,EAACC,KAAe,YAAYH,GAAgB,UAAUD,GAAa,aAAY,YAAW,CAAE;AAC7F,UAAAK,IAASC,EAAO,UAAU,QAAQ;AACjC,WAAAD,CAAM,EAAE,kBAAkB,GACjC,OAAOA,CAAM,EAAE,gBAAgB,iBAAiB,OAAO;AAAA,EAAA,CACxD,GAED,GAAG,iDAAiD,MAAM;AACjD,IAAAH,EAAA,gBAAAC,EAACC,KAAe,YAAYH,GAAgB,UAAUD,GAAa,aAAY,YAAW,CAAE;AAC7F,UAAAK,IAASC,EAAO,UAAU,QAAQ;AACxC,IAAAC,EAAU,MAAMF,CAAM,GACtB,OAAOA,CAAM,EAAE,gBAAgB,iBAAiB,MAAM,GACtD,OAAOC,EAAO,UAAU,SAAS,CAAC,EAAE,kBAAkB;AAAA,EAAA,CACvD,GAED,GAAG,6CAA6C,MAAM;AACpD,IAAAJ;AAAA,MAEI,gBAAAM,EAAAC,GAAA,EAAA,UAAA;AAAA,QAAA,gBAAAN,EAACC,KAAe,YAAYH,GAAgB,UAAUD,GAAa,aAAY,YAAW;AAAA,QACzF,gBAAAG,EAAA,OAAA,EAAI,eAAY,mBAAkB,UAAO,UAAA,CAAA;AAAA,MAAA,EAC5C,CAAA;AAAA,IACF;AAEM,UAAAE,IAASC,EAAO,UAAU,QAAQ;AACxC,IAAAC,EAAU,MAAMF,CAAM,GACtB,OAAOA,CAAM,EAAE,gBAAgB,iBAAiB,MAAM;AAChD,UAAAK,IAAiBJ,EAAO,YAAY,iBAAiB;AAC3D,IAAAC,EAAU,MAAMG,CAAc,GAC9B,OAAOL,CAAM,EAAE,gBAAgB,iBAAiB,OAAO;AAAA,EAAA,CACxD;AACH,CAAC;"}
+{"version":3,"file":"MultiSelectBox.test.js","sources":["../../../src/components/MultiSelectBox/MultiSelectBox.test.tsx"],"sourcesContent":["import '@testing-library/jest-dom';\nimport { render, screen, fireEvent } from '@testing-library/react';\n\nimport { MultiSelectBox } from './MultiSelectBox';\n\nconst onChangeSpy = jest.fn();\n\nconst mockSelectData = [\n  { label: 'Option 1', value: '1' },\n  { label: 'Option 2', value: '2' },\n  { label: 'Option 3', value: '3' },\n];\n\ndescribe('MultiSelectBox', () => {\n  it('renders the component with default props', () => {\n    render(<MultiSelectBox selectData={mockSelectData} onChange={onChangeSpy} labelSuffix=\"selected\" />);\n    const button = screen.getByRole('button');\n    expect(button).toBeInTheDocument();\n    expect(button).toHaveAttribute('aria-expanded', 'false');\n  });\n\n  it('opens the dropdown when the button is clicked', () => {\n    render(<MultiSelectBox selectData={mockSelectData} onChange={onChangeSpy} labelSuffix=\"selected\" />);\n    const button = screen.getByRole('button');\n    fireEvent.click(button);\n    expect(button).toHaveAttribute('aria-expanded', 'true');\n    expect(screen.getByRole('listbox')).toBeInTheDocument();\n  });\n\n  it('closes the dropdown when clicking outside', () => {\n    render(\n      <>\n        <MultiSelectBox selectData={mockSelectData} onChange={onChangeSpy} labelSuffix=\"selected\" />\n        <div data-testid=\"outside-element\">Outside</div>\n      </>\n    );\n\n    const button = screen.getByRole('button');\n    fireEvent.click(button);\n    expect(button).toHaveAttribute('aria-expanded', 'true');\n    const outsideElement = screen.getByTestId('outside-element');\n    fireEvent.click(outsideElement);\n    expect(button).toHaveAttribute('aria-expanded', 'false');\n  });\n});\n"],"names":["onChangeSpy","mockSelectData","render","jsx","MultiSelectBox","button","screen","fireEvent","jsxs","Fragment","outsideElement"],"mappings":";;;;AAKA,MAAMA,IAAc,KAAK,GAAG,GAEtBC,IAAiB;AAAA,EACrB,EAAE,OAAO,YAAY,OAAO,IAAI;AAAA,EAChC,EAAE,OAAO,YAAY,OAAO,IAAI;AAAA,EAChC,EAAE,OAAO,YAAY,OAAO,IAAI;AAClC;AAEA,SAAS,kBAAkB,MAAM;AAC/B,KAAG,4CAA4C,MAAM;AAC5C,IAAAC,EAAA,gBAAAC,EAACC,KAAe,YAAYH,GAAgB,UAAUD,GAAa,aAAY,YAAW,CAAE;AAC7F,UAAAK,IAASC,EAAO,UAAU,QAAQ;AACjC,WAAAD,CAAM,EAAE,kBAAkB,GACjC,OAAOA,CAAM,EAAE,gBAAgB,iBAAiB,OAAO;AAAA,EAAA,CACxD,GAED,GAAG,iDAAiD,MAAM;AACjD,IAAAH,EAAA,gBAAAC,EAACC,KAAe,YAAYH,GAAgB,UAAUD,GAAa,aAAY,YAAW,CAAE;AAC7F,UAAAK,IAASC,EAAO,UAAU,QAAQ;AACxC,IAAAC,EAAU,MAAMF,CAAM,GACtB,OAAOA,CAAM,EAAE,gBAAgB,iBAAiB,MAAM,GACtD,OAAOC,EAAO,UAAU,SAAS,CAAC,EAAE,kBAAkB;AAAA,EAAA,CACvD,GAED,GAAG,6CAA6C,MAAM;AACpD,IAAAJ;AAAA,MAEI,gBAAAM,EAAAC,GAAA,EAAA,UAAA;AAAA,QAAA,gBAAAN,EAACC,KAAe,YAAYH,GAAgB,UAAUD,GAAa,aAAY,YAAW;AAAA,QACzF,gBAAAG,EAAA,OAAA,EAAI,eAAY,mBAAkB,UAAO,UAAA,CAAA;AAAA,MAAA,EAC5C,CAAA;AAAA,IACF;AAEM,UAAAE,IAASC,EAAO,UAAU,QAAQ;AACxC,IAAAC,EAAU,MAAMF,CAAM,GACtB,OAAOA,CAAM,EAAE,gBAAgB,iBAAiB,MAAM;AAChD,UAAAK,IAAiBJ,EAAO,YAAY,iBAAiB;AAC3D,IAAAC,EAAU,MAAMG,CAAc,GAC9B,OAAOL,CAAM,EAAE,gBAAgB,iBAAiB,OAAO;AAAA,EAAA,CACxD;AACH,CAAC;"}

package/dist/components/OverlayStepBar/OverlayStepBar.js

@@ -1,12 +1,12 @@
 import { jsx as s, jsxs as l } from "react/jsx-runtime";
 import { c as o } from "../../clsx-OuTLNxxd.js";
 import '../../assets/OverlayStepBar.css';const r = {
-  "overlay-step-bar__container": "_overlay-step-bar__container_olxm1_1",
-  "overlay-step-bar__step-wrapper": "_overlay-step-bar__step-wrapper_olxm1_10",
-  "overlay-step-bar__step": "_overlay-step-bar__step_olxm1_10",
-  "overlay-step-bar__step--label": "_overlay-step-bar__step--label_olxm1_56",
-  "overlay-step-bar__step--index": "_overlay-step-bar__step--index_olxm1_62",
-  "overlay-step-bar__step--active": "_overlay-step-bar__step--active_olxm1_87"
+  "overlay-step-bar__container": "_overlay-step-bar__container_j9bq4_1",
+  "overlay-step-bar__step-wrapper": "_overlay-step-bar__step-wrapper_j9bq4_10",
+  "overlay-step-bar__step": "_overlay-step-bar__step_j9bq4_10",
+  "overlay-step-bar__step--label": "_overlay-step-bar__step--label_j9bq4_56",
+  "overlay-step-bar__step--active": "_overlay-step-bar__step--active_j9bq4_66",
+  "overlay-step-bar__step--index": "_overlay-step-bar__step--index_j9bq4_70"
 }, v = ({ stepLabels: _, activeStep: a = 0, onStepClick: t }) => (a > _.length && console.error("activeStep is greater than the number of steps"), /* @__PURE__ */ s("div", { className: r["overlay-step-bar__container"], children: _.length && _.map((p, e) => /* @__PURE__ */ s("span", { className: r["overlay-step-bar__step-wrapper"], children: /* @__PURE__ */ l(
   "button",
   {