@snack-uikit/chips 0.22.6-preview-d736f028.0 → 0.23.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.23.0 (2024-12-25)
+
+
+### Features
+
+* **PDS-540:** add autoApply flag for multiple and single ChipChoice ([62f298d](https://github.com/cloud-ru-tech/snack-uikit/commit/62f298d27763f3c67b14ec1a03d3bb660b2468af))
+
+
+
+
+
 ## 0.22.5 (2024-12-18)
 
 ### Only dependencies have been changed

package/README.md

@@ -152,6 +152,9 @@ import { PlaceholderSVG } from '@snack-uikit/icons';
 | contentRender | `(option: { label: ItemId; value?: ItemId; contentRenderProps?: T; }) => ReactNode` | - |  |
 | filterFn | `(option: { label: ItemId; value?: ItemId; contentRenderProps?: T; }) => boolean` | - |  |
 | searchable | `boolean` | - |  |
+| autoApply | `boolean` | - | Флаг, отвечающий за применение выбранного значения по умолчанию |
+| onApprove | `() => void` | - | Колбек основной кнопки |
+| onCancel | `() => void` | - | Колбек кнопки отмены |
 | footer | `ReactNode ;` | - | Кастомизируемый элемент в конце списка |
 | footerActiveElementsRefs | `RefObject<HTMLElement>[]` | - | Список ссылок на кастомные элементы, помещенные в специальную секцию внизу списка |
 | scrollToSelectedItem | `boolean` | - | Флаг, отвещающий за прокручивание до выбранного элемента |
@@ -167,7 +170,6 @@ import { PlaceholderSVG } from '@snack-uikit/icons';
 | value | `ItemId` | - | Controlled состояние |
 | defaultValue | `ItemId` | - | Начальное состояние |
 | valueRender | `(option?: BaseOption<T>) => ReactNode` | - | Колбек формирующий отображение выбранного значения. Принимает выбранное значение. По умолчанию для отображения используется FilterOption.label |
-| autoApply | `boolean` | - | Флаг, отвечающий за применение выбранного значения по умолчанию |
 ## ChipChoice.Multiple
 ### Props
 | name | type | default value | description |
@@ -188,6 +190,9 @@ import { PlaceholderSVG } from '@snack-uikit/icons';
 | contentRender | `(option: { label: ItemId; value?: ItemId; contentRenderProps?: T; }) => ReactNode` | - |  |
 | filterFn | `(option: { label: ItemId; value?: ItemId; contentRenderProps?: T; }) => boolean` | - |  |
 | searchable | `boolean` | - |  |
+| autoApply | `boolean` | - | Флаг, отвечающий за применение выбранного значения по умолчанию |
+| onApprove | `() => void` | - | Колбек основной кнопки |
+| onCancel | `() => void` | - | Колбек кнопки отмены |
 | footer | `ReactNode ;` | - | Кастомизируемый элемент в конце списка |
 | footerActiveElementsRefs | `RefObject<HTMLElement>[]` | - | Список ссылок на кастомные элементы, помещенные в специальную секцию внизу списка |
 | scrollToSelectedItem | `boolean` | - | Флаг, отвещающий за прокручивание до выбранного элемента |
@@ -203,7 +208,6 @@ import { PlaceholderSVG } from '@snack-uikit/icons';
 | value | `ItemId[]` | - | Controlled состояние |
 | defaultValue | `ItemId[]` | - | Начальное состояние |
 | valueRender | `(option?: BaseOption<T>[]) => ReactNode` | - | Колбек формирующий отображение выбранного значения. Принимает выбранное значение. По умолчанию для отображения используется FilterOption.label |
-| autoApply | `boolean` | - | Флаг, отвечающий за применение выбранного значения по умолчанию |
 ## ChipChoice.Date
 ### Props
 | name | type | default value | description |

package/dist/cjs/components/ChipChoice/components/ChipChoiceBase/styles.module.css

@@ -4,24 +4,6 @@
   align-items:center;
 }
 
-.choiceChipFooter{
-  display:flex;
-  align-items:center;
-  justify-content:space-between;
-}
-.choiceChipFooter[data-size=xs]{
-  gap:var(--space-calendar-footer-elements-s, 8px);
-}
-.choiceChipFooter[data-size=s]{
-  gap:var(--space-calendar-footer-elements-s, 8px);
-}
-.choiceChipFooter[data-size=m]{
-  gap:var(--space-calendar-footer-elements-m, 8px);
-}
-.choiceChipFooter[data-size=l]{
-  gap:var(--space-calendar-footer-elements-l, 8px);
-}
-
 .choiceChip{
   cursor:pointer;
   position:relative;
@@ -216,6 +198,24 @@
   color:var(--sys-neutral-text-support, #6d707f);
 }
 
+.choiceChipFooter{
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+}
+.choiceChipFooter[data-size=xs]{
+  gap:var(--space-calendar-footer-elements-s, 8px);
+}
+.choiceChipFooter[data-size=s]{
+  gap:var(--space-calendar-footer-elements-s, 8px);
+}
+.choiceChipFooter[data-size=m]{
+  gap:var(--space-calendar-footer-elements-m, 8px);
+}
+.choiceChipFooter[data-size=l]{
+  gap:var(--space-calendar-footer-elements-l, 8px);
+}
+
 .triggerClassName{
   --offset:var(--space-drop-list-drop-offset, 4px);
 }

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

@@ -5,4 +5,4 @@ export type ChipChoiceMultipleValueFormatterProps<T extends ContentRenderProps =
     total: number;
     allLabel: string;
 };
-export declare function ChipChoiceMultiple<T extends ContentRenderProps = ContentRenderProps>({ value: valueProp, defaultValue, options, onChange: onChangeProp, valueRender, size, label, searchable, contentRender, dropDownClassName, showClearButton, autoApply, ...rest }: ChipChoiceMultipleProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function ChipChoiceMultiple<T extends ContentRenderProps = ContentRenderProps>({ value: valueProp, defaultValue, options, onChange: onChangeProp, valueRender, size, label, searchable, contentRender, dropDownClassName, showClearButton, autoApply, onApprove, onCancel, ...rest }: ChipChoiceMultipleProps<T>): import("react/jsx-runtime").JSX.Element;

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

@@ -51,9 +51,11 @@ function ChipChoiceMultiple(_a) {
       contentRender,
       dropDownClassName,
       showClearButton = true,
-      autoApply = true
+      autoApply = true,
+      onApprove,
+      onCancel
     } = _a,
-    rest = __rest(_a, ["value", "defaultValue", "options", "onChange", "valueRender", "size", "label", "searchable", "contentRender", "dropDownClassName", "showClearButton", "autoApply"]);
+    rest = __rest(_a, ["value", "defaultValue", "options", "onChange", "valueRender", "size", "label", "searchable", "contentRender", "dropDownClassName", "showClearButton", "autoApply", "onApprove", "onCancel"]);
   const [value, setValue] = (0, utils_1.useValueControl)({
     value: valueProp,
     defaultValue,
@@ -109,10 +111,12 @@ function ChipChoiceMultiple(_a) {
     }
   }, [autoApply, searchValue, setValue, setDeferredValue]);
   const handleOnCancelClick = () => {
+    onCancel && onCancel();
     setDeferredValue(value);
     setOpen(false);
   };
   const handleOnApproveClick = () => {
+    onApprove && onApprove();
     setValue(deferredValue);
     setOpen(false);
   };
@@ -127,6 +131,10 @@ function ChipChoiceMultiple(_a) {
       setSearchValue('');
     }
   }, [searchable, open, searchValue]);
