@plasmicpkgs/dnd-kit 0.0.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Latipov Abdukhamid
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+Plasmic components and registration calls for dnd-kit

package/dist/dnd-kit.cjs.development.js

@@ -0,0 +1,419 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var React = require('react');
+var React__default = _interopDefault(React);
+var reactDom = require('react-dom');
+var testUtils = require('react-dom/test-utils');
+var core = require('@dnd-kit/core');
+var sortable = require('@dnd-kit/sortable');
+var host = require('@plasmicapp/host');
+var modifiers = require('@dnd-kit/modifiers');
+var registerComponent = _interopDefault(require('@plasmicapp/host/registerComponent'));
+
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+
+function registerComponentHelper(loader, component, meta) {
+  if (loader) {
+    loader.registerComponent(component, meta);
+  } else {
+    registerComponent(component, meta);
+  }
+}
+
+var _excluded = ["color", "dragOverlay", "dragging", "disabled", "fadeIn", "height", "index", "listeners", "renderItem", "sorting", "style", "transition", "transform", "value", "wrapperStyle"];
+var Item = /*#__PURE__*/React__default.memo(/*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
+  var _transform$x, _transform$y, _transform$scaleX, _transform$scaleY;
+  var dragOverlay = _ref.dragOverlay,
+    dragging = _ref.dragging,
+    fadeIn = _ref.fadeIn,
+    index = _ref.index,
+    listeners = _ref.listeners,
+    _ref$renderItem = _ref.renderItem,
+    renderItem = _ref$renderItem === void 0 ? function () {
+      return React__default.createElement("div", null);
+    } : _ref$renderItem,
+    sorting = _ref.sorting,
+    style = _ref.style,
+    transition = _ref.transition,
+    transform = _ref.transform,
+    value = _ref.value,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  React.useEffect(function () {
+    if (!dragOverlay) {
+      return;
+    }
+    document.body.style.cursor = "grabbing";
+    return function () {
+      document.body.style.cursor = "";
+    };
+  }, [dragOverlay]);
+  var child = renderItem({
+    dragOverlay: Boolean(dragOverlay),
+    dragging: Boolean(dragging),
+    sorting: Boolean(sorting),
+    index: index,
+    fadeIn: Boolean(fadeIn),
+    listeners: listeners,
+    ref: ref,
+    style: style,
+    transform: transform,
+    transition: transition,
+    value: value
+  }, value);
+  return testUtils.isElement(child) ? React.cloneElement(child, {
+    ref: ref,
+    style: {
+      transition: [transition].filter(Boolean).join(", "),
+      transform: "translate3d(" + ((_transform$x = transform == null ? void 0 : transform.x) != null ? _transform$x : 0) + "px, " + ((_transform$y = transform == null ? void 0 : transform.y) != null ? _transform$y : 0) + "px, 0) scaleX(" + ((_transform$scaleX = transform == null ? void 0 : transform.scaleX) != null ? _transform$scaleX : 1) + ") scaleY(" + ((_transform$scaleY = transform == null ? void 0 : transform.scaleY) != null ? _transform$scaleY : 1)
+    }
+  }) : child;
+}));
+var dropAnimationConfig = {
+  sideEffects: /*#__PURE__*/core.defaultDropAnimationSideEffects({
+    styles: {
+      active: {
+        opacity: "0.5"
+      }
+    }
+  })
+};
+var screenReaderInstructions = {
+  draggable: "\n    To pick up a sortable item, press the space bar.\n    While sorting, use the arrow keys to move the item.\n    Press space again to drop the item in its new position, or press escape to cancel.\n  "
+};
+var modifierByName = {
+  restrictToVerticalAxis: modifiers.restrictToVerticalAxis,
+  restrictToWindowEdges: modifiers.restrictToWindowEdges,
+  restrictToHorizontalAxis: modifiers.restrictToHorizontalAxis,
+  restrictToParentElement: modifiers.restrictToParentElement,
+  restrictToFirstScrollableAncestor: modifiers.restrictToFirstScrollableAncestor
+};
+function Sortable(_ref2) {
+  var _modifiers;
+  var className = _ref2.className,
+    style = _ref2.style,
+    activationConstraint = _ref2.activationConstraint,
+    animateLayoutChanges = _ref2.animateLayoutChanges,
+    _ref2$adjustScale = _ref2.adjustScale,
+    adjustScale = _ref2$adjustScale === void 0 ? false : _ref2$adjustScale,
+    _ref2$collisionDetect = _ref2.collisionDetection,
+    collisionDetection = _ref2$collisionDetect === void 0 ? core.closestCenter : _ref2$collisionDetect,
+    _ref2$coordinateGette = _ref2.coordinateGetter,
+    coordinateGetter = _ref2$coordinateGette === void 0 ? sortable.sortableKeyboardCoordinates : _ref2$coordinateGette,
+    _ref2$dropAnimation = _ref2.dropAnimation,
+    dropAnimation = _ref2$dropAnimation === void 0 ? dropAnimationConfig : _ref2$dropAnimation,
+    getNewIndex = _ref2.getNewIndex,
+    _ref2$rowKey = _ref2.rowKey,
+    rowKey = _ref2$rowKey === void 0 ? function (item) {
+      return item.id;
+    } : _ref2$rowKey,
+    _ref2$items = _ref2.items,
+    initialItems = _ref2$items === void 0 ? [] : _ref2$items,
+    measuring = _ref2.measuring,
+    modifiers = _ref2.modifiers,
+    _renderItem = _ref2.renderItem,
+    _ref2$reorderItems = _ref2.reorderItems,
+    reorderItems = _ref2$reorderItems === void 0 ? sortable.arrayMove : _ref2$reorderItems,
+    _ref2$strategy = _ref2.strategy,
+    strategy = _ref2$strategy === void 0 ? sortable.rectSortingStrategy : _ref2$strategy,
+    _ref2$useDragOverlay = _ref2.useDragOverlay,
+    useDragOverlay = _ref2$useDragOverlay === void 0 ? true : _ref2$useDragOverlay,
+    modifierNames = _ref2.modifierNames,
+    themeResetClass = _ref2.themeResetClass,
+    onReorder = _ref2.onReorder;
+  modifiers = (_modifiers = modifiers) != null ? _modifiers : (modifierNames != null ? modifierNames : []).map(function (name) {
+    return modifierByName[name];
+  });
+  // This is the optimistic version.
+  var _useState = React.useState(function () {
+      return initialItems;
+    }),
+    items = _useState[0],
+    setItems = _useState[1];
+  React.useEffect(function () {
+    setItems(initialItems);
+  }, [initialItems]);
+  var _useState2 = React.useState(null),
+    activeId = _useState2[0],
+    setActiveId = _useState2[1];
+  var sensors = core.useSensors(core.useSensor(core.MouseSensor, {
+    activationConstraint: activationConstraint
+  }), core.useSensor(core.TouchSensor, {
+    activationConstraint: activationConstraint
+  }), core.useSensor(core.KeyboardSensor, {
+    // Disable smooth scrolling in Cypress automated tests
+    scrollBehavior: "Cypress" in globalThis ? "auto" : undefined,
+    coordinateGetter: coordinateGetter
+  }));
+  var isFirstAnnouncement = React.useRef(true);
+  var getIndex = function getIndex(id) {
+    return items.findIndex(function (item) {
+      return rowKey(item) === id;
+    });
+  };
+  var getPosition = function getPosition(id) {
+    return getIndex(id) + 1;
+  };
+  var activeIndex = activeId ? getIndex(activeId) : -1;
+  var announcements = {
+    onDragStart: function onDragStart(_ref3) {
+      var id = _ref3.active.id;
+      return "Picked up sortable item " + String(id) + ". Sortable item " + id + " is in position " + getPosition(id) + " of " + items.length;
+    },
+    onDragOver: function onDragOver(_ref4) {
+      var active = _ref4.active,
+        over = _ref4.over;
+      // In this specific use-case, the picked up item's `id` is always the same as the first `over` id.
+      // The first `onDragOver` event therefore doesn't need to be announced, because it is called
+      // immediately after the `onDragStart` announcement and is redundant.
+      if (isFirstAnnouncement.current === true) {
+        isFirstAnnouncement.current = false;
+        return;
+      }
+      if (over) {
+        return "Sortable item " + active.id + " was moved into position " + getPosition(over.id) + " of " + items.length;
+      }
+      return;
+    },
+    onDragEnd: function onDragEnd(_ref5) {
+      var active = _ref5.active,
+        over = _ref5.over;
+      if (over) {
+        return "Sortable item " + active.id + " was dropped at position " + getPosition(over.id) + " of " + items.length;
+      }
+      return;
+    },
+    onDragCancel: function onDragCancel(_ref6) {
+      var id = _ref6.active.id;
+      return "Sorting was cancelled. Sortable item " + id + " was dropped and returned to position " + getPosition(id) + " of " + items.length + ".";
+    }
+  };
+  React.useEffect(function () {
+    if (!activeId) {
+      isFirstAnnouncement.current = true;
+    }
+  }, [activeId]);
+  return React__default.createElement("div", {
+    className: className,
+    style: style
+  }, React__default.createElement(core.DndContext, {
+    accessibility: {
+      announcements: announcements,
+      screenReaderInstructions: screenReaderInstructions
+    },
+    sensors: sensors,
+    collisionDetection: collisionDetection,
+    onDragStart: function onDragStart(_ref7) {
+      var active = _ref7.active;
+      if (!active) {
+        return;
+      }
+      setActiveId(active.id);
+    },
+    onDragEnd: function onDragEnd(_ref8) {
+      var over = _ref8.over;
+      setActiveId(null);
+      if (over) {
+        var overIndex = getIndex(over.id);
+        var reordered = reorderItems(items, activeIndex, overIndex);
+        onReorder == null || onReorder(activeIndex, overIndex, reordered, items);
+        if (activeIndex !== overIndex) {
+          setItems(function (items) {
+            return reordered;
+          });
+        }
+      }
+    },
+    onDragCancel: function onDragCancel() {
+      return setActiveId(null);
+    },
+    measuring: measuring,
+    modifiers: modifiers
+  }, React__default.createElement(sortable.SortableContext, {
+    items: items.map(rowKey),
+    strategy: strategy
+  }, items.map(function (value, index) {
+    return React__default.createElement(SortableItem, {
+      key: rowKey(value),
+      id: rowKey(value),
+      value: value,
+      index: index,
+      renderItem: _renderItem,
+      animateLayoutChanges: animateLayoutChanges,
+      useDragOverlay: useDragOverlay,
+      getNewIndex: getNewIndex
+    });
+  })), useDragOverlay && typeof document !== "undefined" ? reactDom.createPortal(React__default.createElement(core.DragOverlay, {
+    adjustScale: adjustScale,
+    dropAnimation: dropAnimation
+  }, activeId ? React__default.createElement(Item, {
+    index: activeIndex,
+    value: items[activeIndex],
+    renderItem: function renderItem() {
+      return React__default.createElement("div", {
+        className: themeResetClass
+      }, _renderItem.apply(void 0, arguments));
+    },
+    dragOverlay: true
+  }) : null), document.body) : null));
+}
+function SortableItem(_ref9) {
+  var animateLayoutChanges = _ref9.animateLayoutChanges,
+    getNewIndex = _ref9.getNewIndex,
+    id = _ref9.id,
+    value = _ref9.value,
+    index = _ref9.index,
+    renderItem = _ref9.renderItem,
+    useDragOverlay = _ref9.useDragOverlay;
+  var sortableData = sortable.useSortable({
+    id: id,
+    animateLayoutChanges: animateLayoutChanges,
+    getNewIndex: getNewIndex
+  });
+  var attributes = sortableData.attributes,
+    isDragging = sortableData.isDragging,
+    isSorting = sortableData.isSorting,
+    listeners = sortableData.listeners,
+    setNodeRef = sortableData.setNodeRef,
+    transform = sortableData.transform,
+    transition = sortableData.transition;
+  return React__default.createElement(host.DataProvider, {
+    hidden: true,
+    name: "sortableItem",
+    data: sortableData
+  }, React__default.createElement(Item, Object.assign({
+    ref: setNodeRef,
+    value: value,
+    dragging: isDragging,
+    sorting: isSorting,
+    renderItem: renderItem,
+    index: index,
+    transform: transform,
+    transition: transition,
+    listeners: listeners,
+    "data-index": index,
+    "data-id": id,
+    dragOverlay: !useDragOverlay && isDragging
+  }, attributes)));
+}
+function SortableHandle(_ref10) {
+  var children = _ref10.children;
+  var data = host.useSelector("sortableItem");
+  var child = React__default.Children.toArray(children)[0];
+  return testUtils.isElement(child) ? React.cloneElement(child, _extends({}, data == null ? void 0 : data.listeners, {
+    ref: data == null ? void 0 : data.setActivatorNodeRef,
+    tabIndex: 0
+  })) : null;
+}
+function registerSortable(loader) {
+  registerComponentHelper(loader, SortableHandle, {
+    name: "SortableHandle",
+    props: {
+      children: {
+        type: "slot",
+        defaultValue: {
+          type: "text",
+          value: "Handle"
+        },
+        mergeWithParent: true
+      }
+    },
+    importPath: "@plasmicpkgs/dnd-kit",
+    importName: "SortableHandle"
+  });
+  registerComponentHelper(loader, Sortable, {
+    name: "Sortable",
+    props: {
+      items: {
+        type: "array",
+        defaultValue: [{
+          id: 1,
+          name: "hello"
+        }, {
+          id: 2,
+          name: "world"
+        }]
+      },
+      modifierNames: {
+        displayName: "Options",
+        type: "choice",
+        multiSelect: true,
+        options: Object.keys(modifierByName).map(function (v) {
+          return {
+            value: v,
+            label: v[0].toUpperCase() + v.slice(1).replace(/([a-z])([A-Z])/g, "$1 $2")
+          };
+        })
+      },
+      onReorder: {
+        type: "eventHandler",
+        argTypes: [{
+          name: "fromIndex",
+          type: "number"
+        }, {
+          name: "toIndex",
+          type: "number"
+        }, {
+          name: "newItems",
+          type: "object"
+        }, {
+          name: "oldItems",
+          type: "object"
+        }]
+      },
+      themeResetClass: {
+        type: "themeResetClass"
+      },
+      renderItem: {
+        type: "slot",
+        renderPropParams: ["sortableData", "currentItem"],
+        mergeWithParent: true,
+        defaultValue: {
+          type: "hbox",
+          children: [{
+            type: "text",
+            value: "Item"
+          }, {
+            type: "component",
+            name: "SortableHandle"
+          }]
+        }
+      }
+    },
+    importPath: "@plasmicpkgs/dnd-kit",
+    importName: "Sortable"
+  });
+}
+
+function registerAll(loader) {
+  registerSortable(loader);
+}
+
+exports.Item = Item;
+exports.Sortable = Sortable;
+exports.SortableHandle = SortableHandle;
+exports.SortableItem = SortableItem;
+exports.modifierByName = modifierByName;
+exports.registerAll = registerAll;
+exports.registerSortable = registerSortable;
+//# sourceMappingURL=dnd-kit.cjs.development.js.map

