@qoretechnologies/reqore 0.67.6 → 0.68.1

package/dist/esm/components/ControlGroup/index.js

@@ -0,0 +1,351 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { debounce } from 'lodash';
+import React, { forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useMount, useUnmount } from 'react-use';
+import styled, { css } from 'styled-components';
+import { ReqoreButton, ReqoreDrawer } from '../..';
+import { GAP_FROM_SIZE, RADIUS_FROM_SIZE } from '../../constants/sizes';
+import { useCloneThroughFragments } from '../../hooks/useCloneThroughFragments';
+import { StyledEffect } from '../Effect';
+import { StyledHeader } from '../Header';
+import { StyledParagraph } from '../Paragraph';
+export const StyledReqoreControlGroup = styled(StyledEffect) `
+  display: flex;
+  flex: ${({ fluid, fixed }) => (fixed ? '0 0 auto' : fluid ? undefined : '0 0 auto')};
+  width: ${({ fluid, fixed }) => (fluid && !fixed ? '100%' : undefined)};
+  justify-content: ${({ fluid, vertical, spaceBetween }) => vertical && fluid
+    ? spaceBetween
+        ? 'space-between'
+        : 'stretch'
+    : !vertical && spaceBetween
+        ? 'space-between'
+        : undefined};
+  align-items: ${({ vertical, fluid, horizontalAlign, spaceBetween }) => vertical
+    ? fluid
+        ? spaceBetween
+            ? 'space-between'
+            : 'stretch'
+        : horizontalAlign
+    : vertical && spaceBetween
+        ? 'space-between'
+        : undefined};
+  flex-flow: ${({ vertical }) => (vertical ? 'column' : 'row')};
+  gap: ${({ gapSize, stack }) => (!stack ? `${GAP_FROM_SIZE[gapSize]}px` : undefined)};
+  flex-wrap: ${({ wrap }) => (wrap ? 'wrap' : 'nowrap')};
+
+  // If the group has the fill prop,
+  // we need to make sure that the children are vertically stretched
+  // kind of like 'fluid' but vertically
+  // ! Only works when the group is horizontal & wrap is false
+  ${({ fill, vertical }) => {
+    if (fill && !vertical) {
+        return css `
+        > * {
+          max-height: 100% !important;
+          height: unset !important;
+          align-self: stretch !important;
+        }
+      `;
+    }
+    return undefined;
+}}
+
+  > *, > ${StyledParagraph}, > ${StyledHeader} {
+    margin-top: ${({ fill, verticalAlign }) => !fill && (verticalAlign === 'flex-end' || verticalAlign === 'center') ? 'auto' : undefined};
+    margin-bottom: ${({ fill, verticalAlign }) => !fill && (verticalAlign === 'flex-start' || verticalAlign === 'center') ? 'auto' : undefined};
+    margin-right: ${({ horizontalAlign }) => (horizontalAlign === 'center' ? 'auto' : undefined)};
+
+    ${({ vertical }) => vertical &&
+    css `
+        margin-left: ${({ horizontalAlign }) => horizontalAlign === 'flex-end' || horizontalAlign === 'center' ? 'auto' : undefined};
+      `}
+  }
+
+  ${({ vertical }) => !vertical &&
+    css `
+      > *:first-child {
+        margin-left: ${({ horizontalAlign }) => horizontalAlign === 'flex-end' || horizontalAlign === 'center' ? 'auto' : undefined};
+      }
+    `}
+
+  ${({ stack, wrap }) => {
+    if (!stack)
+        return undefined;
+    return css `
+      ${wrap ? 'padding: 1px 0 0 1px;' : ''}
+
+      > * {
+        border-radius: 0;
+        position: relative;
+
+        &:hover,
+        &:focus-within {
+          z-index: 1;
+        }
+      }
+    `;
+}}
+`;
+const ReqoreControlGroup = memo(forwardRef(({ children, className, minimal, size = 'normal', gapSize = 'normal', fluid, flat, fixed, fill, rounded = true, wrap, stack, isInsideStackGroup, isInsideVerticalGroup, isMasterGroupRounded, intent, customTheme, isFirst, isLast, vertical, childrenCount, childId, isChild, isFirstGroup, isLastGroup, verticalAlign, horizontalAlign = 'flex-start', responsive, overflowButtonProps, ...rest }, externalRef) => {
+    const isStack = stack || isInsideStackGroup;
+    const isVertical = vertical || isInsideVerticalGroup;
+    const [overflowingChildren, setOverflowingChildren] = useState(0);
+    const [lastReSize, setLastReSize] = useState(0);
+    const [isOverflownDialogOpen, setIsOverflownDialogOpen] = useState(false);
+    const observer = useRef(null);
+    const ref = useRef(null);
+    const setRefs = useCallback((node) => {
+        ref.current = node;
+        if (typeof externalRef === 'function') {
+            externalRef(node);
+        }
+        else if (externalRef) {
+            externalRef.current = node;
+        }
+    }, [externalRef]);
+    const realChildCount = useMemo(() => {
+        let count = 0;
+        const countChildren = (children) => React.Children.forEach(children, (child) => {
+            if (child && React.isValidElement(child)) {
+                if (child.type === React.Fragment) {
+                    // just compare to `React.Fragment`
+                    countChildren(child.props.children);
+                }
+                else {
+                    count++;
+                }
+            }
+        });
+        countChildren(children);
+        return count < 0 ? 0 : count;
+    }, [children]);
+    const checkIfOverflowing = useCallback(() => {
+        return (ref.current &&
+            ref.current.clientWidth > 40 &&
+            !vertical &&
+            responsive &&
+            ref.current.scrollWidth > ref.current.clientWidth);
+    }, [vertical, responsive, children]);
+    useMount(() => {
+        if (!vertical && responsive) {
+            if ('ResizeObserver' in window) {
+                observer.current = new ResizeObserver(debounce(() => {
+                    if (ref && ref.current) {
+                        setOverflowingChildren(0);
+                        setLastReSize(ref.current.clientWidth);
+                    }
+                }, 200));
+                observer.current.observe(ref.current);
+            }
+        }
+    });
+    useUnmount(() => {
+        if (observer.current) {
+            observer.current.disconnect();
+        }
+    });
+    useEffect(() => {
+        // Is the control group still overflowing?
+        if ((overflowingChildren || overflowingChildren === 0) && checkIfOverflowing()) {
+            setOverflowingChildren(overflowingChildren + 1);
+        }
+        // Hide the dialog if the group was resized and the dialog was open
+        if (overflowingChildren === 0) {
+            setIsOverflownDialogOpen(false);
+        }
+    }, [overflowingChildren, lastReSize, checkIfOverflowing]);
+    const getIsFirst = (index) => {
+        return !isInsideStackGroup || childrenCount === 1
+            ? index === 0
+            : (isFirst || isFirst !== false) && index === 0;
+    };
+    const getIsLast = (index) => {
+        return !isInsideStackGroup
+            ? index === realChildCount - 1
+            : (isLast || isLast !== false) && index === realChildCount - 1;
+    };
+    const getIsLastInFirstGroup = (index) => {
+        return !isInsideStackGroup
+            ? index === 0
+            : isFirstGroup && (isLast || isLast !== false) && index === realChildCount - 1;
+    };
+    const getIsFirstInLastGroup = (index) => {
+        return !isInsideStackGroup
+            ? index === realChildCount - 1
+            : isLastGroup && (isFirst || isFirst !== false) && childId === 1 && index === 0;
+    };
+    const getIsLastInLastGroup = (index) => {
+        return !isInsideStackGroup
+            ? index === realChildCount - 1
+            : isLastGroup && (isLast || isLast !== false) && index === realChildCount - 1;
+    };
+    const getBorderTopLeftRadius = (index, isChildRounded) => {
+        if (isMasterGroupRounded === false || isChildRounded === false) {
+            return undefined;
+        }
+        const _isFirstGroup = !isInsideStackGroup || childrenCount === 1 ? true : isChild ? isFirstGroup : index === 0;
+        // If this is the first item
+        if (_isFirstGroup && getIsFirst(index)) {
+            return RADIUS_FROM_SIZE[size];
+        }
+        return undefined;
+    };
+    const getBorderTopRightRadius = (index, isChildRounded) => {
+        if (isMasterGroupRounded === false || isChildRounded === false) {
+            return undefined;
+        }
+        // If this group is not vertical we need to style the very last item
+        if (!isVertical || !isStack) {
+            const _isLastGroup = !isInsideStackGroup || childrenCount === 1
+                ? true
+                : isChild
+                    ? isLastGroup
+                    : index === realChildCount - 1;
+            if (_isLastGroup && getIsLast(index)) {
+                return RADIUS_FROM_SIZE[size];
+            }
+            return undefined;
+        }
+        // This border only needs to apply when this group is vertical
+        // AND this item is the last item of the first group
+        if (getIsLastInFirstGroup(index)) {
+            return RADIUS_FROM_SIZE[size];
+        }
+        return undefined;
+    };
+    const getBorderBottomLeftRadius = (index, isChildRounded) => {
+        if (isMasterGroupRounded === false || isChildRounded === false) {
+            return undefined;
+        }
+        // If this group is not vertical we need to style the very first item
+        if (!isVertical || !isStack) {
+            const _isFirstGroup = !isInsideStackGroup || childrenCount === 1 ? true : isChild ? isFirstGroup : index === 0;
+            if (_isFirstGroup && getIsFirst(index)) {
+                return RADIUS_FROM_SIZE[size];
+            }
+            return undefined;
+        }
+        // This border only needs to apply when this group is vertical
+        // AND this item is the first item of the last group
+        if (getIsFirstInLastGroup(index)) {
+            return RADIUS_FROM_SIZE[size];
+        }
+        return undefined;
+    };
+    const getBorderBottomRightRadius = (index, isChildRounded) => {
+        if (isMasterGroupRounded === false || isChildRounded === false) {
+            return undefined;
+        }
+        const _isLastGroup = !isInsideStackGroup || childrenCount === 1
+            ? true
+            : isChild
+                ? isLastGroup
+                : index === realChildCount - 1;
+        // If this is the last item
+        if (_isLastGroup && getIsLast(index)) {
+            return RADIUS_FROM_SIZE[size];
+        }
+        return undefined;
+    };
+    const { clone } = useCloneThroughFragments((props, _index, index) => {
+        let newProps = {
+            ...props,
+            key: props.reactKey || _index,
+            minimal: props?.minimal || props?.minimal === false ? props.minimal : minimal,
+            size: props?.size || size,
+            flat: props?.flat || props?.flat === false ? props.flat : flat,
+            fluid: props?.fluid || props?.fluid === false ? props.fluid : fluid,
+            fixed: props?.fixed || props?.fixed === false ? props.fixed : fixed,
+            fill: props?.fill || props?.fill === false ? props.fill : fill,
+            spaceBetween: props?.spaceBetween || props?.spaceBetween === false ? props.spaceBetween : false,
+            stack: props?.stack || props?.stack === false ? props.stack : isStack,
+            intent: props?.intent || intent,
+            customTheme: props?.customTheme || customTheme,
+        };
+        if (isStack) {
+            const childIsFlat = props?.flat || props?.flat === false ? props.flat : flat;
+            const needsCollapse = !childIsFlat;
+            const isFirstChild = index === 0;
+            const collapseMargin = needsCollapse
+                ? wrap
+                    ? { marginTop: -1, marginLeft: -1 }
+                    : !isFirstChild
+                        ? isVertical
+                            ? { marginTop: -1 }
+                            : { marginLeft: -1 }
+                        : {}
+                : {};
+            newProps = {
+                ...newProps,
+                style: {
+                    ...collapseMargin,
+                    borderTopLeftRadius: getBorderTopLeftRadius(index, props?.rounded),
+                    borderBottomLeftRadius: getBorderBottomLeftRadius(index, props?.rounded),
+                    borderTopRightRadius: getBorderTopRightRadius(index, props?.rounded),
+                    borderBottomRightRadius: getBorderBottomRightRadius(index, props?.rounded),
+                    ...(props?.style || {}),
+                },
+                isChild: true,
+                rounded: isMasterGroupRounded === false ? false : !isStack,
+                isMasterGroupRounded: isChild ? isMasterGroupRounded : rounded,
+                isInsideStackGroup: isStack,
+                isInsideVerticalGroup: isVertical,
+                isFirst: isChild ? getIsFirst(index) : undefined,
+                isLast: isChild ? getIsLast(index) : undefined,
+                isLastInFirstGroup: getIsLastInFirstGroup(index),
+                isLastInLastGroup: getIsLastInLastGroup(index),
+                isFirstInLastGroup: getIsFirstInLastGroup(index),
+                childrenCount: realChildCount,
+                childId: index + 1,
+                isFirstGroup: isChild ? isFirstGroup : index === 0,
+                isLastGroup: isChild ? isLastGroup : index === realChildCount - 1,
+            };
+        }
+        return newProps;
+    }, [
+        children,
+        isStack,
+        isVertical,
+        isChild,
+        isLastGroup,
+        isFirstGroup,
+        realChildCount,
+        fluid,
+        flat,
+        minimal,
+        size,
+        intent,
+        rounded,
+        fixed,
+        fill,
+        customTheme,
+        isMasterGroupRounded,
+        wrap,
+    ]);
+    // Get the overflown children
+    const overflownChildren = useMemo(() => overflowingChildren ? React.Children.toArray(children).slice(0, overflowingChildren) : [], [children, overflowingChildren]);
+    // Remove the overflowing children count from the start of the children array
+    const _children = useMemo(() => overflowingChildren && responsive
+        ? [
+            children.slice(overflowingChildren),
+            _jsx(ReqoreButton, { icon: 'MenuLine', customTheme: customTheme, tooltip: {
+                    handler: 'click',
+                    content: (_jsx(ReqoreControlGroup, { fluid: true, wrap: true, children: overflownChildren })),
+                }, active: isOverflownDialogOpen, fixed: true, onClick: (e) => e.stopPropagation(), ...overflowButtonProps }, 'control-group-menu'),
+        ]
+        : children, [
+        children,
+        overflowingChildren,
+        responsive,
+        overflownChildren,
+        customTheme,
+        overflowButtonProps,
+        isOverflownDialogOpen,
+    ]);
+    return (_jsxs(_Fragment, { children: [isOverflownDialogOpen ? (_jsx(ReqoreDrawer, { isOpen: true, onClose: () => setIsOverflownDialogOpen(false), flat: true, floating: true, minimal: true, position: 'bottom', hasBackdrop: false, label: 'Hidden items', minSize: '100px', size: 'auto' })) : null, _jsx(StyledReqoreControlGroup, { as: 'div', ...rest, vertical: vertical, style: {
+                    overflowX: responsive ? 'auto' : undefined,
+                    ...rest.style,
+                }, size: size, gapSize: gapSize, ref: setRefs, rounded: rounded, fluid: fluid, fixed: fixed, fill: fill, wrap: wrap, stack: isStack, verticalAlign: verticalAlign, horizontalAlign: horizontalAlign, className: `${className || ''} reqore-control-group`, children: clone(_children) })] }));
+}));
+export default ReqoreControlGroup;
+//# sourceMappingURL=index.js.map

