@wix/patterns 0.8.0

package/dist/cjs/components/GridDragAndDropDndKit/GridDraggableCardItem.js

@@ -0,0 +1,183 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.GridDraggableCardItem = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _sortable = require("@wix/wix-style-react-incubator/dnd-kit/sortable");
+var _react = _interopRequireWildcard(require("react"));
+var _utilities = require("@wix/wix-style-react-incubator/dnd-kit/utilities");
+var _designSystem = require("@wix/design-system");
+var _mobxReactLite = require("mobx-react-lite");
+var _mobx = require("mobx");
+var _dndTestEventHandlers = require("./dndTestEventHandlers");
+var _util = require("@wix/bex-core/util");
+var _jsxFileName = "/home/builduser/work/db7ea24852bc3350/packages/cairo/dist/cjs/components/GridDragAndDropDndKit/GridDraggableCardItem.tsx";
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _GridDraggableCardItem(props) {
+  var _dnd$nullAnnouncement, _state$_dnd2;
+  const {
+    children,
+    id,
+    isOverlay,
+    state
+  } = props;
+  const {
+    type: CardItem,
+    props: forwardCardItemProps
+  } = children;
+  const {
+    rowIndex,
+    columnIndex
+  } = forwardCardItemProps;
+  const {
+    _dnd
+  } = state;
+  const isDropping = (_dnd == null ? void 0 : _dnd.droppingId) === id;
+  const dragHandleRef = (0, _react.useRef)();
+  (0, _react.useEffect)(() => {
+    if (_dnd) {
+      return (0, _util.addEventListener)(_dnd.events, 'dropAnimationEnd', () => {
+        _dnd.focusDragHandleIfDropped(id, dragHandleRef.current);
+      });
+    }
+    return;
+  }, [id, _dnd]);
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+    setActivatorNodeRef
+  } = (0, _sortable.useSortable)({
+    id,
+    transition: _dnd == null ? void 0 : _dnd.sortableAnimation,
+    disabled: {
+      draggable: false,
+      droppable: _dnd == null ? void 0 : _dnd.isActiveRectOutsideContainer
+    }
+  });
+  const showMask = (isDragging || isDropping) && !isOverlay;
+  const ariaDescribedBy = `draggable-card-item-description-${id}`;
+  const dragHandleProps = isOverlay ? {} : {
+    tabIndex: 0,
+    domRef: e => {
+      setActivatorNodeRef(e);
+      dragHandleRef.current = e;
+      _dnd == null || _dnd.focusDragHandleIfDropped(id, dragHandleRef.current);
+    },
+    role: 'button',
+    'aria-label': _dnd == null || (_dnd$nullAnnouncement = _dnd.nullAnnouncements) == null || _dnd$nullAnnouncement.dragHandleLabel == null ? void 0 : _dnd$nullAnnouncement.dragHandleLabel(id),
+    'aria-describedby': ariaDescribedBy,
+    onClick: e => e.stopPropagation(),
+    ...(_dnd == null ? void 0 : _dnd.handleEvents),
+    ...(process.env.NODE_ENV === 'test' && state._dnd && (0, _dndTestEventHandlers.dragHandleTestEvents)({
+      id,
+      state: state._dnd
+    }))
+  };
+  const cardItemProps = {
+    ...forwardCardItemProps,
+    ...(_dnd != null && _dnd.isDisabled ? {} : {
+      draggable: true,
+      droppable: _dnd == null ? void 0 : _dnd.isActive,
+      dragging: isOverlay,
+      dragHandleProps
+    })
+  };
+  (0, _react.useEffect)(() => {
+    if (!_dnd || isOverlay) {
+      return;
+    }
+    (0, _mobx.runInAction)(function forceRenderIndexes() {
+      if (_dnd.activeId === id && rowIndex != null && columnIndex != null) {
+        const {
+          forceRenderIndexes: indexes
+        } = state;
+        const includes = indexes == null ? void 0 : indexes.some(index2d => rowIndex === index2d.rowIndex && columnIndex === index2d.columnIndex);
+        if (!includes) {
+          state.forceRenderIndexes = [{
+            rowIndex,
+            columnIndex
+          }];
+        }
+      }
+    });
+  }, [rowIndex, columnIndex, isOverlay, _dnd == null ? void 0 : _dnd.activeId]);
+  const style = {
+    position: 'relative',
+    height: '100%',
+    width: '100%',
+    transform: _utilities.CSS.Transform.toString(transform),
+    transition,
+    ...((_dnd == null ? void 0 : _dnd.isDropping) && {
+      transition: undefined
+    })
+  };
+  const testEvents = process.env.NODE_ENV === 'test' && state._dnd ? (0, _dndTestEventHandlers.sortableItemTestEvents)({
+    id,
+    state: state._dnd
+  }) : undefined;
+  const dndAttrs = _dnd != null && _dnd.isDisabled ? {
+    onPointerDown: e => {
+      _dnd == null || _dnd.attachDisabledDragAttempt(id, e.nativeEvent, 'all');
+    }
+  } : {
+    ...attributes,
+    ...listeners,
+    ...testEvents,
+    onPointerDown: e => {
+      var _state$_dnd;
+      (_state$_dnd = state._dnd) == null || _state$_dnd.containerEvents.onPointerDown == null || _state$_dnd.containerEvents.onPointerDown(e);
+      listeners == null || listeners.onPointerDown == null || listeners.onPointerDown(e);
+      testEvents == null || testEvents.onPointerDown == null || testEvents.onPointerDown(e);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    ref: setNodeRef,
+    style: style
+  }, dndAttrs, {
+    tabIndex: undefined,
+    "data-hook": "grid-card-item-events",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 142,
+      columnNumber: 5
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    id: ariaDescribedBy,
+    style: {
+      display: 'none'
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 149,
+      columnNumber: 7
+    }
+  }, (_state$_dnd2 = state._dnd) == null || (_state$_dnd2 = _state$_dnd2.nullAnnouncements) == null || _state$_dnd2.itemDescription == null ? void 0 : _state$_dnd2.itemDescription(id)), !showMask && /*#__PURE__*/_react.default.createElement(CardItem, (0, _extends2.default)({}, cardItemProps, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 152,
+      columnNumber: 21
+    }
+  })), showMask && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    borderRadius: 8,
+    height: "100%",
+    width: "100%",
+    backgroundColor: "D60",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 154,
+      columnNumber: 9
+    }
+  }));
+}
+const GridDraggableCardItem = exports.GridDraggableCardItem = (0, _mobxReactLite.observer)(_GridDraggableCardItem);
+//# sourceMappingURL=GridDraggableCardItem.js.map

