@uva-glass/component-library 3.55.0 → 3.55.2

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

@@ -1,67 +1,70 @@
-import { jsxs as v, Fragment as x, jsx as m } from "react/jsx-runtime";
-import { c as I } from "../../../clsx-OuTLNxxd.js";
-import { useRef as O, useEffect as k } from "react";
-import { useSelect as g } from "../SelectProvider.js";
-import { s as c } from "../../../SelectListbox.module-CXqMuXRB.js";
-const K = ({ option: a, index: s, dividerAfter: u, children: w }) => {
-  const i = O(null), { isOpen: l, activeIndex: t, setActiveIndex: r, selectedValue: n, setSelectedValue: p, setIsOpen: f, options: o } = g(), y = (e) => {
-    p(o[e]), f(!1);
-  }, h = (e) => {
-    if (e.key.length === 1) {
-      const D = e.key.toLocaleLowerCase(), d = o.findIndex(
-        (b) => !b.disabled && b.label.toLocaleLowerCase().startsWith(D)
-      );
-      if (d !== -1) {
-        r(d), e.preventDefault();
-        return;
-      }
-    }
-    switch (e.key) {
-      case "Tab":
-        e.preventDefault(), l && f(!1);
-        break;
-      case "ArrowDown":
-      case "ArrowUp":
-        if (e.preventDefault(), !l)
-          return;
-        e.key === "ArrowDown" && t < o.length - 1 && r(t + 1), e.key === "ArrowUp" && t > 0 && r(t - 1);
-        break;
-      case "Enter":
-        e.preventDefault(), o?.length && t > -1 && !o[t].disabled && y(t);
-        break;
-      case "Escape":
-        l && (e.stopPropagation(), f(!1));
-        break;
-    }
-  };
-  return k(() => {
-    s === t && (l ? i.current?.focus() : i.current?.blur());
-  }, [t, s, l]), k(() => {
-    n.value === a.value && r(s);
-  }, [s, a.value, n.value, r]), /* @__PURE__ */ v(x, { children: [
-    /* @__PURE__ */ m(
-      "li",
-      {
-        className: I(c["select-listbox-option"], {
-          [c["select-listbox-option--active"]]: s === t,
-          [c["select-listbox-option--divider"]]: s + 1 === u
-        }),
-        ...!a.disabled && {
-          onClick: () => p(a),
-          onKeyDown: h,
-          tabIndex: 0,
-          role: "option",
-          "aria-selected": n.value === a.value
-        },
-        ref: i,
-        children: w
-      },
-      `${a.value}`
-    ),
-    s + 1 === u && /* @__PURE__ */ m("div", { className: c["select-listbox-divider"], "aria-hidden": "true" })
-  ] });
+import { t as e } from "../../../clsx-BD2qMUU1.js";
+import { useSelect as t } from "../SelectProvider.js";
+import { t as n } from "../../../SelectListbox.module-HaPs1CLD.js";
+import { useEffect as r, useRef as i } from "react";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/SelectListbox/components/SelectOption.tsx
+var c = ({ option: c, index: l, dividerAfter: u, children: d }) => {
+	let f = i(null), { isOpen: p, activeIndex: m, setActiveIndex: h, selectedValue: g, setSelectedValue: _, setIsOpen: v, options: y } = t(), b = (e) => {
+		_(y[e]), v(!1);
+	}, x = (e) => {
+		if (e.key.length === 1) {
+			let t = e.key.toLocaleLowerCase(), n = y.findIndex((e) => !e.disabled && e.label.toLocaleLowerCase().startsWith(t));
+			if (n !== -1) {
+				h(n), e.preventDefault();
+				return;
+			}
+		}
+		switch (e.key) {
+			case "Tab":
+				e.preventDefault(), p && v(!1);
+				break;
+			case "ArrowDown":
+			case "ArrowUp":
+				if (e.preventDefault(), !p) return;
+				e.key === "ArrowDown" && m < y.length - 1 && h(m + 1), e.key === "ArrowUp" && m > 0 && h(m - 1);
+				break;
+			case "Enter":
+				e.preventDefault(), y?.length && m > -1 && !y[m].disabled && b(m);
+				break;
+			case "Escape":
+				p && (e.stopPropagation(), v(!1));
+				break;
+		}
+	};
+	return r(() => {
+		l === m && (p ? f.current?.focus() : f.current?.blur());
+	}, [
+		m,
+		l,
+		p
+	]), r(() => {
+		g.value === c.value && h(l);
+	}, [
+		l,
+		c.value,
+		g.value,
+		h
+	]), /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("li", {
+		className: e(n["select-listbox-option"], {
+			[n["select-listbox-option--active"]]: l === m,
+			[n["select-listbox-option--divider"]]: l + 1 === u
+		}),
+		...!c.disabled && {
+			onClick: () => _(c),
+			onKeyDown: x,
+			tabIndex: 0,
+			role: "option",
+			"aria-selected": g.value === c.value
+		},
+		ref: f,
+		children: d
+	}, `${c.value}`), l + 1 === u && /* @__PURE__ */ o("div", {
+		className: n["select-listbox-divider"],
+		"aria-hidden": "true"
+	})] });
 };
