@zohodesk/components 1.4.21 → 1.4.22

package/lib/ColorSelect/_shared/ColorIndicator/props/propTypes.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var propTypes = {
+  colorConfig: _propTypes["default"].object,
+  shape: _propTypes["default"].oneOf(['circle', 'square']),
+  customClass: _propTypes["default"].string,
+  customId: _propTypes["default"].string,
+  testId: _propTypes["default"].string,
+  tagAttributes: _propTypes["default"].object,
+  a11yAttributes: _propTypes["default"].object
+};
+exports.propTypes = propTypes;

package/lib/ColorSelect/_shared/ColoredTag/ColoredTag.js

@@ -0,0 +1,69 @@
+"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 _propTypes = require("./props/propTypes");
+
+var _Tag = _interopRequireDefault(require("../../../Tag/Tag"));
+
+var _Common = require("../../../utils/Common.js");
+
+var _excluded = ["colorConfig", "customAttributes", "isActive"];
+
+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 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function ColoredTag(props) {
+  var colorConfig = props.colorConfig,
+      customAttributes = props.customAttributes,
+      isActive = props.isActive,
+      rest = _objectWithoutProperties(props, _excluded);
+
+  var _ref = colorConfig || _Common.DUMMY_OBJECT,
+      textColor = _ref.textColor,
+      backgroundColor = _ref.backgroundColor,
+      borderColor = _ref.borderColor;
+
+  var style = (0, _react.useMemo)(function () {
+    return {
+      '--tag_bg_color': backgroundColor,
+      '--tag_text_color': textColor,
+      '--tag_border_color': borderColor
+    };
+  }, [backgroundColor, textColor, borderColor]);
+  var composedAttributes = (0, _react.useMemo)(function () {
+    return _objectSpread(_objectSpread({}, customAttributes), {}, {
+      style: style
+    });
+  }, [customAttributes, style]);
+  return /*#__PURE__*/_react["default"].createElement(_Tag["default"], _extends({}, rest, {
+    active: isActive,
+    customAttributes: composedAttributes
+  }));
+}
+
+ColoredTag.propTypes = _propTypes.propTypes;
+var _default = ColoredTag;
+exports["default"] = _default;

package/lib/ColorSelect/_shared/ColoredTag/__tests__/ColoredTag.spec.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _ColoredTag = _interopRequireDefault(require("../ColoredTag"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('ColoredTag', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ColoredTag["default"], null)),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with isActive true', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ColoredTag["default"], {
+      isActive: true
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with colorConfig', function () {
+    var colorConfig = {
+      backgroundColor: 'lightsteelblue',
+      textColor: 'dodgerblue',
+      borderColor: 'dodgerblue'
+    };
+
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ColoredTag["default"], {
+      colorConfig: colorConfig
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with customAttributes', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ColoredTag["default"], {
+      customAttributes: {
+        'data-custom-attribute': 'true'
+      }
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with text', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ColoredTag["default"], {
+      text: 'Colored Tag'
+    })),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/lib/ColorSelect/_shared/ColoredTag/__tests__/__snapshots__/ColoredTag.spec.js.snap

