@veracity/vui 0.3.2 → 0.4.0

package/header/helpers.js

@@ -0,0 +1,66 @@
+"use strict";
+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 __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.getHeaderMainLinks = exports.getHeaderAccountSections = void 0;
+var utils_1 = require("../utils");
+var consts_1 = require("./consts");
+/**
+ * Computes Header links for the Account's sections.
+ * Links are selected per environment and modified based on log in state.
+ * @param environment current application environment
+ * @param isLoggedIn is current user logged in
+ */
+function getHeaderAccountSections(environment, isLoggedIn) {
+    if (isLoggedIn === void 0) { isLoggedIn = false; }
+    // Ok to clone object with JSON here
+    var sections = JSON.parse(JSON.stringify(consts_1.headerAccountSectionsTemplate));
+    Object.entries(consts_1.headerAccountSectionsTemplate).forEach(function (_a) {
+        var _b = __read(_a, 2), sectionName = _b[0], section = _b[1];
+        sections[sectionName].links = section.links.map(function (link) {
+            var url = consts_1.headerLinks[environment][link.url];
+            return __assign(__assign({}, link), { url: (0, utils_1.getLoggedInLink)(url, isLoggedIn) });
+        });
+    });
+    return sections;
+}
+exports.getHeaderAccountSections = getHeaderAccountSections;
+/**
+ * Computes Header main links.
+ * Links are selected per environment and modified based on log in state.
+ * @param environment current application environment
+ * @param isLoggedIn is current user logged in
+ */
+function getHeaderMainLinks(environment, isLoggedIn) {
+    if (isLoggedIn === void 0) { isLoggedIn = false; }
+    return consts_1.headerMainLinksTemplate.map(function (link) {
+        var url = consts_1.headerLinks[environment][link.url];
+        return __assign(__assign({}, link), { url: (0, utils_1.getLoggedInLink)(url, isLoggedIn) });
+    });
+}
+exports.getHeaderMainLinks = getHeaderMainLinks;

package/header/index.d.ts

@@ -1,17 +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 './headerContent';
 export * from './headerCreateAccount';
 export * from './headerDivider';
-export * from './headerLink';
-export * from './headerLinks';
+export * from './headerLinkItem';
+export * from './headerLinksList';
 export * from './headerLogo';
 export * from './headerMobileContent';
 export * from './headerMobileToggle';
 export * from './headerNotifications';
-export * from './headerProfile';
 export * from './headerServices';
 export * from './headerSignIn';
+export * from './helpers';
 export * from './loggedInHeader';
 export * from './loggedOutHeader';

package/header/index.js

@@ -14,21 +14,25 @@ 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");
 Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(header_1).default; } });
 __exportStar(require("./header.types"), exports);
+__exportStar(require("./headerAccount"), exports);
+__exportStar(require("./headerAccount.types"), exports);
 __exportStar(require("./headerContent"), exports);
 __exportStar(require("./headerCreateAccount"), exports);
 __exportStar(require("./headerDivider"), exports);
-__exportStar(require("./headerLink"), exports);
-__exportStar(require("./headerLinks"), exports);
+__exportStar(require("./headerLinkItem"), exports);
+__exportStar(require("./headerLinksList"), exports);
 __exportStar(require("./headerLogo"), exports);
 __exportStar(require("./headerMobileContent"), exports);
 __exportStar(require("./headerMobileToggle"), exports);
 __exportStar(require("./headerNotifications"), exports);
-__exportStar(require("./headerProfile"), exports);
 __exportStar(require("./headerServices"), exports);
 __exportStar(require("./headerSignIn"), exports);
+__exportStar(require("./helpers"), exports);
 __exportStar(require("./loggedInHeader"), exports);
 __exportStar(require("./loggedOutHeader"), exports);

package/header/loggedInHeader.d.ts

@@ -1,4 +1,4 @@
 import { LoggedInHeaderProps } from './header.types';
