@zohodesk/dot 1.0.0-temp-157 → 1.0.0-temp-160

package/lib/v1/form/fields/DateField/DateField.js

@@ -0,0 +1,183 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _defaultProps = require("../../../../form/fields/DateField/props/defaultProps");
+
+var _propTypes = require("../../../../form/fields/DateField/props/propTypes");
+
+var _Label = _interopRequireDefault(require("@zohodesk/components/es/v1/Label/Label"));
+
+var _DateWidget = _interopRequireDefault(require("@zohodesk/components/es/v1/DateTime/DateWidget"));
+
+var _ValidationMessage = _interopRequireDefault(require("../ValidationMessage/ValidationMessage"));
+
+var _IdProvider = require("@zohodesk/components/es/v1/Provider/IdProvider");
+
+var _FieldContainer = _interopRequireDefault(require("../FieldContainer/FieldContainer"));
+
+var _FieldsModule = _interopRequireDefault(require("../../../../form/fields/Fields.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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); }
+
+function DateField(props) {
+  var labelName = props.labelName,
+      isMandatory = props.isMandatory,
+      isDateTime = props.isDateTime,
+      validationMessage = props.validationMessage,
+      validationPalette = props.validationPalette,
+      textBoxSize = props.textBoxSize,
+      textBoxVariant = props.textBoxVariant,
+      isReadOnly = props.isReadOnly,
+      value = props.value,
+      errorType = props.errorType,
+      isDisabled = props.isDisabled,
+      title = props.title,
+      popupGroup = props.popupGroup,
+      dataId = props.dataId,
+      dataSelectorId = props.dataSelectorId,
+      validationRuleMessage = props.validationRuleMessage,
+      validationRulePalette = props.validationRulePalette,
+      onKeyDown = props.onKeyDown,
+      infoText = props.infoText,
+      borderColor = props.borderColor,
+      fieldSize = props.fieldSize,
+      datePattern = props.datePattern,
+      isLocked = props.isLocked,
+      lockedInfoText = props.lockedInfoText,
+      lockedValueText = props.lockedValueText,
+      labelPalette = props.labelPalette,
+      labelCustomClass = props.labelCustomClass,
+      htmlId = props.htmlId,
+      timeZone = props.timeZone,
+      i18nKeys = props.i18nKeys,
+      iconOnHover = props.iconOnHover,
+      customProps = props.customProps,
+      renderLabelProps = props.renderLabelProps,
+      onChange = props.onChange,
+      id = props.id,
+      getRef = props.getRef,
+      openPopupOnMount = props.openPopupOnMount,
+      isFocusOnLabelClick = props.isFocusOnLabelClick;
+  var _customProps$LabelPro = customProps.LabelProps,
+      LabelProps = _customProps$LabelPro === void 0 ? {} : _customProps$LabelPro,
+      _customProps$DateWidg = customProps.DateWidgetProps,
+      DateWidgetProps = _customProps$DateWidg === void 0 ? {} : _customProps$DateWidg,
+      _customProps$Validati = customProps.ValidationMessageProps1,
+      ValidationMessageProps1 = _customProps$Validati === void 0 ? {} : _customProps$Validati,
+      _customProps$Validati2 = customProps.ValidationMessageProps2,
+      ValidationMessageProps2 = _customProps$Validati2 === void 0 ? {} : _customProps$Validati2;
+  var dateField = (0, _react.useRef)(null);
+  var getNextId = (0, _IdProvider.useUniqueId)();
+  var getAriaId = htmlId ? htmlId : getNextId();
+
+  function handleChange(value) {
+    onChange && onChange(id, value);
+  }
+
+  function handleGetRef(el) {
+    dateField.current = el;
+    getRef && getRef(el, id);
+  }
+
+  function openPopup() {
+    if (openPopupOnMount) {
+      setTimeout(function () {
+        dateField.current && dateField.current.click && dateField.current.click();
+        handleLabelClick();
+      }, 100);
+    }
+  }
+
+  (0, _react.useEffect)(function () {
+    openPopup();
+  }, [openPopupOnMount]);
+
+  function handleLabelClick() {
+    if (isFocusOnLabelClick && dateField.current && dateField.current.focus) {
+      dateField.current.focus();
+    }
+  }
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
+    "data-title": isDisabled ? title : null,
+    "data-selector-id": dataSelectorId
+  }, labelName && /*#__PURE__*/_react["default"].createElement(_FieldContainer["default"], {
+    infoText: infoText,
+    isLocked: isLocked,
+    lockedInfoText: lockedInfoText,
+    renderProps: renderLabelProps
+  }, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
+    text: labelName,
+    htmlFor: getAriaId,
+    size: fieldSize === 'small' ? 'small' : 'medium',
+    palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
+    onClick: isDisabled || isReadOnly ? null : handleLabelClick,
+    customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
+    dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
+  }, LabelProps, {
+    id: labelName
+  }))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(_FieldsModule["default"].fieldContainer, " ").concat(labelName ? _FieldsModule["default"]["fieldMargin_".concat(fieldSize)] : '')
+  }, isLocked && lockedValueText ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: _FieldsModule["default"].lockText
+  }, lockedValueText) : /*#__PURE__*/_react["default"].createElement(_DateWidget["default"], _extends({
+    textBoxSize: fieldSize === 'medium' ? textBoxSize : 'xsmall',
+    textBoxVariant: textBoxVariant,
+    isDateTime: isDateTime,
+    onSelect: handleChange,
+    timeZone: timeZone,
+    getRef: handleGetRef,
+    isReadOnly: isReadOnly,
+    value: value,
+    popupGroup: popupGroup,
+    dataId: "".concat(dataId, "(formatted_").concat(labelName, ")"),
+    onKeyDown: onKeyDown,
+    borderColor: borderColor,
+    isDisabled: isDisabled,
+    dateFormat: datePattern,
+    isEditable: true,
+    htmlId: getAriaId,
+    i18nKeys: i18nKeys,
+    iconOnHover: iconOnHover
+  }, DateWidgetProps, {
+    a11y: {
+      ariaLabelledby: labelName
+    }
+  })), validationMessage && /*#__PURE__*/_react["default"].createElement(_ValidationMessage["default"], _extends({
+    text: validationMessage,
+    palette: validationPalette,
+    type: errorType,
+    htmlFor: getAriaId,
+    dataId: "".concat(dataId, "_ValidationMessage")
+  }, ValidationMessageProps1)), validationRuleMessage && /*#__PURE__*/_react["default"].createElement(_ValidationMessage["default"], _extends({
+    text: validationRuleMessage,
+    palette: validationRulePalette,
+    type: errorType,
+    htmlFor: getAriaId,
+    dataId: "".concat(dataId, "_ValidationRuleMessage")
+  }, ValidationMessageProps2))));
+}
+
+DateField.propTypes = _propTypes.propTypes;
+DateField.defaultProps = _defaultProps.defaultProps;
+var MemoizedDateField = /*#__PURE__*/(0, _react.memo)(DateField);
+MemoizedDateField.propTypes = _propTypes.propTypes;
+MemoizedDateField.defaultProps = _defaultProps.defaultProps;
+MemoizedDateField.displayName = 'DateField';
+var _default = MemoizedDateField;
+exports["default"] = _default;