@@ -0,0 +1,101 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ColoredTag rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    aria-labelledby="1"
+    class="container effect    medium lgRadius default   "
+    data-id="tag_Tag"
+    data-selector-id="tag"
+    data-test-id="tag_Tag"
+    tabindex="0"
+  >
+    <div
+      aria-hidden="true"
+      class="text mediumtext"
+      id="1"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ColoredTag rendering with colorConfig 1`] = `
+<DocumentFragment>
+  <div
+    aria-labelledby="3"
+    class="container effect    medium lgRadius default   "
+    data-id="tag_Tag"
+    data-selector-id="tag"
+    data-test-id="tag_Tag"
+    style="--tag_bg_color: lightsteelblue; --tag_text_color: dodgerblue; --tag_border_color: dodgerblue;"
+    tabindex="0"
+  >
+    <div
+      aria-hidden="true"
+      class="text mediumtext"
+      id="3"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ColoredTag rendering with customAttributes 1`] = `
+<DocumentFragment>
+  <div
+    aria-labelledby="4"
+    class="container effect    medium lgRadius default   "
+    data-custom-attribute="true"
+    data-id="tag_Tag"
+    data-selector-id="tag"
+    data-test-id="tag_Tag"
+    tabindex="0"
+  >
+    <div
+      aria-hidden="true"
+      class="text mediumtext"
+      id="4"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ColoredTag rendering with isActive true 1`] = `
+<DocumentFragment>
+  <div
+    aria-labelledby="2"
+    class="container effect selected activedefault   medium lgRadius default   "
+    data-id="tag_TagSelected"
+    data-selector-id="tag"
+    data-test-id="tag_TagSelected"
+    tabindex="0"
+  >
+    <div
+      aria-hidden="true"
+      class="text mediumtext"
+      id="2"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ColoredTag rendering with text 1`] = `
+<DocumentFragment>
+  <div
+    aria-labelledby="5"
+    class="container effect    medium lgRadius default   "
+    data-id="tag_Tag"
+    data-selector-id="tag"
+    data-test-id="tag_Tag"
+    data-title="Colored Tag"
+    tabindex="0"
+  >
+    <div
+      aria-hidden="true"
+      class="text mediumtext"
+      id="5"
+    >
+      Colored Tag
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/lib/ColorSelect/_shared/ColoredTag/props/propTypes.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _propTypes2 = require("../../../../Tag/props/propTypes");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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; }
+
+var propTypes = _objectSpread(_objectSpread({}, _propTypes2.propTypes), {}, {
+  isActive: _propTypes["default"].bool,
+  colorConfig: _propTypes["default"].shape({
+    textColor: _propTypes["default"].string,
+    backgroundColor: _propTypes["default"].string,
+    borderColor: _propTypes["default"].string
+  })
+});
+
+exports.propTypes = propTypes;

package/lib/ColorSelect/_shared/helpers/renderHelpers.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderColorIndicator = renderColorIndicator;
+exports.renderColoredTag = renderColoredTag;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ColoredTag = _interopRequireDefault(require("../ColoredTag/ColoredTag"));
+
+var _ColorIndicator = _interopRequireDefault(require("../ColorIndicator/ColorIndicator"));
+
+var _Common = require("../../../utils/Common");
+
+var _excluded = ["option"];
+
+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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function renderColoredTag(data) {
+  var _ref = data || _Common.DUMMY_OBJECT,
+      option = _ref.option,
+      otherData = _objectWithoutProperties(_ref, _excluded);
+
+  var _ref2 = option || _Common.DUMMY_OBJECT,
+      colorConfig = _ref2.colorConfig,
+      value = _ref2.value,
+      id = _ref2.id;
+
+  var _ref3 = colorConfig || _Common.DUMMY_OBJECT,
+      text = _ref3.text,
+      background = _ref3.background,
+      border = _ref3.border;
+
+  function getColorConfig() {
+    return {
+      backgroundColor: background,
+      textColor: text,
+      borderColor: border
+    };
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_ColoredTag["default"], _extends({
+    text: value,
+    id: id
+  }, otherData, {
+    colorConfig: getColorConfig()
+  }));
+}
+
+function renderColorIndicator(data) {
+  var colorConfig = data.colorConfig;
+  return /*#__PURE__*/_react["default"].createElement(_ColorIndicator["default"], {
+    colorConfig: colorConfig
+  });
+}

package/lib/ColorSelect/props/defaultProps.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ColorSingleSelect_defaultProps = exports.ColorMultiSelect_defaultProps = void 0;
+
+var _defaultProps = require("../../MultiSelect/props/defaultProps");
+
+var _defaultProps2 = require("../../Select/props/defaultProps");
+
+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; }
+
+var ColorSingleSelect_defaultProps = _objectSpread(_objectSpread({}, _defaultProps2.Select_defaultProps), {}, {
+  className: '',
+  options: [],
+  customProps: {},
+  customClass: {}
+});
+
+exports.ColorSingleSelect_defaultProps = ColorSingleSelect_defaultProps;
+
+var ColorMultiSelect_defaultProps = _objectSpread(_objectSpread({}, _defaultProps.MultiSelect_defaultProps), {}, {
+  options: [],
+  customProps: {}
+});
+
+exports.ColorMultiSelect_defaultProps = ColorMultiSelect_defaultProps;

