@vkontakte/vkui 7.1.3 → 7.2.1

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Search/Search.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon16Clear, Icon16SearchOutline, Icon24Cancel } from '@vkontakte/icons';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { useBooleanState } from '../../hooks/useBooleanState';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useNativeFormResetListener } from '../../hooks/useNativeFormResetListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { touchEnabled } from '../../lib/touch';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HasRef, HasRootRef } from '../../types';\nimport { Button } from '../Button/Button';\nimport { IconButton, type IconButtonProps } from '../IconButton/IconButton';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Search.module.css';\n\nexport type RenderIconButtonFn = (\n  icon: React.ReactNode,\n  props?: Partial<IconButtonProps>,\n) => React.ReactNode;\n\nexport interface SearchProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLInputElement> {\n  /**\n   * iOS only. Текст кнопки \"отмена\", которая чистит текстовое поле и убирает фокус.\n   */\n  after?: React.ReactNode;\n  before?: React.ReactNode;\n  icon?: React.ReactNode | ((renderFn: RenderIconButtonFn) => React.ReactNode);\n  onIconClick?: React.PointerEventHandler<HTMLElement>;\n  defaultValue?: string;\n  iconLabel?: string;\n  clearLabel?: string;\n  /**\n   * Удаляет отступы у компонента\n   */\n  noPadding?: boolean;\n  /**\n   * Текст для кнопки Найти\n   */\n  findButtonText?: string;\n  /**\n   * Коллбэк для кнопки Найти\n   */\n  onFindButtonClick?: React.MouseEventHandler<HTMLElement>;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Search\n */\nexport const Search = ({\n  id: idProp,\n  before = <Icon16SearchOutline />,\n  className,\n  placeholder = 'Поиск',\n  after = 'Отмена',\n  getRef,\n  icon: iconProp,\n  onIconClick,\n  style,\n  autoComplete = 'off',\n  onChange,\n  iconLabel,\n  clearLabel = 'Очистить',\n  noPadding,\n  getRootRef,\n  findButtonText = 'Найти',\n  onFindButtonClick,\n  ...inputProps\n}: SearchProps): React.ReactNode => {\n  const inputRef = useExternRef(getRef);\n  const {\n    value: isFocused,\n    setTrue: setFocusedTrue,\n    setFalse: setFocusedFalse,\n  } = useBooleanState(false);\n  const generatedId = React.useId();\n  const inputId = idProp ? idProp : `search-${generatedId}`;\n\n  const [hasValue, setHasValue] = React.useState<boolean>(() =>\n    Boolean(inputProps.value || inputProps.defaultValue),\n  );\n  const checkHasValue: React.ChangeEventHandler<HTMLInputElement> = (e) =>\n    setHasValue(Boolean(e.currentTarget.value));\n\n  const { sizeY = 'none' } = useAdaptivity();\n  const { sizeY: adaptiveSizeY } = useAdaptivityConditionalRender();\n  const platform = usePlatform();\n\n  const hasAfter = platform === 'ios' && hasReactNode(after);\n\n  const onFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocusedTrue();\n    inputProps.onFocus && inputProps.onFocus(e);\n  };\n\n  const onBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocusedFalse();\n    inputProps.onBlur && inputProps.onBlur(e);\n  };\n\n  const onCancel = React.useCallback(() => {\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n      HTMLInputElement.prototype,\n      'value',\n    )?.set;\n    nativeInputValueSetter?.call(inputRef.current, '');\n\n    const ev2 = new Event('input', { bubbles: true });\n    inputRef.current?.dispatchEvent(ev2);\n  }, [inputRef]);\n\n  const onIconClickStart: React.PointerEventHandler<HTMLElement> = React.useCallback(\n    (e) => onIconClick?.(e),\n    [onIconClick],\n  );\n\n  const onIconCancelClickStart: React.PointerEventHandler<HTMLElement> = React.useCallback(\n    (e) => {\n      e.preventDefault();\n      inputRef.current?.focus();\n      if (touchEnabled()) {\n        onCancel();\n      }\n    },\n    [inputRef, onCancel],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (inputProps.value !== undefined) {\n      setHasValue(Boolean(inputProps.value));\n    }\n  }, [inputProps.value]);\n\n  useNativeFormResetListener(inputRef, () => {\n    setHasValue(Boolean(inputProps.defaultValue));\n  });\n\n  const renderIconButton: RenderIconButtonFn = (icon, props = {}) => (\n    <IconButton\n      hoverMode=\"opacity\"\n      onPointerDown={onIconClickStart}\n      className={styles.icon}\n      onFocus={setFocusedTrue}\n      onBlur={setFocusedFalse}\n      onClick={noop}\n      {...props}\n    >\n      <VisuallyHidden>{iconLabel}</VisuallyHidden>\n      {icon}\n    </IconButton>\n  );\n\n  return (\n    <div\n      className={classNames(\n        'vkuiInternalSearch',\n        styles.host,\n        sizeY === 'none' && styles.sizeYNone,\n        sizeY === 'compact' && styles.sizeYCompact,\n        isFocused && styles.focused,\n        hasValue && styles.hasValue,\n        hasAfter && styles.hasAfter,\n        iconProp && styles.hasIcon,\n        inputProps.disabled && styles.disabled,\n        !noPadding && styles.withPadding,\n        className,\n      )}\n      ref={getRootRef}\n      style={style}\n    >\n      <div className={styles.field}>\n        <label htmlFor={inputId} className={styles.label}>\n          {placeholder}\n        </label>\n        <div className={styles.input}>\n          {before}\n          <Headline\n            Component=\"input\"\n            type=\"search\"\n            level=\"1\"\n            weight=\"3\"\n            {...inputProps}\n            id={inputId}\n            placeholder={placeholder}\n            autoComplete={autoComplete}\n            getRootRef={inputRef}\n            className={styles.nativeInput}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            onChange={callMultiple(onChange, checkHasValue)}\n          />\n        </div>\n        <div className={styles.controls}>\n          {iconProp &&\n            (typeof iconProp === 'function'\n              ? iconProp(renderIconButton)\n              : renderIconButton(iconProp))}\n          <IconButton\n            hoverMode=\"opacity\"\n            onPointerDown={onIconCancelClickStart}\n            onClick={onCancel}\n            className={styles.icon}\n            tabIndex={hasValue ? undefined : -1}\n            disabled={inputProps.disabled}\n          >\n            <VisuallyHidden>{clearLabel}</VisuallyHidden>\n            {platform === 'ios' ? <Icon16Clear /> : <Icon24Cancel />}\n          </IconButton>\n          {adaptiveSizeY.compact && onFindButtonClick && (\n            <Button\n              mode=\"primary\"\n              size=\"m\"\n              className={classNames(styles.findButton, adaptiveSizeY.compact.className)}\n              focusVisibleMode=\"inside\"\n              onClick={onFindButtonClick}\n              tabIndex={hasValue ? undefined : -1}\n            >\n              {findButtonText}\n            </Button>\n          )}\n        </div>\n      </div>\n      {hasAfter && (\n        <div className={styles.after}>\n          <Button\n            mode=\"tertiary\"\n            size=\"m\"\n            focusVisibleMode=\"inside\"\n            hoverMode=\"opacity\"\n            activeMode=\"opacity\"\n            onClick={onCancel}\n            onFocus={setFocusedTrue}\n            onBlur={setFocusedFalse}\n          >\n            <span className={styles.afterTextClip}>{after}</span>\n          </Button>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["React","Icon16Clear","Icon16SearchOutline","Icon24Cancel","classNames","hasReactNode","noop","useAdaptivity","useAdaptivityConditionalRender","useBooleanState","useExternRef","useNativeFormResetListener","usePlatform","callMultiple","touchEnabled","useIsomorphicLayoutEffect","Button","IconButton","Headline","VisuallyHidden","styles","Search","id","idProp","before","className","placeholder","after","getRef","icon","iconProp","onIconClick","style","autoComplete","onChange","iconLabel","clearLabel","noPadding","getRootRef","findButtonText","onFindButtonClick","inputProps","inputRef","value","isFocused","setTrue","setFocusedTrue","setFalse","setFocusedFalse","generatedId","useId","inputId","hasValue","setHasValue","useState","Boolean","defaultValue","checkHasValue","e","currentTarget","sizeY","adaptiveSizeY","platform","hasAfter","onFocus","onBlur","onCancel","useCallback","nativeInputValueSetter","Object","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","onIconCancelClickStart","preventDefault","focus","undefined","renderIconButton","props","hoverMode","onPointerDown","onClick","div","host","sizeYNone","sizeYCompact","focused","hasIcon","disabled","withPadding","ref","field","label","htmlFor","input","Component","type","level","weight","nativeInput","controls","tabIndex","compact","mode","size","findButton","focusVisibleMode","activeMode","span","afterTextClip"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,WAAW,EAAEC,mBAAmB,EAAEC,YAAY,QAAQ,mBAAmB;AAClF,SAASC,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,kBAAkB;AACjE,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,8BAA8B,QAAQ,sDAA6C;AAC5F,SAASC,eAAe,QAAQ,iCAA8B;AAC9D,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,0BAA0B,QAAQ,4CAAyC;AACpF,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,YAAY,QAAQ,4BAAyB;AACtD,SAASC,YAAY,QAAQ,2BAAkB;AAC/C,SAASC,yBAAyB,QAAQ,yCAAsC;AAEhF,SAASC,MAAM,QAAQ,sBAAmB;AAC1C,SAASC,UAAU,QAA8B,8BAA2B;AAC5E,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,cAAc,QAAQ,sCAAmC;AAClE,OAAOC,YAAY,sBAAsB;AAmCzC;;CAEC,GACD,OAAO,MAAMC,SAAS,CAAC,EACrBC,IAAIC,MAAM,EACVC,uBAAS,KAACtB,wBAAsB,EAChCuB,SAAS,EACTC,cAAc,OAAO,EACrBC,QAAQ,QAAQ,EAChBC,MAAM,EACNC,MAAMC,QAAQ,EACdC,WAAW,EACXC,KAAK,EACLC,eAAe,KAAK,EACpBC,QAAQ,EACRC,SAAS,EACTC,aAAa,UAAU,EACvBC,SAAS,EACTC,UAAU,EACVC,iBAAiB,OAAO,EACxBC,iBAAiB,EACjB,GAAGC,YACS;IACZ,MAAMC,WAAWhC,aAAakB;IAC9B,MAAM,EACJe,OAAOC,SAAS,EAChBC,SAASC,cAAc,EACvBC,UAAUC,eAAe,EAC1B,GAAGvC,gBAAgB;IACpB,MAAMwC,cAAcjD,MAAMkD,KAAK;IAC/B,MAAMC,UAAU5B,SAASA,SAAS,CAAC,OAAO,EAAE0B,aAAa;IAEzD,MAAM,CAACG,UAAUC,YAAY,GAAGrD,MAAMsD,QAAQ,CAAU,IACtDC,QAAQd,WAAWE,KAAK,IAAIF,WAAWe,YAAY;IAErD,MAAMC,gBAA4D,CAACC,IACjEL,YAAYE,QAAQG,EAAEC,aAAa,CAAChB,KAAK;IAE3C,MAAM,EAAEiB,QAAQ,MAAM,EAAE,GAAGrD;IAC3B,MAAM,EAAEqD,OAAOC,aAAa,EAAE,GAAGrD;IACjC,MAAMsD,WAAWlD;IAEjB,MAAMmD,WAAWD,aAAa,SAASzD,aAAasB;IAEpD,MAAMqC,UAAU,CAACN;QACfZ;QACAL,WAAWuB,OAAO,IAAIvB,WAAWuB,OAAO,CAACN;IAC3C;IAEA,MAAMO,SAAS,CAACP;QACdV;QACAP,WAAWwB,MAAM,IAAIxB,WAAWwB,MAAM,CAACP;IACzC;IAEA,MAAMQ,WAAWlE,MAAMmE,WAAW,CAAC;QACjC,6DAA6D;QAC7D,MAAMC,yBAAyBC,OAAOC,wBAAwB,CAC5DC,iBAAiBC,SAAS,EAC1B,UACCC;QACHL,wBAAwBM,KAAKhC,SAASiC,OAAO,EAAE;QAE/C,MAAMC,MAAM,IAAIC,MAAM,SAAS;YAAEC,SAAS;QAAK;QAC/CpC,SAASiC,OAAO,EAAEI,cAAcH;IAClC,GAAG;QAAClC;KAAS;IAEb,MAAMsC,mBAA2DhF,MAAMmE,WAAW,CAChF,CAACT,IAAM3B,cAAc2B,IACrB;QAAC3B;KAAY;IAGf,MAAMkD,yBAAiEjF,MAAMmE,WAAW,CACtF,CAACT;QACCA,EAAEwB,cAAc;QAChBxC,SAASiC,OAAO,EAAEQ;QAClB,IAAIrE,gBAAgB;YAClBoD;QACF;IACF,GACA;QAACxB;QAAUwB;KAAS;IAGtBnD,0BAA0B;QACxB,IAAI0B,WAAWE,KAAK,KAAKyC,WAAW;YAClC/B,YAAYE,QAAQd,WAAWE,KAAK;QACtC;IACF,GAAG;QAACF,WAAWE,KAAK;KAAC;IAErBhC,2BAA2B+B,UAAU;QACnCW,YAAYE,QAAQd,WAAWe,YAAY;IAC7C;IAEA,MAAM6B,mBAAuC,CAACxD,MAAMyD,QAAQ,CAAC,CAAC,iBAC5D,MAACrE;YACCsE,WAAU;YACVC,eAAeR;YACfvD,WAAWL,OAAOS,IAAI;YACtBmC,SAASlB;YACTmB,QAAQjB;YACRyC,SAASnF;YACR,GAAGgF,KAAK;;8BAET,KAACnE;8BAAgBgB;;gBAChBN;;;IAIL,qBACE,MAAC6D;QACCjE,WAAWrB,WACT,sBACAgB,OAAOuE,IAAI,EACX/B,UAAU,UAAUxC,OAAOwE,SAAS,EACpChC,UAAU,aAAaxC,OAAOyE,YAAY,EAC1CjD,aAAaxB,OAAO0E,OAAO,EAC3B1C,YAAYhC,OAAOgC,QAAQ,EAC3BW,YAAY3C,OAAO2C,QAAQ,EAC3BjC,YAAYV,OAAO2E,OAAO,EAC1BtD,WAAWuD,QAAQ,IAAI5E,OAAO4E,QAAQ,EACtC,CAAC3D,aAAajB,OAAO6E,WAAW,EAChCxE;QAEFyE,KAAK5D;QACLN,OAAOA;;0BAEP,MAAC0D;gBAAIjE,WAAWL,OAAO+E,KAAK;;kCAC1B,KAACC;wBAAMC,SAASlD;wBAAS1B,WAAWL,OAAOgF,KAAK;kCAC7C1E;;kCAEH,MAACgE;wBAAIjE,WAAWL,OAAOkF,KAAK;;4BACzB9E;0CACD,KAACN;gCACCqF,WAAU;gCACVC,MAAK;gCACLC,OAAM;gCACNC,QAAO;gCACN,GAAGjE,UAAU;gCACdnB,IAAI6B;gCACJzB,aAAaA;gCACbO,cAAcA;gCACdK,YAAYI;gCACZjB,WAAWL,OAAOuF,WAAW;gCAC7B3C,SAASA;gCACTC,QAAQA;gCACR/B,UAAUrB,aAAaqB,UAAUuB;;;;kCAGrC,MAACiC;wBAAIjE,WAAWL,OAAOwF,QAAQ;;4BAC5B9E,YACE,CAAA,OAAOA,aAAa,aACjBA,SAASuD,oBACTA,iBAAiBvD,SAAQ;0CAC/B,MAACb;gCACCsE,WAAU;gCACVC,eAAeP;gCACfQ,SAASvB;gCACTzC,WAAWL,OAAOS,IAAI;gCACtBgF,UAAUzD,WAAWgC,YAAY,CAAC;gCAClCY,UAAUvD,WAAWuD,QAAQ;;kDAE7B,KAAC7E;kDAAgBiB;;oCAChB0B,aAAa,sBAAQ,KAAC7D,iCAAiB,KAACE;;;4BAE1C0D,cAAciD,OAAO,IAAItE,mCACxB,KAACxB;gCACC+F,MAAK;gCACLC,MAAK;gCACLvF,WAAWrB,WAAWgB,OAAO6F,UAAU,EAAEpD,cAAciD,OAAO,CAACrF,SAAS;gCACxEyF,kBAAiB;gCACjBzB,SAASjD;gCACTqE,UAAUzD,WAAWgC,YAAY,CAAC;0CAEjC7C;;;;;;YAKRwB,0BACC,KAAC2B;gBAAIjE,WAAWL,OAAOO,KAAK;0BAC1B,cAAA,KAACX;oBACC+F,MAAK;oBACLC,MAAK;oBACLE,kBAAiB;oBACjB3B,WAAU;oBACV4B,YAAW;oBACX1B,SAASvB;oBACTF,SAASlB;oBACTmB,QAAQjB;8BAER,cAAA,KAACoE;wBAAK3F,WAAWL,OAAOiG,aAAa;kCAAG1F;;;;;;AAMpD,EAAE"}
+{"version":3,"sources":["../../../../src/components/Search/Search.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon16Clear, Icon16SearchOutline, Icon24Cancel } from '@vkontakte/icons';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { useBooleanState } from '../../hooks/useBooleanState';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useNativeFormResetListener } from '../../hooks/useNativeFormResetListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { touchEnabled } from '../../lib/touch';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HasRef, HasRootRef } from '../../types';\nimport { Button } from '../Button/Button';\nimport { IconButton, type IconButtonProps } from '../IconButton/IconButton';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Search.module.css';\n\nexport type RenderIconButtonFn = (\n  icon: React.ReactNode,\n  props?: Partial<IconButtonProps>,\n) => React.ReactNode;\n\nexport interface SearchProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLInputElement> {\n  /**\n   * iOS only. Текст кнопки \"отмена\", которая чистит текстовое поле и убирает фокус.\n   */\n  after?: React.ReactNode;\n  before?: React.ReactNode;\n  icon?: React.ReactNode | ((renderFn: RenderIconButtonFn) => React.ReactNode);\n  onIconClick?: React.PointerEventHandler<HTMLElement>;\n  defaultValue?: string;\n  iconLabel?: string;\n  clearLabel?: string;\n  /**\n   * Передает атрибут `data-testid` для кнопки очистки\n   */\n  clearButtonTestId?: string;\n  /**\n   * Удаляет отступы у компонента\n   */\n  noPadding?: boolean;\n  /**\n   * Текст для кнопки Найти\n   */\n  findButtonText?: string;\n  /**\n   * Коллбэк для кнопки Найти\n   */\n  onFindButtonClick?: React.MouseEventHandler<HTMLElement>;\n  /**\n   * Передает атрибут `data-testid` для кнопки поиска\n   */\n  findButtonTestId?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Search\n */\nexport const Search = ({\n  id: idProp,\n  before = <Icon16SearchOutline />,\n  className,\n  placeholder = 'Поиск',\n  after = 'Отмена',\n  getRef,\n  icon: iconProp,\n  onIconClick,\n  style,\n  autoComplete = 'off',\n  onChange,\n  iconLabel,\n  clearLabel = 'Очистить',\n  clearButtonTestId,\n  noPadding,\n  getRootRef,\n  findButtonText = 'Найти',\n  findButtonTestId,\n  onFindButtonClick,\n  ...inputProps\n}: SearchProps): React.ReactNode => {\n  const direction = useConfigDirection();\n  const isRtl = direction === 'rtl';\n  const inputRef = useExternRef(getRef);\n  const {\n    value: isFocused,\n    setTrue: setFocusedTrue,\n    setFalse: setFocusedFalse,\n  } = useBooleanState(false);\n  const generatedId = React.useId();\n  const inputId = idProp ? idProp : `search-${generatedId}`;\n\n  const [hasValue, setHasValue] = React.useState<boolean>(() =>\n    Boolean(inputProps.value || inputProps.defaultValue),\n  );\n  const checkHasValue: React.ChangeEventHandler<HTMLInputElement> = (e) =>\n    setHasValue(Boolean(e.currentTarget.value));\n\n  const { sizeY = 'none' } = useAdaptivity();\n  const { sizeY: adaptiveSizeY } = useAdaptivityConditionalRender();\n  const platform = usePlatform();\n\n  const hasAfter = platform === 'ios' && hasReactNode(after);\n\n  const onFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocusedTrue();\n    inputProps.onFocus && inputProps.onFocus(e);\n  };\n\n  const onBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocusedFalse();\n    inputProps.onBlur && inputProps.onBlur(e);\n  };\n\n  const onCancel = React.useCallback(() => {\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n      HTMLInputElement.prototype,\n      'value',\n    )?.set;\n    nativeInputValueSetter?.call(inputRef.current, '');\n\n    const ev2 = new Event('input', { bubbles: true });\n    inputRef.current?.dispatchEvent(ev2);\n  }, [inputRef]);\n\n  const onIconClickStart: React.PointerEventHandler<HTMLElement> = React.useCallback(\n    (e) => onIconClick?.(e),\n    [onIconClick],\n  );\n\n  const onIconCancelClickStart: React.PointerEventHandler<HTMLElement> = React.useCallback(\n    (e) => {\n      e.preventDefault();\n      inputRef.current?.focus();\n      if (touchEnabled()) {\n        onCancel();\n      }\n    },\n    [inputRef, onCancel],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (inputProps.value !== undefined) {\n      setHasValue(Boolean(inputProps.value));\n    }\n  }, [inputProps.value]);\n\n  useNativeFormResetListener(inputRef, () => {\n    setHasValue(Boolean(inputProps.defaultValue));\n  });\n\n  const renderIconButton: RenderIconButtonFn = (icon, props = {}) => (\n    <IconButton\n      hoverMode=\"opacity\"\n      onPointerDown={onIconClickStart}\n      className={styles.icon}\n      onFocus={setFocusedTrue}\n      onBlur={setFocusedFalse}\n      onClick={noop}\n      {...props}\n    >\n      <VisuallyHidden>{iconLabel}</VisuallyHidden>\n      {icon}\n    </IconButton>\n  );\n\n  return (\n    <div\n      className={classNames(\n        'vkuiInternalSearch',\n        styles.host,\n        sizeY === 'none' && styles.sizeYNone,\n        sizeY === 'compact' && styles.sizeYCompact,\n        isFocused && styles.focused,\n        hasValue && styles.hasValue,\n        hasAfter && styles.hasAfter,\n        iconProp && styles.hasIcon,\n        inputProps.disabled && styles.disabled,\n        !noPadding && styles.withPadding,\n        isRtl && styles.rtl,\n        className,\n      )}\n      ref={getRootRef}\n      style={style}\n    >\n      <div className={styles.field}>\n        <label htmlFor={inputId} className={styles.label}>\n          {placeholder}\n        </label>\n        <div className={styles.input}>\n          {before}\n          <Headline\n            Component=\"input\"\n            type=\"search\"\n            level=\"1\"\n            weight=\"3\"\n            {...inputProps}\n            id={inputId}\n            placeholder={placeholder}\n            autoComplete={autoComplete}\n            getRootRef={inputRef}\n            className={styles.nativeInput}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            onChange={callMultiple(onChange, checkHasValue)}\n          />\n        </div>\n        <div className={styles.controls}>\n          {iconProp &&\n            (typeof iconProp === 'function'\n              ? iconProp(renderIconButton)\n              : renderIconButton(iconProp))}\n          <IconButton\n            hoverMode=\"opacity\"\n            onPointerDown={onIconCancelClickStart}\n            onClick={onCancel}\n            className={styles.icon}\n            tabIndex={hasValue ? undefined : -1}\n            disabled={inputProps.disabled}\n            data-testid={clearButtonTestId}\n          >\n            <VisuallyHidden>{clearLabel}</VisuallyHidden>\n            {platform === 'ios' ? <Icon16Clear /> : <Icon24Cancel />}\n          </IconButton>\n          {adaptiveSizeY.compact && onFindButtonClick && (\n            <Button\n              mode=\"primary\"\n              size=\"m\"\n              className={classNames(styles.findButton, adaptiveSizeY.compact.className)}\n              focusVisibleMode=\"inside\"\n              onClick={onFindButtonClick}\n              tabIndex={hasValue ? undefined : -1}\n              data-testid={findButtonTestId}\n            >\n              {findButtonText}\n            </Button>\n          )}\n        </div>\n      </div>\n      {hasAfter && (\n        <div className={styles.after}>\n          <Button\n            mode=\"tertiary\"\n            size=\"m\"\n            focusVisibleMode=\"inside\"\n            hoverMode=\"opacity\"\n            activeMode=\"opacity\"\n            onClick={onCancel}\n            onFocus={setFocusedTrue}\n            onBlur={setFocusedFalse}\n          >\n            <span className={styles.afterTextClip}>{after}</span>\n          </Button>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["React","Icon16Clear","Icon16SearchOutline","Icon24Cancel","classNames","hasReactNode","noop","useAdaptivity","useAdaptivityConditionalRender","useBooleanState","useConfigDirection","useExternRef","useNativeFormResetListener","usePlatform","callMultiple","touchEnabled","useIsomorphicLayoutEffect","Button","IconButton","Headline","VisuallyHidden","styles","Search","id","idProp","before","className","placeholder","after","getRef","icon","iconProp","onIconClick","style","autoComplete","onChange","iconLabel","clearLabel","clearButtonTestId","noPadding","getRootRef","findButtonText","findButtonTestId","onFindButtonClick","inputProps","direction","isRtl","inputRef","value","isFocused","setTrue","setFocusedTrue","setFalse","setFocusedFalse","generatedId","useId","inputId","hasValue","setHasValue","useState","Boolean","defaultValue","checkHasValue","e","currentTarget","sizeY","adaptiveSizeY","platform","hasAfter","onFocus","onBlur","onCancel","useCallback","nativeInputValueSetter","Object","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","onIconCancelClickStart","preventDefault","focus","undefined","renderIconButton","props","hoverMode","onPointerDown","onClick","div","host","sizeYNone","sizeYCompact","focused","hasIcon","disabled","withPadding","rtl","ref","field","label","htmlFor","input","Component","type","level","weight","nativeInput","controls","tabIndex","data-testid","compact","mode","size","findButton","focusVisibleMode","activeMode","span","afterTextClip"],"mappings":"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"}

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

@@ -5,6 +5,11 @@
   -webkit-tap-highlight-color: transparent;
 
   --vkui_internal--search_height: var(--vkui--size_search_height--regular);
+  --vkui_internal--search_shift_direction: 1;
+}
+
+.rtl {
+  --vkui_internal--search_shift_direction: -1;
 }
 
 .withPadding {
@@ -31,14 +36,14 @@
   display: flex;
   flex-grow: 2;
   flex-basis: 0%;
-  block-size: var(--vkui_internal--search_height);
-  background-color: var(--vkui--color_search_field_background);
-  border-radius: var(--vkui--size_border_radius--regular);
   /**
    * Костыль для PanelHeader. Необходимо для растягивания на всю ширину.
   */
   inline-size: 10000px;
+  block-size: var(--vkui_internal--search_height);
   overflow: hidden;
+  background-color: var(--vkui--color_search_field_background);
+  border-radius: var(--vkui--size_border_radius--regular);
 }
 
 .field:hover {
@@ -51,46 +56,46 @@
 
 .label {
   position: absolute;
-  cursor: text;
   inset: 0;
+  cursor: text;
   opacity: 0;
 }
 
 .input {
-  -webkit-padding-start: 12px;
-          padding-inline-start: 12px;
-  color: var(--vkui--color_icon_medium);
+  position: relative;
   display: flex;
-  justify-content: flex-start;
   align-items: center;
+  justify-content: flex-start;
   inline-size: calc(100% - 1px);
   block-size: 100%;
+  -webkit-padding-start: 12px;
+          padding-inline-start: 12px;
+  color: var(--vkui--color_icon_medium);
   border-radius: inherit;
-  position: relative;
 }
 
 .nativeInput {
   position: absolute;
   inset: 0;
-  block-size: 100%;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none; /* не используем textfield из-за бага в iOS 15.1 http://www.openradar.me/FB9744107 */
-  border: 0;
-  margin: 0;
-  padding: 0;
-  -webkit-padding-start: 36px;
-          padding-inline-start: 36px;
   box-sizing: border-box;
-  border-radius: inherit;
-  max-inline-size: 100%;
   flex-grow: 1;
-  min-inline-size: 0;
   inline-size: -webkit-fill-available;
   inline-size: -moz-available;
   inline-size: stretch; /* автопрефиксер добавит фолбеки https://caniuse.com/mdn-css_properties_width_stretch */
-  background-color: transparent;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  block-size: 100%;
+  padding: 0;
+  -webkit-padding-start: 36px;
+          padding-inline-start: 36px;
+  margin: 0;
   color: var(--vkui--color_text_primary);
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none; /* не используем textfield из-за бага в iOS 15.1 http://www.openradar.me/FB9744107 */
+  background-color: transparent;
+  border: 0;
+  border-radius: inherit;
 }
 
 .nativeInput::-webkit-search-decoration,
@@ -110,9 +115,9 @@
 }
 
 .disabled {
-  opacity: var(--vkui--opacity_disable_accessibility);
   pointer-events: none;
   cursor: default;
+  opacity: var(--vkui--opacity_disable_accessibility);
 }
 
 .nativeInput:disabled {
@@ -135,16 +140,23 @@
   align-items: center;
   justify-content: center;
   color: var(--vkui--color_icon_secondary);
-  transition: transform 0.3s var(--vkui--animation_easing_platform);
   /* Используем translate3d, чтобы поправить дергание при наведении в Safari */
-  transform: translate3d(100%, 0, 0);
+  transform: translate3d(calc(var(--vkui_internal--search_shift_direction) * 100%), 0, 0);
+  transition: transform 0.3s var(--vkui--animation_easing_platform);
 
   --vkui_internal--search_icon_size: calc(var(--vkui_internal--search_height) + 4px);
 }
 
 .hasIcon .controls {
   /* Исключаем параметр icon из расчёта, чтобы он оставался видимым */
-  transform: translate3d(calc(100% - var(--vkui_internal--search_icon_size)), 0, 0);
+  transform: translate3d(
+    calc(
+      var(--vkui_internal--search_shift_direction) *
+        calc(100% - var(--vkui_internal--search_icon_size))
+    ),
+    0,
+    0
+  );
 }
 
 .hasValue .controls {
@@ -152,10 +164,10 @@
 }
 
 .icon {
-  inline-size: var(--vkui_internal--search_icon_size);
   display: flex;
   align-items: center;
   justify-content: center;
+  inline-size: var(--vkui_internal--search_icon_size);
   block-size: 100%;
   border-radius: var(--vkui--size_border_radius--regular);
 }
@@ -175,8 +187,8 @@
   max-inline-size: -webkit-min-content;
   max-inline-size: -moz-min-content;
   max-inline-size: min-content;
-  transition: flex-grow 0.3s var(--vkui--animation_easing_platform);
   pointer-events: none;
+  transition: flex-grow 0.3s var(--vkui--animation_easing_platform);
 }
 
 .focused .after,
