@sprinklrjs/spaceweb 10.1.0 → 11.0.0

package/date-input/DateInput.js

@@ -58,7 +58,7 @@ var DateInput = function (_a) {
             _date = dateHelpers.parseString(dateString, formatString, dateFnsLocale);
         }
         var isValidDate = _date && dateHelpers.isValid(_date);
-        if (isValidDate) {
+        if (isValidDate && _date) {
             setError(false);
             setDate((0, utils_1.formatDate)({ date: _date, locale: dateFnsLocale, dateHelpers: dateHelpers, formatString: formatString }));
             onChange === null || onChange === void 0 ? void 0 : onChange(_date);
@@ -91,6 +91,6 @@ var DateInput = function (_a) {
             },
         }, overrides);
     }, [adapter, onCalendarDateChange, locale, overrides, value, weekStartsOn, minDate, maxDate, timeSelect]);
-    return ((0, jsx_runtime_1.jsx)(react_input_mask_1.default, (0, tslib_1.__assign)({ mask: getMask(), value: date, maskChar: maskChar, onChange: handleInputChange, disabled: restProps.disabled }, { children: function (props) { return (0, jsx_runtime_1.jsx)(input_1.Input, (0, tslib_1.__assign)({}, props, restProps, { intent: error ? 'error' : 'default', overrides: mergedOverrides }), void 0); } }), void 0));
+    return ((0, jsx_runtime_1.jsx)(react_input_mask_1.default, (0, tslib_1.__assign)({ mask: getMask(), value: date, maskChar: maskChar, onChange: handleInputChange, disabled: restProps.disabled, onBlur: restProps.onBlur }, { children: function (props) { return (0, jsx_runtime_1.jsx)(input_1.Input, (0, tslib_1.__assign)({}, restProps, props, { intent: error ? 'error' : 'default', overrides: mergedOverrides }), void 0); } }), void 0));
 };
 exports.DateInput = DateInput;