-export {
-  K as SelectOption
-};
-//# sourceMappingURL=SelectOption.js.map
+//#endregion
+export { c 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 | number;\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    if (event.key.length === 1) {\n      const key = event.key.toLocaleLowerCase();\n      const optionIndexStartsWithKey = options.findIndex(\n        (option) => !option.disabled && option.label.toLocaleLowerCase().startsWith(key)\n      );\n      if (optionIndexStartsWithKey !== -1) {\n        setActiveIndex(optionIndexStartsWithKey);\n        event.preventDefault();\n        return;\n      }\n    }\n\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","key","optionIndexStartsWithKey","useEffect","jsxs","Fragment","jsx","clsx","styles"],"mappings":";;;;;AAiBO,MAAMA,IAAe,CAAC,EAAE,QAAAC,GAAQ,OAAAC,GAAO,cAAAC,GAAc,UAAAC,QAAkC;AAC5F,QAAMC,IAAkBC,EAAsB,IAAI,GAC5C,EAAE,QAAAC,GAAQ,aAAAC,GAAa,gBAAAC,GAAgB,eAAAC,GAAe,kBAAAC,GAAkB,WAAAC,GAAW,SAAAC,EAAA,IAAYC,EAAA,GAE/FC,IAAqB,CAACC,MAAmB;AAC7C,IAAAL,EAAiBE,EAAQG,CAAM,CAAC,GAChCJ,EAAU,EAAK;AAAA,EACjB,GAEMK,IAAkB,CAACC,MAAwC;AAC/D,QAAIA,EAAM,IAAI,WAAW,GAAG;AAC1B,YAAMC,IAAMD,EAAM,IAAI,kBAAA,GAChBE,IAA2BP,EAAQ;AAAA,QACvC,CAACZ,MAAW,CAACA,EAAO,YAAYA,EAAO,MAAM,oBAAoB,WAAWkB,CAAG;AAAA,MAAA;AAEjF,UAAIC,MAA6B,IAAI;AACnC,QAAAX,EAAeW,CAAwB,GACvCF,EAAM,eAAA;AACN;AAAA,MACF;AAAA,IACF;AAEA,YAAQA,EAAM,KAAA;AAAA,MACZ,KAAK;AACH,QAAAA,EAAM,eAAA,GACFX,KACFK,EAAU,EAAK;AAEjB;AAAA,MACF,KAAK;AAAA,MACL,KAAK;AAEH,YADAM,EAAM,eAAA,GACF,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,eAAA,GACFL,GAAS,UAAUL,IAAc,MAAM,CAACK,EAAQL,CAAW,EAAE,YAC/DO,EAAmBP,CAAW;AAEhC;AAAA,MACF,KAAK;AACH,QAAID,MACFW,EAAM,gBAAA,GACNN,EAAU,EAAK;AAEjB;AAAA,IAAA;AAAA,EAEN;AAEA,SAAAS,EAAU,MAAM;AACd,IAAInB,MAAUM,MACZD,IAASF,EAAgB,SAAS,MAAA,IAAUA,EAAgB,SAAS,KAAA;AAAA,EAEzE,GAAG,CAACG,GAAaN,GAAOK,CAAM,CAAC,GAE/Bc,EAAU,MAAM;AACd,IAAIX,EAAc,UAAUT,EAAO,SACjCQ,EAAeP,CAAK;AAAA,EAExB,GAAG,CAACA,GAAOD,EAAO,OAAOS,EAAc,OAAOD,CAAc,CAAC,GAG3D,gBAAAa,EAAAC,GAAA,EACE,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,QAAA;AAAA,QAElD,KAAKI;AAAA,QAEJ,UAAAD;AAAA,MAAA;AAAA,MAVI,GAAGH,EAAO,KAAK;AAAA,IAAA;AAAA,IAYrBC,IAAQ,MAAMC,KAAgB,gBAAAqB,EAAC,OAAA,EAAI,WAAWE,EAAO,wBAAwB,GAAG,eAAY,OAAA,CAAO;AAAA,EAAA,GACtG;AAEJ;"}
+{"version":3,"file":"SelectOption.js","names":[],"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 | number;\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    if (event.key.length === 1) {\n      const key = event.key.toLocaleLowerCase();\n      const optionIndexStartsWithKey = options.findIndex(\n        (option) => !option.disabled && option.label.toLocaleLowerCase().startsWith(key)\n      );\n      if (optionIndexStartsWithKey !== -1) {\n        setActiveIndex(optionIndexStartsWithKey);\n        event.preventDefault();\n        return;\n      }\n    }\n\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"],"mappings":";;;;;;AAiBA,IAAa,KAAgB,EAAE,WAAQ,UAAO,iBAAc,kBAAkC;CAC5F,IAAM,IAAkB,EAAsB,KAAK,EAC7C,EAAE,WAAQ,gBAAa,mBAAgB,kBAAe,qBAAkB,cAAW,eAAY,GAAW,EAE1G,KAAsB,MAAmB;AAE7C,EADA,EAAiB,EAAQ,GAAQ,EACjC,EAAU,GAAM;IAGZ,KAAmB,MAAwC;AAC/D,MAAI,EAAM,IAAI,WAAW,GAAG;GAC1B,IAAM,IAAM,EAAM,IAAI,mBAAmB,EACnC,IAA2B,EAAQ,WACtC,MAAW,CAAC,EAAO,YAAY,EAAO,MAAM,mBAAmB,CAAC,WAAW,EAAI,CACjF;AACD,OAAI,MAA6B,IAAI;AAEnC,IADA,EAAe,EAAyB,EACxC,EAAM,gBAAgB;AACtB;;;AAIJ,UAAQ,EAAM,KAAd;GACE,KAAK;AAEH,IADA,EAAM,gBAAgB,EAClB,KACF,EAAU,GAAM;AAElB;GACF,KAAK;GACL,KAAK;AAEH,QADA,EAAM,gBAAgB,EAClB,CAAC,EACH;AAKF,IAHI,EAAM,QAAQ,eAAe,IAAc,EAAQ,SAAS,KAC9D,EAAe,IAAc,EAAE,EAE7B,EAAM,QAAQ,aAAa,IAAc,KAC3C,EAAe,IAAc,EAAE;AAEjC;GACF,KAAK;AAEH,IADA,EAAM,gBAAgB,EAClB,GAAS,UAAU,IAAc,MAAM,CAAC,EAAQ,GAAa,YAC/D,EAAmB,EAAY;AAEjC;GACF,KAAK;AACH,IAAI,MACF,EAAM,iBAAiB,EACvB,EAAU,GAAM;AAElB;;;AAgBN,QAZA,QAAgB;AACd,EAAI,MAAU,MACZ,IAAS,EAAgB,SAAS,OAAO,GAAG,EAAgB,SAAS,MAAM;IAE5E;EAAC;EAAa;EAAO;EAAO,CAAC,EAEhC,QAAgB;AACd,EAAI,EAAc,UAAU,EAAO,SACjC,EAAe,EAAM;IAEtB;EAAC;EAAO,EAAO;EAAO,EAAc;EAAO;EAAe,CAAC,EAG5D,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,MAAD;EACE,WAAW,EAAK,EAAO,0BAA0B;IAC9C,EAAO,mCAAmC,MAAU;IACpD,EAAO,oCAAoC,IAAQ,MAAM;GAC3D,CAAC;EAEF,GAAK,CAAC,EAAO,YAAY;GACvB,eAAe,EAAiB,EAAO;GACvC,WAAW;GACX,UAAU;GACV,MAAM;GACN,iBAAiB,EAAc,UAAU,EAAO;GACjD;EACD,KAAK;EAEJ;EACE,EAXE,GAAG,EAAO,QAWZ,EACJ,IAAQ,MAAM,KAAgB,kBAAC,OAAD;EAAK,WAAW,EAAO;EAA2B,eAAY;EAAS,CAAA,CACrG,EAAA,CAAA"}

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

