@zohodesk/components 1.2.43 → 1.2.45

package/es/v1/Tab/props/propTypes.js

@@ -94,7 +94,11 @@ export const Tabs_propTypes = {
   placeHolderText: PropTypes.string,
   searchBoxSize: PropTypes.string,
   searchErrorText: PropTypes.string,
-  closePopupOnly: PropTypes.func
+  closePopupOnly: PropTypes.func,
+  isAbsolutePositioningNeeded: PropTypes.bool,
+  isRestrictScroll: PropTypes.bool,
+  positionsOffset: PropTypes.object,
+  targetOffset: PropTypes.object
 };
 export const TabWrapper_propTypes = {
   align: PropTypes.oneOf(['vertical', 'horizontal']),

package/es/v1/Tab/v1Tabs.module.css

@@ -137,7 +137,7 @@
 }
 
 .search {
-  padding: 0 var(--zd_size20) 0 ;
+  padding: var(--zd_size6) var(--zd_size20) 0 ;
 }
 
 .emptyStateContainer {
@@ -163,5 +163,5 @@
 }
 
 .listWrapper {
-  padding-top: var(--zd_size10) ;
+  padding: var(--zd_size10) 0 ;
 }

package/es/v1/Tag/Tag.js

@@ -1,12 +1,12 @@
 import React, { memo } from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
 import { Icon } from '@zohodesk/icons';
