@loomhq/lens 12.12.0 → 12.12.2

package/dist/esm/index.js

@@ -3967,11 +3967,6 @@ var getSelectedOption = (value, options) => {
     return options.find((item) => item.value === value);
   }
 };
-var didSelectedOptionValueChange = (selectedOptionValue, prevSelectedItem) => {
-  return Boolean(
-    prevSelectedItem && selectedOptionValue !== prevSelectedItem.value
-  );
-};
 var renderOption = (item, index, selectedItem, selectedOptionValue, highlightedIndex, getItemProps, keyboardMove, setKeyboardMove) => {
   const isSelected = !selectedItem && item.value === selectedOptionValue || selectedItem && selectedItem.value === item.value;
   return /* @__PURE__ */ React26.createElement(
@@ -4103,10 +4098,9 @@ var Select = (_a) => {
     const value = e.target.value;
     setSearchValue(value);
   };
-  const [prevSelectedItem, setPrevSelectedItem] = useState(
+  const [selectedItem, setSelectedItem] = useState(
     getSelectedOption(selectedOptionValue, options)
   );
-  const [selectedItem, setSelectedItem] = useState(prevSelectedItem);
   const onDownshiftChange = (item) => {
     setSelectedItem(item);
     onChange && onChange(item ? item : "");
@@ -4132,12 +4126,14 @@ var Select = (_a) => {
     triggerOffset
   });
   useEffect2(() => {
-    if (didSelectedOptionValueChange(selectedOptionValue, prevSelectedItem)) {
-      const selectedItem2 = getSelectedOption(selectedOptionValue, options);
-      setPrevSelectedItem(selectedItem2);
-      setSelectedItem(selectedItem2);
+    const expectedSelectedItem = getSelectedOption(
+      selectedOptionValue,
+      options
+    );
+    if ((expectedSelectedItem == null ? void 0 : expectedSelectedItem.value) !== (selectedItem == null ? void 0 : selectedItem.value)) {
+      setSelectedItem(expectedSelectedItem);
     }
-  }, [selectedOptionValue, options, prevSelectedItem]);
+  }, [selectedOptionValue, options, selectedItem]);
   useEffect2(() => {
     onOpenChange && onOpenChange(downshiftIsOpen);
   }, [downshiftIsOpen, onOpenChange]);
@@ -4372,39 +4368,43 @@ var ChildrenWrapper = styled20.div`
   overflow: auto;
   height: 100%;
 `;
-var Backdrop = (_a) => {
-  var _b = _a, {
-    children,
-    isOpen,
-    zIndex = 1e3,
-    backgroundColor = "backdropDark"
-  } = _b, props = __objRest(_b, [
-    "children",
-    "isOpen",
-    "zIndex",
-    "backgroundColor"
-  ]);
-  const { stage, shouldMount } = useTransition(isOpen, duration);
-  use_prevent_scroll_default("html", isOpen);
-  return /* @__PURE__ */ React27.createElement(React27.Fragment, null, shouldMount && /* @__PURE__ */ React27.createElement(
-    BackdropWrapper,
-    __spreadValues({
-      backgroundColor,
-      zIndex,
-      style: {
-        transition: `opacity ${duration}ms`,
-        opacity: stage === "enter" ? 1 : 0
-      }
-    }, props),
-    /* @__PURE__ */ React27.createElement(ChildrenWrapper, null, children)
-  ));
-};
+var Backdrop = React27.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      children,
+      isOpen,
+      zIndex = 1e3,
+      backgroundColor = "backdropDark"
+    } = _b, props = __objRest(_b, [
+      "children",
+      "isOpen",
+      "zIndex",
+      "backgroundColor"
+    ]);
+    const { stage, shouldMount } = useTransition(isOpen, duration);
+    use_prevent_scroll_default("html", isOpen);
+    return /* @__PURE__ */ React27.createElement(React27.Fragment, null, shouldMount && /* @__PURE__ */ React27.createElement(
+      BackdropWrapper,
+      __spreadValues({
+        ref,
+        backgroundColor,
+        zIndex,
+        style: {
+          transition: `opacity ${duration}ms`,
+          opacity: stage === "enter" ? 1 : 0
+        }
+      }, props),
+      /* @__PURE__ */ React27.createElement(ChildrenWrapper, null, children)
+    ));
+  }
+);
+Backdrop.displayName = "Backdrop";
 var backdrop_default = Backdrop;
 
 // src/components/modal/modal.tsx
 import styled21 from "@emotion/styled";
 import FocusTrap from "focus-trap-react";
-import React29, { useEffect as useEffect3 } from "react";
+import React29, { useEffect as useEffect3, useRef as useRef2 } from "react";
 
 // src/components/icon/available-icons/close.tsx
 import CloseIcon from "@atlaskit/icon/core/close";
@@ -4629,6 +4629,7 @@ var Modal = React29.forwardRef(
       "initialFocus"
     ]);
     var _a2;
