draft-components 0.66.0 → 0.71.1

package/components/datetime-input/date-component-input.js

@@ -4,6 +4,6 @@ exports.DateComponentInput = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_helpers_1 = require("../../lib/react-helpers");
 function DateComponentInput({ id, style, className, disabled, readOnly, label, placeholder, name, value, onChange, }) {
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ style: style, className: (0, react_helpers_1.classNames)(className, 'dc-date-component-input') }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ "aria-hidden": true }, { children: value || placeholder }), void 0), (0, jsx_runtime_1.jsx)("input", { id: id, type: "text", "aria-label": label, placeholder: placeholder, autoComplete: "off", disabled: disabled, readOnly: readOnly, value: value, name: name, onChange: onChange }, void 0)] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: style, className: (0, react_helpers_1.classNames)(className, 'dc-date-component-input'), children: [(0, jsx_runtime_1.jsx)("span", { "aria-hidden": true, children: value || placeholder }), (0, jsx_runtime_1.jsx)("input", { id: id, type: "text", "aria-label": label, placeholder: placeholder, autoComplete: "off", disabled: disabled, readOnly: readOnly, value: value, name: name, onChange: onChange })] }));
 }
 exports.DateComponentInput = DateComponentInput;

package/components/datetime-input/datetime-input.js

