@vkontakte/vkui 5.5.4 → 5.6.0

package/dist/cjs/components/Root/Root.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Root/Root.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\nimport { getNavId, NavIdProps } from '../../lib/getNavId';\nimport { Platform } from '../../lib/platform';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ScrollContext } from '../AppRoot/ScrollContext';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { NavTransitionProvider } from '../NavTransitionContext/NavTransitionContext';\nimport { SplitColContext } from '../SplitCol/SplitColContext';\nimport styles from './Root.module.css';\n\nexport interface RootProps extends React.HTMLAttributes<HTMLDivElement>, NavIdProps {\n  activeView: string;\n  onTransition?(params: { isBack: boolean; from: string; to: string }): void;\n}\n\nexport interface RootState {\n  activeView: string;\n  transition: boolean;\n  isBack?: boolean;\n  prevView?: string;\n}\n\nconst warn = warnOnce('Root');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Root\n */\nexport const Root = ({\n  children,\n  activeView: _activeView,\n  onTransition,\n  nav,\n  className,\n  ...restProps\n}: RootProps) => {\n  const scroll = React.useContext(ScrollContext);\n  const platform = usePlatform();\n  const { document } = useDOM();\n  const scrolls = React.useRef<Record<string, number>>({}).current;\n  const viewNodes = React.useRef<Record<string, HTMLElement | null>>({}).current;\n\n  const { transitionMotionEnabled = true } = useConfigProvider();\n  const { animate } = React.useContext(SplitColContext);\n  const disableAnimation = !transitionMotionEnabled || !animate;\n\n  const views = React.Children.toArray(children) as React.ReactElement[];\n\n  const [{ prevView, activeView, transition, isBack }, _setState] = React.useState<RootState>({\n    activeView: _activeView,\n    transition: false,\n  });\n  const transitionTo = (panel: string) => {\n    if (panel !== activeView) {\n      const viewIds = views.map((view) => getNavId(view.props, warn));\n      const isBack = viewIds.indexOf(panel) < viewIds.indexOf(activeView);\n      scrolls[activeView] = scroll.getScroll().y;\n      _setState({\n        activeView: panel,\n        prevView: activeView,\n        transition: !disableAnimation,\n        isBack,\n      });\n    }\n  };\n  const finishTransition = React.useCallback(\n    () => _setState({ activeView, prevView, isBack, transition: false }),\n    [activeView, isBack, prevView],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    (document!.activeElement as HTMLElement).blur();\n  }, [activeView]);\n\n  // Нужен переход\n  useIsomorphicLayoutEffect(() => transitionTo(_activeView), [_activeView]);\n  useIsomorphicLayoutEffect(() => {\n    if (!transition && prevView) {\n      // Закончился переход\n      scroll.scrollTo(0, isBack ? scrolls[activeView] : 0);\n      onTransition &&\n        onTransition({\n          isBack: Boolean(isBack),\n          from: prevView,\n          to: activeView,\n        });\n    }\n  }, [transition, prevView]);\n\n  const fallbackTransition = useTimeout(finishTransition, platform === Platform.IOS ? 600 : 300);\n  React.useEffect(() => {\n    if (!transition) {\n      fallbackTransition.clear();\n      return;\n    }\n    fallbackTransition.set();\n  }, [fallbackTransition, transition]);\n\n  const onAnimationEnd = (e: React.AnimationEvent) => {\n    if (\n      [\n        styles['vkui-root-android-animation-hide-back'],\n        styles['vkui-root-android-animation-show-forward'],\n        styles['vkui-root-ios-animation-hide-back'],\n        styles['vkui-root-ios-animation-show-forward'],\n      ].includes(e.animationName)\n    ) {\n      finishTransition();\n    }\n  };\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['Root'],\n        platform === Platform.IOS && styles['Root--ios'],\n        transition && styles['Root--transition'],\n        className,\n      )}\n    >\n      {views.map((view) => {\n        const viewId = getNavId(view.props, warn);\n        if (viewId !== activeView && !(transition && viewId === prevView)) {\n          return null;\n        }\n        const isTransitionTarget = transition && viewId === (isBack ? prevView : activeView);\n        const compensateScroll =\n          transition && (viewId === prevView || (isBack && viewId === activeView));\n        return (\n          <div\n            key={viewId}\n            ref={(e) => viewId && (viewNodes[viewId] = e)}\n            onAnimationEnd={isTransitionTarget ? onAnimationEnd : undefined}\n            className={classNames(\n              styles['Root__view'],\n              transition && viewId === prevView && isBack && styles['Root__view--hide-back'],\n              transition && viewId === prevView && !isBack && styles['Root__view--hide-forward'],\n              transition && viewId === activeView && isBack && styles['Root__view--show-back'],\n              transition && viewId === activeView && !isBack && styles['Root__view--show-forward'],\n            )}\n          >\n            <NavTransitionProvider entering={transition && viewId === activeView}>\n              <div\n                className={styles['Root__scrollCompensation']}\n                style={{\n                  marginTop: compensateScroll ? viewId && -(scrolls[viewId] ?? 0) : undefined,\n                }}\n              >\n                {view}\n              </div>\n            </NavTransitionProvider>\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n"],"names":["Root","warn","warnOnce","children","activeView","_activeView","onTransition","nav","className","restProps","scroll","React","useContext","ScrollContext","platform","usePlatform","document","useDOM","scrolls","useRef","current","viewNodes","useConfigProvider","transitionMotionEnabled","animate","SplitColContext","disableAnimation","views","Children","toArray","useState","transition","prevView","isBack","_setState","transitionTo","panel","viewIds","map","view","getNavId","props","indexOf","getScroll","y","finishTransition","useCallback","useIsomorphicLayoutEffect","activeElement","blur","scrollTo","Boolean","from","to","fallbackTransition","useTimeout","Platform","IOS","useEffect","clear","set","onAnimationEnd","e","includes","animationName","div","classNames","viewId","isTransitionTarget","compensateScroll","key","ref","undefined","NavTransitionProvider","entering","style","marginTop"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Root/Root.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\nimport { getNavId, NavIdProps } from '../../lib/getNavId';\nimport { Platform } from '../../lib/platform';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ScrollContext } from '../AppRoot/ScrollContext';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { NavTransitionProvider } from '../NavTransitionContext/NavTransitionContext';\nimport { SplitColContext } from '../SplitCol/SplitColContext';\nimport styles from './Root.module.css';\n\nexport interface RootProps extends React.HTMLAttributes<HTMLDivElement>, NavIdProps {\n  activeView: string;\n  onTransition?(params: { isBack: boolean; from: string; to: string }): void;\n  children: React.ReactElement | Iterable<React.ReactElement>;\n}\n\nexport interface RootState {\n  activeView: string;\n  transition: boolean;\n  isBack?: boolean;\n  prevView?: string;\n}\n\nconst warn = warnOnce('Root');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Root\n */\nexport const Root = ({\n  children,\n  activeView: _activeView,\n  onTransition,\n  nav,\n  className,\n  ...restProps\n}: RootProps) => {\n  const scroll = React.useContext(ScrollContext);\n  const platform = usePlatform();\n  const { document } = useDOM();\n  const scrolls = React.useRef<Record<string, number>>({}).current;\n  const viewNodes = React.useRef<Record<string, HTMLElement | null>>({}).current;\n\n  const { transitionMotionEnabled = true } = useConfigProvider();\n  const { animate } = React.useContext(SplitColContext);\n  const disableAnimation = !transitionMotionEnabled || !animate;\n\n  const views = React.Children.toArray(children) as React.ReactElement[];\n\n  const [{ prevView, activeView, transition, isBack }, _setState] = React.useState<RootState>({\n    activeView: _activeView,\n    transition: false,\n  });\n  const transitionTo = (panel: string) => {\n    if (panel !== activeView) {\n      const viewIds = views.map((view) => getNavId(view.props, warn));\n      const isBack = viewIds.indexOf(panel) < viewIds.indexOf(activeView);\n      scrolls[activeView] = scroll.getScroll().y;\n      _setState({\n        activeView: panel,\n        prevView: activeView,\n        transition: !disableAnimation,\n        isBack,\n      });\n    }\n  };\n  const finishTransition = React.useCallback(\n    () => _setState({ activeView, prevView, isBack, transition: false }),\n    [activeView, isBack, prevView],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    (document!.activeElement as HTMLElement).blur();\n  }, [activeView]);\n\n  // Нужен переход\n  useIsomorphicLayoutEffect(() => transitionTo(_activeView), [_activeView]);\n  useIsomorphicLayoutEffect(() => {\n    if (!transition && prevView) {\n      // Закончился переход\n      scroll.scrollTo(0, isBack ? scrolls[activeView] : 0);\n      onTransition &&\n        onTransition({\n          isBack: Boolean(isBack),\n          from: prevView,\n          to: activeView,\n        });\n    }\n  }, [transition, prevView]);\n\n  const fallbackTransition = useTimeout(finishTransition, platform === Platform.IOS ? 600 : 300);\n  React.useEffect(() => {\n    if (!transition) {\n      fallbackTransition.clear();\n      return;\n    }\n    fallbackTransition.set();\n  }, [fallbackTransition, transition]);\n\n  const onAnimationEnd = (e: React.AnimationEvent) => {\n    if (\n      [\n        styles['vkui-root-android-animation-hide-back'],\n        styles['vkui-root-android-animation-show-forward'],\n        styles['vkui-root-ios-animation-hide-back'],\n        styles['vkui-root-ios-animation-show-forward'],\n      ].includes(e.animationName)\n    ) {\n      finishTransition();\n    }\n  };\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['Root'],\n        platform === Platform.IOS && styles['Root--ios'],\n        transition && styles['Root--transition'],\n        className,\n      )}\n    >\n      {views.map((view) => {\n        const viewId = getNavId(view.props, warn);\n        if (viewId !== activeView && !(transition && viewId === prevView)) {\n          return null;\n        }\n        const isTransitionTarget = transition && viewId === (isBack ? prevView : activeView);\n        const compensateScroll =\n          transition && (viewId === prevView || (isBack && viewId === activeView));\n        return (\n          <div\n            key={viewId}\n            ref={(e) => viewId && (viewNodes[viewId] = e)}\n            onAnimationEnd={isTransitionTarget ? onAnimationEnd : undefined}\n            className={classNames(\n              styles['Root__view'],\n              transition && viewId === prevView && isBack && styles['Root__view--hide-back'],\n              transition && viewId === prevView && !isBack && styles['Root__view--hide-forward'],\n              transition && viewId === activeView && isBack && styles['Root__view--show-back'],\n              transition && viewId === activeView && !isBack && styles['Root__view--show-forward'],\n            )}\n          >\n            <NavTransitionProvider entering={transition && viewId === activeView}>\n              <div\n                className={styles['Root__scrollCompensation']}\n                style={{\n                  marginTop: compensateScroll ? viewId && -(scrolls[viewId] ?? 0) : undefined,\n                }}\n              >\n                {view}\n              </div>\n            </NavTransitionProvider>\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n"],"names":["Root","warn","warnOnce","children","activeView","_activeView","onTransition","nav","className","restProps","scroll","React","useContext","ScrollContext","platform","usePlatform","document","useDOM","scrolls","useRef","current","viewNodes","useConfigProvider","transitionMotionEnabled","animate","SplitColContext","disableAnimation","views","Children","toArray","useState","transition","prevView","isBack","_setState","transitionTo","panel","viewIds","map","view","getNavId","props","indexOf","getScroll","y","finishTransition","useCallback","useIsomorphicLayoutEffect","activeElement","blur","scrollTo","Boolean","from","to","fallbackTransition","useTimeout","Platform","IOS","useEffect","clear","set","onAnimationEnd","e","includes","animationName","div","classNames","viewId","isTransitionTarget","compensateScroll","key","ref","undefined","NavTransitionProvider","entering","style","marginTop"],"mappings":"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"}

