@agility/plenum-ui 2.3.3 → 2.3.4

package/dist/tailwind.css

@@ -73528,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));

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

@@ -7,6 +7,11 @@ export interface ISimpleSelectOptions {
     description?: string;
     caption?: string;
 }
+interface LabelAction {
+    label: string;
+    onClick: () => void;
+    className?: string;
+}
 export interface ISelectProps {
     /** Label */
     label?: string;
@@ -33,6 +38,7 @@ export interface ISelectProps {
     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.3",
+	"version": "2.3.4",
 	"license": "MIT",
 	"main": "dist/index.js",
 	"module": "dist/index.js",

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> = {
@@ -90,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

@@ -11,6 +11,7 @@ import {
 	ComboboxOption
 } from "@headlessui/react";
 import { Paragraph } from "@/stories/atoms/Typography/Paragraph";
+import { Label } from "@/stories/atoms/Typography/Label";
 
 export interface ISimpleSelectOptions {
 	label: string;
@@ -20,6 +21,12 @@ export interface ISimpleSelectOptions {
 	caption?: string;
 }
 
+interface LabelAction {
+	label: string;
+	onClick: () => void;
+	className?: string;
+}
+
 export interface ISelectProps {
 	/** Label */
 	label?: string;
@@ -46,6 +53,7 @@ export interface ISelectProps {
 	placeholder?: string;
 	dropdownMaxHeight?: number;
 	dropdownMaxWidth?: number;
+	labelAction?: LabelAction;
 }
 
 const Select: React.FC<ISelectProps> = ({
@@ -65,7 +73,8 @@ const Select: React.FC<ISelectProps> = ({
 	inputRef,
 	placeholder = "Select",
 	dropdownMaxHeight = 240,
-	dropdownMaxWidth = 240
+	dropdownMaxWidth = 240,
+	labelAction
 }) => {
 	const uniqueID = useId();
 	if (!id) id = `select-${uniqueID}`;
@@ -101,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">
@@ -177,7 +204,8 @@ const Select: React.FC<ISelectProps> = ({
 													title={option.label}
 													onMouseEnter={(e) => {
 														const el = e.currentTarget;
-														if (el.scrollWidth <= el.clientWidth) el.removeAttribute("title");
+														if (el.scrollWidth <= el.clientWidth)
+															el.removeAttribute("title");
 													}}
 													onMouseLeave={(e) => {
 														e.currentTarget.setAttribute("title", option.label);