@agility/plenum-ui 2.0.0-rc17 → 2.0.0-rc18

package/dist/tailwind.css

@@ -2009,18 +2009,6 @@ 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));
 }
 
-.scale-100 {
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  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));
-}
-
-.scale-95 {
-  --tw-scale-x: .95;
-  --tw-scale-y: .95;
-  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));
-}
-
 .transform {
   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));
 }
@@ -63010,14 +62998,6 @@ select {
   color: rgb(128 102 20 / 0.95);
 }
 
-.opacity-0 {
-  opacity: 0;
-}
-
-.opacity-100 {
-  opacity: 1;
-}
-
 .opacity-50 {
   opacity: 0.5;
 }
@@ -63097,11 +63077,6 @@ select {
   --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));
 }
 
-.ring-gray-300 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
-}
-
 .ring-red-500 {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity));
@@ -63156,22 +63131,6 @@ select {
   transition-duration: 150ms;
 }
 
-.duration-100 {
-  transition-duration: 100ms;
-}
-
-.duration-75 {
-  transition-duration: 75ms;
-}
-
-.ease-in {
-  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
-}
-
-.ease-out {
-  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-}
-
 .focus-within\:z-10:focus-within {
   z-index: 10;
 }

package/dist/types/stories/molecules/inputs/textArea/TextArea.d.ts

@@ -1,11 +1,15 @@
 import React from "react";
+interface ILabelProps extends React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement> {
+    display: string;
+    htmlFor?: string;
+}
 export interface ITextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange"> {
     /** Input ID */
     id?: string;
     /** Input Name */
     name?: string;
     /** Label for the input */
-    label?: string;
+    label?: ILabelProps;
     /** Error state */
     isError?: boolean;
     /** If field is required */

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

