@zohodesk/dot 1.4.10 → 1.4.12

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

@@ -10,6 +10,9 @@ import Icon from '@zohodesk/icons/es/Icon';
 import Label from '@zohodesk/components/es/v1/Label/Label';
 import Radio from '@zohodesk/components/es/v1/Radio/Radio';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
+/** Hook */
+
+import useRadio from './useRadio';
 /** Css */
 
 import style from '../../../../form/fields/Fields.module.css';
@@ -30,11 +33,13 @@ const RadioField = props => {
     size,
     selectedValue,
     isActive,
+    getRef,
     dataId,
     dataSelectorId,
     validationRuleMessage,
     validationRulePalette,
     isReadOnly,
+    isBoxStyle,
     variant,
     customProps,
     onChange
@@ -46,11 +51,16 @@ const RadioField = props => {
     ValidationMessageProps1 = {},
     ValidationMessageProps2 = {}
   } = customProps;
-
-  const handleChange = value => {
-    onChange && onChange(id, value);
-  };
-
+  const {
+    handleGetRef,
+    handleChange
+  } = useRadio({
+    id,
+    onChange,
+    getRef,
+    options,
+    selectedValue
+  });
   return /*#__PURE__*/React.createElement("div", {
     className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
     "data-title": isDisabled ? title : null,
@@ -63,16 +73,18 @@ const RadioField = props => {
     customClass: `${style.fieldLabel} ${isMandatory ? style.labelMandatory : ''}`,
     dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
   }, LabelProps)), /*#__PURE__*/React.createElement("div", {
-    className: `${style.fieldContainer} ${labelName ? style.fieldMargin_medium : ''} ${style.radioContainer}`
+    className: `${style.fieldContainer} ${isBoxStyle ? style.radiosWrapper : ''} ${labelName ? style.fieldMargin_medium : ''} ${style.radioContainer}`
   }, options.map((option, index) => {
     let {
       text,
       value,
+      disabled = false,
       infoTooltip
     } = option;
+    let isChecked = selectedValue == value;
     return /*#__PURE__*/React.createElement("span", {
       key: index,
-      className: `${style.radio} ${!!infoTooltip ? style.labelContainer : ''}`
+      className: `${!isBoxStyle ? style.radio : ''} ${style.radioWrap}`
     }, /*#__PURE__*/React.createElement(Radio, _extends({
       id: index,
       value: value,
@@ -80,20 +92,30 @@ const RadioField = props => {
       text: text,
       labelPalette: labelPalette,
       labelSize: labelSize,
-      active: isActive,
-      disabled: isDisabled,
+      active: isActive || isBoxStyle && isChecked,
+      disabled: disabled || isDisabled,
       onChange: handleChange,
+      getRef: handleGetRef,
       size: size,
-      checked: selectedValue == value,
+      checked: isChecked,
       dataId: dataId,
       isReadOnly: isReadOnly,
       variant: variant
-    }, RadioProps)), !!infoTooltip ? /*#__PURE__*/React.createElement(Icon, _extends({
+    }, RadioProps, {
+      a11y: {
+        tabIndex: !!selectedValue ? isChecked ? '0' : '-1' : index === 0 ? '0' : '-1',
+        ...RadioProps.a11y
+      },
+      customClass: {
+        customRadioWrap: `${isBoxStyle ? style.radioBox : ''} ${isBoxStyle && isChecked ? style.radioBoxActive : ''}`,
+        ...RadioProps.customClass
+      }
+    }), !!infoTooltip ? /*#__PURE__*/React.createElement(Icon, _extends({
       name: "ZD-GN-info",
       size: "16",
       title: infoTooltip,
       iconClass: style.infoIcon
-    }, InfoIconProps)) : null);
+    }, InfoIconProps)) : null));
   })), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
     text: validationMessage,
     palette: validationPalette,

package/es/v1/form/fields/RadioField/props/defaultProps.js

