@zohodesk/components 1.0.0-temp-259.2 → 1.0.0-temp-260

package/lib/AdvancedPopup/AdvancedPopup.js

@@ -0,0 +1,122 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _useAdvancedPopup2 = require("@zohodesk/dotkit/es/react/components/Popup/hooks/useAdvancedPopup.js");
+
+var _Config = require("../Provider/Config.js");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var AdvancedPopup = function AdvancedPopup(PopupComponent) {
+  var wrapper = function wrapper(props) {
+    var positionMetaRef = (0, _react.useRef)(null);
+    var triggerMetaRef = (0, _react.useRef)(null);
+    var initialPlacementRef = (0, _react.useRef)(props.defaultPosition);
+
+    var getRootElement = function getRootElement() {
+      return (0, _Config.getLibraryConfig)('getRootElement');
+    };
+
+    var getMobileWidth = function getMobileWidth() {
+      return (0, _Config.getLibraryConfig)('mobileWidth');
+    };
+
+    var isArrow = props.isArrow,
+        defaultPosition = props.defaultPosition,
+        customOrder = props.customOrder,
+        isAbsolutePositioningNeeded = props.isAbsolutePositioningNeeded,
+        isOutsideScrollBlocked = props.isOutsideScrollBlocked,
+        sizeModifiers = props.sizeModifiers,
+        checkBeforeClose = props.checkBeforeClose,
+        scrollDebounceTime = props.scrollDebounceTime,
+        needResizeHandling = props.needResizeHandling,
+        popupGroup = props.popupGroup;
+
+    var _useAdvancedPopup = (0, _useAdvancedPopup2.useAdvancedPopup)({
+      strategy: isAbsolutePositioningNeeded === false ? 'fixed' : 'absolute',
+      groupName: popupGroup,
+      checkBeforeClose: checkBeforeClose,
+      getRootElement: getRootElement,
+      scrollDebounceTime: scrollDebounceTime,
+      enableResizeHandling: needResizeHandling,
+      sizeModifiers: sizeModifiers,
+      onPositionChange: function onPositionChange(meta) {
+        positionMetaRef.current = meta;
+      },
+      onVisibilityChange: function onVisibilityChange(isVisible) {
+        triggerMetaRef.current = isVisible;
+      },
+      middleware: {
+        autoPlacement: {
+          initialPlacement: initialPlacementRef.current,
+          placementOrder: customOrder
+        },
+        arrow: {
+          isRequired: !!isArrow
+        },
+        scrollable: !isOutsideScrollBlocked,
+        applyStyles: true,
+        mobile: {
+          isEnabled: true,
+          breakpoint: getMobileWidth()
+        }
+      }
+    }),
+        setTriggerElement = _useAdvancedPopup.setTriggerElement,
+        setContainerElement = _useAdvancedPopup.setContainerElement,
+        _togglePopup = _useAdvancedPopup.togglePopup,
+        _openPopupOnly = _useAdvancedPopup.openPopupOnly,
+        closePopupOnly = _useAdvancedPopup.closePopupOnly,
+        closePopupFromRange = _useAdvancedPopup.closePopupFromRange,
+        isPopupOpen = _useAdvancedPopup.isPopupOpen,
+        isPopupReady = _useAdvancedPopup.isPopupReady,
+        removeClose = _useAdvancedPopup.removeClose,
+        recomputePosition = _useAdvancedPopup.recomputePosition,
+        isMobile = _useAdvancedPopup.isMobile,
+        position = _useAdvancedPopup.position;
+
+    return /*#__PURE__*/_react["default"].createElement(PopupComponent, _extends({}, props, {
+      getTargetRef: setTriggerElement,
+      getContainerRef: setContainerElement,
+      togglePopup: function togglePopup(e, initialPlacement) {
+        initialPlacementRef.current = initialPlacement;
+
+        _togglePopup(e);
+      },
+      openPopupOnly: function openPopupOnly(e, initialPlacement) {
+        initialPlacementRef.current = initialPlacement;
+
+        _openPopupOnly(e);
+      },
+      closePopupOnly: closePopupOnly,
+      closePopupFromRange: closePopupFromRange,
+      removeClose: removeClose,
+      recomputePosition: recomputePosition,
+      isMobile: isMobile,
+      position: position === null || position === void 0 ? void 0 : position.view,
+      positions: position === null || position === void 0 ? void 0 : position.views,
+      positionsOffset: position === null || position === void 0 ? void 0 : position.viewsOffset,
+      targetOffset: position === null || position === void 0 ? void 0 : position.targetOffset,
+      popupOffset: position === null || position === void 0 ? void 0 : position.popupOffset,
+      isPopupOpen: isPopupOpen,
+      isPopupReady: isPopupReady
+    }));
+  };
+
+  return wrapper;
+};
+
+var _default = AdvancedPopup;
+exports["default"] = _default;

