@veracity/vui 0.4.0 → 0.5.0

package/header/index.d.ts

@@ -1,20 +1,21 @@
-export * from './consts';
 export * from './context';
 export * from './header';
 export { default } from './header';
 export * from './header.types';
 export * from './headerAccount';
 export * from './headerAccount.types';
+export * from './headerAccountUserInfo';
 export * from './headerContent';
 export * from './headerCreateAccount';
 export * from './headerDivider';
 export * from './headerLinkItem';
-export * from './headerLinksList';
 export * from './headerLogo';
+export * from './headerMainLinks';
 export * from './headerMobileContent';
 export * from './headerMobileToggle';
 export * from './headerNotifications';
 export * from './headerServices';
+export * from './headerServicesMessage';
 export * from './headerSignIn';
 export * from './helpers';
 export * from './loggedInHeader';

package/header/index.js

@@ -14,7 +14,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = void 0;
-__exportStar(require("./consts"), exports);
 __exportStar(require("./context"), exports);
 __exportStar(require("./header"), exports);
 var header_1 = require("./header");
@@ -22,16 +21,18 @@ Object.defineProperty(exports, "default", { enumerable: true, get: function () {
 __exportStar(require("./header.types"), exports);
 __exportStar(require("./headerAccount"), exports);
 __exportStar(require("./headerAccount.types"), exports);
+__exportStar(require("./headerAccountUserInfo"), exports);
 __exportStar(require("./headerContent"), exports);
 __exportStar(require("./headerCreateAccount"), exports);
 __exportStar(require("./headerDivider"), exports);
 __exportStar(require("./headerLinkItem"), exports);
-__exportStar(require("./headerLinksList"), exports);
 __exportStar(require("./headerLogo"), exports);
+__exportStar(require("./headerMainLinks"), exports);
 __exportStar(require("./headerMobileContent"), exports);
 __exportStar(require("./headerMobileToggle"), exports);
 __exportStar(require("./headerNotifications"), exports);
 __exportStar(require("./headerServices"), exports);
+__exportStar(require("./headerServicesMessage"), exports);
 __exportStar(require("./headerSignIn"), exports);
 __exportStar(require("./helpers"), exports);
 __exportStar(require("./loggedInHeader"), exports);

package/header/loggedInHeader.js

@@ -33,25 +33,25 @@ var utils_1 = require("../utils");
 var header_1 = __importDefault(require("./header"));
 /** Displays Header content appropriate for logged in users, such as services, notifications or account information. */
 exports.LoggedInHeader = (0, core_1.vui)(function (props, ref) {
-    var account = props.account, className = props.className, children = props.children, links = props.links, logo = props.logo, services = props.services, notifications = props.notifications, rest = __rest(props, ["account", "className", "children", "links", "logo", "services", "notifications"]);
+    var account = props.account, children = props.children, className = props.className, logo = props.logo, mainLinks = props.mainLinks, services = props.services, notifications = props.notifications, rest = __rest(props, ["account", "children", "className", "logo", "mainLinks", "services", "notifications"]);
     return (react_1.default.createElement(header_1.default, __assign({ className: (0, utils_1.cs)('vui-loggedInHeader', className), ref: ref }, rest),
         react_1.default.createElement(header_1.default.Content, null,
-            (0, utils_1.isObject)(logo) ? react_1.default.createElement(header_1.default.Logo, __assign({}, logo)) : logo,
+            (0, utils_1.isJsx)(logo) ? logo : react_1.default.createElement(header_1.default.Logo, __assign({}, logo)),
             react_1.default.createElement(core_1.RenderOnDesktop, null, children),
             react_1.default.createElement(box_1.default, { ml: "auto" }),
             react_1.default.createElement(core_1.RenderOnDesktop, null,
-                (0, utils_1.isArray)(links) ? react_1.default.createElement(header_1.default.LinksList, { links: links }) : links,
-                links !== undefined && react_1.default.createElement(header_1.default.Divider, { mr: 1 }),
-                (0, utils_1.isArray)(services) ? react_1.default.createElement(header_1.default.Services, { services: services }) : services),
-            (0, utils_1.isObject)(notifications) ? react_1.default.createElement(header_1.default.Notifications, __assign({}, notifications)) : notifications,
-            (0, utils_1.isObject)(account) ? react_1.default.createElement(header_1.default.Account, __assign({}, account)) : account,
+                (0, utils_1.isJsx)(mainLinks) ? mainLinks : react_1.default.createElement(header_1.default.MainLinks, { links: mainLinks }),
+                mainLinks !== undefined && react_1.default.createElement(header_1.default.Divider, { mx: 1 }),
+                (0, utils_1.isJsx)(services) ? services : react_1.default.createElement(header_1.default.Services, __assign({}, services))),
+            (0, utils_1.isJsx)(notifications) ? notifications : react_1.default.createElement(header_1.default.Notifications, __assign({}, notifications)),
+            (0, utils_1.isJsx)(account) ? account : react_1.default.createElement(header_1.default.Account, __assign({}, account)),
             react_1.default.createElement(core_1.RenderOnMobile, null,
                 (account !== undefined || notifications !== undefined) && react_1.default.createElement(header_1.default.Divider, { ml: 2 }),
                 react_1.default.createElement(header_1.default.MobileToggle, null),
                 react_1.default.createElement(header_1.default.MobileContent, null,
                     children,
-                    (0, utils_1.isArray)(links) ? react_1.default.createElement(header_1.default.LinksList, { links: links }) : links,
-                    (0, utils_1.isArray)(services) ? react_1.default.createElement(header_1.default.Services, { services: services }) : services)))));
+                    (0, utils_1.isJsx)(mainLinks) ? mainLinks : react_1.default.createElement(header_1.default.MainLinks, { links: mainLinks }),
+                    (0, utils_1.isJsx)(services) ? services : react_1.default.createElement(header_1.default.Services, __assign({}, services)))))));
 });
 exports.LoggedInHeader.displayName = 'LoggedInHeader';
 exports.default = exports.LoggedInHeader;