package/date-picker/Calendar.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { SharedStyleProps } from './types';
-declare const _default: import("react").ForwardRefExoticComponent<Omit<import("baseui/datepicker").CalendarProps, "overrides"> & {
+declare const _default: import("react").ForwardRefExoticComponent<Omit<import("baseui/datepicker").CalendarProps<Date>, "overrides"> & {
     formatString?: string | undefined;
     overrides?: import("./types").DatepickerOverrides<SharedStyleProps> | undefined;
     adapter?: any;

package/date-picker/Calendar.js

@@ -7,6 +7,7 @@ var datepicker_1 = require("baseui/datepicker");
 var date_fns_adapter_1 = (0, tslib_1.__importDefault)(require("baseui/datepicker/utils/date-fns-adapter"));
 var date_helpers_1 = (0, tslib_1.__importDefault)(require("baseui/datepicker/utils/date-helpers"));
 var constants_1 = require("baseui/datepicker/constants");
+var merge_1 = (0, tslib_1.__importDefault)(require("lodash/merge"));
 var chevron_down_1 = (0, tslib_1.__importDefault)(require("../icon/components/chevron-down"));
 var useConvertOverrides_1 = require("../helpers/baseui/useConvertOverrides");
 var popover_1 = require("../popover");
@@ -18,6 +19,7 @@ var withThemeOverride_1 = (0, tslib_1.__importDefault)(require("../helpers/baseu
 var styled_components_1 = require("./styled-components");
 var constants_2 = require("./constants");
 var utils_1 = require("./utils");
+var useIsMobileDevice_1 = require("../hooks/useIsMobileDevice");
 var CALENDAR_CUSTOM_THEME = { theme: { input: { borderRadius: '4px' } } };
 var MonthYearSelectMenu = function (props) {
     var _a = (0, tslib_1.__read)((0, react_1.useState)(props.initialState.highlightedIndex), 2), highlightedIndex = _a[0], setHighlightedIndex = _a[1];
@@ -55,10 +57,15 @@ var ArrowButton = function (_a) {
         ] }, nextButtonProps, { children: (0, jsx_runtime_1.jsx)(chevron_down_1.default, { size: 8, className: ['transform', direction === 'next' ? '-rotate-90' : 'rotate-90'] }, void 0) }), void 0));
 };
 var Calendar = function (_a) {
-    var overrides = _a.overrides, _b = _a.adapter, adapter = _b === void 0 ? date_fns_adapter_1.default : _b, _c = _a.formatString, formatString = _c === void 0 ? constants_2.DEFAULT_FORMAT_STRING : _c, weekStartsOn = _a.weekStartsOn, props = (0, tslib_1.__rest)(_a, ["overrides", "adapter", "formatString", "weekStartsOn"]);
+    var _b;
+    var overrides = _a.overrides, _c = _a.adapter, adapter = _c === void 0 ? date_fns_adapter_1.default : _c, _d = _a.formatString, formatString = _d === void 0 ? constants_2.DEFAULT_FORMAT_STRING : _d, weekStartsOn = _a.weekStartsOn, props = (0, tslib_1.__rest)(_a, ["overrides", "adapter", "formatString", "weekStartsOn"]);
+    var currentTheme = (0, theme_1.useTheme)();
+    var isMobileDevice = (0, useIsMobileDevice_1.useIsMobileDevice)();
+    var Provider = theme_1.themeContext.Provider;
     var dateHelpers = (0, react_1.useMemo)(function () { return new date_helpers_1.default(adapter); }, [adapter]);
     var todaySOD = adapter.startOfDay(new Date());
-    var _d = props.monthsShown, monthsShown = _d === void 0 ? 1 : _d, value = props.value, onChange = props.onChange, range = props.range, timeSelectStart = props.timeSelectStart, timeSelectEnd = props.timeSelectEnd;
+    var value = props.value, onChange = props.onChange, range = props.range, timeSelectStart = props.timeSelectStart, timeSelectEnd = props.timeSelectEnd;
+    var monthsShown = isMobileDevice ? 1 : (_b = props.monthsShown) !== null && _b !== void 0 ? _b : 1;
     var dateFnsLocale = (0, react_1.useMemo)(function () { return (0, utils_1.prepareLocale)(props.locale, { weekStartsOn: weekStartsOn }); }, [weekStartsOn, props.locale]);
     var setTime = (0, react_1.useCallback)(function (_a) {
         var date = _a.date, hours = _a.hours, minutes = _a.minutes, seconds = _a.seconds;
@@ -199,7 +206,8 @@ var Calendar = function (_a) {
         props.minDate,
         props.maxDate,
     ]);
-    return ((0, jsx_runtime_1.jsx)(theme_1.ThemeProvider, (0, tslib_1.__assign)({ theme: CALENDAR_CUSTOM_THEME }, { children: (0, jsx_runtime_1.jsx)(datepicker_1.Calendar, (0, tslib_1.__assign)({ orientation: "vertical" }, props, { onChange: handleCalendarDateChange, overrides: convertedOverrides, timeSelectEnd: false, locale: dateFnsLocale, 
+    var calendarTheme = (0, react_1.useMemo)(function () { return (0, merge_1.default)({}, currentTheme, CALENDAR_CUSTOM_THEME); }, [currentTheme]);
+    return ((0, jsx_runtime_1.jsx)(Provider, (0, tslib_1.__assign)({ value: calendarTheme }, { children: (0, jsx_runtime_1.jsx)(datepicker_1.Calendar, (0, tslib_1.__assign)({ orientation: "vertical" }, props, { onChange: handleCalendarDateChange, overrides: convertedOverrides, timeSelectEnd: false, locale: dateFnsLocale, monthsShown: monthsShown, 
             //@ts-ignore baseweb has type inconsistency in declaration file
             density: constants_1.DENSITY.high }), void 0) }), void 0));
 };

package/date-picker/DateInput.d.ts

@@ -3,11 +3,12 @@ import DateHelpers from 'baseui/datepicker/utils/date-helpers';
 export declare const isDateValid: (value: any) => boolean;
 declare type DateInputProps = {
     locale?: any;
-    dateHelpers: DateHelpers;
+    dateHelpers: DateHelpers<Date>;
     onChange: (date: Date) => void;
     date?: Date | null;
     minDate?: Date;
     maxDate?: Date;
+    disabled?: boolean;
 };
-export declare const DateInput: React.MemoExoticComponent<({ dateHelpers, date, onChange, maxDate, minDate }: DateInputProps) => JSX.Element>;
+export declare const DateInput: React.MemoExoticComponent<({ dateHelpers, date, onChange, maxDate, minDate, disabled }: DateInputProps) => JSX.Element>;
 export {};

package/date-picker/DateInput.js

@@ -98,9 +98,9 @@ var isDateValid = function (value) { return value > 0 && value <= 31; };
 exports.isDateValid = isDateValid;
 // eslint-disable-next-line max-statements
 exports.DateInput = React.memo(function (_a) {
-    var dateHelpers = _a.dateHelpers, date = _a.date, onChange = _a.onChange, maxDate = _a.maxDate, minDate = _a.minDate;
+    var dateHelpers = _a.dateHelpers, date = _a.date, onChange = _a.onChange, maxDate = _a.maxDate, minDate = _a.minDate, disabled = _a.disabled;
     var _b = (0, tslib_1.__read)(React.useState(function () { return (date ? dateHelpers.formatDate(date, 'dd') : ''); }), 2), day = _b[0], setDay = _b[1];
-    var _c = (0, tslib_1.__read)(React.useState(function () { return (date ? dateHelpers.formatDate(date, 'yyyy') : ''); }), 2), year = _c[0], setYear = _c[1];
+    var _c = (0, tslib_1.__read)(React.useState(function () { return (date ? dateHelpers.getYear(date) : ''); }), 2), year = _c[0], setYear = _c[1];
     var _d = (0, tslib_1.__read)(React.useState(false), 2), error = _d[0], setError = _d[1];
     var minAllowedDate = 1;
     var maxAllowedDate = (0, getDaysInMonth_1.default)(date || new Date());
@@ -114,7 +114,7 @@ exports.DateInput = React.memo(function (_a) {
             setError(true);
         }
         setDay(date ? dateHelpers.formatDate(date, 'dd') : '');
-        setYear(date ? dateHelpers.formatDate(date, 'yyyy') : '');
+        setYear(date ? dateHelpers.getYear(date) : '');
     }, [date, minDate, maxDate, dateHelpers]);
     var updateDate = function (nextDate) {
         if ((0, exports.isDateValid)(nextDate)) {
@@ -214,7 +214,7 @@ exports.DateInput = React.memo(function (_a) {
             'px-3 flex items-center border-1 border-solid rounded-4 border-box',
             function (_a) {
                 var theme = _a.theme, px2rem = _a.px2rem;
-                return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, (0, longHandHelpers_1.borderColor)(error ? theme.spr.supportError : theme.spr.ui03)), { height: px2rem(35) }));
+                return ((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, (0, longHandHelpers_1.borderColor)(error ? theme.spr.supportError : theme.spr.ui03)), { height: px2rem(35) }), (disabled ? { backgroundColor: theme.spr.ui02 } : { backgroundColor: theme.spr.ui01 })));
             },
-        ] }, { children: [(0, jsx_runtime_1.jsx)(react_input_mask_1.default, (0, tslib_1.__assign)({ onBlur: dateBlur, onKeyDown: dateKeyDown, mask: "99", value: day, onChange: dayChange, maskChar: "_" }, { children: function (props) { return ((0, jsx_runtime_1.jsx)(input_1.Input, (0, tslib_1.__assign)({}, props, { className: DATE_CLASSNAME, overrides: DATE_OVERRIDES, placeholder: "dd", size: "sm" }), void 0)); } }), void 0), (0, jsx_runtime_1.jsx)(react_input_mask_1.default, (0, tslib_1.__assign)({ value: month, onKeyDown: monthKeyDown, mask: "aaa", maskChar: "_" }, { children: function (props) { return ((0, jsx_runtime_1.jsx)(input_1.Input, (0, tslib_1.__assign)({}, props, { className: MONTH_CLASSNAME, overrides: MONTH_OVERRIDES, placeholder: "MM", size: "sm" }), void 0)); } }), void 0), (0, jsx_runtime_1.jsx)(react_input_mask_1.default, (0, tslib_1.__assign)({ onBlur: yearBlur, onKeyDown: yearKeyDown, mask: "9999", value: year, onChange: yearChange, maskChar: "_" }, { children: function (props) { return ((0, jsx_runtime_1.jsx)(input_1.Input, (0, tslib_1.__assign)({}, props, { className: YEAR_CLASSNAME, overrides: YEAR_OVERRIDES, placeholder: "yyyy", size: "sm" }), void 0)); } }), void 0)] }), void 0));
+        ] }, { children: [(0, jsx_runtime_1.jsx)(react_input_mask_1.default, (0, tslib_1.__assign)({ onBlur: dateBlur, onKeyDown: dateKeyDown, mask: "99", value: day, onChange: dayChange, maskChar: "_", disabled: disabled }, { children: function (props) { return ((0, jsx_runtime_1.jsx)(input_1.Input, (0, tslib_1.__assign)({}, props, { className: DATE_CLASSNAME, overrides: DATE_OVERRIDES, placeholder: "dd", size: "sm", disabled: disabled }), void 0)); } }), void 0), (0, jsx_runtime_1.jsx)(react_input_mask_1.default, (0, tslib_1.__assign)({ value: month, onKeyDown: monthKeyDown, mask: "aaa", maskChar: "_", disabled: disabled }, { children: function (props) { return ((0, jsx_runtime_1.jsx)(input_1.Input, (0, tslib_1.__assign)({}, props, { className: MONTH_CLASSNAME, overrides: MONTH_OVERRIDES, placeholder: "MM", size: "sm", disabled: disabled }), void 0)); } }), void 0), (0, jsx_runtime_1.jsx)(react_input_mask_1.default, (0, tslib_1.__assign)({ onBlur: yearBlur, onKeyDown: yearKeyDown, mask: "9999", value: year, onChange: yearChange, maskChar: "_", disabled: disabled }, { children: function (props) { return ((0, jsx_runtime_1.jsx)(input_1.Input, (0, tslib_1.__assign)({}, props, { className: YEAR_CLASSNAME, overrides: YEAR_OVERRIDES, placeholder: "yyyy", size: "sm", disabled: disabled }), void 0)); } }), void 0)] }), void 0));
 });

package/date-picker/DatePickerInput.js