package/lib/v1/form/fields/FieldContainer/FieldContainer.js

@@ -0,0 +1,87 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _defaultProps = require("../../../../form/fields/FieldContainer/props/defaultProps");
+
+var _propTypes = require("../../../../form/fields/FieldContainer/props/propTypes");
+
+var _Layout = require("@zohodesk/components/es/v1/Layout");
+
+var _icons = require("@zohodesk/icons");
+
+var _FieldsModule = _interopRequireDefault(require("../../../../form/fields/Fields.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**** Libraries ****/
+
+/**** Components ****/
+
+/**** Icons ****/
+
+/**** CSS ****/
+function FieldContainer(props) {
+  var children = props.children,
+      ePhiData = props.ePhiData,
+      isLocked = props.isLocked,
+      lockedInfoText = props.lockedInfoText,
+      infoText = props.infoText,
+      dataId = props.dataId,
+      renderProps = props.renderProps,
+      alignContainer = props.alignContainer,
+      dataSelectorId = props.dataSelectorId;
+  var _ePhiData$ePhiTitle = ePhiData.ePhiTitle,
+      ePhiTitle = _ePhiData$ePhiTitle === void 0 ? '' : _ePhiData$ePhiTitle,
+      _ePhiData$ePhiText = ePhiData.ePhiText,
+      ePhiText = _ePhiData$ePhiText === void 0 ? '' : _ePhiData$ePhiText,
+      _ePhiData$ePhiStatus = ePhiData.ePhiStatus,
+      ePhiStatus = _ePhiData$ePhiStatus === void 0 ? false : _ePhiData$ePhiStatus;
+  var _renderProps$start = renderProps.start,
+      renderStart = _renderProps$start === void 0 ? null : _renderProps$start,
+      _renderProps$middle = renderProps.middle,
+      renderMiddle = _renderProps$middle === void 0 ? null : _renderProps$middle,
+      _renderProps$end = renderProps.end,
+      renderEnd = _renderProps$end === void 0 ? null : _renderProps$end;
+  return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    align: alignContainer,
+    alignBox: "row",
+    isCover: false,
+    dataSelectorId: dataSelectorId
+  }, renderStart ? renderStart() : null, children, renderMiddle ? renderMiddle() : null, infoText ? /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
+    name: "ZD-GN-info",
+    iconClass: _FieldsModule["default"].infoIcon,
+    title: infoText,
+    size: "15"
+  }) : null, isLocked ? /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
+    name: "ZD-GN-lock",
+    size: "13",
+    iconClass: _FieldsModule["default"].lockIcon,
+    title: lockedInfoText
+  }) : null, ePhiStatus ? /*#__PURE__*/_react["default"].createElement("span", {
+    "data-title": ePhiTitle,
+    "data-id": "".concat(dataId, "_ePHI"),
+    "data-test-id": "".concat(dataId, "_ePHI"),
+    className: _FieldsModule["default"].ePhiTag
+  }, ePhiText) : null, renderEnd ? renderEnd() : null);
+}
+
+FieldContainer.propTypes = _propTypes.propTypes;
+FieldContainer.defaultProps = _defaultProps.defaultProps;
+var MemoizedFieldContainer = /*#__PURE__*/(0, _react.memo)(FieldContainer);
+MemoizedFieldContainer.propTypes = _propTypes.propTypes;
+MemoizedFieldContainer.defaultProps = _defaultProps.defaultProps;
+MemoizedFieldContainer.displayName = 'FieldContainer';
+var _default = MemoizedFieldContainer;
+exports["default"] = _default;

