@agility/plenum-ui 2.0.0-rc9 → 2.0.1

package/stories/organisms/ButtonDropdown/ButtonDropdown.tsx

@@ -8,6 +8,7 @@ import Dropdown, { IDropdownProps, defaultClassNames } from "../DropdownComponen
 export interface IButtonDropdownProps {
 	button: IButtonProps
 	dropDown: IDropdownProps
+	hideDivider?: boolean
 	placement?: IDropdownProps["placement"]
 	offsetOptions?: IDropdownProps["offsetOptions"]
 }
@@ -15,22 +16,7 @@ export interface IButtonDropdownProps {
 /**
  * Primary UI component for user interaction
  */
-const ButtonDropdown: FC<IButtonDropdownProps> = ({ button, dropDown, placement, offsetOptions }) => {
-	const dropDownClasses: IDropdownProps["classNames"] = {
-		...defaultClassNames,
-		groupClassname: cn(
-			"flex items-center justify-center rounded-l-none border !border-l-0 rounded-r  px-2 transition-all hover:!border-l-0",
-			button.actionType === "primary"
-				? "border-purple-600 bg-purple-600  !text-white  hover:border-purple-700 hover:bg-purple-700 active:!border-purple-800 active:!bg-purple-800 fill-white"
-				: "",
-			button.actionType === "secondary"
-				? "border-purple-50 bg-purple-50 !text-purple-700  hover:border-purple-100 hover:bg-purple-100 active:!border-purple-300 active:!bg-purple-300 fill-purple-700"
-				: "",
-			button.actionType === "alternative"
-				? "border-gray-300 bg-white !text-gray-700 fill-gray-700  hover:border-gray-300 hover:bg-gray-50 active:bg-gray-100"
-				: ""
-		)
-	}
+const ButtonDropdown: FC<IButtonDropdownProps> = ({ button, dropDown, hideDivider = false, placement = "bottom-end", offsetOptions }) => {
 	return (
 		<div className="flex items-stretch focus-within:ring-purple-600 focus-within:ring-2 focus-within:ring-offset-white focus-within:ring-offset-2 rounded-[3px]">
 			<Button
@@ -38,40 +24,66 @@ const ButtonDropdown: FC<IButtonDropdownProps> = ({ button, dropDown, placement,
 					...button,
 					className: cn(
 						button.className,
-						"!rounded-r-none !border-r-0 hover:!border-r-0 !focus:ring-transparent !focus-visible:ring-transparent !focus-within:ring-transparent !focus:ring-0 !focus-within:ring-0 !focus-visible:ring-0 !focus:ring-offset-0 !focus-visible:ring-offset-0 !focus-within:ring-offset-0 !ring-0 outline-none focus:outline-none focus-visible:outline-none focus-within:outline-none !ring-offset-0"
+						"!rounded-r-none !border-r-0 hover:!border-r-0 !focus:ring-transparent !focus-visible:ring-transparent !focus-within:ring-transparent !focus:ring-0 !focus-within:ring-0 !focus-visible:ring-0 !focus:ring-offset-0 !focus-visible:ring-offset-0 !focus-within:ring-offset-0 !ring-0 outline-none focus:outline-none focus-visible:outline-none focus-within:outline-none !ring-offset-0",
+						"border-r-transparent"
 					)
 				}}
 			/>
-			<div
+			{!hideDivider && <div
 				className={cn(
 					"w-[1px] rt",
-					button.actionType === "primary" ? "bg-purple-700" : "",
-					button.actionType === "secondary" ? "bg-purple-200" : "",
+					button.actionType === "primary"
+						? "bg-violet-700 text-violet-100 hover:border-violet-700 hover:bg-violet-700 disabled:bg-violet-400 disabled:focus-visible:ring-0"
+						: "",
+					button.actionType === "secondary" ? "bg-purple-200 " : "",
 					button.actionType === "alternative" ? "bg-gray-300" : ""
 				)}
-			></div>
+			></div>}
 			<Dropdown
 				{...{
-					...(dropDown as IDropdownProps),
 					CustomDropdownTrigger: (
 						<DynamicIcon
 							{...{
-								icon: "ChevronDownIcon",
+								icon: "IconChevronDown",
 								className: cn("h-5 w-5", {
-									"text-white": button.actionType === "primary",
-									"text-purple-700": button.actionType === "secondary",
+									"text-violet-100": button.actionType === "primary",
+									"text-purple-700 ": button.actionType === "secondary",
 									"text-gray-700": button.actionType === "alternative"
-								})
+								},
+								dropDown.iconClassname
+								),
 							}}
 						/>
 					),
-					classNames: dropDownClasses,
+					buttonClassname: cn(
+						"flex items-center justify-center rounded-l-none border !border-l-0 rounded-r  px-2 transition-all hover:!border-l-0",
+						button.actionType === "primary"
+							? cn(
+									"border-violet-700 bg-violet-800  !text-white  hover:border-violet-700 hover:bg-violet-700 active:!border-violet-800 active:bg-violet-800 fill-white",
+									"disabled:bg-violet-400 disabled:text-white disabled:hover:none disabled:active:bg-violet-400 disabled:border-violet-400"
+							  )
+							: "",
+						button.actionType === "secondary"
+							? cn(
+									"border-purple-400 bg-purple-50 text-purple-700   hover:bg-purple-100 active:bg-purple-300 fill-purple-700",
+									"disabled:bg-purple-50 disabled:text-grey-50 disabled:hover:none disabled:active:bg-purple-50 "
+							  )
+							: "",
+						button.actionType === "alternative"
+							? cn(
+									"border-gray-300 bg-white text-gray-700 fill-gray-700  hover:border-gray-300 hover:bg-gray-50 active:bg-gray-100",
+									"disabled:bg-gray-100 disabled:text-gray-500 disabled:hover:none disabled:active:bg-gray-100 disabled:border-gray-300"
+							  )
+							: "",
+						dropDown.buttonClassname
+					),
 					offsetOptions: offsetOptions ?? {
 						crossAxis: 0,
-						mainAxis: 5, //up/down
-						alignmentAxis: -10 //left/right
+						mainAxis: -4, //up/down
+						alignmentAxis: 0 //left/right
 					},
-					placement
+					placement,
+					...(dropDown as IDropdownProps),
 				}}
 			/>
 			<div className="hidden !bg-purple-100 !text-purple-600 transition-all hover:bg-purple-200 focus:bg-purple-300" />

package/stories/organisms/DropdownComponent/Dropdown.stories.tsx

@@ -13,12 +13,12 @@ const meta: Meta<typeof Dropdown> = {
 type Story = StoryObj<typeof Dropdown>
 
 const IconElement = () => (
-	<DynamicIcon className="h-5 w-5 text-gray-400 hover:text-gray-600" icon={"DotsVerticalIcon"} />
+	<DynamicIcon className="h-5 w-5 text-gray-400 hover:text-gray-600" icon={"IconDotsVertical"} />
 )
 const defaultArgs: Story["args"] = {
 	items: [...dropdownDataBase],
 	label: "Dropdown",
-	classNames: defaultClassNames,
+
 	placement: "bottom-end"
 }
 export const WithLabel: Story = {
@@ -39,6 +39,30 @@ export const WithLabelAndIcons: Story = {
 		items: [...dropdownDataWithIcons]
 	}
 }
+export const WithCustomItemLabelsAndIcons: Story = {
+	args: {
+		...defaultArgs,
+		items: [
+			...dropdownDataWithIcons,
+			[
+				{
+					icon: { icon: "Icon123" },
+					label: (
+						<div className="flex items-baseline gap-x-2">
+							sdfsdf{" "}
+							<div className="flex space-x-1">
+								<div className="h-1 w-1 animate-[bounce_1s_infinite] rounded-full bg-gray-500"></div>
+								<div className="h-1 w-1 animate-[bounce_1s_infinite_0.2s] rounded-full bg-gray-500"></div>
+								<div className="h-1 w-1 animate-[bounce_1s_infinite_0.4s] rounded-full bg-gray-500"></div>
+							</div>
+						</div>
+					),
+					key: "sdfsdf"
+				}
+			]
+		]
+	}
+}
 export const WithIcons: Story = {
 	args: {
 		...defaultArgs,

package/stories/organisms/DropdownComponent/DropdownComponent.tsx

@@ -1,5 +1,4 @@
-import React, { Fragment, HTMLAttributes, useState } from "react"
-import { Transition } from "@headlessui/react"
+import React, { HTMLAttributes, useEffect, useMemo, useRef, useState } from "react"
 import { default as cn } from "classnames"
 import {
 	useFloating,
@@ -13,50 +12,60 @@ import {
 	autoPlacement,
 	shift,
 	FloatingPortal,
+	FloatingList,
 	useTransitionStyles,
-	Placement
+	Placement,
+	useListNavigation
 } from "@floating-ui/react"
 
 import { ClassNameWithAutocomplete } from "utils/types"
 import { DynamicIcon, IDynamicIconProps, UnifiedIconName } from "@/stories/atoms/icons"
+import { list } from "postcss"
 
-export interface IItemProp extends HTMLAttributes<HTMLButtonElement> {
-	icon?: IDynamicIconProps | UnifiedIconName
+export interface IItemProp {
+	//Don't think this needs to extend HtmlButton... extends HTMLAttributes<HTMLButtonElement> {
+	icon?: IDynamicIconProps
 	iconPosition?: "trailing" | "leading"
-	label: string
+	label: string | JSX.Element
 	onClick?(): void
 	isEmphasized?: boolean
 	key: React.Key
+	iconObj?: JSX.Element
 }
-export interface IDropdownClassnames {
-	groupClassname?: ClassNameWithAutocomplete
-	itemsClassname?: ClassNameWithAutocomplete
-	itemClassname?: ClassNameWithAutocomplete
-	activeItemClassname?: ClassNameWithAutocomplete
-	buttonClassname?: ClassNameWithAutocomplete
-}
+
 export interface IDropdownProps extends HTMLAttributes<HTMLDivElement> {
 	items: IItemProp[][]
 	label: string
 	CustomDropdownTrigger?: React.ReactNode
 	id: string
-	classNames?: IDropdownClassnames
+	groupClassname?: ClassNameWithAutocomplete
+	itemsClassname?: ClassNameWithAutocomplete
+	itemClassname?: ClassNameWithAutocomplete
+	activeItemClassname?: ClassNameWithAutocomplete
+	buttonClassname?: ClassNameWithAutocomplete
+	iconClassname?: ClassNameWithAutocomplete
+	iconSpacingClassname?: ClassNameWithAutocomplete
 	placement?: Placement
 	offsetOptions?: Partial<{
 		mainAxis: number
 		crossAxis: number
 		alignmentAxis: number | null
 	}>
+	disabled?: boolean
+	onFocus?: () => void
+	onBlur?: () => void
 }
-export const defaultClassNames: IDropdownClassnames = {
+export const defaultClassNames = {
 	groupClassname: "flex inline-block text-left",
 	itemsClassname:
-		"mt-2 origin-bottom-right rounded bg-white shadow-lg z-20 divide-y divide-gray-100  border border-gray-300  ",
+		"mt-2 origin-bottom-right rounded bg-white shadow-lg z-[99999] divide-y divide-gray-100  border border-gray-300  ",
 	itemClassname:
 		"group flex font-muli  cursor-pointer items-center px-4 py-2 text-sm transition-all hover:bg-gray-100 hover:text-gray-900 justify-between gap-4 ",
 	activeItemClassname: "block px-4 py-2 text-sm text-gray-700 bg-gray-100 hover:bg-gray-200 hover:text-gray-900",
 	buttonClassname:
-		"py-[2px] z-20 flex items-center  rounded outline-purple-500 transition-all   text-gray-400 hover:text-gray-600 "
+		"py-[2px] flex items-center  rounded outline-purple-500 transition-all text-gray-400 hover:text-gray-600 ",
+	iconClassname: "ml-1 h-5 w-6",
+	iconSpacingClassname: "flex items-center gap-x-4"
 }
 
 /** Comment */
@@ -64,22 +73,44 @@ const Dropdown: React.FC<IDropdownProps> = ({
 	items,
 	id,
 	label,
-	classNames = defaultClassNames,
+	groupClassname,
+	itemsClassname,
+	itemClassname,
+	activeItemClassname,
+	buttonClassname,
+	iconClassname,
+	iconSpacingClassname,
 	CustomDropdownTrigger,
 	placement = "bottom-start",
 	offsetOptions,
+	disabled,
+	onFocus,
+	onBlur,
 	...props
 }: IDropdownProps): JSX.Element | null => {
 	const [isOpen, setIsOpen] = useState(false)
 	const [activeItem, setActiveItem] = useState<React.Key | null>(null)
+	const [activeIndex, setActiveIndex] = useState<number | null>(null)
+
+	const listRef = useRef<(HTMLButtonElement | null)[]>([])
 
 	// Floating UI logic
 	const { refs, floatingStyles, context } = useFloating({
 		open: isOpen,
-		onOpenChange: setIsOpen,
+		onOpenChange: (bool: boolean) => {
+			listRef.current = []
+			setActiveIndex(null)
+			setIsOpen(bool)
+		},
 		placement,
 		middleware: [
-			offset(offsetOptions ?? 10),
+			offset(
+				offsetOptions ?? {
+					crossAxis: 0,
+					mainAxis: -4, //up/down
+					alignmentAxis: 0 //left/right
+				}
+			),
 			autoPlacement({
 				allowedPlacements: [placement, "bottom-start", "bottom-end", "bottom"]
 			}),
@@ -90,26 +121,169 @@ const Dropdown: React.FC<IDropdownProps> = ({
 	const click = useClick(context)
 	const dismiss = useDismiss(context)
 	const role = useRole(context)
-	const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, role])
+	const listNavigation = useListNavigation(context, {
+		listRef,
+		activeIndex,
+		onNavigate: (index: number | null) => {
+			if (index !== null && listRef.current[index]) {
+				setActiveIndex(index)
+				listRef.current[index]?.focus()
+			}
+		}
+	})
+
+	const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
+		click,
+		dismiss,
+		role,
+		listNavigation
+	])
+
+	useEffect(() => {
+		if (isOpen) {
+			onFocus && onFocus()
+		} else {
+			onBlur && onBlur()
+		}
+	}, [isOpen, onBlur, onFocus])
+
+	const ItemComponents = useMemo(
+		() =>
+			items.map((itemStack, stackIndex) => {
+				return itemStack.map((item, itemIndex) => {
+					const { key, label, icon, iconObj, iconPosition, isEmphasized, onClick, ...rest } = item
+					const active = activeItem && activeItem === key
+					const itemClass = cn(
+						defaultClassNames.itemClassname,
+						itemClassname,
+						"group flex cursor-pointer items-center px-4 py-2 text-sm transition-all",
+						{
+							"text-red-500": isEmphasized
+						},
+						{
+							"text-gray-900": !isEmphasized
+						},
+						{
+							"bg-gray-100 text-gray-900": active
+						},
+						active ? cn(defaultClassNames.activeItemClassname, activeItemClassname) : "",
+						{
+							"bg-gray-100 text-red-500 hover:text-red-500": active && isEmphasized
+						}
+					)
+					return (
+						<button
+							{...{
+								key: key,
+								id: key.toString(),
+								className: cn(itemClass, "w-full"),
+								...rest,
+								...getItemProps(),
+								onClick: () => {
+									onClick && onClick()
+									setTimeout(() => {
+										//hide the dropdown after click
+										setIsOpen(false)
+									}, 150)
+								}
+							}}
+							ref={(node) => {
+								//If the list ref already contains a node with the same id do nothing, otherwise add it
+								if (listRef.current.some((item) => item?.id === key)) {
+									return
+								}
+								listRef.current.push(node)
+							}}
+							key={key}
+						>
+							<div className={cn(defaultClassNames.iconSpacingClassname, iconSpacingClassname)}>
+								{iconObj && (iconPosition === "leading" || iconPosition === undefined) && (
+									<>{iconObj}</>
+								)}
+								{icon &&
+									(iconPosition === "leading" || iconPosition === undefined) &&
+									(typeof icon === "string" ? (
+										<DynamicIcon
+											{...{
+												icon: icon,
+												className: cn(
+													{
+														"text-red-500": isEmphasized
+													},
+													"opacity-60 group"
+												)
+											}}
+										/>
+									) : (
+										<DynamicIcon
+											{...{
+												...icon,
+												className: cn(
+													icon.className,
+													{
+														"text-red-500": isEmphasized
+													},
+													"opacity-60 group"
+												)
+											}}
+										/>
+									))}
+								<div className="break-all line-clamp-1">{label}</div>
+								{iconObj && iconPosition === "trailing" && <>{iconObj}</>}
+								{icon &&
+									iconPosition === "trailing" &&
+									(typeof icon === "string" ? (
+										<DynamicIcon
+											{...{
+												icon: icon,
+												className: cn(
+													{
+														"text-red-500": isEmphasized
+													},
+													"opacity-60 group"
+												)
+											}}
+										/>
+									) : (
+										<DynamicIcon
+											{...{
+												...icon,
+												className: cn(
+													icon.className,
+													{
+														"text-red-500": isEmphasized
+													},
+													"opacity-60 group"
+												)
+											}}
+										/>
+									))}
+							</div>
+						</button>
+					)
+				})
+			}),
+		[activeItem, activeItemClassname, getItemProps, iconSpacingClassname, itemClassname, items]
+	)
+
 	const { isMounted, styles: transitionStyles } = useTransitionStyles(context, {
 		duration: {
 			open: 200,
 			close: 200
 		},
 		initial: {
-			opacity: 0
+			opacity: 0,
+			scale: 95
 		},
 		open: {
-			opacity: 1
+			opacity: 1,
+			scale: 100
 		}
 	})
-
-	const { groupClassname, buttonClassname, itemsClassname, itemClassname, activeItemClassname } = classNames
-
 	return (
 		<div
 			{...{
-				className: groupClassname,
+				className: cn(defaultClassNames.groupClassname, groupClassname),
 				role: "combobox",
 				"aria-owns": `${id}-list`,
 				"aria-expanded": isOpen,
@@ -120,10 +294,12 @@ const Dropdown: React.FC<IDropdownProps> = ({
 			<button
 				{...{
 					ref: refs.setReference,
-					className: buttonClassname,
+					className: cn(defaultClassNames.buttonClassname, buttonClassname),
 					onClick: () => {
 						setIsOpen(!isOpen)
 					},
+					type: "button",
+					disabled: disabled,
 					...getReferenceProps()
 				}}
 			>
@@ -132,166 +308,42 @@ const Dropdown: React.FC<IDropdownProps> = ({
 				) : (
 					<>
 						<span className="pl-1">{label}</span>
-						<DynamicIcon icon="ChevronDownIcon" className="ml-1 h-5 w-6 " />
+						<DynamicIcon
+							icon="IconChevronDown"
+							className={cn(defaultClassNames.iconClassname, iconClassname)}
+						/>
 					</>
 				)}
 			</button>
 
 			{isMounted && items.length > 0 && isOpen && (
-				<FloatingPortal>
-					<FloatingFocusManager context={context} modal={true}>
-						<Transition
-							as={Fragment}
-							show={isOpen}
-							enter="transition ease-out duration-100"
-							enterFrom="transform opacity-0 scale-95"
-							enterTo="transform opacity-100 scale-100"
-							leave="transition ease-in duration-75"
-							leaveFrom="transform opacity-100 scale-100"
-							leaveTo="transform opacity-0 scale-95"
-						>
-							<ul
-								{...{
-									...getFloatingProps(),
-									className: itemsClassname,
-									ref: refs.setFloating,
-									// style: floatingStyles,
-									"aria-labelledby": label,
-									id: `${id}-list`,
-									role: "listbox",
-									style: {
-										position: context.strategy,
-										top: Math.round(context.y ?? 0),
-										left: Math.round(context.x ?? 0),
-										width: "max-content",
-										maxWidth: "min(calc(100vw - 10px), 25rem)",
-										...floatingStyles
-									}
-								}}
-								className={itemsClassname}
+				<FloatingList
+					{...{
+						elementsRef: listRef
+					}}
+				>
+					<FloatingPortal>
+						<FloatingFocusManager context={context} modal={true}>
+							<div
+								{...getFloatingProps()}
+								className={cn(defaultClassNames.itemsClassname, itemsClassname)}
 								ref={refs.setFloating}
 								aria-labelledby={label}
-								{...getFloatingProps()}
+								style={{
+									position: context.strategy,
+									top: Math.round(context.y ?? 0),
+									left: Math.round(context.x ?? 0),
+									width: "max-content",
+									maxWidth: "min(calc(100vw - 10px), 25rem)",
+									...floatingStyles,
+									...transitionStyles
+								}}
 							>
-								{items.map((itemStack, idx) => {
-									return (
-										<React.Fragment key={`${idx}-list-${id}`}>
-											{itemStack.map(
-												({
-													onClick,
-													label,
-													key,
-													isEmphasized,
-													icon,
-													iconPosition,
-													...rest
-												}) => {
-													const active = activeItem && activeItem === key
-													const itemClass = cn(
-														itemClassname,
-														"group flex cursor-pointer items-center px-4 py-2 text-sm transition-all",
-														{
-															"text-red-500": isEmphasized
-														},
-														{
-															"text-gray-900": !isEmphasized
-														},
-														{
-															"bg-gray-100 text-gray-900": active
-														},
-														active ? activeItemClassname : "",
-														{
-															"bg-gray-100 text-red-500 hover:text-red-500":
-																active && isEmphasized
-														},
-														itemClassname
-													)
-
-													return (
-														<li key={key}>
-															<button
-																{...{
-																	onClick: () => {
-																		setActiveItem(key)
-																		onClick && onClick()
-																	},
-																	key,
-																	className: cn(itemClass, "w-full"),
-																	...rest
-																}}
-															>
-																<div className="flex items-center gap-x-4">
-																	{icon &&
-																		(iconPosition === "leading" ||
-																			iconPosition === undefined) &&
-																		(typeof icon === "string" ? (
-																			<DynamicIcon
-																				{...{
-																					icon: icon,
-																					className: cn(
-																						{
-																							"text-red-500": isEmphasized
-																						},
-																						"opacity-60 group"
-																					)
-																				}}
-																			/>
-																		) : (
-																			<DynamicIcon
-																				{...{
-																					...icon,
-																					className: cn(
-																						icon.className,
-																						{
-																							"text-red-500": isEmphasized
-																						},
-																						"opacity-60 group"
-																					)
-																				}}
-																			/>
-																		))}
-																	<div className="whitespace-nowrap">{label}</div>
-																	{icon &&
-																		iconPosition === "trailing" &&
-																		(typeof icon === "string" ? (
-																			<DynamicIcon
-																				{...{
-																					icon: icon,
-																					className: cn(
-																						{
-																							"text-red-500": isEmphasized
-																						},
-																						"opacity-60 group"
-																					)
-																				}}
-																			/>
-																		) : (
-																			<DynamicIcon
-																				{...{
-																					...icon,
-																					className: cn(
-																						icon.className,
-																						{
-																							"text-red-500": isEmphasized
-																						},
-																						"opacity-60 group"
-																					)
-																				}}
-																			/>
-																		))}
-																</div>
-															</button>
-														</li>
-													)
-												}
-											)}
-										</React.Fragment>
-									)
-								})}
-							</ul>
-						</Transition>
-					</FloatingFocusManager>
-				</FloatingPortal>
+								{ItemComponents}
+							</div>
+						</FloatingFocusManager>
+					</FloatingPortal>
+				</FloatingList>
 			)}
 		</div>
 	)