@planningcenter/tapestry-react 2.10.0-rc.2 → 2.10.0-rc.3

package/dist/esm/DateField/DateField.js

@@ -0,0 +1,163 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React, { useState, useCallback, useMemo, useRef } from 'react';
+import Card from '../Card';
+import Calendar from '../Calendar';
+import FocusGroup from '../FocusGroup';
+import Icon from '../Icon';
+import Input from '../Input/Input';
+import Popover from '../Popover';
+import { generateId } from '../utils';
+import { useThemeProps } from '../system';
+import { useArrowKeysToNavigateCalendar } from './useArrowKeysToNavigateCalendar';
+import { useEditableDate } from './useEditableDate';
+
+function DateField(_ref) {
+  var _ref$formatValue = _ref.formatValue,
+      formatValue = _ref$formatValue === void 0 ? 'MMMM dd, yyyy' : _ref$formatValue,
+      _ref$defaultOpen = _ref.defaultOpen,
+      defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
+      keepInView = _ref.keepInView,
+      _ref$lockScrollWhileO = _ref.lockScrollWhileOpen,
+      lockScrollWhileOpen = _ref$lockScrollWhileO === void 0 ? true : _ref$lockScrollWhileO,
+      minDate = _ref.minDate,
+      maxDate = _ref.maxDate,
+      onChange = _ref.onChange,
+      placement = _ref.placement,
+      value = _ref.value,
+      props = _objectWithoutPropertiesLoose(_ref, ["formatValue", "defaultOpen", "keepInView", "lockScrollWhileOpen", "minDate", "maxDate", "onChange", "placement", "value"]);
+
+  var _useThemeProps = useThemeProps('dateField', props),
+      calendarProps = _useThemeProps.calendarProps,
+      color = _useThemeProps.color,
+      popoverProps = _useThemeProps.popoverProps,
+      sizes = _useThemeProps.sizes,
+      sizeThickness = _useThemeProps.thickness,
+      trackColor = _useThemeProps.trackColor,
+      restProps = _objectWithoutPropertiesLoose(_useThemeProps, ["calendarProps", "color", "popoverProps", "sizes", "thickness", "trackColor"]);
+
+  var _useState = useState(defaultOpen),
+      isPopoverOpen = _useState[0],
+      setIsPopoverOpen = _useState[1];
+
+  var id = generateId('datefield');
+  var popover = useRef(null);
+  var inputWrapper = useRef(null);
+  var focusInput = useCallback(function () {
+    var input = inputWrapper.current.querySelector('input');
+
+    if (input.focus) {
+      input.focus();
+    }
+  }, []);
+  var openPopover = useCallback(function () {
+    setIsPopoverOpen(true);
+  }, []);
+  var closePopover = useCallback(function () {
+    setIsPopoverOpen(false);
+  }, []);
+  var dateValidator = useCallback(function (date) {
+    if (!date) return false;
+    if (minDate && date < minDate) return false;
+    if (maxDate && date > maxDate) return false;
+    return true;
+  }, [minDate, maxDate]);
+
+  var _useEditableDate = useEditableDate({
+    date: value,
+    dateFormat: formatValue,
+    dateValidator: dateValidator,
+    onChange: onChange
+  }),
+      formattedDate = _useEditableDate.formattedDate,
+      setDate = _useEditableDate.setDate,
+      clearKeyBuffer = _useEditableDate.clearKeyBuffer,
+      invalidKeyBuffer = _useEditableDate.invalidKeyBuffer;
+
+  var handleDateSelectedFromCalendar = useCallback(function (date) {
+    focusInput();
+    setDate(date);
+    closePopover();
+  }, [focusInput, setDate, closePopover]);
+  var handleNavigationChangeFromCalendar = useCallback(function (date) {
+    setDate(date);
+  }, [setDate]);
+  var navigateCalendarWithArrowKeys = useArrowKeysToNavigateCalendar({
+    date: value,
+    calendarIsOpen: isPopoverOpen,
+    closeCalendar: closePopover,
+    openCalendar: openPopover,
+    onChange: setDate
+  });
+  var handleInputOnChange = useCallback(function (event) {
+    setDate(event.currentTarget.value);
+  }, [setDate]);
+  var handleOnBlur = useCallback(function () {
+    clearKeyBuffer();
+    closePopover();
+  }, [clearKeyBuffer, closePopover]);
+  var inputColors = useMemo(function () {
+    if (invalidKeyBuffer) {
+      return {
+        color: 'error-darker',
+        backgroundColor: 'error-lighter'
+      };
+    } else {
+      return {};
+    }
+  }, [invalidKeyBuffer]);
+
+  var _ref3 = /*#__PURE__*/React.createElement(Icon, {
+    name: "general.calendar",
+    color: "foregroundTertiary",
+    onClick: openPopover
+  });
+
+  return /*#__PURE__*/React.createElement(FocusGroup, {
+    onBlur: handleOnBlur
+  }, function (_ref2) {
+    var requestBlur = _ref2.requestBlur,
+        setRef = _ref2.setRef;
+    return /*#__PURE__*/React.createElement(Popover, _extends({}, popoverProps, {
+      ref: function ref(component) {
+        popover.current = component;
+      },
+      as: Card,
+      elevation: 2,
+      innerRef: function innerRef(node) {
+        popover.current = node;
+        setRef(id + "-popover")(node);
+      },
+      keepInView: keepInView,
+      lockScrollWhileOpen: lockScrollWhileOpen,
+      onBlur: requestBlur,
+      onRequestClose: closePopover,
+      open: isPopoverOpen,
+      placement: placement,
+      tabIndex: -1,
+      anchorElement: /*#__PURE__*/React.createElement(Input, _extends({
+        innerRef: function innerRef(node) {
+          inputWrapper.current = node;
+          setRef(id + "-input")(node);
+        },
+        onBlur: requestBlur,
+        onFocus: openPopover,
+        onChange: handleInputOnChange,
+        onKeyDown: navigateCalendarWithArrowKeys,
+        value: formattedDate,
+        renderRight: _ref3
+      }, inputColors, restProps))
+    }), /*#__PURE__*/React.createElement(Calendar, _extends({
+      size: "sm"
+    }, calendarProps, {
+      date: value,
+      selected: value,
+      minDate: minDate,
+      maxDate: maxDate,
+      onDateSelect: handleDateSelectedFromCalendar,
+      onDateChange: handleNavigationChangeFromCalendar
+    })));
+  });
+}
+
+export default DateField;

