@vkontakte/vkui 4.35.1 → 4.36.0

package/dist/cssm/components/Popper/Popper.js

@@ -17,32 +17,61 @@ import "./Popper.css";
 var ARROW_PADDING = 8;
 var ARROW_WIDTH = 20;
 var ARROW_HEIGHT = 8;
+var preventOverflowModifier = {
+  name: "preventOverflow",
+  options: {
+    mainAxis: false
+  }
+};
+var flipModifier = {
+  name: "flip"
+};
+var arrowModifier = {
+  name: "arrow",
+  options: {
+    padding: ARROW_PADDING
+  }
+};
+var sameWidthModifier = {
+  name: "sameWidth",
+  enabled: true,
+  phase: "beforeWrite",
+  requires: ["computeStyles"],
+  fn: function fn(_ref) {
+    var state = _ref.state;
+    state.styles.popper.width = "".concat(state.rects.reference.width, "px");
+  },
+  effect: function effect(_ref2) {
+    var state = _ref2.state;
+    state.elements.popper.style.width = "".concat(state.elements.reference.offsetWidth, "px");
+  }
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/Popper
  */
 
-export var Popper = function Popper(_ref) {
+export var Popper = function Popper(_ref3) {
   var _targetRef$current3;
 
-  var targetRef = _ref.targetRef,
-      children = _ref.children,
-      getRef = _ref.getRef,
-      _ref$placement = _ref.placement,
-      placement = _ref$placement === void 0 ? "bottom-start" : _ref$placement,
-      onPlacementChange = _ref.onPlacementChange,
-      arrow = _ref.arrow,
-      arrowClassName = _ref.arrowClassName,
-      sameWidth = _ref.sameWidth,
-      _ref$offsetDistance = _ref.offsetDistance,
-      offsetDistance = _ref$offsetDistance === void 0 ? 8 : _ref$offsetDistance,
-      _ref$offsetSkidding = _ref.offsetSkidding,
-      offsetSkidding = _ref$offsetSkidding === void 0 ? 0 : _ref$offsetSkidding,
-      _ref$forcePortal = _ref.forcePortal,
-      forcePortal = _ref$forcePortal === void 0 ? true : _ref$forcePortal,
-      compStyles = _ref.style,
-      customModifiers = _ref.customModifiers,
-      renderContent = _ref.renderContent,
-      restProps = _objectWithoutProperties(_ref, _excluded);
+  var targetRef = _ref3.targetRef,
+      children = _ref3.children,
+      getRef = _ref3.getRef,
+      _ref3$placement = _ref3.placement,
+      placement = _ref3$placement === void 0 ? "bottom-start" : _ref3$placement,
+      onPlacementChange = _ref3.onPlacementChange,
+      arrow = _ref3.arrow,
+      arrowClassName = _ref3.arrowClassName,
+      sameWidth = _ref3.sameWidth,
+      _ref3$offsetDistance = _ref3.offsetDistance,
+      offsetDistance = _ref3$offsetDistance === void 0 ? 8 : _ref3$offsetDistance,
+      _ref3$offsetSkidding = _ref3.offsetSkidding,
+      offsetSkidding = _ref3$offsetSkidding === void 0 ? 0 : _ref3$offsetSkidding,
+      _ref3$forcePortal = _ref3.forcePortal,
+      forcePortal = _ref3$forcePortal === void 0 ? true : _ref3$forcePortal,
+      compStyles = _ref3.style,
+      customModifiers = _ref3.customModifiers,
+      renderContent = _ref3.renderContent,
+      restProps = _objectWithoutProperties(_ref3, _excluded);
 
   var _React$useState = React.useState(null),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -57,45 +86,19 @@ export var Popper = function Popper(_ref) {
   var platform = usePlatform();
   var setExternalRef = useExternRef(getRef, setPopperNode);
   var modifiers = React.useMemo(function () {
-    var modifiers = [{
-      name: "preventOverflow",
-      options: {
-        mainAxis: false
-      }
-    }, {
+    var modifiers = [preventOverflowModifier, {
       name: "offset",
       options: {
         offset: [arrow ? offsetSkidding - smallTargetOffsetSkidding : offsetSkidding, arrow ? offsetDistance + ARROW_HEIGHT : offsetDistance]
       }
-    }, {
-      name: "flip"
-    }];
+    }, flipModifier];
 
     if (arrow) {
-      modifiers.push({
-        name: "arrow",
-        options: {
-          padding: ARROW_PADDING
-        }
-      });
+      modifiers.push(arrowModifier);
     }
 
     if (sameWidth) {
-      var _sameWidth = {
-        name: "sameWidth",
-        enabled: true,
-        phase: "beforeWrite",
-        requires: ["computeStyles"],
-        fn: function fn(_ref2) {
-          var state = _ref2.state;
-          state.styles.popper.width = "".concat(state.rects.reference.width, "px");
-        },
-        effect: function effect(_ref3) {
-          var state = _ref3.state;
-          state.elements.popper.style.width = "".concat(state.elements.reference.offsetWidth, "px");
-        }
-      };
-      modifiers.push(_sameWidth);
+      modifiers.push(sameWidthModifier);
     }
 
     if (customModifiers) {

package/dist/cssm/components/Popper/Popper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Popper/Popper.tsx"],"names":["React","usePopper","AppRootPortal","PopperArrow","usePlatform","getClassName","useExternRef","useIsomorphicLayoutEffect","ARROW_PADDING","ARROW_WIDTH","ARROW_HEIGHT","Popper","targetRef","children","getRef","placement","onPlacementChange","arrow","arrowClassName","sameWidth","offsetDistance","offsetSkidding","forcePortal","compStyles","style","customModifiers","renderContent","restProps","useState","popperNode","setPopperNode","smallTargetOffsetSkidding","setSmallTargetOffsetSkidding","platform","setExternalRef","modifiers","useMemo","name","options","mainAxis","offset","push","padding","enabled","phase","requires","fn","state","styles","popper","width","rects","reference","effect","elements","offsetWidth","current","attributes","resolvedPlacement","isEdgePlacement","includes","placementDirection","startsWith","arrowSize","targetSize","offsetHeight","useEffect","dropdown","minWidth","scrollWidth","undefined","className"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { usePopper, Modifier } from \"react-popper\";\nimport { AppRootPortal } from \"../AppRoot/AppRootPortal\";\nimport { PopperArrow } from \"../PopperArrow/PopperArrow\";\nimport { HasRef } from \"../../types\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport \"./Popper.css\";\n\nexport type Placement =\n  | \"auto\"\n  | \"auto-start\"\n  | \"auto-end\"\n  | \"top-start\"\n  | \"top-end\"\n  | \"bottom-start\"\n  | \"bottom-end\"\n  | \"right-start\"\n  | \"right-end\"\n  | \"left-start\"\n  | \"left-end\"\n  | \"top\"\n  | \"bottom\"\n  | \"left\"\n  | \"right\";\n\nexport interface PopperRenderContentProps {\n  className: string;\n}\n\nexport interface PopperCommonProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства\n   */\n  placement?: Placement;\n  /**\n   * Отступ по вспомогательной оси\n   */\n  offsetSkidding?: number;\n  /**\n   * Отступ по главной оси\n   */\n  offsetDistance?: number;\n  /**\n   * Отображать ли стрелку, указывающую на якорный элемент\n   */\n  arrow?: boolean;\n  /**\n   * Стиль стрелки\n   */\n  arrowClassName?: string;\n  /**\n   * Выставлять ширину равной target элементу\n   */\n  sameWidth?: boolean;\n  forcePortal?: boolean;\n  onPlacementChange?: (data: { placement?: Placement }) => void;\n  /**\n   * Массив кастомных модификаторов для Popper (необходимо мемоизировать)\n   */\n  customModifiers?: Array<Modifier<string>>;\n  /**\n   * При передаче содержимого в `children`, он будет обёрнут во внутренний контейнер.\n   *\n   * Если хочется управлять этим контейнером, то используйте данную функцию.\n   *\n   * > ⚠️ Параметр `children` будет проигнорирован.\n   */\n  renderContent?(props: PopperRenderContentProps): React.ReactNode;\n}\n\nexport interface PopperProps extends PopperCommonProps {\n  targetRef: React.RefObject<HTMLElement>;\n}\n\nconst ARROW_PADDING = 8;\nconst ARROW_WIDTH = 20;\nconst ARROW_HEIGHT = 8;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popper\n */\nexport const Popper = ({\n  targetRef,\n  children,\n  getRef,\n  placement = \"bottom-start\",\n  onPlacementChange,\n  arrow,\n  arrowClassName,\n  sameWidth,\n  offsetDistance = 8,\n  offsetSkidding = 0,\n  forcePortal = true,\n  style: compStyles,\n  customModifiers,\n  renderContent,\n  ...restProps\n}: PopperProps) => {\n  const [popperNode, setPopperNode] = React.useState<HTMLDivElement | null>(\n    null\n  );\n  const [smallTargetOffsetSkidding, setSmallTargetOffsetSkidding] =\n    React.useState(0);\n  const platform = usePlatform();\n\n  const setExternalRef = useExternRef<HTMLDivElement>(getRef, setPopperNode);\n\n  const modifiers = React.useMemo(() => {\n    const modifiers: Array<Modifier<string>> = [\n      {\n        name: \"preventOverflow\",\n        options: {\n          mainAxis: false,\n        },\n      },\n      {\n        name: \"offset\",\n        options: {\n          offset: [\n            arrow ? offsetSkidding - smallTargetOffsetSkidding : offsetSkidding,\n            arrow ? offsetDistance + ARROW_HEIGHT : offsetDistance,\n          ],\n        },\n      },\n      {\n        name: \"flip\",\n      },\n    ];\n\n    if (arrow) {\n      modifiers.push({\n        name: \"arrow\",\n        options: {\n          padding: ARROW_PADDING,\n        },\n      });\n    }\n\n    if (sameWidth) {\n      const sameWidth: Modifier<string> = {\n        name: \"sameWidth\",\n        enabled: true,\n        phase: \"beforeWrite\",\n        requires: [\"computeStyles\"],\n        fn: ({ state }) => {\n          state.styles.popper.width = `${state.rects.reference.width}px`;\n        },\n        effect: ({ state }) => {\n          state.elements.popper.style.width = `${\n            (state.elements.reference as HTMLElement).offsetWidth\n          }px`;\n        },\n      };\n\n      modifiers.push(sameWidth);\n    }\n\n    if (customModifiers) {\n      modifiers.push(...customModifiers);\n    }\n    return modifiers;\n  }, [\n    arrow,\n    sameWidth,\n    smallTargetOffsetSkidding,\n    offsetSkidding,\n    offsetDistance,\n    customModifiers,\n  ]);\n\n  const { styles, state, attributes } = usePopper(\n    targetRef.current,\n    popperNode,\n    {\n      placement,\n      modifiers,\n    }\n  );\n\n  const resolvedPlacement = state?.placement;\n  const isEdgePlacement =\n    !!resolvedPlacement && resolvedPlacement.includes(\"-\"); // true, если поппер отрисован с краю\n\n  // Если поппер рисуется с краю, то нужно опционально сместить его в тех случаях, когда стрелка не дотягивается до\n  // таргета из-за маленьких размеров последнего\n  useIsomorphicLayoutEffect(() => {\n    if (arrow && isEdgePlacement) {\n      const placementDirection =\n        resolvedPlacement?.startsWith(\"bottom\") ||\n        resolvedPlacement?.startsWith(\"top\")\n          ? \"vertical\"\n          : \"horizontal\";\n\n      const arrowSize =\n        placementDirection === \"vertical\" ? ARROW_WIDTH : ARROW_HEIGHT;\n      const targetSize =\n        (placementDirection === \"vertical\"\n          ? targetRef.current?.offsetWidth\n          : targetRef.current?.offsetHeight) ?? 0;\n\n      if (targetSize < arrowSize + 2 * ARROW_PADDING) {\n        setSmallTargetOffsetSkidding(ARROW_PADDING + arrowSize / 2);\n      }\n    } else {\n      setSmallTargetOffsetSkidding(0);\n    }\n  }, [arrow, isEdgePlacement]);\n\n  React.useEffect(() => {\n    if (resolvedPlacement) {\n      onPlacementChange && onPlacementChange({ placement: resolvedPlacement });\n    }\n  }, [onPlacementChange, resolvedPlacement]);\n\n  const dropdown = (\n    <div\n      {...restProps}\n      {...attributes.popper}\n      vkuiClass={getClassName(\"Popper\", platform)}\n      ref={setExternalRef}\n      style={{\n        ...compStyles,\n        ...styles.popper,\n        minWidth: sameWidth ? targetRef.current?.scrollWidth : undefined,\n      }}\n    >\n      {arrow && (\n        <PopperArrow\n          attributes={attributes.arrow}\n          style={styles.arrow}\n          arrowClassName={arrowClassName}\n        />\n      )}\n      {renderContent ? (\n        renderContent({ className: \"Popper__content\" })\n      ) : (\n        <div vkuiClass=\"Popper__content\">{children}</div>\n      )}\n    </div>\n  );\n\n  return (\n    <AppRootPortal forcePortal={forcePortal} vkuiClass=\"PopperPortal\">\n      {dropdown}\n    </AppRootPortal>\n  );\n};\n"],"file":"Popper.js"}
+{"version":3,"sources":["../../../../src/components/Popper/Popper.tsx"],"names":["React","usePopper","AppRootPortal","PopperArrow","usePlatform","getClassName","useExternRef","useIsomorphicLayoutEffect","ARROW_PADDING","ARROW_WIDTH","ARROW_HEIGHT","preventOverflowModifier","name","options","mainAxis","flipModifier","arrowModifier","padding","sameWidthModifier","enabled","phase","requires","fn","state","styles","popper","width","rects","reference","effect","elements","style","offsetWidth","Popper","targetRef","children","getRef","placement","onPlacementChange","arrow","arrowClassName","sameWidth","offsetDistance","offsetSkidding","forcePortal","compStyles","customModifiers","renderContent","restProps","useState","popperNode","setPopperNode","smallTargetOffsetSkidding","setSmallTargetOffsetSkidding","platform","setExternalRef","modifiers","useMemo","offset","push","current","attributes","resolvedPlacement","isEdgePlacement","includes","placementDirection","startsWith","arrowSize","targetSize","offsetHeight","useEffect","dropdown","minWidth","scrollWidth","undefined","className"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { usePopper, Modifier } from \"react-popper\";\nimport { AppRootPortal } from \"../AppRoot/AppRootPortal\";\nimport { PopperArrow } from \"../PopperArrow/PopperArrow\";\nimport { HasRef } from \"../../types\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport \"./Popper.css\";\n\nexport type Placement =\n  | \"auto\"\n  | \"auto-start\"\n  | \"auto-end\"\n  | \"top-start\"\n  | \"top-end\"\n  | \"bottom-start\"\n  | \"bottom-end\"\n  | \"right-start\"\n  | \"right-end\"\n  | \"left-start\"\n  | \"left-end\"\n  | \"top\"\n  | \"bottom\"\n  | \"left\"\n  | \"right\";\n\nexport interface PopperRenderContentProps {\n  className: string;\n}\n\nexport interface PopperCommonProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства\n   */\n  placement?: Placement;\n  /**\n   * Отступ по вспомогательной оси\n   */\n  offsetSkidding?: number;\n  /**\n   * Отступ по главной оси\n   */\n  offsetDistance?: number;\n  /**\n   * Отображать ли стрелку, указывающую на якорный элемент\n   */\n  arrow?: boolean;\n  /**\n   * Стиль стрелки\n   */\n  arrowClassName?: string;\n  /**\n   * Выставлять ширину равной target элементу\n   */\n  sameWidth?: boolean;\n  forcePortal?: boolean;\n  onPlacementChange?: (data: { placement?: Placement }) => void;\n  /**\n   * Массив кастомных модификаторов для Popper (необходимо мемоизировать)\n   */\n  customModifiers?: Array<Modifier<string>>;\n  /**\n   * При передаче содержимого в `children`, он будет обёрнут во внутренний контейнер.\n   *\n   * Если хочется управлять этим контейнером, то используйте данную функцию.\n   *\n   * > ⚠️ Параметр `children` будет проигнорирован.\n   */\n  renderContent?(props: PopperRenderContentProps): React.ReactNode;\n}\n\nexport interface PopperProps extends PopperCommonProps {\n  targetRef: React.RefObject<HTMLElement>;\n}\n\nconst ARROW_PADDING = 8;\nconst ARROW_WIDTH = 20;\nconst ARROW_HEIGHT = 8;\n\nconst preventOverflowModifier: Modifier<string> = {\n  name: \"preventOverflow\",\n  options: {\n    mainAxis: false,\n  },\n};\n\nconst flipModifier: Modifier<string> = {\n  name: \"flip\",\n};\n\nconst arrowModifier: Modifier<string> = {\n  name: \"arrow\",\n  options: {\n    padding: ARROW_PADDING,\n  },\n};\n\nconst sameWidthModifier: Modifier<string> = {\n  name: \"sameWidth\",\n  enabled: true,\n  phase: \"beforeWrite\",\n  requires: [\"computeStyles\"],\n  fn: ({ state }) => {\n    state.styles.popper.width = `${state.rects.reference.width}px`;\n  },\n  effect: ({ state }) => {\n    state.elements.popper.style.width = `${\n      (state.elements.reference as HTMLElement).offsetWidth\n    }px`;\n  },\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popper\n */\nexport const Popper = ({\n  targetRef,\n  children,\n  getRef,\n  placement = \"bottom-start\",\n  onPlacementChange,\n  arrow,\n  arrowClassName,\n  sameWidth,\n  offsetDistance = 8,\n  offsetSkidding = 0,\n  forcePortal = true,\n  style: compStyles,\n  customModifiers,\n  renderContent,\n  ...restProps\n}: PopperProps) => {\n  const [popperNode, setPopperNode] = React.useState<HTMLDivElement | null>(\n    null\n  );\n  const [smallTargetOffsetSkidding, setSmallTargetOffsetSkidding] =\n    React.useState(0);\n  const platform = usePlatform();\n\n  const setExternalRef = useExternRef<HTMLDivElement>(getRef, setPopperNode);\n\n  const modifiers = React.useMemo(() => {\n    const modifiers: Array<Modifier<string>> = [\n      preventOverflowModifier,\n      {\n        name: \"offset\",\n        options: {\n          offset: [\n            arrow ? offsetSkidding - smallTargetOffsetSkidding : offsetSkidding,\n            arrow ? offsetDistance + ARROW_HEIGHT : offsetDistance,\n          ],\n        },\n      },\n      flipModifier,\n    ];\n\n    if (arrow) {\n      modifiers.push(arrowModifier);\n    }\n\n    if (sameWidth) {\n      modifiers.push(sameWidthModifier);\n    }\n\n    if (customModifiers) {\n      modifiers.push(...customModifiers);\n    }\n    return modifiers;\n  }, [\n    arrow,\n    sameWidth,\n    smallTargetOffsetSkidding,\n    offsetSkidding,\n    offsetDistance,\n    customModifiers,\n  ]);\n\n  const { styles, state, attributes } = usePopper(\n    targetRef.current,\n    popperNode,\n    {\n      placement,\n      modifiers,\n    }\n  );\n\n  const resolvedPlacement = state?.placement;\n  const isEdgePlacement =\n    !!resolvedPlacement && resolvedPlacement.includes(\"-\"); // true, если поппер отрисован с краю\n\n  // Если поппер рисуется с краю, то нужно опционально сместить его в тех случаях, когда стрелка не дотягивается до\n  // таргета из-за маленьких размеров последнего\n  useIsomorphicLayoutEffect(() => {\n    if (arrow && isEdgePlacement) {\n      const placementDirection =\n        resolvedPlacement?.startsWith(\"bottom\") ||\n        resolvedPlacement?.startsWith(\"top\")\n          ? \"vertical\"\n          : \"horizontal\";\n\n      const arrowSize =\n        placementDirection === \"vertical\" ? ARROW_WIDTH : ARROW_HEIGHT;\n      const targetSize =\n        (placementDirection === \"vertical\"\n          ? targetRef.current?.offsetWidth\n          : targetRef.current?.offsetHeight) ?? 0;\n\n      if (targetSize < arrowSize + 2 * ARROW_PADDING) {\n        setSmallTargetOffsetSkidding(ARROW_PADDING + arrowSize / 2);\n      }\n    } else {\n      setSmallTargetOffsetSkidding(0);\n    }\n  }, [arrow, isEdgePlacement]);\n\n  React.useEffect(() => {\n    if (resolvedPlacement) {\n      onPlacementChange && onPlacementChange({ placement: resolvedPlacement });\n    }\n  }, [onPlacementChange, resolvedPlacement]);\n\n  const dropdown = (\n    <div\n      {...restProps}\n      {...attributes.popper}\n      vkuiClass={getClassName(\"Popper\", platform)}\n      ref={setExternalRef}\n      style={{\n        ...compStyles,\n        ...styles.popper,\n        minWidth: sameWidth ? targetRef.current?.scrollWidth : undefined,\n      }}\n    >\n      {arrow && (\n        <PopperArrow\n          attributes={attributes.arrow}\n          style={styles.arrow}\n          arrowClassName={arrowClassName}\n        />\n      )}\n      {renderContent ? (\n        renderContent({ className: \"Popper__content\" })\n      ) : (\n        <div vkuiClass=\"Popper__content\">{children}</div>\n      )}\n    </div>\n  );\n\n  return (\n    <AppRootPortal forcePortal={forcePortal} vkuiClass=\"PopperPortal\">\n      {dropdown}\n    </AppRootPortal>\n  );\n};\n"],"file":"Popper.js"}

package/dist/cssm/components/PromoBanner/PromoBanner.css

@@ -1 +1,3 @@
-.vkuiPromoBanner{background:#fff;background:var(--background_content);box-sizing:border-box;color:#000;color:var(--text_primary);outline:1px solid rgba(0,0,0,.12);outline:1px solid var(--separator_alpha);padding-bottom:10px;position:relative;width:100%}.vkuiPromoBanner__head{color:#818c99;color:var(--text_secondary);display:flex;padding-bottom:10px;padding-top:14px}.vkuiPromoBanner__age{margin-left:6px}.vkuiPromoBanner__close{align-items:center;color:#99a2ad;color:var(--placeholder_icon_foreground_primary);display:flex;height:48px;justify-content:center;position:absolute;right:0;top:0;width:48px}.vkuiPromoBanner__close:active{opacity:.7}.vkuiPromoBanner__pixels{display:none}.vkuiPromoBanner--ios .vkuiPromoBanner__head{padding-left:12px;padding-right:12px}.vkuiPromoBanner--android .vkuiPromoBanner__head,.vkuiPromoBanner--vkcom .vkuiPromoBanner__head{padding-left:16px;padding-right:16px}
+.vkuiPromoBanner{background:#fff;background:var(--background_content,var(--vkui--color_background_content));box-sizing:border-box;color:#000;color:var(--text_primary,var(--vkui--color_text_primary));outline:1px solid rgba(0,0,0,.12);outline:var(--thin-border) solid var(--separator_alpha,var(--vkui--color_separator_primary_alpha));padding-bottom:10px;position:relative;width:100%}.vkuiPromoBanner__head{color:#818c99;color:var(--text_secondary,var(--vkui--color_text_secondary));display:flex;padding:14px 16px 10px;padding:14px var(--vkui--size_base_padding_horizontal--regular,16px) 10px}.vkuiPromoBanner__age{margin-left:6px}.vkuiPromoBanner__close{align-items:center;color:#99a2ad;color:var(
+    --placeholder_icon_foreground_primary,var(--vkui--color_icon_secondary)
+  );display:flex;height:48px;justify-content:center;position:absolute;right:0;top:0;width:48px}.vkuiPromoBanner__close:active{opacity:.7}.vkuiPromoBanner__pixels{display:none}

package/dist/cssm/components/PromoBanner/PromoBanner.js

@@ -11,8 +11,6 @@ import { Button } from "../Button/Button";
 import { SimpleCell } from "../SimpleCell/SimpleCell";
 import { Avatar } from "../Avatar/Avatar";
 import { Caption } from "../Typography/Caption/Caption";
-import { usePlatform } from "../../hooks/usePlatform";
-import { getClassName } from "../../helpers/getClassName";
 import { warnOnce } from "../../lib/warnOnce";
 import "./PromoBanner.css";
 var warn = warnOnce("PromoBanner");
@@ -27,7 +25,6 @@ export var PromoBanner = function PromoBanner(_ref) {
       isCloseButtonHidden = _ref.isCloseButtonHidden,
       restProps = _objectWithoutProperties(_ref, _excluded);
 
-  var platform = usePlatform();
   var ageRestrictions = bannerData.ageRestrictions != null ? parseInt(bannerData.ageRestrictions) : bannerData.ageRestriction;
 
   if (bannerData.ageRestriction && process.env.NODE_ENV === "development") {
@@ -53,7 +50,7 @@ export var PromoBanner = function PromoBanner(_ref) {
     }
   }, [statsPixels.playbackStarted]);
   return createScopedElement("div", _extends({
-    vkuiClass: getClassName("PromoBanner", platform)
+    vkuiClass: "PromoBanner"
   }, restProps), createScopedElement("div", {
     vkuiClass: "PromoBanner__head"
   }, createScopedElement(Caption, {

package/dist/cssm/components/PromoBanner/PromoBanner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PromoBanner/PromoBanner.tsx"],"names":["React","Icon24Dismiss","Button","SimpleCell","Avatar","Caption","usePlatform","getClassName","warnOnce","warn","PromoBanner","bannerData","onClose","isCloseButtonHidden","restProps","platform","ageRestrictions","parseInt","ageRestriction","process","env","NODE_ENV","useState","currentPixel","setCurrentPixel","statsPixels","useMemo","statistics","reduce","acc","item","type","url","onClick","useCallback","click","useEffect","playbackStarted","advertisingLabel","trackingLink","iconLink","title","ctaText","domain","length"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { Icon24Dismiss } from \"@vkontakte/icons\";\nimport { Button } from \"../Button/Button\";\nimport { SimpleCell } from \"../SimpleCell/SimpleCell\";\nimport { Avatar } from \"../Avatar/Avatar\";\nimport { Caption } from \"../Typography/Caption/Caption\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport \"./PromoBanner.css\";\n\ntype StatsType =\n  | \"playbackStarted\" // Начало показа\n  | \"click\"; // Клик по баннеру\n\ntype BannerData = {\n  title?: string;\n  url_types?: string; // eslint-disable-line camelcase\n  bannerID?: string;\n  imageWidth?: number;\n  imageHeight?: number;\n  imageLink?: string;\n  trackingLink?: string;\n  type?: string;\n  iconWidth?: number;\n  domain?: string;\n  ctaText?: string;\n  advertisingLabel?: string;\n  iconLink?: string;\n  statistics?: Array<{ type: StatsType; url: string }>;\n  openInBrowser?: boolean;\n  iconHeight?: number;\n  directLink?: boolean;\n  navigationType?: string;\n  description?: string;\n  ageRestrictions?: string;\n  /** @deprecated */\n  ageRestriction?: number;\n};\n\nexport interface PromoBannerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Данные рекламного баннера, полученные из VKWebAppGetAds */\n  bannerData: BannerData;\n  /** Флаг скрытия кнопки закрытия рекламы */\n  isCloseButtonHidden?: boolean;\n  /** Хандлер закрытия рекламы */\n  onClose: () => void;\n}\n\nconst warn = warnOnce(\"PromoBanner\");\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PromoBanner\n */\nexport const PromoBanner = ({\n  bannerData = {},\n  onClose,\n  isCloseButtonHidden,\n  ...restProps\n}: PromoBannerProps) => {\n  const platform = usePlatform();\n\n  const ageRestrictions =\n    bannerData.ageRestrictions != null\n      ? parseInt(bannerData.ageRestrictions)\n      : bannerData.ageRestriction;\n\n  if (bannerData.ageRestriction && process.env.NODE_ENV === \"development\") {\n    warn(\n      \"Свойство bannerData.ageRestriction устарело и будет удалено в 5.0.0. Используйте bannerData.ageRestrictions\"\n    );\n  }\n\n  const [currentPixel, setCurrentPixel] = React.useState(\"\");\n\n  const statsPixels = React.useMemo(\n    () =>\n      (bannerData.statistics\n        ? bannerData.statistics.reduce(\n            (acc, item) => ({ ...acc, [item.type]: item.url }),\n            {}\n          )\n        : {}) as Record<StatsType, string | void>,\n    [bannerData.statistics]\n  );\n\n  const onClick = React.useCallback(\n    () => setCurrentPixel(statsPixels.click || \"\"),\n    [statsPixels.click]\n  );\n\n  React.useEffect(() => {\n    if (statsPixels.playbackStarted) {\n      setCurrentPixel(statsPixels.playbackStarted);\n    }\n  }, [statsPixels.playbackStarted]);\n\n  return (\n    <div vkuiClass={getClassName(\"PromoBanner\", platform)} {...restProps}>\n      <div vkuiClass=\"PromoBanner__head\">\n        <Caption vkuiClass=\"PromoBanner__label\">\n          {bannerData.advertisingLabel || \"Advertisement\"}\n        </Caption>\n        {ageRestrictions != null && (\n          <Caption vkuiClass=\"PromoBanner__age\">{ageRestrictions}+</Caption>\n        )}\n\n        {!isCloseButtonHidden && (\n          <div vkuiClass=\"PromoBanner__close\" onClick={onClose}>\n            <Icon24Dismiss />\n          </div>\n        )}\n      </div>\n      <SimpleCell\n        href={bannerData.trackingLink}\n        onClick={onClick}\n        rel=\"nofollow noopener noreferrer\"\n        target=\"_blank\"\n        before={\n          <Avatar\n            mode=\"image\"\n            size={48}\n            src={bannerData.iconLink}\n            alt={bannerData.title}\n          />\n        }\n        after={<Button mode=\"outline\">{bannerData.ctaText}</Button>}\n        description={bannerData.domain}\n      >\n        {bannerData.title}\n      </SimpleCell>\n\n      {currentPixel.length > 0 && (\n        <div vkuiClass=\"PromoBanner__pixels\">\n          <img src={currentPixel} alt=\"\" />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"file":"PromoBanner.js"}
+{"version":3,"sources":["../../../../src/components/PromoBanner/PromoBanner.tsx"],"names":["React","Icon24Dismiss","Button","SimpleCell","Avatar","Caption","warnOnce","warn","PromoBanner","bannerData","onClose","isCloseButtonHidden","restProps","ageRestrictions","parseInt","ageRestriction","process","env","NODE_ENV","useState","currentPixel","setCurrentPixel","statsPixels","useMemo","statistics","reduce","acc","item","type","url","onClick","useCallback","click","useEffect","playbackStarted","advertisingLabel","trackingLink","iconLink","title","ctaText","domain","length"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { Icon24Dismiss } from \"@vkontakte/icons\";\nimport { Button } from \"../Button/Button\";\nimport { SimpleCell } from \"../SimpleCell/SimpleCell\";\nimport { Avatar } from \"../Avatar/Avatar\";\nimport { Caption } from \"../Typography/Caption/Caption\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport \"./PromoBanner.css\";\n\ntype StatsType =\n  | \"playbackStarted\" // Начало показа\n  | \"click\"; // Клик по баннеру\n\ntype BannerData = {\n  title?: string;\n  url_types?: string; // eslint-disable-line camelcase\n  bannerID?: string;\n  imageWidth?: number;\n  imageHeight?: number;\n  imageLink?: string;\n  trackingLink?: string;\n  type?: string;\n  iconWidth?: number;\n  domain?: string;\n  ctaText?: string;\n  advertisingLabel?: string;\n  iconLink?: string;\n  statistics?: Array<{ type: StatsType; url: string }>;\n  openInBrowser?: boolean;\n  iconHeight?: number;\n  directLink?: boolean;\n  navigationType?: string;\n  description?: string;\n  ageRestrictions?: string;\n  /** @deprecated */\n  ageRestriction?: number;\n};\n\nexport interface PromoBannerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Данные рекламного баннера, полученные из VKWebAppGetAds */\n  bannerData: BannerData;\n  /** Флаг скрытия кнопки закрытия рекламы */\n  isCloseButtonHidden?: boolean;\n  /** Хандлер закрытия рекламы */\n  onClose: () => void;\n}\n\nconst warn = warnOnce(\"PromoBanner\");\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PromoBanner\n */\nexport const PromoBanner = ({\n  bannerData = {},\n  onClose,\n  isCloseButtonHidden,\n  ...restProps\n}: PromoBannerProps) => {\n  const ageRestrictions =\n    bannerData.ageRestrictions != null\n      ? parseInt(bannerData.ageRestrictions)\n      : bannerData.ageRestriction;\n\n  if (bannerData.ageRestriction && process.env.NODE_ENV === \"development\") {\n    warn(\n      \"Свойство bannerData.ageRestriction устарело и будет удалено в 5.0.0. Используйте bannerData.ageRestrictions\"\n    );\n  }\n\n  const [currentPixel, setCurrentPixel] = React.useState(\"\");\n\n  const statsPixels = React.useMemo(\n    () =>\n      (bannerData.statistics\n        ? bannerData.statistics.reduce(\n            (acc, item) => ({ ...acc, [item.type]: item.url }),\n            {}\n          )\n        : {}) as Record<StatsType, string | void>,\n    [bannerData.statistics]\n  );\n\n  const onClick = React.useCallback(\n    () => setCurrentPixel(statsPixels.click || \"\"),\n    [statsPixels.click]\n  );\n\n  React.useEffect(() => {\n    if (statsPixels.playbackStarted) {\n      setCurrentPixel(statsPixels.playbackStarted);\n    }\n  }, [statsPixels.playbackStarted]);\n\n  return (\n    <div vkuiClass=\"PromoBanner\" {...restProps}>\n      <div vkuiClass=\"PromoBanner__head\">\n        <Caption vkuiClass=\"PromoBanner__label\">\n          {bannerData.advertisingLabel || \"Advertisement\"}\n        </Caption>\n        {ageRestrictions != null && (\n          <Caption vkuiClass=\"PromoBanner__age\">{ageRestrictions}+</Caption>\n        )}\n\n        {!isCloseButtonHidden && (\n          <div vkuiClass=\"PromoBanner__close\" onClick={onClose}>\n            <Icon24Dismiss />\n          </div>\n        )}\n      </div>\n      <SimpleCell\n        href={bannerData.trackingLink}\n        onClick={onClick}\n        rel=\"nofollow noopener noreferrer\"\n        target=\"_blank\"\n        before={\n          <Avatar\n            mode=\"image\"\n            size={48}\n            src={bannerData.iconLink}\n            alt={bannerData.title}\n          />\n        }\n        after={<Button mode=\"outline\">{bannerData.ctaText}</Button>}\n        description={bannerData.domain}\n      >\n        {bannerData.title}\n      </SimpleCell>\n\n      {currentPixel.length > 0 && (\n        <div vkuiClass=\"PromoBanner__pixels\">\n          <img src={currentPixel} alt=\"\" />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"file":"PromoBanner.js"}

package/dist/cssm/components/Search/Search.css

@@ -1 +1,27 @@
-.vkuiSearch{font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--font-common);font-weight:400;line-height:normal;overflow:hidden;-webkit-transform:translateZ(0);transform:translateZ(0)}.vkuiSearch__in{position:relative}.vkuiSearch__width{color:transparent;height:36px;height:var(--search_default_height);white-space:nowrap;width:10000px}.vkuiSearch__control{align-items:center;border-radius:10px;display:flex;height:100%;justify-content:flex-start;left:0;position:absolute;top:0;width:calc(100% - 1px)}.vkuiSearch__input{-webkit-appearance:none;background-color:initial;border:none;border-radius:10px;box-sizing:border-box;flex-grow:1;font-size:17px;height:36px;height:var(--search_default_height);margin:0;max-width:100%;min-width:0;padding:0 22px 0 36px;position:relative;z-index:2}.vkuiSearch__input::-webkit-search-cancel-button,.vkuiSearch__input::-webkit-search-decoration,.vkuiSearch__input::-webkit-search-results-button,.vkuiSearch__input::-webkit-search-results-decoration{display:none}.vkuiSearch--has-after .vkuiSearch__input{border-radius:10px 0 0 10px}.vkuiSearch--has-icon .vkuiSearch__input,.vkuiSearch--has-icon .vkuiSearch__placeholder,.vkuiSearch--has-value .vkuiSearch__input,.vkuiSearch--has-value .vkuiSearch__placeholder{padding-right:40px}.vkuiSearch--has-icon.vkuiSearch--has-value .vkuiSearch__input,.vkuiSearch--has-icon.vkuiSearch--has-value .vkuiSearch__placeholder{padding-right:80px}.vkuiSearch__after-width{flex-shrink:0;font-size:17px;line-height:36px;line-height:var(--search_default_height);padding-right:4px}.vkuiSearch__after-width,.vkuiSearch__placeholder{cursor:text;height:36px;height:var(--search_default_height);padding-left:12px;pointer-events:none}.vkuiSearch__placeholder{box-sizing:border-box;display:flex;font-size:0;left:0;padding-right:22px;position:absolute;text-align:left;width:100%;z-index:1}.vkuiSearch__placeholder-in{align-items:center;display:flex;flex-grow:1;height:36px;height:var(--search_default_height);max-width:100%;overflow:hidden}.vkuiSearch__placeholder-text{margin-left:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiSearch--has-value .vkuiSearch__placeholder-text{opacity:0}.vkuiSearch__icons{color:#818c99;color:var(--search_bar_field_tint,var(--vkui--color_icon_secondary));position:absolute;right:100%;top:0}.vkuiSearch__icon,.vkuiSearch__icons{align-items:center;display:flex;justify-content:center}.vkuiSearch__icon{cursor:pointer;height:36px;height:var(--search_default_height);width:40px}.vkuiSearch__after{cursor:default;left:100%;line-height:36px;line-height:var(--search_default_height);position:absolute;top:0;-webkit-transform:translate(0);transform:translate(0);transition:-webkit-transform .3s cubic-bezier(.36,.66,.04,1);transition:transform .3s cubic-bezier(.36,.66,.04,1);transition:transform .3s cubic-bezier(.36,.66,.04,1),-webkit-transform .3s cubic-bezier(.36,.66,.04,1);transition:-webkit-transform .3s var(--ios-easing);transition:transform .3s var(--ios-easing);transition:transform .3s var(--ios-easing),-webkit-transform .3s var(--ios-easing);z-index:2}.vkuiSearch--focused .vkuiSearch__after,.vkuiSearch--has-value .vkuiSearch__after{-webkit-transform:translate(-100%);transform:translate(-100%)}.vkuiSearch__after:before{content:"";display:block;height:100%;pointer-events:none;position:absolute;right:calc(100% - 1px);width:10px}.vkuiSearch__after-in{cursor:pointer;font-size:17px;padding-left:12px;padding-right:4px;position:relative;z-index:2}.vkuiSearch__after:after{border-radius:0 10px 10px 0;content:"";cursor:text;display:block;height:100%;pointer-events:none;position:absolute;right:100%;top:0;width:10px}.vkuiGroup--plain .vkuiSearch{padding-top:4px}.vkuiSearch{background:#fff;background:var(--search_bar_background)}.vkuiSearch__control{background-color:#ebedf0;background-color:var(--search_bar_field_background)}.vkuiSearch__input{color:#000;color:var(--text_primary)}.vkuiSearch__placeholder{color:#818c99;color:var(--search_bar_field_tint,var(--vkui--color_icon_medium))}.vkuiSearch__after-width{background:#ebedf0;background:var(--search_bar_field_background);color:#ebedf0;color:var(--search_bar_field_background)}.vkuiSearch__after{background:#fff;background:var(--search_bar_background);color:#2688eb;color:var(--accent)}.vkuiSearch__after:after{background-color:#ebedf0;background-color:var(--search_bar_field_background)}.vkuiSearch__after:before{background-color:#fff;background-color:var(--search_bar_background)}.vkuiPanelHeader .vkuiSearch{background:#fff;background:var(--header_background)}.vkuiPanelHeader .vkuiSearch__control{background-color:#ebedf0;background-color:var(--header_search_field_background)}.vkuiPanelHeader .vkuiSearch__input{color:#000;color:var(--text_primary)}.vkuiPanelHeader .vkuiSearch__placeholder{color:#818c99;color:var(--header_search_field_tint)}.vkuiPanelHeader .vkuiSearch__after-width{background:#ebedf0;background:var(--header_search_field_background);color:#ebedf0;color:var(--header_search_field_background)}.vkuiPanelHeader .vkuiSearch__after{background:#fff;background:var(--header_background);color:#2688eb;color:var(--header_tint)}.vkuiPanelHeader .vkuiSearch__after:after{background-color:#ebedf0;background-color:var(--header_search_field_background)}.vkuiPanelHeader .vkuiSearch__after:before{background-color:#fff;background-color:var(--header_background)}.vkuiSearch--ios{padding:8px 12px}.vkuiSearch--android{padding:8px 16px}.vkuiPanelHeader--vkcom .vkuiSearch,.vkuiSearch--vkcom{background:transparent}.vkuiSearch--vkcom .vkuiSearch__in{padding-bottom:6px;padding-top:6px}.vkuiSearch--vkcom .vkuiSearch__input{font-size:15px;line-height:20px;padding-left:40px}.vkuiSearch--vkcom .vkuiSearch__placeholder{color:#99a2ad;color:var(--vkui--color_icon_secondary,#99a2ad);padding-left:16px}.vkuiSearch--vkcom .vkuiSearch__icons{color:#818c99;color:var(--search_bar_field_tint,var(--vkui--color_icon_medium));right:calc(100% + 8px);top:4px}.vkuiSearch--vkcom.vkuiSearch--has-value .vkuiSearch__input{padding-right:56px}.vkuiSearch--vkcom.vkuiSearch--has-icon.vkuiSearch--has-value .vkuiSearch__input{padding-right:92px}.vkuiSearch--vkcom .vkuiSearch__icon{height:40px;opacity:.8;width:40px}.vkuiSearch--vkcom .vkuiSearch__icon:hover{background-color:rgba(0,0,0,.04);background-color:var(--background_hover);border-radius:50%}.vkuiSearch--vkcom .vkuiSearch__control{background-color:initial}.vkuiPanelHeader--vkcom .vkuiSearch__separator{display:none}.vkuiSearch--vkcom .vkuiSearch__separator{color:#e1e3e6;color:var(--input_border)}.vkuiGroup--card .vkuiSearch--vkcom{margin:0 -8px}.vkuiGroup--card .vkuiSearch--vkcom:first-child{margin-top:-8px}.vkuiGroup--card .vkuiSearch--vkcom:not(:last-child){margin-bottom:8px}.vkuiGroup--card .vkuiSearch--vkcom .vkuiSearch__placeholder{padding-left:20px}.vkuiGroup--card .vkuiSearch--vkcom .vkuiSearch__input{padding-left:44px}
+.vkuiSearch{font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--font-common);font-weight:400;line-height:normal;overflow:hidden;padding:8px 16px;-webkit-transform:translateZ(0);transform:translateZ(0)}.vkuiSearch__in{position:relative}.vkuiSearch__width{color:transparent;white-space:nowrap;width:10000px}.vkuiSearch__control{align-items:center;border-radius:8px;border-radius:var(--vkui--size_border_radius--regular,8px);display:flex;height:100%;justify-content:flex-start;left:0;position:absolute;top:0;width:calc(100% - 1px)}.vkuiSearch__input{-webkit-appearance:none;background-color:initial;border:none;border-radius:8px;border-radius:var(--vkui--size_border_radius--regular,8px);box-sizing:border-box;flex-grow:1;font-size:17px;margin:0;max-width:100%;min-width:0;padding:0 22px 0 36px;position:relative;z-index:2}.vkuiSearch__input::-webkit-search-cancel-button,.vkuiSearch__input::-webkit-search-decoration,.vkuiSearch__input::-webkit-search-results-button,.vkuiSearch__input::-webkit-search-results-decoration{display:none}.vkuiSearch--has-after .vkuiSearch__input{border-bottom-right-radius:0;border-top-right-radius:0}.vkuiSearch--has-icon .vkuiSearch__input,.vkuiSearch--has-icon .vkuiSearch__placeholder,.vkuiSearch--has-value .vkuiSearch__input,.vkuiSearch--has-value .vkuiSearch__placeholder{padding-right:40px}.vkuiSearch--has-icon.vkuiSearch--has-value .vkuiSearch__input,.vkuiSearch--has-icon.vkuiSearch--has-value .vkuiSearch__placeholder{padding-right:80px}.vkuiSearch__after-width{cursor:text;flex-shrink:0;font-size:17px;padding-left:12px;padding-right:4px;pointer-events:none}.vkuiSearch__placeholder{box-sizing:border-box;cursor:text;display:flex;font-size:0;left:0;padding-left:12px;padding-right:22px;pointer-events:none;position:absolute;text-align:left;width:100%;z-index:1}.vkuiSearch__placeholder-in{align-items:center;display:flex;flex-grow:1;max-width:100%;overflow:hidden}.vkuiSearch__placeholder-text{color:#818c99;color:var(--vkui--color_text_secondary,#818c99);margin-left:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiSearch--has-value .vkuiSearch__placeholder-text{opacity:0}.vkuiSearch__icons{color:#818c99;color:var(--search_bar_field_tint,var(--vkui--color_icon_secondary));position:absolute;right:100%;top:0}.vkuiSearch__icon,.vkuiSearch__icons{align-items:center;display:flex;justify-content:center}.vkuiSearch__icon{cursor:pointer;width:40px}.vkuiSearch__after{cursor:default;left:100%;position:absolute;top:0;-webkit-transform:translate(0);transform:translate(0);transition:-webkit-transform .3s cubic-bezier(.36,.66,.04,1);transition:transform .3s cubic-bezier(.36,.66,.04,1);transition:transform .3s cubic-bezier(.36,.66,.04,1),-webkit-transform .3s cubic-bezier(.36,.66,.04,1);transition:-webkit-transform .3s var(--ios-easing);transition:transform .3s var(--ios-easing);transition:transform .3s var(--ios-easing),-webkit-transform .3s var(--ios-easing);z-index:2}.vkuiSearch--focused .vkuiSearch__after,.vkuiSearch--has-value .vkuiSearch__after{-webkit-transform:translate(-100%);transform:translate(-100%)}.vkuiSearch__after:before{content:"";display:block;height:100%;pointer-events:none;position:absolute;right:calc(100% - 1px);width:10px}.vkuiSearch__after-in{cursor:pointer;font-size:17px;padding-left:12px;padding-right:4px;position:relative;z-index:2}.vkuiSearch__after:after{border-radius:0 8px 8px 0;border-radius:0 var(--vkui--size_border_radius--regular,8px) var(--vkui--size_border_radius--regular,8px) 0;content:"";cursor:text;display:block;height:100%;pointer-events:none;position:absolute;right:100%;top:0;width:10px}.vkuiGroup--plain .vkuiSearch{padding-top:4px}.vkuiSearch__after-width,.vkuiSearch__icon,.vkuiSearch__input,.vkuiSearch__placeholder,.vkuiSearch__placeholder-in,.vkuiSearch__width{height:32px;height:var(--vkui--size_search_height--compact,32px)}.vkuiSearch__after,.vkuiSearch__after-width{line-height:32px;line-height:var(--vkui--size_search_height--compact,32px)}.vkuiSearch--sizeY-regular .vkuiSearch__after-width,.vkuiSearch--sizeY-regular .vkuiSearch__icon,.vkuiSearch--sizeY-regular .vkuiSearch__input,.vkuiSearch--sizeY-regular .vkuiSearch__placeholder,.vkuiSearch--sizeY-regular .vkuiSearch__placeholder-in,.vkuiSearch--sizeY-regular .vkuiSearch__width{height:36px;height:var(--vkui--size_search_height--regular,36px)}.vkuiSearch--sizeY-regular .vkuiSearch__after,.vkuiSearch--sizeY-regular .vkuiSearch__after-width{line-height:36px;line-height:var(--vkui--size_search_height--regular,36px)}.vkuiSearch{background:#fff;background:var(
+    --search_bar_background,var(--vkui--color_background_content)
+  )}.vkuiSearch__control{background-color:#ebedf0;background-color:var(
+    --search_bar_field_background,var(--vkui--color_search_field_background)
+  )}.vkuiSearch__in:hover .vkuiSearch__after-width,.vkuiSearch__in:hover .vkuiSearch__after:after,.vkuiSearch__in:hover .vkuiSearch__control{background-color:#e2e4e9;background-color:var(--vkui--color_search_field_background--hover,#e2e4e9)}.vkuiSearch__in:hover .vkuiSearch__after-width{color:#e2e4e9;color:var(--vkui--color_search_field_background--hover,#e2e4e9)}.vkuiSearch__in:active .vkuiSearch__after-width,.vkuiSearch__in:active .vkuiSearch__after:after,.vkuiSearch__in:active .vkuiSearch__control{background-color:#d8dbe2;background-color:var(--vkui--color_search_field_background--active,#d8dbe2)}.vkuiSearch__in:active .vkuiSearch__after-width{color:#d8dbe2;color:var(--vkui--color_search_field_background--active,#d8dbe2)}.vkuiSearch__input{color:#000;color:var(--text_primary,var(--vkui--color_text_primary))}.vkuiSearch__placeholder{color:#818c99;color:var(--search_bar_field_tint,var(--vkui--color_icon_medium))}.vkuiSearch__after-width{background:#ebedf0;background:var(
+    --search_bar_field_background,var(--vkui--color_search_field_background)
+  );color:#ebedf0;color:var(
+    --search_bar_field_background,var(--vkui--color_search_field_background)
+  )}.vkuiSearch__after{background:#fff;background:var(
+    --search_bar_background,var(--vkui--color_background_content)
+  );color:#2688eb;color:var(--accent,var(--vkui--color_icon_accent_themed))}.vkuiSearch__after:after{background-color:#ebedf0;background-color:var(
+    --search_bar_field_background,var(--vkui--color_search_field_background)
+  )}.vkuiSearch__after:before{background-color:#fff;background-color:var(
+    --search_bar_background,var(--vkui--color_background_content)
+  )}.vkuiPanelHeader .vkuiSearch{background:#fff;background:var(--header_background,var(--vkui--color_header_background))}.vkuiPanelHeader .vkuiSearch__control{background-color:#ebedf0;background-color:var(
+    --header_search_field_background,var(--vkui--color_search_field_background)
+  )}.vkuiPanelHeader .vkuiSearch__input{color:#000;color:var(--text_primary,var(--vkui--color_text_primary))}.vkuiPanelHeader .vkuiSearch__placeholder{color:#818c99;color:var(--header_search_field_tint,var(--vkui--color_icon_secondary))}.vkuiPanelHeader .vkuiSearch__after-width{background:#ebedf0;background:var(
+    --header_search_field_background,var(--vkui--color_search_field_background)
+  );color:#ebedf0;color:var(
+    --header_search_field_background,var(--vkui--color_search_field_background)
+  )}.vkuiPanelHeader .vkuiSearch__after{background:#fff;background:var(--header_background,var(--vkui--color_header_background));color:#2688eb;color:var(--header_tint,var(--vkui--color_icon_accent_themed))}.vkuiPanelHeader .vkuiSearch__after:after{background-color:#ebedf0;background-color:var(
+    --header_search_field_background,var(--vkui--color_search_field_background)
+  )}.vkuiPanelHeader .vkuiSearch__after:before{background-color:#fff;background-color:var(
+    --header_background,var(--vkui--color_header_background)
+  )}.vkuiSearch--vkcom{padding:initial}.vkuiPanelHeader--vkcom .vkuiSearch,.vkuiSearch--vkcom,.vkuiSearch--vkcom .vkuiSearch__in:active .vkuiSearch__control,.vkuiSearch--vkcom .vkuiSearch__in:hover .vkuiSearch__control{background:transparent}.vkuiSearch--vkcom .vkuiSearch__in{padding-bottom:6px;padding-top:6px}.vkuiSearch--vkcom .vkuiSearch__input{font-size:15px;line-height:20px;padding-left:40px}.vkuiSearch--vkcom .vkuiSearch__placeholder{color:#99a2ad;color:var(--vkui--color_icon_secondary,#99a2ad);padding-left:16px}.vkuiSearch--vkcom .vkuiSearch__icons{color:#818c99;color:var(--search_bar_field_tint,var(--vkui--color_icon_medium));right:calc(100% + 8px);top:4px}.vkuiSearch--vkcom.vkuiSearch--has-value .vkuiSearch__input{padding-right:56px}.vkuiSearch--vkcom.vkuiSearch--has-icon.vkuiSearch--has-value .vkuiSearch__input{padding-right:92px}.vkuiSearch--vkcom .vkuiSearch__icon{height:40px;opacity:.8;width:40px}.vkuiSearch--vkcom .vkuiSearch__icon:hover{background-color:rgba(0,0,0,.04);background-color:var(
+    --background_hover,var(--vkui--color_background_secondary_alpha--hover)
+  );border-radius:50%}.vkuiSearch--vkcom .vkuiSearch__control{background-color:initial}.vkuiPanelHeader--vkcom .vkuiSearch__separator{display:none}.vkuiSearch--vkcom .vkuiSearch__separator{color:#e1e3e6;color:var(--input_border,var(--vkui--color_separator_primary))}.vkuiGroup--card .vkuiSearch--vkcom{margin:0 -8px}.vkuiGroup--card .vkuiSearch--vkcom:first-child{margin-top:-8px}.vkuiGroup--card .vkuiSearch--vkcom:not(:last-child){margin-bottom:8px}.vkuiGroup--card .vkuiSearch--vkcom .vkuiSearch__placeholder{padding-left:20px}.vkuiGroup--card .vkuiSearch--vkcom .vkuiSearch__input{padding-left:44px}.vkuiSearch--ios{padding:8px 12px}

package/dist/cssm/components/Search/Search.js

@@ -7,7 +7,6 @@ import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from "react";
 import { classNames } from "../../lib/classNames";
 import { withPlatform } from "../../hoc/withPlatform";
-import { getClassName } from "../../helpers/getClassName";
 import { Icon16SearchOutline, Icon16Clear, Icon24Cancel } from "@vkontakte/icons";
 import { IOS, VKCOM, ANDROID } from "../../lib/platform";
 import { Touch } from "../Touch/Touch";
@@ -18,6 +17,7 @@ import { Headline } from "../Typography/Headline/Headline";
 import { Separator } from "../Separator/Separator";
 import { useExternRef } from "../../hooks/useExternRef";
 import { useEnsuredControl } from "../../hooks/useEnsuredControl";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
 import "./Search.css";
 
 var SearchPlaceholderTypography = function SearchPlaceholderTypography(_ref) {
@@ -82,6 +82,9 @@ var SearchComponent = function SearchComponent(_ref2) {
       value = _useEnsuredControl2[0],
       onChange = _useEnsuredControl2[1];
 
+  var _useAdaptivity = useAdaptivity(),
+      sizeY = _useAdaptivity.sizeY;
+
   var onFocus = function onFocus(e) {
     setFocused(true);
     inputProps.onFocus && inputProps.onFocus(e);
@@ -114,13 +117,8 @@ var SearchComponent = function SearchComponent(_ref2) {
     onCancel();
   }, [inputRef, onCancel]);
   return createScopedElement("div", {
-    // eslint-disable-next-line vkui/no-object-expression-in-arguments
-    vkuiClass: classNames(getClassName("Search", platform), {
-      "Search--focused": isFocused,
-      "Search--has-value": !!value,
-      "Search--has-after": !!after,
-      "Search--has-icon": !!icon
-    }),
+    vkuiClass: classNames("Search", platform === VKCOM && "Search--vkcom", platform === IOS && "Search--ios", // TODO: V5 перенести на новую адаптивность
+    "Search--sizeY-".concat(sizeY), isFocused && "Search--focused", value && "Search--has-value", icon && "Search--has-after", after && "Search--has-icon"),
     className: className,
     style: style
   }, createScopedElement("div", {

package/dist/cssm/components/Search/Search.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Search/Search.tsx"],"names":["React","classNames","withPlatform","getClassName","Icon16SearchOutline","Icon16Clear","Icon24Cancel","IOS","VKCOM","ANDROID","Touch","noop","Text","Title","Headline","Separator","useExternRef","useEnsuredControl","SearchPlaceholderTypography","platform","children","restProps","SearchComponent","before","className","defaultValue","placeholder","after","getRef","icon","onIconClick","style","autoComplete","inputProps","inputRef","useState","isFocused","setFocused","value","onChange","onFocus","e","onBlur","onCancel","useCallback","nativeInputValueSetter","Object","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","originalEvent","onIconCancelClickStart","preventDefault","focus","Search","displayName"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { withPlatform } from \"../../hoc/withPlatform\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport {\n  Icon16SearchOutline,\n  Icon16Clear,\n  Icon24Cancel,\n} from \"@vkontakte/icons\";\nimport { IOS, VKCOM, ANDROID } from \"../../lib/platform\";\nimport { HasPlatform, HasRef } from \"../../types\";\nimport { Touch, TouchEvent } from \"../Touch/Touch\";\nimport { VKUITouchEvent } from \"../../lib/touch\";\nimport { noop } from \"../../lib/utils\";\nimport { Text } from \"../Typography/Text/Text\";\nimport { Title } from \"../Typography/Title/Title\";\nimport { Headline } from \"../Typography/Headline/Headline\";\nimport { Separator } from \"../Separator/Separator\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { useEnsuredControl } from \"../../hooks/useEnsuredControl\";\nimport \"./Search.css\";\n\nexport type InputRef = (element: HTMLInputElement) => void;\n\ninterface SearchPlaceholderTypographyProps\n  extends HasPlatform,\n    React.HTMLAttributes<HTMLElement> {}\n\nconst SearchPlaceholderTypography = ({\n  platform,\n  children,\n  ...restProps\n}: SearchPlaceholderTypographyProps) => {\n  switch (platform) {\n    case IOS:\n      return (\n        <Title {...restProps} level=\"3\" weight=\"3\">\n          {children}\n        </Title>\n      );\n    case VKCOM:\n      return <Text {...restProps}>{children}</Text>;\n    case ANDROID:\n    default:\n      return (\n        <Headline {...restProps} weight=\"3\">\n          {children}\n        </Headline>\n      );\n  }\n};\n\nexport interface SearchProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement>,\n    HasPlatform {\n  /**\n   * iOS only. Текст кнопки \"отмена\", которая чистит текстовое поле и убирает фокус.\n   */\n  after?: React.ReactNode;\n  before?: React.ReactNode;\n  icon?: React.ReactNode;\n  onIconClick?: (e: VKUITouchEvent) => void;\n  defaultValue?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Search\n */\nconst SearchComponent = ({\n  before = <Icon16SearchOutline aria-hidden />,\n  className,\n  defaultValue = \"\",\n  placeholder = \"Поиск\",\n  after = \"Отмена\",\n  getRef,\n  platform,\n  icon,\n  onIconClick = noop,\n  style,\n  autoComplete = \"off\",\n  ...inputProps\n}: SearchProps) => {\n  const inputRef = useExternRef(getRef);\n  const [isFocused, setFocused] = React.useState(false);\n  const [value, onChange] = useEnsuredControl(inputProps, { defaultValue });\n\n  const onFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocused(true);\n    inputProps.onFocus && inputProps.onFocus(e);\n  };\n\n  const onBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocused(false);\n    inputProps.onBlur && inputProps.onBlur(e);\n  };\n\n  const onCancel = React.useCallback(() => {\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n      HTMLInputElement.prototype,\n      \"value\"\n    )?.set;\n    nativeInputValueSetter?.call(inputRef.current, \"\");\n\n    const ev2 = new Event(\"input\", { bubbles: true });\n    inputRef.current?.dispatchEvent(ev2);\n  }, [inputRef]);\n\n  const onIconClickStart = React.useCallback(\n    (e: TouchEvent) => onIconClick(e.originalEvent),\n    [onIconClick]\n  );\n\n  const onIconCancelClickStart = React.useCallback(\n    (e: TouchEvent) => {\n      e.originalEvent.preventDefault();\n      inputRef.current?.focus();\n      onCancel();\n    },\n    [inputRef, onCancel]\n  );\n\n  return (\n    <div\n      // eslint-disable-next-line vkui/no-object-expression-in-arguments\n      vkuiClass={classNames(getClassName(\"Search\", platform), {\n        \"Search--focused\": isFocused,\n        \"Search--has-value\": !!value,\n        \"Search--has-after\": !!after,\n        \"Search--has-icon\": !!icon,\n      })}\n      className={className}\n      style={style}\n    >\n      <div vkuiClass=\"Search__in\">\n        <div vkuiClass=\"Search__width\" />\n        <label vkuiClass=\"Search__control\">\n          <input\n            type=\"search\"\n            {...inputProps}\n            autoComplete={autoComplete}\n            ref={inputRef}\n            vkuiClass=\"Search__input\"\n            onFocus={onFocus}\n            onBlur={onBlur}\n            onChange={onChange}\n            value={value}\n          />\n          {platform === IOS && after && (\n            <div vkuiClass=\"Search__after-width\">{after}</div>\n          )}\n          <div vkuiClass=\"Search__placeholder\">\n            <div vkuiClass=\"Search__placeholder-in\">\n              {before}\n              <SearchPlaceholderTypography\n                vkuiClass=\"Search__placeholder-text\"\n                platform={platform}\n              >\n                {placeholder}\n              </SearchPlaceholderTypography>\n            </div>\n            {isFocused && platform === IOS && after && (\n              <div vkuiClass=\"Search__after-width\">{after}</div>\n            )}\n          </div>\n        </label>\n        <div vkuiClass=\"Search__after\" onClick={onCancel}>\n          <div vkuiClass=\"Search__icons\">\n            {icon && (\n              <Touch onStart={onIconClickStart} vkuiClass=\"Search__icon\">\n                {icon}\n              </Touch>\n            )}\n            {!!value && (\n              <Touch onStart={onIconCancelClickStart} vkuiClass=\"Search__icon\">\n                {platform === IOS ? <Icon16Clear /> : <Icon24Cancel />}\n              </Touch>\n            )}\n          </div>\n          {platform === IOS && after && (\n            <div vkuiClass=\"Search__after-in\">{after}</div>\n          )}\n        </div>\n      </div>\n      {platform === VKCOM && <Separator vkuiClass=\"Search__separator\" wide />}\n    </div>\n  );\n};\n\nexport const Search = withPlatform(SearchComponent);\n\nSearch.displayName = \"Search\";\n"],"file":"Search.js"}
+{"version":3,"sources":["../../../../src/components/Search/Search.tsx"],"names":["React","classNames","withPlatform","Icon16SearchOutline","Icon16Clear","Icon24Cancel","IOS","VKCOM","ANDROID","Touch","noop","Text","Title","Headline","Separator","useExternRef","useEnsuredControl","useAdaptivity","SearchPlaceholderTypography","platform","children","restProps","SearchComponent","before","className","defaultValue","placeholder","after","getRef","icon","onIconClick","style","autoComplete","inputProps","inputRef","useState","isFocused","setFocused","value","onChange","sizeY","onFocus","e","onBlur","onCancel","useCallback","nativeInputValueSetter","Object","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","originalEvent","onIconCancelClickStart","preventDefault","focus","Search","displayName"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { withPlatform } from \"../../hoc/withPlatform\";\nimport {\n  Icon16SearchOutline,\n  Icon16Clear,\n  Icon24Cancel,\n} from \"@vkontakte/icons\";\nimport { IOS, VKCOM, ANDROID } from \"../../lib/platform\";\nimport { HasPlatform, HasRef } from \"../../types\";\nimport { Touch, TouchEvent } from \"../Touch/Touch\";\nimport { VKUITouchEvent } from \"../../lib/touch\";\nimport { noop } from \"../../lib/utils\";\nimport { Text } from \"../Typography/Text/Text\";\nimport { Title } from \"../Typography/Title/Title\";\nimport { Headline } from \"../Typography/Headline/Headline\";\nimport { Separator } from \"../Separator/Separator\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { useEnsuredControl } from \"../../hooks/useEnsuredControl\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport \"./Search.css\";\n\nexport type InputRef = (element: HTMLInputElement) => void;\n\ninterface SearchPlaceholderTypographyProps\n  extends HasPlatform,\n    React.HTMLAttributes<HTMLElement> {}\n\nconst SearchPlaceholderTypography = ({\n  platform,\n  children,\n  ...restProps\n}: SearchPlaceholderTypographyProps) => {\n  switch (platform) {\n    case IOS:\n      return (\n        <Title {...restProps} level=\"3\" weight=\"3\">\n          {children}\n        </Title>\n      );\n    case VKCOM:\n      return <Text {...restProps}>{children}</Text>;\n    case ANDROID:\n    default:\n      return (\n        <Headline {...restProps} weight=\"3\">\n          {children}\n        </Headline>\n      );\n  }\n};\n\nexport interface SearchProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement>,\n    HasPlatform {\n  /**\n   * iOS only. Текст кнопки \"отмена\", которая чистит текстовое поле и убирает фокус.\n   */\n  after?: React.ReactNode;\n  before?: React.ReactNode;\n  icon?: React.ReactNode;\n  onIconClick?: (e: VKUITouchEvent) => void;\n  defaultValue?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Search\n */\nconst SearchComponent = ({\n  before = <Icon16SearchOutline aria-hidden />,\n  className,\n  defaultValue = \"\",\n  placeholder = \"Поиск\",\n  after = \"Отмена\",\n  getRef,\n  platform,\n  icon,\n  onIconClick = noop,\n  style,\n  autoComplete = \"off\",\n  ...inputProps\n}: SearchProps) => {\n  const inputRef = useExternRef(getRef);\n  const [isFocused, setFocused] = React.useState(false);\n  const [value, onChange] = useEnsuredControl(inputProps, { defaultValue });\n  const { sizeY } = useAdaptivity();\n\n  const onFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocused(true);\n    inputProps.onFocus && inputProps.onFocus(e);\n  };\n\n  const onBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocused(false);\n    inputProps.onBlur && inputProps.onBlur(e);\n  };\n\n  const onCancel = React.useCallback(() => {\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n      HTMLInputElement.prototype,\n      \"value\"\n    )?.set;\n    nativeInputValueSetter?.call(inputRef.current, \"\");\n\n    const ev2 = new Event(\"input\", { bubbles: true });\n    inputRef.current?.dispatchEvent(ev2);\n  }, [inputRef]);\n\n  const onIconClickStart = React.useCallback(\n    (e: TouchEvent) => onIconClick(e.originalEvent),\n    [onIconClick]\n  );\n\n  const onIconCancelClickStart = React.useCallback(\n    (e: TouchEvent) => {\n      e.originalEvent.preventDefault();\n      inputRef.current?.focus();\n      onCancel();\n    },\n    [inputRef, onCancel]\n  );\n\n  return (\n    <div\n      vkuiClass={classNames(\n        \"Search\",\n        platform === VKCOM && \"Search--vkcom\",\n        platform === IOS && \"Search--ios\",\n        // TODO: V5 перенести на новую адаптивность\n        `Search--sizeY-${sizeY}`,\n        isFocused && \"Search--focused\",\n        value && \"Search--has-value\",\n        icon && \"Search--has-after\",\n        after && \"Search--has-icon\"\n      )}\n      className={className}\n      style={style}\n    >\n      <div vkuiClass=\"Search__in\">\n        <div vkuiClass=\"Search__width\" />\n        <label vkuiClass=\"Search__control\">\n          <input\n            type=\"search\"\n            {...inputProps}\n            autoComplete={autoComplete}\n            ref={inputRef}\n            vkuiClass=\"Search__input\"\n            onFocus={onFocus}\n            onBlur={onBlur}\n            onChange={onChange}\n            value={value}\n          />\n          {platform === IOS && after && (\n            <div vkuiClass=\"Search__after-width\">{after}</div>\n          )}\n          <div vkuiClass=\"Search__placeholder\">\n            <div vkuiClass=\"Search__placeholder-in\">\n              {before}\n              <SearchPlaceholderTypography\n                vkuiClass=\"Search__placeholder-text\"\n                platform={platform}\n              >\n                {placeholder}\n              </SearchPlaceholderTypography>\n            </div>\n            {isFocused && platform === IOS && after && (\n              <div vkuiClass=\"Search__after-width\">{after}</div>\n            )}\n          </div>\n        </label>\n        <div vkuiClass=\"Search__after\" onClick={onCancel}>\n          <div vkuiClass=\"Search__icons\">\n            {icon && (\n              <Touch onStart={onIconClickStart} vkuiClass=\"Search__icon\">\n                {icon}\n              </Touch>\n            )}\n            {!!value && (\n              <Touch onStart={onIconCancelClickStart} vkuiClass=\"Search__icon\">\n                {platform === IOS ? <Icon16Clear /> : <Icon24Cancel />}\n              </Touch>\n            )}\n          </div>\n          {platform === IOS && after && (\n            <div vkuiClass=\"Search__after-in\">{after}</div>\n          )}\n        </div>\n      </div>\n      {platform === VKCOM && <Separator vkuiClass=\"Search__separator\" wide />}\n    </div>\n  );\n};\n\nexport const Search = withPlatform(SearchComponent);\n\nSearch.displayName = \"Search\";\n"],"file":"Search.js"}

package/dist/cssm/components/Select/Select.css

@@ -1 +1 @@
-.vkuiSelect{box-sizing:border-box;cursor:pointer;position:relative}.vkuiSelect__el{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;display:block;font-size:16px;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;z-index:3}.vkuiSelect__container{box-sizing:border-box;color:#000;color:var(--text_primary,var(--vkui--color_text_primary));flex-grow:1;flex-shrink:1;overflow:hidden;padding-left:12px;padding-right:12px;position:relative;z-index:2}.vkuiSelect--hasBefore .vkuiSelect__container{padding-left:0}.vkuiSelect--hasAfter .vkuiSelect__container{padding-right:0}.vkuiSelect--multiline .vkuiSelect__container{padding-bottom:12px;padding-top:12px}.vkuiSelect--sizeY-compact.vkuiSelect--multiline .vkuiSelect__container{padding-bottom:8px;padding-top:8px}.vkuiSelect__title{display:block}.vkuiSelect:not(.vkuiSelect--multiline) .vkuiSelect__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiSelect--empty .vkuiSelect__title{color:#818c99;color:var(--field_text_placeholder,var(--vkui--color_text_secondary))}.vkuiSelect--align-right .vkuiSelect__title{text-align:right}.vkuiSelect--align-center .vkuiSelect__title{text-align:center}.vkuiCalendarHeader__picker .vkuiSelect__container{padding-right:4px}
+.vkuiSelect{box-sizing:border-box;cursor:pointer;position:relative}.vkuiSelect__el{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;display:block;font-size:16px;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;z-index:7}.vkuiSelect__container{box-sizing:border-box;color:#000;color:var(--text_primary,var(--vkui--color_text_primary));flex-grow:1;flex-shrink:1;overflow:hidden;padding-left:12px;padding-right:12px;position:relative;z-index:6}.vkuiSelect--hasBefore .vkuiSelect__container{padding-left:0}.vkuiSelect--hasAfter .vkuiSelect__container{padding-right:0}.vkuiSelect--multiline .vkuiSelect__container{padding-bottom:12px;padding-top:12px}.vkuiSelect--sizeY-compact.vkuiSelect--multiline .vkuiSelect__container{padding-bottom:8px;padding-top:8px}.vkuiSelect__title{display:block}.vkuiSelect:not(.vkuiSelect--multiline) .vkuiSelect__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiSelect--empty .vkuiSelect__title{color:#818c99;color:var(--field_text_placeholder,var(--vkui--color_text_secondary))}.vkuiSelect--align-right .vkuiSelect__title{text-align:right}.vkuiSelect--align-center .vkuiSelect__title{text-align:center}.vkuiCalendarHeader__picker .vkuiSelect__container{padding-right:4px}

package/dist/cssm/components/Select/Select.d.ts

@@ -15,4 +15,4 @@ export interface SelectProps extends CustomSelectProps, AdaptivityProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/Select
  */
-export declare const Select: React.FC<Pick<SelectProps & AdaptivityContextInterface, "platform" | "required" | "disabled" | "hidden" | "dir" | "form" | "slot" | "style" | "title" | "color" | "size" | "icon" | "after" | "multiple" | "translate" | "prefix" | "children" | "className" | "id" | "lang" | "name" | "role" | "tabIndex" | "mode" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "value" | "autoFocus" | "autoComplete" | "align" | "getRootRef" | "getRef" | "onOpen" | "onClose" | "before" | "options" | "popupDirection" | "multiline" | "onInputChange" | "selectType" | "searchable" | "emptyText" | "filterFn" | "renderOption" | "renderDropdown" | "fetching" | "dropdownOffsetDistance" | "fixDropdownWidth" | "forceDropdownPortal" | "autoHideScrollbar" | "autoHideScrollbarDelay"> & import("../AdaptivityProvider/AdaptivityContext").SizeProps>;
+export declare const Select: React.FC<Pick<SelectProps & AdaptivityContextInterface, "platform" | "required" | "disabled" | "hidden" | "dir" | "form" | "slot" | "style" | "title" | "color" | "size" | "icon" | "after" | "multiple" | "translate" | "prefix" | "children" | "className" | "id" | "lang" | "name" | "role" | "tabIndex" | "mode" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "status" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "value" | "autoFocus" | "autoComplete" | "align" | "getRootRef" | "getRef" | "onOpen" | "onClose" | "before" | "options" | "popupDirection" | "multiline" | "onInputChange" | "selectType" | "searchable" | "emptyText" | "filterFn" | "renderOption" | "renderDropdown" | "fetching" | "dropdownOffsetDistance" | "fixDropdownWidth" | "forceDropdownPortal" | "autoHideScrollbar" | "autoHideScrollbarDelay"> & import("../AdaptivityProvider/AdaptivityContext").SizeProps>;

package/dist/cssm/components/SelectMimicry/SelectMimicry.d.ts

@@ -4,7 +4,7 @@ import { HasAlign, HasRootRef } from "../../types";
 import { AdaptivityProps } from "../../hoc/withAdaptivity";
 import { SelectType } from "../Select/Select";
 import "../Select/Select.css";
-export interface SelectMimicryProps extends React.HTMLAttributes<HTMLElement>, HasAlign, HasRootRef<HTMLElement>, AdaptivityProps, Pick<FormFieldProps, "before" | "after"> {
+export interface SelectMimicryProps extends React.HTMLAttributes<HTMLElement>, HasAlign, HasRootRef<HTMLElement>, AdaptivityProps, Pick<FormFieldProps, "before" | "after" | "status"> {
     multiline?: boolean;
     disabled?: boolean;
     selectType?: keyof typeof SelectType;
@@ -12,4 +12,4 @@ export interface SelectMimicryProps extends React.HTMLAttributes<HTMLElement>, H
 /**
  * @see https://vkcom.github.io/VKUI/#/SelectMimicry
  */
-export declare const SelectMimicry: React.FC<Pick<SelectMimicryProps, "disabled" | "hidden" | "dir" | "slot" | "style" | "title" | "color" | "after" | "translate" | "prefix" | "children" | "className" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "align" | "getRootRef" | "before" | "multiline" | "selectType"> & import("../AdaptivityProvider/AdaptivityContext").SizeProps>;
+export declare const SelectMimicry: React.FC<Pick<SelectMimicryProps, "disabled" | "hidden" | "dir" | "slot" | "style" | "title" | "color" | "after" | "translate" | "prefix" | "children" | "className" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "status" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "align" | "getRootRef" | "before" | "multiline" | "selectType"> & import("../AdaptivityProvider/AdaptivityContext").SizeProps>;

package/dist/cssm/components/SelectMimicry/SelectMimicry.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["tabIndex", "placeholder", "children", "align", "getRootRef", "multiline", "disabled", "onClick", "sizeX", "sizeY", "before", "after", "selectType"];
+var _excluded = ["tabIndex", "placeholder", "children", "align", "getRootRef", "multiline", "disabled", "onClick", "sizeX", "sizeY", "before", "after", "selectType", "status"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import { classNames } from "../../lib/classNames";
 import { DropdownIcon } from "../DropdownIcon/DropdownIcon";
@@ -29,6 +29,7 @@ var SelectMimicryComponent = function SelectMimicryComponent(_ref) {
       after = _ref$after === void 0 ? createScopedElement(DropdownIcon, null) : _ref$after,
       _ref$selectType = _ref.selectType,
       selectType = _ref$selectType === void 0 ? SelectType.default : _ref$selectType,
+      status = _ref.status,
       restProps = _objectWithoutProperties(_ref, _excluded);
 
   var platform = usePlatform();
@@ -43,7 +44,8 @@ var SelectMimicryComponent = function SelectMimicryComponent(_ref) {
     disabled: disabled,
     before: before,
     after: after,
-    mode: getFormFieldModeFromSelectType(selectType)
+    mode: getFormFieldModeFromSelectType(selectType),
+    status: status
   }), createScopedElement("div", {
     vkuiClass: "Select__container"
   }, createScopedElement(SelectTypography, {