@okam/directus-next-component 1.2.0 → 1.3.0

package/components/DirectusFile/config.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from 'react-spring';
+import type { TDirectusFileProps } from './interface';
+declare const directusFileConfig: Record<string, ComponentType<TDirectusFileProps>>;
+export default directusFileConfig;

package/components/DirectusFile/config.js

@@ -0,0 +1,8 @@
+"use strict";
+const index = require("../DirectusImg/index.js");
+const index$1 = require("../DirectusVideo/index.js");
+const directusFileConfig = {
+  image: index,
+  video: index$1
+};
+module.exports = directusFileConfig;

package/components/DirectusFile/config.mjs

@@ -0,0 +1,9 @@
+import DirectusImg from "../DirectusImg/index.mjs";
+import DirectusVideo from "../DirectusVideo/index.mjs";
+const directusFileConfig = {
+  image: DirectusImg,
+  video: DirectusVideo
+};
+export {
+  directusFileConfig as default
+};

package/components/DirectusFile/index.d.ts

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

package/components/DirectusFile/index.js

@@ -0,0 +1,13 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const config = require("./config.js");
+const DirectusFile = (props) => {
+  var _a;
+  const { type, ...rest } = props;
+  const fileType = (_a = type == null ? void 0 : type.split("/")) == null ? void 0 : _a[0];
+  const configComponent = config[fileType ?? ""];
+  const { as: Component = configComponent } = props;
+  if (!Component) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...rest });
+};
+module.exports = DirectusFile;

package/components/DirectusFile/index.mjs

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import directusFileConfig from "./config.mjs";
+const DirectusFile = (props) => {
+  var _a;
+  const { type, ...rest } = props;
+  const fileType = (_a = type == null ? void 0 : type.split("/")) == null ? void 0 : _a[0];
+  const configComponent = directusFileConfig[fileType ?? ""];
+  const { as: Component = configComponent } = props;
+  if (!Component) return null;
+  return /* @__PURE__ */ jsx(Component, { ...rest });
+};
+export {
+  DirectusFile as default
+};

package/components/DirectusFile/interface.d.ts

@@ -0,0 +1,11 @@
+import type { TDefaultComponent } from '@okam/stack-ui';
+import type { TFiles } from '../../types/files';
+export interface TDirectusFileProps extends TFiles, TDefaultComponent {
+    /**
+     * Serves to fall back to different parts of the URLs. Some properties have default values:
+     * - hostname: `NEXT_PUBLIC_IMG_DOMAIN`
+     * - port: `NEXT_PUBLIC_IMG_PORT`
+     * - protocol: `NEXT_PUBLIC_IMG_PROTOCOL`
+     */
+    baseUrl?: URL;
+}

package/components/DirectusImg/index.d.ts

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

package/components/DirectusImg/index.js

@@ -0,0 +1,25 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const nextComponent = require("@okam/next-component");
+const thumbhash = require("unlazy/thumbhash");
+const directusFile = require("../../hooks/directus-file.js");
+const DirectusImg = (props) => {
+  const { fit, baseUrl, focal_point_x: focalPointX, focal_point_y: focalPointY, thumbhash: thumbhash$1, width, height } = props;
+  const fileProps = directusFile(props, baseUrl, { fit });
+  if (!fileProps) return null;
+  const hasFocalPoint = !!focalPointX && !!focalPointY && !!width && !!height;
+  const style = hasFocalPoint ? {
+    objectFit: "cover",
+    objectPosition: `${focalPointX / width * 100}% ${focalPointY / height * 100}%`
+  } : void 0;
+  if (!fileProps) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    nextComponent.Img,
+    {
+      style,
+      ...thumbhash$1 ? { blurDataURL: thumbhash.createPngDataUri(thumbhash$1), placeholder: "blur" } : {},
+      ...fileProps
+    }
+  );
+};
+module.exports = DirectusImg;

package/components/DirectusImg/index.mjs

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import { Img } from "@okam/next-component";
+import { createPngDataUri } from "unlazy/thumbhash";
+import useDirectusFile from "../../hooks/directus-file.mjs";
+const DirectusImg = (props) => {
+  const { fit, baseUrl, focal_point_x: focalPointX, focal_point_y: focalPointY, thumbhash, width, height } = props;
+  const fileProps = useDirectusFile(props, baseUrl, { fit });
+  if (!fileProps) return null;
+  const hasFocalPoint = !!focalPointX && !!focalPointY && !!width && !!height;
+  const style = hasFocalPoint ? {
+    objectFit: "cover",
+    objectPosition: `${focalPointX / width * 100}% ${focalPointY / height * 100}%`
+  } : void 0;
+  if (!fileProps) return null;
+  return /* @__PURE__ */ jsx(
+    Img,
+    {
+      style,
+      ...thumbhash ? { blurDataURL: createPngDataUri(thumbhash), placeholder: "blur" } : {},
+      ...fileProps
+    }
+  );
+};
+export {
+  DirectusImg as default
+};

