@zohodesk/components 1.0.0-temp-252.4 → 1.0.0-temp-256

package/es/Tab/__tests__/__snapshots__/Tab.spec.js.snap

@@ -1,5 +1,152 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Tab renderBefore / renderAfter slots renderAfter renders a node to the right of the label 1`] = `
+<DocumentFragment>
+  <div
+    aria-controls="t7"
+    aria-label="Home"
+    aria-selected="false"
+    class="tab horizontal basisAuto shrinkOff"
+    data-id="tabMenu_Tab"
+    data-key="t7"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      class="textContainer flex cover rowdir both"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="tabText grow basisAuto shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        Home
+      </div>
+      <span>
+        3
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab renderBefore / renderAfter slots renderBefore and renderAfter both render around the label 1`] = `
+<DocumentFragment>
+  <div
+    aria-controls="t8"
+    aria-label="Home"
+    aria-selected="false"
+    class="tab horizontal basisAuto shrinkOff"
+    data-id="tabMenu_Tab"
+    data-key="t8"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      class="textContainer flex cover rowdir both"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <span>
+        ◀
+      </span>
+      <div
+        class="tabText grow basisAuto shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        Home
+      </div>
+      <span>
+        ▶
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab renderBefore / renderAfter slots renderBefore as function renders custom node 1`] = `
+<DocumentFragment>
+  <div
+    aria-controls="t9"
+    aria-label="Home"
+    aria-selected="false"
+    class="tab horizontal basisAuto shrinkOff"
+    data-id="tabMenu_Tab"
+    data-key="t9"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      class="textContainer flex cover rowdir both"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <span>
+        ◀
+      </span>
+      <div
+        class="tabText grow basisAuto shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        Home
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab renderBefore / renderAfter slots renderBefore renders a node to the left of the label 1`] = `
+<DocumentFragment>
+  <div
+    aria-controls="t6"
+    aria-label="Home"
+    aria-selected="false"
+    class="tab horizontal basisAuto shrinkOff"
+    data-id="tabMenu_Tab"
+    data-key="t6"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      class="textContainer flex cover rowdir both"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <span>
+        ◀
+      </span>
+      <div
+        class="tabText grow basisAuto shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        Home
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Tab rendering the defult props 1`] = `
 <DocumentFragment>
   <div