package/dist/dnd-kit.cjs.development.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dnd-kit.cjs.development.js","sources":["../src/util.ts","../src/sortable.tsx","../src/index.tsx"],"sourcesContent":["import {\n  ComponentMeta,\n  default as registerComponent,\n} from \"@plasmicapp/host/registerComponent\";\nimport { default as registerGlobalContext } from \"@plasmicapp/host/registerGlobalContext\";\nimport { default as registerToken } from \"@plasmicapp/host/registerToken\";\nimport React from \"react\";\n\nexport type Registerable = {\n  registerComponent: typeof registerComponent;\n  registerGlobalContext: typeof registerGlobalContext;\n  registerToken: typeof registerToken;\n};\n\nexport function registerComponentHelper<T extends React.ComponentType<any>>(\n  loader: Registerable | undefined,\n  component: T,\n  meta: ComponentMeta<React.ComponentProps<T>>\n) {\n  if (loader) {\n    loader.registerComponent(component, meta);\n  } else {\n    registerComponent(component, meta);\n  }\n}\n","import React, { cloneElement, useEffect, useRef, useState } from \"react\";\nimport type { Key, ReactElement, ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { isElement } from \"react-dom/test-utils\";\nimport {\n  closestCenter,\n  DragOverlay,\n  DndContext,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n  defaultDropAnimationSideEffects,\n} from \"@dnd-kit/core\";\nimport type {\n  SortingStrategy,\n  AnimateLayoutChanges,\n  NewIndexGetter,\n} from \"@dnd-kit/sortable\";\nimport {\n  arrayMove,\n  useSortable,\n  SortableContext,\n  sortableKeyboardCoordinates,\n  rectSortingStrategy,\n} from \"@dnd-kit/sortable\";\n\nimport { DataProvider, useSelector } from \"@plasmicapp/host\";\n\nimport type {\n  DraggableSyntheticListeners,\n  Active,\n  Announcements,\n  CollisionDetection,\n  DropAnimation,\n  KeyboardCoordinateGetter,\n  Modifiers,\n  MeasuringConfiguration,\n  PointerActivationConstraint,\n  ScreenReaderInstructions,\n  UniqueIdentifier,\n} from \"@dnd-kit/core\";\nimport type { Transform } from \"@dnd-kit/utilities\";\nimport {\n  restrictToFirstScrollableAncestor,\n  restrictToHorizontalAxis,\n  restrictToParentElement,\n  restrictToVerticalAxis,\n  restrictToWindowEdges,\n} from \"@dnd-kit/modifiers\";\nimport { Registerable, registerComponentHelper } from \"./util\";\n\nexport interface ItemProps {\n  dragOverlay?: boolean;\n  color?: string;\n  disabled?: boolean;\n  dragging?: boolean;\n  height?: number;\n  index?: number;\n  fadeIn?: boolean;\n  transform?: Transform | null;\n  listeners?: DraggableSyntheticListeners;\n  sorting?: boolean;\n  style?: React.CSSProperties;\n  transition?: string | null;\n  wrapperStyle?: React.CSSProperties;\n  value: React.ReactNode;\n  renderItem?(\n    args: {\n      dragOverlay: boolean;\n      dragging: boolean;\n      sorting: boolean;\n      index: number | undefined;\n      fadeIn: boolean;\n      listeners: DraggableSyntheticListeners;\n      ref: React.Ref<HTMLElement>;\n      style: React.CSSProperties | undefined;\n      transform: ItemProps[\"transform\"];\n      transition: ItemProps[\"transition\"];\n      value: ItemProps[\"value\"];\n    },\n    currentItem: ItemProps[\"value\"]\n  ): React.ReactElement;\n}\n\nexport const Item = React.memo(\n  React.forwardRef<HTMLLIElement, ItemProps>(\n    (\n      {\n        color,\n        dragOverlay,\n        dragging,\n        disabled,\n        fadeIn,\n        height,\n        index,\n        listeners,\n        renderItem = () => <div />,\n        sorting,\n        style,\n        transition,\n        transform,\n        value,\n        wrapperStyle,\n        ...props\n      },\n      ref\n    ) => {\n      useEffect(() => {\n        if (!dragOverlay) {\n          return;\n        }\n\n        document.body.style.cursor = \"grabbing\";\n\n        return () => {\n          document.body.style.cursor = \"\";\n        };\n      }, [dragOverlay]);\n\n      const child = renderItem(\n        {\n          dragOverlay: Boolean(dragOverlay),\n          dragging: Boolean(dragging),\n          sorting: Boolean(sorting),\n          index,\n          fadeIn: Boolean(fadeIn),\n          listeners,\n          ref,\n          style,\n          transform,\n          transition,\n          value,\n        },\n        value\n      );\n\n      return isElement(child)\n        ? cloneElement(child, {\n            ref,\n            style: {\n              transition: [transition].filter(Boolean).join(\", \"),\n              transform: `translate3d(${transform?.x ?? 0}px, ${\n                transform?.y ?? 0\n              }px, 0) scaleX(${transform?.scaleX ?? 1}) scaleY(${\n                transform?.scaleY ?? 1\n              }`,\n            },\n          })\n        : child;\n    }\n  )\n);\n\nexport interface SortableProps {\n  onReorder?: (\n    fromIndex: number,\n    toIndex: number,\n    newItems: any[],\n    oldItems: any[]\n  ) => void;\n  themeResetClass?: string;\n  activationConstraint?: PointerActivationConstraint;\n  animateLayoutChanges?: AnimateLayoutChanges;\n  adjustScale?: boolean;\n  collisionDetection?: CollisionDetection;\n  coordinateGetter?: KeyboardCoordinateGetter;\n  Container?: any; // To-do: Fix me\n  dropAnimation?: DropAnimation | null;\n  getNewIndex?: NewIndexGetter;\n  rowKey?: (item: any) => Key;\n  itemCount?: number;\n  items?: any[];\n  measuring?: MeasuringConfiguration;\n  modifiers?: Modifiers;\n  renderItem?: any;\n  removable?: boolean;\n  reorderItems?: typeof arrayMove;\n  strategy?: SortingStrategy;\n  style?: React.CSSProperties;\n  useDragOverlay?: boolean;\n  modifierNames?: (\n    | \"restrictToHorizontalAxis\"\n    | \"restrictToVerticalAxis\"\n    | \"restrictToWindowEdges\"\n    | \"restrictToParentElement\"\n    | \"restrictToFirstScrollableAncestor\"\n  )[];\n  getItemStyles?(args: {\n    id: UniqueIdentifier;\n    index: number;\n    isSorting: boolean;\n    isDragOverlay: boolean;\n    overIndex: number;\n    isDragging: boolean;\n  }): React.CSSProperties;\n  wrapperStyle?(args: {\n    active: Pick<Active, \"id\"> | null;\n    index: number;\n    isDragging: boolean;\n    id: UniqueIdentifier;\n  }): React.CSSProperties;\n  isDisabled?(id: UniqueIdentifier): boolean;\n  className?: string;\n}\n\nconst dropAnimationConfig: DropAnimation = {\n  sideEffects: defaultDropAnimationSideEffects({\n    styles: {\n      active: {\n        opacity: \"0.5\",\n      },\n    },\n  }),\n};\n\nconst screenReaderInstructions: ScreenReaderInstructions = {\n  draggable: `\n    To pick up a sortable item, press the space bar.\n    While sorting, use the arrow keys to move the item.\n    Press space again to drop the item in its new position, or press escape to cancel.\n  `,\n};\n\nexport const modifierByName = {\n  restrictToVerticalAxis,\n  restrictToWindowEdges,\n  restrictToHorizontalAxis,\n  restrictToParentElement,\n  restrictToFirstScrollableAncestor,\n};\n\nexport function Sortable({\n  className,\n  style,\n  activationConstraint,\n  animateLayoutChanges,\n  adjustScale = false,\n  collisionDetection = closestCenter,\n  coordinateGetter = sortableKeyboardCoordinates,\n  dropAnimation = dropAnimationConfig,\n  getNewIndex,\n  rowKey = (item) => item.id,\n  items: initialItems = [],\n  measuring,\n  modifiers,\n  removable,\n  renderItem,\n  reorderItems = arrayMove,\n  strategy = rectSortingStrategy,\n  useDragOverlay = true,\n  modifierNames,\n  themeResetClass,\n  onReorder,\n}: SortableProps) {\n  modifiers =\n    modifiers ?? (modifierNames ?? []).map((name) => modifierByName[name]);\n\n  // This is the optimistic version.\n  const [items, setItems] = useState<UniqueIdentifier[]>(() => initialItems);\n  useEffect(() => {\n    setItems(initialItems);\n  }, [initialItems]);\n  const [activeId, setActiveId] = useState<UniqueIdentifier | null>(null);\n  const sensors = useSensors(\n    useSensor(MouseSensor, {\n      activationConstraint,\n    }),\n    useSensor(TouchSensor, {\n      activationConstraint,\n    }),\n    useSensor(KeyboardSensor, {\n      // Disable smooth scrolling in Cypress automated tests\n      scrollBehavior: \"Cypress\" in globalThis ? \"auto\" : undefined,\n      coordinateGetter,\n    })\n  );\n  const isFirstAnnouncement = useRef(true);\n  const getIndex = (id: UniqueIdentifier) =>\n    items.findIndex((item) => rowKey(item) === id);\n  const getPosition = (id: UniqueIdentifier) => getIndex(id) + 1;\n  const activeIndex = activeId ? getIndex(activeId) : -1;\n  const announcements: Announcements = {\n    onDragStart({ active: { id } }) {\n      return `Picked up sortable item ${String(\n        id\n      )}. Sortable item ${id} is in position ${getPosition(id)} of ${\n        items.length\n      }`;\n    },\n    onDragOver({ active, over }) {\n      // In this specific use-case, the picked up item's `id` is always the same as the first `over` id.\n      // The first `onDragOver` event therefore doesn't need to be announced, because it is called\n      // immediately after the `onDragStart` announcement and is redundant.\n      if (isFirstAnnouncement.current === true) {\n        isFirstAnnouncement.current = false;\n        return;\n      }\n\n      if (over) {\n        return `Sortable item ${\n          active.id\n        } was moved into position ${getPosition(over.id)} of ${items.length}`;\n      }\n\n      return;\n    },\n    onDragEnd({ active, over }) {\n      if (over) {\n        return `Sortable item ${\n          active.id\n        } was dropped at position ${getPosition(over.id)} of ${items.length}`;\n      }\n\n      return;\n    },\n    onDragCancel({ active: { id } }) {\n      return `Sorting was cancelled. Sortable item ${id} was dropped and returned to position ${getPosition(\n        id\n      )} of ${items.length}.`;\n    },\n  };\n  useEffect(() => {\n    if (!activeId) {\n      isFirstAnnouncement.current = true;\n    }\n  }, [activeId]);\n\n  return (\n    <div className={className} style={style}>\n      <DndContext\n        accessibility={{\n          announcements,\n          screenReaderInstructions,\n        }}\n        sensors={sensors}\n        collisionDetection={collisionDetection}\n        onDragStart={({ active }) => {\n          if (!active) {\n            return;\n          }\n\n          setActiveId(active.id);\n        }}\n        onDragEnd={({ over }) => {\n          setActiveId(null);\n\n          if (over) {\n            const overIndex = getIndex(over.id);\n            const reordered = reorderItems(items, activeIndex, overIndex);\n            onReorder?.(activeIndex, overIndex, reordered, items);\n            if (activeIndex !== overIndex) {\n              setItems((items) => reordered);\n            }\n          }\n        }}\n        onDragCancel={() => setActiveId(null)}\n        measuring={measuring}\n        modifiers={modifiers}\n      >\n        <SortableContext items={items.map(rowKey)} strategy={strategy}>\n          {items.map((value, index) => (\n            <SortableItem\n              key={rowKey(value)}\n              id={rowKey(value)}\n              value={value}\n              index={index}\n              renderItem={renderItem}\n              animateLayoutChanges={animateLayoutChanges}\n              useDragOverlay={useDragOverlay}\n              getNewIndex={getNewIndex}\n            />\n          ))}\n        </SortableContext>\n        {useDragOverlay && typeof document !== \"undefined\"\n          ? createPortal(\n              <DragOverlay\n                adjustScale={adjustScale}\n                dropAnimation={dropAnimation}\n              >\n                {activeId ? (\n                  <Item\n                    index={activeIndex}\n                    value={items[activeIndex]}\n                    renderItem={(...args) => (\n                      <div className={themeResetClass}>\n                        {renderItem(...args)}\n                      </div>\n                    )}\n                    dragOverlay\n                  />\n                ) : null}\n              </DragOverlay>,\n              document.body\n            )\n          : null}\n      </DndContext>\n    </div>\n  );\n}\n\ninterface SortableItemProps {\n  animateLayoutChanges?: AnimateLayoutChanges;\n  getNewIndex?: NewIndexGetter;\n  id: UniqueIdentifier;\n  index: number;\n  useDragOverlay?: boolean;\n  renderItem?(args: any): React.ReactElement;\n  value?: any;\n}\n\nexport function SortableItem({\n  animateLayoutChanges,\n  getNewIndex,\n  id,\n  value,\n  index,\n  renderItem,\n  useDragOverlay,\n}: SortableItemProps) {\n  const sortableData = useSortable({\n    id,\n    animateLayoutChanges,\n    getNewIndex,\n  });\n  const {\n    attributes,\n    isDragging,\n    isSorting,\n    listeners,\n    setNodeRef,\n    transform,\n    transition,\n  } = sortableData;\n\n  return (\n    <DataProvider hidden={true} name={\"sortableItem\"} data={sortableData}>\n      <Item\n        ref={setNodeRef}\n        value={value}\n        dragging={isDragging}\n        sorting={isSorting}\n        renderItem={renderItem}\n        index={index}\n        transform={transform}\n        transition={transition}\n        listeners={listeners}\n        data-index={index}\n        data-id={id}\n        dragOverlay={!useDragOverlay && isDragging}\n        {...attributes}\n      />\n    </DataProvider>\n  );\n}\n\nexport function SortableHandle({ children }: { children?: ReactNode }) {\n  const data = useSelector(\"sortableItem\");\n  const child = React.Children.toArray(children)[0];\n  return isElement(child)\n    ? cloneElement(child as ReactElement, {\n        ...data?.listeners,\n        ref: data?.setActivatorNodeRef,\n        tabIndex: 0,\n      })\n    : null;\n}\n\nexport function registerSortable(loader?: Registerable) {\n  registerComponentHelper(loader, SortableHandle, {\n    name: \"SortableHandle\",\n    props: {\n      children: {\n        type: \"slot\",\n        defaultValue: {\n          type: \"text\",\n          value: \"Handle\",\n        },\n        mergeWithParent: true,\n      } as any,\n    },\n    importPath: \"@plasmicpkgs/dnd-kit\",\n    importName: \"SortableHandle\",\n  });\n\n  registerComponentHelper(loader, Sortable, {\n    name: \"Sortable\",\n    props: {\n      items: {\n        type: \"array\",\n        defaultValue: [\n          { id: 1, name: \"hello\" },\n          { id: 2, name: \"world\" },\n        ],\n      },\n      modifierNames: {\n        displayName: \"Options\",\n        type: \"choice\",\n        multiSelect: true,\n        options: Object.keys(modifierByName).map((v) => ({\n          value: v,\n          label:\n            v[0].toUpperCase() + v.slice(1).replace(/([a-z])([A-Z])/g, \"$1 $2\"),\n        })),\n      },\n      onReorder: {\n        type: \"eventHandler\",\n        argTypes: [\n          {\n            name: \"fromIndex\",\n            type: \"number\",\n          },\n          {\n            name: \"toIndex\",\n            type: \"number\",\n          },\n          {\n            name: \"newItems\",\n            type: \"object\",\n          },\n          {\n            name: \"oldItems\",\n            type: \"object\",\n          },\n        ],\n      },\n      themeResetClass: {\n        type: \"themeResetClass\",\n      },\n      renderItem: {\n        type: \"slot\",\n        renderPropParams: [\"sortableData\", \"currentItem\"],\n        mergeWithParent: true,\n        defaultValue: {\n          type: \"hbox\",\n          children: [\n            {\n              type: \"text\",\n              value: \"Item\",\n            },\n            {\n              type: \"component\",\n              name: \"SortableHandle\",\n            },\n          ],\n        },\n      } as any,\n    },\n    importPath: \"@plasmicpkgs/dnd-kit\",\n    importName: \"Sortable\",\n  });\n}\n","import { registerSortable } from \"./sortable\";\nimport { Registerable } from \"./util\";\n\nexport function registerAll(loader?: Registerable) {\n  registerSortable(loader);\n}\n\nexport * from \"./sortable\";\n"],"names":["registerComponentHelper","loader","component","meta","registerComponent","Item","React","memo","forwardRef","_ref","ref","dragOverlay","dragging","disabled","fadeIn","height","index","listeners","_ref$renderItem","renderItem","sorting","style","transition","transform","value","wrapperStyle","props","_objectWithoutPropertiesLoose","_excluded","useEffect","document","body","cursor","child","Boolean","isElement","cloneElement","filter","join","_transform$x","x","_transform$y","y","_transform$scaleX","scaleX","_transform$scaleY","scaleY","dropAnimationConfig","sideEffects","defaultDropAnimationSideEffects","styles","active","opacity","screenReaderInstructions","draggable","modifierByName","restrictToVerticalAxis","restrictToWindowEdges","restrictToHorizontalAxis","restrictToParentElement","restrictToFirstScrollableAncestor","Sortable","_ref2","className","activationConstraint","animateLayoutChanges","_ref2$adjustScale","adjustScale","_ref2$collisionDetect","collisionDetection","closestCenter","_ref2$coordinateGette","coordinateGetter","sortableKeyboardCoordinates","_ref2$dropAnimation","dropAnimation","getNewIndex","_ref2$rowKey","rowKey","item","id","_ref2$items","items","initialItems","measuring","modifiers","removable","_ref2$reorderItems","reorderItems","arrayMove","_ref2$strategy","strategy","rectSortingStrategy","_ref2$useDragOverlay","useDragOverlay","modifierNames","themeResetClass","onReorder","_modifiers","map","name","_useState","useState","setItems","_useState2","activeId","setActiveId","sensors","useSensors","useSensor","MouseSensor","TouchSensor","KeyboardSensor","scrollBehavior","globalThis","undefined","isFirstAnnouncement","useRef","getIndex","findIndex","getPosition","activeIndex","announcements","onDragStart","_ref3","String","length","onDragOver","_ref4","over","current","onDragEnd","_ref5","onDragCancel","_ref6","DndContext","accessibility","_ref7","_ref8","overIndex","reordered","SortableContext","SortableItem","key","createPortal","DragOverlay","apply","arguments","_ref9","sortableData","useSortable","attributes","isDragging","isSorting","setNodeRef","DataProvider","hidden","data","SortableHandle","_ref10","children","useSelector","Children","toArray","_extends","setActivatorNodeRef","tabIndex","registerSortable","type","defaultValue","mergeWithParent","importPath","importName","displayName","multiSelect","options","Object","keys","v","label","toUpperCase","slice","replace","argTypes","renderPropParams","registerAll"],"mappings":"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"}

