@agility/plenum-ui 2.0.0-rc2 → 2.0.0-rc4

package/dist/index.d.ts

@@ -75,6 +75,7 @@ declare module '@agility/plenum-ui/stories/atoms/buttons/Button/Alternative/Alte
   export const AlternativeTrailingIcon: Story;
   export const AlternativeLeadingIcon: Story;
   export const AlternativeExtraSmall: Story;
+  export const AlternativeSimpleIconName: Story;
   export const AlternativeSmall: Story;
   export const AlternativeMedium: Story;
   export const AlternativeLarge: Story;
@@ -83,17 +84,17 @@ declare module '@agility/plenum-ui/stories/atoms/buttons/Button/Alternative/Alte
 }
 declare module '@agility/plenum-ui/stories/atoms/buttons/Button/Button' {
   import { HTMLAttributeAnchorTarget } from "react";
-  import { IDynamicIconProps } from "@agility/plenum-ui/stories/atoms/icons/index";
+  import { UnifiedIconName, IDynamicIconProps } from "@agility/plenum-ui/stories/atoms/icons/index";
   export type BTNActionType = "primary" | "secondary" | "alternative" | "danger";
   export interface IButtonProps extends React.ComponentPropsWithoutRef<"button"> {
       /** Is the button a Primary CTA, alternative or danger button? */
-      actionType: BTNActionType;
+      actionType?: BTNActionType;
       /** How lg should the button be? - Defaults to 'base'. */
       size?: "xs" | "sm" | "md" | "lg" | "xl";
       /** The Button's text content. */
       label: string;
       /** The Icon to be displayed inside the button. */
-      icon?: IDynamicIconProps;
+      icon?: IDynamicIconProps | UnifiedIconName;
       /** Does the button width grow to fill it's container? */
       fullWidth?: boolean;
       /** Optionally render as anchor tag */
@@ -109,11 +110,13 @@ declare module '@agility/plenum-ui/stories/atoms/buttons/Button/Button' {
       /** Is the associated content loading? */
       isLoading?: boolean;
       className?: string;
+      iconObj?: React.ReactNode;
+      ref?: React.LegacyRef<HTMLButtonElement>;
   }
   /**
    * Primary UI component for user interaction
    */
-  const Button: ({ actionType, size, label, icon, CustomSVGIcon, fullWidth, iconPosition, asLink, isLoading, className, ...props }: IButtonProps) => import("react/jsx-runtime").JSX.Element;
+  const Button: ({ actionType, size, label, icon, iconObj, CustomSVGIcon, fullWidth, iconPosition, asLink, isLoading, className, ref, ...props }: IButtonProps) => import("react/jsx-runtime").JSX.Element;
   export default Button;
 
 }
@@ -126,6 +129,7 @@ declare module '@agility/plenum-ui/stories/atoms/buttons/Button/Danger/Danger.st
   export const Danger: Story;
   export const DangerTrailingIcon: Story;
   export const DangerLeadingIcon: Story;
+  export const DangerSimpleIconName: Story;
   export const DangerExtraSmall: Story;
   export const DangerSmall: Story;
   export const DangerMedium: Story;
@@ -141,6 +145,7 @@ declare module '@agility/plenum-ui/stories/atoms/buttons/Button/Primary/Primary.
   type Story = StoryObj<typeof Button>;
   export const Primary: Story;
   export const PrimaryLeadingIcon: Story;
+  export const PrimarySimpleIconName: Story;
   export const PrimaryTrailingIcon: Story;
   export const PrimaryExtraSmall: Story;
   export const PrimarySmall: Story;
@@ -158,6 +163,7 @@ declare module '@agility/plenum-ui/stories/atoms/buttons/Button/Secondary/Second
   export const Secondary: Story;
   export const SecondaryTrailingIcon: Story;
   export const SecondaryLeadingIcon: Story;
+  export const SecondarySimpleIconName: Story;
   export const SecondaryExtraSmall: Story;
   export const SecondarySmall: Story;
   export const SecondaryMedium: Story;
@@ -436,6 +442,8 @@ declare module '@agility/plenum-ui/stories/molecules/inputs/InputField/InputFiel
       required?: boolean;
       /** use input psuedo classes for :valid and :invalid styles. on by default */
       clientSideCheck?: boolean;
+      /**ref for input */
+      ref?: React.Ref<HTMLInputElement>;
   }
   const InputField: React.FC<IInputFieldProps>;
   export default InputField;
@@ -824,14 +832,10 @@ declare module '@agility/plenum-ui/stories/organisms/DropdownComponent/DropdownC
   import React, { HTMLAttributes } from "react";
   import { Placement } from "@floating-ui/react";
   import { ClassNameWithAutocomplete } from "utils/types";
