draft-components 0.65.0 → 0.70.0

package/components/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -29,6 +33,7 @@ __exportStar(require("./formatted-content"), exports);
 __exportStar(require("./inline-message"), exports);
 __exportStar(require("./label"), exports);
 __exportStar(require("./loading-view"), exports);
+__exportStar(require("./menu"), exports);
 __exportStar(require("./non-ideal-state-view"), exports);
 __exportStar(require("./number-input"), exports);
 __exportStar(require("./password-input"), exports);

package/components/inline-message/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/components/inline-message/inline-message.js

@@ -18,6 +18,6 @@ const inlineMessageIcons = {
 };
 function InlineMessage({ appearance = 'default', shouldShowIcon = false, className, children, ...props }) {
     var _a;
-    return ((0, jsx_runtime_1.jsxs)(formatted_content_1.Footnote, Object.assign({}, props, { className: (0, react_helpers_1.classNames)(className, 'dc-inline-message', `dc-inline-message_${appearance}`) }, { children: [shouldShowIcon ? ((0, jsx_runtime_1.jsx)(svg_icon_1.SvgIcon, { className: "dc-inline-message__icon", "data-testid": "inline-message-icon", icon: (_a = inlineMessageIcons[appearance]) !== null && _a !== void 0 ? _a : inlineMessageIcons.default, width: 16, height: 16 }, void 0)) : null, children] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)(formatted_content_1.Footnote, { ...props, className: (0, react_helpers_1.classNames)(className, 'dc-inline-message', `dc-inline-message_${appearance}`), children: [shouldShowIcon ? ((0, jsx_runtime_1.jsx)(svg_icon_1.SvgIcon, { className: "dc-inline-message__icon", "data-testid": "inline-message-icon", icon: (_a = inlineMessageIcons[appearance]) !== null && _a !== void 0 ? _a : inlineMessageIcons.default, width: 16, height: 16 })) : null, children] }));
 }
 exports.InlineMessage = InlineMessage;

package/components/label/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/components/label/label.js

@@ -5,6 +5,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_helpers_1 = require("../../lib/react-helpers");
 const formatted_content_1 = require("../formatted-content");
 function Label({ isRequired, className, children, ...props }) {
-    return ((0, jsx_runtime_1.jsx)("label", Object.assign({}, props, { className: (0, react_helpers_1.classNames)(className, formatted_content_1.Styles.subheadline, 'dc-label', isRequired && 'dc-label_required') }, { children: children }), void 0));
+    return ((0, jsx_runtime_1.jsx)("label", { ...props, className: (0, react_helpers_1.classNames)(className, formatted_content_1.Styles.subheadline, 'dc-label', isRequired && 'dc-label_required'), children: children }));
 }
 exports.Label = Label;

package/components/loading-view/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/components/loading-view/loading-view.js

@@ -5,6 +5,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_helpers_1 = require("../../lib/react-helpers");
 const spinner_1 = require("../spinner");
 function LoadingView({ padY = '2xl', spinnerSize, className, children, ...props }) {
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, props, { className: (0, react_helpers_1.classNames)(className, 'dc-loading-view', `dc-loading-view_pad-y_${padY}`) }, { children: [(0, jsx_runtime_1.jsx)(spinner_1.Spinner, { className: "dc-loading-view__spinner", size: spinnerSize }, void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "dc-loading-view__content" }, { children: children }), void 0)] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, className: (0, react_helpers_1.classNames)(className, 'dc-loading-view', `dc-loading-view_pad-y_${padY}`), children: [(0, jsx_runtime_1.jsx)(spinner_1.Spinner, { className: "dc-loading-view__spinner", size: spinnerSize }), (0, jsx_runtime_1.jsx)("div", { className: "dc-loading-view__content", children: children })] }));
 }
 exports.LoadingView = LoadingView;

package/components/menu/index.d.ts

@@ -0,0 +1,3 @@
+export * from './menu';
+export * from './menu-button';
+export * from './menu-divider';

