Merge pull request #225 from brainstormforce/dev

Dev

README.md

@@ -14,7 +14,7 @@ Using Force UI as a dependency in package.json -
 
 ```json
 "dependencies": {
-  "@bsf/force-ui": "git+https://github.com/brainstormforce/force-ui#1.3.2"
+  "@bsf/force-ui": "git+https://github.com/brainstormforce/force-ui#1.3.3"
 }
 ```
 
@@ -28,7 +28,7 @@ npm install
 Or you can directly run the following command to install the package -
 
 ```bash
-npm i -S @bsf/force-ui@git+https://github.com/brainstormforce/force-ui.git#1.3.2
+npm i -S @bsf/force-ui@git+https://github.com/brainstormforce/force-ui.git#1.3.3
 ```
 
 <br />

changelog.txt

@@ -1,3 +1,7 @@
+Version 1.3.3 - 20th December, 2024
+Fixed - React `Each child in a list should have a unique "key" prop` console warning.
+Fixed - Toaster content overlapping with the close button.
+
 Version 1.3.2 - 17th December, 2024
 Fixed - Adjusted the color of the Switch component label and help text.
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bsf/force-ui",
-    "version": "1.3.2",
+    "version": "1.3.3",
     "description": "Library of components for the BSF project",
     "main": "./dist/force-ui.js",
     "module": "./dist/force-ui.js",

src/components/button/button.tsx

@@ -1,4 +1,9 @@
-import React, { forwardRef, type ElementType, type ReactNode } from 'react';
+import React, {
+	forwardRef,
+	Fragment,
+	type ElementType,
+	type ReactNode,
+} from 'react';
 import { cn } from '@/utilities/functions';
 
 export interface ButtonProps {
@@ -140,12 +145,14 @@ const Button: React.FunctionComponent<ButtonProps> = forwardRef(
 				disabled={ disabled }
 				{ ...rest }
 			>
-				{ iconLeft }
+				<Fragment key="left-icon">{ iconLeft }</Fragment>
 				{ children ? <span className="px-1">{ children }</span> : null }
-				{ iconRight }
+				<Fragment key="right-icon">{ iconRight }</Fragment>
 			</Tag>
 		);
 	}
 );
 
+Button.displayName = 'Button';
+
 export default Button;

src/components/label/label.tsx

@@ -78,6 +78,8 @@ const Label = forwardRef(
 	}
 );
 
+Label.displayName = 'Label';
+
 export default Label as <T extends object>(
 	props: LabelProps & T,
 	ref: React.Ref<HTMLElement>

src/components/toaster/toaster.stories.tsx

@@ -1,6 +1,8 @@
 import type { Meta, StoryFn } from '@storybook/react';
 import { Toaster } from './toaster';
 import { toast } from './controller';
+import { nanoid } from 'nanoid';
+import { useState, useEffect } from 'react';
 
 const meta: Meta<typeof Toaster> = {
 	title: 'Atoms/Toaster',
@@ -62,9 +64,15 @@ export default meta;
 type Story = StoryFn<typeof Toaster>;
 
 const Template: Story = ( args ) => {
+	const [ keyId, setKeyId ] = useState( nanoid() );
+
+	useEffect( () => {
+		setKeyId( nanoid() );
+	}, [ args ] );
+
 	return (
 		<div>
-			<Toaster { ...args } key={ args.position } />
+			<Toaster { ...args } key={ keyId } />
 			<div className="h-[100dvh] flex flex-col items-center justify-center">
 				<div className="flex gap-2">
 					<button

src/components/toaster/toaster.tsx

@@ -197,7 +197,7 @@ export const Toast = ( {
 						<div className="self-start flex items-center justify-center [&_svg]:size-5 shrink-0">
 							{ getIcon( { variant, icon, theme } ) }
 						</div>
-						<div className="flex flex-col items-start justify-start gap-0.5">
+						<div className="flex flex-col items-start justify-start gap-0.5 mr-6">
 							{ getTitle( { title, theme } ) }
 							{ getContent( { content, theme } ) }
 							{

src/components/tooltip/tooltip.tsx

@@ -5,6 +5,7 @@ import {
 	isValidElement,
 	cloneElement,
 	useMemo,
+	Fragment,
 } from 'react';
 import {
 	useFloating,
@@ -174,21 +175,23 @@ export const Tooltip = ( {
 	const widthClasses = 'max-w-80 w-fit';
 
 	return (
-		<>
-			{ isValidElement( children ) &&
-				cloneElement( children as React.ReactElement, {
-					...children.props,
-					ref: mergeRefs(
-						(
-							children as React.ReactElement & {
-								ref?: React.Ref<HTMLElement>;
-							}
-						).ref,
-						refs.setReference
-					),
-					className: cn( children.props.className ),
-					...getReferenceProps(),
-				} ) }
+		<Fragment>
+			{ isValidElement( children ) && (
+				<Fragment key="tooltip-reference">
+					{ cloneElement( children as React.ReactElement, {
+						ref: mergeRefs(
+							(
+								children as React.ReactElement & {
+									ref?: React.Ref<HTMLElement>;
+								}
+							).ref,
+							refs.setReference
+						),
+						className: cn( children.props.className ),
+						...getReferenceProps(),
+					} ) }
+				</Fragment>
+			) }
 			<FloatingPortal id={ tooltipPortalId } root={ tooltipPortalRoot }>
 				{ isMounted && (
 					<div
@@ -207,10 +210,20 @@ export const Tooltip = ( {
 					>
 						<div>
 							{ !! title && (
-								<span className="font-semibold">{ title }</span>
+								<span
+									key="tooltip-title"
+									className="font-semibold"
+								>
+									{ title }
+								</span>
 							) }
 							{ !! content && (
-								<div className="font-normal">{ content }</div>
+								<div
+									key="tooltip-content"
+									className="font-normal"
+								>
+									{ content }
+								</div>
 							) }
 						</div>
 						{ arrow && (
@@ -223,8 +236,10 @@ export const Tooltip = ( {
 					</div>
 				) }
 			</FloatingPortal>
-		</>
+		</Fragment>
 	);
 };
 
+Tooltip.displayName = 'Tooltip';
+
 export default Tooltip;

version.json

@@ -1,3 +1,3 @@
 {
-	"force-ui": "1.3.2"
+	"force-ui": "1.3.3"
 }