@sprinklrjs/spaceweb 11.0.0 → 12.0.0-ci.0

package/baseui/datepicker/styled-components.js

@@ -0,0 +1,287 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledWeekdayHeader = exports.StyledDayLabel = exports.StyledDay = exports.StyledWeek = exports.StyledMonth = exports.StyledNextButton = exports.StyledPrevButton = exports.StyledMonthYearSelectIconContainer = exports.StyledMonthYearSelectButton = exports.StyledMonthHeader = exports.StyledCalendarHeader = exports.StyledSelectorContainer = exports.StyledCalendarContainer = exports.StyledMonthContainer = exports.StyledRoot = exports.StyledEndDate = exports.StyledStartDate = exports.StyledInputLabel = exports.StyledInputWrapper = void 0;
+var tslib_1 = require("tslib");
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+var style_1 = require("../../style");
+var day_state_1 = (0, tslib_1.__importDefault)(require("./utils/day-state"));
+var constants_1 = require("./constants");
+var longHandHelpers_1 = require("../../helpers/longHandHelpers");
+/**
+ * Main component container element
+ */
+exports.StyledInputWrapper = (0, style_1.styled)('div');
+exports.StyledInputWrapper.displayName = 'StyledInputWrapper';
+exports.StyledInputLabel = (0, style_1.styled)('div');
+exports.StyledInputLabel.displayName = 'StyledInputLabel';
+exports.StyledStartDate = (0, style_1.styled)('div');
+exports.StyledStartDate.displayName = 'StyledStartDate';
+exports.StyledEndDate = (0, style_1.styled)('div');
+exports.StyledEndDate.displayName = 'StyledEndDate';
+/**
+ * Main component container element
+ */
+exports.StyledRoot = (0, style_1.styled)('div', 'rounded-0 inline-block text-center spr-ui-01');
+exports.StyledRoot.displayName = 'StyledRoot';
+exports.StyledMonthContainer = (0, style_1.styled)('div', 'flex', function (_, props) {
+    var $orientation = props.$orientation;
+    return {
+        flexDirection: $orientation === constants_1.ORIENTATION.vertical ? 'column' : 'row',
+        gap: '16px',
+    };
+});
+exports.StyledMonthContainer.displayName = 'StyledMonthContainer';
+exports.StyledCalendarContainer = (0, style_1.styled)('div', {});
+exports.StyledCalendarContainer.displayName = 'StyledCalendarContainer';
+exports.StyledSelectorContainer = (0, style_1.styled)('div');
+exports.StyledSelectorContainer.displayName = 'StyledSelectorContainer';
+exports.StyledCalendarHeader = (0, style_1.styled)('div', 'box-border spr-text-01 items-center spr-ui-01', function (_, props) {
+    var $density = props.$density;
+    return {
+        minHeight: $density === constants_1.DENSITY.high ? '26px' : '36px',
+        width: $density === constants_1.DENSITY.high ? '100%' : '392px',
+    };
+});
+exports.StyledCalendarHeader.displayName = 'StyledCalendarHeader';
+exports.StyledMonthHeader = (0, style_1.styled)('div', 'spr-text-01 spr-ui-01 w-full whitespace-no-wrap');
+exports.StyledMonthHeader.displayName = 'StyledMonthHeader';
+exports.StyledMonthYearSelectButton = (0, style_1.styled)('button', 'border-0 outline-none items-center flex cursor-pointer bg-transparent spr-text-01', function (_a, _b) {
+    var theme = _a.theme;
+    var $isFocusVisible = _b.$isFocusVisible;
+    return ({
+        ':focus': {
+            boxShadow: $isFocusVisible ? "0 0 0 3px ".concat(theme.spr.focus01) : 'none',
+        },
+    });
+});
+exports.StyledMonthYearSelectButton.displayName = 'StyledMonthYearSelectButton';
+exports.StyledMonthYearSelectIconContainer = (0, style_1.styled)('span', 'flex items-center ml-3');
+exports.StyledMonthYearSelectIconContainer.displayName = 'StyledMonthYearSelectIconContainer';
+exports.StyledPrevButton = (0, style_1.styled)('button');
+exports.StyledPrevButton.displayName = 'StyledNextButton';
+exports.StyledNextButton = (0, style_1.styled)('button');
+exports.StyledNextButton.displayName = 'StyledNextButton';
+exports.StyledMonth = (0, style_1.styled)('div', 'inline-block w-full');
+exports.StyledMonth.displayName = 'StyledMonth';
+exports.StyledWeek = (0, style_1.styled)('div', 'mb-0.5 justify-around flex w-full whitespace-no-wrap');
+exports.StyledWeek.displayName = 'StyledWeek';
+// @ts-ignore
+function generateDayStyles(defaultCode, defaultStyle) {
+    var _a;
+    var codeForSM = defaultCode.substr(0, 12) + '1' + defaultCode.substr(12 + 1);
+    var codeForEM = defaultCode.substr(0, 13) + '1' + defaultCode.substr(13 + 1);
+    return _a = {},
+        _a[defaultCode] = defaultStyle,
+        _a[codeForSM] = defaultStyle,
+        _a[codeForEM] = defaultStyle,
+        _a;
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function getDayStyles(code, theme) {
+    var undefinedDayStyle = {
+        // @ts-ignore
+        ':before': { content: null },
+        // @ts-ignore
+        ':after': { content: null },
+    };
+    var defaultDayStyle = undefinedDayStyle;
+    var disabledDateStyle = {
+        color: theme.spr.ui05,
+        // @ts-ignore
+        ':before': { content: null },
+        // @ts-ignore
+        ':after': { content: null },
+    };
+    var outsideMonthDateStyle = {
+        color: theme.spr.ui05,
+        ':before': {
+            borderTopStyle: 'none',
+            borderBottomStyle: 'none',
+            borderLeftStyle: 'none',
+            borderRightStyle: 'none',
+            backgroundColor: 'transparent',
+        },
+        ':after': {
+            borderTopLeftRadius: '0%',
+            borderTopRightRadius: '0%',
+            borderBottomLeftRadius: '0%',
+            borderBottomRightRadius: '0%',
+            borderTopColor: 'transparent',
+            borderBottomColor: 'transparent',
+            borderRightColor: 'transparent',
+            borderLeftColor: 'transparent',
+        },
+    };
+    var highlightedStyle = {
+        // @ts-ignore
+        ':before': { content: null },
+    };
+    var CODE_DISABLED_INDEX = 1;
+    if (code && code[CODE_DISABLED_INDEX] === '1') {
+        defaultDayStyle = disabledDateStyle;
+    }
+    // See the ./utils/day-state.js file for the description of all available states
+    // rdhsrSsDeDpSrHpHrRrLsMeMoM
+    // '000000000000000'
+    var dayStateStyle = Object.assign({}, 
+    // highlighted date
+    generateDayStyles('001000000000000', {
+        color: theme.spr.text01,
+    }), 
+    // selected date
+    generateDayStyles('000100000000000', {
+        color: theme.spr.text05,
+    }), 
+    // selected highlighted date
+    generateDayStyles('001100000000000', {
+        color: theme.spr.text05,
+    }), 
+    // disabled date
+    {
+        '010000000000000': {
+            color: theme.spr.ui05,
+            ':after': { content: null },
+        },
+    }, 
+    // disabled highlighted date
+    {
+        '011000000000000': {
+            color: theme.spr.ui05,
+            ':after': { content: null },
+        },
+    }, 
+    // date outside of the currently displayed month (when peekNextMonth is true)
+    generateDayStyles('000000000000001', outsideMonthDateStyle), 
+    // Range Datepicker
+    // range: highlighted date outside of a selected range
+    generateDayStyles('101000000000000', highlightedStyle), generateDayStyles('101010000000000', highlightedStyle), 
+    // range: selected date
+    generateDayStyles('100100000000000', {
+        color: theme.spr.text05,
+    }), 
+    // range: selected highlighted date
+    // when single date selected in a range
+    generateDayStyles('101100000000000', {
+        color: theme.spr.text05,
+        ':before': { content: null },
+    }), 
+    // range: selected start and end dates are the same
+    generateDayStyles('100111100000000', {
+        color: theme.spr.text05,
+        ':before': { content: null },
+    }), generateDayStyles('101111100000000', {
+        color: theme.spr.text05,
+        ':before': { content: null },
+    }), 
+    // range: selected start date
+    generateDayStyles('100111000000000', {
+        color: theme.spr.text05,
+    }), 
+    // range: selected end date
+    generateDayStyles('100110100000000', {
+        color: theme.spr.text05,
+        ':before': { left: null, right: '50%' },
+    }), 
+    // range: first selected date while a range is highlighted but no second date selected yet
+    // highlighted range on the right from the selected
+    generateDayStyles('100100001010000', {
+        color: theme.spr.text05,
+    }), 
+    // highlighted range on the left from the selected
+    generateDayStyles('100100001001000', {
+        color: theme.spr.text05,
+        ':before': { left: null, right: '50%' },
+    }), 
+    // range: second date in a range that is highlighted but not selected
+    generateDayStyles('101000001010000', {
+        ':before': { left: null, right: '50%' },
+    }), { '101000001001000': {} }, { '101000001001100': {} }, { '101000001001010': {} }, 
+    // range: pseudo-selected date
+    generateDayStyles('100010010000000', {
+        color: theme.spr.text01,
+        ':before': { left: '0', width: '100%' },
+        ':after': { content: null },
+    }), 
+    // range: pseudo-highlighted date (in a range where only one date is
+    // selected and second date is highlighted)
+    {
+        '101000001100000': {
+            color: theme.spr.text01,
+            ':before': {
+                left: '0',
+                width: '100%',
+            },
+            ':after': {
+                content: null,
+            },
+        },
+    }, generateDayStyles('100000001100000', {
+        color: theme.spr.text01,
+        ':before': {
+            left: '0',
+            width: '100%',
+        },
+        ':after': {
+            content: null,
+        },
+    }), 
+    // highlighted start date in a range
+    generateDayStyles('101111000000000', {
+        color: theme.spr.text05,
+    }), 
+    // highlighted end date in a range
+    generateDayStyles('101110100000000', {
+        color: theme.spr.text05,
+        ':before': { left: null, right: '50%' },
+    }), 
+    // range: pseudo-selected date
+    generateDayStyles('101010010000000', {
+        color: theme.spr.text01,
+        ':before': { left: '0', width: '100%' },
+    }), 
+    // Range is true Date outside current month (when peekNextMonth is true)
+    generateDayStyles('100000000000001', outsideMonthDateStyle), 
+    // peekNextMonth is true, date is outside month, start date is selected and range is highlighted is on right
+    generateDayStyles('100000001010001', outsideMonthDateStyle), 
+    // peekNextMonth is true, date is outside month, start date is selected and range is highlighted is on left
+    generateDayStyles('100000001001001', outsideMonthDateStyle), 
+    // peekNextMonth is true, date is outside month, range is selected
+    generateDayStyles('100010000000001', outsideMonthDateStyle));
+    return dayStateStyle[code] || defaultDayStyle;
+}
+exports.StyledDay = (0, style_1.styled)('div', 'spr-text-01 box-border relative text-center py-2 inline-block m-0 bg-transparent outline-none' + ' ', function (_a, props) {
+    var theme = _a.theme;
+    var $disabled = props.$disabled, $peekNextMonth = props.$peekNextMonth, $range = props.$range, $outsideMonth = props.$outsideMonth, $outsideMonthWithinRange = props.$outsideMonthWithinRange, $hasDateLabel = props.$hasDateLabel, $density = props.$density, $hasLockedBehavior = props.$hasLockedBehavior, $selectedInput = props.$selectedInput, $value = props.$value;
+    var code = (0, day_state_1.default)(props);
+    var _b = (0, tslib_1.__read)(Array.isArray($value) ? $value : [$value, null], 2), startDate = _b[0], endDate = _b[1];
+    var oppositeInputIsPopulated = $selectedInput === constants_1.INPUT_ROLE.startDate
+        ? endDate !== null && typeof endDate !== 'undefined'
+        : startDate !== null && typeof startDate !== 'undefined';
+    var shouldHighlightRange = $range && !($hasLockedBehavior && !oppositeInputIsPopulated);
+    return (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({ cursor: $disabled || (!$peekNextMonth && $outsideMonth) ? 'default' : 'pointer', transform: 'scale(1)' }, getDayStyles(code, theme)), { ':after': (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({ zIndex: -1, content: '""', boxSizing: 'border-box', display: 'inline-block', position: 'absolute', top: '2px', left: $density === constants_1.DENSITY.high ? '6px' : '4px', paddingTop: '6px', paddingBottom: '6px', borderLeftWidth: '2px', borderRightWidth: '2px', borderTopWidth: '2px', borderBottomWidth: '2px' }, (0, longHandHelpers_1.borderStyle)('solid')), (0, longHandHelpers_1.borderRadius)('100%')), (getDayStyles(code, theme)[':after'] || {})), ($outsideMonthWithinRange ? { content: null } : {})) }), (shouldHighlightRange
+        ? {
+            // :before pseudo element defines a grey background style that extends
+            // the selected/highlighted day's circle and spans through a range
+            ':before': (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({ zIndex: -1, content: '""', boxSizing: 'border-box', display: 'inline-block', backgroundColor: theme.spr.ui05, position: 'absolute', width: '50%', top: '2px', left: '50%', borderTopWidth: '2px', borderBottomWidth: '2px', borderLeftWidth: '0', borderRightWidth: '0' }, (0, longHandHelpers_1.borderStyle)('solid')), (0, longHandHelpers_1.borderColor)('transparent')), (getDayStyles(code, theme)[':before'] || {})), ($outsideMonthWithinRange
+                ? {
+                    backgroundColor: theme.spr.ui05,
+                    left: '0',
+                    width: '100%',
+                    content: '""',
+                }
+                : {})),
+        }
+        : // a hack to make flow happy, otherwise it complains about complexity
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            {}));
+});
+exports.StyledDay.displayName = 'StyledDay';
+exports.StyledDayLabel = (0, style_1.styled)('div');
+exports.StyledDayLabel.displayName = 'StyledDayLabel';
+exports.StyledWeekdayHeader = (0, style_1.styled)('div', 'px-1.5 py-2 m-0 bg-transparent inline-block text-center cursor-default relative box-border');
+exports.StyledWeekdayHeader.displayName = 'StyledWeekdayHeader';

