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

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

@@ -1,27 +1,59 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Tabs rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="shrinkOff"
+    class="noShrink"
     data-id="boxComponent"
     data-selector-id="tabs"
     data-test-id="boxComponent"
   >
     <div
-      class="tab flex cover coldir"
+      class="flex fullSize column tab"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
     >
       <div
-        class="grow basis shrinkOff"
+        class="flexible basis_zero noShrink"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       >
         <div
-          class="flex cover coldir"
+          class="flex fullSize column"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        />
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tabs renders custom more-button icon via renderMoreTarget 1`] = `
+<DocumentFragment>
+  <div
+    class="noShrink"
+    data-id="boxComponent"
+    data-selector-id="tabs"
+    data-test-id="boxComponent"
+  >
+    <div
+      class="flex fullSize column tab"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="flexible basis_zero noShrink"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="flex fullSize column"
           data-id="containerComponent"
           data-selector-id="container"
           data-test-id="containerComponent"

package/es/Tab/props/defaultProps.js

@@ -3,7 +3,11 @@ export const Tab_defaultProps = {
   contentAlign: 'both',
   contentAlignBox: 'row',
   customProps: {},
-  dataSelectorId: 'tab'
+  customClass: {},
+  dataSelectorId: 'tab',
+  variant: 'text',
+  needHover: true,
+  hoverOnActive: false
 };
 export const TabContent_defaultProps = {
   dataId: 'tabContent',
@@ -15,6 +19,7 @@ export const TabContentWrapper_defaultProps = {
   a11y: {}
 };
 export const Tabs_defaultProps = {
+  alignBorderPosition: false,
   isAnimate: false,
   isResponsive: true,
   needTabBorder: false,
@@ -36,11 +41,13 @@ export const Tabs_defaultProps = {
   searchBoxSize: 'small',
   searchErrorText: 'No results',
   placeHolderText: 'Search',
-  isAbsolutePositioningNeeded: true,
+  isAbsolutePositioningNeeded: false,
   isRestrictScroll: false,
-  moreContainerClass: ''
+  moreContainerClass: '',
+  renderMoreTarget: null
 };
 export const TabWrapper_defaultProps = {
+  alignBorderPosition: false,
   hookToDisableInternalState: false,
   isAnimate: false,
   needBorder: true,

package/es/Tab/props/propTypes.js

@@ -1,7 +1,11 @@
 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']),
+  borderPosition: PropTypes.oneOf(['left', 'right', 'top', 'bottom']),
+  hoverOnActive: PropTypes.bool,
   children: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
   className: PropTypes.string,
   dataId: PropTypes.string,
@@ -14,6 +18,7 @@ export const Tab_propTypes = {
   isLink: PropTypes.bool,
   needAppearance: PropTypes.bool,
   needBorder: PropTypes.bool,
+  needHover: PropTypes.bool,
   onClick: PropTypes.func,
   onSelect: PropTypes.func,
   style: PropTypes.object,
@@ -25,8 +30,20 @@ export const Tab_propTypes = {
   contentAlign: PropTypes.oneOf(['both', 'left', 'right', 'vertical', 'horizontal', 'top', 'bottom', 'between', 'around', 'baseline']),
   contentAlignBox: PropTypes.oneOf(['row', 'column', 'row-reverse', 'column-reverse']),
   customProps: PropTypes.object,
+  customClass: PropTypes.shape({
+    customTextContainer: PropTypes.string,
+    customText: PropTypes.string,
+    customHover: PropTypes.string,
+    customIconContainer: PropTypes.string,
+    customIcon: PropTypes.string
+  }),
   isVirtual: PropTypes.bool,
-  dataSelectorId: PropTypes.string
+  dataSelectorId: PropTypes.string,
+  variant: PropTypes.oneOf(Object.values(VARIANT)),
+  iconName: PropTypes.string,
+  iconSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  renderBefore: renderSlotType,
+  renderAfter: renderSlotType
 };
 export const TabContent_propTypes = {
   children: PropTypes.node,
@@ -48,6 +65,8 @@ export const TabContentWrapper_propTypes = {
 };
 export const Tabs_propTypes = {
   align: PropTypes.oneOf(['vertical', 'horizontal']),
+  alignBorderPosition: PropTypes.bool,
+  borderPosition: PropTypes.oneOf(['left', 'right', 'top', 'bottom']),
   boxPosition: PropTypes.string,
   childType: PropTypes.elementType,
   children: PropTypes.array,
@@ -82,7 +101,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({
@@ -100,10 +119,13 @@ export const Tabs_propTypes = {
   isAbsolutePositioningNeeded: PropTypes.bool,
   isRestrictScroll: PropTypes.bool,
   positionsOffset: PropTypes.object,
-  targetOffset: PropTypes.object
+  targetOffset: PropTypes.object,
+  renderMoreTarget: renderSlotType
 };
 export const TabWrapper_propTypes = {
   align: PropTypes.oneOf(['vertical', 'horizontal', 'vertical-reverse', 'horizontal-reverse']),
+  alignBorderPosition: PropTypes.bool,
+  borderPosition: PropTypes.oneOf(['left', 'right', 'top', 'bottom']),
   children: PropTypes.node,
   dataId: PropTypes.string,
   defaultTab: PropTypes.string,
@@ -114,6 +136,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',
@@ -15,4 +20,10 @@ export const TAB_POPUP_POSITION_MAPPING = {
   horizontal: 'rightTop',
   'vertical-reverse': 'topLeft',
   'horizontal-reverse': 'leftTop'
+};
+export const BORDER_POSITION_BY_ALIGN = {
+  vertical: 'bottom',
+  'vertical-reverse': 'top',
+  horizontal: 'right',
+  'horizontal-reverse': 'left'
 };

package/es/Tag/Tag.js

@@ -9,6 +9,7 @@ import Avatar from "../Avatar/Avatar";
 import { Container } from "../Layout";
 import Button from "../semantic/Button/Button";
 import { getUniqueId } from "../Provider/IdProvider";
+import { cn } from "@dot-system/css-utility";
 import style from "./Tag.module.css";
 /*
  * eslint css-modules/no-unused-class: [2, { markAsUsed: ['small', 'medium',
@@ -108,7 +109,7 @@ export default class Tag extends PureComponent {
     } = a11y;
     let isDarkPalette = palette === 'dark';
     return /*#__PURE__*/React.createElement("div", _extends({
-      className: `${style.container} ${needEffect && !isReadOnly ? style.effect : style.readonly} ${active ? `${style.selected} ${style[`active${palette}`]}` : ''} ${onRemove ? active ? `${style[`active${size}Effect`]}` : '' : ''}  ${style[size]} ${rounded ? style.lgRadius : style.smRadius} ${style[palette]} ${disabled ? style.disabled : ''} ${onSelectTag ? style.pointer : ''} ${customTag}`,
+      className: cn(`${style.container} ${needEffect && !isReadOnly ? style.effect : style.readonly} ${active ? `${style.selected} ${style[`active${palette}`]}` : ''} ${onRemove ? active ? `${style[`active${size}Effect`]}` : '' : ''}  ${style[size]} ${rounded ? style.lgRadius : style.smRadius} ${style[palette]} ${disabled ? style.disabled : ''} ${onSelectTag ? style.pointer : ''} ${customTag}`),
       "data-id": active ? `${dataId}_TagSelected` : `${dataId}_Tag`,
       "data-test-id": active ? `${dataId}_TagSelected` : `${dataId}_Tag`,
       onClick: this.handleSelect,
@@ -118,7 +119,7 @@ export default class Tag extends PureComponent {
       "aria-labelledby": getAriaId,
       "data-selector-id": dataSelectorId
     }, customAttributes), renderNode(renderLeftChildren), hasAvatar ? /*#__PURE__*/React.createElement("div", {
-      className: style.avatar
+      className: cn(style.avatar)
     }, /*#__PURE__*/React.createElement(Avatar, _extends({
       palette: isDarkPalette ? 'info' : avatarPalette,
       name: initial,
@@ -127,19 +128,18 @@ export default class Tag extends PureComponent {
       textPalette: isDarkPalette ? 'white' : '',
       customClass: customAvatar
     }, avatarProps))) : null, iconName ? /*#__PURE__*/React.createElement("div", {
-      className: `${style.icon} ${customTagIcon}`,
+      className: cn(`${style.icon} ${customTagIcon}`),
       "aria-hidden": true
     }, /*#__PURE__*/React.createElement(Icon, _extends({
       name: iconName,
       size: iconSize
     }, iconProps))) : null, /*#__PURE__*/React.createElement("div", {
-      className: `${style.text} ${textSizes}`,
+      className: cn(`${style.text} ${textSizes}`),
       "aria-hidden": true,
       id: getAriaId
     }, text), onRemove && /*#__PURE__*/React.createElement(Button, {
       customClass: `${style.close} ${active ? style[`active${closePalette}Close`] : ''}
-            ${rounded ? style.lgRadiusClose : style.smRadiusClose} ${isDarkPalette ? style.darkTagClose : ''}
-            ${customTagClose} ${style[`close${closePalette}`]}`,
+            ${rounded ? style.lgRadiusClose : style.smRadiusClose} ${isDarkPalette ? style.darkTagClose : ''} ${style[`close${closePalette}`]} ${customTagClose}`,
       dataId: `${dataId}_RemoveTag`,
       title: closeTitle,
       onClick: this.handleRemove,