@conveyorhq/arrow-ds 1.55.1 → 1.57.0

package/package.json

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

package/public/components/Appbar/AppbarLogInButton.js

@@ -20,7 +20,6 @@ const AppbarLogInButton = (props) => {
             "hover:text-white",
             "focus:text-white",
             "focus:bg-gray-800",
-            "focus:outline-none",
         ]), noStyles: true }, rest), "Log in"));
 };
 exports.AppbarLogInButton = AppbarLogInButton;

package/public/components/Checkbox/Checkbox.js

@@ -42,34 +42,16 @@ const CheckboxGroup = (props) => {
     return react_1.default.createElement(Stack_1.Stack, Object.assign({ orientation: orientation }, rest));
 };
 const Checkbox = ({ checked, children, className, disabled = false, id: idProp, label, onBlur, onChange = () => { }, onClick, onFocus, hideRequiredStyles = true, isRequired = undefined, tabIndex, theme: themeProp, ...rest }) => {
-    const [hasFocus, setHasFocus] = react_1.useState(false);
     const { isRequired: isRequiredContext, theme: themeContext } = react_1.useContext(FormGroupContext_1.FormGroupContext);
     const fallbackId = `checkbox:${auto_id_1.useId()}`;
     const id = isUndefined_1.default(idProp) ? fallbackId : idProp;
     const theme = themeProp || themeContext;
-    const classes = classnames_1.default([
-        bem_1.bem(cn),
-        { "is-disabled": disabled },
-        { "is-focused": hasFocus },
-        className,
-    ]);
+    const classes = classnames_1.default([bem_1.bem(cn), { "is-disabled": disabled }, className]);
     const handleClick = (event) => {
         if (!disabled && onClick) {
             onClick(event);
         }
     };
-    const handleFocus = (event) => {
-        setHasFocus(true);
-        if (onFocus) {
-            onFocus(event);
-        }
-    };
-    const handleBlur = (event) => {
-        setHasFocus(false);
-        if (onBlur) {
-            onBlur(event);
-        }
-    };
     let calculatedRequired = false;
     if (isRequired !== undefined) {
         calculatedRequired = isRequired;
@@ -78,7 +60,7 @@ const Checkbox = ({ checked, children, className, disabled = false, id: idProp,
         calculatedRequired = isRequiredContext;
     }
     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: handleFocus, onBlur: handleBlur, onClick: label ? handleClick : undefined, tabIndex: tabIndex }, rest)),