package/header/loggedOutHeader.js

@@ -33,25 +33,25 @@ var utils_1 = require("../utils");
 var header_1 = __importDefault(require("./header"));
 /** Displays Header content appropriate for logged out users, such as sign in button or create account prompt. */
 exports.LoggedOutHeader = (0, core_1.vui)(function (props, ref) {
-    var children = props.children, className = props.className, createAccount = props.createAccount, links = props.links, logo = props.logo, signIn = props.signIn, rest = __rest(props, ["children", "className", "createAccount", "links", "logo", "signIn"]);
+    var children = props.children, className = props.className, createAccount = props.createAccount, logo = props.logo, mainLinks = props.mainLinks, signIn = props.signIn, rest = __rest(props, ["children", "className", "createAccount", "logo", "mainLinks", "signIn"]);
     return (react_1.default.createElement(header_1.default, __assign({ className: (0, utils_1.cs)('vui-loggedOutHeader', className), ref: ref }, rest),
         react_1.default.createElement(header_1.default.Content, null,
-            (0, utils_1.isObject)(logo) ? react_1.default.createElement(header_1.default.Logo, __assign({}, logo)) : logo,
+            (0, utils_1.isJsx)(logo) ? logo : react_1.default.createElement(header_1.default.Logo, __assign({}, logo)),
             react_1.default.createElement(core_1.RenderOnDesktop, null, children),
             react_1.default.createElement(box_1.default, { ml: "auto" }),
             react_1.default.createElement(core_1.RenderOnDesktop, null,
-                (0, utils_1.isArray)(links) ? react_1.default.createElement(header_1.default.LinksList, { links: links }) : links,
-                links !== undefined && react_1.default.createElement(header_1.default.Divider, { mr: 3 }),
-                (0, utils_1.isObject)(signIn) ? react_1.default.createElement(header_1.default.SignIn, __assign({}, signIn)) : signIn,
-                (0, utils_1.isObject)(createAccount) ? (react_1.default.createElement(header_1.default.CreateAccount, __assign({}, createAccount))) : (createAccount)),
+                (0, utils_1.isJsx)(mainLinks) ? mainLinks : react_1.default.createElement(header_1.default.MainLinks, { links: mainLinks }),
+                mainLinks !== undefined && react_1.default.createElement(header_1.default.Divider, { ml: 1, mr: 3 }),
+                (0, utils_1.isJsx)(signIn) ? signIn : react_1.default.createElement(header_1.default.SignIn, __assign({}, signIn)),
+                (0, utils_1.isJsx)(createAccount) ? createAccount : react_1.default.createElement(header_1.default.CreateAccount, __assign({}, createAccount))),
             react_1.default.createElement(core_1.RenderOnMobile, null,
-                (0, utils_1.isObject)(signIn) ? react_1.default.createElement(header_1.default.SignIn, __assign({}, signIn)) : signIn,
+                (0, utils_1.isJsx)(signIn) ? signIn : react_1.default.createElement(header_1.default.SignIn, __assign({}, signIn)),
                 signIn !== undefined && react_1.default.createElement(header_1.default.Divider, { ml: 2 }),
                 react_1.default.createElement(header_1.default.MobileToggle, null),
                 react_1.default.createElement(header_1.default.MobileContent, null,
                     children,
-                    (0, utils_1.isObject)(createAccount) ? (react_1.default.createElement(header_1.default.CreateAccount, __assign({}, createAccount))) : (createAccount),
-                    (0, utils_1.isArray)(links) ? react_1.default.createElement(header_1.default.LinksList, { links: links }) : links)))));
+                    (0, utils_1.isJsx)(createAccount) ? createAccount : react_1.default.createElement(header_1.default.CreateAccount, __assign({}, createAccount)),
+                    (0, utils_1.isJsx)(mainLinks) ? mainLinks : react_1.default.createElement(header_1.default.MainLinks, { links: mainLinks }))))));
 });
 exports.LoggedOutHeader.displayName = 'LoggedOutHeader';
 exports.default = exports.LoggedOutHeader;

