@uva-glass/component-library 2.5.1 → 2.6.0

package/dist/{SelectListbox.module-BWavTmq8.js → SelectListbox.module-DX1IVM9E.js}

@@ -1,25 +1,26 @@
-import './assets/SelectListbox.css';const t = {
-  "select-listbox-container": "_select-listbox-container_fhuzt_1",
-  "select-listbox__wrapper": "_select-listbox__wrapper_fhuzt_5",
-  "select-listbox-trigger": "_select-listbox-trigger_fhuzt_15",
-  "select-listbox-trigger--default": "_select-listbox-trigger--default_fhuzt_30",
-  "select-listbox-trigger--small": "_select-listbox-trigger--small_fhuzt_34",
-  "select-listbox-trigger--medium": "_select-listbox-trigger--medium_fhuzt_38",
-  "select-listbox-trigger-label": "_select-listbox-trigger-label_fhuzt_43",
-  "select-listbox__wrapper--align-right": "_select-listbox__wrapper--align-right_fhuzt_52",
-  "select-listbox-trigger--bold": "_select-listbox-trigger--bold_fhuzt_56",
-  "select-listbox-trigger--pill": "_select-listbox-trigger--pill_fhuzt_60",
-  "select-listbox-trigger--pillLeft": "_select-listbox-trigger--pillLeft_fhuzt_65",
-  "select-listbox-trigger--pillRight": "_select-listbox-trigger--pillRight_fhuzt_70",
-  "select-listbox-trigger--darkBorder": "_select-listbox-trigger--darkBorder_fhuzt_75",
-  "select-listbox-trigger--noborder": "_select-listbox-trigger--noborder_fhuzt_89",
-  "select-listbox-trigger-icon": "_select-listbox-trigger-icon_fhuzt_101",
-  "select-listbox-trigger-icon--open": "_select-listbox-trigger-icon--open_fhuzt_106",
-  "select-listbox": "_select-listbox_fhuzt_1",
-  "select-listbox-option": "_select-listbox-option_fhuzt_120",
-  "select-listbox-option--active": "_select-listbox-option--active_fhuzt_133"
+import './assets/SelectListbox.css';const e = {
+  "select-listbox-container": "_select-listbox-container_w4hvm_1",
+  "select-listbox__wrapper": "_select-listbox__wrapper_w4hvm_5",
+  "select-listbox-trigger": "_select-listbox-trigger_w4hvm_15",
+  "select-listbox-trigger--default": "_select-listbox-trigger--default_w4hvm_30",
+  "select-listbox-trigger--small": "_select-listbox-trigger--small_w4hvm_34",
+  "select-listbox-trigger--medium": "_select-listbox-trigger--medium_w4hvm_38",
+  "select-listbox-trigger-label": "_select-listbox-trigger-label_w4hvm_43",
+  "select-listbox__wrapper--align-right": "_select-listbox__wrapper--align-right_w4hvm_52",
+  "select-listbox-trigger--bold": "_select-listbox-trigger--bold_w4hvm_56",
+  "select-listbox-trigger--pill": "_select-listbox-trigger--pill_w4hvm_60",
+  "select-listbox-trigger--pillLeft": "_select-listbox-trigger--pillLeft_w4hvm_65",
+  "select-listbox-trigger--pillRight": "_select-listbox-trigger--pillRight_w4hvm_70",
+  "select-listbox-trigger--darkBorder": "_select-listbox-trigger--darkBorder_w4hvm_75",
+  "select-listbox-trigger--noborder": "_select-listbox-trigger--noborder_w4hvm_89",
+  "select-listbox-trigger-icon": "_select-listbox-trigger-icon_w4hvm_101",
+  "select-listbox-trigger-icon--open": "_select-listbox-trigger-icon--open_w4hvm_106",
+  "select-listbox": "_select-listbox_w4hvm_1",
+  "select-listbox-option": "_select-listbox-option_w4hvm_120",
+  "select-listbox-option--active": "_select-listbox-option--active_w4hvm_133",
+  "select-listbox-divider": "_select-listbox-divider_w4hvm_143"
 };
 export {
-  t as s
+  e as s
 };
-//# sourceMappingURL=SelectListbox.module-BWavTmq8.js.map
+//# sourceMappingURL=SelectListbox.module-DX1IVM9E.js.map

package/dist/SelectListbox.module-DX1IVM9E.js.map

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

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/assets/SelectListbox.css

@@ -1 +1 @@
-._select-listbox-container_fhuzt_1{position:relative}._select-listbox__wrapper_fhuzt_5{border-radius:.5rem;box-shadow:0 0 .25rem #00000040;height:auto;overflow:hidden;position:fixed;width:auto;z-index:20}._select-listbox-trigger_fhuzt_15{align-items:center;background-color:var(--color-white);border:1px solid var(--color-silver);border-radius:.5rem;cursor:pointer;display:flex;font:inherit;justify-content:space-between;line-height:inherit;overflow:hidden;padding:.4rem 2rem .4rem 1rem;width:100%}._select-listbox-trigger--default_fhuzt_30{padding:.75rem 2rem .75rem 1rem}._select-listbox-trigger--small_fhuzt_34{padding:.4rem 2rem .4rem 1rem}._select-listbox-trigger--medium_fhuzt_38{height:2.75rem;padding:.5rem 2rem .5rem 1rem}._select-listbox-trigger-label_fhuzt_43{min-height:.65rem;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap;width:100%}._select-listbox__wrapper--align-right_fhuzt_52{right:0}._select-listbox-trigger--bold_fhuzt_56{font-weight:var(--semibold)}._select-listbox-trigger--pill_fhuzt_60{border-radius:6.25rem;padding:.5rem 1.5rem}._select-listbox-trigger--pillLeft_fhuzt_65{border-radius:6.25rem 0 0 6.25rem;padding-left:1.5rem}._select-listbox-trigger--pillRight_fhuzt_70{border-radius:0 6.25rem 6.25rem 0;padding-right:1.25rem}._select-listbox-trigger--darkBorder_fhuzt_75{border-color:var(--color-dark)}._select-listbox-trigger_fhuzt_15:focus-visible{background-color:var(--color-lavender);outline:1px solid var(--color-scarpa-flow)}._select-listbox-trigger_fhuzt_15:focus-visible,._select-listbox-trigger_fhuzt_15:hover{background-color:var(--color-lavender)}._select-listbox-trigger--noborder_fhuzt_89{border:none}._select-listbox-trigger--pillLeft_fhuzt_65+._select-listbox__wrapper_fhuzt_5{left:1rem}._select-listbox-trigger--pillRight_fhuzt_70+._select-listbox__wrapper--align-right_fhuzt_52{right:1rem}._select-listbox-trigger-icon_fhuzt_101{position:absolute;right:.875rem}._select-listbox-trigger-icon--open_fhuzt_106{transform:rotate(180deg)}._select-listbox_fhuzt_1{background-color:var(--color-white);list-style:none;margin:0;min-width:100%;overflow-y:auto;padding:4px;width:fit-content}._select-listbox-option_fhuzt_120{align-items:center;border-radius:.25rem;cursor:pointer;display:flex;justify-content:space-between;padding:.5rem .75rem;position:relative;-webkit-user-select:none;user-select:none}._select-listbox-option--active_fhuzt_133,._select-listbox-option_fhuzt_120:hover{background-color:var(--color-grey-100);box-shadow:0 0 0 1px var(--color-white)}._select-listbox-option_fhuzt_120[aria-selected=true]{font-weight:var(--semibold)}
+._select-listbox-container_w4hvm_1{position:relative}._select-listbox__wrapper_w4hvm_5{border-radius:.5rem;box-shadow:0 0 .25rem #00000040;height:auto;overflow:hidden;position:fixed;width:auto;z-index:20}._select-listbox-trigger_w4hvm_15{align-items:center;background-color:var(--color-white);border:1px solid var(--color-silver);border-radius:.5rem;cursor:pointer;display:flex;font:inherit;justify-content:space-between;line-height:inherit;overflow:hidden;padding:.4rem 2rem .4rem 1rem;width:100%}._select-listbox-trigger--default_w4hvm_30{padding:.75rem 2rem .75rem 1rem}._select-listbox-trigger--small_w4hvm_34{padding:.4rem 2rem .4rem 1rem}._select-listbox-trigger--medium_w4hvm_38{height:2.75rem;padding:.5rem 2rem .5rem 1rem}._select-listbox-trigger-label_w4hvm_43{min-height:.65rem;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap;width:100%}._select-listbox__wrapper--align-right_w4hvm_52{right:0}._select-listbox-trigger--bold_w4hvm_56{font-weight:var(--semibold)}._select-listbox-trigger--pill_w4hvm_60{border-radius:6.25rem;padding:.5rem 1.5rem}._select-listbox-trigger--pillLeft_w4hvm_65{border-radius:6.25rem 0 0 6.25rem;padding-left:1.5rem}._select-listbox-trigger--pillRight_w4hvm_70{border-radius:0 6.25rem 6.25rem 0;padding-right:1.25rem}._select-listbox-trigger--darkBorder_w4hvm_75{border-color:var(--color-dark)}._select-listbox-trigger_w4hvm_15:focus-visible{background-color:var(--color-lavender);outline:1px solid var(--color-scarpa-flow)}._select-listbox-trigger_w4hvm_15:focus-visible,._select-listbox-trigger_w4hvm_15:hover{background-color:var(--color-lavender)}._select-listbox-trigger--noborder_w4hvm_89{border:none}._select-listbox-trigger--pillLeft_w4hvm_65+._select-listbox__wrapper_w4hvm_5{left:1rem}._select-listbox-trigger--pillRight_w4hvm_70+._select-listbox__wrapper--align-right_w4hvm_52{right:1rem}._select-listbox-trigger-icon_w4hvm_101{position:absolute;right:.875rem}._select-listbox-trigger-icon--open_w4hvm_106{transform:rotate(180deg)}._select-listbox_w4hvm_1{background-color:var(--color-white);list-style:none;margin:0;min-width:100%;overflow-y:auto;padding:4px;width:fit-content}._select-listbox-option_w4hvm_120{align-items:center;border-radius:.25rem;cursor:pointer;display:flex;justify-content:space-between;padding:.5rem .75rem;position:relative;-webkit-user-select:none;user-select:none}._select-listbox-option--active_w4hvm_133,._select-listbox-option_w4hvm_120:hover{background-color:var(--color-grey-100);box-shadow:0 0 0 1px var(--color-white)}._select-listbox-option_w4hvm_120[aria-selected=true]{font-weight:var(--semibold)}._select-listbox-divider_w4hvm_143{height:1px;background-color:var(--color-grey-200);margin:1px -.25rem}

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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCaA,KAAe,CAAC;AAAA,EAC3B,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,oBAAAC,IAAqB;AAAA,EACrB,UAAAC;AACF,MAAyB;AACjB,QAAAC,IAAgBC,EAA2B,EAAE,GAC7C,EAAE,UAAAC,EAAS,IAAIC,EAAc,GAE7BC,IAAY,CAACC,GAAkBC,IAAS,aAAa,CAAA,EAAG,MAAM,KAAKA,EAAO,iBAAiBD,CAAQ,CAAC,GAEpGE,IAAW,MAAM;AACrB,UAAMC,IAASR,EAAc,QAAQ,OAAO,CAACQ,GAAQC,OAC/CA,EAAS,QAAQA,EAAS,WAC5BD,EAAO,KAAKC,EAAS,KAAK,GAErBD,IACN,EAAc;AAEb,IAAAT,OAAmBS,CAAM;AAAA,EAC/B,GAEME,IAAqB,CAACC,MAA4B;;AACtD,WAAOA,KAAO;AACZ,YAAML,KAASM,KAAAC,IAAAF,EAAM,QAAQ,WAAW,MAAzB,gBAAAE,EAA4B,eAA5B,gBAAAD,EAAwC,cAAc,UAM/DE,IAL+BV;AAAA,QACnC;AAAA,SACAW,IAAAT,KAAA,gBAAAA,EAAQ,QAAQ,iBAAhB,gBAAAS,EAA8B,cAAc;AAAA,MAC9C,EAE6B,OAAO,CAACC,GAAQL,OACtCA,EAAM,YAAiBK,EAAA,KAAKL,EAAM,OAAO,GACvCK,IACN,EAAe,GAEZC,IAAQH,EAAY,MAAM,OAAO,GACjCI,IAAOJ,EAAY,KAAK,OAAO;AAOjC,UALAR,MACFA,EAAO,UAAUW,GACVX,EAAA,gBAAgB,CAACW,KAASA,MAAUC,IAGzC,CAACZ,KAAUK,MAAUL;AACvB;AAGM,MAAAK,IAAAL;AAAA,IAAA;AAAA,EAEZ,GAEMa,IAAwB,CAACC,GAA4BC,MAA8B;;AACjF,UAAAC,IAAWD,KAAA,gBAAAA,EAAW,cAAc;AAEzC,IAAAD,EAAQ,WAAW,CAAC,EAAc,UAAU,OAAOG,EAAO,uCAAuC,CAAC,IAE/FX,IAAAS,KAAA,gBAAAA,EAAA,QAAQ,iBAAR,QAAAT,EACA;AAAA,MACA;AAAA,QACAC,IAAAQ,KAAA,gBAAAA,EAAW,QAAQ,iBAAnB,gBAAAR,EAAiC,aAAa,sBAAqB,UAAU,SAAS;AAAA,OAGtFS,KACFA,EAAS,UAAU,OAAOC,EAAO,iCAAiC,CAAC;AAAA,EAEvE,GAEMC,IAAkD,CAACC,MAAU;;AACjE,UAAMd,IAAQc,EAAM;AAEhB,QAAA,CAACd,KAAS,CAACA,EAAM,cAAc,CAACA,EAAM,WAAW,WAAY;AAC3D,UAAAe,IAAiBf,EAAM,WAAW;AAGtC,QAAAT,EAAS,QACTW,IAAAF,EAAM,2BAAN,gBAAAE,EAA8B,aAAY,YAC1Ca,EAAe,aAAa,eAAe,MAAM,SACjD;AACA,MAAAD,EAAM,eAAe,GACrBN,EAAsBO,EAAe,cAAc,QAAQ,GAAwBA,CAAc;AACjG;AAAA,IAAA;AAGF,QAAI1B,EAAc,QAAQ,QAAQW,CAAK,MAAM,GAAI;AAMxC,KAJ6BA,EAAM,WAAW,aACnDP,EAAU,SAASO,EAAM,WAAW,UAAsB,IAC1D,CAAC,GAEI,QAAQ,CAACgB,MACRA,EAAM,UAAUA,EAAM,WAAW,KAAQhB,EAAM,OACxD,GAEDD,EAAmBC,CAAK,GACfJ,EAAA;AAAA,EACX,GAEMqB,IAAuD,CAACH,MAAU;AACtE,UAAMI,IAASJ,EAAM,QACfnB,IAASuB,EAAO,QAAQ,WAAW;AACzC,IAAAV,EAAsBU,GAAQvB,CAAM;AAAA,EACtC;AAEA,SAAAwB,EAAU,MAAM;AACd,IAAA9B,EAAc,UAAUI,EAAU,OAAO,KAAK,CAAC;AAAA,EACjD,GAAG,EAAE,GAEL0B,EAAU,MAAM;AACd,IAAIjC,KACYG,EAAA,QAAQ,QAAQ,CAACS,MAAa;AAC1C,MAAIZ,EAAa,SAASY,EAAS,KAAK,MACtCA,EAAS,UAAU,IACnBC,EAAmBD,CAAQ;AAAA,IAC7B,CACD;AAAA,EACH,GAEC,CAACZ,CAAY,CAAC,qBAGd,OACE,EAAA,UAAA;AAAA,IAAAF,uBAAU,QAAK,EAAA,WAAW4B,EAAO,uBAAuB,GAAI,UAAM5B,GAAA;AAAA,sBAElE,OAAI,EAAA,SAAS6B,GAAc,WAAO,IAAC,MAAK,QAAO,UAAU,GACvD,YAAa,IAAI,CAAC,EAAE,UAAAO,GAAU,UAAAT,QAC7B,gBAAAU;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAWT,EAAO,uBAAuB;AAAA,QACzC,WAAO;AAAA,QACP,iBAAerB,EAAS,KAAK,UAAU;AAAA,QAEvC,UAAA;AAAA,UAAA,gBAAA8B,EAACC,KAAU,QAAM,IAAC,WAAWV,EAAO,kCAAkC,GACpE,UAAA;AAAA,YAAA,gBAAAW,EAACC,GAAO,EAAA,SAAQ,SAAQ,SAASP,GAC/B,UAAA,gBAAAM;AAAA,cAACE;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,MAAM;AAAA,gBACN,WAAWC,EAAKd,EAAO,6BAA6B,GAAG;AAAA,kBACrD,CAACA,EAAO,uCAAuC,CAAC,GAAG,CAACrB,EAAS;AAAA,gBAC9D,CAAA;AAAA,cAAA;AAAA,YAAA,GAEL;AAAA,YACA,gBAAAgC,EAACI,GAAS,EAAA,IAAIP,GAAU,UAAUT,EAAS,MAAM,CAACb,MAAaA,EAAS,QAAQ,EAAG,CAAA;AAAA,8BAClF8B,GAAM,EAAA,SAASR,GAAU,cAAcjC,GACrC,UACHiC,EAAA,CAAA;AAAA,UAAA,GACF;AAAA,UACA,gBAAAG;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWG,EAAKd,EAAO,uBAAuB,GAAG;AAAA,gBAC/C,CAACA,EAAO,iCAAiC,CAAC,GAAG,CAACrB,EAAS;AAAA,cAAA,CACxD;AAAA,cACD,WAAO;AAAA,cAEN,UAAAoB,EAAS,IAAI,CAAC,EAAE,UAAAS,GAAU,WAAAS,GAAW,UAAAC,EACpC,MAAA,gBAAAP,EAAC,OAAmB,EAAA,WAAWX,EAAO,qBAAqB,GAAG,WAAO,IACnE,UAAC,gBAAAS,EAAAC,GAAA,EAAU,QAAM,IAAC,WAAWV,EAAO,kCAAkC,GACpE,UAAA;AAAA,gBAAA,gBAAAW,EAACI,KAAS,IAAIP,GAAU,MAAMA,GAAU,OAAOS,GAAW,UAAAC,GAAoB;AAAA,kCAC7EF,GAAM,EAAA,SAASR,GAAU,cAAcjC,GACrC,UAAAiC,EACH,CAAA;AAAA,cAAA,EACF,CAAA,EAAA,GANQA,CAOV,CACD;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,MApCKA;AAAA,IAAA,CAsCR,EACH,CAAA;AAAA,EAAA,GACF;AAEJ;"}

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/dist/components/PeriodSelector/PeriodSelector.d.ts

@@ -3,7 +3,7 @@ export interface PeriodSelectorProps {
     maxPeriods: 6 | 7;
     /** array of period values [3, 5 ...] */
     defaultValues?: number[];
-    label: string;
+    label?: string;
     labelPosition?: 'top' | 'left';
     /** Shows red * */
     required?: boolean;

package/dist/components/PeriodSelector/PeriodSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"PeriodSelector.js","sources":["../../../src/components/PeriodSelector/PeriodSelector.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useEffect, useRef, useState } from 'react';\n\nimport styles from './PeriodSelector.module.css';\n\nimport { Label, CheckboxButtonBar, FeedbackBox } from 'components';\n\nexport interface PeriodSelectorProps {\n  /** Indicates how many periods are shown. */\n  // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n  maxPeriods: 6 | 7;\n  /** array of period values [3, 5 ...] */\n  defaultValues?: number[];\n  label: string;\n  labelPosition?: 'top' | 'left';\n  /** Shows red * */\n  required?: boolean;\n  /** error text to display if set */\n  notValidatedText?: string;\n  /** Returns array of selected values as number */\n  onChange: (values: number[]) => void;\n}\n\nconst SEMESTER_1 = 0;\nconst SEMESTER_2 = 1;\nconst SEMESTER_3 = 2;\n\nconst PERIODS_PER_SEMESTER = 3;\nconst MAX_PERIODS = 7;\n\nconst chunkPeriods = (array: number[]): number[][] => {\n  const result: number[][] = [];\n  for (let count = 0; count < array.length; count += PERIODS_PER_SEMESTER) {\n    result.push(array.slice(count, count + PERIODS_PER_SEMESTER));\n  }\n  return result;\n};\n\n/** Checkbox group for selecting periods */\nexport const PeriodSelector = ({\n  maxPeriods = MAX_PERIODS,\n  defaultValues,\n  label,\n  labelPosition = 'top',\n  required = false,\n  notValidatedText = '',\n  onChange,\n}: PeriodSelectorProps) => {\n  const maxPeriodsList = Array.from({ length: maxPeriods }, (_, index) => index + 1);\n  const chunkedPeriods = chunkPeriods(maxPeriodsList);\n\n  const checkboxItems = chunkedPeriods.map((periods, semester) => {\n    return periods.map((period) => ({\n      label: `${semester + 1}${periods.length === 1 ? '' : `.${((period - 1) % PERIODS_PER_SEMESTER) + 1}`}`,\n      value: period.toString(),\n    }));\n  });\n\n  const returnValues = useRef<number[][]>(\n    chunkedPeriods.map((semester) =>\n      semester.reduce((periods, period) => {\n        if (defaultValues?.includes(period)) periods.push(period);\n        return periods;\n      }, [] as number[])\n    )\n  );\n  const [disableSemesters, setDisableSemesters] = useState<number[]>([]);\n\n  const disableGroups = (selects: number[][]) => {\n    if (selects[SEMESTER_1].length !== 0 || selects[SEMESTER_2].length !== 0) return [SEMESTER_3];\n    if (selects[SEMESTER_3].length !== 0) return [SEMESTER_1, SEMESTER_2];\n    return [];\n  };\n\n  const handleChange = (values: string[], index: number) => {\n    returnValues.current[index] = values.map((num) => Number(num));\n    setDisableSemesters(disableGroups(returnValues.current));\n    onChange([...returnValues.current.flat()].sort());\n  };\n\n  useEffect(() => {\n    setDisableSemesters(disableGroups(returnValues.current));\n  }, []);\n\n  return (\n    <div\n      className={clsx(\n        styles['period-selector__container'],\n        styles[`period-selector__container--label-${labelPosition}`]\n      )}\n    >\n      {label && (\n        <Label htmlFor=\"\" required={required}>\n          {label}\n        </Label>\n      )}\n      <div className={styles['period-selector__selector-container']}>\n        <div className={styles['period-selector__selector-row']}>\n          {checkboxItems.map((checkboxes, semester) => (\n            <CheckboxButtonBar\n              key={`group_${semester}`}\n              checkboxes={checkboxes}\n              defaultValues={returnValues.current[semester].map((num) => num.toString())}\n              disableGroup={disableSemesters.includes(semester)}\n              required={required}\n              onSetValues={(event) => handleChange(event, semester)}\n            />\n          ))}\n        </div>\n        {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n      </div>\n    </div>\n  );\n};\n"],"names":["SEMESTER_1","SEMESTER_2","SEMESTER_3","PERIODS_PER_SEMESTER","MAX_PERIODS","chunkPeriods","array","result","count","PeriodSelector","maxPeriods","defaultValues","label","labelPosition","required","notValidatedText","onChange","maxPeriodsList","_","index","chunkedPeriods","checkboxItems","periods","semester","period","returnValues","useRef","disableSemesters","setDisableSemesters","useState","disableGroups","selects","handleChange","values","num","useEffect","jsxs","clsx","styles","jsx","Label","checkboxes","CheckboxButtonBar","event","FeedbackBox"],"mappings":"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"}
+{"version":3,"file":"PeriodSelector.js","sources":["../../../src/components/PeriodSelector/PeriodSelector.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useEffect, useRef, useState } from 'react';\n\nimport styles from './PeriodSelector.module.css';\n\nimport { Label, CheckboxButtonBar, FeedbackBox } from 'components';\n\nexport interface PeriodSelectorProps {\n  /** Indicates how many periods are shown. */\n  // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n  maxPeriods: 6 | 7;\n  /** array of period values [3, 5 ...] */\n  defaultValues?: number[];\n  label?: string;\n  labelPosition?: 'top' | 'left';\n  /** Shows red * */\n  required?: boolean;\n  /** error text to display if set */\n  notValidatedText?: string;\n  /** Returns array of selected values as number */\n  onChange: (values: number[]) => void;\n}\n\nconst SEMESTER_1 = 0;\nconst SEMESTER_2 = 1;\nconst SEMESTER_3 = 2;\n\nconst PERIODS_PER_SEMESTER = 3;\nconst MAX_PERIODS = 7;\n\nconst chunkPeriods = (array: number[]): number[][] => {\n  const result: number[][] = [];\n  for (let count = 0; count < array.length; count += PERIODS_PER_SEMESTER) {\n    result.push(array.slice(count, count + PERIODS_PER_SEMESTER));\n  }\n  return result;\n};\n\n/** Checkbox group for selecting periods */\nexport const PeriodSelector = ({\n  maxPeriods = MAX_PERIODS,\n  defaultValues,\n  label,\n  labelPosition = 'top',\n  required = false,\n  notValidatedText = '',\n  onChange,\n}: PeriodSelectorProps) => {\n  const maxPeriodsList = Array.from({ length: maxPeriods }, (_, index) => index + 1);\n  const chunkedPeriods = chunkPeriods(maxPeriodsList);\n\n  const checkboxItems = chunkedPeriods.map((periods, semester) => {\n    return periods.map((period) => ({\n      label: `${semester + 1}${periods.length === 1 ? '' : `.${((period - 1) % PERIODS_PER_SEMESTER) + 1}`}`,\n      value: period.toString(),\n    }));\n  });\n\n  const returnValues = useRef<number[][]>(\n    chunkedPeriods.map((semester) =>\n      semester.reduce((periods, period) => {\n        if (defaultValues?.includes(period)) periods.push(period);\n        return periods;\n      }, [] as number[])\n    )\n  );\n  const [disableSemesters, setDisableSemesters] = useState<number[]>([]);\n\n  const disableGroups = (selects: number[][]) => {\n    if (selects[SEMESTER_1].length !== 0 || selects[SEMESTER_2].length !== 0) return [SEMESTER_3];\n    if (selects[SEMESTER_3].length !== 0) return [SEMESTER_1, SEMESTER_2];\n    return [];\n  };\n\n  const handleChange = (values: string[], index: number) => {\n    returnValues.current[index] = values.map((num) => Number(num));\n    setDisableSemesters(disableGroups(returnValues.current));\n    onChange([...returnValues.current.flat()].sort());\n  };\n\n  useEffect(() => {\n    setDisableSemesters(disableGroups(returnValues.current));\n  }, []);\n\n  return (\n    <div\n      className={clsx(\n        styles['period-selector__container'],\n        styles[`period-selector__container--label-${labelPosition}`]\n      )}\n    >\n      {label && (\n        <Label htmlFor=\"\" required={required}>\n          {label}\n        </Label>\n      )}\n      <div className={styles['period-selector__selector-container']}>\n        <div className={styles['period-selector__selector-row']}>\n          {checkboxItems.map((checkboxes, semester) => (\n            <CheckboxButtonBar\n              key={`group_${semester}`}\n              checkboxes={checkboxes}\n              defaultValues={returnValues.current[semester].map((num) => num.toString())}\n              disableGroup={disableSemesters.includes(semester)}\n              required={required}\n              onSetValues={(event) => handleChange(event, semester)}\n            />\n          ))}\n        </div>\n        {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n      </div>\n    </div>\n  );\n};\n"],"names":["SEMESTER_1","SEMESTER_2","SEMESTER_3","PERIODS_PER_SEMESTER","MAX_PERIODS","chunkPeriods","array","result","count","PeriodSelector","maxPeriods","defaultValues","label","labelPosition","required","notValidatedText","onChange","maxPeriodsList","_","index","chunkedPeriods","checkboxItems","periods","semester","period","returnValues","useRef","disableSemesters","setDisableSemesters","useState","disableGroups","selects","handleChange","values","num","useEffect","jsxs","clsx","styles","jsx","Label","checkboxes","CheckboxButtonBar","event","FeedbackBox"],"mappings":"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"}

package/dist/components/SelectListbox/SelectListbox.d.ts

@@ -25,9 +25,11 @@ export interface SelectListboxProps {
     mobileBreakpoint?: `${number}${'px' | 'rem'}`;
     /** The callback function that is invoked when an option is selected. */
     onChange?: (option: OptionValue) => void;
+    /** Option to add a devider after a given amout of ouptions in the select option box. */
+    dividerAfter?: number;
 }
 /** Represents a component to render a select list box. */
 export declare const SelectListbox: {
-    ({ options, variant, fullWidth, size, optionPositionRight, defaultValue, maxOptionHeight, disabled, buttonLabelProp, buttonLabelBold, onChange, children, }: PropsWithChildren<SelectListboxProps>): import("react/jsx-runtime").JSX.Element;
-    SelectOption: ({ option, index, children }: import('./components/SelectOption').SelectOptionProps) => import("react/jsx-runtime").JSX.Element;
+    ({ options, variant, fullWidth, size, optionPositionRight, defaultValue, maxOptionHeight, disabled, buttonLabelProp, buttonLabelBold, onChange, dividerAfter, children, }: PropsWithChildren<SelectListboxProps>): import("react/jsx-runtime").JSX.Element;
+    SelectOption: ({ option, index, dividerAfter, children }: import('./components/SelectOption').SelectOptionProps) => import("react/jsx-runtime").JSX.Element;
 };

package/dist/components/SelectListbox/SelectListbox.js

@@ -1,12 +1,12 @@
-import { jsx as e, jsxs as b } from "react/jsx-runtime";
-import { useState as t } from "react";
-import { SelectProvider as P } from "./SelectProvider.js";
-import { SelectButton as B } from "./components/SelectButton.js";
-import { SelectContainer as O } from "./components/SelectContainer.js";
-import { SelectOptionBox as g } from "./components/SelectOptionBox.js";
-import { SelectOption as j } from "./components/SelectOption.js";
-import { usePositionedFloaters as k } from "../hooks/usePositionedFloaters.js";
-const v = ({
+import { jsx as e, jsxs as y } from "react/jsx-runtime";
+import { useState as t, Children as B, cloneElement as O } from "react";
+import { SelectProvider as g } from "./SelectProvider.js";
+import { SelectButton as j } from "./components/SelectButton.js";
+import { SelectContainer as v } from "./components/SelectContainer.js";
+import { SelectOptionBox as C } from "./components/SelectOptionBox.js";
+import { SelectOption as F } from "./components/SelectOption.js";
+import { usePositionedFloaters as L } from "../hooks/usePositionedFloaters.js";
+const z = ({
   options: o,
   variant: i,
   fullWidth: r = !1,
@@ -14,13 +14,14 @@ const v = ({
   optionPositionRight: l,
   defaultValue: m = -1,
   maxOptionHeight: s,
-  disabled: f,
-  buttonLabelProp: c = "label",
+  disabled: c,
+  buttonLabelProp: f = "label",
   buttonLabelBold: p,
   onChange: a,
-  children: S
+  dividerAfter: S,
+  children: d
 }) => {
-  const [u, x] = t(null), [d, h] = t(null), { style: E } = k(u, d, {
+  const [u, h] = t(null), [x, E] = t(null), { style: b } = L(u, x, {
     mouseEvent: "click",
     position: "bottomLeft",
     offset: 4,
@@ -29,24 +30,30 @@ const v = ({
     mobileBreakpoint: "28rem",
     fullWidth: r
   });
-  return /* @__PURE__ */ e(P, { options: o, defaultValue: m, children: /* @__PURE__ */ b(O, { children: [
+  return /* @__PURE__ */ e(g, { options: o, defaultValue: m, children: /* @__PURE__ */ y(v, { children: [
     /* @__PURE__ */ e(
-      B,
+      j,
       {
-        disabled: f,
-        buttonLabelProp: c,
+        disabled: c,
+        buttonLabelProp: f,
         buttonLabelBold: p,
         variant: i,
         size: n,
         onChange: a,
-        ref: h
+        ref: E
       }
     ),
-    /* @__PURE__ */ e(g, { ref: x, ...E, children: S })
+    /* @__PURE__ */ e(C, { ref: h, ...b, children: B.map(
+      d,
+      (P, k) => O(P, {
+        dividerAfter: S,
+        key: k
+      })
+    ) })
   ] }) });
 };
-v.SelectOption = j;
+z.SelectOption = F;
 export {
-  v as SelectListbox
+  z as SelectListbox
 };
 //# sourceMappingURL=SelectListbox.js.map

package/dist/components/SelectListbox/SelectListbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectListbox.js","sources":["../../../src/components/SelectListbox/SelectListbox.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport type { PropsWithChildren } from 'react';\nimport type { OptionValue, SelectValue } from './SelectProvider';\n\nimport { SelectProvider } from './SelectProvider';\nimport { SelectButton } from './components/SelectButton';\nimport { SelectContainer } from './components/SelectContainer';\nimport { SelectOptionBox } from './components/SelectOptionBox';\nimport { SelectOption } from './components/SelectOption';\n\nimport { usePositionedFloaters } from 'components/hooks/usePositionedFloaters';\n\nexport interface SelectListboxProps {\n  /** The possible options to select. */\n  options: OptionValue[];\n  /** The selected value by default. */\n  defaultValue?: SelectValue;\n  /** The max height of the options. */\n  maxOptionHeight?: `${number}${'px' | 'rem'}`;\n  /** `true` to disable the select box; otherwise, `false`. The default is `false`. */\n  disabled?: boolean;\n  /** The name of the property in the options structure that contains the label of the options. */\n  buttonLabelProp?: string;\n  /** `true` to render the labels in bold; otherwise, `false`. The default is `false`. */\n  buttonLabelBold?: boolean;\n  /** The variant of the select box. */\n  variant?: 'noborder' | 'pill' | 'pillLeft' | 'pillRight' | 'darkBorder';\n  /** If true sets the option dropdown min-width to the width of the select button. */\n  fullWidth?: boolean;\n  /** The size of the select box. */\n  size?: 'small' | 'medium' | 'default';\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  /** The breakpoint at which to switch to the mobile view. */\n  mobileBreakpoint?: `${number}${'px' | 'rem'}`;\n  /** The callback function that is invoked when an option is selected. */\n  onChange?: (option: OptionValue) => void;\n}\n\n/** Represents a component to render a select list box. */\nexport const SelectListbox = ({\n  options,\n  variant,\n  fullWidth = false,\n  size = 'default',\n  optionPositionRight,\n  defaultValue = -1,\n  maxOptionHeight,\n  disabled,\n  buttonLabelProp = 'label',\n  buttonLabelBold,\n  onChange,\n  children,\n}: PropsWithChildren<SelectListboxProps>) => {\n  const [positionElement, setPositionElement] = useState<HTMLElement | null>(null);\n  const [referenceElement, setReferenceElement] = useState<HTMLElement | 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  return (\n    <SelectProvider options={options} defaultValue={defaultValue}>\n      <SelectContainer>\n        <SelectButton\n          disabled={disabled}\n          buttonLabelProp={buttonLabelProp}\n          buttonLabelBold={buttonLabelBold}\n          variant={variant}\n          size={size}\n          onChange={onChange}\n          ref={setReferenceElement}\n        />\n\n        <SelectOptionBox ref={setPositionElement} {...positionStyle}>\n          {children}\n        </SelectOptionBox>\n      </SelectContainer>\n    </SelectProvider>\n  );\n};\n\nSelectListbox.SelectOption = SelectOption;\n"],"names":["SelectListbox","options","variant","fullWidth","size","optionPositionRight","defaultValue","maxOptionHeight","disabled","buttonLabelProp","buttonLabelBold","onChange","children","positionElement","setPositionElement","useState","referenceElement","setReferenceElement","positionStyle","usePositionedFloaters","jsx","SelectProvider","SelectContainer","SelectButton","SelectOptionBox","SelectOption"],"mappings":";;;;;;;;AAyCO,MAAMA,IAAgB,CAAC;AAAA,EAC5B,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,qBAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,iBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,iBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AACF,MAA6C;AAC3C,QAAM,CAACC,GAAiBC,CAAkB,IAAIC,EAA6B,IAAI,GACzE,CAACC,GAAkBC,CAAmB,IAAIF,EAA6B,IAAI,GAC3E,EAAE,OAAOG,EAAA,IAAkBC,EAAsBN,GAAiBG,GAAkB;AAAA,IACxF,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,gBAAgBT;AAAA,IAChB,oBAAoBF,IAAsB,UAAU;AAAA,IACpD,kBAAkB;AAAA,IAClB,WAAAF;AAAA,EAAA,CACD;AAED,SACG,gBAAAiB,EAAAC,GAAA,EAAe,SAAApB,GAAkB,cAAAK,GAChC,4BAACgB,GACC,EAAA,UAAA;AAAA,IAAA,gBAAAF;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,UAAAf;AAAA,QACA,iBAAAC;AAAA,QACA,iBAAAC;AAAA,QACA,SAAAR;AAAA,QACA,MAAAE;AAAA,QACA,UAAAO;AAAA,QACA,KAAKM;AAAA,MAAA;AAAA,IACP;AAAA,sBAECO,GAAgB,EAAA,KAAKV,GAAqB,GAAGI,GAC3C,UAAAN,EACH,CAAA;AAAA,EAAA,EAAA,CACF,EACF,CAAA;AAEJ;AAEAZ,EAAc,eAAeyB;"}
+{"version":3,"file":"SelectListbox.js","sources":["../../../src/components/SelectListbox/SelectListbox.tsx"],"sourcesContent":["import { Children, cloneElement, useState } from 'react';\n\nimport type { PropsWithChildren } from 'react';\nimport type { OptionValue, SelectValue } from './SelectProvider';\n\nimport { SelectProvider } from './SelectProvider';\nimport { SelectButton } from './components/SelectButton';\nimport { SelectContainer } from './components/SelectContainer';\nimport { SelectOptionBox } from './components/SelectOptionBox';\nimport { SelectOption } from './components/SelectOption';\n\nimport { usePositionedFloaters } from 'components/hooks/usePositionedFloaters';\n\nexport interface SelectListboxProps {\n  /** The possible options to select. */\n  options: OptionValue[];\n  /** The selected value by default. */\n  defaultValue?: SelectValue;\n  /** The max height of the options. */\n  maxOptionHeight?: `${number}${'px' | 'rem'}`;\n  /** `true` to disable the select box; otherwise, `false`. The default is `false`. */\n  disabled?: boolean;\n  /** The name of the property in the options structure that contains the label of the options. */\n  buttonLabelProp?: string;\n  /** `true` to render the labels in bold; otherwise, `false`. The default is `false`. */\n  buttonLabelBold?: boolean;\n  /** The variant of the select box. */\n  variant?: 'noborder' | 'pill' | 'pillLeft' | 'pillRight' | 'darkBorder';\n  /** If true sets the option dropdown min-width to the width of the select button. */\n  fullWidth?: boolean;\n  /** The size of the select box. */\n  size?: 'small' | 'medium' | 'default';\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  /** The breakpoint at which to switch to the mobile view. */\n  mobileBreakpoint?: `${number}${'px' | 'rem'}`;\n  /** The callback function that is invoked when an option is selected. */\n  onChange?: (option: OptionValue) => void;\n  /** Option to add a devider after a given amout of ouptions in the select option box. */\n  dividerAfter?: number;\n}\n\n/** Represents a component to render a select list box. */\nexport const SelectListbox = ({\n  options,\n  variant,\n  fullWidth = false,\n  size = 'default',\n  optionPositionRight,\n  defaultValue = -1,\n  maxOptionHeight,\n  disabled,\n  buttonLabelProp = 'label',\n  buttonLabelBold,\n  onChange,\n  dividerAfter,\n  children,\n}: PropsWithChildren<SelectListboxProps>) => {\n  const [positionElement, setPositionElement] = useState<HTMLElement | null>(null);\n  const [referenceElement, setReferenceElement] = useState<HTMLElement | 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  return (\n    <SelectProvider options={options} defaultValue={defaultValue}>\n      <SelectContainer>\n        <SelectButton\n          disabled={disabled}\n          buttonLabelProp={buttonLabelProp}\n          buttonLabelBold={buttonLabelBold}\n          variant={variant}\n          size={size}\n          onChange={onChange}\n          ref={setReferenceElement}\n        />\n\n        <SelectOptionBox ref={setPositionElement} {...positionStyle}>\n          {Children.map(children, (child, index) =>\n            cloneElement(child as React.ReactElement, {\n              dividerAfter,\n              key: index,\n            })\n          )}\n        </SelectOptionBox>\n      </SelectContainer>\n    </SelectProvider>\n  );\n};\n\nSelectListbox.SelectOption = SelectOption;\n"],"names":["SelectListbox","options","variant","fullWidth","size","optionPositionRight","defaultValue","maxOptionHeight","disabled","buttonLabelProp","buttonLabelBold","onChange","dividerAfter","children","positionElement","setPositionElement","useState","referenceElement","setReferenceElement","positionStyle","usePositionedFloaters","jsx","SelectProvider","SelectContainer","SelectButton","SelectOptionBox","Children","child","index","cloneElement","SelectOption"],"mappings":";;;;;;;;AA2CO,MAAMA,IAAgB,CAAC;AAAA,EAC5B,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,qBAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,iBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,iBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AACF,MAA6C;AAC3C,QAAM,CAACC,GAAiBC,CAAkB,IAAIC,EAA6B,IAAI,GACzE,CAACC,GAAkBC,CAAmB,IAAIF,EAA6B,IAAI,GAC3E,EAAE,OAAOG,EAAA,IAAkBC,EAAsBN,GAAiBG,GAAkB;AAAA,IACxF,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,gBAAgBV;AAAA,IAChB,oBAAoBF,IAAsB,UAAU;AAAA,IACpD,kBAAkB;AAAA,IAClB,WAAAF;AAAA,EAAA,CACD;AAED,SACG,gBAAAkB,EAAAC,GAAA,EAAe,SAAArB,GAAkB,cAAAK,GAChC,4BAACiB,GACC,EAAA,UAAA;AAAA,IAAA,gBAAAF;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,UAAAhB;AAAA,QACA,iBAAAC;AAAA,QACA,iBAAAC;AAAA,QACA,SAAAR;AAAA,QACA,MAAAE;AAAA,QACA,UAAAO;AAAA,QACA,KAAKO;AAAA,MAAA;AAAA,IACP;AAAA,sBAECO,GAAgB,EAAA,KAAKV,GAAqB,GAAGI,GAC3C,UAASO,EAAA;AAAA,MAAIb;AAAA,MAAU,CAACc,GAAOC,MAC9BC,EAAaF,GAA6B;AAAA,QACxC,cAAAf;AAAA,QACA,KAAKgB;AAAA,MACN,CAAA;AAAA,IAAA,EAEL,CAAA;AAAA,EAAA,EAAA,CACF,EACF,CAAA;AAEJ;AAEA5B,EAAc,eAAe8B;"}

package/dist/components/SelectListbox/components/SelectButton.js

@@ -1,7 +1,7 @@
 import { jsx as a, jsxs as C } from "react/jsx-runtime";
 import { c as f } from "../../../clsx-OuTLNxxd.js";
 import { forwardRef as E, useRef as g, useEffect as c } from "react";
-import { s as t } from "../../../SelectListbox.module-BWavTmq8.js";
+import { s as t } from "../../../SelectListbox.module-DX1IVM9E.js";
 import { Icon as L } from "../../Icon/Icon.js";
 import { useSelect as N } from "../SelectProvider.js";
 const O = E((d, u) => {

package/dist/components/SelectListbox/components/SelectContainer.js

@@ -1,7 +1,7 @@
 import { jsx as c } from "react/jsx-runtime";
 import { useRef as i, useCallback as u, useEffect as l } from "react";
 import { useSelect as m } from "../SelectProvider.js";
-import { s as f } from "../../../SelectListbox.module-BWavTmq8.js";
+import { s as f } from "../../../SelectListbox.module-DX1IVM9E.js";
 const E = ({ children: o }) => {
   const { isOpen: r, setIsOpen: n } = m(), t = i(null), e = u(
     ({ target: s }) => {

package/dist/components/SelectListbox/components/SelectOption.d.ts

@@ -4,6 +4,7 @@ export interface SelectOptionProps {
     option: OptionValue;
     index: number;
     key: string;
+    dividerAfter?: number;
     children: ReactNode;
 }
-export declare const SelectOption: ({ option, index, children }: SelectOptionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectOption: ({ option, index, dividerAfter, children }: SelectOptionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/SelectListbox/components/SelectOption.js

@@ -1,15 +1,15 @@
-import { jsx as d } from "react/jsx-runtime";
-import { c as v } from "../../../clsx-OuTLNxxd.js";
-import { useRef as D, useEffect as p } from "react";
-import { useSelect as y } from "../SelectProvider.js";
-import { s as b } from "../../../SelectListbox.module-BWavTmq8.js";
-const S = ({ option: t, index: l, children: m }) => {
-  const o = D(null), { isOpen: r, activeIndex: s, setActiveIndex: c, selectedValue: f, setSelectedValue: u, setIsOpen: i, options: a } = y(), w = (e) => {
-    u(a[e]), i(!1);
+import { jsxs as D, Fragment as h, jsx as m } from "react/jsx-runtime";
+import { c as y } from "../../../clsx-OuTLNxxd.js";
+import { useRef as O, useEffect as d } from "react";
+import { useSelect as x } from "../SelectProvider.js";
+import { s as o } from "../../../SelectListbox.module-DX1IVM9E.js";
+const j = ({ option: l, index: t, dividerAfter: u, children: v }) => {
+  const i = O(null), { isOpen: r, activeIndex: s, setActiveIndex: c, selectedValue: f, setSelectedValue: p, setIsOpen: n, options: a } = x(), w = (e) => {
+    p(a[e]), n(!1);
   }, k = (e) => {
     switch (e.key) {
       case "Tab":
-        e.preventDefault(), r && i(!1);
+        e.preventDefault(), r && n(!1);
         break;
       case "ArrowDown":
       case "ArrowUp":
@@ -21,35 +21,39 @@ const S = ({ option: t, index: l, children: m }) => {
         e.preventDefault(), a != null && a.length && s > -1 && !a[s].disabled && w(s);
         break;
       case "Escape":
-        r && (e.stopPropagation(), i(!1));
+        r && (e.stopPropagation(), n(!1));
         break;
     }
   };
-  return p(() => {
-    var e, n;
-    l === s && (r ? (e = o.current) == null || e.focus() : (n = o.current) == null || n.blur());
-  }, [s, l, r]), p(() => {
-    f.value === t.value && c(l);
-  }, [l, t.value, f.value, c]), /* @__PURE__ */ d(
-    "li",
-    {
-      className: v(b["select-listbox-option"], {
-        [b["select-listbox-option--active"]]: l === s
-      }),
-      ...!t.disabled && {
-        onClick: () => u(t),
-        onKeyDown: k,
-        tabIndex: 0,
-        role: "option",
-        "aria-selected": f.value === t.value
+  return d(() => {
+    var e, b;
+    t === s && (r ? (e = i.current) == null || e.focus() : (b = i.current) == null || b.blur());
+  }, [s, t, r]), d(() => {
+    f.value === l.value && c(t);
+  }, [t, l.value, f.value, c]), /* @__PURE__ */ D(h, { children: [
+    /* @__PURE__ */ m(
+      "li",
+      {
+        className: y(o["select-listbox-option"], {
+          [o["select-listbox-option--active"]]: t === s,
+          [o["select-listbox-option--divider"]]: t + 1 === u
+        }),
+        ...!l.disabled && {
+          onClick: () => p(l),
+          onKeyDown: k,
+          tabIndex: 0,
+          role: "option",
+          "aria-selected": f.value === l.value
+        },
+        ref: i,
+        children: v
       },
-      ref: o,
-      children: m
-    },
-    `${t.value}`
-  );
+      `${l.value}`
+    ),
+    t + 1 === u && /* @__PURE__ */ m("div", { className: o["select-listbox-divider"], "aria-hidden": "true" })
+  ] });
 };
 export {
-  S as SelectOption
+  j as SelectOption
 };
 //# sourceMappingURL=SelectOption.js.map

package/dist/components/SelectListbox/components/SelectOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectOption.js","sources":["../../../../src/components/SelectListbox/components/SelectOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\n\nimport type { KeyboardEvent, ReactNode } from 'react';\nimport type { OptionValue } from 'components/SelectListbox/SelectProvider';\n\nimport { useSelect } from 'components/SelectListbox/SelectProvider';\nimport styles from 'components/SelectListbox/SelectListbox.module.css';\n\nexport interface SelectOptionProps {\n  option: OptionValue;\n  index: number;\n  key: string;\n  children: ReactNode;\n}\n\nexport const SelectOption = ({ option, index, children }: SelectOptionProps) => {\n  const selectOptionRef = useRef<HTMLLIElement>(null);\n  const { isOpen, activeIndex, setActiveIndex, selectedValue, setSelectedValue, setIsOpen, options } = useSelect();\n\n  const handleSelectOption = (aIndex: number) => {\n    setSelectedValue(options[aIndex]);\n    setIsOpen(false);\n  };\n\n  const onOptionKeyDown = (event: KeyboardEvent<HTMLLIElement>) => {\n    switch (event.key) {\n      case 'Tab':\n        event.preventDefault();\n        if (isOpen) {\n          setIsOpen(false);\n        }\n        break;\n      case 'ArrowDown':\n      case 'ArrowUp':\n        event.preventDefault();\n        if (!isOpen) {\n          return;\n        }\n        if (event.key === 'ArrowDown' && activeIndex < options.length - 1) {\n          setActiveIndex(activeIndex + 1);\n        }\n        if (event.key === 'ArrowUp' && activeIndex > 0) {\n          setActiveIndex(activeIndex - 1);\n        }\n        break;\n      case 'Enter':\n        event.preventDefault();\n        if (options?.length && activeIndex > -1 && !options[activeIndex].disabled) {\n          handleSelectOption(activeIndex);\n        }\n        break;\n      case 'Escape':\n        if (isOpen) {\n          event.stopPropagation();\n          setIsOpen(false);\n        }\n        break;\n    }\n  };\n\n  useEffect(() => {\n    if (index === activeIndex) {\n      isOpen ? selectOptionRef.current?.focus() : selectOptionRef.current?.blur();\n    }\n  }, [activeIndex, index, isOpen]);\n\n  useEffect(() => {\n    if (selectedValue.value === option.value) {\n      setActiveIndex(index);\n    }\n  }, [index, option.value, selectedValue.value, setActiveIndex]);\n\n  return (\n    <li\n      className={clsx(styles['select-listbox-option'], {\n        [styles['select-listbox-option--active']]: index === activeIndex,\n      })}\n      key={`${option.value}`}\n      {...(!option.disabled && {\n        onClick: () => setSelectedValue(option),\n        onKeyDown: onOptionKeyDown,\n        tabIndex: 0,\n        role: 'option',\n        'aria-selected': selectedValue.value === option.value,\n      })}\n      ref={selectOptionRef}\n    >\n      {children}\n    </li>\n  );\n};\n"],"names":["SelectOption","option","index","children","selectOptionRef","useRef","isOpen","activeIndex","setActiveIndex","selectedValue","setSelectedValue","setIsOpen","options","useSelect","handleSelectOption","aIndex","onOptionKeyDown","event","useEffect","_a","_b","jsx","clsx","styles"],"mappings":";;;;;AAgBO,MAAMA,IAAe,CAAC,EAAE,QAAAC,GAAQ,OAAAC,GAAO,UAAAC,QAAkC;AACxE,QAAAC,IAAkBC,EAAsB,IAAI,GAC5C,EAAE,QAAAC,GAAQ,aAAAC,GAAa,gBAAAC,GAAgB,eAAAC,GAAe,kBAAAC,GAAkB,WAAAC,GAAW,SAAAC,EAAQ,IAAIC,EAAU,GAEzGC,IAAqB,CAACC,MAAmB;AAC5B,IAAAL,EAAAE,EAAQG,CAAM,CAAC,GAChCJ,EAAU,EAAK;AAAA,EACjB,GAEMK,IAAkB,CAACC,MAAwC;AAC/D,YAAQA,EAAM,KAAK;AAAA,MACjB,KAAK;AACH,QAAAA,EAAM,eAAe,GACjBX,KACFK,EAAU,EAAK;AAEjB;AAAA,MACF,KAAK;AAAA,MACL,KAAK;AAEH,YADAM,EAAM,eAAe,GACjB,CAACX;AACH;AAEF,QAAIW,EAAM,QAAQ,eAAeV,IAAcK,EAAQ,SAAS,KAC9DJ,EAAeD,IAAc,CAAC,GAE5BU,EAAM,QAAQ,aAAaV,IAAc,KAC3CC,EAAeD,IAAc,CAAC;AAEhC;AAAA,MACF,KAAK;AACH,QAAAU,EAAM,eAAe,GACjBL,KAAA,QAAAA,EAAS,UAAUL,IAAc,MAAM,CAACK,EAAQL,CAAW,EAAE,YAC/DO,EAAmBP,CAAW;AAEhC;AAAA,MACF,KAAK;AACH,QAAID,MACFW,EAAM,gBAAgB,GACtBN,EAAU,EAAK;AAEjB;AAAA,IAAA;AAAA,EAEN;AAEA,SAAAO,EAAU,MAAM;;AACd,IAAIhB,MAAUK,MACZD,KAASa,IAAAf,EAAgB,YAAhB,QAAAe,EAAyB,WAAUC,IAAAhB,EAAgB,YAAhB,QAAAgB,EAAyB;AAAA,EAEtE,GAAA,CAACb,GAAaL,GAAOI,CAAM,CAAC,GAE/BY,EAAU,MAAM;AACV,IAAAT,EAAc,UAAUR,EAAO,SACjCO,EAAeN,CAAK;AAAA,EACtB,GACC,CAACA,GAAOD,EAAO,OAAOQ,EAAc,OAAOD,CAAc,CAAC,GAG3D,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,uBAAuB,GAAG;AAAA,QAC/C,CAACA,EAAO,+BAA+B,CAAC,GAAGrB,MAAUK;AAAA,MAAA,CACtD;AAAA,MAEA,GAAI,CAACN,EAAO,YAAY;AAAA,QACvB,SAAS,MAAMS,EAAiBT,CAAM;AAAA,QACtC,WAAWe;AAAA,QACX,UAAU;AAAA,QACV,MAAM;AAAA,QACN,iBAAiBP,EAAc,UAAUR,EAAO;AAAA,MAClD;AAAA,MACA,KAAKG;AAAA,MAEJ,UAAAD;AAAA,IAAA;AAAA,IAVI,GAAGF,EAAO,KAAK;AAAA,EAWtB;AAEJ;"}
+{"version":3,"file":"SelectOption.js","sources":["../../../../src/components/SelectListbox/components/SelectOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\n\nimport type { KeyboardEvent, ReactNode } from 'react';\nimport type { OptionValue } from 'components/SelectListbox/SelectProvider';\n\nimport { useSelect } from 'components/SelectListbox/SelectProvider';\nimport styles from 'components/SelectListbox/SelectListbox.module.css';\n\nexport interface SelectOptionProps {\n  option: OptionValue;\n  index: number;\n  key: string;\n  dividerAfter?: number;\n  children: ReactNode;\n}\n\nexport const SelectOption = ({ option, index, dividerAfter, children }: SelectOptionProps) => {\n  const selectOptionRef = useRef<HTMLLIElement>(null);\n  const { isOpen, activeIndex, setActiveIndex, selectedValue, setSelectedValue, setIsOpen, options } = useSelect();\n\n  const handleSelectOption = (aIndex: number) => {\n    setSelectedValue(options[aIndex]);\n    setIsOpen(false);\n  };\n\n  const onOptionKeyDown = (event: KeyboardEvent<HTMLLIElement>) => {\n    switch (event.key) {\n      case 'Tab':\n        event.preventDefault();\n        if (isOpen) {\n          setIsOpen(false);\n        }\n        break;\n      case 'ArrowDown':\n      case 'ArrowUp':\n        event.preventDefault();\n        if (!isOpen) {\n          return;\n        }\n        if (event.key === 'ArrowDown' && activeIndex < options.length - 1) {\n          setActiveIndex(activeIndex + 1);\n        }\n        if (event.key === 'ArrowUp' && activeIndex > 0) {\n          setActiveIndex(activeIndex - 1);\n        }\n        break;\n      case 'Enter':\n        event.preventDefault();\n        if (options?.length && activeIndex > -1 && !options[activeIndex].disabled) {\n          handleSelectOption(activeIndex);\n        }\n        break;\n      case 'Escape':\n        if (isOpen) {\n          event.stopPropagation();\n          setIsOpen(false);\n        }\n        break;\n    }\n  };\n\n  useEffect(() => {\n    if (index === activeIndex) {\n      isOpen ? selectOptionRef.current?.focus() : selectOptionRef.current?.blur();\n    }\n  }, [activeIndex, index, isOpen]);\n\n  useEffect(() => {\n    if (selectedValue.value === option.value) {\n      setActiveIndex(index);\n    }\n  }, [index, option.value, selectedValue.value, setActiveIndex]);\n\n  return (\n    <>\n      <li\n        className={clsx(styles['select-listbox-option'], {\n          [styles['select-listbox-option--active']]: index === activeIndex,\n          [styles['select-listbox-option--divider']]: index + 1 === dividerAfter,\n        })}\n        key={`${option.value}`}\n        {...(!option.disabled && {\n          onClick: () => setSelectedValue(option),\n          onKeyDown: onOptionKeyDown,\n          tabIndex: 0,\n          role: 'option',\n          'aria-selected': selectedValue.value === option.value,\n        })}\n        ref={selectOptionRef}\n      >\n        {children}\n      </li>\n      {index + 1 === dividerAfter && <div className={styles['select-listbox-divider']} aria-hidden=\"true\" />}\n    </>\n  );\n};\n"],"names":["SelectOption","option","index","dividerAfter","children","selectOptionRef","useRef","isOpen","activeIndex","setActiveIndex","selectedValue","setSelectedValue","setIsOpen","options","useSelect","handleSelectOption","aIndex","onOptionKeyDown","event","useEffect","_a","_b","jsxs","Fragment","jsx","clsx","styles"],"mappings":";;;;;AAiBO,MAAMA,IAAe,CAAC,EAAE,QAAAC,GAAQ,OAAAC,GAAO,cAAAC,GAAc,UAAAC,QAAkC;AACtF,QAAAC,IAAkBC,EAAsB,IAAI,GAC5C,EAAE,QAAAC,GAAQ,aAAAC,GAAa,gBAAAC,GAAgB,eAAAC,GAAe,kBAAAC,GAAkB,WAAAC,GAAW,SAAAC,EAAQ,IAAIC,EAAU,GAEzGC,IAAqB,CAACC,MAAmB;AAC5B,IAAAL,EAAAE,EAAQG,CAAM,CAAC,GAChCJ,EAAU,EAAK;AAAA,EACjB,GAEMK,IAAkB,CAACC,MAAwC;AAC/D,YAAQA,EAAM,KAAK;AAAA,MACjB,KAAK;AACH,QAAAA,EAAM,eAAe,GACjBX,KACFK,EAAU,EAAK;AAEjB;AAAA,MACF,KAAK;AAAA,MACL,KAAK;AAEH,YADAM,EAAM,eAAe,GACjB,CAACX;AACH;AAEF,QAAIW,EAAM,QAAQ,eAAeV,IAAcK,EAAQ,SAAS,KAC9DJ,EAAeD,IAAc,CAAC,GAE5BU,EAAM,QAAQ,aAAaV,IAAc,KAC3CC,EAAeD,IAAc,CAAC;AAEhC;AAAA,MACF,KAAK;AACH,QAAAU,EAAM,eAAe,GACjBL,KAAA,QAAAA,EAAS,UAAUL,IAAc,MAAM,CAACK,EAAQL,CAAW,EAAE,YAC/DO,EAAmBP,CAAW;AAEhC;AAAA,MACF,KAAK;AACH,QAAID,MACFW,EAAM,gBAAgB,GACtBN,EAAU,EAAK;AAEjB;AAAA,IAAA;AAAA,EAEN;AAEA,SAAAO,EAAU,MAAM;;AACd,IAAIjB,MAAUM,MACZD,KAASa,IAAAf,EAAgB,YAAhB,QAAAe,EAAyB,WAAUC,IAAAhB,EAAgB,YAAhB,QAAAgB,EAAyB;AAAA,EAEtE,GAAA,CAACb,GAAaN,GAAOK,CAAM,CAAC,GAE/BY,EAAU,MAAM;AACV,IAAAT,EAAc,UAAUT,EAAO,SACjCQ,EAAeP,CAAK;AAAA,EACtB,GACC,CAACA,GAAOD,EAAO,OAAOS,EAAc,OAAOD,CAAc,CAAC,GAIzD,gBAAAa,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC,EAAKC,EAAO,uBAAuB,GAAG;AAAA,UAC/C,CAACA,EAAO,+BAA+B,CAAC,GAAGxB,MAAUM;AAAA,UACrD,CAACkB,EAAO,gCAAgC,CAAC,GAAGxB,IAAQ,MAAMC;AAAA,QAAA,CAC3D;AAAA,QAEA,GAAI,CAACF,EAAO,YAAY;AAAA,UACvB,SAAS,MAAMU,EAAiBV,CAAM;AAAA,UACtC,WAAWgB;AAAA,UACX,UAAU;AAAA,UACV,MAAM;AAAA,UACN,iBAAiBP,EAAc,UAAUT,EAAO;AAAA,QAClD;AAAA,QACA,KAAKI;AAAA,QAEJ,UAAAD;AAAA,MAAA;AAAA,MAVI,GAAGH,EAAO,KAAK;AAAA,IAWtB;AAAA,IACCC,IAAQ,MAAMC,KAAiB,gBAAAqB,EAAA,OAAA,EAAI,WAAWE,EAAO,wBAAwB,GAAG,eAAY,OAAO,CAAA;AAAA,EAAA,GACtG;AAEJ;"}

package/dist/components/SelectListbox/components/SelectOptionBox.js

@@ -1,6 +1,6 @@
 import { jsx as s } from "react/jsx-runtime";
 import { forwardRef as m, useRef as x } from "react";
-import { s as i } from "../../../SelectListbox.module-BWavTmq8.js";
+import { s as i } from "../../../SelectListbox.module-DX1IVM9E.js";
 import { useSelect as a } from "../SelectProvider.js";
 const h = m((l, e) => {
   const { style: t, children: o } = l, { listboxId: r, isOpen: c } = a(), n = x(null);

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.6.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/dist/SelectListbox.module-BWavTmq8.js.map

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