@agility/plenum-ui 2.3.1 → 2.3.3

package/dist/tailwind.css

@@ -2037,10 +2037,18 @@ select {
   width: 100%;
 }
 
+.min-w-0 {
+  min-width: 0px;
+}
+
 .min-w-\[320px\] {
   min-width: 320px;
 }
 
+.flex-1 {
+  flex: 1 1 0%;
+}
+
 .shrink-0 {
   flex-shrink: 0;
 }
@@ -3263,6 +3271,10 @@ select {
   border-width: 1px;
 }
 
+.border-0 {
+  border-width: 0px;
+}
+
 .border-2 {
   border-width: 2px;
 }
@@ -67519,6 +67531,10 @@ select {
   stroke-width: 1.5;
 }
 
+.p-0 {
+  padding: 0px;
+}
+
 .p-10 {
   padding: 2.5rem;
 }
@@ -71727,6 +71743,11 @@ select {
   color: rgb(107 114 128 / var(--tw-text-opacity, 1));
 }
 
+.text-neutral-700 {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
+}
+
 .text-orange-100 {
   --tw-text-opacity: 1;
   color: rgb(255 237 213 / var(--tw-text-opacity, 1));
@@ -79012,6 +79033,10 @@ select {
   --anchor-gap: 8px;
 }
 
+.\!\[max-width\:var\(--dropdown-max-width\)\] {
+  max-width: var(--dropdown-max-width) !important;
+}
+
 .placeholder\:text-gray-400::-moz-placeholder {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity, 1));

package/dist/types/stories/atoms/Typography/Paragraph/Paragraph.d.ts

@@ -1,10 +1,10 @@
 type ParagraphAs = "span" | "p" | "label" | "strong" | "em";
 type ParagraphSize = "xl" | "lg" | "md" | "sm" | "xs";
