@arc-ui/components 12.0.0-beta.18 → 12.0.0-beta.20

package/lib/DatePicker/DatePicker.cjs

@@ -1,37 +1,215 @@
 'use client';
 'use strict';
 
-var DatePicker = require('../_shared/cjs/DatePicker-BgU6iidG.cjs');
-require('../_shared/cjs/filter-attrs-eK6E_34o.cjs');
-require('react');
+var DatePicker = require('../_shared/cjs/DatePicker-DS6fAvxD.cjs');
+var filterAttrs = require('../_shared/cjs/filter-attrs-eK6E_34o.cjs');
+var React = require('react');
+var index$1 = require('../_shared/cjs/index-CaO6cOF0.cjs');
+var index$2 = require('../_shared/cjs/index-BLRjGROQ.cjs');
+var TextInput = require('../_shared/cjs/TextInput-ByySubi5.cjs');
+var Calendar = require('../_shared/cjs/Calendar-D4ZSaHHU.cjs');
+var index = require('../_shared/cjs/index-DXNM3D1d.cjs');
 require('../_shared/cjs/index-CTlXMLug.cjs');
-require('../_shared/cjs/index-CaO6cOF0.cjs');
 require('../_shared/cjs/Combination-B-rSVLfT.cjs');
-require('../_shared/cjs/index-DXNM3D1d.cjs');
 require('react/jsx-runtime');
 require('react-dom');
 require('../_shared/cjs/index-Bt7hfZBc.cjs');
 require('../_shared/cjs/index-B11wQrRa.cjs');
 require('../_shared/cjs/index-Dv1xvB_E.cjs');
-require('../_shared/cjs/Calendar-C5C0evEy.cjs');
-require('../_shared/cjs/index-BLRjGROQ.cjs');
-require('../_shared/cjs/index.es-sqSQUWYg.cjs');
-require('../_shared/cjs/use-media-query-BsUfHjPZ.cjs');
+require('../_shared/cjs/FormControl-BPnKQrCm.cjs');
+require('../_shared/cjs/Surface-BFx1yNsq.cjs');
+require('../_shared/cjs/index-DR8Rkav9.cjs');
+require('../_shared/cjs/DisclosureMini-CtvDxVaG.cjs');
 require('../_shared/cjs/Text-Cr5nmYmx.cjs');
 require('../_shared/cjs/suffix-modifier-DLUGR-yG.cjs');
-require('../_shared/cjs/index-DR8Rkav9.cjs');
-require('../_shared/cjs/Surface-BFx1yNsq.cjs');
+require('../_shared/cjs/ThemeIcon-BoxbjTaQ.cjs');
 require('../_shared/cjs/VisuallyHidden-B4XCvPYP.cjs');
+require('../_shared/cjs/Spinner-bbrOwxv2.cjs');
+require('../_shared/cjs/index.es-DBEGtWPg.cjs');
+require('../_shared/cjs/use-media-query-BsUfHjPZ.cjs');
 require('../_shared/cjs/Heading-BEMSkLYR.cjs');
 require('../_shared/cjs/BtIconChevronRightMid-eGxk3ae6.cjs');
-require('../_shared/cjs/Icon-KMACQ1i3.cjs');
-require('../_shared/cjs/TextInput-DT4hi02U.cjs');
-require('../_shared/cjs/FormControl-D3-JbAVb.cjs');
-require('../_shared/cjs/DisclosureMini-CtvDxVaG.cjs');
-require('../_shared/cjs/ThemeIcon-BoxbjTaQ.cjs');
-require('../_shared/cjs/Spinner-bbrOwxv2.cjs');
+require('../_shared/cjs/Icon-CzhyKqMd.cjs');
 
+var convertRangeStringToDateTuple = function (value) {
+    if (value === void 0) { value = ""; }
+    var _a = DatePicker.parseRangeString(value), start = _a.start, end = _a.end;
+    var startDate = DatePicker.isDateValid(start.date)
+        ? new Date("".concat(start.year, "-").concat(start.month, "-").concat(start.day))
+        : undefined;
+    var endDate = DatePicker.isDateValid(end.date)
+        ? new Date("".concat(end.year, "-").concat(end.month, "-").concat(end.day))
+        : undefined;
+    return [startDate, endDate];
+};
 
