@veracity/vui 0.3.1 → 0.4.0

package/menu/menuButton.js

@@ -20,11 +20,10 @@ var button_1 = require("../button");
 var core_1 = require("../core");
 var popover_1 = require("../popover");
 var context_1 = require("./context");
+/** Displays PopoverTrigger as a button. */
 exports.MenuButton = (0, core_1.vui)(function (props, ref) {
-    var _a;
-    var menuProps = (_a = (0, context_1.useMenuContext)()) !== null && _a !== void 0 ? _a : {};
-    var styles = (0, core_1.useStyleConfig)('Menu', __assign(__assign({}, menuProps), props));
-    return react_1.default.createElement(popover_1.PopoverTrigger, __assign({ as: button_1.AppButton, className: "vui-menuButton", ref: ref }, styles.button, props));
+    var styles = (0, core_1.useStyleConfig)('Menu', __assign(__assign({}, (0, context_1.useMenuContext)()), props));
+    return react_1.default.createElement(popover_1.PopoverTrigger, __assign({ as: button_1.TextButton, className: "vui-menuButton", ref: ref }, styles.button, props));
 });
 exports.MenuButton.displayName = 'MenuButton';
 exports.default = exports.MenuButton;

package/menu/menuItem.d.ts

@@ -1,3 +1,4 @@
 import { ListItemProps } from '../list';
+/** Displays a list item and by default closes the menu on click. */
 export declare const MenuItem: import("../core").VuiComponent<"li", ListItemProps>;
 export default MenuItem;

package/menu/menuItem.js

@@ -10,25 +10,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-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 __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -40,23 +21,28 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuItem = void 0;
-var react_1 = __importStar(require("react"));
-var context_1 = require("./context");
+var react_1 = __importDefault(require("react"));
 var core_1 = require("../core");
 var list_1 = require("../list");
 var popover_1 = require("../popover");
+var utils_1 = require("../utils");
+var context_1 = require("./context");
+/** Displays a list item and by default closes the menu on click. */
 exports.MenuItem = (0, core_1.vui)(function (props, ref) {
     var _a, _b;
     var onClickProp = props.onClick, rest = __rest(props, ["onClick"]);
     var instance = ((_a = (0, popover_1.usePopoverContext)()) !== null && _a !== void 0 ? _a : {}).instance;
     var _c = (_b = (0, context_1.useMenuContext)()) !== null && _b !== void 0 ? _b : {}, closeOnSelect = _c.closeOnSelect, menuProps = __rest(_c, ["closeOnSelect"]);
     var styles = (0, core_1.useStyleConfig)('Menu', __assign(__assign({}, menuProps), props));
-    var onClick = (0, react_1.useCallback)(function (e) {
+    var onClick = (0, utils_1.useCallbackRef)(function (e) {
         onClickProp === null || onClickProp === void 0 ? void 0 : onClickProp(e);
         closeOnSelect && (instance === null || instance === void 0 ? void 0 : instance.hide());
-    }, [closeOnSelect, instance]);
+    });
     return react_1.default.createElement(list_1.ListItem, __assign({ className: "vui-menuItem", isInteractive: true, onClick: onClick, ref: ref }, styles.item, rest));
 });
 exports.MenuItem.displayName = 'MenuItem';

package/menu/menuList.d.ts

@@ -1,6 +1,7 @@
 import { VuiComponent } from '../core';
 import List from '../list';
 import { MenuListProps } from './menu.types';
