@gusto/embedded-react-sdk 0.7.0 → 0.8.1

package/dist/components/Common/PaginationControl/PaginationControl.js

@@ -0,0 +1,86 @@
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useState as b } from "react";
+import { useTranslation as f } from "react-i18next";
+import { Flex as v } from "../Flex/Flex.js";
+import e from "./PaginationControl.module.scss.js";
+import { useComponentContext as s } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import h from "../../../assets/icons/pagination_first.svg.js";
+import x from "../../../assets/icons/pagination_previous.svg.js";
+import S from "../../../assets/icons/pagination_next.svg.js";
+import N from "../../../assets/icons/pagination_last.svg.js";
+const P = ({
+  currentPage: o,
+  totalPages: i,
+  handleFirstPage: c,
+  handlePreviousPage: m,
+  handleNextPage: p,
+  handleLastPage: d,
+  handleItemsPerPageChange: u
+}) => {
+  const { t } = f("common"), a = s(), [g, C] = b("5");
+  return i < 2 ? null : /* @__PURE__ */ n("section", { className: e.paginationControl, "data-testid": "pagination-control", children: /* @__PURE__ */ r(v, { justifyContent: "space-between", alignItems: "center", children: [
+    /* @__PURE__ */ n("div", { className: e.paginationControlCount, children: /* @__PURE__ */ n("section", { children: /* @__PURE__ */ n(
+      a.Select,
+      {
+        label: t("labels.paginationControllCountLabel"),
+        shouldVisuallyHideLabel: !0,
+        value: g,
+        onChange: (l) => {
+          C(l), u(Number(l));
+        },
+        options: [
+          { value: "5", label: "5" },
+          { value: "10", label: "10" },
+          { value: "50", label: "50" }
+        ]
+      }
+    ) }) }),
+    /* @__PURE__ */ r("div", { className: e.paginationControlButtons, children: [
+      /* @__PURE__ */ n(
+        a.ButtonIcon,
+        {
+          "aria-label": t("icons.paginationFirst"),
+          isDisabled: o === 1,
+          onClick: c,
+          children: /* @__PURE__ */ n(h, {})
+        }
+      ),
+      /* @__PURE__ */ n(
+        a.ButtonIcon,
+        {
+          "aria-label": t("icons.paginationPrev"),
+          "data-testid": "pagination-previous",
+          isDisabled: o === 1,
+          onClick: m,
+          children: /* @__PURE__ */ n(x, {})
+        }
+      ),
+      /* @__PURE__ */ n(
+        a.ButtonIcon,
+        {
+          "aria-label": t("icons.paginationNext"),
+          "data-testid": "pagination-next",
+          isDisabled: o === i,
+          onClick: p,
+          children: /* @__PURE__ */ n(S, {})
+        }
+      ),
+      /* @__PURE__ */ n(
+        a.ButtonIcon,
+        {
+          "aria-label": t("icons.paginationLast"),
+          isDisabled: o === i,
+          onClick: d,
+          children: /* @__PURE__ */ n(N, {})
+        }
+      )
+    ] })
+  ] }) });
+}, H = (o) => {
+  const i = s();
+  return i.PaginationControl ? /* @__PURE__ */ n(i.PaginationControl, { ...o }) : /* @__PURE__ */ n(P, { ...o });
+};
+export {
+  H as PaginationControl
+};
+//# sourceMappingURL=PaginationControl.js.map