package/dist/dnd-kit.cjs.production.min.js

@@ -0,0 +1,2 @@
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),r=e(t),n=require("react-dom"),a=require("react-dom/test-utils"),o=require("@dnd-kit/core"),i=require("@dnd-kit/sortable"),s=require("@plasmicapp/host"),l=require("@dnd-kit/modifiers"),d=e(require("@plasmicapp/host/registerComponent"));function u(){return(u=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)({}).hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(null,arguments)}function c(e,t,r){e?e.registerComponent(t,r):d(t,r)}var m=["color","dragOverlay","dragging","disabled","fadeIn","height","index","listeners","renderItem","sorting","style","transition","transform","value","wrapperStyle"],f=r.memo(r.forwardRef((function(e,n){var o,i,s,l,d=e.dragOverlay,u=e.dragging,c=e.fadeIn,f=e.index,p=e.listeners,v=e.renderItem,g=void 0===v?function(){return r.createElement("div",null)}:v,y=e.sorting,b=e.style,S=e.transition,h=e.transform,x=e.value;!function(e,t){if(null==e)return{};var r={};for(var n in e)if({}.hasOwnProperty.call(e,n)){if(-1!==t.indexOf(n))continue;r[n]=e[n]}}(e,m),t.useEffect((function(){if(d)return document.body.style.cursor="grabbing",function(){document.body.style.cursor=""}}),[d]);var I=g({dragOverlay:Boolean(d),dragging:Boolean(u),sorting:Boolean(y),index:f,fadeIn:Boolean(c),listeners:p,ref:n,style:b,transform:h,transition:S,value:x},x);return a.isElement(I)?t.cloneElement(I,{ref:n,style:{transition:[S].filter(Boolean).join(", "),transform:"translate3d("+(null!=(o=null==h?void 0:h.x)?o:0)+"px, "+(null!=(i=null==h?void 0:h.y)?i:0)+"px, 0) scaleX("+(null!=(s=null==h?void 0:h.scaleX)?s:1)+") scaleY("+(null!=(l=null==h?void 0:h.scaleY)?l:1)}}):I}))),p={sideEffects:o.defaultDropAnimationSideEffects({styles:{active:{opacity:"0.5"}}})},v={draggable:"\n    To pick up a sortable item, press the space bar.\n    While sorting, use the arrow keys to move the item.\n    Press space again to drop the item in its new position, or press escape to cancel.\n  "},g={restrictToVerticalAxis:l.restrictToVerticalAxis,restrictToWindowEdges:l.restrictToWindowEdges,restrictToHorizontalAxis:l.restrictToHorizontalAxis,restrictToParentElement:l.restrictToParentElement,restrictToFirstScrollableAncestor:l.restrictToFirstScrollableAncestor};function y(e){var a,s=e.className,l=e.style,d=e.activationConstraint,u=e.animateLayoutChanges,c=e.adjustScale,m=void 0!==c&&c,y=e.collisionDetection,S=void 0===y?o.closestCenter:y,h=e.coordinateGetter,x=void 0===h?i.sortableKeyboardCoordinates:h,I=e.dropAnimation,E=void 0===I?p:I,C=e.getNewIndex,w=e.rowKey,O=void 0===w?function(e){return e.id}:w,D=e.items,N=void 0===D?[]:D,P=e.measuring,T=e.modifiers,A=e.renderItem,k=e.reorderItems,j=void 0===k?i.arrayMove:k,R=e.strategy,q=void 0===R?i.rectSortingStrategy:R,H=e.useDragOverlay,B=void 0===H||H,V=e.modifierNames,W=e.themeResetClass,L=e.onReorder;T=null!=(a=T)?a:(null!=V?V:[]).map((function(e){return g[e]}));var z=t.useState((function(){return N})),K=z[0],M=z[1];t.useEffect((function(){M(N)}),[N]);var F=t.useState(null),G=F[0],X=F[1],Y=o.useSensors(o.useSensor(o.MouseSensor,{activationConstraint:d}),o.useSensor(o.TouchSensor,{activationConstraint:d}),o.useSensor(o.KeyboardSensor,{scrollBehavior:"Cypress"in globalThis?"auto":void 0,coordinateGetter:x})),$=t.useRef(!0),_=function(e){return K.findIndex((function(t){return O(t)===e}))},U=function(e){return _(e)+1},Z=G?_(G):-1,J={onDragStart:function(e){var t=e.active.id;return"Picked up sortable item "+String(t)+". Sortable item "+t+" is in position "+U(t)+" of "+K.length},onDragOver:function(e){var t=e.over;if(!0!==$.current)return t?"Sortable item "+e.active.id+" was moved into position "+U(t.id)+" of "+K.length:void 0;$.current=!1},onDragEnd:function(e){var t=e.over;if(t)return"Sortable item "+e.active.id+" was dropped at position "+U(t.id)+" of "+K.length},onDragCancel:function(e){var t=e.active.id;return"Sorting was cancelled. Sortable item "+t+" was dropped and returned to position "+U(t)+" of "+K.length+"."}};return t.useEffect((function(){G||($.current=!0)}),[G]),r.createElement("div",{className:s,style:l},r.createElement(o.DndContext,{accessibility:{announcements:J,screenReaderInstructions:v},sensors:Y,collisionDetection:S,onDragStart:function(e){var t=e.active;t&&X(t.id)},onDragEnd:function(e){var t=e.over;if(X(null),t){var r=_(t.id),n=j(K,Z,r);null==L||L(Z,r,n,K),Z!==r&&M((function(e){return n}))}},onDragCancel:function(){return X(null)},measuring:P,modifiers:T},r.createElement(i.SortableContext,{items:K.map(O),strategy:q},K.map((function(e,t){return r.createElement(b,{key:O(e),id:O(e),value:e,index:t,renderItem:A,animateLayoutChanges:u,useDragOverlay:B,getNewIndex:C})}))),B&&"undefined"!=typeof document?n.createPortal(r.createElement(o.DragOverlay,{adjustScale:m,dropAnimation:E},G?r.createElement(f,{index:Z,value:K[Z],renderItem:function(){return r.createElement("div",{className:W},A.apply(void 0,arguments))},dragOverlay:!0}):null),document.body):null))}function b(e){var t=e.id,n=e.value,a=e.index,o=e.renderItem,l=e.useDragOverlay,d=i.useSortable({id:t,animateLayoutChanges:e.animateLayoutChanges,getNewIndex:e.getNewIndex}),u=d.isDragging;return r.createElement(s.DataProvider,{hidden:!0,name:"sortableItem",data:d},r.createElement(f,Object.assign({ref:d.setNodeRef,value:n,dragging:u,sorting:d.isSorting,renderItem:o,index:a,transform:d.transform,transition:d.transition,listeners:d.listeners,"data-index":a,"data-id":t,dragOverlay:!l&&u},d.attributes)))}function S(e){var n=e.children,o=s.useSelector("sortableItem"),i=r.Children.toArray(n)[0];return a.isElement(i)?t.cloneElement(i,u({},null==o?void 0:o.listeners,{ref:null==o?void 0:o.setActivatorNodeRef,tabIndex:0})):null}function h(e){c(e,S,{name:"SortableHandle",props:{children:{type:"slot",defaultValue:{type:"text",value:"Handle"},mergeWithParent:!0}},importPath:"@plasmicpkgs/dnd-kit",importName:"SortableHandle"}),c(e,y,{name:"Sortable",props:{items:{type:"array",defaultValue:[{id:1,name:"hello"},{id:2,name:"world"}]},modifierNames:{displayName:"Options",type:"choice",multiSelect:!0,options:Object.keys(g).map((function(e){return{value:e,label:e[0].toUpperCase()+e.slice(1).replace(/([a-z])([A-Z])/g,"$1 $2")}}))},onReorder:{type:"eventHandler",argTypes:[{name:"fromIndex",type:"number"},{name:"toIndex",type:"number"},{name:"newItems",type:"object"},{name:"oldItems",type:"object"}]},themeResetClass:{type:"themeResetClass"},renderItem:{type:"slot",renderPropParams:["sortableData","currentItem"],mergeWithParent:!0,defaultValue:{type:"hbox",children:[{type:"text",value:"Item"},{type:"component",name:"SortableHandle"}]}}},importPath:"@plasmicpkgs/dnd-kit",importName:"Sortable"})}exports.Item=f,exports.Sortable=y,exports.SortableHandle=S,exports.SortableItem=b,exports.modifierByName=g,exports.registerAll=function(e){h(e)},exports.registerSortable=h;
+//# sourceMappingURL=dnd-kit.cjs.production.min.js.map