package/dist/cjs/components/GridDragAndDropDndKit/GridDraggableCardItem.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_sortable","require","_react","_interopRequireWildcard","_utilities","_designSystem","_mobxReactLite","_mobx","_dndTestEventHandlers","_util","_jsxFileName","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","_GridDraggableCardItem","props","_dnd$nullAnnouncement","_state$_dnd2","children","id","isOverlay","state","type","CardItem","forwardCardItemProps","rowIndex","columnIndex","_dnd","isDropping","droppingId","dragHandleRef","useRef","useEffect","addEventListener","events","focusDragHandleIfDropped","current","attributes","listeners","setNodeRef","transform","transition","isDragging","setActivatorNodeRef","useSortable","sortableAnimation","disabled","draggable","droppable","isActiveRectOutsideContainer","showMask","ariaDescribedBy","dragHandleProps","tabIndex","domRef","role","nullAnnouncements","dragHandleLabel","onClick","stopPropagation","handleEvents","process","env","NODE_ENV","dragHandleTestEvents","cardItemProps","isDisabled","isActive","dragging","runInAction","forceRenderIndexes","activeId","indexes","includes","some","index2d","style","position","height","width","CSS","Transform","toString","undefined","testEvents","sortableItemTestEvents","dndAttrs","onPointerDown","attachDisabledDragAttempt","nativeEvent","_state$_dnd","containerEvents","createElement","_extends2","ref","__self","__source","fileName","lineNumber","columnNumber","display","itemDescription","Box","borderRadius","backgroundColor","GridDraggableCardItem","exports","observer"],"sources":["../../../../src/components/GridDragAndDropDndKit/GridDraggableCardItem.tsx"],"sourcesContent":["import { useSortable } from '@wix/wix-style-react-incubator/dnd-kit/sortable';\nimport React, { HTMLAttributes, useEffect, useRef } from 'react';\nimport { CSS } from '@wix/wix-style-react-incubator/dnd-kit/utilities';\nimport { Box } from '@wix/design-system';\nimport { DraggableCardProps, GridCardItemProps } from '../DragAndDrop';\nimport { FiltersMap } from '@wix/bex-core';\nimport { observer } from 'mobx-react-lite';\nimport { runInAction } from 'mobx';\nimport {\n  dragHandleTestEvents,\n  sortableItemTestEvents,\n} from './dndTestEventHandlers';\nimport { addEventListener } from '@wix/bex-core/util';\n\nfunction _GridDraggableCardItem<T, F extends FiltersMap>(\n  props: DraggableCardProps<T, F>,\n) {\n  const { children, id, isOverlay, state } = props;\n  const { type: CardItem, props: forwardCardItemProps } = children;\n  const { rowIndex, columnIndex } = forwardCardItemProps;\n  const { _dnd } = state;\n\n  const isDropping = _dnd?.droppingId === id;\n\n  const dragHandleRef = useRef<HTMLElement | null>();\n\n  useEffect(() => {\n    if (_dnd) {\n      return addEventListener(_dnd.events, 'dropAnimationEnd', () => {\n        _dnd.focusDragHandleIfDropped(id, dragHandleRef.current);\n      });\n    }\n\n    return;\n  }, [id, _dnd]);\n\n  const {\n    attributes,\n    listeners,\n    setNodeRef,\n    transform,\n    transition,\n    isDragging,\n    setActivatorNodeRef,\n  } = useSortable({\n    id,\n    transition: _dnd?.sortableAnimation,\n    disabled: {\n      draggable: false,\n      droppable: _dnd?.isActiveRectOutsideContainer,\n    },\n  });\n\n  const showMask = (isDragging || isDropping) && !isOverlay;\n\n  const ariaDescribedBy = `draggable-card-item-description-${id}`;\n\n  const dragHandleProps: GridCardItemProps['dragHandleProps'] = isOverlay\n    ? {}\n    : {\n        tabIndex: 0,\n        domRef: (e) => {\n          setActivatorNodeRef(e);\n          dragHandleRef.current = e;\n          _dnd?.focusDragHandleIfDropped(id, dragHandleRef.current);\n        },\n        role: 'button',\n        'aria-label': _dnd?.nullAnnouncements?.dragHandleLabel?.(id),\n        'aria-describedby': ariaDescribedBy,\n        onClick: (e) => e.stopPropagation(),\n        ..._dnd?.handleEvents,\n        ...(process.env.NODE_ENV === 'test' &&\n          state._dnd &&\n          dragHandleTestEvents({ id, state: state._dnd })),\n      };\n\n  const cardItemProps: GridCardItemProps = {\n    ...forwardCardItemProps,\n    ...(_dnd?.isDisabled\n      ? {}\n      : {\n          draggable: true,\n          droppable: _dnd?.isActive,\n          dragging: isOverlay,\n          dragHandleProps,\n        }),\n  };\n\n  useEffect(() => {\n    if (!_dnd || isOverlay) {\n      return;\n    }\n\n    runInAction(function forceRenderIndexes() {\n      if (_dnd.activeId === id && rowIndex != null && columnIndex != null) {\n        const { forceRenderIndexes: indexes } = state;\n        const includes = indexes?.some(\n          (index2d) =>\n            rowIndex === index2d.rowIndex &&\n            columnIndex === index2d.columnIndex,\n        );\n\n        if (!includes) {\n          state.forceRenderIndexes = [{ rowIndex, columnIndex }];\n        }\n      }\n    });\n  }, [rowIndex, columnIndex, isOverlay, _dnd?.activeId]);\n\n  const style = {\n    position: 'relative' as const,\n    height: '100%',\n    width: '100%',\n    transform: CSS.Transform.toString(transform),\n    transition,\n    ...(_dnd?.isDropping && { transition: undefined }),\n  };\n\n  const testEvents =\n    process.env.NODE_ENV === 'test' && state._dnd\n      ? sortableItemTestEvents({ id, state: state._dnd })\n      : undefined;\n\n  const dndAttrs: Partial<HTMLAttributes<HTMLDivElement>> = _dnd?.isDisabled\n    ? {\n        onPointerDown: (e) => {\n          _dnd?.attachDisabledDragAttempt(id, e.nativeEvent, 'all');\n        },\n      }\n    : {\n        ...attributes,\n        ...listeners,\n        ...testEvents,\n        onPointerDown: (e) => {\n          state._dnd?.containerEvents.onPointerDown?.(e);\n          listeners?.onPointerDown?.(e);\n          testEvents?.onPointerDown?.(e);\n        },\n      };\n\n  return (\n    <div\n      ref={setNodeRef}\n      style={style}\n      {...dndAttrs}\n      tabIndex={undefined}\n      data-hook=\"grid-card-item-events\"\n    >\n      <div id={ariaDescribedBy} style={{ display: 'none' }}>\n        {state._dnd?.nullAnnouncements?.itemDescription?.(id)}\n      </div>\n      {!showMask && <CardItem {...cardItemProps} />}\n      {showMask && (\n        <Box\n          borderRadius={8}\n          height=\"100%\"\n          width=\"100%\"\n          backgroundColor=\"D60\"\n        />\n      )}\n    </div>\n  );\n}\n\nexport const GridDraggableCardItem = observer(_GridDraggableCardItem);\n"],"mappings":"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"}

