@uniformdev/mesh-sdk-react 18.27.1-alpha.23 → 18.27.1-alpha.25

package/dist/index.d.ts

@@ -559,15 +559,17 @@ type DataRefreshButtonProps = HTMLAttributes<HTMLButtonElement> & {
     buttonText: string;
     /** shows or hides the loading indicator when retrieving data */
     isLoading: boolean;
+    /** sets the onClick function */
+    onRefreshData: () => void;
 };
 /** @example <DataRefreshButton buttonText="my button" isLoading /> */
-declare const DataRefreshButton: ({ buttonText, isLoading, ...props }: DataRefreshButtonProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const DataRefreshButton: ({ buttonText, isLoading, onRefreshData, ...props }: DataRefreshButtonProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 type EntrySearchContainerProps = {
     /** a child node that places components within the search location */
     searchFilters: ReactNode;
     /** a child node that places components within a scrollable list location */
-    resultList: ReactNode;
+    resultList?: ReactNode;
     /** allows any child element */
     children?: ReactNode;
     /** function for the save action */
@@ -612,10 +614,92 @@ type EntrySearchFilterContainerProps = {
 };
 declare const EntrySearchFilterContainer: ({ label, children }: EntrySearchFilterContainerProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
-type EntrySearchListItemProps = {
+type StatusTypes = 'published' | 'modified' | 'draft' | 'unpublished';
+type PublishStatusProps = {
+    status: StatusTypes;
+};
+declare const PublishStatus: ({ status }: PublishStatusProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+
+type SearchQueryProps = {
+    /** sets the content type in the search context */
+    contentType: string | undefined;
+    /** sets the keyword search in the search context */
+    keywordSearch?: string;
+};
+type SelectedItemProps = {
+    /** sets the id value */
     id: string;
+    /** sets the title value */
     title: string;
-    subTitle?: string | string[];
+    /** sets the name valu, sometimes used for products */
+    name?: string;
+    /** sets the subtitle value */
+    subtitle?: string;
+    /** sets the content type value */
+    contentType?: string;
+    /** sets the created date value using TimeAgo to transform the date */
+    createdAt?: TDate;
+    /** sets the image src */
+    imageUrl?: string;
+    /** sets the link icon */
+    editLinkIcon?: string | React.ComponentType<{
+        className?: string;
+    }>;
+    /** sets the link href value to an external source */
+    editLink?: string;
+    /** sets the publish status */
+    publishStatus?: StatusTypes;
+    /** sets any additional meta data */
+    metadata?: Record<string, string>;
+    /** allows for child react elements to be nested in the popover */
+    popoverData?: ReactNode;
+};
+type ItemsProp = Array<SelectedItemProps & Record<string, unknown>>;
+type ItemListProps<TList extends ItemsProp = ItemsProp> = {
+    items?: TList;
+    [key: string]: unknown;
+};
+type EntrySearchContextProps = {
+    /** function that updates / sets the search query state */
+    onSetQuery: (value: SearchQueryProps) => void;
+    /** current search query state */
+    query: SearchQueryProps;
+    /** function that sets the selected items to state */
+    onSelectItem: (selectedResult: any) => void;
+    /** function that clears all selected items from state */
+    onRemoveAllSelectedItems: () => void;
+    /** current selected items in state */
+    selectedListItems: Array<SelectedItemProps>;
+    /** current list of results in state */
+    list: ItemListProps;
+    /** function that sets the list of items to state */
+    onSetList: (value: ItemListProps) => void;
+};
+declare const EntrySearchContext: React$1.Context<EntrySearchContextProps>;
+type EntrySearchProviderProps = {
+    children: ReactNode;
+    currentlySelectedItems?: Array<SelectedItemProps>;
+};
+declare const EntrySearchProvider: ({ currentlySelectedItems, children }: EntrySearchProviderProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const useEntrySearchContext: () => {
+    /** function that updates / sets the search query state */
+    onSetQuery: (value: SearchQueryProps) => void;
+    /** current search query state */
+    query: SearchQueryProps;
+    /** function that sets the selected items to state */
+    onSelectItem: (selectedResult: any) => void;
+    /** function that clears all selected items from state */
+    onRemoveAllSelectedItems: () => void;
+    /** current selected items in state */
+    selectedListItems: Array<SelectedItemProps>;
+    /** current list of results in state */
+    list: ItemListProps;
+    /** function that sets the list of items to state */
+    onSetList: (value: ItemListProps) => void;
+};
+
+type EntrySearchListItemProps = SelectedItemProps & {
+    contentType?: string | string[];
     image?: {
         src: string;
         alt: string;
@@ -626,28 +710,10 @@ type EntrySearchListItemProps = {
     popoverInfo?: React$1.ReactNode;
     children?: React$1.ReactNode;
 };
-declare const EntrySearchListItem: ({ id, title, subTitle, image, popoverInfo, onSelect, children, ...props }: EntrySearchListItemProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const EntrySearchListItem: ({ id, title, contentType, image, popoverInfo, onSelect, children, ...props }: EntrySearchListItemProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 declare const EntrySearchListItemLoadingSkeleton: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
-type StatusTypes = 'published' | 'modified' | 'draft' | 'unpublished';
-type PublishStatusProps = {
-    status: StatusTypes;
-};
-declare const PublishStatus: ({ status }: PublishStatusProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-
-type EntrySearchResultItemProps = {
-    /** sets the id which is used for removal functionality */
-    id: string;
-    /** sets the title value */
-    title: string;
-    /** sets the subtitle value */
-    subtitle?: string;
-    /** sets user defined child nodes inside the popover box */
-    popoverInfo?: ReactNode;
-    /** sets the publish status */
-    publishStatus?: StatusTypes;
-    /** sets the created date */
-    createdAt?: TDate;
+type EntrySearchResultItemProps = SelectedItemProps & {
     /** sets additional remove functionality onto of default removal */
     onRemove?: () => void;
     /** sets whether to show or hide the remove button
@@ -657,20 +723,18 @@ type EntrySearchResultItemProps = {
     /** sets user defined child nodes that are uncontrolled by Uniform */
     children?: ReactNode;
 };
-declare const EntrySearchResultItem: ({ id, title, subtitle, popoverInfo, publishStatus, onRemove, createdAt, hideRemoveButton, children, }: EntrySearchResultItemProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const EntrySearchResultItem: ({ id, title, name, contentType, popoverData, publishStatus, editLinkIcon, editLink, imageUrl, onRemove, createdAt, hideRemoveButton, children, }: EntrySearchResultItemProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
-type EntrySearchResultItemButtonProps = HTMLAttributes<HTMLButtonElement> & {
-    text: string;
-    icon?: string;
-};
-declare const EntrySearchResultItemButton: ({ text, icon, ...props }: EntrySearchResultItemButtonProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-type LinkButtonProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
+type EntrySearchResultItemButtonProps<THtml extends HTMLAttributes<HTMLElement> = HTMLAttributes<HTMLButtonElement>> = {
     text: string;
-    icon?: string;
-};
-declare const LinkButton: ({ text, icon, ...props }: LinkButtonProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+    icon?: string | React.ComponentType<{
+        className?: string;
+    }>;
+} & THtml;
+declare const EntrySearchResultItemButton: ({ text, icon, ...props }: EntrySearchResultItemButtonProps<HTMLAttributes<HTMLButtonElement>>) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const LinkButton: ({ text, icon, ...props }: EntrySearchResultItemButtonProps<AnchorHTMLAttributes<HTMLAnchorElement>>) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
-type EntrySearchResultListProps = {
+type EntrySearchResultListProps<TRenderComponent extends SelectedItemProps = SelectedItemProps> = {
     /** sets the result label value
      * @default 'Selected'
      */
@@ -688,9 +752,13 @@ type EntrySearchResultListProps = {
     /** allows additional buttons to be added to the result title group */
     additionalButtons?: React.ReactNode;
     /** allows placing child components within the result list area */
-    children?: React.ReactNode;
+    renderResultComponent?: (value: TRenderComponent) => React.ReactNode;
+    /** disable or enable drag and drop functionality
+     * @default false
+     */
+    disableDnD?: boolean;
 };
-declare const EntrySearchResultList: ({ resultLabelText, removeButtonText, onRemoveAllSelected, hideRemoveButton, additionalButtons, children, }: EntrySearchResultListProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const EntrySearchResultList: ({ resultLabelText, removeButtonText, onRemoveAllSelected, hideRemoveButton, additionalButtons, renderResultComponent, disableDnD, }: EntrySearchResultListProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 type QueryFilterSearchProps = {
     count: number;
@@ -722,50 +790,6 @@ type QueryFilterProps = {
 };
 declare const QueryFilter: ({ requireContentType, queryFilterTitle, contentTypeLabel, typeSelectorAllTypesOptionText, contentTypeOptions, countLabel, countValue, sortLabel, sortOptions, sortOrderLabel, sortOrderOptions, children, }: QueryFilterProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
-type SearchQueryProps = {
-    /** sets the content type in the search context */
-    contentType: string | undefined;
-    /** sets the keyword search in the search context */
-    keywordSearch?: string;
-    [key: string]: unknown;
-};
-interface SelectedItemProps {
-    id: string;
-    title: string;
-    contentType?: string;
-    createdAt?: TDate;
-    editLink?: string;
-    metadata?: Record<string, string>;
-    popoverData?: ReactNode;
-}
-type ItemsProp = {
-    items?: Array<SelectedItemProps & Record<string, unknown>>;
-};
-type EntrySearchFilterContextProps = {
-    onSetQuery: (value: SearchQueryProps) => void;
-    query: SearchQueryProps;
-    onSelectItem: (selectedResult: any) => void;
-    onRemoveAllSelectedItems: () => void;
-    selectedListItems: Array<SelectedItemProps>;
-    list: ItemsProp;
-    onSetList: (value: ItemsProp) => void;
-};
-declare const EntrySearchContext: React$1.Context<EntrySearchFilterContextProps>;
-type EntrySearchProviderProps = {
-    children: ReactNode;
-    currentlySelectedItems?: Array<SelectedItemProps>;
-};
-declare const EntrySearchProvider: ({ currentlySelectedItems, children }: EntrySearchProviderProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-declare const useEntrySearchContext: () => {
-    onSetQuery: (value: SearchQueryProps) => void;
-    query: SearchQueryProps;
-    onSelectItem: (selectedResult: any) => void;
-    onRemoveAllSelectedItems: () => void;
-    selectedListItems: Array<SelectedItemProps>;
-    list: ItemsProp;
-    onSetList: (value: ItemsProp) => void;
-};
-
 type MeshAppProps = {
     loadingComponent?: React__default.ComponentType;
     errorComponent?: React__default.ComponentType<{
@@ -959,4 +983,4 @@ declare function useUniformMeshSdk(): _uniformdev_mesh_sdk.UniformMeshSDK;
  */
 declare function createLocationValidator<TSetValue>(setValue: SetLocationValueDispatch<TSetValue>, validate: (newValue: TSetValue, currentResult: SetValueOptions | undefined) => SetValueOptions): SetLocationValueDispatch<TSetValue>;
 
-export { BaseRequestData, Brand, DamItem, DamSelectedItem, DamSelectedItemProps, DataRefreshButton, DataRefreshButtonProps, DataResourceVariableRendererProps, DataResourceVariablesList, DataResourceVariablesListProps, DataSourceEditor, DataSourceEditorProps, DataTypeEditor, DataTypeEditorProps, DataVariableDefinitionWithName, DefaultSearchRow, DefaultSelectedItem, DispatchResult, EntrySearch, EntrySearchContainer, EntrySearchContainerProps, EntrySearchContentType, EntrySearchContext, EntrySearchFilter, EntrySearchFilterContainer, EntrySearchFilterContainerProps, EntrySearchFilterContextProps, EntrySearchFilterProps, EntrySearchListItem, EntrySearchListItemLoadingSkeleton, EntrySearchListItemProps, EntrySearchProps, EntrySearchProvider, EntrySearchProviderProps, EntrySearchQueryOptions, EntrySearchResult, EntrySearchResultItem, EntrySearchResultItemButton, EntrySearchResultItemButtonProps, EntrySearchResultItemProps, EntrySearchResultList, EntrySearchResultListProps, EntrySearchRowProps, EntrySearchSelectedItemProps, GetProductOptions, GetProductsOptions, index as Icons, InputToken, InputVariables, InputVariablesProps, LinkButton, LinkButtonProps, MeshApp, MeshAppProps, NoResultsProps, ProductCategory, ProductDynamicSelectorValue, ProductPreviewList, ProductQuery, ProductQueryCategory, ProductQueryContext, ProductQueryContextValue, ProductQueryProps, ProductSearch, ProductSearchContext, ProductSearchContextValue, ProductSearchProps, ProductSearchResult, ProductSearchResults, ProductSearchRow, ProductSelectedItem, PublishStatus, PublishStatusProps, QueryFilter, QueryFilterProps, QueryFilterSearchProps, RequestAction, RequestBody, RequestContext, RequestData, RequestHeaders, RequestMethodSelect, RequestParameter, RequestParameters, RequestParametersProps, RequestProvider, RequestProviderProps, RequestTypeContainer, RequestTypeContainerProps, RequestUrl, RequestUrlInput, ResolvableLoadingValue, SearchQueryProps, SelectedItemProps, SelectionField, SelectionFieldValue, SetLocationValueDispatch, SetLocationValueFunction, StatusTypes, TextVariableRenderer, UniformMeshLocationContext, UniformMeshLocationContextProvider, UniformMeshLocationContextValue, UniformMeshSdkContext, UniformMeshSdkContextProvider, UniformMeshSdkContextValue, UseUniformMeshSdkOptions, VariableEditor, VariableEditorProps, VariablesAction, VariablesContext, VariablesList, VariablesProvider, VariablesProviderProps, badgeIcon, createLocationValidator, damSelectItemImage, damSelectedItemContainer, damSelectedItemCopy, damSelectedItemDetails, damSelectedItemIcon, damSelectedItemInfoBtn, damSelectedItemInner, damSelectedItemLinkBtn, damSelectedItemLinkContainer, damSelectedItemMediaContainer, damSelectedItemPopover, damSelectedItemPopoverLabel, damSelectedItemSmallText, damSelectedItemTitle, draggableContainer, draggableIcon, draggableIconOffset, draggableIconWrapper, entrySearchBtn, entrySearchConfig, entrySearchConfigHidden, entrySearchLoadMoreBtn, entrySearchResultList, entrySearchSelectIcon, entrySearchSelectImg, entrySearchSelectInput, entrySearchSelectOption, entrySearchWrapper, productSearchRowActiveIcon, productSearchRowCategory, productSearchRowContainer, productSearchRowContent, productSearchRowContentActive, productSearchRowDetails, productSearchRowTitle, productSelectedItemContainer, productSelectedItemContent, productSelectedItemDetails, productSelectedItemIcon, productSelectedItemImage, productSelectedItemLinkContainer, productedSelectedItemLinkBtn, productedSelectedItemSmallText, searchRowBtn, searchRowContainer, searchRowContainerActive, searchRowContainerWithPopover, searchRowPopover, searchRowText, searchRowTextSmall, selectItemLinkBtn, selectItemLinkContainer, selectItemPopover, selectItemPopoverLabel, selectItemSmallText, selectedItemContainer, selectedItemCopy, selectedItemDetails, selectedItemIcon, selectedItemInner, selectedItemTitle, urlEncodeRequestParameter, urlEncodeRequestUrl, useEntrySearchContext, useInitializeUniformMeshSdk, useMeshLocation, useProductQueryContext, useProductSearchContext, useRequest, useRequestHeader, useRequestParameter, useUniformMeshLocation, useUniformMeshLocationContext, useUniformMeshSdk, useUniformMeshSdkContext, useVariables, variablesToList };
+export { BaseRequestData, Brand, DamItem, DamSelectedItem, DamSelectedItemProps, DataRefreshButton, DataRefreshButtonProps, DataResourceVariableRendererProps, DataResourceVariablesList, DataResourceVariablesListProps, DataSourceEditor, DataSourceEditorProps, DataTypeEditor, DataTypeEditorProps, DataVariableDefinitionWithName, DefaultSearchRow, DefaultSelectedItem, DispatchResult, EntrySearch, EntrySearchContainer, EntrySearchContainerProps, EntrySearchContentType, EntrySearchContext, EntrySearchContextProps, EntrySearchFilter, EntrySearchFilterContainer, EntrySearchFilterContainerProps, EntrySearchFilterProps, EntrySearchListItem, EntrySearchListItemLoadingSkeleton, EntrySearchListItemProps, EntrySearchProps, EntrySearchProvider, EntrySearchProviderProps, EntrySearchQueryOptions, EntrySearchResult, EntrySearchResultItem, EntrySearchResultItemButton, EntrySearchResultItemButtonProps, EntrySearchResultItemProps, EntrySearchResultList, EntrySearchResultListProps, EntrySearchRowProps, EntrySearchSelectedItemProps, GetProductOptions, GetProductsOptions, index as Icons, InputToken, InputVariables, InputVariablesProps, ItemListProps, LinkButton, MeshApp, MeshAppProps, NoResultsProps, ProductCategory, ProductDynamicSelectorValue, ProductPreviewList, ProductQuery, ProductQueryCategory, ProductQueryContext, ProductQueryContextValue, ProductQueryProps, ProductSearch, ProductSearchContext, ProductSearchContextValue, ProductSearchProps, ProductSearchResult, ProductSearchResults, ProductSearchRow, ProductSelectedItem, PublishStatus, PublishStatusProps, QueryFilter, QueryFilterProps, QueryFilterSearchProps, RequestAction, RequestBody, RequestContext, RequestData, RequestHeaders, RequestMethodSelect, RequestParameter, RequestParameters, RequestParametersProps, RequestProvider, RequestProviderProps, RequestTypeContainer, RequestTypeContainerProps, RequestUrl, RequestUrlInput, ResolvableLoadingValue, SearchQueryProps, SelectedItemProps, SelectionField, SelectionFieldValue, SetLocationValueDispatch, SetLocationValueFunction, StatusTypes, TextVariableRenderer, UniformMeshLocationContext, UniformMeshLocationContextProvider, UniformMeshLocationContextValue, UniformMeshSdkContext, UniformMeshSdkContextProvider, UniformMeshSdkContextValue, UseUniformMeshSdkOptions, VariableEditor, VariableEditorProps, VariablesAction, VariablesContext, VariablesList, VariablesProvider, VariablesProviderProps, badgeIcon, createLocationValidator, damSelectItemImage, damSelectedItemContainer, damSelectedItemCopy, damSelectedItemDetails, damSelectedItemIcon, damSelectedItemInfoBtn, damSelectedItemInner, damSelectedItemLinkBtn, damSelectedItemLinkContainer, damSelectedItemMediaContainer, damSelectedItemPopover, damSelectedItemPopoverLabel, damSelectedItemSmallText, damSelectedItemTitle, draggableContainer, draggableIcon, draggableIconOffset, draggableIconWrapper, entrySearchBtn, entrySearchConfig, entrySearchConfigHidden, entrySearchLoadMoreBtn, entrySearchResultList, entrySearchSelectIcon, entrySearchSelectImg, entrySearchSelectInput, entrySearchSelectOption, entrySearchWrapper, productSearchRowActiveIcon, productSearchRowCategory, productSearchRowContainer, productSearchRowContent, productSearchRowContentActive, productSearchRowDetails, productSearchRowTitle, productSelectedItemContainer, productSelectedItemContent, productSelectedItemDetails, productSelectedItemIcon, productSelectedItemImage, productSelectedItemLinkContainer, productedSelectedItemLinkBtn, productedSelectedItemSmallText, searchRowBtn, searchRowContainer, searchRowContainerActive, searchRowContainerWithPopover, searchRowPopover, searchRowText, searchRowTextSmall, selectItemLinkBtn, selectItemLinkContainer, selectItemPopover, selectItemPopoverLabel, selectItemSmallText, selectedItemContainer, selectedItemCopy, selectedItemDetails, selectedItemIcon, selectedItemInner, selectedItemTitle, urlEncodeRequestParameter, urlEncodeRequestUrl, useEntrySearchContext, useInitializeUniformMeshSdk, useMeshLocation, useProductQueryContext, useProductSearchContext, useRequest, useRequestHeader, useRequestParameter, useUniformMeshLocation, useUniformMeshLocationContext, useUniformMeshSdk, useUniformMeshSdkContext, useVariables, variablesToList };

package/dist/index.esm.js

@@ -3899,8 +3899,13 @@ function convertRequestDataToDataType(dataType, requestData) {
 import { css as css25 } from "@emotion/react";
 import { Button as Button3, LoadingIndicator as LoadingIndicator2 } from "@uniformdev/design-system";
 import { jsx as jsx44, jsxs as jsxs25 } from "@emotion/react/jsx-runtime";
-var DataRefreshButton = ({ buttonText, isLoading, ...props }) => {
-  return /* @__PURE__ */ jsxs25(Button3, { buttonType: "primaryInvert", ...props, disabled: isLoading, children: [
+var DataRefreshButton = ({
+  buttonText,
+  isLoading,
+  onRefreshData,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs25(Button3, { buttonType: "primaryInvert", onClick: onRefreshData, disabled: isLoading, ...props, children: [
     !isLoading ? null : /* @__PURE__ */ jsx44(
       LoadingIndicator2,
       {
@@ -3936,7 +3941,7 @@ var EntrySearchContainer = ({
   return /* @__PURE__ */ jsx45(IconsProvider, { children: /* @__PURE__ */ jsxs26(VerticalRhythm, { children: [
     /* @__PURE__ */ jsx45(Container, { backgroundColor: "gray-50", padding: "var(--spacing-base)", border: true, children: /* @__PURE__ */ jsxs26(VerticalRhythm, { children: [
       searchFilters,
-      /* @__PURE__ */ jsx45(ScrollableList, { children: resultList })
+      !resultList ? null : /* @__PURE__ */ jsx45(ScrollableList, { role: "list", children: resultList })
     ] }) }),
     children,
     !onSave && !onCancel ? null : /* @__PURE__ */ jsxs26("div", { css: EntrySearchBtnGroup, children: [
@@ -3959,7 +3964,7 @@ var EntrySearchContext = createContext5({
   onSelectItem: () => {
   },
   query: {
-    contentType: "any",
+    contentType: "",
     keywordSearch: ""
   },
   list: {},
@@ -3971,7 +3976,7 @@ var EntrySearchContext = createContext5({
 });
 var EntrySearchProvider = ({ currentlySelectedItems, children }) => {
   const [query, setQuery] = useState9({
-    contentType: "any",
+    contentType: "",
     keywordSearch: ""
   });
   const querySearchDeferred = useDeferredValue(query);
@@ -3985,10 +3990,14 @@ var EntrySearchProvider = ({ currentlySelectedItems, children }) => {
   );
   const onSelectItem = useCallback(
     (selectedResult) => {
-      if (selectedItems.some((item) => item.id === selectedResult.id)) {
-        setSelectedItems((prev) => prev.filter((item) => item.id !== selectedResult.id));
+      if (Array.isArray(selectedResult)) {
+        setSelectedItems(selectedResult);
       } else {
-        setSelectedItems((prev) => [...prev, selectedResult]);
+        if (selectedItems.some((item) => item.id === selectedResult.id)) {
+          setSelectedItems((prev) => prev.filter((item) => item.id !== selectedResult.id));
+        } else {
+          setSelectedItems((prev) => [...prev, selectedResult]);
+        }
       }
     },
     [setSelectedItems, selectedItems]
@@ -4183,7 +4192,7 @@ import { jsx as jsx49, jsxs as jsxs29 } from "@emotion/react/jsx-runtime";
 var EntrySearchListItem = ({
   id,
   title,
-  subTitle,
+  contentType,
   image,
   popoverInfo,
   onSelect,
@@ -4191,7 +4200,7 @@ var EntrySearchListItem = ({
   ...props
 }) => {
   const { onSelectItem, selectedListItems } = useEntrySearchContext();
-  const formatedSubTitle = typeof subTitle === "string" ? subTitle : subTitle == null ? void 0 : subTitle.map((item) => item).join(", ");
+  const formatedContentType = Array.isArray(contentType) ? contentType.join(", ") : contentType;
   const handleSelectItem = () => {
     var _a;
     const extraData = (_a = onSelect == null ? void 0 : onSelect()) != null ? _a : {};
@@ -4202,7 +4211,7 @@ var EntrySearchListItem = ({
     /* @__PURE__ */ jsxs29("div", { role: "button", onClick: handleSelectItem, css: EntryListItemControlledContent, children: [
       !image ? null : /* @__PURE__ */ jsx49("img", { ...image, loading: (image == null ? void 0 : image.width) && image.height ? "lazy" : "eager" }),
       /* @__PURE__ */ jsxs29("div", { role: "heading", css: EntryListItemHeadingGroup, children: [
-        !subTitle ? null : /* @__PURE__ */ jsx49("span", { css: EntryListItemSubtitle, children: formatedSubTitle }),
+        !contentType ? null : /* @__PURE__ */ jsx49("span", { css: EntryListItemSubtitle, children: formatedContentType }),
         /* @__PURE__ */ jsx49("span", { css: EntryListItemTitle, children: title })
       ] })
     ] }),
@@ -4289,32 +4298,46 @@ var EntrySearchAuthorStateGroup = css30`
   display: flex;
   gap: var(--spacing-sm);
 `;
+var EntrySearchContentContainer = css30`
+  display: flex;
+  gap: var(--spacing-xs);
+`;
+var EntrySearchImage = css30`
+  max-width: 56px;
+  object-fit: contain;
+`;
 
 // src/components/EntrySearch/EntrySearchResultItem.tsx
 import { jsx as jsx51, jsxs as jsxs30 } from "@emotion/react/jsx-runtime";
 var EntrySearchResultItem = ({
   id,
   title,
-  subtitle,
-  popoverInfo,
+  name,
+  contentType,
+  popoverData,
   publishStatus,
+  editLinkIcon,
+  editLink,
+  imageUrl,
   onRemove,
   createdAt,
   hideRemoveButton = false,
   children
 }) => {
   const { onSelectItem } = useEntrySearchContext();
+  const formatedContentType = Array.isArray(contentType) ? contentType.join(", ") : contentType;
   const onRemoveItem = () => {
     onSelectItem({ id });
     onRemove == null ? void 0 : onRemove();
   };
   return /* @__PURE__ */ jsxs30("div", { css: EntrySearchResultItemContainer, children: [
-    /* @__PURE__ */ jsxs30("div", { children: [
+    /* @__PURE__ */ jsx51("div", { children: /* @__PURE__ */ jsxs30("div", { css: EntrySearchContentContainer, children: [
+      !imageUrl ? null : /* @__PURE__ */ jsx51("img", { src: imageUrl, alt: `Thumbnail for ${title}`, css: EntrySearchImage }),
       /* @__PURE__ */ jsxs30("div", { children: [
-        /* @__PURE__ */ jsx51("span", { css: EntrySearchResultItemSubtitle, children: subtitle }),
+        /* @__PURE__ */ jsx51("span", { css: EntrySearchResultItemSubtitle, children: formatedContentType }),
         /* @__PURE__ */ jsxs30("span", { role: "heading", css: EntrySearchResultItemTitle, children: [
-          title,
-          !popoverInfo ? null : /* @__PURE__ */ jsx51(Popover2, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, children: popoverInfo })
+          title != null ? title : name,
+          !popoverData ? null : /* @__PURE__ */ jsx51(Popover2, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, children: popoverData })
         ] }),
         !createdAt && !publishStatus ? null : /* @__PURE__ */ jsxs30("div", { css: EntrySearchAuthorStateGroup, children: [
           !publishStatus ? null : /* @__PURE__ */ jsx51(PublishStatus, { status: publishStatus }),
@@ -4322,11 +4345,14 @@ var EntrySearchResultItem = ({
             /* @__PURE__ */ jsx51("strong", { children: "Last updated: " }),
             timeagoFormat(createdAt)
           ] })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx51("div", { children })
-    ] }),
-    hideRemoveButton ? null : /* @__PURE__ */ jsx51(Button5, { buttonType: "ghostDestructive", onClick: onRemoveItem, children: "Remove" })
+        ] }),
+        /* @__PURE__ */ jsx51("div", { children })
+      ] })
+    ] }) }),
+    !editLink && hideRemoveButton ? null : /* @__PURE__ */ jsxs30("div", { css: EntrySearchAuthorStateGroup, children: [
+      !editLink ? null : /* @__PURE__ */ jsx51(LinkButton, { text: "Edit", href: editLink, icon: editLinkIcon }),
+      hideRemoveButton ? null : /* @__PURE__ */ jsx51(Button5, { buttonType: "ghostDestructive", onClick: onRemoveItem, children: "Remove" })
+    ] })
   ] });
 };
 
@@ -4367,14 +4393,22 @@ var ButtonIcon = css31`
 
 // src/components/EntrySearch/EntrySearchResultItemButton.tsx
 import { jsx as jsx52, jsxs as jsxs31 } from "@emotion/react/jsx-runtime";
-var EntrySearchResultItemButton = ({ text, icon, ...props }) => {
+var EntrySearchResultItemButton = ({
+  text,
+  icon,
+  ...props
+}) => {
   return /* @__PURE__ */ jsxs31("button", { type: "button", css: ButtonStyles, ...props, children: [
     !icon ? null : /* @__PURE__ */ jsx52(Image, { src: icon, css: ButtonIcon }),
     text
   ] });
 };
-var LinkButton = ({ text, icon, ...props }) => {
-  return /* @__PURE__ */ jsxs31("a", { ...props, css: ButtonStyles, children: [
+var LinkButton = ({
+  text,
+  icon,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs31("a", { ...props, css: ButtonStyles, target: "_blank", rel: "noopener noreferrer", children: [
     !icon ? null : /* @__PURE__ */ jsx52(Image, { src: icon, css: ButtonIcon }),
     text
   ] });
@@ -4382,6 +4416,7 @@ var LinkButton = ({ text, icon, ...props }) => {
 
 // src/components/EntrySearch/EntrySearchResultList.tsx
 import { Button as Button6, Counter, VerticalRhythm as VerticalRhythm2 } from "@uniformdev/design-system";
+import { DragDropContext as DragDropContext3, Draggable as Draggable3, Droppable as Droppable3 } from "react-beautiful-dnd";
 
 // src/components/EntrySearch/styles/EntrySearchResultList.styles.ts
 import { css as css32 } from "@emotion/react";
@@ -4409,33 +4444,70 @@ var EntrySearchResultList = ({
   onRemoveAllSelected,
   hideRemoveButton = false,
   additionalButtons,
-  children
+  renderResultComponent = (value) => /* @__PURE__ */ jsx53(EntrySearchResultItem, { ...value }),
+  disableDnD = false
 }) => {
-  const { selectedListItems, onRemoveAllSelectedItems } = useEntrySearchContext();
+  const { selectedListItems, onRemoveAllSelectedItems, onSelectItem } = useEntrySearchContext();
   const handleRemoveAllSelectedItems = () => {
     onRemoveAllSelectedItems();
     onRemoveAllSelected == null ? void 0 : onRemoveAllSelected();
   };
+  const onDragEnd = (res) => {
+    var _a, _b;
+    if (res.destination && res.source.droppableId === ((_a = res.destination) == null ? void 0 : _a.droppableId)) {
+      const result = [...selectedListItems || []];
+      const [removed] = (_b = result == null ? void 0 : result.splice(res.source.index, 1)) != null ? _b : [];
+      result == null ? void 0 : result.splice(res.destination.index, 0, removed);
+      onSelectItem(result);
+      return result;
+    }
+  };
   return /* @__PURE__ */ jsxs32(Fragment7, { children: [
     /* @__PURE__ */ jsxs32("div", { role: "group", css: EntrySearchResultListContainer, children: [
       /* @__PURE__ */ jsxs32("div", { role: "note", css: EntrySearchResultListCounterContainer, children: [
         /* @__PURE__ */ jsx53("span", { css: EntrySearchResultListTitle, children: resultLabelText }),
         " ",
-        /* @__PURE__ */ jsx53(Counter, { count: selectedListItems.length })
+        !selectedListItems.length ? null : /* @__PURE__ */ jsx53(Counter, { count: selectedListItems.length })
       ] }),
-      hideRemoveButton ? null : /* @__PURE__ */ jsx53(
-        Button6,
-        {
-          buttonType: "ghostDestructive",
-          size: "xs",
-          disabled: selectedListItems.length === 0,
-          onClick: handleRemoveAllSelectedItems,
-          children: removeButtonText
-        }
-      ),
-      additionalButtons
+      /* @__PURE__ */ jsxs32("div", { css: EntrySearchResultListCounterContainer, children: [
+        additionalButtons,
+        hideRemoveButton ? null : /* @__PURE__ */ jsx53(
+          Button6,
+          {
+            buttonType: "ghostDestructive",
+            size: "xs",
+            disabled: selectedListItems.length === 0,
+            onClick: handleRemoveAllSelectedItems,
+            children: removeButtonText
+          }
+        )
+      ] })
     ] }),
-    /* @__PURE__ */ jsx53(VerticalRhythm2, { gap: "sm", children })
+    !selectedListItems.length ? null : /* @__PURE__ */ jsx53(DragDropContext3, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ jsx53(Droppable3, { droppableId: "canvas-multi-select", children: (provided) => /* @__PURE__ */ jsxs32("div", { ...provided.droppableProps, ref: provided.innerRef, children: [
+      /* @__PURE__ */ jsx53(VerticalRhythm2, { gap: "sm", children: selectedListItems.map((item, i) => {
+        const renderListItem = renderResultComponent(item);
+        return /* @__PURE__ */ jsx53(
+          Draggable3,
+          {
+            draggableId: item.title,
+            index: i,
+            isDragDisabled: disableDnD,
+            children: (provided2, snapshot) => /* @__PURE__ */ jsx53(
+              "div",
+              {
+                ref: provided2.innerRef,
+                "data-dragging": snapshot.isDragging,
+                ...provided2.draggableProps,
+                ...provided2.dragHandleProps,
+                children: renderListItem
+              }
+            )
+          },
+          item.title
+        );
+      }) }),
+      provided.placeholder
+    ] }) }) })
   ] });
 };
 
@@ -4457,11 +4529,11 @@ var QueryFilter = ({
   sortOrderOptions = [
     {
       name: "Ascending",
-      id: "ascending"
+      id: "asc"
     },
     {
       name: "Descending",
-      id: "descending"
+      id: "desc"
     }
   ],
   children
@@ -4469,7 +4541,7 @@ var QueryFilter = ({
   var _a, _b;
   const { query, onSetQuery } = useEntrySearchContext();
   const [queryState, setQueryState] = useState11({
-    contentType: query.contentType,
+    contentType: "",
     count: countValue != null ? countValue : 5,
     sortBy: (_a = sortOptions[0].id) != null ? _a : "",
     sortOrder: (_b = sortOrderOptions[0].id) != null ? _b : ""
@@ -4490,7 +4562,7 @@ var QueryFilter = ({
           {
             label: contentTypeLabel,
             options: [
-              ...!requireContentType ? [{ value: "any", label: typeSelectorAllTypesOptionText }] : [],
+              ...!requireContentType ? [{ value: "", label: typeSelectorAllTypesOptionText }] : [],
               ...contentTypeOptions ? contentTypeOptions.map((option) => {
                 return { value: option.id, label: option.name };
               }) : []
@@ -4516,6 +4588,10 @@ var QueryFilter = ({
           {
             label: sortLabel,
             options: [
+              {
+                label: "Select a sort",
+                value: ""
+              },
               ...sortOptions ? sortOptions.map((option) => {
                 return { value: option.id, label: option.name };
               }) : []

package/dist/index.js

@@ -4055,8 +4055,13 @@ function convertRequestDataToDataType(dataType, requestData) {
 var import_react38 = require("@emotion/react");
 var import_design_system23 = require("@uniformdev/design-system");
 var import_jsx_runtime44 = require("@emotion/react/jsx-runtime");
-var DataRefreshButton = ({ buttonText, isLoading, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_design_system23.Button, { buttonType: "primaryInvert", ...props, disabled: isLoading, children: [
+var DataRefreshButton = ({
+  buttonText,
+  isLoading,
+  onRefreshData,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_design_system23.Button, { buttonType: "primaryInvert", onClick: onRefreshData, disabled: isLoading, ...props, children: [
     !isLoading ? null : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       import_design_system23.LoadingIndicator,
       {
@@ -4092,7 +4097,7 @@ var EntrySearchContainer = ({
   return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_design_system24.IconsProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_design_system24.VerticalRhythm, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_design_system24.Container, { backgroundColor: "gray-50", padding: "var(--spacing-base)", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_design_system24.VerticalRhythm, { children: [
       searchFilters,
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_design_system24.ScrollableList, { children: resultList })
+      !resultList ? null : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_design_system24.ScrollableList, { role: "list", children: resultList })
     ] }) }),
     children,
     !onSave && !onCancel ? null : /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { css: EntrySearchBtnGroup, children: [
@@ -4115,7 +4120,7 @@ var EntrySearchContext = (0, import_react40.createContext)({
   onSelectItem: () => {
   },
   query: {
-    contentType: "any",
+    contentType: "",
     keywordSearch: ""
   },
   list: {},
@@ -4127,7 +4132,7 @@ var EntrySearchContext = (0, import_react40.createContext)({
 });
 var EntrySearchProvider = ({ currentlySelectedItems, children }) => {
   const [query, setQuery] = (0, import_react40.useState)({
-    contentType: "any",
+    contentType: "",
     keywordSearch: ""
   });
   const querySearchDeferred = (0, import_react40.useDeferredValue)(query);
@@ -4141,10 +4146,14 @@ var EntrySearchProvider = ({ currentlySelectedItems, children }) => {
   );
   const onSelectItem = (0, import_react40.useCallback)(
     (selectedResult) => {
-      if (selectedItems.some((item) => item.id === selectedResult.id)) {
-        setSelectedItems((prev) => prev.filter((item) => item.id !== selectedResult.id));
+      if (Array.isArray(selectedResult)) {
+        setSelectedItems(selectedResult);
       } else {
-        setSelectedItems((prev) => [...prev, selectedResult]);
+        if (selectedItems.some((item) => item.id === selectedResult.id)) {
+          setSelectedItems((prev) => prev.filter((item) => item.id !== selectedResult.id));
+        } else {
+          setSelectedItems((prev) => [...prev, selectedResult]);
+        }
       }
     },
     [setSelectedItems, selectedItems]
@@ -4339,7 +4348,7 @@ var import_jsx_runtime49 = require("@emotion/react/jsx-runtime");
 var EntrySearchListItem = ({
   id,
   title,
-  subTitle,
+  contentType,
   image,
   popoverInfo,
   onSelect,
@@ -4347,7 +4356,7 @@ var EntrySearchListItem = ({
   ...props
 }) => {
   const { onSelectItem, selectedListItems } = useEntrySearchContext();
-  const formatedSubTitle = typeof subTitle === "string" ? subTitle : subTitle == null ? void 0 : subTitle.map((item) => item).join(", ");
+  const formatedContentType = Array.isArray(contentType) ? contentType.join(", ") : contentType;
   const handleSelectItem = () => {
     var _a;
     const extraData = (_a = onSelect == null ? void 0 : onSelect()) != null ? _a : {};
@@ -4358,7 +4367,7 @@ var EntrySearchListItem = ({
     /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { role: "button", onClick: handleSelectItem, css: EntryListItemControlledContent, children: [
       !image ? null : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("img", { ...image, loading: (image == null ? void 0 : image.width) && image.height ? "lazy" : "eager" }),
       /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { role: "heading", css: EntryListItemHeadingGroup, children: [
-        !subTitle ? null : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { css: EntryListItemSubtitle, children: formatedSubTitle }),
+        !contentType ? null : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { css: EntryListItemSubtitle, children: formatedContentType }),
         /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { css: EntryListItemTitle, children: title })
       ] })
     ] }),
@@ -4445,32 +4454,46 @@ var EntrySearchAuthorStateGroup = import_react45.css`
   display: flex;
   gap: var(--spacing-sm);
 `;
+var EntrySearchContentContainer = import_react45.css`
+  display: flex;
+  gap: var(--spacing-xs);
+`;
+var EntrySearchImage = import_react45.css`
+  max-width: 56px;
+  object-fit: contain;
+`;
 
 // src/components/EntrySearch/EntrySearchResultItem.tsx
 var import_jsx_runtime51 = require("@emotion/react/jsx-runtime");
 var EntrySearchResultItem = ({
   id,
   title,
-  subtitle,
-  popoverInfo,
+  name,
+  contentType,
+  popoverData,
   publishStatus,
+  editLinkIcon,
+  editLink,
+  imageUrl,
   onRemove,
   createdAt,
   hideRemoveButton = false,
   children
 }) => {
   const { onSelectItem } = useEntrySearchContext();
+  const formatedContentType = Array.isArray(contentType) ? contentType.join(", ") : contentType;
   const onRemoveItem = () => {
     onSelectItem({ id });
     onRemove == null ? void 0 : onRemove();
   };
   return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { css: EntrySearchResultItemContainer, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { css: EntrySearchContentContainer, children: [
+      !imageUrl ? null : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("img", { src: imageUrl, alt: `Thumbnail for ${title}`, css: EntrySearchImage }),
       /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { css: EntrySearchResultItemSubtitle, children: subtitle }),
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { css: EntrySearchResultItemSubtitle, children: formatedContentType }),
         /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("span", { role: "heading", css: EntrySearchResultItemTitle, children: [
-          title,
-          !popoverInfo ? null : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_design_system28.Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, children: popoverInfo })
+          title != null ? title : name,
+          !popoverData ? null : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_design_system28.Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, children: popoverData })
         ] }),
         !createdAt && !publishStatus ? null : /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { css: EntrySearchAuthorStateGroup, children: [
           !publishStatus ? null : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(PublishStatus, { status: publishStatus }),
@@ -4478,11 +4501,14 @@ var EntrySearchResultItem = ({
             /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("strong", { children: "Last updated: " }),
             (0, import_timeago3.format)(createdAt)
           ] })
-        ] })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { children })
-    ] }),
-    hideRemoveButton ? null : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_design_system28.Button, { buttonType: "ghostDestructive", onClick: onRemoveItem, children: "Remove" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { children })
+      ] })
+    ] }) }),
+    !editLink && hideRemoveButton ? null : /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { css: EntrySearchAuthorStateGroup, children: [
+      !editLink ? null : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(LinkButton, { text: "Edit", href: editLink, icon: editLinkIcon }),
+      hideRemoveButton ? null : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_design_system28.Button, { buttonType: "ghostDestructive", onClick: onRemoveItem, children: "Remove" })
+    ] })
   ] });
 };
 
@@ -4523,14 +4549,22 @@ var ButtonIcon = import_react46.css`
 
 // src/components/EntrySearch/EntrySearchResultItemButton.tsx
 var import_jsx_runtime52 = require("@emotion/react/jsx-runtime");
-var EntrySearchResultItemButton = ({ text, icon, ...props }) => {
+var EntrySearchResultItemButton = ({
+  text,
+  icon,
+  ...props
+}) => {
   return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("button", { type: "button", css: ButtonStyles, ...props, children: [
     !icon ? null : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Image, { src: icon, css: ButtonIcon }),
     text
   ] });
 };
-var LinkButton = ({ text, icon, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("a", { ...props, css: ButtonStyles, children: [
+var LinkButton = ({
+  text,
+  icon,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("a", { ...props, css: ButtonStyles, target: "_blank", rel: "noopener noreferrer", children: [
     !icon ? null : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Image, { src: icon, css: ButtonIcon }),
     text
   ] });
@@ -4538,6 +4572,7 @@ var LinkButton = ({ text, icon, ...props }) => {
 
 // src/components/EntrySearch/EntrySearchResultList.tsx
 var import_design_system30 = require("@uniformdev/design-system");
+var import_react_beautiful_dnd3 = require("react-beautiful-dnd");
 
 // src/components/EntrySearch/styles/EntrySearchResultList.styles.ts
 var import_react47 = require("@emotion/react");
@@ -4565,33 +4600,70 @@ var EntrySearchResultList = ({
   onRemoveAllSelected,
   hideRemoveButton = false,
   additionalButtons,
-  children
+  renderResultComponent = (value) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(EntrySearchResultItem, { ...value }),
+  disableDnD = false
 }) => {
-  const { selectedListItems, onRemoveAllSelectedItems } = useEntrySearchContext();
+  const { selectedListItems, onRemoveAllSelectedItems, onSelectItem } = useEntrySearchContext();
   const handleRemoveAllSelectedItems = () => {
     onRemoveAllSelectedItems();
     onRemoveAllSelected == null ? void 0 : onRemoveAllSelected();
   };
+  const onDragEnd = (res) => {
+    var _a, _b;
+    if (res.destination && res.source.droppableId === ((_a = res.destination) == null ? void 0 : _a.droppableId)) {
+      const result = [...selectedListItems || []];
+      const [removed] = (_b = result == null ? void 0 : result.splice(res.source.index, 1)) != null ? _b : [];
+      result == null ? void 0 : result.splice(res.destination.index, 0, removed);
+      onSelectItem(result);
+      return result;
+    }
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { role: "group", css: EntrySearchResultListContainer, children: [
       /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { role: "note", css: EntrySearchResultListCounterContainer, children: [
         /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { css: EntrySearchResultListTitle, children: resultLabelText }),
         " ",
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_design_system30.Counter, { count: selectedListItems.length })
+        !selectedListItems.length ? null : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_design_system30.Counter, { count: selectedListItems.length })
       ] }),
-      hideRemoveButton ? null : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-        import_design_system30.Button,
-        {
-          buttonType: "ghostDestructive",
-          size: "xs",
-          disabled: selectedListItems.length === 0,
-          onClick: handleRemoveAllSelectedItems,
-          children: removeButtonText
-        }
-      ),
-      additionalButtons
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { css: EntrySearchResultListCounterContainer, children: [
+        additionalButtons,
+        hideRemoveButton ? null : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+          import_design_system30.Button,
+          {
+            buttonType: "ghostDestructive",
+            size: "xs",
+            disabled: selectedListItems.length === 0,
+            onClick: handleRemoveAllSelectedItems,
+            children: removeButtonText
+          }
+        )
+      ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_design_system30.VerticalRhythm, { gap: "sm", children })
+    !selectedListItems.length ? null : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react_beautiful_dnd3.DragDropContext, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react_beautiful_dnd3.Droppable, { droppableId: "canvas-multi-select", children: (provided) => /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { ...provided.droppableProps, ref: provided.innerRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_design_system30.VerticalRhythm, { gap: "sm", children: selectedListItems.map((item, i) => {
+        const renderListItem = renderResultComponent(item);
+        return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+          import_react_beautiful_dnd3.Draggable,
+          {
+            draggableId: item.title,
+            index: i,
+            isDragDisabled: disableDnD,
+            children: (provided2, snapshot) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+              "div",
+              {
+                ref: provided2.innerRef,
+                "data-dragging": snapshot.isDragging,
+                ...provided2.draggableProps,
+                ...provided2.dragHandleProps,
+                children: renderListItem
+              }
+            )
+          },
+          item.title
+        );
+      }) }),
+      provided.placeholder
+    ] }) }) })
   ] });
 };
 
@@ -4613,11 +4685,11 @@ var QueryFilter = ({
   sortOrderOptions = [
     {
       name: "Ascending",
-      id: "ascending"
+      id: "asc"
     },
     {
       name: "Descending",
-      id: "descending"
+      id: "desc"
     }
   ],
   children
@@ -4625,7 +4697,7 @@ var QueryFilter = ({
   var _a, _b;
   const { query, onSetQuery } = useEntrySearchContext();
   const [queryState, setQueryState] = (0, import_react48.useState)({
-    contentType: query.contentType,
+    contentType: "",
     count: countValue != null ? countValue : 5,
     sortBy: (_a = sortOptions[0].id) != null ? _a : "",
     sortOrder: (_b = sortOrderOptions[0].id) != null ? _b : ""
@@ -4646,7 +4718,7 @@ var QueryFilter = ({
           {
             label: contentTypeLabel,
             options: [
-              ...!requireContentType ? [{ value: "any", label: typeSelectorAllTypesOptionText }] : [],
+              ...!requireContentType ? [{ value: "", label: typeSelectorAllTypesOptionText }] : [],
               ...contentTypeOptions ? contentTypeOptions.map((option) => {
                 return { value: option.id, label: option.name };
               }) : []
@@ -4672,6 +4744,10 @@ var QueryFilter = ({
           {
             label: sortLabel,
             options: [
+              {
+                label: "Select a sort",
+                value: ""
+              },
               ...sortOptions ? sortOptions.map((option) => {
                 return { value: option.id, label: option.name };
               }) : []

package/dist/index.mjs

@@ -3899,8 +3899,13 @@ function convertRequestDataToDataType(dataType, requestData) {
 import { css as css25 } from "@emotion/react";
 import { Button as Button3, LoadingIndicator as LoadingIndicator2 } from "@uniformdev/design-system";
 import { jsx as jsx44, jsxs as jsxs25 } from "@emotion/react/jsx-runtime";
-var DataRefreshButton = ({ buttonText, isLoading, ...props }) => {
-  return /* @__PURE__ */ jsxs25(Button3, { buttonType: "primaryInvert", ...props, disabled: isLoading, children: [
+var DataRefreshButton = ({
+  buttonText,
+  isLoading,
+  onRefreshData,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs25(Button3, { buttonType: "primaryInvert", onClick: onRefreshData, disabled: isLoading, ...props, children: [
     !isLoading ? null : /* @__PURE__ */ jsx44(
       LoadingIndicator2,
       {
@@ -3936,7 +3941,7 @@ var EntrySearchContainer = ({
   return /* @__PURE__ */ jsx45(IconsProvider, { children: /* @__PURE__ */ jsxs26(VerticalRhythm, { children: [
     /* @__PURE__ */ jsx45(Container, { backgroundColor: "gray-50", padding: "var(--spacing-base)", border: true, children: /* @__PURE__ */ jsxs26(VerticalRhythm, { children: [
       searchFilters,
-      /* @__PURE__ */ jsx45(ScrollableList, { children: resultList })
+      !resultList ? null : /* @__PURE__ */ jsx45(ScrollableList, { role: "list", children: resultList })
     ] }) }),
     children,
     !onSave && !onCancel ? null : /* @__PURE__ */ jsxs26("div", { css: EntrySearchBtnGroup, children: [
@@ -3959,7 +3964,7 @@ var EntrySearchContext = createContext5({
   onSelectItem: () => {
   },
   query: {
-    contentType: "any",
+    contentType: "",
     keywordSearch: ""
   },
   list: {},
@@ -3971,7 +3976,7 @@ var EntrySearchContext = createContext5({
 });
 var EntrySearchProvider = ({ currentlySelectedItems, children }) => {
   const [query, setQuery] = useState9({
-    contentType: "any",
+    contentType: "",
     keywordSearch: ""
   });
   const querySearchDeferred = useDeferredValue(query);
@@ -3985,10 +3990,14 @@ var EntrySearchProvider = ({ currentlySelectedItems, children }) => {
   );
   const onSelectItem = useCallback(
     (selectedResult) => {
-      if (selectedItems.some((item) => item.id === selectedResult.id)) {
-        setSelectedItems((prev) => prev.filter((item) => item.id !== selectedResult.id));
+      if (Array.isArray(selectedResult)) {
+        setSelectedItems(selectedResult);
       } else {
-        setSelectedItems((prev) => [...prev, selectedResult]);
+        if (selectedItems.some((item) => item.id === selectedResult.id)) {
+          setSelectedItems((prev) => prev.filter((item) => item.id !== selectedResult.id));
+        } else {
+          setSelectedItems((prev) => [...prev, selectedResult]);
+        }
       }
     },
     [setSelectedItems, selectedItems]
@@ -4183,7 +4192,7 @@ import { jsx as jsx49, jsxs as jsxs29 } from "@emotion/react/jsx-runtime";
 var EntrySearchListItem = ({
   id,
   title,
-  subTitle,
+  contentType,
   image,
   popoverInfo,
   onSelect,
@@ -4191,7 +4200,7 @@ var EntrySearchListItem = ({
   ...props
 }) => {
   const { onSelectItem, selectedListItems } = useEntrySearchContext();
-  const formatedSubTitle = typeof subTitle === "string" ? subTitle : subTitle == null ? void 0 : subTitle.map((item) => item).join(", ");
+  const formatedContentType = Array.isArray(contentType) ? contentType.join(", ") : contentType;
   const handleSelectItem = () => {
     var _a;
     const extraData = (_a = onSelect == null ? void 0 : onSelect()) != null ? _a : {};
@@ -4202,7 +4211,7 @@ var EntrySearchListItem = ({
     /* @__PURE__ */ jsxs29("div", { role: "button", onClick: handleSelectItem, css: EntryListItemControlledContent, children: [
       !image ? null : /* @__PURE__ */ jsx49("img", { ...image, loading: (image == null ? void 0 : image.width) && image.height ? "lazy" : "eager" }),
       /* @__PURE__ */ jsxs29("div", { role: "heading", css: EntryListItemHeadingGroup, children: [
-        !subTitle ? null : /* @__PURE__ */ jsx49("span", { css: EntryListItemSubtitle, children: formatedSubTitle }),
+        !contentType ? null : /* @__PURE__ */ jsx49("span", { css: EntryListItemSubtitle, children: formatedContentType }),
         /* @__PURE__ */ jsx49("span", { css: EntryListItemTitle, children: title })
       ] })
     ] }),
@@ -4289,32 +4298,46 @@ var EntrySearchAuthorStateGroup = css30`
   display: flex;
   gap: var(--spacing-sm);
 `;
+var EntrySearchContentContainer = css30`
+  display: flex;
+  gap: var(--spacing-xs);
+`;
+var EntrySearchImage = css30`
+  max-width: 56px;
+  object-fit: contain;
+`;
 
 // src/components/EntrySearch/EntrySearchResultItem.tsx
 import { jsx as jsx51, jsxs as jsxs30 } from "@emotion/react/jsx-runtime";
 var EntrySearchResultItem = ({
   id,
   title,
-  subtitle,
-  popoverInfo,
+  name,
+  contentType,
+  popoverData,
   publishStatus,
+  editLinkIcon,
+  editLink,
+  imageUrl,
   onRemove,
   createdAt,
   hideRemoveButton = false,
   children
 }) => {
   const { onSelectItem } = useEntrySearchContext();
+  const formatedContentType = Array.isArray(contentType) ? contentType.join(", ") : contentType;
   const onRemoveItem = () => {
     onSelectItem({ id });
     onRemove == null ? void 0 : onRemove();
   };
   return /* @__PURE__ */ jsxs30("div", { css: EntrySearchResultItemContainer, children: [
-    /* @__PURE__ */ jsxs30("div", { children: [
+    /* @__PURE__ */ jsx51("div", { children: /* @__PURE__ */ jsxs30("div", { css: EntrySearchContentContainer, children: [
+      !imageUrl ? null : /* @__PURE__ */ jsx51("img", { src: imageUrl, alt: `Thumbnail for ${title}`, css: EntrySearchImage }),
       /* @__PURE__ */ jsxs30("div", { children: [
-        /* @__PURE__ */ jsx51("span", { css: EntrySearchResultItemSubtitle, children: subtitle }),
+        /* @__PURE__ */ jsx51("span", { css: EntrySearchResultItemSubtitle, children: formatedContentType }),
         /* @__PURE__ */ jsxs30("span", { role: "heading", css: EntrySearchResultItemTitle, children: [
-          title,
-          !popoverInfo ? null : /* @__PURE__ */ jsx51(Popover2, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, children: popoverInfo })
+          title != null ? title : name,
+          !popoverData ? null : /* @__PURE__ */ jsx51(Popover2, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, children: popoverData })
         ] }),
         !createdAt && !publishStatus ? null : /* @__PURE__ */ jsxs30("div", { css: EntrySearchAuthorStateGroup, children: [
           !publishStatus ? null : /* @__PURE__ */ jsx51(PublishStatus, { status: publishStatus }),
@@ -4322,11 +4345,14 @@ var EntrySearchResultItem = ({
             /* @__PURE__ */ jsx51("strong", { children: "Last updated: " }),
             timeagoFormat(createdAt)
           ] })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx51("div", { children })
-    ] }),
-    hideRemoveButton ? null : /* @__PURE__ */ jsx51(Button5, { buttonType: "ghostDestructive", onClick: onRemoveItem, children: "Remove" })
+        ] }),
+        /* @__PURE__ */ jsx51("div", { children })
+      ] })
+    ] }) }),
+    !editLink && hideRemoveButton ? null : /* @__PURE__ */ jsxs30("div", { css: EntrySearchAuthorStateGroup, children: [
+      !editLink ? null : /* @__PURE__ */ jsx51(LinkButton, { text: "Edit", href: editLink, icon: editLinkIcon }),
+      hideRemoveButton ? null : /* @__PURE__ */ jsx51(Button5, { buttonType: "ghostDestructive", onClick: onRemoveItem, children: "Remove" })
+    ] })
   ] });
 };
 
@@ -4367,14 +4393,22 @@ var ButtonIcon = css31`
 
 // src/components/EntrySearch/EntrySearchResultItemButton.tsx
 import { jsx as jsx52, jsxs as jsxs31 } from "@emotion/react/jsx-runtime";
-var EntrySearchResultItemButton = ({ text, icon, ...props }) => {
+var EntrySearchResultItemButton = ({
+  text,
+  icon,
+  ...props
+}) => {
   return /* @__PURE__ */ jsxs31("button", { type: "button", css: ButtonStyles, ...props, children: [
     !icon ? null : /* @__PURE__ */ jsx52(Image, { src: icon, css: ButtonIcon }),
     text
   ] });
 };
-var LinkButton = ({ text, icon, ...props }) => {
-  return /* @__PURE__ */ jsxs31("a", { ...props, css: ButtonStyles, children: [
+var LinkButton = ({
+  text,
+  icon,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs31("a", { ...props, css: ButtonStyles, target: "_blank", rel: "noopener noreferrer", children: [
     !icon ? null : /* @__PURE__ */ jsx52(Image, { src: icon, css: ButtonIcon }),
     text
   ] });
@@ -4382,6 +4416,7 @@ var LinkButton = ({ text, icon, ...props }) => {
 
 // src/components/EntrySearch/EntrySearchResultList.tsx
 import { Button as Button6, Counter, VerticalRhythm as VerticalRhythm2 } from "@uniformdev/design-system";
+import { DragDropContext as DragDropContext3, Draggable as Draggable3, Droppable as Droppable3 } from "react-beautiful-dnd";
 
 // src/components/EntrySearch/styles/EntrySearchResultList.styles.ts
 import { css as css32 } from "@emotion/react";
@@ -4409,33 +4444,70 @@ var EntrySearchResultList = ({
   onRemoveAllSelected,
   hideRemoveButton = false,
   additionalButtons,
-  children
+  renderResultComponent = (value) => /* @__PURE__ */ jsx53(EntrySearchResultItem, { ...value }),
+  disableDnD = false
 }) => {
-  const { selectedListItems, onRemoveAllSelectedItems } = useEntrySearchContext();
+  const { selectedListItems, onRemoveAllSelectedItems, onSelectItem } = useEntrySearchContext();
   const handleRemoveAllSelectedItems = () => {
     onRemoveAllSelectedItems();
     onRemoveAllSelected == null ? void 0 : onRemoveAllSelected();
   };
+  const onDragEnd = (res) => {
+    var _a, _b;
+    if (res.destination && res.source.droppableId === ((_a = res.destination) == null ? void 0 : _a.droppableId)) {
+      const result = [...selectedListItems || []];
+      const [removed] = (_b = result == null ? void 0 : result.splice(res.source.index, 1)) != null ? _b : [];
+      result == null ? void 0 : result.splice(res.destination.index, 0, removed);
+      onSelectItem(result);
+      return result;
+    }
+  };
   return /* @__PURE__ */ jsxs32(Fragment7, { children: [
     /* @__PURE__ */ jsxs32("div", { role: "group", css: EntrySearchResultListContainer, children: [
       /* @__PURE__ */ jsxs32("div", { role: "note", css: EntrySearchResultListCounterContainer, children: [
         /* @__PURE__ */ jsx53("span", { css: EntrySearchResultListTitle, children: resultLabelText }),
         " ",
-        /* @__PURE__ */ jsx53(Counter, { count: selectedListItems.length })
+        !selectedListItems.length ? null : /* @__PURE__ */ jsx53(Counter, { count: selectedListItems.length })
       ] }),
-      hideRemoveButton ? null : /* @__PURE__ */ jsx53(
-        Button6,
-        {
-          buttonType: "ghostDestructive",
-          size: "xs",
-          disabled: selectedListItems.length === 0,
-          onClick: handleRemoveAllSelectedItems,
-          children: removeButtonText
-        }
-      ),
-      additionalButtons
+      /* @__PURE__ */ jsxs32("div", { css: EntrySearchResultListCounterContainer, children: [
+        additionalButtons,
+        hideRemoveButton ? null : /* @__PURE__ */ jsx53(
+          Button6,
+          {
+            buttonType: "ghostDestructive",
+            size: "xs",
+            disabled: selectedListItems.length === 0,
+            onClick: handleRemoveAllSelectedItems,
+            children: removeButtonText
+          }
+        )
+      ] })
     ] }),
-    /* @__PURE__ */ jsx53(VerticalRhythm2, { gap: "sm", children })
+    !selectedListItems.length ? null : /* @__PURE__ */ jsx53(DragDropContext3, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ jsx53(Droppable3, { droppableId: "canvas-multi-select", children: (provided) => /* @__PURE__ */ jsxs32("div", { ...provided.droppableProps, ref: provided.innerRef, children: [
+      /* @__PURE__ */ jsx53(VerticalRhythm2, { gap: "sm", children: selectedListItems.map((item, i) => {
+        const renderListItem = renderResultComponent(item);
+        return /* @__PURE__ */ jsx53(
+          Draggable3,
+          {
+            draggableId: item.title,
+            index: i,
+            isDragDisabled: disableDnD,
+            children: (provided2, snapshot) => /* @__PURE__ */ jsx53(
+              "div",
+              {
+                ref: provided2.innerRef,
+                "data-dragging": snapshot.isDragging,
+                ...provided2.draggableProps,
+                ...provided2.dragHandleProps,
+                children: renderListItem
+              }
+            )
+          },
+          item.title
+        );
+      }) }),
+      provided.placeholder
+    ] }) }) })
   ] });
 };
 
@@ -4457,11 +4529,11 @@ var QueryFilter = ({
   sortOrderOptions = [
     {
       name: "Ascending",
-      id: "ascending"
+      id: "asc"
     },
     {
       name: "Descending",
-      id: "descending"
+      id: "desc"
     }
   ],
   children
@@ -4469,7 +4541,7 @@ var QueryFilter = ({
   var _a, _b;
   const { query, onSetQuery } = useEntrySearchContext();
   const [queryState, setQueryState] = useState11({
-    contentType: query.contentType,
+    contentType: "",
     count: countValue != null ? countValue : 5,
     sortBy: (_a = sortOptions[0].id) != null ? _a : "",
     sortOrder: (_b = sortOrderOptions[0].id) != null ? _b : ""
@@ -4490,7 +4562,7 @@ var QueryFilter = ({
           {
             label: contentTypeLabel,
             options: [
-              ...!requireContentType ? [{ value: "any", label: typeSelectorAllTypesOptionText }] : [],
+              ...!requireContentType ? [{ value: "", label: typeSelectorAllTypesOptionText }] : [],
               ...contentTypeOptions ? contentTypeOptions.map((option) => {
                 return { value: option.id, label: option.name };
               }) : []
@@ -4516,6 +4588,10 @@ var QueryFilter = ({
           {
             label: sortLabel,
             options: [
+              {
+                label: "Select a sort",
+                value: ""
+              },
               ...sortOptions ? sortOptions.map((option) => {
                 return { value: option.id, label: option.name };
               }) : []

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/mesh-sdk-react",
-  "version": "18.27.1-alpha.23+ed7d9bfa0",
+  "version": "18.27.1-alpha.25+16ccb5a67",
   "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.27.1-alpha.23+ed7d9bfa0",
-    "@uniformdev/mesh-sdk": "18.27.1-alpha.23+ed7d9bfa0",
+    "@uniformdev/design-system": "18.27.1-alpha.25+16ccb5a67",
+    "@uniformdev/mesh-sdk": "18.27.1-alpha.25+16ccb5a67",
     "formik": "^2.2.9",
     "react-beautiful-dnd": "13.1.1",
     "react-icons": "4.8.0",
@@ -73,5 +73,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ed7d9bfa014db103691c2d2030b1549770a48d6b"
+  "gitHead": "16ccb5a67849a262c250651e2574d64a7edd12a2"
 }