draft-components 1.0.0-beta.3.1 → 1.0.0-beta.4

package/cjs/components/date-picker/{date-helpers.js → date-helpers.cjs}

@@ -1,44 +1,37 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.toDateISO = exports.parseDateISO = exports.isWeekend = exports.isSameDay = exports.isValidDateISO = exports.getStartOfDay = exports.getEndOfWeek = exports.getStartOfWeek = exports.getWeekday = exports.getEndOfMonth = exports.getStartOfMonth = exports.addDays = exports.setDateMonth = exports.addMonths = exports.setDateYear = exports.addYears = exports.DATE_ISO_REGEX = exports.LAST_WEEKDAY = exports.DAYS_IN_WEEK = exports.MONTHS_IN_YEAR = void 0;
-exports.MONTHS_IN_YEAR = 12;
-exports.DAYS_IN_WEEK = 7;
-exports.LAST_WEEKDAY = 6;
-exports.DATE_ISO_REGEX = /^([0-9]{4})-?(1[0-2]|0[1-9])-?(3[0-1]|0[1-9]|[1-2][0-9])$/;
+'use strict';
+
+const MONTHS_IN_YEAR = 12;
+const DAYS_IN_WEEK = 7;
+const LAST_WEEKDAY = 6;
+const DATE_ISO_REGEX = /^([0-9]{4})-?(1[0-2]|0[1-9])-?(3[0-1]|0[1-9]|[1-2][0-9])$/;
 function addYears(date, amount) {
     // Use ISO date string to deal with years less than 100.
     return parseDateISO(formatDateISOComponents(date.getFullYear() + amount, date.getMonth(), date.getDate()));
 }
-exports.addYears = addYears;
 function setDateYear(date, year) {
     // Use ISO date string to deal with years less than 100.
     return parseDateISO(formatDateISOComponents(year, date.getMonth(), date.getDate()));
 }
-exports.setDateYear = setDateYear;
 function addMonths(date, amount) {
     date = new Date(date);
     date.setMonth(date.getMonth() + amount);
     return date;
 }
-exports.addMonths = addMonths;
 function setDateMonth(date, month) {
     date = new Date(date);
     date.setMonth(month);
     return date;
 }
-exports.setDateMonth = setDateMonth;
 function addDays(date, amount) {
     date = new Date(date);
     date.setDate(date.getDate() + amount);
     return date;
 }
-exports.addDays = addDays;
 function getStartOfMonth(date) {
     date = new Date(date);
     date.setDate(1);
     return date;
 }