package/dist/cjs/components/GridDragAndDropDndKit/GridSortableContext.js

@@ -0,0 +1,122 @@
+"use strict";
+
+exports.__esModule = true;
+exports.GridSortableContext = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _core = require("@wix/wix-style-react-incubator/dnd-kit/core");
+var _sortable = require("@wix/wix-style-react-incubator/dnd-kit/sortable");
+var _modifiers = require("@wix/wix-style-react-incubator/dnd-kit/modifiers");
+var _CollectionContext = require("../CollectionContext");
+var _mobxReactLite = require("mobx-react-lite");
+var _react2 = require("@wix/bex-core/react");
+var _DragAndDrop = require("../DragAndDrop");
+var _sortableGridKeyboardCoordinates = require("./sortableGridKeyboardCoordinates");
+var _DragAndDropAnnouncements = require("../DragAndDrop/DragAndDropAnnouncements");
+var _jsxFileName = "/home/builduser/work/db7ea24852bc3350/packages/cairo/dist/cjs/components/GridDragAndDropDndKit/GridSortableContext.tsx";
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _GridSortableContext(props) {
+  const {
+    state: grid,
+    children,
+    onSubmit,
+    onCancel
+  } = props;
+  const container = (0, _react2.useWixPatternsContainer)();
+  const {
+    modalsContainerRef
+  } = (0, _react2.usePageContext)();
+  const collection = (0, _CollectionContext.useCollectionContext)();
+  const {
+    result: {
+      keyedItems
+    }
+  } = collection;
+  const [state] = (0, _react.useState)(() => new _DragAndDrop.CollectionDragAndDropState({
+    state: grid,
+    container,
+    a11yContainer: modalsContainerRef == null ? void 0 : modalsContainerRef.current
+  }));
+  const pointerSensor = (0, _core.useSensor)(_core.PointerSensor, {
+    activationConstraint: state.dnd.activationConstraint
+  });
+  const [coordinateGetter] = (0, _react.useState)(() => (0, _sortableGridKeyboardCoordinates.sortableGridKeyboardCoordinates)({
+    containerDistanceThreshold: 0.1
+  }));
+  const keyboardSensor = (0, _core.useSensor)(_core.KeyboardSensor, {
+    keyboardCodes: state.dnd.keyboardCodes,
+    coordinateGetter
+  });
+
+  // in jsdom we mock drag-and-drop by setting a custom events to draggable elements
+  const sensors = (0, _core.useSensors)(...(process.env.NODE_ENV === 'test' ? [] : [pointerSensor, keyboardSensor]));
+  (0, _react.useEffect)(() => state.init({
+    a11yContainer: modalsContainerRef == null ? void 0 : modalsContainerRef.current
+  }), []);
+  state.dnd.onSubmit = onSubmit;
+  state.dnd.onCancel = onCancel;
+  return /*#__PURE__*/_react.default.createElement(_core.DndContext, {
+    sensors: sensors,
+    autoScroll: {
+      activator: _core.AutoScrollActivator.DraggableRect,
+      freeze: true,
+      acceleration: 4,
+      threshold: {
+        y: 0.01,
+        x: 0.2
+      }
+    },
+    accessibility: {
+      container: state.dnd.a11yContainer,
+      announcements: state.dnd.nullAnnouncements,
+      screenReaderInstructions: {
+        draggable: ''
+      },
+      restoreFocus: false
+    },
+    collisionDetection: _core.closestCenter,
+    modifiers: [_modifiers.restrictToWindowEdges],
+    cancelDrop: ev => state.dnd.beforeDrop(ev),
+    onDragStart: ev => {
+      state.dnd.onDragStart(ev);
+    },
+    onDragMove: ev => {
+      state.dnd.onDragMove(ev);
+    },
+    onDragEnd: ev => {
+      state.dnd.onDragEnd(ev);
+    },
+    onDragCancel: () => {
+      state.dnd.onDragCancel();
+    },
+    onDragOver: ev => {
+      state.dnd.onDragOver(ev);
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 79,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement(_sortable.SortableContext, {
+    items: keyedItems,
+    strategy: _sortable.rectSortingStrategy,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 117,
+      columnNumber: 7
+    }
+  }, children, /*#__PURE__*/_react.default.createElement(_DragAndDropAnnouncements.DragAndDropAnnouncements, {
+    state: state.dnd,
+    dataHook: "grid-dnd-live-region",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 119,
+      columnNumber: 9
+    }
+  })));
+}
+const GridSortableContext = exports.GridSortableContext = (0, _mobxReactLite.observer)(_GridSortableContext);
+//# sourceMappingURL=GridSortableContext.js.map

