@zohodesk/components 1.4.16 → 1.4.17

package/README.md

@@ -2,7 +2,13 @@
 
 Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development across projects.
 
-# 1.4.15 , 1.4.16
+# 1.4.17
+
+- **Select, MultiSelect** - Fixed scroll jitter for the highlighted option when the virtualizer is enabled.
+- **Select** - `isAnimate` prop supported
+- `Switch_v1 css` - RTL issue on thumb position fixed.
+
+# 1.4.14, 1.4.15 , 1.4.16
 
 - `Common Css`
   - added ltr class renamed to ltr-zone.
@@ -17,7 +23,7 @@ Dot UI is a customizable React component library built to deliver a clean, acces
 # 1.4.12
 
 - `TextBox`
-  - The event is passed as the 4th argument to both handleBlur and handleFocus  
+  - The event is passed as the 4th argument to both onBlur and onFocus  
 - `Common Css`
   - added ltr class for change direction to ltr in rtl mode.
 

package/es/MultiSelect/MultiSelect.js

@@ -82,6 +82,7 @@ export class MultiSelectComponent extends React.Component {
     this.handleScroll = this.handleScroll.bind(this);
     this.handleScrollFuncCall = debounce(this.handleScrollFuncCall.bind(this), 500);
     this.getVirtualizerPublicMethods = this.getVirtualizerPublicMethods.bind(this);
+    this.scrollToHighlightedIndex = this.scrollToHighlightedIndex.bind(this);
     this.setSuggestionsVirtualizerContainerRefFunction = this.setSuggestionsVirtualizerContainerRefFunction.bind(this);
   }
 
@@ -141,11 +142,49 @@ export class MultiSelectComponent extends React.Component {
     }
   }
 
