SRML-50 - Update change log and fix toaster gap between toaster X button and content

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/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 } ) }
 							{

version.json

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