@snack-uikit/chips 0.8.5-preview-85c5f47b.0

package/dist/components/ChipChoice/components/ChipChoiceCustom/styles.module.css

@@ -0,0 +1,402 @@
+.label, .value{
+  display:inline-flex;
+  align-items:center;
+}
+
+.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, #f9f9f9);
+  border-color:var(--sys-neutral-decor-default, #dedede);
+}
+.choiceChip .spinner{
+  display:inline-flex;
+}
+.choiceChip .icon{
+  display:inline-flex;
+}
+.choiceChip .icon svg{
+  width:var(--dimension-3m, 24px) !important;
+  height:var(--dimension-3m, 24px) !important;
+}
+.choiceChip .labelLayout{
+  display:inline-flex;
+  align-items:center;
+}
+.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, -0.1px);
+  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, -0.1px);
+  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(--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, -0.1px);
+  paragraph-spacing:var(--light-label-m-paragraph-spacing, 6.6px);
+}
+.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, -0.1px);
+  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, #565656);
+}
+.choiceChip .icon{
+  color:var(--sys-neutral-text-light, #898989);
+}
+.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, -0.1px);
+  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, -0.1px);
+  paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
+}
+.choiceChip[data-size=m] .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, -0.1px);
+  paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
+}
+.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, -0.1px);
+  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
+}
+.choiceChip:hover, .choiceChip:active, .choiceChip:focus-visible{
+  background-color:var(--sys-neutral-background2-level, #fdfdfd);
+  border-color:var(--sys-neutral-decor-hovered, #d2d2d2);
+}
+.choiceChip:hover .label, .choiceChip:active .label, .choiceChip:focus-visible .label{
+  color:var(--sys-neutral-text-support, #565656);
+}
+.choiceChip:hover .value, .choiceChip:active .value, .choiceChip:focus-visible .value{
+  color:var(--sys-neutral-text-main, #333333);
+}
+.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, #131313);
+  outline-offset:var(--spacing-state-focus-offset, 2px);
+}
+.choiceChip[data-disabled]{
+  cursor:not-allowed;
+  background-color:var(--sys-neutral-background, #f0f0f0);
+  border-color:var(--sys-neutral-decor-disabled, #e7e7e7);
+}
+.choiceChip[data-disabled] .label, .choiceChip[data-disabled] .value{
+  color:var(--sys-neutral-text-light, #898989);
+}
+.choiceChip[data-loading]{
+  cursor:progress;
+  background-color:var(--sys-neutral-background, #f0f0f0);
+  border-color:var(--sys-neutral-decor-activated, #b8b8b8);
+}
+.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, #565656);
+}
+
+.triggerClassName{
+  --offset:calc(var(--border-state-focus-s-border-width, 2px) + var(--space-drop-list-drop-offset, 4px));
+}
+
+.label, .value{
+  display:inline-flex;
+  align-items:center;
+}
+
+.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, #f9f9f9);
+  border-color:var(--sys-neutral-decor-default, #dedede);
+}
+.choiceChip .spinner{
+  display:inline-flex;
+}
+.choiceChip .icon{
+  display:inline-flex;
+}
+.choiceChip .icon svg{
+  width:var(--dimension-3m, 24px) !important;
+  height:var(--dimension-3m, 24px) !important;
+}
+.choiceChip .labelLayout{
+  display:inline-flex;
+  align-items:center;
+}
+.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, -0.1px);
+  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, -0.1px);
+  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(--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, -0.1px);
+  paragraph-spacing:var(--light-label-m-paragraph-spacing, 6.6px);
+}
+.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, -0.1px);
+  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, #565656);
+}
+.choiceChip .icon{
+  color:var(--sys-neutral-text-light, #898989);
+}
+.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, -0.1px);
+  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, -0.1px);
+  paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
+}
+.choiceChip[data-size=m] .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, -0.1px);
+  paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
+}
+.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, -0.1px);
+  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
+}
+.choiceChip:hover, .choiceChip:active, .choiceChip:focus-visible{
+  background-color:var(--sys-neutral-background2-level, #fdfdfd);
+  border-color:var(--sys-neutral-decor-hovered, #d2d2d2);
+}
+.choiceChip:hover .label, .choiceChip:active .label, .choiceChip:focus-visible .label{
+  color:var(--sys-neutral-text-support, #565656);
+}
+.choiceChip:hover .value, .choiceChip:active .value, .choiceChip:focus-visible .value{
+  color:var(--sys-neutral-text-main, #333333);
+}
+.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, #131313);
+  outline-offset:var(--spacing-state-focus-offset, 2px);
+}
+.choiceChip[data-disabled]{
+  cursor:not-allowed;
+  background-color:var(--sys-neutral-background, #f0f0f0);
+  border-color:var(--sys-neutral-decor-disabled, #e7e7e7);
+}
+.choiceChip[data-disabled] .label, .choiceChip[data-disabled] .value{
+  color:var(--sys-neutral-text-light, #898989);
+}
+.choiceChip[data-loading]{
+  cursor:progress;
+  background-color:var(--sys-neutral-background, #f0f0f0);
+  border-color:var(--sys-neutral-decor-activated, #b8b8b8);
+}
+.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, #565656);
+}
+
+.triggerClassName{
+  --offset:calc(var(--border-state-focus-s-border-width, 2px) + var(--space-drop-list-drop-offset, 4px));
+}

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

@@ -0,0 +1,12 @@
+import { ChipChoiceCommonProps } from '../types';
+export type ChipChoiceDateProps = ChipChoiceCommonProps & {
+    /** Значение компонента */
+    value?: Date;
+    /** Значение компонента по-умолчанию */
+    defaultValue?: Date;
+    /** Колбек смены значения */
+    onChange?(value: Date): void;
+    /** Колбек формирующий строковое представление выбранного значения. Принимает выбранное значение */
+    valueFormatter?(value?: Date): string;
+};
+export declare function ChipChoiceDate({ size, value, defaultValue, onChange, valueFormatter, ...rest }: ChipChoiceDateProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,29 @@
+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 { useUncontrolledProp } from 'uncontrollable';
+import { Calendar } from '@snack-uikit/calendar';
+import { DEFAULT_EMPTY_VALUE, Size } from '../../../constants';
+import { CALENDAR_SIZE_MAP } from '../constants';
+import { ChipChoiceCustom } from './ChipChoiceCustom';
+export function ChipChoiceDate(_a) {
+    var { size = Size.S, value, defaultValue, onChange, valueFormatter } = _a, rest = __rest(_a, ["size", "value", "defaultValue", "onChange", "valueFormatter"]);
+    const [selectedValue, setSelectedValue] = useUncontrolledProp(value, defaultValue, onChange);
+    const valueToRender = valueFormatter
+        ? valueFormatter(selectedValue)
+        : (selectedValue && new Date(selectedValue).toLocaleDateString()) || DEFAULT_EMPTY_VALUE;
+    const clearValue = () => setSelectedValue(undefined);
+    return (_jsx(ChipChoiceCustom, Object.assign({ onClearButtonClick: clearValue, value: selectedValue, valueToRender: valueToRender, size: size }, rest, { children: ({ closeDroplist }) => (_jsx(Calendar, { mode: Calendar.modes.Date, 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 })) })));
+}

package/dist/components/ChipChoice/components/ChipChoiceDateRange.d.ts

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

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

@@ -0,0 +1,36 @@
+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 { useUncontrolledProp } from 'uncontrollable';
+import { Calendar } from '@snack-uikit/calendar';
+import { DEFAULT_EMPTY_VALUE, Size } from '../../../constants';
+import { CALENDAR_SIZE_MAP } from '../constants';
+import { ChipChoiceCustom } from './ChipChoiceCustom';
+function defaultRangeFormatter(value) {
+    if (!value || !value.length)
+        return DEFAULT_EMPTY_VALUE;
+    const [from, to] = value;
+    return `${from.toLocaleDateString()} ${DEFAULT_EMPTY_VALUE} ${to.toLocaleDateString()}`;
+}
+export function ChipChoiceDateRange(_a) {
+    var { size = Size.S, value, defaultValue, onChange, valueFormatter } = _a, rest = __rest(_a, ["size", "value", "defaultValue", "onChange", "valueFormatter"]);
+    const [selectedValue, setSelectedValue] = useUncontrolledProp(value, defaultValue, onChange);
+    const valueToRender = valueFormatter ? valueFormatter(selectedValue) : defaultRangeFormatter(selectedValue);
+    const clearValue = () => setSelectedValue(undefined);
+    return (_jsx(ChipChoiceCustom, Object.assign({ value: selectedValue, valueToRender: valueToRender, onClearButtonClick: clearValue, size: size }, rest, { children: ({ closeDroplist }) => (_jsx(Calendar, { mode: Calendar.modes.Range, size: CALENDAR_SIZE_MAP[size], value: selectedValue, onChangeValue: range => {
+                setSelectedValue(range);
+                closeDroplist();
+            }, 
+            // bug with focus
+            // navigationStartRef={element => element?.focus()}
+            onFocusLeave: closeDroplist })) })));
+}

package/dist/components/ChipChoice/components/ChipChoiceMulti.d.ts

@@ -0,0 +1,14 @@
+import { ChipChoiceCommonProps, FilterOption } from '../types';
+export type ChipChoiceMultiProps = ChipChoiceCommonProps & {
+    /** Массив опций */
+    options: FilterOption[];
+    /** Значение компонента */
+    value?: string[];
+    /** Значение компонента по умолчанию */
+    defaultValue?: string[];
+    /** Колбек смены значения */
+    onChange?(value: string[]): void;
+    /** Колбек формирующий строковое представление выбранного значения. Принимает массив выбранных значений. По умолчанию для отображения используется кол-во выбранных значений. */
+    valueFormatter?(options: FilterOption[]): string;
+};
+export declare function ChipChoiceMulti({ value, defaultValue, options, onChange, valueFormatter, size, 'data-test-id': dataTestId, ...rest }: ChipChoiceMultiProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ChipChoice/components/ChipChoiceMulti.js

@@ -0,0 +1,42 @@
+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 { createElement as _createElement } from "react";
+import { useMemo } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+import { Droplist } from '@snack-uikit/droplist';
+import { Size } from '../../../constants';
+import { defaultMultiValueLabelFormatter, normalizeValueForMultiChoice } from '../utils';
+import { ChipChoiceCustom } from './ChipChoiceCustom';
+export function ChipChoiceMulti(_a) {
+    var { value, defaultValue, options, onChange, valueFormatter, size = Size.S, 'data-test-id': dataTestId } = _a, rest = __rest(_a, ["value", "defaultValue", "options", "onChange", "valueFormatter", "size", 'data-test-id']);
+    const [selectedValue, setSelectedValue] = useUncontrolledProp(normalizeValueForMultiChoice(options, value), normalizeValueForMultiChoice(options, defaultValue) || [], onChange);
+    const selectedOptions = useMemo(() => options.filter(({ value }) => selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.includes(value)), [options, selectedValue]);
+    const valueToRender = valueFormatter
+        ? valueFormatter(selectedOptions)
+        : defaultMultiValueLabelFormatter(selectedOptions, options.length);
+    const clearValue = () => setSelectedValue([]);
+    return (_jsx(ChipChoiceCustom, Object.assign({ size: size, onClearButtonClick: clearValue, valueToRender: valueToRender, value: selectedValue, "data-test-id": dataTestId }, rest, { children: ({ handleDroplistItemKeyDown }) => options.map((_a) => {
+            var { label, value } = _a, rest = __rest(_a, ["label", "value"]);
+            const selected = selectedValue || [];
+            const checked = selected.includes(value);
+            const onChangeHandler = () => {
+                if (checked) {
+                    setSelectedValue(selected.filter(selected => selected !== value));
+                }
+                else {
+                    setSelectedValue([...selected, value]);
+                }
+            };
+            return (_createElement(Droplist.ItemMultiple, Object.assign({}, rest, { key: value, option: label, checked: checked, onChange: onChangeHandler, onKeyDown: handleDroplistItemKeyDown, "data-test-id": dataTestId && `${dataTestId}__option` })));
+        }) })));
+}

package/dist/components/ChipChoice/components/ChipChoiceSingle.d.ts

@@ -0,0 +1,14 @@
+import { ChipChoiceCommonProps, FilterOption } from '../types';
+export type ChipChoiceSingleProps = ChipChoiceCommonProps & {
+    /** Массив опций */
+    options: FilterOption[];
+    /** Значение компонента */
+    value?: string;
+    /** Значение компонента по умолчанию */
+    defaultValue?: string;
+    /** Колбек смены значения */
+    onChange?(value: string): void;
+    /** Колбек формирующий строковое представление выбранного значения. Принимает выбранное значение. По умолчанию для отображения используется FilterOption.label */
+    valueFormatter?(option?: FilterOption): string;
+};
+export declare function ChipChoiceSingle({ value, defaultValue, options, onChange, valueFormatter, size, 'data-test-id': dataTestId, ...rest }: ChipChoiceSingleProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ChipChoice/components/ChipChoiceSingle.js

@@ -0,0 +1,34 @@
+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 { createElement as _createElement } from "react";
+import { useMemo } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+import { Droplist } from '@snack-uikit/droplist';
+import { DEFAULT_EMPTY_VALUE, Size } from '../../../constants';
+import { normalizeValueForSingleChoice } from '../utils';
+import { ChipChoiceCustom } from './ChipChoiceCustom';
+export function ChipChoiceSingle(_a) {
+    var { value, defaultValue, options, onChange, valueFormatter, size = Size.S, 'data-test-id': dataTestId } = _a, rest = __rest(_a, ["value", "defaultValue", "options", "onChange", "valueFormatter", "size", 'data-test-id']);
+    const [selectedValue, setSelectedValue] = useUncontrolledProp(normalizeValueForSingleChoice(options, value), normalizeValueForSingleChoice(options, defaultValue), onChange);
+    const selectedOption = useMemo(() => options.find(({ value }) => value === selectedValue), [options, selectedValue]);
+    const valueToRender = valueFormatter ? valueFormatter(selectedOption) : (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || DEFAULT_EMPTY_VALUE;
+    const clearValue = () => setSelectedValue(undefined);
+    return (_jsx(ChipChoiceCustom, Object.assign({ onClearButtonClick: clearValue, value: selectedValue, valueToRender: valueToRender, "data-test-id": dataTestId, size: size }, rest, { children: ({ handleDroplistItemKeyDown, closeDroplist }) => options.map((_a) => {
+            var { label, value } = _a, rest = __rest(_a, ["label", "value"]);
+            const onChangeHandler = () => {
+                setSelectedValue(value);
+                closeDroplist();
+            };
+            return (_createElement(Droplist.ItemSingle, Object.assign({}, rest, { key: value, option: label, checked: selectedValue === value, onChange: onChangeHandler, onKeyDown: handleDroplistItemKeyDown, "data-test-id": dataTestId && `${dataTestId}__option` })));
+        }) })));
+}

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

@@ -0,0 +1,5 @@
+export * from './ChipChoiceCustom';
+export * from './ChipChoiceSingle';
+export * from './ChipChoiceMulti';
+export * from './ChipChoiceDate';
+export * from './ChipChoiceDateRange';

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

@@ -0,0 +1,5 @@
+export * from './ChipChoiceCustom';
+export * from './ChipChoiceSingle';
+export * from './ChipChoiceMulti';
+export * from './ChipChoiceDate';
+export * from './ChipChoiceDateRange';

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

@@ -0,0 +1,25 @@
+import { ButtonSize } from '../../constants';
+export declare const BUTTON_CLEAR_VALUE_SIZE_MAP: {
+    xs: ButtonSize;
+    s: ButtonSize;
+    m: ButtonSize;
+    l: ButtonSize;
+};
+export declare const CALENDAR_SIZE_MAP: {
+    xs: import("@snack-uikit/calendar/dist/constants").Size;
+    s: import("@snack-uikit/calendar/dist/constants").Size;
+    m: import("@snack-uikit/calendar/dist/constants").Size;
+    l: import("@snack-uikit/calendar/dist/constants").Size;
+};
+export declare const DROPLIST_SIZE_MAP: {
+    xs: import("@snack-uikit/droplist/dist/constants").Size;
+    s: import("@snack-uikit/droplist/dist/constants").Size;
+    m: import("@snack-uikit/droplist/dist/constants").Size;
+    l: import("@snack-uikit/droplist/dist/constants").Size;
+};
+export declare enum ChipChoiceType {
+    Multi = "multi",
+    Date = "date",
+    DateRange = "date-range",
+    Single = "single"
+}