package/dist/components/Common/PaginationControl/PaginationControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginationControl.js","sources":["../../../../src/components/Common/PaginationControl/PaginationControl.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { Flex } from '../Flex/Flex'\nimport style from './PaginationControl.module.scss'\nimport type { PaginationControlProps } from './PaginationControlTypes'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport PaginationFirstIcon from '@/assets/icons/pagination_first.svg?react'\nimport PaginationPrevIcon from '@/assets/icons/pagination_previous.svg?react'\nimport PaginationNextIcon from '@/assets/icons/pagination_next.svg?react'\nimport PaginationLastIcon from '@/assets/icons/pagination_last.svg?react'\n\nconst DefaultPaginationControl = ({\n  currentPage,\n  totalPages,\n  handleFirstPage,\n  handlePreviousPage,\n  handleNextPage,\n  handleLastPage,\n  handleItemsPerPageChange,\n}: PaginationControlProps) => {\n  const { t } = useTranslation('common')\n  const Components = useComponentContext()\n  const [pageSize, setPageSize] = useState('5')\n\n  if (totalPages < 2) {\n    return null\n  }\n  return (\n    <section className={style.paginationControl} data-testid=\"pagination-control\">\n      <Flex justifyContent=\"space-between\" alignItems=\"center\">\n        <div className={style.paginationControlCount}>\n          <section>\n            <Components.Select\n              label={t('labels.paginationControllCountLabel')}\n              shouldVisuallyHideLabel\n              value={pageSize}\n              onChange={n => {\n                setPageSize(n)\n                handleItemsPerPageChange(Number(n))\n              }}\n              options={[\n                { value: '5', label: '5' },\n                { value: '10', label: '10' },\n                { value: '50', label: '50' },\n              ]}\n            />\n          </section>\n        </div>\n        <div className={style.paginationControlButtons}>\n          <Components.ButtonIcon\n            aria-label={t('icons.paginationFirst')}\n            isDisabled={currentPage === 1}\n            onClick={handleFirstPage}\n          >\n            <PaginationFirstIcon />\n          </Components.ButtonIcon>\n          <Components.ButtonIcon\n            aria-label={t('icons.paginationPrev')}\n            data-testid=\"pagination-previous\"\n            isDisabled={currentPage === 1}\n            onClick={handlePreviousPage}\n          >\n            <PaginationPrevIcon />\n          </Components.ButtonIcon>\n          <Components.ButtonIcon\n            aria-label={t('icons.paginationNext')}\n            data-testid=\"pagination-next\"\n            isDisabled={currentPage === totalPages}\n            onClick={handleNextPage}\n          >\n            <PaginationNextIcon />\n          </Components.ButtonIcon>\n          <Components.ButtonIcon\n            aria-label={t('icons.paginationLast')}\n            isDisabled={currentPage === totalPages}\n            onClick={handleLastPage}\n          >\n            <PaginationLastIcon />\n          </Components.ButtonIcon>\n        </div>\n      </Flex>\n    </section>\n  )\n}\n\nexport const PaginationControl = (props: PaginationControlProps) => {\n  const Components = useComponentContext()\n\n  return Components.PaginationControl ? (\n    <Components.PaginationControl {...props} />\n  ) : (\n    <DefaultPaginationControl {...props} />\n  )\n}\n"],"names":["DefaultPaginationControl","currentPage","totalPages","handleFirstPage","handlePreviousPage","handleNextPage","handleLastPage","handleItemsPerPageChange","useTranslation","Components","useComponentContext","pageSize","setPageSize","useState","jsx","style","jsxs","Flex","n","PaginationFirstIcon","PaginationPrevIcon","PaginationNextIcon","PaginationLastIcon","PaginationControl","props"],"mappings":";;;;;;;;;;AAWA,MAAMA,IAA2B,CAAC;AAAA,EAChC,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,0BAAAC;AACF,MAA8B;AAC5B,QAAM,EAAE,EAAA,IAAMC,EAAe,QAAQ,GAC/BC,IAAaC,EAAoB,GACjC,CAACC,GAAUC,CAAW,IAAIC,EAAS,GAAG;AAE5C,SAAIX,IAAa,IACR,OAGN,gBAAAY,EAAA,WAAA,EAAQ,WAAWC,EAAM,mBAAmB,eAAY,sBACvD,UAAA,gBAAAC,EAACC,GAAK,EAAA,gBAAe,iBAAgB,YAAW,UAC9C,UAAA;AAAA,IAAA,gBAAAH,EAAC,OAAI,EAAA,WAAWC,EAAM,wBACpB,4BAAC,WACC,EAAA,UAAA,gBAAAD;AAAA,MAACL,EAAW;AAAA,MAAX;AAAA,QACC,OAAO,EAAE,qCAAqC;AAAA,QAC9C,yBAAuB;AAAA,QACvB,OAAOE;AAAA,QACP,UAAU,CAAKO,MAAA;AACb,UAAAN,EAAYM,CAAC,GACYX,EAAA,OAAOW,CAAC,CAAC;AAAA,QACpC;AAAA,QACA,SAAS;AAAA,UACP,EAAE,OAAO,KAAK,OAAO,IAAI;AAAA,UACzB,EAAE,OAAO,MAAM,OAAO,KAAK;AAAA,UAC3B,EAAE,OAAO,MAAM,OAAO,KAAK;AAAA,QAAA;AAAA,MAC7B;AAAA,OAEJ,EACF,CAAA;AAAA,IACC,gBAAAF,EAAA,OAAA,EAAI,WAAWD,EAAM,0BACpB,UAAA;AAAA,MAAA,gBAAAD;AAAA,QAACL,EAAW;AAAA,QAAX;AAAA,UACC,cAAY,EAAE,uBAAuB;AAAA,UACrC,YAAYR,MAAgB;AAAA,UAC5B,SAASE;AAAA,UAET,4BAACgB,GAAoB,CAAA,CAAA;AAAA,QAAA;AAAA,MACvB;AAAA,MACA,gBAAAL;AAAA,QAACL,EAAW;AAAA,QAAX;AAAA,UACC,cAAY,EAAE,sBAAsB;AAAA,UACpC,eAAY;AAAA,UACZ,YAAYR,MAAgB;AAAA,UAC5B,SAASG;AAAA,UAET,4BAACgB,GAAmB,CAAA,CAAA;AAAA,QAAA;AAAA,MACtB;AAAA,MACA,gBAAAN;AAAA,QAACL,EAAW;AAAA,QAAX;AAAA,UACC,cAAY,EAAE,sBAAsB;AAAA,UACpC,eAAY;AAAA,UACZ,YAAYR,MAAgBC;AAAA,UAC5B,SAASG;AAAA,UAET,4BAACgB,GAAmB,CAAA,CAAA;AAAA,QAAA;AAAA,MACtB;AAAA,MACA,gBAAAP;AAAA,QAACL,EAAW;AAAA,QAAX;AAAA,UACC,cAAY,EAAE,sBAAsB;AAAA,UACpC,YAAYR,MAAgBC;AAAA,UAC5B,SAASI;AAAA,UAET,4BAACgB,GAAmB,CAAA,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACtB,EACF,CAAA;AAAA,EAAA,EAAA,CACF,EACF,CAAA;AAEJ,GAEaC,IAAoB,CAACC,MAAkC;AAClE,QAAMf,IAAaC,EAAoB;AAEvC,SAAOD,EAAW,oBACf,gBAAAK,EAAAL,EAAW,mBAAX,EAA8B,GAAGe,EAAA,CAAO,IAEzC,gBAAAV,EAACd,GAA0B,EAAA,GAAGwB,EAAO,CAAA;AAEzC;"}

