@lumx/react 3.2.0 → 3.2.1-alpha.0

package/index.js

@@ -2282,11 +2282,15 @@ function useFocusTrap(focusZoneElement, focusElement) {
     // SETUP:
     if (focusElement && focusZoneElement.contains(focusElement)) {
       // Focus the given element.
-      focusElement.focus();
+      focusElement.focus({
+        preventScroll: true
+      });
     } else {
       var _getFirstAndLastFocus;
       // Focus the first focusable element in the zone.
-      (_getFirstAndLastFocus = getFirstAndLastFocusable(focusZoneElement).first) === null || _getFirstAndLastFocus === void 0 ? void 0 : _getFirstAndLastFocus.focus();
+      (_getFirstAndLastFocus = getFirstAndLastFocusable(focusZoneElement).first) === null || _getFirstAndLastFocus === void 0 ? void 0 : _getFirstAndLastFocus.focus({
+        preventScroll: true
+      });
     }
     FOCUS_TRAPS.register(focusTrap);
 
@@ -6198,18 +6202,19 @@ const _InnerPopover = /*#__PURE__*/forwardRef((props, ref) => {
      * unless specifically requested not to.
      */
     if (isFocusedWithin.current && focusAnchorOnClose) {
-      if (parentElement !== null && parentElement !== void 0 && parentElement.current) {
-        parentElement === null || parentElement === void 0 ? void 0 : parentElement.current.focus();
-      }
-      const firstFocusable = (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && getFirstAndLastFocusable(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current).first;
-      if (firstFocusable) {
+      var _elementToFocus;
+      let elementToFocus = parentElement === null || parentElement === void 0 ? void 0 : parentElement.current;
+      if (!elementToFocus && anchorRef !== null && anchorRef !== void 0 && anchorRef.current) {
         // Focus the first focusable element in anchor.
-        firstFocusable.focus();
-      } else {
-        var _anchorRef$current;
+        elementToFocus = getFirstAndLastFocusable(anchorRef.current).first;
+      }
+      if (!elementToFocus) {
         // Fallback on the anchor element.
-        anchorRef === null || anchorRef === void 0 ? void 0 : (_anchorRef$current = anchorRef.current) === null || _anchorRef$current === void 0 ? void 0 : _anchorRef$current.focus();
+        elementToFocus = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current;
       }
+      (_elementToFocus = elementToFocus) === null || _elementToFocus === void 0 ? void 0 : _elementToFocus.focus({
+        preventScroll: true
+      });
     }
     onClose();
   }, [anchorRef, focusAnchorOnClose, onClose, parentElement]);
@@ -9291,7 +9296,7 @@ const SelectVariant = {
   chip: 'chip'
 };
 
-const _excluded$Y = ["children", "className", "isMultiple", "closeOnClick", "disabled", "error", "hasError", "helper", "id", "isDisabled", "isEmpty", "isOpen", "isRequired", "isValid", "label", "onClear", "onDropdownClose", "onInfiniteScroll", "onInputClick", "placeholder", "theme", "value", "variant"];
+const _excluded$Y = ["children", "className", "focusElement", "isMultiple", "closeOnClick", "disabled", "error", "hasError", "helper", "id", "isDisabled", "isEmpty", "isOpen", "isRequired", "isValid", "label", "onClear", "onDropdownClose", "onInfiniteScroll", "onInputClick", "placeholder", "theme", "value", "variant"];
 
 /** The display name of the component. */
 const COMPONENT_NAME$W = 'Select';
@@ -9308,6 +9313,7 @@ const WithSelectContext = (SelectElement, _ref, ref) => {
   let {
       children,
       className,
+      focusElement,
       isMultiple,
       closeOnClick = !isMultiple,
       disabled,
@@ -9334,6 +9340,7 @@ const WithSelectContext = (SelectElement, _ref, ref) => {
   const selectId = useMemo(() => id || `select-${uid()}`, [id]);
   const anchorRef = useRef(null);
   const selectRef = useRef(null);
+  const dropdownRef = useRef(null);
   const isFocus = useListenFocus(anchorRef);
   const handleKeyboardNav = useCallback(evt => {
     if ((evt.key === 'Enter' || evt.key === ' ' || evt.key === 'ArrowDown') && onInputClick) {
@@ -9348,6 +9355,9 @@ const WithSelectContext = (SelectElement, _ref, ref) => {
     }
     anchorRef === null || anchorRef === void 0 ? void 0 : (_anchorRef$current = anchorRef.current) === null || _anchorRef$current === void 0 ? void 0 : _anchorRef$current.blur();
   };
+
+  // Handle focus trap.
+  useFocusTrap(isOpen && dropdownRef.current, focusElement === null || focusElement === void 0 ? void 0 : focusElement.current);
   return /*#__PURE__*/React.createElement("div", {
     ref: mergeRefs(ref, selectRef),
     className: classnames(className, handleBasicClasses({
@@ -9388,7 +9398,8 @@ const WithSelectContext = (SelectElement, _ref, ref) => {
     isOpen: !!isOpen,
     placement: Placement.BOTTOM_START,
     onClose: onClose,
-    onInfiniteScroll: onInfiniteScroll
+    onInfiniteScroll: onInfiniteScroll,
+    ref: dropdownRef
   }, children), hasError && error && /*#__PURE__*/React.createElement(InputHelper, {
     className: `${CLASSNAME$T}__helper`,
     kind: Kind.error,