✨ feat: bump deps and refactor the basic

BREAKING CHANGES: need react >= 19

Author: arvinxx

package.json

@@ -59,8 +59,8 @@
     ]
   },
   "dependencies": {
-    "@babel/runtime": "^7",
-    "@emotion/css": "^11"
+    "@babel/runtime": "^7.28.2",
+    "@emotion/css": "^11.13.5"
   },
   "devDependencies": {
     "@commitlint/cli": "^17",
@@ -89,16 +89,16 @@
     "prettier": "^2",
     "prettier-plugin-organize-imports": "^3",
     "prettier-plugin-packagejson": "^2",
-    "react": "^18",
-    "react-dom": "^18",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "semantic-release": "^20",
     "semantic-release-config-gitmoji": "^1",
     "stylelint": "^14",
     "typescript": "^5",
     "vitest": "^3.2.4"
   },
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=19"
   },
   "publishConfig": {
     "access": "public",

src/Center/index.tsx

@@ -3,24 +3,21 @@
 import FlexBasic, { FlexBasicProps } from '@/FlexBasic';
 import { CommonProps } from '@/type';
 import { getPrefix } from '@/utils';
-import { forwardRef } from 'react';
+import { memo } from 'react';
 
 export type CenterProps = Omit<FlexBasicProps, 'distribution' | 'direction' | 'align'>;
 
-const Center = forwardRef<HTMLElement, CenterProps & CommonProps>(
-  ({ children, className, prefixCls, ...res }, ref) => (
-    <FlexBasic
-      ref={ref}
-      internalClassName={`${getPrefix(prefixCls)}-center`}
-      className={className}
-      {...res}
-      align={'center'}
-      justify={'center'}
-    >
-      {children}
-    </FlexBasic>
-  ),
-);
+const Center = memo<CenterProps & CommonProps>(({ children, className, prefixCls, ...res }) => (
+  <FlexBasic
+    internalClassName={`${getPrefix(prefixCls)}-center`}
+    className={className}
+    {...res}
+    align={'center'}
+    justify={'center'}
+  >
+    {children}
+  </FlexBasic>
+));
 
 Center.displayName = 'Center';
 

src/FlexBasic/index.tsx

@@ -1,7 +1,7 @@
 import { ContentPosition, DivProps, FlexDirection } from '@/type';
 import { getCssValue, getFlexDirection, isHorizontal, isSpaceDistribution } from '@/utils';
 import { css, cx } from '@emotion/css';
-import { CSSProperties, ElementType, forwardRef, useMemo } from 'react';
+import { CSSProperties, ElementType, memo, Ref, useMemo } from 'react';
 
 export type CommonSpaceNumber = 2 | 4 | 8 | 12 | 16 | 24;
 
@@ -89,46 +89,46 @@ export interface IFlexbox {
   as?: ElementType;
 }
 
-export interface FlexBasicProps extends IFlexbox, Omit<DivProps, 'ref'> {
+export interface FlexBasicProps extends IFlexbox, DivProps {
   internalClassName?: string;
+  ref?: Ref<any>;
 }
 
-const FlexBasic = forwardRef<any, FlexBasicProps>(
-  (
-    {
-      visible,
-      flex,
-      gap,
-      direction,
-      horizontal,
-      align,
-      justify,
-      distribution,
-      height,
-      width,
-      padding,
-      paddingInline,
-      paddingBlock,
-      as: Container = 'div',
-      internalClassName,
-      className,
-      children,
-      wrap,
-      ...props
-    },
+const FlexBasic = memo<FlexBasicProps>(
+  ({
+    visible,
+    flex,
+    gap,
+    direction,
+    horizontal,
+    align,
+    justify,
+    distribution,
+    height,
+    width,
+    padding,
+    paddingInline,
+    paddingBlock,
+    as: Container = 'div',
+    internalClassName,
+    className,
+    children,
+    wrap,
     ref,
-  ) => {
+    ...props
+  }) => {
     const justifyContent = justify || distribution;
 
-    const finalWidth = useMemo(() => {
-      if (isHorizontal(direction, horizontal) && !width && isSpaceDistribution(justifyContent))
-        return '100%';
+    const mergedClassName = useMemo(() => {
+      const calcWidth = () => {
+        if (isHorizontal(direction, horizontal) && !width && isSpaceDistribution(justifyContent))
+          return '100%';
 
-      return getCssValue(width);
-    }, [direction, horizontal, justifyContent, width]);
+        return getCssValue(width);
+      };
+      const finalWidth = calcWidth();
 
-    const funcClassName = useMemo(
-      () => css`
+      const funcClassName = css`
         display: ${visible === false ? 'none' : 'flex'};
 
         flex: ${flex};
@@ -148,26 +148,29 @@ const FlexBasic = forwardRef<any, FlexBasicProps>(
         padding-block: ${getCssValue(paddingBlock)};
 
         gap: ${getCssValue(gap)};
-      `,
-      [
-        visible,
-        flex,
-        direction,
-        horizontal,
-        wrap,
-        justifyContent,
-        align,
-        finalWidth,
-        height,
-        padding,
-        paddingInline,
-        paddingBlock,
-        gap,
-      ],
-    );
+      `;
+
+      return cx(internalClassName, funcClassName, className);
+    }, [
+      visible,
+      flex,
+      direction,
+      horizontal,
+      width,
+      wrap,
+      justifyContent,
+      align,
+      height,
+      padding,
+      paddingInline,
+      paddingBlock,
+      gap,
+      internalClassName,
+      className,
+    ]);
 
     return (
-      <Container ref={ref} {...props} className={cx(internalClassName, funcClassName, className)}>
+      <Container ref={ref} {...props} className={mergedClassName}>
         {children}
       </Container>
     );

src/Flexbox/index.tsx

@@ -1,25 +1,18 @@
 'use client';
 
-import { forwardRef } from 'react';
+import { memo } from 'react';
 
 import FlexBasic, { FlexBasicProps } from '@/FlexBasic';
 import { CommonProps } from '@/type';
 import { getPrefix } from '@/utils';
 
 export type FlexboxProps = FlexBasicProps & CommonProps;
 
-const Flexbox = forwardRef<HTMLElement, FlexboxProps>(
-  ({ className, prefixCls, children, ...props }, ref) => (
-    <FlexBasic
-      ref={ref}
-      {...props}
-      internalClassName={`${getPrefix(prefixCls)}-flexbox`}
-      className={className}
-    >
-      {children}
-    </FlexBasic>
-  ),
-);
+const Flexbox = memo<FlexboxProps>(({ className, prefixCls, children, ...props }) => (
+  <FlexBasic {...props} internalClassName={`${getPrefix(prefixCls)}-flexbox`} className={className}>
+    {children}
+  </FlexBasic>
+));
 
 Flexbox.displayName = 'Flexbox';