v1.3.1

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.0"
+  "@bsf/force-ui": "git+https://github.com/brainstormforce/force-ui#1.3.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.3.0
+npm i -S @bsf/force-ui@git+https://github.com/brainstormforce/force-ui.git#1.3.1
 ```
 
 <br />

changelog.txt

@@ -1,3 +1,13 @@
+Version 1.3.1 - 17th December, 2024
+Fixed - The underline issue to enhance visual consistency.
+Fixed - Issue with the Select component where a check mark was displayed even when no item was selected.
+Fixed - Design mismatch in the Switch component.
+Fixed - Text, icon size, alignment, and color inconsistencies in the Date Picker to ensure a uniform appearance.
+Fixed - Input ref not pointing to the input field.
+Fixed - Icon size and alignment issues in the Menu component for better visual clarity.
+Fixed - Sidebar height not being overridable.
+Improvement - Removed backdrop blur to enhance performance and visual clarity.
+
 Version 1.3.0 - 16th December, 2024
 - New - Table component.
 - Fixed - Asterisk missing on required input label.

package.json

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

src/components/datepicker/datepicker-component.tsx

@@ -204,9 +204,10 @@ const DatePickerComponent = ( {
 						onClick={ handlePrevButtonClick }
 						className="bg-background-primary border-none cursor-pointer"
 						aria-label="Previous Button"
-					>
-						<ChevronLeft className="h-4 w-4" />
-					</Button>
+						icon={
+							<ChevronLeft className="h-4 w-4 text-button-tertiary-color" />
+						}
+					/>
 
 					<Button
 						variant="ghost"
@@ -232,9 +233,10 @@ const DatePickerComponent = ( {
 						onClick={ handleNextButtonClick }
 						className="bg-background-primary border-none cursor-pointer"
 						aria-label="Next Button"
-					>
-						<ChevronRight className="h-4 w-4" />
-					</Button>
+						icon={
+							<ChevronRight className="h-4 w-4 text-button-tertiary-color" />
+						}
+					/>
 				</div>
 
 				{ showYearSelect && (
@@ -255,7 +257,9 @@ const DatePickerComponent = ( {
 									yearValue === selectedYear &&
 										yearValue !==
 											new Date().getFullYear() &&
-										'bg-background-brand text-text-on-color hover:bg-background-brand hover:text-black'
+										'bg-background-brand text-text-on-color hover:bg-background-brand hover:text-black',
+									yearValue === new Date().getFullYear() &&
+										'font-semibold'
 								) }
 							>
 								{ yearValue }
@@ -287,7 +291,11 @@ const DatePickerComponent = ( {
 											customMonthProps.calendarMonth.date.getFullYear() &&
 										customMonthProps.calendarMonth.date.getFullYear() !==
 											new Date().getFullYear() &&
-										'bg-background-brand text-text-on-color hover:bg-background-brand hover:text-black'
+										'bg-background-brand text-text-on-color hover:bg-background-brand hover:text-black',
+									monthIndex === new Date().getMonth() &&
+										new Date().getFullYear() ===
+											selectedYear &&
+										'font-semibold'
 								) }
 							>
 								{ format( new Date( 0, monthIndex ), 'MMM' ) }
@@ -312,7 +320,7 @@ const DatePickerComponent = ( {
 				{ weekdays.map( ( weekday, weekdayIndex ) => (
 					<button
 						key={ weekdayIndex }
-						className="h-10 w-10 px-1.5 py-2 text-center text-muted-foreground text-[0.8rem] font-normal content-center bg-transparent border-none"
+						className="h-10 w-10 px-1.5 py-2 text-center text-text-secondary text-sm font-normal content-center bg-transparent border-none shrink-0"
 					>
 						{ weekday }
 					</button>
@@ -362,7 +370,7 @@ const DatePickerComponent = ( {
 			'bg-transperant opacity-50 text-text-disabled cursor-auto';
 
 		const buttonClasses = cn(
-			'h-10 w-10 flex items-center justify-center transition text-text-secondary relative',
+			'h-10 w-10 flex items-center justify-center transition text-text-secondary relative text-sm',
 			'border-none rounded',
 			( isSelected || isPartOfRange ) && ( ! isOutside || isPreviousMonth )
 				? 'bg-background-brand text-text-on-color'
@@ -383,7 +391,7 @@ const DatePickerComponent = ( {
 		return (
 			<button
 				onClick={ handleClick }
-				className={ buttonClasses }
+				className={ cn( buttonClasses, isToday && 'font-semibold' ) }
 				disabled={ isDisabled || isOutside }
 				aria-label={ format( day.date, 'EEEE, MMMM do, yyyy' ) }
 			>
@@ -523,12 +531,12 @@ const DatePickerComponent = ( {
 				// showHead={false}
 				classNames={ {
 					months: monthsClassName,
-					month: 'flex flex-col p-2 gap-1 text-center border border-border-subtle rounded-md w-full',
+					month: 'flex flex-col p-2 gap-1 text-center w-full',
 					caption: 'relative flex justify-center items-center',
 					table: 'w-full border-separate border-spacing-0',
 					head_row: 'flex mb-1',
 					head_cell:
-						'text-muted-foreground rounded-md w-10 font-normal text-[0.8rem]',
+						'text-muted-foreground rounded-md w-10 font-normal text-sm',
 					row: 'flex w-full mt-2',
 					cell: 'h-10 w-10 text-center text-sm p-0 relative',
 					day: 'h-10 w-10 p-0 font-normal bg-background-primary text-current',

src/components/datepicker/datepicker.tsx

@@ -142,7 +142,7 @@ const DatePicker = ( {
 				}
 				footer={
 					isFooter && (
-						<div className="flex justify-end p-2 gap-3 border border-solid border-border-subtle border-t-0 rounded-md rounded-tl-none rounded-tr-none">
+						<div className="flex bg-background-primary justify-end p-2 gap-3 border border-solid border-border-subtle border-t-0 rounded-md rounded-tl-none rounded-tr-none">
 							<Button
 								variant="outline"
 								onClick={ handleCancelClick }
@@ -175,7 +175,7 @@ const DatePicker = ( {
 				variant={ variant }
 				width="w-auto"
 				footer={
-					<div className="flex justify-end p-2 gap-3 border border-solid border-border-subtle border-t-0 rounded-md rounded-tl-none rounded-tr-none">
+					<div className="flex bg-background-primary justify-end p-2 gap-3 border border-solid border-border-subtle border-t-0 rounded-md rounded-tl-none rounded-tr-none">
 						<Button variant="outline" onClick={ handleCancelClick }>
 							{ cancelButtonText }
 						</Button>
@@ -218,7 +218,7 @@ const DatePicker = ( {
 					width="w-auto"
 					numberOfMonths={ 2 }
 					footer={
-						<div className="flex justify-end p-2 gap-3 border border-solid border-border-subtle border-t-0 rounded-md rounded-tl-none rounded-tr-none">
+						<div className="flex justify-end p-2 gap-3 border border-solid border-border-subtle border-t-0 rounded-md rounded-tl-none rounded-tr-none bg-background-primary">
 							<Button
 								variant="outline"
 								onClick={ handleCancelClick }

src/components/dialog/dialog.tsx

@@ -261,7 +261,7 @@ export const DialogBackdrop = ( {
 					{ open && (
 						<motion.div
 							className={ cn(
-								'fixed inset-0 -z-10 bg-background-inverse/90 backdrop-blur-sm',
+								'fixed inset-0 -z-10 bg-background-inverse/90',
 								className
 							) }
 							{ ...props }

src/components/drawer/drawer-backdrop.tsx

@@ -34,7 +34,7 @@ const DrawerBackdrop = ( { className, ...props }: DrawerBackdropProps ) => {
 				{ open && (
 					<motion.div
 						className={ cn(
-							'fixed inset-0 -z-10 bg-background-inverse/90 backdrop-blur-sm',
+							'fixed inset-0 -z-10 bg-background-inverse/90',
 							className
 						) }
 						{ ...props }

src/components/input/input.tsx

@@ -11,6 +11,7 @@ import { nanoid } from 'nanoid';
 import { cn } from '@/utilities/functions';
 import { Upload, X } from 'lucide-react';
 import Label from '../label';
+import { mergeRefs } from '@/components/toaster/utils';
 
 export declare interface InputProps {
 	/** Unique identifier for the input element. */
@@ -275,7 +276,7 @@ export const InputComponent = (
 					) }
 				>
 					<input
-						ref={ ref }
+						ref={ mergeRefs( inputRef, ref ) }
 						id={ inputId }
 						type="file"
 						className={ cn(
@@ -318,7 +319,7 @@ export const InputComponent = (
 			>
 				{ getPrefix() }
 				<input
-					ref={ inputRef }
+					ref={ mergeRefs( inputRef, ref ) }
 					id={ inputId }
 					type={ type }
 					className={ cn(

src/components/menu-item/menu-item.tsx

@@ -67,8 +67,8 @@ export const MenuList = ( {
 		md: 'text-sm',
 	}?.[ size ?? 'md' ];
 	const iconSizeClasses = {
-		sm: '[&>svg]:size-4',
-		md: '[&>svg]:size-5',
+		sm: 'size-4',
+		md: 'size-5',
 	}?.[ size ?? 'md' ];
 
 	const handleToggle = () => {
@@ -127,23 +127,23 @@ export const MenuList = ( {
 
 					{ arrow && (
 						<motion.span
-							variants={ arrowAnimationVariants }
-							animate={ isOpen ? 'open' : 'closed' }
+							className="flex items-center text-border-strong"
+							initial="hidden"
+							animate={ getArrowAnimationVariant() }
+							exit="hidden"
+							variants={ arrowFadeVariants }
 							transition={ { duration: 0.15 } }
-							className={ cn(
-								'flex items-center text-border-strong',
-								iconSizeClasses
-							) }
 						>
-							<motion.div
-								initial="hidden"
-								animate={ getArrowAnimationVariant() }
-								exit="hidden"
-								variants={ arrowFadeVariants }
+							<motion.span
+								className="inline-flex p-1"
+								variants={ arrowAnimationVariants }
+								animate={ isOpen ? 'open' : 'closed' }
 								transition={ { duration: 0.15 } }
 							>
-								<ChevronDown />
-							</motion.div>
+								<ChevronDown
+									className={ cn( 'shrink-0', iconSizeClasses ) }
+								/>
+							</motion.span>
 						</motion.span>
 					) }
 				</div>

src/components/radio-button/radio-button.tsx

@@ -455,7 +455,7 @@ export const RadioButtonComponent = (
 						<>
 							<Switch
 								defaultValue={ false }
-								size={ size === 'md' ? 'lg' : 'sm' }
+								size={ size }
 								onChange={ () => {
 									if ( ! multiSelection ) {
 										// Toggle the switch on or off

src/components/select/select.tsx

@@ -296,7 +296,7 @@ export function SelectOptions( {
 
 	const initialSelectedValueIndex = useMemo( () => {
 		const currentValue = getValues();
-		let indexValue = 0;
+		let indexValue = -1;
 
 		if ( currentValue ) {
 			indexValue = Children.toArray( children ).findIndex(
@@ -315,7 +315,7 @@ export function SelectOptions( {
 			);
 		}
 
-		return indexValue === -1 ? 0 : indexValue;
+		return indexValue;
 	}, [ value, selected, children ] );
 
 	useLayoutEffect( () => {

src/components/sidebar/sidebar.tsx

@@ -36,8 +36,6 @@ export interface SidebarProps extends SidebarCommonProps {
 	onCollapseChange?: ( isCollapsed: boolean ) => void;
 	/** Determines if the Sidebar can be collapsed or not. If true, a collapse button is shown. */
 	collapsible?: boolean;
-	/** Determines whether the Sidebar should occupy the full screen height. */
-	screenHeight?: boolean;
 	/** Controls whether a border should appear on the right of the Sidebar. */
 	borderOn?: boolean;
 }
@@ -55,7 +53,6 @@ export const Sidebar = ( {
 	className,
 	onCollapseChange,
 	collapsible = true,
-	screenHeight = true,
 	borderOn = true,
 	...props
 }: SidebarProps ) => {
@@ -88,14 +85,6 @@ export const Sidebar = ( {
 				const storedState = safeLocalStorage.get( 'sidebar-collapsed' );
 				setIsCollapsed( storedState ? storedState : false );
 			}
-
-			if ( sideBarRef.current ) {
-				if ( !! screenHeight ) {
-					sideBarRef.current.style.height = `${ window.innerHeight }px`;
-				} else {
-					sideBarRef.current.style.height = 'auto';
-				}
-			}
 		};
 
 		window.addEventListener( 'resize', handleScreenResize );
@@ -104,7 +93,7 @@ export const Sidebar = ( {
 		return () => {
 			window.removeEventListener( 'resize', handleScreenResize );
 		};
-	}, [ screenHeight, collapsible ] );
+	}, [ collapsible ] );
 
 	return (
 		<SidebarContext.Provider
@@ -113,10 +102,9 @@ export const Sidebar = ( {
 			<div
 				ref={ sideBarRef }
 				className={ cn(
-					'overflow-auto w-72 px-4 py-4 gap-4 flex flex-col bg-background-primary',
+					'h-full overflow-auto w-72 px-4 py-4 gap-4 flex flex-col bg-background-primary',
 					borderOn &&
 						'border-0 border-r border-solid border-border-subtle',
-					!! screenHeight && 'h-screen',
 					'transition-all duration-200',
 					isCollapsed && 'w-16 px-2',
 					className

src/components/switch/switch.stories.tsx

@@ -49,21 +49,21 @@ const Template: StoryFn<SwitchProps> = ( { defaultValue, size, ...args } ) => {
 export const Basic = Template.bind( {} );
 Basic.args = {
 	defaultValue: false,
-	size: 'lg',
+	size: 'sm',
 	disabled: false,
 };
 
 export const WithLabel = Template.bind( {} );
 WithLabel.args = {
 	defaultValue: true,
-	size: 'lg',
+	size: 'sm',
 	disabled: false,
 	label: { heading: 'Switch Label', description: 'Switch Description' },
 };
 
 export const Disabled = Template.bind( {} );
 Disabled.args = {
-	size: 'lg',
+	size: 'sm',
 	disabled: true,
 	label: {
 		heading: 'Disabled Switch',