-exports.getStartOfMonth = getStartOfMonth;
 function getEndOfMonth(date) {
     date = new Date(date);
     date.setDate(1);
@@ -46,25 +39,21 @@ function getEndOfMonth(date) {
     date.setDate(0);
     return date;
 }
-exports.getEndOfMonth = getEndOfMonth;
 function getWeekday(date, weekStartsOn = 0) {
     let day = date.getDay() - weekStartsOn;
     if (day < 0) {
-        day += exports.DAYS_IN_WEEK;
+        day += DAYS_IN_WEEK;
     }
     return day;
 }
-exports.getWeekday = getWeekday;
 function getStartOfWeek(date, weekStartsOn = 0) {
     const weekday = getWeekday(date, weekStartsOn);
     return addDays(date, -weekday);
 }
-exports.getStartOfWeek = getStartOfWeek;
 function getEndOfWeek(date, weekStartsOn = 0) {
     const weekday = getWeekday(date, weekStartsOn);
-    return addDays(date, exports.LAST_WEEKDAY - weekday);
+    return addDays(date, LAST_WEEKDAY - weekday);
 }
-exports.getEndOfWeek = getEndOfWeek;
 function getStartOfDay(date) {
     date = new Date(date);
     date.setHours(0);
@@ -73,32 +62,26 @@ function getStartOfDay(date) {
     date.setMilliseconds(0);
     return date;
 }
-exports.getStartOfDay = getStartOfDay;
 function isValidDateISO(value) {
-    return exports.DATE_ISO_REGEX.test(value);
+    return DATE_ISO_REGEX.test(value);
 }
-exports.isValidDateISO = isValidDateISO;
 function isSameDay(a, b) {
     return (a.getFullYear() === b.getFullYear() &&
         a.getMonth() === b.getMonth() &&
         a.getDate() === b.getDate());
 }
-exports.isSameDay = isSameDay;
 function isWeekend(date) {
     return date.getDay() === 6 || date.getDay() === 0;
 }
-exports.isWeekend = isWeekend;
 function parseDateISO(date, error = 'The argument must be a date in the ISO format.') {
     if (!isValidDateISO(date)) {
         throw new RangeError(error);
     }
     return getStartOfDay(new Date(date));
 }
-exports.parseDateISO = parseDateISO;
 function toDateISO(date) {
     return formatDateISOComponents(date.getFullYear(), date.getMonth(), date.getDate());
 }
-exports.toDateISO = toDateISO;
 function formatDateISOComponents(year, month, day) {
     return [
         String(year).padStart(4, '0'),
@@ -106,3 +89,24 @@ function formatDateISOComponents(year, month, day) {
         String(day).padStart(2, '0'),
     ].join('-');
 }
+
+exports.DATE_ISO_REGEX = DATE_ISO_REGEX;
+exports.DAYS_IN_WEEK = DAYS_IN_WEEK;
+exports.LAST_WEEKDAY = LAST_WEEKDAY;
+exports.MONTHS_IN_YEAR = MONTHS_IN_YEAR;
+exports.addDays = addDays;
+exports.addMonths = addMonths;
+exports.addYears = addYears;
+exports.getEndOfMonth = getEndOfMonth;
+exports.getEndOfWeek = getEndOfWeek;
+exports.getStartOfDay = getStartOfDay;
+exports.getStartOfMonth = getStartOfMonth;
+exports.getStartOfWeek = getStartOfWeek;
+exports.getWeekday = getWeekday;
+exports.isSameDay = isSameDay;
+exports.isValidDateISO = isValidDateISO;
+exports.isWeekend = isWeekend;
+exports.parseDateISO = parseDateISO;
+exports.setDateMonth = setDateMonth;
+exports.setDateYear = setDateYear;
+exports.toDateISO = toDateISO;

package/cjs/components/date-picker/date-picker.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const dateHelpers = require('./date-helpers.cjs');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+const parseMinMaxProps = require('./parse-min-max-props.cjs');
+const calendar = require('./calendar.cjs');
+
+function DatePicker({ value, onChangeValue, weekStartsOn = 1, min, max, locale, prevMonthButtonLabel, nextMonthButtonLabel, monthSelectLabel, yearInputLabel, className, ...props }) {
+    const { minDate, maxDate } = parseMinMaxProps.parseMinMaxProps({ min, max });
+    const selectedDay = value && dateHelpers.isValidDateISO(value)
+        ? dateHelpers.parseDateISO(value)
+        : null;
+    const getDayProps = (date) => ({
+        isSelected: selectedDay != null && dateHelpers.isSameDay(selectedDay, date),
+    });
+    return (jsxRuntime.jsx("div", { ...props, className: reactHelpers.classNames('dc-datepicker', className), children: jsxRuntime.jsx(calendar.Calendar, { defaultFocusDay: selectedDay, minDate: minDate, maxDate: maxDate, locale: locale, weekStartsOn: weekStartsOn, prevMonthButtonLabel: prevMonthButtonLabel, nextMonthButtonLabel: nextMonthButtonLabel, monthSelectLabel: monthSelectLabel, yearInputLabel: yearInputLabel, getDayProps: getDayProps, onSelectDay: (date) => onChangeValue(dateHelpers.toDateISO(date)) }) }));
+}
+
+exports.DatePicker = DatePicker;

package/cjs/components/date-picker/date-range-picker.cjs

@@ -0,0 +1,61 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const dateRange = require('./date-range.cjs');
+const dateHelpers = require('./date-helpers.cjs');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+const parseMinMaxProps = require('./parse-min-max-props.cjs');
+const react = require('react');
+const calendar = require('./calendar.cjs');
+
+function DateRangePicker({ value, onChangeValue, weekStartsOn = 1, min, max, locale, prevMonthButtonLabel, nextMonthButtonLabel, monthSelectLabel, yearInputLabel, className, ...props }) {
+    const { minDate, maxDate } = parseMinMaxProps.parseMinMaxProps({ min, max });
+    const selectedRange = parseValue(value);
+    const [start, setStart] = react.useState(null);
+    const [end, setEnd] = react.useState(null);
+    const getCalendarDayProps = (date) => {
+        let isSelected = false;
+        let inRange = false;
+        let isRangeStart = false;
+        let isRangeEnd = false;
+        if (start) {
+            const range = start && end
+                ? dateRange.DateRange.create(start, end)
+                : dateRange.DateRange.create(start, start);
+            isRangeStart = dateHelpers.isSameDay(range.start, date);
+            isRangeEnd = dateHelpers.isSameDay(range.end, date);
+            inRange = range.contains(date);
+            isSelected = dateHelpers.isSameDay(start, date);
+        }
+        else if (selectedRange) {
+            isRangeStart = dateHelpers.isSameDay(selectedRange.start, date);
+            isRangeEnd = dateHelpers.isSameDay(selectedRange.end, date);
+            inRange = selectedRange.contains(date);
+            isSelected = isRangeStart || isRangeEnd;
+        }
+        return { isSelected, inRange, isRangeStart, isRangeEnd };
+    };
+    const updateRange = (date) => {
+        if (start) {
+            setEnd(date);
+        }
+    };
+    return (jsxRuntime.jsx("div", { ...props, className: reactHelpers.classNames('dc-datepicker', className), children: jsxRuntime.jsx(calendar.Calendar, { defaultFocusDay: selectedRange?.start, minDate: minDate, maxDate: maxDate, locale: locale, weekStartsOn: weekStartsOn, prevMonthButtonLabel: prevMonthButtonLabel, nextMonthButtonLabel: nextMonthButtonLabel, monthSelectLabel: monthSelectLabel, yearInputLabel: yearInputLabel, getDayProps: getCalendarDayProps, onHoverDay: updateRange, onFocusDay: updateRange, onSelectDay: (date) => {
+                if (start) {
+                    setStart(null);
+                    setEnd(null);
+                    onChangeValue(dateRange.DateRange.create(start, date).toDateISORange());
+                }
+                else {
+                    setStart(date);
+                }
+            } }) }));
+}
+function parseValue(value) {
+    if (value && dateHelpers.isValidDateISO(value.start) && dateHelpers.isValidDateISO(value.end)) {
+        return dateRange.DateRange.create(dateHelpers.parseDateISO(value.start), dateHelpers.parseDateISO(value.end));
+    }
+    return null;
+}
+
+exports.DateRangePicker = DateRangePicker;

package/cjs/components/date-picker/date-range.cjs

@@ -0,0 +1,28 @@
+'use strict';
+
+const dateHelpers = require('./date-helpers.cjs');
+
+class DateRange {
+    constructor(start, end) {
+        if (start > end) {
+            [start, end] = [end, start];
+        }
+        this.start = start;
+        this.end = end;
+    }
+    static create(start, end) {
+        return new DateRange(start, end);
+    }
+    contains(date) {
+        return ((dateHelpers.isSameDay(date, this.start) || date > this.start) &&
+            (dateHelpers.isSameDay(date, this.end) || date < this.end));
+    }
+    toDateISORange() {
+        return {
+            start: dateHelpers.toDateISO(this.start),
+            end: dateHelpers.toDateISO(this.end),
+        };
+    }
+}
+
+exports.DateRange = DateRange;

package/cjs/components/date-picker/icons.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+
+function ChevronLeftIcon(props) {
+    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "1em", height: "1em", ...props, children: jsxRuntime.jsx("path", { fill: "none", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 19.5L8.25 12l7.5-7.5" }) }));
+}
+function ChevronRightIcon(props) {
+    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "1em", height: "1em", ...props, children: jsxRuntime.jsx("path", { fill: "none", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 4.5l7.5 7.5-7.5 7.5" }) }));
+}
+
+exports.ChevronLeftIcon = ChevronLeftIcon;
+exports.ChevronRightIcon = ChevronRightIcon;

package/cjs/components/date-picker/{parse-min-max-props.js → parse-min-max-props.cjs}

@@ -1,19 +1,20 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.parseMinMaxProps = void 0;
-const date_helpers_1 = require("./date-helpers");
+'use strict';
+
+const dateHelpers = require('./date-helpers.cjs');
+
 function parseMinMaxProps(props) {
     const min = props.min;
     const max = props.max;
     const minDate = min
-        ? (0, date_helpers_1.parseDateISO)(min, "The 'min' property must be a date in the ISO format.")
+        ? dateHelpers.parseDateISO(min, "The 'min' property must be a date in the ISO format.")
         : null;
     const maxDate = max
-        ? (0, date_helpers_1.parseDateISO)(max, "The 'max' property must be a date in the ISO format.")
+        ? dateHelpers.parseDateISO(max, "The 'max' property must be a date in the ISO format.")
         : null;
     if (minDate != null && maxDate != null && minDate >= maxDate) {
         throw new RangeError("'min' property must be less than 'max' property.");
     }
     return { minDate, maxDate };
 }
+
 exports.parseMinMaxProps = parseMinMaxProps;

package/cjs/components/date-picker-popover/date-picker-popover.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+const react = require('react');
+const popover = require('../popover/popover.cjs');
+const datePicker = require('../date-picker/date-picker.cjs');
+require('../button/button.cjs');
+require('../button/icon-button.cjs');
+require('../select/select.cjs');
+require('../text-input/text-input.cjs');
+
+function DatePickerPopover({ defaultIsOpen = false, footer, className, children, value, onChangeValue, 
+// DatePickerProps
+min, max, locale, weekStartsOn, prevMonthButtonLabel, nextMonthButtonLabel, monthSelectLabel, yearInputLabel, }) {
+    const popoverRef = react.useRef(null);
+    const handleChangeValue = (value) => {
+        onChangeValue(value);
+        popoverRef.current?.close();
+    };
+    return (jsxRuntime.jsxs(popover.Popover, { ref: popoverRef, className: reactHelpers.classNames('dc-date-picker-popover', className), defaultIsOpen: defaultIsOpen, anchor: children, children: [jsxRuntime.jsx(datePicker.DatePicker, { min: min, max: max, locale: locale, weekStartsOn: weekStartsOn, prevMonthButtonLabel: prevMonthButtonLabel, nextMonthButtonLabel: nextMonthButtonLabel, monthSelectLabel: monthSelectLabel, yearInputLabel: yearInputLabel, value: value, onChangeValue: handleChangeValue }), footer] }));
+}
+
+exports.DatePickerPopover = DatePickerPopover;

package/cjs/components/date-range-picker-popover/date-range-picker-popover-footer.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const button = require('../button/button.cjs');
+require('../button/icon-button.cjs');
+
+function DateRangePickerPopoverFooter({ children, cancelButtonLabel, confirmButtonLabel, onClickCancelButton, onClickConfirmButton, }) {
+    return (jsxRuntime.jsxs("div", { className: "dc-date-range-picker-popover__footer", children: [Boolean(children) && (jsxRuntime.jsx("div", { className: "dc-date-range-picker-popover__footer-content", children: children })), jsxRuntime.jsx(button.Button, { className: "dc-date-range-picker-popover__footer-cancel", variant: "tinted", onClick: onClickCancelButton, children: cancelButtonLabel }), jsxRuntime.jsx(button.Button, { className: "dc-date-range-picker-popover__footer-confirm", appearance: "primary", onClick: onClickConfirmButton, children: confirmButtonLabel })] }));
+}
+
+exports.DateRangePickerPopoverFooter = DateRangePickerPopoverFooter;

package/cjs/components/date-range-picker-popover/date-range-picker-popover-presets.cjs

@@ -0,0 +1,35 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const helpers = require('./helpers.cjs');
+const select = require('../select/select.cjs');
+const radio = require('../radio/radio.cjs');
+const selectionControl = require('../selection-control/selection-control.cjs');
+
+function DateRangePickerPopoverPresets({ isCompactView, customPresetLabel, options, value, onChangeValue, }) {
+    const id = react.useId();
+    const name = `${id}-date-preset`;
+    const selectedOption = helpers.findSelectedOption(value, options);
+    const selectedPreset = selectedOption ? selectedOption.preset : '';
+    function handleChange(event) {
+        const value = event.target.value;
+        const option = options.find((option) => option.preset === value);
+        if (option) {
+            onChangeValue({
+                preset: option.preset,
+                range: option.range,
+            });
+        }
+    }
+    if (isCompactView) {
+        return (jsxRuntime.jsx("div", { className: "dc-date-range-picker-popover__presets", children: jsxRuntime.jsxs(select.Select, { size: "md", isBlock: true, value: selectedPreset, onChange: handleChange, children: [jsxRuntime.jsx("option", { value: "", disabled: true, children: customPresetLabel }), options.map((option) => (jsxRuntime.jsx("option", { value: option.preset, children: option.label }, option.preset)))] }) }));
+    }
+    return (jsxRuntime.jsx("ul", { className: "dc-date-range-picker-popover__presets", children: options.map((option) => {
+            const preset = option.preset;
+            const id = `${name}-${preset}`;
+            return (jsxRuntime.jsx("li", { children: jsxRuntime.jsx(selectionControl.SelectionControl, { label: option.label, labelFor: id, children: jsxRuntime.jsx(radio.Radio, { icon: "check", id: id, name: name, value: preset, checked: preset === selectedPreset, onChange: handleChange }) }) }, option.preset));
+        }) }));
+}
+
+exports.DateRangePickerPopoverPresets = DateRangePickerPopoverPresets;

package/cjs/components/date-range-picker-popover/date-range-picker-popover.cjs

@@ -0,0 +1,59 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+const helpers$1 = require('../../lib/helpers.cjs');
+const helpers = require('./helpers.cjs');
+const react = require('react');
+const useIsCompactView = require('./use-is-compact-view.cjs');
+const popover = require('../popover/popover.cjs');
+require('../button/button.cjs');
+require('../button/icon-button.cjs');
+require('../select/select.cjs');
+require('../text-input/text-input.cjs');
+const dateRangePicker = require('../date-picker/date-range-picker.cjs');
+const dateRangePickerPopoverFooter = require('./date-range-picker-popover-footer.cjs');
+const dateRangePickerPopoverPresets = require('./date-range-picker-popover-presets.cjs');
+
+function DateRangePickerPopover({ defaultIsOpen = false, compactViewBreakpoint = '(max-width: 599px)', customPreset = 'custom', customPresetLabel = 'Custom date preset', placement = 'bottom', alignment = 'start', cancelButtonLabel = 'Cancel', confirmButtonLabel = 'Confirm', footer = null, className, options = [], children, value, onChangeValue, 
+// DateRangePickerProps
+min, max, locale, weekStartsOn, prevMonthButtonLabel, nextMonthButtonLabel, monthSelectLabel, yearInputLabel, }) {
+    const [selection, setSelection] = react.useState(value);
+    const popoverRef = react.useRef(null);
+    const isCompactView = useIsCompactView.useIsCompactView(compactViewBreakpoint);
+    function getPopover() {
+        const popover = popoverRef.current;
+        helpers$1.assertIfNullable(popover, 'Popover ref was not set');
+        return popover;
+    }
+    function handleClickCancelButton() {
+        getPopover().close();
+    }
+    function handleClickConfirmButton() {
+        if (selection) {
+            onChangeValue(selection);
+        }
+        getPopover().close();
+    }
+    function handleChangeDateRange(range) {
+        const selection = { range, preset: customPreset };
+        const selectedOption = helpers.findSelectedOption(selection, options);
+        if (selectedOption) {
+            setSelection({
+                preset: selectedOption.preset,
+                range: selectedOption.range,
+            });
+        }
+        else {
+            setSelection(selection);
+        }
+    }
+    return (jsxRuntime.jsxs(popover.Popover, { className: reactHelpers.classNames(className, {
+            'dc-date-range-picker-popover': true,
+            'dc-date-range-picker-popover_compact': isCompactView,
+        }), ref: popoverRef, placement: placement, alignment: alignment, anchor: children, defaultIsOpen: defaultIsOpen, onOpen: () => setSelection(value), children: [options.length > 0 && (jsxRuntime.jsx(dateRangePickerPopoverPresets.DateRangePickerPopoverPresets, { isCompactView: isCompactView, customPresetLabel: customPresetLabel, options: options, value: selection, onChangeValue: setSelection })), jsxRuntime.jsx(dateRangePicker.DateRangePicker, { className: "dc-date-range-picker-popover__calendar", min: min, max: max, locale: locale, weekStartsOn: weekStartsOn, prevMonthButtonLabel: prevMonthButtonLabel, nextMonthButtonLabel: nextMonthButtonLabel, monthSelectLabel: monthSelectLabel, yearInputLabel: yearInputLabel, value: selection && selection.range, onChangeValue: handleChangeDateRange }), jsxRuntime.jsx(dateRangePickerPopoverFooter.DateRangePickerPopoverFooter, { cancelButtonLabel: cancelButtonLabel, confirmButtonLabel: confirmButtonLabel, onClickCancelButton: handleClickCancelButton, onClickConfirmButton: handleClickConfirmButton, children: typeof footer === 'function'
+                    ? footer({ selection })
+                    : footer })] }));
+}
+
+exports.DateRangePickerPopover = DateRangePickerPopover;

package/cjs/components/date-range-picker-popover/{helpers.js → helpers.cjs}

@@ -1,6 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.findSelectedOption = void 0;
+'use strict';
+
 function findSelectedOption(selection, options) {
     if (!selection) {
         return null;
@@ -12,4 +11,5 @@ function findSelectedOption(selection, options) {
     });
     return selectedOption || null;
 }
+
 exports.findSelectedOption = findSelectedOption;

package/cjs/components/date-range-picker-popover/{use-is-compact-view.js → use-is-compact-view.cjs}

@@ -1,16 +1,16 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useIsCompactView = void 0;
-const react_1 = require("react");
+'use strict';
+
+const react = require('react');
+
 function useIsCompactView(breakpoint) {
-    const compactViewMediaQuery = (0, react_1.useMemo)(() => {
+    const compactViewMediaQuery = react.useMemo(() => {
         if (typeof document !== 'undefined') {
             return window.matchMedia(breakpoint);
         }
         return null;
     }, [breakpoint]);
-    const [isCompactView, setIsCompactView] = (0, react_1.useState)(() => (compactViewMediaQuery === null || compactViewMediaQuery === void 0 ? void 0 : compactViewMediaQuery.matches) || false);
-    (0, react_1.useEffect)(() => {
+    const [isCompactView, setIsCompactView] = react.useState(() => compactViewMediaQuery?.matches || false);
+    react.useEffect(() => {
         if (compactViewMediaQuery) {
             const handleChange = () => {
                 setIsCompactView(compactViewMediaQuery.matches);
@@ -23,4 +23,5 @@ function useIsCompactView(breakpoint) {
     }, [compactViewMediaQuery]);
     return isCompactView;
 }
+
 exports.useIsCompactView = useIsCompactView;

package/cjs/components/dialog/{dialog-body.js → dialog-body.cjs}

@@ -1,18 +1,18 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DialogBody = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const helpers_1 = require("../../lib/helpers");
-const react_helpers_1 = require("../../lib/react-helpers");
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const helpers = require('../../lib/helpers.cjs');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+
 function DialogBody({ scrollShadowTop = false, scrollShadowBottom = false, className, children, }) {
-    const ref = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
+    const ref = react.useRef(null);
+    react.useEffect(() => {
         if (!scrollShadowTop && !scrollShadowBottom) {
             return;
         }
         const el = ref.current;
-        (0, helpers_1.assertIfNullable)(el, 'DialogBody ref was not set');
+        helpers.assertIfNullable(el, 'DialogBody ref was not set');
         const topShadowClass = 'dc-dialog-body_scroll-shadow-top';
         const bottomShadowClass = 'dc-dialog-body_scroll-shadow-bottom';
         const changeShadowsVisibility = () => {
@@ -36,16 +36,17 @@ function DialogBody({ scrollShadowTop = false, scrollShadowBottom = false, class
                 }
             }
         };
-        const resizeObserver = typeof ResizeObserver !== 'undefined'
-            ? new ResizeObserver(changeShadowsVisibility)
-            : null;
-        resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.observe(el);
+        const resizeObserver = typeof ResizeObserver === 'undefined'
+            ? null
+            : new ResizeObserver(changeShadowsVisibility);
+        resizeObserver?.observe(el);
         el.addEventListener('scroll', changeShadowsVisibility);
         return () => {
-            resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.unobserve(el);
+            resizeObserver?.unobserve(el);
             el.removeEventListener('scroll', changeShadowsVisibility);
         };
     }, [scrollShadowTop, scrollShadowBottom]);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, react_helpers_1.classNames)('dc-dialog-body', className), children: children }));
+    return (jsxRuntime.jsx("div", { ref: ref, className: reactHelpers.classNames('dc-dialog-body', className), children: children }));
 }
+
 exports.DialogBody = DialogBody;

package/cjs/components/dialog/{dialog-context.js → dialog-context.cjs}

@@ -1,23 +1,24 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DialogContextProvider = exports.useDialogContext = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const DialogContext = (0, react_1.createContext)(null);
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+
+const DialogContext = react.createContext(null);
 function useDialogContext() {
-    const context = (0, react_1.useContext)(DialogContext);
+    const context = react.useContext(DialogContext);
     if (!context) {
         throw new Error('useDialogContext must be used within DialogProvider');
     }
     return context;
 }
-exports.useDialogContext = useDialogContext;
 function DialogContextProvider(props) {
-    return ((0, jsx_runtime_1.jsx)(DialogContext.Provider, { value: {
+    return (jsxRuntime.jsx(DialogContext.Provider, { value: {
             titleId: props.titleId,
             descriptionId: props.descriptionId,
             isOpen: props.isOpen,
             onClose: props.onClose,
         }, children: props.children }));
 }
+
 exports.DialogContextProvider = DialogContextProvider;
+exports.useDialogContext = useDialogContext;

package/cjs/components/dialog/dialog-footer.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+
+function DialogFooter({ className, children, }) {
+    return (jsxRuntime.jsx("div", { className: reactHelpers.classNames('dc-dialog-footer', className), children: children }));
+}
+
+exports.DialogFooter = DialogFooter;

package/cjs/components/dialog/dialog-header.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+const dialogContext = require('./dialog-context.cjs');
+require('../button/button.cjs');
+const iconButton = require('../button/icon-button.cjs');
+const xMarkIcon = require('./x-mark-icon.cjs');
+
+function DialogHeader({ heading, subheading, className, children, }) {
+    const { titleId, descriptionId, onClose, } = dialogContext.useDialogContext();
+    const shouldRenderHeading = Boolean(heading);
+    const shouldRenderDescription = Boolean(subheading);
+    const shouldRenderChildren = Boolean(children);
+    return (jsxRuntime.jsxs("div", { className: reactHelpers.classNames(className, 'dc-dialog-header'), children: [jsxRuntime.jsxs("div", { className: "dc-dialog-header__title-bar", children: [shouldRenderHeading && (jsxRuntime.jsx("h2", { id: titleId, className: "dc-dialog-header__heading", children: heading })), jsxRuntime.jsx(iconButton.IconButton, { icon: jsxRuntime.jsx(xMarkIcon.XMarkIcon, { width: 18, height: 18, strokeWidth: 2 }), variant: "plain", className: "dc-dialog-header__close-btn", onClick: () => onClose() })] }), shouldRenderDescription && (jsxRuntime.jsx("div", { id: descriptionId, className: "dc-dialog-header__subheading", children: subheading })), shouldRenderChildren && (jsxRuntime.jsx("div", { className: "dc-dialog-header__body", children: children }))] }));
+}
+
+exports.DialogHeader = DialogHeader;

package/cjs/components/dialog/dialog.cjs

@@ -0,0 +1,50 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+const useMountTransition = require('../../hooks/use-mount-transition.cjs');
+const useDisableBodyScroll = require('../../hooks/use-disable-body-scroll.cjs');
+const useEscKeyDown = require('../../hooks/use-esc-key-down.cjs');
+const useFocusTrap = require('../../hooks/use-focus-trap.cjs');
+const portal = require('../portal/portal.cjs');
+const dialogContext = require('./dialog-context.cjs');
+
+function Dialog({ width = 'md', isOpen = false, openFocusRef, closeFocusRef, onClose, className, children, ...props }) {
+    const defaultId = react.useId();
+    const dialogRef = react.useRef(null);
+    const durationMs = 200;
+    const { isMounted, className: transitionClass } = useMountTransition.useMountTransition({
+        durationMs,
+        isShown: isOpen,
+        enterFrom: 'dc-dialog_closed',
+        enterTo: 'dc-dialog_opened',
+    });
+    react.useEffect(() => {
+        if (isOpen) {
+            const openFocus = openFocusRef?.current;
+            const closeFocus = closeFocusRef?.current;
+            reactHelpers.focusElement(openFocus);
+            return () => reactHelpers.focusElement(closeFocus);
+        }
+    }, [isOpen, openFocusRef, closeFocusRef]);
+    useEscKeyDown.useEscKeyDown(() => {
+        onClose();
+    }, { isEnabled: isOpen });
+    useFocusTrap.useFocusTrap(dialogRef, { isEnabled: isOpen });
+    useDisableBodyScroll.useDisableBodyScroll({ isEnabled: isOpen });
+    if (!isOpen && !isMounted) {
+        return null;
+    }
+    const id = props.id || defaultId;
+    const titleId = `dialog-title-${id}`;
+    const descriptionId = `dialog-description-${id}`;
+    return (jsxRuntime.jsx(portal.Portal, { children: jsxRuntime.jsxs("div", { style: {
+                '--dc-dialog-transition-duration': `${durationMs}ms`,
+            }, className: reactHelpers.classNames('dc-dialog', transitionClass), children: [jsxRuntime.jsx("div", { className: "dc-dialog-backdrop" }), jsxRuntime.jsx("div", { ...props, ref: dialogRef, className: reactHelpers.classNames(className, {
+                        'dc-dialog-modal': true,
+                        [`dc-dialog-modal_${width}`]: width,
+                    }), role: "dialog", id: id, "aria-labelledby": titleId, "aria-describedby": descriptionId, "aria-modal": true, children: jsxRuntime.jsx(dialogContext.DialogContextProvider, { titleId: titleId, descriptionId: descriptionId, isOpen: isOpen, onClose: onClose, children: children }) })] }) }));
+}
+
+exports.Dialog = Dialog;