@zohodesk/components 1.0.0-temp-211.2 → 1.0.0-temp-217

package/es/v1/DateTime/DateTime.js

@@ -652,7 +652,9 @@ export default class DateTime extends React.PureComponent {
       dropBoxPortalId,
       startDate,
       endDate,
-      customProps = {}
+      customProps = {},
+      holidays,
+      weekStartDay
     } = this.props;
     const {
       TimeProps = {}
@@ -671,6 +673,16 @@ export default class DateTime extends React.PureComponent {
       dayNamesShort = dayNamesShortDefault
     } = i18nKeys;
     const showmonthtxt = title(date, year, month, monthNames);
+    let customDayNames = dayNames,
+        customDayNamesShort = dayNamesShort,
+        customizedHolidays = holidays;
+
+    if (weekStartDay !== 0) {
+      customDayNames = [...dayNames.slice(weekStartDay), ...dayNames.slice(0, weekStartDay)];
+      customDayNamesShort = [...dayNamesShort.slice(weekStartDay), ...dayNamesShort.slice(0, weekStartDay)];
+      customizedHolidays = holidays.map(dayIndex => customDayNames.indexOf(dayNames[dayIndex]));
+    }
+
     const childEle = /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${innerClass}`,
       "data-id": `${dataId}_Calendar`,
@@ -692,13 +704,15 @@ export default class DateTime extends React.PureComponent {
       year: year,
       month: month,
       onSelect: this.dateSelect,
-      dayNames: dayNames,
-      dayNamesShort: dayNamesShort,
+      dayNames: customDayNames,
+      dayNamesShort: customDayNamesShort,
       todayDate: todayDate,
       todayMonth: todayMonth,
       todayYear: todayYear,
       startDate: startDate,
-      endDate: endDate
+      endDate: endDate,
+      weekStartDay: weekStartDay,
+      holidays: customizedHolidays
     }), isDateTimeField ? /*#__PURE__*/React.createElement(Time, {
       timeText: timeText,
       dataId: dataId,

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,7 +191,13 @@ export class MultiSelectComponent extends React.Component {
     } //Need To MultiselectNew Component
 
 
-    this.handleComponentDidUpdate(prevProps, prevState);
+    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/Select/GroupSelect.js

@@ -596,6 +596,10 @@ export class GroupSelectComponent extends PureComponent {
       emptyText: i18nKeys.emptyText || emptyMessage,
       searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
     });
+    const {
+      TextBoxIcon_i18n,
+      TextBox_ally_label = 'Click to select options'
+    } = i18nKeys;
     let {
       selectedId,
       hoverIndex,
@@ -655,6 +659,7 @@ export class GroupSelectComponent extends PureComponent {
         ariaActivedescendant: selectedId,
         ariaOwns: setAriaId
       },
+      i18nKeys: TextBoxIcon_i18n,
       isFocus: isPopupReady,
       autoComplete: false
     }, /*#__PURE__*/React.createElement(Container, {

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/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;