package/components/menu/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./menu"), exports);
+__exportStar(require("./menu-button"), exports);
+__exportStar(require("./menu-divider"), exports);

package/components/menu/menu-button.d.ts

@@ -0,0 +1,7 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+export declare type MenuButtonProps = {
+    className?: string;
+    icon?: JSX.Element;
+    children: ReactNode;
+} & ComponentPropsWithRef<'button'>;
+export declare const MenuButton: import("react").ForwardRefExoticComponent<Pick<MenuButtonProps, "key" | "icon" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & import("react").RefAttributes<HTMLButtonElement>>;

package/components/menu/menu-button.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_helpers_1 = require("../../lib/react-helpers");
+exports.MenuButton = (0, react_1.forwardRef)(function MenuButton({ className, children, icon, ...props }, ref) {
+    return ((0, jsx_runtime_1.jsxs)("button", { ...props, ref: ref, className: (0, react_helpers_1.classNames)('dc-menu-button', className), role: "menuitem", tabIndex: -1, children: [icon, (0, jsx_runtime_1.jsx)("span", { children: children })] }));
+});

package/components/menu/menu-divider.d.ts

@@ -0,0 +1,2 @@
+import { ComponentPropsWithoutRef } from 'react';
+export declare function MenuDivider({ className, ...props }: ComponentPropsWithoutRef<'hr'>): JSX.Element;

package/components/menu/menu-divider.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuDivider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_helpers_1 = require("../../lib/react-helpers");
+function MenuDivider({ className, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("hr", { className: (0, react_helpers_1.classNames)('dc-menu__divider', className), "data-testid": "dc-menu-divider", ...props }));
+}
+exports.MenuDivider = MenuDivider;

package/components/menu/menu.d.ts

@@ -0,0 +1,20 @@
+import { KeyboardEventHandler, MouseEventHandler, ReactNode } from 'react';
+import { BoxElevation } from '../box';
+declare type RenderLabel = (props: {
+    id: string;
+    isOpen: boolean;
+    'aria-controls': string;
+    'aria-haspopup': boolean;
+    'aria-expanded': boolean;
+    onClick: MouseEventHandler;
+    onKeyDown: KeyboardEventHandler;
+}) => JSX.Element;
+export declare type MenuProps = {
+    className?: string;
+    elevation?: BoxElevation;
+    defaultIsOpen?: boolean;
+    label: ReactNode | RenderLabel;
+    children: ReactNode;
+};
+export declare function Menu({ className, elevation, defaultIsOpen, label, children, }: MenuProps): JSX.Element;
+export {};

package/components/menu/menu.js

