@zohodesk/dot 1.0.0-temp-111 → 1.0.0-temp-113

package/README.md

@@ -1,8 +1,7 @@
 # DOT Design Components
 
 In this Library, we Provide Some Basic Components to Build Your Application
-# 1.0.0-temp-111
-Form Fields highlight Active State implementation
+
 # 1.0.0-beta.242
 
 - `Accesssility`- Screen Reader fix.

package/es/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -711,7 +711,8 @@ export class ToggleDropDown extends Component {
             palette: palette,
             a11y: {
               role: isSearch ? 'option' : 'menuitem',
-              ariaSelected: selectedId === item[idName]
+              ariaSelected: selectedId === item[idName],
+              ariaLabel: item[keyName]
             }
           }, ListItemWithIconProps)) : /*#__PURE__*/React.createElement(ListItem, _extends({
             key: listIndex,
@@ -732,7 +733,8 @@ export class ToggleDropDown extends Component {
             palette: palette,
             a11y: {
               role: isSearch ? 'option' : 'menuitem',
-              ariaSelected: selectedId === item[idName]
+              ariaSelected: selectedId === item[idName],
+              ariaLabel: item[keyName]
             }
           }, ListItemProps));
         }));
@@ -778,7 +780,8 @@ export class ToggleDropDown extends Component {
           palette: palette,
           a11y: {
             role: isSearch ? 'option' : 'menuitem',
-            ariaSelected: selectedId === item[idName]
+            ariaSelected: selectedId === item[idName],
+            ariaLabel: item[keyName]
           }
         }, ListItemWithIconProps)) : /*#__PURE__*/React.createElement(ListItem, _extends({
           key: listIndex,
@@ -799,7 +802,8 @@ export class ToggleDropDown extends Component {
           palette: palette,
           a11y: {
             role: isSearch ? 'option' : 'menuitem',
-            ariaSelected: selectedId === item[idName]
+            ariaSelected: selectedId === item[idName],
+            ariaLabel: item[keyName]
           }
         }, ListItemProps)));
       }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {

package/es/form/fields/CheckBoxField/CheckBoxField.js

@@ -64,8 +64,7 @@ export default class CheckBoxField extends PureComponent {
       isLocked,
       lockedInfoText,
       customProps,
-      renderLabelProps,
-      needFieldStyle
+      renderLabelProps
     } = this.props;
     const {
       LabelProps = {},
@@ -93,7 +92,7 @@ export default class CheckBoxField extends PureComponent {
       dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
     }, LabelProps)));
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${!isReadOnly && !isDisabled && needFieldStyle ? style.radiobdExxect : ''}  ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
+      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
       "data-title": isDisabled ? title : null
     }, isDirectCol && labelElement, /*#__PURE__*/React.createElement("div", {
       className: `${isDirectCol ? style.fieldContainer : style.checkboxFieldContainer} ${isDirectCol && labelName ? style[`fieldMargin_${fieldSize}`] : ''}`

package/es/form/fields/CurrencyField/CurrencyField.js

@@ -10,7 +10,6 @@ import TextBox from '@zohodesk/components/lib/TextBox/TextBox';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
 import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
 import FieldContainer from '../FieldContainer/FieldContainer';
-import RippleEffect from '@zohodesk/components/lib/RippleEffect/RippleEffect';
 
 /**** CSS ****/
 import style from '../Fields.module.css';
@@ -18,11 +17,8 @@ export default class CurrencyField extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {
-      isActive: false,
-      isFocused: false
+      isActive: false
     };
-    this.handleParentClick = this.handleParentClick.bind(this);
-    this.handleFocusToggle = this.handleFocusToggle.bind(this);
     this.handleChange = this.handleChange.bind(this);
     this.handleGetRef = this.handleGetRef.bind(this);
     this.getNextId = getUniqueId(this);
@@ -44,30 +40,10 @@ export default class CurrencyField extends PureComponent {
     this.textBox = el;
     getRef && getRef(el, id);
   }
-  handleParentClick() {
-    const {
-      needFieldStyle
-    } = this.props;
-    if (needFieldStyle) {
-      this.textBox.focus();
-    }
-  }
-  handleFocusToggle(value) {
-    const {
-      needFieldStyle
-    } = this.props;
-    if (needFieldStyle) {
-      this.setState({
-        isFocused: value
-      });
-    }
-  }
   onFocus() {
     let {
-      onFocus,
-      needFieldStyle
+      onFocus
     } = this.props;
-    needFieldStyle && this.handleFocusToggle(true);
     this.setState({
       isActive: true
     });
@@ -75,10 +51,8 @@ export default class CurrencyField extends PureComponent {
   }
   onBlur() {
     let {
-      onBlur,
-      needFieldStyle
+      onBlur
     } = this.props;
-    needFieldStyle && this.handleFocusToggle(false);
     this.setState({
       isActive: false
     });
@@ -118,8 +92,7 @@ export default class CurrencyField extends PureComponent {
       userCurrencyType,
       customProps,
       formatCurrency,
-      renderLabelProps,
-      needFieldStyle
+      renderLabelProps
     } = this.props;
     const {
       LabelProps = {},
@@ -137,17 +110,9 @@ export default class CurrencyField extends PureComponent {
       formatValue = value;
     }
     let uniqueId = htmlId ? htmlId : this.getNextId();
-    const {
-      isFocused
-    } = this.state;
-    return /*#__PURE__*/React.createElement(RippleEffect, {
-      hoverType: "bg",
-      isActive: isFocused,
-      isNeedEffect: !isReadOnly && !isDisabled && needFieldStyle ? true : false
-    }, /*#__PURE__*/React.createElement("div", {
-      className: `${needFieldStyle ? style.highlightSpace : ''} ${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
-      "data-title": isDisabled ? title : null,
-      onClick: this.handleParentClick
+    return /*#__PURE__*/React.createElement("div", {
+      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
+      "data-title": isDisabled ? title : null
     }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
       infoText: infoText,
       isLocked: isLocked,
@@ -195,7 +160,7 @@ export default class CurrencyField extends PureComponent {
       type: errorType,
       htmlFor: uniqueId,
       dataId: `${dataId}_ValidationRuleMessage`
-    }, ValidationMessageProps2)))));
+    }, ValidationMessageProps2))));
   }
 }
 CurrencyField.propTypes = propTypes;

package/es/form/fields/CurrencyField/props/defaultProps.js

@@ -11,7 +11,6 @@ export const defaultProps = {
   isClickable: false,
   needReadOnlyStyle: true,
   customProps: {},
-  // needFieldStyle:true,
   formatCurrency: () => {},
   ...FieldCommonDefaultProps()
 };

package/es/form/fields/DateField/DateField.js

@@ -10,7 +10,6 @@ import DateWidget from '@zohodesk/components/lib/DateTime/DateWidget';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
 import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
 import FieldContainer from '../FieldContainer/FieldContainer';
-import RippleEffect from '@zohodesk/components/lib/RippleEffect/RippleEffect';
 
 /**** CSS ****/
 import style from '../Fields.module.css';
@@ -22,17 +21,6 @@ export default class DateField extends PureComponent {
     this.handleLabelClick = this.handleLabelClick.bind(this);
     this.getNextId = getUniqueId(this);
     this.openPopup = this.openPopup.bind(this);
-    this.handleParentClick = this.handleParentClick.bind(this);
-    this.handleFocusToggle = this.handleFocusToggle.bind(this);
-    this.handleFocus = this.handleFocus.bind(this);
-    this.handleBlur = this.handleBlur.bind(this);
-    this.getPopupHandlers = this.getPopupHandlers.bind(this);
-    this.handleDropBoxOpen = this.handleDropBoxOpen.bind(this);
-    this.handleDropBoxClose = this.handleDropBoxClose.bind(this);
-    this.state = {
-      isFocused: false,
-      isPopupOpen: false
-    };
   }
   handleChange(value) {
     let {
@@ -82,62 +70,6 @@ export default class DateField extends PureComponent {
       this.dateField.focus();
     }
   }
-  handleParentClick(e) {
-    const {
-      needFieldStyle
-    } = this.props;
-    if (needFieldStyle) {
-      this.dateField.focus();
-      this.togglePopup(e);
-    }
-  }
-  handleFocusToggle(value) {
-    this.setState({
-      isFocused: value
-    });
-  }
-  handleFocus(e) {
-    const {
-      onFocus,
-      needFieldStyle
-    } = this.props;
-    needFieldStyle && this.handleFocusToggle(true);
-    onFocus && onFocus(e);
-  }
-  handleBlur(e) {
-    const {
-      onBlur,
-      needFieldStyle
-    } = this.props;
-    needFieldStyle && this.handleFocusToggle(false);
-    onBlur && onBlur(e);
-  }
-  getPopupHandlers(methods) {
-    let {
-      togglePopup
-    } = methods;
-    this.togglePopup = togglePopup;
-  }
-  handleDropBoxOpen() {
-    let {
-      isPopupOpen
-    } = this.state;
-    if (isPopupOpen == false) {
-      this.setState({
-        isPopupOpen: true
-      });
-    }
-  }
-  handleDropBoxClose() {
-    let {
-      isPopupOpen
-    } = this.state;
-    if (isPopupOpen) {
-      this.setState({
-        isPopupOpen: false
-      });
-    }
-  }
   render() {
     let {
       labelName,
@@ -171,8 +103,7 @@ export default class DateField extends PureComponent {
       i18nKeys,
       iconOnHover,
       customProps,
-      renderLabelProps,
-      needFieldStyle
+      renderLabelProps
     } = this.props;
     const {
       LabelProps = {},
@@ -181,19 +112,9 @@ export default class DateField extends PureComponent {
       ValidationMessageProps2 = {}
     } = customProps;
     let getAriaId = htmlId ? htmlId : this.getNextId();
-    const {
-      isFocused,
-      isPopupOpen
-    } = this.state;
-    let isActive = isPopupOpen || isFocused;
-    return /*#__PURE__*/React.createElement(RippleEffect, {
-      hoverType: "bg",
-      isActive: isFocused,
-      isNeedEffect: !isReadOnly && !isDisabled && needFieldStyle ? true : false
-    }, /*#__PURE__*/React.createElement("div", {
-      className: ` ${needFieldStyle ? style.highlightSpace : ''} ${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''} ${style.hover}`,
-      "data-title": isDisabled ? title : null,
-      onClick: this.handleParentClick
+    return /*#__PURE__*/React.createElement("div", {
+      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
+      "data-title": isDisabled ? title : null
     }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
       infoText: infoText,
       isLocked: isLocked,
@@ -205,12 +126,12 @@ export default class DateField extends PureComponent {
       size: fieldSize === 'small' ? 'small' : 'medium',
       palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
       onClick: isDisabled || isReadOnly ? null : this.handleLabelClick,
-      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''} ${style.labelindex}`,
+      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
       dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
     }, LabelProps, {
       id: labelName
     }))), /*#__PURE__*/React.createElement("div", {
-      className: `${needFieldStyle ? style.highlightPosition : style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`
+      className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`
     }, isLocked && lockedValueText ? /*#__PURE__*/React.createElement("div", {
       className: style.lockText
     }, lockedValueText) : /*#__PURE__*/React.createElement(DateWidget, _extends({
@@ -220,8 +141,6 @@ export default class DateField extends PureComponent {
       onSelect: this.handleChange,
       timeZone: timeZone,
       getRef: this.handleGetRef,
-      onFocus: this.handleFocus,
-      onBlur: this.handleBlur,
       isReadOnly: isReadOnly,
       value: value,
       popupGroup: popupGroup,
@@ -233,11 +152,7 @@ export default class DateField extends PureComponent {
       isEditable: true,
       htmlId: getAriaId,
       i18nKeys: i18nKeys,
-      iconOnHover: iconOnHover,
-      getPopupHandlers: this.getPopupHandlers,
-      onDropBoxOpen: this.handleDropBoxOpen,
-      onDropBoxClose: this.handleDropBoxClose,
-      highlightPosition: needFieldStyle ? true : false
+      iconOnHover: iconOnHover
     }, DateWidgetProps, {
       a11y: {
         ariaLabelledby: labelName
@@ -254,7 +169,7 @@ export default class DateField extends PureComponent {
       type: errorType,
       htmlFor: getAriaId,
       dataId: `${dataId}_ValidationRuleMessage`
-    }, ValidationMessageProps2)))));
+    }, ValidationMessageProps2))));
   }
 }
 DateField.propTypes = propTypes;

package/es/form/fields/DateField/props/defaultProps.js

@@ -14,6 +14,5 @@ export const defaultProps = {
   i18nKeys: {},
   dataId: 'dateField',
   customProps: {},
-  // needFieldStyle:true,
   ...FieldCommonDefaultProps()
 };

package/es/form/fields/Fields.module.css

@@ -1,25 +1,3 @@
-.radiobdExxect
-{
-  border-radius: var(--zd_size4);
-  padding:var(--zd_size15);
-
-}
-.radiobdExxect:hover
-{
-  background-color: var(--zdt_rippleeffect_hover_bg);
-}
-.highlightStyle
-{
-  padding:var(--zd_size15);
-}
-.highlightSpace
-{
-  padding:var(--zd_size14);
-}
-.editetSpace
-{
-  padding: var(--zd_size15);
-}
 .container,
 .checkboxFieldContainer {
   position: relative;
@@ -29,11 +7,6 @@
   position: relative;
   min-height: var(--zd_size25);
 }
-.highlightPosition
-{
-  position: static;
-  min-height: var(--zd_size25);
-}
 .fieldMargin_medium {
   margin-top: var(--zd_size5);
 }
@@ -208,41 +181,3 @@
 [dir=rtl] .ePhiTag {
   margin-right: var(--zd_size8);
 }
-
-/* sample css */
-
-/* .hover::before{
-  position: absolute;
-  content: '';
-  bottom: -10px;
-  left: -10px;
-  right: -10px;
-  top: -10px;
-  border-radius: 4px;
-  border: 1px solid transparent;
-} */
-/* .hover{
-  border-radius: 4px;
-  border: 1px solid transparent;
-  padding: 10px;
-}
-.hover:hover
-{
-  background-color: var(--zdt_rippleeffect_hover_bg);
-}
-.hover:focus-within{
-  background-color: var(--zdt_rippleeffect_primary_light_bg);
-  border-color: var(--zdt_rippleeffect_primary_light_border);
-}
-.labelindex
-{
-  z-index: 1;
-  position: relative;
-}
-.position
-{
-  position: relative;
-} */
-
-
-/* sample css */

package/es/form/fields/MultiSelectField/MultiSelectField.js

@@ -10,7 +10,6 @@ import MultiSelect from '@zohodesk/components/lib/MultiSelect/MultiSelect';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
 import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
 import FieldContainer from '../FieldContainer/FieldContainer';
-import RippleEffect from '@zohodesk/components/lib/RippleEffect/RippleEffect';
 
 /** CSS */
 import style from '../Fields.module.css';
@@ -24,16 +23,6 @@ export default class MultiSelectField extends PureComponent {
     this.onSearch = this.onSearch.bind(this);
     this.getNextOptions = this.getNextOptions.bind(this);
     this.getNextId = getUniqueId(this);
-    this.handleParentClick = this.handleParentClick.bind(this);
-    this.handleFocusToggle = this.handleFocusToggle.bind(this);
-    this.handleFocus = this.handleFocus.bind(this);
-    this.handleBlur = this.handleBlur.bind(this);
-    this.getPopupHandlers = this.getPopupHandlers.bind(this);
-    this.handleDropBoxClose = this.handleDropBoxClose.bind(this);
-    this.state = {
-      isFocused: false,
-      isPopupOpen: false
-    };
   }
   handleChange(selectedValueIds, selectedValues) {
     let {
@@ -47,14 +36,6 @@ export default class MultiSelectField extends PureComponent {
       onDropBoxOpen,
       id
     } = this.props;
-    let {
-      isPopupOpen
-    } = this.state;
-    if (isPopupOpen == false) {
-      this.setState({
-        isPopupOpen: true
-      });
-    }
     return onDropBoxOpen && onDropBoxOpen(id);
   }
   onSearch(searchStr) {
@@ -83,53 +64,6 @@ export default class MultiSelectField extends PureComponent {
     this.multiSelectBox = el;
     getRef && getRef(el, id);
   }
-  handleParentClick(e) {
-    const {
-      needFieldStyle
-    } = this.props;
-    if (needFieldStyle) {
-      this.multiSelectBox.focus();
-      this.togglePopup(e);
-    }
-  }
-  handleFocusToggle(value) {
-    this.setState({
-      isFocused: value
-    });
-  }
-  handleFocus(e) {
-    const {
-      onFocus,
-      needFieldStyle
-    } = this.props;
-    needFieldStyle && this.handleFocusToggle(true);
-    onFocus && onFocus(e);
-  }
-  handleBlur(e) {
-    const {
-      onBlur,
-      needFieldStyle
-    } = this.props;
-    needFieldStyle && this.handleFocusToggle(false);
-    onBlur && onBlur(e);
-  }
-  getPopupHandlers(methods) {
-    let {
-      togglePopup
-    } = methods;
-    this.togglePopup = togglePopup;
-    console.log('togglePopup', togglePopup);
-  }
-  handleDropBoxClose() {
-    let {
-      isPopupOpen
-    } = this.state;
-    if (isPopupOpen) {
-      this.setState({
-        isPopupOpen: false
-      });
-    }
-  }
 
   // handleLabelClick() {
   //   let { isFocusOnLabelClick } = this.props;
@@ -186,8 +120,7 @@ export default class MultiSelectField extends PureComponent {
       onFocus,
       customProps,
       i18nKeys,
-      renderLabelProps,
-      needFieldStyle
+      renderLabelProps
     } = this.props;
     const {
       LabelProps = {},
@@ -197,19 +130,9 @@ export default class MultiSelectField extends PureComponent {
     } = customProps;
     let isDarkPalette = palette === 'dark';
     let uniqueId = htmlId ? htmlId : this.getNextId();
-    const {
-      isFocused,
-      isPopupOpen
-    } = this.state;
-    // let isActive = isPopupOpen || isFocused;
-    return /*#__PURE__*/React.createElement(RippleEffect, {
-      hoverType: "bg",
-      isActive: isFocused,
-      isNeedEffect: !isReadOnly && !isDisabled && needFieldStyle ? true : false
-    }, /*#__PURE__*/React.createElement("div", {
-      className: `${needFieldStyle ? style.highlightSpace : ''} ${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
-      "data-title": isDisabled ? title : null,
-      onClick: this.handleParentClick
+    return /*#__PURE__*/React.createElement("div", {
+      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
+      "data-title": isDisabled ? title : null
     }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
       infoText: infoText,
       isLocked: isLocked,
@@ -223,8 +146,8 @@ export default class MultiSelectField extends PureComponent {
       // onClick={this.handleLabelClick}
       ,
       customClass: `${style.fieldLabel} ${isMandatory ? style.labelMandatory : ''}`,
-      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
-      // htmlFor={uniqueId}
+      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+      htmlFor: uniqueId
     }, LabelProps))), /*#__PURE__*/React.createElement(MultiSelect, _extends({
       options: options,
       onChange: this.handleChange,
@@ -255,13 +178,8 @@ export default class MultiSelectField extends PureComponent {
       palette: palette,
       i18nKeys: i18nKeys,
       htmlId: uniqueId,
-      customChildrenClass: customChildrenClass
-      // onFocus={onFocus}
-      ,
-      onFocus: this.handleFocus,
-      onBlur: this.handleBlur,
-      getPublicMethods: this.getPopupHandlers,
-      isPadding: needFieldStyle ? true : false
+      customChildrenClass: customChildrenClass,
+      onFocus: onFocus
     }, MultiSelectProps, {
       ariaLabelledby: uniqueId
     }), children ? children : null), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
@@ -276,7 +194,7 @@ export default class MultiSelectField extends PureComponent {
       type: errorType,
       dataId: `${dataId}_ValidationRuleMessage`,
       htmlFor: uniqueId
-    }, ValidationMessageProps2))));
+    }, ValidationMessageProps2)));
   }
 }
 MultiSelectField.propTypes = propTypes;