@@ -187,11 +199,11 @@
 
 .after::before,
 .after::after {
-  content: '';
-  flex-shrink: 0;
   display: block;
+  flex-shrink: 0;
   inline-size: 4px;
   block-size: 100%;
+  content: '';
 }
 
 .withPadding .after::after {
@@ -201,15 +213,15 @@
 
 .afterTextClip {
   display: block;
+  overflow: hidden;
   text-overflow: clip;
   white-space: nowrap;
-  overflow: hidden;
 }
 
 .findButton {
+  inline-size: initial;
   min-inline-size: initial;
   max-inline-size: initial;
-  inline-size: initial;
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */

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

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
 import { useAdaptivity } from "../../hooks/useAdaptivity.js";
+import { useConfigDirection } from "../../hooks/useConfigDirection.js";
 import { useCustomEnsuredControl } from "../../hooks/useEnsuredControl.js";
 import { useTabsNavigation } from "../../hooks/useTabsNavigation.js";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect.js";
@@ -19,13 +20,15 @@ const warn = warnOnce('SegmentedControl');
  * @see https://vkcom.github.io/VKUI/#/SegmentedControl
  */ export const SegmentedControl = ({ size = 'l', name, options, defaultValue = options[0]?.value, children, onChange: onChangeProp, value: valueProp, role = 'radiogroup', ...restProps })=>{
     const id = React.useId();
+    const direction = useConfigDirection();
+    const isRtl = direction === 'rtl';
     const [value, onChange] = useCustomEnsuredControl({
         onChange: onChangeProp,
         value: valueProp,
         defaultValue
     });
     const { sizeY = 'none' } = useAdaptivity();
-    const { tabsRef } = useTabsNavigation(role === 'tablist');
+    const { tabsRef } = useTabsNavigation(role === 'tablist', isRtl);
     const actualIndex = options.findIndex((option)=>option.value === value);
     useIsomorphicLayoutEffect(()=>{
         if (actualIndex === -1 && process.env.NODE_ENV === 'development') {
@@ -34,10 +37,13 @@ const warn = warnOnce('SegmentedControl');
     }, [
         actualIndex
     ]);
-    const translateX = `translateX(${100 * actualIndex}%)`;
+    const sliderStyle = {
+        '--vkui_internal--SegmentedControl_actual_index': String(actualIndex),
+        '--vkui_internal--SegmentedControl_options': String(options.length)
+    };
     return /*#__PURE__*/ _jsx(RootComponent, {
         ...restProps,
-        baseClassName: classNames(styles.host, sizeY !== 'compact' && sizeYClassNames[sizeY], size === 'l' && styles.sizeL),
+        baseClassName: classNames(styles.host, sizeY !== 'compact' && sizeYClassNames[sizeY], size === 'l' && styles.sizeL, isRtl && styles.rtl),
         children: /*#__PURE__*/ _jsxs("div", {
             role: role,
             ref: tabsRef,
@@ -46,10 +52,7 @@ const warn = warnOnce('SegmentedControl');
                 actualIndex > -1 && /*#__PURE__*/ _jsx("div", {
                     "aria-hidden": true,
                     className: styles.slider,
-                    style: {
-                        width: `${100 / options.length}%`,
-                        transform: translateX
-                    }
+                    style: sliderStyle
                 }),
                 options.map(({ label, before, ...optionProps })=>{
                     const selected = value === optionProps.value;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useTabsNavigation } from '../../hooks/useTabsNavigation';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport {\n  SegmentedControlOption,\n  type SegmentedControlOptionProps,\n} from './SegmentedControlOption/SegmentedControlOption';\nimport styles from './SegmentedControl.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  regular: styles.sizeYRegular,\n};\n\nexport type SegmentedControlValue = string | number | undefined;\n\nexport interface SegmentedControlOptionInterface\n  extends Omit<React.HTMLAttributes<HTMLElement>, 'label'> {\n  /**\n   * Вставляет элемент перед основным контентом.\n   * Рекомендуется использовать только иконки с размером 20\n   */\n  before?: React.ReactNode;\n  label: React.ReactNode;\n  value: SegmentedControlValue;\n}\n\nexport interface SegmentedControlProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'> {\n  options: SegmentedControlOptionInterface[];\n  size?: 'm' | 'l';\n  name?: string;\n  onChange?: (value: SegmentedControlValue) => void;\n  value?: SegmentedControlValue;\n  defaultValue?: SegmentedControlValue;\n}\n\nconst warn = warnOnce('SegmentedControl');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControl = ({\n  size = 'l',\n  name,\n  options,\n  defaultValue = options[0]?.value,\n  children,\n  onChange: onChangeProp,\n  value: valueProp,\n  role = 'radiogroup',\n  ...restProps\n}: SegmentedControlProps): React.ReactNode => {\n  const id = React.useId();\n\n  const [value, onChange] = useCustomEnsuredControl({\n    onChange: onChangeProp,\n    value: valueProp,\n    defaultValue,\n  });\n\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const { tabsRef } = useTabsNavigation(role === 'tablist');\n\n  const actualIndex = options.findIndex((option) => option.value === value);\n\n  useIsomorphicLayoutEffect(() => {\n    if (actualIndex === -1 && process.env.NODE_ENV === 'development') {\n      warn('defaultValue: такого значения нет среди опций!', 'error');\n    }\n  }, [actualIndex]);\n\n  const translateX = `translateX(${100 * actualIndex}%)`;\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        sizeY !== 'compact' && sizeYClassNames[sizeY],\n        size === 'l' && styles.sizeL,\n      )}\n    >\n      <div role={role} ref={tabsRef} className={styles.in}>\n        {actualIndex > -1 && (\n          <div\n            aria-hidden\n            className={styles.slider}\n            style={{\n              width: `${100 / options.length}%`,\n              transform: translateX,\n            }}\n          />\n        )}\n        {options.map(({ label, before, ...optionProps }) => {\n          const selected = value === optionProps.value;\n          const onSelect = () => onChange(optionProps.value);\n          const optionRootProps: SegmentedControlOptionProps['rootProps'] =\n            role === 'tablist'\n              ? {\n                  'role': 'tab',\n                  'aria-selected': selected,\n                  'onClick': onSelect,\n                  'tabIndex': optionProps.tabIndex ?? (selected ? 0 : -1),\n                  ...optionProps,\n                }\n              : undefined;\n\n          const optionInputProps: SegmentedControlOptionProps['inputProps'] =\n            role !== 'tablist'\n              ? {\n                  role: optionProps.role || (role === 'radiogroup' ? 'radio' : undefined),\n                  checked: selected,\n                  onChange: onSelect,\n                  name: name ?? id,\n                  ...optionProps,\n                }\n              : undefined;\n\n          return (\n            <SegmentedControlOption\n              key={`${optionProps.value}`}\n              before={before}\n              rootProps={optionRootProps}\n              inputProps={optionInputProps}\n            >\n              {label}\n            </SegmentedControlOption>\n          );\n        })}\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useCustomEnsuredControl","useTabsNavigation","useIsomorphicLayoutEffect","warnOnce","RootComponent","SegmentedControlOption","styles","sizeYClassNames","none","sizeYNone","regular","sizeYRegular","warn","SegmentedControl","size","name","options","defaultValue","value","children","onChange","onChangeProp","valueProp","role","restProps","id","useId","sizeY","tabsRef","actualIndex","findIndex","option","process","env","NODE_ENV","translateX","baseClassName","host","sizeL","div","ref","className","in","aria-hidden","slider","style","width","length","transform","map","label","before","optionProps","selected","onSelect","optionRootProps","tabIndex","undefined","optionInputProps","checked","rootProps","inputProps"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,uBAAuB,QAAQ,mCAAgC;AACxE,SAASC,iBAAiB,QAAQ,mCAAgC;AAClE,SAASC,yBAAyB,QAAQ,yCAAsC;AAChF,SAASC,QAAQ,QAAQ,wBAAqB;AAE9C,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SACEC,sBAAsB,QAEjB,qDAAkD;AACzD,OAAOC,YAAY,gCAAgC;AAEnD,MAAMC,kBAAkB;IACtBC,MAAMF,OAAOG,SAAS;IACtBC,SAASJ,OAAOK,YAAY;AAC9B;AAyBA,MAAMC,OAAOT,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMU,mBAAmB,CAAC,EAC/BC,OAAO,GAAG,EACVC,IAAI,EACJC,OAAO,EACPC,eAAeD,OAAO,CAAC,EAAE,EAAEE,KAAK,EAChCC,QAAQ,EACRC,UAAUC,YAAY,EACtBH,OAAOI,SAAS,EAChBC,OAAO,YAAY,EACnB,GAAGC,WACmB;IACtB,MAAMC,KAAK5B,MAAM6B,KAAK;IAEtB,MAAM,CAACR,OAAOE,SAAS,GAAGpB,wBAAwB;QAChDoB,UAAUC;QACVH,OAAOI;QACPL;IACF;IAEA,MAAM,EAAEU,QAAQ,MAAM,EAAE,GAAG5B;IAE3B,MAAM,EAAE6B,OAAO,EAAE,GAAG3B,kBAAkBsB,SAAS;IAE/C,MAAMM,cAAcb,QAAQc,SAAS,CAAC,CAACC,SAAWA,OAAOb,KAAK,KAAKA;IAEnEhB,0BAA0B;QACxB,IAAI2B,gBAAgB,CAAC,KAAKG,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;YAChEtB,KAAK,kDAAkD;QACzD;IACF,GAAG;QAACiB;KAAY;IAEhB,MAAMM,aAAa,CAAC,WAAW,EAAE,MAAMN,YAAY,EAAE,CAAC;IAEtD,qBACE,KAACzB;QACE,GAAGoB,SAAS;QACbY,eAAetC,WACbQ,OAAO+B,IAAI,EACXV,UAAU,aAAapB,eAAe,CAACoB,MAAM,EAC7Cb,SAAS,OAAOR,OAAOgC,KAAK;kBAG9B,cAAA,MAACC;YAAIhB,MAAMA;YAAMiB,KAAKZ;YAASa,WAAWnC,OAAOoC,EAAE;;gBAChDb,cAAc,CAAC,mBACd,KAACU;oBACCI,aAAW;oBACXF,WAAWnC,OAAOsC,MAAM;oBACxBC,OAAO;wBACLC,OAAO,GAAG,MAAM9B,QAAQ+B,MAAM,CAAC,CAAC,CAAC;wBACjCC,WAAWb;oBACb;;gBAGHnB,QAAQiC,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAEC,MAAM,EAAE,GAAGC,aAAa;oBAC7C,MAAMC,WAAWnC,UAAUkC,YAAYlC,KAAK;oBAC5C,MAAMoC,WAAW,IAAMlC,SAASgC,YAAYlC,KAAK;oBACjD,MAAMqC,kBACJhC,SAAS,YACL;wBACE,QAAQ;wBACR,iBAAiB8B;wBACjB,WAAWC;wBACX,YAAYF,YAAYI,QAAQ,IAAKH,CAAAA,WAAW,IAAI,CAAC,CAAA;wBACrD,GAAGD,WAAW;oBAChB,IACAK;oBAEN,MAAMC,mBACJnC,SAAS,YACL;wBACEA,MAAM6B,YAAY7B,IAAI,IAAKA,CAAAA,SAAS,eAAe,UAAUkC,SAAQ;wBACrEE,SAASN;wBACTjC,UAAUkC;wBACVvC,MAAMA,QAAQU;wBACd,GAAG2B,WAAW;oBAChB,IACAK;oBAEN,qBACE,KAACpD;wBAEC8C,QAAQA;wBACRS,WAAWL;wBACXM,YAAYH;kCAEXR;uBALI,GAAGE,YAAYlC,KAAK,EAAE;gBAQjC;;;;AAIR,EAAE"}
+{"version":3,"sources":["../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useTabsNavigation } from '../../hooks/useTabsNavigation';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport {\n  SegmentedControlOption,\n  type SegmentedControlOptionProps,\n} from './SegmentedControlOption/SegmentedControlOption';\nimport styles from './SegmentedControl.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  regular: styles.sizeYRegular,\n};\n\nexport type SegmentedControlValue = string | number | undefined;\n\nexport interface SegmentedControlOptionInterface\n  extends Omit<React.HTMLAttributes<HTMLElement>, 'label'> {\n  /**\n   * Вставляет элемент перед основным контентом.\n   * Рекомендуется использовать только иконки с размером 20\n   */\n  before?: React.ReactNode;\n  label: React.ReactNode;\n  value: SegmentedControlValue;\n}\n\nexport interface SegmentedControlProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'> {\n  options: SegmentedControlOptionInterface[];\n  size?: 'm' | 'l';\n  name?: string;\n  onChange?: (value: SegmentedControlValue) => void;\n  value?: SegmentedControlValue;\n  defaultValue?: SegmentedControlValue;\n}\n\nconst warn = warnOnce('SegmentedControl');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControl = ({\n  size = 'l',\n  name,\n  options,\n  defaultValue = options[0]?.value,\n  children,\n  onChange: onChangeProp,\n  value: valueProp,\n  role = 'radiogroup',\n  ...restProps\n}: SegmentedControlProps): React.ReactNode => {\n  const id = React.useId();\n  const direction = useConfigDirection();\n  const isRtl = direction === 'rtl';\n\n  const [value, onChange] = useCustomEnsuredControl({\n    onChange: onChangeProp,\n    value: valueProp,\n    defaultValue,\n  });\n\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const { tabsRef } = useTabsNavigation(role === 'tablist', isRtl);\n\n  const actualIndex = options.findIndex((option) => option.value === value);\n\n  useIsomorphicLayoutEffect(() => {\n    if (actualIndex === -1 && process.env.NODE_ENV === 'development') {\n      warn('defaultValue: такого значения нет среди опций!', 'error');\n    }\n  }, [actualIndex]);\n\n  const sliderStyle: CSSCustomProperties = {\n    '--vkui_internal--SegmentedControl_actual_index': String(actualIndex),\n    '--vkui_internal--SegmentedControl_options': String(options.length),\n  };\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        sizeY !== 'compact' && sizeYClassNames[sizeY],\n        size === 'l' && styles.sizeL,\n        isRtl && styles.rtl,\n      )}\n    >\n      <div role={role} ref={tabsRef} className={styles.in}>\n        {actualIndex > -1 && <div aria-hidden className={styles.slider} style={sliderStyle} />}\n        {options.map(({ label, before, ...optionProps }) => {\n          const selected = value === optionProps.value;\n          const onSelect = () => onChange(optionProps.value);\n          const optionRootProps: SegmentedControlOptionProps['rootProps'] =\n            role === 'tablist'\n              ? {\n                  'role': 'tab',\n                  'aria-selected': selected,\n                  'onClick': onSelect,\n                  'tabIndex': optionProps.tabIndex ?? (selected ? 0 : -1),\n                  ...optionProps,\n                }\n              : undefined;\n\n          const optionInputProps: SegmentedControlOptionProps['inputProps'] =\n            role !== 'tablist'\n              ? {\n                  role: optionProps.role || (role === 'radiogroup' ? 'radio' : undefined),\n                  checked: selected,\n                  onChange: onSelect,\n                  name: name ?? id,\n                  ...optionProps,\n                }\n              : undefined;\n\n          return (\n            <SegmentedControlOption\n              key={`${optionProps.value}`}\n              before={before}\n              rootProps={optionRootProps}\n              inputProps={optionInputProps}\n            >\n              {label}\n            </SegmentedControlOption>\n          );\n        })}\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useConfigDirection","useCustomEnsuredControl","useTabsNavigation","useIsomorphicLayoutEffect","warnOnce","RootComponent","SegmentedControlOption","styles","sizeYClassNames","none","sizeYNone","regular","sizeYRegular","warn","SegmentedControl","size","name","options","defaultValue","value","children","onChange","onChangeProp","valueProp","role","restProps","id","useId","direction","isRtl","sizeY","tabsRef","actualIndex","findIndex","option","process","env","NODE_ENV","sliderStyle","String","length","baseClassName","host","sizeL","rtl","div","ref","className","in","aria-hidden","slider","style","map","label","before","optionProps","selected","onSelect","optionRootProps","tabIndex","undefined","optionInputProps","checked","rootProps","inputProps"],"mappings":"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"}

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

@@ -1,10 +1,10 @@
 .host {
+  box-sizing: border-box;
   block-size: 30px;
   padding: 2px;
-  border-radius: var(--vkui--size_border_radius--regular);
-  background-color: var(--vkui--color_background_secondary);
-  box-sizing: border-box;
   font-family: var(--vkui--font_family_base);
+  background-color: var(--vkui--color_background_secondary);
+  border-radius: var(--vkui--size_border_radius--regular);
 }
 
 .sizeL {
@@ -14,24 +14,33 @@
 .in {
   position: relative;
   display: flex;
-  block-size: 100%;
   inline-size: 100%;
-  transition: all 100ms ease-out;
+  block-size: 100%;
   border-radius: inherit;
+  transition: all 100ms ease-out;
 }
 
 .slider {
   position: absolute;
   inset-block: 0;
   inset-inline-start: 0;
+  inline-size: calc(100% / var(--vkui_internal--SegmentedControl_options));
   background-color: var(--vkui--color_segmented_control);
-  transition: transform 150ms;
-  transform-origin: 0 0;
   border-radius: inherit;
   box-shadow:
     inset 0 0 0 0.5px var(--vkui--color_image_border_alpha),
     0 3px 8px rgba(0, 0, 0, 0.12),
     0 3px 1px rgba(0, 0, 0, 0.04);
+  transform: translateX(calc(var(--vkui_internal--SegmentedControl_actual_index) * 100%));
+  transform-origin: 0 0;
+  transition: transform 150ms;
+
+  --vkui_internal--SegmentedControl_actual_index: 0;
+  --vkui_internal--SegmentedControl_options: 0;
+}
+
+.rtl .slider {
+  transform: translateX(calc(-1 * var(--vkui_internal--SegmentedControl_actual_index) * 100%));
 }
 
 /**

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

@@ -1,23 +1,23 @@
 .host {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
   block-size: 100%;
-  border: 0;
-  border-radius: inherit;
-  background: transparent;
   color: var(--vkui--color_text_primary);
-  transition: color 100ms ease-out;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  box-sizing: border-box;
-  cursor: pointer;
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  display: flex;
-  position: relative;
-  justify-content: center;
-  align-items: center;
-  flex: 1;
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  background: transparent;
+  border: 0;
+  border-radius: inherit;
+  transition: color 100ms ease-out;
 }
 
 .hover {

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

@@ -1,37 +1,37 @@
 .host {
   position: relative;
-  cursor: pointer;
   box-sizing: border-box;
   font-family: var(--vkui--font_family_base);
+  cursor: pointer;
 }
 
 .el {
-  display: block;
   position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  z-index: var(--vkui_internal--z_index_form_field_side);
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+  font-family: inherit;
+  font-size: var(--vkui--font_paragraph--font_size--regular);
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
   border: 0;
-  inset-inline-start: 0;
-  inset-block-start: 0;
-  inline-size: 100%;
-  block-size: 100%;
   opacity: 0;
-  z-index: var(--vkui_internal--z_index_form_field_side);
-  font-size: var(--vkui--font_paragraph--font_size--regular);
-  font-family: inherit;
 }
 
 .container {
-  align-self: center;
+  position: relative;
+  z-index: var(--vkui_internal--z_index_form_field_element);
+  box-sizing: border-box;
   flex-grow: 1;
   flex-shrink: 1;
+  align-self: center;
   padding-inline: 12px 0;
-  color: var(--vkui--color_text_primary);
-  box-sizing: border-box;
-  position: relative;
-  z-index: var(--vkui_internal--z_index_form_field_element);
   overflow: hidden;
+  color: var(--vkui--color_text_primary);
 }
 
 .hasBefore .container {
@@ -59,8 +59,8 @@
 
 .host:not(.multiline) .title {
   overflow: hidden;
-  white-space: nowrap;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .empty .title {

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

@@ -1,11 +1,11 @@
 .host {
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: flex-start;
+  min-block-size: var(--vkui--size_field_height--regular);
   padding-inline: var(--vkui--size_base_padding_horizontal--regular);
   font-family: var(--vkui--font_family_base);
-  min-block-size: var(--vkui--size_field_height--regular);
-  box-sizing: border-box;
 }
 
 /**

package/dist/cssm/components/SelectionControl/SelectionControlLabel/SelectionControlLabel.module.css

@@ -1,11 +1,11 @@
 .host {
   flex-grow: 1;
-  color: var(--vkui--color_text_primary);
   min-inline-size: 0; /* см. https://github.com/VKCOM/VKUI/issues/5687 */
-  word-break: break-word;
   margin-block: var(--vkui--spacing_size_xl);
   -webkit-margin-start: 12px;
           margin-inline-start: 12px;
+  color: var(--vkui--color_text_primary);
+  word-break: break-word;
 }
 
 .host:first-child {
@@ -14,16 +14,16 @@
 }
 
 .description {
-  color: var(--vkui--color_text_secondary);
   display: block;
   -webkit-margin-before: 2px;
           margin-block-start: 2px;
+  color: var(--vkui--color_text_secondary);
 }
 
 .titleLayout {
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  justify-content: space-between;
 }
 
 .title {
@@ -31,9 +31,9 @@
 }
 
 .titleAfter {
+  flex-shrink: 0;
   -webkit-margin-start: 4px;
           margin-inline-start: 4px;
-  flex-shrink: 0;
   color: var(--vkui--color_icon_tertiary);
 }
 

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

@@ -25,19 +25,19 @@
 
 .sized.directionHorizontal {
   display: flex;
-  block-size: var(--vkui_internal--spacing_size);
   align-items: var(--vkui_internal--separator_align, center);
+  block-size: var(--vkui_internal--spacing_size);
 }
 
 .sized.directionVertical {
-  inline-size: var(--vkui_internal--spacing_size);
   justify-content: var(--vkui_internal--separator_align, center);
+  inline-size: var(--vkui_internal--spacing_size);
 }
 
 .in {
   margin: 0;
-  background: currentColor;
   color: inherit;
+  background: currentColor;
   border: 0;
 }