@@ -0,0 +1,123 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Menu = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const keyboard_helpers_1 = require("../../lib/keyboard-helpers");
+const util_1 = require("../../lib/util");
+const guards_1 = require("../../lib/guards");
+const popover_1 = require("../popover");
+const button_1 = require("../button");
+const menu_button_1 = require("./menu-button");
+const react_helpers_1 = require("../../lib/react-helpers");
+function Menu({ className, elevation, defaultIsOpen = false, label, children, }) {
+    const menuId = (0, react_1.useRef)((0, util_1.uniqueId)('dc_menu_'));
+    const menuButtonId = (0, react_1.useRef)((0, util_1.uniqueId)('dc_menu_button_'));
+    const [isOpen, setIsOpen] = (0, react_1.useState)(defaultIsOpen);
+    const openMenu = (0, react_1.useCallback)(() => setIsOpen(true), []);
+    const closeMenu = (0, react_1.useCallback)(() => setIsOpen(false), []);
+    function handleClick() {
+        if (isOpen) {
+            closeMenu();
+        }
+        else {
+            openMenu();
+        }
+    }
+    function handleKeyDown(event) {
+        const isArrowUpPressed = event.key === keyboard_helpers_1.KeyCode.arrowUp;
+        const isArrowDownPressed = event.key === keyboard_helpers_1.KeyCode.arrowDown;
+        if (isArrowUpPressed || isArrowDownPressed) {
+            event.preventDefault();
+            openMenu();
+            window.setTimeout(() => {
+                const menuItems = getMenuItems(menuId.current);
+                const menuItem = isArrowDownPressed
+                    ? menuItems[0]
+                    : menuItems[menuItems.length - 1];
+                if (menuItem) {
+                    menuItem.focus();
+                }
+            }, 0);
+        }
+    }
+    function menuNavigate(event) {
+        const menuItems = getMenuItems(menuId.current);
+        if (menuItems.length === 0) {
+            return;
+        }
+        let activeItemIndex = menuItems.findIndex((item) => item === document.activeElement);
+        if (event.key === keyboard_helpers_1.KeyCode.arrowDown) {
+            activeItemIndex += 1;
+            if (activeItemIndex === menuItems.length) {
+                activeItemIndex = 0;
+            }
+        }
+        else if (event.key === keyboard_helpers_1.KeyCode.arrowUp) {
+            activeItemIndex -= 1;
+            if (activeItemIndex < 0) {
+                activeItemIndex = menuItems.length - 1;
+            }
+        }
+        else if (event.key === keyboard_helpers_1.KeyCode.end) {
+            activeItemIndex = menuItems.length - 1;
+        }
+        else if (event.key === keyboard_helpers_1.KeyCode.home) {
+            activeItemIndex = 0;
+        }
+        else if (event.key.match(/^[A-Za-z]$/)) {
+            const searchString = event.key.toLowerCase();
+            const index = menuItems.findIndex((item) => {
+                const label = item.textContent || '';
+                return label.toLowerCase().startsWith(searchString);
+            });
+            if (index > -1) {
+                activeItemIndex = index;
+            }
+        }
+        const activeMenuItem = menuItems[activeItemIndex];
+        if (activeMenuItem && activeMenuItem !== document.activeElement) {
+            event.preventDefault();
+            activeMenuItem.focus();
+        }
+    }
+    return ((0, jsx_runtime_1.jsx)(popover_1.Popover, { className: (0, react_helpers_1.classNames)('dc-menu', className), elevation: elevation, isOpen: isOpen, onClose: closeMenu, anchor: (0, guards_1.isFunction)(label) ? (label({
+            isOpen,
+            id: menuButtonId.current,
+            'aria-haspopup': true,
+            'aria-expanded': isOpen,
+            'aria-controls': menuId.current,
+            onClick: handleClick,
+            onKeyDown: handleKeyDown,
+        })) : ((0, jsx_runtime_1.jsx)(button_1.Button, { id: menuButtonId.current, "aria-haspopup": true, "aria-expanded": isOpen, "aria-controls": menuId.current, "data-testid": "dc-menu-anchor", onClick: handleClick, onKeyDown: handleKeyDown, children: label })), children: (0, jsx_runtime_1.jsx)("div", { className: "dc-menu__content", id: menuId.current, role: "menu", "aria-labelledby": menuButtonId.current, onKeyDown: menuNavigate, children: react_1.Children.map(children, (child) => {
+                if ((0, react_1.isValidElement)(child) && child.type === menu_button_1.MenuButton) {
+                    return (0, react_1.cloneElement)(child, {
+                        onClick: (event) => {
+                            closeMenu();
+                            const onClick = child.props.onClick;
+                            if ((0, guards_1.isFunction)(onClick)) {
+                                onClick(event);
+                            }
+                        },
+                        onMouseEnter: (event) => {
+                            event.currentTarget.focus();
+                            const onMouseEnter = child.props.onMouseEnter;
+                            if ((0, guards_1.isFunction)(onMouseEnter)) {
+                                onMouseEnter(event);
+                            }
+                        },
+                    });
+                }
+                return child;
+            }) }) }));
+}
+exports.Menu = Menu;
+function getMenuItems(menuId) {
+    const menu = document.getElementById(menuId);
+    if (!menu) {
+        return [];
+    }
+    else {
+        return Array.from(menu.querySelectorAll('button[role="menuitem"]'));
+    }
+}

