@uniformdev/mesh-sdk-react 19.21.0 → 19.22.1-alpha.8

package/dist/index.d.ts

@@ -766,6 +766,8 @@ type SelectedItemProps<TExtraProps = unknown> = {
     metadata?: Record<string, string>;
     /** allows for child react elements to be nested in the popover */
     popoverData?: ReactNode;
+    /** disable or enable drag and drop functionality */
+    disableDnD?: boolean;
 } & TExtraProps;
 type ItemListProps<TListItemExtraProps = unknown> = {
     items?: Array<SelectedItemProps<TListItemExtraProps>>;

package/dist/index.esm.js

@@ -4548,6 +4548,7 @@ var DataRefreshButton = ({
 
 // src/components/ObjectSearch/ObjectSearchContainer.tsx
 init_emotion_jsx_shim();
+import { css as css28 } from "@emotion/react";
 
 // ../canvas/dist/index.mjs
 init_emotion_jsx_shim();
@@ -5834,7 +5835,19 @@ var ObjectSearchContainer = ({
   const { flatVariables } = useVariables(true);
   const body = /* @__PURE__ */ jsxs29(VerticalRhythm, { children: [
     searchFilters,
-    !resultList ? null : /* @__PURE__ */ jsx49(ScrollableList, { role: "list", children: resultList })
+    !resultList ? null : /* @__PURE__ */ jsx49(
+      ScrollableList,
+      {
+        role: "list",
+        css: css28`
+            > div {
+              transition: max-height var(--duration-slow) var(--timing-ease-out);
+              max-height: ${selectedListItems.length === 0 ? "50vh" : "184px"};
+            }
+          `,
+        children: resultList
+      }
+    )
   ] });
   const handleSelectedVariableChange = (selectedValue) => {
     var _a2;
@@ -5885,8 +5898,8 @@ import { useState as useState13 } from "react";
 
 // src/components/ObjectSearch/styles/ObjectSearchFilterContainer.styles.ts
 init_emotion_jsx_shim();
-import { css as css28 } from "@emotion/react";
-var ObjectSearchFilterContainerLabel = css28`
+import { css as css29 } from "@emotion/react";
+var ObjectSearchFilterContainerLabel = css29`
   align-items: center;
   display: flex;
   font-size: var(--fs-sm);
@@ -5894,14 +5907,14 @@ var ObjectSearchFilterContainerLabel = css28`
   line-height: 1rem;
   margin-bottom: var(--spacing-sm);
 `;
-var ObjectSearchFilterContainer = css28`
+var ObjectSearchFilterContainer = css29`
   display: grid;
   gap: var(--spacing-base);
 `;
-var ObjectSearchFilterDropdownAndTextSearch = css28`
+var ObjectSearchFilterDropdownAndTextSearch = css29`
   grid-template-columns: 0.5fr 1fr;
 `;
-var ObjectSearchFilterGrid = (gridColumns) => css28`
+var ObjectSearchFilterGrid = (gridColumns) => css29`
   display: grid;
   grid-template-columns: ${gridColumns};
   gap: var(--spacing-base);
@@ -5971,26 +5984,22 @@ var ObjectSearchFilterContainer2 = ({ label, children }) => {
 
 // src/components/ObjectSearch/ObjectSearchListItem.tsx
 init_emotion_jsx_shim();
-import { Popover } from "@uniformdev/design-system";
+import { Chip, Popover } from "@uniformdev/design-system";
 
 // src/components/ObjectSearch/styles/ObjectSearchListItem.styles.ts
 init_emotion_jsx_shim();
-import { css as css29 } from "@emotion/react";
+import { css as css30 } from "@emotion/react";
 import { skeletonLoading } from "@uniformdev/design-system";
-var ObjectListItemContainer = css29`
+var ObjectListItemContainer = css30`
   align-items: center;
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-base);
   background: var(--white);
   display: grid;
-  grid-template-columns: 1fr 32px;
+  grid-template-columns: 1fr auto;
   padding: var(--spacing-sm);
-
-  &[hidden] {
-    display: none;
-  }
 `;
-var ObjectListItemLoading = css29`
+var ObjectListItemLoading = css30`
   animation: ${skeletonLoading} 1s linear infinite alternate;
   border-color: transparent;
   min-height: 42px;
@@ -6014,31 +6023,32 @@ var ObjectListItemLoading = css29`
     width: 1rem;
   }
 `;
-var ObjectListItemHeadingGroup = css29`
+var ObjectListItemHeadingGroup = css30`
   align-items: center;
   display: grid;
 `;
-var ObjectListItemTitle = css29`
+var ObjectListItemTitle = css30`
   color: var(--brand-secondary-1);
   display: block;
   font-size: var(--fs-sm);
 `;
-var ObjectListItemSubtitle = css29`
+var ObjectListItemSubtitle = css30`
   color: var(--gray-500);
   display: block;
   font-size: var(--fs-xs);
   line-height: 1;
 `;
-var ObjectListItemInfoContainer = css29`
+var ObjectListItemInfoContainer = css30`
   align-items: center;
   display: flex;
+  gap: var(--spacing-sm);
   justify-content: center;
 `;
-var ObjectListItemControlledContent = css29`
+var ObjectListItemControlledContent = css30`
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ObjectListItemUnControlledContent = css29`
+var ObjectListItemUnControlledContent = css30`
   margin-top: var(--spacing-sm);
   grid-column: 1 / -1;
 `;
@@ -6066,8 +6076,8 @@ var ObjectSearchListItem = ({
     }
     return onSelectItem([selectedItem]);
   };
-  const hideWhenInSelectedList = selectedListItems.some((item) => item.id === id);
-  return /* @__PURE__ */ jsxs32("div", { role: "listitem", hidden: hideWhenInSelectedList, css: ObjectListItemContainer, children: [
+  const selected = selectedListItems.some((item) => item.id === id);
+  return /* @__PURE__ */ jsxs32("div", { role: "listitem", css: ObjectListItemContainer, children: [
     /* @__PURE__ */ jsxs32("div", { role: "button", onClick: handleSelectItem, css: ObjectListItemControlledContent, children: [
       !image ? null : /* @__PURE__ */ jsx52("img", { ...image, loading: (image == null ? void 0 : image.width) && image.height ? "lazy" : "eager" }),
       /* @__PURE__ */ jsxs32("div", { role: "heading", css: ObjectListItemHeadingGroup, children: [
@@ -6075,7 +6085,10 @@ var ObjectSearchListItem = ({
         /* @__PURE__ */ jsx52("span", { css: ObjectListItemTitle, children: title })
       ] })
     ] }),
-    !popoverData ? null : /* @__PURE__ */ jsx52("div", { css: ObjectListItemInfoContainer, children: /* @__PURE__ */ jsx52(Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, children: popoverData }) }),
+    !popoverData ? null : /* @__PURE__ */ jsxs32("div", { css: ObjectListItemInfoContainer, children: [
+      selected ? /* @__PURE__ */ jsx52(Chip, { text: "selected", size: "xs" }) : null,
+      /* @__PURE__ */ jsx52(Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, iconColor: "default", children: popoverData })
+    ] }),
     !children ? null : /* @__PURE__ */ jsx52("div", { css: ObjectListItemUnControlledContent, children })
   ] });
 };
@@ -6093,9 +6106,9 @@ init_emotion_jsx_shim();
 
 // src/components/ObjectSearch/styles/ObjectSearchResultItemButton.styles.ts
 init_emotion_jsx_shim();
-import { css as css30 } from "@emotion/react";
+import { css as css31 } from "@emotion/react";
 import { button as button2 } from "@uniformdev/design-system";
-var ButtonStyles = css30`
+var ButtonStyles = css31`
   ${button2}
   background: transparent;
   border: 1px solid var(--brand-secondary-1);
@@ -6122,7 +6135,7 @@ var ButtonStyles = css30`
     text-decoration: none;
   }
 `;
-var ButtonIcon = css30`
+var ButtonIcon = css31`
   width: 1rem;
   height: 1rem;
 `;
@@ -6152,8 +6165,8 @@ var LinkButton = ({
 
 // src/components/ObjectSearch/styles/ObjectSearchResultItem.styles.ts
 init_emotion_jsx_shim();
-import { css as css31 } from "@emotion/react";
-var ObjectSearchResultItemContainer = css31`
+import { css as css32 } from "@emotion/react";
+var ObjectSearchResultItemContainer = css32`
   align-items: center;
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-base);
@@ -6169,7 +6182,7 @@ var ObjectSearchResultItemContainer = css31`
     }
   }
 `;
-var ObjectSearchDragHandle = css31`
+var ObjectSearchDragHandle = css32`
   border-left: 2px dotted var(--gray-300);
   border-right: 2px dotted var(--gray-300);
   position: absolute;
@@ -6178,35 +6191,35 @@ var ObjectSearchDragHandle = css31`
   transition: opacity var(--duration-fast) var(--timing-ease-out);
   opacity: 0;
 `;
-var ObjectSearchResultItemSubtitle = css31`
+var ObjectSearchResultItemSubtitle = css32`
   color: var(--gray-500);
   display: block;
   font-size: var(--fs-xs);
   line-height: 1;
 `;
-var ObjectSearchResultItemTitle = css31`
+var ObjectSearchResultItemTitle = css32`
   align-items: center;
   color: var(--brand-secondary-1);
   display: flex;
   gap: var(--spacing-xs);
 `;
-var ObjectSearchResultItemTimeStamp = css31`
+var ObjectSearchResultItemTimeStamp = css32`
   color: var(--gray-500);
   font-size: var(--fs-xs);
 `;
-var ObjectSearchAuthorStateGroup = css31`
+var ObjectSearchAuthorStateGroup = css32`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ObjectSearchUpdateGroup = css31`
+var ObjectSearchUpdateGroup = css32`
   display: grid;
 `;
-var ObjectSearchContentContainer = css31`
+var ObjectSearchContentContainer = css32`
   display: flex;
   gap: var(--spacing-base);
 `;
-var ObjectSearchImage = css31`
+var ObjectSearchImage = css32`
   width: 56px;
   object-fit: contain;
 `;
@@ -6276,22 +6289,26 @@ import { DragDropContext as DragDropContext3, Draggable as Draggable3, Droppable
 
 // src/components/ObjectSearch/styles/ObjectSearchResultList.styles.ts
 init_emotion_jsx_shim();
-import { css as css32 } from "@emotion/react";
-var ObjectSearchResultListContainer = css32`
+import { css as css33 } from "@emotion/react";
+var ObjectSearchResultListContainer = css33`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
   justify-content: space-between;
 `;
-var ObjectSearchDragContainer = css32`
+var ObjectSearchDragContainer = css33`
   margin: 0 0 var(--spacing-sm);
 `;
-var ObjectSearchResultListCounterContainer = css32`
+var ObjectSearchContainerDragging = css33`
+  box-shadow: var(--shadow-base);
+  opacity: var(--opacity-50);
+`;
+var ObjectSearchResultListCounterContainer = css33`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ObjectSearchResultListTitle = css32`
+var ObjectSearchResultListTitle = css33`
   font-weight: var(--fw-bold);
   line-height: 1;
 `;
@@ -6304,7 +6321,7 @@ function ObjectSearchResultList({
   onRemoveAllSelected,
   hideRemoveButton = false,
   additionalButtons,
-  renderResultComponent = (value) => /* @__PURE__ */ jsx55(ObjectSearchResultItem, { ...value, disableDnD }),
+  renderResultComponent = (value) => /* @__PURE__ */ jsx55(ObjectSearchResultItem, { ...value }),
   multiSelectId,
   disableDnD = false,
   whenNothingSelected = null
@@ -6347,18 +6364,31 @@ function ObjectSearchResultList({
     ] }),
     !selectedListItems.length ? whenNothingSelected : /* @__PURE__ */ jsx55(DragDropContext3, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ jsx55(Droppable3, { droppableId: multiSelectId != null ? multiSelectId : "canvas-multi-select", children: (provided) => /* @__PURE__ */ jsxs35("div", { ...provided.droppableProps, ref: provided.innerRef, children: [
       selectedListItems.map((item, i2) => {
-        const renderListItem = renderResultComponent(item);
-        return /* @__PURE__ */ jsx55(Draggable3, { draggableId: item.id, index: i2, isDragDisabled: disableDnD, children: (provided2, snapshot) => /* @__PURE__ */ jsx55(
-          "div",
+        const itemValues = selectedListItems.length === 1 ? { ...item, disableDnD: true } : { ...item, disableDnD };
+        const renderListItem = renderResultComponent(itemValues);
+        return /* @__PURE__ */ jsx55(
+          Draggable3,
           {
-            css: ObjectSearchDragContainer,
-            ref: provided2.innerRef,
-            "data-dragging": snapshot.isDragging,
-            ...provided2.draggableProps,
-            ...provided2.dragHandleProps,
-            children: renderListItem
-          }
-        ) }, item.id);
+            draggableId: item.id,
+            index: i2,
+            isDragDisabled: selectedListItems.length === 1 || disableDnD,
+            children: (provided2, snapshot) => /* @__PURE__ */ jsx55(
+              "div",
+              {
+                css: [
+                  ObjectSearchDragContainer,
+                  snapshot.isDragging ? ObjectSearchContainerDragging : void 0
+                ],
+                ref: provided2.innerRef,
+                "data-dragging": snapshot.isDragging,
+                ...provided2.draggableProps,
+                ...provided2.dragHandleProps,
+                children: renderListItem
+              }
+            )
+          },
+          item.id
+        );
       }),
       provided.placeholder
     ] }) }) })

package/dist/index.js

@@ -4676,6 +4676,7 @@ var DataRefreshButton = ({
 
 // src/components/ObjectSearch/ObjectSearchContainer.tsx
 init_emotion_jsx_shim();
+var import_react44 = require("@emotion/react");
 
 // ../canvas/dist/index.mjs
 init_emotion_jsx_shim();
@@ -5955,7 +5956,19 @@ var ObjectSearchContainer = ({
   const { flatVariables } = useVariables(true);
   const body = /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_design_system25.VerticalRhythm, { children: [
     searchFilters,
-    !resultList ? null : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_design_system25.ScrollableList, { role: "list", children: resultList })
+    !resultList ? null : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      import_design_system25.ScrollableList,
+      {
+        role: "list",
+        css: import_react44.css`
+            > div {
+              transition: max-height var(--duration-slow) var(--timing-ease-out);
+              max-height: ${selectedListItems.length === 0 ? "50vh" : "184px"};
+            }
+          `,
+        children: resultList
+      }
+    )
   ] });
   const handleSelectedVariableChange = (selectedValue) => {
     var _a2;
@@ -6002,12 +6015,12 @@ var ObjectSearchContainer = ({
 // src/components/ObjectSearch/ObjectSearchFilter.tsx
 init_emotion_jsx_shim();
 var import_design_system26 = require("@uniformdev/design-system");
-var import_react45 = require("react");
+var import_react46 = require("react");
 
 // src/components/ObjectSearch/styles/ObjectSearchFilterContainer.styles.ts
 init_emotion_jsx_shim();
-var import_react44 = require("@emotion/react");
-var ObjectSearchFilterContainerLabel = import_react44.css`
+var import_react45 = require("@emotion/react");
+var ObjectSearchFilterContainerLabel = import_react45.css`
   align-items: center;
   display: flex;
   font-size: var(--fs-sm);
@@ -6015,14 +6028,14 @@ var ObjectSearchFilterContainerLabel = import_react44.css`
   line-height: 1rem;
   margin-bottom: var(--spacing-sm);
 `;
-var ObjectSearchFilterContainer = import_react44.css`
+var ObjectSearchFilterContainer = import_react45.css`
   display: grid;
   gap: var(--spacing-base);
 `;
-var ObjectSearchFilterDropdownAndTextSearch = import_react44.css`
+var ObjectSearchFilterDropdownAndTextSearch = import_react45.css`
   grid-template-columns: 0.5fr 1fr;
 `;
-var ObjectSearchFilterGrid = (gridColumns) => import_react44.css`
+var ObjectSearchFilterGrid = (gridColumns) => import_react45.css`
   display: grid;
   grid-template-columns: ${gridColumns};
   gap: var(--spacing-base);
@@ -6039,7 +6052,7 @@ var ObjectSearchFilter = ({
   selectOptions
 }) => {
   const { query, onSetQuery } = useObjectSearchContext();
-  const [searchState, setSearchState] = (0, import_react45.useState)({
+  const [searchState, setSearchState] = (0, import_react46.useState)({
     contentType: "",
     keyword: ""
   });
@@ -6096,22 +6109,18 @@ var import_design_system28 = require("@uniformdev/design-system");
 
 // src/components/ObjectSearch/styles/ObjectSearchListItem.styles.ts
 init_emotion_jsx_shim();
-var import_react46 = require("@emotion/react");
+var import_react47 = require("@emotion/react");
 var import_design_system27 = require("@uniformdev/design-system");
-var ObjectListItemContainer = import_react46.css`
+var ObjectListItemContainer = import_react47.css`
   align-items: center;
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-base);
   background: var(--white);
   display: grid;
-  grid-template-columns: 1fr 32px;
+  grid-template-columns: 1fr auto;
   padding: var(--spacing-sm);
-
-  &[hidden] {
-    display: none;
-  }
 `;
-var ObjectListItemLoading = import_react46.css`
+var ObjectListItemLoading = import_react47.css`
   animation: ${import_design_system27.skeletonLoading} 1s linear infinite alternate;
   border-color: transparent;
   min-height: 42px;
@@ -6135,31 +6144,32 @@ var ObjectListItemLoading = import_react46.css`
     width: 1rem;
   }
 `;
-var ObjectListItemHeadingGroup = import_react46.css`
+var ObjectListItemHeadingGroup = import_react47.css`
   align-items: center;
   display: grid;
 `;
-var ObjectListItemTitle = import_react46.css`
+var ObjectListItemTitle = import_react47.css`
   color: var(--brand-secondary-1);
   display: block;
   font-size: var(--fs-sm);
 `;
-var ObjectListItemSubtitle = import_react46.css`
+var ObjectListItemSubtitle = import_react47.css`
   color: var(--gray-500);
   display: block;
   font-size: var(--fs-xs);
   line-height: 1;
 `;
-var ObjectListItemInfoContainer = import_react46.css`
+var ObjectListItemInfoContainer = import_react47.css`
   align-items: center;
   display: flex;
+  gap: var(--spacing-sm);
   justify-content: center;
 `;
-var ObjectListItemControlledContent = import_react46.css`
+var ObjectListItemControlledContent = import_react47.css`
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ObjectListItemUnControlledContent = import_react46.css`
+var ObjectListItemUnControlledContent = import_react47.css`
   margin-top: var(--spacing-sm);
   grid-column: 1 / -1;
 `;
@@ -6187,8 +6197,8 @@ var ObjectSearchListItem = ({
     }
     return onSelectItem([selectedItem]);
   };
-  const hideWhenInSelectedList = selectedListItems.some((item) => item.id === id);
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { role: "listitem", hidden: hideWhenInSelectedList, css: ObjectListItemContainer, children: [
+  const selected = selectedListItems.some((item) => item.id === id);
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { role: "listitem", css: ObjectListItemContainer, children: [
     /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { role: "button", onClick: handleSelectItem, css: ObjectListItemControlledContent, children: [
       !image ? null : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("img", { ...image, loading: (image == null ? void 0 : image.width) && image.height ? "lazy" : "eager" }),
       /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { role: "heading", css: ObjectListItemHeadingGroup, children: [
@@ -6196,7 +6206,10 @@ var ObjectSearchListItem = ({
         /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { css: ObjectListItemTitle, children: title })
       ] })
     ] }),
-    !popoverData ? null : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { css: ObjectListItemInfoContainer, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_design_system28.Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, children: popoverData }) }),
+    !popoverData ? null : /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { css: ObjectListItemInfoContainer, children: [
+      selected ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_design_system28.Chip, { text: "selected", size: "xs" }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_design_system28.Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, iconColor: "default", children: popoverData })
+    ] }),
     !children ? null : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { css: ObjectListItemUnControlledContent, children })
   ] });
 };
@@ -6214,9 +6227,9 @@ init_emotion_jsx_shim();
 
 // src/components/ObjectSearch/styles/ObjectSearchResultItemButton.styles.ts
 init_emotion_jsx_shim();
-var import_react47 = require("@emotion/react");
+var import_react48 = require("@emotion/react");
 var import_design_system29 = require("@uniformdev/design-system");
-var ButtonStyles = import_react47.css`
+var ButtonStyles = import_react48.css`
   ${import_design_system29.button}
   background: transparent;
   border: 1px solid var(--brand-secondary-1);
@@ -6243,7 +6256,7 @@ var ButtonStyles = import_react47.css`
     text-decoration: none;
   }
 `;
-var ButtonIcon = import_react47.css`
+var ButtonIcon = import_react48.css`
   width: 1rem;
   height: 1rem;
 `;
@@ -6273,8 +6286,8 @@ var LinkButton = ({
 
 // src/components/ObjectSearch/styles/ObjectSearchResultItem.styles.ts
 init_emotion_jsx_shim();
-var import_react48 = require("@emotion/react");
-var ObjectSearchResultItemContainer = import_react48.css`
+var import_react49 = require("@emotion/react");
+var ObjectSearchResultItemContainer = import_react49.css`
   align-items: center;
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-base);
@@ -6290,7 +6303,7 @@ var ObjectSearchResultItemContainer = import_react48.css`
     }
   }
 `;
-var ObjectSearchDragHandle = import_react48.css`
+var ObjectSearchDragHandle = import_react49.css`
   border-left: 2px dotted var(--gray-300);
   border-right: 2px dotted var(--gray-300);
   position: absolute;
@@ -6299,35 +6312,35 @@ var ObjectSearchDragHandle = import_react48.css`
   transition: opacity var(--duration-fast) var(--timing-ease-out);
   opacity: 0;
 `;
-var ObjectSearchResultItemSubtitle = import_react48.css`
+var ObjectSearchResultItemSubtitle = import_react49.css`
   color: var(--gray-500);
   display: block;
   font-size: var(--fs-xs);
   line-height: 1;
 `;
