draft-components 0.65.0 → 0.70.0

package/components/date-preset-picker-popover/date-preset-picker-popover.js

@@ -5,112 +5,90 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const popover_1 = require("../popover");
 const date_preset_picker_1 = require("./date-preset-picker");
-exports.DatePresetPickerPopover = (0, react_1.forwardRef)(function DatePresetPickerPopover({ locale, timeZone, defaultIsOpen = false, hideSelectedRange = false, position = 'bottom', alignment = 'start', cancelButtonLabel, confirmButtonLabel, customDatePresetLabel, disableActionButtons, showLoadingIndicator, options, value, onChangeValue, children: render, }, ref) {
+function DatePresetPickerPopover({ locale, timeZone, defaultIsOpen = false, hideSelectedRange = false, placement = 'bottom', alignment = 'start', formatTimeZone = DatePresetPickerPopover.formatTimeZone, formatDateRange = DatePresetPickerPopover.formatDateRange, cancelButtonLabel, confirmButtonLabel, customDatePresetLabel, disableActionButtons, showLoadingIndicator, options, value, children, onChangeValue, }) {
     var _a;
-    const [isShown, setIsShown] = (0, react_1.useState)(defaultIsOpen);
-    const confirmButtonRef = (0, react_1.useRef)(null);
-    const [selectionState, setSelectionState] = (0, react_1.useState)(valueToSelectionState);
-    const selectedDateRange = selectionState.dateRange;
-    const selectedOption = selectionState.option;
-    let formattedDatePreset = '';
-    if (selectedOption) {
-        formattedDatePreset = selectedOption.label;
+    const popover = (0, react_1.useRef)(null);
+    const [selection, setSelection] = (0, react_1.useState)(() => mapValueToSelection(value, options));
+    const selectedDateRange = selection.dateRange;
+    const selectedOption = selection.option;
+    function handleOpenPopover() {
+        setSelection(mapValueToSelection(value, options));
     }
-    let formattedDateRange = '';
-    if (selectedDateRange) {
-        const intl = new Intl.DateTimeFormat(locale, {
-            year: 'numeric',
-            month: 'short',
-            day: 'numeric',
-        });
-        const startDate = intl.format(new Date(selectedDateRange.start));
-        const endDate = intl.format(new Date(selectedDateRange.end));
-        formattedDateRange =
-            startDate !== endDate ? `${startDate} - ${endDate}` : startDate;
-    }
-    let formattedTimeZone = '';
-    if (timeZone) {
-        const intl = new Intl.DateTimeFormat(locale, {
-            timeZone,
-            second: '2-digit',
-            timeZoneName: 'long',
-        });
-        formattedTimeZone = intl.format(new Date()).replace(/^\d{1,2} /, '');
-    }
-    function valueToSelectionState() {
-        const emptySelectionState = { option: null, dateRange: null };
-        if (!value) {
-            return emptySelectionState;
-        }
-        else if (!value.datePreset && value.dateRange) {
-            return { option: null, dateRange: value.dateRange };
-        }
-        else {
-            const datePreset = value.datePreset;
-            const option = options.find((option) => option.datePreset === datePreset);
-            return option
-                ? { option, dateRange: option.dateRange }
-                : emptySelectionState;
-        }
-    }
-    function handleChangeDatePreset(preset) {
-        const option = options.find((option) => option.datePreset === preset);
+    function handleChangeDatePreset(datePreset) {
+        const option = options.find((option) => option.datePreset === datePreset);
         if (option) {
-            setSelectionState({ option, dateRange: option.dateRange });
+            setSelection({ option, dateRange: option.dateRange });
         }
     }
     function handleChangeDateRange(dateRange) {
         const option = options.find((option) => {
-            const optionDateRange = option.dateRange;
-            return (optionDateRange.start === dateRange.start &&
-                optionDateRange.end === dateRange.end);
+            return (option.dateRange.start === dateRange.start &&
+                option.dateRange.end === dateRange.end);
         });
-        setSelectionState({ dateRange, option: option || null });
+        setSelection({ dateRange, option: option || null });
+    }
+    function handleCancel() {
+        var _a;
+        (_a = popover.current) === null || _a === void 0 ? void 0 : _a.close();
     }
     function handleConfirm() {
-        if (selectedOption &&
-            (value == null || value.datePreset !== selectedOption.datePreset)) {
-            onChangeValue({
-                datePreset: selectedOption.datePreset,
-                dateRange: selectedOption.dateRange,
-            });
+        var _a;
+        if (selectedOption) {
+            const isChanged = value == null || value.datePreset !== selectedOption.datePreset;
+            if (isChanged) {
+                onChangeValue({
+                    datePreset: selectedOption.datePreset,
+                    dateRange: selectedOption.dateRange,
+                });
+            }
         }
-        else if (selectedDateRange &&
-            (value == null ||
+        else if (selectedDateRange) {
+            const isChanged = value == null ||
                 value.dateRange.start !== selectedDateRange.start ||
-                value.dateRange.end !== selectedDateRange.end)) {
-            onChangeValue({
-                datePreset: '',
-                dateRange: selectedDateRange,
-            });
+                value.dateRange.end !== selectedDateRange.end;
+            if (isChanged) {
+                onChangeValue({ datePreset: '', dateRange: selectedDateRange });
+            }
         }
-        setIsShown(false);
-    }
-    function openPopover() {
-        setIsShown(true);
-    }
-    function closePopover() {
-        setSelectionState(valueToSelectionState());
-        setIsShown(false);
+        (_a = popover.current) === null || _a === void 0 ? void 0 : _a.close();
     }
-    function togglePopover() {
-        if (isShown) {
-            closePopover();
-        }
-        else {
-            openPopover();
+    const formattedTimeZone = timeZone ? formatTimeZone(timeZone) : '';
+    const formattedDateRange = selectedDateRange
+        ? formatDateRange(selectedDateRange)
+        : '';
+    return ((0, jsx_runtime_1.jsx)(popover_1.Popover, { ref: popover, className: "dc-date-preset-picker-popover", defaultIsOpen: defaultIsOpen, placement: placement, alignment: alignment, anchor: children, onOpen: handleOpenPopover, children: (0, jsx_runtime_1.jsx)(date_preset_picker_1.DatePresetPicker, { locale: locale, formattedTimeZone: formattedTimeZone, formattedDateRange: hideSelectedRange ? '' : formattedDateRange, cancelButtonLabel: cancelButtonLabel, confirmButtonLabel: confirmButtonLabel, customDatePresetLabel: customDatePresetLabel, disableActionButtons: disableActionButtons, showLoadingIndicator: showLoadingIndicator, options: options, dateRange: selection.dateRange, datePreset: ((_a = selection.option) === null || _a === void 0 ? void 0 : _a.datePreset) || '', onChangeDatePreset: handleChangeDatePreset, onChangeDateRange: handleChangeDateRange, onCancel: handleCancel, onConfirm: handleConfirm }) }));
+}
+exports.DatePresetPickerPopover = DatePresetPickerPopover;
+function mapValueToSelection(value, options) {
+    if (value === null || value === void 0 ? void 0 : value.datePreset) {
+        const datePreset = value.datePreset;
+        const option = options.find((option) => option.datePreset === datePreset);
+        if (option) {
+            return { option, dateRange: option.dateRange };
         }
     }
-    return ((0, jsx_runtime_1.jsx)(popover_1.Popover, Object.assign({ ref: ref, className: "dc-date-preset-picker-popover", isShown: isShown, position: position, alignment: alignment, content: (0, jsx_runtime_1.jsx)(date_preset_picker_1.DatePresetPicker, { confirmButtonRef: confirmButtonRef, locale: locale, formattedDateRange: hideSelectedRange ? null : formattedDateRange, formattedTimeZone: formattedTimeZone, cancelButtonLabel: cancelButtonLabel, confirmButtonLabel: confirmButtonLabel, customDatePresetLabel: customDatePresetLabel, disableActionButtons: disableActionButtons, showLoadingIndicator: showLoadingIndicator, options: options, datePreset: ((_a = selectionState.option) === null || _a === void 0 ? void 0 : _a.datePreset) || '', dateRange: selectionState.dateRange, onChangeDatePreset: handleChangeDatePreset, onChangeDateRange: handleChangeDateRange, onCancel: closePopover, onConfirm: handleConfirm }, void 0), focusElementRefAfterOpen: confirmButtonRef, onClose: closePopover }, { children: render({
-            isShown,
-            openPopover,
-            closePopover,
-            togglePopover,
-            formattedDatePreset,
-            formattedDateRange,
-            formattedTimeZone,
-            formattedValue: formattedDatePreset && formattedDateRange
-                ? `${formattedDatePreset}: ${formattedDateRange}`
-                : formattedDateRange,
-        }) }), void 0));
-});
+    if (value === null || value === void 0 ? void 0 : value.dateRange) {
+        return { option: null, dateRange: value.dateRange };
+    }
+    return { option: null, dateRange: null };
+}
+const formatDateRange = (dateRange, locale) => {
+    const intl = new Intl.DateTimeFormat(locale, {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+    });
+    const startDate = intl.format(new Date(dateRange.start));
+    const endDate = intl.format(new Date(dateRange.end));
+    return startDate !== endDate ? `${startDate} - ${endDate}` : startDate;
+};
+DatePresetPickerPopover.formatDateRange = formatDateRange;
+const formatTimeZone = (timeZone, locale) => {
+    const intl = new Intl.DateTimeFormat(locale, {
+        timeZone,
+        second: '2-digit',
+        timeZoneName: 'long',
+    });
+    return intl.format(new Date()).replace(/^\d{1,2} /, '');
+};
+DatePresetPickerPopover.formatTimeZone = formatTimeZone;

package/components/date-preset-picker-popover/date-preset-picker.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode, RefObject } from 'react';
 import { ISODateRange } from '../../lib/plain-date-range';
-import { DatePreset, DatePresetOption, DatePresetSelectProps } from './date-preset-select';
+import { DatePreset, DatePresetOption } from './date-preset-select';
 export interface DatePresetPickerProps {
     cancelButtonRef?: RefObject<HTMLButtonElement>;
     confirmButtonRef?: RefObject<HTMLButtonElement>;
@@ -9,7 +9,7 @@ export interface DatePresetPickerProps {
     confirmButtonLabel?: ReactNode;
     formattedDateRange?: ReactNode;
     formattedTimeZone?: ReactNode;
-    customDatePresetLabel?: DatePresetSelectProps['customDatePresetLabel'];
+    customDatePresetLabel?: string;
     disableActionButtons?: boolean;
     showLoadingIndicator?: boolean;
     options: DatePresetOption[];
@@ -20,4 +20,4 @@ export interface DatePresetPickerProps {
     onCancel(): void;
     onConfirm(): void;
 }
-export declare function DatePresetPicker({ cancelButtonRef, confirmButtonRef, locale, cancelButtonLabel, confirmButtonLabel, customDatePresetLabel, formattedDateRange, formattedTimeZone, disableActionButtons, showLoadingIndicator, options, datePreset, dateRange, onChangeDatePreset, onChangeDateRange, onCancel, onConfirm, }: DatePresetPickerProps): JSX.Element;
+export declare function DatePresetPicker({ locale, cancelButtonLabel, confirmButtonLabel, customDatePresetLabel, formattedDateRange, formattedTimeZone, disableActionButtons, showLoadingIndicator, options, datePreset, dateRange, onChangeDatePreset, onChangeDateRange, onCancel, onConfirm, }: DatePresetPickerProps): JSX.Element;

package/components/date-preset-picker-popover/date-preset-picker.js

@@ -7,7 +7,7 @@ const react_helpers_1 = require("../../lib/react-helpers");
 const date_range_picker_1 = require("../date-range-picker");
 const button_1 = require("../button");
 const date_preset_select_1 = require("./date-preset-select");
-function DatePresetPicker({ cancelButtonRef, confirmButtonRef, locale, cancelButtonLabel = 'Cancel', confirmButtonLabel = 'Confirm', customDatePresetLabel, formattedDateRange, formattedTimeZone, disableActionButtons, showLoadingIndicator, options, datePreset, dateRange, onChangeDatePreset, onChangeDateRange, onCancel, onConfirm, }) {
+function DatePresetPicker({ locale, cancelButtonLabel = 'Cancel', confirmButtonLabel = 'Confirm', customDatePresetLabel, formattedDateRange, formattedTimeZone, disableActionButtons, showLoadingIndicator, options, datePreset, dateRange, onChangeDatePreset, onChangeDateRange, onCancel, onConfirm, }) {
     const phoneBreakpoint = (0, react_1.useMemo)(() => {
         return window.matchMedia('(max-width: 599px)');
     }, []);
@@ -21,6 +21,6 @@ function DatePresetPicker({ cancelButtonRef, confirmButtonRef, locale, cancelBut
             phoneBreakpoint.removeEventListener('change', handleMediaQueryMatch);
         };
     }, [phoneBreakpoint]);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, react_helpers_1.classNames)('dc-date-preset-picker', isPhoneView && 'dc-date-preset-picker_phone-view') }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "dc-date-preset-picker__body" }, { children: [options.length > 0 && ((0, jsx_runtime_1.jsx)(date_preset_select_1.DatePresetSelect, { shouldRenderAsNativeSelect: isPhoneView, customDatePresetLabel: customDatePresetLabel, options: options, value: datePreset, onChangeValue: onChangeDatePreset }, void 0)), (0, jsx_runtime_1.jsx)(date_range_picker_1.DateRangePicker, { locale: locale, value: dateRange, onChangeValue: onChangeDateRange }, void 0)] }), void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "dc-date-preset-picker__footer" }, { children: [formattedDateRange && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "dc-date-preset-picker__selection" }, { children: [(0, jsx_runtime_1.jsx)("span", { children: formattedDateRange }, void 0), formattedTimeZone && (0, jsx_runtime_1.jsx)("small", { children: formattedTimeZone }, void 0)] }), void 0)), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "dc-date-preset-picker__btns" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ ref: cancelButtonRef, appearance: "secondary", disabled: disableActionButtons, onClick: onCancel }, { children: cancelButtonLabel }), void 0), (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ ref: confirmButtonRef, appearance: "primary", disabled: disableActionButtons, isLoading: showLoadingIndicator, onClick: onConfirm }, { children: confirmButtonLabel }), void 0)] }), void 0)] }), void 0)] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, react_helpers_1.classNames)('dc-date-preset-picker', isPhoneView && 'dc-date-preset-picker_phone-view'), children: [(0, jsx_runtime_1.jsxs)("div", { className: "dc-date-preset-picker__body", children: [options.length > 0 && ((0, jsx_runtime_1.jsx)(date_preset_select_1.DatePresetSelect, { shouldRenderAsNativeSelect: isPhoneView, customDatePresetLabel: customDatePresetLabel, options: options, value: datePreset, onChangeValue: onChangeDatePreset })), (0, jsx_runtime_1.jsx)(date_range_picker_1.DateRangePicker, { locale: locale, value: dateRange, onChangeValue: onChangeDateRange })] }), (0, jsx_runtime_1.jsxs)("div", { className: "dc-date-preset-picker__footer", children: [formattedDateRange && ((0, jsx_runtime_1.jsxs)("div", { className: "dc-date-preset-picker__selection", children: [(0, jsx_runtime_1.jsx)("span", { children: formattedDateRange }), formattedTimeZone && (0, jsx_runtime_1.jsx)("small", { children: formattedTimeZone })] })), (0, jsx_runtime_1.jsxs)("div", { className: "dc-date-preset-picker__btns", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { appearance: "secondary", disabled: disableActionButtons, onClick: onCancel, children: cancelButtonLabel }), (0, jsx_runtime_1.jsx)(button_1.Button, { appearance: "primary", disabled: disableActionButtons, isLoading: showLoadingIndicator, onClick: onConfirm, children: confirmButtonLabel })] })] })] }));
 }
 exports.DatePresetPicker = DatePresetPicker;