@@ -21,6 +21,7 @@ export interface IDropdownProps extends HTMLAttributes<HTMLDivElement> {
     activeItemClassname?: ClassNameWithAutocomplete;
     buttonClassname?: ClassNameWithAutocomplete;
     iconClassname?: ClassNameWithAutocomplete;
+    iconSpacingClassname?: ClassNameWithAutocomplete;
     placement?: Placement;
     offsetOptions?: Partial<{
         mainAxis: number;
@@ -35,6 +36,7 @@ export declare const defaultClassNames: {
     activeItemClassname: string;
     buttonClassname: string;
     iconClassname: string;
+    iconSpacingClassname: string;
 };
 /** Comment */
 declare const Dropdown: React.FC<IDropdownProps>;

package/package.json

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

package/stories/molecules/inputs/checkbox/Checkbox.tsx

@@ -53,7 +53,7 @@ const Checkbox: FC<ICheckboxProps> = ({
 	const wrapperStyles = cn(
 		"relative flex items-center min-h-[38px]",
 		{ "opacity-50": isDisabled },
-		{ "rounded-sm ring-1 px-3 ring-gray-300": hasBorder },
+		{ "rounded-sm border border-1 px-3 border-gray-200": hasBorder },
 		{ "py-3": hasBorder && message },
 		className
 	)

package/stories/molecules/inputs/textArea/TextArea.stories.ts

@@ -15,7 +15,7 @@ export const DefaultTextarea: Story = {
 		name: "description",
 		rows: 12,
 		cols: 18,
-		label: "Description",
+		label: { display: "Description" },
 		placeholder: dummyText
 	}
 }

package/stories/molecules/inputs/textArea/TextArea.tsx

@@ -2,13 +2,19 @@ import React, { forwardRef, useEffect, useId, useState } from "react"
 import { default as cn } from "classnames"
 import InputLabel from "../InputLabel"
 import InputCounter from "../InputCounter"
+
+interface ILabelProps extends React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement> {
+	display: string
+	htmlFor?: string
+}
+
 export interface ITextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange"> {
 	/** Input ID */
 	id?: string
 	/** Input Name */
 	name?: string
 	/** Label for the input */
-	label?: string
+	label?: ILabelProps
 	/** Error state */
 	isError?: boolean
 	/** If field is required */
@@ -101,7 +107,7 @@ const Textarea: React.FC<ITextareaProps> = ({
 			<InputLabel
 				isPlaceholder
 				isActive
-				label={label}
+				label={label.display}
 				isRequired={isRequired}
 				id={id}
 				isError={isError}

package/stories/organisms/AnimatedLabelTextArea/AnimatedLabelTextArea.tsx

@@ -39,9 +39,9 @@ const AnimatedLabelTextArea: React.FC<IAnimatedLabelTextAreaProps> = (props: IAn
 
 					isError && "!text-red-600"
 				)}
-				htmlFor={id}
+				htmlFor={label?.htmlFor || id}
 			>
-				{label} {`${hasValue}`}
+				{label?.display}
 				{required && <span className="text-red-600 ml-1">*</span>}
 			</label>
 

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

@@ -18,7 +18,7 @@ const IconElement = () => (
 const defaultArgs: Story["args"] = {
 	items: [...dropdownDataBase],
 	label: "Dropdown",
-	classNames: defaultClassNames,
+
 	placement: "bottom-end"
 }
 export const WithLabel: Story = {

package/stories/organisms/DropdownComponent/DropdownComponent.tsx

@@ -1,5 +1,4 @@
-import React, { Fragment, HTMLAttributes, useState } from "react"
-import { Transition } from "@headlessui/react"
+import React, { HTMLAttributes, useState } from "react"
 import { default as cn } from "classnames"
 import {
 	useFloating,
@@ -39,6 +38,7 @@ export interface IDropdownProps extends HTMLAttributes<HTMLDivElement> {
 	activeItemClassname?: ClassNameWithAutocomplete
 	buttonClassname?: ClassNameWithAutocomplete
 	iconClassname?: ClassNameWithAutocomplete
+	iconSpacingClassname?: ClassNameWithAutocomplete
 	placement?: Placement
 	offsetOptions?: Partial<{
 		mainAxis: number
@@ -54,8 +54,9 @@ export const defaultClassNames = {
 		"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",
 	buttonClassname:
-		"py-[2px] z-20 flex items-center  rounded outline-purple-500 transition-all   text-gray-400 hover:text-gray-600 ",
-	iconClassname: "ml-1 h-5 w-6"
+		"py-[2px] z-20 flex items-center  rounded outline-purple-500 transition-all text-gray-400 hover:text-gray-600 ",
+	iconClassname: "ml-1 h-5 w-6",
+	iconSpacingClassname: "flex items-center gap-x-4"
 }
 
 /** Comment */
@@ -63,12 +64,13 @@ const Dropdown: React.FC<IDropdownProps> = ({
 	items,
 	id,
 	label,
-	groupClassname = defaultClassNames.groupClassname,
-	itemsClassname = defaultClassNames.itemsClassname,
-	itemClassname = defaultClassNames.itemClassname,
-	activeItemClassname = defaultClassNames.activeItemClassname,
-	buttonClassname = defaultClassNames.buttonClassname,
-	iconClassname = defaultClassNames.iconClassname,
+	groupClassname,
+	itemsClassname,
+	itemClassname,
+	activeItemClassname,
+	buttonClassname,
+	iconClassname,
+	iconSpacingClassname,
 	CustomDropdownTrigger,
 	placement = "bottom-start",
 	offsetOptions,
@@ -111,7 +113,7 @@ const Dropdown: React.FC<IDropdownProps> = ({
 	return (
 		<div
 			{...{
-				className: groupClassname,
+				className: cn(defaultClassNames.groupClassname, groupClassname),
 				role: "combobox",
 				"aria-owns": `${id}-list`,
 				"aria-expanded": isOpen,
@@ -122,7 +124,7 @@ const Dropdown: React.FC<IDropdownProps> = ({
 			<button
 				{...{
 					ref: refs.setReference,
-					className: buttonClassname,
+					className: cn(defaultClassNames.buttonClassname, buttonClassname),
 					onClick: () => {
 						setIsOpen(!isOpen)
 					},
@@ -134,7 +136,7 @@ const Dropdown: React.FC<IDropdownProps> = ({
 				) : (
 					<>
 						<span className="pl-1">{label}</span>
-						<DynamicIcon icon="ChevronDownIcon" className={iconClassname} />
+						<DynamicIcon icon="ChevronDownIcon" className={cn(defaultClassNames.iconClassname, iconClassname)} />
 					</>
 				)}
 			</button>
@@ -142,39 +144,22 @@ const Dropdown: React.FC<IDropdownProps> = ({
 			{isMounted && items.length > 0 && isOpen && (
 				<FloatingPortal>
 					<FloatingFocusManager context={context} modal={true}>
-						<Transition
-							as={Fragment}
-							show={isOpen}
-							enter="transition ease-out duration-100"
-							enterFrom="transform opacity-0 scale-95"
-							enterTo="transform opacity-100 scale-100"
-							leave="transition ease-in duration-75"
-							leaveFrom="transform opacity-100 scale-100"
-							leaveTo="transform opacity-0 scale-95"
+						<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
-								{...{
-									...getFloatingProps(),
-									className: itemsClassname,
-									ref: refs.setFloating,
-									// style: floatingStyles,
-									"aria-labelledby": label,
-									id: `${id}-list`,
-									role: "listbox",
-									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
-									}
-								}}
-								className={itemsClassname}
-								ref={refs.setFloating}
-								aria-labelledby={label}
-								{...getFloatingProps()}
-							>
+
+							<ul id={`${id}-list`} role="listbox" style={{...transitionStyles}}>
 								{items.map((itemStack, idx) => {
 									return (
 										<React.Fragment key={`${idx}-list-${id}`}>
@@ -187,9 +172,10 @@ const Dropdown: React.FC<IDropdownProps> = ({
 													icon,
 													iconPosition,
 													...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",
 														{
@@ -201,16 +187,13 @@ const Dropdown: React.FC<IDropdownProps> = ({
 														{
 															"bg-gray-100 text-gray-900": active
 														},
-														active ? activeItemClassname : "",
+														active ? cn(defaultClassNames.activeItemClassname, activeItemClassname) : "",
 														{
 															"bg-gray-100 text-red-500 hover:text-red-500":
-																active && isEmphasized
-														},
-														itemClassname
-													)
-
-													return (
-														<li key={key}>
+															active && isEmphasized
+														})
+														return (
+															<li key={`${key}-${idx}`}>
 															<button
 																{...{
 																	onClick: () => {
@@ -222,53 +205,53 @@ const Dropdown: React.FC<IDropdownProps> = ({
 																	...rest
 																}}
 															>
-																<div className="flex items-center gap-x-4">
+																<div className={cn(defaultClassNames.iconSpacingClassname, iconSpacingClassname)}>
 																	{icon &&
 																		(iconPosition === "leading" ||
-																			iconPosition === undefined) &&
+																		iconPosition === undefined) &&
 																		(typeof icon === "string" ? (
 																			<DynamicIcon
-																				{...{
-																					icon: icon,
-																					className: cn(
-																						{
-																							"text-red-500": isEmphasized
-																						},
-																						"opacity-60 group"
+																			{...{
+																				icon: icon,
+																				className: cn(
+																					{
+																						"text-red-500": isEmphasized
+																					},
+																					"opacity-60 group"
 																					)
 																				}}
-																			/>
-																		) : (
-																			<DynamicIcon
-																				{...{
-																					...icon,
-																					className: cn(
-																						icon.className,
+																				/>
+																				) : (
+																					<DynamicIcon
+																					{...{
+																						...icon,
+																						className: cn(
+																							icon.className,
 																						{
 																							"text-red-500": isEmphasized
 																						},
 																						"opacity-60 group"
-																					)
-																				}}
-																			/>
-																		))}
+																						)
+																					}}
+																					/>
+																					))}
 																	<div className="whitespace-nowrap">{label}</div>
 																	{icon &&
 																		iconPosition === "trailing" &&
 																		(typeof icon === "string" ? (
 																			<DynamicIcon
-																				{...{
-																					icon: icon,
-																					className: cn(
-																						{
-																							"text-red-500": isEmphasized
-																						},
-																						"opacity-60 group"
+																			{...{
+																				icon: icon,
+																				className: cn(
+																					{
+																						"text-red-500": isEmphasized
+																					},
+																					"opacity-60 group"
 																					)
 																				}}
-																			/>
-																		) : (
-																			<DynamicIcon
+																				/>
+																				) : (
+																					<DynamicIcon
 																				{...{
 																					...icon,
 																					className: cn(
@@ -277,10 +260,10 @@ const Dropdown: React.FC<IDropdownProps> = ({
 																							"text-red-500": isEmphasized
 																						},
 																						"opacity-60 group"
-																					)
-																				}}
-																			/>
-																		))}
+																						)
+																					}}
+																					/>
+																					))}
 																</div>
 															</button>
 														</li>
@@ -291,7 +274,7 @@ const Dropdown: React.FC<IDropdownProps> = ({
 									)
 								})}
 							</ul>
-						</Transition>
+						</div>
 					</FloatingFocusManager>
 				</FloatingPortal>
 			)}