@uva-glass/component-library 3.30.1 → 3.32.0

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

@@ -1,59 +1,58 @@
-import { jsxs as D, Fragment as h, jsx as m } from "react/jsx-runtime";
-import { c as y } from "../../../clsx-OuTLNxxd.js";
-import { useRef as O, useEffect as d } from "react";
-import { useSelect as x } from "../SelectProvider.js";
-import { s as o } from "../../../SelectListbox.module-yzXaWwsm.js";
-const j = ({ option: l, index: t, dividerAfter: u, children: v }) => {
-  const i = O(null), { isOpen: r, activeIndex: s, setActiveIndex: c, selectedValue: f, setSelectedValue: p, setIsOpen: n, options: a } = x(), w = (e) => {
-    p(a[e]), n(!1);
-  }, k = (e) => {
-    switch (e.key) {
+import { jsxs as k, Fragment as D, jsx as b } from "react/jsx-runtime";
+import { c as h } from "../../../clsx-OuTLNxxd.js";
+import { useRef as y, useEffect as m } from "react";
+import { useSelect as O } from "../SelectProvider.js";
+import { s as c } from "../../../SelectListbox.module-yzXaWwsm.js";
+const E = ({ option: l, index: t, dividerAfter: u, children: d }) => {
+  const i = y(null), { isOpen: a, activeIndex: e, setActiveIndex: r, selectedValue: n, setSelectedValue: p, setIsOpen: f, options: o } = O(), v = (s) => {
+    p(o[s]), f(!1);
+  }, w = (s) => {
+    switch (s.key) {
       case "Tab":
-        e.preventDefault(), r && n(!1);
+        s.preventDefault(), a && f(!1);
         break;
       case "ArrowDown":
       case "ArrowUp":
-        if (e.preventDefault(), !r)
+        if (s.preventDefault(), !a)
           return;
-        e.key === "ArrowDown" && s < a.length - 1 && c(s + 1), e.key === "ArrowUp" && s > 0 && c(s - 1);
+        s.key === "ArrowDown" && e < o.length - 1 && r(e + 1), s.key === "ArrowUp" && e > 0 && r(e - 1);
         break;
       case "Enter":
-        e.preventDefault(), a != null && a.length && s > -1 && !a[s].disabled && w(s);
+        s.preventDefault(), o?.length && e > -1 && !o[e].disabled && v(e);
         break;
       case "Escape":
-        r && (e.stopPropagation(), n(!1));
+        a && (s.stopPropagation(), f(!1));
         break;
     }
   };
-  return d(() => {
-    var e, b;
-    t === s && (r ? (e = i.current) == null || e.focus() : (b = i.current) == null || b.blur());
-  }, [s, t, r]), d(() => {
-    f.value === l.value && c(t);
-  }, [t, l.value, f.value, c]), /* @__PURE__ */ D(h, { children: [
-    /* @__PURE__ */ m(
+  return m(() => {
+    t === e && (a ? i.current?.focus() : i.current?.blur());
+  }, [e, t, a]), m(() => {
+    n.value === l.value && r(t);
+  }, [t, l.value, n.value, r]), /* @__PURE__ */ k(D, { children: [
+    /* @__PURE__ */ b(
       "li",
       {
-        className: y(o["select-listbox-option"], {
-          [o["select-listbox-option--active"]]: t === s,
-          [o["select-listbox-option--divider"]]: t + 1 === u
+        className: h(c["select-listbox-option"], {
+          [c["select-listbox-option--active"]]: t === e,
+          [c["select-listbox-option--divider"]]: t + 1 === u
         }),
         ...!l.disabled && {
           onClick: () => p(l),
-          onKeyDown: k,
+          onKeyDown: w,
           tabIndex: 0,
           role: "option",
-          "aria-selected": f.value === l.value
+          "aria-selected": n.value === l.value
         },
         ref: i,
-        children: v
+        children: d
       },
       `${l.value}`
     ),
-    t + 1 === u && /* @__PURE__ */ m("div", { className: o["select-listbox-divider"], "aria-hidden": "true" })
+    t + 1 === u && /* @__PURE__ */ b("div", { className: c["select-listbox-divider"], "aria-hidden": "true" })
   ] });
 };
 export {
-  j as SelectOption
+  E 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    switch (event.key) {\n      case 'Tab':\n        event.preventDefault();\n        if (isOpen) {\n          setIsOpen(false);\n        }\n        break;\n      case 'ArrowDown':\n      case 'ArrowUp':\n        event.preventDefault();\n        if (!isOpen) {\n          return;\n        }\n        if (event.key === 'ArrowDown' && activeIndex < options.length - 1) {\n          setActiveIndex(activeIndex + 1);\n        }\n        if (event.key === 'ArrowUp' && activeIndex > 0) {\n          setActiveIndex(activeIndex - 1);\n        }\n        break;\n      case 'Enter':\n        event.preventDefault();\n        if (options?.length && activeIndex > -1 && !options[activeIndex].disabled) {\n          handleSelectOption(activeIndex);\n        }\n        break;\n      case 'Escape':\n        if (isOpen) {\n          event.stopPropagation();\n          setIsOpen(false);\n        }\n        break;\n    }\n  };\n\n  useEffect(() => {\n    if (index === activeIndex) {\n      isOpen ? selectOptionRef.current?.focus() : selectOptionRef.current?.blur();\n    }\n  }, [activeIndex, index, isOpen]);\n\n  useEffect(() => {\n    if (selectedValue.value === option.value) {\n      setActiveIndex(index);\n    }\n  }, [index, option.value, selectedValue.value, setActiveIndex]);\n\n  return (\n    <>\n      <li\n        className={clsx(styles['select-listbox-option'], {\n          [styles['select-listbox-option--active']]: index === activeIndex,\n          [styles['select-listbox-option--divider']]: index + 1 === dividerAfter,\n        })}\n        key={`${option.value}`}\n        {...(!option.disabled && {\n          onClick: () => setSelectedValue(option),\n          onKeyDown: onOptionKeyDown,\n          tabIndex: 0,\n          role: 'option',\n          'aria-selected': selectedValue.value === option.value,\n        })}\n        ref={selectOptionRef}\n      >\n        {children}\n      </li>\n      {index + 1 === dividerAfter && <div className={styles['select-listbox-divider']} aria-hidden=\"true\" />}\n    </>\n  );\n};\n"],"names":["SelectOption","option","index","dividerAfter","children","selectOptionRef","useRef","isOpen","activeIndex","setActiveIndex","selectedValue","setSelectedValue","setIsOpen","options","useSelect","handleSelectOption","aIndex","onOptionKeyDown","event","useEffect","_a","_b","jsxs","Fragment","jsx","clsx","styles"],"mappings":";;;;;AAiBO,MAAMA,IAAe,CAAC,EAAE,QAAAC,GAAQ,OAAAC,GAAO,cAAAC,GAAc,UAAAC,QAAkC;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,EAAA,GAGXK,IAAkB,CAACC,MAAwC;AAC/D,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,KAAA,QAAAA,EAAS,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,EACJ;AAGF,SAAAO,EAAU,MAAM;;AACd,IAAIjB,MAAUM,MACZD,KAASa,IAAAf,EAAgB,YAAhB,QAAAe,EAAyB,WAAUC,IAAAhB,EAAgB,YAAhB,QAAAgB,EAAyB;AAAA,EACvE,GACC,CAACb,GAAaN,GAAOK,CAAM,CAAC,GAE/BY,EAAU,MAAM;AACd,IAAIT,EAAc,UAAUT,EAAO,SACjCQ,EAAeP,CAAK;AAAA,EACtB,GACC,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","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    switch (event.key) {\n      case 'Tab':\n        event.preventDefault();\n        if (isOpen) {\n          setIsOpen(false);\n        }\n        break;\n      case 'ArrowDown':\n      case 'ArrowUp':\n        event.preventDefault();\n        if (!isOpen) {\n          return;\n        }\n        if (event.key === 'ArrowDown' && activeIndex < options.length - 1) {\n          setActiveIndex(activeIndex + 1);\n        }\n        if (event.key === 'ArrowUp' && activeIndex > 0) {\n          setActiveIndex(activeIndex - 1);\n        }\n        break;\n      case 'Enter':\n        event.preventDefault();\n        if (options?.length && activeIndex > -1 && !options[activeIndex].disabled) {\n          handleSelectOption(activeIndex);\n        }\n        break;\n      case 'Escape':\n        if (isOpen) {\n          event.stopPropagation();\n          setIsOpen(false);\n        }\n        break;\n    }\n  };\n\n  useEffect(() => {\n    if (index === activeIndex) {\n      isOpen ? selectOptionRef.current?.focus() : selectOptionRef.current?.blur();\n    }\n  }, [activeIndex, index, isOpen]);\n\n  useEffect(() => {\n    if (selectedValue.value === option.value) {\n      setActiveIndex(index);\n    }\n  }, [index, option.value, selectedValue.value, setActiveIndex]);\n\n  return (\n    <>\n      <li\n        className={clsx(styles['select-listbox-option'], {\n          [styles['select-listbox-option--active']]: index === activeIndex,\n          [styles['select-listbox-option--divider']]: index + 1 === dividerAfter,\n        })}\n        key={`${option.value}`}\n        {...(!option.disabled && {\n          onClick: () => setSelectedValue(option),\n          onKeyDown: onOptionKeyDown,\n          tabIndex: 0,\n          role: 'option',\n          'aria-selected': selectedValue.value === option.value,\n        })}\n        ref={selectOptionRef}\n      >\n        {children}\n      </li>\n      {index + 1 === dividerAfter && <div className={styles['select-listbox-divider']} aria-hidden=\"true\" />}\n    </>\n  );\n};\n"],"names":["SelectOption","option","index","dividerAfter","children","selectOptionRef","useRef","isOpen","activeIndex","setActiveIndex","selectedValue","setSelectedValue","setIsOpen","options","useSelect","handleSelectOption","aIndex","onOptionKeyDown","event","useEffect","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,EAAA,GAGXK,IAAkB,CAACC,MAAwC;AAC/D,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,EACJ;AAGF,SAAAO,EAAU,MAAM;AACd,IAAIjB,MAAUM,MACZD,IAASF,EAAgB,SAAS,MAAA,IAAUA,EAAgB,SAAS,KAAA;AAAA,EACvE,GACC,CAACG,GAAaN,GAAOK,CAAM,CAAC,GAE/BY,EAAU,MAAM;AACd,IAAIT,EAAc,UAAUT,EAAO,SACjCQ,EAAeP,CAAK;AAAA,EACtB,GACC,CAACA,GAAOD,EAAO,OAAOS,EAAc,OAAOD,CAAc,CAAC,GAG3D,gBAAAW,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,GAAGtB,MAAUM;AAAA,UACrD,CAACgB,EAAO,gCAAgC,CAAC,GAAGtB,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,gBAAAmB,EAAC,OAAA,EAAI,WAAWE,EAAO,wBAAwB,GAAG,eAAY,OAAA,CAAO;AAAA,EAAA,GACtG;AAEJ;"}

package/dist/components/Sortable/Sortable.d.ts

@@ -1,16 +1,23 @@
 import { ReactElement } from 'react';
 import { SortableItemProps } from './components/SortableItem';
 export type Index = string | number;
-export interface SortableProps {
+export type SortableItemColors = 'grey-200' | 'white';
+export interface SortableProps<T = unknown> {
     /** The elements to show inside the Sortable. */
     children: ReactElement[] | string[];
+    /** The data objects that are actually being sorted. */
+    childrenData?: T[];
     /** The placement of each item Handle (6 dots 2x3). */
     ItemHandlePlacement?: SortableItemProps['handlePlacement'];
     /** If true, a scrollable version of the list will be rendered (max height 21rem/336px). */
     scrollable?: boolean;
     /** If true, the sorting will be disabled. */
     disabled?: boolean;
+    /** Hide the numbers shown next to the sortable elements. */
+    hideNumbers?: boolean;
+    /** Change the color of the SortableItem wrapper. */
+    sortableItemColor?: SortableItemColors;
     /** The callback function that is invoked when new sorting takes place. */
-    onSort?: (items: (string | ReactElement)[]) => void;
+    onSort?: (items: T[]) => void;
 }
-export declare const Sortable: ({ children, ItemHandlePlacement, scrollable, disabled, onSort }: SortableProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Sortable: <T>({ children, childrenData, ItemHandlePlacement, scrollable, disabled, onSort, hideNumbers, sortableItemColor, }: SortableProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Sortable/Sortable.js

@@ -1,27 +1,42 @@
 import { jsx as o } from "react/jsx-runtime";
-import { Children as e } from "react";
-import { SortableItem as b } from "./components/SortableItem.js";
-import { S as n } from "../../SortableProvider-CwX1lFMa.js";
-const S = ({ children: t, ItemHandlePlacement: m = "left", scrollable: a, disabled: l, onSort: i }) => /* @__PURE__ */ o(
-  n,
-  {
-    items: t,
-    scrollable: a,
-    onSort: i,
-    children: t.map((s, r) => /* @__PURE__ */ o(
-      b,
-      {
-        handlePlacement: m,
-        disabled: l || e.count(t) <= 1,
-        index: r,
-        children: s
-      },
-      `sortable-item-${r}`
-    ))
-  },
-  `sortable-with-children-${e.count(t)}`
-);
+import { Children as a } from "react";
+import { SortableItem as f } from "./components/SortableItem.js";
+import { S as I } from "../../SortableProvider-DisCfTTN.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)}`
+  );
+};
 export {
-  S as Sortable
+  P 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;\n\nexport interface SortableProps {\n  /** The elements to show inside the Sortable. */\n  children: ReactElement[] | string[];\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  /** The callback function that is invoked when new sorting takes place. */\n  onSort?: (items: (string | ReactElement)[]) => void;\n}\n\n// A component that renders a list of children that can be sorted with drag and drop.\nexport const Sortable = ({ children, ItemHandlePlacement = 'left', scrollable, disabled, onSort }: SortableProps) => {\n  return (\n    <SortableProvider\n      items={children}\n      scrollable={scrollable}\n      onSort={onSort}\n      key={`sortable-with-children-${Children.count(children)}`}\n    >\n      {children.map((child, index) => (\n        <SortableItem\n          handlePlacement={ItemHandlePlacement}\n          disabled={disabled || Children.count(children) <= 1}\n          index={index}\n          key={`sortable-item-${index}`}\n        >\n          {child}\n        </SortableItem>\n      ))}\n    </SortableProvider>\n  );\n};\n"],"names":["Sortable","children","ItemHandlePlacement","scrollable","disabled","onSort","jsx","SortableProvider","child","index","SortableItem","Children"],"mappings":";;;;AAwBO,MAAMA,IAAW,CAAC,EAAE,UAAAC,GAAU,qBAAAC,IAAsB,QAAQ,YAAAC,GAAY,UAAAC,GAAU,QAAAC,QAErF,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,OAAON;AAAA,IACP,YAAAE;AAAA,IACA,QAAAE;AAAA,IAGC,UAAAJ,EAAS,IAAI,CAACO,GAAOC,MACpB,gBAAAH;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,iBAAiBR;AAAA,QACjB,UAAUE,KAAYO,EAAS,MAAMV,CAAQ,KAAK;AAAA,QAClD,OAAAQ;AAAA,QAGC,UAAAD;AAAA,MAAA;AAAA,MAFI,iBAAiBC,CAAK;AAAA,IAAA,CAI9B;AAAA,EAAA;AAAA,EAXI,0BAA0BE,EAAS,MAAMV,CAAQ,CAAC;AAAA;"}
+{"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;"}

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

@@ -2,6 +2,6 @@ import { Meta } from '@storybook/react';
 import { SortableProps } from './Sortable';
 declare const _default: Meta<SortableProps>;
 export default _default;
-export declare const SortableExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, SortableProps>;
-export declare const withHandleRight: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, SortableProps>;
-export declare const WithComplexChildren: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, SortableProps>;
+export declare const SortableExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, SortableProps<unknown>>;
+export declare const withHandleRight: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, SortableProps<unknown>>;
+export declare const WithComplexChildren: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, SortableProps<unknown>>;

package/dist/components/Sortable/Sortable.stories.js

@@ -1,14 +1,15 @@
-import { jsx as e, jsxs as m, Fragment as i } from "react/jsx-runtime";
-import { W as s } from "../../index-Di9WPZUe.js";
-import { Sortable as o } from "./Sortable.js";
-import { InputField as c } from "../InputField/InputField.js";
-import { Icon as d } from "../Icon/Icon.js";
-import { Button as p } from "../Buttons/Button.js";
+import { jsx as e, jsxs as i, Fragment as m } from "react/jsx-runtime";
+import { l as s } from "../../index-C2E9FY6V.js";
+import { Sortable as l } from "./Sortable.js";
+import { InputField as d } from "../InputField/InputField.js";
+import { Icon as c } from "../Icon/Icon.js";
+import { Button as b } from "../Buttons/Button.js";
 import "../Buttons/LinkButton.js";
 import "@react-aria/button";
-const b = "<Sortable onSort={onSortFunction} ItemHandlePlacement={ItemHandlePlacement} scrollable={scrollable} disabled={disabled}> {children} </ Sortable>", W = {
+const p = `<Sortable onSort={onSortFunction} ItemHandlePlacement={ItemHandlePlacement} scrollable={scrollable} 
+    disabled={ disabled } hideNumbers={ hideNumbers } sortableItemColor={ sortableItemColor } > { children } </ Sortable > `, F = {
   title: "Organisms/Sortable",
-  component: o,
+  component: l,
   argTypes: {
     children: {
       table: {
@@ -22,32 +23,39 @@ const b = "<Sortable onSort={onSortFunction} ItemHandlePlacement={ItemHandlePlac
     }
   },
   parameters: {
-    inspectComponent: o,
-    codeString: b
+    inspectComponent: l,
+    codeString: p
   }
 }, r = {
   ItemHandlePlacement: "left",
   onSort: s()
-}, n = ["Item-1", "Item-2", "Item-3", "Item-4", "Item-5"], a = (l) => /* @__PURE__ */ e(o, { ...l, children: n }), h = a.bind({});
+}, a = ["Item-1", "Item-2", "Item-3", "Item-4", "Item-5"], n = (o) => /* @__PURE__ */ e(l, { ...o, children: a }), h = n.bind({});
 h.args = {
   ...r
 };
-const I = a.bind({});
+const I = n.bind({});
 I.args = {
   ...r,
   ItemHandlePlacement: "right"
 };
-const f = (l) => /* @__PURE__ */ e(o, { ...l, children: n.map((t) => /* @__PURE__ */ m(i, { children: [
-  /* @__PURE__ */ e("div", { style: { width: "100%" }, children: /* @__PURE__ */ e(c, { id: t, placeholder: t }, t) }),
-  /* @__PURE__ */ e(p, { variant: "blank-icon", children: /* @__PURE__ */ e(d, { name: "Trash", color: "#a0002aff" }) })
-] }, t)) }), g = f.bind({});
-g.args = {
-  ...r
+const u = (o) => /* @__PURE__ */ e(l, { ...o, children: a.map((t) => /* @__PURE__ */ i(m, { children: [
+  /* @__PURE__ */ e("div", { style: { width: "100%" }, children: /* @__PURE__ */ e(d, { id: t, placeholder: t }, t) }),
+  /* @__PURE__ */ e(b, { variant: "blank-icon", children: /* @__PURE__ */ e(c, { name: "Trash", color: "#a0002aff" }) })
+] }, t)) }), f = u.bind({});
+f.args = {
+  ...r,
+  childrenData: [
+    { title: "item-1", value: 1 },
+    { title: "item-2", value: 2 },
+    { title: "item-3", value: 3 },
+    { title: "item-4", value: 4 },
+    { title: "item-5", value: 5 }
+  ]
 };
 export {
   h as SortableExample,
-  g as WithComplexChildren,
-  W as default,
+  f as WithComplexChildren,
+  F as default,
   I as withHandleRight
 };
 //# sourceMappingURL=Sortable.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Sortable.stories.js","sources":["../../../src/components/Sortable/Sortable.stories.tsx"],"sourcesContent":["import { fn } from 'storybook/test';\nimport { Fragment } from 'react/jsx-runtime';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { SortableProps } from './Sortable';\n\nimport { Sortable } from './Sortable';\n\nimport { InputField } from 'components/InputField';\nimport { Icon } from 'components/Icon';\nimport { Button } from 'components/Buttons';\n\nconst codeString =\n  '<Sortable onSort={onSortFunction} ItemHandlePlacement={ItemHandlePlacement} scrollable={scrollable} disabled={disabled}> {children} </ Sortable>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Organisms/Sortable',\n  component: Sortable,\n  argTypes: {\n    children: {\n      table: {\n        disable: true,\n      },\n    },\n    ItemHandlePlacement: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n  parameters: {\n    inspectComponent: Sortable,\n    codeString: codeString,\n  },\n} as Meta<SortableProps>;\n\nconst defaultArgs: Partial<SortableProps> = {\n  ItemHandlePlacement: 'left',\n  onSort: fn(),\n};\n\nconst mockItems = ['Item-1', 'Item-2', 'Item-3', 'Item-4', 'Item-5'];\n\nconst Template: StoryFn<SortableProps> = (args) => <Sortable {...args}>{mockItems}</Sortable>;\n\nexport const SortableExample = Template.bind({});\nSortableExample.args = {\n  ...defaultArgs,\n};\n\nexport const withHandleRight = Template.bind({});\nwithHandleRight.args = {\n  ...defaultArgs,\n  ItemHandlePlacement: 'right',\n};\n\nconst TemplateComplex: StoryFn<SortableProps> = (args) => (\n  <Sortable {...args}>\n    {mockItems.map((item) => (\n      <Fragment key={item}>\n        <div style={{ width: '100%' }}>\n          <InputField key={item} id={item} placeholder={item} />\n        </div>\n        <Button variant=\"blank-icon\">\n          <Icon name=\"Trash\" color=\"#a0002aff\" />\n        </Button>\n      </Fragment>\n    ))}\n  </Sortable>\n);\n\nexport const WithComplexChildren = TemplateComplex.bind({});\nWithComplexChildren.args = {\n  ...defaultArgs,\n};\n"],"names":["codeString","Sortable_stories","Sortable","defaultArgs","fn","mockItems","Template","args","SortableExample","withHandleRight","TemplateComplex","jsx","item","jsxs","Fragment","InputField","Button","Icon","WithComplexChildren"],"mappings":";;;;;;;;AAYA,MAAMA,IACJ,oJAGFC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,IAEF,qBAAqB;AAAA,MACnB,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF;AAAA,EAEF,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAsC;AAAA,EAC1C,qBAAqB;AAAA,EACrB,QAAQC,EAAA;AACV,GAEMC,IAAY,CAAC,UAAU,UAAU,UAAU,UAAU,QAAQ,GAE7DC,IAAmC,CAACC,wBAAUL,GAAA,EAAU,GAAGK,GAAO,UAAAF,GAAU,GAErEG,IAAkBF,EAAS,KAAK,CAAA,CAAE;AAC/CE,EAAgB,OAAO;AAAA,EACrB,GAAGL;AACL;AAEO,MAAMM,IAAkBH,EAAS,KAAK,CAAA,CAAE;AAC/CG,EAAgB,OAAO;AAAA,EACrB,GAAGN;AAAA,EACH,qBAAqB;AACvB;AAEA,MAAMO,IAA0C,CAACH,MAC/C,gBAAAI,EAACT,GAAA,EAAU,GAAGK,GACX,UAAAF,EAAU,IAAI,CAACO,MACd,gBAAAC,EAACC,GAAA,EACC,UAAA;AAAA,EAAA,gBAAAH,EAAC,OAAA,EAAI,OAAO,EAAE,OAAO,OAAA,GACnB,UAAA,gBAAAA,EAACI,GAAA,EAAsB,IAAIH,GAAM,aAAaA,EAAA,GAA7BA,CAAmC,GACtD;AAAA,EACA,gBAAAD,EAACK,GAAA,EAAO,SAAQ,cACd,UAAA,gBAAAL,EAACM,KAAK,MAAK,SAAQ,OAAM,YAAA,CAAY,EAAA,CACvC;AAAA,KANaL,CAOf,CACD,GACH,GAGWM,IAAsBR,EAAgB,KAAK,CAAA,CAAE;AAC1DQ,EAAoB,OAAO;AAAA,EACzB,GAAGf;AACL;"}
+{"version":3,"file":"Sortable.stories.js","sources":["../../../src/components/Sortable/Sortable.stories.tsx"],"sourcesContent":["import { fn } from 'storybook/test';\nimport { Fragment } from 'react/jsx-runtime';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { SortableProps } from './Sortable';\n\nimport { Sortable } from './Sortable';\n\nimport { InputField } from 'components/InputField';\nimport { Icon } from 'components/Icon';\nimport { Button } from 'components/Buttons';\n\nconst codeString = `<Sortable onSort={onSortFunction} ItemHandlePlacement={ItemHandlePlacement} scrollable={scrollable} \n    disabled={ disabled } hideNumbers={ hideNumbers } sortableItemColor={ sortableItemColor } > { children } </ Sortable > `;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Organisms/Sortable',\n  component: Sortable,\n  argTypes: {\n    children: {\n      table: {\n        disable: true,\n      },\n    },\n    ItemHandlePlacement: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n  parameters: {\n    inspectComponent: Sortable,\n    codeString: codeString,\n  },\n} as Meta<SortableProps>;\n\nconst defaultArgs: Partial<SortableProps> = {\n  ItemHandlePlacement: 'left',\n  onSort: fn(),\n};\n\nconst mockItems = ['Item-1', 'Item-2', 'Item-3', 'Item-4', 'Item-5'];\n\nconst Template: StoryFn<SortableProps> = (args) => <Sortable {...args}>{mockItems}</Sortable>;\n\nexport const SortableExample = Template.bind({});\nSortableExample.args = {\n  ...defaultArgs,\n};\n\nexport const withHandleRight = Template.bind({});\nwithHandleRight.args = {\n  ...defaultArgs,\n  ItemHandlePlacement: 'right',\n};\n\nconst TemplateComplex: StoryFn<SortableProps> = (args) => (\n  <Sortable {...args}>\n    {mockItems.map((item) => (\n      <Fragment key={item}>\n        <div style={{ width: '100%' }}>\n          <InputField key={item} id={item} placeholder={item} />\n        </div>\n        <Button variant=\"blank-icon\">\n          <Icon name=\"Trash\" color=\"#a0002aff\" />\n        </Button>\n      </Fragment>\n    ))}\n  </Sortable>\n);\n\nexport const WithComplexChildren = TemplateComplex.bind({});\nWithComplexChildren.args = {\n  ...defaultArgs,\n  childrenData: [\n    { title: 'item-1', value: 1 },\n    { title: 'item-2', value: 2 },\n    { title: 'item-3', value: 3 },\n    { title: 'item-4', value: 4 },\n    { title: 'item-5', value: 5 },\n  ],\n};\n"],"names":["codeString","Sortable_stories","Sortable","defaultArgs","fn","mockItems","Template","args","SortableExample","withHandleRight","TemplateComplex","jsx","item","jsxs","Fragment","InputField","Button","Icon","WithComplexChildren"],"mappings":";;;;;;;;AAYA,MAAMA,IAAa;AAAA,8HAInBC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,IAEF,qBAAqB;AAAA,MACnB,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF;AAAA,EAEF,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAsC;AAAA,EAC1C,qBAAqB;AAAA,EACrB,QAAQC,EAAA;AACV,GAEMC,IAAY,CAAC,UAAU,UAAU,UAAU,UAAU,QAAQ,GAE7DC,IAAmC,CAACC,wBAAUL,GAAA,EAAU,GAAGK,GAAO,UAAAF,GAAU,GAErEG,IAAkBF,EAAS,KAAK,CAAA,CAAE;AAC/CE,EAAgB,OAAO;AAAA,EACrB,GAAGL;AACL;AAEO,MAAMM,IAAkBH,EAAS,KAAK,CAAA,CAAE;AAC/CG,EAAgB,OAAO;AAAA,EACrB,GAAGN;AAAA,EACH,qBAAqB;AACvB;AAEA,MAAMO,IAA0C,CAACH,MAC/C,gBAAAI,EAACT,GAAA,EAAU,GAAGK,GACX,UAAAF,EAAU,IAAI,CAACO,MACd,gBAAAC,EAACC,GAAA,EACC,UAAA;AAAA,EAAA,gBAAAH,EAAC,OAAA,EAAI,OAAO,EAAE,OAAO,OAAA,GACnB,UAAA,gBAAAA,EAACI,GAAA,EAAsB,IAAIH,GAAM,aAAaA,EAAA,GAA7BA,CAAmC,GACtD;AAAA,EACA,gBAAAD,EAACK,GAAA,EAAO,SAAQ,cACd,UAAA,gBAAAL,EAACM,KAAK,MAAK,SAAQ,OAAM,YAAA,CAAY,EAAA,CACvC;AAAA,KANaL,CAOf,CACD,GACH,GAGWM,IAAsBR,EAAgB,KAAK,CAAA,CAAE;AAC1DQ,EAAoB,OAAO;AAAA,EACzB,GAAGf;AAAA,EACH,cAAc;AAAA,IACZ,EAAE,OAAO,UAAU,OAAO,EAAA;AAAA,IAC1B,EAAE,OAAO,UAAU,OAAO,EAAA;AAAA,IAC1B,EAAE,OAAO,UAAU,OAAO,EAAA;AAAA,IAC1B,EAAE,OAAO,UAAU,OAAO,EAAA;AAAA,IAC1B,EAAE,OAAO,UAAU,OAAO,EAAA;AAAA,EAAE;AAEhC;"}

package/dist/components/Sortable/SortableProvider.d.ts

@@ -1,5 +1,6 @@
-import { ReactElement } from 'react';
+import { ReactElement, ReactNode } from 'react';
 import { SortableStateType } from './sortableReducer';
+import { SortableItem, SortableItemProps } from './components/SortableItem';
 type SortableContextType = {
     clearDraggingSource: () => void;
     clearDraggingTarget: () => void;
@@ -12,12 +13,15 @@ type SortableContextType = {
     setDraggingSource: (index: number) => void;
     setDraggingTarget: (index: number) => void;
 };
-interface Props {
-    children: SortableStateType['sortableItems'];
-    items: ReactElement[] | string[];
+type SortableItems = ReactElement<SortableItemProps, typeof SortableItem>[];
+interface Props<T = unknown> {
+    renderItems: SortableItems;
+    dataItems: T[];
     scrollable?: boolean;
-    onSort?: (items: (string | ReactElement)[]) => void;
+    hideNumbers?: boolean;
+    onSort?: (items: T[]) => void;
+    children?: ReactNode;
 }
-export declare function SortableProvider({ children, items, scrollable, onSort }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function SortableProvider<T>({ renderItems, dataItems, scrollable, hideNumbers, onSort }: Props<T>): import("react/jsx-runtime").JSX.Element;
 export declare function useSortable(): SortableContextType & SortableStateType;
 export {};

package/dist/components/Sortable/SortableProvider.js

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
 import "react";
 import "./sortableReducer.js";
-import { S as p, u as a } from "../../SortableProvider-CwX1lFMa.js";
+import { S as p, u as a } from "../../SortableProvider-DisCfTTN.js";
 import "./actions.js";
 export {
   p as SortableProvider,

package/dist/components/Sortable/components/SortableContainer.d.ts

@@ -1,7 +1,8 @@
 export type OnSort = (indices: number[]) => void;
 interface SortableContainerProps {
     scrollable?: boolean;
+    hideNumbers?: boolean;
     onSort?: OnSort;
 }
-export declare function SortableContainer({ scrollable, onSort }: SortableContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare function SortableContainer({ scrollable, hideNumbers, onSort }: SortableContainerProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Sortable/components/SortableContainer.js

@@ -1,8 +1,8 @@
 import "react/jsx-runtime";
 import "react";
 import "../../../clsx-OuTLNxxd.js";
-import "../../../Sortable.module-CekPNg54.js";
-import { a } from "../../../SortableProvider-CwX1lFMa.js";
+import "../../../Sortable.module--kgnzOjW.js";
+import { a } from "../../../SortableProvider-DisCfTTN.js";
 export {
   a as SortableContainer
 };

package/dist/components/Sortable/components/SortableHandle.js

@@ -1,6 +1,6 @@
 import { jsx as o } from "react/jsx-runtime";
 import { Icon as e } from "../../Icon/Icon.js";
-import { s as t } from "../../../Sortable.module-CekPNg54.js";
+import { s as t } from "../../../Sortable.module--kgnzOjW.js";
 const r = "ontouchstart" in globalThis.document.documentElement;
 function m({ placement: n }) {
   return r ? null : /* @__PURE__ */ o("div", { className: `${t.sortable__handle} ${t[`sortable__handle--${n}`]}`, children: /* @__PURE__ */ o(e, { name: "Dots" }) });

package/dist/components/Sortable/components/SortableItem.d.ts

@@ -1,9 +1,11 @@
 import { ReactNode } from 'react';
 import { SortableHandleProps } from './SortableHandle';
+import { SortableItemColors } from 'components/Sortable/Sortable';
 export interface SortableItemProps {
     children: ReactNode;
     handlePlacement: SortableHandleProps['placement'];
     disabled?: boolean;
+    sortableItemColor: SortableItemColors;
     index: number;
 }
-export declare function SortableItem({ children, handlePlacement, disabled, index }: SortableItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function SortableItem({ children, handlePlacement, disabled, sortableItemColor, index }: SortableItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Sortable/components/SortableItem.js

@@ -1,67 +1,68 @@
 import { jsxs as i, jsx as r, Fragment as v } from "react/jsx-runtime";
-import { useState as S, useRef as M, useEffect as Q } from "react";
+import { useState as S, useRef as Q, useEffect as k } from "react";
+import { c as G } from "../../../clsx-OuTLNxxd.js";
 import { Icon as w } from "../../Icon/Icon.js";
 import { SortableHandle as E } from "./SortableHandle.js";
-import { s as t } from "../../../Sortable.module-CekPNg54.js";
-import { u as k } from "../../../SortableProvider-CwX1lFMa.js";
-const G = ["Space", "ArrowDown", "ArrowUp"], J = "ontouchstart" in globalThis.document.documentElement, C = new Image(0, 0);
+import { s as e } from "../../../Sortable.module--kgnzOjW.js";
+import { u as J } from "../../../SortableProvider-DisCfTTN.js";
+const j = ["Space", "ArrowDown", "ArrowUp"], F = "ontouchstart" in globalThis.document.documentElement, C = new Image(0, 0);
 C.src = // 1px transparent png
 "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==";
-function L({ children: D, handlePlacement: u, disabled: _, index: e }) {
+function q({ children: D, handlePlacement: m, disabled: g, sortableItemColor: N, index: t }) {
   const {
     clone: h,
-    dragEnd: m,
+    dragEnd: u,
     draggingSource: c,
     draggingTarget: f,
-    dragStart: g,
-    drop: N,
+    dragStart: _,
+    drop: T,
     maxIndex: p,
-    moveToPosition: T,
-    setClone: I,
-    setDraggingSource: U
-  } = k(), [$, A] = S(!1), [y, d] = S(!1), n = M(null), s = e !== void 0 && e >= 0;
-  Q(() => {
-    n.current && globalThis.document.activeElement !== n.current && (e === f && f === c ? (n.current.focus(), d(!0)) : d(!1));
-  }, [e, f, c, U]);
-  function K(a) {
+    moveToPosition: I,
+    setClone: U,
+    setDraggingSource: $
+  } = J(), [y, A] = S(!1), [K, d] = S(!1), n = Q(null), s = t !== void 0 && t >= 0;
+  k(() => {
+    n.current && globalThis.document.activeElement !== n.current && (t === f && f === c ? (n.current.focus(), d(!0)) : d(!1));
+  }, [t, f, c, $]);
+  function R(a) {
     if (a.stopPropagation(), a.dataTransfer.effectAllowed = "move", a.dataTransfer.setDragImage(C, 0, 0), n.current) {
       const o = n.current.cloneNode(!0);
-      o.classList.add(t["sortable__sort-item--ghost"]), I(o);
+      o.classList.add(e["sortable__sort-item--ghost"]), U(o);
     }
-    s && g(e), A(!0);
+    s && _(t), A(!0);
   }
-  function R() {
-    $ || (h && document.body.removeChild(h), A(!1), m());
+  function B() {
+    y || (h && document.body.removeChild(h), A(!1), u());
   }
-  function B(a) {
+  function M(a) {
     const { code: o } = a;
     if (o === "Tab" && c !== void 0) {
-      m();
+      u();
       return;
     }
-    if (G.includes(o) === !1 || !s) return;
+    if (j.includes(o) === !1 || !s) return;
     if (o === "Space") {
-      y ? (d(!1), m()) : (d(!0), g(e));
+      K ? (d(!1), u()) : (d(!0), _(t));
       return;
     }
     if (c === void 0) return;
-    const l = o === "ArrowUp" ? e - 1 : e + 1;
-    l < 0 || l > p || T(l);
+    const l = o === "ArrowUp" ? t - 1 : t + 1;
+    l < 0 || l > p || I(l);
   }
   function b(a) {
     if (a.preventDefault(), !s) return;
-    g(e);
-    const { direction: o } = a.currentTarget.dataset, l = o === "up" ? e - 1 : e + 1;
-    N(l);
+    _(t);
+    const { direction: o } = a.currentTarget.dataset, l = o === "up" ? t - 1 : t + 1;
+    T(l);
   }
   return /* @__PURE__ */ i(
     "div",
     {
-      className: t["sortable__sort-item"],
-      draggable: !_,
-      onDragEnd: R,
-      onDragStart: K,
-      onKeyUpCapture: B,
+      className: G(e["sortable__sort-item"], e[`sortable__sort-item--${N}`]),
+      draggable: !g,
+      onDragEnd: B,
+      onDragStart: R,
+      onKeyUpCapture: M,
       ref: n,
       role: "presentation",
       tabIndex: 0,
@@ -69,36 +70,36 @@ function L({ children: D, handlePlacement: u, disabled: _, index: e }) {
         /* @__PURE__ */ i(
           "div",
           {
-            className: `${t["sortable__sort-item__contents"]} ${t[`sortable__sort-item__contents--handle-${u}`]}`,
+            className: `${e["sortable__sort-item__contents"]} ${e[`sortable__sort-item__contents--handle-${m}`]}`,
             children: [
-              u === "left" && /* @__PURE__ */ r(E, { placement: "left" }),
+              m === "left" && /* @__PURE__ */ r(E, { placement: "left" }),
               D,
-              u === "right" && /* @__PURE__ */ r(E, { placement: "right" })
+              m === "right" && /* @__PURE__ */ r(E, { placement: "right" })
             ]
           }
         ),
-        /* @__PURE__ */ r("div", { className: t["sortable__sort-item__button-container"], "data-touch": J, children: !_ && s && /* @__PURE__ */ r(v, { children: s && /* @__PURE__ */ i(v, { children: [
-          e > 0 && /* @__PURE__ */ i(
+        /* @__PURE__ */ r("div", { className: e["sortable__sort-item__button-container"], "data-touch": F, children: !g && s && /* @__PURE__ */ r(v, { children: s && /* @__PURE__ */ i(v, { children: [
+          t > 0 && /* @__PURE__ */ i(
             "button",
             {
-              className: `${t["sortable__sort-item__handle"]} ${t["sortable__sort-item__handle--up"]}`,
+              className: `${e["sortable__sort-item__handle"]} ${e["sortable__sort-item__handle--up"]}`,
               "data-direction": "up",
               onClickCapture: b,
               children: [
-                /* @__PURE__ */ r("div", { className: t["sortable__sort-item__handle--icon"], children: /* @__PURE__ */ r(w, { name: "CheveronDown" }) }),
-                /* @__PURE__ */ r("span", { className: t["sortable__visually-hidden"], children: "Move up" })
+                /* @__PURE__ */ r("div", { className: e["sortable__sort-item__handle--icon"], children: /* @__PURE__ */ r(w, { name: "CheveronDown" }) }),
+                /* @__PURE__ */ r("span", { className: e["sortable__visually-hidden"], children: "Move up" })
               ]
             }
           ),
-          e < p && /* @__PURE__ */ i(
+          t < p && /* @__PURE__ */ i(
             "button",
             {
-              className: `${t["sortable__sort-item__handle"]} ${t["sortable__sort-item__handle--down"]}`,
+              className: `${e["sortable__sort-item__handle"]} ${e["sortable__sort-item__handle--down"]}`,
               "data-direction": "down",
               onClickCapture: b,
               children: [
-                /* @__PURE__ */ r("div", { className: t["sortable__sort-item__handle--icon"], children: /* @__PURE__ */ r(w, { name: "CheveronDown" }) }),
-                /* @__PURE__ */ r("span", { className: t["sortable__visually-hidden"], children: "Move down" })
+                /* @__PURE__ */ r("div", { className: e["sortable__sort-item__handle--icon"], children: /* @__PURE__ */ r(w, { name: "CheveronDown" }) }),
+                /* @__PURE__ */ r("span", { className: e["sortable__visually-hidden"], children: "Move down" })
               ]
             }
           )
@@ -108,6 +109,6 @@ function L({ children: D, handlePlacement: u, disabled: _, index: e }) {
   );
 }
 export {
-  L as SortableItem
+  q as SortableItem
 };
 //# sourceMappingURL=SortableItem.js.map