@uniformdev/mesh-sdk-react 19.87.0 → 19.88.1-alpha.7

package/dist/index.mjs

@@ -2654,13 +2654,14 @@ function useConnectedDataAsVariables(connectedData) {
 }
 
 // src/hooks/useDynamicInputsAsVariables.tsx
+import { LOCALE_DYNAMIC_INPUT_NAME } from "@uniformdev/canvas";
 import { useMemo as useMemo4 } from "react";
 import { Fragment as Fragment4, jsx as jsx26 } from "@emotion/react/jsx-runtime";
 function useDynamicInputsAsVariables(dynamicInputs) {
   return useMemo4(() => {
     const result = Object.entries(dynamicInputs).reduce(
       (acc, [name, input3]) => {
-        const source = `from ${input3.type === "path" ? "URL path" : "query string"}`;
+        const source = `from ${name === LOCALE_DYNAMIC_INPUT_NAME ? "current locale" : input3.type === "path" ? "URL path" : "query string"}`;
         acc[name] = {
           readOnly: true,
           type: input3.type,
@@ -2944,6 +2945,7 @@ function VariableChip({
   tooltip,
   reference,
   onClick,
+  clickToEdit,
   isFresh,
   selected,
   disabled
@@ -2951,7 +2953,7 @@ function VariableChip({
   const hasClickEvent = !!onClick;
   const referenceIsValidFr = isFresh ? true : referenceIsValid;
   const Wrapper = referenceIsValidFr === "info" ? InfoVariableReference : referenceIsValidFr ? Fragment5 : UndefinedVariableReference;
-  const extraTitle = !referenceIsValidFr ? `${reference} is not defined.` : hasClickEvent ? "Click to edit" : void 0;
+  const extraTitle = !referenceIsValidFr ? `${reference} is not defined.` : hasClickEvent && clickToEdit ? "Click to edit" : void 0;
   return /* @__PURE__ */ jsx29(
     MultilineChip,
     {
@@ -3968,6 +3970,7 @@ function VariableNodeComponent({
       displayName: state.isLoading ? /* @__PURE__ */ jsx33(LoadingIndicator2, { size: "sm" }) : state.displayName,
       selected: isSelected,
       disabled: readOnly,
+      clickToEdit: state.hasClickEvent,
       onClick: state.hasClickEvent ? () => {
         setSelected(!isSelected);
         editor.dispatchCommand(EDIT_VARIABLE_COMMAND, {
@@ -4459,6 +4462,7 @@ function VariablesComposer(props) {
     /* @__PURE__ */ jsx37(
       OnChangePlugin,
       {
+        ignoreSelectionChange: true,
         onChange: (state) => {
           editorState.current = state;
           if (updateTimeout.current) {
@@ -6140,9 +6144,9 @@ var DataRefreshButton = ({
 };
 
 // src/components/ObjectSearch/ObjectSearchContainer.tsx
-import { css as css31 } from "@emotion/react";
+import { css as css32 } from "@emotion/react";
 import { bindVariables } from "@uniformdev/canvas";
-import { Container, IconsProvider, ScrollableList, VerticalRhythm as VerticalRhythm2 } from "@uniformdev/design-system";
+import { Callout as Callout5, Container, IconsProvider, ScrollableList, VerticalRhythm as VerticalRhythm2 } from "@uniformdev/design-system";
 
 // src/components/ObjectSearch/hooks/ObjectSearchContext.tsx
 import { bindVariablesToObject as bindVariablesToObject2 } from "@uniformdev/canvas";
@@ -6167,9 +6171,14 @@ var ObjectSearchContext = createContext5({
   },
   selectedListItems: [],
   onRemoveAllSelectedItems: () => {
-  }
+  },
+  isMulti: false
 });
-var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
+var ObjectSearchProvider = ({
+  currentlySelectedItems,
+  isMulti = false,
+  children
+}) => {
   const [query, setQuery] = useState15({
     contentType: "",
     keyword: ""
@@ -6223,6 +6232,7 @@ var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
       selectedListItems: selectedItems,
       onRemoveAllSelectedItems,
       list,
+      isMulti,
       onSetList
     }),
     [
@@ -6233,6 +6243,7 @@ var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
       selectedItems,
       onRemoveAllSelectedItems,
       list,
+      isMulti,
       onSetList
     ]
   );
@@ -6253,8 +6264,148 @@ function bindQuery(query, inputs) {
   return result;
 }
 
-// src/components/ObjectSearch/ObjectSearchContainer.tsx
+// src/components/ObjectSearch/ObjectSearchListItem.tsx
+import { Chip, Popover } from "@uniformdev/design-system";
+
+// src/components/ObjectSearch/styles/ObjectSearchListItem.styles.ts
+import { css as css31 } from "@emotion/react";
+import { skeletonLoading } from "@uniformdev/design-system";
+var ObjectListItemContainer = css31`
+  align-items: center;
+  border: 1px solid var(--gray-300);
+  border-radius: var(--rounded-base);
+  background: var(--white);
+  display: grid;
+  grid-template-columns: 1fr auto;
+  padding: var(--spacing-sm);
+`;
+var ObjectListItemContainerDisabled = css31`
+  opacity: var(--opacity-50);
+  pointer-events: none;
+`;
+var ObjectListItemLoading = css31`
+  animation: ${skeletonLoading} 1s linear infinite alternate;
+  border-color: transparent;
+  min-height: 42px;
+  position: relative;
+
+  &:before,
+  &:after {
+    background: var(--gray-200);
+    content: '';
+    display: block;
+    height: 1rem;
+  }
+
+  &:before {
+    border-radius: var(--rounded-base);
+    width: 10rem;
+  }
+
+  &:after {
+    border-radius: var(--rounded-full);
+    width: 1rem;
+  }
+`;
+var ObjectListItemHeadingGroup = css31`
+  align-items: center;
+  display: grid;
+`;
+var ObjectListItemThumbnail = css31`
+  width: 30px;
+  object-fit: contain;
+`;
+var ObjectListItemTitle = css31`
+  color: var(--brand-secondary-1);
+  display: block;
+  font-size: var(--fs-sm);
+`;
+var ObjectListItemSubtitle = css31`
+  color: var(--gray-500);
+  display: block;
+  font-size: var(--fs-xs);
+  line-height: 1;
+`;
+var ObjectListItemInfoContainer = css31`
+  align-items: center;
+  display: flex;
+  gap: var(--spacing-sm);
+  justify-content: center;
+`;
+var ObjectListItemControlledContent = css31`
+  display: flex;
+  gap: var(--spacing-sm);
+`;
+var ObjectListItemUnControlledContent = css31`
+  margin-top: var(--spacing-sm);
+  grid-column: 1 / -1;
+`;
+
+// src/components/ObjectSearch/ObjectSearchListItem.tsx
 import { jsx as jsx59, jsxs as jsxs34 } from "@emotion/react/jsx-runtime";
+var ObjectSearchListItem = ({
+  id,
+  title,
+  contentType,
+  image,
+  imageUrl,
+  popoverData,
+  onSelect,
+  isMulti,
+  disabled,
+  children
+}) => {
+  const { onSelectItem, selectedListItems, isMulti: globalIsMulti } = useObjectSearchContext();
+  const formatedContentType = Array.isArray(contentType) ? contentType.join(", ") : contentType;
+  const handleSelectItem = () => {
+    var _a;
+    const extraData = (_a = onSelect == null ? void 0 : onSelect()) != null ? _a : {};
+    const selectedItem = { id, title, contentType, imageUrl, image, popoverData, ...extraData };
+    if (isMulti === true || globalIsMulti) {
+      return onSelectItem(selectedItem);
+    }
+    return onSelectItem([selectedItem]);
+  };
+  const selected = selectedListItems.some((item) => item.id === id);
+  return /* @__PURE__ */ jsxs34(
+    "div",
+    {
+      role: "listitem",
+      css: [ObjectListItemContainer, disabled ? ObjectListItemContainerDisabled : void 0],
+      "data-testid": "list-item",
+      children: [
+        /* @__PURE__ */ jsxs34(
+          "div",
+          {
+            role: "button",
+            onClick: handleSelectItem,
+            css: ObjectListItemControlledContent,
+            "aria-disabled": disabled,
+            children: [
+              !imageUrl ? null : /* @__PURE__ */ jsx59("img", { src: imageUrl, alt: `Thumbnail for ${title}`, css: ObjectListItemThumbnail }),
+              !image || imageUrl ? null : /* @__PURE__ */ jsx59("img", { ...image, loading: (image == null ? void 0 : image.width) && image.height ? "lazy" : "eager" }),
+              /* @__PURE__ */ jsxs34("div", { role: "heading", css: ObjectListItemHeadingGroup, children: [
+                !contentType ? null : /* @__PURE__ */ jsx59("span", { css: ObjectListItemSubtitle, children: formatedContentType }),
+                /* @__PURE__ */ jsx59("span", { css: ObjectListItemTitle, "data-testid": "title", children: title })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs34("div", { css: ObjectListItemInfoContainer, children: [
+          selected ? /* @__PURE__ */ jsx59(Chip, { text: "selected", size: "xs" }) : null,
+          !popoverData ? null : /* @__PURE__ */ jsx59(Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, iconColor: "default", children: popoverData })
+        ] }),
+        !children ? null : /* @__PURE__ */ jsx59("div", { css: ObjectListItemUnControlledContent, children })
+      ]
+    }
+  );
+};
+var ObjectSearchListItemLoadingSkeleton = () => {
+  return /* @__PURE__ */ jsx59("div", { role: "presentation", css: [ObjectListItemContainer, ObjectListItemLoading] });
+};
+
+// src/components/ObjectSearch/ObjectSearchContainer.tsx
+import { jsx as jsx60, jsxs as jsxs35 } from "@emotion/react/jsx-runtime";
 var ObjectSearchContainer = ({
   label,
   enableDynamicInputToResultId,
@@ -6266,19 +6417,20 @@ var ObjectSearchContainer = ({
   const { onSelectItem, selectedListItems, list } = useObjectSearchContext();
   const { flatVariables } = useVariables(true);
   const inputValue = (_b = (_a = selectedListItems == null ? void 0 : selectedListItems[0]) == null ? void 0 : _a.id) != null ? _b : "";
-  const body = /* @__PURE__ */ jsxs34(VerticalRhythm2, { children: [
+  const listItems = resultList != null ? resultList : /* @__PURE__ */ jsx60(DefaultResultList, {});
+  const body = /* @__PURE__ */ jsxs35(VerticalRhythm2, { children: [
     searchFilters,
-    !resultList ? null : /* @__PURE__ */ jsx59(
+    /* @__PURE__ */ jsx60(
       ScrollableList,
       {
         role: "list",
-        css: css31`
-            > div {
-              transition: max-height var(--duration-slow) var(--timing-ease-out);
-              max-height: ${selectedListItems.length === 0 ? "50vh" : "184px"};
-            }
-          `,
-        children: resultList
+        css: css32`
+          > div {
+            transition: max-height var(--duration-slow) var(--timing-ease-out);
+            max-height: ${selectedListItems.length === 0 ? "50vh" : "184px"};
+          }
+        `,
+        children: listItems
       }
     )
   ] });
@@ -6309,8 +6461,8 @@ var ObjectSearchContainer = ({
       }
     ]);
   };
-  return /* @__PURE__ */ jsx59(IconsProvider, { children: /* @__PURE__ */ jsxs34(VerticalRhythm2, { children: [
-    /* @__PURE__ */ jsx59(Container, { backgroundColor: "gray-50", padding: "var(--spacing-base)", border: true, children: label ? /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsx60(IconsProvider, { children: /* @__PURE__ */ jsxs35(VerticalRhythm2, { children: [
+    /* @__PURE__ */ jsx60(Container, { backgroundColor: "gray-50", padding: "var(--spacing-base)", border: true, children: label ? /* @__PURE__ */ jsx60(
       InputVariables,
       {
         label,
@@ -6328,14 +6480,25 @@ var ObjectSearchContainer = ({
     children
   ] }) });
 };
+var DefaultResultList = () => {
+  var _a;
+  const { list } = useObjectSearchContext();
+  if (!list.items) {
+    return Array.from(Array(5).keys()).map((i) => /* @__PURE__ */ jsx60(ObjectSearchListItemLoadingSkeleton, {}, i));
+  }
+  if (list.items.length === 0) {
+    return /* @__PURE__ */ jsx60(Callout5, { type: "info", children: "No results were found" });
+  }
+  return (_a = list.items) == null ? void 0 : _a.map((item) => /* @__PURE__ */ jsx60(ObjectSearchListItem, { ...item }, item.id));
+};
 
 // src/components/ObjectSearch/ObjectSearchFilter.tsx
 import { InputKeywordSearch as InputKeywordSearch2, InputSelect as InputSelect6 } from "@uniformdev/design-system";
 import { useMemo as useMemo15, useState as useState16 } from "react";
 
 // src/components/ObjectSearch/styles/ObjectSearchFilterContainer.styles.ts
-import { css as css32 } from "@emotion/react";
-var ObjectSearchFilterContainerLabel = css32`
+import { css as css33 } from "@emotion/react";
+var ObjectSearchFilterContainerLabel = css33`
   align-items: center;
   display: flex;
   font-size: var(--fs-sm);
@@ -6343,18 +6506,18 @@ var ObjectSearchFilterContainerLabel = css32`
   line-height: 1rem;
   margin-bottom: var(--spacing-sm);
 `;
-var ObjectSearchFilterContainer = css32`
+var ObjectSearchFilterContainer = css33`
   display: grid;
   gap: var(--spacing-base);
 `;
-var ObjectSearchFilterGrid = (gridColumns) => css32`
+var ObjectSearchFilterGrid = (gridColumns) => css33`
   display: grid;
   grid-template-columns: ${gridColumns};
   gap: var(--spacing-base);
 `;
 
 // src/components/ObjectSearch/ObjectSearchFilter.tsx
-import { jsx as jsx60, jsxs as jsxs35 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs36 } from "@emotion/react/jsx-runtime";
 var ObjectSearchFilter = ({
   requireContentType,
   typeSelectorAllTypesOptionText = "All content types",
@@ -6387,7 +6550,7 @@ var ObjectSearchFilter = ({
     ];
   }, [requireContentType, typeSelectorAllTypesOptionText, selectOptions]);
   const shouldRenderSelect = memoizedSelectOptions.length > 0;
-  return /* @__PURE__ */ jsxs35(
+  return /* @__PURE__ */ jsxs36(
     "fieldset",
     {
       css: [
@@ -6395,7 +6558,7 @@ var ObjectSearchFilter = ({
         ObjectSearchFilterGrid(shouldRenderSelect ? "1fr 2fr" : "1fr")
       ],
       children: [
-        memoizedSelectOptions.length ? /* @__PURE__ */ jsx60(
+        memoizedSelectOptions.length ? /* @__PURE__ */ jsx61(
           InputSelect6,
           {
             label: selectLabel,
@@ -6405,7 +6568,7 @@ var ObjectSearchFilter = ({
             value: query.contentType
           }
         ) : null,
-        /* @__PURE__ */ jsx60(
+        /* @__PURE__ */ jsx61(
           InputKeywordSearch2,
           {
             inputFieldName: searchInputName,
@@ -6422,154 +6585,14 @@ var ObjectSearchFilter = ({
 };
 
 // src/components/ObjectSearch/ObjectSearchFilterContainer.tsx
-import { jsx as jsx61, jsxs as jsxs36 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs37 } from "@emotion/react/jsx-runtime";
 var ObjectSearchFilterContainer2 = ({ label, children }) => {
-  return /* @__PURE__ */ jsxs36("div", { children: [
-    label ? /* @__PURE__ */ jsx61("span", { css: ObjectSearchFilterContainerLabel, children: label }) : null,
-    /* @__PURE__ */ jsx61("div", { css: ObjectSearchFilterContainer, children })
+  return /* @__PURE__ */ jsxs37("div", { children: [
+    label ? /* @__PURE__ */ jsx62("span", { css: ObjectSearchFilterContainerLabel, children: label }) : null,
+    /* @__PURE__ */ jsx62("div", { css: ObjectSearchFilterContainer, children })
   ] });
 };
 
-// src/components/ObjectSearch/ObjectSearchListItem.tsx
-import { Chip, Popover } from "@uniformdev/design-system";
-
-// src/components/ObjectSearch/styles/ObjectSearchListItem.styles.ts
-import { css as css33 } from "@emotion/react";
-import { skeletonLoading } from "@uniformdev/design-system";
-var ObjectListItemContainer = css33`
-  align-items: center;
-  border: 1px solid var(--gray-300);
-  border-radius: var(--rounded-base);
-  background: var(--white);
-  display: grid;
-  grid-template-columns: 1fr auto;
-  padding: var(--spacing-sm);
-`;
-var ObjectListItemContainerDisabled = css33`
-  opacity: var(--opacity-50);
-  pointer-events: none;
-`;
-var ObjectListItemLoading = css33`
-  animation: ${skeletonLoading} 1s linear infinite alternate;
-  border-color: transparent;
-  min-height: 42px;
-  position: relative;
-
-  &:before,
-  &:after {
-    background: var(--gray-200);
-    content: '';
-    display: block;
-    height: 1rem;
-  }
-
-  &:before {
-    border-radius: var(--rounded-base);
-    width: 10rem;
-  }
-
-  &:after {
-    border-radius: var(--rounded-full);
-    width: 1rem;
-  }
-`;
-var ObjectListItemHeadingGroup = css33`
-  align-items: center;
-  display: grid;
-`;
-var ObjectListItemThumbnail = css33`
-  width: 30px;
-  object-fit: contain;
-`;
-var ObjectListItemTitle = css33`
-  color: var(--brand-secondary-1);
-  display: block;
-  font-size: var(--fs-sm);
-`;
-var ObjectListItemSubtitle = css33`
-  color: var(--gray-500);
-  display: block;
-  font-size: var(--fs-xs);
-  line-height: 1;
-`;
-var ObjectListItemInfoContainer = css33`
-  align-items: center;
-  display: flex;
-  gap: var(--spacing-sm);
-  justify-content: center;
-`;
-var ObjectListItemControlledContent = css33`
-  display: flex;
-  gap: var(--spacing-sm);
-`;
-var ObjectListItemUnControlledContent = css33`
-  margin-top: var(--spacing-sm);
-  grid-column: 1 / -1;
-`;
-
-// src/components/ObjectSearch/ObjectSearchListItem.tsx
-import { jsx as jsx62, jsxs as jsxs37 } from "@emotion/react/jsx-runtime";
-var ObjectSearchListItem = ({
-  id,
-  title,
-  contentType,
-  image,
-  imageUrl,
-  popoverData,
-  onSelect,
-  isMulti = false,
-  disabled,
-  children
-}) => {
-  const { onSelectItem, selectedListItems } = useObjectSearchContext();
-  const formatedContentType = Array.isArray(contentType) ? contentType.join(", ") : contentType;
-  const handleSelectItem = () => {
-    var _a;
-    const extraData = (_a = onSelect == null ? void 0 : onSelect()) != null ? _a : {};
-    const selectedItem = { id, title, contentType, imageUrl, image, popoverData, ...extraData };
-    if (isMulti) {
-      return onSelectItem(selectedItem);
-    }
-    return onSelectItem([selectedItem]);
-  };
-  const selected = selectedListItems.some((item) => item.id === id);
-  return /* @__PURE__ */ jsxs37(
-    "div",
-    {
-      role: "listitem",
-      css: [ObjectListItemContainer, disabled ? ObjectListItemContainerDisabled : void 0],
-      "data-testid": "list-item",
-      children: [
-        /* @__PURE__ */ jsxs37(
-          "div",
-          {
-            role: "button",
-            onClick: handleSelectItem,
-            css: ObjectListItemControlledContent,
-            "aria-disabled": disabled,
-            children: [
-              !imageUrl ? null : /* @__PURE__ */ jsx62("img", { src: imageUrl, alt: `Thumbnail for ${title}`, css: ObjectListItemThumbnail }),
-              !image || imageUrl ? null : /* @__PURE__ */ jsx62("img", { ...image, loading: (image == null ? void 0 : image.width) && image.height ? "lazy" : "eager" }),
-              /* @__PURE__ */ jsxs37("div", { role: "heading", css: ObjectListItemHeadingGroup, children: [
-                !contentType ? null : /* @__PURE__ */ jsx62("span", { css: ObjectListItemSubtitle, children: formatedContentType }),
-                /* @__PURE__ */ jsx62("span", { css: ObjectListItemTitle, "data-testid": "title", children: title })
-              ] })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs37("div", { css: ObjectListItemInfoContainer, children: [
-          selected ? /* @__PURE__ */ jsx62(Chip, { text: "selected", size: "xs" }) : null,
-          !popoverData ? null : /* @__PURE__ */ jsx62(Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, iconColor: "default", children: popoverData })
-        ] }),
-        !children ? null : /* @__PURE__ */ jsx62("div", { css: ObjectListItemUnControlledContent, children })
-      ]
-    }
-  );
-};
-var ObjectSearchListItemLoadingSkeleton = () => {
-  return /* @__PURE__ */ jsx62("div", { role: "presentation", css: [ObjectListItemContainer, ObjectListItemLoading] });
-};
-
 // src/components/ObjectSearch/ObjectSearchResultItem.tsx
 import { Badge, Button as Button4, Popover as Popover2 } from "@uniformdev/design-system";
 import { format as timeagoFormat } from "timeago.js";
@@ -7113,7 +7136,7 @@ function createLocationValidator(setValue, validate) {
 import {
   AddListButton as AddListButton2,
   Button as Button6,
-  Callout as Callout5,
+  Callout as Callout6,
   DrawerContent,
   Heading,
   Input as Input6,
@@ -7152,7 +7175,7 @@ export {
   $isVariableNode,
   AddListButton2 as AddListButton,
   Button6 as Button,
-  Callout5 as Callout,
+  Callout6 as Callout,
   ControlledValuePlugin,
   DISCONNECT_VARIABLE_COMMAND,
   DamSelectedItem,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/mesh-sdk-react",
-  "version": "19.87.0",
+  "version": "19.88.1-alpha.7+69b3ccba4",
   "description": "Uniform Mesh Framework SDK for React",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -50,9 +50,9 @@
     "@lexical/selection": "^0.12.0",
     "@lexical/utils": "^0.12.0",
     "@react-icons/all-files": "https://github.com/react-icons/react-icons/releases/download/v4.10.1/react-icons-all-files-4.10.1.tgz",
-    "@uniformdev/canvas": "19.87.0",
-    "@uniformdev/design-system": "19.87.0",
-    "@uniformdev/mesh-sdk": "19.87.0",
+    "@uniformdev/canvas": "19.88.1-alpha.7+69b3ccba4",
+    "@uniformdev/design-system": "19.88.1-alpha.7+69b3ccba4",
+    "@uniformdev/mesh-sdk": "19.88.1-alpha.7+69b3ccba4",
     "dequal": "^2.0.3",
     "lexical": "^0.12.0",
     "mitt": "^3.0.0",
@@ -86,5 +86,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "596b9c4afbabb8579dd0e6c80690df135d6c55fc"
+  "gitHead": "69b3ccba4050c4ff412c4f226f54a36d74cf9a39"
 }