-  import { IDynamicIconProps } from "@/stories/atoms/icons";
+  import { IDynamicIconProps, UnifiedIconName } from "@/stories/atoms/icons";
   export interface IItemProp extends HTMLAttributes<HTMLButtonElement> {
-      icon?: {
-          name: IDynamicIconProps["icon"];
-          className?: ClassNameWithAutocomplete;
-          pos?: "trailing" | "leading";
-          outline?: boolean;
-      };
+      icon?: IDynamicIconProps | UnifiedIconName;
+      iconPosition?: "trailing" | "leading";
       label: string;
       onClick?(): void;
       isEmphasized?: boolean;

package/dist/index.js

@@ -4643,23 +4643,27 @@ var Button = (_a) => {
     size = "sm",
     label,
     icon,
+    iconObj,
     CustomSVGIcon,
     fullWidth = false,
     iconPosition = "trailing",
     asLink,
     isLoading = false,
-    className
+    className,
+    ref
   } = _b, props = __objRest(_b, [
     "actionType",
     "size",
     "label",
     "icon",
+    "iconObj",
     "CustomSVGIcon",
     "fullWidth",
     "iconPosition",
     "asLink",
     "isLoading",
-    "className"
+    "className",
+    "ref"
   ]);
   const iconStyles = cn5(
     { "text-white h-5 w-5": actionType === "primary" || actionType === "danger" },
@@ -4698,13 +4702,16 @@ var Button = (_a) => {
           " bg-red-600 text-white hover:bg-red-700 <focus-visible:!></focus-visible:!>ring-red-500 focus:!ring-red-500 active:!ring-red-500 focus-within:!ring-red-500 ": actionType === "danger"
         },
         className ? className : ""
-      )
+      ),
+      ref
     }, props),
     CustomSVGIcon && (isLoading ? /* @__PURE__ */ React.createElement("div", { className: cn5("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize) }) : /* @__PURE__ */ React.createElement("i", null, CustomSVGIcon)),
-    icon && iconPosition === "leading" && (isLoading ? /* @__PURE__ */ React.createElement("div", { className: cn5("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize) }) : /* @__PURE__ */ React.createElement(DynamicIcon, __spreadValues({}, __spreadProps(__spreadValues({}, icon), { className: iconStyles })))),
+    iconObj && iconPosition === "leading" && (!isLoading ? /* @__PURE__ */ React.createElement(React.Fragment, null, iconObj) : /* @__PURE__ */ React.createElement("div", { className: cn5("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize) })),
+    icon && iconPosition === "leading" && (isLoading ? /* @__PURE__ */ React.createElement("div", { className: cn5("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize) }) : typeof icon === "string" ? /* @__PURE__ */ React.createElement(DynamicIcon, __spreadValues({}, { icon, className: iconStyles })) : /* @__PURE__ */ React.createElement(DynamicIcon, __spreadValues({}, __spreadProps(__spreadValues({}, icon), { className: iconStyles })))),
     !icon && !CustomSVGIcon && isLoading && /* @__PURE__ */ React.createElement("div", { className: cn5("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize) }),
     label,
-    icon && iconPosition === "trailing" && (isLoading ? /* @__PURE__ */ React.createElement("div", { className: cn5("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize) }) : /* @__PURE__ */ React.createElement(DynamicIcon, __spreadValues({}, __spreadProps(__spreadValues({}, icon), { className: iconStyles }))))
+    icon && iconPosition === "trailing" && (isLoading ? /* @__PURE__ */ React.createElement("div", { className: cn5("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize) }) : typeof icon === "string" ? /* @__PURE__ */ React.createElement(DynamicIcon, __spreadValues({}, { icon, className: iconStyles })) : /* @__PURE__ */ React.createElement(DynamicIcon, __spreadValues({}, __spreadProps(__spreadValues({}, icon), { className: iconStyles })))),
+    iconObj && iconPosition === "trailing" && (!isLoading ? /* @__PURE__ */ React.createElement(React.Fragment, null, iconObj) : /* @__PURE__ */ React.createElement("div", { className: cn5("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize) }))
   );
 };
 var Button_default = Button;
@@ -5135,7 +5142,8 @@ var InputField = (_a) => {
     required,
     clientSideCheck = true,
     placeholder,
-    className
+    className,
+    ref
   } = _b, rest = __objRest(_b, [
     "type",
     "id",
@@ -5149,16 +5157,19 @@ var InputField = (_a) => {
     "required",
     "clientSideCheck",
     "placeholder",
-    "className"
+    "className",
+    "ref"
   ]);
   return /* @__PURE__ */ React11.createElement(
     "input",
     __spreadValues({}, __spreadValues({
       type,
       id: id2,
+      ref,
       name,
       value,
       onChange: (e) => {
+        console.log(e);
         handleChange(e.target.value);
       },
       autoFocus: isFocused,
@@ -5636,66 +5647,100 @@ var Dropdown = (_a) => {
           "aria-labelledby": label
         }), getFloatingProps()),
         items.map((itemStack, idx) => {
-          return /* @__PURE__ */ React17.createElement(React17.Fragment, { key: `${idx}-list-${id2}` }, itemStack.map((_a3) => {
-            var _b3 = _a3, { onClick, label: label2, key, isEmphasized, icon } = _b3, rest = __objRest(_b3, ["onClick", "label", "key", "isEmphasized", "icon"]);
-            const active = activeItem && activeItem === key;
-            const itemClass = cn19(
-              itemClassname,
-              "group flex cursor-pointer items-center px-4 py-2 text-sm transition-all",
-              {
-                "text-red-500": isEmphasized
-              },
-              {
-                "text-gray-900": !isEmphasized
-              },
-              {
-                "bg-gray-100 text-gray-900": active
-              },
-              active ? activeItemClassname : "",
-              {
-                "bg-gray-100 text-red-500 hover:text-red-500": active && isEmphasized
-              },
-              itemClassname
-            );
-            return /* @__PURE__ */ React17.createElement("li", { key }, /* @__PURE__ */ React17.createElement(
-              "button",
-              __spreadValues({}, __spreadValues({
-                onClick: () => {
-                  setActiveItem(key);
-                  onClick && onClick();
-                },
+          return /* @__PURE__ */ React17.createElement(React17.Fragment, { key: `${idx}-list-${id2}` }, itemStack.map(
+            (_a3) => {
+              var _b3 = _a3, {
+                onClick,
+                label: label2,
                 key,
-                className: cn19(itemClass, "w-full")
-              }, rest)),
-              /* @__PURE__ */ React17.createElement("div", { className: "flex items-center gap-x-4" }, icon && (icon.pos === "leading" || (icon == null ? void 0 : icon.pos) === void 0) && /* @__PURE__ */ React17.createElement(
-                DynamicIcon,
-                __spreadValues({}, {
-                  icon: icon.name,
-                  className: cn19(
-                    icon.className,
-                    {
-                      "text-red-500": isEmphasized
-                    },
-                    "opacity-60 group-hover:opacity-100"
-                  ),
-                  outline: icon.outline
-                })
-              ), /* @__PURE__ */ React17.createElement("div", { className: "whitespace-nowrap" }, label2), icon && icon.pos === "trailing" && /* @__PURE__ */ React17.createElement(
-                DynamicIcon,
-                __spreadValues({}, {
-                  icon: icon.name,
-                  className: cn19(
-                    icon.className,
-                    {
-                      "text-red-500": isEmphasized
-                    },
-                    "opacity-60 group-"
-                  ),
-                  outline: icon.outline
-                })
-              ))
-            ));
-          }));
+                isEmphasized,
+                icon,
+                iconPosition
+              } = _b3, rest = __objRest(_b3, [
+                "onClick",
+                "label",
+                "key",
+                "isEmphasized",
+                "icon",
+                "iconPosition"
+              ]);
+              const active = activeItem && activeItem === key;
+              const itemClass = cn19(
+                itemClassname,
+                "group flex cursor-pointer items-center px-4 py-2 text-sm transition-all",
+                {
+                  "text-red-500": isEmphasized
+                },
+                {
+                  "text-gray-900": !isEmphasized
+                },
+                {
+                  "bg-gray-100 text-gray-900": active
+                },
+                active ? activeItemClassname : "",
+                {
+                  "bg-gray-100 text-red-500 hover:text-red-500": active && isEmphasized
+                },
+                itemClassname
+              );
+              return /* @__PURE__ */ React17.createElement("li", { key }, /* @__PURE__ */ React17.createElement(
+                "button",
+                __spreadValues({}, __spreadValues({
+                  onClick: () => {
+                    setActiveItem(key);
+                    onClick && onClick();
+                  },
+                  key,
+                  className: cn19(itemClass, "w-full")
+                }, rest)),
+                /* @__PURE__ */ React17.createElement("div", { className: "flex items-center gap-x-4" }, icon && (iconPosition === "leading" || iconPosition === void 0) && (typeof icon === "string" ? /* @__PURE__ */ React17.createElement(
+                  DynamicIcon,
+                  __spreadValues({}, {
+                    icon,
+                    className: cn19(
+                      {
+                        "text-red-500": isEmphasized
+                      },
+                      "opacity-60 group"
+                    )
+                  })
+                ) : /* @__PURE__ */ React17.createElement(
+                  DynamicIcon,
+                  __spreadValues({}, __spreadProps(__spreadValues({}, icon), {
+                    className: cn19(
+                      icon.className,
+                      {
+                        "text-red-500": isEmphasized
+                      },
+                      "opacity-60 group"
+                    )
+                  }))
+                )), /* @__PURE__ */ React17.createElement("div", { className: "whitespace-nowrap" }, label2), icon && iconPosition === "trailing" && (typeof icon === "string" ? /* @__PURE__ */ React17.createElement(
+                  DynamicIcon,
+                  __spreadValues({}, {
+                    icon,
+                    className: cn19(
+                      {
+                        "text-red-500": isEmphasized
+                      },
+                      "opacity-60 group"
+                    )
+                  })
+                ) : /* @__PURE__ */ React17.createElement(
+                  DynamicIcon,
+                  __spreadValues({}, __spreadProps(__spreadValues({}, icon), {
+                    className: cn19(
+                      icon.className,
+                      {
+                        "text-red-500": isEmphasized
+                      },
+                      "opacity-60 group"
+                    )
+                  }))
+                )))
+              ));
+            }
+          ));
         })
       )
     )))