@vkontakte/vkui 5.0.0 → 5.0.1

package/dist/components/SegmentedControl/SegmentedControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.js","names":["React","classNames","useIsomorphicLayoutEffect","generateRandomId","noop","warnOnce","SegmentedControlOption","useAdaptivity","getSizeYClassName","warn","SegmentedControl","size","name","options","getRootRef","onChange","valueProp","value","defaultValue","children","restProps","sizeY","initialValue","process","env","NODE_ENV","undefined","useState","activeOptionIdx","updateActiveOptionIdx","valueLocal","updateValueLocal","nameRef","useRef","_activeOptionIdx","findIndex","option","translateX","handleOnChange","width","length","transform","WebkitTransform","map","label","optionProps","current"],"sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport { generateRandomId, noop } from \"../../lib/utils\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport { SegmentedControlOption } from \"./SegmentedControlOption/SegmentedControlOption\";\nimport { HasRootRef } from \"../../types\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport \"./SegmentedControl.css\";\n\nexport type SegmentedControlValue = string | number | undefined;\n\nexport interface SegmentedControlOptionInterface\n  extends Omit<React.HTMLAttributes<HTMLElement>, \"label\"> {\n  label: React.ReactChild;\n  value: SegmentedControlValue;\n}\n\nexport interface SegmentedControlProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\">,\n    HasRootRef<HTMLDivElement> {\n  options: SegmentedControlOptionInterface[];\n  size?: \"m\" | \"l\";\n  name?: string;\n  onChange?: (value: SegmentedControlValue) => void;\n  value?: SegmentedControlValue;\n  defaultValue?: SegmentedControlValue;\n}\n\nconst warn = warnOnce(\"SegmentedControl\");\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControl = ({\n  size = \"l\",\n  name,\n  options,\n  getRootRef,\n  onChange = noop,\n  value: valueProp,\n  defaultValue,\n  children,\n  ...restProps\n}: SegmentedControlProps) => {\n  const { sizeY } = useAdaptivity();\n  const initialValue = defaultValue ?? options[0]?.value;\n\n  if (process.env.NODE_ENV === \"development\") {\n    if (valueProp !== undefined && defaultValue !== undefined) {\n      warn(\n        \"SegmentedControl должен быть либо управляемым, либо неуправляемым\" +\n          \"(укажите либо свойство value, либо свойство defaultValue, но не оба).\",\n        \"error\"\n      );\n    }\n  }\n\n  const [activeOptionIdx, updateActiveOptionIdx] = React.useState<number>(0);\n  const [valueLocal, updateValueLocal] =\n    React.useState<SegmentedControlValue>(initialValue);\n\n  const value = valueProp ?? valueLocal;\n\n  const nameRef = React.useRef<string>(name ?? generateRandomId());\n\n  useIsomorphicLayoutEffect(() => {\n    const _activeOptionIdx = options.findIndex(\n      (option) => option.value === value\n    );\n\n    if (_activeOptionIdx === -1 && process.env.NODE_ENV === \"development\") {\n      warn(\"defaultValue: такого значения нет среди опций!\", \"error\");\n    }\n\n    updateActiveOptionIdx(_activeOptionIdx);\n  }, [value, options]);\n\n  const translateX = `translateX(${100 * activeOptionIdx}%)`;\n\n  const handleOnChange = (value: SegmentedControlValue) => {\n    if (valueProp === undefined) {\n      updateValueLocal(value);\n    }\n    onChange(value);\n  };\n\n  return (\n    <div\n      {...restProps}\n      vkuiClass={classNames(\n        \"SegmentedControl\",\n        getSizeYClassName(\"SegmentedControl\", sizeY),\n        `SegmentedControl--size-${size}`\n      )}\n      ref={getRootRef}\n    >\n      <div role=\"radiogroup\" vkuiClass=\"SegmentedControl__in\">\n        {activeOptionIdx > -1 && (\n          <div\n            aria-hidden=\"true\"\n            vkuiClass=\"SegmentedControl__slider\"\n            style={{\n              width: `${100 / options.length}%`,\n              transform: translateX,\n              WebkitTransform: translateX,\n            }}\n          />\n        )}\n        {options.map(({ label, ...optionProps }) => (\n          <SegmentedControlOption\n            key={`${optionProps.value}`}\n            {...optionProps}\n            vkuiClass=\"SegmentedControl__option\"\n            name={nameRef.current}\n            checked={value === optionProps.value}\n            onChange={() => handleOnChange(optionProps.value)}\n          >\n            {label}\n          </SegmentedControlOption>\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"SegmentedControl.js","names":["React","classNamesString","useIsomorphicLayoutEffect","generateRandomId","noop","warnOnce","SegmentedControlOption","useAdaptivity","getSizeYClassName","warn","SegmentedControl","size","name","options","getRootRef","onChange","valueProp","value","defaultValue","children","className","restProps","sizeY","initialValue","process","env","NODE_ENV","undefined","useState","activeOptionIdx","updateActiveOptionIdx","valueLocal","updateValueLocal","nameRef","useRef","_activeOptionIdx","findIndex","option","translateX","handleOnChange","styles","width","length","transform","WebkitTransform","map","label","optionClassName","optionProps","current"],"sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport { generateRandomId, noop } from \"../../lib/utils\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport { SegmentedControlOption } from \"./SegmentedControlOption/SegmentedControlOption\";\nimport { HasRootRef } from \"../../types\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport styles from \"./SegmentedControl.module.css\";\n\nexport type SegmentedControlValue = string | number | undefined;\n\nexport interface SegmentedControlOptionInterface\n  extends Omit<React.HTMLAttributes<HTMLElement>, \"label\"> {\n  label: React.ReactChild;\n  value: SegmentedControlValue;\n}\n\nexport interface SegmentedControlProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\">,\n    HasRootRef<HTMLDivElement> {\n  options: SegmentedControlOptionInterface[];\n  size?: \"m\" | \"l\";\n  name?: string;\n  onChange?: (value: SegmentedControlValue) => void;\n  value?: SegmentedControlValue;\n  defaultValue?: SegmentedControlValue;\n}\n\nconst warn = warnOnce(\"SegmentedControl\");\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControl = ({\n  size = \"l\",\n  name,\n  options,\n  getRootRef,\n  onChange = noop,\n  value: valueProp,\n  defaultValue,\n  children,\n  className,\n  ...restProps\n}: SegmentedControlProps) => {\n  const { sizeY } = useAdaptivity();\n  const initialValue = defaultValue ?? options[0]?.value;\n\n  if (process.env.NODE_ENV === \"development\") {\n    if (valueProp !== undefined && defaultValue !== undefined) {\n      warn(\n        \"SegmentedControl должен быть либо управляемым, либо неуправляемым\" +\n          \"(укажите либо свойство value, либо свойство defaultValue, но не оба).\",\n        \"error\"\n      );\n    }\n  }\n\n  const [activeOptionIdx, updateActiveOptionIdx] = React.useState<number>(0);\n  const [valueLocal, updateValueLocal] =\n    React.useState<SegmentedControlValue>(initialValue);\n\n  const value = valueProp ?? valueLocal;\n\n  const nameRef = React.useRef<string>(name ?? generateRandomId());\n\n  useIsomorphicLayoutEffect(() => {\n    const _activeOptionIdx = options.findIndex(\n      (option) => option.value === value\n    );\n\n    if (_activeOptionIdx === -1 && process.env.NODE_ENV === \"development\") {\n      warn(\"defaultValue: такого значения нет среди опций!\", \"error\");\n    }\n\n    updateActiveOptionIdx(_activeOptionIdx);\n  }, [value, options]);\n\n  const translateX = `translateX(${100 * activeOptionIdx}%)`;\n\n  const handleOnChange = (value: SegmentedControlValue) => {\n    if (valueProp === undefined) {\n      updateValueLocal(value);\n    }\n    onChange(value);\n  };\n\n  return (\n    <div\n      {...restProps}\n      className={classNamesString(\n        styles[\"SegmentedControl\"],\n        getSizeYClassName(styles[\"SegmentedControl\"], sizeY),\n        styles[`SegmentedControl--size-${size}`],\n        className\n      )}\n      ref={getRootRef}\n    >\n      <div role=\"radiogroup\" className={styles[\"SegmentedControl__in\"]}>\n        {activeOptionIdx > -1 && (\n          <div\n            aria-hidden=\"true\"\n            className={styles[\"SegmentedControl__slider\"]}\n            style={{\n              width: `${100 / options.length}%`,\n              transform: translateX,\n              WebkitTransform: translateX,\n            }}\n          />\n        )}\n        {options.map(\n          ({ label, className: optionClassName, ...optionProps }) => (\n            <SegmentedControlOption\n              key={`${optionProps.value}`}\n              {...optionProps}\n              className={classNamesString(\n                styles[\"SegmentedControl__option\"],\n                optionClassName\n              )}\n              name={nameRef.current}\n              checked={value === optionProps.value}\n              onChange={() => handleOnChange(optionProps.value)}\n            >\n              {label}\n            </SegmentedControlOption>\n          )\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import { VisuallyHiddenInputProps } from "../../VisuallyHiddenInput/VisuallyHiddenInput";
-import "./SegmentedControlOption.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/SegmentedControl
  */