package/components/DirectusImg/interface.d.ts

@@ -0,0 +1,4 @@
+import type { TDirectusFileProps } from '../DirectusFile/interface';
+export interface TDirectusImgProps extends TDirectusFileProps {
+    fit?: 'cover' | 'contain' | 'inside' | 'outside';
+}

package/components/DirectusLink/index.js

@@ -1,14 +1,14 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
 const stackUi = require("@okam/stack-ui");
-const Link = require("next/link.js");
 const directusLink = require("../../hooks/directus-link.js");
 const DirectusLink = (props) => {
   const { type, componentsConfig } = props;
   const linkProps = directusLink(props);
-  if (!type || !linkProps.href) return null;
+  if (!type) return null;
   const LinkComponent = componentsConfig == null ? void 0 : componentsConfig[type];
-  if (!LinkComponent) return /* @__PURE__ */ jsxRuntime.jsx(stackUi.Anchor, { as: Link, ...linkProps });
-  return /* @__PURE__ */ jsxRuntime.jsx(LinkComponent, { ...props });
+  if (LinkComponent) return /* @__PURE__ */ jsxRuntime.jsx(LinkComponent, { ...props });
+  if (!linkProps.href) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(stackUi.Anchor, { ...linkProps });
 };
 module.exports = DirectusLink;

package/components/DirectusLink/index.mjs

@@ -1,14 +1,14 @@
 import { jsx } from "react/jsx-runtime";
 import { Anchor } from "@okam/stack-ui";