package/dist/cjs/components/GridDragAndDropDndKit/GridSortableContext.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_core","_sortable","_modifiers","_CollectionContext","_mobxReactLite","_react2","_DragAndDrop","_sortableGridKeyboardCoordinates","_DragAndDropAnnouncements","_jsxFileName","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","_GridSortableContext","props","state","grid","children","onSubmit","onCancel","container","useWixPatternsContainer","modalsContainerRef","usePageContext","collection","useCollectionContext","result","keyedItems","useState","CollectionDragAndDropState","a11yContainer","current","pointerSensor","useSensor","PointerSensor","activationConstraint","dnd","coordinateGetter","sortableGridKeyboardCoordinates","containerDistanceThreshold","keyboardSensor","KeyboardSensor","keyboardCodes","sensors","useSensors","process","env","NODE_ENV","useEffect","init","createElement","DndContext","autoScroll","activator","AutoScrollActivator","DraggableRect","freeze","acceleration","threshold","y","x","accessibility","announcements","nullAnnouncements","screenReaderInstructions","draggable","restoreFocus","collisionDetection","closestCenter","modifiers","restrictToWindowEdges","cancelDrop","ev","beforeDrop","onDragStart","onDragMove","onDragEnd","onDragCancel","onDragOver","__self","__source","fileName","lineNumber","columnNumber","SortableContext","items","strategy","rectSortingStrategy","DragAndDropAnnouncements","dataHook","GridSortableContext","exports","observer"],"sources":["../../../../src/components/GridDragAndDropDndKit/GridSortableContext.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport {\n  AutoScrollActivator,\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n} from '@wix/wix-style-react-incubator/dnd-kit/core';\nimport {\n  rectSortingStrategy,\n  SortableContext,\n} from '@wix/wix-style-react-incubator/dnd-kit/sortable';\nimport { restrictToWindowEdges } from '@wix/wix-style-react-incubator/dnd-kit/modifiers';\nimport { useCollectionContext } from '../CollectionContext';\nimport { observer } from 'mobx-react-lite';\nimport { FiltersMap } from '@wix/bex-core';\nimport { useWixPatternsContainer, usePageContext } from '@wix/bex-core/react';\nimport {\n  CollectionDragAndDropState,\n  SortableContextProps,\n} from '../DragAndDrop';\nimport { sortableGridKeyboardCoordinates } from './sortableGridKeyboardCoordinates';\nimport { DragAndDropAnnouncements } from '../DragAndDrop/DragAndDropAnnouncements';\n\nfunction _GridSortableContext<T, F extends FiltersMap>(\n  props: SortableContextProps<T, F>,\n) {\n  const { state: grid, children, onSubmit, onCancel } = props;\n\n  const container = useWixPatternsContainer();\n  const { modalsContainerRef } = usePageContext();\n\n  const collection = useCollectionContext();\n  const {\n    result: { keyedItems },\n  } = collection;\n\n  const [state] = useState(\n    () =>\n      new CollectionDragAndDropState({\n        state: grid,\n        container,\n        a11yContainer: modalsContainerRef?.current,\n      }),\n  );\n\n  const pointerSensor = useSensor(PointerSensor, {\n    activationConstraint: state.dnd.activationConstraint,\n  });\n\n  const [coordinateGetter] = useState(() =>\n    sortableGridKeyboardCoordinates({ containerDistanceThreshold: 0.1 }),\n  );\n\n  const keyboardSensor = useSensor(KeyboardSensor, {\n    keyboardCodes: state.dnd.keyboardCodes,\n    coordinateGetter,\n  });\n\n  // in jsdom we mock drag-and-drop by setting a custom events to draggable elements\n  const sensors = useSensors(\n    ...(process.env.NODE_ENV === 'test' ? [] : [pointerSensor, keyboardSensor]),\n  );\n\n  useEffect(\n    () =>\n      state.init({\n        a11yContainer: modalsContainerRef?.current,\n      }),\n    [],\n  );\n\n  state.dnd.onSubmit = onSubmit;\n  state.dnd.onCancel = onCancel;\n\n  return (\n    <DndContext\n      sensors={sensors}\n      autoScroll={{\n        activator: AutoScrollActivator.DraggableRect,\n        freeze: true,\n        acceleration: 4,\n        threshold: {\n          y: 0.01,\n          x: 0.2,\n        },\n      }}\n      accessibility={{\n        container: state.dnd.a11yContainer as HTMLElement | undefined,\n        announcements: state.dnd.nullAnnouncements,\n        screenReaderInstructions: {\n          draggable: '',\n        },\n        restoreFocus: false,\n      }}\n      collisionDetection={closestCenter}\n      modifiers={[restrictToWindowEdges]}\n      cancelDrop={(ev) => state.dnd.beforeDrop(ev)}\n      onDragStart={(ev) => {\n        state.dnd.onDragStart(ev);\n      }}\n      onDragMove={(ev) => {\n        state.dnd.onDragMove(ev);\n      }}\n      onDragEnd={(ev) => {\n        state.dnd.onDragEnd(ev);\n      }}\n      onDragCancel={() => {\n        state.dnd.onDragCancel();\n      }}\n      onDragOver={(ev) => {\n        state.dnd.onDragOver(ev);\n      }}\n    >\n      <SortableContext items={keyedItems} strategy={rectSortingStrategy}>\n        {children}\n        <DragAndDropAnnouncements\n          state={state.dnd}\n          dataHook=\"grid-dnd-live-region\"\n        />\n      </SortableContext>\n    </DndContext>\n  );\n}\n\nexport const GridSortableContext = observer(_GridSortableContext);\n"],"mappings":"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"}

package/dist/cjs/components/GridDragAndDropDndKit/dndTestEventHandlers.js

@@ -0,0 +1,103 @@
+"use strict";
+
+exports.__esModule = true;
+exports.sortableItemTestEvents = exports.dragHandleTestEvents = void 0;
+var _mobx = require("mobx");
+const sortableItemTestEvents = ({
+  id,
+  disabled,
+  state
+}) => {
+  return {
+    onPointerDown: () => {
+      if (disabled != null && disabled.draggable) {
+        return;
+      }
+      state.onDragStart({
+        active: {
+          id
+        }
+      });
+    },
+    onPointerUp: () => {
+      if (disabled != null && disabled.droppable || state.activeId == null) {
+        return;
+      }
+      const isCancelled = state.beforeDrop({
+        active: {
+          id: state.activeId
+        },
+        over: {
+          id
+        }
+      });
+      if (isCancelled) {
+        return;
+      }
+      state.onDragEnd({
+        over: {
+          id
+        }
+      });
+    },
+    onKeyDown: e => {
+      const keyboardCodes = state.keyboardCodes;
+      if (state.status === 'start' && keyboardCodes.move.includes(e.nativeEvent.code)) {
+        state.onDragOver({
+          over: {
+            id
+          }
+        });
+        return;
+      }
+    }
+  };
+};
+exports.sortableItemTestEvents = sortableItemTestEvents;
+const dragHandleTestEvents = ({
+  id,
+  state
+}) => {
+  return {
+    onKeyDown: (0, _mobx.action)(e => {
+      var _state$handleEvents;
+      (_state$handleEvents = state.handleEvents) == null || _state$handleEvents.onKeyDown == null || _state$handleEvents.onKeyDown(e);
+      const keyboardCodes = state.keyboardCodes;
+      if (state.status === 'start' || state.status === 'over') {
+        if (keyboardCodes.end.includes(e.nativeEvent.code)) {
+          if (state.activeId == null) {
+            return;
+          }
+          state.beforeDrop({
+            active: {
+              id: state.activeId
+            },
+            over: {
+              id
+            }
+          });
+          state.onDragEnd({
+            over: {
+              id
+            }
+          });
+          return;
+        }
+        if (keyboardCodes.cancel.includes(e.nativeEvent.code)) {
+          state.onDragCancel();
+          return;
+        }
+      }
+      if (keyboardCodes.start.includes(e.nativeEvent.code)) {
+        state.onDragStart({
+          active: {
+            id
+          }
+        });
+        return;
+      }
+    })
+  };
+};
+exports.dragHandleTestEvents = dragHandleTestEvents;
+//# sourceMappingURL=dndTestEventHandlers.js.map

package/dist/cjs/components/GridDragAndDropDndKit/dndTestEventHandlers.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_mobx","require","sortableItemTestEvents","id","disabled","state","onPointerDown","draggable","onDragStart","active","onPointerUp","droppable","activeId","isCancelled","beforeDrop","over","onDragEnd","onKeyDown","e","keyboardCodes","status","move","includes","nativeEvent","code","onDragOver","exports","dragHandleTestEvents","action","_state$handleEvents","handleEvents","end","cancel","onDragCancel","start"],"sources":["../../../../src/components/GridDragAndDropDndKit/dndTestEventHandlers.ts"],"sourcesContent":["import { HTMLAttributes } from 'react';\nimport { DragAndDropState } from '../DragAndDrop';\nimport { FiltersMap } from '@wix/bex-core';\nimport { action } from 'mobx';\n\nexport interface DndTestEventHandlersParams<T, F extends FiltersMap> {\n  id: string | number;\n  disabled?: {\n    draggable?: boolean;\n    droppable?: boolean;\n  };\n  state: DragAndDropState<T, F>;\n}\n\nexport const sortableItemTestEvents = <T, F extends FiltersMap>({\n  id,\n  disabled,\n  state,\n}: DndTestEventHandlersParams<T, F>): Partial<HTMLAttributes<HTMLElement>> => {\n  return {\n    onPointerDown: () => {\n      if (disabled?.draggable) {\n        return;\n      }\n      state.onDragStart({ active: { id } });\n    },\n    onPointerUp: () => {\n      if (disabled?.droppable || state.activeId == null) {\n        return;\n      }\n      const isCancelled = state.beforeDrop({\n        active: {\n          id: state.activeId,\n        },\n        over: {\n          id,\n        },\n      });\n      if (isCancelled) {\n        return;\n      }\n      state.onDragEnd({\n        over: {\n          id,\n        },\n      });\n    },\n    onKeyDown: (e) => {\n      const keyboardCodes = state.keyboardCodes;\n\n      if (\n        state.status === 'start' &&\n        keyboardCodes.move.includes(e.nativeEvent.code)\n      ) {\n        state.onDragOver({\n          over: {\n            id,\n          },\n        });\n        return;\n      }\n    },\n  };\n};\n\nexport const dragHandleTestEvents = <T, F extends FiltersMap>({\n  id,\n  state,\n}: DndTestEventHandlersParams<T, F>): Partial<HTMLAttributes<HTMLElement>> => {\n  return {\n    onKeyDown: action((e) => {\n      state.handleEvents?.onKeyDown?.(e);\n\n      const keyboardCodes = state.keyboardCodes;\n\n      if (state.status === 'start' || state.status === 'over') {\n        if (keyboardCodes.end.includes(e.nativeEvent.code)) {\n          if (state.activeId == null) {\n            return;\n          }\n          state.beforeDrop({\n            active: { id: state.activeId },\n            over: { id },\n          });\n          state.onDragEnd({ over: { id } });\n          return;\n        }\n\n        if (keyboardCodes.cancel.includes(e.nativeEvent.code)) {\n          state.onDragCancel();\n          return;\n        }\n      }\n\n      if (keyboardCodes.start.includes(e.nativeEvent.code)) {\n        state.onDragStart({ active: { id } });\n        return;\n      }\n    }),\n  };\n};\n"],"mappings":"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"}

package/dist/cjs/components/GridDragAndDropDndKit/sortableGridKeyboardCoordinates.js

@@ -0,0 +1,113 @@
+"use strict";
+
+exports.__esModule = true;
+exports.sortableGridKeyboardCoordinates = void 0;
+var _core = require("@wix/wix-style-react-incubator/dnd-kit/core");
+var _utilities = require("@wix/wix-style-react-incubator/dnd-kit/utilities");
+var _sortable = require("@wix/wix-style-react-incubator/dnd-kit/sortable");
+const directions = [_core.KeyboardCode.Down, _core.KeyboardCode.Right, _core.KeyboardCode.Up, _core.KeyboardCode.Left];
+const sortableGridKeyboardCoordinates = ({
+  containerDistanceThreshold = 0
+} = {}) => (event, {
+  context: {
+    active,
+    collisionRect,
+    droppableRects,
+    droppableContainers,
+    over,
+    scrollableAncestors
+  }
+}) => {
+  if (directions.includes(event.code)) {
+    event.preventDefault();
+    if (!active || !collisionRect) {
+      return;
+    }
+    const filteredContainers = [];
+    droppableContainers.getEnabled().forEach(entry => {
+      if (!entry || entry != null && entry.disabled) {
+        return;
+      }
+      const rect = droppableRects.get(entry.id);
+      if (!rect) {
+        return;
+      }
+      switch (event.code) {
+        case _core.KeyboardCode.Down:
+          if (rect.top - collisionRect.top > containerDistanceThreshold) {
+            filteredContainers.push(entry);
+          }
+          break;
+        case _core.KeyboardCode.Up:
+          if (collisionRect.top - rect.top > containerDistanceThreshold) {
+            filteredContainers.push(entry);
+          }
+          break;
+        case _core.KeyboardCode.Left:
+          if (collisionRect.left - rect.left > containerDistanceThreshold) {
+            filteredContainers.push(entry);
+          }
+          break;
+        case _core.KeyboardCode.Right:
+          if (rect.left - collisionRect.left > containerDistanceThreshold) {
+            filteredContainers.push(entry);
+          }
+          break;
+      }
+    });
+    const collisions = (0, _core.closestCorners)({
+      active,
+      collisionRect,
+      droppableRects,
+      droppableContainers: filteredContainers,
+      pointerCoordinates: null
+    });
+    let closestId = (0, _core.getFirstCollision)(collisions, 'id');
+    if (closestId === (over == null ? void 0 : over.id) && collisions.length > 1) {
+      closestId = collisions[1].id;
+    }
+    if (closestId != null) {
+      const activeDroppable = droppableContainers.get(active.id);
+      const newDroppable = droppableContainers.get(closestId);
+      const newRect = newDroppable ? droppableRects.get(newDroppable.id) : null;
+      const newNode = newDroppable == null ? void 0 : newDroppable.node.current;
+      if (newNode && newRect && activeDroppable && newDroppable) {
+        const newScrollAncestors = (0, _core.getScrollableAncestors)(newNode);
+        const hasDifferentScrollAncestors = newScrollAncestors.some((element, index) => scrollableAncestors[index] !== element);
+        const hasSameContainer = isSameContainer(activeDroppable, newDroppable);
+        const isAfterActive = isAfter(activeDroppable, newDroppable);
+        const offset = hasDifferentScrollAncestors || !hasSameContainer ? {
+          x: 0,
+          y: 0
+        } : {
+          x: isAfterActive ? collisionRect.width - newRect.width : 0,
+          y: isAfterActive ? collisionRect.height - newRect.height : 0
+        };
+        const rectCoordinates = {
+          x: newRect.left,
+          y: newRect.top
+        };
+        const newCoordinates = offset.x && offset.y ? rectCoordinates : (0, _utilities.subtract)(rectCoordinates, offset);
+        return newCoordinates;
+      }
+    }
+  }
+  return undefined;
+};
+exports.sortableGridKeyboardCoordinates = sortableGridKeyboardCoordinates;
+function isSameContainer(a, b) {
+  if (!(0, _sortable.hasSortableData)(a) || !(0, _sortable.hasSortableData)(b)) {
+    return false;
+  }
+  return a.data.current.sortable.containerId === b.data.current.sortable.containerId;
+}
+function isAfter(a, b) {
+  if (!(0, _sortable.hasSortableData)(a) || !(0, _sortable.hasSortableData)(b)) {
+    return false;
+  }
+  if (!isSameContainer(a, b)) {
+    return false;
+  }
+  return a.data.current.sortable.index < b.data.current.sortable.index;
+}
+//# sourceMappingURL=sortableGridKeyboardCoordinates.js.map

package/dist/cjs/components/GridDragAndDropDndKit/sortableGridKeyboardCoordinates.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_core","require","_utilities","_sortable","directions","KeyboardCode","Down","Right","Up","Left","sortableGridKeyboardCoordinates","containerDistanceThreshold","event","context","active","collisionRect","droppableRects","droppableContainers","over","scrollableAncestors","includes","code","preventDefault","filteredContainers","getEnabled","forEach","entry","disabled","rect","get","id","top","push","left","collisions","closestCorners","pointerCoordinates","closestId","getFirstCollision","length","activeDroppable","newDroppable","newRect","newNode","node","current","newScrollAncestors","getScrollableAncestors","hasDifferentScrollAncestors","some","element","index","hasSameContainer","isSameContainer","isAfterActive","isAfter","offset","x","y","width","height","rectCoordinates","newCoordinates","subtract","undefined","exports","a","b","hasSortableData","data","sortable","containerId"],"sources":["../../../../src/components/GridDragAndDropDndKit/sortableGridKeyboardCoordinates.ts"],"sourcesContent":["import {\n  closestCorners,\n  DroppableContainer,\n  getFirstCollision,\n  getScrollableAncestors,\n  KeyboardCode,\n  KeyboardCoordinateGetter,\n} from '@wix/wix-style-react-incubator/dnd-kit/core';\nimport { subtract } from '@wix/wix-style-react-incubator/dnd-kit/utilities';\nimport { hasSortableData } from '@wix/wix-style-react-incubator/dnd-kit/sortable';\n\nconst directions: string[] = [\n  KeyboardCode.Down,\n  KeyboardCode.Right,\n  KeyboardCode.Up,\n  KeyboardCode.Left,\n];\n\nexport const sortableGridKeyboardCoordinates =\n  ({\n    containerDistanceThreshold = 0,\n  }: { containerDistanceThreshold?: number } = {}): KeyboardCoordinateGetter =>\n  (\n    event,\n    {\n      context: {\n        active,\n        collisionRect,\n        droppableRects,\n        droppableContainers,\n        over,\n        scrollableAncestors,\n      },\n    },\n  ) => {\n    if (directions.includes(event.code)) {\n      event.preventDefault();\n\n      if (!active || !collisionRect) {\n        return;\n      }\n\n      const filteredContainers: DroppableContainer[] = [];\n\n      droppableContainers.getEnabled().forEach((entry) => {\n        if (!entry || entry?.disabled) {\n          return;\n        }\n\n        const rect = droppableRects.get(entry.id);\n\n        if (!rect) {\n          return;\n        }\n\n        switch (event.code) {\n          case KeyboardCode.Down:\n            if (rect.top - collisionRect.top > containerDistanceThreshold) {\n              filteredContainers.push(entry);\n            }\n            break;\n          case KeyboardCode.Up:\n            if (collisionRect.top - rect.top > containerDistanceThreshold) {\n              filteredContainers.push(entry);\n            }\n            break;\n          case KeyboardCode.Left:\n            if (collisionRect.left - rect.left > containerDistanceThreshold) {\n              filteredContainers.push(entry);\n            }\n            break;\n          case KeyboardCode.Right:\n            if (rect.left - collisionRect.left > containerDistanceThreshold) {\n              filteredContainers.push(entry);\n            }\n            break;\n        }\n      });\n\n      const collisions = closestCorners({\n        active,\n        collisionRect,\n        droppableRects,\n        droppableContainers: filteredContainers,\n        pointerCoordinates: null,\n      });\n      let closestId = getFirstCollision(collisions, 'id');\n\n      if (closestId === over?.id && collisions.length > 1) {\n        closestId = collisions[1].id;\n      }\n\n      if (closestId != null) {\n        const activeDroppable = droppableContainers.get(active.id);\n        const newDroppable = droppableContainers.get(closestId);\n        const newRect = newDroppable\n          ? droppableRects.get(newDroppable.id)\n          : null;\n        const newNode = newDroppable?.node.current;\n\n        if (newNode && newRect && activeDroppable && newDroppable) {\n          const newScrollAncestors = getScrollableAncestors(newNode);\n          const hasDifferentScrollAncestors = newScrollAncestors.some(\n            (element, index) => scrollableAncestors[index] !== element,\n          );\n          const hasSameContainer = isSameContainer(\n            activeDroppable,\n            newDroppable,\n          );\n          const isAfterActive = isAfter(activeDroppable, newDroppable);\n          const offset =\n            hasDifferentScrollAncestors || !hasSameContainer\n              ? {\n                  x: 0,\n                  y: 0,\n                }\n              : {\n                  x: isAfterActive ? collisionRect.width - newRect.width : 0,\n                  y: isAfterActive ? collisionRect.height - newRect.height : 0,\n                };\n          const rectCoordinates = {\n            x: newRect.left,\n            y: newRect.top,\n          };\n\n          const newCoordinates =\n            offset.x && offset.y\n              ? rectCoordinates\n              : subtract(rectCoordinates, offset);\n\n          return newCoordinates;\n        }\n      }\n    }\n\n    return undefined;\n  };\n\nfunction isSameContainer(a: DroppableContainer, b: DroppableContainer) {\n  if (!hasSortableData(a) || !hasSortableData(b)) {\n    return false;\n  }\n\n  return (\n    a.data.current.sortable.containerId === b.data.current.sortable.containerId\n  );\n}\n\nfunction isAfter(a: DroppableContainer, b: DroppableContainer) {\n  if (!hasSortableData(a) || !hasSortableData(b)) {\n    return false;\n  }\n\n  if (!isSameContainer(a, b)) {\n    return false;\n  }\n\n  return a.data.current.sortable.index < b.data.current.sortable.index;\n}\n"],"mappings":"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"}

package/dist/cjs/components/Heading/Heading.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.Heading = Heading;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _designSystem = require("@wix/design-system");
+var _HeadingStCss = require("./Heading.st.css.js");
+var _react = _interopRequireDefault(require("react"));
+var _jsxFileName = "/home/builduser/work/db7ea24852bc3350/packages/cairo/dist/cjs/components/Heading/Heading.tsx";
+function Heading(props) {
+  const {
+    appearance,
+    className,
+    ...rest
+  } = props;
+  return /*#__PURE__*/_react.default.createElement(_designSystem.Heading, (0, _extends2.default)({}, rest, {
+    appearance: appearance,
+    className: (0, _HeadingStCss.st)(_HeadingStCss.classes.root, {
+      appearanceH2: appearance === 'H2'
+    }),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 9,
+      columnNumber: 5
+    }
+  }));
+}
+//# sourceMappingURL=Heading.js.map

