@conveyorhq/arrow-ds 1.23.2 → 1.26.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@conveyorhq/arrow-ds",
   "author": "Conveyor",
   "license": "MIT",
-  "version": "1.23.2",
+  "version": "1.26.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/Icon/Icon.d.ts

@@ -3,6 +3,7 @@ import { FlipProp } from "@fortawesome/fontawesome-svg-core";
 import { STATUS_VARIANT } from "../../types";
 export declare enum CUSTOM_ICON_TYPE {
     ARROW_TO_BOTTOM = "arrow-to-bottom",
+    COMMENT_ALT_CHECK = "comment-alt-check",
     DIALOG_CHECK = "dialog-check",
     SCROLL = "scroll",
     SPARKLE = "sparkle",
@@ -25,6 +26,7 @@ export declare enum ICON_TYPE {
     CALCULATOR = "calculator",
     CARET_DOWN = "caret-down",
     CARET_UP = "caret-up",
+    CHART_LINE = "chart-line",
     CHECK = "check",
     CHECK_CIRCLE = "check-circle",
     CHEVRON_DOWN = "chevron-down",

package/public/components/Icon/Icon.js

@@ -53,6 +53,7 @@ const faCalculator_1 = require("@fortawesome/free-solid-svg-icons/faCalculator")
 const faCalendar_1 = require("@fortawesome/free-solid-svg-icons/faCalendar");
 const faCaretDown_1 = require("@fortawesome/free-solid-svg-icons/faCaretDown");
 const faCaretUp_1 = require("@fortawesome/free-solid-svg-icons/faCaretUp");
+const faChartLine_1 = require("@fortawesome/free-solid-svg-icons/faChartLine");
 const faCheck_1 = require("@fortawesome/free-solid-svg-icons/faCheck");
 const faCheckCircle_2 = require("@fortawesome/free-solid-svg-icons/faCheckCircle");
 const faChevronDown_1 = require("@fortawesome/free-solid-svg-icons/faChevronDown");
@@ -141,10 +142,11 @@ const status_1 = require("../../contexts/status");
 const types_1 = require("../../types");
 const utilities_1 = require("../../utilities");
 const cn = utilities_1.bemHOF("Icon");
-fontawesome_svg_core_1.library.add(faArchive_1.faArchive, faArrowDown_1.faArrowDown, faArrowLeft_1.faArrowLeft, faArrowRight_1.faArrowRight, faArrowUp_1.faArrowUp, faBackward_1.faBackward, faBan_1.faBan, faBatteryHalf_1.faBatteryHalf, faBed_1.faBed, faBell_1.faBell, faBolt_1.faBolt, faCalculator_1.faCalculator, faCalendar_1.faCalendar, faCaretDown_1.faCaretDown, faCaretUp_1.faCaretUp, faCheck_1.faCheck, faCheckCircle_2.faCheckCircle, faCheckCircle_1.faCheckCircle, faChevronDown_1.faChevronDown, faChevronLeft_1.faChevronLeft, faChevronRight_1.faChevronRight, faChevronUp_1.faChevronUp, faCircle_2.faCircle, faCircleNotch_1.faCircleNotch, faCircle_1.faCircle, faClipboard_1.faClipboard, faClock_1.faClock, faClock_2.faClock, faCog_1.faCog, faColumns_1.faColumns, faCommentAlt_1.faCommentAlt, faCompress_1.faCompress, faCrown_1.faCrown, faEllipsisH_1.faEllipsisH, faEllipsisV_1.faEllipsisV, faEnvelope_1.faEnvelope, faExclamationCircle_1.faExclamationCircle, faExclamationTriangle_1.faExclamationTriangle, faExpand_1.faExpand, faExternalLinkAlt_1.faExternalLinkAlt, faExternalLinkSquareAlt_1.faExternalLinkSquareAlt, faEye_1.faEye, faEyeSlash_1.faEyeSlash, faFastBackward_1.faFastBackward, faFastForward_1.faFastForward, faFileAlt_1.faFileAlt, faFileAlt_2.faFileAlt, faFileImport_1.faFileImport, faFileSignature_1.faFileSignature, faFilter_1.faFilter, faFlag_1.faFlag, faFolder_1.faFolder, faForward_1.faForward, faGripLines_1.faGripLines, faGripLinesVertical_1.faGripLinesVertical, faHashtag_1.faHashtag, faInfoCircle_1.faInfoCircle, faKey_1.faKey, faKeyboard_1.faKeyboard, faLayerGroup_1.faLayerGroup, faLevelUpAlt_1.faLevelUpAlt, faListUl_1.faListUl, faLock_1.faLock, faLongArrowAltRight_1.faLongArrowAltRight, faMagic_1.faMagic, faMapSigns_1.faMapSigns, faMinus_1.faMinus, faMousePointer_1.faMousePointer, faPaperclip_1.faPaperclip, faPause_1.faPause, faPen_1.faPen, faPlay_1.faPlay, faPlus_1.faPlus, faPlusCircle_1.faPlusCircle, faPooStorm_1.faPooStorm, faQuestion_1.faQuestion, faQuestionCircle_2.faQuestionCircle, faQuestionCircle_1.faQuestionCircle, faScroll_1.faScroll, faSearch_1.faSearch, faShareAlt_1.faShareAlt, faShieldAlt_1.faShieldAlt, faSignOutAlt_1.faSignOutAlt, faSignature_1.faSignature, faSlidersH_1.faSlidersH, faSort_1.faSort, faSortDown_1.faSortDown, faSortUp_1.faSortUp, faSpinner_1.faSpinner, faSquare_1.faSquare, faStar_1.faStar, faStar_2.faStar, faSync_1.faSync, faTasks_1.faTasks, faThLarge_1.faThLarge, faThumbsDown_1.faThumbsDown, faThumbsDown_2.faThumbsDown, faThumbsUp_1.faThumbsUp, faThumbsUp_2.faThumbsUp, faTicketAlt_1.faTicketAlt, faTimes_1.faTimes, faTimesCircle_1.faTimesCircle, faTrash_1.faTrash, faUser_2.faUser, faUserAstronaut_1.faUserAstronaut, faUserPlus_1.faUserPlus, faUser_1.faUser, faUsers_1.faUsers, faUserFriends_1.faUserFriends);
+fontawesome_svg_core_1.library.add(faArchive_1.faArchive, faArrowDown_1.faArrowDown, faArrowLeft_1.faArrowLeft, faArrowRight_1.faArrowRight, faArrowUp_1.faArrowUp, faBackward_1.faBackward, faBan_1.faBan, faBatteryHalf_1.faBatteryHalf, faBed_1.faBed, faBell_1.faBell, faBolt_1.faBolt, faCalculator_1.faCalculator, faCalendar_1.faCalendar, faCaretDown_1.faCaretDown, faCaretUp_1.faCaretUp, faChartLine_1.faChartLine, faCheck_1.faCheck, faCheckCircle_2.faCheckCircle, faCheckCircle_1.faCheckCircle, faChevronDown_1.faChevronDown, faChevronLeft_1.faChevronLeft, faChevronRight_1.faChevronRight, faChevronUp_1.faChevronUp, faCircle_2.faCircle, faCircleNotch_1.faCircleNotch, faCircle_1.faCircle, faClipboard_1.faClipboard, faClock_1.faClock, faClock_2.faClock, faCog_1.faCog, faColumns_1.faColumns, faCommentAlt_1.faCommentAlt, faCompress_1.faCompress, faCrown_1.faCrown, faEllipsisH_1.faEllipsisH, faEllipsisV_1.faEllipsisV, faEnvelope_1.faEnvelope, faExclamationCircle_1.faExclamationCircle, faExclamationTriangle_1.faExclamationTriangle, faExpand_1.faExpand, faExternalLinkAlt_1.faExternalLinkAlt, faExternalLinkSquareAlt_1.faExternalLinkSquareAlt, faEye_1.faEye, faEyeSlash_1.faEyeSlash, faFastBackward_1.faFastBackward, faFastForward_1.faFastForward, faFileAlt_1.faFileAlt, faFileAlt_2.faFileAlt, faFileImport_1.faFileImport, faFileSignature_1.faFileSignature, faFilter_1.faFilter, faFlag_1.faFlag, faFolder_1.faFolder, faForward_1.faForward, faGripLines_1.faGripLines, faGripLinesVertical_1.faGripLinesVertical, faHashtag_1.faHashtag, faInfoCircle_1.faInfoCircle, faKey_1.faKey, faKeyboard_1.faKeyboard, faLayerGroup_1.faLayerGroup, faLevelUpAlt_1.faLevelUpAlt, faListUl_1.faListUl, faLock_1.faLock, faLongArrowAltRight_1.faLongArrowAltRight, faMagic_1.faMagic, faMapSigns_1.faMapSigns, faMinus_1.faMinus, faMousePointer_1.faMousePointer, faPaperclip_1.faPaperclip, faPause_1.faPause, faPen_1.faPen, faPlay_1.faPlay, faPlus_1.faPlus, faPlusCircle_1.faPlusCircle, faPooStorm_1.faPooStorm, faQuestion_1.faQuestion, faQuestionCircle_2.faQuestionCircle, faQuestionCircle_1.faQuestionCircle, faScroll_1.faScroll, faSearch_1.faSearch, faShareAlt_1.faShareAlt, faShieldAlt_1.faShieldAlt, faSignOutAlt_1.faSignOutAlt, faSignature_1.faSignature, faSlidersH_1.faSlidersH, faSort_1.faSort, faSortDown_1.faSortDown, faSortUp_1.faSortUp, faSpinner_1.faSpinner, faSquare_1.faSquare, faStar_1.faStar, faStar_2.faStar, faSync_1.faSync, faTasks_1.faTasks, faThLarge_1.faThLarge, faThumbsDown_1.faThumbsDown, faThumbsDown_2.faThumbsDown, faThumbsUp_1.faThumbsUp, faThumbsUp_2.faThumbsUp, faTicketAlt_1.faTicketAlt, faTimes_1.faTimes, faTimesCircle_1.faTimesCircle, faTrash_1.faTrash, faUser_2.faUser, faUserAstronaut_1.faUserAstronaut, faUserPlus_1.faUserPlus, faUser_1.faUser, faUsers_1.faUsers, faUserFriends_1.faUserFriends);
 var CUSTOM_ICON_TYPE;
 (function (CUSTOM_ICON_TYPE) {
     CUSTOM_ICON_TYPE["ARROW_TO_BOTTOM"] = "arrow-to-bottom";
+    CUSTOM_ICON_TYPE["COMMENT_ALT_CHECK"] = "comment-alt-check";
     CUSTOM_ICON_TYPE["DIALOG_CHECK"] = "dialog-check";
     CUSTOM_ICON_TYPE["SCROLL"] = "scroll";
     CUSTOM_ICON_TYPE["SPARKLE"] = "sparkle";
@@ -153,6 +155,7 @@ 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.COMMENT_ALT_CHECK]: svg_1.CommentAltCheck,
     [CUSTOM_ICON_TYPE.DIALOG_CHECK]: svg_1.DialogCheck,
     [CUSTOM_ICON_TYPE.SCROLL]: svg_1.Scroll,
     [CUSTOM_ICON_TYPE.SPARKLE]: svg_1.Sparkle,
@@ -176,6 +179,7 @@ var ICON_TYPE;
     ICON_TYPE["CALCULATOR"] = "calculator";
     ICON_TYPE["CARET_DOWN"] = "caret-down";
     ICON_TYPE["CARET_UP"] = "caret-up";
+    ICON_TYPE["CHART_LINE"] = "chart-line";
     ICON_TYPE["CHECK"] = "check";
     ICON_TYPE["CHECK_CIRCLE"] = "check-circle";
     ICON_TYPE["CHEVRON_DOWN"] = "chevron-down";

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

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

package/public/components/Icon/svg/CommentAltCheck.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.CommentAltCheck = void 0;
+const react_1 = __importDefault(require("react"));
+const Svg_1 = require("../../Svg");
+const CommentAltCheck = (props) => {
+    return (react_1.default.createElement(Svg_1.Svg, Object.assign({ width: "30", height: "32", viewBox: "0 0 30 32", fill: "none" }, props),
+        react_1.default.createElement("path", { d: "M26.133 1.067h-22.4c-2.1 0-3.733 1.692-3.733 3.733v16.8c0 2.1 1.633 3.733 3.733 3.733h5.6v4.9c0 0.583 0.642 0.933 1.108 0.583l7.292-5.483h8.4c2.042 0 3.733-1.633 3.733-3.733v-16.8c0-2.042-1.692-3.733-3.733-3.733zM21.583 10.633l-7.642 7.583c-0.292 0.292-0.7 0.292-0.933 0l-4.433-4.433c-0.233-0.233-0.233-0.642 0-0.933l1.517-1.517c0.292-0.233 0.7-0.233 0.933 0.058l2.45 2.45 5.658-5.6c0.292-0.292 0.7-0.292 0.933 0l1.517 1.517c0.233 0.233 0.233 0.642 0 0.875z", fill: "currentColor" })));
+};
+exports.CommentAltCheck = CommentAltCheck;

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

@@ -1,4 +1,5 @@
 export * from "./ArrowToBottom";
+export * from "./CommentAltCheck";
 export * from "./DialogCheck";
 export * from "./Scroll";
 export * from "./Sparkle";

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

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

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 });