@@ -12,7 +12,7 @@ var chevron_down_1 = (0, tslib_1.__importDefault)(require("../icon/components/ch
 var calendar_solid_1 = (0, tslib_1.__importDefault)(require("../icon/components/calendar-solid"));
 var ClearIconButton_1 = (0, tslib_1.__importDefault)(require("../helpers/ClearIconButton"));
 var overrides_1 = require("../overrides");
-var themeHelpers_1 = require("../helpers/themeHelpers");
+var styled_components_1 = require("../input/styled-components");
 var classNames_1 = (0, tslib_1.__importDefault)(require("../classNames"));
 var InputBeforeEnhancer = function (_a) {
     var disabled = _a.disabled, onClick = _a.onClick;
@@ -86,15 +86,9 @@ var DatePickerInput = function (_a) {
         }, overrides);
     }, [overrides, onFocus, isOpen, inputWidth, disabled, autoSizeInput]);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(input_1.Input, (0, tslib_1.__assign)({}, props, { value: value, onFocus: onFocus, disabled: disabled, overrides: INPUT_OVERRIDES }), void 0), (0, jsx_runtime_1.jsx)(box_1.Box, (0, tslib_1.__assign)({ ref: ref, className: [
-                    function (_a) {
-                        var theme = _a.theme;
-                        var inputSizeTheme = (0, themeHelpers_1.getComponentSizeTheme)(theme, 'input', props.size, 'lg');
-                        return {
-                            lineHeight: inputSizeTheme.lineHeight,
-                            paddingLeft: inputSizeTheme.paddingX,
-                            paddingRight: inputSizeTheme.paddingX,
-                            fontSize: inputSizeTheme.fontSize,
-                        };
+                    function (utils) {
+                        var inputStyles = (0, styled_components_1.getInputStyles)(utils, { $size: props.size, $disabled: disabled });
+                        return inputStyles;
                     },
                     {
                         position: 'absolute',

package/date-picker/DateTimeContainer.d.ts

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { CalendarProps as BaseCalendarProps } from 'baseui/datepicker';
+import { DateIOAdapter } from 'baseui/datepicker/utils/types';
 import { DatepickerOverrides } from './types';
 declare type Props = {
     range?: boolean;
-    adapter?: any;
+    adapter?: DateIOAdapter<Date>;
     timeSelectStart?: boolean;
     timeSelectEnd?: boolean;
     value?: Date | Date[] | null;
@@ -13,6 +14,7 @@ declare type Props = {
     locale?: any;
     minDate?: Date;
     maxDate?: Date;
+    disabled?: boolean;
 };
-export declare const DateTimeContainer: React.MemoExoticComponent<({ range, adapter, timeSelectStart, timeSelectEnd, value, monthsShown, onChange, overrides, locale: dateFnsLocale, minDate, maxDate, }: Props) => JSX.Element>;
+export declare const DateTimeContainer: React.MemoExoticComponent<({ range, adapter, timeSelectStart, timeSelectEnd, value, monthsShown, onChange, overrides, locale: dateFnsLocale, minDate, maxDate, disabled, }: Props) => JSX.Element>;
 export {};

package/date-picker/DateTimeContainer.js

@@ -13,20 +13,20 @@ var form_control_1 = require("../form-control");
 var overrides_1 = require("../overrides");
 var locale_1 = require("../locale");
 var DateAndTimeSelect = function (_a) {
-    var time = _a.time, onTimeChange = _a.onTimeChange, onDateChange = _a.onDateChange, dateInputLabel = _a.dateInputLabel, timePickerLabel = _a.timePickerLabel, overrides = _a.overrides, locale = _a.locale, minDate = _a.minDate, maxDate = _a.maxDate, adapter = _a.adapter;
+    var time = _a.time, onTimeChange = _a.onTimeChange, onDateChange = _a.onDateChange, dateInputLabel = _a.dateInputLabel, timePickerLabel = _a.timePickerLabel, overrides = _a.overrides, locale = _a.locale, minDate = _a.minDate, maxDate = _a.maxDate, adapter = _a.adapter, disabled = _a.disabled;
     var dateHelpers = React.useMemo(function () { return new date_helpers_1.default(adapter); }, [adapter]);
     var _b = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.TimePickerFormControl, form_control_1.FormControl), 2), TimePickerFormControl = _b[0], timePickerFormControlProps = _b[1];
     var _c = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.DateInputFormControl, form_control_1.FormControl), 2), DateInputFormControl = _c[0], dateInputFormControlProps = _c[1];
     return ((0, jsx_runtime_1.jsxs)(stack_1.Stack, (0, tslib_1.__assign)({ direction: "horizontal", gap: 2, className: "items-center" }, { children: [(0, jsx_runtime_1.jsx)(stack_1.StackItem, (0, tslib_1.__assign)({ className: ['flex-1', function (_a) {
                         var px2rem = _a.px2rem;
                         return ({ width: px2rem(120) });
-                    }] }, { children: (0, jsx_runtime_1.jsx)(DateInputFormControl, (0, tslib_1.__assign)({ className: "mb-0", label: dateInputLabel }, dateInputFormControlProps, { children: (0, jsx_runtime_1.jsx)(DateInput_1.DateInput, { dateHelpers: dateHelpers, date: time, onChange: onDateChange, minDate: minDate, maxDate: maxDate, locale: locale }, void 0) }), void 0) }), void 0), (0, jsx_runtime_1.jsx)(stack_1.StackItem, (0, tslib_1.__assign)({ className: ['flex-1', function (_a) {
+                    }] }, { children: (0, jsx_runtime_1.jsx)(DateInputFormControl, (0, tslib_1.__assign)({ className: "mb-0", label: dateInputLabel }, dateInputFormControlProps, { children: (0, jsx_runtime_1.jsx)(DateInput_1.DateInput, { disabled: disabled, dateHelpers: dateHelpers, date: time, onChange: onDateChange, minDate: minDate, maxDate: maxDate, locale: locale }, void 0) }), void 0) }), void 0), (0, jsx_runtime_1.jsx)(stack_1.StackItem, (0, tslib_1.__assign)({ className: ['flex-1', function (_a) {
                         var px2rem = _a.px2rem;
                         return ({ width: px2rem(120) });
-                    }] }, { children: (0, jsx_runtime_1.jsx)(TimePickerFormControl, (0, tslib_1.__assign)({ className: "mb-0", label: timePickerLabel }, timePickerFormControlProps, { children: (0, jsx_runtime_1.jsx)(TimeInput_1.TimeInput, { time: time, dateHelpers: dateHelpers, onChange: onTimeChange, overrides: overrides, minTime: minDate, maxTime: maxDate }, void 0) }), void 0) }), void 0)] }), void 0));
+                    }] }, { children: (0, jsx_runtime_1.jsx)(TimePickerFormControl, (0, tslib_1.__assign)({ className: "mb-0", label: timePickerLabel }, timePickerFormControlProps, { children: (0, jsx_runtime_1.jsx)(TimeInput_1.TimeInput, { disabled: disabled, time: time, dateHelpers: dateHelpers, onChange: onTimeChange, overrides: overrides, minTime: minDate, maxTime: maxDate, adapter: adapter }, void 0) }), void 0) }), void 0)] }), void 0));
 };
 exports.DateTimeContainer = React.memo(function (_a) {
-    var range = _a.range, _b = _a.adapter, adapter = _b === void 0 ? date_fns_adapter_1.default : _b, timeSelectStart = _a.timeSelectStart, timeSelectEnd = _a.timeSelectEnd, value = _a.value, monthsShown = _a.monthsShown, onChange = _a.onChange, overrides = _a.overrides, dateFnsLocale = _a.locale, minDate = _a.minDate, maxDate = _a.maxDate;
+    var range = _a.range, _b = _a.adapter, adapter = _b === void 0 ? date_fns_adapter_1.default : _b, timeSelectStart = _a.timeSelectStart, timeSelectEnd = _a.timeSelectEnd, value = _a.value, monthsShown = _a.monthsShown, onChange = _a.onChange, overrides = _a.overrides, dateFnsLocale = _a.locale, minDate = _a.minDate, maxDate = _a.maxDate, disabled = _a.disabled;
     var _c = (0, tslib_1.__read)([].concat(value), 2), startDate = _c[0], endDate = _c[1];
     var dateHelpers = React.useMemo(function () { return new date_helpers_1.default(adapter); }, [adapter]);
     var locale = (0, locale_1.useLocale)();
@@ -120,5 +120,5 @@ exports.DateTimeContainer = React.memo(function (_a) {
             onChange === null || onChange === void 0 ? void 0 : onChange({ date: date });
         }
     }, [dateHelpers, onChange, range, adapter, value]);
-    return ((0, jsx_runtime_1.jsxs)(stack_1.Stack, (0, tslib_1.__assign)({ gap: 4, className: "px-4 pb-4", direction: monthsShown === 1 ? 'vertical' : 'horizontal' }, { children: [timeSelectStart && ((0, jsx_runtime_1.jsx)(DateTimeSelectContainer, (0, tslib_1.__assign)({ className: "flex-1", "$timeSelect": "start" }, dateTimeSelectContainerProps, { children: (0, jsx_runtime_1.jsx)(DateAndTimeSelect, { time: startDate, onTimeChange: function (date) { return handleTimeChange(date, 0); }, onDateChange: function (date) { return handleDateInputChange(date, 0); }, dateInputLabel: locale.calendar.dateInputStartLabel, timePickerLabel: locale.calendar.timePickerStartLabel, adapter: adapter, locale: locale, maxDate: maxDate, minDate: minDate, overrides: overrides }, void 0) }), void 0)), range && timeSelectEnd && ((0, jsx_runtime_1.jsx)(DateTimeSelectContainer, (0, tslib_1.__assign)({ className: "flex-1", "$timeSelect": "end" }, dateTimeSelectContainerProps, { children: (0, jsx_runtime_1.jsx)(DateAndTimeSelect, { time: endDate, onTimeChange: function (date) { return handleTimeChange(date, 1); }, onDateChange: function (date) { return handleDateInputChange(date, 1); }, dateInputLabel: locale.calendar.dateInputEndLabel, timePickerLabel: locale.calendar.timePickerEndLabel, adapter: adapter, locale: locale, maxDate: maxDate, minDate: minDate, overrides: overrides }, void 0) }), void 0))] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)(stack_1.Stack, (0, tslib_1.__assign)({ gap: 4, className: "px-4 pb-4", direction: monthsShown === 1 ? 'vertical' : 'horizontal' }, { children: [timeSelectStart && ((0, jsx_runtime_1.jsx)(DateTimeSelectContainer, (0, tslib_1.__assign)({ className: "flex-1", "$timeSelect": "start" }, dateTimeSelectContainerProps, { children: (0, jsx_runtime_1.jsx)(DateAndTimeSelect, { time: startDate, onTimeChange: function (date) { return handleTimeChange(date, 0); }, onDateChange: function (date) { return handleDateInputChange(date, 0); }, dateInputLabel: locale.calendar.dateInputStartLabel, timePickerLabel: locale.calendar.timePickerStartLabel, adapter: adapter, locale: locale, maxDate: maxDate, minDate: minDate, overrides: overrides, disabled: disabled }, void 0) }), void 0)), range && timeSelectEnd && ((0, jsx_runtime_1.jsx)(DateTimeSelectContainer, (0, tslib_1.__assign)({ className: "flex-1", "$timeSelect": "end" }, dateTimeSelectContainerProps, { children: (0, jsx_runtime_1.jsx)(DateAndTimeSelect, { time: endDate, onTimeChange: function (date) { return handleTimeChange(date, 1); }, onDateChange: function (date) { return handleDateInputChange(date, 1); }, dateInputLabel: locale.calendar.dateInputEndLabel, timePickerLabel: locale.calendar.timePickerEndLabel, adapter: adapter, locale: locale, maxDate: maxDate, minDate: minDate, overrides: overrides, disabled: disabled }, void 0) }), void 0))] }), void 0));
 });

package/date-picker/StatelessDatePicker.d.ts

@@ -1,3 +1,3 @@
 import { ReactElement } from 'react';
 import { StatelessDatePickerProps } from './types';
-export declare const StatelessDatePicker: ({ onChange, onBlur, adapter, size, formatString, isOpen, onFocus, clearable, displayValueAtRangeIndex, variant, overrides, intent, value, formatDisplayValue, autoSizeInput, weekStartsOn, ...props }: StatelessDatePickerProps) => ReactElement;
+export declare const StatelessDatePicker: (_props: StatelessDatePickerProps) => ReactElement;

package/date-picker/StatelessDatePicker.js

@@ -14,6 +14,7 @@ var typography_1 = require("../typography");
 var DatePickerInput_1 = (0, tslib_1.__importDefault)(require("./DatePickerInput"));
 var locale_1 = require("../locale");
 var useUniqueId_1 = (0, tslib_1.__importDefault)(require("../hooks/useUniqueId"));
+var context_1 = require("../form-control/context");
 var overrides_1 = require("../overrides");
 var constants_1 = require("./constants");
 var utils_1 = require("./utils");
@@ -32,9 +33,9 @@ var accessibilityStyles = {
     clipPath: 'inset(100%)',
 };
 // eslint-disable-next-line max-statements
-var StatelessDatePicker = function (_a) {
-    var _b, _c;
-    var onChange = _a.onChange, onBlur = _a.onBlur, _d = _a.adapter, adapter = _d === void 0 ? date_fns_adapter_1.default : _d, _e = _a.size, size = _e === void 0 ? 'md' : _e, _f = _a.formatString, formatString = _f === void 0 ? constants_1.DEFAULT_FORMAT_STRING : _f, _g = _a.isOpen, isOpen = _g === void 0 ? false : _g, onFocus = _a.onFocus, clearable = _a.clearable, displayValueAtRangeIndex = _a.displayValueAtRangeIndex, _h = _a.variant, variant = _h === void 0 ? 'default' : _h, overrides = _a.overrides, intent = _a.intent, value = _a.value, formatDisplayValue = _a.formatDisplayValue, _j = _a.autoSizeInput, autoSizeInput = _j === void 0 ? false : _j, weekStartsOn = _a.weekStartsOn, props = (0, tslib_1.__rest)(_a, ["onChange", "onBlur", "adapter", "size", "formatString", "isOpen", "onFocus", "clearable", "displayValueAtRangeIndex", "variant", "overrides", "intent", "value", "formatDisplayValue", "autoSizeInput", "weekStartsOn"]);
+var StatelessDatePicker = function (_props) {
+    var _a, _b;
+    var _c = (0, context_1.useContextualFormProps)(_props), onChange = _c.onChange, onBlur = _c.onBlur, _d = _c.adapter, adapter = _d === void 0 ? date_fns_adapter_1.default : _d, _e = _c.size, size = _e === void 0 ? 'md' : _e, _f = _c.formatString, formatString = _f === void 0 ? constants_1.DEFAULT_FORMAT_STRING : _f, _g = _c.isOpen, isOpen = _g === void 0 ? false : _g, onFocus = _c.onFocus, clearable = _c.clearable, displayValueAtRangeIndex = _c.displayValueAtRangeIndex, _h = _c.variant, variant = _h === void 0 ? 'default' : _h, overrides = _c.overrides, intent = _c.intent, value = _c.value, formatDisplayValue = _c.formatDisplayValue, _j = _c.autoSizeInput, autoSizeInput = _j === void 0 ? false : _j, weekStartsOn = _c.weekStartsOn, props = (0, tslib_1.__rest)(_c, ["onChange", "onBlur", "adapter", "size", "formatString", "isOpen", "onFocus", "clearable", "displayValueAtRangeIndex", "variant", "overrides", "intent", "value", "formatDisplayValue", "autoSizeInput", "weekStartsOn"]);
     var locale = (0, locale_1.useLocale)();
     var dateHelpers = React.useMemo(function () { return new date_helpers_1.default(adapter); }, [adapter]);
     var dateFnsLocale = React.useMemo(function () { return (0, utils_1.prepareLocale)(props.locale, { weekStartsOn: weekStartsOn }); }, [weekStartsOn, props.locale]);
@@ -93,7 +94,7 @@ var StatelessDatePicker = function (_a) {
                 style: 'rounded-8',
             },
         }, overrides);
-    }, [overrides]);
+    }, [locale.datePicker.popoverAriaLabel, overrides]);
     var displayValue = React.useMemo(function () { return defaultFormatDisplayValue(value) || ''; }, [value, defaultFormatDisplayValue]);
     var handleDateChange = React.useCallback(function (data) {
         onChange === null || onChange === void 0 ? void 0 : onChange({ value: data.date });
@@ -133,8 +134,8 @@ var StatelessDatePicker = function (_a) {
     var _o = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Input, DatePickerInput_1.default), 2), InputComponent = _o[0], inputProps = _o[1];
     var _p = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Popover, popover_2.Popover), 2), PopoverComponent = _p[0], popoverProps = _p[1];
     var _q = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.InputWrapper, styled_components_1.StyledInputWrapper), 2), InputWrapper = _q[0], inputWrapperProps = _q[1];
