@adecore/ui 0.54.0 → 0.54.2

package/dist/FileIcon.d.ts

@@ -3,6 +3,6 @@ export interface FileIconProps {
     path: string;
     size?: number;
     className?: string;
-    ref?: Ref<SVGSVGElement>;
+    ref?: Ref<SVGSVGElement | HTMLImageElement>;
 }
 export declare function FileIcon({ path, size, className, ref }: FileIconProps): import("react").JSX.Element;

package/dist/FileIcon.js

@@ -1,14 +1,14 @@
 import { c as _c } from "react/compiler-runtime";
 import clsx from 'clsx';
-import { useInsertionEffect } from 'react';
-import { fileIconFor, fileIconOverrideFor, mountFileIconSprite } from './file-icon.js';
+import { useInsertionEffect, useSyncExternalStore } from 'react';
+import { fileIconFor, fileIconOverrideFor, fileIconOverrideVersion, mountFileIconSprite, subscribeFileIconOverride } from './file-icon.js';
 /*
  * The one place the library steps outside Lucide. The glyphs are Seti's, and so are their colors: a
  * TypeScript blue is the mark of the file type, not a theme choice. Decorative like every other icon here.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 export function FileIcon(t0) {
-  const $ = _c(20);
+  const $ = _c(22);
   const {
     path,
     size: t1,
@@ -24,71 +24,75 @@ export function FileIcon(t0) {
     t2 = $[0];
   }
   useInsertionEffect(mountFileIconSprite, t2);
+  const version = useSyncExternalStore(subscribeFileIconOverride, fileIconOverrideVersion, fileIconOverrideVersion);
   let t3;
-  if ($[1] !== path) {
-    t3 = fileIconOverrideFor(path);
+  if ($[1] !== path || $[2] !== version) {
+    t3 = overrideFor(path, version);
     $[1] = path;
-    $[2] = t3;
+    $[2] = version;
+    $[3] = t3;
   } else {
-    t3 = $[2];
+    t3 = $[3];
   }
   const own = t3;
   if (own !== null) {
     let t4;
-    if ($[3] !== className) {
+    if ($[4] !== className) {
       t4 = clsx("file-icon", className);
-      $[3] = className;
-      $[4] = t4;
+      $[4] = className;
+      $[5] = t4;
     } else {
-      t4 = $[4];
+      t4 = $[5];
     }
     let t5;
-    if ($[5] !== own || $[6] !== size || $[7] !== t4) {
+    if ($[6] !== own || $[7] !== ref || $[8] !== size || $[9] !== t4) {
       t5 = /*#__PURE__*/_jsx("img", {
+        ref: ref,
         src: own,
         alt: "",
         width: size,
         height: size,
         className: t4
       });
-      $[5] = own;
-      $[6] = size;
-      $[7] = t4;
-      $[8] = t5;
+      $[6] = own;
+      $[7] = ref;
+      $[8] = size;
+      $[9] = t4;
+      $[10] = t5;
     } else {
-      t5 = $[8];
+      t5 = $[10];
     }
     return t5;
   }
   let t4;
