@onesy/ui-react 1.0.130 → 1.0.131

package/DonutChart/DonutChart.js

@@ -1,46 +1,53 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
-const style_react_1 = require("@onesy/style-react");
-const PieChart_1 = __importDefault(require("../PieChart"));
-const utils_1 = require("../utils");
-const useStyle = (0, style_react_1.style)(theme => ({
-    root: {
-        '& .onesy-Chart-legend-icon': {
-            position: 'relative',
-            background: 'none !important',
-            border: '2px solid currentColor'
-        }
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _styleReact = require("@onesy/style-react");
+var _PieChart = _interopRequireDefault(require("../PieChart"));
+var _utils = require("../utils");
+const _excluded = ["className"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+const useStyle = (0, _styleReact.style)(theme => ({
+  root: {
+    '& .onesy-Chart-legend-icon': {
+      position: 'relative',
+      background: 'none !important',
+      border: '2px solid currentColor'
     }
-}), { name: 'onesy-DonutChart' });
-const DonutChart = react_1.default.forwardRef((props_, ref) => {
-    const theme = (0, style_react_1.useOnesyTheme)();
-    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyDonutChart) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
-    const PieChart = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.PieChart) || PieChart_1.default; }, [theme]);
-    const { className } = props, other = __rest(props, ["className"]);
-    const { classes } = useStyle();
-    return ((0, jsx_runtime_1.jsx)(PieChart, Object.assign({ ref: ref, innerOffset: 0.64, className: (0, style_react_1.classNames)([
-            (0, utils_1.staticClassName)('DonutChart', theme) && [
-                'onesy-DonutChart-root'
-            ],
-            className,
-            classes.root
-        ]) }, other)));
+  }
+}), {
+  name: 'onesy-DonutChart'
+});
+const DonutChart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  const theme = (0, _styleReact.useOnesyTheme)();
+  const props = _react.default.useMemo(() => {
+    var _theme$ui, _theme$ui2;
+    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyDonutChart) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  }, [props_]);
+  const PieChart = _react.default.useMemo(() => {
+    var _theme$elements;
+    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.PieChart) || _PieChart.default;
+  }, [theme]);
+  const {
+      className
+    } = props,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  return /*#__PURE__*/_react.default.createElement(PieChart, (0, _extends2.default)({
+    ref: ref,
+    innerOffset: 0.64,
+    className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('DonutChart', theme) && ['onesy-DonutChart-root'], className, classes.root])
+  }, other));
 });
 DonutChart.displayName = 'onesy-DonutChart';
-exports.default = DonutChart;
+var _default = exports.default = DonutChart;

package/DonutChart/index.js

@@ -1,8 +1,13 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-var DonutChart_1 = require("./DonutChart");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(DonutChart_1).default; } });
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _DonutChart.default;
+  }
+});
+var _DonutChart = _interopRequireDefault(require("./DonutChart"));

package/DragAndDropList/DragAndDropList.js