@@ -1,31 +1,29 @@
-import { jsx as s } from "react/jsx-runtime";
-import { forwardRef as m, useRef as x } from "react";
-import { s as i } from "../../../SelectListbox.module-CXqMuXRB.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);
-  return /* @__PURE__ */ s(
-    "div",
-    {
-      className: i["select-listbox__wrapper"],
-      style: { ...t, visibility: c ? "visible" : "hidden" },
-      ...e && { ref: e },
-      children: /* @__PURE__ */ s(
-        "ul",
-        {
-          className: i["select-listbox"],
-          role: "listbox",
-          ref: n,
-          id: r,
-          tabIndex: -1,
-          style: { maxHeight: t.maxHeight },
-          children: o
-        }
-      )
-    }
-  );
+import { useSelect as e } from "../SelectProvider.js";
+import { t } from "../../../SelectListbox.module-HaPs1CLD.js";
+import { forwardRef as n, useRef as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/SelectListbox/components/SelectOptionBox.tsx
+var a = n((n, a) => {
+	let { style: o, children: s } = n, { listboxId: c, isOpen: l } = e(), u = r(null);
+	return /* @__PURE__ */ i("div", {
+		className: t["select-listbox__wrapper"],
+		style: {
+			...o,
+			visibility: l ? "visible" : "hidden"
+		},
+		...a && { ref: a },
+		children: /* @__PURE__ */ i("ul", {
+			className: t["select-listbox"],
+			role: "listbox",
+			ref: u,
+			id: c,
+			tabIndex: -1,
+			style: { maxHeight: o.maxHeight },
+			children: s
+		})
+	});
 });
-export {
-  h as SelectOptionBox
-};
-//# sourceMappingURL=SelectOptionBox.js.map
+//#endregion
+export { a as SelectOptionBox };
+
+//# sourceMappingURL=SelectOptionBox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SelectOptionBox.js","sources":["../../../../src/components/SelectListbox/components/SelectOptionBox.tsx"],"sourcesContent":["import { useRef, forwardRef } from 'react';\n\nimport type { CSSProperties, ReactNode } from 'react';\n\nimport styles from 'components/SelectListbox/SelectListbox.module.css';\nimport { useSelect } from 'components/SelectListbox/SelectProvider';\n\nexport interface SelectOptionBoxProps {\n  style: CSSProperties;\n  children: ReactNode;\n}\n\nexport const SelectOptionBox = forwardRef<HTMLDivElement, SelectOptionBoxProps>((props, ref) => {\n  const { style, children } = props;\n  const { listboxId, isOpen } = useSelect();\n  const selectOptionBoxRef = useRef<HTMLUListElement>(null);\n\n  return (\n    <div\n      className={styles['select-listbox__wrapper']}\n      style={{ ...style, visibility: isOpen ? 'visible' : 'hidden' }}\n      {...(ref && { ref: ref })}\n    >\n      <ul\n        className={styles['select-listbox']}\n        role=\"listbox\"\n        ref={selectOptionBoxRef}\n        id={listboxId}\n        tabIndex={-1}\n        style={{ maxHeight: style.maxHeight }}\n      >\n        {children}\n      </ul>\n    </div>\n  );\n});\n"],"names":["SelectOptionBox","forwardRef","props","ref","style","children","listboxId","isOpen","useSelect","selectOptionBoxRef","useRef","jsx","styles"],"mappings":";;;;AAYO,MAAMA,IAAkBC,EAAiD,CAACC,GAAOC,MAAQ;AAC9F,QAAM,EAAE,OAAAC,GAAO,UAAAC,EAAA,IAAaH,GACtB,EAAE,WAAAI,GAAW,QAAAC,EAAA,IAAWC,EAAA,GACxBC,IAAqBC,EAAyB,IAAI;AAExD,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAO,yBAAyB;AAAA,MAC3C,OAAO,EAAE,GAAGR,GAAO,YAAYG,IAAS,YAAY,SAAA;AAAA,MACnD,GAAIJ,KAAO,EAAE,KAAAA,EAAA;AAAA,MAEd,UAAA,gBAAAQ;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWC,EAAO,gBAAgB;AAAA,UAClC,MAAK;AAAA,UACL,KAAKH;AAAA,UACL,IAAIH;AAAA,UACJ,UAAU;AAAA,UACV,OAAO,EAAE,WAAWF,EAAM,UAAA;AAAA,UAEzB,UAAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN,CAAC;"}
+{"version":3,"file":"SelectOptionBox.js","names":[],"sources":["../../../../src/components/SelectListbox/components/SelectOptionBox.tsx"],"sourcesContent":["import { useRef, forwardRef } from 'react';\n\nimport type { CSSProperties, ReactNode } from 'react';\n\nimport styles from 'components/SelectListbox/SelectListbox.module.css';\nimport { useSelect } from 'components/SelectListbox/SelectProvider';\n\nexport interface SelectOptionBoxProps {\n  style: CSSProperties;\n  children: ReactNode;\n}\n\nexport const SelectOptionBox = forwardRef<HTMLDivElement, SelectOptionBoxProps>((props, ref) => {\n  const { style, children } = props;\n  const { listboxId, isOpen } = useSelect();\n  const selectOptionBoxRef = useRef<HTMLUListElement>(null);\n\n  return (\n    <div\n      className={styles['select-listbox__wrapper']}\n      style={{ ...style, visibility: isOpen ? 'visible' : 'hidden' }}\n      {...(ref && { ref: ref })}\n    >\n      <ul\n        className={styles['select-listbox']}\n        role=\"listbox\"\n        ref={selectOptionBoxRef}\n        id={listboxId}\n        tabIndex={-1}\n        style={{ maxHeight: style.maxHeight }}\n      >\n        {children}\n      </ul>\n    </div>\n  );\n});\n"],"mappings":";;;;;AAYA,IAAa,IAAkB,GAAkD,GAAO,MAAQ;CAC9F,IAAM,EAAE,UAAO,gBAAa,GACtB,EAAE,cAAW,cAAW,GAAW,EACnC,IAAqB,EAAyB,KAAK;AAEzD,QACE,kBAAC,OAAD;EACE,WAAW,EAAO;EAClB,OAAO;GAAE,GAAG;GAAO,YAAY,IAAS,YAAY;GAAU;EAC9D,GAAK,KAAO,EAAO,QAAK;YAExB,kBAAC,MAAD;GACE,WAAW,EAAO;GAClB,MAAK;GACL,KAAK;GACL,IAAI;GACJ,UAAU;GACV,OAAO,EAAE,WAAW,EAAM,WAAW;GAEpC;GACE,CAAA;EACD,CAAA;EAER"}

package/dist/components/SelectListbox/index.js

@@ -1,5 +1,2 @@
-import { SelectListbox as t } from "./SelectListbox.js";
-export {
-  t as SelectListbox
-};
-//# sourceMappingURL=index.js.map
+import { SelectListbox as e } from "./SelectListbox.js";
+export { e as SelectListbox };

package/dist/components/Slider/Slider.js

@@ -1,113 +1,2 @@
-import { jsxs as g, jsx as a } from "react/jsx-runtime";
-import { useState as x, useRef as m, useEffectEvent as z, useEffect as B } from "react";
-import { c as H } from "../../clsx-OuTLNxxd.js";
-import { Icon as S } from "../Icon/Icon.js";
-import '../../assets/Slider.css';const T = "_slider_wrapper_8wxrb_1", j = "_slider_button_8wxrb_8", C = "_slider_trackwrapper_8wxrb_38", D = "_slider_balloon_8wxrb_44", F = "_slider_input_8wxrb_53", l = {
-  slider_wrapper: T,
-  slider_button: j,
-  slider_trackwrapper: C,
-  slider_balloon: D,
-  slider_input: F
-}, v = 0.5, I = 100, p = 16, U = 16, G = ({
-  min: t,
-  max: o,
-  value: i,
-  step: k = 1,
-  units: c,
-  navigationLabels: d,
-  disabled: s = !1,
-  onChange: u
-}) => {
-  const [n, f] = x(i !== void 0 ? i : (t + o) * v), [E, V] = x(""), _ = m(null), b = m(null), w = m(null), N = (e) => {
-    const r = n + e * k;
-    r >= t && r <= o && (f(r), h(r), y(r), u && u(r));
-  }, P = (e) => {
-    const r = Number(e.target.value);
-    f(r), h(r), y(r), u && u(r);
-  }, h = (e) => {
-    if (!_.current) return;
-    const r = (e - t) / (o - t) * I;
-    s ? _.current.style.background = `linear-gradient(
-         to right, 
-         var(--color-grey-700) 0%, 
-         var(--color-grey-700) ${r}%, 
-         var(--color-grey-400) ${r}%, 
-         var(--color-grey-400) 100%)` : _.current.style.background = `linear-gradient(
-         to right, 
-         var(--color-navy-600) 0%, 
-         var(--color-navy-600) ${r}%, 
-         var(--color-grey-400) ${r}%, 
-         var(--color-grey-400) 100%)`;
-  }, y = (e) => {
-    if (b.current && w.current) {
-      const r = w.current.clientWidth, $ = b.current.clientWidth - p, M = (e - t) / (o - t) * $ - (r - p) * v, W = Math.max(0, Math.min(M, $ - r + p * v));
-      V(`${W}px`);
-    }
-  }, R = z((e) => {
-    f(e), h(e), y(e);
-  });
-  return B(() => {
-    i !== void 0 && R(i);
-  }, [i, s]), /* @__PURE__ */ g("div", { className: l.slider_wrapper, children: [
-    /* @__PURE__ */ a(
-      "button",
-      {
-        type: "button",
-        className: l.slider_button,
-        onClick: () => N(-1),
-        "aria-label": d?.decrease ? d.decrease : "Verlaag waarde",
-        disabled: s,
-        children: /* @__PURE__ */ a(S, { name: "Minus", size: 20 })
-      }
-    ),
-    /* @__PURE__ */ g("div", { className: l.slider_trackwrapper, ref: b, children: [
-      /* @__PURE__ */ g(
-        "div",
-        {
-          className: H(l.slider_balloon, { [l["slider_balloon--disabled"]]: s }),
-          style: { left: E },
-          ref: w,
-          children: [
-            n,
-            c && /* @__PURE__ */ a("span", { className: l.slider_units, children: c })
-          ]
-        }
-      ),
-      /* @__PURE__ */ a(
-        "input",
-        {
-          type: "range",
-          className: l.slider_input,
-          min: t,
-          max: o,
-          step: k,
-          value: n,
-          onChange: P,
-          ref: _,
-          style: { "--thumb-size": `${p / U}rem` },
-          "aria-valuemin": t,
-          "aria-valuemax": o,
-          "aria-valuenow": n,
-          "aria-valuetext": c ? `${n} ${c}` : `${n}`,
-          "aria-label": "Slider",
-          disabled: s
-        }
-      )
-    ] }),
-    /* @__PURE__ */ a(
-      "button",
-      {
-        type: "button",
-        className: l.slider_button,
-        onClick: () => N(1),
-        "aria-label": d?.increase ? d.increase : "Verhoog waarde",
-        disabled: s,
-        children: /* @__PURE__ */ a(S, { name: "Plus", size: 20 })
-      }
-    )
-  ] });
-};
-export {
-  G as Slider
-};
-//# sourceMappingURL=Slider.js.map
+import { t as e } from "../../Slider-BlLyrET9.js";
+export { e as Slider };

package/dist/components/Slider/Slider.stories.js

@@ -1,39 +1,60 @@
-import { jsxs as o, Fragment as a, jsx as e } from "react/jsx-runtime";
-import { Slider as i } from "./Slider.js";
-const l = "<Slider min={number} max={number} value?={number} step?={number} units?={string} onChange?={(value: number) => void} />", h = {
-  title: "Atoms/Slider",
-  component: i,
-  argTypes: {
-    onChange: {
-      action: "Slider value",
-      table: {
-        disable: !0
-      }
-    }
-  },
-  parameters: {
-    inspectComponent: i,
-    codeString: l
-  }
-}, d = (n) => {
-  const t = (r) => {
-    n.onChange && n.onChange(r);
-  };
-  return /* @__PURE__ */ o(a, { children: [
-    /* @__PURE__ */ e("div", { style: { width: "150px" }, children: /* @__PURE__ */ e(i, { ...n, onChange: t }) }),
-    /* @__PURE__ */ e("div", { style: { width: "300px", marginTop: "40px" }, children: /* @__PURE__ */ e(i, { ...n, onChange: t, value: 40 }) }),
-    /* @__PURE__ */ e("div", { style: { width: "600px", marginTop: "40px" }, children: /* @__PURE__ */ e(i, { ...n, onChange: t, value: 60 }) })
-  ] });
-}, m = d.bind({});
-m.args = {
-  min: 0,
-  max: 100,
-  step: 5,
-  units: "%",
-  value: 80
+import { t as e } from "../../Slider-BlLyrET9.js";
+import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
+var i = {
+	title: "Atoms/Slider",
+	component: e,
+	argTypes: { onChange: {
+		action: "Slider value",
+		table: { disable: !0 }
+	} },
+	parameters: {
+		inspectComponent: e,
+		codeString: "<Slider min={number} max={number} value?={number} step?={number} units?={string} onChange?={(value: number) => void} />"
+	}
+}, a = ((i) => {
+	let a = (e) => {
+		i.onChange && i.onChange(e);
+	};
+	return /* @__PURE__ */ r(t, { children: [
+		/* @__PURE__ */ n("div", {
+			style: { width: "150px" },
+			children: /* @__PURE__ */ n(e, {
+				...i,
+				onChange: a
+			})
+		}),
+		/* @__PURE__ */ n("div", {
+			style: {
+				width: "300px",
+				marginTop: "40px"
+			},
+			children: /* @__PURE__ */ n(e, {
+				...i,
+				onChange: a,
+				value: 40
+			})
+		}),
+		/* @__PURE__ */ n("div", {
+			style: {
+				width: "600px",
+				marginTop: "40px"
+			},
+			children: /* @__PURE__ */ n(e, {
+				...i,
+				onChange: a,
+				value: 60
+			})
+		})
+	] });
+}).bind({});
+a.args = {
+	min: 0,
+	max: 100,
+	step: 5,
+	units: "%",
+	value: 80
 };
-export {
-  m as SliderExample,
-  h as default
-};
-//# sourceMappingURL=Slider.stories.js.map
+//#endregion
+export { a as SliderExample, i as default };
+
+//# sourceMappingURL=Slider.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.stories.js","sources":["../../../src/components/Slider/Slider.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\r\nimport type { SliderProps } from './Slider';\r\n\r\nimport { Slider } from './Slider';\r\n\r\nconst codeString =\r\n  '<Slider min={number} max={number} value?={number} step?={number} units?={string} onChange?={(value: number) => void} />';\r\n\r\n// eslint-disable-next-line import/no-default-export\r\nexport default {\r\n  title: 'Atoms/Slider',\r\n  component: Slider,\r\n  argTypes: {\r\n    onChange: {\r\n      action: 'Slider value',\r\n      table: {\r\n        disable: true,\r\n      },\r\n    },\r\n  },\r\n  parameters: {\r\n    inspectComponent: Slider,\r\n    codeString: codeString,\r\n  },\r\n} as Meta<SliderProps>;\r\n\r\nconst Template: StoryFn<SliderProps> = (args) => {\r\n  const handleSliderChange = (value: number) => {\r\n    if (args.onChange) {\r\n      args.onChange(value);\r\n    }\r\n  };\r\n\r\n  return (\r\n    <>\r\n      <div style={{ width: '150px' }}>\r\n        <Slider {...args} onChange={handleSliderChange} />\r\n      </div>\r\n      <div style={{ width: '300px', marginTop: '40px' }}>\r\n        <Slider {...args} onChange={handleSliderChange} value={40} />\r\n      </div>\r\n      <div style={{ width: '600px', marginTop: '40px' }}>\r\n        <Slider {...args} onChange={handleSliderChange} value={60} />\r\n      </div>\r\n    </>\r\n  );\r\n};\r\n\r\nexport const SliderExample = Template.bind({});\r\nSliderExample.args = {\r\n  min: 0,\r\n  max: 100,\r\n  step: 5,\r\n  units: '%',\r\n  value: 80,\r\n};\r\n"],"names":["codeString","Slider_stories","Slider","Template","args","handleSliderChange","value","jsxs","Fragment","jsx","SliderExample"],"mappings":";;AAKA,MAAMA,IACJ,2HAGFC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,UAAU;AAAA,MACR,QAAQ;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF;AAAA,EAEF,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAiC,CAACC,MAAS;AAC/C,QAAMC,IAAqB,CAACC,MAAkB;AAC5C,IAAIF,EAAK,YACPA,EAAK,SAASE,CAAK;AAAA,EAEvB;AAEA,SACE,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC,EAAC,OAAA,EAAI,OAAO,EAAE,OAAO,QAAA,GACnB,UAAA,gBAAAA,EAACP,GAAA,EAAQ,GAAGE,GAAM,UAAUC,EAAA,CAAoB,GAClD;AAAA,sBACC,OAAA,EAAI,OAAO,EAAE,OAAO,SAAS,WAAW,UACvC,UAAA,gBAAAI,EAACP,KAAQ,GAAGE,GAAM,UAAUC,GAAoB,OAAO,IAAI,GAC7D;AAAA,sBACC,OAAA,EAAI,OAAO,EAAE,OAAO,SAAS,WAAW,UACvC,UAAA,gBAAAI,EAACP,KAAQ,GAAGE,GAAM,UAAUC,GAAoB,OAAO,IAAI,EAAA,CAC7D;AAAA,EAAA,GACF;AAEJ,GAEaK,IAAgBP,EAAS,KAAK,CAAA,CAAE;AAC7CO,EAAc,OAAO;AAAA,EACnB,KAAK;AAAA,EACL,KAAK;AAAA,EACL,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AACT;"}
+{"version":3,"file":"Slider.stories.js","names":[],"sources":["../../../src/components/Slider/Slider.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\r\nimport type { SliderProps } from './Slider';\r\n\r\nimport { Slider } from './Slider';\r\n\r\nconst codeString =\r\n  '<Slider min={number} max={number} value?={number} step?={number} units?={string} onChange?={(value: number) => void} />';\r\n\r\n// eslint-disable-next-line import/no-default-export\r\nexport default {\r\n  title: 'Atoms/Slider',\r\n  component: Slider,\r\n  argTypes: {\r\n    onChange: {\r\n      action: 'Slider value',\r\n      table: {\r\n        disable: true,\r\n      },\r\n    },\r\n  },\r\n  parameters: {\r\n    inspectComponent: Slider,\r\n    codeString: codeString,\r\n  },\r\n} as Meta<SliderProps>;\r\n\r\nconst Template: StoryFn<SliderProps> = (args) => {\r\n  const handleSliderChange = (value: number) => {\r\n    if (args.onChange) {\r\n      args.onChange(value);\r\n    }\r\n  };\r\n\r\n  return (\r\n    <>\r\n      <div style={{ width: '150px' }}>\r\n        <Slider {...args} onChange={handleSliderChange} />\r\n      </div>\r\n      <div style={{ width: '300px', marginTop: '40px' }}>\r\n        <Slider {...args} onChange={handleSliderChange} value={40} />\r\n      </div>\r\n      <div style={{ width: '600px', marginTop: '40px' }}>\r\n        <Slider {...args} onChange={handleSliderChange} value={60} />\r\n      </div>\r\n    </>\r\n  );\r\n};\r\n\r\nexport const SliderExample = Template.bind({});\r\nSliderExample.args = {\r\n  min: 0,\r\n  max: 100,\r\n  step: 5,\r\n  units: '%',\r\n  value: 80,\r\n};\r\n"],"mappings":";;AASA,IAAA,IAAe;CACb,OAAO;CACP,WAAW;CACX,UAAU,EACR,UAAU;EACR,QAAQ;EACR,OAAO,EACL,SAAS,IACV;EACF,EACF;CACD,YAAY;EACV,kBAAkB;EACN,YAhBd;EAiBC;CACF,EAwBY,MAtB2B,MAAS;CAC/C,IAAM,KAAsB,MAAkB;AAC5C,EAAI,EAAK,YACP,EAAK,SAAS,EAAM;;AAIxB,QACE,kBAAA,GAAA,EAAA,UAAA;EACE,kBAAC,OAAD;GAAK,OAAO,EAAE,OAAO,SAAS;aAC5B,kBAAC,GAAD;IAAQ,GAAI;IAAM,UAAU;IAAsB,CAAA;GAC9C,CAAA;EACN,kBAAC,OAAD;GAAK,OAAO;IAAE,OAAO;IAAS,WAAW;IAAQ;aAC/C,kBAAC,GAAD;IAAQ,GAAI;IAAM,UAAU;IAAoB,OAAO;IAAM,CAAA;GACzD,CAAA;EACN,kBAAC,OAAD;GAAK,OAAO;IAAE,OAAO;IAAS,WAAW;IAAQ;aAC/C,kBAAC,GAAD;IAAQ,GAAI;IAAM,UAAU;IAAoB,OAAO;IAAM,CAAA;GACzD,CAAA;EACL,EAAA,CAAA;GAI+B,KAAK,EAAE,CAAC;AAC9C,EAAc,OAAO;CACnB,KAAK;CACL,KAAK;CACL,MAAM;CACN,OAAO;CACP,OAAO;CACR"}

package/dist/components/Slider/index.js

@@ -1,5 +1,2 @@
-import { Slider as o } from "./Slider.js";
-export {
-  o as Slider
-};
-//# sourceMappingURL=index.js.map
+import { t as e } from "../../Slider-BlLyrET9.js";
+export { e as Slider };

package/dist/components/Sortable/Sortable.js

@@ -1,42 +1,26 @@
-import { jsx as o } from "react/jsx-runtime";
-import { Children as a } from "react";
-import { SortableItem as f } from "./components/SortableItem.js";
-import { S as I } from "../../SortableProvider-BbwlEPIr.js";
-const P = ({
-  children: t,
-  childrenData: m,
-  ItemHandlePlacement: s = "left",
-  scrollable: l,
-  disabled: n,
-  onSort: i,
-  hideNumbers: p,
-  sortableItemColor: b = "grey-200"
-}) => {
-  const d = m ?? t, r = t.map((c, e) => /* @__PURE__ */ o(
-    f,
-    {
-      handlePlacement: s,
-      disabled: n || a.count(t) <= 1,
-      sortableItemColor: b,
-      index: e,
-      children: c
-    },
-    `sortable-item-${e}`
-  ));
-  return /* @__PURE__ */ o(
-    I,
-    {
-      renderItems: r,
-      dataItems: d,
-      scrollable: l,
-      hideNumbers: p,
-      onSort: i,
-      children: r
-    },
-    `sortable-with-children-${a.count(t)}`
-  );
+import { t as e } from "../../SortableProvider-Dc7hwkb5.js";
+import { SortableItem as t } from "./components/SortableItem.js";
+import { Children as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/Sortable/Sortable.tsx
+var i = ({ children: i, childrenData: a, ItemHandlePlacement: o = "left", scrollable: s, disabled: c, onSort: l, hideNumbers: u, sortableItemColor: d = "grey-200" }) => {
+	let f = a ?? i, p = i.map((e, a) => /* @__PURE__ */ r(t, {
+		handlePlacement: o,
+		disabled: c || n.count(i) <= 1,
+		sortableItemColor: d,
+		index: a,
+		children: e
+	}, `sortable-item-${a}`));
+	return /* @__PURE__ */ r(e, {
+		renderItems: p,
+		dataItems: f,
+		scrollable: s,
+		hideNumbers: u,
+		onSort: l,
+		children: p
+	}, `sortable-with-children-${n.count(i)}`);
 };
-export {
-  P as Sortable
-};
-//# sourceMappingURL=Sortable.js.map
+//#endregion
+export { i as Sortable };
+
+//# sourceMappingURL=Sortable.js.map

package/dist/components/Sortable/Sortable.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sortable.js","sources":["../../../src/components/Sortable/Sortable.tsx"],"sourcesContent":["import { Children } from 'react';\n\nimport type { ReactElement } from 'react';\nimport type { SortableItemProps } from './components/SortableItem';\n\nimport { SortableItem } from './components/SortableItem';\nimport { SortableProvider } from './SortableProvider';\n\nexport type Index = string | number;\nexport type SortableItemColors = 'grey-200' | 'white';\n\nexport interface SortableProps<T = unknown> {\n  /** The elements to show inside the Sortable. */\n  children: ReactElement[] | string[];\n  /** The data objects that are actually being sorted. */\n  childrenData?: T[];\n  /** The placement of each item Handle (6 dots 2x3). */\n  ItemHandlePlacement?: SortableItemProps['handlePlacement'];\n  /** If true, a scrollable version of the list will be rendered (max height 21rem/336px). */\n  scrollable?: boolean;\n  /** If true, the sorting will be disabled. */\n  disabled?: boolean;\n  /** Hide the numbers shown next to the sortable elements. */\n  hideNumbers?: boolean;\n  /** Change the color of the SortableItem wrapper. */\n  sortableItemColor?: SortableItemColors;\n  /** The callback function that is invoked when new sorting takes place. */\n  onSort?: (items: T[]) => void;\n}\n\n// A component that renders a list of children that can be sorted with drag and drop.\nexport const Sortable = <T,>({\n  children,\n  childrenData,\n  ItemHandlePlacement = 'left',\n  scrollable,\n  disabled,\n  onSort,\n  hideNumbers,\n  sortableItemColor = 'grey-200',\n}: SortableProps<T>) => {\n  const sortableData: T[] = childrenData ?? (children as unknown as T[]);\n\n  const wrappedItems = children.map((child, index) => (\n    <SortableItem\n      handlePlacement={ItemHandlePlacement}\n      disabled={disabled || Children.count(children) <= 1}\n      sortableItemColor={sortableItemColor}\n      index={index}\n      key={`sortable-item-${index}`}\n    >\n      {child}\n    </SortableItem>\n  ));\n\n  return (\n    <SortableProvider\n      renderItems={wrappedItems}\n      dataItems={sortableData}\n      scrollable={scrollable}\n      hideNumbers={hideNumbers}\n      onSort={onSort}\n      key={`sortable-with-children-${Children.count(children)}`}\n    >\n      {wrappedItems}\n    </SortableProvider>\n  );\n};\n"],"names":["Sortable","children","childrenData","ItemHandlePlacement","scrollable","disabled","onSort","hideNumbers","sortableItemColor","sortableData","wrappedItems","child","index","jsx","SortableItem","Children","SortableProvider"],"mappings":";;;;AA+BO,MAAMA,IAAW,CAAK;AAAA,EAC3B,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,qBAAAC,IAAsB;AAAA,EACtB,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,mBAAAC,IAAoB;AACtB,MAAwB;AACtB,QAAMC,IAAoBP,KAAiBD,GAErCS,IAAeT,EAAS,IAAI,CAACU,GAAOC,MACxC,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,iBAAiBX;AAAA,MACjB,UAAUE,KAAYU,EAAS,MAAMd,CAAQ,KAAK;AAAA,MAClD,mBAAAO;AAAA,MACA,OAAAI;AAAA,MAGC,UAAAD;AAAA,IAAA;AAAA,IAFI,iBAAiBC,CAAK;AAAA,EAAA,CAI9B;AAED,SACE,gBAAAC;AAAA,IAACG;AAAA,IAAA;AAAA,MACC,aAAaN;AAAA,MACb,WAAWD;AAAA,MACX,YAAAL;AAAA,MACA,aAAAG;AAAA,MACA,QAAAD;AAAA,MAGC,UAAAI;AAAA,IAAA;AAAA,IAFI,0BAA0BK,EAAS,MAAMd,CAAQ,CAAC;AAAA,EAAA;AAK7D;"}
+{"version":3,"file":"Sortable.js","names":[],"sources":["../../../src/components/Sortable/Sortable.tsx"],"sourcesContent":["import { Children } from 'react';\n\nimport type { ReactElement } from 'react';\nimport type { SortableItemProps } from './components/SortableItem';\n\nimport { SortableItem } from './components/SortableItem';\nimport { SortableProvider } from './SortableProvider';\n\nexport type Index = string | number;\nexport type SortableItemColors = 'grey-200' | 'white';\n\nexport interface SortableProps<T = unknown> {\n  /** The elements to show inside the Sortable. */\n  children: ReactElement[] | string[];\n  /** The data objects that are actually being sorted. */\n  childrenData?: T[];\n  /** The placement of each item Handle (6 dots 2x3). */\n  ItemHandlePlacement?: SortableItemProps['handlePlacement'];\n  /** If true, a scrollable version of the list will be rendered (max height 21rem/336px). */\n  scrollable?: boolean;\n  /** If true, the sorting will be disabled. */\n  disabled?: boolean;\n  /** Hide the numbers shown next to the sortable elements. */\n  hideNumbers?: boolean;\n  /** Change the color of the SortableItem wrapper. */\n  sortableItemColor?: SortableItemColors;\n  /** The callback function that is invoked when new sorting takes place. */\n  onSort?: (items: T[]) => void;\n}\n\n// A component that renders a list of children that can be sorted with drag and drop.\nexport const Sortable = <T,>({\n  children,\n  childrenData,\n  ItemHandlePlacement = 'left',\n  scrollable,\n  disabled,\n  onSort,\n  hideNumbers,\n  sortableItemColor = 'grey-200',\n}: SortableProps<T>) => {\n  const sortableData: T[] = childrenData ?? (children as unknown as T[]);\n\n  const wrappedItems = children.map((child, index) => (\n    <SortableItem\n      handlePlacement={ItemHandlePlacement}\n      disabled={disabled || Children.count(children) <= 1}\n      sortableItemColor={sortableItemColor}\n      index={index}\n      key={`sortable-item-${index}`}\n    >\n      {child}\n    </SortableItem>\n  ));\n\n  return (\n    <SortableProvider\n      renderItems={wrappedItems}\n      dataItems={sortableData}\n      scrollable={scrollable}\n      hideNumbers={hideNumbers}\n      onSort={onSort}\n      key={`sortable-with-children-${Children.count(children)}`}\n    >\n      {wrappedItems}\n    </SortableProvider>\n  );\n};\n"],"mappings":";;;;;AA+BA,IAAa,KAAgB,EAC3B,aACA,iBACA,yBAAsB,QACtB,eACA,aACA,WACA,gBACA,uBAAoB,iBACE;CACtB,IAAM,IAAoB,KAAiB,GAErC,IAAe,EAAS,KAAK,GAAO,MACxC,kBAAC,GAAD;EACE,iBAAiB;EACjB,UAAU,KAAY,EAAS,MAAM,EAAS,IAAI;EAC/B;EACZ;YAGN;EACY,EAHR,iBAAiB,IAGT,CACf;AAEF,QACE,kBAAC,GAAD;EACE,aAAa;EACb,WAAW;EACC;EACC;EACL;YAGP;EACgB,EAHZ,0BAA0B,EAAS,MAAM,EAAS,GAGtC"}