-/** Displays Header content appropriate for logged in users, such as services, notifications or profile information. */
+/** Displays Header content appropriate for logged in users, such as services, notifications or account information. */
 export declare const LoggedInHeader: import("../core").VuiComponent<"div", LoggedInHeaderProps>;
 export default LoggedInHeader;

package/header/loggedInHeader.js

@@ -27,26 +27,30 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LoggedInHeader = void 0;
 var react_1 = __importDefault(require("react"));
+var box_1 = __importDefault(require("../box"));
 var core_1 = require("../core");
 var utils_1 = require("../utils");
 var header_1 = __importDefault(require("./header"));
-/** Displays Header content appropriate for logged in users, such as services, notifications or profile information. */
+/** 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 className = props.className, children = props.children, links = props.links, logo = props.logo, profile = props.profile, services = props.services, notifications = props.notifications, rest = __rest(props, ["className", "children", "links", "logo", "profile", "services", "notifications"]);
+    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"]);
     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,
-            react_1.default.createElement(core_1.RenderOnDesktop, { screen: "lg" },
-                children,
-                (0, utils_1.isArray)(links) ? react_1.default.createElement(header_1.default.Links, { links: links }) : links,
+            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)(profile) ? react_1.default.createElement(header_1.default.Profile, __assign({}, profile)) : profile,
-            react_1.default.createElement(core_1.RenderOnMobile, { screen: "lg" },
+            (0, utils_1.isObject)(account) ? react_1.default.createElement(header_1.default.Account, __assign({}, account)) : 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.Links, { links: links }) : links,
+                    (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)))));
 });
 exports.LoggedInHeader.displayName = 'LoggedInHeader';

package/header/loggedOutHeader.js

@@ -27,6 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LoggedOutHeader = void 0;
 var react_1 = __importDefault(require("react"));
+var box_1 = __importDefault(require("../box"));
 var core_1 = require("../core");
 var utils_1 = require("../utils");
 var header_1 = __importDefault(require("./header"));
@@ -36,19 +37,21 @@ exports.LoggedOutHeader = (0, core_1.vui)(function (props, ref) {
     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,
-            react_1.default.createElement(core_1.RenderOnDesktop, { screen: "lg" },
-                children,
-                (0, utils_1.isArray)(links) ? react_1.default.createElement(header_1.default.Links, { links: links }) : links,
-                react_1.default.createElement(header_1.default.Divider, null),
-                (0, utils_1.isString)(signIn) ? react_1.default.createElement(header_1.default.SignIn, { url: signIn }) : signIn,
-                (0, utils_1.isString)(createAccount) ? react_1.default.createElement(header_1.default.CreateAccount, { url: createAccount }) : createAccount),
-            react_1.default.createElement(core_1.RenderOnMobile, { screen: "lg" },
-                (0, utils_1.isString)(signIn) ? react_1.default.createElement(header_1.default.SignIn, { url: signIn }) : signIn,
+            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)),
+            react_1.default.createElement(core_1.RenderOnMobile, null,
+                (0, utils_1.isObject)(signIn) ? react_1.default.createElement(header_1.default.SignIn, __assign({}, signIn)) : 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.isString)(createAccount) ? react_1.default.createElement(header_1.default.CreateAccount, { url: createAccount }) : createAccount,
-                    (0, utils_1.isArray)(links) ? react_1.default.createElement(header_1.default.Links, { links: links }) : links)))));
+                    (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)))));
 });
 exports.LoggedOutHeader.displayName = 'LoggedOutHeader';
 exports.default = exports.LoggedOutHeader;

package/header/theme.d.ts

@@ -4,19 +4,72 @@ declare const _default: {
     parts: string[];
     sizes: {};
     variants: {
-        test: {
+        dark: {
             container: {
                 bg: string;
-                color: string;
+                borderBottom: number;
             };
-            profile: {
-                content: {
-                    color: string;
-                };
+            account: {
                 trigger: {
+                    bg: string;
                     color: string;
-                    name: string;
+                    hoverBg: string;
+                    activeBg: string;
+                };
+            };
+            createAccount: {
+                link: {
+                    color: {
+                        xs: string;
+                        md: string;
+                    };
+                    hoverColor: {
+                        xs: string;
+                        md: string;
+                    };
+                };
+                text: {
+                    color: {
+                        md: string;
+                    };
+                };
+            };
+            divider: {
+                borderColor: string;
+            };
+            linkItem: {
+                container: {
+                    hoverBg: {
+                        xs: string;
+                        md: string;
+                    };
+                    activeBg: {
+                        xs: string;
+                        md: string;
+                    };
                 };
+                link: {
+                    borderColor: string;
+                };
+            };
+            linksList: {
+                color: {
+                    md: string;
+                };
+            };
+            logo: {
+                svg: {
+                    pathFill: string;
+                };
+            };
+            mobileContent: {
+                top: string;
+            };
+            mobileToggle: {
+                variant: string;
+            };
+            notifications: {
+                variant: string;
             };
             services: {
                 button: {

package/header/theme.js

@@ -4,38 +4,75 @@ var baseStyle = {};
 var defaultProps = {};
 var parts = [
     'container',
+    'account',
     'content',
     'createAccount',
     'divider',
-    'link',
-    'links',
+    'linkItem',
+    'linksList',
     'logo',
     'mobileContent',
     'mobileToggle',
     'notifications',
-    'profile',
     'services',
     'signIn'
 ];
 var sizes = {};
 var variants = {
-    test: {
+    dark: {
         container: {
             bg: 'prussian.80',
-            color: 'white'
+            borderBottom: 0
         },
-        profile: {
-            content: {
-                color: 'prussian.80'
-            },
+        account: {
             trigger: {
-                color: 'green.80',
-                name: 'Ferdynand Kiepski'
+                bg: 'white',
+                color: 'prussian.80',
+                hoverBg: 'blue.20',
+                activeBg: 'blue.30'
+            }
+        },
+        createAccount: {
+            link: {
+                color: { xs: 'blue.80', md: 'blue.60' },
+                hoverColor: { xs: 'blue.60', md: 'blue.40' }
+            },
+            text: {
+                color: { md: 'white' }
+            }
+        },
+        divider: {
+            borderColor: 'white'
+        },
+        linkItem: {
+            container: {
+                hoverBg: { xs: 'blue.20', md: 'prussian.60' },
+                activeBg: { xs: 'blue.30', md: 'prussian.50' }
+            },
+            link: {
+                borderColor: 'pink.80'
+            }
+        },
+        linksList: {
+            color: { md: 'white' }
+        },
+        logo: {
+            svg: {
+                pathFill: 'white'
             }
         },
+        mobileContent: {
+            top: '100%'
+        },
+        mobileToggle: {
+            variant: 'solid'
+        },
+        notifications: {
+            variant: 'solid'
+        },
         services: {
             button: {
-                variant: 'text'
+                variant: 'solid'
             }
         },
         signIn: {

package/icons/baseIcons/fas/fasCalendarAlt.js

@@ -2,6 +2,6 @@
 /* eslint-disable */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