package/dist/esm/DateField/index.js

@@ -0,0 +1,2 @@
+import DateField from './DateField';
+export default DateField;

package/dist/esm/DateField/parse.js

@@ -0,0 +1,93 @@
+var monthDayYearFormat = /^(0?[1-9]|1[0-2]|(?:(?:jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)[a-z]*))(?:-|\/|\s)(0?[1-9]|[1-2][0-9]|3[0-1])(?:-|\/|,\s)(\d{4})$/i;
+var dayMonthYearFormat = /^(0?[1-9]|[1-2][0-9]|3[0-1])(?:-|\/|\s)(0?[1-9]|1[0-2]|(?:(?:jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)[a-z]*))(?:-|\/|,\s)(\d{4})$/i;
+var yearMonthDayFormat = /^(\d{4})[-/](0?[1-9]|1[0-2])[-/](0?[1-9]|[1-2][0-9]|3[0-1])$/;
+export var parseDate = function parseDate(_ref) {
+  var date = _ref.date,
+      format = _ref.format;
+
+  try {
+    var _parseDateIntoObject = parseDateIntoObject(date, format),
+        year = _parseDateIntoObject.year,
+        month = _parseDateIntoObject.month,
+        day = _parseDateIntoObject.day;
+
+    return new Date(year, month - 1, day);
+  } catch (e) {
+    return null;
+  }
+};
+export var isValidDate = function isValidDate(date) {
+  return monthDayYearFormat.test(date) || yearMonthDayFormat.test(date);
+};
+export var parseMonth = function parseMonth(monthString) {
+  var months = {
+    jan: 1,
+    feb: 2,
+    mar: 3,
+    apr: 4,
+    may: 5,
+    jun: 6,
+    jul: 7,
+    aug: 8,
+    sep: 9,
+    oct: 10,
+    nov: 11,
+    dec: 12
+  };
+  var normalizedString = monthString.toLowerCase().replace(/^0/, '').slice(0, 3);
+
+  if (/^\d+$/.test(normalizedString)) {
+    var month = parseInt(normalizedString, 10);
+
+    if (month >= 1 && month <= 12) {
+      return month;
+    }
+  } else if (normalizedString in months) {
+    return months[normalizedString];
+  }
+
+  throw new Error("Invalid month string: " + monthString);
+};
+
+var parseDateIntoObject = function parseDateIntoObject(date, format) {
+  if (format != null && format.match(/d.*M/) && dayMonthYearFormat.test(date)) {
+    var _dayMonthYearFormat$e = dayMonthYearFormat.exec(date),
+        day = _dayMonthYearFormat$e[1],
+        month = _dayMonthYearFormat$e[2],
+        year = _dayMonthYearFormat$e[3];
+
+    return {
+      year: parseInt(year, 10),
+      month: parseMonth(month),
+      day: parseInt(day, 10)
+    };
+  }
+
+  if (monthDayYearFormat.test(date)) {
+    var _monthDayYearFormat$e = monthDayYearFormat.exec(date),
+        _month = _monthDayYearFormat$e[1],
+        _day = _monthDayYearFormat$e[2],
+        _year = _monthDayYearFormat$e[3];
+
+    return {
+      year: parseInt(_year, 10),
+      month: parseMonth(_month),
+      day: parseInt(_day, 10)
+    };
+  }
+
+  if (yearMonthDayFormat.test(date)) {
+    var _yearMonthDayFormat$e = yearMonthDayFormat.exec(date),
+        _year2 = _yearMonthDayFormat$e[1],
+        _month2 = _yearMonthDayFormat$e[2],
+        _day2 = _yearMonthDayFormat$e[3];
+
+    return {
+      year: parseInt(_year2, 10),
+      month: parseMonth(_month2),
+      day: parseInt(_day2, 10)
+    };
+  }
+
+  throw new Error("Invalid date: " + date);
+};

