@zohodesk/dot 1.9.2 → 1.9.4

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

@@ -1,161 +0,0 @@
-/**** Libraries ****/
-import React, { memo, useState, useRef } from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-/**** Components ****/
-
-import { Icon } from '@zohodesk/icons';
-import { Container, Box } from '@zohodesk/components/es/v1/Layout';
-import TextBoxField from "../TextBoxField/TextBoxField";
-import Link from "../../../Link/Link";
-/**** CSS ****/
-
-import style from "../../../../form/fields/Fields.module.css";
-import { formatPhoneUrl } from "../../../../utils/General";
-
-function PhoneField(props) {
-  let {
-    labelName,
-    id,
-    textBoxSize,
-    textBoxVariant,
-    textBoxType,
-    isMandatory,
-    validationMessage,
-    maxLength,
-    isReadOnly,
-    value,
-    errorType,
-    isDisabled,
-    title,
-    onBlur,
-    dataId,
-    dataSelectorId,
-    onKeyDown,
-    placeHolder,
-    infoText,
-    isTelephony,
-    providerName,
-    ticketId,
-    contactId,
-    borderColor,
-    fieldSize,
-    labelPalette,
-    labelCustomClass,
-    i18nKeys,
-    onCall,
-    ePhiData,
-    type,
-    onFocus,
-    onChange,
-    getRef,
-    customProps
-  } = props;
-  const {
-    TextBoxFieldProps = {},
-    LinkProps = {}
-  } = customProps;
-  const [isActive, setActive] = useState(false);
-  const textBoxElem = useRef(null);
-  let {
-    callTitle
-  } = i18nKeys;
-  let callBackparam = {
-    contact_id: contactId ? contactId : '',
-    request_id: ticketId,
-    activity_id: '',
-    entity_module: 'Requests'
-  };
-  let phoneValue = value;
-
-  if (isActive) {
-    phoneValue = value;
-  } else {
-    phoneValue = 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.createElement(Container, {
-    alignBox: "row",
-    className: `${style.container} ${isDisabled ? style.disabled : ''}`,
-    "data-title": isDisabled ? title : null,
-    dataSelectorId: dataSelectorId
-  }, /*#__PURE__*/React.createElement(Box, {
-    flexible: true
-  }, /*#__PURE__*/React.createElement(TextBoxField, {
-    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.createElement(Box, null, isTelephony && value ? /*#__PURE__*/React.createElement(Link, {
-    className: style.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.createElement(Icon, {
-    name: "ZD-GN-phone",
-    size: "14"
-  })) : null));
-}
-
-PhoneField.propTypes = propTypes;
-PhoneField.defaultProps = defaultProps;
-const MemoizedPhoneField = /*#__PURE__*/memo(PhoneField);
-MemoizedPhoneField.propTypes = propTypes;
-MemoizedPhoneField.defaultProps = defaultProps;
-MemoizedPhoneField.displayName = 'PhoneField';
-export default MemoizedPhoneField;

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

@@ -1,16 +0,0 @@
-export const defaultProps = {
-  errorType: 'primary',
-  isMandatory: false,
-  textBoxSize: 'xmedium',
-  textBoxType: 'text',
-  textBoxVariant: 'primary',
-  borderColor: 'default',
-  isDisabled: false,
-  isReadOnly: false,
-  fieldSize: 'medium',
-  labelPalette: 'default',
-  labelCustomClass: '',
-  i18nKeys: {},
-  customProps: {},
-  dataSelectorId: 'phoneField'
-};

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

@@ -1,47 +0,0 @@
-import PropTypes from 'prop-types';
-export const propTypes = {
-  borderColor: PropTypes.oneOf(['transparent', 'default']),
-  dataId: PropTypes.string,
-  errorType: PropTypes.oneOf(['primary', 'secondary']),
-  fieldSize: PropTypes.oneOf(['small', 'medium']),
-  getRef: PropTypes.func,
-  id: PropTypes.string,
-  infoText: PropTypes.string,
-  isDisabled: PropTypes.bool,
-  isMandatory: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  labelCustomClass: PropTypes.string,
-  labelName: PropTypes.string.isRequired,
-  labelPalette: PropTypes.string,
-  maxLength: PropTypes.number,
-  onBlur: PropTypes.func,
-  onChange: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  placeHolder: PropTypes.string,
-  textBoxSize: PropTypes.string,
-  textBoxType: PropTypes.string,
-  textBoxVariant: PropTypes.string,
-  title: PropTypes.string,
-  validationMessage: PropTypes.string,
-  value: PropTypes.string,
-  i18nKeys: PropTypes.shape({
-    callTitle: PropTypes.string
-  }),
-  onCall: PropTypes.func,
-  ePhiData: PropTypes.shape({
-    ePhiTitle: PropTypes.string,
-    ePhiText: PropTypes.string,
-    ePhiStatus: PropTypes.bool
-  }),
-  customProps: PropTypes.shape({
-    LinkProps: PropTypes.object,
-    TextBoxFieldProps: PropTypes.object
-  }),
-  onFocus: PropTypes.func,
-  dataSelectorId: PropTypes.string,
-  isTelephony: PropTypes.bool,
-  providerName: PropTypes.string,
-  ticketId: PropTypes.string,
-  contactId: PropTypes.string,
-  type: PropTypes.string
-};

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

@@ -1,144 +0,0 @@
-/**** Libraries ****/
-import React, { memo } from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-/**** Components ****/
-
-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";
-
-const RadioField = props => {
-  const {
-    labelName,
-    id,
-    isMandatory,
-    options,
-    validationMessage,
-    validationPalette,
-    errorType,
-    isDisabled,
-    title,
-    labelPalette,
-    labelSize,
-    size,
-    selectedValue,
-    isActive,
-    getRef,
-    dataId,
-    dataSelectorId,
-    validationRuleMessage,
-    validationRulePalette,
-    isReadOnly,
-    isBoxStyle,
-    variant,
-    customProps,
-    onChange
-  } = props;
-  const {
-    LabelProps = {},
-    RadioProps = {},
-    InfoIconProps = {},
-    ValidationMessageProps1 = {},
-    ValidationMessageProps2 = {}
-  } = customProps;
-  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,
-    "data-selector-id": dataSelectorId
-  }, labelName && /*#__PURE__*/React.createElement(Label, {
-    text: labelName,
-    size: "medium",
-    id: id,
-    palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : 'default',
-    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} ${isBoxStyle ? style.radiosWrapper : ''} ${labelName ? style.fieldMargin_medium : ''} ${style.radioContainer}`
-  }, options.map((option, index) => {
-    let {
-      text,
-      value,
-      disabled = false,
-      tooltip,
-      infoTooltip
-    } = option;
-    let isDisabledState = disabled || isDisabled;
-    let isChecked = selectedValue == value;
-    return /*#__PURE__*/React.createElement("span", {
-      key: index,
-      className: `${!isBoxStyle ? style.radio : ''} ${style.radioWrap}`
-    }, /*#__PURE__*/React.createElement(Radio, {
-      id: index,
-      value: value,
-      name: id,
-      text: text,
-      labelPalette: labelPalette,
-      labelSize: labelSize,
-      active: isActive || isBoxStyle && isChecked,
-      disabled: isDisabledState,
-      disabledTitle: tooltip,
-      title: tooltip,
-      onChange: handleChange,
-      getRef: handleGetRef,
-      size: size,
-      checked: isChecked,
-      dataId: dataId,
-      isReadOnly: isReadOnly,
-      variant: variant,
-      ...RadioProps,
-      a11y: {
-        tabIndex: !!selectedValue ? isChecked ? '0' : '-1' : index === 0 ? '0' : '-1',
-        ...RadioProps.a11y
-      },
-      customClass: {
-        customRadioWrap: isBoxStyle ? `${style.radioBox} ${!isDisabledState ? style.hoverableRadioBox : ''} ${isChecked ? style.radioBoxActive : ''}` : '',
-        ...RadioProps.customClass
-      }
-    }, !!infoTooltip ? /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-GN-info",
-      size: "16",
-      title: infoTooltip,
-      iconClass: style.infoIcon,
-      ...InfoIconProps
-    }) : null));
-  })), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, {
-    text: validationMessage,
-    palette: validationPalette,
-    type: errorType,
-    dataId: `${dataId}_ValidationMessage`,
-    ...ValidationMessageProps1
-  }), validationRuleMessage && /*#__PURE__*/React.createElement(ValidationMessage, {
-    text: validationRuleMessage,
-    palette: validationRulePalette,
-    type: errorType,
-    dataId: `${dataId}_ValidationRuleMessage`,
-    ...ValidationMessageProps2
-  }));
-};
-
-RadioField.propTypes = propTypes;
-RadioField.defaultProps = defaultProps;
-const MemoizedRadioField = /*#__PURE__*/memo(RadioField);
-MemoizedRadioField.propTypes = propTypes;
-MemoizedRadioField.defaultProps = defaultProps;
-MemoizedRadioField.displayName = 'RadioField';
-export default MemoizedRadioField;

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

@@ -1,13 +0,0 @@
-export const defaultProps = {
-  errorType: 'primary',
-  isBoxStyle: false,
-  isMandatory: false,
-  isDisabled: false,
-  isReadOnly: false,
-  variant: 'primary',
-  labelSize: 'medium',
-  labelPalette: 'default',
-  isActive: false,
-  customProps: {},
-  dataSelectorId: 'radioField'
-};

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

@@ -1,33 +0,0 @@
-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,
-  labelName: PropTypes.string,
-  labelPalette: PropTypes.oneOf(['default', 'primary', 'secondary', 'danger', 'mandatory']),
-  labelSize: PropTypes.oneOf(['small', 'medium', 'large']),
-  onChange: PropTypes.func,
-  options: PropTypes.array,
-  selectedValue: PropTypes.string,
-  size: PropTypes.string,
-  title: PropTypes.string,
-  validationMessage: PropTypes.string,
-  validationPalette: PropTypes.string,
-  validationRuleMessage: PropTypes.string,
-  validationRulePalette: PropTypes.string,
-  variant: PropTypes.oneOf(['primary', 'default', 'secondary']),
-  customProps: PropTypes.shape({
-    LabelProps: PropTypes.object,
-    RadioProps: PropTypes.object,
-    InfoIconProps: PropTypes.object,
-    ValidationMessageProps1: PropTypes.object,
-    ValidationMessageProps2: PropTypes.object
-  }),
-  dataSelectorId: PropTypes.string
-};

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

@@ -1,44 +0,0 @@
-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

@@ -1,160 +0,0 @@
-/**** Libraries ****/
-import React, { memo } from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-/**** Components ****/
-
-import Label from '@zohodesk/components/es/v1/Label/Label';
-import Select from '@zohodesk/components/es/v1/Select/Select';
-import ValidationMessage from "../ValidationMessage/ValidationMessage";
-import { useUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
-import FieldContainer from "../FieldContainer/FieldContainer";
-/** CSS */
-
-import style from "../../../../form/fields/Fields.module.css";
-
-const SelectField = props => {
-  const {
-    labelName,
-    isMandatory,
-    options,
-    selectedValue,
-    needSearch,
-    emptyMessage,
-    animationStyle,
-    textBoxSize,
-    textBoxVariant,
-    searchBoxSize,
-    searchBoxPlaceHolder,
-    validationMessage,
-    validationPalette,
-    isReadOnly,
-    valueField,
-    textField,
-    excludeOptions,
-    errorType,
-    isDisabled,
-    title,
-    dataId,
-    dataSelectorId,
-    fieldClass,
-    validationRuleMessage,
-    validationRulePalette,
-    onKeyDown,
-    infoText,
-    isLocked,
-    lockedInfoText,
-    borderColor,
-    fieldSize,
-    isNextOptions,
-    getNextOptions,
-    popupGroup,
-    onSearch,
-    labelPalette,
-    labelCustomClass,
-    htmlId,
-    needLocalSearch,
-    isDefaultSelectValue,
-    placeHolder,
-    children,
-    onFocus,
-    iconOnHover,
-    customProps,
-    renderLabelProps,
-    id,
-    onChange,
-    getRef
-  } = props;
-  const {
-    LabelProps = {},
-    SelectProps = {},
-    ValidationMessageProps1 = {},
-    ValidationMessageProps2 = {}
-  } = customProps;
-  const getNextId = useUniqueId();
-  let uniqueId = htmlId ? htmlId : getNextId();
-
-  const handleChange = (selectedId, selectedVal) => {
-    onChange && selectedValue !== selectedId && onChange(id, selectedId, selectedVal);
-  };
-
-  const handleGetRef = el => {
-    getRef && getRef(el, id);
-  };
-
-  return /*#__PURE__*/React.createElement("div", {
-    className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
-    "data-title": isDisabled ? title : null,
-    "data-selector-id": dataSelectorId
-  }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
-    infoText: infoText,
-    isLocked: isLocked,
-    lockedInfoText: lockedInfoText,
-    renderProps: renderLabelProps
-  }, /*#__PURE__*/React.createElement(Label, {
-    text: labelName,
-    size: fieldSize === 'small' ? 'small' : 'medium',
-    palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-    customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
-    htmlFor: uniqueId,
-    dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
-    ...LabelProps,
-    id: uniqueId
-  })), /*#__PURE__*/React.createElement("div", {
-    className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''} ${fieldClass ? fieldClass : ''}`
-  }, /*#__PURE__*/React.createElement(Select, {
-    options: options,
-    selectedValue: selectedValue,
-    onChange: handleChange,
-    onFocus: onFocus,
-    getRef: handleGetRef,
-    needSearch: needSearch,
-    emptyMessage: emptyMessage,
-    animationStyle: animationStyle,
-    textBoxSize: fieldSize === 'medium' ? textBoxSize : 'xsmall',
-    textBoxVariant: textBoxVariant,
-    searchBoxSize: searchBoxSize,
-    searchBoxPlaceHolder: searchBoxPlaceHolder,
-    valueField: valueField,
-    textField: textField,
-    excludeOptions: excludeOptions,
-    dataId: dataId,
-    onKeyDown: onKeyDown,
-    borderColor: borderColor,
-    isDisabled: isDisabled,
-    isReadOnly: isReadOnly,
-    isNextOptions: isNextOptions,
-    getNextOptions: getNextOptions,
-    popupGroup: popupGroup,
-    onSearch: onSearch,
-    htmlId: uniqueId,
-    needLocalSearch: needLocalSearch,
-    isDefaultSelectValue: isDefaultSelectValue,
-    placeHolder: placeHolder,
-    iconOnHover: iconOnHover,
-    ...SelectProps,
-    ariaLabelledby: uniqueId
-  }, children ? children : null)), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, {
-    text: validationMessage,
-    palette: validationPalette,
-    type: errorType,
-    htmlFor: uniqueId,
-    dataId: `${dataId}_ValidationMessage`,
-    ...ValidationMessageProps1
-  }), validationRuleMessage && /*#__PURE__*/React.createElement(ValidationMessage, {
-    text: validationRuleMessage,
-    palette: validationRulePalette,
-    type: errorType,
-    htmlFor: uniqueId,
-    dataId: `${dataId}_ValidationRuleMessage`,
-    ...ValidationMessageProps2
-  }));
-};
-
-SelectField.propTypes = propTypes;
-SelectField.defaultProps = defaultProps;
-const MemoizedSelectField = /*#__PURE__*/memo(SelectField);
-MemoizedSelectField.propTypes = propTypes;
-MemoizedSelectField.defaultProps = defaultProps;
-MemoizedSelectField.displayName = 'SelectField';
-export default MemoizedSelectField;

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

@@ -1,18 +0,0 @@
-import { FieldCommonDefaultProps } from "../../props/FieldCommonDefaultProps";
-export const defaultProps = {
-  errorType: 'primary',
-  needSearch: false,
-  searchBoxSize: 'small',
-  textBoxSize: 'xmedium',
-  textBoxVariant: 'primary',
-  borderColor: 'default',
-  fieldSize: 'medium',
-  isFocusOnLabelClick: true,
-  labelPalette: 'default',
-  labelCustomClass: '',
-  isDefaultSelectValue: true,
-  placeHolder: '',
-  customProps: {},
-  dataSelectorId: 'selectField',
-  ...FieldCommonDefaultProps()
-};

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

@@ -1,50 +0,0 @@
-import PropTypes from 'prop-types';
-import { FieldCommonPropTypes } from "../../props/FieldCommonPropTypes";
-export const propTypes = {
-  animationStyle: PropTypes.string,
-  borderColor: PropTypes.oneOf(['transparent', 'default']),
-  emptyMessage: PropTypes.string,
-  errorType: PropTypes.oneOf(['primary', 'secondary']),
-  excludeOptions: PropTypes.array,
-  fieldClass: PropTypes.string,
-  fieldSize: PropTypes.oneOf(['small', 'medium']),
-  getNextOptions: PropTypes.func,
-  getRef: PropTypes.func,
-  id: PropTypes.string,
-  isNextOptions: PropTypes.bool,
-  labelCustomClass: PropTypes.string,
-  labelName: PropTypes.string,
-  labelPalette: PropTypes.string,
-  needLocalSearch: PropTypes.bool,
-  needSearch: PropTypes.bool,
-  onChange: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  onSearch: PropTypes.func,
-  options: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.object)]).isRequired,
-  popupGroup: PropTypes.string,
-  searchBoxPlaceHolder: PropTypes.string,
-  searchBoxSize: PropTypes.string,
-  selectedValue: PropTypes.string,
-  textBoxSize: PropTypes.string,
-  textBoxVariant: PropTypes.string,
-  textField: PropTypes.string,
-  title: PropTypes.string,
-  validationMessage: PropTypes.string,
-  validationPalette: PropTypes.string,
-  validationRuleMessage: PropTypes.string,
-  validationRulePalette: PropTypes.string,
-  valueField: PropTypes.string,
-  isDefaultSelectValue: PropTypes.bool,
-  placeHolder: PropTypes.string,
-  children: PropTypes.node,
-  onFocus: PropTypes.func,
-  iconOnHover: PropTypes.bool,
-  customProps: PropTypes.shape({
-    LabelProps: PropTypes.object,
-    SelectProps: PropTypes.object,
-    ValidationMessageProps1: PropTypes.object,
-    ValidationMessageProps2: PropTypes.object
-  }),
-  htmlId: PropTypes.string,
-  ...FieldCommonPropTypes
-};