@zohodesk/dot 1.0.0-temp-187.3 → 1.0.0-temp-201

package/es/lookup/header/Search/__tests__/Search.spec.js

@@ -1,6 +1,7 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, cleanup, fireEvent } from '@testing-library/react';
 import Search from "../Search";
+afterEach(cleanup);
 describe('Search', () => {
   test('rendering the defult props', () => {
     const {
@@ -8,4 +9,69 @@ describe('Search', () => {
     } = render( /*#__PURE__*/React.createElement(Search, null));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('rendering the search active', () => {
+    const {
+      asFragment,
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(Search, null));
+    fireEvent.focus(getByRole('textbox'));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the prop hasSeparator is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Search, {
+      hasSeparator: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the prop hasSeparator is false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Search, {
+      hasSeparator: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the renderChildren props via function', () => {
+    const options = [{
+      value: 'All Fields',
+      id: '1'
+    }, {
+      value: 'Account',
+      id: '3'
+    }, {
+      value: 'Customer Place',
+      id: '4'
+    }, {
+      value: 'Conatct ID',
+      id: '5'
+    }];
+
+    function renderChildren(_ref) {
+      let {
+        value
+      } = _ref;
+      return /*#__PURE__*/React.createElement("div", null, value);
+    }
+
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Search, {
+      value: "All Fields",
+      renderChildren: renderChildren,
+      options: options
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the customized style search', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Search, {
+      customStyle: {
+        wrapper: "searchWrapperClass"
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/es/lookup/header/Search/__tests__/__snapshots__/Search.spec.js.snap

@@ -1,13 +1,196 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Search rendering the customized style search 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapper searchWrapperClass borderType 
+          
+          
+         flex rowdir vCenter"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <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 small  default  effect  borderColor_default  "
+            data-a11y-autofocus="true"
+            data-id="textBoxIcon"
+            data-selector-id="textBoxIcon"
+            data-test-id="textBoxIcon"
+            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>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Search rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="searchStyle    flex rowdir vCenter"
+    class="wrapper borderType 
+          
+          
+         flex rowdir vCenter"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <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 small  default  effect  borderColor_default  "
+            data-a11y-autofocus="true"
+            data-id="textBoxIcon"
+            data-selector-id="textBoxIcon"
+            data-test-id="textBoxIcon"
+            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>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Search rendering the prop hasSeparator is false 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapper borderType 
+          
+          
+         flex rowdir vCenter"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <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 small  default  effect  borderColor_default  "
+            data-a11y-autofocus="true"
+            data-id="textBoxIcon"
+            data-selector-id="textBoxIcon"
+            data-test-id="textBoxIcon"
+            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>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Search rendering the prop hasSeparator is true 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapper borderType 
+          
+          
+         flex rowdir vCenter"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
+    <div
+      class="separator"
+    />
     <div
       class="grow basis shrinkOff"
       data-id="boxComponent"
@@ -50,9 +233,139 @@ exports[`Search rendering the defult props 1`] = `
             data-test-id="containerComponent"
           />
         </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Search rendering the renderChildren props via function 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapper"
+    data-selector-id="toggleDropdown"
+  >
+    <div
+      class="flex rowdir vCenter"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="wrapper borderType 
+          
+          
+         flex rowdir vCenter"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div>
+          All Fields
+        </div>
         <div
-          class="line borderColor_default "
-        />
+          class="grow basis shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <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 small  default  effect  borderColor_default  "
+                data-a11y-autofocus="true"
+                data-id="textBoxIcon"
+                data-selector-id="textBoxIcon"
+                data-test-id="textBoxIcon"
+                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>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Search rendering the search active 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapper borderType 
+          active 
+          focusWidth
+         flex rowdir vCenter"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="container effect effectFocused   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 small  default  effect  borderColor_default  "
+            data-a11y-autofocus="true"
+            data-id="textBoxIcon"
+            data-selector-id="textBoxIcon"
+            data-test-id="textBoxIcon"
+            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>
     </div>
   </div>

package/es/lookup/header/Search/props/defaultProps.js

@@ -1,5 +1,7 @@
 export const SearchUI_defaultProps = {
   activeClass: '',
   isBoxed: false,
-  isSearchIconNeed: false
+  isSearchIconNeed: false,
+  isActive: false,
+  hasSeparator: false
 };

package/es/lookup/header/Search/props/propTypes.js

@@ -6,6 +6,7 @@ export const Search_propTypes = {
   onSelect: PropTypes.func,
   options: PropTypes.array,
   selectedId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  renderChildren: PropTypes.func,
   value: PropTypes.string
 };
 export const SearchUI_propTypes = {
@@ -24,5 +25,9 @@ export const SearchUI_propTypes = {
   options: PropTypes.array,
   placeHolder: PropTypes.string,
   searchStr: PropTypes.string,
-  title: PropTypes.string
+  title: PropTypes.string,
+  isActive: PropTypes.bool,
+  hasSeparator: PropTypes.bool,
+  renderChildren: PropTypes.func,
+  customStyle: PropTypes.object
 };

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

@@ -81,6 +81,7 @@ const RadioField = props => {
       tooltip,
       infoTooltip
     } = option;
+    let isDisabledState = disabled || isDisabled;
     let isChecked = selectedValue == value;
     return /*#__PURE__*/React.createElement("span", {
       key: index,
@@ -93,7 +94,7 @@ const RadioField = props => {
       labelPalette: labelPalette,
       labelSize: labelSize,
       active: isActive || isBoxStyle && isChecked,
-      disabled: disabled || isDisabled,
+      disabled: isDisabledState,
       disabledTitle: tooltip,
       title: tooltip,
       onChange: handleChange,
@@ -109,7 +110,7 @@ const RadioField = props => {
         ...RadioProps.a11y
       },
       customClass: {
-        customRadioWrap: `${isBoxStyle ? style.radioBox : ''} ${isBoxStyle && isChecked ? style.radioBoxActive : ''}`,
+        customRadioWrap: isBoxStyle ? `${style.radioBox} ${!isDisabledState ? style.hoverableRadioBox : ''} ${isChecked ? style.radioBoxActive : ''}` : '',
         ...RadioProps.customClass
       }
     }, !!infoTooltip ? /*#__PURE__*/React.createElement(Icon, {

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

@@ -74,7 +74,7 @@
   border: 1px solid var(--zdt_radiofield_box_border);
   border-radius: 6px
 }
-.radioBox:hover, .radioBoxActive {
+.hoverableRadioBox:hover, .radioBoxActive {
   border-color: var(--zdt_radiofield_box_active_border)
 }
 .radioBoxActive {

package/lib/form/fields/RadioField/RadioField.js

@@ -29,6 +29,12 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 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 _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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -62,45 +68,98 @@ var RadioField = /*#__PURE__*/function (_PureComponent) {
     _classCallCheck(this, RadioField);
 
     _this = _super.call(this, props);
+    _this.data = {
+      radios: {},
+      focus: _this.handleFocus
+    };
     _this.handleChange = _this.handleChange.bind(_assertThisInitialized(_this));
+    _this.updateData = _this.updateData.bind(_assertThisInitialized(_this));
+    _this.handleFocus = _this.handleFocus.bind(_assertThisInitialized(_this));
     return _this;
   }
 
   _createClass(RadioField, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this$props = this.props,
+          getRef = _this$props.getRef,
+          id = _this$props.id;
+      getRef && getRef(this.data, id);
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var _this$props2 = this.props,
+          getRef = _this$props2.getRef,
+          id = _this$props2.id;
+
+      if (getRef !== prevProps.getRef) {
+        getRef && getRef(this.data, id);
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      var _this$props3 = this.props,
+          getRef = _this$props3.getRef,
+          id = _this$props3.id;
+      getRef && getRef(null, id);
+    }
+  }, {
     key: "handleChange",
     value: function handleChange(value) {
-      var _this$props = this.props,
-          id = _this$props.id,
-          onChange = _this$props.onChange;
+      var _this$props4 = this.props,
+          id = _this$props4.id,
+          onChange = _this$props4.onChange;
       onChange && onChange(id, value);
     }
+  }, {
+    key: "updateData",
+    value: function updateData(ele, val) {
+      this.data.radios[val] = ele;
+    }
+  }, {
+    key: "handleFocus",
+    value: function handleFocus() {
+      var _this$props5 = this.props,
+          selectedValue = _this$props5.selectedValue,
+          options = _this$props5.options;
+      var firstRadioValue = options[0].value;
+
+      if (selectedValue) {
+        this.data.radios[selectedValue].focus();
+      } else {
+        this.data.radios[firstRadioValue].focus();
+      }
+    }
   }, {
     key: "render",
     value: function render() {
       var _this2 = this;
 
-      var _this$props2 = this.props,
-          labelName = _this$props2.labelName,
-          id = _this$props2.id,
-          isMandatory = _this$props2.isMandatory,
-          options = _this$props2.options,
-          validationMessage = _this$props2.validationMessage,
-          validationPalette = _this$props2.validationPalette,
-          errorType = _this$props2.errorType,
-          isDisabled = _this$props2.isDisabled,
-          title = _this$props2.title,
-          labelPalette = _this$props2.labelPalette,
-          labelSize = _this$props2.labelSize,
-          size = _this$props2.size,
-          selectedValue = _this$props2.selectedValue,
-          isActive = _this$props2.isActive,
-          dataId = _this$props2.dataId,
-          dataSelectorId = _this$props2.dataSelectorId,
-          validationRuleMessage = _this$props2.validationRuleMessage,
-          validationRulePalette = _this$props2.validationRulePalette,
-          isReadOnly = _this$props2.isReadOnly,
-          variant = _this$props2.variant,
-          customProps = _this$props2.customProps;
+      var _this$props6 = this.props,
+          labelName = _this$props6.labelName,
+          id = _this$props6.id,
+          isMandatory = _this$props6.isMandatory,
+          options = _this$props6.options,
+          validationMessage = _this$props6.validationMessage,
+          validationPalette = _this$props6.validationPalette,
+          errorType = _this$props6.errorType,
+          isDisabled = _this$props6.isDisabled,
+          title = _this$props6.title,
+          labelPalette = _this$props6.labelPalette,
+          labelSize = _this$props6.labelSize,
+          size = _this$props6.size,
+          selectedValue = _this$props6.selectedValue,
+          isActive = _this$props6.isActive,
+          dataId = _this$props6.dataId,
+          dataSelectorId = _this$props6.dataSelectorId,
+          validationRuleMessage = _this$props6.validationRuleMessage,
+          validationRulePalette = _this$props6.validationRulePalette,
+          isReadOnly = _this$props6.isReadOnly,
+          isBoxStyle = _this$props6.isBoxStyle,
+          variant = _this$props6.variant,
+          customProps = _this$props6.customProps;
       var _customProps$LabelPro = customProps.LabelProps,
           LabelProps = _customProps$LabelPro === void 0 ? {} : _customProps$LabelPro,
           _customProps$RadioPro = customProps.RadioProps,
@@ -123,7 +182,7 @@ var RadioField = /*#__PURE__*/function (_PureComponent) {
         customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
         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_medium : '', " ").concat(_FieldsModule["default"].radioContainer)
+        className: "".concat(_FieldsModule["default"].fieldContainer, " ").concat(isBoxStyle ? _FieldsModule["default"].radiosWrapper : '', " ").concat(labelName ? _FieldsModule["default"].fieldMargin_medium : '', " ").concat(_FieldsModule["default"].radioContainer)
       }, options.map(function (option, index) {
         var text = option.text,
             value = option.value,
@@ -131,9 +190,11 @@ var RadioField = /*#__PURE__*/function (_PureComponent) {
             disabled = _option$disabled === void 0 ? false : _option$disabled,
             tooltip = option.tooltip,
             infoTooltip = option.infoTooltip;
+        var isDisabledState = disabled || isDisabled;
+        var isChecked = selectedValue == value;
         return /*#__PURE__*/_react["default"].createElement("span", {
           key: index,
-          className: "".concat(_FieldsModule["default"].radio)
+          className: "".concat(!isBoxStyle ? _FieldsModule["default"].radio : '', " ").concat(_FieldsModule["default"].radioWrap)
         }, /*#__PURE__*/_react["default"].createElement(_Radio["default"], _extends({
           id: index,
           value: value,
@@ -141,17 +202,25 @@ var RadioField = /*#__PURE__*/function (_PureComponent) {
           text: text,
           labelPalette: labelPalette,
           labelSize: labelSize,
-          active: isActive,
-          disabled: disabled || isDisabled,
+          active: isActive || isBoxStyle && isChecked,
+          disabled: isDisabledState,
           disabledTitle: tooltip,
           title: tooltip,
           onChange: _this2.handleChange,
+          getRef: _this2.updateData,
           size: size,
-          checked: selectedValue == value,
+          checked: isChecked,
           dataId: dataId,
           isReadOnly: isReadOnly,
           variant: variant
-        }, RadioProps), !!infoTooltip ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], _extends({
+        }, RadioProps, {
+          a11y: _objectSpread({
+            tabIndex: !!selectedValue ? isChecked ? '0' : '-1' : index === 0 ? '0' : '-1'
+          }, RadioProps.a11y),
+          customClass: _objectSpread({
+            customRadioWrap: isBoxStyle ? "".concat(_FieldsModule["default"].radioBox, " ").concat(!isDisabledState ? _FieldsModule["default"].hoverableRadioBox : '', " ").concat(isChecked ? _FieldsModule["default"].radioBoxActive : '') : ''
+          }, RadioProps.customClass)
+        }), !!infoTooltip ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], _extends({
           name: "ZD-GN-info",
           size: "16",
           title: infoTooltip,

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.defaultProps = void 0;
 var defaultProps = {
   errorType: 'primary',
+  isBoxStyle: false,
   isMandatory: false,
   isDisabled: false,
   isReadOnly: false,