@arc-ui/components 11.16.0 → 11.18.0

package/dist/DatePicker/DatePicker.esm.js

@@ -0,0 +1,552 @@
+import { r as requiredArgs, t as toDate, i as isValid, f as format, C as Calendar, a as isBefore, b as isAfter, c as compareAsc } from '../_shared/esm/Calendar-4033fa48.js';
+import { b as __spreadArray, _ as __rest, a as __assign } from '../_shared/esm/filter-data-attrs-ea8f4ed4.js';
+import React__default, { useRef, useState, createElement, useCallback, forwardRef, useEffect, useContext } from 'react';
+import { c as classNames } from '../_shared/esm/index-2e73c2e9.js';
+import { _ as _extends } from '../_shared/esm/extends-8cc61aad.js';
+import { $ as $c512c27ab02ef895$export$50c7b4e9d9f19c1, a as $71cd76cc60e0454e$export$6f32135080cb4c3, b as $6ed0406888f73fc4$export$c7b2cbe3552a0d05, c as $5e63c961fc1ce211$export$8c6ed5c666ac1360, d as $e42e1063c40fb3ef$export$b9ecd428b558ff10 } from '../_shared/esm/index-7b531fa7.js';
+import { $ as $f1701beae083dbae$export$602eac185826482c, h as hideOthers, a as $01b9c$RemoveScroll, b as $3db38b7d1fb3fe6a$export$b7ece24a22aeda8c, c as $d3863c46a17e8a28$export$20e40289641fbbb6, d as $5cb92bef7577960e$export$177fb62ff3ec1f22 } from '../_shared/esm/Combination-e9f7e64e.js';
+import { $ as $1746a345f3d73bb7$export$f680877a34711e37 } from '../_shared/esm/index-efa9be1a.js';
+import { $ as $cf1ac5d9fe0e8206$export$722aac194ae923, a as $cf1ac5d9fe0e8206$export$be92b6f5f03c0fe9, b as $cf1ac5d9fe0e8206$export$b688253958b8dfe7, c as $cf1ac5d9fe0e8206$export$7c6e2c02157bb7d2 } from '../_shared/esm/index-b84a20c6.js';
+import { $ as $921a889cee6df7e8$export$99c2b779aa4e8b8b } from '../_shared/esm/index-ca72c9d5.js';
+import { A as ArcRootElementContext } from '../_shared/esm/Base-f200653c.js';
+import { T as TextInput } from '../_shared/esm/TextInput-abbab56b.js';
+import '../_shared/esm/use-media-query-4c807227.js';
+import '../_shared/esm/Text-14f586ac.js';
+import '../_shared/esm/suffix-modifier-3d548e45.js';
+import '../_shared/esm/Surface-0ca6817d.js';
+import '../_shared/esm/VisuallyHidden-b9eebf71.js';
+import '../_shared/esm/Heading-d16e0e53.js';
+import '../_shared/esm/BtIconChevronLeftMid.esm-1ed8330b.js';
+import '../_shared/esm/BtIconChevronRightMid.esm-32268f1a.js';
+import '../_shared/esm/Icon-abd0d990.js';
+import 'react-dom';
+import '../_shared/esm/index-2cfab9f2.js';
+import '../_shared/esm/FormControl-f0b8fe91.js';
+import '../_shared/esm/BtIconAlert.esm-a4608d47.js';
+import '../_shared/esm/DisclosureMini-ec17b008.js';
+import '../_shared/esm/BtIconChevronDown2Px.esm-217276c2.js';
+
+/**
+ * @name startOfDay
+ * @category Day Helpers
+ * @summary Return the start of a day for the given date.
+ *
+ * @description
+ * Return the start of a day for the given date.
+ * The result will be in the local timezone.
+ *
+ * @param {Date|Number} date - the original date
+ * @returns {Date} the start of a day
+ * @throws {TypeError} 1 argument required
+ *
+ * @example
+ * // The start of a day for 2 September 2014 11:55:00:
+ * const result = startOfDay(new Date(2014, 8, 2, 11, 55, 0))
+ * //=> Tue Sep 02 2014 00:00:00
+ */
+function startOfDay(dirtyDate) {
+  requiredArgs(1, arguments);
+  var date = toDate(dirtyDate);
+  date.setHours(0, 0, 0, 0);
+  return date;
+}
+
+/**
+ * @name isSameDay
+ * @category Day Helpers
+ * @summary Are the given dates in the same day (and year and month)?
+ *
+ * @description
+ * Are the given dates in the same day (and year and month)?
+ *
+ * @param {Date|Number} dateLeft - the first date to check
+ * @param {Date|Number} dateRight - the second date to check
+ * @returns {Boolean} the dates are in the same day (and year and month)
+ * @throws {TypeError} 2 arguments required
+ *
+ * @example
+ * // Are 4 September 06:00:00 and 4 September 18:00:00 in the same day?
+ * const result = isSameDay(new Date(2014, 8, 4, 6, 0), new Date(2014, 8, 4, 18, 0))
+ * //=> true
+ *
+ * @example
+ * // Are 4 September and 4 October in the same day?
+ * const result = isSameDay(new Date(2014, 8, 4), new Date(2014, 9, 4))
+ * //=> false
+ *
+ * @example
+ * // Are 4 September, 2014 and 4 September, 2015 in the same day?
+ * const result = isSameDay(new Date(2014, 8, 4), new Date(2015, 8, 4))
+ * //=> false
+ */
+function isSameDay(dirtyDateLeft, dirtyDateRight) {
+  requiredArgs(2, arguments);
+  var dateLeftStartOfDay = startOfDay(dirtyDateLeft);
+  var dateRightStartOfDay = startOfDay(dirtyDateRight);
+  return dateLeftStartOfDay.getTime() === dateRightStartOfDay.getTime();
+}
+
+var parseRangeString = function (value) {
+    if (value === void 0) { value = ""; }
+    var _a = value.replace(/\s/g, "").split("-"), _b = _a[0], start = _b === void 0 ? "" : _b, _c = _a[1], end = _c === void 0 ? "" : _c;
+    var _d = start.split("/"), startDay = _d[0], startMonth = _d[1], startYear = _d[2];
+    var _e = end.split("/"), endDay = _e[0], endMonth = _e[1], endYear = _e[2];
+    return {
+        start: {
+            date: start,
+            day: startDay,
+            month: startMonth,
+            year: startYear
+        },
+        end: {
+            date: end,
+            day: endDay,
+            month: endMonth,
+            year: endYear
+        }
+    };
+};
+
+var parseDateString = function (value) {
+    var _a = value.split("/"), day = _a[0], month = _a[1], year = _a[2];
+    return {
+        day: day,
+        month: month,
+        year: year
+    };
+};
+
+var isDateValid = function (value) {
+    if (value === void 0) { value = ""; }
+    var _a = value.split("/"), day = _a[0], month = _a[1], year = _a[2];
+    return (/^\d{2}\/\d{2}\/\d{4}$/.test(value) &&
+        isValid(new Date("".concat(year, "-").concat(month, "-").concat(day))));
+};
+
+var isRangeValid = function (value) {
+    if (value === void 0) { value = ""; }
+    var _a = value.replace(/\s/g, "").split("-"), _b = _a[0], start = _b === void 0 ? "" : _b, _c = _a[1], end = _c === void 0 ? "" : _c;
+    return isDateValid(start) && isDateValid(end);
+};
+
+var DATE_FORMAT = "dd/MM/yyyy";
+
+/* -------------------------------------------------------------------------------------------------
+ * Popover
+ * -----------------------------------------------------------------------------------------------*/ const $cb5cc270b50c6fcd$var$POPOVER_NAME = 'Popover';
+const [$cb5cc270b50c6fcd$var$createPopoverContext, $cb5cc270b50c6fcd$export$c8393c9e73286932] = $c512c27ab02ef895$export$50c7b4e9d9f19c1($cb5cc270b50c6fcd$var$POPOVER_NAME, [
+    $cf1ac5d9fe0e8206$export$722aac194ae923
+]);
+const $cb5cc270b50c6fcd$var$usePopperScope = $cf1ac5d9fe0e8206$export$722aac194ae923();
+const [$cb5cc270b50c6fcd$var$PopoverProvider, $cb5cc270b50c6fcd$var$usePopoverContext] = $cb5cc270b50c6fcd$var$createPopoverContext($cb5cc270b50c6fcd$var$POPOVER_NAME);
+const $cb5cc270b50c6fcd$export$5b6b19405a83ff9d = (props)=>{
+    const { __scopePopover: __scopePopover , children: children , open: openProp , defaultOpen: defaultOpen , onOpenChange: onOpenChange , modal: modal = false  } = props;
+    const popperScope = $cb5cc270b50c6fcd$var$usePopperScope(__scopePopover);
+    const triggerRef = useRef(null);
+    const [hasCustomAnchor, setHasCustomAnchor] = useState(false);
+    const [open = false, setOpen] = $71cd76cc60e0454e$export$6f32135080cb4c3({
+        prop: openProp,
+        defaultProp: defaultOpen,
+        onChange: onOpenChange
+    });
+    return /*#__PURE__*/ createElement($cf1ac5d9fe0e8206$export$be92b6f5f03c0fe9, popperScope, /*#__PURE__*/ createElement($cb5cc270b50c6fcd$var$PopoverProvider, {
+        scope: __scopePopover,
+        contentId: $1746a345f3d73bb7$export$f680877a34711e37(),
+        triggerRef: triggerRef,
+        open: open,
+        onOpenChange: setOpen,
+        onOpenToggle: useCallback(()=>setOpen((prevOpen)=>!prevOpen
+            )
+        , [
+            setOpen
+        ]),
+        hasCustomAnchor: hasCustomAnchor,
+        onCustomAnchorAdd: useCallback(()=>setHasCustomAnchor(true)
+        , []),
+        onCustomAnchorRemove: useCallback(()=>setHasCustomAnchor(false)
+        , []),
+        modal: modal
+    }, children));
+};
+/* -------------------------------------------------------------------------------------------------
+ * PopoverAnchor
+ * -----------------------------------------------------------------------------------------------*/ const $cb5cc270b50c6fcd$var$ANCHOR_NAME = 'PopoverAnchor';
+const $cb5cc270b50c6fcd$export$96e5381f42521a79 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    const { __scopePopover: __scopePopover , ...anchorProps } = props;
+    const context = $cb5cc270b50c6fcd$var$usePopoverContext($cb5cc270b50c6fcd$var$ANCHOR_NAME, __scopePopover);
+    const popperScope = $cb5cc270b50c6fcd$var$usePopperScope(__scopePopover);
+    const { onCustomAnchorAdd: onCustomAnchorAdd , onCustomAnchorRemove: onCustomAnchorRemove  } = context;
+    useEffect(()=>{
+        onCustomAnchorAdd();
+        return ()=>onCustomAnchorRemove()
+        ;
+    }, [
+        onCustomAnchorAdd,
+        onCustomAnchorRemove
+    ]);
+    return /*#__PURE__*/ createElement($cf1ac5d9fe0e8206$export$b688253958b8dfe7, _extends({}, popperScope, anchorProps, {
+        ref: forwardedRef
+    }));
+});
+/* -------------------------------------------------------------------------------------------------
+ * PopoverPortal
+ * -----------------------------------------------------------------------------------------------*/ const $cb5cc270b50c6fcd$var$PORTAL_NAME = 'PopoverPortal';
+const [$cb5cc270b50c6fcd$var$PortalProvider, $cb5cc270b50c6fcd$var$usePortalContext] = $cb5cc270b50c6fcd$var$createPopoverContext($cb5cc270b50c6fcd$var$PORTAL_NAME, {
+    forceMount: undefined
+});
+const $cb5cc270b50c6fcd$export$dd679ffb4362d2d4 = (props)=>{
+    const { __scopePopover: __scopePopover , forceMount: forceMount , children: children , container: container  } = props;
+    const context = $cb5cc270b50c6fcd$var$usePopoverContext($cb5cc270b50c6fcd$var$PORTAL_NAME, __scopePopover);
+    return /*#__PURE__*/ createElement($cb5cc270b50c6fcd$var$PortalProvider, {
+        scope: __scopePopover,
+        forceMount: forceMount
+    }, /*#__PURE__*/ createElement($921a889cee6df7e8$export$99c2b779aa4e8b8b, {
+        present: forceMount || context.open
+    }, /*#__PURE__*/ createElement($f1701beae083dbae$export$602eac185826482c, {
+        asChild: true,
+        container: container
+    }, children)));
+};
+/* -------------------------------------------------------------------------------------------------
+ * PopoverContent
+ * -----------------------------------------------------------------------------------------------*/ const $cb5cc270b50c6fcd$var$CONTENT_NAME = 'PopoverContent';
+const $cb5cc270b50c6fcd$export$d7e1f420b25549ff = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    const portalContext = $cb5cc270b50c6fcd$var$usePortalContext($cb5cc270b50c6fcd$var$CONTENT_NAME, props.__scopePopover);
+    const { forceMount: forceMount = portalContext.forceMount , ...contentProps } = props;
+    const context = $cb5cc270b50c6fcd$var$usePopoverContext($cb5cc270b50c6fcd$var$CONTENT_NAME, props.__scopePopover);
+    return /*#__PURE__*/ createElement($921a889cee6df7e8$export$99c2b779aa4e8b8b, {
+        present: forceMount || context.open
+    }, context.modal ? /*#__PURE__*/ createElement($cb5cc270b50c6fcd$var$PopoverContentModal, _extends({}, contentProps, {
+        ref: forwardedRef
+    })) : /*#__PURE__*/ createElement($cb5cc270b50c6fcd$var$PopoverContentNonModal, _extends({}, contentProps, {
+        ref: forwardedRef
+    })));
+});
+/* -----------------------------------------------------------------------------------------------*/ const $cb5cc270b50c6fcd$var$PopoverContentModal = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    const context = $cb5cc270b50c6fcd$var$usePopoverContext($cb5cc270b50c6fcd$var$CONTENT_NAME, props.__scopePopover);
+    const contentRef = useRef(null);
+    const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, contentRef);
+    const isRightClickOutsideRef = useRef(false); // aria-hide everything except the content (better supported equivalent to setting aria-modal)
+    useEffect(()=>{
+        const content = contentRef.current;
+        if (content) return hideOthers(content);
+    }, []);
+    return /*#__PURE__*/ createElement($01b9c$RemoveScroll, {
+        as: $5e63c961fc1ce211$export$8c6ed5c666ac1360,
+        allowPinchZoom: true
+    }, /*#__PURE__*/ createElement($cb5cc270b50c6fcd$var$PopoverContentImpl, _extends({}, props, {
+        ref: composedRefs // we make sure we're not trapping once it's been closed
+        ,
+        trapFocus: context.open,
+        disableOutsidePointerEvents: true,
+        onCloseAutoFocus: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onCloseAutoFocus, (event)=>{
+            var _context$triggerRef$c;
+            event.preventDefault();
+            if (!isRightClickOutsideRef.current) (_context$triggerRef$c = context.triggerRef.current) === null || _context$triggerRef$c === void 0 || _context$triggerRef$c.focus();
+        }),
+        onPointerDownOutside: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onPointerDownOutside, (event)=>{
+            const originalEvent = event.detail.originalEvent;
+            const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
+            const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
+            isRightClickOutsideRef.current = isRightClick;
+        }, {
+            checkForDefaultPrevented: false
+        }) // When focus is trapped, a `focusout` event may still happen.
+        ,
+        onFocusOutside: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onFocusOutside, (event)=>event.preventDefault()
+        , {
+            checkForDefaultPrevented: false
+        })
+    })));
+});
+const $cb5cc270b50c6fcd$var$PopoverContentNonModal = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    const context = $cb5cc270b50c6fcd$var$usePopoverContext($cb5cc270b50c6fcd$var$CONTENT_NAME, props.__scopePopover);
+    const hasInteractedOutsideRef = useRef(false);
+    const hasPointerDownOutsideRef = useRef(false);
+    return /*#__PURE__*/ createElement($cb5cc270b50c6fcd$var$PopoverContentImpl, _extends({}, props, {
+        ref: forwardedRef,
+        trapFocus: false,
+        disableOutsidePointerEvents: false,
+        onCloseAutoFocus: (event)=>{
+            var _props$onCloseAutoFoc;
+            (_props$onCloseAutoFoc = props.onCloseAutoFocus) === null || _props$onCloseAutoFoc === void 0 || _props$onCloseAutoFoc.call(props, event);
+            if (!event.defaultPrevented) {
+                var _context$triggerRef$c2;
+                if (!hasInteractedOutsideRef.current) (_context$triggerRef$c2 = context.triggerRef.current) === null || _context$triggerRef$c2 === void 0 || _context$triggerRef$c2.focus(); // Always prevent auto focus because we either focus manually or want user agent focus
+                event.preventDefault();
+            }
+            hasInteractedOutsideRef.current = false;
+            hasPointerDownOutsideRef.current = false;
+        },
+        onInteractOutside: (event)=>{
+            var _props$onInteractOuts, _context$triggerRef$c3;
+            (_props$onInteractOuts = props.onInteractOutside) === null || _props$onInteractOuts === void 0 || _props$onInteractOuts.call(props, event);
+            if (!event.defaultPrevented) {
+                hasInteractedOutsideRef.current = true;
+                if (event.detail.originalEvent.type === 'pointerdown') hasPointerDownOutsideRef.current = true;
+            } // Prevent dismissing when clicking the trigger.
+            // As the trigger is already setup to close, without doing so would
+            // cause it to close and immediately open.
+            const target = event.target;
+            const targetIsTrigger = (_context$triggerRef$c3 = context.triggerRef.current) === null || _context$triggerRef$c3 === void 0 ? void 0 : _context$triggerRef$c3.contains(target);
+            if (targetIsTrigger) event.preventDefault(); // On Safari if the trigger is inside a container with tabIndex={0}, when clicked
+            // we will get the pointer down outside event on the trigger, but then a subsequent
+            // focus outside event on the container, we ignore any focus outside event when we've
+            // already had a pointer down outside event.
+            if (event.detail.originalEvent.type === 'focusin' && hasPointerDownOutsideRef.current) event.preventDefault();
+        }
+    }));
+});
+/* -----------------------------------------------------------------------------------------------*/ const $cb5cc270b50c6fcd$var$PopoverContentImpl = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    const { __scopePopover: __scopePopover , trapFocus: trapFocus , onOpenAutoFocus: onOpenAutoFocus , onCloseAutoFocus: onCloseAutoFocus , disableOutsidePointerEvents: disableOutsidePointerEvents , onEscapeKeyDown: onEscapeKeyDown , onPointerDownOutside: onPointerDownOutside , onFocusOutside: onFocusOutside , onInteractOutside: onInteractOutside , ...contentProps } = props;
+    const context = $cb5cc270b50c6fcd$var$usePopoverContext($cb5cc270b50c6fcd$var$CONTENT_NAME, __scopePopover);
+    const popperScope = $cb5cc270b50c6fcd$var$usePopperScope(__scopePopover); // Make sure the whole tree has focus guards as our `Popover` may be
+    // the last element in the DOM (beacuse of the `Portal`)
+    $3db38b7d1fb3fe6a$export$b7ece24a22aeda8c();
+    return /*#__PURE__*/ createElement($d3863c46a17e8a28$export$20e40289641fbbb6, {
+        asChild: true,
+        loop: true,
+        trapped: trapFocus,
+        onMountAutoFocus: onOpenAutoFocus,
+        onUnmountAutoFocus: onCloseAutoFocus
+    }, /*#__PURE__*/ createElement($5cb92bef7577960e$export$177fb62ff3ec1f22, {
+        asChild: true,
+        disableOutsidePointerEvents: disableOutsidePointerEvents,
+        onInteractOutside: onInteractOutside,
+        onEscapeKeyDown: onEscapeKeyDown,
+        onPointerDownOutside: onPointerDownOutside,
+        onFocusOutside: onFocusOutside,
+        onDismiss: ()=>context.onOpenChange(false)
+    }, /*#__PURE__*/ createElement($cf1ac5d9fe0e8206$export$7c6e2c02157bb7d2, _extends({
+        "data-state": $cb5cc270b50c6fcd$var$getState(context.open),
+        role: "dialog",
+        id: context.contentId
+    }, popperScope, contentProps, {
+        ref: forwardedRef,
+        style: {
+            ...contentProps.style,
+            '--radix-popover-content-transform-origin': 'var(--radix-popper-transform-origin)',
+            '--radix-popover-content-available-width': 'var(--radix-popper-available-width)',
+            '--radix-popover-content-available-height': 'var(--radix-popper-available-height)',
+            '--radix-popover-trigger-width': 'var(--radix-popper-anchor-width)',
+            '--radix-popover-trigger-height': 'var(--radix-popper-anchor-height)'
+        }
+    }))));
+});
+/* -----------------------------------------------------------------------------------------------*/ function $cb5cc270b50c6fcd$var$getState(open) {
+    return open ? 'open' : 'closed';
+}
+const $cb5cc270b50c6fcd$export$be92b6f5f03c0fe9 = $cb5cc270b50c6fcd$export$5b6b19405a83ff9d;
+const $cb5cc270b50c6fcd$export$b688253958b8dfe7 = $cb5cc270b50c6fcd$export$96e5381f42521a79;
+const $cb5cc270b50c6fcd$export$602eac185826482c = $cb5cc270b50c6fcd$export$dd679ffb4362d2d4;
+const $cb5cc270b50c6fcd$export$7c6e2c02157bb7d2 = $cb5cc270b50c6fcd$export$d7e1f420b25549ff;
+
+const BtIconCalender = (props) =>
+  /*#__PURE__*/ React__default.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32",
+      },
+      props,
+    ),
+    /*#__PURE__*/ React__default.createElement("defs", null),
+    /*#__PURE__*/ React__default.createElement("path", {
+      d: "M27,7H25V4.5a.5.5,0,0,0-1,0V7H8V4.5a.5.5,0,0,0-1,0V7H5A1.003,1.003,0,0,0,4,8V27a1.003,1.003,0,0,0,1,1H27a1.003,1.003,0,0,0,1-1V8A1.003,1.003,0,0,0,27,7ZM7,8v.5a.5.5,0,0,0,1,0V8H24v.5a.5.5,0,0,0,1,0V8h2v4H5V8ZM5,27V13H27V27Z",
+      fill: "currentColor",
+    }),
+  );
+
+var formatDate = function (value) {
+    return format(value, DATE_FORMAT);
+};
+
+var isDisabledDate = function (disabledDates, date) {
+    return Boolean(disabledDates &&
+        disabledDates.find(function (disabledDate) { return isSameDay(date, disabledDate); }));
+};
+
+var convertDateStringToDate = function (value) {
+    if (value === void 0) { value = ""; }
+    var _a = parseDateString(value), day = _a.day, month = _a.month, year = _a.year;
+    var isValidDate = isDateValid(value);
+    return isValidDate ? new Date("".concat(year, "-").concat(month, "-").concat(day)) : new Date();
+};
+
+var convertRangeStringToDates = function (value) {
+    if (value === void 0) { value = ""; }
+    var _a = parseRangeString(value), start = _a.start, end = _a.end;
+    return __spreadArray(__spreadArray([], (isDateValid(start.date)
+        ? [new Date("".concat(start.year, "-").concat(start.month, "-").concat(start.day))]
+        : []), true), (isDateValid(end.date)
+        ? [new Date("".concat(end.year, "-").concat(end.month, "-").concat(end.day))]
+        : []), true);
+};
+
+var DatePicker = forwardRef(function (_a, ref) {
+    var errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, label = _a.label, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, isRequired = _a.isRequired, labelSize = _a.labelSize, inputSize = _a.inputSize, _b = _a.value, value = _b === void 0 ? "" : _b, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onDateSelect = _a.onDateSelect, onRangeSelect = _a.onRangeSelect, onClickDisclosure = _a.onClickDisclosure, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, type = _a.type, _c = _a.isFluid, isFluid = _c === void 0 ? false : _c, _d = _a.selectionType, selectionType = _d === void 0 ? "single" : _d, disabledDates = _a.disabledDates, minDate = _a.minDate, maxDate = _a.maxDate, props = __rest(_a, ["errorMessage", "helper", "id", "label", "isDisabled", "isReadOnly", "isRequired", "labelSize", "inputSize", "value", "name", "onBlur", "onChange", "onDateSelect", "onRangeSelect", "onClickDisclosure", "disclosureTitle", "disclosureText", "type", "isFluid", "selectionType", "disabledDates", "minDate", "maxDate"]);
+    var arcRootElement = useContext(ArcRootElementContext);
+    var _e = useState("Choose date"), ariaLabel = _e[0], setAriaLabel = _e[1];
+    var _f = useState(false), showCalendar = _f[0], setShowCalendar = _f[1];
+    var buttonRef = useRef(null);
+    var ourRef = useRef(null);
+    var previousValidValue = useRef(value);
+    var lowerCaseDateFormat = DATE_FORMAT.toLowerCase();
+    var placeHolder = selectionType === "range"
+        ? "".concat(lowerCaseDateFormat, " - ").concat(lowerCaseDateFormat)
+        : lowerCaseDateFormat;
+    useEffect(function () {
+        if (selectionType === "single" &&
+            isDateValid(value) &&
+            !isDisabledDate(disabledDates, convertDateStringToDate(value))) {
+            previousValidValue.current = value;
+        }
+        if (selectionType === "range" && isRangeValid(value)) {
+            var rangeHasDisabledDates = convertRangeStringToDates(value).some(function (rangeValue) { return isDisabledDate(disabledDates, rangeValue); });
+            if (!rangeHasDisabledDates) {
+                previousValidValue.current = value;
+            }
+        }
+    }, [value, disabledDates, selectionType]);
+    var getDatePickerRef = function (elementRef) {
+        ourRef.current = elementRef;
+        if (ref && typeof ref === "object") {
+            ref.current = elementRef;
+        }
+        if (ref && typeof ref === "function") {
+            ref(elementRef);
+        }
+    };
+    var dispatchChangeEvent = function (e, value) {
+        onChange &&
+            onChange(__assign(__assign({}, e), { target: __assign(__assign({}, e.target), { value: value }) }));
+    };
+    var handleRangeSelect = function (rangeSelection) {
+        var start = formatDate(rangeSelection.start);
+        var end = rangeSelection.end ? formatDate(rangeSelection.end) : null;
+        onRangeSelect &&
+            onRangeSelect(__assign(__assign({}, rangeSelection), { formattedRange: "".concat(start).concat(end ? " - ".concat(end) : "") }));
+        rangeSelection.isSelectionComplete && setShowCalendar(false);
+    };
+    var handleDateSelect = function (value) {
+        onDateSelect &&
+            onDateSelect({
+                date: value,
+                formattedDate: formatDate(value)
+            });
+        setShowCalendar(false);
+    };
+    var handleSingleSelectionBlur = function (e) {
+        if (value && isDateValid(value) && selectionType === "single") {
+            var _a = parseDateString(value), day = _a.day, month = _a.month, year = _a.year;
+            var date = new Date("".concat(year, "-").concat(month, "-").concat(day));
+            var isDateBeforeMinDate = minDate && isBefore(date, minDate);
+            var isDateAfterMaxDate = maxDate && isAfter(date, maxDate);
+            var isDisabledValue = isDisabledDate(disabledDates, date);
+            if (isDateBeforeMinDate) {
+                return dispatchChangeEvent(e, "".concat(formatDate(minDate)));
+            }
+            if (isDateAfterMaxDate) {
+                return dispatchChangeEvent(e, "".concat(formatDate(maxDate)));
+            }
+            if (isDisabledValue) {
+                var date_1 = previousValidValue.current
+                    ? convertDateStringToDate(previousValidValue.current)
+                    : new Date();
+                return dispatchChangeEvent(e, "".concat(formatDate(date_1)));
+            }
+        }
+    };
+    var handleRangeSelectionBlur = function (e) {
+        if (isRangeValid(value) && selectionType === "range") {
+            var _a = convertRangeStringToDates(value), start = _a[0], end = _a[1];
+            var isStartDateBeforeMinDate = minDate && isBefore(start, minDate);
+            var isEndDateAfterMaxDate = maxDate && isAfter(end, maxDate);
+            var isStartDateDisabled = isDisabledDate(disabledDates, start);
+            var isEndDateDisabled = isDisabledDate(disabledDates, end);
+            if (isStartDateBeforeMinDate && isEndDateAfterMaxDate) {
+                return dispatchChangeEvent(e, "".concat(formatDate(minDate), " - ").concat(formatDate(maxDate)));
+            }
+            if (isStartDateBeforeMinDate) {
+                return dispatchChangeEvent(e, "".concat(formatDate(minDate), " - ").concat(formatDate(end)));
+            }
+            if (isEndDateAfterMaxDate) {
+                return dispatchChangeEvent(e, "".concat(formatDate(start), " - ").concat(formatDate(maxDate)));
+            }
+            if (isStartDateDisabled || isEndDateDisabled) {
+                var _b = previousValidValue.current
+                    ? convertRangeStringToDates(previousValidValue.current)
+                    : [], start_1 = _b[0], end_1 = _b[1];
+                return dispatchChangeEvent(e, start_1 && end_1 ? "".concat(formatDate(start_1), " - ").concat(formatDate(end_1)) : "");
+            }
+            if (isAfter(start, end)) {
+                var _c = [start, end].sort(compareAsc), orderedStart = _c[0], orderedEnd = _c[1];
+                return dispatchChangeEvent(e, "".concat(formatDate(orderedStart), " - ").concat(formatDate(orderedEnd)));
+            }
+        }
+    };
+    var handleBlur = function (e) {
+        onBlur && onBlur(e);
+        if (selectionType === "single") {
+            handleSingleSelectionBlur(e);
+        }
+        if (selectionType === "range") {
+            handleRangeSelectionBlur(e);
+        }
+    };
+    var handleChange = function (e) {
+        onChange && onChange(e);
+    };
+    var handleCalendarOpenChange = function (isOpen) {
+        if (document.activeElement)
+            setShowCalendar(isOpen);
+    };
+    var handleIconClick = function () {
+        var _a;
+        !((_a = ourRef.current) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement)) &&
+            !isDisabled &&
+            !isReadOnly &&
+            setShowCalendar(true);
+    };
+    var handleIconFocus = function () {
+        if (selectionType === "range" && isRangeValid(value)) {
+            var _a = convertRangeStringToDates(value), start = _a[0], end = _a[1];
+            return setAriaLabel("Change dates, currently selected dates are ".concat(format(start, "EEEE do MMMM, yyyy"), " to ").concat(format(end, "EEEE do MMMM, yyyy")));
+        }
+        if (selectionType === "single" && isDateValid(value)) {
+            var date = convertDateStringToDate(value);
+            return setAriaLabel("Change date, currently selected date is ".concat(format(date, "EEEE do MMMM, yyyy")));
+        }
+        setAriaLabel("Choose Date");
+    };
+    var handleCalendarClose = function () {
+        var _a, _b;
+        if (((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.tagName) === "BODY") {
+            (_b = buttonRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    };
+    var onCancelClick = function () {
+        setShowCalendar(false);
+    };
+    var handleAutoFocus = function (e) {
+        e.preventDefault();
+    };
+    return (React__default.createElement("div", { className: classNames({
+            "arc-DatePicker--constrained": !isFluid
+        }) },
+        React__default.createElement(TextInput, __assign({ ref: getDatePickerRef, iconButton: {
+                onClick: handleIconClick,
+                onFocus: handleIconFocus,
+                icon: BtIconCalender,
+                label: ariaLabel,
+                ref: buttonRef
+            }, placeholder: placeHolder, errorMessage: errorMessage, helper: helper, id: id, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, label: label, labelSize: labelSize, maxLength: selectionType === "range" ? 23 : 10, name: name, onBlur: handleBlur, onChange: handleChange, onClickDisclosure: onClickDisclosure, type: "text", value: value, disclosureTitle: disclosureTitle, disclosureText: disclosureText, inputSize: inputSize }, props)),
+        React__default.createElement($cb5cc270b50c6fcd$export$be92b6f5f03c0fe9, { open: showCalendar, onOpenChange: handleCalendarOpenChange },
+            React__default.createElement($cb5cc270b50c6fcd$export$b688253958b8dfe7, null),
+            React__default.createElement($cb5cc270b50c6fcd$export$602eac185826482c, { container: arcRootElement || undefined },
+                React__default.createElement($cb5cc270b50c6fcd$export$7c6e2c02157bb7d2, { align: "start", "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: selectionType, selectedDate: convertDateStringToDate(value), selectedRange: convertRangeStringToDates(value), disabledDates: disabledDates, minDate: minDate, maxDate: maxDate, onDateSelect: handleDateSelect, onRangeSelect: handleRangeSelect }))))));
+});
+
+export { DATE_FORMAT, DatePicker, isDateValid, isRangeValid, parseDateString, parseRangeString };

package/dist/DatePicker/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@arc-ui/datepicker",
+  "types": "../types/components/DatePicker/index.d.ts",
+  "main": "./DatePicker.cjs.js",
+  "module": "./DatePicker.esm.js",
+  "private": true
+}

package/dist/FormControl/FormControl.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var FormControl = require('../_shared/cjs/FormControl-166e0957.js');
+var FormControl = require('../_shared/cjs/FormControl-b26ad353.js');
 require('../_shared/cjs/filter-data-attrs-1c9a530c.js');
 require('../_shared/cjs/index-9947ac13.js');
 require('react');
@@ -12,6 +12,7 @@ require('../_shared/cjs/DisclosureMini-d0eeb6bb.js');
 require('../_shared/cjs/BtIconChevronDown2Px.esm-39030ee0.js');
 require('../_shared/cjs/Text-606ca3a2.js');
 require('../_shared/cjs/suffix-modifier-64dcd338.js');
+require('../_shared/cjs/VisuallyHidden-e2c8b291.js');
 
 
 

package/dist/FormControl/FormControl.esm.js

@@ -1,4 +1,4 @@
-export { F as FormControl, C as FormControlContext } from '../_shared/esm/FormControl-9d4ddfec.js';
+export { F as FormControl, C as FormControlContext } from '../_shared/esm/FormControl-f0b8fe91.js';
 import '../_shared/esm/filter-data-attrs-ea8f4ed4.js';
 import '../_shared/esm/index-2e73c2e9.js';
 import 'react';
@@ -8,3 +8,4 @@ import '../_shared/esm/DisclosureMini-ec17b008.js';
 import '../_shared/esm/BtIconChevronDown2Px.esm-217276c2.js';
 import '../_shared/esm/Text-14f586ac.js';
 import '../_shared/esm/suffix-modifier-3d548e45.js';
+import '../_shared/esm/VisuallyHidden-b9eebf71.js';

package/dist/InformationCard/InformationCard.cjs.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var filterDataAttrs = require('../_shared/cjs/filter-data-attrs-1c9a530c.js');
 var React = require('react');
-var index_es = require('../_shared/cjs/index.es-26dd8c5d.js');
-var BtIconArrowRight_esm = require('../_shared/cjs/BtIconArrowRight.esm-8e8ac316.js');
+var useMediaQuery = require('../_shared/cjs/use-media-query-e61881d8.js');
+var CardLabel = require('../_shared/cjs/CardLabel-768abf20.js');
 var Icon = require('../_shared/cjs/Icon-a9801f05.js');
 var Tag = require('../_shared/cjs/Tag-42ddca45.js');
 var Image = require('../_shared/cjs/Image-e873b8fc.js');
@@ -24,14 +24,15 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var InformationCard = function (_a) {
     var cardUrl = _a.cardUrl, onClick = _a.onClick, heading = _a.heading, text = _a.text, label = _a.label, footerLogo = _a.footerLogo, button = _a.button, image = _a.image, tags = _a.tags, icon = _a.icon, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, props = filterDataAttrs.__rest(_a, ["cardUrl", "onClick", "heading", "text", "label", "footerLogo", "button", "image", "tags", "icon", "headingLevel"]);
-    var isMinWidthArcBreakpointS = index_es.useMediaQuery("(min-width: ".concat(index_es.ArcBreakpointS, "px)"));
-    var isMinWidthArcBreakpointM = index_es.useMediaQuery("(min-width: ".concat(index_es.ArcBreakpointM, "px)"));
+    var isMinWidthArcBreakpointS = useMediaQuery.useMediaQuery("(min-width: ".concat(useMediaQuery.ArcBreakpointS, "px)"));
+    var isMinWidthArcBreakpointM = useMediaQuery.useMediaQuery("(min-width: ".concat(useMediaQuery.ArcBreakpointM, "px)"));
+    var _c = React.useState(false), showHoverState = _c[0], setShowHoverState = _c[1];
     var headingSpacing = isMinWidthArcBreakpointS ? "16" : "8";
     var assetSpacing = isMinWidthArcBreakpointM ? "24" : "20";
     var containerSpacing = isMinWidthArcBreakpointS ? "32" : "24";
-    var HeadingElement = "h".concat(headingLevel);
+    var handleShowHoverState = function (show) { return function () { return setShowHoverState(show); }; };
     return (React__default["default"].createElement("div", filterDataAttrs.__assign({ className: index.classNames("arc-InformationCard", {
-            "arc-InformationCard--interactive": cardUrl
+            "arc-InformationCard--outlined": cardUrl && showHoverState
         }) }, filterDataAttrs.filterDataAttrs(props)),
         React__default["default"].createElement(Surface.Surface, { growVertically: true, padding: containerSpacing, background: "white" },
             React__default["default"].createElement("div", null,
@@ -42,9 +43,9 @@ var InformationCard = function (_a) {
                     React__default["default"].createElement(Icon.Icon, { testId: "information-card-icon", icon: icon, size: 96 }),
                     React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: assetSpacing }))),
                 label && (React__default["default"].createElement(React__default["default"].Fragment, null,
-                    React__default["default"].createElement("span", { className: "arc-InformationCard-label" }, label),
+                    React__default["default"].createElement(CardLabel.CardLabel, { color: "supporting", text: label }),
                     React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: headingSpacing }))),
-                React__default["default"].createElement(HeadingElement, { className: "arc-InformationCard-heading" }, cardUrl ? (React__default["default"].createElement("a", { className: "arc-InformationCard-headingLink", href: cardUrl, onClick: onClick }, heading)) : (heading))),
+                React__default["default"].createElement(CardLabel.CardHeading, { heading: heading, headingLevel: headingLevel, href: cardUrl, onClick: onClick, onMouseEnter: handleShowHoverState(true), onMouseLeave: handleShowHoverState(false), onFocus: handleShowHoverState(true), onBlur: handleShowHoverState(false) })),
             React__default["default"].createElement("div", { className: "arc-InformationCard-contentContainer" },
                 text && (React__default["default"].createElement(React__default["default"].Fragment, null,
                     React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: headingSpacing }),
@@ -59,7 +60,7 @@ var InformationCard = function (_a) {
                     (button || footerLogo) && React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "24" })))),
             React__default["default"].createElement("div", { className: "arc-InformationCard-footer" },
                 button && !cardUrl && (React__default["default"].createElement("div", { className: "arc-InformationCard-footerButtonContainer" },
-                    React__default["default"].createElement(Button.Button, filterDataAttrs.__assign({}, button, { iconPosition: "beforeText", fill: "flat", icon: BtIconArrowRight_esm.BtIconArrowRight })))),
+                    React__default["default"].createElement(Button.Button, filterDataAttrs.__assign({}, button, { iconPosition: "beforeText", fill: "flat", icon: CardLabel.BtIconArrowRight })))),
                 footerLogo && (React__default["default"].createElement("div", { className: "arc-InformationCard-footerLogoContainer" },
                     React__default["default"].createElement(Image.Image, filterDataAttrs.__assign({}, footerLogo))))))));
 };