@bigbinary/neetoui 5.2.9 → 5.2.11

package/index.d.ts

@@ -563,6 +563,7 @@ export type TypographyProps = {
 export type KbdProps = {
   keyName?: string;
   className?: string;
+  tooltipProps?: TooltipProps;
 };
 
 export type NoDataProps = {

package/index.js

@@ -1,5 +1,5 @@
 import * as React$5 from 'react';
-import React__default, { createContext, useContext, useRef, useEffect, useLayoutEffect, useCallback, useMemo, forwardRef as forwardRef$1, createElement, useState, cloneElement as cloneElement$1, Children, isValidElement, Fragment, Component } from 'react';
+import React__default, { createContext, useContext, useRef, useEffect, useLayoutEffect, useCallback, useMemo, forwardRef as forwardRef$1, createElement, useState, cloneElement as cloneElement$1, Children, isValidElement, useSyncExternalStore, Fragment, Component } from 'react';
 import { Right, Down, Close, Info, Focus, Left, Calendar, Check, MenuHorizontal, Clock, CheckCircle, Warning, CloseCircle } from '@bigbinary/neeto-icons';
 import { Link, NavLink, useHistory } from 'react-router-dom';
 import ReactDOM, { createPortal } from 'react-dom';
@@ -10667,14 +10667,13 @@ var UniqueArray = /*#__PURE__*/function () {
   }]);
   return UniqueArray;
 }();