package/lib/v1/Button/Button.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.ButtonPresentational = void 0;
+exports["default"] = void 0;
 
 var _cssUtility = require("@dot-system/css-utility");
 
@@ -17,24 +17,24 @@ var _Icon = _interopRequireDefault(require("@zohodesk/icons/es/Icon"));
 
 var _Flex = _interopRequireDefault(require("@zohodesk/layout/es/Flex/Flex"));
 
+var _Typography = _interopRequireDefault(require("../../Typography/Typography"));
+
 var _renderNode = _interopRequireWildcard(require("@zohodesk/utils/es/renderNode"));
 
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
 var _constants = require("@zohodesk/dotkit/es/utils/constants");
 
 var _constants2 = require("./constants");
 
-var _Typography = _interopRequireDefault(require("../../Typography/Typography"));
-
 var _Spinner = _interopRequireDefault(require("../shared/Spinner/Spinner"));
 
 var _SuccessTick = _interopRequireDefault(require("../shared/SuccessTick/SuccessTick"));
 
 var _cssJSLogic = _interopRequireDefault(require("./css/cssJSLogic"));
 
-var _propTypes = _interopRequireDefault(require("./props/propTypes"));
-
-var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -53,18 +53,17 @@ var getTypographySize = function getTypographySize(size) {
   return _constants2.TYPOGRAPHY_SIZE_MAP[size] || '13';
 };
 