-var ObjectSearchResultItemTitle = import_react48.css`
+var ObjectSearchResultItemTitle = import_react49.css`
   align-items: center;
   color: var(--brand-secondary-1);
   display: flex;
   gap: var(--spacing-xs);
 `;
-var ObjectSearchResultItemTimeStamp = import_react48.css`
+var ObjectSearchResultItemTimeStamp = import_react49.css`
   color: var(--gray-500);
   font-size: var(--fs-xs);
 `;
-var ObjectSearchAuthorStateGroup = import_react48.css`
+var ObjectSearchAuthorStateGroup = import_react49.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ObjectSearchUpdateGroup = import_react48.css`
+var ObjectSearchUpdateGroup = import_react49.css`
   display: grid;
 `;
-var ObjectSearchContentContainer = import_react48.css`
+var ObjectSearchContentContainer = import_react49.css`
   display: flex;
   gap: var(--spacing-base);
 `;
-var ObjectSearchImage = import_react48.css`
+var ObjectSearchImage = import_react49.css`
   width: 56px;
   object-fit: contain;
 `;
@@ -6397,22 +6410,26 @@ var import_react_beautiful_dnd3 = require("react-beautiful-dnd");
 
 // src/components/ObjectSearch/styles/ObjectSearchResultList.styles.ts
 init_emotion_jsx_shim();