package/dist/cjs/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 { useScrollLock } from '../AppRoot/ScrollContext';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\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}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ScreenSpinner\n */\nexport const ScreenSpinner = ({\n  style,\n  className,\n  state = 'loading',\n  size = 'large',\n  'aria-label': ariaLabel = 'Пожалуйста, подождите...',\n  onClick,\n  ...restProps\n}: ScreenSpinnerProps) => {\n  const hideSpinner = state === 'done' || state === 'error';\n\n  const Icon = {\n    loading: () => null,\n    cancelable: Icon24Cancel,\n    done: Icon48DoneOutline,\n    error: Icon48CancelCircle,\n  }[state];\n\n  useScrollLock();\n\n  return (\n    <PopoutWrapper\n      hasMask={false}\n      className={classNames(\n        styles['ScreenSpinner'],\n        state === 'cancelable' && styles['ScreenSpinner--clickable'],\n        className,\n      )}\n      style={style}\n    >\n      <div className={styles['ScreenSpinner__container']} onClick={onClick}>\n        <Spinner\n          className={classNames(\n            styles['ScreenSpinner__spinner'],\n            hideSpinner && styles['ScreenSpinner__spinner--hidden'],\n          )}\n          size={size}\n          aria-label={ariaLabel}\n          {...restProps}\n        />\n        <div\n          className={classNames(\n            styles['ScreenSpinner__icon'],\n            state === 'done' && styles['ScreenSpinner__icon--state-done'],\n          )}\n        >\n          <Icon />\n        </div>\n      </div>\n    </PopoutWrapper>\n  );\n};\n"],"names":["ScreenSpinner","style","className","state","size","ariaLabel","onClick","restProps","hideSpinner","Icon","loading","cancelable","Icon24Cancel","done","Icon48DoneOutline","error","Icon48CancelCircle","useScrollLock","PopoutWrapper","hasMask","classNames","div","Spinner","aria-label"],"mappings":";;;;+BAiBaA;;;eAAAA;;;;;;+DAjBU;qBACM;oBACF;6BACG;6BACA;uBACQ;kCACH;iCACD;AAU3B,IAAMA,gBAAgB;QAC3BC,eAAAA,OACAC,mBAAAA,iCACAC,OAAAA,kCAAQ,+CACRC,MAAAA,gCAAO,uBACOC,aAAd,eAAcA,YAAAA,iBAAY,6BAAZA,KACdC,iBAAAA,SACGC;QANHN;QACAC;QACAC;QACAC;QACA;QACAE;;IAGA,IAAME,cAAcL,UAAU,UAAUA,UAAU;IAElD,IAAMM,OAAO;QACXC,SAAS;mBAAM;;QACfC,YAAYC;QACZC,MAAMC;QACNC,OAAOC;IACT,CAAC,CAACb,MAAM;IAERc,IAAAA;IAEA,qBACE,qBAACC;QACCC,SAAS;QACTjB,WAAWkB,IAAAA,uCAETjB,UAAU,gDACVD;QAEFD,OAAOA;qBAEP,qBAACoB;QAAInB,SAAS;QAAsCI,SAASA;qBAC3D,qBAACgB;QACCpB,WAAWkB,IAAAA,gDAETZ;QAEFJ,MAAMA;QACNmB,cAAYlB;OACRE,2BAEN,qBAACc;QACCnB,WAAWkB,IAAAA,6CAETjB,UAAU;qBAGZ,qBAACM;AAKX"}
+{"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 { useScrollLock } from '../AppRoot/ScrollContext';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\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}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ScreenSpinner\n */\nexport const ScreenSpinner = ({\n  style,\n  className,\n  state = 'loading',\n  size = 'large',\n  'aria-label': ariaLabel = 'Пожалуйста, подождите...',\n  onClick,\n  ...restProps\n}: ScreenSpinnerProps) => {\n  const hideSpinner = state === 'done' || state === 'error';\n\n  const Icon = {\n    loading: () => null,\n    cancelable: Icon24Cancel,\n    done: Icon48DoneOutline,\n    error: Icon48CancelCircle,\n  }[state];\n\n  useScrollLock();\n\n  return (\n    <PopoutWrapper\n      hasMask={false}\n      className={classNames(\n        styles['ScreenSpinner'],\n        state === 'cancelable' && styles['ScreenSpinner--clickable'],\n        className,\n      )}\n      style={style}\n    >\n      <div className={styles['ScreenSpinner__container']} onClick={onClick}>\n        <Spinner\n          className={classNames(\n            styles['ScreenSpinner__spinner'],\n            hideSpinner && styles['ScreenSpinner__spinner--hidden'],\n          )}\n          size={size}\n          aria-label={ariaLabel}\n          {...restProps}\n        />\n        <div\n          className={classNames(\n            styles['ScreenSpinner__icon'],\n            state === 'done' && styles['ScreenSpinner__icon--state-done'],\n          )}\n        >\n          <Icon />\n        </div>\n      </div>\n    </PopoutWrapper>\n  );\n};\n"],"names":["ScreenSpinner","style","className","state","size","ariaLabel","onClick","restProps","hideSpinner","Icon","loading","cancelable","Icon24Cancel","done","Icon48DoneOutline","error","Icon48CancelCircle","useScrollLock","PopoutWrapper","hasMask","classNames","div","Spinner","aria-label"],"mappings":";;;;+BAiBaA;;;eAAAA;;;;;;+DAjBU;qBACM;oBACF;6BACG;6BACA;uBACQ;kCACH;iCACD;AAU3B,IAAMA,gBAAgB;QAC3BC,eAAAA,OACAC,mBAAAA,iCACAC,OAAAA,kCAAQ,+CACRC,MAAAA,gCAAO,uBACOC,aAAd,eAAcA,YAAAA,iBAAY,6BAAZA,KACdC,iBAAAA,SACGC;QANHN;QACAC;QACAC;QACAC;QACA;QACAE;;IAGA,IAAME,cAAcL,UAAU,UAAUA,UAAU;IAElD,IAAMM,OAAO;QACXC,SAAS;mBAAM;;QACfC,YAAYC,mBAAY;QACxBC,MAAMC,oCAAiB;QACvBC,OAAOC,sCAAkB;IAC3B,CAAC,CAACb,MAAM;IAERc,IAAAA,4BAAa;IAEb,qBACE,qBAACC,4BAAa;QACZC,SAAS;QACTjB,WAAWkB,IAAAA,gBAAU,uBAEnBjB,UAAU,gDACVD;QAEFD,OAAOA;qBAEP,qBAACoB;QAAInB,SAAS;QAAsCI,SAASA;qBAC3D,qBAACgB,gBAAO;QACNpB,WAAWkB,IAAAA,gBAAU,gCAEnBZ;QAEFJ,MAAMA;QACNmB,cAAYlB;OACRE,2BAEN,qBAACc;QACCnB,WAAWkB,IAAAA,gBAAU,6BAEnBjB,UAAU;qBAGZ,qBAACM;AAKX"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ScrollArrow/ScrollArrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon16Chevron,\n  Icon16ChevronLeft,\n  Icon24Chevron,\n  Icon24ChevronCompactLeft,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport styles from './ScrollArrow.module.css';\n\nconst ArrowIcon = ({ size, direction }: Pick<ScrollArrowProps, 'size' | 'direction'>) => {\n  if (size === 'm') {\n    return direction === 'left' ? <Icon16ChevronLeft /> : <Icon16Chevron />;\n  }\n\n  return direction === 'left' ? <Icon24ChevronCompactLeft /> : <Icon24Chevron />;\n};\n\nexport interface ScrollArrowProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    HasRootRef<HTMLButtonElement> {\n  /**\n   * Направление стрелки\n   */\n  direction: 'left' | 'right';\n  /**\n   * Размер стрелки\n   */\n  size?: 'm' | 'l';\n  /**\n   * Смещает иконку кнопки навигации по вертикали.\n   */\n  offsetY?: number | string;\n}\n\n/**\n * Компонент стрелки из HorizontalScroll\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  className,\n  getRootRef,\n  children = <ArrowIcon direction={direction} size={size} />,\n  ...restProps\n}: ScrollArrowProps) => {\n  return (\n    <button\n      className={classNames(\n        styles['ScrollArrow'],\n        {\n          m: styles['ScrollArrow--size-m'],\n          l: styles['ScrollArrow--size-l'],\n        }[size],\n        {\n          left: styles['ScrollArrow--direction-left'],\n          right: styles['ScrollArrow--direction-right'],\n        }[direction],\n        className,\n      )}\n      ref={getRootRef}\n      {...restProps}\n    >\n      <span className={styles['ScrollArrow__icon']} style={offsetY ? { top: offsetY } : undefined}>\n        {children}\n      </span>\n    </button>\n  );\n};\n"],"names":["ScrollArrow","ArrowIcon","size","direction","Icon16ChevronLeft","Icon16Chevron","Icon24ChevronCompactLeft","Icon24Chevron","offsetY","className","getRootRef","children","restProps","button","classNames","m","l","left","right","ref","span","style","top","undefined"],"mappings":";;;;+BA0CaA;;;eAAAA;;;;;;+DA1CU;qBAMhB;oBACoB;AAI3B,IAAMC,YAAY;QAAGC,aAAAA,MAAMC,kBAAAA;IACzB,IAAID,SAAS,KAAK;QAChB,OAAOC,cAAc,uBAAS,qBAACC,gDAAuB,qBAACC;IACzD;IAEA,OAAOF,cAAc,uBAAS,qBAACG,uDAA8B,qBAACC;AAChE;AAyBO,IAAMP,cAAc;6BACzBE,MAAAA,gCAAO,mBACPM,iBAAAA,SACAL,mBAAAA,WACAM,mBAAAA,WACAC,oBAAAA,qCACAC,UAAAA,sDAAW,qBAACV;QAAUE,WAAWA;QAAWD,MAAMA;0BAC/CU;QANHV;QACAM;QACAL;QACAM;QACAC;QACAC;;IAGA,qBACE,qBAACE;QACCJ,WAAWK,IAAAA,qCAET;YACEC,CAAC;YACDC,CAAC;QACH,CAAC,CAACd,KAAK,EACP;YACEe,IAAI;YACJC,KAAK;QACP,CAAC,CAACf,UAAU,EACZM;QAEFU,KAAKT;OACDE,0BAEJ,qBAACQ;QAAKX,SAAS;QAA+BY,OAAOb,UAAU;YAAEc,KAAKd;QAAQ,IAAIe;OAC/EZ;AAIT"}
+{"version":3,"sources":["../../../../src/components/ScrollArrow/ScrollArrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon16Chevron,\n  Icon16ChevronLeft,\n  Icon24Chevron,\n  Icon24ChevronCompactLeft,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport styles from './ScrollArrow.module.css';\n\nconst ArrowIcon = ({ size, direction }: Pick<ScrollArrowProps, 'size' | 'direction'>) => {\n  if (size === 'm') {\n    return direction === 'left' ? <Icon16ChevronLeft /> : <Icon16Chevron />;\n  }\n\n  return direction === 'left' ? <Icon24ChevronCompactLeft /> : <Icon24Chevron />;\n};\n\nexport interface ScrollArrowProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    HasRootRef<HTMLButtonElement> {\n  /**\n   * Направление стрелки\n   */\n  direction: 'left' | 'right';\n  /**\n   * Размер стрелки\n   */\n  size?: 'm' | 'l';\n  /**\n   * Смещает иконку кнопки навигации по вертикали.\n   */\n  offsetY?: number | string;\n}\n\n/**\n * Компонент стрелки из HorizontalScroll\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  className,\n  getRootRef,\n  children = <ArrowIcon direction={direction} size={size} />,\n  ...restProps\n}: ScrollArrowProps) => {\n  return (\n    <button\n      className={classNames(\n        styles['ScrollArrow'],\n        {\n          m: styles['ScrollArrow--size-m'],\n          l: styles['ScrollArrow--size-l'],\n        }[size],\n        {\n          left: styles['ScrollArrow--direction-left'],\n          right: styles['ScrollArrow--direction-right'],\n        }[direction],\n        className,\n      )}\n      ref={getRootRef}\n      {...restProps}\n    >\n      <span className={styles['ScrollArrow__icon']} style={offsetY ? { top: offsetY } : undefined}>\n        {children}\n      </span>\n    </button>\n  );\n};\n"],"names":["ScrollArrow","ArrowIcon","size","direction","Icon16ChevronLeft","Icon16Chevron","Icon24ChevronCompactLeft","Icon24Chevron","offsetY","className","getRootRef","children","restProps","button","classNames","m","l","left","right","ref","span","style","top","undefined"],"mappings":";;;;+BA0CaA;;;eAAAA;;;;;;+DA1CU;qBAMhB;oBACoB;AAI3B,IAAMC,YAAY;QAAGC,aAAAA,MAAMC,kBAAAA;IACzB,IAAID,SAAS,KAAK;QAChB,OAAOC,cAAc,uBAAS,qBAACC,wBAAiB,wBAAM,qBAACC,oBAAa;IACtE;IAEA,OAAOF,cAAc,uBAAS,qBAACG,+BAAwB,wBAAM,qBAACC,oBAAa;AAC7E;AAyBO,IAAMP,cAAc;6BACzBE,MAAAA,gCAAO,mBACPM,iBAAAA,SACAL,mBAAAA,WACAM,mBAAAA,WACAC,oBAAAA,qCACAC,UAAAA,sDAAW,qBAACV;QAAUE,WAAWA;QAAWD,MAAMA;0BAC/CU;QANHV;QACAM;QACAL;QACAM;QACAC;QACAC;;IAGA,qBACE,qBAACE;QACCJ,WAAWK,IAAAA,gBAAU,qBAEnB;YACEC,CAAC;YACDC,CAAC;QACH,CAAC,CAACd,KAAK,EACP;YACEe,IAAI;YACJC,KAAK;QACP,CAAC,CAACf,UAAU,EACZM;QAEFU,KAAKT;OACDE,0BAEJ,qBAACQ;QAAKX,SAAS;QAA+BY,OAAOb,UAAU;YAAEc,KAAKd;QAAQ,IAAIe;OAC/EZ;AAIT"}

package/dist/cjs/components/Search/Search.js

@@ -61,10 +61,10 @@ var Search = function(_param) {
         inputProps.onBlur && inputProps.onBlur(e);
     };
     var onCancel = _react.useCallback(function() {
-        var _Object_getOwnPropertyDescriptor, _inputRef_current;
+        var _Object_getOwnPropertyDescriptor, _nativeInputValueSetter, _inputRef_current;
         // eslint-disable-next-line @typescript-eslint/unbound-method
         var nativeInputValueSetter = (_Object_getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")) === null || _Object_getOwnPropertyDescriptor === void 0 ? void 0 : _Object_getOwnPropertyDescriptor.set;
-        nativeInputValueSetter === null || nativeInputValueSetter === void 0 ? void 0 : nativeInputValueSetter.call(inputRef.current, "");
+        (_nativeInputValueSetter = nativeInputValueSetter) === null || _nativeInputValueSetter === void 0 ? void 0 : _nativeInputValueSetter.call(inputRef.current, "");
         var ev2 = new Event("input", {
             bubbles: true
         });

package/dist/cjs/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 { useBooleanState } from '../../hooks/useBooleanState';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { VKUITouchEvent } from '../../lib/touch';\nimport { HasRef } from '../../types';\nimport { Button } from '../Button/Button';\nimport { IconButton } from '../IconButton/IconButton';\nimport { TouchEvent } from '../Touch/Touch';\nimport { Headline } from '../Typography/Headline/Headline';\nimport styles from './Search.module.css';\n\nexport interface SearchProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement> {\n  /**\n   * iOS only. Текст кнопки \"отмена\", которая чистит текстовое поле и убирает фокус.\n   */\n  after?: React.ReactNode;\n  before?: React.ReactNode;\n  icon?: React.ReactNode;\n  onIconClick?: (e: VKUITouchEvent) => void;\n  defaultValue?: string;\n  iconAriaLabel?: string;\n  clearAriaLabel?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Search\n */\nexport const Search = ({\n  before = <Icon16SearchOutline />,\n  className,\n  defaultValue = '',\n  placeholder = 'Поиск',\n  after = 'Отмена',\n  getRef,\n  icon,\n  onIconClick = noop,\n  style,\n  autoComplete = 'off',\n  onChange: onChangeProp,\n  value: valueProp,\n  iconAriaLabel,\n  clearAriaLabel = 'Очистить',\n  ...inputProps\n}: SearchProps) => {\n  const inputRef = useExternRef(getRef);\n  const {\n    value: isFocused,\n    setTrue: setFocusedTrue,\n    setFalse: setFocusedFalse,\n  } = useBooleanState(false);\n\n  const [value, onChange] = useEnsuredControl({\n    defaultValue,\n    onChange: onChangeProp,\n    value: valueProp,\n  });\n  const { sizeY = 'none' } = useAdaptivity();\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.useCallback(\n    (e: TouchEvent) => onIconClick(e.originalEvent),\n    [onIconClick],\n  );\n\n  const onIconCancelClickStart = React.useCallback(\n    (e: TouchEvent) => {\n      e.originalEvent.preventDefault();\n      inputRef.current?.focus();\n      onCancel();\n    },\n    [inputRef, onCancel],\n  );\n\n  return (\n    <div\n      className={classNames(\n        'vkuiInternalSearch',\n        styles['Search'],\n        sizeY === 'none' && styles['Search--sizeY-none'],\n        sizeY === SizeType.COMPACT && styles['Search--sizeY-compact'],\n        isFocused && styles['Search--focused'],\n        value && styles['Search--has-value'],\n        after && styles['Search--has-after'],\n        icon && styles['Search--has-icon'],\n        className,\n      )}\n      style={style}\n    >\n      <div className={styles['Search__field']}>\n        <label className={styles['Search__control']}>\n          {before}\n          <Headline\n            Component=\"input\"\n            type=\"search\"\n            level=\"1\"\n            weight=\"3\"\n            {...inputProps}\n            placeholder={placeholder}\n            autoComplete={autoComplete}\n            getRootRef={inputRef}\n            className={styles['Search__input']}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            onChange={onChange}\n            value={value}\n          />\n        </label>\n        <div className={styles['Search__icons']}>\n          {icon && (\n            <IconButton\n              hoverMode=\"opacity\"\n              onStart={onIconClickStart}\n              className={styles['Search__icon']}\n              onFocus={setFocusedTrue}\n              onBlur={setFocusedFalse}\n              aria-label={iconAriaLabel}\n            >\n              {icon}\n            </IconButton>\n          )}\n          {!!value && (\n            <IconButton\n              hoverMode=\"opacity\"\n              onStart={onIconCancelClickStart}\n              onClick={onCancel}\n              className={styles['Search__icon']}\n              aria-label={clearAriaLabel}\n            >\n              {platform === Platform.IOS ? <Icon16Clear /> : <Icon24Cancel />}\n            </IconButton>\n          )}\n        </div>\n      </div>\n      {platform === 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":["Search","before","Icon16SearchOutline","className","defaultValue","placeholder","after","getRef","icon","onIconClick","noop","style","autoComplete","onChange","onChangeProp","value","valueProp","iconAriaLabel","clearAriaLabel","inputProps","inputRef","useExternRef","useBooleanState","isFocused","setTrue","setFocusedTrue","setFalse","setFocusedFalse","useEnsuredControl","useAdaptivity","sizeY","platform","usePlatform","onFocus","e","onBlur","onCancel","React","useCallback","Object","nativeInputValueSetter","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","originalEvent","onIconCancelClickStart","preventDefault","focus","div","classNames","SizeType","COMPACT","label","Headline","Component","type","level","weight","getRootRef","IconButton","hoverMode","onStart","aria-label","onClick","Platform","IOS","Icon16Clear","Icon24Cancel","Button","mode","size","focusVisibleMode","span"],"mappings":"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"}
+{"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 { useBooleanState } from '../../hooks/useBooleanState';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { VKUITouchEvent } from '../../lib/touch';\nimport { HasRef } from '../../types';\nimport { Button } from '../Button/Button';\nimport { IconButton } from '../IconButton/IconButton';\nimport { TouchEvent } from '../Touch/Touch';\nimport { Headline } from '../Typography/Headline/Headline';\nimport styles from './Search.module.css';\n\nexport interface SearchProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement> {\n  /**\n   * iOS only. Текст кнопки \"отмена\", которая чистит текстовое поле и убирает фокус.\n   */\n  after?: React.ReactNode;\n  before?: React.ReactNode;\n  icon?: React.ReactNode;\n  onIconClick?: (e: VKUITouchEvent) => void;\n  defaultValue?: string;\n  iconAriaLabel?: string;\n  clearAriaLabel?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Search\n */\nexport const Search = ({\n  before = <Icon16SearchOutline />,\n  className,\n  defaultValue = '',\n  placeholder = 'Поиск',\n  after = 'Отмена',\n  getRef,\n  icon,\n  onIconClick = noop,\n  style,\n  autoComplete = 'off',\n  onChange: onChangeProp,\n  value: valueProp,\n  iconAriaLabel,\n  clearAriaLabel = 'Очистить',\n  ...inputProps\n}: SearchProps) => {\n  const inputRef = useExternRef(getRef);\n  const {\n    value: isFocused,\n    setTrue: setFocusedTrue,\n    setFalse: setFocusedFalse,\n  } = useBooleanState(false);\n\n  const [value, onChange] = useEnsuredControl({\n    defaultValue,\n    onChange: onChangeProp,\n    value: valueProp,\n  });\n  const { sizeY = 'none' } = useAdaptivity();\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.useCallback(\n    (e: TouchEvent) => onIconClick(e.originalEvent),\n    [onIconClick],\n  );\n\n  const onIconCancelClickStart = React.useCallback(\n    (e: TouchEvent) => {\n      e.originalEvent.preventDefault();\n      inputRef.current?.focus();\n      onCancel();\n    },\n    [inputRef, onCancel],\n  );\n\n  return (\n    <div\n      className={classNames(\n        'vkuiInternalSearch',\n        styles['Search'],\n        sizeY === 'none' && styles['Search--sizeY-none'],\n        sizeY === SizeType.COMPACT && styles['Search--sizeY-compact'],\n        isFocused && styles['Search--focused'],\n        value && styles['Search--has-value'],\n        after && styles['Search--has-after'],\n        icon && styles['Search--has-icon'],\n        className,\n      )}\n      style={style}\n    >\n      <div className={styles['Search__field']}>\n        <label className={styles['Search__control']}>\n          {before}\n          <Headline\n            Component=\"input\"\n            type=\"search\"\n            level=\"1\"\n            weight=\"3\"\n            {...inputProps}\n            placeholder={placeholder}\n            autoComplete={autoComplete}\n            getRootRef={inputRef}\n            className={styles['Search__input']}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            onChange={onChange}\n            value={value}\n          />\n        </label>\n        <div className={styles['Search__icons']}>\n          {icon && (\n            <IconButton\n              hoverMode=\"opacity\"\n              onStart={onIconClickStart}\n              className={styles['Search__icon']}\n              onFocus={setFocusedTrue}\n              onBlur={setFocusedFalse}\n              aria-label={iconAriaLabel}\n            >\n              {icon}\n            </IconButton>\n          )}\n          {!!value && (\n            <IconButton\n              hoverMode=\"opacity\"\n              onStart={onIconCancelClickStart}\n              onClick={onCancel}\n              className={styles['Search__icon']}\n              aria-label={clearAriaLabel}\n            >\n              {platform === Platform.IOS ? <Icon16Clear /> : <Icon24Cancel />}\n            </IconButton>\n          )}\n        </div>\n      </div>\n      {platform === 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":["Search","before","Icon16SearchOutline","className","defaultValue","placeholder","after","getRef","icon","onIconClick","noop","style","autoComplete","onChange","onChangeProp","value","valueProp","iconAriaLabel","clearAriaLabel","inputProps","inputRef","useExternRef","useBooleanState","isFocused","setTrue","setFocusedTrue","setFalse","setFocusedFalse","useEnsuredControl","useAdaptivity","sizeY","platform","usePlatform","onFocus","e","onBlur","onCancel","React","useCallback","Object","nativeInputValueSetter","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","originalEvent","onIconCancelClickStart","preventDefault","focus","div","classNames","SizeType","COMPACT","label","Headline","Component","type","level","weight","getRootRef","IconButton","hoverMode","onStart","aria-label","onClick","Platform","IOS","Icon16Clear","Icon24Cancel","Button","mode","size","focusVisibleMode","span"],"mappings":"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"}

package/dist/cjs/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 { useId } from '../../hooks/useId';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasRootRef } from '../../types';\nimport { SegmentedControlOption } from './SegmentedControlOption/SegmentedControlOption';\nimport styles from './SegmentedControl.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SegmentedControl--sizeY-none'],\n  [SizeType.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  label: React.ReactChild;\n  value: SegmentedControlValue;\n}\n\nexport interface SegmentedControlProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>,\n    HasRootRef<HTMLDivElement> {\n  options: SegmentedControlOptionInterface[];\n  size?: 'm' | 'l';\n  name?: string;\n  onChange?: (value: SegmentedControlValue) => void;\n  value?: SegmentedControlValue;\n  defaultValue?: SegmentedControlValue;\n}\n\nconst warn = warnOnce('SegmentedControl');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControl = ({\n  size = 'l',\n  name,\n  options,\n  getRootRef,\n  defaultValue = options[0]?.value,\n  children,\n  className,\n  onChange: onChangeProp,\n  value: valueProp,\n  ...restProps\n}: SegmentedControlProps) => {\n  const id = 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    <div\n      {...restProps}\n      className={classNames(\n        styles['SegmentedControl'],\n        sizeY !== SizeType.COMPACT && sizeYClassNames[sizeY],\n        size === 'l' && styles['SegmentedControl--size-l'],\n        className,\n      )}\n      ref={getRootRef}\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              WebkitTransform: translateX,\n            }}\n          />\n        )}\n        {options.map(({ label, className: optionClassName, ...optionProps }) => (\n          <SegmentedControlOption\n            key={`${optionProps.value}`}\n            {...optionProps}\n            className={classNames(styles['SegmentedControl__option'], optionClassName)}\n            name={name ?? id}\n            checked={value === optionProps.value}\n            onChange={() => onChange(optionProps.value)}\n          >\n            {label}\n          </SegmentedControlOption>\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"names":["SegmentedControl","options","sizeYClassNames","none","SizeType","REGULAR","warn","warnOnce","size","name","getRootRef","defaultValue","value","children","className","onChange","onChangeProp","valueProp","restProps","id","useId","useCustomEnsuredControl","useAdaptivity","sizeY","actualIndex","findIndex","option","useIsomorphicLayoutEffect","process","env","NODE_ENV","translateX","div","classNames","COMPACT","ref","role","aria-hidden","style","width","length","transform","WebkitTransform","map","label","optionClassName","optionProps","SegmentedControlOption","key","checked"],"mappings":";;;;+BAyCaA;;;eAAAA;;;;;;;;;+DAzCU;oBACI;6BACG;iCACU;qBAClB;0BACG;yCACiB;wBACjB;sCAEc;IAqCtBC;AAlCjB,IAAMC;IACJC,IAAI;GACHC,qBAASC;AAsBZ,IAAMC,OAAOC,IAAAA,oBAAS;AAKf,IAAMP,mBAAmB;6BAC9BQ,MAAAA,gCAAO,mBACPC,cAAAA,MACAR,iBAAAA,SACAS,oBAAAA,yCACAC,cAAAA,gDAAeV,CAAAA,YAAAA,OAAO,CAAC,EAAE,cAAVA,uBAAAA,KAAAA,IAAAA,UAAYW,6BAC3BC,kBAAAA,UACAC,mBAAAA,WACAC,AAAUC,sBAAVD,UACAH,AAAOK,mBAAPL,OACGM;QATHV;QACAC;QACAR;QACAS;QACAC;QACAE;QACAC;QACAC;QACAH;;IAGA,IAAMO,KAAKC,IAAAA;IAEX,IAA0BC,8CAAAA,IAAAA,4CAAwB;QAChDN,UAAUC;QACVJ,OAAOK;QACPN,cAAAA;IACF,QAJOC,QAAmBS,6BAAZN,WAAYM;IAM1B,IAA2BC,kBAAAA,IAAAA,wDAAAA,gBAAnBC,OAAAA,0CAAQ;IAEhB,IAAMC,cAAcvB,QAAQwB,UAAU,SAACC;eAAWA,OAAOd,UAAUA;;IAEnEe,IAAAA,sDAA0B;QACxB,IAAIH,gBAAgB,CAAC,KAAKI,QAAQC,IAAIC,aAAa,eAAe;YAChExB,KAAK,kDAAkD;QACzD;IACF,GAAG;QAACkB;KAAY;IAEhB,IAAMO,aAAa,AAAC,cAA+B,OAAlB,MAAMP,aAAY;IAEnD,qBACE,qBAACQ,mDACKd;QACJJ,WAAWmB,IAAAA,0CAETV,UAAUnB,qBAAS8B,WAAWhC,eAAe,CAACqB,MAAM,EACpDf,SAAS,uCACTM;QAEFqB,KAAKzB;sBAEL,qBAACsB;QAAII,MAAK;QAAatB,SAAS;OAC7BU,cAAc,CAAC,mBACd,qBAACQ;QACCK,eAAAA;QACAvB,SAAS;QACTwB,OAAO;YACLC,OAAO,AAAC,GAAuB,OAArB,MAAMtC,QAAQuC,QAAO;YAC/BC,WAAWV;YACXW,iBAAiBX;QACnB;QAGH9B,QAAQ0C,IAAI;YAAGC,eAAAA,OAAO9B,AAAW+B,yBAAX/B,WAA+BgC;YAAtCF;YAAO9B;;eACrB,qBAACiC;YACCC,KAAK,AAAC,GAAoB,OAAlBF,YAAYlC;WAChBkC;YACJhC,WAAWmB,IAAAA,kDAA+CY;YAC1DpC,MAAMA,iBAAAA,kBAAAA,OAAQU;YACd8B,SAASrC,UAAUkC,YAAYlC;YAC/BG,UAAU;uBAAMA,SAAS+B,YAAYlC;;YAEpCgC;IACqB;AAKlC"}
+{"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 { useId } from '../../hooks/useId';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasRootRef } from '../../types';\nimport { SegmentedControlOption } from './SegmentedControlOption/SegmentedControlOption';\nimport styles from './SegmentedControl.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SegmentedControl--sizeY-none'],\n  [SizeType.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  label: React.ReactChild;\n  value: SegmentedControlValue;\n}\n\nexport interface SegmentedControlProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>,\n    HasRootRef<HTMLDivElement> {\n  options: SegmentedControlOptionInterface[];\n  size?: 'm' | 'l';\n  name?: string;\n  onChange?: (value: SegmentedControlValue) => void;\n  value?: SegmentedControlValue;\n  defaultValue?: SegmentedControlValue;\n}\n\nconst warn = warnOnce('SegmentedControl');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControl = ({\n  size = 'l',\n  name,\n  options,\n  getRootRef,\n  defaultValue = options[0]?.value,\n  children,\n  className,\n  onChange: onChangeProp,\n  value: valueProp,\n  ...restProps\n}: SegmentedControlProps) => {\n  const id = 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    <div\n      {...restProps}\n      className={classNames(\n        styles['SegmentedControl'],\n        sizeY !== SizeType.COMPACT && sizeYClassNames[sizeY],\n        size === 'l' && styles['SegmentedControl--size-l'],\n        className,\n      )}\n      ref={getRootRef}\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              WebkitTransform: translateX,\n            }}\n          />\n        )}\n        {options.map(({ label, className: optionClassName, ...optionProps }) => (\n          <SegmentedControlOption\n            key={`${optionProps.value}`}\n            {...optionProps}\n            className={classNames(styles['SegmentedControl__option'], optionClassName)}\n            name={name ?? id}\n            checked={value === optionProps.value}\n            onChange={() => onChange(optionProps.value)}\n          >\n            {label}\n          </SegmentedControlOption>\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"names":["SegmentedControl","options","sizeYClassNames","none","SizeType","REGULAR","warn","warnOnce","size","name","getRootRef","defaultValue","value","children","className","onChange","onChangeProp","valueProp","restProps","id","useId","useCustomEnsuredControl","useAdaptivity","sizeY","actualIndex","findIndex","option","useIsomorphicLayoutEffect","process","env","NODE_ENV","translateX","div","classNames","COMPACT","ref","role","aria-hidden","style","width","length","transform","WebkitTransform","map","label","optionClassName","optionProps","SegmentedControlOption","key","checked"],"mappings":";;;;+BAyCaA;;;eAAAA;;;;;;;;;+DAzCU;oBACI;6BACG;iCACU;qBAClB;0BACG;yCACiB;wBACjB;sCAEc;IAqCtBC;AAlCjB,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;AAsBnB,IAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,IAAMP,mBAAmB;6BAC9BQ,MAAAA,gCAAO,mBACPC,cAAAA,MACAR,iBAAAA,SACAS,oBAAAA,yCACAC,cAAAA,iDAAeV,YAAAA,OAAO,CAAC,EAAE,cAAVA,gCAAAA,UAAYW,KAAK,wBAChCC,kBAAAA,UACAC,mBAAAA,WACAC,AAAUC,sBAAVD,UACAH,AAAOK,mBAAPL,OACGM;QATHV;QACAC;QACAR;QACAS;QACAC;QACAE;QACAC;QACAC;QACAH;;IAGA,IAAMO,KAAKC,IAAAA,YAAK;IAEhB,IAA0BC,8CAAAA,IAAAA,0CAAuB,EAAC;QAChDN,UAAUC;QACVJ,OAAOK;QACPN,cAAAA;IACF,QAJOC,QAAmBS,6BAAZN,WAAYM;IAM1B,IAA2BC,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAEhB,IAAMC,cAAcvB,QAAQwB,SAAS,CAAC,SAACC;eAAWA,OAAOd,KAAK,KAAKA;;IAEnEe,IAAAA,oDAAyB,EAAC;QACxB,IAAIH,gBAAgB,CAAC,KAAKI,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;YAChExB,KAAK,kDAAkD;QACzD;IACF,GAAG;QAACkB;KAAY;IAEhB,IAAMO,aAAa,AAAC,cAA+B,OAAlB,MAAMP,aAAY;IAEnD,qBACE,qBAACQ,mDACKd;QACJJ,WAAWmB,IAAAA,gBAAU,0BAEnBV,UAAUnB,oBAAQ,CAAC8B,OAAO,IAAIhC,eAAe,CAACqB,MAAM,EACpDf,SAAS,uCACTM;QAEFqB,KAAKzB;sBAEL,qBAACsB;QAAII,MAAK;QAAatB,SAAS;OAC7BU,cAAc,CAAC,mBACd,qBAACQ;QACCK,eAAAA;QACAvB,SAAS;QACTwB,OAAO;YACLC,OAAO,AAAC,GAAuB,OAArB,MAAMtC,QAAQuC,MAAM,EAAC;YAC/BC,WAAWV;YACXW,iBAAiBX;QACnB;QAGH9B,QAAQ0C,GAAG,CAAC;YAAGC,eAAAA,OAAO9B,AAAW+B,yBAAX/B,WAA+BgC;YAAtCF;YAAO9B;;eACrB,qBAACiC,8CAAsB;YACrBC,KAAK,AAAC,GAAoB,OAAlBF,YAAYlC,KAAK;WACrBkC;YACJhC,WAAWmB,IAAAA,gBAAU,kCAAqCY;YAC1DpC,MAAMA,iBAAAA,kBAAAA,OAAQU;YACd8B,SAASrC,UAAUkC,YAAYlC,KAAK;YACpCG,UAAU;uBAAMA,SAAS+B,YAAYlC,KAAK;;YAEzCgC;IACqB;AAKlC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { SizeType } from '../../../lib/adaptivity';\nimport { callMultiple } from '../../../lib/callMultiple';\nimport { HasRef } from '../../../types';\nimport { FocusVisible } from '../../FocusVisible/FocusVisible';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport styles from './SegmentedControlOption.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SegmentedControlOption__content--sizeY-none'],\n  [SizeType.COMPACT]: styles['SegmentedControlOption__content--sizeY-compact'],\n};\n\nexport interface SegmentedControlOptionProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControlOption = ({\n  getRef,\n  className,\n  style,\n  children,\n  ...restProps\n}: SegmentedControlOptionProps) => {\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <label\n      className={classNames(\n        styles['SegmentedControlOption'],\n        restProps.checked && styles['SegmentedControlOption--checked'],\n        className,\n      )}\n      style={style}\n    >\n      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        getRootRef={getRef}\n        type=\"radio\"\n        onBlur={callMultiple(onBlur, restProps.onBlur)}\n        onFocus={callMultiple(onFocus, restProps.onFocus)}\n      />\n      <span\n        className={classNames(\n          styles['SegmentedControlOption__content'],\n          sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        )}\n      >\n        {children}\n      </span>\n      <FocusVisible visible={focusVisible} mode=\"inside\" />\n    </label>\n  );\n};\n"],"names":["SegmentedControlOption","sizeYClassNames","none","SizeType","COMPACT","getRef","className","style","children","restProps","useFocusVisible","focusVisible","onBlur","onFocus","useAdaptivity","sizeY","label","classNames","checked","VisuallyHidden","Component","getRootRef","type","callMultiple","span","REGULAR","FocusVisible","visible","mode"],"mappings":";;;;+BAuBaA;;;eAAAA;;;;;;;;+DAvBU;oBACI;6BACG;+BACE;0BACP;4BACI;4BAEA;8BACE;AAG/B,IAAMC;IACJC,IAAI;GACHC,qBAASC;AAUL,IAAMJ,yBAAyB;QACpCK,gBAAAA,QACAC,mBAAAA,WACAC,eAAAA,OACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAA0CE,oBAAAA,IAAAA,qCAAlCC,eAAkCD,kBAAlCC,cAAcC,SAAoBF,kBAApBE,QAAQC,UAAYH,kBAAZG;IAC9B,IAA2BC,kBAAAA,IAAAA,wDAAAA,gBAAnBC,OAAAA,0CAAQ;IAEhB,qBACE,qBAACC;QACCV,WAAWW,IAAAA,gDAETR,UAAUS,kDACVZ;QAEFC,OAAOA;qBAEP,qBAACY,4EACKV;QACJW,WAAU;QACVC,YAAYhB;QACZiB,MAAK;QACLV,QAAQW,IAAAA,4BAAaX,QAAQH,UAAUG;QACvCC,SAASU,IAAAA,4BAAaV,SAASJ,UAAUI;uBAE3C,qBAACW;QACClB,WAAWW,IAAAA,yDAETF,UAAUZ,qBAASsB,WAAWxB,eAAe,CAACc,MAAM;OAGrDP,yBAEH,qBAACkB;QAAaC,SAAShB;QAAciB,MAAK;;AAGhD"}
+{"version":3,"sources":["../../../../../src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { SizeType } from '../../../lib/adaptivity';\nimport { callMultiple } from '../../../lib/callMultiple';\nimport { HasRef } from '../../../types';\nimport { FocusVisible } from '../../FocusVisible/FocusVisible';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport styles from './SegmentedControlOption.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SegmentedControlOption__content--sizeY-none'],\n  [SizeType.COMPACT]: styles['SegmentedControlOption__content--sizeY-compact'],\n};\n\nexport interface SegmentedControlOptionProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControlOption = ({\n  getRef,\n  className,\n  style,\n  children,\n  ...restProps\n}: SegmentedControlOptionProps) => {\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <label\n      className={classNames(\n        styles['SegmentedControlOption'],\n        restProps.checked && styles['SegmentedControlOption--checked'],\n        className,\n      )}\n      style={style}\n    >\n      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        getRootRef={getRef}\n        type=\"radio\"\n        onBlur={callMultiple(onBlur, restProps.onBlur)}\n        onFocus={callMultiple(onFocus, restProps.onFocus)}\n      />\n      <span\n        className={classNames(\n          styles['SegmentedControlOption__content'],\n          sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        )}\n      >\n        {children}\n      </span>\n      <FocusVisible visible={focusVisible} mode=\"inside\" />\n    </label>\n  );\n};\n"],"names":["SegmentedControlOption","sizeYClassNames","none","SizeType","COMPACT","getRef","className","style","children","restProps","useFocusVisible","focusVisible","onBlur","onFocus","useAdaptivity","sizeY","label","classNames","checked","VisuallyHidden","Component","getRootRef","type","callMultiple","span","REGULAR","FocusVisible","visible","mode"],"mappings":";;;;+BAuBaA;;;eAAAA;;;;;;;;+DAvBU;oBACI;6BACG;+BACE;0BACP;4BACI;4BAEA;8BACE;AAG/B,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;AAUZ,IAAMJ,yBAAyB;QACpCK,gBAAAA,QACAC,mBAAAA,WACAC,eAAAA,OACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAA0CE,oBAAAA,IAAAA,gCAAe,KAAjDC,eAAkCD,kBAAlCC,cAAcC,SAAoBF,kBAApBE,QAAQC,UAAYH,kBAAZG;IAC9B,IAA2BC,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAEhB,qBACE,qBAACC;QACCV,WAAWW,IAAAA,gBAAU,gCAEnBR,UAAUS,OAAO,2CACjBZ;QAEFC,OAAOA;qBAEP,qBAACY,8BAAc,8CACTV;QACJW,WAAU;QACVC,YAAYhB;QACZiB,MAAK;QACLV,QAAQW,IAAAA,0BAAY,EAACX,QAAQH,UAAUG,MAAM;QAC7CC,SAASU,IAAAA,0BAAY,EAACV,SAASJ,UAAUI,OAAO;uBAElD,qBAACW;QACClB,WAAWW,IAAAA,gBAAU,yCAEnBF,UAAUZ,oBAAQ,CAACsB,OAAO,IAAIxB,eAAe,CAACc,MAAM;OAGrDP,yBAEH,qBAACkB,0BAAY;QAACC,SAAShB;QAAciB,MAAK;;AAGhD"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { CustomSelect, SelectProps } from '../CustomSelect/CustomSelect';\nimport { NativeSelect } from '../NativeSelect/NativeSelect';\n\nexport type SelectType = 'default' | 'plain' | 'accent';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Select\n */\nexport const Select = ({ children, ...props }: SelectProps) => {\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    dropdownOffsetDistance,\n    fixDropdownWidth,\n    forceDropdownPortal,\n    selectType,\n    autoHideScrollbar,\n    autoHideScrollbarDelay,\n    ...nativeProps // TODO: https://github.com/Microsoft/TypeScript/issues/12936\n  } = props;\n\n  const hasPointer = useAdaptivityHasPointer();\n\n  return (\n    <React.Fragment>\n      {(hasPointer === undefined || hasPointer) && <CustomSelect {...props} />}\n      {(hasPointer === undefined || !hasPointer) && (\n        <NativeSelect {...nativeProps}>\n          {options.map(({ label, value }) => (\n            <option value={value} key={`${value}`}>\n              {label}\n            </option>\n          ))}\n        </NativeSelect>\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["Select","children","props","options","searchable","emptyText","onInputChange","filterFn","popupDirection","renderOption","renderDropdown","fetching","onClose","onOpen","icon","ClearButton","allowClearButton","dropdownOffsetDistance","fixDropdownWidth","forceDropdownPortal","selectType","autoHideScrollbar","autoHideScrollbarDelay","nativeProps","hasPointer","useAdaptivityHasPointer","React","Fragment","undefined","CustomSelect","NativeSelect","map","label","value","option","key"],"mappings":";;;;+BAUaA;;;eAAAA;;;;;+DAVU;uCACiB;4BACE;4BACb;AAOtB,IAAMA,SAAS;QAAGC,kBAAAA,UAAaC;QAAbD;;IACvB,qBAsBIC,MArBFC,SAAAA,sCAAU,EAAE,mBACZC,aAoBEF,MApBFE,YACAC,YAmBEH,MAnBFG,WACAC,gBAkBEJ,MAlBFI,eACAC,WAiBEL,MAjBFK,UACAC,iBAgBEN,MAhBFM,gBACAC,eAeEP,MAfFO,cACAC,iBAcER,MAdFQ,gBACAC,WAaET,MAbFS,UACAC,UAYEV,MAZFU,SACAC,SAWEX,MAXFW,QACAC,OAUEZ,MAVFY,MACAC,cASEb,MATFa,aACAC,mBAQEd,MARFc,kBACAC,yBAOEf,MAPFe,wBACAC,mBAMEhB,MANFgB,kBACAC,sBAKEjB,MALFiB,qBACAC,aAIElB,MAJFkB,YACAC,oBAGEnB,MAHFmB,mBACAC,yBAEEpB,MAFFoB,wBACGC,YAAY,6DAA6D;oCAC1ErB;QArBFC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAIF,IAAME,aAAaC,IAAAA;IAEnB,qBACE,qBAACC,OAAMC,gBACJ,AAACH,CAAAA,eAAeI,aAAaJ,UAAS,mBAAM,qBAACK,4BAAiB3B,QAC9D,AAACsB,CAAAA,eAAeI,aAAa,CAACJ,UAAS,mBACtC,qBAACM,4BAAiBP,aACfpB,QAAQ4B,IAAI;YAAGC,cAAAA,OAAOC,cAAAA;6BACrB,qBAACC;YAAOD,OAAOA;YAAOE,KAAK,AAAC,GAAQ,OAANF;WAC3BD;;AAOf"}
+{"version":3,"sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { CustomSelect, SelectProps } from '../CustomSelect/CustomSelect';\nimport { NativeSelect } from '../NativeSelect/NativeSelect';\n\nexport type SelectType = 'default' | 'plain' | 'accent';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Select\n */\nexport const Select = ({ children, ...props }: SelectProps) => {\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    dropdownOffsetDistance,\n    fixDropdownWidth,\n    forceDropdownPortal,\n    selectType,\n    autoHideScrollbar,\n    autoHideScrollbarDelay,\n    ...nativeProps // TODO: https://github.com/Microsoft/TypeScript/issues/12936\n  } = props;\n\n  const hasPointer = useAdaptivityHasPointer();\n\n  return (\n    <React.Fragment>\n      {(hasPointer === undefined || hasPointer) && <CustomSelect {...props} />}\n      {(hasPointer === undefined || !hasPointer) && (\n        <NativeSelect {...nativeProps}>\n          {options.map(({ label, value }) => (\n            <option value={value} key={`${value}`}>\n              {label}\n            </option>\n          ))}\n        </NativeSelect>\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["Select","children","props","options","searchable","emptyText","onInputChange","filterFn","popupDirection","renderOption","renderDropdown","fetching","onClose","onOpen","icon","ClearButton","allowClearButton","dropdownOffsetDistance","fixDropdownWidth","forceDropdownPortal","selectType","autoHideScrollbar","autoHideScrollbarDelay","nativeProps","hasPointer","useAdaptivityHasPointer","React","Fragment","undefined","CustomSelect","NativeSelect","map","label","value","option","key"],"mappings":";;;;+BAUaA;;;eAAAA;;;;;+DAVU;uCACiB;4BACE;4BACb;AAOtB,IAAMA,SAAS;QAAGC,kBAAAA,UAAaC;QAAbD;;IACvB,qBAsBIC,MArBFC,SAAAA,sCAAU,EAAE,mBACZC,aAoBEF,MApBFE,YACAC,YAmBEH,MAnBFG,WACAC,gBAkBEJ,MAlBFI,eACAC,WAiBEL,MAjBFK,UACAC,iBAgBEN,MAhBFM,gBACAC,eAeEP,MAfFO,cACAC,iBAcER,MAdFQ,gBACAC,WAaET,MAbFS,UACAC,UAYEV,MAZFU,SACAC,SAWEX,MAXFW,QACAC,OAUEZ,MAVFY,MACAC,cASEb,MATFa,aACAC,mBAQEd,MARFc,kBACAC,yBAOEf,MAPFe,wBACAC,mBAMEhB,MANFgB,kBACAC,sBAKEjB,MALFiB,qBACAC,aAIElB,MAJFkB,YACAC,oBAGEnB,MAHFmB,mBACAC,yBAEEpB,MAFFoB,wBACGC,YAAY,6DAA6D;oCAC1ErB;QArBFC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAIF,IAAME,aAAaC,IAAAA,gDAAuB;IAE1C,qBACE,qBAACC,OAAMC,QAAQ,QACZ,AAACH,CAAAA,eAAeI,aAAaJ,UAAS,mBAAM,qBAACK,0BAAY,EAAK3B,QAC9D,AAACsB,CAAAA,eAAeI,aAAa,CAACJ,UAAS,mBACtC,qBAACM,0BAAY,EAAKP,aACfpB,QAAQ4B,GAAG,CAAC;YAAGC,cAAAA,OAAOC,cAAAA;6BACrB,qBAACC;YAAOD,OAAOA;YAAOE,KAAK,AAAC,GAAQ,OAANF;WAC3BD;;AAOf"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SelectMimicry/SelectMimicry.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { getFormFieldModeFromSelectType } from '../../lib/select';\nimport { HasAlign, HasRootRef } from '../../types';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport type { SelectType } from '../Select/Select';\nimport { SelectTypography } from '../SelectTypography/SelectTypography';\nimport styles from '../Select/Select.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Select--sizeY-none'],\n  [SizeType.COMPACT]: styles['Select--sizeY-compact'],\n};\n\nexport interface SelectMimicryProps\n  extends React.HTMLAttributes<HTMLElement>,\n    HasAlign,\n    HasRootRef<HTMLElement>,\n    Pick<FormFieldProps, 'before' | 'after' | 'status'> {\n  multiline?: boolean;\n  disabled?: boolean;\n  selectType?: SelectType;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SelectMimicry\n */\nexport const SelectMimicry = ({\n  tabIndex = 0,\n  placeholder,\n  children,\n  align,\n  getRootRef,\n  multiline,\n  disabled,\n  onClick,\n  before,\n  after = <DropdownIcon />,\n  selectType = 'default',\n  status,\n  className,\n  ...restProps\n}: SelectMimicryProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const title = children || placeholder;\n\n  return (\n    <FormField\n      {...restProps}\n      tabIndex={disabled ? undefined : tabIndex}\n      className={classNames(\n        styles['Select'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        !children && styles['Select--empty'],\n        multiline && styles['Select--multiline'],\n        align === 'center' && styles['Select--align-center'],\n        align === 'right' && styles['Select--align-right'],\n        before && styles['Select--hasBefore'],\n        className,\n      )}\n      getRootRef={getRootRef}\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled}\n      before={before}\n      after={after}\n      mode={getFormFieldModeFromSelectType(selectType)}\n      status={status}\n    >\n      <div className={styles['Select__container']}>\n        <SelectTypography selectType={selectType} className={styles['Select__title']}>\n          {title}\n        </SelectTypography>\n      </div>\n    </FormField>\n  );\n};\n"],"names":["SelectMimicry","sizeYClassNames","none","SizeType","COMPACT","tabIndex","placeholder","children","align","getRootRef","multiline","disabled","onClick","before","after","DropdownIcon","selectType","status","className","restProps","useAdaptivity","sizeY","title","FormField","undefined","classNames","REGULAR","mode","getFormFieldModeFromSelectType","div","SelectTypography"],"mappings":";;;;+BA8BaA;;;eAAAA;;;;;;;;+DA9BU;oBACI;6BACG;0BACL;sBACsB;4BAElB;yBACa;gCAET;AAGjC,IAAMC;IACJC,IAAI;GACHC,qBAASC;AAgBL,IAAMJ,gBAAgB;iCAC3BK,UAAAA,wCAAW,qBACXC,qBAAAA,aACAC,kBAAAA,UACAC,eAAAA,OACAC,oBAAAA,YACAC,mBAAAA,WACAC,kBAAAA,UACAC,iBAAAA,SACAC,gBAAAA,8BACAC,OAAAA,gDAAQ,qBAACC,6EACTC,YAAAA,4CAAa,+BACbC,gBAAAA,QACAC,mBAAAA,WACGC;QAbHd;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;;IAGA,IAA2BE,kBAAAA,IAAAA,wDAAAA,gBAAnBC,OAAAA,0CAAQ;IAChB,IAAMC,QAAQf,YAAYD;IAE1B,qBACE,qBAACiB,kEACKJ;QACJd,UAAUM,WAAWa,YAAYnB;QACjCa,WAAWO,IAAAA,gCAETJ,UAAUlB,qBAASuB,WAAWzB,eAAe,CAACoB,MAAM,EACpD,CAACd,iCACDG,sCACAF,UAAU,wCACVA,UAAU,sCACVK,mCACAK;QAEFT,YAAYA;QACZG,SAASD,WAAWa,YAAYZ;QAChCD,UAAUA;QACVE,QAAQA;QACRC,OAAOA;QACPa,MAAMC,IAAAA,wCAA+BZ;QACrCC,QAAQA;sBAER,qBAACY;QAAIX,SAAS;qBACZ,qBAACY;QAAiBd,YAAYA;QAAYE,SAAS;OAChDI;AAKX"}
+{"version":3,"sources":["../../../../src/components/SelectMimicry/SelectMimicry.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { getFormFieldModeFromSelectType } from '../../lib/select';\nimport { HasAlign, HasRootRef } from '../../types';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport type { SelectType } from '../Select/Select';\nimport { SelectTypography } from '../SelectTypography/SelectTypography';\nimport styles from '../Select/Select.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Select--sizeY-none'],\n  [SizeType.COMPACT]: styles['Select--sizeY-compact'],\n};\n\nexport interface SelectMimicryProps\n  extends React.HTMLAttributes<HTMLElement>,\n    HasAlign,\n    HasRootRef<HTMLElement>,\n    Pick<FormFieldProps, 'before' | 'after' | 'status'> {\n  multiline?: boolean;\n  disabled?: boolean;\n  selectType?: SelectType;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SelectMimicry\n */\nexport const SelectMimicry = ({\n  tabIndex = 0,\n  placeholder,\n  children,\n  align,\n  getRootRef,\n  multiline,\n  disabled,\n  onClick,\n  before,\n  after = <DropdownIcon />,\n  selectType = 'default',\n  status,\n  className,\n  ...restProps\n}: SelectMimicryProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const title = children || placeholder;\n\n  return (\n    <FormField\n      {...restProps}\n      tabIndex={disabled ? undefined : tabIndex}\n      className={classNames(\n        styles['Select'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        !children && styles['Select--empty'],\n        multiline && styles['Select--multiline'],\n        align === 'center' && styles['Select--align-center'],\n        align === 'right' && styles['Select--align-right'],\n        before && styles['Select--hasBefore'],\n        className,\n      )}\n      getRootRef={getRootRef}\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled}\n      before={before}\n      after={after}\n      mode={getFormFieldModeFromSelectType(selectType)}\n      status={status}\n    >\n      <div className={styles['Select__container']}>\n        <SelectTypography selectType={selectType} className={styles['Select__title']}>\n          {title}\n        </SelectTypography>\n      </div>\n    </FormField>\n  );\n};\n"],"names":["SelectMimicry","sizeYClassNames","none","SizeType","COMPACT","tabIndex","placeholder","children","align","getRootRef","multiline","disabled","onClick","before","after","DropdownIcon","selectType","status","className","restProps","useAdaptivity","sizeY","title","FormField","undefined","classNames","REGULAR","mode","getFormFieldModeFromSelectType","div","SelectTypography"],"mappings":";;;;+BA8BaA;;;eAAAA;;;;;;;;+DA9BU;oBACI;6BACG;0BACL;sBACsB;4BAElB;yBACa;gCAET;AAGjC,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;AAgBZ,IAAMJ,gBAAgB;iCAC3BK,UAAAA,wCAAW,qBACXC,qBAAAA,aACAC,kBAAAA,UACAC,eAAAA,OACAC,oBAAAA,YACAC,mBAAAA,WACAC,kBAAAA,UACAC,iBAAAA,SACAC,gBAAAA,8BACAC,OAAAA,gDAAQ,qBAACC,0BAAY,mDACrBC,YAAAA,4CAAa,+BACbC,gBAAAA,QACAC,mBAAAA,WACGC;QAbHd;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;;IAGA,IAA2BE,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAChB,IAAMC,QAAQf,YAAYD;IAE1B,qBACE,qBAACiB,oBAAS,8CACJJ;QACJd,UAAUM,WAAWa,YAAYnB;QACjCa,WAAWO,IAAAA,gBAAU,gBAEnBJ,UAAUlB,oBAAQ,CAACuB,OAAO,IAAIzB,eAAe,CAACoB,MAAM,EACpD,CAACd,iCACDG,sCACAF,UAAU,wCACVA,UAAU,sCACVK,mCACAK;QAEFT,YAAYA;QACZG,SAASD,WAAWa,YAAYZ;QAChCD,UAAUA;QACVE,QAAQA;QACRC,OAAOA;QACPa,MAAMC,IAAAA,sCAA8B,EAACZ;QACrCC,QAAQA;sBAER,qBAACY;QAAIX,SAAS;qBACZ,qBAACY,kCAAgB;QAACd,YAAYA;QAAYE,SAAS;OAChDI;AAKX"}

package/dist/cjs/components/SelectTypography/SelectTypography.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SelectTypography/SelectTypography.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasChildren } from '../../types';\nimport type { SelectType } from '../Select/Select';\nimport styles from './SelectTypography.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SelectTypography--sizeY-none'],\n  compact: styles['SelectTypography--sizeY-compact'],\n};\n\nconst platformClassNames = {\n  vkcom: styles['SelectTypography--vkcom'],\n  android: styles['SelectTypography--android'],\n};\n\nexport interface SelectTypographyProps extends React.HTMLAttributes<HTMLSpanElement>, HasChildren {\n  selectType?: SelectType;\n}\n\n/**\n * @private\n */\nexport const SelectTypography = ({\n  selectType = 'default',\n  children,\n  className,\n  ...restProps\n}: SelectTypographyProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <span\n      className={classNames(\n        styles['SelectTypography'],\n        platformClassNames.hasOwnProperty(platform) && platformClassNames[platform],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        selectType === 'accent' && styles['SelectTypography--selectType-accent'],\n        className,\n      )}\n      {...restProps}\n    >\n      {children}\n    </span>\n  );\n};\n"],"names":["SelectTypography","sizeYClassNames","none","compact","platformClassNames","vkcom","android","selectType","children","className","restProps","platform","usePlatform","useAdaptivity","sizeY","span","classNames","hasOwnProperty","SizeType","REGULAR"],"mappings":";;;;+BA0BaA;;;eAAAA;;;;;;+DA1BU;oBACI;6BACG;2BACF;0BACH;AAKzB,IAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAEA,IAAMC,qBAAqB;IACzBC,KAAK;IACLC,OAAO;AACT;AASO,IAAMN,mBAAmB;mCAC9BO,YAAAA,4CAAa,+BACbC,kBAAAA,UACAC,mBAAAA,WACGC;QAHHH;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA;IACjB,IAA2BC,kBAAAA,IAAAA,wDAAAA,gBAAnBC,OAAAA,0CAAQ;IAEhB,qBACE,qBAACC;QACCN,WAAWO,IAAAA,0CAETZ,mBAAmBa,eAAeN,aAAaP,kBAAkB,CAACO,SAAS,EAC3EG,UAAUI,qBAASC,WAAWlB,eAAe,CAACa,MAAM,EACpDP,eAAe,uDACfE;OAEEC,YAEHF;AAGP"}
+{"version":3,"sources":["../../../../src/components/SelectTypography/SelectTypography.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasChildren } from '../../types';\nimport type { SelectType } from '../Select/Select';\nimport styles from './SelectTypography.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SelectTypography--sizeY-none'],\n  compact: styles['SelectTypography--sizeY-compact'],\n};\n\nconst platformClassNames = {\n  vkcom: styles['SelectTypography--vkcom'],\n  android: styles['SelectTypography--android'],\n};\n\nexport interface SelectTypographyProps extends React.HTMLAttributes<HTMLSpanElement>, HasChildren {\n  selectType?: SelectType;\n}\n\n/**\n * @private\n */\nexport const SelectTypography = ({\n  selectType = 'default',\n  children,\n  className,\n  ...restProps\n}: SelectTypographyProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <span\n      className={classNames(\n        styles['SelectTypography'],\n        platformClassNames.hasOwnProperty(platform) && platformClassNames[platform],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        selectType === 'accent' && styles['SelectTypography--selectType-accent'],\n        className,\n      )}\n      {...restProps}\n    >\n      {children}\n    </span>\n  );\n};\n"],"names":["SelectTypography","sizeYClassNames","none","compact","platformClassNames","vkcom","android","selectType","children","className","restProps","platform","usePlatform","useAdaptivity","sizeY","span","classNames","hasOwnProperty","SizeType","REGULAR"],"mappings":";;;;+BA0BaA;;;eAAAA;;;;;;+DA1BU;oBACI;6BACG;2BACF;0BACH;AAKzB,IAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAEA,IAAMC,qBAAqB;IACzBC,KAAK;IACLC,OAAO;AACT;AASO,IAAMN,mBAAmB;mCAC9BO,YAAAA,4CAAa,+BACbC,kBAAAA,UACAC,mBAAAA,WACGC;QAHHH;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAC5B,IAA2BC,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAEhB,qBACE,qBAACC;QACCN,WAAWO,IAAAA,gBAAU,0BAEnBZ,mBAAmBa,cAAc,CAACN,aAAaP,kBAAkB,CAACO,SAAS,EAC3EG,UAAUI,oBAAQ,CAACC,OAAO,IAAIlB,eAAe,CAACa,MAAM,EACpDP,eAAe,uDACfE;OAEEC,YAEHF;AAGP"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Separator.module.css';\n\nexport interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * С этим свойством компонент не будет иметь отступы слева и справа\n   */\n  wide?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Separator\n */\nexport const Separator = ({ wide, className, ...restProps }: SeparatorProps) => (\n  <div\n    {...restProps}\n    className={classNames(styles['Separator'], !wide && styles['Separator--padded'], className)}\n  >\n    <hr className={styles['Separator__in']} />\n  </div>\n);\n"],"names":["Separator","wide","className","restProps","div","classNames","hr"],"mappings":";;;;+BAcaA;;;eAAAA;;;;;;;+DAdU;oBACI;AAapB,IAAMA,YAAY;QAAGC,cAAAA,MAAMC,mBAAAA,WAAcC;QAApBF;QAAMC;;WAChC,qBAACE,mDACKD;QACJD,WAAWG,IAAAA,mCAAgC,CAACJ,iCAAqCC;sBAEjF,qBAACI;QAAGJ,SAAS;;AACV"}
+{"version":3,"sources":["../../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Separator.module.css';\n\nexport interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * С этим свойством компонент не будет иметь отступы слева и справа\n   */\n  wide?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Separator\n */\nexport const Separator = ({ wide, className, ...restProps }: SeparatorProps) => (\n  <div\n    {...restProps}\n    className={classNames(styles['Separator'], !wide && styles['Separator--padded'], className)}\n  >\n    <hr className={styles['Separator__in']} />\n  </div>\n);\n"],"names":["Separator","wide","className","restProps","div","classNames","hr"],"mappings":";;;;+BAcaA;;;eAAAA;;;;;;;+DAdU;oBACI;AAapB,IAAMA,YAAY;QAAGC,cAAAA,MAAMC,mBAAAA,WAAcC;QAApBF;QAAMC;;WAChC,qBAACE,mDACKD;QACJD,WAAWG,IAAAA,gBAAU,mBAAsB,CAACJ,iCAAqCC;sBAEjF,qBAACI;QAAGJ,SAAS;;AACV"}

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export interface ChevronProps extends Omit<React.SVGProps<SVGSVGElement>, 'width' | 'height'> {
+    size?: 's' | 'm';
+}
+export declare const Chevron: ({ size, ...restProps }: ChevronProps) => React.JSX.Element;

package/dist/cjs/components/SimpleCell/Chevron/Chevron.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Chevron", {
+    enumerable: true,
+    get: function() {
+        return Chevron;
+    }
+});
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+var _icons = require("@vkontakte/icons");
+var iconSize = {
+    s: _icons.Icon16Chevron,
+    m: _icons.Icon24ChevronCompactRight
+};
+var Chevron = function(_param) {
+    var _param_size = _param.size, size = _param_size === void 0 ? "m" : _param_size, restProps = _object_without_properties._(_param, [
+        "size"
+    ]);
+    var Icon = iconSize[size];
+    return /*#__PURE__*/ _react.createElement(Icon, restProps);
+};
+
+//# sourceMappingURL=Chevron.js.map