package/lib/v1/form/fields/MultiSelectField/MultiSelectField.js

@@ -0,0 +1,208 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _defaultProps = require("../../../../form/fields/MultiSelectField/props/defaultProps");
+
+var _propTypes = require("../../../../form/fields/MultiSelectField/props/propTypes");
+
+var _Label = _interopRequireDefault(require("@zohodesk/components/es/v1/Label/Label"));
+
+var _MultiSelect = _interopRequireDefault(require("@zohodesk/components/es/v1/MultiSelect/MultiSelect"));
+
+var _ValidationMessage = _interopRequireDefault(require("../ValidationMessage/ValidationMessage"));
+
+var _IdProvider = require("@zohodesk/components/es/v1/Provider/IdProvider");
+
+var _FieldContainer = _interopRequireDefault(require("../FieldContainer/FieldContainer"));
+
+var _FieldsModule = _interopRequireDefault(require("../../../../form/fields/Fields.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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); }
+
+function MultiSelectField(props) {
+  var labelName = props.labelName,
+      id = props.id,
+      isMandatory = props.isMandatory,
+      options = props.options,
+      selectedOptions = props.selectedOptions,
+      needSelectAll = props.needSelectAll,
+      selectAllText = props.selectAllText,
+      isAnimate = props.isAnimate,
+      emptyMessage = props.emptyMessage,
+      size = props.size,
+      variant = props.variant,
+      textBoxSize = props.textBoxSize,
+      animationStyle = props.animationStyle,
+      validationMessage = props.validationMessage,
+      validationPalette = props.validationPalette,
+      isReadOnly = props.isReadOnly,
+      errorType = props.errorType,
+      isDisabled = props.isDisabled,
+      title = props.title,
+      dataId = props.dataId,
+      dataSelectorId = props.dataSelectorId,
+      validationRuleMessage = props.validationRuleMessage,
+      validationRulePalette = props.validationRulePalette,
+      onKeyDown = props.onKeyDown,
+      infoText = props.infoText,
+      borderColor = props.borderColor,
+      placeHolder = props.placeHolder,
+      fieldSize = props.fieldSize,
+      valueField = props.valueField,
+      textField = props.textField,
+      isNextOptions = props.isNextOptions,
+      isSearching = props.isSearching,
+      popupGroup = props.popupGroup,
+      labelPalette = props.labelPalette,
+      palette = props.palette,
+      lockedInfoText = props.lockedInfoText,
+      isLocked = props.isLocked,
+      htmlId = props.htmlId,
+      children = props.children,
+      customChildrenClass = props.customChildrenClass,
+      onFocus = props.onFocus,
+      customProps = props.customProps,
+      i18nKeys = props.i18nKeys,
+      renderLabelProps = props.renderLabelProps,
+      onChange = props.onChange,
+      onDropBoxOpen = props.onDropBoxOpen,
+      onSearch = props.onSearch,
+      getNextOptions = props.getNextOptions,
+      getRef = props.getRef;
+  var _customProps$LabelPro = customProps.LabelProps,
+      LabelProps = _customProps$LabelPro === void 0 ? {} : _customProps$LabelPro,
+      _customProps$MultiSel = customProps.MultiSelectProps,
+      MultiSelectProps = _customProps$MultiSel === void 0 ? {} : _customProps$MultiSel,
+      _customProps$Validati = customProps.ValidationMessageProps1,
+      ValidationMessageProps1 = _customProps$Validati === void 0 ? {} : _customProps$Validati,
+      _customProps$Validati2 = customProps.ValidationMessageProps2,
+      ValidationMessageProps2 = _customProps$Validati2 === void 0 ? {} : _customProps$Validati2;
+  var getNextId = (0, _IdProvider.useUniqueId)();
+  var multiSelectBox = (0, _react.useRef)(null);
+  var isDarkPalette = palette === 'dark';
+  var uniqueId = htmlId ? htmlId : getNextId();
+
+  function handleChange(selectedValueIds, selectedValues) {
+    onChange && onChange(id, selectedValueIds, selectedValues);
+  }
+
+  function handleDropBoxOpen() {
+    return onDropBoxOpen && onDropBoxOpen(id);
+  }
+
+  function handleSearch(searchStr) {
+    return onSearch && onSearch(searchStr, {
+      id: id
+    });
+  }
+
+  function handleGetNextOptions(searchStr) {
+    return getNextOptions && getNextOptions(searchStr, {
+      id: id
+    });
+  }
+
+  function handleGetRef(el) {
+    multiSelectBox.current = el;
+    getRef && getRef(el, id);
+  } // handleLabelClick() {
+  //   let { isFocusOnLabelClick } = this.props;
+  //   if (
+  //     isFocusOnLabelClick &&
+  //     this.multiSelectBox &&
+  //     this.multiSelectBox.focus
+  //   ) {
+  //     this.multiSelectBox.focus();
+  //   }
+  // }
+
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
+    "data-title": isDisabled ? title : null,
+    "data-selector-id": dataSelectorId
+  }, labelName && /*#__PURE__*/_react["default"].createElement(_FieldContainer["default"], {
+    infoText: infoText,
+    isLocked: isLocked,
+    lockedInfoText: lockedInfoText,
+    renderProps: renderLabelProps
+  }, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
+    text: labelName,
+    id: id,
+    size: fieldSize === 'small' ? 'small' : 'medium',
+    palette: isDarkPalette ? 'dark' : isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette // onClick={this.handleLabelClick}
+    ,
+    customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
+    dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
+    htmlFor: uniqueId
+  }, LabelProps))), /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({
+    options: options,
+    onChange: handleChange,
+    selectedOptions: selectedOptions,
+    getRef: handleGetRef,
+    isReadOnly: isReadOnly,
+    needSelectAll: needSelectAll,
+    selectAllText: selectAllText,
+    isAnimate: isAnimate,
+    emptyMessage: emptyMessage,
+    textBoxSize: textBoxSize,
+    variant: variant,
+    size: size,
+    animationStyle: animationStyle,
+    dataId: dataId,
+    onKeyDown: onKeyDown,
+    borderColor: borderColor,
+    placeHolder: placeHolder,
+    isDisabled: isDisabled,
+    textField: textField,
+    valueField: valueField,
+    getNextOptions: handleGetNextOptions,
+    onSearch: handleSearch,
+    onDropBoxOpen: handleDropBoxOpen,
+    popupGroup: popupGroup,
+    isNextOptions: isNextOptions,
+    isSearching: isSearching,
+    palette: palette,
+    i18nKeys: i18nKeys,
+    htmlId: uniqueId,
+    customChildrenClass: customChildrenClass,
+    onFocus: onFocus
+  }, MultiSelectProps, {
+    ariaLabelledby: uniqueId
+  }), children ? children : null), validationMessage && /*#__PURE__*/_react["default"].createElement(_ValidationMessage["default"], _extends({
+    text: validationMessage,
+    palette: validationPalette,
+    type: errorType,
+    dataId: "".concat(dataId, "_ValidationMessage"),
+    htmlFor: uniqueId
+  }, ValidationMessageProps1)), validationRuleMessage && /*#__PURE__*/_react["default"].createElement(_ValidationMessage["default"], _extends({
+    text: validationRuleMessage,
+    palette: validationRulePalette,
+    type: errorType,
+    dataId: "".concat(dataId, "_ValidationRuleMessage"),
+    htmlFor: uniqueId
+  }, ValidationMessageProps2)));
+}
+
+MultiSelectField.propTypes = _propTypes.propTypes;
+MultiSelectField.defaultProps = _defaultProps.defaultProps;
+var MemoizedMultiSelectField = /*#__PURE__*/(0, _react.memo)(MultiSelectField);
+MemoizedMultiSelectField.propTypes = _propTypes.propTypes;
+MemoizedMultiSelectField.defaultProps = _defaultProps.defaultProps;
+MemoizedMultiSelectField.displayName = 'MultiSelectField';
+var _default = MemoizedMultiSelectField;
+exports["default"] = _default;