-var import_react49 = require("@emotion/react");
-var ObjectSearchResultListContainer = import_react49.css`
+var import_react50 = require("@emotion/react");
+var ObjectSearchResultListContainer = import_react50.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
   justify-content: space-between;
 `;
-var ObjectSearchDragContainer = import_react49.css`
+var ObjectSearchDragContainer = import_react50.css`
   margin: 0 0 var(--spacing-sm);
 `;
-var ObjectSearchResultListCounterContainer = import_react49.css`
+var ObjectSearchContainerDragging = import_react50.css`
+  box-shadow: var(--shadow-base);
+  opacity: var(--opacity-50);
+`;
+var ObjectSearchResultListCounterContainer = import_react50.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ObjectSearchResultListTitle = import_react49.css`
+var ObjectSearchResultListTitle = import_react50.css`
   font-weight: var(--fw-bold);
   line-height: 1;
 `;
@@ -6425,7 +6442,7 @@ function ObjectSearchResultList({
   onRemoveAllSelected,
   hideRemoveButton = false,
   additionalButtons,
-  renderResultComponent = (value) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ObjectSearchResultItem, { ...value, disableDnD }),
+  renderResultComponent = (value) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ObjectSearchResultItem, { ...value }),
   multiSelectId,
   disableDnD = false,
   whenNothingSelected = null
@@ -6468,18 +6485,31 @@ function ObjectSearchResultList({
     ] }),
     !selectedListItems.length ? whenNothingSelected : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react_beautiful_dnd3.DragDropContext, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react_beautiful_dnd3.Droppable, { droppableId: multiSelectId != null ? multiSelectId : "canvas-multi-select", children: (provided) => /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { ...provided.droppableProps, ref: provided.innerRef, children: [
       selectedListItems.map((item, i2) => {
-        const renderListItem = renderResultComponent(item);
-        return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react_beautiful_dnd3.Draggable, { draggableId: item.id, index: i2, isDragDisabled: disableDnD, children: (provided2, snapshot) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
-          "div",
+        const itemValues = selectedListItems.length === 1 ? { ...item, disableDnD: true } : { ...item, disableDnD };
+        const renderListItem = renderResultComponent(itemValues);
+        return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+          import_react_beautiful_dnd3.Draggable,
           {
-            css: ObjectSearchDragContainer,
-            ref: provided2.innerRef,
-            "data-dragging": snapshot.isDragging,
-            ...provided2.draggableProps,
-            ...provided2.dragHandleProps,
-            children: renderListItem
-          }
-        ) }, item.id);
+            draggableId: item.id,
+            index: i2,
+            isDragDisabled: selectedListItems.length === 1 || disableDnD,
+            children: (provided2, snapshot) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+              "div",
+              {
+                css: [
+                  ObjectSearchDragContainer,
+                  snapshot.isDragging ? ObjectSearchContainerDragging : void 0
+                ],
+                ref: provided2.innerRef,
+                "data-dragging": snapshot.isDragging,
+                ...provided2.draggableProps,
+                ...provided2.dragHandleProps,
+                children: renderListItem
+              }
+            )
+          },
+          item.id
+        );
       }),
       provided.placeholder
     ] }) }) })
@@ -6489,7 +6519,7 @@ function ObjectSearchResultList({
 // src/components/ObjectSearch/QueryFilter.tsx
 init_emotion_jsx_shim();
 var import_design_system32 = require("@uniformdev/design-system");
-var import_react50 = require("react");
+var import_react51 = require("react");
 var import_jsx_runtime56 = require("@emotion/react/jsx-runtime");
 var QueryFilter = ({
   requireContentType,
@@ -6521,7 +6551,7 @@ var QueryFilter = ({
 }) => {
   var _a, _b, _c, _d;
   const { query, onSetQuery } = useObjectSearchContext();
-  const [queryState, setQueryState] = (0, import_react50.useState)({
+  const [queryState, setQueryState] = (0, import_react51.useState)({
     contentType: "",
     keyword: "",
     count: countValue != null ? countValue : 5,
@@ -6532,7 +6562,7 @@ var QueryFilter = ({
     setQueryState((prev) => ({ ...prev, ...value }));
     onSetQuery({ ...query, ...value });
   };
-  (0, import_react50.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     onSetQuery(queryState);
   }, [onSetQuery, queryState]);
   return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("fieldset", { children: [

package/dist/index.mjs

@@ -4548,6 +4548,7 @@ var DataRefreshButton = ({
 
 // src/components/ObjectSearch/ObjectSearchContainer.tsx
 init_emotion_jsx_shim();
+import { css as css28 } from "@emotion/react";
 
 // ../canvas/dist/index.mjs
 init_emotion_jsx_shim();
@@ -5834,7 +5835,19 @@ var ObjectSearchContainer = ({
   const { flatVariables } = useVariables(true);
   const body = /* @__PURE__ */ jsxs29(VerticalRhythm, { children: [
     searchFilters,
-    !resultList ? null : /* @__PURE__ */ jsx49(ScrollableList, { role: "list", children: resultList })
+    !resultList ? null : /* @__PURE__ */ jsx49(
+      ScrollableList,
+      {
+        role: "list",
+        css: css28`
+            > div {
+              transition: max-height var(--duration-slow) var(--timing-ease-out);
+              max-height: ${selectedListItems.length === 0 ? "50vh" : "184px"};
+            }
+          `,
+        children: resultList
+      }
+    )
   ] });
   const handleSelectedVariableChange = (selectedValue) => {
     var _a2;
@@ -5885,8 +5898,8 @@ import { useState as useState13 } from "react";
 
 // src/components/ObjectSearch/styles/ObjectSearchFilterContainer.styles.ts
 init_emotion_jsx_shim();
-import { css as css28 } from "@emotion/react";
-var ObjectSearchFilterContainerLabel = css28`
+import { css as css29 } from "@emotion/react";
+var ObjectSearchFilterContainerLabel = css29`
   align-items: center;
   display: flex;
   font-size: var(--fs-sm);
@@ -5894,14 +5907,14 @@ var ObjectSearchFilterContainerLabel = css28`
   line-height: 1rem;
   margin-bottom: var(--spacing-sm);
 `;
-var ObjectSearchFilterContainer = css28`
+var ObjectSearchFilterContainer = css29`
   display: grid;
   gap: var(--spacing-base);
 `;
