@conveyorhq/arrow-ds 2.0.0-beta.6 → 2.0.0-beta.7

package/public/components/Modal/Modal.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { ModalProps as RoModalProps } from "react-overlays/Modal";
 import { BoxProps } from "../Box";
+import { CloseButtonProps } from "../CloseButton";
 import { StackProps } from "../Stack";
 export declare enum MODAL_SIZE {
     DEFAULT = "default",
@@ -20,6 +21,7 @@ export interface ModalProps extends RoModalProps {
     size?: MODAL_SIZE;
     center?: boolean;
     disableBackdrop?: boolean;
+    noHeader?: boolean;
 }
 export interface ModalBodyProps extends BoxProps {
     padded?: boolean;
@@ -30,15 +32,19 @@ export interface ModalFooterMultiStepProps extends BoxProps {
     leftButtonLabel?: string;
     rightButtonLabel?: string;
 }
+export declare const ModalHeader: (props: BoxProps) => JSX.Element;
 export declare const ModalBody: (props: ModalBodyProps) => JSX.Element;
 export declare const ModalTabs: (props: StackProps) => JSX.Element;
 export declare const ModalFooter: (props: BoxProps) => JSX.Element;
 export declare const ModalFooterMultiStep: ({ steps, currentStep, leftButtonLabel, rightButtonLabel, children, className, ...rest }: ModalFooterMultiStepProps) => JSX.Element;
+export declare const ModalCloseButton: ({ className, ...rest }: CloseButtonProps) => JSX.Element;
 export declare const Modal: {
     (props: ModalProps): JSX.Element;
     Root: any;
     Tabs: (props: StackProps) => JSX.Element;
+    Header: (props: BoxProps) => JSX.Element;
     Body: (props: ModalBodyProps) => JSX.Element;
     Footer: (props: BoxProps) => JSX.Element;
     FooterMultiStep: ({ steps, currentStep, leftButtonLabel, rightButtonLabel, children, className, ...rest }: ModalFooterMultiStepProps) => JSX.Element;
+    CloseButton: ({ className, ...rest }: CloseButtonProps) => JSX.Element;
 };

package/public/components/Modal/Modal.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Modal = exports.ModalFooterMultiStep = exports.ModalFooter = exports.ModalTabs = exports.ModalBody = exports.MODAL_SIZE = void 0;
+exports.Modal = exports.ModalCloseButton = exports.ModalFooterMultiStep = exports.ModalFooter = exports.ModalTabs = exports.ModalBody = exports.ModalHeader = exports.MODAL_SIZE = void 0;
 const react_1 = __importDefault(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const Modal_1 = __importDefault(require("react-overlays/Modal"));
@@ -15,6 +15,7 @@ const bem_1 = require("../../utilities/bem");
 const Tab_1 = require("../Tab");
 const Heading_1 = require("../Heading");
 const Overlay_1 = require("../Overlay");
+const context_1 = require("./context");
 const cn = "Modal";
 var MODAL_SIZE;
 (function (MODAL_SIZE) {
@@ -26,6 +27,7 @@ const ModalHeader = (props) => {
     const { className, ...rest } = props;
     return (react_1.default.createElement(Flex_1.Flex, Object.assign({ className: classnames_1.default([bem_1.bem(cn, { e: "header" }), className]) }, rest)));
 };
+exports.ModalHeader = ModalHeader;
 const ModalBody = (props) => {
     const { padded = true, className, ...rest } = props;
     return (react_1.default.createElement(Box_1.Box, Object.assign({ className: classnames_1.default([
@@ -60,30 +62,38 @@ const ModalFooterMultiStep = ({ steps, currentStep, leftButtonLabel, rightButton
                     ]) }))))))));
 };
 exports.ModalFooterMultiStep = ModalFooterMultiStep;
+const ModalCloseButton = ({ className, ...rest }) => {
+    const { onClose } = context_1.useModalContext();
+    return (react_1.default.createElement(CloseButton_1.CloseButton, Object.assign({ className: classnames_1.default(bem_1.bem(cn, { e: "close" }), className), onClick: onClose }, rest)));
+};
+exports.ModalCloseButton = ModalCloseButton;
 const Modal = (props) => {
-    const { title, secondaryTitle, children, isOpen, onClose, autoFocus = true, enableOutsideClick = false, disableEscClose = false, hideCloseButton = false, size = MODAL_SIZE.DEFAULT, center = false, disableBackdrop = false, className, style, ...rest } = props;
+    const { title, secondaryTitle, children, isOpen, onClose, autoFocus = true, enableOutsideClick = false, disableEscClose = false, hideCloseButton = false, size = MODAL_SIZE.DEFAULT, center = false, disableBackdrop = false, noHeader = false, className, style, ...rest } = props;
     const showHeader = title || secondaryTitle || !hideCloseButton;
-    return (react_1.default.createElement(Modal_1.default, Object.assign({ className: classnames_1.default([
-            bem_1.bem(`${cn}Container`),
-            enableOutsideClick && "pointer-events-none",
-        ]), show: isOpen, onHide: onClose, autoFocus: autoFocus, keyboard: !disableEscClose, renderBackdrop: disableBackdrop ? undefined : (p) => react_1.default.createElement(Overlay_1.Overlay, Object.assign({}, p)) }, rest),
-        react_1.default.createElement(Box_1.Box, { className: classnames_1.default([
-                bem_1.bem(cn),
-                bem_1.bem(cn, { m: size }),
-                center && bem_1.bem(cn, { m: "center" }),
-                enableOutsideClick && "pointer-events-auto",
-                className,
-            ]), style: style },
-            showHeader && (react_1.default.createElement(ModalHeader, null,
-                title && react_1.default.createElement(Heading_1.Heading.H2, null, title),
-                react_1.default.createElement(Stack_1.Stack, { className: "flex-shrink-0", spacing: 5 },
-                    secondaryTitle && (react_1.default.createElement(Heading_1.Heading.H5, { className: "text-gray-600" }, secondaryTitle)),
-                    !hideCloseButton && (react_1.default.createElement(CloseButton_1.CloseButton, { className: bem_1.bem(cn, { e: "close" }), onClick: onClose }))))),
-            children)));
+    return (react_1.default.createElement(context_1.ModalContext.Provider, { value: { onClose } },
+        react_1.default.createElement(Modal_1.default, Object.assign({ className: classnames_1.default([
+                bem_1.bem(`${cn}Container`),
+                enableOutsideClick && "pointer-events-none",
+            ]), show: isOpen, onHide: onClose, autoFocus: autoFocus, keyboard: !disableEscClose, renderBackdrop: disableBackdrop ? undefined : (p) => react_1.default.createElement(Overlay_1.Overlay, Object.assign({}, p)) }, rest),
+            react_1.default.createElement(Box_1.Box, { className: classnames_1.default([
+                    bem_1.bem(cn),
+                    bem_1.bem(cn, { m: size }),
+                    center && bem_1.bem(cn, { m: "center" }),
+                    enableOutsideClick && "pointer-events-auto",
+                    className,
+                ]), style: style },
+                !noHeader && showHeader && (react_1.default.createElement(exports.ModalHeader, null,
+                    title && react_1.default.createElement(Heading_1.Heading.H2, null, title),
+                    react_1.default.createElement(Stack_1.Stack, { className: "flex-shrink-0", spacing: 5 },
+                        secondaryTitle && (react_1.default.createElement(Heading_1.Heading.H5, { className: "text-gray-600" }, secondaryTitle)),
+                        !hideCloseButton && react_1.default.createElement(exports.ModalCloseButton, null)))),
+                children))));
 };
 exports.Modal = Modal;
 exports.Modal.Root = exports.Modal;
 exports.Modal.Tabs = exports.ModalTabs;
+exports.Modal.Header = exports.ModalHeader;
 exports.Modal.Body = exports.ModalBody;
 exports.Modal.Footer = exports.ModalFooter;
 exports.Modal.FooterMultiStep = exports.ModalFooterMultiStep;
+exports.Modal.CloseButton = exports.ModalCloseButton;

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

@@ -0,0 +1,6 @@
+import { Context } from "react";
+import { DisclosureProps } from "../../types";
+declare type ModalContextType = Partial<DisclosureProps>;
+export declare const ModalContext: Context<ModalContextType>;
+export declare function useModalContext(): Partial<DisclosureProps>;
+export {};

package/public/components/Modal/context.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useModalContext = exports.ModalContext = void 0;
+const react_1 = require("react");
+const defaultContext = {
+    onClose: () => { },
+};
+exports.ModalContext = react_1.createContext(defaultContext);
+function useModalContext() {
+    const context = react_1.useContext(exports.ModalContext) || {
+        ...defaultContext,
+    };
+    return context;
+}
+exports.useModalContext = useModalContext;

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

@@ -1 +1,2 @@
 export * from "./Modal";
+export * from "./context";

package/public/components/Modal/index.js

@@ -11,3 +11,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Modal"), exports);
+__exportStar(require("./context"), exports);

package/public/components/OptionButton/OptionButton.d.ts

@@ -1,7 +1,34 @@
 import { HTMLProps } from "react";
+import { BoxProps } from "../Box";
+import { TextProps } from "../Text";
+import { StackProps } from "../Stack";
+export interface OptionButtonGroupProps extends StackProps {
+    name?: string;
+    type?: "radio" | "checkbox";
+}
+export declare const OptionButtonGroup: (props: OptionButtonGroupProps) => JSX.Element;
+export declare type OptionButtonRootProps = HTMLProps<HTMLLabelElement>;
+export declare const OptionButtonRoot: ({ children, className, ...rest }: OptionButtonRootProps) => JSX.Element;
+export declare type OptionButtonInputProps = HTMLProps<HTMLInputElement>;
+export declare const OptionButtonInput: (props: OptionButtonInputProps) => JSX.Element;
+export declare const OptionButtonContent: ({ className, children, ...rest }: BoxProps) => JSX.Element;
+export declare const OptionButtonHeading: ({ className, children, ...rest }: TextProps) => JSX.Element;
+export declare const OptionButtonDescription: ({ className, children, ...rest }: TextProps) => JSX.Element;
+export declare const OptionButtonBackdrop: ({ className, ...rest }: BoxProps) => JSX.Element;
+export declare const OptionButtonSelectedIcon: ({ className, ...rest }: BoxProps) => JSX.Element;
 interface OptionButtonProps extends HTMLProps<HTMLInputElement> {
     heading: string;
     description?: string;
 }
-export declare const OptionButton: (props: OptionButtonProps) => JSX.Element;
+export declare const OptionButton: {
+    (props: OptionButtonProps): JSX.Element;
+    Group: (props: OptionButtonGroupProps) => JSX.Element;
+    Root: ({ children, className, ...rest }: OptionButtonRootProps) => JSX.Element;
+    Input: (props: OptionButtonInputProps) => JSX.Element;
+    Content: ({ className, children, ...rest }: BoxProps) => JSX.Element;
+    Heading: ({ className, children, ...rest }: TextProps) => JSX.Element;
+    Description: ({ className, children, ...rest }: TextProps) => JSX.Element;
+    Backdrop: ({ className, ...rest }: BoxProps) => JSX.Element;
+    SelectedIcon: ({ className, ...rest }: BoxProps) => JSX.Element;
+};
 export {};

package/public/components/OptionButton/OptionButton.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.OptionButton = void 0;
+exports.OptionButton = exports.OptionButtonSelectedIcon = exports.OptionButtonBackdrop = exports.OptionButtonDescription = exports.OptionButtonHeading = exports.OptionButtonContent = exports.OptionButtonInput = exports.OptionButtonRoot = exports.OptionButtonGroup = void 0;
 const react_1 = __importDefault(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const auto_id_1 = require("@reach/auto-id");
@@ -11,21 +11,68 @@ const Box_1 = require("../Box");
 const Input_1 = require("../Input");
 const Text_1 = require("../Text");
 const Icon_1 = require("../Icon");
+const Stack_1 = require("../Stack");
 const bem_1 = require("../../utilities/bem");
 const isUndefined_1 = __importDefault(require("../../utilities/isUndefined"));
+const types_1 = require("../../types");
+const context_1 = require("./context");
 const cn = "OptionButton";
+const OptionButtonGroup = (props) => {
+    const { name = "", type = "radio", orientation = types_1.ORIENTATION.VERTICAL, ...rest } = props;
+    return (react_1.default.createElement(context_1.OptionButtonContext.Provider, { value: {
+            name,
+            type,
+        } },
+        react_1.default.createElement(Stack_1.Stack, Object.assign({ orientation: orientation }, rest))));
+};
+exports.OptionButtonGroup = OptionButtonGroup;
+const OptionButtonRoot = ({ children, className, ...rest }) => {
+    return (react_1.default.createElement("label", Object.assign({ className: classnames_1.default(bem_1.bem(cn), className) }, rest), children));
+};
+exports.OptionButtonRoot = OptionButtonRoot;
+const OptionButtonInput = (props) => {
+    const { name: nameFromContext, type: typeFromContext, } = context_1.useOptionButtonContext();
+    const { id: idProp, name: nameProp, checked, className, defaultValue, type: typeProp = "radio", ...rest } = props;
+    const fallbackId = `OptionButton:${auto_id_1.useId()}`;
+    const id = isUndefined_1.default(idProp) ? fallbackId : idProp;
+    const name = isUndefined_1.default(nameFromContext) ? nameProp : nameFromContext;
+    const type = isUndefined_1.default(typeFromContext) ? typeProp : typeFromContext;
+    return (react_1.default.createElement(Input_1.Input, Object.assign({ id: id, name: name, type: type, checked: checked, className: classnames_1.default([bem_1.bem(cn, { e: "input" }), className]), defaultValue: defaultValue, "aria-checked": checked ? "true" : "false" }, rest)));
+};
+exports.OptionButtonInput = OptionButtonInput;
+const OptionButtonContent = ({ className, children, ...rest }) => (react_1.default.createElement(Box_1.Box, Object.assign({ className: classnames_1.default([bem_1.bem(cn, { e: "content" }), className]) }, rest), children));
+exports.OptionButtonContent = OptionButtonContent;
+const OptionButtonHeading = ({ className, children, ...rest }) => (react_1.default.createElement(Text_1.Text, Object.assign({ as: "div", className: classnames_1.default([bem_1.bem(cn, { e: "heading" }), className]) }, rest), children));
+exports.OptionButtonHeading = OptionButtonHeading;
+const OptionButtonDescription = ({ className, children, ...rest }) => (react_1.default.createElement(Text_1.Text, Object.assign({ as: "div", className: classnames_1.default([bem_1.bem(cn, { e: "description" }), className]) }, rest), children));
+exports.OptionButtonDescription = OptionButtonDescription;
+const OptionButtonBackdrop = ({ className, ...rest }) => (react_1.default.createElement(Box_1.Box, Object.assign({ className: classnames_1.default([bem_1.bem(cn, { e: "backdrop" }), className]) }, rest)));
+exports.OptionButtonBackdrop = OptionButtonBackdrop;
+const OptionButtonSelectedIcon = ({ className, ...rest }) => (react_1.default.createElement(Box_1.Box, Object.assign({ className: classnames_1.default([bem_1.bem(cn, { e: "selected" }), className]) }, rest),
+    react_1.default.createElement(Icon_1.Icon, { className: bem_1.bem(cn, { e: "icon" }), icon: Icon_1.ICON_TYPE.CHECK }),
+    "Selected"));
+exports.OptionButtonSelectedIcon = OptionButtonSelectedIcon;
 const OptionButton = (props) => {
-    const { heading, description, id: idProp, checked, className, defaultValue, ...rest } = props;
+    const { name: nameFromContext, type: typeFromContext, } = context_1.useOptionButtonContext();
+    const { heading, description, id: idProp, name: nameProp, checked, className, defaultValue, type: typeProp = "radio", ...rest } = props;
     const fallbackId = `OptionButton:${auto_id_1.useId()}`;
     const id = isUndefined_1.default(idProp) ? fallbackId : idProp;
-    return (react_1.default.createElement(Box_1.Box, { as: "label", className: classnames_1.default(bem_1.bem(cn), className) },
-        react_1.default.createElement(Box_1.Box, { className: bem_1.bem(cn, { e: "content" }) },
-            heading && (react_1.default.createElement(Text_1.Text, { as: "div", className: bem_1.bem(cn, { e: "heading" }) }, heading)),
-            description && (react_1.default.createElement(Text_1.Text, { as: "div", className: bem_1.bem(cn, { e: "description" }) }, description))),
-        react_1.default.createElement(Input_1.Input, Object.assign({ id: id, type: "radio", checked: checked, className: bem_1.bem(cn, { e: "input" }), defaultValue: defaultValue, "aria-checked": checked ? "true" : "false" }, rest)),
-        react_1.default.createElement(Box_1.Box, { className: bem_1.bem(cn, { e: "backdrop" }) }),
-        react_1.default.createElement(Box_1.Box, { className: bem_1.bem(cn, { e: "selected" }) },
-            react_1.default.createElement(Icon_1.Icon, { className: bem_1.bem(cn, { e: "icon" }), icon: Icon_1.ICON_TYPE.CHECK }),
-            "Selected")));
+    const name = isUndefined_1.default(nameFromContext) ? nameProp : nameFromContext;
+    const type = isUndefined_1.default(typeFromContext) ? typeProp : typeFromContext;
+    return (react_1.default.createElement(exports.OptionButtonRoot, { className: classnames_1.default(bem_1.bem(cn), className) },
+        react_1.default.createElement(exports.OptionButtonContent, null,
+            heading && react_1.default.createElement(exports.OptionButtonHeading, null, heading),
+            description && (react_1.default.createElement(exports.OptionButtonDescription, null, description))),
+        react_1.default.createElement(exports.OptionButtonInput, Object.assign({ id: id, name: name, type: type, checked: checked, defaultValue: defaultValue, "aria-checked": checked ? "true" : "false" }, rest)),
+        react_1.default.createElement(exports.OptionButtonBackdrop, null),
+        react_1.default.createElement(exports.OptionButtonSelectedIcon, null)));
 };
 exports.OptionButton = OptionButton;
+exports.OptionButton.Group = exports.OptionButtonGroup;
+exports.OptionButton.Root = exports.OptionButtonRoot;
+exports.OptionButton.Input = exports.OptionButtonInput;
+exports.OptionButton.Content = exports.OptionButtonContent;
+exports.OptionButton.Heading = exports.OptionButtonHeading;
+exports.OptionButton.Description = exports.OptionButtonDescription;
+exports.OptionButton.Backdrop = exports.OptionButtonBackdrop;
+exports.OptionButton.SelectedIcon = exports.OptionButtonSelectedIcon;

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

@@ -0,0 +1,11 @@
+import { Context } from "react";
+declare type OptionButtonContextType = {
+    name?: string;
+    type?: "radio" | "checkbox";
+} | undefined;
+export declare const OptionButtonContext: Context<OptionButtonContextType>;
+export declare function useOptionButtonContext(): {
+    name?: string | undefined;
+    type?: "radio" | "checkbox" | undefined;
+};
+export {};

package/public/components/OptionButton/context.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOptionButtonContext = exports.OptionButtonContext = void 0;
+const react_1 = require("react");
+const defaultContext = {
+    name: "",
+    type: "radio",
+};
+exports.OptionButtonContext = react_1.createContext(defaultContext);
+function useOptionButtonContext() {
+    const context = react_1.useContext(exports.OptionButtonContext) || {
+        ...defaultContext,
+    };
+    return context;
+}
+exports.useOptionButtonContext = useOptionButtonContext;

package/public/components/Overlay/Overlay.js

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Overlay = void 0;
 const react_1 = __importDefault(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const Fixed_1 = require("../Fixed");
+const Box_1 = require("../Box");
 const bem_1 = require("../../utilities/bem");
 const cn = "Overlay";
 const Overlay = (props) => {
     const { className, ...rest } = props;
-    return react_1.default.createElement(Fixed_1.Fixed, Object.assign({ className: classnames_1.default(bem_1.bem(cn), className) }, rest));
+    return react_1.default.createElement(Box_1.Box, Object.assign({ className: classnames_1.default(bem_1.bem(cn), className) }, rest));
 };
 exports.Overlay = Overlay;

package/public/components/Paragraph/Paragraph.js

@@ -7,14 +7,10 @@ exports.Paragraph = void 0;
 const react_1 = __importDefault(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const Text_1 = require("../Text");
+const bem_1 = require("../../utilities/bem");
+const cn = bem_1.bemHOF("Paragraph");
 const Paragraph = (props) => {
     const { className, ...rest } = props;
-    return (react_1.default.createElement(Text_1.Text, Object.assign({}, rest, { className: classnames_1.default([
-            "text-body",
-            "text-gray-700",
-            "leading-normal",
-            "my-6",
-            className,
-        ]) })));
+    return react_1.default.createElement(Text_1.Text, Object.assign({ className: classnames_1.default([cn(), className]) }, rest));
 };
 exports.Paragraph = Paragraph;

package/public/components/Reference/Reference.d.ts

@@ -1,11 +1,11 @@
 import { ForwardRefExoticComponent } from "react";
 import { BoxProps } from "../Box";
-import { ICON_STYLE_PREFIX, ICON_TYPE } from "../Icon";
+import { ICON_STYLE_PREFIX, IconType } from "../Icon";
 import { STATUS_VARIANT } from "../../types";
 export interface ReferenceProps {
     as?: any;
     disabled?: boolean;
-    icon?: ICON_TYPE;
+    icon?: IconType;
     iconPrefix?: ICON_STYLE_PREFIX;
     badgeVariant?: STATUS_VARIANT;
     badgeLabel?: string;

package/public/components/Select/Select.d.ts

@@ -6,6 +6,7 @@ declare type ArrowSelectProps = {
     menuInPortal?: boolean;
     menuRef?: Ref<HTMLDivElement>;
     height?: number;
+    optionsMessage?: string;
 };
 export declare type SelectProps = ReactSelectProps & ArrowSelectProps;
 export declare type SelectCreatableProps = ReactSelectCreatableProps<any> & ArrowSelectProps;

package/public/components/Select/Select.js

@@ -37,6 +37,7 @@ const FormGroupContext_1 = require("../FormGroup/FormGroupContext");
 const Icon_1 = require("../Icon");
 const CloseButton_1 = require("../CloseButton");
 const Token_1 = require("../Token");
+const Text_1 = require("../Text");
 const theme_1 = require("./theme");
 const cn = utilities_1.bemHOF("Select");
 const MultiValue = ({ removeProps, selectProps, children, }) => {
@@ -71,12 +72,15 @@ const adsComponents = {
 const getClassNames = (classNameProp, variant) => {
     return classnames_1.default([cn(), cn({ m: variant }), classNameProp]);
 };
-const getMenuListComponent = (menuRef) => ({ innerRef, children, ...listRest }) => (react_1.default.createElement(react_select_1.components.MenuList, Object.assign({ innerRef: innerRef }, listRest),
-    react_1.default.createElement(Box_1.Box, { ref: menuRef }, children)));
-const generateHardcodedProps = ({ controlHeight, menuInPortal, menuRef, components, styles, }) => {
-    const customComponents = menuInPortal
-        ? { ...adsComponents, MenuList: getMenuListComponent(menuRef) }
-        : adsComponents;
+const getMenuListComponent = ({ menuRef, optionsMessage, }) => ({ innerRef, children, options, ...listRest }) => (react_1.default.createElement(react_select_1.components.MenuList, Object.assign({ innerRef: innerRef, options: options }, listRest),
+    react_1.default.createElement(Box_1.Box, { ref: menuRef },
+        react_1.default.createElement(Box_1.Box, null, children),
+        options.length > 0 && optionsMessage && (react_1.default.createElement(Text_1.Text, { className: "text-gray-600 text-icon leading-normal px-3 py-2" }, optionsMessage)))));
+const generateHardcodedProps = ({ controlHeight, menuInPortal, menuRef, components, optionsMessage, styles, }) => {
+    const customComponents = {
+        ...adsComponents,
+        MenuList: getMenuListComponent({ menuRef, optionsMessage }),
+    };
     return {
         components: { ...customComponents, ...components },
         menuPortalTarget: menuInPortal ? document.body : undefined,
@@ -106,7 +110,7 @@ const generateHardcodedProps = ({ controlHeight, menuInPortal, menuRef, componen
         },
     };
 };
-const SelectBase = ({ variant: variantProp = types_1.STATUS_VARIANT.DEFAULT, id: idProp, className, height: controlHeight = utilities_1.toNumber(tokens_1.height["10"]), menuInPortal = false, menuRef, components, styles, ...rest }) => {
+const SelectBase = ({ variant: variantProp = types_1.STATUS_VARIANT.DEFAULT, id: idProp, className, height: controlHeight = utilities_1.toNumber(tokens_1.height["10"]), menuInPortal = false, menuRef, components, optionsMessage, styles, ...rest }) => {
     const { variant: variantContext, id: idContext } = react_1.useContext(FormGroupContext_1.FormGroupContext);
     const id = idContext || idProp;
     const variant = variantContext || variantProp;
@@ -116,6 +120,7 @@ const SelectBase = ({ variant: variantProp = types_1.STATUS_VARIANT.DEFAULT, id:
         menuRef,
         styles,
         components,
+        optionsMessage,
     });
     if (rest.type === "async") {
         return (react_1.default.createElement(async_1.default, Object.assign({ className: getClassNames(className, variant), id: id }, rest, hardcodedProps)));

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

@@ -1,23 +1,15 @@
 import { Action } from "../../types";
-import { ICON_TYPE } from "../Icon";
-interface SharedProps {
-    message: string;
-    action?: Action;
-    icon?: ICON_TYPE;
-    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";