From 5bb0f6c38510ad5b400c4b5961a175e0b8ee6d68 Mon Sep 17 00:00:00 2001 From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com> Date: Tue, 3 Dec 2024 09:19:42 +0600 Subject: [PATCH 1/7] fix: z-index of the DropdownMenu component is not overridable --- .../dropdown-menu/dropdown-menu.tsx | 114 ++++++++++++------ .../dropdown-menu/dropdown-types.ts | 18 ++- 2 files changed, 92 insertions(+), 40 deletions(-) diff --git a/src/components/dropdown-menu/dropdown-menu.tsx b/src/components/dropdown-menu/dropdown-menu.tsx index 6cdcf2f3..b1c6b0cf 100644 --- a/src/components/dropdown-menu/dropdown-menu.tsx +++ b/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 ( - +
{ React.Children.map( children, ( child ) => { if ( @@ -101,35 +111,19 @@ export const DropdownMenu = ( { return null; } ) } - { isMounted && ( - -
- { React.Children.map( children, ( child ) => { - if ( - ( - child as ReactElement & { - type?: { displayName: string }; - } - )?.type?.displayName === - 'DropdownMenu.Content' - ) { - return child; - } - return null; - } ) } -
- - ) } + { React.Children.map( children, ( child ) => { + if ( + React.isValidElement( child ) && + ( + child as ReactElement & { + type: { displayName: string }; + } + )?.type?.displayName === 'DropdownMenu.Portal' + ) { + return child; + } + return null; + } ) }
); @@ -137,13 +131,60 @@ export const DropdownMenu = ( { 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 && ( + +
+ { React.Children.map( children, ( child ) => { + if ( + ( + child as ReactElement & { + type?: { displayName: string }; + } + )?.type?.displayName === 'DropdownMenu.Content' + ) { + return child; + } + return null; + } ) } +
+ + ) + ); +}; + +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 = ( { +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; diff --git a/src/components/dropdown-menu/dropdown-types.ts b/src/components/dropdown-menu/dropdown-types.ts index 96603db1..753d2719 100644 --- a/src/components/dropdown-menu/dropdown-types.ts +++ b/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; From 954d8421a9a9ac5e0c8d90c83548eaf764c5e1a0 Mon Sep 17 00:00:00 2001 From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com> Date: Tue, 3 Dec 2024 09:27:06 +0600 Subject: [PATCH 2/7] Update the DropdownMenu component story --- .../dropdown-menu/dropdown-menu.stories.tsx | 61 +++++++++++-------- 1 file changed, 34 insertions(+), 27 deletions(-) diff --git a/src/components/dropdown-menu/dropdown-menu.stories.tsx b/src/components/dropdown-menu/dropdown-menu.stories.tsx index b932ecf3..3e888d20 100644 --- a/src/components/dropdown-menu/dropdown-menu.stories.tsx +++ b/src/components/dropdown-menu/dropdown-menu.stories.tsx @@ -13,6 +13,7 @@ const meta: Meta = { 'DropdownMenu.List': DropdownMenu.List, 'DropdownMenu.Item': DropdownMenu.Item, 'DropdownMenu.Separator': DropdownMenu.Separator, + 'DropdownMenu.Portal': DropdownMenu.Portal, } as Record>, parameters: { layout: 'centered', @@ -34,15 +35,17 @@ export const ButtonTrigger: Story = ( args ) => ( - - - Menu Item 1 - Menu Item 2 - Menu Item 3 - Menu Item 4 - Menu Item 5 - - + + + + Menu Item 1 + Menu Item 2 + Menu Item 3 + Menu Item 4 + Menu Item 5 + + + ); @@ -52,15 +55,17 @@ export const AvatarTrigger: Story = ( args ) => ( John Open Menu - - - Menu Item 1 - Menu Item 2 - Menu Item 3 - Menu Item 4 - Menu Item 5 - - + + + + Menu Item 1 + Menu Item 2 + Menu Item 3 + Menu Item 4 + Menu Item 5 + + + ); @@ -70,14 +75,16 @@ export const IconTrigger: Story = ( args ) => ( Open Menu - - - Menu Item 1 - Menu Item 2 - Menu Item 3 - Menu Item 4 - Menu Item 5 - - + + + + Menu Item 1 + Menu Item 2 + Menu Item 3 + Menu Item 4 + Menu Item 5 + + + ); From 58e36669d7eb3bb9cf3a1a917b7e616a5bdd34f9 Mon Sep 17 00:00:00 2001 From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com> Date: Wed, 4 Dec 2024 13:16:06 +0600 Subject: [PATCH 3/7] fix: Removed line chart default margin and Added a new prop to apply additional props to the LineChartWrapper component. --- src/components/line-chart/line-chart.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/line-chart/line-chart.tsx b/src/components/line-chart/line-chart.tsx index 1000ff2e..bff51da0 100644 --- a/src/components/line-chart/line-chart.tsx +++ b/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,12 @@ interface LineChartProps { /** Determines whether dots are shown on each data point. */ withDots?: boolean; + + /** + * Line chart Wrapper props. + * @see https://recharts.org/en-US/api/LineChart + */ + wrapperProps?: Omit; } const LineChart = ( { @@ -91,6 +98,7 @@ const LineChart = ( { chartWidth = 350, chartHeight = 200, withDots = false, + wrapperProps, }: LineChartProps ) => { const defaultColors = [ { stroke: '#2563EB' }, { stroke: '#38BDF8' } ]; @@ -114,10 +122,10 @@ const LineChart = ( { return ( { showCartesianGrid && } { showXAxis && ( From 80e9e70dab4663acdd843adbf44a253fbfada4fa Mon Sep 17 00:00:00 2001 From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com> Date: Wed, 4 Dec 2024 13:22:48 +0600 Subject: [PATCH 4/7] Renamed the prop name --- src/components/line-chart/line-chart.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/line-chart/line-chart.tsx b/src/components/line-chart/line-chart.tsx index bff51da0..840538c9 100644 --- a/src/components/line-chart/line-chart.tsx +++ b/src/components/line-chart/line-chart.tsx @@ -76,7 +76,7 @@ interface LineChartProps { * Line chart Wrapper props. * @see https://recharts.org/en-US/api/LineChart */ - wrapperProps?: Omit; + lineChartWrapperProps?: Omit; } const LineChart = ( { @@ -98,7 +98,7 @@ const LineChart = ( { chartWidth = 350, chartHeight = 200, withDots = false, - wrapperProps, + lineChartWrapperProps, }: LineChartProps ) => { const defaultColors = [ { stroke: '#2563EB' }, { stroke: '#38BDF8' } ]; @@ -122,7 +122,7 @@ const LineChart = ( { return ( Date: Wed, 4 Dec 2024 13:26:20 +0600 Subject: [PATCH 5/7] Updated doc comment --- src/components/line-chart/line-chart.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/line-chart/line-chart.tsx b/src/components/line-chart/line-chart.tsx index 840538c9..170a27fb 100644 --- a/src/components/line-chart/line-chart.tsx +++ b/src/components/line-chart/line-chart.tsx @@ -73,10 +73,13 @@ interface LineChartProps { withDots?: boolean; /** - * Line chart Wrapper props. + * 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; + lineChartWrapperProps?: Omit< + CategoricalChartProps, + 'width' | 'height' | 'data' + >; } const LineChart = ( { From 90a8d3edbaf42582611b5f7bd212d46989d35603 Mon Sep 17 00:00:00 2001 From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com> Date: Wed, 4 Dec 2024 15:52:27 +0600 Subject: [PATCH 6/7] Update changelog.txt --- changelog.txt | 3 +++ 1 file changed, 3 insertions(+) diff --git a/changelog.txt b/changelog.txt index 081ba122..a30e73f1 100644 --- a/changelog.txt +++ b/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 - 21st November, 2024 - Improvement - Added new props to the Bar Chart component for customizability. From f9307a23e297d45c3fa3a9c622a052a3bcdf3d8b Mon Sep 17 00:00:00 2001 From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com> Date: Wed, 4 Dec 2024 15:55:44 +0600 Subject: [PATCH 7/7] Bump Version --- README.md | 2 +- package.json | 2 +- version.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 14a24e0f..81ffbcb6 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.0.0" + "@bsf/force-ui": "git+https://github.com/brainstormforce/force-ui#1.2.2" } ``` diff --git a/package.json b/package.json index 8f70d072..28c9c5b9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@bsf/force-ui", - "version": "1.2.0", + "version": "1.2.2", "description": "Library of components for the BSF project", "main": "./dist/force-ui.js", "module": "./dist/force-ui.js", diff --git a/version.json b/version.json index 60b2ea0e..7fd3c879 100644 --- a/version.json +++ b/version.json @@ -1,3 +1,3 @@ { - "force-ui": "1.2.0" + "force-ui": "1.2.2" }