@vkontakte/vkui 8.1.0 → 8.1.2

package/dist/cssm/components/Flex/FlexItem/FlexItem.js

@@ -1,22 +1,52 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { getRequiredValueByKey } from "../../../helpers/getValueByKey.js";
 import { resolveLayoutProps } from "../../../lib/layouts/index.js";
 import { warnOnce } from "../../../lib/warnOnce.js";
 import { RootComponent } from "../../RootComponent/RootComponent.js";
-import styles from "./FlexItem.module.css";
-const flexClassNames = {
-    grow: styles.flexGrow,
-    shrink: styles.flexShrink,
-    content: styles.flexContent,
-    fixed: styles.flexFixed
+const resolveFlexProps = (flex, flexBasis)=>{
+    const overrideProps = flexBasis !== undefined ? {
+        flexBasis
+    } : {};
+    if (!flex) {
+        return overrideProps;
+    }
+    return {
+        ...getRequiredValueByKey(flex, {
+            grow: {
+                flexGrow: 1,
+                flexShrink: 0,
+                flexBasis: 'auto'
+            },
+            shrink: {
+                flexGrow: 0,
+                flexShrink: 1,
+                flexBasis: 'auto'
+            },
+            content: {
+                flexGrow: 1,
+                flexShrink: 1,
+                flexBasis: 'auto'
+            },
+            fixed: {
+                flexGrow: 0,
+                flexShrink: 0,
+                flexBasis: 'auto'
+            }
+        }),
+        ...overrideProps
+    };
 };
 const warn = warnOnce('Flex.Item');
-export const FlexItem = ({ flex, ...restProps })=>{
+export const FlexItem = ({ flex, flexBasis, ...restProps })=>{
     if (process.env.NODE_ENV === 'development') {
         warn('Компонент Flex.Item устарел, используйте компонент Box в качестве альтернативы.');
     }
-    const resolvedProps = resolveLayoutProps(restProps);
+    const flexProps = resolveFlexProps(flex, flexBasis);
+    const resolvedProps = resolveLayoutProps({
+        ...restProps,
+        ...flexProps
+    });
     return /*#__PURE__*/ _jsx(RootComponent, {
-        baseClassName: flex && flexClassNames[flex],
         ...resolvedProps
     });
 };

package/dist/cssm/components/Flex/FlexItem/FlexItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Flex/FlexItem/FlexItem.tsx"],"sourcesContent":["import { type LayoutProps, resolveLayoutProps } from '../../../lib/layouts';\nimport { warnOnce } from '../../../lib/warnOnce';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport type { RootComponentProps } from '../../RootComponent/RootComponent';\nimport styles from './FlexItem.module.css';\n\nconst flexClassNames = {\n  grow: styles.flexGrow,\n  shrink: styles.flexShrink,\n  content: styles.flexContent,\n  fixed: styles.flexFixed,\n};\n\nexport type FlexItemProps = RootComponentProps<HTMLElement> &\n  Pick<LayoutProps, 'alignSelf' | 'justifySelf' | 'flexBasis'> & {\n    /**\n     * Позволяет задать предопределенные значения свойства `flex`:\n     *\n     * - `grow` соответствует значению `1 0 auto`\n     * - `shrink` соответствует значению `0 1 auto`\n     * - `content` соответствует значению `1 1 auto`\n     * - `fixed` соответствует значению `0 0 auto`.\n     */\n    flex?: 'grow' | 'shrink' | 'content' | 'fixed' | undefined;\n  };\n\nconst warn = warnOnce('Flex.Item');\n\nexport const FlexItem = ({ flex, ...restProps }: FlexItemProps): React.ReactNode => {\n  if (process.env.NODE_ENV === 'development') {\n    warn('Компонент Flex.Item устарел, используйте компонент Box в качестве альтернативы.');\n  }\n\n  const resolvedProps = resolveLayoutProps(restProps);\n\n  return <RootComponent baseClassName={flex && flexClassNames[flex]} {...resolvedProps} />;\n};\n"],"names":["resolveLayoutProps","warnOnce","RootComponent","styles","flexClassNames","grow","flexGrow","shrink","flexShrink","content","flexContent","fixed","flexFixed","warn","FlexItem","flex","restProps","process","env","NODE_ENV","resolvedProps","baseClassName"],"mappings":";AAAA,SAA2BA,kBAAkB,QAAQ,gCAAuB;AAC5E,SAASC,QAAQ,QAAQ,2BAAwB;AACjD,SAASC,aAAa,QAAQ,uCAAoC;AAElE,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,iBAAiB;IACrBC,MAAMF,OAAOG,QAAQ;IACrBC,QAAQJ,OAAOK,UAAU;IACzBC,SAASN,OAAOO,WAAW;IAC3BC,OAAOR,OAAOS,SAAS;AACzB;AAeA,MAAMC,OAAOZ,SAAS;AAEtB,OAAO,MAAMa,WAAW,CAAC,EAAEC,IAAI,EAAE,GAAGC,WAA0B;IAC5D,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1CN,KAAK;IACP;IAEA,MAAMO,gBAAgBpB,mBAAmBgB;IAEzC,qBAAO,KAACd;QAAcmB,eAAeN,QAAQX,cAAc,CAACW,KAAK;QAAG,GAAGK,aAAa;;AACtF,EAAE"}
+{"version":3,"sources":["../../../../../src/components/Flex/FlexItem/FlexItem.tsx"],"sourcesContent":["import { getRequiredValueByKey } from '../../../helpers/getValueByKey';\nimport { type LayoutProps, resolveLayoutProps } from '../../../lib/layouts';\nimport { warnOnce } from '../../../lib/warnOnce';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport type { RootComponentProps } from '../../RootComponent/RootComponent';\n\nexport type FlexItemProps = RootComponentProps<HTMLElement> &\n  Pick<LayoutProps, 'alignSelf' | 'justifySelf' | 'flexBasis'> & {\n    /**\n     * Позволяет задать предопределенные значения свойства `flex`:\n     *\n     * - `grow` соответствует значению `1 0 auto`\n     * - `shrink` соответствует значению `0 1 auto`\n     * - `content` соответствует значению `1 1 auto`\n     * - `fixed` соответствует значению `0 0 auto`.\n     */\n    flex?: 'grow' | 'shrink' | 'content' | 'fixed' | undefined;\n  };\n\nconst resolveFlexProps = (flex: FlexItemProps['flex'], flexBasis: FlexItemProps['flexBasis']) => {\n  const overrideProps = flexBasis !== undefined ? { flexBasis } : {};\n  if (!flex) {\n    return overrideProps;\n  }\n  return {\n    ...getRequiredValueByKey<Pick<LayoutProps, 'flexGrow' | 'flexShrink' | 'flexBasis'>>(flex, {\n      grow: {\n        flexGrow: 1,\n        flexShrink: 0,\n        flexBasis: 'auto',\n      },\n      shrink: {\n        flexGrow: 0,\n        flexShrink: 1,\n        flexBasis: 'auto',\n      },\n      content: {\n        flexGrow: 1,\n        flexShrink: 1,\n        flexBasis: 'auto',\n      },\n      fixed: {\n        flexGrow: 0,\n        flexShrink: 0,\n        flexBasis: 'auto',\n      },\n    }),\n    ...overrideProps,\n  };\n};\n\nconst warn = warnOnce('Flex.Item');\n\nexport const FlexItem = ({ flex, flexBasis, ...restProps }: FlexItemProps): React.ReactNode => {\n  if (process.env.NODE_ENV === 'development') {\n    warn('Компонент Flex.Item устарел, используйте компонент Box в качестве альтернативы.');\n  }\n\n  const flexProps = resolveFlexProps(flex, flexBasis);\n\n  const resolvedProps = resolveLayoutProps({ ...restProps, ...flexProps });\n\n  return <RootComponent {...resolvedProps} />;\n};\n"],"names":["getRequiredValueByKey","resolveLayoutProps","warnOnce","RootComponent","resolveFlexProps","flex","flexBasis","overrideProps","undefined","grow","flexGrow","flexShrink","shrink","content","fixed","warn","FlexItem","restProps","process","env","NODE_ENV","flexProps","resolvedProps"],"mappings":";AAAA,SAASA,qBAAqB,QAAQ,oCAAiC;AACvE,SAA2BC,kBAAkB,QAAQ,gCAAuB;AAC5E,SAASC,QAAQ,QAAQ,2BAAwB;AACjD,SAASC,aAAa,QAAQ,uCAAoC;AAgBlE,MAAMC,mBAAmB,CAACC,MAA6BC;IACrD,MAAMC,gBAAgBD,cAAcE,YAAY;QAAEF;IAAU,IAAI,CAAC;IACjE,IAAI,CAACD,MAAM;QACT,OAAOE;IACT;IACA,OAAO;QACL,GAAGP,sBAAkFK,MAAM;YACzFI,MAAM;gBACJC,UAAU;gBACVC,YAAY;gBACZL,WAAW;YACb;YACAM,QAAQ;gBACNF,UAAU;gBACVC,YAAY;gBACZL,WAAW;YACb;YACAO,SAAS;gBACPH,UAAU;gBACVC,YAAY;gBACZL,WAAW;YACb;YACAQ,OAAO;gBACLJ,UAAU;gBACVC,YAAY;gBACZL,WAAW;YACb;QACF,EAAE;QACF,GAAGC,aAAa;IAClB;AACF;AAEA,MAAMQ,OAAOb,SAAS;AAEtB,OAAO,MAAMc,WAAW,CAAC,EAAEX,IAAI,EAAEC,SAAS,EAAE,GAAGW,WAA0B;IACvE,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1CL,KAAK;IACP;IAEA,MAAMM,YAAYjB,iBAAiBC,MAAMC;IAEzC,MAAMgB,gBAAgBrB,mBAAmB;QAAE,GAAGgB,SAAS;QAAE,GAAGI,SAAS;IAAC;IAEtE,qBAAO,KAAClB;QAAe,GAAGmB,aAAa;;AACzC,EAAE"}

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

@@ -101,16 +101,6 @@ autoComplete = 'off', autoCapitalize, autoCorrect, disabled, list, maxLength, mi
     const onIconClickStart = React.useCallback((e)=>onIconClick?.(e), [
         onIconClick
     ]);
-    const onIconCancelClickStart = React.useCallback((e)=>{
-        e.preventDefault();
-        inputRef.current?.focus();
-        if (touchEnabled()) {
-            onCancel();
-        }
-    }, [
-        inputRef,
-        onCancel
-    ]);
     useIsomorphicLayoutEffect(()=>{
         if (inputRest.value !== undefined) {
             setHasValue(Boolean(inputRest.value));
@@ -137,6 +127,25 @@ autoComplete = 'off', autoCapitalize, autoCorrect, disabled, list, maxLength, mi
             ]
         });
     const showControls = Boolean(iconProp || !hideClearButton || adaptiveDensity.compact && onFindButtonClick);
+    const onClearPointerDown = (e)=>{
+        // Сначала вызываем внешний обработчик, затем локальную логику, чтобы можно было предотвратить обработку фокуса на поле ввода.
+        onClearButtonPointerDown?.(e);
+        e.preventDefault();
+        inputRef.current?.focus();
+        if (touchEnabled()) {
+            onCancel();
+        }
+    };
+    const onClearClick = (e)=>{
+        // eslint-disable-next-line @typescript-eslint/unbound-method
+        const nativeInputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set;
+        nativeInputValueSetter?.call(inputRef.current, '');
+        const ev2 = new Event('input', {
+            bubbles: true
+        });
+        inputRef.current?.dispatchEvent(ev2);
+        onClearButtonClick?.(e);
+    };
     return /*#__PURE__*/ _jsxs(RootComponent, {
         baseClassName: classNames('vkuiInternalSearch', styles.host, density === 'none' && styles.densityNone, density === 'compact' && styles.densityCompact, isFocused && styles.focused, hasValue && styles.hasValue, hasAfter && styles.hasAfter, iconProp && styles.hasIcon, inputRest.disabled && styles.disabled, !noPadding && styles.withPadding, isRtl && styles.rtl),
         ...rootRest,
@@ -174,8 +183,8 @@ autoComplete = 'off', autoCapitalize, autoCorrect, disabled, list, maxLength, mi
                             iconProp && (typeof iconProp === 'function' ? iconProp(renderIconButton) : renderIconButton(iconProp)),
                             !hideClearButton && /*#__PURE__*/ _jsxs(IconButton, {
                                 hoverMode: "opacity",
-                                onPointerDown: callMultiple(onIconCancelClickStart, onClearButtonPointerDown),
-                                onClick: callMultiple(onCancel, onClearButtonClick),
+                                onPointerDown: onClearPointerDown,
+                                onClick: onClearClick,
                                 tabIndex: hasValue ? undefined : -1,
                                 disabled: inputRest.disabled,
                                 "data-testid": clearButtonTestId,

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