@snack-uikit/chips 0.18.0 → 0.19.0

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.19.0 (2024-10-31)
+
+
+### Features
+
+* **PDS-438:** add ChipChoiceTime ([805b98a](https://github.com/cloud-ru-tech/snack-uikit/commit/805b98a2927ff0b38b704cae8f7b0beef3369469))
+* **PDS-438:** chip-choice - hide day in mode=month, add mode=date-time ([3108090](https://github.com/cloud-ru-tech/snack-uikit/commit/310809000629677374ded8280e73249eabe6410e))
+
+
+### BREAKING CHANGES
+
+
+* **PDS-438:** add showSeconds prop, remove locale prop ([0235eb7](https://github.com/cloud-ru-tech/snack-uikit/commit/0235eb7a5a7f7d8ac5e4e7cb03fe6e2408682b54))
+
+
+
+
 # 0.18.0 (2024-10-28)
 
 

package/README.md

@@ -221,7 +221,8 @@ import { PlaceholderSVG } from '@snack-uikit/icons';
 | defaultValue | `Date` | - | Значение компонента по-умолчанию |
 | onChange | `(value: Date) => void` | - | Колбек смены значения |
 | valueRender | `(value?: Date) => ReactNode` | - | Колбек формирующий строковое представление выбранного значения. Принимает выбранное значение |
-| mode | "date" \| "month" | - |  |
+| mode | "date" \| "month" \| "date-time" | - |  |
+| showSeconds | `boolean` | - |  |
 ## ChipChoice.DateRange
 ### Props
 | name | type | default value | description |
@@ -242,6 +243,26 @@ import { PlaceholderSVG } from '@snack-uikit/icons';
 | defaultValue | `Range` | - | Значение компонента по умолчанию |
 | onChange | `(value: Range) => void` | - | Колбек смены значения |
 | valueRender | `(value?: Range) => ReactNode` | - | Колбек формирующий строковое представление выбранного значения. Принимает массив выбранных значений |
+## ChipChoice.Time
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| label | `string` | - | Лейбл |
+| disabled | `boolean` | - | Деактивирован ли компонент |
+| loading | `boolean` | - | Состояние загрузки |
+| icon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка |
+| className | `string` | - | CSS-класс |
+| tabIndex | `number` | - | HTML tab index |
+| size | enum Size: `"xs"`, `"s"`, `"m"`, `"l"` | - | Размер |
+| onClick | `MouseEventHandler<HTMLButtonElement \| HTMLDivElement>` | - | Колбек обработки клика |
+| showClearButton | `boolean` | true | Отображение кнопки очистки значения |
+| placement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | - | Расположение выпадающего меню |
+| dropDownClassName | `string` | - |  |
+| value | `TimeValue` | - | Выбранное значение. |
+| defaultValue | `TimeValue` | - | Значение по-умолчанию для uncontrolled. |
+| showSeconds | `boolean` | - | Показывать ли секунды |
+| onChange | `(value: TimeValue) => void` | - | Колбек смены значения |
+| valueRender | `(value?: TimeValue) => ReactNode` | - | Колбек формирующий строковое представление выбранного значения. Принимает выбранное значение |
 ## isAccordionOption
 ### Props
 | name | type | default value | description |

package/dist/cjs/components/ChipChoice/components/ChipChoiceDate.d.ts

@@ -1,6 +1,10 @@
 import { ReactNode } from 'react';
 import { CalendarProps } from '@snack-uikit/calendar';
 import { ChipChoiceCommonProps } from '../types';
+type ChipChoiceDateWithSeconds = {
+    mode?: 'date-time';
+    showSeconds?: boolean;
+};
 export type ChipChoiceDateProps = ChipChoiceCommonProps & {
     /** Значение компонента */
     value?: Date;
@@ -11,5 +15,8 @@ export type ChipChoiceDateProps = ChipChoiceCommonProps & {
     /** Колбек формирующий строковое представление выбранного значения. Принимает выбранное значение */
     valueRender?(value?: Date): ReactNode;
     mode?: Exclude<CalendarProps['mode'], 'range'>;
-};
-export declare function ChipChoiceDate({ size, value, defaultValue, onChange, valueRender, dropDownClassName, mode, ...rest }: ChipChoiceDateProps): import("react/jsx-runtime").JSX.Element;
+} & (ChipChoiceDateWithSeconds | {
+    mode?: 'date' | 'month';
+});
+export declare function ChipChoiceDate({ size, value, defaultValue, onChange, valueRender, dropDownClassName, mode, placement, widthStrategy, ...rest }: ChipChoiceDateProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/ChipChoice/components/ChipChoiceDate.js

@@ -23,6 +23,7 @@ const constants_2 = require("../constants");
 const hooks_1 = require("../hooks");
 const ChipChoiceBase_1 = require("./ChipChoiceBase");
 function ChipChoiceDate(_a) {
+  var _b;
   var {
       size = constants_1.SIZE.S,
       value,
@@ -30,14 +31,17 @@ function ChipChoiceDate(_a) {
       onChange,
       valueRender,
       dropDownClassName,
-      mode = 'date'
+      mode = 'date',
+      placement,
+      widthStrategy
     } = _a,
-    rest = __rest(_a, ["size", "value", "defaultValue", "onChange", "valueRender", "dropDownClassName", "mode"]);
+    rest = __rest(_a, ["size", "value", "defaultValue", "onChange", "valueRender", "dropDownClassName", "mode", "placement", "widthStrategy"]);
   const [selectedValue, setSelectedValue] = (0, utils_1.useValueControl)({
     value,
     defaultValue,
     onChange
   });
+  const showSeconds = mode === 'date-time' ? (_b = rest.showSeconds) !== null && _b !== void 0 ? _b : true : undefined;
   const localRef = (0, react_1.useRef)(null);
   const [open, setOpen] = (0, react_1.useState)(false);
   const handleOnKeyDown = (0, hooks_1.useHandleOnKeyDown)({
@@ -53,20 +57,52 @@ function ChipChoiceDate(_a) {
   const {
     t
   } = (0, locale_1.useLocale)('Chips');
-  const valueToRender = valueRender ? valueRender(selectedValue) : selectedValue && new Date(selectedValue).toLocaleDateString() || t('allLabel');
+  const valueToRender = (0, react_1.useMemo)(() => {
+    if (valueRender) {
+      return valueRender(selectedValue);
+    }
+    if (!selectedValue) return t('allLabel');
+    const date = new Date(selectedValue);
+    if (mode === 'date-time') {
+      return date.toLocaleString(constants_2.DEFAULT_LOCALE, {
+        year: 'numeric',
+        month: 'numeric',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: showSeconds ? '2-digit' : undefined
+      });
+    }
+    return date.toLocaleDateString(constants_2.DEFAULT_LOCALE, {
+      year: 'numeric',
+      month: 'numeric',
+      day: mode === 'date' ? 'numeric' : undefined
+    });
+  }, [mode, selectedValue, showSeconds, t, valueRender]);
   const clearValue = () => setSelectedValue(undefined);
+  const handleChangeValue = (0, react_1.useCallback)(value => {
+    setSelectedValue(value);
+    closeDroplist();
+  }, [closeDroplist, setSelectedValue]);
+  const navigationStartRef = (0, react_1.useRef)(null);
+  const focusNavigationStartItem = () => setTimeout(() => {
+    var _a;
+    return (_a = navigationStartRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+  }, 0);
   return (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, {
     content: (0, jsx_runtime_1.jsx)(calendar_1.Calendar, {
       mode: mode,
       size: constants_2.CALENDAR_SIZE_MAP[size],
       value: selectedValue,
-      onChangeValue: value => {
-        setSelectedValue(value);
-        closeDroplist();
-      },
-      navigationStartRef: element => element === null || element === void 0 ? void 0 : element.focus(),
-      onFocusLeave: closeDroplist
+      fitToContainer: false,
+      onChangeValue: handleChangeValue,
+      navigationStartRef: navigationStartRef,
+      onFocusLeave: closeDroplist,
+      showSeconds: showSeconds,
+      locale: constants_2.DEFAULT_LOCALE
     }),
+    placement: placement,
+    widthStrategy: widthStrategy,
     outsideClick: true,
     triggerRef: localRef,
     open: open,
@@ -79,7 +115,7 @@ function ChipChoiceDate(_a) {
       value: selectedValue,
       valueToRender: valueToRender,
       size: size,
-      onKeyDown: handleOnKeyDown()
+      onKeyDown: handleOnKeyDown(focusNavigationStartItem)
     }))
   });
 }

package/dist/cjs/components/ChipChoice/components/ChipChoiceDateRange.js

@@ -29,7 +29,7 @@ function defaultRangeFormatter(_ref) {
   } = _ref;
   if (!value || !value.length) return allLabel;
   const [from, to] = value;
-  return `${from.toLocaleDateString()} ${constants_1.DEFAULT_EMPTY_VALUE} ${to.toLocaleDateString()}`;
+  return `${from.toLocaleDateString(constants_2.DEFAULT_LOCALE)} ${constants_1.DEFAULT_EMPTY_VALUE} ${to.toLocaleDateString(constants_2.DEFAULT_LOCALE)}`;
 }
 function ChipChoiceDateRange(_a) {
   var {
@@ -71,6 +71,7 @@ function ChipChoiceDateRange(_a) {
         setSelectedValue(value);
         closeDroplist();
       },
+      locale: constants_2.DEFAULT_LOCALE,
       // bug with focus
       // navigationStartRef={element => element?.focus()}
       onFocusLeave: closeDroplist

package/dist/cjs/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/cjs/components/ChipChoice/components/ChipChoiceTime.js

@@ -0,0 +1,123 @@
+"use strict";
+
+var __rest = void 0 && (void 0).__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;
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChipChoiceTime = ChipChoiceTime;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const calendar_1 = require("@snack-uikit/calendar");
+const dropdown_1 = require("@snack-uikit/dropdown");
+const locale_1 = require("@snack-uikit/locale");
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("../../../constants");
+const constants_2 = require("../constants");
+const hooks_1 = require("../hooks");
+const ChipChoiceBase_1 = require("./ChipChoiceBase");
+const getStringTimeValue = (time, _ref) => {
+  let {
+    showSeconds,
+    locale
+  } = _ref;
+  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
+  });
+};
+function ChipChoiceTime(_a) {
+  var {
+      size = constants_1.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] = (0, utils_1.useValueControl)({
+    value,
+    defaultValue,
+    onChange
+  });
+  const localRef = (0, react_1.useRef)(null);
+  const [open, setOpen] = (0, react_1.useState)(false);
+  const handleOnKeyDown = (0, hooks_1.useHandleOnKeyDown)({
+    setOpen
+  });
+  const closeDroplist = (0, react_1.useCallback)(() => {
+    setOpen(false);
+    setTimeout(() => {
+      var _a;
+      return (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, 0);
+  }, []);
+  const {
+    t
+  } = (0, locale_1.useLocale)('Chips');
+  const valueToRender = (0, react_1.useMemo)(() => {
+    if (valueRender) {
+      return valueRender(selectedValue);
+    }
+    if (!selectedValue) return t('allLabel');
+    return getStringTimeValue(selectedValue, {
+      showSeconds,
+      locale: constants_2.DEFAULT_LOCALE
+    });
+  }, [selectedValue, showSeconds, t, valueRender]);
+  const clearValue = () => setSelectedValue(undefined);
+  const handleChangeValue = (0, react_1.useCallback)(value => {
+    setSelectedValue(value);
+    closeDroplist();
+  }, [closeDroplist, setSelectedValue]);
+  const navigationStartRef = (0, react_1.useRef)(null);
+  const focusNavigationStartItem = () => setTimeout(() => {
+    var _a;
+    return (_a = navigationStartRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+  }, 0);
+  return (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, {
+    content: (0, jsx_runtime_1.jsx)(calendar_1.TimePicker, {
+      size: constants_2.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": constants_1.CHIP_CHOICE_TEST_IDS.droplist,
+    children: (0, jsx_runtime_1.jsx)(ChipChoiceBase_1.ChipChoiceBase, Object.assign({}, rest, {
+      ref: localRef,
+      onClearButtonClick: clearValue,
+      value: selectedValue,
+      valueToRender: valueToRender,
+      size: size,
+      onKeyDown: handleOnKeyDown(focusNavigationStartItem)
+    }))
+  });
+}

package/dist/cjs/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/cjs/components/ChipChoice/components/index.js

@@ -26,4 +26,5 @@ __exportStar(require("./ChipChoiceCustom"), exports);
 __exportStar(require("./ChipChoiceSingle"), exports);
 __exportStar(require("./ChipChoiceMultiple"), exports);
 __exportStar(require("./ChipChoiceDate"), exports);
-__exportStar(require("./ChipChoiceDateRange"), exports);
+__exportStar(require("./ChipChoiceDateRange"), exports);
+__exportStar(require("./ChipChoiceTime"), exports);

package/dist/cjs/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/cjs/components/ChipChoice/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CHIP_CHOICE_TYPE = exports.DROPLIST_SIZE_MAP = exports.CALENDAR_SIZE_MAP = exports.BUTTON_CLEAR_VALUE_SIZE_MAP = void 0;
+exports.DEFAULT_LOCALE = exports.CHIP_CHOICE_TYPE = exports.DROPLIST_SIZE_MAP = exports.TIME_PICKER_SIZE_MAP = exports.CALENDAR_SIZE_MAP = exports.BUTTON_CLEAR_VALUE_SIZE_MAP = void 0;
 const constants_1 = require("../../constants");
 exports.BUTTON_CLEAR_VALUE_SIZE_MAP = {
   [constants_1.SIZE.Xs]: constants_1.BUTTON_SIZE.Xxs,
@@ -17,6 +17,12 @@ exports.CALENDAR_SIZE_MAP = {
   [constants_1.SIZE.M]: 'm',
   [constants_1.SIZE.L]: 'm'
 };
+exports.TIME_PICKER_SIZE_MAP = {
+  [constants_1.SIZE.Xs]: 's',
+  [constants_1.SIZE.S]: 's',
+  [constants_1.SIZE.M]: 'm',
+  [constants_1.SIZE.L]: 'l'
+};
 exports.DROPLIST_SIZE_MAP = {
   [constants_1.SIZE.Xs]: 's',
   [constants_1.SIZE.S]: 's',
@@ -26,7 +32,9 @@ exports.DROPLIST_SIZE_MAP = {
 exports.CHIP_CHOICE_TYPE = {
   Multiple: 'multiple',
   Date: 'date',
+  DateTime: 'date-time',
   DateRange: 'date-range',
   Single: 'single',
   Custom: 'custom'
-};
+};
+exports.DEFAULT_LOCALE = new Intl.Locale('ru-RU');

package/dist/cjs/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/cjs/components/ChipChoice/index.js

@@ -12,6 +12,7 @@ var ChipChoice;
   ChipChoice.Multiple = components_1.ChipChoiceMultiple;
   ChipChoice.Date = components_1.ChipChoiceDate;
   ChipChoice.DateRange = components_1.ChipChoiceDateRange;
+  ChipChoice.Time = components_1.ChipChoiceTime;
 })(ChipChoice || (exports.ChipChoice = ChipChoice = {}));
 var utils_1 = require("./utils");
 Object.defineProperty(exports, "isAccordionOption", {

package/dist/cjs/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/cjs/components/ChipChoiceRow/components/constants.js

@@ -10,6 +10,7 @@ exports.MAP_CHIP_TYPE_TO_COMPONENT = {
   [constants_1.CHIP_CHOICE_TYPE.Single]: ChipChoice_1.ChipChoice.Single,
   [constants_1.CHIP_CHOICE_TYPE.Multiple]: ChipChoice_1.ChipChoice.Multiple,
   [constants_1.CHIP_CHOICE_TYPE.Date]: ChipChoice_1.ChipChoice.Date,
+  [constants_1.CHIP_CHOICE_TYPE.DateTime]: ChipChoice_1.ChipChoice.Date,
   [constants_1.CHIP_CHOICE_TYPE.DateRange]: ChipChoice_1.ChipChoice.DateRange,
   [constants_1.CHIP_CHOICE_TYPE.Custom]: ChipChoice_1.ChipChoice.Custom
 };

package/dist/cjs/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/dist/esm/components/ChipChoice/components/ChipChoiceDate.d.ts

@@ -1,6 +1,10 @@
 import { ReactNode } from 'react';
 import { CalendarProps } from '@snack-uikit/calendar';
 import { ChipChoiceCommonProps } from '../types';
+type ChipChoiceDateWithSeconds = {
+    mode?: 'date-time';
+    showSeconds?: boolean;
+};
 export type ChipChoiceDateProps = ChipChoiceCommonProps & {
     /** Значение компонента */
     value?: Date;
@@ -11,5 +15,8 @@ export type ChipChoiceDateProps = ChipChoiceCommonProps & {
     /** Колбек формирующий строковое представление выбранного значения. Принимает выбранное значение */
     valueRender?(value?: Date): ReactNode;
     mode?: Exclude<CalendarProps['mode'], 'range'>;
-};
-export declare function ChipChoiceDate({ size, value, defaultValue, onChange, valueRender, dropDownClassName, mode, ...rest }: ChipChoiceDateProps): import("react/jsx-runtime").JSX.Element;
+} & (ChipChoiceDateWithSeconds | {
+    mode?: 'date' | 'month';
+});
+export declare function ChipChoiceDate({ size, value, defaultValue, onChange, valueRender, dropDownClassName, mode, placement, widthStrategy, ...rest }: ChipChoiceDateProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -10,18 +10,20 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
 import { Calendar } 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 { CALENDAR_SIZE_MAP } from '../constants';
+import { CALENDAR_SIZE_MAP, DEFAULT_LOCALE } from '../constants';
 import { useHandleOnKeyDown } from '../hooks';
 import { ChipChoiceBase } from './ChipChoiceBase';
 export function ChipChoiceDate(_a) {
-    var { size = SIZE.S, value, defaultValue, onChange, valueRender, dropDownClassName, mode = 'date' } = _a, rest = __rest(_a, ["size", "value", "defaultValue", "onChange", "valueRender", "dropDownClassName", "mode"]);
+    var _b;
+    var { size = SIZE.S, value, defaultValue, onChange, valueRender, dropDownClassName, mode = 'date', placement, widthStrategy } = _a, rest = __rest(_a, ["size", "value", "defaultValue", "onChange", "valueRender", "dropDownClassName", "mode", "placement", "widthStrategy"]);
     const [selectedValue, setSelectedValue] = useValueControl({ value, defaultValue, onChange });
+    const showSeconds = mode === 'date-time' ? ((_b = rest.showSeconds) !== null && _b !== void 0 ? _b : true) : undefined;
     const localRef = useRef(null);
     const [open, setOpen] = useState(false);
     const handleOnKeyDown = useHandleOnKeyDown({ setOpen });
@@ -30,12 +32,35 @@ export function ChipChoiceDate(_a) {
         setTimeout(() => { var _a; return (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
     }, []);
     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);
-    return (_jsx(Dropdown, { content: _jsx(Calendar, { mode: mode, size: CALENDAR_SIZE_MAP[size], value: selectedValue, onChangeValue: (value) => {
-                setSelectedValue(value);
-                closeDroplist();
-            }, navigationStartRef: element => element === null || element === void 0 ? void 0 : element.focus(), onFocusLeave: closeDroplist }), 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() })) }));
+    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(Calendar, { mode: mode, size: CALENDAR_SIZE_MAP[size], value: selectedValue, fitToContainer: false, onChangeValue: handleChangeValue, navigationStartRef: navigationStartRef, onFocusLeave: closeDroplist, showSeconds: showSeconds, locale: DEFAULT_LOCALE }), placement: placement, widthStrategy: widthStrategy, 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/ChipChoiceDateRange.js

@@ -16,14 +16,14 @@ import { Calendar } from '@snack-uikit/calendar';
 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 { ChipChoiceBase } from './ChipChoiceBase';
 function defaultRangeFormatter({ value, allLabel }) {
     if (!value || !value.length)
         return allLabel;
     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(_a) {
     var { size = SIZE.S, value, defaultValue, onChange, valueRender, dropDownClassName } = _a, rest = __rest(_a, ["size", "value", "defaultValue", "onChange", "valueRender", "dropDownClassName"]);
@@ -43,7 +43,7 @@ export function ChipChoiceDateRange(_a) {
     return (_jsx(Dropdown, { content: _jsx(Calendar, { mode: 'range', size: CALENDAR_SIZE_MAP[size], value: selectedValue, onChangeValue: value => {
                 setSelectedValue(value);
                 closeDroplist();
-            }, 
+            }, locale: DEFAULT_LOCALE, 
             // bug with focus
             // navigationStartRef={element => element?.focus()}
             onFocusLeave: closeDroplist }), outsideClick: true, triggerRef: localRef, open: open, "data-test-id": CHIP_CHOICE_TEST_IDS.droplist, onOpenChange: setOpen, className: dropDownClassName, children: _jsx(ChipChoiceBase, Object.assign({}, rest, { ref: localRef, onClearButtonClick: clearValue, value: selectedValue, valueToRender: valueToRender, size: size, onKeyDown: handleOnKeyDown() })) }));

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.18.0",
+  "version": "0.19.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,12 +36,12 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/button": "0.19.0",
-    "@snack-uikit/calendar": "0.10.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.20.0",
-    "@snack-uikit/loaders": "0.7.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": "8499829efa0c118b704de17411ae2328a024adb5"
+  "gitHead": "b7163c6f939105eb34cabec64c9e983ac7958c26"
 }

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}

package/src/components/ChipChoice/components/ChipChoiceTime.tsx

@@ -0,0 +1,125 @@
+import { ReactNode, useCallback, useMemo, useRef, useState } from 'react';
+
+import { TimePicker, TimePickerProps } 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 { ChipChoiceCommonProps } from '../types';
+import { ChipChoiceBase } from './ChipChoiceBase';
+
+const getStringTimeValue = (
+  time: TimePickerProps['value'],
+  { showSeconds, locale }: Pick<TimePickerProps, 'showSeconds'> & { locale: Intl.Locale },
+) => {
+  if (!time) {
+    return '';
+  }
+
+  const date = new Date();
+  date.setHours(time.hours ?? 0);
+  date.setMinutes(time.minutes ?? 0);
+  date.setSeconds(time.seconds ?? 0);
+
+  return date.toLocaleTimeString(locale, {
+    hour: 'numeric',
+    minute: 'numeric',
+    second: showSeconds ? 'numeric' : undefined,
+  });
+};
+
+type TimeValue = TimePickerProps['value'];
+
+export type ChipChoiceTimeProps = Omit<ChipChoiceCommonProps, 'widthStrategy'> &
+  Pick<TimePickerProps, 'value' | 'defaultValue' | 'showSeconds'> & {
+    /** Колбек смены значения */
+    onChange?(value: TimeValue): void;
+    /** Колбек формирующий строковое представление выбранного значения. Принимает выбранное значение */
+    valueRender?(value?: TimeValue): ReactNode;
+  };
+
+export function ChipChoiceTime({
+  size = SIZE.S,
+  value,
+  defaultValue,
+  onChange,
+  valueRender,
+  dropDownClassName,
+  showSeconds = true,
+  placement,
+  ...rest
+}: ChipChoiceTimeProps) {
+  const [selectedValue, setSelectedValue] = useValueControl<TimeValue>({ value, defaultValue, onChange });
+
+  const localRef = useRef<HTMLDivElement>(null);
+
+  const [open, setOpen] = useState<boolean>(false);
+  const handleOnKeyDown = useHandleOnKeyDown({ setOpen });
+
+  const closeDroplist = useCallback(() => {
+    setOpen(false);
+    setTimeout(() => localRef.current?.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: TimeValue) => {
+      setSelectedValue(value);
+      closeDroplist();
+    },
+    [closeDroplist, setSelectedValue],
+  );
+
+  const navigationStartRef = useRef<HTMLButtonElement>(null);
+  const focusNavigationStartItem = () => setTimeout(() => navigationStartRef.current?.focus(), 0);
+
+  return (
+    <Dropdown
+      content={
+        <TimePicker
+          size={TIME_PICKER_SIZE_MAP[size]}
+          value={selectedValue}
+          fitToContainer={false}
+          onChangeValue={handleChangeValue}
+          navigationStartRef={navigationStartRef}
+          onFocusLeave={closeDroplist}
+          showSeconds={showSeconds}
+        />
+      }
+      placement={placement}
+      widthStrategy='auto'
+      outsideClick
+      triggerRef={localRef}
+      open={open}
+      onOpenChange={setOpen}
+      className={dropDownClassName}
+      data-test-id={CHIP_CHOICE_TEST_IDS.droplist}
+    >
+      <ChipChoiceBase
+        {...rest}
+        ref={localRef}
+        onClearButtonClick={clearValue}
+        value={selectedValue}
+        valueToRender={valueToRender}
+        size={size}
+        onKeyDown={handleOnKeyDown(focusNavigationStartItem)}
+      />
+    </Dropdown>
+  );
+}

package/src/components/ChipChoice/components/index.ts

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

package/src/components/ChipChoice/constants.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 { BUTTON_SIZE, SIZE } from '../../constants';
@@ -18,6 +18,13 @@ export const CALENDAR_SIZE_MAP: Record<Size, CalendarProps['size']> = {
   [SIZE.L]: 'm',
 };
 
+export const TIME_PICKER_SIZE_MAP: Record<Size, TimePickerProps['size']> = {
+  [SIZE.Xs]: 's',
+  [SIZE.S]: 's',
+  [SIZE.M]: 'm',
+  [SIZE.L]: 'l',
+};
+
 export const DROPLIST_SIZE_MAP: Record<Size, DroplistProps['size']> = {
   [SIZE.Xs]: 's',
   [SIZE.S]: 's',
@@ -28,7 +35,10 @@ export const DROPLIST_SIZE_MAP: Record<Size, DroplistProps['size']> = {
 export const CHIP_CHOICE_TYPE = {
   Multiple: 'multiple',
   Date: 'date',
+  DateTime: 'date-time',
   DateRange: 'date-range',
   Single: 'single',
   Custom: 'custom',
 } as const;
+
+export const DEFAULT_LOCALE = new Intl.Locale('ru-RU');

package/src/components/ChipChoice/index.ts

@@ -7,11 +7,19 @@ import {
   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 namespace ChipChoice {
   export const Custom = ChipChoiceCustom;
@@ -19,6 +27,7 @@ export namespace ChipChoice {
   export const Multiple = ChipChoiceMultiple;
   export const Date = ChipChoiceDate;
   export const DateRange = ChipChoiceDateRange;
+  export const Time = ChipChoiceTime;
 }
 
 export { isAccordionOption, isBaseOption, isGroupOption, isGroupSelectOption, isNextListOption } from './utils';

package/src/components/ChipChoiceRow/components/constants.ts

@@ -5,6 +5,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/src/components/ChipChoiceRow/types.ts

@@ -21,6 +21,10 @@ 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;
@@ -35,6 +39,7 @@ export type ChipChoiceProps = {
   | ChipChoiceMultipleType
   | ChipChoiceSingleType
   | ChipChoiceDateType
+  | ChipChoiceDateTimeType
   | ChipChoiceDateRangeType
   | ChipChoiceCustomType
 );