@agility/plenum-ui 2.0.1 → 2.0.2

package/dist/tailwind.css

@@ -3093,17 +3093,6 @@ select {
   margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
-.divide-y > :not([hidden]) ~ :not([hidden]) {
-  --tw-divide-y-reverse: 0;
-  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
-  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
-}
-
-.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(243 244 246 / var(--tw-divide-opacity));
-}
-
 .overflow-auto {
   overflow: auto;
 }
@@ -3182,6 +3171,22 @@ select {
   border-bottom-right-radius: 0.25rem;
 }
 
+.rounded-bl {
+  border-bottom-left-radius: 0.25rem;
+}
+
+.rounded-br {
+  border-bottom-right-radius: 0.25rem;
+}
+
+.rounded-tl {
+  border-top-left-radius: 0.25rem;
+}
+
+.rounded-tr {
+  border-top-right-radius: 0.25rem;
+}
+
 .border {
   border-width: 1px;
 }
@@ -3202,6 +3207,10 @@ select {
   border-right-width: 0px !important;
 }
 
+.border-b {
+  border-bottom-width: 1px;
+}
+
 .border-dashed {
   border-style: dashed;
 }

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

@@ -1,3 +1,4 @@
 import { IItemProp } from "./DropdownComponent";
 export declare const dropdownDataBase: IItemProp[][];
+export declare const multipleGroups: IItemProp[][];
 export declare const dropdownDataWithIcons: IItemProp[][];

package/package.json

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

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

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react"
 
 import { DynamicIcon } from "@/stories/atoms/icons"
-import { dropdownDataBase, dropdownDataWithIcons } from "./dropdownItems"
+import { dropdownDataBase, dropdownDataWithIcons, multipleGroups } from "./dropdownItems"
 import Dropdown, { defaultClassNames } from "./DropdownComponent"
 
 const meta: Meta<typeof Dropdown> = {
@@ -18,7 +18,6 @@ const IconElement = () => (
 const defaultArgs: Story["args"] = {
 	items: [...dropdownDataBase],
 	label: "Dropdown",
-
 	placement: "bottom-end"
 }
 export const WithLabel: Story = {
@@ -26,6 +25,12 @@ export const WithLabel: Story = {
 		...defaultArgs
 	}
 }
+export const MultipleGroups: Story = {
+	args: {
+		...defaultArgs,
+		items: multipleGroups
+	}
+}
 
 export const CustomTrigger: Story = {
 	args: {

package/stories/organisms/DropdownComponent/DropdownComponent.tsx

@@ -57,8 +57,7 @@ export interface IDropdownProps extends HTMLAttributes<HTMLDivElement> {
 }
 export const defaultClassNames = {
 	groupClassname: "flex inline-block text-left",
-	itemsClassname:
-		"mt-2 origin-bottom-right rounded bg-white shadow-lg z-[99999] divide-y divide-gray-100  border border-gray-300  ",
+	itemsClassname: "mt-2 origin-bottom-right rounded bg-white shadow-lg z-[99999] 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",
@@ -176,7 +175,19 @@ const Dropdown: React.FC<IDropdownProps> = ({
 							{...{
 								key: key,
 								id: key.toString(),
-								className: cn(itemClass, "w-full"),
+								className: cn(
+									itemClass,
+									//Round the corners of the first item in the first stack and the last item in the last stack
+									itemIndex === 0 && stackIndex === 0 && "rounded-tl rounded-tr",
+									itemIndex === itemStack.length - 1 &&
+										stackIndex === items.length - 1 &&
+										"rounded-bl rounded-br",
+									//Add dividing line between stacks
+									stackIndex !== items.length - 1 &&
+										itemIndex === itemStack.length - 1 &&
+										"border-b border-b-gray-100",
+									"w-full"
+								),
 								...rest,
 								...getItemProps(),
 								onClick: () => {

package/stories/organisms/DropdownComponent/dropdownItems.ts

@@ -3,26 +3,26 @@ import { IItemProp } from "./DropdownComponent"
 export const dropdownDataBase: IItemProp[][] = [
 	[
 		{
-			icon: {
-				icon: "IconCopy"
-				// pos: "leading",
-				// className: "h-5 w-5",
-				// outline: false
-			},
+			icon: { icon: "IconCopy" },
 			key: "Copy",
 			label: "Copy to Clipboard",
 			onClick: () => {
 				console.log("Copy action")
 			}
 		},
-
 		{
-			icon: {
-				icon: "IconPlus"
-				// pos: "leading",
-				// className: "h-5 w-5",
-				// outline: false
+			icon: { icon: "IconTrash" },
+			label: "Delete",
+			onClick: () => {
+				console.log("Delete action")
 			},
+			isEmphasized: true,
+			key: "Delete"
+		}
+	],
+	[
+		{
+			icon: { icon: "IconPlus" },
 			key: "Add to Batch",
 			label: "Add to Batch",
 			onClick: () => {
@@ -30,35 +30,41 @@ export const dropdownDataBase: IItemProp[][] = [
 			}
 		},
 		{
-			icon: {
-				icon: "IconEye"
-				// pos: "leading",
-				// className: "h-5 w-5",
-				// outline: false
-			},
+			icon: { icon: "IconEye" },
 			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")
-			},
-			isEmphasized: true,
-			key: "Delete"
 		}
 	]
 ]
 
+export const multipleGroups: IItemProp[][] = [
+	[
+		{
+			icon: { icon: "IconArrowUp" },
+			key: "moveUp",
+			label: "Move up",
+			onClick: () => {
+				window.alert("moved up")
+			}
+		},
+		{ icon: { icon: "IconArrowDown" }, key: "moveDown", label: "Moved down", onClick: () => {} }
+	],
+	[
+		{ icon: { icon: "IconCheck" }, key: "publish", label: "Publish", onClick: () => {} },
+		{ icon: { icon: "IconEyeOff" }, key: "unpublish", label: "Unpublish", onClick: () => {} }
+	],
+	[
+		{ icon: { icon: "IconEyeCheck" }, key: "reqApproval", label: "Request Approval", onClick: () => {} },
+		{ icon: { icon: "IconThumbUp" }, key: "approve", label: "Approve", onClick: () => {} },
+		{ icon: { icon: "IconBan" }, key: "decline", label: "Decline", onClick: () => {} }
+	],
+	[{ icon: { icon: "IconCopy" }, key: "Copy", label: "Copy", onClick: () => {} }],
+	[{ icon: { icon: "IconTrash" }, key: "delete", label: "Delete", onClick: () => {} }]
+]
+
 export const dropdownDataWithIcons: IItemProp[][] = [
 	[
 		{