@snack-uikit/calendar 0.9.0 → 0.11.0

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.11.0 (2024-10-31)
+
+
+### Features
+
+* **PDS-438:** add timepicker ([f4d2536](https://github.com/cloud-ru-tech/snack-uikit/commit/f4d253672750e1fcafa435fc1cace4ea22f79e13))
+
+
+### BREAKING CHANGES
+
+
+* **PDS-438:** add mode date-time to calendar, change type of navigationStartRef to RefObject ([4b4b7aa](https://github.com/cloud-ru-tech/snack-uikit/commit/4b4b7aadc6f1ab81b6b730a01c7dfed6d978ffcf))
+
+
+
+
+# 0.10.0 (2024-10-28)
+
+
+### Features
+
+* **FF-5782:** sass use/forward approach ([3e53869](https://github.com/cloud-ru-tech/snack-uikit/commit/3e53869ace864a7718e434b7f410c15dbd911cd5))
+
+
+
+
+
 # 0.9.0 (2024-10-28)
 
 

package/README.md

@@ -31,7 +31,7 @@ import { Calendar } from '@snack-uikit/calendar';
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| mode* | "date" \| "range" \| "month" | - | Режим работы календаря: <br> - `date` - режим выбора даты <br> - `range` - режим выбора периода Режим работы календаря: <br> - `month` - режим выбора месяца |
+| mode* | "date" \| "date-time" \| "range" \| "month" | - | Режим работы календаря: <br> - `date` - режим выбора даты <br> - `range` - режим выбора периода <br> - `month` - режим выбора месяца <br> - `date-time` - режим выбора даты и времени |
 | size | enum Size: `"s"`, `"m"`, `"l"` | m | Размер |
 | today | `number \| Date` | - | Дата сегодняшнего дня |
 | showHolidays | `boolean` | - | Раскрашивает субботу и воскресенье |
@@ -42,10 +42,25 @@ import { Calendar } from '@snack-uikit/calendar';
 | autofocus | `boolean` | - | Автофокус |
 | locale | `Intl.Locale` | Проставляется в соответствие с языком в настройках браузера | Локаль, в соответствие с которой выставляется язык названий и первый день недели |
 | onFocusLeave | `(direction: FocusDirection) => void` | - | Колбек потери фокуса. Вызывается со значением `next`, когда фокус покидает компонент, передвигаясь вперед, по клавише `tab`. Со значением `prev` - по клавише стрелки вверх или `shift + tab`. |
-| navigationStartRef | `RefCallback<HTMLButtonElement>` | - | Ref-callback на первый доступный интерактивный элемент |
-| value | `Date \| Range` | - | Выбранное значение.<br> - в режиме date тип `Date` <br> - в режиме range тип `Range` (`[Date, Date]`) Выбранное значение.<br> - в режиме month тип `Date` |
-| defaultValue | `Date \| Range` | - | Значение по-умолчанию для uncontrolled.<br> - в режиме date тип `Date` <br> - в режиме range тип `Range` (`[Date, Date]`) Значение по-умолчанию для uncontrolled.<br> - в режиме month тип `Date` |
-| onChangeValue | `((value: Date) => void) \| ((value: Range) => void) \| ((value: Date) => void)` | - | Колбек выбора значения.<br> - в режиме date принимает тип `Date` <br> - в режиме range принимает тип `Range` Колбек выбора значения.<br> - в режиме month принимает тип `Date` |
+| navigationStartRef | `RefObject<{ focus(): void; }>` | - | Ссылка на управление первым элементом навигации |
+| value | `Date \| Range` | - | Выбранное значение.<br> - в режиме date тип `Date` <br> - в режиме range тип `Range` (`[Date, Date]`) <br> - в режиме month тип `Date` <br> - в режиме date-time тип `Date` |
+| defaultValue | `Date \| Range` | - | Значение по-умолчанию для uncontrolled.<br> - в режиме date тип `Date` <br> - в режиме range тип `Range` (`[Date, Date]`) <br> - в режиме month тип `Date` <br> - в режиме date-time тип `Date` |
+| onChangeValue | `((value: Date) => void) \| ((value: Range) => void) \| ((value: Date) => void) \| ((value: Date) => void)` | - | Колбек выбора значения.<br> - в режиме date принимает тип `Date` <br> - в режиме range принимает тип `Range` <br> - в режиме month принимает тип `Date` <br> - в режиме date-time принимает тип `Date` |
+| showSeconds | `boolean` | - | Показывать ли секунды (только в режиме date-time) |
+## TimePicker
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| value | `TimeValue` | - | Выбранное значение. |
+| today | `number \| Date` | - | Дата сегодняшнего дня |
+| defaultValue | `TimeValue` | - | Значение по-умолчанию для uncontrolled. |
+| onChangeValue | `(value?: TimeValue) => void` | - | Колбек выбора значения |
+| showSeconds | `boolean` | true | Показывать ли секунды |
+| size | enum Size: `"s"`, `"m"`, `"l"` | m | Размер |
+| className | `string` | - | CSS-класс контейнера |
+| fitToContainer | `boolean` | true | Отключает предустановленный размер, заставляя компонент подстраиваться к размеру контейнра: (width: 100%, height: 100%). |
+| onFocusLeave | `(direction: FocusDirection) => void` | - | Колбек потери фокуса. Вызывается со значением `next`, когда фокус покидает компонент, передвигаясь вперед, по клавише `tab`. Со значением `prev` - по клавише стрелки вверх или `shift + tab`. |
+| navigationStartRef | `RefObject<{ focus(): void; }>` | - | Ссылка на управление первым элементом навигации |
 
 
 [//]: DOCUMENTATION_SECTION_END

package/dist/cjs/components/Calendar/Calendar.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, RefCallback } from 'react';
+import { CSSProperties, RefObject } from 'react';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { CALENDAR_MODE } from '../../constants';
 import { BuildCellPropsFunction, FocusDirection, Range, Size } from '../../types';
@@ -42,8 +42,10 @@ type CommonCalendarProps = {
     locale?: Intl.Locale;
     /** Колбек потери фокуса. Вызывается со значением `next`, когда фокус покидает компонент, передвигаясь вперед, по клавише `tab`. Со значением `prev` - по клавише стрелки вверх или `shift + tab`. */
     onFocusLeave?(direction: FocusDirection): void;
-    /** Ref-callback на первый доступный интерактивный элемент  */
-    navigationStartRef?: RefCallback<HTMLButtonElement>;
+    /** Ссылка на управление первым элементом навигации */
+    navigationStartRef?: RefObject<{
+        focus(): void;
+    }>;
 };
 type DateCalendarProps = CommonCalendarProps & {
     /** Режим работы календаря: <br> - `date` - режим выбора даты */
@@ -56,15 +58,27 @@ type DateCalendarProps = CommonCalendarProps & {
     onChangeValue?(value: Date): void;
 };
 type MonthCalendarProps = CommonCalendarProps & {
-    /** Режим работы календаря: <br> - `month` - режим выбора месяца */
+    /** <br> - `month` - режим выбора месяца */
     mode: typeof CALENDAR_MODE.Month;
-    /** Выбранное значение.<br> - в режиме month тип `Date` */
+    /** <br> - в режиме month тип `Date` */
     value?: Date;
-    /** Значение по-умолчанию для uncontrolled.<br> - в режиме month тип `Date` */
+    /** <br> - в режиме month тип `Date` */
     defaultValue?: Date;
-    /** Колбек выбора значения.<br> - в режиме month принимает тип `Date` */
+    /** <br> - в режиме month принимает тип `Date` */
     onChangeValue?(value: Date): void;
 };
+type DateTimeCalendarProps = CommonCalendarProps & {
+    /** <br> - `date-time` - режим выбора даты и времени */
+    mode: typeof CALENDAR_MODE.DateTime;
+    /** <br> - в режиме date-time тип `Date` */
+    value?: Date;
+    /** <br> - в режиме date-time тип `Date` */
+    defaultValue?: Date;
+    /** <br> - в режиме date-time принимает тип `Date` */
+    onChangeValue?(value: Date): void;
+    /** Показывать ли секунды (только в режиме date-time) */
+    showSeconds?: boolean;
+};
 type RangeCalendarProps = CommonCalendarProps & {
     /** <br> - `range` - режим выбора периода */
     mode: typeof CALENDAR_MODE.Range;
@@ -75,6 +89,6 @@ type RangeCalendarProps = CommonCalendarProps & {
     /** <br> - в режиме range принимает тип `Range` */
     onChangeValue?(value: Range): void;
 };
-export type CalendarProps = WithSupportProps<DateCalendarProps | RangeCalendarProps | MonthCalendarProps>;
+export type CalendarProps = WithSupportProps<DateCalendarProps | RangeCalendarProps | MonthCalendarProps | DateTimeCalendarProps>;
 export declare function Calendar(props: CalendarProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/components/Calendar/Calendar.js

@@ -26,7 +26,7 @@ function Calendar(props) {
     } = props,
     rest = __rest(props, ["className", "onChangeValue", "buildCellProps", "mode"]);
   const changeValueHandler = (0, react_1.useCallback)(value => {
-    if (mode === constants_1.CALENDAR_MODE.Date || mode === constants_1.CALENDAR_MODE.Month) {
+    if (mode === constants_1.CALENDAR_MODE.Date || mode === constants_1.CALENDAR_MODE.Month || mode === constants_1.CALENDAR_MODE.DateTime) {
       const [date] = value;
       onChangeValue === null || onChangeValue === void 0 ? void 0 : onChangeValue(date);
       return;
@@ -36,8 +36,8 @@ function Calendar(props) {
   return (0, jsx_runtime_1.jsx)(CalendarBase_1.CalendarBase, Object.assign({}, rest, {
     mode: mode,
     className: className,
-    value: (0, utils_1.getNormalizedValue)(props),
-    defaultValue: (0, utils_1.getNormalizedDefaultValue)(props),
+    value: (0, utils_1.getNormalizedValue)(props.value),
+    defaultValue: (0, utils_1.getNormalizedValue)(props.defaultValue),
     onChangeValue: changeValueHandler,
     buildCellProps: buildCellProps
   }));

package/dist/cjs/components/Calendar/utils.d.ts

@@ -1,4 +1,3 @@
 import { Range } from '../../types';
 import { CalendarProps } from './Calendar';
-export declare const getNormalizedValue: ({ value, mode }: CalendarProps) => Range | undefined;
-export declare const getNormalizedDefaultValue: ({ defaultValue, mode }: CalendarProps) => Range | undefined;
+export declare const getNormalizedValue: (value: CalendarProps["value"]) => Range | undefined;

package/dist/cjs/components/Calendar/utils.js

@@ -3,25 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getNormalizedDefaultValue = exports.getNormalizedValue = void 0;
-const constants_1 = require("../../constants");
-const getNormalizedValue = _ref => {
-  let {
-    value,
-    mode
-  } = _ref;
-  if (!value) return value;
-  if (mode === constants_1.CALENDAR_MODE.Date || mode === constants_1.CALENDAR_MODE.Month) return [value, value];
+exports.getNormalizedValue = void 0;
+function isRangeValue(value) {
+  return Array.isArray(value) && value.length === 2 && value[0] instanceof Date && value[1] instanceof Date;
+}
+function isDateValue(value) {
+  return value instanceof Date;
+}
+const getNormalizedValue = value => {
+  if (isRangeValue(value)) {
+    return value;
+  }
+  if (isDateValue(value)) {
+    return [value, value];
+  }
   return value;
 };
-exports.getNormalizedValue = getNormalizedValue;
-const getNormalizedDefaultValue = _ref2 => {
-  let {
-    defaultValue,
-    mode
-  } = _ref2;
-  if (!defaultValue) return defaultValue;
-  if (mode === constants_1.CALENDAR_MODE.Date || mode === constants_1.CALENDAR_MODE.Month) return [defaultValue, defaultValue];
-  return defaultValue;
-};
-exports.getNormalizedDefaultValue = getNormalizedDefaultValue;
+exports.getNormalizedValue = getNormalizedValue;

package/dist/cjs/components/TimePicker/TimePicker.d.ts

@@ -0,0 +1,34 @@
+import { RefObject } from 'react';
+import { WithSupportProps } from '@snack-uikit/utils';
+import { FocusDirection, Size, TimeValue } from '../../types';
+export type TimePickerProps = WithSupportProps<{
+    /** Выбранное значение.*/
+    value?: TimeValue;
+    /** Дата сегодняшнего дня */
+    today?: Date | number;
+    /** Значение по-умолчанию для uncontrolled. */
+    defaultValue?: TimeValue;
+    /** Колбек выбора значения */
+    onChangeValue?(value?: TimeValue): void;
+    /** Показывать ли секунды */
+    showSeconds?: boolean;
+    /**
+     * Размер
+     * @default m
+     */
+    size?: Size;
+    /** CSS-класс контейнера */
+    className?: string;
+    /**
+     * Отключает предустановленный размер, заставляя компонент подстраиваться к размеру контейнра: (width: 100%, height: 100%).
+     * @default true
+     */
+    fitToContainer?: boolean;
+    /** Колбек потери фокуса. Вызывается со значением `next`, когда фокус покидает компонент, передвигаясь вперед, по клавише `tab`. Со значением `prev` - по клавише стрелки вверх или `shift + tab`. */
+    onFocusLeave?(direction: FocusDirection): void;
+    /** Ссылка на управление первым элементом навигации */
+    navigationStartRef?: RefObject<{
+        focus(): void;
+    }>;
+}>;
+export declare function TimePicker({ className, size, fitToContainer, value: valueProp, defaultValue, onChangeValue, onFocusLeave, 'data-test-id': testId, navigationStartRef, showSeconds, today: todayProp, }: TimePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/TimePicker/TimePicker.js

@@ -0,0 +1,149 @@
+"use strict";
+
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TimePicker = TimePicker;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const uncontrollable_1 = require("uncontrollable");
+const locale_1 = require("@snack-uikit/locale");
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("../../constants");
+const CalendarContext_1 = require("../../helperComponents/CalendarContext");
+const Footer_1 = require("../../helperComponents/Footer");
+const TimePickerBase_1 = require("../../helperComponents/TimePickerBase");
+const hooks_1 = require("../../hooks");
+const utils_2 = require("../../utils");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const stubDate = new Date();
+const stubFunc = () => {};
+function TimePicker(_ref) {
+  let {
+    className,
+    size = constants_1.SIZE.M,
+    fitToContainer = true,
+    value: valueProp,
+    defaultValue,
+    onChangeValue,
+    onFocusLeave,
+    'data-test-id': testId,
+    navigationStartRef,
+    showSeconds = true,
+    today: todayProp
+  } = _ref;
+  const [value, setValueState] = (0, uncontrollable_1.useUncontrolledProp)(valueProp, defaultValue, onChangeValue);
+  const setValueEventHandler = (0, utils_1.useEventHandler)(setValueState);
+  const [internalValue, setInternalValue] = (0, react_1.useState)();
+  const [focus, setFocus] = (0, react_1.useState)(undefined);
+  const today = typeof todayProp === 'number' ? new Date(todayProp) : todayProp;
+  (0, react_1.useEffect)(() => {
+    var _a, _b, _c;
+    if (!(internalValue === null || internalValue === void 0 ? void 0 : internalValue[0])) {
+      return;
+    }
+    const hours = (_a = internalValue[0].getHours()) !== null && _a !== void 0 ? _a : 0;
+    const minutes = (_b = internalValue[0].getMinutes()) !== null && _b !== void 0 ? _b : 0;
+    const seconds = (_c = internalValue[0].getSeconds()) !== null && _c !== void 0 ? _c : 0;
+    setValueEventHandler({
+      hours,
+      minutes,
+      seconds
+    });
+  }, [internalValue, setValueEventHandler]);
+  const setValue = (0, react_1.useCallback)(dates => {
+    const newDate = dates[0];
+    setInternalValue([newDate, newDate]);
+  }, []);
+  const {
+    dateAndTime,
+    onTimeChange,
+    onDateChange,
+    onDateAndTimeChange,
+    isDateFilled,
+    isTimeFilled,
+    isDateAndTimeFilled
+  } = (0, hooks_1.useDateAndTime)({
+    showSeconds,
+    value
+  });
+  const applyButtonRef = (0, react_1.useRef)(null);
+  const currentButtonRef = (0, react_1.useRef)(null);
+  const hoursKeyboardNavigationRef = (0, react_1.useRef)({
+    focusItem: () => {}
+  });
+  const minutesKeyboardNavigationRef = (0, react_1.useRef)({
+    focusItem: () => {}
+  });
+  const secondsKeyboardNavigationRef = (0, react_1.useRef)({
+    focusItem: () => {}
+  });
+  const getTestId = (0, react_1.useMemo)(() => (0, utils_2.getTestIdBuilder)(testId), [testId]);
+  const {
+    lang: ctxLang
+  } = (0, locale_1.useLocale)();
+  const locale = (0, react_1.useMemo)(() => (0, utils_2.getLocale)({
+    localeProp: constants_1.DEFAULT_LOCALE,
+    ctxLang
+  }), [ctxLang]);
+  return (0, jsx_runtime_1.jsx)("div", {
+    className: (0, classnames_1.default)(styles_module_scss_1.default.timePickerWrapper, className),
+    "data-fit-to-container": fitToContainer || undefined,
+    "data-test-id": testId,
+    children: (0, jsx_runtime_1.jsxs)(CalendarContext_1.CalendarContext.Provider, {
+      value: {
+        mode: 'time',
+        locale,
+        size,
+        value: internalValue,
+        fitToContainer,
+        focus,
+        setValue,
+        setFocus,
+        getTestId,
+        onFocusLeave,
+        navigationStartRef,
+        showSeconds,
+        dateAndTime,
+        onTimeChange,
+        onDateAndTimeChange,
+        isTimeFilled,
+        applyButtonRef,
+        currentButtonRef,
+        hoursKeyboardNavigationRef,
+        minutesKeyboardNavigationRef,
+        secondsKeyboardNavigationRef,
+        today,
+        // Stub props
+        viewMode: 'month',
+        showHolidays: false,
+        viewDate: stubDate,
+        referenceDate: stubDate,
+        preselectedRange: undefined,
+        viewShift: 0,
+        setViewMode: stubFunc,
+        setViewShift: stubFunc,
+        startPreselect: stubFunc,
+        continuePreselect: stubFunc,
+        completePreselect: stubFunc,
+        restartPreselect: stubFunc,
+        buildCellProps: () => ({
+          isDisabled: false,
+          isHoliday: false
+        }),
+        onDateChange,
+        isDateAndTimeFilled,
+        isDateFilled
+      },
+      children: [(0, jsx_runtime_1.jsx)(TimePickerBase_1.TimePickerBase, {
+        showDivider: false
+      }), (0, jsx_runtime_1.jsx)(Footer_1.Footer, {})]
+    })
+  });
+}

package/dist/cjs/components/TimePicker/index.d.ts

@@ -0,0 +1 @@
+export * from './TimePicker';

package/dist/cjs/components/TimePicker/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./TimePicker"), exports);

package/dist/cjs/components/TimePicker/styles.module.css

@@ -0,0 +1,12 @@
+.timePickerWrapper{
+  display:flex;
+  flex-direction:column;
+  flex-grow:1;
+  box-sizing:border-box;
+  width:-moz-fit-content;
+  width:fit-content;
+}
+.timePickerWrapper[data-fit-to-container]{
+  min-width:100%;
+  height:100%;
+}

package/dist/cjs/components/index.d.ts

@@ -1 +1,2 @@
 export * from './Calendar';
+export * from './TimePicker';

package/dist/cjs/components/index.js

@@ -22,4 +22,5 @@ var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-__exportStar(require("./Calendar"), exports);
+__exportStar(require("./Calendar"), exports);
+__exportStar(require("./TimePicker"), exports);

package/dist/cjs/constants.d.ts

@@ -5,6 +5,7 @@ export declare const VIEW_MODE: {
 };
 export declare const CALENDAR_MODE: {
     readonly Date: "date";
+    readonly DateTime: "date-time";
     readonly Range: "range";
     readonly Month: "month";
 };
@@ -35,3 +36,7 @@ export declare const GRID_SIZE: {
     };
 };
 export declare const AUTOFOCUS = "autofocus";
+export declare const HOURS = 24;
+export declare const MINUTES = 60;
+export declare const SECONDS = 60;
+export declare const DEFAULT_LOCALE: Intl.Locale;

package/dist/cjs/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.AUTOFOCUS = exports.GRID_SIZE = exports.SIZE = exports.IN_RANGE_POSITION = exports.CALENDAR_MODE = exports.VIEW_MODE = void 0;
+exports.DEFAULT_LOCALE = exports.SECONDS = exports.MINUTES = exports.HOURS = exports.AUTOFOCUS = exports.GRID_SIZE = exports.SIZE = exports.IN_RANGE_POSITION = exports.CALENDAR_MODE = exports.VIEW_MODE = void 0;
 exports.VIEW_MODE = {
   Month: 'month',
   Year: 'year',
@@ -11,6 +11,7 @@ exports.VIEW_MODE = {
 };
 exports.CALENDAR_MODE = {
   Date: 'date',
+  DateTime: 'date-time',
   Range: 'range',
   Month: 'month'
 };
@@ -40,4 +41,8 @@ exports.GRID_SIZE = {
     columns: 3
   }
 };
-exports.AUTOFOCUS = 'autofocus';
+exports.AUTOFOCUS = 'autofocus';
+exports.HOURS = 24;
+exports.MINUTES = 60;
+exports.SECONDS = 60;
+exports.DEFAULT_LOCALE = new Intl.Locale('ru-RU');

package/dist/cjs/helperComponents/Button/Button.js

@@ -73,18 +73,19 @@ function Button(_a) {
       // do nothing
     }
   }, [onDownArrowKeyDown, onFocusLeave, onLeftArrowKeyDown, onRightArrowKeyDown]);
+  (0, react_1.useImperativeHandle)(useNavigationStartRef ? navigationStartRef : undefined, () => ({
+    focus: () => {
+      var _a;
+      (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+  }));
   return (0, jsx_runtime_1.jsxs)("button", Object.assign({
     type: 'button',
     tabIndex: tabIndex,
     className: styles_module_scss_1.default.button,
     onClick: onClick,
     "data-size": size,
-    ref: buttonRef => {
-      if (buttonRef) {
-        useNavigationStartRef && (navigationStartRef === null || navigationStartRef === void 0 ? void 0 : navigationStartRef(buttonRef));
-        ref.current = buttonRef;
-      }
-    },
+    ref: ref,
     onKeyDown: onKeyDownHandler,
     onFocus: () => setFocus(focusName),
     onBlur: () => setFocus(undefined),

package/dist/cjs/helperComponents/Button/styles.module.css

@@ -11,7 +11,7 @@
   cursor:pointer;
 }
 .button:not(:disabled):hover, .button:not(:disabled):focus-visible{
-  background-color:color-with-opacity(var(--sys-neutral-accent-default, #787b8a), var(--opacity-a008, 0.08));
+  background-color:color-mix(in srgb, var(--sys-neutral-accent-default, #787b8a), var(--sys-neutral-background1-level, #fdfdfd) calc((1 - var(--opacity-a008, 0.08)) * 100%));
 }
 .button:not(:disabled):focus-visible{
   outline-width:var(--border-state-focus-s-border-width, 2px);
@@ -26,12 +26,12 @@
   padding-right:var(--space-calendar-button-s-horizontal-padding, 8px);
   gap:var(--space-calendar-button-s-gap, 4px);
   border-radius:var(--radius-calendar-button-s, 12px);
-  font-family:var(--sans-label-s-font-family, SB Sans Interface);
-  font-weight:var(--sans-label-s-font-weight, Semibold);
-  line-height:var(--sans-label-s-line-height, 14px);
-  font-size:var(--sans-label-s-font-size, 11px);
-  letter-spacing:var(--sans-label-s-letter-spacing, 0px);
-  paragraph-spacing:var(--sans-label-s-paragraph-spacing, 6.05px);
+  font-family:var(--sans-label-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-m-font-weight, Semibold);
+  line-height:var(--sans-label-m-line-height, 16px);
+  font-size:var(--sans-label-m-font-size, 12px);
+  letter-spacing:var(--sans-label-m-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
 }
 .button[data-size=m]{
   height:var(--size-calendar-button-m, 40px);
@@ -39,12 +39,12 @@
   padding-right:var(--space-calendar-button-m-horizontal-padding, 8px);
   gap:var(--space-calendar-button-m-gap, 4px);
   border-radius:var(--radius-calendar-button-m, 14px);
-  font-family:var(--sans-label-m-font-family, SB Sans Interface);
-  font-weight:var(--sans-label-m-font-weight, Semibold);
-  line-height:var(--sans-label-m-line-height, 16px);
-  font-size:var(--sans-label-m-font-size, 12px);
-  letter-spacing:var(--sans-label-m-letter-spacing, 0px);
-  paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
+  font-family:var(--sans-label-l-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-l-font-weight, Semibold);
+  line-height:var(--sans-label-l-line-height, 20px);
+  font-size:var(--sans-label-l-font-size, 14px);
+  letter-spacing:var(--sans-label-l-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
 }
 .button[data-size=l]{
   height:var(--size-calendar-button-l, 48px);

package/dist/cjs/helperComponents/CalendarBase/CalendarBase.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, RefCallback } from 'react';
+import { CSSProperties, RefObject } from 'react';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { BuildCellPropsFunction, CalendarMode, FocusDirection, Range, Size } from '../../types';
 export type CalendarBaseProps = WithSupportProps<{
@@ -10,12 +10,15 @@ export type CalendarBaseProps = WithSupportProps<{
     today?: Date | number;
     buildCellProps?: BuildCellPropsFunction;
     showHolidays?: boolean;
+    showSeconds?: boolean;
     style?: CSSProperties;
     className?: string;
     defaultValue?: Range;
     fitToContainer?: boolean;
     autofocus?: boolean;
     locale?: Intl.Locale;
-    navigationStartRef?: RefCallback<HTMLButtonElement>;
+    navigationStartRef?: RefObject<{
+        focus(): void;
+    }>;
 }>;
-export declare function CalendarBase({ className, mode, size, autofocus, fitToContainer, value: valueProp, defaultValue, onChangeValue, today: todayProp, showHolidays, style, locale: localeProp, onFocusLeave, buildCellProps, 'data-test-id': testId, navigationStartRef, ...rest }: CalendarBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function CalendarBase({ className, mode, size, autofocus, fitToContainer, value: valueProp, defaultValue, onChangeValue, today: todayProp, showHolidays, showSeconds, style, locale: localeProp, onFocusLeave, buildCellProps, 'data-test-id': testId, navigationStartRef, ...rest }: CalendarBaseProps): import("react/jsx-runtime").JSX.Element;