package/lib/ColorSelect/props/propTypes.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = exports.ColorSingleSelect_propTypes = exports.ColorMultiSelect_propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _propTypes2 = require("../../Select/props/propTypes");
+
+var _propTypes3 = require("../../MultiSelect/props/propTypes");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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; }
+
+var propTypes = {
+  renderCustomColorIndicator: _propTypes["default"].element
+};
+exports.propTypes = propTypes;
+
+var ColorSingleSelect_propTypes = _objectSpread(_objectSpread(_objectSpread({}, _propTypes2.Select_propTypes), propTypes), {}, {
+  placeholder: _propTypes["default"].string,
+  customClass: _propTypes["default"].shape({
+    selectClass: _propTypes["default"].string
+  }),
+  renderRightPlaceholderNode: _propTypes["default"].node
+});
+
+exports.ColorSingleSelect_propTypes = ColorSingleSelect_propTypes;
+
+var ColorMultiSelect_propTypes = _objectSpread(_objectSpread({}, _propTypes3.MultiSelect_propTypes), propTypes);
+
+exports.ColorMultiSelect_propTypes = ColorMultiSelect_propTypes;

package/lib/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap

@@ -618,10 +618,8 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                 data-test-id="hourField"
               >
                 <div
-                  class="container effect  input  flex rowdir"
-                  data-id="containerComponent"
+                  class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
                   data-selector-id="textBoxIcon"
-                  data-test-id="containerComponent"
                 >
                   <div
                     class="grow basis shrinkOff"
@@ -695,9 +693,6 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                       </div>
                     </div>
                   </div>
-                  <div
-                    class="line borderColor_default "
-                  />
                 </div>
               </div>
             </div>
@@ -718,10 +713,8 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                 data-test-id="minuteField"
               >
                 <div
-                  class="container effect  input  flex rowdir"
-                  data-id="containerComponent"
+                  class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
                   data-selector-id="textBoxIcon"
-                  data-test-id="containerComponent"
                 >
                   <div
                     class="grow basis shrinkOff"
@@ -795,9 +788,6 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                       </div>
                     </div>
                   </div>
-                  <div
-                    class="line borderColor_default "
-                  />
                 </div>
               </div>
             </div>
@@ -818,10 +808,8 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                 data-test-id="ampmField"
               >
                 <div
-                  class="container effect  input  flex rowdir"
-                  data-id="containerComponent"
+                  class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
                   data-selector-id="textBoxIcon"
-                  data-test-id="containerComponent"
                 >
                   <div
                     class="grow basis shrinkOff"
@@ -895,9 +883,6 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                       </div>
                     </div>
                   </div>
-                  <div
-                    class="line borderColor_default "
-                  />
                 </div>
               </div>
             </div>

package/lib/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap

@@ -11,10 +11,8 @@ exports[`DateWidget rendering the defult props 1`] = `
       data-test-id="dateWidget_widget"
     >
       <div
-        class="container effect  placeHolder  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container placeHolder  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -69,9 +67,6 @@ exports[`DateWidget rendering the defult props 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>

package/lib/DateTime/__tests__/__snapshots__/Time.spec.js.snap

@@ -27,10 +27,8 @@ exports[`Time rendering the defult props 1`] = `
           data-test-id="hourField"
         >
           <div
-            class="container effect  input  flex rowdir"
-            data-id="containerComponent"
+            class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
             data-selector-id="textBoxIcon"
-            data-test-id="containerComponent"
           >
             <div
               class="grow basis shrinkOff"
@@ -102,9 +100,6 @@ exports[`Time rendering the defult props 1`] = `
                 </div>
               </div>
             </div>
