@zohodesk/dot 1.8.3 → 1.8.4

package/README.md

@@ -2,6 +2,13 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
+# 1.8.4
+
+- **ValidationMessage**
+  - `renderLeftChildren`, `renderRightChildren`,`a11yAttributes`,`alignChildren`, `tagAttributes` & `id` prop supports added.
+  - Wrapper _Flex_ support ,`customProps` prop supports added.
+  - a11y prop removed
+
 # 1.8.3
 
 - **RadioField**

package/es/form/fields/ValidationMessage/ValidationMessage.js

@@ -1,11 +1,20 @@
 import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
+import Flex from '@zohodesk/layout/es/Flex/Flex';
+import { renderNode, isRenderable } from '@zohodesk/utils';
 import Label from '@zohodesk/components/es/Label/Label';
 import colors from '@zohodesk/components/es/Label/LabelColors.module.css';
-import style from "./ValidationMessage.module.css";
 import { Icon } from '@zohodesk/icons';
+import { DUMMY_OBJECT } from '@zohodesk/components/es/utils/Common';
+import style from "./ValidationMessage.module.css";
 export default class ValidationMessage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.a11yMerged = {};
+    this.tagMerged = {};
+  }
+
   render() {
     let {
       palette,
@@ -16,21 +25,52 @@ export default class ValidationMessage extends React.Component {
       size,
       dataId,
       clipped,
-      a11y,
+      alignChildren,
       tooltip,
-      dataSelectorId
+      dataSelectorId,
+      renderLeftChildren,
+      renderRightChildren,
+      id,
+      customProps,
+      a11yAttributes,
+      tagAttributes,
+      customClass
     } = this.props;
-    let {
-      role = 'alert'
-    } = a11y;
-    return /*#__PURE__*/React.createElement("div", {
-      role: role,
-      onClick: onClick,
-      className: `${type === 'primary' ? style.primary : style.secondary}`,
-      "data-id": "errorMsgContainer",
-      "data-test-id": "errorMsgContainer",
-      "data-selector-id": dataSelectorId
-    }, /*#__PURE__*/React.createElement(Label, {
+    const {
+      wrapper: wrapperProps
+    } = customProps || DUMMY_OBJECT;
+    const {
+      label: customLabelClass = '',
+      wrapper: customWrapperClass = ''
+    } = customClass || DUMMY_OBJECT;
+    const {
+      wrapper: wrapperA11y
+    } = a11yAttributes || DUMMY_OBJECT;
+    const {
+      wrapper: wrapperTagAttr
+    } = tagAttributes || DUMMY_OBJECT;
+    const isLeftChildrenRenderable = isRenderable(renderLeftChildren);
+    const isRightChildrenRenderable = isRenderable(renderRightChildren);
+    this.a11yMerged = {
+      wrapper: { ...wrapperA11y,
+        role: 'alert'
+      }
+    };
+    this.tagMerged = {
+      wrapper: { ...wrapperTagAttr,
+        'data-selector-id': dataSelectorId
+      }
+    };
+    return /*#__PURE__*/React.createElement(Flex, { ...wrapperProps,
+      $ui_alignItems: alignChildren,
+      $ui_displayMode: isRightChildrenRenderable || isLeftChildrenRenderable ? 'flex' : null,
+      $event_onClick: onClick,
+      testId: "errorMsgContainer",
+      customId: "errorMsgContainer",
+      $ui_className: `${type === 'primary' ? style.primary : style.secondary} ${customWrapperClass}`,
+      $a11yAttributes_container: this.a11yMerged.wrapper,
+      $tagAttributes_container: this.tagMerged.wrapper
+    }, renderNode(renderLeftChildren), /*#__PURE__*/React.createElement(Label, {
       text: text,
       htmlFor: htmlFor,
       palette: palette,
@@ -38,14 +78,15 @@ export default class ValidationMessage extends React.Component {
       dataId: dataId,
       clipped: clipped,
       title: clipped ? text : '',
-      customClass: style.lable
+      customClass: `${style.lable} ${customLabelClass}`,
+      id: id
     }), tooltip ? /*#__PURE__*/React.createElement("span", {
       className: `${style.icon} ${colors[palette]}`,
       "data-title": tooltip
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-information57",
       size: "14"
-    })) : null);
+    })) : null, renderNode(renderRightChildren));
   }
 
 }

