@snack-uikit/chips 0.17.0 → 0.19.0

package/dist/esm/components/ChipChoice/components/ChipChoiceTime.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { TimePickerProps } from '@snack-uikit/calendar';
+import { ChipChoiceCommonProps } from '../types';
+type TimeValue = TimePickerProps['value'];
+export type ChipChoiceTimeProps = Omit<ChipChoiceCommonProps, 'widthStrategy'> & Pick<TimePickerProps, 'value' | 'defaultValue' | 'showSeconds'> & {
+    /** Колбек смены значения */
+    onChange?(value: TimeValue): void;
+    /** Колбек формирующий строковое представление выбранного значения. Принимает выбранное значение */
+    valueRender?(value?: TimeValue): ReactNode;
+};
+export declare function ChipChoiceTime({ size, value, defaultValue, onChange, valueRender, dropDownClassName, showSeconds, placement, ...rest }: ChipChoiceTimeProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/ChipChoice/components/ChipChoiceTime.js

@@ -0,0 +1,64 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { TimePicker } from '@snack-uikit/calendar';
+import { Dropdown } from '@snack-uikit/dropdown';
+import { useLocale } from '@snack-uikit/locale';
+import { useValueControl } from '@snack-uikit/utils';
+import { CHIP_CHOICE_TEST_IDS, SIZE } from '../../../constants';
+import { DEFAULT_LOCALE, TIME_PICKER_SIZE_MAP } from '../constants';
+import { useHandleOnKeyDown } from '../hooks';
+import { ChipChoiceBase } from './ChipChoiceBase';
+const getStringTimeValue = (time, { showSeconds, locale }) => {
+    var _a, _b, _c;
+    if (!time) {
+        return '';
+    }
+    const date = new Date();
+    date.setHours((_a = time.hours) !== null && _a !== void 0 ? _a : 0);
+    date.setMinutes((_b = time.minutes) !== null && _b !== void 0 ? _b : 0);
+    date.setSeconds((_c = time.seconds) !== null && _c !== void 0 ? _c : 0);
+    return date.toLocaleTimeString(locale, {
+        hour: 'numeric',
+        minute: 'numeric',
+        second: showSeconds ? 'numeric' : undefined,
+    });
+};
+export function ChipChoiceTime(_a) {
+    var { size = SIZE.S, value, defaultValue, onChange, valueRender, dropDownClassName, showSeconds = true, placement } = _a, rest = __rest(_a, ["size", "value", "defaultValue", "onChange", "valueRender", "dropDownClassName", "showSeconds", "placement"]);
+    const [selectedValue, setSelectedValue] = useValueControl({ value, defaultValue, onChange });
+    const localRef = useRef(null);
+    const [open, setOpen] = useState(false);
+    const handleOnKeyDown = useHandleOnKeyDown({ setOpen });
+    const closeDroplist = useCallback(() => {
+        setOpen(false);
+        setTimeout(() => { var _a; return (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
+    }, []);
+    const { t } = useLocale('Chips');
+    const valueToRender = useMemo(() => {
+        if (valueRender) {
+            return valueRender(selectedValue);
+        }
+        if (!selectedValue)
+            return t('allLabel');
+        return getStringTimeValue(selectedValue, { showSeconds, locale: DEFAULT_LOCALE });
+    }, [selectedValue, showSeconds, t, valueRender]);
+    const clearValue = () => setSelectedValue(undefined);
+    const handleChangeValue = useCallback((value) => {
+        setSelectedValue(value);
+        closeDroplist();
+    }, [closeDroplist, setSelectedValue]);
+    const navigationStartRef = useRef(null);
+    const focusNavigationStartItem = () => setTimeout(() => { var _a; return (_a = navigationStartRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
+    return (_jsx(Dropdown, { content: _jsx(TimePicker, { size: TIME_PICKER_SIZE_MAP[size], value: selectedValue, fitToContainer: false, onChangeValue: handleChangeValue, navigationStartRef: navigationStartRef, onFocusLeave: closeDroplist, showSeconds: showSeconds }), placement: placement, widthStrategy: 'auto', outsideClick: true, triggerRef: localRef, open: open, onOpenChange: setOpen, className: dropDownClassName, "data-test-id": CHIP_CHOICE_TEST_IDS.droplist, children: _jsx(ChipChoiceBase, Object.assign({}, rest, { ref: localRef, onClearButtonClick: clearValue, value: selectedValue, valueToRender: valueToRender, size: size, onKeyDown: handleOnKeyDown(focusNavigationStartItem) })) }));
+}

package/dist/esm/components/ChipChoice/components/index.d.ts

@@ -3,3 +3,4 @@ export * from './ChipChoiceSingle';
 export * from './ChipChoiceMultiple';
 export * from './ChipChoiceDate';
 export * from './ChipChoiceDateRange';
+export * from './ChipChoiceTime';

package/dist/esm/components/ChipChoice/components/index.js

@@ -3,3 +3,4 @@ export * from './ChipChoiceSingle';
 export * from './ChipChoiceMultiple';
 export * from './ChipChoiceDate';
 export * from './ChipChoiceDateRange';
+export * from './ChipChoiceTime';

package/dist/esm/components/ChipChoice/constants.d.ts

@@ -1,4 +1,4 @@
-import { CalendarProps } from '@snack-uikit/calendar';
+import { CalendarProps, TimePickerProps } from '@snack-uikit/calendar';
 import { DroplistProps } from '@snack-uikit/list';
 import { Size } from '../../types';
 export declare const BUTTON_CLEAR_VALUE_SIZE_MAP: {
@@ -8,11 +8,14 @@ export declare const BUTTON_CLEAR_VALUE_SIZE_MAP: {
     l: "xs";
 };
 export declare const CALENDAR_SIZE_MAP: Record<Size, CalendarProps['size']>;
+export declare const TIME_PICKER_SIZE_MAP: Record<Size, TimePickerProps['size']>;
 export declare const DROPLIST_SIZE_MAP: Record<Size, DroplistProps['size']>;
 export declare const CHIP_CHOICE_TYPE: {
     readonly Multiple: "multiple";
     readonly Date: "date";
+    readonly DateTime: "date-time";
     readonly DateRange: "date-range";
     readonly Single: "single";
     readonly Custom: "custom";
 };
+export declare const DEFAULT_LOCALE: Intl.Locale;

package/dist/esm/components/ChipChoice/constants.js

@@ -11,6 +11,12 @@ export const CALENDAR_SIZE_MAP = {
     [SIZE.M]: 'm',
     [SIZE.L]: 'm',
 };
+export const TIME_PICKER_SIZE_MAP = {
+    [SIZE.Xs]: 's',
+    [SIZE.S]: 's',
+    [SIZE.M]: 'm',
+    [SIZE.L]: 'l',
+};
 export const DROPLIST_SIZE_MAP = {
     [SIZE.Xs]: 's',
     [SIZE.S]: 's',
@@ -20,7 +26,9 @@ export const DROPLIST_SIZE_MAP = {
 export const CHIP_CHOICE_TYPE = {
     Multiple: 'multiple',
     Date: 'date',
+    DateTime: 'date-time',
     DateRange: 'date-range',
     Single: 'single',
     Custom: 'custom',
 };
+export const DEFAULT_LOCALE = new Intl.Locale('ru-RU');

package/dist/esm/components/ChipChoice/index.d.ts

@@ -1,11 +1,12 @@
-import { ChipChoiceCustom, ChipChoiceCustomProps, ChipChoiceDate, ChipChoiceDateProps, ChipChoiceDateRange, ChipChoiceDateRangeProps, ChipChoiceMultiple, ChipChoiceSingle, CustomContentRenderProps } from './components';
+import { ChipChoiceCustom, ChipChoiceCustomProps, ChipChoiceDate, ChipChoiceDateProps, ChipChoiceDateRange, ChipChoiceDateRangeProps, ChipChoiceMultiple, ChipChoiceSingle, ChipChoiceTime, ChipChoiceTimeProps, CustomContentRenderProps } from './components';
 export type { FilterOption, ChipChoiceMultipleProps, ChipChoiceSingleProps, ContentRenderProps } from './types';
-export type { ChipChoiceCustomProps, ChipChoiceDateProps, ChipChoiceDateRangeProps, CustomContentRenderProps };
+export type { ChipChoiceCustomProps, ChipChoiceDateProps, ChipChoiceDateRangeProps, CustomContentRenderProps, ChipChoiceTimeProps, };
 export declare namespace ChipChoice {
     const Custom: typeof ChipChoiceCustom;
     const Single: typeof ChipChoiceSingle;
     const Multiple: typeof ChipChoiceMultiple;
     const Date: typeof ChipChoiceDate;
     const DateRange: typeof ChipChoiceDateRange;
+    const Time: typeof ChipChoiceTime;
 }
 export { isAccordionOption, isBaseOption, isGroupOption, isGroupSelectOption, isNextListOption } from './utils';

package/dist/esm/components/ChipChoice/index.js

@@ -1,4 +1,4 @@
-import { ChipChoiceCustom, ChipChoiceDate, ChipChoiceDateRange, ChipChoiceMultiple, ChipChoiceSingle, } from './components';
+import { ChipChoiceCustom, ChipChoiceDate, ChipChoiceDateRange, ChipChoiceMultiple, ChipChoiceSingle, ChipChoiceTime, } from './components';
 export var ChipChoice;
 (function (ChipChoice) {
     ChipChoice.Custom = ChipChoiceCustom;
@@ -6,5 +6,6 @@ export var ChipChoice;
     ChipChoice.Multiple = ChipChoiceMultiple;
     ChipChoice.Date = ChipChoiceDate;
     ChipChoice.DateRange = ChipChoiceDateRange;
+    ChipChoice.Time = ChipChoiceTime;
 })(ChipChoice || (ChipChoice = {}));
 export { isAccordionOption, isBaseOption, isGroupOption, isGroupSelectOption, isNextListOption } from './utils';

package/dist/esm/components/ChipChoiceRow/components/constants.d.ts

@@ -2,6 +2,7 @@ export declare const MAP_CHIP_TYPE_TO_COMPONENT: {
     single: typeof import("../../ChipChoice/components").ChipChoiceSingle;
     multiple: typeof import("../../ChipChoice/components").ChipChoiceMultiple;
     date: typeof import("../../ChipChoice/components").ChipChoiceDate;
+    "date-time": typeof import("../../ChipChoice/components").ChipChoiceDate;
     "date-range": typeof import("../../ChipChoice/components").ChipChoiceDateRange;
     custom: typeof import("../../ChipChoice/components").ChipChoiceCustom;
 };

package/dist/esm/components/ChipChoiceRow/components/constants.js

@@ -4,6 +4,7 @@ export const MAP_CHIP_TYPE_TO_COMPONENT = {
     [CHIP_CHOICE_TYPE.Single]: ChipChoice.Single,
     [CHIP_CHOICE_TYPE.Multiple]: ChipChoice.Multiple,
     [CHIP_CHOICE_TYPE.Date]: ChipChoice.Date,
+    [CHIP_CHOICE_TYPE.DateTime]: ChipChoice.Date,
     [CHIP_CHOICE_TYPE.DateRange]: ChipChoice.DateRange,
     [CHIP_CHOICE_TYPE.Custom]: ChipChoice.Custom,
 };

package/dist/esm/components/ChipChoiceRow/types.d.ts

@@ -15,6 +15,12 @@ type ChipChoiceSingleType = {
 type ChipChoiceDateType = {
     type: typeof CHIP_CHOICE_TYPE.Date;
 } & ChipChoiceDateProps;
+type ChipChoiceDateTimeType = {
+    type: typeof CHIP_CHOICE_TYPE.DateTime;
+} & Omit<ChipChoiceDateProps, 'mode'> & {
+    mode: 'date-time';
+    showSeconds?: boolean;
+};
 type ChipChoiceDateRangeType = {
     type: typeof CHIP_CHOICE_TYPE.DateRange;
 } & ChipChoiceDateRangeProps;
@@ -23,7 +29,7 @@ type ChipChoiceCustomType = {
 } & ChipChoiceCustomProps;
 export type ChipChoiceProps = {
     id: string;
-} & (ChipChoiceMultipleType | ChipChoiceSingleType | ChipChoiceDateType | ChipChoiceDateRangeType | ChipChoiceCustomType);
+} & (ChipChoiceMultipleType | ChipChoiceSingleType | ChipChoiceDateType | ChipChoiceDateTimeType | ChipChoiceDateRangeType | ChipChoiceCustomType);
 export type OmitBetter<T, K extends keyof any> = T extends any ? Pick<T, Exclude<keyof T, K>> : never;
 export type FilterValue = Parameters<ChipChoiceProps['onChange']>[number];
 export {};

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Chips",
-  "version": "0.17.0",
+  "version": "0.19.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,12 +36,12 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/button": "0.18.0",
-    "@snack-uikit/calendar": "0.9.0",
-    "@snack-uikit/dropdown": "0.3.0",
-    "@snack-uikit/icons": "0.23.0",
-    "@snack-uikit/list": "0.19.0",
-    "@snack-uikit/loaders": "0.6.0",
+    "@snack-uikit/button": "0.19.1",
+    "@snack-uikit/calendar": "0.11.0",
+    "@snack-uikit/dropdown": "0.4.0",
+    "@snack-uikit/icons": "0.24.0",
+    "@snack-uikit/list": "0.21.0",
+    "@snack-uikit/loaders": "0.7.1",
     "@snack-uikit/utils": "3.5.0",
     "classnames": "2.3.2",
     "fuzzy-search": "3.2.1",
@@ -54,5 +54,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "62cc21d8606a61a78f80e3a7455b20d6f38474fa"
+  "gitHead": "b7163c6f939105eb34cabec64c9e983ac7958c26"
 }

package/src/components/ChipAssist/styles.module.scss

@@ -1,60 +1,59 @@
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-chips-chipAssist';
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
-@import '../../styles.module';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-chips-chipAssist';
+@use '../../styles.module';
 
 $sizes: 'xs', 's', 'm', 'l';
 
 $typography: (
-  'xs': $sans-label-s,
-  's': $sans-label-m,
-  'm': $sans-label-l,
-  'l': $sans-label-l,
+  'xs': styles-tokens-chips-chipAssist.$sans-label-s,
+  's': styles-tokens-chips-chipAssist.$sans-label-m,
+  'm': styles-tokens-chips-chipAssist.$sans-label-l,
+  'l': styles-tokens-chips-chipAssist.$sans-label-l,
 );
 
 .assistChip {
-  @include chip-defaults;
-  @include chip-anatomy-styles($chip-assist, $sizes, $typography);
+  @include styles.chip-defaults;
+  @include styles.chip-anatomy-styles(styles-tokens-chips-chipAssist.$chip-assist, $sizes, $typography);
 
-  color: $sys-neutral-text-support;
-  background-color: $sys-neutral-background1-level;
-  border-color: $sys-neutral-decor-default;
+  color: styles-tokens-chips-chipAssist.$sys-neutral-text-support;
+  background-color: styles-tokens-chips-chipAssist.$sys-neutral-background1-level;
+  border-color: styles-tokens-chips-chipAssist.$sys-neutral-decor-default;
 
   .icon {
-    color: $sys-neutral-text-light;
+    color: styles-tokens-chips-chipAssist.$sys-neutral-text-light;
   }
 
   &:hover {
-    color: $sys-neutral-text-main;
-    background-color: $sys-neutral-background2-level;
-    border-color: $sys-neutral-decor-hovered;
+    color: styles-tokens-chips-chipAssist.$sys-neutral-text-main;
+    background-color: styles-tokens-chips-chipAssist.$sys-neutral-background2-level;
+    border-color: styles-tokens-chips-chipAssist.$sys-neutral-decor-hovered;
   }
 
   &:focus-visible {
-    @include chip-outline;
+    @include styles.chip-outline;
 
-    color: $sys-neutral-text-main;
-    background-color: $sys-neutral-background2-level;
-    border-color: $sys-neutral-decor-hovered;
+    color: styles-tokens-chips-chipAssist.$sys-neutral-text-main;
+    background-color: styles-tokens-chips-chipAssist.$sys-neutral-background2-level;
+    border-color: styles-tokens-chips-chipAssist.$sys-neutral-decor-hovered;
   }
 
   &:active {
-    color: $sys-neutral-text-main;
-    background-color: $sys-neutral-background;
-    border-color: $sys-neutral-decor-activated;
+    color: styles-tokens-chips-chipAssist.$sys-neutral-text-main;
+    background-color: styles-tokens-chips-chipAssist.$sys-neutral-background;
+    border-color: styles-tokens-chips-chipAssist.$sys-neutral-decor-activated;
   }
 
   &:disabled {
     cursor: not-allowed;
-    color: $sys-neutral-text-light;
-    background-color: $sys-neutral-background;
-    border-color: $sys-neutral-decor-hovered;
+    color: styles-tokens-chips-chipAssist.$sys-neutral-text-light;
+    background-color: styles-tokens-chips-chipAssist.$sys-neutral-background;
+    border-color: styles-tokens-chips-chipAssist.$sys-neutral-decor-hovered;
   }
 
   &[data-loading] {
-    @include chip-loading-state($chip-assist, '&[data-variant="label-only"]', label);
+    @include styles.chip-loading-state(styles-tokens-chips-chipAssist.$chip-assist, '&[data-variant="label-only"]', label);
 
-    color: $sys-neutral-text-main;
-    background-color: $sys-neutral-background;
-    border-color: $sys-neutral-decor-activated;
+    color: styles-tokens-chips-chipAssist.$sys-neutral-text-main;
+    background-color: styles-tokens-chips-chipAssist.$sys-neutral-background;
+    border-color: styles-tokens-chips-chipAssist.$sys-neutral-decor-activated;
   }
 }

package/src/components/ChipChoice/components/ChipChoiceBase/styles.module.scss

@@ -1,22 +1,5 @@
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-chips-chipChoice';
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
-@import '../../styles.module';
-
-$sizes: 'xs', 's', 'm', 'l';
-
-$labelTypography: (
-  'xs': $light-label-s,
-  's': $light-label-m,
-  'm': $light-label-m,
-  'l': $light-label-l,
-);
-
-$valueTypography: (
-  'xs': $sans-label-s,
-  's': $sans-label-m,
-  'm': $sans-label-l,
-  'l': $sans-label-l,
-);
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-chips-chipChoice';
+@use '../../styles.module';
 
 .label,
 .value {
@@ -25,25 +8,25 @@ $valueTypography: (
 }
 
 .choiceChip {
-  @include chip-defaults;
-  @include chip-anatomy-styles($chip-choice, $sizes, $labelTypography);
+  @include styles.chip-defaults;
+  @include styles.chip-anatomy-styles(styles-tokens-chips-chipChoice.$chip-choice, styles.$sizes, styles.$labelTypography);
 
-  background-color: $sys-neutral-background1-level;
-  border-color: $sys-neutral-decor-default;
+  background-color: styles-tokens-chips-chipChoice.$sys-neutral-background1-level;
+  border-color: styles-tokens-chips-chipChoice.$sys-neutral-decor-default;
 
   .label,
   .value {
-    color: $sys-neutral-text-support;
+    color: styles-tokens-chips-chipChoice.$sys-neutral-text-support;
   }
 
   .icon {
-    color: $sys-neutral-text-light;
+    color: styles-tokens-chips-chipChoice.$sys-neutral-text-light;
   }
 
-  @each $size in $sizes {
+  @each $size in styles.$sizes {
     &[data-size='#{$size}'] {
       .value {
-        @include composite-var($valueTypography, $size);
+        @include styles-tokens-chips-chipChoice.composite-var(styles.$valueTypography, $size);
       }
     }
   }
@@ -51,46 +34,46 @@ $valueTypography: (
   &:hover,
   &:active,
   &:focus-visible {
-    background-color: $sys-neutral-background2-level;
-    border-color: $sys-neutral-decor-hovered;
+    background-color: styles-tokens-chips-chipChoice.$sys-neutral-background2-level;
+    border-color: styles-tokens-chips-chipChoice.$sys-neutral-decor-hovered;
 
     .label {
-      color: $sys-neutral-text-support;
+      color: styles-tokens-chips-chipChoice.$sys-neutral-text-support;
     }
 
     .value {
-      color: $sys-neutral-text-main;
+      color: styles-tokens-chips-chipChoice.$sys-neutral-text-main;
     }
   }
 
   &:focus-visible {
-    @include chip-outline;
+    @include styles.chip-outline;
   }
 
   &[data-disabled] {
     cursor: not-allowed;
-    background-color: $sys-neutral-background;
-    border-color: $sys-neutral-decor-disabled;
+    background-color: styles-tokens-chips-chipChoice.$sys-neutral-background;
+    border-color: styles-tokens-chips-chipChoice.$sys-neutral-decor-disabled;
 
     .label,
     .value {
-      color: $sys-neutral-text-light;
+      color: styles-tokens-chips-chipChoice.$sys-neutral-text-light;
     }
   }
 
   &[data-loading] {
-    @include chip-loading-state($chip-choice, '&:not([data-label])', value, null, true);
+    @include styles.chip-loading-state(styles-tokens-chips-chipChoice.$chip-choice, '&:not([data-label])', value, null, true);
 
-    background-color: $sys-neutral-background;
-    border-color: $sys-neutral-decor-activated;
+    background-color: styles-tokens-chips-chipChoice.$sys-neutral-background;
+    border-color: styles-tokens-chips-chipChoice.$sys-neutral-decor-activated;
 
     .label,
     .value {
-      color: $sys-neutral-text-support;
+      color: styles-tokens-chips-chipChoice.$sys-neutral-text-support;
     }
   }
 }
 
 .triggerClassName {
-  --offset: #{$space-drop-list-drop-offset};
+  --offset: #{styles-tokens-chips-chipChoice.$space-drop-list-drop-offset};
 }

package/src/components/ChipChoice/components/ChipChoiceDate.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useCallback, useRef, useState } from 'react';
+import { ReactNode, useCallback, useMemo, useRef, useState } from 'react';
 
 import { Calendar, CalendarProps } from '@snack-uikit/calendar';
 import { Dropdown } from '@snack-uikit/dropdown';
@@ -6,11 +6,16 @@ import { useLocale } from '@snack-uikit/locale';
 import { useValueControl } from '@snack-uikit/utils';
 
 import { CHIP_CHOICE_TEST_IDS, SIZE } from '../../../constants';
-import { CALENDAR_SIZE_MAP } from '../constants';
+import { CALENDAR_SIZE_MAP, DEFAULT_LOCALE } from '../constants';
 import { useHandleOnKeyDown } from '../hooks';
 import { ChipChoiceCommonProps } from '../types';
 import { ChipChoiceBase } from './ChipChoiceBase';
 
+type ChipChoiceDateWithSeconds = {
+  mode?: 'date-time';
+  showSeconds?: boolean;
+};
+
 export type ChipChoiceDateProps = ChipChoiceCommonProps & {
   /** Значение компонента */
   value?: Date;
@@ -21,7 +26,12 @@ export type ChipChoiceDateProps = ChipChoiceCommonProps & {
   /** Колбек формирующий строковое представление выбранного значения. Принимает выбранное значение */
   valueRender?(value?: Date): ReactNode;
   mode?: Exclude<CalendarProps['mode'], 'range'>;
-};
+} & (
+    | ChipChoiceDateWithSeconds
+    | {
+        mode?: 'date' | 'month';
+      }
+  );
 
 export function ChipChoiceDate({
   size = SIZE.S,
@@ -31,10 +41,14 @@ export function ChipChoiceDate({
   valueRender,
   dropDownClassName,
   mode = 'date',
+  placement,
+  widthStrategy,
   ...rest
 }: ChipChoiceDateProps) {
   const [selectedValue, setSelectedValue] = useValueControl<Date>({ value, defaultValue, onChange });
 
+  const showSeconds = mode === 'date-time' ? ((rest as ChipChoiceDateWithSeconds).showSeconds ?? true) : undefined;
+
   const localRef = useRef<HTMLDivElement>(null);
 
   const [open, setOpen] = useState<boolean>(false);
@@ -47,12 +61,46 @@ export function ChipChoiceDate({
 
   const { t } = useLocale('Chips');
 
-  const valueToRender = valueRender
-    ? valueRender(selectedValue)
-    : (selectedValue && new Date(selectedValue).toLocaleDateString()) || t('allLabel');
+  const valueToRender = useMemo(() => {
+    if (valueRender) {
+      return valueRender(selectedValue);
+    }
+
+    if (!selectedValue) return t('allLabel');
+
+    const date = new Date(selectedValue);
+
+    if (mode === 'date-time') {
+      return date.toLocaleString(DEFAULT_LOCALE, {
+        year: 'numeric',
+        month: 'numeric',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: showSeconds ? '2-digit' : undefined,
+      });
+    }
+
+    return date.toLocaleDateString(DEFAULT_LOCALE, {
+      year: 'numeric',
+      month: 'numeric',
+      day: mode === 'date' ? 'numeric' : undefined,
+    });
+  }, [mode, selectedValue, showSeconds, t, valueRender]);
 
   const clearValue = () => setSelectedValue(undefined);
 
+  const handleChangeValue = useCallback(
+    (value: Date) => {
+      setSelectedValue(value);
+      closeDroplist();
+    },
+    [closeDroplist, setSelectedValue],
+  );
+
+  const navigationStartRef = useRef<HTMLButtonElement>(null);
+  const focusNavigationStartItem = () => setTimeout(() => navigationStartRef.current?.focus(), 0);
+
   return (
     <Dropdown
       content={
@@ -60,14 +108,16 @@ export function ChipChoiceDate({
           mode={mode}
           size={CALENDAR_SIZE_MAP[size]}
           value={selectedValue}
-          onChangeValue={(value: Date) => {
-            setSelectedValue(value);
-            closeDroplist();
-          }}
-          navigationStartRef={element => element?.focus()}
+          fitToContainer={false}
+          onChangeValue={handleChangeValue}
+          navigationStartRef={navigationStartRef}
           onFocusLeave={closeDroplist}
+          showSeconds={showSeconds}
+          locale={DEFAULT_LOCALE}
         />
       }
+      placement={placement}
+      widthStrategy={widthStrategy}
       outsideClick
       triggerRef={localRef}
       open={open}
@@ -82,7 +132,7 @@ export function ChipChoiceDate({
         value={selectedValue}
         valueToRender={valueToRender}
         size={size}
-        onKeyDown={handleOnKeyDown()}
+        onKeyDown={handleOnKeyDown(focusNavigationStartItem)}
       />
     </Dropdown>
   );

package/src/components/ChipChoice/components/ChipChoiceDateRange.tsx

@@ -6,7 +6,7 @@ import { Dropdown } from '@snack-uikit/dropdown';
 import { useLocale } from '@snack-uikit/locale';
 
 import { CHIP_CHOICE_TEST_IDS, DEFAULT_EMPTY_VALUE, SIZE } from '../../../constants';
-import { CALENDAR_SIZE_MAP } from '../constants';
+import { CALENDAR_SIZE_MAP, DEFAULT_LOCALE } from '../constants';
 import { useHandleOnKeyDown } from '../hooks';
 import { ChipChoiceCommonProps } from '../types';
 import { ChipChoiceBase } from './ChipChoiceBase';
@@ -34,7 +34,7 @@ function defaultRangeFormatter({ value, allLabel }: DefaultRangeFormatterProps)
 
   const [from, to] = value;
 
-  return `${from.toLocaleDateString()} ${DEFAULT_EMPTY_VALUE} ${to.toLocaleDateString()}`;
+  return `${from.toLocaleDateString(DEFAULT_LOCALE)} ${DEFAULT_EMPTY_VALUE} ${to.toLocaleDateString(DEFAULT_LOCALE)}`;
 }
 
 export function ChipChoiceDateRange({
@@ -78,6 +78,7 @@ export function ChipChoiceDateRange({
             setSelectedValue(value);
             closeDroplist();
           }}
+          locale={DEFAULT_LOCALE}
           // bug with focus
           // navigationStartRef={element => element?.focus()}
           onFocusLeave={closeDroplist}