+/** Displays a list of menu items in a popover content element. */
 export declare const MenuList: VuiComponent<"ul", MenuListProps> & {
     Divider: typeof List.Divider;
     Heading: typeof List.Heading;

package/menu/menuList.js

@@ -31,13 +31,12 @@ var core_1 = require("../core");
 var list_1 = __importDefault(require("../list"));
 var popover_1 = require("../popover");
 var context_1 = require("./context");
+/** Displays a list of menu items in a popover content element. */
 exports.MenuList = (0, core_1.vui)(function (props, ref) {
-    var _a;
     var contentProps = props.contentProps, contentRef = props.contentRef, rest = __rest(props, ["contentProps", "contentRef"]);
-    var menuProps = (_a = (0, context_1.useMenuContext)()) !== null && _a !== void 0 ? _a : {};
-    var styles = (0, core_1.useStyleConfig)('Menu', __assign(__assign({}, menuProps), props));
+    var styles = (0, core_1.useStyleConfig)('Menu', __assign(__assign({}, (0, context_1.useMenuContext)()), props));
     return (react_1.default.createElement(popover_1.PopoverContent, __assign({ ref: contentRef }, contentProps),
-        react_1.default.createElement(list_1.default, __assign({ className: "vui-menuList", p: 1, ref: ref, size: "sm" }, styles.list, rest))));
+        react_1.default.createElement(list_1.default, __assign({ className: "vui-menuList", py: 1, ref: ref, w: "100%" }, styles.list, rest))));
 });
 exports.MenuList.displayName = 'MenuList';
 exports.MenuList.Divider = list_1.default.Divider;

package/menu/theme.d.ts

@@ -1,7 +1,21 @@
 declare const _default: {
-    defaultProps: {};
+    baseStyle: {};
+    defaultProps: {
+        size: string;
+    };
     parts: string[];
-    sizes: {};
+    sizes: {
+        md: {
+            list: {
+                size: string;
+            };
+        };
+        lg: {
+            list: {
+                size: string;
+            };
+        };
+    };
     variants: {};
 };
 export default _default;

package/menu/theme.js

@@ -1,10 +1,25 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var defaultProps = {};
-var parts = ['container', 'button', 'item', 'list'];
-var sizes = {};
+var baseStyle = {};
+var defaultProps = {
+    size: 'md'
+};
+var parts = ['button', 'item', 'list'];
+var sizes = {
+    md: {
+        list: {
+            size: 'sm'
+        }
+    },
+    lg: {
+        list: {
+            size: 'md'
+        }
+    }
+};
 var variants = {};
 exports.default = {
+    baseStyle: baseStyle,
     defaultProps: defaultProps,
     parts: parts,
     sizes: sizes,

package/modal/context.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ModalContext } from './modal.types';
+declare const ModalProvider: import("react").Provider<ModalContext>, useModalContext: () => ModalContext;
+export { ModalProvider, useModalContext };

package/modal/context.js

@@ -0,0 +1,23 @@
+"use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useModalContext = exports.ModalProvider = void 0;
+var utils_1 = require("../utils");
+var _a = __read((0, utils_1.createContext)({ isOptional: true }), 2), ModalProvider = _a[0], useModalContext = _a[1];
+exports.ModalProvider = ModalProvider;
+exports.useModalContext = useModalContext;

package/modal/focusLock.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { FocusLockProps } from './focusLock.types';
+/**
+ * Traps the focus within the provided content. That is, tabbing with keyboard will
+ * only cycle through the children and won't leave the boundary of the FocusLock.
+ * This behavior enhances accessibility of the Modal component.
+ */
+export declare const FocusLock: FC<FocusLockProps>;
+export default FocusLock;

package/modal/focusLock.js

