@agility/plenum-ui 2.3.2 → 2.3.4

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;
 }
@@ -71735,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));
@@ -73515,6 +73528,11 @@ select {
   color: rgb(131 24 67 / 0.95);
 }
 
+.text-primary-700 {
+  --tw-text-opacity: 1;
+  color: rgb(109 40 217 / var(--tw-text-opacity, 1));
+}
+
 .text-purple-100 {
   --tw-text-opacity: 1;
   color: rgb(222 204 246 / var(--tw-text-opacity, 1));
@@ -79020,6 +79038,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,16 @@
 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;
+}
+interface LabelAction {
+    label: string;
+    onClick: () => void;
+    className?: string;
 }
 export interface ISelectProps {
     /** Label */
@@ -30,6 +37,8 @@ export interface ISelectProps {
     inputRef?: React.RefObject<HTMLInputElement>;
     placeholder?: string;
     dropdownMaxHeight?: number;
+    dropdownMaxWidth?: number;
+    labelAction?: LabelAction;
 }
 declare const Select: React.FC<ISelectProps>;
 export default Select;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agility/plenum-ui",
-	"version": "2.3.2",
+	"version": "2.3.4",
 	"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/molecules/inputs/select/Select.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import { action } from "@storybook/addon-actions";
 import Select from "./Select";
 
 const meta: Meta<typeof Select> = {
@@ -61,8 +62,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,
@@ -84,6 +91,24 @@ export const ManyOptions: TStory = {
 	}
 };
 
+export const WithLabelAction: TStory = {
+	args: {
+		label: "Batch",
+		id: "select-label-action",
+		name: "select-label-action",
+		isRequired: true,
+		options: [
+			{ label: "Batch 1", value: "batch-1" },
+			{ label: "Batch 2", value: "batch-2" },
+			{ label: "Batch 3", value: "batch-3" }
+		],
+		labelAction: {
+			label: "Add new batch",
+			onClick: action("labelAction clicked")
+		}
+	}
+};
+
 export const DefaultSelectDarkBG: TStory = {
 	args: {
 		label: "Label",

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 {
@@ -11,12 +11,20 @@ import {
 	ComboboxOption
 } from "@headlessui/react";
 import { Paragraph } from "@/stories/atoms/Typography/Paragraph";
+import { Label } from "@/stories/atoms/Typography/Label";
 
 export interface ISimpleSelectOptions {
 	label: string;
 	value: string;
-	emoji?: string;
+	icon?: UnifiedIconName;
 	description?: string;
+	caption?: string;
+}
+
+interface LabelAction {
+	label: string;
+	onClick: () => void;
+	className?: string;
 }
 
 export interface ISelectProps {
@@ -44,6 +52,8 @@ export interface ISelectProps {
 	inputRef?: React.RefObject<HTMLInputElement>;
 	placeholder?: string;
 	dropdownMaxHeight?: number;
+	dropdownMaxWidth?: number;
+	labelAction?: LabelAction;
 }
 
 const Select: React.FC<ISelectProps> = ({
@@ -62,7 +72,9 @@ const Select: React.FC<ISelectProps> = ({
 	message,
 	inputRef,
 	placeholder = "Select",
-	dropdownMaxHeight = 240
+	dropdownMaxHeight = 240,
+	dropdownMaxWidth = 240,
+	labelAction
 }) => {
 	const uniqueID = useId();
 	if (!id) id = `select-${uniqueID}`;
@@ -98,7 +110,25 @@ const Select: React.FC<ISelectProps> = ({
 
 	return (
 		<div className={wrapperStyle}>
-			{label && <InputLabel id={`${id}-label`} label={label} isRequired={isRequired} />}
+			{(label || labelAction) && (
+				<div className="flex items-center justify-between">
+					{label && (
+						<InputLabel
+							id={`${id}-label`}
+							label={label}
+							isRequired={isRequired}
+							noMarginBottom={!!labelAction}
+						/>
+					)}
+					{labelAction && (
+						<button type="button" onClick={labelAction.onClick}>
+							<Label size="sm" className={cn("text-primary-700", labelAction.className)}>
+								{labelAction.label}
+							</Label>
+						</button>
+					)}
+				</div>
+			)}
 
 			<HeadlessCombobox value={selectedOption} onChange={handleChange} disabled={isDisabled} immediate by="value">
 				<div ref={containerRef} className="relative w-full">
@@ -142,13 +172,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 +195,41 @@ 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>
 								)}