package/components/date-preset-picker-popover/date-preset-select.js

@@ -5,6 +5,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const select_1 = require("../select");
 const radio_group_1 = require("../radio-group");
 function DatePresetSelect({ shouldRenderAsNativeSelect, customDatePresetLabel = 'Custom', options, value, onChangeValue, }) {
-    return shouldRenderAsNativeSelect ? ((0, jsx_runtime_1.jsxs)(select_1.Select, Object.assign({ fullWidth: true, value: value, onChangeValue: onChangeValue }, { children: [(0, jsx_runtime_1.jsx)("option", Object.assign({ value: "", disabled: true }, { children: customDatePresetLabel }), void 0), options.map((option) => ((0, jsx_runtime_1.jsx)("option", Object.assign({ value: option.datePreset }, { children: option.label }), option.datePreset)))] }), void 0)) : ((0, jsx_runtime_1.jsx)(radio_group_1.RadioGroup, Object.assign({ type: "simple-list", value: value, onChangeValue: onChangeValue }, { children: options.map((option) => ((0, jsx_runtime_1.jsx)(radio_group_1.RadioGroup.Item, { value: option.datePreset, label: option.label }, option.datePreset))) }), void 0));
+    return shouldRenderAsNativeSelect ? ((0, jsx_runtime_1.jsxs)(select_1.Select, { fullWidth: true, value: value, onChangeValue: onChangeValue, children: [(0, jsx_runtime_1.jsx)("option", { value: "", disabled: true, children: customDatePresetLabel }), options.map((option) => ((0, jsx_runtime_1.jsx)("option", { value: option.datePreset, children: option.label }, option.datePreset)))] })) : ((0, jsx_runtime_1.jsx)(radio_group_1.RadioGroup, { type: "simple-list", value: value, onChangeValue: onChangeValue, children: options.map((option) => ((0, jsx_runtime_1.jsx)(radio_group_1.RadioGroup.Item, { value: option.datePreset, label: option.label }, option.datePreset))) }));
 }
 exports.DatePresetSelect = DatePresetSelect;

