[FIX] clean code

Author: nDriaDev

packages/react-tools/src/components/Show.tsx

@@ -2,7 +2,7 @@ import { PropsWithChildren, ReactNode } from "react";
 
 export const Show = ({ when, fallback, children }: PropsWithChildren<{ when: boolean, fallback?: ReactNode }>) => {
 	if (!when) {
-		return fallback ? fallback : null;
+		return fallback ? <>{fallback}</> : null;
 	}
-	return children;
+	return <>{children}</>;
 }

packages/react-tools/src/hooks/api-dom/usePopover.tsx

@@ -1,5 +1,5 @@
 import { ComponentPropsWithRef, useCallback, useMemo, useRef } from "react";
-import { UsePopoverProps, UsePopoverResult } from "../../models";
+import { HTMLAttributes, UsePopoverProps, UsePopoverResult } from "../../models";
 import { useId, useMergedRef } from "../performance";
 import { useSyncExternalStore } from "../state";
 
@@ -9,7 +9,7 @@ import { useSyncExternalStore } from "../state";
  * @param {"auto"|"manual"} param.mode - popover state: __auto__ indicates that popover can be "light dismissed" by selecting outside the popover area, by contrast __manual__ popover must always be explicity hidden.
  * @param {(evt: ToggleEvent) => void} [param.onBeforeToggle] - function that will be executed before popover showed/hidden.
  * @param {(evt: ToggleEvent) => void} [param.onToggle] - function that will be executed when popover has been showed/hidden.
- * @returns {UsePopoverResult} reuslt
+ * @returns {UsePopoverResult} result
  * Object with these properties:
  * - __isSupported__: boolean that indicates if Popover API is supported or not.
  * - __isSupported__: boolean that indicates if popover is opened or not.
@@ -48,7 +48,7 @@ function usePopover({ mode, onBeforeToggle, onToggle }: UsePopoverProps): UsePop
 	const ref = useMergedRef(popoverRef, popoverListenerRef);
 
 	const Popover = useMemo(() => {
-		return (({ children, ...rest }: ComponentPropsWithRef<"div">) => {
+		return (({ children, ...rest }: ComponentPropsWithRef<"div"> & HTMLAttributes<"div">) => {
 			return "showPopover" in document.body && <div id={id} ref={ref} popover={mode} {...rest}>
 				{children}
 			</div>

packages/react-tools/src/hooks/lifecycle/useRerender.ts

@@ -1,4 +1,4 @@
-import React, { useReducer } from "react"
+import { useReducer } from "react"
 
 /**
  * **`useRerender`**: Hook that force a render.

packages/react-tools/src/index.ts

@@ -26,6 +26,7 @@ export type {
 	ExtractMiddle,
 	ExtractTail,
 	GeoLocationObject,
+	HTMLAttributes,
 	HTMLMediaControls,
 	HTMLMediaState,
 	LanguageBCP47Tags,

packages/react-tools/src/models/index.ts

@@ -15,7 +15,7 @@ export type { UseFPSProps, UseFPSResult } from './useFPS.model';
 export type { UsePointerLockProps, UsePointerLockResult } from './usePointerLock.model';
 export type { UsePIPProps, UsePIPResult } from './usePIP.model';
 export type { DocumentPictureInPictureEvent, DocumentPIPOptions, UseDocumentPIPProps, UseDocumentPIPResult } from './useDocumentPIP.model';
-export type { UsePopoverProps, UsePopoverResult } from './usePopover.model';
+export type { UsePopoverProps, UsePopoverResult, HTMLAttributes } from './usePopover.model';
 export type { UseRemotePlaybackProps, UseRemotePlaybackResult } from './useRemotePlayback.model';
 export type { UseAnimationProps, UseAnimationResult } from './useAnimation.model';
 export type { UseAudioProps, UseAudioResult } from './useAudio.model';

packages/react-tools/src/models/usePopover.model.ts

@@ -1,11 +1,9 @@
-import { ComponentPropsWithRef } from "react";
-
-declare module 'react' {
-	interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
-		popover?: "auto" | "manual";
-	}
+import { ComponentPropsWithRef, AriaAttributes, DOMAttributes } from "react";
 
+export interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
+	popover?: "auto" | "manual";
 }
+
 export interface UsePopoverProps {
 	mode: "auto" | "manual";
 	onBeforeToggle?: (evt: ToggleEvent) => void;
@@ -18,5 +16,5 @@ export interface UsePopoverResult {
 	showPopover: () => void,
 	hidePopover: () => void,
 	togglePopover: () => void,
-	Popover: ({ children, ...rest }: ComponentPropsWithRef<"div">) => false | JSX.Element;
+	Popover: ({ children, ...rest }: ComponentPropsWithRef<"div"> & HTMLAttributes<"div">) => false | JSX.Element;
 }