@vkontakte/vkui 6.5.0 → 6.5.2

package/src/components/CustomSelect/CustomSelectInput.tsx

@@ -2,14 +2,12 @@ import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useExternRef } from '../../hooks/useExternRef';
-import { useFocusWithin } from '../../hooks/useFocusWithin';
 import { usePlatform } from '../../hooks/usePlatform';
 import { getFormFieldModeFromSelectType } from '../../lib/select';
 import { HasAlign, HasRef, HasRootRef } from '../../types';
 import { FormField, FormFieldProps } from '../FormField/FormField';
 import type { SelectType } from '../Select/Select';
 import { SelectTypography } from '../SelectTypography/SelectTypography';
-import { Text } from '../Typography/Text/Text';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 import styles from './CustomSelectInput.module.css';
 
@@ -23,11 +21,13 @@ export interface CustomSelectInputProps
     HasRef<HTMLInputElement>,
     HasRootRef<HTMLDivElement>,
     HasAlign,
-    Omit<FormFieldProps, 'mode' | 'type'> {
+    Omit<FormFieldProps, 'mode' | 'type' | 'maxHeight'> {
   selectType?: SelectType;
   multiline?: boolean;
   labelTextTestId?: string;
   fetching?: boolean;
+  searchable?: boolean;
+  selectedOptionLabel?: React.ReactElement | string;
 }
 
 /**
@@ -43,42 +43,35 @@ export const CustomSelectInput = ({
   before,
   after,
   status,
-  children,
-  placeholder,
+  selectedOptionLabel,
   selectType = 'default',
   multiline,
   disabled,
   fetching,
   labelTextTestId,
-  ...restProps
+  searchable,
+  ...restInputProps
 }: CustomSelectInputProps): React.ReactNode => {
   const { sizeY = 'none' } = useAdaptivity();
 
-  const title = children || placeholder;
-  const showLabelOrPlaceholder = !Boolean(restProps.value);
-
   const handleRootRef = useExternRef(getRootRef);
-  const focusWithin = useFocusWithin(handleRootRef);
+
+  const platform = usePlatform();
 
   const input = (
-    <Text
+    <SelectTypography
+      selectType={selectType}
       type="text"
-      {...restProps}
+      {...restInputProps}
       disabled={disabled && !fetching}
-      readOnly={restProps.readOnly || (disabled && fetching)}
+      readOnly={restInputProps.readOnly || !searchable || (disabled && fetching)}
       Component="input"
       normalize={false}
-      className={classNames(
-        styles['CustomSelectInput__el'],
-        (restProps.readOnly || (showLabelOrPlaceholder && !focusWithin)) &&
-          styles['CustomSelectInput__el--cursor-pointer'],
-      )}
+      className={styles['CustomSelectInput__input']}
       getRootRef={getRef}
-      placeholder={children ? '' : placeholder}
     />
   );
 
-  const platform = usePlatform();
   return (
     <FormField
       Component="div"
@@ -87,7 +80,7 @@ export const CustomSelectInput = ({
         styles['CustomSelectInput'],
         align === 'right' && styles['CustomSelectInput--align-right'],
         align === 'center' && styles['CustomSelectInput--align-center'],
-        !children && styles['CustomSelectInput--empty'],
+        !selectedOptionLabel && styles['CustomSelectInput--empty'],
         multiline && styles['CustomSelectInput--multiline'],
         sizeY !== 'regular' && sizeYClassNames[sizeY],
         before && styles['CustomSelectInput--hasBefore'],
@@ -102,16 +95,6 @@ export const CustomSelectInput = ({
       status={status}
     >
       <div className={styles['CustomSelectInput__input-group']}>
-        <div
-          className={classNames(styles['CustomSelectInput__container'], className)}
-          tabIndex={-1}
-          aria-hidden
-          data-testid={labelTextTestId}
-        >
-          <SelectTypography selectType={selectType} className={styles['CustomSelectInput__title']}>
-            {showLabelOrPlaceholder && title}
-          </SelectTypography>
-        </div>
         {/* Чтобы отключить autosuggestion в iOS, тултипы которого начинают всплывать даже когда input
          * в режиме readonly, мы оборачиваем инпут в VisuallyHidden.
          * Тултипы появляются при каждом клике на input.
@@ -121,11 +104,17 @@ export const CustomSelectInput = ({
          * Делаем это только для режима read-only. Потому что проблема именно в режиме read-only.
          * Обертка вокруг инпута обрабатывает клики и передаёт фокус, так что на взаимодействии с инпутом это никак не скажется.
          **/}
