@zohodesk/components 1.2.43 → 1.2.44

package/README.md

@@ -32,6 +32,17 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.2.44
+
+- **Tabs (v0&v1), AdvancedGroupMultiSelect (v1)**
+  - `isAbsolutePositioningNeeded` `isRestrictScroll` `positionsOffset` `targetOffset` props supported for fixed position.
+
+- **Tabs (v0&v1)**
+  - padding css fix
+
+- **DropDownSearch (v1)**
+  - Input not focus on mount issue fixed
+
 # 1.2.43
 
 - **AdvancedMultiSelect, MultiSelect, MultiSelectWithAvatar, GroupSelect, SelectWithIcon** - Fixed position support added.

package/es/Tab/Tabs.js

@@ -512,7 +512,11 @@ class Tabs extends React.Component {
       dataId,
       placeHolderText,
       searchBoxSize,
-      removeClose
+      removeClose,
+      isAbsolutePositioningNeeded,
+      isRestrictScroll,
+      positionsOffset,
+      targetOffset
     } = this.props;
     const {
       searchValue
@@ -590,8 +594,12 @@ class Tabs extends React.Component {
         },
         boxPosition: position,
         getRef: getContainerRef,
-        isBoxPaddingNeed: true,
+        isBoxPaddingNeed: false,
         isArrow: false,
+        isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+        isRestrictScroll: isRestrictScroll,
+        positionsOffset: positionsOffset,
+        targetOffset: targetOffset,
         ...DropBoxProps,
         isResponsivePadding: true,
         needFocusScope: true,
@@ -612,6 +620,8 @@ class Tabs extends React.Component {
           }
         },
         dataId: `${dataId}_search`,
+        autoComplete: false,
+        name: "search",
         ...TextBoxIconProps
       })) : null, /*#__PURE__*/React.createElement(Box, {
         flexible: true,

package/es/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/es/Tab/props/defaultProps.js

@@ -33,7 +33,10 @@ export const Tabs_defaultProps = {
   dataSelectorId: 'tabs',
   searchBoxSize: 'small',
   searchErrorText: 'No results',
-  placeHolderText: 'Search'
+  placeHolderText: 'Search',
+  isAbsolutePositioningNeeded: true,
+  isRestrictScroll: false,
+  moreContainerClass: ''
 };
 export const TabWrapper_defaultProps = {
   hookToDisableInternalState: false,

package/es/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/DropDown/DropDownSearch.js

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

package/es/v1/MultiSelect/AdvancedGroupMultiSelect.js

@@ -1001,6 +1001,10 @@ class AdvancedGroupMultiSelect extends React.Component {
         needResponsive: needResponsive,
         isPadding: isPadding,
         isBoxPaddingNeed: !needSelectAll,
+        isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+        positionsOffset: positionsOffset,
+        targetOffset: targetOffset,
+        isRestrictScroll: isRestrictScroll,
         htmlId: setAriaId,
         a11y: {
           role: 'listbox',

package/es/v1/Tab/Tabs.js

@@ -435,7 +435,11 @@ const Tabs = props => {
       position,
       customProps,
       getCustomDropBoxHeaderPlaceHolder,
-      dataId
+      dataId,
+      isAbsolutePositioningNeeded,
+      isRestrictScroll,
+      positionsOffset,
+      targetOffset
     } = props;
     let {
       DropBoxProps = {},
@@ -510,8 +514,12 @@ const Tabs = props => {
         },
         boxPosition: position,
         getRef: getContainerRef,
-        isBoxPaddingNeed: true,
+        isBoxPaddingNeed: false,
         isArrow: false,
+        isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+        isRestrictScroll: isRestrictScroll,
+        positionsOffset: positionsOffset,
+        targetOffset: targetOffset,
         ...DropBoxProps,
         isResponsivePadding: true,
         needFocusScope: true,
@@ -532,6 +540,8 @@ const Tabs = props => {
           }
         },
         dataId: `${dataId}_search`,
+        autoComplete: false,
+        name: "search",
         ...TextBoxIconProps
       })) : null, /*#__PURE__*/React.createElement(Box, {
         flexible: true,

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

@@ -33,7 +33,10 @@ export const Tabs_defaultProps = {
   dataSelectorId: 'tabs',
   searchBoxSize: 'small',
   searchErrorText: 'No results',
-  placeHolderText: 'Search'
+  placeHolderText: 'Search',
+  isAbsolutePositioningNeeded: true,
+  isRestrictScroll: false,
+  moreContainerClass: ''
 };
 export const TabWrapper_defaultProps = {
   hookToDisableInternalState: false,

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/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/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.44",
   "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"
   }
 }