package/es/form/fields/ValidationMessage/__tests__/__snapshots__/ValidationMessage.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`ValidationMessage rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="primary"
+    class="primary "
     data-id="errorMsgContainer"
     data-selector-id="validationMessage"
     data-test-id="errorMsgContainer"
@@ -11,7 +11,7 @@ exports[`ValidationMessage rendering the defult props 1`] = `
   >
     <label
       class="label title xsmall mandatory font_default
-           cursor lable "
+           cursor lable  "
       data-id="label"
       data-selector-id="label"
       data-test-id="label"

package/es/form/fields/ValidationMessage/props/defaultProps.js

@@ -3,5 +3,6 @@ export const defaultProps = {
   size: 'xsmall',
   type: 'primary',
   a11y: {},
-  dataSelectorId: 'validationMessage'
+  dataSelectorId: 'validationMessage',
+  alignChildren: 'start'
 };

package/es/form/fields/ValidationMessage/props/propTypes.js

@@ -6,11 +6,25 @@ export const propTypes = {
   size: PropTypes.oneOf(['xsmall', 'small', 'medium', 'large']),
   text: PropTypes.string,
   type: PropTypes.oneOf(['primary', 'secondary']),
-  a11y: PropTypes.shape({
-    role: PropTypes.string
-  }),
   tooltip: PropTypes.string,
   htmlFor: PropTypes.string,
   dataId: PropTypes.string,
-  dataSelectorId: PropTypes.string
+  dataSelectorId: PropTypes.string,
+  renderLeftChildren: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  renderRightChildren: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  id: PropTypes.string,
+  alignChildren: PropTypes.oneOf(['start', 'center', 'end', 'baseline']),
+  customProps: PropTypes.shape({
+    wrapper: PropTypes.object
+  }),
+  tagAttributes: PropTypes.shape({
+    wrapper: PropTypes.object
+  }),
+  a11yAttributes: PropTypes.shape({
+    wrapper: PropTypes.object
+  }),
+  customClass: PropTypes.shape({
+    label: PropTypes.string,
+    wrapper: PropTypes.string
+  })
 };

package/lib/form/fields/ValidationMessage/ValidationMessage.js

@@ -13,16 +13,30 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _Flex = _interopRequireDefault(require("@zohodesk/layout/es/Flex/Flex"));
+
+var _utils = require("@zohodesk/utils");
+
 var _Label = _interopRequireDefault(require("@zohodesk/components/es/Label/Label"));
 
 var _LabelColorsModule = _interopRequireDefault(require("@zohodesk/components/es/Label/LabelColors.module.css"));
 
-var _ValidationMessageModule = _interopRequireDefault(require("./ValidationMessage.module.css"));
-
 var _icons = require("@zohodesk/icons");
 
