@zohodesk/components 1.2.52 → 1.2.53

package/es/DateTime/DateWidget.js

@@ -128,7 +128,8 @@ class DateWidgetComponent extends React.Component {
       dateFormat = '',
       is24Hour,
       isHideCurrentYear,
-      getPopupProps
+      getPopupProps,
+      onDropboxClose
     } = this.props;
 
     if (validation && validation.validate) {
@@ -162,6 +163,8 @@ class DateWidgetComponent extends React.Component {
     if (prevProps.isPopupReady !== isPopupReady) {
       if (isPopupReady) {
         this.resetLocalDate && this.resetLocalDate();
+      } else {
+        typeof onDropboxClose === 'function' && onDropboxClose();
       }
 
       if (getPopupProps) {
@@ -1004,6 +1007,8 @@ class DateWidgetComponent extends React.Component {
       a11y,
       boxSize,
       onError,
+      renderCustomHeader,
+      renderCustomFooter,
       weekStartDay,
       holidays,
       customProps = {}
@@ -1108,6 +1113,8 @@ class DateWidgetComponent extends React.Component {
       dropBoxPortalId: dropBoxPortalId,
       boxSize: boxSize,
       onError: onError,
+      renderCustomHeader: renderCustomHeader,
+      renderCustomFooter: renderCustomFooter,
       customProps: DateTimeProps,
       weekStartDay: weekStartDay,
       holidays: holidays

package/es/DateTime/props/propTypes.js

@@ -75,6 +75,8 @@ export const DateTime_propTypes = {
   targetOffset: PropTypes.string,
   isRestrictScroll: PropTypes.bool,
   dropBoxPortalId: PropTypes.string,
+  renderCustomHeader: PropTypes.node,
+  renderCustomFooter: PropTypes.node,
   customProps: PropTypes.object,
   weekStartDay: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
   holidays: PropTypes.arrayOf(PropTypes.number)
@@ -146,6 +148,9 @@ export const DateWidget_propTypes = {
   dropBoxPortalId: PropTypes.string,
   a11y: PropTypes.object,
   getPopupProps: PropTypes.func,
+  renderCustomHeader: PropTypes.node,
+  renderCustomFooter: PropTypes.node,
+  onDropboxClose: PropTypes.func,
   customProps: PropTypes.object,
   weekStartDay: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
   holidays: PropTypes.arrayOf(PropTypes.number)

package/es/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap

@@ -21,7 +21,7 @@ exports[`ListItemWithCheckBox rendering the defult props 1`] = `
         aria-checked="false"
         aria-hidden="true"
         class="container pointer primary 
-          inflex rowdir vCenter"
+           inflex rowdir vCenter"
         data-id="checkBox"
         data-selector-id="container"
         data-test-id="checkBox"
@@ -29,7 +29,7 @@ exports[`ListItemWithCheckBox rendering the defult props 1`] = `
         tabindex="-1"
       >
         <div
-          class="boxContainer medium  filled shrinkOff"
+          class="boxContainer medium  filled  shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"

package/es/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap

@@ -30,7 +30,7 @@ exports[`ListItemWithRadio rendering the defult props 1`] = `
       >
         <div
           class="radio  
-            hoverprimary medium filled centerPathprimary  shrinkOff"
+            hoverprimary medium filled centerPathprimary   shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"

package/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -875,7 +875,8 @@ class AdvancedGroupMultiSelect extends React.Component {
       palette,
       needEffect,
       autoComplete,
-      getTargetRef
+      getTargetRef,
+      isFocus
     } = this.props;
     let {
       clearText = 'Clear all'
@@ -904,6 +905,7 @@ class AdvancedGroupMultiSelect extends React.Component {
     let setAriaId = this.getNextAriaId();
     let ariaErrorId = this.getNextAriaId();
     const isShowClearIcon = !isReadOnly && !isDisabled && selectedGroupOptions.length > 1;
+    const isEditable = !(isReadOnly || isDisabled);
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
@@ -920,7 +922,7 @@ class AdvancedGroupMultiSelect extends React.Component {
     }, children) : /*#__PURE__*/React.createElement(Container, {
       align: "vertical",
       alignBox: "row",
-      className: `${style.container} ${style[size]} ${isActive && needBorder ? style.active : ''} ${needBorder ? style.hasBorder : ''} ${style[`borderColor_${borderColor}`]} ${customClass}`,
+      className: `${style.container} ${style[size]} ${isActive && needBorder || isEditable && isFocus && needBorder ? style.active : ''} ${needBorder ? style.hasBorder : ''} ${style[`borderColor_${borderColor}`]} ${customClass}`,
       eleRef: this.selectedOptionContainerRef,
       wrap: "wrap"
     }, /*#__PURE__*/React.createElement(SelectedOptions, {

package/es/MultiSelect/AdvancedMultiSelect.js

@@ -372,7 +372,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       isAbsolutePositioningNeeded,
       positionsOffset,
       targetOffset,
-      isRestrictScroll
+      isRestrictScroll,
+      isFocus
     } = this.props;
     let {
       SuggestionsProps = {},
@@ -414,6 +415,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       disabledOptions
     });
     let isShowClearIcon = !isReadOnly && !isDisabled && isShowClear;
+    const isEditable = !(isReadOnly || isDisabled);
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''} ${containerClass}`,
       "data-id": dataIdMultiSelectComp,
@@ -424,7 +426,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     }, /*#__PURE__*/React.createElement(Container, {
       align: "vertical",
       alignBox: "row",
-      className: `${style.container} ${style[size]} ${isActive && needBorder ? style.active : ''} ${needBorder ? style.hasBorder : ''} ${needBorder ? !isDisabled ? style[`borderColor_${borderColor}`] : style.borderColor_transparent : ''}`,
+      className: `${style.container} ${style[size]} ${isActive && needBorder || isEditable && isFocus && needBorder ? style.active : ''} ${needBorder ? style.hasBorder : ''} ${needBorder ? !isDisabled ? style[`borderColor_${borderColor}`] : style.borderColor_transparent : ''}`,
       eleRef: this.selectedOptionContainerRef,
       wrap: "wrap"
     }, /*#__PURE__*/React.createElement(SelectedOptions, {

package/es/MultiSelect/MultiSelect.js

@@ -877,7 +877,8 @@ export class MultiSelectComponent extends React.Component {
       setAriaId,
       isPopupOpen,
       ariaErrorId,
-      customProps
+      customProps,
+      isFocus
     } = this.props;
     let {
       isActive,
@@ -899,13 +900,14 @@ export class MultiSelectComponent extends React.Component {
       disabledOptions
     });
     const isShowClearIcon = !isReadOnly && !isDisabled && !disableAction && isShowClear;
+    const isEditable = !(isReadOnly || isDisabled || disableAction);
     let {
       TextBoxIconProps = {}
     } = customProps;
     return /*#__PURE__*/React.createElement(Container, {
       align: "vertical",
       alignBox: "row",
-      className: `${style.container} ${style[size]} ${needBorder ? !disableAction ? style[`borderColor_${borderColor}`] : style.borderColor_transparent : ''} ${isActive && needBorder || isResponsive ? style.active : ''} ${textBoxClass} ${needBorder ? style.hasBorder : ''}`,
+      className: `${style.container} ${style[size]} ${needBorder ? !disableAction ? style[`borderColor_${borderColor}`] : style.borderColor_transparent : ''} ${isActive && needBorder || isResponsive || isEditable && isFocus && needBorder ? style.active : ''} ${textBoxClass} ${needBorder ? style.hasBorder : ''}`,
       eleRef: this.selectedOptionContainerRef,
       wrap: "wrap"
     }, /*#__PURE__*/React.createElement(SelectedOptions, {

package/es/MultiSelect/props/propTypes.js

@@ -111,7 +111,8 @@ export const MultiSelect_propTypes = {
   ariaErrorId: PropTypes.string,
   customProps: PropTypes.shape({
     TextBoxIconProps: PropTypes.object
-  })
+  }),
+  isFocus: PropTypes.bool
 };
 export const MultiSelectHeader_propTypes = {
   dataId: PropTypes.string,
@@ -246,7 +247,8 @@ export const AdvancedGroupMultiSelect_propTypes = {
   needToCloseOnSelect: PropTypes.func,
   searchStr: PropTypes.string,
   children: PropTypes.node,
-  dataSelectorId: PropTypes.string
+  dataSelectorId: PropTypes.string,
+  isFocus: PropTypes.bool
 };
 export const AdvancedMultiSelect_propTypes = { ...MultiSelect_propTypes,
   selectedOptionDetails: PropTypes.string,
@@ -321,5 +323,6 @@ export const AdvancedMultiSelect_propTypes = { ...MultiSelect_propTypes,
   }),
   isLoading: PropTypes.bool,
   dataSelectorId: PropTypes.string,
-  customClass: PropTypes.object
+  customClass: PropTypes.object,
+  isFocus: PropTypes.bool
 };

package/es/Radio/Radio.js

@@ -4,6 +4,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import Label from "../Label/Label";
 import { Container, Box } from "../Layout";
+import CssProvider from "../Provider/CssProvider";
 import style from "./Radio.module.css";
 export default class Radio extends React.Component {
   constructor(props) {
@@ -57,8 +58,9 @@ export default class Radio extends React.Component {
       customRadio = '',
       customLabel = ''
     } = customClass;
-    let accessMode = isReadOnly ? style.readonly : disabled ? style.disabled : style.pointer;
+    let accessMode = isReadOnly ? style.readonly : disabled ? CssProvider('isDisabled') : style.pointer;
     let toolTip = disabled ? disabledTitle : title ? title : null;
+    const isEditable = !(isReadOnly || disabled);
     let {
       ariaHidden,
       role = 'radio',
@@ -66,7 +68,7 @@ export default class Radio extends React.Component {
       ariaChecked = checked,
       ariaLabel,
       ariaLabelledby,
-      ariaReadonly = isReadOnly || disabled ? true : false
+      ariaReadonly = !isEditable ? true : false
     } = a11y;
     let {
       ContainerProps = {},
@@ -78,11 +80,11 @@ export default class Radio extends React.Component {
       isInline: text ? false : true,
       alignBox: "row",
       align: "both",
-      className: `${style.container} ${active && !disabled ? style.active : ''} ${accessMode} ${isReadOnly || disabled ? '' : style.hoverEfffect} ${checked ? style.checked : ''} ${customRadioWrap}`,
+      className: `${style.container} ${active && !disabled ? style.active : ''} ${accessMode} ${!isEditable ? '' : style.hoverEfffect} ${checked ? style.checked : ''} ${customRadioWrap}`,
       "data-title": toolTip,
       onClick: !isReadOnly && !disabled ? this.onChange : '',
       "aria-checked": ariaChecked,
-      tabindex: isReadOnly || disabled || ariaHidden ? '-1' : tabIndex || '0',
+      tabindex: !isEditable || ariaHidden ? '-1' : tabIndex || '0',
       eleRef: this.handleGetRef,
       role: role,
       "aria-Hidden": ariaHidden,
@@ -92,7 +94,7 @@ export default class Radio extends React.Component {
       ...ContainerProps
     }, /*#__PURE__*/React.createElement(Box, {
       className: `${style.radio} ${checked ? `${style[`rdBox${palette}`]}` : ''} 
-            ${isReadOnly || disabled ? '' : `${style[`hover${palette}`]}`} ${style[size]} ${isFilled ? style.filled : ''} ${style[`centerPath${palette}`]} ${customRadio}`
+            ${!isEditable ? '' : `${style[`hover${palette}`]}`} ${style[size]} ${isFilled ? style.filled : ''} ${style[`centerPath${palette}`]} ${customRadio} ${!isEditable ? `${style.disabled}` : ''}`
     }, /*#__PURE__*/React.createElement("input", {
       type: "hidden",
       id: id,
@@ -115,7 +117,7 @@ export default class Radio extends React.Component {
       className: `${style.centerPath}`
     }) : null))), text && /*#__PURE__*/React.createElement(Box, {
       flexible: true,
-      className: style.text
+      className: `${style.text} ${disabled ? `${style.disabled}` : ''}`
     }, /*#__PURE__*/React.createElement(Label, {
       text: text,
       palette: labelPalette,
@@ -126,7 +128,7 @@ export default class Radio extends React.Component {
       variant: variant,
       title: toolTip ? toolTip : text,
       customClass: `${checked && active ? `${style[`${palette}checkedActive`]}` : ''} 
-              ${style[`${palette}Label`]} ${accessMode} ${customLabel}`,
+              ${style[`${palette}Label`]} ${isEditable ? style.pointer : ''} ${isReadOnly ? style.readonly : ''}  ${customLabel}`,
       ...LabelProps
     })), children, renderRightPlaceholderNode ? renderRightPlaceholderNode : null);
   }

package/es/Radio/Radio.module.css

@@ -19,7 +19,7 @@
   cursor: pointer;
 }
 .readonly, .disabled {
-  cursor: not-allowed;
+  cursor: default;
 }
 .disabled {
   opacity: 0.7