@zohodesk/components 1.0.0-temp-109 → 1.0.0-temp-111

package/README.md

@@ -31,10 +31,27 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBox
 - TextBoxIcon
 - Tooltip
+# 1.0.0-temp-111
+Form Fields highlight Active State implementation
+# 1.0.0-alpha-255
+
+ - **CalenderView, DateTime** - Today and selected date issue fix.
+
+ - `Accesssility`- Screen Reader fix.
+
+# 1.0.0-alpha-254
+
+ - **AppContainer** - accessibility theme css has been added.
+
+ - **Button** - `customProps` support.
+
+ - **DropBox** - Focus scope navigation support.
 
 # 1.0.0-alpha-253
 
- - Tabs, Tooltip => if condition check added  to reduce murphy error logs
+ - **Tabs, Tooltip** - If condition check added  to reduce murphy error logs.
+
+ - `Accesssility`- Screen Reader support for some components.
 
 # 1.0.0-alpha-252
 

package/assets/Appearance/dark/themes/blue/blueDarkComponentTheme.module.css

@@ -39,4 +39,7 @@
 	
 	/* dropdown */
 	--zdt_dropdown_darkheading_text: var(--dot_cadetblue);
+	
+	/* focusscope */
+	--zdt_a11y_focusScope_focus_border: var(--dot_butterflyblue);
 }

package/assets/Appearance/dark/themes/green/greenDarkComponentTheme.module.css

@@ -39,4 +39,7 @@
 	
 	/* dropdown */
 	--zdt_dropdown_darkheading_text: var(--dot_cadetblue);
+	
+	/* focusscope */
+	--zdt_a11y_focusScope_focus_border: #45a159;
 }

package/assets/Appearance/dark/themes/orange/orangeDarkComponentTheme.module.css

@@ -39,4 +39,7 @@
 	
 	/* dropdown */
 	--zdt_dropdown_darkheading_text: var(--dot_cadetblue);
+	
+	/* focusscope */
+	--zdt_a11y_focusScope_focus_border: #ff801f;
 }

package/assets/Appearance/dark/themes/red/redDarkComponentTheme.module.css

@@ -39,4 +39,7 @@
 	
 	/* dropdown */
 	--zdt_dropdown_darkheading_text: var(--dot_cadetblue);
+	
+	/* focusscope */
+	--zdt_a11y_focusScope_focus_border: #e94f4f;
 }

package/assets/Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css

@@ -39,4 +39,7 @@
 	
 	/* dropdown */
 	--zdt_dropdown_darkheading_text: var(--dot_cadetblue);
+	
+	/* focusscope */
+	--zdt_a11y_focusScope_focus_border: #d79835;
 }

package/assets/Appearance/default/themes/blue/blueDefaultComponentTheme.module.css

@@ -39,4 +39,7 @@
 	
 	/* dropdown */
 	--zdt_dropdown_darkheading_text: var(--dot_white);
+	
+	/* focusscope */
+	--zdt_a11y_focusScope_focus_border: var(--dot_primary);
 }

package/assets/Appearance/default/themes/green/greenDefaultComponentTheme.module.css

@@ -39,4 +39,7 @@
 	
 	/* dropdown */
 	--zdt_dropdown_darkheading_text: var(--dot_white);
+	
+	/* focusscope */
+	--zdt_a11y_focusScope_focus_border: #26a942;
 }

package/assets/Appearance/default/themes/orange/orangeDefaultComponentTheme.module.css

@@ -39,4 +39,7 @@
 	
 	/* dropdown */
 	--zdt_dropdown_darkheading_text: var(--dot_white);
+	
+	/* focusscope */
+	--zdt_a11y_focusScope_focus_border: #e57717;
 }

package/assets/Appearance/default/themes/red/redDefaultComponentTheme.module.css

@@ -39,4 +39,7 @@
 	
 	/* dropdown */
 	--zdt_dropdown_darkheading_text: var(--dot_white);
+	
+	/* focusscope */
+	--zdt_a11y_focusScope_focus_border: var(--dot_brightRed);
 }

package/assets/Appearance/default/themes/yellow/yellowDefaultComponentTheme.module.css

@@ -39,4 +39,7 @@
 	
 	/* dropdown */
 	--zdt_dropdown_darkheading_text: var(--dot_white);
