@uva-glass/component-library 2.5.1 → 2.5.2

package/dist/assets/CheckboxTree.css

@@ -1 +1 @@
-._checkbox-tree__header_xbe4e_1{display:block;font-weight:var(--semibold);margin-bottom:.75rem;text-align:left}._checkbox-tree__branch_xbe4e_8{list-style:none;-webkit-user-select:none;user-select:none}._checkbox-tree__branch_xbe4e_8[aria-expanded=false]{margin-bottom:.5rem}._checkbox-tree__branch_xbe4e_8 input[type=checkbox]:disabled+label{color:var(--color-grey-300)}._checkbox-tree__branch--icon_xbe4e_21{pointer-events:none;transform:rotate(0);transition:transform .3s ease-out}._checkbox-tree__branch--icon--expanded_xbe4e_27{transform:rotate(90deg);transition:transform .3s ease-in}._checkbox-tree__branch--formfield_xbe4e_32{align-items:center;display:flex;flex-direction:row;gap:.5rem}._checkbox-tree__leaves_xbe4e_39{display:none;flex-direction:column;gap:.5rem;list-style:none;margin:.5rem 0 .5rem 1rem;-webkit-user-select:none;user-select:none}._checkbox-tree__leaves--expanded_xbe4e_48{display:flex}._checkbox-tree__leaf_xbe4e_52{align-items:center;display:flex;flex-direction:row;gap:0 .5rem;margin-left:1.5rem;-webkit-user-select:none;user-select:none}._checkbox-tree__leaf_xbe4e_52 input[type=checkbox]:disabled+label{color:var(--color-grey-300)}
+._checkbox-tree__header_1xy6y_1{display:block;font-weight:var(--semibold);margin-bottom:.5rem;text-align:left}._checkbox-tree__branch_1xy6y_8{list-style:none;-webkit-user-select:none;user-select:none}._checkbox-tree__branch_1xy6y_8[aria-expanded=false]{margin-bottom:.5rem}._checkbox-tree__branch_1xy6y_8 input[type=checkbox]:disabled+label{color:var(--color-grey-300)}._checkbox-tree__branch--icon_1xy6y_21{pointer-events:none;transform:rotate(0);transition:transform .3s ease-out}._checkbox-tree__branch--icon--expanded_1xy6y_27{transform:rotate(90deg);transition:transform .3s ease-in}._checkbox-tree__branch--formfield_1xy6y_32{align-items:center;display:flex;flex-direction:row;gap:.5rem}._checkbox-tree__leaves_1xy6y_39{display:none;flex-direction:column;gap:.5rem;list-style:none;margin:.5rem 0 .5rem 1rem;-webkit-user-select:none;user-select:none}._checkbox-tree__leaves--expanded_1xy6y_48{display:flex}._checkbox-tree__leaf_1xy6y_52{align-items:center;display:flex;flex-direction:row;gap:0 .5rem;margin-left:1.5rem;-webkit-user-select:none;user-select:none}._checkbox-tree__leaf_1xy6y_52 input[type=checkbox]:disabled+label{color:var(--color-grey-300)}

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

