From 057b9124dacbb34f0f6fd271fa673060bce7c1b7 Mon Sep 17 00:00:00 2001
From: Ravindra Kele <ravindrak@bsf.io>
Date: Wed, 29 Jan 2025 17:46:53 +0530
Subject: [PATCH 01/20] added - show active preset of datepicker

---
 package-lock.json                        |  4 +--
 src/components/datepicker/datepicker.tsx | 33 +++++++++++++++++-------
 2 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 849a79cf..1fc3726d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "@bsf/force-ui",
-    "version": "1.2.1",
+    "version": "1.4.0",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@bsf/force-ui",
-            "version": "1.2.1",
+            "version": "1.4.0",
             "license": "ISC",
             "dependencies": {
                 "@emotion/is-prop-valid": "^1.3.0",
diff --git a/src/components/datepicker/datepicker.tsx b/src/components/datepicker/datepicker.tsx
index e2b65426..c4167587 100644
--- a/src/components/datepicker/datepicker.tsx
+++ b/src/components/datepicker/datepicker.tsx
@@ -12,6 +12,7 @@ import {
 } from 'date-fns';
 import { getDefaultSelectedValue } from './utils';
 import { type PropsBase } from 'react-day-picker';
+import { cn } from '@/utilities/functions';
 
 export interface DatePickerProps {
 	/** Defines the selection selectionType of the date picker: single, range, or multiple dates. */
@@ -226,16 +227,28 @@ const DatePicker = ( {
 		return (
 			<div className="flex flex-row shadow-datepicker-wrapper">
 				<div className="flex flex-col gap-1 p-3 items-start border border-solid border-border-subtle border-r-0 rounded-tl-md rounded-bl-md bg-background-primary">
-					{ presets.map( ( preset, index ) => (
-						<Button
-							key={ index }
-							onClick={ () => handlePresetClick( preset.range ) }
-							variant="ghost"
-							className="text-left font-medium text-sm text-nowrap w-full"
-						>
-							{ preset.label }
-						</Button>
-					) ) }
+					{ presets.map( ( preset, index ) => {
+						const isSelected =
+							selectedDates &&
+							'from' in selectedDates &&
+							'to' in selectedDates &&
+							selectedDates.from?.getTime() === preset.range.from.getTime() &&
+							selectedDates.to?.getTime() === preset.range.to.getTime();
+
+						return (
+							<Button
+								key={ index }
+								onClick={ () => handlePresetClick( preset.range ) }
+								variant="ghost"
+								className={ cn(
+									'text-left font-medium text-sm text-nowrap w-full',
+									isSelected && 'bg-brand-background-50'
+								) }
+							>
+								{ preset.label }
+							</Button>
+						);
+					} ) }
 				</div>
 				<DatePickerComponent
 					{ ...props }

From b0eb0dfcfc8589846162709280a05133e6b746bc Mon Sep 17 00:00:00 2001
From: Ravindra Kele <ravindrak@bsf.io>
Date: Wed, 29 Jan 2025 18:06:29 +0530
Subject: [PATCH 02/20] storybook and lint fix

---
 src/components/datepicker/datepicker.stories.tsx | 5 +++++
 src/components/datepicker/datepicker.tsx         | 6 ++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/datepicker/datepicker.stories.tsx b/src/components/datepicker/datepicker.stories.tsx
index 7e07acae..bf80e335 100644
--- a/src/components/datepicker/datepicker.stories.tsx
+++ b/src/components/datepicker/datepicker.stories.tsx
@@ -162,6 +162,11 @@ WithPresets.args = {
 			},
 		},
 	],
+	// set last_week selected for testing.
+	selected: {
+		from: startOfWeek( subWeeks( new Date(), 1 ), { weekStartsOn: 1 } ),
+		to: endOfWeek( subWeeks( new Date(), 1 ), { weekStartsOn: 1 } ),
+	},
 	onApply: () => {
 		//code
 	},
diff --git a/src/components/datepicker/datepicker.tsx b/src/components/datepicker/datepicker.tsx
index c4167587..6209a53c 100644
--- a/src/components/datepicker/datepicker.tsx
+++ b/src/components/datepicker/datepicker.tsx
@@ -232,8 +232,10 @@ const DatePicker = ( {
 							selectedDates &&
 							'from' in selectedDates &&
 							'to' in selectedDates &&
-							selectedDates.from?.getTime() === preset.range.from.getTime() &&
-							selectedDates.to?.getTime() === preset.range.to.getTime();
+							selectedDates.from?.getTime() ===
+								preset.range.from.getTime() &&
+							selectedDates.to?.getTime() ===
+								preset.range.to.getTime();
 
 						return (
 							<Button

From 97583f0b3e4c17c4f9b5c58ec4b55eb0ed69465d Mon Sep 17 00:00:00 2001
From: Ravindra Kele <ravindrak@bsf.io>
Date: Wed, 29 Jan 2025 18:13:41 +0530
Subject: [PATCH 03/20] changed default to month for better view

---
 src/components/datepicker/datepicker.stories.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/datepicker/datepicker.stories.tsx b/src/components/datepicker/datepicker.stories.tsx
index bf80e335..25d2c37d 100644
--- a/src/components/datepicker/datepicker.stories.tsx
+++ b/src/components/datepicker/datepicker.stories.tsx
@@ -164,8 +164,8 @@ WithPresets.args = {
 	],
 	// set last_week selected for testing.
 	selected: {
-		from: startOfWeek( subWeeks( new Date(), 1 ), { weekStartsOn: 1 } ),
-		to: endOfWeek( subWeeks( new Date(), 1 ), { weekStartsOn: 1 } ),
+		from: startOfMonth( new Date() ),
+		to: endOfMonth( new Date() ),
 	},
 	onApply: () => {
 		//code

From 551398391ff91a746114aacf930d4d3c7ca7b246 Mon Sep 17 00:00:00 2001
From: Ravindra Kele <ravindrak@bsf.io>
Date: Wed, 29 Jan 2025 20:54:03 +0530
Subject: [PATCH 04/20] fixed default preset time

---
 src/components/datepicker/datepicker.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/datepicker/datepicker.tsx b/src/components/datepicker/datepicker.tsx
index 6209a53c..6ce51699 100644
--- a/src/components/datepicker/datepicker.tsx
+++ b/src/components/datepicker/datepicker.tsx
@@ -9,6 +9,7 @@ import {
 	startOfMonth,
 	endOfMonth,
 	subDays,
+	startOfDay,
 } from 'date-fns';
 import { getDefaultSelectedValue } from './utils';
 import { type PropsBase } from 'react-day-picker';
@@ -115,8 +116,8 @@ const DatePicker = ( {
 		{
 			label: 'Last 7 Days',
 			range: {
-				from: subDays( new Date(), 6 ),
-				to: new Date(),
+				from: startOfDay( subDays( new Date(), 6 ) ),
+				to: startOfDay( new Date() ),
 			},
 		},
 		{
@@ -129,8 +130,8 @@ const DatePicker = ( {
 		{
 			label: 'Last 30 Days',
 			range: {
-				from: subDays( new Date(), 29 ),
-				to: new Date(),
+				from: startOfDay( subDays( new Date(), 29 ) ),
+				to: startOfDay( new Date() ),
 			},
 		},
 	];

From 4df0399efc2acdca63280e01d7bf4e6b03ddca67 Mon Sep 17 00:00:00 2001
From: Ravindra Kele <ravindrak@bsf.io>
Date: Wed, 29 Jan 2025 21:18:36 +0530
Subject: [PATCH 05/20] updated changelog.txt

---
 changelog.txt | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/changelog.txt b/changelog.txt
index 205bc869..9887c040 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,3 +1,6 @@
+Version x.x.x - xth x, 2025
+- Improvement: Added - Show active preset with background color in DatePicker component.
+
 Version 1.4.0 - 27th January, 2025
 - New: Added a Hamburger Menu component.
 - Improvement: Added Y-axis tick formatter to the BarChart component.

From 07dc075bb1bc67402ad8e0cb90a6d2a0ca04fd09 Mon Sep 17 00:00:00 2001
From: Ravindra Kele <ravindrak@bsf.io>
Date: Fri, 31 Jan 2025 10:43:40 +0530
Subject: [PATCH 06/20] Update changelog.txt

Co-authored-by: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
---
 changelog.txt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/changelog.txt b/changelog.txt
index 9887c040..951375f8 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,5 +1,5 @@
 Version x.x.x - xth x, 2025
-- Improvement: Added - Show active preset with background color in DatePicker component.
+- Improvement: Show active preset with background color in the DatePicker component.
 
 Version 1.4.0 - 27th January, 2025
 - New: Added a Hamburger Menu component.

From 68c3b187f839978cc40f95eba2ea67766305d2f4 Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Sat, 8 Feb 2025 01:53:07 +0600
Subject: [PATCH 07/20] Created two custom debounce hooks

---
 src/utilities/hooks.ts | 42 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 src/utilities/hooks.ts

diff --git a/src/utilities/hooks.ts b/src/utilities/hooks.ts
new file mode 100644
index 00000000..8c44261a
--- /dev/null
+++ b/src/utilities/hooks.ts
@@ -0,0 +1,42 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+
+type AsyncFunction<T extends unknown[], R> = ( ...args: T ) => Promise<R>;
+
+/**
+ * Debounce a value
+ * @param {any}    value - The value to debounce
+ * @param {number} delay - The delay in milliseconds
+ * @return {any} The debounced value
+ */
+export const useDebounce = ( value: unknown, delay: number = 500 ) => {
+	const [ debouncedValue, setDebouncedValue ] = useState( value );
+
+	useEffect( () => {
+		const timeout = setTimeout( () => setDebouncedValue( value ), delay );
+
+		return () => clearTimeout( timeout );
+	}, [ value, delay ] );
+
+	return debouncedValue;
+};
+
+/**
+ * Debounce a callback function.
+ * @param {Function} func  - The function to debounce
+ * @param {number}   delay - The delay in milliseconds
+ * @return {Function} The debounced function
+ */
+export const useDebouncedCallback = ( func: AsyncFunction<unknown[], void>, delay: number = 500 ) => {
+	const timeoutRef = useRef<NodeJS.Timeout | null>( null );
+
+	return useCallback( ( ...args: unknown[] ) => {
+		if ( timeoutRef.current ) {
+			clearTimeout( timeoutRef.current );
+		}
+
+		timeoutRef.current = setTimeout(
+			() => func( ...( args as [unknown] ) ),
+			delay
+		);
+	}, [ func, delay ] );
+};

From 6da620e8b5d70af2b3b5c2c5d2ac5df3f3550dc0 Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Sat, 8 Feb 2025 01:54:41 +0600
Subject: [PATCH 08/20] Add external search functionality to Select component

- Introduced searchFn and debounceDelay props for external search handling
- Updated SelectProps and SelectContextValue types
- Implemented search function with loading state and debounce
- Memoized Select component subcomponents for performance
---
 src/components/select/select-types.ts |  7 ++
 src/components/select/select.tsx      | 92 +++++++++++++++++++++------
 2 files changed, 80 insertions(+), 19 deletions(-)

diff --git a/src/components/select/select-types.ts b/src/components/select/select-types.ts
index 768f3762..9337ed66 100644
--- a/src/components/select/select-types.ts
+++ b/src/components/select/select-types.ts
@@ -69,6 +69,10 @@ export type SelectProps = {
 	defaultValue?: SelectOptionValue | SelectOptionValue[];
 	/** Placeholder text for search box. */
 	searchPlaceholder?: string;
+	/** Function to fetch options. If provided, the search functionality will be handled outside of the select component. */
+	searchFn?: ( keyword: string ) => Promise<void>;
+	/** Delay in milliseconds for debounced search. If the searchFn is provided, the debounceDelay will be used to debounce the search. */
+	debounceDelay?: number;
 };
 
 export interface SelectPortalProps {
@@ -167,4 +171,7 @@ export type SelectContextValue = {
 	onChange: SelectOnChange;
 	value?: SelectOptionValue | SelectOptionValue[];
 	searchPlaceholder?: string;
+	searchFn?: ( keyword: string ) => Promise<void>;
+	debounceDelay?: number;
 };
+
diff --git a/src/components/select/select.tsx b/src/components/select/select.tsx
index 87dec5d9..9970bcdf 100644
--- a/src/components/select/select.tsx
+++ b/src/components/select/select.tsx
@@ -12,6 +12,7 @@ import {
 	useLayoutEffect,
 	Fragment,
 	type ReactNode,
+	memo,
 } from 'react';
 import { cn } from '@/utilities/functions';
 import { CheckIcon, ChevronDown, ChevronsUpDown, Search } from 'lucide-react';
@@ -30,7 +31,7 @@ import {
 	autoUpdate,
 	FloatingPortal,
 } from '@floating-ui/react';
-import Badge from '../badge';
+import { Badge, Loader } from '@/components';
 import { nanoid } from 'nanoid';
 import {
 	disabledClassNames,
@@ -53,6 +54,7 @@ import type {
 	SelectOptionGroupProps,
 } from './select-types';
 import { getTextContent } from './utils';
+import { debounceAsync, useDebouncedCallback } from '@/utilities/hooks';
 
 // Context to manage the state of the select component.
 const SelectContext = createContext<SelectContextValue>(
@@ -360,6 +362,8 @@ export function SelectOptions( {
 		by,
 		searchPlaceholder,
 		activeIndex,
+		searchFn,
+		debounceDelay,
 	} = useSelectContext();
 
 	const initialSelectedValueIndex = useMemo( () => {
@@ -446,7 +450,9 @@ export function SelectOptions( {
 						return false;
 					}
 
-					if ( searchKeyword ) {
+					// Handle option groups when searchFn is not provided
+					// Search functionality will be handled outside of the select component
+					if ( searchKeyword && ! searchFn ) {
 						const textContent = getTextContent(
 							groupChild.props.children
 						)?.toLowerCase();
@@ -498,8 +504,8 @@ export function SelectOptions( {
 				return cloneElement( child, groupProps );
 			}
 
-			// Handle regular options
-			if ( searchKeyword ) {
+			// Handle regular options when searchFn is not provided
+			if ( searchKeyword && ! searchFn ) {
 				const textContent = getTextContent(
 					child.props?.children
 				)?.toLowerCase();
@@ -519,7 +525,7 @@ export function SelectOptions( {
 		};
 
 		return Children.map( children, processChild );
-	}, [ searchKeyword, value, selected, children ] );
+	}, [ searchKeyword, value, selected, children, searchFn ] );
 	const childrenCount = Children.count( renderChildren );
 
 	// Update the content list reference.
@@ -548,7 +554,8 @@ export function SelectOptions( {
 			const textContent = getTextContent(
 				child.props?.children
 			)?.toLowerCase();
-			if ( searchKeyword ) {
+			// Handle regular options when searchFn is not provided
+			if ( searchKeyword && ! searchFn ) {
 				const searchTerm = searchKeyword.toLowerCase();
 				const textMatch = textContent?.includes( searchTerm );
 
@@ -559,8 +566,41 @@ export function SelectOptions( {
 
 			listContentRef.current.push( textContent );
 		} );
+	}, [ searchKeyword, searchFn ] );
+
+	const [ searching, setSearching ] = useState( false );
+
+	// Create a function to handle the search function.
+	const handleSearchFn = useCallback( async () => {
+		if ( ! searchFn || typeof searchFn !== 'function' || searching ) {
+			return;
+		}
+
+		setSearching( true );
+		try {
+			await searchFn( searchKeyword );
+		} catch ( error ) {
+			// eslint-disable-next-line no-console
+			console.error( error );
+		} finally {
+			setSearching( false );
+		}
 	}, [ searchKeyword ] );
 
+	// Debounce the search function.
+	const initiateSearch = useDebouncedCallback(
+		handleSearchFn,
+		debounceDelay!
+	);
+
+	// Initiate search when searchFn is a function.
+	useEffect( () => {
+		if ( typeof searchFn !== 'function' ) {
+			return;
+		}
+		initiateSearch();
+	}, [ initiateSearch ] );
+
 	return (
 		<>
 			{ /* Dropdown */ }
@@ -595,14 +635,24 @@ export function SelectOptions( {
 											.searchbarWrapper
 									) }
 								>
-									<Search
-										className={ cn(
-											'text-icon-secondary shrink-0',
-											sizeClassNames[
-												sizeValue as SelectSizes
-											].searchbarIcon
-										) }
-									/>
+									{ searching ? (
+										<Loader
+											className={
+												sizeClassNames[
+													sizeValue as SelectSizes
+												].searchbarIcon
+											}
+										/>
+									) : (
+										<Search
+											className={ cn(
+												'text-icon-secondary shrink-0',
+												sizeClassNames[
+													sizeValue as SelectSizes
+												].searchbarIcon
+											) }
+										/>
+									) }
 									<input
 										className={ cn(
 											'px-1 w-full placeholder:text-field-placeholder border-0 focus:outline-none focus:shadow-none',
@@ -774,6 +824,8 @@ const Select = ( {
 	combobox = false, // If true, it will show a search box.
 	disabled = false, // If true, it will disable the select component.
 	searchPlaceholder = 'Search...', // Placeholder text for search box.
+	searchFn, // Function to handle the search.
+	debounceDelay = 500, // Debounce delay for the search.
 }: SelectProps ) => {
 	const selectId = useMemo( () => id || `select-${ nanoid() }`, [ id ] );
 	const isControlled = useMemo( () => typeof value !== 'undefined', [ value ] );
@@ -961,6 +1013,8 @@ const Select = ( {
 				disabled,
 				isControlled,
 				searchPlaceholder,
+				searchFn,
+				debounceDelay,
 			} }
 		>
 			{ children }
@@ -974,10 +1028,10 @@ SelectOptions.displayName = 'Select.Options';
 SelectItem.displayName = 'Select.Option';
 SelectOptionGroup.displayName = 'Select.OptionGroup';
 
-Select.Portal = SelectPortal;
-Select.Button = SelectButton;
-Select.Options = SelectOptions;
-Select.Option = SelectItem;
-Select.OptionGroup = SelectOptionGroup;
+Select.Portal = memo(SelectPortal);
+Select.Button = memo(SelectButton);
+Select.Options = memo(SelectOptions);
+Select.Option = memo(SelectItem);
+Select.OptionGroup = memo(SelectOptionGroup);
 
 export default Select;

From 4b42a086671f0b33a380c2fb87ad4d924bf5bb69 Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Sat, 8 Feb 2025 02:12:50 +0600
Subject: [PATCH 09/20] Refactor Select component structure and exports

- Renamed main Select component to SelectComponent
- Restructured component exports using Object.assign
- Added displayName to component and its subcomponents
- Removed unused debounceAsync import
---
 src/components/select/select.tsx | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/components/select/select.tsx b/src/components/select/select.tsx
index 9970bcdf..845afda3 100644
--- a/src/components/select/select.tsx
+++ b/src/components/select/select.tsx
@@ -54,7 +54,7 @@ import type {
 	SelectOptionGroupProps,
 } from './select-types';
 import { getTextContent } from './utils';
-import { debounceAsync, useDebouncedCallback } from '@/utilities/hooks';
+import { useDebouncedCallback } from '@/utilities/hooks';
 
 // Context to manage the state of the select component.
 const SelectContext = createContext<SelectContextValue>(
@@ -812,7 +812,7 @@ export function SelectItem( {
 	);
 }
 
-const Select = ( {
+const SelectComponent = ( {
 	id,
 	size: sizeValue = 'md', // sm, md, lg
 	value, // Value of the select (for controlled component).
@@ -1022,16 +1022,20 @@ const Select = ( {
 	);
 };
 
+SelectComponent.displayName = 'Select';
+
+const Select = Object.assign(memo(SelectComponent), {
+	Portal: memo(SelectPortal),
+	Button: memo(SelectButton),
+	Options: memo(SelectOptions),
+	Option: memo(SelectItem),
+	OptionGroup: memo(SelectOptionGroup),
+});
+
 SelectPortal.displayName = 'Select.Portal';
 SelectButton.displayName = 'Select.Button';
 SelectOptions.displayName = 'Select.Options';
 SelectItem.displayName = 'Select.Option';
 SelectOptionGroup.displayName = 'Select.OptionGroup';
 
-Select.Portal = memo(SelectPortal);
-Select.Button = memo(SelectButton);
-Select.Options = memo(SelectOptions);
-Select.Option = memo(SelectItem);
-Select.OptionGroup = memo(SelectOptionGroup);
-
 export default Select;

From 2722838b68457f56a7bd95e6424979aee6603ceb Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Sun, 9 Feb 2025 12:44:35 +0600
Subject: [PATCH 10/20] Update changelog.txt

---
 changelog.txt | 1 +
 1 file changed, 1 insertion(+)

diff --git a/changelog.txt b/changelog.txt
index 951375f8..2bfaab5e 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,5 +1,6 @@
 Version x.x.x - xth x, 2025
 - Improvement: Show active preset with background color in the DatePicker component.
+- Improvement: Introduced a new property in the Select component for personalized search beyond the component.
 
 Version 1.4.0 - 27th January, 2025
 - New: Added a Hamburger Menu component.

From 46a0e75e727417248fb6dbc353a51e44a672408a Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Sun, 9 Feb 2025 12:55:49 +0600
Subject: [PATCH 11/20] chore: Lint

---
 src/components/select/select-types.ts |  1 -
 src/components/select/select.tsx      | 19 ++++++++----------
 src/utilities/hooks.ts                | 28 ++++++++++++++++-----------
 3 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/src/components/select/select-types.ts b/src/components/select/select-types.ts
index 9337ed66..4624eec9 100644
--- a/src/components/select/select-types.ts
+++ b/src/components/select/select-types.ts
@@ -174,4 +174,3 @@ export type SelectContextValue = {
 	searchFn?: ( keyword: string ) => Promise<void>;
 	debounceDelay?: number;
 };
-
diff --git a/src/components/select/select.tsx b/src/components/select/select.tsx
index 845afda3..df913bd8 100644
--- a/src/components/select/select.tsx
+++ b/src/components/select/select.tsx
@@ -588,10 +588,7 @@ export function SelectOptions( {
 	}, [ searchKeyword ] );
 
 	// Debounce the search function.
-	const initiateSearch = useDebouncedCallback(
-		handleSearchFn,
-		debounceDelay!
-	);
+	const initiateSearch = useDebouncedCallback( handleSearchFn, debounceDelay! );
 
 	// Initiate search when searchFn is a function.
 	useEffect( () => {
@@ -1024,13 +1021,13 @@ const SelectComponent = ( {
 
 SelectComponent.displayName = 'Select';
 
-const Select = Object.assign(memo(SelectComponent), {
-	Portal: memo(SelectPortal),
-	Button: memo(SelectButton),
-	Options: memo(SelectOptions),
-	Option: memo(SelectItem),
-	OptionGroup: memo(SelectOptionGroup),
-});
+const Select = Object.assign( memo( SelectComponent ), {
+	Portal: memo( SelectPortal ),
+	Button: memo( SelectButton ),
+	Options: memo( SelectOptions ),
+	Option: memo( SelectItem ),
+	OptionGroup: memo( SelectOptionGroup ),
+} );
 
 SelectPortal.displayName = 'Select.Portal';
 SelectButton.displayName = 'Select.Button';
diff --git a/src/utilities/hooks.ts b/src/utilities/hooks.ts
index 8c44261a..ca34c65b 100644
--- a/src/utilities/hooks.ts
+++ b/src/utilities/hooks.ts
@@ -26,17 +26,23 @@ export const useDebounce = ( value: unknown, delay: number = 500 ) => {
  * @param {number}   delay - The delay in milliseconds
  * @return {Function} The debounced function
  */
-export const useDebouncedCallback = ( func: AsyncFunction<unknown[], void>, delay: number = 500 ) => {
+export const useDebouncedCallback = (
+	func: AsyncFunction<unknown[], void>,
+	delay: number = 500
+) => {
 	const timeoutRef = useRef<NodeJS.Timeout | null>( null );
 
-	return useCallback( ( ...args: unknown[] ) => {
-		if ( timeoutRef.current ) {
-			clearTimeout( timeoutRef.current );
-		}
-
-		timeoutRef.current = setTimeout(
-			() => func( ...( args as [unknown] ) ),
-			delay
-		);
-	}, [ func, delay ] );
+	return useCallback(
+		( ...args: unknown[] ) => {
+			if ( timeoutRef.current ) {
+				clearTimeout( timeoutRef.current );
+			}
+
+			timeoutRef.current = setTimeout(
+				() => func( ...( args as [unknown] ) ),
+				delay
+			);
+		},
+		[ func, delay ]
+	);
 };

From e9bff1b2370f4e3e22dc1119e2e51132662e8ed6 Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Mon, 10 Feb 2025 10:13:14 +0600
Subject: [PATCH 12/20] Bumped the version and updated the changelog

---
 README.md     | 4 ++--
 changelog.txt | 2 +-
 package.json  | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 5e2296c3..9061ebfa 100644
--- a/README.md
+++ b/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.4.0"
+  "@bsf/force-ui": "git+https://github.com/brainstormforce/force-ui#1.4.1"
 }
 ```
 
@@ -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.4.0
+npm i -S @bsf/force-ui@git+https://github.com/brainstormforce/force-ui.git#1.4.1
 ```
 
 <br />
diff --git a/changelog.txt b/changelog.txt
index 2bfaab5e..e29fb57d 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,4 +1,4 @@
-Version x.x.x - xth x, 2025
+Version 1.4.1 - 10th February, 2025
 - Improvement: Show active preset with background color in the DatePicker component.
 - Improvement: Introduced a new property in the Select component for personalized search beyond the component.
 
diff --git a/package.json b/package.json
index fecd8f64..dd4ef481 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@bsf/force-ui",
-    "version": "1.4.0",
+    "version": "1.4.1",
     "description": "Library of components for the BSF project",
     "main": "./dist/force-ui.js",
     "module": "./dist/force-ui.js",

From 0aa075b565daadb593736d4e94c26a2c8b23f179 Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Mon, 10 Feb 2025 10:26:02 +0600
Subject: [PATCH 13/20] Update version.json

---
 version.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/version.json b/version.json
index c06da17c..47b1ee9d 100644
--- a/version.json
+++ b/version.json
@@ -1,3 +1,3 @@
 {
-	"force-ui": "1.4.0"
+	"force-ui": "1.4.1"
 }

From 1401a886f4130ab9ede17de425f8dd1d193e8d20 Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Mon, 10 Feb 2025 11:17:24 +0600
Subject: [PATCH 14/20] Update package-lock.json

---
 package-lock.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1fc3726d..5cd8c786 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "@bsf/force-ui",
-    "version": "1.4.0",
+    "version": "1.4.1",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@bsf/force-ui",
-            "version": "1.4.0",
+            "version": "1.4.1",
             "license": "ISC",
             "dependencies": {
                 "@emotion/is-prop-valid": "^1.3.0",

From 8632c5b453a1d9552dfa1b66fb72af70050df23d Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Mon, 10 Feb 2025 12:39:02 +0600
Subject: [PATCH 15/20] Added gulp to automate bumping the version

---
 gulpfile.js  | 79 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 package.json |  4 +++
 2 files changed, 83 insertions(+)
 create mode 100644 gulpfile.js

diff --git a/gulpfile.js b/gulpfile.js
new file mode 100644
index 00000000..7487ca7f
--- /dev/null
+++ b/gulpfile.js
@@ -0,0 +1,79 @@
+import gulp from 'gulp';
+import replace from 'gulp-replace';
+import inquirer from 'inquirer';
+import { exec } from 'child_process';
+
+/* eslint-disable no-console */
+
+function updateVersion( newVersion ) {
+	// Update README.md - handle both dependency formats
+	gulp.src( './README.md' )
+		.pipe( replace(
+			/@bsf\/force-ui@git\+https:\/\/github\.com\/brainstormforce\/force-ui\.git#[0-9]+\.[0-9]+\.[0-9]+/g,
+			`@bsf/force-ui@git+https://github.com/brainstormforce/force-ui.git#${ newVersion }`
+		) )
+		.pipe( replace(
+			/@bsf\/force-ui": "git\+https:\/\/github\.com\/brainstormforce\/force-ui#[0-9]+\.[0-9]+\.[0-9]+/g,
+			`@bsf/force-ui": "git+https://github.com/brainstormforce/force-ui#${ newVersion }`
+		) )
+		.pipe( gulp.dest( './' ) );
+
+	// Update package.json
+	gulp.src( './package.json' )
+		.pipe( replace(
+			/"version": "[0-9]+\.[0-9]+\.[0-9]+"/,
+			`"version": "${ newVersion }"`
+		) )
+		.pipe( gulp.dest( './' ) );
+
+	// Update version.json
+	gulp.src( './version.json' )
+		.pipe( replace(
+			/"force-ui": "[0-9]+\.[0-9]+\.[0-9]+"/,
+			`"force-ui": "${ newVersion }"`
+		) )
+		.pipe( gulp.dest( './' ) );
+}
+
+// Bump version in all files
+gulp.task( 'bump', function( done ) {
+	// Get the new version from the command line
+	let newVersion = process.argv[ 3 ];
+
+	// If the version is not provided as an argument, prompt for it
+	if ( ! newVersion ) {
+		inquirer.prompt( [
+			{
+				type: 'input',
+				name: 'version',
+				message: 'Enter the new version:',
+			},
+		] ).then( ( answers ) => {
+			newVersion = answers.version;
+			updateVersion( newVersion );
+			done();
+		} );
+	} else {
+		updateVersion( newVersion );
+		done();
+	}
+} );
+
+// Update package-lock.json
+gulp.task( 'update-package-lock', function( done ) {
+	exec( 'npm i', ( error, stdout, stderr ) => {
+		if ( error ) {
+			console.error( `Error: ${ error.message }` );
+			done( error );
+			return;
+		}
+		if ( stderr ) {
+			console.error( `stderr: ${ stderr }` );
+		}
+		console.log( `stdout: ${ stdout }` );
+		done();
+	} );
+} );
+
+// Bump version and update package-lock.json
+gulp.task( 'bump-and-update', gulp.series( 'bump', 'update-package-lock' ) );
diff --git a/package.json b/package.json
index dd4ef481..3226bc50 100644
--- a/package.json
+++ b/package.json
@@ -107,6 +107,10 @@
         "eslint-plugin-react-refresh": "^0.4.12",
         "eslint-plugin-storybook": "^0.9.0",
         "globals": "^15.9.0",
+        "gulp": "^5.0.0",
+        "gulp-cli": "^3.0.0",
+        "gulp-replace": "^1.1.4",
+        "inquirer": "^12.4.1",
         "postcss": "^8.4.39",
         "prettier": "^3.2.5",
         "rollup-preserve-directives": "^1.1.2",

From 8ae0e5a2e0e54d46351facefee3c9e08696dc592 Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Mon, 10 Feb 2025 12:42:51 +0600
Subject: [PATCH 16/20] Updated the command

---
 gulpfile.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/gulpfile.js b/gulpfile.js
index 7487ca7f..e1ab5146 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -36,7 +36,7 @@ function updateVersion( newVersion ) {
 }
 
 // Bump version in all files
-gulp.task( 'bump', function( done ) {
+gulp.task( 'bump-and-update', function( done ) {
 	// Get the new version from the command line
 	let newVersion = process.argv[ 3 ];
 
@@ -76,4 +76,4 @@ gulp.task( 'update-package-lock', function( done ) {
 } );
 
 // Bump version and update package-lock.json
-gulp.task( 'bump-and-update', gulp.series( 'bump', 'update-package-lock' ) );
+gulp.task( 'bump', gulp.series( 'bump-and-update', 'update-package-lock' ) );

From 8e91e86a1f8560f5528a610bf8b211b88e46d52e Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Mon, 10 Feb 2025 12:43:22 +0600
Subject: [PATCH 17/20] chore: Lint

---
 gulpfile.js | 110 ++++++++++++++++++++++++++++------------------------
 1 file changed, 60 insertions(+), 50 deletions(-)

diff --git a/gulpfile.js b/gulpfile.js
index e1ab5146..0d1b097a 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -5,75 +5,85 @@ import { exec } from 'child_process';
 
 /* eslint-disable no-console */
 
-function updateVersion( newVersion ) {
+function updateVersion(newVersion) {
 	// Update README.md - handle both dependency formats
-	gulp.src( './README.md' )
-		.pipe( replace(
-			/@bsf\/force-ui@git\+https:\/\/github\.com\/brainstormforce\/force-ui\.git#[0-9]+\.[0-9]+\.[0-9]+/g,
-			`@bsf/force-ui@git+https://github.com/brainstormforce/force-ui.git#${ newVersion }`
-		) )
-		.pipe( replace(
-			/@bsf\/force-ui": "git\+https:\/\/github\.com\/brainstormforce\/force-ui#[0-9]+\.[0-9]+\.[0-9]+/g,
-			`@bsf/force-ui": "git+https://github.com/brainstormforce/force-ui#${ newVersion }`
-		) )
-		.pipe( gulp.dest( './' ) );
+	gulp.src('./README.md')
+		.pipe(
+			replace(
+				/@bsf\/force-ui@git\+https:\/\/github\.com\/brainstormforce\/force-ui\.git#[0-9]+\.[0-9]+\.[0-9]+/g,
+				`@bsf/force-ui@git+https://github.com/brainstormforce/force-ui.git#${newVersion}`
+			)
+		)
+		.pipe(
+			replace(
+				/@bsf\/force-ui": "git\+https:\/\/github\.com\/brainstormforce\/force-ui#[0-9]+\.[0-9]+\.[0-9]+/g,
+				`@bsf/force-ui": "git+https://github.com/brainstormforce/force-ui#${newVersion}`
+			)
+		)
+		.pipe(gulp.dest('./'));
 
 	// Update package.json
-	gulp.src( './package.json' )
-		.pipe( replace(
-			/"version": "[0-9]+\.[0-9]+\.[0-9]+"/,
-			`"version": "${ newVersion }"`
-		) )
-		.pipe( gulp.dest( './' ) );
+	gulp.src('./package.json')
+		.pipe(
+			replace(
+				/"version": "[0-9]+\.[0-9]+\.[0-9]+"/,
+				`"version": "${newVersion}"`
+			)
+		)
+		.pipe(gulp.dest('./'));
 
 	// Update version.json
-	gulp.src( './version.json' )
-		.pipe( replace(
-			/"force-ui": "[0-9]+\.[0-9]+\.[0-9]+"/,
-			`"force-ui": "${ newVersion }"`
-		) )
-		.pipe( gulp.dest( './' ) );
+	gulp.src('./version.json')
+		.pipe(
+			replace(
+				/"force-ui": "[0-9]+\.[0-9]+\.[0-9]+"/,
+				`"force-ui": "${newVersion}"`
+			)
+		)
+		.pipe(gulp.dest('./'));
 }
 
 // Bump version in all files
-gulp.task( 'bump-and-update', function( done ) {
+gulp.task('bump-and-update', function (done) {
 	// Get the new version from the command line
-	let newVersion = process.argv[ 3 ];
+	let newVersion = process.argv[3];
 
 	// If the version is not provided as an argument, prompt for it
-	if ( ! newVersion ) {
-		inquirer.prompt( [
-			{
-				type: 'input',
-				name: 'version',
-				message: 'Enter the new version:',
-			},
-		] ).then( ( answers ) => {
-			newVersion = answers.version;
-			updateVersion( newVersion );
-			done();
-		} );
+	if (!newVersion) {
+		inquirer
+			.prompt([
+				{
+					type: 'input',
+					name: 'version',
+					message: 'Enter the new version:',
+				},
+			])
+			.then((answers) => {
+				newVersion = answers.version;
+				updateVersion(newVersion);
+				done();
+			});
 	} else {
-		updateVersion( newVersion );
+		updateVersion(newVersion);
 		done();
 	}
-} );
+});
 
 // Update package-lock.json
-gulp.task( 'update-package-lock', function( done ) {
-	exec( 'npm i', ( error, stdout, stderr ) => {
-		if ( error ) {
-			console.error( `Error: ${ error.message }` );
-			done( error );
+gulp.task('update-package-lock', function (done) {
+	exec('npm i', (error, stdout, stderr) => {
+		if (error) {
+			console.error(`Error: ${error.message}`);
+			done(error);
 			return;
 		}
-		if ( stderr ) {
-			console.error( `stderr: ${ stderr }` );
+		if (stderr) {
+			console.error(`stderr: ${stderr}`);
 		}
-		console.log( `stdout: ${ stdout }` );
+		console.log(`stdout: ${stdout}`);
 		done();
-	} );
-} );
+	});
+});
 
 // Bump version and update package-lock.json
-gulp.task( 'bump', gulp.series( 'bump-and-update', 'update-package-lock' ) );
+gulp.task('bump', gulp.series('bump-and-update', 'update-package-lock'));

From af0fd94d3dfaaa62c5db7cbdf37dbe77cf972cf9 Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Mon, 10 Feb 2025 12:50:53 +0600
Subject: [PATCH 18/20] chore: Lint

---
 gulpfile.js | 64 ++++++++++++++++++++++++++---------------------------
 1 file changed, 32 insertions(+), 32 deletions(-)

diff --git a/gulpfile.js b/gulpfile.js
index 0d1b097a..c8b2a27c 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -5,85 +5,85 @@ import { exec } from 'child_process';
 
 /* eslint-disable no-console */
 
-function updateVersion(newVersion) {
+function updateVersion( newVersion ) {
 	// Update README.md - handle both dependency formats
-	gulp.src('./README.md')
+	gulp.src( './README.md' )
 		.pipe(
 			replace(
 				/@bsf\/force-ui@git\+https:\/\/github\.com\/brainstormforce\/force-ui\.git#[0-9]+\.[0-9]+\.[0-9]+/g,
-				`@bsf/force-ui@git+https://github.com/brainstormforce/force-ui.git#${newVersion}`
+				`@bsf/force-ui@git+https://github.com/brainstormforce/force-ui.git#${ newVersion }`
 			)
 		)
 		.pipe(
 			replace(
 				/@bsf\/force-ui": "git\+https:\/\/github\.com\/brainstormforce\/force-ui#[0-9]+\.[0-9]+\.[0-9]+/g,
-				`@bsf/force-ui": "git+https://github.com/brainstormforce/force-ui#${newVersion}`
+				`@bsf/force-ui": "git+https://github.com/brainstormforce/force-ui#${ newVersion }`
 			)
 		)
-		.pipe(gulp.dest('./'));
+		.pipe( gulp.dest( './' ) );
 
 	// Update package.json
-	gulp.src('./package.json')
+	gulp.src( './package.json' )
 		.pipe(
 			replace(
 				/"version": "[0-9]+\.[0-9]+\.[0-9]+"/,
-				`"version": "${newVersion}"`
+				`"version": "${ newVersion }"`
 			)
 		)
-		.pipe(gulp.dest('./'));
+		.pipe( gulp.dest( './' ) );
 
 	// Update version.json
-	gulp.src('./version.json')
+	gulp.src( './version.json' )
 		.pipe(
 			replace(
 				/"force-ui": "[0-9]+\.[0-9]+\.[0-9]+"/,
-				`"force-ui": "${newVersion}"`
+				`"force-ui": "${ newVersion }"`
 			)
 		)
-		.pipe(gulp.dest('./'));
+		.pipe( gulp.dest( './' ) );
 }
 
 // Bump version in all files
-gulp.task('bump-and-update', function (done) {
+gulp.task( 'bump-and-update', function( done ) {
 	// Get the new version from the command line
-	let newVersion = process.argv[3];
+	let newVersion = process.argv[ 3 ];
 
 	// If the version is not provided as an argument, prompt for it
-	if (!newVersion) {
+	if ( ! newVersion ) {
 		inquirer
-			.prompt([
+			.prompt( [
 				{
 					type: 'input',
 					name: 'version',
 					message: 'Enter the new version:',
 				},
-			])
-			.then((answers) => {
+			] )
+			.then( ( answers ) => {
 				newVersion = answers.version;
-				updateVersion(newVersion);
+				updateVersion( newVersion );
 				done();
-			});
+			} );
 	} else {
-		updateVersion(newVersion);
+		updateVersion( newVersion );
 		done();
 	}
-});
+} );
 
 // Update package-lock.json
-gulp.task('update-package-lock', function (done) {
-	exec('npm i', (error, stdout, stderr) => {
-		if (error) {
-			console.error(`Error: ${error.message}`);
-			done(error);
+gulp.task( 'update-package-lock', function( done ) {
+	exec( 'npm i', ( error, stdout, stderr ) => {
+		if ( error ) {
+			console.error( `Error: ${ error.message }` );
+			done( error );
 			return;
 		}
-		if (stderr) {
-			console.error(`stderr: ${stderr}`);
+		if ( stderr ) {
+			console.error( `stderr: ${ stderr }` );
 		}
-		console.log(`stdout: ${stdout}`);
+		console.log( `stdout: ${ stdout }` );
 		done();
-	});
-});
+	} );
+} );
 
 // Bump version and update package-lock.json
-gulp.task('bump', gulp.series('bump-and-update', 'update-package-lock'));
+gulp.task( 'bump', gulp.series( 'bump-and-update', 'update-package-lock' ) );

From 2fa97ca5871de943306ee8a2c9dbd66d04d39674 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 10 Feb 2025 06:56:28 +0000
Subject: [PATCH 19/20] chore(deps-dev): bump vite from 5.4.11 to 5.4.14

Bumps [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite) from 5.4.11 to 5.4.14.
- [Release notes](https://github.com/vitejs/vite/releases)
- [Changelog](https://github.com/vitejs/vite/blob/v5.4.14/packages/vite/CHANGELOG.md)
- [Commits](https://github.com/vitejs/vite/commits/v5.4.14/packages/vite)

---
updated-dependencies:
- dependency-name: vite
  dependency-type: direct:development
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 package-lock.json | 13 +++++++------
 package.json      |  2 +-
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 849a79cf..183bf550 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "@bsf/force-ui",
-    "version": "1.2.1",
+    "version": "1.4.0",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@bsf/force-ui",
-            "version": "1.2.1",
+            "version": "1.4.0",
             "license": "ISC",
             "dependencies": {
                 "@emotion/is-prop-valid": "^1.3.0",
@@ -72,7 +72,7 @@
                 "tailwindcss": "^3.4.10",
                 "typescript": "5.4.2",
                 "typescript-eslint": "^8.7.0",
-                "vite": "^5.4.8",
+                "vite": "^5.4.14",
                 "vite-plugin-dts": "^4.2.3"
             },
             "peerDependencies": {
@@ -16268,10 +16268,11 @@
             }
         },
         "node_modules/vite": {
-            "version": "5.4.11",
-            "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.11.tgz",
-            "integrity": "sha512-c7jFQRklXua0mTzneGW9QVyxFjUgwcihC4bXEtujIo2ouWCe1Ajt/amn2PCxYnhYfd5k09JX3SB7OYWFKYqj8Q==",
+            "version": "5.4.14",
+            "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.14.tgz",
+            "integrity": "sha512-EK5cY7Q1D8JNhSaPKVK4pwBFvaTmZxEnoKXLG/U9gmdDcihQGNzFlgIvaxezFR4glP1LsuiedwMBqCXH3wZccA==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "esbuild": "^0.21.3",
                 "postcss": "^8.4.43",
diff --git a/package.json b/package.json
index fecd8f64..094f9eae 100644
--- a/package.json
+++ b/package.json
@@ -116,7 +116,7 @@
         "tailwindcss": "^3.4.10",
         "typescript": "5.4.2",
         "typescript-eslint": "^8.7.0",
-        "vite": "^5.4.8",
+        "vite": "^5.4.14",
         "vite-plugin-dts": "^4.2.3"
     },
     "browserslist": [

From 0d2df345aae30a31ad5a718d70a4f323a51abae4 Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Mon, 10 Feb 2025 13:59:55 +0600
Subject: [PATCH 20/20] Added console messages

---
 gulpfile.js | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/gulpfile.js b/gulpfile.js
index c8b2a27c..091a2cfb 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -45,7 +45,7 @@ function updateVersion( newVersion ) {
 
 // Bump version in all files
 gulp.task( 'bump-and-update', function( done ) {
-	// Get the new version from the command line
+	// Get the new version from command line arguments
 	let newVersion = process.argv[ 3 ];
 
 	// If the version is not provided as an argument, prompt for it
@@ -61,11 +61,24 @@ gulp.task( 'bump-and-update', function( done ) {
 			.then( ( answers ) => {
 				newVersion = answers.version;
 				updateVersion( newVersion );
+				console.log( '✅ Bumped version successfully' );
 				done();
+			} )
+			.catch( ( error ) => {
+				console.error( `Error: ${ error.message }` );
+				console.error( '❌ Failed to bump version' );
+				done( error );
 			} );
 	} else {
-		updateVersion( newVersion );
-		done();
+		try {
+			updateVersion( newVersion );
+			console.log( '✅ Bumped version successfully' );
+			done();
+		} catch ( error ) {
+			console.error( `Error: ${ error.message }` );
+			console.error( '❌ Failed to bump version' );
+			done( error );
+		}
 	}
 } );
 
@@ -81,6 +94,7 @@ gulp.task( 'update-package-lock', function( done ) {
 			console.error( `stderr: ${ stderr }` );
 		}
 		console.log( `stdout: ${ stdout }` );
+		console.log( '✅ Updated package-lock.json successfully' );
 		done();
 	} );
 } );