-    var placeholder = (_b = props.placeholder) !== null && _b !== void 0 ? _b : 'MM/DD/YYYY';
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PopoverComponent, (0, tslib_1.__assign)({ focusLock: true, returnFocus: true, mountNode: props.mountNode, placement: popover_1.PLACEMENT.auto, isOpen: isOpen, onClickOutside: onClose, onEsc: onClose, showArrow: false, onClick: props.disabled ? noop_1.default : onFocus, content: (0, jsx_runtime_1.jsx)(DatePickerContent_1.DatePickerContent, (0, tslib_1.__assign)({}, props, { value: value, onChange: handleDateChange, overrides: mergedOverrides, autoFocusCalendar: autoFocusCalendar, onClose: onClose, formatString: formatString, adapter: adapter, locale: dateFnsLocale }), void 0) }, popoverProps, { children: (0, jsx_runtime_1.jsx)(InputWrapper, (0, tslib_1.__assign)({}, inputWrapperProps, { children: (0, jsx_runtime_1.jsx)(InputComponent, (0, tslib_1.__assign)({ "aria-disabled": props.disabled, "aria-label": (_c = props['aria-label']) !== null && _c !== void 0 ? _c : locale.timeRangePicker.ariaLabel, "aria-describedby": ariaDescribedBy, "aria-labelledby": props['aria-labelledby'], "aria-required": props.required || null, disabled: props.disabled, size: size, variant: variant, intent: error ? 'error' : intent, value: displayValue, 
+    var placeholder = (_a = props.placeholder) !== null && _a !== void 0 ? _a : 'MM/DD/YYYY';
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PopoverComponent, (0, tslib_1.__assign)({ focusLock: true, returnFocus: true, mountNode: props.mountNode, placement: popover_1.PLACEMENT.auto, isOpen: isOpen, onClickOutside: onClose, onEsc: onClose, showArrow: false, triggerType: "click", onClick: props.disabled ? noop_1.default : onFocus, content: (0, jsx_runtime_1.jsx)(DatePickerContent_1.DatePickerContent, (0, tslib_1.__assign)({}, props, { value: value, onChange: handleDateChange, overrides: mergedOverrides, autoFocusCalendar: autoFocusCalendar, onClose: onClose, formatString: formatString, adapter: adapter, locale: dateFnsLocale }), void 0) }, popoverProps, { children: (0, jsx_runtime_1.jsx)(InputWrapper, (0, tslib_1.__assign)({}, inputWrapperProps, { children: (0, jsx_runtime_1.jsx)(InputComponent, (0, tslib_1.__assign)({ "aria-disabled": props.disabled, "aria-label": (_b = props['aria-label']) !== null && _b !== void 0 ? _b : locale.timeRangePicker.ariaLabel, "aria-describedby": ariaDescribedBy, "aria-labelledby": props['aria-labelledby'], "aria-required": props.required || null, disabled: props.disabled, size: size, variant: variant, intent: error ? 'error' : intent, value: displayValue, 
                         // onFocus={onFocus}
                         onKeyDown: handleKeyDown, onChange: handleInputChange, placeholder: placeholder, required: props.required, clearable: clearable, isOpen: isOpen, autoSizeInput: autoSizeInput }, inputProps), void 0) }), void 0) }), void 0), (0, jsx_runtime_1.jsx)(typography_1.Typography, (0, tslib_1.__assign)({ id: ariaDescribedBy, style: accessibilityStyles }, { children: locale.timeRangePicker.screenReaderMessageInput }), void 0), (0, jsx_runtime_1.jsx)(typography_1.Typography, (0, tslib_1.__assign)({ "aria-live": "assertive", style: accessibilityStyles }, { children: dateAriaLabel }), void 0)] }, void 0));
 };

package/date-picker/TimeInput.d.ts

@@ -1,12 +1,15 @@
 /// <reference types="react" />
 import DateHelpers from 'baseui/datepicker/utils/date-helpers';
+import { DateIOAdapter } from 'baseui/datepicker/utils/types';
 declare type TimeInputProps = {
     time?: Date | null;
     overrides?: any;
     onChange: (date: Date) => void;
-    dateHelpers: DateHelpers;
+    dateHelpers: DateHelpers<Date>;
     minTime?: Date;
     maxTime?: Date;
+    disabled?: boolean;
+    adapter: DateIOAdapter<Date>;
 };
-export declare const TimeInput: ({ overrides, time, onChange, dateHelpers, minTime, maxTime, }: TimeInputProps) => JSX.Element;
+export declare const TimeInput: ({ overrides, time, onChange, dateHelpers, minTime, maxTime, disabled, adapter, }: TimeInputProps) => JSX.Element;
 export {};

package/date-picker/TimeInput.js

@@ -7,8 +7,10 @@ var react_1 = require("react");
 var time_picker_1 = require("../time-picker");
 var overrides_1 = require("../overrides");
 var utils_1 = require("./utils");
+var MS_IN_5_MINUTES = 60 * 1000 * 5;
+var roundUpTime = function (minTime) { return new Date(Math.ceil(minTime.getTime() / MS_IN_5_MINUTES) * MS_IN_5_MINUTES); };
 var TimeInput = function (_a) {
-    var overrides = _a.overrides, time = _a.time, onChange = _a.onChange, dateHelpers = _a.dateHelpers, minTime = _a.minTime, maxTime = _a.maxTime;
+    var overrides = _a.overrides, time = _a.time, onChange = _a.onChange, dateHelpers = _a.dateHelpers, minTime = _a.minTime, maxTime = _a.maxTime, disabled = _a.disabled, adapter = _a.adapter;
     var _b = (0, tslib_1.__read)((0, react_1.useState)(time), 2), value = _b[0], setValue = _b[1];
     var _c = (0, tslib_1.__read)((0, react_1.useState)(false), 2), error = _c[0], setError = _c[1];
     (0, react_1.useEffect)(function () {
@@ -68,6 +70,6 @@ var TimeInput = function (_a) {
         }, overrides);
     }, [error, value, overrides, time, minTime, maxTime, dateHelpers]);
     var _d = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.TimePicker, time_picker_1.TimePicker), 2), TimePicker = _d[0], timeSelectProps = _d[1];