-var ObjectSearchFilterDropdownAndTextSearch = css28`
+var ObjectSearchFilterDropdownAndTextSearch = css29`
   grid-template-columns: 0.5fr 1fr;
 `;
-var ObjectSearchFilterGrid = (gridColumns) => css28`
+var ObjectSearchFilterGrid = (gridColumns) => css29`
   display: grid;
   grid-template-columns: ${gridColumns};
   gap: var(--spacing-base);
@@ -5971,26 +5984,22 @@ var ObjectSearchFilterContainer2 = ({ label, children }) => {
 
 // src/components/ObjectSearch/ObjectSearchListItem.tsx
 init_emotion_jsx_shim();
-import { Popover } from "@uniformdev/design-system";
+import { Chip, Popover } from "@uniformdev/design-system";
 
 // src/components/ObjectSearch/styles/ObjectSearchListItem.styles.ts
 init_emotion_jsx_shim();
-import { css as css29 } from "@emotion/react";
+import { css as css30 } from "@emotion/react";
 import { skeletonLoading } from "@uniformdev/design-system";
-var ObjectListItemContainer = css29`
+var ObjectListItemContainer = css30`
   align-items: center;
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-base);
   background: var(--white);
   display: grid;
-  grid-template-columns: 1fr 32px;
+  grid-template-columns: 1fr auto;
   padding: var(--spacing-sm);
-
-  &[hidden] {
-    display: none;
-  }
 `;