@@ -0,0 +1,47 @@
+"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.FocusLock = void 0;
+var react_1 = __importStar(require("react"));
+var react_focus_lock_1 = __importDefault(require("react-focus-lock"));
+/**
+ * Traps the focus within the provided content. That is, tabbing with keyboard will
+ * only cycle through the children and won't leave the boundary of the FocusLock.
+ * This behavior enhances accessibility of the Modal component.
+ */
+var FocusLock = function (props) {
+    var autoFocus = props.autoFocus, children = props.children, crossFrame = props.crossFrame, finalFocusRef = props.finalFocusRef, initialFocusRef = props.initialFocusRef, isDisabled = props.isDisabled, persistentFocus = props.persistentFocus, returnFocusProp = props.returnFocus;
+    var onActivation = react_1.default.useCallback(function () {
+        var _a;
+        (_a = initialFocusRef === null || initialFocusRef === void 0 ? void 0 : initialFocusRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [initialFocusRef]);
+    var onDeactivation = (0, react_1.useCallback)(function () {
+        var _a;
+        (_a = finalFocusRef === null || finalFocusRef === void 0 ? void 0 : finalFocusRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [finalFocusRef]);
+    var returnFocus = returnFocusProp && !finalFocusRef;
+    return (react_1.default.createElement(react_focus_lock_1.default, { autoFocus: autoFocus, crossFrame: crossFrame, disabled: isDisabled, onActivation: onActivation, onDeactivation: onDeactivation, persistentFocus: persistentFocus, returnFocus: returnFocus }, children));
+};
+exports.FocusLock = FocusLock;
+exports.default = exports.FocusLock;

package/modal/focusLock.types.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+export declare type FocusableElement = {
+    focus(options?: FocusOptions): void;
+};
+export declare type FocusLockProps = {
+    /**
+     * The first focuable element within the 'children' will be auto-focused once 'FocusLock' mounts.
+     * @default true
+     */
+    autoFocus?: boolean;
+    /**
+     * Enables aggressive focus capturing within iframes.
+     * - 'true' keeps focus in the lock, no matter where the lock is active.
+     * - 'false' allows focus to move outside of iframe, if enabled inside iframe.
+     * @default true
+     */
+    crossFrame?: boolean;
+    /** 'ref' of the element to return focus to when FocusLock unmounts. */
+    finalFocusRef?: React.RefObject<FocusableElement>;
+    /** 'ref' of the element to receive focus initially when FocusLock mounts. */
+    initialFocusRef?: React.RefObject<FocusableElement>;
+    /** Disables focus trapping. */
+    isDisabled?: boolean;
+    /** Disables text selections inside, and outside focus lock. */
+    persistentFocus?: boolean;
+    /** Focus will be returned to the element that triggered the FocusLock once it unmounts. */
+    returnFocus?: boolean;
+};

package/modal/focusLock.types.js

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

package/modal/index.d.ts

@@ -0,0 +1,7 @@
+export * from './context';
+export * from './focusLock';
+export * from './focusLock.types';
+export * from './modal';
+export { default as Modal } from './modal';
+export * from './modal.types';
+export * from './modalBackdrop';

package/modal/index.js

@@ -0,0 +1,24 @@
+"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 __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);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Modal = void 0;
+__exportStar(require("./context"), exports);
+__exportStar(require("./focusLock"), exports);
+__exportStar(require("./focusLock.types"), exports);
+__exportStar(require("./modal"), exports);
+var modal_1 = require("./modal");
+Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return __importDefault(modal_1).default; } });
+__exportStar(require("./modal.types"), exports);
+__exportStar(require("./modalBackdrop"), exports);

package/modal/modal.d.ts

@@ -0,0 +1,10 @@
+import { ModalProps } from './modal.types';
+export declare const ModalBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
+/**
+ * Displays provided content on top of a dark backdrop element with fixed position.
+ * By default uses Portal for content and closes when clicking backdrop or pressing 'Escape'.
+ * Uses focus and scroll lock to achieve proper accessibility.
+ * More about accessibility: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role
+ */
+export declare const Modal: import("../core").VuiComponent<"div", ModalProps>;
+export default Modal;

package/modal/modal.js

@@ -0,0 +1,109 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Modal = exports.ModalBase = void 0;
+var react_1 = __importStar(require("react"));
+var react_remove_scroll_1 = require("react-remove-scroll");
+var core_1 = require("../core");
+var portal_1 = __importDefault(require("../portal"));
+var utils_1 = require("../utils");
+var context_1 = require("./context");
+var focusLock_1 = __importDefault(require("./focusLock"));
+var modalBackdrop_1 = __importDefault(require("./modalBackdrop"));
+var modalManager_1 = require("./modalManager");
+exports.ModalBase = core_1.styled.divBox(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tinset: 0px;\n\toutline: none;\n\tposition: fixed;\n\tz-index: 1000;\n"], ["\n\tinset: 0px;\n\toutline: none;\n\tposition: fixed;\n\tz-index: 1000;\n"
+    /**
+     * Displays provided content on top of a dark backdrop element with fixed position.
+     * By default uses Portal for content and closes when clicking backdrop or pressing 'Escape'.
+     * Uses focus and scroll lock to achieve proper accessibility.
+     * More about accessibility: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role
+     */
+])));
+/**
+ * Displays provided content on top of a dark backdrop element with fixed position.
+ * By default uses Portal for content and closes when clicking backdrop or pressing 'Escape'.
+ * Uses focus and scroll lock to achieve proper accessibility.
+ * More about accessibility: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role
+ */
+exports.Modal = (0, core_1.vui)(function (props, ref) {
+    var _a;
+    var allowPinchZoom = props.allowPinchZoom, children = props.children, disableAutoFocus = props.disableAutoFocus, disableBackdropClose = props.disableBackdropClose, disableEscClose = props.disableEscClose, disablePortal = props.disablePortal, disableReturnFocus = props.disableReturnFocus, disableScrollLock = props.disableScrollLock, finalFocusRef = props.finalFocusRef, hideBackdrop = props.hideBackdrop, initialFocusRef = props.initialFocusRef, isOpen = props.isOpen, onBackdropClickProp = props.onBackdropClick, onClose = props.onClose, onEsc = props.onEsc, onKeyDownProp = props.onKeyDown, preserveScrollBar = props.preserveScrollBar, rest = __rest(props, ["allowPinchZoom", "children", "disableAutoFocus", "disableBackdropClose", "disableEscClose", "disablePortal", "disableReturnFocus", "disableScrollLock", "finalFocusRef", "hideBackdrop", "initialFocusRef", "isOpen", "onBackdropClick", "onClose", "onEsc", "onKeyDown", "preserveScrollBar"]);
+    var modalRef = (0, react_1.useRef)(null);
+    (0, modalManager_1.useModalManager)(modalRef, isOpen);
+    if (!isOpen)
+        return null;
+    var onBackdropClick = function (e) {
+        e.stopPropagation();
+        if (!modalManager_1.manager.isTopModal(modalRef))
+            return;
+        !disableBackdropClose && (onClose === null || onClose === void 0 ? void 0 : onClose());
+        onBackdropClickProp === null || onBackdropClickProp === void 0 ? void 0 : onBackdropClickProp(e);
+    };
+    var onKeyDown = function (e) {
+        onKeyDownProp === null || onKeyDownProp === void 0 ? void 0 : onKeyDownProp(e);
+        if (e.key === 'Escape') {
+            e.stopPropagation();
+            !disableEscClose && (onClose === null || onClose === void 0 ? void 0 : onClose());
+            onEsc === null || onEsc === void 0 ? void 0 : onEsc();
+        }
+    };
+    var childProps = { tabIndex: (_a = children === null || children === void 0 ? void 0 : children.props.tabIndex) !== null && _a !== void 0 ? _a : -1 };
+    var context = { isOpen: isOpen, onBackdropClick: onBackdropClick, onClose: onClose };
+    return (react_1.default.createElement(context_1.ModalProvider, { value: context },
+        react_1.default.createElement(portal_1.default, { disablePortal: disablePortal },
+            react_1.default.createElement(exports.ModalBase, __assign({ className: "vui-modal", onKeyDown: onKeyDown, ref: (0, utils_1.mergeRefs)(ref, modalRef), role: "presentation", tabIndex: -1 }, rest),
+                !hideBackdrop && react_1.default.createElement(modalBackdrop_1.default, null),
+                react_1.default.createElement(focusLock_1.default, { autoFocus: !disableAutoFocus, finalFocusRef: finalFocusRef, initialFocusRef: initialFocusRef, 
+                    // isDisabled={disableTrapFocus} Consider if this prop might be useful for some use case
+                    returnFocus: !disableReturnFocus },
+                    react_1.default.createElement(react_remove_scroll_1.RemoveScroll, { allowPinchZoom: allowPinchZoom, enabled: !disableScrollLock, forwardProps: true, removeScrollBar: !preserveScrollBar }, (0, react_1.cloneElement)(children, childProps)))))));
+});
+exports.default = exports.Modal;
+var templateObject_1;