package/dist/esm/components/ControlGroup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/ControlGroup/index.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/DatePicker/MonthYearDropdowns.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getPreviousYears, months, toDate } from '../../helpers/dates';
+import ReqoreControlGroup from '../ControlGroup';
+import ReqoreDropdown from '../Dropdown';
+export const YearMonthDropdowns = ({ value: _value, onValueChange, setIsYearDropdownOpen, setIsMonthDropdownOpen, minValue: _minValue = new Date(1970, 0, 1), maxValue: _maxValue = new Date(new Date().getFullYear() + 5, 11, 31), ...rest }) => {
+    const value = _value ?? toDate(new Date());
+    const minValue = toDate(_minValue);
+    const maxValue = toDate(_maxValue);
+    const currentYear = new Date().getFullYear();
+    const years = getPreviousYears(minValue.year, maxValue.year);
+    return (_jsxs(ReqoreControlGroup, { gapSize: 'small', children: [_jsx(ReqoreDropdown, { delay: 0, compact: true, filterable: true, caretPosition: 'right', label: months[value?.month - 1] ?? 'Month', inputProps: {
+                    focusRules: {
+                        type: 'auto',
+                    },
+                }, ...rest, scrollToSelected: true, items: months.map((month, index) => ({
+                    value: month,
+                    selected: index === value?.month - 1,
+                    disabled: value.set({ month: index + 1 }).compare(minValue) < 1 ||
+                        value.set({ month: index + 1 }).compare(maxValue) > 1,
+                })), onItemSelect: (item) => onValueChange(value.set({ month: months.findIndex((m) => m === item.value) + 1 }), false), onToggleChange: setIsMonthDropdownOpen }), _jsx(ReqoreDropdown, { delay: 0, compact: true, filterable: true, caretPosition: 'right', label: value?.year ?? currentYear, inputProps: {
+                    focusRules: {
+                        type: 'auto',
+                    },
+                }, ...rest, scrollToSelected: true, items: years.map((year) => ({
+                    value: year,
+                    selected: year === value?.year,
+                    disabled: value.set({ year }).compare(minValue) < 1 || value.set({ year }).compare(maxValue) > 1,
+                })), onItemSelect: (item) => onValueChange(value.set({ year: item.value }), false), onToggleChange: setIsYearDropdownOpen })] }));
+};
+//# sourceMappingURL=MonthYearDropdowns.js.map

