@uva-glass/component-library 1.53.0 → 1.54.0

package/dist/{MultiSelect-D1FnMER4.js → MultiSelect-DQaqItEH.js}

@@ -1,6 +1,6 @@
-import { jsxs as o, jsx as l, Fragment as a } from "react/jsx-runtime";
+import { jsxs as o, jsx as i, Fragment as p } from "react/jsx-runtime";
 import { c as m } from "./clsx-OuTLNxxd.js";
-import { s as t, M as p } from "./MultiSelectItem-D9PxdX43.js";
+import { s as t, M as a } from "./MultiSelectItem-D9PxdX43.js";
 import { Label as u } from "./components/Label/Label.js";
 import "react";
 import { Button as n } from "./components/Buttons/Button.js";
@@ -17,25 +17,27 @@ import "./components/InputField/InputField.js";
 import "react-router-dom";
 import "./components/SelectListbox/SelectListbox.js";
 import "./components/SelectListbox/SelectProvider.js";
-function d({ label: i, clearTrigger: e, onClear: r }) {
+import "./components/Sortable/components/SortableItem.js";
+import "./SortableProvider-Z0e0qeQT.js";
+function d({ label: l, clearTrigger: e, onClear: r }) {
   return /* @__PURE__ */ o("header", { className: t["multi-select__header"], children: [
-    /* @__PURE__ */ l(u, { htmlFor: "multi-select-list", children: i }),
-    e && /* @__PURE__ */ l(n, { variant: "blank", onClick: r, children: e })
+    /* @__PURE__ */ i(u, { htmlFor: "multi-select-list", children: l }),
+    e && /* @__PURE__ */ i(n, { variant: "blank", onClick: r, children: e })
   ] });
 }
-const s = ({ scrollable: i = !0, noBorder: e, header: r, children: c }) => /* @__PURE__ */ o(a, { children: [
+const s = ({ scrollable: l = !0, noBorder: e, header: r, children: c }) => /* @__PURE__ */ o(p, { children: [
   r,
-  /* @__PURE__ */ l(
+  /* @__PURE__ */ i(
     "div",
     {
       className: m(t["multi-select"], {
         [t["multi-select--no-border"]]: e
       }),
-      children: /* @__PURE__ */ l(
+      children: /* @__PURE__ */ i(
         "ul",
         {
           className: m(t["multi-select__list"], {
-            [t["multi-select__list--scrollable"]]: i
+            [t["multi-select__list--scrollable"]]: l
           }),
           id: "multi-select-list",
           children: c
@@ -45,9 +47,9 @@ const s = ({ scrollable: i = !0, noBorder: e, header: r, children: c }) => /* @_
   )
 ] });
 s.MultiSelectHeader = d;
-s.MultiSelectItem = p;
+s.MultiSelectItem = a;
 export {
   s as M,
   d as a
 };
-//# sourceMappingURL=MultiSelect-D1FnMER4.js.map
+//# sourceMappingURL=MultiSelect-DQaqItEH.js.map

package/dist/{MultiSelect-D1FnMER4.js.map → MultiSelect-DQaqItEH.js.map}

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect-D1FnMER4.js","sources":["../src/components/MultiSelect/components/MultiSelectHeader.tsx","../src/components/MultiSelect/MultiSelect.tsx"],"sourcesContent":["import styles from 'components/MultiSelect/MultiSelect.module.css';\nimport { Label } from 'components/Label';\nimport { Button } from 'components';\n\nexport interface MultiSelectHeaderProps {\n  label: string;\n  clearTrigger?: string;\n  onClear?: () => void;\n}\n\nexport function MultiSelectHeader({ label, clearTrigger, onClear }: MultiSelectHeaderProps) {\n  return (\n    <header className={styles['multi-select__header']}>\n      <Label htmlFor=\"multi-select-list\">{label}</Label>\n      {clearTrigger && (\n        <Button variant={'blank'} onClick={onClear}>\n          {clearTrigger}\n        </Button>\n      )}\n    </header>\n  );\n}\n","import clsx from 'clsx';\n\nimport type { PropsWithChildren, ReactNode } from 'react';\n\nimport styles from './MultiSelect.module.css';\n\nimport { MultiSelectItem } from 'components/MultiSelect/components/MultiSelectItem';\nimport { MultiSelectHeader } from 'components/MultiSelect/components/MultiSelectHeader';\n\nexport interface MultiSelectProps {\n  /** `true` if the container should scroll on overflow; otherwise, `false` to resize the container to its contents. The default is `true`. */\n  scrollable?: boolean;\n  /** `true` to disable the border around the container; otherwise, `false`. The default is `false`. */\n  noBorder?: boolean;\n  /** The header contents. */\n  header?: ReactNode;\n}\n\n/** Represents a component to list a number of checkboxes. */\nexport const MultiSelect = ({ scrollable = true, noBorder, header, children }: PropsWithChildren<MultiSelectProps>) => (\n  <>\n    {header}\n    <div\n      className={clsx(styles['multi-select'], {\n        [styles['multi-select--no-border']]: noBorder,\n      })}\n    >\n      <ul\n        className={clsx(styles['multi-select__list'], {\n          [styles['multi-select__list--scrollable']]: scrollable,\n        })}\n        id=\"multi-select-list\"\n      >\n        {children}\n      </ul>\n    </div>\n  </>\n);\n\nMultiSelect.MultiSelectHeader = MultiSelectHeader;\nMultiSelect.MultiSelectItem = MultiSelectItem;\n"],"names":["MultiSelectHeader","label","clearTrigger","onClear","jsxs","styles","jsx","Label","Button","MultiSelect","scrollable","noBorder","header","children","Fragment","clsx","MultiSelectItem"],"mappings":";;;;;;;;;;;;;;;;;;;AAUO,SAASA,EAAkB,EAAE,OAAAC,GAAO,cAAAC,GAAc,SAAAC,KAAmC;AAC1F,SACG,gBAAAC,EAAA,UAAA,EAAO,WAAWC,EAAO,sBAAsB,GAC9C,UAAA;AAAA,IAAC,gBAAAC,EAAAC,GAAA,EAAM,SAAQ,qBAAqB,UAAMN,GAAA;AAAA,IACzCC,KACE,gBAAAI,EAAAE,GAAA,EAAO,SAAS,SAAS,SAASL,GAChC,UACHD,GAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;ACFa,MAAAO,IAAc,CAAC,EAAE,YAAAC,IAAa,IAAM,UAAAC,GAAU,QAAAC,GAAQ,UAAAC,QAE9D,gBAAAT,EAAAU,GAAA,EAAA,UAAA;AAAA,EAAAF;AAAA,EACD,gBAAAN;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWS,EAAKV,EAAO,cAAc,GAAG;AAAA,QACtC,CAACA,EAAO,yBAAyB,CAAC,GAAGM;AAAA,MAAA,CACtC;AAAA,MAED,UAAA,gBAAAL;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWS,EAAKV,EAAO,oBAAoB,GAAG;AAAA,YAC5C,CAACA,EAAO,gCAAgC,CAAC,GAAGK;AAAA,UAAA,CAC7C;AAAA,UACD,IAAG;AAAA,UAEF,UAAAG;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EACF;AAAA,GACF;AAGFJ,EAAY,oBAAoBT;AAChCS,EAAY,kBAAkBO;"}
+{"version":3,"file":"MultiSelect-DQaqItEH.js","sources":["../src/components/MultiSelect/components/MultiSelectHeader.tsx","../src/components/MultiSelect/MultiSelect.tsx"],"sourcesContent":["import styles from 'components/MultiSelect/MultiSelect.module.css';\nimport { Label } from 'components/Label';\nimport { Button } from 'components';\n\nexport interface MultiSelectHeaderProps {\n  label: string;\n  clearTrigger?: string;\n  onClear?: () => void;\n}\n\nexport function MultiSelectHeader({ label, clearTrigger, onClear }: MultiSelectHeaderProps) {\n  return (\n    <header className={styles['multi-select__header']}>\n      <Label htmlFor=\"multi-select-list\">{label}</Label>\n      {clearTrigger && (\n        <Button variant={'blank'} onClick={onClear}>\n          {clearTrigger}\n        </Button>\n      )}\n    </header>\n  );\n}\n","import clsx from 'clsx';\n\nimport type { PropsWithChildren, ReactNode } from 'react';\n\nimport styles from './MultiSelect.module.css';\n\nimport { MultiSelectItem } from 'components/MultiSelect/components/MultiSelectItem';\nimport { MultiSelectHeader } from 'components/MultiSelect/components/MultiSelectHeader';\n\nexport interface MultiSelectProps {\n  /** `true` if the container should scroll on overflow; otherwise, `false` to resize the container to its contents. The default is `true`. */\n  scrollable?: boolean;\n  /** `true` to disable the border around the container; otherwise, `false`. The default is `false`. */\n  noBorder?: boolean;\n  /** The header contents. */\n  header?: ReactNode;\n}\n\n/** Represents a component to list a number of checkboxes. */\nexport const MultiSelect = ({ scrollable = true, noBorder, header, children }: PropsWithChildren<MultiSelectProps>) => (\n  <>\n    {header}\n    <div\n      className={clsx(styles['multi-select'], {\n        [styles['multi-select--no-border']]: noBorder,\n      })}\n    >\n      <ul\n        className={clsx(styles['multi-select__list'], {\n          [styles['multi-select__list--scrollable']]: scrollable,\n        })}\n        id=\"multi-select-list\"\n      >\n        {children}\n      </ul>\n    </div>\n  </>\n);\n\nMultiSelect.MultiSelectHeader = MultiSelectHeader;\nMultiSelect.MultiSelectItem = MultiSelectItem;\n"],"names":["MultiSelectHeader","label","clearTrigger","onClear","jsxs","styles","jsx","Label","Button","MultiSelect","scrollable","noBorder","header","children","Fragment","clsx","MultiSelectItem"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAUO,SAASA,EAAkB,EAAE,OAAAC,GAAO,cAAAC,GAAc,SAAAC,KAAmC;AAC1F,SACG,gBAAAC,EAAA,UAAA,EAAO,WAAWC,EAAO,sBAAsB,GAC9C,UAAA;AAAA,IAAC,gBAAAC,EAAAC,GAAA,EAAM,SAAQ,qBAAqB,UAAMN,GAAA;AAAA,IACzCC,KACE,gBAAAI,EAAAE,GAAA,EAAO,SAAS,SAAS,SAASL,GAChC,UACHD,GAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;ACFa,MAAAO,IAAc,CAAC,EAAE,YAAAC,IAAa,IAAM,UAAAC,GAAU,QAAAC,GAAQ,UAAAC,QAE9D,gBAAAT,EAAAU,GAAA,EAAA,UAAA;AAAA,EAAAF;AAAA,EACD,gBAAAN;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWS,EAAKV,EAAO,cAAc,GAAG;AAAA,QACtC,CAACA,EAAO,yBAAyB,CAAC,GAAGM;AAAA,MAAA,CACtC;AAAA,MAED,UAAA,gBAAAL;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWS,EAAKV,EAAO,oBAAoB,GAAG;AAAA,YAC5C,CAACA,EAAO,gCAAgC,CAAC,GAAGK;AAAA,UAAA,CAC7C;AAAA,UACD,IAAG;AAAA,UAEF,UAAAG;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EACF;AAAA,GACF;AAGFJ,EAAY,oBAAoBT;AAChCS,EAAY,kBAAkBO;"}

package/dist/Sortable.module-BrgGu8qp.js

@@ -0,0 +1,24 @@
+import './assets/Sortable.css';const _ = "_sortable__wrapper_1ifbq_1", t = "_sortable__container_1ifbq_13", e = "_sortable__handle_1ifbq_153", r = {
+  sortable__wrapper: _,
+  "sortable__wrapper--scrollable": "_sortable__wrapper--scrollable_1ifbq_5",
+  sortable__container: t,
+  "sortable__drop-target": "_sortable__drop-target_1ifbq_25",
+  "sortable__sort-item": "_sortable__sort-item_1ifbq_56",
+  "sortable__sort-item--ghost": "_sortable__sort-item--ghost_1ifbq_72",
+  "sortable__container--drag-over": "_sortable__container--drag-over_1ifbq_83",
+  "sortable__sort-item__handle": "_sortable__sort-item__handle_1ifbq_88",
+  "sortable__sort-item__button-container": "_sortable__sort-item__button-container_1ifbq_98",
+  "sortable__sort-item__handle--icon": "_sortable__sort-item__handle--icon_1ifbq_117",
+  "sortable__sort-item__handle--up": "_sortable__sort-item__handle--up_1ifbq_124",
+  "sortable__sort-item__handle--down": "_sortable__sort-item__handle--down_1ifbq_125",
+  "sortable__sort-item--dragging": "_sortable__sort-item--dragging_1ifbq_136",
+  "sortable__sort-item__contents": "_sortable__sort-item__contents_1ifbq_140",
+  "sortable__sort-item__contents--handle-right": "_sortable__sort-item__contents--handle-right_1ifbq_149",
+  sortable__handle: e,
+  "sortable__handle--right": "_sortable__handle--right_1ifbq_159",
+  "sortable__visually-hidden": "_sortable__visually-hidden_1ifbq_177"
+};
+export {
+  r as s
+};
+//# sourceMappingURL=Sortable.module-BrgGu8qp.js.map

package/dist/Sortable.module-BrgGu8qp.js.map

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

package/dist/SortableProvider-Z0e0qeQT.js

@@ -0,0 +1,152 @@
+import { jsx as f } from "react/jsx-runtime";
+import { useRef as b, useEffect as w, cloneElement as R, createContext as O, useReducer as A, useContext as L, Children as _ } from "react";
+import { sortableReducer as j, initialState as q } from "./components/Sortable/sortableReducer.js";
+import { c as N } from "./clsx-OuTLNxxd.js";
+import { s as u } from "./Sortable.module-BrgGu8qp.js";
+import { setDraggingSource as B, setDraggingTarget as H, moveToPosition as X, clearDraggingTarget as Y, clearDraggingSource as k, drop as z, dragStart as F, dragEnd as G, reset as J, setClone as K } from "./components/Sortable/actions.js";
+function M({ scrollable: i, onSort: a }) {
+  const { clone: n, draggingTarget: p, drop: x, sortableItems: D, setDraggingTarget: o, reset: S, indices: s } = U(), l = b(null), c = b(null), d = b(s);
+  function m(r) {
+    const e = l.current;
+    if (!(e != null && e.hasChildNodes())) return;
+    const t = r.currentTarget;
+    return Array.from(e.childNodes).findIndex((v) => v.isEqualNode(t));
+  }
+  function T(r) {
+    const e = m(r);
+    e !== void 0 && (n && c.current && c.current.removeChild(n), x(e));
+  }
+  function $(r) {
+    if (r.preventDefault(), r.dataTransfer.dropEffect = "move", n) {
+      const { clientX: t, clientY: g } = r, { x: h, y: v, width: y, height: I } = r.currentTarget.getBoundingClientRect(), P = I / 2 - (g - v);
+      n.setAttribute(
+        "style",
+        `
+        left: ${t - (t - h)}px;
+        top: ${v - P}px;
+        height: ${I}px;
+        width: ${y}px;
+        visibility: visible;
+      `
+      );
+    }
+    const e = m(r);
+    e === void 0 || e === p || o(e);
+  }
+  function C(r) {
+    var g;
+    const { relatedTarget: e } = r;
+    e !== null && ((g = l.current) == null ? void 0 : g.contains(e)) || (S(), n && n.setAttribute("style", "visibility: hidden;"));
+  }
+  return w(() => {
+    if (!(!n || !c.current))
+      return c.current.appendChild(n), function() {
+        n.remove();
+      };
+  }, [n]), w(() => {
+    a && s.valueOf() !== d.current.valueOf() && (a(s), d.current = s);
+  }, [s, d, a]), /* @__PURE__ */ f(
+    "div",
+    {
+      className: N(u.sortable__wrapper, { [u["sortable__wrapper--scrollable"]]: i }),
+      ref: c,
+      children: /* @__PURE__ */ f(
+        "ul",
+        {
+          className: N(u.sortable__container, {
+            [u["sortable__container--drag-over"]]: n !== void 0
+          }),
+          onDragLeave: C,
+          ref: l,
+          role: "presentation",
+          children: D.map((r, e) => /* @__PURE__ */ f(
+            "li",
+            {
+              className: u["sortable__drop-target"],
+              draggable: !1,
+              onDragOver: $,
+              onDrop: T,
+              role: "presentation",
+              children: R(r, { index: e })
+            },
+            e
+          ))
+        }
+      )
+    }
+  );
+}
+const E = O(void 0), Q = (i) => ({
+  ...q,
+  indices: _.map(i, ({ props: a }) => a.index),
+  maxIndex: _.count(i) - 1,
+  sortableItems: i
+});
+function ne({ children: i, items: a, scrollable: n, onSort: p }) {
+  const x = b(a), [D, o] = A(j, i, Q);
+  function S(t) {
+    o(B(t));
+  }
+  function s(t) {
+    o(H(t));
+  }
+  function l(t) {
+    o(X(t));
+  }
+  function c() {
+    o(Y());
+  }
+  function d() {
+    o(k());
+  }
+  function m(t) {
+    o(z(t));
+  }
+  function T(t) {
+    o(F(t));
+  }
+  function $() {
+    o(G());
+  }
+  function C() {
+    o(J());
+  }
+  function r(t) {
+    o(K(t));
+  }
+  function e(t) {
+    const g = t.map((h) => x.current[h]);
+    p && p(g);
+  }
+  return /* @__PURE__ */ f(
+    E.Provider,
+    {
+      value: {
+        ...D,
+        clearDraggingSource: d,
+        clearDraggingTarget: c,
+        dragEnd: $,
+        dragStart: T,
+        drop: m,
+        moveToPosition: l,
+        reset: C,
+        setClone: r,
+        setDraggingSource: S,
+        setDraggingTarget: s
+      },
+      children: /* @__PURE__ */ f(M, { scrollable: n, onSort: e })
+    }
+  );
+}
+function U() {
+  const i = L(E);
+  if (i === void 0)
+    throw new Error("useSortable must be used within a SortableProvider");
+  return i;
+}
+export {
+  ne as S,
+  M as a,
+  U as u
+};
+//# sourceMappingURL=SortableProvider-Z0e0qeQT.js.map

package/dist/SortableProvider-Z0e0qeQT.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortableProvider-Z0e0qeQT.js","sources":["../src/components/Sortable/components/SortableContainer.tsx","../src/components/Sortable/SortableProvider.tsx"],"sourcesContent":["import { cloneElement, useEffect, useRef } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { DragEvent } from 'react';\n\nimport styles from 'components/Sortable/Sortable.module.css';\nimport { useSortable } from 'components/Sortable/SortableProvider';\n\nexport type OnSort = (indices: number[]) => void;\n\ninterface SortableContainerProps {\n  scrollable?: boolean;\n  onSort?: OnSort;\n}\n\nexport function SortableContainer({ scrollable, onSort }: SortableContainerProps) {\n  const { clone, draggingTarget, drop, sortableItems, setDraggingTarget, reset, indices } = useSortable();\n  const containerRef = useRef<HTMLUListElement>(null);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const indicesRef = useRef<number[]>(indices);\n\n  function getTargetIndex(event: DragEvent<HTMLLIElement>) {\n    const sortableContainer = containerRef.current;\n\n    if (!sortableContainer?.hasChildNodes()) return;\n\n    const listItemNode = event.currentTarget;\n    const childNodes = Array.from(sortableContainer.childNodes);\n    const targetIndex = childNodes.findIndex((node) => node.isEqualNode(listItemNode));\n\n    return targetIndex;\n  }\n\n  function handleDrop(event: DragEvent<HTMLLIElement>) {\n    const targetIndex = getTargetIndex(event);\n\n    if (targetIndex === undefined) return;\n\n    if (clone && wrapperRef.current) wrapperRef.current.removeChild(clone);\n\n    drop(targetIndex);\n  }\n\n  function handleDragOver(event: DragEvent<HTMLLIElement>) {\n    // Prevent default to allow drop\n    event.preventDefault();\n    event.dataTransfer.dropEffect = 'move';\n\n    if (clone) {\n      const { clientX, clientY } = event;\n      const { x, y, width, height } = event.currentTarget.getBoundingClientRect();\n      // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n      const grabPosition = height / 2 - (clientY - y);\n\n      // lock drag image movement to x-axis and mouse pointer\n      clone.setAttribute(\n        'style',\n        `\n        left: ${clientX - (clientX - x)}px;\n        top: ${y - grabPosition}px;\n        height: ${height}px;\n        width: ${width}px;\n        visibility: visible;\n      `\n      );\n    }\n\n    const targetIndex = getTargetIndex(event);\n\n    if (targetIndex === undefined || targetIndex === draggingTarget) return;\n\n    setDraggingTarget(targetIndex);\n  }\n\n  function handleContainerDragLeave(event: DragEvent<HTMLUListElement>) {\n    const { relatedTarget } = event;\n\n    const within = relatedTarget !== null && containerRef.current?.contains(relatedTarget as Node);\n\n    if (!within) {\n      reset();\n\n      if (clone) {\n        clone.setAttribute('style', 'visibility: hidden;');\n      }\n    }\n  }\n\n  useEffect(() => {\n    if (!clone || !wrapperRef.current) return;\n\n    wrapperRef.current.appendChild(clone);\n\n    return function () {\n      clone.remove();\n    };\n  }, [clone]);\n\n  useEffect(() => {\n    if (!onSort) return;\n\n    if (indices.valueOf() !== indicesRef.current.valueOf()) {\n      onSort(indices);\n\n      indicesRef.current = indices;\n    }\n  }, [indices, indicesRef, onSort]);\n\n  return (\n    <div\n      className={clsx(styles['sortable__wrapper'], { [styles['sortable__wrapper--scrollable']]: scrollable })}\n      ref={wrapperRef}\n    >\n      <ul\n        className={clsx(styles['sortable__container'], {\n          [styles['sortable__container--drag-over']]: clone !== undefined,\n        })}\n        onDragLeave={handleContainerDragLeave}\n        ref={containerRef}\n        role=\"presentation\"\n      >\n        {sortableItems.map((child, index) => (\n          <li\n            className={styles['sortable__drop-target']}\n            draggable={false}\n            key={index}\n            onDragOver={handleDragOver}\n            onDrop={handleDrop}\n            role=\"presentation\"\n          >\n            {cloneElement(child, { index })}\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n","import { Children, createContext, useContext, useReducer, useRef } from 'react';\n\nimport type { ReactElement } from 'react';\nimport type { SortableStateType } from './sortableReducer';\n\nimport { sortableReducer, initialState } from './sortableReducer';\nimport { SortableContainer } from './components/SortableContainer';\nimport * as actions from './actions';\n\ntype SortableContextType = {\n  clearDraggingSource: () => void;\n  clearDraggingTarget: () => void;\n  dragEnd: () => void;\n  dragStart: (index: number) => void;\n  drop: (index: number) => void;\n  moveToPosition: (index: number) => void;\n  reset: () => void;\n  setClone: (node: Element) => void;\n  setDraggingSource: (index: number) => void;\n  setDraggingTarget: (index: number) => void;\n};\n\nconst SortableContext = createContext<(SortableContextType & SortableStateType) | undefined>(undefined);\n\ninterface Props {\n  children: SortableStateType['sortableItems'];\n  items: ReactElement[] | string[];\n  scrollable?: boolean;\n  onSort?: (items: (string | ReactElement)[]) => void;\n}\n\nconst init = (children: Props['children']): SortableStateType => ({\n  ...initialState,\n  indices: Children.map(children, ({ props }) => props.index),\n  maxIndex: Children.count(children) - 1,\n  sortableItems: children,\n});\n\nexport function SortableProvider({ children, items, scrollable, onSort }: Props) {\n  const persistentItems = useRef(items);\n\n  const [state, dispatch] = useReducer(sortableReducer, children, init);\n\n  function setDraggingSource(index: number) {\n    dispatch(actions.setDraggingSource(index));\n  }\n\n  function setDraggingTarget(index: number) {\n    dispatch(actions.setDraggingTarget(index));\n  }\n\n  function moveToPosition(index: number) {\n    dispatch(actions.moveToPosition(index));\n  }\n\n  function clearDraggingTarget() {\n    dispatch(actions.clearDraggingTarget());\n  }\n\n  function clearDraggingSource() {\n    dispatch(actions.clearDraggingSource());\n  }\n\n  function drop(index: number) {\n    dispatch(actions.drop(index));\n  }\n\n  function dragStart(index: number) {\n    dispatch(actions.dragStart(index));\n  }\n\n  function dragEnd() {\n    dispatch(actions.dragEnd());\n  }\n\n  function reset() {\n    dispatch(actions.reset());\n  }\n\n  function setClone(node: Element) {\n    dispatch(actions.setClone(node));\n  }\n\n  function onHandleSort(sortedIndices: number[]) {\n    const sortedItems = sortedIndices.map((index) => persistentItems.current[index]);\n    onSort && onSort(sortedItems);\n  }\n\n  return (\n    <SortableContext.Provider\n      value={{\n        ...state,\n        clearDraggingSource,\n        clearDraggingTarget,\n        dragEnd,\n        dragStart,\n        drop,\n        moveToPosition,\n        reset,\n        setClone,\n        setDraggingSource,\n        setDraggingTarget,\n      }}\n    >\n      <SortableContainer scrollable={scrollable} onSort={onHandleSort} />\n    </SortableContext.Provider>\n  );\n}\n\nexport function useSortable() {\n  const context = useContext(SortableContext);\n\n  if (context === undefined) {\n    throw new Error('useSortable must be used within a SortableProvider');\n  }\n\n  return context;\n}\n"],"names":["SortableContainer","scrollable","onSort","clone","draggingTarget","drop","sortableItems","setDraggingTarget","reset","indices","useSortable","containerRef","useRef","wrapperRef","indicesRef","getTargetIndex","event","sortableContainer","listItemNode","node","handleDrop","targetIndex","handleDragOver","clientX","clientY","x","y","width","height","grabPosition","handleContainerDragLeave","relatedTarget","_a","useEffect","jsx","clsx","styles","child","index","cloneElement","SortableContext","createContext","init","children","initialState","Children","props","SortableProvider","items","persistentItems","state","dispatch","useReducer","sortableReducer","setDraggingSource","actions.setDraggingSource","actions.setDraggingTarget","moveToPosition","actions.moveToPosition","clearDraggingTarget","actions.clearDraggingTarget","clearDraggingSource","actions.clearDraggingSource","actions.drop","dragStart","actions.dragStart","dragEnd","actions.dragEnd","actions.reset","setClone","actions.setClone","onHandleSort","sortedIndices","sortedItems","context","useContext"],"mappings":"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"}

package/dist/assets/Sortable.css

@@ -0,0 +1 @@
+._sortable__wrapper_1ifbq_1{position:relative}._sortable__wrapper--scrollable_1ifbq_5{border-bottom:1px solid var(--color-pattens-blue);border-top:1px solid var(--color-pattens-blue);margin-bottom:1rem;max-height:21rem;overflow-y:auto}._sortable__container_1ifbq_13{--item-min-height: 3.75rem;counter-reset:container;display:flex;flex-direction:column;gap:1rem;list-style:none;margin:1rem 1rem 1rem 0;padding:0}._sortable__drop-target_1ifbq_25{display:flex;gap:1rem;min-height:var(--item-min-height);position:relative}._sortable__drop-target_1ifbq_25:before{align-items:center;content:counter(container);counter-increment:container;display:flex;opacity:1;position:relative;transition:opacity .25s}._sortable__drop-target_1ifbq_25:after{content:"";display:block;height:1px;left:0;position:absolute;width:100%;z-index:1}._sortable__drop-target_1ifbq_25:last-child:after{display:inline}._sortable__sort-item_1ifbq_56{align-items:center;background-color:var(--color-grey-50);border-radius:.5rem;display:flex;gap:1rem;min-height:var(--item-min-height);position:relative;width:100%;z-index:0}._sortable__sort-item_1ifbq_56:focus{z-index:2}._sortable__sort-item--ghost_1ifbq_72{margin:0 1rem;opacity:50%;padding:.5rem 0;pointer-events:none;position:fixed;-webkit-user-drag:none;visibility:hidden;z-index:2}._sortable__container--drag-over_1ifbq_83 ._sortable__drop-target_1ifbq_25:before,._sortable__sort-item--ghost_1ifbq_72:before{opacity:0}._sortable__sort-item__handle_1ifbq_88{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;background-color:var(--color-white);border:0;cursor:grab;height:2.625rem;width:2.625rem}._sortable__sort-item__button-container_1ifbq_98{align-items:center;background-color:var(--color-pattens-blue);border-left:1px solid var(--color-pattens-blue);border-radius:0 .5rem .5rem 0;display:flex;flex-direction:column;inset:0 0 0 auto;margin-right:1px;overflow:hidden;position:absolute;width:2.625rem;z-index:20}._sortable__sort-item__button-container_1ifbq_98[data-touch=false]{display:none}._sortable__sort-item__handle--icon_1ifbq_117{align-items:center;display:flex;height:1rem;width:1rem}._sortable__sort-item__handle--up_1ifbq_124,._sortable__sort-item__handle--down_1ifbq_125{color:#000;display:none;height:100%;right:.5rem}._sortable__sort-item__handle--up_1ifbq_124{transform:rotate(180deg)}._sortable__sort-item--dragging_1ifbq_136 ._sortable__sort-item__handle_1ifbq_88{cursor:grabbing}._sortable__sort-item__contents_1ifbq_140{align-items:center;color:var(--color-uva-black);display:flex;gap:.5rem;padding:.5rem;width:100%}._sortable__sort-item__contents--handle-right_1ifbq_149{padding-right:2.5rem}._sortable__handle_1ifbq_153{color:var(--color-grey-500);cursor:grab;display:flex}._sortable__handle--right_1ifbq_159{position:absolute;right:.5rem}._sortable__sort-item__button-container_1ifbq_98[data-touch=true]{gap:1px;justify-content:center}._sortable__sort-item__button-container_1ifbq_98[data-touch=true] ._sortable__sort-item__handle--up_1ifbq_124,._sortable__sort-item__button-container_1ifbq_98[data-touch=true] ._sortable__sort-item__handle--down_1ifbq_125{align-items:center;display:flex;justify-content:center}._sortable__visually-hidden_1ifbq_177{border:0;clip:rect(0,0,0,0);clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}

package/dist/components/CheckboxTree/CheckboxTree.js

@@ -17,9 +17,11 @@ import "../IconButton/IconButton.js";
 import "../Input/Input.js";
 import "../InputField/InputField.js";
 import "react-router-dom";
-import "../../MultiSelect-D1FnMER4.js";
+import "../../MultiSelect-DQaqItEH.js";
 import "../SelectListbox/SelectListbox.js";
 import "../SelectListbox/SelectProvider.js";
+import "../Sortable/components/SortableItem.js";
+import "../../SortableProvider-Z0e0qeQT.js";
 import { useResponsive as j } from "../hooks/useResponsive.js";
 import '../../assets/CheckboxTree.css';const o = {
   "checkbox-tree__header": "_checkbox-tree__header_xbe4e_1",
@@ -30,11 +32,11 @@ import '../../assets/CheckboxTree.css';const o = {
   "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"
-}, oe = ({ title: p, checkboxTree: A, defaultValue: i, onChange: x }) => {
+}, de = ({ title: p, checkboxTree: A, defaultValue: i, onChange: x }) => {
   const s = T([]), { lessThan: n } = j(), _ = (r, e = document) => [].slice.call(e.querySelectorAll(r)), E = () => {
     const r = s.current.reduce((e, t) => (t.name && t.checked && e.push(t.value), e), []);
     x && x(r);
-  }, u = (r) => {
+  }, m = (r) => {
     var e, t, d;
     for (; r; ) {
       const c = (t = (e = r.closest("[data-ul]")) == null ? void 0 : e.parentNode) == null ? void 0 : t.querySelector("input"), f = _(
@@ -45,7 +47,7 @@ import '../../assets/CheckboxTree.css';const o = {
         break;
       r = c;
     }
-  }, m = (r, e) => {
+  }, u = (r, e) => {
     var d, c;
     const t = e == null ? void 0 : e.querySelector("[data-ul]");
     r.childNodes[0].classList.toggle(o["checkbox-tree__branch--icon--expanded"]), (c = e == null ? void 0 : e.closest("[data-li]")) == null || c.setAttribute(
@@ -58,20 +60,20 @@ import '../../assets/CheckboxTree.css';const o = {
     if (!e || !e.parentNode || !e.parentNode.parentNode) return;
     const t = e.parentNode.parentNode;
     if (n.md && ((c = e.previousElementSibling) == null ? void 0 : c.tagName) === "BUTTON" && t.getAttribute("aria-expanded") === "false") {
-      r.preventDefault(), m(t.querySelector("button"), t);
+      r.preventDefault(), u(t.querySelector("button"), t);
       return;
     }
     if (s.current.indexOf(e) === -1) return;
-    (e.parentNode.parentNode ? _("input", e.parentNode.parentNode) : []).forEach((h) => h.checked = h.disabled ? !1 : e.checked), u(e), E();
+    (e.parentNode.parentNode ? _("input", e.parentNode.parentNode) : []).forEach((h) => h.checked = h.disabled ? !1 : e.checked), m(e), E();
   }, B = (r) => {
     const e = r.target, t = e.closest("[data-li]");
-    m(e, t);
+    u(e, t);
   };
   return N(() => {
     s.current = _("input") || [];
   }, []), N(() => {
     i && s.current.forEach((r) => {
-      i.includes(r.value) && (r.checked = !0, u(r));
+      i.includes(r.value) && (r.checked = !0, m(r));
     });
   }, [i]), /* @__PURE__ */ l("div", { children: [
     p && /* @__PURE__ */ a("span", { className: o["checkbox-tree__header"], children: p }),
@@ -116,6 +118,6 @@ import '../../assets/CheckboxTree.css';const o = {
   ] });
 };
 export {
-  oe as CheckboxTree
+  de as CheckboxTree
 };
 //# sourceMappingURL=CheckboxTree.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CheckboxTree.js","sources":["../../../src/components/CheckboxTree/CheckboxTree.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport type { MouseEventHandler } from 'react';\n\nimport styles from './CheckboxTree.module.css';\n\nimport { Button, Checkbox, FormField, Icon, Label } from 'components';\nimport { useResponsive } from 'components/hooks/useResponsive';\n\n// TODO: Currently the checkbox tree shows odd behavior when a disabled checkbox is checked. When deselecting the parent checkbox, the disabled checkbox is deselected, and will never be checked again. We'll leave this for now, until we run into a real world example where this is necessary.\n\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  /** 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 = ({ title, checkboxTree, defaultValue, onChange }: 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}>{itemName}</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}>{itemName}</Label>\n                  </FormField>\n                </div>\n              ))}\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"names":["CheckboxTree","title","checkboxTree","defaultValue","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\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  /** 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 = ({ title, checkboxTree, defaultValue, onChange }: 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}>{itemName}</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}>{itemName}</Label>\n                  </FormField>\n                </div>\n              ))}\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"names":["CheckboxTree","title","checkboxTree","defaultValue","onChange","checkboxNodes","useRef","lessThan","useResponsive","nodeArray","selector","parent","setValue","values","checkbox","setCheckboxesState","check","_b","_a","checkStatus","_c","status","every","some","setExpandedAttributes","trigger","container","children","styles","handleChange","event","parentCheckbox","child","handleExpanded","target","useEffect","itemName","jsxs","FormField","jsx","Button","Icon","clsx","Checkbox","Label","itemValue","disabled"],"mappings":"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"}

package/dist/components/InputField/InputField.stories.js

@@ -1,7 +1,7 @@
 import { jsx as r } from "react/jsx-runtime";
 import { useState as d, useRef as g } from "react";
 import { fn as l } from "../../index-MQ0yPLdl.js";
-import { InputField as a } from "./InputField.js";
+import { InputField as o } from "./InputField.js";
 import { Container as u } from "../../storyComponents/Container/Container.js";
 import { Icon as f } from "../Icon/Icon.js";
 import "../Buttons/Button.js";
@@ -15,9 +15,11 @@ import "../GridRow/GridRow.js";
 import "../IconButton/IconButton.js";
 import "../Input/Input.js";
 import "react-router-dom";
-import "../../MultiSelect-D1FnMER4.js";
+import "../../MultiSelect-DQaqItEH.js";
 import "../SelectListbox/SelectListbox.js";
 import "../SelectListbox/SelectProvider.js";
+import "../Sortable/components/SortableItem.js";
+import "../../SortableProvider-Z0e0qeQT.js";
 const C = `
 // Has all HTMLInputElement props available except "className" and "style" 
 <InputField aria-labelledby={aria-labelledby} id={id} onChange={onChangeFunction}
@@ -25,9 +27,9 @@ const C = `
 `, h = (t) => {
   const e = t.variant ?? [];
   return { ...t, variant: e.toString() };
-}, B = {
+}, G = {
   title: "Atoms/InputField",
-  component: a,
+  component: o,
   argTypes: {
     variant: {
       options: ["large"],
@@ -47,17 +49,17 @@ const C = `
     }
   },
   parameters: {
-    inspectComponent: a,
+    inspectComponent: o,
     codeString: C
   }
-}, o = (t) => {
+}, a = (t) => {
   const [e, i] = d(""), p = g(null), s = (c) => {
     i(c.target.value), l()("handleChange");
   }, m = () => {
     i(""), l()("handleClear");
   };
   return /* @__PURE__ */ r(u, { children: /* @__PURE__ */ r(
-    a,
+    o,
     {
       ...h(t),
       value: e,
@@ -70,16 +72,16 @@ const C = `
   type: "text",
   variant: void 0,
   id: "4f9ca77d"
-}, v = o.bind({});
+}, v = a.bind({});
 v.args = {
   ...n
 };
-const b = o.bind({});
+const b = a.bind({});
 b.args = {
   ...n,
   clearTrigger: "Clear"
 };
-const y = o.bind({});
+const y = a.bind({});
 y.args = {
   ...n,
   clearTrigger: /* @__PURE__ */ r(f, { name: "Cross" })
@@ -88,6 +90,6 @@ export {
   v as InputFieldExample,
   y as WithIconClearTrigger,
   b as WithStringClearTrigger,
-  B as default
+  G as default
 };
 //# sourceMappingURL=InputField.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"InputField.stories.js","sources":["../../../src/components/InputField/InputField.stories.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { fn } from '@storybook/test';\n\nimport type { ChangeEvent } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { InputFieldProps } from './InputField';\n\nimport { InputField } from './InputField';\n\nimport { Container } from 'storyComponents/Container';\nimport { Icon } from 'components';\n\nconst codeString = `\n// Has all HTMLInputElement props available except \"className\" and \"style\" \n<InputField aria-labelledby={aria-labelledby} id={id} onChange={onChangeFunction}\n  value={value} type={type} clearTrigger={clearTrigger} />\n`;\n\nconst transformArgs = (args: InputFieldProps) => {\n  // args.variant is provided as an array because the control type is set to a checkbox. So this transforms the selected value into its proper value: a string\n  const variantArray = (args.variant as unknown as string[]) ?? [];\n  return { ...args, ...{ variant: variantArray.toString() } } as InputFieldProps;\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/InputField',\n  component: InputField,\n  argTypes: {\n    variant: {\n      options: ['large'],\n      control: 'check',\n    },\n    type: {\n      control: 'radio',\n      options: ['text', 'password', 'email'],\n    },\n    id: {\n      control: 'text',\n    },\n    autoComplete: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n  parameters: {\n    inspectComponent: InputField,\n    codeString: codeString,\n  },\n} as Meta<InputFieldProps>;\n\nconst Template: StoryFn<InputFieldProps> = (args) => {\n  const [inputValue, setInputValue] = useState<InputFieldProps['value']>('');\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    setInputValue(event.target.value);\n    fn()('handleChange');\n  };\n\n  const handleClear = () => {\n    setInputValue('');\n    fn()('handleClear');\n  };\n\n  return (\n    <Container>\n      <InputField\n        {...transformArgs(args)}\n        value={inputValue}\n        onChange={handleChange}\n        onClear={handleClear}\n        ref={inputRef}\n      />\n    </Container>\n  );\n};\n\nconst defaultArgs: Partial<InputFieldProps> = {\n  type: 'text',\n  variant: undefined,\n  id: '4f9ca77d',\n};\n\nexport const InputFieldExample = Template.bind({});\nInputFieldExample.args = {\n  ...defaultArgs,\n};\n\nexport const WithStringClearTrigger = Template.bind({});\nWithStringClearTrigger.args = {\n  ...defaultArgs,\n  clearTrigger: 'Clear',\n};\n\nexport const WithIconClearTrigger = Template.bind({});\nWithIconClearTrigger.args = {\n  ...defaultArgs,\n  clearTrigger: <Icon name=\"Cross\" />,\n};\n"],"names":["codeString","transformArgs","args","variantArray","InputField_stories","InputField","Template","inputValue","setInputValue","useState","inputRef","useRef","handleChange","event","fn","handleClear","Container","jsx","defaultArgs","InputFieldExample","WithStringClearTrigger","WithIconClearTrigger","Icon"],"mappings":";;;;;;;;;;;;;;;;;;;;AAYA,MAAMA,IAAa;AAAA;AAAA;AAAA;AAAA,GAMbC,IAAgB,CAACC,MAA0B;AAEzC,QAAAC,IAAgBD,EAAK,WAAmC;AACvD,SAAA,EAAE,GAAGA,GAAW,SAASC,EAAa,SAAS;AACxD,GAGeC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS,CAAC,OAAO;AAAA,MACjB,SAAS;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS,CAAC,QAAQ,YAAY,OAAO;AAAA,IACvC;AAAA,IACA,IAAI;AAAA,MACF,SAAS;AAAA,IACX;AAAA,IACA,cAAc;AAAA,MACZ,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAL;AAAA,EACF;AACF,GAEMM,IAAqC,CAACJ,MAAS;AACnD,QAAM,CAACK,GAAYC,CAAa,IAAIC,EAAmC,EAAE,GACnEC,IAAWC,EAAyB,IAAI,GAExCC,IAAe,CAACC,MAAyC;AAC/C,IAAAL,EAAAK,EAAM,OAAO,KAAK,GAChCC,EAAA,EAAK,cAAc;AAAA,EAAA,GAGfC,IAAc,MAAM;AACxB,IAAAP,EAAc,EAAE,GAChBM,EAAA,EAAK,aAAa;AAAA,EAAA;AAGpB,2BACGE,GACC,EAAA,UAAA,gBAAAC;AAAA,IAACZ;AAAA,IAAA;AAAA,MACE,GAAGJ,EAAcC,CAAI;AAAA,MACtB,OAAOK;AAAA,MACP,UAAUK;AAAA,MACV,SAASG;AAAA,MACT,KAAKL;AAAA,IAAA;AAAA,EAET,EAAA,CAAA;AAEJ,GAEMQ,IAAwC;AAAA,EAC5C,MAAM;AAAA,EACN,SAAS;AAAA,EACT,IAAI;AACN,GAEaC,IAAoBb,EAAS,KAAK,EAAE;AACjDa,EAAkB,OAAO;AAAA,EACvB,GAAGD;AACL;AAEO,MAAME,IAAyBd,EAAS,KAAK,EAAE;AACtDc,EAAuB,OAAO;AAAA,EAC5B,GAAGF;AAAA,EACH,cAAc;AAChB;AAEO,MAAMG,IAAuBf,EAAS,KAAK,EAAE;AACpDe,EAAqB,OAAO;AAAA,EAC1B,GAAGH;AAAA,EACH,cAAc,gBAAAD,EAACK,GAAK,EAAA,MAAK,QAAQ,CAAA;AACnC;"}
+{"version":3,"file":"InputField.stories.js","sources":["../../../src/components/InputField/InputField.stories.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { fn } from '@storybook/test';\n\nimport type { ChangeEvent } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { InputFieldProps } from './InputField';\n\nimport { InputField } from './InputField';\n\nimport { Container } from 'storyComponents/Container';\nimport { Icon } from 'components';\n\nconst codeString = `\n// Has all HTMLInputElement props available except \"className\" and \"style\" \n<InputField aria-labelledby={aria-labelledby} id={id} onChange={onChangeFunction}\n  value={value} type={type} clearTrigger={clearTrigger} />\n`;\n\nconst transformArgs = (args: InputFieldProps) => {\n  // args.variant is provided as an array because the control type is set to a checkbox. So this transforms the selected value into its proper value: a string\n  const variantArray = (args.variant as unknown as string[]) ?? [];\n  return { ...args, ...{ variant: variantArray.toString() } } as InputFieldProps;\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/InputField',\n  component: InputField,\n  argTypes: {\n    variant: {\n      options: ['large'],\n      control: 'check',\n    },\n    type: {\n      control: 'radio',\n      options: ['text', 'password', 'email'],\n    },\n    id: {\n      control: 'text',\n    },\n    autoComplete: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n  parameters: {\n    inspectComponent: InputField,\n    codeString: codeString,\n  },\n} as Meta<InputFieldProps>;\n\nconst Template: StoryFn<InputFieldProps> = (args) => {\n  const [inputValue, setInputValue] = useState<InputFieldProps['value']>('');\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    setInputValue(event.target.value);\n    fn()('handleChange');\n  };\n\n  const handleClear = () => {\n    setInputValue('');\n    fn()('handleClear');\n  };\n\n  return (\n    <Container>\n      <InputField\n        {...transformArgs(args)}\n        value={inputValue}\n        onChange={handleChange}\n        onClear={handleClear}\n        ref={inputRef}\n      />\n    </Container>\n  );\n};\n\nconst defaultArgs: Partial<InputFieldProps> = {\n  type: 'text',\n  variant: undefined,\n  id: '4f9ca77d',\n};\n\nexport const InputFieldExample = Template.bind({});\nInputFieldExample.args = {\n  ...defaultArgs,\n};\n\nexport const WithStringClearTrigger = Template.bind({});\nWithStringClearTrigger.args = {\n  ...defaultArgs,\n  clearTrigger: 'Clear',\n};\n\nexport const WithIconClearTrigger = Template.bind({});\nWithIconClearTrigger.args = {\n  ...defaultArgs,\n  clearTrigger: <Icon name=\"Cross\" />,\n};\n"],"names":["codeString","transformArgs","args","variantArray","InputField_stories","InputField","Template","inputValue","setInputValue","useState","inputRef","useRef","handleChange","event","fn","handleClear","Container","jsx","defaultArgs","InputFieldExample","WithStringClearTrigger","WithIconClearTrigger","Icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAYA,MAAMA,IAAa;AAAA;AAAA;AAAA;AAAA,GAMbC,IAAgB,CAACC,MAA0B;AAEzC,QAAAC,IAAgBD,EAAK,WAAmC;AACvD,SAAA,EAAE,GAAGA,GAAW,SAASC,EAAa,SAAS;AACxD,GAGeC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS,CAAC,OAAO;AAAA,MACjB,SAAS;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS,CAAC,QAAQ,YAAY,OAAO;AAAA,IACvC;AAAA,IACA,IAAI;AAAA,MACF,SAAS;AAAA,IACX;AAAA,IACA,cAAc;AAAA,MACZ,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAL;AAAA,EACF;AACF,GAEMM,IAAqC,CAACJ,MAAS;AACnD,QAAM,CAACK,GAAYC,CAAa,IAAIC,EAAmC,EAAE,GACnEC,IAAWC,EAAyB,IAAI,GAExCC,IAAe,CAACC,MAAyC;AAC/C,IAAAL,EAAAK,EAAM,OAAO,KAAK,GAChCC,EAAA,EAAK,cAAc;AAAA,EAAA,GAGfC,IAAc,MAAM;AACxB,IAAAP,EAAc,EAAE,GAChBM,EAAA,EAAK,aAAa;AAAA,EAAA;AAGpB,2BACGE,GACC,EAAA,UAAA,gBAAAC;AAAA,IAACZ;AAAA,IAAA;AAAA,MACE,GAAGJ,EAAcC,CAAI;AAAA,MACtB,OAAOK;AAAA,MACP,UAAUK;AAAA,MACV,SAASG;AAAA,MACT,KAAKL;AAAA,IAAA;AAAA,EAET,EAAA,CAAA;AAEJ,GAEMQ,IAAwC;AAAA,EAC5C,MAAM;AAAA,EACN,SAAS;AAAA,EACT,IAAI;AACN,GAEaC,IAAoBb,EAAS,KAAK,EAAE;AACjDa,EAAkB,OAAO;AAAA,EACvB,GAAGD;AACL;AAEO,MAAME,IAAyBd,EAAS,KAAK,EAAE;AACtDc,EAAuB,OAAO;AAAA,EAC5B,GAAGF;AAAA,EACH,cAAc;AAChB;AAEO,MAAMG,IAAuBf,EAAS,KAAK,EAAE;AACpDe,EAAqB,OAAO;AAAA,EAC1B,GAAGH;AAAA,EACH,cAAc,gBAAAD,EAACK,GAAK,EAAA,MAAK,QAAQ,CAAA;AACnC;"}

package/dist/components/MultiSelect/MultiSelect.js

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
 import "../../clsx-OuTLNxxd.js";
 import "../../MultiSelectItem-D9PxdX43.js";
-import { M as p } from "../../MultiSelect-D1FnMER4.js";
+import { M as p } from "../../MultiSelect-DQaqItEH.js";
 export {
   p as MultiSelect
 };

package/dist/components/MultiSelect/MultiSelect.stories.js

@@ -1,7 +1,7 @@
 import { jsxs as S, jsx as r } from "react/jsx-runtime";
 import { fn as d } from "../../index-MQ0yPLdl.js";
 import { useState as p } from "react";
-import { M as e } from "../../MultiSelect-D1FnMER4.js";
+import { M as e } from "../../MultiSelect-DQaqItEH.js";
 import { Container as M } from "../../storyComponents/Container/Container.js";
 const C = `
   // MultiSelectHeader can be added optionally

package/dist/components/MultiSelect/components/MultiSelectHeader.js

@@ -14,10 +14,12 @@ import "../../IconButton/IconButton.js";
 import "../../Input/Input.js";
 import "../../InputField/InputField.js";
 import "react-router-dom";
-import { a as h } from "../../../MultiSelect-D1FnMER4.js";
+import { a as k } from "../../../MultiSelect-DQaqItEH.js";
 import "../../SelectListbox/SelectListbox.js";
 import "../../SelectListbox/SelectProvider.js";
+import "../../Sortable/components/SortableItem.js";
+import "../../../SortableProvider-Z0e0qeQT.js";
 export {
-  h as MultiSelectHeader
+  k as MultiSelectHeader
 };
 //# sourceMappingURL=MultiSelectHeader.js.map

package/dist/components/MultiSelect/components/MultiSelectHeader.js.map

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

package/dist/components/MultiSelect/index.js

@@ -1,4 +1,4 @@
-import { M as l } from "../../MultiSelect-D1FnMER4.js";
+import { M as l } from "../../MultiSelect-DQaqItEH.js";
 export {
   l as MultiSelect
 };