@uniformdev/mesh-sdk-react 18.9.0 → 18.10.1-alpha.7

package/dist/index.esm.js

@@ -957,7 +957,8 @@ import { useAsync, useAsyncFn as useAsyncFn2 } from "react-use";
 
 // src/components/EntrySearch/DefaultSearchRow.tsx
 import { css as css7 } from "@emotion/react";
-import { useEffect, useRef, useState } from "react";
+import { useOutsideClick } from "@uniformdev/design-system";
+import { useRef, useState } from "react";
 
 // src/components/EntrySearch/styles/DefaultSearchRow.styles.ts
 import { css as css6 } from "@emotion/react";
@@ -1001,22 +1002,11 @@ var searchRowBtn = css6`
 `;
 
 // src/components/EntrySearch/DefaultSearchRow.tsx
-import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs8 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs8 } from "@emotion/react/jsx-runtime";
 var DefaultSearchRow = ({ result, isSelected, triggerSelection }) => {
-  const buttonRef = useRef(null);
   const popoverRef = useRef(null);
   const [showInfo, setShowInfo] = useState(false);
-  useEffect(() => {
-    function handleClickOutside(event) {
-      if (buttonRef.current && !buttonRef.current.contains(event.target) && popoverRef.current && !popoverRef.current.contains(event.target)) {
-        setShowInfo(false);
-      }
-    }
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [popoverRef]);
+  useOutsideClick(popoverRef, () => setShowInfo(false));
   const click = (event) => {
     event.stopPropagation();
     setShowInfo(!showInfo);
@@ -1035,12 +1025,11 @@ var DefaultSearchRow = ({ result, isSelected, triggerSelection }) => {
       onClick: () => triggerSelection(),
       children: [
         result.title,
-        result.popoverData && isSelected ? /* @__PURE__ */ jsxs8(Fragment3, { children: [
+        result.popoverData && isSelected ? /* @__PURE__ */ jsxs8("div", { ref: popoverRef, children: [
           /* @__PURE__ */ jsx19(
             "button",
             {
               type: "button",
-              ref: buttonRef,
               css: searchRowBtn,
               "aria-controls": "path-details",
               onClick: (e) => click(e),
@@ -1053,7 +1042,6 @@ var DefaultSearchRow = ({ result, isSelected, triggerSelection }) => {
             {
               id: "path-details",
               "aria-hidden": !showInfo,
-              ref: popoverRef,
               css: [
                 searchRowPopover,
                 showInfo ? css7`
@@ -1089,8 +1077,8 @@ var DefaultSearchRow = ({ result, isSelected, triggerSelection }) => {
 
 // src/components/EntrySearch/DefaultSelectedItem.tsx
 import { css as css9 } from "@emotion/react";
-import { Icon as Icon2 } from "@uniformdev/design-system";
-import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import { Icon as Icon2, useOutsideClick as useOutsideClick2 } from "@uniformdev/design-system";
+import { useEffect, useRef as useRef2, useState as useState2 } from "react";
 import { CgClose as CgClose2, CgInfo } from "react-icons/cg";
 import { format as timeAgo } from "timeago.js";
 
@@ -1148,8 +1136,9 @@ var selectItemPopover = css8`
   border-radius: var(--rounded-base);
   border-left: 4px solid var(--brand-secondary-3);
   box-shadow: var(--shadow-base);
-  position: fixed;
-  padding: var(--spacing-base);
+  position: absolute;
+  top: var(--spacing-base);
+  right: var(--spacing-xl);
   z-index: var(--z-10);
   width: max-content;
 `;
@@ -1189,7 +1178,7 @@ var selectItemLinkBtn = css8`
 `;
 
 // src/components/EntrySearch/DefaultSelectedItem.tsx
-import { Fragment as Fragment4, jsx as jsx20, jsxs as jsxs9 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs9 } from "@emotion/react/jsx-runtime";
 var DefaultSelectedItem = ({
   selectedItem,
   logoIcon,
@@ -1197,37 +1186,18 @@ var DefaultSelectedItem = ({
   onEditClosed
 }) => {
   var _a;
-  const buttonRef = useRef2(null);
   const popoverRef = useRef2(null);
   const [showInfo, setShowInfo] = useState2(false);
-  useEffect2(() => {
-    const eventHandler = (event) => {
-      if (buttonRef.current && !buttonRef.current.contains(event.target) && popoverRef.current && !popoverRef.current.contains(event.target)) {
-        setShowInfo(false);
-      }
-    };
+  useOutsideClick2(popoverRef, () => setShowInfo(false));
+  useEffect(() => {
     const resizeHandler = () => {
       setShowInfo(false);
     };
     window.addEventListener("resize", resizeHandler, true);
-    document.addEventListener("scroll", eventHandler, true);
-    document.addEventListener("mousedown", eventHandler);
     return () => {
       window.removeEventListener("resize", resizeHandler, true);
-      document.removeEventListener("scroll", eventHandler, true);
-      document.removeEventListener("mousedown", eventHandler);
     };
   }, [popoverRef]);
-  const popoverClick = () => {
-    var _a2;
-    setShowInfo(!showInfo);
-    if (popoverRef.current && buttonRef.current) {
-      const buttonPos = (_a2 = buttonRef == null ? void 0 : buttonRef.current) == null ? void 0 : _a2.getBoundingClientRect();
-      const popoverWidth = popoverRef.current.offsetWidth;
-      popoverRef.current.style["top"] = `${buttonPos.top + 30}px`;
-      popoverRef.current.style["left"] = `${buttonPos.left - popoverWidth + 30}px`;
-    }
-  };
   return /* @__PURE__ */ jsx20("div", { css: selectedItemContainer, children: /* @__PURE__ */ jsxs9("div", { css: selectedItemInner, children: [
     /* @__PURE__ */ jsxs9("div", { css: selectedItemDetails, children: [
       /* @__PURE__ */ jsxs9("div", { css: selectedItemCopy, children: [
@@ -1245,18 +1215,17 @@ var DefaultSelectedItem = ({
             children: selectedItem.title || selectedItem.id || ""
           }
         ),
-        selectedItem.popoverData ? /* @__PURE__ */ jsxs9(Fragment4, { children: [
+        selectedItem.popoverData ? /* @__PURE__ */ jsxs9("div", { ref: popoverRef, children: [
           /* @__PURE__ */ jsx20(
             "button",
             {
               type: "button",
-              ref: buttonRef,
               css: css9`
                     margin: calc(var(--spacing-xs) * -1) 0 calc(var(--spacing-xs) * -1) var(--spacing-sm);
                   `,
               "aria-controls": "path-details",
               "aria-expanded": showInfo,
-              onClick: popoverClick,
+              onClick: () => setShowInfo(!showInfo),
               children: /* @__PURE__ */ jsx20(
                 Icon2,
                 {
@@ -1275,7 +1244,6 @@ var DefaultSelectedItem = ({
             {
               id: "path-details",
               "aria-hidden": !showInfo,
-              ref: popoverRef,
               css: [
                 selectItemPopover,
                 showInfo ? css9`
@@ -1411,14 +1379,14 @@ import { useDebounce as useDebounce2 } from "react-use";
 import { v4 } from "uuid";
 
 // src/hooks/useLoadingDelay.ts
-import { useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
+import { useEffect as useEffect2, useRef as useRef3, useState as useState3 } from "react";
 function useLoadingDelay(loading, { delay = 500, minDuration = 200 } = {
   delay: 500,
   minDuration: 200
 }) {
   const [state, setState] = useState3("IDLE");
   const timeout = useRef3(void 0);
-  useEffect3(() => {
+  useEffect2(() => {
     if (loading && state === "IDLE") {
       clearTimeout(timeout.current);
       timeout.current = setTimeout(() => {
@@ -1437,7 +1405,7 @@ function useLoadingDelay(loading, { delay = 500, minDuration = 200 } = {
       setState("IDLE");
     }
   }, [loading, state, delay, minDuration]);
-  useEffect3(() => {
+  useEffect2(() => {
     return () => clearTimeout(timeout.current);
   }, []);
   return state === "DISPLAY" || state === "EXPIRE";
@@ -1555,7 +1523,7 @@ var badgeIcon = css10`
 `;
 
 // src/components/EntrySearch/EntrySearch.tsx
-import { Fragment as Fragment5, jsx as jsx21, jsxs as jsxs10 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx21, jsxs as jsxs10 } from "@emotion/react/jsx-runtime";
 var DefaultNoResults = ({ searchText, selectedContentType }) => {
   let message = "No content found";
   if (selectedContentType && selectedContentType !== "any") {
@@ -1714,7 +1682,7 @@ var EntrySearch = ({
           margin-block: var(--spacing-base);
         `,
           children: [
-            showSearchBox ? /* @__PURE__ */ jsxs10(Fragment5, { children: [
+            showSearchBox ? /* @__PURE__ */ jsxs10(Fragment3, { children: [
               /* @__PURE__ */ jsx21("div", { css: entrySearchWrapper, "data-test-id": "component-search", children: /* @__PURE__ */ jsxs10(
                 "button",
                 {
@@ -2375,7 +2343,7 @@ var useProductSearchContext = () => {
 // src/components/dam/DamSelectedItem.tsx
 import { css as css17 } from "@emotion/react";
 import { Icon as Icon4 } from "@uniformdev/design-system";
-import { useEffect as useEffect5, useRef as useRef6, useState as useState5 } from "react";
+import { useEffect as useEffect4, useRef as useRef6, useState as useState5 } from "react";
 import { CgClose as CgClose4, CgInfo as CgInfo2 } from "react-icons/cg";
 import { format as timeAgo2 } from "timeago.js";
 
@@ -2423,8 +2391,9 @@ var damSelectedItemPopover = css16`
   border-radius: var(--rounded-base);
   border-left: 4px solid var(--brand-secondary-3);
   box-shadow: var(--shadow-base);
-  position: fixed;
-  padding: var(--spacing-base);
+  position: absolute;
+  top: var(--spacing-base);
+  right: var(--spacing-xl);
   z-index: var(--z-10);
   width: max-content;
 `;
@@ -2481,7 +2450,7 @@ var damSelectItemImage = css16`
 `;
 
 // src/components/dam/DamSelectedItem.tsx
-import { Fragment as Fragment6, jsx as jsx25, jsxs as jsxs14 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs14 } from "@emotion/react/jsx-runtime";
 function DamSelectedItem({
   selectedItem,
   onDeselect,
@@ -2489,35 +2458,17 @@ function DamSelectedItem({
   logoIcon,
   itemDetailsRendererComponent
 }) {
-  const buttonRef = useRef6(null);
   const popoverRef = useRef6(null);
   const [showInfo, setShowInfo] = useState5(false);
-  useEffect5(() => {
-    const eventHandler = (event) => {
-      if (buttonRef.current && !buttonRef.current.contains(event.target) && popoverRef.current && !popoverRef.current.contains(event.target)) {
-        setShowInfo(false);
-      }
-    };
+  useEffect4(() => {
     const resizeHandler = () => {
       setShowInfo(false);
     };
     window.addEventListener("resize", resizeHandler, true);
-    document.addEventListener("scroll", eventHandler, true);
-    document.addEventListener("mousedown", eventHandler);
     return () => {
       window.removeEventListener("resize", resizeHandler, true);
-      document.removeEventListener("scroll", eventHandler, true);
-      document.removeEventListener("mousedown", eventHandler);
     };
   }, [popoverRef]);
-  const popoverClick = () => {
-    var _a;
-    setShowInfo(!showInfo);
-    if (popoverRef.current && buttonRef.current) {
-      const buttonPos = (_a = buttonRef == null ? void 0 : buttonRef.current) == null ? void 0 : _a.getBoundingClientRect();
-      popoverRef.current.style["top"] = `${buttonPos.top + 30}px`;
-    }
-  };
   const ResolvedItemDetailsRendererComponent = itemDetailsRendererComponent != null ? itemDetailsRendererComponent : DefaultDamItemRenderer;
   return /* @__PURE__ */ jsx25(
     "div",
@@ -2540,16 +2491,15 @@ function DamSelectedItem({
                 children: selectedItem.title || selectedItem.id || ""
               }
             ),
-            selectedItem.popoverData ? /* @__PURE__ */ jsxs14(Fragment6, { children: [
+            selectedItem.popoverData ? /* @__PURE__ */ jsxs14("div", { ref: popoverRef, children: [
               /* @__PURE__ */ jsx25(
                 "button",
                 {
                   type: "button",
-                  ref: buttonRef,
                   css: damSelectedItemInfoBtn,
                   "aria-controls": "path-details",
                   "aria-expanded": showInfo,
-                  onClick: popoverClick,
+                  onClick: () => setShowInfo(!showInfo),
                   children: /* @__PURE__ */ jsx25(
                     Icon4,
                     {
@@ -2568,7 +2518,6 @@ function DamSelectedItem({
                 {
                   id: "path-details",
                   "aria-hidden": !showInfo,
-                  ref: popoverRef,
                   css: [
                     damSelectedItemPopover,
                     showInfo ? css17`
@@ -3421,7 +3370,7 @@ function useVariables() {
 }
 
 // src/components/Variables/InputVariables.tsx
-import { Fragment as Fragment7, jsx as jsx30, jsxs as jsxs18 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx30, jsxs as jsxs18 } from "@emotion/react/jsx-runtime";
 function cleanTagifyValue(rawValue) {
   return rawValue.replace(/\${{.*?"value":"([^"]+)".*?}}/g, "${$1}").replace(/[\r\n]+/g, "");
 }
@@ -3474,7 +3423,7 @@ function InputVariables({
       });
     }
   }, []);
-  return /* @__PURE__ */ jsxs18(Fragment7, { children: [
+  return /* @__PURE__ */ jsxs18(Fragment4, { children: [
     /* @__PURE__ */ jsx30(Global, { styles: tagifyStyles }),
     /* @__PURE__ */ jsx30(
       Tags,
@@ -3604,7 +3553,7 @@ function variablesToList(variables) {
 }
 
 // src/components/Variables/VariablesList.tsx
-import { Fragment as Fragment8, jsx as jsx31, jsxs as jsxs19 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx31, jsxs as jsxs19 } from "@emotion/react/jsx-runtime";
 function VariablesList() {
   const { variables, dispatch } = useVariables();
   const sorted = variablesToList(variables);
@@ -3625,7 +3574,7 @@ function VariablesList() {
       return result;
     }
   };
-  return /* @__PURE__ */ jsxs19(Fragment8, { children: [
+  return /* @__PURE__ */ jsxs19(Fragment5, { children: [
     /* @__PURE__ */ jsx31(DragDropContext2, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ jsx31(Droppable2, { droppableId: "variables-table", children: (provided) => /* @__PURE__ */ jsxs19(Table, { ...provided.droppableProps, ref: provided.innerRef, children: [
       /* @__PURE__ */ jsx31(TableHead, { children: /* @__PURE__ */ jsxs19(TableRow, { children: [
         /* @__PURE__ */ jsx31(TableCellHead, { children: "Name" }),
@@ -4151,7 +4100,7 @@ function decodeVariablesInUrlEncodedString(string, varValues) {
 }
 
 // src/components/Request/RequestUrl.tsx
-import { Fragment as Fragment9, jsx as jsx39, jsxs as jsxs24 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx39, jsxs as jsxs24 } from "@emotion/react/jsx-runtime";
 function RequestUrl() {
   var _a, _b;
   const { variables } = useVariables();
@@ -4175,7 +4124,7 @@ function RequestUrl() {
         request.baseRequest ? /* @__PURE__ */ jsx39("span", { children: (_b = request.baseRequest) == null ? void 0 : _b.baseUrl }) : null,
         /* @__PURE__ */ jsxs24("span", { css: { fontWeight: request.baseRequest ? "bold" : "inherit" }, children: [
           urlEncodeRequestUrl(request.relativeUrl, variables),
-          mergedParameters.length > 0 ? /* @__PURE__ */ jsxs24(Fragment9, { children: [
+          mergedParameters.length > 0 ? /* @__PURE__ */ jsxs24(Fragment6, { children: [
             "?",
             mergedParameters.map((param, index) => {
               const encoded = urlEncodeRequestParameter(param, variables);
@@ -4377,12 +4326,12 @@ import { LoadingIndicator as LoadingIndicator2, Theme as Theme2 } from "@uniform
 
 // src/hooks/useInitializeUniformMeshSdk.ts
 import { initializeUniformMeshSDK } from "@uniformdev/mesh-sdk";
-import { useEffect as useEffect7, useRef as useRef9, useState as useState9 } from "react";
+import { useEffect as useEffect6, useRef as useRef9, useState as useState9 } from "react";
 var useInitializeUniformMeshSdk = ({ autoResizingDisabled } = {}) => {
   const [error, setError] = useState9();
   const [sdk, setSdk] = useState9();
   const initializationInProgress = useRef9(false);
-  useEffect7(
+  useEffect6(
     () => {
       if (typeof window === "undefined" || sdk) {
         return;