-import Link from "next/link.js";
 import useDirectusLink from "../../hooks/directus-link.mjs";
 const DirectusLink = (props) => {
   const { type, componentsConfig } = props;
   const linkProps = useDirectusLink(props);
-  if (!type || !linkProps.href) return null;
+  if (!type) return null;
   const LinkComponent = componentsConfig == null ? void 0 : componentsConfig[type];
-  if (!LinkComponent) return /* @__PURE__ */ jsx(Anchor, { as: Link, ...linkProps });
-  return /* @__PURE__ */ jsx(LinkComponent, { ...props });
+  if (LinkComponent) return /* @__PURE__ */ jsx(LinkComponent, { ...props });
+  if (!linkProps.href) return null;
+  return /* @__PURE__ */ jsx(Anchor, { ...linkProps });
 };
 export {
   DirectusLink as default

package/components/DirectusLink/interface.d.ts

@@ -1,9 +1,13 @@
 import type { TDefaultComponent, TAnchorProps } from '@okam/stack-ui';
-import type { ComponentType } from 'react';
+import type { AriaAttributes, ComponentType } from 'react';
 import type { TLinks } from '../../types/links';
-export interface TDirectusLinkProps extends Omit<TDefaultComponent, 'children'>, Omit<Partial<TLinks>, 'tokens'> {
+export type TDirectusLink = Omit<TDefaultComponent, 'children'> & Omit<Partial<TLinks>, 'tokens'> & AriaAttributes;
+export interface TUseDirectusLink extends TDirectusLink {
+    propsConfig?: TDirectusLinkPropsConfig;
+}
+export interface TDirectusLinkProps extends TDirectusLink {
     componentsConfig?: TDirectusLinkComponentsConfig;
     propsConfig?: TDirectusLinkPropsConfig;
 }
 export type TDirectusLinkComponentsConfig = Record<string, ComponentType<TDirectusLinkProps>>;
-export type TDirectusLinkPropsConfig<ReturnProps extends TAnchorProps = TAnchorProps> = Record<string, (props: TDirectusLinkProps) => ReturnProps>;
+export type TDirectusLinkPropsConfig<ReturnProps extends TAnchorProps = TAnchorProps> = Record<string, (props: TUseDirectusLink) => ReturnProps>;

package/components/DirectusVideo/index.d.ts

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

package/components/DirectusVideo/index.js

@@ -0,0 +1,12 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const stackUi = require("@okam/stack-ui");
+const directusFile = require("../../hooks/directus-file.js");
+const DirectusVideo = (props) => {
+  const { baseUrl } = props;
+  const fileProps = directusFile(props, baseUrl);
+  if (!fileProps) return null;
+  const { type } = fileProps;
+  return /* @__PURE__ */ jsxRuntime.jsx(stackUi.Video, { ...fileProps, type: type ?? void 0 });
+};
+module.exports = DirectusVideo;

package/components/DirectusVideo/index.mjs

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import { Video } from "@okam/stack-ui";
+import useDirectusFile from "../../hooks/directus-file.mjs";
+const DirectusVideo = (props) => {
+  const { baseUrl } = props;
+  const fileProps = useDirectusFile(props, baseUrl);
+  if (!fileProps) return null;
+  const { type } = fileProps;
+  return /* @__PURE__ */ jsx(Video, { ...fileProps, type: type ?? void 0 });
+};
+export {
+  DirectusVideo as default
+};

package/components/DirectusVideo/interface.d.ts

@@ -0,0 +1,5 @@
+import type { VideoHTMLAttributes } from 'react';
+import type { TDirectusFileProps } from '../DirectusFile/interface';
+type TDirectusVideoAttributes = Omit<VideoHTMLAttributes<HTMLVideoElement>, 'height' | 'id' | 'title' | 'width'>;
+export type TDirectusVideoProps = TDirectusVideoAttributes & TDirectusFileProps;
+export {};

package/hooks/directus-file.d.ts

@@ -1,3 +1,24 @@
 import type { Nullable } from '@okam/stack-ui';
 import type { TFiles } from '../types/files';
-export default function useDirectusFile(file: Nullable<TFiles>, baseUrl?: URL): URL | null;
+export default function useDirectusFile(file: Nullable<TFiles>, baseUrl?: URL, searchParams?: Record<string, Nullable<string>>): {
+    tags?: any;
+    location?: string | null | undefined;
+    storage?: string | null | undefined;
+    focal_point_divider?: string | null | undefined;
+    focal_point_x?: number | null | undefined;
+    focal_point_y?: number | null | undefined;
+    filename_disk?: string | null | undefined;
+    filename_download?: string | null | undefined;
+    type?: string | null | undefined;
+    duration?: number | null | undefined;
+    embed?: string | null | undefined;
+    caption?: string | null | undefined;
+    thumbhash?: string | null | undefined;
+    filenameDownload?: string | null | undefined;
+    src: string;
+    alt: string;
+    width: number | undefined;
+    height: number | undefined;
+    title: string | undefined;
+    id: string;
+} | null;

package/hooks/directus-file.js

@@ -1,25 +1,40 @@
 "use strict";
 const IMG_DOMAIN = process.env.NEXT_PUBLIC_IMG_DOMAIN;
 const IMG_PORT = process.env.NEXT_PUBLIC_IMG_PORT;
-const IMG_PROTOCOL = process.env.NEXT_PUBLIC_IMG_PROTOCOL;
-function getDirectusUrl(file, baseUrl) {
+const IMG_PROTOCOL = process.env.NEXT_PUBLIC_IMG_PROTOCOL ?? "https";
+function setSearchParams(url, searchParams) {
+  Object.entries(searchParams).forEach(([key, value]) => {
+    if (!value) return;
+    url.searchParams.set(key, value);
+  });
+}
+function getDirectusUrl(file, baseUrl, searchParams) {
   const { id, filename_download, filenameDownload } = file ?? {};
   const { protocol = IMG_PROTOCOL, port = IMG_PORT, hostname = IMG_DOMAIN } = baseUrl ?? {};
   if (!hostname || !id) return null;
   try {
-    const url = new URL(
-      `/assets/${id}/${filename_download ?? filenameDownload ?? ""}`,
-      `${protocol ?? "https"}://${hostname}${port ? `:${port}` : ""}`
-    );
+    const url = new URL(`/assets/${id}/${filename_download ?? filenameDownload ?? ""}`, `${protocol}://${hostname}`);
+    if (port) url.port = port;
+    if (searchParams) setSearchParams(url, searchParams);
     return url;
   } catch (error) {
     console.warn(error);
     return null;
   }
 }
-function useDirectusFile(file, baseUrl) {
-  if (!file) return null;
-  const url = getDirectusUrl(file, baseUrl);
-  return url;
+function useDirectusFile(file, baseUrl, searchParams) {
+  const { description, width, height, title, id, ...rest } = file ?? {};
+  if (!file || !id) return null;
+  const url = getDirectusUrl(file, baseUrl, searchParams);
+  if (!url) return null;
+  return {
+    src: url.href,
+    alt: description ?? "",
+    width: width ?? void 0,
+    height: height ?? void 0,
+    title: title ?? void 0,
+    id,
+    ...rest
+  };
 }
 module.exports = useDirectusFile;

package/hooks/directus-file.mjs

@@ -1,25 +1,40 @@
 const IMG_DOMAIN = process.env.NEXT_PUBLIC_IMG_DOMAIN;
 const IMG_PORT = process.env.NEXT_PUBLIC_IMG_PORT;
-const IMG_PROTOCOL = process.env.NEXT_PUBLIC_IMG_PROTOCOL;
-function getDirectusUrl(file, baseUrl) {
+const IMG_PROTOCOL = process.env.NEXT_PUBLIC_IMG_PROTOCOL ?? "https";
+function setSearchParams(url, searchParams) {
+  Object.entries(searchParams).forEach(([key, value]) => {
+    if (!value) return;
+    url.searchParams.set(key, value);
+  });
+}
+function getDirectusUrl(file, baseUrl, searchParams) {
   const { id, filename_download, filenameDownload } = file ?? {};
   const { protocol = IMG_PROTOCOL, port = IMG_PORT, hostname = IMG_DOMAIN } = baseUrl ?? {};
   if (!hostname || !id) return null;
   try {
-    const url = new URL(
-      `/assets/${id}/${filename_download ?? filenameDownload ?? ""}`,
-      `${protocol ?? "https"}://${hostname}${port ? `:${port}` : ""}`
-    );
+    const url = new URL(`/assets/${id}/${filename_download ?? filenameDownload ?? ""}`, `${protocol}://${hostname}`);
+    if (port) url.port = port;
+    if (searchParams) setSearchParams(url, searchParams);
     return url;
   } catch (error) {
     console.warn(error);
     return null;
   }
 }
-function useDirectusFile(file, baseUrl) {
-  if (!file) return null;
-  const url = getDirectusUrl(file, baseUrl);
-  return url;
+function useDirectusFile(file, baseUrl, searchParams) {
+  const { description, width, height, title, id, ...rest } = file ?? {};
+  if (!file || !id) return null;
+  const url = getDirectusUrl(file, baseUrl, searchParams);
+  if (!url) return null;
+  return {
+    src: url.href,
+    alt: description ?? "",
+    width: width ?? void 0,
+    height: height ?? void 0,
+    title: title ?? void 0,
+    id,
+    ...rest
+  };
 }
 export {
   useDirectusFile as default

package/hooks/directus-link.d.ts

@@ -1,3 +1,3 @@
 import type { TAnchorProps } from '@okam/stack-ui';
-import type { TDirectusLinkProps } from '../components/DirectusLink/interface';
-export default function useDirectusLink(props: TDirectusLinkProps): TAnchorProps;
+import type { TUseDirectusLink } from '../components/DirectusLink/interface';
+export default function useDirectusLink(props: TUseDirectusLink): TAnchorProps;

package/hooks/directus-link.js

@@ -1,38 +1,73 @@
 "use strict";
+const Link = require("next/link.js");
 const directusFile = require("./directus-file.js");
-const defaultPropsConfig = {
-  collection: ({ collection, target }) => {
-    var _a, _b;
-    return {
-      href: ((_b = (_a = collection == null ? void 0 : collection.translations) == null ? void 0 : _a[0]) == null ? void 0 : _b.path) ?? void 0,
-      target: target ?? void 0
-    };
-  },
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  "external-link": ({ external_link: externalLink, target }) => ({
+function useFile(props) {
+  const { file } = props;
+  const { filename_download: filenameDownload } = file ?? {};
+  const href = directusFile(file);
+  return {
+    href: (href == null ? void 0 : href.toString()) ?? void 0,
+    download: filenameDownload ?? true
+  };
+}
+function useCollection(props) {
+  var _a, _b;
+  const { collection, target } = props;
+  return {
+    href: ((_b = (_a = collection == null ? void 0 : collection.translations) == null ? void 0 : _a[0]) == null ? void 0 : _b.path) ?? void 0,
+    target: target ?? void 0
+  };
+}
+function useExternalLink(props) {
+  const { external_link: externalLink, target } = props;
+  return {
     href: externalLink ?? void 0,
     target: target ?? void 0
-  }),
-  file: ({ file }) => {
-    const { filename_download: filenameDownload } = file ?? {};
-    const href = directusFile(file);
-    return {
-      href: (href == null ? void 0 : href.toString()) ?? void 0,
-      download: filenameDownload ?? true
-    };
-  },
-  anchor: ({ anchor }) => ({ href: anchor ?? void 0 })
+  };
+}
+function useAnchor(props) {
+  const { anchor } = props;
+  return { href: anchor ?? void 0 };
+}
+const defaultPropsConfig = {
+  collection: useCollection,
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  "external-link": useExternalLink,
+  file: useFile,
+  anchor: useAnchor
 };
 function useDirectusLink(props) {
-  const { type, label, prefetch, replace, scroll, variant, tokens, themeName, customTheme, propsConfig } = props;
+  var _a;
+  const {
+    type,
+    label,
+    prefetch,
+    replace,
+    scroll,
+    tokens,
+    themeName,
+    customTheme,
+    propsConfig,
+    as = Link,
+    target,
+    anchor,
+    collection,
+    external_link: externalLink,
+    file,
+    id,
+    ...rest
+  } = props;
   if (!type) return {};
   const finalConfig = { ...defaultPropsConfig, ...propsConfig ?? {} };
-  const { href, ...rest } = finalConfig[type](props);
+  const linkProps = ((_a = finalConfig[type]) == null ? void 0 : _a.call(finalConfig, props)) ?? {};
+  const { href, ...restOfLinkProps } = linkProps;
   if (!href) return {};
   return {
-    themeName,
-    tokens: { ...tokens, ...variant ? { type: variant } : {} },
-    customTheme,
+    ...rest,
+    as,
+    ...themeName ? { themeName } : {},
+    ...customTheme ? { customTheme } : {},
+    ...tokens ? { tokens } : {},
     nextLinkProps: {
       href,
       prefetch: prefetch ?? void 0,
@@ -41,7 +76,7 @@ function useDirectusLink(props) {
     },
     href,
     children: label,
-    ...rest
+    ...restOfLinkProps
   };
 }
 module.exports = useDirectusLink;

package/hooks/directus-link.mjs

@@ -1,37 +1,72 @@
+import Link from "next/link.js";
 import useDirectusFile from "./directus-file.mjs";
-const defaultPropsConfig = {
-  collection: ({ collection, target }) => {
-    var _a, _b;
-    return {
-      href: ((_b = (_a = collection == null ? void 0 : collection.translations) == null ? void 0 : _a[0]) == null ? void 0 : _b.path) ?? void 0,
-      target: target ?? void 0
-    };
-  },
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  "external-link": ({ external_link: externalLink, target }) => ({
+function useFile(props) {
+  const { file } = props;
+  const { filename_download: filenameDownload } = file ?? {};
+  const href = useDirectusFile(file);
+  return {
+    href: (href == null ? void 0 : href.toString()) ?? void 0,
+    download: filenameDownload ?? true
+  };
+}
+function useCollection(props) {
+  var _a, _b;
+  const { collection, target } = props;
+  return {
+    href: ((_b = (_a = collection == null ? void 0 : collection.translations) == null ? void 0 : _a[0]) == null ? void 0 : _b.path) ?? void 0,
+    target: target ?? void 0
+  };
+}
+function useExternalLink(props) {
+  const { external_link: externalLink, target } = props;
+  return {
     href: externalLink ?? void 0,
     target: target ?? void 0
-  }),
-  file: ({ file }) => {
-    const { filename_download: filenameDownload } = file ?? {};
-    const href = useDirectusFile(file);
-    return {
-      href: (href == null ? void 0 : href.toString()) ?? void 0,
-      download: filenameDownload ?? true
-    };
-  },
-  anchor: ({ anchor }) => ({ href: anchor ?? void 0 })
+  };
+}
+function useAnchor(props) {
+  const { anchor } = props;
+  return { href: anchor ?? void 0 };
+}
+const defaultPropsConfig = {
+  collection: useCollection,
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  "external-link": useExternalLink,
+  file: useFile,
+  anchor: useAnchor
 };
 function useDirectusLink(props) {
-  const { type, label, prefetch, replace, scroll, variant, tokens, themeName, customTheme, propsConfig } = props;
+  var _a;
+  const {
+    type,
+    label,
+    prefetch,
+    replace,
+    scroll,
+    tokens,
+    themeName,
+    customTheme,
+    propsConfig,
+    as = Link,
+    target,
+    anchor,
+    collection,
+    external_link: externalLink,
+    file,
+    id,
+    ...rest
+  } = props;
   if (!type) return {};
   const finalConfig = { ...defaultPropsConfig, ...propsConfig ?? {} };
-  const { href, ...rest } = finalConfig[type](props);
+  const linkProps = ((_a = finalConfig[type]) == null ? void 0 : _a.call(finalConfig, props)) ?? {};
+  const { href, ...restOfLinkProps } = linkProps;
   if (!href) return {};
   return {
-    themeName,
-    tokens: { ...tokens, ...variant ? { type: variant } : {} },
-    customTheme,
+    ...rest,
+    as,
+    ...themeName ? { themeName } : {},
+    ...customTheme ? { customTheme } : {},
+    ...tokens ? { tokens } : {},
     nextLinkProps: {
       href,
       prefetch: prefetch ?? void 0,
@@ -40,7 +75,7 @@ function useDirectusLink(props) {
     },
     href,
     children: label,
-    ...rest
+    ...restOfLinkProps
   };
 }
 export {

package/hooks/navigation-items.d.ts

@@ -4,6 +4,7 @@ import type { TNavigationItems, TNavigationItemsTree } from '../types/navigation
 /**
  *
  * @param navigationItems A tree of navigation items, with parents and children
+ * @param onNavigationItem Called when a navigation item is about to be added to the tree
  * @returns A tree of navigation items with ready-to-use DirectusLink components
  */
 export default function useNavigationItems<Depth extends number, Link, NavigationItems extends TNavigationItems<NavigationItems, Link, Depth> = TNavigationItems<unknown, Link, Depth>>(items: Nullable<Nullable<TNavigationItems<NavigationItems, Link, Depth>>[]>, onNavigationItem: (item: Nullable<TNavigationItems<NavigationItems, Link, Depth>>) => Nullable<TDirectusLinkProps>): Nullable<Nullable<TNavigationItemsTree>[]>;

package/hooks/navigation-items.js

@@ -1,26 +1,40 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
 const index = require("../components/DirectusLink/index.js");
+function createLinkProps(item, onNavigationItem) {
+  const { tokens, variant } = item ?? {};
+  const link = onNavigationItem(item);
+  const linkTokens = {
+    ...tokens,
+    ...link == null ? void 0 : link.tokens,
+    type: variant
+  };
+  const linkProps = {
+    ...link,
+    tokens: linkTokens
+  };
+  return linkProps;
+}
 function createParentTree(item, onNavigationItem, depth = -1) {
   const { parent } = item ?? {};
-  const link = onNavigationItem(item);
-  const { id } = link ?? {};
+  const linkProps = createLinkProps(item, onNavigationItem);
+  const { id } = linkProps ?? {};
   if (!id) return null;
   return {
-    link: /* @__PURE__ */ jsxRuntime.jsx(index, { ...link }),
-    linkProps: link,
+    link: /* @__PURE__ */ jsxRuntime.jsx(index, { ...linkProps }),
+    linkProps,
     parent: createParentTree(parent, onNavigationItem, depth - 1),
     depth
   };
 }
 function createChildrenTree(item, onNavigationItem, depth = 1) {
   const { children } = item ?? {};
-  const link = onNavigationItem(item);
-  const { id } = link ?? {};
+  const linkProps = createLinkProps(item, onNavigationItem);
+  const { id } = linkProps ?? {};
   if (!id) return null;
   return {
-    link: /* @__PURE__ */ jsxRuntime.jsx(index, { ...link }),
-    linkProps: link,
+    link: /* @__PURE__ */ jsxRuntime.jsx(index, { ...linkProps }),
+    linkProps,
     children: children == null ? void 0 : children.map((child) => createChildrenTree(child, onNavigationItem, depth + 1)),
     depth
   };
@@ -28,15 +42,15 @@ function createChildrenTree(item, onNavigationItem, depth = 1) {
 function useNavigationItems(items, onNavigationItem) {
   const tree = items == null ? void 0 : items.map((item) => {
     const { children, parent } = item ?? {};
-    const link = onNavigationItem(item);
+    const linkProps = createLinkProps(item, onNavigationItem);
     const parentTree = createParentTree(parent, onNavigationItem);
     const childrenTree = children == null ? void 0 : children.map((child) => createChildrenTree(child, onNavigationItem));
     return {
       depth: 0,
       parent: parentTree,
       children: childrenTree,
-      link: /* @__PURE__ */ jsxRuntime.jsx(index, { ...link }),
-      linkProps: link
+      link: /* @__PURE__ */ jsxRuntime.jsx(index, { ...linkProps }),
+      linkProps
     };
   });
   return tree;

package/hooks/navigation-items.mjs

@@ -1,25 +1,39 @@
 import { jsx } from "react/jsx-runtime";
 import DirectusLink from "../components/DirectusLink/index.mjs";
+function createLinkProps(item, onNavigationItem) {
+  const { tokens, variant } = item ?? {};
+  const link = onNavigationItem(item);
+  const linkTokens = {
+    ...tokens,
+    ...link == null ? void 0 : link.tokens,
+    type: variant
+  };
+  const linkProps = {
+    ...link,
+    tokens: linkTokens
+  };
+  return linkProps;
+}
 function createParentTree(item, onNavigationItem, depth = -1) {
   const { parent } = item ?? {};
-  const link = onNavigationItem(item);
-  const { id } = link ?? {};
+  const linkProps = createLinkProps(item, onNavigationItem);
+  const { id } = linkProps ?? {};
   if (!id) return null;
   return {
-    link: /* @__PURE__ */ jsx(DirectusLink, { ...link }),
-    linkProps: link,
+    link: /* @__PURE__ */ jsx(DirectusLink, { ...linkProps }),
+    linkProps,
     parent: createParentTree(parent, onNavigationItem, depth - 1),
     depth
   };
 }
 function createChildrenTree(item, onNavigationItem, depth = 1) {
   const { children } = item ?? {};
-  const link = onNavigationItem(item);
-  const { id } = link ?? {};
+  const linkProps = createLinkProps(item, onNavigationItem);
+  const { id } = linkProps ?? {};
   if (!id) return null;
   return {
-    link: /* @__PURE__ */ jsx(DirectusLink, { ...link }),
-    linkProps: link,
+    link: /* @__PURE__ */ jsx(DirectusLink, { ...linkProps }),
+    linkProps,
     children: children == null ? void 0 : children.map((child) => createChildrenTree(child, onNavigationItem, depth + 1)),
     depth
   };
@@ -27,15 +41,15 @@ function createChildrenTree(item, onNavigationItem, depth = 1) {
 function useNavigationItems(items, onNavigationItem) {
   const tree = items == null ? void 0 : items.map((item) => {
     const { children, parent } = item ?? {};
-    const link = onNavigationItem(item);
+    const linkProps = createLinkProps(item, onNavigationItem);
     const parentTree = createParentTree(parent, onNavigationItem);
     const childrenTree = children == null ? void 0 : children.map((child) => createChildrenTree(child, onNavigationItem));
     return {
       depth: 0,
       parent: parentTree,
       children: childrenTree,
-      link: /* @__PURE__ */ jsx(DirectusLink, { ...link }),
-      linkProps: link
+      link: /* @__PURE__ */ jsx(DirectusLink, { ...linkProps }),
+      linkProps
     };
   });
   return tree;

package/index.d.ts

@@ -1,4 +1,7 @@
 export { default as DirectusLink } from './components/DirectusLink';
+export { default as DirectusImg } from './components/DirectusImg';
+export { default as DirectusVideo } from './components/DirectusVideo';
+export { default as DirectusFile } from './components/DirectusFile';
 export { default as useDirectusFile } from './hooks/directus-file';
 export { default as useDirectusLink } from './hooks/directus-link';
 export { default as useNavigationItems } from './hooks/navigation-items';
@@ -6,4 +9,4 @@ export type { TFiles } from './types/files';
 export type { TPageSettings } from './types/page-settings';
 export type { TNavigationItems, TNavigationItemsTree } from './types/navigation-items';
 export type { TLinks } from './types/links';
-export type { TDirectusLinkProps } from './components/DirectusLink/interface';
+export type { TDirectusLinkProps, TUseDirectusLink, TDirectusLink, TDirectusLinkPropsConfig, TDirectusLinkComponentsConfig, } from './components/DirectusLink/interface';

package/index.js

@@ -1,10 +1,16 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const index = require("./components/DirectusLink/index.js");
+const index$1 = require("./components/DirectusImg/index.js");
+const index$2 = require("./components/DirectusVideo/index.js");
+const index$3 = require("./components/DirectusFile/index.js");
 const directusFile = require("./hooks/directus-file.js");
 const directusLink = require("./hooks/directus-link.js");
 const navigationItems = require("./hooks/navigation-items.js");
 exports.DirectusLink = index;
+exports.DirectusImg = index$1;
+exports.DirectusVideo = index$2;
+exports.DirectusFile = index$3;
 exports.useDirectusFile = directusFile;
 exports.useDirectusLink = directusLink;
 exports.useNavigationItems = navigationItems;

package/index.mjs

@@ -1,10 +1,16 @@
 import { default as default2 } from "./components/DirectusLink/index.mjs";
-import { default as default3 } from "./hooks/directus-file.mjs";
-import { default as default4 } from "./hooks/directus-link.mjs";
-import { default as default5 } from "./hooks/navigation-items.mjs";
+import { default as default3 } from "./components/DirectusImg/index.mjs";
+import { default as default4 } from "./components/DirectusVideo/index.mjs";
+import { default as default5 } from "./components/DirectusFile/index.mjs";
+import { default as default6 } from "./hooks/directus-file.mjs";
+import { default as default7 } from "./hooks/directus-link.mjs";
+import { default as default8 } from "./hooks/navigation-items.mjs";
 export {
+  default5 as DirectusFile,
+  default3 as DirectusImg,
   default2 as DirectusLink,
-  default3 as useDirectusFile,
-  default4 as useDirectusLink,
-  default5 as useNavigationItems
+  default4 as DirectusVideo,
+  default6 as useDirectusFile,
+  default7 as useDirectusLink,
+  default8 as useNavigationItems
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okam/directus-next-component",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "main": "./index.js",
   "types": "./index.d.ts",
   "exports": {

package/server.d.ts

@@ -1,7 +1,9 @@
-export * from './lib/hello-server';
 export { default as withDirectus } from './lib/withDirectus';
 export * from './lib/directus-next-rewrite';
 export { default as DirectusLink } from './components/DirectusLink';
+export { default as DirectusImg } from './components/DirectusImg';
+export { default as DirectusVideo } from './components/DirectusVideo';
+export { default as DirectusFile } from './components/DirectusFile';
 export { default as useDirectusFile } from './hooks/directus-file';
 export { default as useDirectusLink } from './hooks/directus-link';
 export { default as useNavigationItems } from './hooks/navigation-items';

package/server.js

@@ -1,18 +1,22 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const helloServer = require("./lib/hello-server.js");
 const withDirectus = require("./lib/withDirectus.js");
 const directusNextRewrite = require("./lib/directus-next-rewrite.js");
 const index = require("./components/DirectusLink/index.js");
+const index$1 = require("./components/DirectusImg/index.js");
+const index$2 = require("./components/DirectusVideo/index.js");
+const index$3 = require("./components/DirectusFile/index.js");
 const directusFile = require("./hooks/directus-file.js");
 const directusLink = require("./hooks/directus-link.js");
 const navigationItems = require("./hooks/navigation-items.js");
-exports.HelloServer = helloServer.HelloServer;
 exports.withDirectus = withDirectus;
 exports.config = directusNextRewrite.config;
 exports.directusRouteMiddleware = directusNextRewrite.directusRouteMiddleware;
 exports.fetchPageSettings = directusNextRewrite.fetchPageSettings;
 exports.DirectusLink = index;
+exports.DirectusImg = index$1;
+exports.DirectusVideo = index$2;
+exports.DirectusFile = index$3;
 exports.useDirectusFile = directusFile;
 exports.useDirectusLink = directusLink;
 exports.useNavigationItems = navigationItems;

package/server.mjs

@@ -1,18 +1,22 @@
-import { HelloServer } from "./lib/hello-server.mjs";
 import { default as default2 } from "./lib/withDirectus.mjs";
 import { config, directusRouteMiddleware, fetchPageSettings } from "./lib/directus-next-rewrite.mjs";
 import { default as default3 } from "./components/DirectusLink/index.mjs";
-import { default as default4 } from "./hooks/directus-file.mjs";
-import { default as default5 } from "./hooks/directus-link.mjs";
-import { default as default6 } from "./hooks/navigation-items.mjs";
+import { default as default4 } from "./components/DirectusImg/index.mjs";
+import { default as default5 } from "./components/DirectusVideo/index.mjs";
+import { default as default6 } from "./components/DirectusFile/index.mjs";
+import { default as default7 } from "./hooks/directus-file.mjs";
+import { default as default8 } from "./hooks/directus-link.mjs";
+import { default as default9 } from "./hooks/navigation-items.mjs";
 export {
+  default6 as DirectusFile,
+  default4 as DirectusImg,
   default3 as DirectusLink,
-  HelloServer,
+  default5 as DirectusVideo,
   config,
   directusRouteMiddleware,
   fetchPageSettings,
-  default4 as useDirectusFile,
-  default5 as useDirectusLink,
-  default6 as useNavigationItems,
+  default7 as useDirectusFile,
+  default8 as useDirectusLink,
+  default9 as useNavigationItems,
   default2 as withDirectus
 };

package/types/files.d.ts

@@ -1,18 +1,24 @@
 export type TFiles = {
-    id: string;
+    id?: string | null;
+    title?: string | null;
+    description?: string | null;
+    tags?: any | null;
+    location?: string | null;
+    storage?: string | null;
+    focal_point_divider?: string | null;
+    focal_point_x?: number | null;
+    focal_point_y?: number | null;
     filename_disk?: string | null;
     filename_download?: string | null;
-    /**
-     * @deprecated
-     */
-    filenameDownload?: string | null;
-    title?: string | null;
     type?: string | null;
     width?: number | null;
     height?: number | null;
     duration?: number | null;
     embed?: string | null;
-    description?: string | null;
-    focal_point_x?: number | null;
-    focal_point_y?: number | null;
+    caption?: string | null;
+    thumbhash?: string | null;
+    /**
+     * @deprecated Use `filename_download` instead
+     */
+    filenameDownload?: string | null;
 };

package/types/links.d.ts

@@ -12,9 +12,7 @@ export type TLinks = {
     replace?: boolean | null;
     scroll?: boolean | null;
     target?: string | null;
-    tokens?: any | null;
     type?: string | null;
-    variant?: string | null;
     collection?: TPageSettings | null;
     file?: TFiles | null;
 };

package/types/navigation-items.d.ts

@@ -17,11 +17,15 @@ export type TNavigationItemsTree = {
     depth: number;
 };
 type DepthLimit = [never, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
-export type TNavigationItemsParents<NavigationItems, Link, Depth extends number> = Depth extends never ? Link : {
-    parent?: Nullable<TNavigationItemsParents<NavigationItems, Link, Depth>>;
+export type TNavigationItemsBase<Link> = {
+    tokens?: any | null;
+    variant?: string | null;
 } & Link;
-export type TNavigationItemsChildren<NavigationItems, Link, Depth extends number> = Depth extends never ? Link : {
+export type TNavigationItemsParents<NavigationItems, Link, Depth extends number> = Depth extends never ? TNavigationItemsBase<Link> : {
+    parent?: Nullable<TNavigationItemsParents<NavigationItems, Link, Depth>>;
+} & TNavigationItemsBase<Link>;
+export type TNavigationItemsChildren<NavigationItems, Link, Depth extends number> = Depth extends never ? TNavigationItemsBase<Link> : {
     children?: Nullable<Nullable<TNavigationItemsChildren<NavigationItems, Link, DepthLimit[Depth]>>[]>;
-} & Link;
+} & TNavigationItemsBase<Link>;
 export type TNavigationItems<NavigationItems, Link, Depth extends number> = TNavigationItemsChildren<NavigationItems, Link, Depth> & TNavigationItemsParents<NavigationItems, Link, Depth>;
 export {};

package/lib/hello-server.d.ts

@@ -1 +0,0 @@
-export declare function HelloServer(): Promise<import("react/jsx-runtime").JSX.Element>;

package/lib/hello-server.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-async function HelloServer() {
-  return /* @__PURE__ */ jsxRuntime.jsx("h1", { children: "Hello Server" });
-}
-exports.HelloServer = HelloServer;

package/lib/hello-server.mjs

@@ -1,7 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-async function HelloServer() {
-  return /* @__PURE__ */ jsx("h1", { children: "Hello Server" });
-}
-export {
-  HelloServer
-};