@zohodesk/components 1.0.0-temp-256.1 → 1.0.0-temp-259.1

package/es/Textarea/Textarea.js

@@ -117,11 +117,4 @@ export default class Textarea extends React.Component {
 
 }
 Textarea.defaultProps = defaultProps;
-Textarea.propTypes = propTypes; // if (__DOCS__) {
-//   Textarea.docs = {
-//     componentGroup: 'Form Elements',
-//     folderName: 'Style Guide',
-//     external: true,
-//     description: ' '
-//   };
-// }
+Textarea.propTypes = propTypes;

package/es/Tooltip/Tooltip.js

@@ -521,11 +521,4 @@ export default class Tooltip extends React.Component {
 
 }
 Tooltip.propTypes = propTypes;
-Tooltip.defaultProps = defaultProps; // if (__DOCS__) {
-//   Tooltip.docs = {
-//     componentGroup: 'Atom',
-//     folderName: 'Style Guide',
-//     description: ' ',
-//     external: true
-//   };
-// }
+Tooltip.defaultProps = defaultProps;

package/es/VelocityAnimation/VelocityAnimation/VelocityAnimation.js

@@ -70,8 +70,4 @@ export default class VelocityAnimation extends React.Component {
 }
 VelocityAnimation.defaultProps = defaultProps;
 VelocityAnimation.propTypes = propTypes;
-VelocityAnimation.contextType = LibraryContext; // if (__DOCS__) {
-//   VelocityAnimation.docs = {
-//     componentGroup: 'Animation'
-//   };
-// }
+VelocityAnimation.contextType = LibraryContext;

package/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js

@@ -137,8 +137,4 @@ VelocityAnimationGroup.defaultProps = { ...defaultProps,
   component: React.Fragment
 };
 VelocityAnimationGroup.propTypes = propTypes;
-VelocityAnimationGroup.contextType = LibraryContext; // if (__DOCS__) {
-//   VelocityAnimationGroup.docs = {
-//     componentGroup: 'Animation'
-//   };
-// }
+VelocityAnimationGroup.contextType = LibraryContext;

package/es/semantic/Button/Button.js

@@ -53,9 +53,4 @@ export default class Button extends React.Component {
 
 }
 Button.defaultProps = defaultProps;
-Button.propTypes = propTypes; // if (__DOCS__) {
-//   Button.docs = {
-//     componentGroup: 'semantic',
-//     folderName: 'DefaultComponents'
-//   };
-// }
+Button.propTypes = propTypes;

package/es/shared/ArrowIcon/__tests__/__snapshots__/ArrowIcon.spec.js.snap