package/dist/dnd-kit.cjs.production.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dnd-kit.cjs.production.min.js","sources":["../src/util.ts","../src/sortable.tsx","../src/index.tsx"],"sourcesContent":["import {\n  ComponentMeta,\n  default as registerComponent,\n} from \"@plasmicapp/host/registerComponent\";\nimport { default as registerGlobalContext } from \"@plasmicapp/host/registerGlobalContext\";\nimport { default as registerToken } from \"@plasmicapp/host/registerToken\";\nimport React from \"react\";\n\nexport type Registerable = {\n  registerComponent: typeof registerComponent;\n  registerGlobalContext: typeof registerGlobalContext;\n  registerToken: typeof registerToken;\n};\n\nexport function registerComponentHelper<T extends React.ComponentType<any>>(\n  loader: Registerable | undefined,\n  component: T,\n  meta: ComponentMeta<React.ComponentProps<T>>\n) {\n  if (loader) {\n    loader.registerComponent(component, meta);\n  } else {\n    registerComponent(component, meta);\n  }\n}\n","import React, { cloneElement, useEffect, useRef, useState } from \"react\";\nimport type { Key, ReactElement, ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { isElement } from \"react-dom/test-utils\";\nimport {\n  closestCenter,\n  DragOverlay,\n  DndContext,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n  defaultDropAnimationSideEffects,\n} from \"@dnd-kit/core\";\nimport type {\n  SortingStrategy,\n  AnimateLayoutChanges,\n  NewIndexGetter,\n} from \"@dnd-kit/sortable\";\nimport {\n  arrayMove,\n  useSortable,\n  SortableContext,\n  sortableKeyboardCoordinates,\n  rectSortingStrategy,\n} from \"@dnd-kit/sortable\";\n\nimport { DataProvider, useSelector } from \"@plasmicapp/host\";\n\nimport type {\n  DraggableSyntheticListeners,\n  Active,\n  Announcements,\n  CollisionDetection,\n  DropAnimation,\n  KeyboardCoordinateGetter,\n  Modifiers,\n  MeasuringConfiguration,\n  PointerActivationConstraint,\n  ScreenReaderInstructions,\n  UniqueIdentifier,\n} from \"@dnd-kit/core\";\nimport type { Transform } from \"@dnd-kit/utilities\";\nimport {\n  restrictToFirstScrollableAncestor,\n  restrictToHorizontalAxis,\n  restrictToParentElement,\n  restrictToVerticalAxis,\n  restrictToWindowEdges,\n} from \"@dnd-kit/modifiers\";\nimport { Registerable, registerComponentHelper } from \"./util\";\n\nexport interface ItemProps {\n  dragOverlay?: boolean;\n  color?: string;\n  disabled?: boolean;\n  dragging?: boolean;\n  height?: number;\n  index?: number;\n  fadeIn?: boolean;\n  transform?: Transform | null;\n  listeners?: DraggableSyntheticListeners;\n  sorting?: boolean;\n  style?: React.CSSProperties;\n  transition?: string | null;\n  wrapperStyle?: React.CSSProperties;\n  value: React.ReactNode;\n  renderItem?(\n    args: {\n      dragOverlay: boolean;\n      dragging: boolean;\n      sorting: boolean;\n      index: number | undefined;\n      fadeIn: boolean;\n      listeners: DraggableSyntheticListeners;\n      ref: React.Ref<HTMLElement>;\n      style: React.CSSProperties | undefined;\n      transform: ItemProps[\"transform\"];\n      transition: ItemProps[\"transition\"];\n      value: ItemProps[\"value\"];\n    },\n    currentItem: ItemProps[\"value\"]\n  ): React.ReactElement;\n}\n\nexport const Item = React.memo(\n  React.forwardRef<HTMLLIElement, ItemProps>(\n    (\n      {\n        color,\n        dragOverlay,\n        dragging,\n        disabled,\n        fadeIn,\n        height,\n        index,\n        listeners,\n        renderItem = () => <div />,\n        sorting,\n        style,\n        transition,\n        transform,\n        value,\n        wrapperStyle,\n        ...props\n      },\n      ref\n    ) => {\n      useEffect(() => {\n        if (!dragOverlay) {\n          return;\n        }\n\n        document.body.style.cursor = \"grabbing\";\n\n        return () => {\n          document.body.style.cursor = \"\";\n        };\n      }, [dragOverlay]);\n\n      const child = renderItem(\n        {\n          dragOverlay: Boolean(dragOverlay),\n          dragging: Boolean(dragging),\n          sorting: Boolean(sorting),\n          index,\n          fadeIn: Boolean(fadeIn),\n          listeners,\n          ref,\n          style,\n          transform,\n          transition,\n          value,\n        },\n        value\n      );\n\n      return isElement(child)\n        ? cloneElement(child, {\n            ref,\n            style: {\n              transition: [transition].filter(Boolean).join(\", \"),\n              transform: `translate3d(${transform?.x ?? 0}px, ${\n                transform?.y ?? 0\n              }px, 0) scaleX(${transform?.scaleX ?? 1}) scaleY(${\n                transform?.scaleY ?? 1\n              }`,\n            },\n          })\n        : child;\n    }\n  )\n);\n\nexport interface SortableProps {\n  onReorder?: (\n    fromIndex: number,\n    toIndex: number,\n    newItems: any[],\n    oldItems: any[]\n  ) => void;\n  themeResetClass?: string;\n  activationConstraint?: PointerActivationConstraint;\n  animateLayoutChanges?: AnimateLayoutChanges;\n  adjustScale?: boolean;\n  collisionDetection?: CollisionDetection;\n  coordinateGetter?: KeyboardCoordinateGetter;\n  Container?: any; // To-do: Fix me\n  dropAnimation?: DropAnimation | null;\n  getNewIndex?: NewIndexGetter;\n  rowKey?: (item: any) => Key;\n  itemCount?: number;\n  items?: any[];\n  measuring?: MeasuringConfiguration;\n  modifiers?: Modifiers;\n  renderItem?: any;\n  removable?: boolean;\n  reorderItems?: typeof arrayMove;\n  strategy?: SortingStrategy;\n  style?: React.CSSProperties;\n  useDragOverlay?: boolean;\n  modifierNames?: (\n    | \"restrictToHorizontalAxis\"\n    | \"restrictToVerticalAxis\"\n    | \"restrictToWindowEdges\"\n    | \"restrictToParentElement\"\n    | \"restrictToFirstScrollableAncestor\"\n  )[];\n  getItemStyles?(args: {\n    id: UniqueIdentifier;\n    index: number;\n    isSorting: boolean;\n    isDragOverlay: boolean;\n    overIndex: number;\n    isDragging: boolean;\n  }): React.CSSProperties;\n  wrapperStyle?(args: {\n    active: Pick<Active, \"id\"> | null;\n    index: number;\n    isDragging: boolean;\n    id: UniqueIdentifier;\n  }): React.CSSProperties;\n  isDisabled?(id: UniqueIdentifier): boolean;\n  className?: string;\n}\n\nconst dropAnimationConfig: DropAnimation = {\n  sideEffects: defaultDropAnimationSideEffects({\n    styles: {\n      active: {\n        opacity: \"0.5\",\n      },\n    },\n  }),\n};\n\nconst screenReaderInstructions: ScreenReaderInstructions = {\n  draggable: `\n    To pick up a sortable item, press the space bar.\n    While sorting, use the arrow keys to move the item.\n    Press space again to drop the item in its new position, or press escape to cancel.\n  `,\n};\n\nexport const modifierByName = {\n  restrictToVerticalAxis,\n  restrictToWindowEdges,\n  restrictToHorizontalAxis,\n  restrictToParentElement,\n  restrictToFirstScrollableAncestor,\n};\n\nexport function Sortable({\n  className,\n  style,\n  activationConstraint,\n  animateLayoutChanges,\n  adjustScale = false,\n  collisionDetection = closestCenter,\n  coordinateGetter = sortableKeyboardCoordinates,\n  dropAnimation = dropAnimationConfig,\n  getNewIndex,\n  rowKey = (item) => item.id,\n  items: initialItems = [],\n  measuring,\n  modifiers,\n  removable,\n  renderItem,\n  reorderItems = arrayMove,\n  strategy = rectSortingStrategy,\n  useDragOverlay = true,\n  modifierNames,\n  themeResetClass,\n  onReorder,\n}: SortableProps) {\n  modifiers =\n    modifiers ?? (modifierNames ?? []).map((name) => modifierByName[name]);\n\n  // This is the optimistic version.\n  const [items, setItems] = useState<UniqueIdentifier[]>(() => initialItems);\n  useEffect(() => {\n    setItems(initialItems);\n  }, [initialItems]);\n  const [activeId, setActiveId] = useState<UniqueIdentifier | null>(null);\n  const sensors = useSensors(\n    useSensor(MouseSensor, {\n      activationConstraint,\n    }),\n    useSensor(TouchSensor, {\n      activationConstraint,\n    }),\n    useSensor(KeyboardSensor, {\n      // Disable smooth scrolling in Cypress automated tests\n      scrollBehavior: \"Cypress\" in globalThis ? \"auto\" : undefined,\n      coordinateGetter,\n    })\n  );\n  const isFirstAnnouncement = useRef(true);\n  const getIndex = (id: UniqueIdentifier) =>\n    items.findIndex((item) => rowKey(item) === id);\n  const getPosition = (id: UniqueIdentifier) => getIndex(id) + 1;\n  const activeIndex = activeId ? getIndex(activeId) : -1;\n  const announcements: Announcements = {\n    onDragStart({ active: { id } }) {\n      return `Picked up sortable item ${String(\n        id\n      )}. Sortable item ${id} is in position ${getPosition(id)} of ${\n        items.length\n      }`;\n    },\n    onDragOver({ active, over }) {\n      // In this specific use-case, the picked up item's `id` is always the same as the first `over` id.\n      // The first `onDragOver` event therefore doesn't need to be announced, because it is called\n      // immediately after the `onDragStart` announcement and is redundant.\n      if (isFirstAnnouncement.current === true) {\n        isFirstAnnouncement.current = false;\n        return;\n      }\n\n      if (over) {\n        return `Sortable item ${\n          active.id\n        } was moved into position ${getPosition(over.id)} of ${items.length}`;\n      }\n\n      return;\n    },\n    onDragEnd({ active, over }) {\n      if (over) {\n        return `Sortable item ${\n          active.id\n        } was dropped at position ${getPosition(over.id)} of ${items.length}`;\n      }\n\n      return;\n    },\n    onDragCancel({ active: { id } }) {\n      return `Sorting was cancelled. Sortable item ${id} was dropped and returned to position ${getPosition(\n        id\n      )} of ${items.length}.`;\n    },\n  };\n  useEffect(() => {\n    if (!activeId) {\n      isFirstAnnouncement.current = true;\n    }\n  }, [activeId]);\n\n  return (\n    <div className={className} style={style}>\n      <DndContext\n        accessibility={{\n          announcements,\n          screenReaderInstructions,\n        }}\n        sensors={sensors}\n        collisionDetection={collisionDetection}\n        onDragStart={({ active }) => {\n          if (!active) {\n            return;\n          }\n\n          setActiveId(active.id);\n        }}\n        onDragEnd={({ over }) => {\n          setActiveId(null);\n\n          if (over) {\n            const overIndex = getIndex(over.id);\n            const reordered = reorderItems(items, activeIndex, overIndex);\n            onReorder?.(activeIndex, overIndex, reordered, items);\n            if (activeIndex !== overIndex) {\n              setItems((items) => reordered);\n            }\n          }\n        }}\n        onDragCancel={() => setActiveId(null)}\n        measuring={measuring}\n        modifiers={modifiers}\n      >\n        <SortableContext items={items.map(rowKey)} strategy={strategy}>\n          {items.map((value, index) => (\n            <SortableItem\n              key={rowKey(value)}\n              id={rowKey(value)}\n              value={value}\n              index={index}\n              renderItem={renderItem}\n              animateLayoutChanges={animateLayoutChanges}\n              useDragOverlay={useDragOverlay}\n              getNewIndex={getNewIndex}\n            />\n          ))}\n        </SortableContext>\n        {useDragOverlay && typeof document !== \"undefined\"\n          ? createPortal(\n              <DragOverlay\n                adjustScale={adjustScale}\n                dropAnimation={dropAnimation}\n              >\n                {activeId ? (\n                  <Item\n                    index={activeIndex}\n                    value={items[activeIndex]}\n                    renderItem={(...args) => (\n                      <div className={themeResetClass}>\n                        {renderItem(...args)}\n                      </div>\n                    )}\n                    dragOverlay\n                  />\n                ) : null}\n              </DragOverlay>,\n              document.body\n            )\n          : null}\n      </DndContext>\n    </div>\n  );\n}\n\ninterface SortableItemProps {\n  animateLayoutChanges?: AnimateLayoutChanges;\n  getNewIndex?: NewIndexGetter;\n  id: UniqueIdentifier;\n  index: number;\n  useDragOverlay?: boolean;\n  renderItem?(args: any): React.ReactElement;\n  value?: any;\n}\n\nexport function SortableItem({\n  animateLayoutChanges,\n  getNewIndex,\n  id,\n  value,\n  index,\n  renderItem,\n  useDragOverlay,\n}: SortableItemProps) {\n  const sortableData = useSortable({\n    id,\n    animateLayoutChanges,\n    getNewIndex,\n  });\n  const {\n    attributes,\n    isDragging,\n    isSorting,\n    listeners,\n    setNodeRef,\n    transform,\n    transition,\n  } = sortableData;\n\n  return (\n    <DataProvider hidden={true} name={\"sortableItem\"} data={sortableData}>\n      <Item\n        ref={setNodeRef}\n        value={value}\n        dragging={isDragging}\n        sorting={isSorting}\n        renderItem={renderItem}\n        index={index}\n        transform={transform}\n        transition={transition}\n        listeners={listeners}\n        data-index={index}\n        data-id={id}\n        dragOverlay={!useDragOverlay && isDragging}\n        {...attributes}\n      />\n    </DataProvider>\n  );\n}\n\nexport function SortableHandle({ children }: { children?: ReactNode }) {\n  const data = useSelector(\"sortableItem\");\n  const child = React.Children.toArray(children)[0];\n  return isElement(child)\n    ? cloneElement(child as ReactElement, {\n        ...data?.listeners,\n        ref: data?.setActivatorNodeRef,\n        tabIndex: 0,\n      })\n    : null;\n}\n\nexport function registerSortable(loader?: Registerable) {\n  registerComponentHelper(loader, SortableHandle, {\n    name: \"SortableHandle\",\n    props: {\n      children: {\n        type: \"slot\",\n        defaultValue: {\n          type: \"text\",\n          value: \"Handle\",\n        },\n        mergeWithParent: true,\n      } as any,\n    },\n    importPath: \"@plasmicpkgs/dnd-kit\",\n    importName: \"SortableHandle\",\n  });\n\n  registerComponentHelper(loader, Sortable, {\n    name: \"Sortable\",\n    props: {\n      items: {\n        type: \"array\",\n        defaultValue: [\n          { id: 1, name: \"hello\" },\n          { id: 2, name: \"world\" },\n        ],\n      },\n      modifierNames: {\n        displayName: \"Options\",\n        type: \"choice\",\n        multiSelect: true,\n        options: Object.keys(modifierByName).map((v) => ({\n          value: v,\n          label:\n            v[0].toUpperCase() + v.slice(1).replace(/([a-z])([A-Z])/g, \"$1 $2\"),\n        })),\n      },\n      onReorder: {\n        type: \"eventHandler\",\n        argTypes: [\n          {\n            name: \"fromIndex\",\n            type: \"number\",\n          },\n          {\n            name: \"toIndex\",\n            type: \"number\",\n          },\n          {\n            name: \"newItems\",\n            type: \"object\",\n          },\n          {\n            name: \"oldItems\",\n            type: \"object\",\n          },\n        ],\n      },\n      themeResetClass: {\n        type: \"themeResetClass\",\n      },\n      renderItem: {\n        type: \"slot\",\n        renderPropParams: [\"sortableData\", \"currentItem\"],\n        mergeWithParent: true,\n        defaultValue: {\n          type: \"hbox\",\n          children: [\n            {\n              type: \"text\",\n              value: \"Item\",\n            },\n            {\n              type: \"component\",\n              name: \"SortableHandle\",\n            },\n          ],\n        },\n      } as any,\n    },\n    importPath: \"@plasmicpkgs/dnd-kit\",\n    importName: \"Sortable\",\n  });\n}\n","import { registerSortable } from \"./sortable\";\nimport { Registerable } from \"./util\";\n\nexport function registerAll(loader?: Registerable) {\n  registerSortable(loader);\n}\n\nexport * from \"./sortable\";\n"],"names":["registerComponentHelper","loader","component","meta","registerComponent","Item","React","memo","forwardRef","_ref","ref","dragOverlay","dragging","disabled","fadeIn","height","index","listeners","_ref$renderItem","renderItem","sorting","style","transition","transform","value","_objectWithoutPropertiesLoose","_excluded","useEffect","document","body","cursor","child","Boolean","isElement","cloneElement","filter","join","_transform$x","x","_transform$y","y","_transform$scaleX","scaleX","_transform$scaleY","scaleY","dropAnimationConfig","sideEffects","defaultDropAnimationSideEffects","styles","active","opacity","screenReaderInstructions","draggable","modifierByName","restrictToVerticalAxis","restrictToWindowEdges","restrictToHorizontalAxis","restrictToParentElement","restrictToFirstScrollableAncestor","Sortable","_ref2","className","activationConstraint","animateLayoutChanges","_ref2$adjustScale","adjustScale","_ref2$collisionDetect","collisionDetection","closestCenter","_ref2$coordinateGette","coordinateGetter","sortableKeyboardCoordinates","_ref2$dropAnimation","dropAnimation","getNewIndex","_ref2$rowKey","rowKey","item","id","_ref2$items","items","initialItems","measuring","modifiers","removable","_ref2$reorderItems","reorderItems","arrayMove","_ref2$strategy","strategy","rectSortingStrategy","_ref2$useDragOverlay","useDragOverlay","modifierNames","themeResetClass","onReorder","_modifiers","map","name","_useState","useState","setItems","_useState2","activeId","setActiveId","sensors","useSensors","useSensor","MouseSensor","TouchSensor","KeyboardSensor","scrollBehavior","globalThis","undefined","isFirstAnnouncement","useRef","getIndex","findIndex","getPosition","activeIndex","announcements","onDragStart","_ref3","String","length","onDragOver","_ref4","over","current","onDragEnd","_ref5","onDragCancel","_ref6","DndContext","accessibility","_ref7","_ref8","overIndex","reordered","SortableContext","SortableItem","key","createPortal","DragOverlay","apply","arguments","_ref9","sortableData","useSortable","isDragging","DataProvider","hidden","data","setNodeRef","isSorting","attributes","SortableHandle","_ref10","children","useSelector","Children","toArray","_extends","setActivatorNodeRef","tabIndex","registerSortable","props","type","defaultValue","mergeWithParent","importPath","importName","displayName","multiSelect","options","Object","keys","v","label","toUpperCase","slice","replace","argTypes","renderPropParams"],"mappings":"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"}