-    details: [32, 32, [], '', 'M9 0C8.44772 0 8 0.447715 8 1V4H5C3.34315 4 2 5.34315 2 7V10H30V7C30 5.34315 28.6569 4 27 4H24V1C24 0.447715 23.5523 0 23 0H21C20.4477 0 20 0.447715 20 1V4H12V1C12 0.447715 11.5523 0 11 0H9Z M30 12H2V29C2 30.6569 3.34315 32 5 32H27C28.6569 32 30 30.6569 30 29V12ZM22 17C22 16.4477 22.4477 16 23 16H25C25.5523 16 26 16.4477 26 17V19C26 19.5523 25.5523 20 25 20H23C22.4477 20 22 19.5523 22 19V17ZM23 24C22.4477 24 22 24.4477 22 25V27C22 27.5523 22.4477 28 23 28H25C25.5523 28 26 27.5523 26 27V25C26 24.4477 25.5523 24 25 24H23ZM14 17C14 16.4477 14.4477 16 15 16H17C17.5523 16 18 16.4477 18 17V19C18 19.5523 17.5523 20 17 20H15C14.4477 20 14 19.5523 14 19V17ZM7 16C6.44772 16 6 16.4477 6 17V19C6 19.5523 6.44772 20 7 20H9C9.55228 20 10 19.5523 10 19V17C10 16.4477 9.55228 16 9 16H7ZM14 25C14 24.4477 14.4477 24 15 24H17C17.5523 24 18 24.4477 18 25V27C18 27.5523 17.5523 28 17 28H15C14.4477 28 14 27.5523 14 27V25ZM7 24C6.44772 24 6 24.4477 6 25V27C6 27.5523 6.44772 28 7 28H9C9.55228 28 10 27.5523 10 27V25C10 24.4477 9.55228 24 9 24H7Z'],
+    details: [448, 512, [], '', 'M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm320-196c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM192 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM64 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z'],
     name: 'fasCalendarAlt'
 };