-var ButtonPresentational = /*#__PURE__*/(0, _react.forwardRef)(function ButtonPresentational(props, ref) {
-  var isLoading = props.isLoading,
-      isSuccess = props.isSuccess,
-      isDisabled = props.isDisabled,
-      isDisabledState = props.isDisabledState,
-      overlayActive = props.overlayActive,
+var Button = /*#__PURE__*/(0, _react.forwardRef)(function Button(props, ref) {
+  var palette = props.palette,
+      bgAppearance = props.bgAppearance,
+      borderAppearance = props.borderAppearance,
       variant = props.variant,
-      iconPlacement = props.iconPlacement,
+      status = props.status,
       loaderPlacement = props.loaderPlacement,
       size = props.size,
       iconName = props.iconName,
       iconSize = props.iconSize,
+      iconPlacement = props.iconPlacement,
       renderIcon = props.renderIcon,
       renderBefore = props.renderBefore,
       renderAfter = props.renderAfter,
@@ -72,94 +71,105 @@ var ButtonPresentational = /*#__PURE__*/(0, _react.forwardRef)(function ButtonPr
       renderSuccess = props.renderSuccess,
       children = props.children,
       type = props.type,
+      onClick = props.onClick,
+      isDisabled = props.isDisabled,
+      isReadOnly = props.isReadOnly,
       isSelected = props.isSelected,
+      shape = props.shape,
+      paletteShade = props.paletteShade,
+      disabledAppearance = props.disabledAppearance,
       title = props.title,
       customProps = props.customProps,
       customAttributes = props.customAttributes,
       a11yAttributes = props.a11yAttributes,
       customId = props.customId,
-      testId = props.testId,
-      dataSelectorId = props.dataSelectorId,
-      handleClick = props.handleClick,
-      classNames = props.classNames;
-  var loaderOverlayClass = classNames.loaderOverlayClass,
-      successOverlayClass = classNames.successOverlayClass,
-      contentWrapperClass = classNames.contentWrapperClass,
-      textClassName = classNames.textClassName,
-      buttonClassName = classNames.buttonClassName,
-      iconClassName = classNames.iconClassName,
-      loaderClassName = classNames.loaderClassName,
-      successClassName = classNames.successClassName;
-
-  var _ref = customProps || _constants.DUMMY_OBJECT,
-      _ref$text = _ref.text,
-      contentProps = _ref$text === void 0 ? _constants.DUMMY_OBJECT : _ref$text,
-      _ref$icon = _ref.icon,
-      iconProps = _ref$icon === void 0 ? _constants.DUMMY_OBJECT : _ref$icon;
-
-  var _ref2 = customAttributes || _constants.DUMMY_OBJECT,
-      _ref2$button = _ref2.button,
-      buttonAttributes = _ref2$button === void 0 ? _constants.DUMMY_OBJECT : _ref2$button,
-      _ref2$contentWrapper = _ref2.contentWrapper,
-      contentWrapperAttributes = _ref2$contentWrapper === void 0 ? _constants.DUMMY_OBJECT : _ref2$contentWrapper,
-      _ref2$loader = _ref2.loader,
-      loaderAttributes = _ref2$loader === void 0 ? _constants.DUMMY_OBJECT : _ref2$loader,
-      _ref2$success = _ref2.success,
-      successAttributes = _ref2$success === void 0 ? _constants.DUMMY_OBJECT : _ref2$success,
-      _ref2$icon = _ref2.icon,
-      iconAttributes = _ref2$icon === void 0 ? _constants.DUMMY_OBJECT : _ref2$icon,
-      _ref2$text = _ref2.text,
-      textAttributes = _ref2$text === void 0 ? _constants.DUMMY_OBJECT : _ref2$text;
-
-  var iconTagAttributes = _objectSpread(_objectSpread({}, iconAttributes), {}, {
-    'data-test-id': testId ? "".concat(testId, "_icon") : undefined
-  });
-
+      testId = props.testId;
+  var isLoading = status === _constants2.STATUS.LOADING;
+  var isSuccess = status === _constants2.STATUS.SUCCESS;
+  var isDisabledState = isDisabled || isLoading;
+  var isInteractionDisabled = isDisabledState || isReadOnly;
+  var overlayActive = (isLoading || isSuccess) && loaderPlacement === _constants2.LOADER_PLACEMENT.OVERLAY;
+  var _customProps$text = customProps.text,
+      contentProps = _customProps$text === void 0 ? _constants.DUMMY_OBJECT : _customProps$text,
+      _customProps$icon = customProps.icon,
+      iconProps = _customProps$icon === void 0 ? _constants.DUMMY_OBJECT : _customProps$icon;
+  var iconTagAttributes = (0, _react.useMemo)(function () {
+    return _objectSpread(_objectSpread({}, iconProps.tagAttributes || _constants.DUMMY_OBJECT), {}, {
+      'data-test-id': testId ? "".concat(testId, "_icon") : undefined
+    });
+  }, [iconProps.tagAttributes, testId]);
+  var classes = (0, _react.useMemo)(function () {
+    return (0, _cssJSLogic["default"])({
+      props: props
+    });
+  }, [palette, bgAppearance, borderAppearance, paletteShade, size, variant, status, isDisabled, isReadOnly, isSelected, shape, loaderPlacement, disabledAppearance, props.customClass]);
+  var loaderOverlayClass = classes.loaderOverlayClass,
+      successOverlayClass = classes.successOverlayClass,
+      contentWrapperClass = classes.contentWrapperClass,
+      textClassName = classes.textClassName,
+      buttonClassName = classes.buttonClassName,
+      iconClassName = classes.iconClassName;
   var showIcon = variant !== _constants2.VARIANT.TEXT && (renderIcon || iconName);
 
+  var _handleClick = function _handleClick(event) {
+    if (isInteractionDisabled) {
+      return;
+    }
+
+    onClick(event);
+  };
+
   var _renderLoader = function _renderLoader() {
-    if (!isLoading) return null;
-    var isOverlay = loaderPlacement === _constants2.LOADER_PLACEMENT.OVERLAY;
-    var hasCustomLoader = (0, _renderNode.isRenderable)(renderLoader);
-    if (hasCustomLoader && !isOverlay) return (0, _renderNode["default"])(renderLoader, {
-      status: _constants2.STATUS.LOADING
-    });
-    return /*#__PURE__*/_react["default"].createElement(_Flex["default"], _extends({
+    if (!isLoading) {
+      return null;
+    }
+
+    if ((0, _renderNode.isRenderable)(renderLoader)) {
+      return (0, _renderNode["default"])(renderLoader, {
+        status: status
+      });
+    }
+
+    var loaderClassName = loaderPlacement === _constants2.LOADER_PLACEMENT.OVERLAY ? loaderOverlayClass : '';
+    return /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
       $ui_displayMode: "flex",
       $ui_alignItems: "center",
       $ui_justifyContent: "center",
-      $ui_className: isOverlay ? loaderOverlayClass : '',
+      $ui_className: loaderClassName,
       testId: testId ? "".concat(testId, "_loader") : undefined
-    }, hasCustomLoader ? undefined : loaderAttributes), hasCustomLoader ? (0, _renderNode["default"])(renderLoader, {
-      status: _constants2.STATUS.LOADING
-    }) : /*#__PURE__*/_react["default"].createElement(_Spinner["default"], {
-      customClass: loaderClassName
-    }));
+    }, /*#__PURE__*/_react["default"].createElement(_Spinner["default"], null));
   };
 
   var _renderSuccess = function _renderSuccess() {
-    if (!isSuccess) return null;
-    var isOverlay = loaderPlacement === _constants2.LOADER_PLACEMENT.OVERLAY;
-    var hasCustomSuccess = (0, _renderNode.isRenderable)(renderSuccess);
-    if (hasCustomSuccess && !isOverlay) return (0, _renderNode["default"])(renderSuccess, {
-      status: _constants2.STATUS.SUCCESS
-    });
-    return /*#__PURE__*/_react["default"].createElement(_Flex["default"], _extends({
+    if (!isSuccess) {
+      return null;
+    }
+
+    if ((0, _renderNode.isRenderable)(renderSuccess)) {
+      return (0, _renderNode["default"])(renderSuccess, {
+        status: status
+      });
+    }
+
+    var successClassName = loaderPlacement === _constants2.LOADER_PLACEMENT.OVERLAY ? successOverlayClass : '';
+    return /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
       $ui_displayMode: "flex",
       $ui_alignItems: "center",
       $ui_justifyContent: "center",
-      $ui_className: isOverlay ? successOverlayClass : '',
+      $ui_className: successClassName,
       testId: testId ? "".concat(testId, "_success") : undefined
-    }, hasCustomSuccess ? undefined : successAttributes), hasCustomSuccess ? (0, _renderNode["default"])(renderSuccess, {
-      status: _constants2.STATUS.SUCCESS
-    }) : /*#__PURE__*/_react["default"].createElement(_SuccessTick["default"], {
-      customClass: successClassName
-    }));
+    }, /*#__PURE__*/_react["default"].createElement(_SuccessTick["default"], null));
   };
 
   var _renderIconNode = function _renderIconNode() {
-    if (!showIcon) return null;
-    if ((0, _renderNode.isRenderable)(renderIcon)) return (0, _renderNode["default"])(renderIcon);
+    if (!showIcon) {
+      return null;
+    }
+
+    if ((0, _renderNode.isRenderable)(renderIcon)) {
+      return (0, _renderNode["default"])(renderIcon);
+    }
+
     return /*#__PURE__*/_react["default"].createElement(_Icon["default"], _extends({}, iconProps, {
       iconClass: iconClassName,
       name: iconName,
@@ -169,128 +179,59 @@ var ButtonPresentational = /*#__PURE__*/(0, _react.forwardRef)(function ButtonPr
     }));
   };
 
+  var _renderBeforeNode = function _renderBeforeNode() {
+    if (!(0, _renderNode.isRenderable)(renderBefore)) {
+      return null;
+    }
+
+    return (0, _renderNode["default"])(renderBefore, props);
+  };
+
+  var _renderAfterNode = function _renderAfterNode() {
+    if (!(0, _renderNode.isRenderable)(renderAfter)) {
+      return null;
+    }
+
+    return (0, _renderNode["default"])(renderAfter, props);
+  };
+
   var _renderContent = function _renderContent() {
-    var shouldShowText = variant !== _constants2.VARIANT.ICON && children != null && (typeof children !== 'string' || children.trim() !== '');
+    var shouldShowText = variant !== _constants2.VARIANT.ICON && children !== undefined && children !== null;
     var showLoaderStart = isLoading && loaderPlacement === _constants2.LOADER_PLACEMENT.START;
     var showLoaderAfter = isLoading && loaderPlacement === _constants2.LOADER_PLACEMENT.END;
     var showSuccessStart = isSuccess && loaderPlacement === _constants2.LOADER_PLACEMENT.START;
     var showSuccessAfter = isSuccess && loaderPlacement === _constants2.LOADER_PLACEMENT.END;
-    return /*#__PURE__*/_react["default"].createElement(_Flex["default"], _extends({
+    return /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
       $ui_displayMode: "flex",
       $ui_direction: "row",
       $flag_shrink: true,
       $ui_alignItems: "center",
       $ui_justifyContent: "center",
       $ui_className: contentWrapperClass
-    }, contentWrapperAttributes), showLoaderStart ? _renderLoader() : null, showSuccessStart ? _renderSuccess() : null, (0, _renderNode.isRenderable)(renderBefore) ? (0, _renderNode["default"])(renderBefore, props) : null, iconPlacement === _constants2.ICON_PLACEMENT.LEFT ? _renderIconNode() : null, shouldShowText ? typeof children === 'string' ? /*#__PURE__*/_react["default"].createElement(_Typography["default"], _extends({
-      $ui_size: getTypographySize(size)
-    }, contentProps, {
-      tagAttributes: textAttributes,
+    }, showLoaderStart ? _renderLoader() : null, showSuccessStart ? _renderSuccess() : null, _renderBeforeNode(), iconPlacement === _constants2.ICON_PLACEMENT.LEFT ? _renderIconNode() : null, shouldShowText ? /*#__PURE__*/_react["default"].createElement(_Typography["default"], _extends({}, contentProps, {
       $ui_className: textClassName,
+      $ui_size: getTypographySize(size),
       $flag_dotted: variant !== _constants2.VARIANT.ICON
-    }), children) : children : null, iconPlacement === _constants2.ICON_PLACEMENT.RIGHT ? _renderIconNode() : null, (0, _renderNode.isRenderable)(renderAfter) ? (0, _renderNode["default"])(renderAfter, props) : null, showLoaderAfter ? _renderLoader() : null, showSuccessAfter ? _renderSuccess() : null);
+    }), children) : null, iconPlacement === _constants2.ICON_PLACEMENT.RIGHT ? _renderIconNode() : null, _renderAfterNode(), showLoaderAfter ? _renderLoader() : null, showSuccessAfter ? _renderSuccess() : null);
   };
 