package/dist/components/Common/PaginationControl/PaginationControl.module.scss.js

@@ -0,0 +1,12 @@
+const o = "_paginationControl_18z1t_1", n = "_paginationControlCount_18z1t_7", t = "_paginationControlButtons_18z1t_12", a = {
+  paginationControl: o,
+  paginationControlCount: n,
+  paginationControlButtons: t
+};
+export {
+  a as default,
+  o as paginationControl,
+  t as paginationControlButtons,
+  n as paginationControlCount
+};
+//# sourceMappingURL=PaginationControl.module.scss.js.map

package/dist/components/Common/PaginationControl/PaginationControl.module.scss.js.map

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

package/dist/components/Common/PaginationControl/PaginationControlTypes.d.ts

@@ -0,0 +1,9 @@
+export type PaginationControlProps = {
+    handleFirstPage: () => void;
+    handlePreviousPage: () => void;
+    handleNextPage: () => void;
+    handleLastPage: () => void;
+    handleItemsPerPageChange: (n: number) => void;
+    currentPage: number;
+    totalPages: number;
+};

package/dist/components/Common/PaginationControl/index.d.ts

@@ -0,0 +1,2 @@
+export { PaginationControl } from './PaginationControl';
+export type { PaginationControlProps } from './PaginationControlTypes';

package/dist/components/Common/ReorderableList/DropZone.d.ts

@@ -0,0 +1,11 @@
+interface DropZoneProps {
+    position: number;
+    isActive: boolean;
+    onActivate: () => void;
+    onDeactivate: () => void;
+    onDrop: (fromPosition: number) => void;
+    listId: string;
+    className?: string;
+}
+export declare const DropZone: import('react').NamedExoticComponent<DropZoneProps>;
+export {};

package/dist/components/Common/ReorderableList/DropZone.js

@@ -0,0 +1,62 @@
+import { jsx as p } from "react/jsx-runtime";
+import { memo as H, useRef as l, useEffect as T } from "react";
+import b from "classnames";
+import { useDrop as C } from "react-dnd";
+import { useTranslation as E } from "react-i18next";
+import i from "./ReorderableList.module.scss.js";
+import { ITEM_TYPE as N } from "./constants.js";
+const Y = H(function({
+  position: n,
+  isActive: o,
+  onActivate: a,
+  onDeactivate: u,
+  onDrop: d,
+  listId: t,
+  className: h
+}) {
+  const s = l(null), { t: g } = E(), e = l(null), f = l(!1), [{ isOver: c }, m] = C(
+    () => ({
+      accept: N,
+      hover: (r, x) => {
+        r.listId !== t || !x.getClientOffset() || !s.current || f.current || (f.current = !0, e.current && clearTimeout(e.current), a());
+      },
+      collect: (r) => ({
+        isOver: !!r.isOver()
+      }),
+      drop: (r) => {
+        if (r.listId === t)
+          return u(), d(r.index), { dropped: !0 };
+      },
+      canDrop: (r) => r.listId !== t ? !1 : r.index !== n && r.index !== n - 1
+    }),
+    [t, a, u, d, n]
+  );
+  T(() => {
+    s.current && m(s.current);
+  }, [m]), T(() => (!c && o && (e.current && clearTimeout(e.current), e.current = setTimeout(() => {
+    f.current = !1, u(), e.current = null;
+  }, 100)), () => {
+    e.current && clearTimeout(e.current);
+  }), [c, o, u]);
+  const O = o || c, Z = b(
+    i.dropZone,
+    o || c ? i.activeDropZone : "",
+    O ? i.isHighlighted : "",
+    h
+  );
+  return /* @__PURE__ */ p("div", { className: i.dropZoneContainer, children: /* @__PURE__ */ p(
+    "div",
+    {
+      ref: s,
+      className: Z,
+      "data-position": n,
+      "data-list-id": t,
+      "aria-hidden": "true",
+      "aria-label": g("reorderableList.dropItemHere")
+    }
+  ) });
+});
+export {
+  Y as DropZone
+};
+//# sourceMappingURL=DropZone.js.map

