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

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

@@ -1,187 +1,5 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-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>
-      <div
-        class="shrinkOn"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <span>
-          3
-        </span>
-      </div>
-    </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"
-    >
-      <div
-        class="shrinkOn"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <span>
-          ◀
-        </span>
-      </div>
-      <div
-        class="tabText grow basisAuto shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        Home
-      </div>
-      <div
-        class="shrinkOn"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <span>
-          ▶
-        </span>
-      </div>
-    </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"
-    >
-      <div
-        class="shrinkOn"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <span>
-          ◀
-        </span>
-      </div>
-      <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"
-    >
-      <div
-        class="shrinkOn"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <span>
-          ◀
-        </span>
-      </div>
-      <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
@@ -202,108 +20,3 @@ exports[`Tab rendering the defult props 1`] = `
   </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/lib/Tab/__tests__/__snapshots__/Tabs.spec.js.snap

@@ -31,35 +31,3 @@ exports[`Tabs rendering the defult props 1`] = `
   </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"
-        />
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;

package/lib/Tab/props/defaultProps.js

@@ -9,11 +9,7 @@ var Tab_defaultProps = {
   contentAlign: 'both',
   contentAlignBox: 'row',
   customProps: {},
-  customClass: {},
-  dataSelectorId: 'tab',
-  variant: 'text',
-  needHover: true,
-  hoverOnActive: false
+  dataSelectorId: 'tab'
 };
 exports.Tab_defaultProps = Tab_defaultProps;
 var TabContent_defaultProps = {
@@ -28,7 +24,6 @@ var TabContentWrapper_defaultProps = {
 };
 exports.TabContentWrapper_defaultProps = TabContentWrapper_defaultProps;
 var Tabs_defaultProps = {
-  alignBorderPosition: false,
   isAnimate: false,
   isResponsive: true,
   needTabBorder: false,
@@ -50,14 +45,12 @@ var Tabs_defaultProps = {
   searchBoxSize: 'small',
   searchErrorText: 'No results',
   placeHolderText: 'Search',
-  isAbsolutePositioningNeeded: false,
+  isAbsolutePositioningNeeded: true,
   isRestrictScroll: false,
-  moreContainerClass: '',
-  renderMoreTarget: null
+  moreContainerClass: ''
 };
 exports.Tabs_defaultProps = Tabs_defaultProps;
 var TabWrapper_defaultProps = {
-  alignBorderPosition: false,
   hookToDisableInternalState: false,
   isAnimate: false,
   needBorder: true,

package/lib/Tab/props/propTypes.js

@@ -7,17 +7,11 @@ exports.Tabs_propTypes = exports.Tab_propTypes = exports.TabWrapper_propTypes =
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _tabConfigs = require("../utils/tabConfigs");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var renderSlotType = _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]);
-
 var Tab_propTypes = {
   activeClass: _propTypes["default"].string,
   align: _propTypes["default"].oneOf(['vertical', 'horizontal']),
-  borderPosition: _propTypes["default"].oneOf(['left', 'right', 'top', 'bottom']),
-  hoverOnActive: _propTypes["default"].bool,
   children: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].string]),
   className: _propTypes["default"].string,
   dataId: _propTypes["default"].string,
