@contentful/field-editor-shared 2.17.1-alpha.0 → 2.17.1-canary.59

package/dist/cjs/hooks/useContentTypes.js

@@ -0,0 +1,94 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    fetchContentType: function() {
+        return fetchContentType;
+    },
+    useContentType: function() {
+        return useContentType;
+    },
+    useContentTypes: function() {
+        return useContentTypes;
+    }
+});
+const _react = require("react");
+const _queryClient = require("../queryClient");
+const _queryKeys = require("../queryKeys");
+function useContentType(sdk, contentTypeId, options) {
+    const spaceId = sdk.ids.space;
+    const environmentId = sdk.ids.environmentAlias ?? sdk.ids.environment;
+    return (0, _queryClient.useQuery)((0, _queryKeys.createGetContentTypeKey)(spaceId, environmentId, contentTypeId), ()=>sdk.cma.contentType.get({
+            contentTypeId
+        }), {
+        staleTime: Infinity,
+        ...options
+    });
+}
+async function fetchContentType(sdk, contentTypeId) {
+    return sdk.cma.contentType.get({
+        contentTypeId
+    });
+}
+function useContentTypes(source) {
+    const cma = 'cma' in source ? source.cma : source;
+    const navigator = 'navigator' in source ? source.navigator : undefined;
+    const queryClient = (0, _queryClient.useQueryClient)();
+    const spaceId = 'ids' in source ? source.ids.space : '';
+    const environmentId = 'ids' in source ? source.ids.environmentAlias ?? source.ids.environment : '';
+    const queryParams = (0, _react.useMemo)(()=>({
+            limit: 1000
+        }), []);
+    const { data: contentTypes = [] } = (0, _queryClient.useQuery)((0, _queryKeys.createGetManyContentTypesKey)(spaceId, environmentId, queryParams), async ()=>{
+        const allContentTypes = [];
+        const limit = 1000;
+        let skip = 0;
+        let total = 0;
+        do {
+            const response = await cma.contentType.getMany({
+                query: {
+                    limit,
+                    skip
+                }
+            });
+            allContentTypes.push(...response.items);
+            total = response.total;
+            skip += response.items.length;
+        }while (skip < total)
+        return allContentTypes;
+    }, {
+        staleTime: Infinity,
+        refetchOnMount: false
+    });
+    (0, _react.useEffect)(()=>{
+        if (!navigator?.onSlideInNavigation) {
+            return;
+        }
+        const unsubscribe = navigator.onSlideInNavigation(({ oldSlideLevel, newSlideLevel })=>{
+            if (oldSlideLevel > newSlideLevel) {
+                void queryClient.invalidateQueries((0, _queryKeys.createGetManyContentTypesKey)(spaceId, environmentId, queryParams));
+            }
+        });
+        return unsubscribe;
+    }, [
+        navigator,
+        queryClient,
+        spaceId,
+        environmentId,
+        queryParams
+    ]);
+    const invalidate = ()=>{
+        return queryClient.invalidateQueries((0, _queryKeys.createGetManyContentTypesKey)(spaceId, environmentId, queryParams));
+    };
+    return {
+        contentTypes,
+        invalidate
+    };
+}

package/dist/cjs/index.js

@@ -117,12 +117,14 @@ _export_star(require("./types"), exports);
 _export_star(require("./hooks/useActiveLocales"), exports);
 _export_star(require("./hooks/useReleaseStatus"), exports);
 _export_star(require("./hooks/useLocalePublishStatus"), exports);
+_export_star(require("./hooks/useContentTypes"), exports);
 _export_star(require("./LocalePublishingEntityStatusBadge"), exports);
 _export_star(require("./ReleaseEntityStatusBadge"), exports);
 _export_star(require("./utils/determineReleaseAction"), exports);
 _export_star(require("./utils/getEntityReleaseStatus"), exports);
 _export_star(require("./utils/getReleaseStatusBadgeConfig"), exports);
 const _queryClient = require("./queryClient");