+        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(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 }))));
     const checkboxWithLabel = label || children ? (react_1.default.createElement(Label_1.Label, { className: bem_1.bem(cn, { e: "Label" }), isRequired: calculatedRequired && !hideRequiredStyles },

package/public/components/FileUpload/FileUploadDnD.js

@@ -138,7 +138,7 @@ const FileUploadInput = ({ inputProps, buttonProps, className, accept, label = "
     }, [value, multiple]);
     return (react_1.default.createElement("label", Object.assign({ ref: drop, htmlFor: id, className: classnames_1.default(cn(), isActive && cn({ m: "active" }), className) }, labelRest),
         react_1.default.createElement("input", Object.assign({ className: classnames_1.default(cn({ e: "input" }), inputClassName), ref: inputRef, type: "file", id: id, multiple: props.multiple, accept: accept }, inputRest, { onChange: handleInputChange })),
-        react_1.default.createElement(Button_1.Button, Object.assign({ className: classnames_1.default(cn({ e: "button" })), as: "div", variant: Button_1.BUTTON_VARIANT.SECONDARY }, buttonProps), label),
+        react_1.default.createElement(Button_1.Button, Object.assign({ className: classnames_1.default(cn({ e: "button" })), as: "div", variant: Button_1.BUTTON_VARIANT.SECONDARY, tabIndex: -1 }, buttonProps), label),
         errorText && (react_1.default.createElement(Truncate_1.Truncate, { className: cn({ e: "truncate" }) },
             react_1.default.createElement(Text_1.Text, { as: "span", className: cn({ e: "error" }) }, errorText))),
         !hideFileLabel && (react_1.default.createElement(Truncate_1.Truncate, { className: cn({ e: "truncate" }) },

package/public/components/Icon/Icon.d.ts

@@ -3,8 +3,10 @@ import { FlipProp } from "@fortawesome/fontawesome-svg-core";
 import { STATUS_VARIANT } from "../../types";
 export declare enum CUSTOM_ICON_TYPE {
     ARROW_TO_BOTTOM = "arrow-to-bottom",
+    BADGE_CHECK = "badge-check",
     COMMENT_ALT_CHECK = "comment-alt-check",
     DIALOG_CHECK = "dialog-check",
+    FOLDERS = "folders",
     SCROLL = "scroll",
     SPARKLE = "sparkle",
     TRIANGLE_DOWN = "triangle-down",

package/public/components/Icon/Icon.js

@@ -154,8 +154,10 @@ fontawesome_svg_core_1.library.add(faArchive_1.faArchive, faArrowDown_1.faArrowD
 var CUSTOM_ICON_TYPE;
 (function (CUSTOM_ICON_TYPE) {
     CUSTOM_ICON_TYPE["ARROW_TO_BOTTOM"] = "arrow-to-bottom";
+    CUSTOM_ICON_TYPE["BADGE_CHECK"] = "badge-check";
     CUSTOM_ICON_TYPE["COMMENT_ALT_CHECK"] = "comment-alt-check";
     CUSTOM_ICON_TYPE["DIALOG_CHECK"] = "dialog-check";
+    CUSTOM_ICON_TYPE["FOLDERS"] = "folders";
     CUSTOM_ICON_TYPE["SCROLL"] = "scroll";
     CUSTOM_ICON_TYPE["SPARKLE"] = "sparkle";
     CUSTOM_ICON_TYPE["TRIANGLE_DOWN"] = "triangle-down";
@@ -163,8 +165,10 @@ var CUSTOM_ICON_TYPE;
 })(CUSTOM_ICON_TYPE = exports.CUSTOM_ICON_TYPE || (exports.CUSTOM_ICON_TYPE = {}));
 const CustomIcons = {
     [CUSTOM_ICON_TYPE.ARROW_TO_BOTTOM]: svg_1.ArrowToBottom,
+    [CUSTOM_ICON_TYPE.BADGE_CHECK]: svg_1.BadgeCheck,
     [CUSTOM_ICON_TYPE.COMMENT_ALT_CHECK]: svg_1.CommentAltCheck,
     [CUSTOM_ICON_TYPE.DIALOG_CHECK]: svg_1.DialogCheck,
+    [CUSTOM_ICON_TYPE.FOLDERS]: svg_1.Folders,
     [CUSTOM_ICON_TYPE.SCROLL]: svg_1.Scroll,
     [CUSTOM_ICON_TYPE.SPARKLE]: svg_1.Sparkle,
     [CUSTOM_ICON_TYPE.TRIANGLE_DOWN]: svg_1.TriangleDown,

package/public/components/Icon/svg/BadgeCheck.d.ts

@@ -0,0 +1,2 @@
+import { SvgProps } from "../../Svg";
+export declare const BadgeCheck: (props: SvgProps) => JSX.Element;

package/public/components/Icon/svg/BadgeCheck.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BadgeCheck = void 0;
+const react_1 = __importDefault(require("react"));
+const Svg_1 = require("../../Svg");
+const BadgeCheck = (props) => {
+    return (react_1.default.createElement(Svg_1.Svg, Object.assign({ width: "15", height: "15", viewBox: "0 0 15 15", fill: "none" }, props),
+        react_1.default.createElement("path", { d: "M14.5 7.75C14.5 6.73828 13.8438 5.86328 12.9141 5.50781C13.3242 4.63281 13.1602 3.53906 12.4492 2.80078C11.7109 2.08984 10.6172 1.92578 9.74219 2.33594C9.38672 1.40625 8.51172 0.75 7.5 0.75C6.46094 0.75 5.58594 1.40625 5.23047 2.33594C4.35547 1.92578 3.26172 2.08984 2.55078 2.80078C1.8125 3.53906 1.64844 4.63281 2.05859 5.50781C1.12891 5.86328 0.5 6.73828 0.5 7.75C0.5 8.78906 1.12891 9.66406 2.05859 10.0195C1.64844 10.8945 1.8125 11.9883 2.55078 12.6992C3.26172 13.4375 4.35547 13.6016 5.23047 13.1914C5.58594 14.1211 6.46094 14.75 7.5 14.75C8.51172 14.75 9.38672 14.1211 9.74219 13.1914C10.6445 13.6016 11.7109 13.4375 12.4492 12.6992C13.1602 11.9883 13.3242 10.8945 12.9141 10.0195C13.8438 9.66406 14.5 8.78906 14.5 7.75ZM10.5352 6.54688L6.95312 10.1016C6.81641 10.2383 6.625 10.2109 6.51562 10.1016L4.4375 8.02344C4.32812 7.91406 4.32812 7.72266 4.4375 7.58594L5.14844 6.875C5.28516 6.76562 5.47656 6.76562 5.58594 6.90234L6.73438 8.05078L9.38672 5.42578C9.52344 5.28906 9.71484 5.28906 9.82422 5.42578L10.5352 6.13672C10.6445 6.24609 10.6445 6.4375 10.5352 6.54688Z", fill: "currentColor" })));
+};
+exports.BadgeCheck = BadgeCheck;

package/public/components/Icon/svg/Folders.d.ts

@@ -0,0 +1,2 @@
+import { SvgProps } from "../../Svg";
+export declare const Folders: (props: SvgProps) => JSX.Element;

package/public/components/Icon/svg/Folders.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Folders = void 0;
+const react_1 = __importDefault(require("react"));
+const Svg_1 = require("../../Svg");
+const Folders = (props) => {
+    return (react_1.default.createElement(Svg_1.Svg, Object.assign({ width: "18", height: "15", viewBox: "0 0 18 15", fill: "none" }, props),
+        react_1.default.createElement("path", { d: "M2.625 9.4375V3.75H1.3125C0.574219 3.75 0 4.35156 0 5.0625V12.9375C0 13.6758 0.574219 14.25 1.3125 14.25H12.6875C13.3984 14.25 14 13.6758 14 12.9375V11.625H4.8125C3.58203 11.625 2.625 10.668 2.625 9.4375ZM16.1875 2H10.9375L9.1875 0.25H4.8125C4.07422 0.25 3.5 0.851562 3.5 1.5625V9.4375C3.5 10.1758 4.07422 10.75 4.8125 10.75H16.1875C16.8984 10.75 17.5 10.1758 17.5 9.4375V3.3125C17.5 2.60156 16.8984 2 16.1875 2Z", fill: "currentColor" })));
+};
+exports.Folders = Folders;

package/public/components/Icon/svg/index.d.ts

@@ -1,6 +1,8 @@
 export * from "./ArrowToBottom";
+export * from "./BadgeCheck";
 export * from "./CommentAltCheck";
 export * from "./DialogCheck";
+export * from "./Folders";
 export * from "./Scroll";
 export * from "./Sparkle";
 export * from "./Triangle";

package/public/components/Icon/svg/index.js

@@ -11,8 +11,10 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./ArrowToBottom"), exports);
+__exportStar(require("./BadgeCheck"), exports);
 __exportStar(require("./CommentAltCheck"), exports);
 __exportStar(require("./DialogCheck"), exports);
+__exportStar(require("./Folders"), exports);
 __exportStar(require("./Scroll"), exports);
 __exportStar(require("./Sparkle"), exports);
 __exportStar(require("./Triangle"), exports);