package/dist/esm/DateField/parse.test.js

@@ -0,0 +1,42 @@
+import { format } from 'date-fns';
+import { parseDate, isValidDate, parseMonth } from './parse';
+describe('isValidDate', function () {
+  var validDates = ['jun 6, 2022', 'June-06-2022', '6-6-2022', '6/6/2022', '06-06-2022', '2022-06-26', // year, month, day
+  '2022/6/1' // year, month, day
+  ];
+  validDates.forEach(function (date) {
+    it("returns true for \"" + date + "\"", function () {
+      expect(isValidDate(date)).toBe(true);
+    });
+  });
+  var invalidDates = ['June-06-22', '13-6-2022', 'June 6 2022', '2022/6/1/1', '2022-15-06'];
+  invalidDates.forEach(function (date) {
+    it("returns false for \"" + date + "\"", function () {
+      expect(isValidDate(date)).toBe(false);
+    });
+  });
+});
+describe('parseDate', function () {
+  var dates = [['January 31, 2022', 'January 31, 2022'], ['jun 9, 2022', 'June 09, 2022'], ['June-09-2022', 'June 09, 2022'], ['6-9-2022', 'June 09, 2022'], ['6/9/2022', 'June 09, 2022'], ['06-09-2022', 'June 09, 2022'], ['2022-06-26', 'June 26, 2022'], ['2022/6/1', 'June 01, 2022', 'MMMM dd, yyyy'], ['15/6/2022', 'June 15, 2022', 'dd/MM/YYYY'], ['1/6/2022', 'June 01, 2022', 'dd MMMM, yyyy'], ['15-aug-2023', 'August 15, 2023', 'dd MMMM, yyyy'], ['15 August, 2023', 'August 15, 2023', 'dd MMMM, yyyy']];
+  dates.forEach(function (_ref) {
+    var date = _ref[0],
+        expected = _ref[1],
+        dateFormat = _ref[2];
+    it("returns " + expected + " for \"" + date + "\"", function () {
+      expect(format(parseDate({
+        date: date,
+        format: dateFormat
+      }), 'MMMM dd, yyyy')).toEqual(expected);
+    });
+  });
+});
+describe('parseMonth', function () {
+  var months = [['jan', 1], ['feb', 2], ['December', 12], ['2', 2], ['12', 12], ['05', 5]];
+  months.forEach(function (_ref2) {
+    var month = _ref2[0],
+        expected = _ref2[1];
+    it("returns " + expected + " for \"" + month + "\"", function () {
+      expect(parseMonth(month)).toBe(expected);
+    });
+  });
+});