-var renderFocusOnFocusableElements = function renderFocusOnFocusableElements(ref) {
+var trapFocusOnFocusableElements = function trapFocusOnFocusableElements(ref) {
   var _ref$current, _ref$current2;
-  var shouldFocusFirstFocusableElement = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
   var focusableElements = 'button,[href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
   var firstFocusableElement = ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelectorAll(focusableElements)[0];
   var focusableContent = ref === null || ref === void 0 ? void 0 : (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.querySelectorAll(focusableElements);
   var lastFocusableElement = focusableContent[(focusableContent === null || focusableContent === void 0 ? void 0 : focusableContent.length) - 1];
-  document.addEventListener("keydown", function (e) {
+  var onKeyDown = function onKeyDown(e) {
     var isTabPressed = e.key === "Tab" || e.keyCode === 9;
     if (!isTabPressed) {
       return;
@@ -10690,8 +10689,16 @@ var renderFocusOnFocusableElements = function renderFocusOnFocusableElements(ref
         e.preventDefault();
       }
     }
-  });
-  if (!shouldFocusFirstFocusableElement) return;
+  };
+  document.addEventListener("keydown", onKeyDown);
+  return function () {
+    return document.removeEventListener("keydown", onKeyDown);
+  };
+};
+var focusFirstFocusableElement = function focusFirstFocusableElement(ref) {
+  var _ref$current3;
+  var focusableElements = 'button,[href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+  var firstFocusableElement = ref === null || ref === void 0 ? void 0 : (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.querySelectorAll(focusableElements)[0];
   firstFocusableElement === null || firstFocusableElement === void 0 ? void 0 : firstFocusableElement.focus();
 };
 var hideScrollAndAddMargin = function hideScrollAndAddMargin() {
@@ -17368,25 +17375,45 @@ var OverlayManager = /*#__PURE__*/function () {
     _classCallCheck$3(this, OverlayManager);
     this.overlays = [];
     this.previouslyFocusedElements = [];
+    this.subscribers = new Set();
     this.add = this.add.bind(this);
     this.remove = this.remove.bind(this);
     this.isTopOverlay = this.isTopOverlay.bind(this);
     this.hasOverlays = this.hasOverlays.bind(this);
     this.getFinalFocusInOverlay = this.getFinalFocusInOverlay.bind(this);
     this.getTopMostOverlay = this.getTopMostOverlay.bind(this);
+    this.subscribe = this.subscribe.bind(this);
   }
   _createClass$3(OverlayManager, [{
+    key: "subscribe",
+    value: function subscribe(callback) {
+      var _this = this;
+      this.subscribers.add(callback);
+      return function () {
+        return _this.subscribers["delete"](callback);
+      };
+    }
+  }, {
     key: "add",
     value: function add(overlay, elementToFocus) {
       this.overlays.push(overlay);
       this.previouslyFocusedElements.push(elementToFocus);
+      this.subscribers.forEach(function (subscriber) {
+        return subscriber();
+      });
     }
   }, {
     key: "remove",
-    value: function remove(overlay) {
+    value: function remove(overlay, elementToFocus) {
       this.overlays = this.overlays.filter(function (_overlay) {
         return _overlay !== overlay;
       });
+      this.previouslyFocusedElements = this.previouslyFocusedElements.filter(function (_elementToFocus) {
+        return _elementToFocus !== elementToFocus;
+      });
+      this.subscribers.forEach(function (subscriber) {
+        return subscriber();
+      });
     }
   }, {
     key: "isTopOverlay",
@@ -17402,7 +17429,11 @@ var OverlayManager = /*#__PURE__*/function () {
   }, {
     key: "getFinalFocusInOverlay",
     value: function getFinalFocusInOverlay() {
-      return this.previouslyFocusedElements.pop();
+      var finalFocus = this.previouslyFocusedElements.pop();
+      this.subscribers.forEach(function (subscriber) {
+        return subscriber();
+      });
+      return finalFocus;
     }
   }, {
     key: "getTopMostOverlay",
@@ -17445,9 +17476,8 @@ var useOverlay = function useOverlay(_ref) {
       if ((_initialFocusRef = initialFocusRef) !== null && _initialFocusRef !== void 0 && _initialFocusRef.current) {
         var _initialFocusRef2, _initialFocusRef2$cur;
         (_initialFocusRef2 = initialFocusRef) === null || _initialFocusRef2 === void 0 ? void 0 : (_initialFocusRef2$cur = _initialFocusRef2.current) === null || _initialFocusRef2$cur === void 0 ? void 0 : _initialFocusRef2$cur.focus();
-        renderFocusOnFocusableElements(overlayWrapper, false);
       } else {
-        renderFocusOnFocusableElements(overlayWrapper);
+        focusFirstFocusableElement(overlayWrapper);
       }
     }
   };
@@ -17457,18 +17487,27 @@ var useOverlay = function useOverlay(_ref) {
     onClose === null || onClose === void 0 ? void 0 : onClose();
   }, [onClose]);
   useOnClickOutside(overlayWrapper, backdropRef, closeOnOutsideClick ? handleOverlayClose : noop$2);
+  var isTopOverlay = useSyncExternalStore(manager.subscribe, function () {
+    return manager.isTopOverlay(overlayWrapper);
+  });
   useHotkeys("esc", function () {
     closeOnEsc && handleOverlayClose();
   }, [handleOverlayClose, closeOnEsc]);
   useEffect(function () {
+    var cleanUp = noop$2;
     if (isOpen) {
-      if (hasTransitionCompleted) focusRequiredElementInOverlay();
+      if (hasTransitionCompleted && isTopOverlay) {
+        focusRequiredElementInOverlay();
+        // Enable focus trap only for the topmost overlay
+        cleanUp = trapFocusOnFocusableElements(overlayWrapper);
+      }
       if (shouldHideScrollAndAddMargin) hideScrollAndAddMargin();
     }
     return function () {
       if (!manager.hasOverlays()) showScrollAndRemoveMargin();
+      cleanUp();
     };
-  }, [isOpen, hasTransitionCompleted]);
+  }, [isOpen, hasTransitionCompleted, isTopOverlay]);
   var setFocusField = function setFocusField(fieldRef) {
     if (!fieldRef) return;
     initialFocusRef = {
@@ -17489,7 +17528,7 @@ var useOverlayManager = function useOverlayManager(ref, isOpen) {
       manager.add(ref, elementToFocus);
     }
     return function () {
-      manager.remove(ref);
+      manager.remove(ref, elementToFocus);
     };
   }, [isOpen, ref]);
 };
@@ -20201,14 +20240,17 @@ var Input$2 = /*#__PURE__*/forwardRef$1(function (_ref, ref) {
 });
 Input$2.displayName = "Input";
 
-var _excluded$o = ["keyName", "className"];
+var _excluded$o = ["keyName", "className", "tooltipProps"];
 var Kbd = function Kbd(_ref) {
   var keyName = _ref.keyName,
     className = _ref.className,
+    tooltipProps = _ref.tooltipProps,
     otherProps = _objectWithoutProperties$1(_ref, _excluded$o);
-  return /*#__PURE__*/React__default.createElement("span", _extends$4({
+  return /*#__PURE__*/React__default.createElement(Tooltip, _extends$4({
+    disabled: !tooltipProps
+  }, tooltipProps), /*#__PURE__*/React__default.createElement("span", _extends$4({
     className: classnames$1(["neeto-ui-kbd", className])
-  }, otherProps), keyName);
+  }, otherProps), keyName));
 };
 
 function _arrayWithoutHoles$1(arr) {