@chayns-components/swipeable-wrapper 5.0.0-beta.456 → 5.0.0-beta.458

package/lib/components/swipeable-wrapper/SwipeableWrapper.styles.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 /// <reference types="react" />
 export declare const StyledMotionSwipeableWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<{
-    color?: string | undefined;
     title?: string | undefined;
     slot?: string | undefined;
     defaultChecked?: boolean | undefined;
@@ -38,6 +37,7 @@ export declare const StyledMotionSwipeableWrapper: import("styled-components").I
     autoCapitalize?: string | undefined;
     autoCorrect?: string | undefined;
     autoSave?: string | undefined;
+    color?: string | undefined;
     itemProp?: string | undefined;
     itemScope?: boolean | undefined;
     itemType?: string | undefined;

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

@@ -80,15 +80,15 @@ const SwipeableAction = _ref => {
     });
   }, [actionOverlayOffset, activationThreshold, index, listItemXOffset, position, totalActionCount]);
   return /*#__PURE__*/React.createElement(StyledMotionSwipeableAction, {
-    backgroundColor: item.backgroundColor,
-    position: position,
+    $backgroundColor: item.backgroundColor,
+    $position: position,
     style: {
       x: actionX
     }
   }, /*#__PURE__*/React.createElement(StyledSwipeableActionButton, {
-    color: item.color,
+    $color: item.color,
     onClick: handleButtonClick,
-    width: `${SWIPEABLE_ACTION_WIDTH}px`
+    $width: `${SWIPEABLE_ACTION_WIDTH}px`
   }, item.icon, item.text));
 };
 SwipeableAction.displayName = 'SwipeableAction';

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

@@ -1 +1 @@
-{"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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"}
+{"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","backgroundColor","$position","style","$color","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.d.ts

@@ -1,9 +1,9 @@
 import type { CSSProperties } from 'react';
-import type { SwipeableActionItem } from '../SwipeableWrapper';
-import type { SwipeableActionProps } from './SwipeableAction';
-type StyledSwipeableActionProps = Pick<SwipeableActionProps, 'position'> & Pick<SwipeableActionItem, 'backgroundColor'>;
+type StyledSwipeableActionProps = {
+    $position: 'left' | 'right';
+    $backgroundColor: CSSProperties['backgroundColor'];
+};
 export declare const StyledMotionSwipeableAction: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<{
-    color?: string | undefined;
     title?: string | undefined;
     slot?: string | undefined;
     defaultChecked?: boolean | undefined;
@@ -40,6 +40,7 @@ export declare const StyledMotionSwipeableAction: import("styled-components").IS
     autoCapitalize?: string | undefined;
     autoCorrect?: string | undefined;
     autoSave?: string | undefined;
+    color?: string | undefined;
     itemProp?: string | undefined;
     itemScope?: boolean | undefined;
     itemType?: string | undefined;
@@ -265,8 +266,9 @@ export declare const StyledMotionSwipeableAction: import("styled-components").IS
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
 } & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLDivElement>, StyledSwipeableActionProps>> & Omit<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
-type StyledSwipeableActionButtonsProps = Pick<SwipeableActionItem, 'color'> & {
-    width: CSSProperties['width'];
+type StyledSwipeableActionButtonsProps = {
+    $width: CSSProperties['width'];
+    $color: CSSProperties['color'];
 };
 export declare const StyledSwipeableActionButton: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, StyledSwipeableActionButtonsProps>>;
 export {};

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

@@ -3,9 +3,9 @@ import styled, { css } from 'styled-components';
 export const StyledMotionSwipeableAction = styled(motion.div)`
     background-color: ${_ref => {
   let {
-    backgroundColor
+    $backgroundColor
   } = _ref;
-  return backgroundColor;
+  return $backgroundColor;
 }};
     display: flex;
     height: 100%;
@@ -15,9 +15,9 @@ export const StyledMotionSwipeableAction = styled(motion.div)`
 
     ${_ref2 => {
   let {
-    position
+    $position
   } = _ref2;
-  if (position === 'left') {
+  if ($position === 'left') {
     return css`
                 justify-content: flex-end;
                 right: 100%;
@@ -36,9 +36,9 @@ export const StyledSwipeableActionButton = styled.button`
     box-shadow: none;
     color: ${_ref3 => {
   let {
-    color
+    $color
   } = _ref3;
-  return color;
+  return $color;
 }};
     display: flex;
     flex-direction: column;
@@ -50,9 +50,9 @@ export const StyledSwipeableActionButton = styled.button`
     padding: 0;
     width: ${_ref4 => {
   let {
-    width
+    $width
   } = _ref4;
-  return width;
+  return $width;
 }};
 `;
 //# sourceMappingURL=SwipeableAction.styles.js.map

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

@@ -1 +1 @@
-{"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"}
+{"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';\n\ntype StyledSwipeableActionProps = {\n    $position: 'left' | 'right';\n    $backgroundColor: CSSProperties['backgroundColor'];\n};\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 = {\n    $width: CSSProperties['width'];\n    $color: CSSProperties['color'];\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;EAAiB,CAAC,GAAAD,IAAA;EAAA,OAAKC,gBAAgB;AAAA,CAAC;AACnE;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAA,IAAmB;EAAA,IAAlB;IAAEC;EAAU,CAAC,GAAAD,KAAA;EACZ,IAAIC,SAAS,KAAK,MAAM,EAAE;IACtB,OAAON,GAAI;AACvB;AACA;AACA,aAAa;EACL;EACA,OAAOA,GAAI;AACnB;AACA;AACA,SAAS;AACL,CAAE;AACN,CAAC;AAOD,OAAO,MAAMO,2BAA2B,GAAGR,MAAM,CAACS,MAA0C;AAC5F;AACA;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OAAKC,MAAM;AAAA,CAAC;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OAAKC,MAAM;AAAA,CAAC;AACpC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/swipeable-wrapper",
-    "version": "5.0.0-beta.456",
+    "version": "5.0.0-beta.458",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -57,7 +57,7 @@
         "typescript": "^5.3.3"
     },
     "dependencies": {
-        "@chayns-components/core": "^5.0.0-beta.456"
+        "@chayns-components/core": "^5.0.0-beta.458"
     },
     "peerDependencies": {
         "chayns-api": ">=1.0.50",
@@ -69,5 +69,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "703953eb5eba477163504a0acf90495d559446ff"
+    "gitHead": "1d73583ba75b4129c0b79b08a51c5c07d1d74a6c"
 }