@okam/directus-block 1.6.1 → 1.6.3

package/CHANGELOG.md

@@ -1,3 +1,40 @@
+## 1.6.3 (2026-01-14)
+
+### 🚀 Features
+
+- ⚠️  React 19 + Next.js 15 upgrade for all @okam/* packages ([#369](https://github.com/OKAMca/stack/pull/369))
+
+### 🩹 Fixes
+
+- ⚠️  functions starting with "use" should be reserved to react hooks ([68f1f8f](https://github.com/OKAMca/stack/commit/68f1f8f))
+
+### ⚠️  Breaking Changes
+
+- Consumers must now have react and react-dom in their own
+
+### 🧱 Updated Dependencies
+
+- Updated stack-ui to 1.44.0
+
+### ❤️ Thank You
+
+- Marie-Maxime Tanguay @marie-maxime
+- Pierre-Olivier Clerson @poclerson
+
+## 1.6.2 (2026-01-13)
+
+### 🚀 Features
+
+- React 19 + Next.js 15 support ([#369](https://github.com/OKAMca/stack/pull/369))
+
+### 🧱 Updated Dependencies
+
+- Updated stack-ui to 1.43.0
+
+### ❤️ Thank You
+
+- Marie-Maxime Tanguay @marie-maxime
+
 ## 1.6.1 (2025-11-27)
 
 ### 🧱 Updated Dependencies

package/README.md

@@ -41,6 +41,12 @@ This component calls the good component in the configuration from the `collectio
 - variables: The block's variables. Passing the id is necessary
 - document: Can also be passed in the config. The document that will be used to make a query
 
+#### `useBlock` function
+
+The `useBlock` function is a hook that automatically determines wether a block should use `props.item` (passed props) or `props.variables` (makes its own query).
+
+If `props.item` only contains `id` and `settings`, the item will be determined to be empty, and the block will still make the query using `props.variables`.
+
 ## Configuration
 
 A configuration uses the `components` prop to map a key value, like so:
@@ -164,4 +170,4 @@ const brandConfigWithStackBlocks = {
     ...blockHeroConfig,
   }
 }
-```
+```

package/blocks/BlockWysiwyg/config.d.ts

@@ -1,4 +1,5 @@
-import type { TBlockSerializerConfigComponent } from '../../components/BlockSerializer/interface';
-import type { BlockWysiwygFragment } from './interface';
+import { TBlockSerializerConfigComponent } from '../../components/BlockSerializer/interface';
+import { BlockWysiwygFragment } from './interface';
+
 declare const blockWysiwygConfig: TBlockSerializerConfigComponent<BlockWysiwygFragment>;
 export default blockWysiwygConfig;

package/blocks/BlockWysiwyg/config.js

@@ -2,7 +2,7 @@
 const jsxRuntime = require("react/jsx-runtime");
 const index = require("./index.js");
 const blockWysiwygConfig = {
-  block_wysiwyg: {
+  block_wysiwygs: {
     default: (props) => /* @__PURE__ */ jsxRuntime.jsx(index, { ...props })
   }
 };