package/header/theme.d.ts

@@ -52,16 +52,16 @@ declare const _default: {
                     borderColor: string;
                 };
             };
-            linksList: {
-                color: {
-                    md: string;
-                };
-            };
             logo: {
                 svg: {
                     pathFill: string;
                 };
             };
+            mainLinks: {
+                color: {
+                    md: string;
+                };
+            };
             mobileContent: {
                 top: string;
             };
@@ -69,7 +69,9 @@ declare const _default: {
                 variant: string;
             };
             notifications: {
-                variant: string;
+                container: {
+                    variant: string;
+                };
             };
             services: {
                 button: {

package/header/theme.js

@@ -5,16 +5,18 @@ var defaultProps = {};
 var parts = [
     'container',
     'account',
+    'accountUserInfo',
     'content',
     'createAccount',
     'divider',
     'linkItem',
-    'linksList',
     'logo',
+    'mainLinks',
     'mobileContent',
     'mobileToggle',
     'notifications',
     'services',
+    'servicesMessage',
     'signIn'
 ];
 var sizes = {};
@@ -53,14 +55,14 @@ var variants = {
                 borderColor: 'pink.80'
             }
         },
-        linksList: {
-            color: { md: 'white' }
-        },
         logo: {
             svg: {
                 pathFill: 'white'
             }
         },
+        mainLinks: {
+            color: { md: 'white' }
+        },
         mobileContent: {
             top: '100%'
         },
@@ -68,7 +70,9 @@ var variants = {
             variant: 'solid'
         },
         notifications: {
-            variant: 'solid'
+            container: {
+                variant: 'solid'
+            }
         },
         services: {
             button: {

package/index.d.ts

@@ -5,8 +5,10 @@ export * from './buttonGroup';
 export * from './card';
 export * from './checkbox';
 export * from './core';
+export * from './dialog';
 export * from './divider';
 export * from './footer';
+export * from './grid';
 export * from './header';
 export * from './heading';
 export * from './icon';

package/index.js

@@ -17,8 +17,10 @@ __exportStar(require("./buttonGroup"), exports);
 __exportStar(require("./card"), exports);
 __exportStar(require("./checkbox"), exports);
 __exportStar(require("./core"), exports);
+__exportStar(require("./dialog"), exports);
 __exportStar(require("./divider"), exports);
 __exportStar(require("./footer"), exports);
+__exportStar(require("./grid"), exports);
 __exportStar(require("./header"), exports);
 __exportStar(require("./heading"), exports);
 __exportStar(require("./icon"), exports);

package/input/input.js

@@ -74,7 +74,7 @@ var context_1 = require("./context");
 var helpers_1 = require("./helpers");
 var inputIcon_1 = __importDefault(require("./inputIcon"));
 var inputInput_1 = __importDefault(require("./inputInput"));
-exports.InputBase = core_1.styled.divBox(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-items: center;\n\tbackground-color: white;\n\tborder-radius: md;\n\tborder-width: 1px;\n\tdisplay: flex;\n\toutline: none;\n\tposition: relative;\n\ttransition-duration: fast;\n\twidth: 100%;\n\n\t&[aria-disabled='true'] {\n\t\tbackground-color: disabled.bg;\n\t\tcolor: disabled.color;\n\t\tcursor: not-allowed;\n\t}\n"], ["\n\talign-items: center;\n\tbackground-color: white;\n\tborder-radius: md;\n\tborder-width: 1px;\n\tdisplay: flex;\n\toutline: none;\n\tposition: relative;\n\ttransition-duration: fast;\n\twidth: 100%;\n\n\t&[aria-disabled='true'] {\n\t\tbackground-color: disabled.bg;\n\t\tcolor: disabled.color;\n\t\tcursor: not-allowed;\n\t}\n"
+exports.InputBase = core_1.styled.divBox(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-items: center;\n\tbackground-color: white;\n\tborder-radius: md;\n\tborder-width: 1px;\n\tdisplay: flex;\n\tflex-shrink: 0;\n\toutline: none;\n\tposition: relative;\n\ttransition-duration: fast;\n\twidth: 100%;\n\n\t&[aria-disabled='true'] {\n\t\tbackground-color: disabled.bg;\n\t\tcolor: disabled.color;\n\t\tcursor: not-allowed;\n\t}\n"], ["\n\talign-items: center;\n\tbackground-color: white;\n\tborder-radius: md;\n\tborder-width: 1px;\n\tdisplay: flex;\n\tflex-shrink: 0;\n\toutline: none;\n\tposition: relative;\n\ttransition-duration: fast;\n\twidth: 100%;\n\n\t&[aria-disabled='true'] {\n\t\tbackground-color: disabled.bg;\n\t\tcolor: disabled.color;\n\t\tcursor: not-allowed;\n\t}\n"
     /**
      * Displays an input element wrapped in a div to allow extra content, like counter, side icons or buttons.
      * Forwards many relevant props to the inner input. Handles different states, like loading or error.

package/link/linkText.js

@@ -22,7 +22,7 @@ var context_1 = require("./context");
 /** Displays text of the Link. */
 exports.LinkText = (0, core_1.vui)(function (props, ref) {
     var styles = (0, core_1.useStyleConfig)('Link', __assign(__assign({}, (0, context_1.useLink)()), props));
-    return react_1.default.createElement(t_1.default, __assign({ className: "vui-linkText", fontSize: "inherit", ref: ref }, styles.text, props));
+    return (react_1.default.createElement(t_1.default, __assign({ className: "vui-linkText", fontSize: "inherit", ref: ref, transitionDuration: "unset" }, styles.text, props)));
 });
 exports.LinkText.displayName = 'LinkText';
 exports.default = exports.LinkText;

package/list/listHeading.js

@@ -22,7 +22,7 @@ var context_1 = require("./context");
 /** Displays a heading within the List. */
 exports.ListHeading = (0, core_1.vui)(function (props, ref) {
     var styles = (0, core_1.useStyleConfig)('List', __assign(__assign({}, (0, context_1.useList)()), props));
-    return (react_1.default.createElement(t_1.T, __assign({ className: "vui-listHeading", display: "inline-block", px: 2, py: 1, ref: ref, weight: "demi" }, styles.heading, props)));
+    return (react_1.default.createElement(t_1.T, __assign({ className: "vui-listHeading", color: "grey.60", display: "inline-block", px: 2, py: 1, ref: ref, size: "sm", textTransform: "uppercase", weight: "medium" }, styles.heading, props)));
 });
 exports.ListHeading.displayName = 'ListHeading';
 exports.default = exports.ListHeading;

package/list/listItem.js

@@ -71,7 +71,7 @@ exports.ListItemBase = core_1.styled.liBox(templateObject_1 || (templateObject_1
 exports.ListItem = (0, core_1.vui)(function (props, ref) {
     var mergedProps = __assign(__assign({}, (0, context_1.useList)()), props);
     var children = mergedProps.children, center = mergedProps.center, centerH = mergedProps.centerH, _a = mergedProps.centerV, centerV = _a === void 0 ? true : _a, className = mergedProps.className, column = mergedProps.column, disabled = mergedProps.disabled, iconLeft = mergedProps.iconLeft, iconRight = mergedProps.iconRight, isInteractiveProp = mergedProps.isInteractive, isSelected = mergedProps.isSelected, isTruncated = mergedProps.isTruncated, itemLeft = mergedProps.itemLeft, itemRight = mergedProps.itemRight, linkProps = mergedProps.linkProps, onClick = mergedProps.onClick, text = mergedProps.text, rest = __rest(mergedProps, ["children", "center", "centerH", "centerV", "className", "column", "disabled", "iconLeft", "iconRight", "isInteractive", "isSelected", "isTruncated", "itemLeft", "itemRight", "linkProps", "onClick", "text"]);
-    var styles = (0, core_1.useStyleConfig)('List', mergedProps);
+    var styles = (0, core_1.useStyleConfig)('List', (0, context_1.useList)());
     var _b = styles.item, activeBg = _b.activeBg, hoverBg = _b.hoverBg, selectedBg = _b.selectedBg, itemStyles = __rest(_b, ["activeBg", "hoverBg", "selectedBg"]);
     var isLinkItem = linkProps !== undefined;
     var isInteractive = isInteractiveProp || isLinkItem || onClick !== undefined;

package/list/theme.d.ts

@@ -58,8 +58,7 @@ declare const _default: {
             };
             item: {
                 display: string;
-                h: undefined;
-                lineHeight: number;
+                h: string;
             };
         };
         unordered: {
@@ -70,8 +69,7 @@ declare const _default: {
             };
             item: {
                 display: string;
-                h: undefined;
-                lineHeight: number;
+                h: string;
             };
         };
     };

package/list/theme.js

@@ -65,8 +65,7 @@ var variants = {
         },
         item: {
             display: 'list-item',
-            h: undefined,
-            lineHeight: 1.5
+            h: ''
         }
     },
     unordered: {
@@ -77,8 +76,7 @@ var variants = {
         },
         item: {
             display: 'list-item',
-            h: undefined,
-            lineHeight: 1.5
+            h: ''
         }
     }
 };

package/modal/{modalBackdrop.d.ts → ModalBackdrop.d.ts}

@@ -1,4 +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 . */
+/** 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 → ModalBackdrop.js}

@@ -24,14 +24,13 @@ 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.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: modal;\n"], ["\n\tanimation: vui-fadeIn 0.3s ease;\n\tbackground-color: ", ";\n\tinset: 0px;\n\tposition: fixed;\n\tz-index: modal;\n"
+    /** Displays a dark overlay underneath modal content, but on top of page content. */
+])), (0, utils_1.hexToRGBA)(theme_1.colors.prussian[80], 0.6));
+/** 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));
+    var styles = (0, core_1.useStyleConfig)('Modal', (0, context_1.useModalContext)());
+    return react_1.default.createElement(exports.ModalBackdropBase, __assign({ className: "vui-modalBackdrop", ref: ref }, styles.backdrop, props));
 });
 exports.ModalBackdrop.displayName = 'ModalBackdrop';
 exports.default = exports.ModalBackdrop;

package/modal/ModalContent.d.ts

@@ -0,0 +1,4 @@
+export declare const ModalContentBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
+/** Wraps the content provided to the Modal component. */
+export declare const ModalContent: import("../core").VuiComponent<"div", import("..").SystemProps>;
+export default ModalContent;

package/modal/ModalContent.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.ModalContent = exports.ModalContentBase = void 0;
+var react_1 = __importDefault(require("react"));
+var core_1 = require("../core");
+var utils_1 = require("../utils");
+var context_1 = require("./context");
+exports.ModalContentBase = core_1.styled.divBox(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\tinset: 0px;\n\tposition: fixed;\n\tz-index: modal;\n"], ["\n\tdisplay: flex;\n\tinset: 0px;\n\tposition: fixed;\n\tz-index: modal;\n"
+    /** Wraps the content provided to the Modal component. */
+])));
+/** Wraps the content provided to the Modal component. */
+exports.ModalContent = (0, core_1.vui)(function (props, ref) {
+    var _a;
+    var onBackdropClick = ((_a = (0, context_1.useModalContext)()) !== null && _a !== void 0 ? _a : {}).onBackdropClick;
+    var styles = (0, core_1.useStyleConfig)('Modal', (0, context_1.useModalContext)());
+    return (react_1.default.createElement(exports.ModalContentBase, __assign({ className: "vui-modalContent", ref: ref, tabIndex: -1 }, styles.content, props, { onClick: (0, utils_1.callAll)(props.onClick, onBackdropClick) })));
+});
+exports.ModalContent.displayName = 'ModalContent';
+exports.default = exports.ModalContent;
+var templateObject_1;

