@a-type/ui 1.3.0 → 1.3.2

package/src/components/tooltip/Tooltip.tsx

@@ -1,63 +1,68 @@
-'use client';
-
-import { ComponentPropsWithoutRef, forwardRef } from 'react';
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import classNames from 'clsx';
-
-function Content({
-	children,
-	className,
-	...props
-}: TooltipPrimitive.TooltipContentProps) {
-	return (
-		<TooltipPrimitive.Portal>
-			<TooltipPrimitive.Content
-				className={classNames(
-					'layer-components:(relative rounded-md py-2 px-3 bg-black text-white text-sm leading-tight shadow-sm select-none hidden z-tooltip sm:display-initial)',
-					'[&[data-state=delayed-open]]:display-initial',
-					'[&[data-state=instant-open]]:display-initial',
-					'layer-components:transform-origin-[var(--radix-tooltip-content-transform-origin)]',
-					'layer-components:[&[data-state=delayed-open]]:animate-popover-in',
-					className,
-				)}
-				{...props}
-			>
-				{children}
-				<TooltipPrimitive.Arrow className="fill-black" />
-			</TooltipPrimitive.Content>
-		</TooltipPrimitive.Portal>
-	);
-}
-
-export const TooltipProvider = TooltipPrimitive.Provider;
-
-export interface TooltipProps
-	extends Omit<TooltipPrimitive.TooltipTriggerProps, 'content'> {
-	content: React.ReactNode;
-	open?: boolean;
-	disabled?: boolean;
-}
-
-export const Tooltip = Object.assign(
-	forwardRef<HTMLButtonElement, TooltipProps>(function Tooltip(
-		{ content, children, open, disabled, ...rest },
-		ref,
-	) {
-		return (
-			<TooltipPrimitive.Root open={open}>
-				{disabled ? (
-					children
-				) : (
-					<TooltipPrimitive.TooltipTrigger asChild ref={ref} {...rest}>
-						{children}
-					</TooltipPrimitive.TooltipTrigger>
-				)}
-				<Content sideOffset={12}>{content}</Content>
-			</TooltipPrimitive.Root>
-		);
-	}),
-	{
-		Trigger: TooltipPrimitive.TooltipTrigger,
-		Content,
-	},
-);
+'use client';
+
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import classNames from 'clsx';
+
+function Content({
+	children,
+	className,
+	...props
+}: TooltipPrimitive.TooltipContentProps) {
+	return (
+		<TooltipPrimitive.Portal>
+			<TooltipPrimitive.Content
+				className={classNames(
+					'layer-components:(relative rounded-md py-2 px-3 bg-black text-white text-sm leading-tight shadow-sm select-none hidden z-tooltip sm:display-initial)',
+					'[&[data-state=delayed-open]]:display-initial',
+					'[&[data-state=instant-open]]:display-initial',
+					'layer-components:transform-origin-[var(--radix-tooltip-content-transform-origin)]',
+					'layer-components:[&[data-state=delayed-open]]:animate-popover-in',
+					className,
+				)}
+				{...props}
+			>
+				{children}
+				<TooltipPrimitive.Arrow className="fill-black" />
+			</TooltipPrimitive.Content>
+		</TooltipPrimitive.Portal>
+	);
+}
+
+export const TooltipProvider = TooltipPrimitive.Provider;
+
+export interface TooltipProps
+	extends Omit<TooltipPrimitive.TooltipTriggerProps, 'content'> {
+	content: React.ReactNode;
+	open?: boolean;
+	disabled?: boolean;
+}
+
+export const Tooltip = Object.assign(
+	function Tooltip({
+		ref,
+		content,
+		children,
+		open,
+		disabled,
+		...rest
+	}: TooltipProps & {
+		ref?: React.Ref<HTMLButtonElement>;
+	}) {
+		return (
+			<TooltipPrimitive.Root open={open}>
+				{disabled ? (
+					children
+				) : (
+					<TooltipPrimitive.TooltipTrigger asChild ref={ref} {...rest}>
+						{children}
+					</TooltipPrimitive.TooltipTrigger>
+				)}
+				<Content sideOffset={12}>{content}</Content>
+			</TooltipPrimitive.Root>
+		);
+	},
+	{
+		Trigger: TooltipPrimitive.TooltipTrigger,
+		Content,
+	},
+);