package/dist/esm/DateField/useArrowKeysToNavigateCalendar.js

@@ -0,0 +1,40 @@
+import { useCallback } from "react";
+export var useArrowKeysToNavigateCalendar = function useArrowKeysToNavigateCalendar(_ref) {
+  var date = _ref.date,
+      calendarIsOpen = _ref.calendarIsOpen,
+      closeCalendar = _ref.closeCalendar,
+      openCalendar = _ref.openCalendar,
+      onChange = _ref.onChange;
+  var incrementDate = useCallback(function (by) {
+    if (!date) return;
+    var newDate = new Date(date);
+    newDate.setDate(newDate.getDate() + by);
+    onChange(newDate);
+  }, [date, onChange]);
+  var handleInputKeyDown = useCallback(function (event) {
+    if (calendarIsOpen) {
+      if (event.key === 'ArrowUp') {
+        event.preventDefault();
+        incrementDate(-7);
+      } else if (event.key === 'ArrowDown') {
+        event.preventDefault();
+        incrementDate(7);
+      } else if (event.key === 'ArrowLeft') {
+        event.preventDefault();
+        incrementDate(-1);
+      } else if (event.key === 'ArrowRight') {
+        event.preventDefault();
+        incrementDate(1);
+      } else if (event.key === 'Enter') {
+        event.preventDefault();
+        closeCalendar();
+      }
+    } else {
+      if (event.key === 'ArrowDown') {
+        event.preventDefault();
+        openCalendar();
+      }
+    }
+  }, [calendarIsOpen, openCalendar, incrementDate]);
+  return handleInputKeyDown;
+};

package/dist/esm/DateField/useEditableDate.js

@@ -0,0 +1,62 @@
+import { useCallback, useMemo, useState } from "react";
+import { format } from 'date-fns';
+import { parseDate } from "./parse";
+export var useEditableDate = function useEditableDate(_ref) {
+  var date = _ref.date,
+      dateFormat = _ref.dateFormat,
+      dateValidator = _ref.dateValidator,
+      onChange = _ref.onChange;
+
+  var _useState = useState(),
+      keyBuffer = _useState[0],
+      setKeyBuffer = _useState[1];
+
+  var _useState2 = useState(false),
+      invalidKeyBuffer = _useState2[0],
+      setInvalidKeyBuffer = _useState2[1];
+
+  var formattedDate = useMemo(function () {
+    if (keyBuffer !== undefined) {
+      return keyBuffer;
+    } else {
+      return date ? format(date, dateFormat) : '';
+    }
+  }, [date, dateFormat, keyBuffer]);
+  var setKeyBufferAndValidate = useCallback(function (value) {
+    setKeyBuffer(value);
+
+    if (value && !dateValidator(parseDate({
+      date: value,
+      format: dateFormat
+    }))) {
+      setInvalidKeyBuffer(true);
+    } else {
+      setInvalidKeyBuffer(false);
+    }
+  }, [dateFormat, dateValidator]);
+  var setDate = useCallback(function (date) {
+    var newDate;
+
+    if (typeof date === 'string') {
+      setKeyBufferAndValidate(date);
+      newDate = parseDate({
+        date: date,
+        format: dateFormat
+      });
+    } else {
+      setKeyBufferAndValidate(undefined);
+      newDate = date;
+    }
+
+    if (dateValidator(newDate) && onChange) onChange(newDate);
+  }, [onChange, setKeyBufferAndValidate, dateValidator, dateFormat]);
+  var clearKeyBuffer = useCallback(function () {
+    setKeyBufferAndValidate(undefined);
+  }, []);
+  return {
+    formattedDate: formattedDate,
+    setDate: setDate,
+    clearKeyBuffer: clearKeyBuffer,
+    invalidKeyBuffer: invalidKeyBuffer
+  };
+};

package/dist/esm/Divider/Divider.js