+var _Common = require("@zohodesk/components/es/utils/Common");
+
+var _ValidationMessageModule = _interopRequireDefault(require("./ValidationMessage.module.css"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -48,10 +62,15 @@ var ValidationMessage = /*#__PURE__*/function (_React$Component) {
 
   var _super = _createSuper(ValidationMessage);
 
-  function ValidationMessage() {
+  function ValidationMessage(props) {
+    var _this;
+
     _classCallCheck(this, ValidationMessage);
 
-    return _super.apply(this, arguments);
+    _this = _super.call(this, props);
+    _this.a11yMerged = {};
+    _this.tagMerged = {};
+    return _this;
   }
 
   _createClass(ValidationMessage, [{
@@ -66,19 +85,54 @@ var ValidationMessage = /*#__PURE__*/function (_React$Component) {
           size = _this$props.size,
           dataId = _this$props.dataId,
           clipped = _this$props.clipped,
-          a11y = _this$props.a11y,
+          alignChildren = _this$props.alignChildren,
           tooltip = _this$props.tooltip,
-          dataSelectorId = _this$props.dataSelectorId;
-      var _a11y$role = a11y.role,
-          role = _a11y$role === void 0 ? 'alert' : _a11y$role;
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        role: role,
-        onClick: onClick,
-        className: "".concat(type === 'primary' ? _ValidationMessageModule["default"].primary : _ValidationMessageModule["default"].secondary),
-        "data-id": "errorMsgContainer",
-        "data-test-id": "errorMsgContainer",
-        "data-selector-id": dataSelectorId
-      }, /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+          dataSelectorId = _this$props.dataSelectorId,
+          renderLeftChildren = _this$props.renderLeftChildren,
+          renderRightChildren = _this$props.renderRightChildren,
+          id = _this$props.id,
+          customProps = _this$props.customProps,
+          a11yAttributes = _this$props.a11yAttributes,
+          tagAttributes = _this$props.tagAttributes,
+          customClass = _this$props.customClass;
+
+      var _ref = customProps || _Common.DUMMY_OBJECT,
+          wrapperProps = _ref.wrapper;
+
+      var _ref2 = customClass || _Common.DUMMY_OBJECT,
+          _ref2$label = _ref2.label,
+          customLabelClass = _ref2$label === void 0 ? '' : _ref2$label,
+          _ref2$wrapper = _ref2.wrapper,
+          customWrapperClass = _ref2$wrapper === void 0 ? '' : _ref2$wrapper;
+
+      var _ref3 = a11yAttributes || _Common.DUMMY_OBJECT,
+          wrapperA11y = _ref3.wrapper;
+
+      var _ref4 = tagAttributes || _Common.DUMMY_OBJECT,
+          wrapperTagAttr = _ref4.wrapper;
+
+      var isLeftChildrenRenderable = (0, _utils.isRenderable)(renderLeftChildren);
+      var isRightChildrenRenderable = (0, _utils.isRenderable)(renderRightChildren);
+      this.a11yMerged = {
+        wrapper: _objectSpread(_objectSpread({}, wrapperA11y), {}, {
+          role: 'alert'
+        })
+      };
+      this.tagMerged = {
+        wrapper: _objectSpread(_objectSpread({}, wrapperTagAttr), {}, {
+          'data-selector-id': dataSelectorId
+        })
+      };
+      return /*#__PURE__*/_react["default"].createElement(_Flex["default"], _extends({}, wrapperProps, {
+        $ui_alignItems: alignChildren,
+        $ui_displayMode: isRightChildrenRenderable || isLeftChildrenRenderable ? 'flex' : null,
+        $event_onClick: onClick,
+        testId: "errorMsgContainer",
+        customId: "errorMsgContainer",
+        $ui_className: "".concat(type === 'primary' ? _ValidationMessageModule["default"].primary : _ValidationMessageModule["default"].secondary, " ").concat(customWrapperClass),
+        $a11yAttributes_container: this.a11yMerged.wrapper,
+        $tagAttributes_container: this.tagMerged.wrapper
+      }), (0, _utils.renderNode)(renderLeftChildren), /*#__PURE__*/_react["default"].createElement(_Label["default"], {
         text: text,
         htmlFor: htmlFor,
         palette: palette,
@@ -86,14 +140,15 @@ var ValidationMessage = /*#__PURE__*/function (_React$Component) {
         dataId: dataId,
         clipped: clipped,
         title: clipped ? text : '',
-        customClass: _ValidationMessageModule["default"].lable
+        customClass: "".concat(_ValidationMessageModule["default"].lable, " ").concat(customLabelClass),
+        id: id
       }), tooltip ? /*#__PURE__*/_react["default"].createElement("span", {
         className: "".concat(_ValidationMessageModule["default"].icon, " ").concat(_LabelColorsModule["default"][palette]),
         "data-title": tooltip
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-information57",
         size: "14"
-      })) : null);
+      })) : null, (0, _utils.renderNode)(renderRightChildren));
     }
   }]);
 

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