@@ -1,9 +1,9 @@
-type CheckboxLeaf = {
+export type CheckboxLeaf = {
     itemName: string;
     itemValue: string;
     disabled?: boolean;
 };
-type CheckboxBranch = {
+export type CheckboxBranch = {
     itemName: string;
     children: CheckboxLeaf[];
 };
@@ -21,4 +21,3 @@ export interface CheckboxTreeProps {
 }
 /** Represents a component to render a tree of checkboxes. */
 export declare const CheckboxTree: ({ title, checkboxTree, defaultValue, noLabelFrontWeight, onChange, }: CheckboxTreeProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/CheckboxTree/CheckboxTree.js

@@ -1,6 +1,6 @@
 import { jsxs as i, jsx as a } from "react/jsx-runtime";
-import { useRef as R, useEffect as N } from "react";
-import { c as y } from "../../clsx-OuTLNxxd.js";
+import { useRef as R, useEffect as g } from "react";
+import { c as N } from "../../clsx-OuTLNxxd.js";
 import { Icon as j } from "../Icon/Icon.js";
 import { Button as I } from "../Buttons/Button.js";
 import "../Buttons/LinkButton.js";
@@ -28,14 +28,14 @@ import "../Sortable/components/SortableItem.js";
 import "../../SortableProvider-BUsvniX7.js";
 import { useResponsive as L } from "../hooks/useResponsive.js";
 import '../../assets/CheckboxTree.css';const o = {
-  "checkbox-tree__header": "_checkbox-tree__header_xbe4e_1",
-  "checkbox-tree__branch": "_checkbox-tree__branch_xbe4e_8",
-  "checkbox-tree__branch--icon": "_checkbox-tree__branch--icon_xbe4e_21",
-  "checkbox-tree__branch--icon--expanded": "_checkbox-tree__branch--icon--expanded_xbe4e_27",
-  "checkbox-tree__branch--formfield": "_checkbox-tree__branch--formfield_xbe4e_32",
-  "checkbox-tree__leaves": "_checkbox-tree__leaves_xbe4e_39",
-  "checkbox-tree__leaves--expanded": "_checkbox-tree__leaves--expanded_xbe4e_48",
-  "checkbox-tree__leaf": "_checkbox-tree__leaf_xbe4e_52"
+  "checkbox-tree__header": "_checkbox-tree__header_1xy6y_1",
+  "checkbox-tree__branch": "_checkbox-tree__branch_1xy6y_8",
+  "checkbox-tree__branch--icon": "_checkbox-tree__branch--icon_1xy6y_21",
+  "checkbox-tree__branch--icon--expanded": "_checkbox-tree__branch--icon--expanded_1xy6y_27",
+  "checkbox-tree__branch--formfield": "_checkbox-tree__branch--formfield_1xy6y_32",
+  "checkbox-tree__leaves": "_checkbox-tree__leaves_1xy6y_39",
+  "checkbox-tree__leaves--expanded": "_checkbox-tree__leaves--expanded_1xy6y_48",
+  "checkbox-tree__leaf": "_checkbox-tree__leaf_1xy6y_52"
 }, _e = ({
   title: b,
   checkboxTree: E,
@@ -52,7 +52,7 @@ import '../../assets/CheckboxTree.css';const o = {
       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), T = k.some(Boolean);
+      ).reduce((y, v) => (v.disabled || y.push(v.checked), y), []), p = k.every(Boolean), T = k.some(Boolean);
       if (c && (c.checked = p, c.indeterminate = !p && p !== T), !c || r === c)
         break;
       r = c;
@@ -79,9 +79,9 @@ import '../../assets/CheckboxTree.css';const o = {
     const e = r.target, t = e.closest("[data-li]");
     f(e, t);
   };
-  return N(() => {
+  return g(() => {
     s.current = _("input") || [];
-  }, []), N(() => {
+  }, []), g(() => {
     l && s.current.forEach((r) => {
       l.includes(r.value) && (r.checked = !0, u(r));
     });
@@ -100,7 +100,7 @@ import '../../assets/CheckboxTree.css';const o = {
               {
                 name: "CheveronRight",
                 size: 16,
-                className: y(o["checkbox-tree__branch--icon"], {
+                className: N(o["checkbox-tree__branch--icon"], {
                   [o["checkbox-tree__branch--icon--expanded"]]: !n.md
                 })
               }
@@ -111,7 +111,7 @@ import '../../assets/CheckboxTree.css';const o = {
           /* @__PURE__ */ a(
             "div",
             {
-              className: y(o["checkbox-tree__leaves"], {
+              className: N(o["checkbox-tree__leaves"], {
                 [o["checkbox-tree__leaves--expanded"]]: !n.md
               }),
               "data-ul": !0,

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\ntype CheckboxLeaf = {\n  itemName: string;\n  itemValue: string;\n  disabled?: boolean;\n};\n\ntype 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 { 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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"}

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

@@ -1,74 +1,46 @@
-import { jsx as a } from "react/jsx-runtime";
-import { fn as m } from "../../index-DWzkl4aY.js";
-import { CheckboxTree as e } from "./CheckboxTree.js";
-const i = [
-  {
-    itemName: "Semester 1",
-    children: [
-      {
-        itemName: "1.1",
-        itemValue: "1",
-        disabled: !0
-      },
-      {
-        itemName: "1.2",
-        itemValue: "2",
-        disabled: !1
-      },
-      {
-        itemName: "1.3",
-        itemValue: "3",
-        disabled: !1
-      }
-    ]
-  },
-  {
-    itemName: "Semester 2",
-    children: [
-      {
-        itemName: "2.1",
-        itemValue: "4",
-        disabled: !1
-      },
-      {
-        itemName: "2.2",
-        itemValue: "5",
-        disabled: !0
-      },
-      {
-        itemName: "2.3",
-        itemValue: "6",
-        disabled: !1
-      }
-    ]
-  },
-  {
-    itemName: "Semester 3",
-    children: [
-      {
-        itemName: "3",
-        itemValue: "7",
-        disabled: !1
-      }
-    ]
-  }
-], l = "<CheckboxTree  title={} checkboxTree={} defaultValue={} onChange={} />", c = {
+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,
+    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}`,
+      children: []
+    }), e[c].children.push({
+      ...i[o],
+      itemValue: String(i[o].itemValue)
+    })), e;
+  }, []);
+}, b = 7, f = 3, C = u(
+  ["1", "2", "3", "4", "5", "6", "7"],
+  b,
+  f
+), E = "<CheckboxTree  title={} checkboxTree={} defaultValue={} onChange={} />", d = {
   title: "Organisms/CheckboxTree",
-  component: e,
+  component: a,
   parameters: {
-    inspectComponent: e,
-    codeString: l
+    inspectComponent: a,
+    codeString: E
   }
-}, s = (t) => /* @__PURE__ */ a(e, { ...t }), r = s.bind({});
-r.args = {
+}, g = (r) => /* @__PURE__ */ h(a, { ...r }), p = g.bind({});
+p.args = {
   title: "Periode",
-  checkboxTree: i,
+  checkboxTree: C,
   // eslint-disable-next-line @typescript-eslint/no-magic-numbers
   defaultValue: ["3", "4"],
-  onChange: m()
+  onChange: T()
 };
 export {
-  r as CheckboxTreeExample,
-  c as default
+  p as CheckboxTreeExample,
+  d 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 { CheckboxTreeProps } from './CheckboxTree';\n\nimport { CheckboxTree } from './CheckboxTree';\n\nconst MOCK_CHECKBOX_TREE = [\n  {\n    itemName: 'Semester 1',\n    children: [\n      {\n        itemName: '1.1',\n        itemValue: '1',\n        disabled: true,\n      },\n      {\n        itemName: '1.2',\n        itemValue: '2',\n        disabled: false,\n      },\n      {\n        itemName: '1.3',\n        itemValue: '3',\n        disabled: false,\n      },\n    ],\n  },\n  {\n    itemName: 'Semester 2',\n    children: [\n      {\n        itemName: '2.1',\n        itemValue: '4',\n        disabled: false,\n      },\n      {\n        itemName: '2.2',\n        itemValue: '5',\n        disabled: true,\n      },\n      {\n        itemName: '2.3',\n        itemValue: '6',\n        disabled: false,\n      },\n    ],\n  },\n  {\n    itemName: 'Semester 3',\n    children: [\n      {\n        itemName: '3',\n        itemValue: '7',\n        disabled: false,\n      },\n    ],\n  },\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":["MOCK_CHECKBOX_TREE","codeString","CheckboxTree_stories","CheckboxTree","Template","args","jsx","CheckboxTreeExample","fn"],"mappings":";;;AAOA,MAAMA,IAAqB;AAAA,EACzB;AAAA,IACE,UAAU;AAAA,IACV,UAAU;AAAA,MACR;AAAA,QACE,UAAU;AAAA,QACV,WAAW;AAAA,QACX,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,UAAU;AAAA,QACV,WAAW;AAAA,QACX,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,UAAU;AAAA,QACV,WAAW;AAAA,QACX,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EAEJ;AAAA,EACA;AAAA,IACE,UAAU;AAAA,IACV,UAAU;AAAA,MACR;AAAA,QACE,UAAU;AAAA,QACV,WAAW;AAAA,QACX,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,UAAU;AAAA,QACV,WAAW;AAAA,QACX,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,UAAU;AAAA,QACV,WAAW;AAAA,QACX,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EAEJ;AAAA,EACA;AAAA,IACE,UAAU;AAAA,IACV,UAAU;AAAA,MACR;AAAA,QACE,UAAU;AAAA,QACV,WAAW;AAAA,QACX,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EACF;AAEJ,GAEMC,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":["../../../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;"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@uva-glass/component-library",
   "author": "Team Glass - Frontend vrienden",
   "private": false,
-  "version": "2.5.1",
+  "version": "2.5.2",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",