package/dist/cjs/components/SimpleCell/Chevron/Chevron.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/SimpleCell/Chevron/Chevron.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Chevron, Icon24ChevronCompactRight } from '@vkontakte/icons';\n\nconst iconSize = {\n  s: Icon16Chevron,\n  m: Icon24ChevronCompactRight,\n};\n\nexport interface ChevronProps extends Omit<React.SVGProps<SVGSVGElement>, 'width' | 'height'> {\n  size?: 's' | 'm';\n}\n\nexport const Chevron = ({ size = 'm', ...restProps }: ChevronProps) => {\n  const Icon = iconSize[size];\n\n  return <Icon {...restProps} />;\n};\n"],"names":["Chevron","iconSize","s","Icon16Chevron","m","Icon24ChevronCompactRight","size","restProps","Icon"],"mappings":";;;;+BAYaA;;;eAAAA;;;;;+DAZU;qBACkC;AAEzD,IAAMC,WAAW;IACfC,GAAGC,oBAAa;IAChBC,GAAGC,gCAAyB;AAC9B;AAMO,IAAML,UAAU;6BAAGM,MAAAA,gCAAO,mBAAQC;QAAfD;;IACxB,IAAME,OAAOP,QAAQ,CAACK,KAAK;IAE3B,qBAAO,qBAACE,MAASD;AACnB"}

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