package/lib/v1/form/fields/PhoneField/PhoneField.js

@@ -0,0 +1,193 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _defaultProps = require("../../../../form/fields/PhoneField/props/defaultProps");
+
+var _propTypes = require("../../../../form/fields/PhoneField/props/propTypes");
+
+var _icons = require("@zohodesk/icons");
+
+var _Layout = require("@zohodesk/components/es/v1/Layout");
+
+var _TextBoxField = _interopRequireDefault(require("../TextBoxField/TextBoxField"));
+
+var _Link = _interopRequireDefault(require("../../../Link/Link"));
+
+var _FieldsModule = _interopRequireDefault(require("../../../../form/fields/Fields.module.css"));
+
+var _General = require("../../../../utils/General");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function PhoneField(props) {
+  var labelName = props.labelName,
+      id = props.id,
+      textBoxSize = props.textBoxSize,
+      textBoxVariant = props.textBoxVariant,
+      textBoxType = props.textBoxType,
+      isMandatory = props.isMandatory,
+      validationMessage = props.validationMessage,
+      maxLength = props.maxLength,
+      isReadOnly = props.isReadOnly,
+      value = props.value,
+      errorType = props.errorType,
+      isDisabled = props.isDisabled,
+      title = props.title,
+      onBlur = props.onBlur,
+      dataId = props.dataId,
+      dataSelectorId = props.dataSelectorId,
+      onKeyDown = props.onKeyDown,
+      placeHolder = props.placeHolder,
+      infoText = props.infoText,
+      isTelephony = props.isTelephony,
+      providerName = props.providerName,
+      ticketId = props.ticketId,
+      contactId = props.contactId,
+      borderColor = props.borderColor,
+      fieldSize = props.fieldSize,
+      labelPalette = props.labelPalette,
+      labelCustomClass = props.labelCustomClass,
+      i18nKeys = props.i18nKeys,
+      onCall = props.onCall,
+      ePhiData = props.ePhiData,
+      type = props.type,
+      onFocus = props.onFocus,
+      onChange = props.onChange,
+      getRef = props.getRef,
+      customProps = props.customProps;
+  var _customProps$TextBoxF = customProps.TextBoxFieldProps,
+      TextBoxFieldProps = _customProps$TextBoxF === void 0 ? {} : _customProps$TextBoxF,
+      _customProps$LinkProp = customProps.LinkProps,
+      LinkProps = _customProps$LinkProp === void 0 ? {} : _customProps$LinkProp;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isActive = _useState2[0],
+      setActive = _useState2[1];
+
+  var textBoxElem = (0, _react.useRef)(null);
+  var callTitle = i18nKeys.callTitle;
+  var callBackparam = {
+    contact_id: contactId ? contactId : '',
+    request_id: ticketId,
+    activity_id: '',
+    entity_module: 'Requests'
+  };
+  var phoneValue = value;
+
+  if (isActive) {
+    phoneValue = value;
+  } else {
+    phoneValue = (0, _General.formatPhoneUrl)(value);
+  }
+
+  function handleChange(id, value) {
+    onChange && onChange(id, value);
+  }
+
+  function handleGetRef(el) {
+    textBoxElem.current = el;
+    getRef && getRef(el, id);
+  }
+
+  function focusInput(e) {
+    textBoxElem.current.focus();
+  }
+
+  function handleFocus() {
+    setActive(true);
+    onFocus && onFocus();
+  }
+
+  function handleBlur() {
+    setActive(false);
+    onBlur && onBlur();
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    alignBox: "row",
+    className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : ''),
+    "data-title": isDisabled ? title : null,
+    dataSelectorId: dataSelectorId
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    flexible: true
+  }, /*#__PURE__*/_react["default"].createElement(_TextBoxField["default"], _extends({
+    labelName: labelName,
+    id: id,
+    palette: isMandatory ? 'mandatory' : 'default',
+    onClick: focusInput,
+    infoText: infoText,
+    type: textBoxType,
+    textBoxVariant: textBoxVariant,
+    size: textBoxSize,
+    maxLength: maxLength,
+    isReadOnly: isReadOnly,
+    getRef: handleGetRef,
+    value: phoneValue,
+    onChange: handleChange,
+    dataId: dataId,
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    onKeyDown: onKeyDown,
+    placeHolder: placeHolder,
+    validationMessage: validationMessage,
+    borderColor: borderColor,
+    isDisabled: isDisabled,
+    fieldSize: fieldSize,
+    isMandatory: isMandatory,
+    labelPalette: labelPalette,
+    labelCustomClass: labelCustomClass,
+    errorType: errorType,
+    ePhiData: ePhiData
+  }, TextBoxFieldProps))), /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, isTelephony && value ? /*#__PURE__*/_react["default"].createElement(_Link["default"], _extends({
+    className: _FieldsModule["default"].phoneIcon,
+    callfrom: "phone",
+    pbxname: providerName,
+    phonenum: value,
+    module: "RequestDetailsView",
+    title: callTitle,
+    callBackParam: JSON.stringify(callBackparam),
+    callto: 'RequestPhoneNumber',
+    href: true,
+    onClick: onCall,
+    type: type
+  }, LinkProps), /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
+    name: "ZD-GN-phone",
+    size: "14"
+  })) : null));
+}
+
+PhoneField.propTypes = _propTypes.propTypes;
+PhoneField.defaultProps = _defaultProps.defaultProps;
+var MemoizedPhoneField = /*#__PURE__*/(0, _react.memo)(PhoneField);
+MemoizedPhoneField.propTypes = _propTypes.propTypes;
+MemoizedPhoneField.defaultProps = _defaultProps.defaultProps;
+MemoizedPhoneField.displayName = 'PhoneField';
+var _default = MemoizedPhoneField;
+exports["default"] = _default;