@conveyorhq/arrow-ds 1.141.0 → 1.142.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@conveyorhq/arrow-ds",
   "author": "Conveyor",
   "license": "MIT",
-  "version": "1.141.0",
+  "version": "1.142.0",
   "description": "Arrow Design System",
   "repository": "https://github.com/conveyor/arrow-ds",
   "publishConfig": {

package/public/components/Drawer/Drawer.d.ts

@@ -2,13 +2,17 @@ import React from "react";
 import { BoxProps } from "../Box";
 import { TopBarProps } from "../TopBar";
 import { CloseButtonProps } from "../CloseButton";
+type ScrollableSlotRenderFunction = (props: {
+    isOpen: boolean;
+    isAnimationComplete: boolean;
+}) => React.ReactNode;
 export interface WithDrawerProps {
     drawerSlot: React.ReactNode;
     onClose: () => void;
     isOpen?: boolean;
     fixedSlotTop?: React.ReactNode;
     fixedSlotBottom?: React.ReactNode;
-    scrollableSlot?: React.ReactNode;
+    scrollableSlot?: ScrollableSlotRenderFunction | React.ReactNode;
     drawerSide?: "left" | "right";
     noAnimation?: boolean;
     drawerWidth?: number;
@@ -32,3 +36,4 @@ export declare const Drawer: {
     Body: ({ children, className, ...rest }: BoxProps) => React.JSX.Element;
     Footer: ({ children, className, ...rest }: BoxProps) => React.JSX.Element;
 };
+export {};

package/public/components/Drawer/Drawer.js

@@ -50,6 +50,7 @@ const calculateTransformValue = (isOpen, drawerOnRight, drawerWidth) => {
 const WithDrawer = ({ drawerSlot, onClose, isOpen = false, fixedSlotTop, fixedSlotBottom, scrollableSlot, drawerSide = "left", noAnimation = false, drawerWidth = DEFAULT_DRAWER_WIDTH, }) => {
     const drawerOnRight = drawerSide === "right";
     const [isClosedAtRest, setIsClosedAtRest] = (0, react_1.useState)(false);
+    const [isAnimationComplete, setIsAnimationComplete] = (0, react_1.useState)(false);
     const { transform, paddingLeft, paddingRight } = (0, web_1.useSpring)({
         transform: calculateTransformValue(isOpen, drawerOnRight, drawerWidth),
         paddingLeft: isOpen && !drawerOnRight ? drawerWidth : 0,
@@ -63,6 +64,12 @@ const WithDrawer = ({ drawerSlot, onClose, isOpen = false, fixedSlotTop, fixedSl
                 setIsClosedAtRest(false);
             }
         },
+        onStart: () => {
+            setIsAnimationComplete(false);
+        },
+        onRest: () => {
+            setIsAnimationComplete(true);
+        },
         config: {
             duration: noAnimation ? 0 : 300,
             easing: d3_ease_1.easeCubicInOut,
@@ -80,7 +87,13 @@ const WithDrawer = ({ drawerSlot, onClose, isOpen = false, fixedSlotTop, fixedSl
     const scrollableSlotPaddingToInterpolate = drawerOnRight
         ? paddingRight
         : paddingLeft;
-    return (react_1.default.createElement(drawer_1.DrawerContext.Provider, { value: { isOpen, onClose, isClosedAtRest, drawerSide } },
+    return (react_1.default.createElement(drawer_1.DrawerContext.Provider, { value: {
+            isOpen,
+            onClose,
+            isClosedAtRest,
+            drawerSide,
+            isAnimationComplete,
+        } },
         react_1.default.createElement(Box_1.Box, { className: (0, classnames_1.default)(cn(), {
                 [cn({ m: "isOpen" })]: isOpen,
             }) },
@@ -92,7 +105,12 @@ const WithDrawer = ({ drawerSlot, onClose, isOpen = false, fixedSlotTop, fixedSl
                 scrollableSlot && (react_1.default.createElement(web_1.animated.div, { style: {
                         transform: transformReverse,
                         width: scrollableSlotPaddingToInterpolate.interpolate((w) => `calc(100% - ${w}px)`),
-                    }, className: cn({ e: "scrollableSlot" }) }, scrollableSlot)),
+                    }, className: cn({ e: "scrollableSlot" }) }, typeof scrollableSlot === "function"
+                    ? scrollableSlot({
+                        isOpen,
+                        isAnimationComplete,
+                    })
+                    : scrollableSlot)),
                 fixedSlotBottom && (react_1.default.createElement(web_1.animated.div, { style: { paddingLeft, paddingRight }, className: cn({ e: "fixedSlot" }) }, fixedSlotBottom))))));
 };
 exports.WithDrawer = WithDrawer;

package/public/contexts/drawer.d.ts

@@ -4,6 +4,7 @@ interface DrawerContextType {
     onClose: () => void;
     isClosedAtRest: boolean;
     drawerSide: "left" | "right";
+    isAnimationComplete: boolean;
 }
 export declare const DrawerContext: Context<DrawerContextType>;
 export {};

package/public/contexts/drawer.js

@@ -7,5 +7,6 @@ const defaultContext = {
     onClose: () => { },
     isClosedAtRest: false,
     drawerSide: "left",
+    isAnimationComplete: false,
 };
 exports.DrawerContext = (0, react_1.createContext)(defaultContext);

package/src/components/Drawer/Drawer.tsx

@@ -12,6 +12,11 @@ import { Flex } from "../Flex";
 
 const cn = bemHOF("Drawer");
 
+type ScrollableSlotRenderFunction = (props: {
+  isOpen: boolean;
+  isAnimationComplete: boolean;
+}) => React.ReactNode;
+
 export interface WithDrawerProps {
   /**
    * The content of the drawer
@@ -41,7 +46,7 @@ export interface WithDrawerProps {
   /**
    * Scrollable content that will be pushed off screen as the Drawer animates in
    */
-  scrollableSlot?: React.ReactNode;
+  scrollableSlot?: ScrollableSlotRenderFunction | React.ReactNode;
 
   /**
    * Puts the drawer on the left or right of the content
@@ -87,6 +92,7 @@ export const WithDrawer = ({
 }: WithDrawerProps) => {
   const drawerOnRight = drawerSide === "right";
   const [isClosedAtRest, setIsClosedAtRest] = useState(false);
+  const [isAnimationComplete, setIsAnimationComplete] = useState(false);
   const { transform, paddingLeft, paddingRight } = useSpring({
     transform: calculateTransformValue(isOpen, drawerOnRight, drawerWidth),
     paddingLeft: isOpen && !drawerOnRight ? drawerWidth : 0,
@@ -105,6 +111,12 @@ export const WithDrawer = ({
         setIsClosedAtRest(false);
       }
     },
+    onStart: () => {
+      setIsAnimationComplete(false);
+    },
+    onRest: () => {
+      setIsAnimationComplete(true);
+    },
     config: {
       duration: noAnimation ? 0 : 300,
       easing: easeCubicInOut,
@@ -130,7 +142,13 @@ export const WithDrawer = ({
 
   return (
     <DrawerContext.Provider
-      value={{ isOpen, onClose, isClosedAtRest, drawerSide }}
+      value={{
+        isOpen,
+        onClose,
+        isClosedAtRest,
+        drawerSide,
+        isAnimationComplete,
+      }}
     >
       <Box
         className={classNames(cn(), {
@@ -166,7 +184,12 @@ export const WithDrawer = ({
               }}
               className={cn({ e: "scrollableSlot" })}
             >
-              {scrollableSlot}
+              {typeof scrollableSlot === "function"
+                ? scrollableSlot({
+                    isOpen,
+                    isAnimationComplete,
+                  })
+                : scrollableSlot}
             </animated.div>
           )}
           {fixedSlotBottom && (

package/src/contexts/drawer.tsx

@@ -5,6 +5,7 @@ interface DrawerContextType {
   onClose: () => void;
   isClosedAtRest: boolean;
   drawerSide: "left" | "right";
+  isAnimationComplete: boolean;
 }
 
 const defaultContext: DrawerContextType = {
@@ -12,6 +13,7 @@ const defaultContext: DrawerContextType = {
   onClose: () => {},
   isClosedAtRest: false,
   drawerSide: "left",
+  isAnimationComplete: false,
 };
 
 export const DrawerContext: Context<DrawerContextType> = createContext<DrawerContextType>(