@zohodesk/components 1.0.0-temp-199.9 → 1.0.0-temp-216.1

package/es/v1/ListItem/ListItem.js

@@ -81,7 +81,7 @@ const ListItem = props => {
     autoHover: autoHover,
     needTick: needTick,
     needBorder: needBorder,
-    customClass: `${customListItem} ${needMultiLineText ? style.txtAlignBaseLine + ' ' + style.autoHeight : ''} ${customListItem}`,
+    customClass: customListItem,
     dataId: dataIdString,
     dataSelectorId: `${dataSelectorId}`,
     isLink: isLink,

package/es/v1/MultiSelect/AdvancedMultiSelect.js

@@ -549,8 +549,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
           role: 'option'
         },
         dataId: `${dataIdMultiSelectComp}_Options`,
-        ...SuggestionsProps,
-        needMultiLineText: true
+        ...SuggestionsProps
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         isLoading: isFetchingOptions,
         options: options,

package/es/v1/MultiSelect/MultiSelect.js

@@ -1002,12 +1002,8 @@ export class MultiSelectComponent extends React.Component {
       boxSize,
       isLoading,
       selectAllText,
-      needSelectAll,
-      customProps
+      needSelectAll
     } = this.props;
-    const {
-      suggestionsProps = {}
-    } = customProps;
     const {
       selectedOptions,
       searchStr,
@@ -1097,8 +1093,7 @@ export class MultiSelectComponent extends React.Component {
       selectedOptions: selectedOptionIds,
       a11y: {
         role: 'option'
-      },
-      ...suggestionsProps
+      }
     }) : /*#__PURE__*/React.createElement(EmptyState, {
       isLoading: isFetchingOptions,
       options: options,

package/es/v1/MultiSelect/Suggestions.js

@@ -27,8 +27,7 @@ export default class Suggestions extends React.PureComponent {
       avatarPalette,
       palette,
       htmlId,
-      a11y,
-      needMultiLineText
+      a11y
     } = this.props;
     const {
       ariaParentRole,
@@ -93,8 +92,7 @@ export default class Suggestions extends React.PureComponent {
           size: listItemSize,
           avatarPalette: avatarPalette,
           palette: palette,
-          a11y: list_a11y,
-          needMultiLineText: needMultiLineText
+          a11y: list_a11y
         });
       } else if (optionType === 'icon') {
         return /*#__PURE__*/React.createElement(ListItemWithIcon, { ...commonProps,
@@ -114,8 +112,7 @@ export default class Suggestions extends React.PureComponent {
           iconSize: iconSize,
           size: listItemSize,
           palette: palette,
-          a11y: list_a11y,
-          needMultiLineText: needMultiLineText
+          a11y: list_a11y
         });
       }
 
@@ -134,8 +131,7 @@ export default class Suggestions extends React.PureComponent {
         active: isActive,
         size: listItemSize,
         palette: palette,
-        a11y: list_a11y,
-        needMultiLineText: needMultiLineText
+        a11y: list_a11y
       });
     })));
   }

package/es/v1/MultiSelect/props/defaultProps.js