-        {restProps.readOnly && platform === 'ios' ? (
-          <VisuallyHidden>{input}</VisuallyHidden>
-        ) : (
-          input
-        )}
+        {!searchable && platform === 'ios' ? <VisuallyHidden>{input}</VisuallyHidden> : input}
+        <div
+          className={classNames(styles['CustomSelectInput__label-wrapper'], className)}
+          tabIndex={-1}
+          aria-hidden
+          data-testid={labelTextTestId}
+        >
+          <SelectTypography selectType={selectType} className={styles['CustomSelectInput__label']}>
+            {selectedOptionLabel || restInputProps.placeholder}
+          </SelectTypography>
+        </div>
       </div>
     </FormField>
   );

package/src/components/CustomSelect/helpers.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { getTextFromChildren } from '../../lib/children';
+import { CustomSelectOption } from '../CustomSelectOption/CustomSelectOption';
+import type { CustomSelectOptionInterface, CustomSelectRenderOption, SelectValue } from './types';
+
+export const findIndexAfter = (options: CustomSelectOptionInterface[] = [], startIndex = -1) => {
+  if (startIndex >= options.length - 1) {
+    return -1;
+  }
+  return options.findIndex((option, i) => i > startIndex && !option.disabled);
+};
+
+export const findIndexBefore = (
+  options: CustomSelectOptionInterface[] = [],
+  endIndex: number = options.length,
+) => {
+  let result = -1;
+  if (endIndex <= 0) {
+    return result;
+  }
+  for (let i = endIndex - 1; i >= 0; i--) {
+    let option = options[i];
+
+    if (!option.disabled) {
+      result = i;
+      break;
+    }
+  }
+  return result;
+};
+
+export function findSelectedIndex<T extends CustomSelectOptionInterface>(
+  options: T[] = [],
+  value: SelectValue,
+  withClear: boolean,
+) {
+  if (withClear && value === '') {
+    return -1;
+  }
+  return (
+    options.findIndex((item) => {
+      value = typeof item.value === 'number' ? Number(value) : value;
+      return item.value === value;
+    }) ?? -1
+  );
+}
+
+export function calculateInputValueFromOptions<T extends CustomSelectOptionInterface>(
+  options: T[] = [],
+  selectValue: SelectValue,
+) {
+  const selectedOption = options.find((option) => option.value === selectValue);
+  return selectedOption ? getTextFromChildren(selectedOption.label) : '';
+}
+
+export function defaultRenderOptionFn<T extends CustomSelectOptionInterface>({
+  option,
+  ...props
+}: CustomSelectRenderOption<T>): React.ReactNode {
+  return <CustomSelectOption {...props} />;
+}

package/src/components/CustomSelect/types.ts

@@ -0,0 +1,15 @@
+import { CustomSelectOptionProps } from '../CustomSelectOption/CustomSelectOption';
+
+export type SelectValue = React.SelectHTMLAttributes<HTMLSelectElement>['value'];
+
+export interface CustomSelectOptionInterface {
+  value: SelectValue;
+  label: React.ReactElement | string;
+  disabled?: boolean;
+  [index: string]: any;
+}
+
+export interface CustomSelectRenderOption<T extends CustomSelectOptionInterface>
+  extends CustomSelectOptionProps {
+  option: T;
+}

package/src/components/CustomSelectDropdown/CustomSelectDropdown.tsx

@@ -32,15 +32,12 @@ export interface CustomSelectDropdownProps
   noMaxHeight?: boolean;
 }
 