@@ -135,20 +135,20 @@ exports.DatetimeInput = (0, react_1.forwardRef)(function DatetimeInput({ size =
         const children = [];
         components.forEach((dateComponent, index) => {
             if (index) {
-                children.push((0, jsx_runtime_1.jsx)("span", Object.assign({ className: "dc-datetime-input__separator" }, { children: separator }), `separator-${index}`));
+                children.push((0, jsx_runtime_1.jsx)("span", { className: "dc-datetime-input__separator", children: separator }, `separator-${index}`));
             }
             children.push((0, jsx_runtime_1.jsx)(date_component_input_1.DateComponentInput, { id: ids === null || ids === void 0 ? void 0 : ids[dateComponent], label: (ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels[dateComponent]) || dateComponent, placeholder: placeholders === null || placeholders === void 0 ? void 0 : placeholders[dateComponent], disabled: disabled, readOnly: readOnly, name: dateComponent, value: dateComponents.getDisplayedValue(dateComponent), onChange: handleChange }, dateComponent));
         });
-        return (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "dc-datetime-input__group" }, { children: children }), void 0);
+        return (0, jsx_runtime_1.jsx)("div", { className: "dc-datetime-input__group", children: children });
     }
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, react_helpers_1.classNames)(className, 'dc-datetime-input'), ref: (0, react_helpers_1.mergeRefs)(ref, containerRef), role: "group" }, props, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ "data-testid": "inputs-container", className: (0, react_helpers_1.classNames)('dc-input', 'dc-datetime-input__body', {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, react_helpers_1.classNames)(className, 'dc-datetime-input'), ref: (0, react_helpers_1.mergeRefs)(ref, containerRef), role: "group", ...props, children: (0, jsx_runtime_1.jsxs)("div", { "data-testid": "inputs-container", className: (0, react_helpers_1.classNames)('dc-input', 'dc-datetime-input__body', {
                 'dc-input_focused': focused,
                 'dc-input_disabled': disabled,
                 'dc-input_invalid': invalid,
                 [`dc-input_size_${size}`]: size,
-            }), onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur }, { children: [(type === 'date' || type === 'datetime') &&
+            }), onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, children: [(type === 'date' || type === 'datetime') &&
                     renderInputsGroup(['day', 'month', 'year'], '/'), (type === 'time' || type === 'datetime') &&
-                    renderInputsGroup(['hour', 'minute'], ':')] }), void 0) }), void 0));
+                    renderInputsGroup(['hour', 'minute'], ':')] }) }));
 });
 function defer(callback) {
     const timeout = window.setTimeout(callback, 1);

package/components/datetime-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/dialog/dialog.d.ts

@@ -1,13 +1,19 @@
-import { ComponentPropsWithoutRef, MutableRefObject, ReactNode } from 'react';
-export interface DialogProps extends ComponentPropsWithoutRef<'div'> {
+import { ComponentPropsWithoutRef, ReactNode, RefObject } from 'react';
+export declare type DialogProps = {
+    /**
+     * A ref to an element that should receive focus after open.
+     */
+    focusAfterOpen?: RefObject<HTMLElement>;
+    /**
+     * A ref to an element that should receive focus after close.
+     */
+    focusAfterClose?: RefObject<HTMLElement>;
     isOpen?: boolean;
-    onClose?: () => void;
-    shouldShowCloseButton?: boolean;
-    focusElementRefAfterOpen?: MutableRefObject<Element | null>;
-    focusElementRefAfterClose?: MutableRefObject<Element | null>;
+    showCloseButton?: boolean;
     width?: 'sm' | 'md' | 'lg' | number;
     heading?: ReactNode;
     description?: ReactNode;
-    actions?: ReactNode;
-}
-export declare function Dialog({ style, className, isOpen, onClose, shouldShowCloseButton, focusElementRefAfterOpen, focusElementRefAfterClose, width, heading, description, children, actions, ...props }: DialogProps): JSX.Element | null;
+    footerButtons?: ReactNode;
+    onClose?(): void;
+} & ComponentPropsWithoutRef<'div'>;
+export declare function Dialog({ style, className, isOpen, showCloseButton, focusAfterOpen, focusAfterClose, width, heading, description, footerButtons, children, onClose, ...props }: DialogProps): JSX.Element | null;

package/components/dialog/dialog.js

@@ -3,43 +3,60 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Dialog = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const util_1 = require("../../lib/util");
+const guards_1 = require("../../lib/guards");
 const react_helpers_1 = require("../../lib/react-helpers");
-const use_capture_focus_1 = require("../../hooks/use-capture-focus");
-const use_close_on_esc_press_1 = require("../../hooks/use-close-on-esc-press");
 const use_disable_body_scroll_1 = require("../../hooks/use-disable-body-scroll");
+const use_esc_key_down_1 = require("../../hooks/use-esc-key-down");
+const use_focus_trap_1 = require("../../hooks/use-focus-trap");
 const portal_1 = require("../portal");
 const box_1 = require("../box");
 const button_1 = require("../button");
 const formatted_content_1 = require("../formatted-content");
 const svg_icon_1 = require("../svg-icon");
 const x_1 = require("../../bootstrap-icons/x");
-const dialogWidths = {
+const hooks_1 = require("../../hooks");
+const DIALOG_WIDTH = {
     sm: 320,
     md: 640,
     lg: 960,
 };
-const closeIcon = (0, jsx_runtime_1.jsx)(svg_icon_1.SvgIcon, { size: "2x", icon: x_1.x }, void 0);
-function Dialog({ style, className, isOpen, onClose = util_1.noop, shouldShowCloseButton = true, focusElementRefAfterOpen, focusElementRefAfterClose, width = 'md', heading, description, children, actions, ...props }) {
+function Dialog({ style, className, isOpen = false, showCloseButton = true, focusAfterOpen, focusAfterClose, width = 'md', heading, description, footerButtons, children, onClose, ...props }) {
     const dialogRef = (0, react_1.useRef)(null);
-    const widthInPx = (typeof width === 'string' ? dialogWidths[width] : width) ||
-        dialogWidths.md;
-    (0, use_disable_body_scroll_1.useDisableBodyScroll)(isOpen);
-    (0, use_close_on_esc_press_1.useCloseOnEscPress)(onClose, isOpen);
-    (0, use_capture_focus_1.useCaptureFocus)({
-        isEnabled: isOpen,
-        modalRef: dialogRef,
-        focusElementRefAfterCapture: focusElementRefAfterOpen,
-        focusElementRefAfterRelease: focusElementRefAfterClose,
+    const { shouldRender, animationClassName } = (0, hooks_1.useCloseAnimation)({
+        isOpen,
+        closeDurationMs: 200,
+        className: 'dc-dialog-container_with-animation',
+        openClassName: 'dc-dialog-container_open',
+        closingClassName: 'dc-dialog-container_closing',
     });
-    if (!isOpen) {
+    (0, use_disable_body_scroll_1.useDisableBodyScroll)(isOpen);
+    (0, use_esc_key_down_1.useEscKeyDown)(() => (0, guards_1.isFunction)(onClose) && onClose(), isOpen);
+    (0, use_focus_trap_1.useFocusTrap)(dialogRef, isOpen);
+    (0, react_1.useEffect)(() => {
+        if (!shouldRender) {
+            return;
+        }
+        const focusAfterOpenEl = focusAfterOpen === null || focusAfterOpen === void 0 ? void 0 : focusAfterOpen.current;
+        const focusAfterCloseEl = focusAfterClose === null || focusAfterClose === void 0 ? void 0 : focusAfterClose.current;
+        if (focusAfterOpenEl) {
+            focusAfterOpenEl.focus();
+        }
+        return () => {
+            if (focusAfterCloseEl) {
+                focusAfterCloseEl.focus();
+            }
+        };
+    }, [shouldRender, focusAfterOpen, focusAfterClose]);
+    if (!shouldRender) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(portal_1.Portal, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ "data-testid": "dialog-container", className: "dc-dialog-container", onClick: (event) => {
-                var _a;
-                if (!((_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
-                    onClose();
-                }
-            } }, { children: [(0, jsx_runtime_1.jsx)("div", { tabIndex: 0 }, void 0), (0, jsx_runtime_1.jsxs)(box_1.Box, Object.assign({}, props, { ref: dialogRef, style: { ...style, width: widthInPx }, className: (0, react_helpers_1.classNames)(className, 'dc-dialog'), borderRadius: "lg", padding: "none", elevation: "lg", role: "dialog", "aria-modal": true }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "dc-dialog__header" }, { children: [(heading || description) && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "dc-dialog__header-content" }, { children: [heading && (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.Subheadline, Object.assign({ as: "div", className: "dc-dialog__description" }, { children: description }), void 0))] }), void 0)), shouldShowCloseButton && ((0, jsx_runtime_1.jsx)(button_1.Button, { "data-testid": "dialog-close-button", className: "dc-dialog__close-btn", appearance: "minimal", size: "sm", noPadding: true, leadingIcon: closeIcon, onClick: onClose }, void 0))] }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "dc-dialog__content" }, { children: children }), void 0), actions && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "dc-dialog__actions" }, { children: actions }), void 0)] }), void 0), (0, jsx_runtime_1.jsx)("div", { tabIndex: 0 }, void 0)] }), void 0) }, void 0));
+    let widthPx;
+    if (typeof width === 'string') {
+        widthPx = DIALOG_WIDTH[width] || DIALOG_WIDTH.md;
+    }
+    else {
+        widthPx = width || DIALOG_WIDTH.md;
+    }
+    return ((0, jsx_runtime_1.jsx)(portal_1.Portal, { children: (0, jsx_runtime_1.jsx)("div", { "data-testid": "dialog-container", className: (0, react_helpers_1.classNames)('dc-dialog-container', animationClassName), children: (0, jsx_runtime_1.jsxs)(box_1.Box, { ...props, ref: dialogRef, style: { ...style, width: widthPx }, className: (0, react_helpers_1.classNames)(className, 'dc-dialog'), "aria-modal": true, role: "dialog", padding: "none", elevation: "lg", borderRadius: "lg", children: [(0, jsx_runtime_1.jsxs)("div", { className: "dc-dialog__header", children: [Boolean(heading || description) && ((0, jsx_runtime_1.jsxs)("div", { className: "dc-dialog__header-content", children: [heading && (0, jsx_runtime_1.jsx)(formatted_content_1.Headline, { as: "h2", children: heading }), description && ((0, jsx_runtime_1.jsx)(formatted_content_1.Subheadline, { as: "div", className: "dc-dialog__description", children: description }))] })), showCloseButton && ((0, jsx_runtime_1.jsx)(button_1.Button, { className: "dc-dialog__close-btn", size: "sm", noPadding: true, appearance: "minimal", "data-testid": "dialog-close-button", leadingIcon: (0, jsx_runtime_1.jsx)(svg_icon_1.SvgIcon, { size: "2x", icon: x_1.x }), onClick: onClose }))] }), (0, jsx_runtime_1.jsx)("div", { className: "dc-dialog__content", children: children }), footerButtons && ((0, jsx_runtime_1.jsx)("div", { className: "dc-dialog__actions", children: footerButtons }))] }) }) }));
 }
 exports.Dialog = Dialog;