+	
+	/* focusscope */
+	--zdt_a11y_focusScope_focus_border: #e8b923;
 }

package/assets/Appearance/pureDark/themes/blue/bluePureDarkComponentTheme.module.css

@@ -39,4 +39,7 @@
 	
 	/* dropdown */
 	--zdt_dropdown_darkheading_text: #999;
+	
+	/* focusscope */
+	--zdt_a11y_focusScope_focus_border: var(--dot_butterflyblue);
 }

package/assets/Appearance/pureDark/themes/green/greenPureDarkComponentTheme.module.css

@@ -39,4 +39,7 @@
 	
 	/* dropdown */
 	--zdt_dropdown_darkheading_text: #999;
+	
+	/* focusscope */
+	--zdt_a11y_focusScope_focus_border: #45a159;
 }

package/assets/Appearance/pureDark/themes/orange/orangePureDarkComponentTheme.module.css

@@ -39,4 +39,7 @@
 	
 	/* dropdown */
 	--zdt_dropdown_darkheading_text: #999;
+	
+	/* focusscope */
+	--zdt_a11y_focusScope_focus_border: #ff801f;
 }

package/assets/Appearance/pureDark/themes/red/redPureDarkComponentTheme.module.css

@@ -39,4 +39,7 @@
 	
 	/* dropdown */
 	--zdt_dropdown_darkheading_text: #999;
+	
+	/* focusscope */
+	--zdt_a11y_focusScope_focus_border: #e94f4f;
 }

package/assets/Appearance/pureDark/themes/yellow/yellowPureDarkComponentTheme.module.css

@@ -39,4 +39,7 @@
 	
 	/* dropdown */
 	--zdt_dropdown_darkheading_text: #999;
+	
+	/* focusscope */
+	--zdt_a11y_focusScope_focus_border: #d79835;
 }

package/es/AppContainer/AppContainer.js

@@ -12,6 +12,7 @@ import '@zohodesk/variables/assets/fontsizeVariables.module.css';
 import '@zohodesk/variables/lib/fontFamilyVariables.module.css';
 import '@zohodesk/variables/assets/transitionVariables.module.css';
 import '@zohodesk/variables/assets/no_transitionVariables.module.css';