+  (0, react_1.useEffect)(() => {
+    setDeferredValue(value);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]);
   return (0, jsx_runtime_1.jsx)(list_1.Droplist, Object.assign({}, rest, {
     items: items,
     selection: {

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

@@ -5,4 +5,4 @@ export type ChipChoiceSingleValueFormatterProps = {
     allLabel?: string;
 };
 export declare function defaultSingleValueFormatter({ label, allLabel }: ChipChoiceSingleValueFormatterProps): ItemId | undefined;
-export declare function ChipChoiceSingle<T extends ContentRenderProps = ContentRenderProps>({ value: valueProp, defaultValue, options, onChange: onChangeProp, valueRender, size, label, searchable, contentRender, dropDownClassName, autoApply, ...rest }: ChipChoiceSingleProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function ChipChoiceSingle<T extends ContentRenderProps = ContentRenderProps>({ value: valueProp, defaultValue, options, onChange: onChangeProp, valueRender, size, label, searchable, contentRender, dropDownClassName, autoApply, onApprove, onCancel, ...rest }: ChipChoiceSingleProps<T>): import("react/jsx-runtime").JSX.Element;

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

@@ -43,9 +43,11 @@ function ChipChoiceSingle(_a) {
       searchable,
       contentRender,
       dropDownClassName,
-      autoApply = true
+      autoApply = true,
+      onApprove,
+      onCancel
     } = _a,
-    rest = __rest(_a, ["value", "defaultValue", "options", "onChange", "valueRender", "size", "label", "searchable", "contentRender", "dropDownClassName", "autoApply"]);
+    rest = __rest(_a, ["value", "defaultValue", "options", "onChange", "valueRender", "size", "label", "searchable", "contentRender", "dropDownClassName", "autoApply", "onApprove", "onCancel"]);
   const [value, setValue] = (0, utils_1.useValueControl)({
     value: valueProp,
     defaultValue,
@@ -99,10 +101,12 @@ function ChipChoiceSingle(_a) {
     }
   }, [autoApply, setValue, setDeferredValue]);
   const handleOnCancelClick = () => {
+    onCancel && onCancel();
     setDeferredValue(value);
     setOpen(false);
   };
   const handleOnApproveClick = () => {
+    onApprove && onApprove();
     setValue(deferredValue);
     setOpen(false);
   };
@@ -117,6 +121,10 @@ function ChipChoiceSingle(_a) {
       setSearchValue('');
     }
   }, [searchable, open, searchValue]);
+  (0, react_1.useEffect)(() => {
+    setDeferredValue(value);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]);
   return (0, jsx_runtime_1.jsx)(list_1.Droplist, Object.assign({}, rest, {
     items: items,
     selection: {

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

@@ -67,28 +67,25 @@ function useAutoApply(_ref2) {
       return;
     }
     return [{
-      type: 'group',
-      items: [{
-        content: (0, jsx_runtime_1.jsxs)("div", {
-          className: styles_module_scss_1.default.choiceChipFooter,
-          "data-size": size,
-          "data-test-id": constants_1.CHIP_CHOICE_TEST_IDS.footer,
-          children: [(0, jsx_runtime_1.jsx)(button_1.ButtonFunction, {
-            size: constants_2.DROPLIST_FOOTER_SIZE_MAP[size],
-            appearance: 'neutral',
-            label: t('cancel'),
-            onClick: onCancel,
-            "data-test-id": constants_1.CHIP_CHOICE_TEST_IDS.cancelButton
-          }), (0, jsx_runtime_1.jsx)(button_1.ButtonFilled, {
-            size: constants_2.DROPLIST_FOOTER_SIZE_MAP[size],
-            appearance: 'primary',
-            label: t('apply'),
-            onClick: onApprove,
-            "data-test-id": constants_1.CHIP_CHOICE_TEST_IDS.approveButton
-          })]
-        }),
-        inactive: true
-      }]
+      content: (0, jsx_runtime_1.jsxs)("div", {
+        className: styles_module_scss_1.default.choiceChipFooter,
+        "data-size": size,
+        "data-test-id": constants_1.CHIP_CHOICE_TEST_IDS.footer,
+        children: [(0, jsx_runtime_1.jsx)(button_1.ButtonFunction, {
+          size: constants_2.DROPLIST_FOOTER_SIZE_MAP[size],
+          appearance: 'neutral',
+          label: t('cancel'),
+          onClick: onCancel,
+          "data-test-id": constants_1.CHIP_CHOICE_TEST_IDS.cancelButton
+        }), (0, jsx_runtime_1.jsx)(button_1.ButtonFilled, {
+          size: constants_2.DROPLIST_FOOTER_SIZE_MAP[size],
+          appearance: 'primary',
+          label: t('apply'),
+          onClick: onApprove,
+          "data-test-id": constants_1.CHIP_CHOICE_TEST_IDS.approveButton
+        })]
+      }),
+      inactive: true
     }];
   }, [t, autoApply, size, onApprove, onCancel]);
 }

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

@@ -4,24 +4,6 @@
   align-items:center;
 }
 
-.choiceChipFooter{
-  display:flex;
-  align-items:center;
-  justify-content:space-between;
-}
-.choiceChipFooter[data-size=xs]{
-  gap:var(--space-calendar-footer-elements-s, 8px);
-}
-.choiceChipFooter[data-size=s]{
-  gap:var(--space-calendar-footer-elements-s, 8px);
-}
-.choiceChipFooter[data-size=m]{
-  gap:var(--space-calendar-footer-elements-m, 8px);
-}
-.choiceChipFooter[data-size=l]{
-  gap:var(--space-calendar-footer-elements-l, 8px);
-}
-
 .choiceChip{
   cursor:pointer;
   position:relative;
@@ -216,6 +198,24 @@
   color:var(--sys-neutral-text-support, #6d707f);
 }
 
+.choiceChipFooter{
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+}
+.choiceChipFooter[data-size=xs]{
+  gap:var(--space-calendar-footer-elements-s, 8px);
+}
+.choiceChipFooter[data-size=s]{
+  gap:var(--space-calendar-footer-elements-s, 8px);
+}
+.choiceChipFooter[data-size=m]{
+  gap:var(--space-calendar-footer-elements-m, 8px);
+}
+.choiceChipFooter[data-size=l]{
+  gap:var(--space-calendar-footer-elements-l, 8px);
+}
+
 .triggerClassName{
   --offset:var(--space-drop-list-drop-offset, 4px);
 }

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

@@ -59,20 +59,22 @@ export type ChipChoiceSelectCommonProps<T extends ContentRenderProps = ContentRe
         contentRenderProps?: T;
     }): boolean;
     searchable?: boolean;
+    /** Флаг, отвечающий за применение выбранного значения по умолчанию  */
+    autoApply?: boolean;
+    /** Колбек основной кнопки */
+    onApprove?: () => void;
+    /** Колбек кнопки отмены */
+    onCancel?: () => void;
 } & Pick<DroplistProps, 'selection' | 'scrollRef' | 'scrollContainerRef' | 'noDataState' | 'footer' | 'footerActiveElementsRefs' | 'dataError' | 'errorDataState' | 'dataFiltered' | 'noResultsState' | 'loading' | 'scrollToSelectedItem'>;
 export type ChipChoiceSingleProps<T extends ContentRenderProps = ContentRenderProps> = ChipChoiceSelectCommonProps<T> & Omit<SelectionSingleState, 'mode'> & {
     /** Массив опций */
     options: FilterOption<T>[];
     /** Колбек формирующий отображение выбранного значения. Принимает выбранное значение. По умолчанию для отображения используется FilterOption.label */
     valueRender?(option?: BaseOption<T>): ReactNode;
-    /** Флаг, отвечающий за применение выбранного значения по умолчанию  */
-    autoApply?: boolean;
 };
 export type ChipChoiceMultipleProps<T extends ContentRenderProps = ContentRenderProps> = ChipChoiceSelectCommonProps<T> & Omit<SelectionMultipleState, 'mode'> & {
     /** Массив опций */
     options: FilterOption<T>[];
     /** Колбек формирующий отображение выбранного значения. Принимает выбранное значение. По умолчанию для отображения используется FilterOption.label */
     valueRender?(option?: BaseOption<T>[]): ReactNode;
-    /** Флаг, отвечающий за применение выбранного значения по умолчанию  */
-    autoApply?: boolean;
 };

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

@@ -4,24 +4,6 @@
   align-items:center;
 }
 
-.choiceChipFooter{
-  display:flex;
-  align-items:center;
-  justify-content:space-between;
-}
-.choiceChipFooter[data-size=xs]{
-  gap:var(--space-calendar-footer-elements-s, 8px);
-}
-.choiceChipFooter[data-size=s]{
-  gap:var(--space-calendar-footer-elements-s, 8px);
-}
-.choiceChipFooter[data-size=m]{
-  gap:var(--space-calendar-footer-elements-m, 8px);
-}
-.choiceChipFooter[data-size=l]{
-  gap:var(--space-calendar-footer-elements-l, 8px);
-}
-
 .choiceChip{
   cursor:pointer;
   position:relative;
@@ -216,6 +198,24 @@
   color:var(--sys-neutral-text-support, #6d707f);
 }
 
+.choiceChipFooter{
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+}
+.choiceChipFooter[data-size=xs]{
+  gap:var(--space-calendar-footer-elements-s, 8px);
+}
+.choiceChipFooter[data-size=s]{
+  gap:var(--space-calendar-footer-elements-s, 8px);
+}
+.choiceChipFooter[data-size=m]{
+  gap:var(--space-calendar-footer-elements-m, 8px);
+}
+.choiceChipFooter[data-size=l]{
+  gap:var(--space-calendar-footer-elements-l, 8px);
+}
+
 .triggerClassName{
   --offset:var(--space-drop-list-drop-offset, 4px);
 }

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

@@ -5,4 +5,4 @@ export type ChipChoiceMultipleValueFormatterProps<T extends ContentRenderProps =
     total: number;
     allLabel: string;
 };
-export declare function ChipChoiceMultiple<T extends ContentRenderProps = ContentRenderProps>({ value: valueProp, defaultValue, options, onChange: onChangeProp, valueRender, size, label, searchable, contentRender, dropDownClassName, showClearButton, autoApply, ...rest }: ChipChoiceMultipleProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function ChipChoiceMultiple<T extends ContentRenderProps = ContentRenderProps>({ value: valueProp, defaultValue, options, onChange: onChangeProp, valueRender, size, label, searchable, contentRender, dropDownClassName, showClearButton, autoApply, onApprove, onCancel, ...rest }: ChipChoiceMultipleProps<T>): import("react/jsx-runtime").JSX.Element;

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

@@ -31,7 +31,7 @@ const defaultMultiValueLabelFormatter = ({ value, total, allLabel }) => {
     return `${len.toString()}/${total}`;
 };
 export function ChipChoiceMultiple(_a) {
-    var { value: valueProp, defaultValue, options, onChange: onChangeProp, valueRender, size = SIZE.S, label, searchable, contentRender, dropDownClassName, showClearButton = true, autoApply = true } = _a, rest = __rest(_a, ["value", "defaultValue", "options", "onChange", "valueRender", "size", "label", "searchable", "contentRender", "dropDownClassName", "showClearButton", "autoApply"]);
+    var { value: valueProp, defaultValue, options, onChange: onChangeProp, valueRender, size = SIZE.S, label, searchable, contentRender, dropDownClassName, showClearButton = true, autoApply = true, onApprove, onCancel } = _a, rest = __rest(_a, ["value", "defaultValue", "options", "onChange", "valueRender", "size", "label", "searchable", "contentRender", "dropDownClassName", "showClearButton", "autoApply", "onApprove", "onCancel"]);
     const [value, setValue] = useValueControl({
         value: valueProp,
         defaultValue,
@@ -82,10 +82,12 @@ export function ChipChoiceMultiple(_a) {
         }
     }, [autoApply, searchValue, setValue, setDeferredValue]);
     const handleOnCancelClick = () => {
+        onCancel && onCancel();
         setDeferredValue(value);
         setOpen(false);
     };
     const handleOnApproveClick = () => {
+        onApprove && onApprove();
         setValue(deferredValue);
         setOpen(false);
     };
@@ -100,6 +102,10 @@ export function ChipChoiceMultiple(_a) {
             setSearchValue('');
         }
     }, [searchable, open, searchValue]);
+    useEffect(() => {
+        setDeferredValue(value);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value]);
     return (_jsx(Droplist, Object.assign({}, rest, { items: items, selection: {
             value: dropListSelection,
             onChange: handleSelectionChange,

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

@@ -5,4 +5,4 @@ export type ChipChoiceSingleValueFormatterProps = {
     allLabel?: string;
 };
 export declare function defaultSingleValueFormatter({ label, allLabel }: ChipChoiceSingleValueFormatterProps): ItemId | undefined;
-export declare function ChipChoiceSingle<T extends ContentRenderProps = ContentRenderProps>({ value: valueProp, defaultValue, options, onChange: onChangeProp, valueRender, size, label, searchable, contentRender, dropDownClassName, autoApply, ...rest }: ChipChoiceSingleProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function ChipChoiceSingle<T extends ContentRenderProps = ContentRenderProps>({ value: valueProp, defaultValue, options, onChange: onChangeProp, valueRender, size, label, searchable, contentRender, dropDownClassName, autoApply, onApprove, onCancel, ...rest }: ChipChoiceSingleProps<T>): import("react/jsx-runtime").JSX.Element;

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

@@ -24,7 +24,7 @@ export function defaultSingleValueFormatter({ label, allLabel }) {
     return label !== null && label !== void 0 ? label : allLabel;
 }
 export function ChipChoiceSingle(_a) {
-    var { value: valueProp, defaultValue, options, onChange: onChangeProp, valueRender, size = SIZE.S, label, searchable, contentRender, dropDownClassName, autoApply = true } = _a, rest = __rest(_a, ["value", "defaultValue", "options", "onChange", "valueRender", "size", "label", "searchable", "contentRender", "dropDownClassName", "autoApply"]);
+    var { value: valueProp, defaultValue, options, onChange: onChangeProp, valueRender, size = SIZE.S, label, searchable, contentRender, dropDownClassName, autoApply = true, onApprove, onCancel } = _a, rest = __rest(_a, ["value", "defaultValue", "options", "onChange", "valueRender", "size", "label", "searchable", "contentRender", "dropDownClassName", "autoApply", "onApprove", "onCancel"]);
     const [value, setValue] = useValueControl({
         value: valueProp,
         defaultValue,
@@ -70,10 +70,12 @@ export function ChipChoiceSingle(_a) {
         }
     }, [autoApply, setValue, setDeferredValue]);
     const handleOnCancelClick = () => {
+        onCancel && onCancel();
         setDeferredValue(value);
         setOpen(false);
     };
     const handleOnApproveClick = () => {
+        onApprove && onApprove();
         setValue(deferredValue);
         setOpen(false);
     };
@@ -88,6 +90,10 @@ export function ChipChoiceSingle(_a) {
             setSearchValue('');
         }
     }, [searchable, open, searchValue]);
+    useEffect(() => {
+        setDeferredValue(value);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value]);
     return (_jsx(Droplist, Object.assign({}, rest, { items: items, selection: {
             value: dropListSelection,
             onChange: handleSelectionChange,

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

@@ -47,13 +47,8 @@ export function useAutoApply({ autoApply, size, onApprove, onCancel, }) {
         }
         return [
             {
-                type: 'group',
-                items: [
-                    {
-                        content: (_jsxs("div", { className: styles.choiceChipFooter, "data-size": size, "data-test-id": CHIP_CHOICE_TEST_IDS.footer, children: [_jsx(ButtonFunction, { size: DROPLIST_FOOTER_SIZE_MAP[size], appearance: 'neutral', label: t('cancel'), onClick: onCancel, "data-test-id": CHIP_CHOICE_TEST_IDS.cancelButton }), _jsx(ButtonFilled, { size: DROPLIST_FOOTER_SIZE_MAP[size], appearance: 'primary', label: t('apply'), onClick: onApprove, "data-test-id": CHIP_CHOICE_TEST_IDS.approveButton })] })),
-                        inactive: true,
-                    },
-                ],
+                content: (_jsxs("div", { className: styles.choiceChipFooter, "data-size": size, "data-test-id": CHIP_CHOICE_TEST_IDS.footer, children: [_jsx(ButtonFunction, { size: DROPLIST_FOOTER_SIZE_MAP[size], appearance: 'neutral', label: t('cancel'), onClick: onCancel, "data-test-id": CHIP_CHOICE_TEST_IDS.cancelButton }), _jsx(ButtonFilled, { size: DROPLIST_FOOTER_SIZE_MAP[size], appearance: 'primary', label: t('apply'), onClick: onApprove, "data-test-id": CHIP_CHOICE_TEST_IDS.approveButton })] })),
+                inactive: true,
             },
         ];
     }, [t, autoApply, size, onApprove, onCancel]);

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

@@ -4,24 +4,6 @@
   align-items:center;
 }
 
-.choiceChipFooter{
-  display:flex;
-  align-items:center;
-  justify-content:space-between;
-}
-.choiceChipFooter[data-size=xs]{
-  gap:var(--space-calendar-footer-elements-s, 8px);
-}
-.choiceChipFooter[data-size=s]{
-  gap:var(--space-calendar-footer-elements-s, 8px);
-}
-.choiceChipFooter[data-size=m]{
-  gap:var(--space-calendar-footer-elements-m, 8px);
-}
-.choiceChipFooter[data-size=l]{
-  gap:var(--space-calendar-footer-elements-l, 8px);
-}
-
 .choiceChip{
   cursor:pointer;
   position:relative;
@@ -216,6 +198,24 @@
   color:var(--sys-neutral-text-support, #6d707f);
 }
 
+.choiceChipFooter{
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+}
+.choiceChipFooter[data-size=xs]{
+  gap:var(--space-calendar-footer-elements-s, 8px);
+}
+.choiceChipFooter[data-size=s]{
+  gap:var(--space-calendar-footer-elements-s, 8px);
+}
+.choiceChipFooter[data-size=m]{
+  gap:var(--space-calendar-footer-elements-m, 8px);
+}
+.choiceChipFooter[data-size=l]{
+  gap:var(--space-calendar-footer-elements-l, 8px);
+}
+
 .triggerClassName{
   --offset:var(--space-drop-list-drop-offset, 4px);
 }

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

@@ -59,20 +59,22 @@ export type ChipChoiceSelectCommonProps<T extends ContentRenderProps = ContentRe
         contentRenderProps?: T;
     }): boolean;
     searchable?: boolean;
+    /** Флаг, отвечающий за применение выбранного значения по умолчанию  */
+    autoApply?: boolean;
+    /** Колбек основной кнопки */
+    onApprove?: () => void;
+    /** Колбек кнопки отмены */
+    onCancel?: () => void;
 } & Pick<DroplistProps, 'selection' | 'scrollRef' | 'scrollContainerRef' | 'noDataState' | 'footer' | 'footerActiveElementsRefs' | 'dataError' | 'errorDataState' | 'dataFiltered' | 'noResultsState' | 'loading' | 'scrollToSelectedItem'>;
 export type ChipChoiceSingleProps<T extends ContentRenderProps = ContentRenderProps> = ChipChoiceSelectCommonProps<T> & Omit<SelectionSingleState, 'mode'> & {
     /** Массив опций */
     options: FilterOption<T>[];
     /** Колбек формирующий отображение выбранного значения. Принимает выбранное значение. По умолчанию для отображения используется FilterOption.label */
     valueRender?(option?: BaseOption<T>): ReactNode;
-    /** Флаг, отвечающий за применение выбранного значения по умолчанию  */
-    autoApply?: boolean;
 };
 export type ChipChoiceMultipleProps<T extends ContentRenderProps = ContentRenderProps> = ChipChoiceSelectCommonProps<T> & Omit<SelectionMultipleState, 'mode'> & {
     /** Массив опций */
     options: FilterOption<T>[];
     /** Колбек формирующий отображение выбранного значения. Принимает выбранное значение. По умолчанию для отображения используется FilterOption.label */
     valueRender?(option?: BaseOption<T>[]): ReactNode;
-    /** Флаг, отвечающий за применение выбранного значения по умолчанию  */
-    autoApply?: boolean;
 };

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Chips",
-  "version": "0.22.6-preview-d736f028.0",
+  "version": "0.23.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -54,5 +54,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "687df0310b8d81e308f91b3c0e7c8cb4adcefc8d"
+  "gitHead": "fe19e90e45a2fd92928e591f3cb555695592c8cd"
 }

package/src/components/ChipChoice/components/ChipChoiceMultiple.tsx

@@ -45,6 +45,8 @@ export function ChipChoiceMultiple<T extends ContentRenderProps = ContentRenderP
   dropDownClassName,
   showClearButton = true,
   autoApply = true,
+  onApprove,
+  onCancel,
   ...rest
 }: ChipChoiceMultipleProps<T>) {
   const [value, setValue] = useValueControl<SelectionSingleValueType[]>({
@@ -120,11 +122,15 @@ export function ChipChoiceMultiple<T extends ContentRenderProps = ContentRenderP
   );
 
   const handleOnCancelClick = () => {
+    onCancel && onCancel();
+
     setDeferredValue(value);
     setOpen(false);
   };
 
   const handleOnApproveClick = () => {
+    onApprove && onApprove();
+
     setValue(deferredValue);
     setOpen(false);
   };
@@ -142,6 +148,11 @@ export function ChipChoiceMultiple<T extends ContentRenderProps = ContentRenderP
     }
   }, [searchable, open, searchValue]);
 
+  useEffect(() => {
+    setDeferredValue(value);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]);
+
   return (
     <Droplist
       {...rest}

package/src/components/ChipChoice/components/ChipChoiceSingle.tsx

@@ -33,6 +33,8 @@ export function ChipChoiceSingle<T extends ContentRenderProps = ContentRenderPro
   contentRender,
   dropDownClassName,
   autoApply = true,
+  onApprove,
+  onCancel,
   ...rest
 }: ChipChoiceSingleProps<T>) {
   const [value, setValue] = useValueControl<SelectionSingleValueType>({
@@ -103,11 +105,15 @@ export function ChipChoiceSingle<T extends ContentRenderProps = ContentRenderPro
   );
 
   const handleOnCancelClick = () => {
+    onCancel && onCancel();
+
     setDeferredValue(value);
     setOpen(false);
   };
 
   const handleOnApproveClick = () => {
+    onApprove && onApprove();
+
     setValue(deferredValue);
     setOpen(false);
   };
@@ -125,6 +131,11 @@ export function ChipChoiceSingle<T extends ContentRenderProps = ContentRenderPro
     }
   }, [searchable, open, searchValue]);
 