package/dist/esm/components/DatePicker/MonthYearDropdowns.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MonthYearDropdowns.js","sourceRoot":"","sources":["../../../../src/components/DatePicker/MonthYearDropdowns.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/DatePicker/index.js

@@ -0,0 +1,244 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getLocalTimeZone, isSameDay, Time, toCalendarDateTime, toZoned, } from '@internationalized/date';
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { Button, Calendar, CalendarCell, CalendarGrid, DateInput, DateSegment, I18nProvider, DatePicker as RADatePicker, TimeField, } from 'react-aria-components';
+import styled from 'styled-components';
+import { ReqoreErrorBoundary, ReqorePanel, ReqorePopover } from '../..';
+import { changeLightness } from '../../helpers/colors';
+import { formatDateToType, toDate } from '../../helpers/dates';
+import { useComponentTooltip } from '../../hooks/useComponentTooltip';
+import { useReqoreTheme } from '../../hooks/useTheme';
+import { DisabledElement } from '../../styles';
+import ReqoreButton from '../Button';
+import ReqoreControlGroup from '../ControlGroup';
+import ReqoreInput from '../Input';
+import { YearMonthDropdowns } from './MonthYearDropdowns';
+const StyledRADatePicker = styled(RADatePicker) `
+  &[data-fluid='false'] {
+    min-width: 220px;
+    width: fit-content;
+  }
+`;
+const StyledDateSegment = styled(DateSegment) `
+  padding: 2px;
+
+  &:focus {
+    background-color: ${(props) => changeLightness(props.theme.main, 0.1)};
+    outline: none;
+    border-radius: 4px;
+  }
+`;
+const StyledDateInput = styled(DateInput) `
+  display: inline-flex;
+  align-items: center;
+`;
+const StyledCalendarGrid = styled(CalendarGrid) `
+  width: 100%;
+`;
+const StyledTimeField = styled(TimeField) `
+  display: flex;
+  flex: 1 auto;
+`;
+const StyledCalendarCell = styled(CalendarCell) `
+  &[data-disabled='true']:not([data-selected='true']) {
+    ${DisabledElement}
+  }
+  &:focus {
+    outline: none;
+  }
+`;
+const TriggerPopover = ({ buttonProps, label, closeOnOutsideClick, passPopoverData, onToggleChange, popoverProps, calendarContent, 
+// The rest are injected by ReqoreControlGroup (style, rounded, size, etc.)
+// and forwarded into componentProps so they reach the inner ReqoreButton.
+...controlGroupProps }) => (_jsx(ReqorePopover, { component: ReqoreButton, componentProps: {
+        icon: 'CalendarLine',
+        ...buttonProps,
+        ...controlGroupProps,
+        label,
+    }, closeOnOutsideClick: closeOnOutsideClick, closeOnAnyClick: false, closeOnInsideClick: false, passPopoverData: passPopoverData, noWrapper: true, handler: 'click', placement: 'auto-start', noArrow: true, onToggleChange: onToggleChange, ...popoverProps, content: calendarContent }));
+export const DatePicker = ({ value: _value, onChange, fluid = true, flat, rounded, minimal, size = 'normal', pill, intent, customTheme, inheritCustomTheme, granularity = 'minute', hourCycle = 24, hideTimeZone = true, shouldForceLeadingZeros = true, onClearClick, closeOnSelect = true, isClearable, tooltip, popoverProps, inputProps, pickerProps, timeInputProps, timeFieldProps, pickerActiveDayProps, pickerDayProps, yearMonthPickerProps, minValue, maxValue, readOnlyInputOnTouch = true, dateType = 'iso', errorBoundaryOptions, locale, selectOnly, placeholder, buttonProps, ...props }) => {
+    const value = useMemo(() => (_value ? toDate(_value) : null), [_value]);
+    // save time in separate state because date can be cleared and equals to null
+    const [time, setTime] = useState(() => {
+        if (!value)
+            return undefined;
+        return new Time(value?.hour ?? 0, value?.minute ?? 0, value?.second ?? 0, value?.millisecond ?? 0);
+    });
+    const [focusedValue, setFocusedValue] = useState(value);
+    const [isMonthDropdownOpen, setIsMonthDropdownOpen] = useState(false);
+    const [isYearDropdownOpen, setIsYearDropdownOpen] = useState(false);
+    const [hasTouchPrimaryInput, setHasTouchPrimaryInput] = useState(false);
+    const ref = useRef(null);
+    const theme = useReqoreTheme('main', customTheme, intent, undefined, inheritCustomTheme);
+    const popoverData = useRef({});
+    // use ref to save value type since datepicker can have null values
+    const isStringRef = useRef(typeof _value === 'string');
+    useLayoutEffect(() => {
+        if (value) {
+            isStringRef.current = typeof _value === 'string';
+        }
+    });
+    useEffect(() => {
+        if (typeof window === 'undefined') {
+            return undefined;
+        }
+        const updateTouchPrimaryInput = () => {
+            const hasCoarsePointer = window.matchMedia?.('(pointer: coarse)').matches;
+            const hasNoHover = window.matchMedia?.('(hover: none)').matches;
+            const hasTouchPoints = typeof navigator !== 'undefined' && typeof navigator.maxTouchPoints === 'number'
+                ? navigator.maxTouchPoints > 0
+                : false;
+            setHasTouchPrimaryInput(Boolean(hasCoarsePointer || (hasNoHover && hasTouchPoints)));
+        };
+        updateTouchPrimaryInput();
+        const coarsePointerQuery = window.matchMedia?.('(pointer: coarse)');
+        const noHoverQuery = window.matchMedia?.('(hover: none)');
+        coarsePointerQuery?.addEventListener?.('change', updateTouchPrimaryInput);
+        noHoverQuery?.addEventListener?.('change', updateTouchPrimaryInput);
+        return () => {
+            coarsePointerQuery?.removeEventListener?.('change', updateTouchPrimaryInput);
+            noHoverQuery?.removeEventListener?.('change', updateTouchPrimaryInput);
+        };
+    }, []);
+    const showTime = granularity === 'minute' || granularity === 'second' || granularity === 'hour';
+    const handleDateChange = (value, close = true) => {
+        let date;
+        // if previous value is null apply saved time state
+        if (!_value && time) {
+            date = toZoned(toCalendarDateTime(value, time), getLocalTimeZone()).toDate();
+        }
+        else {
+            // set date and time from changed value
+            date = value ? value.toDate() : null;
+            if (date)
+                setTime(new Time(value?.hour, value?.minute, value?.second, value?.millisecond));
+        }
+        onChange?.((isStringRef.current ? date?.toISOString() : formatDateToType(date, dateType)));
+        setFocusedValue(value);
+        if (closeOnSelect && !showTime && close) {
+            popoverData.current?.close();
+        }
+    };
+    const onTimeChange = (time) => {
+        if (!time)
+            return;
+        setTime(time);
+        if (value) {
+            const date = toZoned(toCalendarDateTime(value, time), getLocalTimeZone());
+            handleDateChange?.(date);
+        }
+    };
+    const handleClearClick = () => {
+        if (value)
+            onChange(null);
+        if (time)
+            setTime(new Time(0, 0, 0, 0));
+        onClearClick?.();
+    };
+    const onMonthYearChange = (date) => {
+        handleDateChange(date, false);
+    };
+    const onToggleChange = (open) => {
+        // reset focused value state on popover close
+        if (!open) {
+            setFocusedValue(null);
+        }
+    };
+    const handleCalendarDateChange = (date) => {
+        handleDateChange(value ? toZoned(toCalendarDateTime(date, time), getLocalTimeZone()) : date);
+    };
+    const { Component, props: finalProps } = useComponentTooltip({
+        value,
+        onChange: handleDateChange,
+        granularity,
+        tooltip,
+        hideTimeZone,
+        shouldForceLeadingZeros,
+        hourCycle,
+        'data-fluid': fluid,
+        'aria-label': 'Date',
+        minValue: toDate(minValue),
+        maxValue: toDate(maxValue),
+        ...props,
+    }, StyledRADatePicker, ref);
+    const resolvedLocale = locale ??
+        (typeof navigator !== 'undefined'
+            ? navigator.languages?.find((l) => !l.startsWith('en')) ?? navigator.language
+            : undefined);
+    const formattedDate = useMemo(() => {
+        if (!value)
+            return undefined;
+        const dateObj = value.toDate();
+        const options = granularity === 'day'
+            ? { year: 'numeric', month: 'short', day: 'numeric' }
+            : { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' };
+        return new Intl.DateTimeFormat(resolvedLocale, options).format(dateObj);
+    }, [value, granularity, resolvedLocale]);
+    const calendarContent = useMemo(() => (_jsx(Calendar, { defaultFocusedValue: value, onChange: handleCalendarDateChange, focusedValue: focusedValue, onFocusChange: (date) => setFocusedValue(toZoned(date, getLocalTimeZone())), minValue: toDate(minValue), maxValue: toDate(maxValue), children: _jsxs(ReqorePanel, { responsiveActionsWrapperProps: { fluid: false }, minimal: true, size: 'small', responsiveTitle: false, intent: intent, label: _jsx(YearMonthDropdowns, { value: focusedValue, onValueChange: onMonthYearChange, setIsMonthDropdownOpen: setIsMonthDropdownOpen, setIsYearDropdownOpen: setIsYearDropdownOpen, minValue: minValue, maxValue: maxValue, intent: intent, customTheme: theme, ...yearMonthPickerProps }), ...pickerProps, actions: [
+                {
+                    group: [
+                        {
+                            as: ReqoreButton,
+                            props: {
+                                as: Button,
+                                customTheme: theme,
+                                slot: 'previous',
+                                icon: 'ArrowLeftFill',
+                                size: 'normal',
+                                compact: true,
+                            },
+                        },
+                        {
+                            as: ReqoreButton,
+                            props: {
+                                as: Button,
+                                customTheme: theme,
+                                slot: 'next',
+                                icon: 'ArrowRightFill',
+                                size: 'normal',
+                                compact: true,
+                            },
+                        },
+                    ],
+                },
+            ], children: [_jsx(StyledCalendarGrid, { children: (date) => {
+                        const isSelected = value && isSameDay(date, value);
+                        return (_jsx(StyledCalendarCell, { "data-selected": isSelected, date: date, children: _jsx(ReqoreButton, { customTheme: isSelected ? theme : { main: 'transparent' }, label: date.day, active: isSelected, textAlign: 'center', circle: true, minimal: true, flat: true, compact: true, ...(isSelected ? pickerActiveDayProps : pickerDayProps) }, date.toString()) }));
+                    } }), showTime && (_jsx(ReqoreControlGroup, { fluid: true, children: _jsx(StyledTimeField, { value: time, onChange: onTimeChange, granularity: granularity, hideTimeZone: hideTimeZone, shouldForceLeadingZeros: shouldForceLeadingZeros, hourCycle: hourCycle, "aria-label": 'Time', ...timeFieldProps, children: _jsx(ReqoreInput, { icon: 'TimeLine', fluid: true, as: StyledDateInput, flat: flat, rounded: rounded, minimal: minimal, size: size, pill: pill, intent: intent, theme: theme, ...timeInputProps, children: (segment) => _jsx(StyledDateSegment, { segment: segment }) }) }) }))] }) })), [value, !isMonthDropdownOpen && !isYearDropdownOpen, focusedValue, time]);
+    if (selectOnly) {
+        const triggerProps = {
+            buttonProps,
+            fluid,
+            size,
+            intent,
+            flat,
+            minimal,
+            pill,
+            rounded,
+            label: formattedDate ?? placeholder ?? buttonProps?.label,
+            closeOnOutsideClick: !isMonthDropdownOpen && !isYearDropdownOpen,
+            passPopoverData: (data) => (popoverData.current = data),
+            onToggleChange,
+            popoverProps,
+            calendarContent,
+        };
+        return (_jsx(ReqoreErrorBoundary, { ...errorBoundaryOptions, children: _jsx(I18nProvider, { locale: resolvedLocale, children: isClearable && value ? (_jsxs(ReqoreControlGroup, { fluid: fluid, size: size, stack: true, children: [_jsx(TriggerPopover, { ...triggerProps }), _jsx(ReqoreButton, { fixed: true, icon: 'CloseLine', size: size, intent: intent, flat: flat, minimal: minimal, rounded: rounded, onClick: handleClearClick })] })) : (_jsx(TriggerPopover, { ...triggerProps })) }) }));
+    }
+    return (_jsx(ReqoreErrorBoundary, { ...errorBoundaryOptions, children: _jsx(I18nProvider, { locale: resolvedLocale, children: _jsx(Component, { ...finalProps, children: _jsx(ReqorePopover, { component: ReqoreInput, componentProps: {
+                        as: StyledDateInput,
+                        onClearClick: handleClearClick,
+                        fluid,
+                        value,
+                        readOnly: readOnlyInputOnTouch && hasTouchPrimaryInput,
+                        inputMode: readOnlyInputOnTouch && hasTouchPrimaryInput ? 'none' : undefined,
+                        rounded,
+                        size,
+                        pill,
+                        minimal,
+                        intent,
+                        flat,
+                        icon: 'CalendarLine',
+                        ...inputProps,
+                    }, closeOnOutsideClick: !isMonthDropdownOpen && !isYearDropdownOpen, closeOnAnyClick: false, closeOnInsideClick: false, passPopoverData: (data) => (popoverData.current = data), isReqoreComponent: true, noWrapper: true, handler: 'click', placement: 'auto-start', noArrow: true, onToggleChange: onToggleChange, ...popoverProps, content: calendarContent, children: (segment) => _jsx(StyledDateSegment, { segment: segment }) }) }) }) }));
+};
+//# sourceMappingURL=index.js.map