@vkontakte/vkui 5.0.2 → 5.1.0

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

@@ -1 +1 @@
-{"version":3,"file":"Search.js","names":["React","classNamesString","usePlatform","Icon16SearchOutline","Icon16Clear","Icon24Cancel","Platform","Touch","noop","Title","Headline","useExternRef","useEnsuredControl","useAdaptivity","getSizeYClassName","SearchPlaceholderTypography","children","restProps","platform","IOS","Search","before","className","defaultValue","placeholder","after","getRef","icon","onIconClick","style","autoComplete","inputProps","inputRef","useState","isFocused","setFocused","value","onChange","sizeY","onFocus","e","onBlur","onCancel","useCallback","nativeInputValueSetter","Object","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","originalEvent","onIconCancelClickStart","preventDefault","focus"],"sources":["../../../../src/components/Search/Search.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport {\n  Icon16SearchOutline,\n  Icon16Clear,\n  Icon24Cancel,\n} from \"@vkontakte/icons\";\nimport { Platform } from \"../../lib/platform\";\nimport { HasRef } from \"../../types\";\nimport { Touch, TouchEvent } from \"../Touch/Touch\";\nimport { VKUITouchEvent } from \"../../lib/touch\";\nimport { noop } from \"../../lib/utils\";\nimport { Title } from \"../Typography/Title/Title\";\nimport { Headline } from \"../Typography/Headline/Headline\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { useEnsuredControl } from \"../../hooks/useEnsuredControl\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport styles from \"./Search.module.css\";\n\nconst SearchPlaceholderTypography = ({\n  children,\n  ...restProps\n}: React.HTMLAttributes<HTMLElement>) => {\n  const platform = usePlatform();\n\n  switch (platform) {\n    case Platform.IOS:\n      return (\n        <Title {...restProps} level=\"3\" weight=\"3\">\n          {children}\n        </Title>\n      );\n    default:\n      return (\n        <Headline {...restProps} weight=\"3\">\n          {children}\n        </Headline>\n      );\n  }\n};\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}\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  ...inputProps\n}: SearchProps) => {\n  const inputRef = useExternRef(getRef);\n  const [isFocused, setFocused] = React.useState(false);\n  const [value, onChange] = useEnsuredControl(inputProps, { defaultValue });\n  const { sizeY } = useAdaptivity();\n  const platform = usePlatform();\n\n  const onFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocused(true);\n    inputProps.onFocus && inputProps.onFocus(e);\n  };\n\n  const onBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocused(false);\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={classNamesString(\n        styles[\"Search\"],\n        platform === Platform.IOS && styles[\"Search--ios\"],\n        getSizeYClassName(styles[\"Search\"], sizeY),\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__in\"]}>\n        <div className={styles[\"Search__width\"]} />\n        <label className={styles[\"Search__control\"]}>\n          <input\n            type=\"search\"\n            {...inputProps}\n            autoComplete={autoComplete}\n            ref={inputRef}\n            className={styles[\"Search__input\"]}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            onChange={onChange}\n            value={value}\n          />\n          {platform === Platform.IOS && after && (\n            <div className={styles[\"Search__after-width\"]}>{after}</div>\n          )}\n          <div className={styles[\"Search__placeholder\"]}>\n            <div className={styles[\"Search__placeholder-in\"]}>\n              {before}\n              <SearchPlaceholderTypography\n                className={styles[\"Search__placeholder-text\"]}\n              >\n                {placeholder}\n              </SearchPlaceholderTypography>\n            </div>\n            {isFocused && platform === Platform.IOS && after && (\n              <div className={styles[\"Search__after-width\"]}>{after}</div>\n            )}\n          </div>\n        </label>\n        <div className={styles[\"Search__after\"]} onClick={onCancel}>\n          <div className={styles[\"Search__icons\"]}>\n            {icon && (\n              <Touch\n                onStart={onIconClickStart}\n                className={styles[\"Search__icon\"]}\n              >\n                {icon}\n              </Touch>\n            )}\n            {!!value && (\n              <Touch\n                onStart={onIconCancelClickStart}\n                className={styles[\"Search__icon\"]}\n              >\n                {platform === Platform.IOS ? <Icon16Clear /> : <Icon24Cancel />}\n              </Touch>\n            )}\n          </div>\n          {platform === Platform.IOS && after && (\n            <div className={styles[\"Search__after-in\"]}>{after}</div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SACEC,mBAAmB,EACnBC,WAAW,EACXC,YAAY,QACP,kBAAkB;AACzB,SAASC,QAAQ,QAAQ,oBAAoB;AAE7C,SAASC,KAAK,QAAoB,gBAAgB;AAElD,SAASC,IAAI,QAAQ,iBAAiB;AACtC,SAASC,KAAK,QAAQ,2BAA2B;AACjD,SAASC,QAAQ,QAAQ,iCAAiC;AAC1D,SAASC,YAAY,QAAQ,0BAA0B;AACvD,SAASC,iBAAiB,QAAQ,+BAA+B;AACjE,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,iBAAiB,QAAQ,iCAAiC;AAAC;AAGpE,IAAMC,2BAA2B,GAAG,SAA9BA,2BAA2B,OAGQ;EAAA,IAFvCC,QAAQ,QAARA,QAAQ;IACLC,SAAS;EAEZ,IAAMC,QAAQ,GAAGhB,WAAW,EAAE;EAE9B,QAAQgB,QAAQ;IACd,KAAKZ,QAAQ,CAACa,GAAG;MACf,oBACE,oBAAC,KAAK,eAAKF,SAAS;QAAE,KAAK,EAAC,GAAG;QAAC,MAAM,EAAC;MAAG,IACvCD,QAAQ,CACH;IAEZ;MACE,oBACE,oBAAC,QAAQ,eAAKC,SAAS;QAAE,MAAM,EAAC;MAAG,IAChCD,QAAQ,CACA;EACX;AAER,CAAC;AAeD;AACA;AACA;AACA,OAAO,IAAMI,MAAM,GAAG,SAATA,MAAM,QAYA;EAAA,yBAXjBC,MAAM;IAANA,MAAM,0CAAG,oBAAC,mBAAmB,OAAG;IAChCC,SAAS,SAATA,SAAS;IAAA,2BACTC,YAAY;IAAZA,YAAY,mCAAG,EAAE;IAAA,0BACjBC,WAAW;IAAXA,WAAW,kCAAG,OAAO;IAAA,oBACrBC,KAAK;IAALA,KAAK,4BAAG,QAAQ;IAChBC,MAAM,SAANA,MAAM;IACNC,IAAI,SAAJA,IAAI;IAAA,0BACJC,WAAW;IAAXA,WAAW,kCAAGpB,IAAI;IAClBqB,KAAK,SAALA,KAAK;IAAA,2BACLC,YAAY;IAAZA,YAAY,mCAAG,KAAK;IACjBC,UAAU;EAEb,IAAMC,QAAQ,GAAGrB,YAAY,CAACe,MAAM,CAAC;EACrC,sBAAgC1B,KAAK,CAACiC,QAAQ,CAAC,KAAK,CAAC;IAAA;IAA9CC,SAAS;IAAEC,UAAU;EAC5B,yBAA0BvB,iBAAiB,CAACmB,UAAU,EAAE;MAAER,YAAY,EAAZA;IAAa,CAAC,CAAC;IAAA;IAAlEa,KAAK;IAAEC,QAAQ;EACtB,qBAAkBxB,aAAa,EAAE;IAAzByB,KAAK,kBAALA,KAAK;EACb,IAAMpB,QAAQ,GAAGhB,WAAW,EAAE;EAE9B,IAAMqC,OAAO,GAAG,SAAVA,OAAO,CAAIC,CAAqC,EAAK;IACzDL,UAAU,CAAC,IAAI,CAAC;IAChBJ,UAAU,CAACQ,OAAO,IAAIR,UAAU,CAACQ,OAAO,CAACC,CAAC,CAAC;EAC7C,CAAC;EAED,IAAMC,MAAM,GAAG,SAATA,MAAM,CAAID,CAAqC,EAAK;IACxDL,UAAU,CAAC,KAAK,CAAC;IACjBJ,UAAU,CAACU,MAAM,IAAIV,UAAU,CAACU,MAAM,CAACD,CAAC,CAAC;EAC3C,CAAC;EAED,IAAME,QAAQ,GAAG1C,KAAK,CAAC2C,WAAW,CAAC,YAAM;IAAA;IACvC;IACA,IAAMC,sBAAsB,4BAAGC,MAAM,CAACC,wBAAwB,CAC5DC,gBAAgB,CAACC,SAAS,EAC1B,OAAO,CACR,0DAH8B,sBAG5BC,GAAG;IACNL,sBAAsB,aAAtBA,sBAAsB,uBAAtBA,sBAAsB,CAAEM,IAAI,CAAClB,QAAQ,CAACmB,OAAO,EAAE,EAAE,CAAC;IAElD,IAAMC,GAAG,GAAG,IAAIC,KAAK,CAAC,OAAO,EAAE;MAAEC,OAAO,EAAE;IAAK,CAAC,CAAC;IACjD,qBAAAtB,QAAQ,CAACmB,OAAO,sDAAhB,kBAAkBI,aAAa,CAACH,GAAG,CAAC;EACtC,CAAC,EAAE,CAACpB,QAAQ,CAAC,CAAC;EAEd,IAAMwB,gBAAgB,GAAGxD,KAAK,CAAC2C,WAAW,CACxC,UAACH,CAAa;IAAA,OAAKZ,WAAW,CAACY,CAAC,CAACiB,aAAa,CAAC;EAAA,GAC/C,CAAC7B,WAAW,CAAC,CACd;EAED,IAAM8B,sBAAsB,GAAG1D,KAAK,CAAC2C,WAAW,CAC9C,UAACH,CAAa,EAAK;IAAA;IACjBA,CAAC,CAACiB,aAAa,CAACE,cAAc,EAAE;IAChC,sBAAA3B,QAAQ,CAACmB,OAAO,uDAAhB,mBAAkBS,KAAK,EAAE;IACzBlB,QAAQ,EAAE;EACZ,CAAC,EACD,CAACV,QAAQ,EAAEU,QAAQ,CAAC,CACrB;EAED,oBACE;IACE,SAAS,EAAEzC,gBAAgB,eAEzBiB,QAAQ,KAAKZ,QAAQ,CAACa,GAAG,qBAAyB,EAClDL,iBAAiB,eAAmBwB,KAAK,CAAC,EAC1CJ,SAAS,yBAA6B,EACtCE,KAAK,2BAA+B,EACpCX,KAAK,2BAA+B,EACpCE,IAAI,0BAA8B,EAClCL,SAAS,CACT;IACF,KAAK,EAAEO;EAAM,gBAEb;IAAK,SAAS;EAAuB,gBACnC;IAAK,SAAS;EAA0B,EAAG,eAC3C;IAAO,SAAS;EAA4B,gBAC1C;IACE,IAAI,EAAC;EAAQ,GACTE,UAAU;IACd,YAAY,EAAED,YAAa;IAC3B,GAAG,EAAEE,QAAS;IACd,SAAS,qBAA0B;IACnC,OAAO,EAAEO,OAAQ;IACjB,MAAM,EAAEE,MAAO;IACf,QAAQ,EAAEJ,QAAS;IACnB,KAAK,EAAED;EAAM,GACb,EACDlB,QAAQ,KAAKZ,QAAQ,CAACa,GAAG,IAAIM,KAAK,iBACjC;IAAK,SAAS;EAAgC,GAAEA,KAAK,CACtD,eACD;IAAK,SAAS;EAAgC,gBAC5C;IAAK,SAAS;EAAmC,GAC9CJ,MAAM,eACP,oBAAC,2BAA2B;IAC1B,SAAS;EAAqC,GAE7CG,WAAW,CACgB,CAC1B,EACLU,SAAS,IAAIhB,QAAQ,KAAKZ,QAAQ,CAACa,GAAG,IAAIM,KAAK,iBAC9C;IAAK,SAAS;EAAgC,GAAEA,KAAK,CACtD,CACG,CACA,eACR;IAAK,SAAS,qBAA0B;IAAC,OAAO,EAAEiB;EAAS,gBACzD;IAAK,SAAS;EAA0B,GACrCf,IAAI,iBACH,oBAAC,KAAK;IACJ,OAAO,EAAE6B,gBAAiB;IAC1B,SAAS;EAAyB,GAEjC7B,IAAI,CAER,EACA,CAAC,CAACS,KAAK,iBACN,oBAAC,KAAK;IACJ,OAAO,EAAEsB,sBAAuB;IAChC,SAAS;EAAyB,GAEjCxC,QAAQ,KAAKZ,QAAQ,CAACa,GAAG,gBAAG,oBAAC,WAAW,OAAG,gBAAG,oBAAC,YAAY,OAAG,CAElE,CACG,EACLD,QAAQ,KAAKZ,QAAQ,CAACa,GAAG,IAAIM,KAAK,iBACjC;IAAK,SAAS;EAA6B,GAAEA,KAAK,CACnD,CACG,CACF,CACF;AAEV,CAAC"}
+{"version":3,"file":"Search.js","names":["React","classNames","noop","usePlatform","Icon16SearchOutline","Icon16Clear","Icon24Cancel","Platform","Touch","Title","Headline","useExternRef","useEnsuredControl","useAdaptivity","getSizeYClassName","SearchPlaceholderTypography","children","restProps","platform","IOS","Search","before","className","defaultValue","placeholder","after","getRef","icon","onIconClick","style","autoComplete","onChangeProp","onChange","valueProp","value","inputProps","inputRef","useState","isFocused","setFocused","sizeY","onFocus","e","onBlur","onCancel","useCallback","nativeInputValueSetter","Object","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","originalEvent","onIconCancelClickStart","preventDefault","focus"],"sources":["../../../../src/components/Search/Search.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Icon16SearchOutline, Icon16Clear, Icon24Cancel } from '@vkontakte/icons';\nimport { Platform } from '../../lib/platform';\nimport { HasRef } from '../../types';\nimport { Touch, TouchEvent } from '../Touch/Touch';\nimport { VKUITouchEvent } from '../../lib/touch';\nimport { Title } from '../Typography/Title/Title';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport styles from './Search.module.css';\n\nconst SearchPlaceholderTypography = ({\n  children,\n  ...restProps\n}: React.HTMLAttributes<HTMLElement>) => {\n  const platform = usePlatform();\n\n  switch (platform) {\n    case Platform.IOS:\n      return (\n        <Title {...restProps} level=\"3\" weight=\"3\">\n          {children}\n        </Title>\n      );\n    default:\n      return (\n        <Headline {...restProps} weight=\"3\">\n          {children}\n        </Headline>\n      );\n  }\n};\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}\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  ...inputProps\n}: SearchProps) => {\n  const inputRef = useExternRef(getRef);\n  const [isFocused, setFocused] = React.useState(false);\n  const [value, onChange] = useEnsuredControl({\n    defaultValue,\n    onChange: onChangeProp,\n    value: valueProp,\n  });\n  const { sizeY } = useAdaptivity();\n  const platform = usePlatform();\n\n  const onFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocused(true);\n    inputProps.onFocus && inputProps.onFocus(e);\n  };\n\n  const onBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocused(false);\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        styles['Search'],\n        platform === Platform.IOS && styles['Search--ios'],\n        getSizeYClassName(styles['Search'], sizeY),\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__in']}>\n        <div className={styles['Search__width']} />\n        <label className={styles['Search__control']}>\n          <input\n            type=\"search\"\n            {...inputProps}\n            autoComplete={autoComplete}\n            ref={inputRef}\n            className={styles['Search__input']}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            onChange={onChange}\n            value={value}\n          />\n          {platform === Platform.IOS && after && (\n            <div className={styles['Search__after-width']}>{after}</div>\n          )}\n          <div className={styles['Search__placeholder']}>\n            <div className={styles['Search__placeholder-in']}>\n              {before}\n              <SearchPlaceholderTypography className={styles['Search__placeholder-text']}>\n                {placeholder}\n              </SearchPlaceholderTypography>\n            </div>\n            {isFocused && platform === Platform.IOS && after && (\n              <div className={styles['Search__after-width']}>{after}</div>\n            )}\n          </div>\n        </label>\n        <div className={styles['Search__after']}>\n          <div className={styles['Search__icons']}>\n            {icon && (\n              <Touch onStart={onIconClickStart} className={styles['Search__icon']}>\n                {icon}\n              </Touch>\n            )}\n            {!!value && (\n              <Touch\n                onStart={onIconCancelClickStart}\n                onClick={onCancel}\n                className={styles['Search__icon']}\n              >\n                {platform === Platform.IOS ? <Icon16Clear /> : <Icon24Cancel />}\n              </Touch>\n            )}\n          </div>\n          {platform === Platform.IOS && after && (\n            <div className={styles['Search__after-in']} onClick={onCancel}>\n              {after}\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/cssm/components/Search/Search.module.css

@@ -1 +1 @@
-.vkuiSearch{-webkit-tap-highlight-color:transparent;font-family:var(--vkui--font_family_base);font-weight:400;line-height:normal;overflow:hidden;padding:8px 16px;transform:translateZ(0)}.vkuiSearch__in{position:relative}.vkuiSearch__width{color:transparent;white-space:nowrap;width:10000px}.vkuiSearch__control{align-items:center;border-radius:var(--vkui--size_border_radius--regular);display:flex;height:100%;justify-content:flex-start;left:0;position:absolute;top:0;width:calc(100% - 1px)}.vkuiSearch__input{-webkit-appearance:none;background-color:initial;border:none;border-radius:var(--vkui--size_border_radius--regular);box-sizing:border-box;flex-grow:1;font-family:inherit;font-size:17px;margin:0;max-width:100%;min-width:0;padding:0 22px 0 36px;position:relative;z-index:2}.vkuiSearch__input::-webkit-search-cancel-button,.vkuiSearch__input::-webkit-search-decoration,.vkuiSearch__input::-webkit-search-results-button,.vkuiSearch__input::-webkit-search-results-decoration{display:none}.vkuiSearch__input:focus{outline:none}.vkuiSearch--has-after .vkuiSearch__input{border-bottom-right-radius:0;border-top-right-radius:0}.vkuiSearch--has-icon .vkuiSearch__input,.vkuiSearch--has-icon .vkuiSearch__placeholder,.vkuiSearch--has-value .vkuiSearch__input,.vkuiSearch--has-value .vkuiSearch__placeholder{padding-right:40px}.vkuiSearch--has-icon.vkuiSearch--has-value .vkuiSearch__input,.vkuiSearch--has-icon.vkuiSearch--has-value .vkuiSearch__placeholder{padding-right:80px}.vkuiSearch__after-width{cursor:text;flex-shrink:0;font-size:17px;padding-left:12px;padding-right:4px;pointer-events:none}.vkuiSearch__placeholder{box-sizing:border-box;cursor:text;display:flex;font-size:0;left:0;padding-left:12px;padding-right:22px;pointer-events:none;position:absolute;text-align:left;width:100%;z-index:1}.vkuiSearch__placeholder-in{align-items:center;display:flex;flex-grow:1;max-width:100%;overflow:hidden}.vkuiSearch__placeholder-text{color:var(--vkui--color_text_secondary);margin-left:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiSearch--has-value .vkuiSearch__placeholder-text{opacity:0}.vkuiSearch__icons{color:var(--vkui--color_icon_secondary);position:absolute;right:100%;top:0}.vkuiSearch__icon,.vkuiSearch__icons{align-items:center;display:flex;justify-content:center}.vkuiSearch__icon{cursor:pointer;width:40px}.vkuiSearch__after{cursor:default;left:100%;position:absolute;top:0;transform:translate(0);transition:transform .3s var(--vkui--animation_easing_platform);z-index:2}.vkuiSearch--focused .vkuiSearch__after,.vkuiSearch--has-value .vkuiSearch__after{transform:translate(-100%)}.vkuiSearch__after:before{content:"";display:block;height:100%;pointer-events:none;position:absolute;right:calc(100% - 1px);width:10px}.vkuiSearch__after-in{cursor:pointer;font-size:17px;padding-left:12px;padding-right:4px;position:relative;z-index:2}.vkuiSearch__after:after{border-radius:0 var(--vkui--size_border_radius--regular) var(--vkui--size_border_radius--regular) 0;content:"";cursor:text;display:block;height:100%;pointer-events:none;position:absolute;right:100%;top:0;width:10px}.vkuiGroup--mode-plain .vkuiSearch{padding-top:4px}.vkuiSearch__after-width,.vkuiSearch__icon,.vkuiSearch__input,.vkuiSearch__placeholder,.vkuiSearch__placeholder-in,.vkuiSearch__width{height:var(--vkui--size_search_height--compact)}.vkuiSearch__after,.vkuiSearch__after-width{line-height:var(--vkui--size_search_height--compact)}.vkuiSearch--sizeY-regular .vkuiSearch__after-width,.vkuiSearch--sizeY-regular .vkuiSearch__icon,.vkuiSearch--sizeY-regular .vkuiSearch__input,.vkuiSearch--sizeY-regular .vkuiSearch__placeholder,.vkuiSearch--sizeY-regular .vkuiSearch__placeholder-in,.vkuiSearch--sizeY-regular .vkuiSearch__width{height:var(--vkui--size_search_height--regular)}.vkuiSearch--sizeY-regular .vkuiSearch__after,.vkuiSearch--sizeY-regular .vkuiSearch__after-width{line-height:var(--vkui--size_search_height--regular)}@media (max-width:767px) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiSearch--sizeY-none .vkuiSearch__after-width,.vkuiSearch--sizeY-none .vkuiSearch__icon,.vkuiSearch--sizeY-none .vkuiSearch__input,.vkuiSearch--sizeY-none .vkuiSearch__placeholder,.vkuiSearch--sizeY-none .vkuiSearch__placeholder-in,.vkuiSearch--sizeY-none .vkuiSearch__width{height:var(--vkui--size_search_height--regular)}.vkuiSearch--sizeY-none .vkuiSearch__after,.vkuiSearch--sizeY-none .vkuiSearch__after-width{line-height:var(--vkui--size_search_height--regular)}}.vkuiSearch{background:var(--vkui--color_background_content)}.vkuiSearch__control{background-color:var(--vkui--color_search_field_background)}.vkuiSearch__in:hover .vkuiSearch__after-width,.vkuiSearch__in:hover .vkuiSearch__after:after,.vkuiSearch__in:hover .vkuiSearch__control{background-color:var(--vkui--color_search_field_background--hover)}.vkuiSearch__in:hover .vkuiSearch__after-width{color:var(--vkui--color_search_field_background--hover)}.vkuiSearch__in:active .vkuiSearch__after-width,.vkuiSearch__in:active .vkuiSearch__after:after,.vkuiSearch__in:active .vkuiSearch__control{background-color:var(--vkui--color_search_field_background--active)}.vkuiSearch__in:active .vkuiSearch__after-width{color:var(--vkui--color_search_field_background--active)}.vkuiSearch__input{color:var(--vkui--color_text_primary)}.vkuiSearch__placeholder{color:var(--vkui--color_icon_medium)}.vkuiSearch__after-width{background:var(--vkui--color_search_field_background);color:var(--vkui--color_search_field_background)}.vkuiSearch__after{background:var(--vkui--color_background_content);color:var(--vkui--color_icon_accent_themed)}.vkuiSearch__after:after{background-color:var(--vkui--color_search_field_background)}.vkuiSearch__after:before{background-color:var(--vkui--color_background_content)}.vkuiPanelHeader .vkuiSearch{background:var(--vkui--color_header_background)}.vkuiPanelHeader .vkuiSearch__control{background-color:var(--vkui--color_search_field_background)}.vkuiPanelHeader .vkuiSearch__input{color:var(--vkui--color_text_primary)}.vkuiPanelHeader .vkuiSearch__placeholder{color:var(--vkui--color_icon_secondary)}.vkuiPanelHeader .vkuiSearch__after-width{background:var(--vkui--color_search_field_background);color:var(--vkui--color_search_field_background)}.vkuiPanelHeader .vkuiSearch__after{background:var(--vkui--color_header_background);color:var(--vkui--color_icon_accent_themed)}.vkuiPanelHeader .vkuiSearch__after:after{background-color:var(--vkui--color_search_field_background)}.vkuiPanelHeader .vkuiSearch__after:before{background-color:var(--vkui--color_header_background)}.vkuiSearch--ios{padding:8px 12px}
+.vkuiSearch{-webkit-tap-highlight-color:transparent;font-family:var(--vkui--font_family_base);font-weight:400;line-height:normal;overflow:hidden;padding:8px 16px;transform:translateZ(0)}.vkuiSearch__in{position:relative}.vkuiSearch__width{color:transparent;white-space:nowrap;width:10000px}.vkuiSearch__control{align-items:center;border-radius:var(--vkui--size_border_radius--regular);display:flex;height:100%;justify-content:flex-start;left:0;position:absolute;top:0;width:calc(100% - 1px)}.vkuiSearch__input{-webkit-appearance:none;background-color:initial;border:none;border-radius:var(--vkui--size_border_radius--regular);box-sizing:border-box;flex-grow:1;font-family:inherit;font-size:17px;margin:0;max-width:100%;min-width:0;padding:0 22px 0 36px;position:relative}.vkuiSearch__input::-webkit-search-cancel-button,.vkuiSearch__input::-webkit-search-decoration,.vkuiSearch__input::-webkit-search-results-button,.vkuiSearch__input::-webkit-search-results-decoration{display:none}.vkuiSearch__input:focus{outline:none}.vkuiSearch--has-after .vkuiSearch__input{border-bottom-right-radius:0;border-top-right-radius:0}.vkuiSearch--has-icon .vkuiSearch__input,.vkuiSearch--has-icon .vkuiSearch__placeholder,.vkuiSearch--has-value .vkuiSearch__input,.vkuiSearch--has-value .vkuiSearch__placeholder{padding-right:40px}.vkuiSearch--has-icon.vkuiSearch--has-value .vkuiSearch__input,.vkuiSearch--has-icon.vkuiSearch--has-value .vkuiSearch__placeholder{padding-right:80px}.vkuiSearch__after-width{cursor:text;flex-shrink:0;font-size:17px;padding-left:12px;padding-right:4px;pointer-events:none}.vkuiSearch__placeholder{box-sizing:border-box;cursor:text;display:flex;font-size:0;left:0;padding-left:12px;padding-right:22px;pointer-events:none;position:absolute;text-align:left;width:100%}.vkuiSearch__placeholder-in{align-items:center;display:flex;flex-grow:1;max-width:100%;overflow:hidden}.vkuiSearch__placeholder-text{color:var(--vkui--color_text_secondary);margin-left:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiSearch--has-value .vkuiSearch__placeholder-text{opacity:0}.vkuiSearch__icons{color:var(--vkui--color_icon_secondary);position:absolute;right:100%;top:0}.vkuiSearch__icon,.vkuiSearch__icons{align-items:center;display:flex;justify-content:center}.vkuiSearch__icon{cursor:pointer;width:40px}.vkuiSearch__after{cursor:default;left:100%;position:absolute;top:0;transform:translate(0);transition:transform .3s var(--vkui--animation_easing_platform)}.vkuiSearch--focused .vkuiSearch__after,.vkuiSearch--has-value .vkuiSearch__after{transform:translate(-100%)}.vkuiSearch__after:before{content:"";display:block;height:100%;pointer-events:none;position:absolute;right:calc(100% - 1px);width:10px}.vkuiSearch__after-in{cursor:pointer;font-size:17px;padding-left:12px;padding-right:4px;position:relative}.vkuiSearch__after:after{border-radius:0 var(--vkui--size_border_radius--regular) var(--vkui--size_border_radius--regular) 0;content:"";cursor:text;display:block;height:100%;pointer-events:none;position:absolute;right:100%;top:0;width:10px}.vkuiGroup--mode-plain .vkuiSearch{padding-top:4px}.vkuiSearch__after-width,.vkuiSearch__icon,.vkuiSearch__input,.vkuiSearch__placeholder,.vkuiSearch__placeholder-in,.vkuiSearch__width{height:var(--vkui--size_search_height--compact)}.vkuiSearch__after,.vkuiSearch__after-width{line-height:var(--vkui--size_search_height--compact)}.vkuiSearch--sizeY-regular .vkuiSearch__after-width,.vkuiSearch--sizeY-regular .vkuiSearch__icon,.vkuiSearch--sizeY-regular .vkuiSearch__input,.vkuiSearch--sizeY-regular .vkuiSearch__placeholder,.vkuiSearch--sizeY-regular .vkuiSearch__placeholder-in,.vkuiSearch--sizeY-regular .vkuiSearch__width{height:var(--vkui--size_search_height--regular)}.vkuiSearch--sizeY-regular .vkuiSearch__after,.vkuiSearch--sizeY-regular .vkuiSearch__after-width{line-height:var(--vkui--size_search_height--regular)}@media (max-width:767px) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiSearch--sizeY-none .vkuiSearch__after-width,.vkuiSearch--sizeY-none .vkuiSearch__icon,.vkuiSearch--sizeY-none .vkuiSearch__input,.vkuiSearch--sizeY-none .vkuiSearch__placeholder,.vkuiSearch--sizeY-none .vkuiSearch__placeholder-in,.vkuiSearch--sizeY-none .vkuiSearch__width{height:var(--vkui--size_search_height--regular)}.vkuiSearch--sizeY-none .vkuiSearch__after,.vkuiSearch--sizeY-none .vkuiSearch__after-width{line-height:var(--vkui--size_search_height--regular)}}.vkuiSearch{background:var(--vkui--color_background_content)}.vkuiSearch__control{background-color:var(--vkui--color_search_field_background)}.vkuiSearch__in:hover .vkuiSearch__after-width,.vkuiSearch__in:hover .vkuiSearch__after:after,.vkuiSearch__in:hover .vkuiSearch__control{background-color:var(--vkui--color_search_field_background--hover)}.vkuiSearch__in:hover .vkuiSearch__after-width{color:var(--vkui--color_search_field_background--hover)}.vkuiSearch__in:active .vkuiSearch__after-width,.vkuiSearch__in:active .vkuiSearch__after:after,.vkuiSearch__in:active .vkuiSearch__control{background-color:var(--vkui--color_search_field_background--active)}.vkuiSearch__in:active .vkuiSearch__after-width{color:var(--vkui--color_search_field_background--active)}.vkuiSearch__input{color:var(--vkui--color_text_primary)}.vkuiSearch__placeholder{color:var(--vkui--color_icon_medium)}.vkuiSearch__after-width{background:var(--vkui--color_search_field_background);color:var(--vkui--color_search_field_background)}.vkuiSearch__after{background:var(--vkui--color_background_content);color:var(--vkui--color_icon_accent_themed)}.vkuiSearch__after:after{background-color:var(--vkui--color_search_field_background)}.vkuiSearch__after:before{background-color:var(--vkui--color_background_content)}.vkuiPanelHeader .vkuiSearch{background:var(--vkui--color_header_background)}.vkuiPanelHeader .vkuiSearch__control{background-color:var(--vkui--color_search_field_background)}.vkuiPanelHeader .vkuiSearch__input{color:var(--vkui--color_text_primary)}.vkuiPanelHeader .vkuiSearch__placeholder{color:var(--vkui--color_icon_secondary)}.vkuiPanelHeader .vkuiSearch__after-width{background:var(--vkui--color_search_field_background);color:var(--vkui--color_search_field_background)}.vkuiPanelHeader .vkuiSearch__after{background:var(--vkui--color_header_background);color:var(--vkui--color_icon_accent_themed)}.vkuiPanelHeader .vkuiSearch__after:after{background-color:var(--vkui--color_search_field_background)}.vkuiPanelHeader .vkuiSearch__after:before{background-color:var(--vkui--color_header_background)}.vkuiSearch--ios{padding:8px 12px}

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

@@ -1,13 +1,13 @@
-import * as React from "react";
-import { HasRootRef } from "../../types";
+import * as React from 'react';
+import { HasRootRef } from '../../types';
 export declare type SegmentedControlValue = string | number | undefined;
-export interface SegmentedControlOptionInterface extends Omit<React.HTMLAttributes<HTMLElement>, "label"> {
+export interface SegmentedControlOptionInterface extends Omit<React.HTMLAttributes<HTMLElement>, 'label'> {
     label: React.ReactChild;
     value: SegmentedControlValue;
 }
-export interface SegmentedControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">, HasRootRef<HTMLDivElement> {
+export interface SegmentedControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>, HasRootRef<HTMLDivElement> {
     options: SegmentedControlOptionInterface[];
-    size?: "m" | "l";
+    size?: 'm' | 'l';
     name?: string;
     onChange?: (value: SegmentedControlValue) => void;
     value?: SegmentedControlValue;
@@ -16,4 +16,4 @@ export interface SegmentedControlProps extends Omit<React.HTMLAttributes<HTMLDiv
 /**
  * @see https://vkcom.github.io/VKUI/#/SegmentedControl
  */
-export declare const SegmentedControl: ({ size, name, options, getRootRef, onChange, value: valueProp, defaultValue, children, className, ...restProps }: SegmentedControlProps) => JSX.Element;
+export declare const SegmentedControl: ({ size, name, options, getRootRef, defaultValue, children, className, onChange: onChangeProp, value: valueProp, ...restProps }: SegmentedControlProps) => JSX.Element;

package/dist/cssm/components/SegmentedControl/SegmentedControl.js

@@ -1,19 +1,19 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["size", "name", "options", "getRootRef", "onChange", "value", "defaultValue", "children", "className"],
+var _excluded = ["size", "name", "options", "getRootRef", "defaultValue", "children", "className", "onChange", "value"],
   _excluded2 = ["label", "className"];
-import * as React from "react";
-import { classNamesString } from "../../lib/classNames";
-import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
-import { noop } from "../../lib/utils";
-import { useId } from "../../hooks/useId";
-import { warnOnce } from "../../lib/warnOnce";
-import { SegmentedControlOption } from "./SegmentedControlOption/SegmentedControlOption";
-import { useAdaptivity } from "../../hooks/useAdaptivity";
-import { getSizeYClassName } from "../../helpers/getSizeYClassName";
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
+import { useId } from '../../hooks/useId';
+import { warnOnce } from '../../lib/warnOnce';
+import { SegmentedControlOption } from './SegmentedControlOption/SegmentedControlOption';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { getSizeYClassName } from '../../helpers/getSizeYClassName';
+import { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';
 import "./SegmentedControl.module.css";
-var warn = warnOnce("SegmentedControl");
+var warn = warnOnce('SegmentedControl');
 
 /**
  * @see https://vkcom.github.io/VKUI/#/SegmentedControl
@@ -21,59 +21,50 @@ var warn = warnOnce("SegmentedControl");
 export var SegmentedControl = function SegmentedControl(_ref) {
   var _options$;
   var _ref$size = _ref.size,
-    size = _ref$size === void 0 ? "l" : _ref$size,
+    size = _ref$size === void 0 ? 'l' : _ref$size,
     name = _ref.name,
     options = _ref.options,
     getRootRef = _ref.getRootRef,
-    _ref$onChange = _ref.onChange,
-    onChange = _ref$onChange === void 0 ? noop : _ref$onChange,
-    valueProp = _ref.value,
-    defaultValue = _ref.defaultValue,
+    _ref$defaultValue = _ref.defaultValue,
+    defaultValue = _ref$defaultValue === void 0 ? (_options$ = options[0]) === null || _options$ === void 0 ? void 0 : _options$.value : _ref$defaultValue,
     children = _ref.children,
     className = _ref.className,
+    onChangeProp = _ref.onChange,
+    valueProp = _ref.value,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var id = useId();
+  var _useCustomEnsuredCont = useCustomEnsuredControl({
+      onChange: onChangeProp,
+      value: valueProp,
+      defaultValue: defaultValue
+    }),
+    _useCustomEnsuredCont2 = _slicedToArray(_useCustomEnsuredCont, 2),
+    value = _useCustomEnsuredCont2[0],
+    _onChange = _useCustomEnsuredCont2[1];
   var _useAdaptivity = useAdaptivity(),
     sizeY = _useAdaptivity.sizeY;
-  var initialValue = defaultValue !== null && defaultValue !== void 0 ? defaultValue : (_options$ = options[0]) === null || _options$ === void 0 ? void 0 : _options$.value;
-  if (process.env.NODE_ENV === "development") {
-    if (valueProp !== undefined && defaultValue !== undefined) {
-      warn("SegmentedControl должен быть либо управляемым, либо неуправляемым" + "(укажите либо свойство value, либо свойство defaultValue, но не оба).", "error");
-    }
-  }
   var _React$useState = React.useState(0),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     activeOptionIdx = _React$useState2[0],
     updateActiveOptionIdx = _React$useState2[1];
-  var _React$useState3 = React.useState(initialValue),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    valueLocal = _React$useState4[0],
-    updateValueLocal = _React$useState4[1];
-  var value = valueProp !== null && valueProp !== void 0 ? valueProp : valueLocal;
   useIsomorphicLayoutEffect(function () {
     var _activeOptionIdx = options.findIndex(function (option) {
       return option.value === value;
     });
-    if (_activeOptionIdx === -1 && process.env.NODE_ENV === "development") {
-      warn("defaultValue: такого значения нет среди опций!", "error");
+    if (_activeOptionIdx === -1 && process.env.NODE_ENV === 'development') {
+      warn('defaultValue: такого значения нет среди опций!', 'error');
     }
     updateActiveOptionIdx(_activeOptionIdx);
   }, [value, options]);
   var translateX = "translateX(".concat(100 * activeOptionIdx, "%)");
-  var handleOnChange = function handleOnChange(value) {
-    if (valueProp === undefined) {
-      updateValueLocal(value);
-    }
-    onChange(value);
-  };
   return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
-    className: classNamesString("vkuiSegmentedControl", getSizeYClassName("vkuiSegmentedControl", sizeY), styles["SegmentedControl--size-".concat(size)], className),
+    className: classNames("vkuiSegmentedControl", getSizeYClassName("vkuiSegmentedControl", sizeY), styles["SegmentedControl--size-".concat(size)], className),
     ref: getRootRef
   }), /*#__PURE__*/React.createElement("div", {
     role: "radiogroup",
     className: "vkuiSegmentedControl__in"
   }, activeOptionIdx > -1 && /*#__PURE__*/React.createElement("div", {
-    "aria-hidden": "true",
+    "aria-hidden": true,
     className: "vkuiSegmentedControl__slider",
     style: {
       width: "".concat(100 / options.length, "%"),
@@ -87,11 +78,11 @@ export var SegmentedControl = function SegmentedControl(_ref) {
     return /*#__PURE__*/React.createElement(SegmentedControlOption, _extends({
       key: "".concat(optionProps.value)
     }, optionProps, {
-      className: classNamesString("vkuiSegmentedControl__option", optionClassName),
+      className: classNames("vkuiSegmentedControl__option", optionClassName),
       name: name !== null && name !== void 0 ? name : id,
       checked: value === optionProps.value,
       onChange: function onChange() {
-        return handleOnChange(optionProps.value);
+        return _onChange(optionProps.value);
       }
     }), label);
   })));

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

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

package/dist/cssm/components/SegmentedControl/SegmentedControl.module.css

@@ -1 +1 @@
-.vkuiSegmentedControl{background-color:var(--vkui--color_background_secondary);border-radius:var(--vkui--size_border_radius--regular);box-sizing:border-box;font-family:var(--vkui--font_family_base);height:30px;padding:2px}.vkuiSegmentedControl--size-l{height:36px}.vkuiSegmentedControl__in{border-radius:inherit;display:flex;height:100%;position:relative;transition:all .1s ease-out;width:100%}.vkuiSegmentedControl__slider{background-color:var(--vkui--color_segmented_control);border-radius:inherit;bottom:0;box-shadow:inset 0 0 0 .5px var(--vkui--color_image_border_alpha),0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04);left:0;position:absolute;top:0;transform-origin:0 0;transition:transform .15s}.vkuiSegmentedControl__option{display:block;flex:1;margin:0;padding:0;position:relative;z-index:1}.vkuiSegmentedControl--sizeY-regular{height:36px}.vkuiSegmentedControl--sizeY-regular.vkuiSegmentedControl--size-l{height:44px}@media (max-width:767px) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiSegmentedControl--sizeY-none{height:36px}.vkuiSegmentedControl--sizeY-none.vkuiSegmentedControl--size-l{height:44px}}
+.vkuiSegmentedControl{background-color:var(--vkui--color_background_secondary);border-radius:var(--vkui--size_border_radius--regular);box-sizing:border-box;font-family:var(--vkui--font_family_base);height:30px;padding:2px}.vkuiSegmentedControl--size-l{height:36px}.vkuiSegmentedControl__in{border-radius:inherit;display:flex;height:100%;position:relative;transition:all .1s ease-out;width:100%}.vkuiSegmentedControl__slider{background-color:var(--vkui--color_segmented_control);border-radius:inherit;bottom:0;box-shadow:inset 0 0 0 .5px var(--vkui--color_image_border_alpha),0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04);left:0;position:absolute;top:0;transform-origin:0 0;transition:transform .15s}.vkuiSegmentedControl__option{display:block;flex:1;margin:0;padding:0;position:relative}.vkuiSegmentedControl--sizeY-regular{height:36px}.vkuiSegmentedControl--sizeY-regular.vkuiSegmentedControl--size-l{height:44px}@media (max-width:767px) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiSegmentedControl--sizeY-none{height:36px}.vkuiSegmentedControl--sizeY-none.vkuiSegmentedControl--size-l{height:44px}}

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlOption.js","names":["React","useAdaptivity","useFocusVisible","callMultiple","classNamesString","FocusVisible","VisuallyHiddenInput","getSizeYClassName","SegmentedControlOption","className","style","children","restProps","focusVisible","onBlur","onFocus","sizeY","checked"],"sources":["../../../../../src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useAdaptivity } from \"../../../hooks/useAdaptivity\";\nimport { useFocusVisible } from \"../../../hooks/useFocusVisible\";\nimport { callMultiple } from \"../../../lib/callMultiple\";\nimport { classNamesString } from \"../../../lib/classNames\";\nimport { FocusVisible } from \"../../FocusVisible/FocusVisible\";\nimport {\n  VisuallyHiddenInput,\n  VisuallyHiddenInputProps,\n} from \"../../VisuallyHiddenInput/VisuallyHiddenInput\";\nimport { getSizeYClassName } from \"../../../helpers/getSizeYClassName\";\nimport styles from \"./SegmentedControlOption.module.css\";\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControlOption = ({\n  className,\n  style,\n  children,\n  ...restProps\n}: VisuallyHiddenInputProps) => {\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n  const { sizeY } = useAdaptivity();\n\n  return (\n    <label\n      className={classNamesString(\n        styles[\"SegmentedControlOption\"],\n        restProps.checked && styles[\"SegmentedControlOption--checked\"],\n        focusVisible && styles[\"SegmentedControlOption--focus-visible\"],\n        className\n      )}\n      style={style}\n    >\n      <VisuallyHiddenInput\n        {...restProps}\n        type=\"radio\"\n        onBlur={callMultiple(onBlur, restProps.onBlur)}\n        onFocus={callMultiple(onFocus, restProps.onFocus)}\n      />\n      <span\n        className={classNamesString(\n          styles[\"SegmentedControlOption__content\"],\n          getSizeYClassName(styles[\"SegmentedControlOption__content\"], sizeY)\n        )}\n      >\n        {children}\n      </span>\n      <FocusVisible mode=\"inside\" />\n    </label>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,eAAe,QAAQ,gCAAgC;AAChE,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,gBAAgB,QAAQ,yBAAyB;AAC1D,SAASC,YAAY,QAAQ,iCAAiC;AAC9D,SACEC,mBAAmB,QAEd,+CAA+C;AACtD,SAASC,iBAAiB,QAAQ,oCAAoC;AAAC;AAGvE;AACA;AACA;AACA,OAAO,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAsB,OAKH;EAAA,IAJ9BC,SAAS,QAATA,SAAS;IACTC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IACLC,SAAS;EAEZ,uBAA0CV,eAAe,EAAE;IAAnDW,YAAY,oBAAZA,YAAY;IAAEC,MAAM,oBAANA,MAAM;IAAEC,OAAO,oBAAPA,OAAO;EACrC,qBAAkBd,aAAa,EAAE;IAAzBe,KAAK,kBAALA,KAAK;EAEb,oBACE;IACE,SAAS,EAAEZ,gBAAgB,+BAEzBQ,SAAS,CAACK,OAAO,yCAA6C,EAC9DJ,YAAY,+CAAmD,EAC/DJ,SAAS,CACT;IACF,KAAK,EAAEC;EAAM,gBAEb,oBAAC,mBAAmB,eACdE,SAAS;IACb,IAAI,EAAC,OAAO;IACZ,MAAM,EAAET,YAAY,CAACW,MAAM,EAAEF,SAAS,CAACE,MAAM,CAAE;IAC/C,OAAO,EAAEX,YAAY,CAACY,OAAO,EAAEH,SAAS,CAACG,OAAO;EAAE,GAClD,eACF;IACE,SAAS,EAAEX,gBAAgB,wCAEzBG,iBAAiB,wCAA4CS,KAAK,CAAC;EACnE,GAEDL,QAAQ,CACJ,eACP,oBAAC,YAAY;IAAC,IAAI,EAAC;EAAQ,EAAG,CACxB;AAEZ,CAAC"}
+{"version":3,"file":"SegmentedControlOption.js","names":["React","useAdaptivity","useFocusVisible","callMultiple","classNames","FocusVisible","VisuallyHiddenInput","getSizeYClassName","SegmentedControlOption","className","style","children","restProps","focusVisible","onBlur","onFocus","sizeY","checked"],"sources":["../../../../../src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { callMultiple } from '../../../lib/callMultiple';\nimport { classNames } from '@vkontakte/vkjs';\nimport { FocusVisible } from '../../FocusVisible/FocusVisible';\nimport {\n  VisuallyHiddenInput,\n  VisuallyHiddenInputProps,\n} from '../../VisuallyHiddenInput/VisuallyHiddenInput';\nimport { getSizeYClassName } from '../../../helpers/getSizeYClassName';\nimport styles from './SegmentedControlOption.module.css';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControlOption = ({\n  className,\n  style,\n  children,\n  ...restProps\n}: VisuallyHiddenInputProps) => {\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n  const { sizeY } = useAdaptivity();\n\n  return (\n    <label\n      className={classNames(\n        styles['SegmentedControlOption'],\n        restProps.checked && styles['SegmentedControlOption--checked'],\n        focusVisible && styles['SegmentedControlOption--focus-visible'],\n        className,\n      )}\n      style={style}\n    >\n      <VisuallyHiddenInput\n        {...restProps}\n        type=\"radio\"\n        onBlur={callMultiple(onBlur, restProps.onBlur)}\n        onFocus={callMultiple(onFocus, restProps.onFocus)}\n      />\n      <span\n        className={classNames(\n          styles['SegmentedControlOption__content'],\n          getSizeYClassName(styles['SegmentedControlOption__content'], sizeY),\n        )}\n      >\n        {children}\n      </span>\n      <FocusVisible mode=\"inside\" />\n    </label>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,eAAe,QAAQ,gCAAgC;AAChE,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,YAAY,QAAQ,iCAAiC;AAC9D,SACEC,mBAAmB,QAEd,+CAA+C;AACtD,SAASC,iBAAiB,QAAQ,oCAAoC;AAAC;AAGvE;AACA;AACA;AACA,OAAO,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAsB,OAKH;EAAA,IAJ9BC,SAAS,QAATA,SAAS;IACTC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IACLC,SAAS;EAEZ,uBAA0CV,eAAe,EAAE;IAAnDW,YAAY,oBAAZA,YAAY;IAAEC,MAAM,oBAANA,MAAM;IAAEC,OAAO,oBAAPA,OAAO;EACrC,qBAAkBd,aAAa,EAAE;IAAzBe,KAAK,kBAALA,KAAK;EAEb,oBACE;IACE,SAAS,EAAEZ,UAAU,+BAEnBQ,SAAS,CAACK,OAAO,yCAA6C,EAC9DJ,YAAY,+CAAmD,EAC/DJ,SAAS,CACT;IACF,KAAK,EAAEC;EAAM,gBAEb,oBAAC,mBAAmB,eACdE,SAAS;IACb,IAAI,EAAC,OAAO;IACZ,MAAM,EAAET,YAAY,CAACW,MAAM,EAAEF,SAAS,CAACE,MAAM,CAAE;IAC/C,OAAO,EAAEX,YAAY,CAACY,OAAO,EAAEH,SAAS,CAACG,OAAO;EAAE,GAClD,eACF;IACE,SAAS,EAAEX,UAAU,wCAEnBG,iBAAiB,wCAA4CS,KAAK,CAAC;EACnE,GAEDL,QAAQ,CACJ,eACP,oBAAC,YAAY;IAAC,IAAI,EAAC;EAAQ,EAAG,CACxB;AAEZ,CAAC"}

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

@@ -1,10 +1,10 @@
-import * as React from "react";
-import { SelectProps } from "../CustomSelect/CustomSelect";
-export declare type SelectType = "default" | "plain" | "accent";
+import * as React from 'react';
+import { SelectProps } from '../CustomSelect/CustomSelect';
+export declare type SelectType = 'default' | 'plain' | 'accent';
 /**
  * @see https://vkcom.github.io/VKUI/#/SelectTypography
  */
-export declare const SelectTypography: ({ selectType, children, className, ...restProps }: React.PropsWithChildren<Pick<SelectProps, "selectType" | "className">>) => JSX.Element;
+export declare const SelectTypography: ({ selectType, children, className, ...restProps }: React.PropsWithChildren<Pick<SelectProps, 'selectType' | 'className'>>) => JSX.Element;
 /**
  * @see https://vkcom.github.io/VKUI/#/Select
  */

package/dist/cssm/components/Select/Select.js

@@ -2,22 +2,22 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["selectType", "children", "className"],
   _excluded2 = ["children", "options", "popupDirection", "renderOption", "className"];
-import * as React from "react";
-import { NativeSelect } from "../NativeSelect/NativeSelect";
-import { CustomSelect } from "../CustomSelect/CustomSelect";
-import { useAdaptivity } from "../../hooks/useAdaptivity";
-import { useAdaptivityHasPointer } from "../../hooks/useAdaptivityHasPointer";
-import { usePlatform } from "../../hooks/usePlatform";
-import { classNamesString } from "../../lib/classNames";
-import { getPlatformClassName } from "../../helpers/getPlatformClassName";
-import { getSizeYClassName } from "../../helpers/getSizeYClassName";
+import * as React from 'react';
+import { NativeSelect } from '../NativeSelect/NativeSelect';
+import { CustomSelect } from '../CustomSelect/CustomSelect';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';
+import { usePlatform } from '../../hooks/usePlatform';
+import { classNames } from '@vkontakte/vkjs';
+import { getPlatformClassName } from '../../helpers/getPlatformClassName';
+import { getSizeYClassName } from '../../helpers/getSizeYClassName';
 import "./Select.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/SelectTypography
  */
 export var SelectTypography = function SelectTypography(_ref) {
   var _ref$selectType = _ref.selectType,
-    selectType = _ref$selectType === void 0 ? "default" : _ref$selectType,
+    selectType = _ref$selectType === void 0 ? 'default' : _ref$selectType,
     children = _ref.children,
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded);
@@ -25,7 +25,7 @@ export var SelectTypography = function SelectTypography(_ref) {
   var _useAdaptivity = useAdaptivity(),
     sizeY = _useAdaptivity.sizeY;
   return /*#__PURE__*/React.createElement("span", _extends({
-    className: classNamesString("vkuiSelectTypography", getPlatformClassName("vkuiSelectTypography", platform), getSizeYClassName("vkuiSelectTypography", sizeY), styles["SelectTypography--selectType-".concat(selectType)], className)
+    className: classNames("vkuiSelectTypography", getPlatformClassName("vkuiSelectTypography", platform), getSizeYClassName("vkuiSelectTypography", sizeY), styles["SelectTypography--selectType-".concat(selectType)], className)
   }, restProps), children);
 };
 
@@ -42,12 +42,12 @@ export var Select = function Select(_ref2) {
     props = _objectWithoutProperties(_ref2, _excluded2);
   var hasPointer = useAdaptivityHasPointer();
   return /*#__PURE__*/React.createElement(React.Fragment, null, (hasPointer === undefined || hasPointer) && /*#__PURE__*/React.createElement(CustomSelect, _extends({
-    className: classNamesString("vkuiSelect__custom", className),
+    className: classNames("vkuiSelect__custom", className),
     options: options,
     popupDirection: popupDirection,
     renderOption: renderOption
   }, props)), (hasPointer === undefined || !hasPointer) && /*#__PURE__*/React.createElement(NativeSelect, _extends({
-    className: classNamesString("vkuiSelect__native", className)
+    className: classNames("vkuiSelect__native", className)
   }, props), options.map(function (_ref3) {
     var label = _ref3.label,
       value = _ref3.value;

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

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":["React","NativeSelect","CustomSelect","useAdaptivity","useAdaptivityHasPointer","usePlatform","classNamesString","getPlatformClassName","getSizeYClassName","SelectTypography","selectType","children","className","restProps","platform","sizeY","styles","Select","options","popupDirection","renderOption","props","hasPointer","undefined","map","label","value"],"sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { NativeSelect } from \"../NativeSelect/NativeSelect\";\nimport { CustomSelect, SelectProps } from \"../CustomSelect/CustomSelect\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { useAdaptivityHasPointer } from \"../../hooks/useAdaptivityHasPointer\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { getPlatformClassName } from \"../../helpers/getPlatformClassName\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport styles from \"./Select.module.css\";\n\nexport type SelectType = \"default\" | \"plain\" | \"accent\";\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SelectTypography\n */\nexport const SelectTypography = ({\n  selectType = \"default\",\n  children,\n  className,\n  ...restProps\n}: React.PropsWithChildren<Pick<SelectProps, \"selectType\" | \"className\">>) => {\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n\n  return (\n    <span\n      className={classNamesString(\n        styles[\"SelectTypography\"],\n        getPlatformClassName(styles[\"SelectTypography\"], platform),\n        getSizeYClassName(styles[\"SelectTypography\"], sizeY),\n        styles[`SelectTypography--selectType-${selectType}`],\n        className\n      )}\n      {...restProps}\n    >\n      {children}\n    </span>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Select\n */\nexport const Select = ({\n  children,\n  options = [],\n  popupDirection,\n  renderOption,\n  className,\n  ...props\n}: SelectProps) => {\n  const hasPointer = useAdaptivityHasPointer();\n\n  return (\n    <React.Fragment>\n      {(hasPointer === undefined || hasPointer) && (\n        <CustomSelect\n          className={classNamesString(styles[\"Select__custom\"], className)}\n          options={options}\n          popupDirection={popupDirection}\n          renderOption={renderOption}\n          {...props}\n        />\n      )}\n      {(hasPointer === undefined || !hasPointer) && (\n        <NativeSelect\n          className={classNamesString(styles[\"Select__native\"], className)}\n          {...props}\n        >\n          {options.map(({ label, value }) => (\n            <option value={value} key={`${value}`}>\n              {label}\n            </option>\n          ))}\n        </NativeSelect>\n      )}\n    </React.Fragment>\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,YAAY,QAAQ,8BAA8B;AAC3D,SAASC,YAAY,QAAqB,8BAA8B;AACxE,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,uBAAuB,QAAQ,qCAAqC;AAC7E,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,oBAAoB,QAAQ,oCAAoC;AACzE,SAASC,iBAAiB,QAAQ,iCAAiC;AAAC;AAKpE;AACA;AACA;AACA,OAAO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB,OAKiD;EAAA,2BAJ5EC,UAAU;IAAVA,UAAU,gCAAG,SAAS;IACtBC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGT,WAAW,EAAE;EAC9B,qBAAkBF,aAAa,EAAE;IAAzBY,KAAK,kBAALA,KAAK;EAEb,oBACE;IACE,SAAS,EAAET,gBAAgB,yBAEzBC,oBAAoB,yBAA6BO,QAAQ,CAAC,EAC1DN,iBAAiB,yBAA6BO,KAAK,CAAC,EACpDC,MAAM,wCAAiCN,UAAU,EAAG,EACpDE,SAAS;EACT,GACEC,SAAS,GAEZF,QAAQ,CACJ;AAEX,CAAC;;AAED;AACA;AACA;AACA,OAAO,IAAMM,MAAM,GAAG,SAATA,MAAM,QAOA;EAAA,IANjBN,QAAQ,SAARA,QAAQ;IAAA,sBACRO,OAAO;IAAPA,OAAO,8BAAG,EAAE;IACZC,cAAc,SAAdA,cAAc;IACdC,YAAY,SAAZA,YAAY;IACZR,SAAS,SAATA,SAAS;IACNS,KAAK;EAER,IAAMC,UAAU,GAAGlB,uBAAuB,EAAE;EAE5C,oBACE,oBAAC,KAAK,CAAC,QAAQ,QACZ,CAACkB,UAAU,KAAKC,SAAS,IAAID,UAAU,kBACtC,oBAAC,YAAY;IACX,SAAS,EAAEhB,gBAAgB,uBAA2BM,SAAS,CAAE;IACjE,OAAO,EAAEM,OAAQ;IACjB,cAAc,EAAEC,cAAe;IAC/B,YAAY,EAAEC;EAAa,GACvBC,KAAK,EAEZ,EACA,CAACC,UAAU,KAAKC,SAAS,IAAI,CAACD,UAAU,kBACvC,oBAAC,YAAY;IACX,SAAS,EAAEhB,gBAAgB,uBAA2BM,SAAS;EAAE,GAC7DS,KAAK,GAERH,OAAO,CAACM,GAAG,CAAC;IAAA,IAAGC,KAAK,SAALA,KAAK;MAAEC,KAAK,SAALA,KAAK;IAAA,oBAC1B;MAAQ,KAAK,EAAEA,KAAM;MAAC,GAAG,YAAKA,KAAK;IAAG,GACnCD,KAAK,CACC;EAAA,CACV,CAAC,CAEL,CACc;AAErB,CAAC;AAAC;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"Select.js","names":["React","NativeSelect","CustomSelect","useAdaptivity","useAdaptivityHasPointer","usePlatform","classNames","getPlatformClassName","getSizeYClassName","SelectTypography","selectType","children","className","restProps","platform","sizeY","styles","Select","options","popupDirection","renderOption","props","hasPointer","undefined","map","label","value"],"sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NativeSelect } from '../NativeSelect/NativeSelect';\nimport { CustomSelect, SelectProps } from '../CustomSelect/CustomSelect';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { classNames } from '@vkontakte/vkjs';\nimport { getPlatformClassName } from '../../helpers/getPlatformClassName';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport styles from './Select.module.css';\n\nexport type SelectType = 'default' | 'plain' | 'accent';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SelectTypography\n */\nexport const SelectTypography = ({\n  selectType = 'default',\n  children,\n  className,\n  ...restProps\n}: React.PropsWithChildren<Pick<SelectProps, 'selectType' | 'className'>>) => {\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n\n  return (\n    <span\n      className={classNames(\n        styles['SelectTypography'],\n        getPlatformClassName(styles['SelectTypography'], platform),\n        getSizeYClassName(styles['SelectTypography'], sizeY),\n        styles[`SelectTypography--selectType-${selectType}`],\n        className,\n      )}\n      {...restProps}\n    >\n      {children}\n    </span>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Select\n */\nexport const Select = ({\n  children,\n  options = [],\n  popupDirection,\n  renderOption,\n  className,\n  ...props\n}: SelectProps) => {\n  const hasPointer = useAdaptivityHasPointer();\n\n  return (\n    <React.Fragment>\n      {(hasPointer === undefined || hasPointer) && (\n        <CustomSelect\n          className={classNames(styles['Select__custom'], className)}\n          options={options}\n          popupDirection={popupDirection}\n          renderOption={renderOption}\n          {...props}\n        />\n      )}\n      {(hasPointer === undefined || !hasPointer) && (\n        <NativeSelect className={classNames(styles['Select__native'], className)} {...props}>\n          {options.map(({ label, value }) => (\n            <option value={value} key={`${value}`}>\n              {label}\n            </option>\n          ))}\n        </NativeSelect>\n      )}\n    </React.Fragment>\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,YAAY,QAAQ,8BAA8B;AAC3D,SAASC,YAAY,QAAqB,8BAA8B;AACxE,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,uBAAuB,QAAQ,qCAAqC;AAC7E,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,oBAAoB,QAAQ,oCAAoC;AACzE,SAASC,iBAAiB,QAAQ,iCAAiC;AAAC;AAKpE;AACA;AACA;AACA,OAAO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB,OAKiD;EAAA,2BAJ5EC,UAAU;IAAVA,UAAU,gCAAG,SAAS;IACtBC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGT,WAAW,EAAE;EAC9B,qBAAkBF,aAAa,EAAE;IAAzBY,KAAK,kBAALA,KAAK;EAEb,oBACE;IACE,SAAS,EAAET,UAAU,yBAEnBC,oBAAoB,yBAA6BO,QAAQ,CAAC,EAC1DN,iBAAiB,yBAA6BO,KAAK,CAAC,EACpDC,MAAM,wCAAiCN,UAAU,EAAG,EACpDE,SAAS;EACT,GACEC,SAAS,GAEZF,QAAQ,CACJ;AAEX,CAAC;;AAED;AACA;AACA;AACA,OAAO,IAAMM,MAAM,GAAG,SAATA,MAAM,QAOA;EAAA,IANjBN,QAAQ,SAARA,QAAQ;IAAA,sBACRO,OAAO;IAAPA,OAAO,8BAAG,EAAE;IACZC,cAAc,SAAdA,cAAc;IACdC,YAAY,SAAZA,YAAY;IACZR,SAAS,SAATA,SAAS;IACNS,KAAK;EAER,IAAMC,UAAU,GAAGlB,uBAAuB,EAAE;EAE5C,oBACE,oBAAC,KAAK,CAAC,QAAQ,QACZ,CAACkB,UAAU,KAAKC,SAAS,IAAID,UAAU,kBACtC,oBAAC,YAAY;IACX,SAAS,EAAEhB,UAAU,uBAA2BM,SAAS,CAAE;IAC3D,OAAO,EAAEM,OAAQ;IACjB,cAAc,EAAEC,cAAe;IAC/B,YAAY,EAAEC;EAAa,GACvBC,KAAK,EAEZ,EACA,CAACC,UAAU,KAAKC,SAAS,IAAI,CAACD,UAAU,kBACvC,oBAAC,YAAY;IAAC,SAAS,EAAEhB,UAAU,uBAA2BM,SAAS;EAAE,GAAKS,KAAK,GAChFH,OAAO,CAACM,GAAG,CAAC;IAAA,IAAGC,KAAK,SAALA,KAAK;MAAEC,KAAK,SAALA,KAAK;IAAA,oBAC1B;MAAQ,KAAK,EAAEA,KAAM;MAAC,GAAG,YAAKA,KAAK;IAAG,GACnCD,KAAK,CACC;EAAA,CACV,CAAC,CAEL,CACc;AAErB,CAAC;AAAC;EAAA;EAAA;EAAA;AAAA"}

package/dist/cssm/components/Select/Select.module.css

@@ -1 +1 @@
-.vkuiSelect{box-sizing:border-box;cursor:pointer;font-family:var(--vkui--font_family_base);position:relative}.vkuiSelect__el{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;display:block;font-family:inherit;font-size:16px;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;z-index:7}.vkuiSelect__container{box-sizing:border-box;color:var(--vkui--color_text_primary);flex-grow:1;flex-shrink:1;overflow:hidden;padding-left:12px;padding-right:12px;position:relative;z-index:6}.vkuiSelect--hasBefore .vkuiSelect__container{padding-left:0}.vkuiSelect--hasAfter .vkuiSelect__container{padding-right:0}.vkuiSelect--multiline .vkuiSelect__container{padding-bottom:12px;padding-top:12px}.vkuiSelect--sizeY-compact.vkuiSelect--multiline .vkuiSelect__container{padding-bottom:8px;padding-top:8px}@media (max-height:414px),(pointer:fine) and (min-width:768px){.vkuiSelect--sizeY-none.vkuiSelect--multiline .vkuiSelect__container{padding-bottom:8px;padding-top:8px}}.vkuiSelect__title{display:block}.vkuiSelect:not(.vkuiSelect--multiline) .vkuiSelect__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiSelect--empty .vkuiSelect__title{color:var(--vkui--color_text_secondary)}.vkuiSelect--align-right .vkuiSelect__title{text-align:right}.vkuiSelect--align-center .vkuiSelect__title{text-align:center}.vkuiCalendarHeader__picker .vkuiSelect__container{padding-right:4px}.vkuiSelectTypography--selectType-accent{font-size:var(--vkui--font_paragraph--font_size--regular);font-weight:var(--vkui--font_weight_accent1);line-height:var(--vkui--font_paragraph--line_height--regular)}:not(.vkuiSelectTypography--selectType-accent).vkuiSelectTypography{font-size:var(--vkui--font_headline1--font_size--regular);font-weight:var(--vkui--font_weight_accent3);line-height:var(--vkui--font_headline1--line_height--regular)}.vkuiSelectTypography--selectType-accent.vkuiSelectTypography--android{font-weight:var(--vkui--font_weight_accent2)}.vkuiSelectTypography--sizeY-compact:not(.vkuiSelectTypography--selectType-accent),.vkuiSelectTypography--vkcom:not(.vkuiSelectTypography--selectType-accent){font-size:var(--vkui--font_text--font_size--compact);font-weight:var(--vkui--font_weight_accent3);line-height:var(--vkui--font_text--line_height--compact)}@media (max-height:414px),(pointer:fine) and (min-width:768px){.vkuiSelectTypography--sizeY-none:not(.vkuiSelectTypography--selectType-accent){font-size:var(--vkui--font_text--font_size--compact);font-weight:var(--vkui--font_weight_accent3);line-height:var(--vkui--font_text--line_height--compact)}}
+.vkuiSelect{box-sizing:border-box;cursor:pointer;font-family:var(--vkui--font_family_base);position:relative}.vkuiSelect__el{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;display:block;font-family:inherit;font-size:16px;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;z-index:6;z-index:var(--vkui_internal--z_index_form_field_side)}.vkuiSelect__container{box-sizing:border-box;color:var(--vkui--color_text_primary);flex-grow:1;flex-shrink:1;overflow:hidden;padding-left:12px;padding-right:12px;position:relative;z-index:1;z-index:var(--vkui_internal--z_index_form_field_element)}.vkuiSelect--hasBefore .vkuiSelect__container{padding-left:0}.vkuiSelect--hasAfter .vkuiSelect__container{padding-right:0}.vkuiSelect--multiline .vkuiSelect__container{padding-bottom:12px;padding-top:12px}.vkuiSelect--sizeY-compact.vkuiSelect--multiline .vkuiSelect__container{padding-bottom:8px;padding-top:8px}@media (max-height:414px),(pointer:fine) and (min-width:768px){.vkuiSelect--sizeY-none.vkuiSelect--multiline .vkuiSelect__container{padding-bottom:8px;padding-top:8px}}.vkuiSelect__title{display:block}.vkuiSelect:not(.vkuiSelect--multiline) .vkuiSelect__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiSelect--empty .vkuiSelect__title{color:var(--vkui--color_text_secondary)}.vkuiSelect--align-right .vkuiSelect__title{text-align:right}.vkuiSelect--align-center .vkuiSelect__title{text-align:center}.vkuiCalendarHeader__picker .vkuiSelect__container{padding-right:4px}.vkuiSelectTypography--selectType-accent{font-size:var(--vkui--font_paragraph--font_size--regular);font-weight:var(--vkui--font_weight_accent1);line-height:var(--vkui--font_paragraph--line_height--regular)}:not(.vkuiSelectTypography--selectType-accent).vkuiSelectTypography{font-size:var(--vkui--font_headline1--font_size--regular);font-weight:var(--vkui--font_weight_accent3);line-height:var(--vkui--font_headline1--line_height--regular)}.vkuiSelectTypography--selectType-accent.vkuiSelectTypography--android{font-weight:var(--vkui--font_weight_accent2)}.vkuiSelectTypography--sizeY-compact:not(.vkuiSelectTypography--selectType-accent),.vkuiSelectTypography--vkcom:not(.vkuiSelectTypography--selectType-accent){font-size:var(--vkui--font_text--font_size--compact);font-weight:var(--vkui--font_weight_accent3);line-height:var(--vkui--font_text--line_height--compact)}@media (max-height:414px),(pointer:fine) and (min-width:768px){.vkuiSelectTypography--sizeY-none:not(.vkuiSelectTypography--selectType-accent){font-size:var(--vkui--font_text--font_size--compact);font-weight:var(--vkui--font_weight_accent3);line-height:var(--vkui--font_text--line_height--compact)}}

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

@@ -1,8 +1,8 @@
-import * as React from "react";
-import { FormFieldProps } from "../FormField/FormField";
-import { HasAlign, HasRootRef } from "../../types";
-import { SelectType } from "../Select/Select";
-export interface SelectMimicryProps extends React.HTMLAttributes<HTMLElement>, HasAlign, HasRootRef<HTMLElement>, Pick<FormFieldProps, "before" | "after" | "status"> {
+import * as React from 'react';
+import { FormFieldProps } from '../FormField/FormField';
+import { HasAlign, HasRootRef } from '../../types';
+import { SelectType } from '../Select/Select';
+export interface SelectMimicryProps extends React.HTMLAttributes<HTMLElement>, HasAlign, HasRootRef<HTMLElement>, Pick<FormFieldProps, 'before' | 'after' | 'status'> {
     multiline?: boolean;
     disabled?: boolean;
     selectType?: SelectType;

package/dist/cssm/components/SelectMimicry/SelectMimicry.js

@@ -1,17 +1,17 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["tabIndex", "placeholder", "children", "align", "getRootRef", "multiline", "disabled", "onClick", "before", "after", "selectType", "status", "className"];
-import * as React from "react";
-import { classNamesString } from "../../lib/classNames";
-import { DropdownIcon } from "../DropdownIcon/DropdownIcon";
-import { FormField } from "../FormField/FormField";
-import { usePlatform } from "../../hooks/usePlatform";
-import { getPlatformClassName } from "../../helpers/getPlatformClassName";
-import { getFormFieldModeFromSelectType } from "../../lib/select";
-import { SelectTypography } from "../Select/Select";
-import { useAdaptivity } from "../../hooks/useAdaptivity";
-import { getSizeXClassName } from "../../helpers/getSizeXClassName";
-import { getSizeYClassName } from "../../helpers/getSizeYClassName";
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { DropdownIcon } from '../DropdownIcon/DropdownIcon';
+import { FormField } from '../FormField/FormField';
+import { usePlatform } from '../../hooks/usePlatform';
+import { getPlatformClassName } from '../../helpers/getPlatformClassName';
+import { getFormFieldModeFromSelectType } from '../../lib/select';
+import { SelectTypography } from '../Select/Select';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { getSizeXClassName } from '../../helpers/getSizeXClassName';
+import { getSizeYClassName } from '../../helpers/getSizeYClassName';
 import "../Select/Select.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/SelectMimicry
@@ -30,7 +30,7 @@ export var SelectMimicry = function SelectMimicry(_ref) {
     _ref$after = _ref.after,
     after = _ref$after === void 0 ? /*#__PURE__*/React.createElement(DropdownIcon, null) : _ref$after,
     _ref$selectType = _ref.selectType,
-    selectType = _ref$selectType === void 0 ? "default" : _ref$selectType,
+    selectType = _ref$selectType === void 0 ? 'default' : _ref$selectType,
     status = _ref.status,
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded);
@@ -41,7 +41,7 @@ export var SelectMimicry = function SelectMimicry(_ref) {
   var title = children || placeholder;
   return /*#__PURE__*/React.createElement(FormField, _extends({}, restProps, {
     tabIndex: disabled ? undefined : tabIndex,
-    className: classNamesString("vkuiSelect", getPlatformClassName("vkuiSelect", platform), getSizeXClassName("vkuiSelect", sizeX), getSizeYClassName("vkuiSelect", sizeY), multiline && "vkuiSelect--multiline", align && styles["Select--align-".concat(align)], before && "vkuiSelect--hasBefore", after && "vkuiSelect--hasAfter", className),
+    className: classNames("vkuiSelect", getPlatformClassName("vkuiSelect", platform), getSizeXClassName("vkuiSelect", sizeX), getSizeYClassName("vkuiSelect", sizeY), multiline && "vkuiSelect--multiline", align && styles["Select--align-".concat(align)], before && "vkuiSelect--hasBefore", after && "vkuiSelect--hasAfter", className),
     getRootRef: getRootRef,
     onClick: disabled ? undefined : onClick,
     disabled: disabled,

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

@@ -1 +1 @@
-{"version":3,"file":"SelectMimicry.js","names":["React","classNamesString","DropdownIcon","FormField","usePlatform","getPlatformClassName","getFormFieldModeFromSelectType","SelectTypography","useAdaptivity","getSizeXClassName","getSizeYClassName","SelectMimicry","tabIndex","placeholder","children","align","getRootRef","multiline","disabled","onClick","before","after","selectType","status","className","restProps","platform","sizeX","sizeY","title","undefined","styles"],"sources":["../../../../src/components/SelectMimicry/SelectMimicry.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { DropdownIcon } from \"../DropdownIcon/DropdownIcon\";\nimport { FormField, FormFieldProps } from \"../FormField/FormField\";\nimport { HasAlign, HasRootRef } from \"../../types\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { getPlatformClassName } from \"../../helpers/getPlatformClassName\";\nimport { getFormFieldModeFromSelectType } from \"../../lib/select\";\nimport { SelectType, SelectTypography } from \"../Select/Select\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { getSizeXClassName } from \"../../helpers/getSizeXClassName\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport styles from \"../Select/Select.module.css\";\n\nexport interface SelectMimicryProps\n  extends React.HTMLAttributes<HTMLElement>,\n    HasAlign,\n    HasRootRef<HTMLElement>,\n    Pick<FormFieldProps, \"before\" | \"after\" | \"status\"> {\n  multiline?: boolean;\n  disabled?: boolean;\n  selectType?: SelectType;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SelectMimicry\n */\nexport const SelectMimicry = ({\n  tabIndex = 0,\n  placeholder,\n  children,\n  align,\n  getRootRef,\n  multiline,\n  disabled,\n  onClick,\n  before,\n  after = <DropdownIcon />,\n  selectType = \"default\",\n  status,\n  className,\n  ...restProps\n}: SelectMimicryProps) => {\n  const platform = usePlatform();\n  const { sizeX, sizeY } = useAdaptivity();\n  const title = children || placeholder;\n\n  return (\n    <FormField\n      {...restProps}\n      tabIndex={disabled ? undefined : tabIndex}\n      className={classNamesString(\n        styles[\"Select\"],\n        getPlatformClassName(styles[\"Select\"], platform),\n        getSizeXClassName(styles[\"Select\"], sizeX),\n        getSizeYClassName(styles[\"Select\"], sizeY),\n        multiline && styles[\"Select--multiline\"],\n        align && styles[`Select--align-${align}`],\n        before && styles[\"Select--hasBefore\"],\n        after && styles[\"Select--hasAfter\"],\n        className\n      )}\n      getRootRef={getRootRef}\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled}\n      before={before}\n      after={after}\n      mode={getFormFieldModeFromSelectType(selectType)}\n      status={status}\n    >\n      <div className={styles[\"Select__container\"]}>\n        <SelectTypography\n          selectType={selectType}\n          className={styles[\"Select__title\"]}\n        >\n          {title}\n        </SelectTypography>\n      </div>\n    </FormField>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,YAAY,QAAQ,8BAA8B;AAC3D,SAASC,SAAS,QAAwB,wBAAwB;AAElE,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,oBAAoB,QAAQ,oCAAoC;AACzE,SAASC,8BAA8B,QAAQ,kBAAkB;AACjE,SAAqBC,gBAAgB,QAAQ,kBAAkB;AAC/D,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,iBAAiB,QAAQ,iCAAiC;AACnE,SAASC,iBAAiB,QAAQ,iCAAiC;AAAC;AAapE;AACA;AACA;AACA,OAAO,IAAMC,aAAa,GAAG,SAAhBA,aAAa,OAeA;EAAA,yBAdxBC,QAAQ;IAARA,QAAQ,8BAAG,CAAC;IACZC,WAAW,QAAXA,WAAW;IACXC,QAAQ,QAARA,QAAQ;IACRC,KAAK,QAALA,KAAK;IACLC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPC,MAAM,QAANA,MAAM;IAAA,kBACNC,KAAK;IAALA,KAAK,wCAAG,oBAAC,YAAY,OAAG;IAAA,uBACxBC,UAAU;IAAVA,UAAU,gCAAG,SAAS;IACtBC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGtB,WAAW,EAAE;EAC9B,qBAAyBI,aAAa,EAAE;IAAhCmB,KAAK,kBAALA,KAAK;IAAEC,KAAK,kBAALA,KAAK;EACpB,IAAMC,KAAK,GAAGf,QAAQ,IAAID,WAAW;EAErC,oBACE,oBAAC,SAAS,eACJY,SAAS;IACb,QAAQ,EAAEP,QAAQ,GAAGY,SAAS,GAAGlB,QAAS;IAC1C,SAAS,EAAEX,gBAAgB,eAEzBI,oBAAoB,eAAmBqB,QAAQ,CAAC,EAChDjB,iBAAiB,eAAmBkB,KAAK,CAAC,EAC1CjB,iBAAiB,eAAmBkB,KAAK,CAAC,EAC1CX,SAAS,2BAA+B,EACxCF,KAAK,IAAIgB,MAAM,yBAAkBhB,KAAK,EAAG,EACzCK,MAAM,2BAA+B,EACrCC,KAAK,0BAA8B,EACnCG,SAAS,CACT;IACF,UAAU,EAAER,UAAW;IACvB,OAAO,EAAEE,QAAQ,GAAGY,SAAS,GAAGX,OAAQ;IACxC,QAAQ,EAAED,QAAS;IACnB,MAAM,EAAEE,MAAO;IACf,KAAK,EAAEC,KAAM;IACb,IAAI,EAAEf,8BAA8B,CAACgB,UAAU,CAAE;IACjD,MAAM,EAAEC;EAAO,iBAEf;IAAK,SAAS;EAA8B,gBAC1C,oBAAC,gBAAgB;IACf,UAAU,EAAED,UAAW;IACvB,SAAS;EAA0B,GAElCO,KAAK,CACW,CACf,CACI;AAEhB,CAAC;AAAC;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"SelectMimicry.js","names":["React","classNames","DropdownIcon","FormField","usePlatform","getPlatformClassName","getFormFieldModeFromSelectType","SelectTypography","useAdaptivity","getSizeXClassName","getSizeYClassName","SelectMimicry","tabIndex","placeholder","children","align","getRootRef","multiline","disabled","onClick","before","after","selectType","status","className","restProps","platform","sizeX","sizeY","title","undefined","styles"],"sources":["../../../../src/components/SelectMimicry/SelectMimicry.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { HasAlign, HasRootRef } from '../../types';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getPlatformClassName } from '../../helpers/getPlatformClassName';\nimport { getFormFieldModeFromSelectType } from '../../lib/select';\nimport { SelectType, SelectTypography } from '../Select/Select';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { getSizeXClassName } from '../../helpers/getSizeXClassName';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport styles from '../Select/Select.module.css';\n\nexport interface SelectMimicryProps\n  extends React.HTMLAttributes<HTMLElement>,\n    HasAlign,\n    HasRootRef<HTMLElement>,\n    Pick<FormFieldProps, 'before' | 'after' | 'status'> {\n  multiline?: boolean;\n  disabled?: boolean;\n  selectType?: SelectType;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SelectMimicry\n */\nexport const SelectMimicry = ({\n  tabIndex = 0,\n  placeholder,\n  children,\n  align,\n  getRootRef,\n  multiline,\n  disabled,\n  onClick,\n  before,\n  after = <DropdownIcon />,\n  selectType = 'default',\n  status,\n  className,\n  ...restProps\n}: SelectMimicryProps) => {\n  const platform = usePlatform();\n  const { sizeX, sizeY } = useAdaptivity();\n  const title = children || placeholder;\n\n  return (\n    <FormField\n      {...restProps}\n      tabIndex={disabled ? undefined : tabIndex}\n      className={classNames(\n        styles['Select'],\n        getPlatformClassName(styles['Select'], platform),\n        getSizeXClassName(styles['Select'], sizeX),\n        getSizeYClassName(styles['Select'], sizeY),\n        multiline && styles['Select--multiline'],\n        align && styles[`Select--align-${align}`],\n        before && styles['Select--hasBefore'],\n        after && styles['Select--hasAfter'],\n        className,\n      )}\n      getRootRef={getRootRef}\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled}\n      before={before}\n      after={after}\n      mode={getFormFieldModeFromSelectType(selectType)}\n      status={status}\n    >\n      <div className={styles['Select__container']}>\n        <SelectTypography selectType={selectType} className={styles['Select__title']}>\n          {title}\n        </SelectTypography>\n      </div>\n    </FormField>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,YAAY,QAAQ,8BAA8B;AAC3D,SAASC,SAAS,QAAwB,wBAAwB;AAElE,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,oBAAoB,QAAQ,oCAAoC;AACzE,SAASC,8BAA8B,QAAQ,kBAAkB;AACjE,SAAqBC,gBAAgB,QAAQ,kBAAkB;AAC/D,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,iBAAiB,QAAQ,iCAAiC;AACnE,SAASC,iBAAiB,QAAQ,iCAAiC;AAAC;AAapE;AACA;AACA;AACA,OAAO,IAAMC,aAAa,GAAG,SAAhBA,aAAa,OAeA;EAAA,yBAdxBC,QAAQ;IAARA,QAAQ,8BAAG,CAAC;IACZC,WAAW,QAAXA,WAAW;IACXC,QAAQ,QAARA,QAAQ;IACRC,KAAK,QAALA,KAAK;IACLC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPC,MAAM,QAANA,MAAM;IAAA,kBACNC,KAAK;IAALA,KAAK,wCAAG,oBAAC,YAAY,OAAG;IAAA,uBACxBC,UAAU;IAAVA,UAAU,gCAAG,SAAS;IACtBC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGtB,WAAW,EAAE;EAC9B,qBAAyBI,aAAa,EAAE;IAAhCmB,KAAK,kBAALA,KAAK;IAAEC,KAAK,kBAALA,KAAK;EACpB,IAAMC,KAAK,GAAGf,QAAQ,IAAID,WAAW;EAErC,oBACE,oBAAC,SAAS,eACJY,SAAS;IACb,QAAQ,EAAEP,QAAQ,GAAGY,SAAS,GAAGlB,QAAS;IAC1C,SAAS,EAAEX,UAAU,eAEnBI,oBAAoB,eAAmBqB,QAAQ,CAAC,EAChDjB,iBAAiB,eAAmBkB,KAAK,CAAC,EAC1CjB,iBAAiB,eAAmBkB,KAAK,CAAC,EAC1CX,SAAS,2BAA+B,EACxCF,KAAK,IAAIgB,MAAM,yBAAkBhB,KAAK,EAAG,EACzCK,MAAM,2BAA+B,EACrCC,KAAK,0BAA8B,EACnCG,SAAS,CACT;IACF,UAAU,EAAER,UAAW;IACvB,OAAO,EAAEE,QAAQ,GAAGY,SAAS,GAAGX,OAAQ;IACxC,QAAQ,EAAED,QAAS;IACnB,MAAM,EAAEE,MAAO;IACf,KAAK,EAAEC,KAAM;IACb,IAAI,EAAEf,8BAA8B,CAACgB,UAAU,CAAE;IACjD,MAAM,EAAEC;EAAO,iBAEf;IAAK,SAAS;EAA8B,gBAC1C,oBAAC,gBAAgB;IAAC,UAAU,EAAED,UAAW;IAAC,SAAS;EAA0B,GAC1EO,KAAK,CACW,CACf,CACI;AAEhB,CAAC;AAAC;EAAA;EAAA;EAAA;AAAA"}