package/components/non-ideal-state-view/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/components/non-ideal-state-view/non-ideal-state-view.js

@@ -10,7 +10,7 @@ const exclamation_circle_1 = require("../../bootstrap-icons/exclamation-circle")
 const info_circle_1 = require("../../bootstrap-icons/info-circle");
 const check_circle_1 = require("../../bootstrap-icons/check-circle");
 function NonIdealStateView({ spacing = '2xl', icon, heading, description, actions, className, children, ...props }) {
-    return ((0, jsx_runtime_1.jsx)("section", Object.assign({}, props, { className: (0, react_helpers_1.classNames)(className, 'dc-non-ideal-state', `dc-non-ideal-state_spacing_${spacing}`) }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "dc-non-ideal-state__body" }, { children: [icon && getIcon(icon), (0, jsx_runtime_1.jsx)(formatted_content_1.Headline, Object.assign({ as: "h2" }, { children: heading }), void 0), description && ((0, jsx_runtime_1.jsx)(formatted_content_1.Paragraph, Object.assign({ as: "div", className: "dc-non-ideal-state__description" }, { children: description }), void 0)), actions && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "dc-non-ideal-state__actions" }, { children: actions }), void 0)), children && ((0, jsx_runtime_1.jsx)(formatted_content_1.Subheadline, Object.assign({ as: "div", className: "dc-non-ideal-state__content" }, { children: children }), void 0))] }), void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)("section", { ...props, className: (0, react_helpers_1.classNames)(className, 'dc-non-ideal-state', `dc-non-ideal-state_spacing_${spacing}`), children: (0, jsx_runtime_1.jsxs)("div", { className: "dc-non-ideal-state__body", children: [icon && getIcon(icon), (0, jsx_runtime_1.jsx)(formatted_content_1.Headline, { as: "h2", children: heading }), description && ((0, jsx_runtime_1.jsx)(formatted_content_1.Paragraph, { as: "div", className: "dc-non-ideal-state__description", children: description })), actions && ((0, jsx_runtime_1.jsx)("div", { className: "dc-non-ideal-state__actions", children: actions })), children && ((0, jsx_runtime_1.jsx)(formatted_content_1.Subheadline, { as: "div", className: "dc-non-ideal-state__content", children: children }))] }) }));
 }
 exports.NonIdealStateView = NonIdealStateView;
 function getIcon(icon) {
@@ -19,22 +19,22 @@ function getIcon(icon) {
     switch (icon) {
         case 'error':
             modifier = 'dc-non-ideal-state__icon_red';
-            renderedIcon = (0, jsx_runtime_1.jsx)(svg_icon_1.SvgIcon, { size: "3x", icon: exclamation_circle_1.exclamationCircle }, void 0);
+            renderedIcon = (0, jsx_runtime_1.jsx)(svg_icon_1.SvgIcon, { size: "3x", icon: exclamation_circle_1.exclamationCircle });
             break;
         case 'warning':
             modifier = 'dc-non-ideal-state__icon_orange';
-            renderedIcon = (0, jsx_runtime_1.jsx)(svg_icon_1.SvgIcon, { size: "3x", icon: exclamation_triangle_1.exclamationTriangle }, void 0);
+            renderedIcon = (0, jsx_runtime_1.jsx)(svg_icon_1.SvgIcon, { size: "3x", icon: exclamation_triangle_1.exclamationTriangle });
             break;
         case 'info':
             modifier = 'dc-non-ideal-state__icon_blue';
-            renderedIcon = (0, jsx_runtime_1.jsx)(svg_icon_1.SvgIcon, { size: "3x", icon: info_circle_1.infoCircle }, void 0);
+            renderedIcon = (0, jsx_runtime_1.jsx)(svg_icon_1.SvgIcon, { size: "3x", icon: info_circle_1.infoCircle });
             break;
         case 'success':
             modifier = 'dc-non-ideal-state__icon_green';
-            renderedIcon = (0, jsx_runtime_1.jsx)(svg_icon_1.SvgIcon, { size: "3x", icon: check_circle_1.checkCircle }, void 0);
+            renderedIcon = (0, jsx_runtime_1.jsx)(svg_icon_1.SvgIcon, { size: "3x", icon: check_circle_1.checkCircle });
             break;
         default:
             renderedIcon = icon;
     }
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, react_helpers_1.classNames)('dc-non-ideal-state__icon', modifier) }, { children: renderedIcon }), void 0));
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, react_helpers_1.classNames)('dc-non-ideal-state__icon', modifier), children: renderedIcon }));
 }

