@cloud-ru/uikit-product-mobile-chips 0.8.36 → 0.8.37

package/dist/esm/components/MobileChipChoice/components/ChipChoiceBase/styles.module.css

@@ -0,0 +1,427 @@
+.label,
+.value{
+  display:inline-flex;
+  align-items:center;
+}
+
+.choiceChip{
+  background-color:var(--sys-neutral-background1-level, #fdfdfd);
+  border-color:var(--sys-neutral-decor-default, #dde0ea);
+  cursor:pointer;
+  position:relative;
+  display:inline-flex;
+  align-items:center;
+  box-sizing:border-box;
+  width:-moz-max-content;
+  width:max-content;
+  min-width:-moz-max-content;
+  min-width:max-content;
+  margin:0;
+  padding:0;
+  text-decoration:none;
+  text-transform:none;
+  border-style:solid;
+  outline:0;
+  outline-offset:0;
+}
+.choiceChip .spinner{
+  display:inline-flex;
+}
+.choiceChip .icon{
+  display:inline-flex;
+}
+.choiceChip .icon svg{
+  width:var(--size-icon-container-s, 24px) !important;
+  height:var(--size-icon-container-s, 24px) !important;
+}
+.choiceChip .labelLayout{
+  display:inline-flex;
+  align-items:center;
+  min-width:0;
+}
+.choiceChip[data-size=xs]{
+  height:var(--size-chips-xs, 24px);
+  padding-left:var(--space-chips-container-padding-xs, 3px);
+  padding-right:var(--space-chips-container-padding-xs, 3px);
+  border-radius:var(--radius-chips-xs, 12px);
+  border-width:var(--border-width-chips-single, 1px);
+}
+.choiceChip[data-size=xs] .label{
+  font-family:var(--light-label-s-font-family, SB Sans Interface);
+  font-weight:var(--light-label-s-font-weight, Regular);
+  line-height:var(--light-label-s-line-height, 14px);
+  font-size:var(--light-label-s-font-size, 11px);
+  letter-spacing:var(--light-label-s-letter-spacing, 0px);
+  paragraph-spacing:var(--light-label-s-paragraph-spacing, 6.05px);
+}
+.choiceChip[data-size=xs] .labelLayout{
+  padding-left:var(--space-chips-label-layout-padding-xs, 4px);
+  padding-right:var(--space-chips-label-layout-padding-xs, 4px);
+  gap:var(--space-chips-label-layout-gap, 2px);
+}
+.choiceChip[data-size=s]{
+  height:var(--size-chips-s, 32px);
+  padding-left:var(--space-chips-container-padding-s, 3px);
+  padding-right:var(--space-chips-container-padding-s, 3px);
+  border-radius:var(--radius-chips-s, 16px);
+  border-width:var(--border-width-chips-single, 1px);
+}
+.choiceChip[data-size=s] .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);
+}
+.choiceChip[data-size=s] .labelLayout{
+  padding-left:var(--space-chips-label-layout-padding-s, 4px);
+  padding-right:var(--space-chips-label-layout-padding-s, 4px);
+  gap:var(--space-chips-label-layout-gap, 2px);
+}
+.choiceChip[data-size=m]{
+  height:var(--size-chips-m, 40px);
+  padding-left:var(--space-chips-container-padding-m, 7px);
+  padding-right:var(--space-chips-container-padding-m, 7px);
+  border-radius:var(--radius-chips-m, 20px);
+  border-width:var(--border-width-chips-single, 1px);
+}
+.choiceChip[data-size=m] .label{
+  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);
+  padding-right:var(--space-chips-label-layout-padding-m, 8px);
+  gap:var(--space-chips-label-layout-gap, 2px);
+}
+.choiceChip[data-size=l]{
+  height:var(--size-chips-l, 48px);
+  padding-left:var(--space-chips-container-padding-l, 11px);
+  padding-right:var(--space-chips-container-padding-l, 11px);
+  border-radius:var(--radius-chips-l, 24px);
+  border-width:var(--border-width-chips-single, 1px);
+}
+.choiceChip[data-size=l] .label{
+  font-family:var(--light-label-l-font-family, SB Sans Interface);
+  font-weight:var(--light-label-l-font-weight, Regular);
+  line-height:var(--light-label-l-line-height, 20px);
+  font-size:var(--light-label-l-font-size, 14px);
+  letter-spacing:var(--light-label-l-letter-spacing, 0px);
+  paragraph-spacing:var(--light-label-l-paragraph-spacing, 7.7px);
+}
+.choiceChip[data-size=l] .labelLayout{
+  padding-left:var(--space-chips-label-layout-padding-l, 12px);
+  padding-right:var(--space-chips-label-layout-padding-l, 12px);
+  gap:var(--space-chips-label-layout-gap, 2px);
+}
+.choiceChip .label,
+.choiceChip .value{
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+.choiceChip .icon{
+  color:var(--sys-neutral-text-light, #8b8e9b);
+}
+.choiceChip[data-size=xs] .value{
+  font-family:var(--sans-label-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-s-font-weight, Semibold);
+  line-height:var(--sans-label-s-line-height, 14px);
+  font-size:var(--sans-label-s-font-size, 11px);
+  letter-spacing:var(--sans-label-s-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-s-paragraph-spacing, 6.05px);
+}
+.choiceChip[data-size=s] .value{
+  font-family:var(--sans-label-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-m-font-weight, Semibold);
+  line-height:var(--sans-label-m-line-height, 16px);
+  font-size:var(--sans-label-m-font-size, 12px);
+  letter-spacing:var(--sans-label-m-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
+}
+.choiceChip[data-size=m] .value{
+  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=l] .value{
+  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:hover, .choiceChip:active, .choiceChip:focus-visible{
+  background-color:var(--sys-neutral-background2-level, #ffffff);
+  border-color:var(--sys-neutral-decor-hovered, #cfd2dc);
+}
+.choiceChip:hover .label, .choiceChip:active .label, .choiceChip:focus-visible .label{
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+.choiceChip:hover .value, .choiceChip:active .value, .choiceChip:focus-visible .value{
+  color:var(--sys-neutral-text-main, #41424e);
+}
+.choiceChip:focus-visible{
+  outline-width:var(--border-state-focus-s-border-width, 2px);
+  outline-style:var(--border-state-focus-s-border-style, solid);
+  outline-color:var(--border-state-focus-s-border-color, );
+  outline-color:var(--sys-available-complementary, #1c1c24);
+  outline-offset:var(--spacing-state-focus-offset, 2px);
+}
+.choiceChip[data-disabled]{
+  cursor:not-allowed;
+  background-color:var(--sys-neutral-background, #eeeff3);
+  border-color:var(--sys-neutral-decor-disabled, #e6e8ef);
+}
+.choiceChip[data-disabled] .label,
+.choiceChip[data-disabled] .value{
+  color:var(--sys-neutral-text-light, #8b8e9b);
+}
+.choiceChip[data-loading]{
+  background-color:var(--sys-neutral-background, #eeeff3);
+  border-color:var(--sys-neutral-decor-activated, #b6bac7);
+  cursor:progress;
+}
+.choiceChip[data-loading] true .spinner{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+}
+.choiceChip[data-loading] .label,
+.choiceChip[data-loading] .value{
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+
+.triggerClassName{
+  --offset:var(--space-drop-list-drop-offset, 4px);
+}
+
+.autoApplyFooter{
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  gap:8px;
+}
+
+.label{
+  display:inline-flex;
+  flex-grow:1;
+  align-items:center;
+  white-space:nowrap;
+}
+
+.value{
+  display:inline-flex;
+  align-items:center;
+  min-width:0;
+}
+
+.choiceChip{
+  cursor:pointer;
+  position:relative;
+  display:inline-flex;
+  align-items:center;
+  box-sizing:border-box;
+  width:-moz-max-content;
+  width:max-content;
+  min-width:-moz-max-content;
+  min-width:max-content;
+  margin:0;
+  padding:0;
+  text-decoration:none;
+  text-transform:none;
+  border-style:solid;
+  outline:0;
+  outline-offset:0;
+  background-color:var(--sys-neutral-background1-level, #fdfdfd);
+  border-color:var(--sys-neutral-decor-default, #dde0ea);
+  min-width:0;
+}
+.choiceChip .spinner{
+  display:inline-flex;
+}
+.choiceChip .icon{
+  display:inline-flex;
+}
+.choiceChip .icon svg{
+  width:var(--size-icon-container-s, 24px) !important;
+  height:var(--size-icon-container-s, 24px) !important;
+}
+.choiceChip .labelLayout{
+  display:inline-flex;
+  align-items:center;
+  min-width:0;
+}
+.choiceChip[data-size=xs]{
+  height:var(--size-chips-xs, 24px);
+  padding-left:var(--space-chips-container-padding-xs, 3px);
+  padding-right:var(--space-chips-container-padding-xs, 3px);
+  border-radius:var(--radius-chips-xs, 12px);
+  border-width:var(--border-width-chips-single, 1px);
+}
+.choiceChip[data-size=xs] .label{
+  font-family:var(--light-label-s-font-family, SB Sans Interface);
+  font-weight:var(--light-label-s-font-weight, Regular);
+  line-height:var(--light-label-s-line-height, 14px);
+  font-size:var(--light-label-s-font-size, 11px);
+  letter-spacing:var(--light-label-s-letter-spacing, 0px);
+  paragraph-spacing:var(--light-label-s-paragraph-spacing, 6.05px);
+}
+.choiceChip[data-size=xs] .labelLayout{
+  padding-left:var(--space-chips-label-layout-padding-xs, 4px);
+  padding-right:var(--space-chips-label-layout-padding-xs, 4px);
+  gap:var(--space-chips-label-layout-gap, 2px);
+}
+.choiceChip[data-size=s]{
+  height:var(--size-chips-s, 32px);
+  padding-left:var(--space-chips-container-padding-s, 3px);
+  padding-right:var(--space-chips-container-padding-s, 3px);
+  border-radius:var(--radius-chips-s, 16px);
+  border-width:var(--border-width-chips-single, 1px);
+}
+.choiceChip[data-size=s] .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);
+}
+.choiceChip[data-size=s] .labelLayout{
+  padding-left:var(--space-chips-label-layout-padding-s, 4px);
+  padding-right:var(--space-chips-label-layout-padding-s, 4px);
+  gap:var(--space-chips-label-layout-gap, 2px);
+}
+.choiceChip[data-size=m]{
+  height:var(--size-chips-m, 40px);
+  padding-left:var(--space-chips-container-padding-m, 7px);
+  padding-right:var(--space-chips-container-padding-m, 7px);
+  border-radius:var(--radius-chips-m, 20px);
+  border-width:var(--border-width-chips-single, 1px);
+}
+.choiceChip[data-size=m] .label{
+  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);
+  padding-right:var(--space-chips-label-layout-padding-m, 8px);
+  gap:var(--space-chips-label-layout-gap, 2px);
+}
+.choiceChip[data-size=l]{
+  height:var(--size-chips-l, 48px);
+  padding-left:var(--space-chips-container-padding-l, 11px);
+  padding-right:var(--space-chips-container-padding-l, 11px);
+  border-radius:var(--radius-chips-l, 24px);
+  border-width:var(--border-width-chips-single, 1px);
+}
+.choiceChip[data-size=l] .label{
+  font-family:var(--light-label-l-font-family, SB Sans Interface);
+  font-weight:var(--light-label-l-font-weight, Regular);
+  line-height:var(--light-label-l-line-height, 20px);
+  font-size:var(--light-label-l-font-size, 14px);
+  letter-spacing:var(--light-label-l-letter-spacing, 0px);
+  paragraph-spacing:var(--light-label-l-paragraph-spacing, 7.7px);
+}
+.choiceChip[data-size=l] .labelLayout{
+  padding-left:var(--space-chips-label-layout-padding-l, 12px);
+  padding-right:var(--space-chips-label-layout-padding-l, 12px);
+  gap:var(--space-chips-label-layout-gap, 2px);
+}
+.choiceChip .label,
+.choiceChip .value{
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+.choiceChip .icon{
+  color:var(--sys-neutral-text-light, #8b8e9b);
+}
+.choiceChip[data-size=xs] .value{
+  font-family:var(--sans-label-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-s-font-weight, Semibold);
+  line-height:var(--sans-label-s-line-height, 14px);
+  font-size:var(--sans-label-s-font-size, 11px);
+  letter-spacing:var(--sans-label-s-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-s-paragraph-spacing, 6.05px);
+}
+.choiceChip[data-size=s] .value{
+  font-family:var(--sans-label-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-m-font-weight, Semibold);
+  line-height:var(--sans-label-m-line-height, 16px);
+  font-size:var(--sans-label-m-font-size, 12px);
+  letter-spacing:var(--sans-label-m-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
+}
+.choiceChip[data-size=m] .value{
+  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=l] .value{
+  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:hover, .choiceChip:active, .choiceChip:focus-visible{
+  background-color:var(--sys-neutral-background2-level, #ffffff);
+  border-color:var(--sys-neutral-decor-hovered, #cfd2dc);
+}
+.choiceChip:hover .label, .choiceChip:active .label, .choiceChip:focus-visible .label{
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+.choiceChip:hover .value, .choiceChip:active .value, .choiceChip:focus-visible .value{
+  color:var(--sys-neutral-text-main, #41424e);
+}
+.choiceChip:focus-visible{
+  outline-width:var(--border-state-focus-s-border-width, 2px);
+  outline-style:var(--border-state-focus-s-border-style, solid);
+  outline-color:var(--border-state-focus-s-border-color, );
+  outline-color:var(--sys-available-complementary, #1c1c24);
+  outline-offset:var(--spacing-state-focus-offset, 2px);
+}
+.choiceChip[data-disabled]{
+  cursor:not-allowed;
+  background-color:var(--sys-neutral-background, #eeeff3);
+  border-color:var(--sys-neutral-decor-disabled, #e6e8ef);
+}
+.choiceChip[data-disabled] .label,
+.choiceChip[data-disabled] .value{
+  color:var(--sys-neutral-text-light, #8b8e9b);
+}
+.choiceChip[data-loading]{
+  background-color:var(--sys-neutral-background, #eeeff3);
+  border-color:var(--sys-neutral-decor-activated, #b6bac7);
+  cursor:progress;
+}
+.choiceChip[data-loading]:not([data-label]) .value{
+  opacity:var(--opacity-a0, 0);
+}
+.choiceChip[data-loading]:not([data-label]) .spinner{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+}
+.choiceChip[data-loading] .label,
+.choiceChip[data-loading] .value{
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+
+.triggerClassName{
+  --offset:var(--space-drop-list-drop-offset, 4px);
+}

package/dist/esm/components/MobileChipChoice/components/MobileChipChoiceCustom.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+import { ChipChoiceCommonProps } from '../types';
+type AnyType = any;
+export type CustomContentRenderProps<T = AnyType> = {
+    closeDroplist(): void;
+    value: T;
+    onChange?(value: T): void;
+};
+export type MobileChipChoiceCustomProps = ChipChoiceCommonProps & {
+    /** Отображаемое значение */
+    valueRender?(value: AnyType): ReactNode;
+    /** Фактическое значение. Используется для отображения кнопки очистки, если свойство <strong>showClearButton=true</strong> */
+    value?: AnyType;
+    onChange?(value: AnyType): void;
+    /** Контент выпадающего меню
+     <br>
+     <br> Принимает <strong>ReactNode</strong>
+     <br> Или функцию с аргументами:
+     <br> <strong>handleDroplistItemKeyDown</strong>: Обработчик нажатия клавиши на элемент выпадающего меню
+     <br> <strong>closeDroplist</strong>: Метод для закрытия выпадающего меню
+     */
+    content?: (props: CustomContentRenderProps) => ReactNode;
+};
+export declare function MobileChipChoiceCustom({ size, value: valueProp, onChange: onChangeProp, content, valueRender, onClearButtonClick, open: openProp, onOpenChange, ...rest }: MobileChipChoiceCustomProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/MobileChipChoice/components/MobileChipChoiceCustom.js

@@ -0,0 +1,35 @@
+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, useRef } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+import { MobileDropdown } from '@sbercloud/uikit-product-mobile-dropdown';
+import { useValueControl } from '@snack-uikit/utils';
+import { CHIP_CHOICE_TEST_IDS, SIZE } from '../../../constants';
+import { useHandleOnKeyDown } from '../hooks';
+import { ChipChoiceBase } from './ChipChoiceBase';
+export function MobileChipChoiceCustom(_a) {
+    var _b;
+    var { size = SIZE.S, value: valueProp, onChange: onChangeProp, content, valueRender, onClearButtonClick, open: openProp, onOpenChange } = _a, rest = __rest(_a, ["size", "value", "onChange", "content", "valueRender", "onClearButtonClick", "open", "onOpenChange"]);
+    const localRef = useRef(null);
+    const [value, setValue] = useValueControl({
+        value: valueProp,
+        onChange: onChangeProp,
+    });
+    const [open, setOpen] = useUncontrolledProp(openProp, false, onOpenChange);
+    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);
+    }, [setOpen]);
+    return (_jsx(MobileDropdown, { open: open, onOpenChange: setOpen, "data-test-id": CHIP_CHOICE_TEST_IDS.droplist, content: typeof content === 'function' ? content({ closeDroplist, value, onChange: setValue }) : content, children: _jsx(ChipChoiceBase, Object.assign({}, rest, { valueToRender: (_b = valueRender === null || valueRender === void 0 ? void 0 : valueRender(value)) !== null && _b !== void 0 ? _b : value, onClearButtonClick: onClearButtonClick, ref: localRef, value: value, size: size, onKeyDown: handleOnKeyDown() })) }));
+}

package/dist/esm/components/MobileChipChoice/components/MobileChipChoiceDate.d.ts

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

package/dist/esm/components/MobileChipChoice/components/MobileChipChoiceDate.js

@@ -0,0 +1,67 @@
+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 } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+import { useLocale } from '@sbercloud/uikit-product-locale';
+import { MobileDropdown } from '@sbercloud/uikit-product-mobile-dropdown';
+import { Calendar } from '@snack-uikit/calendar';
+import { Scroll } from '@snack-uikit/scroll';
+import { useValueControl } from '@snack-uikit/utils';
+import { CHIP_CHOICE_TEST_IDS, SIZE } from '../../../constants';
+import { DEFAULT_LOCALE } from '../constants';
+import { useHandleOnKeyDown } from '../hooks';
+import { ChipChoiceBase } from './ChipChoiceBase';
+import styles from './styles.module.css';
+export function MobileChipChoiceDate(_a) {
+    var _b;
+    var { size = SIZE.S, value, defaultValue, onChange, valueRender, mode = 'date', onClearButtonClick, open: openProp, onOpenChange } = _a, rest = __rest(_a, ["size", "value", "defaultValue", "onChange", "valueRender", "mode", "onClearButtonClick", "open", "onOpenChange"]);
+    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] = useUncontrolledProp(openProp, false, onOpenChange);
+    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);
+    }, [setOpen]);
+    const { t } = useLocale('Chips');
+    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 handleChangeValue = useCallback((value) => {
+        setSelectedValue(value);
+        closeDroplist();
+    }, [closeDroplist, setSelectedValue]);
+    const navigationStartRef = useRef(null);
+    return (_jsx(MobileDropdown, { content: _jsx(Scroll, { className: mode === 'date-time' ? styles.dateTimeWrapper : styles.dateWrapper, barHideStrategy: 'never', children: _jsx(Calendar, { mode: mode, size: 'l', value: selectedValue, onChangeValue: handleChangeValue, navigationStartRef: navigationStartRef, onFocusLeave: closeDroplist, showSeconds: showSeconds, locale: DEFAULT_LOCALE }) }), open: open, onOpenChange: setOpen, "data-test-id": CHIP_CHOICE_TEST_IDS.droplist, children: _jsx(ChipChoiceBase, Object.assign({}, rest, { ref: localRef, onClearButtonClick: onClearButtonClick, value: selectedValue, valueToRender: valueToRender, size: size, onKeyDown: handleOnKeyDown() })) }));
+}

package/dist/esm/components/MobileChipChoice/components/MobileChipChoiceDateRange.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { ChipChoiceCommonProps } from '../types';
+type Range = [Date, Date];
+export type MobileChipChoiceDateRangeProps = ChipChoiceCommonProps & {
+    /** Значение компонента */
+    value?: Range;
+    /** Значение компонента по умолчанию */
+    defaultValue?: Range;
+    /** Колбек смены значения */
+    onChange?(value: Range): void;
+    /** Колбек формирующий строковое представление выбранного значения. Принимает массив выбранных значений */
+    valueRender?(value?: Range): ReactNode;
+};
+export declare function MobileChipChoiceDateRange({ size, value, defaultValue, onChange, valueRender, onClearButtonClick, open: openProp, onOpenChange, ...rest }: MobileChipChoiceDateRangeProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/MobileChipChoice/components/MobileChipChoiceDateRange.js

@@ -0,0 +1,46 @@
+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, useRef } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+import { useLocale } from '@sbercloud/uikit-product-locale';
+import { MobileDropdown } from '@sbercloud/uikit-product-mobile-dropdown';
+import { Calendar } from '@snack-uikit/calendar';
+import { CHIP_CHOICE_TEST_IDS, DEFAULT_EMPTY_VALUE, SIZE } from '../../../constants';
+import { useHandleOnKeyDown } from '../hooks';
+import { ChipChoiceBase } from './ChipChoiceBase';
+import styles from './styles.module.css';
+function defaultRangeFormatter({ value, allLabel }) {
+    if (!value || !value.length)
+        return allLabel;
+    const [from, to] = value;
+    return `${from.toLocaleDateString()} ${DEFAULT_EMPTY_VALUE} ${to.toLocaleDateString()}`;
+}
+export function MobileChipChoiceDateRange(_a) {
+    var { size = SIZE.S, value, defaultValue, onChange, valueRender, onClearButtonClick, open: openProp, onOpenChange } = _a, rest = __rest(_a, ["size", "value", "defaultValue", "onChange", "valueRender", "onClearButtonClick", "open", "onOpenChange"]);
+    const [selectedValue, setSelectedValue] = useUncontrolledProp(value, defaultValue, onChange);
+    const { t } = useLocale('Chips');
+    const valueToRender = valueRender
+        ? valueRender(selectedValue)
+        : defaultRangeFormatter({ value: selectedValue, allLabel: t('allLabel') });
+    const localRef = useRef(null);
+    const [open, setOpen] = useUncontrolledProp(openProp, false, onOpenChange);
+    const closeDroplist = useCallback(() => {
+        setOpen(false);
+        setTimeout(() => { var _a; return (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
+    }, [setOpen]);
+    const handleOnKeyDown = useHandleOnKeyDown({ setOpen });
+    return (_jsx(MobileDropdown, { content: _jsx("div", { className: styles.dateWrapper, children: _jsx(Calendar, { mode: 'range', size: 'l', value: selectedValue, onChangeValue: value => {
+                    setSelectedValue(value);
+                    closeDroplist();
+                }, onFocusLeave: closeDroplist }) }), open: open, "data-test-id": CHIP_CHOICE_TEST_IDS.droplist, onOpenChange: setOpen, children: _jsx(ChipChoiceBase, Object.assign({}, rest, { ref: localRef, onClearButtonClick: onClearButtonClick, value: selectedValue, valueToRender: valueToRender, size: size, onKeyDown: handleOnKeyDown() })) }));
+}

package/dist/esm/components/MobileChipChoice/components/MobileChipChoiceMultiple.d.ts

@@ -0,0 +1,8 @@
+import { ContentRenderProps, MobileChipChoiceMultipleProps } from '../types';
+import { FlattenOption } from '../utils';
+export type ChipChoiceMultipleValueFormatterProps<T extends ContentRenderProps = ContentRenderProps> = {
+    value: FlattenOption<T>[];
+    total: number;
+    allLabel: string;
+};
+export declare function MobileChipChoiceMultiple<T extends ContentRenderProps = ContentRenderProps>({ value: valueProp, defaultValue, options, onChange: onChangeProp, valueRender, size, label, searchable: searchableProp, contentRender, onClearButtonClick, open: openProp, onOpenChange, virtualized, disableFuzzySearch, autoApply, onApprove, onCancel, ...rest }: MobileChipChoiceMultipleProps<T>): import("react/jsx-runtime").JSX.Element;