diff --git a/packages/core/icons/assets/fullscreen-enter.svg b/packages/core/icons/assets/fullscreen-enter.svg index b55a34fe..3ce4fa26 100644 --- a/packages/core/icons/assets/fullscreen-enter.svg +++ b/packages/core/icons/assets/fullscreen-enter.svg @@ -1,12 +1,10 @@ - - - - - + + + diff --git a/packages/core/icons/assets/fullscreen-exit.svg b/packages/core/icons/assets/fullscreen-exit.svg index baacbaa2..8f9f2d34 100644 --- a/packages/core/icons/assets/fullscreen-exit.svg +++ b/packages/core/icons/assets/fullscreen-exit.svg @@ -1,12 +1,10 @@ - - - - - + + + diff --git a/packages/core/icons/assets/micro-fullscreen-enter.svg b/packages/core/icons/assets/micro-fullscreen-enter.svg new file mode 100644 index 00000000..7e9c5629 --- /dev/null +++ b/packages/core/icons/assets/micro-fullscreen-enter.svg @@ -0,0 +1,8 @@ + + + + diff --git a/packages/core/icons/assets/micro-fullscreen-exit.svg b/packages/core/icons/assets/micro-fullscreen-exit.svg new file mode 100644 index 00000000..be2932f4 --- /dev/null +++ b/packages/core/icons/assets/micro-fullscreen-exit.svg @@ -0,0 +1,8 @@ + + + + diff --git a/packages/core/icons/assets/micro-pause.svg b/packages/core/icons/assets/micro-pause.svg new file mode 100644 index 00000000..63c735ee --- /dev/null +++ b/packages/core/icons/assets/micro-pause.svg @@ -0,0 +1,5 @@ + + + diff --git a/packages/core/icons/assets/micro-play.svg b/packages/core/icons/assets/micro-play.svg new file mode 100644 index 00000000..536d5b83 --- /dev/null +++ b/packages/core/icons/assets/micro-play.svg @@ -0,0 +1,5 @@ + + + diff --git a/packages/core/icons/assets/micro-volume-high.svg b/packages/core/icons/assets/micro-volume-high.svg new file mode 100644 index 00000000..6a39c956 --- /dev/null +++ b/packages/core/icons/assets/micro-volume-high.svg @@ -0,0 +1,8 @@ + + + + diff --git a/packages/core/icons/assets/micro-volume-low.svg b/packages/core/icons/assets/micro-volume-low.svg new file mode 100644 index 00000000..26acb97c --- /dev/null +++ b/packages/core/icons/assets/micro-volume-low.svg @@ -0,0 +1,5 @@ + + + diff --git a/packages/core/icons/assets/micro-volume-off.svg b/packages/core/icons/assets/micro-volume-off.svg new file mode 100644 index 00000000..158b7435 --- /dev/null +++ b/packages/core/icons/assets/micro-volume-off.svg @@ -0,0 +1,5 @@ + + + diff --git a/packages/core/icons/assets/pause.svg b/packages/core/icons/assets/pause.svg index ed65d4ba..94b7dc64 100644 --- a/packages/core/icons/assets/pause.svg +++ b/packages/core/icons/assets/pause.svg @@ -1,6 +1,4 @@ - - - - - + + + diff --git a/packages/core/icons/assets/play.svg b/packages/core/icons/assets/play.svg index a333b956..9646cc51 100644 --- a/packages/core/icons/assets/play.svg +++ b/packages/core/icons/assets/play.svg @@ -1,6 +1,5 @@ - + diff --git a/packages/core/icons/assets/spinner.svg b/packages/core/icons/assets/spinner.svg index c4525310..8ef97004 100644 --- a/packages/core/icons/assets/spinner.svg +++ b/packages/core/icons/assets/spinner.svg @@ -1,65 +1,35 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/core/icons/assets/volume-high.svg b/packages/core/icons/assets/volume-high.svg index f16ae1bf..bae36d94 100755 --- a/packages/core/icons/assets/volume-high.svg +++ b/packages/core/icons/assets/volume-high.svg @@ -1,10 +1,8 @@ - - - - - + + + diff --git a/packages/core/icons/assets/volume-low.svg b/packages/core/icons/assets/volume-low.svg index a5477269..07fcbb44 100644 --- a/packages/core/icons/assets/volume-low.svg +++ b/packages/core/icons/assets/volume-low.svg @@ -1,6 +1,5 @@ - + diff --git a/packages/core/icons/assets/volume-off.svg b/packages/core/icons/assets/volume-off.svg index cd794438..e776b6a9 100644 --- a/packages/core/icons/assets/volume-off.svg +++ b/packages/core/icons/assets/volume-off.svg @@ -1,6 +1,5 @@ - + diff --git a/packages/core/icons/src/index.ts b/packages/core/icons/src/index.ts index b7c9cf83..ed8d338a 100644 --- a/packages/core/icons/src/index.ts +++ b/packages/core/icons/src/index.ts @@ -1,22 +1,38 @@ // Import SVG files as strings -import fullscreenEnterSvg from '../assets/fullscreen-enter.svg'; -import fullscreenExitSvg from '../assets/fullscreen-exit.svg'; -import pauseSvg from '../assets/pause.svg'; -import playSvg from '../assets/play.svg'; -import volumeHighSvg from '../assets/volume-high.svg'; -import volumeLowSvg from '../assets/volume-low.svg'; -import volumeOffSvg from '../assets/volume-off.svg'; +import fullscreenEnter from '../assets/fullscreen-enter.svg'; +import fullscreenExit from '../assets/fullscreen-exit.svg'; +import microFullscreenEnter from '../assets/micro-fullscreen-enter.svg'; +import microFullscreenExit from '../assets/micro-fullscreen-exit.svg'; +import microPause from '../assets/micro-pause.svg'; +import microPlay from '../assets/micro-play.svg'; +import microVolumeHigh from '../assets/micro-volume-high.svg'; +import microVolumeLow from '../assets/micro-volume-low.svg'; +import microVolumeOff from '../assets/micro-volume-off.svg'; +import pause from '../assets/pause.svg'; +import play from '../assets/play.svg'; +import volumeHigh from '../assets/volume-high.svg'; +import volumeLow from '../assets/volume-low.svg'; +import volumeOff from '../assets/volume-off.svg'; export const SVG_ICONS: Record = { - play: playSvg, - pause: pauseSvg, - volumeHigh: volumeHighSvg, - volumeLow: volumeLowSvg, - volumeOff: volumeOffSvg, - fullscreenEnter: fullscreenEnterSvg, - fullscreenExit: fullscreenExitSvg, + play, + pause, + volumeHigh, + volumeLow, + volumeOff, + fullscreenEnter, + fullscreenExit, + microPlay, + microPause, + microVolumeHigh, + microVolumeLow, + microVolumeOff, + microFullscreenEnter, + microFullscreenExit, }; +// TODO: Check if we need below? It seems to be unused now. + // Legacy interface for backward compatibility export interface IconDefinition { name: string; diff --git a/packages/react/react-icons/package.json b/packages/react/react-icons/package.json index d940c57d..9612e85e 100644 --- a/packages/react/react-icons/package.json +++ b/packages/react/react-icons/package.json @@ -24,7 +24,7 @@ "dist" ], "scripts": { - "build": "tsdown", + "build": "pnpm generate:icons && tsdown", "build:watch": "tsdown --watch --silent", "dev": "pnpm generate:icons && pnpm run build:watch", "clean": "rm -rf dist src/generated-icons", diff --git a/packages/react/react/src/components/Popover.tsx b/packages/react/react/src/components/Popover.tsx index 5584689a..44da2672 100644 --- a/packages/react/react/src/components/Popover.tsx +++ b/packages/react/react/src/components/Popover.tsx @@ -1,11 +1,12 @@ import type { Placement } from '@floating-ui/react'; -import type { ReactNode } from 'react'; +import type { MutableRefObject, ReactNode } from 'react'; import { autoUpdate, flip, FloatingPortal, offset, + safePolygon, shift, useDismiss, useFloating, @@ -15,7 +16,16 @@ import { useRole, } from '@floating-ui/react'; -import React, { createContext, useContext, useEffect, useState } from 'react'; +import { + Children, + cloneElement, + createContext, + useCallback, + useContext, + useEffect, + useMemo, + useState, +} from 'react'; interface PopoverContextType { open: boolean; @@ -52,7 +62,7 @@ interface PopoverPopupProps { interface PopoverPortalProps { children: ReactNode; - root?: HTMLElement | ShadowRoot | React.MutableRefObject | null; + root?: HTMLElement | ShadowRoot | MutableRefObject | null; rootId?: string; } @@ -85,6 +95,7 @@ function PopoverRoot({ openOnHover = false, delay = 0, closeDelay = 0, children open: delay, close: closeDelay, }, + handleClose: safePolygon({ blockPointerEvents: true }), }); const focus = useFocus(context); const dismiss = useDismiss(context); @@ -92,12 +103,12 @@ function PopoverRoot({ openOnHover = false, delay = 0, closeDelay = 0, children const { getReferenceProps, getFloatingProps } = useInteractions([hover, focus, dismiss, role]); - const updatePositioning = (newPlacement: Placement, newSideOffset: number) => { + const updatePositioning = useCallback((newPlacement: Placement, newSideOffset: number) => { setPlacement(newPlacement); setSideOffset(newSideOffset); - }; + }, []); - const value: PopoverContextType = { + const value: PopoverContextType = useMemo(() => ({ open, setOpen, refs, @@ -106,7 +117,7 @@ function PopoverRoot({ openOnHover = false, delay = 0, closeDelay = 0, children getFloatingProps, context, updatePositioning, - }; + }), [open, refs, floatingStyles, getReferenceProps, getFloatingProps, context, updatePositioning]); return {children}; } @@ -114,7 +125,8 @@ function PopoverRoot({ openOnHover = false, delay = 0, closeDelay = 0, children function PopoverTrigger({ children }: PopoverTriggerProps): JSX.Element { const { refs, getReferenceProps } = usePopoverContext(); - return React.cloneElement(React.Children.only(children) as JSX.Element, { + // eslint-disable-next-line react/no-clone-element, react/no-children-only + return cloneElement(Children.only(children) as JSX.Element, { ref: refs.setReference, ...getReferenceProps(), }); @@ -158,6 +170,7 @@ function PopoverPortal({ children, root, rootId }: PopoverPortalProps): JSX.Elem } // Export compound component +// eslint-disable-next-line react-refresh/only-export-components export const Popover: { Root: typeof PopoverRoot; Trigger: typeof PopoverTrigger; diff --git a/packages/react/react/src/components/Tooltip.tsx b/packages/react/react/src/components/Tooltip.tsx index 061f0b9b..35457957 100644 --- a/packages/react/react/src/components/Tooltip.tsx +++ b/packages/react/react/src/components/Tooltip.tsx @@ -1,5 +1,5 @@ import type { Placement } from '@floating-ui/react'; -import type { ReactNode } from 'react'; +import type { MutableRefObject, ReactNode, RefObject } from 'react'; import { arrow, @@ -17,7 +17,17 @@ import { useTransitionStatus, } from '@floating-ui/react'; -import React, { createContext, useContext, useEffect, useRef, useState } from 'react'; +import { + Children, + cloneElement, + createContext, + useCallback, + useContext, + useEffect, + useMemo, + useRef, + useState, +} from 'react'; interface UpdatePositioningProps { side: Placement; @@ -26,7 +36,7 @@ interface UpdatePositioningProps { } interface TooltipContextType { - arrowRef: React.MutableRefObject; + arrowRef: MutableRefObject; context: ReturnType['context']; transitionStatus: ReturnType['status']; getReferenceProps: ReturnType['getReferenceProps']; @@ -63,7 +73,7 @@ interface TooltipArrowProps { interface TooltipPortalProps { children: ReactNode; - root?: HTMLElement | ShadowRoot | React.MutableRefObject | null; + root?: HTMLElement | ShadowRoot | MutableRefObject | null; rootId?: string; } @@ -116,6 +126,7 @@ function TooltipRoot({ delay = 600, closeDelay = 0, children }: TooltipRootProps const { status: transitionStatus } = useTransitionStatus(context); const hover = useHover(context, { + restMs: 300, delay: { open: delay, close: closeDelay, @@ -127,20 +138,20 @@ function TooltipRoot({ delay = 600, closeDelay = 0, children }: TooltipRootProps const { getReferenceProps, getFloatingProps } = useInteractions([hover, focus, dismiss, role]); - const updatePositioning = ({ side, sideOffset, collisionPadding }: UpdatePositioningProps) => { + const updatePositioning = useCallback(({ side, sideOffset, collisionPadding }: UpdatePositioningProps) => { setPlacement(side); setSideOffset(sideOffset); setCollisionPadding(collisionPadding); - }; + }, []); - const value: TooltipContextType = { + const value: TooltipContextType = useMemo(() => ({ getReferenceProps, getFloatingProps, context, updatePositioning, arrowRef, transitionStatus, - }; + }), [getReferenceProps, getFloatingProps, context, updatePositioning, transitionStatus]); return {children}; } @@ -149,7 +160,8 @@ function TooltipTrigger({ children }: TooltipTriggerProps): JSX.Element { const { context, getReferenceProps } = useTooltipContext(); const { refs, open } = context; - return React.cloneElement(React.Children.only(children) as JSX.Element, { + // eslint-disable-next-line react/no-clone-element, react/no-children-only + return cloneElement(Children.only(children) as JSX.Element, { ref: refs.setReference, ...getReferenceProps(), 'data-popup-open': open ? '' : undefined, @@ -170,9 +182,9 @@ function TooltipPositioner({ updatePositioning({ side, sideOffset, collisionPadding }); }, [side, sideOffset, collisionPadding, updatePositioning]); - const positionerContextValue: TooltipPositionerContextType = { + const positionerContextValue: TooltipPositionerContextType = useMemo(() => ({ side, - }; + }), [side]); return ( @@ -222,7 +234,7 @@ function TooltipArrow({ className = '', children }: TooltipArrowProps): JSX.Elem return (
} + ref={arrowRef as RefObject} className={className} aria-hidden="true" data-side={side} @@ -245,6 +257,7 @@ function TooltipPortal({ children, root, rootId = '@default_portal_id' }: Toolti } // Export compound component +// eslint-disable-next-line react-refresh/only-export-components export const Tooltip: { Root: typeof TooltipRoot; Trigger: typeof TooltipTrigger; diff --git a/packages/react/react/src/skins/default/MediaSkinDefault.tsx b/packages/react/react/src/skins/default/MediaSkinDefault.tsx index a1972fb8..feee0996 100644 --- a/packages/react/react/src/skins/default/MediaSkinDefault.tsx +++ b/packages/react/react/src/skins/default/MediaSkinDefault.tsx @@ -36,7 +36,7 @@ export default function MediaSkinDefault({ children, className = '' }: SkinProps