package/dist/components/Common/ReorderableList/DropZone.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropZone.js","sources":["../../../../src/components/Common/ReorderableList/DropZone.tsx"],"sourcesContent":["import { useRef, useEffect, memo } from 'react'\nimport classnames from 'classnames'\nimport { useDrop } from 'react-dnd'\nimport { useTranslation } from 'react-i18next'\nimport styles from './ReorderableList.module.scss'\nimport { ITEM_TYPE } from './constants'\n\ninterface DropZoneProps {\n  position: number\n  isActive: boolean\n  onActivate: () => void\n  onDeactivate: () => void\n  onDrop: (fromPosition: number) => void\n  listId: string\n  className?: string\n}\n\nexport const DropZone = memo(function DropZone({\n  position,\n  isActive,\n  onActivate,\n  onDeactivate,\n  onDrop,\n  listId,\n  className,\n}: DropZoneProps) {\n  const ref = useRef<HTMLDivElement>(null)\n  const { t } = useTranslation()\n\n  // Add a debounce timer for hover state changes to prevent flickering\n  const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)\n  const isHoveringRef = useRef(false)\n\n  const [{ isOver }, drop] = useDrop(\n    () => ({\n      accept: ITEM_TYPE,\n      hover: (item: { index: number; listId: string }, monitor) => {\n        if (item.listId !== listId) return\n\n        const clientOffset = monitor.getClientOffset()\n        if (!clientOffset || !ref.current) return\n\n        if (isHoveringRef.current) return\n\n        isHoveringRef.current = true\n\n        if (debounceTimerRef.current) {\n          clearTimeout(debounceTimerRef.current)\n        }\n\n        onActivate()\n      },\n      collect: monitor => ({\n        isOver: !!monitor.isOver(),\n      }),\n      drop: (item: { index: number; listId: string }) => {\n        if (item.listId !== listId) return\n        onDeactivate()\n        onDrop(item.index)\n        return { dropped: true }\n      },\n      canDrop: (item: { index: number; listId: string }) => {\n        if (item.listId !== listId) return false\n        return item.index !== position && item.index !== position - 1\n      },\n    }),\n    [listId, onActivate, onDeactivate, onDrop, position],\n  )\n\n  // Connect the drop ref to the DOM element\n  useEffect(() => {\n    if (ref.current) {\n      drop(ref.current)\n    }\n  }, [drop])\n\n  // Handle deactivation when item is no longer being hovered\n  useEffect(() => {\n    if (!isOver && isActive) {\n      if (debounceTimerRef.current) {\n        clearTimeout(debounceTimerRef.current)\n      }\n\n      debounceTimerRef.current = setTimeout(() => {\n        isHoveringRef.current = false\n        onDeactivate()\n        debounceTimerRef.current = null\n      }, 100)\n    }\n\n    return () => {\n      if (debounceTimerRef.current) {\n        clearTimeout(debounceTimerRef.current)\n      }\n    }\n  }, [isOver, isActive, onDeactivate])\n\n  const isHighlighted = isActive || isOver\n\n  const dropZoneClass = classnames(\n    styles.dropZone,\n    isActive || isOver ? styles.activeDropZone : '',\n    isHighlighted ? styles.isHighlighted : '',\n    className,\n  )\n\n  return (\n    <div className={styles.dropZoneContainer}>\n      <div\n        ref={ref}\n        className={dropZoneClass}\n        data-position={position}\n        data-list-id={listId}\n        aria-hidden=\"true\"\n        aria-label={t('reorderableList.dropItemHere')}\n      />\n    </div>\n  )\n})\n"],"names":["DropZone","memo","position","isActive","onActivate","onDeactivate","onDrop","listId","className","ref","useRef","t","useTranslation","debounceTimerRef","isHoveringRef","isOver","drop","useDrop","ITEM_TYPE","item","monitor","useEffect","isHighlighted","dropZoneClass","classnames","styles","jsx"],"mappings":";;;;;;;AAiBa,MAAAA,IAAWC,EAAK,SAAkB;AAAA,EAC7C,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,cAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AACF,GAAkB;AACV,QAAAC,IAAMC,EAAuB,IAAI,GACjC,EAAE,GAAAC,EAAE,IAAIC,EAAe,GAGvBC,IAAmBH,EAA6C,IAAI,GACpEI,IAAgBJ,EAAO,EAAK,GAE5B,CAAC,EAAE,QAAAK,KAAUC,CAAI,IAAIC;AAAA,IACzB,OAAO;AAAA,MACL,QAAQC;AAAA,MACR,OAAO,CAACC,GAAyCC,MAAY;AAI3D,QAHID,EAAK,WAAWZ,KAGhB,CADiBa,EAAQ,gBAAgB,KACxB,CAACX,EAAI,WAEtBK,EAAc,YAElBA,EAAc,UAAU,IAEpBD,EAAiB,WACnB,aAAaA,EAAiB,OAAO,GAG5BT,EAAA;AAAA,MACb;AAAA,MACA,SAAS,CAAYgB,OAAA;AAAA,QACnB,QAAQ,CAAC,CAACA,EAAQ,OAAO;AAAA,MAAA;AAAA,MAE3B,MAAM,CAACD,MAA4C;AAC7C,YAAAA,EAAK,WAAWZ;AACP,iBAAAF,EAAA,GACbC,EAAOa,EAAK,KAAK,GACV,EAAE,SAAS,GAAK;AAAA,MACzB;AAAA,MACA,SAAS,CAACA,MACJA,EAAK,WAAWZ,IAAe,KAC5BY,EAAK,UAAUjB,KAAYiB,EAAK,UAAUjB,IAAW;AAAA,IAC9D;AAAA,IAEF,CAACK,GAAQH,GAAYC,GAAcC,GAAQJ,CAAQ;AAAA,EACrD;AAGA,EAAAmB,EAAU,MAAM;AACd,IAAIZ,EAAI,WACNO,EAAKP,EAAI,OAAO;AAAA,EAClB,GACC,CAACO,CAAI,CAAC,GAGTK,EAAU,OACJ,CAACN,KAAUZ,MACTU,EAAiB,WACnB,aAAaA,EAAiB,OAAO,GAGtBA,EAAA,UAAU,WAAW,MAAM;AAC1C,IAAAC,EAAc,UAAU,IACXT,EAAA,GACbQ,EAAiB,UAAU;AAAA,KAC1B,GAAG,IAGD,MAAM;AACX,IAAIA,EAAiB,WACnB,aAAaA,EAAiB,OAAO;AAAA,EAEzC,IACC,CAACE,GAAQZ,GAAUE,CAAY,CAAC;AAEnC,QAAMiB,IAAgBnB,KAAYY,GAE5BQ,IAAgBC;AAAAA,IACpBC,EAAO;AAAA,IACPtB,KAAYY,IAASU,EAAO,iBAAiB;AAAA,IAC7CH,IAAgBG,EAAO,gBAAgB;AAAA,IACvCjB;AAAA,EACF;AAEA,SACG,gBAAAkB,EAAA,OAAA,EAAI,WAAWD,EAAO,mBACrB,UAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAjB;AAAA,MACA,WAAWc;AAAA,MACX,iBAAerB;AAAA,MACf,gBAAcK;AAAA,MACd,eAAY;AAAA,MACZ,cAAYI,EAAE,8BAA8B;AAAA,IAAA;AAAA,EAAA,GAEhD;AAEJ,CAAC;"}

package/dist/components/Common/ReorderableList/ReorderableItem.d.ts

@@ -0,0 +1,28 @@
+import { ReactElement } from 'react';
+import { ReorderableListItem } from './ReorderableListTypes';
+interface ReorderableItemProps {
+    item: ReorderableListItem;
+    index: number;
+    moveItem: (fromIndex: number, toIndex: number, source?: 'keyboard' | 'dragdrop') => void;
+    itemCount: number;
+    itemIndex: number;
+    listId: string;
+    isDraggingAny: boolean;
+    setIsDragging: (isDragging: boolean) => void;
+    isReorderingActive: boolean;
+    setIsReorderingActive: (isReorderingActive: boolean) => void;
+    isCurrentlyReordering: boolean;
+    setReorderingItemIndex: (reorderingItemIndex: number | null) => void;
+    renderDragHandle?: (props: {
+        id: string | number;
+        label: string;
+        isReordering: boolean;
+        isDragging: boolean;
+    }) => ReactElement;
+    className?: string;
+}
+/**
+ * Component for an individual reorderable item
+ */
+export declare const ReorderableItem: import('react').NamedExoticComponent<ReorderableItemProps>;
+export {};

package/dist/components/Common/ReorderableList/ReorderableItem.js

@@ -0,0 +1,139 @@
+import { jsxs as K, jsx as o } from "react/jsx-runtime";
+import { memo as z, useRef as h, useEffect as N, useCallback as F } from "react";
+import H from "classnames";
+import { useTranslation as M } from "react-i18next";
+import { useDrag as U } from "react-dnd";
+import s from "./ReorderableList.module.scss.js";
+import { ITEM_TYPE as V } from "./constants.js";
+import Y from "../../../assets/icons/list.svg.js";
+import { useComponentContext as _ } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { VisuallyHidden as $ } from "../VisuallyHidden/VisuallyHidden.js";
+const I = z(function({
+  item: m,
+  index: a,
+  moveItem: i,
+  itemCount: u,
+  itemIndex: w,
+  listId: p,
+  isDraggingAny: L,
+  setIsDragging: d,
+  isReorderingActive: t,
+  setIsReorderingActive: c,
+  isCurrentlyReordering: y,
+  setReorderingItemIndex: e,
+  renderDragHandle: T,
+  className: S
+}) {
+  const g = h(null), l = h(null), { t: f } = M("common"), B = _(), n = m.label, k = h(!1);
+  N(() => {
+    y && l.current && l.current.focus();
+  }, [y]);
+  const [{ isDragging: b }, P, E] = U(
+    () => ({
+      type: V,
+      item: () => (k.current = !0, d(!0), { index: a, listId: p }),
+      collect: (r) => ({
+        isDragging: !!r.isDragging()
+      }),
+      end: () => {
+        k.current = !1, d(!1), l.current && l.current.blur();
+      },
+      canDrag: () => !L || k.current
+    }),
+    [a, p, d, L]
+  ), j = F(
+    (r) => {
+      let D;
+      switch (r.key) {
+        case "ArrowUp":
+          t && a > 0 && (r.preventDefault(), e(a), i(a, a - 1, "keyboard"));
+          break;
+        case "ArrowDown":
+          t && a < u - 1 && (r.preventDefault(), e(a), i(a, a + 1, "keyboard"));
+          break;
+        case "Escape":
+          t && (r.preventDefault(), c(!1), e(null));
+          break;
+        case "Tab":
+          t && (c(!1), e(null));
+          break;
+        case " ":
+        case "Enter":
+          r.preventDefault(), D = !t, c(D), e(D ? a : null);
+          break;
+      }
+    },
+    [t, a, u, e, i, c]
+  );
+  N(() => {
+    g.current && E(g.current);
+  }, [E]);
+  const C = H(
+    s.reorderableItem,
+    b ? s.dragging : "",
+    t ? s.reordering : "",
+    S
+  );
+  return /* @__PURE__ */ K(
+    "div",
+    {
+      ref: g,
+      role: "listitem",
+      "aria-posinset": a + 1,
+      "aria-setsize": u,
+      className: C,
+      "data-position": a,
+      "data-item-index": w,
+      "data-list-id": p,
+      "data-testid": `reorderable-item-${a}`,
+      "data-dragging": b ? "true" : "false",
+      "data-reordering": t ? "true" : "false",
+      children: [
+        /* @__PURE__ */ o($, { children: f("reorderableList.draggablePosition", {
+          item: n,
+          position: String(a + 1),
+          total: String(u)
+        }) }),
+        /* @__PURE__ */ o("span", { className: s.dragHandle, children: T ? T({
+          id: m.id || a,
+          label: n,
+          isReordering: t,
+          isDragging: b
+        }) : /* @__PURE__ */ o(
+          B.ButtonIcon,
+          {
+            "data-index": a,
+            "data-item-index": w,
+            "data-reordering": t ? "true" : "false",
+            "data-focus-visible": !0,
+            "data-testid": "drag-handle-button",
+            tabIndex: 0,
+            onFocus: (r) => {
+              r.currentTarget.setAttribute("data-focus-visible", "true");
+            },
+            onBlur: (r) => {
+              r.currentTarget.removeAttribute("data-focus-visible");
+            },
+            "aria-label": t ? f("reorderableList.draggableLabelActive", {
+              item: n
+            }) : f("reorderableList.draggableLabel", {
+              item: n
+            }),
+            "aria-roledescription": f("reorderableList.draggableItem"),
+            "aria-grabbed": b,
+            onKeyDown: j,
+            ref: (r) => {
+              r && (l.current = r, P(r));
+            },
+            children: /* @__PURE__ */ o(Y, {})
+          }
+        ) }),
+        /* @__PURE__ */ o("div", { className: s.contentContainer, children: m.content })
+      ]
+    }
+  );
+});
+export {
+  I as ReorderableItem
+};
+//# sourceMappingURL=ReorderableItem.js.map

package/dist/components/Common/ReorderableList/ReorderableItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReorderableItem.js","sources":["../../../../src/components/Common/ReorderableList/ReorderableItem.tsx"],"sourcesContent":["import { useRef, useEffect, useCallback, memo } from 'react'\nimport classnames from 'classnames'\nimport { useTranslation } from 'react-i18next'\nimport { useDrag } from 'react-dnd'\nimport type { ReactElement } from 'react'\nimport { VisuallyHidden } from '../VisuallyHidden'\nimport type { ReorderableListItem } from './ReorderableListTypes'\nimport styles from './ReorderableList.module.scss'\nimport { ITEM_TYPE } from './constants'\nimport ListIcon from '@/assets/icons/list.svg?react'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\ninterface ReorderableItemProps {\n  item: ReorderableListItem\n  index: number\n  moveItem: (fromIndex: number, toIndex: number, source?: 'keyboard' | 'dragdrop') => void\n  itemCount: number\n  itemIndex: number\n  listId: string\n  isDraggingAny: boolean\n  setIsDragging: (isDragging: boolean) => void\n  isReorderingActive: boolean\n  setIsReorderingActive: (isReorderingActive: boolean) => void\n  isCurrentlyReordering: boolean\n  setReorderingItemIndex: (reorderingItemIndex: number | null) => void\n  renderDragHandle?: (props: {\n    id: string | number\n    label: string\n    isReordering: boolean\n    isDragging: boolean\n  }) => ReactElement\n  className?: string\n}\n\n/**\n * Component for an individual reorderable item\n */\nexport const ReorderableItem = memo(function ReorderableItem({\n  item,\n  index,\n  moveItem,\n  itemCount,\n  itemIndex,\n  listId,\n  isDraggingAny,\n  setIsDragging,\n  isReorderingActive,\n  setIsReorderingActive,\n  isCurrentlyReordering,\n  setReorderingItemIndex,\n  renderDragHandle,\n  className,\n}: ReorderableItemProps) {\n  const ref = useRef<HTMLDivElement>(null)\n  const buttonRef = useRef<HTMLButtonElement>(null)\n  const { t } = useTranslation('common')\n  const Components = useComponentContext()\n\n  // Format the accessible item name\n  const accessibleItemName = item.label\n\n  // Add a ref to track if this specific item is being dragged\n  const isBeingDraggedRef = useRef(false)\n\n  // When this item becomes the reordering item, focus on it\n  useEffect(() => {\n    if (isCurrentlyReordering && buttonRef.current) {\n      buttonRef.current.focus()\n    }\n  }, [isCurrentlyReordering])\n\n  // React DnD - Drag source\n  const [{ isDragging }, drag, dragPreview] = useDrag(\n    () => ({\n      type: ITEM_TYPE,\n      item: () => {\n        isBeingDraggedRef.current = true\n        setIsDragging(true)\n        return { index, listId }\n      },\n      collect: monitor => ({\n        isDragging: !!monitor.isDragging(),\n      }),\n      end: () => {\n        isBeingDraggedRef.current = false\n\n        setIsDragging(false)\n\n        if (buttonRef.current) {\n          buttonRef.current.blur()\n        }\n      },\n      canDrag: () => !isDraggingAny || isBeingDraggedRef.current,\n    }),\n    [index, listId, setIsDragging, isDraggingAny],\n  )\n\n  /**\n   * Handles keyboard interactions for reordering\n   */\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      let newReorderingState: boolean\n\n      switch (e.key) {\n        case 'ArrowUp':\n          if (isReorderingActive && index > 0) {\n            e.preventDefault()\n            setReorderingItemIndex(index)\n            moveItem(index, index - 1, 'keyboard')\n          }\n          break\n        case 'ArrowDown':\n          if (isReorderingActive && index < itemCount - 1) {\n            e.preventDefault()\n            setReorderingItemIndex(index)\n            moveItem(index, index + 1, 'keyboard')\n          }\n          break\n        case 'Escape':\n          if (isReorderingActive) {\n            e.preventDefault()\n            setIsReorderingActive(false)\n            setReorderingItemIndex(null)\n          }\n          break\n        case 'Tab':\n          if (isReorderingActive) {\n            setIsReorderingActive(false)\n            setReorderingItemIndex(null)\n          }\n          break\n        case ' ':\n        case 'Enter':\n          e.preventDefault()\n          newReorderingState = !isReorderingActive\n          setIsReorderingActive(newReorderingState)\n\n          if (newReorderingState) {\n            setReorderingItemIndex(index)\n          } else {\n            setReorderingItemIndex(null)\n          }\n          break\n        default:\n          break\n      }\n    },\n    [isReorderingActive, index, itemCount, setReorderingItemIndex, moveItem, setIsReorderingActive],\n  )\n\n  // Set up drag preview and drag source\n  useEffect(() => {\n    if (ref.current) {\n      dragPreview(ref.current)\n    }\n  }, [dragPreview])\n\n  const itemClasses = classnames(\n    styles.reorderableItem,\n    isDragging ? styles.dragging : '',\n    isReorderingActive ? styles.reordering : '',\n    className,\n  )\n\n  return (\n    <div\n      ref={ref}\n      role=\"listitem\"\n      aria-posinset={index + 1}\n      aria-setsize={itemCount}\n      className={itemClasses}\n      data-position={index}\n      data-item-index={itemIndex}\n      data-list-id={listId}\n      data-testid={`reorderable-item-${index}`}\n      data-dragging={isDragging ? 'true' : 'false'}\n      data-reordering={isReorderingActive ? 'true' : 'false'}\n    >\n      <VisuallyHidden>\n        {t('reorderableList.draggablePosition', {\n          item: accessibleItemName,\n          position: String(index + 1),\n          total: String(itemCount),\n        })}\n      </VisuallyHidden>\n      <span className={styles.dragHandle}>\n        {renderDragHandle ? (\n          renderDragHandle({\n            id: item.id || index,\n            label: accessibleItemName,\n            isReordering: isReorderingActive,\n            isDragging: isDragging,\n          })\n        ) : (\n          <Components.ButtonIcon\n            data-index={index}\n            data-item-index={itemIndex}\n            data-reordering={isReorderingActive ? 'true' : 'false'}\n            data-focus-visible={true}\n            data-testid=\"drag-handle-button\"\n            tabIndex={0}\n            onFocus={e => {\n              e.currentTarget.setAttribute('data-focus-visible', 'true')\n            }}\n            onBlur={e => {\n              e.currentTarget.removeAttribute('data-focus-visible')\n            }}\n            aria-label={\n              isReorderingActive\n                ? t('reorderableList.draggableLabelActive', {\n                    item: accessibleItemName,\n                  })\n                : t('reorderableList.draggableLabel', {\n                    item: accessibleItemName,\n                  })\n            }\n            aria-roledescription={t('reorderableList.draggableItem')}\n            aria-grabbed={isDragging}\n            onKeyDown={handleKeyDown}\n            ref={node => {\n              if (node) {\n                buttonRef.current = node\n                drag(node)\n              }\n            }}\n          >\n            <ListIcon />\n          </Components.ButtonIcon>\n        )}\n      </span>\n      <div className={styles.contentContainer}>{item.content}</div>\n    </div>\n  )\n})\n"],"names":["ReorderableItem","memo","item","index","moveItem","itemCount","itemIndex","listId","isDraggingAny","setIsDragging","isReorderingActive","setIsReorderingActive","isCurrentlyReordering","setReorderingItemIndex","renderDragHandle","className","ref","useRef","buttonRef","t","useTranslation","Components","useComponentContext","accessibleItemName","isBeingDraggedRef","useEffect","isDragging","drag","dragPreview","useDrag","ITEM_TYPE","monitor","handleKeyDown","useCallback","e","newReorderingState","itemClasses","classnames","styles","jsxs","jsx","VisuallyHidden","node","ListIcon"],"mappings":"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"}

package/dist/components/Common/ReorderableList/ReorderableList.d.ts

@@ -0,0 +1,25 @@
+import { ReactElement } from 'react';
+import { ReorderableListItem } from './ReorderableListTypes';
+interface ReorderableListAnimationConfig {
+    duration?: number;
+    easing?: string;
+    disabled?: boolean;
+}
+interface ReorderableListProps {
+    items: ReorderableListItem[];
+    label: string;
+    onReorder?: (itemOrder: number[]) => void;
+    className?: string;
+    animationConfig?: ReorderableListAnimationConfig;
+    disabled?: boolean;
+    renderDragHandle?: (props: {
+        id: string | number;
+        label: string;
+        isReordering: boolean;
+        isDragging: boolean;
+    }) => ReactElement;
+    dropZoneClassName?: string;
+    itemClassName?: string;
+}
+export declare function ReorderableList({ items, label, onReorder, className, animationConfig, disabled, renderDragHandle, dropZoneClassName, itemClassName, }: ReorderableListProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Common/ReorderableList/ReorderableList.js

@@ -0,0 +1,192 @@
+import { jsx as s, jsxs as M } from "react/jsx-runtime";
+import { useRef as $, useState as p, useMemo as U, useEffect as G, useCallback as R } from "react";
+import T from "classnames";
+import { DndProvider as z } from "react-dnd";
+import { HTML5Backend as J } from "react-dnd-html5-backend";
+import g from "./ReorderableList.module.scss.js";
+import { ReorderableItem as K } from "./ReorderableItem.js";
+import { DropZone as O } from "./DropZone.js";
+function Q(t = "reorderable-list") {
+  return `${t}-${Math.random().toString(36).slice(2, 9)}`;
+}
+function V(t, n, a) {
+  if (n === a || n < 0 || n >= t.length || a < 0 || a > t.length)
+    return [...t];
+  const d = [...t], [f] = d.splice(n, 1);
+  return f === void 0 ? [...t] : (d.splice(a, 0, f), d);
+}
+function W(t, n, a) {
+  return n === a || n < 0 || n >= t.length || a < 0 || a > t.length ? [...t] : V(t, n, a);
+}
+function X(t, n, a = "dragdrop") {
+  return a === "dragdrop" && t < n ? n - 1 : n;
+}
+const q = {
+  duration: 200,
+  easing: "ease-in-out",
+  disabled: !1
+};
+function ce({
+  items: t,
+  label: n,
+  onReorder: a,
+  className: d,
+  animationConfig: f = q,
+  disabled: D = !1,
+  renderDragHandle: C,
+  dropZoneClassName: y,
+  itemClassName: L
+}) {
+  const c = $(Q()).current, [i, Z] = p(
+    () => Array.from({ length: t.length }, (r, e) => e)
+  ), [F, b] = p(null), [S, _] = p(!1), [j, B] = p(!1), [E, k] = p(null), A = $(!1), u = $({}), o = U(
+    () => ({
+      ...q,
+      ...f
+    }),
+    [f]
+  );
+  G(() => {
+    t.length !== i.length && Z(Array.from({ length: t.length }, (r, e) => e));
+  }, [t.length, i.length]);
+  const w = R((r) => {
+    u.current = {}, u.current[r] = !0, b(r);
+  }, []), x = R((r) => {
+    r in u.current && (u.current[r] = !1);
+    const e = Object.entries(u.current).filter(([l, m]) => m).map(([l]) => Number(l));
+    e.length === 0 ? b(null) : e.length === 1 && b(Number(e[0]));
+  }, []), I = R(
+    (r, e, l = "dragdrop") => {
+      if (D || r === e || r < 0 || r >= i.length || e < 0 || e > i.length)
+        return;
+      A.current = !0;
+      const m = i[r], N = W(
+        i,
+        r,
+        X(r, e, l)
+      );
+      Z(N);
+      const H = o.disabled ? 0 : o.duration;
+      setTimeout(() => {
+        if (_(!1), A.current = !1, u.current = {}, b(null), l === "keyboard") {
+          const h = N.findIndex((v) => v === m);
+          if (h >= 0) {
+            k(h);
+            const v = document.querySelectorAll(
+              `[data-list-id="${c}"] .${g.dragHandle} button`
+            );
+            h < v.length && requestAnimationFrame(() => {
+              v[h] && v[h].focus();
+            });
+          }
+        }
+        a && a(N);
+      }, H);
+    },
+    [i, c, a, D, o]
+  );
+  return D ? /* @__PURE__ */ s(
+    "div",
+    {
+      role: "list",
+      "aria-label": n,
+      className: T(g.reorderableList, d, g.disabled),
+      "data-list-id": c,
+      "data-testid": "reorderable-list",
+      children: i.map((r) => {
+        const e = t[r];
+        return e ? /* @__PURE__ */ s(
+          "div",
+          {
+            role: "listitem",
+            className: T(g.reorderableItem, L),
+            children: /* @__PURE__ */ s("div", { className: g.contentContainer, children: e.content })
+          },
+          `item-static-${e.id || r}`
+        ) : null;
+      })
+    }
+  ) : /* @__PURE__ */ s(z, { backend: J, children: /* @__PURE__ */ M(
+    "div",
+    {
+      role: "list",
+      "aria-label": n,
+      className: T(g.reorderableList, d),
+      "data-list-id": c,
+      "data-testid": "reorderable-list",
+      style: {
+        ...!o.disabled && {
+          "--animation-duration": `${o.duration}ms`,
+          "--animation-easing": o.easing
+        }
+      },
+      children: [
+        /* @__PURE__ */ s(
+          O,
+          {
+            position: 0,
+            listId: c,
+            isActive: F === 0,
+            onActivate: () => {
+              w(0);
+            },
+            onDeactivate: () => {
+              x(0);
+            },
+            onDrop: (r) => {
+              A.current || I(r, 0, "dragdrop");
+            },
+            className: y
+          }
+        ),
+        i.map((r, e) => {
+          const l = t[r];
+          return l ? /* @__PURE__ */ M("div", { children: [
+            /* @__PURE__ */ s(
+              K,
+              {
+                item: l,
+                index: e,
+                moveItem: I,
+                itemCount: t.length,
+                itemIndex: r,
+                listId: c,
+                isDraggingAny: S,
+                setIsDragging: _,
+                isReorderingActive: j,
+                setIsReorderingActive: B,
+                isCurrentlyReordering: j && E === e,
+                setReorderingItemIndex: k,
+                renderDragHandle: C,
+                className: L
+              },
+              `item-${l.id || r}`
+            ),
+            /* @__PURE__ */ s(
+              O,
+              {
+                position: e + 1,
+                listId: c,
+                isActive: F === e + 1,
+                onActivate: () => {
+                  w(e + 1);
+                },
+                onDeactivate: () => {
+                  x(e + 1);
+                },
+                onDrop: (m) => {
+                  A.current || I(m, e + 1, "dragdrop");
+                },
+                className: y
+              }
+            )
+          ] }, `item-container-${l.id || r}-${e}`) : null;
+        })
+      ]
+    }
+  ) });
+}
+export {
+  ce as ReorderableList
+};
+//# sourceMappingURL=ReorderableList.js.map