@chayns-components/swipeable-wrapper 5.0.0-beta.441 → 5.0.0-beta.443

package/lib/components/swipeable-wrapper/SwipeableWrapper.js

@@ -1,61 +1,53 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _chaynsApi = require("chayns-api");
-var _framerMotion = require("framer-motion");
-var _react = _interopRequireWildcard(require("react"));
-var _threshold = require("../../utils/threshold");
-var _SwipeableAction = _interopRequireWildcard(require("./swipeable-action/SwipeableAction"));
-var _SwipeableWrapper = require("./SwipeableWrapper.styles");
-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; }
+import { vibrate } from 'chayns-api';
+import { animate, useMotionValue } from 'framer-motion';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { calcThreshold } from '../../utils/threshold';
+import SwipeableAction, { SWIPEABLE_ACTION_WIDTH } from './swipeable-action/SwipeableAction';
+import { StyledMotionSwipeableWrapper, StyledSwipeableWrapperContent } from './SwipeableWrapper.styles';
 const SwipeableWrapper = _ref => {
   let {
     children,
     leftActions = [],
     rightActions = []
   } = _ref;
-  const [leftThreshold, setLeftThreshold] = (0, _react.useState)((0, _threshold.calcThreshold)({
+  const [leftThreshold, setLeftThreshold] = useState(calcThreshold({
     actionCount: leftActions.length,
     direction: 'left',
     width: window.innerWidth
   }));
-  const [rightThreshold, setRightThreshold] = (0, _react.useState)((0, _threshold.calcThreshold)({
+  const [rightThreshold, setRightThreshold] = useState(calcThreshold({
     actionCount: rightActions.length,
     direction: 'right',
     width: window.innerWidth
   }));
-  const swipeableWrapperRef = (0, _react.useRef)(null);
-  const listItemXOffset = (0, _framerMotion.useMotionValue)(0);
-  const close = (0, _react.useCallback)(() => {
-    void (0, _framerMotion.animate)(listItemXOffset, 0);
+  const swipeableWrapperRef = useRef(null);
+  const listItemXOffset = useMotionValue(0);
+  const close = useCallback(() => {
+    void animate(listItemXOffset, 0);
   }, [listItemXOffset]);
-  const open = (0, _react.useCallback)(direction => {
+  const open = useCallback(direction => {
     switch (direction) {
       case 'left':
-        void (0, _framerMotion.animate)(listItemXOffset, _SwipeableAction.SWIPEABLE_ACTION_WIDTH * leftActions.length);
+        void animate(listItemXOffset, SWIPEABLE_ACTION_WIDTH * leftActions.length);
         break;
       case 'right':
-        void (0, _framerMotion.animate)(listItemXOffset, -_SwipeableAction.SWIPEABLE_ACTION_WIDTH * rightActions.length);
+        void animate(listItemXOffset, -SWIPEABLE_ACTION_WIDTH * rightActions.length);
         break;
       default:
         break;
     }
   }, [leftActions.length, listItemXOffset, rightActions.length]);
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     const width = swipeableWrapperRef.current?.parentElement?.offsetWidth;
 
     // This check was deliberately chosen because a width of 0 is also not permitted.
     if (width) {
-      setLeftThreshold((0, _threshold.calcThreshold)({
+      setLeftThreshold(calcThreshold({
         actionCount: leftActions.length,
         direction: 'left',
         width
       }));
-      setRightThreshold((0, _threshold.calcThreshold)({
+      setRightThreshold(calcThreshold({
         actionCount: rightActions.length,
         direction: 'right',
         width
@@ -64,7 +56,7 @@ const SwipeableWrapper = _ref => {
   }, [leftActions.length, rightActions.length]);
 
   // Close an opened menu when anything outside it is tapped
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     function closeCallback(event) {
       const eventTarget = event.target;
 
@@ -82,25 +74,25 @@ const SwipeableWrapper = _ref => {
   }, [close]);
 
   // Vibrate when the threshold is passed
-  (0, _react.useEffect)(() => listItemXOffset.onChange(newValue => {
+  useEffect(() => listItemXOffset.onChange(newValue => {
     const previous = listItemXOffset.getPrevious();
     const hasCrossedLeftThreshold = previous < leftThreshold && newValue >= leftThreshold || previous > leftThreshold && newValue <= leftThreshold;
     const hasCrossedRightThreshold = previous < rightThreshold && newValue >= rightThreshold || previous > rightThreshold && newValue <= rightThreshold;
     if (hasCrossedLeftThreshold || hasCrossedRightThreshold) {
-      void (0, _chaynsApi.vibrate)({
+      void vibrate({
         iOSFeedbackVibration: 6,
         pattern: [150]
       });
     }
   }), [leftThreshold, listItemXOffset, rightThreshold]);
-  const handlePan = (0, _react.useCallback)((_, info) => {
+  const handlePan = useCallback((_, info) => {
     const currentXOffset = listItemXOffset.get();
     const dampingFactor = info.offset.x > 0 && leftActions.length > 0 || info.offset.x < 0 && rightActions.length > 0 || currentXOffset > 0 && info.delta.x < 0 || currentXOffset < 0 && info.delta.x > 0 ? 1 : 0.75 / (Math.abs(info.offset.x) / 9);
     if (Math.abs(info.offset.x) > 30 || currentXOffset > 0) {
       listItemXOffset.set(currentXOffset + info.delta.x * dampingFactor);
     }
   }, [leftActions.length, listItemXOffset, rightActions.length]);
-  const handlePanEnd = (0, _react.useCallback)(() => {
+  const handlePanEnd = useCallback(() => {
     const offset = listItemXOffset.get();
     if (offset > leftThreshold) {
       leftActions[0]?.action();
@@ -121,23 +113,23 @@ const SwipeableWrapper = _ref => {
       // eslint-disable-next-line default-case
       switch (state) {
         case 'left-open':
-          if (offset < _SwipeableAction.SWIPEABLE_ACTION_WIDTH) {
+          if (offset < SWIPEABLE_ACTION_WIDTH) {
             close();
           } else {
             open('left');
           }
           break;
         case 'right-open':
-          if (offset > -_SwipeableAction.SWIPEABLE_ACTION_WIDTH) {
+          if (offset > -SWIPEABLE_ACTION_WIDTH) {
             close();
           } else {
             open('right');
           }
           break;
         case 'closed':
-          if (offset > _SwipeableAction.SWIPEABLE_ACTION_WIDTH) {
+          if (offset > SWIPEABLE_ACTION_WIDTH) {
             open('left');
-          } else if (offset < -_SwipeableAction.SWIPEABLE_ACTION_WIDTH) {
+          } else if (offset < -SWIPEABLE_ACTION_WIDTH) {
             open('right');
           } else {
             close();
@@ -145,7 +137,7 @@ const SwipeableWrapper = _ref => {
       }
     }
   }, [close, leftActions, leftThreshold, listItemXOffset, open, rightActions, rightThreshold]);
-  const leftActionElements = (0, _react.useMemo)(() => Array.from(leftActions).reverse().map((item, index) => /*#__PURE__*/_react.default.createElement(_SwipeableAction.default, {
+  const leftActionElements = useMemo(() => Array.from(leftActions).reverse().map((item, index) => /*#__PURE__*/React.createElement(SwipeableAction, {
     activationThreshold: leftThreshold,
     close: close,
     index: index,
@@ -155,7 +147,7 @@ const SwipeableWrapper = _ref => {
     position: "left",
     totalActionCount: leftActions.length
   })), [close, leftActions, leftThreshold, listItemXOffset]);
-  const rightActionElements = (0, _react.useMemo)(() => rightActions.map((item, index) => /*#__PURE__*/_react.default.createElement(_SwipeableAction.default, {
+  const rightActionElements = useMemo(() => rightActions.map((item, index) => /*#__PURE__*/React.createElement(SwipeableAction, {
     activationThreshold: rightThreshold,
     close: close,
     index: index,
@@ -165,15 +157,15 @@ const SwipeableWrapper = _ref => {
     position: "right",
     totalActionCount: rightActions.length
   })), [close, rightActions, rightThreshold, listItemXOffset]);
-  return /*#__PURE__*/_react.default.createElement(_SwipeableWrapper.StyledMotionSwipeableWrapper, {
+  return /*#__PURE__*/React.createElement(StyledMotionSwipeableWrapper, {
     onPan: handlePan,
     onPanEnd: handlePanEnd,
     ref: swipeableWrapperRef,
     style: {
       x: listItemXOffset
     }
-  }, leftActionElements, /*#__PURE__*/_react.default.createElement(_SwipeableWrapper.StyledSwipeableWrapperContent, null, children), rightActionElements);
+  }, leftActionElements, /*#__PURE__*/React.createElement(StyledSwipeableWrapperContent, null, children), rightActionElements);
 };
 SwipeableWrapper.displayName = 'SwipeableWrapper';
-var _default = exports.default = SwipeableWrapper;
+export default SwipeableWrapper;
 //# sourceMappingURL=SwipeableWrapper.js.map

package/lib/components/swipeable-wrapper/SwipeableWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"SwipeableWrapper.js","names":["_chaynsApi","require","_framerMotion","_react","_interopRequireWildcard","_threshold","_SwipeableAction","_SwipeableWrapper","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","SwipeableWrapper","_ref","children","leftActions","rightActions","leftThreshold","setLeftThreshold","useState","calcThreshold","actionCount","length","direction","width","window","innerWidth","rightThreshold","setRightThreshold","swipeableWrapperRef","useRef","listItemXOffset","useMotionValue","close","useCallback","animate","open","SWIPEABLE_ACTION_WIDTH","useEffect","current","parentElement","offsetWidth","closeCallback","event","eventTarget","target","contains","document","addEventListener","removeEventListener","onChange","newValue","previous","getPrevious","hasCrossedLeftThreshold","hasCrossedRightThreshold","vibrate","iOSFeedbackVibration","pattern","handlePan","_","info","currentXOffset","dampingFactor","offset","x","delta","Math","abs","handlePanEnd","action","state","leftActionElements","useMemo","Array","from","reverse","map","item","index","createElement","activationThreshold","key","position","totalActionCount","rightActionElements","StyledMotionSwipeableWrapper","onPan","onPanEnd","ref","style","StyledSwipeableWrapperContent","displayName","_default","exports"],"sources":["../../../src/components/swipeable-wrapper/SwipeableWrapper.tsx"],"sourcesContent":["import { vibrate } from 'chayns-api';\nimport { animate, PanInfo, useMotionValue } from 'framer-motion';\nimport React, {\n    CSSProperties,\n    FC,\n    ReactNode,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { calcThreshold } from '../../utils/threshold';\nimport SwipeableAction, { SWIPEABLE_ACTION_WIDTH } from './swipeable-action/SwipeableAction';\nimport {\n    StyledMotionSwipeableWrapper,\n    StyledSwipeableWrapperContent,\n} from './SwipeableWrapper.styles';\n\nexport type SwipeableActionItem = {\n    action: VoidFunction;\n    backgroundColor: CSSProperties['backgroundColor'];\n    color: CSSProperties['color'];\n    text?: ReactNode;\n    icon: ReactNode;\n    key: string;\n};\n\nexport type SwipeableWrapperProps = {\n    /**\n     * The content of the Swipeable item.\n     */\n    children: ReactNode;\n    /**\n     * The left-side actions, ordered from the left to the right.\n     */\n    leftActions?: SwipeableActionItem[];\n    /**\n     * The right-side actions, ordered from left to the right.\n     */\n    rightActions?: SwipeableActionItem[];\n};\n\nconst SwipeableWrapper: FC<SwipeableWrapperProps> = ({\n    children,\n    leftActions = [],\n    rightActions = [],\n}) => {\n    const [leftThreshold, setLeftThreshold] = useState(\n        calcThreshold({\n            actionCount: leftActions.length,\n            direction: 'left',\n            width: window.innerWidth,\n        }),\n    );\n\n    const [rightThreshold, setRightThreshold] = useState(\n        calcThreshold({\n            actionCount: rightActions.length,\n            direction: 'right',\n            width: window.innerWidth,\n        }),\n    );\n\n    const swipeableWrapperRef = useRef<HTMLDivElement | null>(null);\n\n    const listItemXOffset = useMotionValue(0);\n\n    const close = useCallback(() => {\n        void animate(listItemXOffset, 0);\n    }, [listItemXOffset]);\n\n    const open = useCallback(\n        (direction: 'left' | 'right') => {\n            switch (direction) {\n                case 'left':\n                    void animate(listItemXOffset, SWIPEABLE_ACTION_WIDTH * leftActions.length);\n                    break;\n                case 'right':\n                    void animate(listItemXOffset, -SWIPEABLE_ACTION_WIDTH * rightActions.length);\n                    break;\n                default:\n                    break;\n            }\n        },\n        [leftActions.length, listItemXOffset, rightActions.length],\n    );\n\n    useEffect(() => {\n        const width = swipeableWrapperRef.current?.parentElement?.offsetWidth;\n\n        // This check was deliberately chosen because a width of 0 is also not permitted.\n        if (width) {\n            setLeftThreshold(\n                calcThreshold({\n                    actionCount: leftActions.length,\n                    direction: 'left',\n                    width,\n                }),\n            );\n\n            setRightThreshold(\n                calcThreshold({\n                    actionCount: rightActions.length,\n                    direction: 'right',\n                    width,\n                }),\n            );\n        }\n    }, [leftActions.length, rightActions.length]);\n\n    // Close an opened menu when anything outside it is tapped\n    useEffect(() => {\n        function closeCallback(event: MouseEvent | TouchEvent) {\n            const eventTarget = event.target;\n\n            // @ts-expect-error: Pretty sure that the event target is always a Node.\n            if (eventTarget && !swipeableWrapperRef.current?.contains(eventTarget)) {\n                close();\n            }\n        }\n\n        document.addEventListener('mousedown', closeCallback);\n        document.addEventListener('touchstart', closeCallback);\n\n        return () => {\n            document.removeEventListener('mousedown', closeCallback);\n            document.removeEventListener('touchstart', closeCallback);\n        };\n    }, [close]);\n\n    // Vibrate when the threshold is passed\n    useEffect(\n        () =>\n            listItemXOffset.onChange((newValue: number) => {\n                const previous = listItemXOffset.getPrevious();\n\n                const hasCrossedLeftThreshold =\n                    (previous < leftThreshold && newValue >= leftThreshold) ||\n                    (previous > leftThreshold && newValue <= leftThreshold);\n\n                const hasCrossedRightThreshold =\n                    (previous < rightThreshold && newValue >= rightThreshold) ||\n                    (previous > rightThreshold && newValue <= rightThreshold);\n\n                if (hasCrossedLeftThreshold || hasCrossedRightThreshold) {\n                    void vibrate({ iOSFeedbackVibration: 6, pattern: [150] });\n                }\n            }),\n        [leftThreshold, listItemXOffset, rightThreshold],\n    );\n\n    const handlePan = useCallback(\n        (_: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => {\n            const currentXOffset = listItemXOffset.get();\n\n            const dampingFactor =\n                (info.offset.x > 0 && leftActions.length > 0) ||\n                (info.offset.x < 0 && rightActions.length > 0) ||\n                (currentXOffset > 0 && info.delta.x < 0) ||\n                (currentXOffset < 0 && info.delta.x > 0)\n                    ? 1\n                    : 0.75 / (Math.abs(info.offset.x) / 9);\n\n            if (Math.abs(info.offset.x) > 30 || currentXOffset > 0) {\n                listItemXOffset.set(currentXOffset + info.delta.x * dampingFactor);\n            }\n        },\n        [leftActions.length, listItemXOffset, rightActions.length],\n    );\n\n    const handlePanEnd = useCallback(() => {\n        const offset = listItemXOffset.get();\n\n        if (offset > leftThreshold) {\n            leftActions[0]?.action();\n            close();\n        } else if (offset < rightThreshold) {\n            rightActions[rightActions.length - 1]?.action();\n            close();\n        } else {\n            let state: 'left-open' | 'right-open' | 'closed';\n\n            if (offset > 2) {\n                state = 'left-open';\n            } else if (offset < -2) {\n                state = 'right-open';\n            } else {\n                state = 'closed';\n            }\n\n            // eslint-disable-next-line default-case\n            switch (state) {\n                case 'left-open':\n                    if (offset < SWIPEABLE_ACTION_WIDTH) {\n                        close();\n                    } else {\n                        open('left');\n                    }\n                    break;\n                case 'right-open':\n                    if (offset > -SWIPEABLE_ACTION_WIDTH) {\n                        close();\n                    } else {\n                        open('right');\n                    }\n                    break;\n                case 'closed':\n                    if (offset > SWIPEABLE_ACTION_WIDTH) {\n                        open('left');\n                    } else if (offset < -SWIPEABLE_ACTION_WIDTH) {\n                        open('right');\n                    } else {\n                        close();\n                    }\n            }\n        }\n    }, [close, leftActions, leftThreshold, listItemXOffset, open, rightActions, rightThreshold]);\n\n    const leftActionElements = useMemo(\n        () =>\n            Array.from(leftActions)\n                .reverse()\n                .map((item, index) => (\n                    <SwipeableAction\n                        activationThreshold={leftThreshold}\n                        close={close}\n                        index={index}\n                        item={item}\n                        key={item.key}\n                        listItemXOffset={listItemXOffset}\n                        position=\"left\"\n                        totalActionCount={leftActions.length}\n                    />\n                )),\n        [close, leftActions, leftThreshold, listItemXOffset],\n    );\n\n    const rightActionElements = useMemo(\n        () =>\n            rightActions.map((item, index) => (\n                <SwipeableAction\n                    activationThreshold={rightThreshold}\n                    close={close}\n                    index={index}\n                    item={item}\n                    key={item.key}\n                    listItemXOffset={listItemXOffset}\n                    position=\"right\"\n                    totalActionCount={rightActions.length}\n                />\n            )),\n        [close, rightActions, rightThreshold, listItemXOffset],\n    );\n\n    return (\n        <StyledMotionSwipeableWrapper\n            onPan={handlePan}\n            onPanEnd={handlePanEnd}\n            ref={swipeableWrapperRef}\n            style={{ x: listItemXOffset }}\n        >\n            {leftActionElements}\n            <StyledSwipeableWrapperContent>{children}</StyledSwipeableWrapperContent>\n            {rightActionElements}\n        </StyledMotionSwipeableWrapper>\n    );\n};\n\nSwipeableWrapper.displayName = 'SwipeableWrapper';\n\nexport default SwipeableWrapper;\n"],"mappings":"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"}
+{"version":3,"file":"SwipeableWrapper.js","names":["vibrate","animate","useMotionValue","React","useCallback","useEffect","useMemo","useRef","useState","calcThreshold","SwipeableAction","SWIPEABLE_ACTION_WIDTH","StyledMotionSwipeableWrapper","StyledSwipeableWrapperContent","SwipeableWrapper","_ref","children","leftActions","rightActions","leftThreshold","setLeftThreshold","actionCount","length","direction","width","window","innerWidth","rightThreshold","setRightThreshold","swipeableWrapperRef","listItemXOffset","close","open","current","parentElement","offsetWidth","closeCallback","event","eventTarget","target","contains","document","addEventListener","removeEventListener","onChange","newValue","previous","getPrevious","hasCrossedLeftThreshold","hasCrossedRightThreshold","iOSFeedbackVibration","pattern","handlePan","_","info","currentXOffset","get","dampingFactor","offset","x","delta","Math","abs","set","handlePanEnd","action","state","leftActionElements","Array","from","reverse","map","item","index","createElement","activationThreshold","key","position","totalActionCount","rightActionElements","onPan","onPanEnd","ref","style","displayName"],"sources":["../../../src/components/swipeable-wrapper/SwipeableWrapper.tsx"],"sourcesContent":["import { vibrate } from 'chayns-api';\nimport { animate, PanInfo, useMotionValue } from 'framer-motion';\nimport React, {\n    CSSProperties,\n    FC,\n    ReactNode,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { calcThreshold } from '../../utils/threshold';\nimport SwipeableAction, { SWIPEABLE_ACTION_WIDTH } from './swipeable-action/SwipeableAction';\nimport {\n    StyledMotionSwipeableWrapper,\n    StyledSwipeableWrapperContent,\n} from './SwipeableWrapper.styles';\n\nexport type SwipeableActionItem = {\n    action: VoidFunction;\n    backgroundColor: CSSProperties['backgroundColor'];\n    color: CSSProperties['color'];\n    text?: ReactNode;\n    icon: ReactNode;\n    key: string;\n};\n\nexport type SwipeableWrapperProps = {\n    /**\n     * The content of the Swipeable item.\n     */\n    children: ReactNode;\n    /**\n     * The left-side actions, ordered from the left to the right.\n     */\n    leftActions?: SwipeableActionItem[];\n    /**\n     * The right-side actions, ordered from left to the right.\n     */\n    rightActions?: SwipeableActionItem[];\n};\n\nconst SwipeableWrapper: FC<SwipeableWrapperProps> = ({\n    children,\n    leftActions = [],\n    rightActions = [],\n}) => {\n    const [leftThreshold, setLeftThreshold] = useState(\n        calcThreshold({\n            actionCount: leftActions.length,\n            direction: 'left',\n            width: window.innerWidth,\n        }),\n    );\n\n    const [rightThreshold, setRightThreshold] = useState(\n        calcThreshold({\n            actionCount: rightActions.length,\n            direction: 'right',\n            width: window.innerWidth,\n        }),\n    );\n\n    const swipeableWrapperRef = useRef<HTMLDivElement | null>(null);\n\n    const listItemXOffset = useMotionValue(0);\n\n    const close = useCallback(() => {\n        void animate(listItemXOffset, 0);\n    }, [listItemXOffset]);\n\n    const open = useCallback(\n        (direction: 'left' | 'right') => {\n            switch (direction) {\n                case 'left':\n                    void animate(listItemXOffset, SWIPEABLE_ACTION_WIDTH * leftActions.length);\n                    break;\n                case 'right':\n                    void animate(listItemXOffset, -SWIPEABLE_ACTION_WIDTH * rightActions.length);\n                    break;\n                default:\n                    break;\n            }\n        },\n        [leftActions.length, listItemXOffset, rightActions.length],\n    );\n\n    useEffect(() => {\n        const width = swipeableWrapperRef.current?.parentElement?.offsetWidth;\n\n        // This check was deliberately chosen because a width of 0 is also not permitted.\n        if (width) {\n            setLeftThreshold(\n                calcThreshold({\n                    actionCount: leftActions.length,\n                    direction: 'left',\n                    width,\n                }),\n            );\n\n            setRightThreshold(\n                calcThreshold({\n                    actionCount: rightActions.length,\n                    direction: 'right',\n                    width,\n                }),\n            );\n        }\n    }, [leftActions.length, rightActions.length]);\n\n    // Close an opened menu when anything outside it is tapped\n    useEffect(() => {\n        function closeCallback(event: MouseEvent | TouchEvent) {\n            const eventTarget = event.target;\n\n            // @ts-expect-error: Pretty sure that the event target is always a Node.\n            if (eventTarget && !swipeableWrapperRef.current?.contains(eventTarget)) {\n                close();\n            }\n        }\n\n        document.addEventListener('mousedown', closeCallback);\n        document.addEventListener('touchstart', closeCallback);\n\n        return () => {\n            document.removeEventListener('mousedown', closeCallback);\n            document.removeEventListener('touchstart', closeCallback);\n        };\n    }, [close]);\n\n    // Vibrate when the threshold is passed\n    useEffect(\n        () =>\n            listItemXOffset.onChange((newValue: number) => {\n                const previous = listItemXOffset.getPrevious();\n\n                const hasCrossedLeftThreshold =\n                    (previous < leftThreshold && newValue >= leftThreshold) ||\n                    (previous > leftThreshold && newValue <= leftThreshold);\n\n                const hasCrossedRightThreshold =\n                    (previous < rightThreshold && newValue >= rightThreshold) ||\n                    (previous > rightThreshold && newValue <= rightThreshold);\n\n                if (hasCrossedLeftThreshold || hasCrossedRightThreshold) {\n                    void vibrate({ iOSFeedbackVibration: 6, pattern: [150] });\n                }\n            }),\n        [leftThreshold, listItemXOffset, rightThreshold],\n    );\n\n    const handlePan = useCallback(\n        (_: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => {\n            const currentXOffset = listItemXOffset.get();\n\n            const dampingFactor =\n                (info.offset.x > 0 && leftActions.length > 0) ||\n                (info.offset.x < 0 && rightActions.length > 0) ||\n                (currentXOffset > 0 && info.delta.x < 0) ||\n                (currentXOffset < 0 && info.delta.x > 0)\n                    ? 1\n                    : 0.75 / (Math.abs(info.offset.x) / 9);\n\n            if (Math.abs(info.offset.x) > 30 || currentXOffset > 0) {\n                listItemXOffset.set(currentXOffset + info.delta.x * dampingFactor);\n            }\n        },\n        [leftActions.length, listItemXOffset, rightActions.length],\n    );\n\n    const handlePanEnd = useCallback(() => {\n        const offset = listItemXOffset.get();\n\n        if (offset > leftThreshold) {\n            leftActions[0]?.action();\n            close();\n        } else if (offset < rightThreshold) {\n            rightActions[rightActions.length - 1]?.action();\n            close();\n        } else {\n            let state: 'left-open' | 'right-open' | 'closed';\n\n            if (offset > 2) {\n                state = 'left-open';\n            } else if (offset < -2) {\n                state = 'right-open';\n            } else {\n                state = 'closed';\n            }\n\n            // eslint-disable-next-line default-case\n            switch (state) {\n                case 'left-open':\n                    if (offset < SWIPEABLE_ACTION_WIDTH) {\n                        close();\n                    } else {\n                        open('left');\n                    }\n                    break;\n                case 'right-open':\n                    if (offset > -SWIPEABLE_ACTION_WIDTH) {\n                        close();\n                    } else {\n                        open('right');\n                    }\n                    break;\n                case 'closed':\n                    if (offset > SWIPEABLE_ACTION_WIDTH) {\n                        open('left');\n                    } else if (offset < -SWIPEABLE_ACTION_WIDTH) {\n                        open('right');\n                    } else {\n                        close();\n                    }\n            }\n        }\n    }, [close, leftActions, leftThreshold, listItemXOffset, open, rightActions, rightThreshold]);\n\n    const leftActionElements = useMemo(\n        () =>\n            Array.from(leftActions)\n                .reverse()\n                .map((item, index) => (\n                    <SwipeableAction\n                        activationThreshold={leftThreshold}\n                        close={close}\n                        index={index}\n                        item={item}\n                        key={item.key}\n                        listItemXOffset={listItemXOffset}\n                        position=\"left\"\n                        totalActionCount={leftActions.length}\n                    />\n                )),\n        [close, leftActions, leftThreshold, listItemXOffset],\n    );\n\n    const rightActionElements = useMemo(\n        () =>\n            rightActions.map((item, index) => (\n                <SwipeableAction\n                    activationThreshold={rightThreshold}\n                    close={close}\n                    index={index}\n                    item={item}\n                    key={item.key}\n                    listItemXOffset={listItemXOffset}\n                    position=\"right\"\n                    totalActionCount={rightActions.length}\n                />\n            )),\n        [close, rightActions, rightThreshold, listItemXOffset],\n    );\n\n    return (\n        <StyledMotionSwipeableWrapper\n            onPan={handlePan}\n            onPanEnd={handlePanEnd}\n            ref={swipeableWrapperRef}\n            style={{ x: listItemXOffset }}\n        >\n            {leftActionElements}\n            <StyledSwipeableWrapperContent>{children}</StyledSwipeableWrapperContent>\n            {rightActionElements}\n        </StyledMotionSwipeableWrapper>\n    );\n};\n\nSwipeableWrapper.displayName = 'SwipeableWrapper';\n\nexport default SwipeableWrapper;\n"],"mappings":"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"}

package/lib/components/swipeable-wrapper/SwipeableWrapper.styles.js

@@ -1,18 +1,11 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StyledSwipeableWrapperContent = exports.StyledMotionSwipeableWrapper = void 0;
-var _framerMotion = require("framer-motion");
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const StyledMotionSwipeableWrapper = exports.StyledMotionSwipeableWrapper = (0, _styledComponents.default)(_framerMotion.motion.div)`
+import { motion } from 'framer-motion';
+import styled from 'styled-components';
+export const StyledMotionSwipeableWrapper = styled(motion.div)`
     position: relative;
     touch-action: pan-y;
     user-select: none;
 `;
-const StyledSwipeableWrapperContent = exports.StyledSwipeableWrapperContent = _styledComponents.default.div`
+export const StyledSwipeableWrapperContent = styled.div`
     overflow: hidden;
     width: 100%;
 `;

package/lib/components/swipeable-wrapper/SwipeableWrapper.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"SwipeableWrapper.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","obj","__esModule","default","StyledMotionSwipeableWrapper","exports","styled","motion","div","StyledSwipeableWrapperContent"],"sources":["../../../src/components/swipeable-wrapper/SwipeableWrapper.styles.ts"],"sourcesContent":["import type { FramerMotionBugFix } from '@chayns-components/core';\nimport { motion } from 'framer-motion';\nimport styled from 'styled-components';\n\nexport const StyledMotionSwipeableWrapper = styled(motion.div)<FramerMotionBugFix>`\n    position: relative;\n    touch-action: pan-y;\n    user-select: none;\n`;\n\nexport const StyledSwipeableWrapperContent = styled.div`\n    overflow: hidden;\n    width: 100%;\n`;\n"],"mappings":";;;;;;AACA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEhC,MAAMG,4BAA4B,GAAAC,OAAA,CAAAD,4BAAA,GAAG,IAAAE,yBAAM,EAACC,oBAAM,CAACC,GAAG,CAAsB;AACnF;AACA;AACA;AACA,CAAC;AAEM,MAAMC,6BAA6B,GAAAJ,OAAA,CAAAI,6BAAA,GAAGH,yBAAM,CAACE,GAAI;AACxD;AACA;AACA,CAAC"}
+{"version":3,"file":"SwipeableWrapper.styles.js","names":["motion","styled","StyledMotionSwipeableWrapper","div","StyledSwipeableWrapperContent"],"sources":["../../../src/components/swipeable-wrapper/SwipeableWrapper.styles.ts"],"sourcesContent":["import type { FramerMotionBugFix } from '@chayns-components/core';\nimport { motion } from 'framer-motion';\nimport styled from 'styled-components';\n\nexport const StyledMotionSwipeableWrapper = styled(motion.div)<FramerMotionBugFix>`\n    position: relative;\n    touch-action: pan-y;\n    user-select: none;\n`;\n\nexport const StyledSwipeableWrapperContent = styled.div`\n    overflow: hidden;\n    width: 100%;\n`;\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,4BAA4B,GAAGD,MAAM,CAACD,MAAM,CAACG,GAAG,CAAsB;AACnF;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,6BAA6B,GAAGH,MAAM,CAACE,GAAI;AACxD;AACA;AACA,CAAC"}

package/lib/components/swipeable-wrapper/swipeable-action/SwipeableAction.js

@@ -1,15 +1,7 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.SWIPEABLE_ACTION_WIDTH = void 0;
-var _framerMotion = require("framer-motion");
-var _react = _interopRequireWildcard(require("react"));
-var _SwipeableAction = require("./SwipeableAction.styles");
-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; }
-const SWIPEABLE_ACTION_WIDTH = exports.SWIPEABLE_ACTION_WIDTH = 72;
+import { useSpring, useTransform } from 'framer-motion';
+import React, { useEffect } from 'react';
+import { StyledMotionSwipeableAction, StyledSwipeableActionButton } from './SwipeableAction.styles';
+export const SWIPEABLE_ACTION_WIDTH = 72;
 const SwipeableAction = _ref => {
   let {
     activationThreshold,
@@ -29,7 +21,7 @@ const SwipeableAction = _ref => {
    * By default, the action sticks to the content of the swipeable item. This
    * makes it move outwards to reveal the inner items.
    */
-  const actionOffset = (0, _framerMotion.useTransform)(listItemXOffset, newValue => {
+  const actionOffset = useTransform(listItemXOffset, newValue => {
     const maxOffset = SWIPEABLE_ACTION_WIDTH * index;
     const fractionalOffset = -newValue / totalActionCount * index;
     switch (position) {
@@ -46,7 +38,7 @@ const SwipeableAction = _ref => {
    * Brings the item in again if past the threshold. Only relevant for
    * outermost items.
    */
-  const actionOverlayOffset = (0, _framerMotion.useSpring)(0, {
+  const actionOverlayOffset = useSpring(0, {
     bounce: 0
   });
 
@@ -54,7 +46,7 @@ const SwipeableAction = _ref => {
    * Combines the two values above to create the correct X transform that has
    * to be applied to the action.
    */
-  const actionX = (0, _framerMotion.useTransform)([actionOffset, actionOverlayOffset], _ref2 => {
+  const actionX = useTransform([actionOffset, actionOverlayOffset], _ref2 => {
     let [x, y] = _ref2;
     if (position === 'left') {
       return Math.min((x ?? 0) + (y ?? 0), 0);
@@ -63,7 +55,7 @@ const SwipeableAction = _ref => {
   });
 
   // Animate to the middle after passing threshold if outermost item
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     const isOuterMost = index === totalActionCount - 1;
     if (!isOuterMost) return undefined;
     return listItemXOffset.onChange(newValue => {
@@ -87,18 +79,18 @@ const SwipeableAction = _ref => {
       }
     });
   }, [actionOverlayOffset, activationThreshold, index, listItemXOffset, position, totalActionCount]);
-  return /*#__PURE__*/_react.default.createElement(_SwipeableAction.StyledMotionSwipeableAction, {
+  return /*#__PURE__*/React.createElement(StyledMotionSwipeableAction, {
     backgroundColor: item.backgroundColor,
     position: position,
     style: {
       x: actionX
     }
-  }, /*#__PURE__*/_react.default.createElement(_SwipeableAction.StyledSwipeableActionButton, {
+  }, /*#__PURE__*/React.createElement(StyledSwipeableActionButton, {
     color: item.color,
     onClick: handleButtonClick,
     width: `${SWIPEABLE_ACTION_WIDTH}px`
   }, item.icon, item.text));
 };
 SwipeableAction.displayName = 'SwipeableAction';
-var _default = exports.default = SwipeableAction;
+export default SwipeableAction;
 //# sourceMappingURL=SwipeableAction.js.map

package/lib/components/swipeable-wrapper/swipeable-action/SwipeableAction.js.map

@@ -1 +1 @@
-{"version":3,"file":"SwipeableAction.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_SwipeableAction","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","SWIPEABLE_ACTION_WIDTH","exports","SwipeableAction","_ref","activationThreshold","close","index","item","listItemXOffset","position","totalActionCount","handleButtonClick","action","actionOffset","useTransform","newValue","maxOffset","fractionalOffset","Math","max","min","actionOverlayOffset","useSpring","bounce","actionX","_ref2","x","y","useEffect","isOuterMost","undefined","onChange","lastValue","getPrevious","createElement","StyledMotionSwipeableAction","backgroundColor","style","StyledSwipeableActionButton","color","onClick","width","icon","text","displayName","_default"],"sources":["../../../../src/components/swipeable-wrapper/swipeable-action/SwipeableAction.tsx"],"sourcesContent":["import { MotionValue, useSpring, useTransform } from 'framer-motion';\nimport React, { FC, useEffect } from 'react';\nimport type { SwipeableActionItem } from '../SwipeableWrapper';\nimport { StyledMotionSwipeableAction, StyledSwipeableActionButton } from './SwipeableAction.styles';\n\nexport const SWIPEABLE_ACTION_WIDTH = 72;\n\nexport type SwipeableActionProps = {\n    activationThreshold: number;\n    close: VoidFunction;\n    index: number;\n    item: SwipeableActionItem;\n    listItemXOffset: MotionValue<number>;\n    position: 'left' | 'right';\n    totalActionCount: number;\n};\n\nconst SwipeableAction: FC<SwipeableActionProps> = ({\n    activationThreshold,\n    close,\n    index,\n    item,\n    listItemXOffset,\n    position,\n    totalActionCount,\n}) => {\n    const handleButtonClick = () => {\n        item.action();\n        close();\n    };\n\n    /**\n     * By default, the action sticks to the content of the swipeable item. This\n     * makes it move outwards to reveal the inner items.\n     */\n    const actionOffset = useTransform(listItemXOffset, (newValue) => {\n        const maxOffset = SWIPEABLE_ACTION_WIDTH * index;\n        const fractionalOffset = (-newValue / totalActionCount) * index;\n\n        switch (position) {\n            case 'left':\n                return Math.max(-maxOffset, fractionalOffset);\n            case 'right':\n                return Math.min(maxOffset, fractionalOffset);\n            default:\n                return 0;\n        }\n    });\n\n    /**\n     * Brings the item in again if past the threshold. Only relevant for\n     * outermost items.\n     */\n    const actionOverlayOffset = useSpring(0, {\n        bounce: 0,\n    }) as MotionValue<number>;\n\n    /**\n     * Combines the two values above to create the correct X transform that has\n     * to be applied to the action.\n     */\n    const actionX = useTransform<number, number>([actionOffset, actionOverlayOffset], ([x, y]) => {\n        if (position === 'left') {\n            return Math.min((x ?? 0) + (y ?? 0), 0);\n        }\n\n        return Math.max((x ?? 0) + (y ?? 0), 0);\n    });\n\n    // Animate to the middle after passing threshold if outermost item\n    useEffect(() => {\n        const isOuterMost = index === totalActionCount - 1;\n\n        if (!isOuterMost) return undefined;\n\n        return listItemXOffset.onChange((newValue) => {\n            const lastValue = listItemXOffset.getPrevious();\n\n            // eslint-disable-next-line default-case\n            switch (position) {\n                case 'left':\n                    if (newValue > activationThreshold && lastValue <= activationThreshold) {\n                        actionOverlayOffset.set(SWIPEABLE_ACTION_WIDTH * index);\n                    } else if (newValue < activationThreshold && lastValue >= activationThreshold) {\n                        actionOverlayOffset.set(0);\n                    }\n                    break;\n                case 'right':\n                    if (newValue < activationThreshold && lastValue >= activationThreshold) {\n                        actionOverlayOffset.set(SWIPEABLE_ACTION_WIDTH * -1 * index);\n                    } else if (newValue > activationThreshold && lastValue <= activationThreshold) {\n                        actionOverlayOffset.set(0);\n                    }\n            }\n        });\n    }, [\n        actionOverlayOffset,\n        activationThreshold,\n        index,\n        listItemXOffset,\n        position,\n        totalActionCount,\n    ]);\n\n    return (\n        <StyledMotionSwipeableAction\n            backgroundColor={item.backgroundColor}\n            position={position}\n            style={{ x: actionX }}\n        >\n            <StyledSwipeableActionButton\n                color={item.color}\n                onClick={handleButtonClick}\n                width={`${SWIPEABLE_ACTION_WIDTH}px`}\n            >\n                {item.icon}\n                {item.text}\n            </StyledSwipeableActionButton>\n        </StyledMotionSwipeableAction>\n    );\n};\n\nSwipeableAction.displayName = 'SwipeableAction';\n\nexport default SwipeableAction;\n"],"mappings":"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"}
+{"version":3,"file":"SwipeableAction.js","names":["useSpring","useTransform","React","useEffect","StyledMotionSwipeableAction","StyledSwipeableActionButton","SWIPEABLE_ACTION_WIDTH","SwipeableAction","_ref","activationThreshold","close","index","item","listItemXOffset","position","totalActionCount","handleButtonClick","action","actionOffset","newValue","maxOffset","fractionalOffset","Math","max","min","actionOverlayOffset","bounce","actionX","_ref2","x","y","isOuterMost","undefined","onChange","lastValue","getPrevious","set","createElement","backgroundColor","style","color","onClick","width","icon","text","displayName"],"sources":["../../../../src/components/swipeable-wrapper/swipeable-action/SwipeableAction.tsx"],"sourcesContent":["import { MotionValue, useSpring, useTransform } from 'framer-motion';\nimport React, { FC, useEffect } from 'react';\nimport type { SwipeableActionItem } from '../SwipeableWrapper';\nimport { StyledMotionSwipeableAction, StyledSwipeableActionButton } from './SwipeableAction.styles';\n\nexport const SWIPEABLE_ACTION_WIDTH = 72;\n\nexport type SwipeableActionProps = {\n    activationThreshold: number;\n    close: VoidFunction;\n    index: number;\n    item: SwipeableActionItem;\n    listItemXOffset: MotionValue<number>;\n    position: 'left' | 'right';\n    totalActionCount: number;\n};\n\nconst SwipeableAction: FC<SwipeableActionProps> = ({\n    activationThreshold,\n    close,\n    index,\n    item,\n    listItemXOffset,\n    position,\n    totalActionCount,\n}) => {\n    const handleButtonClick = () => {\n        item.action();\n        close();\n    };\n\n    /**\n     * By default, the action sticks to the content of the swipeable item. This\n     * makes it move outwards to reveal the inner items.\n     */\n    const actionOffset = useTransform(listItemXOffset, (newValue) => {\n        const maxOffset = SWIPEABLE_ACTION_WIDTH * index;\n        const fractionalOffset = (-newValue / totalActionCount) * index;\n\n        switch (position) {\n            case 'left':\n                return Math.max(-maxOffset, fractionalOffset);\n            case 'right':\n                return Math.min(maxOffset, fractionalOffset);\n            default:\n                return 0;\n        }\n    });\n\n    /**\n     * Brings the item in again if past the threshold. Only relevant for\n     * outermost items.\n     */\n    const actionOverlayOffset = useSpring(0, {\n        bounce: 0,\n    }) as MotionValue<number>;\n\n    /**\n     * Combines the two values above to create the correct X transform that has\n     * to be applied to the action.\n     */\n    const actionX = useTransform<number, number>([actionOffset, actionOverlayOffset], ([x, y]) => {\n        if (position === 'left') {\n            return Math.min((x ?? 0) + (y ?? 0), 0);\n        }\n\n        return Math.max((x ?? 0) + (y ?? 0), 0);\n    });\n\n    // Animate to the middle after passing threshold if outermost item\n    useEffect(() => {\n        const isOuterMost = index === totalActionCount - 1;\n\n        if (!isOuterMost) return undefined;\n\n        return listItemXOffset.onChange((newValue) => {\n            const lastValue = listItemXOffset.getPrevious();\n\n            // eslint-disable-next-line default-case\n            switch (position) {\n                case 'left':\n                    if (newValue > activationThreshold && lastValue <= activationThreshold) {\n                        actionOverlayOffset.set(SWIPEABLE_ACTION_WIDTH * index);\n                    } else if (newValue < activationThreshold && lastValue >= activationThreshold) {\n                        actionOverlayOffset.set(0);\n                    }\n                    break;\n                case 'right':\n                    if (newValue < activationThreshold && lastValue >= activationThreshold) {\n                        actionOverlayOffset.set(SWIPEABLE_ACTION_WIDTH * -1 * index);\n                    } else if (newValue > activationThreshold && lastValue <= activationThreshold) {\n                        actionOverlayOffset.set(0);\n                    }\n            }\n        });\n    }, [\n        actionOverlayOffset,\n        activationThreshold,\n        index,\n        listItemXOffset,\n        position,\n        totalActionCount,\n    ]);\n\n    return (\n        <StyledMotionSwipeableAction\n            backgroundColor={item.backgroundColor}\n            position={position}\n            style={{ x: actionX }}\n        >\n            <StyledSwipeableActionButton\n                color={item.color}\n                onClick={handleButtonClick}\n                width={`${SWIPEABLE_ACTION_WIDTH}px`}\n            >\n                {item.icon}\n                {item.text}\n            </StyledSwipeableActionButton>\n        </StyledMotionSwipeableAction>\n    );\n};\n\nSwipeableAction.displayName = 'SwipeableAction';\n\nexport default SwipeableAction;\n"],"mappings":"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"}

package/lib/components/swipeable-wrapper/swipeable-action/SwipeableAction.styles.js

@@ -1,14 +1,6 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StyledSwipeableActionButton = exports.StyledMotionSwipeableAction = void 0;
-var _framerMotion = require("framer-motion");
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-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; }
-const StyledMotionSwipeableAction = exports.StyledMotionSwipeableAction = (0, _styledComponents.default)(_framerMotion.motion.div)`
+import { motion } from 'framer-motion';
+import styled, { css } from 'styled-components';
+export const StyledMotionSwipeableAction = styled(motion.div)`
     background-color: ${_ref => {
   let {
     backgroundColor
@@ -26,18 +18,18 @@ const StyledMotionSwipeableAction = exports.StyledMotionSwipeableAction = (0, _s
     position
   } = _ref2;
   if (position === 'left') {
-    return (0, _styledComponents.css)`
+    return css`
                 justify-content: flex-end;
                 right: 100%;
             `;
   }
-  return (0, _styledComponents.css)`
+  return css`
             justify-content: flex-start;
             left: 100%;
         `;
 }}
 `;
-const StyledSwipeableActionButton = exports.StyledSwipeableActionButton = _styledComponents.default.button`
+export const StyledSwipeableActionButton = styled.button`
     align-items: center;
     appearance: none;
     background: none;

package/lib/components/swipeable-wrapper/swipeable-action/SwipeableAction.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"SwipeableAction.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledMotionSwipeableAction","exports","styled","motion","div","_ref","backgroundColor","_ref2","position","css","StyledSwipeableActionButton","button","_ref3","color","_ref4","width"],"sources":["../../../../src/components/swipeable-wrapper/swipeable-action/SwipeableAction.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { SwipeableActionItem } from '../SwipeableWrapper';\nimport type { SwipeableActionProps } from './SwipeableAction';\n\ntype StyledSwipeableActionProps = Pick<SwipeableActionProps, 'position'> &\n    Pick<SwipeableActionItem, 'backgroundColor'>;\n\nexport const StyledMotionSwipeableAction = styled(motion.div)<StyledSwipeableActionProps>`\n    background-color: ${({ backgroundColor }) => backgroundColor};\n    display: flex;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    width: 200vw;\n\n    ${({ position }) => {\n        if (position === 'left') {\n            return css`\n                justify-content: flex-end;\n                right: 100%;\n            `;\n        }\n        return css`\n            justify-content: flex-start;\n            left: 100%;\n        `;\n    }}\n`;\n\ntype StyledSwipeableActionButtonsProps = Pick<SwipeableActionItem, 'color'> & {\n    width: CSSProperties['width'];\n};\n\nexport const StyledSwipeableActionButton = styled.button<StyledSwipeableActionButtonsProps>`\n    align-items: center;\n    appearance: none;\n    background: none;\n    box-shadow: none;\n    color: ${({ color }) => color};\n    display: flex;\n    flex-direction: column;\n    font-size: 88%;\n    gap: 4px;\n    height: 100%;\n    justify-content: center;\n    margin: 0;\n    padding: 0;\n    width: ${({ width }) => width};\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AAEA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAAgD,SAAAG,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAF,wBAAAE,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAOzC,MAAMY,2BAA2B,GAAAC,OAAA,CAAAD,2BAAA,GAAG,IAAAE,yBAAM,EAACC,oBAAM,CAACC,GAAG,CAA8B;AAC1F,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAAgB,CAAC,GAAAD,IAAA;EAAA,OAAKC,eAAe;AAAA,CAAC;AACjE;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAA,IAAkB;EAAA,IAAjB;IAAEC;EAAS,CAAC,GAAAD,KAAA;EACX,IAAIC,QAAQ,KAAK,MAAM,EAAE;IACrB,OAAO,IAAAC,qBAAG,CAAC;AACvB;AACA;AACA,aAAa;EACL;EACA,OAAO,IAAAA,qBAAG,CAAC;AACnB;AACA;AACA,SAAS;AACL,CAAE;AACN,CAAC;AAMM,MAAMC,2BAA2B,GAAAT,OAAA,CAAAS,2BAAA,GAAGR,yBAAM,CAACS,MAA0C;AAC5F;AACA;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEC;EAAM,CAAC,GAAAD,KAAA;EAAA,OAAKC,KAAK;AAAA,CAAC;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEC;EAAM,CAAC,GAAAD,KAAA;EAAA,OAAKC,KAAK;AAAA,CAAC;AAClC,CAAC"}
+{"version":3,"file":"SwipeableAction.styles.js","names":["motion","styled","css","StyledMotionSwipeableAction","div","_ref","backgroundColor","_ref2","position","StyledSwipeableActionButton","button","_ref3","color","_ref4","width"],"sources":["../../../../src/components/swipeable-wrapper/swipeable-action/SwipeableAction.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { SwipeableActionItem } from '../SwipeableWrapper';\nimport type { SwipeableActionProps } from './SwipeableAction';\n\ntype StyledSwipeableActionProps = Pick<SwipeableActionProps, 'position'> &\n    Pick<SwipeableActionItem, 'backgroundColor'>;\n\nexport const StyledMotionSwipeableAction = styled(motion.div)<StyledSwipeableActionProps>`\n    background-color: ${({ backgroundColor }) => backgroundColor};\n    display: flex;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    width: 200vw;\n\n    ${({ position }) => {\n        if (position === 'left') {\n            return css`\n                justify-content: flex-end;\n                right: 100%;\n            `;\n        }\n        return css`\n            justify-content: flex-start;\n            left: 100%;\n        `;\n    }}\n`;\n\ntype StyledSwipeableActionButtonsProps = Pick<SwipeableActionItem, 'color'> & {\n    width: CSSProperties['width'];\n};\n\nexport const StyledSwipeableActionButton = styled.button<StyledSwipeableActionButtonsProps>`\n    align-items: center;\n    appearance: none;\n    background: none;\n    box-shadow: none;\n    color: ${({ color }) => color};\n    display: flex;\n    flex-direction: column;\n    font-size: 88%;\n    gap: 4px;\n    height: 100%;\n    justify-content: center;\n    margin: 0;\n    padding: 0;\n    width: ${({ width }) => width};\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AAEtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAO/C,OAAO,MAAMC,2BAA2B,GAAGF,MAAM,CAACD,MAAM,CAACI,GAAG,CAA8B;AAC1F,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAAgB,CAAC,GAAAD,IAAA;EAAA,OAAKC,eAAe;AAAA,CAAC;AACjE;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAA,IAAkB;EAAA,IAAjB;IAAEC;EAAS,CAAC,GAAAD,KAAA;EACX,IAAIC,QAAQ,KAAK,MAAM,EAAE;IACrB,OAAON,GAAI;AACvB;AACA;AACA,aAAa;EACL;EACA,OAAOA,GAAI;AACnB;AACA;AACA,SAAS;AACL,CAAE;AACN,CAAC;AAMD,OAAO,MAAMO,2BAA2B,GAAGR,MAAM,CAACS,MAA0C;AAC5F;AACA;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEC;EAAM,CAAC,GAAAD,KAAA;EAAA,OAAKC,KAAK;AAAA,CAAC;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEC;EAAM,CAAC,GAAAD,KAAA;EAAA,OAAKC,KAAK;AAAA,CAAC;AAClC,CAAC"}

package/lib/index.js

@@ -1,14 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "SwipeableWrapper", {
-  enumerable: true,
-  get: function () {
-    return _SwipeableWrapper.default;
-  }
-});
-var _SwipeableWrapper = _interopRequireDefault(require("./components/swipeable-wrapper/SwipeableWrapper"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+export { default as SwipeableWrapper } from './components/swipeable-wrapper/SwipeableWrapper';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_SwipeableWrapper","_interopRequireDefault","require","obj","__esModule","default"],"sources":["../src/index.ts"],"sourcesContent":["export { default as SwipeableWrapper } from './components/swipeable-wrapper/SwipeableWrapper';\n"],"mappings":";;;;;;;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAA8F,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA"}
+{"version":3,"file":"index.js","names":["default","SwipeableWrapper"],"sources":["../src/index.ts"],"sourcesContent":["export { default as SwipeableWrapper } from './components/swipeable-wrapper/SwipeableWrapper';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,gBAAgB,QAAQ,iDAAiD"}

package/lib/utils/threshold.js

@@ -1,17 +1,10 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.calcThreshold = void 0;
-var _SwipeableAction = require("../components/swipeable-wrapper/swipeable-action/SwipeableAction");
-const calcThreshold = _ref => {
+import { SWIPEABLE_ACTION_WIDTH } from '../components/swipeable-wrapper/swipeable-action/SwipeableAction';
+export const calcThreshold = _ref => {
   let {
     actionCount,
     direction,
     width
   } = _ref;
-  return Math.max(width / 2, _SwipeableAction.SWIPEABLE_ACTION_WIDTH * actionCount) * (direction === 'left' ? 1 : -1);
+  return Math.max(width / 2, SWIPEABLE_ACTION_WIDTH * actionCount) * (direction === 'left' ? 1 : -1);
 };
-exports.calcThreshold = calcThreshold;
 //# sourceMappingURL=threshold.js.map

package/lib/utils/threshold.js.map

@@ -1 +1 @@
-{"version":3,"file":"threshold.js","names":["_SwipeableAction","require","calcThreshold","_ref","actionCount","direction","width","Math","max","SWIPEABLE_ACTION_WIDTH","exports"],"sources":["../../src/utils/threshold.ts"],"sourcesContent":["import { SWIPEABLE_ACTION_WIDTH } from '../components/swipeable-wrapper/swipeable-action/SwipeableAction';\n\ninterface CalcThresholdOptions {\n    actionCount: number;\n    direction: 'left' | 'right';\n    width: number;\n}\n\nexport const calcThreshold = ({ actionCount, direction, width }: CalcThresholdOptions) =>\n    Math.max(width / 2, SWIPEABLE_ACTION_WIDTH * actionCount) * (direction === 'left' ? 1 : -1);\n"],"mappings":";;;;;;AAAA,IAAAA,gBAAA,GAAAC,OAAA;AAQO,MAAMC,aAAa,GAAGC,IAAA;EAAA,IAAC;IAAEC,WAAW;IAAEC,SAAS;IAAEC;EAA4B,CAAC,GAAAH,IAAA;EAAA,OACjFI,IAAI,CAACC,GAAG,CAACF,KAAK,GAAG,CAAC,EAAEG,uCAAsB,GAAGL,WAAW,CAAC,IAAIC,SAAS,KAAK,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;AAAA;AAACK,OAAA,CAAAR,aAAA,GAAAA,aAAA"}
+{"version":3,"file":"threshold.js","names":["SWIPEABLE_ACTION_WIDTH","calcThreshold","_ref","actionCount","direction","width","Math","max"],"sources":["../../src/utils/threshold.ts"],"sourcesContent":["import { SWIPEABLE_ACTION_WIDTH } from '../components/swipeable-wrapper/swipeable-action/SwipeableAction';\n\ninterface CalcThresholdOptions {\n    actionCount: number;\n    direction: 'left' | 'right';\n    width: number;\n}\n\nexport const calcThreshold = ({ actionCount, direction, width }: CalcThresholdOptions) =>\n    Math.max(width / 2, SWIPEABLE_ACTION_WIDTH * actionCount) * (direction === 'left' ? 1 : -1);\n"],"mappings":"AAAA,SAASA,sBAAsB,QAAQ,kEAAkE;AAQzG,OAAO,MAAMC,aAAa,GAAGC,IAAA;EAAA,IAAC;IAAEC,WAAW;IAAEC,SAAS;IAAEC;EAA4B,CAAC,GAAAH,IAAA;EAAA,OACjFI,IAAI,CAACC,GAAG,CAACF,KAAK,GAAG,CAAC,EAAEL,sBAAsB,GAAGG,WAAW,CAAC,IAAIC,SAAS,KAAK,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;AAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/swipeable-wrapper",
-    "version": "5.0.0-beta.441",
+    "version": "5.0.0-beta.443",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "keywords": [
         "chayns",
@@ -33,24 +33,24 @@
         "url": "https://github.com/TobitSoftware/chayns-components/issues"
     },
     "devDependencies": {
-        "@babel/cli": "^7.23.4",
-        "@babel/core": "^7.23.7",
-        "@babel/preset-env": "^7.23.8",
+        "@babel/cli": "^7.23.9",
+        "@babel/core": "^7.23.9",
+        "@babel/preset-env": "^7.23.9",
         "@babel/preset-react": "^7.23.3",
         "@babel/preset-typescript": "^7.23.3",
-        "@types/react": "^18.2.48",
-        "@types/react-dom": "^18.2.18",
+        "@types/react": "^18.2.55",
+        "@types/react-dom": "^18.2.19",
         "@types/styled-components": "^5.1.34",
-        "@types/uuid": "^9.0.7",
+        "@types/uuid": "^9.0.8",
         "babel-loader": "^9.1.3",
-        "lerna": "^8.0.2",
+        "lerna": "^8.1.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "styled-components": "^6.1.8",
         "typescript": "^5.3.3"
     },
     "dependencies": {
-        "@chayns-components/core": "^5.0.0-beta.441"
+        "@chayns-components/core": "^5.0.0-beta.443"
     },
     "peerDependencies": {
         "chayns-api": ">=1.0.50",
@@ -62,5 +62,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "d9b7d5cebd42707113634c1d54151306f6236d8f"
+    "gitHead": "3f3e8b424de86b8597fd4670766a496a767ee1ba"
 }