+var lowerCaseDateFormat = DatePicker.DATE_FORMAT.toLowerCase();
+var DatePickerRange = function (_a) {
+    var _b, _c;
+    var inputStart = _a.inputStart, inputEnd = _a.inputEnd, _d = _a.type, type = _d === void 0 ? "month" : _d, minDate = _a.minDate, maxDate = _a.maxDate, disabledDates = _a.disabledDates, onRangeSelect = _a.onRangeSelect;
+    // startInput States
+    var _e = React.useState("Choose start date"), startAriaLabel = _e[0], setStartAriaLabel = _e[1];
+    var startButtonRef = React.useRef(null);
+    var startInputRef = React.useRef(null);
+    var _f = React.useState((_b = inputStart.value) !== null && _b !== void 0 ? _b : ""), startValue = _f[0], setStartValue = _f[1];
+    // endInput States
+    var _g = React.useState("Choose end date"), endAriaLabel = _g[0], setEndAriaLabel = _g[1];
+    var _h = React.useState((_c = inputEnd.value) !== null && _c !== void 0 ? _c : ""), endValue = _h[0], setEndValue = _h[1];
+    var endButtonRef = React.useRef(null);
+    var endInputRef = React.useRef(null);
+    var previousValidValue = React.useRef("");
+    var _j = index.useThemeElement(), themeElement = _j[0], setThemeElement = _j[1];
+    var _k = React.useState(false), showCalendar = _k[0], setShowCalendar = _k[1];
+    var _l = React.useState(null), activeInput = _l[0], setActiveInput = _l[1];
+    var getIsRequired = function (input) { var _a; return (_a = input.isRequired) !== null && _a !== void 0 ? _a : true; };
+    var getLabel = function (input, type) { var _a; return (_a = input.label) !== null && _a !== void 0 ? _a : "Select a ".concat(type, " date"); };
+    // sync external props with internal value (not typing)
+    React.useEffect(function () {
+        if (inputStart.value !== undefined && inputStart.value !== startValue) {
+            setStartValue(inputStart.value);
+        }
+        if (inputEnd.value !== undefined && inputEnd.value !== endValue) {
+            setEndValue(inputEnd.value);
+        }
+    }, [inputStart.value, inputEnd.value]);
+    var handleIconClick = function (_a) {
+        var ref = _a.ref, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, input = _a.input;
+        if (ref &&
+            !ref.contains(document.activeElement) &&
+            !isDisabled &&
+            !isReadOnly) {
+            setActiveInput(input);
+            setShowCalendar(true);
+        }
+    };
+    var handleRangeSelect = function (rangeSelection) {
+        var start = rangeSelection.start, end = rangeSelection.end, isSelectionComplete = rangeSelection.isSelectionComplete;
+        var formattedStart = index$2.format(start, "dd/MM/yyyy");
+        var formattedEnd = end ? index$2.format(end, "dd/MM/yyyy") : "";
+        onRangeSelect === null || onRangeSelect === void 0 ? void 0 : onRangeSelect(filterAttrs.__assign(filterAttrs.__assign({}, rangeSelection), { formattedStart: formattedStart, formattedEnd: formattedEnd }));
+        if (isSelectionComplete) {
+            var fullRange = "".concat(formattedStart, " - ").concat(formattedEnd);
+            previousValidValue.current = fullRange;
+            setShowCalendar(false);
+        }
+    };
+    var handleCalendarClose = function () {
+        var _a, _b, _c;
+        if (((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.tagName) === "BODY") {
+            (_b = startButtonRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+            (_c = endButtonRef.current) === null || _c === void 0 ? void 0 : _c.focus();
+        }
+    };
+    var handleIconFocus = function (_a) {
+        var input = _a.input;
+        if (DatePicker.isRangeValid("".concat(startValue, " - ").concat(endValue))) {
+            var _b = DatePicker.convertRangeStringToDates("".concat(startValue, " - ").concat(endValue)), start = _b[0], end = _b[1];
+            var label = "Change dates, currently selected dates are ".concat(index$2.format(start, "EEEE do MMMM, yyyy"), " to ").concat(index$2.format(end, "EEEE do MMMM, yyyy"));
+            input === "start" ? setStartAriaLabel(label) : setEndAriaLabel(label);
+            return;
+        }
+    };
+    var handleChange = function (e, input) {
+        if (input === "start") {
+            inputStart.onChange && inputStart.onChange(e);
+            setStartValue(e.target.value);
+            setActiveInput("start");
+        }
+        if (input === "end") {
+            inputEnd.onChange && inputEnd.onChange(e);
+            setEndValue(e.target.value);
+            setActiveInput("end");
+        }
+    };
+    var handleBlur = function (e, input) {
+        var value = "".concat(startValue, " - ").concat(endValue);
+        if (input === "start") {
+            inputStart.onBlur && inputStart.onBlur(e);
+        }
+        if (input === "end") {
+            inputEnd.onBlur && inputEnd.onBlur(e);
+        }
+        DatePicker.validateRangeOnBlur({
+            value: value,
+            minDate: minDate,
+            maxDate: maxDate,
+            disabledDates: disabledDates,
+            previousValidValue: previousValidValue.current,
+            dispatchChangeEvent: function (e, corrected) {
+                var _a, _b;
+                var _c = DatePicker.convertRangeStringToDates(corrected), start = _c[0], end = _c[1];
+                (_a = inputStart.onChange) === null || _a === void 0 ? void 0 : _a.call(inputStart, filterAttrs.__assign(filterAttrs.__assign({}, e), { target: filterAttrs.__assign(filterAttrs.__assign({}, e.target), { value: DatePicker.formatDate(start) }) }));
+                (_b = inputEnd.onChange) === null || _b === void 0 ? void 0 : _b.call(inputEnd, filterAttrs.__assign(filterAttrs.__assign({}, e), { target: filterAttrs.__assign(filterAttrs.__assign({}, e.target), { value: DatePicker.formatDate(end) }) }));
+                previousValidValue.current = corrected;
+            },
+            blurEvent: e,
+        });
+    };
+    var handleCalendarOpenChange = function (isOpen) {
+        if (document.activeElement)
+            setShowCalendar(isOpen);
+    };
+    var handleAutoFocus = function (e) {
+        e.preventDefault();
+    };
+    var setStartInputRef = function (el) {
+        startInputRef.current = el;
+    };
+    var setEndInputRef = function (el) {
+        endInputRef.current = el;
+    };
+    var onCancelClick = function () {
+        setShowCalendar(false);
+    };
+    var getCalendarRange = function () {
+        var _a = convertRangeStringToDateTuple("".concat(startValue, " - ").concat(endValue)), start = _a[0], end = _a[1];
+        // when inital or one date is set - allow user to pick start / end independently
+        if (start && end) {
+            if (activeInput === "start") {
+                return end ? [end] : [];
+            }
+            if (activeInput === "end") {
+                return start ? [start] : [];
+            }
+        }
+        // removes all non date obj
+        return [start, end].filter(function (d) { return d instanceof Date; });
+    };
+    return (React.createElement("div", { className: "arc-DatePickerRange", ref: setThemeElement },
+        React.createElement(TextInput.TextInputWithPlaceHolder, filterAttrs.__assign({ ref: setStartInputRef, type: "text", iconButton: {
+                onClick: function () {
+                    return handleIconClick({
+                        ref: startInputRef.current,
+                        isDisabled: inputStart.isDisabled,
+                        isReadOnly: inputStart.isReadOnly,
+                        input: "start",
+                    });
+                },
+                onFocus: function () { return handleIconFocus({ input: "start" }); },
+                icon: "datePickerCalendar",
+                label: startAriaLabel,
+                ref: startButtonRef,
+            }, maxLength: 23, onBlur: function (e) { return handleBlur(e, "start"); }, errorMessage: inputStart.errorMessage, helper: inputStart.helper, id: inputStart.id, isDisabled: inputStart.isDisabled, isReadOnly: inputStart.isReadOnly, isRequired: getIsRequired(inputStart), label: getLabel(inputStart, "start"), hideLabel: inputStart.hideLabel, name: inputStart.name, onClickDisclosure: inputStart.onClickDisclosure, disclosureTitle: inputStart.disclosureTitle, disclosureText: inputStart.disclosureText, placeholder: lowerCaseDateFormat, value: startValue, onChange: function (e) { return handleChange(e, "start"); } }, filterAttrs.filterAttrs(inputStart))),
+        React.createElement(TextInput.TextInputWithPlaceHolder, filterAttrs.__assign({ ref: setEndInputRef, type: "text", iconButton: {
+                onClick: function () {
+                    return handleIconClick({
+                        ref: endInputRef.current,
+                        isDisabled: inputEnd.isDisabled,
+                        isReadOnly: inputEnd.isReadOnly,
+                        input: "end",
+                    });
+                },
+                onFocus: function () { return handleIconFocus({ input: "end" }); },
+                icon: "datePickerCalendar",
+                label: endAriaLabel,
+                ref: endButtonRef,
+            }, maxLength: 23, onBlur: function (e) { return handleBlur(e, "end"); }, errorMessage: inputEnd.errorMessage, helper: inputEnd.helper, id: inputEnd.id, isDisabled: inputEnd.isDisabled, isReadOnly: inputEnd.isReadOnly, isRequired: getIsRequired(inputEnd), label: getLabel(inputEnd, "end"), hideLabel: inputStart.hideLabel, name: inputEnd.name, onClickDisclosure: inputEnd.onClickDisclosure, disclosureTitle: inputEnd.disclosureTitle, disclosureText: inputEnd.disclosureText, placeholder: lowerCaseDateFormat, value: endValue, onChange: function (e) { return handleChange(e, "end"); } }, filterAttrs.filterAttrs(inputEnd))),
+        React.createElement(index$1.Root2, { open: showCalendar, onOpenChange: handleCalendarOpenChange },
+            React.createElement(index$1.Anchor2, null),
+            React.createElement(index$1.Portal, { container: themeElement },
+                React.createElement(index$1.Content2, { align: "end", "aria-modal": "true", "aria-label": "Choose Date", className: "arc-DatePicker-modal", onOpenAutoFocus: handleAutoFocus, onCloseAutoFocus: handleCalendarClose },
+                    React.createElement(Calendar.Calendar, { autoFocusOnMount: true, type: type, onCancelClick: onCancelClick, selectionType: "range", selectedRange: getCalendarRange(), disabledDates: disabledDates, minDate: minDate, maxDate: maxDate, onRangeSelect: handleRangeSelect }))))));
+};
 
 exports.DATE_FORMAT = DatePicker.DATE_FORMAT;
 exports.DatePicker = DatePicker.DatePicker;
@@ -39,3 +217,4 @@ exports.isDateValid = DatePicker.isDateValid;
 exports.isRangeValid = DatePicker.isRangeValid;
 exports.parseDateString = DatePicker.parseDateString;
 exports.parseRangeString = DatePicker.parseRangeString;
+exports.DatePickerRange = DatePickerRange;

package/lib/DatePicker/DatePicker.mjs

@@ -1,30 +1,213 @@
 'use client';
-export { D as DATE_FORMAT, c as DatePicker, b as isDateValid, i as isRangeValid, a as parseDateString, p as parseRangeString } from '../_shared/esm/DatePicker-CccSfg17.mjs';
-import '../_shared/esm/filter-attrs-B6CM-NUr.mjs';
-import 'react';
+import { p as parseRangeString, i as isDateValid, D as DATE_FORMAT, a as isRangeValid, c as convertRangeStringToDates, v as validateRangeOnBlur, f as formatDate } from '../_shared/esm/DatePicker-3sYJ3wGn.mjs';
+export { d as DatePicker, b as parseDateString } from '../_shared/esm/DatePicker-3sYJ3wGn.mjs';
+import { a as __assign, f as filterAttrs } from '../_shared/esm/filter-attrs-B6CM-NUr.mjs';
+import React__default, { useState, useRef, useEffect } from 'react';
+import { R as Root2, A as Anchor2, P as Portal, C as Content2 } from '../_shared/esm/index-CxrL7jIX.mjs';
+import { f as format } from '../_shared/esm/index-Cr6KeQLU.mjs';
+import { a as TextInputWithPlaceHolder } from '../_shared/esm/TextInput-Dk7qNGoh.mjs';
+import { C as Calendar } from '../_shared/esm/Calendar-CjqPM7ta.mjs';
+import { e as useThemeElement } from '../_shared/esm/index-Bz2JQq34.mjs';
 import '../_shared/esm/index-5C0-U8cc.mjs';
-import '../_shared/esm/index-CxrL7jIX.mjs';
 import '../_shared/esm/Combination-BpO6XTeS.mjs';
-import '../_shared/esm/index-Bz2JQq34.mjs';
 import 'react/jsx-runtime';
 import 'react-dom';
 import '../_shared/esm/index-DLovItWo.mjs';
 import '../_shared/esm/index-CWHcEz3_.mjs';
 import '../_shared/esm/index-DXTwueLZ.mjs';
-import '../_shared/esm/Calendar-L6u3D8xb.mjs';
-import '../_shared/esm/index-Cr6KeQLU.mjs';
-import '../_shared/esm/index.es-C3WGtwrW.mjs';
-import '../_shared/esm/use-media-query-DmKuIDEM.mjs';
+import '../_shared/esm/FormControl-CWyrVi1u.mjs';
+import '../_shared/esm/Surface-Colbp3Zx.mjs';
+import '../_shared/esm/index-Spae4j7j.mjs';
+import '../_shared/esm/DisclosureMini-B9LzsQC2.mjs';
 import '../_shared/esm/Text-CBlnm5CT.mjs';
 import '../_shared/esm/suffix-modifier-B_pO0UkF.mjs';
-import '../_shared/esm/index-Spae4j7j.mjs';
-import '../_shared/esm/Surface-Colbp3Zx.mjs';
+import '../_shared/esm/ThemeIcon-CN_Ed5b1.mjs';
 import '../_shared/esm/VisuallyHidden-DqAgoqJo.mjs';
+import '../_shared/esm/Spinner-Cd7LiPTy.mjs';
+import '../_shared/esm/index.es-DCvYtQfu.mjs';
+import '../_shared/esm/use-media-query-DmKuIDEM.mjs';
 import '../_shared/esm/Heading-CxHWefi7.mjs';
 import '../_shared/esm/BtIconChevronRightMid-DE4lmVaG.mjs';
-import '../_shared/esm/Icon-MZfaoOo9.mjs';
-import '../_shared/esm/TextInput-Vp_cBbpQ.mjs';
-import '../_shared/esm/FormControl-B9fp1ilz.mjs';
-import '../_shared/esm/DisclosureMini-B9LzsQC2.mjs';
-import '../_shared/esm/ThemeIcon-CN_Ed5b1.mjs';
-import '../_shared/esm/Spinner-Cd7LiPTy.mjs';
+import '../_shared/esm/Icon-CcPOJcQm.mjs';
+
+var convertRangeStringToDateTuple = function (value) {
+    if (value === void 0) { value = ""; }
+    var _a = parseRangeString(value), start = _a.start, end = _a.end;
+    var startDate = isDateValid(start.date)
+        ? new Date("".concat(start.year, "-").concat(start.month, "-").concat(start.day))
+        : undefined;
+    var endDate = isDateValid(end.date)
+        ? new Date("".concat(end.year, "-").concat(end.month, "-").concat(end.day))
+        : undefined;
+    return [startDate, endDate];
+};
+
+var lowerCaseDateFormat = DATE_FORMAT.toLowerCase();
+var DatePickerRange = function (_a) {
+    var _b, _c;
+    var inputStart = _a.inputStart, inputEnd = _a.inputEnd, _d = _a.type, type = _d === void 0 ? "month" : _d, minDate = _a.minDate, maxDate = _a.maxDate, disabledDates = _a.disabledDates, onRangeSelect = _a.onRangeSelect;
+    // startInput States
+    var _e = useState("Choose start date"), startAriaLabel = _e[0], setStartAriaLabel = _e[1];
+    var startButtonRef = useRef(null);
+    var startInputRef = useRef(null);
+    var _f = useState((_b = inputStart.value) !== null && _b !== void 0 ? _b : ""), startValue = _f[0], setStartValue = _f[1];
+    // endInput States
+    var _g = useState("Choose end date"), endAriaLabel = _g[0], setEndAriaLabel = _g[1];
+    var _h = useState((_c = inputEnd.value) !== null && _c !== void 0 ? _c : ""), endValue = _h[0], setEndValue = _h[1];
+    var endButtonRef = useRef(null);
+    var endInputRef = useRef(null);
+    var previousValidValue = useRef("");
+    var _j = useThemeElement(), themeElement = _j[0], setThemeElement = _j[1];
+    var _k = useState(false), showCalendar = _k[0], setShowCalendar = _k[1];
+    var _l = useState(null), activeInput = _l[0], setActiveInput = _l[1];
+    var getIsRequired = function (input) { var _a; return (_a = input.isRequired) !== null && _a !== void 0 ? _a : true; };
+    var getLabel = function (input, type) { var _a; return (_a = input.label) !== null && _a !== void 0 ? _a : "Select a ".concat(type, " date"); };
+    // sync external props with internal value (not typing)
+    useEffect(function () {
+        if (inputStart.value !== undefined && inputStart.value !== startValue) {
+            setStartValue(inputStart.value);
+        }
+        if (inputEnd.value !== undefined && inputEnd.value !== endValue) {
+            setEndValue(inputEnd.value);
+        }
+    }, [inputStart.value, inputEnd.value]);
+    var handleIconClick = function (_a) {
+        var ref = _a.ref, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, input = _a.input;
+        if (ref &&
+            !ref.contains(document.activeElement) &&
+            !isDisabled &&
+            !isReadOnly) {
+            setActiveInput(input);
+            setShowCalendar(true);
+        }
+    };
+    var handleRangeSelect = function (rangeSelection) {
+        var start = rangeSelection.start, end = rangeSelection.end, isSelectionComplete = rangeSelection.isSelectionComplete;
+        var formattedStart = format(start, "dd/MM/yyyy");
+        var formattedEnd = end ? format(end, "dd/MM/yyyy") : "";
+        onRangeSelect === null || onRangeSelect === void 0 ? void 0 : onRangeSelect(__assign(__assign({}, rangeSelection), { formattedStart: formattedStart, formattedEnd: formattedEnd }));
+        if (isSelectionComplete) {
+            var fullRange = "".concat(formattedStart, " - ").concat(formattedEnd);
+            previousValidValue.current = fullRange;
+            setShowCalendar(false);
+        }
+    };
+    var handleCalendarClose = function () {
+        var _a, _b, _c;
+        if (((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.tagName) === "BODY") {
+            (_b = startButtonRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+            (_c = endButtonRef.current) === null || _c === void 0 ? void 0 : _c.focus();
+        }
+    };
+    var handleIconFocus = function (_a) {
+        var input = _a.input;
+        if (isRangeValid("".concat(startValue, " - ").concat(endValue))) {
+            var _b = convertRangeStringToDates("".concat(startValue, " - ").concat(endValue)), start = _b[0], end = _b[1];
+            var label = "Change dates, currently selected dates are ".concat(format(start, "EEEE do MMMM, yyyy"), " to ").concat(format(end, "EEEE do MMMM, yyyy"));
+            input === "start" ? setStartAriaLabel(label) : setEndAriaLabel(label);
+            return;
+        }
+    };
+    var handleChange = function (e, input) {
+        if (input === "start") {
+            inputStart.onChange && inputStart.onChange(e);
+            setStartValue(e.target.value);
+            setActiveInput("start");
+        }
+        if (input === "end") {
+            inputEnd.onChange && inputEnd.onChange(e);
+            setEndValue(e.target.value);
+            setActiveInput("end");
+        }
+    };
+    var handleBlur = function (e, input) {
+        var value = "".concat(startValue, " - ").concat(endValue);
+        if (input === "start") {
+            inputStart.onBlur && inputStart.onBlur(e);
+        }
+        if (input === "end") {
+            inputEnd.onBlur && inputEnd.onBlur(e);
+        }
+        validateRangeOnBlur({
+            value: value,
+            minDate: minDate,
+            maxDate: maxDate,
+            disabledDates: disabledDates,
+            previousValidValue: previousValidValue.current,
+            dispatchChangeEvent: function (e, corrected) {
+                var _a, _b;
+                var _c = convertRangeStringToDates(corrected), start = _c[0], end = _c[1];
+                (_a = inputStart.onChange) === null || _a === void 0 ? void 0 : _a.call(inputStart, __assign(__assign({}, e), { target: __assign(__assign({}, e.target), { value: formatDate(start) }) }));
+                (_b = inputEnd.onChange) === null || _b === void 0 ? void 0 : _b.call(inputEnd, __assign(__assign({}, e), { target: __assign(__assign({}, e.target), { value: formatDate(end) }) }));
+                previousValidValue.current = corrected;
+            },
+            blurEvent: e,
+        });
+    };
+    var handleCalendarOpenChange = function (isOpen) {
+        if (document.activeElement)
+            setShowCalendar(isOpen);
+    };
+    var handleAutoFocus = function (e) {
+        e.preventDefault();
+    };
+    var setStartInputRef = function (el) {
+        startInputRef.current = el;
+    };
+    var setEndInputRef = function (el) {
+        endInputRef.current = el;
+    };
+    var onCancelClick = function () {
+        setShowCalendar(false);
+    };
+    var getCalendarRange = function () {
+        var _a = convertRangeStringToDateTuple("".concat(startValue, " - ").concat(endValue)), start = _a[0], end = _a[1];
+        // when inital or one date is set - allow user to pick start / end independently
+        if (start && end) {
+            if (activeInput === "start") {
+                return end ? [end] : [];
+            }
+            if (activeInput === "end") {
+                return start ? [start] : [];
+            }
+        }
+        // removes all non date obj
+        return [start, end].filter(function (d) { return d instanceof Date; });
+    };
+    return (React__default.createElement("div", { className: "arc-DatePickerRange", ref: setThemeElement },
+        React__default.createElement(TextInputWithPlaceHolder, __assign({ ref: setStartInputRef, type: "text", iconButton: {
+                onClick: function () {
+                    return handleIconClick({
+                        ref: startInputRef.current,
+                        isDisabled: inputStart.isDisabled,
+                        isReadOnly: inputStart.isReadOnly,
+                        input: "start",
+                    });
+                },
+                onFocus: function () { return handleIconFocus({ input: "start" }); },
+                icon: "datePickerCalendar",
+                label: startAriaLabel,
+                ref: startButtonRef,
+            }, maxLength: 23, onBlur: function (e) { return handleBlur(e, "start"); }, errorMessage: inputStart.errorMessage, helper: inputStart.helper, id: inputStart.id, isDisabled: inputStart.isDisabled, isReadOnly: inputStart.isReadOnly, isRequired: getIsRequired(inputStart), label: getLabel(inputStart, "start"), hideLabel: inputStart.hideLabel, name: inputStart.name, onClickDisclosure: inputStart.onClickDisclosure, disclosureTitle: inputStart.disclosureTitle, disclosureText: inputStart.disclosureText, placeholder: lowerCaseDateFormat, value: startValue, onChange: function (e) { return handleChange(e, "start"); } }, filterAttrs(inputStart))),
+        React__default.createElement(TextInputWithPlaceHolder, __assign({ ref: setEndInputRef, type: "text", iconButton: {
+                onClick: function () {
+                    return handleIconClick({
+                        ref: endInputRef.current,
+                        isDisabled: inputEnd.isDisabled,
+                        isReadOnly: inputEnd.isReadOnly,
+                        input: "end",
+                    });
+                },
+                onFocus: function () { return handleIconFocus({ input: "end" }); },
+                icon: "datePickerCalendar",
+                label: endAriaLabel,
+                ref: endButtonRef,
+            }, maxLength: 23, onBlur: function (e) { return handleBlur(e, "end"); }, errorMessage: inputEnd.errorMessage, helper: inputEnd.helper, id: inputEnd.id, isDisabled: inputEnd.isDisabled, isReadOnly: inputEnd.isReadOnly, isRequired: getIsRequired(inputEnd), label: getLabel(inputEnd, "end"), hideLabel: inputStart.hideLabel, name: inputEnd.name, onClickDisclosure: inputEnd.onClickDisclosure, disclosureTitle: inputEnd.disclosureTitle, disclosureText: inputEnd.disclosureText, placeholder: lowerCaseDateFormat, value: endValue, onChange: function (e) { return handleChange(e, "end"); } }, filterAttrs(inputEnd))),
+        React__default.createElement(Root2, { open: showCalendar, onOpenChange: handleCalendarOpenChange },
+            React__default.createElement(Anchor2, null),
+            React__default.createElement(Portal, { container: themeElement },
+                React__default.createElement(Content2, { align: "end", "aria-modal": "true", "aria-label": "Choose Date", className: "arc-DatePicker-modal", onOpenAutoFocus: handleAutoFocus, onCloseAutoFocus: handleCalendarClose },
+                    React__default.createElement(Calendar, { autoFocusOnMount: true, type: type, onCancelClick: onCancelClick, selectionType: "range", selectedRange: getCalendarRange(), disabledDates: disabledDates, minDate: minDate, maxDate: maxDate, onRangeSelect: handleRangeSelect }))))));
+};
+
+export { DATE_FORMAT, DatePickerRange, isDateValid, isRangeValid, parseRangeString };

package/lib/DatePicker/styles.css

@@ -1 +1 @@
-.arc-v12-0-0-beta-18 .arc .arc-DatePicker--constrained{max-width:384px}.arc-v12-0-0-beta-18 .arc .arc-DatePicker-modal{z-index:101}
+.arc-v12-0-0-beta-20 .arc .arc-DatePicker--constrained{max-width:384px}.arc-v12-0-0-beta-20 .arc .arc-DatePicker-modal{z-index:101}

package/lib/Disclosure/styles.css

@@ -1 +1 @@
-.arc-v12-0-0-beta-18 .arc .arc-Disclosure-summary{border-bottom:var(--disclosure-border-weight-s) solid var(--disclosure-colors-light-border-subtle);border-top:var(--disclosure-border-weight-s) solid var(--disclosure-colors-light-border-subtle);color:var(--disclosure-colors-light-text-default);cursor:pointer;display:block;font:var(--disclosure-type-label-l);list-style:none;padding:var(--disclosure-padding-s);position:relative}.arc-v12-0-0-beta-18 .arc .arc-Disclosure-summary:focus{outline:var(--focus-border-weight-s) solid transparent}.arc-v12-0-0-beta-18 .arc .arc-Disclosure-summary>*{padding-left:var(--disclosure-padding-l)}.arc-v12-0-0-beta-18 .arc .arc-Disclosure .arc-Disclosure-summary>*{display:inline-block}.arc-v12-0-0-beta-18 .arc .arc-Disclosure--onDarkSurface .arc-Disclosure-summary{border-bottom:var(--disclosure-border-weight-s) solid var(--disclosure-colors-dark-border-subtle);border-top:var(--disclosure-border-weight-s) solid var(--disclosure-colors-dark-border-subtle);color:var(--disclosure-colors-dark-text-default)}.arc-v12-0-0-beta-18 .arc .arc-Disclosure-summary:hover{background:var(--disclosure-colors-light-bg-hover);color:var(--disclosure-colors-light-text-hover)}.arc-v12-0-0-beta-18 .arc .arc-Disclosure+.arc-Disclosure .arc-Disclosure-summary{border-top:0;line-height:29px}.arc-v12-0-0-beta-18 .arc .arc-Disclosure-summary::-webkit-details-marker{display:none}.arc-v12-0-0-beta-18 .arc .arc-Disclosure--onDarkSurface .arc-Disclosure-summary:hover{background:var(--disclosure-colors-dark-bg-hover);color:var(--disclosure-colors-dark-text-hover)}.arc-v12-0-0-beta-18 .arc .arc-Disclosure-summary:focus::before{bottom:0;content:"";left:0;position:absolute;right:0;top:0}.arc-v12-0-0-beta-18 .arc .arc-Disclosure-summary:focus-visible::before{outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle)}.arc-v12-0-0-beta-18 .arc .arc-Disclosure--onDarkSurface .arc-Disclosure-summary:focus-visible::before{outline:var(--focus-border-weight-s) solid var(--focus-colors-dark-border-subtle)}.arc-v12-0-0-beta-18 .arc .arc-Disclosure-summary>.arc-Disclosure-summary-icon{color:inherit;height:var(--disclosure-size-icon-s);padding-left:0;position:absolute;top:50%;transform:translateY(-50%);width:var(--disclosure-size-icon-s)}.arc-v12-0-0-beta-18 .arc .arc-Disclosure[open] .arc-Disclosure-summary>.arc-Disclosure-summary-icon{transform:rotate(180deg) translateY(50%)}.arc-v12-0-0-beta-18 .arc .arc-Disclosure-details{border-bottom:var(--disclosure-border-weight-s) solid var(--disclosure-colors-light-border-subtle);padding:var(--disclosure-padding-s)}.arc-v12-0-0-beta-18 .arc .arc-Disclosure--indentDetails .arc-Disclosure-details{padding-left:var(--disclosure-padding-xl)}.arc-v12-0-0-beta-18 .arc .arc-Disclosure--onDarkSurface .arc-Disclosure-details{border-bottom:var(--disclosure-border-weight-s) solid var(--disclosure-colors-dark-border-subtle)}
+.arc-v12-0-0-beta-20 .arc .arc-Disclosure-summary{border-bottom:var(--disclosure-border-weight-s) solid var(--disclosure-colors-light-border-subtle);border-top:var(--disclosure-border-weight-s) solid var(--disclosure-colors-light-border-subtle);color:var(--disclosure-colors-light-text-default);cursor:pointer;display:block;font:var(--disclosure-type-label-l);list-style:none;padding:var(--disclosure-padding-s);position:relative}.arc-v12-0-0-beta-20 .arc .arc-Disclosure-summary:focus{outline:var(--focus-border-weight-s) solid transparent}.arc-v12-0-0-beta-20 .arc .arc-Disclosure-summary>*{padding-left:var(--disclosure-padding-l)}.arc-v12-0-0-beta-20 .arc .arc-Disclosure .arc-Disclosure-summary>*{display:inline-block}.arc-v12-0-0-beta-20 .arc .arc-Disclosure--onDarkSurface .arc-Disclosure-summary{border-bottom:var(--disclosure-border-weight-s) solid var(--disclosure-colors-dark-border-subtle);border-top:var(--disclosure-border-weight-s) solid var(--disclosure-colors-dark-border-subtle);color:var(--disclosure-colors-dark-text-default)}.arc-v12-0-0-beta-20 .arc .arc-Disclosure-summary:hover{background:var(--disclosure-colors-light-bg-hover);color:var(--disclosure-colors-light-text-hover)}.arc-v12-0-0-beta-20 .arc .arc-Disclosure+.arc-Disclosure .arc-Disclosure-summary{border-top:0;line-height:29px}.arc-v12-0-0-beta-20 .arc .arc-Disclosure-summary::-webkit-details-marker{display:none}.arc-v12-0-0-beta-20 .arc .arc-Disclosure--onDarkSurface .arc-Disclosure-summary:hover{background:var(--disclosure-colors-dark-bg-hover);color:var(--disclosure-colors-dark-text-hover)}.arc-v12-0-0-beta-20 .arc .arc-Disclosure-summary:focus::before{bottom:0;content:"";left:0;position:absolute;right:0;top:0}.arc-v12-0-0-beta-20 .arc .arc-Disclosure-summary:focus-visible::before{outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle)}.arc-v12-0-0-beta-20 .arc .arc-Disclosure--onDarkSurface .arc-Disclosure-summary:focus-visible::before{outline:var(--focus-border-weight-s) solid var(--focus-colors-dark-border-subtle)}.arc-v12-0-0-beta-20 .arc .arc-Disclosure-summary>.arc-Disclosure-summary-icon{color:inherit;height:var(--disclosure-size-icon-s);padding-left:0;position:absolute;top:50%;transform:translateY(-50%);width:var(--disclosure-size-icon-s)}.arc-v12-0-0-beta-20 .arc .arc-Disclosure[open] .arc-Disclosure-summary>.arc-Disclosure-summary-icon{transform:rotate(180deg) translateY(50%)}.arc-v12-0-0-beta-20 .arc .arc-Disclosure-details{border-bottom:var(--disclosure-border-weight-s) solid var(--disclosure-colors-light-border-subtle);padding:var(--disclosure-padding-s)}.arc-v12-0-0-beta-20 .arc .arc-Disclosure--indentDetails .arc-Disclosure-details{padding-left:var(--disclosure-padding-xl)}.arc-v12-0-0-beta-20 .arc .arc-Disclosure--onDarkSurface .arc-Disclosure-details{border-bottom:var(--disclosure-border-weight-s) solid var(--disclosure-colors-dark-border-subtle)}

package/lib/DisclosureMini/styles.css

@@ -1 +1 @@
-.arc-v12-0-0-beta-18 .arc .arc-DisclosureMini-summary{align-items:center;color:var(--disclosure-mini-colors-light-text-default);cursor:pointer;display:flex;font:var(--sem-type-body-reg-m);list-style:none;position:relative}.arc-v12-0-0-beta-18 .arc .arc-DisclosureMini-summary--small{font:var(--sem-type-body-reg-s)}.arc-v12-0-0-beta-18 .arc .arc-DisclosureMini-summary:focus{outline:var(--focus-border-weight-s) solid transparent;outline-offset:2px}.arc-v12-0-0-beta-18 .arc .arc-DisclosureMini .arc-DisclosureMini-summary>*{display:inline-block}.arc-v12-0-0-beta-18 .arc .arc-DisclosureMini--onDarkSurface .arc-DisclosureMini-summary{color:var(--disclosure-mini-colors-dark-text-default)}.arc-v12-0-0-beta-18 .arc .arc-DisclosureMini-summary::-webkit-details-marker{display:none}.arc-v12-0-0-beta-18 .arc .arc-DisclosureMini-summary:focus::before{bottom:0;content:"";left:0;position:absolute;right:0;top:0}.arc-v12-0-0-beta-18 .arc .arc-DisclosureMini-summary:focus-visible::before{outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle);outline-offset:2px}.arc-v12-0-0-beta-18 .arc .arc-DisclosureMini--onDarkSurface .arc-DisclosureMini-summary:focus-visible::before{outline:var(--focus-border-weight-s) solid var(--focus-colors-dark-border-subtle);outline-offset:2px}.arc-v12-0-0-beta-18 .arc .arc-DisclosureMini-summary>.arc-Text{text-decoration:underline}.arc-v12-0-0-beta-18 .arc .arc-DisclosureMini-summary--icon-left>.arc-Text{margin-left:var(--disclosure-mini-gap-m)}.arc-v12-0-0-beta-18 .arc .arc-DisclosureMini-summary--icon-right>.arc-Text{margin-right:var(--disclosure-mini-gap-m)}.arc-v12-0-0-beta-18 .arc .arc-DisclosureMini-summary--icon-right>.arc-DisclosureMini-summary-icon{order:2}.arc-v12-0-0-beta-18 .arc .arc-DisclosureMini-summary>.arc-DisclosureMini-summary-icon{align-items:center;color:inherit;display:flex;flex:0 0 16px;height:var(--disclosure-mini-size-icon-s);justify-content:center;transition:all 0.23s ease-out;width:var(--disclosure-mini-size-icon-s)}.arc-v12-0-0-beta-18 .arc .arc-DisclosureMini-summary>.arc-DisclosureMini-summary-icon>svg{height:100%;width:100%}.arc-v12-0-0-beta-18 .arc .arc-DisclosureMini[open] .arc-DisclosureMini-summary>.arc-DisclosureMini-summary-icon{transform:rotate(180deg)}.arc-v12-0-0-beta-18 .arc .arc-DisclosureMini[open] .arc-DisclosureMini-summary{align-items:center}.arc-v12-0-0-beta-18 .arc .arc-DisclosureMini-details{margin-top:var(--disclosure-mini-gap-s)}.arc-v12-0-0-beta-18 .arc .arc-DisclosureMini-summary--icon-left~.arc-DisclosureMini-details{margin-left:calc(var(--disclosure-mini-gap-m) + 16px)}
+.arc-v12-0-0-beta-20 .arc .arc-DisclosureMini-summary{align-items:center;color:var(--disclosure-mini-colors-light-text-default);cursor:pointer;display:flex;font:var(--sem-type-body-reg-m);list-style:none;position:relative}.arc-v12-0-0-beta-20 .arc .arc-DisclosureMini-summary--small{font:var(--sem-type-body-reg-s)}.arc-v12-0-0-beta-20 .arc .arc-DisclosureMini-summary:focus{outline:var(--focus-border-weight-s) solid transparent;outline-offset:2px}.arc-v12-0-0-beta-20 .arc .arc-DisclosureMini .arc-DisclosureMini-summary>*{display:inline-block}.arc-v12-0-0-beta-20 .arc .arc-DisclosureMini--onDarkSurface .arc-DisclosureMini-summary{color:var(--disclosure-mini-colors-dark-text-default)}.arc-v12-0-0-beta-20 .arc .arc-DisclosureMini-summary::-webkit-details-marker{display:none}.arc-v12-0-0-beta-20 .arc .arc-DisclosureMini-summary:focus::before{bottom:0;content:"";left:0;position:absolute;right:0;top:0}.arc-v12-0-0-beta-20 .arc .arc-DisclosureMini-summary:focus-visible::before{outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle);outline-offset:2px}.arc-v12-0-0-beta-20 .arc .arc-DisclosureMini--onDarkSurface .arc-DisclosureMini-summary:focus-visible::before{outline:var(--focus-border-weight-s) solid var(--focus-colors-dark-border-subtle);outline-offset:2px}.arc-v12-0-0-beta-20 .arc .arc-DisclosureMini-summary>.arc-Text{text-decoration:underline}.arc-v12-0-0-beta-20 .arc .arc-DisclosureMini-summary--icon-left>.arc-Text{margin-left:var(--disclosure-mini-gap-m)}.arc-v12-0-0-beta-20 .arc .arc-DisclosureMini-summary--icon-right>.arc-Text{margin-right:var(--disclosure-mini-gap-m)}.arc-v12-0-0-beta-20 .arc .arc-DisclosureMini-summary--icon-right>.arc-DisclosureMini-summary-icon{order:2}.arc-v12-0-0-beta-20 .arc .arc-DisclosureMini-summary>.arc-DisclosureMini-summary-icon{align-items:center;color:inherit;display:flex;flex:0 0 16px;height:var(--disclosure-mini-size-icon-s);justify-content:center;transition:all 0.23s ease-out;width:var(--disclosure-mini-size-icon-s)}.arc-v12-0-0-beta-20 .arc .arc-DisclosureMini-summary>.arc-DisclosureMini-summary-icon>svg{height:100%;width:100%}.arc-v12-0-0-beta-20 .arc .arc-DisclosureMini[open] .arc-DisclosureMini-summary>.arc-DisclosureMini-summary-icon{transform:rotate(180deg)}.arc-v12-0-0-beta-20 .arc .arc-DisclosureMini[open] .arc-DisclosureMini-summary{align-items:center}.arc-v12-0-0-beta-20 .arc .arc-DisclosureMini-details{margin-top:var(--disclosure-mini-gap-s)}.arc-v12-0-0-beta-20 .arc .arc-DisclosureMini-summary--icon-left~.arc-DisclosureMini-details{margin-left:calc(var(--disclosure-mini-gap-m) + 16px)}

