@vkontakte/vkui 6.5.2 → 6.6.0

package/dist/components/ScreenSpinner/ScreenSpinner.js

@@ -1,105 +1,22 @@
 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 { Icon24Cancel } from '@vkontakte/icons';
-import { classNames } from '@vkontakte/vkjs';
-import { mergeCalls } from '../../lib/mergeCalls';
-import { clickByKeyboardHandler } from '../../lib/utils';
 import { useScrollLock } from '../AppRoot/ScrollContext';
 import { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';
-import { RootComponent } from '../RootComponent/RootComponent';
-import { Spinner } from '../Spinner/Spinner';
-import { Icon48CancelCircle } from './Icon48CancelCircle';
-import { Icon48DoneOutline } from './Icon48DoneOutline';
-export const ScreenSpinnerContext = /*#__PURE__*/ React.createContext({
-    state: 'loading'
-});
-const stateClassNames = {
-    cancelable: "vkuiScreenSpinner--state-cancelable",
-    done: "vkuiScreenSpinner--state-done",
-    error: "vkuiScreenSpinner--state-error"
-};
-const ScreenSpinnerLoader = (_param)=>{
-    var { size = 'large', children = 'Пожалуйста, подождите...' } = _param, restProps = _object_without_properties(_param, [
-        "size",
-        "children"
-    ]);
-    return /*#__PURE__*/ _jsx(Spinner, _object_spread_props(_object_spread({
-        className: "vkuiScreenSpinner__spinner",
-        size: size
-    }, restProps), {
-        children: children
-    }));
-};
-ScreenSpinnerLoader.displayName = 'ScreenSpinner.Loader';
-const ScreenSpinnerCancelIcon = (_param)=>{
-    var { onKeyDown, 'aria-label': ariaLabel = 'Отменить' } = _param, restProps = _object_without_properties(_param, [
-        "onKeyDown",
-        'aria-label'
-    ]);
-    const handlers = mergeCalls({
-        onKeyDown: clickByKeyboardHandler
-    }, {
-        onKeyDown
-    });
-    let clickableProps = _object_spread_props(_object_spread({}, handlers), {
-        'tabIndex': 0,
-        'role': 'button',
-        'aria-label': ariaLabel
-    });
-    return /*#__PURE__*/ _jsx(RootComponent, _object_spread_props(_object_spread({
-        baseClassName: "vkuiScreenSpinner__icon"
-    }, clickableProps, restProps), {
-        children: /*#__PURE__*/ _jsx(Icon24Cancel, {})
-    }));
-};
-const ScreenSpinnerSwapIcon = (_param)=>{
-    var { cancelLabel } = _param, restProps = _object_without_properties(_param, [
-        "cancelLabel"
-    ]);
-    const { state } = React.useContext(ScreenSpinnerContext);
-    if (state === 'cancelable') {
-        return /*#__PURE__*/ _jsx(ScreenSpinnerCancelIcon, _object_spread({
-            "aria-label": cancelLabel
-        }, restProps));
-    }
-    const Icon = {
-        loading: ()=>null,
-        done: Icon48DoneOutline,
-        error: Icon48CancelCircle
-    }[state];
-    return /*#__PURE__*/ _jsx(RootComponent, _object_spread_props(_object_spread({
-        baseClassName: "vkuiScreenSpinner__icon"
-    }, restProps), {
-        children: /*#__PURE__*/ _jsx(Icon, {})
-    }));
-};
-ScreenSpinnerSwapIcon.displayName = 'ScreenSpinner.SwapIcon';
-const ScreenSpinnerContainer = (_param)=>{
-    var { state = 'loading' } = _param, restProps = _object_without_properties(_param, [
-        "state"
-    ]);
-    return /*#__PURE__*/ _jsx(ScreenSpinnerContext.Provider, {
-        value: {
-            state
-        },
-        children: /*#__PURE__*/ _jsx(RootComponent, _object_spread({
-            baseClassName: classNames("vkuiScreenSpinner", state !== 'loading' && stateClassNames[state])
-        }, restProps))
-    });
-};
-ScreenSpinnerContainer.displayName = 'ScreenSpinner.Container';
+import { ScreenSpinnerContainer } from './ScreenSpinnerContainer';
+import { ScreenSpinnerLoader } from './ScreenSpinnerLoader';
+import { ScreenSpinnerSwapIcon } from './ScreenSpinnerSwapIcon';
 /**
  * @see https://vkcom.github.io/VKUI/#/ScreenSpinner
  */ export const ScreenSpinner = (_param)=>{
-    var { style, className, state = 'loading', onClick, cancelLabel } = _param, restProps = _object_without_properties(_param, [
+    var { style, className, state = 'loading', onClick, cancelLabel, mode } = _param, restProps = _object_without_properties(_param, [
         "style",
         "className",
         "state",
         "onClick",
-        "cancelLabel"
+        "cancelLabel",
+        "mode"
     ]);
     useScrollLock();
     return /*#__PURE__*/ _jsx(PopoutWrapper, {
@@ -108,6 +25,7 @@ ScreenSpinnerContainer.displayName = 'ScreenSpinner.Container';
         noBackground: true,
         children: /*#__PURE__*/ _jsxs(ScreenSpinnerContainer, {
             state: state,
+            mode: mode,
             children: [
                 /*#__PURE__*/ _jsx(ScreenSpinnerLoader, _object_spread({}, restProps)),
                 /*#__PURE__*/ _jsx(ScreenSpinnerSwapIcon, {

package/dist/components/ScreenSpinner/ScreenSpinner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ScreenSpinner/ScreenSpinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Cancel } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { clickByKeyboardHandler } from '../../lib/utils';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Spinner, SpinnerProps } from '../Spinner/Spinner';\nimport { Icon48CancelCircle } from './Icon48CancelCircle';\nimport { Icon48DoneOutline } from './Icon48DoneOutline';\nimport styles from './ScreenSpinner.module.css';\n\nexport interface ScreenSpinnerProps extends SpinnerProps {\n  state?: 'loading' | 'cancelable' | 'done' | 'error';\n  cancelLabel?: string;\n}\n\nexport interface ScreenSpinnerContextProps {\n  state: NonNullable<ScreenSpinnerProps['state']>;\n}\n\nexport const ScreenSpinnerContext: React.Context<ScreenSpinnerContextProps> =\n  React.createContext<ScreenSpinnerContextProps>({\n    state: 'loading',\n  });\n\nconst stateClassNames = {\n  cancelable: styles['ScreenSpinner--state-cancelable'],\n  done: styles['ScreenSpinner--state-done'],\n  error: styles['ScreenSpinner--state-error'],\n};\n\nconst ScreenSpinnerLoader: React.FC<SpinnerProps> = ({\n  size = 'large',\n  children = 'Пожалуйста, подождите...',\n  ...restProps\n}: SpinnerProps) => {\n  return (\n    <Spinner className={styles['ScreenSpinner__spinner']} size={size} {...restProps}>\n      {children}\n    </Spinner>\n  );\n};\n\nScreenSpinnerLoader.displayName = 'ScreenSpinner.Loader';\n\ntype ScreenSpinnerSwapIconProps = HTMLAttributesWithRootRef<HTMLElement> & {\n  cancelLabel?: ScreenSpinnerProps['cancelLabel'];\n};\n\nconst ScreenSpinnerCancelIcon: React.FC<ScreenSpinnerSwapIconProps> = ({\n  onKeyDown,\n  'aria-label': ariaLabel = 'Отменить',\n  ...restProps\n}: ScreenSpinnerSwapIconProps) => {\n  const handlers = mergeCalls(\n    { onKeyDown: clickByKeyboardHandler },\n    {\n      onKeyDown,\n    },\n  );\n  let clickableProps: React.HTMLAttributes<HTMLSpanElement> = {\n    ...handlers,\n    'tabIndex': 0,\n    'role': 'button',\n    'aria-label': ariaLabel,\n  };\n\n  return (\n    <RootComponent baseClassName={styles['ScreenSpinner__icon']} {...clickableProps} {...restProps}>\n      <Icon24Cancel />\n    </RootComponent>\n  );\n};\n\nconst ScreenSpinnerSwapIcon: React.FC<ScreenSpinnerSwapIconProps> = ({\n  cancelLabel,\n  ...restProps\n}: ScreenSpinnerSwapIconProps) => {\n  const { state } = React.useContext(ScreenSpinnerContext);\n\n  if (state === 'cancelable') {\n    return <ScreenSpinnerCancelIcon aria-label={cancelLabel} {...restProps} />;\n  }\n\n  const Icon = {\n    loading: () => null,\n    done: Icon48DoneOutline,\n    error: Icon48CancelCircle,\n  }[state];\n\n  return (\n    <RootComponent baseClassName={styles['ScreenSpinner__icon']} {...restProps}>\n      <Icon />\n    </RootComponent>\n  );\n};\n\nScreenSpinnerSwapIcon.displayName = 'ScreenSpinner.SwapIcon';\n\ntype ScreenSpinnerContainerProps = HTMLAttributesWithRootRef<HTMLSpanElement> &\n  Pick<ScreenSpinnerProps, 'state'>;\n\nconst ScreenSpinnerContainer: React.FC<ScreenSpinnerContainerProps> = ({\n  state = 'loading',\n  ...restProps\n}: ScreenSpinnerContainerProps) => {\n  return (\n    <ScreenSpinnerContext.Provider value={{ state }}>\n      <RootComponent\n        baseClassName={classNames(\n          styles['ScreenSpinner'],\n          state !== 'loading' && stateClassNames[state],\n        )}\n        {...restProps}\n      />\n    </ScreenSpinnerContext.Provider>\n  );\n};\n\nScreenSpinnerContainer.displayName = 'ScreenSpinner.Container';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ScreenSpinner\n */\nexport const ScreenSpinner: React.FC<ScreenSpinnerProps> & {\n  Container: typeof ScreenSpinnerContainer;\n  Loader: typeof ScreenSpinnerLoader;\n  SwapIcon: typeof ScreenSpinnerSwapIcon;\n} = ({\n  style,\n  className,\n  state = 'loading',\n  onClick,\n  cancelLabel,\n  ...restProps\n}: ScreenSpinnerProps): React.ReactNode => {\n  useScrollLock();\n\n  return (\n    <PopoutWrapper className={className} style={style} noBackground>\n      <ScreenSpinnerContainer state={state}>\n        <ScreenSpinnerLoader {...restProps} />\n        <ScreenSpinnerSwapIcon onClick={onClick} cancelLabel={cancelLabel} />\n      </ScreenSpinnerContainer>\n    </PopoutWrapper>\n  );\n};\n\nScreenSpinner.displayName = 'ScreenSpinner';\n\nScreenSpinner.Container = ScreenSpinnerContainer;\nScreenSpinner.Container.displayName = 'ScreenSpinner.Container';\n\nScreenSpinner.Loader = ScreenSpinnerLoader;\nScreenSpinner.Loader.displayName = 'ScreenSpinner.Loader';\n\nScreenSpinner.SwapIcon = ScreenSpinnerSwapIcon;\nScreenSpinner.SwapIcon.displayName = 'ScreenSpinner.SwapIcon';\n"],"names":["React","Icon24Cancel","classNames","mergeCalls","clickByKeyboardHandler","useScrollLock","PopoutWrapper","RootComponent","Spinner","Icon48CancelCircle","Icon48DoneOutline","ScreenSpinnerContext","createContext","state","stateClassNames","cancelable","done","error","ScreenSpinnerLoader","size","children","restProps","className","displayName","ScreenSpinnerCancelIcon","onKeyDown","ariaLabel","handlers","clickableProps","baseClassName","ScreenSpinnerSwapIcon","cancelLabel","useContext","aria-label","Icon","loading","ScreenSpinnerContainer","Provider","value","ScreenSpinner","style","onClick","noBackground","Container","Loader","SwapIcon"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,mBAAmB;AAChD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,UAAU,QAAQ,uBAAuB;AAClD,SAASC,sBAAsB,QAAQ,kBAAkB;AAEzD,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,OAAO,QAAsB,qBAAqB;AAC3D,SAASC,kBAAkB,QAAQ,uBAAuB;AAC1D,SAASC,iBAAiB,QAAQ,sBAAsB;AAYxD,OAAO,MAAMC,qCACXX,MAAMY,aAAa,CAA4B;IAC7CC,OAAO;AACT,GAAG;AAEL,MAAMC,kBAAkB;IACtBC,UAAU;IACVC,IAAI;IACJC,KAAK;AACP;AAEA,MAAMC,sBAA8C;QAAC,EACnDC,OAAO,OAAO,EACdC,WAAW,0BAA0B,EAExB,WADVC;QAFHF;QACAC;;IAGA,qBACE,KAACZ;QAAQc,SAAS;QAAoCH,MAAMA;OAAUE;kBACnED;;AAGP;AAEAF,oBAAoBK,WAAW,GAAG;AAMlC,MAAMC,0BAAgE;QAAC,EACrEC,SAAS,EACT,cAAcC,YAAY,UAAU,EAET,WADxBL;QAFHI;QACA;;IAGA,MAAME,WAAWxB,WACf;QAAEsB,WAAWrB;IAAuB,GACpC;QACEqB;IACF;IAEF,IAAIG,iBAAwD,wCACvDD;QACH,YAAY;QACZ,QAAQ;QACR,cAAcD;;IAGhB,qBACE,KAACnB;QAAcsB,aAAa;OAAqCD,gBAAoBP;kBACnF,cAAA,KAACpB;;AAGP;AAEA,MAAM6B,wBAA8D;QAAC,EACnEC,WAAW,EAEgB,WADxBV;QADHU;;IAGA,MAAM,EAAElB,KAAK,EAAE,GAAGb,MAAMgC,UAAU,CAACrB;IAEnC,IAAIE,UAAU,cAAc;QAC1B,qBAAO,KAACW;YAAwBS,cAAYF;WAAiBV;IAC/D;IAEA,MAAMa,OAAO;QACXC,SAAS,IAAM;QACfnB,MAAMN;QACNO,OAAOR;IACT,CAAC,CAACI,MAAM;IAER,qBACE,KAACN;QAAcsB,aAAa;OAAqCR;kBAC/D,cAAA,KAACa;;AAGP;AAEAJ,sBAAsBP,WAAW,GAAG;AAKpC,MAAMa,yBAAgE;QAAC,EACrEvB,QAAQ,SAAS,EAEW,WADzBQ;QADHR;;IAGA,qBACE,KAACF,qBAAqB0B,QAAQ;QAACC,OAAO;YAAEzB;QAAM;kBAC5C,cAAA,KAACN;YACCsB,eAAe3B,gCAEbW,UAAU,aAAaC,eAAe,CAACD,MAAM;WAE3CQ;;AAIZ;AAEAe,uBAAuBb,WAAW,GAAG;AAErC;;CAEC,GACD,OAAO,MAAMgB,gBAIT;QAAC,EACHC,KAAK,EACLlB,SAAS,EACTT,QAAQ,SAAS,EACjB4B,OAAO,EACPV,WAAW,EAEQ,WADhBV;QALHmB;QACAlB;QACAT;QACA4B;QACAV;;IAGA1B;IAEA,qBACE,KAACC;QAAcgB,WAAWA;QAAWkB,OAAOA;QAAOE,YAAY;kBAC7D,cAAA,MAACN;YAAuBvB,OAAOA;;8BAC7B,KAACK,wCAAwBG;8BACzB,KAACS;oBAAsBW,SAASA;oBAASV,aAAaA;;;;;AAI9D,EAAE;AAEFQ,cAAchB,WAAW,GAAG;AAE5BgB,cAAcI,SAAS,GAAGP;AAC1BG,cAAcI,SAAS,CAACpB,WAAW,GAAG;AAEtCgB,cAAcK,MAAM,GAAG1B;AACvBqB,cAAcK,MAAM,CAACrB,WAAW,GAAG;AAEnCgB,cAAcM,QAAQ,GAAGf;AACzBS,cAAcM,QAAQ,CAACtB,WAAW,GAAG"}
+{"version":3,"sources":["../../../src/components/ScreenSpinner/ScreenSpinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { ScreenSpinnerContainer } from './ScreenSpinnerContainer';\nimport { ScreenSpinnerLoader } from './ScreenSpinnerLoader';\nimport { ScreenSpinnerSwapIcon } from './ScreenSpinnerSwapIcon';\nimport type { ScreenSpinnerProps } from './types';\n\nexport type { ScreenSpinnerProps };\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ScreenSpinner\n */\nexport const ScreenSpinner: React.FC<ScreenSpinnerProps> & {\n  Container: typeof ScreenSpinnerContainer;\n  Loader: typeof ScreenSpinnerLoader;\n  SwapIcon: typeof ScreenSpinnerSwapIcon;\n} = ({\n  style,\n  className,\n  state = 'loading',\n  onClick,\n  cancelLabel,\n  mode,\n  ...restProps\n}: ScreenSpinnerProps): React.ReactNode => {\n  useScrollLock();\n\n  return (\n    <PopoutWrapper className={className} style={style} noBackground>\n      <ScreenSpinnerContainer state={state} mode={mode}>\n        <ScreenSpinnerLoader {...restProps} />\n        <ScreenSpinnerSwapIcon onClick={onClick} cancelLabel={cancelLabel} />\n      </ScreenSpinnerContainer>\n    </PopoutWrapper>\n  );\n};\n\nScreenSpinner.displayName = 'ScreenSpinner';\n\nScreenSpinner.Container = ScreenSpinnerContainer;\nScreenSpinner.Container.displayName = 'ScreenSpinner.Container';\n\nScreenSpinner.Loader = ScreenSpinnerLoader;\nScreenSpinner.Loader.displayName = 'ScreenSpinner.Loader';\n\nScreenSpinner.SwapIcon = ScreenSpinnerSwapIcon;\nScreenSpinner.SwapIcon.displayName = 'ScreenSpinner.SwapIcon';\n"],"names":["React","useScrollLock","PopoutWrapper","ScreenSpinnerContainer","ScreenSpinnerLoader","ScreenSpinnerSwapIcon","ScreenSpinner","style","className","state","onClick","cancelLabel","mode","restProps","noBackground","displayName","Container","Loader","SwapIcon"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,sBAAsB,QAAQ,2BAA2B;AAClE,SAASC,mBAAmB,QAAQ,wBAAwB;AAC5D,SAASC,qBAAqB,QAAQ,0BAA0B;AAKhE;;CAEC,GACD,OAAO,MAAMC,gBAIT;QAAC,EACHC,KAAK,EACLC,SAAS,EACTC,QAAQ,SAAS,EACjBC,OAAO,EACPC,WAAW,EACXC,IAAI,EAEe,WADhBC;QANHN;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGAX;IAEA,qBACE,KAACC;QAAcM,WAAWA;QAAWD,OAAOA;QAAOO,YAAY;kBAC7D,cAAA,MAACX;YAAuBM,OAAOA;YAAOG,MAAMA;;8BAC1C,KAACR,wCAAwBS;8BACzB,KAACR;oBAAsBK,SAASA;oBAASC,aAAaA;;;;;AAI9D,EAAE;AAEFL,cAAcS,WAAW,GAAG;AAE5BT,cAAcU,SAAS,GAAGb;AAC1BG,cAAcU,SAAS,CAACD,WAAW,GAAG;AAEtCT,cAAcW,MAAM,GAAGb;AACvBE,cAAcW,MAAM,CAACF,WAAW,GAAG;AAEnCT,cAAcY,QAAQ,GAAGb;AACzBC,cAAcY,QAAQ,CAACH,WAAW,GAAG"}

package/dist/components/ScreenSpinner/ScreenSpinnerContainer.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import type { HTMLAttributesWithRootRef } from '../../types';
+import { type ScreenSpinnerProps } from './types';
+type ScreenSpinnerContainerProps = HTMLAttributesWithRootRef<HTMLSpanElement> & Pick<ScreenSpinnerProps, 'state' | 'mode'>;
+export declare const ScreenSpinnerContainer: React.FC<ScreenSpinnerContainerProps>;
+export {};
+//# sourceMappingURL=ScreenSpinnerContainer.d.ts.map

package/dist/components/ScreenSpinner/ScreenSpinnerContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScreenSpinnerContainer.d.ts","sourceRoot":"","sources":["../../../src/components/ScreenSpinner/ScreenSpinnerContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAG7D,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAclD,KAAK,2BAA2B,GAAG,yBAAyB,CAAC,eAAe,CAAC,GAC3E,IAAI,CAAC,kBAAkB,EAAE,OAAO,GAAG,MAAM,CAAC,CAAC;AAE7C,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAiBxE,CAAC"}

package/dist/components/ScreenSpinner/ScreenSpinnerContainer.js

@@ -0,0 +1,33 @@
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { RootComponent } from '../RootComponent/RootComponent';
+import { ScreenSpinnerContext } from './context';
+const stateClassNames = {
+    cancelable: "vkuiScreenSpinner--state-cancelable",
+    done: "vkuiScreenSpinner--state-done",
+    error: "vkuiScreenSpinner--state-error"
+};
+const modeClassNames = {
+    shadow: "vkuiScreenSpinner--mode-shadow",
+    overlay: "vkuiScreenSpinner--mode-overlay"
+};
+export const ScreenSpinnerContainer = (_param)=>{
+    var { state = 'loading', mode = 'shadow' } = _param, restProps = _object_without_properties(_param, [
+        "state",
+        "mode"
+    ]);
+    return /*#__PURE__*/ _jsx(ScreenSpinnerContext.Provider, {
+        value: {
+            state
+        },
+        children: /*#__PURE__*/ _jsx(RootComponent, _object_spread({
+            baseClassName: classNames("vkuiScreenSpinner", modeClassNames[mode], state !== 'loading' && stateClassNames[state])
+        }, restProps))
+    });
+};
+ScreenSpinnerContainer.displayName = 'ScreenSpinnerContainer';
+
+//# sourceMappingURL=ScreenSpinnerContainer.js.map

package/dist/components/ScreenSpinner/ScreenSpinnerContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ScreenSpinner/ScreenSpinnerContainer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { ScreenSpinnerContext } from './context';\nimport { type ScreenSpinnerProps } from './types';\nimport styles from './ScreenSpinner.module.css';\n\nconst stateClassNames = {\n  cancelable: styles['ScreenSpinner--state-cancelable'],\n  done: styles['ScreenSpinner--state-done'],\n  error: styles['ScreenSpinner--state-error'],\n};\n\nconst modeClassNames = {\n  shadow: styles['ScreenSpinner--mode-shadow'],\n  overlay: styles['ScreenSpinner--mode-overlay'],\n};\n\ntype ScreenSpinnerContainerProps = HTMLAttributesWithRootRef<HTMLSpanElement> &\n  Pick<ScreenSpinnerProps, 'state' | 'mode'>;\n\nexport const ScreenSpinnerContainer: React.FC<ScreenSpinnerContainerProps> = ({\n  state = 'loading',\n  mode = 'shadow',\n  ...restProps\n}: ScreenSpinnerContainerProps) => {\n  return (\n    <ScreenSpinnerContext.Provider value={{ state }}>\n      <RootComponent\n        baseClassName={classNames(\n          styles['ScreenSpinner'],\n          modeClassNames[mode],\n          state !== 'loading' && stateClassNames[state],\n        )}\n        {...restProps}\n      />\n    </ScreenSpinnerContext.Provider>\n  );\n};\n\nScreenSpinnerContainer.displayName = 'ScreenSpinnerContainer';\n"],"names":["React","classNames","RootComponent","ScreenSpinnerContext","stateClassNames","cancelable","done","error","modeClassNames","shadow","overlay","ScreenSpinnerContainer","state","mode","restProps","Provider","value","baseClassName","displayName"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,oBAAoB,QAAQ,YAAY;AAIjD,MAAMC,kBAAkB;IACtBC,UAAU;IACVC,IAAI;IACJC,KAAK;AACP;AAEA,MAAMC,iBAAiB;IACrBC,MAAM;IACNC,OAAO;AACT;AAKA,OAAO,MAAMC,yBAAgE;QAAC,EAC5EC,QAAQ,SAAS,EACjBC,OAAO,QAAQ,EAEa,WADzBC;QAFHF;QACAC;;IAGA,qBACE,KAACV,qBAAqBY,QAAQ;QAACC,OAAO;YAAEJ;QAAM;kBAC5C,cAAA,KAACV;YACCe,eAAehB,gCAEbO,cAAc,CAACK,KAAK,EACpBD,UAAU,aAAaR,eAAe,CAACQ,MAAM;WAE3CE;;AAIZ,EAAE;AAEFH,uBAAuBO,WAAW,GAAG"}

package/dist/components/ScreenSpinner/ScreenSpinnerLoader.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { SpinnerProps } from '../Spinner/Spinner';
+export declare const ScreenSpinnerLoader: React.FC<SpinnerProps>;
+//# sourceMappingURL=ScreenSpinnerLoader.d.ts.map

package/dist/components/ScreenSpinner/ScreenSpinnerLoader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScreenSpinnerLoader.d.ts","sourceRoot":"","sources":["../../../src/components/ScreenSpinner/ScreenSpinnerLoader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAGvD,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAUtD,CAAC"}

package/dist/components/ScreenSpinner/ScreenSpinnerLoader.js

@@ -0,0 +1,22 @@
+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 } from "react/jsx-runtime";
+import * as React from 'react';
+import { Spinner } from '../Spinner/Spinner';
+export const ScreenSpinnerLoader = (_param)=>{
+    var { size = 'large', children = 'Пожалуйста, подождите...' } = _param, restProps = _object_without_properties(_param, [
+        "size",
+        "children"
+    ]);
+    return /*#__PURE__*/ _jsx(Spinner, _object_spread_props(_object_spread({
+        className: "vkuiScreenSpinner__spinner",
+        size: size,
+        noColor: true
+    }, restProps), {
+        children: children
+    }));
+};
+ScreenSpinnerLoader.displayName = 'ScreenSpinnerLoader';
+
+//# sourceMappingURL=ScreenSpinnerLoader.js.map

package/dist/components/ScreenSpinner/ScreenSpinnerLoader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ScreenSpinner/ScreenSpinnerLoader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Spinner } from '../Spinner/Spinner';\nimport type { SpinnerProps } from '../Spinner/Spinner';\nimport styles from './ScreenSpinner.module.css';\n\nexport const ScreenSpinnerLoader: React.FC<SpinnerProps> = ({\n  size = 'large',\n  children = 'Пожалуйста, подождите...',\n  ...restProps\n}: SpinnerProps) => {\n  return (\n    <Spinner className={styles['ScreenSpinner__spinner']} size={size} noColor {...restProps}>\n      {children}\n    </Spinner>\n  );\n};\n\nScreenSpinnerLoader.displayName = 'ScreenSpinnerLoader';\n"],"names":["React","Spinner","ScreenSpinnerLoader","size","children","restProps","className","noColor","displayName"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,OAAO,QAAQ,qBAAqB;AAI7C,OAAO,MAAMC,sBAA8C;QAAC,EAC1DC,OAAO,OAAO,EACdC,WAAW,0BAA0B,EAExB,WADVC;QAFHF;QACAC;;IAGA,qBACE,KAACH;QAAQK,SAAS;QAAoCH,MAAMA;QAAMI,OAAO;OAAKF;kBAC3ED;;AAGP,EAAE;AAEFF,oBAAoBM,WAAW,GAAG"}

package/dist/components/ScreenSpinner/ScreenSpinnerSwapIcon.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { HTMLAttributesWithRootRef } from '../../types';
+import { type ScreenSpinnerProps } from './types';
+type ScreenSpinnerSwapIconProps = HTMLAttributesWithRootRef<HTMLElement> & {
+    cancelLabel?: ScreenSpinnerProps['cancelLabel'];
+};
+export declare const ScreenSpinnerSwapIcon: React.FC<ScreenSpinnerSwapIconProps>;
+export {};
+//# sourceMappingURL=ScreenSpinnerSwapIcon.d.ts.map

package/dist/components/ScreenSpinner/ScreenSpinnerSwapIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScreenSpinnerSwapIcon.d.ts","sourceRoot":"","sources":["../../../src/components/ScreenSpinner/ScreenSpinnerSwapIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAK7D,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAGlD,KAAK,0BAA0B,GAAG,yBAAyB,CAAC,WAAW,CAAC,GAAG;IACzE,WAAW,CAAC,EAAE,kBAAkB,CAAC,aAAa,CAAC,CAAC;CACjD,CAAC;AA6BF,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAqBtE,CAAC"}

package/dist/components/ScreenSpinner/ScreenSpinnerSwapIcon.js

@@ -0,0 +1,58 @@
+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 } from "react/jsx-runtime";
+import * as React from 'react';
+import { Icon24Cancel } from '@vkontakte/icons';
+import { mergeCalls } from '../../lib/mergeCalls';
+import { clickByKeyboardHandler } from '../../lib/utils';
+import { RootComponent } from '../RootComponent/RootComponent';
+import { Icon48CancelCircle } from './Icon48CancelCircle';
+import { Icon48DoneOutline } from './Icon48DoneOutline';
+import { ScreenSpinnerContext } from './context';
+const ScreenSpinnerCancelIcon = (_param)=>{
+    var { onKeyDown, 'aria-label': ariaLabel = 'Отменить' } = _param, restProps = _object_without_properties(_param, [
+        "onKeyDown",
+        'aria-label'
+    ]);
+    const handlers = mergeCalls({
+        onKeyDown: clickByKeyboardHandler
+    }, {
+        onKeyDown
+    });
+    let clickableProps = _object_spread_props(_object_spread({}, handlers), {
+        'tabIndex': 0,
+        'role': 'button',
+        'aria-label': ariaLabel
+    });
+    return /*#__PURE__*/ _jsx(RootComponent, _object_spread_props(_object_spread({
+        baseClassName: "vkuiScreenSpinner__icon"
+    }, clickableProps, restProps), {
+        children: /*#__PURE__*/ _jsx(Icon24Cancel, {})
+    }));
+};
+ScreenSpinnerCancelIcon.displayName = 'ScreenSpinnerCancelIcon';
+export const ScreenSpinnerSwapIcon = (_param)=>{
+    var { cancelLabel } = _param, restProps = _object_without_properties(_param, [
+        "cancelLabel"
+    ]);
+    const { state } = React.useContext(ScreenSpinnerContext);
+    if (state === 'cancelable') {
+        return /*#__PURE__*/ _jsx(ScreenSpinnerCancelIcon, _object_spread({
+            "aria-label": cancelLabel
+        }, restProps));
+    }
+    const Icon = {
+        loading: ()=>null,
+        done: Icon48DoneOutline,
+        error: Icon48CancelCircle
+    }[state];
+    return /*#__PURE__*/ _jsx(RootComponent, _object_spread_props(_object_spread({
+        baseClassName: "vkuiScreenSpinner__icon"
+    }, restProps), {
+        children: /*#__PURE__*/ _jsx(Icon, {})
+    }));
+};
+ScreenSpinnerSwapIcon.displayName = 'ScreenSpinnerSwapIcon';
+
+//# sourceMappingURL=ScreenSpinnerSwapIcon.js.map

package/dist/components/ScreenSpinner/ScreenSpinnerSwapIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ScreenSpinner/ScreenSpinnerSwapIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Cancel } from '@vkontakte/icons';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { clickByKeyboardHandler } from '../../lib/utils';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Icon48CancelCircle } from './Icon48CancelCircle';\nimport { Icon48DoneOutline } from './Icon48DoneOutline';\nimport { ScreenSpinnerContext } from './context';\nimport { type ScreenSpinnerProps } from './types';\nimport styles from './ScreenSpinner.module.css';\n\ntype ScreenSpinnerSwapIconProps = HTMLAttributesWithRootRef<HTMLElement> & {\n  cancelLabel?: ScreenSpinnerProps['cancelLabel'];\n};\n\nconst ScreenSpinnerCancelIcon: React.FC<ScreenSpinnerSwapIconProps> = ({\n  onKeyDown,\n  'aria-label': ariaLabel = 'Отменить',\n  ...restProps\n}: ScreenSpinnerSwapIconProps) => {\n  const handlers = mergeCalls(\n    { onKeyDown: clickByKeyboardHandler },\n    {\n      onKeyDown,\n    },\n  );\n  let clickableProps: React.HTMLAttributes<HTMLSpanElement> = {\n    ...handlers,\n    'tabIndex': 0,\n    'role': 'button',\n    'aria-label': ariaLabel,\n  };\n\n  return (\n    <RootComponent baseClassName={styles['ScreenSpinner__icon']} {...clickableProps} {...restProps}>\n      <Icon24Cancel />\n    </RootComponent>\n  );\n};\n\nScreenSpinnerCancelIcon.displayName = 'ScreenSpinnerCancelIcon';\n\nexport const ScreenSpinnerSwapIcon: React.FC<ScreenSpinnerSwapIconProps> = ({\n  cancelLabel,\n  ...restProps\n}: ScreenSpinnerSwapIconProps) => {\n  const { state } = React.useContext(ScreenSpinnerContext);\n\n  if (state === 'cancelable') {\n    return <ScreenSpinnerCancelIcon aria-label={cancelLabel} {...restProps} />;\n  }\n\n  const Icon = {\n    loading: () => null,\n    done: Icon48DoneOutline,\n    error: Icon48CancelCircle,\n  }[state];\n\n  return (\n    <RootComponent baseClassName={styles['ScreenSpinner__icon']} {...restProps}>\n      <Icon />\n    </RootComponent>\n  );\n};\n\nScreenSpinnerSwapIcon.displayName = 'ScreenSpinnerSwapIcon';\n"],"names":["React","Icon24Cancel","mergeCalls","clickByKeyboardHandler","RootComponent","Icon48CancelCircle","Icon48DoneOutline","ScreenSpinnerContext","ScreenSpinnerCancelIcon","onKeyDown","ariaLabel","restProps","handlers","clickableProps","baseClassName","displayName","ScreenSpinnerSwapIcon","cancelLabel","state","useContext","aria-label","Icon","loading","done","error"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,mBAAmB;AAChD,SAASC,UAAU,QAAQ,uBAAuB;AAClD,SAASC,sBAAsB,QAAQ,kBAAkB;AAEzD,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,kBAAkB,QAAQ,uBAAuB;AAC1D,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,SAASC,oBAAoB,QAAQ,YAAY;AAQjD,MAAMC,0BAAgE;QAAC,EACrEC,SAAS,EACT,cAAcC,YAAY,UAAU,EAET,WADxBC;QAFHF;QACA;;IAGA,MAAMG,WAAWV,WACf;QAAEO,WAAWN;IAAuB,GACpC;QACEM;IACF;IAEF,IAAII,iBAAwD,wCACvDD;QACH,YAAY;QACZ,QAAQ;QACR,cAAcF;;IAGhB,qBACE,KAACN;QAAcU,aAAa;OAAqCD,gBAAoBF;kBACnF,cAAA,KAACV;;AAGP;AAEAO,wBAAwBO,WAAW,GAAG;AAEtC,OAAO,MAAMC,wBAA8D;QAAC,EAC1EC,WAAW,EAEgB,WADxBN;QADHM;;IAGA,MAAM,EAAEC,KAAK,EAAE,GAAGlB,MAAMmB,UAAU,CAACZ;IAEnC,IAAIW,UAAU,cAAc;QAC1B,qBAAO,KAACV;YAAwBY,cAAYH;WAAiBN;IAC/D;IAEA,MAAMU,OAAO;QACXC,SAAS,IAAM;QACfC,MAAMjB;QACNkB,OAAOnB;IACT,CAAC,CAACa,MAAM;IAER,qBACE,KAACd;QAAcU,aAAa;OAAqCH;kBAC/D,cAAA,KAACU;;AAGP,EAAE;AAEFL,sBAAsBD,WAAW,GAAG"}

package/dist/components/ScreenSpinner/context.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { type ScreenSpinnerProps } from './types';
+export interface ScreenSpinnerContextProps {
+    state: NonNullable<ScreenSpinnerProps['state']>;
+}
+export declare const ScreenSpinnerContext: React.Context<ScreenSpinnerContextProps>;
+//# sourceMappingURL=context.d.ts.map

package/dist/components/ScreenSpinner/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/components/ScreenSpinner/context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD,MAAM,WAAW,yBAAyB;IACxC,KAAK,EAAE,WAAW,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC,CAAC;CACjD;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,OAAO,CAAC,yBAAyB,CAGtE,CAAC"}

package/dist/components/ScreenSpinner/context.js

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export const ScreenSpinnerContext = React.createContext({
+    state: 'loading'
+});
+
+//# sourceMappingURL=context.js.map

package/dist/components/ScreenSpinner/context.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ScreenSpinner/context.ts"],"sourcesContent":["import * as React from 'react';\nimport { type ScreenSpinnerProps } from './types';\n\nexport interface ScreenSpinnerContextProps {\n  state: NonNullable<ScreenSpinnerProps['state']>;\n}\n\nexport const ScreenSpinnerContext: React.Context<ScreenSpinnerContextProps> =\n  React.createContext<ScreenSpinnerContextProps>({\n    state: 'loading',\n  });\n"],"names":["React","ScreenSpinnerContext","createContext","state"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAO/B,OAAO,MAAMC,uBACXD,MAAME,aAAa,CAA4B;IAC7CC,OAAO;AACT,GAAG"}

package/dist/components/ScreenSpinner/types.d.ts

@@ -0,0 +1,7 @@
+import type { SpinnerProps } from '../Spinner/Spinner';
+export interface ScreenSpinnerProps extends SpinnerProps {
+    state?: 'loading' | 'cancelable' | 'done' | 'error';
+    mode?: 'shadow' | 'overlay';
+    cancelLabel?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/ScreenSpinner/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ScreenSpinner/types.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEvD,MAAM,WAAW,kBAAmB,SAAQ,YAAY;IACtD,KAAK,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,MAAM,GAAG,OAAO,CAAC;IACpD,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB"}

package/dist/components/ScreenSpinner/types.js

@@ -0,0 +1,3 @@
+export { };
+
+//# sourceMappingURL=types.js.map

package/dist/components/ScreenSpinner/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ScreenSpinner/types.tsx"],"sourcesContent":["import type { SpinnerProps } from '../Spinner/Spinner';\n\nexport interface ScreenSpinnerProps extends SpinnerProps {\n  state?: 'loading' | 'cancelable' | 'done' | 'error';\n  mode?: 'shadow' | 'overlay';\n  cancelLabel?: string;\n}\n"],"names":[],"mappings":"AAEA,WAIC"}

package/dist/components/ScrollArrow/ScrollArrow.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { HasRootRef } from '../../types';
+import type { HasRootRef } from '../../types';
 export interface ScrollArrowProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, HasRootRef<HTMLButtonElement> {
     /**
      * Направление стрелки

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

@@ -1 +1 @@
-{"version":3,"file":"ScrollArrow.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollArrow/ScrollArrow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAiCzC,MAAM,WAAW,gBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,UAAU,CAAC,iBAAiB,CAAC;IAC/B;;OAEG;IACH,SAAS,EAAE,IAAI,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IAC5C;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;GAKG;AACH,eAAO,MAAM,WAAW,2EAOrB,gBAAgB,KAAG,KAAK,CAAC,SAoB3B,CAAC"}
+{"version":3,"file":"ScrollArrow.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollArrow/ScrollArrow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAiC9C,MAAM,WAAW,gBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,UAAU,CAAC,iBAAiB,CAAC;IAC/B;;OAEG;IACH,SAAS,EAAE,IAAI,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IAC5C;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;GAKG;AACH,eAAO,MAAM,WAAW,2EAOrB,gBAAgB,KAAG,KAAK,CAAC,SAoB3B,CAAC"}

package/dist/components/ScrollArrow/ScrollArrow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ScrollArrow/ScrollArrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Chevron, Icon24Chevron } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './ScrollArrow.module.css';\n\nconst stylesSize = {\n  m: styles['ScrollArrow--size-m'],\n  l: styles['ScrollArrow--size-l'],\n};\n\nconst stylesDirection = {\n  up: styles['ScrollArrow--direction-up'],\n  right: styles['ScrollArrow--direction-right'],\n  down: styles['ScrollArrow--direction-down'],\n  left: styles['ScrollArrow--direction-left'],\n};\n\nconst labelDirection = {\n  up: 'Назад',\n  right: 'Вперед',\n  down: 'Вперед',\n  left: 'Назад',\n};\n\nconst ArrowIcon = ({ size }: Pick<ScrollArrowProps, 'size'>) => {\n  let Icon = Icon24Chevron;\n  if (size === 'm') {\n    Icon = Icon16Chevron;\n  }\n\n  return <Icon className={styles['ScrollArrow__defaultIcon']} />;\n};\n\nexport interface ScrollArrowProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    HasRootRef<HTMLButtonElement> {\n  /**\n   * Направление стрелки\n   */\n  direction: 'up' | 'right' | 'down' | 'left';\n  /**\n   * Размер стрелки\n   */\n  size?: 'm' | 'l';\n  /**\n   * Смещает иконку кнопки навигации по вертикали.\n   */\n  offsetY?: number | string;\n  label?: string;\n}\n\n/**\n * Компонент стрелки. Используется в [HorizontalScroll](#/HorizontalScroll) и [Gallery](#/Gallery).\n *\n * @since 5.4.0\n * @see https://vkcom.github.io/VKUI/#/ScrollArrow\n */\nexport const ScrollArrow = ({\n  size = 'l',\n  offsetY,\n  direction,\n  label: labelProp,\n  children = <ArrowIcon size={size} />,\n  ...restProps\n}: ScrollArrowProps): React.ReactNode => {\n  const label = labelProp ?? labelDirection[direction];\n\n  return (\n    <RootComponent\n      Component=\"button\"\n      type=\"button\"\n      baseClassName={classNames(\n        styles['ScrollArrow'],\n        stylesSize[size],\n        stylesDirection[direction],\n      )}\n      {...restProps}\n    >\n      {label && <VisuallyHidden>{label}</VisuallyHidden>}\n      <span className={styles['ScrollArrow__icon']} style={offsetY ? { top: offsetY } : undefined}>\n        {children}\n      </span>\n    </RootComponent>\n  );\n};\n"],"names":["React","Icon16Chevron","Icon24Chevron","classNames","RootComponent","VisuallyHidden","stylesSize","m","l","stylesDirection","up","right","down","left","labelDirection","ArrowIcon","size","Icon","className","ScrollArrow","offsetY","direction","label","labelProp","children","restProps","Component","type","baseClassName","span","style","top","undefined"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,aAAa,QAAQ,mBAAmB;AAChE,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,cAAc,QAAQ,mCAAmC;AAGlE,MAAMC,aAAa;IACjBC,CAAC;IACDC,CAAC;AACH;AAEA,MAAMC,kBAAkB;IACtBC,EAAE;IACFC,KAAK;IACLC,IAAI;IACJC,IAAI;AACN;AAEA,MAAMC,iBAAiB;IACrBJ,IAAI;IACJC,OAAO;IACPC,MAAM;IACNC,MAAM;AACR;AAEA,MAAME,YAAY,CAAC,EAAEC,IAAI,EAAkC;IACzD,IAAIC,OAAOf;IACX,IAAIc,SAAS,KAAK;QAChBC,OAAOhB;IACT;IAEA,qBAAO,KAACgB;QAAKC,SAAS;;AACxB;AAoBA;;;;;CAKC,GACD,OAAO,MAAMC,cAAc;QAAC,EAC1BH,OAAO,GAAG,EACVI,OAAO,EACPC,SAAS,EACTC,OAAOC,SAAS,EAChBC,yBAAW,KAACT;QAAUC,MAAMA;MAAQ,EAEnB,WADdS;QALHT;QACAI;QACAC;QACAC;QACAE;;IAGA,MAAMF,QAAQC,sBAAAA,uBAAAA,YAAaT,cAAc,CAACO,UAAU;IAEpD,qBACE,MAACjB;QACCsB,WAAU;QACVC,MAAK;QACLC,eAAezB,8BAEbG,UAAU,CAACU,KAAK,EAChBP,eAAe,CAACY,UAAU;OAExBI;;YAEHH,uBAAS,KAACjB;0BAAgBiB;;0BAC3B,KAACO;gBAAKX,SAAS;gBAA+BY,OAAOV,UAAU;oBAAEW,KAAKX;gBAAQ,IAAIY;0BAC/ER;;;;AAIT,EAAE"}
+{"version":3,"sources":["../../../src/components/ScrollArrow/ScrollArrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Chevron, Icon24Chevron } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './ScrollArrow.module.css';\n\nconst stylesSize = {\n  m: styles['ScrollArrow--size-m'],\n  l: styles['ScrollArrow--size-l'],\n};\n\nconst stylesDirection = {\n  up: styles['ScrollArrow--direction-up'],\n  right: styles['ScrollArrow--direction-right'],\n  down: styles['ScrollArrow--direction-down'],\n  left: styles['ScrollArrow--direction-left'],\n};\n\nconst labelDirection = {\n  up: 'Назад',\n  right: 'Вперед',\n  down: 'Вперед',\n  left: 'Назад',\n};\n\nconst ArrowIcon = ({ size }: Pick<ScrollArrowProps, 'size'>) => {\n  let Icon = Icon24Chevron;\n  if (size === 'm') {\n    Icon = Icon16Chevron;\n  }\n\n  return <Icon className={styles['ScrollArrow__defaultIcon']} />;\n};\n\nexport interface ScrollArrowProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    HasRootRef<HTMLButtonElement> {\n  /**\n   * Направление стрелки\n   */\n  direction: 'up' | 'right' | 'down' | 'left';\n  /**\n   * Размер стрелки\n   */\n  size?: 'm' | 'l';\n  /**\n   * Смещает иконку кнопки навигации по вертикали.\n   */\n  offsetY?: number | string;\n  label?: string;\n}\n\n/**\n * Компонент стрелки. Используется в [HorizontalScroll](#/HorizontalScroll) и [Gallery](#/Gallery).\n *\n * @since 5.4.0\n * @see https://vkcom.github.io/VKUI/#/ScrollArrow\n */\nexport const ScrollArrow = ({\n  size = 'l',\n  offsetY,\n  direction,\n  label: labelProp,\n  children = <ArrowIcon size={size} />,\n  ...restProps\n}: ScrollArrowProps): React.ReactNode => {\n  const label = labelProp ?? labelDirection[direction];\n\n  return (\n    <RootComponent\n      Component=\"button\"\n      type=\"button\"\n      baseClassName={classNames(\n        styles['ScrollArrow'],\n        stylesSize[size],\n        stylesDirection[direction],\n      )}\n      {...restProps}\n    >\n      {label && <VisuallyHidden>{label}</VisuallyHidden>}\n      <span className={styles['ScrollArrow__icon']} style={offsetY ? { top: offsetY } : undefined}>\n        {children}\n      </span>\n    </RootComponent>\n  );\n};\n"],"names":["React","Icon16Chevron","Icon24Chevron","classNames","RootComponent","VisuallyHidden","stylesSize","m","l","stylesDirection","up","right","down","left","labelDirection","ArrowIcon","size","Icon","className","ScrollArrow","offsetY","direction","label","labelProp","children","restProps","Component","type","baseClassName","span","style","top","undefined"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,aAAa,QAAQ,mBAAmB;AAChE,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,cAAc,QAAQ,mCAAmC;AAGlE,MAAMC,aAAa;IACjBC,CAAC;IACDC,CAAC;AACH;AAEA,MAAMC,kBAAkB;IACtBC,EAAE;IACFC,KAAK;IACLC,IAAI;IACJC,IAAI;AACN;AAEA,MAAMC,iBAAiB;IACrBJ,IAAI;IACJC,OAAO;IACPC,MAAM;IACNC,MAAM;AACR;AAEA,MAAME,YAAY,CAAC,EAAEC,IAAI,EAAkC;IACzD,IAAIC,OAAOf;IACX,IAAIc,SAAS,KAAK;QAChBC,OAAOhB;IACT;IAEA,qBAAO,KAACgB;QAAKC,SAAS;;AACxB;AAoBA;;;;;CAKC,GACD,OAAO,MAAMC,cAAc;QAAC,EAC1BH,OAAO,GAAG,EACVI,OAAO,EACPC,SAAS,EACTC,OAAOC,SAAS,EAChBC,yBAAW,KAACT;QAAUC,MAAMA;MAAQ,EAEnB,WADdS;QALHT;QACAI;QACAC;QACAC;QACAE;;IAGA,MAAMF,QAAQC,sBAAAA,uBAAAA,YAAaT,cAAc,CAACO,UAAU;IAEpD,qBACE,MAACjB;QACCsB,WAAU;QACVC,MAAK;QACLC,eAAezB,8BAEbG,UAAU,CAACU,KAAK,EAChBP,eAAe,CAACY,UAAU;OAExBI;;YAEHH,uBAAS,KAACjB;0BAAgBiB;;0BAC3B,KAACO;gBAAKX,SAAS;gBAA+BY,OAAOV,UAAU;oBAAEW,KAAKX;gBAAQ,IAAIY;0BAC/ER;;;;AAIT,EAAE"}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { HasRef, HasRootRef } from '../../types';
-import { IconButtonProps } from '../IconButton/IconButton';
+import type { HasRef, HasRootRef } from '../../types';
+import { type IconButtonProps } from '../IconButton/IconButton';
 export type RenderIconButtonFn = (icon: React.ReactNode, props?: Partial<IconButtonProps>) => React.ReactNode;
 export interface SearchProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRootRef<HTMLDivElement>, HasRef<HTMLInputElement> {
     /**

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":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEjD,OAAO,EAAc,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAKvE,MAAM,MAAM,kBAAkB,GAAG,CAC/B,IAAI,EAAE,KAAK,CAAC,SAAS,EACrB,KAAK,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,KAC7B,KAAK,CAAC,SAAS,CAAC;AAErB,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,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,QAAQ,EAAE,kBAAkB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAC7E,WAAW,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;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;CAC1D;AAED;;GAEG;AACH,eAAO,MAAM,MAAM,8NAmBhB,WAAW,KAAG,KAAK,CAAC,SAwKtB,CAAC"}
+{"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../../../src/components/Search/Search.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,OAAO,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEtD,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,KAC7B,KAAK,CAAC,SAAS,CAAC;AAErB,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,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,QAAQ,EAAE,kBAAkB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAC7E,WAAW,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;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;CAC1D;AAED;;GAEG;AACH,eAAO,MAAM,MAAM,8NAmBhB,WAAW,KAAG,KAAK,CAAC,SAwKtB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Search/Search.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Clear, Icon16SearchOutline, Icon24Cancel } from '@vkontakte/icons';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { useBooleanState } from '../../hooks/useBooleanState';\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 { HasRef, HasRootRef } from '../../types';\nimport { Button } from '../Button/Button';\nimport { IconButton, 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>,\n) => React.ReactNode;\n\nexport interface SearchProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLInputElement> {\n  /**\n   * iOS only. Текст кнопки \"отмена\", которая чистит текстовое поле и убирает фокус.\n   */\n  after?: React.ReactNode;\n  before?: React.ReactNode;\n  icon?: React.ReactNode | ((renderFn: RenderIconButtonFn) => React.ReactNode);\n  onIconClick?: React.PointerEventHandler<HTMLElement>;\n  defaultValue?: string;\n  iconLabel?: string;\n  clearLabel?: string;\n  /**\n   * Удаляет отступы у компонента\n   */\n  noPadding?: boolean;\n  /**\n   * Текст для кнопки Найти\n   */\n  findButtonText?: string;\n  /**\n   * Коллбэк для кнопки Найти\n   */\n  onFindButtonClick?: React.MouseEventHandler<HTMLElement>;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/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  noPadding,\n  getRootRef,\n  findButtonText = 'Найти',\n  onFindButtonClick,\n  ...inputProps\n}: SearchProps): React.ReactNode => {\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 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['Search__icon']}\n      onFocus={setFocusedTrue}\n      onBlur={setFocusedFalse}\n      onClick={noop}\n      {...props}\n    >\n      <VisuallyHidden>{iconLabel}</VisuallyHidden>\n      {icon}\n    </IconButton>\n  );\n\n  return (\n    <div\n      className={classNames(\n        'vkuiInternalSearch',\n        styles['Search'],\n        sizeY === 'none' && styles['Search--sizeY-none'],\n        sizeY === 'compact' && styles['Search--sizeY-compact'],\n        isFocused && styles['Search--focused'],\n        hasValue && styles['Search--has-value'],\n        after && styles['Search--has-after'],\n        iconProp && styles['Search--has-icon'],\n        inputProps.disabled && styles['Search--disabled'],\n        !noPadding && styles['Search--withPadding'],\n        className,\n      )}\n      ref={getRootRef}\n      style={style}\n    >\n      <div className={styles['Search__field']}>\n        <label htmlFor={inputId} className={styles['Search__label']}>\n          {placeholder}\n        </label>\n        <div className={styles['Search__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['Search__nativeInput']}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            onChange={callMultiple(onChange, checkHasValue)}\n          />\n        </div>\n        <div className={styles['Search__controls']}>\n          {iconProp &&\n            (typeof iconProp === 'function'\n              ? iconProp(renderIconButton)\n              : renderIconButton(iconProp))}\n          <IconButton\n            hoverMode=\"opacity\"\n            onPointerDown={onIconCancelClickStart}\n            onClick={onCancel}\n            className={styles['Search__icon']}\n            tabIndex={hasValue ? undefined : -1}\n            disabled={inputProps.disabled}\n          >\n            <VisuallyHidden>{clearLabel}</VisuallyHidden>\n            {platform === 'ios' ? <Icon16Clear /> : <Icon24Cancel />}\n          </IconButton>\n          {adaptiveSizeY.compact && onFindButtonClick && (\n            <Button\n              mode=\"primary\"\n              size=\"m\"\n              className={classNames(styles['Search__findButton'], adaptiveSizeY.compact.className)}\n              focusVisibleMode=\"inside\"\n              onClick={onFindButtonClick}\n              tabIndex={hasValue ? undefined : -1}\n            >\n              {findButtonText}\n            </Button>\n          )}\n        </div>\n      </div>\n      {platform === 'ios' && after && (\n        <Button\n          mode=\"tertiary\"\n          size=\"m\"\n          className={styles['Search__after']}\n          focusVisibleMode=\"inside\"\n          onClick={onCancel}\n          onFocus={setFocusedTrue}\n          onBlur={setFocusedFalse}\n        >\n          <span className={styles['Search__afterText']}>{after}</span>\n        </Button>\n      )}\n    </div>\n  );\n};\n"],"names":["React","Icon16Clear","Icon16SearchOutline","Icon24Cancel","classNames","noop","useAdaptivity","useAdaptivityConditionalRender","useBooleanState","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","noPadding","getRootRef","findButtonText","onFindButtonClick","inputProps","inputRef","value","isFocused","setTrue","setFocusedTrue","setFalse","setFocusedFalse","generatedId","useId","inputId","hasValue","setHasValue","useState","Boolean","defaultValue","checkHasValue","e","currentTarget","sizeY","adaptiveSizeY","platform","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","div","disabled","ref","label","htmlFor","Component","type","level","weight","tabIndex","compact","mode","size","focusVisibleMode","span"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,WAAW,EAAEC,mBAAmB,EAAEC,YAAY,QAAQ,mBAAmB;AAClF,SAASC,UAAU,EAAEC,IAAI,QAAQ,kBAAkB;AACnD,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,8BAA8B,QAAQ,6CAA6C;AAC5F,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,0BAA0B,QAAQ,yCAAyC;AACpF,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,YAAY,QAAQ,yBAAyB;AACtD,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,yBAAyB,QAAQ,sCAAsC;AAEhF,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,UAAU,QAAyB,2BAA2B;AACvE,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,cAAc,QAAQ,mCAAmC;AAoClE;;CAEC,GACD,OAAO,MAAMC,SAAS;QAAC,EACrBC,IAAIC,MAAM,EACVC,uBAAS,KAACpB,wBAAsB,EAChCqB,SAAS,EACTC,cAAc,OAAO,EACrBC,QAAQ,QAAQ,EAChBC,MAAM,EACNC,MAAMC,QAAQ,EACdC,WAAW,EACXC,KAAK,EACLC,eAAe,KAAK,EACpBC,QAAQ,EACRC,SAAS,EACTC,aAAa,UAAU,EACvBC,SAAS,EACTC,UAAU,EACVC,iBAAiB,OAAO,EACxBC,iBAAiB,EAEL,WADTC;QAjBHnB;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAW/B,aAAaiB;IAC9B,MAAM,EACJe,OAAOC,SAAS,EAChBC,SAASC,cAAc,EACvBC,UAAUC,eAAe,EAC1B,GAAGtC,gBAAgB;IACpB,MAAMuC,cAAc/C,MAAMgD,KAAK;IAC/B,MAAMC,UAAU5B,SAASA,SAAS,CAAC,OAAO,EAAE0B,YAAY,CAAC;IAEzD,MAAM,CAACG,UAAUC,YAAY,GAAGnD,MAAMoD,QAAQ,CAAU,IACtDC,QAAQd,WAAWE,KAAK,IAAIF,WAAWe,YAAY;IAErD,MAAMC,gBAA4D,CAACC,IACjEL,YAAYE,QAAQG,EAAEC,aAAa,CAAChB,KAAK;IAE3C,MAAM,EAAEiB,QAAQ,MAAM,EAAE,GAAGpD;IAC3B,MAAM,EAAEoD,OAAOC,aAAa,EAAE,GAAGpD;IACjC,MAAMqD,WAAWjD;IAEjB,MAAMkD,UAAU,CAACL;QACfZ;QACAL,WAAWsB,OAAO,IAAItB,WAAWsB,OAAO,CAACL;IAC3C;IAEA,MAAMM,SAAS,CAACN;QACdV;QACAP,WAAWuB,MAAM,IAAIvB,WAAWuB,MAAM,CAACN;IACzC;IAEA,MAAMO,WAAW/D,MAAMgE,WAAW,CAAC;YAEFC,kCAO/BzB;QARA,6DAA6D;QAC7D,MAAM0B,0BAAyBD,mCAAAA,OAAOE,wBAAwB,CAC5DC,iBAAiBC,SAAS,EAC1B,sBAF6BJ,uDAAAA,iCAG5BK,GAAG;QACNJ,mCAAAA,6CAAAA,uBAAwBK,IAAI,CAAC/B,SAASgC,OAAO,EAAE;QAE/C,MAAMC,MAAM,IAAIC,MAAM,SAAS;YAAEC,SAAS;QAAK;SAC/CnC,oBAAAA,SAASgC,OAAO,cAAhBhC,wCAAAA,kBAAkBoC,aAAa,CAACH;IAClC,GAAG;QAACjC;KAAS;IAEb,MAAMqC,mBAA2D7E,MAAMgE,WAAW,CAChF,CAACR,IAAM3B,wBAAAA,kCAAAA,YAAc2B,IACrB;QAAC3B;KAAY;IAGf,MAAMiD,yBAAiE9E,MAAMgE,WAAW,CACtF,CAACR;YAEChB;QADAgB,EAAEuB,cAAc;SAChBvC,oBAAAA,SAASgC,OAAO,cAAhBhC,wCAAAA,kBAAkBwC,KAAK;QACvB,IAAInE,gBAAgB;YAClBkD;QACF;IACF,GACA;QAACvB;QAAUuB;KAAS;IAGtBjD,0BAA0B;QACxB,IAAIyB,WAAWE,KAAK,KAAKwC,WAAW;YAClC9B,YAAYE,QAAQd,WAAWE,KAAK;QACtC;IACF,GAAG;QAACF,WAAWE,KAAK;KAAC;IAErB/B,2BAA2B8B,UAAU;QACnCW,YAAYE,QAAQd,WAAWe,YAAY;IAC7C;IAEA,MAAM4B,mBAAuC,CAACvD,MAAMwD,QAAQ,CAAC,CAAC,iBAC5D,MAACnE;YACCoE,WAAU;YACVC,eAAeR;YACftD,SAAS;YACTsC,SAASjB;YACTkB,QAAQhB;YACRwC,SAASjF;WACL8E;;8BAEJ,KAACjE;8BAAgBe;;gBAChBN;;;IAIL,qBACE,MAAC4D;QACChE,WAAWnB,WACT,oCAEAsD,UAAU,oCACVA,UAAU,0CACVhB,oCACAQ,qCACAzB,kCACAG,oCACAW,WAAWiD,QAAQ,4BACnB,CAACrD,wCACDZ;QAEFkE,KAAKrD;QACLN,OAAOA;;0BAEP,MAACyD;gBAAIhE,SAAS;;kCACZ,KAACmE;wBAAMC,SAAS1C;wBAAS1B,SAAS;kCAC/BC;;kCAEH,MAAC+D;wBAAIhE,SAAS;;4BACXD;0CACD,KAACL;gCACC2E,WAAU;gCACVC,MAAK;gCACLC,OAAM;gCACNC,QAAO;+BACHxD;gCACJnB,IAAI6B;gCACJzB,aAAaA;gCACbO,cAAcA;gCACdK,YAAYI;gCACZjB,SAAS;gCACTsC,SAASA;gCACTC,QAAQA;gCACR9B,UAAUpB,aAAaoB,UAAUuB;;;;kCAGrC,MAACgC;wBAAIhE,SAAS;;4BACXK,YACE,CAAA,OAAOA,aAAa,aACjBA,SAASsD,oBACTA,iBAAiBtD,SAAQ;0CAC/B,MAACZ;gCACCoE,WAAU;gCACVC,eAAeP;gCACfQ,SAASvB;gCACTxC,SAAS;gCACTyE,UAAU9C,WAAW+B,YAAY,CAAC;gCAClCO,UAAUjD,WAAWiD,QAAQ;;kDAE7B,KAACtE;kDAAgBgB;;oCAChB0B,aAAa,sBAAQ,KAAC3D,iCAAiB,KAACE;;;4BAE1CwD,cAAcsC,OAAO,IAAI3D,mCACxB,KAACvB;gCACCmF,MAAK;gCACLC,MAAK;gCACL5E,WAAWnB,qCAAyCuD,cAAcsC,OAAO,CAAC1E,SAAS;gCACnF6E,kBAAiB;gCACjBd,SAAShD;gCACT0D,UAAU9C,WAAW+B,YAAY,CAAC;0CAEjC5C;;;;;;YAKRuB,aAAa,SAASnC,uBACrB,KAACV;gBACCmF,MAAK;gBACLC,MAAK;gBACL5E,SAAS;gBACT6E,kBAAiB;gBACjBd,SAASvB;gBACTF,SAASjB;gBACTkB,QAAQhB;0BAER,cAAA,KAACuD;oBAAK9E,SAAS;8BAAgCE;;;;;AAKzD,EAAE"}
+{"version":3,"sources":["../../../src/components/Search/Search.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Clear, Icon16SearchOutline, Icon24Cancel } from '@vkontakte/icons';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { useBooleanState } from '../../hooks/useBooleanState';\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 { 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>,\n) => React.ReactNode;\n\nexport interface SearchProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLInputElement> {\n  /**\n   * iOS only. Текст кнопки \"отмена\", которая чистит текстовое поле и убирает фокус.\n   */\n  after?: React.ReactNode;\n  before?: React.ReactNode;\n  icon?: React.ReactNode | ((renderFn: RenderIconButtonFn) => React.ReactNode);\n  onIconClick?: React.PointerEventHandler<HTMLElement>;\n  defaultValue?: string;\n  iconLabel?: string;\n  clearLabel?: string;\n  /**\n   * Удаляет отступы у компонента\n   */\n  noPadding?: boolean;\n  /**\n   * Текст для кнопки Найти\n   */\n  findButtonText?: string;\n  /**\n   * Коллбэк для кнопки Найти\n   */\n  onFindButtonClick?: React.MouseEventHandler<HTMLElement>;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/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  noPadding,\n  getRootRef,\n  findButtonText = 'Найти',\n  onFindButtonClick,\n  ...inputProps\n}: SearchProps): React.ReactNode => {\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 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['Search__icon']}\n      onFocus={setFocusedTrue}\n      onBlur={setFocusedFalse}\n      onClick={noop}\n      {...props}\n    >\n      <VisuallyHidden>{iconLabel}</VisuallyHidden>\n      {icon}\n    </IconButton>\n  );\n\n  return (\n    <div\n      className={classNames(\n        'vkuiInternalSearch',\n        styles['Search'],\n        sizeY === 'none' && styles['Search--sizeY-none'],\n        sizeY === 'compact' && styles['Search--sizeY-compact'],\n        isFocused && styles['Search--focused'],\n        hasValue && styles['Search--has-value'],\n        after && styles['Search--has-after'],\n        iconProp && styles['Search--has-icon'],\n        inputProps.disabled && styles['Search--disabled'],\n        !noPadding && styles['Search--withPadding'],\n        className,\n      )}\n      ref={getRootRef}\n      style={style}\n    >\n      <div className={styles['Search__field']}>\n        <label htmlFor={inputId} className={styles['Search__label']}>\n          {placeholder}\n        </label>\n        <div className={styles['Search__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['Search__nativeInput']}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            onChange={callMultiple(onChange, checkHasValue)}\n          />\n        </div>\n        <div className={styles['Search__controls']}>\n          {iconProp &&\n            (typeof iconProp === 'function'\n              ? iconProp(renderIconButton)\n              : renderIconButton(iconProp))}\n          <IconButton\n            hoverMode=\"opacity\"\n            onPointerDown={onIconCancelClickStart}\n            onClick={onCancel}\n            className={styles['Search__icon']}\n            tabIndex={hasValue ? undefined : -1}\n            disabled={inputProps.disabled}\n          >\n            <VisuallyHidden>{clearLabel}</VisuallyHidden>\n            {platform === 'ios' ? <Icon16Clear /> : <Icon24Cancel />}\n          </IconButton>\n          {adaptiveSizeY.compact && onFindButtonClick && (\n            <Button\n              mode=\"primary\"\n              size=\"m\"\n              className={classNames(styles['Search__findButton'], adaptiveSizeY.compact.className)}\n              focusVisibleMode=\"inside\"\n              onClick={onFindButtonClick}\n              tabIndex={hasValue ? undefined : -1}\n            >\n              {findButtonText}\n            </Button>\n          )}\n        </div>\n      </div>\n      {platform === 'ios' && after && (\n        <Button\n          mode=\"tertiary\"\n          size=\"m\"\n          className={styles['Search__after']}\n          focusVisibleMode=\"inside\"\n          onClick={onCancel}\n          onFocus={setFocusedTrue}\n          onBlur={setFocusedFalse}\n        >\n          <span className={styles['Search__afterText']}>{after}</span>\n        </Button>\n      )}\n    </div>\n  );\n};\n"],"names":["React","Icon16Clear","Icon16SearchOutline","Icon24Cancel","classNames","noop","useAdaptivity","useAdaptivityConditionalRender","useBooleanState","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","noPadding","getRootRef","findButtonText","onFindButtonClick","inputProps","inputRef","value","isFocused","setTrue","setFocusedTrue","setFalse","setFocusedFalse","generatedId","useId","inputId","hasValue","setHasValue","useState","Boolean","defaultValue","checkHasValue","e","currentTarget","sizeY","adaptiveSizeY","platform","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","div","disabled","ref","label","htmlFor","Component","type","level","weight","tabIndex","compact","mode","size","focusVisibleMode","span"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { HTMLAttributesWithRootRef } from '../../types';
+import type { HTMLAttributesWithRootRef } from '../../types';
 export type SegmentedControlValue = string | number | undefined;
 export interface SegmentedControlOptionInterface extends Omit<React.HTMLAttributes<HTMLElement>, 'label'> {
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAUxD,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;AAEhE,MAAM,WAAW,+BACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IACxD;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC;IACxB,KAAK,EAAE,qBAAqB,CAAC;CAC9B;AAED,MAAM,WAAW,qBACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACnE,OAAO,EAAE,+BAA+B,EAAE,CAAC;IAC3C,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAClD,KAAK,CAAC,EAAE,qBAAqB,CAAC;IAC9B,YAAY,CAAC,EAAE,qBAAqB,CAAC;CACtC;AAID;;GAEG;AACH,eAAO,MAAM,gBAAgB,4GAS1B,qBAAqB,KAAG,KAAK,CAAC,SAuDhC,CAAC"}
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAU7D,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;AAEhE,MAAM,WAAW,+BACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IACxD;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC;IACxB,KAAK,EAAE,qBAAqB,CAAC;CAC9B;AAED,MAAM,WAAW,qBACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACnE,OAAO,EAAE,+BAA+B,EAAE,CAAC;IAC3C,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAClD,KAAK,CAAC,EAAE,qBAAqB,CAAC;IAC9B,YAAY,CAAC,EAAE,qBAAqB,CAAC;CACtC;AAID;;GAEG;AACH,eAAO,MAAM,gBAAgB,4GAS1B,qBAAqB,KAAG,KAAK,CAAC,SAuDhC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { SegmentedControlOption } from './SegmentedControlOption/SegmentedControlOption';\nimport styles from './SegmentedControl.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SegmentedControl--sizeY-none'],\n  ['regular']: styles['SegmentedControl--sizeY-regular'],\n};\n\nexport type SegmentedControlValue = string | number | undefined;\n\nexport interface SegmentedControlOptionInterface\n  extends Omit<React.HTMLAttributes<HTMLElement>, 'label'> {\n  /**\n   * Вставляет элемент перед основным контентом.\n   * Рекомендуется использовать только иконки с размером 20\n   */\n  before?: React.ReactNode;\n  label: React.ReactChild;\n  value: SegmentedControlValue;\n}\n\nexport interface SegmentedControlProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'> {\n  options: SegmentedControlOptionInterface[];\n  size?: 'm' | 'l';\n  name?: string;\n  onChange?: (value: SegmentedControlValue) => void;\n  value?: SegmentedControlValue;\n  defaultValue?: SegmentedControlValue;\n}\n\nconst warn = warnOnce('SegmentedControl');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControl = ({\n  size = 'l',\n  name,\n  options,\n  defaultValue = options[0]?.value,\n  children,\n  onChange: onChangeProp,\n  value: valueProp,\n  ...restProps\n}: SegmentedControlProps): React.ReactNode => {\n  const id = React.useId();\n\n  const [value, onChange] = useCustomEnsuredControl({\n    onChange: onChangeProp,\n    value: valueProp,\n    defaultValue,\n  });\n\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const actualIndex = options.findIndex((option) => option.value === value);\n\n  useIsomorphicLayoutEffect(() => {\n    if (actualIndex === -1 && process.env.NODE_ENV === 'development') {\n      warn('defaultValue: такого значения нет среди опций!', 'error');\n    }\n  }, [actualIndex]);\n\n  const translateX = `translateX(${100 * actualIndex}%)`;\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['SegmentedControl'],\n        sizeY !== 'compact' && sizeYClassNames[sizeY],\n        size === 'l' && styles['SegmentedControl--size-l'],\n      )}\n    >\n      <div role=\"radiogroup\" className={styles['SegmentedControl__in']}>\n        {actualIndex > -1 && (\n          <div\n            aria-hidden\n            className={styles['SegmentedControl__slider']}\n            style={{\n              width: `${100 / options.length}%`,\n              transform: translateX,\n            }}\n          />\n        )}\n        {options.map(({ label, ...optionProps }) => (\n          <SegmentedControlOption\n            key={`${optionProps.value}`}\n            {...optionProps}\n            name={name ?? id}\n            checked={value === optionProps.value}\n            onChange={() => onChange(optionProps.value)}\n          >\n            {label}\n          </SegmentedControlOption>\n        ))}\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["options","React","classNames","useAdaptivity","useCustomEnsuredControl","useIsomorphicLayoutEffect","warnOnce","RootComponent","SegmentedControlOption","sizeYClassNames","none","warn","SegmentedControl","size","name","defaultValue","value","children","onChange","onChangeProp","valueProp","restProps","id","useId","sizeY","actualIndex","findIndex","option","process","env","NODE_ENV","translateX","baseClassName","div","role","className","aria-hidden","style","width","length","transform","map","label","optionProps","checked"],"mappings":";;;IAgDiBA;;AAhDjB,YAAYC,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,uBAAuB,QAAQ,gCAAgC;AACxE,SAASC,yBAAyB,QAAQ,sCAAsC;AAChF,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,sBAAsB,QAAQ,kDAAkD;AAGzF,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AAyBA,MAAMC,OAAOL,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMM,mBAAmB;QAAC,EAC/BC,OAAO,GAAG,EACVC,IAAI,EACJd,OAAO,EACPe,gBAAef,YAAAA,OAAO,CAAC,EAAE,cAAVA,gCAAAA,UAAYgB,KAAK,EAChCC,QAAQ,EACRC,UAAUC,YAAY,EACtBH,OAAOI,SAAS,EAEM,WADnBC;QAPHR;QACAC;QACAd;QACAe;QACAE;QACAC;QACAF;;IAGA,MAAMM,KAAKrB,MAAMsB,KAAK;IAEtB,MAAM,CAACP,OAAOE,SAAS,GAAGd,wBAAwB;QAChDc,UAAUC;QACVH,OAAOI;QACPL;IACF;IAEA,MAAM,EAAES,QAAQ,MAAM,EAAE,GAAGrB;IAE3B,MAAMsB,cAAczB,QAAQ0B,SAAS,CAAC,CAACC,SAAWA,OAAOX,KAAK,KAAKA;IAEnEX,0BAA0B;QACxB,IAAIoB,gBAAgB,CAAC,KAAKG,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;YAChEnB,KAAK,kDAAkD;QACzD;IACF,GAAG;QAACc;KAAY;IAEhB,MAAMM,aAAa,CAAC,WAAW,EAAE,MAAMN,YAAY,EAAE,CAAC;IAEtD,qBACE,KAAClB,uDACKc;QACJW,eAAe9B,mCAEbsB,UAAU,aAAaf,eAAe,CAACe,MAAM,EAC7CX,SAAS;kBAGX,cAAA,MAACoB;YAAIC,MAAK;YAAaC,SAAS;;gBAC7BV,cAAc,CAAC,mBACd,KAACQ;oBACCG,aAAW;oBACXD,SAAS;oBACTE,OAAO;wBACLC,OAAO,CAAC,EAAE,MAAMtC,QAAQuC,MAAM,CAAC,CAAC,CAAC;wBACjCC,WAAWT;oBACb;;gBAGH/B,QAAQyC,GAAG,CAAC;wBAAC,EAAEC,KAAK,EAAkB,WAAbC;wBAAVD;;yCACd,KAAClC,gEAEKmC;wBACJ7B,MAAMA,iBAAAA,kBAAAA,OAAQQ;wBACdsB,SAAS5B,UAAU2B,YAAY3B,KAAK;wBACpCE,UAAU,IAAMA,SAASyB,YAAY3B,KAAK;kCAEzC0B;wBANI,CAAC,EAAEC,YAAY3B,KAAK,CAAC,CAAC;;;;;AAYvC,EAAE"}
+{"version":3,"sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { SegmentedControlOption } from './SegmentedControlOption/SegmentedControlOption';\nimport styles from './SegmentedControl.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SegmentedControl--sizeY-none'],\n  ['regular']: styles['SegmentedControl--sizeY-regular'],\n};\n\nexport type SegmentedControlValue = string | number | undefined;\n\nexport interface SegmentedControlOptionInterface\n  extends Omit<React.HTMLAttributes<HTMLElement>, 'label'> {\n  /**\n   * Вставляет элемент перед основным контентом.\n   * Рекомендуется использовать только иконки с размером 20\n   */\n  before?: React.ReactNode;\n  label: React.ReactChild;\n  value: SegmentedControlValue;\n}\n\nexport interface SegmentedControlProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'> {\n  options: SegmentedControlOptionInterface[];\n  size?: 'm' | 'l';\n  name?: string;\n  onChange?: (value: SegmentedControlValue) => void;\n  value?: SegmentedControlValue;\n  defaultValue?: SegmentedControlValue;\n}\n\nconst warn = warnOnce('SegmentedControl');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControl = ({\n  size = 'l',\n  name,\n  options,\n  defaultValue = options[0]?.value,\n  children,\n  onChange: onChangeProp,\n  value: valueProp,\n  ...restProps\n}: SegmentedControlProps): React.ReactNode => {\n  const id = React.useId();\n\n  const [value, onChange] = useCustomEnsuredControl({\n    onChange: onChangeProp,\n    value: valueProp,\n    defaultValue,\n  });\n\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const actualIndex = options.findIndex((option) => option.value === value);\n\n  useIsomorphicLayoutEffect(() => {\n    if (actualIndex === -1 && process.env.NODE_ENV === 'development') {\n      warn('defaultValue: такого значения нет среди опций!', 'error');\n    }\n  }, [actualIndex]);\n\n  const translateX = `translateX(${100 * actualIndex}%)`;\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['SegmentedControl'],\n        sizeY !== 'compact' && sizeYClassNames[sizeY],\n        size === 'l' && styles['SegmentedControl--size-l'],\n      )}\n    >\n      <div role=\"radiogroup\" className={styles['SegmentedControl__in']}>\n        {actualIndex > -1 && (\n          <div\n            aria-hidden\n            className={styles['SegmentedControl__slider']}\n            style={{\n              width: `${100 / options.length}%`,\n              transform: translateX,\n            }}\n          />\n        )}\n        {options.map(({ label, ...optionProps }) => (\n          <SegmentedControlOption\n            key={`${optionProps.value}`}\n            {...optionProps}\n            name={name ?? id}\n            checked={value === optionProps.value}\n            onChange={() => onChange(optionProps.value)}\n          >\n            {label}\n          </SegmentedControlOption>\n        ))}\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["options","React","classNames","useAdaptivity","useCustomEnsuredControl","useIsomorphicLayoutEffect","warnOnce","RootComponent","SegmentedControlOption","sizeYClassNames","none","warn","SegmentedControl","size","name","defaultValue","value","children","onChange","onChangeProp","valueProp","restProps","id","useId","sizeY","actualIndex","findIndex","option","process","env","NODE_ENV","translateX","baseClassName","div","role","className","aria-hidden","style","width","length","transform","map","label","optionProps","checked"],"mappings":";;;IAgDiBA;;AAhDjB,YAAYC,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,uBAAuB,QAAQ,gCAAgC;AACxE,SAASC,yBAAyB,QAAQ,sCAAsC;AAChF,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,sBAAsB,QAAQ,kDAAkD;AAGzF,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AAyBA,MAAMC,OAAOL,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMM,mBAAmB;QAAC,EAC/BC,OAAO,GAAG,EACVC,IAAI,EACJd,OAAO,EACPe,gBAAef,YAAAA,OAAO,CAAC,EAAE,cAAVA,gCAAAA,UAAYgB,KAAK,EAChCC,QAAQ,EACRC,UAAUC,YAAY,EACtBH,OAAOI,SAAS,EAEM,WADnBC;QAPHR;QACAC;QACAd;QACAe;QACAE;QACAC;QACAF;;IAGA,MAAMM,KAAKrB,MAAMsB,KAAK;IAEtB,MAAM,CAACP,OAAOE,SAAS,GAAGd,wBAAwB;QAChDc,UAAUC;QACVH,OAAOI;QACPL;IACF;IAEA,MAAM,EAAES,QAAQ,MAAM,EAAE,GAAGrB;IAE3B,MAAMsB,cAAczB,QAAQ0B,SAAS,CAAC,CAACC,SAAWA,OAAOX,KAAK,KAAKA;IAEnEX,0BAA0B;QACxB,IAAIoB,gBAAgB,CAAC,KAAKG,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;YAChEnB,KAAK,kDAAkD;QACzD;IACF,GAAG;QAACc;KAAY;IAEhB,MAAMM,aAAa,CAAC,WAAW,EAAE,MAAMN,YAAY,EAAE,CAAC;IAEtD,qBACE,KAAClB,uDACKc;QACJW,eAAe9B,mCAEbsB,UAAU,aAAaf,eAAe,CAACe,MAAM,EAC7CX,SAAS;kBAGX,cAAA,MAACoB;YAAIC,MAAK;YAAaC,SAAS;;gBAC7BV,cAAc,CAAC,mBACd,KAACQ;oBACCG,aAAW;oBACXD,SAAS;oBACTE,OAAO;wBACLC,OAAO,CAAC,EAAE,MAAMtC,QAAQuC,MAAM,CAAC,CAAC,CAAC;wBACjCC,WAAWT;oBACb;;gBAGH/B,QAAQyC,GAAG,CAAC;wBAAC,EAAEC,KAAK,EAAkB,WAAbC;wBAAVD;;yCACd,KAAClC,gEAEKmC;wBACJ7B,MAAMA,iBAAAA,kBAAAA,OAAQQ;wBACdsB,SAAS5B,UAAU2B,YAAY3B,KAAK;wBACpCE,UAAU,IAAMA,SAASyB,YAAY3B,KAAK;kCAEzC0B;wBANI,CAAC,EAAEC,YAAY3B,KAAK,CAAC,CAAC;;;;;AAYvC,EAAE"}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { HasRef, HasRootRef } from '../../../types';
+import type { HasRef, HasRootRef } from '../../../types';
 export interface SegmentedControlOptionProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRootRef<HTMLLabelElement>, HasRef<HTMLInputElement> {
     before?: React.ReactNode;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlOption.d.ts","sourceRoot":"","sources":["../../../../src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAMpD,MAAM,WAAW,2BACf,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACjD,UAAU,CAAC,gBAAgB,CAAC,EAC5B,MAAM,CAAC,gBAAgB,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED;;GAEG;AACH,eAAO,MAAM,sBAAsB,6EAQhC,2BAA2B,KAAG,KAAK,CAAC,SAkBtC,CAAC"}
+{"version":3,"file":"SegmentedControlOption.d.ts","sourceRoot":"","sources":["../../../../src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAMzD,MAAM,WAAW,2BACf,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACjD,UAAU,CAAC,gBAAgB,CAAC,EAC5B,MAAM,CAAC,gBAAgB,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED;;GAEG;AACH,eAAO,MAAM,sBAAsB,6EAQhC,2BAA2B,KAAG,KAAK,CAAC,SAkBtC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { hasReactNode } from '@vkontakte/vkjs';\nimport { HasRef, HasRootRef } from '../../../types';\nimport { Clickable } from '../../Clickable/Clickable';\nimport { Headline } from '../../Typography/Headline/Headline';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport styles from './SegmentedControlOption.module.css';\n\nexport interface SegmentedControlOptionProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasRef<HTMLInputElement> {\n  before?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControlOption = ({\n  getRef,\n  className,\n  style,\n  children,\n  getRootRef,\n  before,\n  ...restProps\n}: SegmentedControlOptionProps): React.ReactNode => (\n  <Clickable\n    Component=\"label\"\n    baseClassName={styles['SegmentedControlOption']}\n    hoverClassName={styles['SegmentedControlOption--hover']}\n    activeClassName={styles['SegmentedControlOption--hover']}\n    className={className}\n    getRootRef={getRootRef}\n    style={style}\n  >\n    <VisuallyHidden {...restProps} Component=\"input\" getRootRef={getRef} type=\"radio\" />\n    {hasReactNode(before) && (\n      <div className={styles['SegmentedControlOption__before']}>{before}</div>\n    )}\n    <Headline level=\"2\" weight=\"2\">\n      {children}\n    </Headline>\n  </Clickable>\n);\n"],"names":["React","hasReactNode","Clickable","Headline","VisuallyHidden","SegmentedControlOption","getRef","className","style","children","getRootRef","before","restProps","Component","baseClassName","hoverClassName","activeClassName","type","div","level","weight"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,kBAAkB;AAE/C,SAASC,SAAS,QAAQ,4BAA4B;AACtD,SAASC,QAAQ,QAAQ,qCAAqC;AAC9D,SAASC,cAAc,QAAQ,sCAAsC;AAUrE;;CAEC,GACD,OAAO,MAAMC,yBAAyB;QAAC,EACrCC,MAAM,EACNC,SAAS,EACTC,KAAK,EACLC,QAAQ,EACRC,UAAU,EACVC,MAAM,EAEsB,WADzBC;QANHN;QACAC;QACAC;QACAC;QACAC;QACAC;;yBAGA,MAACT;QACCW,WAAU;QACVC,aAAa;QACbC,cAAc;QACdC,eAAe;QACfT,WAAWA;QACXG,YAAYA;QACZF,OAAOA;;0BAEP,KAACJ,wDAAmBQ;gBAAWC,WAAU;gBAAQH,YAAYJ;gBAAQW,MAAK;;YACzEhB,aAAaU,yBACZ,KAACO;gBAAIX,SAAS;0BAA6CI;;0BAE7D,KAACR;gBAASgB,OAAM;gBAAIC,QAAO;0BACxBX;;;;EAGL"}
+{"version":3,"sources":["../../../../src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { hasReactNode } from '@vkontakte/vkjs';\nimport type { HasRef, HasRootRef } from '../../../types';\nimport { Clickable } from '../../Clickable/Clickable';\nimport { Headline } from '../../Typography/Headline/Headline';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport styles from './SegmentedControlOption.module.css';\n\nexport interface SegmentedControlOptionProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasRef<HTMLInputElement> {\n  before?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControlOption = ({\n  getRef,\n  className,\n  style,\n  children,\n  getRootRef,\n  before,\n  ...restProps\n}: SegmentedControlOptionProps): React.ReactNode => (\n  <Clickable\n    Component=\"label\"\n    baseClassName={styles['SegmentedControlOption']}\n    hoverClassName={styles['SegmentedControlOption--hover']}\n    activeClassName={styles['SegmentedControlOption--hover']}\n    className={className}\n    getRootRef={getRootRef}\n    style={style}\n  >\n    <VisuallyHidden {...restProps} Component=\"input\" getRootRef={getRef} type=\"radio\" />\n    {hasReactNode(before) && (\n      <div className={styles['SegmentedControlOption__before']}>{before}</div>\n    )}\n    <Headline level=\"2\" weight=\"2\">\n      {children}\n    </Headline>\n  </Clickable>\n);\n"],"names":["React","hasReactNode","Clickable","Headline","VisuallyHidden","SegmentedControlOption","getRef","className","style","children","getRootRef","before","restProps","Component","baseClassName","hoverClassName","activeClassName","type","div","level","weight"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,kBAAkB;AAE/C,SAASC,SAAS,QAAQ,4BAA4B;AACtD,SAASC,QAAQ,QAAQ,qCAAqC;AAC9D,SAASC,cAAc,QAAQ,sCAAsC;AAUrE;;CAEC,GACD,OAAO,MAAMC,yBAAyB;QAAC,EACrCC,MAAM,EACNC,SAAS,EACTC,KAAK,EACLC,QAAQ,EACRC,UAAU,EACVC,MAAM,EAEsB,WADzBC;QANHN;QACAC;QACAC;QACAC;QACAC;QACAC;;yBAGA,MAACT;QACCW,WAAU;QACVC,aAAa;QACbC,cAAc;QACdC,eAAe;QACfT,WAAWA;QACXG,YAAYA;QACZF,OAAOA;;0BAEP,KAACJ,wDAAmBQ;gBAAWC,WAAU;gBAAQH,YAAYJ;gBAAQW,MAAK;;YACzEhB,aAAaU,yBACZ,KAACO;gBAAIX,SAAS;0BAA6CI;;0BAE7D,KAACR;gBAASgB,OAAM;gBAAIC,QAAO;0BACxBX;;;;EAGL"}