@agility/plenum-ui 2.0.0-rc36 → 2.0.0-rc37

package/dist/tailwind.css

@@ -480,6 +480,7 @@ input::placeholder,textarea::placeholder {
 
 ::-webkit-date-and-time-value {
   min-height: 1.5em;
+  text-align: inherit;
 }
 
 ::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agility/plenum-ui",
-	"version": "2.0.0-rc36",
+	"version": "2.0.0-rc37",
 	"license": "MIT",
 	"main": "dist/index.js",
 	"module": "dist/index.js",

package/stories/atoms/buttons/Button/Button.tsx

@@ -74,7 +74,7 @@ const _Button = (
 				target: asLink.target,
 				title: asLink.title,
 				className: cn(
-					"inline-flex items-center justify-center gap-x-2  font-medium rounded-[3px] !ring-offset-white outline-none   focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2  focus-within:ring-2 focus-within:ring-purple-600 focus-within:ring-offset-2  focus:ring-2 focus:ring-purple-600 focus:ring-offset-2  active:ring-2 active:ring-purple-600 active:ring-offset-2 transition-all",
+					"inline-flex items-center justify-center gap-x-2  font-medium p-2 rounded-[3px] !ring-offset-white outline-none   focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2  focus-within:ring-2 focus-within:ring-purple-600 focus-within:ring-offset-2  focus:ring-2 focus:ring-purple-600 focus:ring-offset-2  active:ring-2 active:ring-purple-600 active:ring-offset-2 transition-all",
 					{ "w-full": fullWidth },
 					{ "px-[11px] py-[7px] text-xs": size === "xs" },
 					{ "px-[13px] py-[9px] text-sm": size === "sm" },
@@ -149,7 +149,7 @@ const _Button = (
 		<button
 			type="button"
 			className={cn(
-				"inline-flex items-center justify-center gap-x-2  font-medium rounded-[3px] !ring-offset-white outline-none   focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2  focus-within:ring-2 focus-within:ring-purple-600 focus-within:ring-offset-2  focus:ring-2 focus:ring-purple-600 focus:ring-offset-2  active:ring-2 active:ring-purple-600 active:ring-offset-2 transition-all",
+				"inline-flex items-center justify-center gap-x-2  font-medium p-2 rounded-[3px] !ring-offset-white outline-none   focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2  focus-within:ring-2 focus-within:ring-purple-600 focus-within:ring-offset-2  focus:ring-2 focus:ring-purple-600 focus:ring-offset-2  active:ring-2 active:ring-purple-600 active:ring-offset-2 transition-all",
 				{ "w-full": fullWidth },
 				{ "px-[11px] py-[7px] text-xs": size === "xs" },
 				{ "px-[13px] py-[9px] text-sm": size === "sm" },

package/stories/organisms/DropdownComponent/DropdownComponent.tsx

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes, useState } from "react"
+import React, { HTMLAttributes, useEffect, useMemo, useRef, useState } from "react"
 import { default as cn } from "classnames"
 import {
 	useFloating,
@@ -12,12 +12,15 @@ 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 {
 	//Don't think this needs to extend HtmlButton... extends HTMLAttributes<HTMLButtonElement> {
@@ -83,11 +86,19 @@ const Dropdown: React.FC<IDropdownProps> = ({
 }: 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) => {
+			console.log("onOpenChange", bool)
+			listRef.current = []
+			setActiveIndex(null)
+			setIsOpen(bool)
+		},
 		placement,
 		middleware: [
 			offset(offsetOptions ?? 10),
@@ -101,20 +112,157 @@ 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) => {
+			if (index !== null && listRef.current[index]) {
+				setActiveIndex(index)
+				listRef.current[index]?.focus()
+			}
+		}
+	})
+
+	const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
+		click,
+		dismiss,
+		role,
+		listNavigation
+	])
+
+	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
+							{...{
+								onClick: () => {
+									onClick && onClick()
+									setTimeout(() => {
+										//hide the dropdown after click
+										setIsOpen(false)
+									}, 150)
+								},
+								key: key,
+								id: key.toString(),
+								className: cn(itemClass, "w-full"),
+								...rest,
+								...getItemProps()
+							}}
+							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="whitespace-nowrap">{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
 		}
 	})
-
 	return (
 		<div
 			{...{
@@ -152,168 +300,33 @@ const Dropdown: React.FC<IDropdownProps> = ({
 			</button>
 
 			{isMounted && items.length > 0 && isOpen && (
-				<FloatingPortal>
-					<FloatingFocusManager context={context} modal={true}>
-						<div
-							{...getFloatingProps()}
-							className={cn(defaultClassNames.itemsClassname, itemsClassname)}
-							ref={refs.setFloating}
-							aria-labelledby={label}
-							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
-							}}
-						>
-							<ul id={`${id}-list`} role="listbox" style={{ ...transitionStyles }}>
-								{items.map((itemStack, idx) => {
-									return (
-										<React.Fragment key={`${idx}-list-${id}`}>
-											{itemStack.map(
-												(
-													{
-														onClick,
-														label,
-														key,
-														isEmphasized,
-														icon,
-														iconPosition,
-														iconObj,
-														...rest
-													},
-													idx
-												) => {
-													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 (
-														<li key={`${key}-${idx}`}>
-															<button
-																{...{
-																	onClick: () => {
-																		onClick && onClick()
-																		setTimeout(() => {
-																			//hide the dropdown after click
-																			setIsOpen(false)
-																		}, 150)
-																	},
-																	key: key,
-																	className: cn(itemClass, "w-full"),
-																	...rest
-																}}
-															>
-																<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="whitespace-nowrap">{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>
-														</li>
-													)
-												}
-											)}
-										</React.Fragment>
-									)
-								})}
-							</ul>
-						</div>
-					</FloatingFocusManager>
-				</FloatingPortal>
+				<FloatingList
+					{...{
+						elementsRef: listRef
+					}}
+				>
+					<FloatingPortal>
+						<FloatingFocusManager context={context} modal={true}>
+							<div
+								{...getFloatingProps()}
+								className={cn(defaultClassNames.itemsClassname, itemsClassname)}
+								ref={refs.setFloating}
+								aria-labelledby={label}
+								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
+								}}
+							>
+								{ItemComponents}
+							</div>
+						</FloatingFocusManager>
+					</FloatingPortal>
+				</FloatingList>
 			)}
 		</div>
 	)

package/stories/organisms/DropdownComponent/dropdownItems.ts

@@ -14,9 +14,8 @@ export const dropdownDataBase: IItemProp[][] = [
 			onClick: () => {
 				console.log("Copy action")
 			}
-		}
-	],
-	[
+		},
+
 		{
 			icon: {
 				icon: "IconPlus"
@@ -42,9 +41,7 @@ export const dropdownDataBase: IItemProp[][] = [
 			onClick: () => {
 				console.log("View Batch action")
 			}
-		}
-	],
-	[
+		},
 		{
 			icon: {
 				icon: "IconTrash"