@agility/plenum-ui 2.2.9 → 2.3.0

package/dist/tailwind.css

@@ -1200,6 +1200,10 @@ select {
   z-index: 99999;
 }
 
+.z-\[9999\] {
+  z-index: 9999;
+}
+
 .-m-10 {
   margin: -2.5rem;
 }
@@ -1672,6 +1676,11 @@ select {
   margin-right: 24rem;
 }
 
+.mx-xxsm {
+  margin-left: 4px;
+  margin-right: 4px;
+}
+
 .my-10 {
   margin-top: 2.5rem;
   margin-bottom: 2.5rem;
@@ -1996,6 +2005,14 @@ select {
   width: 1.5rem;
 }
 
+.w-60 {
+  width: 15rem;
+}
+
+.w-64 {
+  width: 16rem;
+}
+
 .w-8 {
   width: 2rem;
 }
@@ -2060,6 +2077,11 @@ 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));
 }
 
+.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));
+}
+
 .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));
 }
@@ -3110,6 +3132,10 @@ select {
   gap: 24rem;
 }
 
+.gap-xsm {
+  gap: 8px;
+}
+
 .gap-x-2 {
   -moz-column-gap: 0.5rem;
        column-gap: 0.5rem;
@@ -3257,6 +3283,10 @@ select {
   border-style: dashed;
 }
 
+.border-none {
+  border-style: none;
+}
+
 .\!border-gray-300 {
   --tw-border-opacity: 1 !important;
   border-color: rgb(209 213 219 / var(--tw-border-opacity, 1)) !important;
@@ -65668,6 +65698,10 @@ select {
   background-color: rgb(19 78 74 / 0.95);
 }
 
+.bg-transparent {
+  background-color: transparent;
+}
+
 .bg-transparent-black-03 {
   background-color: rgba(0, 0, 0, 0.03);
 }
@@ -67736,6 +67770,11 @@ select {
   padding-right: 6px;
 }
 
+.px-sm {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
 .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -67871,6 +67910,11 @@ select {
   padding-bottom: 9px;
 }
 
+.py-xxsm {
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+
 .pl-1 {
   padding-left: 0.25rem;
 }
@@ -67915,6 +67959,10 @@ select {
   padding-right: 10px;
 }
 
+.pt-xxsm {
+  padding-top: 4px;
+}
+
 .text-left {
   text-align: left;
 }
@@ -71674,6 +71722,11 @@ select {
   color: rgb(6 78 59 / 0.95);
 }
 
+.text-neutral-500 {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
+}
+
 .text-orange-100 {
   --tw-text-opacity: 1;
   color: rgb(255 237 213 / var(--tw-text-opacity, 1));
@@ -78949,6 +79002,26 @@ select {
   transition-duration: 150ms;
 }
 
+.transition-transform {
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.\[--anchor-gap\:8px\] {
+  --anchor-gap: 8px;
+}
+
+.placeholder\:text-gray-400::-moz-placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+}
+
+.placeholder\:text-gray-400::placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+}
+
 .placeholder\:text-gray-500::-moz-placeholder {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity, 1));
@@ -78972,6 +79045,11 @@ select {
   border-color: rgb(209 213 219 / var(--tw-border-opacity, 1)) !important;
 }
 
+.focus-within\:border-primary-800:focus-within {
+  --tw-border-opacity: 1;
+  border-color: rgb(91 33 182 / var(--tw-border-opacity, 1));
+}
+
 .focus-within\:bg-purple-100:focus-within {
   --tw-bg-opacity: 1;
   background-color: rgb(222 204 246 / var(--tw-bg-opacity, 1));
@@ -78982,6 +79060,12 @@ select {
   outline-offset: 2px;
 }
 
+.focus-within\:ring-1:focus-within {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
 .focus-within\:ring-2:focus-within {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -78998,6 +79082,11 @@ select {
   --tw-ring-color: rgb(255 203 40 / var(--tw-ring-opacity, 1)) !important;
 }
 
+.focus-within\:ring-primary-800:focus-within {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(91 33 182 / var(--tw-ring-opacity, 1));
+}
+
 .focus-within\:ring-purple-600:focus-within {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(105 26 216 / var(--tw-ring-opacity, 1));

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

@@ -2,6 +2,8 @@ import React from "react";
 export interface ISimpleSelectOptions {
     label: string;
     value: string;
+    emoji?: string;
+    description?: string;
 }
 export interface ISelectProps {
     /** Label */
@@ -12,7 +14,7 @@ export interface ISelectProps {
     name?: string;
     /** List of options to display in the select menu */
     options: ISimpleSelectOptions[];
-    /** Select name prop */
+    /** Called with the selected option's value string */
     onChange?(value: string): void;
     /** Select disabled state */
     isDisabled?: boolean;
@@ -25,6 +27,9 @@ export interface ISelectProps {
     onFocus?: () => void;
     onBlur?: () => void;
     message?: string;
+    inputRef?: React.RefObject<HTMLInputElement>;
+    placeholder?: string;
+    dropdownMaxHeight?: number;
 }
 declare const Select: React.FC<ISelectProps>;
 export default Select;

package/local.sh

@@ -9,7 +9,7 @@ RESET='\033[0m'
 DIR="$PWD"
 
 # The required yarn version to use this script
-REQUIRED_YARN_VERSION="1.22.19"
+REQUIRED_YARN_VERSION="1.22.22"
 
 # Get the installed Yarn version
 INSTALLED_YARN_VERSION=$(yarn --version 2>/dev/null)

package/package.json

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

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

@@ -10,12 +10,16 @@ const meta: Meta<typeof Select> = {
 		(Story, context) => {
 			if (context.name === "Default Select Dark BG") {
 				return (
-					<div className="bg-transparent-black-03 rounded p-6">
+					<div className="bg-transparent-black-03 rounded p-6 w-60">
 						<Story />
 					</div>
 				);
 			}
-			return <Story />;
+			return (
+				<div className="w-64">
+					<Story />
+				</div>
+			);
 		}
 	]
 };
@@ -23,13 +27,41 @@ const meta: Meta<typeof Select> = {
 export default meta;
 type TStory = StoryObj<typeof Select>;
 
+const manyCountries = [
+	{
+		label: "Australia",
+		value: "au",
+		description: "A country and continent"
+	},
+	{ label: "Brazil", value: "br" },
+	{ label: "Canada", value: "ca" },
+	{ label: "China", value: "cn" },
+	{ label: "Denmark", value: "dk" },
+	{ label: "Egypt", value: "eg" },
+	{ label: "France", value: "fr" },
+	{ label: "Germany", value: "de" },
+	{ label: "India", value: "in" },
+	{ label: "Italy", value: "it" },
+	{ label: "Japan", value: "jp" },
+	{ label: "Mexico", value: "mx" },
+	{ label: "Netherlands", value: "nl" },
+	{ label: "New Zealand", value: "nz" },
+	{ label: "Norway", value: "no" },
+	{ label: "Portugal", value: "pt" },
+	{ label: "South Korea", value: "kr" },
+	{ label: "Spain", value: "es" },
+	{ label: "Sweden", value: "se" },
+	{ label: "United Kingdom", value: "gb" },
+	{ label: "United States", value: "us" }
+];
+
 export const DefaultSelect: TStory = {
 	args: {
 		label: "Label",
 		id: "select",
 		name: "select",
 		options: [
-			{ label: "Canada", value: "value1" },
+			{ label: "Canada", value: "value1", description: "A description for Canada." },
 			{ label: "USA", value: "value2" }
 		],
 		isDisabled: false,
@@ -38,6 +70,20 @@ export const DefaultSelect: TStory = {
 		message: "Message"
 	}
 };
+
+export const ManyOptions: TStory = {
+	args: {
+		label: "Country",
+		id: "select-many",
+		name: "select-many",
+		options: manyCountries,
+		isDisabled: false,
+		isError: false,
+		isRequired: false,
+		message: "Scroll to see all options"
+	}
+};
+
 export const DefaultSelectDarkBG: TStory = {
 	args: {
 		label: "Label",

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

@@ -1,13 +1,24 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
 import InputLabel from "@/stories/molecules/inputs/InputLabel";
+import { DynamicIcon } from "@/stories/atoms/icons/DynamicIcon";
 import { useId } from "@/utils/useId";
 import { default as cn } from "classnames";
-import Paragraph from "@/stories/atoms/Typography/Paragraph/Paragraph";
+import {
+	Combobox as HeadlessCombobox,
+	ComboboxInput,
+	ComboboxButton,
+	ComboboxOptions,
+	ComboboxOption
+} from "@headlessui/react";
+import { Paragraph } from "@/stories/atoms/Typography/Paragraph";
 
 export interface ISimpleSelectOptions {
 	label: string;
 	value: string;
+	emoji?: string;
+	description?: string;
 }
+
 export interface ISelectProps {
 	/** Label */
 	label?: string;
@@ -17,7 +28,7 @@ export interface ISelectProps {
 	name?: string;
 	/** List of options to display in the select menu */
 	options: ISimpleSelectOptions[];
-	/** Select name prop */
+	/** Called with the selected option's value string */
 	onChange?(value: string): void;
 	/** Select disabled state */
 	isDisabled?: boolean;
@@ -30,7 +41,11 @@ export interface ISelectProps {
 	onFocus?: () => void;
 	onBlur?: () => void;
 	message?: string;
+	inputRef?: React.RefObject<HTMLInputElement>;
+	placeholder?: string;
+	dropdownMaxHeight?: number;
 }
+
 const Select: React.FC<ISelectProps> = ({
 	label,
 	id,
@@ -44,57 +59,128 @@ const Select: React.FC<ISelectProps> = ({
 	className,
 	onFocus,
 	onBlur,
-	message
+	message,
+	inputRef,
+	placeholder = "Select",
+	dropdownMaxHeight = 240
 }) => {
-	const [selectedOption, setSelectedOption] = useState<string>(value || options[0].value);
 	const uniqueID = useId();
 	if (!id) id = `select-${uniqueID}`;
 	if (!name) name = id;
 
+	const findOption = (val?: string) => options.find((o) => o.value === val) ?? null;
+
+	const [selectedOption, setSelectedOption] = useState<ISimpleSelectOptions | null>(findOption(value));
+
 	useEffect(() => {
-		if (value !== undefined && value !== null) {
-			setSelectedOption(value);
-		}
+		setSelectedOption(findOption(value));
 	}, [value]);
 
-	const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-		const targetValue = e.target.value;
-		typeof onChange == "function" && onChange(targetValue);
-		setSelectedOption(targetValue);
+	const handleChange = (option: ISimpleSelectOptions | null) => {
+		setSelectedOption(option);
+		if (option && typeof onChange === "function") {
+			onChange(option.value);
+		}
 	};
-	const wrapperStyle = cn("group", { "opacity-50": isDisabled });
+
+	const containerRef = useRef<HTMLDivElement>(null);
+	const [containerWidth, setContainerWidth] = useState<number | undefined>();
+
+	useLayoutEffect(() => {
+		const el = containerRef.current;
+		if (!el) return;
+		const observer = new ResizeObserver(([entry]) => setContainerWidth(entry.contentRect.width));
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, []);
+
+	const wrapperStyle = cn(className, "w-full", "group", { "opacity-50 pointer-events-none": isDisabled });
+
 	return (
 		<div className={wrapperStyle}>
-			{label && <InputLabel isActive label={label} isRequired={isRequired} id={id} isDisabled={isDisabled} />}
-			<select
-				id={id}
-				name={name}
-				className={cn(
-					"block w-full border-gray-300 py-2 pl-3 pr-10 text-base focus:outline-none",
-					"rounded focus:border-purple-500 focus:ring-purple-500 sm:text-sm",
-					{ "border-red-500": isError },
-					{ "border-gray-300": !isError },
-					className
+			{label && <InputLabel id={`${id}-label`} label={label} isRequired={isRequired} />}
+
+			<HeadlessCombobox value={selectedOption} onChange={handleChange} disabled={isDisabled} immediate by="value">
+				<div ref={containerRef} className="relative w-full">
+					<div
+						className={cn(
+							"relative w-full cursor-default overflow-hidden rounded border bg-white text-left shadow-sm",
+							"focus-within:border-primary-800 focus-within:ring-1 focus-within:ring-primary-800",
+							{ "border-red-500": isError, "border-gray-300": !isError }
+						)}
+					>
+						<ComboboxInput
+							id={id}
+							name={name}
+							ref={inputRef}
+							readOnly
+							displayValue={(option: ISimpleSelectOptions | null) => (option ? option.label : "")}
+							placeholder={placeholder}
+							onFocus={onFocus}
+							onBlur={onBlur}
+							className={cn(
+								"w-full border-none py-2 pl-3 pr-10 text-sm leading-5 text-gray-700",
+								"placeholder:text-gray-400",
+								"focus:outline-none focus:ring-0",
+								"bg-transparent cursor-default"
+							)}
+						/>
+
+						<ComboboxButton className="absolute inset-y-0 right-0 flex items-center pr-3">
+							{({ open }) => (
+								<DynamicIcon
+									icon="IconChevronDown"
+									className={cn("h-4 w-4 text-gray-400 transition-transform", { "rotate-180": open })}
+									aria-hidden="true"
+								/>
+							)}
+						</ComboboxButton>
+					</div>
+
+					<ComboboxOptions
+						anchor="bottom start"
+						style={
+							{
+								"--anchor-max-height": `${dropdownMaxHeight}px`,
+								minWidth: containerWidth
+							} 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]"
+						)}
+					>
+						{options.map((option) => (
+							<ComboboxOption
+								key={option.value}
+								value={option}
+								className={({ focus }) =>
+									cn(
+										"relative cursor-default select-none mx-xxsm rounded",
+										focus ? "bg-gray-100 text-gray-900" : "text-gray-700"
+									)
+								}
+							>
+								{({ 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>
+										) : null}
+									</div>
+								)}
+							</ComboboxOption>
+						))}
+					</ComboboxOptions>
+				</div>
+
+				{message && (
+					<Paragraph size="md" className={isError ? "text-red-600" : "text-gray-500 pt-xxsm"}>
+						{message}
+					</Paragraph>
 				)}
-				onChange={handleChange}
-				disabled={isDisabled}
-				value={selectedOption}
-				onFocus={onFocus}
-				onBlur={onBlur}
-			>
-				{options.map(({ value, label }) => {
-					return (
-						<option key={value} value={value}>
-							{label}
-						</option>
-					);
-				})}
-			</select>
-			{message && (
-				<Paragraph size="md" className={isError ? "text-red-600" : "text-gray-500"}>
-					{message}
-				</Paragraph>
-			)}
+			</HeadlessCombobox>
 		</div>
 	);
 };

package/tailwind.config.js

@@ -52,6 +52,72 @@ module.exports = {
 				header: "max-content 1fr 1fr"
 			},
 			colors: {
+				"neutral-50": "#F7F7F7",
+				"neutral-100": "#F2F2F2",
+				"neutral-200": "#E5E7EB",
+				"neutral-300": "#D1D5DB",
+				"neutral-400": "#9CA3aF",
+				"neutral-500": "#6B7280",
+				"neutral-600": "#4B5563",
+				"neutral-700": "#374151",
+				"neutral-800": "#1F2937",
+				"neutral-900": "#111827",
+
+				"primary-50": "#F7F7F7",
+				"primary-100": "#EDE9FE",
+				"primary-200": "#DDD6FE",
+				"primary-300": "#C4B5FD",
+				"primary-400": "#A78BFA",
+				"primary-500": "#8B5CF6",
+				"primary-600": "#7C3AED",
+				"primary-700": "#6D28D9",
+				"primary-800": "#5B21B6",
+				"primary-900": "#4C1D95",
+
+				"secondary-50": "#FFFAEA",
+				"secondary-100": "#FFF5D4",
+				"secondary-200": "#FFEAA9",
+				"secondary-300": "#FFE07E",
+				"secondary-400": "#FFD553",
+				"secondary-500": "#FFCB28",
+				"secondary-600": "#F2C126",
+				"secondary-700": "#D9AD22",
+				"secondary-800": "#BF981E",
+				"secondary-900": "#997A18",
+
+				"success-50": "#ECFDF5",
+				"success-100": "#D1FAE5",
+				"success-200": "#A7F3D0",
+				"success-300": "#6EE7B7",
+				"success-400": "#34D399",
+				"success-500": "#10B981",
+				"success-600": "#059669",
+				"success-700": "#047857",
+				"success-800": "#065F46",
+				"success-900": "#064E3B",
+
+				"warning-50": "#FFF7ED",
+				"warning-100": "#FFEDD5",
+				"warning-200": "#FED7AA",
+				"warning-300": "#FDBA74",
+				"warning-400": "#FB923C",
+				"warning-500": "#F97316",
+				"warning-600": "#EA580C",
+				"warning-700": "#C2410C",
+				"warning-800": "#9A3412",
+				"warning-900": "#7C2D12",
+
+				"error-50": "#FEF2F2",
+				"error-100": "#FEE2E2",
+				"error-200": "#FECACA",
+				"error-300": "#FCA5A5",
+				"error-400": "#F87171",
+				"error-500": "#EF4444",
+				"error-600": "#DC2626",
+				"error-700": "#B91C1C",
+				"error-800": "#991B1B",
+				"error-900": "#7F1D1D",
+
 				"transparent-white-05": "rgba(255, 255, 255, 0.05)",
 				"transparent-white-10": "rgba(255, 255, 255, 0.1)",
 				"transparent-white-20": "rgba(255, 255, 255, 0.2)",
@@ -287,6 +353,18 @@ module.exports = {
 			transitionProperty: {
 				left: "left",
 				height: "height"
+			},
+			spacing: {
+				xxsm: "4px",
+				xsm: "8px",
+				sm: "12px",
+				md: "16px",
+				lg: "20px",
+				xlg: "24px",
+				xxlg: "28px",
+				hg: "32px",
+				xhg: "40px",
+				xxhg: "80px"
 			}
 		}
 	},