-import Avatar from '../Avatar/Avatar';
-import { Container } from '../Layout';
-import Button from '../semantic/Button/Button';
-import { useUniqueId } from '../../Provider/IdProvider';
-import style from '../../Tag/Tag.module.css';
+import Avatar from "../Avatar/Avatar";
+import { Container } from "../Layout";
+import Button from "../semantic/Button/Button";
+import { useUniqueId } from "../../Provider/IdProvider";
+import style from "../../Tag/Tag.module.css";
 /*
  * eslint css-modules/no-unused-class: [2, { markAsUsed: ['small', 'medium',
  * 'closedanger', 'closeprimary', 'default', 'danger', 'secondary',

package/es/v1/TextBox/TextBox.js

@@ -1,7 +1,7 @@
 import React, { memo, useRef, useCallback } from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import style from '../../TextBox/TextBox.module.css';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import style from "../../TextBox/TextBox.module.css";
 
 function TextBox(props) {
   let {

package/es/v1/TextBoxIcon/TextBoxIcon.js

@@ -1,11 +1,11 @@
 import React, { useState, useRef, useCallback } from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import TextBox from '../TextBox/TextBox';
-import { Container, Box } from '../Layout';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import TextBox from "../TextBox/TextBox";
+import { Container, Box } from "../Layout";
 import { Icon } from '@zohodesk/icons';
-import btnStyle from '../../semantic/Button/semanticButton.module.css';
-import style from '../../TextBoxIcon/TextBoxIcon.module.css';
+import btnStyle from "../../semantic/Button/semanticButton.module.css";
+import style from "../../TextBoxIcon/TextBoxIcon.module.css";
 /* eslint-disable react/forbid-component-props */
 
 export default function TextBoxIcon(props) {

package/es/v1/TextBoxIcon/props/propTypes.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { propTypes as TextBox_propTypes } from '../../TextBox/props/propTypes';
+import { propTypes as TextBox_propTypes } from "../../TextBox/props/propTypes";
 export const propTypes = { ...TextBox_propTypes,
   borderColor: PropTypes.oneOf(['transparent', 'default', 'error']),
   children: PropTypes.node,

package/es/v1/Textarea/Textarea.js

@@ -1,7 +1,7 @@
 import React, { useRef } from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import style from '../../Textarea/Textarea.module.css';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import style from "../../Textarea/Textarea.module.css";
 export default function Textarea(props) {
   let {
     size,

package/es/v1/Tooltip/Tooltip.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import { getLibraryConfig } from '../../Provider/Config';
-import ResizeObserver from '../../Responsive/ResizeObserver';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import { getLibraryConfig } from "../../Provider/Config";
+import ResizeObserver from "../../Responsive/ResizeObserver";
 import selectn from 'selectn';
-import { whiteSpaceClassMapping } from '../../utils/cssUtils';
-import style from '../../Tooltip/Tooltip.module.css';
+import { whiteSpaceClassMapping } from "../../utils/cssUtils";
+import style from "../../Tooltip/Tooltip.module.css";
 export default class Tooltip extends React.Component {
   constructor(props) {
     super(props);

package/es/v1/Typography/Typography.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import cssJSLogic from './css/cssJSLogic';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import cssJSLogic from "./css/cssJSLogic";
 import { mergeStyle } from '@zohodesk/utils';
-import defaultStyle from './css/Typography.module.css';
+import defaultStyle from "./css/Typography.module.css";
 
 const Typography = props => {
   const {

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

@@ -1,5 +1,5 @@
 import { compileClassNames } from '@zohodesk/utils';
-import { letterspacingMapping, lineheightMapping } from '../utils';
+import { letterspacingMapping, lineheightMapping } from "../utils";
 export default function cssJSLogic(_ref) {
   let {
     props,

package/es/v1/VelocityAnimation/VelocityAnimation/VelocityAnimation.js

@@ -1,9 +1,9 @@
 import React, { useContext } from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
 import { VelocityComponent } from 'velocity-react';
 import 'velocity-animate/velocity.ui';
-import LibraryContext from '../../../Provider/LibraryContextInit';
+import LibraryContext from "../../../Provider/LibraryContextInit";
 export default function VelocityAnimation(props) {
   let {
     children,

package/es/v1/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js

@@ -1,9 +1,9 @@
 import React, { useContext } from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
 import { VelocityTransitionGroup } from 'velocity-react';
 import 'velocity-animate/velocity.ui';
-import LibraryContext from '../../../Provider/LibraryContextInit';
+import LibraryContext from "../../../Provider/LibraryContextInit";
 
 function clearProps(props) {
   let newProps = Object.assign({}, props);

package/es/v1/semantic/Button/Button.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import style from '../../../semantic/Button/semanticButton.module.css';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import style from "../../../semantic/Button/semanticButton.module.css";
 export default function Button(props) {
   const {
     value,

package/es/v1/semantic/index.js

@@ -1 +1 @@
-export { default as SemanticButton } from './Button/Button';
+export { default as SemanticButton } from "./Button/Button";

package/lib/MultiSelect/MultiSelect.js

@@ -273,6 +273,18 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
 
 
       this.handleComponentDidUpdate(prevProps, prevState);
+
+      if (isPopupOpen && isNextOptions && prevProps.selectedOptions.length !== selectedOptions.length) {
+        var _ref2 = this.suggestionContainer || {},
+            scrollHeight = _ref2.scrollHeight,
+            clientHeight = _ref2.clientHeight;
+
+        var isElementScrollable = scrollHeight > clientHeight;
+
+        if (!isElementScrollable) {
+          this.handleScrollFuncCall();
+        }
+      }
     }
   }, {
     key: "componentWillUnmount",
@@ -514,9 +526,9 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
             });
           }
         } else {
-          var _ref2 = isRightArrow ? selectedOptions : selectedOptions.slice(-1),
-              _ref3 = _slicedToArray(_ref2, 1),
-              _newLastHighLightedSelectOption3 = _ref3[0];
+          var _ref3 = isRightArrow ? selectedOptions : selectedOptions.slice(-1),
+              _ref4 = _slicedToArray(_ref3, 1),
+              _newLastHighLightedSelectOption3 = _ref4[0];
 
           this.setState({
             lastHighLightedSelectOption: _newLastHighLightedSelectOption3,
@@ -726,8 +738,8 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         var to = id && selectedOptions.indexOf(id) >= 0 ? selectedOptions.indexOf(id) : null;
 
         if (to >= 0 && to < from) {
-          var _ref4 = [from, from = to];
-          to = _ref4[0];
+          var _ref5 = [from, from = to];
+          to = _ref5[0];
         }
 
         to += 1;
@@ -877,8 +889,8 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         });
       }
 
-      var _ref5 = e || {},
-          target = _ref5.target;
+      var _ref6 = e || {},
+          target = _ref6.target;
 
       target && target.setSelectionRange(target, 0);
       var onFocus = this.props.onFocus;

package/lib/Select/GroupSelect.js

@@ -669,6 +669,10 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
         emptyText: i18nKeys.emptyText || emptyMessage,
         searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
       });
+      var _i18nKeys = i18nKeys,
+          TextBoxIcon_i18n = _i18nKeys.TextBoxIcon_i18n,
+          _i18nKeys$TextBox_all = _i18nKeys.TextBox_ally_label,
+          TextBox_ally_label = _i18nKeys$TextBox_all === void 0 ? 'Click to select options' : _i18nKeys$TextBox_all;
       var _this$state3 = this.state,
           selectedId = _this$state3.selectedId,
           hoverIndex = _this$state3.hoverIndex,
@@ -727,6 +731,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           ariaActivedescendant: selectedId,
           ariaOwns: setAriaId
         },
+        i18nKeys: TextBoxIcon_i18n,
         isFocus: isPopupReady,
         autoComplete: false
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {

package/lib/Tab/Tabs.js

@@ -578,7 +578,11 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
           dataId = _this$props9.dataId,
           placeHolderText = _this$props9.placeHolderText,
           searchBoxSize = _this$props9.searchBoxSize,
-          removeClose = _this$props9.removeClose;
+          removeClose = _this$props9.removeClose,
+          isAbsolutePositioningNeeded = _this$props9.isAbsolutePositioningNeeded,
+          isRestrictScroll = _this$props9.isRestrictScroll,
+          positionsOffset = _this$props9.positionsOffset,
+          targetOffset = _this$props9.targetOffset;
       var searchValue = this.state.searchValue;
       var _customProps$DropBoxP = customProps.DropBoxProps,
           DropBoxProps = _customProps$DropBoxP === void 0 ? {} : _customProps$DropBoxP,
@@ -652,8 +656,12 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
           },
           boxPosition: position,
           getRef: getContainerRef,
-          isBoxPaddingNeed: true,
-          isArrow: false
+          isBoxPaddingNeed: false,
+          isArrow: false,
+          isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+          isRestrictScroll: isRestrictScroll,
+          positionsOffset: positionsOffset,
+          targetOffset: targetOffset
         }, DropBoxProps, {
           isResponsivePadding: true,
           needFocusScope: true,
@@ -673,7 +681,9 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
               'data-a11y-autofocus': true
             }
           },
-          dataId: "".concat(dataId, "_search")
+          dataId: "".concat(dataId, "_search"),
+          autoComplete: false,
+          name: "search"
         }, TextBoxIconProps))) : null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           flexible: true,
           shrink: true,

package/lib/Tab/Tabs.module.css

@@ -137,7 +137,7 @@
 }
 
 .search {
-  padding: 0 var(--zd_size20) 0 ;
+  padding: var(--zd_size6) var(--zd_size20) 0 ;
 }
 
 .emptyStateContainer {
@@ -163,5 +163,5 @@
 }
 
 .listWrapper {
-  padding-top: var(--zd_size10) ;
+  padding: var(--zd_size10) 0 ;
 }

