@zohodesk/dot 1.4.17 → 1.5.0

package/es/version2/lookup/AlertLookup/AlertLookup.js

@@ -1,19 +1,19 @@
 /**** Libraries ****/
 import React, { Component } from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
 /**** Components ****/
 
-import Lookup from '../../../lookup/Lookup/Lookup';
-import AlertHeader from '../AlertHeader/AlertHeader';
+import Lookup from "../../../lookup/Lookup/Lookup";
+import AlertHeader from "../AlertHeader/AlertHeader";
 import Button from '@zohodesk/components/lib/Button/Button';
-import Section from '../../../lookup/Section/Section';
-import FormAction from '../../../FormAction/FormAction';
+import Section from "../../../lookup/Section/Section";
+import FormAction from "../../../FormAction/FormAction";
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
 /**** CSS ****/
 
-import style from './AlertLookupNew.module.css';
+import style from "./AlertLookupNew.module.css";
 let buttonPaletteObject = {
   success: {
     buttonPalette: 'successFilled'

package/es/version2/lookup/AlertLookup/__tests__/AlertLookup.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import AlertLookup from '../AlertLookup';
+import AlertLookup from "../AlertLookup";
 describe('AlertLookup', () => {
   test('rendering the defult props', () => {
     const {

package/es/version2/lookup/index.js

@@ -1,2 +1,2 @@
-export { default as AlertHeader } from './AlertHeader/AlertHeader';
-export { default as AlertLookup } from './AlertLookup/AlertLookup';
+export { default as AlertHeader } from "./AlertHeader/AlertHeader";
+export { default as AlertLookup } from "./AlertLookup/AlertLookup";

package/es/version2/notification/DesktopNotification/DesktopNotification.js

@@ -1,14 +1,14 @@
 import React, { useState } from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes, DesktopNotificationUI_propTypes } from './props/propTypes';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes, DesktopNotificationUI_propTypes } from "./props/propTypes";
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 import { useZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
-import AutoClose from '../../../actions/AutoClose';
+import AutoClose from "../../../actions/AutoClose";
 import Button from '@zohodesk/components/lib/Button/Button';
-import FormAction from '../../../FormAction/FormAction';
-import DesktopNotificationHeader from '../DesktopNotificationHeader/DesktopNotificationHeader';
+import FormAction from "../../../FormAction/FormAction";
+import DesktopNotificationHeader from "../DesktopNotificationHeader/DesktopNotificationHeader";
 import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
-import style from './DesktopNotification.module.css';
+import style from "./DesktopNotification.module.css";
 let buttonPaletteObject = {
   success: {
     buttonPalette: 'successFilled'

package/es/version2/notification/DesktopNotification/__tests__/DesktopNotification.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import DesktopNotification from '../DesktopNotification';
+import DesktopNotification from "../DesktopNotification";
 describe('DesktopNotification', () => {
   test('rendering the defult props', () => {
     const {

package/es/version2/notification/DesktopNotification/props/defaultProps.js

@@ -1,4 +1,4 @@
-import { getDotLibraryConfig } from '../../../../Provider/Config';
+import { getDotLibraryConfig } from "../../../../Provider/Config";
 export const defaultProps = {
   isMore: false,
   isAnimate: true,

package/es/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.js

@@ -1,12 +1,12 @@
 import React, { Component } from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
 import { Container, Box } from '@zohodesk/components/lib/Layout';
-import AlertClose from '../../AlertClose/AlertClose';
-import AlertIcons from '../../alertIcons/AlertIcons';
+import AlertClose from "../../AlertClose/AlertClose";
+import AlertIcons from "../../alertIcons/AlertIcons";
 import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
 import Typography from '@zohodesk/components/es/v1/Typography/Typography';
-import style from './DesktopNotificationHeader.module.css';
+import style from "./DesktopNotificationHeader.module.css";
 export default class DesktopNotificationHeader extends Component {
   constructor(props) {
     super(props);

package/es/version2/notification/DesktopNotificationHeader/__tests__/DesktopNotificationHeader.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import DesktopNotificationHeader from '../DesktopNotificationHeader';
+import DesktopNotificationHeader from "../DesktopNotificationHeader";
 describe('DesktopNotificationHeader', () => {
   test('rendering the defult props', () => {
     const {

package/es/version2/notification/DesktopNotificationHeader/props/defaultProps.js

@@ -1,4 +1,4 @@
-import { getDotLibraryConfig } from '../../../../Provider/Config';
+import { getDotLibraryConfig } from "../../../../Provider/Config";
 export const defaultProps = {
   needIcon: true,
   variant: 'primary',

package/es/version2/notification/index.js

@@ -1,3 +1,3 @@
-export { DesktopNotificationUI } from './DesktopNotification/DesktopNotification';
-export { default as DesktopNotification } from './DesktopNotification/DesktopNotification';
-export { default as DesktopNotificationHeader } from './DesktopNotificationHeader/DesktopNotificationHeader';
+export { DesktopNotificationUI } from "./DesktopNotification/DesktopNotification";
+export { default as DesktopNotification } from "./DesktopNotification/DesktopNotification";
+export { default as DesktopNotificationHeader } from "./DesktopNotificationHeader/DesktopNotificationHeader";

package/lib/form/fields/CurrencyField/CurrencyField.js

@@ -15,7 +15,7 @@ var _propTypes = require("./props/propTypes");
 
 var _Label = _interopRequireDefault(require("@zohodesk/components/lib/Label/Label"));
 
-var _TextBox = _interopRequireDefault(require("@zohodesk/components/lib/TextBox/TextBox"));
+var _TextBoxIcon = _interopRequireDefault(require("@zohodesk/components/lib/TextBoxIcon/TextBoxIcon"));
 
 var _ValidationMessage = _interopRequireDefault(require("../ValidationMessage/ValidationMessage"));
 
@@ -150,8 +150,8 @@ var CurrencyField = /*#__PURE__*/function (_PureComponent) {
           renderLabelProps = _this$props3.renderLabelProps;
       var _customProps$LabelPro = customProps.LabelProps,
           LabelProps = _customProps$LabelPro === void 0 ? {} : _customProps$LabelPro,
-          _customProps$TextBoxP = customProps.TextBoxProps,
-          TextBoxProps = _customProps$TextBoxP === void 0 ? {} : _customProps$TextBoxP,
+          _customProps$TextBoxI = customProps.TextBoxIconProps,
+          TextBoxIconProps = _customProps$TextBoxI === void 0 ? {} : _customProps$TextBoxI,
           _customProps$Validati = customProps.ValidationMessageProps1,
           ValidationMessageProps1 = _customProps$Validati === void 0 ? {} : _customProps$Validati,
           _customProps$Validati2 = customProps.ValidationMessageProps2,
@@ -184,7 +184,7 @@ var CurrencyField = /*#__PURE__*/function (_PureComponent) {
         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({
+      }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], _extends({
         htmlId: uniqueId,
         id: id,
         type: textBoxType,
@@ -204,8 +204,11 @@ var CurrencyField = /*#__PURE__*/function (_PureComponent) {
         isDisabled: isDisabled,
         needEffect: isReadOnly || isDisabled ? false : true,
         isClickable: isClickable,
-        needReadOnlyStyle: needReadOnlyStyle
-      }, TextBoxProps)), validationMessage && /*#__PURE__*/_react["default"].createElement(_ValidationMessage["default"], _extends({
+        needReadOnlyStyle: needReadOnlyStyle,
+        a11y: {
+          ariaLabelledby: labelName
+        }
+      }, TextBoxIconProps)), validationMessage && /*#__PURE__*/_react["default"].createElement(_ValidationMessage["default"], _extends({
         text: validationMessage,
         palette: validationPalette,
         type: errorType,

package/lib/form/fields/CurrencyField/__tests__/__snapshots__/CurrencyField.spec.js.snap

@@ -9,15 +9,46 @@ exports[`CurrencyField rendering the defult props 1`] = `
     <div
       class="fieldContainer "
     >
-      <input
-        class="  container xmedium  primary border effect  borderColor_default  "
-        data-id="textBox"
-        data-selector-id="textBox"
-        data-test-id="textBox"
-        id="1"
-        type="text"
-        value=""
-      />
+      <div
+        class="container effect    flex rowdir"
+        data-id="containerComponent"
+        data-selector-id="textBoxIcon"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="grow basis shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <input
+            class="  container xmedium  primary  effect  borderColor_default  "
+            data-id="textBoxIcon"
+            data-selector-id="textBoxIcon"
+            data-test-id="textBoxIcon"
+            id="1"
+            maxlength="250"
+            type="text"
+            value=""
+          />
+        </div>
+        <div
+          class="iconContainer  shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex cover rowdir"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          />
+        </div>
+        <div
+          class="line borderColor_default "
+        />
+      </div>
     </div>
   </div>
 </DocumentFragment>

package/lib/form/fields/CurrencyField/props/propTypes.js

@@ -44,7 +44,7 @@ var propTypes = _objectSpread({
   needReadOnlyStyle: _propTypes["default"].bool,
   customProps: _propTypes["default"].shape({
     LabelProps: _propTypes["default"].object,
-    TextBoxProps: _propTypes["default"].object,
+    TextBoxIconProps: _propTypes["default"].object,
     ValidationMessageProps1: _propTypes["default"].object,
     ValidationMessageProps2: _propTypes["default"].object
   }),

package/lib/form/fields/DateField/__tests__/__snapshots__/DateField.spec.js.snap

@@ -60,7 +60,7 @@ exports[`DateField rendering the defult props 1`] = `
                   data-test-id="boxComponent"
                 >
                   <div
-                    class="flex cover coldir both"
+                    class="datePickIcon inflex coldir both"
                     data-id="dateField(formatted_undefined)_datePicker"
                     data-selector-id="container"
                     data-test-id="dateField(formatted_undefined)_datePicker"

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

@@ -201,3 +201,20 @@
 [dir=rtl] .ePhiTag {
   margin-right: var(--zd_size8) ;
 }
+
+.hasChildren{
+position: relative;
+}
+
+.rightPlaceholder{
+  position: absolute;
+  bottom:var(--zd_size4) 
+}
+
+[dir=ltr] .rightPlaceholder{
+  right:var(--zd_size15) 
+}
+
+[dir=rtl] .rightPlaceholder{
+  left:var(--zd_size15) 
+}

package/lib/form/fields/MultiSelectField/__tests__/__snapshots__/MultiSelectField.spec.js.snap

@@ -75,7 +75,7 @@ exports[`MultiSelectField rendering the defult props 1`] = `
                   data-test-id="boxComponent"
                 >
                   <div
-                    class="flex cover rowdir vCenter"
+                    class="rightPlaceholder inflex rowdir vCenter"
                     data-id="containerComponent"
                     data-selector-id="container"
                     data-test-id="containerComponent"

package/lib/form/fields/SelectField/__tests__/__snapshots__/SelectField.spec.js.snap

@@ -71,7 +71,7 @@ exports[`SelectField rendering the defult props 1`] = `
                   data-test-id="boxComponent"
                 >
                   <div
-                    class="flex cover rowdir both"
+                    class="rightPlaceholder inflex rowdir both"
                     data-id="containerComponent"
                     data-selector-id="container"
                     data-test-id="containerComponent"

package/lib/form/fields/TextareaField/TextareaField.js

@@ -136,7 +136,9 @@ var TextareaField = /*#__PURE__*/function (_PureComponent) {
           lockedInfoText = _this$props4.lockedInfoText,
           isLocked = _this$props4.isLocked,
           customProps = _this$props4.customProps,
-          renderLabelProps = _this$props4.renderLabelProps;
+          renderLabelProps = _this$props4.renderLabelProps,
+          renderRightPlaceholderNode = _this$props4.renderRightPlaceholderNode,
+          rightPlaceholderCustomClass = _this$props4.rightPlaceholderCustomClass;
       var _customProps$LabelPro = customProps.LabelProps,
           LabelProps = _customProps$LabelPro === void 0 ? {} : _customProps$LabelPro,
           _customProps$Textarea = customProps.TextareaProps,
@@ -146,26 +148,8 @@ var TextareaField = /*#__PURE__*/function (_PureComponent) {
           _customProps$Validati2 = customProps.ValidationMessageProps2,
           ValidationMessageProps2 = _customProps$Validati2 === void 0 ? {} : _customProps$Validati2;
       var uniqueId = htmlId ? htmlId : this.getNextId();
-      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: 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(_Textarea["default"], _extends({
+
+      var textAreaContent = /*#__PURE__*/_react["default"].createElement(_Textarea["default"], _extends({
         onChange: this.handleChange,
         animated: animated,
         size: fieldSize === 'medium' ? textBoxSize : 'xmedium',
@@ -188,7 +172,32 @@ var TextareaField = /*#__PURE__*/function (_PureComponent) {
         a11y: {
           ariaLabelledby: labelName
         }
-      })), validationMessage && /*#__PURE__*/_react["default"].createElement(_ValidationMessage["default"], _extends({
+      }));
+
+      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: 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)] : '')
+      }, !renderRightPlaceholderNode ? textAreaContent : /*#__PURE__*/_react["default"].createElement("div", {
+        className: _FieldsModule["default"].hasChildren
+      }, textAreaContent, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "".concat(_FieldsModule["default"].rightPlaceholder, " ").concat(rightPlaceholderCustomClass)
+      }, renderRightPlaceholderNode)), validationMessage && /*#__PURE__*/_react["default"].createElement(_ValidationMessage["default"], _extends({
         text: validationMessage,
         palette: validationPalette,
         type: errorType,

package/lib/form/fields/TextareaField/props/defaultProps.js

@@ -24,7 +24,8 @@ var defaultProps = _objectSpread({
   labelPalette: 'default',
   labelCustomClass: '',
   customProps: {},
-  dataSelectorId: 'textareaField'
+  dataSelectorId: 'textareaField',
+  rightPlaceholderClass: ''
 }, (0, _FieldCommonDefaultProps.FieldCommonDefaultProps)());
 
 exports.defaultProps = defaultProps;

package/lib/form/fields/TextareaField/props/propTypes.js

@@ -47,7 +47,9 @@ var propTypes = _objectSpread({
     ValidationMessageProps1: _propTypes["default"].object,
     ValidationMessageProps2: _propTypes["default"].object
   }),
-  htmlId: _propTypes["default"].string
+  htmlId: _propTypes["default"].string,
+  renderRightPlaceholderNode: _propTypes["default"].node,
+  rightPlaceholderCustomClass: _propTypes["default"].string
 }, _FieldCommonPropTypes.FieldCommonPropTypes);
 
 exports.propTypes = propTypes;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/dot",
-  "version": "1.4.17",
+  "version": "1.5.0",
   "main": "lib/index",
   "module": "es/index.js",
   "private": false,
@@ -33,12 +33,13 @@
     "lintAll": "react-cli lint ./src",
     "lintAllFix": "npm run lintAll --eslint:fix=true",
     "test": "react-cli test",
-    "snap-update": "npm run test -- -u",
+    "snap-update": "npm run test-clean && npm run test -- -u",
     "sstest": "react-cli sstest",
     "common_package_build": "cd ../common && npm run build && cd ../dot",
     "docs": "npm run css:review && review:props && react-cli docs",
     "prepublishOnly": "node prePublish.js && npm run download && npm run test && npm run css:review  && npm run review:props",
     "postpublish": "node postPublish.js",
+    "test-clean": "react-cli clean coverage",
     "download": "react-cli clean ./node_modules ./package-lock.json  && npm install",
     "expublish": "npm publish --tag experimental-version",
     "css:lineheight:validate": "node ./node_modules/@zohodesk-private/node-plugins/es/lineheight_automation/lineHeightErrorCheck.js ./src/",
@@ -62,11 +63,11 @@
     "@zohodesk-private/node-plugins": "1.1.8",
     "@zohodesk-private/react-prop-validator": "1.2.3",
     "@zohodesk/a11y": "2.2.3",
-    "@zohodesk/components": "1.2.36",
+    "@zohodesk/components": "1.2.40",
     "@zohodesk/hooks": "2.0.4",
-    "@zohodesk/icons": "1.0.50",
+    "@zohodesk/icons": "1.0.51",
     "@zohodesk/svg": "1.1.14",
-    "@zohodesk/utils": "1.3.13",
+    "@zohodesk/utils": "1.3.14",
     "@zohodesk/variables": "1.0.0",
     "@zohodesk/virtualizer": "1.0.3",
     "react-sortable-hoc": "^0.8.3",
@@ -75,13 +76,13 @@
   "peerDependencies": {
     "velocity-react": "1.4.3",
     "@zohodesk/variables": "1.0.0",
-    "@zohodesk/components": "1.2.36",
-    "@zohodesk/icons": "1.0.50",
+    "@zohodesk/components": "1.2.40",
+    "@zohodesk/icons": "1.0.51",
     "@zohodesk/svg": "1.1.14",
     "@zohodesk/virtualizer": "1.0.3",
     "react-sortable-hoc": "^0.8.3",
     "@zohodesk/hooks": "2.0.4",
-    "@zohodesk/utils": "1.3.13",
+    "@zohodesk/utils": "1.3.14",
     "@zohodesk/a11y": "2.2.3"
   }
 }