@zohodesk/components 1.0.0-temp-178 → 1.0.0-temp-180

package/PropValidationExcludeFilesArray.js

@@ -0,0 +1 @@
+[]

package/README.md

@@ -32,6 +32,12 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.2.19 
+
+- Typography - lineheight unitless prop added
+- v1/Modal - converted to functional component
+- DateWidget - Manual Type TimeZone Issue Fixed
+
  # 1.2.18
 
  - TextBox - MaxLength Default Prop Removed

package/assets/Appearance/dark/mode/Component_DarkMode.module.css

@@ -345,4 +345,7 @@
 	--zdt_customscroll_thump_dark_hover_bg: hsla(0, 0.00%, calc(88.24% + var(--zdc_default_inverse_low)), calc( 0.14 + var(--zdc_alpha_low)));
 	--zdt_customscroll_dark_border: hsla(0, 0.00%, calc(88.24% + var(--zdc_lighter_medium)), calc( 0.12 + var(--zdc_alpha_low)));
 	--zdt_customscroll_dark_bg: hsla(0, 0.00%, calc(88.24% + var(--zdc_default_low)), calc( 0.06 + var(--zdc_alpha_low)));
+	
+	/* popover */
+	--zdt_popover_default_bg: hsla(217, 23.08%, calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 }

package/assets/Appearance/light/mode/Component_LightMode.module.css

@@ -345,4 +345,7 @@
 	--zdt_customscroll_thump_dark_hover_bg: hsla(0, 0.00%, calc(88.24% + var(--zdc_default_inverse_low)), calc( 0.17 + var(--zdc_alpha_low)));
 	--zdt_customscroll_dark_border: hsla(0, 0.00%, calc(88.24% + var(--zdc_lighter_medium)), calc( 0.12 + var(--zdc_alpha_low)));
 	--zdt_customscroll_dark_bg: hsla(0, 0.00%, calc(88.24% + var(--zdc_default_low)), calc( 0.06 + var(--zdc_alpha_low)));
+	
+	/* popover */
+	--zdt_popover_default_bg: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 }

package/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css

@@ -345,4 +345,7 @@
 	--zdt_customscroll_thump_dark_hover_bg: hsla(0, 0.00%, calc(88.24% + var(--zdc_default_inverse_low)), calc( 0.14 + var(--zdc_alpha_low)));
 	--zdt_customscroll_dark_border: hsla(0, 0.00%, calc(88.24% + var(--zdc_lighter_medium)), calc( 0.12 + var(--zdc_alpha_low)));
 	--zdt_customscroll_dark_bg: hsla(0, 0.00%, calc(88.24% + var(--zdc_default_low)), calc( 0.06 + var(--zdc_alpha_low)));
+	
+	/* popover */
+	--zdt_popover_default_bg: hsla(0, 0.00%, calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 }

package/es/Avatar/Avatar.js

