@vkontakte/vkui 7.8.2 → 7.9.1

package/dist/components/File/File.js

@@ -1,14 +1,21 @@
+'use client';
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { useMergeProps } from "../../hooks/useMergeProps.js";
+import { warnOnce } from "../../lib/warnOnce.js";
 import { Button } from "../Button/Button.js";
 import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
+const warn = warnOnce('File');
 /**
  * @see https://vkui.io/components/file
  */ export const File = (_param)=>{
-    var { children = 'Выберите файл', align = 'left', size, mode, stretched, before, after, loading, className, style, getRef, getRootRef, appearance } = _param, restProps = _object_without_properties(_param, [
+    var { getRootRef, className, style, children = 'Выберите файл', align = 'left', size, mode, stretched, before, after, loading, getRef, appearance, slotProps } = _param, restProps = _object_without_properties(_param, [
+        "getRootRef",
+        "className",
+        "style",
         "children",
         "align",
         "size",
@@ -17,16 +24,24 @@ import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
         "before",
         "after",
         "loading",
-        "className",
-        "style",
         "getRef",
-        "getRootRef",
-        "appearance"
+        "appearance",
+        "slotProps"
     ]);
-    return /*#__PURE__*/ _jsxs(Button, {
+    /* istanbul ignore if: не проверяем в тестах */ if (process.env.NODE_ENV === 'development' && getRef) {
+        warn('Свойство `getRef` устаревшее, используйте `slotProps={ input: { getRootRef: ... } }`');
+    }
+    const rootProps = useMergeProps({
+        className,
+        style,
+        getRootRef: getRootRef
+    }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root);
+    const inputRest = useMergeProps(_object_spread({
+        getRootRef: getRef
+    }, restProps), slotProps === null || slotProps === void 0 ? void 0 : slotProps.input);
+    return /*#__PURE__*/ _jsxs(Button, _object_spread_props(_object_spread({
         Component: "label",
         align: align,
-        className: className,
         stretched: stretched,
         mode: mode,
         appearance: appearance,
@@ -34,20 +49,17 @@ import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
         before: before,
         after: after,
         loading: loading,
-        style: style,
-        getRootRef: getRootRef,
-        disabled: restProps.disabled,
+        disabled: inputRest.disabled
+    }, rootProps), {
         children: [
-            /*#__PURE__*/ _jsx(VisuallyHidden, _object_spread_props(_object_spread({
-                title: ""
-            }, restProps), {
+            /*#__PURE__*/ _jsx(VisuallyHidden, _object_spread({
+                title: "",
                 Component: "input",
-                type: "file",
-                getRootRef: getRef
-            })),
+                type: "file"
+            }, inputRest)),
             children
         ]
-    });
+    }));
 };
 
 //# sourceMappingURL=File.js.map

package/dist/components/File/File.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/File/File.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { HasRef, HasRootRef } from '../../types';\nimport { Button, type VKUIButtonProps } from '../Button/Button';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\n\nexport interface FileProps\n  extends Omit<VKUIButtonProps, 'type'>,\n    Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'>,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLElement> {}\n\n/**\n * @see https://vkui.io/components/file\n */\nexport const File = ({\n  children = 'Выберите файл',\n  align = 'left',\n  size,\n  mode,\n  stretched,\n  before,\n  after,\n  loading,\n  className,\n  style,\n  getRef,\n  getRootRef,\n  appearance,\n  ...restProps\n}: FileProps): React.ReactNode => {\n  return (\n    <Button\n      Component=\"label\"\n      align={align}\n      className={className}\n      stretched={stretched}\n      mode={mode}\n      appearance={appearance}\n      size={size}\n      before={before}\n      after={after}\n      loading={loading}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={restProps.disabled}\n    >\n      <VisuallyHidden title=\"\" {...restProps} Component=\"input\" type=\"file\" getRootRef={getRef} />\n      {children}\n    </Button>\n  );\n};\n"],"names":["React","Button","VisuallyHidden","File","children","align","size","mode","stretched","before","after","loading","className","style","getRef","getRootRef","appearance","restProps","Component","disabled","title","type"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,MAAM,QAA8B,sBAAmB;AAChE,SAASC,cAAc,QAAQ,sCAAmC;AAQlE;;CAEC,GACD,OAAO,MAAMC,OAAO;QAAC,EACnBC,WAAW,eAAe,EAC1BC,QAAQ,MAAM,EACdC,IAAI,EACJC,IAAI,EACJC,SAAS,EACTC,MAAM,EACNC,KAAK,EACLC,OAAO,EACPC,SAAS,EACTC,KAAK,EACLC,MAAM,EACNC,UAAU,EACVC,UAAU,EAEA,WADPC;QAbHb;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,MAACf;QACCiB,WAAU;QACVb,OAAOA;QACPO,WAAWA;QACXJ,WAAWA;QACXD,MAAMA;QACNS,YAAYA;QACZV,MAAMA;QACNG,QAAQA;QACRC,OAAOA;QACPC,SAASA;QACTE,OAAOA;QACPE,YAAYA;QACZI,UAAUF,UAAUE,QAAQ;;0BAE5B,KAACjB;gBAAekB,OAAM;eAAOH;gBAAWC,WAAU;gBAAQG,MAAK;gBAAON,YAAYD;;YACjFV;;;AAGP,EAAE"}
+{"version":3,"sources":["../../../src/components/File/File.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMergeProps } from '../../hooks/useMergeProps';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { HasDataAttribute, HasRootRef } from '../../types';\nimport { Button, type VKUIButtonProps } from '../Button/Button';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\n\nconst warn = warnOnce('File');\n\nexport interface FileProps\n  extends Omit<VKUIButtonProps, 'type'>,\n    Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'>,\n    HasRootRef<HTMLElement> {\n  /**\n   * @deprecated Since 7.9.0. Вместо этого используйте `slotProps={ input: { getRootRef: ... } }`.\n   */\n  getRef?: React.Ref<HTMLInputElement>;\n  /**\n   * Свойства, которые можно прокинуть внутрь компонента:\n   * - `root`: свойства для прокидывания в корень компонента;\n   * - `input`: свойства для прокидывания в скрытый `input`.\n   */\n  slotProps?: {\n    root?: Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'children'> &\n      HasRootRef<HTMLLabelElement> &\n      HasDataAttribute;\n    input?: Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> &\n      HasRootRef<HTMLInputElement> &\n      HasDataAttribute;\n  };\n}\n\n/**\n * @see https://vkui.io/components/file\n */\nexport const File = ({\n  getRootRef,\n  className,\n  style,\n  children = 'Выберите файл',\n  align = 'left',\n  size,\n  mode,\n  stretched,\n  before,\n  after,\n  loading,\n  getRef,\n  appearance,\n  slotProps,\n  ...restProps\n}: FileProps): React.ReactNode => {\n  /* istanbul ignore if: не проверяем в тестах */\n  if (process.env.NODE_ENV === 'development' && getRef) {\n    warn('Свойство `getRef` устаревшее, используйте `slotProps={ input: { getRootRef: ... } }`');\n  }\n\n  const rootProps = useMergeProps(\n    {\n      className,\n      style,\n      getRootRef: getRootRef as React.Ref<HTMLLabelElement>,\n    },\n    slotProps?.root,\n  );\n  const inputRest = useMergeProps({ getRootRef: getRef, ...restProps }, slotProps?.input);\n\n  return (\n    <Button\n      Component=\"label\"\n      align={align}\n      stretched={stretched}\n      mode={mode}\n      appearance={appearance}\n      size={size}\n      before={before}\n      after={after}\n      loading={loading}\n      disabled={inputRest.disabled}\n      {...rootProps}\n    >\n      <VisuallyHidden title=\"\" Component=\"input\" type=\"file\" {...inputRest} />\n      {children}\n    </Button>\n  );\n};\n"],"names":["React","useMergeProps","warnOnce","Button","VisuallyHidden","warn","File","getRootRef","className","style","children","align","size","mode","stretched","before","after","loading","getRef","appearance","slotProps","restProps","process","env","NODE_ENV","rootProps","root","inputRest","input","Component","disabled","title","type"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,QAAQ,QAAQ,wBAAqB;AAE9C,SAASC,MAAM,QAA8B,sBAAmB;AAChE,SAASC,cAAc,QAAQ,sCAAmC;AAElE,MAAMC,OAAOH,SAAS;AAyBtB;;CAEC,GACD,OAAO,MAAMI,OAAO;QAAC,EACnBC,UAAU,EACVC,SAAS,EACTC,KAAK,EACLC,WAAW,eAAe,EAC1BC,QAAQ,MAAM,EACdC,IAAI,EACJC,IAAI,EACJC,SAAS,EACTC,MAAM,EACNC,KAAK,EACLC,OAAO,EACPC,MAAM,EACNC,UAAU,EACVC,SAAS,EAEC,WADPC;QAdHd;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,6CAA6C,GAC7C,IAAIE,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBAAiBN,QAAQ;QACpDb,KAAK;IACP;IAEA,MAAMoB,YAAYxB,cAChB;QACEO;QACAC;QACAF,YAAYA;IACd,GACAa,sBAAAA,gCAAAA,UAAWM,IAAI;IAEjB,MAAMC,YAAY1B,cAAc;QAAEM,YAAYW;OAAWG,YAAaD,sBAAAA,gCAAAA,UAAWQ,KAAK;IAEtF,qBACE,MAACzB;QACC0B,WAAU;QACVlB,OAAOA;QACPG,WAAWA;QACXD,MAAMA;QACNM,YAAYA;QACZP,MAAMA;QACNG,QAAQA;QACRC,OAAOA;QACPC,SAASA;QACTa,UAAUH,UAAUG,QAAQ;OACxBL;;0BAEJ,KAACrB;gBAAe2B,OAAM;gBAAGF,WAAU;gBAAQG,MAAK;eAAWL;YAC1DjB;;;AAGP,EAAE"}

package/dist/components/Input/Input.d.ts

@@ -1,10 +1,23 @@
 import * as React from 'react';
-import type { HasAlign, HasRef, HasRootRef } from '../../types';
+import type { HasAlign, HasDataAttribute, HasRootRef } from '../../types';
 import { type FormFieldProps } from '../FormField/FormField';
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRef<HTMLInputElement>, HasRootRef<HTMLDivElement>, HasAlign, Omit<FormFieldProps, 'maxHeight'> {
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRootRef<HTMLDivElement>, HasAlign, Omit<FormFieldProps, 'maxHeight'> {
+    /**
+     * @deprecated Since 7.9.0. Вместо этого используйте `slotProps={ input: { getRootRef: ... } }`.
+     */
+    getRef?: React.Ref<HTMLInputElement>;
+    /**
+     * Свойства, которые можно прокинуть внутрь компонента:
+     * - `root`: свойства для прокидывания в корень компонента;
+     * - `input`: свойства для прокидывания в поле ввода.
+     */
+    slotProps?: {
+        root?: React.HTMLAttributes<HTMLDivElement> & HasRootRef<HTMLDivElement> & HasDataAttribute;
+        input?: React.InputHTMLAttributes<HTMLInputElement> & HasRootRef<HTMLInputElement> & HasDataAttribute;
+    };
 }
 /**
  * @see https://vkui.io/components/input
  */
-export declare const Input: ({ type, align, getRef, className, getRootRef, style, before, after, status, mode, ...restProps }: InputProps) => React.ReactNode;
+export declare const Input: ({ type, align, getRef, className: rootClassName, getRootRef, style, before, after, status, mode, slotProps, ...restProps }: InputProps) => React.ReactNode;
 //# sourceMappingURL=Input.d.ts.map

package/dist/components/Input/Input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAChE,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AASxE,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACjD,MAAM,CAAC,gBAAgB,CAAC,EACxB,UAAU,CAAC,cAAc,CAAC,EAC1B,QAAQ,EACR,IAAI,CAAC,cAAc,EAAE,WAAW,CAAC;CAAG;AAExC;;GAEG;AACH,eAAO,MAAM,KAAK,GAAI,kGAYnB,UAAU,KAAG,KAAK,CAAC,SA+BrB,CAAC"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC1E,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAWxE,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACjD,UAAU,CAAC,cAAc,CAAC,EAC1B,QAAQ,EACR,IAAI,CAAC,cAAc,EAAE,WAAW,CAAC;IACnC;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IACrC;;;;OAIG;IACH,SAAS,CAAC,EAAE;QACV,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG,UAAU,CAAC,cAAc,CAAC,GAAG,gBAAgB,CAAC;QAC5F,KAAK,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,GACjD,UAAU,CAAC,gBAAgB,CAAC,GAC5B,gBAAgB,CAAC;KACpB,CAAC;CACH;AAED;;GAEG;AACH,eAAO,MAAM,KAAK,GAAI,4HAcnB,UAAU,KAAG,KAAK,CAAC,SA+CrB,CAAC"}

package/dist/components/Input/Input.js

@@ -6,8 +6,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
 import { useAdaptivity } from "../../hooks/useAdaptivity.js";
+import { useMergeProps } from "../../hooks/useMergeProps.js";
+import { warnOnce } from "../../lib/warnOnce.js";
 import { FormField } from "../FormField/FormField.js";
 import { UnstyledTextField } from "../UnstyledTextField/UnstyledTextField.js";
+const warn = warnOnce('Input');
 const sizeYClassNames = {
     none: "vkuiInput__sizeYNone",
     compact: "vkuiInput__sizeYCompact"
@@ -15,7 +18,7 @@ const sizeYClassNames = {
 /**
  * @see https://vkui.io/components/input
  */ export const Input = (_param)=>{
-    var { type = 'text', align = 'left', getRef, className, getRootRef, style, before, after, status, mode } = _param, restProps = _object_without_properties(_param, [
+    var { type = 'text', align = 'left', getRef, className: rootClassName, getRootRef, style, before, after, status, mode, slotProps } = _param, restProps = _object_without_properties(_param, [
         "type",
         "align",
         "getRef",
@@ -25,25 +28,37 @@ const sizeYClassNames = {
         "before",
         "after",
         "status",
-        "mode"
+        "mode",
+        "slotProps"
     ]);
+    /* istanbul ignore if: не проверяем в тестах */ if (process.env.NODE_ENV === 'development' && getRef) {
+        warn('Свойство `getRef` устаревшее, используйте `slotProps={ input: { getRootRef: ... } }`');
+    }
     const { sizeY = 'none' } = useAdaptivity();
-    return /*#__PURE__*/ _jsx(FormField, {
-        style: style,
+    const _useMergeProps = useMergeProps({
+        className: rootClassName,
+        getRootRef,
+        style
+    }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root), { className } = _useMergeProps, rootProps = _object_without_properties(_useMergeProps, [
+        "className"
+    ]);
+    const inputRest = useMergeProps(_object_spread({
+        className: "vkuiInput__el",
+        getRootRef: getRef
+    }, restProps), slotProps === null || slotProps === void 0 ? void 0 : slotProps.input);
+    return /*#__PURE__*/ _jsx(FormField, _object_spread_props(_object_spread({
         className: classNames("vkuiInput__host", align === 'right' && "vkuiInput__alignRight", align === 'center' && "vkuiInput__alignCenter", sizeY !== 'regular' && sizeYClassNames[sizeY], before && "vkuiInput__hasBefore", after && "vkuiInput__hasAfter", className),
-        getRootRef: getRootRef,
         before: before,
         after: after,
-        disabled: restProps.disabled,
+        disabled: inputRest.disabled,
         mode: mode,
-        status: status,
-        children: /*#__PURE__*/ _jsx(UnstyledTextField, _object_spread_props(_object_spread({}, restProps), {
+        status: status
+    }, rootProps), {
+        children: /*#__PURE__*/ _jsx(UnstyledTextField, _object_spread({
             as: "input",
-            type: type,
-            className: "vkuiInput__el",
-            getRootRef: getRef
-        }))
-    });
+            type: type
+        }, inputRest))
+    }));
 };
 
 //# sourceMappingURL=Input.js.map

package/dist/components/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport type { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { FormField, type FormFieldProps } from '../FormField/FormField';\nimport { UnstyledTextField } from '../UnstyledTextField/UnstyledTextField';\nimport styles from './Input.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport interface InputProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLDivElement>,\n    HasAlign,\n    Omit<FormFieldProps, 'maxHeight'> {}\n\n/**\n * @see https://vkui.io/components/input\n */\nexport const Input = ({\n  type = 'text',\n  align = 'left',\n  getRef,\n  className,\n  getRootRef,\n  style,\n  before,\n  after,\n  status,\n  mode,\n  ...restProps\n}: InputProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <FormField\n      style={style}\n      className={classNames(\n        styles.host,\n        align === 'right' && styles.alignRight,\n        align === 'center' && styles.alignCenter,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        before && styles.hasBefore,\n        after && styles.hasAfter,\n        className,\n      )}\n      getRootRef={getRootRef}\n      before={before}\n      after={after}\n      disabled={restProps.disabled}\n      mode={mode}\n      status={status}\n    >\n      <UnstyledTextField\n        {...restProps}\n        as=\"input\"\n        type={type}\n        className={styles.el}\n        getRootRef={getRef}\n      />\n    </FormField>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","FormField","UnstyledTextField","sizeYClassNames","none","compact","Input","type","align","getRef","className","getRootRef","style","before","after","status","mode","restProps","sizeY","disabled","as"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAE1D,SAASC,SAAS,QAA6B,4BAAyB;AACxE,SAASC,iBAAiB,QAAQ,4CAAyC;AAG3E,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AASA;;CAEC,GACD,OAAO,MAAMC,QAAQ;QAAC,EACpBC,OAAO,MAAM,EACbC,QAAQ,MAAM,EACdC,MAAM,EACNC,SAAS,EACTC,UAAU,EACVC,KAAK,EACLC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,IAAI,EAEO,WADRC;QAVHV;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAGlB;IAE3B,qBACE,KAACC;QACCW,OAAOA;QACPF,WAAWX,8BAETS,UAAU,oCACVA,UAAU,sCACVU,UAAU,aAAaf,eAAe,CAACe,MAAM,EAC7CL,kCACAC,gCACAJ;QAEFC,YAAYA;QACZE,QAAQA;QACRC,OAAOA;QACPK,UAAUF,UAAUE,QAAQ;QAC5BH,MAAMA;QACND,QAAQA;kBAER,cAAA,KAACb,2DACKe;YACJG,IAAG;YACHb,MAAMA;YACNG,SAAS;YACTC,YAAYF;;;AAIpB,EAAE"}
+{"version":3,"sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useMergeProps } from '../../hooks/useMergeProps';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { HasAlign, HasDataAttribute, HasRootRef } from '../../types';\nimport { FormField, type FormFieldProps } from '../FormField/FormField';\nimport { UnstyledTextField } from '../UnstyledTextField/UnstyledTextField';\nimport styles from './Input.module.css';\n\nconst warn = warnOnce('Input');\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport interface InputProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLDivElement>,\n    HasAlign,\n    Omit<FormFieldProps, 'maxHeight'> {\n  /**\n   * @deprecated Since 7.9.0. Вместо этого используйте `slotProps={ input: { getRootRef: ... } }`.\n   */\n  getRef?: React.Ref<HTMLInputElement>;\n  /**\n   * Свойства, которые можно прокинуть внутрь компонента:\n   * - `root`: свойства для прокидывания в корень компонента;\n   * - `input`: свойства для прокидывания в поле ввода.\n   */\n  slotProps?: {\n    root?: React.HTMLAttributes<HTMLDivElement> & HasRootRef<HTMLDivElement> & HasDataAttribute;\n    input?: React.InputHTMLAttributes<HTMLInputElement> &\n      HasRootRef<HTMLInputElement> &\n      HasDataAttribute;\n  };\n}\n\n/**\n * @see https://vkui.io/components/input\n */\nexport const Input = ({\n  type = 'text',\n  align = 'left',\n  getRef,\n  className: rootClassName,\n  getRootRef,\n  style,\n  before,\n  after,\n  status,\n  mode,\n\n  slotProps,\n  ...restProps\n}: InputProps): React.ReactNode => {\n  /* istanbul ignore if: не проверяем в тестах */\n  if (process.env.NODE_ENV === 'development' && getRef) {\n    warn('Свойство `getRef` устаревшее, используйте `slotProps={ input: { getRootRef: ... } }`');\n  }\n\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const { className, ...rootProps } = useMergeProps(\n    {\n      className: rootClassName,\n      getRootRef,\n      style,\n    },\n    slotProps?.root,\n  );\n\n  const inputRest = useMergeProps(\n    {\n      className: styles.el,\n      getRootRef: getRef,\n      ...restProps,\n    },\n    slotProps?.input,\n  );\n\n  return (\n    <FormField\n      className={classNames(\n        styles.host,\n        align === 'right' && styles.alignRight,\n        align === 'center' && styles.alignCenter,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        before && styles.hasBefore,\n        after && styles.hasAfter,\n        className,\n      )}\n      before={before}\n      after={after}\n      disabled={inputRest.disabled}\n      mode={mode}\n      status={status}\n      {...rootProps}\n    >\n      <UnstyledTextField as=\"input\" type={type} {...inputRest} />\n    </FormField>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useMergeProps","warnOnce","FormField","UnstyledTextField","warn","sizeYClassNames","none","compact","Input","type","align","getRef","className","rootClassName","getRootRef","style","before","after","status","mode","slotProps","restProps","process","env","NODE_ENV","sizeY","root","rootProps","inputRest","input","disabled","as"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,QAAQ,QAAQ,wBAAqB;AAE9C,SAASC,SAAS,QAA6B,4BAAyB;AACxE,SAASC,iBAAiB,QAAQ,4CAAyC;AAG3E,MAAMC,OAAOH,SAAS;AAEtB,MAAMI,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAwBA;;CAEC,GACD,OAAO,MAAMC,QAAQ;QAAC,EACpBC,OAAO,MAAM,EACbC,QAAQ,MAAM,EACdC,MAAM,EACNC,WAAWC,aAAa,EACxBC,UAAU,EACVC,KAAK,EACLC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,IAAI,EAEJC,SAAS,EAEE,WADRC;QAZHZ;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QAEAC;;IAGA,6CAA6C,GAC7C,IAAIE,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBAAiBb,QAAQ;QACpDP,KAAK;IACP;IAEA,MAAM,EAAEqB,QAAQ,MAAM,EAAE,GAAG1B;IAE3B,MAAoCC,iBAAAA,cAClC;QACEY,WAAWC;QACXC;QACAC;IACF,GACAK,sBAAAA,gCAAAA,UAAWM,IAAI,GANX,EAAEd,SAAS,EAAgB,GAAGZ,gBAAd2B,uCAAc3B;QAA5BY;;IASR,MAAMgB,YAAY5B,cAChB;QACEY,SAAS;QACTE,YAAYH;OACTU,YAELD,sBAAAA,gCAAAA,UAAWS,KAAK;IAGlB,qBACE,KAAC3B;QACCU,WAAWd,8BAETY,UAAU,oCACVA,UAAU,sCACVe,UAAU,aAAapB,eAAe,CAACoB,MAAM,EAC7CT,kCACAC,gCACAL;QAEFI,QAAQA;QACRC,OAAOA;QACPa,UAAUF,UAAUE,QAAQ;QAC5BX,MAAMA;QACND,QAAQA;OACJS;kBAEJ,cAAA,KAACxB;YAAkB4B,IAAG;YAAQtB,MAAMA;WAAUmB;;AAGpD,EAAE"}

package/dist/components/NativeSelect/NativeSelect.d.ts

@@ -1,6 +1,6 @@
 import { type ChangeEvent } from 'react';
 import * as React from 'react';
-import type { HasAlign, HasRef, HasRootRef } from '../../types';
+import type { HasAlign, HasDataAttribute, HasRootRef } from '../../types';
 import { type FormFieldProps } from '../FormField/FormField';
 import type { SelectType } from '../Select/Select';
 export type SelectValue = Exclude<React.SelectHTMLAttributes<HTMLSelectElement>['value'], undefined> | null;
@@ -14,7 +14,21 @@ export declare const NOT_SELECTED: {
  */
 export declare const remapFromSelectValueToNativeValue: (value: SelectValue) => NativeSelectValue;
 export declare const remapFromNativeValueToSelectValue: (value: NativeSelectValue) => SelectValue;
-export interface NativeSelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'multiple' | 'value' | 'defaultValue' | 'onChange'>, HasRef<HTMLSelectElement>, HasRootRef<HTMLDivElement>, HasAlign, Pick<FormFieldProps, 'before' | 'status'> {
+export type NativeHTMLSelectProps = Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'multiple' | 'value' | 'defaultValue' | 'onChange'>;
+export interface NativeSelectProps extends NativeHTMLSelectProps, HasRootRef<HTMLDivElement>, HasAlign, Pick<FormFieldProps, 'before' | 'status'> {
+    /**
+     * Свойства, которые можно прокинуть внутрь компонента:
+     * - `root`: свойства для прокидывания в корень компонента;
+     * - `select`: свойства для прокидывания в нативный `select`.
+     */
+    slotProps?: {
+        root?: Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & HasDataAttribute & HasRootRef<HTMLDivElement>;
+        select?: NativeHTMLSelectProps & HasRootRef<HTMLSelectElement> & HasDataAttribute;
+    };
+    /**
+     * @deprecated Since 7.9.0. Вместо этого используйте `slotProps={ select: { getRootRef: ... } }`.
+     */
+    getRef?: React.Ref<HTMLSelectElement>;
     /**
      * Выбранное значение.
      *
@@ -54,5 +68,5 @@ export interface NativeSelectProps extends Omit<React.SelectHTMLAttributes<HTMLS
 /**
  * @see https://vkui.io/components/native-select
  */
-export declare const NativeSelect: ({ style, align, placeholder, children, className, getRef, getRootRef, disabled, multiline, selectType, status, icon, before, onChange, value, defaultValue, ...restProps }: NativeSelectProps) => React.ReactNode;
+export declare const NativeSelect: ({ style: rootStyle, className: rootClassName, getRootRef: rootGetRootRef, align, placeholder, children, getRef, multiline, selectType, status, icon, before, onChange, value, defaultValue, slotProps, ...restProps }: NativeSelectProps) => React.ReactNode;
 //# sourceMappingURL=NativeSelect.d.ts.map

package/dist/components/NativeSelect/NativeSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NativeSelect.d.ts","sourceRoot":"","sources":["../../../src/components/NativeSelect/NativeSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,WAAW,EAA2B,MAAM,OAAO,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEhE,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AASnD,MAAM,MAAM,WAAW,GAAG,OAAO,CAC/B,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,OAAO,CAAC,EACtD,SAAS,CACV,GAAG,IAAI,CAAC;AAET,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;AAE3D,eAAO,MAAM,YAAY;;;CAGxB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iCAAiC,GAAI,OAAO,WAAW,KAAG,iBACV,CAAC;AAE9D,eAAO,MAAM,iCAAiC,GAAI,OAAO,iBAAiB,KAAG,WAChB,CAAC;AAE9D,MAAM,WAAW,iBACf,SAAQ,IAAI,CACR,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,UAAU,GAAG,OAAO,GAAG,cAAc,GAAG,UAAU,CACnD,EACD,MAAM,CAAC,iBAAiB,CAAC,EACzB,UAAU,CAAC,cAAc,CAAC,EAC1B,QAAQ,EACR,IAAI,CAAC,cAAc,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC3C;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB;;OAEG;IACH,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,iBAAiB,CAAC,EAAE,QAAQ,EAAE,WAAW,KAAK,IAAI,CAAC;IAC9E;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED;;GAEG;AACH,eAAO,MAAM,YAAY,GAAI,4KAkB1B,iBAAiB,KAAG,KAAK,CAAC,SAuE5B,CAAC"}
+{"version":3,"file":"NativeSelect.d.ts","sourceRoot":"","sources":["../../../src/components/NativeSelect/NativeSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,WAAW,EAA2B,MAAM,OAAO,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE1E,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAWnD,MAAM,MAAM,WAAW,GAAG,OAAO,CAC/B,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,OAAO,CAAC,EACtD,SAAS,CACV,GAAG,IAAI,CAAC;AAET,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;AAE3D,eAAO,MAAM,YAAY;;;CAGxB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iCAAiC,GAAI,OAAO,WAAW,KAAG,iBACV,CAAC;AAE9D,eAAO,MAAM,iCAAiC,GAAI,OAAO,iBAAiB,KAAG,WAChB,CAAC;AAE9D,MAAM,MAAM,qBAAqB,GAAG,IAAI,CACtC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,UAAU,GAAG,OAAO,GAAG,cAAc,GAAG,UAAU,CACnD,CAAC;AAEF,MAAM,WAAW,iBACf,SAAQ,qBAAqB,EAC3B,UAAU,CAAC,cAAc,CAAC,EAC1B,QAAQ,EACR,IAAI,CAAC,cAAc,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC3C;;;;OAIG;IACH,SAAS,CAAC,EAAE;QACV,IAAI,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAC3D,gBAAgB,GAChB,UAAU,CAAC,cAAc,CAAC,CAAC;QAC7B,MAAM,CAAC,EAAE,qBAAqB,GAAG,UAAU,CAAC,iBAAiB,CAAC,GAAG,gBAAgB,CAAC;KACnF,CAAC;IACF;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACtC;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB;;OAEG;IACH,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,iBAAiB,CAAC,EAAE,QAAQ,EAAE,WAAW,KAAK,IAAI,CAAC;IAC9E;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED;;GAEG;AACH,eAAO,MAAM,YAAY,GAAI,uNAmB1B,iBAAiB,KAAG,KAAK,CAAC,SAwF5B,CAAC"}

package/dist/components/NativeSelect/NativeSelect.js

@@ -7,12 +7,16 @@ import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
 import { useAdaptivity } from "../../hooks/useAdaptivity.js";
 import { useExternRef } from "../../hooks/useExternRef.js";
+import { useMergeProps } from "../../hooks/useMergeProps.js";
 import { callMultiple } from "../../lib/callMultiple.js";
 import { getFormFieldModeFromSelectType } from "../../lib/select.js";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect.js";
+import { warnOnce } from "../../lib/warnOnce.js";
 import { DropdownIcon } from "../DropdownIcon/DropdownIcon.js";
 import { FormField } from "../FormField/FormField.js";
+import { RootComponent } from "../RootComponent/RootComponent.js";
 import { SelectTypography } from "../SelectTypography/SelectTypography.js";
+const warn = warnOnce('NativeSelect');
 const sizeYClassNames = {
     none: "vkuiSelect__sizeYNone",
     compact: "vkuiSelect__sizeYCompact"
@@ -28,15 +32,14 @@ export const remapFromNativeValueToSelectValue = (value)=>value === NOT_SELECTED
 /**
  * @see https://vkui.io/components/native-select
  */ export const NativeSelect = (_param)=>{
-    var { style, align, placeholder, children, className, getRef, getRootRef, disabled, multiline, selectType = 'default', status, icon = /*#__PURE__*/ _jsx(DropdownIcon, {}), before, onChange, value, defaultValue } = _param, restProps = _object_without_properties(_param, [
+    var { style: rootStyle, className: rootClassName, getRootRef: rootGetRootRef, align, placeholder, children, getRef, multiline, selectType = 'default', status, icon = /*#__PURE__*/ _jsx(DropdownIcon, {}), before, onChange, value, defaultValue, slotProps } = _param, restProps = _object_without_properties(_param, [
         "style",
+        "className",
+        "getRootRef",
         "align",
         "placeholder",
         "children",
-        "className",
         "getRef",
-        "getRootRef",
-        "disabled",
         "multiline",
         "selectType",
         "status",
@@ -44,12 +47,30 @@ export const remapFromNativeValueToSelectValue = (value)=>value === NOT_SELECTED
         "before",
         "onChange",
         "value",
-        "defaultValue"
+        "defaultValue",
+        "slotProps"
     ]);
+    /* istanbul ignore if: не проверяем в тестах */ if (process.env.NODE_ENV === 'development' && getRef) {
+        warn('Свойство `getRef` устаревшее, используйте `slotProps={ select: { getRootRef: ... } }`');
+    }
     const [title, setTitle] = React.useState('');
     const [empty, setEmpty] = React.useState(false);
-    const selectRef = useExternRef(getRef);
     const { sizeY = 'none' } = useAdaptivity();
+    const _useMergeProps = useMergeProps({
+        style: rootStyle,
+        className: rootClassName,
+        getRootRef: rootGetRootRef
+    }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root), { className, style, getRootRef } = _useMergeProps, rootRest = _object_without_properties(_useMergeProps, [
+        "className",
+        "style",
+        "getRootRef"
+    ]);
+    const _useMergeProps1 = useMergeProps(_object_spread({
+        getRootRef: getRef
+    }, restProps), slotProps === null || slotProps === void 0 ? void 0 : slotProps.select), { getRootRef: getSelectRef } = _useMergeProps1, selectRest = _object_without_properties(_useMergeProps1, [
+        "getRootRef"
+    ]);
+    const selectRef = useExternRef(getSelectRef);
     const checkSelectedOption = ()=>{
         var _selectRef_current;
         const selectedOption = (_selectRef_current = selectRef.current) === null || _selectRef_current === void 0 ? void 0 : _selectRef_current.options[selectRef.current.selectedIndex];
@@ -71,24 +92,26 @@ export const remapFromNativeValueToSelectValue = (value)=>value === NOT_SELECTED
     useIsomorphicLayoutEffect(checkSelectedOption, [
         children
     ]);
-    return /*#__PURE__*/ _jsxs(FormField, {
+    return /*#__PURE__*/ _jsxs(FormField, _object_spread_props(_object_spread({
         Component: "div",
         className: classNames("vkuiSelect__host", 'vkuiInternalNativeSelect', before && "vkuiSelect__hasBefore", empty && "vkuiSelect__empty", multiline && "vkuiSelect__multiline", align === 'center' && "vkuiSelect__alignCenter", align === 'right' && "vkuiSelect__alignRight", sizeY !== 'regular' && sizeYClassNames[sizeY], className),
         style: style,
         getRootRef: getRootRef,
-        disabled: disabled,
+        disabled: selectRest.disabled,
         before: before,
         after: icon,
         status: status,
-        mode: getFormFieldModeFromSelectType(selectType),
+        mode: getFormFieldModeFromSelectType(selectType)
+    }, rootRest), {
         children: [
-            /*#__PURE__*/ _jsxs("select", _object_spread_props(_object_spread({}, restProps), {
+            /*#__PURE__*/ _jsxs(RootComponent, _object_spread_props(_object_spread({
+                Component: "select",
+                baseClassName: "vkuiSelect__el",
                 value: value !== undefined ? remapFromSelectValueToNativeValue(value) : value,
                 defaultValue: defaultValue !== undefined ? remapFromSelectValueToNativeValue(defaultValue) : defaultValue,
-                disabled: disabled,
-                className: "vkuiSelect__el",
                 onChange: callMultiple(_onChange, checkSelectedOption),
-                ref: selectRef,
+                getRootRef: selectRef
+            }, selectRest), {
                 children: [
                     placeholder && /*#__PURE__*/ _jsx("option", {
                         value: NOT_SELECTED.NATIVE,
@@ -107,7 +130,7 @@ export const remapFromNativeValueToSelectValue = (value)=>value === NOT_SELECTED
                 })
             })
         ]
-    });
+    }));
 };
 
 //# sourceMappingURL=NativeSelect.js.map

package/dist/components/NativeSelect/NativeSelect.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/NativeSelect/NativeSelect.tsx"],"sourcesContent":["'use client';\n\nimport { type ChangeEvent, type ChangeEventHandler } from 'react';\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { getFormFieldModeFromSelectType } from '../../lib/select';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField, type FormFieldProps } from '../FormField/FormField';\nimport type { SelectType } from '../Select/Select';\nimport { SelectTypography } from '../SelectTypography/SelectTypography';\nimport styles from '../Select/Select.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport type SelectValue = Exclude<\n  React.SelectHTMLAttributes<HTMLSelectElement>['value'],\n  undefined\n> | null;\n\nexport type NativeSelectValue = Exclude<SelectValue, null>;\n\nexport const NOT_SELECTED = {\n  NATIVE: '__vkui_internal_Select_not_selected__',\n  CUSTOM: null,\n};\n\n/**\n * @visibleName NativeSelect\n */\nexport const remapFromSelectValueToNativeValue = (value: SelectValue): NativeSelectValue =>\n  value === NOT_SELECTED.CUSTOM ? NOT_SELECTED.NATIVE : value;\n\nexport const remapFromNativeValueToSelectValue = (value: NativeSelectValue): SelectValue =>\n  value === NOT_SELECTED.NATIVE ? NOT_SELECTED.CUSTOM : value;\n\nexport interface NativeSelectProps\n  extends Omit<\n      React.SelectHTMLAttributes<HTMLSelectElement>,\n      'multiple' | 'value' | 'defaultValue' | 'onChange'\n    >,\n    HasRef<HTMLSelectElement>,\n    HasRootRef<HTMLDivElement>,\n    HasAlign,\n    Pick<FormFieldProps, 'before' | 'status'> {\n  /**\n   * Выбранное значение.\n   *\n   * > ⚠️  Важно: При прокидывании `undefined` компонент будет считаться `Uncontrolled`.\n   * >\n   * > Не используйте `undefined`, чтобы показать невыбранное состояние. Вместо этого используйте `null`.\n   */\n  value?: SelectValue;\n  /**\n   * См. `value`.\n   */\n  defaultValue?: SelectValue;\n  /**\n   * Обработчик, срабатывающий при изменении выбранного значения.\n   * Вторым параметром прокидывается новое значение.\n   *\n   * > ⚠️ Лучше использовать второй параметр при работе с компонентом.\n   */\n  onChange?: (e: ChangeEvent<HTMLSelectElement>, newValue: SelectValue) => void;\n  /**\n   * Текст-подсказка при отсутствии выбранного значения.\n   */\n  placeholder?: string;\n  /**\n   * Флаг для включения многострочного режима.\n   */\n  multiline?: boolean;\n  /**\n   * Тип селекта, влияющий на отображение.\n   */\n  selectType?: SelectType;\n  /**\n   * Иконка раскрывающегося списка.\n   */\n  icon?: React.ReactNode;\n}\n\n/**\n * @see https://vkui.io/components/native-select\n */\nexport const NativeSelect = ({\n  style,\n  align,\n  placeholder,\n  children,\n  className,\n  getRef,\n  getRootRef,\n  disabled,\n  multiline,\n  selectType = 'default',\n  status,\n  icon = <DropdownIcon />,\n  before,\n  onChange,\n  value,\n  defaultValue,\n  ...restProps\n}: NativeSelectProps): React.ReactNode => {\n  const [title, setTitle] = React.useState('');\n  const [empty, setEmpty] = React.useState(false);\n  const selectRef = useExternRef(getRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const checkSelectedOption = () => {\n    const selectedOption = selectRef.current?.options[selectRef.current.selectedIndex];\n    if (selectedOption) {\n      setTitle(selectedOption.text);\n      setEmpty(selectedOption.value === NOT_SELECTED.NATIVE && placeholder != null);\n    }\n  };\n\n  const _onChange: ChangeEventHandler<HTMLSelectElement> = (e) => {\n    const newValue = remapFromNativeValueToSelectValue(e.target.value);\n    if (e.target.value === NOT_SELECTED.NATIVE) {\n      e.target.value = '';\n    }\n    if (e.currentTarget.value === NOT_SELECTED.NATIVE) {\n      e.currentTarget.value = '';\n    }\n    onChange?.(e, newValue);\n  };\n  useIsomorphicLayoutEffect(checkSelectedOption, [children]);\n\n  return (\n    <FormField\n      Component=\"div\"\n      className={classNames(\n        styles.host,\n        'vkuiInternalNativeSelect',\n        before && styles.hasBefore,\n        empty && styles.empty,\n        multiline && styles.multiline,\n        align === 'center' && styles.alignCenter,\n        align === 'right' && styles.alignRight,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        className,\n      )}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={disabled}\n      before={before}\n      after={icon}\n      status={status}\n      mode={getFormFieldModeFromSelectType(selectType)}\n    >\n      <select\n        {...restProps}\n        value={value !== undefined ? remapFromSelectValueToNativeValue(value) : value}\n        defaultValue={\n          defaultValue !== undefined\n            ? remapFromSelectValueToNativeValue(defaultValue)\n            : defaultValue\n        }\n        disabled={disabled}\n        className={styles.el}\n        onChange={callMultiple(_onChange, checkSelectedOption)}\n        ref={selectRef}\n      >\n        {placeholder && <option value={NOT_SELECTED.NATIVE}>{placeholder}</option>}\n        {children}\n      </select>\n      <div className={styles.container} aria-hidden>\n        <SelectTypography className={styles.title} selectType={selectType}>\n          {title}\n        </SelectTypography>\n      </div>\n    </FormField>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useExternRef","callMultiple","getFormFieldModeFromSelectType","useIsomorphicLayoutEffect","DropdownIcon","FormField","SelectTypography","sizeYClassNames","none","compact","NOT_SELECTED","NATIVE","CUSTOM","remapFromSelectValueToNativeValue","value","remapFromNativeValueToSelectValue","NativeSelect","style","align","placeholder","children","className","getRef","getRootRef","disabled","multiline","selectType","status","icon","before","onChange","defaultValue","restProps","title","setTitle","useState","empty","setEmpty","selectRef","sizeY","checkSelectedOption","selectedOption","current","options","selectedIndex","text","_onChange","e","newValue","target","currentTarget","Component","after","mode","select","undefined","ref","option","div","aria-hidden"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/NativeSelect/NativeSelect.tsx"],"sourcesContent":["'use client';\n\nimport { type ChangeEvent, type ChangeEventHandler } from 'react';\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useMergeProps } from '../../hooks/useMergeProps';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { getFormFieldModeFromSelectType } from '../../lib/select';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { HasAlign, HasDataAttribute, HasRootRef } from '../../types';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField, type FormFieldProps } from '../FormField/FormField';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport type { SelectType } from '../Select/Select';\nimport { SelectTypography } from '../SelectTypography/SelectTypography';\nimport styles from '../Select/Select.module.css';\n\nconst warn = warnOnce('NativeSelect');\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport type SelectValue = Exclude<\n  React.SelectHTMLAttributes<HTMLSelectElement>['value'],\n  undefined\n> | null;\n\nexport type NativeSelectValue = Exclude<SelectValue, null>;\n\nexport const NOT_SELECTED = {\n  NATIVE: '__vkui_internal_Select_not_selected__',\n  CUSTOM: null,\n};\n\n/**\n * @visibleName NativeSelect\n */\nexport const remapFromSelectValueToNativeValue = (value: SelectValue): NativeSelectValue =>\n  value === NOT_SELECTED.CUSTOM ? NOT_SELECTED.NATIVE : value;\n\nexport const remapFromNativeValueToSelectValue = (value: NativeSelectValue): SelectValue =>\n  value === NOT_SELECTED.NATIVE ? NOT_SELECTED.CUSTOM : value;\n\nexport type NativeHTMLSelectProps = Omit<\n  React.SelectHTMLAttributes<HTMLSelectElement>,\n  'multiple' | 'value' | 'defaultValue' | 'onChange'\n>;\n\nexport interface NativeSelectProps\n  extends NativeHTMLSelectProps,\n    HasRootRef<HTMLDivElement>,\n    HasAlign,\n    Pick<FormFieldProps, 'before' | 'status'> {\n  /**\n   * Свойства, которые можно прокинуть внутрь компонента:\n   * - `root`: свойства для прокидывания в корень компонента;\n   * - `select`: свойства для прокидывания в нативный `select`.\n   */\n  slotProps?: {\n    root?: Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> &\n      HasDataAttribute &\n      HasRootRef<HTMLDivElement>;\n    select?: NativeHTMLSelectProps & HasRootRef<HTMLSelectElement> & HasDataAttribute;\n  };\n  /**\n   * @deprecated Since 7.9.0. Вместо этого используйте `slotProps={ select: { getRootRef: ... } }`.\n   */\n  getRef?: React.Ref<HTMLSelectElement>;\n  /**\n   * Выбранное значение.\n   *\n   * > ⚠️  Важно: При прокидывании `undefined` компонент будет считаться `Uncontrolled`.\n   * >\n   * > Не используйте `undefined`, чтобы показать невыбранное состояние. Вместо этого используйте `null`.\n   */\n  value?: SelectValue;\n  /**\n   * См. `value`.\n   */\n  defaultValue?: SelectValue;\n  /**\n   * Обработчик, срабатывающий при изменении выбранного значения.\n   * Вторым параметром прокидывается новое значение.\n   *\n   * > ⚠️ Лучше использовать второй параметр при работе с компонентом.\n   */\n  onChange?: (e: ChangeEvent<HTMLSelectElement>, newValue: SelectValue) => void;\n  /**\n   * Текст-подсказка при отсутствии выбранного значения.\n   */\n  placeholder?: string;\n  /**\n   * Флаг для включения многострочного режима.\n   */\n  multiline?: boolean;\n  /**\n   * Тип селекта, влияющий на отображение.\n   */\n  selectType?: SelectType;\n  /**\n   * Иконка раскрывающегося списка.\n   */\n  icon?: React.ReactNode;\n}\n\n/**\n * @see https://vkui.io/components/native-select\n */\nexport const NativeSelect = ({\n  style: rootStyle,\n  className: rootClassName,\n  getRootRef: rootGetRootRef,\n  align,\n  placeholder,\n  children,\n  getRef,\n  multiline,\n  selectType = 'default',\n  status,\n  icon = <DropdownIcon />,\n  before,\n  onChange,\n  value,\n  defaultValue,\n\n  slotProps,\n  ...restProps\n}: NativeSelectProps): React.ReactNode => {\n  /* istanbul ignore if: не проверяем в тестах */\n  if (process.env.NODE_ENV === 'development' && getRef) {\n    warn('Свойство `getRef` устаревшее, используйте `slotProps={ select: { getRootRef: ... } }`');\n  }\n\n  const [title, setTitle] = React.useState('');\n  const [empty, setEmpty] = React.useState(false);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const { className, style, getRootRef, ...rootRest } = useMergeProps(\n    { style: rootStyle, className: rootClassName, getRootRef: rootGetRootRef },\n    slotProps?.root,\n  );\n\n  const { getRootRef: getSelectRef, ...selectRest } = useMergeProps(\n    { getRootRef: getRef, ...restProps },\n    slotProps?.select,\n  );\n\n  const selectRef = useExternRef(getSelectRef);\n\n  const checkSelectedOption = () => {\n    const selectedOption = selectRef.current?.options[selectRef.current.selectedIndex];\n    if (selectedOption) {\n      setTitle(selectedOption.text);\n      setEmpty(selectedOption.value === NOT_SELECTED.NATIVE && placeholder != null);\n    }\n  };\n\n  const _onChange: ChangeEventHandler<HTMLSelectElement> = (e) => {\n    const newValue = remapFromNativeValueToSelectValue(e.target.value);\n    if (e.target.value === NOT_SELECTED.NATIVE) {\n      e.target.value = '';\n    }\n    if (e.currentTarget.value === NOT_SELECTED.NATIVE) {\n      e.currentTarget.value = '';\n    }\n    onChange?.(e, newValue);\n  };\n  useIsomorphicLayoutEffect(checkSelectedOption, [children]);\n\n  return (\n    <FormField\n      Component=\"div\"\n      className={classNames(\n        styles.host,\n        'vkuiInternalNativeSelect',\n        before && styles.hasBefore,\n        empty && styles.empty,\n        multiline && styles.multiline,\n        align === 'center' && styles.alignCenter,\n        align === 'right' && styles.alignRight,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        className,\n      )}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={selectRest.disabled}\n      before={before}\n      after={icon}\n      status={status}\n      mode={getFormFieldModeFromSelectType(selectType)}\n      {...rootRest}\n    >\n      <RootComponent\n        Component=\"select\"\n        baseClassName={styles.el}\n        value={value !== undefined ? remapFromSelectValueToNativeValue(value) : value}\n        defaultValue={\n          defaultValue !== undefined\n            ? remapFromSelectValueToNativeValue(defaultValue)\n            : defaultValue\n        }\n        onChange={callMultiple(_onChange, checkSelectedOption)}\n        getRootRef={selectRef}\n        {...selectRest}\n      >\n        {placeholder && <option value={NOT_SELECTED.NATIVE}>{placeholder}</option>}\n        {children}\n      </RootComponent>\n      <div className={styles.container} aria-hidden>\n        <SelectTypography className={styles.title} selectType={selectType}>\n          {title}\n        </SelectTypography>\n      </div>\n    </FormField>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useExternRef","useMergeProps","callMultiple","getFormFieldModeFromSelectType","useIsomorphicLayoutEffect","warnOnce","DropdownIcon","FormField","RootComponent","SelectTypography","warn","sizeYClassNames","none","compact","NOT_SELECTED","NATIVE","CUSTOM","remapFromSelectValueToNativeValue","value","remapFromNativeValueToSelectValue","NativeSelect","style","rootStyle","className","rootClassName","getRootRef","rootGetRootRef","align","placeholder","children","getRef","multiline","selectType","status","icon","before","onChange","defaultValue","slotProps","restProps","process","env","NODE_ENV","title","setTitle","useState","empty","setEmpty","sizeY","root","rootRest","select","getSelectRef","selectRest","selectRef","checkSelectedOption","selectedOption","current","options","selectedIndex","text","_onChange","e","newValue","target","currentTarget","Component","disabled","after","mode","baseClassName","undefined","option","div","aria-hidden"],"mappings":"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"}

package/dist/components/Radio/Radio.d.ts

@@ -1,8 +1,21 @@
 import * as React from 'react';
-import type { HasDataAttribute, HasRef, HasRootRef } from '../../types';
+import type { HasDataAttribute, HasRootRef } from '../../types';
 import type { TappableOmitProps } from '../Tappable/Tappable';
 import { RadioInput } from './RadioInput/RadioInput';
-export interface RadioProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRef<HTMLInputElement>, HasRootRef<HTMLLabelElement>, Pick<TappableOmitProps, 'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode'> {
+export interface RadioProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRootRef<HTMLLabelElement>, Pick<TappableOmitProps, 'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode'> {
+    /**
+     * Свойства, которые можно прокинуть внутрь компонента:
+     * - `root`: свойства для прокидывания в корень компонента;
+     * - `input`: свойства для прокидывания в скрытый `input`.
+     */
+    slotProps?: {
+        root?: Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'children'> & HasRootRef<HTMLLabelElement> & HasDataAttribute;
+        input?: React.ComponentProps<'input'> & HasRootRef<HTMLInputElement> & HasDataAttribute;
+    };
+    /**
+     * @deprecated Since 7.9.0. Вместо этого используйте `slotProps={ input: { getRootRef: ... } }`.
+     */
+    getRef?: React.Ref<HTMLInputElement>;
     /**
      * Дополнительное описание под основным текстом.
      */
@@ -12,6 +25,8 @@ export interface RadioProps extends React.InputHTMLAttributes<HTMLInputElement>,
      */
     titleAfter?: React.ReactNode;
     /**
+     * @deprecated Since 7.9.0. Вместо этого используйте `slotProps={ root: {...} }`.
+     *
      * Позволяет передавать data-* аттрибуты элементу label.
      **/
     labelProps?: HasDataAttribute;
@@ -20,7 +35,7 @@ export interface RadioProps extends React.InputHTMLAttributes<HTMLInputElement>,
  * @see https://vkui.io/components/radio
  */
 export declare const Radio: {
-    ({ children, description, style, className, getRootRef, titleAfter, getRef, labelProps, hoverMode, activeMode, hasHover, hasActive, focusVisibleMode, ...restProps }: RadioProps): React.ReactNode;
+    ({ children, description, style, className, getRootRef, titleAfter, getRef, labelProps, hoverMode, activeMode, hasHover, hasActive, focusVisibleMode, slotProps, ...restProps }: RadioProps): React.ReactNode;
     Input: typeof RadioInput;
 };
 //# sourceMappingURL=Radio.d.ts.map

package/dist/components/Radio/Radio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/Radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAGxE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAGrD,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACjD,MAAM,CAAC,gBAAgB,CAAC,EACxB,UAAU,CAAC,gBAAgB,CAAC,EAC5B,IAAI,CACF,iBAAiB,EACjB,WAAW,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,GAAG,kBAAkB,CAC3E;IACH;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B;;QAEI;IACJ,UAAU,CAAC,EAAE,gBAAgB,CAAC;CAC/B;AAED;;GAEG;AACH,eAAO,MAAM,KAAK;0KAef,UAAU,GAAG,KAAK,CAAC,SAAS;;CAoB9B,CAAC"}
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/Radio/Radio.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAGhE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAKrD,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACjD,UAAU,CAAC,gBAAgB,CAAC,EAC5B,IAAI,CACF,iBAAiB,EACjB,WAAW,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,GAAG,kBAAkB,CAC3E;IACH;;;;OAIG;IACH,SAAS,CAAC,EAAE;QACV,IAAI,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC,GAClE,UAAU,CAAC,gBAAgB,CAAC,GAC5B,gBAAgB,CAAC;QACnB,KAAK,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,GAAG,UAAU,CAAC,gBAAgB,CAAC,GAAG,gBAAgB,CAAC;KACzF,CAAC;IACF;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IACrC;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B;;;;QAII;IACJ,UAAU,CAAC,EAAE,gBAAgB,CAAC;CAC/B;AAED;;GAEG;AACH,eAAO,MAAM,KAAK;qLAiBf,UAAU,GAAG,KAAK,CAAC,SAAS;;CAuC9B,CAAC"}

package/dist/components/Radio/Radio.js

@@ -1,16 +1,20 @@
+'use client';
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
+import { useMergeProps } from "../../hooks/useMergeProps.js";
+import { warnOnce } from "../../lib/warnOnce.js";
 import { SelectionControl } from "../SelectionControl/SelectionControl.js";
 import { SelectionControlLabel } from "../SelectionControl/SelectionControlLabel/SelectionControlLabel.js";
 import { RadioInput } from "./RadioInput/RadioInput.js";
+const warn = warnOnce('Radio');
 /**
  * @see https://vkui.io/components/radio
  */ export const Radio = (_param)=>{
-    var { children, description, style, className, getRootRef, titleAfter, getRef, labelProps, hoverMode, activeMode, hasHover, hasActive, focusVisibleMode } = _param, restProps = _object_without_properties(_param, [
+    var { children, description, style, className, getRootRef, titleAfter, getRef, labelProps, hoverMode, activeMode, hasHover, hasActive, focusVisibleMode, slotProps } = _param, restProps = _object_without_properties(_param, [
         "children",
         "description",
         "style",
@@ -23,23 +27,39 @@ import { RadioInput } from "./RadioInput/RadioInput.js";
         "activeMode",
         "hasHover",
         "hasActive",
-        "focusVisibleMode"
+        "focusVisibleMode",
+        "slotProps"
     ]);
-    return /*#__PURE__*/ _jsxs(SelectionControl, _object_spread_props(_object_spread({
-        style: style,
+    /* istanbul ignore if: не проверяем в тестах */ if (process.env.NODE_ENV === 'development') {
+        if (labelProps) {
+            warn('Свойство `labelProps` устаревшее, используйте `slotProps={ root: {...} }`');
+        }
+        if (getRef) {
+            warn('Свойство `getRef` устаревшее, используйте `slotProps={ input: { getRootRef: ... } }`');
+        }
+    }
+    const rootProps = useMergeProps(_object_spread({
+        style,
         className: classNames("vkuiRadio__host", className),
-        disabled: restProps.disabled,
-        getRootRef: getRootRef,
+        getRootRef
+    }, labelProps), slotProps === null || slotProps === void 0 ? void 0 : slotProps.root);
+    const inputRest = useMergeProps(_object_spread({
+        getRootRef: getRef
+    }, restProps), slotProps === null || slotProps === void 0 ? void 0 : slotProps.input);
+    return /*#__PURE__*/ _jsxs(SelectionControl, _object_spread_props(_object_spread({
         hoverMode: hoverMode,
         activeMode: activeMode,
         hasHover: hasHover,
         hasActive: hasActive,
-        focusVisibleMode: focusVisibleMode
-    }, labelProps), {
+        focusVisibleMode: focusVisibleMode,
+        disabled: inputRest.disabled
+    }, rootProps), {
         children: [
-            /*#__PURE__*/ _jsx(RadioInput, _object_spread_props(_object_spread({}, restProps), {
-                getRef: getRef
-            })),
+            /*#__PURE__*/ _jsx(RadioInput, {
+                slotProps: {
+                    input: inputRest
+                }
+            }),
             /*#__PURE__*/ _jsx(SelectionControlLabel, {
                 titleAfter: titleAfter,
                 description: description,

package/dist/components/Radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasDataAttribute, HasRef, HasRootRef } from '../../types';\nimport { SelectionControl } from '../SelectionControl/SelectionControl';\nimport { SelectionControlLabel } from '../SelectionControl/SelectionControlLabel/SelectionControlLabel';\nimport type { TappableOmitProps } from '../Tappable/Tappable';\nimport { RadioInput } from './RadioInput/RadioInput';\nimport styles from './Radio.module.css';\n\nexport interface RadioProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    Pick<\n      TappableOmitProps,\n      'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode'\n    > {\n  /**\n   * Дополнительное описание под основным текстом.\n   */\n  description?: React.ReactNode;\n  /**\n   * Элемент после основного текста.\n   */\n  titleAfter?: React.ReactNode;\n  /**\n   * Позволяет передавать data-* аттрибуты элементу label.\n   **/\n  labelProps?: HasDataAttribute;\n}\n\n/**\n * @see https://vkui.io/components/radio\n */\nexport const Radio = ({\n  children,\n  description,\n  style,\n  className,\n  getRootRef,\n  titleAfter,\n  getRef,\n  labelProps,\n  hoverMode,\n  activeMode,\n  hasHover,\n  hasActive,\n  focusVisibleMode,\n  ...restProps\n}: RadioProps): React.ReactNode => {\n  return (\n    <SelectionControl\n      style={style}\n      className={classNames(styles.host, className)}\n      disabled={restProps.disabled}\n      getRootRef={getRootRef}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasHover={hasHover}\n      hasActive={hasActive}\n      focusVisibleMode={focusVisibleMode}\n      {...labelProps}\n    >\n      <RadioInput {...restProps} getRef={getRef} />\n      <SelectionControlLabel titleAfter={titleAfter} description={description}>\n        {children}\n      </SelectionControlLabel>\n    </SelectionControl>\n  );\n};\n\nRadio.Input = RadioInput;\n"],"names":["React","classNames","SelectionControl","SelectionControlLabel","RadioInput","Radio","children","description","style","className","getRootRef","titleAfter","getRef","labelProps","hoverMode","activeMode","hasHover","hasActive","focusVisibleMode","restProps","disabled","Input"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,gBAAgB,QAAQ,0CAAuC;AACxE,SAASC,qBAAqB,QAAQ,qEAAkE;AAExG,SAASC,UAAU,QAAQ,6BAA0B;AAyBrD;;CAEC,GACD,OAAO,MAAMC,QAAQ;QAAC,EACpBC,QAAQ,EACRC,WAAW,EACXC,KAAK,EACLC,SAAS,EACTC,UAAU,EACVC,UAAU,EACVC,MAAM,EACNC,UAAU,EACVC,SAAS,EACTC,UAAU,EACVC,QAAQ,EACRC,SAAS,EACTC,gBAAgB,EAEL,WADRC;QAbHb;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,MAAChB;QACCM,OAAOA;QACPC,WAAWR,8BAAwBQ;QACnCW,UAAUD,UAAUC,QAAQ;QAC5BV,YAAYA;QACZI,WAAWA;QACXC,YAAYA;QACZC,UAAUA;QACVC,WAAWA;QACXC,kBAAkBA;OACdL;;0BAEJ,KAACT,oDAAee;gBAAWP,QAAQA;;0BACnC,KAACT;gBAAsBQ,YAAYA;gBAAYJ,aAAaA;0BACzDD;;;;AAIT,EAAE;AAEFD,MAAMgB,KAAK,GAAGjB"}
+{"version":3,"sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useMergeProps } from '../../hooks/useMergeProps';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { HasDataAttribute, HasRootRef } from '../../types';\nimport { SelectionControl } from '../SelectionControl/SelectionControl';\nimport { SelectionControlLabel } from '../SelectionControl/SelectionControlLabel/SelectionControlLabel';\nimport type { TappableOmitProps } from '../Tappable/Tappable';\nimport { RadioInput } from './RadioInput/RadioInput';\nimport styles from './Radio.module.css';\n\nconst warn = warnOnce('Radio');\n\nexport interface RadioProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    Pick<\n      TappableOmitProps,\n      'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode'\n    > {\n  /**\n   * Свойства, которые можно прокинуть внутрь компонента:\n   * - `root`: свойства для прокидывания в корень компонента;\n   * - `input`: свойства для прокидывания в скрытый `input`.\n   */\n  slotProps?: {\n    root?: Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'children'> &\n      HasRootRef<HTMLLabelElement> &\n      HasDataAttribute;\n    input?: React.ComponentProps<'input'> & HasRootRef<HTMLInputElement> & HasDataAttribute;\n  };\n  /**\n   * @deprecated Since 7.9.0. Вместо этого используйте `slotProps={ input: { getRootRef: ... } }`.\n   */\n  getRef?: React.Ref<HTMLInputElement>;\n  /**\n   * Дополнительное описание под основным текстом.\n   */\n  description?: React.ReactNode;\n  /**\n   * Элемент после основного текста.\n   */\n  titleAfter?: React.ReactNode;\n  /**\n   * @deprecated Since 7.9.0. Вместо этого используйте `slotProps={ root: {...} }`.\n   *\n   * Позволяет передавать data-* аттрибуты элементу label.\n   **/\n  labelProps?: HasDataAttribute;\n}\n\n/**\n * @see https://vkui.io/components/radio\n */\nexport const Radio = ({\n  children,\n  description,\n  style,\n  className,\n  getRootRef,\n  titleAfter,\n  getRef,\n  labelProps,\n  hoverMode,\n  activeMode,\n  hasHover,\n  hasActive,\n  focusVisibleMode,\n\n  slotProps,\n  ...restProps\n}: RadioProps): React.ReactNode => {\n  /* istanbul ignore if: не проверяем в тестах */\n  if (process.env.NODE_ENV === 'development') {\n    if (labelProps) {\n      warn('Свойство `labelProps` устаревшее, используйте `slotProps={ root: {...} }`');\n    }\n    if (getRef) {\n      warn('Свойство `getRef` устаревшее, используйте `slotProps={ input: { getRootRef: ... } }`');\n    }\n  }\n\n  const rootProps = useMergeProps(\n    {\n      style,\n      className: classNames(styles.host, className),\n      getRootRef,\n      ...labelProps,\n    },\n    slotProps?.root,\n  );\n\n  const inputRest = useMergeProps({ getRootRef: getRef, ...restProps }, slotProps?.input);\n\n  return (\n    <SelectionControl\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasHover={hasHover}\n      hasActive={hasActive}\n      focusVisibleMode={focusVisibleMode}\n      disabled={inputRest.disabled}\n      {...rootProps}\n    >\n      <RadioInput slotProps={{ input: inputRest }} />\n      <SelectionControlLabel titleAfter={titleAfter} description={description}>\n        {children}\n      </SelectionControlLabel>\n    </SelectionControl>\n  );\n};\n\nRadio.Input = RadioInput;\n"],"names":["React","classNames","useMergeProps","warnOnce","SelectionControl","SelectionControlLabel","RadioInput","warn","Radio","children","description","style","className","getRootRef","titleAfter","getRef","labelProps","hoverMode","activeMode","hasHover","hasActive","focusVisibleMode","slotProps","restProps","process","env","NODE_ENV","rootProps","root","inputRest","input","disabled","Input"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,QAAQ,QAAQ,wBAAqB;AAE9C,SAASC,gBAAgB,QAAQ,0CAAuC;AACxE,SAASC,qBAAqB,QAAQ,qEAAkE;AAExG,SAASC,UAAU,QAAQ,6BAA0B;AAGrD,MAAMC,OAAOJ,SAAS;AAwCtB;;CAEC,GACD,OAAO,MAAMK,QAAQ;QAAC,EACpBC,QAAQ,EACRC,WAAW,EACXC,KAAK,EACLC,SAAS,EACTC,UAAU,EACVC,UAAU,EACVC,MAAM,EACNC,UAAU,EACVC,SAAS,EACTC,UAAU,EACVC,QAAQ,EACRC,SAAS,EACTC,gBAAgB,EAEhBC,SAAS,EAEE,WADRC;QAfHd;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QAEAC;;IAGA,6CAA6C,GAC7C,IAAIE,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIV,YAAY;YACdT,KAAK;QACP;QACA,IAAIQ,QAAQ;YACVR,KAAK;QACP;IACF;IAEA,MAAMoB,YAAYzB,cAChB;QACES;QACAC,WAAWX,8BAAwBW;QACnCC;OACGG,aAELM,sBAAAA,gCAAAA,UAAWM,IAAI;IAGjB,MAAMC,YAAY3B,cAAc;QAAEW,YAAYE;OAAWQ,YAAaD,sBAAAA,gCAAAA,UAAWQ,KAAK;IAEtF,qBACE,MAAC1B;QACCa,WAAWA;QACXC,YAAYA;QACZC,UAAUA;QACVC,WAAWA;QACXC,kBAAkBA;QAClBU,UAAUF,UAAUE,QAAQ;OACxBJ;;0BAEJ,KAACrB;gBAAWgB,WAAW;oBAAEQ,OAAOD;gBAAU;;0BAC1C,KAACxB;gBAAsBS,YAAYA;gBAAYJ,aAAaA;0BACzDD;;;;AAIT,EAAE;AAEFD,MAAMwB,KAAK,GAAG1B"}