package/dist/cjs/components/Heading/Heading.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_designSystem","require","_HeadingStCss","_react","_interopRequireDefault","_jsxFileName","Heading","props","appearance","className","rest","default","createElement","_extends2","st","classes","root","appearanceH2","__self","__source","fileName","lineNumber","columnNumber"],"sources":["../../../../src/components/Heading/Heading.tsx"],"sourcesContent":["import { Heading as HeadingBase, HeadingProps } from '@wix/design-system';\nimport { st, classes } from './Heading.st.css.js';\nimport React from 'react';\n\nexport function Heading(props: HeadingProps) {\n  const { appearance, className, ...rest } = props;\n\n  return (\n    <HeadingBase\n      {...rest}\n      appearance={appearance}\n      className={st(classes.root, {\n        appearanceH2: appearance === 'H2',\n      })}\n    />\n  );\n}\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAC,sBAAA,CAAAH,OAAA;AAA0B,IAAAI,YAAA;AAEnB,SAASC,OAAOA,CAACC,KAAmB,EAAE;EAC3C,MAAM;IAAEC,UAAU;IAAEC,SAAS;IAAE,GAAGC;EAAK,CAAC,GAAGH,KAAK;EAEhD,oBACEJ,MAAA,CAAAQ,OAAA,CAAAC,aAAA,CAACZ,aAAA,CAAAM,OAAW,MAAAO,SAAA,CAAAF,OAAA,MACND,IAAI;IACRF,UAAU,EAAEA,UAAW;IACvBC,SAAS,EAAE,IAAAK,gBAAE,EAACC,qBAAO,CAACC,IAAI,EAAE;MAC1BC,YAAY,EAAET,UAAU,KAAK;IAC/B,CAAC,CAAE;IAAAU,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAf,YAAA;MAAAgB,UAAA;MAAAC,YAAA;IAAA;EAAA,EACJ,CAAC;AAEN"}

package/dist/cjs/components/Heading/Heading.st.css

@@ -0,0 +1,10 @@
+.root {
+  -st-states: appearanceH2;
+
+  visibility: visible;
+}
+
+.root:appearanceH2 {
+  font-size: 28px !important;
+  line-height: 36px !important;
+}