package/components/date-preset-picker-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/date-range-picker/date-range-picker.js

@@ -93,11 +93,11 @@ function DateRangePicker({ locale, nextYearButtonLabel, nextMonthButtonLabel, pr
                 : focusDate);
         }
     }, [value === null || value === void 0 ? void 0 : value.start]);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "dc-date-picker" }, { children: [(0, jsx_runtime_1.jsx)(calendar_1.Calendar, Object.assign({ locale: locale, nextYearButtonLabel: nextYearButtonLabel, nextMonthButtonLabel: nextMonthButtonLabel, prevYearButtonLabel: prevYearButtonLabel, prevMonthButtonLabel: prevMonthButtonLabel, focusDate: focusDate, onChangeFocusDate: (focusDate) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "dc-date-picker", children: [(0, jsx_runtime_1.jsx)(calendar_1.Calendar, { locale: locale, nextYearButtonLabel: nextYearButtonLabel, nextMonthButtonLabel: nextMonthButtonLabel, prevYearButtonLabel: prevYearButtonLabel, prevMonthButtonLabel: prevMonthButtonLabel, focusDate: focusDate, onChangeFocusDate: (focusDate) => {
                     setFocusDate(focusDate);
                     if (start) {
                         setEnd(focusDate);
                     }
-                } }, { children: renderedWeeks }), void 0), footer && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "dc-date-picker__footer" }, { children: footer }), void 0)] }), void 0));
+                }, children: renderedWeeks }), footer && (0, jsx_runtime_1.jsx)("div", { className: "dc-date-picker__footer", children: footer })] }));
 }
 exports.DateRangePicker = DateRangePicker;

package/components/date-range-picker/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/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,57 @@ 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) {
+            if (focusAfterOpen === null || focusAfterOpen === void 0 ? void 0 : focusAfterOpen.current) {
+                focusAfterOpen.current.focus();
+            }
+        }
+        else {
+            if (focusAfterClose === null || focusAfterClose === void 0 ? void 0 : focusAfterClose.current) {
+                focusAfterClose.current.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';