@uva-glass/component-library 3.30.1 → 3.31.0

package/dist/components/MultiSelectBox/MultiSelectBox.js

@@ -1,6 +1,6 @@
-import { jsxs as g, jsx as u } from "react/jsx-runtime";
-import { useId as H, useState as b, useRef as S, useCallback as _, useEffect as I } from "react";
-import { c as h } from "../../clsx-OuTLNxxd.js";
+import { jsxs as f, jsx as u } from "react/jsx-runtime";
+import { useId as H, useState as m, useRef as O, useCallback as g, useEffect as w } from "react";
+import { c as _ } from "../../clsx-OuTLNxxd.js";
 import { Icon as q } from "../Icon/Icon.js";
 import { Checkbox as G } from "../Checkbox/Checkbox.js";
 import { usePositionedFloaters as J } from "../hooks/usePositionedFloaters.js";
@@ -19,28 +19,28 @@ import '../../assets/MultiSelectBox.css';const r = {
   "multi-select-box-listbox-option--disabled": "_multi-select-box-listbox-option--disabled_134e4_117"
 }, ee = ({
   selectData: c,
-  onChange: m,
-  defaultSelectedItems: f,
+  onChange: d,
+  defaultSelectedItems: y,
   labelSuffix: E = "geselecteerd",
-  disabled: P = !1,
-  fullWidth: B = !1,
-  darkBorder: C = !1,
-  maxOptionHeight: L,
-  optionPositionRight: O
+  disabled: A = !1,
+  fullWidth: P = !1,
+  darkBorder: B = !1,
+  maxOptionHeight: C,
+  optionPositionRight: L
 }) => {
-  const v = H(), [n, k] = b(f || []), [N, w] = b((f == null ? void 0 : f.length) || 0), [s, a] = b(!1), [d, x] = b(-1), y = S(null), A = S(null), [F, K] = b(null), [R, $] = b(null), { style: D } = J(F, R, {
+  const h = H(), [n, v] = m(y || []), [S, k] = m(y?.length || 0), [s, a] = m(!1), [b, x] = m(-1), I = O(null), N = O(null), [F, K] = m(null), [R, $] = m(null), { style: D } = J(F, R, {
     mouseEvent: "click",
     offset: 4,
-    maxFixedHeight: L,
-    horizontalPosition: O ? "right" : "left",
+    maxFixedHeight: C,
+    horizontalPosition: L ? "right" : "left",
     mobileBreakpoint: "28rem",
-    fullWidth: B
-  }), p = _(
+    fullWidth: P
+  }), p = g(
     ({ target: e }) => {
-      !e || !y.current || y.current.contains(e) || a(!1);
+      !e || !I.current || I.current.contains(e) || a(!1);
     },
     [a]
-  ), M = _(
+  ), M = g(
     (e) => {
       switch (e.key) {
         case "Enter":
@@ -52,36 +52,34 @@ import '../../assets/MultiSelectBox.css';const r = {
       }
     },
     [s]
-  ), T = _(
+  ), T = g(
     (e) => {
       if (s)
         switch (e.key) {
           case "ArrowDown":
             e.preventDefault(), x((t) => {
-              var l;
-              let o = t;
+              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 (c[l]?.disabled);
+              return l;
             });
             break;
           case "ArrowUp":
             e.preventDefault(), x((t) => {
-              var l;
-              let o = t;
+              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 (c[l]?.disabled);
+              return l;
             });
             break;
           case "Enter": {
             e.preventDefault();
-            const t = c[d];
+            const t = c[b];
             if (!t || t.disabled) break;
-            const l = n.some((i) => i.value === t.value) ? n.filter((i) => i.value !== t.value) : [...n, t];
-            k(l), w(l.length), m(l);
+            const o = n.some((i) => i.value === t.value) ? n.filter((i) => i.value !== t.value) : [...n, t];
+            v(o), k(o.length), d(o);
             break;
           }
           case "Tab":
@@ -92,41 +90,39 @@ import '../../assets/MultiSelectBox.css';const r = {
             break;
         }
     },
-    [d, s, c, n, m]
+    [b, s, c, n, d]
   ), j = (e, t) => {
     if (t.disabled || e.target.tagName === "INPUT") return;
-    const l = n.some((i) => i.value === t.value) ? n.filter((i) => i.value !== t.value) : [...n, t];
-    k(l), w(l.length), m(l);
-  }, z = _(
+    const o = n.some((i) => i.value === t.value) ? n.filter((i) => i.value !== t.value) : [...n, t];
+    v(o), k(o.length), d(o);
+  }, z = g(
     (e) => {
-      const { checked: t, value: o } = e.target;
-      let l = [...n];
+      const { checked: t, value: l } = e.target;
+      let o = [...n];
       if (t) {
-        const i = c.find((U) => U.value === o);
-        i && l.push(i);
+        const i = c.find((U) => U.value === l);
+        i && o.push(i);
       } else
-        l = l.filter((i) => i.value !== o);
-      k(l), w(l.length), m(l);
+        o = o.filter((i) => i.value !== l);
+      v(o), k(o.length), d(o);
     },
-    [c, n, m]
+    [c, n, d]
   );
-  return I(() => {
+  return w(() => {
     s && x(0);
-  }, [s]), I(() => {
-    var t;
-    const e = (t = A.current) == null ? void 0 : t.children[d];
-    e == null || e.focus();
-  }, [d]), I(() => {
+  }, [s]), w(() => {
+    N.current?.children[b]?.focus();
+  }, [b]), w(() => {
     if (s)
       return document.addEventListener("click", p, !0), document.addEventListener("scroll", p, !0), () => {
         document.removeEventListener("click", p, !0), document.removeEventListener("scroll", p, !0);
       };
-  }, [p, s]), /* @__PURE__ */ g("div", { className: r["multi-select-box-wrapper"], ref: y, children: [
-    /* @__PURE__ */ g(
+  }, [p, s]), /* @__PURE__ */ f("div", { className: r["multi-select-box-wrapper"], ref: I, children: [
+    /* @__PURE__ */ f(
       "button",
       {
-        className: h(r["multi-select-box-trigger"], {
-          [r["multi-select-box-trigger--darkBorder"]]: C
+        className: _(r["multi-select-box-trigger"], {
+          [r["multi-select-box-trigger--darkBorder"]]: B
         }),
         type: "button",
         onClick: () => {
@@ -135,20 +131,20 @@ import '../../assets/MultiSelectBox.css';const r = {
         onKeyDown: M,
         "aria-expanded": s,
         "aria-haspopup": "listbox",
-        "aria-label": `${N} ${E}`,
-        disabled: P,
-        ...s && { "aria-controls": v },
+        "aria-label": `${S} ${E}`,
+        disabled: A,
+        ...s && { "aria-controls": h },
         ref: $,
         children: [
-          /* @__PURE__ */ g("span", { className: r["multi-select-box-trigger-label"], children: [
-            N,
+          /* @__PURE__ */ f("span", { className: r["multi-select-box-trigger-label"], children: [
+            S,
             " ",
             E
           ] }),
           /* @__PURE__ */ u(
             q,
             {
-              className: h(r["multi-select-box-trigger-icon"], {
+              className: _(r["multi-select-box-trigger-icon"], {
                 [r["multi-select-box-trigger-icon--open"]]: s
               }),
               name: "CheveronDown",
@@ -161,34 +157,34 @@ import '../../assets/MultiSelectBox.css';const r = {
     /* @__PURE__ */ u(
       "div",
       {
-        id: v,
-        className: h(r["multi-select-box-listbox--wrapper"]),
+        id: h,
+        className: _(r["multi-select-box-listbox--wrapper"]),
         style: { ...D.style, visibility: s ? "visible" : "hidden" },
         role: "listbox",
         ref: K,
-        children: /* @__PURE__ */ u("ul", { className: r["multi-select-box-listbox"], ref: A, children: c.map(({ label: e, value: t, disabled: o }, l) => /* @__PURE__ */ u(
+        children: /* @__PURE__ */ u("ul", { className: r["multi-select-box-listbox"], ref: N, children: c.map(({ label: e, value: t, disabled: l }, o) => /* @__PURE__ */ u(
           "li",
           {
-            className: h(r["multi-select-box-listbox-option"], {
-              [r["multi-select-box-listbox-option--active"]]: l === d,
-              [r["multi-select-box-listbox-option--disabled"]]: o
+            className: _(r["multi-select-box-listbox-option"], {
+              [r["multi-select-box-listbox-option--active"]]: o === b,
+              [r["multi-select-box-listbox-option--disabled"]]: l
             }),
             role: "option",
             onKeyDown: T,
-            onClick: (i) => j(i, { label: e, value: t, disabled: o }),
-            onMouseOver: () => x(l),
-            onFocus: () => x(l),
+            onClick: (i) => j(i, { label: e, value: t, disabled: l }),
+            onMouseOver: () => x(o),
+            onFocus: () => x(o),
             tabIndex: 0,
             "aria-selected": n.some((i) => i.value === t),
-            children: /* @__PURE__ */ g("label", { htmlFor: e, className: r["multi-select-box-listbox-option-content"], tabIndex: -1, children: [
+            children: /* @__PURE__ */ f("label", { htmlFor: e, className: r["multi-select-box-listbox-option-content"], tabIndex: -1, children: [
               /* @__PURE__ */ u(
                 G,
                 {
-                  id: `${e}-${v}`,
+                  id: `${e}-${h}`,
                   onChange: z,
                   value: t,
                   tabIndex: -1,
-                  disabled: o,
+                  disabled: l,
                   checked: n.some((i) => i.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';\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 } = 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={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","usePositionedFloaters","onMouseEventOutside","useCallback","target","onTriggerKeyDown","event","onOptionKeyDown","prev","nextIndex","_a","selectedItem","updatedSelectedItems","item","onOptionClick","option","handleSelect","checked","value","useEffect","activeOption","styles","jsxs","clsx","jsx","Icon","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  /** 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 } = 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={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","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/MultiSelectBox/MultiSelectBox.stories.js

@@ -1,5 +1,5 @@
 import { jsx as l } from "react/jsx-runtime";
-import { W as n } from "../../index-Di9WPZUe.js";
+import { l as n } from "../../index-C2E9FY6V.js";
 import { MultiSelectBox as e } from "./MultiSelectBox.js";
 const c = "<MultiSelectBox selectData={[{label, value}]} onChange={fn} labelSuffix={string} />", f = {
   title: "Organisms/MultiSelectBox",

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

@@ -1,6 +1,6 @@
 import { jsx as o, jsxs as d, Fragment as r } from "react/jsx-runtime";
-import "../../index-DV47hRzi.js";
-import { r as n, s as t, f as a } from "../../react.esm-CFMwGdo5.js";
+import "../../index-Br0QepD6.js";
+import { r as n, s as t, f as a } from "../../react.esm-BKjCIfbB.js";
 import { MultiSelectBox as l } from "./MultiSelectBox.js";
 const i = jest.fn(), c = [
   { label: "Option 1", value: "1" },

package/dist/components/Notification/Notification.stories.js

@@ -1,7 +1,7 @@
 import { jsx as i } from "react/jsx-runtime";
-import { W as a } from "../../index-Di9WPZUe.js";
+import { l as a } from "../../index-C2E9FY6V.js";
 import { Notification as t } from "./Notification.js";
-const r = `<Notification title={title} subtitle={subtitle} action={action} 
+const l = `<Notification title={title} subtitle={subtitle} action={action} 
   level={level} variant={variant} onClose={() => {}} />`, m = {
   title: "Molecules/Notification",
   component: t,
@@ -17,14 +17,14 @@ const r = `<Notification title={title} subtitle={subtitle} action={action}
   },
   parameters: {
     inspectComponent: t,
-    codeString: r
+    codeString: l
   }
 }, e = (n) => /* @__PURE__ */ i(t, { ...n }), o = {
   level: "information",
   title: "Titel van de melding",
   onClose: a()
-}, l = e.bind({});
-l.args = {
+}, r = e.bind({});
+r.args = {
   ...o,
   variant: "default",
   subtitle: "Subtekst ter verduidelijking van de melding.",
@@ -37,7 +37,7 @@ s.args = {
 };
 export {
   s as AsBar,
-  l as NotificationExample,
+  r as NotificationExample,
   m as default
 };
 //# sourceMappingURL=Notification.stories.js.map

package/dist/components/Notification/Notification.test.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
-import "../../index-DV47hRzi.js";
-import { r as i, s as t } from "../../react.esm-CFMwGdo5.js";
+import "../../index-Br0QepD6.js";
+import { r as i, s as t } from "../../react.esm-BKjCIfbB.js";
 import { Notification as n } from "./Notification.js";
 describe("Notification", () => {
   it("renders title and subtitle", () => {

package/dist/components/OverlayCloseButton/OverlayCloseButton.stories.js

@@ -1,7 +1,7 @@
 import { jsx as e } from "react/jsx-runtime";
-import { W as a } from "../../index-Di9WPZUe.js";
+import { l as t } from "../../index-C2E9FY6V.js";
 import { OverlayCloseButton as o } from "./OverlayCloseButton.js";
-import { Container as l } from "../../storyComponents/Container/Container.js";
+import { Container as a } from "../../storyComponents/Container/Container.js";
 const r = "<OverlayCloseButton aria-label={aria-label} onClick={onClickFunction} />", c = {
   title: "Atoms/OverlayCloseButton",
   component: o,
@@ -17,11 +17,11 @@ const r = "<OverlayCloseButton aria-label={aria-label} onClick={onClickFunction}
     inspectComponent: o,
     codeString: r
   }
-}, n = (t) => /* @__PURE__ */ e(l, { size: "small", padded: !1, children: /* @__PURE__ */ e(o, { ...t }) }), s = n.bind({});
+}, n = (l) => /* @__PURE__ */ e(a, { size: "small", padded: !1, children: /* @__PURE__ */ e(o, { ...l }) }), s = n.bind({});
 s.args = {
   paddedModal: !1,
   "aria-label": "Close",
-  onClick: a()
+  onClick: t()
 };
 export {
   s as OverlayCloseButtonExample,

package/dist/components/OverlayStepBar/OverlayStepBar.stories.js

@@ -1,7 +1,7 @@
-import { jsx as l } from "react/jsx-runtime";
-import { useState as p } from "react";
+import { jsx as n } from "react/jsx-runtime";
+import { useState as l } from "react";
 import { OverlayStepBar as t } from "./OverlayStepBar.js";
-const c = "<OverlayStepBar stepLabels={[string]} activeStep={number} disabledCountPrefix={[numbers]} onStepClick={(step) => void}/>", u = {
+const p = "<OverlayStepBar stepLabels={[string]} activeStep={number} disabledCountPrefix={[numbers]} onStepClick={(step) => void}/>", b = {
   title: "Molecules/OverlayStepBar",
   component: t,
   argTypes: {
@@ -16,38 +16,37 @@ const c = "<OverlayStepBar stepLabels={[string]} activeStep={number} disabledCou
   },
   parameters: {
     inspectComponent: t,
-    codeString: c
+    codeString: p
   }
-}, o = (e) => {
-  const [s, n] = p(e.activeStep || 1);
-  return /* @__PURE__ */ l(
+}, a = (e) => {
+  const [s, o] = l(e.activeStep || 1);
+  return /* @__PURE__ */ n(
     t,
     {
       ...e,
       activeStep: s,
-      onStepClick: (i) => {
-        var r;
-        n(i), (r = e.onStepClick) == null || r.call(e, i);
+      onStepClick: (r) => {
+        o(r), e.onStepClick?.(r);
       }
     }
   );
-}, a = {
+}, i = {
   stepLabels: ["Basic Details", "Lecturers", "Period Planning", "Assessment", "Miscellaneous", "Overview"]
-}, S = o.bind({});
-S.args = {
-  ...a,
+}, c = a.bind({});
+c.args = {
+  ...i,
   activeStep: 2
 };
-const d = o.bind({});
-d.args = {
-  ...a,
+const S = a.bind({});
+S.args = {
+  ...i,
   // eslint-disable-next-line @typescript-eslint/no-magic-numbers
   disabledCountPrefix: [1, 6],
   activeStep: 2
 };
 export {
-  S as OverlayStepBarExample,
-  d as OverlayStepBarHidePrifix,
-  u as default
+  c as OverlayStepBarExample,
+  S as OverlayStepBarHidePrifix,
+  b as default
 };
 //# sourceMappingURL=OverlayStepBar.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"OverlayStepBar.stories.js","sources":["../../../src/components/OverlayStepBar/OverlayStepBar.stories.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { OverlayStepBarProps } from './OverlayStepBar';\n\nimport { OverlayStepBar } from './OverlayStepBar';\n\nconst codeString =\n  '<OverlayStepBar stepLabels={[string]} activeStep={number} disabledCountPrefix={[numbers]} onStepClick={(step) => void}/>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Molecules/OverlayStepBar',\n  component: OverlayStepBar,\n  argTypes: {\n    activeStep: { control: 'number' },\n    stepLabels: { control: 'object' },\n    disabledCountPrefix: {\n      table: {\n        disable: true,\n      },\n    },\n    onStepClick: { action: 'stepClicked' },\n  },\n  parameters: {\n    inspectComponent: OverlayStepBar,\n    codeString: codeString,\n  },\n} as Meta<OverlayStepBarProps>;\n\nconst Template: StoryFn<OverlayStepBarProps> = (args) => {\n  const [activeStep, setActiveStep] = useState(args.activeStep || 1);\n\n  return (\n    <OverlayStepBar\n      {...args}\n      activeStep={activeStep}\n      onStepClick={(step) => {\n        setActiveStep(step);\n        args.onStepClick?.(step);\n      }}\n    />\n  );\n};\n\nconst defaultArgs: Partial<OverlayStepBarProps> = {\n  stepLabels: ['Basic Details', 'Lecturers', 'Period Planning', 'Assessment', 'Miscellaneous', 'Overview'],\n};\n\nexport const OverlayStepBarExample = Template.bind({});\nOverlayStepBarExample.args = {\n  ...defaultArgs,\n  activeStep: 2,\n};\n\nexport const OverlayStepBarHidePrifix = Template.bind({});\nOverlayStepBarHidePrifix.args = {\n  ...defaultArgs,\n  // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n  disabledCountPrefix: [1, 6],\n  activeStep: 2,\n};\n"],"names":["codeString","OverlayStepBar_stories","OverlayStepBar","Template","args","activeStep","setActiveStep","useState","jsx","step","_a","defaultArgs","OverlayStepBarExample","OverlayStepBarHidePrifix"],"mappings":";;;AAOA,MAAMA,IACJ,4HAGFC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,YAAY,EAAE,SAAS,SAAA;AAAA,IACvB,YAAY,EAAE,SAAS,SAAA;AAAA,IACvB,qBAAqB;AAAA,MACnB,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,IAEF,aAAa,EAAE,QAAQ,cAAA;AAAA,EAAc;AAAA,EAEvC,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAyC,CAACC,MAAS;AACvD,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAASH,EAAK,cAAc,CAAC;AAEjE,SACE,gBAAAI;AAAA,IAACN;AAAA,IAAA;AAAA,MACE,GAAGE;AAAA,MACJ,YAAAC;AAAA,MACA,aAAa,CAACI,MAAS;;AACrB,QAAAH,EAAcG,CAAI,IAClBC,IAAAN,EAAK,gBAAL,QAAAM,EAAA,KAAAN,GAAmBK;AAAA,MAAI;AAAA,IACzB;AAAA,EAAA;AAGN,GAEME,IAA4C;AAAA,EAChD,YAAY,CAAC,iBAAiB,aAAa,mBAAmB,cAAc,iBAAiB,UAAU;AACzG,GAEaC,IAAwBT,EAAS,KAAK,CAAA,CAAE;AACrDS,EAAsB,OAAO;AAAA,EAC3B,GAAGD;AAAA,EACH,YAAY;AACd;AAEO,MAAME,IAA2BV,EAAS,KAAK,CAAA,CAAE;AACxDU,EAAyB,OAAO;AAAA,EAC9B,GAAGF;AAAA;AAAA,EAEH,qBAAqB,CAAC,GAAG,CAAC;AAAA,EAC1B,YAAY;AACd;"}
+{"version":3,"file":"OverlayStepBar.stories.js","sources":["../../../src/components/OverlayStepBar/OverlayStepBar.stories.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { OverlayStepBarProps } from './OverlayStepBar';\n\nimport { OverlayStepBar } from './OverlayStepBar';\n\nconst codeString =\n  '<OverlayStepBar stepLabels={[string]} activeStep={number} disabledCountPrefix={[numbers]} onStepClick={(step) => void}/>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Molecules/OverlayStepBar',\n  component: OverlayStepBar,\n  argTypes: {\n    activeStep: { control: 'number' },\n    stepLabels: { control: 'object' },\n    disabledCountPrefix: {\n      table: {\n        disable: true,\n      },\n    },\n    onStepClick: { action: 'stepClicked' },\n  },\n  parameters: {\n    inspectComponent: OverlayStepBar,\n    codeString: codeString,\n  },\n} as Meta<OverlayStepBarProps>;\n\nconst Template: StoryFn<OverlayStepBarProps> = (args) => {\n  const [activeStep, setActiveStep] = useState(args.activeStep || 1);\n\n  return (\n    <OverlayStepBar\n      {...args}\n      activeStep={activeStep}\n      onStepClick={(step) => {\n        setActiveStep(step);\n        args.onStepClick?.(step);\n      }}\n    />\n  );\n};\n\nconst defaultArgs: Partial<OverlayStepBarProps> = {\n  stepLabels: ['Basic Details', 'Lecturers', 'Period Planning', 'Assessment', 'Miscellaneous', 'Overview'],\n};\n\nexport const OverlayStepBarExample = Template.bind({});\nOverlayStepBarExample.args = {\n  ...defaultArgs,\n  activeStep: 2,\n};\n\nexport const OverlayStepBarHidePrifix = Template.bind({});\nOverlayStepBarHidePrifix.args = {\n  ...defaultArgs,\n  // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n  disabledCountPrefix: [1, 6],\n  activeStep: 2,\n};\n"],"names":["codeString","OverlayStepBar_stories","OverlayStepBar","Template","args","activeStep","setActiveStep","useState","jsx","step","defaultArgs","OverlayStepBarExample","OverlayStepBarHidePrifix"],"mappings":";;;AAOA,MAAMA,IACJ,4HAGFC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,YAAY,EAAE,SAAS,SAAA;AAAA,IACvB,YAAY,EAAE,SAAS,SAAA;AAAA,IACvB,qBAAqB;AAAA,MACnB,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,IAEF,aAAa,EAAE,QAAQ,cAAA;AAAA,EAAc;AAAA,EAEvC,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAyC,CAACC,MAAS;AACvD,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAASH,EAAK,cAAc,CAAC;AAEjE,SACE,gBAAAI;AAAA,IAACN;AAAA,IAAA;AAAA,MACE,GAAGE;AAAA,MACJ,YAAAC;AAAA,MACA,aAAa,CAACI,MAAS;AACrB,QAAAH,EAAcG,CAAI,GAClBL,EAAK,cAAcK,CAAI;AAAA,MAAA;AAAA,IACzB;AAAA,EAAA;AAGN,GAEMC,IAA4C;AAAA,EAChD,YAAY,CAAC,iBAAiB,aAAa,mBAAmB,cAAc,iBAAiB,UAAU;AACzG,GAEaC,IAAwBR,EAAS,KAAK,CAAA,CAAE;AACrDQ,EAAsB,OAAO;AAAA,EAC3B,GAAGD;AAAA,EACH,YAAY;AACd;AAEO,MAAME,IAA2BT,EAAS,KAAK,CAAA,CAAE;AACxDS,EAAyB,OAAO;AAAA,EAC9B,GAAGF;AAAA;AAAA,EAEH,qBAAqB,CAAC,GAAG,CAAC;AAAA,EAC1B,YAAY;AACd;"}

package/dist/components/PeriodSelector/PeriodSelector.js

@@ -1,4 +1,4 @@
-import { jsxs as h, jsx as s } from "react/jsx-runtime";
+import { jsxs as f, jsx as l } from "react/jsx-runtime";
 import { c as x } from "../../clsx-OuTLNxxd.js";
 import { useRef as v, useState as M, useEffect as $ } from "react";
 import "../Buttons/Button.js";
@@ -17,76 +17,76 @@ import "../Input/Input.js";
 import "../InputField/InputField.js";
 import { Label as B } from "../Label/Label.js";
 import "react-router";
-import "../../TablePlugin-NmJsn2fm.js";
+import "../../TablePlugin-Dmy98Epb.js";
 import "../RteEditor/Providers/LanguageProvider.js";
 import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
 import "../RteEditor/hooks/components/Flyout.js";
-import "../../index-DllfJcv4.js";
+import "../../index-nrPtQ1dv.js";
 import "../SelectListbox/SelectListbox.js";
 import "../SelectListbox/SelectProvider.js";
 import "../Sortable/components/SortableItem.js";
-import "../../SortableProvider-CwX1lFMa.js";
-import '../../assets/PeriodSelector.css';const l = {
+import "../../SortableProvider-C2T7b-pm.js";
+import '../../assets/PeriodSelector.css';const s = {
   "period-selector__container": "_period-selector__container_d1p0j_1",
   "period-selector__container--label-left": "_period-selector__container--label-left_d1p0j_6",
   "period-selector__container--label-top": "_period-selector__container--label-top_d1p0j_12",
   "period-selector__selector-container": "_period-selector__selector-container_d1p0j_18",
   "period-selector__selector-row": "_period-selector__selector-row_d1p0j_24"
-}, S = 0, f = 1, E = 2, _ = 3, D = 7, I = (n) => {
-  const c = [];
-  for (let t = 0; t < n.length; t += _)
-    c.push(n.slice(t, t + _));
-  return c;
-}, lr = ({
-  maxPeriods: n = D,
-  defaultValues: c,
+}, h = 0, S = 1, E = 2, _ = 3, D = 7, I = (i) => {
+  const n = [];
+  for (let t = 0; t < i.length; t += _)
+    n.push(i.slice(t, t + _));
+  return n;
+}, se = ({
+  maxPeriods: i = D,
+  defaultValues: n,
   label: t,
   labelPosition: b = "top",
   required: m = !1,
   notValidatedText: p = "",
   onChange: g
 }) => {
-  const R = Array.from({ length: n }, (r, e) => e + 1), a = I(R), j = a.map((r, e) => r.map((o) => ({
-    label: `${e + 1}${r.length === 1 ? "" : `.${(o - 1) % _ + 1}`}`,
+  const R = Array.from({ length: i }, (e, r) => r + 1), a = I(R), j = a.map((e, r) => e.map((o) => ({
+    label: `${r + 1}${e.length === 1 ? "" : `.${(o - 1) % _ + 1}`}`,
     value: o.toString()
-  }))), i = v(
+  }))), c = v(
     a.map(
-      (r) => r.reduce((e, o) => (c != null && c.includes(o) && e.push(o), e), [])
+      (e) => e.reduce((r, o) => (n?.includes(o) && r.push(o), r), [])
     )
-  ), [P, d] = M([]), u = (r) => r[S].length !== 0 || r[f].length !== 0 ? [E] : r[E].length !== 0 ? [S, f] : [], k = (r, e) => {
-    i.current[e] = r.map((o) => Number(o)), d(u(i.current)), g([...i.current.flat()].sort());
+  ), [P, d] = M([]), u = (e) => e[h].length !== 0 || e[S].length !== 0 ? [E] : e[E].length !== 0 ? [h, S] : [], k = (e, r) => {
+    c.current[r] = e.map((o) => Number(o)), d(u(c.current)), g([...c.current.flat()].sort());
   };
   return $(() => {
-    d(u(i.current));
-  }, []), /* @__PURE__ */ h(
+    d(u(c.current));
+  }, []), /* @__PURE__ */ f(
     "div",
     {
       className: x(
-        l["period-selector__container"],
-        l[`period-selector__container--label-${b}`]
+        s["period-selector__container"],
+        s[`period-selector__container--label-${b}`]
       ),
       children: [
-        t && /* @__PURE__ */ s(B, { htmlFor: "", required: m, children: t }),
-        /* @__PURE__ */ h("div", { className: l["period-selector__selector-container"], children: [
-          /* @__PURE__ */ s("div", { className: l["period-selector__selector-row"], children: j.map((r, e) => /* @__PURE__ */ s(
+        t && /* @__PURE__ */ l(B, { htmlFor: "", required: m, children: t }),
+        /* @__PURE__ */ f("div", { className: s["period-selector__selector-container"], children: [
+          /* @__PURE__ */ l("div", { className: s["period-selector__selector-row"], children: j.map((e, r) => /* @__PURE__ */ l(
             N,
             {
-              checkboxes: r,
-              defaultValues: i.current[e].map((o) => o.toString()),
-              disableGroup: P.includes(e),
+              checkboxes: e,
+              defaultValues: c.current[r].map((o) => o.toString()),
+              disableGroup: P.includes(r),
               required: m,
-              onSetValues: (o) => k(o, e),
+              onSetValues: (o) => k(o, r),
               notValidated: p !== ""
             },
-            `group_${e}`
+            `group_${r}`
           )) }),
-          p !== "" && /* @__PURE__ */ s(w, { level: "error", feedback: p })
+          p !== "" && /* @__PURE__ */ l(w, { level: "error", feedback: p })
         ] })
       ]
     }
   );
 };
 export {
-  lr as PeriodSelector
+  se as PeriodSelector
 };
 //# sourceMappingURL=PeriodSelector.js.map