package/components/dialog/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/form-field/form-field.js

@@ -12,20 +12,20 @@ function FormField({ label, labelFor, required, hint, validationError, className
     if (!inputId.current) {
         inputId.current = (0, util_1.uniqueId)('form-field-input-');
     }
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, props, { className: (0, react_helpers_1.classNames)(className, 'dc-form-field') }, { children: [label ? ((0, jsx_runtime_1.jsx)(label_1.Label, Object.assign({ className: "dc-form-field__label", isRequired: required, htmlFor: inputId.current }, { children: label }), void 0)) : null, (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "dc-form-field__input" }, { children: typeof children === 'function'
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, className: (0, react_helpers_1.classNames)(className, 'dc-form-field'), children: [label ? ((0, jsx_runtime_1.jsx)(label_1.Label, { className: "dc-form-field__label", isRequired: required, htmlFor: inputId.current, children: label })) : null, (0, jsx_runtime_1.jsx)("div", { className: "dc-form-field__input", children: typeof children === 'function'
                     ? children({
                         id: inputId.current,
                         required: Boolean(required),
                         invalid: Boolean(validationError),
                     })
-                    : children }), void 0), (function () {
+                    : children }), (function () {
                 if (validationError) {
-                    return ((0, jsx_runtime_1.jsx)(inline_message_1.InlineMessage, Object.assign({ className: "dc-form-field__error", shouldShowIcon: true, appearance: "error" }, { children: validationError }), void 0));
+                    return ((0, jsx_runtime_1.jsx)(inline_message_1.InlineMessage, { className: "dc-form-field__error", shouldShowIcon: true, appearance: "error", children: validationError }));
                 }
                 if (hint) {
-                    return ((0, jsx_runtime_1.jsx)(inline_message_1.InlineMessage, Object.assign({ className: "dc-form-field__hint" }, { children: hint }), void 0));
+                    return ((0, jsx_runtime_1.jsx)(inline_message_1.InlineMessage, { className: "dc-form-field__hint", children: hint }));
                 }
                 return null;
-            })()] }), void 0));
+            })()] }));
 }
 exports.FormField = FormField;