@@ -0,0 +1,35 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react';
+import Box from '../Box';
+
+/**
+ * Used to break up content
+ */
+export function Divider(_ref) {
+  var _ref$axis = _ref.axis,
+      axis = _ref$axis === void 0 ? 'horizontal' : _ref$axis,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'separatorTertiary' : _ref$color,
+      _ref$margin = _ref.margin,
+      margin = _ref$margin === void 0 ? 0 : _ref$margin,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 1 : _ref$size,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["axis", "color", "margin", "size"]);
+
+  var props = {
+    as: 'div',
+    alignSelf: 'stretch',
+    backgroundColor: color
+  };
+
+  if (axis === 'horizontal') {
+    props.height = size + 'px';
+    props.marginVertical = margin;
+  } else {
+    props.width = size + 'px';
+    props.marginHorizontal = margin;
+  }
+
+  return /*#__PURE__*/React.createElement(Box, _extends({}, props, restProps));
+}

package/dist/esm/Divider/index.js

@@ -0,0 +1,2 @@
+export * from './Divider';
+export { Divider as default } from './Divider';

package/dist/esm/DragDrop/DragDrop.js

@@ -0,0 +1,218 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import React, { Children, Fragment, createElement, createContext, useContext, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import * as RBDND from '@planningcenter/react-beautiful-dnd';
+import mitt from 'mitt';
+import { getThemeDataAttribute } from '../ThemeProvider/styles';
+import { useThemeValue } from '../system';
+import StackView from '../StackView';
+var DragDropContext = /*#__PURE__*/createContext(false);
+var DroppableContext = /*#__PURE__*/createContext(false);
+var emitter = mitt();
+var draggableData = {};
+var portalNode = null;
+var providerCount = 0;
+
+function setDraggableData(id, data) {
+  draggableData[id] = data;
+  return function () {
+    delete draggableData[id];
+  };
+}
+
+function useDragDrop() {
+  var hasParentDragDrop = useContext(DragDropContext);
+  return hasParentDragDrop;
+}
+
+function Provider(_ref) {
+  var _onDragStart = _ref.onDragStart,
+      _onDragEnd = _ref.onDragEnd,
+      props = _objectWithoutPropertiesLoose(_ref, ["onDragStart", "onDragEnd"]);
+
+  var hasParentDragDrop = useDragDrop();
+  var themeId = useThemeValue('id');
+
+  if (typeof document !== 'undefined' && portalNode === null) {
+    portalNode = document.createElement('div');
+    portalNode.id = 'rbd-portal';
+    portalNode.className = 'tapestry-react-reset';
+    portalNode.setAttribute(getThemeDataAttribute(themeId), 'true');
+    document.body.appendChild(portalNode);
+  }
+
+  useEffect(function () {
+    providerCount += 1;
+    return function () {
+      providerCount -= 1; // last unmounting provider clears the portalNode
+
+      if (providerCount === 0) {
+        portalNode = null;
+      }
+    };
+  }, []);
+  return hasParentDragDrop ? props.children : /*#__PURE__*/React.createElement(DragDropContext.Provider, {
+    value: true
+  }, /*#__PURE__*/React.createElement(RBDND.DragDropContext, _extends({
+    onDragStart: function onDragStart(event) {
+      var augmentedEvent = _objectSpread(_objectSpread({}, event), {}, {
+        data: draggableData[event.draggableId] || null
+      });
+
+      emitter.emit('dragStart', augmentedEvent);
+
+      if (_onDragStart) {
+        _onDragStart(augmentedEvent);
+      }
+    },
+    onDragEnd: function onDragEnd(event) {
+      var augmentedEvent = _objectSpread(_objectSpread({}, event), {}, {
+        data: draggableData[event.draggableId] || null
+      });
+
+      emitter.emit('dragEnd', augmentedEvent);
+
+      if (_onDragEnd) {
+        _onDragEnd(augmentedEvent);
+      }
+    }
+  }, props)));
+}
+
+function Droppable(_ref2) {
+  var children = _ref2.children,
+      sourceOnly = _ref2.sourceOnly,
+      onDragStart = _ref2.onDragStart,
+      onDragEnd = _ref2.onDragEnd,
+      onDrop = _ref2.onDrop,
+      props = _objectWithoutPropertiesLoose(_ref2, ["children", "sourceOnly", "onDragStart", "onDragEnd", "onDrop"]);
+
+  useEffect(function () {
+    function handleDragStart(event) {
+      if (onDragStart && event.source.droppableId === props.droppableId) {
+        onDragStart(event);
+      }
+    }
+
+    emitter.on('dragStart', handleDragStart);
+    return function () {
+      emitter.off('dragStart', handleDragStart);
+    };
+  }, [onDragStart]);
+  useEffect(function () {
+    function handleDragEnd(event) {
+      if (onDragEnd && event.source.droppableId === props.droppableId) {
+        onDragEnd(event);
+      }
+
+      if (onDrop && event.destination && event.destination.droppableId === props.droppableId) {
+        onDrop(event);
+      }
+    }
+
+    emitter.on('dragEnd', handleDragEnd);
+    return function () {
+      emitter.off('dragEnd', handleDragEnd);
+    };
+  }, [onDragEnd, onDrop]);
+  return /*#__PURE__*/React.createElement(DroppableContext.Provider, {
+    value: sourceOnly
+  }, /*#__PURE__*/React.createElement(RBDND.Droppable, _extends({
+    isDropDisabled: sourceOnly
+  }, props), function (provided, snapshot) {
+    if (sourceOnly) {
+      provided.placeholder = /*#__PURE__*/React.createElement("div", {
+        style: {
+          display: 'none'
+        }
+      }, provided.placeholder);
+    }
+
+    return children(provided, snapshot);
+  }));
+}
+
+function Draggable(_ref3) {
+  var children = _ref3.children,
+      placeholder = _ref3.placeholder,
+      data = _ref3.data,
+      props = _objectWithoutPropertiesLoose(_ref3, ["children", "placeholder", "data"]);
+
+  var sourceOnly = useContext(DroppableContext);
+  useEffect(function () {
+    return setDraggableData(props.draggableId, data);
+  }, [data]);
+  return /*#__PURE__*/React.createElement(RBDND.Draggable, props, function (provided, snapshot) {
+    if (sourceOnly) {
+      provided.draggableProps.style = snapshot.isDragging ? provided.draggableProps.style : {
+        transform: 'none',
+        transition: 'none'
+      };
+    }
+
+    var child = children(provided, snapshot);
+    return snapshot.isDragging ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/createPortal(child, portalNode), sourceOnly && placeholder && placeholder()) : child;
+  });
+}
+
+function StaticList(_ref4) {
+  var children = _ref4.children,
+      _variants = _ref4.variants,
+      id = _ref4.id,
+      props = _objectWithoutPropertiesLoose(_ref4, ["children", "variants", "id"]);
+
+  var variants = _objectSpread({
+    item: function item(style) {
+      return style;
+    },
+    placeholder: {
+      opacity: 0.5
+    }
+  }, _variants);
+
+  return /*#__PURE__*/React.createElement(Droppable, {
+    droppableId: id,
+    isDropDisabled: true
+  }, function (provided) {
+    return /*#__PURE__*/React.createElement(StackView, _extends({
+      innerRef: provided.innerRef
+    }, props), Children.map(children, function (child, index) {
+      var _child$props = child.props,
+          id = _child$props.id,
+          childProps = _objectWithoutPropertiesLoose(_child$props, ["id"]);
+
+      return /*#__PURE__*/React.createElement(Draggable, {
+        key: child.key,
+        draggableId: id,
+        index: index
+      }, function (provided, snapshot) {
+        return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/createElement(child.type, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, childProps), provided.draggableProps), provided.dragHandleProps), {}, {
+          innerRef: provided.innerRef,
+          style: variants.item(snapshot.isDragging ? provided.draggableProps.style : {
+            transform: 'none',
+            transition: 'none'
+          }, snapshot)
+        })), snapshot.isDragging && /*#__PURE__*/createElement(child.type, _objectSpread(_objectSpread({}, childProps), variants.placeholder)));
+      });
+    }), /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'none'
+      }
+    }, provided.placeholder));
+  });
+}
+
+export default {
+  Provider: Provider,
+  Droppable: Droppable,
+  Draggable: Draggable,
+  StaticList: StaticList,
+  useDragDrop: useDragDrop
+};

package/dist/esm/DragDrop/index.js

@@ -0,0 +1,2 @@
+import DragDrop from './DragDrop';
+export default DragDrop;