@zohodesk/dot 1.0.0-temp-156 → 1.0.0-temp-159

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

@@ -0,0 +1,145 @@
+"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/CheckBoxField/props/defaultProps");
+
+var _propTypes = require("../../../../form/fields/CheckBoxField/props/propTypes");
+
+var _Label = _interopRequireDefault(require("@zohodesk/components/es/v1/Label/Label"));
+
+var _CheckBox = _interopRequireDefault(require("@zohodesk/components/es/v1/CheckBox/CheckBox"));
+
+var _ValidationMessage = _interopRequireDefault(require("../ValidationMessage/ValidationMessage"));
+
+var _Layout = require("@zohodesk/components/es/v1/Layout");
+
+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 CheckBoxField(props) {
+  var labelName = props.labelName,
+      id = props.id,
+      isMandatory = props.isMandatory,
+      validationMessage = props.validationMessage,
+      validationPalette = props.validationPalette,
+      isReadOnly = props.isReadOnly,
+      checked = props.checked,
+      errorType = props.errorType,
+      isDisabled = props.isDisabled,
+      title = props.title,
+      dataId = props.dataId,
+      dataSelectorId = props.dataSelectorId,
+      validationRuleMessage = props.validationRuleMessage,
+      validationRulePalette = props.validationRulePalette,
+      infoText = props.infoText,
+      fieldSize = props.fieldSize,
+      labelPalette = props.labelPalette,
+      labelCustomClass = props.labelCustomClass,
+      direction = props.direction,
+      lineClamp = props.lineClamp,
+      isLocked = props.isLocked,
+      lockedInfoText = props.lockedInfoText,
+      customProps = props.customProps,
+      renderLabelProps = props.renderLabelProps,
+      getRef = props.getRef,
+      onChange = props.onChange;
+  var _customProps$LabelPro = customProps.LabelProps,
+      LabelProps = _customProps$LabelPro === void 0 ? {} : _customProps$LabelPro,
+      _customProps$CheckBox = customProps.CheckBoxProps,
+      CheckBoxProps = _customProps$CheckBox === void 0 ? {} : _customProps$CheckBox,
+      _customProps$Validati = customProps.ValidationMessageProps1,
+      ValidationMessageProps1 = _customProps$Validati === void 0 ? {} : _customProps$Validati,
+      _customProps$Validati2 = customProps.ValidationMessageProps2,
+      ValidationMessageProps2 = _customProps$Validati2 === void 0 ? {} : _customProps$Validati2;
+  var removeEvent = isDisabled || isReadOnly;
+  var isDirectCol = direction === 'column';
+
+  var labelElement = /*#__PURE__*/_react["default"].createElement(_FieldContainer["default"], {
+    isLocked: isLocked,
+    lockedInfoText: lockedInfoText,
+    infoText: infoText,
+    renderProps: renderLabelProps
+  }, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
+    text: labelName,
+    id: id,
+    size: fieldSize === 'small' ? 'small' : 'medium',
+    palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
+    infoText: infoText,
+    customClass: "".concat(!isDirectCol ? _FieldsModule["default"].checkboxText : '', " ").concat(!isDirectCol ? _FieldsModule["default"]["lineClamp_".concat(lineClamp)] : '', " ").concat(isReadOnly || isDisabled ? _FieldsModule["default"].cbTextReadonly : _FieldsModule["default"].cbTextPointer, " ").concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
+    title: labelName,
+    onClick: !removeEvent ? handleLabelClick : null,
+    variant: isDirectCol ? 'default' : 'primary',
+    dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
+  }, LabelProps)));
+
+  function handleChange(value) {
+    onChange && onChange(id, value);
+  }
+
+  function handleGetRef(el) {
+    getRef && getRef(el, id);
+  }
+
+  function handleLabelClick() {
+    handleChange(!checked);
+  }
+
+  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
+  }, isDirectCol && labelElement, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(isDirectCol ? _FieldsModule["default"].fieldContainer : _FieldsModule["default"].checkboxFieldContainer, " ").concat(isDirectCol && labelName ? _FieldsModule["default"]["fieldMargin_".concat(fieldSize)] : '')
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    alignBox: "row",
+    isCover: false,
+    align: "top"
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: isDirectCol ? _FieldsModule["default"].checkbox : _FieldsModule["default"].checkboxRow
+  }, /*#__PURE__*/_react["default"].createElement(_CheckBox["default"], _extends({
+    id: id,
+    onChange: handleChange,
+    disabled: removeEvent,
+    checked: checked,
+    getRef: handleGetRef,
+    dataId: dataId
+  }, CheckBoxProps))), !isDirectCol && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    flexible: true
+  }, labelElement)), validationMessage && /*#__PURE__*/_react["default"].createElement(_ValidationMessage["default"], _extends({
+    text: validationMessage,
+    palette: validationPalette,
+    type: errorType,
+    dataId: "".concat(dataId, "_ValidationMessage")
+  }, ValidationMessageProps1)), validationRuleMessage && /*#__PURE__*/_react["default"].createElement(_ValidationMessage["default"], _extends({
+    text: validationRuleMessage,
+    palette: validationRulePalette,
+    type: errorType,
+    dataId: "".concat(dataId, "_ValidationRuleMessage")
+  }, ValidationMessageProps2))));
+}
+
+CheckBoxField.propTypes = _propTypes.propTypes;
+CheckBoxField.defaultProps = _defaultProps.defaultProps;
+var MemoizedCheckBoxField = /*#__PURE__*/(0, _react.memo)(CheckBoxField);
+MemoizedCheckBoxField.propTypes = _propTypes.propTypes;
+MemoizedCheckBoxField.defaultProps = _defaultProps.defaultProps;
+MemoizedCheckBoxField.displayName = 'CheckBoxField';
+var _default = MemoizedCheckBoxField;
+exports["default"] = _default;