-    return (0, jsx_runtime_1.jsx)(TimePicker, (0, tslib_1.__assign)({ size: "sm", value: value, onChange: handleChange, creatable: true, clearable: true }, timeSelectProps), void 0);
+    return ((0, jsx_runtime_1.jsx)(TimePicker, (0, tslib_1.__assign)({ adapter: adapter, size: "sm", value: value, onChange: handleChange, creatable: true, clearable: true, disabled: disabled, minTime: minTime && dateHelpers.isSameDay(value, minTime) ? roundUpTime(minTime) : undefined, maxTime: dateHelpers.isSameDay(value, maxTime) ? maxTime : undefined }, timeSelectProps), void 0));
 };
 exports.TimeInput = TimeInput;

package/date-picker/index.d.ts

@@ -7,4 +7,5 @@ export { DatePickerInput };
 export { StatelessDatePicker } from './StatelessDatePicker';
 export { useDatePickerState } from './useDatePickerState';
 export { formatDate } from './utils';
+export { DateTimeContainer as DateTimeRangeInputs } from './DateTimeContainer';
 export * from './types';

package/date-picker/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.formatDate = exports.useDatePickerState = exports.StatelessDatePicker = exports.DatePickerInput = exports.DatePicker = exports.StyledWeekdayHeader = exports.StyledWeek = exports.StyledSelectorContainer = exports.StyledRoot = exports.StyledPrevButton = exports.StyledNextButton = exports.StyledMonthYearSelectIconContainer = exports.StyledMonthYearSelectButton = exports.StyledMonthHeader = exports.StyledMonthContainer = exports.StyledMonth = exports.StyledInputWrapper = exports.StyledCalendarHeader = exports.StyledCalendarContainer = exports.Calendar = void 0;
+exports.DateTimeRangeInputs = exports.formatDate = exports.useDatePickerState = exports.StatelessDatePicker = exports.DatePickerInput = exports.DatePicker = exports.StyledWeekdayHeader = exports.StyledWeek = exports.StyledSelectorContainer = exports.StyledRoot = exports.StyledPrevButton = exports.StyledNextButton = exports.StyledMonthYearSelectIconContainer = exports.StyledMonthYearSelectButton = exports.StyledMonthHeader = exports.StyledMonthContainer = exports.StyledMonth = exports.StyledInputWrapper = exports.StyledCalendarHeader = exports.StyledCalendarContainer = exports.Calendar = void 0;
 var tslib_1 = require("tslib");
 var Calendar_1 = (0, tslib_1.__importDefault)(require("./Calendar"));
 exports.Calendar = Calendar_1.default;
