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

package/README.md

@@ -32,6 +32,62 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.2.55 (yet to publish)
+
+- **ListItemWithAvatar** 
+  - `AvatarTeamProps` and `AvatarProps` props has been added under the `customProps` group.
+
+- **Tag** 
+  - `avatarProps` and `iconProps` prop has been added under the `customProps` group.
+
+# 1.2.54
+
+- **Reverted 1.2.45 MultiSelect Fix**
+  - The issue with the non-scrollable API call trigger in multiselect, introduced in version `1.2.45`, has been `reverted` in this version.
+
+
+# 1.2.53
+
+- **CheckBox** - Disabled State CheckBox Color Fixed
+- **Radio** - ReadOnly State Radio Cursor and color Fixed
+- **Textarea** - isFocus Prop added
+- **AdvancedGroupMultiSelect** - isFocus Prop added
+- **AdvancedMultiSelect** - isFocus Prop added
+- **MultiSelect** - isFocus Prop added
+- **DateWidget** - onDropboxClose,renderCustomHeader,renderCustomFooter Props added
+- **DateTime** - renderCustomHeader,renderCustomFooter Props added
+- **GroupSelect** - customProps supported
+
+# 1.2.52
+
+- **Typography** - component added in v0
+
+# 1.2.51
+
+- **Popup** - Fixed issue: Error on unmount when target ref is not available.
+
+# 1.2.50
+
+- **DateTime (v0&v1), CalendarView (v0&v1)**
+
+  - Week starting day customization support added with `weekStartDay` props and week holiday customization support with `holidays` prop
+  
+- **DateWidget (v0&v1)**
+
+  - Support has been added for `weekStartDay`, `holidays` props
+
+- **DaysRow (v0&v1)**
+
+  - `holidays` prop added for holiday column indication
+
+# 1.2.49 
+
+- **Popup**
+  - `isOutsideScrollBlocked` prop supported - Scroll blocking behaviours supported
+  - Fixed popup re-positioning on window resize not working properly - Issue fixed
+- **DropBoxElement**
+  - The dot-ui-element attribute has been added to facilitate the use of component-level CSS selectors
+
 # 1.2.48
 
 - **ResizeObserver**
@@ -104,7 +160,7 @@ In this Package, we Provide Some Basic Components to Build Web App
 
 - **LibraryContext** - coloredTagVariant, hasTagColorInheritedToText properties added
 - **Tag** - customAttributes prop supported
-- **TextBoxIcon** - needInputFocusOnParentClick prop supported
+- **TextBoxIcon** - needInputFocusOnWrapperClick prop supported
 
 # 1.2.38
 

package/es/AvatarTeam/props/propTypes.js

@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import { propTypes as AvatarProps } from '../../Avatar/props/propTypes';
 export const propTypes = {
   dataId: PropTypes.string,
   dataSelectorId: PropTypes.string,
@@ -22,6 +23,6 @@ export const propTypes = {
   needDefaultBorder: PropTypes.bool,
   customProps: PropTypes.shape({
     AvatarTeamProps: PropTypes.object,
-    AvatarProps: PropTypes.object
+    AvatarProps: PropTypes.exact(AvatarProps)
   })
 };

package/es/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/es/CheckBox/CheckBox.js

@@ -74,17 +74,18 @@ export default class CheckBox extends React.Component {
       role = 'checkbox',
       ariaChecked = checked
     } = a11y;
+    const isEditable = !(isReadOnly || disabled);
     return /*#__PURE__*/React.createElement(Container, {
       dataId: dataId,
       isCover: false,
       isInline: text ? false : true,
       alignBox: "row",
       align: "vertical",
-      className: `${style.container} ${accessMode} ${isReadOnly || disabled ? '' : `${style[palette]}`} 
-        ${checked ? `${style[`checked${palette}`]}` : ''} ${customCheckBox}`,
+      className: `${style.container} ${accessMode} ${!isEditable ? '' : `${style[palette]}`} 
+        ${checked ? `${style[`checked${palette}`]}` : ''}  ${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,
@@ -94,7 +95,7 @@ export default class CheckBox extends React.Component {
       "data-selector-id": dataSelectorId || id,
       ...CheckBoxProps
     }, /*#__PURE__*/React.createElement(Box, {
-      className: `${style.boxContainer} ${style[size]} ${customCBoxSize} ${isFilled ? style.filled : ''}`
+      className: `${style.boxContainer} ${style[size]} ${customCBoxSize} ${isFilled ? style.filled : ''} ${!isEditable ? `${style[`disabled`]}` : ''}`
     }, /*#__PURE__*/React.createElement("input", {
       type: "hidden",
       id: id,

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