@agility/plenum-ui 2.1.19-rc2 → 2.1.20-rc1

package/dist/tailwind.css

@@ -1740,6 +1740,10 @@ select {
   margin-bottom: 24rem;
 }
 
+.\!mb-0 {
+  margin-bottom: 0px !important;
+}
+
 .\!ml-\[\.172rem\] {
   margin-left: .172rem !important;
 }
@@ -1879,6 +1883,10 @@ select {
   height: 2.25rem;
 }
 
+.h-\[240px\] {
+  height: 240px;
+}
+
 .h-\[6px\] {
   height: 6px;
 }
@@ -1891,6 +1899,10 @@ select {
   max-height: 15rem;
 }
 
+.\!min-h-0 {
+  min-height: 0px !important;
+}
+
 .min-h-\[38px\] {
   min-height: 38px;
 }
@@ -1967,6 +1979,10 @@ select {
   width: 1px;
 }
 
+.w-\[200px\] {
+  width: 200px;
+}
+
 .w-\[6px\] {
   width: 6px;
 }
@@ -50539,6 +50555,11 @@ select {
   padding-bottom: 7px;
 }
 
+.py-\[8px\] {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
 .py-\[9px\] {
   padding-top: 9px;
   padding-bottom: 9px;
@@ -58781,6 +58802,10 @@ select {
   border-color: rgb(109 40 217 / var(--tw-border-opacity));
 }
 
+.hover\:bg-\[rgba\(0\2c 0\2c 0\2c 0\.03\)\]:hover {
+  background-color: rgba(0,0,0,0.03);
+}
+
 .hover\:bg-gray-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -59217,6 +59242,11 @@ select {
   color: rgb(75 85 99 / var(--tw-text-opacity));
 }
 
+.group[data-open] .group-data-\[open\]\:rotate-180 {
+  --tw-rotate: 180deg;
+  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));
+}
+
 @media (min-width: 640px) {
   .sm\:text-sm {
     font-size: 0.875rem;

package/dist/types/stories/atoms/icons/IconWithShadow.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IDynamicIconProps } from "./DynamicIcon";
 export interface IIconWithShadowProps extends IDynamicIconProps {
 }

package/dist/types/stories/index.d.ts

@@ -1,5 +1,5 @@
 import { IAvatarProps, IBadgeProps, IButtonProps, ICapsuleProps, IDynamicIconProps, IIconWithShadowProps, ILoaderProps, IRadialProgressProps, UnifiedIconName, IconName, FAIconName, BTNActionType, Avatar, Badge, Button, Capsule, DynamicIcon, IconWithShadow, Loader, RadialProgress, isFAIcon, isHeroIcon, isTablerIcon, isUnifiedIconName } from "./atoms";
 import { ICheckboxProps, IComboboxProps, IInputFieldProps, IInputLabelProps, INestedInputButtonProps, IRadioProps, ISelectProps, ITextareaProps, IToggleSwitchProps, AcceptedInputTypes, Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, Textarea, ToggleSwitch, TextInput, ITextInputProps, ISimpleSelectOptions } from "./molecules";
-import { IAnimatedLabelInputProps, AnimatedLabelTextArea, IAnimatedLabelTextAreaProps, IButtonDropdownProps, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, AnimatedLabelInput, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, TextInputSelect, ITextInputSelectProps, IAnimatedFormInputWithAddons, AnimatedFormInputWithAddons } from "./organisms";
-export type { IAvatarProps, IBadgeProps, IButtonProps, ICapsuleProps, ITextInputSelectProps, IDynamicIconProps, IIconWithShadowProps, ILoaderProps, IRadialProgressProps, ICheckboxProps, IComboboxProps, IInputFieldProps, IInputLabelProps, INestedInputButtonProps, IRadioProps, ISelectProps, ITextareaProps, IToggleSwitchProps, AcceptedInputTypes, IAnimatedLabelInputProps, IAnimatedLabelTextAreaProps, IButtonDropdownProps, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, UnifiedIconName, IconName, FAIconName, BTNActionType, ITextInputProps, ISimpleSelectOptions, IAnimatedFormInputWithAddons };
-export { Avatar, Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, Textarea, ToggleSwitch, AnimatedLabelInput, AnimatedLabelTextArea, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, Badge, Button, Capsule, DynamicIcon, IconWithShadow, Loader, RadialProgress, isFAIcon, isHeroIcon, isTablerIcon, isUnifiedIconName, TextInput, TextInputSelect, AnimatedFormInputWithAddons };
+import { IAnimatedLabelInputProps, AnimatedLabelTextArea, IAnimatedLabelTextAreaProps, IButtonDropdownProps, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, AnimatedLabelInput, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, TextInputSelect, ITextInputSelectProps, IAnimatedFormInputWithAddons, AnimatedFormInputWithAddons, DropdownWithMultiSelect, MultiSelectItemProps } from "./organisms";
+export type { IAvatarProps, IBadgeProps, IButtonProps, ICapsuleProps, ITextInputSelectProps, IDynamicIconProps, IIconWithShadowProps, ILoaderProps, IRadialProgressProps, ICheckboxProps, IComboboxProps, IInputFieldProps, IInputLabelProps, INestedInputButtonProps, IRadioProps, ISelectProps, ITextareaProps, IToggleSwitchProps, AcceptedInputTypes, IAnimatedLabelInputProps, IAnimatedLabelTextAreaProps, IButtonDropdownProps, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, UnifiedIconName, IconName, FAIconName, BTNActionType, ITextInputProps, ISimpleSelectOptions, IAnimatedFormInputWithAddons, MultiSelectItemProps };
+export { Avatar, Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, Textarea, ToggleSwitch, AnimatedLabelInput, AnimatedLabelTextArea, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, Badge, Button, Capsule, DynamicIcon, IconWithShadow, Loader, RadialProgress, isFAIcon, isHeroIcon, isTablerIcon, isUnifiedIconName, TextInput, TextInputSelect, AnimatedFormInputWithAddons, DropdownWithMultiSelect };

package/dist/types/stories/molecules/inputs/select/Select.d.ts

@@ -4,13 +4,21 @@ export interface ISimpleSelectOptions {
     value: string;
 }
 export interface ISelectProps {
+    /** Label */
     label?: string;
+    /** Select ID prop */
     id?: string;
+    /** Select name prop */
     name?: string;
+    /** List of options to display in the select menu */
     options: ISimpleSelectOptions[];
+    /** Select name prop */
     onChange?(value: string): void;
+    /** Select disabled state */
     isDisabled?: boolean;
+    /** Select error state */
     isError?: boolean;
+    /** Select required state */
     isRequired?: boolean;
     value?: string;
     className?: string;

package/dist/types/stories/organisms/DropdownWithMultiSelect/DropdownItems.d.ts

@@ -0,0 +1,2 @@
+import { MultiSelectItemProps } from "./DropdownWithMultiSelect";
+export declare const dropdownDataBase: MultiSelectItemProps[];

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

@@ -0,0 +1,13 @@
+export interface MultiSelectItemProps {
+    label: string;
+    onClick?(): void;
+    key: React.Key;
+    isSelected: boolean;
+}
+interface Props {
+    label: string;
+    options: MultiSelectItemProps[];
+    type: "checkbox" | "radio";
+}
+declare const DropdownWithMultiSelect: ({ label, options, type }: Props) => import("react/jsx-runtime").JSX.Element;
+export default DropdownWithMultiSelect;

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

@@ -6,5 +6,6 @@ import EmptySectionPlaceholder, { IEmptySectionPlaceholderProps } from "./EmptyS
 import FormInputWithAddons, { IFormInputWithAddonsProps } from "./FormInputWithAddons";
 import TextInputSelect, { ITextInputSelectProps } from "./TextInputSelect";
 import AnimatedFormInputWithAddons, { IAnimatedFormInputWithAddons } from "./AnimatedFormInputWithAddons";
-export type { IAnimatedLabelInputProps, IAnimatedLabelTextAreaProps, IButtonDropdownProps, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, ITextInputSelectProps, IAnimatedFormInputWithAddons };
-export { AnimatedLabelInput, AnimatedLabelTextArea, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, TextInputSelect, AnimatedFormInputWithAddons };
+import DropdownWithMultiSelect, { MultiSelectItemProps } from "./DropdownWithMultiSelect/DropdownWithMultiSelect";
+export type { IAnimatedLabelInputProps, IAnimatedLabelTextAreaProps, IButtonDropdownProps, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, ITextInputSelectProps, IAnimatedFormInputWithAddons, MultiSelectItemProps };
+export { AnimatedLabelInput, AnimatedLabelTextArea, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, TextInputSelect, AnimatedFormInputWithAddons, DropdownWithMultiSelect };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agility/plenum-ui",
-	"version": "2.1.19-rc2",
+	"version": "2.1.20-rc1",
 	"license": "MIT",
 	"main": "dist/index.js",
 	"module": "dist/index.js",
@@ -29,8 +29,8 @@
 	},
 	"dependencies": {
 		"@floating-ui/react": "^0.25.0",
-		"@headlessui/react": "^1.7.10",
-		"@headlessui/tailwindcss": "^0.1.2",
+		"@headlessui/react": "2.1",
+		"@headlessui/tailwindcss": "0.2.1",
 		"@heroicons/react": "^1.0.5",
 		"@next/font": "^13.4.12",
 		"@tabler/icons": "^2.26.0",
@@ -62,7 +62,7 @@
 		"@testing-library/jest-dom": "^6.6.2",
 		"@testing-library/react": "^16.0.1",
 		"@types/jest": "^29.5.14",
-		"@types/node": "18.11.18",
+		"@types/node": "^22.10.2",
 		"autoprefixer": "^10.4.13",
 		"esbuild": "^0.18.19",
 		"eslint": "8.32.0",

package/stories/index.ts

@@ -1,4 +1,4 @@
-//Atomic Components, props, and type gaurds.
+//Atomic Components, props, and type guards.
 import {
 	IAvatarProps,
 	IBadgeProps,
@@ -24,8 +24,8 @@ import {
 	isHeroIcon,
 	isTablerIcon,
 	isUnifiedIconName
-} from "./atoms"
-// Molecular Components, props, and type gaurds.
+} from "./atoms";
+// Molecular Components, props, and type guards.
 import {
 	ICheckboxProps,
 	IComboboxProps,
@@ -49,8 +49,8 @@ import {
 	TextInput,
 	ITextInputProps,
 	ISimpleSelectOptions
-} from "./molecules"
-// Organism Components, props, and type gaurds.
+} from "./molecules";
+// Organism Components, props, and type guards.
 import {
 	IAnimatedLabelInputProps,
 	AnimatedLabelTextArea,
@@ -68,8 +68,10 @@ import {
 	TextInputSelect,
 	ITextInputSelectProps,
 	IAnimatedFormInputWithAddons,
-	AnimatedFormInputWithAddons
-} from "./organisms"
+	AnimatedFormInputWithAddons,
+	DropdownWithMultiSelect,
+	MultiSelectItemProps
+} from "./organisms";
 
 export type {
 	IAvatarProps,
@@ -104,8 +106,9 @@ export type {
 	BTNActionType,
 	ITextInputProps,
 	ISimpleSelectOptions,
-	IAnimatedFormInputWithAddons
-}
+	IAnimatedFormInputWithAddons,
+	MultiSelectItemProps
+};
 export {
 	Avatar,
 	Checkbox,
@@ -136,5 +139,6 @@ export {
 	isUnifiedIconName,
 	TextInput,
 	TextInputSelect,
-	AnimatedFormInputWithAddons
-}
+	AnimatedFormInputWithAddons,
+	DropdownWithMultiSelect
+};

package/stories/molecules/inputs/select/Select.tsx

@@ -8,20 +8,27 @@ export interface ISimpleSelectOptions {
 	value: string;
 }
 export interface ISelectProps {
+	/** Label */
 	label?: string;
+	/** Select ID prop */
 	id?: string;
+	/** Select name prop */
 	name?: string;
+	/** List of options to display in the select menu */
 	options: ISimpleSelectOptions[];
+	/** Select name prop */
 	onChange?(value: string): void;
+	/** Select disabled state */
 	isDisabled?: boolean;
+	/** Select error state */
 	isError?: boolean;
+	/** Select required state */
 	isRequired?: boolean;
 	value?: string;
 	className?: string;
 	onFocus?: () => void;
 	onBlur?: () => void;
 }
-
 const Select: React.FC<ISelectProps> = ({
 	label,
 	id,
@@ -36,31 +43,22 @@ const Select: React.FC<ISelectProps> = ({
 	onFocus,
 	onBlur
 }) => {
-	const getValidVal = (val: string | undefined) => {
-		const validValue = val && val !== "" ? val : options[0]?.value ?? "select an option";
-		console.log("valid Val", validValue);
-		return validValue;
-	};
-	const [selectedOption, setSelectedOption] = useState<string>(getValidVal(value));
+	const [selectedOption, setSelectedOption] = useState<string>(value || options[0].value);
 	const uniqueID = useId();
 	if (!id) id = `select-${uniqueID}`;
 	if (!name) name = id;
 
 	useEffect(() => {
-		// Explicitly handle falsy values
-		if (value !== undefined) {
+		if (value !== undefined && value !== null) {
 			setSelectedOption(value);
 		}
 	}, [value]);
 
 	const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
 		const targetValue = e.target.value;
-		if (typeof onChange === "function") {
-			onChange(targetValue);
-		}
+		typeof onChange == "function" && onChange(targetValue);
 		setSelectedOption(targetValue);
 	};
-
 	const wrapperStyle = cn("group", { "opacity-50": isDisabled });
 	return (
 		<div className={wrapperStyle}>
@@ -91,11 +89,13 @@ const Select: React.FC<ISelectProps> = ({
 				onFocus={onFocus}
 				onBlur={onBlur}
 			>
-				{options.map(({ value, label }) => (
-					<option key={value} value={value}>
-						{label}
-					</option>
-				))}
+				{options.map(({ value, label }) => {
+					return (
+						<option key={value} value={value}>
+							{label}
+						</option>
+					);
+				})}
 			</select>
 		</div>
 	);

package/stories/organisms/DropdownWithMultiSelect/DropdownItems.ts

@@ -0,0 +1,219 @@
+import { MultiSelectItemProps } from "./DropdownWithMultiSelect";
+
+export const dropdownDataBase: MultiSelectItemProps[] = [
+	{
+		key: "Copy",
+		label: "Copy to Clipboard",
+		onClick: () => {
+			console.log("Copy action");
+		},
+		isSelected: false
+	},
+	{
+		label: "Delete",
+		onClick: () => {
+			console.log("Delete action");
+		},
+		key: "Delete",
+		isSelected: true
+	},
+	{
+		key: "Add to Batch",
+		label: "Add to Batch",
+		onClick: () => {
+			console.log("Add to Batch action");
+		},
+		isSelected: false
+	},
+	{
+		key: "View Batch",
+		label: "View Batch",
+		onClick: () => {
+			console.log("View Batch action");
+		},
+		isSelected: false
+	},
+	{
+		key: "Copy",
+		label: "Copy to Clipboard",
+		onClick: () => {
+			console.log("Copy action");
+		},
+		isSelected: false
+	},
+	{
+		label: "Delete",
+		onClick: () => {
+			console.log("Delete action");
+		},
+		key: "Delete",
+		isSelected: true
+	},
+	{
+		key: "Add to Batch",
+		label: "Add to Batch",
+		onClick: () => {
+			console.log("Add to Batch action");
+		},
+		isSelected: false
+	},
+	{
+		key: "View Batch",
+		label: "View Batch",
+		onClick: () => {
+			console.log("View Batch action");
+		},
+		isSelected: false
+	},
+	{
+		key: "Copy",
+		label: "Copy to Clipboard",
+		onClick: () => {
+			console.log("Copy action");
+		},
+		isSelected: false
+	},
+	{
+		label: "Delete",
+		onClick: () => {
+			console.log("Delete action");
+		},
+		key: "Delete",
+		isSelected: true
+	},
+	{
+		key: "Add to Batch",
+		label: "Add to Batch",
+		onClick: () => {
+			console.log("Add to Batch action");
+		},
+		isSelected: false
+	},
+	{
+		key: "View Batch",
+		label: "View Batch",
+		onClick: () => {
+			console.log("View Batch action");
+		},
+		isSelected: false
+	},
+	{
+		key: "Copy",
+		label: "Copy to Clipboard",
+		onClick: () => {
+			console.log("Copy action");
+		},
+		isSelected: false
+	},
+	{
+		label: "Delete",
+		onClick: () => {
+			console.log("Delete action");
+		},
+		key: "Delete",
+		isSelected: true
+	},
+	{
+		key: "Add to Batch",
+		label: "Add to Batch",
+		onClick: () => {
+			console.log("Add to Batch action");
+		},
+		isSelected: false
+	},
+	{
+		key: "View Batch",
+		label: "View Batch",
+		onClick: () => {
+			console.log("View Batch action");
+		},
+		isSelected: false
+	}
+];
+
+// export const multipleGroups: MultiSelectItemProps[][] = [
+// 	[
+// 		{
+// 			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: MultiSelectItemProps[][] = [
+// 	[
+// 		{
+// 			icon: {
+// 				icon: "IconCopy",
+// 				className: "h-5 w-5",
+// 				outline: false
+// 			},
+// 			iconPosition: "leading",
+// 			key: "Copy",
+// 			label: "Copy Item",
+// 			onClick: () => {
+// 				console.log("Copy action")
+// 			}
+// 		}
+// 	],
+// 	[
+// 		{
+// 			icon: {
+// 				icon: "IconFolderPlus",
+// 				className: "h-5 w-5",
+// 				outline: false
+// 			},
+// 			iconPosition: "leading",
+// 			key: "Add to Batch",
+// 			label: "Add to Batch",
+// 			onClick: () => {
+// 				console.log("Add to Batch action")
+// 			}
+// 		},
+// 		{
+// 			icon: {
+// 				icon: "IconEye",
+// 				className: "h-5 w-5",
+// 				outline: false
+// 			},
+// 			iconPosition: "leading",
+// 			key: "View Batch",
+// 			label: "View Batch",
+// 			onClick: () => {
+// 				console.log("View Batch action")
+// 			}
+// 		}
+// 	],
+// 	[
+// 		{
+// 			icon: {
+// 				icon: "IconTrash",
+// 				className: "h-5 w-5",
+// 				outline: false
+// 			},
+// 			iconPosition: "leading",
+// 			key: "Delete",
+// 			label: "Delete",
+// 			onClick: () => {
+// 				console.log("Delete action")
+// 			},
+// 			isEmphasized: true
+// 		}
+// 	]
+// ]

package/stories/organisms/DropdownWithMultiSelect/DropdownWithMultiSelect.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { DynamicIcon } from "@/stories/atoms/icons";
+import DropdownWithMultiSelect from "../DropdownWithMultiSelect/DropdownWithMultiSelect";
+import { dropdownDataBase } from "./DropdownItems";
+
+const meta: Meta<typeof DropdownWithMultiSelect> = {
+	title: "Design System/Organisms/Dropdown",
+	component: DropdownWithMultiSelect,
+	tags: ["autodocs"],
+	argTypes: {}
+};
+type Story = StoryObj<typeof DropdownWithMultiSelect>;
+
+const IconElement = () => (
+	<DynamicIcon className="h-5 w-5 text-gray-400 hover:text-gray-600" icon={"IconDotsVertical"} />
+);
+const defaultArgs: Story["args"] = {
+	label: "Filters",
+	options: dropdownDataBase,
+	type: "checkbox"
+};
+
+export const WithMultiSelect: Story = {
+	args: {
+		...defaultArgs
+	}
+};
+
+export default meta;

package/stories/organisms/DropdownWithMultiSelect/DropdownWithMultiSelect.tsx

@@ -0,0 +1,67 @@
+import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
+import Checkbox from "@/stories/molecules/inputs/checkbox/Checkbox";
+import Radio from "@/stories/molecules/inputs/radio/Radio";
+import { DynamicIcon } from "@/stories/atoms/icons";
+import { default as cn } from "classnames";
+
+export interface MultiSelectItemProps {
+	label: string;
+	onClick?(): void;
+	key: React.Key;
+	isSelected: boolean;
+}
+
+interface Props {
+	label: string;
+	options: MultiSelectItemProps[];
+	type: "checkbox" | "radio";
+}
+
+const DropdownWithMultiSelect = ({ label, options, type = "checkbox" }: Props) => {
+	return (
+		<Popover className="group">
+			<PopoverButton className="flex justify-between gap-4 text-sm py-2 px-4 rounded-[3px] border border-gray-300 bg-white">
+				{label}
+				<DynamicIcon
+					icon="IconChevronDown"
+					className="ml-1 h-5 w-5 text-gray-400 stroke-1 group-data-[open]:rotate-180"
+				/>
+			</PopoverButton>
+			<PopoverPanel
+				transition
+				anchor="bottom end"
+				className="bg-white h-[240px] w-[200px] rounded-[3px] border border-gray-300 shadow-lg"
+			>
+				{options.map((option) => {
+					const inputWrapperStyles = cn("py-[8px] px-3 text-gray-500 hover:bg-[rgba(0,0,0,0.03)]", {
+						"text-gray-700": option.isSelected
+					});
+					return (
+						<div className={inputWrapperStyles}>
+							{type === "checkbox" ? (
+								<Checkbox
+									key={option.key}
+									label={option.label}
+									isChecked={option.isSelected}
+									onChange={option.onClick}
+									className="!min-h-0"
+									labelClassName="!mb-0"
+								/>
+							) : (
+								<Radio
+									key={option.key}
+									label={option.label}
+									isChecked={option.isSelected}
+									onChange={option.onClick}
+									onClick={option.onClick}
+								/>
+							)}
+						</div>
+					);
+				})}
+			</PopoverPanel>
+		</Popover>
+	);
+};
+
+export default DropdownWithMultiSelect;

package/stories/organisms/index.ts

@@ -1,11 +1,12 @@
-import AnimatedLabelInput, { IAnimatedLabelInputProps } from "./AnimatedLabelInput"
-import AnimatedLabelTextArea, { IAnimatedLabelTextAreaProps } from "./AnimatedLabelTextArea"
-import ButtonDropdown, { IButtonDropdownProps } from "./ButtonDropdown"
-import Dropdown, { IDropdownProps, IItemProp } from "./DropdownComponent"
-import EmptySectionPlaceholder, { IEmptySectionPlaceholderProps } from "./EmptySectionPlaceholder"
-import FormInputWithAddons, { IFormInputWithAddonsProps } from "./FormInputWithAddons"
-import TextInputSelect, { ITextInputSelectProps } from "./TextInputSelect"
-import AnimatedFormInputWithAddons, { IAnimatedFormInputWithAddons } from "./AnimatedFormInputWithAddons"
+import AnimatedLabelInput, { IAnimatedLabelInputProps } from "./AnimatedLabelInput";
+import AnimatedLabelTextArea, { IAnimatedLabelTextAreaProps } from "./AnimatedLabelTextArea";
+import ButtonDropdown, { IButtonDropdownProps } from "./ButtonDropdown";
+import Dropdown, { IDropdownProps, IItemProp } from "./DropdownComponent";
+import EmptySectionPlaceholder, { IEmptySectionPlaceholderProps } from "./EmptySectionPlaceholder";
+import FormInputWithAddons, { IFormInputWithAddonsProps } from "./FormInputWithAddons";
+import TextInputSelect, { ITextInputSelectProps } from "./TextInputSelect";
+import AnimatedFormInputWithAddons, { IAnimatedFormInputWithAddons } from "./AnimatedFormInputWithAddons";
+import DropdownWithMultiSelect, { MultiSelectItemProps } from "./DropdownWithMultiSelect/DropdownWithMultiSelect";
 export type {
 	IAnimatedLabelInputProps,
 	IAnimatedLabelTextAreaProps,
@@ -15,8 +16,9 @@ export type {
 	IItemProp,
 	IFormInputWithAddonsProps,
 	ITextInputSelectProps,
-	IAnimatedFormInputWithAddons
-}
+	IAnimatedFormInputWithAddons,
+	MultiSelectItemProps
+};
 export {
 	AnimatedLabelInput,
 	AnimatedLabelTextArea,
@@ -25,5 +27,6 @@ export {
 	EmptySectionPlaceholder,
 	FormInputWithAddons,
 	TextInputSelect,
-	AnimatedFormInputWithAddons
-}
+	AnimatedFormInputWithAddons,
+	DropdownWithMultiSelect
+};