@soppiya/app-bridge 1.1.1 → 1.1.3

package/dist/components/articles-picker/ui/ArticlesPicker.js

@@ -2,19 +2,23 @@ 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, Image, InlineStack, Input, Modal, Spinner, Text } from "@soppiya/elementus";
+import classnames from "classnames";
 import lodash from "lodash";
 import { useState } from "react";
 import { userArticles } from "../model/useArticles.js";
-const ArticlesPicker = ({ title, initialIds = [], limit = 1 / 0, onClose, onOk })=>{
+const ArticlesPicker = ({ title = "Articles", initialIds = [], limit = 1 / 0, onClose, onOk })=>{
     const [selectedVariant, setSelectedVariant] = useState(initialIds);
     const { query, debounceQuery, onChangeQuery } = useFilterQuery();
     const { articles, pageInfo, isLoadingArticles, fetchMoreArticles } = userArticles({
         first: 20,
         query: debounceQuery
     });
-    const isSelected = limit === 1 / 0 ? true : 1 === limit ? 1 === selectedVariant.length : selectedVariant.length >= limit;
+    const isReached = limit !== 1 / 0 && selectedVariant.length >= limit;
+    const isDisabled = limit !== 1 / 0 && selectedVariant.length > limit;
     const handleSelectVariant = (articleId)=>{
-        selectedVariant?.includes(articleId) ? setSelectedVariant((prev)=>prev?.filter((id)=>articleId !== id)) : setSelectedVariant((prev)=>[
+        if (selectedVariant?.includes(articleId)) return void setSelectedVariant((prev)=>prev?.filter((id)=>articleId !== id));
+        if (isReached) return;
+        setSelectedVariant((prev)=>[
                 ...prev,
                 articleId
             ]);
@@ -26,21 +30,20 @@ const ArticlesPicker = ({ title, initialIds = [], limit = 1 / 0, onClose, onOk }
         gap: 50,
         justifyContent: "end",
         children: /*#__PURE__*/ jsx(Button, {
-            disabled: lodash.isEmpty(selectedVariant) || !isSelected,
+            disabled: lodash.isEmpty(selectedVariant) || isDisabled,
             onClick: handleOk,
             children: "Add"
         })
     });
     return /*#__PURE__*/ jsx(Modal, {
         open: true,
-        title: title || "Artilces",
+        title: title,
         bodyPadding: 0,
         buttons: ButtonJSX,
         onClose: onClose,
         children: /*#__PURE__*/ jsxs(BlockStack, {
             children: [
                 /*#__PURE__*/ jsx(Box, {
-                    className: "border-b border-b-[#ebebeb]! h",
                     padding: 60,
                     children: /*#__PURE__*/ jsx(Input, {
                         size: "sm",
@@ -59,7 +62,9 @@ const ArticlesPicker = ({ title, initialIds = [], limit = 1 / 0, onClose, onOk }
                     children: [
                         articles?.map((article)=>/*#__PURE__*/ jsxs(InlineStack, {
                                 stack: "full",
-                                className: "lg:cursor-pointer border-b border-b-[#ebebeb]!",
+                                className: classnames('lg:cursor-pointer border-t border-t-[#ebebeb]!', {
+                                    'bg-[#f1f1f1ab] cursor-default!': !selectedVariant.includes(article._id) && isReached
+                                }),
                                 gapX: 60,
                                 padding: 60,
                                 onClick: ()=>handleSelectVariant(String(article._id)),
@@ -70,6 +75,7 @@ const ArticlesPicker = ({ title, initialIds = [], limit = 1 / 0, onClose, onOk }
                                         children: [
                                             /*#__PURE__*/ jsx(Box, {
                                                 children: /*#__PURE__*/ jsx(Checkbox, {
+                                                    disabled: !selectedVariant.includes(article._id) && isReached,
                                                     checked: selectedVariant.includes(String(article._id)),
                                                     onChange: ()=>{}
                                                 })

package/dist/components/blogs-picker/ui/BlogsPicker.js

@@ -2,19 +2,23 @@ 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, Image, InlineStack, Input, Modal, Spinner, Text } from "@soppiya/elementus";
+import classnames from "classnames";
 import lodash from "lodash";
 import { useState } from "react";
 import { useBlogs } from "../model/useBlogs.js";
-const BlogsPicker = ({ title, initialIds = [], limit = 1 / 0, onClose, onOk })=>{
+const BlogsPicker = ({ title = "Blogs", initialIds = [], limit = 1 / 0, onClose, onOk })=>{
     const [selectedBlog, setSelectedBlog] = useState(initialIds);
     const { query, debounceQuery, onChangeQuery } = useFilterQuery();
     const { blogs, isLoadingBlogs, fetchMoreBlogs, pageInfo } = useBlogs({
         first: 20,
         query: debounceQuery
     });
-    const isSelected = limit === 1 / 0 ? true : 1 === limit ? 1 === selectedBlog.length : selectedBlog.length >= limit;
+    const isReached = limit !== 1 / 0 && selectedBlog.length >= limit;
+    const isDisabled = limit !== 1 / 0 && selectedBlog.length > limit;
     const handleSelectedBlog = (blogId)=>{
-        selectedBlog.includes(blogId) ? setSelectedBlog((prev)=>prev.filter((id)=>id !== blogId)) : setSelectedBlog((prev)=>[
+        if (selectedBlog?.includes(blogId)) return void setSelectedBlog((prev)=>prev?.filter((id)=>blogId !== id));
+        if (isReached) return;
+        setSelectedBlog((prev)=>[
                 ...prev,
                 blogId
             ]);
@@ -22,25 +26,23 @@ const BlogsPicker = ({ title, initialIds = [], limit = 1 / 0, onClose, onOk })=>
     const handleOk = ()=>{
         if (lodash.isFunction(onOk)) onOk(selectedBlog);
     };
-    console.log(selectedBlog);
     const ButtonJSX = /*#__PURE__*/ jsx(InlineStack, {
         justifyContent: "end",
         children: /*#__PURE__*/ jsx(Button, {
             onClick: handleOk,
-            disabled: lodash.isEmpty(selectedBlog) || !isSelected,
+            disabled: lodash.isEmpty(selectedBlog) || isDisabled,
             children: "Add"
         })
     });
     return /*#__PURE__*/ jsx(Modal, {
         open: true,
-        title: title || "Blogs",
+        title: title,
         buttons: ButtonJSX,
         bodyPadding: 0,
         onClose: onClose,
         children: /*#__PURE__*/ jsxs(BlockStack, {
             children: [
                 /*#__PURE__*/ jsx(Box, {
-                    className: "border-b border-b-[#ebebeb]! h",
                     padding: 60,
                     children: /*#__PURE__*/ jsx(Input, {
                         size: "sm",
@@ -59,7 +61,9 @@ const BlogsPicker = ({ title, initialIds = [], limit = 1 / 0, onClose, onOk })=>
                     children: [
                         blogs?.map((blog)=>/*#__PURE__*/ jsxs(InlineStack, {
                                 stack: "full",
-                                className: "lg:cursor-pointer border-b border-b-[#ebebeb]!",
+                                className: classnames('lg:cursor-pointer border-t border-t-[#ebebeb]!', {
+                                    'bg-[#f1f1f1ab] cursor-default!': !selectedBlog.includes(blog._id) && isReached
+                                }),
                                 gapX: 60,
                                 padding: 60,
                                 onClick: ()=>handleSelectedBlog(String(blog._id)),
@@ -70,6 +74,7 @@ const BlogsPicker = ({ title, initialIds = [], limit = 1 / 0, onClose, onOk })=>
                                         children: [
                                             /*#__PURE__*/ jsx(Box, {
                                                 children: /*#__PURE__*/ jsx(Checkbox, {
+                                                    disabled: !selectedBlog.includes(blog._id) && isReached,
                                                     checked: selectedBlog.includes(String(blog._id)),
                                                     onChange: ()=>{}
                                                 })

package/dist/components/collections-pciker/ui/CollectionPicker.js

@@ -2,43 +2,46 @@ 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, Image, InlineStack, Input, Modal, Spinner, Text } from "@soppiya/elementus";
+import classnames from "classnames";
 import lodash from "lodash";
 import { useState } from "react";
 import { useCollections } from "../model/useCollections.js";
-const CollectionPicker = ({ title, initialIds = [], limit = 1 / 0, onClose, onOk })=>{
-    const [selectedVariant, setSelectedVariant] = useState(initialIds);
+const CollectionPicker = ({ title = "Collections", initialIds = [], limit = 1 / 0, onClose, onOk })=>{
+    const [selectedCollection, setSelectedCollection] = useState(initialIds);
     const { query, debounceQuery, onChangeQuery } = useFilterQuery();
     const { collections, isLoadingCollections, fetchMoreCollections, pageInfo } = useCollections({
         query: debounceQuery
     });
-    const isSelected = limit === 1 / 0 ? true : 1 === limit ? 1 === selectedVariant.length : selectedVariant.length >= limit;
+    const isReached = limit !== 1 / 0 && selectedCollection.length >= limit;
+    const isDisabled = limit !== 1 / 0 && selectedCollection.length > limit;
     const handleSelectVariant = (productId)=>{
-        selectedVariant.includes(productId) ? setSelectedVariant((prev)=>prev.filter((id)=>productId !== id)) : setSelectedVariant((prev)=>[
+        if (selectedCollection.includes(productId)) return void setSelectedCollection((prev)=>prev.filter((id)=>productId !== id));
+        if (isReached) return;
+        setSelectedCollection((prev)=>[
                 ...prev,
                 productId
             ]);
     };
     const handleOk = ()=>{
-        if (lodash.isFunction(onOk)) onOk(selectedVariant);
+        if (lodash.isFunction(onOk)) onOk(selectedCollection);
     };
     const ButtonJSX = /*#__PURE__*/ jsx(InlineStack, {
         justifyContent: "end",
         children: /*#__PURE__*/ jsx(Button, {
-            disabled: lodash.isEmpty(selectedVariant) || !isSelected,
+            disabled: lodash.isEmpty(selectedCollection) || isDisabled,
             onClick: handleOk,
             children: "Add"
         })
     });
     return /*#__PURE__*/ jsx(Modal, {
         open: true,
-        title: title || "Collections",
+        title: title,
         bodyPadding: 0,
         buttons: ButtonJSX,
         onClose: onClose,
         children: /*#__PURE__*/ jsxs(BlockStack, {
             children: [
                 /*#__PURE__*/ jsx(Box, {
-                    className: "border-b border-b-[#ebebeb]! h",
                     padding: 60,
                     children: /*#__PURE__*/ jsx(Input, {
                         size: "sm",
@@ -57,7 +60,9 @@ const CollectionPicker = ({ title, initialIds = [], limit = 1 / 0, onClose, onOk
                     children: [
                         collections?.map((collection)=>/*#__PURE__*/ jsxs(InlineStack, {
                                 stack: "full",
-                                className: "lg:cursor-pointer border-b border-b-[#ebebeb]!",
+                                className: classnames('lg:cursor-pointer border-t border-t-[#ebebeb]!', {
+                                    'bg-[#f1f1f1ab] cursor-default!': !selectedCollection.includes(collection._id) && isReached
+                                }),
                                 gapX: 60,
                                 padding: 60,
                                 onClick: ()=>handleSelectVariant(String(collection._id)),
@@ -68,7 +73,8 @@ const CollectionPicker = ({ title, initialIds = [], limit = 1 / 0, onClose, onOk
                                         children: [
                                             /*#__PURE__*/ jsx(Box, {
                                                 children: /*#__PURE__*/ jsx(Checkbox, {
-                                                    checked: selectedVariant.includes(String(collection._id)),
+                                                    disabled: !selectedCollection.includes(collection._id) && isReached,
+                                                    checked: selectedCollection.includes(String(collection._id)),
                                                     onChange: ()=>{}
                                                 })
                                             }),

package/dist/components/collections-pciker/ui/CollectionPicker.stories.d.ts

@@ -10,8 +10,5 @@ declare const meta: {
 };
 export default meta;
 export declare const Default: {
-    args: {
-        primary: boolean;
-        label: string;
-    };
+    args: {};
 };

package/dist/components/collections-pciker/ui/CollectionPicker.stories.js

@@ -5,9 +5,6 @@ const meta = {
 };
 const CollectionPicker_stories = meta;
 const Default = {
-    args: {
-        primary: true,
-        label: "Button"
-    }
+    args: {}
 };
 export { Default, CollectionPicker_stories as default };

package/dist/components/index.d.ts

@@ -1,6 +1,7 @@
 export * from "./articles-picker";
 export * from "./blogs-picker";
 export * from "./collections-pciker";
+export * from "./link-list-picker";
 export * from "./media";
 export * from "./meta-data";
 export * from "./pages-picker";

package/dist/components/index.js

@@ -1,6 +1,7 @@
 export * from "./articles-picker/index.js";
 export * from "./blogs-picker/index.js";
 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 "./pages-picker/index.js";

package/dist/components/link-list-picker/api/query.d.ts

@@ -0,0 +1,8 @@
+export declare const linkListQuery: import("@graphql-typed-document-node/core").TypedDocumentNode<import("../../../shared/graphql/graphql").LinklistsQuery, import("../../../shared/graphql/graphql").Exact<{
+    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"]>;
+    filterKeys?: import("../../../shared/graphql/graphql").InputMaybe<import("../../../shared/graphql/graphql").LinklistFilterKeys>;
+}>>;

package/dist/components/link-list-picker/api/query.js

@@ -0,0 +1,22 @@
+import { graphql } from "../../../shared/graphql/index.js";
+const linkListQuery = graphql(`query Linklists($after: ID, $before: ID, $first: Int, $last: Int, $query: String, $filterKeys: LinklistFilterKeys) {
+  linklists(after: $after, before: $before, first: $first, last: $last, query: $query, filterKeys: $filterKeys) {
+    pageInfo {
+      endCursor
+      hasNextPage
+      hasPreviousPage
+      startCursor
+    }
+    edges {
+      node {
+        _id
+        title
+        links {
+          url
+          _id
+        }
+      }
+    }
+  }
+}`);
+export { linkListQuery };

package/dist/components/link-list-picker/index.d.ts

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

package/dist/components/link-list-picker/index.js

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

package/dist/components/link-list-picker/model/useLinkList.d.ts

@@ -0,0 +1,30 @@
+import { LinklistFilterKeys } from "../../../shared/graphql/graphql";
+type Props = {
+    skip?: boolean;
+    first?: number;
+    query?: string | null;
+    filterKeys?: LinklistFilterKeys;
+};
+export declare const useLinklist: (props?: Props) => {
+    linklists: {
+        __typename: "Linklist";
+        _id?: string | null;
+        title?: string | null;
+        links?: Array<{
+            __typename: "LinklistLayer1";
+            url?: string | null;
+            _id?: string | null;
+        } | null> | null;
+    }[] | undefined;
+    pageInfo: {
+        __typename: "PageInfo";
+        endCursor?: string | null;
+        hasNextPage?: boolean | null;
+        hasPreviousPage?: boolean | null;
+        startCursor?: string | null;
+    } | null | undefined;
+    isLoadingLinklist: boolean;
+    error: import("@apollo/client").ErrorLike | undefined;
+    fetchMoreLinklists: () => void;
+};
+export {};

package/dist/components/link-list-picker/model/useLinkList.js

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

package/dist/components/link-list-picker/ui/LinkListPicker.d.ts

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

package/dist/components/link-list-picker/ui/LinkListPicker.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 { useLinklist } from "../model/useLinkList.js";
+const LinkListPicker = ({ title = "Linklist", initialIds = [], limit = 1 / 0, onClose, onOk })=>{
+    const [selectedLinklist, setSelectedLinklist] = useState(initialIds);
+    const { query, debounceQuery, onChangeQuery } = useFilterQuery();
+    const { linklists, isLoadingLinklist, fetchMoreLinklists, pageInfo } = useLinklist({
+        first: 20,
+        query: debounceQuery
+    });
+    const isReached = limit !== 1 / 0 && selectedLinklist.length >= limit;
+    const isDisabled = limit !== 1 / 0 && selectedLinklist.length > limit;
+    const handleSelectedLinklist = (linkListId)=>{
+        if (selectedLinklist.includes(linkListId)) return void setSelectedLinklist((prev)=>prev.filter((id)=>id !== linkListId));
+        if (isReached) return;
+        setSelectedLinklist((prev)=>[
+                ...prev,
+                linkListId
+            ]);
+    };
+    const handleOk = ()=>{
+        if (lodash.isFunction(onOk)) onOk(selectedLinklist);
+    };
+    const ButtonJSX = /*#__PURE__*/ jsx(InlineStack, {
+        justifyContent: "end",
+        children: /*#__PURE__*/ jsx(Button, {
+            disabled: lodash.isEmpty(selectedLinklist) || isDisabled,
+            onClick: handleOk,
+            children: "Add"
+        })
+    });
+    return /*#__PURE__*/ jsx(Modal, {
+        open: true,
+        title: title,
+        bodyPadding: 0,
+        buttons: ButtonJSX,
+        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)
+                    })
+                }),
+                isLoadingLinklist ? /*#__PURE__*/ jsx(InlineStack, {
+                    justifyContent: "center",
+                    padding: 80,
+                    children: /*#__PURE__*/ jsx(Spinner, {
+                        size: "md"
+                    })
+                }) : /*#__PURE__*/ jsxs(BlockStack, {
+                    children: [
+                        linklists?.map((linklist)=>/*#__PURE__*/ jsxs(InlineStack, {
+                                stack: "full",
+                                className: classnames('lg:cursor-pointer border-t border-t-[#ebebeb]!', {
+                                    'bg-[#f1f1f1ab] cursor-default!': !selectedLinklist.includes(linklist._id) && isReached
+                                }),
+                                gapX: 60,
+                                padding: 60,
+                                onClick: ()=>handleSelectedLinklist(String(linklist._id)),
+                                children: [
+                                    /*#__PURE__*/ jsx(InlineStack, {
+                                        alignItems: "center",
+                                        gapX: 60,
+                                        children: /*#__PURE__*/ jsx(Box, {
+                                            children: /*#__PURE__*/ jsx(Checkbox, {
+                                                disabled: !selectedLinklist.includes(linklist._id) && isReached,
+                                                checked: selectedLinklist.includes(String(linklist._id)),
+                                                onChange: ()=>{}
+                                            })
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx(BlockStack, {
+                                        gapY: 30,
+                                        justifyContent: "center",
+                                        children: /*#__PURE__*/ jsx(Text, {
+                                            size: "sm",
+                                            color: "secondary",
+                                            truncate: "truncate-1",
+                                            children: linklist.title
+                                        })
+                                    })
+                                ]
+                            }, linklist._id)),
+                        pageInfo?.hasNextPage && /*#__PURE__*/ jsx(InfinityScroll, {
+                            onFetch: fetchMoreLinklists
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+const ui_LinkListPicker = LinkListPicker;
+export { ui_LinkListPicker as default };

package/dist/components/link-list-picker/ui/LinkListPicker.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?: (linklist: string[]) => void;
+    }) => import("react/jsx-runtime").JSX.Element;
+};
+export default meta;
+export declare const Default: {
+    args: {};
+};

package/dist/components/link-list-picker/ui/LinkListPicker.stories.js

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

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

@@ -1,4 +1,5 @@
 interface Props {
+    title?: string;
     scope: string;
     value?: {
         metafield: string;
@@ -9,5 +10,5 @@ interface Props {
         value: string[];
     }) => void;
 }
-declare const MetaData: ({ scope, value, onChange }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const MetaData: ({ title, scope, value, onChange }: Props) => import("react/jsx-runtime").JSX.Element;
 export default MetaData;

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

@@ -4,7 +4,7 @@ import { BlockStack, Card, Text } from "@soppiya/elementus";
 import { isFunction } from "lodash";
 import { useGetMetaFields } from "../model/useGetMetaFields.js";
 import MetaDataItem from "./MetaDataItem.js";
-const MetaData_MetaData = ({ scope = "product", value = [], onChange })=>{
+const MetaData_MetaData = ({ title = "Meta fields", scope = "product", value = [], onChange })=>{
     const { metafields, loading } = useGetMetaFields([
         scope
     ]);
@@ -22,12 +22,10 @@ const MetaData_MetaData = ({ scope = "product", value = [], onChange })=>{
         children: [
             /*#__PURE__*/ jsx(BlockStack, {
                 padding: 70,
-                children: /*#__PURE__*/ jsx("div", {
-                    children: /*#__PURE__*/ jsx(Text, {
-                        size: "md",
-                        weight: "semibold",
-                        children: "Meta fields"
-                    })
+                children: /*#__PURE__*/ jsx(Text, {
+                    size: "md",
+                    weight: "semibold",
+                    children: title
                 })
             }),
             /*#__PURE__*/ jsx(BlockStack, {
@@ -46,12 +44,10 @@ const MetaData_MetaData = ({ scope = "product", value = [], onChange })=>{
         children: [
             /*#__PURE__*/ jsx(BlockStack, {
                 padding: 70,
-                children: /*#__PURE__*/ jsx("div", {
-                    children: /*#__PURE__*/ jsx(Text, {
-                        size: "md",
-                        weight: "semibold",
-                        children: "Meta fields"
-                    })
+                children: /*#__PURE__*/ jsx(Text, {
+                    size: "md",
+                    weight: "semibold",
+                    children: title
                 })
             }),
             loading && !metafields ? /*#__PURE__*/ jsx(Loading, {}) : metafields.map((metaField)=>/*#__PURE__*/ jsx(MetaDataItem, {

package/dist/components/metafield-entries/api/query.d.ts

@@ -0,0 +1,8 @@
+export declare const metaobjectEntriesQuery: import("@graphql-typed-document-node/core").TypedDocumentNode<import("../../../shared/graphql/graphql").MetaobjectEntriesQuery, import("../../../shared/graphql/graphql").Exact<{
+    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"]>;
+    filterKeys?: import("../../../shared/graphql/graphql").InputMaybe<import("../../../shared/graphql/graphql").MetaobjectEntryFilterKeys>;
+}>>;

package/dist/components/metafield-entries/api/query.js

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

package/dist/components/metafield-entries/model/useMetaobjectEntries.d.ts

@@ -0,0 +1,25 @@
+import { MetaobjectEntryFilterKeys } from "../../../shared/graphql/graphql";
+type Props = {
+    skip?: boolean;
+    first?: number;
+    query?: string | null;
+    filterKeys?: MetaobjectEntryFilterKeys;
+};
+export declare const useMetaobjectEntries: (props?: Props) => {
+    metaobjectEntries: {
+        __typename: "MetaobjectEntry";
+        _id?: string | null;
+        title?: string | null;
+    }[] | undefined;
+    isLoadingMetaobjectEntries: boolean;
+    error: import("@apollo/client").ErrorLike | undefined;
+    fetchMoreMetaobjectEntries: () => void;
+    pageInfo: {
+        __typename: "PageInfo";
+        endCursor?: string | null;
+        hasNextPage?: boolean | null;
+        hasPreviousPage?: boolean | null;
+        startCursor?: string | null;
+    } | null | undefined;
+};
+export {};