package/index.d.ts

@@ -16,10 +16,12 @@ export * from './input';
 export * from './link';
 export * from './list';
 export * from './menu';
+export * from './modal';
 export * from './notification';
 export * from './p';
 export * from './panel';
 export * from './popover';
+export * from './portal';
 export * from './radio';
 export * from './skeleton';
 export * from './spinner';

package/index.js

@@ -28,10 +28,12 @@ __exportStar(require("./input"), exports);
 __exportStar(require("./link"), exports);
 __exportStar(require("./list"), exports);
 __exportStar(require("./menu"), exports);
+__exportStar(require("./modal"), exports);
 __exportStar(require("./notification"), exports);
 __exportStar(require("./p"), exports);
 __exportStar(require("./panel"), exports);
 __exportStar(require("./popover"), exports);
+__exportStar(require("./portal"), exports);
 __exportStar(require("./radio"), exports);
 __exportStar(require("./skeleton"), exports);
 __exportStar(require("./spinner"), exports);

package/input/consts.js

@@ -13,8 +13,8 @@ exports.inputStateMapping = {
         colorScheme: 'grey',
         iconProps: {
             animation: 'vui-spin 0.6s linear infinite',
-            fill: ['blue.20', 'blue.50'],
-            icon: 'fadSpinnerThird'
+            name: 'fadSpinnerThird',
+            pathFill: ['blue.20', 'blue.50']
         }
     },
     success: {

package/input/input.types.d.ts

@@ -2,7 +2,7 @@
 import { IconProp, IconProps } from '../icon';
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
-import { AnyElement, ChangeEventHandler, FocusEventHandler, PropsOf } from '../utils';
+import { ChangeEventHandler, FocusEventHandler, PropsOf } from '../utils';
 export declare type InputInputProps = PropsOf<'input', SystemProps>;
 export declare type InputProps = SystemProps & ThemingProps<'Input'> & {
     /** Passed to the inner input. */
@@ -16,9 +16,9 @@ export declare type InputProps = SystemProps & ThemingProps<'Input'> & {
     /** Passed to the inner input. */
     disabled?: boolean;
     /** Socket displaying an icon on the left. */
-    iconLeft?: IconProp | AnyElement;
+    iconLeft?: IconProp | JSX.Element;
     /** Socket displaying an icon on the right. */
-    iconRight?: IconProp | AnyElement;
+    iconRight?: IconProp | JSX.Element;
     /** Socket rendering a custom input element. */
     input?: React.ReactNode;
     /** Props object passed to the inner input. */

package/link/link.types.d.ts

@@ -1,7 +1,7 @@
+/// <reference types="react" />
 import { IconProp } from '../icon';
 import { SystemProps, TypographyProps } from '../system';
 import { ThemingProps } from '../theme';
-import { AnyElement } from '../utils';
 export declare type LinkProps = SystemProps & ThemingProps<'Link'> & {
     /** Available theme colors for this component. @default blue */
     colorScheme?: 'blue' | 'white';
@@ -10,15 +10,15 @@ export declare type LinkProps = SystemProps & ThemingProps<'Link'> & {
     /** Alias for hoverTextDecoration prop. @deprecated */
     hoverDecoration?: TypographyProps['textDecoration'];
     /** Socket displaying an icon on the left. */
-    iconLeft?: IconProp | AnyElement;
+    iconLeft?: IconProp | JSX.Element;
     /** Socket displaying an icon on the right. */
-    iconRight?: IconProp | AnyElement;
+    iconRight?: IconProp | JSX.Element;
     /** Opens the link in new tab with appropriate attributes. */
     isExternal?: boolean;
     /** Displays permanent underline. */
     isUnderlined?: boolean;
     /** Socket displaying text within the Link. */
-    text?: number | string | AnyElement;
+    text?: number | string | JSX.Element;
     /** Alias for fontWeight prop. @deprecated */
     weight?: TypographyProps['fontWeight'];
 };

package/list/listItem.js

@@ -58,7 +58,7 @@ var listIcon_1 = __importDefault(require("./listIcon"));
 var listText_1 = __importDefault(require("./listText"));
 /** Used as optional content wrapper when list item should be a link. */
 var ListItemLink = (0, core_1.vui)(function (props, ref) { return (react_1.default.createElement(link_1.default, __assign({ borderRadius: "none", h: "100%", px: 2, ref: ref, variant: "plain", w: "100%" }, props))); });
-exports.ListItemBase = core_1.styled.liBox(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\tline-height: normal;\n\tmargin-bottom: 1px;\n\toutline: none;\n\ttransition-duration: fast;\n\n\t&[aria-disabled='true'] {\n\t\tbackground-color: disabled.bg;\n\t\tcolor: disabled.color;\n\t\tcursor: not-allowed;\n\t\tuser-select: none;\n\t}\n"], ["\n\tdisplay: flex;\n\tline-height: normal;\n\tmargin-bottom: 1px;\n\toutline: none;\n\ttransition-duration: fast;\n\n\t&[aria-disabled='true'] {\n\t\tbackground-color: disabled.bg;\n\t\tcolor: disabled.color;\n\t\tcursor: not-allowed;\n\t\tuser-select: none;\n\t}\n"
+exports.ListItemBase = core_1.styled.liBox(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\tline-height: normal;\n\toutline: none;\n\ttransition-duration: fast;\n\n\t&[aria-disabled='true'] {\n\t\tbackground-color: disabled.bg;\n\t\tcolor: disabled.color;\n\t\tcursor: not-allowed;\n\t\tuser-select: none;\n\t}\n"], ["\n\tdisplay: flex;\n\tline-height: normal;\n\toutline: none;\n\ttransition-duration: fast;\n\n\t&[aria-disabled='true'] {\n\t\tbackground-color: disabled.bg;\n\t\tcolor: disabled.color;\n\t\tcursor: not-allowed;\n\t\tuser-select: none;\n\t}\n"
     /**
      * Displays a list item with text and optional icons. Can be shown as interactive or selected.
      * Optionally wraps the content with an <a> element when rendering a link.

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,12 +21,16 @@ 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 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) {
@@ -54,10 +39,10 @@ exports.MenuItem = (0, core_1.vui)(function (props, ref) {
     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.js

@@ -36,7 +36,7 @@ exports.MenuList = (0, core_1.vui)(function (props, ref) {
     var contentProps = props.contentProps, contentRef = props.contentRef, rest = __rest(props, ["contentProps", "contentRef"]);
     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", py: 1, ref: ref }, 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/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;