-const calcIsTop = (placement: Placement) => placement.startsWith('top');
-
 export const CustomSelectDropdown = ({
   children,
   targetRef,
   scrollBoxRef,
   placement = 'bottom',
   fetching,
-  onPlacementChange: parentOnPlacementChange,
   offsetDistance = 0,
   autoWidth = false,
   forcePortal = true,
@@ -52,30 +49,19 @@ export const CustomSelectDropdown = ({
   overscrollBehavior,
   ...restProps
 }: CustomSelectDropdownProps): React.ReactNode => {
-  const [isTop, setIsTop] = React.useState(() => calcIsTop(placement));
-
-  const onPlacementChange = React.useCallback(
-    (placement: Placement) => {
-      setIsTop(calcIsTop(placement));
-      if (parentOnPlacementChange) {
-        parentOnPlacementChange(placement);
-      }
-    },
-    [parentOnPlacementChange],
-  );
-
   return (
     <Popper
       targetRef={targetRef}
       offsetByMainAxis={offsetDistance}
       sameWidth={!autoWidth}
-      onPlacementChange={onPlacementChange}
       placement={placement}
       className={classNames(
         styles['CustomSelectDropdown'],
         'vkuiInternalCustomSelectDropdown',
         offsetDistance === 0 &&
-          (isTop ? styles['CustomSelectDropdown--top'] : styles['CustomSelectDropdown--bottom']),
+          (placement.includes('top')
+            ? styles['CustomSelectDropdown--top']
+            : styles['CustomSelectDropdown--bottom']),
         autoWidth &&
           classNames(
             styles['CustomSelectDropdown--wide'],

package/src/components/DateInput/DateInput.tsx

@@ -55,7 +55,7 @@ export interface DateInputProps
       | 'maxDateTime'
     >,
     HasRootRef<HTMLDivElement>,
-    FormFieldProps {
+    Omit<FormFieldProps, 'maxHeight'> {
   calendarPlacement?: PlacementWithAuto;
   closeOnChange?: boolean;
   clearFieldLabel?: string;

package/src/components/DateRangeInput/DateRangeInput.tsx

@@ -45,7 +45,7 @@ export interface DateRangeInputProps
       | 'nextMonthIcon'
     >,
     HasRootRef<HTMLDivElement>,
-    FormFieldProps {
+    Omit<FormFieldProps, 'maxHeight'> {
   calendarPlacement?: PlacementWithAuto;
   closeOnChange?: boolean;
   clearFieldLabel?: string;

package/src/components/Flex/FlexItem/FlexItem.tsx

@@ -24,10 +24,12 @@ export interface FlexItemProps extends HTMLAttributesWithRootRef<HTMLDivElement>
    */
   alignSelf?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';
   /**
-   * Позволяет задать предопределенные значения шортката `flex`
-   * `grow` соответствует значению `1 0 auto`
-   * `shrink` соответствует значению `0 1 auto`
-   * `content` соответствует значению `0 0 auto`
+   * Позволяет задать предопределенные значения свойства `flex`:
+   *
+   * - `grow` соответствует значению `1 0 auto`
+   * - `shrink` соответствует значению `0 1 auto`
+   * - `content` соответствует значению `1 1 auto`
+   * - `fixed` соответствует значению `0 0 auto`
    */
   flex?: 'grow' | 'shrink' | 'content' | 'fixed';
   /**

package/src/components/Footer/Footer.tsx

@@ -9,9 +9,21 @@ export type FooterProps = React.AllHTMLAttributes<HTMLElement> & HasComponent;
 /**
  * @see https://vkcom.github.io/VKUI/#/Footer
  */
-export const Footer = ({ children, className, ...restProps }: FooterProps): React.ReactNode => {
+export const Footer = ({
+  children,
+  className,
+  Component = 'footer',
+  role: roleProp,
+  ...restProps
+}: FooterProps): React.ReactNode => {
+  const role = roleProp ?? (Component === 'footer' ? 'contentinfo' : undefined);
   return (
-    <Footnote Component="footer" {...restProps} className={classNames(styles['Footer'], className)}>
+    <Footnote
+      Component={Component}
+      role={role}
+      {...restProps}
+      className={classNames(styles['Footer'], className)}
+    >
       {children}
     </Footnote>
   );

package/src/components/FormField/FormField.module.css

@@ -111,14 +111,33 @@
   background-color: var(--vkui--color_field_background);
 }
 
+.FormField--hover {
+  background-color: var(--vkui--color_field_background);
+}
+
+.FormField--mode-default.FormField--hover .FormField__border {
+  border-color: var(--vkui--color_field_border_alpha--hover);
+  z-index: var(--vkui_internal--z_index_form_field_border_hover);
+}
+
+/**
+ * useFocusVisibleClassName()
+ */
+/* increase specificity for selects */
+.FormField--focus-visible.FormField--focus-visible .FormField__border {
+  border-color: var(--vkui--color_stroke_accent);
+}
+
 /**
  * CMP:
  * FormItem
  * [start]
  */
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-:global(.vkuiInternalFormItem--status-error) .FormField__border,
-.FormField--status-error .FormField__border {
+:global(.vkuiInternalFormItem--status-error) .FormField--mode-default .FormField__border,
+:global(.vkuiInternalFormItem--status-error) .FormField--focus-visible .FormField__border,
+.FormField--status-error.FormField--mode-default .FormField__border,
+.FormField--status-error.FormField--focus-visible .FormField__border {
   border-color: var(--vkui--color_stroke_negative);
   z-index: var(--vkui_internal--z_index_form_field_status);
 }
@@ -129,12 +148,21 @@
   background-color: var(--vkui--color_background_negative_tint);
 }
 
+/* increase specificity to cover --mode-default case */
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-:global(.vkuiInternalFormItem--status-valid) .FormField__border,
-.FormField--status-valid .FormField__border {
+:global(.vkuiInternalFormItem--status-valid) .FormField--mode-default .FormField__border,
+:global(.vkuiInternalFormItem--status-valid) .FormField--focus-visible .FormField__border,
+.FormField--status-valid.FormField--mode-default .FormField__border,
+.FormField--status-valid.FormField--focus-visible .FormField__border {
   border-color: var(--vkui--color_stroke_positive);
   z-index: var(--vkui_internal--z_index_form_field_status);
 }
+
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+:global(.vkuiInternalFormItem--status-valid) .FormField:not(.FormField--mode-default),
+.FormField--status-valid:not(.FormField--mode-default) {
+  background-color: var(--vkui--color_background_positive_tint);
+}
 /* [end] */
 
 .FormField--disabled {
@@ -143,15 +171,6 @@
   pointer-events: none;
 }
 
-.FormField--hover {
-  background-color: var(--vkui--color_field_background);
-}
-
-.FormField--mode-default.FormField--hover .FormField__border {
-  border-color: var(--vkui--color_field_border_alpha--hover);
-  z-index: var(--vkui_internal--z_index_form_field_border_hover);
-}
-
 /**
  * CMP:
  * NativeSelect
@@ -221,11 +240,3 @@
   border-end-start-radius: var(--vkui--size_border_radius--regular);
   border-end-end-radius: var(--vkui--size_border_radius--regular);
 }
-
-/**
- * useFocusVisibleClassName()
- */
-/* increase specificity for selects */
-.FormField--focus-visible.FormField--focus-visible .FormField__border {
-  border-color: var(--vkui--color_stroke_accent);
-}

package/src/components/FormItem/FormItem.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { classNames, hasReactNode, noop } from '@vkontakte/vkjs';
+import { classNames, hasReactNode } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useExternRef } from '../../hooks/useExternRef';
 import { useObjectMemo } from '../../hooks/useObjectMemo';
@@ -89,7 +89,7 @@ export const FormItem: React.FC<FormItemProps> & {
   bottom,
   status = 'default',
   removable,
-  onRemove = noop,
+  onRemove,
   removePlaceholder = 'Удалить',
   getRootRef,
   htmlFor,
@@ -154,7 +154,7 @@ export const FormItem: React.FC<FormItemProps> & {
             align="start"
             onRemove={(e) => {
               if (rootEl?.current) {
-                onRemove(e, rootEl.current);
+                onRemove?.(e, rootEl.current);
               }
             }}
             removePlaceholder={removePlaceholder}

package/src/components/FormLayoutGroup/FormLayoutGroup.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { classNames, noop } from '@vkontakte/vkjs';
+import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useExternRef } from '../../hooks/useExternRef';
 import { HTMLAttributesWithRootRef } from '../../types';
@@ -44,7 +44,7 @@ export const FormLayoutGroup = ({
   removable,
   segmented,
   removePlaceholder = 'Удалить',
-  onRemove = noop,
+  onRemove,
   getRootRef,
   ...restProps
 }: FormLayoutGroupProps): React.ReactNode => {
@@ -64,11 +64,7 @@ export const FormLayoutGroup = ({
             styles['FormLayoutGroup--mode-horizontal'],
             'vkuiInternalFormLayoutGroup--mode-horizontal',
           ),
-        mode === 'vertical' &&
-          classNames(
-            styles['FormLayoutGroup--mode-vertical'],
-            'vkuiInternalFormLayoutGroup--mode-vertical',
-          ),
+        mode === 'vertical' && 'vkuiInternalFormLayoutGroup--mode-vertical',
         isRemovable &&
           classNames(
             styles['FormLayoutGroup--removable'],
@@ -89,7 +85,7 @@ export const FormLayoutGroup = ({
           removePlaceholder={removePlaceholder}
           onRemove={(e) => {
             if (rootEl?.current) {
-              onRemove(e, rootEl.current);
+              onRemove?.(e, rootEl.current);
             }
           }}
           indent={removable === 'indent'}

package/src/components/Group/Group.tsx

@@ -12,7 +12,8 @@ import styles from './Group.module.css';
 
 const sizeXClassNames = {
   none: classNames(styles['Group--sizeX-none'], 'vkuiInternalGroup--sizeX-none'),
-  ['compact']: styles['Group--sizeX-compact'],
+  regular: styles['Group--sizeX-regular'],
+  compact: styles['Group--sizeX-compact'],
 };
 
 const stylesMode = {
@@ -140,7 +141,7 @@ export const Group = ({
         baseClassName={classNames(
           'vkuiInternalGroup',
           styles['Group'],
-          sizeX !== 'regular' && sizeXClassNames[sizeX],
+          sizeXClassNames[sizeX],
           mode === 'plain' && isInsideModal && styles['Group--mode-plain-inside-modal'],
           stylesMode[mode],
           stylesPadding[padding],

package/src/components/ImageBase/ImageBase.module.css

@@ -31,10 +31,6 @@
 }
 
 .ImageBase__img {
-  position: absolute;
-  z-index: var(--vkui_internal--z_index_image_base_img);
-  inset-block-start: 0;
-  inset-inline-start: 0;
   display: block;
   inline-size: 100%;
   block-size: 100%;

package/src/components/Link/Link.tsx

@@ -1,4 +1,4 @@
-import { classNames, noop } from '@vkontakte/vkjs';
+import { classNames } from '@vkontakte/vkjs';
 import { Tappable, TappableProps } from '../Tappable/Tappable';
 import styles from './Link.module.css';
 
@@ -16,13 +16,11 @@ export const Link = ({
   hasVisited,
   children,
   className,
-  onClick = noop,
   ...restProps
 }: LinkProps): React.ReactNode => {
   return (
     <Tappable
       Component={restProps.href ? 'a' : 'button'}
-      onClick={onClick}
       {...restProps}
       className={classNames(styles['Link'], hasVisited && styles['Link--has-visited'], className)}
       hasHover={false}

package/src/components/Removable/Removable.module.css

@@ -17,6 +17,10 @@
   align-self: flex-start;
 }
 
+.Removable--disabled {
+  opacity: var(--vkui--opacity_disable_accessibility);
+}
+
 /**
  * iOS
  */

package/src/components/Removable/Removable.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Icon24Cancel } from '@vkontakte/icons';
-import { classNames, noop } from '@vkontakte/vkjs';
+import { classNames } from '@vkontakte/vkjs';
 import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
 import { usePlatform } from '../../hooks/usePlatform';
 import { getTextFromChildren } from '../../lib/children';
@@ -29,6 +29,10 @@ export interface RemovableProps {
    * (test) testId кнопки удаления
    */
   removeButtonTestId?: string;
+  /**
+   * Ячейка превращается в неактивную
+   */
+  disabled?: boolean;
 }
 
 interface RemovableIosOwnProps extends RemovableProps {
@@ -46,6 +50,7 @@ const RemovableIos = ({
   children: childrenProp,
   toggleButtonTestId,
   removeButtonTestId,
+  disabled,
 }: RemovableIosOwnProps) => {
   const { window } = useDOM();
 
@@ -97,7 +102,7 @@ const RemovableIos = ({
           'vkuiInternalRemovable__action',
         )}
         onClick={onRemoveActivateClick}
-        disabled={removeOffset > 0}
+        disabled={removeOffset > 0 || disabled}
         data-testid={toggleButtonTestId}
       >
         <VisuallyHidden>{removePlaceholderString}</VisuallyHidden>
@@ -155,19 +160,20 @@ interface RemovableOwnProps
  */
 export const Removable = ({
   children,
-  onRemove = noop,
+  onRemove,
   removePlaceholder = 'Удалить',
   align = 'center',
   indent = false,
   toggleButtonTestId,
   removeButtonTestId,
+  disabled,
   ...restProps
 }: RemovableOwnProps): React.ReactNode => {
   const platform = usePlatform();
 
   const onRemoveClick = (e: React.MouseEvent) => {
     e.preventDefault();
-    onRemove(e);
+    onRemove?.(e);
   };
 
   const removePlaceholderString: string = getTextFromChildren(removePlaceholder);
@@ -192,6 +198,7 @@ export const Removable = ({
             onClick={onRemoveClick}
             label={removePlaceholderString}
             data-testid={removeButtonTestId}
+            disabled={disabled}
           >
             <Icon24Cancel role="presentation" />
           </IconButton>
@@ -207,6 +214,7 @@ export const Removable = ({
           removePlaceholderString={removePlaceholderString}
           toggleButtonTestId={toggleButtonTestId}
           removeButtonTestId={removeButtonTestId}
+          disabled={disabled}
         >
           {children}
         </RemovableIos>

package/src/components/RootComponent/RootComponent.module.css

@@ -0,0 +1,10 @@
+.RootComponent[hidden='hidden'],
+.RootComponent--hidden {
+  /* stylelint-disable-next-line declaration-no-important */
+  display: none !important;
+}
+
+.RootComponent[hidden='until-found'] {
+  /* stylelint-disable-next-line declaration-no-important */
+  content-visibility: hidden !important;
+}

package/src/components/RootComponent/RootComponent.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { HasComponent, HasRootRef } from '../../types';
+import type { HasComponent, HasRootRef } from '../../types';
+import styles from './RootComponent.module.css';
 
 export interface RootComponentProps<T>
   extends React.AllHTMLAttributes<T>,
@@ -19,5 +20,14 @@ export const RootComponent = <T,>({
   getRootRef,
   ...restProps
 }: RootComponentProps<T>): React.ReactNode => (
-  <Component ref={getRootRef} className={classNames(baseClassName, className)} {...restProps} />
+  <Component
+    ref={getRootRef}
+    className={classNames(
+      className,
+      baseClassName,
+      styles['RootComponent'],
+      restProps.hidden === true && styles['RootComponent--hidden'],
+    )}
+    {...restProps}
+  />
 );

package/src/components/Search/Search.tsx

@@ -61,7 +61,7 @@ export const Search = ({
   after = 'Отмена',
   getRef,
   icon: iconProp,
-  onIconClick = noop,
+  onIconClick,
   style,
   autoComplete = 'off',
   onChange,
@@ -115,7 +115,7 @@ export const Search = ({
   }, [inputRef]);
 
   const onIconClickStart: React.PointerEventHandler<HTMLElement> = React.useCallback(
-    (e) => onIconClick(e),
+    (e) => onIconClick?.(e),
     [onIconClick],
   );
 
@@ -206,6 +206,7 @@ export const Search = ({
             onClick={onCancel}
             className={styles['Search__icon']}
             tabIndex={hasValue ? undefined : -1}
+            disabled={inputProps.disabled}
           >
             <VisuallyHidden>{clearLabel}</VisuallyHidden>
             {platform === 'ios' ? <Icon16Clear /> : <Icon24Cancel />}