package/dist/dnd-kit.esm.js

@@ -0,0 +1,406 @@
+import React, { useEffect, cloneElement, useState, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { isElement } from 'react-dom/test-utils';
+import { useSensors, useSensor, MouseSensor, TouchSensor, KeyboardSensor, DndContext, DragOverlay, closestCenter, defaultDropAnimationSideEffects } from '@dnd-kit/core';
+import { SortableContext, useSortable, sortableKeyboardCoordinates, arrayMove, rectSortingStrategy } from '@dnd-kit/sortable';
+import { DataProvider, useSelector } from '@plasmicapp/host';
+import { restrictToVerticalAxis, restrictToWindowEdges, restrictToHorizontalAxis, restrictToParentElement, restrictToFirstScrollableAncestor } from '@dnd-kit/modifiers';
+import registerComponent from '@plasmicapp/host/registerComponent';
+
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+
+function registerComponentHelper(loader, component, meta) {
+  if (loader) {
+    loader.registerComponent(component, meta);
+  } else {
+    registerComponent(component, meta);
+  }
+}
+
+var _excluded = ["color", "dragOverlay", "dragging", "disabled", "fadeIn", "height", "index", "listeners", "renderItem", "sorting", "style", "transition", "transform", "value", "wrapperStyle"];
+var Item = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _transform$x, _transform$y, _transform$scaleX, _transform$scaleY;
+  var dragOverlay = _ref.dragOverlay,
+    dragging = _ref.dragging,
+    fadeIn = _ref.fadeIn,
+    index = _ref.index,
+    listeners = _ref.listeners,
+    _ref$renderItem = _ref.renderItem,
+    renderItem = _ref$renderItem === void 0 ? function () {
+      return React.createElement("div", null);
+    } : _ref$renderItem,
+    sorting = _ref.sorting,
+    style = _ref.style,
+    transition = _ref.transition,
+    transform = _ref.transform,
+    value = _ref.value,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  useEffect(function () {
+    if (!dragOverlay) {
+      return;
+    }
+    document.body.style.cursor = "grabbing";
+    return function () {
+      document.body.style.cursor = "";
+    };
+  }, [dragOverlay]);
+  var child = renderItem({
+    dragOverlay: Boolean(dragOverlay),
+    dragging: Boolean(dragging),
+    sorting: Boolean(sorting),
+    index: index,
+    fadeIn: Boolean(fadeIn),
+    listeners: listeners,
+    ref: ref,
+    style: style,
+    transform: transform,
+    transition: transition,
+    value: value
+  }, value);
+  return isElement(child) ? cloneElement(child, {
+    ref: ref,
+    style: {
+      transition: [transition].filter(Boolean).join(", "),
+      transform: "translate3d(" + ((_transform$x = transform == null ? void 0 : transform.x) != null ? _transform$x : 0) + "px, " + ((_transform$y = transform == null ? void 0 : transform.y) != null ? _transform$y : 0) + "px, 0) scaleX(" + ((_transform$scaleX = transform == null ? void 0 : transform.scaleX) != null ? _transform$scaleX : 1) + ") scaleY(" + ((_transform$scaleY = transform == null ? void 0 : transform.scaleY) != null ? _transform$scaleY : 1)
+    }
+  }) : child;
+}));
+var dropAnimationConfig = {
+  sideEffects: /*#__PURE__*/defaultDropAnimationSideEffects({
+    styles: {
+      active: {
+        opacity: "0.5"
+      }
+    }
+  })
+};
+var screenReaderInstructions = {
+  draggable: "\n    To pick up a sortable item, press the space bar.\n    While sorting, use the arrow keys to move the item.\n    Press space again to drop the item in its new position, or press escape to cancel.\n  "
+};
+var modifierByName = {
+  restrictToVerticalAxis: restrictToVerticalAxis,
+  restrictToWindowEdges: restrictToWindowEdges,
+  restrictToHorizontalAxis: restrictToHorizontalAxis,
+  restrictToParentElement: restrictToParentElement,
+  restrictToFirstScrollableAncestor: restrictToFirstScrollableAncestor
+};
+function Sortable(_ref2) {
+  var _modifiers;
+  var className = _ref2.className,
+    style = _ref2.style,
+    activationConstraint = _ref2.activationConstraint,
+    animateLayoutChanges = _ref2.animateLayoutChanges,
+    _ref2$adjustScale = _ref2.adjustScale,
+    adjustScale = _ref2$adjustScale === void 0 ? false : _ref2$adjustScale,
+    _ref2$collisionDetect = _ref2.collisionDetection,
+    collisionDetection = _ref2$collisionDetect === void 0 ? closestCenter : _ref2$collisionDetect,
+    _ref2$coordinateGette = _ref2.coordinateGetter,
+    coordinateGetter = _ref2$coordinateGette === void 0 ? sortableKeyboardCoordinates : _ref2$coordinateGette,
+    _ref2$dropAnimation = _ref2.dropAnimation,
+    dropAnimation = _ref2$dropAnimation === void 0 ? dropAnimationConfig : _ref2$dropAnimation,
+    getNewIndex = _ref2.getNewIndex,
+    _ref2$rowKey = _ref2.rowKey,
+    rowKey = _ref2$rowKey === void 0 ? function (item) {
+      return item.id;
+    } : _ref2$rowKey,
+    _ref2$items = _ref2.items,
+    initialItems = _ref2$items === void 0 ? [] : _ref2$items,
+    measuring = _ref2.measuring,
+    modifiers = _ref2.modifiers,
+    _renderItem = _ref2.renderItem,
+    _ref2$reorderItems = _ref2.reorderItems,
+    reorderItems = _ref2$reorderItems === void 0 ? arrayMove : _ref2$reorderItems,
+    _ref2$strategy = _ref2.strategy,
+    strategy = _ref2$strategy === void 0 ? rectSortingStrategy : _ref2$strategy,
+    _ref2$useDragOverlay = _ref2.useDragOverlay,
+    useDragOverlay = _ref2$useDragOverlay === void 0 ? true : _ref2$useDragOverlay,
+    modifierNames = _ref2.modifierNames,
+    themeResetClass = _ref2.themeResetClass,
+    onReorder = _ref2.onReorder;
+  modifiers = (_modifiers = modifiers) != null ? _modifiers : (modifierNames != null ? modifierNames : []).map(function (name) {
+    return modifierByName[name];
+  });
+  // This is the optimistic version.
+  var _useState = useState(function () {
+      return initialItems;
+    }),
+    items = _useState[0],
+    setItems = _useState[1];
+  useEffect(function () {
+    setItems(initialItems);
+  }, [initialItems]);
+  var _useState2 = useState(null),
+    activeId = _useState2[0],
+    setActiveId = _useState2[1];
+  var sensors = useSensors(useSensor(MouseSensor, {
+    activationConstraint: activationConstraint
+  }), useSensor(TouchSensor, {
+    activationConstraint: activationConstraint
+  }), useSensor(KeyboardSensor, {
+    // Disable smooth scrolling in Cypress automated tests
+    scrollBehavior: "Cypress" in globalThis ? "auto" : undefined,
+    coordinateGetter: coordinateGetter
+  }));
+  var isFirstAnnouncement = useRef(true);
+  var getIndex = function getIndex(id) {
+    return items.findIndex(function (item) {
+      return rowKey(item) === id;
+    });
+  };
+  var getPosition = function getPosition(id) {
+    return getIndex(id) + 1;
+  };
+  var activeIndex = activeId ? getIndex(activeId) : -1;
+  var announcements = {
+    onDragStart: function onDragStart(_ref3) {
+      var id = _ref3.active.id;
+      return "Picked up sortable item " + String(id) + ". Sortable item " + id + " is in position " + getPosition(id) + " of " + items.length;
+    },
+    onDragOver: function onDragOver(_ref4) {
+      var active = _ref4.active,
+        over = _ref4.over;
+      // In this specific use-case, the picked up item's `id` is always the same as the first `over` id.
+      // The first `onDragOver` event therefore doesn't need to be announced, because it is called
+      // immediately after the `onDragStart` announcement and is redundant.
+      if (isFirstAnnouncement.current === true) {
+        isFirstAnnouncement.current = false;
+        return;
+      }
+      if (over) {
+        return "Sortable item " + active.id + " was moved into position " + getPosition(over.id) + " of " + items.length;
+      }
+      return;
+    },
+    onDragEnd: function onDragEnd(_ref5) {
+      var active = _ref5.active,
+        over = _ref5.over;
+      if (over) {
+        return "Sortable item " + active.id + " was dropped at position " + getPosition(over.id) + " of " + items.length;
+      }
+      return;
+    },
+    onDragCancel: function onDragCancel(_ref6) {
+      var id = _ref6.active.id;
+      return "Sorting was cancelled. Sortable item " + id + " was dropped and returned to position " + getPosition(id) + " of " + items.length + ".";
+    }
+  };
+  useEffect(function () {
+    if (!activeId) {
+      isFirstAnnouncement.current = true;
+    }
+  }, [activeId]);
+  return React.createElement("div", {
+    className: className,
+    style: style
+  }, React.createElement(DndContext, {
+    accessibility: {
+      announcements: announcements,
+      screenReaderInstructions: screenReaderInstructions
+    },
+    sensors: sensors,
+    collisionDetection: collisionDetection,
+    onDragStart: function onDragStart(_ref7) {
+      var active = _ref7.active;
+      if (!active) {
+        return;
+      }
+      setActiveId(active.id);
+    },
+    onDragEnd: function onDragEnd(_ref8) {
+      var over = _ref8.over;
+      setActiveId(null);
+      if (over) {
+        var overIndex = getIndex(over.id);
+        var reordered = reorderItems(items, activeIndex, overIndex);
+        onReorder == null || onReorder(activeIndex, overIndex, reordered, items);
+        if (activeIndex !== overIndex) {
+          setItems(function (items) {
+            return reordered;
+          });
+        }
+      }
+    },
+    onDragCancel: function onDragCancel() {
+      return setActiveId(null);
+    },
+    measuring: measuring,
+    modifiers: modifiers
+  }, React.createElement(SortableContext, {
+    items: items.map(rowKey),
+    strategy: strategy
+  }, items.map(function (value, index) {
+    return React.createElement(SortableItem, {
+      key: rowKey(value),
+      id: rowKey(value),
+      value: value,
+      index: index,
+      renderItem: _renderItem,
+      animateLayoutChanges: animateLayoutChanges,
+      useDragOverlay: useDragOverlay,
+      getNewIndex: getNewIndex
+    });
+  })), useDragOverlay && typeof document !== "undefined" ? createPortal(React.createElement(DragOverlay, {
+    adjustScale: adjustScale,
+    dropAnimation: dropAnimation
+  }, activeId ? React.createElement(Item, {
+    index: activeIndex,
+    value: items[activeIndex],
+    renderItem: function renderItem() {
+      return React.createElement("div", {
+        className: themeResetClass
+      }, _renderItem.apply(void 0, arguments));
+    },
+    dragOverlay: true
+  }) : null), document.body) : null));
+}
+function SortableItem(_ref9) {
+  var animateLayoutChanges = _ref9.animateLayoutChanges,
+    getNewIndex = _ref9.getNewIndex,
+    id = _ref9.id,
+    value = _ref9.value,
+    index = _ref9.index,
+    renderItem = _ref9.renderItem,
+    useDragOverlay = _ref9.useDragOverlay;
+  var sortableData = useSortable({
+    id: id,
+    animateLayoutChanges: animateLayoutChanges,
+    getNewIndex: getNewIndex
+  });
+  var attributes = sortableData.attributes,
+    isDragging = sortableData.isDragging,
+    isSorting = sortableData.isSorting,
+    listeners = sortableData.listeners,
+    setNodeRef = sortableData.setNodeRef,
+    transform = sortableData.transform,
+    transition = sortableData.transition;
+  return React.createElement(DataProvider, {
+    hidden: true,
+    name: "sortableItem",
+    data: sortableData
+  }, React.createElement(Item, Object.assign({
+    ref: setNodeRef,
+    value: value,
+    dragging: isDragging,
+    sorting: isSorting,
+    renderItem: renderItem,
+    index: index,
+    transform: transform,
+    transition: transition,
+    listeners: listeners,
+    "data-index": index,
+    "data-id": id,
+    dragOverlay: !useDragOverlay && isDragging
+  }, attributes)));
+}
+function SortableHandle(_ref10) {
+  var children = _ref10.children;
+  var data = useSelector("sortableItem");
+  var child = React.Children.toArray(children)[0];
+  return isElement(child) ? cloneElement(child, _extends({}, data == null ? void 0 : data.listeners, {
+    ref: data == null ? void 0 : data.setActivatorNodeRef,
+    tabIndex: 0
+  })) : null;
+}
+function registerSortable(loader) {
+  registerComponentHelper(loader, SortableHandle, {
+    name: "SortableHandle",
+    props: {
+      children: {
+        type: "slot",
+        defaultValue: {
+          type: "text",
+          value: "Handle"
+        },
+        mergeWithParent: true
+      }
+    },
+    importPath: "@plasmicpkgs/dnd-kit",
+    importName: "SortableHandle"
+  });
+  registerComponentHelper(loader, Sortable, {
+    name: "Sortable",
+    props: {
+      items: {
+        type: "array",
+        defaultValue: [{
+          id: 1,
+          name: "hello"
+        }, {
+          id: 2,
+          name: "world"
+        }]
+      },
+      modifierNames: {
+        displayName: "Options",
+        type: "choice",
+        multiSelect: true,
+        options: Object.keys(modifierByName).map(function (v) {
+          return {
+            value: v,
+            label: v[0].toUpperCase() + v.slice(1).replace(/([a-z])([A-Z])/g, "$1 $2")
+          };
+        })
+      },
+      onReorder: {
+        type: "eventHandler",
+        argTypes: [{
+          name: "fromIndex",
+          type: "number"
+        }, {
+          name: "toIndex",
+          type: "number"
+        }, {
+          name: "newItems",
+          type: "object"
+        }, {
+          name: "oldItems",
+          type: "object"
+        }]
+      },
+      themeResetClass: {
+        type: "themeResetClass"
+      },
+      renderItem: {
+        type: "slot",
+        renderPropParams: ["sortableData", "currentItem"],
+        mergeWithParent: true,
+        defaultValue: {
+          type: "hbox",
+          children: [{
+            type: "text",
+            value: "Item"
+          }, {
+            type: "component",
+            name: "SortableHandle"
+          }]
+        }
+      }
+    },
+    importPath: "@plasmicpkgs/dnd-kit",
+    importName: "Sortable"
+  });
+}
+
+function registerAll(loader) {
+  registerSortable(loader);
+}
+
+export { Item, Sortable, SortableHandle, SortableItem, modifierByName, registerAll, registerSortable };
+//# sourceMappingURL=dnd-kit.esm.js.map

