@conveyorhq/arrow-ds 1.141.0 → 1.143.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@conveyorhq/arrow-ds",
   "author": "Conveyor",
   "license": "MIT",
-  "version": "1.141.0",
+  "version": "1.143.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/components/Menu/MenuItem.js

@@ -33,12 +33,12 @@ const bem_1 = require("../../utilities/bem");
 const MenuRenderer_1 = require("../MenuRenderer");
 const cn = "Menu";
 exports.MenuItem = (0, react_1.forwardRef)(({ children, className, isSelected = false, isHighlighted = false, disabled = false, as: Component = "button", onClick, ...rest }, ref) => {
-    const { onClose, itemProps } = (0, MenuRenderer_1.useMenuContext)();
+    const { onClose, itemProps, closeOnSelect } = (0, MenuRenderer_1.useMenuContext)();
     const clickHandler = (event) => {
         if (typeof onClick === "function") {
             onClick(event);
         }
-        if (typeof onClose === "function") {
+        if (typeof onClose === "function" && closeOnSelect) {
             onClose();
         }
     };

package/public/components/MenuRenderer/MenuRenderer.d.ts

@@ -31,6 +31,7 @@ export interface MenuProps extends Omit<BoxProps, "children"> {
     openMenu?: (open: boolean) => void;
     menuDisplay?: "inline-block" | "block";
     disableFocusLock?: boolean;
+    closeOnSelect?: boolean;
 }
-export declare const MenuRenderer: ({ children, className, placement, position, trigger, popperModifiers, autoFocus, hasPortal, isOpen: isOpenInitial, isMenuOpen: isOpenControlled, onClose: onCloseProp, openMenu: setOpenControlled, menuDisplay, disableFocusLock, ...rest }: MenuProps) => React.JSX.Element;
+export declare const MenuRenderer: ({ children, className, placement, position, trigger, popperModifiers, autoFocus, hasPortal, isOpen: isOpenInitial, isMenuOpen: isOpenControlled, onClose: onCloseProp, openMenu: setOpenControlled, menuDisplay, disableFocusLock, closeOnSelect, ...rest }: MenuProps) => React.JSX.Element;
 export {};

package/public/components/MenuRenderer/MenuRenderer.js

@@ -43,7 +43,7 @@ const TRANSITION_START = {
     opacity: 0,
 };
 const TRANSITION_END = { transform: "translateY(0)", opacity: 1 };
-const MenuRenderer = ({ children, className, placement = "bottom-start", position = "absolute", trigger, popperModifiers = [], autoFocus = false, hasPortal = false, isOpen: isOpenInitial = false, isMenuOpen: isOpenControlled, onClose: onCloseProp, openMenu: setOpenControlled, menuDisplay = "inline-block", disableFocusLock = false, ...rest }) => {
+const MenuRenderer = ({ children, className, placement = "bottom-start", position = "absolute", trigger, popperModifiers = [], autoFocus = false, hasPortal = false, isOpen: isOpenInitial = false, isMenuOpen: isOpenControlled, onClose: onCloseProp, openMenu: setOpenControlled, menuDisplay = "inline-block", disableFocusLock = false, closeOnSelect = true, ...rest }) => {
     const [isOpenUncontrolled, setOpenUncontrolled] = (0, react_1.useState)(isOpenInitial);
     const open = isOpenControlled !== null && isOpenControlled !== void 0 ? isOpenControlled : isOpenUncontrolled;
     const setOpen = setOpenControlled !== null && setOpenControlled !== void 0 ? setOpenControlled : setOpenUncontrolled;
@@ -121,6 +121,7 @@ const MenuRenderer = ({ children, className, placement = "bottom-start", positio
         menuId,
         buttonId,
         placement,
+        closeOnSelect,
         ...renderProps,
     };
     (0, hooks_1.useOutsideClick)([menuElement, menuListElement], () => {

package/public/components/MenuRenderer/context.d.ts

@@ -20,6 +20,7 @@ export type MenuContextProps = RenderProps & {
     onToggle?: (event: Event | React.MouseEvent<HTMLButtonElement>) => void;
     onOpen?: () => void;
     placement?: PopperPlacement;
+    closeOnSelect?: boolean;
 };
 export declare const defaultContext: MenuContextProps;
 export declare const MenuContext: Context<typeof defaultContext>;

package/public/components/MenuRenderer/context.js

@@ -20,6 +20,7 @@ exports.defaultContext = {
     buttonId: "",
     menuId: "",
     placement: "bottom-start",
+    closeOnSelect: true,
 };
 exports.MenuContext = (0, react_1.createContext)(exports.defaultContext);
 function useMenuContext() {

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/components/Menu/MenuItem.tsx

@@ -28,12 +28,12 @@ export const MenuItem = forwardRef<MenuItemProps, any>(
     },
     ref,
   ) => {
-    const { onClose, itemProps } = useMenuContext();
+    const { onClose, itemProps, closeOnSelect } = useMenuContext();
     const clickHandler = (event: MouseEvent) => {
       if (typeof onClick === "function") {
         onClick(event);
       }
-      if (typeof onClose === "function") {
+      if (typeof onClose === "function" && closeOnSelect) {
         onClose();
       }
     };

package/src/components/MenuRenderer/MenuRenderer.tsx

@@ -90,6 +90,10 @@ export interface MenuProps extends Omit<BoxProps, "children"> {
    * Should focus lock be disabled
    */
   disableFocusLock?: boolean;
+  /**
+   * If true, the menu will close when a menu item is clicked.
+   */
+  closeOnSelect?: boolean;
 }
 
 const MENU_OFFSET = 8;
@@ -114,6 +118,7 @@ export const MenuRenderer = ({
   openMenu: setOpenControlled,
   menuDisplay = "inline-block",
   disableFocusLock = false,
+  closeOnSelect = true,
   ...rest
 }: MenuProps) => {
   const [isOpenUncontrolled, setOpenUncontrolled] = useState(isOpenInitial);
@@ -207,6 +212,7 @@ export const MenuRenderer = ({
     menuId,
     buttonId,
     placement,
+    closeOnSelect,
     ...renderProps,
   };
 

package/src/components/MenuRenderer/context.ts

@@ -22,6 +22,7 @@ export type MenuContextProps = RenderProps & {
   onToggle?: (event: Event | React.MouseEvent<HTMLButtonElement>) => void;
   onOpen?: () => void;
   placement?: PopperPlacement;
+  closeOnSelect?: boolean;
 };
 
 export const defaultContext: MenuContextProps = {
@@ -42,6 +43,7 @@ export const defaultContext: MenuContextProps = {
   buttonId: "",
   menuId: "",
   placement: "bottom-start",
+  closeOnSelect: true,
 };
 
 export const MenuContext: Context<typeof defaultContext> = createContext<

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>(