@soppiya/app-bridge 1.1.5 → 1.1.7

package/dist/components/index.d.ts

@@ -4,6 +4,8 @@ export * from "./collections-pciker";
 export * from "./link-list-picker";
 export * from "./media";
 export * from "./meta-data";
+export * from "./metaobjects-entries-picker";
+export * from "./metaobjects-picker";
 export * from "./pages-picker";
 export * from "./products-picker";
 export * from "./savebar";

package/dist/components/index.js

@@ -4,6 +4,8 @@ export * from "./collections-pciker/index.js";
 export * from "./link-list-picker/index.js";
 export * from "./media/index.js";
 export * from "./meta-data/index.js";
+export * from "./metaobjects-entries-picker/index.js";
+export * from "./metaobjects-picker/index.js";
 export * from "./pages-picker/index.js";
 export * from "./products-picker/index.js";
 export * from "./savebar/index.js";

package/dist/components/media/Media.js

@@ -98,7 +98,7 @@ const Media_Media = ({ title = "Media", types = [
         alignItems: "center",
         children: [
             /*#__PURE__*/ jsxs(BlockStack, {
-                className: "!max-w-[150px] w-full",
+                className: "max-w-[150px]! w-full",
                 gapY: 30,
                 children: [
                     /*#__PURE__*/ jsxs(InlineStack, {
@@ -192,7 +192,7 @@ const Media_Media = ({ title = "Media", types = [
                                             children: [
                                                 /*#__PURE__*/ jsx(Button, {
                                                     color: "primary",
-                                                    className: "!px-[8px]",
+                                                    className: "px-2!",
                                                     onClick: ()=>ref.current?.click(),
                                                     children: /*#__PURE__*/ jsx(SoppiyaIcon, {
                                                         size: "sm",
@@ -250,7 +250,7 @@ const Media_Media = ({ title = "Media", types = [
                                             children: /*#__PURE__*/ jsx(Button, {
                                                 variant: "outline",
                                                 color: "secondary",
-                                                className: "!px-[8px]",
+                                                className: "px-2!",
                                                 onClick: toggleView,
                                                 children: /*#__PURE__*/ jsx(SoppiyaIcon, {
                                                     size: "sm",
@@ -262,7 +262,7 @@ const Media_Media = ({ title = "Media", types = [
                                             children: /*#__PURE__*/ jsx(Button, {
                                                 variant: "outline",
                                                 color: "secondary",
-                                                className: "!px-[8px]",
+                                                className: "px-2!",
                                                 disabled: !isMediaSelected,
                                                 loading: isDeletingMedias,
                                                 onClick: handleDeleteMedias,
@@ -308,7 +308,7 @@ const Media_Media = ({ title = "Media", types = [
                             /*#__PURE__*/ jsxs(BlockStack, {
                                 gapY: 90,
                                 className: classnames("max-h-[calc(100dvh-300px)] overflow-x-hidden overflow-y-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden", {
-                                    "md:!w-[calc(100%-300px)] lg:!w-[calc(100%-336px)]": Boolean(preview)
+                                    "md:w-[calc(100%-300px)]! lg:w-[calc(100%-336px)]!": Boolean(preview)
                                 }),
                                 children: [
                                     /*#__PURE__*/ jsx(Box, {
@@ -316,8 +316,8 @@ const Media_Media = ({ title = "Media", types = [
                                         children: /*#__PURE__*/ jsx(Box, {
                                             className: classnames("grid", {
                                                 "grid-cols-[repeat(1,1fr)]": view === View.List,
-                                                "grid-cols-[repeat(auto-fill,minmax(150px,1fr))] md:grid-cols-[repeat(auto-fill,minmax(117px,1fr))] !rounded-[6px] gap-[20px] lg:gap-[35px]": view === View.Grid,
-                                                "gap-[20px]": view === View.Grid && Boolean(preview)
+                                                "grid-cols-[repeat(auto-fill,minmax(150px,1fr))] md:grid-cols-[repeat(auto-fill,minmax(117px,1fr))] rounded-md! gap-5 lg:gap-[35px]": view === View.Grid,
+                                                "gap-5": view === View.Grid && Boolean(preview)
                                             }),
                                             children: medias.map((media)=>/*#__PURE__*/ jsx(MediaItem, {
                                                     view: view,

package/dist/components/meta-data/api/query.js

@@ -7,6 +7,9 @@ const getMetaFields = graphql(`query Metafields($filterKeys: MetafieldFilterKeys
         entry
         name
         type
+        metaobject_reference {
+          _id
+        }
       }
     }
   }

package/dist/components/meta-data/model/meta.types.js

@@ -8,6 +8,7 @@ class Meta {
             variant_ref: "Variants",
             page_ref: "Pages",
             blog_ref: "Blogs",
+            metaobject_ref_ref: "Meatobject",
             single_line_text: "Text",
             multiline_text: "Multiline text",
             boolean: "Boolean",
@@ -24,7 +25,8 @@ class Meta {
             "variant_ref",
             "page_ref",
             "article_ref",
-            "blog_ref"
+            "blog_ref",
+            "metaobject_ref"
         ];
         return refTypes.includes(type);
     }

package/dist/components/meta-data/model/useGetMetaFields.d.ts

@@ -6,6 +6,10 @@ export declare const useGetMetaFields: (scope?: MetafieldScope[]) => {
         entry?: import("../../../shared/graphql/graphql").MetafieldEntryType | null;
         name?: string | null;
         type?: import("../../../shared/graphql/graphql").MetafieldType | null;
+        metaobject_reference?: {
+            __typename: "Metaobject";
+            _id?: string | null;
+        } | null;
     } | null | undefined)[];
     loading: boolean;
     metaFieldsError: import("@apollo/client").ErrorLike | undefined;

package/dist/components/meta-data/ui/MetaData.stories.d.ts

@@ -8,3 +8,4 @@ export declare const Variant: () => import("react/jsx-runtime").JSX.Element;
 export declare const Blog: () => import("react/jsx-runtime").JSX.Element;
 export declare const Page: () => import("react/jsx-runtime").JSX.Element;
 export declare const Collection: () => import("react/jsx-runtime").JSX.Element;
+export declare const Metaobject: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/meta-data/ui/MetaData.stories.js

@@ -141,4 +141,25 @@ const Collection = ()=>{
         })
     });
 };
-export { Article, Blog, Collection, Page, Product, Variant, MetaData_stories as default };
+const Metaobject = ()=>{
+    const [product, setProduct] = useState([]);
+    const handleChange = (field)=>{
+        setProduct((prev)=>{
+            const exists = prev.find((f)=>f.metafield === field.metafield);
+            if (!exists) return [
+                ...prev,
+                field
+            ];
+            return prev.map((f)=>f.metafield === field.metafield ? field : f);
+        });
+    };
+    return /*#__PURE__*/ jsx(Card, {
+        padding: 70,
+        children: /*#__PURE__*/ jsx(MetaData, {
+            scope: "collection",
+            metafieldsData: product,
+            onChange: handleChange
+        })
+    });
+};
+export { Article, Blog, Collection, Metaobject, Page, Product, Variant, MetaData_stories as default };

package/dist/components/meta-data/ui/MetaDataItem.js

@@ -3,6 +3,7 @@ import { Button, Card, InlineStack, SoppiyaIcon, Text } from "@soppiya/elementus
 import ArticlesPicker from "../../articles-picker/ui/ArticlesPicker.js";
 import BlogsPicker from "../../blogs-picker/ui/BlogsPicker.js";
 import CollectionPicker from "../../collections-pciker/ui/CollectionPicker.js";
+import { MetaobjectEntriesPicker } from "../../metaobjects-entries-picker/index.js";
 import PagesPicker from "../../pages-picker/ui/PagesPicker.js";
 import { ProductsPicker } from "../../products-picker/index.js";
 import { VariantsPicker } from "../../variants-picker/index.js";
@@ -19,6 +20,7 @@ import ColorMetaField from "./ColorMetaField.js";
 import DateAndTimeMetaField from "./DateAndTimeMetaField.js";
 import DateMetaField from "./DateMetaField.js";
 import MetaDataTypePopup from "./MetaDataTypePopup.js";
+import MetaobjectRefMetaField from "./MetaobjectRefMetaField.js";
 import MultilineTextMetaField from "./MultilineTextMetaField.js";
 import NumberMetaField from "./NumberMetaField.js";
 import PageRefMetaField from "./PageRefMetaField.js";
@@ -28,6 +30,7 @@ import VariantRefMetaField from "./VariantRefMetaField.js";
 const MetaDataItem_MetaDataItem = ({ metaField, value = [], onChange })=>{
     const [activeMetaField, setActiveMetaField] = useState(null);
     const [visibleExplorer, setVisibleExplorer] = useState("");
+    const [metaobjectRef, setMetaobjectRef] = useState([]);
     const metaFieldRef = useClickAway(()=>visibleExplorer ? null : setActiveMetaField(null));
     const isRefType = meta_types.isRefType(metaField.type);
     let MetaFieldJSX;
@@ -65,6 +68,9 @@ const MetaDataItem_MetaDataItem = ({ metaField, value = [], onChange })=>{
         case "blog_ref":
             MetaFieldJSX = BlogRefMetaField;
             break;
+        case "metaobject_ref":
+            MetaFieldJSX = MetaobjectRefMetaField;
+            break;
         case "boolean":
             MetaFieldJSX = BooleanMetaField;
             break;
@@ -99,6 +105,15 @@ const MetaDataItem_MetaDataItem = ({ metaField, value = [], onChange })=>{
             case "article_ref":
                 setVisibleExplorer("article");
                 break;
+            case "metaobject_ref":
+                setVisibleExplorer("metaobject");
+                if (metaField.metaobject_reference?._id) {
+                    console.log(metaField.metaobject_reference?._id);
+                    setMetaobjectRef([
+                        String(metaField.metaobject_reference._id)
+                    ]);
+                }
+                break;
             default:
                 isFunction(onChange) && onChange(value.concat(""));
         }
@@ -249,6 +264,13 @@ const MetaDataItem_MetaDataItem = ({ metaField, value = [], onChange })=>{
                 limit: "multiple" === metaField.entry ? 1 / 0 : 1,
                 onClose: ()=>setVisibleExplorer(""),
                 onOk: handleSelectExplorerItems
+            }),
+            "metaobject" === visibleExplorer && /*#__PURE__*/ jsx(MetaobjectEntriesPicker, {
+                initialIds: value,
+                limit: "multiple" === metaField.entry ? 1 / 0 : 1,
+                onClose: ()=>setVisibleExplorer(""),
+                onOk: handleSelectExplorerItems,
+                metaobjects: metaobjectRef
             })
         ]
     });

package/dist/components/meta-data/ui/MetaobjectRefMetaField.d.ts

@@ -0,0 +1,3 @@
+import { MetaDataProps } from "./MetaDataItem";
+declare const MetaobjectRefMetaField: ({ value, children }: MetaDataProps) => import("react/jsx-runtime").JSX.Element | import("react/jsx-runtime").JSX.Element[] | undefined;
+export default MetaobjectRefMetaField;

package/dist/components/meta-data/ui/MetaobjectRefMetaField.js

@@ -0,0 +1,30 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMetaobjectEntries } from "../../metaobjects-entries-picker/model/useMetaobjectEntries.js";
+import { Loading } from "../../../shared/loading/index.js";
+import { InlineStack, Text } from "@soppiya/elementus";
+const MetaobjectRefMetaField = ({ value, children })=>{
+    const { metaobjectEntries, isLoadingMetaobjectEntries } = useMetaobjectEntries({
+        skip: !value,
+        filterKeys: {
+            cursors: value?.split(",")
+        }
+    });
+    if (isLoadingMetaobjectEntries) return /*#__PURE__*/ jsx(Loading, {});
+    return metaobjectEntries?.map((metaobjectEntry)=>/*#__PURE__*/ jsxs(InlineStack, {
+            justifyContent: "space-between",
+            children: [
+                /*#__PURE__*/ jsx(InlineStack, {
+                    gapX: 70,
+                    alignItems: "center",
+                    children: /*#__PURE__*/ jsx(Text, {
+                        size: "md",
+                        weight: "regular",
+                        children: metaobjectEntry.title
+                    })
+                }),
+                children
+            ]
+        }, metaobjectEntry._id));
+};
+const ui_MetaobjectRefMetaField = MetaobjectRefMetaField;
+export { ui_MetaobjectRefMetaField as default };

package/dist/components/meta-data/ui/SingleLineTextMetaField.js

@@ -1,14 +1,15 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Input } from "@soppiya/elementus";
-const SingleLineTextMetaField_SingleLineTextMetaField = ({ entry, value, children, onChange })=>/*#__PURE__*/ jsxs("div", {
+import { InlineStack, Input } from "@soppiya/elementus";
+const SingleLineTextMetaField_SingleLineTextMetaField = ({ entry, value, children, onChange })=>/*#__PURE__*/ jsxs(InlineStack, {
+        justifyContent: "space-between",
+        gapX: 70,
         children: [
-            /*#__PURE__*/ jsx("div", {
-                children: /*#__PURE__*/ jsx("div", {
-                    children: /*#__PURE__*/ jsx(Input, {
-                        size: "sm",
-                        value: value,
-                        onChange: (e)=>onChange(e.target.value)
-                    })
+            /*#__PURE__*/ jsx(InlineStack, {
+                stack: "full",
+                children: /*#__PURE__*/ jsx(Input, {
+                    size: "sm",
+                    value: value,
+                    onChange: (e)=>onChange(e.target.value)
                 })
             }),
             "multiple" === entry && children

package/dist/components/metaobjects-entries-picker/index.d.ts

@@ -0,0 +1 @@
+export { default as MetaobjectEntriesPicker } from "./ui/MetaobjectEntriesPicker";

package/dist/components/metaobjects-entries-picker/index.js

@@ -0,0 +1,2 @@
+import MetaobjectEntriesPicker from "./ui/MetaobjectEntriesPicker.js";
+export { MetaobjectEntriesPicker };

package/dist/components/metaobjects-entries-picker/ui/MetaobjectEntriesPicker.d.ts

@@ -0,0 +1,10 @@
+type Props = {
+    title?: string;
+    initialIds?: string[];
+    limit?: number;
+    metaobjects?: string[];
+    onClose?: () => void;
+    onOk?: (metaobjectEntries: string[]) => void;
+};
+declare const MetaobjectEntriesPicker: ({ title, initialIds, limit, metaobjects, onClose, onOk }: Props) => import("react/jsx-runtime").JSX.Element;
+export default MetaobjectEntriesPicker;

package/dist/components/{metafield-entries/ui/MetaobjectEntries.js → metaobjects-entries-picker/ui/MetaobjectEntriesPicker.js}

@@ -6,7 +6,7 @@ import classnames from "classnames";
 import lodash from "lodash";
 import { useState } from "react";
 import { useMetaobjectEntries } from "../model/useMetaobjectEntries.js";
-const MetaobjectEntries_MetaobjectEntries = ({ title = "Metaobject entries", initialIds = [], limit = 1 / 0, metaobjects = [], onClose, onOk })=>{
+const MetaobjectEntriesPicker = ({ title = "Metaobject entries", initialIds = [], limit = 1 / 0, metaobjects = [], onClose, onOk })=>{
     const [selectedMetaobjectEntries, setSelectedMetaobjectEntries] = useState(initialIds);
     const { query, debounceQuery, onChangeQuery } = useFilterQuery();
     const { metaobjectEntries, isLoadingMetaobjectEntries, fetchMoreMetaobjectEntries, pageInfo } = useMetaobjectEntries({
@@ -104,5 +104,5 @@ const MetaobjectEntries_MetaobjectEntries = ({ title = "Metaobject entries", ini
         })
     });
 };
-const MetaobjectEntries = MetaobjectEntries_MetaobjectEntries;
-export { MetaobjectEntries as default };
+const ui_MetaobjectEntriesPicker = MetaobjectEntriesPicker;
+export { ui_MetaobjectEntriesPicker as default };

package/dist/components/{metafield-entries/ui/MetaobjectEntries.stories.d.ts → metaobjects-entries-picker/ui/MetaobjectEntriesPicker.stories.d.ts}

@@ -6,7 +6,7 @@ declare const meta: {
         limit?: number;
         metaobjects?: string[];
         onClose?: () => void;
-        onOk?: (linklist: string[]) => void;
+        onOk?: (metaobjectEntries: string[]) => void;
     }) => import("react/jsx-runtime").JSX.Element;
 };
 export default meta;

package/dist/components/metaobjects-entries-picker/ui/MetaobjectEntriesPicker.stories.js

@@ -0,0 +1,10 @@
+import MetaobjectEntriesPicker from "./MetaobjectEntriesPicker.js";
+const meta = {
+    title: "Example/MetaobjectEntriesPicker",
+    component: MetaobjectEntriesPicker
+};
+const MetaobjectEntriesPicker_stories = meta;
+const Default = {
+    args: {}
+};
+export { Default, MetaobjectEntriesPicker_stories as default };

package/dist/components/metaobjects-picker/api/query.d.ts

@@ -0,0 +1,8 @@
+export declare const metaobjectQuery: import("@graphql-typed-document-node/core").TypedDocumentNode<import("../../../shared/graphql/graphql").MetaobjectsQuery, import("../../../shared/graphql/graphql").Exact<{
+    filterKeys?: import("../../../shared/graphql/graphql").InputMaybe<import("../../../shared/graphql/graphql").MetaobjectFilterKeys>;
+    after?: import("../../../shared/graphql/graphql").InputMaybe<import("../../../shared/graphql/graphql").Scalars["ID"]["input"]>;
+    before?: import("../../../shared/graphql/graphql").InputMaybe<import("../../../shared/graphql/graphql").Scalars["ID"]["input"]>;
+    first?: import("../../../shared/graphql/graphql").InputMaybe<import("../../../shared/graphql/graphql").Scalars["Int"]["input"]>;
+    last?: import("../../../shared/graphql/graphql").InputMaybe<import("../../../shared/graphql/graphql").Scalars["Int"]["input"]>;
+    query?: import("../../../shared/graphql/graphql").InputMaybe<import("../../../shared/graphql/graphql").Scalars["String"]["input"]>;
+}>>;

package/dist/components/metaobjects-picker/api/query.js

@@ -0,0 +1,18 @@
+import { graphql } from "../../../shared/graphql/index.js";
+const metaobjectQuery = graphql(`query Metaobjects($filterKeys: MetaobjectFilterKeys, $after: ID, $before: ID, $first: Int, $last: Int, $query: String) {
+  metaobjects(filterKeys: $filterKeys, after: $after, before: $before, first: $first, last: $last, query: $query) {
+    pageInfo {
+      endCursor
+      hasNextPage
+      hasPreviousPage
+      startCursor
+    }
+    edges {
+      node {
+        _id
+        name
+      }
+    }
+  }
+}`);
+export { metaobjectQuery };

package/dist/components/metaobjects-picker/index.d.ts

@@ -0,0 +1 @@
+export { default as MetaobjectsPicker } from "./ui/MetaobjectsPicker";

package/dist/components/metaobjects-picker/index.js

@@ -0,0 +1,2 @@
+import MetaobjectsPicker from "./ui/MetaobjectsPicker.js";
+export { MetaobjectsPicker };

package/dist/components/metaobjects-picker/model/useMetaobjects.d.ts

@@ -0,0 +1,24 @@
+import { MetaobjectFilterKeys } from "../../../shared/graphql/graphql";
+type Props = {
+    skip?: boolean;
+    first?: number;
+    query?: string | null;
+    filterKeys?: MetaobjectFilterKeys;
+};
+export declare const useMetaobjects: (props?: Props) => {
+    metaobjects: {
+        __typename: "Metaobject";
+        _id?: string | null;
+        name?: string | null;
+    }[] | undefined;
+    isMetaobjectsLoading: boolean;
+    pageInfo: {
+        __typename: "PageInfo";
+        endCursor?: string | null;
+        hasNextPage?: boolean | null;
+        hasPreviousPage?: boolean | null;
+        startCursor?: string | null;
+    } | null | undefined;
+    fetchMoreMetaobjects: () => void;
+};
+export {};

package/dist/components/metaobjects-picker/model/useMetaobjects.js

@@ -0,0 +1,45 @@
+import { useQuery } from "@apollo/client/react";
+import { metaobjectQuery } from "../api/query.js";
+const useMetaobjects = (props = {})=>{
+    const { skip, first, query, filterKeys } = props;
+    const { data, loading: isMetaobjectsLoading, error, fetchMore } = useQuery(metaobjectQuery, {
+        skip,
+        variables: {
+            first,
+            query,
+            filterKeys
+        }
+    });
+    const metaobjects = data?.metaobjects?.edges?.map((edge)=>edge?.node).filter((node)=>null != node);
+    const pageInfo = data?.metaobjects?.pageInfo;
+    const fetchMoreMetaobjects = ()=>{
+        if (!pageInfo?.hasNextPage) return;
+        fetchMore({
+            variables: {
+                first,
+                query,
+                filterKeys,
+                after: pageInfo.endCursor
+            },
+            updateQuery (prev, { fetchMoreResult }) {
+                if (!fetchMoreResult.metaobjects?.edges || !prev.metaobjects?.edges) return prev;
+                return {
+                    metaobjects: {
+                        ...fetchMoreResult.metaobjects,
+                        edges: [
+                            ...prev.metaobjects.edges,
+                            ...fetchMoreResult.metaobjects.edges
+                        ]
+                    }
+                };
+            }
+        });
+    };
+    return {
+        metaobjects,
+        isMetaobjectsLoading,
+        pageInfo,
+        fetchMoreMetaobjects
+    };
+};
+export { useMetaobjects };

package/dist/components/metaobjects-picker/ui/MetaobjectsPicker.d.ts

@@ -0,0 +1,9 @@
+type Props = {
+    title?: string;
+    initialIds?: string[];
+    limit?: number;
+    onClose?: () => void;
+    onOk?: (metaobjectEntries: string[]) => void;
+};
+declare const MetaobjectsPicker: ({ title, initialIds, limit, onClose, onOk }: Props) => import("react/jsx-runtime").JSX.Element;
+export default MetaobjectsPicker;

package/dist/components/metaobjects-picker/ui/MetaobjectsPicker.js

@@ -0,0 +1,104 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { InfinityScroll } from "../../infinity-scroll/index.js";
+import { useFilterQuery } from "../../../shared/lib/index.js";
+import { BlockStack, Box, Button, Checkbox, InlineStack, Input, Modal, Spinner, Text } from "@soppiya/elementus";
+import classnames from "classnames";
+import lodash from "lodash";
+import { useState } from "react";
+import { useMetaobjects } from "../model/useMetaobjects.js";
+const MetaobjectsPicker = ({ title = "Metaobjects", initialIds = [], limit = 1 / 0, onClose, onOk })=>{
+    const [selectedMetaobject, setSelectedMetaobject] = useState(initialIds);
+    const { query, debounceQuery, onChangeQuery } = useFilterQuery();
+    const { metaobjects, isMetaobjectsLoading, fetchMoreMetaobjects, pageInfo } = useMetaobjects({
+        first: 20,
+        query: debounceQuery
+    });
+    const isReached = limit !== 1 / 0 && selectedMetaobject.length >= limit;
+    const isDisabled = limit !== 1 / 0 && selectedMetaobject.length > limit;
+    const handleSelectedMetaobject = (metaobjectId)=>{
+        if (selectedMetaobject?.includes(metaobjectId)) return void setSelectedMetaobject((prev)=>prev.filter((id)=>metaobjectId !== id));
+        if (isReached) return;
+        setSelectedMetaobject((prev)=>[
+                ...prev,
+                metaobjectId
+            ]);
+    };
+    const handleOk = ()=>{
+        if (lodash.isFunction(onOk)) onOk(selectedMetaobject);
+    };
+    const ButtonJSX = /*#__PURE__*/ jsx(InlineStack, {
+        justifyContent: "end",
+        children: /*#__PURE__*/ jsx(Button, {
+            disabled: lodash.isEmpty(selectedMetaobject) || isDisabled,
+            onClick: handleOk,
+            children: "Add"
+        })
+    });
+    return /*#__PURE__*/ jsx(Modal, {
+        open: true,
+        title: title,
+        buttons: ButtonJSX,
+        bodyPadding: 0,
+        onClose: onClose,
+        children: /*#__PURE__*/ jsxs(BlockStack, {
+            children: [
+                /*#__PURE__*/ jsx(Box, {
+                    padding: 60,
+                    children: /*#__PURE__*/ jsx(Input, {
+                        size: "sm",
+                        type: "search",
+                        value: query ?? "",
+                        onChange: (event)=>onChangeQuery(event.target.value)
+                    })
+                }),
+                isMetaobjectsLoading ? /*#__PURE__*/ jsx(InlineStack, {
+                    justifyContent: "center",
+                    padding: 80,
+                    children: /*#__PURE__*/ jsx(Spinner, {
+                        size: "md"
+                    })
+                }) : /*#__PURE__*/ jsxs(BlockStack, {
+                    children: [
+                        metaobjects?.map((metaobjects)=>/*#__PURE__*/ jsxs(InlineStack, {
+                                stack: "full",
+                                className: classnames('lg:cursor-pointer border-t border-t-[#ebebeb]!', {
+                                    'bg-[#f1f1f1ab] cursor-default!': !selectedMetaobject.includes(metaobjects._id) && isReached
+                                }),
+                                gapX: 60,
+                                padding: 60,
+                                onClick: ()=>handleSelectedMetaobject(String(metaobjects._id)),
+                                children: [
+                                    /*#__PURE__*/ jsx(InlineStack, {
+                                        alignItems: "center",
+                                        gapX: 60,
+                                        children: /*#__PURE__*/ jsx(Box, {
+                                            children: /*#__PURE__*/ jsx(Checkbox, {
+                                                disabled: !selectedMetaobject.includes(metaobjects._id) && isReached,
+                                                checked: selectedMetaobject.includes(String(metaobjects._id)),
+                                                onChange: ()=>{}
+                                            })
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx(BlockStack, {
+                                        gapY: 30,
+                                        justifyContent: "center",
+                                        children: /*#__PURE__*/ jsx(Text, {
+                                            size: "sm",
+                                            color: "secondary",
+                                            truncate: "truncate-1",
+                                            children: metaobjects.name
+                                        })
+                                    })
+                                ]
+                            }, metaobjects._id)),
+                        pageInfo?.hasNextPage && /*#__PURE__*/ jsx(InfinityScroll, {
+                            onFetch: fetchMoreMetaobjects
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+const ui_MetaobjectsPicker = MetaobjectsPicker;
+export { ui_MetaobjectsPicker as default };

package/dist/components/metaobjects-picker/ui/MetaobjectsPicker.stories.d.ts

@@ -0,0 +1,14 @@
+declare const meta: {
+    title: string;
+    component: ({ title, initialIds, limit, onClose, onOk }: {
+        title?: string;
+        initialIds?: string[];
+        limit?: number;
+        onClose?: () => void;
+        onOk?: (metaobjectEntries: string[]) => void;
+    }) => import("react/jsx-runtime").JSX.Element;
+};
+export default meta;
+export declare const Default: {
+    args: {};
+};

package/dist/components/metaobjects-picker/ui/MetaobjectsPicker.stories.js

@@ -0,0 +1,10 @@
+import MetaobjectsPicker from "./MetaobjectsPicker.js";
+const meta = {
+    title: "Example/MetaobjectsPicker",
+    component: MetaobjectsPicker
+};
+const MetaobjectsPicker_stories = meta;
+const Default = {
+    args: {}
+};
+export { Default, MetaobjectsPicker_stories as default };

package/dist/shared/graphql/gql.d.ts

@@ -21,8 +21,9 @@ type Documents = {
     "\n  query MediaUsage {\n    mediaUsage\n  }\n": typeof types.MediaUsageDocument;
     "\n  mutation AddMedias($input: [Upload!]!) {\n    addMedias(input: $input) {\n      _id\n      file_name\n      url\n      size\n    }\n  }\n": typeof types.AddMediasDocument;
     "\n  mutation DeleteMedias($cursors: [ID!]!) {\n    deleteMedias(cursors: $cursors) {\n      message\n    }\n  }\n": typeof types.DeleteMediasDocument;
-    "query Metafields($filterKeys: MetafieldFilterKeys, $first: Int) {\n  metafields(filterKeys: $filterKeys, first: $first) {\n    edges {\n      node {\n        _id\n        entry\n        name\n        type\n      }\n    }\n  }\n}": typeof types.MetafieldsDocument;
+    "query Metafields($filterKeys: MetafieldFilterKeys, $first: Int) {\n  metafields(filterKeys: $filterKeys, first: $first) {\n    edges {\n      node {\n        _id\n        entry\n        name\n        type\n        metaobject_reference {\n          _id\n        }\n      }\n    }\n  }\n}": typeof types.MetafieldsDocument;
     "query MetaobjectEntries($after: ID, $before: ID, $first: Int, $last: Int, $query: String, $filterKeys: MetaobjectEntryFilterKeys) {\n  metaobjectEntries(after: $after, before: $before, first: $first, last: $last, query: $query, filterKeys: $filterKeys) {\n    pageInfo {\n      endCursor\n      hasNextPage\n      hasPreviousPage\n      startCursor\n    }\n    edges {\n      node {\n        _id\n        title\n      }\n    }\n  }\n}": typeof types.MetaobjectEntriesDocument;
+    "query Metaobjects($filterKeys: MetaobjectFilterKeys, $after: ID, $before: ID, $first: Int, $last: Int, $query: String) {\n  metaobjects(filterKeys: $filterKeys, after: $after, before: $before, first: $first, last: $last, query: $query) {\n    pageInfo {\n      endCursor\n      hasNextPage\n      hasPreviousPage\n      startCursor\n    }\n    edges {\n      node {\n        _id\n        name\n      }\n    }\n  }\n}": typeof types.MetaobjectsDocument;
     "query Pages($filterKeys: PageFilterKeys, $after: ID, $before: ID, $first: Int, $last: Int, $query: String) {\n  pages(filterKeys: $filterKeys, after: $after, before: $before, first: $first, last: $last, query: $query) {\n    pageInfo {\n      endCursor\n      hasNextPage\n      hasPreviousPage\n      startCursor\n    }\n    edges {\n      node {\n        _id\n        title\n        image {\n          _id\n          url\n        }\n      }\n    }\n  }\n}": typeof types.PagesDocument;
     "\n  query Products($after: ID, $before: ID, $first: Int, $last: Int, $query: String,$filterKeys: ProductFilterKeys) {\n    products(after: $after, before: $before, first: $first, last: $last, query: $query,filterKeys: $filterKeys) {\n      pageInfo {\n        endCursor\n        hasNextPage\n        hasPreviousPage\n        startCursor\n      }\n      edges {\n        node {\n          _id\n          title\n          image {\n            _id\n            url\n          }\n        }\n      }\n    }\n  }\n": typeof types.ProductsDocument;
     "\n  query Variants($after: ID, $before: ID, $first: Int, $last: Int, $query: String,$filterKeys: VariantFilterKeys) {\n    variants(after: $after, before: $before, first: $first, last: $last, query: $query,filterKeys: $filterKeys) {\n      pageInfo {\n        endCursor\n        hasNextPage\n        hasPreviousPage\n        startCursor\n      }\n      edges {\n        node {\n          _id\n          option1\n          option2\n          option3\n          image {\n            _id\n            url\n          }\n          product {\n            _id\n            title\n          }\n        }\n      }\n    }\n  }\n": typeof types.VariantsDocument;
@@ -80,11 +81,15 @@ export declare function graphql(source: "\n  mutation DeleteMedias($cursors: [ID
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export declare function graphql(source: "query Metafields($filterKeys: MetafieldFilterKeys, $first: Int) {\n  metafields(filterKeys: $filterKeys, first: $first) {\n    edges {\n      node {\n        _id\n        entry\n        name\n        type\n      }\n    }\n  }\n}"): (typeof documents)["query Metafields($filterKeys: MetafieldFilterKeys, $first: Int) {\n  metafields(filterKeys: $filterKeys, first: $first) {\n    edges {\n      node {\n        _id\n        entry\n        name\n        type\n      }\n    }\n  }\n}"];
+export declare function graphql(source: "query Metafields($filterKeys: MetafieldFilterKeys, $first: Int) {\n  metafields(filterKeys: $filterKeys, first: $first) {\n    edges {\n      node {\n        _id\n        entry\n        name\n        type\n        metaobject_reference {\n          _id\n        }\n      }\n    }\n  }\n}"): (typeof documents)["query Metafields($filterKeys: MetafieldFilterKeys, $first: Int) {\n  metafields(filterKeys: $filterKeys, first: $first) {\n    edges {\n      node {\n        _id\n        entry\n        name\n        type\n        metaobject_reference {\n          _id\n        }\n      }\n    }\n  }\n}"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export declare function graphql(source: "query MetaobjectEntries($after: ID, $before: ID, $first: Int, $last: Int, $query: String, $filterKeys: MetaobjectEntryFilterKeys) {\n  metaobjectEntries(after: $after, before: $before, first: $first, last: $last, query: $query, filterKeys: $filterKeys) {\n    pageInfo {\n      endCursor\n      hasNextPage\n      hasPreviousPage\n      startCursor\n    }\n    edges {\n      node {\n        _id\n        title\n      }\n    }\n  }\n}"): (typeof documents)["query MetaobjectEntries($after: ID, $before: ID, $first: Int, $last: Int, $query: String, $filterKeys: MetaobjectEntryFilterKeys) {\n  metaobjectEntries(after: $after, before: $before, first: $first, last: $last, query: $query, filterKeys: $filterKeys) {\n    pageInfo {\n      endCursor\n      hasNextPage\n      hasPreviousPage\n      startCursor\n    }\n    edges {\n      node {\n        _id\n        title\n      }\n    }\n  }\n}"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export declare function graphql(source: "query Metaobjects($filterKeys: MetaobjectFilterKeys, $after: ID, $before: ID, $first: Int, $last: Int, $query: String) {\n  metaobjects(filterKeys: $filterKeys, after: $after, before: $before, first: $first, last: $last, query: $query) {\n    pageInfo {\n      endCursor\n      hasNextPage\n      hasPreviousPage\n      startCursor\n    }\n    edges {\n      node {\n        _id\n        name\n      }\n    }\n  }\n}"): (typeof documents)["query Metaobjects($filterKeys: MetaobjectFilterKeys, $after: ID, $before: ID, $first: Int, $last: Int, $query: String) {\n  metaobjects(filterKeys: $filterKeys, after: $after, before: $before, first: $first, last: $last, query: $query) {\n    pageInfo {\n      endCursor\n      hasNextPage\n      hasPreviousPage\n      startCursor\n    }\n    edges {\n      node {\n        _id\n        name\n      }\n    }\n  }\n}"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */