@sberbusiness/triplex-next 1.45.0 → 1.47.0

package/components/CheckboxTree/CheckboxTree.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxTree.js","sources":["../../../src/components/CheckboxTree/CheckboxTree.tsx"],"sourcesContent":["import React from \"react\";\nimport { CheckboxTreeExtended, ICheckboxTreeExtendedProps } from \"../CheckboxTreeExtended/CheckboxTreeExtended\";\nimport { ICheckboxTreeExtendedCheckboxProvideProps } from \"../CheckboxTreeExtended/components/CheckboxTreeExtendedNode\";\nimport { ICheckboxTreeCheckboxData } from \"./types\";\nimport { checkChildrenCheckboxes, checkParentCheckboxes, traverseCheckboxes } from \"./utils\";\nimport { EComponentSize } from \"../../enums/EComponentSize\";\n\n/** Свойства CheckboxTree. */\nexport interface ICheckboxTreeProps extends Omit<ICheckboxTreeExtendedProps, \"children\" | \"onChange\"> {\n    children?: never;\n    /** Набор чекбоксов. */\n    checkboxes: ICheckboxTreeCheckboxData[];\n    /** Обработчик изменения чекбоксов. */\n    onChange: (options: ICheckboxTreeCheckboxData[]) => void;\n}\n\n/**\n * Дерево чекбоксов.\n * Является оберткой над CheckboxTreeExtended.\n */\nexport const CheckboxTree: React.FC<ICheckboxTreeProps> = ({ checkboxes, onChange, size = EComponentSize.MD }) => {\n    const handleChange = (checkbox: ICheckboxTreeCheckboxData) => (event: React.ChangeEvent<HTMLInputElement>) => {\n        const { checked } = event.target;\n\n        checkbox.checked = checkbox.bulk ? true : checked;\n\n        // Обновление флага checked дочерних чекбоксов, при изменении родителя.\n        checkChildrenCheckboxes(checkbox);\n\n        // Обновление флага checked и bulk всех чекбоксов снизу вверх.\n        traverseCheckboxes(checkboxes, checkParentCheckboxes);\n\n        onChange([...checkboxes]);\n    };\n\n    const renderNode = (\n        checkbox: ICheckboxTreeCheckboxData,\n        prevCheckbox?: ICheckboxTreeCheckboxData,\n        nextCheckbox?: ICheckboxTreeCheckboxData,\n    ) => (\n        <CheckboxTreeExtended.Node\n            id={checkbox.id}\n            key={checkbox.id}\n            checkbox={(props: ICheckboxTreeExtendedCheckboxProvideProps) => (\n                <CheckboxTreeExtended.Checkbox\n                    {...props}\n                    onChange={handleChange(checkbox)}\n                    bulk={checkbox.bulk}\n                    checked={checkbox.checked}\n                >\n                    {checkbox.label}\n                </CheckboxTreeExtended.Checkbox>\n            )}\n            prevNodeId={prevCheckbox?.id}\n            nextNodeId={nextCheckbox?.id}\n        >\n            {checkbox.children &&\n                checkbox.children.map((child, index) =>\n                    renderNode(child, checkbox.children?.[index - 1], checkbox.children?.[index + 1]),\n                )}\n        </CheckboxTreeExtended.Node>\n    );\n\n    return (\n        <CheckboxTreeExtended size={size}>\n            {checkboxes.map((checkbox, index) => renderNode(checkbox, checkboxes[index - 1], checkboxes[index + 1]))}\n        </CheckboxTreeExtended>\n    );\n};\n\nCheckboxTree.displayName = \"CheckboxTree\";\n"],"names":[],"mappings":";;;;AAoBO,MAAM,eAA6C,CAAC,EAAE,YAAY,UAAU,OAAO,eAAe,SAAS;AAC9G,QAAM,eAAe,CAAC,aAAwC,CAAC,UAA+C;AAC1G,UAAM,EAAE,YAAY,MAAM;AAE1B,aAAS,UAAU,SAAS,OAAO,OAAO;AAG1C,4BAAwB,QAAQ;AAGhC,uBAAmB,YAAY,qBAAqB;AAEpD,aAAS,CAAC,GAAG,UAAU,CAAC;AAAA,EAC5B;AAEA,QAAM,aAAa,CACf,UACA,cACA,iBAEA;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACG,IAAI,SAAS;AAAA,MAEb,UAAU,CAAC,UACP;AAAA,QAAC,qBAAqB;AAAA,QAArB;AAAA,UACI,GAAG;AAAA,UACJ,UAAU,aAAa,QAAQ;AAAA,UAC/B,MAAM,SAAS;AAAA,UACf,SAAS,SAAS;AAAA,UAEjB,UAAA,SAAS;AAAA,QAAA;AAAA,MAAA;AAAA,MAGlB,YAAY,6CAAc;AAAA,MAC1B,YAAY,6CAAc;AAAA,MAEzB,UAAA,SAAS,YACN,SAAS,SAAS;AAAA,QAAI,CAAC,OAAO,UAAA;;AAC1B,4BAAW,QAAO,cAAS,aAAT,mBAAoB,QAAQ,KAAI,cAAS,aAAT,mBAAoB,QAAQ,EAAE;AAAA;AAAA,MAAA;AAAA,IACpF;AAAA,IAjBC,SAAS;AAAA,EAAA;AAqBtB,6BACK,sBAAA,EAAqB,MACjB,qBAAW,IAAI,CAAC,UAAU,UAAU,WAAW,UAAU,WAAW,QAAQ,CAAC,GAAG,WAAW,QAAQ,CAAC,CAAC,CAAC,GAC3G;AAER;AAEA,aAAa,cAAc;"}
+{"version":3,"file":"CheckboxTree.js","sources":["../../../src/components/CheckboxTree/CheckboxTree.tsx"],"sourcesContent":["import React from \"react\";\nimport { CheckboxTreeExtended, ICheckboxTreeExtendedProps } from \"../CheckboxTreeExtended/CheckboxTreeExtended\";\nimport { ICheckboxTreeExtendedCheckboxProvideProps } from \"../CheckboxTreeExtended/components/CheckboxTreeExtendedNode\";\nimport { ICheckboxTreeCheckboxData } from \"./types\";\nimport { checkChildrenCheckboxes, checkParentCheckboxes, traverseCheckboxes } from \"./utils\";\nimport { EComponentSize } from \"../../enums/EComponentSize\";\n\n/** Свойства CheckboxTree. */\nexport interface ICheckboxTreeProps extends Omit<ICheckboxTreeExtendedProps, \"children\" | \"onChange\"> {\n    /** Дерево строится из checkboxes — собственную разметку узлов передать нельзя. Для неё есть CheckboxTreeExtended. */\n    children?: never;\n    /** Набор чекбоксов. Дерево задаётся вложенностью children у элементов набора. */\n    checkboxes: ICheckboxTreeCheckboxData[];\n    /** Обработчик изменения чекбоксов. Получает новый массив с пересчитанными флагами checked и bulk. */\n    onChange: (options: ICheckboxTreeCheckboxData[]) => void;\n}\n\n/**\n * Дерево чекбоксов.\n * Является оберткой над CheckboxTreeExtended: принимает плоское описание дерева и сам связывает состояние\n * родителей и потомков — выбор родителя выбирает всех потомков, выбор части потомков делает родителя частичным.\n *\n * ref указывает на корневой <ul role=\"tree\">.\n */\nexport const CheckboxTree = React.forwardRef<HTMLUListElement, ICheckboxTreeProps>(\n    ({ checkboxes, onChange, size = EComponentSize.MD, ...rest }, ref) => {\n        const handleChange = (checkbox: ICheckboxTreeCheckboxData) => (event: React.ChangeEvent<HTMLInputElement>) => {\n            const { checked } = event.target;\n\n            // Клик по частично выбранному узлу выбирает его целиком, а не снимает выбор.\n            checkbox.checked = checkbox.bulk ? true : checked;\n\n            // Обновление флага checked дочерних чекбоксов, при изменении родителя.\n            checkChildrenCheckboxes(checkbox);\n\n            // Обновление флага checked и bulk всех чекбоксов снизу вверх.\n            traverseCheckboxes(checkboxes, checkParentCheckboxes);\n\n            onChange([...checkboxes]);\n        };\n\n        // Соседи по списку передаются узлу как prevNodeId/nextNodeId — по ним TreeView строит клавиатурную навигацию.\n        const renderNodes = (nodes: ICheckboxTreeCheckboxData[]) =>\n            nodes.map((checkbox, index) => renderNode(checkbox, nodes[index - 1], nodes[index + 1]));\n\n        const renderNode = (\n            checkbox: ICheckboxTreeCheckboxData,\n            prevCheckbox?: ICheckboxTreeCheckboxData,\n            nextCheckbox?: ICheckboxTreeCheckboxData,\n        ) => (\n            <CheckboxTreeExtended.Node\n                id={checkbox.id}\n                key={checkbox.id}\n                checkbox={(props: ICheckboxTreeExtendedCheckboxProvideProps) => (\n                    <CheckboxTreeExtended.Checkbox\n                        {...props}\n                        onChange={handleChange(checkbox)}\n                        bulk={checkbox.bulk}\n                        checked={checkbox.checked}\n                    >\n                        {checkbox.label}\n                    </CheckboxTreeExtended.Checkbox>\n                )}\n                prevNodeId={prevCheckbox?.id}\n                nextNodeId={nextCheckbox?.id}\n            >\n                {checkbox.children && renderNodes(checkbox.children)}\n            </CheckboxTreeExtended.Node>\n        );\n\n        return (\n            <CheckboxTreeExtended size={size} {...rest} ref={ref}>\n                {renderNodes(checkboxes)}\n            </CheckboxTreeExtended>\n        );\n    },\n);\n\nCheckboxTree.displayName = \"CheckboxTree\";\n"],"names":["React"],"mappings":";;;;;AAwBO,MAAM,eAAeA,eAAM;AAAA,EAC9B,CAAC,EAAE,YAAY,UAAU,OAAO,eAAe,IAAI,GAAG,KAAA,GAAQ,QAAQ;AAClE,UAAM,eAAe,CAAC,aAAwC,CAAC,UAA+C;AAC1G,YAAM,EAAE,YAAY,MAAM;AAG1B,eAAS,UAAU,SAAS,OAAO,OAAO;AAG1C,8BAAwB,QAAQ;AAGhC,yBAAmB,YAAY,qBAAqB;AAEpD,eAAS,CAAC,GAAG,UAAU,CAAC;AAAA,IAC5B;AAGA,UAAM,cAAc,CAAC,UACjB,MAAM,IAAI,CAAC,UAAU,UAAU,WAAW,UAAU,MAAM,QAAQ,CAAC,GAAG,MAAM,QAAQ,CAAC,CAAC,CAAC;AAE3F,UAAM,aAAa,CACf,UACA,cACA,iBAEA;AAAA,MAAC,qBAAqB;AAAA,MAArB;AAAA,QACG,IAAI,SAAS;AAAA,QAEb,UAAU,CAAC,UACP;AAAA,UAAC,qBAAqB;AAAA,UAArB;AAAA,YACI,GAAG;AAAA,YACJ,UAAU,aAAa,QAAQ;AAAA,YAC/B,MAAM,SAAS;AAAA,YACf,SAAS,SAAS;AAAA,YAEjB,UAAA,SAAS;AAAA,UAAA;AAAA,QAAA;AAAA,QAGlB,YAAY,6CAAc;AAAA,QAC1B,YAAY,6CAAc;AAAA,QAEzB,UAAA,SAAS,YAAY,YAAY,SAAS,QAAQ;AAAA,MAAA;AAAA,MAd9C,SAAS;AAAA,IAAA;AAkBtB,WACI,oBAAC,wBAAqB,MAAa,GAAG,MAAM,KACvC,UAAA,YAAY,UAAU,GAC3B;AAAA,EAER;AACJ;AAEA,aAAa,cAAc;"}

