@uva-glass/component-library 3.30.0 → 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.js

@@ -1,58 +1,58 @@
-import { jsxs as c, jsx as o } from "react/jsx-runtime";
-import { c as s } from "../../clsx-OuTLNxxd.js";
-import { Icon as r } from "../Icon/Icon.js";
-import '../../assets/Notification.css';const p = "_notification_eo06p_1", t = {
-  notification: p,
-  "notification--default": "_notification--default_eo06p_6",
-  "notification--bar": "_notification--bar_eo06p_9",
-  "notification--neutral": "_notification--neutral_eo06p_14",
-  "notification--information": "_notification--information_eo06p_18",
-  "notification--success": "_notification--success_eo06p_22",
-  "notification--warning": "_notification--warning_eo06p_26",
-  "notification--danger": "_notification--danger_eo06p_30",
-  "notification-content": "_notification-content_eo06p_54",
-  "notification-content--text": "_notification-content--text_eo06p_58",
-  "notification-title": "_notification-title_eo06p_64",
-  "notification-subtitle": "_notification-subtitle_eo06p_68",
-  "notification-close-button": "_notification-close-button_eo06p_72",
-  "notification-close-button--bar--neutral": "_notification-close-button--bar--neutral_eo06p_106",
-  "notification-close-button--bar--information": "_notification-close-button--bar--information_eo06p_107",
-  "notification-close-button--bar--danger": "_notification-close-button--bar--danger_eo06p_108",
-  "notification-close-button--neutral": "_notification-close-button--neutral_eo06p_112",
-  "notification-close-button--information": "_notification-close-button--information_eo06p_116",
-  "notification-close-button--success": "_notification-close-button--success_eo06p_120",
-  "notification-close-button--warning": "_notification-close-button--warning_eo06p_123",
-  "notification-close-button--danger": "_notification-close-button--danger_eo06p_126",
-  "notification-close-button--bar--success": "_notification-close-button--bar--success_eo06p_139",
-  "notification-close-button--bar--warning": "_notification-close-button--bar--warning_eo06p_142"
-}, N = ({ title: _, subtitle: a, action: e, variant: f = "default", level: i, onClose: l }) => {
-  const u = f === "bar";
-  function b(n) {
-    return n === "neutral" ? "CalendarEdit" : n === "information" ? "SquareInfo" : n === "success" ? "CheckCircle" : "ExclamationTriangleMini";
+import { jsxs as c, jsx as i } from "react/jsx-runtime";
+import { c as e } from "../../clsx-OuTLNxxd.js";
+import { Icon as f } from "../Icon/Icon.js";
+import '../../assets/Notification.css';const w = "_notification_qwbrb_1", t = {
+  notification: w,
+  "notification--default": "_notification--default_qwbrb_7",
+  "notification--bar": "_notification--bar_qwbrb_10",
+  "notification--neutral": "_notification--neutral_qwbrb_15",
+  "notification--information": "_notification--information_qwbrb_19",
+  "notification--success": "_notification--success_qwbrb_23",
+  "notification--warning": "_notification--warning_qwbrb_27",
+  "notification--danger": "_notification--danger_qwbrb_31",
+  "notification-content": "_notification-content_qwbrb_55",
+  "notification-content--text": "_notification-content--text_qwbrb_59",
+  "notification-title": "_notification-title_qwbrb_65",
+  "notification-subtitle": "_notification-subtitle_qwbrb_69",
+  "notification-close-button": "_notification-close-button_qwbrb_73",
+  "notification-close-button--bar--neutral": "_notification-close-button--bar--neutral_qwbrb_107",
+  "notification-close-button--bar--information": "_notification-close-button--bar--information_qwbrb_108",
+  "notification-close-button--bar--danger": "_notification-close-button--bar--danger_qwbrb_109",
+  "notification-close-button--neutral": "_notification-close-button--neutral_qwbrb_113",
+  "notification-close-button--information": "_notification-close-button--information_qwbrb_117",
+  "notification-close-button--success": "_notification-close-button--success_qwbrb_121",
+  "notification-close-button--warning": "_notification-close-button--warning_qwbrb_124",
+  "notification-close-button--danger": "_notification-close-button--danger_qwbrb_127",
+  "notification-close-button--bar--success": "_notification-close-button--bar--success_qwbrb_140",
+  "notification-close-button--bar--warning": "_notification-close-button--bar--warning_qwbrb_143"
+}, g = ({ title: s, subtitle: a, action: r, variant: b = "default", level: n, onClose: _ }) => {
+  const l = b === "bar";
+  function u(o) {
+    return o === "neutral" ? "CalendarEdit" : o === "information" ? "SquareInfo" : o === "success" ? "CheckCircle" : "ExclamationTriangleMini";
   }
-  return /* @__PURE__ */ c("div", { className: s(t.notification, t[`notification--${f}`], t[`notification--${i}`]), children: [
+  return /* @__PURE__ */ c("div", { className: e(t.notification, t[`notification--${b}`], t[`notification--${n}`]), children: [
     /* @__PURE__ */ c("div", { className: t["notification-content"], children: [
-      /* @__PURE__ */ o(r, { name: b(i) }),
+      /* @__PURE__ */ i(f, { name: u(n) }),
       /* @__PURE__ */ c("div", { className: t["notification-content--text"], children: [
-        /* @__PURE__ */ o("p", { className: t["notification-title"], children: _ }),
-        a && /* @__PURE__ */ o("p", { className: t["notification-subtitle"], children: a }),
-        e && /* @__PURE__ */ o("div", { className: t["notification-action"], children: e })
+        /* @__PURE__ */ i("p", { className: t["notification-title"], children: s }),
+        a && /* @__PURE__ */ i("p", { className: t["notification-subtitle"], children: a }),
+        r && /* @__PURE__ */ i("div", { className: t["notification-action"], children: r })
       ] })
     ] }),
-    l && /* @__PURE__ */ o(
+    _ && /* @__PURE__ */ i(
       "button",
       {
         type: "button",
         "aria-label": "close",
-        className: s(t["notification-close-button"], t[`notification-close-button--${i}`], {
-          [t[`notification-close-button--bar--${i}`]]: u
+        className: e(t["notification-close-button"], t[`notification-close-button--${n}`], {
+          [t[`notification-close-button--bar--${n}`]]: l
         }),
-        children: /* @__PURE__ */ o(r, { name: "Cross", size: 24 })
+        children: /* @__PURE__ */ i(f, { name: "Cross", size: 24 })
       }
     )
   ] });
 };
 export {
-  N as Notification
+  g as Notification
 };
 //# sourceMappingURL=Notification.js.map

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;"}