-  if ($[9] !== className) {
+  if ($[11] !== className) {
     t4 = clsx("file-icon", className);
-    $[9] = className;
-    $[10] = t4;
+    $[11] = className;
+    $[12] = t4;
   } else {
-    t4 = $[10];
+    t4 = $[12];
   }
   let t5;
-  if ($[11] !== path) {
+  if ($[13] !== path) {
     t5 = fileIconFor(path);
-    $[11] = path;
-    $[12] = t5;
+    $[13] = path;
+    $[14] = t5;
   } else {
-    t5 = $[12];
+    t5 = $[14];
   }
   const t6 = `#${t5}`;
   let t7;
-  if ($[13] !== t6) {
+  if ($[15] !== t6) {
     t7 = /*#__PURE__*/_jsx("use", {
       href: t6
     });
-    $[13] = t6;
-    $[14] = t7;
+    $[15] = t6;
+    $[16] = t7;
   } else {
-    t7 = $[14];
+    t7 = $[16];
   }
   let t8;
-  if ($[15] !== ref || $[16] !== size || $[17] !== t4 || $[18] !== t7) {
+  if ($[17] !== ref || $[18] !== size || $[19] !== t4 || $[20] !== t7) {
     t8 = /*#__PURE__*/_jsx("svg", {
       ref: ref,
       className: t4,
@@ -98,13 +102,17 @@ export function FileIcon(t0) {
       "aria-hidden": true,
       children: t7
     });
-    $[15] = ref;
-    $[16] = size;
-    $[17] = t4;
-    $[18] = t7;
-    $[19] = t8;
+    $[17] = ref;
+    $[18] = size;
+    $[19] = t4;
+    $[20] = t7;
+    $[21] = t8;
   } else {
-    t8 = $[19];
+    t8 = $[21];
   }
   return t8;
+}
+/* Takes the version so the compiler caches the result on it as well as on the path. */
+function overrideFor(path, _version) {
+  return fileIconOverrideFor(path);
 }

package/dist/file-icon.d.ts

@@ -2,5 +2,7 @@ import { type FileTreeIconConfig } from '@pierre/trees';
 export declare const FILE_TREE_ICONS: FileTreeIconConfig;
 export declare const fileIconFor: (path: string) => string;
 export declare function setFileIconOverride(next: ((path: string) => string | null) | null): void;
+export declare function subscribeFileIconOverride(onChange: () => void): () => void;
+export declare const fileIconOverrideVersion: () => number;
 export declare function fileIconOverrideFor(path: string): string | null;
 export declare const mountFileIconSprite: () => void;

package/dist/file-icon.js

@@ -25,10 +25,22 @@ const resolveIcon = (...args) => {
  */
 export const fileIconFor = path => resolveIcon('file-tree-icon-file', path).name;
 let override = null;
+let overrideVersion = 0;
+const overrideListeners = new Set();
 /* What an app knows better about a file's icon: the address of an svg, or null for the icon this set has. */
 export function setFileIconOverride(next) {
   override = next;
+  overrideVersion++;
+  overrideListeners.forEach(listener => listener());
 }
+export function subscribeFileIconOverride(onChange) {
+  overrideListeners.add(onChange);
+  return () => {
+    overrideListeners.delete(onChange);
+  };
+}
+/* A mounted icon reads this so it draws again once the override changes. */
+export const fileIconOverrideVersion = () => overrideVersion;
 export function fileIconOverrideFor(path) {
   return override?.(path) ?? null;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/ui",
-  "version": "0.54.0",
+  "version": "0.54.2",
   "description": "React components, a theme, formatters and a settings dialog for desktop-grade apps on React 19, Base UI and Tailwind 4.",
   "license": "FSL-1.1-MIT",
   "author": "Bas Milius",

package/src/FileIcon.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
-import { useInsertionEffect, type Ref } from 'react';
-import { fileIconFor, fileIconOverrideFor, mountFileIconSprite } from './file-icon.ts';
+import { useInsertionEffect, useSyncExternalStore, type Ref } from 'react';
+import { fileIconFor, fileIconOverrideFor, fileIconOverrideVersion, mountFileIconSprite, subscribeFileIconOverride } from './file-icon.ts';
 
 export interface FileIconProps {
     /* Absolute or relative; only the last segment decides which icon this is. */
@@ -8,7 +8,9 @@ export interface FileIconProps {
 
     size?: number;
     className?: string;
-    ref?: Ref<SVGSVGElement>;
+
+    /* An `<img>` when an override gives the file an icon of the app's own, the `<svg>` otherwise. */
+    ref?: Ref<SVGSVGElement | HTMLImageElement>;
 }
 
 /*
@@ -19,15 +21,22 @@ export function FileIcon({ path, size = 16, className, ref }: FileIconProps) {
     // Before the browser paints, so a `<use>` never points at a symbol that is not in the document yet.
     useInsertionEffect(mountFileIconSprite, []);
 
-    const own = fileIconOverrideFor(path);
+    const version = useSyncExternalStore(subscribeFileIconOverride, fileIconOverrideVersion, fileIconOverrideVersion);
+    const own = overrideFor(path, version);
 
+    // React types a readonly ref object, so the union passes to neither element without a cast; each holds one of its members.
     if (own !== null) {
-        return <img src={own} alt="" width={size} height={size} className={clsx('file-icon', className)} />;
+        return <img ref={ref as Ref<HTMLImageElement>} src={own} alt="" width={size} height={size} className={clsx('file-icon', className)} />;
     }
 
     return (
-        <svg ref={ref} className={clsx('file-icon', className)} width={size} height={size} viewBox="0 0 16 16" aria-hidden>
+        <svg ref={ref as Ref<SVGSVGElement>} className={clsx('file-icon', className)} width={size} height={size} viewBox="0 0 16 16" aria-hidden>
             <use href={`#${fileIconFor(path)}`} />
         </svg>
     );
 }
+
+/* Takes the version so the compiler caches the result on it as well as on the path. */
+function overrideFor(path: string, _version: number): string | null {
+    return fileIconOverrideFor(path);
+}

package/src/file-icon.ts

@@ -30,12 +30,27 @@ const resolveIcon: ReturnType<typeof createFileTreeIconResolver>['resolveIcon']
 export const fileIconFor = (path: string): string => resolveIcon('file-tree-icon-file', path).name;
 
 let override: ((path: string) => string | null) | null = null;
+let overrideVersion = 0;
+const overrideListeners = new Set<() => void>();
 
 /* What an app knows better about a file's icon: the address of an svg, or null for the icon this set has. */
 export function setFileIconOverride(next: ((path: string) => string | null) | null): void {
     override = next;
+    overrideVersion++;
+    overrideListeners.forEach((listener) => listener());
 }
 
+export function subscribeFileIconOverride(onChange: () => void): () => void {
+    overrideListeners.add(onChange);
+
+    return () => {
+        overrideListeners.delete(onChange);
+    };
+}
+
+/* A mounted icon reads this so it draws again once the override changes. */
+export const fileIconOverrideVersion = (): number => overrideVersion;
+
 export function fileIconOverrideFor(path: string): string | null {
     return override?.(path) ?? null;
 }