-var ObjectListItemLoading = css29`
+var ObjectListItemLoading = css30`
   animation: ${skeletonLoading} 1s linear infinite alternate;
   border-color: transparent;
   min-height: 42px;
@@ -6014,31 +6023,32 @@ var ObjectListItemLoading = css29`
     width: 1rem;
   }
 `;
-var ObjectListItemHeadingGroup = css29`
+var ObjectListItemHeadingGroup = css30`
   align-items: center;
   display: grid;
 `;
-var ObjectListItemTitle = css29`
+var ObjectListItemTitle = css30`
   color: var(--brand-secondary-1);
   display: block;
   font-size: var(--fs-sm);
 `;
-var ObjectListItemSubtitle = css29`
+var ObjectListItemSubtitle = css30`
   color: var(--gray-500);
   display: block;
   font-size: var(--fs-xs);
   line-height: 1;
 `;
-var ObjectListItemInfoContainer = css29`
+var ObjectListItemInfoContainer = css30`
   align-items: center;
   display: flex;
+  gap: var(--spacing-sm);
   justify-content: center;
 `;
-var ObjectListItemControlledContent = css29`
+var ObjectListItemControlledContent = css30`
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ObjectListItemUnControlledContent = css29`
+var ObjectListItemUnControlledContent = css30`
   margin-top: var(--spacing-sm);
   grid-column: 1 / -1;
 `;
@@ -6066,8 +6076,8 @@ var ObjectSearchListItem = ({
     }
     return onSelectItem([selectedItem]);
   };
-  const hideWhenInSelectedList = selectedListItems.some((item) => item.id === id);
-  return /* @__PURE__ */ jsxs32("div", { role: "listitem", hidden: hideWhenInSelectedList, css: ObjectListItemContainer, children: [
+  const selected = selectedListItems.some((item) => item.id === id);
+  return /* @__PURE__ */ jsxs32("div", { role: "listitem", css: ObjectListItemContainer, children: [
     /* @__PURE__ */ jsxs32("div", { role: "button", onClick: handleSelectItem, css: ObjectListItemControlledContent, children: [
       !image ? null : /* @__PURE__ */ jsx52("img", { ...image, loading: (image == null ? void 0 : image.width) && image.height ? "lazy" : "eager" }),
       /* @__PURE__ */ jsxs32("div", { role: "heading", css: ObjectListItemHeadingGroup, children: [
@@ -6075,7 +6085,10 @@ var ObjectSearchListItem = ({
         /* @__PURE__ */ jsx52("span", { css: ObjectListItemTitle, children: title })
       ] })
     ] }),
-    !popoverData ? null : /* @__PURE__ */ jsx52("div", { css: ObjectListItemInfoContainer, children: /* @__PURE__ */ jsx52(Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, children: popoverData }) }),
+    !popoverData ? null : /* @__PURE__ */ jsxs32("div", { css: ObjectListItemInfoContainer, children: [
+      selected ? /* @__PURE__ */ jsx52(Chip, { text: "selected", size: "xs" }) : null,
+      /* @__PURE__ */ jsx52(Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, iconColor: "default", children: popoverData })
+    ] }),
     !children ? null : /* @__PURE__ */ jsx52("div", { css: ObjectListItemUnControlledContent, children })
   ] });
 };
@@ -6093,9 +6106,9 @@ init_emotion_jsx_shim();
 
 // src/components/ObjectSearch/styles/ObjectSearchResultItemButton.styles.ts
 init_emotion_jsx_shim();
-import { css as css30 } from "@emotion/react";
+import { css as css31 } from "@emotion/react";
 import { button as button2 } from "@uniformdev/design-system";
-var ButtonStyles = css30`
+var ButtonStyles = css31`
   ${button2}
   background: transparent;
   border: 1px solid var(--brand-secondary-1);
@@ -6122,7 +6135,7 @@ var ButtonStyles = css30`
     text-decoration: none;
   }
 `;
-var ButtonIcon = css30`
+var ButtonIcon = css31`
   width: 1rem;
   height: 1rem;
 `;