-  var containerAttributes = _objectSpread(_objectSpread({}, buttonAttributes), {}, {
-    'data-id': isDisabled ? "".concat(customId, "_disabled") : customId,
-    'data-test-id': isDisabled ? "".concat(testId, "_disabled") : testId,
-    'data-selector-id': dataSelectorId,
+  var containerAttributes = _objectSpread(_objectSpread({}, customAttributes), {}, {
+    'data-id': customId,
+    'data-test-id': testId,
     'data-title': title
   });
 
-  return /*#__PURE__*/_react["default"].createElement("button", _extends({}, containerAttributes, {
-    "aria-busy": isLoading,
-    disabled: isDisabledState,
-    "aria-pressed": isSelected
-  }, a11yAttributes, {
+  return /*#__PURE__*/_react["default"].createElement("button", _extends({}, containerAttributes, a11yAttributes, {
     ref: ref,
     type: type,
     className: (0, _cssUtility.cn)(buttonClassName),
-    onClick: handleClick
+    "aria-busy": isLoading,
+    "aria-disabled": isDisabledState,
+    "aria-readonly": isReadOnly,
+    "aria-pressed": isSelected,
+    onClick: _handleClick
   }), _renderContent(), overlayActive ? isLoading ? _renderLoader() : _renderSuccess() : null);
 });
-exports.ButtonPresentational = ButtonPresentational;
-ButtonPresentational.displayName = 'ButtonPresentational';
-var Button = /*#__PURE__*/(0, _react.forwardRef)(function Button(props, ref) {
-  var palette = props.palette,
-      appearance = props.appearance,
-      hoverAppearance = props.hoverAppearance,
-      selectedAppearance = props.selectedAppearance,
-      variant = props.variant,
-      status = props.status,
-      loaderPlacement = props.loaderPlacement,
-      size = props.size,
-      iconName = props.iconName,
-      iconSize = props.iconSize,
-      iconPlacement = props.iconPlacement,
-      renderIcon = props.renderIcon,
-      renderBefore = props.renderBefore,
-      renderAfter = props.renderAfter,
-      renderLoader = props.renderLoader,
-      renderSuccess = props.renderSuccess,
-      children = props.children,
-      type = props.type,
-      onClick = props.onClick,
-      isDisabled = props.isDisabled,
-      isSelected = props.isSelected,
-      shape = props.shape,
-      disabledAppearance = props.disabledAppearance,
-      title = props.title,
-      customProps = props.customProps,
-      customAttributes = props.customAttributes,
-      a11yAttributes = props.a11yAttributes,
-      customId = props.customId,
-      testId = props.testId,
-      dataSelectorId = props.dataSelectorId;
-  var isLoading = status === _constants2.STATUS.LOADING;
-  var isSuccess = status === _constants2.STATUS.SUCCESS;
-  var isDisabledState = isDisabled || isLoading;
-  var overlayActive = (isLoading || isSuccess) && loaderPlacement === _constants2.LOADER_PLACEMENT.OVERLAY;
-  var classNames = (0, _react.useMemo)(function () {
-    return (0, _cssJSLogic["default"])({
-      props: props
-    });
-  }, [palette, appearance, hoverAppearance, selectedAppearance, size, variant, status, isDisabled, isSelected, shape, loaderPlacement, disabledAppearance, props.customClass]);
-
-  var handleClick = function handleClick(event) {
-    if (isDisabledState) return;
-    onClick(event);
-  };
-
-  var essentials = {
-    isLoading: isLoading,
-    isSuccess: isSuccess,
-    isDisabled: isDisabled,
-    isDisabledState: isDisabledState,
-    overlayActive: overlayActive,
-    variant: variant,
-    iconPlacement: iconPlacement,
-    loaderPlacement: loaderPlacement,
-    size: size,
-    iconName: iconName,
-    iconSize: iconSize,
-    renderIcon: renderIcon,
-    renderBefore: renderBefore,
-    renderAfter: renderAfter,
-    renderLoader: renderLoader,
-    renderSuccess: renderSuccess,
-    children: children,
-    type: type,
-    isSelected: isSelected,
-    title: title,
-    customProps: customProps,
-    customAttributes: customAttributes,
-    a11yAttributes: a11yAttributes,
-    customId: customId,
-    testId: testId,
-    dataSelectorId: dataSelectorId,
-    handleClick: handleClick
-  };
-  return /*#__PURE__*/_react["default"].createElement(ButtonPresentational, _extends({}, essentials, {
-    classNames: classNames,
-    ref: ref
-  }));
-});
 Button.propTypes = _propTypes["default"];
 Button.defaultProps = _defaultProps["default"];
 Button.displayName = 'Button';

package/lib/v1/Button/README.md

@@ -62,9 +62,8 @@ import Button from '@zohodesk/components/es/v1/Button/Button';
 | `customId` | `string` | — | `data-id` attribute for automation |
 | `testId` | `string` | — | `data-test-id` attribute for testing |
 | `palette` | `oneOf: default, primary, secondary, danger, success` | `default` | Color palette |
-| `appearance` | `array of: border, text, bg` | `['bg', 'border']` | Which treatments are colored at rest |
-| `hoverAppearance` | `array of: border, text, bg` | `['bg', 'border']` | Which treatments are colored on hover/focus/active |
-| `selectedAppearance` | `array of: border, text, bg` | `['bg', 'border']` | Which treatments are colored when `isSelected` |
+| `bgAppearance` | `oneOf: filled, onHover, none` | `filled` | Background behavior |
+| `borderAppearance` | `oneOf: default, onHover, none` | `default` | Border behavior |
 | `variant` | `oneOf: text, icon, iconWithText` | `text` | Display variant |
 | `size` | `oneOf: small, medium, large, full` | `medium` | Size variant |
 | `status` | `oneOf: default, loading, success` | `default` | Status state |