package/components/form-field/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/formatted-content/formatted-content.js

@@ -16,7 +16,7 @@ exports.Styles = {
     caption: 'dc-fmt-content__caption',
 };
 function FormattedContent({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, props, { className: (0, react_helpers_1.classNames)(className, exports.Styles.formattedContent) }), void 0));
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, className: (0, react_helpers_1.classNames)(className, exports.Styles.formattedContent) }));
 }
 exports.FormattedContent = FormattedContent;
 FormattedContent.Styles = exports.Styles;
@@ -30,38 +30,38 @@ FormattedContent.Subheadline = Subheadline;
 FormattedContent.Footnote = Footnote;
 FormattedContent.Caption = Caption;
 function LargeTitle({ as: Component = 'h1', className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(Component, Object.assign({}, props, { className: (0, react_helpers_1.classNames)(className, exports.Styles.largeTitle) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(Component, { ...props, className: (0, react_helpers_1.classNames)(className, exports.Styles.largeTitle) }));
 }
 exports.LargeTitle = LargeTitle;
 function Title1({ as: Component = 'h1', className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(Component, Object.assign({}, props, { className: (0, react_helpers_1.classNames)(className, exports.Styles.title1) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(Component, { ...props, className: (0, react_helpers_1.classNames)(className, exports.Styles.title1) }));
 }
 exports.Title1 = Title1;
 function Title2({ as: Component = 'h2', className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(Component, Object.assign({}, props, { className: (0, react_helpers_1.classNames)(className, exports.Styles.title2) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(Component, { ...props, className: (0, react_helpers_1.classNames)(className, exports.Styles.title2) }));
 }
 exports.Title2 = Title2;
 function Title3({ as: Component = 'h3', className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(Component, Object.assign({}, props, { className: (0, react_helpers_1.classNames)(className, exports.Styles.title3) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(Component, { ...props, className: (0, react_helpers_1.classNames)(className, exports.Styles.title3) }));
 }
 exports.Title3 = Title3;
 function Headline({ as: Component = 'h4', className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(Component, Object.assign({}, props, { className: (0, react_helpers_1.classNames)(className, exports.Styles.headline) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(Component, { ...props, className: (0, react_helpers_1.classNames)(className, exports.Styles.headline) }));
 }
 exports.Headline = Headline;
 function Paragraph({ className, as: Component = 'p', ...props }) {
-    return ((0, jsx_runtime_1.jsx)(Component, Object.assign({}, props, { className: (0, react_helpers_1.classNames)(className, exports.Styles.paragraph) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(Component, { ...props, className: (0, react_helpers_1.classNames)(className, exports.Styles.paragraph) }));
 }
 exports.Paragraph = Paragraph;
 function Subheadline({ className, as: Component = 'p', ...props }) {
-    return ((0, jsx_runtime_1.jsx)(Component, Object.assign({}, props, { className: (0, react_helpers_1.classNames)(className, exports.Styles.subheadline) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(Component, { ...props, className: (0, react_helpers_1.classNames)(className, exports.Styles.subheadline) }));
 }
 exports.Subheadline = Subheadline;
 function Footnote({ className, as: Component = 'small', ...props }) {
-    return ((0, jsx_runtime_1.jsx)(Component, Object.assign({}, props, { className: (0, react_helpers_1.classNames)(className, exports.Styles.footnote) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(Component, { ...props, className: (0, react_helpers_1.classNames)(className, exports.Styles.footnote) }));
 }
 exports.Footnote = Footnote;
 function Caption({ className, as: Component = 'small', ...props }) {
-    return ((0, jsx_runtime_1.jsx)(Component, Object.assign({}, props, { className: (0, react_helpers_1.classNames)(className, exports.Styles.caption) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(Component, { ...props, className: (0, react_helpers_1.classNames)(className, exports.Styles.caption) }));
 }
 exports.Caption = Caption;

package/components/formatted-content/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/index.d.ts

@@ -17,6 +17,7 @@ export * from './formatted-content';
 export * from './inline-message';
 export * from './label';
 export * from './loading-view';
+export * from './menu';
 export * from './non-ideal-state-view';
 export * from './number-input';
 export * from './password-input';

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];