widenarrow-ui 1.0.25 → 1.0.26

package/lib/components/IconButton/IconButton.types.d.ts

@@ -1,13 +1,15 @@
-import { MouseEvent } from 'react';
+import { MouseEvent, CSSProperties } from 'react';
 import { IconStyleInterface, SizeStyleInterface } from '../../types/styling.types';
 import { ColorTypes, HierarchyTypes, SizeTypes } from '../../constants';
 export interface IconButtonProps extends IconStyleInterface, SizeStyleInterface {
     className?: string;
     rotateIcon?: boolean;
+    id?: string | number;
     rotateIconByDegree?: 0 | 45 | 90 | 135 | 180 | 225 | 270 | 315;
     iconClassName?: string;
     type?: HierarchyTypes.PRIMARY | HierarchyTypes.SECONDARY;
     onClickCallback?: (e: MouseEvent<HTMLButtonElement>) => void;
+    style?: CSSProperties;
     iconSize?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
     iconColor?: Partial<ColorTypes>;
     href?: string;

package/lib/index.d.ts

@@ -562,10 +562,12 @@ declare const Icon: FC<IconProps>;
 interface IconButtonProps extends IconStyleInterface, SizeStyleInterface {
     className?: string;
     rotateIcon?: boolean;
+    id?: string | number;
     rotateIconByDegree?: 0 | 45 | 90 | 135 | 180 | 225 | 270 | 315;
     iconClassName?: string;
     type?: HierarchyTypes.PRIMARY | HierarchyTypes.SECONDARY;
     onClickCallback?: (e: MouseEvent<HTMLButtonElement>) => void;
+    style?: CSSProperties;
     iconSize?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
     iconColor?: Partial<ColorTypes>;
     href?: string;

package/lib/index.esm.js

@@ -2095,7 +2095,7 @@ var Button = memo(function (_a) {
             className: mergedClassNames,
             id: id,
             disabled: loading || disabled,
-            onClickCallback: !!onClickCallback && !loading ? onClickCallback : undefined
+            onClick: !!onClickCallback && !loading ? onClickCallback : undefined
         },
         _c['aria-label'] = ariaLabel || text,
         _c.style = style,
@@ -2570,9 +2570,9 @@ var styles$9 = {"body":"IconButton-module_DV09bK","container":"IconButton-module
 
 var s$9 = classNames.bind(styles$9);
 var IconButton = memo(function (_a) {
-    var _b;
-    var className = _a.className, disabled = _a.disabled, icon = _a.icon, size = _a.size, _c = _a.type, type = _c === void 0 ? HierarchyTypes.SECONDARY : _c, href = _a.href, iconColor = _a.iconColor, iconSize = _a.iconSize, iconClassName = _a.iconClassName, onClickCallback = _a.onClickCallback, rotateIcon = _a.rotateIcon, rotateIconByDegree = _a.rotateIconByDegree, toolTip = _a.toolTip, ariaLabel = _a.ariaLabel;
-    var BUTTON_CLASSES = s$9('container', (_b = {
+    var _b, _c;
+    var className = _a.className, disabled = _a.disabled, style = _a.style, icon = _a.icon, id = _a.id, size = _a.size, _d = _a.type, type = _d === void 0 ? HierarchyTypes.SECONDARY : _d, href = _a.href, iconColor = _a.iconColor, iconSize = _a.iconSize, iconClassName = _a.iconClassName, onClickCallback = _a.onClickCallback, rotateIcon = _a.rotateIcon, rotateIconByDegree = _a.rotateIconByDegree, toolTip = _a.toolTip, ariaLabel = _a.ariaLabel;
+    var mergedClassNames = s$9('container', (_b = {
             container_primary: type === HierarchyTypes.PRIMARY,
             container_secondary: type === HierarchyTypes.SECONDARY,
             container_small: size === SizeTypes.SMALL,
@@ -2582,25 +2582,28 @@ var IconButton = memo(function (_a) {
         },
         _b[className] = className,
         _b));
-    var onClicked = function (event) {
-        if (event) {
-            event.stopPropagation();
-        }
-        if (onClickCallback) {
-            onClickCallback(event);
-        }
-    };
-    var getInnerMarkup = function () {
-        return icon && (jsx(Icon, { color: iconColor, icon: icon, size: iconSize || SizeTypes.AUTO, className: iconClassName, rotateIcon: rotateIcon, rotateIconByDegree: rotateIconByDegree }));
-    };
+    var iconMarkup = icon ? (jsx(Icon, { color: iconColor, icon: icon, size: iconSize || SizeTypes.AUTO, className: iconClassName, rotateIcon: rotateIcon, rotateIconByDegree: rotateIconByDegree })) : null;
+    var baseAttributes = (_c = {
+            className: mergedClassNames,
+            id: id,
+            disabled: disabled,
+            onClick: !!onClickCallback ? onClickCallback : undefined
+        },
+        _c['aria-label'] = ariaLabel,
+        _c.style = style,
+        _c.href = href,
+        _c.target = href ? '_blank' : undefined,
+        _c.rel = href ? 'noopener noreferrer' : undefined,
+        _c);
+    var buttonAttributes = pickBy(function (val) { return val !== undefined; }, baseAttributes);
     var buttonMarkup = function () {
         if (href) {
-            return (jsx("a", __assign({ className: BUTTON_CLASSES, href: href, target: '_BLANK', rel: "noopener noreferrer" }, { children: getInnerMarkup() })));
+            return jsx("a", __assign({}, buttonAttributes, { children: iconMarkup }));
         }
-        return (jsx("button", __assign({ onClick: onClicked, className: BUTTON_CLASSES, "aria-label": ariaLabel || toolTip }, { children: getInnerMarkup() })));
+        return jsx("button", __assign({}, buttonAttributes, { children: iconMarkup }));
     };
     if (toolTip) {
-        return (jsx(ToolTip, __assign({ text: "".concat(toolTip), offset: 16 }, { children: buttonMarkup() })));
+        return (jsx(ToolTip, __assign({ text: "".concat(toolTip), id: id ? "".concat(id) : undefined, offset: 16 }, { children: buttonMarkup() })));
     }
     return buttonMarkup();
 });
@@ -2704,7 +2707,7 @@ var InlineButton = memo(function (_a) {
             className: mergedClassNames,
             id: id,
             disabled: loading || disabled,
-            onClickCallback: !!onClickCallback && !loading ? onClickCallback : undefined
+            onClick: !!onClickCallback && !loading ? onClickCallback : undefined
         },
         _c['aria-label'] = ariaLabel || text,
         _c.style = style,