@snack-uikit/chips 0.17.0 → 0.19.0

package/CHANGELOG.md

@@ -3,6 +3,34 @@
 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)
+
+
+### Features
+
+* **FF-5782:** sass use/forward approach ([3e53869](https://github.com/cloud-ru-tech/snack-uikit/commit/3e53869ace864a7718e434b7f410c15dbd911cd5))
+
+
+
+
+
 # 0.17.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/ChipChoiceBase/styles.module.css

@@ -290,12 +290,12 @@
   border-width:var(--border-width-chips-single, 1px);
 }
 .choiceChip[data-size=m] .label{
-  font-family:var(--light-label-m-font-family, SB Sans Interface);
-  font-weight:var(--light-label-m-font-weight, Regular);
-  line-height:var(--light-label-m-line-height, 16px);
-  font-size:var(--light-label-m-font-size, 12px);
-  letter-spacing:var(--light-label-m-letter-spacing, 0px);
-  paragraph-spacing:var(--light-label-m-paragraph-spacing, 6.6px);
+  font-family:var(--sans-label-l-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-l-font-weight, Semibold);
+  line-height:var(--sans-label-l-line-height, 20px);
+  font-size:var(--sans-label-l-font-size, 14px);
+  letter-spacing:var(--sans-label-l-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
 }
 .choiceChip[data-size=m] .labelLayout{
   padding-left:var(--space-chips-label-layout-padding-m, 8px);

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/ChipChoiceBase/styles.module.css

@@ -290,12 +290,12 @@
   border-width:var(--border-width-chips-single, 1px);
 }
 .choiceChip[data-size=m] .label{
-  font-family:var(--light-label-m-font-family, SB Sans Interface);
-  font-weight:var(--light-label-m-font-weight, Regular);
-  line-height:var(--light-label-m-line-height, 16px);
-  font-size:var(--light-label-m-font-size, 12px);
-  letter-spacing:var(--light-label-m-letter-spacing, 0px);
-  paragraph-spacing:var(--light-label-m-paragraph-spacing, 6.6px);
+  font-family:var(--sans-label-l-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-l-font-weight, Semibold);
+  line-height:var(--sans-label-l-line-height, 20px);
+  font-size:var(--sans-label-l-font-size, 14px);
+  letter-spacing:var(--sans-label-l-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
 }
 .choiceChip[data-size=m] .labelLayout{
   padding-left:var(--space-chips-label-layout-padding-m, 8px);

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() })) }));