@zohodesk/components 1.0.0-temp-241 → 1.0.0-temp-242

package/lib/common/common.module.css

@@ -561,6 +561,6 @@
 /*This Lines added to handle mobile number with mixed symbols in rtl case ex : (050)991-881*/
 [dir=rtl] .ltr-zone  input, [dir=rtl] .ltr-dir {
   direction: ltr;
-  /* unicode-bidi: bidi-override; */
+  unicode-bidi: bidi-override;
   text-align: end;
 }

package/lib/utils/Common.js

@@ -38,7 +38,7 @@ exports.stopAllEventPropagation = exports.scrollTo = void 0;
 exports.stopPropagation = stopPropagation;
 exports.throttle = void 0;
 
-var _viewPort = _interopRequireDefault(require("../Popup/viewPort"));
+var _viewPort = _interopRequireDefault(require("@zohodesk/dotkit/es/react/components/Popup/utils/viewPort.js"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 

package/lib/utils/dropDownUtils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.optionIdGrouping = exports.makeObjectConcat = exports.makeGetSelectedValueText = exports.makeGetOptionIdChange = exports.makeGetMultiSelectSelectedOptions = exports.makeGetMultiSelectFilterSuggestions = exports.makeGetIsShowClearIcon = exports.makeGetGroupSelectOptions = exports.makeGetGroupSelectFilterSuggestions = exports.makeFormatOptions = exports.getValueField = exports.getTextField = exports.getSecondaryField = exports.getPrefixText = exports.getOptions = exports.getOptionType = exports.getImageField = exports.getIconSize = exports.getIconName = exports.filterSelectedOptions = exports.extractOptionIdFromJson = exports.extractOptionId = exports.dummyObj = exports.dummyArray = void 0;
+exports.optionIdGrouping = exports.makeObjectConcat = exports.makeGetSelectedValueText = exports.makeGetOptionIdChange = exports.makeGetMultiSelectSelectedOptions = exports.makeGetMultiSelectFilterSuggestions = exports.makeGetIsShowClearIcon = exports.makeGetGroupSelectOptions = exports.makeGetGroupSelectFilterSuggestions = exports.makeFormatOptions = exports.isObjectContainsSearchString = exports.getValueField = exports.getTextField = exports.getSecondaryField = exports.getPrefixText = exports.getOptions = exports.getOptionType = exports.getImageField = exports.getIconSize = exports.getIconName = exports.filterSelectedOptions = exports.extractOptionIdFromJson = exports.extractOptionId = exports.dummyObj = exports.dummyArray = void 0;
 
 var _reselect = require("reselect");
 
@@ -152,6 +152,10 @@ var getListItemProps = function getListItemProps(props) {
   return props.listItemProps || '';
 };
 
+var getlistItemCustomProps = function getlistItemCustomProps(props) {
+  return props.listItemCustomProps || dummyObj;
+};
+
 var defaultSearchFields = ['value'];
 
 var getSearchFields = function getSearchFields(props) {
@@ -176,6 +180,8 @@ var isObjectContainsSearchString = function isObjectContainsSearchString() {
   });
 };
 
+exports.isObjectContainsSearchString = isObjectContainsSearchString;
+
 var getAllowValueFallback = function getAllowValueFallback(props) {
   return props.allowValueFallback !== false;
 };
@@ -265,7 +271,7 @@ var extractOptionIdFromJson = function extractOptionIdFromJson(id, localData) {
 exports.extractOptionIdFromJson = extractOptionIdFromJson;
 
 var makeFormatOptions = function makeFormatOptions() {
-  return (0, _reselect.createSelector)([getOptions, getValueField, getTextField, getImageField, getPrefixText, getIconName, getIconSize, getOptionType, getDisabledOptions, getListItemProps, getAllowValueFallback, getSearchFields, getSecondaryField], function (options, valueField, textField, imageField, prefixText, iconName, iconSize, optionType, disabledOptions, listItemProps, allowValueFallback, searchFields, secondaryField) {
+  return (0, _reselect.createSelector)([getOptions, getValueField, getTextField, getImageField, getPrefixText, getIconName, getIconSize, getOptionType, getDisabledOptions, getListItemProps, getlistItemCustomProps, getAllowValueFallback, getSearchFields, getSecondaryField], function (options, valueField, textField, imageField, prefixText, iconName, iconSize, optionType, disabledOptions, listItemProps, listItemCustomProps, allowValueFallback, searchFields, secondaryField) {
     var revampOptions = [];
     var remvampOptionIds = [];
     var normalizedAllOptions = {};
@@ -280,7 +286,8 @@ var makeFormatOptions = function makeFormatOptions() {
             impOptionType = option.optionType,
             impIconName = option.iconName,
             impIconSize = option.iconSize,
-            listStyle = option.listItemProps;
+            listStyle = option.listItemProps,
+            listStyleCustomProps = option.listItemCustomProps;
         var id = _typeof(option) === 'object' ? option[impValueField || valueField] : option;
         var value = _typeof(option) === 'object' ? option[impTextField || textField] : allowValueFallback ? option : '';
         var secondaryValue = _typeof(option) === 'object' ? option[impSecondaryField || secondaryField] : '';
@@ -325,6 +332,10 @@ var makeFormatOptions = function makeFormatOptions() {
             optionDetails.listItemProps = listStyle || listItemProps;
           }
 
+          if (listStyleCustomProps || listItemCustomProps) {
+            optionDetails.listItemCustomProps = listStyleCustomProps || listItemCustomProps;
+          }
+
           normalizedFormatOptions[id] = optionDetails;
           normalizedAllOptions[id] = _objectSpread(_objectSpread({}, option), {}, {
             groupId: prefixText
@@ -480,7 +491,8 @@ var makeGetGroupSelectOptions = function makeGetGroupSelectOptions() {
           groupId = group.id,
           name = group.name,
           valueField = group.valueField,
-          textField = group.textField;
+          textField = group.textField,
+          secondaryField = group.secondaryField;
 
       if (!(0, _Common.getIsEmptyValue)(groupId) && groupIds.indexOf(groupId) === -1) {
         groupIds.push(groupId);
@@ -490,6 +502,7 @@ var makeGetGroupSelectOptions = function makeGetGroupSelectOptions() {
           options: options,
           valueField: valueField,
           textField: textField,
+          secondaryField: secondaryField,
           prefixText: groupId,
           allowValueFallback: allowValueFallback
         }),

package/lib/v1/Popup/Popup.js

@@ -15,7 +15,7 @@ var _hoistNonReactStatics = _interopRequireDefault(require("hoist-non-react-stat
 
 var _Common = require("../../utils/Common.js");
 
-var _viewPort = _interopRequireDefault(require("../../Popup/viewPort"));
+var _viewPort = _interopRequireDefault(require("@zohodesk/dotkit/es/react/components/Popup/utils/viewPort.js"));
 
 var _PositionMapping = require("../../Popup/PositionMapping.js");
 

package/lib/v1/Switch/__tests__/Switch.spec.js

@@ -8,25 +8,23 @@ var _Switch = _interopRequireDefault(require("../Switch"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-describe('Switch', function () {
-  test('rendering the defult props', function () {
+describe('Switch - Snapshot', function () {
+  test('Render with default props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Switch["default"], null)),
         asFragment = _render.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
-  test('rendering the Switch with Checked', function () {
+  test('Render with isChecked=true', function () {
     var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
-      id: "switch",
       isChecked: true
     })),
         asFragment = _render2.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
-  test('rendering the Switch with Disabled', function () {
+  test('Render with isDisabled=true', function () {
     var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
-      id: "switch",
       isChecked: true,
       isDisabled: true
     })),
@@ -34,4 +32,41 @@ describe('Switch', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('Render with customId and testId', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
+      customId: "switch-customId",
+      testId: "switch-testId"
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with tag attributes', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
+      tagAttributes: {
+        'data-custom-attr': 'true'
+      }
+    })),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with a11y attributes', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
+      a11yAttributes: {
+        role: 'switch'
+      }
+    })),
+        asFragment = _render6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customClass', function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
+      customClass: "my-switch"
+    })),
+        asFragment = _render7.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/lib/v1/Switch/__tests__/__snapshots__/Switch.spec.js.snap

@@ -1,6 +1,179 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Switch rendering the Switch with Checked 1`] = `
+exports[`Switch - Snapshot Render with a11y attributes 1`] = `
+<DocumentFragment>
+  <div
+    class="inlineFlex row alignItems_center container medium unChecked enabled"
+    data-id="flex"
+    data-test-id="flex"
+  >
+    <div
+      class="noShrink trackWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <input
+        class="track"
+        role="switch"
+        type="checkbox"
+        value=""
+      />
+      <svg
+        class="thumb commonSvg"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          cx="50%"
+          cy="50%"
+          r="42.85%"
+        />
+      </svg>
+      <svg
+        class="offLabel commonSvg"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          cx="50%"
+          cy="50%"
+          r="37.5%"
+        />
+      </svg>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Switch - Snapshot Render with customClass 1`] = `
+<DocumentFragment>
+  <div
+    class="inlineFlex row alignItems_center container medium unChecked enabled"
+    data-id="flex"
+    data-test-id="flex"
+  >
+    <div
+      class="noShrink trackWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <input
+        class="track"
+        role="switch"
+        type="checkbox"
+        value=""
+      />
+      <svg
+        class="thumb commonSvg"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          cx="50%"
+          cy="50%"
+          r="42.85%"
+        />
+      </svg>
+      <svg
+        class="offLabel commonSvg"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          cx="50%"
+          cy="50%"
+          r="37.5%"
+        />
+      </svg>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Switch - Snapshot Render with customId and testId 1`] = `
+<DocumentFragment>
+  <div
+    class="inlineFlex row alignItems_center container medium unChecked enabled"
+    data-id="switch-customId"
+    data-selector-id="switch-customId"
+    data-test-id="switch-testId"
+  >
+    <div
+      class="noShrink trackWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <input
+        class="track"
+        role="switch"
+        type="checkbox"
+        value=""
+      />
+      <svg
+        class="thumb commonSvg"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          cx="50%"
+          cy="50%"
+          r="42.85%"
+        />
+      </svg>
+      <svg
+        class="offLabel commonSvg"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          cx="50%"
+          cy="50%"
+          r="37.5%"
+        />
+      </svg>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Switch - Snapshot Render with default props 1`] = `
+<DocumentFragment>
+  <div
+    class="inlineFlex row alignItems_center container medium unChecked enabled"
+    data-id="flex"
+    data-test-id="flex"
+  >
+    <div
+      class="noShrink trackWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <input
+        class="track"
+        role="switch"
+        type="checkbox"
+        value=""
+      />
+      <svg
+        class="thumb commonSvg"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          cx="50%"
+          cy="50%"
+          r="42.85%"
+        />
+      </svg>
+      <svg
+        class="offLabel commonSvg"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          cx="50%"
+          cy="50%"
+          r="37.5%"
+        />
+      </svg>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Switch - Snapshot Render with isChecked=true 1`] = `
 <DocumentFragment>
   <div
     class="inlineFlex row alignItems_center container medium checked enabled"
@@ -15,7 +188,6 @@ exports[`Switch rendering the Switch with Checked 1`] = `
       <input
         checked=""
         class="track"
-        id="switch"
         role="switch"
         type="checkbox"
         value=""
@@ -45,7 +217,7 @@ exports[`Switch rendering the Switch with Checked 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Switch rendering the Switch with Disabled 1`] = `
+exports[`Switch - Snapshot Render with isDisabled=true 1`] = `
 <DocumentFragment>
   <div
     class="inlineFlex row alignItems_center container medium checked disabled"
@@ -61,7 +233,6 @@ exports[`Switch rendering the Switch with Disabled 1`] = `
         aria-disabled="true"
         checked=""
         class="track"
-        id="switch"
         role="switch"
         type="checkbox"
         value=""
@@ -91,7 +262,7 @@ exports[`Switch rendering the Switch with Disabled 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Switch rendering the defult props 1`] = `
+exports[`Switch - Snapshot Render with tag attributes 1`] = `
 <DocumentFragment>
   <div
     class="inlineFlex row alignItems_center container medium unChecked enabled"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-temp-241",
+  "version": "1.0.0-temp-242",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -39,7 +39,7 @@
     "build:css:umd": "npm run clean &&  npm run init && react-cli build:css:umd",
     "coverage": "react-cli coverage",
     "prepare": "npm run init &&  npm run css:build ",
-    "prepublishOnly": "node prePublish.js && npm run download_only",
+    "prepublishOnly": "node prePublish.js && npm run css:review && npm run review:props ",
     "postpublish": "node postPublish.js",
     "report": "react-cli publish:report",
     "test": "react-cli test",
@@ -74,18 +74,18 @@
     "@testing-library/react": "^11.2.5",
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^13.0.10",
-    "@zohodesk-private/color-variable-preprocessor": "1.0.0-temp-13",
+    "@zohodesk-private/color-variable-preprocessor": "1.2.0",
     "@zohodesk-private/css-variable-migrator": "1.0.9",
     "@zohodesk-private/node-plugins": "1.1.13",
     "@zohodesk-private/react-prop-validator": "1.2.3",
     "@zohodesk/a11y": "2.3.8",
     "@zohodesk/docstool": "1.0.0-alpha-2",
-    "@zohodesk/dotkit": "1.0.3",
-    "@zohodesk/hooks": "2.0.5",
-    "@zohodesk/icons": "1.1.0",
+    "@zohodesk/dotkit": "1.0.0-temp-2",
+    "@zohodesk/hooks": "2.0.6",
+    "@zohodesk/icons": "1.1.3",
     "@zohodesk/layout": "3.1.0",
-    "@zohodesk/svg": "1.2.2",
-    "@zohodesk/utils": "1.3.14",
+    "@zohodesk/svg": "1.2.3",
+    "@zohodesk/utils": "1.3.15",
     "@zohodesk/variables": "1.1.0",
     "@zohodesk/virtualizer": "1.0.13",
     "react-sortable-hoc": "^0.8.3",
@@ -99,16 +99,16 @@
     "selectn": "1.1.2"
   },
   "peerDependencies": {
-    "@zohodesk/icons": "1.1.0",
+    "@zohodesk/icons": "1.1.3",
     "@zohodesk/variables": "1.1.0",
-    "@zohodesk/svg": "1.2.2",
+    "@zohodesk/svg": "1.2.3",
     "@zohodesk/virtualizer": "1.0.13",
     "velocity-react": "1.4.3",
     "react-sortable-hoc": "^0.8.3",
-    "@zohodesk/hooks": "2.0.5",
-    "@zohodesk/utils": "1.3.14",
+    "@zohodesk/hooks": "2.0.6",
+    "@zohodesk/utils": "1.3.15",
     "@zohodesk/a11y": "2.3.8",
     "@zohodesk/layout": "3.1.0",
-    "@zohodesk/dotkit": "1.0.3"
+    "@zohodesk/dotkit": "1.0.0-temp-2"
   }
 }

package/es/Popup/PositionMapping.js

@@ -1,72 +0,0 @@
-export const absolutePositionMapping = {
-  "bottomCenter": "bottomCenter",
-  "bottomRight": "bottomLeftToRight",
-  "bottomLeft": "bottomRightToLeft",
-  "topCenter": "topCenter",
-  "topRight": "topLeftToRight",
-  "topLeft": "topRightToLeft",
-  "rightCenter": "rightCenter",
-  "rightBottom": "rightTopToBottom",
-  "rightTop": "rightBottomToTop",
-  "leftCenter": "leftCenter",
-  "leftBottom": "leftTopToBottom",
-  "leftTop": "leftBottomToTop",
-  "bottomLeftToRight": "bottomLeftToRight",
-  "bottomRightToLeft": "bottomRightToLeft",
-  "topLeftToRight": "topLeftToRight",
-  "topRightToLeft": "topRightToLeft",
-  "rightTopToBottom": "rightTopToBottom",
-  "rightBottomToTop": "rightBottomToTop",
-  "leftTopToBottom": "leftTopToBottom"
-};
-export const rtlAbsolutePositionMapping = {
-  "bottomCenter": "bottomCenter",
-  "bottomRight": "bottomRightToLeft",
-  "bottomLeft": "bottomLeftToRight",
-  "topCenter": "topCenter",
-  "topRight": "topRightToLeft",
-  "topLeft": "topLeftToRight",
-  "rightCenter": "leftCenter",
-  "rightBottom": "leftTopToBottom",
-  "rightTop": "leftBottomToTop",
-  "leftCenter": "rightCenter",
-  "leftBottom": "rightTopToBottom",
-  "leftTop": "rightBottomToTop",
-  "bottomLeftToRight": "bottomLeftToRight",
-  "bottomRightToLeft": "bottomRightToLeft",
-  "topLeftToRight": "topLeftToRight",
-  "topRightToLeft": "topRightToLeft",
-  "rightTopToBottom": "rightTopToBottom",
-  "rightBottomToTop": "rightBottomToTop",
-  "leftTopToBottom": "leftTopToBottom"
-};
-export const rtlFixedPositionMapping = {
-  "bottomCenter": "bottomCenter",
-  "bottomLeftToRight": "bottomRightToLeft",
-  "bottomCenterToRight": "bottomCenterToLeft",
-  "bottomRightToLeft": "bottomLeftToRight",
-  "bottomCenterToLeft": "bottomCenterToRight",
-  "topCenter": "topCenter",
-  "topLeftToRight": "topRightToLeft",
-  "topCenterToRight": "topCenterToLeft",
-  "topRightToLeft": "topLeftToRight",
-  "topCenterToLeft": "topCenterToRight",
-  "rightTopToBottom": "leftTopToBottom",
-  "rightCenterToBottom": "leftCenterToBottom",
-  "rightCenter": "leftCenter",
-  "rightBottomToTop": "leftBottomToTop",
-  "rightCenterToTop": "leftCenterToTop",
-  "leftTopToBottom": "rightTopToBottom",
-  "leftCenterToBottom": "rightCenterToBottom",
-  "leftCenter": "rightCenter",
-  "leftBottomToTop": "rightBottomToTop",
-  "leftCenterToTop": "rightCenterToTop",
-  "bottomRight": "bottomLeft",
-  "bottomLeft": "bottomRight",
-  "topRight": "topLeft",
-  "topLeft": "topRight",
-  "rightBottom": "leftBottom",
-  "rightTop": "leftTop",
-  "leftBottom": "rightBottom",
-  "leftTop": "rightTop"
-};

package/es/Popup/Registry.js

@@ -1,36 +0,0 @@
-import { getLibraryConfig } from "../Provider/Config.js";
-const Registry = {
-  lastOpenedGroup: [],
-  popups: {},
-  listenerPopupRef: undefined,
-  scrollBlockedListenerPopupRef: undefined,
-  scrollableListenerPopupRef: undefined,
-
-  getOpenedPopups() {
-    return Object.values(Registry.popups).flat().filter(popup => popup.state.isPopupOpen);
-  },
-
-  getOpenedScrollBlockedFixedPopups() {
-    return Registry.getOpenedPopups().filter(popup => popup.getIsOutsideScrollBlocked(popup) && !popup.getIsAbsolutePopup(popup));
-  },
-
-  getOpenedScrollableFixedPopups() {
-    return Registry.getOpenedPopups().filter(popup => !popup.getIsOutsideScrollBlocked(popup) && !popup.getIsAbsolutePopup(popup));
-  },
-
-  getRootElement() {
-    const getRootElement = getLibraryConfig('getRootElement');
-
-    if (getRootElement && typeof getRootElement === 'function') {
-      const parent = getRootElement();
-
-      if (parent) {
-        return parent;
-      }
-    }
-
-    return document;
-  }
-
-};
-export default Registry;

package/es/Popup/intersectionObserver.js

@@ -1,49 +0,0 @@
-let observerCallbacks = null;
-let intersectionObserver = null;
-
-function handleObserverCallbacks(entries) {
-  entries.forEach(entry => {
-    let oldCallbacks = observerCallbacks.get(entry.target);
-
-    if (Array.isArray(oldCallbacks) && oldCallbacks.length) {
-      oldCallbacks.forEach(callback => {
-        callback && callback(entry);
-      });
-    }
-  });
-}
-
-export function addIntersectionObserver(element, callback, options) {
-  if (!!element && typeof callback == 'function') {
-    if (intersectionObserver === null && observerCallbacks === null) {
-      intersectionObserver = new IntersectionObserver(entries => {
-        handleObserverCallbacks(entries);
-      }, options);
-      observerCallbacks = new Map();
-    }
-
-    intersectionObserver.observe(element);
-    let oldCallbacks = observerCallbacks.get(element) || [];
-    observerCallbacks.set(element, [...oldCallbacks, callback]);
-  }
-}
-export function removeIntersectionObserver(element, callback) {
-  if (!!element && typeof callback == 'function') {
-    let oldCallbacks = observerCallbacks ? observerCallbacks.get(element) : null;
-
-    if (Array.isArray(oldCallbacks)) {
-      let callbacks = oldCallbacks.filter(handler => handler !== callback);
-
-      if (intersectionObserver && callbacks.length === 0) {
-        observerCallbacks.delete(element);
-        intersectionObserver.unobserve(element);
-      }
-    }
-
-    if (intersectionObserver && observerCallbacks && observerCallbacks.size === 0) {
-      intersectionObserver.disconnect();
-      intersectionObserver = null;
-      observerCallbacks = null;
-    }
-  }
-}