package/lib/Tab/props/defaultProps.js

@@ -42,7 +42,10 @@ var Tabs_defaultProps = {
   dataSelectorId: 'tabs',
   searchBoxSize: 'small',
   searchErrorText: 'No results',
-  placeHolderText: 'Search'
+  placeHolderText: 'Search',
+  isAbsolutePositioningNeeded: true,
+  isRestrictScroll: false,
+  moreContainerClass: ''
 };
 exports.Tabs_defaultProps = Tabs_defaultProps;
 var TabWrapper_defaultProps = {

package/lib/Tab/props/propTypes.js

@@ -107,7 +107,11 @@ var Tabs_propTypes = {
   placeHolderText: _propTypes["default"].string,
   searchBoxSize: _propTypes["default"].string,
   searchErrorText: _propTypes["default"].string,
-  closePopupOnly: _propTypes["default"].func
+  closePopupOnly: _propTypes["default"].func,
+  isAbsolutePositioningNeeded: _propTypes["default"].bool,
+  isRestrictScroll: _propTypes["default"].bool,
+  positionsOffset: _propTypes["default"].object,
+  targetOffset: _propTypes["default"].object
 };
 exports.Tabs_propTypes = Tabs_propTypes;
 var TabWrapper_propTypes = {

package/lib/v1/DropDown/DropDownSearch.js

@@ -44,7 +44,7 @@ function DropDownSearch(props) {
   var inputRef = (0, _react.useRef)(null); // eslint-disable-next-line func-call-spacing
 
   (0, _react.useEffect)(function () {
-    inputRef.current && input.current.focus({
+    inputRef.current && inputRef.current.focus({
       preventScroll: true
     });
   }, []);

package/lib/v1/MultiSelect/AdvancedGroupMultiSelect.js

@@ -1087,6 +1087,10 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
           needResponsive: needResponsive,
           isPadding: isPadding,
           isBoxPaddingNeed: !needSelectAll,
+          isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+          positionsOffset: positionsOffset,
+          targetOffset: targetOffset,
+          isRestrictScroll: isRestrictScroll,
           htmlId: setAriaId,
           a11y: {
             role: 'listbox',

package/lib/v1/MultiSelect/MultiSelect.js

@@ -273,6 +273,18 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
 
 
       this.handleComponentDidUpdate(prevProps, prevState);
+
+      if (isPopupOpen && isNextOptions && prevProps.selectedOptions.length !== selectedOptions.length) {
+        var _ref2 = this.suggestionContainer || {},
+            scrollHeight = _ref2.scrollHeight,
+            clientHeight = _ref2.clientHeight;
+
+        var isElementScrollable = scrollHeight > clientHeight;
+
+        if (!isElementScrollable) {
+          this.handleScrollFuncCall();
+        }
+      }
     }
   }, {
     key: "componentWillUnmount",
@@ -514,9 +526,9 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
             });
           }
         } else {
-          var _ref2 = isRightArrow ? selectedOptions : selectedOptions.slice(-1),
-              _ref3 = _slicedToArray(_ref2, 1),
-              _newLastHighLightedSelectOption3 = _ref3[0];
+          var _ref3 = isRightArrow ? selectedOptions : selectedOptions.slice(-1),
+              _ref4 = _slicedToArray(_ref3, 1),
+              _newLastHighLightedSelectOption3 = _ref4[0];
 
           this.setState({
             lastHighLightedSelectOption: _newLastHighLightedSelectOption3,
@@ -727,8 +739,8 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         var to = id && selectedOptions.indexOf(id) >= 0 ? selectedOptions.indexOf(id) : null;
 
         if (to >= 0 && to < from) {
-          var _ref4 = [from, from = to];
-          to = _ref4[0];
+          var _ref5 = [from, from = to];
+          to = _ref5[0];
         }
 
         to += 1;
@@ -878,8 +890,8 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         });
       }
 
-      var _ref5 = e || {},
-          target = _ref5.target;
+      var _ref6 = e || {},
+          target = _ref6.target;
 
       target && target.setSelectionRange(target, 0);
       var onFocus = this.props.onFocus;

package/lib/v1/Select/GroupSelect.js

@@ -671,6 +671,10 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
         emptyText: i18nKeys.emptyText || emptyMessage,
         searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
       });