-            <div
-              class="line borderColor_default "
-            />
           </div>
         </div>
       </div>
@@ -125,10 +120,8 @@ exports[`Time rendering the defult props 1`] = `
           data-test-id="minuteField"
         >
           <div
-            class="container effect  input  flex rowdir"
-            data-id="containerComponent"
+            class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
             data-selector-id="textBoxIcon"
-            data-test-id="containerComponent"
           >
             <div
               class="grow basis shrinkOff"
@@ -200,9 +193,6 @@ exports[`Time rendering the defult props 1`] = `
                 </div>
               </div>
             </div>
-            <div
-              class="line borderColor_default "
-            />
           </div>
         </div>
       </div>
@@ -223,10 +213,8 @@ exports[`Time rendering the defult props 1`] = `
           data-test-id="ampmField"
         >
           <div
-            class="container effect  input  flex rowdir"
-            data-id="containerComponent"
+            class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
             data-selector-id="textBoxIcon"
-            data-test-id="containerComponent"
           >
             <div
               class="grow basis shrinkOff"
@@ -298,9 +286,6 @@ exports[`Time rendering the defult props 1`] = `
                 </div>
               </div>
             </div>
-            <div
-              class="line borderColor_default "
-            />
           </div>
         </div>
       </div>

package/lib/ListItem/ListItem.js

@@ -126,6 +126,7 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
           customProps = _this$props4.customProps,
           needMultiLineText = _this$props4.needMultiLineText,
           secondaryValue = _this$props4.secondaryValue,
+          renderBeforeChildren = _this$props4.renderBeforeChildren,
           renderValueRightPlaceholderNode = _this$props4.renderValueRightPlaceholderNode;
       var _customProps$ListItem = customProps.ListItemProps,
           ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
@@ -173,7 +174,11 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
         className: _ListItemModule["default"].leftBox
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _ListItemModule["default"].titleBox
-      }, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }, (0, _utils.isRenderable)(renderBeforeChildren) ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        shrink: true,
+        adjust: true,
+        className: _ListItemModule["default"].beforeChild
+      }, (0, _utils.renderNode)(renderBeforeChildren)) : null, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         shrink: true,
         adjust: true,
         className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value

package/lib/ListItem/ListItem.module.css

@@ -70,6 +70,12 @@
 .children,.secondaryValue {
   composes: dotted from '../common/common.module.css';
 }
+[dir=ltr] .beforeChild{
+  margin-right: var(--zd_size10) ;
+}
+[dir=rtl] .beforeChild{
+  margin-left: var(--zd_size10) ;
+}
 .value, .multiLineValue {
   line-height: 1.5385;
 }

package/lib/ListItem/__tests__/ListItem.spec.js

@@ -15,18 +15,26 @@ describe('ListItem', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
-  test('ListItem with renderValueRightPlaceholderNode', function () {
+  test('Should render with renderBeforeChildren', function () {
     var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+      renderBeforeChildren: /*#__PURE__*/_react["default"].createElement("span", null, "Before children")
+    }, "Content")),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('ListItem with renderValueRightPlaceholderNode', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
       renderValueRightPlaceholderNode: function renderValueRightPlaceholderNode() {
         return /*#__PURE__*/_react["default"].createElement("div", null, "Custom Placeholder");
       }
     })),
-        asFragment = _render2.asFragment;
+        asFragment = _render3.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('ListItem with renderValueRightPlaceholderNode & it\'s custom class', function () {
-    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
       renderValueRightPlaceholderNode: function renderValueRightPlaceholderNode() {
         return /*#__PURE__*/_react["default"].createElement("div", null, "Custom Placeholder");
       },
@@ -34,7 +42,7 @@ describe('ListItem', function () {
         customValueRightPlaceholder: "customValueRightPlaceholderClass"
       }
     })),
-        asFragment = _render3.asFragment;
+        asFragment = _render4.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });