@uva-glass/component-library 2.6.2 → 2.7.0

package/dist/components/CheckboxTree/CheckboxTree.js

@@ -1,33 +1,33 @@
-import { jsxs as i, jsx as a } from "react/jsx-runtime";
-import { useRef as B, useEffect as N } from "react";
-import { c as j } from "../../clsx-OuTLNxxd.js";
-import { Icon as T } from "../Icon/Icon.js";
-import { Button as R } from "../Buttons/Button.js";
+import { jsxs as u, jsx as i } from "react/jsx-runtime";
+import { useRef as y, useState as G, useEffect as O, createRef as S } from "react";
+import { c as E } from "../../clsx-OuTLNxxd.js";
+import { Icon as q } from "../Icon/Icon.js";
+import { Button as I } from "../Buttons/Button.js";
 import "../Buttons/LinkButton.js";
 import "@react-aria/button";
-import { Checkbox as y } from "../Checkbox/Checkbox.js";
-import { Label as w } from "../Label/Label.js";
+import { Checkbox as w } from "../Checkbox/Checkbox.js";
+import { Label as A } from "../Label/Label.js";
 import "@react-aria/dialog";
 import "@react-aria/focus";
 import "@react-aria/overlays";
 import "../OverlayCloseButton/OverlayCloseButton.js";
-import { FormField as S } from "../FormField/FormField.js";
+import { FormField as C } from "../FormField/FormField.js";
 import "../GridRow/GridRow.js";
 import "../IconButton/IconButton.js";
 import "../Input/Input.js";
 import "../InputField/InputField.js";
 import "react-router";
-import "../../TablePlugin-sPSGmCno.js";
+import "../../TablePlugin-5Cs2F_co.js";
 import "../RteEditor/Providers/LanguageProvider.js";
 import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
 import "../RteEditor/hooks/components/Flyout.js";
-import "../../index-0wq-B7do.js";
+import "../../index-B3c5pcHk.js";
 import "../SelectListbox/SelectListbox.js";
 import "../SelectListbox/SelectProvider.js";
 import "../Sortable/components/SortableItem.js";
-import "../../SortableProvider-BUsvniX7.js";
-import { useResponsive as I } from "../hooks/useResponsive.js";
-import '../../assets/CheckboxTree.css';const o = {
+import "../../SortableProvider-RaH_ZXB3.js";
+import { useResponsive as L } from "../hooks/useResponsive.js";
+import '../../assets/CheckboxTree.css';const s = {
   "checkbox-tree__header": "_checkbox-tree__header_3w3rj_1",
   "checkbox-tree__branch": "_checkbox-tree__branch_3w3rj_8",
   "checkbox-tree__branch--icon": "_checkbox-tree__branch--icon_3w3rj_21",
@@ -36,89 +36,125 @@ import '../../assets/CheckboxTree.css';const o = {
   "checkbox-tree__leaves": "_checkbox-tree__leaves_3w3rj_39",
   "checkbox-tree__leaves--expanded": "_checkbox-tree__leaves--expanded_3w3rj_48",
   "checkbox-tree__leaf": "_checkbox-tree__leaf_3w3rj_52"
-}, _e = ({
-  title: b,
-  checkboxTree: C,
-  defaultValue: l,
-  noLabelFrontWeight: m = !1,
-  onChange: u
+}, le = ({
+  title: f,
+  checkboxTree: B,
+  selectedValues: d,
+  noLabelFrontWeight: p = !1,
+  onChange: b
 }) => {
-  const s = B([]), { lessThan: n } = I(), _ = (r, e = document) => [].slice.call(e.querySelectorAll(r)), A = () => {
-    const r = s.current.reduce((e, t) => (t.name && t.checked && e.push(t.value), e), []);
-    u && u(r);
-  }, x = (r) => {
-    var e, t, d;
-    for (; r; ) {
-      const c = (t = (e = r.closest("[data-ul]")) == null ? void 0 : e.parentNode) == null ? void 0 : t.querySelector("input"), k = _(
-        "input",
-        (d = c == null ? void 0 : c.closest("[data-li]")) == null ? void 0 : d.querySelector("[data-ul]")
-      ).reduce((v, g) => (g.disabled || v.push(g.checked), v), []), p = k.every(Boolean), F = k.some(Boolean);
-      if (c && (c.checked = p, c.indeterminate = !p && p !== F), !c || r === c)
-        break;
-      r = c;
-    }
-  }, f = (r, e) => {
-    var d, c;
+  const n = y({}), [m, x] = G([]), { lessThan: h } = L(), F = (r, e) => {
+    if (r.length !== e.length) return !1;
+    const t = (o) => o.reduce((l, j) => (l[j] = (l[j] || 0) + 1, l), {}), c = t(r), a = t(e);
+    return !Object.keys(c).some((o) => c[o] !== a[o]);
+  }, k = (r) => (n.current[r] || (n.current[r] = S()), n.current[r]), v = () => {
+    const r = [];
+    Object.entries(n.current).forEach(([e]) => {
+      const t = n.current[e].current;
+      t && t.name.indexOf("Group") === -1 && t.checked && r.push(t.value);
+    }), x(r), b && b(r);
+  }, _ = (r) => {
+    if (r === "") return;
+    const e = [];
+    Object.entries(n.current).forEach(([a]) => {
+      const o = n.current[a].current;
+      o && (o == null ? void 0 : o.getAttribute("data-groupname")) === r && e.push(o.checked);
+    });
+    const t = e.every(Boolean), c = e.some(Boolean);
+    n.current[r].current && (n.current[r].current.checked = t, n.current[r].current.indeterminate = !t && t !== c, n.current[r].current.checked = t && t === c);
+  }, g = (r, e) => {
+    var c, a;
     const t = e == null ? void 0 : e.querySelector("[data-ul]");
-    r.childNodes[0].classList.toggle(o["checkbox-tree__branch--icon--expanded"]), (c = e == null ? void 0 : e.closest("[data-li]")) == null || c.setAttribute(
+    r.childNodes[0].classList.toggle(s["checkbox-tree__branch--icon--expanded"]), (a = e == null ? void 0 : e.closest("[data-li]")) == null || a.setAttribute(
       "aria-expanded",
-      ((d = e == null ? void 0 : e.closest("[data-li]")) == null ? void 0 : d.getAttribute("aria-expanded")) === "false" ? "true" : "false"
-    ), t && t.classList.toggle(o["checkbox-tree__leaves--expanded"]);
-  }, E = (r) => {
-    var c;
+      ((c = e == null ? void 0 : e.closest("[data-li]")) == null ? void 0 : c.getAttribute("aria-expanded")) === "false" ? "true" : "false"
+    ), t && t.classList.toggle(s["checkbox-tree__leaves--expanded"]);
+  }, R = (r) => {
     const e = r.target;
-    if (!e || !e.parentNode || !e.parentNode.parentNode) return;
-    const t = e.parentNode.parentNode;
-    if (n.md && ((c = e.previousElementSibling) == null ? void 0 : c.tagName) === "BUTTON" && t.getAttribute("aria-expanded") === "false") {
-      r.preventDefault(), f(t.querySelector("button"), t);
-      return;
+    if (!(e.type !== "checkbox" && e.type !== "button")) {
+      if (h.md && e.name.indexOf("Group") !== -1 && e.parentNode && e.parentNode.parentNode.getAttribute("aria-expanded") === "false") {
+        r.preventDefault(), g(e.parentNode, e.parentNode.parentNode);
+        return;
+      }
+      if (e.name.indexOf("Group") !== -1) {
+        const t = e.name;
+        Object.entries(n.current).forEach(([c]) => {
+          if (c.indexOf(`${t}_`) !== -1) {
+            const a = n.current[c].current, o = n.current[t].current;
+            if (!a || !o) return;
+            a.checked = !!o.checked;
+          }
+        }), _(t), v();
+        return;
+      }
+      _(e.getAttribute("data-groupname") || ""), v();
     }
-    if (s.current.indexOf(e) === -1) return;
-    (e.parentNode.parentNode ? _("input", e.parentNode.parentNode) : []).forEach((h) => h.checked = h.disabled ? !1 : e.checked), x(e), A();
-  }, q = (r) => {
+  }, $ = (r) => {
     const e = r.target, t = e.closest("[data-li]");
-    f(e, t);
+    g(e, t);
   };
-  return N(() => {
-    s.current = _("input") || [];
-  }, []), N(() => {
-    l && s.current.forEach((r) => {
-      l.includes(r.value) && (r.checked = !0, x(r));
+  return O(() => {
+    d && !F(d, m) && Object.entries(n.current).forEach(([r]) => {
+      const e = n.current[r].current;
+      e && (d != null && d.includes(e.value) ? e.checked = !0 : e.checked = !1, e.name.indexOf("Group") !== -1 && x(d || []));
+    });
+  }, [d]), O(() => {
+    Object.entries(n.current).forEach(([r]) => {
+      const e = n.current[r].current;
+      e && e.name.indexOf("Group") !== -1 && _(e.name);
     });
-  }, [l]), /* @__PURE__ */ i("div", { children: [
-    b && /* @__PURE__ */ a("span", { className: o["checkbox-tree__header"], children: b }),
-    /* @__PURE__ */ a("div", { onClick: E, "data-ul": !0, role: "tree", tabIndex: 0, children: C.map(({ itemName: r, children: e }) => /* @__PURE__ */ i(
+  }, [m]), /* @__PURE__ */ u("div", { children: [
+    f && /* @__PURE__ */ i("span", { className: s["checkbox-tree__header"], children: f }),
+    /* @__PURE__ */ i("div", { onClick: R, "data-ul": !0, role: "tree", tabIndex: 0, children: B.map(({ itemName: r, children: e }, t) => /* @__PURE__ */ u(
       "div",
       {
-        className: o["checkbox-tree__branch"],
+        className: s["checkbox-tree__branch"],
         "data-li": !0,
-        "aria-expanded": n.md ? "false" : "true",
+        "aria-expanded": h.md ? "false" : "true",
         children: [
-          /* @__PURE__ */ i(S, { inline: !0, className: o["checkbox-tree__branch--formfield"], children: [
-            /* @__PURE__ */ a(R, { variant: "blank", onClick: q, children: /* @__PURE__ */ a(
-              T,
+          /* @__PURE__ */ u(C, { inline: !0, className: s["checkbox-tree__branch--formfield"], children: [
+            /* @__PURE__ */ i(I, { variant: "blank", onClick: $, children: /* @__PURE__ */ i(
+              q,
               {
                 name: "CheveronRight",
                 size: 16,
-                className: j(o["checkbox-tree__branch--icon"], {
-                  [o["checkbox-tree__branch--icon--expanded"]]: !n.md
+                className: E(s["checkbox-tree__branch--icon"], {
+                  [s["checkbox-tree__branch--icon--expanded"]]: !h.md
                 })
               }
             ) }),
-            /* @__PURE__ */ a(y, { id: r, disabled: e.every((t) => t.disabled) }),
-            /* @__PURE__ */ a(w, { htmlFor: r, noFontWeight: m, children: r })
+            /* @__PURE__ */ i(
+              w,
+              {
+                id: r,
+                name: `Group${t}`,
+                disabled: e.every((c) => c.disabled),
+                ref: k(`Group${t}`)
+              }
+            ),
+            /* @__PURE__ */ i(A, { htmlFor: r, noFontWeight: p, children: r })
           ] }),
-          /* @__PURE__ */ a(
+          /* @__PURE__ */ i(
             "div",
             {
-              className: j(o["checkbox-tree__leaves"], {
-                [o["checkbox-tree__leaves--expanded"]]: !n.md
+              className: E(s["checkbox-tree__leaves"], {
+                [s["checkbox-tree__leaves--expanded"]]: !h.md
               }),
               "data-ul": !0,
-              children: e.map(({ itemName: t, itemValue: d, disabled: c }) => /* @__PURE__ */ a("div", { className: o["checkbox-tree__leaf"], "data-li": !0, children: /* @__PURE__ */ i(S, { inline: !0, className: o["checkbox-tree__branch--formfield"], children: [
-                /* @__PURE__ */ a(y, { id: t, name: t, value: d, disabled: c }),
-                /* @__PURE__ */ a(w, { htmlFor: t, noFontWeight: m, children: t })
-              ] }) }, t))
+              children: e.map(({ itemName: c, itemValue: a, disabled: o }) => /* @__PURE__ */ i("div", { className: s["checkbox-tree__leaf"], "data-li": !0, children: /* @__PURE__ */ u(C, { inline: !0, className: s["checkbox-tree__branch--formfield"], children: [
+                /* @__PURE__ */ i(
+                  w,
+                  {
+                    id: c,
+                    name: c,
+                    value: a,
+                    disabled: o,
+                    "data-groupname": `Group${t}`,
+                    ref: k(`Group${t}_${c}`)
+                  }
+                ),
+                /* @__PURE__ */ i(A, { htmlFor: c, noFontWeight: p, children: c })
+              ] }) }, c))
             }
           )
         ]
@@ -128,6 +164,6 @@ import '../../assets/CheckboxTree.css';const o = {
   ] });
 };
 export {
-  _e as CheckboxTree
+  le as CheckboxTree
 };
 //# sourceMappingURL=CheckboxTree.js.map

package/dist/components/CheckboxTree/CheckboxTree.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxTree.js","sources":["../../../src/components/CheckboxTree/CheckboxTree.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport type { MouseEventHandler } from 'react';\n\nimport styles from './CheckboxTree.module.css';\n\nimport { Button, Checkbox, FormField, Icon, Label } from 'components';\nimport { useResponsive } from 'components/hooks/useResponsive';\n\n// TODO: Currently the checkbox tree shows odd behavior when a disabled checkbox is checked. When deselecting the parent checkbox, the disabled checkbox is deselected, and will never be checked again. We'll leave this for now, until we run into a real world example where this is necessary.\n\nexport type CheckboxLeaf = {\n  itemName: string;\n  itemValue: string;\n  disabled?: boolean;\n};\n\nexport type CheckboxBranch = {\n  itemName: string;\n  children: CheckboxLeaf[];\n};\n\nexport interface CheckboxTreeProps {\n  /** The title of the component. */\n  title?: string;\n  /** Array of checkbox groups with a label and array of children (itemName, itemValue and disabled boolean). */\n  checkboxTree: CheckboxBranch[];\n  /** Array of selected values. */\n  defaultValue?: string[];\n  /** `true` if the font-weight needs to be unset; otherwise, `false`. The default is `false`. */\n  noLabelFrontWeight?: boolean;\n  /** Returns array of selected values. */\n  onChange?: (value: string[]) => void;\n}\n\n/** Represents a component to render a tree of checkboxes. */\nexport const CheckboxTree = ({\n  title,\n  checkboxTree,\n  defaultValue,\n  noLabelFrontWeight = false,\n  onChange,\n}: CheckboxTreeProps) => {\n  const checkboxNodes = useRef<HTMLInputElement[]>([]);\n  const { lessThan } = useResponsive();\n\n  const nodeArray = (selector: string, parent = document) => [].slice.call(parent.querySelectorAll(selector));\n\n  const setValue = () => {\n    const values = checkboxNodes.current.reduce((values, checkbox) => {\n      if (checkbox.name && checkbox.checked) {\n        values.push(checkbox.value);\n      }\n      return values;\n    }, [] as string[]);\n\n    if (onChange) onChange(values);\n  };\n\n  const setCheckboxesState = (check: HTMLInputElement) => {\n    while (check) {\n      const parent = check.closest('[data-ul]')?.parentNode?.querySelector('input');\n      const siblings: HTMLInputElement[] = nodeArray(\n        'input',\n        parent?.closest('[data-li]')?.querySelector('[data-ul]') as Document | undefined\n      );\n\n      const checkStatus = siblings.reduce((status, check) => {\n        if (!check.disabled) status.push(check.checked);\n        return status;\n      }, [] as boolean[]);\n\n      const every = checkStatus.every(Boolean);\n      const some = checkStatus.some(Boolean);\n\n      if (parent) {\n        parent.checked = every;\n        parent.indeterminate = !every && every !== some;\n      }\n\n      if (!parent || check === parent) {\n        break;\n      }\n\n      check = parent;\n    }\n  };\n\n  const setExpandedAttributes = (trigger: HTMLButtonElement, container: Element | null) => {\n    const children = container?.querySelector('[data-ul]');\n\n    (trigger.childNodes[0] as Element).classList.toggle(styles['checkbox-tree__branch--icon--expanded']);\n    container\n      ?.closest('[data-li]')\n      ?.setAttribute(\n        'aria-expanded',\n        container?.closest('[data-li]')?.getAttribute('aria-expanded') === 'false' ? 'true' : 'false'\n      );\n\n    if (children) {\n      children.classList.toggle(styles['checkbox-tree__leaves--expanded']);\n    }\n  };\n\n  const handleChange: MouseEventHandler<HTMLDivElement> = (event) => {\n    const check = event.target as HTMLInputElement;\n\n    if (!check || !check.parentNode || !check.parentNode.parentNode) return;\n    const parentCheckbox = check.parentNode.parentNode as HTMLElement;\n\n    if (\n      lessThan.md &&\n      check.previousElementSibling?.tagName === 'BUTTON' &&\n      parentCheckbox.getAttribute('aria-expanded') === 'false'\n    ) {\n      event.preventDefault();\n      setExpandedAttributes(parentCheckbox.querySelector('button') as HTMLButtonElement, parentCheckbox);\n      return;\n    }\n\n    if (checkboxNodes.current.indexOf(check) === -1) return;\n\n    const children: HTMLInputElement[] = (check.parentNode.parentNode as Document)\n      ? nodeArray('input', check.parentNode.parentNode as Document)\n      : [];\n\n    children.forEach((child) => {\n      return (child.checked = child.disabled ? false : check.checked);\n    });\n\n    setCheckboxesState(check);\n    setValue();\n  };\n\n  const handleExpanded: MouseEventHandler<HTMLButtonElement> = (event) => {\n    const target = event.target as HTMLButtonElement;\n    const parent = target.closest('[data-li]');\n    setExpandedAttributes(target, parent);\n  };\n\n  useEffect(() => {\n    checkboxNodes.current = nodeArray('input') || [];\n  }, []);\n\n  useEffect(() => {\n    if (defaultValue) {\n      checkboxNodes.current.forEach((checkbox) => {\n        if (defaultValue.includes(checkbox.value)) {\n          checkbox.checked = true;\n          setCheckboxesState(checkbox);\n        }\n      });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [defaultValue]);\n\n  return (\n    <div>\n      {title && <span className={styles['checkbox-tree__header']}>{title}</span>}\n      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}\n      <div onClick={handleChange} data-ul role=\"tree\" tabIndex={0}>\n        {checkboxTree.map(({ itemName, children }) => (\n          <div\n            key={itemName}\n            className={styles['checkbox-tree__branch']}\n            data-li\n            aria-expanded={lessThan.md ? 'false' : 'true'}\n          >\n            <FormField inline className={styles['checkbox-tree__branch--formfield']}>\n              <Button variant=\"blank\" onClick={handleExpanded}>\n                <Icon\n                  name=\"CheveronRight\"\n                  size={16}\n                  className={clsx(styles['checkbox-tree__branch--icon'], {\n                    [styles['checkbox-tree__branch--icon--expanded']]: !lessThan.md,\n                  })}\n                />\n              </Button>\n              <Checkbox id={itemName} disabled={children.every((checkbox) => checkbox.disabled)} />\n              <Label htmlFor={itemName} noFontWeight={noLabelFrontWeight}>\n                {itemName}\n              </Label>\n            </FormField>\n            <div\n              className={clsx(styles['checkbox-tree__leaves'], {\n                [styles['checkbox-tree__leaves--expanded']]: !lessThan.md,\n              })}\n              data-ul\n            >\n              {children.map(({ itemName, itemValue, disabled }) => (\n                <div key={itemName} className={styles['checkbox-tree__leaf']} data-li>\n                  <FormField inline className={styles['checkbox-tree__branch--formfield']}>\n                    <Checkbox id={itemName} name={itemName} value={itemValue} disabled={disabled} />\n                    <Label htmlFor={itemName} noFontWeight={noLabelFrontWeight}>\n                      {itemName}\n                    </Label>\n                  </FormField>\n                </div>\n              ))}\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"names":["CheckboxTree","title","checkboxTree","defaultValue","noLabelFrontWeight","onChange","checkboxNodes","useRef","lessThan","useResponsive","nodeArray","selector","parent","setValue","values","checkbox","setCheckboxesState","check","_b","_a","checkStatus","_c","status","every","some","setExpandedAttributes","trigger","container","children","styles","handleChange","event","parentCheckbox","child","handleExpanded","target","useEffect","itemName","jsxs","FormField","jsx","Button","Icon","clsx","Checkbox","Label","itemValue","disabled"],"mappings":"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"}
+{"version":3,"file":"CheckboxTree.js","sources":["../../../src/components/CheckboxTree/CheckboxTree.tsx"],"sourcesContent":["import { createRef, useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport type { MouseEventHandler, RefObject } from 'react';\n\nimport styles from './CheckboxTree.module.css';\n\nimport { Button, Checkbox, FormField, Icon, Label } from 'components';\nimport { useResponsive } from 'components/hooks/useResponsive';\n\n// TODO: Currently the checkbox tree shows odd behavior when a disabled checkbox is checked.\n// When deselecting the parent checkbox, the disabled checkbox is deselected, and will never\n// be checked again. We'll leave this for now, until we run into a real world\n// example where this is necessary.\n\nexport type CheckboxLeaf = {\n  itemName: string;\n  itemValue: string;\n  disabled?: boolean;\n};\n\nexport type CheckboxBranch = {\n  itemName: string;\n  children: CheckboxLeaf[];\n};\n\nexport interface CheckboxTreeProps {\n  /** The title of the component. */\n  title?: string;\n  /** Array of checkbox groups with a label and array of children (itemName, itemValue and disabled boolean). */\n  checkboxTree: CheckboxBranch[];\n  /** Array of selected values. */\n  selectedValues?: string[];\n  /** `true` if the font-weight needs to be unset; otherwise, `false`. The default is `false`. */\n  noLabelFrontWeight?: boolean;\n  /** Returns array of selected values. */\n  onChange?: (value: string[]) => void;\n}\n\n/** Represents a component to render a tree of checkboxes. */\nexport const CheckboxTree = ({\n  title,\n  checkboxTree,\n  selectedValues,\n  noLabelFrontWeight = false,\n  onChange,\n}: CheckboxTreeProps) => {\n  const checkboxRefs = useRef<Record<string, RefObject<HTMLInputElement>>>({});\n  const [values, setValues] = useState<string[]>([]);\n  const { lessThan } = useResponsive();\n\n  const valuesAreEqual = (values1: string[], values2: string[]): boolean => {\n    if (values1.length !== values2.length) return false;\n\n    const countElements = (list: string[]) =>\n      list.reduce((acc: Record<string, number>, val) => {\n        acc[val] = (acc[val] || 0) + 1;\n        return acc;\n      }, {});\n\n    const numberOfValues1 = countElements(values1);\n    const numberOfValues2 = countElements(values2);\n\n    return !Object.keys(numberOfValues1).some((key) => numberOfValues1[key] !== numberOfValues2[key]);\n  };\n\n  const createRefForKey = (key: string) => {\n    if (!checkboxRefs.current[key]) {\n      checkboxRefs.current[key] = createRef();\n    }\n    return checkboxRefs.current[key];\n  };\n\n  const setValue = () => {\n    const newValues: string[] = [];\n    Object.entries(checkboxRefs.current).forEach(([key]) => {\n      const chkBox = checkboxRefs.current[key].current;\n      if (chkBox && chkBox.name.indexOf('Group') === -1 && chkBox.checked) {\n        newValues.push(chkBox.value);\n      }\n    });\n    setValues(newValues);\n    if (onChange) onChange(newValues);\n  };\n\n  const setCheckboxesState = (checkGroupName: string) => {\n    if (checkGroupName === '') return;\n\n    const groupStatus: boolean[] = [];\n\n    Object.entries(checkboxRefs.current).forEach(([key]) => {\n      const chkBox = checkboxRefs.current[key].current;\n      if (!chkBox) return;\n      if (chkBox?.getAttribute('data-groupname') === checkGroupName) {\n        groupStatus.push(chkBox.checked);\n      }\n    });\n\n    const every = groupStatus.every(Boolean);\n    const some = groupStatus.some(Boolean);\n\n    if (checkboxRefs.current[checkGroupName].current) {\n      checkboxRefs.current[checkGroupName].current.checked = every;\n      checkboxRefs.current[checkGroupName].current.indeterminate = !every && every !== some;\n      checkboxRefs.current[checkGroupName].current.checked = every && every === some;\n    }\n  };\n\n  const setExpandedAttributes = (trigger: HTMLButtonElement, container: Element | null) => {\n    const children = container?.querySelector('[data-ul]');\n\n    (trigger.childNodes[0] as Element).classList.toggle(styles['checkbox-tree__branch--icon--expanded']);\n    container\n      ?.closest('[data-li]')\n      ?.setAttribute(\n        'aria-expanded',\n        container?.closest('[data-li]')?.getAttribute('aria-expanded') === 'false' ? 'true' : 'false'\n      );\n\n    if (children) {\n      children.classList.toggle(styles['checkbox-tree__leaves--expanded']);\n    }\n  };\n\n  const handleChange: MouseEventHandler<HTMLDivElement> = (event) => {\n    const check = event.target as HTMLInputElement;\n\n    if (check.type !== 'checkbox' && check.type !== 'button') return;\n\n    if (\n      lessThan.md &&\n      check.name.indexOf('Group') !== -1 &&\n      check.parentNode &&\n      (check.parentNode.parentNode as HTMLElement).getAttribute('aria-expanded') === 'false'\n    ) {\n      event.preventDefault();\n      setExpandedAttributes(check.parentNode as HTMLButtonElement, check.parentNode.parentNode as HTMLElement);\n      return;\n    }\n\n    if (check.name.indexOf('Group') !== -1) {\n      const childPrefix = check.name;\n      Object.entries(checkboxRefs.current).forEach(([key]) => {\n        if (key.indexOf(`${childPrefix}_`) !== -1) {\n          const chkBox = checkboxRefs.current[key].current;\n          const parentCheckbox = checkboxRefs.current[childPrefix].current;\n          if (!chkBox || !parentCheckbox) return;\n          chkBox.checked = parentCheckbox.checked ? true : false;\n        }\n      });\n      setCheckboxesState(childPrefix);\n      setValue();\n      return;\n    }\n    setCheckboxesState(check.getAttribute('data-groupname') || '');\n    setValue();\n  };\n\n  const handleExpanded: MouseEventHandler<HTMLButtonElement> = (event) => {\n    const target = event.target as HTMLButtonElement;\n    const parent = target.closest('[data-li]');\n    setExpandedAttributes(target, parent);\n  };\n\n  useEffect(() => {\n    if (selectedValues && !valuesAreEqual(selectedValues, values)) {\n      Object.entries(checkboxRefs.current).forEach(([key]) => {\n        const chkBox = checkboxRefs.current[key].current;\n        if (!chkBox) return;\n        if (selectedValues?.includes(chkBox.value)) {\n          chkBox.checked = true;\n        } else {\n          chkBox.checked = false;\n        }\n        if (chkBox.name.indexOf('Group') !== -1) {\n          setValues(selectedValues || []);\n        }\n      });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [selectedValues]);\n\n  useEffect(() => {\n    Object.entries(checkboxRefs.current).forEach(([key]) => {\n      const chkBox = checkboxRefs.current[key].current;\n      if (!chkBox) return;\n      if (chkBox.name.indexOf('Group') !== -1) {\n        setCheckboxesState(chkBox.name);\n      }\n    });\n  }, [values]);\n\n  return (\n    <div>\n      {title && <span className={styles['checkbox-tree__header']}>{title}</span>}\n      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}\n      <div onClick={handleChange} data-ul role=\"tree\" tabIndex={0}>\n        {checkboxTree.map(({ itemName, children }, index) => (\n          <div\n            key={itemName}\n            className={styles['checkbox-tree__branch']}\n            data-li\n            aria-expanded={lessThan.md ? 'false' : 'true'}\n          >\n            <FormField inline className={styles['checkbox-tree__branch--formfield']}>\n              <Button variant=\"blank\" onClick={handleExpanded}>\n                <Icon\n                  name=\"CheveronRight\"\n                  size={16}\n                  className={clsx(styles['checkbox-tree__branch--icon'], {\n                    [styles['checkbox-tree__branch--icon--expanded']]: !lessThan.md,\n                  })}\n                />\n              </Button>\n              <Checkbox\n                id={itemName}\n                name={`Group${index}`}\n                disabled={children.every((checkbox) => checkbox.disabled)}\n                ref={createRefForKey(`Group${index}`)}\n              />\n              <Label htmlFor={itemName} noFontWeight={noLabelFrontWeight}>\n                {itemName}\n              </Label>\n            </FormField>\n            <div\n              className={clsx(styles['checkbox-tree__leaves'], {\n                [styles['checkbox-tree__leaves--expanded']]: !lessThan.md,\n              })}\n              data-ul\n            >\n              {children.map(({ itemName, itemValue, disabled }) => (\n                <div key={itemName} className={styles['checkbox-tree__leaf']} data-li>\n                  <FormField inline className={styles['checkbox-tree__branch--formfield']}>\n                    <Checkbox\n                      id={itemName}\n                      name={itemName}\n                      value={itemValue}\n                      disabled={disabled}\n                      data-groupname={`Group${index}`}\n                      ref={createRefForKey(`Group${index}_${itemName}`)}\n                    />\n                    <Label htmlFor={itemName} noFontWeight={noLabelFrontWeight}>\n                      {itemName}\n                    </Label>\n                  </FormField>\n                </div>\n              ))}\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"names":["CheckboxTree","title","checkboxTree","selectedValues","noLabelFrontWeight","onChange","checkboxRefs","useRef","values","setValues","useState","lessThan","useResponsive","valuesAreEqual","values1","values2","countElements","list","acc","val","numberOfValues1","numberOfValues2","key","createRefForKey","createRef","setValue","newValues","chkBox","setCheckboxesState","checkGroupName","groupStatus","every","some","setExpandedAttributes","trigger","container","children","styles","_b","_a","handleChange","event","check","childPrefix","parentCheckbox","handleExpanded","target","parent","useEffect","itemName","index","jsxs","FormField","jsx","Button","Icon","clsx","Checkbox","checkbox","Label","itemValue","disabled"],"mappings":"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"}

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

@@ -1,5 +1,6 @@
-import { Meta } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import { CheckboxTreeProps } from './CheckboxTree';
 declare const _default: Meta<CheckboxTreeProps>;
 export default _default;
 export declare const CheckboxTreeExample: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, CheckboxTreeProps>;
+export declare const CheckboxTreeWithChips: StoryFn<CheckboxTreeProps>;

package/dist/components/CheckboxTree/CheckboxTree.stories.js

@@ -1,46 +1,136 @@
-import { jsx as h } from "react/jsx-runtime";
-import { fn as T } from "../../index-DWzkl4aY.js";
-import { CheckboxTree as a } from "./CheckboxTree.js";
-const u = (r, l, n) => {
-  const s = Array.from({ length: l }, (e, t) => t + 1), m = (e) => {
-    const t = Math.ceil(parseInt(e) / n), o = t === n ? "" : `.${parseInt(e) % n || n}`;
-    return `${t}${o}`;
-  }, i = s.map((e) => ({
-    itemName: m(String(e)),
-    itemValue: e,
+import { jsx as g, jsxs as x } from "react/jsx-runtime";
+import { j as S, q as D, f as V } from "../../index-CHX1d9_A.js";
+import { s as f } from "../../index-2mUSc_Ki.js";
+import { useState as v } from "react";
+import { CheckboxTree as y } from "./CheckboxTree.js";
+import { Chip as I } from "../Chip/Chip.js";
+let h;
+const j = new Uint8Array(16);
+function U() {
+  if (!h && (h = typeof crypto < "u" && crypto.getRandomValues && crypto.getRandomValues.bind(crypto), !h))
+    throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
+  return h(j);
+}
+const r = [];
+for (let e = 0; e < 256; ++e)
+  r.push((e + 256).toString(16).slice(1));
+function A(e, t = 0) {
+  return r[e[t + 0]] + r[e[t + 1]] + r[e[t + 2]] + r[e[t + 3]] + "-" + r[e[t + 4]] + r[e[t + 5]] + "-" + r[e[t + 6]] + r[e[t + 7]] + "-" + r[e[t + 8]] + r[e[t + 9]] + "-" + r[e[t + 10]] + r[e[t + 11]] + r[e[t + 12]] + r[e[t + 13]] + r[e[t + 14]] + r[e[t + 15]];
+}
+const P = typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto), R = {
+  randomUUID: P
+};
+function $(e, t, n) {
+  if (R.randomUUID && !e)
+    return R.randomUUID();
+  e = e || {};
+  const o = e.random || (e.rng || U)();
+  return o[6] = o[6] & 15 | 64, o[8] = o[8] & 63 | 128, A(o);
+}
+var k = "storybook/actions", N = `${k}/action-event`, M = { depth: 10, clearOnStoryChange: !0, limit: 50 }, w = (e, t) => {
+  let n = Object.getPrototypeOf(e);
+  return !n || t(n) ? n : w(n, t);
+}, F = (e) => !!(typeof e == "object" && e && w(e, (t) => /^Synthetic(?:Base)?Event$/.test(t.constructor.name)) && typeof e.persist == "function"), B = (e) => {
+  if (F(e)) {
+    let t = Object.create(e.constructor.prototype, Object.getOwnPropertyDescriptors(e));
+    t.persist();
+    let n = Object.getOwnPropertyDescriptor(t, "view"), o = n == null ? void 0 : n.value;
+    return typeof o == "object" && (o == null ? void 0 : o.constructor.name) === "Window" && Object.defineProperty(t, "view", { ...n, value: Object.create(o.constructor.prototype) }), t;
+  }
+  return e;
+}, W = () => typeof crypto == "object" && typeof crypto.getRandomValues == "function" ? $() : Date.now().toString(36) + Math.random().toString(36).substring(2);
+function _(e, t = {}) {
+  let n = { ...M, ...t }, o = function(...c) {
+    var b, O;
+    if (t.implicit) {
+      let E = (b = "__STORYBOOK_PREVIEW__" in f ? f.__STORYBOOK_PREVIEW__ : void 0) == null ? void 0 : b.storyRenders.find((d) => d.phase === "playing" || d.phase === "rendering");
+      if (E) {
+        let d = !((O = window == null ? void 0 : window.FEATURES) != null && O.disallowImplicitActionsInRenderV8), T = new S({ phase: E.phase, name: e, deprecated: d });
+        if (d) console.warn(T);
+        else throw T;
+      }
+    }
+    let s = D.getChannel(), m = W(), i = 5, a = c.map(B), l = c.length > 1 ? a : a[0], p = { id: m, count: 0, data: { name: e, args: l }, options: { ...n, maxDepth: i + (n.depth || 3), allowFunction: n.allowFunction || !1 } };
+    s.emit(N, p);
+  };
+  return o.isAction = !0, o.implicit = t.implicit, o;
+}
+const K = (e, t, n) => {
+  const o = Array.from({ length: t }, (i, a) => a + 1), c = (i) => {
+    const a = Math.ceil(parseInt(i) / n), l = a === n ? "" : `.${parseInt(i) % n || n}`;
+    return `${a}${l}`;
+  }, s = o.map((i) => ({
+    itemName: c(String(i)),
+    itemValue: i,
     disabled: !1
   }));
-  return s.reduce((e, t, o) => {
-    const c = Math.ceil(t / n);
-    return r.includes(String(o + 1)) && (e[c] || (e[c] = {
-      itemName: `Semester ${c}`,
+  return o.reduce((i, a, l) => {
+    const p = Math.ceil(a / n);
+    return e.includes(String(l + 1)) && (i[p] || (i[p] = {
+      itemName: `Semester ${p}`,
       children: []
-    }), e[c].children.push({
-      ...i[o],
-      itemValue: String(i[o].itemValue)
-    })), e;
+    }), i[p].children.push({
+      ...s[l],
+      itemValue: String(s[l].itemValue)
+    })), i;
   }, []);
-}, b = 7, f = 3, C = u(
+}, z = 7, L = 3, C = K(
   ["1", "2", "3", "4", "5", "6", "7"],
-  b,
-  f
-), E = "<CheckboxTree  title={} checkboxTree={} defaultValue={} onChange={} />", d = {
+  z,
+  L
+), H = "<CheckboxTree  title={} checkboxTree={} selectedValues={} onChange={} />", oe = {
   title: "Organisms/CheckboxTree",
-  component: a,
+  component: y,
   parameters: {
-    inspectComponent: a,
-    codeString: E
+    inspectComponent: y,
+    codeString: H
   }
-}, g = (r) => /* @__PURE__ */ h(a, { ...r }), p = g.bind({});
-p.args = {
+}, J = (e) => /* @__PURE__ */ g(y, { ...e }), Y = J.bind({});
+Y.args = {
   title: "Periode",
   checkboxTree: C,
   // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-  defaultValue: ["3", "4"],
-  onChange: T()
+  selectedValues: ["3", "4"],
+  onChange: V()
+};
+const u = 3, q = (e) => {
+  const t = Math.ceil(parseInt(e) / u), n = t === u ? "" : `.${parseInt(e) % u || u}`;
+  return `${t}${n}`;
+}, G = (e) => {
+  const [t, n] = e.split(".").map(Number);
+  return `${(t - 1) * u + (n || 1)}`;
+}, re = () => {
+  const [e, t] = v(["5", "4", "1"]), n = (c) => {
+    const s = JSON.parse(JSON.stringify(e)).filter(
+      (m) => m !== G(c)
+    );
+    t(() => s), _("onChange value:")(s);
+  }, o = (c) => {
+    t([...c]), _("onChange value:")(c);
+  };
+  return /* @__PURE__ */ x("div", { style: { width: "15rem" }, children: [
+    /* @__PURE__ */ g("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem", width: "100%", marginBottom: "1rem" }, children: e && e.map((c, s) => /* @__PURE__ */ g(
+      I,
+      {
+        label: q(c),
+        onDelete: n
+      },
+      `${s}_${c}`
+    )) }),
+    /* @__PURE__ */ g(
+      y,
+      {
+        title: "Periode",
+        checkboxTree: C,
+        selectedValues: e,
+        onChange: o
+      }
+    )
+  ] });
 };
 export {
-  p as CheckboxTreeExample,
-  d as default
+  Y as CheckboxTreeExample,
+  re as CheckboxTreeWithChips,
+  oe as default
 };
 //# sourceMappingURL=CheckboxTree.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CheckboxTree.stories.js","sources":["../../../src/components/CheckboxTree/CheckboxTree.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { CheckboxLeaf, CheckboxBranch, CheckboxTreeProps } from './CheckboxTree';\n\nimport { CheckboxTree } from './CheckboxTree';\n\nconst createPeriodTree = (periodIndices: string[], numberOfPeriods: number, periodPerSemester: number) => {\n  const allPeriods = Array.from({ length: numberOfPeriods }, (_, idx) => idx + 1);\n\n  const periodValueToLabel = (value: string) => {\n    const semester = Math.ceil(parseInt(value) / periodPerSemester);\n    const period = semester === periodPerSemester ? '' : `.${parseInt(value) % periodPerSemester || periodPerSemester}`;\n    return `${semester}${period}`;\n  };\n\n  const periodTree = allPeriods.map((periodIndex) => ({\n    itemName: periodValueToLabel(String(periodIndex)),\n    itemValue: periodIndex,\n    disabled: false,\n  }));\n\n  const periodTreeObject = allPeriods.reduce((periods, currentPeriod, periodIndex) => {\n    const semester = Math.ceil(currentPeriod / periodPerSemester);\n    if (periodIndices.includes(String(periodIndex + 1))) {\n      if (!periods[semester]) {\n        periods[semester] = {\n          itemName: `Semester ${semester}`,\n          children: [],\n        };\n      }\n      periods[semester].children.push({\n        ...periodTree[periodIndex],\n        itemValue: String(periodTree[periodIndex].itemValue),\n      } as CheckboxLeaf);\n    }\n    return periods;\n  }, [] as CheckboxBranch[]);\n\n  return periodTreeObject;\n};\n\nconst NUMBER_OF_PERIODS = 7;\nconst PERIOD_PER_SEMESTER = 3;\n\nconst MOCK_CHECKBOX_TREE = createPeriodTree(\n  ['1', '2', '3', '4', '5', '6', '7'],\n  NUMBER_OF_PERIODS,\n  PERIOD_PER_SEMESTER\n);\n\nconst codeString = '<CheckboxTree  title={} checkboxTree={} defaultValue={} onChange={} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Organisms/CheckboxTree',\n  component: CheckboxTree,\n  parameters: {\n    inspectComponent: CheckboxTree,\n    codeString: codeString,\n  },\n} as Meta<CheckboxTreeProps>;\n\nconst Template: StoryFn<CheckboxTreeProps> = (args) => <CheckboxTree {...args} />;\n\nexport const CheckboxTreeExample = Template.bind({});\nCheckboxTreeExample.args = {\n  title: 'Periode',\n  checkboxTree: MOCK_CHECKBOX_TREE,\n  // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n  defaultValue: ['3', '4'],\n  onChange: fn(),\n};\n"],"names":["createPeriodTree","periodIndices","numberOfPeriods","periodPerSemester","allPeriods","_","idx","periodValueToLabel","value","semester","period","periodTree","periodIndex","periods","currentPeriod","NUMBER_OF_PERIODS","PERIOD_PER_SEMESTER","MOCK_CHECKBOX_TREE","codeString","CheckboxTree_stories","CheckboxTree","Template","args","jsx","CheckboxTreeExample","fn"],"mappings":";;;AAOA,MAAMA,IAAmB,CAACC,GAAyBC,GAAyBC,MAA8B;AAClG,QAAAC,IAAa,MAAM,KAAK,EAAE,QAAQF,EAAgB,GAAG,CAACG,GAAGC,MAAQA,IAAM,CAAC,GAExEC,IAAqB,CAACC,MAAkB;AAC5C,UAAMC,IAAW,KAAK,KAAK,SAASD,CAAK,IAAIL,CAAiB,GACxDO,IAASD,MAAaN,IAAoB,KAAK,IAAI,SAASK,CAAK,IAAIL,KAAqBA,CAAiB;AAC1G,WAAA,GAAGM,CAAQ,GAAGC,CAAM;AAAA,EAC7B,GAEMC,IAAaP,EAAW,IAAI,CAACQ,OAAiB;AAAA,IAClD,UAAUL,EAAmB,OAAOK,CAAW,CAAC;AAAA,IAChD,WAAWA;AAAA,IACX,UAAU;AAAA,EAAA,EACV;AAmBK,SAjBkBR,EAAW,OAAO,CAACS,GAASC,GAAeF,MAAgB;AAClF,UAAMH,IAAW,KAAK,KAAKK,IAAgBX,CAAiB;AAC5D,WAAIF,EAAc,SAAS,OAAOW,IAAc,CAAC,CAAC,MAC3CC,EAAQJ,CAAQ,MACnBI,EAAQJ,CAAQ,IAAI;AAAA,MAClB,UAAU,YAAYA,CAAQ;AAAA,MAC9B,UAAU,CAAA;AAAA,IACZ,IAEMI,EAAAJ,CAAQ,EAAE,SAAS,KAAK;AAAA,MAC9B,GAAGE,EAAWC,CAAW;AAAA,MACzB,WAAW,OAAOD,EAAWC,CAAW,EAAE,SAAS;AAAA,IAAA,CACpC,IAEZC;AAAA,EACT,GAAG,EAAsB;AAG3B,GAEME,IAAoB,GACpBC,IAAsB,GAEtBC,IAAqBjB;AAAA,EACzB,CAAC,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,GAAG;AAAA,EAClCe;AAAA,EACAC;AACF,GAEME,IAAa,0EAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAuC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAc,GAAGE,GAAM,GAElEE,IAAsBH,EAAS,KAAK,CAAE,CAAA;AACnDG,EAAoB,OAAO;AAAA,EACzB,OAAO;AAAA,EACP,cAAcP;AAAA;AAAA,EAEd,cAAc,CAAC,KAAK,GAAG;AAAA,EACvB,UAAUQ,EAAG;AACf;"}
+{"version":3,"file":"CheckboxTree.stories.js","sources":["../../../node_modules/uuid/dist/esm-browser/rng.js","../../../node_modules/uuid/dist/esm-browser/stringify.js","../../../node_modules/uuid/dist/esm-browser/native.js","../../../node_modules/uuid/dist/esm-browser/v4.js","../../../node_modules/@storybook/addon-actions/dist/chunk-D5ZWXAHU.mjs","../../../src/components/CheckboxTree/CheckboxTree.stories.tsx"],"sourcesContent":["// Unique ID creation requires a high quality random # generator. In the browser we therefore\n// require the crypto API and do not support built-in fallback to lower quality random number\n// generators (like Math.random()).\nlet getRandomValues;\nconst rnds8 = new Uint8Array(16);\nexport default function rng() {\n  // lazy load so that environments that need to polyfill have a chance to do so\n  if (!getRandomValues) {\n    // getRandomValues needs to be invoked in a context where \"this\" is a Crypto implementation.\n    getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);\n\n    if (!getRandomValues) {\n      throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');\n    }\n  }\n\n  return getRandomValues(rnds8);\n}","import validate from './validate.js';\n/**\n * Convert array of 16 byte values to UUID string format of the form:\n * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX\n */\n\nconst byteToHex = [];\n\nfor (let i = 0; i < 256; ++i) {\n  byteToHex.push((i + 0x100).toString(16).slice(1));\n}\n\nexport function unsafeStringify(arr, offset = 0) {\n  // Note: Be careful editing this code!  It's been tuned for performance\n  // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434\n  return byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]];\n}\n\nfunction stringify(arr, offset = 0) {\n  const uuid = unsafeStringify(arr, offset); // Consistency check for valid UUID.  If this throws, it's likely due to one\n  // of the following:\n  // - One or more input array values don't map to a hex octet (leading to\n  // \"undefined\" in the uuid)\n  // - Invalid input values for the RFC `version` or `variant` fields\n\n  if (!validate(uuid)) {\n    throw TypeError('Stringified UUID is invalid');\n  }\n\n  return uuid;\n}\n\nexport default stringify;","const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);\nexport default {\n  randomUUID\n};","import native from './native.js';\nimport rng from './rng.js';\nimport { unsafeStringify } from './stringify.js';\n\nfunction v4(options, buf, offset) {\n  if (native.randomUUID && !buf && !options) {\n    return native.randomUUID();\n  }\n\n  options = options || {};\n  const rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`\n\n  rnds[6] = rnds[6] & 0x0f | 0x40;\n  rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided\n\n  if (buf) {\n    offset = offset || 0;\n\n    for (let i = 0; i < 16; ++i) {\n      buf[offset + i] = rnds[i];\n    }\n\n    return buf;\n  }\n\n  return unsafeStringify(rnds);\n}\n\nexport default v4;","import { addons } from 'storybook/internal/preview-api';\nimport { ImplicitActionsDuringRendering } from 'storybook/internal/preview-errors';\nimport { global } from '@storybook/global';\nimport { v4 } from 'uuid';\n\nvar PARAM_KEY=\"actions\",ADDON_ID=\"storybook/actions\",PANEL_ID=`${ADDON_ID}/panel`,EVENT_ID=`${ADDON_ID}/action-event`,CLEAR_ID=`${ADDON_ID}/action-clear`,CYCLIC_KEY=\"$___storybook.isCyclic\";var config={depth:10,clearOnStoryChange:!0,limit:50},configureActions=(options={})=>{Object.assign(config,options);};var findProto=(obj,callback)=>{let proto=Object.getPrototypeOf(obj);return !proto||callback(proto)?proto:findProto(proto,callback)},isReactSyntheticEvent=e=>!!(typeof e==\"object\"&&e&&findProto(e,proto=>/^Synthetic(?:Base)?Event$/.test(proto.constructor.name))&&typeof e.persist==\"function\"),serializeArg=a=>{if(isReactSyntheticEvent(a)){let e=Object.create(a.constructor.prototype,Object.getOwnPropertyDescriptors(a));e.persist();let viewDescriptor=Object.getOwnPropertyDescriptor(e,\"view\"),view=viewDescriptor?.value;return typeof view==\"object\"&&view?.constructor.name===\"Window\"&&Object.defineProperty(e,\"view\",{...viewDescriptor,value:Object.create(view.constructor.prototype)}),e}return a},generateId=()=>typeof crypto==\"object\"&&typeof crypto.getRandomValues==\"function\"?v4():Date.now().toString(36)+Math.random().toString(36).substring(2);function action(name,options={}){let actionOptions={...config,...options},handler=function(...args){if(options.implicit){let storyRenderer=(\"__STORYBOOK_PREVIEW__\"in global?global.__STORYBOOK_PREVIEW__:void 0)?.storyRenders.find(render=>render.phase===\"playing\"||render.phase===\"rendering\");if(storyRenderer){let deprecated=!window?.FEATURES?.disallowImplicitActionsInRenderV8,error=new ImplicitActionsDuringRendering({phase:storyRenderer.phase,name,deprecated});if(deprecated)console.warn(error);else throw error}}let channel=addons.getChannel(),id=generateId(),minDepth=5,serializedArgs=args.map(serializeArg),normalizedArgs=args.length>1?serializedArgs:serializedArgs[0],actionDisplayToEmit={id,count:0,data:{name,args:normalizedArgs},options:{...actionOptions,maxDepth:minDepth+(actionOptions.depth||3),allowFunction:actionOptions.allowFunction||!1}};channel.emit(EVENT_ID,actionDisplayToEmit);};return handler.isAction=!0,handler.implicit=options.implicit,handler}var actions=(...args)=>{let options=config,names=args;names.length===1&&Array.isArray(names[0])&&([names]=names),names.length!==1&&typeof names[names.length-1]!=\"string\"&&(options={...config,...names.pop()});let namesObject=names[0];(names.length!==1||typeof namesObject==\"string\")&&(namesObject={},names.forEach(name=>{namesObject[name]=name;}));let actionsObject={};return Object.keys(namesObject).forEach(name=>{actionsObject[name]=action(namesObject[name],options);}),actionsObject};\n\nexport { ADDON_ID, CLEAR_ID, CYCLIC_KEY, EVENT_ID, PANEL_ID, PARAM_KEY, action, actions, config, configureActions };\n","import { fn } from '@storybook/test';\nimport { action } from '@storybook/addon-actions';\nimport { useState } from 'react';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { CheckboxLeaf, CheckboxBranch, CheckboxTreeProps } from './CheckboxTree';\n\nimport { CheckboxTree } from './CheckboxTree';\n\nimport { Chip } from 'components/Chip';\n\nconst createPeriodTree = (periodIndices: string[], numberOfPeriods: number, periodPerSemester: number) => {\n  const allPeriods = Array.from({ length: numberOfPeriods }, (_, idx) => idx + 1);\n\n  const periodValueToLabel = (value: string) => {\n    const semester = Math.ceil(parseInt(value) / periodPerSemester);\n    const period = semester === periodPerSemester ? '' : `.${parseInt(value) % periodPerSemester || periodPerSemester}`;\n    return `${semester}${period}`;\n  };\n\n  const periodTree = allPeriods.map((periodIndex) => ({\n    itemName: periodValueToLabel(String(periodIndex)),\n    itemValue: periodIndex,\n    disabled: false,\n  }));\n\n  const periodTreeObject = allPeriods.reduce((periods, currentPeriod, periodIndex) => {\n    const semester = Math.ceil(currentPeriod / periodPerSemester);\n    if (periodIndices.includes(String(periodIndex + 1))) {\n      if (!periods[semester]) {\n        periods[semester] = {\n          itemName: `Semester ${semester}`,\n          children: [],\n        };\n      }\n      periods[semester].children.push({\n        ...periodTree[periodIndex],\n        itemValue: String(periodTree[periodIndex].itemValue),\n      } as CheckboxLeaf);\n    }\n    return periods;\n  }, [] as CheckboxBranch[]);\n\n  return periodTreeObject;\n};\n\nconst NUMBER_OF_PERIODS = 7;\nconst PERIOD_PER_SEMESTER = 3;\n\nconst MOCK_CHECKBOX_TREE = createPeriodTree(\n  ['1', '2', '3', '4', '5', '6', '7'],\n  NUMBER_OF_PERIODS,\n  PERIOD_PER_SEMESTER\n);\n\nconst codeString = '<CheckboxTree  title={} checkboxTree={} selectedValues={} onChange={} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Organisms/CheckboxTree',\n  component: CheckboxTree,\n  parameters: {\n    inspectComponent: CheckboxTree,\n    codeString: codeString,\n  },\n} as Meta<CheckboxTreeProps>;\n\nconst Template: StoryFn<CheckboxTreeProps> = (args) => <CheckboxTree {...args} />;\n\nexport const CheckboxTreeExample = Template.bind({});\nCheckboxTreeExample.args = {\n  title: 'Periode',\n  checkboxTree: MOCK_CHECKBOX_TREE,\n  // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n  selectedValues: ['3', '4'],\n  onChange: fn(),\n};\n\nconst PERIOD_SEGMENT = 3;\n\nconst periodValueToLabel = (value: string) => {\n  const semester = Math.ceil(parseInt(value) / PERIOD_SEGMENT);\n  const period = semester === PERIOD_SEGMENT ? '' : `.${parseInt(value) % PERIOD_SEGMENT || PERIOD_SEGMENT}`;\n  return `${semester}${period}`;\n};\n\nconst periodLabelToValue = (value: string): string => {\n  const [row, col] = value.split('.').map(Number);\n  return `${(row - 1) * PERIOD_SEGMENT + (col || 1)}`;\n};\n\nexport const CheckboxTreeWithChips: StoryFn<CheckboxTreeProps> = () => {\n  const [activeFilters, setActiveFilters] = useState<string[]>(['5', '4', '1']);\n\n  const handleRemoveActiveFilter = (filterToRemove: string) => {\n    const newActiveFilters = JSON.parse(JSON.stringify(activeFilters)).filter(\n      (filter: string) => filter !== periodLabelToValue(filterToRemove)\n    );\n\n    setActiveFilters(() => newActiveFilters);\n    action('onChange value:')(newActiveFilters);\n  };\n\n  const handlePeriodChange = (value: string[]) => {\n    setActiveFilters([...value]);\n    action('onChange value:')(value);\n  };\n\n  return (\n    <div style={{ width: '15rem' }}>\n      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', width: '100%', marginBottom: '1rem' }}>\n        {activeFilters &&\n          activeFilters.map((activeFilter, index) => (\n            <Chip\n              label={periodValueToLabel(activeFilter)}\n              onDelete={handleRemoveActiveFilter}\n              key={`${index}_${activeFilter}`}\n            />\n          ))}\n      </div>\n      <CheckboxTree\n        title=\"Periode\"\n        checkboxTree={MOCK_CHECKBOX_TREE}\n        selectedValues={activeFilters}\n        onChange={handlePeriodChange}\n      />\n    </div>\n  );\n};\n"],"names":["getRandomValues","rnds8","rng","byteToHex","i","unsafeStringify","arr","offset","randomUUID","native","v4","options","buf","rnds","ADDON_ID","EVENT_ID","config","findProto","obj","callback","proto","isReactSyntheticEvent","serializeArg","a","e","viewDescriptor","view","generateId","action","name","actionOptions","handler","args","storyRenderer","_a","global","render","deprecated","_b","error","ImplicitActionsDuringRendering","channel","addons","id","minDepth","serializedArgs","normalizedArgs","actionDisplayToEmit","createPeriodTree","periodIndices","numberOfPeriods","periodPerSemester","allPeriods","_","idx","periodValueToLabel","value","semester","period","periodTree","periodIndex","periods","currentPeriod","NUMBER_OF_PERIODS","PERIOD_PER_SEMESTER","MOCK_CHECKBOX_TREE","codeString","CheckboxTree_stories","CheckboxTree","Template","jsx","CheckboxTreeExample","fn","PERIOD_SEGMENT","periodLabelToValue","row","col","CheckboxTreeWithChips","activeFilters","setActiveFilters","useState","handleRemoveActiveFilter","filterToRemove","newActiveFilters","filter","handlePeriodChange","activeFilter","index","Chip"],"mappings":"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","x_google_ignoreList":[0,1,2,3,4]}

package/dist/components/Chip/Chip.stories.js

@@ -1,5 +1,5 @@
 import { jsx as l } from "react/jsx-runtime";
-import { fn as t } from "../../index-DWzkl4aY.js";
+import { f as t } from "../../index-CHX1d9_A.js";
 import { Chip as e } from "./Chip.js";
 const s = "<Chip label={string} onDelete={onDeleteFunction(label)}/>", b = {
   title: "Atoms/Chip",

package/dist/components/Drawer/Drawer.stories.js

@@ -1,6 +1,6 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
 import { OverlayProvider as p } from "@react-aria/overlays";
-import { fn as m } from "../../index-DWzkl4aY.js";
+import { f as m } from "../../index-CHX1d9_A.js";
 import { useState as c } from "react";
 import { Drawer as r } from "./Drawer.js";
 import { Button as o } from "../Buttons/Button.js";

package/dist/components/FormInput/FormInput.d.ts

@@ -13,7 +13,7 @@ export interface FormInputProps {
     /** error text to display if set */
     notValidatedText?: string;
     /** Returns array of selected values as number */
-    onChange: (value: string) => void;
+    onChange?: (value: string) => void;
     /** Determines if the container wrapper is rendered. */
     noContainer?: boolean;
     /** Optional custom input that will replace the default input */