package/blocks/BlockWysiwyg/config.mjs

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import BlockWysiwyg from "./index.mjs";
 const blockWysiwygConfig = {
-  block_wysiwyg: {
+  block_wysiwygs: {
     default: (props) => /* @__PURE__ */ jsx(BlockWysiwyg, { ...props })
   }
 };

package/blocks/BlockWysiwyg/index.d.ts

@@ -1,4 +1,5 @@
-import type { TBlockSerializerProps } from '../../components/BlockSerializer/interface';
-import type { BlockWysiwygFragment } from './interface';
+import { TBlockSerializerProps } from '../../components/BlockSerializer/interface';
+import { BlockWysiwygFragment } from './interface';
+
 declare const BlockWysiwyg: (props: TBlockSerializerProps<BlockWysiwygFragment>) => Promise<import("react/jsx-runtime").JSX.Element | null>;
 export default BlockWysiwyg;

package/blocks/BlockWysiwyg/index.js

@@ -2,11 +2,13 @@
 const jsxRuntime = require("react/jsx-runtime");
 const stackUi = require("@okam/stack-ui");
 const React = require("react");
-const useBlock = require("../../hooks/useBlock.js");
+const getBlock = require("../../utils/getBlock.js");
+require("@okam/directus-query");
+require("radashi");
 const BlockWysiwyg = async (props) => {
-  const key = "block_wysiwyg_by_id";
+  const key = "block_wysiwygs_by_id";
   const { themeName = "wysiwyg", tokens } = props;
-  const { content, title, level, cmsTokens } = await useBlock(props, key);
+  const { content, title, level, cmsTokens } = await getBlock.getBlock(props, key);
   if (!content && !(title && level)) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     title && level && /* @__PURE__ */ jsxRuntime.jsx(stackUi.Box, { as: "span", themeName, tokens: { ...tokens, ...cmsTokens }, children: React.createElement(level, {}, title) }),

package/blocks/BlockWysiwyg/index.mjs

@@ -1,11 +1,13 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { Box, WysiwygBlock } from "@okam/stack-ui";
 import React from "react";
-import useBlock from "../../hooks/useBlock.mjs";
+import { getBlock } from "../../utils/getBlock.mjs";
+import "@okam/directus-query";
+import "radashi";
 const BlockWysiwyg = async (props) => {
-  const key = "block_wysiwyg_by_id";
+  const key = "block_wysiwygs_by_id";
   const { themeName = "wysiwyg", tokens } = props;
-  const { content, title, level, cmsTokens } = await useBlock(props, key);
+  const { content, title, level, cmsTokens } = await getBlock(props, key);
   if (!content && !(title && level)) return null;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     title && level && /* @__PURE__ */ jsx(Box, { as: "span", themeName, tokens: { ...tokens, ...cmsTokens }, children: React.createElement(level, {}, title) }),

package/blocks/BlockWysiwyg/interface.d.ts

@@ -1,6 +1,7 @@
-import type { BlockSettingsFragment } from '../../generated/graphql';
+import { BlockSettingsFragment } from '../../generated/graphql';
+
 export type BlockWysiwygFragment = {
-    __typename?: 'block_wysiwyg';
+    __typename?: 'block_wysiwygs';
     title?: string | null;
     content?: string | null;
     level?: string | null;

package/components/BlockDispatcher/config.d.ts

@@ -1,3 +1,4 @@
-import type { TBlockSerializerConfig } from '../BlockSerializer/interface';
+import { TBlockSerializerConfig } from '../BlockSerializer/interface';
+
 declare const baseConfig: TBlockSerializerConfig;
 export default baseConfig;

package/components/BlockDispatcher/index.d.ts

@@ -1,3 +1,4 @@
-import type { TBlockDispatcherProps } from './interface';
-declare const BlockDispatcher: (props: TBlockDispatcherProps) => string | number | boolean | Iterable<import("react").ReactNode> | import("react").PromiseLikeOfReactNode | import("react/jsx-runtime").JSX.Element | (string | number | boolean | Iterable<import("react").ReactNode> | import("react").PromiseLikeOfReactNode | import("react/jsx-runtime").JSX.Element | null | undefined)[] | null | undefined;
+import { TBlockDispatcherProps } from './interface';
+
+declare const BlockDispatcher: (props: TBlockDispatcherProps) => string | number | bigint | boolean | Iterable<import('react').ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<import('react').ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | (string | number | bigint | boolean | Iterable<import('react').ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<import('react').ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined)[] | null | undefined;
 export default BlockDispatcher;

package/components/BlockDispatcher/index.js

@@ -1,8 +1,9 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
 require("@okam/directus-query");
+require("graphql-request");
 require("radashi");
-const mergeConfigs = require("../../utils/merge-configs.js");
+const mergeConfigs = require("../../utils/mergeConfigs.js");
 const index = require("../BlockSerializer/index.js");
 const config = require("./config.js");
 const BlockDispatcher = (props) => {

package/components/BlockDispatcher/index.mjs

@@ -1,7 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import "@okam/directus-query";
+import "graphql-request";
 import "radashi";
-import mergeConfigs from "../../utils/merge-configs.mjs";
+import mergeConfigs from "../../utils/mergeConfigs.mjs";
 import BlockSerializer from "../BlockSerializer/index.mjs";
 import baseConfig from "./config.mjs";
 const BlockDispatcher = (props) => {

package/components/BlockDispatcher/interface.d.ts

@@ -1,7 +1,8 @@
-import type { TDefaultComponent, Nullable } from '@okam/stack-ui';
-import type React from 'react';
-import type { TAdditionalProps } from '../../types/block';
-import type { TBlockSerializerProps, TBlockSerializerConfig } from '../BlockSerializer/interface';
+import { TDefaultComponent, Nullable } from '../../../../../stack/stack-ui/src/index.ts';
+import { default as React } from 'react';
+import { TAdditionalProps } from '../../types/block';
+import { TBlockSerializerProps, TBlockSerializerConfig } from '../BlockSerializer/interface';
+
 interface TBaseBlockDispatcherProps<AdditionalProps extends TAdditionalProps = TAdditionalProps> extends Omit<TDefaultComponent, 'children'> {
     config?: TBlockSerializerConfig;
     defaultVariant?: string;

package/components/BlockSerializer/index.d.ts

@@ -1,3 +1,4 @@
-import type { TBlockSerializerProps } from './interface';
+import { TBlockSerializerProps } from './interface';
+
 declare const BlockSerializer: (props: TBlockSerializerProps) => import("react/jsx-runtime").JSX.Element | null;
 export default BlockSerializer;

package/components/BlockSerializer/index.js

@@ -3,6 +3,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const graphql = require("../../generated/graphql.js");
 const fragmentMasking = require("../../generated/fragment-masking.js");
 require("@okam/directus-query");
+require("graphql-request");
 require("radashi");
 const BlockSerializer = (props) => {
   var _a, _b, _c;

package/components/BlockSerializer/index.mjs

@@ -2,6 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { BlockSettingsFragmentDoc } from "../../generated/graphql.mjs";
 import { useFragment } from "../../generated/fragment-masking.mjs";
 import "@okam/directus-query";
+import "graphql-request";
 import "radashi";
 const BlockSerializer = (props) => {
   var _a, _b, _c;

package/components/BlockSerializer/interface.d.ts

@@ -1,8 +1,9 @@
-import { type TypedDocumentNode } from '@graphql-typed-document-node/core';
-import type { Nullable, TDefaultComponent } from '@okam/stack-ui';
-import type { Variables as GraphQLVariables } from 'graphql-request';
-import type { FunctionComponent } from 'react';
-import type { TCommonBlockFragment, TAdditionalProps, TBlockQuery, TBlockVariables, TBlockDocument } from '../../types/block';
+import { TypedDocumentNode } from '@graphql-typed-document-node/core';
+import { Nullable, TDefaultComponent } from '../../../../../stack/stack-ui/src/index.ts';
+import { Variables as GraphQLVariables } from 'graphql-request';
+import { FunctionComponent } from 'react';
+import { TCommonBlockFragment, TAdditionalProps, TBlockQuery, TBlockVariables, TBlockDocument } from '../../types/block';
+
 /**
  * Base block data. See {@link TBlockSerializerProps} for actual props implementation.
  */

package/generated/fragment-masking.d.ts

@@ -1,5 +1,6 @@
 import { ResultOf, DocumentTypeDecoration, TypedDocumentNode } from '@graphql-typed-document-node/core';
 import { Incremental } from './graphql';
+
 export type FragmentType<TDocumentType extends DocumentTypeDecoration<any, any>> = TDocumentType extends DocumentTypeDecoration<infer TType, any> ? [TType] extends [{
     ' $fragmentName'?: infer TKey;
 }] ? TKey extends string ? {

package/generated/graphql.d.ts

@@ -1,4 +1,5 @@
-import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
 export type Exact<T extends {
     [key: string]: unknown;
 }> = {

package/index.d.ts

@@ -1,8 +1,8 @@
+export * from './utils';
 export type { BlockSettingsFragment } from './generated/graphql';
 export type { TBlockDispatcherProps } from './components/BlockDispatcher/interface';
 export type { TBlockSerializerConfig, TBlockSerializerProps, TBlock, TBlockSerializerConfigComponent, } from './components/BlockSerializer/interface';
 export type { TAdditionalProps, TCommonBlockFragment, TBlockQuery, TBlockDocument, TBlockVariables, } from './types/block';
 export { default as BlockWysiwyg } from './blocks/BlockWysiwyg';
-export { default as useBlock } from './hooks/useBlock';
 export { default as blockWysiwygConfig } from './blocks/BlockWysiwyg/config';
 export { default as baseConfig } from './components/BlockDispatcher/config';

package/index.js

@@ -1,10 +1,18 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const index$1 = require("./utils/index.js");
 const index = require("./blocks/BlockWysiwyg/index.js");
-const useBlock = require("./hooks/useBlock.js");
 const config = require("./blocks/BlockWysiwyg/config.js");
 const config$1 = require("./components/BlockDispatcher/config.js");
+const getBlockProps = require("./utils/getBlockProps.js");
+const mergeConfigs = require("./utils/mergeConfigs.js");
+const fragmentMasking = require("./generated/fragment-masking.js");
+const getBlock = require("./utils/getBlock.js");
+exports.useBlock = index$1.useBlock;
 exports.BlockWysiwyg = index;
-exports.useBlock = useBlock;
 exports.blockWysiwygConfig = config;
 exports.baseConfig = config$1;
+exports.getBlockProps = getBlockProps;
+exports.mergeConfigs = mergeConfigs;
+exports.getFragment = fragmentMasking.useFragment;
+exports.getBlock = getBlock.getBlock;

package/index.mjs

@@ -1,10 +1,18 @@
+import { useBlock } from "./utils/index.mjs";
 import { default as default2 } from "./blocks/BlockWysiwyg/index.mjs";
-import { default as default3 } from "./hooks/useBlock.mjs";
-import { default as default4 } from "./blocks/BlockWysiwyg/config.mjs";
-import { default as default5 } from "./components/BlockDispatcher/config.mjs";
+import { default as default3 } from "./blocks/BlockWysiwyg/config.mjs";
+import { default as default4 } from "./components/BlockDispatcher/config.mjs";
+import { default as default5 } from "./utils/getBlockProps.mjs";
+import { default as default6 } from "./utils/mergeConfigs.mjs";
+import { useFragment } from "./generated/fragment-masking.mjs";
+import { getBlock } from "./utils/getBlock.mjs";
 export {
   default2 as BlockWysiwyg,
-  default5 as baseConfig,
-  default4 as blockWysiwygConfig,
-  default3 as useBlock
+  default4 as baseConfig,
+  default3 as blockWysiwygConfig,
+  getBlock,
+  default5 as getBlockProps,
+  useFragment as getFragment,
+  default6 as mergeConfigs,
+  useBlock
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okam/directus-block",
-  "version": "1.6.1",
+  "version": "1.6.3",
   "main": "./index.js",
   "types": "./index.d.ts",
   "exports": {
@@ -34,10 +34,15 @@
   "dependencies": {
     "@graphql-typed-document-node/core": "3.2.0",
     "@okam/directus-query": "1.4.2",
-    "@okam/stack-ui": "1.42.4",
+    "@okam/stack-ui": "1.44.0",
     "graphql": "^16.9.0",
     "graphql-request": "^7.1.2",
-    "radashi": "^12.3.0",
-    "react": "18.3.1"
+    "radashi": "^12.3.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "react": "^19.0.0"
   }
 }

package/server.d.ts

@@ -1,5 +1,3 @@
 export { default as BlockDispatcher } from './components/BlockDispatcher';
 export { default as BlockSerializer } from './components/BlockSerializer';
-export { default as getBlockProps } from './utils/get-block-props';
-export { default as useBlock } from './hooks/useBlock';
-export { default as mergeConfigs } from './utils/merge-configs';
+export * from './utils';

package/server.js

@@ -3,11 +3,15 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const index = require("./components/BlockDispatcher/index.js");
 const index$1 = require("./components/BlockSerializer/index.js");
-const getBlockProps = require("./utils/get-block-props.js");
-const useBlock = require("./hooks/useBlock.js");
-const mergeConfigs = require("./utils/merge-configs.js");
+const index$2 = require("./utils/index.js");
+const getBlockProps = require("./utils/getBlockProps.js");
+const mergeConfigs = require("./utils/mergeConfigs.js");
+const fragmentMasking = require("./generated/fragment-masking.js");
+const getBlock = require("./utils/getBlock.js");
 exports.BlockDispatcher = index;
 exports.BlockSerializer = index$1;
+exports.useBlock = index$2.useBlock;
 exports.getBlockProps = getBlockProps;
-exports.useBlock = useBlock;
 exports.mergeConfigs = mergeConfigs;
+exports.getFragment = fragmentMasking.useFragment;
+exports.getBlock = getBlock.getBlock;

package/server.mjs

@@ -1,13 +1,17 @@
 "server-only";
 import { default as default2 } from "./components/BlockDispatcher/index.mjs";
 import { default as default3 } from "./components/BlockSerializer/index.mjs";
-import { default as default4 } from "./utils/get-block-props.mjs";
-import { default as default5 } from "./hooks/useBlock.mjs";
-import { default as default6 } from "./utils/merge-configs.mjs";
+import { useBlock } from "./utils/index.mjs";
+import { default as default4 } from "./utils/getBlockProps.mjs";
+import { default as default5 } from "./utils/mergeConfigs.mjs";
+import { useFragment } from "./generated/fragment-masking.mjs";
+import { getBlock } from "./utils/getBlock.mjs";
 export {
   default2 as BlockDispatcher,
   default3 as BlockSerializer,
+  getBlock,
   default4 as getBlockProps,
-  default6 as mergeConfigs,
-  default5 as useBlock
+  useFragment as getFragment,
+  default5 as mergeConfigs,
+  useBlock
 };

package/types/block.d.ts

@@ -1,8 +1,9 @@
-import type { DocumentTypeDecoration, TypedDocumentNode } from '@graphql-typed-document-node/core';
-import type { Nullable } from '@okam/stack-ui';
-import type { Variables } from 'graphql-request';
-import type { FragmentType } from '../generated/fragment-masking';
-import type { BlockSettingsFragment } from '../generated/graphql';
+import { DocumentTypeDecoration, TypedDocumentNode } from '@graphql-typed-document-node/core';
+import { Nullable } from '../../../../stack/stack-ui/src/index.ts';
+import { Variables } from 'graphql-request';
+import { FragmentType } from '../generated/fragment-masking';
+import { BlockSettingsFragment } from '../generated/graphql';
+
 export type TAdditionalProps = {
     [key: string]: unknown;
 };

package/utils/getBlock.d.ts

@@ -0,0 +1,36 @@
+import { TToken } from '../../../../stack/stack-ui/src/index.ts';
+import { GraphQLClient } from 'graphql-request';
+import { TBlockSerializerProps } from '../components/BlockSerializer/interface';
+import { TBlockDocument, TBlockVariables, TCommonBlockFragment } from '../types/block';
+
+/**
+ * General function to fetch the block data and its settings. Features the decision-making logic of {@link getBlockProps} that allows blocks to work with both passed props and queried props.
+ * @param props Props of the block component. Pass props directly from the block component.
+ * @param blockKey Key of the block data in the GraphQL document. Allows mapping props regardless of the block's collection name. Usually the block's collection name with `_by_id` appended since most queries are made by id.
+ * @param docOrClient Client to pass to `queryGql`. Defaults to `defaultGraphqlRequestClient`. **Deprecated**: can also be a fallback for `props.document`.
+ * @returns The block data and its settings.
+ *
+ * @example
+ * ```tsx
+ * const BlockButtons = (props: TBlockSerializerProps<BlockButtonsFragment>) => {
+ *   const key = 'block_buttons_by_id'
+ *   const { tokens } = props
+ *   const { link, cmsTokens, variant } = await getBlock(props, key)
+ *   return <Link {...link} tokens={{ ...tokens, ...cmsTokens, style: variant }} />
+ * }
+ * ```
+ */
+export declare function getBlock<Fragment extends TCommonBlockFragment, Variables extends TBlockVariables = TBlockVariables>(props: TBlockSerializerProps<Fragment, Variables>, blockKey: string, 
+/**
+ * @default defaultGraphqlRequestClient
+ */
+client?: GraphQLClient): Promise<Fragment & {
+    cmsTokens: TToken;
+}>;
+export declare function getBlock<Fragment extends TCommonBlockFragment, Variables extends TBlockVariables = TBlockVariables>(props: TBlockSerializerProps<Fragment, Variables>, blockKey: string, 
+/**
+ * @deprecated Use props.document instead
+ */
+doc?: TBlockDocument<Fragment, Variables>): Promise<Fragment & {
+    cmsTokens: TToken;
+}>;

package/utils/getBlock.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const directusQuery = require("@okam/directus-query");
+const graphqlRequest = require("graphql-request");
+const radashi = require("radashi");
+const fragmentMasking = require("../generated/fragment-masking.js");
+const graphql = require("../generated/graphql.js");
+const getBlockProps = require("./getBlockProps.js");
+function isClient(docOrClient) {
+  return docOrClient instanceof graphqlRequest.GraphQLClient;
+}
+async function getBlock(props, blockKey, docOrClient = directusQuery.defaultGraphqlRequestClient) {
+  const item = radashi.get(props, "item");
+  const isPropClient = isClient(docOrClient);
+  const document = radashi.get(props, "document");
+  const variables = radashi.get(props, "variables");
+  const propsWithFallback = await getBlockProps(
+    {
+      item,
+      blockKey,
+      document: document ?? (!isPropClient ? docOrClient : void 0),
+      variables
+    },
+    isPropClient ? docOrClient : void 0
+  );
+  const { tokens } = fragmentMasking.useFragment(graphql.BlockSettingsFragmentDoc, propsWithFallback == null ? void 0 : propsWithFallback.settings) ?? {};
+  return { ...propsWithFallback, cmsTokens: tokens };
+}
+exports.getBlock = getBlock;

package/utils/getBlock.mjs

@@ -0,0 +1,29 @@
+import { defaultGraphqlRequestClient } from "@okam/directus-query";
+import { GraphQLClient } from "graphql-request";
+import { get } from "radashi";
+import { useFragment } from "../generated/fragment-masking.mjs";
+import { BlockSettingsFragmentDoc } from "../generated/graphql.mjs";
+import getBlockProps from "./getBlockProps.mjs";
+function isClient(docOrClient) {
+  return docOrClient instanceof GraphQLClient;
+}
+async function getBlock(props, blockKey, docOrClient = defaultGraphqlRequestClient) {
+  const item = get(props, "item");
+  const isPropClient = isClient(docOrClient);
+  const document = get(props, "document");
+  const variables = get(props, "variables");
+  const propsWithFallback = await getBlockProps(
+    {
+      item,
+      blockKey,
+      document: document ?? (!isPropClient ? docOrClient : void 0),
+      variables
+    },
+    isPropClient ? docOrClient : void 0
+  );
+  const { tokens } = useFragment(BlockSettingsFragmentDoc, propsWithFallback == null ? void 0 : propsWithFallback.settings) ?? {};
+  return { ...propsWithFallback, cmsTokens: tokens };
+}
+export {
+  getBlock
+};

package/utils/{get-block-props.d.ts → getBlockProps.d.ts}

@@ -1,6 +1,7 @@
-import type { Nullable } from '@okam/stack-ui';
-import type { Variables } from 'graphql-request';
-import type { TBlockDocument, TBlockQuery, TBlockVariables, TCommonBlockFragment } from '../types/block';
+import { Nullable } from '../../../../stack/stack-ui/src/index.ts';
+import { Variables } from 'graphql-request';
+import { TBlockDocument, TBlockQuery, TBlockVariables, TCommonBlockFragment } from '../types/block';
+
 type TGetBlockPropsParams<BlockFragment extends TCommonBlockFragment, BlockVariables extends Variables = Variables> = {
     document?: TBlockDocument<BlockFragment, BlockVariables>;
     item?: Nullable<NonNullable<NonNullable<TBlockQuery<BlockFragment>[string]>[' $fragmentRefs']>[string]>;
@@ -11,7 +12,8 @@ type TGetBlockPropsParams<BlockFragment extends TCommonBlockFragment, BlockVaria
  * Returns the passed item if it is defined. Otherwise, queried its own block
  * @param params.blockKey Key of the queried field
  * @param params.item Item of the block. If null or only contains the block's id, the function will make a query
+ * @param client Client to pass to `queryGql`. Defaults to `defaultGraphqlRequestClient`.
  * @returns The block data
  */
-export default function getBlockProps<BlockFragment extends TCommonBlockFragment, BlockVariables extends Variables = Variables>(params: TGetBlockPropsParams<BlockFragment, BlockVariables>): Promise<BlockFragment | null | undefined>;
+export default function getBlockProps<BlockFragment extends TCommonBlockFragment, BlockVariables extends Variables = Variables>(params: TGetBlockPropsParams<BlockFragment, BlockVariables>, client?: import('graphql-request').GraphQLClient): Promise<BlockFragment | null | undefined>;
 export {};

package/utils/{get-block-props.js → getBlockProps.js}

@@ -9,15 +9,15 @@ function isItemEmpty(item) {
   const { id, settings, ...restOfItem } = item ?? {};
   return radashi.isEmpty(restOfItem);
 }
-async function queryFromVariables(params) {
+async function queryFromVariables(params, client = directusQuery.defaultGraphqlRequestClient) {
   const { document, blockKey, variables } = params;
   if (!document || !isVariables(variables)) return null;
-  const queriedBlockProps = await directusQuery.queryGql(document, variables);
+  const queriedBlockProps = await directusQuery.queryGql(document, variables, client);
   if (!queriedBlockProps || typeof queriedBlockProps !== "object" || !blockKey) return null;
   const queriedBlockFragment = queriedBlockProps[blockKey];
   return queriedBlockFragment;
 }
-async function getBlockProps(params) {
+async function getBlockProps(params, client = directusQuery.defaultGraphqlRequestClient) {
   const { document, item, blockKey, variables } = params;
   if (item) {
     if (!isItemEmpty(item)) {
@@ -31,7 +31,7 @@ async function getBlockProps(params) {
     });
   }
   if (!document || !isVariables(variables)) return null;
-  const queriedBlockProps = await directusQuery.queryGql(document, variables);
+  const queriedBlockProps = await directusQuery.queryGql(document, variables, client);
   if (!queriedBlockProps || typeof queriedBlockProps !== "object" || !blockKey) return null;
   const queriedBlockFragment = queriedBlockProps[blockKey];
   return queriedBlockFragment;

package/utils/{get-block-props.mjs → getBlockProps.mjs}

@@ -1,5 +1,5 @@
 "server-only";
-import { queryGql } from "@okam/directus-query";
+import { queryGql, defaultGraphqlRequestClient } from "@okam/directus-query";
 import { isEmpty } from "radashi";
 function isVariables(maybeVariables) {
   return !!maybeVariables;
@@ -8,15 +8,15 @@ function isItemEmpty(item) {
   const { id, settings, ...restOfItem } = item ?? {};
   return isEmpty(restOfItem);
 }
-async function queryFromVariables(params) {
+async function queryFromVariables(params, client = defaultGraphqlRequestClient) {
   const { document, blockKey, variables } = params;
   if (!document || !isVariables(variables)) return null;
-  const queriedBlockProps = await queryGql(document, variables);
+  const queriedBlockProps = await queryGql(document, variables, client);
   if (!queriedBlockProps || typeof queriedBlockProps !== "object" || !blockKey) return null;
   const queriedBlockFragment = queriedBlockProps[blockKey];
   return queriedBlockFragment;
 }
-async function getBlockProps(params) {
+async function getBlockProps(params, client = defaultGraphqlRequestClient) {
   const { document, item, blockKey, variables } = params;
   if (item) {
     if (!isItemEmpty(item)) {
@@ -30,7 +30,7 @@ async function getBlockProps(params) {
     });
   }
   if (!document || !isVariables(variables)) return null;
-  const queriedBlockProps = await queryGql(document, variables);
+  const queriedBlockProps = await queryGql(document, variables, client);
   if (!queriedBlockProps || typeof queriedBlockProps !== "object" || !blockKey) return null;
   const queriedBlockFragment = queriedBlockProps[blockKey];
   return queriedBlockFragment;

package/utils/index.d.ts

@@ -1,4 +1,11 @@
 import { useFragment } from '../generated/fragment-masking';
-export { default as getBlockProps } from './get-block-props';
-export { default as mergeConfigs } from './merge-configs';
+import { getBlock } from './getBlock';
+
+/**
+ * @deprecated Use `getBlock` instead
+ */
+export declare const useBlock: typeof getBlock;
+export { default as getBlockProps } from './getBlockProps';
+export { default as mergeConfigs } from './mergeConfigs';
 export { useFragment as getFragment };
+export { getBlock };

package/utils/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const getBlock = require("./getBlock.js");
+require("@okam/directus-query");
+require("radashi");
+const useBlock = getBlock.getBlock;
+exports.getBlock = getBlock.getBlock;
+exports.useBlock = useBlock;

package/utils/index.mjs

@@ -0,0 +1,8 @@
+import { getBlock } from "./getBlock.mjs";
+import "@okam/directus-query";
+import "radashi";
+const useBlock = getBlock;
+export {
+  getBlock,
+  useBlock
+};

package/utils/{merge-configs.d.ts → mergeConfigs.d.ts}

@@ -1,5 +1,6 @@
-import type { Nullable } from '@okam/stack-ui';
-import type { TBlockSerializerConfig } from '../components/BlockSerializer/interface';
+import { Nullable } from '../../../../stack/stack-ui/src/index.ts';
+import { TBlockSerializerConfig } from '../components/BlockSerializer/interface';
+
 /**
  * Merges multiple block dispatcher configs
  * @param baseConfig The base configuration. Other configurations will be prioritized over this one, which acts as a fallback

package/hooks/useBlock.d.ts

@@ -1,23 +0,0 @@
-import type { TToken } from '@okam/stack-ui';
-import type { TBlockSerializerProps } from '../components/BlockSerializer/interface';
-import type { TBlockDocument, TBlockVariables, TCommonBlockFragment } from '../types/block';
-/**
- * General function to fetch the block data and its settings. Features the decision-making logic of {@link getBlockProps} that allows blocks to work with both passed props and queried props.
- * @param props Props of the block component. Pass props directly from the block component.
- * @param blockKey Key of the block data in the GraphQL document. Allows mapping props regardless of the block's collection name. Usually the block's collection name with `_by_id` appended since most queries are made by id.
- * @param doc Alternative for passing the GraphQL document to the block component. If not passed, the document will be retrieved from the block's props or config.
- * @returns The block data and its settings.
- *
- * @example
- * ```tsx
- * const BlockButtons = (props: TBlockSerializerProps<BlockButtonsFragment>) => {
- *   const key = 'block_buttons_by_id'
- *   const { tokens } = props
- *   const { link, cmsTokens, variant } = await useBlock(props, key)
- *   return <Link {...link} tokens={{ ...tokens, ...cmsTokens, style: variant }} />
- * }
- * ```
- */
-export default function useBlock<Fragment extends TCommonBlockFragment, Variables extends TBlockVariables = TBlockVariables>(props: TBlockSerializerProps<Fragment, Variables>, blockKey: string, doc?: TBlockDocument<Fragment, Variables>): Promise<Fragment & {
-    cmsTokens: TToken;
-}>;

package/hooks/useBlock.js

@@ -1,19 +0,0 @@
-"use strict";
-const radashi = require("radashi");
-const graphql = require("../generated/graphql.js");
-const fragmentMasking = require("../generated/fragment-masking.js");
-const getBlockProps = require("../utils/get-block-props.js");
-async function useBlock(props, blockKey, doc) {
-  const item = radashi.get(props, "item");
-  const document = doc ?? radashi.get(props, "document");
-  const variables = radashi.get(props, "variables");
-  const propsWithFallback = await getBlockProps({
-    item,
-    blockKey,
-    document,
-    variables
-  });
-  const { tokens } = fragmentMasking.useFragment(graphql.BlockSettingsFragmentDoc, propsWithFallback == null ? void 0 : propsWithFallback.settings) ?? {};
-  return { ...propsWithFallback, cmsTokens: tokens };
-}
-module.exports = useBlock;

package/hooks/useBlock.mjs

@@ -1,20 +0,0 @@
-import { get } from "radashi";
-import { BlockSettingsFragmentDoc } from "../generated/graphql.mjs";
-import { useFragment } from "../generated/fragment-masking.mjs";
-import getBlockProps from "../utils/get-block-props.mjs";
-async function useBlock(props, blockKey, doc) {
-  const item = get(props, "item");
-  const document = doc ?? get(props, "document");
-  const variables = get(props, "variables");
-  const propsWithFallback = await getBlockProps({
-    item,
-    blockKey,
-    document,
-    variables
-  });
-  const { tokens } = useFragment(BlockSettingsFragmentDoc, propsWithFallback == null ? void 0 : propsWithFallback.settings) ?? {};
-  return { ...propsWithFallback, cmsTokens: tokens };
-}
-export {
-  useBlock as default
-};