@jobber/components 7.10.0 → 7.10.1-JOB-163813-14f3dc5.2

package/dist/Card/index.cjs

@@ -21,10 +21,12 @@ require('../floating-ui.react-dom-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../maxHeight-cjs.js');
 require('../useRenderElement-cjs.js');
-require('../BottomSheet-cjs.js');
-require('../DrawerRoot-cjs.js');
 require('../OverlaySeparator-cjs.js');
 require('../Separator-cjs.js');
+require('../BottomSheet-cjs.js');
+require('../DrawerRoot-cjs.js');
+require('../HelperText-cjs.js');
+require('../Text-cjs.js');
 require('../MenuSubmenuTrigger-cjs.js');
 
 

package/dist/Card/index.mjs

@@ -19,8 +19,10 @@ import '../floating-ui.react-dom-es.js';
 import '../useFormFieldFocus-es.js';
 import '../maxHeight-es.js';
 import '../useRenderElement-es.js';
-import '../BottomSheet-es.js';
-import '../DrawerRoot-es.js';
 import '../OverlaySeparator-es.js';
 import '../Separator-es.js';
+import '../BottomSheet-es.js';
+import '../DrawerRoot-es.js';
+import '../HelperText-es.js';
+import '../Text-es.js';
 import '../MenuSubmenuTrigger-es.js';

package/dist/DataDump/index.cjs

@@ -22,10 +22,12 @@ require('../floating-ui.react-dom-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../maxHeight-cjs.js');
 require('../useRenderElement-cjs.js');
-require('../BottomSheet-cjs.js');
-require('../DrawerRoot-cjs.js');
 require('../OverlaySeparator-cjs.js');
 require('../Separator-cjs.js');
+require('../BottomSheet-cjs.js');
+require('../DrawerRoot-cjs.js');
+require('../HelperText-cjs.js');
+require('../Text-cjs.js');
 require('../MenuSubmenuTrigger-cjs.js');
 require('../Content-cjs.js');
 require('../Emphasis-cjs.js');

package/dist/DataDump/index.mjs

@@ -20,10 +20,12 @@ import '../floating-ui.react-dom-es.js';
 import '../useFormFieldFocus-es.js';
 import '../maxHeight-es.js';
 import '../useRenderElement-es.js';
-import '../BottomSheet-es.js';
-import '../DrawerRoot-es.js';
 import '../OverlaySeparator-es.js';
 import '../Separator-es.js';
+import '../BottomSheet-es.js';
+import '../DrawerRoot-es.js';
+import '../HelperText-es.js';
+import '../Text-es.js';
 import '../MenuSubmenuTrigger-es.js';
 import '../Content-es.js';
 import '../Emphasis-es.js';

package/dist/Gallery/GalleryTypes.d.ts

@@ -23,13 +23,14 @@ export interface GalleryProps {
      */
     onDelete?(file: GalleryFile): void;
 }