@@ -29,4 +29,6 @@ var useDatePickerState_1 = require("./useDatePickerState");
 Object.defineProperty(exports, "useDatePickerState", { enumerable: true, get: function () { return useDatePickerState_1.useDatePickerState; } });
 var utils_1 = require("./utils");
 Object.defineProperty(exports, "formatDate", { enumerable: true, get: function () { return utils_1.formatDate; } });
+var DateTimeContainer_1 = require("./DateTimeContainer");
+Object.defineProperty(exports, "DateTimeRangeInputs", { enumerable: true, get: function () { return DateTimeContainer_1.DateTimeContainer; } });
 (0, tslib_1.__exportStar)(require("./types"), exports);

package/date-picker/stateful-container.d.ts

@@ -3,7 +3,7 @@ import { StatefulContainerProps } from './types';
 declare const StatefulContainer: {
     ({ adapter, onChange, value, startOpen, ...props }: StatefulContainerProps): ReactElement;
     defaultProps: {
-        adapter: any;
+        adapter: import("baseui/datepicker/utils/types").DateIOAdapter<Date>;
     };
 };
 export default StatefulContainer;

package/date-picker/styled-components.d.ts

@@ -2,7 +2,6 @@ import { SharedStyleProps } from './types';
 import { StyleFn, Styles } from '../types';
 export declare const StyledInputWrapper: import("../style/styled").StyledComponent;
 export declare const getDayStyles: (todaySOD: any) => Styles;
-export declare const StyledWeekdayHeader: import("../style/styled").StyledComponent;
 export declare const StyledFooter: import("../style/styled").StyledComponent;
 export declare const StyledFooterBeforeEnhancer: import("../style/styled").StyledComponent;
 export declare const getCalendarContainerStyles: StyleFn<SharedStyleProps>;

package/date-picker/styled-components.js

@@ -1,33 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getCalendarContainerStyles = exports.StyledFooterBeforeEnhancer = exports.StyledFooter = exports.StyledWeekdayHeader = exports.getDayStyles = exports.StyledInputWrapper = void 0;
+exports.getCalendarContainerStyles = exports.StyledFooterBeforeEnhancer = exports.StyledFooter = exports.getDayStyles = exports.StyledInputWrapper = void 0;
 var tslib_1 = require("tslib");
-var utils_1 = require("baseui/datepicker/utils");
 var day_state_1 = (0, tslib_1.__importDefault)(require("baseui/datepicker/utils/day-state"));
 var date_fns_adapter_1 = (0, tslib_1.__importDefault)(require("baseui/datepicker/utils/date-fns-adapter"));
 var style_1 = require("../style");
 exports.StyledInputWrapper = (0, style_1.styled)('div');