package/baseui/datepicker/types.d.ts

@@ -0,0 +1,361 @@
+import type * as React from 'react';
+import type { Override } from '../helpers/overrides';
+import type { Size } from '../input';
+import type { INPUT_ROLE, ORIENTATION, RANGED_CALENDAR_BEHAVIOR, STATE_CHANGE_TYPE, DENSITY } from './constants';
+import type { DateIOAdapter } from './utils/types';
+declare type Locale = any;
+export declare type Density = keyof typeof DENSITY;
+export declare type DatepickerOverrides = {
+    Root?: Override;
+    /** Override for reused Select component. QuickSelect is **not a styled  element** but a react component that can be replaced */
+    QuickSelect?: Override;
+    QuickSelectContainer?: Override;
+    /** Override for reused Select component. QuickSelectFormControl is **not a styled  element** but a react component that can be replaced */
+    QuickSelectFormControl?: Override;
+    /** Override for reused TimePicker component. TimeSelect is **not a styled  element** but a react component that can be replaced */
+    TimeSelect?: Override;
+    TimeSelectContainer?: Override;
+    /** Override for reused Select component. TimeSelectFormControl is **not a styled  element** but a react component that can be replaced */
+    TimeSelectFormControl?: Override;
+    CalendarContainer?: Override;
+    CalendarHeader?: Override;
+    PrevButton?: Override;
+    PrevButtonIcon?: Override;
+    NextButton?: Override;
+    NextButtonIcon?: Override;
+    MonthContainer?: Override;
+    MonthHeader?: Override;
+    MonthYearSelectButton?: Override;
+    MonthYearSelectIconContainer?: Override;
+    MonthYearSelectPopover?: Override;
+    MonthYearSelectStatefulMenu?: Override;
+    WeekdayHeader?: Override;
+    Month?: Override;
+    Week?: Override;
+    Day?: Override;
+    DayLabel?: Override;
+    /** Override for reused Input component. Input is **not a styled  element** but a react component that can be replaced */
+    Input?: Override;
+    InputWrapper?: Override;
+    /** Override for reused Popover component. Popover is **not a styled  element** but a react component that can be replaced */
+    Popover?: Override;
+    StartDate?: Override;
+    EndDate?: Override;
+    InputLabel?: Override;
+    ButtonDock?: Override;
+    PrimaryButton?: Override;
+    SecondaryButton?: Override;
+};
+export declare type DayProps<T = Date> = {
+    disabled: boolean;
+    date: T;
+    dateLabel: ((day: T) => React.ReactNode) | undefined | null;
+    density: Density;
+    filterDate: ((day: T) => boolean) | undefined | null;
+    highlightedDate: T | undefined | null;
+    includeDates: Array<T> | undefined | null;
+    highlighted: boolean;
+    range: boolean;
+    hasLockedBehavior: boolean;
+    selectedInput: InputRole;
+    focusedCalendar: boolean;
+    locale: Locale | undefined | null;
+    maxDate: T | undefined | null;
+    adapter: DateIOAdapter<T>;
+    minDate: T | undefined | null;
+    month: number | undefined | null;
+    onBlur: (a: {
+        event: Event;
+        date: T;
+    }) => unknown;
+    onFocus: (a: {
+        event: Event;
+        date: T;
+    }) => unknown;
+    onSelect: (a: {
+        date: T | Array<T | undefined | null>;
+    }) => unknown;
+    onClick: (a: {
+        event: Event;
+        date: T;
+    }) => unknown;
+    onMouseOver: (a: {
+        event: Event;
+        date: T;
+    }) => unknown;
+    onMouseLeave: (a: {
+        event: Event;
+        date: T;
+    }) => unknown;
+    overrides?: DatepickerOverrides;
+    peekNextMonth: boolean;
+    value: T | undefined | null | Array<T | undefined | null>;
+};
+export declare type DayState = {
+    isHovered: boolean;
+    isFocusVisible: boolean;
+};
+export declare type WeekProps<T = Date> = {
+    date: T;
+    dateLabel: ((date: T) => React.ReactNode) | undefined | null;
+    density: Density;
+    excludeDates: Array<T> | undefined | null;
+    filterDate: ((day: T) => boolean) | undefined | null;
+    getTimeRangesForDate?: GetTimeRangesForDate<T>;
+    highlightedDate: T | undefined | null;
+    includeDates: Array<T> | undefined | null;
+    focusedCalendar: boolean;
+    range?: boolean;
+    locale: Locale | undefined | null;
+    maxDate: T | undefined | null;
+    minDate: T | undefined | null;
+    adapter: DateIOAdapter<T>;
+    month: number | undefined | null;
+    onDayBlur: (a: {
+        date: T;
+        event: Event;
+    }) => unknown;
+    onDayClick: (a: {
+        date: T;
+        event: Event;
+    }) => unknown;
+    onDayFocus: (a: {
+        date: T;
+        event: Event;
+    }) => unknown;
+    onDayMouseOver: (a: {
+        date: T;
+        event: Event;
+    }) => unknown;
+    onDayMouseLeave: (a: {
+        date: T;
+        event: Event;
+    }) => unknown;
+    onChange?: (a: {
+        readonly date: T | undefined | null | Array<T | undefined | null>;
+    }) => unknown;
+    overrides?: DatepickerOverrides;
+    peekNextMonth: boolean;
+    value: T | undefined | null | Array<T | undefined | null>;
+    hasLockedBehavior: boolean;
+    selectedInput?: InputRole;
+};
+export declare type MonthProps<T = Date> = {
+    fixedHeight?: boolean;
+} & WeekProps<T>;
+export declare type CalendarInternalState<T = Date> = {
+    highlightedDate: T;
+    focused: boolean;
+    date: T;
+    rootElement: HTMLElement | undefined | null;
+    time: Array<T | undefined | null>;
+};
+export declare type TimeRange = {
+    from: number;
+    upto: number;
+};
+export declare type GetTimeRangesForDate<T = Date> = (day: T) => Array<TimeRange>;
+export declare type CalendarProps<T = Date> = {
+    /** Defines if the calendar is set to be focused on an initial render. */
+    autoFocusCalendar?: boolean;
+    /** Determines the density of the calendar */
+    density?: Density;
+    /** A list of dates to disable. */
+    excludeDates?: Array<T> | null;
+    /** Display select for quickly choosing date ranges. `range` must be true as well. */
+    quickSelect?: boolean;
+    /** Array of custom options displayed in the quick select. Overrides default options if provided. */
+    quickSelectOptions?: Array<QuickSelectOption<T>>;
+    /** A filter function that is called to check the disabled state of a day. If `false` is returned the day is considered to be disabled. */
+    filterDate?: ((day: T) => boolean) | null;
+    /** A filter function that is called to check the disabled state of a day and to decide which options to show in time picker. If `false` or empty array is returned the day is considered to be disabled and timepicker will show empty list, returning true will enable the date and all the options will be visible in time picker, and returning array of TimeRange will only show options in picker within that interval and day will be enabled. */
+    getTimeRangesForDate?: GetTimeRangesForDate<T>;
+    /** A function that is called with the current date to render the label text under that day on the calendar. */
+    dateLabel?: ((day: T) => React.ReactNode) | null;
+    /** Indicates a highlighted date on hover and keyboard navigation */
+    highlightedDate?: T | null;
+    /** A list of selectable dates. */
+    includeDates?: Array<T> | null;
+    /** Defines if a range of dates can be selected. */
+    range?: boolean;
+    /** Determines whether startDate and endDate should be updated independently of eachother */
+    hasLockedBehavior?: boolean;
+    /** A locale object. See `date-fns` for more details https://github.com/date-fns/date-fns/tree/master/src/locale. */
+    locale?: Locale | null;
+    /** A max date that is selectable. */
+    maxDate?: T;
+    /** A min date that is selectable. */
+    minDate?: T;
+    adapter?: DateIOAdapter<T>;
+    /** A number of months rendered in the calendar. */
+    monthsShown?: number;
+    /** Day's `click` event handler. */
+    onDayClick?: (a: {
+        date: T;
+        event: Event;
+    }) => unknown;
+    /** Day's `focus` event handler. */
+    onDayFocus?: (a: {
+        date: T;
+        event: Event;
+    }) => unknown;
+    /** Day's `mouseover` event handler. */
+    onDayMouseOver?: (a: {
+        date: T;
+        event: Event;
+    }) => unknown;
+    /** Day's `mouseleave` event handler. */
+    onDayMouseLeave?: (a: {
+        date: T;
+        event: Event;
+    }) => unknown;
+    /** Event handler that is called when the current rendered month is changed. */
+    onMonthChange?: (a: {
+        date: T;
+    }) => unknown;
+    /** Event handler that is called when the current rendered month's year is changed. */
+    onYearChange?: (a: {
+        date: T;
+    }) => unknown;
+    /** Event handler that is called when a new date is selected. */
+    onChange?: (a: {
+        readonly date: T | undefined | null | Array<T | undefined | null>;
+    }) => unknown;
+    /** Event handler that is called when a selection is made using the quick select menu. */
+    onQuickSelectChange?: (option?: QuickSelectOption<T>) => unknown;
+    /** Sets the orientation of the calendar when multiple months are displayed */
+    orientation?: (typeof ORIENTATION)[keyof typeof ORIENTATION];
+    overrides?: DatepickerOverrides;
+    /** Defines if dates outside of the range of the current month are displayed. */
+    peekNextMonth?: boolean;
+    /** Determines if `TimePicker` component will be enabled for start time */
+    timeSelectStart?: boolean;
+    /** Determines if `TimePicker` component will be enabled for end time */
+    timeSelectEnd?: boolean;
+    /** Defines if tabbing inside the calendar is circled within it. */
+    trapTabbing?: boolean;
+    /** Currently selected date. */
+    value?: T | undefined | null | Array<T | undefined | null>;
+    fixedHeight?: boolean;
+    /** Determines whether user clicked startDate or endDate input to trigger calendar open */
+    selectedInput?: InputRole;
+    /** Primary button on the action dock */
+    primaryButton?: {
+        label: React.ReactNode;
+        onClick: () => unknown;
+    };
+    /** Secondary button on the action dock */
+    secondaryButton?: {
+        label: React.ReactNode;
+        onClick: () => unknown;
+    };
+};
+export declare type HeaderProps<T = Date> = CalendarProps<T> & {
+    date: T;
+    order: number;
+};
+export declare type QuickSelectOption<T> = {
+    id: string;
+    beginDate: T;
+    endDate?: T;
+};
+export declare type DatepickerProps<T = Date> = {
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string | null;
+    disabled?: boolean;
+    size?: Size;
+    /** Renders UI in 'error' state. */
+    error?: boolean;
+    positive?: boolean;
+    placeholder?: string;
+    required?: boolean;
+    clearable?: boolean;
+    displayValueAtRangeIndex?: number;
+    formatDisplayValue?: (date: T | undefined | null | Array<T | undefined | null>, formatString: string) => string;
+    formatString?: string;
+    /** Where to mount the popover */
+    mountNode?: HTMLElement;
+    /** When single picker, fn is always called. When range picker, fn is called when start and end date are selected. */
+    onChange?: (a: {
+        date: T | undefined | null | Array<T>;
+    }) => unknown;
+    /** Called when calendar is closed */
+    onClose?: () => unknown;
+    /** Called when calendar is opened */
+    onOpen?: () => unknown;
+    /** When single picker, fn is always called. When range picker, fn is called when either start or end date changes. */
+    onRangeChange?: (a: {
+        readonly date: T | undefined | null | Array<T | undefined | null>;
+    }) => unknown;
+    mask?: string | null;
+    /** Determines whether startDate and endDate should be updated independently of eachother */
+    rangedCalendarBehavior?: RangedCalendarBehavior;
+    /** Determines if startDate and endDate should be separated into two input fields. Ignored if `range` is not true. */
+    separateRangeInputs?: boolean;
+    startDateLabel?: string;
+    endDateLabel?: string;
+    value?: T | undefined | null | Array<T | undefined | null>;
+} & CalendarProps<T>;
+export declare type SharedStyleProps = {
+    $date: any;
+    $disabled: boolean | undefined | null;
+    $density: Density;
+    $endDate: boolean | undefined | null;
+    $endOfMonth: boolean | undefined | null;
+    $isHighlighted: boolean | undefined | null;
+    $isHovered: boolean | undefined | null;
+    $isFocusVisible: boolean | undefined | null;
+    $month: number | undefined | null;
+    $outsideMonth: boolean | undefined | null;
+    $outsideMonthWithinRange: boolean | undefined | null;
+    $peekNextMonth: boolean | undefined | null;
+    $pseudoHighlighted: boolean | undefined | null;
+    $pseudoSelected: boolean | undefined | null;
+    $selected: boolean | undefined | null;
+    $startDate: boolean | undefined | null;
+    $startOfMonth: boolean | undefined | null;
+    $range: boolean | undefined | null;
+    $hasRangeHighlighted: boolean | undefined | null;
+    $hasRangeOnRight: boolean | undefined | null;
+    $hasRangeSelected: boolean | undefined | null;
+    $hasLockedBehavior: boolean;
+    $selectedInput: InputRole;
+    $value: Date | Array<Date>;
+    $order: number | undefined | null;
+    $hasDateLabel: boolean | undefined | null;
+};
+export declare type StateChangeType = (typeof STATE_CHANGE_TYPE)[keyof typeof STATE_CHANGE_TYPE] | undefined | null;
+export declare type ContainerState<T = Date> = {
+    /** Selected `Date`. If `range` is set, `value` is an array of 2 values. */
+    value?: T | undefined | null | Array<T | undefined | null>;
+    highlightedDate?: T | null;
+};
+export declare type NavigationContainerState<T = Date> = {
+    highlightedDate?: T | null;
+    isActive?: boolean;
+    lastHighlightedDate?: T;
+};
+export declare type StateReducer<T = Date> = (stateType: StateChangeType, nextState: ContainerState<T>, currentState: ContainerState<T>) => ContainerState<T>;
+export declare type StatefulContainerProps<Props, T = Date> = {
+    children: (a: Props) => React.ReactNode;
+    /** Initial state of an uncontrolled datepicker component. */
+    initialState?: ContainerState<T>;
+    /** A state change handler. */
+    stateReducer?: StateReducer<T>;
+    /** When single picker, fn is called when date/time is selected. When range picker, fn is called when both start and end are selected. */
+    onChange?: (a: {
+        date: T | undefined | null | Array<T>;
+    }) => unknown;
+    /** When single picker, fn is called when date/time is selected. When range picker, fn is called when either start or end date changes. */
+    onRangeChange?: (a: {
+        readonly date: T | undefined | null | Array<T | undefined | null>;
+    }) => unknown;
+    adapter?: DateIOAdapter<T>;
+    /** Should the date value be stored as an array or single value. */
+    range?: boolean;
+};
+export declare type StatefulDatepickerProps<Props, T = Date> = Omit<StatefulContainerProps<Props, T>, 'children'>;
+export declare type InputRole = (typeof INPUT_ROLE)[keyof typeof INPUT_ROLE] | undefined | null;
+export declare type RangedCalendarBehavior = (typeof RANGED_CALENDAR_BEHAVIOR)[keyof typeof RANGED_CALENDAR_BEHAVIOR] | undefined | null;
+export {};

package/baseui/datepicker/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/baseui/datepicker/utils/calendar-header-helpers.d.ts

@@ -0,0 +1,12 @@
+export declare type Option = {
+    id: string;
+    label: string;
+    disabled?: boolean;
+};
+declare type GetMonthItemsArgs = {
+    filterMonthsList: number[] | null;
+    formatMonthLabel: (a: number) => string;
+};
+export declare const filterMonthItems: (monthItems: Option[], filterList: number[]) => Option[];
+export declare const getFilteredMonthItems: ({ filterMonthsList, formatMonthLabel, }: GetMonthItemsArgs) => Option[];
+export {};