@@ -1,163 +1,167 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
-const utils_1 = require("@onesy/utils");
-const style_react_1 = require("@onesy/style-react");
-const useStyle = (0, style_react_1.style)(theme => ({
-    root: {}
-}), { name: 'onesy-DragAndDropList' });
-const DragAndDropList = react_1.default.forwardRef((props_, ref) => {
-    const theme = (0, style_react_1.useOnesyTheme)();
-    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyDragAndDropList) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
-    const { onChange: onChange_, items, image, delay = 0, precise = true, draggedIsElement = true, isEqual, getDraggingElement, onDraggedElement, onDragStart: onDragStart_, className, children } = props, other = __rest(props, ["onChange", "items", "image", "delay", "precise", "draggedIsElement", "isEqual", "getDraggingElement", "onDraggedElement", "onDragStart", "className", "children"]);
-    const { classes } = useStyle();
-    const refs = {
-        root: react_1.default.useRef(null),
-        dragging: react_1.default.useRef(null),
-        rectDragged: react_1.default.useRef(null),
-        isDragging: react_1.default.useRef(null),
-        previous: react_1.default.useRef(null)
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("@onesy/utils");
+var _styleReact = require("@onesy/style-react");
+const _excluded = ["onChange", "items", "image", "delay", "precise", "draggedIsElement", "isEqual", "getDraggingElement", "onDraggedElement", "onDragStart", "className", "children"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+const useStyle = (0, _styleReact.style)(theme => ({
+  root: {}
+}), {
+  name: 'onesy-DragAndDropList'
+});
+const DragAndDropList = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  const theme = (0, _styleReact.useOnesyTheme)();
+  const props = _react.default.useMemo(() => {
+    var _theme$ui, _theme$ui2;
+    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyDragAndDropList) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  }, [props_]);
+  const {
+      onChange: onChange_,
+      items,
+      image,
+      delay = 0,
+      precise = true,
+      draggedIsElement = true,
+      isEqual,
+      getDraggingElement,
+      onDraggedElement,
+      onDragStart: onDragStart_,
+      className,
+      children
+    } = props,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const refs = {
+    root: _react.default.useRef(null),
+    dragging: _react.default.useRef(null),
+    rectDragged: _react.default.useRef(null),
+    isDragging: _react.default.useRef(null),
+    previous: _react.default.useRef(null)
+  };
+  const onChange = _react.default.useMemo(() => {
+    return (0, _utils.debounce)((indexPrevious, indexNew) => onChange_(indexPrevious, indexNew), delay);
+  }, [onChange_, delay]);
+  _react.default.useEffect(() => {
+    var _refs$root$current;
+    const onMouseUp = event => {
+      // in use case
+      // where onDragEnd is never emited
+      // due to original element having it
+      // has been removed from the dom
+      // prior to onDragEnd event is to be emited
+      // alternative way to provide a callback
+      // to dragging has ended
+      if (refs.isDragging.current) {
+        if ((0, _utils.is)('function', onDraggedElement)) onDraggedElement(null);
+        refs.isDragging.current = false;
+      }
     };
-    const onChange = react_1.default.useMemo(() => {
-        return (0, utils_1.debounce)((indexPrevious, indexNew) => onChange_(indexPrevious, indexNew), delay);
-    }, [onChange_, delay]);
-    react_1.default.useEffect(() => {
-        var _a;
-        const onMouseUp = (event) => {
-            // in use case
-            // where onDragEnd is never emited
-            // due to original element having it
-            // has been removed from the dom
-            // prior to onDragEnd event is to be emited
-            // alternative way to provide a callback
-            // to dragging has ended
-            if (refs.isDragging.current) {
-                if ((0, utils_1.is)('function', onDraggedElement))
-                    onDraggedElement(null);
-                refs.isDragging.current = false;
-            }
-        };
-        const rootDocument = (0, utils_1.isEnvironment)('browser') ? (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window.document) : undefined;
-        rootDocument.body.addEventListener('mouseup', onMouseUp);
-        rootDocument.body.addEventListener('touchend', onMouseUp);
-        return () => {
-            rootDocument.body.removeEventListener('mouseup', onMouseUp);
-            rootDocument.body.removeEventListener('touchend', onMouseUp);
-        };
-    }, [onDraggedElement]);
-    const img = react_1.default.useMemo(() => {
-        var _a;
-        const rootDocument = (0, utils_1.isEnvironment)('browser') ? (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window.document) : undefined;
-        const element = rootDocument.createElement('img');
-        element.src = (0, utils_1.is)('string', image) ? image : `data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEASABIAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wAARCAAWAC8DAREAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD+/igAoAKACgAoAKACgD8gtF+E3xs1/wD4UzrXiHxZ+1dZaj43/au+P/gj4r2Vt8RPjBo1np/7PsfiP42654IE+mxalFB4H8OzzeGvAlr4Z+IWjReH9dbQvE1noei+K10q+8N29l/LWD4Z4vx3+qeLx+Z+JdGvnHiXxvk/E1KGe8VYSlQ4Hjj+L8Zk/Ph44iMMnwM55fk1PL89wkcDjXgswpYPCZksNWwFOj7cq2Hj7eMYYNqng8NUot0qEm8Ty4eNSzt+8klOo50pc0eaDlKHMptyG2+Kml/8Id4f+NFz+1o3wN8JeLf2t/DOnan8MZPjbffFG81Xw18aYdI/Zw1Hx1rHw5gm+K3ijwpdfC9dUuvBvie/uNV8M+JdZh0bVvGt5f2cun3V3Tp8SYb+ysDxbU8TnwdlmaeJ+X0MRw7Li+txHVxOX8XRwvANfOcVkMJcS5jltThxYirlOY16mJy/MMXHCYrN61alKhUql6L55UFgvrE4YKbVX6uqKU6HNilTjVfsYTVaynBJThHmjTSd0ptK039seDSvhH8P/FN18ZH1L9pXwD8JdH8f+OdNu9WnufgFrHwx8RSXnxN1TVNb0O9m0r4ceJ/ir8GbnTdIju9Ney0+f4saPfXtl9o1TUbt5LwtDxVhhuF8jzKpxY8R4gZLwxhc7zihUxM6nBOK4ex0qvEOIxOMwdaeGyHMeJeFKmHwsauHlRoT4lwtatS58RXq8yk8C3WqQVC2FqVpU6bStiY1Y2pJRkr1YUa6crO79jJJ6JE/wmtf2kZv2kLEeLNa+Ltj4lX43/E678cx3+j/ABs1D4UXvwTsz44i8Eabpdxq+saZ+znYeGbvSJ/CR8Lal4I0i7+Ky+K4x/wkti8Uviq/t74Yp8fS4+o/2ni+KKOYLi/iKrnMa+F4vr8M1eEaTziOT4fDTxWKw/AdDL6mFnln9m4jJ8NV4lWZR/4UKLjLMq1MrPC/VXyRoOH1ekqdpYdVliH7P2jajF4pzUufnVSSo8nwP4E/1sr+nTxQoAKACgAoAKACgAD/2Q==`;
-        return element;
-    }, []);
-    const onDragStart = (item) => async (event) => {
-        var _a;
-        event.dataTransfer.setData('text', (item === null || item === void 0 ? void 0 : item.value) !== undefined ? item.value : item);
-        if (image)
-            event.dataTransfer.setDragImage(img, 0, 0);
-        refs.isDragging.current = true;
-        const dragging = (0, utils_1.is)('function', getDraggingElement) ? getDraggingElement(event) : event.target;
-        if (onDragStart_)
-            onDragStart_(item, event);
-        refs.dragging.current = draggedIsElement ? dragging : (_a = dragging === null || dragging === void 0 ? void 0 : dragging.dataset) === null || _a === void 0 ? void 0 : _a.onesyDragAndDropListValue;
-        refs.rectDragged.current = {
-            height: dragging.clientHeight,
-            x: event.clientX - dragging.offsetLeft,
-            y: event.clientY - dragging.offsetTop,
-        };
-        setTimeout(() => {
-            if ((0, utils_1.is)('function', onDraggedElement))
-                onDraggedElement === null || onDraggedElement === void 0 ? void 0 : onDraggedElement(item);
-        });
+    const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current = refs.root.current) === null || _refs$root$current === void 0 ? void 0 : _refs$root$current.ownerDocument) || window.document : undefined;
+    rootDocument.body.addEventListener('mouseup', onMouseUp);
+    rootDocument.body.addEventListener('touchend', onMouseUp);
+    return () => {
+      rootDocument.body.removeEventListener('mouseup', onMouseUp);
+      rootDocument.body.removeEventListener('touchend', onMouseUp);
     };
-    const onDragEnd = () => (event) => {
-        // clean up
-        refs.isDragging.current = false;
-        refs.rectDragged.current = null;
-        refs.dragging.current = null;
-        if ((0, utils_1.is)('function', onDraggedElement))
-            onDraggedElement(null);
+  }, [onDraggedElement]);
+  const img = _react.default.useMemo(() => {
+    var _refs$root$current2;
+    const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current2 = refs.root.current) === null || _refs$root$current2 === void 0 ? void 0 : _refs$root$current2.ownerDocument) || window.document : undefined;
+    const element = rootDocument.createElement('img');
+    element.src = (0, _utils.is)('string', image) ? image : `data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEASABIAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wAARCAAWAC8DAREAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD+/igAoAKACgAoAKACgD8gtF+E3xs1/wD4UzrXiHxZ+1dZaj43/au+P/gj4r2Vt8RPjBo1np/7PsfiP42654IE+mxalFB4H8OzzeGvAlr4Z+IWjReH9dbQvE1noei+K10q+8N29l/LWD4Z4vx3+qeLx+Z+JdGvnHiXxvk/E1KGe8VYSlQ4Hjj+L8Zk/Ph44iMMnwM55fk1PL89wkcDjXgswpYPCZksNWwFOj7cq2Hj7eMYYNqng8NUot0qEm8Ty4eNSzt+8klOo50pc0eaDlKHMptyG2+Kml/8Id4f+NFz+1o3wN8JeLf2t/DOnan8MZPjbffFG81Xw18aYdI/Zw1Hx1rHw5gm+K3ijwpdfC9dUuvBvie/uNV8M+JdZh0bVvGt5f2cun3V3Tp8SYb+ysDxbU8TnwdlmaeJ+X0MRw7Li+txHVxOX8XRwvANfOcVkMJcS5jltThxYirlOY16mJy/MMXHCYrN61alKhUql6L55UFgvrE4YKbVX6uqKU6HNilTjVfsYTVaynBJThHmjTSd0ptK039seDSvhH8P/FN18ZH1L9pXwD8JdH8f+OdNu9WnufgFrHwx8RSXnxN1TVNb0O9m0r4ceJ/ir8GbnTdIju9Ney0+f4saPfXtl9o1TUbt5LwtDxVhhuF8jzKpxY8R4gZLwxhc7zihUxM6nBOK4ex0qvEOIxOMwdaeGyHMeJeFKmHwsauHlRoT4lwtatS58RXq8yk8C3WqQVC2FqVpU6bStiY1Y2pJRkr1YUa6crO79jJJ6JE/wmtf2kZv2kLEeLNa+Ltj4lX43/E678cx3+j/ABs1D4UXvwTsz44i8Eabpdxq+saZ+znYeGbvSJ/CR8Lal4I0i7+Ky+K4x/wkti8Uviq/t74Yp8fS4+o/2ni+KKOYLi/iKrnMa+F4vr8M1eEaTziOT4fDTxWKw/AdDL6mFnln9m4jJ8NV4lWZR/4UKLjLMq1MrPC/VXyRoOH1ekqdpYdVliH7P2jajF4pzUufnVSSo8nwP4E/1sr+nTxQoAKACgAoAKACgAD/2Q==`;
+    return element;
+  }, []);
+  const onDragStart = item => async event => {
+    var _dragging$dataset;
+    event.dataTransfer.setData('text', (item === null || item === void 0 ? void 0 : item.value) !== undefined ? item.value : item);
+    if (image) event.dataTransfer.setDragImage(img, 0, 0);
+    refs.isDragging.current = true;
+    const dragging = (0, _utils.is)('function', getDraggingElement) ? getDraggingElement(event) : event.target;
+    if (onDragStart_) onDragStart_(item, event);
+    refs.dragging.current = draggedIsElement ? dragging : dragging === null || dragging === void 0 || (_dragging$dataset = dragging.dataset) === null || _dragging$dataset === void 0 ? void 0 : _dragging$dataset.onesyDragAndDropListValue;
+    refs.rectDragged.current = {
+      height: dragging.clientHeight,
+      x: event.clientX - dragging.offsetLeft,
+      y: event.clientY - dragging.offsetTop
     };
-    const onDragOver = () => (event) => {
-        var _a;
-        event.preventDefault();
-        const rootDocument = (0, utils_1.isEnvironment)('browser') ? (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window.document) : undefined;
-        const over = event.currentTarget;
-        const dragging = draggedIsElement ? refs.dragging.current : rootDocument.body.querySelector(`[data-onesy-drag-and-drop-list-value="${refs.dragging.current}"]`);
-        if (!(over && dragging))
-            return;
-        if (precise) {
-            if (over !== dragging) {
-                const rectOver = {
-                    height: over.clientHeight,
-                    x: over.offsetLeft,
-                    y: over.offsetTop
-                };
-                const mousePosition = {
-                    x: event.clientX - rectOver.x,
-                    y: event.clientY - rectOver.y
-                };
-                const partBottom = Math.abs(refs.rectDragged.current.height - refs.rectDragged.current.y);
-                const partTop = refs.rectDragged.current.y;
-                const half = rectOver.height / 2;
-                const positionTopBottom = (partBottom + mousePosition.y) >= half ? 'bottom' : 'top';
-                const positionBottomTop = (mousePosition.y - partTop) <= half ? 'top' : 'bottom';
-                const overIndex = items.findIndex((item) => isEqual ? isEqual(item, over.dataset.onesyDragAndDropListValue) : item === over.dataset.onesyDragAndDropListValue);
-                const draggedIndex = items.findIndex((item) => isEqual ? isEqual(item, dragging.dataset.onesyDragAndDropListValue) : item === dragging.dataset.onesyDragAndDropListValue);
-                // if dragged is above over & bottom swap their indexes
-                // if dragged is below over && top swap their indexes
-                if ((draggedIndex < overIndex && positionTopBottom === 'bottom') ||
-                    (draggedIndex > overIndex && positionBottomTop === 'top')) {
-                    if (!refs.previous.current || !(0, utils_1.equalDeep)(refs.previous.current, [draggedIndex, overIndex])) {
-                        onChange(draggedIndex, overIndex);
-                        refs.previous.current = [draggedIndex, overIndex];
-                    }
-                }
-            }
-        }
-        else {
-            const overIndex = items.findIndex((item) => isEqual ? isEqual(item, over.dataset.onesyDragAndDropListValue) : item === over.dataset.onesyDragAndDropListValue);
-            const draggedIndex = items.findIndex((item) => isEqual ? isEqual(item, dragging.dataset.onesyDragAndDropListValue) : item === dragging.dataset.onesyDragAndDropListValue);
-            if (!refs.previous.current || !(0, utils_1.equalDeep)(refs.previous.current, [draggedIndex, overIndex])) {
-                if ((0, utils_1.is)('function', onChange))
-                    onChange(draggedIndex, overIndex);
-                refs.previous.current = [draggedIndex, overIndex];
-            }
+    setTimeout(() => {
+      if ((0, _utils.is)('function', onDraggedElement)) onDraggedElement === null || onDraggedElement === void 0 || onDraggedElement(item);
+    });
+  };
+  const onDragEnd = () => event => {
+    // clean up
+    refs.isDragging.current = false;
+    refs.rectDragged.current = null;
+    refs.dragging.current = null;
+    if ((0, _utils.is)('function', onDraggedElement)) onDraggedElement(null);
+  };
+  const onDragOver = () => event => {
+    var _refs$root$current3;
+    event.preventDefault();
+    const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current3 = refs.root.current) === null || _refs$root$current3 === void 0 ? void 0 : _refs$root$current3.ownerDocument) || window.document : undefined;
+    const over = event.currentTarget;
+    const dragging = draggedIsElement ? refs.dragging.current : rootDocument.body.querySelector(`[data-onesy-drag-and-drop-list-value="${refs.dragging.current}"]`);
+    if (!(over && dragging)) return;
+    if (precise) {
+      if (over !== dragging) {
+        const rectOver = {
+          height: over.clientHeight,
+          x: over.offsetLeft,
+          y: over.offsetTop
+        };
+        const mousePosition = {
+          x: event.clientX - rectOver.x,
+          y: event.clientY - rectOver.y
+        };
+        const partBottom = Math.abs(refs.rectDragged.current.height - refs.rectDragged.current.y);
+        const partTop = refs.rectDragged.current.y;
+        const half = rectOver.height / 2;
+        const positionTopBottom = partBottom + mousePosition.y >= half ? 'bottom' : 'top';
+        const positionBottomTop = mousePosition.y - partTop <= half ? 'top' : 'bottom';
+        const overIndex = items.findIndex(item => isEqual ? isEqual(item, over.dataset.onesyDragAndDropListValue) : item === over.dataset.onesyDragAndDropListValue);
+        const draggedIndex = items.findIndex(item => isEqual ? isEqual(item, dragging.dataset.onesyDragAndDropListValue) : item === dragging.dataset.onesyDragAndDropListValue);
+
+        // if dragged is above over & bottom swap their indexes
+        // if dragged is below over && top swap their indexes
+        if (draggedIndex < overIndex && positionTopBottom === 'bottom' || draggedIndex > overIndex && positionBottomTop === 'top') {
+          if (!refs.previous.current || !(0, _utils.equalDeep)(refs.previous.current, [draggedIndex, overIndex])) {
+            onChange(draggedIndex, overIndex);
+            refs.previous.current = [draggedIndex, overIndex];
+          }
         }
-    };
-    if ((0, utils_1.is)('function', children))
-        return children({
-            ref: item => {
-                if (ref) {
-                    if ((0, utils_1.is)('function', ref))
-                        ref(item);
-                    else
-                        ref.current = item;
-                }
-                refs.root.current = item;
-            },
-            onDragStart,
-            onDragOver,
-            onDragEnd
-        });
-    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+      }
+    } else {
+      const overIndex = items.findIndex(item => isEqual ? isEqual(item, over.dataset.onesyDragAndDropListValue) : item === over.dataset.onesyDragAndDropListValue);
+      const draggedIndex = items.findIndex(item => isEqual ? isEqual(item, dragging.dataset.onesyDragAndDropListValue) : item === dragging.dataset.onesyDragAndDropListValue);
+      if (!refs.previous.current || !(0, _utils.equalDeep)(refs.previous.current, [draggedIndex, overIndex])) {
+        if ((0, _utils.is)('function', onChange)) onChange(draggedIndex, overIndex);
+        refs.previous.current = [draggedIndex, overIndex];
+      }
+    }
+  };
+  if ((0, _utils.is)('function', children)) return children({
+    ref: item => {
+      if (ref) {
+        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+      }
+      refs.root.current = item;
+    },
+    onDragStart,
+    onDragOver,
+    onDragEnd
+  });
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
 });
 DragAndDropList.displayName = 'onesy-DragAndDropList';
-exports.default = DragAndDropList;
+var _default = exports.default = DragAndDropList;

package/DragAndDropList/index.js

@@ -1,8 +1,13 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-var DragAndDropList_1 = require("./DragAndDropList");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(DragAndDropList_1).default; } });
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _DragAndDropList.default;
+  }
+});
+var _DragAndDropList = _interopRequireDefault(require("./DragAndDropList"));