@veracity/vui 0.3.1 → 0.4.0

package/notification/notification.d.ts

@@ -1,9 +1,13 @@
+import { VuiComponent } from '../core';
 import { NotificationProps } from './notification.types';
 import NotificationButton from './notificationButton';
 import NotificationIcon from './notificationIcon';
 import NotificationText from './notificationText';
 import NotificationTitle from './notificationTitle';
-import { VuiComponent } from '../core';
+/**
+ * Displays informational content, like text and icon with optional action buttons.
+ * Handles multiple states, like info, error or loading.
+ */
 export declare const Notification: VuiComponent<"div", NotificationProps> & {
     Button: typeof NotificationButton;
     Icon: typeof NotificationIcon;

package/notification/notification.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)
@@ -45,24 +26,28 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Notification = void 0;
-var react_1 = __importStar(require("react"));
+var react_1 = __importDefault(require("react"));
+var box_1 = __importDefault(require("../box"));
+var core_1 = require("../core");
+var utils_1 = require("../utils");
 var consts_1 = require("./consts");
 var context_1 = require("./context");
 var notificationButton_1 = __importDefault(require("./notificationButton"));
 var notificationIcon_1 = __importDefault(require("./notificationIcon"));
 var notificationText_1 = __importDefault(require("./notificationText"));
 var notificationTitle_1 = __importDefault(require("./notificationTitle"));
