@zohodesk/components 1.0.0-temp-212.1 → 1.0.0-temp-216

package/es/v1/DateTime/DateWidget.js

@@ -1006,6 +1006,8 @@ class DateWidgetComponent extends React.Component {
       onError,
       startDate,
       endDate,
+      weekStartDay,
+      holidays,
       customProps = {}
     } = this.props;
     const {
@@ -1105,7 +1107,9 @@ class DateWidgetComponent extends React.Component {
       onError: onError,
       startDate: startDate,
       endDate: endDate,
-      customProps: DateTimeProps
+      customProps: DateTimeProps,
+      weekStartDay: weekStartDay,
+      holidays: holidays
     }));
   }
 

package/es/v1/DateTime/DaysRow.js

@@ -13,7 +13,8 @@ export default class DaysRow extends PureComponent {
   render() {
     const {
       dayNames,
-      dayNamesShort
+      dayNamesShort,
+      holidays
     } = this.props;
     return /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
@@ -21,7 +22,7 @@ export default class DaysRow extends PureComponent {
       className: style.days
     }, dayNames.map((dayName, index) => /*#__PURE__*/React.createElement(Box, {
       key: dayName,
-      className: `${style.daysStr} ${style.grid} ${index === 0 ? style.sunday : ''}`,
+      className: `${style.daysStr} ${style.grid} ${holidays.includes(index) ? style.holiday : ''}`,
       "data-title": dayName,
       "aria-label": dayName
     }, dayNamesShort[index])));

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

@@ -1,6 +1,8 @@
 export const CalendarView_defaultProps = {
   dataId: 'dateContainer',
-  needBorder: true
+  needBorder: true,
+  weekStartDay: 0,
+  holidays: [0]
 };
 export const Span_defaultProps = {
   dataId: 'calendar-view'
@@ -20,7 +22,9 @@ export const DateTime_defaultProps = {
   i18nKeys: {},
   is24Hour: false,
   isDefaultPosition: false,
-  customDateFormat: null
+  customDateFormat: null,
+  weekStartDay: 0,
+  holidays: [0]
 };
 export const DateWidget_defaultProps = {
   borderColor: 'default',
@@ -43,7 +47,9 @@ export const DateWidget_defaultProps = {
   needErrorOnBlur: false,
   isEditable: false,
   iconOnHover: false,
-  is24Hour: false
+  is24Hour: false,
+  weekStartDay: 0,
+  holidays: [0]
 };
 export const YearView_defaultProps = {
   dataId: 'dateContainer',

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

@@ -13,7 +13,9 @@ export const CalendarView_propTypes = {
   todayDate: PropTypes.string,
   todayYear: PropTypes.string,
   startDate: PropTypes.string,
-  endDate: PropTypes.string
+  endDate: PropTypes.string,
+  weekStartDay: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
+  holidays: PropTypes.arrayOf(PropTypes.number)
 };
 export const Span_propTypes = {
   dataId: PropTypes.string,
@@ -79,7 +81,9 @@ export const DateTime_propTypes = {
   dropBoxPortalId: PropTypes.string,
   startDate: PropTypes.string,
   endDate: PropTypes.string,
-  customProps: PropTypes.object
+  customProps: PropTypes.object,
+  weekStartDay: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
+  holidays: PropTypes.arrayOf(PropTypes.number)
 };
 export const DateWidget_propTypes = {
   borderColor: PropTypes.oneOf(['transparent', 'default']),
@@ -150,7 +154,9 @@ export const DateWidget_propTypes = {
   startDate: PropTypes.string,
   endDate: PropTypes.string,
   getPopupProps: PropTypes.func,
-  customProps: PropTypes.object
+  customProps: PropTypes.object,
+  weekStartDay: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
+  holidays: PropTypes.arrayOf(PropTypes.number)
 };
 export const YearView_propTypes = {
   onSelectMonth: PropTypes.func,
@@ -177,7 +183,8 @@ export const DateTimePopupHeader_propTypes = {
 };
 export const DaysRow_propTypes = {
   dayNames: PropTypes.array,
-  dayNamesShort: PropTypes.object
+  dayNamesShort: PropTypes.object,
+  holidays: PropTypes.arrayOf(PropTypes.number)
 };
 export const Time_propTypes = {
   timeText: PropTypes.string,

package/es/v1/MultiSelect/MultiSelect.js

@@ -191,19 +191,13 @@ export class MultiSelectComponent extends React.Component {
     } //Need To MultiselectNew Component
 
 
-    this.handleComponentDidUpdate(prevProps, prevState);
-
-    if (isPopupOpen && isNextOptions && prevProps.selectedOptions.length !== selectedOptions.length) {
-      let {
-        scrollHeight,
-        clientHeight
-      } = this.suggestionContainer || {};
-      let isElementScrollable = scrollHeight > clientHeight;
-
-      if (!isElementScrollable) {
-        this.handleScrollFuncCall();
-      }
-    }
+    this.handleComponentDidUpdate(prevProps, prevState); // if (isPopupOpen && isNextOptions && prevProps.selectedOptions.length !== selectedOptions.length) {
+    //   let { scrollHeight, clientHeight } = this.suggestionContainer || {};
+    //   let isElementScrollable = scrollHeight > clientHeight;
+    //   if (!isElementScrollable) {
+    //     this.handleScrollFuncCall();
+    //   }
+    // }
   }
 
   componentWillUnmount() {

package/es/v1/Typography/Typography.js

@@ -3,7 +3,7 @@ import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import cssJSLogic from './css/cssJSLogic';
 import { mergeStyle } from '@zohodesk/utils';
-import defaultStyle from './css/Typography.module.css';
+import defaultStyle from './css/v1_Typography.module.css';
 
 const Typography = props => {
   const {

package/lib/AvatarTeam/props/propTypes.js

@@ -7,6 +7,8 @@ exports.propTypes = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _propTypes2 = require("../../Avatar/props/propTypes");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var propTypes = {
@@ -32,7 +34,7 @@ var propTypes = {
   needDefaultBorder: _propTypes["default"].bool,
   customProps: _propTypes["default"].shape({
     AvatarTeamProps: _propTypes["default"].object,
-    AvatarProps: _propTypes["default"].object
+    AvatarProps: _propTypes["default"].exact(_propTypes2.propTypes)
   })
 };
 exports.propTypes = propTypes;

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

@@ -535,15 +535,14 @@
 
 .primaryfilledStrike {
   --button_border_color: var(--zdt_button_primaryfill_bg);
-  background-color: var(--zdt_button_primaryfill_bg);
 }
 
 [dir=ltr] .primaryfilledStrike {
-  background: repeating-linear-gradient(120deg, var(--zdt_button_primary_filled_strike) , var(--zdt_button_primary_filled_strike) 1px, var(--zdt_button_primaryfill_bg) 1px,var(--zdt_button_primaryfill_bg) 8px);
+  background: repeating-linear-gradient(120deg, var(--zdt_button_primary_filled_strike) , var(--zdt_button_primary_filled_strike) 1px, var(--zdt_button_primaryfill_bg) 1px,var(--zdt_button_primaryfill_bg) 8px), var(--zdt_button_primaryfill_bg);
 }
 
 [dir=rtl] .primaryfilledStrike {
-  background: repeating-linear-gradient(-120deg, var(--zdt_button_primary_filled_strike) , var(--zdt_button_primary_filled_strike) 1px, var(--zdt_button_primaryfill_bg) 1px,var(--zdt_button_primaryfill_bg) 8px);
+  background: repeating-linear-gradient(-120deg, var(--zdt_button_primary_filled_strike) , var(--zdt_button_primary_filled_strike) 1px, var(--zdt_button_primaryfill_bg) 1px,var(--zdt_button_primaryfill_bg) 8px), var(--zdt_button_primaryfill_bg);
 }
 
 [dir=ltr] .dangerStrike {
@@ -556,15 +555,14 @@
 
 .dangerfilledStrike {
   --button_border_color: var(--zdt_button_danger_border);
-  background-color: var(--zdt_button_dangerfill_bg);
 }
 
 [dir=ltr] .dangerfilledStrike {
-  background: repeating-linear-gradient(120deg,var(--zdt_button_danger_strike) , var(--zdt_button_danger_strike) 1px, var(--zdt_button_dangerfill_bg) 1px,var(--zdt_button_dangerfill_bg) 8px);
+  background: repeating-linear-gradient(120deg,var(--zdt_button_danger_strike) , var(--zdt_button_danger_strike) 1px, var(--zdt_button_dangerfill_bg) 1px,var(--zdt_button_dangerfill_bg) 8px), var(--zdt_button_dangerfill_bg);
 }
 
 [dir=rtl] .dangerfilledStrike {
-  background: repeating-linear-gradient(-120deg,var(--zdt_button_danger_strike) , var(--zdt_button_danger_strike) 1px, var(--zdt_button_dangerfill_bg) 1px,var(--zdt_button_dangerfill_bg) 8px);
+  background: repeating-linear-gradient(-120deg,var(--zdt_button_danger_strike) , var(--zdt_button_danger_strike) 1px, var(--zdt_button_dangerfill_bg) 1px,var(--zdt_button_dangerfill_bg) 8px), var(--zdt_button_dangerfill_bg);
 }
 
 [dir=ltr] .secondaryStrike {

package/lib/CheckBox/CheckBox.js

@@ -126,16 +126,17 @@ var CheckBox = /*#__PURE__*/function (_React$Component) {
           role = _a11y$role === void 0 ? 'checkbox' : _a11y$role,
           _a11y$ariaChecked = a11y.ariaChecked,
           ariaChecked = _a11y$ariaChecked === void 0 ? checked : _a11y$ariaChecked;
+      var isEditable = !(isReadOnly || disabled);
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
         dataId: dataId,
         isCover: false,
         isInline: text ? false : true,
         alignBox: "row",
         align: "vertical",
-        className: "".concat(_CheckBoxModule["default"].container, " ").concat(accessMode, " ").concat(isReadOnly || disabled ? '' : "".concat(_CheckBoxModule["default"][palette]), " \n        ").concat(checked ? "".concat(_CheckBoxModule["default"]["checked".concat(palette)]) : '', " ").concat(customCheckBox),
+        className: "".concat(_CheckBoxModule["default"].container, " ").concat(accessMode, " ").concat(!isEditable ? '' : "".concat(_CheckBoxModule["default"][palette]), " \n        ").concat(checked ? "".concat(_CheckBoxModule["default"]["checked".concat(palette)]) : '', "  ").concat(customCheckBox),
         "data-title": toolTip,
-        onClick: isReadOnly || disabled ? null : this.onChange,
-        tabIndex: isReadOnly || disabled || ariaHidden ? '-1' : '0',
+        onClick: !isEditable ? null : this.onChange,
+        tabIndex: !isEditable || ariaHidden ? '-1' : '0',
         "aria-checked": ariaChecked,
         eleRef: this.handleGetContainerRef,
         role: role,
@@ -144,7 +145,7 @@ var CheckBox = /*#__PURE__*/function (_React$Component) {
         "aria-hidden": ariaHidden,
         "data-selector-id": dataSelectorId || id
       }, CheckBoxProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: "".concat(_CheckBoxModule["default"].boxContainer, " ").concat(_CheckBoxModule["default"][size], " ").concat(customCBoxSize, " ").concat(isFilled ? _CheckBoxModule["default"].filled : '')
+        className: "".concat(_CheckBoxModule["default"].boxContainer, " ").concat(_CheckBoxModule["default"][size], " ").concat(customCBoxSize, " ").concat(isFilled ? _CheckBoxModule["default"].filled : '', " ").concat(!isEditable ? "".concat(_CheckBoxModule["default"]["disabled"]) : '')
       }, /*#__PURE__*/_react["default"].createElement("input", {
         type: "hidden",
         id: id,

package/lib/CheckBox/CheckBox.module.css

@@ -97,10 +97,10 @@
   margin-right: var(--zd_size6) ;
 }
 
-.checkedprimary,
+ .checkedprimary,
 .checkeddanger {
   stroke: var(--checkbox_checked_stroke_color);
-}
+} 
 .primary:hover
 /* .primary:focus  */
 {
@@ -138,6 +138,9 @@
 .checkeddangerLabel {
   --checkbox_checked_active_color: var(--zdt_checkbox_danger_stroke_border);
 }
+.disabled {
+  opacity: 0.7
+}
 @keyframes tickAnimate {
   0% {
     stroke-dashoffset: 40;