@uniformdev/mesh-sdk-react 18.30.1-alpha.17 → 18.31.1-alpha.22

package/dist/index.d.ts

@@ -766,12 +766,16 @@ type EntrySearchResultItemProps = SelectedItemProps & {
     hideRemoveButton?: boolean;
     /** sets user defined child nodes that are uncontrolled by Uniform */
     children?: ReactNode;
+    /** disable or enable drag and drop functionality
+     * @default false
+     */
+    disableDnD?: boolean;
 };
 /**
  * @description An opinionated result item, best used for selected results
  * @example <EntrySearchResultItem id="my-result" title="title" />
  */
-declare const EntrySearchResultItem: ({ id, title, name, contentType, popoverData, publishStatus, editLinkIcon, editLink, imageUrl, onRemove, createdAt, publishedAt, hideRemoveButton, children, }: EntrySearchResultItemProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const EntrySearchResultItem: ({ id, title, name, contentType, popoverData, publishStatus, editLinkIcon, editLink, imageUrl, onRemove, createdAt, publishedAt, hideRemoveButton, disableDnD, children, }: EntrySearchResultItemProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 type EntrySearchResultItemButtonProps<THtml extends HTMLAttributes<HTMLElement> = HTMLAttributes<HTMLButtonElement>> = {
     /** sets the button or link text value */

package/dist/index.esm.js

@@ -4243,6 +4243,22 @@ var EntrySearchResultItemContainer = css29`
   display: grid;
   grid-template-columns: 1fr auto;
   padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-md);
+  position: relative;
+
+  &:hover {
+    .drag-handle {
+      opacity: 1;
+    }
+  }
+`;
+var EntrySearchDragHandle = css29`
+  border-left: 2px dotted var(--gray-300);
+  border-right: 2px dotted var(--gray-300);
+  position: absolute;
+  inset: var(--spacing-sm) auto var(--spacing-sm) var(--spacing-sm);
+  width: 5px;
+  transition: opacity var(--duration-fast) var(--timing-ease-out);
+  opacity: 0;
 `;
 var EntrySearchResultItemSubtitle = css29`
   color: var(--gray-500);
@@ -4293,6 +4309,7 @@ var EntrySearchResultItem = ({
   createdAt,
   publishedAt,
   hideRemoveButton = false,
+  disableDnD = false,
   children
 }) => {
   const { onSelectItem } = useEntrySearchContext();
@@ -4302,6 +4319,7 @@ var EntrySearchResultItem = ({
     onRemove == null ? void 0 : onRemove();
   };
   return /* @__PURE__ */ jsxs30("div", { css: EntrySearchResultItemContainer, children: [
+    disableDnD ? null : /* @__PURE__ */ jsx50("div", { role: "presentation", className: "drag-handle", css: EntrySearchDragHandle }),
     /* @__PURE__ */ jsx50("div", { children: /* @__PURE__ */ jsxs30("div", { css: EntrySearchContentContainer, children: [
       !imageUrl ? null : /* @__PURE__ */ jsx50("img", { src: imageUrl, alt: `Thumbnail for ${title}`, css: EntrySearchImage }),
       /* @__PURE__ */ jsxs30("div", { children: [
@@ -4421,7 +4439,7 @@ var EntrySearchResultList = ({
   onRemoveAllSelected,
   hideRemoveButton = false,
   additionalButtons,
-  renderResultComponent = (value) => /* @__PURE__ */ jsx52(EntrySearchResultItem, { ...value }),
+  renderResultComponent = (value) => /* @__PURE__ */ jsx52(EntrySearchResultItem, { ...value, disableDnD }),
   disableDnD = false
 }) => {
   const { selectedListItems, onRemoveAllSelectedItems, onSelectItem } = useEntrySearchContext();

package/dist/index.js

@@ -4398,6 +4398,22 @@ var EntrySearchResultItemContainer = import_react44.css`
   display: grid;
   grid-template-columns: 1fr auto;
   padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-md);
+  position: relative;
+
+  &:hover {
+    .drag-handle {
+      opacity: 1;
+    }
+  }
+`;
+var EntrySearchDragHandle = import_react44.css`
+  border-left: 2px dotted var(--gray-300);
+  border-right: 2px dotted var(--gray-300);
+  position: absolute;
+  inset: var(--spacing-sm) auto var(--spacing-sm) var(--spacing-sm);
+  width: 5px;
+  transition: opacity var(--duration-fast) var(--timing-ease-out);
+  opacity: 0;
 `;
 var EntrySearchResultItemSubtitle = import_react44.css`
   color: var(--gray-500);
@@ -4448,6 +4464,7 @@ var EntrySearchResultItem = ({
   createdAt,
   publishedAt,
   hideRemoveButton = false,
+  disableDnD = false,
   children
 }) => {
   const { onSelectItem } = useEntrySearchContext();
@@ -4457,6 +4474,7 @@ var EntrySearchResultItem = ({
     onRemove == null ? void 0 : onRemove();
   };
   return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { css: EntrySearchResultItemContainer, children: [
+    disableDnD ? null : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { role: "presentation", className: "drag-handle", css: EntrySearchDragHandle }),
     /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { css: EntrySearchContentContainer, children: [
       !imageUrl ? null : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("img", { src: imageUrl, alt: `Thumbnail for ${title}`, css: EntrySearchImage }),
       /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { children: [
@@ -4576,7 +4594,7 @@ var EntrySearchResultList = ({
   onRemoveAllSelected,
   hideRemoveButton = false,
   additionalButtons,
-  renderResultComponent = (value) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(EntrySearchResultItem, { ...value }),
+  renderResultComponent = (value) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(EntrySearchResultItem, { ...value, disableDnD }),
   disableDnD = false
 }) => {
   const { selectedListItems, onRemoveAllSelectedItems, onSelectItem } = useEntrySearchContext();

package/dist/index.mjs

@@ -4243,6 +4243,22 @@ var EntrySearchResultItemContainer = css29`
   display: grid;
   grid-template-columns: 1fr auto;
   padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-md);
+  position: relative;
+
+  &:hover {
+    .drag-handle {
+      opacity: 1;
+    }
+  }
+`;
+var EntrySearchDragHandle = css29`
+  border-left: 2px dotted var(--gray-300);
+  border-right: 2px dotted var(--gray-300);
+  position: absolute;
+  inset: var(--spacing-sm) auto var(--spacing-sm) var(--spacing-sm);
+  width: 5px;
+  transition: opacity var(--duration-fast) var(--timing-ease-out);
+  opacity: 0;
 `;
 var EntrySearchResultItemSubtitle = css29`
   color: var(--gray-500);
@@ -4293,6 +4309,7 @@ var EntrySearchResultItem = ({
   createdAt,
   publishedAt,
   hideRemoveButton = false,
+  disableDnD = false,
   children
 }) => {
   const { onSelectItem } = useEntrySearchContext();
@@ -4302,6 +4319,7 @@ var EntrySearchResultItem = ({
     onRemove == null ? void 0 : onRemove();
   };
   return /* @__PURE__ */ jsxs30("div", { css: EntrySearchResultItemContainer, children: [
+    disableDnD ? null : /* @__PURE__ */ jsx50("div", { role: "presentation", className: "drag-handle", css: EntrySearchDragHandle }),
     /* @__PURE__ */ jsx50("div", { children: /* @__PURE__ */ jsxs30("div", { css: EntrySearchContentContainer, children: [
       !imageUrl ? null : /* @__PURE__ */ jsx50("img", { src: imageUrl, alt: `Thumbnail for ${title}`, css: EntrySearchImage }),
       /* @__PURE__ */ jsxs30("div", { children: [
@@ -4421,7 +4439,7 @@ var EntrySearchResultList = ({
   onRemoveAllSelected,
   hideRemoveButton = false,
   additionalButtons,
-  renderResultComponent = (value) => /* @__PURE__ */ jsx52(EntrySearchResultItem, { ...value }),
+  renderResultComponent = (value) => /* @__PURE__ */ jsx52(EntrySearchResultItem, { ...value, disableDnD }),
   disableDnD = false
 }) => {
   const { selectedListItems, onRemoveAllSelectedItems, onSelectItem } = useEntrySearchContext();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/mesh-sdk-react",
-  "version": "18.30.1-alpha.17+2d6d08805",
+  "version": "18.31.1-alpha.22+342a682db",
   "description": "Uniform Mesh Framework SDK for React",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -43,8 +43,8 @@
     "document": "api-extractor run --local"
   },
   "dependencies": {
-    "@uniformdev/design-system": "18.30.1-alpha.17+2d6d08805",
-    "@uniformdev/mesh-sdk": "18.30.1-alpha.17+2d6d08805",
+    "@uniformdev/design-system": "18.31.1-alpha.22+342a682db",
+    "@uniformdev/mesh-sdk": "18.31.1-alpha.22+342a682db",
     "formik": "^2.2.9",
     "react-beautiful-dnd": "13.1.1",
     "react-icons": "4.8.0",
@@ -61,7 +61,7 @@
     "@emotion/babel-preset-css-prop": "11.10.0",
     "@emotion/react": "11.10.5",
     "@svgr/cli": "6.5.1",
-    "@types/react": "18.0.29",
+    "@types/react": "18.0.31",
     "@types/react-beautiful-dnd": "13.1.4",
     "@types/uuid": "9.0.1",
     "react": "18.2.0",
@@ -73,5 +73,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2d6d0880575669784931c6481be92847ac55f141"
+  "gitHead": "342a682dbc05a6b97b4d529b7604daa62f7d1066"
 }