@zohodesk/components 1.4.3 → 1.4.5

package/es/DropBox/DropBox.js

@@ -1,6 +1,6 @@
 import React, { useRef, useContext } from 'react';
 import FocusScope from '@zohodesk/a11y/es/FocusScope/FocusScope';
-import Modal from "../Modal/Modal"; // import { getLibraryConfig } from '../Provider/Config';
+import Portal from "../Modal/Portal/Portal"; // import { getLibraryConfig } from '../Provider/Config';
 
 import LibraryContext from "../Provider/LibraryContextInit";
 import cssJSLogic from "./css/cssJSLogic";
@@ -62,13 +62,13 @@ export default function DropBox(props) {
     ...props,
     zIndexStyle: zIndexStyle
   });
-  return isModel && isActive ? /*#__PURE__*/React.createElement(Modal, {
+  return isModel && isActive ? /*#__PURE__*/React.createElement(Portal, {
     portalId: portalId
   }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: `${style.freezeLayer} ${style.freeze}`,
     style: zIndexStyle,
     onClick: stopPropagation
-  }), dropBoxEle)) : !isAbsolutePositioningNeeded && isActive ? /*#__PURE__*/React.createElement(Modal, {
+  }), dropBoxEle)) : !isAbsolutePositioningNeeded && isActive ? /*#__PURE__*/React.createElement(Portal, {
     portalId: portalId
   }, /*#__PURE__*/React.createElement(React.Fragment, null, isRestrictScroll ? /*#__PURE__*/React.createElement("div", {
     className: style.freezeLayer,

package/es/Modal/Modal.js

@@ -1,8 +1,9 @@
 /**** Libraries ****/
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
+import Portal from "./Portal/Portal";
+import { getLibraryConfig } from "../Provider/Config";
 import style from "../AppContainer/AppContainer.module.css";
 let createdPortalIds = [];
 let newPortalPrefix = 'CPortal';
@@ -13,10 +14,13 @@ export default class Modal extends React.Component {
     this.handleAddPortalId = this.handleAddPortalId.bind(this);
     this.handleRemovePortalId = this.handleRemovePortalId.bind(this);
     this.handleInsertPortalDiv = this.handleInsertPortalDiv.bind(this);
-    this.getPortalDiv = this.getPortalDiv.bind(this);
+    this.setPortalDiv = this.setPortalDiv.bind(this);
+    this.getRootElement = this.getRootElement.bind(this);
+    this.getPortalPrefix = this.getPortalPrefix.bind(this);
     this.state = {
       isMounted: false
     };
+    this.portalPrefix = this.getPortalPrefix();
     this.portalId = props.portalId;
     this.setRef = this.setRef.bind(this);
     this.ref = null; // this.portalDiv = document.createDocumentFragment();
@@ -31,24 +35,40 @@ export default class Modal extends React.Component {
     }
   }
 
-  getPortalDiv() {
-    this.modalRoot = this.props.portalId ? document.querySelector(`[data-portal=${this.props.portalId}]`) : '';
+  getRootElement() {
+    const getRootElement = getLibraryConfig('getRootElement');
 
-    if (!this.modalRoot) {
+    if (getRootElement && typeof getRootElement === 'function') {
+      const parent = getRootElement();
+
+      if (parent) {
+        return parent;
+      }
+    }
+
+    return null;
+  }
+
+  getPortalPrefix() {
+    const portalPrefix = getLibraryConfig('portalPrefix');
+    return portalPrefix !== '' ? portalPrefix : '';
+  }
+
+  setPortalDiv() {
+    const modalRoot = this.props.portalId ? document.querySelector(`[data-portal=${this.portalPrefix}${this.props.portalId}]`) : '';
+
+    if (!modalRoot) {
       this.portalId = this.handleAddPortalId();
       this.newModalRoot = document.createElement('div');
       this.newModalRoot.className = style.container;
-      this.newModalRoot.setAttribute('data-portal', this.portalId);
+      this.newModalRoot.setAttribute('data-portal', `${this.portalPrefix}${this.portalId}`);
       this.containerDiv && this.containerDiv.appendChild(this.newModalRoot);
-      this.modalRoot = this.newModalRoot;
     }
-
-    return this.modalRoot;
   }
 
   componentDidMount() {
-    this.containerDiv = document.getElementsByTagName('desk')[0] ? document.getElementsByTagName('desk')[0] : document.getElementsByTagName('body')[0];
-    this.portalDiv = this.getPortalDiv();
+    this.containerDiv = this.getRootElement() || document.getElementsByTagName('desk')[0] || document.getElementsByTagName('body')[0];
+    this.setPortalDiv();
     this.setState({
       isMounted: true
     }, () => {
@@ -57,7 +77,6 @@ export default class Modal extends React.Component {
   }
 
   componentWillUnmount() {
-    //this.modalRoot && this.modalRoot.removeChild(this.portalDiv);
     if (this.newModalRoot) {
       this.containerDiv && this.containerDiv.removeChild(this.newModalRoot);
       this.handleRemovePortalId();
@@ -129,10 +148,12 @@ export default class Modal extends React.Component {
 
     if (isMounted) {
       if (Element) {
-        return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(Element, {
+        return /*#__PURE__*/React.createElement(Portal, {
+          portalId: `${this.portalPrefix}${this.portalId}`
+        }, /*#__PURE__*/React.createElement(Element, {
           ref: this.setRef,
           ...elementProps
-        }), this.portalDiv);
+        }));
       }
 
       return null;

package/es/Modal/Portal/Portal.js

@@ -0,0 +1,33 @@
+import React from "react";
+import BasePortal from '@zohodesk/dotkit/es/react/components/Portal/Portal';
+import { getLibraryConfig } from "../../Provider/Config";
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+export default function Portal(_ref) {
+  let {
+    children,
+    portalId
+  } = _ref;
+  const portalPrefix = getLibraryConfig("portalPrefix");
+
+  const getPortalContainer = () => {
+    const getPortalContainer = getLibraryConfig('getPortalContainer');
+
+    if (getPortalContainer && typeof getPortalContainer === 'function') {
+      const portal = getPortalContainer();
+
+      if (portal) {
+        return portal;
+      }
+    }
+
+    return null;
+  };
+
+  return /*#__PURE__*/React.createElement(BasePortal, {
+    portalId: `${portalPrefix ? `${portalPrefix}` : ''}${portalId}`,
+    getFallbackElement: getPortalContainer
+  }, children);
+}
+Portal.propTypes = propTypes;
+Portal.defaultProps = defaultProps;

package/es/Modal/Portal/__tests__/Portal.spec.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import Portal from "../Portal";
+beforeEach(() => {
+  cleanup();
+});
+describe('Portal', () => {
+  test('rendering the defult props', () => {
+    const customPortalContainer = document.createElement('div');
+    customPortalContainer.setAttribute('data-portal', 'portal1');
+    document.body.appendChild(customPortalContainer);
+    const {
+      baseElement
+    } = render( /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement("div", null, "Portal Div Check")));
+    expect(baseElement).toMatchSnapshot();
+  });
+  test('renders with portalId prop', () => {
+    const customPortalContainer = document.createElement('div');
+    customPortalContainer.setAttribute('data-portal', 'customPortal');
+    document.body.appendChild(customPortalContainer);
+    const {
+      baseElement
+    } = render( /*#__PURE__*/React.createElement(Portal, {
+      portalId: "customPortal"
+    }, /*#__PURE__*/React.createElement("div", null, "Portal Content Check")));
+    expect(baseElement).toMatchSnapshot();
+  });
+});

package/es/Modal/Portal/__tests__/__snapshots__/Portal.spec.js.snap

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Portal rendering the defult props 1`] = `
+<body>
+  <div
+    data-portal="portal1"
+  >
+    <div>
+      Portal Div Check
+    </div>
+  </div>
+  <div />
+</body>
+`;
+
+exports[`Portal renders with portalId prop 1`] = `
+<body>
+  <div
+    data-portal="portal1"
+  />
+  <div
+    data-portal="customPortal"
+  >
+    <div>
+      Portal Content Check
+    </div>
+  </div>
+  <div />
+</body>
+`;

package/es/Modal/Portal/props/defaultProps.js

@@ -0,0 +1,3 @@
+export const defaultProps = {
+  portalId: 'portal1'
+};

package/es/Modal/Portal/props/propTypes.js

@@ -0,0 +1,5 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  children: PropTypes.node,
+  portalId: PropTypes.string
+};

package/es/Popup/viewPort.js

@@ -108,24 +108,23 @@ let viewPort = {
     let paddingSpace = 5; // space between target and relative element
 
     let arrowSize = needArrow ? 10 : 0;
-    rect.height = rect.height + (needArrow ? arrowSize : paddingSpace);
-    rect.width = rect.width + (needArrow ? arrowSize : paddingSpace);
+    let padding = needArrow ? arrowSize : paddingSpace;
     let arrowHorizontalBalancePx = !isAbsolute && needArrow ? 30 : 0;
     let arrowVerticalBalancePx = !isAbsolute && needArrow ? 27 : 0;
-    let bottomOverFlow = rect.height > relativeBoxGap.bottom;
-    let topOverFlow = rect.height > relativeBoxGap.top;
-    let rightOverFlow = rect.width > relativeBoxGap.right;
-    let leftOverFlow = rect.width > relativeBoxGap.left;
-    let horizontalCenterOverFlow = rect.width / 2 > relativeBoxGap.center.right || rect.width / 2 > relativeBoxGap.center.left;
-    let verticalCenterOverFlow = rect.height / 2 > relativeBoxGap.center.top || rect.height / 2 > relativeBoxGap.center.bottom;
-    let horizontalLeftToRightOverFlow = rect.width > relativeBoxRect.width + relativeBoxGap.right;
-    let horizontalCenterToRightOverFlow = rect.width > relativeBoxGap.center.right || arrowHorizontalBalancePx > relativeBoxGap.center.left;
-    let horizontalRightToLeft = rect.width > relativeBoxRect.width + relativeBoxGap.left;
-    let horizontalCenterToLeft = rect.width > relativeBoxGap.center.left || arrowHorizontalBalancePx > relativeBoxGap.center.right;
-    let verticalTopToBottomOverFlow = rect.height > relativeBoxRect.height + relativeBoxGap.bottom;
-    let verticalCenterToBottomOverFlow = rect.height > relativeBoxGap.center.bottom || arrowVerticalBalancePx > relativeBoxGap.center.top;
-    let verticalBottomToTopOverFlow = rect.height > relativeBoxRect.height + relativeBoxGap.top;
-    let verticalCenterToTopOverFlow = rect.height > relativeBoxGap.center.top || arrowVerticalBalancePx > relativeBoxGap.center.bottom;
+    let bottomOverFlow = rect.height + padding > relativeBoxGap.bottom;
+    let topOverFlow = rect.height + padding > relativeBoxGap.top;
+    let rightOverFlow = rect.width + padding > relativeBoxGap.right;
+    let leftOverFlow = rect.width + padding > relativeBoxGap.left;
+    let horizontalCenterOverFlow = rect.width / 2 + padding > relativeBoxGap.center.right || rect.width / 2 + padding > relativeBoxGap.center.left;
+    let verticalCenterOverFlow = rect.height / 2 + padding > relativeBoxGap.center.top || rect.height / 2 + padding > relativeBoxGap.center.bottom;
+    let horizontalLeftToRightOverFlow = rect.width + padding > relativeBoxRect.width + relativeBoxGap.right;
+    let horizontalCenterToRightOverFlow = rect.width + padding > relativeBoxGap.center.right || arrowHorizontalBalancePx > relativeBoxGap.center.left;
+    let horizontalRightToLeft = rect.width + padding > relativeBoxRect.width + relativeBoxGap.left;
+    let horizontalCenterToLeft = rect.width + padding > relativeBoxGap.center.left || arrowHorizontalBalancePx > relativeBoxGap.center.right;
+    let verticalTopToBottomOverFlow = rect.height + padding > relativeBoxRect.height + relativeBoxGap.bottom;
+    let verticalCenterToBottomOverFlow = rect.height + padding > relativeBoxGap.center.bottom || arrowVerticalBalancePx > relativeBoxGap.center.top;
+    let verticalBottomToTopOverFlow = rect.height + padding > relativeBoxRect.height + relativeBoxGap.top;
+    let verticalCenterToTopOverFlow = rect.height + padding > relativeBoxGap.center.top || arrowVerticalBalancePx > relativeBoxGap.center.bottom;
     let views = {
       bottomCenter: !(bottomOverFlow || horizontalCenterOverFlow),
       bottomLeftToRight: !(bottomOverFlow || horizontalLeftToRightOverFlow),

package/es/Provider/Config.js

@@ -8,7 +8,10 @@ let id = {
   direction: 'ltr',
   tooltipDebounce: 175,
   getTooltipContainer: () => {},
-  autoComplete: false
+  autoComplete: false,
+  portalPrefix: '',
+  getRootElement: () => {},
+  getPortalContainer: () => {}
 };
 export function getLibraryConfig(key) {
   return id[key];

package/es/Provider/LibraryContext.js

@@ -10,6 +10,7 @@ const LibraryContextProvider = _ref => {
     coloredTagVariant,
     hasTagColorInheritedToText,
     shouldIndicateSwitchState,
+    shouldStrikeThroughDisabledButton,
     children
   } = _ref;
   const [value, setValue] = useState({
@@ -17,7 +18,8 @@ const LibraryContextProvider = _ref => {
     direction,
     coloredTagVariant,
     hasTagColorInheritedToText,
-    shouldIndicateSwitchState
+    shouldIndicateSwitchState,
+    shouldStrikeThroughDisabledButton
   });
 
   function setGlobalContext(key, data) {
@@ -41,13 +43,15 @@ LibraryContextProvider.propTypes = {
   coloredTagVariant: PropTypes.oneOf(['bold', 'subtle', 'minimal']),
   hasTagColorInheritedToText: PropTypes.bool,
   direction: PropTypes.string,
-  shouldIndicateSwitchState: PropTypes.bool
+  shouldIndicateSwitchState: PropTypes.bool,
+  shouldStrikeThroughDisabledButton: PropTypes.bool
 };
 LibraryContextProvider.defaultProps = {
   isReducedMotion: getLibraryConfig('isReducedMotion'),
   direction: getLibraryConfig('direction'),
   coloredTagVariant: 'bold',
   hasTagColorInheritedToText: true,
-  shouldIndicateSwitchState: false
+  shouldIndicateSwitchState: false,
+  shouldStrikeThroughDisabledButton: false
 };
 export default LibraryContextProvider;

package/es/RippleEffect/RippleEffect.module.css

@@ -100,9 +100,10 @@
  {
   background-color: var(--zdt_rippleeffect_secondary_bg);
 }
-.secondary.active {
+.secondary.active, .hoverEffect:hover.secondary.active.bgHover {
   background-color: var(--zdt_rippleeffect_secondary_active_bg);
 }
-.secondary.active.border {
+.secondary.active.border
+.hoverEffect:hover.secondary.active.border {
   border-color: var(--zdt_rippleeffect_secondary_active_border);
 }

package/es/v1/Button/props/propTypes.js

@@ -22,6 +22,7 @@ export const propTypes = {
   customStyle: PropTypes.object,
   customProps: PropTypes.object,
   id: PropTypes.string,
-  a11y: PropTypes.object
+  a11y: PropTypes.object,
+  shouldStrikeThroughDisabled: PropTypes.bool
 };
 export default propTypes;

package/lib/Button/Button.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = Button;
+exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -15,6 +15,8 @@ var _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));
 
 var _utils = require("@zohodesk/utils");
 
+var _ComponentRegistry = require("@zohodesk/dotkit/es/react/ComponentRegistry");
+
 var _ButtonModule = _interopRequireDefault(require("./css/Button.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -26,8 +28,6 @@ Button text and children props?
 use children for both cases
 toLowerCase check needed?
 */
-
-/* eslint css-modules/no-unused-class: [2, { markAsUsed: ['small','medium','large','xlarge','button_medium','button_small','primary','primaryfilled','danger','dangerfilled','plainprimary', 'plainsecondary', 'secondary', 'secondaryfilled', 'successFilled','tertiaryFilled'] }] */
 function Button(props) {
   var text = props.text,
       disabled = props.disabled,
@@ -76,9 +76,16 @@ function Button(props) {
 }
 
 Button.defaultProps = _defaultProps.defaultProps;
-Button.propTypes = _propTypes.propTypes; // if (__DOCS__) {
+Button.propTypes = _propTypes.propTypes;
+
+var _default = (0, _ComponentRegistry.withComponentRegistrar)(Button, {
+  name: 'ZDC_Button'
+}); // if (__DOCS__) {
 //   Button.docs = {
 //     componentGroup: 'Form Elements',
 //     folderName: 'Style Guide'
 //   };
-// }
+// }
+
+
+exports["default"] = _default;

package/lib/Button/css/Button.module.css

@@ -39,7 +39,6 @@
 }
 
 .native:disabled {
-  pointer-events: none;
   --button_cursor: not-allowed;
   --button_opacity: 0.4;
 }
@@ -144,7 +143,7 @@
   --button_text_color: var(--zdt_button_default_text);
 }
 
-.plainprimary:hover {
+.plainprimary:not(:disabled):hover {
   --button_text_color: var(--zdt_button_plainprimary_hover_text);
 }
 
@@ -152,7 +151,7 @@
   --button_text_color: var(--zdt_button_danger_text);
 }
 
-.plaindanger:hover {
+.plaindanger:not(:disabled):hover {
   --button_text_color: var(--zdt_button_danger_hover_text);
 }
 
@@ -160,7 +159,7 @@
   --button_text_color: var(--zdt_button_success_text);
 }
 
-.plainsuccess:hover {
+.plainsuccess:not(:disabled):hover {
   --button_text_color: var(--zdt_button_success_hover_text);
 }
 
@@ -168,7 +167,7 @@
   --button_text_color: var(--zdt_button_secondary_text);
 }
 
-.plainsecondary:hover {
+.plainsecondary:not(:disabled):hover {
   --button_text_color: var(--zdt_button_secondary_hover_text);
 }
 
@@ -184,7 +183,7 @@
   --button_border_width: 1px;
 }
 
-.primary:hover {
+.primary:not(:disabled):hover {
   --button_border_color: var(--zdt_button_primary_hover_border);
   --button_text_color: var(--zdt_button_primary_hover_text);
 }
@@ -195,7 +194,7 @@
   --button_text_color: var(--zdt_button_primaryfill_text);
 }
 
-.primaryfilled:hover {
+.primaryfilled:not(:disabled):hover {
   --button_bg_color: var(--zdt_button_primaryfill_hover_bg);
 }
 
@@ -205,7 +204,7 @@
   --button_text_color: var(--zdt_button_danger_text);
 }
 
-.danger:hover {
+.danger:not(:disabled):hover {
   --button_border_color: var(--zdt_button_danger_hover_border);
   --button_text_color: var(--zdt_button_danger_hover_text);
 }
@@ -216,7 +215,7 @@
   --button_text_color: var(--zdt_button_success_text);
 }
 
-.success:hover {
+.success:not(:disabled):hover {
   --button_border_color: var(--zdt_button_success_hover_border);
   --button_text_color: var(--zdt_button_success_hover_text);
 }
@@ -227,7 +226,7 @@
   --button_text_color: var(--zdt_button_dangerfill_text);
 }
 
-.dangerfilled:hover {
+.dangerfilled:not(:disabled):hover {
   --button_bg_color: var(--zdt_button_dangerfill_hover_bg);
 }
 
@@ -237,7 +236,7 @@
   --button_text_color: var(--zdt_button_secondary_text);
 }
 
-.secondary:hover {
+.secondary:not(:disabled):hover {
   --button_border_color: var(--zdt_button_secondary_hover_border);
   --button_text_color: var(--zdt_button_secondary_hover_text);
 }
@@ -248,18 +247,17 @@
   --button_text_color: var(--zdt_button_secondary_text);
 }
 
-.secondaryfilled:hover {
+.secondaryfilled:not(:disabled):hover {
   --button_text_color: var(--zdt_button_secondary_hover_text);
 }
 
 .successfilled {
-  --button_border_color: var(--zdt_button_successfill_border);
+  --button_border_color: var(--zdt_button_primaryfill_border);
   --button_bg_color: var(--zdt_button_successfill_bg);
   --button_text_color: var(--zdt_button_dangerfill_text);
 }
 
-.successfilled:hover {
-  --button_border_color: var(--zdt_button_successfill_hover_border);
+.successfilled:not(:disabled):hover {
   --button_bg_color: var(--zdt_button_successfill_hover_bg);
 }
 
@@ -269,7 +267,7 @@
   --button_text_color: var(--zdt_button_dangerfill_text);
 }
 
-.tertiaryfilled:hover {
+.tertiaryfilled:not(:disabled):hover {
   --button_bg_color: var(--zdt_button_tertiaryfill_hover_bg);
 }
 
@@ -572,4 +570,44 @@
 
 .loader {
   color: var(--dot_mirror)
+}
+
+[dir=ltr] .strike {
+  background-image: repeating-linear-gradient(120deg, var(--button_strike_color) 0 1px, transparent 1px 8px);
+}
+
+[dir=rtl] .strike {
+  background-image: repeating-linear-gradient(-120deg, var(--button_strike_color) 0 1px, transparent 1px 8px);
+}
+.primaryStrike {
+  --button_strike_color: var(--zdt_button_primary_strike);
+}
+.primaryfilledStrike {
+  --button_strike_color: var(--zdt_button_primaryFilled_strike);
+  --button_border_color: var(--zdt_button_primaryfill_bg);
+}
+.dangerStrike {
+  --button_strike_color: var(--zdt_button_danger_strike);
+}
+.dangerfilledStrike {
+  --button_strike_color: var(--zdt_button_dangerFilled_strike);
+  --button_border_color: var(--zdt_button_dangerfill_bg);
+}
+.secondaryStrike {
+  --button_strike_color: var(--zdt_button_secondary_border);
+}
+.secondaryfilledStrike {
+  --button_strike_color: var(--zdt_button_secondaryFilled_strike);
+  --button_border_color: var(--zdt_button_secondaryfill_bg);
+}
+.tertiaryfilledStrike {
+  --button_strike_color: var(--zdt_button_tertiaryFilled_strike);
+  --button_border_color: var(--zdt_button_tertiaryfill_bg);
+}
+.successStrike {
+  --button_strike_color: var(--zdt_button_success_strike);
+}
+.successfilledStrike {
+  --button_strike_color: var(--zdt_button_successFilled_strike);
+  --button_border_color: var(--zdt_button_successfill_bg);
 }

package/lib/Button/css/cssJSLogic.js

@@ -21,16 +21,20 @@ function cssJSLogic(_ref) {
       size = props.size,
       children = props.children,
       palette = props.palette,
-      status = props.status;
+      status = props.status,
+      disabled = props.disabled,
+      shouldStrikeThroughDisabled = props.shouldStrikeThroughDisabled;
   var _customClass$customBu = customClass.customButton,
       customButton = _customClass$customBu === void 0 ? '' : _customClass$customBu,
       _customClass$customSt = customClass.customStatus,
       customStatus = _customClass$customSt === void 0 ? '' : _customClass$customSt,
       _customClass$customSt2 = customClass.customStatusSize,
       customStatusSize = _customClass$customSt2 === void 0 ? '' : _customClass$customSt2;
+  var strikeExcludedPalettes = ['plainprimary', 'plainsecondary', 'plainDanger', 'plainSuccess'];
   var paletteLower = palette.toLowerCase();
   var statusLower = status.toLowerCase();
-  var buttonClass = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, customButton, !!customButton), _defineProperty(_compileClassNames, style.bold, isBold), _defineProperty(_compileClassNames, style["default"], !needAppearance), _defineProperty(_compileClassNames, style[paletteLower], needAppearance), _defineProperty(_compileClassNames, style.rounded, needAppearance && rounded), _defineProperty(_compileClassNames, style[size.toLowerCase()], needAppearance && !children), _defineProperty(_compileClassNames, style["".concat(size, "Btn")], needAppearance && children), _defineProperty(_compileClassNames, style["".concat(size, "Btn").concat(paletteLower)], needAppearance && children && rounded), _defineProperty(_compileClassNames, style.loader, !!needAppearance && statusLower !== 'none'), _compileClassNames));
+  var canStrikeThrough = !strikeExcludedPalettes.includes(paletteLower);
+  var buttonClass = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, customButton, !!customButton), _defineProperty(_compileClassNames, style.bold, isBold), _defineProperty(_compileClassNames, style["default"], !needAppearance), _defineProperty(_compileClassNames, style[paletteLower], needAppearance), _defineProperty(_compileClassNames, style.rounded, needAppearance && rounded), _defineProperty(_compileClassNames, style[size.toLowerCase()], needAppearance && !children), _defineProperty(_compileClassNames, style["".concat(size, "Btn")], needAppearance && children), _defineProperty(_compileClassNames, style["".concat(size, "Btn").concat(paletteLower)], needAppearance && children && rounded), _defineProperty(_compileClassNames, "".concat(style["".concat(paletteLower, "Strike")], " ").concat(style.strike), disabled && canStrikeThrough && shouldStrikeThroughDisabled), _defineProperty(_compileClassNames, style.loader, !!needAppearance && statusLower !== 'none'), _compileClassNames));
   var loaderParentClass = (0, _utils.compileClassNames)((_compileClassNames2 = {}, _defineProperty(_compileClassNames2, customStatusSize, !!customStatusSize), _defineProperty(_compileClassNames2, style.loading, statusLower === 'loading'), _defineProperty(_compileClassNames2, style["".concat(size, "loading")], statusLower === 'loading'), _defineProperty(_compileClassNames2, style.successstate, statusLower != 'loading'), _compileClassNames2));
   var loaderChildClass = (0, _utils.compileClassNames)((_compileClassNames3 = {}, _defineProperty(_compileClassNames3, customStatus, !!customStatus), _defineProperty(_compileClassNames3, style.loadingelement, statusLower === 'loading'), _defineProperty(_compileClassNames3, style["".concat(paletteLower, "element")], statusLower === 'loading'), _defineProperty(_compileClassNames3, style.successelement, statusLower != 'loading'), _defineProperty(_compileClassNames3, style["".concat(paletteLower, "success")], statusLower != 'loading'), _compileClassNames3));
   return {

package/lib/Button/props/propTypes.js

@@ -24,6 +24,7 @@ var propTypes = {
   status: _propTypes["default"].oneOf(['loading', 'success', 'none']),
   text: _propTypes["default"].string,
   title: _propTypes["default"].string,
+  shouldStrikeThroughDisabled: _propTypes["default"].bool,
   customClass: _propTypes["default"].shape({
     customButton: _propTypes["default"].string,
     customStatus: _propTypes["default"].string,

package/lib/DropBox/DropBox.js

@@ -11,7 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _FocusScope = _interopRequireDefault(require("@zohodesk/a11y/es/FocusScope/FocusScope"));
 
-var _Modal = _interopRequireDefault(require("../Modal/Modal"));
+var _Portal = _interopRequireDefault(require("../Modal/Portal/Portal"));
 
 var _LibraryContextInit = _interopRequireDefault(require("../Provider/LibraryContextInit"));
 
@@ -90,13 +90,13 @@ function DropBox(props) {
   }, props, {
     zIndexStyle: zIndexStyle
   }));
-  return isModel && isActive ? /*#__PURE__*/_react["default"].createElement(_Modal["default"], {
+  return isModel && isActive ? /*#__PURE__*/_react["default"].createElement(_Portal["default"], {
     portalId: portalId
   }, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
     className: "".concat(_DropBoxModule["default"].freezeLayer, " ").concat(_DropBoxModule["default"].freeze),
     style: zIndexStyle,
     onClick: _Common.stopPropagation
-  }), dropBoxEle)) : !isAbsolutePositioningNeeded && isActive ? /*#__PURE__*/_react["default"].createElement(_Modal["default"], {
+  }), dropBoxEle)) : !isAbsolutePositioningNeeded && isActive ? /*#__PURE__*/_react["default"].createElement(_Portal["default"], {
     portalId: portalId
   }, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isRestrictScroll ? /*#__PURE__*/_react["default"].createElement("div", {
     className: _DropBoxModule["default"].freezeLayer,