@zohodesk/components 1.2.52 → 1.2.53

package/es/Select/GroupSelect.js

@@ -588,7 +588,8 @@ export class GroupSelectComponent extends PureComponent {
       htmlId,
       iconOnHover,
       isLoading,
-      dataSelectorId
+      dataSelectorId,
+      customProps
     } = this.props;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
@@ -617,6 +618,10 @@ export class GroupSelectComponent extends PureComponent {
     } = normalizedFormatOptions[selectedId] || {};
     let setAriaId = this.getNextAriaId();
     let ariaErrorId = this.getNextAriaId();
+    let {
+      TextBoxIconProps = {},
+      TextBoxProps = {}
+    } = customProps;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`,
       "data-id": dataIdSlctComp,
@@ -659,7 +664,8 @@ export class GroupSelectComponent extends PureComponent {
       },
       i18nKeys: TextBoxIcon_i18n,
       isFocus: isPopupReady,
-      autoComplete: false
+      autoComplete: false,
+      ...TextBoxIconProps
     }, /*#__PURE__*/React.createElement(Container, {
       align: "both",
       dataId: dataIdDownIcon
@@ -696,7 +702,8 @@ export class GroupSelectComponent extends PureComponent {
         ariaOwns: setAriaId
       },
       autoComplete: false,
-      isFocus: isPopupReady
+      isFocus: isPopupReady,
+      ...TextBoxProps
     }))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.responsiveFunc,
       responsiveId: "Helmet"

package/es/Select/props/defaultProps.js

@@ -69,7 +69,8 @@ export const GroupSelect_defaultProps = {
   isRestrictScroll: false,
   i18nKeys: {},
   iconOnHover: false,
-  isLoading: false
+  isLoading: false,
+  customProps: {}
 };
 export const SelectWithAvatar_defaultProps = {
   animationStyle: 'bounce',

package/es/Select/props/propTypes.js

@@ -174,7 +174,11 @@ export const GroupSelect_propTypes = {
   }),
   isLoading: PropTypes.bool,
   dataSelectorId: PropTypes.string,
-  isDefaultSelectValue: PropTypes.bool
+  isDefaultSelectValue: PropTypes.bool,
+  customProps: PropTypes.shape({
+    TextBoxProps: PropTypes.object,
+    TextBoxIconProps: PropTypes.object
+  })
 };
 export const SelectWithAvatar_propTypes = { ...Select_propTypes,
   textBoxClass: PropTypes.string,

package/es/Textarea/Textarea.js

@@ -58,7 +58,8 @@ export default class Textarea extends React.Component {
       autoFocus,
       htmlId,
       a11y,
-      customClass
+      customClass,
+      isFocus
     } = this.props;
     let {
       ariaLabel,
@@ -84,7 +85,8 @@ export default class Textarea extends React.Component {
       options.autoFocus = true;
     }
 
-    let classList = needAppearance ? `${style.container} ${style[size]} ${style[variant]} ${needBorder ? style.needBorder : style.noBorder} ${resize ? style[resizes[resize]] : style[resizes.none]}  ${animated ? `${style[`${size}animated`]}` : ''}   ${isDisabled && !needEffect || isReadOnly && !needEffect ? '' : style.effect}` : `${style.basic}`;
+    const isEditable = !(isReadOnly || isDisabled);
+    let classList = needAppearance ? `${style.container} ${style[size]} ${style[variant]} ${needBorder ? style.needBorder : style.noBorder} ${resize ? style[resizes[resize]] : style[resizes.none]}  ${animated ? `${style[`${size}animated`]}` : ''}   ${isDisabled && !needEffect || isReadOnly && !needEffect ? '' : style.effect} ${isEditable && isFocus ? style.active : ''}` : `${style.basic}`;
     return /*#__PURE__*/React.createElement("textarea", {
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledby,

package/es/Textarea/Textarea.module.css

@@ -88,7 +88,7 @@
 .effect:hover {
   --textarea_border_color: var(--zdt_textarea_hover_border);
 }
-.effect:focus {
+.effect:focus,.effect.active {
   --textarea_border_color: var(--zdt_textarea_focus_border);
 }
 .xsmall,

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

@@ -3,7 +3,7 @@
 exports[`Textarea component Should be render autofocus true  1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize     effect borderColor_default"
+    class="  container small default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -14,7 +14,7 @@ exports[`Textarea component Should be render autofocus true  1`] = `
 exports[`Textarea component Should be render customClass  1`] = `
 <DocumentFragment>
   <textarea
-    class="textAreaCustomClass  container small default needBorder noresize     effect borderColor_default"
+    class="textAreaCustomClass  container small default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -25,7 +25,7 @@ exports[`Textarea component Should be render customClass  1`] = `
 exports[`Textarea component Should be render htmlId  1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize     effect borderColor_default"
+    class="  container small default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -37,7 +37,7 @@ exports[`Textarea component Should be render htmlId  1`] = `
 exports[`Textarea component Should be render isDisabled is false and needEffect is false 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize     effect borderColor_default"
+    class="  container small default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -48,7 +48,7 @@ exports[`Textarea component Should be render isDisabled is false and needEffect
 exports[`Textarea component Should be render isDisabled is true 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize      borderColor_default"
+    class="  container small default needBorder noresize       borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -60,7 +60,7 @@ exports[`Textarea component Should be render isDisabled is true 1`] = `
 exports[`Textarea component Should be render isDisabled is true and needEffect is false 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize      borderColor_default"
+    class="  container small default needBorder noresize       borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -72,7 +72,7 @@ exports[`Textarea component Should be render isDisabled is true and needEffect i
 exports[`Textarea component Should be render isDisabled is true and needEffect is true 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize     effect borderColor_default"
+    class="  container small default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -84,7 +84,7 @@ exports[`Textarea component Should be render isDisabled is true and needEffect i
 exports[`Textarea component Should be render isReadOnly is false and needEffect is false 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize     effect borderColor_default"
+    class="  container small default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -95,7 +95,7 @@ exports[`Textarea component Should be render isReadOnly is false and needEffect
 exports[`Textarea component Should be render isReadOnly is true and needEffect is false 1`] = `
 <DocumentFragment>
   <textarea
-    class=" readonly container small default needBorder noresize      borderColor_default"
+    class=" readonly container small default needBorder noresize       borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -107,7 +107,7 @@ exports[`Textarea component Should be render isReadOnly is true and needEffect i
 exports[`Textarea component Should be render isReadOnly is true and needEffect is true 1`] = `
 <DocumentFragment>
   <textarea
-    class=" readonly container small default needBorder noresize     effect borderColor_default"
+    class=" readonly container small default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -119,7 +119,7 @@ exports[`Textarea component Should be render isReadOnly is true and needEffect i
 exports[`Textarea component Should be render maxLength in number 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize     effect borderColor_default"
+    class="  container small default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -131,7 +131,7 @@ exports[`Textarea component Should be render maxLength in number 1`] = `
 exports[`Textarea component Should be render maxLength in string 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize     effect borderColor_default"
+    class="  container small default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -154,7 +154,7 @@ exports[`Textarea component Should be render needAppearance is false  1`] = `
 exports[`Textarea component Should be render needBorder is false 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default noBorder noresize     effect borderColor_default"
+    class="  container small default noBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -165,7 +165,7 @@ exports[`Textarea component Should be render needBorder is false 1`] = `
 exports[`Textarea component Should be render needReadOnlyStyle is false  1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize     effect borderColor_default"
+    class="  container small default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -176,7 +176,7 @@ exports[`Textarea component Should be render needReadOnlyStyle is false  1`] = `
 exports[`Textarea component Should be render placeholder 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize     effect borderColor_default"
+    class="  container small default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -188,7 +188,7 @@ exports[`Textarea component Should be render placeholder 1`] = `
 exports[`Textarea component Should be render text 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize     effect borderColor_default"
+    class="  container small default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -201,7 +201,7 @@ exports[`Textarea component Should be render text 1`] = `
 exports[`Textarea component Should be render with the basic set of default props 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize     effect borderColor_default"
+    class="  container small default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -212,7 +212,7 @@ exports[`Textarea component Should be render with the basic set of default props
 exports[`Textarea component Should render Varient - default 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize     effect borderColor_default"
+    class="  container small default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -223,7 +223,7 @@ exports[`Textarea component Should render Varient - default 1`] = `
 exports[`Textarea component Should render Varient - primary 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small primary needBorder noresize     effect borderColor_default"
+    class="  container small primary needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -234,7 +234,7 @@ exports[`Textarea component Should render Varient - primary 1`] = `
 exports[`Textarea component Should render animated is false - large 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container large default needBorder noresize     effect borderColor_default"
+    class="  container large default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -245,7 +245,7 @@ exports[`Textarea component Should render animated is false - large 1`] = `
 exports[`Textarea component Should render animated is false - medium 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container medium default needBorder noresize     effect borderColor_default"
+    class="  container medium default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -256,7 +256,7 @@ exports[`Textarea component Should render animated is false - medium 1`] = `
 exports[`Textarea component Should render animated is false - small 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize     effect borderColor_default"
+    class="  container small default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -267,7 +267,7 @@ exports[`Textarea component Should render animated is false - small 1`] = `
 exports[`Textarea component Should render animated is false - xmedium 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container xmedium default needBorder noresize     effect borderColor_default"
+    class="  container xmedium default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -278,7 +278,7 @@ exports[`Textarea component Should render animated is false - xmedium 1`] = `
 exports[`Textarea component Should render animated is false - xsmall 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container xsmall default needBorder noresize     effect borderColor_default"
+    class="  container xsmall default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -289,7 +289,7 @@ exports[`Textarea component Should render animated is false - xsmall 1`] = `
 exports[`Textarea component Should render animated is true - large 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container large default needBorder noresize  largeanimated   effect borderColor_default"
+    class="  container large default needBorder noresize  largeanimated   effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -300,7 +300,7 @@ exports[`Textarea component Should render animated is true - large 1`] = `
 exports[`Textarea component Should render animated is true - medium 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container medium default needBorder noresize  undefined   effect borderColor_default"
+    class="  container medium default needBorder noresize  undefined   effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -311,7 +311,7 @@ exports[`Textarea component Should render animated is true - medium 1`] = `
 exports[`Textarea component Should render animated is true - small 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize  smallanimated   effect borderColor_default"
+    class="  container small default needBorder noresize  smallanimated   effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -322,7 +322,7 @@ exports[`Textarea component Should render animated is true - small 1`] = `
 exports[`Textarea component Should render animated is true - xmedium 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container xmedium default needBorder noresize  xmediumanimated   effect borderColor_default"
+    class="  container xmedium default needBorder noresize  xmediumanimated   effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -333,7 +333,7 @@ exports[`Textarea component Should render animated is true - xmedium 1`] = `
 exports[`Textarea component Should render animated is true - xsmall 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container xsmall default needBorder noresize  xsmallanimated   effect borderColor_default"
+    class="  container xsmall default needBorder noresize  xsmallanimated   effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -344,7 +344,7 @@ exports[`Textarea component Should render animated is true - xsmall 1`] = `
 exports[`Textarea component Should render borderColor - default 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize     effect borderColor_default"
+    class="  container small default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -355,7 +355,7 @@ exports[`Textarea component Should render borderColor - default 1`] = `
 exports[`Textarea component Should render borderColor - transparent 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize     effect borderColor_transparent"
+    class="  container small default needBorder noresize     effect  borderColor_transparent"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -366,7 +366,7 @@ exports[`Textarea component Should render borderColor - transparent 1`] = `
 exports[`Textarea component Should render resize  - both 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder resizeboth     effect borderColor_default"
+    class="  container small default needBorder resizeboth     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -377,7 +377,7 @@ exports[`Textarea component Should render resize  - both 1`] = `
 exports[`Textarea component Should render resize  - horizontal 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder resizeX     effect borderColor_default"
+    class="  container small default needBorder resizeX     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -388,7 +388,7 @@ exports[`Textarea component Should render resize  - horizontal 1`] = `
 exports[`Textarea component Should render resize  - none 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize     effect borderColor_default"
+    class="  container small default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -399,7 +399,7 @@ exports[`Textarea component Should render resize  - none 1`] = `
 exports[`Textarea component Should render resize  - vertical 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder resizeY     effect borderColor_default"
+    class="  container small default needBorder resizeY     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -410,7 +410,7 @@ exports[`Textarea component Should render resize  - vertical 1`] = `
 exports[`Textarea component Should render size  - large 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container large default needBorder noresize  largeanimated   effect borderColor_default"
+    class="  container large default needBorder noresize  largeanimated   effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -421,7 +421,7 @@ exports[`Textarea component Should render size  - large 1`] = `
 exports[`Textarea component Should render size  - medium 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container medium default needBorder noresize  undefined   effect borderColor_default"
+    class="  container medium default needBorder noresize  undefined   effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -432,7 +432,7 @@ exports[`Textarea component Should render size  - medium 1`] = `
 exports[`Textarea component Should render size  - small 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize  smallanimated   effect borderColor_default"
+    class="  container small default needBorder noresize  smallanimated   effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -443,7 +443,7 @@ exports[`Textarea component Should render size  - small 1`] = `
 exports[`Textarea component Should render size  - xmedium 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container xmedium default needBorder noresize  xmediumanimated   effect borderColor_default"
+    class="  container xmedium default needBorder noresize  xmediumanimated   effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -454,7 +454,7 @@ exports[`Textarea component Should render size  - xmedium 1`] = `
 exports[`Textarea component Should render size  - xsmall 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container xsmall default needBorder noresize  xsmallanimated   effect borderColor_default"
+    class="  container xsmall default needBorder noresize  xsmallanimated   effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -467,7 +467,7 @@ exports[`Textarea component rendering ally clearLabel 1`] = `
   <textarea
     aria-label="TextAreaAriaLabel"
     aria-labelledby="TexareaAriaLabelledby"
-    class="  container small default needBorder noresize     effect borderColor_default"
+    class="  container small default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"

package/es/Textarea/props/propTypes.js

@@ -27,5 +27,6 @@ export const propTypes = {
   a11y: PropTypes.shape({
     ariaLabel: PropTypes.string,
     ariaLabelledby: PropTypes.string
-  })
+  }),
+  isFocus: PropTypes.bool
 };

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;