Merge pull request #203 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.0.0"
+  "@bsf/force-ui": "git+https://github.com/brainstormforce/force-ui#1.2.2"
 }
 ```
 

changelog.txt

@@ -1,3 +1,6 @@
+Version 1.2.2 - 4th December, 2024
+- Improvement - Removed margin and added new props to the Line Chart component for customizability.
+
 Version 1.2.1 - 25th November, 2024
 - Improvement - Added new props to the Bar Chart component for customizability.
 - Improvement - Dropzone UAT improvements.

package.json

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

src/components/dropdown-menu/dropdown-menu.stories.tsx

@@ -13,6 +13,7 @@ const meta: Meta<typeof DropdownMenu> = {
 		'DropdownMenu.List': DropdownMenu.List,
 		'DropdownMenu.Item': DropdownMenu.Item,
 		'DropdownMenu.Separator': DropdownMenu.Separator,
+		'DropdownMenu.Portal': DropdownMenu.Portal,
 	} as Record<string, React.ComponentType<unknown>>,
 	parameters: {
 		layout: 'centered',
@@ -34,15 +35,17 @@ export const ButtonTrigger: Story = ( args ) => (
 		<DropdownMenu.Trigger>
 			<Button>Dropdown</Button>
 		</DropdownMenu.Trigger>
-		<DropdownMenu.Content className="w-60">
-			<DropdownMenu.List>
-				<DropdownMenu.Item>Menu Item 1</DropdownMenu.Item>
-				<DropdownMenu.Item>Menu Item 2</DropdownMenu.Item>
-				<DropdownMenu.Item>Menu Item 3</DropdownMenu.Item>
-				<DropdownMenu.Item>Menu Item 4</DropdownMenu.Item>
-				<DropdownMenu.Item>Menu Item 5</DropdownMenu.Item>
-			</DropdownMenu.List>
-		</DropdownMenu.Content>
+		<DropdownMenu.Portal>
+			<DropdownMenu.Content className="w-60">
+				<DropdownMenu.List>
+					<DropdownMenu.Item>Menu Item 1</DropdownMenu.Item>
+					<DropdownMenu.Item>Menu Item 2</DropdownMenu.Item>
+					<DropdownMenu.Item>Menu Item 3</DropdownMenu.Item>
+					<DropdownMenu.Item>Menu Item 4</DropdownMenu.Item>
+					<DropdownMenu.Item>Menu Item 5</DropdownMenu.Item>
+				</DropdownMenu.List>
+			</DropdownMenu.Content>
+		</DropdownMenu.Portal>
 	</DropdownMenu>
 );
 
@@ -52,15 +55,17 @@ export const AvatarTrigger: Story = ( args ) => (
 			<Avatar>John</Avatar>
 			<span className="sr-only">Open Menu</span>
 		</DropdownMenu.Trigger>
-		<DropdownMenu.Content className="w-60">
-			<DropdownMenu.List>
-				<DropdownMenu.Item>Menu Item 1</DropdownMenu.Item>
-				<DropdownMenu.Item>Menu Item 2</DropdownMenu.Item>
-				<DropdownMenu.Item>Menu Item 3</DropdownMenu.Item>
-				<DropdownMenu.Item>Menu Item 4</DropdownMenu.Item>
-				<DropdownMenu.Item>Menu Item 5</DropdownMenu.Item>
-			</DropdownMenu.List>
-		</DropdownMenu.Content>
+		<DropdownMenu.Portal>
+			<DropdownMenu.Content className="w-60">
+				<DropdownMenu.List>
+					<DropdownMenu.Item>Menu Item 1</DropdownMenu.Item>
+					<DropdownMenu.Item>Menu Item 2</DropdownMenu.Item>
+					<DropdownMenu.Item>Menu Item 3</DropdownMenu.Item>
+					<DropdownMenu.Item>Menu Item 4</DropdownMenu.Item>
+					<DropdownMenu.Item>Menu Item 5</DropdownMenu.Item>
+				</DropdownMenu.List>
+			</DropdownMenu.Content>
+		</DropdownMenu.Portal>
 	</DropdownMenu>
 );
 
@@ -70,14 +75,16 @@ export const IconTrigger: Story = ( args ) => (
 			<House />
 			<span className="sr-only">Open Menu</span>
 		</DropdownMenu.Trigger>
-		<DropdownMenu.Content className="w-60">
-			<DropdownMenu.List>
-				<DropdownMenu.Item>Menu Item 1</DropdownMenu.Item>
-				<DropdownMenu.Item>Menu Item 2</DropdownMenu.Item>
-				<DropdownMenu.Item>Menu Item 3</DropdownMenu.Item>
-				<DropdownMenu.Item>Menu Item 4</DropdownMenu.Item>
-				<DropdownMenu.Item>Menu Item 5</DropdownMenu.Item>
-			</DropdownMenu.List>
-		</DropdownMenu.Content>
+		<DropdownMenu.Portal>
+			<DropdownMenu.Content className="w-60">
+				<DropdownMenu.List>
+					<DropdownMenu.Item>Menu Item 1</DropdownMenu.Item>
+					<DropdownMenu.Item>Menu Item 2</DropdownMenu.Item>
+					<DropdownMenu.Item>Menu Item 3</DropdownMenu.Item>
+					<DropdownMenu.Item>Menu Item 4</DropdownMenu.Item>
+					<DropdownMenu.Item>Menu Item 5</DropdownMenu.Item>
+				</DropdownMenu.List>
+			</DropdownMenu.Content>
+		</DropdownMenu.Portal>
 	</DropdownMenu>
 );

src/components/dropdown-menu/dropdown-menu.tsx

@@ -19,6 +19,8 @@ import {
 	FloatingPortal,
 	useInteractions,
 	useTransitionStyles,
+	type UseFloatingReturn,
+	type UseInteractionsReturn,
 } from '@floating-ui/react';
 import { callAll, cn } from '@/utilities/functions';
 import Menu from '../menu-item/menu-item';
@@ -29,6 +31,7 @@ import {
 	DropdownMenuListProps,
 	DropdownMenuProps,
 	DropdownMenuSeparatorProps,
+	DropdownPortalProps,
 	HandleClose,
 } from './dropdown-types';
 
@@ -39,8 +42,6 @@ export const DropdownMenu = ( {
 	placement = 'bottom',
 	offset: offsetValue = 10,
 	boundary = 'clippingAncestors',
-	dropdownPortalRoot,
-	dropdownPortalId,
 	children,
 	className,
 }: DropdownMenuProps ) => {
@@ -81,7 +82,16 @@ export const DropdownMenu = ( {
 	const handleClose = () => setIsOpen( false );
 
 	return (
-		<DropdownMenuContext.Provider value={ { handleClose } }>
+		<DropdownMenuContext.Provider
+			value={ {
+				refs,
+				handleClose,
+				isMounted,
+				styles,
+				floatingStyles,
+				getFloatingProps,
+			} }
+		>
 			<div className={ cn( 'relative inline-block', className ) }>
 				{ React.Children.map( children, ( child ) => {
 					if (
@@ -101,49 +111,80 @@ export const DropdownMenu = ( {
 					return null;
 				} ) }
 
-				{ isMounted && (
-					<FloatingPortal
-						id={ dropdownPortalId }
-						root={ dropdownPortalRoot }
-					>
-						<div
-							ref={ refs.setFloating }
-							style={ {
-								...floatingStyles,
-								...styles,
-							} }
-							{ ...getFloatingProps() }
-						>
-							{ React.Children.map( children, ( child ) => {
-								if (
-									(
-										child as ReactElement & {
-											type?: { displayName: string };
-										}
-									)?.type?.displayName ===
-									'DropdownMenu.Content'
-								) {
-									return child;
-								}
-								return null;
-							} ) }
-						</div>
-					</FloatingPortal>
-				) }
+				{ React.Children.map( children, ( child ) => {
+					if (
+						React.isValidElement( child ) &&
+						(
+							child as ReactElement & {
+								type: { displayName: string };
+							}
+						)?.type?.displayName === 'DropdownMenu.Portal'
+					) {
+						return child;
+					}
+					return null;
+				} ) }
 			</div>
 		</DropdownMenuContext.Provider>
 	);
 };
 
 DropdownMenu.displayName = 'DropdownMenu';
 
+export const DropdownMenuPortal = ( {
+	children,
+	className,
+	root,
+	id,
+}: DropdownPortalProps ) => {
+	const { refs, floatingStyles, getFloatingProps, isMounted, styles } =
+		useDropdownMenuContext() as {
+			refs: UseFloatingReturn['refs'];
+			floatingStyles: UseFloatingReturn['floatingStyles'];
+			getFloatingProps: UseInteractionsReturn['getFloatingProps'];
+			isMounted: boolean;
+			styles: React.CSSProperties;
+		};
+
+	return (
+		isMounted && (
+			<FloatingPortal id={ id } root={ root }>
+				<div
+					ref={ refs.setFloating }
+					className={ className }
+					style={ {
+						...floatingStyles!,
+						...styles!,
+					} }
+					{ ...getFloatingProps() }
+				>
+					{ React.Children.map( children, ( child ) => {
+						if (
+							(
+								child as ReactElement & {
+									type?: { displayName: string };
+								}
+							)?.type?.displayName === 'DropdownMenu.Content'
+						) {
+							return child;
+						}
+						return null;
+					} ) }
+				</div>
+			</FloatingPortal>
+		)
+	);
+};
+
+DropdownMenuPortal.displayName = 'DropdownMenu.Portal';
+
 export const DropdownMenuTrigger = React.forwardRef<
 	HTMLDivElement,
 	DropdownCommonProps
->( ( { children, className, ...props }, ref ) => {
+>( ( { children, className, ...props }: DropdownCommonProps, ref ) => {
 	if ( isValidElement( children ) ) {
 		return React.cloneElement( children as React.ReactElement, {
-			className,
+			className: cn( className, children.props.className ),
 			ref,
 			...props,
 		} );
@@ -188,11 +229,11 @@ export const DropdownMenuList = ( props: DropdownMenuListProps ) => {
 
 DropdownMenuList.displayName = 'DropdownMenu.List';
 
-export const DropdownMenuItem: React.FC<DropdownMenuItemProps> = ( {
+export const DropdownMenuItem = ( {
 	children,
 	as: Tag = Menu.Item,
 	...props
-} ) => {
+}: DropdownMenuItemProps ) => {
 	const { handleClose } = useDropdownMenuContext();
 
 	if ( ! children ) {
@@ -232,5 +273,6 @@ DropdownMenu.Content = DropdownMenuContent;
 DropdownMenu.List = DropdownMenuList;
 DropdownMenu.Item = DropdownMenuItem;
 DropdownMenu.Separator = DropdownMenuSeparator;
+DropdownMenu.Portal = DropdownMenuPortal;
 
 export default DropdownMenu;

src/components/dropdown-menu/dropdown-types.ts

@@ -42,10 +42,6 @@ export interface DropdownMenuProps extends DropdownCommonProps {
 	offset?: OffsetOptions;
 	/** Defines the boundary of the dropdown menu. */
 	boundary?: Boundary;
-	/** Defines the trigger element of the dropdown menu. */
-	dropdownPortalRoot?: FloatingPortalProps['root'];
-	/** Defines the trigger element of the dropdown menu. */
-	dropdownPortalId?: FloatingPortalProps['id'];
 	/** Additional class name */
 	className?: string;
 }
@@ -61,6 +57,20 @@ export interface DropdownMenuItemProps {
 	className?: string;
 }
 
+export interface DropdownPortalProps extends DropdownCommonProps {
+	/**
+	 * The ID of the portal where the dropdown will be rendered.
+	 * @default undefined
+	 */
+	id?: FloatingPortalProps['id'];
+
+	/**
+	 * The root element where the dropdown will be rendered.
+	 * @default undefined
+	 */
+	root?: FloatingPortalProps['root'];
+}
+
 export type DropdownMenuSeparatorProps = MenuSeparatorProps;
 
 export type DropdownMenuListProps = MenuListProps;

src/components/line-chart/line-chart.tsx

@@ -8,6 +8,7 @@ import {
 } from 'recharts';
 import ChartTooltipContent from './chart-tooltip-content';
 import Label from '../label';
+import type { CategoricalChartProps } from 'recharts/types/chart/generateCategoricalChart';
 
 interface DataItem {
 	[key: string]: number | string;
@@ -70,6 +71,15 @@ interface LineChartProps {
 
 	/** Determines whether dots are shown on each data point. */
 	withDots?: boolean;
+
+	/**
+	 * Line chart Wrapper props to apply additional props to the wrapper component. Ex. `margin`, or `onClick` etc.
+	 * @see https://recharts.org/en-US/api/LineChart
+	 */
+	lineChartWrapperProps?: Omit<
+		CategoricalChartProps,
+		'width' | 'height' | 'data'
+	>;
 }
 
 const LineChart = ( {
@@ -91,6 +101,7 @@ const LineChart = ( {
 	chartWidth = 350,
 	chartHeight = 200,
 	withDots = false,
+	lineChartWrapperProps,
 }: LineChartProps ) => {
 	const defaultColors = [ { stroke: '#2563EB' }, { stroke: '#38BDF8' } ];
 
@@ -114,10 +125,10 @@ const LineChart = ( {
 
 	return (
 		<LineChartWrapper
+			{ ...lineChartWrapperProps }
 			width={ chartWidth }
 			height={ chartHeight }
 			data={ data }
-			margin={ { left: 14, right: 14 } }
 		>
 			{ showCartesianGrid && <CartesianGrid vertical={ false } /> }
 			{ showXAxis && (

version.json

@@ -1,3 +1,3 @@
 {
-	"force-ui": "1.2.1"
+	"force-ui": "1.2.2"
 }