@conveyorhq/arrow-ds 1.138.0 → 1.139.0

package/package.json

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

package/public/components/Menu/MenuItem.d.ts

@@ -4,6 +4,7 @@ export interface MenuItemProps {
     onClick?: (event: MouseEvent) => void;
     isSelected?: boolean;
     isHighlighted?: boolean;
+    disabled?: boolean;
     [key: string]: any;
 }
 export declare const MenuItem: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<MenuItemProps>>;

package/public/components/Menu/MenuItem.js

@@ -28,7 +28,7 @@ const classnames_1 = __importDefault(require("classnames"));
 const bem_1 = require("../../utilities/bem");
 const MenuRenderer_1 = require("../MenuRenderer");
 const cn = "Menu";
-exports.MenuItem = react_1.forwardRef(({ children, className, isSelected = false, isHighlighted = false, as: Component = "button", onClick, ...rest }, ref) => {
+exports.MenuItem = react_1.forwardRef(({ children, className, isSelected = false, isHighlighted = false, disabled = false, as: Component = "button", onClick, ...rest }, ref) => {
     const { onClose, itemProps } = MenuRenderer_1.useMenuContext();
     const clickHandler = (event) => {
         if (typeof onClick === "function") {
@@ -42,6 +42,7 @@ exports.MenuItem = react_1.forwardRef(({ children, className, isSelected = false
             bem_1.bem(cn, { e: "item" }),
             isSelected && bem_1.bem(cn, { e: "item", m: "isSelected" }),
             isHighlighted && bem_1.bem(cn, { e: "item", m: "isHighlighted" }),
+            disabled && bem_1.bem(cn, { e: "item", m: "isDisabled" }),
             className,
-        ]), onClick: clickHandler }, itemProps, rest), children));
+        ]), onClick: clickHandler, disabled: disabled }, itemProps, rest), children));
 });

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

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

package/public/components/MenuRenderer/MenuRenderer.js

@@ -40,7 +40,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", ...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, ...rest }) => {
     const [isOpenUncontrolled, setOpenUncontrolled] = react_1.useState(isOpenInitial);
     const open = isOpenControlled !== null && isOpenControlled !== void 0 ? isOpenControlled : isOpenUncontrolled;
     const setOpen = setOpenControlled !== null && setOpenControlled !== void 0 ? setOpenControlled : setOpenUncontrolled;
@@ -152,7 +152,7 @@ const MenuRenderer = ({ children, className, placement = "bottom-start", positio
         transitions.map(({ item, key, props: transitionProps }) => item && (react_1.default.createElement(PortalComponent, { key: key },
             react_1.default.createElement(context_1.MenuContext.Provider, { value: context },
                 react_1.default.createElement(Box_1.Box, Object.assign({ className: hasPortal ? "z-toast" : "z-menu", ref: setPopperElement, style: { minWidth: `${minWidth}px`, ...styles.popper } }, attributes.popper),
-                    react_1.default.createElement(react_focus_lock_1.default, { autoFocus: autoFocus },
+                    react_1.default.createElement(react_focus_lock_1.default, { autoFocus: autoFocus, disabled: disableFocusLock },
                         react_1.default.createElement(react_spring_1.animated.div, { key: key, style: transitionProps, ref: menuListElement, className: menuDisplay }, typeof children === "function"
                             ? children(renderProps)
                             : children)))))))));

package/public/css/styles.css

@@ -4768,6 +4768,11 @@ override built-in Image component classes */
   color: rgb(32 65 86 / var(--tw-text-opacity));
 }
 
+.ads-Menu-item--isDisabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
 .ads-Menu-item:first-of-type {
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;