@@ -117,8 +117,7 @@ export const MultiSelect_defaultProps = {
   keepSelectedOptions: false,
   selectedOptionsCount: 0,
   cardHeaderName: '',
-  needResponsive: true,
-  customProps: {}
+  needResponsive: true
 };
 export const MultiSelectHeader_defaultProps = {
   dataId: 'MultiSelectHeader'
@@ -162,6 +161,5 @@ export const SelectedOptions_defaultProps = {
   dataId: 'selectedOptions'
 };
 export const Suggestions_defaultProps = {
-  a11y: {},
-  needMultiLineText: false
+  a11y: {}
 };

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

@@ -108,10 +108,7 @@ export const MultiSelect_propTypes = {
   needSelectAll: PropTypes.bool,
   selectAllText: PropTypes.string,
   setAriaId: PropTypes.string,
-  ariaErrorId: PropTypes.string,
-  customProps: {
-    suggestionsProps: PropTypes.object
-  }
+  ariaErrorId: PropTypes.string
 };
 export const MultiSelectHeader_propTypes = {
   dataId: PropTypes.string,
@@ -176,8 +173,7 @@ export const Suggestions_propTypes = {
     logo: PropTypes.string,
     optionType: PropTypes.string,
     listItemProps: PropTypes.object
-  })),
-  needMultiLineText: PropTypes.bool
+  }))
 };
 export const AdvancedGroupMultiSelect_propTypes = {
   animationStyle: PropTypes.string,

package/es/v1/Select/GroupSelect.js

@@ -590,12 +590,8 @@ export class GroupSelectComponent extends PureComponent {
       htmlId,
       iconOnHover,
       isLoading,
-      dataSelectorId,
-      customProps
+      dataSelectorId
     } = this.props;
-    const {
-      suggestionsProps = {}
-    } = customProps;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
       searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -788,8 +784,7 @@ export class GroupSelectComponent extends PureComponent {
             ariaParentRole: 'listbox',
             role: 'option'
           },
-          dataId: `${dataId}_Options`,
-          ...suggestionsProps
+          dataId: `${dataId}_Options`
         }));
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         options: revampedGroups,

package/es/v1/Select/SelectWithAvatar.js

@@ -163,12 +163,8 @@ class SelectWithAvatarComponent extends SelectComponent {
       needEffect,
       isLoading,
       dataSelectorId,
-      getTargetRef,
-      customProps
+      getTargetRef
     } = this.props;
-    const {
-      suggestionsProps = {}
-    } = customProps;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
       searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -325,8 +321,7 @@ class SelectWithAvatarComponent extends SelectComponent {
         a11y: {
           ariaParentRole: 'listbox',
           role: 'option'
-        },
-        ...suggestionsProps
+        }
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         isLoading: isFetchingOptions,
         options: options,

package/es/v1/Select/props/defaultProps.js

