@snack-uikit/calendar 0.13.19 → 0.13.20-preview-ff470bb3.0

package/README.md

@@ -128,6 +128,7 @@ function TimePickerExample() {
 | defaultValue | `TimeValue` | - | Значение по-умолчанию для uncontrolled. |
 | onChangeValue | `(value?: TimeValue) => void` | - | Колбек выбора значения |
 | showSeconds | `boolean` | true | Показывать ли секунды |
+| footerMode | enum TimePickerFooterMode: `"current-time-and-apply"`, `"apply-only"` | current-time-and-apply | Режим футера: выбор текущего времени (кнопка «Текущее») и компактная «Применить», либо одна широкая «Применить» с подписью. |
 | size | enum Size: `"s"`, `"m"`, `"l"` | m | Размер |
 | className | `string` | - | CSS-класс контейнера |
 | fitToContainer | `boolean` | true | Отключает предустановленный размер, заставляя компонент подстраиваться к размеру контейнра: (width: 100%, height: 100%). |

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

@@ -1,6 +1,6 @@
 import { RefObject } from 'react';
 import { WithSupportProps } from '@snack-uikit/utils';
-import { FocusDirection, Size, TimeValue } from '../../types';
+import { FocusDirection, Size, TimePickerFooterMode, TimeValue } from '../../types';
 export type TimePickerProps = WithSupportProps<{
     /** Выбранное значение.*/
     value?: TimeValue;
@@ -12,6 +12,11 @@ export type TimePickerProps = WithSupportProps<{
     onChangeValue?(value?: TimeValue): void;
     /** Показывать ли секунды */
     showSeconds?: boolean;
+    /**
+     * Режим футера: выбор текущего времени (кнопка «Текущее») и компактная «Применить», либо одна широкая «Применить» с подписью.
+     * @default current-time-and-apply
+     */
+    footerMode?: TimePickerFooterMode;
     /**
      * Размер
      * @default m
@@ -31,4 +36,4 @@ export type TimePickerProps = WithSupportProps<{
         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;
+export declare function TimePicker({ className, size, fitToContainer, value: valueProp, defaultValue, onChangeValue, onFocusLeave, 'data-test-id': testId, navigationStartRef, showSeconds, today: todayProp, footerMode, }: TimePickerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -36,7 +36,8 @@ function TimePicker(_ref) {
     'data-test-id': testId,
     navigationStartRef,
     showSeconds = true,
-    today: todayProp
+    today: todayProp,
+    footerMode = 'current-time-and-apply'
   } = _ref;
   const [value, setValueState] = (0, uncontrollable_1.useUncontrolledProp)(valueProp, defaultValue, onChangeValue);
   const setValueEventHandler = (0, utils_1.useEventHandler)(setValueState);
@@ -110,6 +111,7 @@ function TimePicker(_ref) {
         onFocusLeave,
         navigationStartRef,
         showSeconds,
+        footerMode,
         dateAndTime,
         onTimeChange,
         onDateAndTimeChange,

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

@@ -1,6 +1,6 @@
 import { MutableRefObject, RefObject } from 'react';
 import { ListProps } from '@snack-uikit/list';
-import { BuildCellPropsFunction, CalendarMode, DateAndTime, FocusDirection, Range, Size, TimeValue, ViewMode } from '../../types';
+import { BuildCellPropsFunction, CalendarMode, DateAndTime, FocusDirection, Range, Size, TimePickerFooterMode, TimeValue, ViewMode } from '../../types';
 export type CalendarContextType = {
     size: Size;
     /** Дата текущего дня */
@@ -21,6 +21,8 @@ export type CalendarContextType = {
     viewShift: number;
     focus?: string;
     locale: Intl.Locale;
+    /** Режим футера time-picker */
+    footerMode?: TimePickerFooterMode;
     onFocusLeave?(direction: FocusDirection): void;
     buildCellProps?: BuildCellPropsFunction;
     setFocus(address: string | undefined): void;

package/dist/cjs/helperComponents/Footer/Footer.js

@@ -13,7 +13,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const button_1 = require("@snack-uikit/button");
 const divider_1 = require("@snack-uikit/divider");
-const icons_1 = require("@snack-uikit/icons");
 const list_1 = require("@snack-uikit/list");
 const locale_1 = require("@snack-uikit/locale");
 const constants_1 = require("../../constants");
@@ -40,8 +39,10 @@ function Footer() {
     getTestId,
     referenceDate,
     setViewShift,
-    onFocusLeave
+    onFocusLeave,
+    footerMode = 'current-time-and-apply'
   } = (0, react_1.useContext)(CalendarContext_1.CalendarContext);
+  const isApplyOnlyFooter = footerMode === 'apply-only';
   const {
     t
   } = (0, locale_1.useLocale)('Calendar');
@@ -106,6 +107,8 @@ function Footer() {
       className: styles_module_scss_1.default.currentWrapper,
       "data-size": size,
       children: [(0, jsx_runtime_1.jsx)(button_1.ButtonFunction, {
+        className: styles_module_scss_1.default.currentButton,
+        "data-hidden": isApplyOnlyFooter,
         label: t('current'),
         size: size === 's' ? 'xs' : 's',
         onClick: handleCurrentClick,
@@ -113,7 +116,7 @@ function Footer() {
         onKeyDown: handleCurrentKeyDown,
         "data-test-id": getTestId('current-button')
       }), (0, jsx_runtime_1.jsx)(button_1.ButtonFilled, {
-        icon: (0, jsx_runtime_1.jsx)(icons_1.CheckSVG, {}),
+        label: t('apply'),
         size: size === 's' ? 'xs' : 's',
         disabled: isApplyButtonDisabled,
         onClick: handleApplySelection,

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

@@ -29,7 +29,7 @@
   padding-left:var(--space-drop-list-item-s-container-horizontal-padding, 8px);
   padding-right:var(--space-drop-list-item-s-container-horizontal-padding, 8px);
   gap:var(--space-drop-list-item-s-container-gap, 8px);
-  gap:var(--space-calendar-footer-elements-s, 8px);
+  gap:var(--dimension-theme-general-4px, 4px);
 }
 .currentWrapper[data-size=m]{
   padding-top:var(--space-drop-list-item-m-container-vertical-padding, 8px);
@@ -37,7 +37,7 @@
   padding-left:var(--space-drop-list-item-m-container-horizontal-padding, 10px);
   padding-right:var(--space-drop-list-item-m-container-horizontal-padding, 10px);
   gap:var(--space-drop-list-item-m-container-gap, 8px);
-  gap:var(--space-calendar-footer-elements-m, 8px);
+  gap:var(--dimension-050m, 4px);
 }
 .currentWrapper[data-size=l]{
   padding-top:var(--space-drop-list-item-l-container-vertical-padding, 12px);
@@ -45,5 +45,9 @@
   padding-left:var(--space-drop-list-item-l-container-horizontal-padding, 12px);
   padding-right:var(--space-drop-list-item-l-container-horizontal-padding, 12px);
   gap:var(--space-drop-list-item-l-container-gap, 8px);
-  gap:var(--space-calendar-footer-elements-l, 8px);
+  gap:var(--dimension-050m, 4px);
+}
+
+.currentButton[data-hidden=true]{
+  visibility:hidden;
 }

package/dist/cjs/types.d.ts

@@ -38,6 +38,12 @@ export type TimeValue = {
     minutes?: number;
     seconds?: number;
 };
+/**
+ * Режим футера time-picker:
+ * - `current-time-and-apply` — кнопка выбора текущего времени и компактная «Применить»;
+ * - `apply-only` — одна широкая «Применить» с подписью.
+ */
+export type TimePickerFooterMode = 'current-time-and-apply' | 'apply-only';
 export type DateAndTime = TimeValue & {
     year?: number;
     month?: number;

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

@@ -1,6 +1,6 @@
 import { RefObject } from 'react';
 import { WithSupportProps } from '@snack-uikit/utils';
-import { FocusDirection, Size, TimeValue } from '../../types';
+import { FocusDirection, Size, TimePickerFooterMode, TimeValue } from '../../types';
 export type TimePickerProps = WithSupportProps<{
     /** Выбранное значение.*/
     value?: TimeValue;
@@ -12,6 +12,11 @@ export type TimePickerProps = WithSupportProps<{
     onChangeValue?(value?: TimeValue): void;
     /** Показывать ли секунды */
     showSeconds?: boolean;
+    /**
+     * Режим футера: выбор текущего времени (кнопка «Текущее») и компактная «Применить», либо одна широкая «Применить» с подписью.
+     * @default current-time-and-apply
+     */
+    footerMode?: TimePickerFooterMode;
     /**
      * Размер
      * @default m
@@ -31,4 +36,4 @@ export type TimePickerProps = WithSupportProps<{
         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;
+export declare function TimePicker({ className, size, fitToContainer, value: valueProp, defaultValue, onChangeValue, onFocusLeave, 'data-test-id': testId, navigationStartRef, showSeconds, today: todayProp, footerMode, }: TimePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/TimePicker/TimePicker.js

@@ -13,7 +13,7 @@ import { getLocale, getTestIdBuilder } from '../../utils';
 import styles from './styles.module.css';
 const stubDate = new Date();
 const stubFunc = () => { };
-export function TimePicker({ className, size = SIZE.M, fitToContainer = true, value: valueProp, defaultValue, onChangeValue, onFocusLeave, 'data-test-id': testId, navigationStartRef, showSeconds = true, today: todayProp, }) {
+export function TimePicker({ className, size = SIZE.M, fitToContainer = true, value: valueProp, defaultValue, onChangeValue, onFocusLeave, 'data-test-id': testId, navigationStartRef, showSeconds = true, today: todayProp, footerMode = 'current-time-and-apply', }) {
     const [value, setValueState] = useUncontrolledProp(valueProp, defaultValue, onChangeValue);
     const setValueEventHandler = useEventHandler(setValueState);
     const [internalValue, setInternalValue] = useState();
@@ -55,6 +55,7 @@ export function TimePicker({ className, size = SIZE.M, fitToContainer = true, va
                 onFocusLeave,
                 navigationStartRef,
                 showSeconds,
+                footerMode,
                 dateAndTime,
                 onTimeChange,
                 onDateAndTimeChange,

package/dist/esm/helperComponents/CalendarContext/CalendarContext.d.ts

@@ -1,6 +1,6 @@
 import { MutableRefObject, RefObject } from 'react';
 import { ListProps } from '@snack-uikit/list';
-import { BuildCellPropsFunction, CalendarMode, DateAndTime, FocusDirection, Range, Size, TimeValue, ViewMode } from '../../types';
+import { BuildCellPropsFunction, CalendarMode, DateAndTime, FocusDirection, Range, Size, TimePickerFooterMode, TimeValue, ViewMode } from '../../types';
 export type CalendarContextType = {
     size: Size;
     /** Дата текущего дня */
@@ -21,6 +21,8 @@ export type CalendarContextType = {
     viewShift: number;
     focus?: string;
     locale: Intl.Locale;
+    /** Режим футера time-picker */
+    footerMode?: TimePickerFooterMode;
     onFocusLeave?(direction: FocusDirection): void;
     buildCellProps?: BuildCellPropsFunction;
     setFocus(address: string | undefined): void;

package/dist/esm/helperComponents/Footer/Footer.js

@@ -2,7 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext } from 'react';
 import { ButtonFilled, ButtonFunction } from '@snack-uikit/button';
 import { Divider } from '@snack-uikit/divider';
-import { CheckSVG } from '@snack-uikit/icons';
 import { getDefaultItemId } from '@snack-uikit/list';
 import { useLocale } from '@snack-uikit/locale';
 import { CALENDAR_MODE } from '../../constants';
@@ -10,7 +9,8 @@ import { getMonthShift } from '../../utils';
 import { CalendarContext } from '../CalendarContext';
 import styles from './styles.module.css';
 export function Footer() {
-    const { size, viewMode, mode, today, setValue, dateAndTime, isTimeFilled, isDateAndTimeFilled, onDateAndTimeChange, applyButtonRef, currentButtonRef, hoursKeyboardNavigationRef, minutesKeyboardNavigationRef, secondsKeyboardNavigationRef, showSeconds, getTestId, referenceDate, setViewShift, onFocusLeave, } = useContext(CalendarContext);
+    const { size, viewMode, mode, today, setValue, dateAndTime, isTimeFilled, isDateAndTimeFilled, onDateAndTimeChange, applyButtonRef, currentButtonRef, hoursKeyboardNavigationRef, minutesKeyboardNavigationRef, secondsKeyboardNavigationRef, showSeconds, getTestId, referenceDate, setViewShift, onFocusLeave, footerMode = 'current-time-and-apply', } = useContext(CalendarContext);
+    const isApplyOnlyFooter = footerMode === 'apply-only';
     const { t } = useLocale('Calendar');
     if (![CALENDAR_MODE.DateTime, 'time'].includes(mode) || viewMode !== 'month') {
         return null;
@@ -59,5 +59,5 @@ export function Footer() {
         const newDate = new Date(year, month, day, hours, minutes, showSeconds ? seconds : 0);
         setValue([newDate, newDate]);
     };
-    return (_jsxs("div", { className: styles.footer, "data-size": size, children: [_jsx(Divider, { className: styles.divider }), _jsxs("div", { className: styles.currentWrapper, "data-size": size, children: [_jsx(ButtonFunction, { label: t('current'), size: size === 's' ? 'xs' : 's', onClick: handleCurrentClick, ref: currentButtonRef, onKeyDown: handleCurrentKeyDown, "data-test-id": getTestId('current-button') }), _jsx(ButtonFilled, { icon: _jsx(CheckSVG, {}), size: size === 's' ? 'xs' : 's', disabled: isApplyButtonDisabled, onClick: handleApplySelection, ref: applyButtonRef, onKeyDown: handleApplyKeyDown, "data-test-id": getTestId('apply-button') })] })] }));
+    return (_jsxs("div", { className: styles.footer, "data-size": size, children: [_jsx(Divider, { className: styles.divider }), _jsxs("div", { className: styles.currentWrapper, "data-size": size, children: [_jsx(ButtonFunction, { className: styles.currentButton, "data-hidden": isApplyOnlyFooter, label: t('current'), size: size === 's' ? 'xs' : 's', onClick: handleCurrentClick, ref: currentButtonRef, onKeyDown: handleCurrentKeyDown, "data-test-id": getTestId('current-button') }), _jsx(ButtonFilled, { label: t('apply'), size: size === 's' ? 'xs' : 's', disabled: isApplyButtonDisabled, onClick: handleApplySelection, ref: applyButtonRef, onKeyDown: handleApplyKeyDown, "data-test-id": getTestId('apply-button') })] })] }));
 }

package/dist/esm/helperComponents/Footer/styles.module.css

@@ -29,7 +29,7 @@
   padding-left:var(--space-drop-list-item-s-container-horizontal-padding, 8px);
   padding-right:var(--space-drop-list-item-s-container-horizontal-padding, 8px);
   gap:var(--space-drop-list-item-s-container-gap, 8px);
-  gap:var(--space-calendar-footer-elements-s, 8px);
+  gap:var(--dimension-theme-general-4px, 4px);
 }
 .currentWrapper[data-size=m]{
   padding-top:var(--space-drop-list-item-m-container-vertical-padding, 8px);
@@ -37,7 +37,7 @@
   padding-left:var(--space-drop-list-item-m-container-horizontal-padding, 10px);
   padding-right:var(--space-drop-list-item-m-container-horizontal-padding, 10px);
   gap:var(--space-drop-list-item-m-container-gap, 8px);
-  gap:var(--space-calendar-footer-elements-m, 8px);
+  gap:var(--dimension-050m, 4px);
 }
 .currentWrapper[data-size=l]{
   padding-top:var(--space-drop-list-item-l-container-vertical-padding, 12px);
@@ -45,5 +45,9 @@
   padding-left:var(--space-drop-list-item-l-container-horizontal-padding, 12px);
   padding-right:var(--space-drop-list-item-l-container-horizontal-padding, 12px);
   gap:var(--space-drop-list-item-l-container-gap, 8px);
-  gap:var(--space-calendar-footer-elements-l, 8px);
+  gap:var(--dimension-050m, 4px);
+}
+
+.currentButton[data-hidden=true]{
+  visibility:hidden;
 }

package/dist/esm/types.d.ts

@@ -38,6 +38,12 @@ export type TimeValue = {
     minutes?: number;
     seconds?: number;
 };
+/**
+ * Режим футера time-picker:
+ * - `current-time-and-apply` — кнопка выбора текущего времени и компактная «Применить»;
+ * - `apply-only` — одна широкая «Применить» с подписью.
+ */
+export type TimePickerFooterMode = 'current-time-and-apply' | 'apply-only';
 export type DateAndTime = TimeValue & {
     year?: number;
     month?: number;

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Calendar",
-  "version": "0.13.19",
+  "version": "0.13.20-preview-ff470bb3.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -48,5 +48,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "c61cd024708846e7fc958d7fcdd082bd593b52db"
+  "gitHead": "9cb3640f627845ea5054cf3a16998c30419f1691"
 }

package/src/components/TimePicker/TimePicker.tsx

@@ -11,7 +11,7 @@ import { CalendarContext } from '../../helperComponents/CalendarContext';
 import { Footer } from '../../helperComponents/Footer';
 import { TimePickerBase } from '../../helperComponents/TimePickerBase';
 import { useDateAndTime } from '../../hooks';
-import { FocusDirection, Range, Size, TimeValue } from '../../types';
+import { FocusDirection, Range, Size, TimePickerFooterMode, TimeValue } from '../../types';
 import { getLocale, getTestIdBuilder } from '../../utils';
 import styles from './styles.module.scss';
 
@@ -29,6 +29,11 @@ export type TimePickerProps = WithSupportProps<{
   onChangeValue?(value?: TimeValue): void;
   /** Показывать ли секунды */
   showSeconds?: boolean;
+  /**
+   * Режим футера: выбор текущего времени (кнопка «Текущее») и компактная «Применить», либо одна широкая «Применить» с подписью.
+   * @default current-time-and-apply
+   */
+  footerMode?: TimePickerFooterMode;
 
   /**
    * Размер
@@ -61,6 +66,7 @@ export function TimePicker({
   navigationStartRef,
   showSeconds = true,
   today: todayProp,
+  footerMode = 'current-time-and-apply',
 }: TimePickerProps) {
   const [value, setValueState] = useUncontrolledProp<TimeValue | undefined>(valueProp, defaultValue, onChangeValue);
   const setValueEventHandler = useEventHandler(setValueState);
@@ -127,6 +133,7 @@ export function TimePicker({
           onFocusLeave,
           navigationStartRef,
           showSeconds,
+          footerMode,
           dateAndTime,
           onTimeChange,
           onDateAndTimeChange,

package/src/helperComponents/CalendarContext/CalendarContext.tsx

@@ -10,6 +10,7 @@ import {
   FocusDirection,
   Range,
   Size,
+  TimePickerFooterMode,
   TimeValue,
   ViewMode,
 } from '../../types';
@@ -35,6 +36,8 @@ export type CalendarContextType = {
   viewShift: number;
   focus?: string;
   locale: Intl.Locale;
+  /** Режим футера time-picker */
+  footerMode?: TimePickerFooterMode;
   onFocusLeave?(direction: FocusDirection): void;
   buildCellProps?: BuildCellPropsFunction;
   setFocus(address: string | undefined): void;

package/src/helperComponents/Footer/Footer.tsx

@@ -2,7 +2,6 @@ import { KeyboardEventHandler, useContext } from 'react';
 
 import { ButtonFilled, ButtonFunction } from '@snack-uikit/button';
 import { Divider } from '@snack-uikit/divider';
-import { CheckSVG } from '@snack-uikit/icons';
 import { getDefaultItemId } from '@snack-uikit/list';
 import { useLocale } from '@snack-uikit/locale';
 
@@ -32,8 +31,11 @@ export function Footer() {
     referenceDate,
     setViewShift,
     onFocusLeave,
+    footerMode = 'current-time-and-apply',
   } = useContext(CalendarContext);
 
+  const isApplyOnlyFooter = footerMode === 'apply-only';
+
   const { t } = useLocale('Calendar');
 
   if (![CALENDAR_MODE.DateTime, 'time'].includes(mode) || viewMode !== 'month') {
@@ -106,6 +108,8 @@ export function Footer() {
 
       <div className={styles.currentWrapper} data-size={size}>
         <ButtonFunction
+          className={styles.currentButton}
+          data-hidden={isApplyOnlyFooter}
           label={t('current')}
           size={size === 's' ? 'xs' : 's'}
           onClick={handleCurrentClick}
@@ -115,7 +119,7 @@ export function Footer() {
         />
 
         <ButtonFilled
-          icon={<CheckSVG />}
+          label={t('apply')}
           size={size === 's' ? 'xs' : 's'}
           disabled={isApplyButtonDisabled}
           onClick={handleApplySelection}

package/src/helperComponents/Footer/styles.module.scss

@@ -28,4 +28,10 @@ $sizes: 's', 'm', 'l';
       @include styles-tokens-calendar.composite-var(styles-tokens-calendar.$calendar, "footer-elements", $size);
     }
   }
+}
+
+.currentButton {
+  &[data-hidden='true'] {
+    visibility: hidden;
+  }
 }

package/src/types.ts

@@ -46,6 +46,13 @@ export type TimeValue = {
   seconds?: number;
 };
 
+/**
+ * Режим футера time-picker:
+ * - `current-time-and-apply` — кнопка выбора текущего времени и компактная «Применить»;
+ * - `apply-only` — одна широкая «Применить» с подписью.
+ */
+export type TimePickerFooterMode = 'current-time-and-apply' | 'apply-only';
+
 export type DateAndTime = TimeValue & {
   year?: number;
   month?: number;