-var getWeekdayHeaderStyle = function (utils, props) {
-    var getStyle = utils.getStyle, px2rem = utils.px2rem, theme = utils.theme;
-    var _a = props.$date, $date = _a === void 0 ? [new Date()] : _a, alt = props.alt, range = props.range;
-    // no highlight required if range is true or no date is selected
-    var isHighlighted;
-    if (range || !$date[0]) {
-        isHighlighted = false;
-    }
-    else {
-        isHighlighted = (0, utils_1.getWeekdayInLocale)(Array.isArray($date) ? $date[0] : $date) === alt;
-    }
-    return getStyle('border-b-2 box-border cursor-default h-9 inline-block m-0 pb-2 pt-2 relative text-center w-9', {
-        marginBottom: '-1px',
-        borderBottomStyle: 'solid',
-        borderBottomColor: isHighlighted ? theme.spr.ui04 : 'transparent',
-        color: isHighlighted ? theme.spr.text04 : 'inherit',
-        lineHeight: px2rem(20),
-        paddingLeft: px2rem(6),
-        paddingRight: px2rem(6),
-    });
-};
 var getEdgeDayBeforeStyle = function (code, firstChild, peekNextMonth) {
     var firstChildStyle = firstChild ? { content: 'none' } : {};
     var lastChildStyle = firstChild ? {} : { content: 'none' };
@@ -123,7 +101,6 @@ var getDayStyles = function (todaySOD) { return [
     },
 ]; };
 exports.getDayStyles = getDayStyles;
