@brftech/filex-react 0.52.0 → 0.53.0

package/dist/filex-react.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react"),a=require("@lit/react");require("@brftech/filex");function s(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const r=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(e,n,r.get?r:{enumerable:!0,get:()=>t[n]})}}return e.default=t,Object.freeze(e)}const l=s(o),i=["config","apiBase","endpoint","locale","theme","timeZone","trashVisible","sidenav","connections","uiProfile"];function c(){var n;const t=typeof customElements<"u"?customElements.get("filex-explorer"):void 0,e=(n=t==null?void 0:t.def)==null?void 0:n.props;if(Array.isArray(e)&&e.length)return e;if(e&&typeof e=="object"){const r=Object.keys(e);if(r.length)return r}return i}function u(){const t=typeof HTMLElement<"u"?HTMLElement:class{};class e extends t{}for(const n of c())n in e.prototype||Object.defineProperty(e.prototype,n,{value:void 0,writable:!0,configurable:!0,enumerable:!1});return e}const p=u(),f=a.createComponent({react:l,tagName:"filex-explorer",elementClass:p,displayName:"FileManager",events:{onError:"error",onShareCreated:"share-created",onFileOpened:"file-opened",onUploadProgress:"upload-progress",onSelectionChange:"selection-change"}});exports.FileManager=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react"),a=require("@lit/react");require("@brftech/filex");function s(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const r=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(e,n,r.get?r:{enumerable:!0,get:()=>t[n]})}}return e.default=t,Object.freeze(e)}const l=s(o),i=["config","apiBase","endpoint","locale","theme","timeZone","trashVisible","sidenav","connections","uiProfile"];function c(){var n;const t=typeof customElements<"u"?customElements.get("filex-explorer"):void 0,e=(n=t==null?void 0:t.def)==null?void 0:n.props;if(Array.isArray(e)&&e.length)return e;if(e&&typeof e=="object"){const r=Object.keys(e);if(r.length)return r}return i}function p(){const t=typeof HTMLElement<"u"?HTMLElement:class{};class e extends t{}for(const n of c())n in e.prototype||Object.defineProperty(e.prototype,n,{value:void 0,writable:!0,configurable:!0,enumerable:!1});return e}const u=p(),f=a.createComponent({react:l,tagName:"filex-explorer",elementClass:u,displayName:"FileManager",events:{onError:"error",onShareCreated:"share-created",onFileOpened:"file-opened",onUploadProgress:"upload-progress",onSelectionChange:"selection-change",onOpenAppStore:"open-app-store"}});exports.FileManager=f;
 //# sourceMappingURL=filex-react.cjs.map