-export interface GalleryFile extends Pick<FileUpload, "key" | "name" | "type" | "size" | "progress"> {
+export interface GalleryFile extends Pick<FileUpload, "key" | "name" | "type" | "size" | "progress" | "getObjectUrl"> {
     /**
      * The thumbnail url of the file.
      */
     readonly thumbnailSrc?: string;
     /**
-     * The data url of the file.
+     * The data url of the file.  For in-memory files,
+     * prefer using `getObjectUrl`.
      */
     readonly src: string | (() => Promise<string>);
 }

package/dist/Gallery-cjs.js

@@ -38,12 +38,21 @@ function Gallery({ files, size = "base", max, onDelete }) {
         React.createElement(LightBox.LightBox, { open: lightboxOpen, images: images, imageIndex: lightboxIndex, onRequestClose: handleLightboxClose })));
     function handleThumbnailClicked(index) {
         return tslib_es6.__awaiter(this, void 0, void 0, function* () {
-            if (Thumbnail.isPreviewableImage(files[index].type)) {
+            const file = files[index];
+            if (Thumbnail.isPreviewableImage(file.type)) {
                 handleLightboxOpen(index);
+                return;
             }
-            else {
-                window.open(yield getFileSrc(files[index]), "_blank");
+            if (file.getObjectUrl) {
+                // Schedule revoke for the next frame so the new tab has time to begin
+                // loading the resource before the URL is invalidated.
+                const { url, revoke } = file.getObjectUrl();
+                window.open(url, "_blank");
+                requestAnimationFrame(revoke);
+                return;
             }
+            // Fallback for GalleryFile objects without getObjectUrl.
+            window.open(yield getFileSrc(file), "_blank");
         });
     }
     function handleLightboxOpen(index) {

package/dist/Gallery-es.js

@@ -36,12 +36,21 @@ function Gallery({ files, size = "base", max, onDelete }) {
         React__default.createElement(LightBox, { open: lightboxOpen, images: images, imageIndex: lightboxIndex, onRequestClose: handleLightboxClose })));
     function handleThumbnailClicked(index) {
         return __awaiter(this, void 0, void 0, function* () {
-            if (isPreviewableImage(files[index].type)) {
+            const file = files[index];
+            if (isPreviewableImage(file.type)) {
                 handleLightboxOpen(index);
+                return;
             }
-            else {
-                window.open(yield getFileSrc(files[index]), "_blank");
+            if (file.getObjectUrl) {
+                // Schedule revoke for the next frame so the new tab has time to begin
+                // loading the resource before the URL is invalidated.
+                const { url, revoke } = file.getObjectUrl();
+                window.open(url, "_blank");
+                requestAnimationFrame(revoke);
+                return;
             }
+            // Fallback for GalleryFile objects without getObjectUrl.
+            window.open(yield getFileSrc(file), "_blank");
         });
     }
     function handleLightboxOpen(index) {

package/dist/InputFile/InputFile.d.ts

@@ -33,9 +33,18 @@ export interface FileUpload {
      */
     readonly uploadUrl?: string;
     /**
-     * The data url of the file.
+     * The data url of the file. For in-memory files, prefer using `getObjectUrl`.
      */
     src(): Promise<string>;
+    /**
+     * Returns a blob object URL for the file, paired with a `revoke` function to
+     * release it. Call `revoke` once you are done with the URL. Preferred over
+     * `src()`.
+     */
+    getObjectUrl?(): {
+        url: string;
+        revoke: () => void;
+    };
     /**
      * Callback for when the image file fails to load.
      *

package/dist/InputFile-cjs.js

@@ -1713,6 +1713,7 @@ function getFileUpload(file, key, uploadUrl) {
         size: file.size,
         progress: 0,
         src: getSrc,
+        getObjectUrl,
         uploadUrl,
     };
     function getSrc() {
@@ -1732,6 +1733,10 @@ function getFileUpload(file, key, uploadUrl) {
         });
         return promise;
     }
+    function getObjectUrl() {
+        const url = URL.createObjectURL(file);
+        return { url, revoke: () => URL.revokeObjectURL(url) };
+    }
 }
 /**
  * Upsert a given `FileUpload` into an array of `FileUpload`s.

package/dist/InputFile-es.js

@@ -1711,6 +1711,7 @@ function getFileUpload(file, key, uploadUrl) {
         size: file.size,
         progress: 0,
         src: getSrc,
+        getObjectUrl,
         uploadUrl,
     };
     function getSrc() {
@@ -1730,6 +1731,10 @@ function getFileUpload(file, key, uploadUrl) {
         });
         return promise;
     }
+    function getObjectUrl() {
+        const url = URL.createObjectURL(file);
+        return { url, revoke: () => URL.revokeObjectURL(url) };
+    }
 }
 /**
  * Upsert a given `FileUpload` into an array of `FileUpload`s.

package/dist/Menu/index.cjs

@@ -19,10 +19,12 @@ require('../Typography-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../maxHeight-cjs.js');
 require('../useRenderElement-cjs.js');
-require('../BottomSheet-cjs.js');
-require('../DrawerRoot-cjs.js');
 require('../OverlaySeparator-cjs.js');
 require('../Separator-cjs.js');
+require('../BottomSheet-cjs.js');
+require('../DrawerRoot-cjs.js');
+require('../HelperText-cjs.js');
+require('../Text-cjs.js');
 require('../MenuSubmenuTrigger-cjs.js');
 
 

package/dist/Menu/index.mjs

@@ -17,8 +17,10 @@ import '../Typography-es.js';
 import '../useFormFieldFocus-es.js';
 import '../maxHeight-es.js';
 import '../useRenderElement-es.js';
-import '../BottomSheet-es.js';
-import '../DrawerRoot-es.js';
 import '../OverlaySeparator-es.js';
 import '../Separator-es.js';
+import '../BottomSheet-es.js';
+import '../DrawerRoot-es.js';
+import '../HelperText-es.js';
+import '../Text-es.js';
 import '../MenuSubmenuTrigger-es.js';

package/dist/Menu-cjs.js

@@ -13,8 +13,9 @@ var maxHeight = require('./maxHeight-cjs.js');
 var floatingUi_reactDom = require('./floating-ui.react-dom-cjs.js');
 var tslib_es6 = require('./tslib.es6-cjs.js');
 var useRenderElement = require('./useRenderElement-cjs.js');
-var BottomSheet = require('./BottomSheet-cjs.js');
 var OverlaySeparator = require('./OverlaySeparator-cjs.js');
+var BottomSheet = require('./BottomSheet-cjs.js');
+require('./HelperText-cjs.js');
 var MenuSubmenuTrigger$1 = require('./MenuSubmenuTrigger-cjs.js');
 
 var styles$2 = {"wrapper":"h-nk89U2n6Q-","floatingContainer":"krpkWzoaVcc-","menu":"_7sU7mp1w0jM-","legacySection":"_4x-vvEmn4gM-","separator":"i0QNcs4S-wk-","triggerWrapper":"_7CsejipGrzM-","ariaMenu":"bO7lGVQC42c-","ariaItem":"u6fDgbWmPck-","ariaSection":"-TSNrZBKZJI-","ariaSectionHeader":"zs7dS2pKjEw-","sectionHeader":"MZJgunQcmdQ-","legacyAction":"_-1GOlrzd098-","action":"NYXV5w4pd0c-","destructive":"baYK2zQ6-GA-","overlay":"A7T14ALVEKg-","fullWidth":"Lgbn9IRPI5Y-","screenReaderOnly":"o-ps580KdWI-","spinning":"f1oTdSTeUOM-"};

package/dist/Menu-es.js

@@ -11,8 +11,9 @@ import { c as calculateMaxHeight } from './maxHeight-es.js';
 import { o as offset, f as flip, d as size, b as autoUpdate } from './floating-ui.react-dom-es.js';
 import { _ as __rest } from './tslib.es6-es.js';
 import { m as mergeProps } from './useRenderElement-es.js';
-import { B as BottomSheet } from './BottomSheet-es.js';
 import { O as OverlaySeparator } from './OverlaySeparator-es.js';
+import { B as BottomSheet } from './BottomSheet-es.js';
+import './HelperText-es.js';
 import { D as DrawerTrigger, a as DrawerTitle, b as DrawerClose, M as MenuTrigger$1, c as MenuLinkItem, d as MenuItem$1, e as MenuRadioItem$1, f as MenuRadioItemIndicator, g as MenuSubmenuTrigger$1, h as MenuRoot$1, i as MenuPortal$1, j as MenuPositioner, k as MenuPopup, l as MenuRadioGroup$1, m as MenuGroup$1, n as MenuSubmenuRoot, o as MenuGroupLabel$1 } from './MenuSubmenuTrigger-es.js';
 
 var styles$2 = {"wrapper":"h-nk89U2n6Q-","floatingContainer":"krpkWzoaVcc-","menu":"_7sU7mp1w0jM-","legacySection":"_4x-vvEmn4gM-","separator":"i0QNcs4S-wk-","triggerWrapper":"_7CsejipGrzM-","ariaMenu":"bO7lGVQC42c-","ariaItem":"u6fDgbWmPck-","ariaSection":"-TSNrZBKZJI-","ariaSectionHeader":"zs7dS2pKjEw-","sectionHeader":"MZJgunQcmdQ-","legacyAction":"_-1GOlrzd098-","action":"NYXV5w4pd0c-","destructive":"baYK2zQ6-GA-","overlay":"A7T14ALVEKg-","fullWidth":"Lgbn9IRPI5Y-","screenReaderOnly":"o-ps580KdWI-","spinning":"f1oTdSTeUOM-"};

package/dist/Page/index.cjs

@@ -26,10 +26,11 @@ require('../floating-ui.react-dom-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../maxHeight-cjs.js');
 require('../useRenderElement-cjs.js');
-require('../BottomSheet-cjs.js');
-require('../DrawerRoot-cjs.js');
 require('../OverlaySeparator-cjs.js');
 require('../Separator-cjs.js');
+require('../BottomSheet-cjs.js');
+require('../DrawerRoot-cjs.js');
+require('../HelperText-cjs.js');
 require('../MenuSubmenuTrigger-cjs.js');
 require('../filterDataAttributes-cjs.js');
 

package/dist/Page/index.mjs

@@ -24,9 +24,10 @@ import '../floating-ui.react-dom-es.js';
 import '../useFormFieldFocus-es.js';
 import '../maxHeight-es.js';
 import '../useRenderElement-es.js';
-import '../BottomSheet-es.js';
-import '../DrawerRoot-es.js';
 import '../OverlaySeparator-es.js';
 import '../Separator-es.js';
+import '../BottomSheet-es.js';
+import '../DrawerRoot-es.js';
+import '../HelperText-es.js';
 import '../MenuSubmenuTrigger-es.js';
 import '../filterDataAttributes-es.js';

package/dist/docs/Gallery/Gallery.md

@@ -24,6 +24,17 @@ beside each other before wrapping subsequent thumbnails to a new line.
 Each of the thumbnails the Gallery displays are tab navigatable. A hover state
 will also slightly dim a particular thumbnail when the cursor hovers over it.
 
+## Previewing non-image files
+
+When a user clicks an image thumbnail, Gallery opens it in an in-page LightBox.
+For non-image files (PDF, Word, etc.) Gallery instead opens the file in a new
+tab.
+
+For files produced by `<InputFile>`, Gallery uses the file's `getObjectUrl()`
+method to produce a navigation-safe object URL, opens the new tab, then revokes
+the URL on the next animation frame. Consumers passing `FileUpload` objects from
+`<InputFile>` directly to `<Gallery>` get this behavior automatically.
+
 ## Mockup
 
 

package/dist/docs/InputFile/InputFile.md

@@ -58,6 +58,54 @@ updating an array of `FileUpload`s based on their `key` as uploads progress.
 export function updateFiles(updatedFile: FileUpload, files: FileUpload[]);
 ```
 
+### Producing URLs for a `FileUpload`
+
+#### `getObjectUrl()` — preferred
+
+`getObjectUrl()` returns an object URL paired with a `revoke` function. The URL
+works anywhere a URL is consumed — `<img>`, `background-image`, fetch, download
+links — and is also valid for top-frame navigation (`window.open`,
+`<a target="_blank">`), where data URLs are blocked. This is the recommended
+method for new code.
+
+**Always call `revoke()` when you no longer need the URL**, regardless of how
+you used it. Object URLs pin the underlying file in memory until revoked. The
+browser auto-revokes on document unload as a safety net, so short-lived flows
+don't leak meaningfully — but explicit revocation keeps memory bounded in
+long-lived flows (e.g., chat-style attachment composers).
+
+Pick the revoke timing that matches the usage:
+
+```tsx
+// Navigation: schedule revoke after the new tab has time to begin loading
+const { url, revoke } = file.getObjectUrl();
+window.open(url, "_blank");
+requestAnimationFrame(revoke);
+```
+
+```tsx
+// Long-lived state: revoke when the consumer is done with the file
+useEffect(() => {
+  const { url, revoke } = file.getObjectUrl();
+  setPreviewUrl(url);
+  return revoke;
+}, [file]);
+```
+
+Atlantis `<Gallery>` uses `getObjectUrl()` internally on its non-image preview
+path — passing `FileUpload` objects directly to `<Gallery>` enables PDF and
+other non-image attachment previews without any consumer-side workaround.
+
+#### `src()` — existing usage
+
+`src()` resolves to a `data:` URL with the file's bytes embedded inline. It
+works for `<img>` rendering and other inline use, but is **blocked** by browsers
+from top-frame navigation (`window.open`, `<a target="_blank">`).
+
+Existing callers of `src()` continue to work. For new code, prefer
+`getObjectUrl()` — it covers the same use cases plus navigation, and we are
+moving away from the `src()` pattern over time.
+
 ### validator
 
 InputFile can accept a `validator` function as a prop. This will allow you to

package/dist/index.cjs

@@ -183,10 +183,11 @@ require('filesize');
 require('./GridCell-cjs.js');
 require('axios');
 require('./useRenderElement-cjs.js');
-require('./BottomSheet-cjs.js');
-require('./DrawerRoot-cjs.js');
 require('./OverlaySeparator-cjs.js');
 require('./Separator-cjs.js');
+require('./BottomSheet-cjs.js');
+require('./DrawerRoot-cjs.js');
+require('./HelperText-cjs.js');
 require('./MenuSubmenuTrigger-cjs.js');
 require('./AtlantisPortalContent-cjs.js');
 require('@jobber/formatters');

package/dist/index.mjs

@@ -181,10 +181,11 @@ import 'filesize';
 import './GridCell-es.js';
 import 'axios';
 import './useRenderElement-es.js';
-import './BottomSheet-es.js';
-import './DrawerRoot-es.js';
 import './OverlaySeparator-es.js';
 import './Separator-es.js';
+import './BottomSheet-es.js';
+import './DrawerRoot-es.js';
+import './HelperText-es.js';
 import './MenuSubmenuTrigger-es.js';
 import './AtlantisPortalContent-es.js';
 import '@jobber/formatters';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "7.10.0",
+  "version": "7.10.1-JOB-163813-14f3dc5.2+14f3dc56f",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -502,7 +502,7 @@
     "@base-ui/react": "1.3.0",
     "@floating-ui/react": "^0.27.5",
     "@floating-ui/utils": "0.2.11",
-    "@jobber/formatters": "^0.5.0",
+    "@jobber/formatters": "^0.5.1-JOB-163813-14f3dc5.414+14f3dc56f",
     "@react-types/overlays": "^3.9.4",
     "@tanstack/react-table": "8.5.13",
     "@types/color": "^3.0.1",
@@ -528,8 +528,8 @@
   "devDependencies": {
     "@apollo/client": "^3.7.10",
     "@csstools/postcss-global-data": "^1.0.3",
-    "@jobber/design": "0.99.0",
-    "@jobber/hooks": "2.19.4",
+    "@jobber/design": "0.99.1-JOB-163813-14f3dc5.18+14f3dc56f",
+    "@jobber/hooks": "2.19.5-JOB-163813-14f3dc5.41+14f3dc56f",
     "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "15.2.3",
@@ -583,5 +583,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "348d1293520051687a9b2d178cf4c5757136e9bf"
+  "gitHead": "14f3dc56f82f04ef2c9460089c4e26987286d94f"
 }