-exports.StyledWeekdayHeader = (0, style_1.styled)('div', getWeekdayHeaderStyle);
 exports.StyledFooter = (0, style_1.styled)('div', 'flex px-4 py-3');
 exports.StyledFooterBeforeEnhancer = (0, style_1.styled)('div', 'flex-none');
 var getCalendarContainerStyles = function (_a) {

package/date-picker/types.d.ts

@@ -53,7 +53,7 @@ export declare type StatelessDatePickerProps = Omit<BaseDatepickerProps, 'timeSe
     variant?: InputVariant;
     value: Date | Date[] | undefined;
     onChange?: (data: {
-        value?: (Date | undefined)[] | Date | null;
+        value?: (Date | undefined | null)[] | Date | null;
     }) => any;
     size?: InputSize;
     overrides?: DatepickerOverrides;

package/date-picker/utils.d.ts

@@ -1,20 +1,21 @@
+import DateHelpers from 'baseui/datepicker/utils/date-helpers';
 import { Locale } from '../locale';
 interface FormatDateParams {
     date: Date | Date[] | undefined;
     formatString?: string;
     locale: any;
-    dateHelpers?: any;
+    dateHelpers?: DateHelpers<Date>;
 }
 export declare const normalizeDashes: (formatString: string) => string;
-export declare const formatDate: (params: FormatDateParams) => any;
-export declare const getAriaLabel: (value: Date | Date[] | undefined, formatDisplayValue: (date?: Date | Date[] | undefined) => string | undefined, locale: Locale) => string;
+export declare const formatDate: (params: FormatDateParams) => string;
+export declare const getAriaLabel: (value: Date | Date[] | undefined, formatDisplayValue: (date?: Date | Date[] | undefined) => string, locale: Locale) => string;
 export declare const prepareLocale: (locale?: globalThis.Locale, options?: {
     weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined;
 } | undefined) => any;
-export declare const isTimeInRange: (date: Date | Date[] | null | undefined, { minDate, maxDate, dateHelpers, }: {
-    minDate?: Date | undefined;
-    maxDate?: Date | undefined;
-    dateHelpers?: any;
+export declare const isTimeInRange: (date: Date | Array<Date | undefined | null> | null | undefined, { minDate, maxDate, dateHelpers, }: {
+    minDate?: Date | null | undefined;
+    maxDate?: Date | null | undefined;
+    dateHelpers?: DateHelpers<Date> | undefined;
 }) => boolean;
 export declare const isDayInRange: (date: Date | Date[] | null | undefined, { minDate, maxDate, dateHelpers, }: {
     minDate?: Date | undefined;

package/date-picker/utils.js

@@ -64,7 +64,10 @@ var isTimeInRange = function (date, _a) {
         return true;
     }
     if (Array.isArray(date)) {
-        return date.every(function (_date) { return (!minDate || !dateHelpers.isBefore(_date, minDate)) && (!maxDate || !dateHelpers.isAfter(_date, maxDate)); });
+        return date.every(function (_date) {
+            return (!minDate || !_date || !dateHelpers.isBefore(_date, minDate)) &&
+                (!maxDate || !_date || !dateHelpers.isAfter(_date, maxDate));
+        });
     }
     return (!minDate || !dateHelpers.isBefore(date, minDate)) && (!maxDate || !dateHelpers.isAfter(date, maxDate));
 };

package/esm/asyncSelect/asyncSelect.js

@@ -23,19 +23,19 @@ var EMPTY_ARRAY = [];
 var AsyncSelect = function (props) {
     var loadOptions = props.loadOptions, searchingText = props.searchingText, paginationBuffer = props.paginationBuffer, debounceInterval = props.debounceInterval, resolveSelectedOptions = props.resolveSelectedOptions, _a = props.minimumInput, minimumInput = _a === void 0 ? 0 : _a, _b = props.loadOnMount, loadOnMount = _b === void 0 ? false : _b, _c = props.loadOnFocus, loadOnFocus = _c === void 0 ? false : _c, _d = props.initialOptions, initialOptions = _d === void 0 ? EMPTY_ARRAY : _d, _e = props.listenAllInputChanges, listenAllInputChanges = _e === void 0 ? true : _e, 
     //selectProps
-    onInputChange = props.onInputChange, noResultsMsg = props.noResultsMsg, overrides = props.overrides, value = props.value, _f = props.controlRef, controlRef = _f === void 0 ? null : _f, propsCreateOption = props.createOption, restSelectProps = __rest(props, ["loadOptions", "searchingText", "paginationBuffer", "debounceInterval", "resolveSelectedOptions", "minimumInput", "loadOnMount", "loadOnFocus", "initialOptions", "listenAllInputChanges", "onInputChange", "noResultsMsg", "overrides", "value", "controlRef", "createOption"]);
-    var _g = restSelectProps.valueKey, valueKey = _g === void 0 ? 'id' : _g;
+    onInputChange = props.onInputChange, noResultsMsg = props.noResultsMsg, overrides = props.overrides, value = props.value, controlRef = props.controlRef, propsInputRef = props.inputRef, propsCreateOption = props.createOption, restSelectProps = __rest(props, ["loadOptions", "searchingText", "paginationBuffer", "debounceInterval", "resolveSelectedOptions", "minimumInput", "loadOnMount", "loadOnFocus", "initialOptions", "listenAllInputChanges", "onInputChange", "noResultsMsg", "overrides", "value", "controlRef", "inputRef", "createOption"]);
+    var _f = restSelectProps.valueKey, valueKey = _f === void 0 ? 'id' : _f;
     var locale = useLocale();
     var valueKeyRef = useLatest(valueKey);
     var loadOnMountRef = useLatest(loadOnMount);
-    var _h = __read(useState(loadOnMount), 2), isLoading = _h[0], setIsLoading = _h[1];
-    var _j = __read(useState(initialOptions), 2), options = _j[0], setOptions = _j[1];
-    var _k = __read(useState(_keyBy(initialOptions, valueKey)), 2), allOptionsMap = _k[0], setAllOptionsMap = _k[1];
-    var _l = __read(useState(null), 2), inputElement = _l[0], setInputElement = _l[1];
+    var _g = __read(useState(loadOnMount), 2), isLoading = _g[0], setIsLoading = _g[1];
+    var _h = __read(useState(initialOptions), 2), options = _h[0], setOptions = _h[1];
+    var _j = __read(useState(_keyBy(initialOptions, valueKey)), 2), allOptionsMap = _j[0], setAllOptionsMap = _j[1];
+    var _k = __read(useState(null), 2), inputElement = _k[0], setInputElement = _k[1];
     var inputRef = useLatest(inputElement);
-    var combinedRef = useCombinedRefs(setInputElement, controlRef);
-    var _m = __read(useState(null), 2), rootRef = _m[0], setRootRef = _m[1];
-    var _o = __read(useState(null), 2), popoverRef = _o[0], setPopoverRef = _o[1];
+    var combinedRef = useCombinedRefs(setInputElement, propsInputRef);
+    var _l = __read(useState(null), 2), rootRef = _l[0], setRootRef = _l[1];
+    var _m = __read(useState(null), 2), popoverRef = _m[0], setPopoverRef = _m[1];
     useResolveSelectedOptions({
         value: value,
         valueKey: valueKey,
@@ -46,7 +46,7 @@ var AsyncSelect = function (props) {
         setAllOptionsMap: setAllOptionsMap,
         resolveSelectedOptions: resolveSelectedOptions,
     });
-    var _p = useAsyncOptionHandlers({
+    var _o = useAsyncOptionHandlers({
         valueKey: valueKey,
         isLoading: isLoading,
         minimumInput: minimumInput,
@@ -57,7 +57,7 @@ var AsyncSelect = function (props) {
         setOptions: setOptions,
         loadOptions: loadOptions,
         createOption: propsCreateOption,
-    }), fetchOptions = _p.fetchOptions, onPaginate = _p.onPaginate, inputChangeHandlerToDebounce = _p.onInputChange, createOption = _p.createOption;
+    }), fetchOptions = _o.fetchOptions, onPaginate = _o.onPaginate, inputChangeHandlerToDebounce = _o.onInputChange, createOption = _o.createOption;
     var _onInputChange = useInputChangeHandler({
         inputElement: inputElement,
         listenAllInputChanges: listenAllInputChanges,
@@ -108,7 +108,7 @@ var AsyncSelect = function (props) {
                 Menu: { props: { onScroll: onPaginate } },
             })), overrides);
     }, [handleFocus, props.type, onPaginate, overrides]);
-    return (_jsx(Select, __assign({}, restSelectProps, { hideSelectAll: true, options: options, isLoading: isLoading, value: selectedOptions, controlRef: combinedRef, overrides: mergedOverrides, onInputChange: _onInputChange, noResultsMsg: getNoResultsMsg({
+    return (_jsx(Select, __assign({}, restSelectProps, { filterOptions: restSelectProps.filterOptions, hideSelectAll: true, options: options, isLoading: isLoading, value: selectedOptions, controlRef: controlRef, inputRef: combinedRef, overrides: mergedOverrides, onInputChange: _onInputChange, noResultsMsg: getNoResultsMsg({
             isLoading: isLoading,
             noResultsMsg: noResultsMsg,
             inputText: getInputValue(inputRef),

package/esm/asyncSelect/helpers.d.ts

@@ -9,7 +9,7 @@ export declare const getNoResultsMsg: ({ isLoading, minimumInput, inputText, noR
     minimumInput: number;
     inputText: string;
     noResultsMsg?: React.ReactNode;
-    searchingText: string;
+    searchingText: React.ReactNode;
     emptyInputMsg: string;
 }) => string | React.ReactNode | undefined;
 export declare const shouldPaginate: (element: HTMLElement, paginationBuffer?: number) => boolean;

package/esm/asyncSelect/hooks/useAsyncOptionHandlers.d.ts

@@ -2,7 +2,7 @@
  *  Created by Aneree on 15/01/21.
  */
 import { MutableRefObject } from 'react';
-import { Option, OptionsT } from '../../select';
+import { Option, Options } from '../../select';
 import { SetStateFunc, AllOptionsMap, AsyncSelectProps } from '../types';
 interface UseAsyncOptionHandlersArgs {
     valueKey: string;
@@ -23,6 +23,6 @@ declare const useAsyncOptionHandlers: ({ inputRef, valueKey, isLoading, setOptio
     onPaginate: (event: any) => void;
     onInputChange: () => void;
     fetchOptions: (pageNumber: number) => Promise<void>;
-    createOption: ((label: string) => Promise<OptionsT>) | undefined;
+    createOption: ((label: string) => Promise<Options>) | undefined;
 };
 export { useAsyncOptionHandlers };

package/esm/asyncSelect/types.d.ts

@@ -1,7 +1,7 @@
 /**
  *  Created by Aneree on 03/11/20.
  */
-import { Dispatch, MutableRefObject, RefCallback, SetStateAction } from 'react';
+import { Dispatch, ReactNode, SetStateAction } from 'react';
 import { SelectProps, Option, Value } from '../select/types';
 export declare type SetStateFunc<S> = Dispatch<SetStateAction<S>>;
 export declare type AllOptionsMap = Record<string | number, Option>;
@@ -10,20 +10,19 @@ export declare type AllOptionsMap = Record<string | number, Option>;
  *   AsyncSelect does not support select all option
  *   removed the support of these props in AsyncSelect
  */
-export declare type AsyncSelectProps = Omit<SelectProps, 'isLoading' | 'options' | 'hideSelectAll' | 'controlRef'> & {
+export declare type AsyncSelectProps = Omit<SelectProps, 'isLoading' | 'options' | 'hideSelectAll'> & {
     loadOptions: (input: string, page: number) => Promise<{
         options: Array<Option>;
         complete: boolean;
     }>;
     paginationBuffer?: number;
-    searchingText?: string;
+    searchingText?: ReactNode;
     minimumInput?: number;
     debounceInterval?: number;
     initialOptions?: Array<Option>;
     resolveSelectedOptions?: (unresolvedValueKeys: Array<string | number>) => Promise<Array<Option>>;
     loadOnFocus?: boolean;
     loadOnMount?: boolean;
-    controlRef?: MutableRefObject<HTMLInputElement> | RefCallback<HTMLInputElement> | null;
     listenAllInputChanges?: boolean;
 };
 export type { Value, Option };

package/esm/avatar/index.d.ts

@@ -2,4 +2,4 @@ export { Avatar } from './avatar';
 export { AvatarGroup } from './avatar-group';
 export { StyledAvatarGroup, StyledAvatar, StyledInitials, StyledRoot } from './styled-component';
 export { useAvatarColor } from './useAvatarColor';
-export type { Spacing, Shape, Size, AvatarGroupProps, AvatarSharedProps, AvatarProps, AvatarState, } from './types';
+export type { Spacing, Shape, Size, AvatarGroupProps, AvatarSharedProps, AvatarProps, } from './types';

package/esm/avatar/types.d.ts

@@ -47,4 +47,4 @@ export declare type AvatarProps = {
     overrides?: AvatarOverrides;
     allowPhoneInitials?: boolean;
 };
-export type { AvatarState } from 'baseui/avatar';
+export {};

package/esm/banner/banner-item.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+declare const _default: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<import("react").AllHTMLAttributes<HTMLElement>, "style" | "className"> & {
+    $as?: import("react").ElementType<any> | undefined;
+    className?: import("..").Styles;
+    style?: import("..").Styles;
+} & {
+    children?: import("react").ReactNode;
+    overrides?: {
+        Root?: import("../overrides").Override<Record<string, any>> | undefined;
+    } | undefined;
+} & import("react").RefAttributes<HTMLElement>>>;
+export default _default;