package/dist/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.js

@@ -1,43 +1,38 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className", "style", "children"];
-import { createScopedElement } from "../../../lib/jsxRuntime";
+import * as React from "react";
 import { useAdaptivity } from "../../../hooks/useAdaptivity";
 import { useFocusVisible } from "../../../hooks/useFocusVisible";
 import { callMultiple } from "../../../lib/callMultiple";
-import { classNames } from "../../../lib/classNames";
+import { classNamesString } from "../../../lib/classNames";
 import { FocusVisible } from "../../FocusVisible/FocusVisible";
 import { VisuallyHiddenInput } from "../../VisuallyHiddenInput/VisuallyHiddenInput";
 import { getSizeYClassName } from "../../../helpers/getSizeYClassName";
-
 /**
  * @see https://vkcom.github.io/VKUI/#/SegmentedControl
  */
 export var SegmentedControlOption = function SegmentedControlOption(_ref) {
   var className = _ref.className,
-      style = _ref.style,
-      children = _ref.children,
-      restProps = _objectWithoutProperties(_ref, _excluded);
-
+    style = _ref.style,
+    children = _ref.children,
+    restProps = _objectWithoutProperties(_ref, _excluded);
   var _useFocusVisible = useFocusVisible(),
-      focusVisible = _useFocusVisible.focusVisible,
-      onBlur = _useFocusVisible.onBlur,
-      onFocus = _useFocusVisible.onFocus;
-
+    focusVisible = _useFocusVisible.focusVisible,
+    onBlur = _useFocusVisible.onBlur,
+    onFocus = _useFocusVisible.onFocus;
   var _useAdaptivity = useAdaptivity(),
-      sizeY = _useAdaptivity.sizeY;
-
-  return createScopedElement("label", {
-    className: className,
-    style: style,
-    vkuiClass: classNames("SegmentedControlOption", restProps.checked && "SegmentedControlOption--checked", focusVisible && "SegmentedControlOption--focus-visible")
-  }, createScopedElement(VisuallyHiddenInput, _extends({}, restProps, {
+    sizeY = _useAdaptivity.sizeY;
+  return /*#__PURE__*/React.createElement("label", {
+    className: classNamesString("vkuiSegmentedControlOption", restProps.checked && "vkuiSegmentedControlOption--checked", focusVisible && "vkuiSegmentedControlOption--focus-visible", className),
+    style: style
+  }, /*#__PURE__*/React.createElement(VisuallyHiddenInput, _extends({}, restProps, {
     type: "radio",
     onBlur: callMultiple(onBlur, restProps.onBlur),
     onFocus: callMultiple(onFocus, restProps.onFocus)
-  })), createScopedElement("span", {
-    vkuiClass: classNames("SegmentedControlOption__content", getSizeYClassName("SegmentedControlOption__content", sizeY))
-  }, children), createScopedElement(FocusVisible, {
+  })), /*#__PURE__*/React.createElement("span", {
+    className: classNamesString("vkuiSegmentedControlOption__content", getSizeYClassName("vkuiSegmentedControlOption__content", sizeY))
+  }, children), /*#__PURE__*/React.createElement(FocusVisible, {
     mode: "inside"
   }));
 };

package/dist/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlOption.js","names":["useAdaptivity","useFocusVisible","callMultiple","classNames","FocusVisible","VisuallyHiddenInput","getSizeYClassName","SegmentedControlOption","className","style","children","restProps","focusVisible","onBlur","onFocus","sizeY","checked"],"sources":["../../../../src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx"],"sourcesContent":["import { useAdaptivity } from \"../../../hooks/useAdaptivity\";\nimport { useFocusVisible } from \"../../../hooks/useFocusVisible\";\nimport { callMultiple } from \"../../../lib/callMultiple\";\nimport { classNames } from \"../../../lib/classNames\";\nimport { FocusVisible } from \"../../FocusVisible/FocusVisible\";\nimport {\n  VisuallyHiddenInput,\n  VisuallyHiddenInputProps,\n} from \"../../VisuallyHiddenInput/VisuallyHiddenInput\";\nimport { getSizeYClassName } from \"../../../helpers/getSizeYClassName\";\nimport \"./SegmentedControlOption.css\";\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControlOption = ({\n  className,\n  style,\n  children,\n  ...restProps\n}: VisuallyHiddenInputProps) => {\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n  const { sizeY } = useAdaptivity();\n\n  return (\n    <label\n      className={className}\n      style={style}\n      vkuiClass={classNames(\n        \"SegmentedControlOption\",\n        restProps.checked && \"SegmentedControlOption--checked\",\n        focusVisible && \"SegmentedControlOption--focus-visible\"\n      )}\n    >\n      <VisuallyHiddenInput\n        {...restProps}\n        type=\"radio\"\n        onBlur={callMultiple(onBlur, restProps.onBlur)}\n        onFocus={callMultiple(onFocus, restProps.onFocus)}\n      />\n      <span\n        vkuiClass={classNames(\n          \"SegmentedControlOption__content\",\n          getSizeYClassName(\"SegmentedControlOption__content\", sizeY)\n        )}\n      >\n        {children}\n      </span>\n      <FocusVisible mode=\"inside\" />\n    </label>\n  );\n};\n"],"mappings":";;;;AAAA,SAASA,aAAT;AACA,SAASC,eAAT;AACA,SAASC,YAAT;AACA,SAASC,UAAT;AACA,SAASC,YAAT;AACA,SACEC,mBADF;AAIA,SAASC,iBAAT;;AAGA;AACA;AACA;AACA,OAAO,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAyB,OAKN;EAAA,IAJ9BC,SAI8B,QAJ9BA,SAI8B;EAAA,IAH9BC,KAG8B,QAH9BA,KAG8B;EAAA,IAF9BC,QAE8B,QAF9BA,QAE8B;EAAA,IAD3BC,SAC2B;;EAC9B,uBAA0CV,eAAe,EAAzD;EAAA,IAAQW,YAAR,oBAAQA,YAAR;EAAA,IAAsBC,MAAtB,oBAAsBA,MAAtB;EAAA,IAA8BC,OAA9B,oBAA8BA,OAA9B;;EACA,qBAAkBd,aAAa,EAA/B;EAAA,IAAQe,KAAR,kBAAQA,KAAR;;EAEA,OACE;IACE,SAAS,EAAEP,SADb;IAEE,KAAK,EAAEC,KAFT;IAGE,SAAS,EAAEN,UAAU,CACnB,wBADmB,EAEnBQ,SAAS,CAACK,OAAV,IAAqB,iCAFF,EAGnBJ,YAAY,IAAI,uCAHG;EAHvB,GASE,oBAAC,mBAAD,eACMD,SADN;IAEE,IAAI,EAAC,OAFP;IAGE,MAAM,EAAET,YAAY,CAACW,MAAD,EAASF,SAAS,CAACE,MAAnB,CAHtB;IAIE,OAAO,EAAEX,YAAY,CAACY,OAAD,EAAUH,SAAS,CAACG,OAApB;EAJvB,GATF,EAeE;IACE,SAAS,EAAEX,UAAU,CACnB,iCADmB,EAEnBG,iBAAiB,CAAC,iCAAD,EAAoCS,KAApC,CAFE;EADvB,GAMGL,QANH,CAfF,EAuBE,oBAAC,YAAD;IAAc,IAAI,EAAC;EAAnB,EAvBF,CADF;AA2BD,CApCM"}
+{"version":3,"file":"SegmentedControlOption.js","names":["React","useAdaptivity","useFocusVisible","callMultiple","classNamesString","FocusVisible","VisuallyHiddenInput","getSizeYClassName","SegmentedControlOption","className","style","children","restProps","focusVisible","onBlur","onFocus","sizeY","checked"],"sources":["../../../../src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useAdaptivity } from \"../../../hooks/useAdaptivity\";\nimport { useFocusVisible } from \"../../../hooks/useFocusVisible\";\nimport { callMultiple } from \"../../../lib/callMultiple\";\nimport { classNamesString } from \"../../../lib/classNames\";\nimport { FocusVisible } from \"../../FocusVisible/FocusVisible\";\nimport {\n  VisuallyHiddenInput,\n  VisuallyHiddenInputProps,\n} from \"../../VisuallyHiddenInput/VisuallyHiddenInput\";\nimport { getSizeYClassName } from \"../../../helpers/getSizeYClassName\";\nimport styles from \"./SegmentedControlOption.module.css\";\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControlOption = ({\n  className,\n  style,\n  children,\n  ...restProps\n}: VisuallyHiddenInputProps) => {\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n  const { sizeY } = useAdaptivity();\n\n  return (\n    <label\n      className={classNamesString(\n        styles[\"SegmentedControlOption\"],\n        restProps.checked && styles[\"SegmentedControlOption--checked\"],\n        focusVisible && styles[\"SegmentedControlOption--focus-visible\"],\n        className\n      )}\n      style={style}\n    >\n      <VisuallyHiddenInput\n        {...restProps}\n        type=\"radio\"\n        onBlur={callMultiple(onBlur, restProps.onBlur)}\n        onFocus={callMultiple(onFocus, restProps.onFocus)}\n      />\n      <span\n        className={classNamesString(\n          styles[\"SegmentedControlOption__content\"],\n          getSizeYClassName(styles[\"SegmentedControlOption__content\"], sizeY)\n        )}\n      >\n        {children}\n      </span>\n      <FocusVisible mode=\"inside\" />\n    </label>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,eAAe,QAAQ,gCAAgC;AAChE,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,gBAAgB,QAAQ,yBAAyB;AAC1D,SAASC,YAAY,QAAQ,iCAAiC;AAC9D,SACEC,mBAAmB,QAEd,+CAA+C;AACtD,SAASC,iBAAiB,QAAQ,oCAAoC;AAGtE;AACA;AACA;AACA,OAAO,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAsB,OAKH;EAAA,IAJ9BC,SAAS,QAATA,SAAS;IACTC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IACLC,SAAS;EAEZ,uBAA0CV,eAAe,EAAE;IAAnDW,YAAY,oBAAZA,YAAY;IAAEC,MAAM,oBAANA,MAAM;IAAEC,OAAO,oBAAPA,OAAO;EACrC,qBAAkBd,aAAa,EAAE;IAAzBe,KAAK,kBAALA,KAAK;EAEb,oBACE;IACE,SAAS,EAAEZ,gBAAgB,+BAEzBQ,SAAS,CAACK,OAAO,yCAA6C,EAC9DJ,YAAY,+CAAmD,EAC/DJ,SAAS,CACT;IACF,KAAK,EAAEC;EAAM,gBAEb,oBAAC,mBAAmB,eACdE,SAAS;IACb,IAAI,EAAC,OAAO;IACZ,MAAM,EAAET,YAAY,CAACW,MAAM,EAAEF,SAAS,CAACE,MAAM,CAAE;IAC/C,OAAO,EAAEX,YAAY,CAACY,OAAO,EAAEH,SAAS,CAACG,OAAO;EAAE,GAClD,eACF;IACE,SAAS,EAAEX,gBAAgB,wCAEzBG,iBAAiB,wCAA4CS,KAAK,CAAC;EACnE,GAEDL,QAAQ,CACJ,eACP,oBAAC,YAAY;IAAC,IAAI,EAAC;EAAQ,EAAG,CACxB;AAEZ,CAAC"}

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

@@ -4,8 +4,8 @@ export declare type SelectType = "default" | "plain" | "accent";
 /**
  * @see https://vkcom.github.io/VKUI/#/SelectTypography
  */
-export declare const SelectTypography: ({ selectType, children, ...restProps }: React.PropsWithChildren<Pick<SelectProps, "selectType">>) => JSX.Element;
+export declare const SelectTypography: ({ selectType, children, className, ...restProps }: React.PropsWithChildren<Pick<SelectProps, "selectType" | "className">>) => JSX.Element;
 /**
  * @see https://vkcom.github.io/VKUI/#/Select
  */
-export declare const Select: React.FC<SelectProps>;
+export declare const Select: ({ children, options, popupDirection, renderOption, className, ...props }: SelectProps) => JSX.Element;

package/dist/components/Select/Select.js

@@ -1,65 +1,64 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["selectType", "children"],
-    _excluded2 = ["children", "options", "popupDirection", "renderOption"];
-import { createScopedElement } from "../../lib/jsxRuntime";
+var _excluded = ["selectType", "children", "className"],
+  _excluded2 = ["children", "options", "popupDirection", "renderOption", "className"];
 import * as React from "react";
 import { NativeSelect } from "../NativeSelect/NativeSelect";
 import { CustomSelect } from "../CustomSelect/CustomSelect";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { useAdaptivityHasPointer } from "../../hooks/useAdaptivityHasPointer";
 import { usePlatform } from "../../hooks/usePlatform";
-import { classNames } from "../../lib/classNames";
-import { getClassName } from "../../helpers/getClassName";
+import { classNamesString } from "../../lib/classNames";
+import { getPlatformClassName } from "../../helpers/getPlatformClassName";
 import { getSizeYClassName } from "../../helpers/getSizeYClassName";
-import { getMouseClassName } from "../../helpers/getMouseClassName";
-
 /**
  * @see https://vkcom.github.io/VKUI/#/SelectTypography
  */
 export var SelectTypography = function SelectTypography(_ref) {
   var _ref$selectType = _ref.selectType,
-      selectType = _ref$selectType === void 0 ? "default" : _ref$selectType,
-      children = _ref.children,
-      restProps = _objectWithoutProperties(_ref, _excluded);
-
+    selectType = _ref$selectType === void 0 ? "default" : _ref$selectType,
+    children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded);
   var platform = usePlatform();
-
   var _useAdaptivity = useAdaptivity(),
-      sizeY = _useAdaptivity.sizeY;
-
-  return createScopedElement("span", _extends({
-    vkuiClass: classNames(getClassName("SelectTypography", platform), getSizeYClassName("SelectTypography", sizeY), "SelectTypography--selectType-".concat(selectType))
+    sizeY = _useAdaptivity.sizeY;
+  return /*#__PURE__*/React.createElement("span", _extends({
+    className: classNamesString("vkuiSelectTypography", getPlatformClassName("vkuiSelectTypography", platform), getSizeYClassName("vkuiSelectTypography", sizeY), styles["SelectTypography--selectType-".concat(selectType)], className)
   }, restProps), children);
 };
+
 /**
  * @see https://vkcom.github.io/VKUI/#/Select
  */
-
 export var Select = function Select(_ref2) {
   var children = _ref2.children,
-      _ref2$options = _ref2.options,
-      options = _ref2$options === void 0 ? [] : _ref2$options,
-      popupDirection = _ref2.popupDirection,
-      renderOption = _ref2.renderOption,
-      props = _objectWithoutProperties(_ref2, _excluded2);
-
-  var _useAdaptivity2 = useAdaptivity(),
-      hasMouse = _useAdaptivity2.hasMouse;
-
-  return createScopedElement(React.Fragment, null, (hasMouse === undefined || hasMouse === true) && createScopedElement(CustomSelect, _extends({
-    vkuiClass: classNames("Select__custom", getMouseClassName("Select__custom", hasMouse)),
+    _ref2$options = _ref2.options,
+    options = _ref2$options === void 0 ? [] : _ref2$options,
+    popupDirection = _ref2.popupDirection,
+    renderOption = _ref2.renderOption,
+    className = _ref2.className,
+    props = _objectWithoutProperties(_ref2, _excluded2);
+  var hasPointer = useAdaptivityHasPointer();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, (hasPointer === undefined || hasPointer) && /*#__PURE__*/React.createElement(CustomSelect, _extends({
+    className: classNamesString("vkuiSelect__custom", className),
     options: options,
     popupDirection: popupDirection,
     renderOption: renderOption
-  }, props)), (hasMouse === undefined || hasMouse === false) && createScopedElement(NativeSelect, _extends({
-    vkuiClass: classNames("Select__native", getMouseClassName("Select__native", hasMouse))
+  }, props)), (hasPointer === undefined || !hasPointer) && /*#__PURE__*/React.createElement(NativeSelect, _extends({
+    className: classNamesString("vkuiSelect__native", className)
   }, props), options.map(function (_ref3) {
     var label = _ref3.label,
-        value = _ref3.value;
-    return createScopedElement("option", {
+      value = _ref3.value;
+    return /*#__PURE__*/React.createElement("option", {
       value: value,
       key: "".concat(value)
     }, label);
   })));
 };
+var styles = {
+  "SelectTypography--selectType-accent": "vkuiSelectTypography--selectType-accent",
+  "SelectTypography--selectType-default": "vkuiSelectTypography--selectType-default",
+  "SelectTypography--selectType-plain": "vkuiSelectTypography--selectType-plain"
+};
 //# sourceMappingURL=Select.js.map

package/dist/components/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":["React","NativeSelect","CustomSelect","useAdaptivity","usePlatform","classNames","getClassName","getSizeYClassName","getMouseClassName","SelectTypography","selectType","children","restProps","platform","sizeY","Select","options","popupDirection","renderOption","props","hasMouse","undefined","map","label","value"],"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { NativeSelect } from \"../NativeSelect/NativeSelect\";\nimport { CustomSelect, SelectProps } from \"../CustomSelect/CustomSelect\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { classNames } from \"../../lib/classNames\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport { getMouseClassName } from \"../../helpers/getMouseClassName\";\n\nexport type SelectType = \"default\" | \"plain\" | \"accent\";\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SelectTypography\n */\nexport const SelectTypography = ({\n  selectType = \"default\",\n  children,\n  ...restProps\n}: React.PropsWithChildren<Pick<SelectProps, \"selectType\">>) => {\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n\n  return (\n    <span\n      vkuiClass={classNames(\n        getClassName(\"SelectTypography\", platform),\n        getSizeYClassName(\"SelectTypography\", sizeY),\n        `SelectTypography--selectType-${selectType}`\n      )}\n      {...restProps}\n    >\n      {children}\n    </span>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Select\n */\nexport const Select: React.FC<SelectProps> = ({\n  children,\n  options = [],\n  popupDirection,\n  renderOption,\n  ...props\n}) => {\n  const { hasMouse } = useAdaptivity();\n\n  return (\n    <React.Fragment>\n      {(hasMouse === undefined || hasMouse === true) && (\n        <CustomSelect\n          vkuiClass={classNames(\n            \"Select__custom\",\n            getMouseClassName(\"Select__custom\", hasMouse)\n          )}\n          options={options}\n          popupDirection={popupDirection}\n          renderOption={renderOption}\n          {...props}\n        />\n      )}\n      {(hasMouse === undefined || hasMouse === false) && (\n        <NativeSelect\n          vkuiClass={classNames(\n            \"Select__native\",\n            getMouseClassName(\"Select__native\", hasMouse)\n          )}\n          {...props}\n        >\n          {options.map(({ label, value }) => (\n            <option value={value} key={`${value}`}>\n              {label}\n            </option>\n          ))}\n        </NativeSelect>\n      )}\n    </React.Fragment>\n  );\n};\n"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,YAAT;AACA,SAASC,YAAT;AACA,SAASC,aAAT;AACA,SAASC,WAAT;AACA,SAASC,UAAT;AACA,SAASC,YAAT;AACA,SAASC,iBAAT;AACA,SAASC,iBAAT;;AAIA;AACA;AACA;AACA,OAAO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,OAIgC;EAAA,2BAH9DC,UAG8D;EAAA,IAH9DA,UAG8D,gCAHjD,SAGiD;EAAA,IAF9DC,QAE8D,QAF9DA,QAE8D;EAAA,IAD3DC,SAC2D;;EAC9D,IAAMC,QAAQ,GAAGT,WAAW,EAA5B;;EACA,qBAAkBD,aAAa,EAA/B;EAAA,IAAQW,KAAR,kBAAQA,KAAR;;EAEA,OACE;IACE,SAAS,EAAET,UAAU,CACnBC,YAAY,CAAC,kBAAD,EAAqBO,QAArB,CADO,EAEnBN,iBAAiB,CAAC,kBAAD,EAAqBO,KAArB,CAFE,yCAGaJ,UAHb;EADvB,GAMME,SANN,GAQGD,QARH,CADF;AAYD,CApBM;AAsBP;AACA;AACA;;AACA,OAAO,IAAMI,MAA6B,GAAG,SAAhCA,MAAgC,QAMvC;EAAA,IALJJ,QAKI,SALJA,QAKI;EAAA,0BAJJK,OAII;EAAA,IAJJA,OAII,8BAJM,EAIN;EAAA,IAHJC,cAGI,SAHJA,cAGI;EAAA,IAFJC,YAEI,SAFJA,YAEI;EAAA,IADDC,KACC;;EACJ,sBAAqBhB,aAAa,EAAlC;EAAA,IAAQiB,QAAR,mBAAQA,QAAR;;EAEA,OACE,oBAAC,KAAD,CAAO,QAAP,QACG,CAACA,QAAQ,KAAKC,SAAb,IAA0BD,QAAQ,KAAK,IAAxC,KACC,oBAAC,YAAD;IACE,SAAS,EAAEf,UAAU,CACnB,gBADmB,EAEnBG,iBAAiB,CAAC,gBAAD,EAAmBY,QAAnB,CAFE,CADvB;IAKE,OAAO,EAAEJ,OALX;IAME,cAAc,EAAEC,cANlB;IAOE,YAAY,EAAEC;EAPhB,GAQMC,KARN,EAFJ,EAaG,CAACC,QAAQ,KAAKC,SAAb,IAA0BD,QAAQ,KAAK,KAAxC,KACC,oBAAC,YAAD;IACE,SAAS,EAAEf,UAAU,CACnB,gBADmB,EAEnBG,iBAAiB,CAAC,gBAAD,EAAmBY,QAAnB,CAFE;EADvB,GAKMD,KALN,GAOGH,OAAO,CAACM,GAAR,CAAY;IAAA,IAAGC,KAAH,SAAGA,KAAH;IAAA,IAAUC,KAAV,SAAUA,KAAV;IAAA,OACX;MAAQ,KAAK,EAAEA,KAAf;MAAsB,GAAG,YAAKA,KAAL;IAAzB,GACGD,KADH,CADW;EAAA,CAAZ,CAPH,CAdJ,CADF;AA+BD,CAxCM"}
+{"version":3,"file":"Select.js","names":["React","NativeSelect","CustomSelect","useAdaptivity","useAdaptivityHasPointer","usePlatform","classNamesString","getPlatformClassName","getSizeYClassName","SelectTypography","selectType","children","className","restProps","platform","sizeY","styles","Select","options","popupDirection","renderOption","props","hasPointer","undefined","map","label","value"],"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { NativeSelect } from \"../NativeSelect/NativeSelect\";\nimport { CustomSelect, SelectProps } from \"../CustomSelect/CustomSelect\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { useAdaptivityHasPointer } from \"../../hooks/useAdaptivityHasPointer\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { getPlatformClassName } from \"../../helpers/getPlatformClassName\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport styles from \"./Select.module.css\";\n\nexport type SelectType = \"default\" | \"plain\" | \"accent\";\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SelectTypography\n */\nexport const SelectTypography = ({\n  selectType = \"default\",\n  children,\n  className,\n  ...restProps\n}: React.PropsWithChildren<Pick<SelectProps, \"selectType\" | \"className\">>) => {\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n\n  return (\n    <span\n      className={classNamesString(\n        styles[\"SelectTypography\"],\n        getPlatformClassName(styles[\"SelectTypography\"], platform),\n        getSizeYClassName(styles[\"SelectTypography\"], sizeY),\n        styles[`SelectTypography--selectType-${selectType}`],\n        className\n      )}\n      {...restProps}\n    >\n      {children}\n    </span>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Select\n */\nexport const Select = ({\n  children,\n  options = [],\n  popupDirection,\n  renderOption,\n  className,\n  ...props\n}: SelectProps) => {\n  const hasPointer = useAdaptivityHasPointer();\n\n  return (\n    <React.Fragment>\n      {(hasPointer === undefined || hasPointer) && (\n        <CustomSelect\n          className={classNamesString(styles[\"Select__custom\"], className)}\n          options={options}\n          popupDirection={popupDirection}\n          renderOption={renderOption}\n          {...props}\n        />\n      )}\n      {(hasPointer === undefined || !hasPointer) && (\n        <NativeSelect\n          className={classNamesString(styles[\"Select__native\"], className)}\n          {...props}\n        >\n          {options.map(({ label, value }) => (\n            <option value={value} key={`${value}`}>\n              {label}\n            </option>\n          ))}\n        </NativeSelect>\n      )}\n    </React.Fragment>\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,YAAY,QAAQ,8BAA8B;AAC3D,SAASC,YAAY,QAAqB,8BAA8B;AACxE,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,uBAAuB,QAAQ,qCAAqC;AAC7E,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,oBAAoB,QAAQ,oCAAoC;AACzE,SAASC,iBAAiB,QAAQ,iCAAiC;AAKnE;AACA;AACA;AACA,OAAO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB,OAKiD;EAAA,2BAJ5EC,UAAU;IAAVA,UAAU,gCAAG,SAAS;IACtBC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGT,WAAW,EAAE;EAC9B,qBAAkBF,aAAa,EAAE;IAAzBY,KAAK,kBAALA,KAAK;EAEb,oBACE;IACE,SAAS,EAAET,gBAAgB,yBAEzBC,oBAAoB,yBAA6BO,QAAQ,CAAC,EAC1DN,iBAAiB,yBAA6BO,KAAK,CAAC,EACpDC,MAAM,wCAAiCN,UAAU,EAAG,EACpDE,SAAS;EACT,GACEC,SAAS,GAEZF,QAAQ,CACJ;AAEX,CAAC;;AAED;AACA;AACA;AACA,OAAO,IAAMM,MAAM,GAAG,SAATA,MAAM,QAOA;EAAA,IANjBN,QAAQ,SAARA,QAAQ;IAAA,sBACRO,OAAO;IAAPA,OAAO,8BAAG,EAAE;IACZC,cAAc,SAAdA,cAAc;IACdC,YAAY,SAAZA,YAAY;IACZR,SAAS,SAATA,SAAS;IACNS,KAAK;EAER,IAAMC,UAAU,GAAGlB,uBAAuB,EAAE;EAE5C,oBACE,oBAAC,KAAK,CAAC,QAAQ,QACZ,CAACkB,UAAU,KAAKC,SAAS,IAAID,UAAU,kBACtC,oBAAC,YAAY;IACX,SAAS,EAAEhB,gBAAgB,uBAA2BM,SAAS,CAAE;IACjE,OAAO,EAAEM,OAAQ;IACjB,cAAc,EAAEC,cAAe;IAC/B,YAAY,EAAEC;EAAa,GACvBC,KAAK,EAEZ,EACA,CAACC,UAAU,KAAKC,SAAS,IAAI,CAACD,UAAU,kBACvC,oBAAC,YAAY;IACX,SAAS,EAAEhB,gBAAgB,uBAA2BM,SAAS;EAAE,GAC7DS,KAAK,GAERH,OAAO,CAACM,GAAG,CAAC;IAAA,IAAGC,KAAK,SAALA,KAAK;MAAEC,KAAK,SAALA,KAAK;IAAA,oBAC1B;MAAQ,KAAK,EAAEA,KAAM;MAAC,GAAG,YAAKA,KAAK;IAAG,GACnCD,KAAK,CACC;EAAA,CACV,CAAC,CAEL,CACc;AAErB,CAAC;AAAC;EAAA;EAAA;EAAA;AAAA"}

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

@@ -2,7 +2,6 @@ import * as React from "react";
 import { FormFieldProps } from "../FormField/FormField";
 import { HasAlign, HasRootRef } from "../../types";
 import { SelectType } from "../Select/Select";
-import "../Select/Select.css";
 export interface SelectMimicryProps extends React.HTMLAttributes<HTMLElement>, HasAlign, HasRootRef<HTMLElement>, Pick<FormFieldProps, "before" | "after" | "status"> {
     multiline?: boolean;
     disabled?: boolean;
@@ -11,4 +10,4 @@ export interface SelectMimicryProps extends React.HTMLAttributes<HTMLElement>, H
 /**
  * @see https://vkcom.github.io/VKUI/#/SelectMimicry
  */
-export declare const SelectMimicry: ({ tabIndex, placeholder, children, align, getRootRef, multiline, disabled, onClick, before, after, selectType, status, ...restProps }: SelectMimicryProps) => JSX.Element;
+export declare const SelectMimicry: ({ tabIndex, placeholder, children, align, getRootRef, multiline, disabled, onClick, before, after, selectType, status, className, ...restProps }: SelectMimicryProps) => JSX.Element;

package/dist/components/SelectMimicry/SelectMimicry.js

@@ -1,49 +1,46 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["tabIndex", "placeholder", "children", "align", "getRootRef", "multiline", "disabled", "onClick", "before", "after", "selectType", "status"];
-import { createScopedElement } from "../../lib/jsxRuntime";
-import { classNames } from "../../lib/classNames";
+var _excluded = ["tabIndex", "placeholder", "children", "align", "getRootRef", "multiline", "disabled", "onClick", "before", "after", "selectType", "status", "className"];
+import * as React from "react";
+import { classNamesString } from "../../lib/classNames";
 import { DropdownIcon } from "../DropdownIcon/DropdownIcon";
 import { FormField } from "../FormField/FormField";
 import { usePlatform } from "../../hooks/usePlatform";
-import { getClassName } from "../../helpers/getClassName";
+import { getPlatformClassName } from "../../helpers/getPlatformClassName";
 import { getFormFieldModeFromSelectType } from "../../lib/select";
 import { SelectTypography } from "../Select/Select";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { getSizeXClassName } from "../../helpers/getSizeXClassName";
 import { getSizeYClassName } from "../../helpers/getSizeYClassName";
-
 /**
  * @see https://vkcom.github.io/VKUI/#/SelectMimicry
  */
 export var SelectMimicry = function SelectMimicry(_ref) {
   var _ref$tabIndex = _ref.tabIndex,
-      tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
-      placeholder = _ref.placeholder,
-      children = _ref.children,
-      align = _ref.align,
-      getRootRef = _ref.getRootRef,
-      multiline = _ref.multiline,
-      disabled = _ref.disabled,
-      onClick = _ref.onClick,
-      before = _ref.before,
-      _ref$after = _ref.after,
-      after = _ref$after === void 0 ? createScopedElement(DropdownIcon, null) : _ref$after,
-      _ref$selectType = _ref.selectType,
-      selectType = _ref$selectType === void 0 ? "default" : _ref$selectType,
-      status = _ref.status,
-      restProps = _objectWithoutProperties(_ref, _excluded);
-
+    tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
+    placeholder = _ref.placeholder,
+    children = _ref.children,
+    align = _ref.align,
+    getRootRef = _ref.getRootRef,
+    multiline = _ref.multiline,
+    disabled = _ref.disabled,
+    onClick = _ref.onClick,
+    before = _ref.before,
+    _ref$after = _ref.after,
+    after = _ref$after === void 0 ? /*#__PURE__*/React.createElement(DropdownIcon, null) : _ref$after,
+    _ref$selectType = _ref.selectType,
+    selectType = _ref$selectType === void 0 ? "default" : _ref$selectType,
+    status = _ref.status,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded);
   var platform = usePlatform();
-
   var _useAdaptivity = useAdaptivity(),
-      sizeX = _useAdaptivity.sizeX,
-      sizeY = _useAdaptivity.sizeY;
-
+    sizeX = _useAdaptivity.sizeX,
+    sizeY = _useAdaptivity.sizeY;
   var title = children || placeholder;
-  return createScopedElement(FormField, _extends({}, restProps, {
+  return /*#__PURE__*/React.createElement(FormField, _extends({}, restProps, {
     tabIndex: disabled ? undefined : tabIndex,
-    vkuiClass: classNames(getClassName("Select", platform), getSizeXClassName("Select", sizeX), getSizeYClassName("Select", sizeY), multiline && "Select--multiline", align && "Select--align-".concat(align), before && "Select--hasBefore", after && "Select--hasAfter"),
+    className: classNamesString("vkuiSelect", getPlatformClassName("vkuiSelect", platform), getSizeXClassName("vkuiSelect", sizeX), getSizeYClassName("vkuiSelect", sizeY), multiline && "vkuiSelect--multiline", align && styles["Select--align-".concat(align)], before && "vkuiSelect--hasBefore", after && "vkuiSelect--hasAfter", className),
     getRootRef: getRootRef,
     onClick: disabled ? undefined : onClick,
     disabled: disabled,
@@ -51,11 +48,16 @@ export var SelectMimicry = function SelectMimicry(_ref) {
     after: after,
     mode: getFormFieldModeFromSelectType(selectType),
     status: status
-  }), createScopedElement("div", {
-    vkuiClass: "Select__container"
-  }, createScopedElement(SelectTypography, {
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "vkuiSelect__container"
+  }, /*#__PURE__*/React.createElement(SelectTypography, {
     selectType: selectType,
-    vkuiClass: "Select__title"
+    className: "vkuiSelect__title"
   }, title)));
 };
+var styles = {
+  "Select--align-right": "vkuiSelect--align-right",
+  "Select--align-center": "vkuiSelect--align-center",
+  "Select--align-left": "vkuiSelect--align-left"
+};
 //# sourceMappingURL=SelectMimicry.js.map

package/dist/components/SelectMimicry/SelectMimicry.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectMimicry.js","names":["classNames","DropdownIcon","FormField","usePlatform","getClassName","getFormFieldModeFromSelectType","SelectTypography","useAdaptivity","getSizeXClassName","getSizeYClassName","SelectMimicry","tabIndex","placeholder","children","align","getRootRef","multiline","disabled","onClick","before","after","selectType","status","restProps","platform","sizeX","sizeY","title","undefined"],"sources":["../../../src/components/SelectMimicry/SelectMimicry.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { DropdownIcon } from \"../DropdownIcon/DropdownIcon\";\nimport { FormField, FormFieldProps } from \"../FormField/FormField\";\nimport { HasAlign, HasRootRef } from \"../../types\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { getFormFieldModeFromSelectType } from \"../../lib/select\";\nimport { SelectType, SelectTypography } from \"../Select/Select\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { getSizeXClassName } from \"../../helpers/getSizeXClassName\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport \"../Select/Select.css\";\n\nexport interface SelectMimicryProps\n  extends React.HTMLAttributes<HTMLElement>,\n    HasAlign,\n    HasRootRef<HTMLElement>,\n    Pick<FormFieldProps, \"before\" | \"after\" | \"status\"> {\n  multiline?: boolean;\n  disabled?: boolean;\n  selectType?: SelectType;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SelectMimicry\n */\nexport const SelectMimicry = ({\n  tabIndex = 0,\n  placeholder,\n  children,\n  align,\n  getRootRef,\n  multiline,\n  disabled,\n  onClick,\n  before,\n  after = <DropdownIcon />,\n  selectType = \"default\",\n  status,\n  ...restProps\n}: SelectMimicryProps) => {\n  const platform = usePlatform();\n  const { sizeX, sizeY } = useAdaptivity();\n  const title = children || placeholder;\n\n  return (\n    <FormField\n      {...restProps}\n      tabIndex={disabled ? undefined : tabIndex}\n      vkuiClass={classNames(\n        getClassName(\"Select\", platform),\n        getSizeXClassName(\"Select\", sizeX),\n        getSizeYClassName(\"Select\", sizeY),\n        multiline && \"Select--multiline\",\n        align && `Select--align-${align}`,\n        before && \"Select--hasBefore\",\n        after && \"Select--hasAfter\"\n      )}\n      getRootRef={getRootRef}\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled}\n      before={before}\n      after={after}\n      mode={getFormFieldModeFromSelectType(selectType)}\n      status={status}\n    >\n      <div vkuiClass=\"Select__container\">\n        <SelectTypography selectType={selectType} vkuiClass=\"Select__title\">\n          {title}\n        </SelectTypography>\n      </div>\n    </FormField>\n  );\n};\n"],"mappings":";;;;AACA,SAASA,UAAT;AACA,SAASC,YAAT;AACA,SAASC,SAAT;AAEA,SAASC,WAAT;AACA,SAASC,YAAT;AACA,SAASC,8BAAT;AACA,SAAqBC,gBAArB;AACA,SAASC,aAAT;AACA,SAASC,iBAAT;AACA,SAASC,iBAAT;;AAaA;AACA;AACA;AACA,OAAO,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,OAcH;EAAA,yBAbxBC,QAawB;EAAA,IAbxBA,QAawB,8BAbb,CAaa;EAAA,IAZxBC,WAYwB,QAZxBA,WAYwB;EAAA,IAXxBC,QAWwB,QAXxBA,QAWwB;EAAA,IAVxBC,KAUwB,QAVxBA,KAUwB;EAAA,IATxBC,UASwB,QATxBA,UASwB;EAAA,IARxBC,SAQwB,QARxBA,SAQwB;EAAA,IAPxBC,QAOwB,QAPxBA,QAOwB;EAAA,IANxBC,OAMwB,QANxBA,OAMwB;EAAA,IALxBC,MAKwB,QALxBA,MAKwB;EAAA,sBAJxBC,KAIwB;EAAA,IAJxBA,KAIwB,2BAJhB,oBAAC,YAAD,OAIgB;EAAA,2BAHxBC,UAGwB;EAAA,IAHxBA,UAGwB,gCAHX,SAGW;EAAA,IAFxBC,MAEwB,QAFxBA,MAEwB;EAAA,IADrBC,SACqB;;EACxB,IAAMC,QAAQ,GAAGrB,WAAW,EAA5B;;EACA,qBAAyBI,aAAa,EAAtC;EAAA,IAAQkB,KAAR,kBAAQA,KAAR;EAAA,IAAeC,KAAf,kBAAeA,KAAf;;EACA,IAAMC,KAAK,GAAGd,QAAQ,IAAID,WAA1B;EAEA,OACE,oBAAC,SAAD,eACMW,SADN;IAEE,QAAQ,EAAEN,QAAQ,GAAGW,SAAH,GAAejB,QAFnC;IAGE,SAAS,EAAEX,UAAU,CACnBI,YAAY,CAAC,QAAD,EAAWoB,QAAX,CADO,EAEnBhB,iBAAiB,CAAC,QAAD,EAAWiB,KAAX,CAFE,EAGnBhB,iBAAiB,CAAC,QAAD,EAAWiB,KAAX,CAHE,EAInBV,SAAS,IAAI,mBAJM,EAKnBF,KAAK,4BAAqBA,KAArB,CALc,EAMnBK,MAAM,IAAI,mBANS,EAOnBC,KAAK,IAAI,kBAPU,CAHvB;IAYE,UAAU,EAAEL,UAZd;IAaE,OAAO,EAAEE,QAAQ,GAAGW,SAAH,GAAeV,OAblC;IAcE,QAAQ,EAAED,QAdZ;IAeE,MAAM,EAAEE,MAfV;IAgBE,KAAK,EAAEC,KAhBT;IAiBE,IAAI,EAAEf,8BAA8B,CAACgB,UAAD,CAjBtC;IAkBE,MAAM,EAAEC;EAlBV,IAoBE;IAAK,SAAS,EAAC;EAAf,GACE,oBAAC,gBAAD;IAAkB,UAAU,EAAED,UAA9B;IAA0C,SAAS,EAAC;EAApD,GACGM,KADH,CADF,CApBF,CADF;AA4BD,CA/CM"}
+{"version":3,"file":"SelectMimicry.js","names":["React","classNamesString","DropdownIcon","FormField","usePlatform","getPlatformClassName","getFormFieldModeFromSelectType","SelectTypography","useAdaptivity","getSizeXClassName","getSizeYClassName","SelectMimicry","tabIndex","placeholder","children","align","getRootRef","multiline","disabled","onClick","before","after","selectType","status","className","restProps","platform","sizeX","sizeY","title","undefined","styles"],"sources":["../../../src/components/SelectMimicry/SelectMimicry.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { DropdownIcon } from \"../DropdownIcon/DropdownIcon\";\nimport { FormField, FormFieldProps } from \"../FormField/FormField\";\nimport { HasAlign, HasRootRef } from \"../../types\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { getPlatformClassName } from \"../../helpers/getPlatformClassName\";\nimport { getFormFieldModeFromSelectType } from \"../../lib/select\";\nimport { SelectType, SelectTypography } from \"../Select/Select\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { getSizeXClassName } from \"../../helpers/getSizeXClassName\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport styles from \"../Select/Select.module.css\";\n\nexport interface SelectMimicryProps\n  extends React.HTMLAttributes<HTMLElement>,\n    HasAlign,\n    HasRootRef<HTMLElement>,\n    Pick<FormFieldProps, \"before\" | \"after\" | \"status\"> {\n  multiline?: boolean;\n  disabled?: boolean;\n  selectType?: SelectType;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SelectMimicry\n */\nexport const SelectMimicry = ({\n  tabIndex = 0,\n  placeholder,\n  children,\n  align,\n  getRootRef,\n  multiline,\n  disabled,\n  onClick,\n  before,\n  after = <DropdownIcon />,\n  selectType = \"default\",\n  status,\n  className,\n  ...restProps\n}: SelectMimicryProps) => {\n  const platform = usePlatform();\n  const { sizeX, sizeY } = useAdaptivity();\n  const title = children || placeholder;\n\n  return (\n    <FormField\n      {...restProps}\n      tabIndex={disabled ? undefined : tabIndex}\n      className={classNamesString(\n        styles[\"Select\"],\n        getPlatformClassName(styles[\"Select\"], platform),\n        getSizeXClassName(styles[\"Select\"], sizeX),\n        getSizeYClassName(styles[\"Select\"], sizeY),\n        multiline && styles[\"Select--multiline\"],\n        align && styles[`Select--align-${align}`],\n        before && styles[\"Select--hasBefore\"],\n        after && styles[\"Select--hasAfter\"],\n        className\n      )}\n      getRootRef={getRootRef}\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled}\n      before={before}\n      after={after}\n      mode={getFormFieldModeFromSelectType(selectType)}\n      status={status}\n    >\n      <div className={styles[\"Select__container\"]}>\n        <SelectTypography\n          selectType={selectType}\n          className={styles[\"Select__title\"]}\n        >\n          {title}\n        </SelectTypography>\n      </div>\n    </FormField>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,YAAY,QAAQ,8BAA8B;AAC3D,SAASC,SAAS,QAAwB,wBAAwB;AAElE,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,oBAAoB,QAAQ,oCAAoC;AACzE,SAASC,8BAA8B,QAAQ,kBAAkB;AACjE,SAAqBC,gBAAgB,QAAQ,kBAAkB;AAC/D,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,iBAAiB,QAAQ,iCAAiC;AACnE,SAASC,iBAAiB,QAAQ,iCAAiC;AAanE;AACA;AACA;AACA,OAAO,IAAMC,aAAa,GAAG,SAAhBA,aAAa,OAeA;EAAA,yBAdxBC,QAAQ;IAARA,QAAQ,8BAAG,CAAC;IACZC,WAAW,QAAXA,WAAW;IACXC,QAAQ,QAARA,QAAQ;IACRC,KAAK,QAALA,KAAK;IACLC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPC,MAAM,QAANA,MAAM;IAAA,kBACNC,KAAK;IAALA,KAAK,wCAAG,oBAAC,YAAY,OAAG;IAAA,uBACxBC,UAAU;IAAVA,UAAU,gCAAG,SAAS;IACtBC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGtB,WAAW,EAAE;EAC9B,qBAAyBI,aAAa,EAAE;IAAhCmB,KAAK,kBAALA,KAAK;IAAEC,KAAK,kBAALA,KAAK;EACpB,IAAMC,KAAK,GAAGf,QAAQ,IAAID,WAAW;EAErC,oBACE,oBAAC,SAAS,eACJY,SAAS;IACb,QAAQ,EAAEP,QAAQ,GAAGY,SAAS,GAAGlB,QAAS;IAC1C,SAAS,EAAEX,gBAAgB,eAEzBI,oBAAoB,eAAmBqB,QAAQ,CAAC,EAChDjB,iBAAiB,eAAmBkB,KAAK,CAAC,EAC1CjB,iBAAiB,eAAmBkB,KAAK,CAAC,EAC1CX,SAAS,2BAA+B,EACxCF,KAAK,IAAIgB,MAAM,yBAAkBhB,KAAK,EAAG,EACzCK,MAAM,2BAA+B,EACrCC,KAAK,0BAA8B,EACnCG,SAAS,CACT;IACF,UAAU,EAAER,UAAW;IACvB,OAAO,EAAEE,QAAQ,GAAGY,SAAS,GAAGX,OAAQ;IACxC,QAAQ,EAAED,QAAS;IACnB,MAAM,EAAEE,MAAO;IACf,KAAK,EAAEC,KAAM;IACb,IAAI,EAAEf,8BAA8B,CAACgB,UAAU,CAAE;IACjD,MAAM,EAAEC;EAAO,iBAEf;IAAK,SAAS;EAA8B,gBAC1C,oBAAC,gBAAgB;IACf,UAAU,EAAED,UAAW;IACvB,SAAS;EAA0B,GAElCO,KAAK,CACW,CACf,CACI;AAEhB,CAAC;AAAC;EAAA;EAAA;EAAA;AAAA"}

package/dist/components/Separator/Separator.d.ts

@@ -1,5 +1,4 @@
 import * as React from "react";
-import "./Separator.css";
 export interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * С этим свойством компонент не будет иметь отступы слева и справа
@@ -9,4 +8,4 @@ export interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/Separator
  */
-export declare const Separator: ({ wide, ...restProps }: SeparatorProps) => JSX.Element;
+export declare const Separator: ({ wide, className, ...restProps }: SeparatorProps) => JSX.Element;

package/dist/components/Separator/Separator.js

@@ -1,22 +1,21 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["wide"];
-import { createScopedElement } from "../../lib/jsxRuntime";
-import { classNames } from "../../lib/classNames";
-
+var _excluded = ["wide", "className"];
+import * as React from "react";
+import { classNamesString } from "../../lib/classNames";
 /**
  * @see https://vkcom.github.io/VKUI/#/Separator
  */
 export var Separator = function Separator(_ref) {
   var wide = _ref.wide,
-      restProps = _objectWithoutProperties(_ref, _excluded);
-
-  return createScopedElement("div", _extends({}, restProps, {
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
     "aria-hidden": "true",
-    vkuiClass: classNames("Separator", !wide && "Separator--padded"),
+    className: classNamesString("vkuiSeparator", !wide && "vkuiSeparator--padded", className),
     role: "separator"
-  }), createScopedElement("div", {
-    vkuiClass: "Separator__in"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "vkuiSeparator__in"
   }));
 };
 //# sourceMappingURL=Separator.js.map

package/dist/components/Separator/Separator.js.map

@@ -1 +1 @@
-{"version":3,"file":"Separator.js","names":["classNames","Separator","wide","restProps"],"sources":["../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport \"./Separator.css\";\n\nexport interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * С этим свойством компонент не будет иметь отступы слева и справа\n   */\n  wide?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Separator\n */\nexport const Separator = ({ wide, ...restProps }: SeparatorProps) => (\n  <div\n    {...restProps}\n    aria-hidden=\"true\"\n    vkuiClass={classNames(\"Separator\", !wide && \"Separator--padded\")}\n    role=\"separator\"\n  >\n    <div vkuiClass=\"Separator__in\" />\n  </div>\n);\n"],"mappings":";;;;AACA,SAASA,UAAT;;AAUA;AACA;AACA;AACA,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAAY;EAAA,IAAGC,IAAH,QAAGA,IAAH;EAAA,IAAYC,SAAZ;;EAAA,OACvB,wCACMA,SADN;IAEE,eAAY,MAFd;IAGE,SAAS,EAAEH,UAAU,CAAC,WAAD,EAAc,CAACE,IAAD,IAAS,mBAAvB,CAHvB;IAIE,IAAI,EAAC;EAJP,IAME;IAAK,SAAS,EAAC;EAAf,EANF,CADuB;AAAA,CAAlB"}
+{"version":3,"file":"Separator.js","names":["React","classNamesString","Separator","wide","className","restProps"],"sources":["../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport styles from \"./Separator.module.css\";\n\nexport interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * С этим свойством компонент не будет иметь отступы слева и справа\n   */\n  wide?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Separator\n */\nexport const Separator = ({\n  wide,\n  className,\n  ...restProps\n}: SeparatorProps) => (\n  <div\n    {...restProps}\n    aria-hidden=\"true\"\n    className={classNamesString(\n      styles[\"Separator\"],\n      !wide && styles[\"Separator--padded\"],\n      className\n    )}\n    role=\"separator\"\n  >\n    <div className={styles[\"Separator__in\"]} />\n  </div>\n);\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,QAAQ,sBAAsB;AAUvD;AACA;AACA;AACA,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAAS;EAAA,IACpBC,IAAI,QAAJA,IAAI;IACJC,SAAS,QAATA,SAAS;IACNC,SAAS;EAAA,oBAEZ,wCACMA,SAAS;IACb,eAAY,MAAM;IAClB,SAAS,EAAEJ,gBAAgB,kBAEzB,CAACE,IAAI,2BAA+B,EACpCC,SAAS,CACT;IACF,IAAI,EAAC;EAAW,iBAEhB;IAAK,SAAS;EAA0B,EAAG,CACvC;AAAA,CACP"}

package/dist/components/SimpleCell/SimpleCell.d.ts

@@ -1,7 +1,6 @@
 import * as React from "react";
 import { HasComponent } from "../../types";
 import { TappableProps } from "../Tappable/Tappable";
-import "./SimpleCell.css";
 export interface SimpleCellOwnProps extends HasComponent {
     /**
      * Иконка 28 или `<Avatar size={28|32|40|48|72} />`
@@ -61,4 +60,4 @@ export interface SimpleCellProps extends SimpleCellOwnProps, TappableProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/SimpleCell
  */
-export declare const SimpleCell: ({ badgeBeforeTitle, badgeAfterTitle, badgeBeforeSubtitle, badgeAfterSubtitle, before, indicator, children, after, expandable, multiline, subhead, subtitle, extraSubtitle, ...restProps }: SimpleCellProps) => JSX.Element;
+export declare const SimpleCell: ({ badgeBeforeTitle, badgeAfterTitle, badgeBeforeSubtitle, badgeAfterSubtitle, before, indicator, children, after, expandable, multiline, subhead, subtitle, extraSubtitle, className, ...restProps }: SimpleCellProps) => JSX.Element;