-  componentDidUpdate(prevProps, prevState) {
+  scrollToHighlightedIndex() {
+    const {
+      suggestionContainer,
+      selectedOptionContainer,
+      suggestionsOrder
+    } = this;
+
+    if (!suggestionContainer) {
+      return;
+    }
+
     const {
       hoverOption,
       highLightedSelectOptions,
-      selectedOptions,
+      selectedOptions
+    } = this.state;
+    const {
+      isVirtualizerEnabled
+    } = this.props;
+    const hoverId = suggestionsOrder[hoverOption] || '';
+    const lastHighLightedSelectOption = highLightedSelectOptions.slice(-1).length ? highLightedSelectOptions.slice(-1)[0] : null;
+    const selectedOption = this[`selectedOption_${lastHighLightedSelectOption}`];
+    selectedOptions.length && selectedOption && scrollTo(selectedOptionContainer, selectedOption);
+    const selectedSuggestion = this[`suggestion_${hoverId}`];
+
+    if (selectedSuggestion) {
+      scrollTo(suggestionContainer, selectedSuggestion);
+    } else {
+      // Hack: Virtualizer not having options order properly all the time, so scrollToIndex method used here.
+      if (isVirtualizerEnabled && !!this.virtualizerMethods) {
+        this.virtualizerMethods.scrollToIndex(hoverOption, 'auto', {
+          speed: 0,
+          duration: 0,
+          onComplete: () => {
+            scrollTo(suggestionContainer, selectedSuggestion);
+          }
+        });
+      }
+    }
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    const {
       searchStr
     } = this.state;
     const {
@@ -153,8 +192,7 @@ export class MultiSelectComponent extends React.Component {
       isPopupOpen,
       onDropBoxClose,
       onDropBoxOpen,
-      isSearchClearOnClose,
-      isVirtualizerEnabled
+      isSearchClearOnClose
     } = this.props; //handle dropbox open & close
 
     if (prevProps.isPopupOpen !== isPopupOpen) {
@@ -167,24 +205,10 @@ export class MultiSelectComponent extends React.Component {
         isSearchClearOnClose && searchStr && this.handleSearch('');
         onDropBoxClose && onDropBoxClose();
       }
-    } //scrollTo handling
-
+    }
 
-    if (isVirtualizerEnabled && !!this.virtualizerMethods) {
-      let position = prevState.hoverOption > hoverOption ? 'top' : 'bottom';
-      this.virtualizerMethods.getElementVisiblePercentage(hoverOption) < 50 && this.virtualizerMethods.scrollToIndex(hoverOption, position);
-    } else {
-      const {
-        suggestionContainer,
-        selectedOptionContainer,
-        suggestionsOrder
-      } = this;
-      const hoverId = suggestionsOrder[hoverOption] || '';
-      const selectedSuggestion = this[`suggestion_${hoverId}`];
-      const lastHighLightedSelectOption = highLightedSelectOptions.slice(-1).length ? highLightedSelectOptions.slice(-1)[0] : null;
-      const selectedOption = this[`selectedOption_${lastHighLightedSelectOption}`];
-      isPopupOpen && scrollTo(suggestionContainer, selectedSuggestion);
-      selectedOptions.length && selectedOption && scrollTo(selectedOptionContainer, selectedOption);
+    if (isPopupOpen) {
+      this.scrollToHighlightedIndex();
     } //When suggestions length less than 5, getNextOptions function call
 
 
@@ -1097,7 +1121,8 @@ export class MultiSelectComponent extends React.Component {
       boxPosition: position || `${defaultDropBoxPosition}`,
       getRef: getContainerRef,
       isActive: isPopupReady,
-      isAnimate: isAnimate,
+      isAnimate: isAnimate && !isVirtualizerEnabled // Note: Virtualizer gets element height at mount itself which causes issue with options height
+      ,
       isArrow: false,
       onClick: removeClose,
       needResponsive: needResponsive,

package/es/Select/Select.js

@@ -107,6 +107,7 @@ export class SelectComponent extends Component {
     this.handleExposePopupHandlers = this.handleExposePopupHandlers.bind(this);
     this.handleGetAddNewOptionText = this.handleGetAddNewOptionText.bind(this);
     this.getVirtualizerPublicMethods = this.getVirtualizerPublicMethods.bind(this);
+    this.scrollToHighlightedIndex = this.scrollToHighlightedIndex.bind(this);
     this.setSuggestionsVirtualizerContainerRefFunction = this.setSuggestionsVirtualizerContainerRefFunction.bind(this);
     this.valueInputTypeString = '';
     this.valueInputSearchString = '';
@@ -175,9 +176,43 @@ export class SelectComponent extends Component {
     });
   }
 
-  componentDidUpdate(prevProps, prevState) {
+  scrollToHighlightedIndex() {
+    let {
+      suggestionContainer,
+      optionsOrder
+    } = this;
+
+    if (!suggestionContainer) {
+      return;
+    }
+
+    let {
+      hoverIndex
+    } = this.state;
+    let {
+      isVirtualizerEnabled
+    } = this.props;
+    let hoverId = getIsEmptyValue(optionsOrder[hoverIndex]) ? '' : optionsOrder[hoverIndex];
+    let selSuggestion = this[`suggestion_${hoverId}`];
+
+    if (selSuggestion) {
+      scrollTo(suggestionContainer, selSuggestion);
+    } else {
+      // Hack: Virtualizer not having options order properly all the time, so scrollToIndex method used here.
+      if (isVirtualizerEnabled && !!this.virtualizerMethods) {
+        this.virtualizerMethods.scrollToIndex(hoverIndex, 'auto', {
+          speed: 0,
+          duration: 0,
+          onComplete: () => {
+            scrollTo(suggestionContainer, selSuggestion);
+          }
+        });
+      }
+    }
+  }
+
+  componentDidUpdate(prevProps) {
     let {
-      hoverIndex,
       searchStr,
       selectedValueIndex
     } = this.state;
@@ -188,31 +223,16 @@ export class SelectComponent extends Component {
       needSearch,
       onSearch,
       isPopupOpen,
-      isSearchClearOnClose,
-      isVirtualizerEnabled
+      isSearchClearOnClose
     } = this.props;
 
-    if (isVirtualizerEnabled && !!this.virtualizerMethods) {
-      let position = prevState.hoverIndex > hoverIndex ? 'top' : 'bottom';
-      this.virtualizerMethods.getElementVisiblePercentage(hoverIndex) < 50 && this.virtualizerMethods.scrollToIndex(hoverIndex, position);
-    } else {
-      let {
-        suggestionContainer,
-        optionsOrder
-      } = this;
-      let hoverId = getIsEmptyValue(optionsOrder[hoverIndex]) ? '' : optionsOrder[hoverIndex];
-      let selSuggestion = this[`suggestion_${hoverId}`];
-      isPopupOpen && scrollTo(suggestionContainer, selSuggestion);
+    if (isPopupOpen) {
+      this.scrollToHighlightedIndex();
     }
 
     if (prevProps.isPopupOpen !== isPopupOpen) {
       if (isPopupOpen) {
         onDropBoxOpen && this.handleFetchOptions(onDropBoxOpen, searchStr);
-
-        if (isVirtualizerEnabled && !!this.virtualizerMethods) {
-          this.virtualizerMethods.getElementVisiblePercentage(hoverIndex) < 50 && this.virtualizerMethods.scrollToIndex(hoverIndex);
-        }
-
         setTimeout(() => {
           this.searchInput && this.searchInput.focus({
             preventScroll: true
@@ -713,6 +733,7 @@ export class SelectComponent extends Component {
       getTargetRef,
       getContainerRef,
       removeClose,
+      isAnimate,
       isPopupOpen,
       isPopupReady,
       animationStyle,
@@ -907,7 +928,8 @@ export class SelectComponent extends Component {
         boxPosition: position || `${defaultDropBoxPosition}`,
         getRef: getContainerRef,
         isActive: isPopupReady,
-        isAnimate: true,
+        isAnimate: isAnimate && !isVirtualizerEnabled // Note: Virtualizer gets element height at mount itself which causes issue with options height
+        ,
         isArrow: false,
         onClick: removeClose,
         needResponsive: needResponsive,

package/es/Select/props/defaultProps.js

@@ -28,6 +28,7 @@ export const Select_defaultProps = {
   boxSize: 'default',
   needListBorder: false,
   needCloseOnSelect: true,
+  isAnimate: true,
   isParentBased: true,
   isSearchClearOnClose: true,
   i18nKeys: {},

package/es/Select/props/propTypes.js

@@ -28,6 +28,7 @@ export const Select_propTypes = {
     noMoreText: PropTypes.string,
     searchEmptyText: PropTypes.string
   }),
+  isAnimate: PropTypes.bool,
   isDefaultSelectValue: PropTypes.bool,
   isDisabled: PropTypes.bool,
   isNextOptions: PropTypes.bool,

package/es/v1/Switch/css/Switch_v1.module.css

@@ -126,7 +126,13 @@
 }
 .checked {
     --local-switch-track-background-color: var(--zdt_v1_switch_track_on_bg);
-    --local-switch-thumb-translateX: calc(var(--local-switch-track-width) - var(--local-switch-thumb-size) - 2px)
+}
+[dir=ltr] .checked {
+    --local-switch-thumb-translateX: calc(var(--local-switch-track-width) - var(--local-switch-thumb-size) - 2px) 
+    /*rtl: calc(-1 * (var(--local-switch-track-width) - var(--local-switch-thumb-size) - 2px))*/;
+}
+[dir=rtl] .checked {
+    --local-switch-thumb-translateX: calc(-1 * (var(--local-switch-track-width) - var(--local-switch-thumb-size) - 2px));
 }
 .unChecked {
     --local-switch-track-background-color: var(--zdt_v1_switch_track_off_bg);

package/lib/MultiSelect/MultiSelect.js

@@ -163,6 +163,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
     _this.handleScroll = _this.handleScroll.bind(_assertThisInitialized(_this));
     _this.handleScrollFuncCall = (0, _Common.debounce)(_this.handleScrollFuncCall.bind(_assertThisInitialized(_this)), 500);
     _this.getVirtualizerPublicMethods = _this.getVirtualizerPublicMethods.bind(_assertThisInitialized(_this));
+    _this.scrollToHighlightedIndex = _this.scrollToHighlightedIndex.bind(_assertThisInitialized(_this));
     _this.setSuggestionsVirtualizerContainerRefFunction = _this.setSuggestionsVirtualizerContainerRefFunction.bind(_assertThisInitialized(_this));
     return _this;
   }
@@ -227,20 +228,52 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
       }
     }
   }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, prevState) {
+    key: "scrollToHighlightedIndex",
+    value: function scrollToHighlightedIndex() {
+      var suggestionContainer = this.suggestionContainer,
+          selectedOptionContainer = this.selectedOptionContainer,
+          suggestionsOrder = this.suggestionsOrder;
+
+      if (!suggestionContainer) {
+        return;
+      }
+
       var _this$state = this.state,
           hoverOption = _this$state.hoverOption,
           highLightedSelectOptions = _this$state.highLightedSelectOptions,
-          selectedOptions = _this$state.selectedOptions,
-          searchStr = _this$state.searchStr;
+          selectedOptions = _this$state.selectedOptions;
+      var isVirtualizerEnabled = this.props.isVirtualizerEnabled;
+      var hoverId = suggestionsOrder[hoverOption] || '';
+      var lastHighLightedSelectOption = highLightedSelectOptions.slice(-1).length ? highLightedSelectOptions.slice(-1)[0] : null;
+      var selectedOption = this["selectedOption_".concat(lastHighLightedSelectOption)];
+      selectedOptions.length && selectedOption && (0, _Common.scrollTo)(selectedOptionContainer, selectedOption);
+      var selectedSuggestion = this["suggestion_".concat(hoverId)];
+
+      if (selectedSuggestion) {
+        (0, _Common.scrollTo)(suggestionContainer, selectedSuggestion);
+      } else {
+        // Hack: Virtualizer not having options order properly all the time, so scrollToIndex method used here.
+        if (isVirtualizerEnabled && !!this.virtualizerMethods) {
+          this.virtualizerMethods.scrollToIndex(hoverOption, 'auto', {
+            speed: 0,
+            duration: 0,
+            onComplete: function onComplete() {
+              (0, _Common.scrollTo)(suggestionContainer, selectedSuggestion);
+            }
+          });
+        }
+      }
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState) {
+      var searchStr = this.state.searchStr;
       var _this$props2 = this.props,
           needLocalSearch = _this$props2.needLocalSearch,
           isPopupOpen = _this$props2.isPopupOpen,
           onDropBoxClose = _this$props2.onDropBoxClose,
           onDropBoxOpen = _this$props2.onDropBoxOpen,
-          isSearchClearOnClose = _this$props2.isSearchClearOnClose,
-          isVirtualizerEnabled = _this$props2.isVirtualizerEnabled; //handle dropbox open & close
+          isSearchClearOnClose = _this$props2.isSearchClearOnClose; //handle dropbox open & close
 
       if (prevProps.isPopupOpen !== isPopupOpen) {
         isPopupOpen && onDropBoxOpen && this.handleFetchOptions(onDropBoxOpen, searchStr);
@@ -252,22 +285,10 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           isSearchClearOnClose && searchStr && this.handleSearch('');
           onDropBoxClose && onDropBoxClose();
         }
-      } //scrollTo handling
-
+      }
 
-      if (isVirtualizerEnabled && !!this.virtualizerMethods) {
-        var position = prevState.hoverOption > hoverOption ? 'top' : 'bottom';
-        this.virtualizerMethods.getElementVisiblePercentage(hoverOption) < 50 && this.virtualizerMethods.scrollToIndex(hoverOption, position);
-      } else {
-        var suggestionContainer = this.suggestionContainer,
-            selectedOptionContainer = this.selectedOptionContainer,
-            suggestionsOrder = this.suggestionsOrder;
-        var hoverId = suggestionsOrder[hoverOption] || '';
-        var selectedSuggestion = this["suggestion_".concat(hoverId)];
-        var lastHighLightedSelectOption = highLightedSelectOptions.slice(-1).length ? highLightedSelectOptions.slice(-1)[0] : null;
-        var selectedOption = this["selectedOption_".concat(lastHighLightedSelectOption)];
-        isPopupOpen && (0, _Common.scrollTo)(suggestionContainer, selectedSuggestion);
-        selectedOptions.length && selectedOption && (0, _Common.scrollTo)(selectedOptionContainer, selectedOption);
+      if (isPopupOpen) {
+        this.scrollToHighlightedIndex();
       } //When suggestions length less than 5, getNextOptions function call
 
 
@@ -1175,7 +1196,8 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         boxPosition: position || "".concat(defaultDropBoxPosition),
         getRef: getContainerRef,
         isActive: isPopupReady,
-        isAnimate: isAnimate,
+        isAnimate: isAnimate && !isVirtualizerEnabled // Note: Virtualizer gets element height at mount itself which causes issue with options height
+        ,
         isArrow: false,
         onClick: removeClose,
         needResponsive: needResponsive,

package/lib/Select/Select.js

@@ -169,6 +169,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
     _this.handleExposePopupHandlers = _this.handleExposePopupHandlers.bind(_assertThisInitialized(_this));
     _this.handleGetAddNewOptionText = _this.handleGetAddNewOptionText.bind(_assertThisInitialized(_this));
     _this.getVirtualizerPublicMethods = _this.getVirtualizerPublicMethods.bind(_assertThisInitialized(_this));
+    _this.scrollToHighlightedIndex = _this.scrollToHighlightedIndex.bind(_assertThisInitialized(_this));
     _this.setSuggestionsVirtualizerContainerRefFunction = _this.setSuggestionsVirtualizerContainerRefFunction.bind(_assertThisInitialized(_this));
     _this.valueInputTypeString = '';
     _this.valueInputSearchString = '';
@@ -234,13 +235,42 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         selectedValueIndex: hoverIndex
       });
     }
+  }, {
+    key: "scrollToHighlightedIndex",
+    value: function scrollToHighlightedIndex() {
+      var suggestionContainer = this.suggestionContainer,
+          optionsOrder = this.optionsOrder;
+
+      if (!suggestionContainer) {
+        return;
+      }
+
+      var hoverIndex = this.state.hoverIndex;
+      var isVirtualizerEnabled = this.props.isVirtualizerEnabled;
+      var hoverId = (0, _Common.getIsEmptyValue)(optionsOrder[hoverIndex]) ? '' : optionsOrder[hoverIndex];
+      var selSuggestion = this["suggestion_".concat(hoverId)];
+
+      if (selSuggestion) {
+        (0, _Common.scrollTo)(suggestionContainer, selSuggestion);
+      } else {
+        // Hack: Virtualizer not having options order properly all the time, so scrollToIndex method used here.
+        if (isVirtualizerEnabled && !!this.virtualizerMethods) {
+          this.virtualizerMethods.scrollToIndex(hoverIndex, 'auto', {
+            speed: 0,
+            duration: 0,
+            onComplete: function onComplete() {
+              (0, _Common.scrollTo)(suggestionContainer, selSuggestion);
+            }
+          });
+        }
+      }
+    }
   }, {
     key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, prevState) {
+    value: function componentDidUpdate(prevProps) {
       var _this2 = this;
 
       var _this$state = this.state,
-          hoverIndex = _this$state.hoverIndex,
           searchStr = _this$state.searchStr,
           selectedValueIndex = _this$state.selectedValueIndex;
       var _this$props = this.props,
@@ -250,28 +280,15 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           needSearch = _this$props.needSearch,
           onSearch = _this$props.onSearch,
           isPopupOpen = _this$props.isPopupOpen,
-          isSearchClearOnClose = _this$props.isSearchClearOnClose,
-          isVirtualizerEnabled = _this$props.isVirtualizerEnabled;
+          isSearchClearOnClose = _this$props.isSearchClearOnClose;
 
-      if (isVirtualizerEnabled && !!this.virtualizerMethods) {
-        var position = prevState.hoverIndex > hoverIndex ? 'top' : 'bottom';
-        this.virtualizerMethods.getElementVisiblePercentage(hoverIndex) < 50 && this.virtualizerMethods.scrollToIndex(hoverIndex, position);
-      } else {
-        var suggestionContainer = this.suggestionContainer,
-            optionsOrder = this.optionsOrder;
-        var hoverId = (0, _Common.getIsEmptyValue)(optionsOrder[hoverIndex]) ? '' : optionsOrder[hoverIndex];
-        var selSuggestion = this["suggestion_".concat(hoverId)];
-        isPopupOpen && (0, _Common.scrollTo)(suggestionContainer, selSuggestion);
+      if (isPopupOpen) {
+        this.scrollToHighlightedIndex();
       }
 
       if (prevProps.isPopupOpen !== isPopupOpen) {
         if (isPopupOpen) {
           onDropBoxOpen && this.handleFetchOptions(onDropBoxOpen, searchStr);
-
-          if (isVirtualizerEnabled && !!this.virtualizerMethods) {
-            this.virtualizerMethods.getElementVisiblePercentage(hoverIndex) < 50 && this.virtualizerMethods.scrollToIndex(hoverIndex);
-          }
-
           setTimeout(function () {
             _this2.searchInput && _this2.searchInput.focus({
               preventScroll: true
@@ -764,6 +781,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           getTargetRef = _this$props11.getTargetRef,
           getContainerRef = _this$props11.getContainerRef,
           removeClose = _this$props11.removeClose,
+          isAnimate = _this$props11.isAnimate,
           isPopupOpen = _this$props11.isPopupOpen,
           isPopupReady = _this$props11.isPopupReady,
           animationStyle = _this$props11.animationStyle,
@@ -953,7 +971,8 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           boxPosition: position || "".concat(defaultDropBoxPosition),
           getRef: getContainerRef,
           isActive: isPopupReady,
-          isAnimate: true,
+          isAnimate: isAnimate && !isVirtualizerEnabled // Note: Virtualizer gets element height at mount itself which causes issue with options height
+          ,
           isArrow: false,
           onClick: removeClose,
           needResponsive: needResponsive,

package/lib/Select/props/defaultProps.js

@@ -40,6 +40,7 @@ var Select_defaultProps = {
   boxSize: 'default',
   needListBorder: false,
   needCloseOnSelect: true,
+  isAnimate: true,
   isParentBased: true,
   isSearchClearOnClose: true,
   i18nKeys: {},

package/lib/Select/props/propTypes.js

@@ -44,6 +44,7 @@ var Select_propTypes = {
     noMoreText: _propTypes["default"].string,
     searchEmptyText: _propTypes["default"].string
   }),
+  isAnimate: _propTypes["default"].bool,
   isDefaultSelectValue: _propTypes["default"].bool,
   isDisabled: _propTypes["default"].bool,
   isNextOptions: _propTypes["default"].bool,

package/lib/v1/Switch/css/Switch_v1.module.css

@@ -126,7 +126,13 @@
 }
 .checked {
     --local-switch-track-background-color: var(--zdt_v1_switch_track_on_bg);
-    --local-switch-thumb-translateX: calc(var(--local-switch-track-width) - var(--local-switch-thumb-size) - 2px)
+}
+[dir=ltr] .checked {
+    --local-switch-thumb-translateX: calc(var(--local-switch-track-width) - var(--local-switch-thumb-size) - 2px) 
+    /*rtl: calc(-1 * (var(--local-switch-track-width) - var(--local-switch-thumb-size) - 2px))*/;
+}
+[dir=rtl] .checked {
+    --local-switch-thumb-translateX: calc(-1 * (var(--local-switch-track-width) - var(--local-switch-thumb-size) - 2px));
 }
 .unChecked {
     --local-switch-track-background-color: var(--zdt_v1_switch_track_off_bg);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.4.16",
+  "version": "1.4.17",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -78,7 +78,7 @@
     "@zohodesk-private/css-variable-migrator": "1.0.9",
     "@zohodesk-private/node-plugins": "1.1.13",
     "@zohodesk-private/react-prop-validator": "1.2.3",
-    "@zohodesk/a11y": "2.3.7",
+    "@zohodesk/a11y": "2.3.8",
     "@zohodesk/docstool": "1.0.0-alpha-2",
     "@zohodesk/dotkit": "1.0.3",
     "@zohodesk/hooks": "2.0.5",
@@ -107,7 +107,7 @@
     "react-sortable-hoc": "^0.8.3",
     "@zohodesk/hooks": "2.0.5",
     "@zohodesk/utils": "1.3.14",
-    "@zohodesk/a11y": "2.3.7",
+    "@zohodesk/a11y": "2.3.8",
     "@zohodesk/layout": "3.1.0",
     "@zohodesk/dotkit": "1.0.3"
   }