+  useEffect(() => {
+    setDeferredValue(value);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]);
+
   return (
     <Droplist
       {...rest}

package/src/components/ChipChoice/hooks.tsx

@@ -90,30 +90,25 @@ export function useAutoApply({
 
     return [
       {
-        type: 'group',
-        items: [
-          {
-            content: (
-              <div className={styles.choiceChipFooter} data-size={size} data-test-id={CHIP_CHOICE_TEST_IDS.footer}>
-                <ButtonFunction
-                  size={DROPLIST_FOOTER_SIZE_MAP[size]}
-                  appearance='neutral'
-                  label={t('cancel')}
-                  onClick={onCancel}
-                  data-test-id={CHIP_CHOICE_TEST_IDS.cancelButton}
-                />
-                <ButtonFilled
-                  size={DROPLIST_FOOTER_SIZE_MAP[size]}
-                  appearance='primary'
-                  label={t('apply')}
-                  onClick={onApprove}
-                  data-test-id={CHIP_CHOICE_TEST_IDS.approveButton}
-                />
-              </div>
-            ),
-            inactive: true,
-          },
-        ],
+        content: (
+          <div className={styles.choiceChipFooter} data-size={size} data-test-id={CHIP_CHOICE_TEST_IDS.footer}>
+            <ButtonFunction
+              size={DROPLIST_FOOTER_SIZE_MAP[size]}
+              appearance='neutral'
+              label={t('cancel')}
+              onClick={onCancel}
+              data-test-id={CHIP_CHOICE_TEST_IDS.cancelButton}
+            />
+            <ButtonFilled
+              size={DROPLIST_FOOTER_SIZE_MAP[size]}
+              appearance='primary'
+              label={t('apply')}
+              onClick={onApprove}
+              data-test-id={CHIP_CHOICE_TEST_IDS.approveButton}
+            />
+          </div>
+        ),
+        inactive: true,
       },
     ] as DroplistProps['pinBottom'];
   }, [t, autoApply, size, onApprove, onCancel]);

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

@@ -33,18 +33,6 @@ $footerGap: (
   align-items: center;
 }
 
-.choiceChipFooter {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  @each $size in $sizes {
-    &[data-size='#{$size}'] {
-      @include styles-tokens-calendar.composite-var($footerGap, $size);
-    }
-  }
-}
-
 .choiceChip {
   @include styles.chip-defaults;
   @include styles.chip-anatomy-styles(styles-tokens-chips-chipChoice.$chip-choice, $sizes, $labelTypography);
@@ -112,6 +100,18 @@ $footerGap: (
   }
 }
 
+.choiceChipFooter {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include styles-tokens-calendar.composite-var($footerGap, $size);
+    }
+  }
+}
+
 .triggerClassName {
   --offset: #{styles-tokens-chips-chipChoice.$space-drop-list-drop-offset};
 }