package/es/form/fields/MultiSelectField/props/defaultProps.js

@@ -12,6 +12,5 @@ export const defaultProps = {
   labelPalette: 'default',
   customProps: {},
   i18nKeys: {},
-  // needFieldStyle:true,
   ...FieldCommonDefaultProps()
 };

package/es/form/fields/PhoneField/PhoneField.js

@@ -92,7 +92,6 @@ export default class PhoneField extends PureComponent {
       onCall,
       ePhiData,
       type,
-      needFieldStyle,
       customProps
     } = this.props;
     const {
@@ -150,8 +149,7 @@ export default class PhoneField extends PureComponent {
       labelPalette: labelPalette,
       labelCustomClass: labelCustomClass,
       errorType: errorType,
-      ePhiData: ePhiData,
-      needFieldStyle: needFieldStyle
+      ePhiData: ePhiData
     }, TextBoxFieldProps))), /*#__PURE__*/React.createElement(Box, null, isTelephony && value ? /*#__PURE__*/React.createElement(Link, _extends({
       className: style.phoneIcon,
       callfrom: "phone",

package/es/form/fields/PhoneField/props/defaultProps.js

@@ -11,6 +11,5 @@ export const defaultProps = {
   labelPalette: 'default',
   labelCustomClass: '',
   i18nKeys: {},
-  customProps: {},
-  needFieldStyle: false
+  customProps: {}
 };

package/es/form/fields/RadioField/RadioField.js

@@ -53,7 +53,7 @@ export default class RadioField extends PureComponent {
       ValidationMessageProps2 = {}
     } = customProps;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${!isDisabled && !isReadOnly && style.radiobdExxect} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
+      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
       "data-title": isDisabled ? title : null
     }, labelName && /*#__PURE__*/React.createElement(Label, _extends({
       text: labelName,