package/components/CheckboxTree/utils.js

@@ -1,18 +1,25 @@
-const traverseCheckboxes = (checkboxes, cb) => {
-  checkboxes.forEach((c) => {
-    if (c.children) traverseCheckboxes(c.children, cb);
-    cb(c);
+const traverseCheckboxes = (checkboxes, callback) => {
+  checkboxes.forEach((checkbox) => {
+    if (checkbox.children) {
+      traverseCheckboxes(checkbox.children, callback);
+    }
+    callback(checkbox);
   });
 };
 const checkParentCheckboxes = (checkbox) => {
-  if (!checkbox.children) {
+  var _a;
+  if (!((_a = checkbox.children) == null ? void 0 : _a.length)) {
     return;
   }
   let checkedChildrenCount = 0;
   let bulkChildrenCount = 0;
-  checkbox.children.forEach((c) => {
-    c.checked ? checkedChildrenCount++ : "";
-    c.bulk ? bulkChildrenCount++ : "";
+  checkbox.children.forEach((child) => {
+    if (child.checked) {
+      checkedChildrenCount++;
+    }
+    if (child.bulk) {
+      bulkChildrenCount++;
+    }
   });
   if (checkedChildrenCount === checkbox.children.length) {
     checkbox.checked = true;
@@ -28,9 +35,9 @@ const checkChildrenCheckboxes = (checkbox) => {
   if (!checkbox.children) {
     return;
   }
-  checkbox.children.forEach((c) => {
-    c.checked = checkbox.checked;
-    checkChildrenCheckboxes(c);
+  checkbox.children.forEach((child) => {
+    child.checked = checkbox.checked;
+    checkChildrenCheckboxes(child);
   });
 };
 export {

package/components/CheckboxTree/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../src/components/CheckboxTree/utils.ts"],"sourcesContent":["import { ICheckboxTreeCheckboxData } from \"./types\";\n\n/** Обход ICheckboxData[]. */\nexport const traverseCheckboxes = (\n    checkboxes: ICheckboxTreeCheckboxData[],\n    cb: (checkbox: ICheckboxTreeCheckboxData) => void,\n) => {\n    checkboxes.forEach((c) => {\n        if (c.children) traverseCheckboxes(c.children, cb);\n        cb(c);\n    });\n};\n\n/** Обновление флага checked и bulk родителя, при изменении дочернего чекбокса. */\nexport const checkParentCheckboxes = (checkbox: ICheckboxTreeCheckboxData): void => {\n    if (!checkbox.children) {\n        return;\n    }\n\n    let checkedChildrenCount = 0;\n    let bulkChildrenCount = 0;\n\n    checkbox.children.forEach((c) => {\n        // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n        c.checked ? checkedChildrenCount++ : \"\";\n        // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n        c.bulk ? bulkChildrenCount++ : \"\";\n    });\n\n    // Все дочерние чекбоксы выбраны.\n    if (checkedChildrenCount === checkbox.children.length) {\n        checkbox.checked = true;\n        checkbox.bulk = bulkChildrenCount !== 0;\n    } else if (checkedChildrenCount > 0) {\n        // Некоторые дочерние чекбоксы выбраны.\n        checkbox.checked = true;\n        checkbox.bulk = true;\n    } else {\n        // Все дочерние чекбоксы не выбраны.\n        checkbox.checked = false;\n    }\n};\n\n/** Обновление флага checked дочерних чекбоксов, при изменении родителя. */\nexport const checkChildrenCheckboxes = (checkbox: ICheckboxTreeCheckboxData): void => {\n    if (!checkbox.children) {\n        return;\n    }\n\n    checkbox.children.forEach((c) => {\n        c.checked = checkbox.checked;\n        checkChildrenCheckboxes(c);\n    });\n};\n"],"names":[],"mappings":"AAGO,MAAM,qBAAqB,CAC9B,YACA,OACC;AACD,aAAW,QAAQ,CAAC,MAAM;AACtB,QAAI,EAAE,SAAU,oBAAmB,EAAE,UAAU,EAAE;AACjD,OAAG,CAAC;AAAA,EACR,CAAC;AACL;AAGO,MAAM,wBAAwB,CAAC,aAA8C;AAChF,MAAI,CAAC,SAAS,UAAU;AACpB;AAAA,EACJ;AAEA,MAAI,uBAAuB;AAC3B,MAAI,oBAAoB;AAExB,WAAS,SAAS,QAAQ,CAAC,MAAM;AAE7B,MAAE,UAAU,yBAAyB;AAErC,MAAE,OAAO,sBAAsB;AAAA,EACnC,CAAC;AAGD,MAAI,yBAAyB,SAAS,SAAS,QAAQ;AACnD,aAAS,UAAU;AACnB,aAAS,OAAO,sBAAsB;AAAA,EAC1C,WAAW,uBAAuB,GAAG;AAEjC,aAAS,UAAU;AACnB,aAAS,OAAO;AAAA,EACpB,OAAO;AAEH,aAAS,UAAU;AAAA,EACvB;AACJ;AAGO,MAAM,0BAA0B,CAAC,aAA8C;AAClF,MAAI,CAAC,SAAS,UAAU;AACpB;AAAA,EACJ;AAEA,WAAS,SAAS,QAAQ,CAAC,MAAM;AAC7B,MAAE,UAAU,SAAS;AACrB,4BAAwB,CAAC;AAAA,EAC7B,CAAC;AACL;"}
+{"version":3,"file":"utils.js","sources":["../../../src/components/CheckboxTree/utils.ts"],"sourcesContent":["import { ICheckboxTreeCheckboxData } from \"./types\";\n\n/**\n * Обход дерева чекбоксов в глубину, снизу вверх: callback вызывается сначала для потомков, затем для их родителя.\n * Такой порядок обязателен для checkParentCheckboxes — состояние родителя считается по уже пересчитанным потомкам.\n */\nexport const traverseCheckboxes = (\n    checkboxes: ICheckboxTreeCheckboxData[],\n    callback: (checkbox: ICheckboxTreeCheckboxData) => void,\n): void => {\n    checkboxes.forEach((checkbox) => {\n        if (checkbox.children) {\n            traverseCheckboxes(checkbox.children, callback);\n        }\n\n        callback(checkbox);\n    });\n};\n\n/**\n * Пересчёт флагов checked и bulk узла по состоянию его прямых потомков.\n * Узел без потомков не трогается: bulk у листа не имеет смысла и остаётся таким, каким его задал потребитель.\n * Пустой массив children — тоже лист: иначе условие «все потомки выбраны» выполнялось бы вырожденно (0 === 0)\n * и узел становился выбранным сам по себе.\n */\nexport const checkParentCheckboxes = (checkbox: ICheckboxTreeCheckboxData): void => {\n    if (!checkbox.children?.length) {\n        return;\n    }\n\n    let checkedChildrenCount = 0;\n    let bulkChildrenCount = 0;\n\n    checkbox.children.forEach((child) => {\n        if (child.checked) {\n            checkedChildrenCount++;\n        }\n\n        if (child.bulk) {\n            bulkChildrenCount++;\n        }\n    });\n\n    if (checkedChildrenCount === checkbox.children.length) {\n        // Все дочерние чекбоксы выбраны. Узел остаётся частично выбранным, если частично выбран кто-то из потомков.\n        checkbox.checked = true;\n        checkbox.bulk = bulkChildrenCount !== 0;\n    } else if (checkedChildrenCount > 0) {\n        // Выбрана только часть дочерних чекбоксов.\n        checkbox.checked = true;\n        checkbox.bulk = true;\n    } else {\n        // Не выбран ни один дочерний чекбокс.\n        checkbox.checked = false;\n    }\n};\n\n/** Проставление флага checked родителя всем его потомкам вниз по дереву, при изменении родителя. */\nexport const checkChildrenCheckboxes = (checkbox: ICheckboxTreeCheckboxData): void => {\n    if (!checkbox.children) {\n        return;\n    }\n\n    checkbox.children.forEach((child) => {\n        child.checked = checkbox.checked;\n        checkChildrenCheckboxes(child);\n    });\n};\n"],"names":[],"mappings":"AAMO,MAAM,qBAAqB,CAC9B,YACA,aACO;AACP,aAAW,QAAQ,CAAC,aAAa;AAC7B,QAAI,SAAS,UAAU;AACnB,yBAAmB,SAAS,UAAU,QAAQ;AAAA,IAClD;AAEA,aAAS,QAAQ;AAAA,EACrB,CAAC;AACL;AAQO,MAAM,wBAAwB,CAAC,aAA8C;AAnB7E;AAoBH,MAAI,GAAC,cAAS,aAAT,mBAAmB,SAAQ;AAC5B;AAAA,EACJ;AAEA,MAAI,uBAAuB;AAC3B,MAAI,oBAAoB;AAExB,WAAS,SAAS,QAAQ,CAAC,UAAU;AACjC,QAAI,MAAM,SAAS;AACf;AAAA,IACJ;AAEA,QAAI,MAAM,MAAM;AACZ;AAAA,IACJ;AAAA,EACJ,CAAC;AAED,MAAI,yBAAyB,SAAS,SAAS,QAAQ;AAEnD,aAAS,UAAU;AACnB,aAAS,OAAO,sBAAsB;AAAA,EAC1C,WAAW,uBAAuB,GAAG;AAEjC,aAAS,UAAU;AACnB,aAAS,OAAO;AAAA,EACpB,OAAO;AAEH,aAAS,UAAU;AAAA,EACvB;AACJ;AAGO,MAAM,0BAA0B,CAAC,aAA8C;AAClF,MAAI,CAAC,SAAS,UAAU;AACpB;AAAA,EACJ;AAEA,WAAS,SAAS,QAAQ,CAAC,UAAU;AACjC,UAAM,UAAU,SAAS;AACzB,4BAAwB,KAAK;AAAA,EACjC,CAAC;AACL;"}

package/components/CheckboxTreeExtended/CheckboxTreeExtended.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import React__default from "react";
-import { c as clsx } from "../../chunks/vendor-D4wvHis9.js";
+import { c as clsx } from "../../chunks/vendor-CUIykw0y.js";
 import { EComponentSize } from "../../enums/EComponentSize.js";
 import { CollapsibleTreeExtended } from "../CollapsibleTreeExtended/CollapsibleTreeExtended.js";
 import "../MobileView/MobileView.js";
@@ -8,15 +8,28 @@ import { useMobileView } from "../MobileView/useMobileView.js";
 import { CheckboxTreeExtendedContext } from "./CheckboxTreeExtendedContext.js";
 import { CheckboxTreeExtendedCheckbox } from "./components/CheckboxTreeExtendedCheckbox.js";
 import { CheckboxTreeExtendedNode } from "./components/CheckboxTreeExtendedNode.js";
-import { s as styles } from "../../chunks/CheckboxTreeExtended.module-BqOLLHuh.js";
-const CheckboxTreeExtended = ({ className, size = EComponentSize.MD, ...rest }) => {
-  const adaptive = useMobileView();
-  const contextValue = React__default.useMemo(() => ({ size: adaptive ? EComponentSize.MD : size }), [adaptive, size]);
-  return /* @__PURE__ */ jsx(CheckboxTreeExtendedContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(CollapsibleTreeExtended, { className: clsx(styles.checkboxTreeExtended, className), ...rest }) });
-};
+import { s as styles } from "../../chunks/CheckboxTreeExtended.module-Bn7_t4on.js";
+const CheckboxTreeExtended = Object.assign(
+  React__default.forwardRef(
+    ({ className, size = EComponentSize.MD, ...rest }, ref) => {
+      const adaptive = useMobileView();
+      const contextValue = React__default.useMemo(() => ({ size: adaptive ? EComponentSize.MD : size }), [adaptive, size]);
+      return /* @__PURE__ */ jsx(CheckboxTreeExtendedContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+        CollapsibleTreeExtended,
+        {
+          className: clsx(styles.checkboxTreeExtended, className),
+          ...rest,
+          ref
+        }
+      ) });
+    }
+  ),
+  {
+    Checkbox: CheckboxTreeExtendedCheckbox,
+    Node: CheckboxTreeExtendedNode
+  }
+);
 CheckboxTreeExtended.displayName = "CheckboxTreeExtended";
-CheckboxTreeExtended.Checkbox = CheckboxTreeExtendedCheckbox;
-CheckboxTreeExtended.Node = CheckboxTreeExtendedNode;
 export {
   CheckboxTreeExtended
 };

package/components/CheckboxTreeExtended/CheckboxTreeExtended.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxTreeExtended.js","sources":["../../../src/components/CheckboxTreeExtended/CheckboxTreeExtended.tsx"],"sourcesContent":["import React from \"react\";\nimport clsx from \"clsx\";\nimport { EComponentSize } from \"../../enums/EComponentSize\";\nimport {\n    CollapsibleTreeExtended,\n    ICollapsibleTreeExtendedProps,\n} from \"../CollapsibleTreeExtended/CollapsibleTreeExtended\";\nimport { useMobileView } from \"../MobileView\";\nimport { CheckboxTreeExtendedContext } from \"./CheckboxTreeExtendedContext\";\nimport { CheckboxTreeExtendedCheckbox } from \"./components/CheckboxTreeExtendedCheckbox\";\nimport { CheckboxTreeExtendedNode } from \"./components/CheckboxTreeExtendedNode\";\nimport styles from \"./styles/CheckboxTreeExtended.module.less\";\n\n/** Свойства CheckboxTreeExtended. */\nexport interface ICheckboxTreeExtendedProps extends ICollapsibleTreeExtendedProps {\n    /** Размер дерева чекбоксов. По умолчанию EComponentSize.MD. В мобильном представлении всегда EComponentSize.MD. */\n    size?: EComponentSize;\n}\n\n/** CheckboxTreeExtended вместе с составными частями. */\nexport interface ICheckboxTreeExtendedSFC extends React.FC<ICheckboxTreeExtendedProps> {\n    /** Чекбокс ноды дерева. */\n    Checkbox: typeof CheckboxTreeExtendedCheckbox;\n    /** Нода дерева. */\n    Node: typeof CheckboxTreeExtendedNode;\n}\n\n/**\n * Декларативное дерево чекбоксов.\n * Является оберткой над CollapsibleTreeExtended.\n */\nexport const CheckboxTreeExtended: ICheckboxTreeExtendedSFC = ({ className, size = EComponentSize.MD, ...rest }) => {\n    const adaptive = useMobileView();\n    // В мобильном представлении размер зафиксирован, чтобы область нажатия оставалась достаточной.\n    const contextValue = React.useMemo(() => ({ size: adaptive ? EComponentSize.MD : size }), [adaptive, size]);\n\n    return (\n        <CheckboxTreeExtendedContext.Provider value={contextValue}>\n            <CollapsibleTreeExtended className={clsx(styles.checkboxTreeExtended, className)} {...rest} />\n        </CheckboxTreeExtendedContext.Provider>\n    );\n};\n\nCheckboxTreeExtended.displayName = \"CheckboxTreeExtended\";\nCheckboxTreeExtended.Checkbox = CheckboxTreeExtendedCheckbox;\nCheckboxTreeExtended.Node = CheckboxTreeExtendedNode;\n"],"names":["React"],"mappings":";;;;;;;;;;;AA+BO,MAAM,uBAAiD,CAAC,EAAE,WAAW,OAAO,eAAe,IAAI,GAAG,WAAW;AAChH,QAAM,WAAW,cAAA;AAEjB,QAAM,eAAeA,eAAM,QAAQ,OAAO,EAAE,MAAM,WAAW,eAAe,KAAK,KAAA,IAAS,CAAC,UAAU,IAAI,CAAC;AAE1G,6BACK,4BAA4B,UAA5B,EAAqC,OAAO,cACzC,UAAA,oBAAC,yBAAA,EAAwB,WAAW,KAAK,OAAO,sBAAsB,SAAS,GAAI,GAAG,MAAM,GAChG;AAER;AAEA,qBAAqB,cAAc;AACnC,qBAAqB,WAAW;AAChC,qBAAqB,OAAO;"}
+{"version":3,"file":"CheckboxTreeExtended.js","sources":["../../../src/components/CheckboxTreeExtended/CheckboxTreeExtended.tsx"],"sourcesContent":["import React from \"react\";\nimport clsx from \"clsx\";\nimport { EComponentSize } from \"../../enums/EComponentSize\";\nimport {\n    CollapsibleTreeExtended,\n    ICollapsibleTreeExtendedProps,\n} from \"../CollapsibleTreeExtended/CollapsibleTreeExtended\";\nimport { useMobileView } from \"../MobileView\";\nimport { CheckboxTreeExtendedContext } from \"./CheckboxTreeExtendedContext\";\nimport { CheckboxTreeExtendedCheckbox } from \"./components/CheckboxTreeExtendedCheckbox\";\nimport { CheckboxTreeExtendedNode } from \"./components/CheckboxTreeExtendedNode\";\nimport styles from \"./styles/CheckboxTreeExtended.module.less\";\n\n/** Свойства CheckboxTreeExtended. */\nexport interface ICheckboxTreeExtendedProps extends ICollapsibleTreeExtendedProps {\n    /** Размер дерева чекбоксов. По умолчанию EComponentSize.MD. В мобильном представлении всегда EComponentSize.MD. */\n    size?: EComponentSize;\n}\n\n/**\n * CheckboxTreeExtended вместе с составными частями.\n *\n * Явная аннотация снимает проверку лишних свойств у Object.assign, поэтому при добавлении\n * или удалении статики этот интерфейс нужно править синхронно: иначе новая статика окажется\n * в рантайме, но не попадёт в публичный тип, и TypeScript промолчит.\n */\nexport interface ICheckboxTreeExtendedFC extends React.ForwardRefExoticComponent<\n    ICheckboxTreeExtendedProps & React.RefAttributes<HTMLUListElement>\n> {\n    /** Чекбокс ноды дерева. */\n    Checkbox: typeof CheckboxTreeExtendedCheckbox;\n    /** Нода дерева. */\n    Node: typeof CheckboxTreeExtendedNode;\n}\n\n/**\n * @deprecated Используйте ICheckboxTreeExtendedFC. Алиас сохранён, чтобы не ломать существующие импорты.\n */\nexport type ICheckboxTreeExtendedSFC = ICheckboxTreeExtendedFC;\n\n/**\n * Декларативное дерево чекбоксов.\n * Является оберткой над CollapsibleTreeExtended.\n *\n * ref указывает на корневой <ul role=\"tree\">.\n */\nexport const CheckboxTreeExtended: ICheckboxTreeExtendedFC = Object.assign(\n    React.forwardRef<HTMLUListElement, ICheckboxTreeExtendedProps>(\n        ({ className, size = EComponentSize.MD, ...rest }, ref) => {\n            const adaptive = useMobileView();\n            // В мобильном представлении размер зафиксирован, чтобы область нажатия оставалась достаточной.\n            const contextValue = React.useMemo(() => ({ size: adaptive ? EComponentSize.MD : size }), [adaptive, size]);\n\n            return (\n                <CheckboxTreeExtendedContext.Provider value={contextValue}>\n                    <CollapsibleTreeExtended\n                        className={clsx(styles.checkboxTreeExtended, className)}\n                        {...rest}\n                        ref={ref}\n                    />\n                </CheckboxTreeExtendedContext.Provider>\n            );\n        },\n    ),\n    {\n        Checkbox: CheckboxTreeExtendedCheckbox,\n        Node: CheckboxTreeExtendedNode,\n    },\n);\n\nCheckboxTreeExtended.displayName = \"CheckboxTreeExtended\";\n"],"names":["React"],"mappings":";;;;;;;;;;;AA8CO,MAAM,uBAAgD,OAAO;AAAA,EAChEA,eAAM;AAAA,IACF,CAAC,EAAE,WAAW,OAAO,eAAe,IAAI,GAAG,KAAA,GAAQ,QAAQ;AACvD,YAAM,WAAW,cAAA;AAEjB,YAAM,eAAeA,eAAM,QAAQ,OAAO,EAAE,MAAM,WAAW,eAAe,KAAK,KAAA,IAAS,CAAC,UAAU,IAAI,CAAC;AAE1G,aACI,oBAAC,4BAA4B,UAA5B,EAAqC,OAAO,cACzC,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAW,KAAK,OAAO,sBAAsB,SAAS;AAAA,UACrD,GAAG;AAAA,UACJ;AAAA,QAAA;AAAA,MAAA,GAER;AAAA,IAER;AAAA,EAAA;AAAA,EAEJ;AAAA,IACI,UAAU;AAAA,IACV,MAAM;AAAA,EAAA;AAEd;AAEA,qBAAqB,cAAc;"}

package/components/CheckboxTreeExtended/components/CheckboxTreeExtendedArrow.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { useRef, useEffect } from "react";
 import { CaretdownStrokeSrvIcon16 } from "@sberbusiness/icons-next";
 import { EVENT_KEY_CODES } from "../../../utils/keyboard.js";
-import { s as styles } from "../../../chunks/CheckboxTreeExtended.module-BqOLLHuh.js";
+import { s as styles } from "../../../chunks/CheckboxTreeExtended.module-Bn7_t4on.js";
 const CheckboxTreeExtendedArrow = ({ active, opened, toggle }) => {
   const arrowNode = useRef(null);
   const prevActive = useRef(active);

package/components/CheckboxTreeExtended/components/CheckboxTreeExtendedCheckbox.js

@@ -1,9 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import { useRef, useContext, useEffect } from "react";
-import { c as clsx } from "../../../chunks/vendor-D4wvHis9.js";
+import { c as clsx } from "../../../chunks/vendor-CUIykw0y.js";
 import { Checkbox } from "../../Checkbox/Checkbox.js";
 import { CheckboxTreeExtendedContext } from "../CheckboxTreeExtendedContext.js";
-import { s as styles } from "../../../chunks/CheckboxTreeExtended.module-BqOLLHuh.js";
+import { s as styles } from "../../../chunks/CheckboxTreeExtended.module-Bn7_t4on.js";
 const CheckboxTreeExtendedCheckbox = ({
   active,
   className,

package/components/CheckboxTreeExtended/components/CheckboxTreeExtendedNode.js

@@ -1,12 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useContext } from "react";
-import { c as clsx } from "../../../chunks/vendor-D4wvHis9.js";
+import { c as clsx } from "../../../chunks/vendor-CUIykw0y.js";
 import { createSizeToClassNameMap } from "../../../utils/classNameMaps.js";
 import { CollapsibleTreeExtended } from "../../CollapsibleTreeExtended/CollapsibleTreeExtended.js";
 import { CheckboxTreeExtendedContext } from "../CheckboxTreeExtendedContext.js";
 import { isStaticCheckboxTreeExtended } from "../isStaticCheckboxTreeExtended.js";
 import "./CheckboxTreeExtendedArrow.js";
-import { s as styles } from "../../../chunks/CheckboxTreeExtended.module-BqOLLHuh.js";
+import { s as styles } from "../../../chunks/CheckboxTreeExtended.module-Bn7_t4on.js";
 const sizeToClassNameMap = createSizeToClassNameMap(styles);
 const CheckboxTreeExtendedNode = ({
   children,

package/components/Chip/Chip.js

@@ -1,13 +1,13 @@
 import "react/jsx-runtime";
 import "react";
-import "../../chunks/vendor-D4wvHis9.js";
+import "../../chunks/vendor-CUIykw0y.js";
 import "../../enums/EComponentSize.js";
 import "../../utils/classNameMaps.js";
 import "../../utils/keyboard.js";
 import "../Badge/Badge.js";
 import "../IconWrapper/IconWrapper.js";
 import "./enums.js";
-import { C } from "../../chunks/Chip-CWaqKk62.js";
+import { C } from "../../chunks/Chip-DNn2jKWv.js";
 export {
   C as Chip
 };

package/components/Chip/ChipClearButton.js

@@ -1,10 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import React__default from "react";
-import { c as clsx } from "../../chunks/vendor-D4wvHis9.js";
+import { c as clsx } from "../../chunks/vendor-CUIykw0y.js";
 import { CrossStrokeSrvIcon24, CrossStrokeSrvIcon20, CrossStrokeSrvIcon16 } from "@sberbusiness/icons-next";
 import { EComponentSize } from "../../enums/EComponentSize.js";
 import { ButtonIcon } from "../Button/ButtonIcon.js";
-const chipClearButton = "chipClearButton__5fe8a331";
+const chipClearButton = "chipClearButton__6646d62e";
 const styles = {
   chipClearButton
 };

package/components/Chip/ChipDatePicker/ChipDatePicker.js

@@ -7,7 +7,7 @@ import { DatePickerExtended } from "../../DatePickerExtended/DatePickerExtended.
 import { ChipDatePickerTarget } from "./ChipDatePickerTarget.js";
 import { inputDateFormat } from "../../DateField/constants.js";
 import { DropdownMobileMaskedInput } from "../../Dropdown/mobile/DropdownMobileMaskedInput.js";
-import { s as styles } from "../../../chunks/Chip-CWaqKk62.js";
+import { s as styles } from "../../../chunks/Chip-DNn2jKWv.js";
 const ChipDatePicker = React__default.forwardRef((props, ref) => {
   const {
     size,

package/components/Chip/ChipDatePicker/ChipDatePickerTarget.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import React__default, { useContext } from "react";
-import { C as Chip } from "../../../chunks/Chip-CWaqKk62.js";
+import { C as Chip } from "../../../chunks/Chip-DNn2jKWv.js";
 import { ChipDropdownArrow } from "../ChipDropdownArrow.js";
 import { ChipClearButton } from "../ChipClearButton.js";
 import { DatePickerExtendedContext } from "../../DatePickerExtended/DatePickerExtendedContext.js";

package/components/Chip/ChipDropdownArrow.js

@@ -1,9 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import { CaretdownStrokeSrvIcon24, CaretdownStrokeSrvIcon20, CaretdownStrokeSrvIcon16 } from "@sberbusiness/icons-next";
-import { c as clsx } from "../../chunks/vendor-D4wvHis9.js";
+import { c as clsx } from "../../chunks/vendor-CUIykw0y.js";
 import { EComponentSize } from "../../enums/EComponentSize.js";
-const chipDropdownArrow = "chipDropdownArrow__297f02aa";
-const rotated = "rotated__cfde7fc9";
+const chipDropdownArrow = "chipDropdownArrow__3f54dd95";
+const rotated = "rotated__d28dcab6";
 const styles = {
   chipDropdownArrow,
   rotated

package/components/Chip/ChipIcon.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import React__default from "react";
-import { C as Chip } from "../../chunks/Chip-CWaqKk62.js";
+import { C as Chip } from "../../chunks/Chip-DNn2jKWv.js";
 const ChipIcon = React__default.forwardRef(({ children, ...rest }, ref) => /* @__PURE__ */ jsx(Chip, { ...rest, prefix: children, postfix: /* @__PURE__ */ jsx("span", {}), ref }));
 ChipIcon.displayName = "ChipIcon";
 export {

package/components/Chip/ChipMonthYearPicker/ChipMonthYearPicker.js

@@ -0,0 +1,70 @@
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import { c as clsx } from "../../../chunks/vendor-CUIykw0y.js";
+import { MonthYearPickerUtils } from "../../MonthYearField/utils.js";
+import { ChipMonthYearPickerTarget } from "./ChipMonthYearPickerTarget.js";
+import { dateFormatYYYYMMDD, globalLimitRange } from "../../../consts/DateConst.js";
+import { DatePickerExtended } from "../../DatePickerExtended/DatePickerExtended.js";
+import { DropdownMobileInput } from "../../Dropdown/mobile/DropdownMobileInput.js";
+import { ECalendarPickType } from "../../Calendar/enums.js";
+import { s as styles } from "../../../chunks/Chip-DNn2jKWv.js";
+const ChipMonthYearPicker = React__default.forwardRef((props, ref) => {
+  const {
+    className,
+    size,
+    value,
+    placeholder,
+    format = dateFormatYYYYMMDD,
+    limitRange = globalLimitRange,
+    type,
+    label,
+    displayedValue,
+    disabled,
+    clearButtonProps,
+    onChange,
+    ...rest
+  } = props;
+  const pickerValues = MonthYearPickerUtils.getPickerValues(value, format, limitRange);
+  const handleClear = () => {
+    onChange("");
+  };
+  const renderTarget = () => {
+    const selected = pickerValues.calendarDate !== null;
+    return /* @__PURE__ */ jsx(
+      ChipMonthYearPickerTarget,
+      {
+        type,
+        size,
+        selected,
+        disabled,
+        clearButtonProps,
+        onClear: handleClear,
+        children: selected ? displayedValue ?? pickerValues.inputString : label
+      }
+    );
+  };
+  const renderDropdownHeaderTarget = () => /* @__PURE__ */ jsx(DropdownMobileInput, { value: pickerValues.inputString, placeholder, readOnly: true });
+  const handleDateChange = (date) => {
+    onChange(date.format(format));
+  };
+  return /* @__PURE__ */ jsx(
+    DatePickerExtended,
+    {
+      className: clsx(styles.chipGroupItem, className),
+      renderTarget,
+      renderDropdownHeaderTarget,
+      pickedDate: pickerValues.calendarDate,
+      pickType: ECalendarPickType.MONTH_YEAR,
+      format,
+      limitRange,
+      onDateChange: handleDateChange,
+      ...rest,
+      ref
+    }
+  );
+});
+ChipMonthYearPicker.displayName = "ChipMonthYearPicker";
+export {
+  ChipMonthYearPicker
+};
+//# sourceMappingURL=ChipMonthYearPicker.js.map

package/components/Chip/ChipMonthYearPicker/ChipMonthYearPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipMonthYearPicker.js","sources":["../../../../src/components/Chip/ChipMonthYearPicker/ChipMonthYearPicker.tsx"],"sourcesContent":["import React from \"react\";\nimport clsx from \"clsx\";\nimport moment from \"moment\";\nimport { IMonthYearFieldProps } from \"../../MonthYearField/types\";\nimport { MonthYearPickerUtils } from \"../../MonthYearField/utils\";\nimport { IChipProps } from \"../Chip\";\nimport { ChipMonthYearPickerTarget, IChipMonthYearPickerTargetProps } from \"./ChipMonthYearPickerTarget\";\nimport { dateFormatYYYYMMDD, globalLimitRange } from \"../../../consts/DateConst\";\nimport { DatePickerExtended } from \"../../DatePickerExtended/DatePickerExtended\";\nimport { DropdownMobileInput } from \"../../Dropdown/mobile/DropdownMobileInput\";\nimport { ECalendarPickType } from \"../../Calendar/enums\";\nimport styles from \"../styles/Chip.module.less\";\n\n/** Свойства компонента ChipMonthYearPicker. */\nexport interface IChipMonthYearPickerProps\n    extends\n        Omit<IMonthYearFieldProps, \"status\" | \"label\" | \"onClear\" | \"targetProps\" | \"pickType\">,\n        Pick<IChipProps, \"type\" | \"disabled\"> {\n    /** Название поля, когда не выбрано значение. */\n    label: React.ReactNode;\n    /** Лейбл, отображаемый вместо выбранного значения. */\n    displayedValue?: React.ReactNode;\n    /** Свойства кнопки очищения значения, например aria-label. */\n    clearButtonProps?: IChipMonthYearPickerTargetProps[\"clearButtonProps\"];\n}\n\n/** MonthYearPicker с видом компонента Chip. */\nexport const ChipMonthYearPicker = React.forwardRef<HTMLDivElement, IChipMonthYearPickerProps>((props, ref) => {\n    const {\n        className,\n        size,\n        value,\n        placeholder,\n        format = dateFormatYYYYMMDD,\n        limitRange = globalLimitRange,\n        type,\n        label,\n        displayedValue,\n        disabled,\n        clearButtonProps,\n        onChange,\n        ...rest\n    } = props;\n    const pickerValues = MonthYearPickerUtils.getPickerValues(value, format, limitRange);\n\n    const handleClear = () => {\n        onChange(\"\");\n    };\n\n    const renderTarget = () => {\n        const selected = pickerValues.calendarDate !== null;\n\n        return (\n            <ChipMonthYearPickerTarget\n                type={type}\n                size={size}\n                selected={selected}\n                disabled={disabled}\n                clearButtonProps={clearButtonProps}\n                onClear={handleClear}\n            >\n                {selected ? (displayedValue ?? pickerValues.inputString) : label}\n            </ChipMonthYearPickerTarget>\n        );\n    };\n\n    const renderDropdownHeaderTarget = () => (\n        <DropdownMobileInput value={pickerValues.inputString} placeholder={placeholder} readOnly />\n    );\n\n    const handleDateChange = (date: moment.Moment) => {\n        onChange(date.format(format));\n    };\n\n    return (\n        <DatePickerExtended\n            className={clsx(styles.chipGroupItem, className)}\n            renderTarget={renderTarget}\n            renderDropdownHeaderTarget={renderDropdownHeaderTarget}\n            pickedDate={pickerValues.calendarDate}\n            pickType={ECalendarPickType.MONTH_YEAR}\n            format={format}\n            limitRange={limitRange}\n            onDateChange={handleDateChange}\n            {...rest}\n            ref={ref}\n        />\n    );\n});\n\nChipMonthYearPicker.displayName = \"ChipMonthYearPicker\";\n"],"names":["React"],"mappings":";;;;;;;;;;AA2BO,MAAM,sBAAsBA,eAAM,WAAsD,CAAC,OAAO,QAAQ;AAC3G,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACH;AACJ,QAAM,eAAe,qBAAqB,gBAAgB,OAAO,QAAQ,UAAU;AAEnF,QAAM,cAAc,MAAM;AACtB,aAAS,EAAE;AAAA,EACf;AAEA,QAAM,eAAe,MAAM;AACvB,UAAM,WAAW,aAAa,iBAAiB;AAE/C,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACG;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,SAAS;AAAA,QAER,UAAA,WAAY,kBAAkB,aAAa,cAAe;AAAA,MAAA;AAAA,IAAA;AAAA,EAGvE;AAEA,QAAM,6BAA6B,MAC/B,oBAAC,qBAAA,EAAoB,OAAO,aAAa,aAAa,aAA0B,UAAQ,KAAA,CAAC;AAG7F,QAAM,mBAAmB,CAAC,SAAwB;AAC9C,aAAS,KAAK,OAAO,MAAM,CAAC;AAAA,EAChC;AAEA,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW,KAAK,OAAO,eAAe,SAAS;AAAA,MAC/C;AAAA,MACA;AAAA,MACA,YAAY,aAAa;AAAA,MACzB,UAAU,kBAAkB;AAAA,MAC5B;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACb,GAAG;AAAA,MACJ;AAAA,IAAA;AAAA,EAAA;AAGZ,CAAC;AAED,oBAAoB,cAAc;"}

package/components/Chip/ChipMonthYearPicker/ChipMonthYearPickerTarget.js

@@ -0,0 +1,72 @@
+import { jsx } from "react/jsx-runtime";
+import React__default, { useContext } from "react";
+import { C as Chip } from "../../../chunks/Chip-DNn2jKWv.js";
+import { ChipDropdownArrow } from "../ChipDropdownArrow.js";
+import { ChipClearButton } from "../ChipClearButton.js";
+import { DatePickerExtendedContext } from "../../DatePickerExtended/DatePickerExtendedContext.js";
+import { isKey } from "../../../utils/keyboard.js";
+const ChipMonthYearPickerTarget = React__default.forwardRef(
+  (props, ref) => {
+    const { children, size, selected, disabled, onKeyDown, onClick, onClear, clearButtonProps, ...restProps } = props;
+    const { dropdownOpen, setDropdownOpen } = useContext(DatePickerExtendedContext);
+    const handleKeyDown = (event) => {
+      if (!disabled && (isKey(event.code, "ENTER") || isKey(event.code, "SPACE"))) {
+        event.preventDefault();
+        setDropdownOpen(!dropdownOpen);
+      }
+      onKeyDown == null ? void 0 : onKeyDown(event);
+    };
+    const handleClick = (event) => {
+      if (disabled) {
+        return;
+      }
+      setDropdownOpen(!dropdownOpen);
+      onClick == null ? void 0 : onClick(event);
+    };
+    const handleClearButtonKeyDown = (event) => {
+      if (isKey(event.code, "ENTER") || isKey(event.code, "SPACE")) {
+        event.stopPropagation();
+      }
+    };
+    const handleClearButtonClick = (event) => {
+      event.stopPropagation();
+      onClear();
+    };
+    const renderTargetPostfix = () => {
+      if (selected) {
+        return /* @__PURE__ */ jsx(
+          ChipClearButton,
+          {
+            ...clearButtonProps,
+            size,
+            disabled,
+            onClick: handleClearButtonClick,
+            onKeyDown: handleClearButtonKeyDown
+          }
+        );
+      } else {
+        return /* @__PURE__ */ jsx(ChipDropdownArrow, { size, rotated: dropdownOpen });
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      Chip,
+      {
+        size,
+        selected,
+        disabled,
+        "aria-expanded": dropdownOpen,
+        onKeyDown: handleKeyDown,
+        onClick: handleClick,
+        postfix: renderTargetPostfix(),
+        ...restProps,
+        ref,
+        children
+      }
+    );
+  }
+);
+ChipMonthYearPickerTarget.displayName = "ChipMonthYearPickerTarget";
+export {
+  ChipMonthYearPickerTarget
+};
+//# sourceMappingURL=ChipMonthYearPickerTarget.js.map

package/components/Chip/ChipMonthYearPicker/ChipMonthYearPickerTarget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipMonthYearPickerTarget.js","sources":["../../../../src/components/Chip/ChipMonthYearPicker/ChipMonthYearPickerTarget.tsx"],"sourcesContent":["import React, { useContext } from \"react\";\nimport { Chip, IChipProps } from \"../Chip\";\nimport { ChipDropdownArrow } from \"../ChipDropdownArrow\";\nimport { ChipClearButton, IChipClearButtonProps } from \"../ChipClearButton\";\nimport { DatePickerExtendedContext } from \"../../DatePickerExtended/DatePickerExtendedContext\";\nimport { isKey } from \"../../../utils/keyboard\";\n\n/** Свойства компонента ChipMonthYearPickerTarget. */\nexport interface IChipMonthYearPickerTargetProps extends IChipProps {\n    /** Обработчик очищения значения. */\n    onClear: () => void;\n    /** Свойства кнопки очищения значения, например aria-label. */\n    clearButtonProps?: Omit<IChipClearButtonProps, \"size\" | \"disabled\" | \"onClick\" | \"onKeyDown\">;\n}\n\n/** Целевой элемент компонента ChipMonthYearPicker. */\nexport const ChipMonthYearPickerTarget = React.forwardRef<HTMLSpanElement, IChipMonthYearPickerTargetProps>(\n    (props, ref) => {\n        const { children, size, selected, disabled, onKeyDown, onClick, onClear, clearButtonProps, ...restProps } =\n            props;\n        const { dropdownOpen, setDropdownOpen } = useContext(DatePickerExtendedContext);\n\n        const handleKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {\n            if (!disabled && (isKey(event.code, \"ENTER\") || isKey(event.code, \"SPACE\"))) {\n                event.preventDefault();\n                setDropdownOpen(!dropdownOpen);\n            }\n\n            onKeyDown?.(event);\n        };\n\n        const handleClick = (event: React.MouseEvent<HTMLSpanElement>) => {\n            if (disabled) {\n                return;\n            }\n\n            setDropdownOpen(!dropdownOpen);\n            onClick?.(event);\n        };\n\n        /** Нажатие на кнопке очищения не должно всплывать в чип и открывать дропдаун. */\n        const handleClearButtonKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n            if (isKey(event.code, \"ENTER\") || isKey(event.code, \"SPACE\")) {\n                event.stopPropagation();\n            }\n        };\n\n        const handleClearButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n            event.stopPropagation();\n            onClear();\n        };\n\n        const renderTargetPostfix = () => {\n            if (selected) {\n                return (\n                    <ChipClearButton\n                        {...clearButtonProps}\n                        size={size}\n                        disabled={disabled}\n                        onClick={handleClearButtonClick}\n                        onKeyDown={handleClearButtonKeyDown}\n                    />\n                );\n            } else {\n                return <ChipDropdownArrow size={size} rotated={dropdownOpen} />;\n            }\n        };\n\n        return (\n            <Chip\n                size={size}\n                selected={selected}\n                disabled={disabled}\n                aria-expanded={dropdownOpen}\n                onKeyDown={handleKeyDown}\n                onClick={handleClick}\n                postfix={renderTargetPostfix()}\n                {...restProps}\n                ref={ref}\n            >\n                {children}\n            </Chip>\n        );\n    },\n);\n\nChipMonthYearPickerTarget.displayName = \"ChipMonthYearPickerTarget\";\n"],"names":["React"],"mappings":";;;;;;;AAgBO,MAAM,4BAA4BA,eAAM;AAAA,EAC3C,CAAC,OAAO,QAAQ;AACZ,UAAM,EAAE,UAAU,MAAM,UAAU,UAAU,WAAW,SAAS,SAAS,kBAAkB,GAAG,UAAA,IAC1F;AACJ,UAAM,EAAE,cAAc,oBAAoB,WAAW,yBAAyB;AAE9E,UAAM,gBAAgB,CAAC,UAAgD;AACnE,UAAI,CAAC,aAAa,MAAM,MAAM,MAAM,OAAO,KAAK,MAAM,MAAM,MAAM,OAAO,IAAI;AACzE,cAAM,eAAA;AACN,wBAAgB,CAAC,YAAY;AAAA,MACjC;AAEA,6CAAY;AAAA,IAChB;AAEA,UAAM,cAAc,CAAC,UAA6C;AAC9D,UAAI,UAAU;AACV;AAAA,MACJ;AAEA,sBAAgB,CAAC,YAAY;AAC7B,yCAAU;AAAA,IACd;AAGA,UAAM,2BAA2B,CAAC,UAAkD;AAChF,UAAI,MAAM,MAAM,MAAM,OAAO,KAAK,MAAM,MAAM,MAAM,OAAO,GAAG;AAC1D,cAAM,gBAAA;AAAA,MACV;AAAA,IACJ;AAEA,UAAM,yBAAyB,CAAC,UAA+C;AAC3E,YAAM,gBAAA;AACN,cAAA;AAAA,IACJ;AAEA,UAAM,sBAAsB,MAAM;AAC9B,UAAI,UAAU;AACV,eACI;AAAA,UAAC;AAAA,UAAA;AAAA,YACI,GAAG;AAAA,YACJ;AAAA,YACA;AAAA,YACA,SAAS;AAAA,YACT,WAAW;AAAA,UAAA;AAAA,QAAA;AAAA,MAGvB,OAAO;AACH,eAAO,oBAAC,mBAAA,EAAkB,MAAY,SAAS,aAAA,CAAc;AAAA,MACjE;AAAA,IACJ;AAEA,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACG;AAAA,QACA;AAAA,QACA;AAAA,QACA,iBAAe;AAAA,QACf,WAAW;AAAA,QACX,SAAS;AAAA,QACT,SAAS,oBAAA;AAAA,QACR,GAAG;AAAA,QACJ;AAAA,QAEC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGb;AACJ;AAEA,0BAA0B,cAAc;"}

package/components/Chip/ChipMonthYearPicker/index.js

@@ -0,0 +1,7 @@
+import { ChipMonthYearPicker } from "./ChipMonthYearPicker.js";
+import { ChipMonthYearPickerTarget } from "./ChipMonthYearPickerTarget.js";
+export {
+  ChipMonthYearPicker,
+  ChipMonthYearPickerTarget
+};
+//# sourceMappingURL=index.js.map

package/components/Chip/ChipMonthYearPicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/components/Chip/ChipMultiselect.js

@@ -1,22 +1,25 @@
 import { jsx } from "react/jsx-runtime";
-import React__default from "react";
+import React__default, { useCallback } from "react";
+import { c as clsx } from "../../chunks/vendor-CUIykw0y.js";
 import { MultiselectField } from "../MultiselectField/MultiselectField.js";
-import { s as styles, C as Chip } from "../../chunks/Chip-CWaqKk62.js";
+import { isKey } from "../../utils/keyboard.js";
+import { s as styles, C as Chip } from "../../chunks/Chip-DNn2jKWv.js";
 import { ChipClearButton } from "./ChipClearButton.js";
 import { ChipDropdownArrow } from "./ChipDropdownArrow.js";
-import { isKey } from "../../utils/keyboard.js";
-import { c as clsx } from "../../chunks/vendor-D4wvHis9.js";
 const ChipMultiselect = React__default.forwardRef(
-  ({ children, className, clearSelected, disabled, label, displayedValue, selected, size, type, ...restProps }, ref) => {
-    const handleKeyDownClearButton = (event) => {
+  ({ children, className, clearSelected, disabled, displayedValue, label, selected, size, type, ...restProps }, ref) => {
+    const handleKeyDownClearButton = useCallback((event) => {
       if (isKey(event.code, "ENTER") || isKey(event.code, "SPACE")) {
         event.stopPropagation();
       }
-    };
-    const handleClickClearButton = (event) => {
-      event.stopPropagation();
-      clearSelected();
-    };
+    }, []);
+    const handleClickClearButton = useCallback(
+      (event) => {
+        event.stopPropagation();
+        clearSelected();
+      },
+      [clearSelected]
+    );
     const renderTarget = ({ opened, setOpened }) => {
       const handleKeyDown = (event) => {
         if (isKey(event.code, "ENTER") || isKey(event.code, "SPACE")) {
@@ -42,7 +45,7 @@ const ChipMultiselect = React__default.forwardRef(
           ) : /* @__PURE__ */ jsx(ChipDropdownArrow, { size, rotated: opened }),
           ref,
           role: "listbox",
-          selected: Boolean(selected),
+          selected,
           children: selected ? displayedValue ?? label : label
         }
       );

package/components/Chip/ChipMultiselect.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipMultiselect.js","sources":["../../../src/components/Chip/ChipMultiselect.tsx"],"sourcesContent":["import React from \"react\";\nimport { IMultiselectFieldProps, MultiselectField } from \"../MultiselectField\";\nimport { Chip, IChipProps } from \"./Chip\";\nimport { ChipClearButton } from \"./ChipClearButton\";\nimport { ChipDropdownArrow } from \"./ChipDropdownArrow\";\nimport { ISelectExtendedFieldTargetProvideProps } from \"../SelectExtendedField\";\nimport { isKey } from \"../../utils/keyboard\";\nimport styles from \"./styles/Chip.module.less\";\nimport clsx from \"clsx\";\n\nexport interface IChipMultiselectProps extends Omit<IMultiselectFieldProps, \"renderTarget\">, Pick<IChipProps, \"type\"> {\n    /** Функция отмены выбора. */\n    clearSelected: () => void;\n    /** Состояние disabled. */\n    disabled?: boolean;\n    /** Флаг, выбран хоть один вариант. */\n    selected?: boolean;\n    /** Название поля или число выбранных вариантов. */\n    label: React.ReactNode;\n    /** Лейбл, отображаемый вместо выбранного значения. */\n    displayedValue?: React.ReactNode;\n}\n\n/**\n * Компонент выбора нескольких значений из списка.\n * Количество выбранных значений отображается компонентом Chip.\n */\nexport const ChipMultiselect = React.forwardRef<HTMLDivElement, IChipMultiselectProps>(\n    (\n        { children, className, clearSelected, disabled, label, displayedValue, selected, size, type, ...restProps },\n        ref,\n    ) => {\n        const handleKeyDownClearButton = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n            if (isKey(event.code, \"ENTER\") || isKey(event.code, \"SPACE\")) {\n                // Предотвращаем всплытие события до Chip\n                event.stopPropagation();\n            }\n        };\n\n        const handleClickClearButton = (event: React.MouseEvent<HTMLButtonElement>) => {\n            // Предотвращаем всплытие события до Chip\n            event.stopPropagation();\n\n            clearSelected();\n        };\n\n        const renderTarget = ({ opened, setOpened }: ISelectExtendedFieldTargetProvideProps) => {\n            const handleKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {\n                if (isKey(event.code, \"ENTER\") || isKey(event.code, \"SPACE\")) {\n                    setOpened(!opened);\n                }\n            };\n\n            return (\n                <Chip\n                    aria-expanded={opened}\n                    disabled={disabled}\n                    size={size}\n                    type={type}\n                    onClick={() => setOpened(!opened)}\n                    onKeyDown={handleKeyDown}\n                    postfix={\n                        selected ? (\n                            <ChipClearButton\n                                size={size}\n                                onKeyDown={handleKeyDownClearButton}\n                                onClick={handleClickClearButton}\n                            />\n                        ) : (\n                            <ChipDropdownArrow size={size} rotated={opened} />\n                        )\n                    }\n                    ref={ref}\n                    role=\"listbox\"\n                    selected={Boolean(selected)}\n                >\n                    {selected ? (displayedValue ?? label) : label}\n                </Chip>\n            );\n        };\n\n        return (\n            <MultiselectField\n                size={size}\n                renderTarget={renderTarget}\n                className={clsx(styles.chipGroupItem, className)}\n                {...restProps}\n            >\n                {children}\n            </MultiselectField>\n        );\n    },\n);\n\nChipMultiselect.displayName = \"ChipMultiselect\";\n"],"names":["React"],"mappings":";;;;;;;;AA2BO,MAAM,kBAAkBA,eAAM;AAAA,EACjC,CACI,EAAE,UAAU,WAAW,eAAe,UAAU,OAAO,gBAAgB,UAAU,MAAM,MAAM,GAAG,UAAA,GAChG,QACC;AACD,UAAM,2BAA2B,CAAC,UAAkD;AAChF,UAAI,MAAM,MAAM,MAAM,OAAO,KAAK,MAAM,MAAM,MAAM,OAAO,GAAG;AAE1D,cAAM,gBAAA;AAAA,MACV;AAAA,IACJ;AAEA,UAAM,yBAAyB,CAAC,UAA+C;AAE3E,YAAM,gBAAA;AAEN,oBAAA;AAAA,IACJ;AAEA,UAAM,eAAe,CAAC,EAAE,QAAQ,gBAAwD;AACpF,YAAM,gBAAgB,CAAC,UAAgD;AACnE,YAAI,MAAM,MAAM,MAAM,OAAO,KAAK,MAAM,MAAM,MAAM,OAAO,GAAG;AAC1D,oBAAU,CAAC,MAAM;AAAA,QACrB;AAAA,MACJ;AAEA,aACI;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,iBAAe;AAAA,UACf;AAAA,UACA;AAAA,UACA;AAAA,UACA,SAAS,MAAM,UAAU,CAAC,MAAM;AAAA,UAChC,WAAW;AAAA,UACX,SACI,WACI;AAAA,YAAC;AAAA,YAAA;AAAA,cACG;AAAA,cACA,WAAW;AAAA,cACX,SAAS;AAAA,YAAA;AAAA,UAAA,IAGb,oBAAC,mBAAA,EAAkB,MAAY,SAAS,OAAA,CAAQ;AAAA,UAGxD;AAAA,UACA,MAAK;AAAA,UACL,UAAU,QAAQ,QAAQ;AAAA,UAEzB,UAAA,WAAY,kBAAkB,QAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAGpD;AAEA,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACG;AAAA,QACA;AAAA,QACA,WAAW,KAAK,OAAO,eAAe,SAAS;AAAA,QAC9C,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGb;AACJ;AAEA,gBAAgB,cAAc;"}
+{"version":3,"file":"ChipMultiselect.js","sources":["../../../src/components/Chip/ChipMultiselect.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport clsx from \"clsx\";\nimport { IMultiselectFieldProps, MultiselectField } from \"../MultiselectField\";\nimport { ISelectExtendedFieldTargetProvideProps } from \"../SelectExtendedField\";\nimport { isKey } from \"../../utils/keyboard\";\nimport { Chip, IChipProps } from \"./Chip\";\nimport { ChipClearButton } from \"./ChipClearButton\";\nimport { ChipDropdownArrow } from \"./ChipDropdownArrow\";\nimport styles from \"./styles/Chip.module.less\";\n\n/** Свойства компонента ChipMultiselect. */\nexport interface IChipMultiselectProps extends Omit<IMultiselectFieldProps, \"renderTarget\">, Pick<IChipProps, \"type\"> {\n    /** Функция отмены выбора. Вызывается по нажатию на кнопку сброса. */\n    clearSelected: () => void;\n    /** Состояние disabled. */\n    disabled?: boolean;\n    /** Флаг, выбран хоть один вариант. */\n    selected?: boolean;\n    /** Название поля или число выбранных вариантов. */\n    label: React.ReactNode;\n    /** Лейбл, отображаемый вместо выбранного значения. Показывается только при selected. */\n    displayedValue?: React.ReactNode;\n}\n\n/**\n * Компонент выбора нескольких значений из списка.\n * Количество выбранных значений отображается компонентом Chip.\n *\n * Надстройка над MultiselectField: состоянием открытости и выпадающим блоком владеет\n * MultiselectField, а полем выбора выступает Chip. Внешний ref уходит на этот Chip,\n * а не на корневой элемент MultiselectField.\n */\nexport const ChipMultiselect = React.forwardRef<HTMLDivElement, IChipMultiselectProps>(\n    (\n        { children, className, clearSelected, disabled, displayedValue, label, selected, size, type, ...restProps },\n        ref,\n    ) => {\n        const handleKeyDownClearButton = useCallback((event: React.KeyboardEvent<HTMLButtonElement>) => {\n            if (isKey(event.code, \"ENTER\") || isKey(event.code, \"SPACE\")) {\n                // Предотвращаем всплытие события до Chip, иначе сброс выбора заодно открыл бы список.\n                event.stopPropagation();\n            }\n        }, []);\n\n        const handleClickClearButton = useCallback(\n            (event: React.MouseEvent<HTMLButtonElement>) => {\n                // Предотвращаем всплытие события до Chip, иначе сброс выбора заодно открыл бы список.\n                event.stopPropagation();\n\n                clearSelected();\n            },\n            [clearSelected],\n        );\n\n        const renderTarget = ({ opened, setOpened }: ISelectExtendedFieldTargetProvideProps) => {\n            const handleKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {\n                if (isKey(event.code, \"ENTER\") || isKey(event.code, \"SPACE\")) {\n                    setOpened(!opened);\n                }\n            };\n\n            return (\n                <Chip\n                    aria-expanded={opened}\n                    disabled={disabled}\n                    size={size}\n                    type={type}\n                    onClick={() => setOpened(!opened)}\n                    onKeyDown={handleKeyDown}\n                    postfix={\n                        selected ? (\n                            <ChipClearButton\n                                size={size}\n                                onKeyDown={handleKeyDownClearButton}\n                                onClick={handleClickClearButton}\n                            />\n                        ) : (\n                            <ChipDropdownArrow size={size} rotated={opened} />\n                        )\n                    }\n                    ref={ref}\n                    role=\"listbox\"\n                    selected={selected}\n                >\n                    {selected ? (displayedValue ?? label) : label}\n                </Chip>\n            );\n        };\n\n        return (\n            <MultiselectField\n                size={size}\n                renderTarget={renderTarget}\n                className={clsx(styles.chipGroupItem, className)}\n                {...restProps}\n            >\n                {children}\n            </MultiselectField>\n        );\n    },\n);\n\nChipMultiselect.displayName = \"ChipMultiselect\";\n"],"names":["React"],"mappings":";;;;;;;;AAgCO,MAAM,kBAAkBA,eAAM;AAAA,EACjC,CACI,EAAE,UAAU,WAAW,eAAe,UAAU,gBAAgB,OAAO,UAAU,MAAM,MAAM,GAAG,UAAA,GAChG,QACC;AACD,UAAM,2BAA2B,YAAY,CAAC,UAAkD;AAC5F,UAAI,MAAM,MAAM,MAAM,OAAO,KAAK,MAAM,MAAM,MAAM,OAAO,GAAG;AAE1D,cAAM,gBAAA;AAAA,MACV;AAAA,IACJ,GAAG,CAAA,CAAE;AAEL,UAAM,yBAAyB;AAAA,MAC3B,CAAC,UAA+C;AAE5C,cAAM,gBAAA;AAEN,sBAAA;AAAA,MACJ;AAAA,MACA,CAAC,aAAa;AAAA,IAAA;AAGlB,UAAM,eAAe,CAAC,EAAE,QAAQ,gBAAwD;AACpF,YAAM,gBAAgB,CAAC,UAAgD;AACnE,YAAI,MAAM,MAAM,MAAM,OAAO,KAAK,MAAM,MAAM,MAAM,OAAO,GAAG;AAC1D,oBAAU,CAAC,MAAM;AAAA,QACrB;AAAA,MACJ;AAEA,aACI;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,iBAAe;AAAA,UACf;AAAA,UACA;AAAA,UACA;AAAA,UACA,SAAS,MAAM,UAAU,CAAC,MAAM;AAAA,UAChC,WAAW;AAAA,UACX,SACI,WACI;AAAA,YAAC;AAAA,YAAA;AAAA,cACG;AAAA,cACA,WAAW;AAAA,cACX,SAAS;AAAA,YAAA;AAAA,UAAA,IAGb,oBAAC,mBAAA,EAAkB,MAAY,SAAS,OAAA,CAAQ;AAAA,UAGxD;AAAA,UACA,MAAK;AAAA,UACL;AAAA,UAEC,UAAA,WAAY,kBAAkB,QAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAGpD;AAEA,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACG;AAAA,QACA;AAAA,QACA,WAAW,KAAK,OAAO,eAAe,SAAS;AAAA,QAC9C,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGb;AACJ;AAEA,gBAAgB,cAAc;"}

package/components/Chip/ChipOptions.js

@@ -1,27 +1,49 @@
 import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import { OptionsStrokeSrvIcon24 } from "@sberbusiness/icons-next";
-import { C as Chip } from "../../chunks/Chip-CWaqKk62.js";
+import { isKey } from "../../utils/keyboard.js";
+import { C as Chip } from "../../chunks/Chip-DNn2jKWv.js";
 import { ChipClearButton } from "./ChipClearButton.js";
-const chipOptionsContent = "chipOptionsContent__fc1ad139";
+const chipOptionsContent = "chipOptionsContent__9443d4e7";
 const styles = {
   chipOptionsContent
 };
 const ChipOptions = React__default.forwardRef(
-  ({ children, clearSelected, selected, ...rest }, ref) => {
+  ({ children, clearButtonProps, clearSelected, selected, size, ...restProps }, ref) => {
+    const {
+      onClick: onClickClearButton,
+      onKeyDown: onKeyDownClearButton,
+      ...restClearButtonProps
+    } = clearButtonProps ?? {};
     const handleClickClearButton = (event) => {
       event.stopPropagation();
       clearSelected();
+      onClickClearButton == null ? void 0 : onClickClearButton(event);
+    };
+    const handleKeyDownClearButton = (event) => {
+      if (isKey(event.code, "ENTER") || isKey(event.code, "SPACE")) {
+        event.stopPropagation();
+      }
+      onKeyDownClearButton == null ? void 0 : onKeyDownClearButton(event);
     };
     return /* @__PURE__ */ jsx(
       Chip,
       {
-        prefix: selected ? /* @__PURE__ */ jsx(OptionsStrokeSrvIcon24, { paletteIndex: 6 }) : /* @__PURE__ */ jsx(OptionsStrokeSrvIcon24, { paletteIndex: 5 }),
-        postfix: selected ? /* @__PURE__ */ jsx(ChipClearButton, { onClick: handleClickClearButton, size: rest.size }) : /* @__PURE__ */ jsx("span", {}),
+        prefix: /* @__PURE__ */ jsx(OptionsStrokeSrvIcon24, { paletteIndex: selected ? 6 : 5 }),
+        postfix: selected ? /* @__PURE__ */ jsx(
+          ChipClearButton,
+          {
+            ...restClearButtonProps,
+            size,
+            onClick: handleClickClearButton,
+            onKeyDown: handleKeyDownClearButton
+          }
+        ) : /* @__PURE__ */ jsx("span", {}),
         selected,
-        ...rest,
+        size,
+        ...restProps,
         ref,
-        children: typeof children !== "undefined" ? /* @__PURE__ */ jsx("span", { className: styles.chipOptionsContent, children }) : children
+        children: children !== void 0 ? /* @__PURE__ */ jsx("span", { className: styles.chipOptionsContent, children }) : children
       }
     );
   }