@agility/plenum-ui 2.0.6 → 2.0.7

package/dist/types/stories/molecules/inputs/NestedInputButton/NestedInputButton.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { IDynamicIconProps } from "@/stories/atoms/icons";
-export interface INestedInputButtonProps {
+export interface INestedInputButtonProps extends Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> {
     /** Icon to be included*/
     icon?: IDynamicIconProps;
     /** CTA label */
@@ -9,9 +9,6 @@ export interface INestedInputButtonProps {
     align: "left" | "right";
     /** Show the CTA without Background color and a border seperator */
     isClear?: boolean;
-    /** Onclick callback */
-    onClickHandler?(): void;
-    buttonProps?: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
 }
 declare const NestedInputButton: React.FC<INestedInputButtonProps>;
 export default NestedInputButton;

package/package.json

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

package/stories/molecules/inputs/NestedInputButton/NestedInputButton.tsx

@@ -1,7 +1,8 @@
 import React from "react"
 import { DynamicIcon, IDynamicIconProps } from "@/stories/atoms/icons"
 import { default as cn } from "classnames"
-export interface INestedInputButtonProps {
+export interface INestedInputButtonProps
+	extends Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> {
 	/** Icon to be included*/
 	icon?: IDynamicIconProps
 	/** CTA label */
@@ -10,9 +11,6 @@ export interface INestedInputButtonProps {
 	align: "left" | "right"
 	/** Show the CTA without Background color and a border seperator */
 	isClear?: boolean
-	/** Onclick callback */
-	onClickHandler?(): void
-	buttonProps?: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
 }
 
 const NestedInputButton: React.FC<INestedInputButtonProps> = ({
@@ -20,12 +18,10 @@ const NestedInputButton: React.FC<INestedInputButtonProps> = ({
 	ctaLabel,
 	align = "right",
 	isClear = false,
-	onClickHandler,
-	buttonProps
+	...props
 }) => {
-	const handleClick = () => {
-		onClickHandler && onClickHandler()
-	}
+	const { ...buttonProps } = props
+	const { onClick } = buttonProps
 	const buttonStyle = cn(
 		"relative flex items-center space-x-2 px-4 py-2 leading-5 border border-gray-300 text-sm font-medium focus:outline-none focus:ring-1 focus:ring-purple-500 focus:border-purple-500",
 		{
@@ -35,10 +31,10 @@ const NestedInputButton: React.FC<INestedInputButtonProps> = ({
 			"rounded-l text-gray-500 -mr-px": align === "left"
 		},
 		{
-			"cursor-default": !onClickHandler
+			"cursor-default": !onClick
 		},
 		{
-			"hover:bg-gray-100": onClickHandler && !isClear
+			"hover:bg-gray-100": onClick && !isClear
 		},
 		{
 			"!border-l-white": isClear && align === "right"
@@ -54,7 +50,16 @@ const NestedInputButton: React.FC<INestedInputButtonProps> = ({
 		}
 	)
 	return (
-		<button {...{ ...buttonProps, className: buttonStyle, onClick: handleClick }}>
+		<button
+			{...{
+				...buttonProps,
+				className: buttonStyle,
+				onClick: (e) => {
+					e.preventDefault()
+					onClick && onClick(e)
+				}
+			}}
+		>
 			{icon && <DynamicIcon {...{ ...icon, className: "text-gray-400 h-5 w-5" }} />}
 			{ctaLabel && <span>{ctaLabel}</span>}
 		</button>

package/stories/organisms/AnimatedFormInputWithAddons/AnimatedFormInputWithAddons.stories.tsx

@@ -23,7 +23,7 @@ const DefaultArgs: IAnimatedFormInputWithAddons = {
 		icon: { icon: "IconPencil" },
 		align: "right",
 		ctaLabel: "Edit",
-		onClickHandler: () => {
+		onClick: () => {
 			alert("clicked")
 		}
 	}