@agility/plenum-ui 2.0.0-rc8 → 2.0.0

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>
 	)

package/stories/organisms/DropdownComponent/dropdownItems.ts

@@ -3,15 +3,26 @@ import { IItemProp } from "./DropdownComponent"
 export const dropdownDataBase: IItemProp[][] = [
 	[
 		{
+			icon: {
+				icon: "IconCopy"
+				// pos: "leading",
+				// className: "h-5 w-5",
+				// outline: false
+			},
 			key: "Copy",
-			label: "Copy",
+			label: "Copy to Clipboard",
 			onClick: () => {
 				console.log("Copy action")
 			}
-		}
-	],
-	[
+		},
+
 		{
+			icon: {
+				icon: "IconPlus"
+				// pos: "leading",
+				// className: "h-5 w-5",
+				// outline: false
+			},
 			key: "Add to Batch",
 			label: "Add to Batch",
 			onClick: () => {
@@ -19,15 +30,25 @@ export const dropdownDataBase: IItemProp[][] = [
 			}
 		},
 		{
+			icon: {
+				icon: "IconEye"
+				// pos: "leading",
+				// className: "h-5 w-5",
+				// outline: false
+			},
 			key: "View Batch",
 			label: "View Batch",
 			onClick: () => {
 				console.log("View Batch action")
 			}
-		}
-	],
-	[
+		},
 		{
+			icon: {
+				icon: "IconTrash"
+				// pos: "leading",
+				// className: "h-5 w-5",
+				// outline: false
+			},
 			label: "Delete",
 			onClick: () => {
 				console.log("Delete action")
@@ -42,13 +63,13 @@ export const dropdownDataWithIcons: IItemProp[][] = [
 	[
 		{
 			icon: {
-				icon: "IconClipboardCopy",
+				icon: "IconCopy",
 				className: "h-5 w-5",
 				outline: false
 			},
 			iconPosition: "leading",
 			key: "Copy",
-			label: "Copy",
+			label: "Copy Item",
 			onClick: () => {
 				console.log("Copy action")
 			}

package/stories/organisms/DropdownComponent/index.ts

@@ -1,4 +1,4 @@
-import Dropdown, { IItemProp, IDropdownClassnames, IDropdownProps, defaultClassNames } from "./DropdownComponent"
-export type { IItemProp, IDropdownClassnames, IDropdownProps }
+import Dropdown, { IItemProp, IDropdownProps, defaultClassNames } from "./DropdownComponent"
+export type { IItemProp, IDropdownProps }
 export { defaultClassNames }
 export default Dropdown

package/stories/organisms/EmptySectionPlaceholder/EmptySectionPlaceholder.stories.tsx

@@ -39,7 +39,7 @@ export const CallsToAction: Story = {
 			{
 				actionType: "alternative",
 				icon: {
-					icon: "UploadIcon",
+					icon: "IconUpload",
 					outline: true
 				},
 				iconPosition: "leading",
@@ -49,7 +49,7 @@ export const CallsToAction: Story = {
 			{
 				actionType: "alternative",
 				icon: {
-					icon: "ViewGridIcon",
+					icon: "IconGridDots",
 					outline: true
 				},
 				size: "lg",
@@ -64,7 +64,7 @@ export const CallsToAction: Story = {
 export const NoActions: Story = {
 	args: {
 		icon: {
-			icon: "PencilAltIcon",
+			icon: "IconPencil",
 			className: "h-5 w-5 text-gray-400 ",
 			outline: true
 		},

package/stories/organisms/EmptySectionPlaceholder/index.tsx

@@ -1,3 +1,4 @@
 import EmptySectionPlaceholder, { IEmptySectionPlaceholderProps } from "./EmptySectionPlaceholder"
-export default EmptySectionPlaceholder
+
 export type { IEmptySectionPlaceholderProps }
+export default EmptySectionPlaceholder

package/stories/organisms/FormInputWithAddons/FormInputWithAddons.stories.tsx

@@ -24,6 +24,6 @@ export const DefaultFormInputWithAddons: Story = {
 		leadLabel: "Search",
 		addonOffset: 60,
 		labelClass: "text-gray-900",
-		trailIcon: { icon: "SearchIcon" }
+		trailIcon: { icon: "IconSearch" }
 	}
 }