package/lib/Download/styles.css

@@ -1 +1 @@
-.arc-v12-0-0-beta-18 .arc .arc-Download{align-items:center;background:var(--sem-color-bg-secondary-light-default);border-radius:var(--sem-border-radius-xs);color:var(--sem-color-fg-secondary-light-default);cursor:pointer;display:flex;max-width:100%;outline:var(--sem-border-width-xs) solid var(--sem-color-border-secondary-light-subtle);padding:var(--sem-space-padding-70) var(--sem-space-padding-130) var(--sem-space-padding-70) var(--sem-space-padding-70);text-decoration:none}.arc-v12-0-0-beta-18 .arc .arc-Download--compact{padding:var(--sem-space-padding-60) var(--sem-space-padding-110) var(--sem-space-padding-60) var(--sem-space-padding-60)}.arc-v12-0-0-beta-18 .arc .arc-Download--maxContent{width:-moz-max-content;width:max-content}.arc-v12-0-0-beta-18 .arc .arc-Download-name{color:var(--sem-color-fg-primary-light-default);display:block;font:var(--sem-type-body-reg-l);font-weight:var(--sem-font-weight-bold);text-decoration:underline}.arc-v12-0-0-beta-18 .arc .arc-Download--compact .arc-Download-name{font:var(--sem-type-body-reg-m);font-weight:var(--sem-font-weight-bold)}.arc-v12-0-0-beta-18 .arc .arc-Download:focus-visible{border-radius:var(--sem-border-radius-xs);outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle)}.arc-v12-0-0-beta-18 .arc .arc-Download:focus:not(:focus-visible){border-radius:var(--sem-border-radius-xs);outline:var(--sem-border-width-xs) solid var(--sem-color-border-secondary-light-subtle);outline-offset:0}.arc-v12-0-0-beta-18 .arc .arc-Download:hover,.arc-v12-0-0-beta-18 .arc .arc-Download:hover:focus:not(:focus-visible){color:var(--sem-color-fg-secondary-light-default);outline:var(--sem-border-width-s) solid var(--sem-color-border-primary-light-strong)}.arc-v12-0-0-beta-18 .arc .arc-Download:hover .arc-Download-name{color:var(--sem-color-fg-primary-light-strong)}.arc-v12-0-0-beta-18 .arc .arc-Download-title{color:var(--sem-color-fg-primary-light-default)}.arc-v12-0-0-beta-18 .arc .arc-Download-iconContainer{flex:0 1 auto}.arc-v12-0-0-beta-18 .arc .arc-Download-contentContainer{flex:1 1 0;padding-left:var(--sem-space-padding-50)}.arc-v12-0-0-beta-18 .arc .arc-Download--compact .arc-Download-contentContainer{padding-left:var(--sem-space-padding-30)}
+.arc-v12-0-0-beta-20 .arc .arc-Download{align-items:center;background:var(--sem-color-bg-secondary-light-default);border-radius:var(--sem-border-radius-xs);color:var(--sem-color-fg-secondary-light-default);cursor:pointer;display:flex;max-width:100%;outline:var(--sem-border-width-xs) solid var(--sem-color-border-secondary-light-subtle);padding:var(--sem-space-padding-70) var(--sem-space-padding-130) var(--sem-space-padding-70) var(--sem-space-padding-70);text-decoration:none}.arc-v12-0-0-beta-20 .arc .arc-Download--compact{padding:var(--sem-space-padding-60) var(--sem-space-padding-110) var(--sem-space-padding-60) var(--sem-space-padding-60)}.arc-v12-0-0-beta-20 .arc .arc-Download--maxContent{width:-moz-max-content;width:max-content}.arc-v12-0-0-beta-20 .arc .arc-Download-name{color:var(--sem-color-fg-primary-light-default);display:block;font:var(--sem-type-body-reg-l);font-weight:var(--sem-font-weight-bold);text-decoration:underline}.arc-v12-0-0-beta-20 .arc .arc-Download--compact .arc-Download-name{font:var(--sem-type-body-reg-m);font-weight:var(--sem-font-weight-bold)}.arc-v12-0-0-beta-20 .arc .arc-Download:focus-visible{border-radius:var(--sem-border-radius-xs);outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle)}.arc-v12-0-0-beta-20 .arc .arc-Download:focus:not(:focus-visible){border-radius:var(--sem-border-radius-xs);outline:var(--sem-border-width-xs) solid var(--sem-color-border-secondary-light-subtle);outline-offset:0}.arc-v12-0-0-beta-20 .arc .arc-Download:hover,.arc-v12-0-0-beta-20 .arc .arc-Download:hover:focus:not(:focus-visible){color:var(--sem-color-fg-secondary-light-default);outline:var(--sem-border-width-s) solid var(--sem-color-border-primary-light-strong)}.arc-v12-0-0-beta-20 .arc .arc-Download:hover .arc-Download-name{color:var(--sem-color-fg-primary-light-strong)}.arc-v12-0-0-beta-20 .arc .arc-Download-title{color:var(--sem-color-fg-primary-light-default)}.arc-v12-0-0-beta-20 .arc .arc-Download-iconContainer{flex:0 1 auto}.arc-v12-0-0-beta-20 .arc .arc-Download-contentContainer{flex:1 1 0;padding-left:var(--sem-space-padding-50)}.arc-v12-0-0-beta-20 .arc .arc-Download--compact .arc-Download-contentContainer{padding-left:var(--sem-space-padding-30)}