@vkontakte/vkui 8.1.0 → 8.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "type": "module",
-  "version": "8.1.0",
+  "version": "8.1.2",
   "name": "@vkontakte/vkui",
   "description": "VKUI library",
   "module": "./dist/index.js",

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

@@ -1,15 +1,8 @@
+import { getRequiredValueByKey } from '../../../helpers/getValueByKey';
 import { type LayoutProps, resolveLayoutProps } from '../../../lib/layouts';
 import { warnOnce } from '../../../lib/warnOnce';
 import { RootComponent } from '../../RootComponent/RootComponent';
 import type { RootComponentProps } from '../../RootComponent/RootComponent';
-import styles from './FlexItem.module.css';
-
-const flexClassNames = {
-  grow: styles.flexGrow,
-  shrink: styles.flexShrink,
-  content: styles.flexContent,
-  fixed: styles.flexFixed,
-};
 
 export type FlexItemProps = RootComponentProps<HTMLElement> &
   Pick<LayoutProps, 'alignSelf' | 'justifySelf' | 'flexBasis'> & {
@@ -24,14 +17,48 @@ export type FlexItemProps = RootComponentProps<HTMLElement> &
     flex?: 'grow' | 'shrink' | 'content' | 'fixed' | undefined;
   };
 
+const resolveFlexProps = (flex: FlexItemProps['flex'], flexBasis: FlexItemProps['flexBasis']) => {
+  const overrideProps = flexBasis !== undefined ? { flexBasis } : {};
+  if (!flex) {
+    return overrideProps;
+  }
+  return {
+    ...getRequiredValueByKey<Pick<LayoutProps, 'flexGrow' | 'flexShrink' | 'flexBasis'>>(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 }: FlexItemProps): React.ReactNode => {
+export const FlexItem = ({ flex, flexBasis, ...restProps }: FlexItemProps): React.ReactNode => {
   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 <RootComponent baseClassName={flex && flexClassNames[flex]} {...resolvedProps} />;
+  return <RootComponent {...resolvedProps} />;
 };

package/src/components/Search/Search.tsx

@@ -288,17 +288,6 @@ export const Search = ({
     [onIconClick],
   );
 
-  const onIconCancelClickStart: React.PointerEventHandler<HTMLElement> = React.useCallback(
-    (e) => {
-      e.preventDefault();
-      inputRef.current?.focus();
-      if (touchEnabled()) {
-        onCancel();
-      }
-    },
-    [inputRef, onCancel],
-  );
-
   useIsomorphicLayoutEffect(() => {
     if (inputRest.value !== undefined) {
       setHasValue(Boolean(inputRest.value));
@@ -328,6 +317,31 @@ export const Search = ({
     iconProp || !hideClearButton || (adaptiveDensity.compact && onFindButtonClick),
   );
 
+  const onClearPointerDown: React.PointerEventHandler<HTMLElement> = (e) => {
+    // Сначала вызываем внешний обработчик, затем локальную логику, чтобы можно было предотвратить обработку фокуса на поле ввода.
+    onClearButtonPointerDown?.(e);
+
+    e.preventDefault();
+    inputRef.current?.focus();
+    if (touchEnabled()) {
+      onCancel();
+    }
+  };
+
+  const onClearClick: React.MouseEventHandler<HTMLElement> = (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 (
     <RootComponent
       baseClassName={classNames(
@@ -374,8 +388,8 @@ export const Search = ({
             {!hideClearButton && (
               <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/Flex/FlexItem/FlexItem.module.css

@@ -1,17 +0,0 @@
-/* flex */
-
-.flexGrow {
-  flex: 1 0 auto;
-}
-
-.flexShrink {
-  flex: 0 1 auto;
-}
-
-.flexContent {
-  flex: 1 1 auto;
-}
-
-.flexFixed {
-  flex: 0 0 auto;
-}

package/src/components/Flex/FlexItem/FlexItem.module.css

@@ -1,17 +0,0 @@
-/* flex */
-
-.flexGrow {
-  flex: 1 0 auto;
-}
-
-.flexShrink {
-  flex: 0 1 auto;
-}
-
-.flexContent {
-  flex: 1 1 auto;
-}
-
-.flexFixed {
-  flex: 0 0 auto;
-}

package/src/components/Flex/FlexItem/FlexItem.module.css.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"sources":["./FlexItem.module.css"],"names":["flexGrow","flexShrink","flexContent","flexFixed"],"mappings":"AAAA;AAAA,E,aAEAA,U,WAFA;AAAA,E,aAMAC,Y,WANA;AAAA,E,aAUAC,a,WAVA;AAAA,E,aAcAC,W,WAdA;AAAA;AAAA","file":"FlexItem.module.css.d.ts","sourceRoot":""}