package/src/components/ChipChoice/types.ts

@@ -97,6 +97,13 @@ export type ChipChoiceSelectCommonProps<T extends ContentRenderProps = ContentRe
   filterFn?(option: { label: ItemId; value?: ItemId; contentRenderProps?: T }): boolean;
 
   searchable?: boolean;
+
+  /** Флаг, отвечающий за применение выбранного значения по умолчанию  */
+  autoApply?: boolean;
+  /** Колбек основной кнопки */
+  onApprove?: () => void;
+  /** Колбек кнопки отмены */
+  onCancel?: () => void;
 } & Pick<
     DroplistProps,
     | 'selection'
@@ -119,8 +126,6 @@ export type ChipChoiceSingleProps<T extends ContentRenderProps = ContentRenderPr
     options: FilterOption<T>[];
     /** Колбек формирующий отображение выбранного значения. Принимает выбранное значение. По умолчанию для отображения используется FilterOption.label */
     valueRender?(option?: BaseOption<T>): ReactNode;
-    /** Флаг, отвечающий за применение выбранного значения по умолчанию  */
-    autoApply?: boolean;
   };
 
 export type ChipChoiceMultipleProps<T extends ContentRenderProps = ContentRenderProps> =
@@ -130,6 +135,4 @@ export type ChipChoiceMultipleProps<T extends ContentRenderProps = ContentRender
       options: FilterOption<T>[];
       /** Колбек формирующий отображение выбранного значения. Принимает выбранное значение. По умолчанию для отображения используется FilterOption.label */
       valueRender?(option?: BaseOption<T>[]): ReactNode;
-      /** Флаг, отвечающий за применение выбранного значения по умолчанию  */
-      autoApply?: boolean;
     };