package/dist/filex-react.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"filex-react.cjs","sources":["../src/index.ts"],"sourcesContent":["/**\n * @brftech/filex-react — React adapter around the `<filex-explorer>`\n * Web Component.\n *\n * Uses `@lit/react`'s `createComponent` to map element attributes /\n * properties / events into idiomatic React props (camelCased event\n * handlers like `onError`, real prop assignment for the `config`\n * object, no need to imperatively reach for `.addEventListener`).\n *\n * Side-effect: importing this module also imports `@brftech/filex`\n * which registers the underlying custom element.\n */\n\nimport * as React from 'react';\nimport { createComponent } from '@lit/react';\nimport '@brftech/filex'; // side-effect: registers `<filex-explorer>`\nimport type { ExplorerConfig } from '@brftech/filex';\n\n/**\n * Property names `<filex-explorer>` accepts, taken from the component\n * definition the element was built from.\n *\n * ⚠⚠ This list is the entire bridge, and handing `createComponent` the\n * registered class instead of it is why this package did not work at all.\n * `createComponent` decides prop-by-prop with `k in elementClass.prototype`:\n * a name it finds there is ASSIGNED to the element (`node[k] = value`),\n * everything else is handed to `React.createElement` and lands as an\n * attribute. Vue's `defineCustomElement` defines its props on each\n * INSTANCE (`_resolveProps`, at connectedCallback), so the class prototype\n * carries nothing but `constructor` — measured 2026-09-13 in a real\n * browser: `Object.getOwnPropertyNames(cls.prototype)` is `['constructor']`.\n *\n * Every prop therefore took the attribute path, and `config` — an object —\n * was stringified by React on the way: the element ended up with\n * `config=\"[object Object]\"` and `el.config === '[object Object]'`. The\n * explorer never received a config, never mounted, and `<FileManager>`\n * rendered an empty page.\n *\n * The names come from `elementClass.def.props`, i.e. from the wrapper\n * component itself, so adding a prop to `@brftech/filex` cannot leave this\n * package one behind. FALLBACK_PROPS is only for an environment with no\n * custom-element registry (SSR) or a future Vue that stops exposing `def`;\n * `packages/react` is pinned to the wrapper's own list by\n * `web/tests/deploy/packageLook.test.ts`.\n */\nconst FALLBACK_PROPS = [\n  'config',\n  'apiBase',\n  'endpoint',\n  'locale',\n  'theme',\n  'timeZone',\n  'trashVisible',\n  'sidenav',\n  'connections',\n  'uiProfile',\n] as const;\n\nfunction elementPropNames(): readonly string[] {\n  const registered =\n    typeof customElements !== 'undefined'\n      ? (customElements.get('filex-explorer') as\n          | (CustomElementConstructor & { def?: { props?: unknown } })\n          | undefined)\n      : undefined;\n  const declared = registered?.def?.props;\n  if (Array.isArray(declared) && declared.length) return declared as string[];\n  if (declared && typeof declared === 'object') {\n    const keys = Object.keys(declared as Record<string, unknown>);\n    if (keys.length) return keys;\n  }\n  return FALLBACK_PROPS;\n}\n\n/**\n * A stand-in class whose PROTOTYPE carries those names, which is the only\n * thing `createComponent` reads it for (that, and `.name` for the devtools\n * label — we pass `displayName` instead).\n *\n * It extends HTMLElement where there is one so the native properties keep\n * behaving exactly as they did: `id`, `title`, `hidden` and friends stay on\n * the property path, `style`/`className`/`children`/`ref` stay React's.\n * Nothing ever constructs it — an unregistered `class extends HTMLElement`\n * is only illegal to `new`, not to declare.\n */\nfunction propBridgeClass(): CustomElementConstructor {\n  const Base = (\n    typeof HTMLElement !== 'undefined' ? HTMLElement : class {}\n  ) as CustomElementConstructor;\n  class FilexExplorerProps extends Base {}\n  for (const name of elementPropNames()) {\n    if (name in FilexExplorerProps.prototype) continue;\n    Object.defineProperty(FilexExplorerProps.prototype, name, {\n      value: undefined,\n      writable: true,\n      configurable: true,\n      enumerable: false,\n    });\n  }\n  return FilexExplorerProps;\n}\n\nconst FilexElementClass = propBridgeClass();\n\n/**\n * Idiomatic React component — used like a normal JSX tag with native\n * props.\n *\n *   <FileManager\n *     config={{ apiBase: 'https://files.example.com',\n *               auth: { kind: 'bearer', token } }}\n *     onError={(e) => console.error(e.detail)}\n *   />\n */\nexport const FileManager = createComponent({\n  react: React,\n  tagName: 'filex-explorer',\n  elementClass: FilexElementClass,\n  displayName: 'FileManager',\n  events: {\n    onError: 'error',\n    onShareCreated: 'share-created',\n    onFileOpened: 'file-opened',\n    onUploadProgress: 'upload-progress',\n    onSelectionChange: 'selection-change',\n  },\n});\n\n/**\n * Re-export the config types so React consumers don't need a second\n * dependency on `@brftech/filex-core` just to type the `config` prop.\n */\nexport type {\n  ExplorerConfig,\n  AuthConfig,\n  ThemeMode,\n  LocaleCode,\n  FileNode,\n  ShareInfo,\n  Capabilities,\n  UploadInitResponse,\n  UploadFinalizeResponse,\n  ArchiveEntry,\n  ViewMode,\n} from '@brftech/filex-core';\n\n/**\n * Helper-typed payloads the events carry — matches the SFC's emit\n * declarations so consumers get autocomplete on `event.detail`.\n */\nexport interface FilexErrorDetail {\n  message: string;\n  context?: unknown;\n}\n\nexport interface FilexShareCreatedDetail {\n  path: string;\n  url: string;\n  pin: string | null;\n}\n\nexport interface FilexFileOpenedDetail {\n  path: string;\n  basename: string;\n}\n\nexport interface FilexUploadProgressDetail {\n  uploadId: string;\n  percent: number;\n  done: boolean;\n}\n\nexport type FilexSelectionChangeDetail = Array<{\n  path: string;\n  basename: string;\n  type: 'file' | 'dir';\n}>;\n"],"names":["FALLBACK_PROPS","elementPropNames","registered","declared","_a","keys","propBridgeClass","Base","FilexExplorerProps","name","FilexElementClass","FileManager","createComponent","React"],"mappings":"qbA6CMA,EAAiB,CACrB,SACA,UACA,WACA,SACA,QACA,WACA,eACA,UACA,cACA,WACF,EAEA,SAASC,GAAsC,OAC7C,MAAMC,EACJ,OAAO,eAAmB,IACrB,eAAe,IAAI,gBAAgB,EAGpC,OACAC,GAAWC,EAAAF,GAAA,YAAAA,EAAY,MAAZ,YAAAE,EAAiB,MAClC,GAAI,MAAM,QAAQD,CAAQ,GAAKA,EAAS,OAAQ,OAAOA,EACvD,GAAIA,GAAY,OAAOA,GAAa,SAAU,CAC5C,MAAME,EAAO,OAAO,KAAKF,CAAmC,EAC5D,GAAIE,EAAK,OAAQ,OAAOA,CAC1B,CACA,OAAOL,CACT,CAaA,SAASM,GAA4C,CACnD,MAAMC,EACJ,OAAO,YAAgB,IAAc,YAAc,KAAM,CAAA,EAE3D,MAAMC,UAA2BD,CAAK,CAAA,CACtC,UAAWE,KAAQR,IACbQ,KAAQD,EAAmB,WAC/B,OAAO,eAAeA,EAAmB,UAAWC,EAAM,CACxD,MAAO,OACP,SAAU,GACV,aAAc,GACd,WAAY,EAAA,CACb,EAEH,OAAOD,CACT,CAEA,MAAME,EAAoBJ,EAAA,EAYbK,EAAcC,EAAAA,gBAAgB,CACzC,MAAOC,EACP,QAAS,iBACT,aAAcH,EACd,YAAa,cACb,OAAQ,CACN,QAAS,QACT,eAAgB,gBAChB,aAAc,cACd,iBAAkB,kBAClB,kBAAmB,kBAAA,CAEvB,CAAC"}
+{"version":3,"file":"filex-react.cjs","sources":["../src/index.ts"],"sourcesContent":["/**\n * @brftech/filex-react — React adapter around the `<filex-explorer>`\n * Web Component.\n *\n * Uses `@lit/react`'s `createComponent` to map element attributes /\n * properties / events into idiomatic React props (camelCased event\n * handlers like `onError`, real prop assignment for the `config`\n * object, no need to imperatively reach for `.addEventListener`).\n *\n * Side-effect: importing this module also imports `@brftech/filex`\n * which registers the underlying custom element.\n */\n\nimport * as React from 'react';\nimport { createComponent } from '@lit/react';\nimport '@brftech/filex'; // side-effect: registers `<filex-explorer>`\nimport type { ExplorerConfig } from '@brftech/filex';\n\n/**\n * Property names `<filex-explorer>` accepts, taken from the component\n * definition the element was built from.\n *\n * ⚠⚠ This list is the entire bridge, and handing `createComponent` the\n * registered class instead of it is why this package did not work at all.\n * `createComponent` decides prop-by-prop with `k in elementClass.prototype`:\n * a name it finds there is ASSIGNED to the element (`node[k] = value`),\n * everything else is handed to `React.createElement` and lands as an\n * attribute. Vue's `defineCustomElement` defines its props on each\n * INSTANCE (`_resolveProps`, at connectedCallback), so the class prototype\n * carries nothing but `constructor` — measured 2026-09-13 in a real\n * browser: `Object.getOwnPropertyNames(cls.prototype)` is `['constructor']`.\n *\n * Every prop therefore took the attribute path, and `config` — an object —\n * was stringified by React on the way: the element ended up with\n * `config=\"[object Object]\"` and `el.config === '[object Object]'`. The\n * explorer never received a config, never mounted, and `<FileManager>`\n * rendered an empty page.\n *\n * The names come from `elementClass.def.props`, i.e. from the wrapper\n * component itself, so adding a prop to `@brftech/filex` cannot leave this\n * package one behind. FALLBACK_PROPS is only for an environment with no\n * custom-element registry (SSR) or a future Vue that stops exposing `def`;\n * `packages/react` is pinned to the wrapper's own list by\n * `web/tests/deploy/packageLook.test.ts`.\n */\nconst FALLBACK_PROPS = [\n  'config',\n  'apiBase',\n  'endpoint',\n  'locale',\n  'theme',\n  'timeZone',\n  'trashVisible',\n  'sidenav',\n  'connections',\n  'uiProfile',\n] as const;\n\nfunction elementPropNames(): readonly string[] {\n  const registered =\n    typeof customElements !== 'undefined'\n      ? (customElements.get('filex-explorer') as\n          | (CustomElementConstructor & { def?: { props?: unknown } })\n          | undefined)\n      : undefined;\n  const declared = registered?.def?.props;\n  if (Array.isArray(declared) && declared.length) return declared as string[];\n  if (declared && typeof declared === 'object') {\n    const keys = Object.keys(declared as Record<string, unknown>);\n    if (keys.length) return keys;\n  }\n  return FALLBACK_PROPS;\n}\n\n/**\n * A stand-in class whose PROTOTYPE carries those names, which is the only\n * thing `createComponent` reads it for (that, and `.name` for the devtools\n * label — we pass `displayName` instead).\n *\n * It extends HTMLElement where there is one so the native properties keep\n * behaving exactly as they did: `id`, `title`, `hidden` and friends stay on\n * the property path, `style`/`className`/`children`/`ref` stay React's.\n * Nothing ever constructs it — an unregistered `class extends HTMLElement`\n * is only illegal to `new`, not to declare.\n */\nfunction propBridgeClass(): CustomElementConstructor {\n  const Base = (\n    typeof HTMLElement !== 'undefined' ? HTMLElement : class {}\n  ) as CustomElementConstructor;\n  class FilexExplorerProps extends Base {}\n  for (const name of elementPropNames()) {\n    if (name in FilexExplorerProps.prototype) continue;\n    Object.defineProperty(FilexExplorerProps.prototype, name, {\n      value: undefined,\n      writable: true,\n      configurable: true,\n      enumerable: false,\n    });\n  }\n  return FilexExplorerProps;\n}\n\nconst FilexElementClass = propBridgeClass();\n\n/**\n * Idiomatic React component — used like a normal JSX tag with native\n * props.\n *\n *   <FileManager\n *     config={{ apiBase: 'https://files.example.com',\n *               auth: { kind: 'bearer', token } }}\n *     onError={(e) => console.error(e.detail)}\n *   />\n */\nexport const FileManager = createComponent({\n  react: React,\n  tagName: 'filex-explorer',\n  elementClass: FilexElementClass,\n  displayName: 'FileManager',\n  events: {\n    onError: 'error',\n    onShareCreated: 'share-created',\n    onFileOpened: 'file-opened',\n    onUploadProgress: 'upload-progress',\n    onSelectionChange: 'selection-change',\n    // #162 - the \"App store\" row (config.appStorePage).\n    onOpenAppStore: 'open-app-store',\n  },\n});\n\n/**\n * Re-export the config types so React consumers don't need a second\n * dependency on `@brftech/filex-core` just to type the `config` prop.\n */\nexport type {\n  ExplorerConfig,\n  AuthConfig,\n  ThemeMode,\n  LocaleCode,\n  FileNode,\n  ShareInfo,\n  Capabilities,\n  UploadInitResponse,\n  UploadFinalizeResponse,\n  ArchiveEntry,\n  ViewMode,\n} from '@brftech/filex-core';\n\n/**\n * Helper-typed payloads the events carry — matches the SFC's emit\n * declarations so consumers get autocomplete on `event.detail`.\n */\nexport interface FilexErrorDetail {\n  message: string;\n  context?: unknown;\n}\n\nexport interface FilexShareCreatedDetail {\n  path: string;\n  url: string;\n  pin: string | null;\n}\n\nexport interface FilexFileOpenedDetail {\n  path: string;\n  basename: string;\n}\n\nexport interface FilexUploadProgressDetail {\n  uploadId: string;\n  percent: number;\n  done: boolean;\n}\n\nexport type FilexSelectionChangeDetail = Array<{\n  path: string;\n  basename: string;\n  type: 'file' | 'dir';\n}>;\n"],"names":["FALLBACK_PROPS","elementPropNames","registered","declared","_a","keys","propBridgeClass","Base","FilexExplorerProps","name","FilexElementClass","FileManager","createComponent","React"],"mappings":"qbA6CMA,EAAiB,CACrB,SACA,UACA,WACA,SACA,QACA,WACA,eACA,UACA,cACA,WACF,EAEA,SAASC,GAAsC,OAC7C,MAAMC,EACJ,OAAO,eAAmB,IACrB,eAAe,IAAI,gBAAgB,EAGpC,OACAC,GAAWC,EAAAF,GAAA,YAAAA,EAAY,MAAZ,YAAAE,EAAiB,MAClC,GAAI,MAAM,QAAQD,CAAQ,GAAKA,EAAS,OAAQ,OAAOA,EACvD,GAAIA,GAAY,OAAOA,GAAa,SAAU,CAC5C,MAAME,EAAO,OAAO,KAAKF,CAAmC,EAC5D,GAAIE,EAAK,OAAQ,OAAOA,CAC1B,CACA,OAAOL,CACT,CAaA,SAASM,GAA4C,CACnD,MAAMC,EACJ,OAAO,YAAgB,IAAc,YAAc,KAAM,CAAA,EAE3D,MAAMC,UAA2BD,CAAK,CAAA,CACtC,UAAWE,KAAQR,IACbQ,KAAQD,EAAmB,WAC/B,OAAO,eAAeA,EAAmB,UAAWC,EAAM,CACxD,MAAO,OACP,SAAU,GACV,aAAc,GACd,WAAY,EAAA,CACb,EAEH,OAAOD,CACT,CAEA,MAAME,EAAoBJ,EAAA,EAYbK,EAAcC,EAAAA,gBAAgB,CACzC,MAAOC,EACP,QAAS,iBACT,aAAcH,EACd,YAAa,cACb,OAAQ,CACN,QAAS,QACT,eAAgB,gBAChB,aAAc,cACd,iBAAkB,kBAClB,kBAAmB,mBAEnB,eAAgB,gBAAA,CAEpB,CAAC"}