@@ -6152,8 +6165,8 @@ var LinkButton = ({
 
 // src/components/ObjectSearch/styles/ObjectSearchResultItem.styles.ts
 init_emotion_jsx_shim();
-import { css as css31 } from "@emotion/react";
-var ObjectSearchResultItemContainer = css31`
+import { css as css32 } from "@emotion/react";
+var ObjectSearchResultItemContainer = css32`
   align-items: center;
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-base);
@@ -6169,7 +6182,7 @@ var ObjectSearchResultItemContainer = css31`
     }
   }
 `;
-var ObjectSearchDragHandle = css31`
+var ObjectSearchDragHandle = css32`
   border-left: 2px dotted var(--gray-300);
   border-right: 2px dotted var(--gray-300);
   position: absolute;
@@ -6178,35 +6191,35 @@ var ObjectSearchDragHandle = css31`
   transition: opacity var(--duration-fast) var(--timing-ease-out);
   opacity: 0;
 `;
-var ObjectSearchResultItemSubtitle = css31`
+var ObjectSearchResultItemSubtitle = css32`
   color: var(--gray-500);
   display: block;
   font-size: var(--fs-xs);
   line-height: 1;
 `;
-var ObjectSearchResultItemTitle = css31`
+var ObjectSearchResultItemTitle = css32`
   align-items: center;
   color: var(--brand-secondary-1);
   display: flex;
   gap: var(--spacing-xs);
 `;
-var ObjectSearchResultItemTimeStamp = css31`
+var ObjectSearchResultItemTimeStamp = css32`
   color: var(--gray-500);
   font-size: var(--fs-xs);
 `;
-var ObjectSearchAuthorStateGroup = css31`
+var ObjectSearchAuthorStateGroup = css32`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ObjectSearchUpdateGroup = css31`
+var ObjectSearchUpdateGroup = css32`
   display: grid;
 `;
-var ObjectSearchContentContainer = css31`
+var ObjectSearchContentContainer = css32`
   display: flex;
   gap: var(--spacing-base);
 `;
-var ObjectSearchImage = css31`
+var ObjectSearchImage = css32`
   width: 56px;
   object-fit: contain;
 `;
@@ -6276,22 +6289,26 @@ import { DragDropContext as DragDropContext3, Draggable as Draggable3, Droppable
 
 // src/components/ObjectSearch/styles/ObjectSearchResultList.styles.ts
 init_emotion_jsx_shim();
-import { css as css32 } from "@emotion/react";
-var ObjectSearchResultListContainer = css32`
+import { css as css33 } from "@emotion/react";
+var ObjectSearchResultListContainer = css33`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
   justify-content: space-between;
 `;
-var ObjectSearchDragContainer = css32`
+var ObjectSearchDragContainer = css33`
   margin: 0 0 var(--spacing-sm);
 `;
-var ObjectSearchResultListCounterContainer = css32`
+var ObjectSearchContainerDragging = css33`
+  box-shadow: var(--shadow-base);
+  opacity: var(--opacity-50);
+`;
+var ObjectSearchResultListCounterContainer = css33`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ObjectSearchResultListTitle = css32`
+var ObjectSearchResultListTitle = css33`
   font-weight: var(--fw-bold);
   line-height: 1;
 `;
@@ -6304,7 +6321,7 @@ function ObjectSearchResultList({
   onRemoveAllSelected,
   hideRemoveButton = false,
   additionalButtons,
-  renderResultComponent = (value) => /* @__PURE__ */ jsx55(ObjectSearchResultItem, { ...value, disableDnD }),
+  renderResultComponent = (value) => /* @__PURE__ */ jsx55(ObjectSearchResultItem, { ...value }),
   multiSelectId,
   disableDnD = false,
   whenNothingSelected = null
@@ -6347,18 +6364,31 @@ function ObjectSearchResultList({
     ] }),
     !selectedListItems.length ? whenNothingSelected : /* @__PURE__ */ jsx55(DragDropContext3, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ jsx55(Droppable3, { droppableId: multiSelectId != null ? multiSelectId : "canvas-multi-select", children: (provided) => /* @__PURE__ */ jsxs35("div", { ...provided.droppableProps, ref: provided.innerRef, children: [
       selectedListItems.map((item, i2) => {
-        const renderListItem = renderResultComponent(item);
-        return /* @__PURE__ */ jsx55(Draggable3, { draggableId: item.id, index: i2, isDragDisabled: disableDnD, children: (provided2, snapshot) => /* @__PURE__ */ jsx55(
-          "div",
+        const itemValues = selectedListItems.length === 1 ? { ...item, disableDnD: true } : { ...item, disableDnD };
+        const renderListItem = renderResultComponent(itemValues);
+        return /* @__PURE__ */ jsx55(
+          Draggable3,
           {
-            css: ObjectSearchDragContainer,
-            ref: provided2.innerRef,
-            "data-dragging": snapshot.isDragging,
-            ...provided2.draggableProps,
-            ...provided2.dragHandleProps,
-            children: renderListItem
-          }
-        ) }, item.id);
+            draggableId: item.id,
+            index: i2,
+            isDragDisabled: selectedListItems.length === 1 || disableDnD,
+            children: (provided2, snapshot) => /* @__PURE__ */ jsx55(
+              "div",
+              {
+                css: [
+                  ObjectSearchDragContainer,
+                  snapshot.isDragging ? ObjectSearchContainerDragging : void 0
+                ],
+                ref: provided2.innerRef,
+                "data-dragging": snapshot.isDragging,
+                ...provided2.draggableProps,
+                ...provided2.dragHandleProps,
+                children: renderListItem
+              }
+            )
+          },
+          item.id
+        );
       }),
       provided.placeholder
     ] }) }) })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/mesh-sdk-react",
-  "version": "19.21.0",
+  "version": "19.22.1-alpha.8+a8f730b12",
   "description": "Uniform Mesh Framework SDK for React",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -44,8 +44,8 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.0.1",
-    "@uniformdev/design-system": "19.21.0",
-    "@uniformdev/mesh-sdk": "19.21.0",
+    "@uniformdev/design-system": "19.22.1-alpha.8+a8f730b12",
+    "@uniformdev/mesh-sdk": "19.22.1-alpha.8+a8f730b12",
     "mitt": "^3.0.0",
     "react-beautiful-dnd": "13.1.1",
     "react-hook-form": "^7.43.9",
@@ -77,5 +77,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3db4c0f1c775a5cf9677c6df294322cfbf79611e"
+  "gitHead": "a8f730b12035a4d7c2e6a704d3777ff12df52ffc"
 }