fix(slot): Change slot to memoize.

SimYunSup · SimYunSup · commit c2ee97a6a950 · 2025-12-01T04:35:40.000Z
diff --git a/packages/core/src/components/breadcrumb/breadcrumb.tsx b/packages/core/src/components/breadcrumb/breadcrumb.tsx
@@ -6,8 +6,8 @@ import { useRender } from '@base-ui-components/react';
 import { MoreCommonOutlineIcon, SlashOutlineIcon } from '@vapor-ui/icons';
 import clsx from 'clsx';
 
+import { useSlot } from '~/hooks/use-slot';
 import { createContext } from '~/libs/create-context';
-import { createSlot } from '~/libs/create-slot';
 import { createSplitProps } from '~/utils/create-split-props';
 import { resolveStyles } from '~/utils/resolve-styles';
 import type { VComponentProps } from '~/utils/types';
@@ -152,7 +152,7 @@ export const BreadcrumbSeparator = forwardRef<HTMLLIElement, BreadcrumbSeparator
         const { render, className, children, ...componentProps } = resolveStyles(props);
 
         const { size } = useBreadcrumbContext();
-        const IconElement = createSlot(children || <SlashOutlineIcon size="100%" />);
+        const IconElement = useSlot(children, <SlashOutlineIcon size="100%" />);
 
         return useRender({
             ref,
@@ -180,7 +180,7 @@ export const BreadcrumbEllipsisPrimitive = forwardRef<
     const { render, className, children, ...componentProps } = resolveStyles(props);
 
     const { size } = useBreadcrumbContext();
-    const IconElement = createSlot(children || <MoreCommonOutlineIcon size="100%" />);
+    const IconElement = useSlot(children, <MoreCommonOutlineIcon size="100%" />);
 
     return useRender({
         ref,
diff --git a/packages/core/src/components/checkbox/checkbox.tsx b/packages/core/src/components/checkbox/checkbox.tsx
@@ -6,8 +6,8 @@ import { forwardRef } from 'react';
 import { Checkbox as BaseCheckbox } from '@base-ui-components/react/checkbox';
 import clsx from 'clsx';
 
+import { useSlot } from '~/hooks/use-slot';
 import { createContext } from '~/libs/create-context';
-import { createSlot } from '~/libs/create-slot';
 import { createSplitProps } from '~/utils/create-split-props';
 import { createDataAttributes } from '~/utils/data-attributes';
 import { resolveStyles } from '~/utils/resolve-styles';
@@ -40,7 +40,7 @@ export const CheckboxRoot = forwardRef<HTMLButtonElement, CheckboxRoot.Props>((p
     const { size, invalid, indeterminate } = variantProps;
     const dataAttrs = createDataAttributes({ invalid });
 
-    const IndicatorElement = createSlot(children || <CheckboxIndicatorPrimitive />);
+    const IndicatorElement = useSlot(children, <CheckboxIndicatorPrimitive />);
 
     return (
         <CheckboxProvider value={{ size, indeterminate }}>
diff --git a/packages/core/src/components/dialog/dialog.tsx b/packages/core/src/components/dialog/dialog.tsx
@@ -7,8 +7,8 @@ import { Dialog as BaseDialog } from '@base-ui-components/react/dialog';
 import { useRender } from '@base-ui-components/react/use-render';
 import clsx from 'clsx';
 
+import { useSlot } from '~/hooks/use-slot';
 import { createContext } from '~/libs/create-context';
-import { createSlot } from '~/libs/create-slot';
 import { resolveStyles } from '~/utils/resolve-styles';
 import type { VComponentProps } from '~/utils/types';
 
@@ -92,8 +92,8 @@ DialogPopupPrimitive.displayName = 'Dialog.PopupPrimitive';
 export const DialogPopup = forwardRef<HTMLDivElement, DialogPopup.Props>((props, ref) => {
     const { portalElement, overlayElement, ...componentProps } = resolveStyles(props);
 
-    const PortalElement = createSlot(portalElement || <DialogPortalPrimitive />);
-    const DialogOverlayPrimitiveElement = createSlot(overlayElement || <DialogOverlayPrimitive />);
+    const PortalElement = useSlot(portalElement, <DialogPortalPrimitive />);
+    const DialogOverlayPrimitiveElement = useSlot(overlayElement, <DialogOverlayPrimitive />);
 
     return (
         <PortalElement>
diff --git a/packages/core/src/components/icon-button/icon-button.tsx b/packages/core/src/components/icon-button/icon-button.tsx
@@ -2,7 +2,7 @@ import { forwardRef, useMemo } from 'react';
 
 import clsx from 'clsx';
 
-import { createSlot } from '~/libs/create-slot';
+import { useSlot } from '~/hooks/use-slot';
 import { createSplitProps } from '~/utils/create-split-props';
 import { resolveStyles } from '~/utils/resolve-styles';
 import type { VComponentProps } from '~/utils/types';
@@ -25,7 +25,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButton.Props>((props
 
     const { size } = otherProps;
 
-    const IconElement = useMemo(() => createSlot(children), [children]);
+    const IconElement = useSlot(children);
 
     return (
         <Button
diff --git a/packages/core/src/components/menu/menu.tsx b/packages/core/src/components/menu/menu.tsx
@@ -7,8 +7,8 @@ import { Menu as BaseMenu } from '@base-ui-components/react';
 import { ChevronRightOutlineIcon, ConfirmOutlineIcon } from '@vapor-ui/icons';
 import clsx from 'clsx';
 
+import { useSlot } from '~/hooks/use-slot';
 import { createContext } from '~/libs/create-context';
-import { createSlot } from '~/libs/create-slot';
 import { composeRefs } from '~/utils/compose-refs';
 import { resolveStyles } from '~/utils/resolve-styles';
 import type { VComponentProps } from '~/utils/types';
@@ -104,8 +104,8 @@ MenuPopupPrimitive.displayName = 'Menu.PopupPrimitive';
 
 export const MenuPopup = forwardRef<HTMLDivElement, MenuPopup.Props>(
     ({ portalElement, positionerElement, ...props }, ref) => {
-        const PortalElement = createSlot(portalElement || <MenuPortalPrimitive />);
-        const PositionerElement = createSlot(positionerElement || <MenuPositionerPrimitive />);
+        const PortalElement = useSlot(portalElement, <MenuPortalPrimitive />);
+        const PositionerElement = useSlot(positionerElement, <MenuPositionerPrimitive />);
 
         return (
             <PortalElement>
@@ -270,9 +270,10 @@ MenuSubmenuPopupPrimitive.displayName = 'Menu.SubmenuPopupPrimitive';
 
 export const MenuSubmenuPopup = forwardRef<HTMLDivElement, MenuSubmenuPopup.Props>(
     ({ portalElement, positionerElement, ...props }, ref) => {
-        const PortalElement = createSlot(portalElement || <MenuPortalPrimitive />);
-        const PositionerElement = createSlot(
-            positionerElement || <MenuPositionerPrimitive side="right" sideOffset={0} />,
+        const PortalElement = useSlot(portalElement, <MenuPortalPrimitive />);
+        const PositionerElement = useSlot(
+            positionerElement,
+            <MenuPositionerPrimitive side="right" sideOffset={0} />,
         );
 
         return (
diff --git a/packages/core/src/components/multi-select/multi-select.tsx b/packages/core/src/components/multi-select/multi-select.tsx
@@ -7,8 +7,8 @@ import { Select as BaseSelect } from '@base-ui-components/react';
 import { ChevronDownOutlineIcon, ConfirmOutlineIcon } from '@vapor-ui/icons';
 import clsx from 'clsx';
 
+import { useSlot } from '~/hooks/use-slot';
 import { createContext } from '~/libs/create-context';
-import { createSlot } from '~/libs/create-slot';
 import { createSplitProps } from '~/utils/create-split-props';
 import { createDataAttributes } from '~/utils/data-attributes';
 import { resolveStyles } from '~/utils/resolve-styles';
@@ -181,7 +181,7 @@ export const MultiSelectTriggerIconPrimitive = forwardRef<
     const { className, children, ...componentProps } = resolveStyles(props);
 
     const { size } = useMultiSelectContext();
-    const IconElement = createSlot(children || <ChevronDownOutlineIcon size="100%" />);
+    const IconElement = useSlot(children, <ChevronDownOutlineIcon size="100%" />);
 
     return (
         <BaseSelect.Icon
@@ -273,10 +273,8 @@ MultiSelectPopupPrimitive.displayName = 'MultiSelect.PopupPrimitive';
 
 export const MultiSelectPopup = forwardRef<HTMLDivElement, MultiSelectPopup.Props>(
     ({ portalElement, positionerElement, ...props }, ref) => {
-        const PortalElement = createSlot(portalElement || <MultiSelectPortalPrimitive />);
-        const PositionerElement = createSlot(
-            positionerElement || <MultiSelectPositionerPrimitive />,
-        );
+        const PortalElement = useSlot(portalElement, <MultiSelectPortalPrimitive />);
+        const PositionerElement = useSlot(positionerElement, <MultiSelectPositionerPrimitive />);
 
         return (
             <PortalElement>
@@ -318,7 +316,7 @@ export const MultiSelectItemIndicatorPrimitive = forwardRef<
 >((props, ref) => {
     const { className, children, ...componentProps } = resolveStyles(props);
 
-    const IconElement = createSlot(children || <ConfirmOutlineIcon size="100%" />);
+    const IconElement = useSlot(children, <ConfirmOutlineIcon size="100%" />);
 
     return (
         <BaseSelect.ItemIndicator
diff --git a/packages/core/src/components/navigation-menu/navigation-menu.tsx b/packages/core/src/components/navigation-menu/navigation-menu.tsx
@@ -8,8 +8,8 @@ import { ChevronDownOutlineIcon } from '@vapor-ui/icons';
 import clsx from 'clsx';
 
 import { useMutationObserver } from '~/hooks/use-mutation-observer';
+import { useSlot } from '~/hooks/use-slot';
 import { createContext } from '~/libs/create-context';
-import { createSlot } from '~/libs/create-slot';
 import { vars } from '~/styles/themes.css';
 import { composeRefs } from '~/utils/compose-refs';
 import { createSplitProps } from '~/utils/create-split-props';
@@ -167,7 +167,7 @@ export const NavigationMenuTriggerIndicatorPrimitive = forwardRef<
 >((props, ref) => {
     const { className, children, ...componentProps } = resolveStyles(props);
 
-    const IconElement = createSlot(children || <ChevronDownOutlineIcon />);
+    const IconElement = useSlot(children, <ChevronDownOutlineIcon />);
 
     return (
         <BaseNavigationMenu.Icon
@@ -403,11 +403,9 @@ NavigationMenuViewportPrimitive.displayName = 'NavigationMenu.ViewportPrimitive'
 
 export const NavigationMenuViewport = forwardRef<HTMLDivElement, NavigationMenuViewport.Props>(
     ({ portalElement, positionerElement, popupElement, className, ...props }, ref) => {
-        const PortalElement = createSlot(portalElement ?? <NavigationMenuPortalPrimitive />);
-        const PopupElement = createSlot(popupElement ?? <NavigationMenuPopupPrimitive />);
-        const PositionerElement = createSlot(
-            positionerElement ?? <NavigationMenuPositionerPrimitive />,
-        );
+        const PortalElement = useSlot(portalElement, <NavigationMenuPortalPrimitive />);
+        const PopupElement = useSlot(popupElement, <NavigationMenuPopupPrimitive />);
+        const PositionerElement = useSlot(positionerElement, <NavigationMenuPositionerPrimitive />);
 
         return (
             <PortalElement>
diff --git a/packages/core/src/components/popover/popover.tsx b/packages/core/src/components/popover/popover.tsx
@@ -7,7 +7,7 @@ import { Popover as BasePopover } from '@base-ui-components/react/popover';
 import clsx from 'clsx';
 
 import { useMutationObserver } from '~/hooks/use-mutation-observer';
-import { createSlot } from '~/libs/create-slot';
+import { useSlot } from '~/hooks/use-slot';
 import { vars } from '~/styles/themes.css';
 import { composeRefs } from '~/utils/compose-refs';
 import { resolveStyles } from '~/utils/resolve-styles';
@@ -157,8 +157,8 @@ const extractPositions = (dataset: DOMStringMap) => {
 
 export const PopoverPopup = forwardRef<HTMLDivElement, PopoverPopup.Props>(
     ({ portalElement, positionerElement, ...props }, ref) => {
-        const PortalElement = createSlot(portalElement || <PopoverPortalPrimitive />);
-        const PositionerElement = createSlot(positionerElement || <PopoverPositionerPrimitive />);
+        const PortalElement = useSlot(portalElement, <PopoverPortalPrimitive />);
+        const PositionerElement = useSlot(positionerElement, <PopoverPositionerPrimitive />);
 
         return (
             <PortalElement>
diff --git a/packages/core/src/components/radio/radio.tsx b/packages/core/src/components/radio/radio.tsx
@@ -5,7 +5,7 @@ import { forwardRef } from 'react';
 import { Radio as BaseRadio } from '@base-ui-components/react';
 import clsx from 'clsx';
 
-import { createSlot } from '~/libs/create-slot';
+import { useSlot } from '~/hooks/use-slot';
 import { createSplitProps } from '~/utils/create-split-props';
 import { createDataAttributes } from '~/utils/data-attributes';
 import { resolveStyles } from '~/utils/resolve-styles';
@@ -36,7 +36,7 @@ export const RadioRoot = forwardRef<HTMLButtonElement, RadioRoot.Props>((props,
 
     const dataAttrs = createDataAttributes({ invalid });
 
-    const IndicatorElement = createSlot(children || <RadioIndicatorPrimitive />);
+    const IndicatorElement = useSlot(children, <RadioIndicatorPrimitive />);
 
     return (
         <BaseRadio.Root
diff --git a/packages/core/src/components/select/select.tsx b/packages/core/src/components/select/select.tsx
@@ -7,8 +7,8 @@ import { Select as BaseSelect } from '@base-ui-components/react';
 import { ChevronDownOutlineIcon, ConfirmOutlineIcon } from '@vapor-ui/icons';
 import clsx from 'clsx';
 
+import { useSlot } from '~/hooks/use-slot';
 import { createContext } from '~/libs/create-context';
-import { createSlot } from '~/libs/create-slot';
 import { createSplitProps } from '~/utils/create-split-props';
 import { createDataAttributes } from '~/utils/data-attributes';
 import { resolveStyles } from '~/utils/resolve-styles';
@@ -153,7 +153,7 @@ export const SelectTriggerIconPrimitive = forwardRef<
 
     const { size } = useSelectContext();
 
-    const IconElement = createSlot(children || <ChevronDownOutlineIcon size="100%" />);
+    const IconElement = useSlot(children, <ChevronDownOutlineIcon size="100%" />);
 
     return (
         <BaseSelect.Icon
@@ -247,8 +247,8 @@ SelectPopupPrimitive.displayName = 'Select.PopupPrimitive';
 
 export const SelectPopup = forwardRef<HTMLDivElement, SelectPopup.Props>(
     ({ portalElement, positionerElement, ...props }, ref) => {
-        const PortalElement = createSlot(portalElement || <SelectPortalPrimitive />);
-        const PositionerElement = createSlot(positionerElement || <SelectPositionerPrimitive />);
+        const PortalElement = useSlot(portalElement, <SelectPortalPrimitive />);
+        const PositionerElement = useSlot(positionerElement, <SelectPositionerPrimitive />);
 
         return (
             <PortalElement>
@@ -289,7 +289,7 @@ export const SelectItemIndicatorPrimitive = forwardRef<
     SelectItemIndicatorPrimitive.Props
 >((props, ref) => {
     const { className, children, ...componentProps } = resolveStyles(props);
-    const IconElement = createSlot(children || <ConfirmOutlineIcon />);
+    const IconElement = useSlot(children, <ConfirmOutlineIcon />);
 
     return (
         <BaseSelect.ItemIndicator
diff --git a/packages/core/src/components/sheet/sheet.tsx b/packages/core/src/components/sheet/sheet.tsx
@@ -9,10 +9,10 @@ import { useEventCallback } from '@base-ui-components/utils/useEventCallback';
 import clsx from 'clsx';
 
 import { useOpenChangeComplete } from '~/hooks/use-open-change-complete';
+import { useSlot } from '~/hooks/use-slot';
 import type { TransitionStatus } from '~/hooks/use-transition-status';
 import { useTransitionStatus } from '~/hooks/use-transition-status';
 import { createContext } from '~/libs/create-context';
-import { createSlot } from '~/libs/create-slot';
 import { composeRefs } from '~/utils/compose-refs';
 import { createSplitProps } from '~/utils/create-split-props';
 import { createDataAttributes } from '~/utils/data-attributes';
@@ -190,9 +190,9 @@ SheetPopupPrimitive.displayName = 'Sheet.PopupPrimitive';
 
 export const SheetPopup = forwardRef<HTMLDivElement, SheetPopup.Props>(
     ({ portalElement, overlayElement, positionerElement, ...props }, ref) => {
-        const PortalElement = createSlot(portalElement || <SheetPortalPrimitive />);
-        const OverlayElement = createSlot(overlayElement || <SheetOverlayPrimitive />);
-        const PositionerElement = createSlot(positionerElement || <SheetPositionerPrimitive />);
+        const PortalElement = useSlot(portalElement, <SheetPortalPrimitive />);
+        const OverlayElement = useSlot(overlayElement, <SheetOverlayPrimitive />);
+        const PositionerElement = useSlot(positionerElement, <SheetPositionerPrimitive />);
 
         return (
             <PortalElement>
diff --git a/packages/core/src/components/switch/switch.tsx b/packages/core/src/components/switch/switch.tsx
@@ -1,12 +1,12 @@
 'use client';
 
-import { forwardRef, useMemo } from 'react';
+import { forwardRef } from 'react';
 
 import { Switch as BaseSwitch } from '@base-ui-components/react';
 import clsx from 'clsx';
 
+import { useSlot } from '~/hooks/use-slot';
 import { createContext } from '~/libs/create-context';
-import { createSlot } from '~/libs/create-slot';
 import { createSplitProps } from '~/utils/create-split-props';
 import { createDataAttributes } from '~/utils/data-attributes';
 import { resolveStyles } from '~/utils/resolve-styles';
@@ -40,7 +40,7 @@ export const SwitchRoot = forwardRef<HTMLButtonElement, SwitchRoot.Props>((props
 
     const dataAttrs = createDataAttributes({ invalid });
 
-    const ThumbElement = useMemo(() => createSlot(<SwitchThumbPrimitive />), []);
+    const ThumbElement = useSlot(<SwitchThumbPrimitive />);
     const children = childrenProp || <ThumbElement />;
 
     return (
diff --git a/packages/core/src/components/tooltip/tooltip.tsx b/packages/core/src/components/tooltip/tooltip.tsx
@@ -7,7 +7,7 @@ import { Tooltip as BaseTooltip } from '@base-ui-components/react/tooltip';
 import clsx from 'clsx';
 
 import { useMutationObserver } from '~/hooks/use-mutation-observer';
-import { createSlot } from '~/libs/create-slot';
+import { useSlot } from '~/hooks/use-slot';
 import { vars } from '~/styles/themes.css';
 import { composeRefs } from '~/utils/compose-refs';
 import { resolveStyles } from '~/utils/resolve-styles';
@@ -155,9 +155,10 @@ const extractPositions = (dataset: DOMStringMap) => {
 
 export const TooltipPopup = forwardRef<HTMLDivElement, TooltipPopup.Props>(
     ({ portalElement, positionerElement, ...props }, ref) => {
-        const PortalElement = createSlot(portalElement || <TooltipPortalPrimitive />);
-        const PositionerElement = createSlot(
-            positionerElement || <TooltipPositionerPrimitive side="top" align="center" />,
+        const PortalElement = useSlot(portalElement, <TooltipPortalPrimitive />);
+        const PositionerElement = useSlot(
+            positionerElement,
+            <TooltipPositionerPrimitive side="top" align="center" />,
         );
 
         return (
diff --git a/packages/core/src/hooks/use-slot.ts b/packages/core/src/hooks/use-slot.ts
@@ -0,0 +1,39 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import { Children, Fragment, cloneElement, forwardRef, isValidElement, useMemo } from 'react';
+
+import { composeRefs } from '~/utils/compose-refs';
+import { getElementRef } from '~/utils/get-element-ref';
+import { mergeProps } from '~/utils/merge-props';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type Any = any;
+
+interface SlotProps extends HTMLAttributes<HTMLElement> {}
+
+export const useSlot = <Element extends Any, Props extends SlotProps>(
+    _children: ReactNode,
+    fallback?: ReactNode,
+) => {
+    const Slot = useMemo(
+        () =>
+            forwardRef<Element, Props>((slotProps, forwardedRef) => {
+                const children = _children || fallback;
+                if (!isValidElement(children)) {
+                    return Children.count(children) > 1 ? Children.only(null) : null;
+                }
+
+                const childrenRef = getElementRef(children);
+                const props = mergeProps(slotProps || {}, children.props);
+
+                if (children.type !== Fragment && children.props.ref) {
+                    props.ref = composeRefs(forwardedRef, childrenRef);
+                }
+
+                return cloneElement(children, props);
+                // eslint-disable-next-line react-hooks/exhaustive-deps
+            }),
+        [_children],
+    );
+
+    return Slot;
+};
diff --git a/packages/core/src/libs/create-slot.ts b/packages/core/src/libs/create-slot.ts
