@agility/plenum-ui 2.0.0-rc45 → 2.0.0-rc47

package/dist/tailwind.css

@@ -2013,6 +2013,54 @@ select {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8,0,1,1);
+  }
+
+  50% {
+    transform: none;
+    animation-timing-function: cubic-bezier(0,0,0.2,1);
+  }
+}
+
+.animate-\[bounce_1s_infinite\] {
+  animation: bounce 1s infinite;
+}
+
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8,0,1,1);
+  }
+
+  50% {
+    transform: none;
+    animation-timing-function: cubic-bezier(0,0,0.2,1);
+  }
+}
+
+.animate-\[bounce_1s_infinite_0\.2s\] {
+  animation: bounce 1s infinite 0.2s;
+}
+
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8,0,1,1);
+  }
+
+  50% {
+    transform: none;
+    animation-timing-function: cubic-bezier(0,0,0.2,1);
+  }
+}
+
+.animate-\[bounce_1s_infinite_0\.4s\] {
+  animation: bounce 1s infinite 0.4s;
+}
+
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -2893,6 +2941,10 @@ select {
   align-items: center;
 }
 
+.items-baseline {
+  align-items: baseline;
+}
+
 .items-stretch {
   align-items: stretch;
 }
@@ -3012,6 +3064,12 @@ select {
        column-gap: 6px;
 }
 
+.space-x-1 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .space-x-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.5rem * var(--tw-space-x-reverse));

package/dist/types/stories/organisms/DropdownComponent/DropdownComponent.d.ts

@@ -5,7 +5,7 @@ import { IDynamicIconProps } from "@/stories/atoms/icons";
 export interface IItemProp {
     icon?: IDynamicIconProps;
     iconPosition?: "trailing" | "leading";
-    label: string;
+    label: string | JSX.Element;
     onClick?(): void;
     isEmphasized?: boolean;
     key: React.Key;
@@ -30,6 +30,8 @@ export interface IDropdownProps extends HTMLAttributes<HTMLDivElement> {
         alignmentAxis: number | null;
     }>;
     disabled?: boolean;
+    onFocus?: () => void;
+    onBlur?: () => void;
 }
 export declare const defaultClassNames: {
     groupClassname: string;

package/package.json

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

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

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

@@ -26,7 +26,7 @@ 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
@@ -52,6 +52,8 @@ export interface IDropdownProps extends HTMLAttributes<HTMLDivElement> {
 		alignmentAxis: number | null
 	}>
 	disabled?: boolean
+	onFocus?: () => void
+	onBlur?: () => void
 }
 export const defaultClassNames = {
 	groupClassname: "flex inline-block text-left",
@@ -82,6 +84,8 @@ const Dropdown: React.FC<IDropdownProps> = ({
 	placement = "bottom-start",
 	offsetOptions,
 	disabled,
+	onFocus,
+	onBlur,
 	...props
 }: IDropdownProps): JSX.Element | null => {
 	const [isOpen, setIsOpen] = useState(false)
@@ -93,8 +97,7 @@ const Dropdown: React.FC<IDropdownProps> = ({
 	// Floating UI logic
 	const { refs, floatingStyles, context } = useFloating({
 		open: isOpen,
-		onOpenChange: (bool) => {
-
+		onOpenChange: (bool: boolean) => {
 			listRef.current = []
 			setActiveIndex(null)
 			setIsOpen(bool)
@@ -115,7 +118,7 @@ const Dropdown: React.FC<IDropdownProps> = ({
 	const listNavigation = useListNavigation(context, {
 		listRef,
 		activeIndex,
-		onNavigate: (index) => {
+		onNavigate: (index: number | null) => {
 			if (index !== null && listRef.current[index]) {
 				setActiveIndex(index)
 				listRef.current[index]?.focus()
@@ -130,6 +133,14 @@ const Dropdown: React.FC<IDropdownProps> = ({
 		listNavigation
 	])
 
+	useEffect(() => {
+		if (isOpen) {
+			onFocus && onFocus()
+		} else {
+			onBlur && onBlur()
+		}
+	}, [isOpen, onBlur, onFocus])
+
 	const ItemComponents = useMemo(
 		() =>
 			items.map((itemStack, stackIndex) => {