@agility/plenum-ui 2.1.20-rc4 → 2.1.20-rc6

package/dist/tailwind.css

@@ -107,7 +107,7 @@
 }
 
 /*
-! tailwindcss v3.4.15 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.16 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -600,6 +600,11 @@ input::placeholder,textarea::placeholder {
 
 ::-webkit-date-and-time-value {
   min-height: 1.5em;
+  text-align: inherit;
+}
+
+::-webkit-datetime-edit {
+  display: inline-flex;
 }
 
 ::-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 {
@@ -682,10 +687,26 @@ select {
   background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
 }
 
+@media (forced-colors: active)  {
+  [type='checkbox']:checked {
+    -webkit-appearance: auto;
+       -moz-appearance: auto;
+            appearance: auto;
+  }
+}
+
 [type='radio']:checked {
   background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
 }
 
+@media (forced-colors: active)  {
+  [type='radio']:checked {
+    -webkit-appearance: auto;
+       -moz-appearance: auto;
+            appearance: auto;
+  }
+}
+
 [type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {
   border-color: transparent;
   background-color: currentColor;
@@ -700,6 +721,14 @@ select {
   background-repeat: no-repeat;
 }
 
+@media (forced-colors: active)  {
+  [type='checkbox']:indeterminate {
+    -webkit-appearance: auto;
+       -moz-appearance: auto;
+            appearance: auto;
+  }
+}
+
 [type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
   border-color: transparent;
   background-color: currentColor;
@@ -1911,12 +1940,12 @@ select {
   height: 100%;
 }
 
-.max-h-60 {
-  max-height: 15rem;
+.\!max-h-\[240px\] {
+  max-height: 240px !important;
 }
 
-.max-h-\[240px\] {
-  max-height: 240px;
+.max-h-60 {
+  max-height: 15rem;
 }
 
 .\!min-h-0 {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agility/plenum-ui",
-	"version": "2.1.20-rc4",
+	"version": "2.1.20-rc6",
 	"license": "MIT",
 	"main": "dist/index.js",
 	"module": "dist/index.js",
@@ -63,6 +63,7 @@
 		"@testing-library/react": "^16.0.1",
 		"@types/jest": "^29.5.14",
 		"@types/node": "^22.10.2",
+		"@types/react": "^18.2.0",
 		"autoprefixer": "^10.4.13",
 		"esbuild": "^0.18.19",
 		"eslint": "8.32.0",

package/stories/atoms/icons/DynamicIcon.tsx

@@ -1,40 +1,40 @@
-import React from "react"
+import React from "react";
 // TODO: Fix heroicons support
-import * as SolidIcons from "@heroicons/react/solid"
-import * as OutlineIcons from "@heroicons/react/outline"
-import * as FA from "react-icons/fa"
-import { tablerIconNames, TablerIconName } from "./tablerIconNames"
-import { default as cn } from "classnames"
+import * as SolidIcons from "@heroicons/react/solid";
+import * as OutlineIcons from "@heroicons/react/outline";
+import * as FA from "react-icons/fa";
+import { tablerIconNames, TablerIconName } from "./tablerIconNames";
+import { default as cn } from "classnames";
 
-import { ClassNameWithAutocomplete } from "@/utils/types"
-import TablerIcon from "./TablerIcon"
+import { ClassNameWithAutocomplete } from "@/utils/types";
+import TablerIcon from "./TablerIcon";
 
-export type IconName = keyof typeof SolidIcons | keyof typeof OutlineIcons
-export type FAIconName = keyof typeof FA
+export type IconName = keyof typeof SolidIcons | keyof typeof OutlineIcons;
+export type FAIconName = keyof typeof FA;
 
-export type UnifiedIconName = TablerIconName | IconName | FAIconName
+export type UnifiedIconName = TablerIconName | IconName | FAIconName;
 
 export function isHeroIcon(name: UnifiedIconName): name is keyof typeof SolidIcons | keyof typeof OutlineIcons {
-	return name in SolidIcons || name in OutlineIcons
+	return name in SolidIcons || name in OutlineIcons;
 }
 
 export function isTablerIcon(name: UnifiedIconName): name is TablerIconName {
-	return tablerIconNames.includes(name as TablerIconName)
+	return tablerIconNames.includes(name as TablerIconName);
 }
 
 export function isFAIcon(name: UnifiedIconName): name is keyof typeof FA {
-	return name in FA
+	return name in FA;
 }
 
 export function isUnifiedIconName(name: UnifiedIconName): name is UnifiedIconName {
-	return isTablerIcon(name) // || isHeroIcon(name) || isFAIcon(name)
+	return isTablerIcon(name); // || isHeroIcon(name) || isFAIcon(name)
 }
 
 export interface IDynamicIconProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
-	icon: UnifiedIconName
-	className?: ClassNameWithAutocomplete
-	outline?: boolean
-	CustomSVG?: React.ReactNode
+	icon: UnifiedIconName;
+	className?: ClassNameWithAutocomplete;
+	outline?: boolean;
+	CustomSVG?: React.ReactNode;
 }
 
 export const DynamicIcon = ({
@@ -45,7 +45,7 @@ export const DynamicIcon = ({
 	...props
 }: IDynamicIconProps): JSX.Element => {
 	if (CustomSVG) {
-		return <i {...{ ...props, className: "flex items-center justify-center" }}>{CustomSVG}</i>
+		return <i {...{ ...props, className: "flex items-center justify-center" }}>{CustomSVG}</i>;
 	}
 
 	if (isTablerIcon(icon)) {
@@ -59,11 +59,11 @@ export const DynamicIcon = ({
 					outline
 				}}
 			/>
-		)
+		);
 	}
 
 	if (isFAIcon(icon)) {
-		const Icon = FA[icon]
+		const Icon = FA[icon];
 		return (
 			<i {...{ ...props, className: "flex items-center justify-center" }}>
 				<Icon
@@ -72,10 +72,10 @@ export const DynamicIcon = ({
 					})}
 				/>
 			</i>
-		)
+		);
 	}
 	if (isHeroIcon(icon)) {
-		const Icon = outline ? OutlineIcons[icon] : SolidIcons[icon]
+		const Icon = outline ? OutlineIcons[icon] : SolidIcons[icon];
 		return (
 			<i {...{ ...props, className: "flex items-center justify-center" }}>
 				<Icon
@@ -84,7 +84,7 @@ export const DynamicIcon = ({
 					})}
 				/>
 			</i>
-		)
+		);
 	}
-	return <></>
-}
+	return <></>;
+};

package/stories/organisms/DropdownWithMultiSelect/DropdownItems.ts

@@ -41,6 +41,206 @@ export const dropdownDataBase: MultiSelectItemProps[] = [
 		key: "Delete",
 		isSelected: true
 	},
+	{
+		key: "Add to Batch",
+		label: "Add to Batch",
+		onClick: () => {
+			console.log("Add to Batch 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: "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
+	},
+	{
+		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: "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
+	},
+	{
+		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: "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
+	},
+	{
+		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: "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
+	},
+	{
+		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: "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",

package/stories/organisms/DropdownWithMultiSelect/DropdownWithMultiSelect.tsx

@@ -29,14 +29,18 @@ const DropdownWithMultiSelect = ({ label, options, type = "checkbox" }: Props) =
 			</PopoverButton>
 			<PopoverPanel
 				transition
-				className="bg-white max-h-[240px] w-[200px] rounded-[3px] border border-gray-300 shadow-lg z-40"
+				anchor={{
+					to: "bottom end",
+					gap: 8
+				}}
+				className="bg-white !max-h-[240px] w-[200px] rounded-[3px] border border-gray-300 shadow-lg z-40"
 			>
 				{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}>
+						<div className={inputWrapperStyles} key={option.key}>
 							{type === "checkbox" ? (
 								<Checkbox
 									key={option.key}

package/tsconfig.json

@@ -12,7 +12,7 @@
 		"moduleResolution": "node",
 		"resolveJsonModule": true,
 		"isolatedModules": true,
-		"jsx": "preserve",
+		"jsx": "react-jsx",
 		"incremental": true,
 		"plugins": [
 			{
@@ -23,7 +23,8 @@
 		"paths": {
 			"@/*": ["./*"]
 		},
-		"types": ["vitest/globals"]
+		"types": ["vitest/globals"],
+		"typeRoots": ["./node_modules/@types"]
 	},
 	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
 	"exclude": ["node_modules"]