package/src/components/utility/HideWhileKeyboardOpen.tsx

@@ -1,26 +1,30 @@
-import { Slot } from '@radix-ui/react-slot';
-import { useIsKeyboardOpen } from '../../hooks.js';
-import clsx from 'clsx';
-import { forwardRef, HTMLAttributes } from 'react';
-
-export interface HideWhileKeyboardOpenProps
-	extends HTMLAttributes<HTMLDivElement> {
-	asChild?: boolean;
-}
-
-export const HideWhileKeyboardOpen = forwardRef<
-	HTMLDivElement,
-	HideWhileKeyboardOpenProps
->(function HideWhileKeyboardOpen({ asChild, className, ...rest }, ref) {
-	const isKeyboardOpen = useIsKeyboardOpen();
-
-	const Comp = asChild ? Slot : 'div';
-
-	return (
-		<Comp
-			ref={ref}
-			className={clsx(isKeyboardOpen && 'layer-responsive:hidden', className)}
-			{...rest}
-		/>
-	);
-});
+import { Slot } from '@radix-ui/react-slot';
+import clsx from 'clsx';
+import { HTMLAttributes } from 'react';
+import { useIsKeyboardOpen } from '../../hooks.js';
+
+export interface HideWhileKeyboardOpenProps
+	extends HTMLAttributes<HTMLDivElement> {
+	asChild?: boolean;
+}
+
+export const HideWhileKeyboardOpen = function HideWhileKeyboardOpen({
+	ref,
+	asChild,
+	className,
+	...rest
+}: HideWhileKeyboardOpenProps & {
+	ref?: React.Ref<HTMLDivElement>;
+}) {
+	const isKeyboardOpen = useIsKeyboardOpen();
+
+	const Comp = asChild ? Slot : 'div';
+
+	return (
+		<Comp
+			ref={ref}
+			className={clsx(isKeyboardOpen && 'layer-responsive:hidden', className)}
+			{...rest}
+		/>
+	);
+};

package/src/components/utility/SlotDiv.tsx

@@ -1,15 +1,16 @@
-import { Slot } from '@radix-ui/react-slot';
-import { forwardRef, HTMLProps } from 'react';
-
-export interface SlotDivProps extends HTMLProps<HTMLDivElement> {
-	asChild?: boolean;
-}
-export const SlotDiv = forwardRef<any, SlotDivProps>(function SlotDiv(
-	{ asChild, ...rest },
-	ref,
-) {
-	if (asChild) {
-		return <Slot ref={ref} {...rest} />;
-	}
-	return <div ref={ref} {...rest} />;
-});
+import { Slot } from '@radix-ui/react-slot';
+import { HTMLProps } from 'react';
+
+export interface SlotDivProps extends HTMLProps<HTMLDivElement> {
+	asChild?: boolean;
+}
+export const SlotDiv = function SlotDiv({
+	ref,
+	asChild,
+	...rest
+}: SlotDivProps) {
+	if (asChild) {
+		return <Slot ref={ref} {...rest} />;
+	}
+	return <div ref={ref} {...rest} />;
+};

package/src/hooks/useMergedRef.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
 
-function useMergedRef<T>(...refs: React.Ref<T>[]): React.RefCallback<T> {
+function useMergedRef<T>(
+	...refs: (React.Ref<T> | undefined)[]
+): React.RefCallback<T> {
 	return React.useCallback((element: T) => {
 		for (let i = 0; i < refs.length; i++) {
 			const ref = refs[i];