@@ -30,7 +24,6 @@ var Tab_propTypes = {
   isLink: _propTypes["default"].bool,
   needAppearance: _propTypes["default"].bool,
   needBorder: _propTypes["default"].bool,
-  needHover: _propTypes["default"].bool,
   onClick: _propTypes["default"].func,
   onSelect: _propTypes["default"].func,
   style: _propTypes["default"].object,
@@ -42,20 +35,8 @@ var Tab_propTypes = {
   contentAlign: _propTypes["default"].oneOf(['both', 'left', 'right', 'vertical', 'horizontal', 'top', 'bottom', 'between', 'around', 'baseline']),
   contentAlignBox: _propTypes["default"].oneOf(['row', 'column', 'row-reverse', 'column-reverse']),
   customProps: _propTypes["default"].object,
-  customClass: _propTypes["default"].shape({
-    customTextContainer: _propTypes["default"].string,
-    customText: _propTypes["default"].string,
-    customHover: _propTypes["default"].string,
-    customIconContainer: _propTypes["default"].string,
-    customIcon: _propTypes["default"].string
-  }),
   isVirtual: _propTypes["default"].bool,
-  dataSelectorId: _propTypes["default"].string,
-  variant: _propTypes["default"].oneOf(Object.values(_tabConfigs.VARIANT)),
-  iconName: _propTypes["default"].string,
-  iconSize: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
-  renderBefore: renderSlotType,
-  renderAfter: renderSlotType
+  dataSelectorId: _propTypes["default"].string
 };
 exports.Tab_propTypes = Tab_propTypes;
 var TabContent_propTypes = {
@@ -80,8 +61,6 @@ var TabContentWrapper_propTypes = {
 exports.TabContentWrapper_propTypes = TabContentWrapper_propTypes;
 var Tabs_propTypes = {
   align: _propTypes["default"].oneOf(['vertical', 'horizontal']),
-  alignBorderPosition: _propTypes["default"].bool,
-  borderPosition: _propTypes["default"].oneOf(['left', 'right', 'top', 'bottom']),
   boxPosition: _propTypes["default"].string,
   childType: _propTypes["default"].elementType,
   children: _propTypes["default"].array,
@@ -116,7 +95,7 @@ var Tabs_propTypes = {
   showTitleInMoreOptions: _propTypes["default"].bool,
   style: _propTypes["default"].object,
   togglePopup: _propTypes["default"].func,
-  type: _propTypes["default"].oneOf(['alpha', 'beta', 'delta', 'default']),
+  type: _propTypes["default"].oneOf(['alpha', 'beta', 'delta']),
   getTargetRef: _propTypes["default"].func,
   containerClass: _propTypes["default"].string,
   customProps: _propTypes["default"].shape({
@@ -134,14 +113,11 @@ var Tabs_propTypes = {
   isAbsolutePositioningNeeded: _propTypes["default"].bool,
   isRestrictScroll: _propTypes["default"].bool,
   positionsOffset: _propTypes["default"].object,
-  targetOffset: _propTypes["default"].object,
-  renderMoreTarget: renderSlotType
+  targetOffset: _propTypes["default"].object
 };
 exports.Tabs_propTypes = Tabs_propTypes;
 var TabWrapper_propTypes = {
   align: _propTypes["default"].oneOf(['vertical', 'horizontal', 'vertical-reverse', 'horizontal-reverse']),
-  alignBorderPosition: _propTypes["default"].bool,
-  borderPosition: _propTypes["default"].oneOf(['left', 'right', 'top', 'bottom']),
   children: _propTypes["default"].node,
   dataId: _propTypes["default"].string,
   defaultTab: _propTypes["default"].string,
@@ -152,7 +128,7 @@ var TabWrapper_propTypes = {
   needPadding: _propTypes["default"].bool,
   needTabBorder: _propTypes["default"].bool,
   onSelect: _propTypes["default"].func,
-  type: _propTypes["default"].oneOf(['alpha', 'beta', 'delta', 'default']),
+  type: _propTypes["default"].oneOf(['alpha', 'beta', 'delta']),
   dataSelectorId: _propTypes["default"].string
 };
 exports.TabWrapper_propTypes = TabWrapper_propTypes;

package/lib/Tab/utils/tabConfigs.js

@@ -3,13 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.VARIANT = exports.TAB_POPUP_POSITION_MAPPING = exports.TAB_DIRECTION_MAPPING = exports.TAB_ALIGN_MAPPING = exports.BORDER_POSITION_BY_ALIGN = void 0;
-var VARIANT = {
-  TEXT: 'text',
-  ICON: 'icon',
-  ICON_WITH_TEXT: 'iconWithText'
-};
-exports.VARIANT = VARIANT;
+exports.TAB_POPUP_POSITION_MAPPING = exports.TAB_DIRECTION_MAPPING = exports.TAB_ALIGN_MAPPING = void 0;
 var TAB_ALIGN_MAPPING = {
   vertical: 'column',
   horizontal: 'row',
@@ -30,11 +24,4 @@ var TAB_POPUP_POSITION_MAPPING = {
   'vertical-reverse': 'topLeft',
   'horizontal-reverse': 'leftTop'
 };
-exports.TAB_POPUP_POSITION_MAPPING = TAB_POPUP_POSITION_MAPPING;
-var BORDER_POSITION_BY_ALIGN = {
-  vertical: 'bottom',
-  'vertical-reverse': 'top',
-  horizontal: 'right',
-  'horizontal-reverse': 'left'
-};
-exports.BORDER_POSITION_BY_ALIGN = BORDER_POSITION_BY_ALIGN;
+exports.TAB_POPUP_POSITION_MAPPING = TAB_POPUP_POSITION_MAPPING;