package/dist/dnd-kit.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dnd-kit.esm.js","sources":["../src/util.ts","../src/sortable.tsx","../src/index.tsx"],"sourcesContent":["import {\n  ComponentMeta,\n  default as registerComponent,\n} from \"@plasmicapp/host/registerComponent\";\nimport { default as registerGlobalContext } from \"@plasmicapp/host/registerGlobalContext\";\nimport { default as registerToken } from \"@plasmicapp/host/registerToken\";\nimport React from \"react\";\n\nexport type Registerable = {\n  registerComponent: typeof registerComponent;\n  registerGlobalContext: typeof registerGlobalContext;\n  registerToken: typeof registerToken;\n};\n\nexport function registerComponentHelper<T extends React.ComponentType<any>>(\n  loader: Registerable | undefined,\n  component: T,\n  meta: ComponentMeta<React.ComponentProps<T>>\n) {\n  if (loader) {\n    loader.registerComponent(component, meta);\n  } else {\n    registerComponent(component, meta);\n  }\n}\n","import React, { cloneElement, useEffect, useRef, useState } from \"react\";\nimport type { Key, ReactElement, ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { isElement } from \"react-dom/test-utils\";\nimport {\n  closestCenter,\n  DragOverlay,\n  DndContext,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n  defaultDropAnimationSideEffects,\n} from \"@dnd-kit/core\";\nimport type {\n  SortingStrategy,\n  AnimateLayoutChanges,\n  NewIndexGetter,\n} from \"@dnd-kit/sortable\";\nimport {\n  arrayMove,\n  useSortable,\n  SortableContext,\n  sortableKeyboardCoordinates,\n  rectSortingStrategy,\n} from \"@dnd-kit/sortable\";\n\nimport { DataProvider, useSelector } from \"@plasmicapp/host\";\n\nimport type {\n  DraggableSyntheticListeners,\n  Active,\n  Announcements,\n  CollisionDetection,\n  DropAnimation,\n  KeyboardCoordinateGetter,\n  Modifiers,\n  MeasuringConfiguration,\n  PointerActivationConstraint,\n  ScreenReaderInstructions,\n  UniqueIdentifier,\n} from \"@dnd-kit/core\";\nimport type { Transform } from \"@dnd-kit/utilities\";\nimport {\n  restrictToFirstScrollableAncestor,\n  restrictToHorizontalAxis,\n  restrictToParentElement,\n  restrictToVerticalAxis,\n  restrictToWindowEdges,\n} from \"@dnd-kit/modifiers\";\nimport { Registerable, registerComponentHelper } from \"./util\";\n\nexport interface ItemProps {\n  dragOverlay?: boolean;\n  color?: string;\n  disabled?: boolean;\n  dragging?: boolean;\n  height?: number;\n  index?: number;\n  fadeIn?: boolean;\n  transform?: Transform | null;\n  listeners?: DraggableSyntheticListeners;\n  sorting?: boolean;\n  style?: React.CSSProperties;\n  transition?: string | null;\n  wrapperStyle?: React.CSSProperties;\n  value: React.ReactNode;\n  renderItem?(\n    args: {\n      dragOverlay: boolean;\n      dragging: boolean;\n      sorting: boolean;\n      index: number | undefined;\n      fadeIn: boolean;\n      listeners: DraggableSyntheticListeners;\n      ref: React.Ref<HTMLElement>;\n      style: React.CSSProperties | undefined;\n      transform: ItemProps[\"transform\"];\n      transition: ItemProps[\"transition\"];\n      value: ItemProps[\"value\"];\n    },\n    currentItem: ItemProps[\"value\"]\n  ): React.ReactElement;\n}\n\nexport const Item = React.memo(\n  React.forwardRef<HTMLLIElement, ItemProps>(\n    (\n      {\n        color,\n        dragOverlay,\n        dragging,\n        disabled,\n        fadeIn,\n        height,\n        index,\n        listeners,\n        renderItem = () => <div />,\n        sorting,\n        style,\n        transition,\n        transform,\n        value,\n        wrapperStyle,\n        ...props\n      },\n      ref\n    ) => {\n      useEffect(() => {\n        if (!dragOverlay) {\n          return;\n        }\n\n        document.body.style.cursor = \"grabbing\";\n\n        return () => {\n          document.body.style.cursor = \"\";\n        };\n      }, [dragOverlay]);\n\n      const child = renderItem(\n        {\n          dragOverlay: Boolean(dragOverlay),\n          dragging: Boolean(dragging),\n          sorting: Boolean(sorting),\n          index,\n          fadeIn: Boolean(fadeIn),\n          listeners,\n          ref,\n          style,\n          transform,\n          transition,\n          value,\n        },\n        value\n      );\n\n      return isElement(child)\n        ? cloneElement(child, {\n            ref,\n            style: {\n              transition: [transition].filter(Boolean).join(\", \"),\n              transform: `translate3d(${transform?.x ?? 0}px, ${\n                transform?.y ?? 0\n              }px, 0) scaleX(${transform?.scaleX ?? 1}) scaleY(${\n                transform?.scaleY ?? 1\n              }`,\n            },\n          })\n        : child;\n    }\n  )\n);\n\nexport interface SortableProps {\n  onReorder?: (\n    fromIndex: number,\n    toIndex: number,\n    newItems: any[],\n    oldItems: any[]\n  ) => void;\n  themeResetClass?: string;\n  activationConstraint?: PointerActivationConstraint;\n  animateLayoutChanges?: AnimateLayoutChanges;\n  adjustScale?: boolean;\n  collisionDetection?: CollisionDetection;\n  coordinateGetter?: KeyboardCoordinateGetter;\n  Container?: any; // To-do: Fix me\n  dropAnimation?: DropAnimation | null;\n  getNewIndex?: NewIndexGetter;\n  rowKey?: (item: any) => Key;\n  itemCount?: number;\n  items?: any[];\n  measuring?: MeasuringConfiguration;\n  modifiers?: Modifiers;\n  renderItem?: any;\n  removable?: boolean;\n  reorderItems?: typeof arrayMove;\n  strategy?: SortingStrategy;\n  style?: React.CSSProperties;\n  useDragOverlay?: boolean;\n  modifierNames?: (\n    | \"restrictToHorizontalAxis\"\n    | \"restrictToVerticalAxis\"\n    | \"restrictToWindowEdges\"\n    | \"restrictToParentElement\"\n    | \"restrictToFirstScrollableAncestor\"\n  )[];\n  getItemStyles?(args: {\n    id: UniqueIdentifier;\n    index: number;\n    isSorting: boolean;\n    isDragOverlay: boolean;\n    overIndex: number;\n    isDragging: boolean;\n  }): React.CSSProperties;\n  wrapperStyle?(args: {\n    active: Pick<Active, \"id\"> | null;\n    index: number;\n    isDragging: boolean;\n    id: UniqueIdentifier;\n  }): React.CSSProperties;\n  isDisabled?(id: UniqueIdentifier): boolean;\n  className?: string;\n}\n\nconst dropAnimationConfig: DropAnimation = {\n  sideEffects: defaultDropAnimationSideEffects({\n    styles: {\n      active: {\n        opacity: \"0.5\",\n      },\n    },\n  }),\n};\n\nconst screenReaderInstructions: ScreenReaderInstructions = {\n  draggable: `\n    To pick up a sortable item, press the space bar.\n    While sorting, use the arrow keys to move the item.\n    Press space again to drop the item in its new position, or press escape to cancel.\n  `,\n};\n\nexport const modifierByName = {\n  restrictToVerticalAxis,\n  restrictToWindowEdges,\n  restrictToHorizontalAxis,\n  restrictToParentElement,\n  restrictToFirstScrollableAncestor,\n};\n\nexport function Sortable({\n  className,\n  style,\n  activationConstraint,\n  animateLayoutChanges,\n  adjustScale = false,\n  collisionDetection = closestCenter,\n  coordinateGetter = sortableKeyboardCoordinates,\n  dropAnimation = dropAnimationConfig,\n  getNewIndex,\n  rowKey = (item) => item.id,\n  items: initialItems = [],\n  measuring,\n  modifiers,\n  removable,\n  renderItem,\n  reorderItems = arrayMove,\n  strategy = rectSortingStrategy,\n  useDragOverlay = true,\n  modifierNames,\n  themeResetClass,\n  onReorder,\n}: SortableProps) {\n  modifiers =\n    modifiers ?? (modifierNames ?? []).map((name) => modifierByName[name]);\n\n  // This is the optimistic version.\n  const [items, setItems] = useState<UniqueIdentifier[]>(() => initialItems);\n  useEffect(() => {\n    setItems(initialItems);\n  }, [initialItems]);\n  const [activeId, setActiveId] = useState<UniqueIdentifier | null>(null);\n  const sensors = useSensors(\n    useSensor(MouseSensor, {\n      activationConstraint,\n    }),\n    useSensor(TouchSensor, {\n      activationConstraint,\n    }),\n    useSensor(KeyboardSensor, {\n      // Disable smooth scrolling in Cypress automated tests\n      scrollBehavior: \"Cypress\" in globalThis ? \"auto\" : undefined,\n      coordinateGetter,\n    })\n  );\n  const isFirstAnnouncement = useRef(true);\n  const getIndex = (id: UniqueIdentifier) =>\n    items.findIndex((item) => rowKey(item) === id);\n  const getPosition = (id: UniqueIdentifier) => getIndex(id) + 1;\n  const activeIndex = activeId ? getIndex(activeId) : -1;\n  const announcements: Announcements = {\n    onDragStart({ active: { id } }) {\n      return `Picked up sortable item ${String(\n        id\n      )}. Sortable item ${id} is in position ${getPosition(id)} of ${\n        items.length\n      }`;\n    },\n    onDragOver({ active, over }) {\n      // In this specific use-case, the picked up item's `id` is always the same as the first `over` id.\n      // The first `onDragOver` event therefore doesn't need to be announced, because it is called\n      // immediately after the `onDragStart` announcement and is redundant.\n      if (isFirstAnnouncement.current === true) {\n        isFirstAnnouncement.current = false;\n        return;\n      }\n\n      if (over) {\n        return `Sortable item ${\n          active.id\n        } was moved into position ${getPosition(over.id)} of ${items.length}`;\n      }\n\n      return;\n    },\n    onDragEnd({ active, over }) {\n      if (over) {\n        return `Sortable item ${\n          active.id\n        } was dropped at position ${getPosition(over.id)} of ${items.length}`;\n      }\n\n      return;\n    },\n    onDragCancel({ active: { id } }) {\n      return `Sorting was cancelled. Sortable item ${id} was dropped and returned to position ${getPosition(\n        id\n      )} of ${items.length}.`;\n    },\n  };\n  useEffect(() => {\n    if (!activeId) {\n      isFirstAnnouncement.current = true;\n    }\n  }, [activeId]);\n\n  return (\n    <div className={className} style={style}>\n      <DndContext\n        accessibility={{\n          announcements,\n          screenReaderInstructions,\n        }}\n        sensors={sensors}\n        collisionDetection={collisionDetection}\n        onDragStart={({ active }) => {\n          if (!active) {\n            return;\n          }\n\n          setActiveId(active.id);\n        }}\n        onDragEnd={({ over }) => {\n          setActiveId(null);\n\n          if (over) {\n            const overIndex = getIndex(over.id);\n            const reordered = reorderItems(items, activeIndex, overIndex);\n            onReorder?.(activeIndex, overIndex, reordered, items);\n            if (activeIndex !== overIndex) {\n              setItems((items) => reordered);\n            }\n          }\n        }}\n        onDragCancel={() => setActiveId(null)}\n        measuring={measuring}\n        modifiers={modifiers}\n      >\n        <SortableContext items={items.map(rowKey)} strategy={strategy}>\n          {items.map((value, index) => (\n            <SortableItem\n              key={rowKey(value)}\n              id={rowKey(value)}\n              value={value}\n              index={index}\n              renderItem={renderItem}\n              animateLayoutChanges={animateLayoutChanges}\n              useDragOverlay={useDragOverlay}\n              getNewIndex={getNewIndex}\n            />\n          ))}\n        </SortableContext>\n        {useDragOverlay && typeof document !== \"undefined\"\n          ? createPortal(\n              <DragOverlay\n                adjustScale={adjustScale}\n                dropAnimation={dropAnimation}\n              >\n                {activeId ? (\n                  <Item\n                    index={activeIndex}\n                    value={items[activeIndex]}\n                    renderItem={(...args) => (\n                      <div className={themeResetClass}>\n                        {renderItem(...args)}\n                      </div>\n                    )}\n                    dragOverlay\n                  />\n                ) : null}\n              </DragOverlay>,\n              document.body\n            )\n          : null}\n      </DndContext>\n    </div>\n  );\n}\n\ninterface SortableItemProps {\n  animateLayoutChanges?: AnimateLayoutChanges;\n  getNewIndex?: NewIndexGetter;\n  id: UniqueIdentifier;\n  index: number;\n  useDragOverlay?: boolean;\n  renderItem?(args: any): React.ReactElement;\n  value?: any;\n}\n\nexport function SortableItem({\n  animateLayoutChanges,\n  getNewIndex,\n  id,\n  value,\n  index,\n  renderItem,\n  useDragOverlay,\n}: SortableItemProps) {\n  const sortableData = useSortable({\n    id,\n    animateLayoutChanges,\n    getNewIndex,\n  });\n  const {\n    attributes,\n    isDragging,\n    isSorting,\n    listeners,\n    setNodeRef,\n    transform,\n    transition,\n  } = sortableData;\n\n  return (\n    <DataProvider hidden={true} name={\"sortableItem\"} data={sortableData}>\n      <Item\n        ref={setNodeRef}\n        value={value}\n        dragging={isDragging}\n        sorting={isSorting}\n        renderItem={renderItem}\n        index={index}\n        transform={transform}\n        transition={transition}\n        listeners={listeners}\n        data-index={index}\n        data-id={id}\n        dragOverlay={!useDragOverlay && isDragging}\n        {...attributes}\n      />\n    </DataProvider>\n  );\n}\n\nexport function SortableHandle({ children }: { children?: ReactNode }) {\n  const data = useSelector(\"sortableItem\");\n  const child = React.Children.toArray(children)[0];\n  return isElement(child)\n    ? cloneElement(child as ReactElement, {\n        ...data?.listeners,\n        ref: data?.setActivatorNodeRef,\n        tabIndex: 0,\n      })\n    : null;\n}\n\nexport function registerSortable(loader?: Registerable) {\n  registerComponentHelper(loader, SortableHandle, {\n    name: \"SortableHandle\",\n    props: {\n      children: {\n        type: \"slot\",\n        defaultValue: {\n          type: \"text\",\n          value: \"Handle\",\n        },\n        mergeWithParent: true,\n      } as any,\n    },\n    importPath: \"@plasmicpkgs/dnd-kit\",\n    importName: \"SortableHandle\",\n  });\n\n  registerComponentHelper(loader, Sortable, {\n    name: \"Sortable\",\n    props: {\n      items: {\n        type: \"array\",\n        defaultValue: [\n          { id: 1, name: \"hello\" },\n          { id: 2, name: \"world\" },\n        ],\n      },\n      modifierNames: {\n        displayName: \"Options\",\n        type: \"choice\",\n        multiSelect: true,\n        options: Object.keys(modifierByName).map((v) => ({\n          value: v,\n          label:\n            v[0].toUpperCase() + v.slice(1).replace(/([a-z])([A-Z])/g, \"$1 $2\"),\n        })),\n      },\n      onReorder: {\n        type: \"eventHandler\",\n        argTypes: [\n          {\n            name: \"fromIndex\",\n            type: \"number\",\n          },\n          {\n            name: \"toIndex\",\n            type: \"number\",\n          },\n          {\n            name: \"newItems\",\n            type: \"object\",\n          },\n          {\n            name: \"oldItems\",\n            type: \"object\",\n          },\n        ],\n      },\n      themeResetClass: {\n        type: \"themeResetClass\",\n      },\n      renderItem: {\n        type: \"slot\",\n        renderPropParams: [\"sortableData\", \"currentItem\"],\n        mergeWithParent: true,\n        defaultValue: {\n          type: \"hbox\",\n          children: [\n            {\n              type: \"text\",\n              value: \"Item\",\n            },\n            {\n              type: \"component\",\n              name: \"SortableHandle\",\n            },\n          ],\n        },\n      } as any,\n    },\n    importPath: \"@plasmicpkgs/dnd-kit\",\n    importName: \"Sortable\",\n  });\n}\n","import { registerSortable } from \"./sortable\";\nimport { Registerable } from \"./util\";\n\nexport function registerAll(loader?: Registerable) {\n  registerSortable(loader);\n}\n\nexport * from \"./sortable\";\n"],"names":["registerComponentHelper","loader","component","meta","registerComponent","Item","React","memo","forwardRef","_ref","ref","dragOverlay","dragging","disabled","fadeIn","height","index","listeners","_ref$renderItem","renderItem","sorting","style","transition","transform","value","wrapperStyle","props","_objectWithoutPropertiesLoose","_excluded","useEffect","document","body","cursor","child","Boolean","isElement","cloneElement","filter","join","_transform$x","x","_transform$y","y","_transform$scaleX","scaleX","_transform$scaleY","scaleY","dropAnimationConfig","sideEffects","defaultDropAnimationSideEffects","styles","active","opacity","screenReaderInstructions","draggable","modifierByName","restrictToVerticalAxis","restrictToWindowEdges","restrictToHorizontalAxis","restrictToParentElement","restrictToFirstScrollableAncestor","Sortable","_ref2","className","activationConstraint","animateLayoutChanges","_ref2$adjustScale","adjustScale","_ref2$collisionDetect","collisionDetection","closestCenter","_ref2$coordinateGette","coordinateGetter","sortableKeyboardCoordinates","_ref2$dropAnimation","dropAnimation","getNewIndex","_ref2$rowKey","rowKey","item","id","_ref2$items","items","initialItems","measuring","modifiers","removable","_ref2$reorderItems","reorderItems","arrayMove","_ref2$strategy","strategy","rectSortingStrategy","_ref2$useDragOverlay","useDragOverlay","modifierNames","themeResetClass","onReorder","_modifiers","map","name","_useState","useState","setItems","_useState2","activeId","setActiveId","sensors","useSensors","useSensor","MouseSensor","TouchSensor","KeyboardSensor","scrollBehavior","globalThis","undefined","isFirstAnnouncement","useRef","getIndex","findIndex","getPosition","activeIndex","announcements","onDragStart","_ref3","String","length","onDragOver","_ref4","over","current","onDragEnd","_ref5","onDragCancel","_ref6","DndContext","accessibility","_ref7","_ref8","overIndex","reordered","SortableContext","SortableItem","key","createPortal","DragOverlay","apply","arguments","_ref9","sortableData","useSortable","attributes","isDragging","isSorting","setNodeRef","DataProvider","hidden","data","SortableHandle","_ref10","children","useSelector","Children","toArray","_extends","setActivatorNodeRef","tabIndex","registerSortable","type","defaultValue","mergeWithParent","importPath","importName","displayName","multiSelect","options","Object","keys","v","label","toUpperCase","slice","replace","argTypes","renderPropParams","registerAll"],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import { Registerable } from "./util";
+export declare function registerAll(loader?: Registerable): void;
+export * from "./sortable";