@@ -69,8 +69,7 @@ export const GroupSelect_defaultProps = {
   isRestrictScroll: false,
   i18nKeys: {},
   iconOnHover: false,
-  isLoading: false,
-  customProps: {}
+  isLoading: false
 };
 export const SelectWithAvatar_defaultProps = {
   animationStyle: 'bounce',
@@ -96,8 +95,7 @@ export const SelectWithAvatar_defaultProps = {
   isRestrictScroll: false,
   i18nKeys: {},
   needEffect: true,
-  isLoading: false,
-  customProps: {}
+  isLoading: false
 };
 export const SelectWithIcon_defaultProps = {
   isReadOnly: false,

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

@@ -174,10 +174,7 @@ export const GroupSelect_propTypes = {
   }),
   isLoading: PropTypes.bool,
   dataSelectorId: PropTypes.string,
-  isDefaultSelectValue: PropTypes.bool,
-  customProps: PropTypes.shape({
-    suggestionsProps: PropTypes.object
-  })
+  isDefaultSelectValue: PropTypes.bool
 };
 export const SelectWithAvatar_propTypes = { ...Select_propTypes,
   textBoxClass: PropTypes.string,
@@ -238,8 +235,7 @@ export const SelectWithAvatar_propTypes = { ...Select_propTypes,
   htmlId: PropTypes.string,
   needEffect: PropTypes.bool,
   isLoading: PropTypes.bool,
-  dataSelectorId: PropTypes.string,
-  customProps: PropTypes.object
+  dataSelectorId: PropTypes.string
 };
 export const SelectWithIcon_propTypes = {
   animationStyle: PropTypes.oneOf(['default', 'bounce']),

package/lib/Button/Button.js

@@ -26,8 +26,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,

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

@@ -38,7 +38,6 @@
 }
 
 .native:disabled {
-  pointer-events: none;
   --button_cursor: not-allowed;
   --button_opacity: 0.4;
 }
@@ -525,4 +524,41 @@
 
 .loader{
   color:var(--dot_mirror)
+}
+
+[dir=ltr] .strike {
+  background-image: repeating-linear-gradient(120deg, var(--button_strike_color), var(--button_strike_color) 1px, var(--button_bg_color) 0px, var(--button_bg_color) 8px);
+}
+
+[dir=rtl] .strike {
+  background-image: repeating-linear-gradient(-120deg, var(--button_strike_color), var(--button_strike_color) 1px, var(--button_bg_color) 0px, var(--button_bg_color) 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);
+}
+.successfilledStrike {
+  --button_strike_color: var(--zdt_button_successFilled_strike);
+  --button_border_color: var(--zdt_button_successfill_bg);
 }

package/lib/Button/css/cssJSLogic.js

@@ -5,8 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = cssJSLogic;
 
+var _react = require("react");
+
 var _utils = require("@zohodesk/utils");
 
+var _LibraryContextInit = _interopRequireDefault(require("../../Provider/LibraryContextInit"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 function cssJSLogic(_ref) {
@@ -21,16 +27,23 @@ function cssJSLogic(_ref) {
       size = props.size,
       children = props.children,
       palette = props.palette,
-      status = props.status;
+      status = props.status,
+      disabled = props.disabled;
   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 _useContext = (0, _react.useContext)(_LibraryContextInit["default"]),
+      shouldStrikeThroughDisabledButton = _useContext.shouldStrikeThroughDisabledButton;
+
+  var strikeExcludedPalettes = ['plainprimary', 'plainsecondary'];
   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 && shouldStrikeThroughDisabledButton), _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.success, 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/DropBox/DropBoxElement/DropBoxElement.js

@@ -115,8 +115,6 @@ function DropBoxElement(props) {
     style: inlineStyle,
     "data-tour": tourId,
     "data-position": boxPosition,
-    "data-box-direction": boxDirection,
-    "data-arrow-position": arrowPosition,
     id: htmlId,
     role: role,
     "aria-multiselectable": ariaMultiselectable,
@@ -136,7 +134,7 @@ function DropBoxElement(props) {
   }, isModel ? /*#__PURE__*/_react["default"].createElement("div", {
     className: _DropBoxElementModule["default"].closeBar
   }) : null, isArrow && !isModel && /*#__PURE__*/_react["default"].createElement("div", {
-    className: _DropBoxElementModule["default"].arrowPosition,
+    className: _DropBoxElementModule["default"][arrowPosition],
     style: arrowstyle,
     "data-id": "".concat(dataId, "_arrow"),
     "data-test-id": "".concat(dataId, "_arrow"),

package/lib/DropBox/DropBoxElement/__tests__/__snapshots__/DropBoxElement.spec.js.snap

@@ -5,8 +5,6 @@ exports[`DropBoxElement rendering the defult props 1`] = `
   <div
     class="main hidden container bottomStart default"
     data-a11y-focus-main-area="true"
-    data-arrow-position="end"
-    data-box-direction="bottom"
     data-id="dropBox"
     data-position="bottomStart"
     data-selector-id="dropBox"
@@ -14,14 +12,14 @@ exports[`DropBoxElement rendering the defult props 1`] = `
     dot-ui-element="dropbox"
   >
     <div
-      class="subContainer shadow radius defaultPalette"
+      class="subContainer bottom_shadow radius defaultPalette"
       data-id="dropBox_subcontainer"
       data-selector-id="dropBox_subcontainer"
       data-test-id="dropBox_subcontainer"
       tabindex="-1"
     >
       <div
-        class="arrowPosition"
+        class="end"
         data-id="dropBox_arrow"
         data-selector-id="dropBox_arrow"
         data-test-id="dropBox_arrow"

package/lib/DropBox/DropBoxElement/css/DropBoxElement.module.css

@@ -73,19 +73,19 @@
 }
 
 /* shadow */
-[data-box-direction="top"]>.shadow {
+.top_shadow {
     --dropbox_box_shadow: var(--zd_bs_dropbox_top);
 }
 
-[data-box-direction="left"]>.shadow {
+.left_shadow {
     --dropbox_box_shadow: var(--zd_bs_dropbox_left);
 }
 
-[data-box-direction="right"]>.shadow {
+.right_shadow {
     --dropbox_box_shadow: var(--zd_bs_dropbox_right);
 }
 
-[data-box-direction="bottom"]>.shadow {
+.bottom_shadow {
     --dropbox_box_shadow: var(--zd_bs_dropbox_bottom);
 }
 
@@ -158,41 +158,41 @@
     transform: translateY(-50%);
 }
 
-/* space for arrow using data-box-direction attribute*/
-.arrow[data-box-direction="top"] {
+/* space for arrow */
+.arrowtop {
     padding-bottom: var(--zd_size10) ;
 }
 
-.arrow[data-box-direction="right"] {
+.arrowright {
     padding-left: var(--zd_size10) ;
 }
 
-.arrow[data-box-direction="left"] {
+.arrowleft {
     padding-right: var(--zd_size10) ;
 }
 
-.arrow[data-box-direction="bottom"] {
+.arrowbottom {
     padding-top: var(--zd_size10) ;
 }
 
-/* space from target using data-box-direction attribute*/
-.paddingSpace[data-box-direction="top"] {
+/* space from target */
+.paddingSpace_top {
     padding-bottom: var(--zd_size5) ;
 }
 
-.paddingSpace[data-box-direction="right"] {
+.paddingSpace_right {
     padding-left: var(--zd_size5) ;
 }
 
-.paddingSpace[data-box-direction="left"] {
+.paddingSpace_left {
     padding-right: var(--zd_size5) ;
 }
 
-.paddingSpace[data-box-direction="bottom"] {
+.paddingSpace_bottom {
     padding-top: var(--zd_size5) ;
 }
 
-.arrowBase {
+.arrow {
     position: absolute;
     height: var(--zd_size34) ;
     width: var(--zd_size34) ;
@@ -213,106 +213,107 @@
 }
 
 /* arrow placement styles */
-.arrowPosition {
-    composes: arrowBase;
+.start,
+.end,
+.mid {
+    composes: arrow;
 }
 
-.boxDirection[data-box-direction="top"][data-arrow-position="start"] .arrowPosition,
-.boxDirection[data-box-direction="top"][data-arrow-position="end"] .arrowPosition,
-.boxDirection[data-box-direction="top"][data-arrow-position="mid"] .arrowPosition {
+.top .start,
+.top .end,
+.top .mid {
     bottom: calc( var(--zd_size17) * -1 ) ;
 }
 
-.boxDirection[data-box-direction="top"][data-arrow-position="start"] .arrowPosition {
+.top .start {
     left: var(--zd_size28) ;
 }
 
-.boxDirection[data-box-direction="top"][data-arrow-position="end"] .arrowPosition {
+.top .end {
     right: var(--zd_size28) ;
     transform: rotate(180deg) translateX(-50%);
 }
 
-.boxDirection[data-box-direction="top"][data-arrow-position="mid"] .arrowPosition {
+.top .mid {
     left: 50% ;
 }
 
-.boxDirection[data-box-direction="top"][data-arrow-position="start"] .arrowPosition,
-.boxDirection[data-box-direction="top"][data-arrow-position="mid"] .arrowPosition {
+.top .start,
+.top .mid {
     transform: rotate(180deg) translateX(50%);
 }
 
-.boxDirection[data-box-direction="bottom"][data-arrow-position="start"] .arrowPosition,
-.boxDirection[data-box-direction="bottom"][data-arrow-position="end"] .arrowPosition,
-.boxDirection[data-box-direction="bottom"][data-arrow-position="mid"] .arrowPosition {
+.bottom .start,
+.bottom .end,
+.bottom .mid {
     top: calc( var(--zd_size17) * -1 ) ;
 }
 
-.boxDirection[data-box-direction="bottom"][data-arrow-position="start"] .arrowPosition {
+.bottom .start {
     left: var(--zd_size28) ;
 }
 
-.boxDirection[data-box-direction="bottom"][data-arrow-position="mid"] .arrowPosition {
+.bottom .mid {
     left: 50% ;
 }
 
-.boxDirection[data-box-direction="bottom"][data-arrow-position="end"] .arrowPosition {
+.bottom .end {
     right: var(--zd_size28) ;
     transform: translateX(50%);
 }
 
-.boxDirection[data-box-direction="bottom"][data-arrow-position="mid"] .arrowPosition,
-.boxDirection[data-box-direction="bottom"][data-arrow-position="start"] .arrowPosition {
+.bottom .mid,
+.bottom .start {
     transform: translateX(-50%);
 }
 
-.boxDirection[data-box-direction="left"][data-arrow-position="start"] .arrowPosition,
-.boxDirection[data-box-direction="left"][data-arrow-position="mid"] .arrowPosition,
-.boxDirection[data-box-direction="left"][data-arrow-position="end"] .arrowPosition {
+.left .start,
+.left .mid,
+.left .end {
     right: calc( var(--zd_size17) * -1 ) ;
 }
 
-.boxDirection[data-box-direction="left"][data-arrow-position="start"] .arrowPosition {
+.left .start {
     top: var(--zd_size28) ;
 }
 
-.boxDirection[data-box-direction="left"][data-arrow-position="end"] .arrowPosition {
+.left .end {
     transform: rotate(90deg) translateX(50%);
     bottom: var(--zd_size28) ;
 }
 
-.boxDirection[data-box-direction="left"][data-arrow-position="mid"] .arrowPosition {
+.left .mid {
     top: 50% ;
 }
 
-.boxDirection[data-box-direction="left"][data-arrow-position="start"] .arrowPosition,
-.boxDirection[data-box-direction="left"][data-arrow-position="mid"] .arrowPosition {
+.left .start,
+.left .mid {
     transform: rotate(90deg) translateX(-50%);
 }
 
-.boxDirection[data-box-direction="right"][data-arrow-position="start"] .arrowPosition,
-.boxDirection[data-box-direction="right"][data-arrow-position="mid"] .arrowPosition,
-.boxDirection[data-box-direction="right"][data-arrow-position="end"] .arrowPosition {
+.right .start,
+.right .mid,
+.right .end {
     left: calc( var(--zd_size17) * -1 ) ;
 }
 
-.boxDirection[data-box-direction="right"][data-arrow-position="start"] .arrowPosition {
+.right .start {
     top: var(--zd_size28) ;
 }
 
-.boxDirection[data-box-direction="right"][data-arrow-position="mid"] .arrowPosition {
+.right .mid {
     top: 50% ;
 }
 
-.boxDirection[data-box-direction="right"][data-arrow-position="start"] .arrowPosition,
-.boxDirection[data-box-direction="right"][data-arrow-position="mid"] .arrowPosition {
+.right .start,
+.right .mid {
     transform: rotate(-90deg) translateX(50%);
 }
 
-.boxDirection[data-box-direction="right"][data-arrow-position="end"] .arrowPosition {
+.right .end {
     bottom: var(--zd_size28) ;
     transform: rotate(-90deg) translateX(-50%);
 }
-[data-visible="hidden"],
 .hidden {
     visibility: hidden;
     opacity: 0;
@@ -320,7 +321,7 @@
     pointer-events: none;
 }
 
-[data-visible="hidden"] .subContainer, .hidden .subContainer {
+.hidden .subContainer {
     box-shadow: none;
 }
 
@@ -341,21 +342,17 @@
     composes: animationBasic;
     composes: fadeIn modeForward from '../../../common/animation.module.css';
 }
-
 .scaleIn {
     composes: animationBasic;
     composes: scaleIn from '../../../common/animation.module.css';
 }
-
 .bounce {
     composes: animationBasic;
 }
-
 [dir=ltr] .bounce {
     animation-name: animation;
     animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1.1);
 }
-
 [dir=rtl] .bounce {
     animation-name: animation;
     animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1.1);
@@ -417,7 +414,7 @@
 }
 
 .closeBar {
-    /*  Variable:Ignore  */
+  /*  Variable:Ignore  */
     height: 6px;
     width: 20% ;
     border-radius: 5px;

package/lib/DropBox/DropBoxElement/css/cssJSLogic.js

@@ -55,8 +55,8 @@ function cssJSLogic(_ref) {
       customMobileDropBoxWrap = _customClass$customMo2 === void 0 ? '' : _customClass$customMo2;
   var animationValue = animationStyle === 'default' ? 'fadeInScale' : animationStyle; // const {needBoxStyle,boxstyle} = useDropboxPosCalc(props)
 
-  var boxClassName = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, style.main, true), _defineProperty(_compileClassNames, style.hidden, !isActive), _defineProperty(_compileClassNames, style.responsive, !!isModel), _defineProperty(_compileClassNames, customMobileDropBoxWrap, !!isModel), _defineProperty(_compileClassNames, customDropBoxWrap, !isModel), _defineProperty(_compileClassNames, style.container, isAbsolute && !isModel), _defineProperty(_compileClassNames, style[boxPosition], isAbsolute && !isModel), _defineProperty(_compileClassNames, style.fixedContainer, !isAbsolute && !isModel), _defineProperty(_compileClassNames, style[size], size && !isModel), _defineProperty(_compileClassNames, style.boxDirection, !isModel && isActive && isArrow), _defineProperty(_compileClassNames, style.arrow, !isModel && isActive && isArrow && isAbsolute), _defineProperty(_compileClassNames, style.paddingSpace, !isModel && isActive && !isArrow && isPadding), _compileClassNames));
-  var subContainerClass = (0, _utils.compileClassNames)((_compileClassNames2 = {}, _defineProperty(_compileClassNames2, style.subContainer, true), _defineProperty(_compileClassNames2, customMobileDropBox, !!isModel), _defineProperty(_compileClassNames2, style.mobRadius, !!isModel), _defineProperty(_compileClassNames2, style.slideUp, !!isModel && isActive), _defineProperty(_compileClassNames2, customDropBox, !isModel), _defineProperty(_compileClassNames2, style.shadow, !isModel), _defineProperty(_compileClassNames2, style.boxPadding, !isModel && isBoxPaddingNeed), _defineProperty(_compileClassNames2, style.radius, !isModel && isRadius), _defineProperty(_compileClassNames2, style[animationValue], !isModel && isAnimate && !isReducedMotion && isActive && !!animationStyle), _compileClassNames2));
+  var boxClassName = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, style.main, true), _defineProperty(_compileClassNames, style.hidden, !isActive), _defineProperty(_compileClassNames, style.responsive, !!isModel), _defineProperty(_compileClassNames, customMobileDropBoxWrap, !!isModel), _defineProperty(_compileClassNames, customDropBoxWrap, !isModel), _defineProperty(_compileClassNames, style.container, isAbsolute && !isModel), _defineProperty(_compileClassNames, style[boxPosition], isAbsolute && !isModel), _defineProperty(_compileClassNames, style.fixedContainer, !isAbsolute && !isModel), _defineProperty(_compileClassNames, style[size], size && !isModel), _defineProperty(_compileClassNames, style[boxDirection], !isModel && isActive && isArrow), _defineProperty(_compileClassNames, style["arrow".concat(boxDirection)], !isModel && isActive && isArrow && isAbsolute), _defineProperty(_compileClassNames, style["paddingSpace_".concat(boxDirection)], !isModel && isActive && !isArrow && isPadding), _compileClassNames));
+  var subContainerClass = (0, _utils.compileClassNames)((_compileClassNames2 = {}, _defineProperty(_compileClassNames2, style.subContainer, true), _defineProperty(_compileClassNames2, customMobileDropBox, !!isModel), _defineProperty(_compileClassNames2, style.mobRadius, !!isModel), _defineProperty(_compileClassNames2, style.slideUp, !!isModel && isActive), _defineProperty(_compileClassNames2, customDropBox, !isModel), _defineProperty(_compileClassNames2, style["".concat(boxDirection, "_shadow")], !isModel), _defineProperty(_compileClassNames2, style.boxPadding, !isModel && isBoxPaddingNeed), _defineProperty(_compileClassNames2, style.radius, !isModel && isRadius), _defineProperty(_compileClassNames2, style[animationValue], !isModel && isAnimate && !isReducedMotion && isActive && !!animationStyle), _compileClassNames2));
   var inlineStyle = !isModel ? isAbsolute ? needBoxStyle && boxstyle : positionsOffset && positionsOffset[boxPosition] || {} : {};
 
   if (zIndexStyle) {