feat: support RSC

package.json

@@ -179,9 +179,9 @@
         "npm-run-all": "^4.1.5",
         "postcss": "^8.4.33",
         "prettier": "^3.2.4",
-        "react": "^18.2.0",
+        "react": "^18.3.1",
         "react-docgen-typescript": "^2.2.2",
-        "react-dom": "^18.2.0",
+        "react-dom": "^18.3.1",
         "rimraf": "^5.0.5",
         "sass": "^1.70.0",
         "sass-loader": "^14.0.0",

src/components/ActionTooltip/ActionTooltip.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {useForkRef} from '../../hooks';
@@ -75,7 +77,7 @@
     };
 
     const child = React.Children.only(children);
     const childRef = (child as any).ref;
 
     const ref = useForkRef(setAnchorElement, childRef);
 

src/components/Alert/AlertAction.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {Button} from '../Button';

src/components/Alert/AlertActions.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {Flex} from '../layout';

src/components/Alert/AlertContextProvider.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {AlertContext} from './AlertContext';

src/components/Alert/useAlertContext.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {AlertContext} from './AlertContext';

src/components/Avatar/Avatar.tsx

@@ -27,10 +27,7 @@ export const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>((props, ref)
         qa,
     } = props;
 
-    const style = React.useMemo(
-        () => ({backgroundColor, color: borderColor, ...styleProp}),
-        [backgroundColor, borderColor, styleProp],
-    );
+    const style = {backgroundColor, color: borderColor, ...styleProp};
 
     const renderContent = () => {
         if ('imgUrl' in props && props.imgUrl) {

src/components/Avatar/AvatarIcon/AvatarIcon.tsx

@@ -14,7 +14,7 @@ const avatarSizeToIconSize: Record<AvatarSize, number> = {
 };
 
 export const AvatarIcon = ({icon, color, size, className}: AvatarIconProps) => {
-    const style = React.useMemo(() => ({color}), [color]);
+    const style = {color};
 
     return (
         <div style={style} className={className}>

src/components/Avatar/AvatarImage/AvatarImage.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {AVATAR_SIZES} from '../constants';

src/components/Avatar/AvatarText/AvatarText.tsx

@@ -4,8 +4,8 @@ import type {AvatarTextProps} from './types';
 import {getAvatarDisplayText} from './utils';
 
 export const AvatarText = ({text, color, className}: AvatarTextProps) => {
-    const style = React.useMemo(() => ({color}), [color]);
-    const displayText = React.useMemo(() => getAvatarDisplayText(text), [text]);
+    const style = {color};
+    const displayText = getAvatarDisplayText(text);
 
     return (
         <div style={style} className={className}>

src/components/Avatar/AvatarText/utils.ts

@@ -1,5 +1,5 @@
 export const getAvatarDisplayText = (text: string) => {
-    const words = text.split(' ');
+    const words = text.split(/\s+/);
     const result =
         words.length > 1 ? [words[0][0], words[1][0]].filter(Boolean).join('') : text.slice(0, 2);
 

src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import _throttle from 'lodash/throttle';

src/components/Breadcrumbs/BreadcrumbsItem.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {Link} from '../Link';

src/components/Breadcrumbs/BreadcrumbsMore.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {DropdownMenu} from '../DropdownMenu';

src/components/Button/Button.tsx

@@ -1,12 +1,14 @@
+'use client';
+
 import React from 'react';
 
 import type {DOMProps, QAProps} from '../types';
 import {block} from '../utils/cn';
-import {isIcon} from '../utils/common';
+import {isIcon, isSvg} from '../utils/common';
 import {eventBroker} from '../utils/event-broker';
 import {isOfType} from '../utils/isOfType';
 
-import {ButtonIcon} from './ButtonIcon';
+import {ButtonIcon, getIconSide} from './ButtonIcon';
 
 import './Button.scss';
 
@@ -193,16 +195,22 @@ ButtonWithHandlers.displayName = 'Button';
 export const Button = Object.assign(ButtonWithHandlers, {Icon: ButtonIcon});
 
 const isButtonIconComponent = isOfType(ButtonIcon);
+const isSpan = isOfType<{className?: string}>('span');
+const buttonIconClassRe = RegExp(`^${b('icon')}($|\\s+\\w)`);
 
+// eslint-disable-next-line complexity
 function prepareChildren(children: React.ReactNode) {
     const items = React.Children.toArray(children);
 
     if (items.length === 1) {
         const onlyItem = items[0];
+        const isButtonIconElement =
+            isButtonIconComponent(onlyItem) ||
+            (isSpan(onlyItem) && buttonIconClassRe.test(onlyItem.props.className || ''));
 
-        if (isButtonIconComponent(onlyItem)) {
+        if (isButtonIconElement) {
             return onlyItem;
-        } else if (isIcon(onlyItem)) {
+        } else if (isIcon(onlyItem) || isSvg(onlyItem)) {
             return <Button.Icon key="icon">{onlyItem}</Button.Icon>;
         } else {
             return (
@@ -216,10 +224,12 @@ function prepareChildren(children: React.ReactNode) {
         const content = [];
 
         for (const item of items) {
-            const isIconElement = isIcon(item);
+            const isIconElement = isIcon(item) || isSvg(item);
             const isButtonIconElement = isButtonIconComponent(item);
+            const isRenderedButtonIconElement =
+                isSpan(item) && buttonIconClassRe.test(item.props.className || '');
 
-            if (isIconElement || isButtonIconElement) {
+            if (isIconElement || isButtonIconElement || isRenderedButtonIconElement) {
                 if (!startIcon && content.length === 0) {
                     const key = 'icon-start';
                     const side = 'start';
@@ -229,10 +239,14 @@ function prepareChildren(children: React.ReactNode) {
                                 {item}
                             </Button.Icon>
                         );
-                    } else {
+                    } else if (isButtonIconElement) {
                         startIcon = React.cloneElement(item, {
                             side,
                         });
+                    } else {
+                        startIcon = React.cloneElement(item, {
+                            className: b('icon', {side: getIconSide(side)}, item.props.className),
+                        });
                     }
                 } else if (!endIcon && content.length !== 0) {
                     const key = 'icon-end';
@@ -243,10 +257,14 @@ function prepareChildren(children: React.ReactNode) {
                                 {item}
                             </Button.Icon>
                         );
-                    } else {
+                    } else if (isButtonIconElement) {
                         endIcon = React.cloneElement(item, {
                             side,
                         });
+                    } else {
+                        endIcon = React.cloneElement(item, {
+                            className: b('icon', {side: getIconSide(side)}, item.props.className),
+                        });
                     }
                 }
             } else {

src/components/Button/ButtonIcon.tsx

@@ -17,23 +17,12 @@ function warnAboutPhysicalValues() {
 }
 
 export const ButtonIcon = ({side, className, children}: Props) => {
-    let sideMod = side;
-
-    if (sideMod === 'left') {
-        warnAboutPhysicalValues();
-        sideMod = 'start';
-    }
-    if (sideMod === 'right') {
-        warnAboutPhysicalValues();
-        sideMod = 'end';
-    }
-
     return (
         <span
             className={b(
                 'icon',
                 {
-                    side: sideMod,
+                    side: getIconSide(side),
                 },
                 className,
             )}
@@ -44,3 +33,18 @@ export const ButtonIcon = ({side, className, children}: Props) => {
 };
 
 ButtonIcon.displayName = 'Button.Icon';
+
+export function getIconSide(side?: 'left' | 'right' | 'start' | 'end') {
+    let sideMod = side;
+
+    if (sideMod === 'left') {
+        warnAboutPhysicalValues();
+        sideMod = 'start';
+    }
+    if (sideMod === 'right') {
+        warnAboutPhysicalValues();
+        sideMod = 'end';
+    }
+
+    return sideMod;
+}

src/components/Button/index.ts

@@ -1 +1,2 @@
 export * from './Button';
+export {ButtonIcon} from './ButtonIcon';

src/components/Card/Card.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {useActionHandlers} from '../../hooks';

src/components/Checkbox/Checkbox.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {useCheckbox} from '../../hooks/private';

src/components/Checkbox/__stories__/CheckboxShowcase.tsx

@@ -8,50 +8,50 @@ export function CheckboxShowcase() {
     return (
         <Showcase>
             <ShowcaseItem title="Size">
-                <p>
+                <div style={{marginBlock: '1em'}}>
                     <Checkbox size="m" checked={false} content="size m" />
                     <span style={{margin: '8px'}} />
                     <Checkbox size="m" checked={true} content="size m" />
                     <span style={{margin: '8px'}} />
                     <Checkbox size="m" indeterminate={true} content="size m" />
-                </p>
-                <p>
+                </div>
+                <div style={{marginBlock: '1em'}}>
                     <Checkbox size="l" checked={false} content="size l" />
                     <span style={{margin: '8px'}} />
                     <Checkbox size="l" checked={true} content="size l" />
                     <span style={{margin: '8px'}} />
                     <Checkbox size="l" indeterminate={true} content="size l" />
-                </p>
+                </div>
             </ShowcaseItem>
             <ShowcaseItem title="Disabled">
-                <p>
+                <div style={{marginBlock: '1em'}}>
                     <Checkbox checked={false} disabled content="unchecked" />
-                </p>
-                <p>
+                </div>
+                <div style={{marginBlock: '1em'}}>
                     <Checkbox indeterminate={true} disabled content="indeterminate" />
-                </p>
-                <p>
+                </div>
+                <div style={{marginBlock: '1em'}}>
                     <Checkbox checked={true} disabled content="checked" />
-                </p>
+                </div>
             </ShowcaseItem>
             <ShowcaseItem title="Uncontrolled">
-                <p>
+                <div style={{marginBlock: '1em'}}>
                     <Checkbox defaultChecked={false} content="unchecked" />
-                </p>
-                <p>
+                </div>
+                <div style={{marginBlock: '1em'}}>
                     <Checkbox defaultChecked={true} content="checked" />
-                </p>
+                </div>
             </ShowcaseItem>
             <ShowcaseItem title="Controlled">
-                <p>
+                <div style={{marginBlock: '1em'}}>
                     <Checkbox checked={false} content="unchecked" />
-                </p>
-                <p>
+                </div>
+                <div style={{marginBlock: '1em'}}>
                     <Checkbox indeterminate={true} content="indeterminate" />
-                </p>
-                <p>
+                </div>
+                <div style={{marginBlock: '1em'}}>
                     <Checkbox checked={true} content="checked" />
-                </p>
+                </div>
             </ShowcaseItem>
         </Showcase>
     );

src/components/ClipboardButton/ClipboardButton.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {ActionTooltip} from '../ActionTooltip';

src/components/CopyToClipboard/CopyToClipboard.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import ReactCopyToClipboard from 'react-copy-to-clipboard';