@@ -4,7 +4,7 @@ exports[`ArrowIcon Should be render isActive is true 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="inlineFlex column alignItems_center justifyContent_center arrowIcon active"
+    class="d-inline-flex d-flex-col d-items-center d-justify-center arrowIcon active"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"
@@ -25,7 +25,7 @@ exports[`ArrowIcon Should be render isDisabled is true 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="inlineFlex column alignItems_center justifyContent_center arrowIcon disabled"
+    class="d-inline-flex d-flex-col d-items-center d-justify-center arrowIcon disabled"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"
@@ -46,7 +46,7 @@ exports[`ArrowIcon Should be render isReadOnly is true 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="inlineFlex column alignItems_center justifyContent_center arrowIcon readonly"
+    class="d-inline-flex d-flex-col d-items-center d-justify-center arrowIcon readonly"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"
@@ -67,7 +67,7 @@ exports[`ArrowIcon Should be render isRotated is true 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="inlineFlex column alignItems_center justifyContent_center arrowIcon rotated"
+    class="d-inline-flex d-flex-col d-items-center d-justify-center arrowIcon rotated"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"
@@ -88,7 +88,7 @@ exports[`ArrowIcon Should be render with a11yAttributes 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
+    class="d-inline-flex d-flex-col d-items-center d-justify-center arrowIcon"
     data-a11y-focus="true"
     data-id="undefined_downIcon"
     data-selector-id="container"
@@ -110,7 +110,7 @@ exports[`ArrowIcon Should be render with customClass 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="inlineFlex column alignItems_center justifyContent_center arrowIcon arrowIcon_containerClass"
+    class="d-inline-flex d-flex-col d-items-center d-justify-center arrowIcon arrowIcon_containerClass"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"
@@ -131,7 +131,7 @@ exports[`ArrowIcon Should be render with customProps 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
+    class="d-inline-flex d-flex-col d-items-center d-justify-center arrowIcon"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="hereIsTestId"
@@ -152,7 +152,7 @@ exports[`ArrowIcon Should be render with dataId 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
+    class="d-inline-flex d-flex-col d-items-center d-justify-center arrowIcon"
     data-id="ArrowIcon-test-dataId_downIcon"
     data-selector-id="container"
     data-test-id="ArrowIcon-test-dataId_downIcon"
@@ -181,7 +181,7 @@ exports[`ArrowIcon Should be render with tagAttributes 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
+    class="d-inline-flex d-flex-col d-items-center d-justify-center arrowIcon"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"
@@ -203,7 +203,7 @@ exports[`ArrowIcon rendering the defult props 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
+    class="d-inline-flex d-flex-col d-items-center d-justify-center arrowIcon"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"

package/es/shared/InputFieldLine/__tests__/__snapshots__/InputFieldLine.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`InputFieldLine Should be render hasEffect is false 1`] = `
 <DocumentFragment>
   <div
-    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
+    class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -13,7 +13,7 @@ exports[`InputFieldLine Should be render hasEffect is false 1`] = `
 exports[`InputFieldLine Should be render hasPadding is true 1`] = `
 <DocumentFragment>
   <div
-    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
+    class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -23,7 +23,7 @@ exports[`InputFieldLine Should be render hasPadding is true 1`] = `
 exports[`InputFieldLine Should be render isActive is true 1`] = `
 <DocumentFragment>
   <div
-    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder active"
+    class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder active"
     data-selector-id="container"
     data-title=""
   />
@@ -33,7 +33,7 @@ exports[`InputFieldLine Should be render isActive is true 1`] = `
 exports[`InputFieldLine Should be render isDisabled is true 1`] = `
 <DocumentFragment>
   <div
-    class="flex row varClass customContainer border_bottom disabled borderColor_default hasBorder"
+    class="d-flex d-flex-row varClass customContainer border_bottom disabled borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -43,7 +43,7 @@ exports[`InputFieldLine Should be render isDisabled is true 1`] = `
 exports[`InputFieldLine Should be render isReadOnly is true 1`] = `
 <DocumentFragment>
   <div
-    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
+    class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -53,7 +53,7 @@ exports[`InputFieldLine Should be render isReadOnly is true 1`] = `
 exports[`InputFieldLine Should be render with title 1`] = `
 <DocumentFragment>
   <div
-    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
+    class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title="InputFieldLine Test Title"
   />
@@ -63,7 +63,7 @@ exports[`InputFieldLine Should be render with title 1`] = `
 exports[`InputFieldLine Should render border - all 1`] = `
 <DocumentFragment>
   <div
-    class="flex row varClass customContainer border_all effect borderColor_default hasBorder"
+    class="d-flex d-flex-row varClass customContainer border_all effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -73,7 +73,7 @@ exports[`InputFieldLine Should render border - all 1`] = `
 exports[`InputFieldLine Should render border - bottom 1`] = `
 <DocumentFragment>
   <div
-    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
+    class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -83,7 +83,7 @@ exports[`InputFieldLine Should render border - bottom 1`] = `
 exports[`InputFieldLine Should render border - none 1`] = `
 <DocumentFragment>
   <div
-    class="flex row varClass customContainer effect"
+    class="d-flex d-flex-row varClass customContainer effect"
     data-selector-id="container"
     data-title=""
   />
@@ -93,7 +93,7 @@ exports[`InputFieldLine Should render border - none 1`] = `
 exports[`InputFieldLine Should render borderColor - dark 1`] = `
 <DocumentFragment>
   <div
-    class="flex row varClass customContainer border_bottom effect borderColor_dark hasBorder"
+    class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_dark hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -103,7 +103,7 @@ exports[`InputFieldLine Should render borderColor - dark 1`] = `
 exports[`InputFieldLine Should render borderColor - default 1`] = `
 <DocumentFragment>
   <div
-    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
+    class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -113,7 +113,7 @@ exports[`InputFieldLine Should render borderColor - default 1`] = `
 exports[`InputFieldLine Should render borderColor - error 1`] = `
 <DocumentFragment>
   <div
-    class="flex row varClass customContainer border_bottom effect borderColor_error hasBorder"
+    class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_error hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -123,7 +123,7 @@ exports[`InputFieldLine Should render borderColor - error 1`] = `
 exports[`InputFieldLine Should render borderColor - transparent 1`] = `
 <DocumentFragment>
   <div
-    class="flex row varClass customContainer border_bottom effect borderColor_transparent hasBorder"
+    class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_transparent hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -133,7 +133,7 @@ exports[`InputFieldLine Should render borderColor - transparent 1`] = `
 exports[`InputFieldLine Should render customClass 1`] = `
 <DocumentFragment>
   <div
-    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder inputFieldLine-custom-class"
+    class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder inputFieldLine-custom-class"
     data-selector-id="container"
     data-title=""
   />
@@ -143,7 +143,7 @@ exports[`InputFieldLine Should render customClass 1`] = `
 exports[`InputFieldLine Should render customProps 1`] = `
 <DocumentFragment>
   <div
-    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
+    class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-test="inputFieldLine-test"
     data-title=""
@@ -154,7 +154,7 @@ exports[`InputFieldLine Should render customProps 1`] = `
 exports[`InputFieldLine Should render dataId 1`] = `
 <DocumentFragment>
   <div
-    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
+    class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder"
     data-id="inputFieldLine-test-id"
     data-selector-id="container"
     data-test-id="inputFieldLine-test-id"
@@ -166,7 +166,7 @@ exports[`InputFieldLine Should render dataId 1`] = `
 exports[`InputFieldLine Should render size  - medium 1`] = `
 <DocumentFragment>
   <div
-    class="flex row scroll_vertical varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder"
+    class="d-flex d-flex-row d-overflow-y-auto d-overflow-x-hidden varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -176,7 +176,7 @@ exports[`InputFieldLine Should render size  - medium 1`] = `
 exports[`InputFieldLine Should render size  - xmedium 1`] = `
 <DocumentFragment>
   <div
-    class="flex row scroll_vertical varClass customContainer xmedium padding_xmedium border_bottom effect borderColor_default hasBorder"
+    class="d-flex d-flex-row d-overflow-y-auto d-overflow-x-hidden varClass customContainer xmedium padding_xmedium border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -186,7 +186,7 @@ exports[`InputFieldLine Should render size  - xmedium 1`] = `
 exports[`InputFieldLine rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
+    class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />

package/es/v1/Button/Button.js

@@ -6,31 +6,32 @@ import React, { forwardRef, memo, useMemo } from 'react';
 import { withComponentRegistrar } from '@zohodesk/dotkit/es/react/ComponentRegistry';
 import Icon from '@zohodesk/icons/es/Icon';
 import Flex from '@zohodesk/layout/es/Flex/Flex';
-import Typography from "../../Typography/Typography";
 import { isRenderable } from '@zohodesk/utils/es/renderNode';
 import renderNode from '@zohodesk/utils/es/renderNode';
-import propTypes from "./props/propTypes";
-import defaultProps from "./props/defaultProps";
 import { DUMMY_OBJECT } from '@zohodesk/dotkit/es/utils/constants';
 import { ICON_PLACEMENT, LOADER_PLACEMENT, STATUS, TYPOGRAPHY_SIZE_MAP, VARIANT } from "./constants";
-import Loader from "../shared/Loader/Loader";
+import Typography from "../../Typography/Typography";
+import Spinner from "../shared/Spinner/Spinner";
 import SuccessTick from "../shared/SuccessTick/SuccessTick";
 import cssJSLogic from "./css/cssJSLogic";
+import propTypes from "./props/propTypes";
+import defaultProps from "./props/defaultProps";
 
 const getTypographySize = size => TYPOGRAPHY_SIZE_MAP[size] || '13';
 
-const Button = /*#__PURE__*/forwardRef(function Button(props, ref) {
+export const ButtonPresentational = /*#__PURE__*/forwardRef(function ButtonPresentational(props, ref) {
   const {
-    palette,
-    bgAppearance,
-    borderAppearance,
+    isLoading,
+    isSuccess,
+    isDisabled,
+    isDisabledState,
+    overlayActive,
     variant,
-    status,
+    iconPlacement,
     loaderPlacement,
     size,
     iconName,
     iconSize,
-    iconPlacement,
     renderIcon,
     renderBefore,
     renderAfter,
@@ -38,104 +39,87 @@ const Button = /*#__PURE__*/forwardRef(function Button(props, ref) {
     renderSuccess,
     children,
     type,
-    onClick,
-    isDisabled,
-    isReadOnly,
     isSelected,
-    shape,
-    paletteShade,
-    disabledAppearance,
     title,
     customProps,
     customAttributes,
     a11yAttributes,
     customId,
-    testId
+    testId,
+    dataSelectorId,
+    handleClick,
+    classNames
   } = props;
-  const isLoading = status === STATUS.LOADING;
-  const isSuccess = status === STATUS.SUCCESS;
-  const isDisabledState = isDisabled || isLoading;
-  const isInteractionDisabled = isDisabledState || isReadOnly;
-  const overlayActive = (isLoading || isSuccess) && loaderPlacement === LOADER_PLACEMENT.OVERLAY;
-  const {
-    text: contentProps = DUMMY_OBJECT,
-    icon: iconProps = DUMMY_OBJECT
-  } = customProps;
-  const iconTagAttributes = useMemo(() => ({ ...(iconProps.tagAttributes || DUMMY_OBJECT),
-    'data-test-id': testId ? `${testId}_icon` : undefined
-  }), [iconProps.tagAttributes, testId]);
-  const classes = useMemo(() => cssJSLogic({
-    props
-  }), [palette, bgAppearance, borderAppearance, paletteShade, size, variant, status, isDisabled, isReadOnly, isSelected, shape, loaderPlacement, disabledAppearance, props.customClass]);
   const {
     loaderOverlayClass,
     successOverlayClass,
     contentWrapperClass,
     textClassName,
     buttonClassName,
-    iconClassName
-  } = classes;
-  const showIcon = variant !== VARIANT.TEXT && (renderIcon || iconName);
-
-  const _handleClick = event => {
-    if (isInteractionDisabled) {
-      return;
-    }
-
-    onClick(event);
+    iconClassName,
+    loaderClassName,
+    successClassName
+  } = classNames;
+  const {
+    text: contentProps = DUMMY_OBJECT,
+    icon: iconProps = DUMMY_OBJECT
+  } = customProps || DUMMY_OBJECT;
+  const {
+    button: buttonAttributes = DUMMY_OBJECT,
+    contentWrapper: contentWrapperAttributes = DUMMY_OBJECT,
+    loader: loaderAttributes = DUMMY_OBJECT,
+    success: successAttributes = DUMMY_OBJECT,
+    icon: iconAttributes = DUMMY_OBJECT,
+    text: textAttributes = DUMMY_OBJECT
+  } = customAttributes || DUMMY_OBJECT;
+  const iconTagAttributes = { ...iconAttributes,
+    'data-test-id': testId ? `${testId}_icon` : undefined
   };
+  const showIcon = variant !== VARIANT.TEXT && (renderIcon || iconName);
 
   const _renderLoader = () => {
-    if (!isLoading) {
-      return null;
-    }
-
-    if (isRenderable(renderLoader)) {
-      return renderNode(renderLoader, {
-        status
-      });
-    }
-
-    const loaderClassName = loaderPlacement === LOADER_PLACEMENT.OVERLAY ? loaderOverlayClass : '';
-    return /*#__PURE__*/React.createElement(Flex, {
+    if (!isLoading) return null;
+    const isOverlay = loaderPlacement === LOADER_PLACEMENT.OVERLAY;
+    const hasCustomLoader = isRenderable(renderLoader);
+    if (hasCustomLoader && !isOverlay) return renderNode(renderLoader, {
+      status: STATUS.LOADING
+    });
+    return /*#__PURE__*/React.createElement(Flex, _extends({
       $ui_displayMode: "flex",
       $ui_alignItems: "center",
       $ui_justifyContent: "center",
-      $ui_className: loaderClassName,
+      $ui_className: isOverlay ? loaderOverlayClass : '',
       testId: testId ? `${testId}_loader` : undefined
-    }, /*#__PURE__*/React.createElement(Loader, null));
+    }, hasCustomLoader ? undefined : loaderAttributes), hasCustomLoader ? renderNode(renderLoader, {
+      status: STATUS.LOADING
+    }) : /*#__PURE__*/React.createElement(Spinner, {
+      customClass: loaderClassName
+    }));
   };
 
   const _renderSuccess = () => {
-    if (!isSuccess) {
-      return null;
-    }
-
-    if (isRenderable(renderSuccess)) {
-      return renderNode(renderSuccess, {
-        status
-      });
-    }
-
-    const successClassName = loaderPlacement === LOADER_PLACEMENT.OVERLAY ? successOverlayClass : '';
-    return /*#__PURE__*/React.createElement(Flex, {
+    if (!isSuccess) return null;
+    const isOverlay = loaderPlacement === LOADER_PLACEMENT.OVERLAY;
+    const hasCustomSuccess = isRenderable(renderSuccess);
+    if (hasCustomSuccess && !isOverlay) return renderNode(renderSuccess, {
+      status: STATUS.SUCCESS
+    });
+    return /*#__PURE__*/React.createElement(Flex, _extends({
       $ui_displayMode: "flex",
       $ui_alignItems: "center",
       $ui_justifyContent: "center",
-      $ui_className: successClassName,
+      $ui_className: isOverlay ? successOverlayClass : '',
       testId: testId ? `${testId}_success` : undefined
-    }, /*#__PURE__*/React.createElement(SuccessTick, null));
+    }, hasCustomSuccess ? undefined : successAttributes), hasCustomSuccess ? renderNode(renderSuccess, {
+      status: STATUS.SUCCESS
+    }) : /*#__PURE__*/React.createElement(SuccessTick, {
+      customClass: successClassName
+    }));
   };
 
   const _renderIconNode = () => {
-    if (!showIcon) {
-      return null;
-    }
-
-    if (isRenderable(renderIcon)) {
-      return renderNode(renderIcon);
-    }
-
+    if (!showIcon) return null;
+    if (isRenderable(renderIcon)) return renderNode(renderIcon);
     return /*#__PURE__*/React.createElement(Icon, _extends({}, iconProps, {
       iconClass: iconClassName,
       name: iconName,
@@ -145,58 +129,126 @@ const Button = /*#__PURE__*/forwardRef(function Button(props, ref) {
     }));
   };
 
-  const _renderBeforeNode = () => {
-    if (!isRenderable(renderBefore)) {
-      return null;
-    }
-
-    return renderNode(renderBefore, props);
-  };
-
-  const _renderAfterNode = () => {
-    if (!isRenderable(renderAfter)) {
-      return null;
-    }
-
-    return renderNode(renderAfter, props);
-  };
-
   const _renderContent = () => {
-    const shouldShowText = variant !== VARIANT.ICON && children !== undefined && children !== null;
+    const shouldShowText = variant !== VARIANT.ICON && children != null && (typeof children !== 'string' || children.trim() !== '');
     const showLoaderStart = isLoading && loaderPlacement === LOADER_PLACEMENT.START;
     const showLoaderAfter = isLoading && loaderPlacement === LOADER_PLACEMENT.END;
     const showSuccessStart = isSuccess && loaderPlacement === LOADER_PLACEMENT.START;
     const showSuccessAfter = isSuccess && loaderPlacement === LOADER_PLACEMENT.END;
-    return /*#__PURE__*/React.createElement(Flex, {
+    return /*#__PURE__*/React.createElement(Flex, _extends({
       $ui_displayMode: "flex",
       $ui_direction: "row",
       $flag_shrink: true,
       $ui_alignItems: "center",
       $ui_justifyContent: "center",
       $ui_className: contentWrapperClass
-    }, showLoaderStart ? _renderLoader() : null, showSuccessStart ? _renderSuccess() : null, _renderBeforeNode(), iconPlacement === ICON_PLACEMENT.LEFT ? _renderIconNode() : null, shouldShowText ? /*#__PURE__*/React.createElement(Typography, _extends({}, contentProps, {
+    }, contentWrapperAttributes), showLoaderStart ? _renderLoader() : null, showSuccessStart ? _renderSuccess() : null, isRenderable(renderBefore) ? renderNode(renderBefore, props) : null, iconPlacement === ICON_PLACEMENT.LEFT ? _renderIconNode() : null, shouldShowText ? typeof children === 'string' ? /*#__PURE__*/React.createElement(Typography, _extends({
+      $ui_size: getTypographySize(size)
+    }, contentProps, {
+      tagAttributes: textAttributes,
       $ui_className: textClassName,
-      $ui_size: getTypographySize(size),
       $flag_dotted: variant !== VARIANT.ICON
-    }), children) : null, iconPlacement === ICON_PLACEMENT.RIGHT ? _renderIconNode() : null, _renderAfterNode(), showLoaderAfter ? _renderLoader() : null, showSuccessAfter ? _renderSuccess() : null);
+    }), children) : children : null, iconPlacement === ICON_PLACEMENT.RIGHT ? _renderIconNode() : null, isRenderable(renderAfter) ? renderNode(renderAfter, props) : null, showLoaderAfter ? _renderLoader() : null, showSuccessAfter ? _renderSuccess() : null);
   };
 
-  const containerAttributes = { ...customAttributes,
-    'data-id': customId,
-    'data-test-id': testId,
+  const containerAttributes = { ...buttonAttributes,
+    'data-id': isDisabled ? `${customId}_disabled` : customId,
+    'data-test-id': isDisabled ? `${testId}_disabled` : testId,
+    'data-selector-id': dataSelectorId,
     'data-title': title
   };
-  return /*#__PURE__*/React.createElement("button", _extends({}, containerAttributes, a11yAttributes, {
+  return /*#__PURE__*/React.createElement("button", _extends({}, containerAttributes, {
+    "aria-busy": isLoading,
+    disabled: isDisabledState,
+    "aria-pressed": isSelected
+  }, a11yAttributes, {
     ref: ref,
     type: type,
     className: cn(buttonClassName),
-    "aria-busy": isLoading,
-    "aria-disabled": isDisabledState,
-    "aria-readonly": isReadOnly,
-    "aria-pressed": isSelected,
-    onClick: _handleClick
+    onClick: handleClick
   }), _renderContent(), overlayActive ? isLoading ? _renderLoader() : _renderSuccess() : null);
 });
+ButtonPresentational.displayName = 'ButtonPresentational';
+const Button = /*#__PURE__*/forwardRef(function Button(props, ref) {
+  const {
+    palette,
+    appearance,
+    hoverAppearance,
+    selectedAppearance,
+    variant,
+    status,
+    loaderPlacement,
+    size,
+    iconName,
+    iconSize,
+    iconPlacement,
+    renderIcon,
+    renderBefore,
+    renderAfter,
+    renderLoader,
+    renderSuccess,
+    children,
+    type,
+    onClick,
+    isDisabled,
+    isSelected,
+    shape,
+    disabledAppearance,
+    title,
+    customProps,
+    customAttributes,
+    a11yAttributes,
+    customId,
+    testId,
+    dataSelectorId
+  } = props;
+  const isLoading = status === STATUS.LOADING;
+  const isSuccess = status === STATUS.SUCCESS;
+  const isDisabledState = isDisabled || isLoading;
+  const overlayActive = (isLoading || isSuccess) && loaderPlacement === LOADER_PLACEMENT.OVERLAY;
+  const classNames = useMemo(() => cssJSLogic({
+    props
+  }), [palette, appearance, hoverAppearance, selectedAppearance, size, variant, status, isDisabled, isSelected, shape, loaderPlacement, disabledAppearance, props.customClass]);
+
+  const handleClick = event => {
+    if (isDisabledState) return;
+    onClick(event);
+  };
+
+  const essentials = {
+    isLoading,
+    isSuccess,
+    isDisabled,
+    isDisabledState,
+    overlayActive,
+    variant,
+    iconPlacement,
+    loaderPlacement,
+    size,
+    iconName,
+    iconSize,
+    renderIcon,
+    renderBefore,
+    renderAfter,
+    renderLoader,
+    renderSuccess,
+    children,
+    type,
+    isSelected,
+    title,
+    customProps,
+    customAttributes,
+    a11yAttributes,
+    customId,
+    testId,
+    dataSelectorId,
+    handleClick
+  };
+  return /*#__PURE__*/React.createElement(ButtonPresentational, _extends({}, essentials, {
+    classNames: classNames,
+    ref: ref
+  }));
+});
 Button.propTypes = propTypes;
 Button.defaultProps = defaultProps;
 Button.displayName = 'Button';