package/modal/modal.types.d.ts

@@ -0,0 +1,40 @@
+/// <reference types="react" />
+import { SystemProps } from '../system';
+import { MouseEvent } from '../utils';
+import { FocusableElement } from './focusLock.types';
+export declare type ModalBackdropProps = SystemProps;
+export declare type ModalContext = Pick<ModalProps, 'isOpen' | 'onBackdropClick' | 'onClose'>;
+export declare type ModalProps = SystemProps & {
+    /** Handle zoom/pinch gestures on iOS devices when scroll locking is enabled. */
+    allowPinchZoom?: boolean;
+    /** A single child content element. */
+    children: React.ReactElement;
+    /** It won't auto-focus the first focuable element within the 'children' once FocusLock mounts. */
+    disableAutoFocus?: boolean;
+    /** Clicking Backdrop element will not trigger 'onClose'. */
+    disableBackdropClose?: boolean;
+    /** Pressing 'Escape' will not trigger 'onClose'. */
+    disableEscClose?: boolean;
+    /** The children will be under the DOM hierarchy of the parent component. */
+    disablePortal?: boolean;
+    /** Focus won't be returned to the element that triggered the FocusLock once it unmounts. */
+    disableReturnFocus?: boolean;
+    /** Allows scrolling to happen on the content beneath the Modal. */
+    disableScrollLock?: boolean;
+    /** 'ref' of the element to return focus to when FocusLock unmounts. */
+    finalFocusRef?: React.RefObject<FocusableElement>;
+    /** Hides the dark backdrop element that is normally displayed beneath modal content. */
+    hideBackdrop?: boolean;
+    /** 'ref' of the element to receive focus initially when FocusLock mounts. */
+    initialFocusRef?: React.RefObject<FocusableElement>;
+    /** Displays the modal with its content on top of a backdrop. */
+    isOpen?: boolean;
+    /** Callback triggered when the backdrop element is clicked. Defaults to onClose. */
+    onBackdropClick?: (e: MouseEvent) => void;
+    /** Callback triggered to close the modal. */
+    onClose?: () => void;
+    /** Callback triggered when pressing 'Escape' key. Defaults to onClose. */
+    onEsc?: () => void;
+    /** Test this prop on Windows scrollbars */
+    preserveScrollBar?: boolean;
+};