package/dist/index.js

@@ -0,0 +1,8 @@
+
+'use strict'
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./dnd-kit.cjs.production.min.js')
+} else {
+  module.exports = require('./dnd-kit.cjs.development.js')
+}

package/dist/sortable.d.ts

@@ -0,0 +1,100 @@
+import React from "react";
+import type { Key, ReactNode } from "react";
+import type { SortingStrategy, AnimateLayoutChanges, NewIndexGetter } from "@dnd-kit/sortable";
+import { arrayMove } from "@dnd-kit/sortable";
+import type { DraggableSyntheticListeners, Active, CollisionDetection, DropAnimation, KeyboardCoordinateGetter, Modifiers, MeasuringConfiguration, PointerActivationConstraint, UniqueIdentifier } from "@dnd-kit/core";
+import type { Transform } from "@dnd-kit/utilities";
+import { Registerable } from "./util";
+export interface ItemProps {
+    dragOverlay?: boolean;
+    color?: string;
+    disabled?: boolean;
+    dragging?: boolean;
+    height?: number;
+    index?: number;
+    fadeIn?: boolean;
+    transform?: Transform | null;
+    listeners?: DraggableSyntheticListeners;
+    sorting?: boolean;
+    style?: React.CSSProperties;
+    transition?: string | null;
+    wrapperStyle?: React.CSSProperties;
+    value: React.ReactNode;
+    renderItem?(args: {
+        dragOverlay: boolean;
+        dragging: boolean;
+        sorting: boolean;
+        index: number | undefined;
+        fadeIn: boolean;
+        listeners: DraggableSyntheticListeners;
+        ref: React.Ref<HTMLElement>;
+        style: React.CSSProperties | undefined;
+        transform: ItemProps["transform"];
+        transition: ItemProps["transition"];
+        value: ItemProps["value"];
+    }, currentItem: ItemProps["value"]): React.ReactElement;
+}
+export declare const Item: React.MemoExoticComponent<React.ForwardRefExoticComponent<ItemProps & React.RefAttributes<HTMLLIElement>>>;
+export interface SortableProps {
+    onReorder?: (fromIndex: number, toIndex: number, newItems: any[], oldItems: any[]) => void;
+    themeResetClass?: string;
+    activationConstraint?: PointerActivationConstraint;
+    animateLayoutChanges?: AnimateLayoutChanges;
+    adjustScale?: boolean;
+    collisionDetection?: CollisionDetection;
+    coordinateGetter?: KeyboardCoordinateGetter;
+    Container?: any;
+    dropAnimation?: DropAnimation | null;
+    getNewIndex?: NewIndexGetter;
+    rowKey?: (item: any) => Key;
+    itemCount?: number;
+    items?: any[];
+    measuring?: MeasuringConfiguration;
+    modifiers?: Modifiers;
+    renderItem?: any;
+    removable?: boolean;
+    reorderItems?: typeof arrayMove;
+    strategy?: SortingStrategy;
+    style?: React.CSSProperties;
+    useDragOverlay?: boolean;
+    modifierNames?: ("restrictToHorizontalAxis" | "restrictToVerticalAxis" | "restrictToWindowEdges" | "restrictToParentElement" | "restrictToFirstScrollableAncestor")[];
+    getItemStyles?(args: {
+        id: UniqueIdentifier;
+        index: number;
+        isSorting: boolean;
+        isDragOverlay: boolean;
+        overIndex: number;
+        isDragging: boolean;
+    }): React.CSSProperties;
+    wrapperStyle?(args: {
+        active: Pick<Active, "id"> | null;
+        index: number;
+        isDragging: boolean;
+        id: UniqueIdentifier;
+    }): React.CSSProperties;
+    isDisabled?(id: UniqueIdentifier): boolean;
+    className?: string;
+}
+export declare const modifierByName: {
+    restrictToVerticalAxis: import("@dnd-kit/core").Modifier;
+    restrictToWindowEdges: import("@dnd-kit/core").Modifier;
+    restrictToHorizontalAxis: import("@dnd-kit/core").Modifier;
+    restrictToParentElement: import("@dnd-kit/core").Modifier;
+    restrictToFirstScrollableAncestor: import("@dnd-kit/core").Modifier;
+};
+export declare function Sortable({ className, style, activationConstraint, animateLayoutChanges, adjustScale, collisionDetection, coordinateGetter, dropAnimation, getNewIndex, rowKey, items: initialItems, measuring, modifiers, removable, renderItem, reorderItems, strategy, useDragOverlay, modifierNames, themeResetClass, onReorder, }: SortableProps): React.JSX.Element;
+interface SortableItemProps {
+    animateLayoutChanges?: AnimateLayoutChanges;
+    getNewIndex?: NewIndexGetter;
+    id: UniqueIdentifier;
+    index: number;
+    useDragOverlay?: boolean;
+    renderItem?(args: any): React.ReactElement;
+    value?: any;
+}
+export declare function SortableItem({ animateLayoutChanges, getNewIndex, id, value, index, renderItem, useDragOverlay, }: SortableItemProps): React.JSX.Element;
+export declare function SortableHandle({ children }: {
+    children?: ReactNode;
+}): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)> | null;
+export declare function registerSortable(loader?: Registerable): void;
+export {};

