@consta/uikit 3.15.1 → 3.17.1

package/__internal__/src/components/DatePickerCanary/DatePickerTypeDateRange/DatePickerTypeDateRange.js

@@ -3,6 +3,7 @@ import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import addMonths from 'date-fns/addMonths';
 import startOfMonth from 'date-fns/startOfMonth';
 import { useClickOutside } from '../../../hooks/useClickOutside/useClickOutside';
+import { useFlag } from '../../../hooks/useFlag/useFlag';
 import { useForkRef } from '../../../hooks/useForkRef/useForkRef';
 import { DatePickerDropdown, } from '../DatePickerDropdown/DatePickerDropdown';
 import { DatePickerFieldTypeDateRange } from '../DatePickerFieldTypeDateRange/DatePickerFieldTypeDateRange';
@@ -20,18 +21,16 @@ export var DatePickerTypeDateRange = forwardRef(function (props, ref) {
     var startFocused = fieldFocused === 'start';
     var endFocused = fieldFocused === 'end';
     var hadleChange = function (_a) {
-        var _b, _c, _d, _e, _f, _g;
+        var _b, _c, _d, _e;
         var e = _a.e, value = _a.value;
         if (startFocused) {
             (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, { e: e, value: normalizeRangeValue([value, (_c = props === null || props === void 0 ? void 0 : props.value) === null || _c === void 0 ? void 0 : _c[1]]) });
-            (_d = endFieldInputRef.current) === null || _d === void 0 ? void 0 : _d.focus();
         }
         if (endFocused) {
-            (_e = props.onChange) === null || _e === void 0 ? void 0 : _e.call(props, { e: e, value: normalizeRangeValue([(_f = props === null || props === void 0 ? void 0 : props.value) === null || _f === void 0 ? void 0 : _f[0], value]) });
-            (_g = startFieldInputRef.current) === null || _g === void 0 ? void 0 : _g.focus();
+            (_d = props.onChange) === null || _d === void 0 ? void 0 : _d.call(props, { e: e, value: normalizeRangeValue([(_e = props === null || props === void 0 ? void 0 : props.value) === null || _e === void 0 ? void 0 : _e[0], value]) });
         }
     };
-    var _f = __read(useState(false), 2), calendarVisible = _f[0], setCalendarVisible = _f[1];
+    var _f = __read(useFlag(false), 2), calendarVisible = _f[0], setCalendarVisible = _f[1];
     var _g = __read(useCurrentVisibleDate(currentVisibleDateProp, onChangeCurrentVisibleDateProp), 2), currentVisibleDate = _g[0], setCurrentVisibleDate = _g[1];
     var startFieldOnBlurHandler = function (e) {
         onBlur && onBlur(e);
@@ -43,69 +42,67 @@ export var DatePickerTypeDateRange = forwardRef(function (props, ref) {
     };
     var startFieldOnFocusHandler = function (e) {
         setFieldFocused('start');
-        setCalendarVisible(true);
+        setCalendarVisible.on();
         onFocus && onFocus(e);
         startFieldOnFocus && startFieldOnFocus(e);
     };
     var endFieldOnFocusHandler = function (e) {
         setFieldFocused('end');
-        setCalendarVisible(true);
+        setCalendarVisible.on();
         onFocus && onFocus(e);
         endFieldOnFocus && endFieldOnFocus(e);
     };
     // эфект для того чтобы календарь переключался при вводе с клавиатуры
     useEffect(function () {
-        var _a, _b;
-        if (((_a = props.value) === null || _a === void 0 ? void 0 : _a[0]) &&
-            props.dateTimeView === 'classic' &&
-            currentVisibleDate &&
-            startFocused) {
+        var _a, _b, _c;
+        if (((_a = props.value) === null || _a === void 0 ? void 0 : _a[0]) && props.dateTimeView === 'classic' && startFocused) {
             var newVisibleDate = startOfMonth(props.value[0]);
-            if (newVisibleDate.getTime() !== currentVisibleDate.getTime()) {
+            if (newVisibleDate.getTime() !== (currentVisibleDate === null || currentVisibleDate === void 0 ? void 0 : currentVisibleDate.getTime())) {
                 setCurrentVisibleDate(newVisibleDate);
             }
             return;
         }
-        if (((_b = props.value) === null || _b === void 0 ? void 0 : _b[0]) &&
-            props.dateTimeView !== 'classic' &&
-            currentVisibleDate &&
-            startFocused) {
+        if (((_b = props.value) === null || _b === void 0 ? void 0 : _b[0]) && props.dateTimeView !== 'classic' && startFocused) {
             var newVisibleDate = startOfMonth(props.value[0]);
-            if (newVisibleDate.getTime() !== currentVisibleDate.getTime() &&
-                newVisibleDate.getTime() !== addMonths(currentVisibleDate, 1).getTime()) {
+            if (newVisibleDate.getTime() !== (currentVisibleDate === null || currentVisibleDate === void 0 ? void 0 : currentVisibleDate.getTime()) &&
+                newVisibleDate.getTime() !==
+                    (currentVisibleDate && addMonths(currentVisibleDate, 1).getTime())) {
                 setCurrentVisibleDate(newVisibleDate);
             }
+            return;
+        }
+        if (!((_c = props.value) === null || _c === void 0 ? void 0 : _c[0]) && startFocused) {
+            setCurrentVisibleDate(currentVisibleDateProp);
         }
-    }, [(_b = (_a = props.value) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.getTime(), calendarVisible]);
+    }, [(_b = (_a = props.value) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.getTime(), calendarVisible, startFocused]);
     useEffect(function () {
-        var _a, _b;
-        if (((_a = props.value) === null || _a === void 0 ? void 0 : _a[1]) &&
-            props.dateTimeView === 'classic' &&
-            currentVisibleDate &&
-            endFocused) {
+        var _a, _b, _c;
+        if (((_a = props.value) === null || _a === void 0 ? void 0 : _a[1]) && props.dateTimeView === 'classic' && endFocused) {
             var newVisibleDate = startOfMonth(props.value[1]);
-            if (newVisibleDate.getTime() !== currentVisibleDate.getTime()) {
+            if (newVisibleDate.getTime() !== (currentVisibleDate === null || currentVisibleDate === void 0 ? void 0 : currentVisibleDate.getTime())) {
                 setCurrentVisibleDate(newVisibleDate);
             }
             return;
         }
-        if (((_b = props.value) === null || _b === void 0 ? void 0 : _b[1]) &&
-            props.dateTimeView !== 'classic' &&
-            currentVisibleDate &&
-            endFocused) {
+        if (((_b = props.value) === null || _b === void 0 ? void 0 : _b[1]) && props.dateTimeView !== 'classic' && endFocused) {
             var newVisibleDate = startOfMonth(props.value[1]);
-            if (newVisibleDate.getTime() !== currentVisibleDate.getTime() &&
-                newVisibleDate.getTime() !== addMonths(currentVisibleDate, 1).getTime()) {
+            if (newVisibleDate.getTime() !== (currentVisibleDate === null || currentVisibleDate === void 0 ? void 0 : currentVisibleDate.getTime()) &&
+                newVisibleDate.getTime() !==
+                    (currentVisibleDate && addMonths(currentVisibleDate, 1).getTime())) {
                 setCurrentVisibleDate(addMonths(newVisibleDate, -1));
             }
+            return;
+        }
+        if (!((_c = props.value) === null || _c === void 0 ? void 0 : _c[1]) && endFocused) {
+            setCurrentVisibleDate(currentVisibleDateProp);
         }
-    }, [(_d = (_c = props.value) === null || _c === void 0 ? void 0 : _c[1]) === null || _d === void 0 ? void 0 : _d.getTime(), calendarVisible]);
+    }, [(_d = (_c = props.value) === null || _c === void 0 ? void 0 : _c[1]) === null || _d === void 0 ? void 0 : _d.getTime(), calendarVisible, endFocused]);
     useClickOutside({
         isActive: calendarVisible,
         ignoreClicksInsideRefs: [startFieldRef, endFieldRef, calendarRef],
         handler: function () {
             setFieldFocused(false);
-            setCalendarVisible(false);
+            setCalendarVisible.off();
         }
     });
     return (React.createElement(React.Fragment, null,

package/__internal__/src/components/DatePickerCanary/DatePickerTypeDateTime/DatePickerTypeDateTime.js

@@ -42,14 +42,13 @@ export var DatePickerTypeDateTime = forwardRef(function (props, ref) {
             }
         }
     }, [props.value]);
-    var handleClose = function () {
-        setCalendarVisible.off();
-        setCurrentVisibleDate(undefined);
-    };
     useClickOutside({
         isActive: calendarVisible,
         ignoreClicksInsideRefs: [fieldRef, calendarRef],
-        handler: handleClose
+        handler: function () {
+            setCalendarVisible.off();
+            setCurrentVisibleDate(props.value ? undefined : currentVisibleDateProp);
+        }
     });
     return (React.createElement(React.Fragment, null,
         React.createElement(DatePickerFieldTypeDateTime, __assign({}, otherProps, { ref: fieldRef, onFocus: onFocusHandler, multiplicityHours: multiplicityHours, multiplicitySeconds: multiplicitySeconds, multiplicityMinutes: multiplicityMinutes })),

package/__internal__/src/components/DatePickerCanary/DatePickerTypeDateTimeRange/DatePickerTypeDateTimeRange.d.ts

@@ -0,0 +1,2 @@
+import { DatePickerTypeComponent } from '../helpers';
+export declare const DatePickerTypeDateTimeRange: DatePickerTypeComponent<'date-time-range'>;

package/__internal__/src/components/DatePickerCanary/DatePickerTypeDateTimeRange/DatePickerTypeDateTimeRange.js

@@ -0,0 +1,92 @@
+import { __assign, __read, __rest } from "tslib";
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import startOfMonth from 'date-fns/startOfMonth';
+import { useClickOutside } from '../../../hooks/useClickOutside/useClickOutside';
+import { useFlag } from '../../../hooks/useFlag/useFlag';
+import { useForkRef } from '../../../hooks/useForkRef/useForkRef';
+import { DatePickerDropdown, } from '../DatePickerDropdown/DatePickerDropdown';
+import { DatePickerFieldTypeDateTimeRange } from '../DatePickerFieldTypeDateTimeRange/DatePickerFieldTypeDateTimeRange';
+import { normalizeRangeValue } from '../helpers';
+import { useCurrentVisibleDate } from '../useCurrentVisibleDate';
+export var DatePickerTypeDateTimeRange = forwardRef(function (props, ref) {
+    var _a, _b, _c, _d;
+    var events = props.events, dateTimeView = props.dateTimeView, locale = props.locale, dropdownForm = props.dropdownForm, startFieldRightSide = props.startFieldRightSide, startFieldLeftSide = props.startFieldLeftSide, startFieldOnBlur = props.startFieldOnBlur, startFieldOnFocus = props.startFieldOnFocus, endFieldRightSide = props.endFieldRightSide, endFieldLeftSide = props.endFieldLeftSide, endFieldOnBlur = props.endFieldOnBlur, endFieldOnFocus = props.endFieldOnFocus, onFocus = props.onFocus, onBlur = props.onBlur, leftSide = props.leftSide, rightSide = props.rightSide, endFieldInputRefProp = props.endFieldInputRef, startFieldInputRefProp = props.startFieldInputRef, style = props.style, currentVisibleDateProp = props.currentVisibleDate, onChangeCurrentVisibleDateProp = props.onChangeCurrentVisibleDate, renderAdditionalControls = props.renderAdditionalControls, fieldProps = __rest(props, ["events", "dateTimeView", "locale", "dropdownForm", "startFieldRightSide", "startFieldLeftSide", "startFieldOnBlur", "startFieldOnFocus", "endFieldRightSide", "endFieldLeftSide", "endFieldOnBlur", "endFieldOnFocus", "onFocus", "onBlur", "leftSide", "rightSide", "endFieldInputRef", "startFieldInputRef", "style", "currentVisibleDate", "onChangeCurrentVisibleDate", "renderAdditionalControls"]);
+    var startFieldRef = useRef(null);
+    var endFieldRef = useRef(null);
+    var startFieldInputRef = useRef(null);
+    var endFieldInputRef = useRef(null);
+    var calendarRef = useRef(null);
+    var _e = __read(useState(false), 2), fieldFocused = _e[0], setFieldFocused = _e[1];
+    var startFocused = fieldFocused === 'start';
+    var endFocused = fieldFocused === 'end';
+    var hadleChange = function (_a) {
+        var _b, _c, _d, _e;
+        var e = _a.e, value = _a.value;
+        if (startFocused) {
+            (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, { e: e, value: normalizeRangeValue([value, (_c = props === null || props === void 0 ? void 0 : props.value) === null || _c === void 0 ? void 0 : _c[1]]) });
+        }
+        if (endFocused) {
+            (_d = props.onChange) === null || _d === void 0 ? void 0 : _d.call(props, { e: e, value: normalizeRangeValue([(_e = props === null || props === void 0 ? void 0 : props.value) === null || _e === void 0 ? void 0 : _e[0], value]) });
+        }
+    };
+    var _f = __read(useFlag(false), 2), calendarVisible = _f[0], setCalendarVisible = _f[1];
+    var _g = __read(useCurrentVisibleDate(currentVisibleDateProp, onChangeCurrentVisibleDateProp), 2), currentVisibleDate = _g[0], setCurrentVisibleDate = _g[1];
+    var startFieldOnBlurHandler = function (e) {
+        onBlur && onBlur(e);
+        startFieldOnBlur && startFieldOnBlur(e);
+    };
+    var endFieldOnBlurHandler = function (e) {
+        onBlur && onBlur(e);
+        endFieldOnBlur && endFieldOnBlur(e);
+    };
+    var startFieldOnFocusHandler = function (e) {
+        setFieldFocused('start');
+        setCalendarVisible.on();
+        onFocus && onFocus(e);
+        startFieldOnFocus && startFieldOnFocus(e);
+    };
+    var endFieldOnFocusHandler = function (e) {
+        setFieldFocused('end');
+        setCalendarVisible.on();
+        onFocus && onFocus(e);
+        endFieldOnFocus && endFieldOnFocus(e);
+    };
+    // эфект для того чтобы календарь переключался при вводе с клавиатуры
+    useEffect(function () {
+        var _a, _b;
+        if (((_a = props.value) === null || _a === void 0 ? void 0 : _a[0]) && startFocused) {
+            var newVisibleDate = startOfMonth(props.value[0]);
+            if (newVisibleDate.getTime() !== (currentVisibleDate === null || currentVisibleDate === void 0 ? void 0 : currentVisibleDate.getTime())) {
+                setCurrentVisibleDate(newVisibleDate);
+            }
+            return;
+        }
+        if (!((_b = props.value) === null || _b === void 0 ? void 0 : _b[0]) && startFocused) {
+            setCurrentVisibleDate(currentVisibleDateProp);
+        }
+    }, [(_b = (_a = props.value) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.getTime(), calendarVisible, startFocused]);
+    useEffect(function () {
+        var _a, _b;
+        if (((_a = props.value) === null || _a === void 0 ? void 0 : _a[1]) && endFocused) {
+            var newVisibleDate = startOfMonth(props.value[1]);
+            if (newVisibleDate.getTime() !== (currentVisibleDate === null || currentVisibleDate === void 0 ? void 0 : currentVisibleDate.getTime())) {
+                setCurrentVisibleDate(newVisibleDate);
+            }
+            return;
+        }
+        if (!((_b = props.value) === null || _b === void 0 ? void 0 : _b[1]) && endFocused) {
+            setCurrentVisibleDate(currentVisibleDateProp);
+        }
+    }, [(_d = (_c = props.value) === null || _c === void 0 ? void 0 : _c[1]) === null || _d === void 0 ? void 0 : _d.getTime(), calendarVisible, endFocused]);
+    useClickOutside({
+        isActive: calendarVisible,
+        ignoreClicksInsideRefs: [startFieldRef, endFieldRef, calendarRef],
+        handler: function () {
+            setFieldFocused(false);
+            setCalendarVisible.off();
+        }
+    });
+    return (React.createElement(React.Fragment, null,
+        React.createElement(DatePickerFieldTypeDateTimeRange, __assign({}, fieldProps, { style: style, ref: ref, startFieldRef: startFieldRef, endFieldRef: endFieldRef, startFieldInputRef: useForkRef([startFieldInputRef, startFieldInputRefProp]), endFieldInputRef: useForkRef([endFieldInputRef, endFieldInputRefProp]), startFieldOnFocus: startFieldOnFocusHandler, endFieldOnFocus: endFieldOnFocusHandler, startFieldRightSide: startFieldRightSide, startFieldLeftSide: startFieldLeftSide || leftSide, endFieldRightSide: endFieldRightSide || rightSide, endFieldLeftSide: endFieldLeftSide, startFieldOnBlur: startFieldOnBlurHandler, endFieldOnBlur: endFieldOnBlurHandler, startFocused: startFocused, endFocused: endFocused })),
+        React.createElement(DatePickerDropdown, { type: "date-time", ref: calendarRef, anchorRef: startFieldRef, isOpen: calendarVisible, onChangeCurrentVisibleDate: setCurrentVisibleDate, currentVisibleDate: currentVisibleDate, value: props.value || undefined, timeFor: fieldFocused || undefined, view: dateTimeView, events: events, locale: locale, minDate: props.minDate, maxDate: props.maxDate, form: dropdownForm, onChange: hadleChange, renderAdditionalControls: renderAdditionalControls, zIndex: typeof (style === null || style === void 0 ? void 0 : style.zIndex) === 'number' ? style.zIndex + 1 : undefined })));
+});

package/__internal__/src/components/DatePickerCanary/helpers.d.ts

@@ -5,12 +5,13 @@ import { DateRange } from '../../utils/types/Date';
 import { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';
 import { DateTimeAdditionalControlRenderProp, DateTimePropView } from '../DateTimeCanary/helpers';
 import { TextFieldPropForm, TextFieldPropSize, TextFieldPropStatus, TextFieldPropView, TextFieldPropWidth } from '../TextField/TextField';
-export declare const datePickerPropType: readonly ["date", "date-range", "date-time"];
+export declare const datePickerPropType: readonly ["date", "date-range", "date-time", "date-time-range"];
 export declare type DatePickerPropType = typeof datePickerPropType[number];
 export declare const datePickerPropTypeDefault: "date";
 export declare type DatePickerPropDateTimeView = DateTimePropView;
+declare type Range = 'date-range' | 'date-time-range';
 export declare const datePickerErrorTypes: readonly ["outOfRange", "invalidInputAttempt", "startDateIsGreaterThanEndDate"];
-export declare type DatePickerPropValue<TYPE extends DatePickerPropType> = (TYPE extends 'date' | 'date-time' ? Date : DateRange) | null;
+export declare type DatePickerPropValue<TYPE extends DatePickerPropType> = (TYPE extends Range ? DateRange : Date) | null;
 export declare type DatePickerPropOnChange<TYPE extends DatePickerPropType> = (props: {
     value: DatePickerPropValue<TYPE>;
     e: React.MouseEvent<HTMLButtonElement, MouseEvent> | Event;
@@ -18,11 +19,11 @@ export declare type DatePickerPropOnChange<TYPE extends DatePickerPropType> = (p
 export declare const datePickerPropDropdownForm: readonly ["default", "brick", "round"];
 export declare type DatePickerPropDropdownForm = typeof datePickerPropDropdownForm[number];
 export declare const datePickerPropDropdownFormDefault: "default";
-declare type DatePickerPropCalendarWidth<TYPE> = TYPE extends 'date' | 'date-time' ? TextFieldPropWidth : never;
-declare type DatePickerPropCalendarInputRef<TYPE> = TYPE extends 'date' | 'date-time' ? React.Ref<HTMLInputElement> : never;
-declare type DatePickerPropCalendarStartInputRef<TYPE> = TYPE extends 'date-range' ? React.Ref<HTMLInputElement> : never;
-declare type DatePickerPropCalendarStartLeftSide<TYPE> = TYPE extends 'date-range' ? string | IconComponent : never;
-declare type DatePickerPropCalendarStartOnFocus<TYPE> = TYPE extends 'date-range' ? React.FocusEventHandler<HTMLElement> : never;
+declare type DatePickerPropCalendarWidth<TYPE> = TYPE extends Range ? TextFieldPropWidth : never;
+declare type DatePickerPropCalendarInputRef<TYPE> = TYPE extends Range ? never : React.Ref<HTMLInputElement>;
+declare type DatePickerPropCalendarStartInputRef<TYPE> = TYPE extends Range ? React.Ref<HTMLInputElement> : never;
+declare type DatePickerPropCalendarStartLeftSide<TYPE> = TYPE extends Range ? string | IconComponent : never;
+declare type DatePickerPropCalendarStartOnFocus<TYPE> = TYPE extends Range ? React.FocusEventHandler<HTMLElement> : never;
 export declare type DatePickerProps<TYPE extends DatePickerPropType = 'date'> = PropsWithHTMLAttributesAndRef<{
     type?: TYPE;
     value?: DatePickerPropValue<TYPE>;
@@ -110,4 +111,6 @@ export declare const datePickerPropPlaceholderTypeDateTime: string;
 export declare const normalizeRangeValue: (dateRange: DateRange) => DateRange;
 export declare const getMultiplicityTime: (format: string, multiplicityHours: number | undefined, multiplicityMinutes: number | undefined, multiplicitySeconds: number | undefined) => (number | undefined)[];
 export declare const getTimeEnum: (length: number, multiplicity: number | undefined, startOfUnits: (date: Date) => Date, addUnits: (date: Date, amount: number) => Date, getItemLabel: (date: Date) => string) => string[];
+export declare const getFormForStart: (form: TextFieldPropForm) => "default" | "round" | "brick" | "brickRound" | "roundBrick" | "brickDefault" | "defaultBrick" | "clearRound" | "roundClear" | "clearDefault" | "defaultClear" | "brickClear" | "clearBrick" | "clearClear";
+export declare const getFormForEnd: (form: TextFieldPropForm) => "default" | "round" | "brick" | "brickRound" | "roundBrick" | "brickDefault" | "defaultBrick" | "clearRound" | "roundClear" | "clearDefault" | "defaultClear" | "brickClear" | "clearBrick" | "clearClear";
 export {};

package/__internal__/src/components/DatePickerCanary/helpers.js

@@ -1,6 +1,7 @@
 import { startOfToday } from 'date-fns';
 import { range } from '../../utils/array';
-export var datePickerPropType = ['date', 'date-range', 'date-time'];
+import { getByMap } from '../../utils/getByMap';
+export var datePickerPropType = ['date', 'date-range', 'date-time', 'date-time-range'];
 export var datePickerPropTypeDefault = datePickerPropType[0];
 export var datePickerErrorTypes = [
     'outOfRange',
@@ -43,3 +44,37 @@ export var getTimeEnum = function (length, multiplicity, startOfUnits, addUnits,
         return getItemLabel(addUnits(startDate, number * multiplicity));
     });
 };
+var mapFormForStart = {
+    "default": 'defaultClear',
+    defaultClear: 'defaultClear',
+    defaultBrick: 'defaultClear',
+    brick: 'brickClear',
+    brickDefault: 'brickClear',
+    brickClear: 'brickClear',
+    brickRound: 'brickClear',
+    round: 'roundClear',
+    roundClear: 'roundClear',
+    roundBrick: 'roundClear',
+    clearRound: 'clearClear',
+    clearDefault: 'clearClear',
+    clearBrick: 'clearClear',
+    clearClear: 'clearClear'
+};
+var mapFormForEnd = {
+    "default": 'brickDefault',
+    defaultClear: 'brickClear',
+    defaultBrick: 'brick',
+    brick: 'brick',
+    brickDefault: 'brickDefault',
+    brickClear: 'brickClear',
+    brickRound: 'brickRound',
+    round: 'brickRound',
+    roundClear: 'brickClear',
+    roundBrick: 'brick',
+    clearRound: 'brickRound',
+    clearDefault: 'brickDefault',
+    clearBrick: 'brick',
+    clearClear: 'brickClear'
+};
+export var getFormForStart = function (form) { return getByMap(mapFormForStart, form); };
+export var getFormForEnd = function (form) { return getByMap(mapFormForEnd, form); };

package/__internal__/src/components/DateTimeCanary/DateTimeTypeDateTime/DateTimeTypeDateTime.js

@@ -10,12 +10,12 @@ import { moveTypes } from '../helpers';
 import { useOnChange } from './useOnChange';
 var cnDateTimeTypeDateTime = cn('DateTimeTypeDateTime');
 export var DateTimeTypeDateTime = forwardRef(function (props, ref) {
-    var className = props.className, onMoveProp = props.onMove, currentVisibleDate = props.currentVisibleDate, value = props.value, onChange = props.onChange, minDate = props.minDate, maxDate = props.maxDate, events = props.events, locale = props.locale, onChangeCurrentVisibleDate = props.onChangeCurrentVisibleDate, multiplicitySeconds = props.multiplicitySeconds, multiplicityMinutes = props.multiplicityMinutes, multiplicityHours = props.multiplicityHours, style = props.style, renderAdditionalControls = props.renderAdditionalControls, otherProps = __rest(props, ["className", "onMove", "currentVisibleDate", "value", "onChange", "minDate", "maxDate", "events", "locale", "onChangeCurrentVisibleDate", "multiplicitySeconds", "multiplicityMinutes", "multiplicityHours", "style", "renderAdditionalControls"]);
-    var _a = __read(useState(moveTypes[2]), 2), moveType = _a[0], setMoveType = _a[1];
-    var _b = __read(useState({
+    var className = props.className, onMoveProp = props.onMove, currentVisibleDate = props.currentVisibleDate, value = props.value, onChange = props.onChange, onChangeRange = props.onChangeRange, minDate = props.minDate, maxDate = props.maxDate, events = props.events, locale = props.locale, onChangeCurrentVisibleDate = props.onChangeCurrentVisibleDate, multiplicitySeconds = props.multiplicitySeconds, multiplicityMinutes = props.multiplicityMinutes, multiplicityHours = props.multiplicityHours, style = props.style, renderAdditionalControls = props.renderAdditionalControls, _a = props.timeFor, timeFor = _a === void 0 ? 'start' : _a, otherProps = __rest(props, ["className", "onMove", "currentVisibleDate", "value", "onChange", "onChangeRange", "minDate", "maxDate", "events", "locale", "onChangeCurrentVisibleDate", "multiplicitySeconds", "multiplicityMinutes", "multiplicityHours", "style", "renderAdditionalControls", "timeFor"]);
+    var _b = __read(useState(moveTypes[2]), 2), moveType = _b[0], setMoveType = _b[1];
+    var _c = __read(useState({
         '--root-padding-left': '0px'
-    }), 2), cssVars = _b[0], setCssVars = _b[1];
-    var _c = __read(useOnChange(onChange, value), 2), onDateChange = _c[0], onTimeChange = _c[1];
+    }), 2), cssVars = _c[0], setCssVars = _c[1];
+    var _d = __read(useOnChange(onChange, onChangeRange, value, timeFor), 4), onDateChange = _d[0], onDateChangeRange = _d[1], onTimeChange = _d[2], valueTime = _d[3];
     var rootRef = useRef(null);
     var onMove = function (type) {
         setMoveType(type);
@@ -31,7 +31,7 @@ export var DateTimeTypeDateTime = forwardRef(function (props, ref) {
     }, []);
     return (React.createElement(React.Fragment, null,
         React.createElement("div", __assign({}, otherProps, { className: cnDateTimeTypeDateTime({ withTime: withTime }, [className]), ref: useForkRef([rootRef, ref]), style: __assign(__assign({}, style), cssVars) }),
-            React.createElement(DateTimeTypeDate, { className: cnDateTimeTypeDateTime('Date', { withTime: withTime }), onMove: onMove, currentVisibleDate: currentVisibleDate, value: value, onChange: onDateChange, minDate: minDate, maxDate: maxDate, events: events, locale: locale, renderAdditionalControls: withTime ? undefined : renderAdditionalControls, onChangeCurrentVisibleDate: onChangeCurrentVisibleDate }),
-            withTime && (React.createElement(DateTimeTypeTime, { className: cnDateTimeTypeDateTime('Time'), value: value, onChange: onTimeChange, minDate: minDate, maxDate: maxDate, locale: locale, multiplicitySeconds: multiplicitySeconds, multiplicityMinutes: multiplicityMinutes, multiplicityHours: multiplicityHours }))),
+            React.createElement(DateTimeTypeDate, { className: cnDateTimeTypeDateTime('Date', { withTime: withTime }), onMove: onMove, currentVisibleDate: currentVisibleDate, value: value, onChange: onDateChange, onChangeRange: onDateChangeRange, minDate: minDate, maxDate: maxDate, events: events, locale: locale, renderAdditionalControls: withTime ? undefined : renderAdditionalControls, onChangeCurrentVisibleDate: onChangeCurrentVisibleDate }),
+            withTime && (React.createElement(DateTimeTypeTime, { className: cnDateTimeTypeDateTime('Time'), value: valueTime, onChange: onTimeChange, minDate: minDate, maxDate: maxDate, locale: locale, multiplicitySeconds: multiplicitySeconds, multiplicityMinutes: multiplicityMinutes, multiplicityHours: multiplicityHours }))),
         React.createElement(DateTimeAdditionalControls, { currentVisibleDate: currentVisibleDate, renderAdditionalControls: withTime ? renderAdditionalControls : undefined })));
 });

package/__internal__/src/components/DateTimeCanary/DateTimeTypeDateTime/useOnChange.d.ts

@@ -1,2 +1,3 @@
-import { DateTimePropOnChange } from '../helpers';
-export declare const useOnChange: (onChange: DateTimePropOnChange | undefined, value: Date | undefined) => DateTimePropOnChange[];
+import { DateRange } from '../../../utils/types/Date';
+import { DateTimePropOnChange, DateTimePropOnChangeRange } from '../helpers';
+export declare const useOnChange: (onChange: DateTimePropOnChange | undefined, onChangeRange: DateTimePropOnChangeRange<'date-time'> | undefined, value: DateRange | Date | undefined, timeFor: 'start' | 'end') => [DateTimePropOnChange, DateTimePropOnChangeRange<'date-time'>, DateTimePropOnChange, Date | undefined];

package/__internal__/src/components/DateTimeCanary/DateTimeTypeDateTime/useOnChange.js

@@ -8,9 +8,11 @@ var getTime = function (date) {
     }
     return [getHours(date), getMinutes(date), getSeconds(date)];
 };
-export var useOnChange = function (onChange, value) {
-    var _a = __read(useState(value), 2), time = _a[0], setTime = _a[1];
+export var useOnChange = function (onChange, onChangeRange, value, timeFor) {
+    var normalizeValue = Array.isArray(value) ? value[timeFor === 'start' ? 0 : 1] : value;
+    var _a = __read(useState(normalizeValue), 2), time = _a[0], setTime = _a[1];
     var onChangeRef = useMutableRef(onChange);
+    var onChangeRangeRef = useMutableRef(onChangeRange);
     var timeRef = useMutableRef(time);
     var onDateChange = useCallback(function (_a) {
         var _b;
@@ -18,11 +20,23 @@ export var useOnChange = function (onChange, value) {
         var _c = __read(getTime(timeRef.current), 3), hours = _c[0], minutes = _c[1], seconds = _c[2];
         (_b = onChangeRef.current) === null || _b === void 0 ? void 0 : _b.call(onChangeRef, { e: e, value: set(value, { hours: hours, minutes: minutes, seconds: seconds }) });
     }, []);
+    var onDateChangeRange = useCallback(function (_a) {
+        var _b;
+        var e = _a.e, value = _a.value;
+        var _c = __read(getTime(timeRef.current), 3), hours = _c[0], minutes = _c[1], seconds = _c[2];
+        (_b = onChangeRangeRef.current) === null || _b === void 0 ? void 0 : _b.call(onChangeRangeRef, {
+            e: e,
+            value: [
+                value[0] ? set(value[0], { hours: hours, minutes: minutes, seconds: seconds }) : undefined,
+                value[1] ? set(value[1], { hours: hours, minutes: minutes, seconds: seconds }) : undefined,
+            ]
+        });
+    }, []);
     var onTimeChange = useCallback(function (_a) {
         var _b;
         var e = _a.e, value = _a.value;
         (_b = onChangeRef.current) === null || _b === void 0 ? void 0 : _b.call(onChangeRef, { e: e, value: value });
     }, []);
-    useEffect(function () { return setTime(value); }, [value === null || value === void 0 ? void 0 : value.getTime()]);
-    return [onDateChange, onTimeChange];
+    useEffect(function () { return setTime(normalizeValue); }, [normalizeValue === null || normalizeValue === void 0 ? void 0 : normalizeValue.getTime()]);
+    return [onDateChange, onDateChangeRange, onTimeChange, normalizeValue];
 };

package/__internal__/src/components/DateTimeCanary/helpers/types.d.ts

@@ -7,7 +7,7 @@ export declare const dateTimePropViewDefault: "classic";
 export declare const dateTimePropType: readonly ["date", "month", "year", "time", "date-time"];
 export declare type DateTimePropType = typeof dateTimePropType[number];
 export declare const dateTimePropTypeDefault: "date";
-export declare type СapableRangeType = 'date' | 'month' | 'year';
+export declare type СapableRangeType = 'date' | 'month' | 'year' | 'date-time';
 export declare type DateTimePropValue<TYPE> = TYPE extends СapableRangeType ? Date | DateRange : Date;
 export declare type DateTimePropOnChange = (props: {
     value: Date;
@@ -27,6 +27,7 @@ declare type LocaleWords = {
 export declare type DateTimePropLocale = Locale & LocaleWords;
 export declare const moveTypes: readonly ["year", "month", "day", "time"];
 export declare type MoveType = typeof moveTypes[number];
+declare type DateTimePropTimeFor<TYPE> = TYPE extends 'date-time' ? 'start' | 'end' : never;
 export declare type DateTimeProps<TYPE extends DateTimePropType = 'date'> = PropsWithHTMLAttributesAndRef<{
     currentVisibleDate?: Date;
     type?: TYPE;
@@ -45,6 +46,7 @@ export declare type DateTimeProps<TYPE extends DateTimePropType = 'date'> = Prop
     multiplicityHours?: number;
     onMove?: (type: MoveType) => void;
     renderAdditionalControls?: DateTimeAdditionalControlRenderProp;
+    timeFor?: DateTimePropTimeFor<TYPE>;
 }, HTMLDivElement>;
 export declare type DateTimeAdditionalControlRenderProp = React.ReactNode | React.ReactNode[] | AdditionalControlRenderType;
 export declare type AdditionalControlRenderType = (props: DateTimeAdditionalControlRenderProps) => React.ReactNode | React.ReactNode[];

package/__internal__/src/components/EventInterceptor/eventInterceptorMap.d.ts

@@ -22,10 +22,7 @@ export declare const eventInterceptorMap: {
         children?: undefined;
     } & Pick<import("react").HTMLAttributes<HTMLLabelElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & import("react").RefAttributes<HTMLLabelElement>>(props: P, handler: import("./EventInterceptor").EventInterceptorHandler, ref: import("react").RefObject<HTMLLabelElement>) => P;
     readonly Select: <PROPS extends import("../Select/helpers").SelectProps<import("../Select/helpers").DefaultItem, import("../Select/helpers").DefaultGroup>>(props: PROPS, handler: import("./EventInterceptor").EventInterceptorHandler, ref: import("react").RefObject<HTMLDivElement | null>) => PROPS;
-    readonly SnackBar: <P_1 extends import("react").PropsWithChildren<import("../../utils/types/PropsWithHTMLAttributes").PropsWithHTMLAttributes<{
-        items: import("../SnackBar/helper").Item[];
-        children?: undefined;
-    }, HTMLDivElement>>>(props: P_1, handler: import("./EventInterceptor").EventInterceptorHandler) => P_1;
+    readonly SnackBar: <P_1 extends import("../SnackBar/types").SnackBarProps<import("../SnackBar/types").SnackBarItemDefault>>(props: P_1, handler: import("./EventInterceptor").EventInterceptorHandler) => P_1;
     readonly TextField: <P_2 extends {
         className?: string | undefined;
         value?: string | null | undefined;
@@ -60,7 +57,7 @@ export declare const eventInterceptorMap: {
         min?: string | number | undefined;
         readOnly?: boolean | undefined;
         required?: boolean | undefined;
-        step?: string | number | undefined;
+        step?: string | number | number[] | undefined;
         tabIndex?: number | undefined;
         inputContainerRef?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
         inputRef?: ((instance: HTMLInputElement | HTMLTextAreaElement | null) => void) | import("react").RefObject<HTMLInputElement | HTMLTextAreaElement> | null | undefined;

package/__internal__/src/components/EventInterceptor/propsHandlers/useSnackBarEventsHandler.d.ts

@@ -1,6 +1,3 @@
-import React from 'react';
+import { SnackBarItemDefault, SnackBarProps } from '../../SnackBar/types';
 import { EventInterceptorHandler } from '../EventInterceptor';
-export declare const useSnackBarEventsHandler: <P extends React.PropsWithChildren<import("../../../utils/types/PropsWithHTMLAttributes").PropsWithHTMLAttributes<{
-    items: import("../../SnackBar/helper").Item[];
-    children?: undefined;
-}, HTMLDivElement>>>(props: P, handler: EventInterceptorHandler) => P;
+export declare const useSnackBarEventsHandler: <P extends SnackBarProps<SnackBarItemDefault>>(props: P, handler: EventInterceptorHandler) => P;

package/__internal__/src/components/EventInterceptor/propsHandlers/useTextFieldEventsHandler.d.ts

@@ -70,7 +70,7 @@ export declare const useTextFieldEventsHandler: <P extends {
     min?: string | number | undefined;
     readOnly?: boolean | undefined;
     required?: boolean | undefined;
-    step?: string | number | undefined;
+    step?: string | number | number[] | undefined;
     tabIndex?: number | undefined;
     inputContainerRef?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
     inputRef?: ((instance: HTMLInputElement | HTMLTextAreaElement | null) => void) | React.RefObject<HTMLInputElement | HTMLTextAreaElement> | null | undefined;

package/__internal__/src/components/Popover/Popover.css

@@ -0,0 +1,8 @@
+.Popover {
+  position: absolute;
+  top: var(--popover-top);
+  left: var(--popover-left);
+  visibility: var(--popover-visibility);
+  width: var(--popover-width);
+  pointer-events: var(--popover-pointer-events);
+}

package/__internal__/src/components/Popover/Popover.d.ts

@@ -1,3 +1,4 @@
+import './Popover.css';
 import React from 'react';
 import { ClickOutsideHandler } from '../../hooks/useClickOutside/useClickOutside';
 import { PropsWithJsxAttributes } from '../../utils/types/PropsWithJsxAttributes';
@@ -9,6 +10,8 @@ export { usePopoverReposition };
  */
 export declare const directionsStartCenter: readonly ["downCenter", "upCenter", "downRight", "downLeft", "upRight", "upLeft", "leftUp", "leftCenter", "leftDown", "rightUp", "rightCenter", "rightDown"];
 export declare const directionsStartEdge: readonly ["downStartLeft", "upStartLeft", "downStartRight", "upStartRight", "leftStartUp", "leftStartDown", "rightStartUp", "rightStartDown"];
+export declare const popoverPropOffset: readonly ["3xs", "2xs", "xs", "s", "m", "l", "xl", "2xl", "3xl", "4xl", "5xl", "6xl"];
+export declare type PopoverPropOffset = typeof popoverPropOffset[number] | number;
 export declare const directions: ("downCenter" | "upCenter" | "downRight" | "downLeft" | "upRight" | "upLeft" | "leftUp" | "leftCenter" | "leftDown" | "rightUp" | "rightCenter" | "rightDown" | "downStartLeft" | "upStartLeft" | "downStartRight" | "upStartRight" | "leftStartUp" | "leftStartDown" | "rightStartUp" | "rightStartDown")[];
 export declare type Direction = typeof directions[number];
 export declare type Position = {
@@ -28,7 +31,7 @@ declare type ChildrenRenderProp = (direction: Direction) => React.ReactNode;
 export declare type Props = PropsWithJsxAttributes<{
     direction?: Direction;
     spareDirection?: Direction;
-    offset?: number;
+    offset?: PopoverPropOffset;
     arrowOffset?: number;
     possibleDirections?: readonly Direction[];
     isInteractive?: boolean;
@@ -39,7 +42,7 @@ export declare type Props = PropsWithJsxAttributes<{
 export declare const Popover: React.ForwardRefExoticComponent<Pick<Pick<({
     direction?: "downCenter" | "upCenter" | "downRight" | "downLeft" | "upRight" | "upLeft" | "leftUp" | "leftCenter" | "leftDown" | "rightUp" | "rightCenter" | "rightDown" | "downStartLeft" | "upStartLeft" | "downStartRight" | "upStartRight" | "leftStartUp" | "leftStartDown" | "rightStartUp" | "rightStartDown" | undefined;
     spareDirection?: "downCenter" | "upCenter" | "downRight" | "downLeft" | "upRight" | "upLeft" | "leftUp" | "leftCenter" | "leftDown" | "rightUp" | "rightCenter" | "rightDown" | "downStartLeft" | "upStartLeft" | "downStartRight" | "upStartRight" | "leftStartUp" | "leftStartDown" | "rightStartUp" | "rightStartDown" | undefined;
-    offset?: number | undefined;
+    offset?: number | "xs" | "s" | "m" | "l" | "2xs" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "3xs" | undefined;
     arrowOffset?: number | undefined;
     possibleDirections?: readonly ("downCenter" | "upCenter" | "downRight" | "downLeft" | "upRight" | "upLeft" | "leftUp" | "leftCenter" | "leftDown" | "rightUp" | "rightCenter" | "rightDown" | "downStartLeft" | "upStartLeft" | "downStartRight" | "upStartRight" | "leftStartUp" | "leftStartDown" | "rightStartUp" | "rightStartDown")[] | undefined;
     isInteractive?: boolean | undefined;
@@ -53,7 +56,7 @@ export declare const Popover: React.ForwardRefExoticComponent<Pick<Pick<({
 } & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "css" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "ref" | "key">) | ({
     direction?: "downCenter" | "upCenter" | "downRight" | "downLeft" | "upRight" | "upLeft" | "leftUp" | "leftCenter" | "leftDown" | "rightUp" | "rightCenter" | "rightDown" | "downStartLeft" | "upStartLeft" | "downStartRight" | "upStartRight" | "leftStartUp" | "leftStartDown" | "rightStartUp" | "rightStartDown" | undefined;
     spareDirection?: "downCenter" | "upCenter" | "downRight" | "downLeft" | "upRight" | "upLeft" | "leftUp" | "leftCenter" | "leftDown" | "rightUp" | "rightCenter" | "rightDown" | "downStartLeft" | "upStartLeft" | "downStartRight" | "upStartRight" | "leftStartUp" | "leftStartDown" | "rightStartUp" | "rightStartDown" | undefined;
-    offset?: number | undefined;
+    offset?: number | "xs" | "s" | "m" | "l" | "2xs" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "3xs" | undefined;
     arrowOffset?: number | undefined;
     possibleDirections?: readonly ("downCenter" | "upCenter" | "downRight" | "downLeft" | "upRight" | "upLeft" | "leftUp" | "leftCenter" | "leftDown" | "rightUp" | "rightCenter" | "rightDown" | "downStartLeft" | "upStartLeft" | "downStartRight" | "upStartRight" | "leftStartUp" | "leftStartDown" | "rightStartUp" | "rightStartDown")[] | undefined;
     isInteractive?: boolean | undefined;