@loomhq/lens 12.12.1 → 12.12.3

package/dist/cjs/index.js

@@ -3398,7 +3398,8 @@ var IconButton = import_react19.default.forwardRef(
       backgroundColor,
       isActive,
       isDisabled,
-      size = "medium"
+      size = "medium",
+      htmlTag = "button"
     } = _b, props = __objRest(_b, [
       "altText",
       "icon",
@@ -3407,17 +3408,19 @@ var IconButton = import_react19.default.forwardRef(
       "backgroundColor",
       "isActive",
       "isDisabled",
-      "size"
+      "size",
+      "htmlTag"
     ]);
     return /* @__PURE__ */ import_react19.default.createElement(
       IconButtonBox,
       __spreadValues({
         "aria-label": altText,
-        onClick,
+        onClick: htmlTag === "button" ? onClick : void 0,
         isActive,
         disabled: isDisabled,
         size,
         backgroundColor,
+        as: htmlTag,
         ref
       }, props),
       /* @__PURE__ */ import_react19.default.createElement(
@@ -4192,11 +4195,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__ */ import_react25.default.createElement(
@@ -4328,10 +4326,9 @@ var Select = (_a) => {
     const value = e.target.value;
     setSearchValue(value);
   };
-  const [prevSelectedItem, setPrevSelectedItem] = (0, import_react25.useState)(
+  const [selectedItem, setSelectedItem] = (0, import_react25.useState)(
     getSelectedOption(selectedOptionValue, options)
   );
-  const [selectedItem, setSelectedItem] = (0, import_react25.useState)(prevSelectedItem);
   const onDownshiftChange = (item) => {
     setSelectedItem(item);
     onChange && onChange(item ? item : "");
@@ -4357,12 +4354,14 @@ var Select = (_a) => {
     triggerOffset
   });
   (0, import_react25.useEffect)(() => {
-    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]);
   (0, import_react25.useEffect)(() => {
     onOpenChange && onOpenChange(downshiftIsOpen);
   }, [downshiftIsOpen, onOpenChange]);
@@ -4439,7 +4438,7 @@ var Select = (_a) => {
   }) => {
     return (
       // Don't set the role to combobox to ensure a consistent experience for screen readers
-      /* @__PURE__ */ import_react25.default.createElement("div", { role: "presentation" }, /* @__PURE__ */ import_react25.default.createElement("div", __spreadValues({}, triggerProps), trigger ? /* @__PURE__ */ import_react25.default.createElement(
+      /* @__PURE__ */ import_react25.default.createElement("div", { role: "presentation", "aria-expanded": void 0 }, /* @__PURE__ */ import_react25.default.createElement("div", __spreadValues({}, triggerProps), trigger ? /* @__PURE__ */ import_react25.default.createElement(
         CustomHeader,
         {
           getToggleButtonProps: () => __spreadValues({}, getToggleButtonProps({ onKeyDown })),
@@ -4597,33 +4596,37 @@ var ChildrenWrapper = import_styled20.default.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 } = (0, import_transition_hook.useTransition)(isOpen, duration);
-  use_prevent_scroll_default("html", isOpen);
-  return /* @__PURE__ */ import_react27.default.createElement(import_react27.default.Fragment, null, shouldMount && /* @__PURE__ */ import_react27.default.createElement(
-    BackdropWrapper,
-    __spreadValues({
-      backgroundColor,
-      zIndex,
-      style: {
-        transition: `opacity ${duration}ms`,
-        opacity: stage === "enter" ? 1 : 0
-      }
-    }, props),
-    /* @__PURE__ */ import_react27.default.createElement(ChildrenWrapper, null, children)
-  ));
-};
+var Backdrop = import_react27.default.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      children,
+      isOpen,
+      zIndex = 1e3,
+      backgroundColor = "backdropDark"
+    } = _b, props = __objRest(_b, [
+      "children",
+      "isOpen",
+      "zIndex",
+      "backgroundColor"
+    ]);
+    const { stage, shouldMount } = (0, import_transition_hook.useTransition)(isOpen, duration);
+    use_prevent_scroll_default("html", isOpen);
+    return /* @__PURE__ */ import_react27.default.createElement(import_react27.default.Fragment, null, shouldMount && /* @__PURE__ */ import_react27.default.createElement(
+      BackdropWrapper,
+      __spreadValues({
+        ref,
+        backgroundColor,
+        zIndex,
+        style: {
+          transition: `opacity ${duration}ms`,
+          opacity: stage === "enter" ? 1 : 0
+        }
+      }, props),
+      /* @__PURE__ */ import_react27.default.createElement(ChildrenWrapper, null, children)
+    ));
+  }
+);
+Backdrop.displayName = "Backdrop";
 var backdrop_default = Backdrop;
 
 // src/components/modal/modal.tsx
@@ -4795,6 +4798,7 @@ var ModalCard = (_a) => {
         {
           altText: "Close",
           icon: /* @__PURE__ */ import_react28.default.createElement(SvgClose, null),
+          size: "small",
           onClick: onCloseClick
         }
       )),
@@ -4854,6 +4858,7 @@ var Modal = import_react28.default.forwardRef(
       "initialFocus"
     ]);
     var _a2;
+    const backdropRef = (0, import_react28.useRef)(null);
     const titleId = id ? `${id}-modal-title` : "modal-title";
     const hasButtons = mainButton || secondaryButton || alternativeButton ? true : false;
     const closeClickHandler = (e) => {
@@ -4864,7 +4869,34 @@ var Modal = import_react28.default.forwardRef(
       }
       onCloseClick(e);
     };
-    return /* @__PURE__ */ import_react28.default.createElement(backdrop_default, __spreadValues({ isOpen, zIndex }, props), /* @__PURE__ */ import_react28.default.createElement(
+    (0, import_react28.useEffect)(() => {
+      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__ */ import_react28.default.createElement(backdrop_default, __spreadValues({ ref: backdropRef, isOpen, zIndex }, props), /* @__PURE__ */ import_react28.default.createElement(
       container_default,
       {
         height: "100%",
@@ -5363,7 +5395,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;
 };
@@ -5550,7 +5582,7 @@ var Typeahead = (0, import_react32.forwardRef)(
       snap: true
     });
     (0, import_react32.useEffect)(() => {
-      if (didSelectedOptionValueChange2(selectedOptionValue, prevSelectedItem)) {
+      if (didSelectedOptionValueChange(selectedOptionValue, prevSelectedItem)) {
         const item = getSelectedOption2(selectedOptionValue, options);
         setPrevSelectedItem(item);
         setSelectedItem(item);
@@ -6428,7 +6460,7 @@ var import_styled30 = __toESM(require("@emotion/styled"));
 var import_react43 = __toESM(require("react"));
 var WEBAPP = "web-app";
 var CHROME_EXTENSION = "chrome-extension";
-var toastDurations = { short: 3e3, long: 8e3 };
+var toastDurations = { short: 3e3, medium: 5e3, long: 8e3 };
 var enter = (toastDuration, platform) => import_react42.keyframes`
   0% {
     opacity: 0;