@conveyorhq/arrow-ds 1.142.0 → 1.143.1

package/package.json

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

package/public/components/Accordion/Accordion.js

@@ -147,6 +147,7 @@ const AccordionIcon = ({ className, direction = "down", color, disabled = false,
 };
 exports.AccordionIcon = AccordionIcon;
 const AccordionContent = ({ children, maxHeight, style, className, scrollClassName, ...rest }) => {
+    const { disableAnimation } = (0, context_1.useAccordionGroupContext)();
     const { buttonId, contentId, defaultIsOpen, isOpen, } = (0, context_1.useAccordionItemContext)();
     const [childrenRef, setChildrenRef] = react_1.default.useState({ current: null });
     const onRefChange = react_1.default.useCallback((node) => {
@@ -155,18 +156,20 @@ const AccordionContent = ({ children, maxHeight, style, className, scrollClassNa
         }
     }, []);
     const [enableTransition, setEnableTransition] = react_1.default.useState(!defaultIsOpen);
-    const { height: componentHeight } = (0, component_size_1.default)(childrenRef);
-    const { height } = (0, web_1.useSpring)({
-        height: isOpen ? componentHeight : 0,
-        immediate: !enableTransition,
+    const { height } = (0, component_size_1.default)(childrenRef);
+    const props = (0, web_1.useSpring)({
+        height: isOpen ? height : 0,
+        opacity: isOpen ? 1 : 0,
+        config: { mass: 2, tension: 400, friction: 50 },
         onRest: () => {
             if (defaultIsOpen && isOpen) {
                 setEnableTransition(true);
             }
         },
+        immediate: disableAnimation || !enableTransition,
     });
-    return (react_1.default.createElement(web_1.animated.div, { className: (0, classnames_1.default)("overflow-hidden box-content", className), style: { ...style, height }, "aria-labelledby": buttonId, id: contentId, role: "region", ...rest },
-        react_1.default.createElement(Box_1.Box, { ref: onRefChange, className: (0, classnames_1.default)(maxHeight && "overflow-y-auto"), style: maxHeight ? { maxHeight } : undefined }, children)));
+    return (react_1.default.createElement(web_1.animated.div, { className: (0, classnames_1.default)("overflow-hidden box-content", className), style: { ...style, ...props }, "aria-labelledby": buttonId, id: contentId, role: "region", ...rest },
+        react_1.default.createElement(Box_1.Box, { ref: onRefChange, className: (0, classnames_1.default)(maxHeight && "overflow-y-auto", scrollClassName), style: maxHeight ? { maxHeight } : undefined }, children)));
 };
 exports.AccordionContent = AccordionContent;
 const Accordion = (props) => {

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/src/components/Accordion/Accordion.tsx

@@ -308,7 +308,7 @@ export const AccordionContent = ({
   scrollClassName,
   ...rest
 }: AccordionContentProps) => {
-  // const { disableAnimation } = useAccordionGroupContext();
+  const { disableAnimation } = useAccordionGroupContext();
   const {
     buttonId,
     contentId,
@@ -328,20 +328,24 @@ export const AccordionContent = ({
   const [enableTransition, setEnableTransition] = React.useState(
     !defaultIsOpen,
   );
-  const { height: componentHeight } = useComponentSize(childrenRef);
-  const { height } = useSpring({
-    height: isOpen ? componentHeight : 0,
-    immediate: !enableTransition,
+
+  const { height } = useComponentSize(childrenRef);
+  const props = useSpring({
+    height: isOpen ? height : 0,
+    opacity: isOpen ? 1 : 0,
+    config: { mass: 2, tension: 400, friction: 50 },
     onRest: () => {
       if (defaultIsOpen && isOpen) {
         setEnableTransition(true);
       }
     },
+    immediate: disableAnimation || !enableTransition,
   });
+
   return (
     <animated.div
       className={classNames("overflow-hidden box-content", className)}
-      style={{ ...style, height }}
+      style={{ ...style, ...props }}
       aria-labelledby={buttonId}
       id={contentId}
       role="region"
@@ -349,7 +353,7 @@ export const AccordionContent = ({
     >
       <Box
         ref={onRefChange}
-        className={classNames(maxHeight && "overflow-y-auto")}
+        className={classNames(maxHeight && "overflow-y-auto", scrollClassName)}
         style={maxHeight ? { maxHeight } : undefined}
       >
         {children}

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<