package/modal/index.d.ts

@@ -5,3 +5,5 @@ export * from './modal';
 export { default as Modal } from './modal';
 export * from './modal.types';
 export * from './modalBackdrop';
+export * from './modalContent';
+export * from './modalManager';

package/modal/index.js

@@ -22,3 +22,5 @@ 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);
+__exportStar(require("./modalContent"), exports);
+__exportStar(require("./modalManager"), exports);

package/modal/modal.d.ts

@@ -1,10 +1,15 @@
+import { VuiComponent } from '../core';
 import { ModalProps } from './modal.types';
-export declare const ModalBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
+import ModalBackdrop from './ModalBackdrop';
+import ModalContent from './ModalContent';
 /**
  * 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 declare const Modal: VuiComponent<"div", ModalProps> & {
+    Backdrop: typeof ModalBackdrop;
+    Content: typeof ModalContent;
+};
 export default Modal;

package/modal/modal.js

@@ -1,8 +1,4 @@
 "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++) {
@@ -48,24 +44,18 @@ 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;
+exports.Modal = void 0;
 var react_1 = __importStar(require("react"));
 var react_remove_scroll_1 = require("react-remove-scroll");
+var box_1 = __importDefault(require("../box"));
 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 ModalBackdrop_1 = __importDefault(require("./ModalBackdrop"));
+var ModalContent_1 = __importDefault(require("./ModalContent"));
 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'.
@@ -73,37 +63,51 @@ exports.ModalBase = core_1.styled.divBox(templateObject_1 || (templateObject_1 =
  * 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 _a, _b;
+    var allowPinchZoom = props.allowPinchZoom, children = props.children, className = props.className, contentProps = props.contentProps, disableAutoFocus = props.disableAutoFocus, disableBackdropClose = props.disableBackdropClose, disableEscClose = props.disableEscClose, disablePortal = props.disablePortal, disableReturnFocus = props.disableReturnFocus, disableScrollLock = props.disableScrollLock, disableTrapFocus = props.disableTrapFocus, finalFocusRef = props.finalFocusRef, hideBackdrop = props.hideBackdrop, initialFocusRef = props.initialFocusRef, isOpen = props.isOpen, onBackdropClickProp = props.onBackdropClick, onClose = props.onClose, onEsc = props.onEsc, preserveScrollBar = props.preserveScrollBar, size = props.size, variant = props.variant, rest = __rest(props, ["allowPinchZoom", "children", "className", "contentProps", "disableAutoFocus", "disableBackdropClose", "disableEscClose", "disablePortal", "disableReturnFocus", "disableScrollLock", "disableTrapFocus", "finalFocusRef", "hideBackdrop", "initialFocusRef", "isOpen", "onBackdropClick", "onClose", "onEsc", "preserveScrollBar", "size", "variant"]);
     var modalRef = (0, react_1.useRef)(null);
+    var mouseDownTarget = (0, react_1.useRef)(null);
     (0, modalManager_1.useModalManager)(modalRef, isOpen);
     if (!isOpen)
         return null;
     var onBackdropClick = function (e) {
         e.stopPropagation();
+        // Avoid closing modal when click starts inside the content and is released outside
+        if (mouseDownTarget.current !== e.target)
+            return;
         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 };
+    var onMouseDown = function (e) {
+        mouseDownTarget.current = e.target;
+    };
+    var childProps = {
+        onClick: function (e) {
+            var _a, _b;
+            e.stopPropagation();
+            (_b = (_a = children === null || children === void 0 ? void 0 : children.props) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+        },
+        tabIndex: (_b = (_a = children === null || children === void 0 ? void 0 : children.props) === null || _a === void 0 ? void 0 : _a.tabIndex) !== null && _b !== void 0 ? _b : -1
+    };
+    var context = { isOpen: isOpen, onBackdropClick: onBackdropClick, onClose: onClose, size: size, variant: variant };
     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)))))));
+            react_1.default.createElement(box_1.default, __assign({ className: (0, utils_1.cs)('vui-modal', className), ref: (0, utils_1.mergeRefs)(ref, modalRef) }, rest, { onKeyDown: (0, utils_1.callAll)(props.onKeyDown, onKeyDown), onMouseDown: (0, utils_1.callAll)(props.onMouseDown, onMouseDown) }),
+                !hideBackdrop && react_1.default.createElement(ModalBackdrop_1.default, null),
+                react_1.default.createElement(focusLock_1.default, { autoFocus: !disableAutoFocus, finalFocusRef: finalFocusRef, initialFocusRef: initialFocusRef, isDisabled: disableTrapFocus, returnFocus: !disableReturnFocus },
+                    react_1.default.createElement(react_remove_scroll_1.RemoveScroll, { allowPinchZoom: allowPinchZoom, enabled: !disableScrollLock, forwardProps: true, removeScrollBar: !preserveScrollBar },
+                        react_1.default.createElement(ModalContent_1.default, __assign({}, contentProps), (0, react_1.cloneElement)(children, childProps))))))));
 });
+exports.Modal.displayName = 'Modal';
+exports.Modal.Backdrop = ModalBackdrop_1.default;
+exports.Modal.Content = ModalContent_1.default;
 exports.default = exports.Modal;
-var templateObject_1;

package/modal/modal.types.d.ts

@@ -1,14 +1,18 @@
 /// <reference types="react" />
 import { SystemProps } from '../system';
+import { ThemingProps } from '../theme';
 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 & {
+export declare type ModalContentProps = SystemProps;
+export declare type ModalContext = Pick<ModalProps, 'isOpen' | 'onBackdropClick' | 'onClose' | 'size' | 'variant'>;
+export declare type ModalProps = SystemProps & ThemingProps<'Modal'> & {
     /** Handle zoom/pinch gestures on iOS devices when scroll locking is enabled. */
     allowPinchZoom?: boolean;
     /** A single child content element. */
     children: React.ReactElement;