package/lib/v1/form/fields/CurrencyField/CurrencyField.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/CurrencyField/props/defaultProps");
+
+var _propTypes = require("../../../../form/fields/CurrencyField/props/propTypes");
+
+var _Label = _interopRequireDefault(require("@zohodesk/components/es/v1/Label/Label"));
+
+var _TextBox = _interopRequireDefault(require("@zohodesk/components/es/v1/TextBox/TextBox"));
+
+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 _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 CurrencyField(props) {
+  var labelName = props.labelName,
+      id = props.id,
+      textBoxSize = props.textBoxSize,
+      textBoxVariant = props.textBoxVariant,
+      textBoxType = props.textBoxType,
+      isMandatory = props.isMandatory,
+      validationMessage = props.validationMessage,
+      validationPalette = props.validationPalette,
+      maxLength = props.maxLength,
+      isReadOnly = props.isReadOnly,
+      value = props.value,
+      errorType = props.errorType,
+      isDisabled = props.isDisabled,
+      title = props.title,
+      dataId = props.dataId,
+      validationRuleMessage = props.validationRuleMessage,
+      validationRulePalette = props.validationRulePalette,
+      onKeyDown = props.onKeyDown,
+      placeHolder = props.placeHolder,
+      infoText = props.infoText,
+      borderColor = props.borderColor,
+      fieldSize = props.fieldSize,
+      labelPalette = props.labelPalette,
+      labelCustomClass = props.labelCustomClass,
+      htmlId = props.htmlId,
+      dataSelectorId = props.dataSelectorId,
+      lockedInfoText = props.lockedInfoText,
+      isLocked = props.isLocked,
+      needReadOnlyStyle = props.needReadOnlyStyle,
+      isClickable = props.isClickable,
+      userCurrencyType = props.userCurrencyType,
+      customProps = props.customProps,
+      formatCurrency = props.formatCurrency,
+      renderLabelProps = props.renderLabelProps,
+      onBlur = props.onBlur,
+      onFocus = props.onFocus,
+      getRef = props.getRef,
+      onChange = props.onChange;
+  var _customProps$LabelPro = customProps.LabelProps,
+      LabelProps = _customProps$LabelPro === void 0 ? {} : _customProps$LabelPro,
+      _customProps$TextBoxP = customProps.TextBoxProps,
+      TextBoxProps = _customProps$TextBoxP === void 0 ? {} : _customProps$TextBoxP,
+      _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 _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isActive = _useState2[0],
+      setActive = _useState2[1];
+
+  var textBox = (0, _react.useRef)(null);
+  var formatValue = value;
+
+  if (!isActive) {
+    formatValue = formatCurrency(value, userCurrencyType);
+  } else {
+    formatValue = value;
+  }
+
+  var uniqueId = htmlId ? htmlId : getNextId();
+
+  function handleChange(value) {
+    onChange && onChange(id, value);
+  }
+
+  function handleGetRef(el) {
+    textBox.current = el;
+    getRef && getRef(el, id);
+  }
+
+  function handleonFocus() {
+    setActive(true);
+    onFocus && onFocus();
+  }
+
+  function handleonBlur() {
+    setActive(false);
+    onBlur && onBlur();
+  }
+
+  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,
+    size: fieldSize === 'small' ? 'small' : 'medium',
+    palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
+    customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
+    htmlFor: uniqueId,
+    dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
+  }, LabelProps))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(_FieldsModule["default"].fieldContainer, " ").concat(labelName ? _FieldsModule["default"]["fieldMargin_".concat(fieldSize)] : '')
+  }, /*#__PURE__*/_react["default"].createElement(_TextBox["default"], _extends({
+    htmlId: uniqueId,
+    id: id,
+    type: textBoxType,
+    variant: textBoxVariant,
+    size: fieldSize === 'medium' ? textBoxSize : 'xsmall',
+    maxLength: maxLength,
+    isReadOnly: isReadOnly,
+    inputRef: handleGetRef,
+    value: formatValue,
+    onChange: handleChange,
+    dataId: dataId,
+    onBlur: handleonBlur,
+    onFocus: handleonFocus,
+    onKeyDown: onKeyDown,
+    placeHolder: placeHolder,
+    borderColor: borderColor,
+    isDisabled: isDisabled,
+    needEffect: isReadOnly || isDisabled ? false : true,
+    isClickable: isClickable,
+    needReadOnlyStyle: needReadOnlyStyle
+  }, TextBoxProps)), 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,
+    htmlFor: uniqueId,
+    dataId: "".concat(dataId, "_ValidationRuleMessage")
+  }, ValidationMessageProps2))));
+}
+
+CurrencyField.propTypes = _propTypes.propTypes;
+CurrencyField.defaultProps = _defaultProps.defaultProps;
+var MemoizedCurrencyField = /*#__PURE__*/(0, _react.memo)(CurrencyField);
+MemoizedCurrencyField.propTypes = _propTypes.propTypes;
+MemoizedCurrencyField.defaultProps = _defaultProps.defaultProps;
+MemoizedCurrencyField.displayName = 'CurrencyField';
+var _default = MemoizedCurrencyField;
+exports["default"] = _default;

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;