package/components/number-input/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/components/number-input/number-input.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { TextInputProps } from '../text-input';
-export interface NumberInputProps extends TextInputProps {
+export declare type NumberInputProps = {
+    showIncrementButtons?: boolean;
     incrementButtonLabel?: ReactNode;
     decrementButtonLabel?: ReactNode;
     min?: number;
@@ -8,5 +9,5 @@ export interface NumberInputProps extends TextInputProps {
     step?: number;
     value: string;
     onChangeValue(value: string): void;
-}
-export declare const NumberInput: import("react").ForwardRefExoticComponent<Pick<NumberInputProps, "form" | "slot" | "style" | "title" | "pattern" | "className" | "color" | "height" | "id" | "lang" | "max" | "min" | "name" | "type" | "width" | "role" | "tabIndex" | "crossOrigin" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "size" | "hidden" | "multiple" | "disabled" | "list" | "step" | "alt" | "translate" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "fullWidth" | "invalid" | "src" | "accept" | "autoComplete" | "capture" | "enterKeyHint" | "maxLength" | "minLength" | "readOnly" | "required" | "onChangeValue" | "leadingAddOn" | "trailingAddOn" | "incrementButtonLabel" | "decrementButtonLabel"> & import("react").RefAttributes<HTMLInputElement>>;
+} & TextInputProps;
+export declare const NumberInput: import("react").ForwardRefExoticComponent<Pick<NumberInputProps, "form" | "slot" | "style" | "title" | "pattern" | "className" | "color" | "height" | "id" | "lang" | "max" | "min" | "name" | "type" | "width" | "role" | "tabIndex" | "crossOrigin" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "size" | "hidden" | "multiple" | "disabled" | "list" | "step" | "alt" | "translate" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "fullWidth" | "invalid" | "src" | "accept" | "autoComplete" | "capture" | "enterKeyHint" | "maxLength" | "minLength" | "readOnly" | "required" | "onChangeValue" | "leadingAddOn" | "trailingAddOn" | "showIncrementButtons" | "incrementButtonLabel" | "decrementButtonLabel"> & import("react").RefAttributes<HTMLInputElement>>;

package/components/number-input/number-input.js

@@ -7,8 +7,9 @@ const react_helpers_1 = require("../../lib/react-helpers");
 const keyboard_helpers_1 = require("../../lib/keyboard-helpers");
 const button_1 = require("../button");
 const text_input_1 = require("../text-input");
+const guards_1 = require("../../lib/guards");
 const NUMBER_REGEXP = /^[-+]?([0-9]+(\.[0-9]*)?|\.[0-9]+)([eE][-+]?[0-9]+)?$/;
-exports.NumberInput = (0, react_1.forwardRef)(function NumberInput({ style, className, incrementButtonLabel = '↑', decrementButtonLabel = '↓', min, max, step = 1, disabled, readOnly, fullWidth, size, value, onKeyDown, onChangeValue, ...props }, ref) {
+exports.NumberInput = (0, react_1.forwardRef)(function NumberInput({ style, className, showIncrementButtons = true, incrementButtonLabel = '↑', decrementButtonLabel = '↓', min, max, step = 1, disabled, readOnly, fullWidth, size, value, onBlur, onKeyDown, onChangeValue, ...props }, ref) {
     const numericValue = Number(value) || 0;
     function inRange(value) {
         if (min != null && max != null) {
@@ -38,6 +39,12 @@ exports.NumberInput = (0, react_1.forwardRef)(function NumberInput({ style, clas
             onChangeValue(formatFloat(diff, fractionDigits));
         }
     }
+    function handleBlur(event) {
+        if (value.endsWith('.')) {
+            onChangeValue(value.replace(/\.$/, ''));
+        }
+        (0, guards_1.isFunction)(onBlur) && onBlur(event);
+    }
     function handleChangeValue(value) {
         if (value === '') {
             onChangeValue(value);
@@ -71,13 +78,11 @@ exports.NumberInput = (0, react_1.forwardRef)(function NumberInput({ style, clas
             }
             event.preventDefault();
         }
-        if (typeof onKeyDown === 'function') {
-            onKeyDown(event);
-        }
+        (0, guards_1.isFunction)(onKeyDown) && onKeyDown(event);
     }
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ style: style, className: (0, react_helpers_1.classNames)(className, 'dc-number-input', {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: style, className: (0, react_helpers_1.classNames)(className, 'dc-number-input', {
             'dc-number-input_full-width': fullWidth,
-        }) }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ appearance: "secondary", size: size, noPadding: true, disabled: disabled, onClick: () => !readOnly && decrement(step) }, { children: decrementButtonLabel }), void 0), (0, jsx_runtime_1.jsx)(text_input_1.TextInput, Object.assign({}, props, { ref: ref, className: "dc-number-input__text-input", size: size, disabled: disabled, readOnly: readOnly, fullWidth: fullWidth, type: "text", value: value, onKeyDown: handleKeyDown, onChangeValue: handleChangeValue }), void 0), (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ appearance: "secondary", size: size, noPadding: true, disabled: disabled, onClick: () => !readOnly && increment(step) }, { children: incrementButtonLabel }), void 0)] }), void 0));
+        }), children: [showIncrementButtons && ((0, jsx_runtime_1.jsx)(button_1.Button, { appearance: "secondary", size: size, noPadding: true, disabled: disabled, onClick: () => !readOnly && decrement(step), children: decrementButtonLabel })), (0, jsx_runtime_1.jsx)(text_input_1.TextInput, { ...props, ref: ref, className: "dc-number-input__text-input", size: size, disabled: disabled, readOnly: readOnly, fullWidth: fullWidth, type: "text", value: value, onBlur: handleBlur, onKeyDown: handleKeyDown, onChangeValue: handleChangeValue }), showIncrementButtons && ((0, jsx_runtime_1.jsx)(button_1.Button, { appearance: "secondary", size: size, noPadding: true, disabled: disabled, onClick: () => !readOnly && increment(step), children: incrementButtonLabel }))] }));
 });
 function getFractionDigits(n) {
     var _a;

package/components/password-input/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/components/password-input/password-input.js

@@ -17,6 +17,6 @@ function PasswordInput({ showPasswordAriaTitle = 'Show password', hidePasswordAr
         icon = eye_1.eye;
         title = hidePasswordAriaTitle;
     }
-    return ((0, jsx_runtime_1.jsx)(text_input_1.TextInput, Object.assign({}, props, { className: (0, react_helpers_1.classNames)(className, 'dc-password-input'), type: type, trailingAddOn: (0, jsx_runtime_1.jsx)(button_1.Button, { className: "dc-password-input__button", appearance: "minimal", noPadding: true, leadingIcon: (0, jsx_runtime_1.jsx)(svg_icon_1.SvgIcon, { size: "xl", icon: icon }, void 0), title: title, size: "sm", onClick: () => setType(type === 'password' ? 'text' : 'password') }, void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(text_input_1.TextInput, { ...props, className: (0, react_helpers_1.classNames)(className, 'dc-password-input'), type: type, trailingAddOn: (0, jsx_runtime_1.jsx)(button_1.Button, { className: "dc-password-input__button", appearance: "minimal", noPadding: true, leadingIcon: (0, jsx_runtime_1.jsx)(svg_icon_1.SvgIcon, { size: "xl", icon: icon }), title: title, size: "sm", onClick: () => setType(type === 'password' ? 'text' : 'password') }) }));
 }
 exports.PasswordInput = PasswordInput;

package/components/popover/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/components/popover/popover.d.ts

@@ -1,21 +1,49 @@
-import { MutableRefObject, ReactNode, RefObject } from 'react';
-import { PositionerProps } from '../positioner';
+import { ReactNode, RefCallback } from 'react';
 import { BoxProps } from '../box';
-declare type BaseProps = Omit<PositionerProps, 'anchorRef'>;
+import { Alignment, Placement } from '../positioner/types';
 declare type RenderFn = (props: {
-    ref: RefObject<HTMLElement>;
-}) => JSX.Element;
-interface JSXElementWithRef extends JSX.Element {
-    ref?: RefObject<HTMLElement>;
-}
-export interface PopoverProps extends BaseProps, BoxProps {
-    isShown?: boolean;
-    shouldCaptureFocus?: boolean;
-    focusElementRefAfterOpen?: MutableRefObject<Element | null>;
-    focusElementRefAfterClose?: MutableRefObject<Element | null>;
-    content: ReactNode;
-    children: RenderFn | JSXElementWithRef;
+    setRef: RefCallback<HTMLElement>;
+    openPopover(): void;
+    closePopover(): void;
+    togglePopover(): void;
+}) => ReactNode;
+export declare type PopoverRef = {
+    open(): void;
+    close(): void;
+    toggle(): void;
+};
+export declare type PopoverProps = {
+    defaultIsOpen?: boolean;
+    isOpen?: boolean;
+    shouldTrapFocus?: boolean;
+    shouldFocusAnchorAfterClose?: boolean;
+    placement?: Placement;
+    alignment?: Alignment;
+    anchor: ReactNode | RenderFn;
+    children: ReactNode;
+    onOpen?(): void;
     onClose?(): void;
-}
-export declare const Popover: import("react").ForwardRefExoticComponent<Pick<PopoverProps, "slot" | "style" | "title" | "className" | "color" | "id" | "lang" | "role" | "tabIndex" | "elevation" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "hidden" | "content" | "border" | "padding" | "translate" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "background" | "borderRadius" | "position" | "alignment" | "anchorOffset" | "viewportOffset" | "isShown" | "shouldUpdatePositionWhenScroll" | "isPositionedRelativeToViewport" | "shouldCaptureFocus" | "focusElementRefAfterOpen" | "focusElementRefAfterClose" | "onClose"> & import("react").RefAttributes<HTMLDivElement>>;
+} & BoxProps;
+export declare const Popover: import("react").ForwardRefExoticComponent<{
+    defaultIsOpen?: boolean | undefined;
+    isOpen?: boolean | undefined;
+    shouldTrapFocus?: boolean | undefined;
+    shouldFocusAnchorAfterClose?: boolean | undefined;
+    placement?: Placement | undefined;
+    alignment?: Alignment | undefined;
+    anchor: ReactNode | RenderFn;
+    children: ReactNode;
+    onOpen?(): void;
+    onClose?(): void;
+} & {
+    padding?: import("../box").BoxPadding | undefined;
+    paddingTop?: import("../box").BoxPadding | undefined;
+    paddingRight?: import("../box").BoxPadding | undefined;
+    paddingBottom?: import("../box").BoxPadding | undefined;
+    paddingLeft?: import("../box").BoxPadding | undefined;
+    background?: import("../box").BoxBackground | undefined;
+    border?: import("../box").BoxBorder | undefined;
+    borderRadius?: import("../box").BoxBorderRadius | undefined;
+    elevation?: import("../box").BoxElevation | undefined;
+} & Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & import("react").RefAttributes<PopoverRef>>;
 export {};