+    /** Props passed to internal ModalContent component. */
+    contentProps?: ModalContentProps;
     /** It won't auto-focus the first focuable element within the 'children' once FocusLock mounts. */
     disableAutoFocus?: boolean;
     /** Clicking Backdrop element will not trigger 'onClose'. */
@@ -21,6 +25,8 @@ export declare type ModalProps = SystemProps & {
     disableReturnFocus?: boolean;
     /** Allows scrolling to happen on the content beneath the Modal. */
     disableScrollLock?: boolean;
+    /** Disables FocusLock mechanism and allows focusing elements outside the Modal. */
+    disableTrapFocus?: 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. */

package/modal/theme.d.ts

@@ -1,6 +1,7 @@
 declare const _default: {
     baseStyle: {};
     defaultProps: {};
+    parts: string[];
     sizes: {};
     variants: {};
 };

package/modal/theme.js

@@ -2,11 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var baseStyle = {};
 var defaultProps = {};
+var parts = ['container', 'backdrop', 'content'];
 var sizes = {};
 var variants = {};
 exports.default = {
     baseStyle: baseStyle,
     defaultProps: defaultProps,
+    parts: parts,
     sizes: sizes,
     variants: variants
 };

package/notification/theme.js

@@ -28,7 +28,7 @@ var defaultProps = {
     colorScheme: 'blue',
     variant: 'subtle'
 };
-var parts = ['container', 'button', 'icon', 'message', 'text', 'title'];
+var parts = ['container', 'button', 'icon', 'text', 'title'];
 var sizes = {};
 var variants = {
     subtle: variantSubtle

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Veracity UI React components library based on Styled Components and @xstyled",
   "main": "index.js",
   "author": "Veracity",