+_export_star(require("./queryKeys"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/dist/cjs/queryClient.js

@@ -61,12 +61,12 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-let QueryClient;
+let RQQueryClient;
 let useRQ;
 let useHostQueryClient = ()=>undefined;
 try {
     const rq = require('@tanstack/react-query');
-    QueryClient = rq.QueryClient;
+    RQQueryClient = rq.QueryClient;
     useRQ = rq.useQuery;
     useHostQueryClient = rq.useQueryClient;
 } catch  {}
@@ -86,7 +86,10 @@ function useQueryClient() {
             return client;
         }
         if (hostClient) return hostClient;
-        return new QueryClient({
+        if (!RQQueryClient) {
+            throw new Error('@tanstack/react-query is required to use QueryClient. Please install it as a dependency: npm install @tanstack/react-query');
+        }
+        return new RQQueryClient({
             defaultOptions: {
                 queries: {
                     useErrorBoundary: false,
@@ -104,13 +107,20 @@ function useQueryClient() {
     ]);
 }
 function useQuery(queryKey, queryFn, options) {
+    if (!useRQ) {
+        throw new Error('@tanstack/react-query is required to use useQuery. Please install it as a dependency: npm install @tanstack/react-query');
+    }
     return useRQ(queryKey, queryFn, {
         ...options,
         context: clientContext
     });
 }
-function SharedQueryClientProvider({ children }) {
-    const client = useQueryClient();
+function SharedQueryClientProvider({ children, client: providedClient }) {
+    const internalClient = useQueryClient();
+    const client = _react.useMemo(()=>providedClient ?? internalClient, [
+        providedClient,
+        internalClient
+    ]);
     return /*#__PURE__*/ _react.createElement(clientContext.Provider, {
         value: client
     }, children);

package/dist/cjs/queryKeys.js

@@ -0,0 +1,94 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    createGetAssetKey: function() {
+        return createGetAssetKey;
+    },
+    createGetContentTypeKey: function() {
+        return createGetContentTypeKey;
+    },
+    createGetEntryKey: function() {
+        return createGetEntryKey;
+    },
+    createGetManyContentTypesKey: function() {
+        return createGetManyContentTypesKey;
+    },
+    createGetManyLocalesKey: function() {
+        return createGetManyLocalesKey;
+    },
+    createGetSpaceKey: function() {
+        return createGetSpaceKey;
+    }
+});
+const createGetEntryKey = (spaceId, environmentId, entryId)=>{
+    return [
+        'spaces',
+        spaceId,
+        'environments',
+        environmentId,
+        'entries',
+        'get',
+        entryId
+    ];
+};
+const createGetAssetKey = (spaceId, environmentId, assetId)=>{
+    return [
+        'spaces',
+        spaceId,
+        'environments',
+        environmentId,
+        'assets',
+        'get',
+        assetId
+    ];
+};
+const createGetSpaceKey = (spaceId)=>{
+    return [
+        'spaces',
+        'get',
+        spaceId
+    ];
+};
+const createGetManyLocalesKey = (spaceId, environmentId, params = {})=>{
+    return [
+        'spaces',
+        spaceId,
+        'environments',
+        environmentId,
+        'locales',
+        params
+    ];
+};
+const createGetContentTypeKey = (spaceId, environmentId, contentTypeId)=>{
+    return [
+        'spaces',
+        spaceId,
+        'environments',
+        environmentId,
+        'content_types',
+        'get',
+        contentTypeId
+    ];
+};
+const createGetManyContentTypesKey = (spaceId, environmentId, params = {})=>{
+    const prefix = [
+        'spaces',
+        spaceId,
+        'environments',
+        environmentId,
+        'content_types',
+        'getMany'
+    ];
+    return Object.keys(params).length === 0 ? prefix : [
+        ...prefix,
+        params
+    ];
+};

package/dist/esm/hooks/useContentTypes.js

@@ -0,0 +1,73 @@
+import { useEffect, useMemo } from 'react';
+import { useQuery, useQueryClient } from '../queryClient';
+import { createGetContentTypeKey, createGetManyContentTypesKey } from '../queryKeys';
+export function useContentType(sdk, contentTypeId, options) {
+    const spaceId = sdk.ids.space;
+    const environmentId = sdk.ids.environmentAlias ?? sdk.ids.environment;
+    return useQuery(createGetContentTypeKey(spaceId, environmentId, contentTypeId), ()=>sdk.cma.contentType.get({
+            contentTypeId
+        }), {
+        staleTime: Infinity,
+        ...options
+    });
+}
+export async function fetchContentType(sdk, contentTypeId) {
+    return sdk.cma.contentType.get({
+        contentTypeId
+    });
+}
+export function useContentTypes(source) {
+    const cma = 'cma' in source ? source.cma : source;
+    const navigator = 'navigator' in source ? source.navigator : undefined;
+    const queryClient = useQueryClient();
+    const spaceId = 'ids' in source ? source.ids.space : '';
+    const environmentId = 'ids' in source ? source.ids.environmentAlias ?? source.ids.environment : '';
+    const queryParams = useMemo(()=>({
+            limit: 1000
+        }), []);
+    const { data: contentTypes = [] } = useQuery(createGetManyContentTypesKey(spaceId, environmentId, queryParams), async ()=>{
+        const allContentTypes = [];
+        const limit = 1000;
+        let skip = 0;
+        let total = 0;
+        do {
+            const response = await cma.contentType.getMany({
+                query: {
+                    limit,
+                    skip
+                }
+            });
+            allContentTypes.push(...response.items);
+            total = response.total;
+            skip += response.items.length;
+        }while (skip < total)
+        return allContentTypes;
+    }, {
+        staleTime: Infinity,
+        refetchOnMount: false
+    });
+    useEffect(()=>{
+        if (!navigator?.onSlideInNavigation) {
+            return;
+        }
+        const unsubscribe = navigator.onSlideInNavigation(({ oldSlideLevel, newSlideLevel })=>{
+            if (oldSlideLevel > newSlideLevel) {
+                void queryClient.invalidateQueries(createGetManyContentTypesKey(spaceId, environmentId, queryParams));
+            }
+        });
+        return unsubscribe;
+    }, [
+        navigator,
+        queryClient,
+        spaceId,
+        environmentId,
+        queryParams
+    ]);
+    const invalidate = ()=>{
+        return queryClient.invalidateQueries(createGetManyContentTypesKey(spaceId, environmentId, queryParams));
+    };
+    return {
+        contentTypes,
+        invalidate
+    };
+}

package/dist/esm/index.js

@@ -12,9 +12,11 @@ export * from './types';
 export * from './hooks/useActiveLocales';
 export * from './hooks/useReleaseStatus';
 export * from './hooks/useLocalePublishStatus';
+export * from './hooks/useContentTypes';
 export * from './LocalePublishingEntityStatusBadge';
 export * from './ReleaseEntityStatusBadge';
 export * from './utils/determineReleaseAction';
 export * from './utils/getEntityReleaseStatus';
 export * from './utils/getReleaseStatusBadgeConfig';
 export { SharedQueryClientProvider, useQueryClient, useQuery } from './queryClient';
+export * from './queryKeys';

package/dist/esm/queryClient.js

@@ -1,10 +1,10 @@
 import * as React from 'react';
-let QueryClient;
+let RQQueryClient;
 let useRQ;
 let useHostQueryClient = ()=>undefined;
 try {
     const rq = require('@tanstack/react-query');
-    QueryClient = rq.QueryClient;
+    RQQueryClient = rq.QueryClient;
     useRQ = rq.useQuery;
     useHostQueryClient = rq.useQueryClient;
 } catch  {}
@@ -24,7 +24,10 @@ export function useQueryClient() {
             return client;
         }
         if (hostClient) return hostClient;
-        return new QueryClient({
+        if (!RQQueryClient) {
+            throw new Error('@tanstack/react-query is required to use QueryClient. Please install it as a dependency: npm install @tanstack/react-query');
+        }
+        return new RQQueryClient({
             defaultOptions: {
                 queries: {
                     useErrorBoundary: false,
@@ -42,13 +45,20 @@ export function useQueryClient() {
     ]);
 }
 export function useQuery(queryKey, queryFn, options) {
+    if (!useRQ) {
+        throw new Error('@tanstack/react-query is required to use useQuery. Please install it as a dependency: npm install @tanstack/react-query');
+    }
     return useRQ(queryKey, queryFn, {
         ...options,
         context: clientContext
     });
 }
-export function SharedQueryClientProvider({ children }) {
-    const client = useQueryClient();
+export function SharedQueryClientProvider({ children, client: providedClient }) {
+    const internalClient = useQueryClient();
+    const client = React.useMemo(()=>providedClient ?? internalClient, [
+        providedClient,
+        internalClient
+    ]);
     return /*#__PURE__*/ React.createElement(clientContext.Provider, {
         value: client
     }, children);

package/dist/esm/queryKeys.js

@@ -0,0 +1,64 @@
+export const createGetEntryKey = (spaceId, environmentId, entryId)=>{
+    return [
+        'spaces',
+        spaceId,
+        'environments',
+        environmentId,
+        'entries',
+        'get',
+        entryId
+    ];
+};
+export const createGetAssetKey = (spaceId, environmentId, assetId)=>{
+    return [
+        'spaces',
+        spaceId,
+        'environments',
+        environmentId,
+        'assets',
+        'get',
+        assetId
+    ];
+};
+export const createGetSpaceKey = (spaceId)=>{
+    return [
+        'spaces',
+        'get',
+        spaceId
+    ];
+};
+export const createGetManyLocalesKey = (spaceId, environmentId, params = {})=>{
+    return [
+        'spaces',
+        spaceId,
+        'environments',
+        environmentId,
+        'locales',
+        params
+    ];
+};
+export const createGetContentTypeKey = (spaceId, environmentId, contentTypeId)=>{
+    return [
+        'spaces',
+        spaceId,
+        'environments',
+        environmentId,
+        'content_types',
+        'get',
+        contentTypeId
+    ];
+};
+export const createGetManyContentTypesKey = (spaceId, environmentId, params = {})=>{
+    const prefix = [
+        'spaces',
+        spaceId,
+        'environments',
+        environmentId,
+        'content_types',
+        'getMany'
+    ];
+    return Object.keys(params).length === 0 ? prefix : [
+        ...prefix,
+        params
+    ];
+};

package/dist/types/hooks/useContentTypes.d.ts

@@ -0,0 +1,24 @@
+import { ContentType, FieldAppSDK } from '@contentful/app-sdk';
+type SDKWithCMA = Pick<FieldAppSDK, 'cma'>;
+type SDKWithCMAAndNavigator = Pick<FieldAppSDK, 'cma' | 'navigator'>;
+type SDKWithIdsAndCMA = Pick<FieldAppSDK, 'cma' | 'ids'>;
+type CMAClient = SDKWithCMA['cma'];
+/**
+ * Hook to fetch a single content type by ID.
+ * Uses proper query key for cache sharing with user_interface.
+ */
+export declare function useContentType(sdk: Pick<FieldAppSDK, 'cma' | 'ids'>, contentTypeId: string, options?: {
+    enabled?: boolean;
+}): import("@tanstack/react-query").UseQueryResult<ContentType, unknown>;
+/**
+ * Simple helper to fetch a single content type by ID.
+ * For use in async functions or one-off fetches.
+ * For repeated fetches with caching, use the useContentType hook instead.
+ */
+export declare function fetchContentType(sdk: Pick<FieldAppSDK, 'cma'>, contentTypeId: string): Promise<ContentType>;
+export type UseContentTypesResult = {
+    contentTypes: ContentType[];
+    invalidate: () => void;
+};
+export declare function useContentTypes(source: SDKWithCMAAndNavigator | SDKWithCMA | SDKWithIdsAndCMA | CMAClient): UseContentTypesResult;
+export {};

package/dist/types/index.d.ts

@@ -14,9 +14,11 @@ export * from './types';
 export * from './hooks/useActiveLocales';
 export * from './hooks/useReleaseStatus';
 export * from './hooks/useLocalePublishStatus';
+export * from './hooks/useContentTypes';
 export * from './LocalePublishingEntityStatusBadge';
 export * from './ReleaseEntityStatusBadge';
 export * from './utils/determineReleaseAction';
 export * from './utils/getEntityReleaseStatus';
 export * from './utils/getReleaseStatusBadgeConfig';
 export { SharedQueryClientProvider, useQueryClient, useQuery } from './queryClient';
+export * from './queryKeys';

package/dist/types/queryClient.d.ts

@@ -1,9 +1,11 @@
 import * as React from 'react';
-import type { QueryClient as QC, UseQueryOptions, UseQueryResult, QueryKey, QueryFunction } from '@tanstack/react-query';
-export declare function useQueryClient(): QC;
+import type { QueryClient, UseQueryOptions, UseQueryResult, QueryKey, QueryFunction } from '@tanstack/react-query';
+export declare function useQueryClient(): QueryClient;
 export declare function useQuery<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(queryKey: TQueryKey, queryFn: QueryFunction<TQueryFnData, TQueryKey>, options?: Omit<UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>, 'queryKey' | 'queryFn'>): UseQueryResult<TData, TError>;
 /**
  * Provides access to a query client either by sharing an existing client or
  * creating a new one.
  */
-export declare function SharedQueryClientProvider({ children }: React.PropsWithChildren<{}>): React.JSX.Element;
+export declare function SharedQueryClientProvider({ children, client: providedClient, }: React.PropsWithChildren<{
+    client?: QueryClient;
+}>): React.JSX.Element;

package/dist/types/queryKeys.d.ts

@@ -0,0 +1,76 @@
+/**
+ * Query key factories matching user_interface repository structure.
+ *
+ * IMPORTANT: These must stay in sync with user_interface to enable cache sharing.
+ * When updating, check the corresponding file in user_interface repository.
+ */
+/**
+ * Creates a query key for fetching a single entry.
+ * Matches the structure used in user_interface for cache sharing.
+ *
+ * Source: https://github.com/contentful/user_interface/blob/main/src/javascripts/core/react-query/cma/entry/useGetEntry.ts
+ *
+ * @param spaceId - The space ID
+ * @param environmentId - The environment ID
+ * @param entryId - The entry ID to fetch
+ * @returns Query key array for React Query
+ */
+export declare const createGetEntryKey: (spaceId: string, environmentId: string, entryId: string) => string[];
+/**
+ * Creates a query key for fetching a single asset.
+ * Matches the structure used in user_interface for cache sharing.
+ *
+ * Source: https://github.com/contentful/user_interface/blob/main/src/javascripts/core/react-query/cma/asset/useGetAsset.ts
+ *
+ * @param spaceId - The space ID
+ * @param environmentId - The environment ID
+ * @param assetId - The asset ID to fetch
+ * @returns Query key array for React Query
+ */
+export declare const createGetAssetKey: (spaceId: string, environmentId: string, assetId: string) => string[];
+/**
+ * Creates a query key for fetching a single space.
+ * Matches the structure used in user_interface for cache sharing.
+ *
+ * Source: https://github.com/contentful/user_interface/blob/main/src/javascripts/core/react-query/cma/space/useGetSpace.ts
+ *
+ * @param spaceId - The space ID to fetch
+ * @returns Query key array for React Query
+ */
+export declare const createGetSpaceKey: (spaceId: string) => string[];
+/**
+ * Creates a query key for fetching multiple locales.
+ * Matches the structure used in user_interface for cache sharing.
+ *
+ * Source: https://github.com/contentful/user_interface/blob/main/src/javascripts/core/react-query/cma/locale/useGetManyLocales.ts
+ *
+ * @param spaceId - The space ID
+ * @param environmentId - The environment ID
+ * @param params - Optional query parameters
+ * @returns Query key array for React Query
+ */
+export declare const createGetManyLocalesKey: (spaceId: string, environmentId: string, params?: Record<string, unknown>) => (string | Record<string, unknown>)[];
+/**
+ * Creates a query key for fetching a single content type.
+ * Matches the structure used in user_interface for cache sharing.
+ *
+ * Source: https://github.com/contentful/user_interface/blob/main/src/javascripts/core/react-query/cma/contentType/useGetContentType.ts
+ *
+ * @param spaceId - The space ID
+ * @param environmentId - The environment ID
+ * @param contentTypeId - The content type ID to fetch
+ * @returns Query key array for React Query
+ */
+export declare const createGetContentTypeKey: (spaceId: string, environmentId: string, contentTypeId: string) => string[];
+/**
+ * Creates a query key for fetching multiple content types.
+ * Matches the structure used in user_interface for cache sharing.
+ *
+ * Source: https://github.com/contentful/user_interface/blob/main/src/javascripts/core/react-query/cma/contentType/useGetManyContentTypes.ts
+ *
+ * @param spaceId - The space ID
+ * @param environmentId - The environment ID
+ * @param params - Optional query parameters (e.g., { limit: 1000 })
+ * @returns Query key array for React Query
+ */
+export declare const createGetManyContentTypesKey: (spaceId: string, environmentId: string, params?: Record<string, unknown>) => (string | Record<string, unknown>)[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/field-editor-shared",
-  "version": "2.17.1-alpha.0",
+  "version": "2.17.1-canary.59+54b401aa",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -67,5 +67,5 @@
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/"
   },
-  "gitHead": "447875c5a2ef25eb4552c29b990d90ec40bc6985"
+  "gitHead": "54b401aa9908c8380c3801bf25fa38e23dff72d2"
 }