@vkontakte/vkui 7.8.2 → 7.9.1

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

@@ -1,6 +1,19 @@
 import * as React from 'react';
-import type { HasRef, HasRootRef } from '../../../types';
-export interface RadioInputProps extends Omit<React.ComponentProps<'input'>, 'type'>, HasRootRef<HTMLLabelElement>, HasRef<HTMLInputElement> {
+import type { HasDataAttribute, HasRootRef } from '../../../types';
+export interface RadioInputProps extends Omit<React.ComponentProps<'input'>, 'type'>, HasRootRef<HTMLLabelElement> {
+    /**
+     * Свойства, которые можно прокинуть внутрь компонента:
+     * - `root`: свойства для прокидывания в корень компонента;
+     * - `input`: свойства для прокидывания в скрытый `input`.
+     */
+    slotProps?: {
+        root?: Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'children'> & HasRootRef<HTMLLabelElement> & HasDataAttribute;
+        input?: Omit<React.ComponentProps<'input'>, 'type'> & HasRootRef<HTMLInputElement> & HasDataAttribute;
+    };
+    /**
+     * @deprecated Since 7.9.0. Вместо этого используйте `slotProps={ input: { getRootRef: ... } }`.
+     */
+    getRef?: React.Ref<HTMLInputElement>;
 }
-export declare function RadioInput({ className, style, getRootRef, getRef, ...restProps }: RadioInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function RadioInput({ className, style, getRootRef, getRef, slotProps, ...restProps }: RadioInputProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=RadioInput.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"RadioInput.d.ts","sourceRoot":"","sources":["../../../../src/components/Radio/RadioInput/RadioInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAgCzD,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,EACjD,UAAU,CAAC,gBAAgB,CAAC,EAC5B,MAAM,CAAC,gBAAgB,CAAC;CAAG;AAE/B,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,KAAK,EACL,UAAU,EACV,MAAM,EACN,GAAG,SAAS,EACb,EAAE,eAAe,2CAajB"}
+{"version":3,"file":"RadioInput.d.ts","sourceRoot":"","sources":["../../../../src/components/Radio/RadioInput/RadioInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAkCnE,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,EACjD,UAAU,CAAC,gBAAgB,CAAC;IAC9B;;;;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,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,GACjD,UAAU,CAAC,gBAAgB,CAAC,GAC5B,gBAAgB,CAAC;KACpB,CAAC;IACF;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;CACtC;AAED,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,KAAK,EACL,UAAU,EACV,MAAM,EACN,SAAS,EACT,GAAG,SAAS,EACb,EAAE,eAAe,2CAejB"}

package/dist/components/Radio/RadioInput/RadioInput.js

@@ -4,9 +4,12 @@ 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 { AdaptiveIconRenderer } from "../../AdaptiveIconRenderer/AdaptiveIconRenderer.js";
 import { RootComponent } from "../../RootComponent/RootComponent.js";
 import { VisuallyHidden } from "../../VisuallyHidden/VisuallyHidden.js";
+const warn = warnOnce('Radio.Input');
 function RadioIcon24(props) {
     return /*#__PURE__*/ _jsxs("svg", _object_spread_props(_object_spread({
         xmlns: "http://www.w3.org/2000/svg",
@@ -69,26 +72,34 @@ function RadioIcon() {
     });
 }
 export function RadioInput(_param) {
-    var { className, style, getRootRef, getRef } = _param, restProps = _object_without_properties(_param, [
+    var { className, style, getRootRef, getRef, slotProps } = _param, restProps = _object_without_properties(_param, [
         "className",
         "style",
         "getRootRef",
-        "getRef"
+        "getRef",
+        "slotProps"
     ]);
-    return /*#__PURE__*/ _jsxs(RootComponent, {
-        className: className,
-        style: style,
-        getRootRef: getRootRef,
+    if (process.env.NODE_ENV === 'development' && getRef) {
+        warn('Свойство `getRef` устаревшее, используйте `slotProps={ input: { getRootRef: ... } }`');
+    }
+    const rootRest = useMergeProps({
+        className,
+        style,
+        getRootRef
+    }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root);
+    const inputProps = useMergeProps(_object_spread({
+        getRootRef: getRef
+    }, restProps), slotProps === null || slotProps === void 0 ? void 0 : slotProps.input);
+    return /*#__PURE__*/ _jsxs(RootComponent, _object_spread_props(_object_spread({}, rootRest), {
         children: [
-            /*#__PURE__*/ _jsx(VisuallyHidden, _object_spread_props(_object_spread({}, restProps), {
+            /*#__PURE__*/ _jsx(VisuallyHidden, _object_spread({
                 Component: "input",
                 type: "radio",
-                baseClassName: "vkuiRadioInput__input",
-                getRootRef: getRef
-            })),
+                baseClassName: "vkuiRadioInput__input"
+            }, inputProps)),
             /*#__PURE__*/ _jsx(RadioIcon, {})
         ]
-    });
+    }));
 }
 
 //# sourceMappingURL=RadioInput.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Radio/RadioInput/RadioInput.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { HasRef, HasRootRef } from '../../../types';\nimport { AdaptiveIconRenderer } from '../../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport styles from './RadioInput.module.css';\n\nfunction RadioIcon24(props: React.ComponentProps<'svg'>) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" aria-hidden {...props}>\n      <circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"2\" fill=\"none\" />\n      <circle cx=\"12\" cy=\"12\" r=\"7\" className={styles.pin} fill=\"currentColor\" />\n    </svg>\n  );\n}\n\nfunction RadioIcon20(props: React.ComponentProps<'svg'>) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" aria-hidden {...props}>\n      <circle cx=\"10\" cy=\"10\" r=\"7.75\" stroke=\"currentColor\" strokeWidth=\"1.5\" fill=\"none\" />\n      <circle cx=\"10\" cy=\"10\" r=\"5.5\" className={styles.pin} fill=\"currentColor\" />\n    </svg>\n  );\n}\n\nfunction RadioIcon() {\n  return (\n    <div className={styles.icon}>\n      <AdaptiveIconRenderer IconCompact={RadioIcon20} IconRegular={RadioIcon24} />\n    </div>\n  );\n}\n\nexport interface RadioInputProps\n  extends Omit<React.ComponentProps<'input'>, 'type'>,\n    HasRootRef<HTMLLabelElement>,\n    HasRef<HTMLInputElement> {}\n\nexport function RadioInput({\n  className,\n  style,\n  getRootRef,\n  getRef,\n  ...restProps\n}: RadioInputProps) {\n  return (\n    <RootComponent className={className} style={style} getRootRef={getRootRef}>\n      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        type=\"radio\"\n        baseClassName={styles.input}\n        getRootRef={getRef}\n      />\n      <RadioIcon />\n    </RootComponent>\n  );\n}\n"],"names":["React","AdaptiveIconRenderer","RootComponent","VisuallyHidden","RadioIcon24","props","svg","xmlns","width","height","aria-hidden","circle","cx","cy","r","stroke","strokeWidth","fill","className","RadioIcon20","RadioIcon","div","IconCompact","IconRegular","RadioInput","style","getRootRef","getRef","restProps","Component","type","baseClassName"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,oBAAoB,QAAQ,qDAAkD;AACvF,SAASC,aAAa,QAAQ,uCAAoC;AAClE,SAASC,cAAc,QAAQ,yCAAsC;AAGrE,SAASC,YAAYC,KAAkC;IACrD,qBACE,MAACC;QAAIC,OAAM;QAA6BC,OAAM;QAAKC,QAAO;QAAKC,aAAW;OAAKL;;0BAC7E,KAACM;gBAAOC,IAAG;gBAAKC,IAAG;gBAAKC,GAAE;gBAAKC,QAAO;gBAAeC,aAAY;gBAAIC,MAAK;;0BAC1E,KAACN;gBAAOC,IAAG;gBAAKC,IAAG;gBAAKC,GAAE;gBAAII,SAAS;gBAAcD,MAAK;;;;AAGhE;AAEA,SAASE,YAAYd,KAAkC;IACrD,qBACE,MAACC;QAAIC,OAAM;QAA6BC,OAAM;QAAKC,QAAO;QAAKC,aAAW;OAAKL;;0BAC7E,KAACM;gBAAOC,IAAG;gBAAKC,IAAG;gBAAKC,GAAE;gBAAOC,QAAO;gBAAeC,aAAY;gBAAMC,MAAK;;0BAC9E,KAACN;gBAAOC,IAAG;gBAAKC,IAAG;gBAAKC,GAAE;gBAAMI,SAAS;gBAAcD,MAAK;;;;AAGlE;AAEA,SAASG;IACP,qBACE,KAACC;QAAIH,SAAS;kBACZ,cAAA,KAACjB;YAAqBqB,aAAaH;YAAaI,aAAanB;;;AAGnE;AAOA,OAAO,SAASoB,WAAW;QAAA,EACzBN,SAAS,EACTO,KAAK,EACLC,UAAU,EACVC,MAAM,EAEU,GANS,QAKtBC,uCALsB;QACzBV;QACAO;QACAC;QACAC;;IAGA,qBACE,MAACzB;QAAcgB,WAAWA;QAAWO,OAAOA;QAAOC,YAAYA;;0BAC7D,KAACvB,wDACKyB;gBACJC,WAAU;gBACVC,MAAK;gBACLC,aAAa;gBACbL,YAAYC;;0BAEd,KAACP;;;AAGP"}
+{"version":3,"sources":["../../../../src/components/Radio/RadioInput/RadioInput.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 { AdaptiveIconRenderer } from '../../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport styles from './RadioInput.module.css';\n\nconst warn = warnOnce('Radio.Input');\n\nfunction RadioIcon24(props: React.ComponentProps<'svg'>) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" aria-hidden {...props}>\n      <circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"2\" fill=\"none\" />\n      <circle cx=\"12\" cy=\"12\" r=\"7\" className={styles.pin} fill=\"currentColor\" />\n    </svg>\n  );\n}\n\nfunction RadioIcon20(props: React.ComponentProps<'svg'>) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" aria-hidden {...props}>\n      <circle cx=\"10\" cy=\"10\" r=\"7.75\" stroke=\"currentColor\" strokeWidth=\"1.5\" fill=\"none\" />\n      <circle cx=\"10\" cy=\"10\" r=\"5.5\" className={styles.pin} fill=\"currentColor\" />\n    </svg>\n  );\n}\n\nfunction RadioIcon() {\n  return (\n    <div className={styles.icon}>\n      <AdaptiveIconRenderer IconCompact={RadioIcon20} IconRegular={RadioIcon24} />\n    </div>\n  );\n}\n\nexport interface RadioInputProps\n  extends Omit<React.ComponentProps<'input'>, 'type'>,\n    HasRootRef<HTMLLabelElement> {\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.ComponentProps<'input'>, 'type'> &\n      HasRootRef<HTMLInputElement> &\n      HasDataAttribute;\n  };\n  /**\n   * @deprecated Since 7.9.0. Вместо этого используйте `slotProps={ input: { getRootRef: ... } }`.\n   */\n  getRef?: React.Ref<HTMLInputElement>;\n}\n\nexport function RadioInput({\n  className,\n  style,\n  getRootRef,\n  getRef,\n  slotProps,\n  ...restProps\n}: RadioInputProps) {\n  if (process.env.NODE_ENV === 'development' && getRef) {\n    warn('Свойство `getRef` устаревшее, используйте `slotProps={ input: { getRootRef: ... } }`');\n  }\n\n  const rootRest = useMergeProps({ className, style, getRootRef }, slotProps?.root);\n\n  const inputProps = useMergeProps({ getRootRef: getRef, ...restProps }, slotProps?.input);\n\n  return (\n    <RootComponent {...rootRest}>\n      <VisuallyHidden Component=\"input\" type=\"radio\" baseClassName={styles.input} {...inputProps} />\n      <RadioIcon />\n    </RootComponent>\n  );\n}\n"],"names":["React","useMergeProps","warnOnce","AdaptiveIconRenderer","RootComponent","VisuallyHidden","warn","RadioIcon24","props","svg","xmlns","width","height","aria-hidden","circle","cx","cy","r","stroke","strokeWidth","fill","className","RadioIcon20","RadioIcon","div","IconCompact","IconRegular","RadioInput","style","getRootRef","getRef","slotProps","restProps","process","env","NODE_ENV","rootRest","root","inputProps","input","Component","type","baseClassName"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,kCAA+B;AAC7D,SAASC,QAAQ,QAAQ,2BAAwB;AAEjD,SAASC,oBAAoB,QAAQ,qDAAkD;AACvF,SAASC,aAAa,QAAQ,uCAAoC;AAClE,SAASC,cAAc,QAAQ,yCAAsC;AAGrE,MAAMC,OAAOJ,SAAS;AAEtB,SAASK,YAAYC,KAAkC;IACrD,qBACE,MAACC;QAAIC,OAAM;QAA6BC,OAAM;QAAKC,QAAO;QAAKC,aAAW;OAAKL;;0BAC7E,KAACM;gBAAOC,IAAG;gBAAKC,IAAG;gBAAKC,GAAE;gBAAKC,QAAO;gBAAeC,aAAY;gBAAIC,MAAK;;0BAC1E,KAACN;gBAAOC,IAAG;gBAAKC,IAAG;gBAAKC,GAAE;gBAAII,SAAS;gBAAcD,MAAK;;;;AAGhE;AAEA,SAASE,YAAYd,KAAkC;IACrD,qBACE,MAACC;QAAIC,OAAM;QAA6BC,OAAM;QAAKC,QAAO;QAAKC,aAAW;OAAKL;;0BAC7E,KAACM;gBAAOC,IAAG;gBAAKC,IAAG;gBAAKC,GAAE;gBAAOC,QAAO;gBAAeC,aAAY;gBAAMC,MAAK;;0BAC9E,KAACN;gBAAOC,IAAG;gBAAKC,IAAG;gBAAKC,GAAE;gBAAMI,SAAS;gBAAcD,MAAK;;;;AAGlE;AAEA,SAASG;IACP,qBACE,KAACC;QAAIH,SAAS;kBACZ,cAAA,KAAClB;YAAqBsB,aAAaH;YAAaI,aAAanB;;;AAGnE;AAwBA,OAAO,SAASoB,WAAW;QAAA,EACzBN,SAAS,EACTO,KAAK,EACLC,UAAU,EACVC,MAAM,EACNC,SAAS,EAEO,GAPS,QAMtBC,uCANsB;QACzBX;QACAO;QACAC;QACAC;QACAC;;IAGA,IAAIE,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBAAiBL,QAAQ;QACpDxB,KAAK;IACP;IAEA,MAAM8B,WAAWnC,cAAc;QAAEoB;QAAWO;QAAOC;IAAW,GAAGE,sBAAAA,gCAAAA,UAAWM,IAAI;IAEhF,MAAMC,aAAarC,cAAc;QAAE4B,YAAYC;OAAWE,YAAaD,sBAAAA,gCAAAA,UAAWQ,KAAK;IAEvF,qBACE,MAACnC,uDAAkBgC;;0BACjB,KAAC/B;gBAAemC,WAAU;gBAAQC,MAAK;gBAAQC,aAAa;eAAoBJ;0BAChF,KAACf;;;AAGP"}

package/dist/components/Search/Search.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 IconButtonProps } from '../IconButton/IconButton';
 export type RenderIconButtonFn = (icon: React.ReactNode, props?: Partial<IconButtonProps> & HasDataAttribute) => React.ReactElement;
-export interface SearchProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRootRef<HTMLDivElement>, HasRef<HTMLInputElement> {
+export interface SearchProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRootRef<HTMLDivElement> {
+    /**
+     * @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;
+    };
     /**
      * Only iOS. Текст кнопки "отмена", которая чистит текстовое поле и убирает фокус.
      */
@@ -59,5 +72,5 @@ export interface SearchProps extends React.InputHTMLAttributes<HTMLInputElement>
 /**
  * @see https://vkui.io/components/search
  */
-export declare const Search: ({ id: idProp, before, className, placeholder, after, getRef, icon: iconProp, onIconClick, style, autoComplete, onChange, iconLabel, clearLabel, clearButtonTestId, noPadding, getRootRef, findButtonText, findButtonTestId, onFindButtonClick, hideClearButton, ...inputProps }: SearchProps) => React.ReactNode;
+export declare const Search: ({ className, getRootRef, style, placeholder: placeholderProp, before, after, getRef, icon: iconProp, onIconClick, autoComplete: autoCompleteProp, iconLabel, clearLabel, clearButtonTestId, noPadding, findButtonText, findButtonTestId, onFindButtonClick, hideClearButton, slotProps, ...inputProps }: SearchProps) => React.ReactNode;
 //# sourceMappingURL=Search.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../../../src/components/Search/Search.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAExE,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAK5E,MAAM,MAAM,kBAAkB,GAAG,CAC/B,IAAI,EAAE,KAAK,CAAC,SAAS,EACrB,KAAK,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,GAAG,gBAAgB,KAChD,KAAK,CAAC,YAAY,CAAC;AAExB,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACjD,UAAU,CAAC,cAAc,CAAC,EAC1B,MAAM,CAAC,gBAAgB,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,QAAQ,EAAE,kBAAkB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAC7E;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC;IACrD;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;IACzD;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED;;GAEG;AACH,eAAO,MAAM,MAAM,GAAI,iRAsBpB,WAAW,KAAG,KAAK,CAAC,SA0LtB,CAAC"}
+{"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../../../src/components/Search/Search.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEhE,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAQ5E,MAAM,MAAM,kBAAkB,GAAG,CAC/B,IAAI,EAAE,KAAK,CAAC,SAAS,EACrB,KAAK,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,GAAG,gBAAgB,KAChD,KAAK,CAAC,YAAY,CAAC;AAExB,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACjD,UAAU,CAAC,cAAc,CAAC;IAC5B;;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;IACF;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,QAAQ,EAAE,kBAAkB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAC7E;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC;IACrD;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;IACzD;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED;;GAEG;AACH,eAAO,MAAM,MAAM,GAAI,ySAsBpB,WAAW,KAAG,KAAK,CAAC,SA0NtB,CAAC"}

package/dist/components/Search/Search.js

@@ -11,47 +11,72 @@ import { useAdaptivityConditionalRender } from "../../hooks/useAdaptivityConditi
 import { useBooleanState } from "../../hooks/useBooleanState.js";
 import { useConfigDirection } from "../../hooks/useConfigDirection.js";
 import { useExternRef } from "../../hooks/useExternRef.js";
+import { useMergeProps } from "../../hooks/useMergeProps.js";
 import { useNativeFormResetListener } from "../../hooks/useNativeFormResetListener.js";
 import { usePlatform } from "../../hooks/usePlatform.js";
 import { callMultiple } from "../../lib/callMultiple.js";
 import { touchEnabled } from "../../lib/touch/index.js";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect.js";
+import { warnOnce } from "../../lib/warnOnce.js";
 import { Button } from "../Button/Button.js";
 import { IconButton } from "../IconButton/IconButton.js";
+import { RootComponent } from "../RootComponent/RootComponent.js";
 import { Headline } from "../Typography/Headline/Headline.js";
 import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
+const warn = warnOnce('Search');
 /**
  * @see https://vkui.io/components/search
  */ export const Search = (_param)=>{
-    var { id: idProp, before = /*#__PURE__*/ _jsx(Icon16SearchOutline, {}), className, placeholder = 'Поиск', after = 'Отмена', getRef, icon: iconProp, onIconClick, style, autoComplete = 'off', onChange, iconLabel, clearLabel = 'Очистить', clearButtonTestId, noPadding, getRootRef, findButtonText = 'Найти', findButtonTestId, onFindButtonClick, hideClearButton } = _param, inputProps = _object_without_properties(_param, [
-        "id",
-        "before",
+    var { className, getRootRef, style, placeholder: placeholderProp = 'Поиск', before = /*#__PURE__*/ _jsx(Icon16SearchOutline, {}), after = 'Отмена', getRef, icon: iconProp, onIconClick, autoComplete: autoCompleteProp = 'off', iconLabel, clearLabel = 'Очистить', clearButtonTestId, noPadding, findButtonText = 'Найти', findButtonTestId, onFindButtonClick, hideClearButton, slotProps } = _param, inputProps = _object_without_properties(_param, [
         "className",
+        "getRootRef",
+        "style",
         "placeholder",
+        "before",
         "after",
         "getRef",
         "icon",
         "onIconClick",
-        "style",
         "autoComplete",
-        "onChange",
         "iconLabel",
         "clearLabel",
         "clearButtonTestId",
         "noPadding",
-        "getRootRef",
         "findButtonText",
         "findButtonTestId",
         "onFindButtonClick",
-        "hideClearButton"
+        "hideClearButton",
+        "slotProps"
     ]);
+    /* istanbul ignore if: не проверяем в тестах */ if (process.env.NODE_ENV === 'development' && getRef) {
+        warn('Свойство `getRef` устаревшее, используйте `slotProps={ input: { getRootRef: ... } }`');
+    }
     const direction = useConfigDirection();
     const isRtl = direction === 'rtl';
-    const inputRef = useExternRef(getRef);
+    const rootRest = useMergeProps({
+        className,
+        style,
+        getRootRef
+    }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root);
+    const _useMergeProps = useMergeProps(_object_spread({
+        getRootRef: getRef,
+        placeholder: placeholderProp,
+        autoComplete: autoCompleteProp,
+        className: "vkuiSearch__nativeInput"
+    }, inputProps), slotProps === null || slotProps === void 0 ? void 0 : slotProps.input), { id, placeholder, onChange, autoComplete, getRootRef: getInputRef, onFocus: onInputFocus, onBlur: onInputBlur } = _useMergeProps, inputRest = _object_without_properties(_useMergeProps, [
+        "id",
+        "placeholder",
+        "onChange",
+        "autoComplete",
+        "getRootRef",
+        "onFocus",
+        "onBlur"
+    ]);
+    const inputRef = useExternRef(getInputRef);
     const { value: isFocused, setTrue: setFocusedTrue, setFalse: setFocusedFalse } = useBooleanState(false);
     const generatedId = React.useId();
-    const inputId = idProp ? idProp : `search-${generatedId}`;
-    const [hasValue, setHasValue] = React.useState(()=>Boolean(inputProps.value || inputProps.defaultValue));
+    const inputId = id ? id : `search-${generatedId}`;
+    const [hasValue, setHasValue] = React.useState(()=>Boolean(inputRest.value || inputRest.defaultValue));
     const checkHasValue = (e)=>setHasValue(Boolean(e.currentTarget.value));
     const { sizeY = 'none' } = useAdaptivity();
     const { sizeY: adaptiveSizeY } = useAdaptivityConditionalRender();
@@ -59,11 +84,11 @@ import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
     const hasAfter = platform === 'ios' && hasReactNode(after);
     const onFocus = (e)=>{
         setFocusedTrue();
-        inputProps.onFocus && inputProps.onFocus(e);
+        onInputFocus && onInputFocus(e);
     };
     const onBlur = (e)=>{
         setFocusedFalse();
-        inputProps.onBlur && inputProps.onBlur(e);
+        onInputBlur && onInputBlur(e);
     };
     const onCancel = React.useCallback(()=>{
         var _Object_getOwnPropertyDescriptor, _inputRef_current;
@@ -92,14 +117,14 @@ import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
         onCancel
     ]);
     useIsomorphicLayoutEffect(()=>{
-        if (inputProps.value !== undefined) {
-            setHasValue(Boolean(inputProps.value));
+        if (inputRest.value !== undefined) {
+            setHasValue(Boolean(inputRest.value));
         }
     }, [
-        inputProps.value
+        inputRest.value
     ]);
     useNativeFormResetListener(inputRef, ()=>{
-        setHasValue(Boolean(inputProps.defaultValue));
+        setHasValue(Boolean(inputRest.defaultValue));
     });
     const renderIconButton = (icon, props = {})=>/*#__PURE__*/ _jsxs(IconButton, _object_spread_props(_object_spread({
             hoverMode: "opacity",
@@ -117,10 +142,9 @@ import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
             ]
         }));
     const showControls = Boolean(iconProp || !hideClearButton || adaptiveSizeY.compact && onFindButtonClick);
-    return /*#__PURE__*/ _jsxs("div", {
-        className: classNames('vkuiInternalSearch', "vkuiSearch__host", sizeY === 'none' && "vkuiSearch__sizeYNone", sizeY === 'compact' && "vkuiSearch__sizeYCompact", isFocused && "vkuiSearch__focused", hasValue && "vkuiSearch__hasValue", hasAfter && "vkuiSearch__hasAfter", iconProp && "vkuiSearch__hasIcon", inputProps.disabled && "vkuiSearch__disabled", !noPadding && "vkuiSearch__withPadding", isRtl && "vkuiSearch__rtl", className),
-        ref: getRootRef,
-        style: style,
+    return /*#__PURE__*/ _jsxs(RootComponent, _object_spread_props(_object_spread({
+        baseClassName: classNames('vkuiInternalSearch', "vkuiSearch__host", sizeY === 'none' && "vkuiSearch__sizeYNone", sizeY === 'compact' && "vkuiSearch__sizeYCompact", isFocused && "vkuiSearch__focused", hasValue && "vkuiSearch__hasValue", hasAfter && "vkuiSearch__hasAfter", iconProp && "vkuiSearch__hasIcon", inputRest.disabled && "vkuiSearch__disabled", !noPadding && "vkuiSearch__withPadding", isRtl && "vkuiSearch__rtl")
+    }, rootRest), {
         children: [
             /*#__PURE__*/ _jsxs("div", {
                 className: "vkuiSearch__field",
@@ -134,21 +158,19 @@ import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
                         className: "vkuiSearch__input",
                         children: [
                             before,
-                            /*#__PURE__*/ _jsx(Headline, _object_spread_props(_object_spread({
+                            /*#__PURE__*/ _jsx(Headline, _object_spread({
                                 Component: "input",
                                 type: "search",
                                 level: "1",
-                                weight: "3"
-                            }, inputProps), {
+                                weight: "3",
                                 id: inputId,
                                 placeholder: placeholder,
                                 autoComplete: autoComplete,
                                 getRootRef: inputRef,
-                                className: "vkuiSearch__nativeInput",
+                                onChange: callMultiple(onChange, checkHasValue),
                                 onFocus: onFocus,
-                                onBlur: onBlur,
-                                onChange: callMultiple(onChange, checkHasValue)
-                            }))
+                                onBlur: onBlur
+                            }, inputRest))
                         ]
                     }),
                     showControls && /*#__PURE__*/ _jsxs("div", {
@@ -202,7 +224,7 @@ import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
                 })
             })
         ]
-    });
+    }));
 };
 
 //# sourceMappingURL=Search.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Search/Search.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon16Clear, Icon16SearchOutline, Icon24Cancel } from '@vkontakte/icons';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { useBooleanState } from '../../hooks/useBooleanState';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useNativeFormResetListener } from '../../hooks/useNativeFormResetListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { touchEnabled } from '../../lib/touch';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HasDataAttribute, HasRef, HasRootRef } from '../../types';\nimport { Button } from '../Button/Button';\nimport { IconButton, type IconButtonProps } from '../IconButton/IconButton';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Search.module.css';\n\nexport type RenderIconButtonFn = (\n  icon: React.ReactNode,\n  props?: Partial<IconButtonProps> & HasDataAttribute,\n) => React.ReactElement;\n\nexport interface SearchProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLInputElement> {\n  /**\n   * Only iOS. Текст кнопки \"отмена\", которая чистит текстовое поле и убирает фокус.\n   */\n  after?: React.ReactNode;\n  /**\n   * Контент, отображаемый перед полем ввода.\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка поиска. Может быть React-элементом или функцией, возвращающей элемент.\n   */\n  icon?: React.ReactNode | ((renderFn: RenderIconButtonFn) => React.ReactNode);\n  /**\n   * Обработчик нажатия на иконку поиска.\n   */\n  onIconClick?: React.PointerEventHandler<HTMLElement>;\n  /**\n   * Значение поля ввода по умолчанию.\n   */\n  defaultValue?: string;\n  /**\n   * Текст для скринридеров, описывающий иконку поиска.\n   */\n  iconLabel?: string;\n  /**\n   * Текст для скринридеров, описывающий кнопку очистки.\n   */\n  clearLabel?: string;\n  /**\n   * Передает атрибут `data-testid` для кнопки очистки.\n   */\n  clearButtonTestId?: string;\n  /**\n   * Удаляет отступы у компонента.\n   */\n  noPadding?: boolean;\n  /**\n   * Текст для кнопки Найти.\n   */\n  findButtonText?: string;\n  /**\n   * Обработчик, при нажатии на кнопку \"Найти\".\n   */\n  onFindButtonClick?: React.MouseEventHandler<HTMLElement>;\n  /**\n   * Передает атрибут `data-testid` для кнопки поиска.\n   */\n  findButtonTestId?: string;\n  /**\n   * Скрывает кнопку очистки.\n   */\n  hideClearButton?: boolean;\n}\n\n/**\n * @see https://vkui.io/components/search\n */\nexport const Search = ({\n  id: idProp,\n  before = <Icon16SearchOutline />,\n  className,\n  placeholder = 'Поиск',\n  after = 'Отмена',\n  getRef,\n  icon: iconProp,\n  onIconClick,\n  style,\n  autoComplete = 'off',\n  onChange,\n  iconLabel,\n  clearLabel = 'Очистить',\n  clearButtonTestId,\n  noPadding,\n  getRootRef,\n  findButtonText = 'Найти',\n  findButtonTestId,\n  onFindButtonClick,\n  hideClearButton,\n  ...inputProps\n}: SearchProps): React.ReactNode => {\n  const direction = useConfigDirection();\n  const isRtl = direction === 'rtl';\n  const inputRef = useExternRef(getRef);\n  const {\n    value: isFocused,\n    setTrue: setFocusedTrue,\n    setFalse: setFocusedFalse,\n  } = useBooleanState(false);\n  const generatedId = React.useId();\n  const inputId = idProp ? idProp : `search-${generatedId}`;\n\n  const [hasValue, setHasValue] = React.useState<boolean>(() =>\n    Boolean(inputProps.value || inputProps.defaultValue),\n  );\n  const checkHasValue: React.ChangeEventHandler<HTMLInputElement> = (e) =>\n    setHasValue(Boolean(e.currentTarget.value));\n\n  const { sizeY = 'none' } = useAdaptivity();\n  const { sizeY: adaptiveSizeY } = useAdaptivityConditionalRender();\n  const platform = usePlatform();\n\n  const hasAfter = platform === 'ios' && hasReactNode(after);\n\n  const onFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocusedTrue();\n    inputProps.onFocus && inputProps.onFocus(e);\n  };\n\n  const onBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocusedFalse();\n    inputProps.onBlur && inputProps.onBlur(e);\n  };\n\n  const onCancel = React.useCallback(() => {\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n      HTMLInputElement.prototype,\n      'value',\n    )?.set;\n    nativeInputValueSetter?.call(inputRef.current, '');\n\n    const ev2 = new Event('input', { bubbles: true });\n    inputRef.current?.dispatchEvent(ev2);\n  }, [inputRef]);\n\n  const onIconClickStart: React.PointerEventHandler<HTMLElement> = React.useCallback(\n    (e) => onIconClick?.(e),\n    [onIconClick],\n  );\n\n  const onIconCancelClickStart: React.PointerEventHandler<HTMLElement> = React.useCallback(\n    (e) => {\n      e.preventDefault();\n      inputRef.current?.focus();\n      if (touchEnabled()) {\n        onCancel();\n      }\n    },\n    [inputRef, onCancel],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (inputProps.value !== undefined) {\n      setHasValue(Boolean(inputProps.value));\n    }\n  }, [inputProps.value]);\n\n  useNativeFormResetListener(inputRef, () => {\n    setHasValue(Boolean(inputProps.defaultValue));\n  });\n\n  const renderIconButton: RenderIconButtonFn = (icon, props = {}) => (\n    <IconButton\n      hoverMode=\"opacity\"\n      onPointerDown={onIconClickStart}\n      className={styles.icon}\n      onFocus={setFocusedTrue}\n      onBlur={setFocusedFalse}\n      onClick={noop}\n      {...props}\n    >\n      <VisuallyHidden>{iconLabel}</VisuallyHidden>\n      {icon}\n    </IconButton>\n  );\n\n  const showControls = Boolean(\n    iconProp || !hideClearButton || (adaptiveSizeY.compact && onFindButtonClick),\n  );\n\n  return (\n    <div\n      className={classNames(\n        'vkuiInternalSearch',\n        styles.host,\n        sizeY === 'none' && styles.sizeYNone,\n        sizeY === 'compact' && styles.sizeYCompact,\n        isFocused && styles.focused,\n        hasValue && styles.hasValue,\n        hasAfter && styles.hasAfter,\n        iconProp && styles.hasIcon,\n        inputProps.disabled && styles.disabled,\n        !noPadding && styles.withPadding,\n        isRtl && styles.rtl,\n        className,\n      )}\n      ref={getRootRef}\n      style={style}\n    >\n      <div className={styles.field}>\n        <label htmlFor={inputId} className={styles.label}>\n          {placeholder}\n        </label>\n        <div className={styles.input}>\n          {before}\n          <Headline\n            Component=\"input\"\n            type=\"search\"\n            level=\"1\"\n            weight=\"3\"\n            {...inputProps}\n            id={inputId}\n            placeholder={placeholder}\n            autoComplete={autoComplete}\n            getRootRef={inputRef}\n            className={styles.nativeInput}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            onChange={callMultiple(onChange, checkHasValue)}\n          />\n        </div>\n        {showControls && (\n          <div className={styles.controls}>\n            {iconProp &&\n              (typeof iconProp === 'function'\n                ? iconProp(renderIconButton)\n                : renderIconButton(iconProp))}\n            {!hideClearButton && (\n              <IconButton\n                hoverMode=\"opacity\"\n                onPointerDown={onIconCancelClickStart}\n                onClick={onCancel}\n                className={styles.icon}\n                tabIndex={hasValue ? undefined : -1}\n                disabled={inputProps.disabled}\n                data-testid={clearButtonTestId}\n              >\n                <VisuallyHidden>{clearLabel}</VisuallyHidden>\n                {platform === 'ios' ? <Icon16Clear /> : <Icon24Cancel />}\n              </IconButton>\n            )}\n            {adaptiveSizeY.compact && onFindButtonClick && (\n              <Button\n                mode=\"primary\"\n                size=\"m\"\n                className={classNames(styles.findButton, adaptiveSizeY.compact.className)}\n                focusVisibleMode=\"inside\"\n                onClick={onFindButtonClick}\n                tabIndex={hasValue ? undefined : -1}\n                data-testid={findButtonTestId}\n              >\n                {findButtonText}\n              </Button>\n            )}\n          </div>\n        )}\n      </div>\n      {hasAfter && (\n        <div className={styles.after}>\n          <Button\n            mode=\"tertiary\"\n            size=\"m\"\n            focusVisibleMode=\"inside\"\n            hoverMode=\"opacity\"\n            activeMode=\"opacity\"\n            onClick={onCancel}\n            onFocus={setFocusedTrue}\n            onBlur={setFocusedFalse}\n          >\n            <span className={styles.afterTextClip}>{after}</span>\n          </Button>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["React","Icon16Clear","Icon16SearchOutline","Icon24Cancel","classNames","hasReactNode","noop","useAdaptivity","useAdaptivityConditionalRender","useBooleanState","useConfigDirection","useExternRef","useNativeFormResetListener","usePlatform","callMultiple","touchEnabled","useIsomorphicLayoutEffect","Button","IconButton","Headline","VisuallyHidden","Search","id","idProp","before","className","placeholder","after","getRef","icon","iconProp","onIconClick","style","autoComplete","onChange","iconLabel","clearLabel","clearButtonTestId","noPadding","getRootRef","findButtonText","findButtonTestId","onFindButtonClick","hideClearButton","inputProps","direction","isRtl","inputRef","value","isFocused","setTrue","setFocusedTrue","setFalse","setFocusedFalse","generatedId","useId","inputId","hasValue","setHasValue","useState","Boolean","defaultValue","checkHasValue","e","currentTarget","sizeY","adaptiveSizeY","platform","hasAfter","onFocus","onBlur","onCancel","useCallback","Object","nativeInputValueSetter","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","onIconCancelClickStart","preventDefault","focus","undefined","renderIconButton","props","hoverMode","onPointerDown","onClick","showControls","compact","div","disabled","ref","label","htmlFor","Component","type","level","weight","tabIndex","data-testid","mode","size","focusVisibleMode","activeMode","span"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Search/Search.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon16Clear, Icon16SearchOutline, Icon24Cancel } from '@vkontakte/icons';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { useBooleanState } from '../../hooks/useBooleanState';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useMergeProps } from '../../hooks/useMergeProps';\nimport { useNativeFormResetListener } from '../../hooks/useNativeFormResetListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { touchEnabled } from '../../lib/touch';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { HasDataAttribute, HasRootRef } from '../../types';\nimport { Button } from '../Button/Button';\nimport { IconButton, type IconButtonProps } from '../IconButton/IconButton';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Search.module.css';\n\nconst warn = warnOnce('Search');\n\nexport type RenderIconButtonFn = (\n  icon: React.ReactNode,\n  props?: Partial<IconButtonProps> & HasDataAttribute,\n) => React.ReactElement;\n\nexport interface SearchProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLDivElement> {\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   * Only iOS. Текст кнопки \"отмена\", которая чистит текстовое поле и убирает фокус.\n   */\n  after?: React.ReactNode;\n  /**\n   * Контент, отображаемый перед полем ввода.\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка поиска. Может быть React-элементом или функцией, возвращающей элемент.\n   */\n  icon?: React.ReactNode | ((renderFn: RenderIconButtonFn) => React.ReactNode);\n  /**\n   * Обработчик нажатия на иконку поиска.\n   */\n  onIconClick?: React.PointerEventHandler<HTMLElement>;\n  /**\n   * Значение поля ввода по умолчанию.\n   */\n  defaultValue?: string;\n  /**\n   * Текст для скринридеров, описывающий иконку поиска.\n   */\n  iconLabel?: string;\n  /**\n   * Текст для скринридеров, описывающий кнопку очистки.\n   */\n  clearLabel?: string;\n  /**\n   * Передает атрибут `data-testid` для кнопки очистки.\n   */\n  clearButtonTestId?: string;\n  /**\n   * Удаляет отступы у компонента.\n   */\n  noPadding?: boolean;\n  /**\n   * Текст для кнопки Найти.\n   */\n  findButtonText?: string;\n  /**\n   * Обработчик, при нажатии на кнопку \"Найти\".\n   */\n  onFindButtonClick?: React.MouseEventHandler<HTMLElement>;\n  /**\n   * Передает атрибут `data-testid` для кнопки поиска.\n   */\n  findButtonTestId?: string;\n  /**\n   * Скрывает кнопку очистки.\n   */\n  hideClearButton?: boolean;\n}\n\n/**\n * @see https://vkui.io/components/search\n */\nexport const Search = ({\n  className,\n  getRootRef,\n  style,\n  placeholder: placeholderProp = 'Поиск',\n  before = <Icon16SearchOutline />,\n  after = 'Отмена',\n  getRef,\n  icon: iconProp,\n  onIconClick,\n  autoComplete: autoCompleteProp = 'off',\n  iconLabel,\n  clearLabel = 'Очистить',\n  clearButtonTestId,\n  noPadding,\n  findButtonText = 'Найти',\n  findButtonTestId,\n  onFindButtonClick,\n  hideClearButton,\n\n  slotProps,\n  ...inputProps\n}: SearchProps): React.ReactNode => {\n  /* istanbul ignore if: не проверяем в тестах */\n  if (process.env.NODE_ENV === 'development' && getRef) {\n    warn('Свойство `getRef` устаревшее, используйте `slotProps={ input: { getRootRef: ... } }`');\n  }\n\n  const direction = useConfigDirection();\n  const isRtl = direction === 'rtl';\n\n  const rootRest = useMergeProps(\n    {\n      className,\n      style,\n      getRootRef,\n    },\n    slotProps?.root,\n  );\n\n  const {\n    id,\n    placeholder,\n    onChange,\n    autoComplete,\n    getRootRef: getInputRef,\n    onFocus: onInputFocus,\n    onBlur: onInputBlur,\n    ...inputRest\n  } = useMergeProps(\n    {\n      getRootRef: getRef,\n      placeholder: placeholderProp,\n      autoComplete: autoCompleteProp,\n      className: styles.nativeInput,\n      ...inputProps,\n    },\n    slotProps?.input,\n  );\n\n  const inputRef = useExternRef(getInputRef);\n  const {\n    value: isFocused,\n    setTrue: setFocusedTrue,\n    setFalse: setFocusedFalse,\n  } = useBooleanState(false);\n  const generatedId = React.useId();\n  const inputId = id ? id : `search-${generatedId}`;\n\n  const [hasValue, setHasValue] = React.useState<boolean>(() =>\n    Boolean(inputRest.value || inputRest.defaultValue),\n  );\n  const checkHasValue: React.ChangeEventHandler<HTMLInputElement> = (e) =>\n    setHasValue(Boolean(e.currentTarget.value));\n\n  const { sizeY = 'none' } = useAdaptivity();\n  const { sizeY: adaptiveSizeY } = useAdaptivityConditionalRender();\n  const platform = usePlatform();\n\n  const hasAfter = platform === 'ios' && hasReactNode(after);\n\n  const onFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocusedTrue();\n    onInputFocus && onInputFocus(e);\n  };\n\n  const onBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocusedFalse();\n    onInputBlur && onInputBlur(e);\n  };\n\n  const onCancel = React.useCallback(() => {\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n      HTMLInputElement.prototype,\n      'value',\n    )?.set;\n    nativeInputValueSetter?.call(inputRef.current, '');\n\n    const ev2 = new Event('input', { bubbles: true });\n    inputRef.current?.dispatchEvent(ev2);\n  }, [inputRef]);\n\n  const onIconClickStart: React.PointerEventHandler<HTMLElement> = React.useCallback(\n    (e) => onIconClick?.(e),\n    [onIconClick],\n  );\n\n  const onIconCancelClickStart: React.PointerEventHandler<HTMLElement> = React.useCallback(\n    (e) => {\n      e.preventDefault();\n      inputRef.current?.focus();\n      if (touchEnabled()) {\n        onCancel();\n      }\n    },\n    [inputRef, onCancel],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (inputRest.value !== undefined) {\n      setHasValue(Boolean(inputRest.value));\n    }\n  }, [inputRest.value]);\n\n  useNativeFormResetListener(inputRef, () => {\n    setHasValue(Boolean(inputRest.defaultValue));\n  });\n\n  const renderIconButton: RenderIconButtonFn = (icon, props = {}) => (\n    <IconButton\n      hoverMode=\"opacity\"\n      onPointerDown={onIconClickStart}\n      className={styles.icon}\n      onFocus={setFocusedTrue}\n      onBlur={setFocusedFalse}\n      onClick={noop}\n      {...props}\n    >\n      <VisuallyHidden>{iconLabel}</VisuallyHidden>\n      {icon}\n    </IconButton>\n  );\n\n  const showControls = Boolean(\n    iconProp || !hideClearButton || (adaptiveSizeY.compact && onFindButtonClick),\n  );\n\n  return (\n    <RootComponent\n      baseClassName={classNames(\n        'vkuiInternalSearch',\n        styles.host,\n        sizeY === 'none' && styles.sizeYNone,\n        sizeY === 'compact' && styles.sizeYCompact,\n        isFocused && styles.focused,\n        hasValue && styles.hasValue,\n        hasAfter && styles.hasAfter,\n        iconProp && styles.hasIcon,\n        inputRest.disabled && styles.disabled,\n        !noPadding && styles.withPadding,\n        isRtl && styles.rtl,\n      )}\n      {...rootRest}\n    >\n      <div className={styles.field}>\n        <label htmlFor={inputId} className={styles.label}>\n          {placeholder}\n        </label>\n        <div className={styles.input}>\n          {before}\n          <Headline\n            Component=\"input\"\n            type=\"search\"\n            level=\"1\"\n            weight=\"3\"\n            id={inputId}\n            placeholder={placeholder}\n            autoComplete={autoComplete}\n            getRootRef={inputRef}\n            onChange={callMultiple(onChange, checkHasValue)}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            {...inputRest}\n          />\n        </div>\n        {showControls && (\n          <div className={styles.controls}>\n            {iconProp &&\n              (typeof iconProp === 'function'\n                ? iconProp(renderIconButton)\n                : renderIconButton(iconProp))}\n            {!hideClearButton && (\n              <IconButton\n                hoverMode=\"opacity\"\n                onPointerDown={onIconCancelClickStart}\n                onClick={onCancel}\n                className={styles.icon}\n                tabIndex={hasValue ? undefined : -1}\n                disabled={inputProps.disabled}\n                data-testid={clearButtonTestId}\n              >\n                <VisuallyHidden>{clearLabel}</VisuallyHidden>\n                {platform === 'ios' ? <Icon16Clear /> : <Icon24Cancel />}\n              </IconButton>\n            )}\n            {adaptiveSizeY.compact && onFindButtonClick && (\n              <Button\n                mode=\"primary\"\n                size=\"m\"\n                className={classNames(styles.findButton, adaptiveSizeY.compact.className)}\n                focusVisibleMode=\"inside\"\n                onClick={onFindButtonClick}\n                tabIndex={hasValue ? undefined : -1}\n                data-testid={findButtonTestId}\n              >\n                {findButtonText}\n              </Button>\n            )}\n          </div>\n        )}\n      </div>\n      {hasAfter && (\n        <div className={styles.after}>\n          <Button\n            mode=\"tertiary\"\n            size=\"m\"\n            focusVisibleMode=\"inside\"\n            hoverMode=\"opacity\"\n            activeMode=\"opacity\"\n            onClick={onCancel}\n            onFocus={setFocusedTrue}\n            onBlur={setFocusedFalse}\n          >\n            <span className={styles.afterTextClip}>{after}</span>\n          </Button>\n        </div>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","Icon16Clear","Icon16SearchOutline","Icon24Cancel","classNames","hasReactNode","noop","useAdaptivity","useAdaptivityConditionalRender","useBooleanState","useConfigDirection","useExternRef","useMergeProps","useNativeFormResetListener","usePlatform","callMultiple","touchEnabled","useIsomorphicLayoutEffect","warnOnce","Button","IconButton","RootComponent","Headline","VisuallyHidden","warn","Search","className","getRootRef","style","placeholder","placeholderProp","before","after","getRef","icon","iconProp","onIconClick","autoComplete","autoCompleteProp","iconLabel","clearLabel","clearButtonTestId","noPadding","findButtonText","findButtonTestId","onFindButtonClick","hideClearButton","slotProps","inputProps","process","env","NODE_ENV","direction","isRtl","rootRest","root","input","id","onChange","getInputRef","onFocus","onInputFocus","onBlur","onInputBlur","inputRest","inputRef","value","isFocused","setTrue","setFocusedTrue","setFalse","setFocusedFalse","generatedId","useId","inputId","hasValue","setHasValue","useState","Boolean","defaultValue","checkHasValue","e","currentTarget","sizeY","adaptiveSizeY","platform","hasAfter","onCancel","useCallback","Object","nativeInputValueSetter","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","onIconCancelClickStart","preventDefault","focus","undefined","renderIconButton","props","hoverMode","onPointerDown","onClick","showControls","compact","baseClassName","disabled","div","label","htmlFor","Component","type","level","weight","tabIndex","data-testid","mode","size","focusVisibleMode","activeMode","span"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAgB,KAAK,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,KAAK,2BAA2B,EAAE,MAAM,uBAAuB,CAAC;AAEzE,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAExD;;GAEG;AACH,eAAO,MAAM,MAAM,GAAI,OAAO,SAAS,2BAA2B,EAAE,mCAIjE,WAAW,CAAC,OAAO,CAAC,KAAG,KAAK,CAAC,SA+D/B,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAgB,KAAK,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,KAAK,2BAA2B,EAAE,MAAM,uBAAuB,CAAC;AAMzE,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAExD;;GAEG;AACH,eAAO,MAAM,MAAM,GAAI,OAAO,SAAS,2BAA2B,EAAE,mCAIjE,WAAW,CAAC,OAAO,CAAC,KAAG,KAAK,CAAC,SA8E/B,CAAC"}

package/dist/components/Select/Select.js

@@ -15,7 +15,7 @@ import { NativeSelect } from "../NativeSelect/NativeSelect.js";
         "children",
         "className"
     ]);
-    const { options = [], searchable, emptyText, onInputChange, filterFn, popupDirection, renderOption, renderDropdown, fetching, onClose, onOpen, icon, ClearButton, allowClearButton, clearButtonTestId, dropdownOffsetDistance, dropdownAutoWidth, forceDropdownPortal, noMaxHeight, labelTextTestId, nativeSelectTestId, after, mode, pattern, minLength, maxLength, readOnly, getSelectInputRef, overscrollBehavior, beforeAlign, afterAlign, onInputKeyDown, accessible, fetchingCompletedLabel, fetchingInProgressLabel } = props, restProps = _object_without_properties(props, [
+    const { options = [], searchable, emptyText, onInputChange, filterFn, popupDirection, renderOption, renderDropdown, fetching, onClose, onOpen, icon, ClearButton, allowClearButton, clearButtonTestId, dropdownOffsetDistance, dropdownAutoWidth, forceDropdownPortal, noMaxHeight, labelTextTestId, nativeSelectTestId, after, mode, pattern, minLength, maxLength, readOnly, getSelectInputRef, overscrollBehavior, beforeAlign, afterAlign, onInputKeyDown, accessible, fetchingCompletedLabel, fetchingInProgressLabel, slotProps } = props, restProps = _object_without_properties(props, [
         "options",
         "searchable",
         "emptyText",
@@ -50,17 +50,23 @@ import { NativeSelect } from "../NativeSelect/NativeSelect.js";
         "onInputKeyDown",
         "accessible",
         "fetchingCompletedLabel",
-        "fetchingInProgressLabel"
+        "fetchingInProgressLabel",
+        "slotProps"
     ]);
     const { deviceType } = useAdaptivityConditionalRender();
     const nativeProps = restProps;
     return /*#__PURE__*/ _jsxs(React.Fragment, {
         children: [
             deviceType.desktop && /*#__PURE__*/ _jsx(CustomSelect, _object_spread({
-                className: classNames(className, deviceType.desktop.className)
+                className: classNames(className, deviceType.desktop.className),
+                slotProps: slotProps
             }, props)),
             deviceType.mobile && /*#__PURE__*/ _jsx(NativeSelect, _object_spread_props(_object_spread({
-                className: classNames(className, deviceType.mobile.className)
+                className: classNames(className, deviceType.mobile.className),
+                slotProps: {
+                    select: _object_spread({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.input, slotProps === null || slotProps === void 0 ? void 0 : slotProps.select),
+                    root: slotProps === null || slotProps === void 0 ? void 0 : slotProps.root
+                }
             }, nativeProps), {
                 children: options.map(({ label, value, disabled })=>/*#__PURE__*/ _jsx("option", {
                         value: value,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport type { HasOnlyExpectedProps } from '../../types';\nimport { CustomSelect, type SelectProps } from '../CustomSelect/CustomSelect';\nimport { type CustomSelectOptionInterface } from '../CustomSelect/types';\nimport { NativeSelect, type NativeSelectProps } from '../NativeSelect/NativeSelect';\nexport type SelectType = 'default' | 'plain' | 'accent';\n\n/**\n * @see https://vkui.io/components/select\n */\nexport const Select = <OptionT extends CustomSelectOptionInterface>({\n  children,\n  className,\n  ...props\n}: SelectProps<OptionT>): React.ReactNode => {\n  const {\n    options = [],\n    searchable,\n    emptyText,\n    onInputChange,\n    filterFn,\n    popupDirection,\n    renderOption,\n    renderDropdown,\n    fetching,\n    onClose,\n    onOpen,\n    icon,\n    ClearButton,\n    allowClearButton,\n    clearButtonTestId,\n    dropdownOffsetDistance,\n    dropdownAutoWidth,\n    forceDropdownPortal,\n    noMaxHeight,\n    labelTextTestId,\n    nativeSelectTestId,\n    after,\n    mode,\n    pattern,\n    minLength,\n    maxLength,\n    readOnly,\n    getSelectInputRef,\n    overscrollBehavior,\n    beforeAlign,\n    afterAlign,\n    onInputKeyDown,\n    accessible,\n    fetchingCompletedLabel,\n    fetchingInProgressLabel,\n    ...restProps\n  } = props;\n\n  const { deviceType } = useAdaptivityConditionalRender();\n\n  const nativeProps: HasOnlyExpectedProps<typeof restProps, NativeSelectProps> = restProps;\n\n  return (\n    <React.Fragment>\n      {deviceType.desktop && (\n        <CustomSelect className={classNames(className, deviceType.desktop.className)} {...props} />\n      )}\n      {deviceType.mobile && (\n        <NativeSelect\n          className={classNames(className, deviceType.mobile.className)}\n          {...nativeProps}\n        >\n          {options.map(({ label, value, disabled }) => (\n            <option value={value} key={`${value}`} disabled={disabled}>\n              {label}\n            </option>\n          ))}\n        </NativeSelect>\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["React","classNames","useAdaptivityConditionalRender","CustomSelect","NativeSelect","Select","children","className","props","options","searchable","emptyText","onInputChange","filterFn","popupDirection","renderOption","renderDropdown","fetching","onClose","onOpen","icon","ClearButton","allowClearButton","clearButtonTestId","dropdownOffsetDistance","dropdownAutoWidth","forceDropdownPortal","noMaxHeight","labelTextTestId","nativeSelectTestId","after","mode","pattern","minLength","maxLength","readOnly","getSelectInputRef","overscrollBehavior","beforeAlign","afterAlign","onInputKeyDown","accessible","fetchingCompletedLabel","fetchingInProgressLabel","restProps","deviceType","nativeProps","Fragment","desktop","mobile","map","label","value","disabled","option"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,8BAA8B,QAAQ,sDAA6C;AAE5F,SAASC,YAAY,QAA0B,kCAA+B;AAE9E,SAASC,YAAY,QAAgC,kCAA+B;AAGpF;;CAEC,GACD,OAAO,MAAMC,SAAS;QAA8C,EAClEC,QAAQ,EACRC,SAAS,EAEY,WADlBC;QAFHF;QACAC;;IAGA,MAAM,EACJE,UAAU,EAAE,EACZC,UAAU,EACVC,SAAS,EACTC,aAAa,EACbC,QAAQ,EACRC,cAAc,EACdC,YAAY,EACZC,cAAc,EACdC,QAAQ,EACRC,OAAO,EACPC,MAAM,EACNC,IAAI,EACJC,WAAW,EACXC,gBAAgB,EAChBC,iBAAiB,EACjBC,sBAAsB,EACtBC,iBAAiB,EACjBC,mBAAmB,EACnBC,WAAW,EACXC,eAAe,EACfC,kBAAkB,EAClBC,KAAK,EACLC,IAAI,EACJC,OAAO,EACPC,SAAS,EACTC,SAAS,EACTC,QAAQ,EACRC,iBAAiB,EACjBC,kBAAkB,EAClBC,WAAW,EACXC,UAAU,EACVC,cAAc,EACdC,UAAU,EACVC,sBAAsB,EACtBC,uBAAuB,EAExB,GAAGnC,OADCoC,uCACDpC;QApCFC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAIF,MAAM,EAAEE,UAAU,EAAE,GAAG3C;IAEvB,MAAM4C,cAAyEF;IAE/E,qBACE,MAAC5C,MAAM+C,QAAQ;;YACZF,WAAWG,OAAO,kBACjB,KAAC7C;gBAAaI,WAAWN,WAAWM,WAAWsC,WAAWG,OAAO,CAACzC,SAAS;eAAOC;YAEnFqC,WAAWI,MAAM,kBAChB,KAAC7C;gBACCG,WAAWN,WAAWM,WAAWsC,WAAWI,MAAM,CAAC1C,SAAS;eACxDuC;0BAEHrC,QAAQyC,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAEC,KAAK,EAAEC,QAAQ,EAAE,iBACtC,KAACC;wBAAOF,OAAOA;wBAAwBC,UAAUA;kCAC9CF;uBADwB,GAAGC,OAAO;;;;AAQjD,EAAE"}
+{"version":3,"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport type { HasDataAttribute, HasOnlyExpectedProps, HasRootRef } from '../../types';\nimport { CustomSelect, type SelectProps } from '../CustomSelect/CustomSelect';\nimport { type CustomSelectOptionInterface } from '../CustomSelect/types';\nimport {\n  type NativeHTMLSelectProps,\n  NativeSelect,\n  type NativeSelectProps,\n} from '../NativeSelect/NativeSelect';\nexport type SelectType = 'default' | 'plain' | 'accent';\n\n/**\n * @see https://vkui.io/components/select\n */\nexport const Select = <OptionT extends CustomSelectOptionInterface>({\n  children,\n  className,\n  ...props\n}: SelectProps<OptionT>): React.ReactNode => {\n  const {\n    options = [],\n    searchable,\n    emptyText,\n    onInputChange,\n    filterFn,\n    popupDirection,\n    renderOption,\n    renderDropdown,\n    fetching,\n    onClose,\n    onOpen,\n    icon,\n    ClearButton,\n    allowClearButton,\n    clearButtonTestId,\n    dropdownOffsetDistance,\n    dropdownAutoWidth,\n    forceDropdownPortal,\n    noMaxHeight,\n    labelTextTestId,\n    nativeSelectTestId,\n    after,\n    mode,\n    pattern,\n    minLength,\n    maxLength,\n    readOnly,\n    getSelectInputRef,\n    overscrollBehavior,\n    beforeAlign,\n    afterAlign,\n    onInputKeyDown,\n    accessible,\n    fetchingCompletedLabel,\n    fetchingInProgressLabel,\n\n    slotProps,\n    ...restProps\n  } = props;\n\n  const { deviceType } = useAdaptivityConditionalRender();\n\n  const nativeProps: HasOnlyExpectedProps<typeof restProps, NativeSelectProps> = restProps;\n\n  return (\n    <React.Fragment>\n      {deviceType.desktop && (\n        <CustomSelect\n          className={classNames(className, deviceType.desktop.className)}\n          slotProps={slotProps}\n          {...props}\n        />\n      )}\n      {deviceType.mobile && (\n        <NativeSelect\n          className={classNames(className, deviceType.mobile.className)}\n          slotProps={{\n            select: {\n              ...(slotProps?.input as NativeHTMLSelectProps &\n                HasRootRef<HTMLSelectElement> &\n                HasDataAttribute),\n              ...slotProps?.select,\n            },\n            root: slotProps?.root,\n          }}\n          {...nativeProps}\n        >\n          {options.map(({ label, value, disabled }) => (\n            <option value={value} key={`${value}`} disabled={disabled}>\n              {label}\n            </option>\n          ))}\n        </NativeSelect>\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["React","classNames","useAdaptivityConditionalRender","CustomSelect","NativeSelect","Select","children","className","props","options","searchable","emptyText","onInputChange","filterFn","popupDirection","renderOption","renderDropdown","fetching","onClose","onOpen","icon","ClearButton","allowClearButton","clearButtonTestId","dropdownOffsetDistance","dropdownAutoWidth","forceDropdownPortal","noMaxHeight","labelTextTestId","nativeSelectTestId","after","mode","pattern","minLength","maxLength","readOnly","getSelectInputRef","overscrollBehavior","beforeAlign","afterAlign","onInputKeyDown","accessible","fetchingCompletedLabel","fetchingInProgressLabel","slotProps","restProps","deviceType","nativeProps","Fragment","desktop","mobile","select","input","root","map","label","value","disabled","option"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,8BAA8B,QAAQ,sDAA6C;AAE5F,SAASC,YAAY,QAA0B,kCAA+B;AAE9E,SAEEC,YAAY,QAEP,kCAA+B;AAGtC;;CAEC,GACD,OAAO,MAAMC,SAAS;QAA8C,EAClEC,QAAQ,EACRC,SAAS,EAEY,WADlBC;QAFHF;QACAC;;IAGA,MAAM,EACJE,UAAU,EAAE,EACZC,UAAU,EACVC,SAAS,EACTC,aAAa,EACbC,QAAQ,EACRC,cAAc,EACdC,YAAY,EACZC,cAAc,EACdC,QAAQ,EACRC,OAAO,EACPC,MAAM,EACNC,IAAI,EACJC,WAAW,EACXC,gBAAgB,EAChBC,iBAAiB,EACjBC,sBAAsB,EACtBC,iBAAiB,EACjBC,mBAAmB,EACnBC,WAAW,EACXC,eAAe,EACfC,kBAAkB,EAClBC,KAAK,EACLC,IAAI,EACJC,OAAO,EACPC,SAAS,EACTC,SAAS,EACTC,QAAQ,EACRC,iBAAiB,EACjBC,kBAAkB,EAClBC,WAAW,EACXC,UAAU,EACVC,cAAc,EACdC,UAAU,EACVC,sBAAsB,EACtBC,uBAAuB,EAEvBC,SAAS,EAEV,GAAGpC,OADCqC,uCACDrC;QAtCFC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QAEAC;;IAIF,MAAM,EAAEE,UAAU,EAAE,GAAG5C;IAEvB,MAAM6C,cAAyEF;IAE/E,qBACE,MAAC7C,MAAMgD,QAAQ;;YACZF,WAAWG,OAAO,kBACjB,KAAC9C;gBACCI,WAAWN,WAAWM,WAAWuC,WAAWG,OAAO,CAAC1C,SAAS;gBAC7DqC,WAAWA;eACPpC;YAGPsC,WAAWI,MAAM,kBAChB,KAAC9C;gBACCG,WAAWN,WAAWM,WAAWuC,WAAWI,MAAM,CAAC3C,SAAS;gBAC5DqC,WAAW;oBACTO,QAAQ,mBACFP,sBAAAA,gCAAAA,UAAWQ,KAAK,EAGjBR,sBAAAA,gCAAAA,UAAWO,MAAM;oBAEtBE,IAAI,EAAET,sBAAAA,gCAAAA,UAAWS,IAAI;gBACvB;eACIN;0BAEHtC,QAAQ6C,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAEC,KAAK,EAAEC,QAAQ,EAAE,iBACtC,KAACC;wBAAOF,OAAOA;wBAAwBC,UAAUA;kCAC9CF;uBADwB,GAAGC,OAAO;;;;AAQjD,EAAE"}

package/dist/components/SelectionControl/SelectionControl.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import type { HasRootRef } from '../../types';
+import type { HasComponent, HasRootRef } from '../../types';
 import { type TappableOmitProps } from '../Tappable/Tappable';
 import { SelectionControlLabel } from './SelectionControlLabel/SelectionControlLabel';
-export interface SelectionControlProps extends React.ComponentProps<'label'>, HasRootRef<HTMLLabelElement>, Pick<TappableOmitProps, 'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode' | 'disabled'> {
+export interface SelectionControlProps extends React.ComponentProps<'label'>, HasRootRef<HTMLLabelElement>, HasComponent, Pick<TappableOmitProps, 'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode' | 'disabled'> {
     /**
      * Отключает отступы. При использовании этого свойства, значение по умолчанию для свойств `hoverMode` и `activeMode` становится `"opacity"`.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"SelectionControl.d.ts","sourceRoot":"","sources":["../../../src/components/SelectionControl/SelectionControl.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,OAAO,EAAY,KAAK,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAExE,OAAO,EAAE,qBAAqB,EAAE,MAAM,+CAA+C,CAAC;AAQtF,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EACnC,UAAU,CAAC,gBAAgB,CAAC,EAC5B,IAAI,CACF,iBAAiB,EACjB,WAAW,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,GAAG,kBAAkB,GAAG,UAAU,CACxF;IACH;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB;wFAK1B,qBAAqB,GAAG,KAAK,CAAC,SAAS;;CAuBzC,CAAC"}
+{"version":3,"file":"SelectionControl.d.ts","sourceRoot":"","sources":["../../../src/components/SelectionControl/SelectionControl.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE5D,OAAO,EAAY,KAAK,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAExE,OAAO,EAAE,qBAAqB,EAAE,MAAM,+CAA+C,CAAC;AAQtF,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EACnC,UAAU,CAAC,gBAAgB,CAAC,EAC5B,YAAY,EACZ,IAAI,CACF,iBAAiB,EACjB,WAAW,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,GAAG,kBAAkB,GAAG,UAAU,CACxF;IACH;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB;wFAK1B,qBAAqB,GAAG,KAAK,CAAC,SAAS;;CAuBzC,CAAC"}

package/dist/components/SelectionControl/SelectionControl.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SelectionControl/SelectionControl.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HasRootRef } from '../../types';\nimport { DEFAULT_ACTIVE_EFFECT_DELAY } from '../Clickable/useState';\nimport { Tappable, type TappableOmitProps } from '../Tappable/Tappable';\nimport { SelectionControlContext } from './SelectionControlContext';\nimport { SelectionControlLabel } from './SelectionControlLabel/SelectionControlLabel';\nimport styles from './SelectionControl.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport interface SelectionControlProps\n  extends React.ComponentProps<'label'>,\n    HasRootRef<HTMLLabelElement>,\n    Pick<\n      TappableOmitProps,\n      'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode' | 'disabled'\n    > {\n  /**\n   * Отключает отступы. При использовании этого свойства, значение по умолчанию для свойств `hoverMode` и `activeMode` становится `\"opacity\"`.\n   */\n  noPadding?: boolean;\n}\n\n/**\n * @see https://vkui.io/components/selection-control\n */\nexport const SelectionControl = ({\n  noPadding = false,\n  hoverMode: hoverModeProp,\n  activeMode: activeModeProp,\n  ...restProps\n}: SelectionControlProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const platform = usePlatform();\n\n  const hoverMode = hoverModeProp || (noPadding ? 'opacity' : 'background');\n  const activeMode = activeModeProp || (noPadding ? 'opacity' : 'background');\n\n  return (\n    <SelectionControlContext.Provider value={{ noPadding }}>\n      <Tappable\n        Component=\"label\"\n        baseClassName={classNames(\n          styles.host,\n          sizeY !== 'regular' && sizeYClassNames[sizeY],\n          !noPadding && styles.withPadding,\n        )}\n        activeEffectDelay={platform === 'ios' ? 100 : DEFAULT_ACTIVE_EFFECT_DELAY}\n        hoverMode={hoverMode}\n        activeMode={activeMode}\n        {...restProps}\n      />\n    </SelectionControlContext.Provider>\n  );\n};\n\nSelectionControl.Label = SelectionControlLabel;\n"],"names":["React","classNames","useAdaptivity","usePlatform","DEFAULT_ACTIVE_EFFECT_DELAY","Tappable","SelectionControlContext","SelectionControlLabel","sizeYClassNames","none","compact","SelectionControl","noPadding","hoverMode","hoverModeProp","activeMode","activeModeProp","restProps","sizeY","platform","Provider","value","Component","baseClassName","activeEffectDelay","Label"],"mappings":"AAAA;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,SAASC,2BAA2B,QAAQ,2BAAwB;AACpE,SAASC,QAAQ,QAAgC,0BAAuB;AACxE,SAASC,uBAAuB,QAAQ,+BAA4B;AACpE,SAASC,qBAAqB,QAAQ,mDAAgD;AAGtF,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAeA;;CAEC,GACD,OAAO,MAAMC,mBAAmB;QAAC,EAC/BC,YAAY,KAAK,EACjBC,WAAWC,aAAa,EACxBC,YAAYC,cAAc,EAEJ,WADnBC;QAHHL;QACAC;QACAE;;IAGA,MAAM,EAAEG,QAAQ,MAAM,EAAE,GAAGhB;IAC3B,MAAMiB,WAAWhB;IAEjB,MAAMU,YAAYC,iBAAkBF,CAAAA,YAAY,YAAY,YAAW;IACvE,MAAMG,aAAaC,kBAAmBJ,CAAAA,YAAY,YAAY,YAAW;IAEzE,qBACE,KAACN,wBAAwBc,QAAQ;QAACC,OAAO;YAAET;QAAU;kBACnD,cAAA,KAACP;YACCiB,WAAU;YACVC,eAAetB,yCAEbiB,UAAU,aAAaV,eAAe,CAACU,MAAM,EAC7C,CAACN;YAEHY,mBAAmBL,aAAa,QAAQ,MAAMf;YAC9CS,WAAWA;YACXE,YAAYA;WACRE;;AAIZ,EAAE;AAEFN,iBAAiBc,KAAK,GAAGlB"}
+{"version":3,"sources":["../../../src/components/SelectionControl/SelectionControl.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HasComponent, HasRootRef } from '../../types';\nimport { DEFAULT_ACTIVE_EFFECT_DELAY } from '../Clickable/useState';\nimport { Tappable, type TappableOmitProps } from '../Tappable/Tappable';\nimport { SelectionControlContext } from './SelectionControlContext';\nimport { SelectionControlLabel } from './SelectionControlLabel/SelectionControlLabel';\nimport styles from './SelectionControl.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport interface SelectionControlProps\n  extends React.ComponentProps<'label'>,\n    HasRootRef<HTMLLabelElement>,\n    HasComponent,\n    Pick<\n      TappableOmitProps,\n      'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode' | 'disabled'\n    > {\n  /**\n   * Отключает отступы. При использовании этого свойства, значение по умолчанию для свойств `hoverMode` и `activeMode` становится `\"opacity\"`.\n   */\n  noPadding?: boolean;\n}\n\n/**\n * @see https://vkui.io/components/selection-control\n */\nexport const SelectionControl = ({\n  noPadding = false,\n  hoverMode: hoverModeProp,\n  activeMode: activeModeProp,\n  ...restProps\n}: SelectionControlProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const platform = usePlatform();\n\n  const hoverMode = hoverModeProp || (noPadding ? 'opacity' : 'background');\n  const activeMode = activeModeProp || (noPadding ? 'opacity' : 'background');\n\n  return (\n    <SelectionControlContext.Provider value={{ noPadding }}>\n      <Tappable\n        Component=\"label\"\n        baseClassName={classNames(\n          styles.host,\n          sizeY !== 'regular' && sizeYClassNames[sizeY],\n          !noPadding && styles.withPadding,\n        )}\n        activeEffectDelay={platform === 'ios' ? 100 : DEFAULT_ACTIVE_EFFECT_DELAY}\n        hoverMode={hoverMode}\n        activeMode={activeMode}\n        {...restProps}\n      />\n    </SelectionControlContext.Provider>\n  );\n};\n\nSelectionControl.Label = SelectionControlLabel;\n"],"names":["React","classNames","useAdaptivity","usePlatform","DEFAULT_ACTIVE_EFFECT_DELAY","Tappable","SelectionControlContext","SelectionControlLabel","sizeYClassNames","none","compact","SelectionControl","noPadding","hoverMode","hoverModeProp","activeMode","activeModeProp","restProps","sizeY","platform","Provider","value","Component","baseClassName","activeEffectDelay","Label"],"mappings":"AAAA;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,SAASC,2BAA2B,QAAQ,2BAAwB;AACpE,SAASC,QAAQ,QAAgC,0BAAuB;AACxE,SAASC,uBAAuB,QAAQ,+BAA4B;AACpE,SAASC,qBAAqB,QAAQ,mDAAgD;AAGtF,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAgBA;;CAEC,GACD,OAAO,MAAMC,mBAAmB;QAAC,EAC/BC,YAAY,KAAK,EACjBC,WAAWC,aAAa,EACxBC,YAAYC,cAAc,EAEJ,WADnBC;QAHHL;QACAC;QACAE;;IAGA,MAAM,EAAEG,QAAQ,MAAM,EAAE,GAAGhB;IAC3B,MAAMiB,WAAWhB;IAEjB,MAAMU,YAAYC,iBAAkBF,CAAAA,YAAY,YAAY,YAAW;IACvE,MAAMG,aAAaC,kBAAmBJ,CAAAA,YAAY,YAAY,YAAW;IAEzE,qBACE,KAACN,wBAAwBc,QAAQ;QAACC,OAAO;YAAET;QAAU;kBACnD,cAAA,KAACP;YACCiB,WAAU;YACVC,eAAetB,yCAEbiB,UAAU,aAAaV,eAAe,CAACU,MAAM,EAC7C,CAACN;YAEHY,mBAAmBL,aAAa,QAAQ,MAAMf;YAC9CS,WAAWA;YACXE,YAAYA;WACRE;;AAIZ,EAAE;AAEFN,iBAAiBc,KAAK,GAAGlB"}

package/dist/components/Snackbar/Snackbar.d.ts

@@ -1,8 +1,17 @@
 import * as React from 'react';
-import type { HTMLAttributesWithRootRef } from '../../types';
+import type { HasDataAttribute, HasRootRef, HTMLAttributesWithRootRef } from '../../types';
 import { Basic, type BasicProps } from './subcomponents/Basic/Basic';
 import type { SnackbarPlacement } from './types';
 export interface SnackbarProps extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'role'>, BasicProps {
+    /**
+     * Свойства, которые можно прокинуть внутрь компонента:
+     * - `root`: свойства для прокидывания в корень компонента;
+     * - `action`: свойства для прокидывания в кнопку действия.
+     */
+    slotProps?: {
+        root?: Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & HasRootRef<HTMLDivElement> & HasDataAttribute;
+        action?: React.HTMLAttributes<HTMLElement> & HasRootRef<HTMLElement> & HasDataAttribute;
+    };
     /**
      * Задаёт расположение компонента.
      *

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

@@ -1 +1 @@
-{"version":3,"file":"Snackbar.d.ts","sourceRoot":"","sources":["../../../src/components/Snackbar/Snackbar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAG7D,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACrE,OAAO,KAAK,EAAa,iBAAiB,EAAE,MAAM,SAAS,CAAC;AA2B5D,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC,EAC7D,UAAU;IACZ;;;;;;;;;;OAUG;IACH,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAClD;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;CACzC;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAAC,GAAG;IAAE,KAAK,EAAE,OAAO,KAAK,CAAA;CAqOrE,CAAC"}
+{"version":3,"file":"Snackbar.d.ts","sourceRoot":"","sources":["../../../src/components/Snackbar/Snackbar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAG3F,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACrE,OAAO,KAAK,EAAa,iBAAiB,EAAE,MAAM,SAAS,CAAC;AA2B5D,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC,EAC7D,UAAU;IACZ;;;;OAIG;IACH,SAAS,CAAC,EAAE;QACV,IAAI,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAC3D,UAAU,CAAC,cAAc,CAAC,GAC1B,gBAAgB,CAAC;QACnB,MAAM,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,UAAU,CAAC,WAAW,CAAC,GAAG,gBAAgB,CAAC;KACzF,CAAC;IACF;;;;;;;;;;OAUG;IACH,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAClD;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;CACzC;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAAC,GAAG;IAAE,KAAK,EAAE,OAAO,KAAK,CAAA;CAuPrE,CAAC"}