+import '../common/a11y.module.css';
 import style from './AppContainer.module.css';
 import { getLibraryConfig, setLibraryConfig } from '../Provider/Config';
 export default class AppContainer extends React.Component {

package/es/Button/Button.js

@@ -1,3 +1,4 @@
+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); }
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -24,7 +25,8 @@ export default class Button extends React.Component {
       needAppearance,
       getRef,
       title,
-      customClass
+      customClass,
+      customProps
     } = this.props;
     let {
       customButton = '',
@@ -35,7 +37,7 @@ export default class Button extends React.Component {
     let statusLower = status.toLowerCase();
     let classList = needAppearance ? `${style[paletteLower]} ${rounded ? style.rounded : ''} ${!children ? style[size.toLowerCase()] : `${style[`${size}Btn`]} 
              ${rounded ? style[`${size}Btn${paletteLower}`] : ''}`} ${statusLower !== 'none' ? style.loader : ''}` : `${style.default}`;
-    return /*#__PURE__*/React.createElement("button", {
+    return /*#__PURE__*/React.createElement("button", _extends({
       className: `${customButton} ${classList} ${isBold ? style.bold : ''}  `,
       "data-id": disabled ? `${dataId}_disabled` : dataId,
       disabled: disabled || statusLower === 'loading',
@@ -43,7 +45,7 @@ export default class Button extends React.Component {
       "data-title": title,
       type: "button",
       ref: getRef
-    }, children ? children : text, statusLower !== 'none' && needAppearance && /*#__PURE__*/React.createElement("div", {
+    }, customProps), children ? children : text, statusLower !== 'none' && needAppearance && /*#__PURE__*/React.createElement("div", {
       className: style.overlay
     }, /*#__PURE__*/React.createElement("div", {
       className: `${customStatusSize} ${statusLower === 'loading' ? `${style.loading} ${style[`${size}loading`] ? style[`${size}loading`] : ''}` : style.success}`

package/es/DateTime/CalendarView.js

@@ -64,10 +64,11 @@ export default class CalendarView extends React.PureComponent {
             tdclass += ` ${style.sunday}`;
           }
           if (incremleti >= userSeeDay && incremday <= monthEnd) {
-            if (incremday === parseInt(date) && parseInt(month) === userSeeMonth && parseInt(year) === userSeeYear) {
+            if (parseInt(date) === incremday && parseInt(month) === userSeeMonth && parseInt(year) === userSeeYear) {
               isSelectedDay = true;
             } else if (todayDate === incremday && todayMonth === userSeeMonth && todayYear === userSeeYear) {
               isToday = true;
+              isSelectedDay = false;
             } else {
               isSelectedDay = false;
               isToday = false;
@@ -93,18 +94,22 @@ export default class CalendarView extends React.PureComponent {
             }
             const prevMonthEnd = getMonthEnd(prevMonth, prevYear);
             const prevDate = prevMonthEnd - (userSeeDay - 1) + incremleti;
-            isSelectedDay = prevDate === parseInt(date) && parseInt(month) === prevMonth && parseInt(year) === prevYear ? true : false;
-            isToday = prevDate === incremday && todayMonth === userSeeMonth && todayYear === userSeeYear ? true : false;
+
+            // isSelectedDay =
+            prevDate === parseInt(date) && parseInt(month) === prevMonth && parseInt(year) === prevYear ? true : false;
+            // isToday = prevDate === incremday && todayMonth === userSeeMonth && todayYear === userSeeYear ? true : false;
+
             output = /*#__PURE__*/React.createElement(Span, {
-              i: i,
-              isActive: isSelectedDay,
+              i: i
+              //isActive={isSelectedDay}
+              ,
               tdclass: `${tdclass} ${style.invalidDate}`,
               handleSelect: this.handleSelect,
               incremday: prevDate,
               userSeeMonth: prevMonth,
               userSeeYear: prevYear,
-              dataId: isSelectedDay ? `${dataId}_dateSelected` : `${dataId}_invalidDate`,
-              isToday: isToday
+              dataId: isSelectedDay ? `${dataId}_dateSelected` : `${dataId}_invalidDate`
+              // isToday={isToday}
             });
           } else if (incremleti > monthEnd) {
             let nextMonth = userSeeMonth + 1;
@@ -114,18 +119,23 @@ export default class CalendarView extends React.PureComponent {
               nextYear = userSeeYear + 1;
             }
             const nextDate = incremleti - (userSeeDay - 1) - monthEnd;
-            isSelectedDay = nextDate === parseInt(date) && parseInt(month) === nextMonth && parseInt(year) === nextYear ? true : false;
-            isToday = nextDate === incremday && todayMonth === userSeeMonth && todayYear === userSeeYear ? true : false;
+
+            // isSelectedDay =
+            nextDate === parseInt(date) && parseInt(month) === nextMonth && parseInt(year) === nextYear ? true : false;
+
+            // isToday = nextDate === incremday && todayMonth === userSeeMonth && todayYear === userSeeYear ? true : false;
+
             output = /*#__PURE__*/React.createElement(Span, {
-              i: i,
-              isActive: isSelectedDay,
+              i: i
+              // isActive={isSelectedDay}
+              ,
               tdclass: `${tdclass}  ${style.invalidDate}`,
               handleSelect: this.handleSelect,
               incremday: nextDate,
               userSeeMonth: nextMonth,
               userSeeYear: nextYear,
-              dataId: isSelectedDay ? `${dataId}_dateSelected` : `${dataId}_invalidDate`,
-              isToday: isToday
+              dataId: isSelectedDay ? `${dataId}_dateSelected` : `${dataId}_invalidDate`
+              //isToday={isToday}
             });
           } else {
             output = /*#__PURE__*/React.createElement(Box, {
@@ -149,7 +159,8 @@ export default class CalendarView extends React.PureComponent {
     })();
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DaysRow, {
       dayNames: dayNames,
-      dayNamesShort: dayNamesShort
+      dayNamesShort: dayNamesShort,
+      ariaLabel: dayNamesShort
     }), /*#__PURE__*/React.createElement("div", {
       "data-id": `${dataId}_dateContainer`,
       className: `${style.dateContainer} ${needBorder ? style.separator : ''}`

package/es/DateTime/DateTime.js

@@ -1,3 +1,4 @@
+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); }
 /* eslint css-modules/no-unused-class: [0, { markAsUsed: ['datesStr', 'dateContainer', 'dateRow', 'today', 'emptySpan', 'dropDown'] }] */
 /* eslint-disable react/forbid-component-props */
 
@@ -134,7 +135,7 @@ export default class DateTime extends React.PureComponent {
       defaultHour = parseInt(defaultHour);
       defaultMin = parseInt(defaultMin);
     }
-    const dateObj = isDateTimeField ? datetime.toDate(datetime.tz.utcToTz(value, timeZone)) : value ? datetime.toDate(value) : new Date();
+    const dateObj = isDateTimeField ? datetime.toDate(datetime.tz.utcToTz(value, timeZone)) : value ? datetime.toDate(value) : todayObj;
     date = dateObj.getDate();
     month = dateObj.getMonth();
     year = dateObj.getFullYear();
@@ -609,7 +610,8 @@ export default class DateTime extends React.PureComponent {
       positionsOffset,
       targetOffset,
       isRestrictScroll,
-      dropBoxPortalId
+      dropBoxPortalId,
+      dropBoxProps
     } = this.props;
     const {
       timeText = 'Time',
@@ -693,7 +695,7 @@ export default class DateTime extends React.PureComponent {
       let {
         tabletMode
       } = _ref2;
-      return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+      return /*#__PURE__*/React.createElement(ResponsiveDropBox, _extends({
         size: boxSize,
         boxPosition: position,
         isActive: isActive,
@@ -713,7 +715,7 @@ export default class DateTime extends React.PureComponent {
         targetOffset: targetOffset,
         isRestrictScroll: isRestrictScroll,
         portalId: dropBoxPortalId
-      }, /*#__PURE__*/React.createElement(Box, null, childEle));
+      }, dropBoxProps), /*#__PURE__*/React.createElement(Box, null, childEle));
     }) : null;
   }
 }

package/es/DateTime/DateTime.module.css

@@ -124,6 +124,16 @@
   color: var(--zdt_datetime_invaliddate_text);
 }
 
+.today {
+  border: 1px solid var(--zdt_datetime_today_border);
+  border-radius: 50%;
+}
+
+.today:hover {
+  border: 1px solid var(--zdt_datetime_today_border);
+  background-color: var(--zdt_datetime_datestr_hover_bg);
+}
+
 .active,
 .active:hover,
 .active.today,
@@ -136,15 +146,7 @@
   border-radius: 50%;
 }
 
-.today {
-  border: 1px solid var(--zdt_datetime_today_border);
-  border-radius: 50%;
-}
 
-.today:hover {
-  border: 1px solid var(--zdt_datetime_today_border);
-  background-color: var(--zdt_datetime_datestr_hover_bg);
-}
 
 .timesection {
   padding-top: var(--zd_size5);

package/es/DateTime/DateWidget.js

@@ -53,6 +53,7 @@ class DateWidgetComponent extends React.Component {
     this.handleDateIconClick = this.handleDateIconClick.bind(this);
     this.handleSelectionRangeDetails = this.handleSelectionRangeDetails.bind(this);
     this.handleBlurSelectionRange = this.handleBlurSelectionRange.bind(this);
+    this.handleExposePopupHandlers = this.handleExposePopupHandlers.bind(this);
     this.state = {
       selected: '',
       displayText: '',
@@ -94,6 +95,7 @@ class DateWidgetComponent extends React.Component {
       selected: newSelected
     });
     this.handleSelectionRangeDetails(this.props);
+    this.handleExposePopupHandlers();
   }
   componentDidUpdate(prevProps, prevState) {
     const {
@@ -211,6 +213,18 @@ class DateWidgetComponent extends React.Component {
       onPassValidation && onPassValidation(value, targetTag);
     }
   }
+  handleExposePopupHandlers() {
+    let {
+      removeClose,
+      togglePopup,
+      getPopupHandlers
+    } = this.props;
+    let methods = {
+      removeClose,
+      togglePopup: this.handleTogglePopup
+    };
+    getPopupHandlers && getPopupHandlers(methods);
+  }
   handleTogglePopup(e, isOpenOnly) {
     const {
       togglePopup,
@@ -920,6 +934,7 @@ class DateWidgetComponent extends React.Component {
       targetOffset,
       isRestrictScroll,
       dropBoxPortalId,
+      highlightPosition,
       a11y
     } = this.props;
     const {
@@ -933,7 +948,7 @@ class DateWidgetComponent extends React.Component {
     const showClear = !(isDisabled || isReadOnly) && (isDateEdited || value) ? true : false;
     const showError = needErrorOnBlur ? isError && !isFocused && !isPopupOpen : isError;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container}`
+      className: `${!highlightPosition ? style.container : ''}`
     }, children ? /*#__PURE__*/React.createElement("div", {
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : `${dataId}_widget`}`,
       onClick: isDisabled || isReadOnly ? null : this.handleTogglePopup,
@@ -1006,7 +1021,8 @@ class DateWidgetComponent extends React.Component {
       positionsOffset: positionsOffset,
       targetOffset: targetOffset,
       isRestrictScroll: isRestrictScroll,
-      dropBoxPortalId: dropBoxPortalId
+      dropBoxPortalId: dropBoxPortalId,
+      isPadding: highlightPosition ? true : false
     }));
   }
 }

package/es/DateTime/props/defaultProps.js

@@ -42,7 +42,8 @@ export const DateWidget_defaultProps = {
   needErrorOnBlur: false,
   isEditable: false,
   iconOnHover: false,
-  is24Hour: false
+  is24Hour: false,
+  highlightPosition: false
 };
 export const YearView_defaultProps = {
   dataId: 'dateContainer',

package/es/DropBox/DropBox.js

@@ -9,6 +9,7 @@ import { positionMapping } from './DropBoxPositionMapping.json';
 import { getZIndex } from '../Provider/ZindexProvider';
 import { getLibraryConfig } from '../Provider/Config';
 import LibraryContext from '../Provider/LibraryContextInit';
+import FocusScope from '@zohodesk/a11y/es/FocusScope/FocusScope';
 export class DropBoxElement extends React.Component {
   constructor(props) {
     super(props);
@@ -59,7 +60,8 @@ export class DropBoxElement extends React.Component {
       positionsOffset,
       targetOffset,
       zIndexStyle,
-      customStyle
+      customStyle,
+      subContainerRef
     } = this.props;
     let {
       isReducedMotion
@@ -146,9 +148,11 @@ export class DropBoxElement extends React.Component {
       "aria-labelledby": ariaLabelledby,
       tabIndex: tabIndex
     }, /*#__PURE__*/React.createElement("div", {
+      tabIndex: "-1",
       className: `${subContainerClass} ${style[`${palette}Palette`]}`,
       onClick: onClick,
-      "data-id": `${dataId}_subcontainer`
+      "data-id": `${dataId}_subcontainer`,
+      ref: subContainerRef
     }, isModel ? /*#__PURE__*/React.createElement("div", {
       className: style.closeBar
     }) : null, isArrow && !isModel && /*#__PURE__*/React.createElement("div", {
@@ -165,6 +169,7 @@ export default class DropBox extends React.Component {
     super(props);
     this.getNextIndex = getZIndex(this);
     this.onFreezeClick = this.onFreezeClick.bind(this);
+    this.createRef = /*#__PURE__*/React.createRef();
   }
   onFreezeClick(e) {
     e && e.stopPropagation();
@@ -176,7 +181,9 @@ export default class DropBox extends React.Component {
       isActive,
       isAbsolutePositioningNeeded,
       needAutoZindex,
-      isRestrictScroll
+      isRestrictScroll,
+      needFocusScope,
+      onClose
     } = this.props;
     let windowWidth,
       mobileWidth = getLibraryConfig('mobileWidth'),
@@ -193,7 +200,20 @@ export default class DropBox extends React.Component {
     const {
       direction
     } = this.context || {};
-    const dropBoxEle = /*#__PURE__*/React.createElement(DropBoxElement, _extends({
+    const dropBoxEle = needFocusScope ? /*#__PURE__*/React.createElement(FocusScope, {
+      focusClose: onClose,
+      elementRef: this.createRef,
+      autoFocus: true,
+      restoreFocus: true,
+      focusArrowLoop: true,
+      enableEnterAction: true
+    }, /*#__PURE__*/React.createElement(DropBoxElement, _extends({
+      isModel: isModel,
+      direction: direction
+    }, this.props, {
+      zIndexStyle: zIndexStyle,
+      subContainerRef: this.createRef
+    }))) : /*#__PURE__*/React.createElement(DropBoxElement, _extends({
       isModel: isModel,
       direction: direction
     }, this.props, {

package/es/DropBox/props/defaultProps.js

@@ -16,5 +16,6 @@ export const defaultProps = {
   palette: 'default',
   needAutoZindex: true,
   portalId: 'portal1',
-  isRestrictScroll: false
+  isRestrictScroll: false,
+  needFocusScope: false
 };

package/es/DropBox/props/propTypes.js

@@ -22,6 +22,7 @@ export const propTypes = {
   left: PropTypes.number,
   needResponsive: PropTypes.bool,
   onClick: PropTypes.func,
+  needFocusScope: PropTypes.bool,
   right: PropTypes.number,
   size: PropTypes.oneOf(['mini', 'xmini', 'xsmall', 'small', 'medium', 'large', 'mlarge', 'xlarge', 'xxlarge', 'default']),
   top: PropTypes.number,

package/es/ListItem/ListContainer.js

@@ -66,6 +66,7 @@ const ListContainer = props => {
   }
   return /*#__PURE__*/React.createElement(Container, _extends({
     role: role,
+    "data-a11y-inside-focus": true,
     "aria-selected": ariaSelected,
     "aria-label": ariaLabel,
     isCover: false,

package/es/MultiSelect/MultiSelect.js

@@ -746,6 +746,10 @@ export class MultiSelectComponent extends React.Component {
         isActive: false
       });
     }
+    let {
+      onBlur
+    } = this.props;
+    onBlur && onBlur();
   }
   handleInputFocus() {
     const {
@@ -759,11 +763,14 @@ export class MultiSelectComponent extends React.Component {
   handleExposedPublicMethods() {
     const {
       getPublicMethods,
-      openPopupOnly
+      openPopupOnly,
+      togglePopup
     } = this.props;
-    getPublicMethods && getPublicMethods({
-      openPopupOnly
-    });
+    let methods = {
+      openPopupOnly,
+      togglePopup: this.togglePopup
+    };
+    getPublicMethods && getPublicMethods(methods);
   }
   responsiveFunc(_ref) {
     let {
@@ -818,7 +825,8 @@ export class MultiSelectComponent extends React.Component {
       disabledOptions,
       boxSize,
       autoComplete,
-      isLoading
+      isLoading,
+      isPadding
     } = this.props;
     const {
       clearText = 'Clear all',
@@ -853,7 +861,7 @@ export class MultiSelectComponent extends React.Component {
     });
     const isShowClearIcon = !isReadOnly && !isDisabled && !disableAction && isShowClear;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
+      className: `${isPadding ? style.staticPosition : style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-title": isDisabled ? title : null,
       onClick: this.handleInputFocus
@@ -943,7 +951,7 @@ export class MultiSelectComponent extends React.Component {
         isArrow: false,
         onClick: removeClose,
         needResponsive: needResponsive,
-        isPadding: false,
+        isPadding: isPadding,
         isBoxPaddingNeed: isBoxPaddingNeed,
         palette: palette,
         htmlId: setAriaId,

package/es/MultiSelect/MultiSelect.module.css

@@ -1,6 +1,10 @@
 .wrapper {
   position: relative;
 }
+.staticPosition
+{
+  position: static;
+}
 .disabled, .readOnly {
   cursor: not-allowed;
 }

package/es/MultiSelect/props/defaultProps.js

@@ -103,7 +103,8 @@ export const MultiSelect_defaultProps = {
   isSearchClearOnSelect: true,
   needEffect: true,
   boxSize: 'default',
-  isLoading: false
+  isLoading: false,
+  isPadding: false
 };
 export const MultiSelectHeader_defaultProps = {
   dataId: 'MultiSelectHeader'

package/es/MultiSelect/props/propTypes.js

@@ -236,7 +236,8 @@ export const MultiSelect_propTypes = {
   getFooter: PropTypes.func,
   needEffect: PropTypes.bool,
   boxSize: PropTypes.string,
-  isLoading: PropTypes.bool
+  isLoading: PropTypes.bool,
+  isPadding: PropTypes.bool
 };
 export const MultiSelectHeader_propTypes = {
   dataId: PropTypes.string,