+    const backdropRef = useRef2(null);
     const titleId = id ? `${id}-modal-title` : "modal-title";
     const hasButtons = mainButton || secondaryButton || alternativeButton ? true : false;
     const closeClickHandler = (e) => {
@@ -4639,7 +4640,34 @@ var Modal = React29.forwardRef(
       }
       onCloseClick(e);
     };
-    return /* @__PURE__ */ React29.createElement(backdrop_default, __spreadValues({ isOpen, zIndex }, props), /* @__PURE__ */ React29.createElement(
+    useEffect3(() => {
+      if (!isOpen || !backdropRef.current) {
+        return;
+      }
+      const container = backdropRef.current.parentElement;
+      if (!container) {
+        return;
+      }
+      const siblings = Array.from(container.children).filter(
+        (child) => child !== backdropRef.current && child instanceof HTMLElement
+      );
+      siblings.forEach((sibling) => {
+        if (!sibling.hasAttribute("aria-hidden")) {
+          sibling.setAttribute("aria-hidden", "true");
+          sibling.setAttribute("data-lens-modal-hidden", "true");
+        }
+      });
+      return () => {
+        const hiddenElements = document.querySelectorAll(
+          "[data-lens-modal-hidden]"
+        );
+        hiddenElements.forEach((element) => {
+          element.removeAttribute("aria-hidden");
+          element.removeAttribute("data-lens-modal-hidden");
+        });
+      };
+    }, [isOpen]);
+    return /* @__PURE__ */ React29.createElement(backdrop_default, __spreadValues({ ref: backdropRef, isOpen, zIndex }, props), /* @__PURE__ */ React29.createElement(
       container_default,
       {
         height: "100%",
@@ -4892,7 +4920,7 @@ import React32, {
   useState as useState2,
   useMemo as useMemo2,
   forwardRef as forwardRef3,
-  useRef as useRef2,
+  useRef as useRef3,
   useCallback as useCallback2
 } from "react";
 import { useLayer as useLayer2 } from "react-laag";
@@ -5145,7 +5173,7 @@ var getSelectedOption2 = (value, options) => {
   }
   return null;
 };
-var didSelectedOptionValueChange2 = (selectedOptionValue, prevSelectedItem) => {
+var didSelectedOptionValueChange = (selectedOptionValue, prevSelectedItem) => {
   const didChange = (selectedOptionValue || null) != (prevSelectedItem == null ? void 0 : prevSelectedItem.value);
   return didChange;
 };
@@ -5285,7 +5313,7 @@ var Typeahead = forwardRef3(
       "id"
     ]);
     const environment = getDownshiftEnvironment(container);
-    const internalInputRef = useRef2(null);
+    const internalInputRef = useRef3(null);
     const inputRef = useCallback2(
       (node) => {
         internalInputRef.current = node;
@@ -5332,7 +5360,7 @@ var Typeahead = forwardRef3(
       snap: true
     });
     useEffect4(() => {
-      if (didSelectedOptionValueChange2(selectedOptionValue, prevSelectedItem)) {
+      if (didSelectedOptionValueChange(selectedOptionValue, prevSelectedItem)) {
         const item = getSelectedOption2(selectedOptionValue, options);
         setPrevSelectedItem(item);
         setSelectedItem(item);
@@ -6317,7 +6345,7 @@ var toast_default = Toast;
 
 // src/components/tooltip/tooltip.tsx
 import styled31 from "@emotion/styled";
-import React42, { useState as useState5, useRef as useRef3, useEffect as useEffect9 } from "react";
+import React42, { useState as useState5, useRef as useRef4, useEffect as useEffect9 } from "react";
 import { useHover, useLayer as useLayer4, mergeRefs } from "react-laag";
 import ResizeObserver4 from "resize-observer-polyfill";
 var placements = {
@@ -6455,7 +6483,7 @@ var Tooltip = (_a) => {
   const [isOverTooltip, setIsOverTooltip] = useState5(false);
   const [isOpen, setIsOpen] = useState5(false);
   const [enterOrSpaceKeyDown, setEnterOrSpaceKeyDown] = useState5(false);
-  const focusRef = useRef3();
+  const focusRef = useRef4();
   const isTooltipDisabled = !content || isDisabled;
   useEffect9(() => {
     if (isTooltipDisabled) {
@@ -7306,7 +7334,7 @@ var list_default = List;
 
 // src/components/tabs/tabs.tsx
 import styled36 from "@emotion/styled";
-import React47, { useCallback as useCallback4, useMemo as useMemo4, useRef as useRef4, useId } from "react";
+import React47, { useCallback as useCallback4, useMemo as useMemo4, useRef as useRef5, useId } from "react";
 var TabsContext = React47.createContext({});
 var negativeScrollOffset = (scrollOffset) => `calc(-1 * ${getSizeValue(scrollOffset)})`;
 var Wrapper = styled36.div`
@@ -7612,7 +7640,7 @@ var TabsNew = (_a) => {
     "isPilledDesign",
     "hasBottomBorder"
   ]);
-  const tabRefs = useRef4({});
+  const tabRefs = useRef5({});
   const handleKeyDown = useCallback4(
     (event, currentTabIndex) => {
       var _a2;