+      var _i18nKeys = i18nKeys,
+          TextBoxIcon_i18n = _i18nKeys.TextBoxIcon_i18n,
+          _i18nKeys$TextBox_all = _i18nKeys.TextBox_ally_label,
+          TextBox_ally_label = _i18nKeys$TextBox_all === void 0 ? 'Click to select options' : _i18nKeys$TextBox_all;
       var _this$state3 = this.state,
           selectedId = _this$state3.selectedId,
           hoverIndex = _this$state3.hoverIndex,
@@ -729,6 +733,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           ariaActivedescendant: selectedId,
           ariaOwns: setAriaId
         },
+        i18nKeys: TextBoxIcon_i18n,
         isFocus: isPopupReady,
         autoComplete: false
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {

package/lib/v1/Tab/Tabs.js

@@ -507,7 +507,11 @@ var Tabs = function Tabs(props) {
         position = props.position,
         customProps = props.customProps,
         getCustomDropBoxHeaderPlaceHolder = props.getCustomDropBoxHeaderPlaceHolder,
-        dataId = props.dataId;
+        dataId = props.dataId,
+        isAbsolutePositioningNeeded = props.isAbsolutePositioningNeeded,
+        isRestrictScroll = props.isRestrictScroll,
+        positionsOffset = props.positionsOffset,
+        targetOffset = props.targetOffset;
     var _customProps$DropBoxP = customProps.DropBoxProps,
         DropBoxProps = _customProps$DropBoxP === void 0 ? {} : _customProps$DropBoxP,
         _customProps$ListItem = customProps.ListItemProps,
@@ -580,8 +584,12 @@ var Tabs = function Tabs(props) {
         },
         boxPosition: position,
         getRef: getContainerRef,
-        isBoxPaddingNeed: true,
-        isArrow: false
+        isBoxPaddingNeed: false,
+        isArrow: false,
+        isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+        isRestrictScroll: isRestrictScroll,
+        positionsOffset: positionsOffset,
+        targetOffset: targetOffset
       }, DropBoxProps, {
         isResponsivePadding: true,
         needFocusScope: true,
@@ -601,7 +609,9 @@ var Tabs = function Tabs(props) {
             'data-a11y-autofocus': true
           }
         },
-        dataId: "".concat(dataId, "_search")
+        dataId: "".concat(dataId, "_search"),
+        autoComplete: false,
+        name: "search"
       }, TextBoxIconProps))) : null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
         shrink: true,