-export interface ParagraphProps {
+export interface ParagraphProps extends React.HTMLAttributes<HTMLElement> {
     as?: ParagraphAs;
     size?: ParagraphSize;
     children: React.ReactNode;
     className?: string;
 }
-export default function Paragraph({ as, size, children, className }: ParagraphProps): import("react/jsx-runtime").JSX.Element;
+export default function Paragraph({ as, size, children, className, ...rest }: ParagraphProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,9 +1,11 @@
 import React from "react";
+import { UnifiedIconName } from "@/stories/atoms/icons/DynamicIcon";
 export interface ISimpleSelectOptions {
     label: string;
     value: string;
-    emoji?: string;
+    icon?: UnifiedIconName;
     description?: string;
+    caption?: string;
 }
 export interface ISelectProps {
     /** Label */
@@ -30,6 +32,7 @@ export interface ISelectProps {
     inputRef?: React.RefObject<HTMLInputElement>;
     placeholder?: string;
     dropdownMaxHeight?: number;
+    dropdownMaxWidth?: number;
 }
 declare const Select: React.FC<ISelectProps>;
 export default Select;

package/package.json

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

package/stories/atoms/Typography/Paragraph/Paragraph.tsx

@@ -3,7 +3,7 @@ import { default as cn } from "classnames";
 type ParagraphAs = "span" | "p" | "label" | "strong" | "em";
 type ParagraphSize = "xl" | "lg" | "md" | "sm" | "xs";
 
-export interface ParagraphProps {
+export interface ParagraphProps extends React.HTMLAttributes<HTMLElement> {
 	as?: ParagraphAs;
 	size?: ParagraphSize;
 	children: React.ReactNode;
@@ -18,8 +18,8 @@ const paragraphStyles: Record<ParagraphSize, string> = {
 	xs: "text-[10px] leading-[12px]"
 };
 
-export default function Paragraph({ as = "p", size = "md", children, className }: ParagraphProps) {
+export default function Paragraph({ as = "p", size = "md", children, className, ...rest }: ParagraphProps) {
 	const Tag = as;
 
-	return <Tag className={cn("gray-900 font-normal", paragraphStyles[size], className)}>{children}</Tag>;
+	return <Tag className={cn("gray-900 font-normal", paragraphStyles[size], className)} {...rest}>{children}</Tag>;
 }

package/stories/atoms/icons/TablerIcon.tsx

@@ -24,7 +24,8 @@ export interface ITablerIconProps extends React.DetailedHTMLProps<React.HTMLAttr
 
 const TablerIcon: React.FC<ITablerIconProps> = ({
 	icon,
-	className = "w-6 h-6 text-gray-600"
+	className = "w-6 h-6 text-gray-600",
+	...rest
 }: ITablerIconProps): JSX.Element | null => {
 	const [Icon, setIcon] = useState<ComponentType<any> | null>(
 		iconRegistry && icon ? (iconRegistry[icon] ?? null) : null
@@ -38,7 +39,7 @@ const TablerIcon: React.FC<ITablerIconProps> = ({
 
 	if (!Icon) return null;
 	return (
-		<i>
+		<i {...rest}>
 			<Icon className={className} />
 		</i>
 	);

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

@@ -61,8 +61,14 @@ export const DefaultSelect: TStory = {
 		id: "select",
 		name: "select",
 		options: [
-			{ label: "Canada", value: "value1", description: "A description for Canada." },
-			{ label: "USA", value: "value2" }
+			{
+				label: "All",
+				value: ""
+			},
+			{
+				label: "Canadian French blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah",
+				value: "fr-ca"
+			}
 		],
 		isDisabled: false,
 		isError: false,

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
 import InputLabel from "@/stories/molecules/inputs/InputLabel";
-import { DynamicIcon } from "@/stories/atoms/icons/DynamicIcon";
+import { DynamicIcon, UnifiedIconName } from "@/stories/atoms/icons/DynamicIcon";
 import { useId } from "@/utils/useId";
 import { default as cn } from "classnames";
 import {
@@ -15,8 +15,9 @@ import { Paragraph } from "@/stories/atoms/Typography/Paragraph";
 export interface ISimpleSelectOptions {
 	label: string;
 	value: string;
-	emoji?: string;
+	icon?: UnifiedIconName;
 	description?: string;
+	caption?: string;
 }
 
 export interface ISelectProps {
@@ -44,6 +45,7 @@ export interface ISelectProps {
 	inputRef?: React.RefObject<HTMLInputElement>;
 	placeholder?: string;
 	dropdownMaxHeight?: number;
+	dropdownMaxWidth?: number;
 }
 
 const Select: React.FC<ISelectProps> = ({
@@ -62,7 +64,8 @@ const Select: React.FC<ISelectProps> = ({
 	message,
 	inputRef,
 	placeholder = "Select",
-	dropdownMaxHeight = 240
+	dropdownMaxHeight = 240,
+	dropdownMaxWidth = 240
 }) => {
 	const uniqueID = useId();
 	if (!id) id = `select-${uniqueID}`;
@@ -142,13 +145,15 @@ const Select: React.FC<ISelectProps> = ({
 						style={
 							{
 								"--anchor-max-height": `${dropdownMaxHeight}px`,
-								minWidth: containerWidth
+								"--dropdown-max-width": `${dropdownMaxWidth}px`,
+								minWidth: Math.max(containerWidth ?? 0, 60)
 							} as React.CSSProperties
 						}
 						className={cn(
 							"z-[9999] overflow-auto rounded bg-white py-1",
 							"text-sm shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none",
-							"[--anchor-gap:8px]"
+							"[--anchor-gap:8px]",
+							"![max-width:var(--dropdown-max-width)]"
 						)}
 					>
 						{options.map((option) => (
@@ -163,10 +168,40 @@ const Select: React.FC<ISelectProps> = ({
 								}
 							>
 								{({ selected }) => (
-									<div className="py-xxsm px-sm flex items-center gap-xsm">
-										<Paragraph size="md">{option.label}</Paragraph>
-										{option.description ? (
-											<Paragraph size="md" className="text-neutral-500">{option.description}</Paragraph>
+									<div className="flex justify-between items-center py-xxsm px-sm gap-4">
+										<div className="flex flex-col flex-1 min-w-0">
+											<div className="flex items-center gap-xsm">
+												<Paragraph
+													size="md"
+													className="text-neutral-700 truncate min-w-0"
+													title={option.label}
+													onMouseEnter={(e) => {
+														const el = e.currentTarget;
+														if (el.scrollWidth <= el.clientWidth) el.removeAttribute("title");
+													}}
+													onMouseLeave={(e) => {
+														e.currentTarget.setAttribute("title", option.label);
+													}}
+												>
+													{option.label}
+												</Paragraph>
+												{option.description ? (
+													<Paragraph size="md" className="text-neutral-500">
+														{option.description}
+													</Paragraph>
+												) : null}
+											</div>
+											{option.caption ? (
+												<Paragraph size="sm" className="text-neutral-500">
+													{option.caption}
+												</Paragraph>
+											) : null}
+										</div>
+										{option.icon ? (
+											<DynamicIcon
+												icon={option.icon}
+												className="shrink-0 w-5 h-5 text-neutral-500"
+											/>
 										) : null}
 									</div>
 								)}

package/stories/organisms/FormInputWithAddons/FormInputWithAddons.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import FormInputWithAddons, { IFormInputWithAddonsProps } from "./FormInputWithAddons";
+import { action } from "@storybook/addon-actions";
+import FormInputWithAddons from "./FormInputWithAddons";
 
 const meta: Meta<typeof FormInputWithAddons> = {
 	title: "Design System/organisms/Form Input With Addons",
@@ -27,6 +28,19 @@ export const DefaultFormInputWithAddons: Story = {
 		trailIcon: { icon: "IconSearch" }
 	}
 };
+export const TrailIconWithOnClick: Story = {
+	args: {
+		id: "appSearch",
+		name: "appSearch",
+		type: "text",
+		placeholder: "Search...",
+		trailIcon: {
+			icon: "IconX",
+			onClick: action("trailIcon clicked")
+		}
+	}
+};
+
 export const FormInputWithAddonBTN: Story = {
 	args: {
 		id: "appSearch",

package/stories/organisms/FormInputWithAddons/FormInputWithAddons.tsx

@@ -121,27 +121,52 @@ const FormInputWithAddons: React.FC<IFormInputWithAddonsProps> = ({
 					}}
 				/>
 				{(trailLabel || trailIcon) && (
-					<label
-						ref={trailLabelRef}
-						htmlFor={id}
-						className={cn(
-							"right absolute top-0 bottom-0 right-3 flex items-center justify-center text-sm !text-gray-500 ",
-							labelClass
-						)}
-					>
-						{trailIcon && (
-							<span>
-								<DynamicIcon
-									{...{
-										...trailIcon,
-										className: cn("h-5 w-5 text-gray-400", customIconClass, trailIcon.className),
-										outline: iconOutlined
-									}}
-								/>
-							</span>
-						)}
-						{trailLabel && trailLabel}
-					</label>
+					trailIcon?.onClick ? (
+						<button
+							ref={trailLabelRef as unknown as React.RefObject<HTMLButtonElement>}
+							type="button"
+							onClick={(e) => { e.preventDefault(); trailIcon.onClick!(e as unknown as React.MouseEvent<HTMLElement>); }}
+							className={cn(
+								"right absolute top-0 bottom-0 right-3 flex items-center justify-center text-sm !text-gray-500 bg-transparent border-0 p-0 cursor-pointer",
+								labelClass
+							)}
+						>
+							{trailIcon && (
+								<span>
+									<DynamicIcon
+										{...{
+											...trailIcon,
+											className: cn("h-5 w-5 text-gray-400", customIconClass, trailIcon.className),
+											outline: iconOutlined
+										}}
+									/>
+								</span>
+							)}
+							{trailLabel && trailLabel}
+						</button>
+					) : (
+						<label
+							ref={trailLabelRef}
+							htmlFor={id}
+							className={cn(
+								"right absolute top-0 bottom-0 right-3 flex items-center justify-center text-sm !text-gray-500 ",
+								labelClass
+							)}
+						>
+							{trailIcon && (
+								<span>
+									<DynamicIcon
+										{...{
+											...trailIcon,
+											className: cn("h-5 w-5 text-gray-400", customIconClass, trailIcon.className),
+											outline: iconOutlined
+										}}
+									/>
+								</span>
+							)}
+							{trailLabel && trailLabel}
+						</label>
+					)
 				)}
 				{addonBTN && (
 					<div className="absolute top-0 bottom-0 right-0 flex items-center ">