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

package/es/Responsive/ResizeObserver.js

@@ -1,68 +1,45 @@
-const hasResizeObserver = !!window.ResizeObserver;
-const mutationObserverOptions = {
-  //NOTE: we donot consider child Count
-  // childList: true,
-  attributes: true
-};
-
-function getSize(element) {
-  let {
-    offsetHeight,
-    offsetWidth
-  } = element; // const { height, width } = element.getBoundingClientRect();
+function getBorderBoxSizeFromEntry(entry) {
+  const {
+    borderBoxSize
+  } = entry;
+  return borderBoxSize[0];
+}
 
+function getSize(entry) {
+  const borderBoxSize = getBorderBoxSizeFromEntry(entry);
   return {
-    height: offsetHeight,
-    width: offsetWidth
+    height: borderBoxSize.blockSize,
+    width: borderBoxSize.inlineSize
   };
 }
 
-function dispatch() {
-  let resizeResponsive = new Event('resizeResponsive');
-  window.dispatchEvent(resizeResponsive);
-}
-
-if (!hasResizeObserver) {
-  let interval = null;
-  window.addEventListener('resize', () => {
-    clearTimeout(interval);
-    interval = setTimeout(dispatch, 100);
-  });
-} // NOTE: this is not full polyfill , we just wrote what types of changes wlli
-
-
 export default class ResizeObserverPolyfill {
   constructor(onResize) {
-    // method finding
-    this.transitionEndHandler = this.transitionEndHandler.bind(this);
-    this.resizeHandlerDispatch = this.resizeHandlerDispatch.bind(this);
     this.resizeHandler = this.resizeHandler.bind(this);
-    this.replaceResizeHandler = this.replaceResizeHandler.bind(this);
-    this.debounce = this.debounce.bind(this);
     this.onResize = onResize;
     this.targetNode = null;
     this.size = {
       height: 0,
       width: 0
     };
-
-    if (hasResizeObserver) {
-      this.resizeObserverInstance = new window.ResizeObserver(this.resizeHandlerDispatch);
-    } else {
-      this.mutationObserverInstance = new window.MutationObserver(this.resizeHandlerDispatch);
-    }
+    this.resizeObserverInstance = new window.ResizeObserver(this.resizeHandler);
   }
 
   replaceResizeHandler(onResize) {
     this.onResize = onResize;
   }
 
-  resizeHandler() {
-    if (!this.targetNode) {
+  getEntry(entries) {
+    return entries[0];
+  }
+
+  resizeHandler(entries) {
+    if (!this.targetNode || !entries.length) {
       return;
     }
 
-    const currentSize = getSize(this.targetNode); // if (this.size && shallowCompare(currentSize, this.size)) {
+    const entry = this.getEntry(entries);
+    const currentSize = getSize(entry);
 
     if (this.size && currentSize.height === this.size.height && currentSize.width === this.size.width) {
       return;
@@ -73,48 +50,9 @@ export default class ResizeObserverPolyfill {
     return true;
   }
 
-  resizeHandlerDispatch() {
-    if (!this.resizeHandler() || hasResizeObserver) {
-      return;
-    }
-
-    dispatch();
-  }
-
-  debounce() {
-    clearTimeout(this.interval);
-    this.interval = setTimeout(this.resizeHandler, 100);
-  }
-
-  transitionEndHandler(event) {
-    if (event.propertyName.indexOf('color') === -1) {
-      this.resizeHandlerDispatch();
-    }
-  }
-
-  addEventListeners(targetNode) {
-    targetNode.addEventListener('transitionend', this.transitionEndHandler);
-    window.addEventListener('resizeResponsive', this.debounce);
-    targetNode.addEventListener('animationend', this.resizeHandlerDispatch);
-    targetNode.addEventListener('webkitAnimationEnd', this.resizeHandlerDispatch);
-  }
-
-  removeEventListeners(targetNode) {
-    targetNode.removeEventListener('transitionend', this.transitionEndHandler);
-    window.removeEventListener('resizeResponsive', this.debounce);
-    targetNode.removeEventListener('animationend', this.resizeHandlerDispatch);
-    targetNode.removeEventListener('webkitAnimationEnd', this.resizeHandlerDispatch);
-  }
-
   observe(targetNode) {
     this.targetNode = targetNode;
-
-    if (hasResizeObserver) {
-      this.resizeObserverInstance.observe(targetNode);
-    } else {
-      this.addEventListeners(targetNode);
-      this.mutationObserverInstance.observe(targetNode, mutationObserverOptions);
-    }
+    this.resizeObserverInstance.observe(targetNode);
   }
 
   replaceObservationElement(targetNode) {
@@ -124,12 +62,10 @@ export default class ResizeObserverPolyfill {
 
     this.targetNode && this.disconnect();
     targetNode && this.observe(targetNode);
-    targetNode && this.resizeHandlerDispatch();
   }
 
   disconnect() {
-    this.targetNode && this.removeEventListeners(this.targetNode);
-    hasResizeObserver ? this.resizeObserverInstance.disconnect() : this.mutationObserverInstance.disconnect();
+    this.resizeObserverInstance.disconnect();
     this.targetNode = null;
     this.size = {
       height: 0,

package/es/Responsive/ResizeObserverWithPolyfill.js

@@ -0,0 +1,140 @@
+const hasResizeObserver = !!window.ResizeObserver;
+const mutationObserverOptions = {
+  //NOTE: we donot consider child Count
+  // childList: true,
+  attributes: true
+};
+
+function getSize(element) {
+  let {
+    offsetHeight,
+    offsetWidth
+  } = element; // const { height, width } = element.getBoundingClientRect();
+
+  return {
+    height: offsetHeight,
+    width: offsetWidth
+  };
+}
+
+function dispatch() {
+  let resizeResponsive = new Event('resizeResponsive');
+  window.dispatchEvent(resizeResponsive);
+}
+
+if (!hasResizeObserver) {
+  let interval = null;
+  window.addEventListener('resize', () => {
+    clearTimeout(interval);
+    interval = setTimeout(dispatch, 100);
+  });
+} // NOTE: this is not full polyfill , we just wrote what types of changes wlli
+
+
+export default class ResizeObserverPolyfill {
+  constructor(onResize) {
+    // method finding
+    this.transitionEndHandler = this.transitionEndHandler.bind(this);
+    this.resizeHandlerDispatch = this.resizeHandlerDispatch.bind(this);
+    this.resizeHandler = this.resizeHandler.bind(this);
+    this.replaceResizeHandler = this.replaceResizeHandler.bind(this);
+    this.debounce = this.debounce.bind(this);
+    this.onResize = onResize;
+    this.targetNode = null;
+    this.size = {
+      height: 0,
+      width: 0
+    };
+
+    if (hasResizeObserver) {
+      this.resizeObserverInstance = new window.ResizeObserver(this.resizeHandlerDispatch);
+    } else {
+      this.mutationObserverInstance = new window.MutationObserver(this.resizeHandlerDispatch);
+    }
+  }
+
+  replaceResizeHandler(onResize) {
+    this.onResize = onResize;
+  }
+
+  resizeHandler() {
+    if (!this.targetNode) {
+      return;
+    }
+
+    const currentSize = getSize(this.targetNode); // if (this.size && shallowCompare(currentSize, this.size)) {
+
+    if (this.size && currentSize.height === this.size.height && currentSize.width === this.size.width) {
+      return;
+    }
+
+    this.size = currentSize;
+    this.onResize(this.size, this.targetNode);
+    return true;
+  }
+
+  resizeHandlerDispatch() {
+    if (!this.resizeHandler() || hasResizeObserver) {
+      return;
+    }
+
+    dispatch();
+  }
+
+  debounce() {
+    clearTimeout(this.interval);
+    this.interval = setTimeout(this.resizeHandler, 100);
+  }
+
+  transitionEndHandler(event) {
+    if (event.propertyName.indexOf('color') === -1) {
+      this.resizeHandlerDispatch();
+    }
+  }
+
+  addEventListeners(targetNode) {
+    targetNode.addEventListener('transitionend', this.transitionEndHandler);
+    window.addEventListener('resizeResponsive', this.debounce);
+    targetNode.addEventListener('animationend', this.resizeHandlerDispatch);
+    targetNode.addEventListener('webkitAnimationEnd', this.resizeHandlerDispatch);
+  }
+
+  removeEventListeners(targetNode) {
+    targetNode.removeEventListener('transitionend', this.transitionEndHandler);
+    window.removeEventListener('resizeResponsive', this.debounce);
+    targetNode.removeEventListener('animationend', this.resizeHandlerDispatch);
+    targetNode.removeEventListener('webkitAnimationEnd', this.resizeHandlerDispatch);
+  }
+
+  observe(targetNode) {
+    this.targetNode = targetNode;
+
+    if (hasResizeObserver) {
+      this.resizeObserverInstance.observe(targetNode);
+    } else {
+      this.addEventListeners(targetNode);
+      this.mutationObserverInstance.observe(targetNode, mutationObserverOptions);
+    }
+  }
+
+  replaceObservationElement(targetNode) {
+    if (this.targetNode === targetNode) {
+      return;
+    }
+
+    this.targetNode && this.disconnect();
+    targetNode && this.observe(targetNode);
+    targetNode && this.resizeHandlerDispatch();
+  }
+
+  disconnect() {
+    this.targetNode && this.removeEventListeners(this.targetNode);
+    hasResizeObserver ? this.resizeObserverInstance.disconnect() : this.mutationObserverInstance.disconnect();
+    this.targetNode = null;
+    this.size = {
+      height: 0,
+      width: 0
+    };
+  }
+
+}

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

@@ -9,6 +9,7 @@ exports[`ResponsiveDropBox rendering the defult props 1`] = `
     data-position="bottomStart"
     data-selector-id="dropBox"
     data-test-id="dropBox"
+    dot-ui-element="dropbox"
   >
     <div
       class="subContainer bottom_shadow radius defaultPalette"

package/es/Select/GroupSelect.js

@@ -588,12 +588,17 @@ export class GroupSelectComponent extends PureComponent {
       htmlId,
       iconOnHover,
       isLoading,
-      dataSelectorId
+      dataSelectorId,
+      customProps
     } = this.props;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
       searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
     });
+    const {
+      TextBoxIcon_i18n,
+      TextBox_ally_label = 'Click to select options'
+    } = i18nKeys;
     let {
       selectedId,
       hoverIndex,
@@ -613,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,
@@ -653,8 +662,10 @@ export class GroupSelectComponent extends PureComponent {
         ariaActivedescendant: selectedId,
         ariaOwns: setAriaId
       },
+      i18nKeys: TextBoxIcon_i18n,
       isFocus: isPopupReady,
-      autoComplete: false
+      autoComplete: false,
+      ...TextBoxIconProps
     }, /*#__PURE__*/React.createElement(Container, {
       align: "both",
       dataId: dataIdDownIcon
@@ -691,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/Tag/Tag.js

@@ -83,8 +83,13 @@ export default class Tag extends PureComponent {
       customAttributes,
       a11y,
       needEffect,
-      isReadOnly
+      isReadOnly,
+      customProps
     } = this.props;
+    const {
+      avatarProps = {},
+      iconProps = {}
+    } = customProps;
     let {
       customTag = '',
       customTagClose = '',
@@ -116,13 +121,15 @@ export default class Tag extends PureComponent {
       size: "small",
       src: imageURL,
       textPalette: isDarkPalette ? 'white' : '',
-      customClass: customAvatar
+      customClass: customAvatar,
+      ...avatarProps
     })) : null, iconName ? /*#__PURE__*/React.createElement("div", {
       className: `${style.icon} ${customTagIcon}`,
       "aria-hidden": true
     }, /*#__PURE__*/React.createElement(Icon, {
       name: iconName,
-      size: iconSize
+      size: iconSize,
+      ...iconProps
     })) : null, /*#__PURE__*/React.createElement("div", {
       className: `${style.text} ${textSizes}`,
       "aria-hidden": true,

package/es/Tag/props/defaultProps.js

@@ -11,5 +11,6 @@ export const defaultProps = {
   a11y: {},
   needEffect: true,
   isReadOnly: false,
-  dataSelectorId: 'tag'
+  dataSelectorId: 'tag',
+  customProps: {}
 };

package/es/Tag/props/propTypes.js

@@ -1,4 +1,6 @@
 import PropTypes from 'prop-types';
+import { propTypes as AvatarPropTypes } from '../../Avatar/props/propTypes.js';
+import { IconProps as IconPropTypes } from '@zohodesk/icons/es/Icon/props/propTypes';
 export const propTypes = {
   active: PropTypes.bool,
   avatarPalette: PropTypes.string,
@@ -32,5 +34,9 @@ export const propTypes = {
   }),
   needEffect: PropTypes.bool,
   isReadOnly: PropTypes.bool,
-  dataSelectorId: PropTypes.string
+  dataSelectorId: PropTypes.string,
+  customProps: PropTypes.shape({
+    avatarProps: PropTypes.exact(AvatarPropTypes),
+    iconProps: PropTypes.exact(IconPropTypes)
+  })
 };

package/es/TextBox/TextBox.js

@@ -169,7 +169,7 @@ export default class TextBox extends React.PureComponent {
       ref: this.inputRef,
       type: type,
       value: value,
-      onScroll: isScrollPrevent ? this.handlePreventTextBoxScroll : '',
+      onScroll: isScrollPrevent ? this.handlePreventTextBoxScroll : null,
       onKeyPress: onKeyPress,
       onMouseDown: onMouseDown,
       ...options,

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,