package/dist/filex-react.js

@@ -37,17 +37,19 @@ function l() {
     });
   return e;
 }
-const c = l(), m = s({
+const p = l(), m = s({
   react: r,
   tagName: "filex-explorer",
-  elementClass: c,
+  elementClass: p,
   displayName: "FileManager",
   events: {
     onError: "error",
     onShareCreated: "share-created",
     onFileOpened: "file-opened",
     onUploadProgress: "upload-progress",
-    onSelectionChange: "selection-change"
+    onSelectionChange: "selection-change",
+    // #162 - the "App store" row (config.appStorePage).
+    onOpenAppStore: "open-app-store"
   }
 });
 export {

package/dist/filex-react.js.map

@@ -1 +1 @@
-{"version":3,"file":"filex-react.js","sources":["../src/index.ts"],"sourcesContent":["/**\n * @brftech/filex-react — React adapter around the `<filex-explorer>`\n * Web Component.\n *\n * Uses `@lit/react`'s `createComponent` to map element attributes /\n * properties / events into idiomatic React props (camelCased event\n * handlers like `onError`, real prop assignment for the `config`\n * object, no need to imperatively reach for `.addEventListener`).\n *\n * Side-effect: importing this module also imports `@brftech/filex`\n * which registers the underlying custom element.\n */\n\nimport * as React from 'react';\nimport { createComponent } from '@lit/react';\nimport '@brftech/filex'; // side-effect: registers `<filex-explorer>`\nimport type { ExplorerConfig } from '@brftech/filex';\n\n/**\n * Property names `<filex-explorer>` accepts, taken from the component\n * definition the element was built from.\n *\n * ⚠⚠ This list is the entire bridge, and handing `createComponent` the\n * registered class instead of it is why this package did not work at all.\n * `createComponent` decides prop-by-prop with `k in elementClass.prototype`:\n * a name it finds there is ASSIGNED to the element (`node[k] = value`),\n * everything else is handed to `React.createElement` and lands as an\n * attribute. Vue's `defineCustomElement` defines its props on each\n * INSTANCE (`_resolveProps`, at connectedCallback), so the class prototype\n * carries nothing but `constructor` — measured 2026-09-13 in a real\n * browser: `Object.getOwnPropertyNames(cls.prototype)` is `['constructor']`.\n *\n * Every prop therefore took the attribute path, and `config` — an object —\n * was stringified by React on the way: the element ended up with\n * `config=\"[object Object]\"` and `el.config === '[object Object]'`. The\n * explorer never received a config, never mounted, and `<FileManager>`\n * rendered an empty page.\n *\n * The names come from `elementClass.def.props`, i.e. from the wrapper\n * component itself, so adding a prop to `@brftech/filex` cannot leave this\n * package one behind. FALLBACK_PROPS is only for an environment with no\n * custom-element registry (SSR) or a future Vue that stops exposing `def`;\n * `packages/react` is pinned to the wrapper's own list by\n * `web/tests/deploy/packageLook.test.ts`.\n */\nconst FALLBACK_PROPS = [\n  'config',\n  'apiBase',\n  'endpoint',\n  'locale',\n  'theme',\n  'timeZone',\n  'trashVisible',\n  'sidenav',\n  'connections',\n  'uiProfile',\n] as const;\n\nfunction elementPropNames(): readonly string[] {\n  const registered =\n    typeof customElements !== 'undefined'\n      ? (customElements.get('filex-explorer') as\n          | (CustomElementConstructor & { def?: { props?: unknown } })\n          | undefined)\n      : undefined;\n  const declared = registered?.def?.props;\n  if (Array.isArray(declared) && declared.length) return declared as string[];\n  if (declared && typeof declared === 'object') {\n    const keys = Object.keys(declared as Record<string, unknown>);\n    if (keys.length) return keys;\n  }\n  return FALLBACK_PROPS;\n}\n\n/**\n * A stand-in class whose PROTOTYPE carries those names, which is the only\n * thing `createComponent` reads it for (that, and `.name` for the devtools\n * label — we pass `displayName` instead).\n *\n * It extends HTMLElement where there is one so the native properties keep\n * behaving exactly as they did: `id`, `title`, `hidden` and friends stay on\n * the property path, `style`/`className`/`children`/`ref` stay React's.\n * Nothing ever constructs it — an unregistered `class extends HTMLElement`\n * is only illegal to `new`, not to declare.\n */\nfunction propBridgeClass(): CustomElementConstructor {\n  const Base = (\n    typeof HTMLElement !== 'undefined' ? HTMLElement : class {}\n  ) as CustomElementConstructor;\n  class FilexExplorerProps extends Base {}\n  for (const name of elementPropNames()) {\n    if (name in FilexExplorerProps.prototype) continue;\n    Object.defineProperty(FilexExplorerProps.prototype, name, {\n      value: undefined,\n      writable: true,\n      configurable: true,\n      enumerable: false,\n    });\n  }\n  return FilexExplorerProps;\n}\n\nconst FilexElementClass = propBridgeClass();\n\n/**\n * Idiomatic React component — used like a normal JSX tag with native\n * props.\n *\n *   <FileManager\n *     config={{ apiBase: 'https://files.example.com',\n *               auth: { kind: 'bearer', token } }}\n *     onError={(e) => console.error(e.detail)}\n *   />\n */\nexport const FileManager = createComponent({\n  react: React,\n  tagName: 'filex-explorer',\n  elementClass: FilexElementClass,\n  displayName: 'FileManager',\n  events: {\n    onError: 'error',\n    onShareCreated: 'share-created',\n    onFileOpened: 'file-opened',\n    onUploadProgress: 'upload-progress',\n    onSelectionChange: 'selection-change',\n  },\n});\n\n/**\n * Re-export the config types so React consumers don't need a second\n * dependency on `@brftech/filex-core` just to type the `config` prop.\n */\nexport type {\n  ExplorerConfig,\n  AuthConfig,\n  ThemeMode,\n  LocaleCode,\n  FileNode,\n  ShareInfo,\n  Capabilities,\n  UploadInitResponse,\n  UploadFinalizeResponse,\n  ArchiveEntry,\n  ViewMode,\n} from '@brftech/filex-core';\n\n/**\n * Helper-typed payloads the events carry — matches the SFC's emit\n * declarations so consumers get autocomplete on `event.detail`.\n */\nexport interface FilexErrorDetail {\n  message: string;\n  context?: unknown;\n}\n\nexport interface FilexShareCreatedDetail {\n  path: string;\n  url: string;\n  pin: string | null;\n}\n\nexport interface FilexFileOpenedDetail {\n  path: string;\n  basename: string;\n}\n\nexport interface FilexUploadProgressDetail {\n  uploadId: string;\n  percent: number;\n  done: boolean;\n}\n\nexport type FilexSelectionChangeDetail = Array<{\n  path: string;\n  basename: string;\n  type: 'file' | 'dir';\n}>;\n"],"names":["FALLBACK_PROPS","elementPropNames","registered","declared","_a","keys","propBridgeClass","Base","FilexExplorerProps","name","FilexElementClass","FileManager","createComponent","React"],"mappings":";;;AA6CA,MAAMA,IAAiB;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,SAASC,IAAsC;;AAC7C,QAAMC,IACJ,OAAO,iBAAmB,MACrB,eAAe,IAAI,gBAAgB,IAGpC,QACAC,KAAWC,IAAAF,KAAA,gBAAAA,EAAY,QAAZ,gBAAAE,EAAiB;AAClC,MAAI,MAAM,QAAQD,CAAQ,KAAKA,EAAS,OAAQ,QAAOA;AACvD,MAAIA,KAAY,OAAOA,KAAa,UAAU;AAC5C,UAAME,IAAO,OAAO,KAAKF,CAAmC;AAC5D,QAAIE,EAAK,OAAQ,QAAOA;AAAA,EAC1B;AACA,SAAOL;AACT;AAaA,SAASM,IAA4C;AACnD,QAAMC,IACJ,OAAO,cAAgB,MAAc,cAAc,MAAM;AAAA,EAAA;AAAA,EAE3D,MAAMC,UAA2BD,EAAK;AAAA,EAAA;AACtC,aAAWE,KAAQR;AACjB,IAAIQ,KAAQD,EAAmB,aAC/B,OAAO,eAAeA,EAAmB,WAAWC,GAAM;AAAA,MACxD,OAAO;AAAA,MACP,UAAU;AAAA,MACV,cAAc;AAAA,MACd,YAAY;AAAA,IAAA,CACb;AAEH,SAAOD;AACT;AAEA,MAAME,IAAoBJ,EAAA,GAYbK,IAAcC,EAAgB;AAAA,EACzC,OAAOC;AAAA,EACP,SAAS;AAAA,EACT,cAAcH;AAAA,EACd,aAAa;AAAA,EACb,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,cAAc;AAAA,IACd,kBAAkB;AAAA,IAClB,mBAAmB;AAAA,EAAA;AAEvB,CAAC;"}
+{"version":3,"file":"filex-react.js","sources":["../src/index.ts"],"sourcesContent":["/**\n * @brftech/filex-react — React adapter around the `<filex-explorer>`\n * Web Component.\n *\n * Uses `@lit/react`'s `createComponent` to map element attributes /\n * properties / events into idiomatic React props (camelCased event\n * handlers like `onError`, real prop assignment for the `config`\n * object, no need to imperatively reach for `.addEventListener`).\n *\n * Side-effect: importing this module also imports `@brftech/filex`\n * which registers the underlying custom element.\n */\n\nimport * as React from 'react';\nimport { createComponent } from '@lit/react';\nimport '@brftech/filex'; // side-effect: registers `<filex-explorer>`\nimport type { ExplorerConfig } from '@brftech/filex';\n\n/**\n * Property names `<filex-explorer>` accepts, taken from the component\n * definition the element was built from.\n *\n * ⚠⚠ This list is the entire bridge, and handing `createComponent` the\n * registered class instead of it is why this package did not work at all.\n * `createComponent` decides prop-by-prop with `k in elementClass.prototype`:\n * a name it finds there is ASSIGNED to the element (`node[k] = value`),\n * everything else is handed to `React.createElement` and lands as an\n * attribute. Vue's `defineCustomElement` defines its props on each\n * INSTANCE (`_resolveProps`, at connectedCallback), so the class prototype\n * carries nothing but `constructor` — measured 2026-09-13 in a real\n * browser: `Object.getOwnPropertyNames(cls.prototype)` is `['constructor']`.\n *\n * Every prop therefore took the attribute path, and `config` — an object —\n * was stringified by React on the way: the element ended up with\n * `config=\"[object Object]\"` and `el.config === '[object Object]'`. The\n * explorer never received a config, never mounted, and `<FileManager>`\n * rendered an empty page.\n *\n * The names come from `elementClass.def.props`, i.e. from the wrapper\n * component itself, so adding a prop to `@brftech/filex` cannot leave this\n * package one behind. FALLBACK_PROPS is only for an environment with no\n * custom-element registry (SSR) or a future Vue that stops exposing `def`;\n * `packages/react` is pinned to the wrapper's own list by\n * `web/tests/deploy/packageLook.test.ts`.\n */\nconst FALLBACK_PROPS = [\n  'config',\n  'apiBase',\n  'endpoint',\n  'locale',\n  'theme',\n  'timeZone',\n  'trashVisible',\n  'sidenav',\n  'connections',\n  'uiProfile',\n] as const;\n\nfunction elementPropNames(): readonly string[] {\n  const registered =\n    typeof customElements !== 'undefined'\n      ? (customElements.get('filex-explorer') as\n          | (CustomElementConstructor & { def?: { props?: unknown } })\n          | undefined)\n      : undefined;\n  const declared = registered?.def?.props;\n  if (Array.isArray(declared) && declared.length) return declared as string[];\n  if (declared && typeof declared === 'object') {\n    const keys = Object.keys(declared as Record<string, unknown>);\n    if (keys.length) return keys;\n  }\n  return FALLBACK_PROPS;\n}\n\n/**\n * A stand-in class whose PROTOTYPE carries those names, which is the only\n * thing `createComponent` reads it for (that, and `.name` for the devtools\n * label — we pass `displayName` instead).\n *\n * It extends HTMLElement where there is one so the native properties keep\n * behaving exactly as they did: `id`, `title`, `hidden` and friends stay on\n * the property path, `style`/`className`/`children`/`ref` stay React's.\n * Nothing ever constructs it — an unregistered `class extends HTMLElement`\n * is only illegal to `new`, not to declare.\n */\nfunction propBridgeClass(): CustomElementConstructor {\n  const Base = (\n    typeof HTMLElement !== 'undefined' ? HTMLElement : class {}\n  ) as CustomElementConstructor;\n  class FilexExplorerProps extends Base {}\n  for (const name of elementPropNames()) {\n    if (name in FilexExplorerProps.prototype) continue;\n    Object.defineProperty(FilexExplorerProps.prototype, name, {\n      value: undefined,\n      writable: true,\n      configurable: true,\n      enumerable: false,\n    });\n  }\n  return FilexExplorerProps;\n}\n\nconst FilexElementClass = propBridgeClass();\n\n/**\n * Idiomatic React component — used like a normal JSX tag with native\n * props.\n *\n *   <FileManager\n *     config={{ apiBase: 'https://files.example.com',\n *               auth: { kind: 'bearer', token } }}\n *     onError={(e) => console.error(e.detail)}\n *   />\n */\nexport const FileManager = createComponent({\n  react: React,\n  tagName: 'filex-explorer',\n  elementClass: FilexElementClass,\n  displayName: 'FileManager',\n  events: {\n    onError: 'error',\n    onShareCreated: 'share-created',\n    onFileOpened: 'file-opened',\n    onUploadProgress: 'upload-progress',\n    onSelectionChange: 'selection-change',\n    // #162 - the \"App store\" row (config.appStorePage).\n    onOpenAppStore: 'open-app-store',\n  },\n});\n\n/**\n * Re-export the config types so React consumers don't need a second\n * dependency on `@brftech/filex-core` just to type the `config` prop.\n */\nexport type {\n  ExplorerConfig,\n  AuthConfig,\n  ThemeMode,\n  LocaleCode,\n  FileNode,\n  ShareInfo,\n  Capabilities,\n  UploadInitResponse,\n  UploadFinalizeResponse,\n  ArchiveEntry,\n  ViewMode,\n} from '@brftech/filex-core';\n\n/**\n * Helper-typed payloads the events carry — matches the SFC's emit\n * declarations so consumers get autocomplete on `event.detail`.\n */\nexport interface FilexErrorDetail {\n  message: string;\n  context?: unknown;\n}\n\nexport interface FilexShareCreatedDetail {\n  path: string;\n  url: string;\n  pin: string | null;\n}\n\nexport interface FilexFileOpenedDetail {\n  path: string;\n  basename: string;\n}\n\nexport interface FilexUploadProgressDetail {\n  uploadId: string;\n  percent: number;\n  done: boolean;\n}\n\nexport type FilexSelectionChangeDetail = Array<{\n  path: string;\n  basename: string;\n  type: 'file' | 'dir';\n}>;\n"],"names":["FALLBACK_PROPS","elementPropNames","registered","declared","_a","keys","propBridgeClass","Base","FilexExplorerProps","name","FilexElementClass","FileManager","createComponent","React"],"mappings":";;;AA6CA,MAAMA,IAAiB;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,SAASC,IAAsC;;AAC7C,QAAMC,IACJ,OAAO,iBAAmB,MACrB,eAAe,IAAI,gBAAgB,IAGpC,QACAC,KAAWC,IAAAF,KAAA,gBAAAA,EAAY,QAAZ,gBAAAE,EAAiB;AAClC,MAAI,MAAM,QAAQD,CAAQ,KAAKA,EAAS,OAAQ,QAAOA;AACvD,MAAIA,KAAY,OAAOA,KAAa,UAAU;AAC5C,UAAME,IAAO,OAAO,KAAKF,CAAmC;AAC5D,QAAIE,EAAK,OAAQ,QAAOA;AAAA,EAC1B;AACA,SAAOL;AACT;AAaA,SAASM,IAA4C;AACnD,QAAMC,IACJ,OAAO,cAAgB,MAAc,cAAc,MAAM;AAAA,EAAA;AAAA,EAE3D,MAAMC,UAA2BD,EAAK;AAAA,EAAA;AACtC,aAAWE,KAAQR;AACjB,IAAIQ,KAAQD,EAAmB,aAC/B,OAAO,eAAeA,EAAmB,WAAWC,GAAM;AAAA,MACxD,OAAO;AAAA,MACP,UAAU;AAAA,MACV,cAAc;AAAA,MACd,YAAY;AAAA,IAAA,CACb;AAEH,SAAOD;AACT;AAEA,MAAME,IAAoBJ,EAAA,GAYbK,IAAcC,EAAgB;AAAA,EACzC,OAAOC;AAAA,EACP,SAAS;AAAA,EACT,cAAcH;AAAA,EACd,aAAa;AAAA,EACb,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,cAAc;AAAA,IACd,kBAAkB;AAAA,IAClB,mBAAmB;AAAA;AAAA,IAEnB,gBAAgB;AAAA,EAAA;AAEpB,CAAC;"}

package/dist/index.d.ts

@@ -35,6 +35,7 @@ onShareCreated: string;
 onFileOpened: string;
 onUploadProgress: string;
 onSelectionChange: string;
+onOpenAppStore: string;
 }>;
 
 export { FileNode }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brftech/filex-react",
-  "version": "0.52.0",
+  "version": "0.53.0",
   "description": "filex React adapter - wraps <filex-explorer> for React idiom (props + camelCase event handlers)",
   "type": "module",
   "main": "./dist/filex-react.cjs",
@@ -19,8 +19,8 @@
   ],
   "dependencies": {
     "@lit/react": "^1.0.5",
-    "@brftech/filex": "0.52.0",
-    "@brftech/filex-core": "0.52.0"
+    "@brftech/filex": "0.53.0",
+    "@brftech/filex-core": "0.53.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -50,7 +50,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/brf-tech/filex.git",
+    "url": "git+https://github.com/BRF-Tech/filex.git",
     "directory": "packages/react"
   },
   "scripts": {