@vkontakte/vkui 8.1.1 → 8.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "type": "module",
-  "version": "8.1.1",
+  "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/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":""}