-var box_1 = __importDefault(require("../box"));
-var core_1 = require("../core");
-var utils_1 = require("../utils");
+/**
+ * Displays informational content, like text and icon with optional action buttons.
+ * Handles multiple states, like info, error or loading.
+ */
 exports.Notification = (0, core_1.vui)(function (props, ref) {
     var _a, _b, _c;
-    var action = props.action, children = props.children, className = props.className, _d = props.colorScheme, colorSchemeProp = _d === void 0 ? 'blue' : _d, icon = props.icon, onClose = props.onClose, size = props.size, _e = props.status, status = _e === void 0 ? '' : _e, statusMapping = props.statusMapping, text = props.text, title = props.title, variant = props.variant, rest = __rest(props, ["action", "children", "className", "colorScheme", "icon", "onClose", "size", "status", "statusMapping", "text", "title", "variant"]);
+    var action = props.action, children = props.children, className = props.className, _d = props.colorScheme, colorSchemeProp = _d === void 0 ? 'blue' : _d, icon = props.icon, onClose = props.onClose, size = props.size, status = props.status, statusMapping = props.statusMapping, text = props.text, title = props.title, variant = props.variant, rest = __rest(props, ["action", "children", "className", "colorScheme", "icon", "onClose", "size", "status", "statusMapping", "text", "title", "variant"]);
     var statuses = __assign(__assign({}, consts_1.notificationStatusMapping), statusMapping);
-    var _f = ((_a = statuses[status]) !== null && _a !== void 0 ? _a : {}).colorScheme, colorScheme = _f === void 0 ? colorSchemeProp : _f;
+    var _e = ((_a = statuses[status !== null && status !== void 0 ? status : '']) !== null && _a !== void 0 ? _a : {}).colorScheme, colorScheme = _e === void 0 ? colorSchemeProp : _e;
     var styles = (0, core_1.useStyleConfig)('Notification', __assign({ colorScheme: colorScheme }, props));
-    var iconName = (0, utils_1.isString)(icon) ? icon : (_c = (_b = statuses[status]) === null || _b === void 0 ? void 0 : _b.iconProps) === null || _c === void 0 ? void 0 : _c.name;
-    var context = (0, react_1.useMemo)(function () { return (0, utils_1.filterUndefined)({ colorScheme: colorScheme, size: size, status: status, variant: variant }); }, [colorScheme, size, status, variant]);
+    var iconName = (0, utils_1.isString)(icon) ? icon : (_c = (_b = statuses[status !== null && status !== void 0 ? status : '']) === null || _b === void 0 ? void 0 : _b.iconProps) === null || _c === void 0 ? void 0 : _c.name;
+    var context = (0, utils_1.filterUndefined)({ colorScheme: colorScheme, size: size, status: status, variant: variant });
     return (react_1.default.createElement(context_1.NotificationProvider, { value: context },
         react_1.default.createElement(box_1.default, __assign({ borderRadius: "md", className: (0, utils_1.cs)('vui-notification', className), px: 1.5, py: 1, ref: ref, w: "fit-content" }, styles.container, rest),
             iconName ? react_1.default.createElement(notificationIcon_1.default, { name: iconName }) : icon, children !== null && children !== void 0 ? children : (react_1.default.createElement(notificationText_1.default, null,

package/notification/notification.types.d.ts

@@ -2,17 +2,24 @@ import { ReactNode } from 'react';
 import { BoxProps } from '../box';
 import { IconProp, IconProps } from '../icon';
 import { ThemingProps } from '../theme';
-import { AnyElement } from '../utils';
-export interface NotificationProps extends Omit<BoxProps, 'size' | 'variant'>, ThemingProps<'Notification'> {
+export declare type NotificationProps = Omit<BoxProps, 'size' | 'variant'> & ThemingProps<'Notification'> & {
+    /** Socket displaying a button on the right. */
     action?: ReactNode;
+    /** Available theme colors for this component. @default blue */
     colorScheme?: 'blue' | 'green' | 'red' | 'yellow';
-    icon?: IconProp | AnyElement;
+    /** Socket displaying an icon on the left. */
+    icon?: IconProp | JSX.Element;
+    /** If provided, displays a close button with this function as onClick. */
     onClose?: () => void;
+    /** Modifies Notification style and content based on the given status. */
     status?: NotificationStatus;
+    /** Object definition of styles and content for each status. */
     statusMapping?: NotificationStatusMapping;
+    /** Socket displaying text in the middle. */
     text?: ReactNode;
+    /** Socket displaying title in the middle. */
     title?: ReactNode;
-}
+};
 export declare type NotificationStatus = 'error' | 'info' | 'loading' | 'success' | 'warning';
 export declare type NotificationStatusMapping = Record<string, {
     colorScheme?: NotificationProps['colorScheme'];

package/notification/notificationButton.d.ts

@@ -1,3 +1,4 @@
 import { ButtonProps } from '../button';
+/** Displays an action button within the Notification. */
 export declare const NotificationButton: import("../core").VuiComponent<"button", ButtonProps>;
 export default NotificationButton;

package/notification/notificationButton.js

@@ -16,13 +16,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NotificationButton = void 0;
 var react_1 = __importDefault(require("react"));
-var context_1 = require("./context");
-var core_1 = require("../core");
 var button_1 = __importDefault(require("../button"));
+var core_1 = require("../core");
+var context_1 = require("./context");
+/** Displays an action button within the Notification. */
 exports.NotificationButton = (0, core_1.vui)(function (props, ref) {
-    var _a;
-    var notificationProps = (_a = (0, context_1.useNotification)()) !== null && _a !== void 0 ? _a : {};
-    var mergedProps = __assign(__assign({}, notificationProps), props);
+    var mergedProps = __assign(__assign({}, (0, context_1.useNotification)()), props);
     var styles = (0, core_1.useStyleConfig)('Notification', mergedProps);
     return (react_1.default.createElement(button_1.default, __assign({ className: "vui-notificationButton", colorScheme: mergedProps.colorScheme, ml: 1, mr: -0.5, ref: ref, size: "sm", variant: "text" }, styles.button, props)));
 });

package/notification/notificationIcon.d.ts

@@ -1,3 +1,4 @@
 import { IconProps } from '../icon';
+/** Displays an icon based on the status within the Notification. */
 export declare const NotificationIcon: import("../core").VuiComponent<"svg", IconProps>;
 export default NotificationIcon;

package/notification/notificationIcon.js

@@ -16,17 +16,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NotificationIcon = void 0;
 var react_1 = __importDefault(require("react"));
-var consts_1 = require("./consts");
-var context_1 = require("./context");
 var core_1 = require("../core");
 var icon_1 = __importDefault(require("../icon"));
+var consts_1 = require("./consts");
+var context_1 = require("./context");
+/** Displays an icon based on the status within the Notification. */
 exports.NotificationIcon = (0, core_1.vui)(function (props, ref) {
-    var _a, _b;
-    var notificationProps = (_a = (0, context_1.useNotification)()) !== null && _a !== void 0 ? _a : {};
-    var mergedProps = __assign(__assign({}, notificationProps), props);
+    var _a;
+    var mergedProps = __assign(__assign({}, (0, context_1.useNotification)()), props);
     var styles = (0, core_1.useStyleConfig)('Notification', mergedProps);
-    var _c = mergedProps.status, status = _c === void 0 ? '' : _c;
-    var iconProps = ((_b = consts_1.notificationStatusMapping[status]) !== null && _b !== void 0 ? _b : {}).iconProps;
+    var _b = mergedProps.status, status = _b === void 0 ? '' : _b;
+    var iconProps = ((_a = consts_1.notificationStatusMapping[status]) !== null && _a !== void 0 ? _a : {}).iconProps;
     return (react_1.default.createElement(icon_1.default, __assign({ className: "vui-notificationIcon", mr: 1, my: 0.5, ref: ref, size: "md" }, styles.icon, iconProps, props)));
 });
 exports.NotificationIcon.displayName = 'NotificationIcon';

package/notification/notificationText.d.ts

@@ -1,3 +1,4 @@
 import { TProps } from '../t';
+/** Displays text within the Notification. */
 export declare const NotificationText: import("../core").VuiComponent<"p", TProps>;
 export default NotificationText;

package/notification/notificationText.js

@@ -16,14 +16,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NotificationText = void 0;
 var react_1 = __importDefault(require("react"));
-var context_1 = require("./context");
 var core_1 = require("../core");
 var t_1 = __importDefault(require("../t"));
+var context_1 = require("./context");
+/** Displays text within the Notification. */
 exports.NotificationText = (0, core_1.vui)(function (props, ref) {
-    var _a;
-    var notificationProps = (_a = (0, context_1.useNotification)()) !== null && _a !== void 0 ? _a : {};
-    var mergedProps = __assign(__assign({}, notificationProps), props);
-    var styles = (0, core_1.useStyleConfig)('Notification', mergedProps);
+    var styles = (0, core_1.useStyleConfig)('Notification', __assign(__assign({}, (0, context_1.useNotification)()), props));
     return (react_1.default.createElement(t_1.default, __assign({ className: "vui-notificationText", flex: "1", lineHeight: "24px", minW: 0, py: 0.5, ref: ref }, styles.text, props)));
 });
 exports.NotificationText.displayName = 'NotificationText';

package/notification/notificationTitle.d.ts

@@ -1,3 +1,4 @@
 import { HeadingProps } from '../heading';
+/** Displays a title within the Notification. */
 export declare const NotificationTitle: import("../core").VuiComponent<"h6", HeadingProps>;
 export default NotificationTitle;

package/notification/notificationTitle.js

@@ -16,14 +16,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NotificationTitle = void 0;
 var react_1 = __importDefault(require("react"));
-var context_1 = require("./context");
 var core_1 = require("../core");
 var heading_1 = require("../heading");
+var context_1 = require("./context");
+/** Displays a title within the Notification. */
 exports.NotificationTitle = (0, core_1.vui)(function (props, ref) {
-    var _a;
-    var notificationProps = (_a = (0, context_1.useNotification)()) !== null && _a !== void 0 ? _a : {};
-    var mergedProps = __assign(__assign({}, notificationProps), props);
-    var styles = (0, core_1.useStyleConfig)('Notification', mergedProps);
+    var styles = (0, core_1.useStyleConfig)('Notification', __assign(__assign({}, (0, context_1.useNotification)()), props));
     return react_1.default.createElement(heading_1.H6, __assign({ className: "vui-notificationTitle", display: "inline-flex", ref: ref }, styles.title, props));
 });
 exports.NotificationTitle.displayName = 'NotificationTitle';

package/notification/theme.d.ts

@@ -13,6 +13,7 @@ declare function variantSubtle(props: Dict): {
     };
 };
 declare const _default: {
+    baseStyle: {};
     defaultProps: {
         colorScheme: string;
         variant: string;

package/notification/theme.js

@@ -23,6 +23,7 @@ function variantSubtle(props) {
     }
     return { container: container, button: button };
 }
+var baseStyle = {};
 var defaultProps = {
     colorScheme: 'blue',
     variant: 'subtle'
@@ -33,6 +34,7 @@ var variants = {
     subtle: variantSubtle
 };
 exports.default = {
+    baseStyle: baseStyle,
     defaultProps: defaultProps,
     parts: parts,
     sizes: sizes,

package/p/index.d.ts

@@ -1,3 +1,3 @@
 export * from './p';
-export * from './p.types';
 export { default } from './p';
+export * from './p.types';

package/p/index.js

@@ -15,6 +15,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = void 0;
 __exportStar(require("./p"), exports);
-__exportStar(require("./p.types"), exports);
 var p_1 = require("./p");
 Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(p_1).default; } });
+__exportStar(require("./p.types"), exports);

package/p/p.d.ts

@@ -1,5 +1,5 @@
 import { PProps } from './p.types';
-import { SystemProps } from '../system';
-export declare const PBase: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, SystemProps, never>;
+export declare const PBase: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
+/** Displays a paragraph of text. */
 export declare const P: import("../core").VuiComponent<"p", PProps>;
 export default P;

package/p/p.js

@@ -31,11 +31,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.P = exports.PBase = void 0;
 var react_1 = __importDefault(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
 var core_1 = require("../core");
-var system_1 = require("../system");
 var utils_1 = require("../utils");
-exports.PBase = styled_components_1.default.p.withConfig((0, core_1.forwardPropConfig)(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), system_1.system);
+exports.PBase = core_1.styled.pBox(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\ttransition-duration: fast;\n"], ["\n\ttransition-duration: fast;\n"
+    /** Displays a paragraph of text. */
+])));
+/** Displays a paragraph of text. */
 exports.P = (0, core_1.vui)(function (props, ref) {
     var _a = (0, core_1.omitThemingProps)(props), align = _a.align, casing = _a.casing, children = _a.children, className = _a.className, decoration = _a.decoration, text = _a.text, weight = _a.weight, rest = __rest(_a, ["align", "casing", "children", "className", "decoration", "text", "weight"]);
     var styles = (0, core_1.useStyleConfig)('P', props);
@@ -45,7 +46,7 @@ exports.P = (0, core_1.vui)(function (props, ref) {
         textDecoration: decoration,
         textTransform: casing
     });
-    return (react_1.default.createElement(exports.PBase, __assign({ className: (0, utils_1.cs)('vui-p', className), ref: ref, transitionDuration: "fast" }, styles, aliasedProps, rest), children !== null && children !== void 0 ? children : text));
+    return (react_1.default.createElement(exports.PBase, __assign({ className: (0, utils_1.cs)('vui-p', className), ref: ref }, styles, aliasedProps, rest), children !== null && children !== void 0 ? children : text));
 });
 exports.P.displayName = 'P';
 exports.default = exports.P;

package/p/p.types.d.ts

@@ -1,9 +1,14 @@
 import { SystemProps, TypographyProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface PProps extends SystemProps, ThemingProps<'P'> {
+export declare type PProps = SystemProps & ThemingProps<'P'> & {
+    /** Alias for textAlign prop. @deprecated */
     align?: TypographyProps['textAlign'];
+    /** Alias for textTransform prop. @deprecated */
     casing?: TypographyProps['textTransform'];
+    /** Alias for textDecoration prop. @deprecated */
     decoration?: TypographyProps['textDecoration'];
+    /** Displays given text if no children are provided. */
     text?: number | string;
+    /** Alias for fontWeight prop. @deprecated */
     weight?: TypographyProps['fontWeight'];
-}
+};

package/p/theme.d.ts

@@ -1,4 +1,5 @@
 declare const _default: {
+    baseStyle: {};
     defaultProps: {
         size: string;
     };

package/p/theme.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+var baseStyle = {};
 var defaultProps = {
     size: 'md'
 };
@@ -27,6 +28,7 @@ var sizes = {
 };
 var variants = {};
 exports.default = {
+    baseStyle: baseStyle,
     defaultProps: defaultProps,
     sizes: sizes,
     variants: variants

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Veracity UI React components library based on Styled Components and @xstyled",
   "main": "index.js",
   "author": "Veracity",
@@ -18,6 +18,8 @@
   "dependencies": {
     "@types/styled-components": "^5.1.15",
     "@xstyled/styled-components": "^2.4.1",
+    "react-focus-lock": "^2.7.1",
+    "react-remove-scroll": "^2.4.3",
     "styled-components": "^5.3.1",
     "tippy.js": "^6.3.7"
   },

package/panel/index.d.ts

@@ -1,3 +1,3 @@
 export * from './panel';
-export * from './panel.types';
 export { default } from './panel';
+export * from './panel.types';

package/panel/index.js

@@ -15,6 +15,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = void 0;
 __exportStar(require("./panel"), exports);
-__exportStar(require("./panel.types"), exports);
 var panel_1 = require("./panel");
 Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(panel_1).default; } });
+__exportStar(require("./panel.types"), exports);

package/panel/panel.d.ts

@@ -1,3 +1,7 @@
 import { PanelProps } from './panel.types';
+/**
+ * Displays static or partially interactive content, such as text, images or buttons.
+ * Supports use cases of showing multiple segments of a page, each focusing on different data type or context.
+ */
 export declare const Panel: import("../core").VuiComponent<"div", PanelProps>;
 export default Panel;

package/panel/panel.js

@@ -30,6 +30,10 @@ var react_1 = __importDefault(require("react"));
 var box_1 = __importDefault(require("../box"));
 var core_1 = require("../core");
 var utils_1 = require("../utils");
+/**
+ * Displays static or partially interactive content, such as text, images or buttons.
+ * Supports use cases of showing multiple segments of a page, each focusing on different data type or context.
+ */
 exports.Panel = (0, core_1.vui)(function (props, ref) {
     var _a = (0, core_1.omitThemingProps)(props), className = _a.className, rest = __rest(_a, ["className"]);
     var styles = (0, core_1.useStyleConfig)('Panel', props);

package/panel/panel.types.d.ts

@@ -1,4 +1,3 @@
 import { BoxProps } from '../box';
 import { ThemingProps } from '../theme';
-export interface PanelProps extends Omit<BoxProps, 'size' | 'variant'>, ThemingProps<'Panel'> {
-}
+export declare type PanelProps = Omit<BoxProps, 'size' | 'variant'> & ThemingProps<'Panel'> & {};

package/panel/theme.d.ts

@@ -1,4 +1,5 @@
 declare const _default: {
+    baseStyle: {};
     defaultProps: {
         variant: string;
     };

package/panel/theme.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+var baseStyle = {};
 var defaultProps = {
     variant: 'elevated'
 };
@@ -14,6 +15,7 @@ var variants = {
     }
 };
 exports.default = {
+    baseStyle: baseStyle,
     defaultProps: defaultProps,
     sizes: sizes,
     variants: variants

package/popover/consts.d.ts

@@ -0,0 +1,6 @@
+import { Modifier } from '@popperjs/core';
+import { Plugin } from 'tippy.js';
+/** Closes the popper if 'Escape' is pressed. Tippy plugin. */
+export declare const closeOnEscPlugin: Plugin;
+/** Sets popper width to be the same as reference. Updates on resize, etc. Popper modifier. */
+export declare const matchWidthModifier: Modifier<'matchWidth', any>;

package/popover/consts.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.matchWidthModifier = exports.closeOnEscPlugin = void 0;
+/** Closes the popper if 'Escape' is pressed. Tippy plugin. */
+exports.closeOnEscPlugin = {
+    name: 'closeOnEsc',
+    defaultValue: true,
+    fn: function (_a) {
+        var hide = _a.hide;
+        function onKeyDown(e) {
+            if (e.key === 'Escape') {
+                hide();
+            }
+        }
+        return {
+            onHide: function () {
+                document.removeEventListener('keydown', onKeyDown);
+            },
+            onShow: function () {
+                document.addEventListener('keydown', onKeyDown);
+            }
+        };
+    }
+};
+/** Sets popper width to be the same as reference. Updates on resize, etc. Popper modifier. */
+exports.matchWidthModifier = {
+    name: 'matchWidth',
+    enabled: true,
+    phase: 'beforeWrite',
+    requires: ['computeStyles'],
+    fn: function (_a) {
+        var state = _a.state;
+        state.styles.popper.width = state.rects.reference.width + "px";
+    },
+    effect: function (_a) {
+        var state = _a.state;
+        return function () {
+            var reference = state.elements.reference;
+            state.elements.popper.style.width = reference.offsetWidth + "px";
+        };
+    }
+};

package/popover/index.d.ts

@@ -1,5 +1,5 @@
+export * from './consts';
 export * from './context';
-export * from './plugins';
 export { default, default as Popover } from './popover';
 export * from './popover.types';
 export { default as PopoverContent } from './popoverContent';

package/popover/index.js

@@ -14,8 +14,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.usePopover = exports.PopoverTrigger = exports.PopoverStyle = exports.PopoverContent = exports.Popover = exports.default = void 0;
+__exportStar(require("./consts"), exports);
 __exportStar(require("./context"), exports);
-__exportStar(require("./plugins"), exports);
 var popover_1 = require("./popover");
 Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(popover_1).default; } });
 Object.defineProperty(exports, "Popover", { enumerable: true, get: function () { return __importDefault(popover_1).default; } });

package/popover/popover.d.ts

@@ -1,8 +1,12 @@
 /// <reference types="react" />
 import { PopoverProps } from './popover.types';
-declare function Popover({ children, isLazy, ...props }: PopoverProps): JSX.Element;
+/**
+ * Uses 'usePopover' hook to expose relevant data to its children parts.
+ * By default, renders provided content only when popover is opened (lazy).
+ */
+declare function Popover(props: PopoverProps): JSX.Element;
 declare namespace Popover {
-    var Content: import("..").VuiComponent<"div", import("..").SystemProps>;
+    var Content: import("..").VuiComponent<"div", import("..").BoxProps>;
     var Trigger: import("..").VuiComponent<"button", import("..").SystemProps>;
 }
 export default Popover;

package/popover/popover.js

@@ -1,4 +1,15 @@
 "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 __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)
@@ -20,11 +31,16 @@ var context_1 = require("./context");
 var popoverContent_1 = __importDefault(require("./popoverContent"));
 var popoverTrigger_1 = __importDefault(require("./popoverTrigger"));
 var usePopover_1 = __importDefault(require("./usePopover"));
-function Popover(_a) {
-    var children = _a.children, _b = _a.isLazy, isLazy = _b === void 0 ? true : _b, props = __rest(_a, ["children", "isLazy"]);
-    var popoverProps = (0, usePopover_1.default)(props);
+/**
+ * Uses 'usePopover' hook to expose relevant data to its children parts.
+ * By default, renders provided content only when popover is opened (lazy).
+ */
+function Popover(props) {
+    var children = props.children, _a = props.isLazy, isLazy = _a === void 0 ? true : _a, rest = __rest(props, ["children", "isLazy"]);
+    var popoverProps = (0, usePopover_1.default)(rest);
     var close = popoverProps.close, isOpen = popoverProps.isOpen, open = popoverProps.open;
-    return react_1.default.createElement(context_1.PopoverProvider, { value: popoverProps }, (0, utils_1.runIfFn)(children, { close: close, isOpen: isOpen, open: open }));
+    var context = (0, utils_1.filterUndefined)(__assign({ isLazy: isLazy }, popoverProps));
+    return react_1.default.createElement(context_1.PopoverProvider, { value: context }, (0, utils_1.runIfFn)(children, { close: close, isOpen: isOpen, open: open }));
 }
 exports.default = Popover;
 Popover.Content = popoverContent_1.default;

package/popover/popover.types.d.ts

@@ -1,10 +1,13 @@
+import { BoxProps } from '../box';
 import { SystemProps } from '../system';
 import { RenderProps } from '../utils';
 import { UsePopoverType } from './usePopover';
 import { UsePopoverProps } from './usePopover.types';
-export declare type PopoverContentProps = SystemProps;
+export declare type PopoverContentProps = BoxProps;
 export declare type PopoverProps = UsePopoverProps & {
+    /** Exposes render props to the children. */
     children?: PopoverRenderProps;
+    /** Mounts provided content only when popover is opened for performance. @default true */
     isLazy?: boolean;
 };
 export declare type PopoverRenderProps = RenderProps<{

package/popover/popoverContent.d.ts

@@ -1,2 +1,3 @@
-export declare const PopoverContent: import("../core").VuiComponent<"div", import("..").SystemProps>;
+/** Displays provided content in an overlaying wrapper. */
+export declare const PopoverContent: import("../core").VuiComponent<"div", import("../box").BoxProps>;
 export default PopoverContent;

package/popover/popoverContent.js

@@ -27,9 +27,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PopoverContent = 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 context_1 = require("./context");
+/** Displays provided content in an overlaying wrapper. */
 exports.PopoverContent = (0, core_1.vui)(function (props, ref) {
     var _a;
     var popoverProps = (_a = (0, context_1.usePopoverContext)()) !== null && _a !== void 0 ? _a : {};
@@ -37,7 +39,10 @@ exports.PopoverContent = (0, core_1.vui)(function (props, ref) {
     var children = props.children, rest = __rest(props, ["children"]);
     var styles = (0, core_1.useStyleConfig)('Popover', __assign(__assign({}, popoverProps), props));
     var shouldRenderChildren = isLazy ? isOpen : true;
-    return (react_1.default.createElement(core_1.v.div, __assign({ bg: "white", borderRadius: "md", boxShadow: "2", className: "vui-popoverContent", ref: (0, utils_1.mergeRefs)(setPopper, ref) }, styles.content, rest), shouldRenderChildren ? children : null));
+    return (
+    // Wrapping div prevents an error thrown when conditionally unmounting this component
+    react_1.default.createElement("div", null,
+        react_1.default.createElement(box_1.default, __assign({ bg: "white", borderRadius: "md", boxShadow: "2", className: "vui-popoverContent", overflowY: "auto", ref: (0, utils_1.mergeRefs)(setPopper, ref) }, styles.content, rest), shouldRenderChildren ? children : null)));
 });
 exports.PopoverContent.displayName = 'PopoverContent';
 exports.default = exports.PopoverContent;

package/popover/popoverTrigger.d.ts

@@ -1,2 +1,6 @@
+/**
+ * Displays a trigger component to toggle display of the popover content.
+ * Can be rendered as any component using the 'as' prop. By default renders as a plain button.
+ */
 export declare const PopoverTrigger: import("../core").VuiComponent<"button", import("..").SystemProps>;
 export default PopoverTrigger;

package/popover/popoverTrigger.js

@@ -31,6 +31,10 @@ var react_1 = __importDefault(require("react"));
 var core_1 = require("../core");
 var utils_1 = require("../utils");
 var context_1 = require("./context");
+/**
+ * Displays a trigger component to toggle display of the popover content.
+ * Can be rendered as any component using the 'as' prop. By default renders as a plain button.
+ */
 exports.PopoverTrigger = (0, core_1.vui)(function (props, ref) {
     var _a;
     var _b = (_a = (0, context_1.usePopoverContext)()) !== null && _a !== void 0 ? _a : {}, setReference = _b.setReference, popoverProps = __rest(_b, ["setReference"]);

package/popover/theme.d.ts

@@ -1,4 +1,5 @@
 declare const _default: {
+    baseStyle: {};
     defaultProps: {};
     parts: string[];
     sizes: {};