@payloadcms/ui 3.0.0-canary.d6053cd → 3.0.0-canary.dc8b1fe

package/dist/elements/DraggableSortable/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/DraggableSortable/index.tsx"],"sourcesContent":["'use client'\nimport type { DragEndEvent } from '@dnd-kit/core'\n\nimport {\n  DndContext,\n  KeyboardSensor,\n  PointerSensor,\n  closestCenter,\n  useDroppable,\n  useSensor,\n  useSensors,\n} from '@dnd-kit/core'\nimport { SortableContext, sortableKeyboardCoordinates } from '@dnd-kit/sortable'\nimport React, { useCallback, useId } from 'react'\n\nimport type { Props } from './types.js'\n\nexport { Props }\n\nexport const DraggableSortable: React.FC<Props> = (props) => {\n  const { children, className, ids, onDragEnd } = props\n\n  const id = useId()\n\n  const { setNodeRef } = useDroppable({\n    id,\n  })\n\n  const sensors = useSensors(\n    useSensor(PointerSensor, {\n      activationConstraint: {\n        distance: 5,\n      },\n    }),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates,\n    }),\n  )\n\n  const handleDragEnd = useCallback(\n    (event: DragEndEvent) => {\n      const { active, over } = event\n\n      if (!active || !over) return\n\n      if (typeof onDragEnd === 'function') {\n        onDragEnd({\n          event,\n          moveFromIndex: ids.findIndex((_id) => _id === active.id),\n          moveToIndex: ids.findIndex((_id) => _id === over.id),\n        })\n      }\n    },\n    [onDragEnd, ids],\n  )\n\n  return (\n    <DndContext\n      collisionDetection={closestCenter}\n      id={id}\n      onDragEnd={handleDragEnd}\n      sensors={sensors}\n    >\n      <SortableContext items={ids}>\n        <div className={className} ref={setNodeRef}>\n          {children}\n        </div>\n      </SortableContext>\n    </DndContext>\n  )\n}\n"],"names":["DndContext","KeyboardSensor","PointerSensor","closestCenter","useDroppable","useSensor","useSensors","SortableContext","sortableKeyboardCoordinates","React","useCallback","useId","DraggableSortable","props","children","className","ids","onDragEnd","id","setNodeRef","sensors","activationConstraint","distance","coordinateGetter","handleDragEnd","event","active","over","moveFromIndex","findIndex","_id","moveToIndex","collisionDetection","items","div","ref"],"mappings":"AAAA;;AAGA,SACEA,UAAU,EACVC,cAAc,EACdC,aAAa,EACbC,aAAa,EACbC,YAAY,EACZC,SAAS,EACTC,UAAU,QACL,gBAAe;AACtB,SAASC,eAAe,EAAEC,2BAA2B,QAAQ,oBAAmB;AAChF,OAAOC,SAASC,WAAW,EAAEC,KAAK,QAAQ,QAAO;AAMjD,OAAO,MAAMC,oBAAqC,CAACC;IACjD,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,GAAG,EAAEC,SAAS,EAAE,GAAGJ;IAEhD,MAAMK,KAAKP;IAEX,MAAM,EAAEQ,UAAU,EAAE,GAAGf,aAAa;QAClCc;IACF;IAEA,MAAME,UAAUd,WACdD,UAAUH,eAAe;QACvBmB,sBAAsB;YACpBC,UAAU;QACZ;IACF,IACAjB,UAAUJ,gBAAgB;QACxBsB,kBAAkBf;IACpB;IAGF,MAAMgB,gBAAgBd,YACpB,CAACe;QACC,MAAM,EAAEC,MAAM,EAAEC,IAAI,EAAE,GAAGF;QAEzB,IAAI,CAACC,UAAU,CAACC,MAAM;QAEtB,IAAI,OAAOV,cAAc,YAAY;YACnCA,UAAU;gBACRQ;gBACAG,eAAeZ,IAAIa,SAAS,CAAC,CAACC,MAAQA,QAAQJ,OAAOR,EAAE;gBACvDa,aAAaf,IAAIa,SAAS,CAAC,CAACC,MAAQA,QAAQH,KAAKT,EAAE;YACrD;QACF;IACF,GACA;QAACD;QAAWD;KAAI;IAGlB,qBACE,KAAChB;QACCgC,oBAAoB7B;QACpBe,IAAIA;QACJD,WAAWO;QACXJ,SAASA;kBAET,cAAA,KAACb;YAAgB0B,OAAOjB;sBACtB,cAAA,KAACkB;gBAAInB,WAAWA;gBAAWoB,KAAKhB;0BAC7BL;;;;AAKX,EAAC"}
+{"version":3,"file":"index.js","names":["c","_c","closestCenter","DndContext","KeyboardSensor","PointerSensor","useDroppable","useSensor","useSensors","SortableContext","sortableKeyboardCoordinates","React","useCallback","useId","DraggableSortable","props","$","children","className","ids","onDragEnd","id","t0","setNodeRef","t1","Symbol","for","activationConstraint","distance","t2","coordinateGetter","sensors","t3","event","active","over","activatorEvent","stopPropagation","moveFromIndex","findIndex","_id","moveToIndex","_id_0","handleDragEnd","t4","_jsx","collisionDetection","items","ref"],"sources":["../../../src/elements/DraggableSortable/index.tsx"],"sourcesContent":["'use client'\nimport type { DragEndEvent } from '@dnd-kit/core'\n\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  PointerSensor,\n  useDroppable,\n  useSensor,\n  useSensors,\n} from '@dnd-kit/core'\nimport { SortableContext, sortableKeyboardCoordinates } from '@dnd-kit/sortable'\nimport React, { useCallback, useId } from 'react'\n\nimport type { Props } from './types.js'\n\nexport { Props }\n\nexport const DraggableSortable: React.FC<Props> = (props) => {\n  const { children, className, ids, onDragEnd } = props\n\n  const id = useId()\n\n  const { setNodeRef } = useDroppable({\n    id,\n  })\n\n  const sensors = useSensors(\n    useSensor(PointerSensor, {\n      activationConstraint: {\n        distance: 5,\n      },\n    }),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates,\n    }),\n  )\n\n  const handleDragEnd = useCallback(\n    (event: DragEndEvent) => {\n      const { active, over } = event\n\n      event.activatorEvent.stopPropagation()\n\n      if (!active || !over) {\n        return\n      }\n\n      if (typeof onDragEnd === 'function') {\n        onDragEnd({\n          event,\n          moveFromIndex: ids.findIndex((_id) => _id === active.id),\n          moveToIndex: ids.findIndex((_id) => _id === over.id),\n        })\n      }\n    },\n    [onDragEnd, ids],\n  )\n\n  return (\n    <DndContext\n      collisionDetection={closestCenter}\n      id={id}\n      onDragEnd={handleDragEnd}\n      sensors={sensors}\n    >\n      <SortableContext items={ids}>\n        <div className={className} ref={setNodeRef}>\n          {children}\n        </div>\n      </SortableContext>\n    </DndContext>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,SACEC,aAAa,EACbC,UAAU,EACVC,cAAc,EACdC,aAAa,EACbC,YAAY,EACZC,SAAS,EACTC,UAAU,QACL;AACP,SAASC,eAAe,EAAEC,2BAA2B,QAAQ;AAC7D,OAAOC,KAAA,IAASC,WAAW,EAAEC,KAAK,QAAQ;AAM1C,OAAO,MAAMC,iBAAA,GAAqCC,KAAA;EAAA,MAAAC,CAAA,GAAAf,EAAA;EAChD;IAAAgB,QAAA;IAAAC,SAAA;IAAAC,GAAA;IAAAC;EAAA,IAAgDL,KAAA;EAEhD,MAAAM,EAAA,GAAWR,KAAA;EAAA,IAAAS,EAAA;EAAA,IAAAN,CAAA,QAAAK,EAAA;IAEyBC,EAAA;MAAAD;IAAA;IAEpCL,CAAA,MAAAK,EAAA;IAAAL,CAAA,MAAAM,EAAA;EAAA;IAAAA,EAAA,GAAAN,CAAA;EAAA;EAFA;IAAAO;EAAA,IAAuBjB,YAAA,CAAagB,EAEpC;EAAA,IAAAE,EAAA;EAAA,IAAAR,CAAA,QAAAS,MAAA,CAAAC,GAAA;IAG2BF,EAAA;MAAAG,oBAAA;QAAAC,QAAA;MAAA;IAAA;IAIzBZ,CAAA,MAAAQ,EAAA;EAAA;IAAAA,EAAA,GAAAR,CAAA;EAAA;EAAA,IAAAa,EAAA;EAAA,IAAAb,CAAA,QAAAS,MAAA,CAAAC,GAAA;IAC0BG,EAAA;MAAAC,gBAAA,EAAApB;IAAA;IAE1BM,CAAA,MAAAa,EAAA;EAAA;IAAAA,EAAA,GAAAb,CAAA;EAAA;EARF,MAAAe,OAAA,GAAgBvB,UAAA,CACdD,SAAA,CAAAF,aAAA,EAAyBmB,EAIzB,GACAjB,SAAA,CAAAH,cAAA,EAA0ByB,EAE1B;EAAA,IAAAG,EAAA;EAAA,IAAAhB,CAAA,QAAAI,SAAA,IAAAJ,CAAA,QAAAG,GAAA;IAIAa,EAAA,GAAAC,KAAA;MACE;QAAAC,MAAA;QAAAC;MAAA,IAAyBF,KAAA;MAEzBA,KAAA,CAAAG,cAAA,CAAAC,eAAA,CAAoC;MAAA,IAEhC,CAACH,MAAA,KAAWC,IAAA;QAAA;MAAA;MAAA,IAIZ,OAAOf,SAAA,KAAc;QACvBA,SAAA;UAAAa,KAAA;UAAAK,aAAA,EAEiBnB,GAAA,CAAAoB,SAAA,CAAAC,GAAA,IAAuBA,GAAA,KAAQN,MAAA,CAAAb,EAAS;UAAAoB,WAAA,EAC1CtB,GAAA,CAAAoB,SAAA,CAAAG,KAAA,IAAuBF,KAAA,KAAQL,IAAA,CAAAd,EAAO;QAAA,CACrD;MAAA;IAAA;IAEJL,CAAA,MAAAI,SAAA;IAAAJ,CAAA,MAAAG,GAAA;IAAAH,CAAA,MAAAgB,EAAA;EAAA;IAAAA,EAAA,GAAAhB,CAAA;EAAA;EAjBF,MAAA2B,aAAA,GAAsBX,EAkBJ;EAAA,IAAAY,EAAA;EAAA,IAAA5B,CAAA,QAAAE,SAAA,IAAAF,CAAA,QAAAO,UAAA,IAAAP,CAAA,QAAAC,QAAA,IAAAD,CAAA,SAAAG,GAAA,IAAAH,CAAA,SAAAK,EAAA,IAAAL,CAAA,SAAA2B,aAAA,IAAA3B,CAAA,SAAAe,OAAA;IAIhBa,EAAA,GAAAC,IAAA,CAAA1C,UAAA;MAAA2C,kBAAA,EAAA5C,aAAA;MAAAmB,EAAA;MAAAD,SAAA,EAGauB,aAAA;MAAAZ,OAAA;MAAAd,QAAA,EAGX4B,IAAA,CAAApC,eAAA;QAAAsC,KAAA,EAAwB5B,GAAA;QAAAF,QAAA,EACtB4B,IAAA,CAAC;UAAA3B,SAAA;UAAA8B,GAAA,EAA+BzB,UAAA;UAAAN;QAAA,C;;;;;;;;;;;;;;SAPpC2B,E;CAaJ","ignoreList":[]}

package/dist/elements/DraggableSortable/types.js

@@ -1,3 +1,2 @@
-export { };
-
+export {};
 //# sourceMappingURL=types.js.map

package/dist/elements/DraggableSortable/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/DraggableSortable/types.ts"],"sourcesContent":["import type { DragEndEvent } from '@dnd-kit/core'\nimport type { Ref } from 'react'\n\nexport type Props = {\n  children: React.ReactNode\n  className?: string\n  droppableRef?: Ref<HTMLElement>\n  ids: string[]\n  onDragEnd: (e: { event: DragEndEvent; moveFromIndex: number; moveToIndex: number }) => void\n}\n"],"names":[],"mappings":"AAGA,WAMC"}
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/DraggableSortable/types.ts"],"sourcesContent":["import type { DragEndEvent } from '@dnd-kit/core'\nimport type { Ref } from 'react'\n\nexport type Props = {\n  children: React.ReactNode\n  className?: string\n  droppableRef?: Ref<HTMLElement>\n  ids: string[]\n  onDragEnd: (e: { event: DragEndEvent; moveFromIndex: number; moveToIndex: number }) => void\n}\n"],"mappings":"AAGA","ignoreList":[]}

package/dist/elements/DraggableSortable/useDraggableSortable/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/DraggableSortable/useDraggableSortable/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAA;AAI1D,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAA;AAE5D,eAAO,MAAM,oBAAoB,UAAW,qBAAqB,KAAG,0BAoBnE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/DraggableSortable/useDraggableSortable/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAA;AAI1D,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAA;AAE5D,eAAO,MAAM,oBAAoB,UAAW,qBAAqB,KAAG,0BA0BnE,CAAA"}

package/dist/elements/DraggableSortable/useDraggableSortable/index.js

@@ -1,23 +1,90 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
 import { useSortable } from '@dnd-kit/sortable';
-export const useDraggableSortable = (props)=>{
-    const { id, disabled } = props;
-    const { attributes, isDragging, listeners, setNodeRef, transform } = useSortable({
-        id,
-        disabled
-    });
-    return {
-        attributes: {
-            ...attributes,
-            style: {
-                cursor: isDragging ? 'grabbing' : 'grab'
-            }
-        },
-        isDragging,
-        listeners,
-        setNodeRef,
-        transform: transform && `translate3d(${transform.x}px, ${transform.y}px, 0)`
+export const useDraggableSortable = props => {
+  const $ = _c(17);
+  const {
+    id,
+    disabled
+  } = props;
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = {
+      duration: 250,
+      easing: "cubic-bezier(0, 0.2, 0.2, 1)"
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  let t1;
+  if ($[1] !== id || $[2] !== disabled) {
+    t1 = {
+      id,
+      disabled,
+      transition: t0
+    };
+    $[1] = id;
+    $[2] = disabled;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const {
+    attributes,
+    isDragging,
+    listeners,
+    setNodeRef,
+    transform,
+    transition
+  } = useSortable(t1);
+  const t2 = isDragging ? "grabbing" : "grab";
+  let t3;
+  if ($[4] !== t2 || $[5] !== transition) {
+    t3 = {
+      cursor: t2,
+      transition
     };
+    $[4] = t2;
+    $[5] = transition;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  let t4;
+  if ($[7] !== attributes || $[8] !== t3) {
+    t4 = {
+      ...attributes,
+      style: t3
+    };
+    $[7] = attributes;
+    $[8] = t3;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  const t5 = transform && `translate3d(${transform.x}px, ${transform.y}px, 0)`;
+  let t6;
+  if ($[10] !== t4 || $[11] !== isDragging || $[12] !== listeners || $[13] !== setNodeRef || $[14] !== t5 || $[15] !== transition) {
+    t6 = {
+      attributes: t4,
+      isDragging,
+      listeners,
+      setNodeRef,
+      transform: t5,
+      transition
+    };
+    $[10] = t4;
+    $[11] = isDragging;
+    $[12] = listeners;
+    $[13] = setNodeRef;
+    $[14] = t5;
+    $[15] = transition;
+    $[16] = t6;
+  } else {
+    t6 = $[16];
+  }
+  return t6;
 };
-
 //# sourceMappingURL=index.js.map

package/dist/elements/DraggableSortable/useDraggableSortable/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/DraggableSortable/useDraggableSortable/index.tsx"],"sourcesContent":["'use client'\nimport type { UseDraggableArguments } from '@dnd-kit/core'\n\nimport { useSortable } from '@dnd-kit/sortable'\n\nimport type { UseDraggableSortableReturn } from './types.js'\n\nexport const useDraggableSortable = (props: UseDraggableArguments): UseDraggableSortableReturn => {\n  const { id, disabled } = props\n\n  const { attributes, isDragging, listeners, setNodeRef, transform } = useSortable({\n    id,\n    disabled,\n  })\n\n  return {\n    attributes: {\n      ...attributes,\n      style: {\n        cursor: isDragging ? 'grabbing' : 'grab',\n      },\n    },\n    isDragging,\n    listeners,\n    setNodeRef,\n    transform: transform && `translate3d(${transform.x}px, ${transform.y}px, 0)`, // translate3d is faster than translate in most browsers\n  }\n}\n"],"names":["useSortable","useDraggableSortable","props","id","disabled","attributes","isDragging","listeners","setNodeRef","transform","style","cursor","x","y"],"mappings":"AAAA;AAGA,SAASA,WAAW,QAAQ,oBAAmB;AAI/C,OAAO,MAAMC,uBAAuB,CAACC;IACnC,MAAM,EAAEC,EAAE,EAAEC,QAAQ,EAAE,GAAGF;IAEzB,MAAM,EAAEG,UAAU,EAAEC,UAAU,EAAEC,SAAS,EAAEC,UAAU,EAAEC,SAAS,EAAE,GAAGT,YAAY;QAC/EG;QACAC;IACF;IAEA,OAAO;QACLC,YAAY;YACV,GAAGA,UAAU;YACbK,OAAO;gBACLC,QAAQL,aAAa,aAAa;YACpC;QACF;QACAA;QACAC;QACAC;QACAC,WAAWA,aAAa,CAAC,YAAY,EAAEA,UAAUG,CAAC,CAAC,IAAI,EAAEH,UAAUI,CAAC,CAAC,MAAM,CAAC;IAC9E;AACF,EAAC"}
+{"version":3,"file":"index.js","names":["c","_c","useSortable","useDraggableSortable","props","$","id","disabled","t0","Symbol","for","duration","easing","t1","transition","attributes","isDragging","listeners","setNodeRef","transform","t2","t3","cursor","t4","style","t5","x","y","t6"],"sources":["../../../../src/elements/DraggableSortable/useDraggableSortable/index.tsx"],"sourcesContent":["'use client'\nimport type { UseDraggableArguments } from '@dnd-kit/core'\n\nimport { useSortable } from '@dnd-kit/sortable'\n\nimport type { UseDraggableSortableReturn } from './types.js'\n\nexport const useDraggableSortable = (props: UseDraggableArguments): UseDraggableSortableReturn => {\n  const { id, disabled } = props\n\n  const { attributes, isDragging, listeners, setNodeRef, transform, transition } = useSortable({\n    id,\n    disabled,\n    transition: {\n      duration: 250,\n      easing: 'cubic-bezier(0, 0.2, 0.2, 1)',\n    },\n  })\n\n  return {\n    attributes: {\n      ...attributes,\n      style: {\n        cursor: isDragging ? 'grabbing' : 'grab',\n        transition,\n      },\n    },\n    isDragging,\n    listeners,\n    setNodeRef,\n    transform: transform && `translate3d(${transform.x}px, ${transform.y}px, 0)`, // translate3d is faster than translate in most browsers\n    transition,\n  }\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;AAGA,SAASC,WAAW,QAAQ;AAI5B,OAAO,MAAMC,oBAAA,GAAuBC,KAAA;EAAA,MAAAC,CAAA,GAAAJ,EAAA;EAClC;IAAAK,EAAA;IAAAC;EAAA,IAAyBH,KAAA;EAAA,IAAAI,EAAA;EAAA,IAAAH,CAAA,QAAAI,MAAA,CAAAC,GAAA;IAKXF,EAAA;MAAAG,QAAA;MAAAC,MAAA,EAEF;IAAA;IACVP,CAAA,MAAAG,EAAA;EAAA;IAAAA,EAAA,GAAAH,CAAA;EAAA;EAAA,IAAAQ,EAAA;EAAA,IAAAR,CAAA,QAAAC,EAAA,IAAAD,CAAA,QAAAE,QAAA;IAN2FM,EAAA;MAAAP,EAAA;MAAAC,QAAA;MAAAO,UAAA,EAG/EN;IAGZ;IACFH,CAAA,MAAAC,EAAA;IAAAD,CAAA,MAAAE,QAAA;IAAAF,CAAA,MAAAQ,EAAA;EAAA;IAAAA,EAAA,GAAAR,CAAA;EAAA;EAPA;IAAAU,UAAA;IAAAC,UAAA;IAAAC,SAAA;IAAAC,UAAA;IAAAC,SAAA;IAAAL;EAAA,IAAiFZ,WAAA,CAAYW,EAO7F;EAMc,MAAAO,EAAA,GAAAJ,UAAA,GAAa,aAAa;EAAA,IAAAK,EAAA;EAAA,IAAAhB,CAAA,QAAAe,EAAA,IAAAf,CAAA,QAAAS,UAAA;IAD7BO,EAAA;MAAAC,MAAA,EACGF,EAA0B;MAAAN;IAAA;IAEpCT,CAAA,MAAAe,EAAA;IAAAf,CAAA,MAAAS,UAAA;IAAAT,CAAA,MAAAgB,EAAA;EAAA;IAAAA,EAAA,GAAAhB,CAAA;EAAA;EAAA,IAAAkB,EAAA;EAAA,IAAAlB,CAAA,QAAAU,UAAA,IAAAV,CAAA,QAAAgB,EAAA;IALUE,EAAA;MAAA,GACPR,UAAU;MAAAS,KAAA,EACNH;IAGP;IACFhB,CAAA,MAAAU,UAAA;IAAAV,CAAA,MAAAgB,EAAA;IAAAhB,CAAA,MAAAkB,EAAA;EAAA;IAAAA,EAAA,GAAAlB,CAAA;EAAA;EAIW,MAAAoB,EAAA,GAAAN,SAAA,IAAa,eAAeA,SAAA,CAAAO,CAAA,OAAkBP,SAAA,CAAAQ,CAAA,QAAmB;EAAA,IAAAC,EAAA;EAAA,IAAAvB,CAAA,SAAAkB,EAAA,IAAAlB,CAAA,SAAAW,UAAA,IAAAX,CAAA,SAAAY,SAAA,IAAAZ,CAAA,SAAAa,UAAA,IAAAb,CAAA,SAAAoB,EAAA,IAAApB,CAAA,SAAAS,UAAA;IAXvEc,EAAA;MAAAb,UAAA,EACOQ,EAMZ;MAAAP,UAAA;MAAAC,SAAA;MAAAC,UAAA;MAAAC,SAAA,EAIWM,EAAiE;MAAAX;IAAA;IAE9ET,CAAA,OAAAkB,EAAA;IAAAlB,CAAA,OAAAW,UAAA;IAAAX,CAAA,OAAAY,SAAA;IAAAZ,CAAA,OAAAa,UAAA;IAAAb,CAAA,OAAAoB,EAAA;IAAApB,CAAA,OAAAS,UAAA;IAAAT,CAAA,OAAAuB,EAAA;EAAA;IAAAA,EAAA,GAAAvB,CAAA;EAAA;EAAA,OAbOuB,EAaP;AAAA,CACF","ignoreList":[]}

package/dist/elements/DraggableSortable/useDraggableSortable/types.d.ts

@@ -1,10 +1,11 @@
 import type { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';
 import type { HTMLAttributes } from 'react';
 export type UseDraggableSortableReturn = {
-    attributes: HTMLAttributes<unknown>;
-    isDragging?: boolean;
-    listeners: SyntheticListenerMap;
-    setNodeRef: (node: HTMLElement | null) => void;
-    transform: string;
+    readonly attributes: HTMLAttributes<unknown>;
+    readonly isDragging?: boolean;
+    readonly listeners: SyntheticListenerMap;
+    readonly setNodeRef: (node: HTMLElement | null) => void;
+    readonly transform: string;
+    readonly transition: string;
 };
 //# sourceMappingURL=types.d.ts.map

package/dist/elements/DraggableSortable/useDraggableSortable/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/elements/DraggableSortable/useDraggableSortable/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAA;AAC9E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,MAAM,MAAM,0BAA0B,GAAG;IACvC,UAAU,EAAE,cAAc,CAAC,OAAO,CAAC,CAAA;IACnC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,EAAE,oBAAoB,CAAA;IAC/B,UAAU,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IAC9C,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/elements/DraggableSortable/useDraggableSortable/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAA;AAC9E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,CAAC,UAAU,EAAE,cAAc,CAAC,OAAO,CAAC,CAAA;IAC5C,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,SAAS,EAAE,oBAAoB,CAAA;IACxC,QAAQ,CAAC,UAAU,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IACvD,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAA;IAC1B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;CAC5B,CAAA"}

package/dist/elements/DraggableSortable/useDraggableSortable/types.js

@@ -1,3 +1,2 @@
-export { };
-
+export {};
 //# sourceMappingURL=types.js.map

package/dist/elements/DraggableSortable/useDraggableSortable/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/DraggableSortable/useDraggableSortable/types.ts"],"sourcesContent":["import type { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities'\nimport type { HTMLAttributes } from 'react'\n\nexport type UseDraggableSortableReturn = {\n  attributes: HTMLAttributes<unknown>\n  isDragging?: boolean\n  listeners: SyntheticListenerMap\n  setNodeRef: (node: HTMLElement | null) => void\n  transform: string\n}\n"],"names":[],"mappings":"AAGA,WAMC"}
+{"version":3,"file":"types.js","names":[],"sources":["../../../../src/elements/DraggableSortable/useDraggableSortable/types.ts"],"sourcesContent":["import type { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities'\nimport type { HTMLAttributes } from 'react'\n\nexport type UseDraggableSortableReturn = {\n  readonly attributes: HTMLAttributes<unknown>\n  readonly isDragging?: boolean\n  readonly listeners: SyntheticListenerMap\n  readonly setNodeRef: (node: HTMLElement | null) => void\n  readonly transform: string\n  readonly transition: string\n}\n"],"mappings":"AAGA","ignoreList":[]}

package/dist/elements/Drawer/index.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { Props, TogglerProps } from './types.js';
 import './index.scss';
+export declare const drawerZBase = 100;
 export declare const formatDrawerSlug: ({ slug, depth }: {
     depth: number;
     slug: string;
@@ -8,4 +9,9 @@ export declare const formatDrawerSlug: ({ slug, depth }: {
 export { useDrawerSlug } from './useDrawerSlug.js';
 export declare const DrawerToggler: React.FC<TogglerProps>;
 export declare const Drawer: React.FC<Props>;
+export declare const DrawerDepthContext: React.Context<number>;
+export declare const DrawerDepthProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export declare const useDrawerDepth: () => number;
 //# sourceMappingURL=index.d.ts.map

package/dist/elements/Drawer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Drawer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAE/D,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAMrD,OAAO,cAAc,CAAA;AAKrB,eAAO,MAAM,gBAAgB,oBAAqB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,KAAG,MACzD,CAAA;AAE3B,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAElD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAuBhD,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAiFlC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Drawer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsE,MAAM,OAAO,CAAA;AAE1F,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAKrD,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,WAAW,MAAM,CAAA;AAE9B,eAAO,MAAM,gBAAgB,oBAAqB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,KAAG,MACzD,CAAA;AAE3B,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAElD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAyBhD,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAuFlC,CAAA;AAED,eAAO,MAAM,kBAAkB,uBAAmB,CAAA;AAElD,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAKvE,CAAA;AAED,eAAO,MAAM,cAAc,QAAO,MAAwC,CAAA"}

package/dist/elements/Drawer/index.js

@@ -1,118 +1,258 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Modal, useModal } from '@faceless-ui/modal';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { createContext, useCallback, useContext, useEffect, useState } from 'react';
 import { XIcon } from '../../icons/X/index.js';
-import { EditDepthContext, useEditDepth } from '../../providers/EditDepth/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { Gutter } from '../Gutter/index.js';
 import './index.scss';
 const baseClass = 'drawer';
-const zBase = 100;
-export const formatDrawerSlug = ({ slug, depth })=>`drawer_${depth}_${slug}`;
+export const drawerZBase = 100;
+export const formatDrawerSlug = ({
+  slug,
+  depth
+}) => `drawer_${depth}_${slug}`;
 export { useDrawerSlug } from './useDrawerSlug.js';
-export const DrawerToggler = ({ slug, children, className, disabled, onClick, ...rest })=>{
-    const { openModal } = useModal();
-    const handleClick = useCallback((e)=>{
-        openModal(slug);
-        if (typeof onClick === 'function') onClick(e);
-    }, [
-        openModal,
-        slug,
-        onClick
-    ]);
-    return /*#__PURE__*/ _jsx("button", {
-        className: className,
-        disabled: disabled,
-        onClick: handleClick,
-        type: "button",
-        ...rest,
-        children: children
+export const DrawerToggler = t0 => {
+  const $ = _c(17);
+  let slug;
+  let onClick;
+  let className;
+  let disabled;
+  let rest;
+  let children;
+  if ($[0] !== t0) {
+    ({
+      slug,
+      children,
+      className,
+      disabled,
+      onClick,
+      ...rest
+    } = t0);
+    $[0] = t0;
+    $[1] = slug;
+    $[2] = onClick;
+    $[3] = className;
+    $[4] = disabled;
+    $[5] = rest;
+    $[6] = children;
+  } else {
+    slug = $[1];
+    onClick = $[2];
+    className = $[3];
+    disabled = $[4];
+    rest = $[5];
+    children = $[6];
+  }
+  const {
+    openModal
+  } = useModal();
+  let t1;
+  if ($[7] !== openModal || $[8] !== slug || $[9] !== onClick) {
+    t1 = e => {
+      openModal(slug);
+      if (typeof onClick === "function") {
+        onClick(e);
+      }
+    };
+    $[7] = openModal;
+    $[8] = slug;
+    $[9] = onClick;
+    $[10] = t1;
+  } else {
+    t1 = $[10];
+  }
+  const handleClick = t1;
+  let t2;
+  if ($[11] !== className || $[12] !== disabled || $[13] !== handleClick || $[14] !== rest || $[15] !== children) {
+    t2 = _jsx("button", {
+      className,
+      disabled,
+      onClick: handleClick,
+      type: "button",
+      ...rest,
+      children
     });
+    $[11] = className;
+    $[12] = disabled;
+    $[13] = handleClick;
+    $[14] = rest;
+    $[15] = children;
+    $[16] = t2;
+  } else {
+    t2 = $[16];
+  }
+  return t2;
 };
-export const Drawer = ({ slug, Header, children, className, gutter = true, hoverTitle, title })=>{
-    const { t } = useTranslation();
-    const { closeModal, modalState } = useModal();
-    const drawerDepth = useEditDepth();
-    const [isOpen, setIsOpen] = useState(false);
-    const [animateIn, setAnimateIn] = useState(false);
-    useEffect(()=>{
-        setIsOpen(modalState[slug]?.isOpen);
-    }, [
-        slug,
-        modalState
-    ]);
-    useEffect(()=>{
-        setAnimateIn(isOpen);
-    }, [
-        isOpen
-    ]);
-    if (isOpen) {
-        // IMPORTANT: do not render the drawer until it is explicitly open, this is to avoid large html trees especially when nesting drawers
-        return /*#__PURE__*/ _jsxs(Modal, {
-            className: [
-                className,
-                baseClass,
-                animateIn && `${baseClass}--is-open`,
-                drawerDepth > 1 && `${baseClass}--nested`
-            ].filter(Boolean).join(' '),
-            slug: slug,
+export const Drawer = t0 => {
+  const $ = _c(26);
+  const {
+    slug,
+    children,
+    className,
+    gutter: t1,
+    Header,
+    hoverTitle,
+    title
+  } = t0;
+  const gutter = t1 === undefined ? true : t1;
+  const {
+    t
+  } = useTranslation();
+  const {
+    closeModal,
+    modalState
+  } = useModal();
+  const drawerDepth = useDrawerDepth();
+  const [isOpen, setIsOpen] = useState(false);
+  const [animateIn, setAnimateIn] = useState(false);
+  let t2;
+  let t3;
+  if ($[0] !== modalState || $[1] !== slug) {
+    t2 = () => {
+      setIsOpen(modalState[slug]?.isOpen);
+    };
+    t3 = [slug, modalState];
+    $[0] = modalState;
+    $[1] = slug;
+    $[2] = t2;
+    $[3] = t3;
+  } else {
+    t2 = $[2];
+    t3 = $[3];
+  }
+  useEffect(t2, t3);
+  let t4;
+  let t5;
+  if ($[4] !== isOpen) {
+    t4 = () => {
+      setAnimateIn(isOpen);
+    };
+    t5 = [isOpen];
+    $[4] = isOpen;
+    $[5] = t4;
+    $[6] = t5;
+  } else {
+    t4 = $[5];
+    t5 = $[6];
+  }
+  useEffect(t4, t5);
+  if (isOpen) {
+    const t6 = animateIn && `${baseClass}--is-open`;
+    const t7 = drawerDepth > 1 && `${baseClass}--nested`;
+    let t8;
+    if ($[7] !== className || $[8] !== t6 || $[9] !== t7) {
+      t8 = [className, baseClass, t6, t7].filter(Boolean);
+      $[7] = className;
+      $[8] = t6;
+      $[9] = t7;
+      $[10] = t8;
+    } else {
+      t8 = $[10];
+    }
+    const t9 = t8.join(" ");
+    const t10 = drawerZBase + drawerDepth;
+    let t11;
+    if ($[11] !== t10 || $[12] !== drawerDepth || $[13] !== t || $[14] !== slug || $[15] !== closeModal || $[16] !== Header || $[17] !== hoverTitle || $[18] !== title || $[19] !== children || $[20] !== gutter || $[21] !== t9) {
+      let t12;
+      if ($[23] !== closeModal || $[24] !== slug) {
+        t12 = () => closeModal(slug);
+        $[23] = closeModal;
+        $[24] = slug;
+        $[25] = t12;
+      } else {
+        t12 = $[25];
+      }
+      t11 = _jsx(DrawerDepthProvider, {
+        children: _jsxs(Modal, {
+          className: t9,
+          slug,
+          style: {
+            zIndex: t10
+          },
+          children: [(!drawerDepth || drawerDepth === 1) && _jsx("div", {
+            className: `${baseClass}__blur-bg`
+          }), _jsx("button", {
+            "aria-label": t("general:close"),
+            className: `${baseClass}__close`,
+            id: `close-drawer__${slug}`,
+            onClick: t12,
+            type: "button"
+          }), _jsxs("div", {
+            className: `${baseClass}__content`,
             style: {
-                zIndex: zBase + drawerDepth
+              width: `calc(100% - (${drawerDepth} * var(--gutter-h))`
             },
-            children: [
-                (!drawerDepth || drawerDepth === 1) && /*#__PURE__*/ _jsx("div", {
-                    className: `${baseClass}__blur-bg`
-                }),
-                /*#__PURE__*/ _jsx("button", {
-                    "aria-label": t('general:close'),
-                    className: `${baseClass}__close`,
-                    id: `close-drawer__${slug}`,
-                    onClick: ()=>closeModal(slug),
-                    type: "button"
-                }),
-                /*#__PURE__*/ _jsxs("div", {
-                    className: `${baseClass}__content`,
-                    children: [
-                        /*#__PURE__*/ _jsx("div", {
-                            className: `${baseClass}__blur-bg-content`
-                        }),
-                        /*#__PURE__*/ _jsx(Gutter, {
-                            className: `${baseClass}__content-children`,
-                            left: gutter,
-                            right: gutter,
-                            children: /*#__PURE__*/ _jsxs(EditDepthContext.Provider, {
-                                value: drawerDepth + 1,
-                                children: [
-                                    Header,
-                                    Header === undefined && /*#__PURE__*/ _jsxs("div", {
-                                        className: `${baseClass}__header`,
-                                        children: [
-                                            /*#__PURE__*/ _jsx("h2", {
-                                                className: `${baseClass}__header__title`,
-                                                title: hoverTitle ? title : null,
-                                                children: title
-                                            }),
-                                            /*#__PURE__*/ _jsx("button", {
-                                                "aria-label": t('general:close'),
-                                                className: `${baseClass}__header__close`,
-                                                id: `close-drawer__${slug}`,
-                                                onClick: ()=>closeModal(slug),
-                                                type: "button",
-                                                children: /*#__PURE__*/ _jsx(XIcon, {})
-                                            })
-                                        ]
-                                    }),
-                                    children
-                                ]
-                            })
-                        })
-                    ]
-                })
-            ]
-        });
+            children: [_jsx("div", {
+              className: `${baseClass}__blur-bg-content`
+            }), _jsxs(Gutter, {
+              className: `${baseClass}__content-children`,
+              left: gutter,
+              right: gutter,
+              children: [Header, Header === undefined && _jsxs("div", {
+                className: `${baseClass}__header`,
+                children: [_jsx("h2", {
+                  className: `${baseClass}__header__title`,
+                  title: hoverTitle ? title : null,
+                  children: title
+                }), _jsx("button", {
+                  "aria-label": t("general:close"),
+                  className: `${baseClass}__header__close`,
+                  id: `close-drawer__${slug}`,
+                  onClick: () => closeModal(slug),
+                  type: "button",
+                  children: _jsx(XIcon, {})
+                })]
+              }), children]
+            })]
+          })]
+        })
+      });
+      $[11] = t10;
+      $[12] = drawerDepth;
+      $[13] = t;
+      $[14] = slug;
+      $[15] = closeModal;
+      $[16] = Header;
+      $[17] = hoverTitle;
+      $[18] = title;
+      $[19] = children;
+      $[20] = gutter;
+      $[21] = t9;
+      $[22] = t11;
+    } else {
+      t11 = $[22];
     }
-    return null;
+    return t11;
+  }
+  return null;
+};
+export const DrawerDepthContext = /*#__PURE__*/createContext(1);
+export const DrawerDepthProvider = t0 => {
+  const $ = _c(3);
+  const {
+    children
+  } = t0;
+  const parentDepth = useDrawerDepth();
+  const depth = parentDepth + 1;
+  let t1;
+  if ($[0] !== depth || $[1] !== children) {
+    t1 = _jsx(DrawerDepthContext.Provider, {
+      value: depth,
+      children
+    });
+    $[0] = depth;
+    $[1] = children;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+};
+export const useDrawerDepth = () => {
+  return useContext(DrawerDepthContext);
 };
-
 //# sourceMappingURL=index.js.map

package/dist/elements/Drawer/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Drawer/index.tsx"],"sourcesContent":["'use client'\nimport { Modal, useModal } from '@faceless-ui/modal'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport type { Props, TogglerProps } from './types.js'\n\nimport { XIcon } from '../../icons/X/index.js'\nimport { EditDepthContext, useEditDepth } from '../../providers/EditDepth/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Gutter } from '../Gutter/index.js'\nimport './index.scss'\n\nconst baseClass = 'drawer'\nconst zBase = 100\n\nexport const formatDrawerSlug = ({ slug, depth }: { depth: number; slug: string }): string =>\n  `drawer_${depth}_${slug}`\n\nexport { useDrawerSlug } from './useDrawerSlug.js'\n\nexport const DrawerToggler: React.FC<TogglerProps> = ({\n  slug,\n  children,\n  className,\n  disabled,\n  onClick,\n  ...rest\n}) => {\n  const { openModal } = useModal()\n\n  const handleClick = useCallback(\n    (e) => {\n      openModal(slug)\n      if (typeof onClick === 'function') onClick(e)\n    },\n    [openModal, slug, onClick],\n  )\n\n  return (\n    <button className={className} disabled={disabled} onClick={handleClick} type=\"button\" {...rest}>\n      {children}\n    </button>\n  )\n}\n\nexport const Drawer: React.FC<Props> = ({\n  slug,\n  Header,\n  children,\n  className,\n  gutter = true,\n  hoverTitle,\n  title,\n}) => {\n  const { t } = useTranslation()\n  const { closeModal, modalState } = useModal()\n  const drawerDepth = useEditDepth()\n  const [isOpen, setIsOpen] = useState(false)\n  const [animateIn, setAnimateIn] = useState(false)\n\n  useEffect(() => {\n    setIsOpen(modalState[slug]?.isOpen)\n  }, [slug, modalState])\n\n  useEffect(() => {\n    setAnimateIn(isOpen)\n  }, [isOpen])\n\n  if (isOpen) {\n    // IMPORTANT: do not render the drawer until it is explicitly open, this is to avoid large html trees especially when nesting drawers\n    return (\n      <Modal\n        className={[\n          className,\n          baseClass,\n          animateIn && `${baseClass}--is-open`,\n          drawerDepth > 1 && `${baseClass}--nested`,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        slug={slug}\n        style={{\n          zIndex: zBase + drawerDepth,\n        }}\n      >\n        {(!drawerDepth || drawerDepth === 1) && <div className={`${baseClass}__blur-bg`} />}\n        <button\n          aria-label={t('general:close')}\n          className={`${baseClass}__close`}\n          id={`close-drawer__${slug}`}\n          onClick={() => closeModal(slug)}\n          type=\"button\"\n        />\n        <div className={`${baseClass}__content`}>\n          <div className={`${baseClass}__blur-bg-content`} />\n          <Gutter className={`${baseClass}__content-children`} left={gutter} right={gutter}>\n            <EditDepthContext.Provider value={drawerDepth + 1}>\n              {Header}\n              {Header === undefined && (\n                <div className={`${baseClass}__header`}>\n                  <h2 className={`${baseClass}__header__title`} title={hoverTitle ? title : null}>\n                    {title}\n                  </h2>\n                  {/* TODO: the `button` HTML element breaks CSS transitions on the drawer for some reason...\n                    i.e. changing to a `div` element will fix the animation issue but will break accessibility\n                  */}\n                  <button\n                    aria-label={t('general:close')}\n                    className={`${baseClass}__header__close`}\n                    id={`close-drawer__${slug}`}\n                    onClick={() => closeModal(slug)}\n                    type=\"button\"\n                  >\n                    <XIcon />\n                  </button>\n                </div>\n              )}\n              {children}\n            </EditDepthContext.Provider>\n          </Gutter>\n        </div>\n      </Modal>\n    )\n  }\n\n  return null\n}\n"],"names":["Modal","useModal","React","useCallback","useEffect","useState","XIcon","EditDepthContext","useEditDepth","useTranslation","Gutter","baseClass","zBase","formatDrawerSlug","slug","depth","useDrawerSlug","DrawerToggler","children","className","disabled","onClick","rest","openModal","handleClick","e","button","type","Drawer","Header","gutter","hoverTitle","title","t","closeModal","modalState","drawerDepth","isOpen","setIsOpen","animateIn","setAnimateIn","filter","Boolean","join","style","zIndex","div","aria-label","id","left","right","Provider","value","undefined","h2"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","Modal","useModal","React","createContext","useCallback","useContext","useEffect","useState","XIcon","useTranslation","Gutter","baseClass","drawerZBase","formatDrawerSlug","slug","depth","useDrawerSlug","DrawerToggler","t0","$","onClick","className","disabled","rest","children","openModal","t1","e","handleClick","t2","_jsx","type","Drawer","gutter","Header","hoverTitle","title","undefined","t","closeModal","modalState","drawerDepth","useDrawerDepth","isOpen","setIsOpen","animateIn","setAnimateIn","t3","t4","t5","t6","t7","t8","filter","Boolean","t9","join","t10","t11","t12","DrawerDepthProvider","_jsxs","style","zIndex","id","width","left","right","DrawerDepthContext","parentDepth","Provider","value"],"sources":["../../../src/elements/Drawer/index.tsx"],"sourcesContent":["'use client'\nimport { Modal, useModal } from '@faceless-ui/modal'\nimport React, { createContext, useCallback, useContext, useEffect, useState } from 'react'\n\nimport type { Props, TogglerProps } from './types.js'\n\nimport { XIcon } from '../../icons/X/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Gutter } from '../Gutter/index.js'\nimport './index.scss'\n\nconst baseClass = 'drawer'\n\nexport const drawerZBase = 100\n\nexport const formatDrawerSlug = ({ slug, depth }: { depth: number; slug: string }): string =>\n  `drawer_${depth}_${slug}`\n\nexport { useDrawerSlug } from './useDrawerSlug.js'\n\nexport const DrawerToggler: React.FC<TogglerProps> = ({\n  slug,\n  children,\n  className,\n  disabled,\n  onClick,\n  ...rest\n}) => {\n  const { openModal } = useModal()\n\n  const handleClick = useCallback(\n    (e) => {\n      openModal(slug)\n      if (typeof onClick === 'function') {\n        onClick(e)\n      }\n    },\n    [openModal, slug, onClick],\n  )\n\n  return (\n    <button className={className} disabled={disabled} onClick={handleClick} type=\"button\" {...rest}>\n      {children}\n    </button>\n  )\n}\n\nexport const Drawer: React.FC<Props> = ({\n  slug,\n  children,\n  className,\n  gutter = true,\n  Header,\n  hoverTitle,\n  title,\n}) => {\n  const { t } = useTranslation()\n  const { closeModal, modalState } = useModal()\n  const drawerDepth = useDrawerDepth()\n\n  const [isOpen, setIsOpen] = useState(false)\n  const [animateIn, setAnimateIn] = useState(false)\n\n  useEffect(() => {\n    setIsOpen(modalState[slug]?.isOpen)\n  }, [slug, modalState])\n\n  useEffect(() => {\n    setAnimateIn(isOpen)\n  }, [isOpen])\n\n  if (isOpen) {\n    // IMPORTANT: do not render the drawer until it is explicitly open, this is to avoid large html trees especially when nesting drawers\n    return (\n      <DrawerDepthProvider>\n        <Modal\n          className={[\n            className,\n            baseClass,\n            animateIn && `${baseClass}--is-open`,\n            drawerDepth > 1 && `${baseClass}--nested`,\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          slug={slug}\n          style={{\n            zIndex: drawerZBase + drawerDepth,\n          }}\n        >\n          {(!drawerDepth || drawerDepth === 1) && <div className={`${baseClass}__blur-bg`} />}\n          <button\n            aria-label={t('general:close')}\n            className={`${baseClass}__close`}\n            id={`close-drawer__${slug}`}\n            onClick={() => closeModal(slug)}\n            type=\"button\"\n          />\n          <div\n            className={`${baseClass}__content`}\n            style={{\n              width: `calc(100% - (${drawerDepth} * var(--gutter-h))`,\n            }}\n          >\n            <div className={`${baseClass}__blur-bg-content`} />\n            <Gutter className={`${baseClass}__content-children`} left={gutter} right={gutter}>\n              {Header}\n              {Header === undefined && (\n                <div className={`${baseClass}__header`}>\n                  <h2 className={`${baseClass}__header__title`} title={hoverTitle ? title : null}>\n                    {title}\n                  </h2>\n                  {/* TODO: the `button` HTML element breaks CSS transitions on the drawer for some reason...\n                    i.e. changing to a `div` element will fix the animation issue but will break accessibility\n                  */}\n                  <button\n                    aria-label={t('general:close')}\n                    className={`${baseClass}__header__close`}\n                    id={`close-drawer__${slug}`}\n                    onClick={() => closeModal(slug)}\n                    type=\"button\"\n                  >\n                    <XIcon />\n                  </button>\n                </div>\n              )}\n              {children}\n            </Gutter>\n          </div>\n        </Modal>\n      </DrawerDepthProvider>\n    )\n  }\n\n  return null\n}\n\nexport const DrawerDepthContext = createContext(1)\n\nexport const DrawerDepthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n  const parentDepth = useDrawerDepth()\n  const depth = parentDepth + 1\n\n  return <DrawerDepthContext.Provider value={depth}>{children}</DrawerDepthContext.Provider>\n}\n\nexport const useDrawerDepth = (): number => useContext(DrawerDepthContext)\n"],"mappings":"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","ignoreList":[]}