@@ -20,3 +167,172 @@ exports[`Tab rendering the defult props 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`Tab variant-based label rendering renderIcon as function receives no args and renders custom node 1`] = `
+<DocumentFragment>
+  <div
+    aria-controls="t5"
+    aria-label="Home"
+    aria-selected="false"
+    class="tab horizontal basisAuto shrinkOff"
+    data-id="tabMenu_Tab"
+    data-key="t5"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      class="textContainer flex cover rowdir both"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <span>
+        ★
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab variant-based label rendering renderIcon overrides iconName 1`] = `
+<DocumentFragment>
+  <div
+    aria-controls="t4"
+    aria-label="Home"
+    aria-selected="false"
+    class="tab horizontal basisAuto shrinkOff"
+    data-id="tabMenu_Tab"
+    data-key="t4"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      class="textContainer flex cover rowdir both"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <span>
+        ★
+      </span>
+      <div
+        class="tabText grow basisAuto shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        Home
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab variant-based label rendering variant="icon" renders icon and suppresses text label 1`] = `
+<DocumentFragment>
+  <div
+    aria-controls="t2"
+    aria-label="Home"
+    aria-selected="false"
+    class="tab horizontal basisAuto shrinkOff"
+    data-id="tabMenu_Tab"
+    data-key="t2"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      class="textContainer flex cover rowdir both"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons basic icon-menu    rtl "
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab variant-based label rendering variant="iconWithText" renders icon followed by text 1`] = `
+<DocumentFragment>
+  <div
+    aria-controls="t3"
+    aria-label="Home"
+    aria-selected="false"
+    class="tab horizontal basisAuto shrinkOff"
+    data-id="tabMenu_Tab"
+    data-key="t3"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      class="textContainer flex cover rowdir both"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons basic icon-menu    rtl "
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+      />
+      <div
+        class="tabText grow basisAuto shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        Home
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab variant-based label rendering variant="text" renders text only 1`] = `
+<DocumentFragment>
+  <div
+    aria-controls="t1"
+    aria-label="Home"
+    aria-selected="false"
+    class="tab horizontal basisAuto shrinkOff"
+    data-id="tabMenu_Tab"
+    data-key="t1"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      class="textContainer flex cover rowdir both"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="tabText grow basisAuto shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        Home
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/es/Tab/props/defaultProps.js

@@ -3,7 +3,8 @@ export const Tab_defaultProps = {
   contentAlign: 'both',
   contentAlignBox: 'row',
   customProps: {},
-  dataSelectorId: 'tab'
+  dataSelectorId: 'tab',
+  variant: 'text'
 };
 export const TabContent_defaultProps = {
   dataId: 'tabContent',
@@ -36,7 +37,7 @@ export const Tabs_defaultProps = {
   searchBoxSize: 'small',
   searchErrorText: 'No results',
   placeHolderText: 'Search',
-  isAbsolutePositioningNeeded: true,
+  isAbsolutePositioningNeeded: false,
   isRestrictScroll: false,
   moreContainerClass: ''
 };

package/es/Tab/props/propTypes.js

@@ -1,4 +1,6 @@
 import PropTypes from 'prop-types';
+import { VARIANT } from "../utils/tabConfigs";
+const renderSlotType = PropTypes.oneOfType([PropTypes.node, PropTypes.func]);
 export const Tab_propTypes = {
   activeClass: PropTypes.string,
   align: PropTypes.oneOf(['vertical', 'horizontal']),
@@ -26,7 +28,14 @@ export const Tab_propTypes = {
   contentAlignBox: PropTypes.oneOf(['row', 'column', 'row-reverse', 'column-reverse']),
   customProps: PropTypes.object,
   isVirtual: PropTypes.bool,
-  dataSelectorId: PropTypes.string
+  dataSelectorId: PropTypes.string,
+  variant: PropTypes.oneOf(Object.values(VARIANT)),
+  iconPlacement: PropTypes.string,
+  iconName: PropTypes.string,
+  iconSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  renderIcon: renderSlotType,
+  renderBefore: renderSlotType,
+  renderAfter: renderSlotType
 };
 export const TabContent_propTypes = {
   children: PropTypes.node,
@@ -82,7 +91,7 @@ export const Tabs_propTypes = {
   showTitleInMoreOptions: PropTypes.bool,
   style: PropTypes.object,
   togglePopup: PropTypes.func,
-  type: PropTypes.oneOf(['alpha', 'beta', 'delta']),
+  type: PropTypes.oneOf(['alpha', 'beta', 'delta', 'default']),
   getTargetRef: PropTypes.func,
   containerClass: PropTypes.string,
   customProps: PropTypes.shape({
@@ -114,6 +123,6 @@ export const TabWrapper_propTypes = {
   needPadding: PropTypes.bool,
   needTabBorder: PropTypes.bool,
   onSelect: PropTypes.func,
-  type: PropTypes.oneOf(['alpha', 'beta', 'delta']),
+  type: PropTypes.oneOf(['alpha', 'beta', 'delta', 'default']),
   dataSelectorId: PropTypes.string
 };

package/es/Tab/utils/tabConfigs.js

@@ -1,3 +1,8 @@
+export const VARIANT = {
+  TEXT: 'text',
+  ICON: 'icon',
+  ICON_WITH_TEXT: 'iconWithText'
+};
 export const TAB_ALIGN_MAPPING = {
   vertical: 'column',
   horizontal: 'row',

package/es/Typography/css/cssJSLogic.js

@@ -1,10 +1,9 @@
 import { compileClassNames } from '@zohodesk/utils';
 import { letterspacingMapping, lineheightMapping } from "../utils";
-export default function cssJSLogic(_ref) {
-  let {
-    props,
-    style
-  } = _ref;
+export default function cssJSLogic({
+  props,
+  style
+}) {
   let {
     $flag_reset,
     shouldReset,

package/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js

@@ -34,8 +34,7 @@ export default class VelocityAnimationGroup extends React.Component {
 
     if (postEnterStyles && typeof postEnterStyles === 'object') {
       elements.forEach(rootElement => {
-        Object.entries(postEnterStyles).forEach(_ref => {
-          let [cssProperty, cssValue] = _ref;
+        Object.entries(postEnterStyles).forEach(([cssProperty, cssValue]) => {
           rootElement.style[cssProperty] = cssValue;
         });
       });

package/es/utils/Common.js

@@ -49,14 +49,11 @@ export function encodeForHtml(str) {
 
   return str;
 }
-export function getListOfDetails() {
-  let Obj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  let fn = arguments.length > 1 ? arguments[1] : undefined;
+export function getListOfDetails(Obj = {}, fn) {
   const ids = Object.keys(Obj) || [];
   return ids.map(id => fn(Obj[id]));
 }
-export function capitalize() {
-  let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+export function capitalize(value = '') {
   let newValue = '';
 
   for (let i = 0; i < value.length; i++) {
@@ -69,18 +66,12 @@ export function capitalize() {
 
   return newValue;
 }
-export function bind() {
-  for (var _len = arguments.length, handlers = new Array(_len), _key = 0; _key < _len; _key++) {
-    handlers[_key] = arguments[_key];
-  }
-
+export function bind(...handlers) {
   handlers.forEach(handler => {
     this[handler] = this[handler].bind(this);
   });
 }
-export function getFullName() {
-  let firstName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  let lastName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+export function getFullName(firstName = '', lastName = '') {
   let fullName = '';
 
   if (firstName !== null && firstName !== '') {
@@ -93,8 +84,7 @@ export function getFullName() {
 
   return fullName;
 }
-export function getStringifiedOutputForJson() {
-  let input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+export function getStringifiedOutputForJson(input = {}) {
   const keys = Object.keys(input);
   const modifiedInput = keys.reduce((curr, next) => {
     const values = input[next] || [];
@@ -130,19 +120,14 @@ export function filterValue(obj, val) {
   });
   return result;
 }
-export function merge() {
-  let oldObj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  let newObj = arguments.length > 1 ? arguments[1] : undefined;
+export function merge(oldObj = {}, newObj) {
   const copyOfOld = Object.assign({}, oldObj);
   return Object.keys(newObj).reduce((res, key) => {
     res[key] = Object.assign({}, res[key] || {}, newObj[key]);
     return res;
   }, copyOfOld);
 }
-export function formatValue() {
-  let values = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  let valueField = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'id';
-  let textField = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'name';
+export function formatValue(values = [], valueField = 'id', textField = 'name') {
   return values && values.map(value => {
     let formattedValue = value;
 
@@ -166,8 +151,7 @@ export function bytesToSize(bytes) {
   const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)), 10);
   return `${Math.round(bytes / Math.pow(1024, i), 2)} ${sizes[i]}`;
 }
-export function getMemSize(bytes) {
-  let size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
+export function getMemSize(bytes, size = !0) {
   const thresh = size ? 1000 : 1024;
 
   if (Math.abs(bytes) < thresh) {
@@ -300,11 +284,7 @@ export const debounce = function (func, wait) {
   };
 };
 let timerId;
-export const throttle = function (func, wait) {
-  for (var _len2 = arguments.length, args = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
-    args[_key2 - 2] = arguments[_key2];
-  }
-
+export const throttle = (func, wait, ...args) => {
   if (timerId) {
     return;
   }
@@ -374,8 +354,7 @@ export function getElementSpace(elementRef) {
     availableInsideSpace: availableInsideSpace
   };
 }
-export function getSearchString() {
-  let charachers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+export function getSearchString(charachers = '') {
   return (charachers || '').toString().toLowerCase().trim(); //.replace(/\s+/g, '');
 }
 export function findScrollEnd(element) {

package/es/utils/datetime/common.js

@@ -4,9 +4,7 @@ let dateFormat = {
   monthNames: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
   timeNames: ['a', 'p', 'am', 'pm', 'A', 'P', 'AM', 'PM']
 };
-export function pad(n) {
-  let width = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
-  let z = arguments.length > 2 ? arguments[2] : undefined;
+export function pad(n, width = 1, z) {
   z = z || '0';
   n = `${n}`;
   return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
@@ -16,7 +14,10 @@ export function getTimeOffset() {
   const matchingOffset = Object.keys(offsetMap).find(offset => GMT.getTimezoneOffset() === Number(offset));
   return matchingOffset ? offsetMap[matchingOffset].toString().split(' ') : ['', ''];
 }
-export function formatDate(dateMill, mask) {
+export function formatDate(dateMill, mask, {
+  i18nShortMonths,
+  i18nMonths
+} = {}) {
   let date = new Date(dateMill);
   let O = getTimeOffset()[0];
   let Z = getTimeOffset()[1];
@@ -28,6 +29,10 @@ export function formatDate(dateMill, mask) {
   let M = date.getMinutes();
   let s = date.getSeconds();
   let L = date.getMilliseconds();
+  const defaultShortMonths = dateFormat.monthNames.slice(0, 12);
+  const defaultMonths = dateFormat.monthNames.slice(12);
+  const resolvedShortMonths = Array.isArray(i18nShortMonths) ? i18nShortMonths : defaultShortMonths;
+  const resolvedMonths = Array.isArray(i18nMonths) ? i18nMonths : defaultMonths;
   let flags = {
     d: d,
     O: O,
@@ -40,8 +45,8 @@ export function formatDate(dateMill, mask) {
     DDDD: dateFormat.dayNames[D + 7],
     M: m + 1,
     MM: pad(m + 1, 2),
-    MMM: dateFormat.monthNames[m],
-    MMMM: dateFormat.monthNames[m + 12],
+    MMM: resolvedShortMonths[m],
+    MMMM: resolvedMonths[m],
     yy: String(y).slice(2),
     YY: String(y).slice(2),
     yyyy: y,
@@ -90,9 +95,7 @@ export function replaceI18NValuesWithRegex(i18nStr, values) {
 export function unescapeUnicode(str) {
   return str.replace(/\\u([a-fA-F0-9]{4})/g, (g, m1) => String.fromCharCode(parseInt(m1, 16)));
 }
-export function getValues() {
-  let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  let diff = arguments.length > 1 ? arguments[1] : undefined;
+export function getValues(params = [], diff) {
   return params.map(param => diff[param]);
 }
 export function getI18NValue(i18n) {

package/es/utils/dropDownUtils.js

@@ -58,10 +58,7 @@ const getSearchFields = props => {
 // }
 
 
-export const isObjectContainsSearchString = function () {
-  let searchFields = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  let searchStr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  let obj = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+export const isObjectContainsSearchString = (searchFields = [], searchStr = '', obj = {}) => {
   return searchFields.some(field => {
     const val = obj[field];
     if (val === null || val === undefined) return false;
@@ -444,13 +441,12 @@ export const makeGetOptionIdChange = () => createSelector([getOptions, getValueF
     return changedOptions;
   }, newOptions);
 });
-export const filterSelectedOptions = function () {
-  let {
-    selectedOptions = dummyArray,
-    propSelectedOptions = dummyArray,
-    disabledOptions = dummyArray,
-    limit
-  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+export const filterSelectedOptions = ({
+  selectedOptions = dummyArray,
+  propSelectedOptions = dummyArray,
+  disabledOptions = dummyArray,
+  limit
+} = {}) => {
   // eslint-disable-next-line no-param-reassign
   selectedOptions = selectedOptions || dummyArray; // eslint-disable-next-line no-param-reassign
 

package/es/utils/getInitial.js

@@ -1,6 +1,4 @@
-export function getInitial() {
-  let firstName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  let lastName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+export function getInitial(firstName = '', lastName = '') {
   let initial = '';
 
   if (firstName) {

package/es/v1/Button/css/cssJSLogic.js

@@ -5,15 +5,11 @@ import getPaletteClasses from "../../helpers/colorHelpers/colorHelper";
 import { DUMMY_OBJECT } from '@zohodesk/dotkit/es/utils/constants';
 import { DISABLED_APPEARANCE, LOADER_PLACEMENT, SHAPE, SIZE, STATUS } from "../constants";
 
-const capitalize = function () {
-  let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  return value.charAt(0).toUpperCase() + value.slice(1);
-};
+const capitalize = (value = '') => value.charAt(0).toUpperCase() + value.slice(1);
 
-export default function cssJSLogic(_ref) {
-  let {
-    props
-  } = _ref;
+export default function cssJSLogic({
+  props
+}) {
   const {
     palette,
     bgAppearance,

package/es/v1/Label/css/cssJSLogic.js

@@ -1,10 +1,9 @@
 import compileClassNames from '@zohodesk/utils/es/compileClassNames';
 import commonStyle from "../../../common/common.module.css";
-export default function cssJSLogic(_ref) {
-  let {
-    style,
-    props
-  } = _ref;
+export default function cssJSLogic({
+  style,
+  props
+}) {
   const {
     shouldHighlightRequired,
     isRequired,

package/es/v1/Switch/css/cssJSLogic.js

@@ -1,9 +1,8 @@
 import compileClassNames from '@zohodesk/utils/es/compileClassNames';
-export default function cssJSLogic(_ref) {
-  let {
-    props,
-    style
-  } = _ref;
+export default function cssJSLogic({
+  props,
+  style
+}) {
   const {
     size,
     isChecked,