@@ -1,5 +1,6 @@
 export const defaultProps = {
   errorType: 'primary',
+  isBoxStyle: false,
   isMandatory: false,
   isDisabled: false,
   isReadOnly: false,

package/es/v1/form/fields/RadioField/props/propTypes.js

@@ -2,8 +2,10 @@ import PropTypes from 'prop-types';
 export const propTypes = {
   dataId: PropTypes.string,
   errorType: PropTypes.oneOf(['primary', 'secondary']),
+  getRef: PropTypes.func,
   id: PropTypes.string,
   isActive: PropTypes.bool,
+  isBoxStyle: PropTypes.bool,
   isDisabled: PropTypes.bool,
   isMandatory: PropTypes.bool,
   isReadOnly: PropTypes.bool,

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

@@ -0,0 +1,44 @@
+import { useRef, useEffect } from 'react';
+export default function useRadio(_ref) {
+  let {
+    id,
+    onChange,
+    getRef,
+    options,
+    selectedValue
+  } = _ref;
+
+  const handleChange = value => {
+    onChange && onChange(id, value);
+  };
+
+  const radioRef = useRef({
+    radios: {},
+    focus: () => {}
+  }).current;
+  const firstRadioValue = options[0].value;
+
+  function handleGetRef(ele, val) {
+    radioRef.radios[val] = ele;
+  }
+
+  function handleFocus() {
+    if (!!selectedValue) {
+      radioRef.radios[selectedValue].focus();
+    } else {
+      radioRef.radios[firstRadioValue].focus();
+    }
+  }
+
+  useEffect(() => {
+    radioRef.focus = handleFocus;
+    getRef && getRef(radioRef, id);
+    return () => {
+      getRef && getRef(null, id);
+    };
+  }, [getRef]);
+  return {
+    handleGetRef,
+    handleChange
+  };
+}

package/es/v1/form/fields/SelectField/SelectField.js

@@ -11,8 +11,6 @@ import Select from '@zohodesk/components/es/v1/Select/Select';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
 import { useUniqueId } from '@zohodesk/components/es/v1/Provider/IdProvider';
 import FieldContainer from '../FieldContainer/FieldContainer';
-/**** props ****/
-
 /** CSS */
 
 import style from '../../../../form/fields/Fields.module.css';
@@ -84,13 +82,7 @@ const SelectField = props => {
 
   const handleGetRef = el => {
     getRef && getRef(el, id);
-  }; // handleLabelClick() {
-  //   let { isFocusOnLabelClick } = this.props;
-  //   if (isFocusOnLabelClick && this.selectBox && this.selectBox.focus) {
-  //     this.selectBox.focus();
-  //   }
-  // }
-
+  };
 
   return /*#__PURE__*/React.createElement("div", {
     className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,

package/es/v1/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -11,6 +13,7 @@ import DropDownSeparator from '@zohodesk/components/es/v1/DropDown/DropDownSepar
 import CommonEmptyState from '../../../emptystate/CommonEmptyState/CommonEmptyState';
 import ResponsiveDropBox from '@zohodesk/components/es/v1/ResponsiveDropBox/ResponsiveDropBox';
 import { ResponsiveReceiver } from '@zohodesk/components/es/v1/Responsive/CustomResponsive';
+import MultiSelectHeader from '@zohodesk/components/es/v1/MultiSelect/MultiSelectHeader';
 import { stopBubbling } from '../../../../utils/General';
 import { scrollTo, findScrollEnd } from '@zohodesk/components/es/utils/Common.js';
 import style from '../../../../form/fields/TagsMultiSelect/TagsMultiSelect.module.css';
@@ -140,14 +143,29 @@ export default class TagsMultiSelect extends React.Component {
       boxSize,
       onSelectTag,
       clickableTag,
-      dataSelectorId
+      dataSelectorId,
+      handleSelectAll,
+      selectAllText,
+      needSelectAll,
+      customClass,
+      customProps
     } = this.props;
     let {
       showAll
     } = this.state;
     let chipLimit = !isPopupReady ? showAll ? tagsList.length : chipNeedToShow : tagsList.length;
+    let {
+      tagCustomClass = '',
+      listItemClass = '',
+      textBoxIconWrapperClass = ''
+    } = customClass;
+    const {
+      TextBoxIconProps = {},
+      TagWrapperProps = {},
+      TagProps = {}
+    } = customProps;
     return /*#__PURE__*/React.createElement("div", {
-      className: ` ${!isReadOnly ? ` ${needBorder ? style.hasBorder : ''}
+      className: `${style.container} ${!isReadOnly ? ` ${needBorder ? style.hasBorder : ''}
               ${needBorder ? style[`borderColor_${borderColor}`] : style.borderColor_transparent} ${isPopupReady && needBorder ? style.active : ''}` : ''} ${className}`,
       onClick: stopBubbling,
       "data-id": `${dataId}_tagsContainer`,
@@ -157,7 +175,7 @@ export default class TagsMultiSelect extends React.Component {
       alignBox: "row",
       align: "vertical",
       isCover: false,
-      className: style.tagDiv,
+      className: `${style.tagDiv} ${textBoxIconWrapperClass}`,
       wrap: "wrap",
       eleRef: getTargetRef,
       scroll: "vertical"
@@ -165,20 +183,23 @@ export default class TagsMultiSelect extends React.Component {
       let {
         name,
         tagType,
-        id
+        id,
+        boxCustomProps,
+        tagCustomProps
       } = tag;
-      return index < chipLimit ? /*#__PURE__*/React.createElement(Box, {
+      return index < chipLimit ? /*#__PURE__*/React.createElement(Box, _extends({
         className: style.tag,
         key: index
-      }, /*#__PURE__*/React.createElement(Tag, {
+      }, TagWrapperProps, boxCustomProps), /*#__PURE__*/React.createElement(Tag, _extends({
         id: id,
         text: name,
         onRemove: isReadOnly ? null : deleteTag.bind(this, name),
         closeTitle: i18nKeys.deleteText,
         palette: clickableTag ? 'defaultLink' : tagType === 'SYSTEM' ? 'primary' : 'default',
         isReadOnly: isReadOnly,
-        onSelectTag: onSelectTag ? onSelectTag : undefined
-      })) : null;
+        onSelectTag: onSelectTag ? onSelectTag : undefined,
+        customClass: tagCustomClass
+      }, TagProps, tagCustomProps))) : null;
     }), tagsList.length > chipNeedToShow && !isPopupReady ? /*#__PURE__*/React.createElement(Box, {
       className: style.moreLess,
       dataId: `${dataId}_tagsMore`,
@@ -190,7 +211,7 @@ export default class TagsMultiSelect extends React.Component {
       className: style.inputWrapper
     }, /*#__PURE__*/React.createElement("span", {
       className: style.custmSpan
-    }, name), /*#__PURE__*/React.createElement(TextBoxIcon, {
+    }, name), /*#__PURE__*/React.createElement(TextBoxIcon, _extends({
       htmlId: htmlId,
       dataId: `${dataId}_tagInp`,
       value: name,
@@ -207,7 +228,7 @@ export default class TagsMultiSelect extends React.Component {
       },
       size: "xsmall",
       inputRef: this.textInputRef
-    }, getTextBoxChildren ? getTextBoxChildren() : null))), isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+    }, TextBoxIconProps), getTextBoxChildren ? getTextBoxChildren() : null))), isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.responsiveFunc,
       responsiveId: "Helmet"
     }, _ref2 => {
@@ -231,7 +252,12 @@ export default class TagsMultiSelect extends React.Component {
         alignBox: "row"
       }, /*#__PURE__*/React.createElement(Box, {
         flexible: true
-      }, isTagListLoading ? /*#__PURE__*/React.createElement(Container, {
+      }, needSelectAll ? /*#__PURE__*/React.createElement(MultiSelectHeader, {
+        onSelect: handleSelectAll,
+        selectAllText: selectAllText,
+        suggestions: searchList,
+        dataId: `${dataId}_selectAll`
+      }) : null, isTagListLoading ? /*#__PURE__*/React.createElement(Container, {
         align: "both",
         className: `${tabletMode ? '' : style.viewpopNew}`
       }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Container, {
@@ -245,7 +271,8 @@ export default class TagsMultiSelect extends React.Component {
       }, searchList.map((item, index) => {
         let {
           name,
-          isNew
+          isNew,
+          listItemProps
         } = item;
         return /*#__PURE__*/React.createElement(React.Fragment, null, searchList.length > 1 && isNew ? /*#__PURE__*/React.createElement(DropDownSeparator, null) : null, /*#__PURE__*/React.createElement(ListItem, {
           key: index,
@@ -257,7 +284,9 @@ export default class TagsMultiSelect extends React.Component {
           needTick: true,
           highlight: selectSearchIndex === index,
           getRef: this.getSelectedItemRef,
-          isDisabled: listDisabled
+          isDisabled: listDisabled,
+          customProps: listItemProps,
+          customClass: listItemClass
         }, isNew ? /*#__PURE__*/React.createElement(Container, {
           alignBox: "row",
           align: "vertical"

package/es/v1/form/fields/TagsMultiSelect/props/defaultProps.js

@@ -7,5 +7,8 @@ export const defaultProps = {
   dataId: '',
   boxSize: 'default',
   clickableTag: false,
-  dataSelectorId: 'tagsMultiSelectField'
+  dataSelectorId: 'tagsMultiSelectField',
+  needSelectAll: false,
+  customClass: {},
+  customProps: {}
 };

package/es/v1/form/fields/TagsMultiSelect/props/propTypes.js

@@ -40,5 +40,14 @@ export const propTypes = {
   boxSize: PropTypes.string,
   onSelectTag: PropTypes.func,
   clickableTag: PropTypes.bool,
-  dataSelectorId: PropTypes.string
+  dataSelectorId: PropTypes.string,
+  handleSelectAll: PropTypes.func,
+  selectAllText: PropTypes.string,
+  needSelectAll: PropTypes.bool,
+  customClass: PropTypes.object,
+  customProps: PropTypes.shape({
+    TextBoxIconProps: PropTypes.object,
+    TagWrapperProps: PropTypes.object,
+    TagProps: PropTypes.object
+  })
 };

package/es/v1/form/fields/TagsMultiSelectField/TagsMultiSelectField.js

@@ -75,7 +75,11 @@ const TagsMultiSelectField = props => {
     value,
     selectedValueCount,
     validationMessage,
-    options
+    options,
+    infoText,
+    isLocked,
+    lockedInfoText,
+    alignField
   } = fieldProperties;
   options = options || [];
 
@@ -191,7 +195,10 @@ const TagsMultiSelectField = props => {
     "data-selector-id": dataSelectorId
   }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
     ePhiData: ePhiData,
-    alignContainer: "baseline",
+    alignContainer: alignField,
+    infoText: infoText,
+    isLocked: isLocked,
+    lockedInfoText: lockedInfoText,
     renderProps: {
       end: renderEnd
     }

package/es/v1/form/fields/TagsMultiSelectField/props/defaultProps.js

@@ -2,7 +2,9 @@ import { FieldCommonDefaultProps } from '../../props/FieldCommonDefaultProps';
 export const defaultProps = {
   fieldProperties: {
     isDisabled: false,
-    isMandatory: false
+    isMandatory: false,
+    isLocked: false,
+    alignField: 'baseline'
   },
   styleProperties: {
     containerClass: '',

package/es/v1/form/fields/TagsMultiSelectField/props/propTypes.js

@@ -11,7 +11,11 @@ export const propTypes = {
     selectedValueCount: PropTypes.string,
     validationMessage: PropTypes.string,
     options: PropTypes.array,
-    clickableTag: PropTypes.bool
+    clickableTag: PropTypes.bool,
+    infoText: PropTypes.string,
+    isLocked: PropTypes.bool,
+    lockedInfoText: PropTypes.string,
+    alignField: PropTypes.oneOf(['vertical', 'baseline'])
   }),
   styleProperties: PropTypes.shape({
     labelSize: PropTypes.string,