@@ -49,7 +49,11 @@ export interface SimpleCellOwnProps extends HasComponent {
     /**
      * В iOS добавляет chevron справа. Передавать `true`, если предполагается переход при клике по ячейке.
      */
-    expandable?: boolean;
+    expandable?: boolean | 'auto' | 'always';
+    /**
+     * Размер chevron
+     */
+    chevronSize?: 's' | 'm';
     /**
      * Включает многострочный режим для отображения текста
      */
@@ -60,4 +64,4 @@ export interface SimpleCellProps extends SimpleCellOwnProps, TappableProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/SimpleCell
  */
-export declare const SimpleCell: ({ badgeBeforeTitle, badgeAfterTitle, badgeBeforeSubtitle, badgeAfterSubtitle, before, indicator, children, after, expandable, multiline, subhead, subtitle, extraSubtitle, className, ...restProps }: SimpleCellProps) => React.JSX.Element;
+export declare const SimpleCell: ({ badgeBeforeTitle, badgeAfterTitle, badgeBeforeSubtitle, badgeAfterSubtitle, before, indicator, children, after, expandable, multiline, subhead, subtitle, extraSubtitle, className, chevronSize, ...restProps }: SimpleCellProps) => React.JSX.Element;

package/dist/cjs/components/SimpleCell/SimpleCell.js

@@ -14,16 +14,18 @@ var _object_spread = require("@swc/helpers/_/_object_spread");
 var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-var _icons = require("@vkontakte/icons");
 var _vkjs = require("@vkontakte/vkjs");
 var _useAdaptivity = require("../../hooks/useAdaptivity");
 var _usePlatform = require("../../hooks/usePlatform");
 var _adaptivity = require("../../lib/adaptivity");
 var _platform = require("../../lib/platform");
+var _warnOnce = require("../../lib/warnOnce");
 var _Tappable = require("../Tappable/Tappable");
 var _Footnote = require("../Typography/Footnote/Footnote");
 var _Headline = require("../Typography/Headline/Headline");
 var _Subhead = require("../Typography/Subhead/Subhead");
+var _Chevron = require("./Chevron/Chevron");
+var warn = (0, _warnOnce.warnOnce)("SimpleCell");
 var platformClassNames = {
     ios: (0, _vkjs.classNames)("vkuiSimpleCell--ios", "vkuiInternalSimpleCell--ios"),
     android: "vkuiSimpleCell--android",
@@ -34,7 +36,7 @@ var sizeYClassNames = (_obj = {
     none: (0, _vkjs.classNames)("vkuiSimpleCell--sizeY-none", "vkuiInternalSimpleCell--sizeY-none")
 }, _define_property._(_obj, _adaptivity.SizeType.COMPACT, (0, _vkjs.classNames)("vkuiSimpleCell--sizeY-compact", "vkuiInternalSimpleCell--sizeY-compact")), _define_property._(_obj, _adaptivity.SizeType.REGULAR, "vkuiSimpleCell--sizeY-regular"), _obj);
 var SimpleCell = function(_param) {
-    var badgeBeforeTitle = _param.badgeBeforeTitle, badgeAfterTitle = _param.badgeAfterTitle, badgeBeforeSubtitle = _param.badgeBeforeSubtitle, badgeAfterSubtitle = _param.badgeAfterSubtitle, before = _param.before, indicator = _param.indicator, children = _param.children, after = _param.after, expandable = _param.expandable, multiline = _param.multiline, subhead = _param.subhead, subtitle = _param.subtitle, extraSubtitle = _param.extraSubtitle, className = _param.className, restProps = _object_without_properties._(_param, [
+    var badgeBeforeTitle = _param.badgeBeforeTitle, badgeAfterTitle = _param.badgeAfterTitle, badgeBeforeSubtitle = _param.badgeBeforeSubtitle, badgeAfterSubtitle = _param.badgeAfterSubtitle, before = _param.before, indicator = _param.indicator, children = _param.children, after = _param.after, expandable = _param.expandable, multiline = _param.multiline, subhead = _param.subhead, subtitle = _param.subtitle, extraSubtitle = _param.extraSubtitle, className = _param.className, _param_chevronSize = _param.chevronSize, chevronSize = _param_chevronSize === void 0 ? "m" : _param_chevronSize, restProps = _object_without_properties._(_param, [
         "badgeBeforeTitle",
         "badgeAfterTitle",
         "badgeBeforeSubtitle",
@@ -48,10 +50,16 @@ var SimpleCell = function(_param) {
         "subhead",
         "subtitle",
         "extraSubtitle",
-        "className"
+        "className",
+        "chevronSize"
     ]);
     var platform = (0, _usePlatform.usePlatform)();
-    var hasAfter = (0, _vkjs.hasReactNode)(after) || expandable && platform === _platform.Platform.IOS;
+    if (process.env.NODE_ENV === "development" && expandable === true) {
+        // TODO [>=6]: Обновить типизацию для expandable свойства
+        warn('Значение true свойства expandable устарело и будет удалено в v6. Используйте expandable="auto"');
+    }
+    var hasChevron = expandable === "always" || (expandable === true || expandable === "auto") && platform === _platform.Platform.IOS;
+    var hasAfter = (0, _vkjs.hasReactNode)(after) || hasChevron;
     var _useAdaptivity1 = (0, _useAdaptivity.useAdaptivity)(), _useAdaptivity_sizeY = _useAdaptivity1.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? "none" : _useAdaptivity_sizeY;
     return /*#__PURE__*/ _react.createElement(_Tappable.Tappable, _object_spread_props._(_object_spread._({}, restProps), {
         className: (0, _vkjs.classNames)("vkuiSimpleCell", "vkuiInternalSimpleCell", platformClassNames.hasOwnProperty(platform) ? platformClassNames[platform] : platformClassNames.android, sizeYClassNames[sizeY], multiline && "vkuiSimpleCell--mult", className)
@@ -88,7 +96,10 @@ var SimpleCell = function(_param) {
         className: "vkuiSimpleCell__indicator"
     }, indicator), hasAfter && /*#__PURE__*/ _react.createElement("div", {
         className: (0, _vkjs.classNames)("vkuiSimpleCell__after", "vkuiInternalSimpleCell__after")
-    }, after, expandable && platform === _platform.Platform.IOS && /*#__PURE__*/ _react.createElement(_icons.Icon24Chevron, null)));
+    }, after, hasChevron && /*#__PURE__*/ _react.createElement(_Chevron.Chevron, {
+        size: chevronSize,
+        className: "vkuiSimpleCell__chevronIcon"
+    })));
 };
 
 //# sourceMappingURL=SimpleCell.js.map

package/dist/cjs/components/SimpleCell/SimpleCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SimpleCell/SimpleCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Chevron } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { HasComponent } from '../../types';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './SimpleCell.module.css';\n\nconst platformClassNames = {\n  ios: classNames(styles['SimpleCell--ios'], 'vkuiInternalSimpleCell--ios'),\n  android: styles['SimpleCell--android'],\n  vkcom: styles['SimpleCell--vkcom'],\n};\n\nconst sizeYClassNames = {\n  none: classNames(styles['SimpleCell--sizeY-none'], 'vkuiInternalSimpleCell--sizeY-none'),\n  [SizeType.COMPACT]: classNames(\n    styles['SimpleCell--sizeY-compact'],\n    'vkuiInternalSimpleCell--sizeY-compact',\n  ),\n  [SizeType.REGULAR]: styles['SimpleCell--sizeY-regular'],\n};\n\nexport interface SimpleCellOwnProps extends HasComponent {\n  /**\n   * Иконка 28 или `<Avatar size={28|32|40|48|72} />`\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка 12 или `<Badge />`. Добавится слева от текста `children`.\n   */\n  badgeBeforeTitle?: React.ReactNode;\n  /**\n   * Иконка 12 или `<Badge />`. Добавится справа от текста `children`.\n   */\n  badgeAfterTitle?: React.ReactNode;\n  /**\n   * Иконка 12. Добавится слева от текста `subtitle`.\n   */\n  badgeBeforeSubtitle?: React.ReactNode;\n  /**\n   * Иконка 12. Добавится справа от текста `subtitle`.\n   */\n  badgeAfterSubtitle?: React.ReactNode;\n  /**\n   * Контейнер для текста справа от `children`.\n   */\n  indicator?: React.ReactNode;\n  /**\n   * Дополнительная строка текста над `children`.\n   */\n  subhead?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children`.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children` и `subtitle`.\n   */\n  extraSubtitle?: React.ReactNode;\n  /**\n   * Иконка 24|28 или `<Switch />`. Располагается справа от `indicator`.\n   */\n  after?: React.ReactNode;\n  /**\n   * Убирает анимацию нажатия\n   */\n  disabled?: boolean;\n  /**\n   * В iOS добавляет chevron справа. Передавать `true`, если предполагается переход при клике по ячейке.\n   */\n  expandable?: boolean;\n  /**\n   * Включает многострочный режим для отображения текста\n   */\n  multiline?: boolean;\n}\n\nexport interface SimpleCellProps extends SimpleCellOwnProps, TappableProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SimpleCell\n */\nexport const SimpleCell = ({\n  badgeBeforeTitle,\n  badgeAfterTitle,\n  badgeBeforeSubtitle,\n  badgeAfterSubtitle,\n  before,\n  indicator,\n  children,\n  after,\n  expandable,\n  multiline,\n  subhead,\n  subtitle,\n  extraSubtitle,\n  className,\n  ...restProps\n}: SimpleCellProps) => {\n  const platform = usePlatform();\n  const hasAfter = hasReactNode(after) || (expandable && platform === Platform.IOS);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNames(\n        styles['SimpleCell'],\n        'vkuiInternalSimpleCell',\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        sizeYClassNames[sizeY],\n        multiline && styles['SimpleCell--mult'],\n        className,\n      )}\n    >\n      {before}\n      <div className={classNames(styles['SimpleCell__main'], 'vkuiInternalSimpleCell__main')}>\n        {subhead && (\n          <Subhead\n            Component=\"span\"\n            className={classNames(styles['SimpleCell__text'], styles['SimpleCell__subhead'])}\n          >\n            {subhead}\n          </Subhead>\n        )}\n        <div className={styles['SimpleCell__content']}>\n          {badgeBeforeTitle && (\n            <span className={styles['SimpleCell__badge']}>{badgeBeforeTitle}</span>\n          )}\n          <Headline Component=\"span\" className={styles['SimpleCell__children']} weight=\"3\">\n            {children}\n          </Headline>\n          {hasReactNode(badgeAfterTitle) && (\n            <span className={styles['SimpleCell__badge']}>{badgeAfterTitle}</span>\n          )}\n        </div>\n        {subtitle && (\n          <div className={styles['SimpleCell__content']}>\n            {badgeBeforeSubtitle && (\n              <span className={styles['SimpleCell__badge']}>{badgeBeforeSubtitle}</span>\n            )}\n            <Footnote\n              normalize={false}\n              className={classNames(styles['SimpleCell__text'], styles['SimpleCell__subtitle'])}\n            >\n              {subtitle}\n            </Footnote>\n            {badgeAfterSubtitle && (\n              <span className={styles['SimpleCell__badge']}>{badgeAfterSubtitle}</span>\n            )}\n          </div>\n        )}\n        {extraSubtitle && (\n          <Footnote\n            normalize={false}\n            className={classNames(styles['SimpleCell__text'], styles['SimpleCell__extraSubtitle'])}\n          >\n            {extraSubtitle}\n          </Footnote>\n        )}\n      </div>\n      {hasReactNode(indicator) && (\n        <Headline Component=\"span\" weight=\"3\" className={styles['SimpleCell__indicator']}>\n          {indicator}\n        </Headline>\n      )}\n      {hasAfter && (\n        <div className={classNames(styles['SimpleCell__after'], 'vkuiInternalSimpleCell__after')}>\n          {after}\n          {expandable && platform === Platform.IOS && <Icon24Chevron />}\n        </div>\n      )}\n    </Tappable>\n  );\n};\n"],"names":["SimpleCell","platformClassNames","ios","classNames","android","vkcom","sizeYClassNames","none","SizeType","COMPACT","REGULAR","badgeBeforeTitle","badgeAfterTitle","badgeBeforeSubtitle","badgeAfterSubtitle","before","indicator","children","after","expandable","multiline","subhead","subtitle","extraSubtitle","className","restProps","platform","usePlatform","hasAfter","hasReactNode","Platform","IOS","useAdaptivity","sizeY","Tappable","hasOwnProperty","div","Subhead","Component","span","Headline","weight","Footnote","normalize","Icon24Chevron"],"mappings":";;;;+BAyFaA;;;eAAAA;;;;;;;;+DAzFU;qBACO;oBACW;6BACX;2BACF;0BACH;wBACA;wBAEe;wBACf;wBACA;uBACD;AAGxB,IAAMC,qBAAqB;IACzBC,KAAKC,IAAAA,yCAAsC;IAC3CC,OAAO;IACPC,KAAK;AACP;IAEwB;AAAxB,IAAMC,mBAAkB;IACtBC,MAAMJ,IAAAA,gDAA6C;GACnD,mBAFsB,MAErBK,qBAASC,SAAUN,IAAAA,mDAElB,8DAJoB,MAMrBK,qBAASE,2CANY;AAqEjB,IAAMV,aAAa;QACxBW,0BAAAA,kBACAC,yBAAAA,iBACAC,6BAAAA,qBACAC,4BAAAA,oBACAC,gBAAAA,QACAC,mBAAAA,WACAC,kBAAAA,UACAC,eAAAA,OACAC,oBAAAA,YACAC,mBAAAA,WACAC,iBAAAA,SACAC,kBAAAA,UACAC,uBAAAA,eACAC,mBAAAA,WACGC;QAdHd;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA;IACjB,IAAMC,WAAWC,IAAAA,oBAAaX,UAAWC,cAAcO,aAAaI,mBAASC;IAC7E,IAA2BC,kBAAAA,IAAAA,wDAAAA,gBAAnBC,OAAAA,0CAAQ;IAEhB,qBACE,qBAACC,gEACKT;QACJD,WAAWrB,IAAAA,oCAET,0BACAF,mBAAmBkC,eAAeT,YAC9BzB,kBAAkB,CAACyB,SAAS,GAC5BzB,mBAAmBG,SACvBE,eAAe,CAAC2B,MAAM,EACtBb,qCACAI;QAGDT,sBACD,qBAACqB;QAAIZ,WAAWrB,IAAAA,0CAAuC;OACpDkB,yBACC,qBAACgB;QACCC,WAAU;QACVd,WAAWrB,IAAAA;OAEVkB,wBAGL,qBAACe;QAAIZ,SAAS;OACXb,kCACC,qBAAC4B;QAAKf,SAAS;OAAgCb,iCAEjD,qBAAC6B;QAASF,WAAU;QAAOd,SAAS;QAAkCiB,QAAO;OAC1ExB,WAEFY,IAAAA,oBAAajB,kCACZ,qBAAC2B;QAAKf,SAAS;OAAgCZ,mBAGlDU,0BACC,qBAACc;QAAIZ,SAAS;OACXX,qCACC,qBAAC0B;QAAKf,SAAS;OAAgCX,oCAEjD,qBAAC6B;QACCC,WAAW;QACXnB,WAAWrB,IAAAA;OAEVmB,WAEFR,oCACC,qBAACyB;QAAKf,SAAS;OAAgCV,sBAIpDS,+BACC,qBAACmB;QACCC,WAAW;QACXnB,WAAWrB,IAAAA;OAEVoB,iBAINM,IAAAA,oBAAab,4BACZ,qBAACwB;QAASF,WAAU;QAAOG,QAAO;QAAIjB,SAAS;OAC5CR,YAGJY,0BACC,qBAACQ;QAAIZ,WAAWrB,IAAAA,2CAAwC;OACrDe,OACAC,cAAcO,aAAaI,mBAASC,qBAAO,qBAACa;AAKvD"}
+{"version":3,"sources":["../../../../src/components/SimpleCell/SimpleCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasComponent } from '../../types';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Chevron } from './Chevron/Chevron';\nimport styles from './SimpleCell.module.css';\n\nconst warn = warnOnce('SimpleCell');\n\nconst platformClassNames = {\n  ios: classNames(styles['SimpleCell--ios'], 'vkuiInternalSimpleCell--ios'),\n  android: styles['SimpleCell--android'],\n  vkcom: styles['SimpleCell--vkcom'],\n};\n\nconst sizeYClassNames = {\n  none: classNames(styles['SimpleCell--sizeY-none'], 'vkuiInternalSimpleCell--sizeY-none'),\n  [SizeType.COMPACT]: classNames(\n    styles['SimpleCell--sizeY-compact'],\n    'vkuiInternalSimpleCell--sizeY-compact',\n  ),\n  [SizeType.REGULAR]: styles['SimpleCell--sizeY-regular'],\n};\n\nexport interface SimpleCellOwnProps extends HasComponent {\n  /**\n   * Иконка 28 или `<Avatar size={28|32|40|48|72} />`\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка 12 или `<Badge />`. Добавится слева от текста `children`.\n   */\n  badgeBeforeTitle?: React.ReactNode;\n  /**\n   * Иконка 12 или `<Badge />`. Добавится справа от текста `children`.\n   */\n  badgeAfterTitle?: React.ReactNode;\n  /**\n   * Иконка 12. Добавится слева от текста `subtitle`.\n   */\n  badgeBeforeSubtitle?: React.ReactNode;\n  /**\n   * Иконка 12. Добавится справа от текста `subtitle`.\n   */\n  badgeAfterSubtitle?: React.ReactNode;\n  /**\n   * Контейнер для текста справа от `children`.\n   */\n  indicator?: React.ReactNode;\n  /**\n   * Дополнительная строка текста над `children`.\n   */\n  subhead?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children`.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children` и `subtitle`.\n   */\n  extraSubtitle?: React.ReactNode;\n  /**\n   * Иконка 24|28 или `<Switch />`. Располагается справа от `indicator`.\n   */\n  after?: React.ReactNode;\n  /**\n   * Убирает анимацию нажатия\n   */\n  disabled?: boolean;\n  /**\n   * В iOS добавляет chevron справа. Передавать `true`, если предполагается переход при клике по ячейке.\n   */\n  expandable?: boolean | 'auto' | 'always';\n  /**\n   * Размер chevron\n   */\n  chevronSize?: 's' | 'm';\n  /**\n   * Включает многострочный режим для отображения текста\n   */\n  multiline?: boolean;\n}\n\nexport interface SimpleCellProps extends SimpleCellOwnProps, TappableProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SimpleCell\n */\nexport const SimpleCell = ({\n  badgeBeforeTitle,\n  badgeAfterTitle,\n  badgeBeforeSubtitle,\n  badgeAfterSubtitle,\n  before,\n  indicator,\n  children,\n  after,\n  expandable,\n  multiline,\n  subhead,\n  subtitle,\n  extraSubtitle,\n  className,\n  chevronSize = 'm',\n  ...restProps\n}: SimpleCellProps) => {\n  const platform = usePlatform();\n\n  if (process.env.NODE_ENV === 'development' && expandable === true) {\n    // TODO [>=6]: Обновить типизацию для expandable свойства\n    warn(\n      'Значение true свойства expandable устарело и будет удалено в v6. Используйте expandable=\"auto\"',\n    );\n  }\n\n  const hasChevron =\n    expandable === 'always' ||\n    ((expandable === true || expandable === 'auto') && platform === Platform.IOS);\n\n  const hasAfter = hasReactNode(after) || hasChevron;\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNames(\n        styles['SimpleCell'],\n        'vkuiInternalSimpleCell',\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        sizeYClassNames[sizeY],\n        multiline && styles['SimpleCell--mult'],\n        className,\n      )}\n    >\n      {before}\n      <div className={classNames(styles['SimpleCell__main'], 'vkuiInternalSimpleCell__main')}>\n        {subhead && (\n          <Subhead\n            Component=\"span\"\n            className={classNames(styles['SimpleCell__text'], styles['SimpleCell__subhead'])}\n          >\n            {subhead}\n          </Subhead>\n        )}\n        <div className={styles['SimpleCell__content']}>\n          {badgeBeforeTitle && (\n            <span className={styles['SimpleCell__badge']}>{badgeBeforeTitle}</span>\n          )}\n          <Headline Component=\"span\" className={styles['SimpleCell__children']} weight=\"3\">\n            {children}\n          </Headline>\n          {hasReactNode(badgeAfterTitle) && (\n            <span className={styles['SimpleCell__badge']}>{badgeAfterTitle}</span>\n          )}\n        </div>\n        {subtitle && (\n          <div className={styles['SimpleCell__content']}>\n            {badgeBeforeSubtitle && (\n              <span className={styles['SimpleCell__badge']}>{badgeBeforeSubtitle}</span>\n            )}\n            <Footnote\n              normalize={false}\n              className={classNames(styles['SimpleCell__text'], styles['SimpleCell__subtitle'])}\n            >\n              {subtitle}\n            </Footnote>\n            {badgeAfterSubtitle && (\n              <span className={styles['SimpleCell__badge']}>{badgeAfterSubtitle}</span>\n            )}\n          </div>\n        )}\n        {extraSubtitle && (\n          <Footnote\n            normalize={false}\n            className={classNames(styles['SimpleCell__text'], styles['SimpleCell__extraSubtitle'])}\n          >\n            {extraSubtitle}\n          </Footnote>\n        )}\n      </div>\n      {hasReactNode(indicator) && (\n        <Headline Component=\"span\" weight=\"3\" className={styles['SimpleCell__indicator']}>\n          {indicator}\n        </Headline>\n      )}\n      {hasAfter && (\n        <div className={classNames(styles['SimpleCell__after'], 'vkuiInternalSimpleCell__after')}>\n          {after}\n          {hasChevron && (\n            <Chevron size={chevronSize} className={styles['SimpleCell__chevronIcon']} />\n          )}\n        </div>\n      )}\n    </Tappable>\n  );\n};\n"],"names":["SimpleCell","warn","warnOnce","platformClassNames","ios","classNames","android","vkcom","sizeYClassNames","none","SizeType","COMPACT","REGULAR","badgeBeforeTitle","badgeAfterTitle","badgeBeforeSubtitle","badgeAfterSubtitle","before","indicator","children","after","expandable","multiline","subhead","subtitle","extraSubtitle","className","chevronSize","restProps","platform","usePlatform","process","env","NODE_ENV","hasChevron","Platform","IOS","hasAfter","hasReactNode","useAdaptivity","sizeY","Tappable","hasOwnProperty","div","Subhead","Component","span","Headline","weight","Footnote","normalize","Chevron","size"],"mappings":";;;;+BAgGaA;;;eAAAA;;;;;;;;+DAhGU;oBACkB;6BACX;2BACF;0BACH;wBACA;wBACA;wBAEe;wBACf;wBACA;uBACD;uBACA;AAGxB,IAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAEtB,IAAMC,qBAAqB;IACzBC,KAAKC,IAAAA,gBAAU,yBAA4B;IAC3CC,OAAO;IACPC,KAAK;AACP;IAEwB;AAAxB,IAAMC,mBAAkB;IACtBC,MAAMJ,IAAAA,gBAAU,gCAAmC;GACnD,mBAFsB,MAErBK,oBAAQ,CAACC,OAAO,EAAGN,IAAAA,gBAAU,mCAE5B,8DAJoB,MAMrBK,oBAAQ,CAACE,OAAO,oCANK;AAyEjB,IAAMZ,aAAa;QACxBa,0BAAAA,kBACAC,yBAAAA,iBACAC,6BAAAA,qBACAC,4BAAAA,oBACAC,gBAAAA,QACAC,mBAAAA,WACAC,kBAAAA,UACAC,eAAAA,OACAC,oBAAAA,YACAC,mBAAAA,WACAC,iBAAAA,SACAC,kBAAAA,UACAC,uBAAAA,eACAC,mBAAAA,uCACAC,aAAAA,8CAAc,0BACXC;QAfHf;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAE5B,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBAAiBZ,eAAe,MAAM;QACjE,yDAAyD;QACzDpB,KACE;IAEJ;IAEA,IAAMiC,aACJb,eAAe,YACd,AAACA,CAAAA,eAAe,QAAQA,eAAe,MAAK,KAAMQ,aAAaM,kBAAQ,CAACC,GAAG;IAE9E,IAAMC,WAAWC,IAAAA,kBAAY,EAAClB,UAAUc;IACxC,IAA2BK,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAEhB,qBACE,qBAACC,kBAAQ,8CACHb;QACJF,WAAWrB,IAAAA,gBAAU,oBAEnB,0BACAF,mBAAmBuC,cAAc,CAACb,YAC9B1B,kBAAkB,CAAC0B,SAAS,GAC5B1B,mBAAmBG,OAAO,EAC9BE,eAAe,CAACgC,MAAM,EACtBlB,qCACAI;QAGDT,sBACD,qBAAC0B;QAAIjB,WAAWrB,IAAAA,gBAAU,0BAA6B;OACpDkB,yBACC,qBAACqB,gBAAO;QACNC,WAAU;QACVnB,WAAWrB,IAAAA,gBAAU;OAEpBkB,wBAGL,qBAACoB;QAAIjB,SAAS;OACXb,kCACC,qBAACiC;QAAKpB,SAAS;OAAgCb,iCAEjD,qBAACkC,kBAAQ;QAACF,WAAU;QAAOnB,SAAS;QAAkCsB,QAAO;OAC1E7B,WAEFmB,IAAAA,kBAAY,EAACxB,kCACZ,qBAACgC;QAAKpB,SAAS;OAAgCZ,mBAGlDU,0BACC,qBAACmB;QAAIjB,SAAS;OACXX,qCACC,qBAAC+B;QAAKpB,SAAS;OAAgCX,oCAEjD,qBAACkC,kBAAQ;QACPC,WAAW;QACXxB,WAAWrB,IAAAA,gBAAU;OAEpBmB,WAEFR,oCACC,qBAAC8B;QAAKpB,SAAS;OAAgCV,sBAIpDS,+BACC,qBAACwB,kBAAQ;QACPC,WAAW;QACXxB,WAAWrB,IAAAA,gBAAU;OAEpBoB,iBAINa,IAAAA,kBAAY,EAACpB,4BACZ,qBAAC6B,kBAAQ;QAACF,WAAU;QAAOG,QAAO;QAAItB,SAAS;OAC5CR,YAGJmB,0BACC,qBAACM;QAAIjB,WAAWrB,IAAAA,gBAAU,2BAA8B;OACrDe,OACAc,4BACC,qBAACiB,gBAAO;QAACC,MAAMzB;QAAaD,SAAS;;AAMjD"}

package/dist/cjs/components/Slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasRootRef } from '../../types';\nimport { Touch, type TouchEvent, type TouchEventHandler } from '../Touch/Touch';\nimport { SliderThumb } from './SliderThumb/SliderThumb';\nimport {\n  extractSliderAriaAttributesFromRestProps,\n  getDraggingTypeByTargetDataset,\n  isMultipleValues,\n  offsetToValue,\n  snapDirection,\n  toPercent,\n  updateInternalStateValue,\n  updateInternalStateValueByNativeChange,\n} from './helpers';\nimport type { InternalGestureRef, InternalValueState } from './types';\nimport styles from './Slider.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Slider--sizeY-none'],\n  [SizeType.COMPACT]: styles['Slider--sizeY-compact'],\n};\n\nexport interface SliderBaseProps\n  extends HasRootRef<HTMLDivElement>,\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange'> {\n  min?: number;\n  max?: number;\n  step?: number;\n  disabled?: boolean;\n  /**\n   * Тоже самое, что и `aria-label`, но на вход можно получать индекс текущего ползунка и в зависимости от этого выдавать разный текст.\n   *\n   * > Перебивает `aria-label`.\n   */\n  getAriaLabel?(index: number): string;\n  /**\n   * В отличие от `aria-valuetext`, позволяет более гибко форматировать текст в зависимости от значения ползунка.\n   *\n   * Полезно при использовании компонента как неконтролируемого.\n   *\n   * > Перебивает `aria-valuetext`.\n   */\n  getAriaValueText?(value: number, index: number): string;\n}\n\nexport interface SliderProps extends SliderBaseProps {\n  multiple?: false;\n  value?: number;\n  defaultValue?: number;\n  /**\n   * TODO [>=6]: Расширить тип `event` с `React.ChangeEvent`.\n   */\n  onChange?(value: number, event: TouchEvent): void;\n}\n\nexport interface SliderMultipleProps extends SliderBaseProps {\n  multiple: true;\n  value?: [number, number];\n  defaultValue?: [number, number];\n  /**\n   * TODO [>=6]: Расширить тип `event` с `React.ChangeEvent`.\n   */\n  onChange?(value: [number, number], event: TouchEvent): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Slider\n */\nexport const Slider = ({\n  // TODO [>=6]: Выставить 1 как значение по умолчанию, чтобы было как в браузерном <input type=\"range\" />\n  step,\n  min = 0,\n  max = 100,\n  value: valueProp,\n  multiple: multipleProp,\n  defaultValue = multipleProp ? [min, max] : min,\n  disabled,\n  className,\n  getRootRef,\n  getAriaLabel,\n  getAriaValueText,\n  onChange,\n  ...restProps\n}: SliderProps | SliderMultipleProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const isControlled = valueProp !== undefined;\n  const [localValue, setValue] = React.useState(defaultValue);\n\n  const value = React.useMemo<InternalValueState>(() => {\n    const resolvedValue = isControlled ? valueProp : localValue;\n    return Array.isArray(resolvedValue)\n      ? [clamp(resolvedValue[0], min, max), clamp(resolvedValue[1], min, max)]\n      : [clamp(resolvedValue, min, max), null];\n  }, [isControlled, valueProp, localValue, min, max]);\n\n  const [startValue, endValue] = value;\n  const multiple = multipleProp && endValue !== null;\n  const startValueInPercent = toPercent(startValue, min, max);\n  const endReversedValueInPercent = multiple ? toPercent(endValue, min, max) : 0;\n\n  const gesture = React.useRef<InternalGestureRef>({\n    dragging: null,\n    startX: 0,\n    containerWidth: 0,\n  }).current;\n  const thumbsContainerRef = useExternRef(getRootRef);\n  const thumbStartInputRef = React.useRef<HTMLInputElement>(null);\n  const thumbEndInputRef = React.useRef<HTMLInputElement>(null);\n\n  const { ariaLabel, ariaValueText, ariaLabelledBy, ...restPropsWithoutAriaAttributes } =\n    extractSliderAriaAttributesFromRestProps(restProps);\n\n  const changeValue = (nextValue: InternalValueState, event: TouchEvent) => {\n    if (disabled || (value[0] === nextValue[0] && value[1] === nextValue[1])) {\n      return;\n    }\n\n    if (multipleProp) {\n      if (isMultipleValues(nextValue)) {\n        !isControlled && setValue(nextValue);\n        onChange && onChange(nextValue, event);\n      }\n    } else {\n      !isControlled && setValue(nextValue[0]);\n      onChange && onChange(nextValue[0], event);\n    }\n  };\n\n  const handlePointerStart: TouchEventHandler = (event: TouchEvent) => {\n    if (!thumbsContainerRef.current) {\n      return;\n    }\n\n    const { left: nextContainerX, width: nextContainerWidth } =\n      thumbsContainerRef.current.getBoundingClientRect();\n\n    // @ts-expect-error: TS2345 в VKUITouchEvent плохо описаны типы. `target` это просто `EventTarget`.\n    const foundDraggingType = getDraggingTypeByTargetDataset(event.originalEvent.target);\n\n    const nextStartX = event.startX - nextContainerX;\n    const nextValue = offsetToValue(nextStartX, nextContainerWidth, min, max, step);\n    const nextDragging = snapDirection(value, nextValue, foundDraggingType);\n\n    gesture.dragging = nextDragging;\n    gesture.containerWidth = nextContainerWidth;\n    gesture.startX = nextStartX;\n\n    const updatedInternalStateValue = updateInternalStateValue(\n      value,\n      nextValue,\n      min,\n      max,\n      nextDragging,\n    );\n\n    const [nextStartValue, nextEndValue] = updatedInternalStateValue;\n    if (\n      thumbStartInputRef.current &&\n      (foundDraggingType === 'start' ||\n        (nextStartValue !== startValue && nextEndValue === endValue))\n    ) {\n      thumbStartInputRef.current.focus();\n      event.originalEvent.preventDefault();\n    } else if (\n      thumbEndInputRef.current &&\n      (foundDraggingType === 'end' || (nextEndValue !== endValue && nextStartValue === startValue))\n    ) {\n      thumbEndInputRef.current.focus();\n      event.originalEvent.preventDefault();\n    }\n\n    changeValue(updatedInternalStateValue, event);\n\n    event.originalEvent.stopPropagation();\n  };\n\n  const handlePointerMove: TouchEventHandler = (event: TouchEvent) => {\n    const { startX, containerWidth, dragging } = gesture;\n\n    const { shiftX = 0 } = event;\n    const nextStartX = startX + shiftX;\n    const nextValue = offsetToValue(nextStartX, containerWidth, min, max, step);\n\n    changeValue(updateInternalStateValue(value, nextValue, min, max, dragging), event);\n\n    event.originalEvent.stopPropagation();\n    event.originalEvent.preventDefault();\n  };\n\n  const handlePointerEnd: TouchEventHandler = (event) => {\n    gesture.dragging = null;\n    event.originalEvent.stopPropagation();\n  };\n\n  const handleChangeByNativeInput = (event: React.ChangeEvent<HTMLInputElement>) => {\n    changeValue(\n      updateInternalStateValueByNativeChange(\n        value,\n        Number(event.target.value),\n        getDraggingTypeByTargetDataset(event.target),\n      ),\n      // @ts-expect-error: TS2345 сейчас тип расширить не получится (см. TODO в описании `onChange`)\n      event,\n    );\n  };\n\n  return (\n    <Touch\n      data-value={multiple ? `${startValue},${endValue}` : startValue}\n      {...restPropsWithoutAriaAttributes}\n      className={classNames(\n        styles['Slider'],\n        disabled && styles['Slider--disabled'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n      onStart={disabled ? undefined : handlePointerStart}\n      onMove={disabled ? undefined : handlePointerMove}\n      onEnd={disabled ? undefined : handlePointerEnd}\n    >\n      <div className={styles['Slider__track']} />\n      <div\n        className={styles['Slider__track-fill']}\n        style={\n          multiple\n            ? { left: `${startValueInPercent}%`, right: `${100 - endReversedValueInPercent}%` }\n            : { width: `${startValueInPercent}%` }\n        }\n      />\n      <div ref={thumbsContainerRef} className={styles['Slider__thumbs']}>\n        <SliderThumb\n          data-type=\"start\"\n          className={styles['Slider__thumb']}\n          style={{\n            left: `${startValueInPercent}%`,\n            // Меняем местами порядок слоёв, иначе, при достижении `start` и `end` 100%, `end` будет перекрывать `start`.\n            zIndex: multiple && startValueInPercent >= 50 ? 2 : undefined,\n          }}\n          inputProps={{\n            'data-type': 'start',\n            'ref': thumbStartInputRef,\n            'step': step,\n            'min': min,\n            'value': startValue,\n            'max': multiple ? endValue : max,\n            'disabled': disabled,\n            'aria-label': getAriaLabel ? getAriaLabel(0) : ariaLabel,\n            'aria-valuetext': getAriaValueText ? getAriaValueText(startValue, 0) : ariaValueText,\n            'aria-labelledby': ariaLabelledBy,\n            'onChange': handleChangeByNativeInput,\n          }}\n        />\n        {multiple && (\n          <SliderThumb\n            data-type=\"end\"\n            className={styles['Slider__thumb']}\n            style={{ left: `${endReversedValueInPercent}%` }}\n            inputProps={{\n              'data-type': 'end',\n              'ref': thumbEndInputRef,\n              'step': step,\n              'min': startValue,\n              'value': endValue,\n              'max': max,\n              'disabled': disabled,\n              'aria-label': getAriaLabel ? getAriaLabel(1) : ariaLabel,\n              'aria-valuetext': getAriaValueText ? getAriaValueText(endValue, 1) : ariaValueText,\n              'aria-labelledby': ariaLabelledBy,\n              'onChange': handleChangeByNativeInput,\n            }}\n          />\n        )}\n      </div>\n    </Touch>\n  );\n};\n"],"names":["Slider","sizeYClassNames","none","SizeType","COMPACT","step","min","max","value","valueProp","multiple","multipleProp","defaultValue","disabled","className","getRootRef","getAriaLabel","getAriaValueText","onChange","restProps","useAdaptivity","sizeY","isControlled","undefined","React","useState","localValue","setValue","useMemo","resolvedValue","Array","isArray","clamp","startValue","endValue","startValueInPercent","toPercent","endReversedValueInPercent","gesture","useRef","dragging","startX","containerWidth","current","thumbsContainerRef","useExternRef","thumbStartInputRef","thumbEndInputRef","extractSliderAriaAttributesFromRestProps","ariaLabel","ariaValueText","ariaLabelledBy","restPropsWithoutAriaAttributes","changeValue","nextValue","event","isMultipleValues","handlePointerStart","getBoundingClientRect","left","nextContainerX","width","nextContainerWidth","foundDraggingType","getDraggingTypeByTargetDataset","originalEvent","target","nextStartX","offsetToValue","nextDragging","snapDirection","updatedInternalStateValue","updateInternalStateValue","nextStartValue","nextEndValue","focus","preventDefault","stopPropagation","handlePointerMove","shiftX","handlePointerEnd","handleChangeByNativeInput","updateInternalStateValueByNativeChange","Number","Touch","data-value","classNames","REGULAR","onStart","onMove","onEnd","div","style","right","ref","SliderThumb","data-type","zIndex","inputProps"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasRootRef } from '../../types';\nimport { Touch, type TouchEvent, type TouchEventHandler } from '../Touch/Touch';\nimport { SliderThumb } from './SliderThumb/SliderThumb';\nimport {\n  extractSliderAriaAttributesFromRestProps,\n  getDraggingTypeByTargetDataset,\n  isMultipleValues,\n  offsetToValue,\n  snapDirection,\n  toPercent,\n  updateInternalStateValue,\n  updateInternalStateValueByNativeChange,\n} from './helpers';\nimport type { InternalGestureRef, InternalValueState } from './types';\nimport styles from './Slider.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Slider--sizeY-none'],\n  [SizeType.COMPACT]: styles['Slider--sizeY-compact'],\n};\n\nexport interface SliderBaseProps\n  extends HasRootRef<HTMLDivElement>,\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange'> {\n  min?: number;\n  max?: number;\n  step?: number;\n  disabled?: boolean;\n  /**\n   * Тоже самое, что и `aria-label`, но на вход можно получать индекс текущего ползунка и в зависимости от этого выдавать разный текст.\n   *\n   * > Перебивает `aria-label`.\n   */\n  getAriaLabel?(index: number): string;\n  /**\n   * В отличие от `aria-valuetext`, позволяет более гибко форматировать текст в зависимости от значения ползунка.\n   *\n   * Полезно при использовании компонента как неконтролируемого.\n   *\n   * > Перебивает `aria-valuetext`.\n   */\n  getAriaValueText?(value: number, index: number): string;\n}\n\nexport interface SliderProps extends SliderBaseProps {\n  multiple?: false;\n  value?: number;\n  defaultValue?: number;\n  /**\n   * TODO [>=6]: Расширить тип `event` с `React.ChangeEvent`.\n   */\n  onChange?(value: number, event: TouchEvent): void;\n}\n\nexport interface SliderMultipleProps extends SliderBaseProps {\n  multiple: true;\n  value?: [number, number];\n  defaultValue?: [number, number];\n  /**\n   * TODO [>=6]: Расширить тип `event` с `React.ChangeEvent`.\n   */\n  onChange?(value: [number, number], event: TouchEvent): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Slider\n */\nexport const Slider = ({\n  // TODO [>=6]: Выставить 1 как значение по умолчанию, чтобы было как в браузерном <input type=\"range\" />\n  step,\n  min = 0,\n  max = 100,\n  value: valueProp,\n  multiple: multipleProp,\n  defaultValue = multipleProp ? [min, max] : min,\n  disabled,\n  className,\n  getRootRef,\n  getAriaLabel,\n  getAriaValueText,\n  onChange,\n  ...restProps\n}: SliderProps | SliderMultipleProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const isControlled = valueProp !== undefined;\n  const [localValue, setValue] = React.useState(defaultValue);\n\n  const value = React.useMemo<InternalValueState>(() => {\n    const resolvedValue = isControlled ? valueProp : localValue;\n    return Array.isArray(resolvedValue)\n      ? [clamp(resolvedValue[0], min, max), clamp(resolvedValue[1], min, max)]\n      : [clamp(resolvedValue, min, max), null];\n  }, [isControlled, valueProp, localValue, min, max]);\n\n  const [startValue, endValue] = value;\n  const multiple = multipleProp && endValue !== null;\n  const startValueInPercent = toPercent(startValue, min, max);\n  const endReversedValueInPercent = multiple ? toPercent(endValue, min, max) : 0;\n\n  const gesture = React.useRef<InternalGestureRef>({\n    dragging: null,\n    startX: 0,\n    containerWidth: 0,\n  }).current;\n  const thumbsContainerRef = useExternRef(getRootRef);\n  const thumbStartInputRef = React.useRef<HTMLInputElement>(null);\n  const thumbEndInputRef = React.useRef<HTMLInputElement>(null);\n\n  const { ariaLabel, ariaValueText, ariaLabelledBy, ...restPropsWithoutAriaAttributes } =\n    extractSliderAriaAttributesFromRestProps(restProps);\n\n  const changeValue = (nextValue: InternalValueState, event: TouchEvent) => {\n    if (disabled || (value[0] === nextValue[0] && value[1] === nextValue[1])) {\n      return;\n    }\n\n    if (multipleProp) {\n      if (isMultipleValues(nextValue)) {\n        !isControlled && setValue(nextValue);\n        onChange && onChange(nextValue, event);\n      }\n    } else {\n      !isControlled && setValue(nextValue[0]);\n      onChange && onChange(nextValue[0], event);\n    }\n  };\n\n  const handlePointerStart: TouchEventHandler = (event: TouchEvent) => {\n    if (!thumbsContainerRef.current) {\n      return;\n    }\n\n    const { left: nextContainerX, width: nextContainerWidth } =\n      thumbsContainerRef.current.getBoundingClientRect();\n\n    // @ts-expect-error: TS2345 в VKUITouchEvent плохо описаны типы. `target` это просто `EventTarget`.\n    const foundDraggingType = getDraggingTypeByTargetDataset(event.originalEvent.target);\n\n    const nextStartX = event.startX - nextContainerX;\n    const nextValue = offsetToValue(nextStartX, nextContainerWidth, min, max, step);\n    const nextDragging = snapDirection(value, nextValue, foundDraggingType);\n\n    gesture.dragging = nextDragging;\n    gesture.containerWidth = nextContainerWidth;\n    gesture.startX = nextStartX;\n\n    const updatedInternalStateValue = updateInternalStateValue(\n      value,\n      nextValue,\n      min,\n      max,\n      nextDragging,\n    );\n\n    const [nextStartValue, nextEndValue] = updatedInternalStateValue;\n    if (\n      thumbStartInputRef.current &&\n      (foundDraggingType === 'start' ||\n        (nextStartValue !== startValue && nextEndValue === endValue))\n    ) {\n      thumbStartInputRef.current.focus();\n      event.originalEvent.preventDefault();\n    } else if (\n      thumbEndInputRef.current &&\n      (foundDraggingType === 'end' || (nextEndValue !== endValue && nextStartValue === startValue))\n    ) {\n      thumbEndInputRef.current.focus();\n      event.originalEvent.preventDefault();\n    }\n\n    changeValue(updatedInternalStateValue, event);\n\n    event.originalEvent.stopPropagation();\n  };\n\n  const handlePointerMove: TouchEventHandler = (event: TouchEvent) => {\n    const { startX, containerWidth, dragging } = gesture;\n\n    const { shiftX = 0 } = event;\n    const nextStartX = startX + shiftX;\n    const nextValue = offsetToValue(nextStartX, containerWidth, min, max, step);\n\n    changeValue(updateInternalStateValue(value, nextValue, min, max, dragging), event);\n\n    event.originalEvent.stopPropagation();\n    event.originalEvent.preventDefault();\n  };\n\n  const handlePointerEnd: TouchEventHandler = (event) => {\n    gesture.dragging = null;\n    event.originalEvent.stopPropagation();\n  };\n\n  const handleChangeByNativeInput = (event: React.ChangeEvent<HTMLInputElement>) => {\n    changeValue(\n      updateInternalStateValueByNativeChange(\n        value,\n        Number(event.target.value),\n        getDraggingTypeByTargetDataset(event.target),\n      ),\n      // @ts-expect-error: TS2345 сейчас тип расширить не получится (см. TODO в описании `onChange`)\n      event,\n    );\n  };\n\n  return (\n    <Touch\n      data-value={multiple ? `${startValue},${endValue}` : startValue}\n      {...restPropsWithoutAriaAttributes}\n      className={classNames(\n        styles['Slider'],\n        disabled && styles['Slider--disabled'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n      onStart={disabled ? undefined : handlePointerStart}\n      onMove={disabled ? undefined : handlePointerMove}\n      onEnd={disabled ? undefined : handlePointerEnd}\n    >\n      <div className={styles['Slider__track']} />\n      <div\n        className={styles['Slider__track-fill']}\n        style={\n          multiple\n            ? { left: `${startValueInPercent}%`, right: `${100 - endReversedValueInPercent}%` }\n            : { width: `${startValueInPercent}%` }\n        }\n      />\n      <div ref={thumbsContainerRef} className={styles['Slider__thumbs']}>\n        <SliderThumb\n          data-type=\"start\"\n          className={styles['Slider__thumb']}\n          style={{\n            left: `${startValueInPercent}%`,\n            // Меняем местами порядок слоёв, иначе, при достижении `start` и `end` 100%, `end` будет перекрывать `start`.\n            zIndex: multiple && startValueInPercent >= 50 ? 2 : undefined,\n          }}\n          inputProps={{\n            'data-type': 'start',\n            'ref': thumbStartInputRef,\n            'step': step,\n            'min': min,\n            'value': startValue,\n            'max': multiple ? endValue : max,\n            'disabled': disabled,\n            'aria-label': getAriaLabel ? getAriaLabel(0) : ariaLabel,\n            'aria-valuetext': getAriaValueText ? getAriaValueText(startValue, 0) : ariaValueText,\n            'aria-labelledby': ariaLabelledBy,\n            'onChange': handleChangeByNativeInput,\n          }}\n        />\n        {multiple && (\n          <SliderThumb\n            data-type=\"end\"\n            className={styles['Slider__thumb']}\n            style={{ left: `${endReversedValueInPercent}%` }}\n            inputProps={{\n              'data-type': 'end',\n              'ref': thumbEndInputRef,\n              'step': step,\n              'min': startValue,\n              'value': endValue,\n              'max': max,\n              'disabled': disabled,\n              'aria-label': getAriaLabel ? getAriaLabel(1) : ariaLabel,\n              'aria-valuetext': getAriaValueText ? getAriaValueText(endValue, 1) : ariaValueText,\n              'aria-labelledby': ariaLabelledBy,\n              'onChange': handleChangeByNativeInput,\n            }}\n          />\n        )}\n      </div>\n    </Touch>\n  );\n};\n"],"names":["Slider","sizeYClassNames","none","SizeType","COMPACT","step","min","max","value","valueProp","multiple","multipleProp","defaultValue","disabled","className","getRootRef","getAriaLabel","getAriaValueText","onChange","restProps","useAdaptivity","sizeY","isControlled","undefined","React","useState","localValue","setValue","useMemo","resolvedValue","Array","isArray","clamp","startValue","endValue","startValueInPercent","toPercent","endReversedValueInPercent","gesture","useRef","dragging","startX","containerWidth","current","thumbsContainerRef","useExternRef","thumbStartInputRef","thumbEndInputRef","extractSliderAriaAttributesFromRestProps","ariaLabel","ariaValueText","ariaLabelledBy","restPropsWithoutAriaAttributes","changeValue","nextValue","event","isMultipleValues","handlePointerStart","getBoundingClientRect","left","nextContainerX","width","nextContainerWidth","foundDraggingType","getDraggingTypeByTargetDataset","originalEvent","target","nextStartX","offsetToValue","nextDragging","snapDirection","updatedInternalStateValue","updateInternalStateValue","nextStartValue","nextEndValue","focus","preventDefault","stopPropagation","handlePointerMove","shiftX","handlePointerEnd","handleChangeByNativeInput","updateInternalStateValueByNativeChange","Number","Touch","data-value","classNames","REGULAR","onStart","onMove","onEnd","div","style","right","ref","SliderThumb","data-type","zIndex","inputProps"],"mappings":"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"}