package/modal/modal.types.js

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

package/modal/modalBackdrop.d.ts

@@ -0,0 +1,4 @@
+export declare const ModalBackdropBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
+/** Displays a dark overlay underneath modal content, but on top of page content . */
+export declare const ModalBackdrop: import("../core").VuiComponent<"div", import("..").SystemProps>;
+export default ModalBackdrop;

package/modal/modalBackdrop.js

@@ -0,0 +1,38 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalBackdrop = exports.ModalBackdropBase = void 0;
+var react_1 = __importDefault(require("react"));
+var core_1 = require("../core");
+var theme_1 = require("../theme");
+var utils_1 = require("../utils");
+var context_1 = require("./context");
+exports.ModalBackdropBase = core_1.styled.divBox(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tanimation: vui-fadeIn 0.3s ease;\n\tbackground-color: ", ";\n\tinset: 0px;\n\tposition: fixed;\n\tz-index: -1;\n"], ["\n\tanimation: vui-fadeIn 0.3s ease;\n\tbackground-color: ", ";\n\tinset: 0px;\n\tposition: fixed;\n\tz-index: -1;\n"
+    /** Displays a dark overlay underneath modal content, but on top of page content . */
+])), (0, utils_1.hexToRGBA)(theme_1.colors.prussian[80], 0.3));
+/** Displays a dark overlay underneath modal content, but on top of page content . */
+exports.ModalBackdrop = (0, core_1.vui)(function (props, ref) {
+    var _a;
+    var onBackdropClick = ((_a = (0, context_1.useModalContext)()) !== null && _a !== void 0 ? _a : {}).onBackdropClick;
+    return react_1.default.createElement(exports.ModalBackdropBase, __assign({ className: "vui-modalBackdrop", onClick: onBackdropClick, ref: ref }, props));
+});
+exports.ModalBackdrop.displayName = 'ModalBackdrop';
+exports.default = exports.ModalBackdrop;
+var templateObject_1;