@@ -3,7 +3,7 @@
 exports[`ValidationMessage rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="primary"
+    class="primary "
     data-id="errorMsgContainer"
     data-selector-id="validationMessage"
     data-test-id="errorMsgContainer"
@@ -11,7 +11,7 @@ exports[`ValidationMessage rendering the defult props 1`] = `
   >
     <label
       class="label title xsmall mandatory font_default
-           cursor lable "
+           cursor lable  "
       data-id="label"
       data-selector-id="label"
       data-test-id="label"

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

@@ -9,6 +9,7 @@ var defaultProps = {
   size: 'xsmall',
   type: 'primary',
   a11y: {},
-  dataSelectorId: 'validationMessage'
+  dataSelectorId: 'validationMessage',
+  alignChildren: 'start'
 };
 exports.defaultProps = defaultProps;

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

@@ -16,12 +16,26 @@ var propTypes = {
   size: _propTypes["default"].oneOf(['xsmall', 'small', 'medium', 'large']),
   text: _propTypes["default"].string,
   type: _propTypes["default"].oneOf(['primary', 'secondary']),
-  a11y: _propTypes["default"].shape({
-    role: _propTypes["default"].string
-  }),
   tooltip: _propTypes["default"].string,
   htmlFor: _propTypes["default"].string,
   dataId: _propTypes["default"].string,
-  dataSelectorId: _propTypes["default"].string
+  dataSelectorId: _propTypes["default"].string,
+  renderLeftChildren: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),
+  renderRightChildren: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),
+  id: _propTypes["default"].string,
+  alignChildren: _propTypes["default"].oneOf(['start', 'center', 'end', 'baseline']),
+  customProps: _propTypes["default"].shape({
+    wrapper: _propTypes["default"].object
+  }),
+  tagAttributes: _propTypes["default"].shape({
+    wrapper: _propTypes["default"].object
+  }),
+  a11yAttributes: _propTypes["default"].shape({
+    wrapper: _propTypes["default"].object
+  }),
+  customClass: _propTypes["default"].shape({
+    label: _propTypes["default"].string,
+    wrapper: _propTypes["default"].string
+  })
 };
 exports.propTypes = propTypes;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/dot",
-  "version": "1.8.3",
+  "version": "1.8.4",
   "main": "lib/index",
   "module": "es/index.js",
   "private": false,
@@ -43,7 +43,7 @@
     "postpublish": "node postPublish.js",
     "test-clean": "react-cli clean ./coverage && react-cli clean ./unittest react-cli clean ./es && react-cli clean ./lib &&  react-cli clean ./package-lock.json &&  react-cli clean ./result.json",
     "download": "npm run downloadOnly  && cd ../ && npm run download",
-    "downloadOnly": "react-cli clean ./node_modules ./package-lock.json && npm install",
+    "downloadOnly": "react-cli clean ./node_modules ./package-lock.json && npm install --legacy-peer-deps",
     "expublish": "npm publish --tag experimental-version",
     "css:lineheight:validate": "node ./node_modules/@zohodesk-private/node-plugins/es/lineheight_automation/lineHeightErrorCheck.js ./src/",
     "cssVariableConvert": "react-cli variableConverter ./lib ./lib && react-cli variableConverter ./es ./es",
@@ -73,25 +73,25 @@
     "@zohodesk-private/node-plugins": "1.1.13",
     "@zohodesk-private/react-prop-validator": "1.2.3",
     "@zohodesk/a11y": "2.3.8",
-    "@zohodesk/components": "1.5.3",
+    "@zohodesk/components": "1.5.6",
     "@zohodesk/hooks": "2.0.6",
-    "@zohodesk/icons": "1.1.4",
+    "@zohodesk/icons": "1.1.6",
     "@zohodesk/layout": "^3.1.0",
-    "@zohodesk/svg": "1.2.5",
+    "@zohodesk/svg": "1.2.6",
     "@zohodesk/utils": "1.3.16",
     "@zohodesk/variables": "1.2.0",
     "@zohodesk/virtualizer": "1.0.13",
     "react-sortable-hoc": "^0.8.3",
     "velocity-react": "1.4.3",
-    "@zohodesk/dotkit": "1.0.4",
+    "@zohodesk/dotkit": "1.0.5",
     "@zohodesk/react-cli": "1.1.27"
   },
   "peerDependencies": {
     "velocity-react": "1.4.3",
     "@zohodesk/variables": "1.2.0",
-    "@zohodesk/components": "1.5.3",
-    "@zohodesk/icons": "1.1.4",
-    "@zohodesk/svg": "1.2.5",
+    "@zohodesk/components": "1.5.6",
+    "@zohodesk/icons": "1.1.6",
+    "@zohodesk/svg": "1.2.6",
     "@zohodesk/virtualizer": "1.0.13",
     "react-sortable-hoc": "^0.8.3",
     "@zohodesk/hooks": "2.0.6",