@@ -162,7 +162,8 @@ export default class Avatar extends React.Component {
       "data-id": dataId,
       "data-test-id": dataId,
       onClick: onClick,
-      "data-selector-id": dataSelectorId
+      "data-selector-id": dataSelectorId,
+      tabIndex: onClick ? 0 : null
     }, AvatarProps), showInitial && !showAlternateAvatar && /*#__PURE__*/React.createElement("span", {
       className: `${style.initial}`,
       "data-id": `${dataId}_AvatarInitial`,

package/es/Avatar/Avatar.module.css

@@ -18,19 +18,31 @@
   composes: dInflex alignVertical alignHorizontal from '../common/common.module.css';
   vertical-align: middle;
   font-size: var(--avatar_font_size);
+  /* css:theme-validation:ignore */
   color: var(--avatar_text_color);
   border-width: var(--avatar_border_width);
   border-style: var(--avatar_border_style);
 }
 
 .border {
+  /* css:theme-validation:ignore */
   border-color: var(--avatar_border_color);
 }
 
+.borderOnHover:hover,
+.borderOnActive {
+  /* css:theme-validation:ignore */
+}
+
 .borderOnHover:hover, .borderOnActive {
   border-color: var(--avatar_border_hoverColor);
 }
 
+.avatar,
+.primary {
+  /* css:theme-validation:ignore */
+}
+
 .avatar, .primary {
   background-color: var(--avatar_bg_color);
 }

package/es/AvatarTeam/AvatarTeam.module.css

@@ -25,6 +25,8 @@
   composes: varClass;
   composes: posab from '../common/common.module.css';
   top: var(--avatarteam_top_top);
+  /* css:theme-validation:ignore */
+  /* css:theme-validation:ignore */
   width: var(--avatarteam_width);
   height: var(--avatarteam_height);
   outline-width: var(--avatarteam_outline_width);

package/es/AvatarTeam/__tests__/__snapshots__/AvatarTeam.spec.js.snap

@@ -252,6 +252,7 @@ exports[`AvatarTeam rendering the onClick prop with asFragment and toMatchSnapsh
       data-id="Avatar"
       data-selector-id="avatar"
       data-test-id="Avatar"
+      tabindex="0"
     >
       <span
         class="initial"

package/es/Button/css/Button.module.css

@@ -48,10 +48,13 @@
   composes: dotted from '../../common/common.module.css';
   position: relative;
   font-size: var(--button_font_size);
+  /* css:theme-validation:ignore */
   color: var(--button_text_color);
   font-family: var(--button_font_family);
   text-transform: var(--button_text_transform);
+  /* css:theme-validation:ignore */
   min-width: var(--button_min_width);
+  /* css:theme-validation:ignore */
   height: var(--button_height);
   background-color: var(--button_bg_color);
   border-radius: var(--button_border_radius);
@@ -295,6 +298,7 @@
 .loadingelement:after {
   content: '';
   position: absolute;
+  /* css:theme-validation:ignore */
 }
 
 .loadingelement:before, .loadingelement:after {
@@ -468,6 +472,7 @@
   transform-origin: center;
   border-width: 2px 2px 0 0;
   border-style: solid;
+  /* css:theme-validation:ignore */
   border-color: var(--button_success_border_color);
   animation: tick var(--zd_no_transition3) ease 0s forwards;
 }
@@ -523,4 +528,7 @@
   }
 }
 
-.loader{color:var(--dot_mirror)}
+.loader{
+  /* css:theme-validation:ignore */
+  color:var(--dot_mirror)
+}

package/es/Buttongroup/Buttongroup.module.css

@@ -11,6 +11,8 @@
 .buttonGroup {
   composes: varClass;
   composes: cboth from '../common/common.module.css';
+  /* css:theme-validation:ignore */
+  /* css:theme-validation:ignore */
   background-color: var(--buttongroup_bg_color);
   box-shadow: var(--buttongroup_box_shadow);
   padding: var(--buttongroup_padding);
@@ -24,8 +26,7 @@
 }
 
 [dir=ltr] .footer {
-  --buttongroup_padding: var(--zd_size20) 0 var(--zd_size20) var(--zd_size60
-)    ;
+  --buttongroup_padding: var(--zd_size20) 0 var(--zd_size20) var(--zd_size60);
 }
 
 [dir=rtl] .footer {

package/es/CheckBox/CheckBox.module.css

@@ -34,6 +34,7 @@
 }
 .boxContainer {
   composes: offSelection from '../common/common.module.css';
+  /* css:theme-validation:ignore */
   border-radius: 2px;
   background-color: var(--checkbox_bg_color);
 }
@@ -120,6 +121,7 @@
 
 .checkedprimaryLabel,
 .checkeddangerLabel {
+  /* css:theme-validation:ignore */
   color: var(--checkbox_checked_active_color);
 }
 .activeprimaryLabel:hover

package/es/DateTime/DateTime.module.css

@@ -35,7 +35,8 @@
 .grid {
   width: var(--zd_size28) ;
   height: var(--zd_size28) ;
-  line-height: 1.3846;
+  line-height: var(--zd_size18);
+  /* css:theme-validation:ignore */
   text-align: center;
   padding: var(--zd_size4) 0 ;
   border-radius: 50%;
@@ -71,7 +72,7 @@
 
 .thMonYear {
   font-size: var(--zd_font_size13) ;
-  line-height: 1.8462;
+  line-height: var(--zd_size24);
   color: var(--zdt_datetime_datestr_text);
   composes: semibold;
   display: initial

package/es/DateTime/YearView.module.css

@@ -9,7 +9,7 @@
 .month {
   width: 30.333%;
   font-size: var(--zd_font_size12) ;
-  line-height: 2.1667;
+  line-height: var(--zd_size26);
   height: var(--zd_size26) ;
   color: var(--zdt_yearview_month_text);
   text-align: center;

package/es/DateTime/dateFormatUtils/dateFormat.js

@@ -407,7 +407,12 @@ export function getSelectedDate(values, props) {
       selectedValue = '';
 
   if (isDateTime) {
-    selectedInMillis = datetime.tz.tzToUtc(Date.UTC(year, month, date, hour, mins), timeZone);
+    if (timeZone) {
+      selectedInMillis = datetime.tz.tzToUtc(Date.UTC(year, month, date, hour, mins), timeZone);
+    } else {
+      selectedInMillis = Date.UTC(year, month, date, hour, mins);
+    }
+
     selectedValue = datetime.ISO(selectedInMillis);
   } else {
     selectedInMillis = Date.UTC(year, month, date);

package/es/DropBox/DropBoxElement/css/DropBoxElement.module.css

@@ -18,6 +18,11 @@
     box-shadow: var(--dropbox_box_shadow);
 }
 
+.defaultPalette,
+.darkPalette {
+  /* css:theme-validation:ignore */
+}
+
 .defaultPalette, .darkPalette {
     background-color: var(--dropbox_bg_color);
 }
@@ -196,10 +201,7 @@
     position: absolute;
     height: var(--zd_size34) ;
     width: var(--zd_size34) ;
-    clip: rect(var(--zd_size3),
- undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined var(--zd_size29),
- undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined var(--zd_size17),
- undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined var(--zd_size8)) ;
+    clip: rect(var(--zd_size3), var(--zd_size29), var(--zd_size17), var(--zd_size8)) ;
     padding: var(--zd_size4) ;
     display: flex;
     align-items: center;
@@ -210,6 +212,7 @@
     height: var(--zd_size10) ;
     width: var(--zd_size10) ;
     box-shadow: 1px -1px 2px 0 var(--dropbox_arrow_box_shadow_color);
+  /* css:theme-validation:ignore */
     background-color: var(--dropbox_bg_color);
     -webkit-transform: rotateZ(-45deg);
     transform: rotateZ(-45deg);
@@ -419,6 +422,7 @@
 .closeBar {
   /*  Variable:Ignore  */
     height: 6px;
+  /* css:theme-validation:ignore */
     width: 20% ;
     border-radius: 5px;
     background-color: var(--dropbox_mob_close_bg_color);

package/es/DropBox/css/DropBox.module.css

@@ -49,6 +49,7 @@
 
 .freeze {
   composes: varClass;
+  /* css:theme-validation:ignore */
   background: var(--dropbox_mob_bg_color);
 }
 

package/es/DropDown/DropDownHeading.module.css

@@ -18,7 +18,9 @@
   font-size: var(--zd_font_size11) ;
   letter-spacing: 0.6px;
   text-transform: var(--dropdownheading_text_transform);
+  /* css:theme-validation:ignore */
   color: var(--dropdownheading_text_color);
+  /* css:theme-validation:ignore */
   padding: var(--dropdownheading_padding);
   background-color: var(--dropdownheading_bg_color);
 }
@@ -33,6 +35,10 @@
 .light {
   composes: default;
 }
+.light::after,
+.dark::after {
+  /* css:theme-validation:ignore */
+}
 .light::after, .dark::after {
   background-color: var(--dropdownheading_underline_bg_color);
 }

package/es/DropDown/DropDownItem.module.css

@@ -20,6 +20,8 @@
   position: relative;
   color: var(--zdt_dropdown_default_text);
   font-size: var(--zd_font_size13) ;
+  /* css:theme-validation:ignore */
+  /* css:theme-validation:ignore */
   padding: var(--dropdownitem-padding);
   border-style: solid;
   border-color: var(--dropdownitem-border-color);
@@ -74,6 +76,7 @@
   opacity: 0;
   visibility: hidden;
   width: var(--dropdownitem-user-width);
+  /* css:theme-validation:ignore */
   border-width: var(--dropdownitem-user-border-width);
   border-style: var(--dropdownitem-user-border-style);
   border-color: var(--dropdownitem-user-border-color);

package/es/Label/Label.module.css

@@ -4,13 +4,14 @@
   --label_text_color: var(--zdt_label_default_text);
   --label_font_family: var(--zd_regular);
   --label_cursor: default;
-  --label_line_height: 1.2857142857142858;
+  --label_line_height: 18px;
 }
 .label {
   composes: varClass;
   vertical-align: middle;
   line-height: var(--label_line_height);
   font-size: var(--label_font_size);
+  /* css:theme-validation:ignore */
   color: var(--label_text_color);
   font-family: var(--label_font_family);
   cursor: var(--label_cursor);

package/es/ListItem/ListContainer.js

@@ -89,7 +89,7 @@ const ListContainer = props => {
     eleRef: eleRef,
     tagName: isLink ? 'a' : 'li',
     "data-title": isDisabled ? disableTitle : title
-  }, options, customProps), children);
+  }, options, customProps, a11y), children);
 };
 
 ListContainer.defaultProps = ListContainerDefaultProps;

package/es/ListItem/ListItem.module.css

@@ -15,8 +15,7 @@
   /* listitem tick icon default variables */
   --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
 }[dir=ltr] .varClass {
-  --listitem_avatar_margin: 0 var(--zd_size15) 0 0
-    ;
+  --listitem_avatar_margin: 0 var(--zd_size15) 0 0;
 }[dir=rtl] .varClass {
   --listitem_avatar_margin: 0 0 0 var(--zd_size15);
 }
@@ -24,8 +23,10 @@
   composes: varClass;
   position: relative;
   list-style: none;
+  /* css:theme-validation:ignore */
   color: var(--listitem_text_color);
   font-size: var(--zd_font_size13) ;
+  /* css:theme-validation:ignore */
   height: var(--listitem_height);
   min-height: var(--listitem_min_height);
   text-decoration: none;
@@ -35,6 +36,11 @@
   border-color: var(--listitem_border_color);
   cursor: pointer;
 }
+.list,
+.default,
+.secondary {
+  /* css:theme-validation:ignore */
+}
 .list, .default, .secondary {
   background-color: var(--listitem_bg_color);
 }
@@ -48,9 +54,7 @@
   --listitem_border_color: var(--zdt_listitem_active_border);
 }
 [dir=ltr] .small {
-  --listitem_padding: var(--zd_size7) var(--zd_size3) var(--zd_size7
-)    var(--zd_size5
-)    ;
+  --listitem_padding: var(--zd_size7) var(--zd_size3) var(--zd_size7) var(--zd_size5);
 }
 [dir=rtl] .small {
   --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size3);
@@ -63,9 +67,7 @@
   --listitem_height: var(--zd_size48);
 }
 [dir=ltr] .large {
-  --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10
-)    var(--zd_size25
-)    ;
+  --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25);
 }
 [dir=rtl] .large {
   --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
@@ -75,7 +77,7 @@
   composes: dotted from '../common/common.module.css';
 }
 .value, .multiLineValue {
-  line-height: 1.5385;
+  line-height: var(--zd_size20);
 }
 .multiLineValue{
   word-break: break-word;
@@ -99,6 +101,13 @@
   margin: var(--listitem_avatar_margin);
 }
 
+.defaultHover,
+.primaryHover,
+.secondaryHover,
+.darkHover {
+  /* css:theme-validation:ignore */
+}
+
 .defaultHover, .primaryHover, .secondaryHover, .darkHover {
   background-color: var(--listitem_highlight_bg_color);
 }
@@ -140,6 +149,12 @@
   --listitem_bg_color: var(--zdt_listitem_dark_effect_bg);
   --listitem_highlight_bg_color: var(--zdt_listitem_dark_effect_bg);
 }
+.activedefault,
+.activeprimary,
+.activesecondary,
+.activedark {
+  /* css:theme-validation:ignore */
+}
 .activedefault, .activeprimary, .activesecondary, .activedark {
   background-color: var(--listitem_active_bg_color);
 }
@@ -165,6 +180,7 @@
 .defaultTick,
 .darkTick {
   position: absolute;
+  /* css:theme-validation:ignore */
   color: var(--listitem_tickicon_color);
 }
 
@@ -185,25 +201,19 @@
   display: block;
 }
 [dir=ltr] .smallwithTick {
-  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7
-)    var(--zd_size5
-)    ;
+  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size5);
 }
 [dir=rtl] .smallwithTick {
   --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size39);
 }
 [dir=ltr] .mediumwithTick {
-  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7
-)    var(--zd_size20
-)    ;
+  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size20);
 }
 [dir=rtl] .mediumwithTick {
   --listitem_padding: var(--zd_size7) var(--zd_size20) var(--zd_size7) var(--zd_size39);
 }
 [dir=ltr] .largewithTick {
-  --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10
-)    var(--zd_size25
-)    ;
+  --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10) var(--zd_size25);
 }
 [dir=rtl] .largewithTick {
   --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39);

package/es/MultiSelect/Suggestions.js

@@ -60,7 +60,8 @@ export default class Suggestions extends React.PureComponent {
       const isHighlight = hoverOption === index || id === hoverId ? true : false;
       const list_a11y = Object.assign({}, a11y, {
         ariaSelected: isActive,
-        ariaLabel: value
+        ariaLabel: value,
+        'data-a11y-list-active': isHighlight
       });
       const commonProps = {
         isDisabled,

package/es/PopOver/PopOver.module.css

@@ -1,5 +1,6 @@
 .popup {
   position: relative;
+  /* css:theme-validation:ignore */
   background-color: var(--dot_white);
 }
 .target {

package/es/Radio/Radio.module.css

@@ -25,6 +25,7 @@
   composes: offSelection from '../common/common.module.css';
   width: var(--radio_width);
   height: var(--radio_height);
+  /* css:theme-validation:ignore */
   stroke: var(--radio_stroke_color);
   background: var(--radio_bg_color);
   border-radius: 50%;

package/es/Ribbon/Ribbon.module.css

@@ -8,7 +8,7 @@
   --ribbon_box_shadow: none;
   --ribbon_border_width: 0;
   --ribbon_border_color: var(--zdt_ribbon_default_border);
-  --ribbon_line_height: 1.2;
+  --ribbon_line_height: normal;
 
   /* flag ribbon default variable */
 
@@ -35,9 +35,12 @@
 .basic {
   composes: varClass;
   position: relative;
+  /* css:theme-validation:ignore */
   color: var(--ribbon_text_color);
   text-transform: var(--ribbon_text_transform);
   font-size: var(--ribbon_font_size);
+  /* css:theme-validation:ignore */
+  /* css:theme-validation:ignore */
   line-height: var(--ribbon_line_height);
   padding: var(--ribbon_padding);
   background-color: var(--ribbon_bg_color);
@@ -212,13 +215,12 @@
   composes: dotted from '../common/common.module.css';
   display: block;
   --ribbon_text_color: var(--zdt_ribbon_white_text);
-  --ribbon_line_height: 1.53846154;
+  --ribbon_line_height: 20px;
   --ribbon_text_transform: uppercase;
 }
 
 [dir=ltr] .flag {
-  --ribbon_padding: var(--zd_size4) var(--zd_size24) var(--zd_size4) var(--zd_size6
-)    ;
+  --ribbon_padding: var(--zd_size4) var(--zd_size24) var(--zd_size4) var(--zd_size6);
 }
 
 [dir=rtl] .flag {
@@ -260,7 +262,7 @@
   --ribbon_text_color: var(--zdt_ribbon_white_text);
   --ribbon_text_transform: uppercase;
   --ribbon_padding: var(--zd_size6) var(--zd_size10);
-  --ribbon_line_height: 1.53846154;
+  --ribbon_line_height: 20px;
   text-align: center;
 }
 
@@ -335,6 +337,7 @@
   position: absolute;
   content: '';
   top: var(--ribbon_tag_before_top);
+  /* css:theme-validation:ignore */
   width: var(--ribbon_tag_before_width);
   height: var(--ribbon_tag_before_height);
   background-color: inherit;
@@ -370,7 +373,7 @@
 .sticker {
   display: block;
   height: var(--zd_size18) ;
-  line-height: 0.8462;
+  line-height: var(--zd_size11);
   --ribbon_text_color: var(--zdt_ribbon_white_text);
   --ribbon_text_transform: uppercase;
   text-align: center;

package/es/Select/Select.js

@@ -298,7 +298,8 @@ export class SelectComponent extends Component {
       isPopupOpen,
       onKeyDown,
       isPopupOpenOnEnter,
-      needCloseOnSelect
+      needCloseOnSelect,
+      isPopupReady
     } = this.props;
     let {
       hoverIndex,
@@ -349,7 +350,7 @@ export class SelectComponent extends Component {
         id
       } = option || {};
 
-      if (isPopupOpen && !getIsEmptyValue(id) && onChange) {
+      if (isPopupReady && !getIsEmptyValue(id) && onChange) {
         onChange(id, optionsNormalize[id]);
         needCloseOnSelect && this.handlePopupClose(e);
       }

package/es/Switch/Switch.js

@@ -59,7 +59,6 @@ export default class Switch extends React.Component {
       "data-title": disabled ? disableTitle : title,
       "aria-checked": checked,
       role: "switch",
-      tabIndex: isReadOnly || disabled ? '-1' : '0',
       dataSelectorId: dataSelectorId
     }, SwitchProps), /*#__PURE__*/React.createElement(Box, {
       className: `${style[size]} ${customSwitchSize}`
@@ -77,7 +76,8 @@ export default class Switch extends React.Component {
       htmlFor: id,
       "data-id": dataId,
       "data-test-id": dataId,
-      className: `${style.label} ${style[`${size}Label`]} ${customSwitch}`
+      className: `${style.label} ${style[`${size}Label`]} ${customSwitch}`,
+      tabIndex: isReadOnly || disabled ? '-1' : '0'
     })), text && /*#__PURE__*/React.createElement(Label, _extends({
       text: text,
       palette: labelPalette,

package/es/Switch/Switch.module.css

@@ -26,6 +26,7 @@
   display: inline-block;
   position: relative;
   transition: box-shadow var(--zd_transition3) ease-in-out;
+  /* css:theme-validation:ignore */
   background-color: var(--switch_off_bg_color);
   border-radius: 20px;
   cursor: pointer;
@@ -44,6 +45,7 @@
   right: 50% ;
   transition: all var(--zd_transition2);
   box-shadow: var(--switch_cricle_box_shadow);
+  /* css:theme-validation:ignore */
   background-color: var(--switch_circle_bg_color);
   border-radius: var(--switch_circle_border_radius);
 }