@conveyorhq/arrow-ds 1.24.1 → 1.25.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@conveyorhq/arrow-ds",
   "author": "Conveyor",
   "license": "MIT",
-  "version": "1.24.1",
+  "version": "1.25.0",
   "description": "Arrow Design System",
   "repository": "https://github.com/conveyor/arrow-ds",
   "publishConfig": {
@@ -99,11 +99,11 @@
     "@babel/preset-typescript": "^7.7.2",
     "@commitlint/cli": "^13.0.0",
     "@commitlint/config-conventional": "^13.0.0",
-    "@storybook/addon-actions": "^6.3.0",
-    "@storybook/addon-docs": "^6.3.0",
+    "@storybook/addon-actions": "^6.4.8",
+    "@storybook/addon-docs": "^6.4.8",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/react": "^6.3.0",
-    "@storybook/theming": "^6.3.0",
+    "@storybook/react": "^6.4.8",
+    "@storybook/theming": "^6.4.8",
     "@types/classnames": "^2.2.9",
     "@types/codemirror": "^0.0.91",
     "@types/d3-ease": "^1.0.9",
@@ -120,7 +120,7 @@
     "@types/webpack": "^5.0.0",
     "@typescript-eslint/eslint-plugin": "^4.18.0",
     "@typescript-eslint/parser": "^4.18.0",
-    "autoprefixer": "^10.2.5",
+    "autoprefixer": "^10.4.0",
     "babel-loader": "^8.0.6",
     "babel-plugin-inline-react-svg": "^2.0.0",
     "copyfiles": "^2.4.1",
@@ -139,16 +139,16 @@
     "fs-extra": "^8.1.0",
     "husky": "^3.1.0",
     "plop": "^2.5.3",
-    "postcss": "^8.2.8",
-    "postcss-cli": "^8.3.1",
-    "postcss-import": "^12.0.1",
+    "postcss": "^8.4.4",
+    "postcss-cli": "^9.0.2",
+    "postcss-import": "^14.0.2",
     "prettier": "^2.2.1",
     "react": "^16.11.0",
     "react-docgen-typescript-loader": "^3.6.0",
     "react-dom": "^16.11.0",
     "react-is": "^16.12.0",
     "regenerator-runtime": "^0.13.3",
-    "semantic-release": "^17.0.8",
+    "semantic-release": "^18.0.1",
     "tailwindcss": "^2.0.3",
     "ts-loader": "^6.2.1",
     "typescript": "^4.2.3",

package/public/components/Snackbar/Snackbar.d.ts

@@ -1,23 +1,15 @@
 import { Action } from "../../types";
-import { IconType } from "../Icon";
-interface SharedProps {
-    message: string;
-    action?: Action;
-    icon?: IconType;
-    duration?: number | null;
-    disableClose?: boolean;
-}
-interface ShowSnackbarProps extends SharedProps {
-    className?: string;
-}
-interface SnackbarProps extends ShowSnackbarProps {
-    onClose: () => void;
-    id?: string;
-}
-interface SnackbarHookProps extends SharedProps {
-    isVisible: boolean;
-}
-export declare const Snackbar: ({ message, action, icon, id, className, onClose, disableClose, }: SnackbarProps) => JSX.Element;
-export declare const showSnackbar: ({ message, action, icon, duration, className, disableClose, }: ShowSnackbarProps) => any;
-export declare const useSnackbar: ({ message, action, isVisible, icon, duration, disableClose, }: SnackbarHookProps) => void;
-export {};
+import { SnackbarProps, SnackbarRootProps, SnackbarIconProps, SnackbarTextProps } from "./types";
+export declare const SnackbarRoot: ({ children, className, ...rest }: SnackbarRootProps) => JSX.Element;
+export declare const SnackbarIcon: ({ icon }: SnackbarIconProps) => JSX.Element;
+export declare const SnackbarText: ({ children }: SnackbarTextProps) => JSX.Element;
+export declare const SnackbarAction: ({ label, onClick, href, external }: Action) => JSX.Element;
+export declare const SnackbarCloseButton: () => JSX.Element;
+export declare const Snackbar: {
+    ({ message, action, icon, className, disableClose, ...rest }: SnackbarProps): JSX.Element;
+    Provider: ({ component, id, onClose, duration, position, ...rest }: import("./types").SnackbarProviderProps) => JSX.Element;
+    Root: ({ children, className, ...rest }: SnackbarRootProps) => JSX.Element;
+    Text: ({ children }: SnackbarTextProps) => JSX.Element;
+    Action: ({ label, onClick, href, external }: Action) => JSX.Element;
+    CloseButton: () => JSX.Element;
+};

package/public/components/Snackbar/Snackbar.js

@@ -1,30 +1,10 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSnackbar = exports.showSnackbar = exports.Snackbar = void 0;
-const react_1 = __importStar(require("react"));
-const toasted_notes_1 = __importDefault(require("toasted-notes"));
+exports.Snackbar = exports.SnackbarCloseButton = exports.SnackbarAction = exports.SnackbarText = exports.SnackbarIcon = exports.SnackbarRoot = void 0;
+const react_1 = __importDefault(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const bem_1 = require("../../utilities/bem");
 const Box_1 = require("../Box");
@@ -32,79 +12,42 @@ const CloseButton_1 = require("../CloseButton");
 const Icon_1 = require("../Icon");
 const Link_1 = require("../Link");
 const Text_1 = require("../Text");
+const context_1 = require("./context");
+const SnackbarProvider_1 = require("./SnackbarProvider");
 const cn = bem_1.bemHOF("Snackbar");
-const POSITION = "bottom-left";
-const hideSnackbar = (id) => toasted_notes_1.default.close(id, POSITION);
+const SnackbarRoot = ({ children, className, ...rest }) => (react_1.default.createElement(Box_1.Box, Object.assign({ className: classnames_1.default(cn(), className) }, rest), children));
+exports.SnackbarRoot = SnackbarRoot;
+const SnackbarIcon = ({ icon }) => (react_1.default.createElement(Icon_1.Icon, { icon: icon, spin: icon === Icon_1.ICON_TYPE.SPINNER || icon === Icon_1.ICON_TYPE.CIRCLE_NOTCH, className: cn({ e: "icon" }) }));
+exports.SnackbarIcon = SnackbarIcon;
+const SnackbarText = ({ children }) => (react_1.default.createElement(Text_1.Text, null, children));
+exports.SnackbarText = SnackbarText;
 const SnackbarAction = ({ label, onClick, href, external }) => {
     const Component = typeof onClick === "function" ? "button" : "a";
     const type = Component === "button" ? "button" : undefined;
     return (react_1.default.createElement(Link_1.Link, { as: Component, type: type, className: cn({ e: "action" }), onClick: onClick, href: href, target: external ? "_blank" : undefined }, label));
 };
-const Snackbar = ({ message, action, icon, id, className, onClose, disableClose, }) => {
-    const spin = icon === Icon_1.ICON_TYPE.SPINNER || icon === Icon_1.ICON_TYPE.CIRCLE_NOTCH;
-    const iconProps = icon
-        ? {
-            icon,
-            spin,
-        }
-        : undefined;
-    return (react_1.default.createElement(Box_1.Box, { className: classnames_1.default(cn(), className), id: id },
-        iconProps && react_1.default.createElement(Icon_1.Icon, Object.assign({}, iconProps, { className: cn({ e: "icon" }) })),
-        react_1.default.createElement(Text_1.Text, null, message),
-        action && action.label && (react_1.default.createElement(SnackbarAction, Object.assign({}, action, { onClick: () => {
+exports.SnackbarAction = SnackbarAction;
+const SnackbarCloseButton = () => {
+    const { onClose } = context_1.useSnackbarContext();
+    return (react_1.default.createElement(CloseButton_1.CloseButton, { className: classnames_1.default(cn({ e: "dismiss" })), onClick: onClose }));
+};
+exports.SnackbarCloseButton = SnackbarCloseButton;
+const Snackbar = ({ message, action, icon, className, disableClose, ...rest }) => {
+    const { onClose } = context_1.useSnackbarContext();
+    return (react_1.default.createElement(exports.SnackbarRoot, Object.assign({ className: className }, rest),
+        icon && react_1.default.createElement(exports.SnackbarIcon, { icon: icon }),
+        message && react_1.default.createElement(exports.SnackbarText, null, message),
+        action && action.label && (react_1.default.createElement(exports.SnackbarAction, Object.assign({}, action, { onClick: () => {
                 if (action.onClick) {
                     action.onClick();
                 }
                 onClose();
             } }))),
-        !disableClose && (react_1.default.createElement(CloseButton_1.CloseButton, { className: classnames_1.default(cn({ e: "dismiss" })), onClick: onClose }))));
+        !disableClose && react_1.default.createElement(exports.SnackbarCloseButton, null)));
 };
 exports.Snackbar = Snackbar;
-const showSnackbar = ({ message, action, icon, duration = null, className, disableClose, }) => toasted_notes_1.default.notify(({ onClose, id }) => {
-    return (react_1.default.createElement(exports.Snackbar, Object.assign({}, {
-        message,
-        onClose,
-        action,
-        icon,
-        className,
-        disableClose,
-        id: `snackbar-component-${id}`,
-    })));
-}, {
-    position: POSITION,
-    duration,
-});
-exports.showSnackbar = showSnackbar;
-const useSnackbar = ({ message, action, isVisible, icon, duration, disableClose, }) => {
-    const [snackbar, setSnackbar] = react_1.useState({
-        id: 0,
-        position: POSITION,
-    });
-    const [wasViewed, setWasViewed] = react_1.useState(false);
-    react_1.useEffect(() => {
-        if (isVisible && !wasViewed) {
-            setSnackbar(exports.showSnackbar({
-                message,
-                action,
-                icon,
-                duration,
-                disableClose,
-            }));
-            setWasViewed(true);
-        }
-        if (!isVisible && wasViewed) {
-            hideSnackbar(snackbar.id);
-            setWasViewed(false);
-        }
-    }, [
-        message,
-        action,
-        isVisible,
-        icon,
-        duration,
-        disableClose,
-        snackbar,
-        wasViewed,
-    ]);
-};
-exports.useSnackbar = useSnackbar;
+exports.Snackbar.Provider = SnackbarProvider_1.SnackbarProvider;
+exports.Snackbar.Root = exports.SnackbarRoot;
+exports.Snackbar.Text = exports.SnackbarText;
+exports.Snackbar.Action = exports.SnackbarAction;
+exports.Snackbar.CloseButton = exports.SnackbarCloseButton;

package/public/components/Snackbar/SnackbarProvider.d.ts

@@ -0,0 +1,2 @@
+import { SnackbarProviderProps } from "./types";
+export declare const SnackbarProvider: ({ component, id, onClose, duration, position, ...rest }: SnackbarProviderProps) => JSX.Element;

package/public/components/Snackbar/SnackbarProvider.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SnackbarProvider = void 0;
+const react_1 = __importDefault(require("react"));
+const Box_1 = require("../Box");
+const constants_1 = require("./constants");
+const context_1 = require("./context");
+const SnackbarProvider = ({ component, id = constants_1.DEFAULT_SNACKBAR_ID, onClose, duration, position, ...rest }) => {
+    const componentId = "snackbar-provider";
+    return (react_1.default.createElement(context_1.SnackbarContext.Provider, { value: {
+            id,
+            onClose,
+            duration,
+            position,
+        } },
+        react_1.default.createElement(Box_1.Box, Object.assign({ id: `${componentId}-${id}`, "data-component": componentId }, rest), component)));
+};
+exports.SnackbarProvider = SnackbarProvider;

package/public/components/Snackbar/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const DEFAULT_SNACKBAR_ID = 0;
+export declare const DEFAULT_SNACKBAR_POSITION = "bottom-left";

package/public/components/Snackbar/constants.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_SNACKBAR_POSITION = exports.DEFAULT_SNACKBAR_ID = void 0;
+exports.DEFAULT_SNACKBAR_ID = 0;
+exports.DEFAULT_SNACKBAR_POSITION = "bottom-left";

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

@@ -0,0 +1,4 @@
+import { Context } from "react";
+import { SnackbarContextProps } from "./types";
+export declare const SnackbarContext: Context<SnackbarContextProps>;
+export declare function useSnackbarContext(): SnackbarContextProps;

package/public/components/Snackbar/context.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSnackbarContext = exports.SnackbarContext = void 0;
+const react_1 = require("react");
+const constants_1 = require("./constants");
+const defaultContext = {
+    id: constants_1.DEFAULT_SNACKBAR_ID,
+    onClose: () => { },
+};
+exports.SnackbarContext = react_1.createContext(defaultContext);
+function useSnackbarContext() {
+    const context = react_1.useContext(exports.SnackbarContext) || {
+        ...defaultContext,
+    };
+    return context;
+}
+exports.useSnackbarContext = useSnackbarContext;

package/public/components/Snackbar/helpers.d.ts

@@ -0,0 +1,3 @@
+import { HideSnackbarProps, ShowSnackbarProps } from "./types";
+export declare const hideSnackbar: ({ id, position, }: HideSnackbarProps) => void;
+export declare const showSnackbar: ({ component, message, duration, position, ...rest }: ShowSnackbarProps) => any;

package/public/components/Snackbar/helpers.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.showSnackbar = exports.hideSnackbar = void 0;
+const react_1 = __importDefault(require("react"));
+const toasted_notes_1 = __importDefault(require("toasted-notes"));
+const constants_1 = require("./constants");
+const Snackbar_1 = require("./Snackbar");
+const SnackbarProvider_1 = require("./SnackbarProvider");
+const hideSnackbar = ({ id, position = constants_1.DEFAULT_SNACKBAR_POSITION, }) => toasted_notes_1.default.close(id, position);
+exports.hideSnackbar = hideSnackbar;
+const showSnackbar = ({ component, message, duration = null, position = constants_1.DEFAULT_SNACKBAR_POSITION, ...rest }) => {
+    return toasted_notes_1.default.notify(({ onClose, id }) => {
+        return (react_1.default.createElement(SnackbarProvider_1.SnackbarProvider, Object.assign({}, {
+            id,
+            onClose,
+            duration,
+            position,
+            component: message ? (react_1.default.createElement(Snackbar_1.Snackbar, Object.assign({}, {
+                message,
+                ...rest,
+            }))) : (component),
+        })));
+    }, {
+        position,
+        duration,
+    });
+};
+exports.showSnackbar = showSnackbar;

package/public/components/Snackbar/hooks.d.ts

@@ -0,0 +1,2 @@
+import { SnackbarHookProps } from "./types";
+export declare const useSnackbar: ({ component, message, position, duration, isVisible, ...rest }: SnackbarHookProps) => void;

package/public/components/Snackbar/hooks.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSnackbar = void 0;
+const react_1 = require("react");
+const constants_1 = require("./constants");
+const helpers_1 = require("./helpers");
+const useSnackbar = ({ component, message, position, duration, isVisible, ...rest }) => {
+    const [snackbar, setSnackbar] = react_1.useState({
+        id: constants_1.DEFAULT_SNACKBAR_ID,
+        position: constants_1.DEFAULT_SNACKBAR_POSITION,
+    });
+    const [wasViewed, setWasViewed] = react_1.useState(false);
+    react_1.useEffect(() => {
+        if (isVisible && !wasViewed) {
+            if (message) {
+                setSnackbar(helpers_1.showSnackbar({
+                    message,
+                    position,
+                    duration,
+                    ...rest,
+                }));
+            }
+            else {
+                setSnackbar(helpers_1.showSnackbar({
+                    component,
+                    position,
+                    duration,
+                }));
+            }
+            setWasViewed(true);
+        }
+        if (!isVisible && wasViewed) {
+            helpers_1.hideSnackbar({ id: snackbar.id, position });
+            setWasViewed(false);
+        }
+    }, [
+        component,
+        message,
+        position,
+        duration,
+        isVisible,
+        snackbar.id,
+        wasViewed,
+        rest,
+    ]);
+};
+exports.useSnackbar = useSnackbar;

package/public/components/Snackbar/index.d.ts

@@ -1 +1,7 @@
+export * from "./constants";
+export * from "./context";
+export * from "./helpers";
+export * from "./hooks";
 export * from "./Snackbar";
+export * from "./SnackbarProvider";
+export * from "./types";

package/public/components/Snackbar/index.js

@@ -10,4 +10,10 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./constants"), exports);
+__exportStar(require("./context"), exports);
+__exportStar(require("./helpers"), exports);
+__exportStar(require("./hooks"), exports);
 __exportStar(require("./Snackbar"), exports);
+__exportStar(require("./SnackbarProvider"), exports);
+__exportStar(require("./types"), exports);

package/public/components/Snackbar/types.d.ts

@@ -0,0 +1,43 @@
+/// <reference types="react" />
+import { Action, RequiredToasterProps, ToasterPositionOptions } from "../../types";
+import { BoxProps } from "../Box";
+import { IconType } from "../Icon";
+export declare type SnackbarToasterProps = RequiredToasterProps;
+declare type SnackbarPosition = Extract<ToasterPositionOptions, "bottom-left" | "bottom-right">;
+declare type SnackbarSharedProps = {
+    position?: SnackbarPosition;
+    duration?: number | null;
+};
+declare type SnackbarWithComponentProps = {
+    component: React.ReactNode;
+    message?: never;
+};
+declare type SnackbarWithMessageProps = {
+    message: React.ReactNode;
+    component?: never;
+};
+declare type SnackbarIsVisibleProp = {
+    isVisible: boolean;
+};
+declare type SnackbarOtherProps = {
+    action?: Action;
+    icon?: IconType;
+    disableClose?: boolean;
+};
+export declare type SnackbarProps = Omit<SnackbarWithMessageProps, "component"> & SnackbarOtherProps & SnackbarSharedProps & BoxProps;
+export declare type SnackbarRootProps = BoxProps;
+export declare type SnackbarIconProps = Pick<SnackbarOtherProps, "icon">;
+export declare type SnackbarTextProps = {
+    children: React.ReactNode;
+};
+export declare type SnackbarStateProps = Pick<SnackbarToasterProps, "id"> & Pick<SnackbarSharedProps, "position">;
+export declare type SnackbarContextProps = SnackbarToasterProps & SnackbarSharedProps;
+export declare type SnackbarProviderProps = SnackbarToasterProps & SnackbarSharedProps & Omit<SnackbarWithComponentProps, "message">;
+declare type ShowSnackbarWithMessageProps = SnackbarWithMessageProps & SnackbarOtherProps & SnackbarSharedProps & BoxProps;
+declare type ShowSnackbarWithComponentProps = SnackbarWithComponentProps & SnackbarSharedProps;
+export declare type ShowSnackbarProps = ShowSnackbarWithMessageProps | ShowSnackbarWithComponentProps;
+export declare type HideSnackbarProps = SnackbarStateProps;
+declare type SnackbarWithMessageHookProps = SnackbarWithMessageProps & SnackbarOtherProps & SnackbarSharedProps & SnackbarIsVisibleProp & BoxProps;
+declare type SnackbarWithComponentHookProps = SnackbarWithComponentProps & SnackbarSharedProps & SnackbarIsVisibleProp;
+export declare type SnackbarHookProps = SnackbarWithMessageHookProps | SnackbarWithComponentHookProps;
+export {};

package/public/components/Snackbar/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/public/css/styles.css

@@ -76,6 +76,7 @@ Use a more readable tab size (opinionated).
 */
 
 :root {
+  -moz-tab-size: 4;
   tab-size: 4;
 }
 
@@ -3809,6 +3810,7 @@ override built-in Image component classes */
   position: relative;
   z-index: 10;
   width: -webkit-fit-content;
+  width: -moz-fit-content;
   width: fit-content;
 }
 
@@ -5314,6 +5316,7 @@ override built-in Image component classes */
   transition-duration: 200ms;
   height: 22px;
   width: -webkit-fit-content;
+  width: -moz-fit-content;
   width: fit-content;
 }
 
@@ -6673,6 +6676,7 @@ override built-in Image component classes */
   --tw-border-opacity: 1;
   border-color: rgba(222, 231, 238, var(--tw-border-opacity));
   border-style: solid;
+  position: -webkit-sticky;
   position: sticky;
   top: 0px;
   z-index: 19;
@@ -6923,6 +6927,7 @@ override built-in Image component classes */
 }
 
 .ads-Table.ads-Table--sticky-column .ads-TableCell:first-of-type, .ads-Table.ads-Table--sticky-column .ads-TableHeaderCell:first-of-type {
+  position: -webkit-sticky;
   position: sticky;
   left: 0px;
   z-index: 10;
@@ -6931,6 +6936,7 @@ override built-in Image component classes */
 .ads-Table.ads-Table--sticky-column.ads-Table--batch-actions
   .ads-TableCell:nth-of-type(2), .ads-Table.ads-Table--sticky-column.ads-Table--batch-actions
   .ads-TableHeaderCell:nth-of-type(2) {
+  position: -webkit-sticky;
   position: sticky;
   z-index: 10;
 }
@@ -7097,6 +7103,7 @@ override built-in Image component classes */
   padding-left: 6px;
   padding-right: 6px;
   width: -webkit-fit-content;
+  width: -moz-fit-content;
   width: fit-content;
 }
 
@@ -28209,6 +28216,7 @@ override built-in Image component classes */
 }
 
 .sticky {
+  position: -webkit-sticky;
   position: sticky;
 }