package/dist/util.d.ts

@@ -0,0 +1,10 @@
+import { ComponentMeta, default as registerComponent } from "@plasmicapp/host/registerComponent";
+import { default as registerGlobalContext } from "@plasmicapp/host/registerGlobalContext";
+import { default as registerToken } from "@plasmicapp/host/registerToken";
+import React from "react";
+export declare type Registerable = {
+    registerComponent: typeof registerComponent;
+    registerGlobalContext: typeof registerGlobalContext;
+    registerToken: typeof registerToken;
+};
+export declare function registerComponentHelper<T extends React.ComponentType<any>>(loader: Registerable | undefined, component: T, meta: ComponentMeta<React.ComponentProps<T>>): void;

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@plasmicpkgs/dnd-kit",
+  "version": "0.0.3",
+  "description": "Plasmic Spotify components.",
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "module": "dist/dnd-kit.esm.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "start": "tsdx watch",
+    "build": "tsdx build",
+    "test": "TEST_CWD=`pwd` yarn --cwd=../.. test --passWithNoTests",
+    "lint": "tsdx lint",
+    "prepublishOnly": "npm run build",
+    "size": "size-limit",
+    "analyze": "size-limit --why"
+  },
+  "peerDependencies": {
+    "react": ">=16"
+  },
+  "size-limit": [
+    {
+      "path": "dist/dnd-kit.cjs.production.min.js",
+      "limit": "10 KB"
+    },
+    {
+      "path": "dist/dnd-kit.esm.js",
+      "limit": "10 KB"
+    }
+  ],
+  "devDependencies": {
+    "@plasmicapp/host": "1.0.225",
+    "@types/react": "^17.0.43",
+    "@types/react-dom": "^17.0.14",
+    "husky": "^7.0.4",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "tsdx": "^0.14.1",
+    "tslib": "^2.3.1"
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.0.8",
+    "@dnd-kit/modifiers": "^6.0.1",
+    "@dnd-kit/sortable": "^7.0.2",
+    "@dnd-kit/utilities": "^3.2.1"
+  },
+  "gitHead": "400da4e813c2876ed9d2ada28ef265afd30c69d5"
+}