package/modal/modalManager.d.ts

@@ -0,0 +1,12 @@
+import { Ref } from 'react';
+/** State management for nested modals. */
+declare class ModalManager {
+    modals: any[];
+    add: (modal: any) => void;
+    remove: (modal: any) => void;
+    isTopModal: (modal: any) => boolean;
+}
+export declare const manager: ModalManager;
+/** Refs of new modals will be automatically added/removed from the state when rendering. */
+export declare function useModalManager(ref: Ref<any>, isOpen?: boolean): void;
+export {};

package/modal/modalManager.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useModalManager = exports.manager = void 0;
+var react_1 = require("react");
+/** State management for nested modals. */
+var ModalManager = /** @class */ (function () {
+    function ModalManager() {
+        var _this = this;
+        this.modals = [];
+        this.add = function (modal) {
+            _this.modals.push(modal);
+        };
+        this.remove = function (modal) {
+            _this.modals = _this.modals.filter(function (m) { return m !== modal; });
+        };
+        this.isTopModal = function (modal) {
+            var topmostModal = _this.modals[_this.modals.length - 1];
+            return topmostModal === modal;
+        };
+    }
+    return ModalManager;
+}());
+exports.manager = new ModalManager();
+/** Refs of new modals will be automatically added/removed from the state when rendering. */
+function useModalManager(ref, isOpen) {
+    (0, react_1.useEffect)(function () {
+        isOpen && exports.manager.add(ref);
+        return function () {
+            exports.manager.remove(ref);
+        };
+    }, [isOpen, ref]);
+}
+exports.useModalManager = useModalManager;

package/modal/theme.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    baseStyle: {};
+    defaultProps: {};
+    sizes: {};
+    variants: {};
+};
+export default _default;

package/modal/theme.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var baseStyle = {};
+var defaultProps = {};
+var sizes = {};
+var variants = {};
+exports.default = {
+    baseStyle: baseStyle,
+    defaultProps: defaultProps,
+    sizes: sizes,
+    variants: variants
+};

package/notification/consts.js

@@ -18,8 +18,8 @@ exports.notificationStatusMapping = {
         colorScheme: 'blue',
         iconProps: {
             animation: 'vui-spin 0.6s linear infinite',
-            fill: ['blue.40', 'blue.60'],
-            name: 'fadSpinnerThird'
+            name: 'fadSpinnerThird',
+            pathFill: ['blue.40', 'blue.60']
         }
     },
     success: {

package/notification/index.d.ts

@@ -1,8 +1,8 @@
+export * from './context';
 export * from './notification';
+export { default } from './notification';
 export * from './notification.types';
 export * from './notificationButton';
 export * from './notificationIcon';
 export * from './notificationText';
 export * from './notificationTitle';
-export * from './context';
-export { default } from './notification';

package/notification/index.js

@@ -14,12 +14,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = void 0;
+__exportStar(require("./context"), exports);
 __exportStar(require("./notification"), exports);
+var notification_1 = require("./notification");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(notification_1).default; } });
 __exportStar(require("./notification.types"), exports);
 __exportStar(require("./notificationButton"), exports);
 __exportStar(require("./notificationIcon"), exports);
 __exportStar(require("./notificationText"), exports);
 __exportStar(require("./notificationTitle"), exports);
-__exportStar(require("./context"), exports);
-var notification_1 = require("./notification");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(notification_1).default; } });