package/lib/v1/Tab/props/defaultProps.js

@@ -42,7 +42,10 @@ var Tabs_defaultProps = {
   dataSelectorId: 'tabs',
   searchBoxSize: 'small',
   searchErrorText: 'No results',
-  placeHolderText: 'Search'
+  placeHolderText: 'Search',
+  isAbsolutePositioningNeeded: true,
+  isRestrictScroll: false,
+  moreContainerClass: ''
 };
 exports.Tabs_defaultProps = Tabs_defaultProps;
 var TabWrapper_defaultProps = {

package/lib/v1/Tab/props/propTypes.js

@@ -107,7 +107,11 @@ var Tabs_propTypes = {
   placeHolderText: _propTypes["default"].string,
   searchBoxSize: _propTypes["default"].string,
   searchErrorText: _propTypes["default"].string,
-  closePopupOnly: _propTypes["default"].func
+  closePopupOnly: _propTypes["default"].func,
+  isAbsolutePositioningNeeded: _propTypes["default"].bool,
+  isRestrictScroll: _propTypes["default"].bool,
+  positionsOffset: _propTypes["default"].object,
+  targetOffset: _propTypes["default"].object
 };
 exports.Tabs_propTypes = Tabs_propTypes;
 var TabWrapper_propTypes = {

package/lib/v1/Tab/v1Tabs.module.css

@@ -137,7 +137,7 @@
 }
 
 .search {
-  padding: 0 var(--zd_size20) 0 ;
+  padding: var(--zd_size6) var(--zd_size20) 0 ;
 }
 
 .emptyStateContainer {
@@ -163,5 +163,5 @@
 }
 
 .listWrapper {
-  padding-top: var(--zd_size10) ;
+  padding: var(--zd_size10) 0 ;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.2.43",
+  "version": "1.2.45",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -68,10 +68,10 @@
     "@zohodesk-private/css-variable-migrator": "^1.0.7",
     "@zohodesk-private/node-plugins": "1.1.8",
     "@zohodesk-private/react-prop-validator": "1.2.3",
-    "@zohodesk/a11y": "2.2.5",
+    "@zohodesk/a11y": "2.2.6",
     "@zohodesk/docstool": "1.0.0-alpha-2",
     "@zohodesk/hooks": "2.0.5",
-    "@zohodesk/icons": "1.0.59",
+    "@zohodesk/icons": "1.0.60",
     "@zohodesk/svg": "1.1.19",
     "@zohodesk/utils": "1.3.14",
     "@zohodesk/variables": "1.0.0",
@@ -86,7 +86,7 @@
     "selectn": "1.1.2"
   },
   "peerDependencies": {
-    "@zohodesk/icons": "1.0.59",
+    "@zohodesk/icons": "1.0.60",
     "@zohodesk/variables": "1.0.0",
     "@zohodesk/svg": "1.1.19",
     "@zohodesk/virtualizer": "1.0.3",
@@ -94,6 +94,6 @@
     "react-sortable-hoc": "^0.8.3",
     "@zohodesk/hooks": "2.0.5",
     "@zohodesk/utils": "1.3.14",
-    "@zohodesk/a11y": "2.2.5"
+    "@zohodesk/a11y": "2.2.6"
   }
 }