@conveyorhq/arrow-ds 1.64.0 → 1.65.1

package/package.json

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

package/public/components/Checkbox/Checkbox.d.ts

@@ -1,10 +1,11 @@
 import { InputProps } from "../Input";
 import { StackProps } from "../Stack";
-export interface CheckboxProps extends InputProps {
+export declare type CheckboxProps = InputProps & {
     label?: string;
     hideRequiredStyles?: boolean;
     isRequired?: boolean;
-}
+    checked?: boolean | "indeterminate";
+};
 export declare const Checkbox: {
     ({ checked, children, className, disabled, id: idProp, label, onBlur, onChange, onClick, onFocus, hideRequiredStyles, isRequired, tabIndex, theme: themeProp, ...rest }: CheckboxProps): JSX.Element;
     Group: (props: StackProps) => JSX.Element;

package/public/components/Checkbox/Checkbox.js

@@ -59,10 +59,14 @@ const Checkbox = ({ checked, children, className, disabled = false, id: idProp,
     else if (isRequiredContext !== undefined) {
         calculatedRequired = isRequiredContext;
     }
+    const [isIndeterminate, setIndeterminate] = react_1.useState(false);
+    react_1.useEffect(() => {
+        setIndeterminate(typeof checked === "string" && checked === "indeterminate");
+    }, [checked]);
     const bareCheckbox = (react_1.default.createElement(Box_1.Box, { className: bem_1.bem(cn, { e: "BoxWrapper" }) },
-        react_1.default.createElement(Input_1.Input, Object.assign({ "aria-checked": checked ? "true" : "false", checked: checked, className: bem_1.bem(cn, { e: "Input" }), disabled: disabled, id: id, onChange: onChange, type: "checkbox", onFocus: onFocus, onBlur: onBlur, onClick: label ? handleClick : undefined, tabIndex: tabIndex }, rest)),
+        react_1.default.createElement(Input_1.Input, Object.assign({ "aria-checked": isIndeterminate ? "mixed" : checked, checked: checked, className: bem_1.bem(cn, { e: "Input" }), disabled: disabled, id: id, onChange: onChange, type: "checkbox", onFocus: onFocus, onBlur: onBlur, onClick: label ? handleClick : undefined, tabIndex: tabIndex }, rest)),
         react_1.default.createElement(Box_1.Box, { className: classnames_1.default(bem_1.bem(cn, { e: "Box" }), bem_1.bem(cn, { e: "Box", m: theme }), checked && bem_1.bem(cn, { e: "Box", m: "checked" })) }),
-        checked && (react_1.default.createElement(Icon_1.Icon, { className: classnames_1.default(bem_1.bem(cn, { e: "Check" }), bem_1.bem(cn, { e: "Check", m: theme })), icon: Icon_1.ICON_TYPE.CHECK }))));
+        checked && (react_1.default.createElement(Icon_1.Icon, { className: classnames_1.default(bem_1.bem(cn, { e: "Check" }), bem_1.bem(cn, { e: "Check", m: theme })), icon: isIndeterminate ? Icon_1.ICON_TYPE.MINUS : Icon_1.ICON_TYPE.CHECK }))));
     const checkboxWithLabel = label || children ? (react_1.default.createElement(Label_1.Label, { className: bem_1.bem(cn, { e: "Label" }), isRequired: calculatedRequired && !hideRequiredStyles },
         bareCheckbox,
         react_1.default.createElement(Text_1.Text, { as: "span", className: classnames_1.default(bem_1.bem(cn, { e: "LabelText" }), bem_1.bem(cn, { e: "LabelText", m: theme })) },

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

@@ -1,7 +1,7 @@
 import React from "react";
 export interface MenuItemProps {
     as?: any;
-    onClick?: () => void;
+    onClick?: (event: MouseEvent) => void;
     isSelected?: boolean;
     isHighlighted?: boolean;
     [key: string]: any;

package/public/components/Menu/MenuItem.js

@@ -30,9 +30,9 @@ 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) => {
     const { onClose, itemProps } = MenuRenderer_1.useMenuContext();
-    const clickHandler = () => {
+    const clickHandler = (event) => {
         if (typeof onClick === "function") {
-            onClick();
+            onClick(event);
         }
         if (typeof onClose === "function") {
             onClose();

package/public/components/Modal/Modal.js

@@ -108,6 +108,15 @@ const Modal = (props) => {
             onClose();
         }
     });
+    react_1.useEffect(() => {
+        if (isOpen) {
+            document.body.classList.add("modal-open");
+        }
+        else {
+            document.body.classList.remove("modal-open");
+        }
+        return () => document.body.classList.remove("modal-open");
+    }, [isOpen]);
     return isOpen ? (react_1.default.createElement(context_1.ModalContext.Provider, { value: { onClose } },
         react_1.default.createElement(Portal_1.Portal, null,
             react_1.default.createElement(react_focus_lock_1.default, { autoFocus: autoFocus, returnFocus: true },

package/public/css/styles.css

@@ -586,6 +586,14 @@ a:focus-visible,
   --tw-backdrop-sepia:  ;
 }
 
+/* Disable all scrolling outside of a modal when one is open */
+
+.modal-open [class^="overflow"], 
+.modal-open .ads-ScrollPane-container {
+  pointer-events: none !important;
+  overflow: hidden !important;
+}
+
 /* BASICS */
 
 .CodeMirror {
@@ -8687,6 +8695,10 @@ override built-in Image component classes */
   padding-right: 128px;
 }
 
+.pl-4 {
+  padding-left: 16px;
+}
+
 .pb-20 {
   padding-bottom: 80px;
 }
@@ -8695,10 +8707,6 @@ override built-in Image component classes */
   padding-top: 8px;
 }
 
-.pl-4 {
-  padding-left: 16px;
-}
-
 .pt-3 {
   padding-top: 12px;
 }