@7shifts/sous-chef 3.44.2-beta.0 → 3.44.2

package/dist/actions/index.d.ts

@@ -1,5 +1,7 @@
 import Toggle from './Toggle';
 import Button from './Button';
+import { ButtonTheme } from './Button/types';
 import PaginationControls from './PaginationControls';
 import Link from './Link';
 export { Toggle, Button, PaginationControls, Link };
+export type { ButtonTheme };

package/dist/index.css

@@ -2570,7 +2570,7 @@ input:disabled + ._2W10t::after {
 ._11ygA {
   display: flex;
   justify-content: space-between;
-  width: 424px;
+  max-width: 424px;
   gap: 20px;
   flex-direction: column;
   align-items: center;

package/dist/index.js

@@ -6398,6 +6398,11 @@ var isGoingTowardsPane = function isGoingTowardsPane(panePosition, mouseYAxisPos
   }
   return isGoingTowardsPane;
 };
+var getKeyboardFocusableElements = function getKeyboardFocusableElements(element) {
+  return Array.prototype.slice.call(element.querySelectorAll('a[href], button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])')).filter(function (el) {
+    return !el.hasAttribute('disabled') && !el.getAttribute('aria-hidden') && !(el.getAttribute('tabindex') === '-1');
+  });
+};
 
 var styles$g = {"dropdown__trigger":"_3INRK"};
 
@@ -6826,6 +6831,7 @@ var Dropdown = function Dropdown(_ref) {
   var triggerRef = React.useRef(null);
   var paneRef = React.useRef(null);
   var isFocusingOverlay = React.useRef(false);
+  var triggerIsKnownButton = trigger.type === Button || trigger.type === 'button' || trigger.type === TimeFieldDropdownTrigger;
   var handleToggleDropdown = React.useCallback(function () {
     return setIsOpen(!isOpen);
   }, [isOpen]);
@@ -6836,7 +6842,7 @@ var Dropdown = function Dropdown(_ref) {
       handleToggleDropdown();
     }
     e.stopPropagation();
-    if ('onClick' in trigger.props) {
+    if (triggerIsKnownButton && 'onClick' in trigger.props) {
       trigger.props.onClick(e);
     }
     e.preventDefault();
@@ -6886,6 +6892,24 @@ var Dropdown = function Dropdown(_ref) {
       setIsOpen(false);
     }
   };
+  var handleOnBlur = function handleOnBlur(e) {
+    trigger.props.onBlur && trigger.props.onBlur(e);
+    if (!paneRef || !(paneRef !== null && paneRef !== void 0 && paneRef.current)) {
+      return;
+    }
+    var focusableElements = getKeyboardFocusableElements(paneRef.current);
+    if (focusableElements.length > 0) {
+      window.setTimeout(function () {
+        var _paneRef$current;
+        var focusedElement = document.activeElement;
+        if (!((_paneRef$current = paneRef.current) !== null && _paneRef$current !== void 0 && _paneRef$current.contains(focusedElement))) {
+          focusableElements[0].focus();
+        }
+      }, 0);
+    } else {
+      setIsOpen(false);
+    }
+  };
   var getRef = function getRef() {
     if ((trigger.type === Button || trigger.type === TimeFieldDropdownTrigger) && trigger.ref) {
       return trigger.ref;
@@ -6897,6 +6921,7 @@ var Dropdown = function Dropdown(_ref) {
     onClick: handleMouseClick,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
+    onBlur: handleOnBlur,
     ref: updatedRef,
     style: {
       width: triggerWidth === 'full' ? '100%' : 'fit-content'
@@ -6910,9 +6935,10 @@ var Dropdown = function Dropdown(_ref) {
       triggerRef: updatedRef,
       paneRef: paneRef
     }
-  }, trigger.type === Button || trigger.type === 'button' || trigger.type === TimeFieldDropdownTrigger ? React__default.cloneElement(trigger, _extends({}, trigger.props, triggerProps)) : React__default.createElement("button", _extends({}, triggerProps, {
+  }, triggerIsKnownButton ? React__default.cloneElement(trigger, _extends({}, trigger.props, triggerProps)) : React__default.createElement("button", _extends({}, triggerProps, {
     className: styles$g['dropdown__trigger'],
-    ref: updatedRef
+    ref: updatedRef,
+    onFocus: handleFocus
   }), trigger), React__default.createElement(DropdownPane, {
     width: width,
     maxHeight: maxHeight,