@jobber/components-native 0.101.11 → 0.102.1-prerelease-b56e55d.1

package/dist/docs/FormatFile/FormatFile.md

@@ -22,6 +22,31 @@ image, while expanded is used to display a file alongside its metadata.
 * For a thumbnail representation of a user, use [Avatar](/components/Avatar).
 
 
+## Developer notes
+
+`FormatFileThumbnail` distinguishes between a real video thumbnail and a video
+file that has no preview image available.
+
+When a video has a valid `thumbnailUrl` or decodable source, Atlantis renders
+the thumbnail and overlays the existing small `video` icon. When no preview is
+available, Atlantis renders a fallback placeholder and shows the `videoFile`
+icon by default instead of showing the OS broken-image glyph.
+
+`showFileTypeIndicator={false}` hides all file type iconography, including the
+large `videoFile` icon used by video placeholders.
+
+Use `surfaceColor` on `FormatFileThumbnail` when the tile needs to visually
+blend into surrounding chrome:
+
+```tsx
+<FormatFileThumbnail
+  file={file}
+  size={{ width: 96, height: 96 }}
+  surfaceColor="var(--color-surface)"
+/>
+```
+
+
 ## Props
 
 ### Mobile
@@ -38,7 +63,7 @@ image, while expanded is used to display a file alongside its metadata.
 | `onPreviewPress` | `(formattedFile: FormattedFile) => void` | No | — | Handler for the "Preview" Bottom Sheet Option press |
 | `onRemove` | `() => void` | No | — | A function to be called on "Remove" Bottom Sheet Option press |
 | `onTap` | `(file: T) => void` | No | — | A function which handles the onTap event. |
-| `showFileTypeIndicator` | `boolean` | No | `true` | Set false to hide the filetype icon |
+| `showFileTypeIndicator` | `boolean` | No | `true` | Set false to hide all file type iconography, including the video fallback placeholder icon. |
 | `styleInGrid` | `boolean` | No | `false` | Uses a grid layout when multi-file upload is supported |
 | `testID` | `string` | No | — | A reference to the element in the rendered output |
 
@@ -52,5 +77,6 @@ image, while expanded is used to display a file alongside its metadata.
 | `showOverlay` | `boolean` | Yes | — |  |
 | `styleInGrid` | `boolean` | Yes | — |  |
 | `accessibilityLabel` | `string` | No | — |  |
-| `onMediaLoadEnd` | `() => void` | No | — | * @internal A function to be called when the media has loaded. This is only used in FormatFileThumbnail. |
+| `onMediaLoadEnd` | `() => void` | No | — | @internal A function to be called when the media has loaded. This is only used in FormatFileThumbnail. |
 | `skipContainerStyles` | `boolean` | No | `false` | @internal When true, the component skips its container wrapper entirely (no border, background, or dimension styles).... |
+| `surfaceColor` | `string` | No | — | Optional override for the tile's surface colour, forwarded to the underlying `FileView` or `MediaView`. Only meaningf... |

package/dist/docs/Icon/Icon.md

@@ -236,6 +236,7 @@ export function IconSizesExample() {
 |      | `note`      |
 |      | `pdf`       |
 |      | `video`     |
+|      | `videoFile` |
 |      | `word`      |
 |      | `upload`    |
 |      | `image`     |

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.101.11",
+    "version": "0.102.1-prerelease-b56e55d.1+b56e55d2",
     "license": "MIT",
     "description": "React Native implementation of Atlantis",
     "repository": {
@@ -58,7 +58,7 @@
     "devDependencies": {
         "@babel/runtime": "^7.29.2",
         "@gorhom/bottom-sheet": "^5.2.8",
-        "@jobber/design": "0.100.1",
+        "@jobber/design": "0.101.0",
         "@jobber/hooks": "2.20.1",
         "@react-native-community/datetimepicker": "^8.4.5",
         "@react-native/babel-preset": "^0.82.1",
@@ -109,5 +109,5 @@
         "react-native-screens": ">=4.18.0",
         "react-native-svg": ">=12.0.0"
     },
-    "gitHead": "679440bfacaf217a5756ab1b505cfe7c8d28614e"
+    "gitHead": "b56e55d265ff4465d85cd3449a2e99a900e2e837"
 }

package/dist/src/FormatFile/FormatFile.js

@@ -18,9 +18,9 @@ import { AtlantisFormatFileContext } from "./context/FormatFileContext";
 import { createUseCreateThumbnail } from "./utils/createUseCreateThumbnail";
 import { parseFile } from "./utils/parseFile";
 import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
-export function FormatFileContent({ accessibilityLabel, file, showOverlay, styleInGrid, onUploadComplete, isMedia, skipContainerStyles = false, onMediaLoadEnd, }) {
+export function FormatFileContent({ accessibilityLabel, file, showOverlay, styleInGrid, onUploadComplete, isMedia, skipContainerStyles = false, onMediaLoadEnd, surfaceColor, }) {
     const styles = useStyles();
-    const content = isMedia ? (React.createElement(MediaView, { accessibilityLabel: accessibilityLabel, file: file, showOverlay: showOverlay, showError: file.error, styleInGrid: styleInGrid, onUploadComplete: onUploadComplete, onLoadEnd: onMediaLoadEnd })) : (React.createElement(FileView, { accessibilityLabel: accessibilityLabel, file: file, showOverlay: showOverlay, showError: file.error, styleInGrid: styleInGrid, onUploadComplete: onUploadComplete }));
+    const content = isMedia ? (React.createElement(MediaView, { accessibilityLabel: accessibilityLabel, file: file, showOverlay: showOverlay, showError: file.error, styleInGrid: styleInGrid, onUploadComplete: onUploadComplete, onLoadEnd: onMediaLoadEnd, surfaceColor: surfaceColor })) : (React.createElement(FileView, { accessibilityLabel: accessibilityLabel, file: file, showOverlay: showOverlay, showError: file.error, styleInGrid: styleInGrid, onUploadComplete: onUploadComplete, surfaceColor: surfaceColor }));
     if (skipContainerStyles) {
         return content;
     }

package/dist/src/FormatFile/FormatFileThumbnail.js

@@ -26,7 +26,7 @@ import { parseFile } from "./utils/parseFile";
  * where you need a single shared BottomSheet rather than one per item, and
  * where the consumer controls the item dimensions via the `size` prop.
  */
-export function FormatFileThumbnail({ file, accessibilityLabel, showFileTypeIndicator = true, createThumbnail: createThumbnailProp, size, testID, onMediaLoadEnd, }) {
+export function FormatFileThumbnail({ file, accessibilityLabel, showFileTypeIndicator = true, createThumbnail: createThumbnailProp, size, testID, onMediaLoadEnd, surfaceColor, }) {
     const formattedFile = useMemo(() => parseFile(file, showFileTypeIndicator), [file, showFileTypeIndicator]);
     const styles = useStyles();
     const [showOverlay, setShowOverlay] = useState(formattedFile.status !== StatusCode.Completed);
@@ -41,6 +41,7 @@ export function FormatFileThumbnail({ file, accessibilityLabel, showFileTypeIndi
                 // that belongs to the consumer, not the thumbnail itself.
                 { marginBottom: 0 },
                 size && { width: size.width, height: size.height },
+                surfaceColor ? { backgroundColor: surfaceColor } : undefined,
             ], testID: testID },
-            React.createElement(FormatFileContent, { accessibilityLabel: accessibilityLabel, file: formattedFile, onUploadComplete: () => setShowOverlay(false), isMedia: !!formattedFile.isMedia, styleInGrid: true, showOverlay: showOverlay, skipContainerStyles: true, onMediaLoadEnd: onMediaLoadEnd }))));
+            React.createElement(FormatFileContent, { accessibilityLabel: accessibilityLabel, file: formattedFile, onUploadComplete: () => setShowOverlay(false), isMedia: !!formattedFile.isMedia, styleInGrid: true, showOverlay: showOverlay, skipContainerStyles: true, onMediaLoadEnd: onMediaLoadEnd, surfaceColor: surfaceColor }))));
 }

package/dist/src/FormatFile/FormatFileThumbnail.test.js

@@ -190,3 +190,26 @@ describe("FormatFileThumbnail", () => {
 function renderThumbnail(file) {
     return render(React.createElement(FormatFileThumbnail, { file: file, accessibilityLabel: "Custom Label", createThumbnail: mockCreateThumbnail, size: { width: 100, height: 100 } }));
 }
+describe("FormatFileThumbnail surfaceColor", () => {
+    it("applies the provided surfaceColor to the outer container", () => {
+        const { getByTestId } = render(React.createElement(FormatFileThumbnail, { file: FILE_MOCK_FILE, accessibilityLabel: "Custom Label", createThumbnail: mockCreateThumbnail, size: { width: 100, height: 100 }, surfaceColor: "#F4ECD9", testID: "thumbnail-container" }));
+        const container = getByTestId("thumbnail-container");
+        const styles = Array.isArray(container.props.style)
+            ? container.props.style.filter(Boolean)
+            : [container.props.style];
+        const merged = Object.assign({}, ...styles);
+        expect(merged.backgroundColor).toBe("#F4ECD9");
+    });
+    it("preserves the themed background when surfaceColor is omitted", () => {
+        const { getByTestId } = render(React.createElement(FormatFileThumbnail, { file: FILE_MOCK_FILE, accessibilityLabel: "Custom Label", createThumbnail: mockCreateThumbnail, size: { width: 100, height: 100 }, testID: "thumbnail-container" }));
+        const container = getByTestId("thumbnail-container");
+        const styles = Array.isArray(container.props.style)
+            ? container.props.style.filter(Boolean)
+            : [container.props.style];
+        const merged = Object.assign({}, ...styles);
+        // The default themed background token resolves to the surface
+        // colour, not the consumer-supplied #F4ECD9.
+        expect(merged.backgroundColor).not.toBe("#F4ECD9");
+        expect(merged.backgroundColor).toBeTruthy();
+    });
+});

package/dist/src/FormatFile/components/FileView/FileView.js

@@ -4,11 +4,11 @@ import { useStyles } from "./FileView.style";
 import { Icon } from "../../../Icon";
 import { Text } from "../../../Text";
 import { StatusCode } from "../../types";
-import { computeA11yLabel } from "../../utils";
+import { computeA11yLabel, mapFileTypeToIconName, sanitizeFileName, truncateFileNameForLine, } from "../../utils";
 import { ProgressBar } from "../ProgressBar";
 import { ErrorIcon } from "../ErrorIcon";
 import { useAtlantisI18n } from "../../../hooks/useAtlantisI18n";
-export function FileView({ accessibilityLabel, styleInGrid, file, showOverlay, showError, onUploadComplete, }) {
+export function FileView({ accessibilityLabel, styleInGrid, file, showOverlay, showError, onUploadComplete, surfaceColor, }) {
     const { t } = useAtlantisI18n();
     const styles = useStyles();
     const a11yLabel = computeA11yLabel({
@@ -21,6 +21,7 @@ export function FileView({ accessibilityLabel, styleInGrid, file, showOverlay, s
     return (React.createElement(View, { style: [
             styles.fileBackground,
             styleInGrid ? styles.fileBackgroundGrid : styles.fileBackgroundFlat,
+            surfaceColor ? { backgroundColor: surfaceColor } : undefined,
         ], accessible: true, accessibilityLabel: a11yLabel },
         React.createElement(View, { style: [
                 styles.fileBackground,
@@ -33,7 +34,9 @@ export function FileView({ accessibilityLabel, styleInGrid, file, showOverlay, s
                 showError && styleInGrid ? styles.fileNameError : styles.fileName,
                 styleInGrid ? styles.fileNameGrid : styles.fileNameFlat,
             ] },
-            React.createElement(Text, { level: "textSupporting", variation: "subdued", maxLines: "single" }, file.name)),
+            React.createElement(Text, { level: "textSupporting", variation: "subdued", maxLines: "single" }, styleInGrid
+                ? truncateFileNameForLine(sanitizeFileName(file.name))
+                : sanitizeFileName(file.name))),
         !showError && showOverlay && (React.createElement(View, { style: [styles.fileBackground, styles.overlay, styles.fileOverlay], testID: "format-file-progress-bar-container" },
             React.createElement(ProgressBar, { status: file.status, progress: freezeProgressBar ? 0.9 : file.progress, onComplete: onUploadComplete }))),
         showError && (React.createElement(View, { style: [
@@ -44,23 +47,3 @@ export function FileView({ accessibilityLabel, styleInGrid, file, showOverlay, s
             React.createElement(View, { style: !styleInGrid ? styles.iconCenter : undefined },
                 React.createElement(ErrorIcon, null))))));
 }
-function mapFileTypeToIconName({ fileName, fileType, }) {
-    if (!fileName && !fileType) {
-        return "alert";
-    }
-    if ((fileType === null || fileType === void 0 ? void 0 : fileType.includes("pdf")) || (fileName === null || fileName === void 0 ? void 0 : fileName.match(/\.pdf$/i))) {
-        return "pdf";
-    }
-    else if ((fileType === null || fileType === void 0 ? void 0 : fileType.includes("ms-word")) || (fileName === null || fileName === void 0 ? void 0 : fileName.match(/\.docx?$/i))) {
-        return "word";
-    }
-    else if ((fileType === null || fileType === void 0 ? void 0 : fileType.includes("ms-excel")) || (fileName === null || fileName === void 0 ? void 0 : fileName.match(/\.xlsx?$/i))) {
-        return "excel";
-    }
-    else if ((fileType === null || fileType === void 0 ? void 0 : fileType.includes("video")) || (fileName === null || fileName === void 0 ? void 0 : fileName.match(/\.mp4$/i))) {
-        return "video";
-    }
-    else {
-        return "file";
-    }
-}

package/dist/src/FormatFile/components/FileView/FileView.style.js

@@ -36,12 +36,17 @@ export const useStyles = buildThemedStyles(tokens => {
             borderTopWidth: tokens["space-minuscule"],
             width: "100%",
             marginTop: tokens["space-base"],
+            overflow: "hidden",
         },
         fileName: {
             alignItems: "center",
             borderTopColor: tokens["color-border"],
             borderTopWidth: tokens["space-minuscule"],
             width: "100%",
+            // Belt-and-suspenders with `numberOfLines={1}`: on Android the latter
+            // does not always enforce single-line layout for URL-shaped strings,
+            // so clip any unexpected overflow at the rounded tile border.
+            overflow: "hidden",
         },
         fileNameGrid: {
             position: "absolute",

package/dist/src/FormatFile/components/MediaView/MediaView.js

@@ -9,17 +9,20 @@ import { ProgressBar } from "../ProgressBar";
 import { ErrorIcon } from "../ErrorIcon";
 import { useAtlantisFormatFileContext } from "../../context/FormatFileContext";
 import { useAtlantisI18n } from "../../../hooks/useAtlantisI18n";
-export function MediaView({ accessibilityLabel, showOverlay, showError, file, styleInGrid, onUploadComplete, onLoadEnd, }) {
+// eslint-disable-next-line max-statements
+export function MediaView({ accessibilityLabel, showOverlay, showError, file, styleInGrid, onUploadComplete, onLoadEnd, surfaceColor, }) {
     const { t } = useAtlantisI18n();
     const { useCreateThumbnail } = useAtlantisFormatFileContext();
     const { thumbnail, error } = useCreateThumbnail(file);
     const [isLoading, setIsLoading] = useState(false);
+    const [decodeFailed, setDecodeFailed] = useState(false);
     /**
      * Tracks whether onLoadEnd has fired to prevent race conditions.
      * ImageBackground can fire onLoadEnd before onLoadStart when loading cached images,
      * which would cause isLoading to get stuck at true, showing an infinite spinner.
      */
     const hasLoadedRef = useRef(false);
+    const hasNotifiedLoadEndRef = useRef(false);
     const a11yLabel = computeA11yLabel({
         accessibilityLabel,
         showOverlay,
@@ -36,17 +39,29 @@ export function MediaView({ accessibilityLabel, showOverlay, showError, file, st
         hasLoadedRef.current = true;
         setIsLoading(false);
     };
+    const handleMediaLoadEnd = () => {
+        handleLoadEnd();
+        if (!hasNotifiedLoadEndRef.current) {
+            hasNotifiedLoadEndRef.current = true;
+            onLoadEnd === null || onLoadEnd === void 0 ? void 0 : onLoadEnd();
+        }
+    };
     useEffect(() => {
         hasLoadedRef.current = false;
+        hasNotifiedLoadEndRef.current = false;
         setIsLoading(false);
+        setDecodeFailed(false);
     }, [uri]);
-    return (React.createElement(View, { accessible: true, accessibilityLabel: a11yLabel },
+    if (isVideo(file.type) && (!uri || decodeFailed)) {
+        return (React.createElement(VideoPlaceholder, { a11yLabel: a11yLabel, styleInGrid: styleInGrid, surfaceColor: surfaceColor, styles: styles, isLoading: isLoading, showOverlay: showOverlay, hasError: hasError, file: file, onUploadComplete: onUploadComplete }));
+    }
+    return (React.createElement(View, { accessible: true, accessibilityLabel: a11yLabel, style: surfaceColor ? { backgroundColor: surfaceColor } : undefined },
         React.createElement(ImageBackground, { style: [
                 styles.imageBackground,
                 styleInGrid ? styles.imageBackgroundGrid : styles.imageBackgroundFlat,
-            ], resizeMode: styleInGrid ? "cover" : "contain", source: { uri }, testID: "test-image", onLoadStart: handleLoadStart, onLoadEnd: () => {
-                handleLoadEnd();
-                onLoadEnd === null || onLoadEnd === void 0 ? void 0 : onLoadEnd();
+            ], resizeMode: styleInGrid ? "cover" : "contain", source: { uri }, testID: "test-image", onLoadStart: handleLoadStart, onLoadEnd: handleMediaLoadEnd, onError: () => {
+                handleMediaLoadEnd();
+                setDecodeFailed(true);
             } },
             React.createElement(Overlay, { isLoading: isLoading, showOverlay: showOverlay, hasError: hasError, file: file, onUploadComplete: onUploadComplete, styles: styles }))));
 }
@@ -61,7 +76,7 @@ function Overlay({ isLoading, showOverlay, hasError, file, onUploadComplete, sty
     if (isVideo(file.type) && file.showFileTypeIndicator) {
         return React.createElement(Icon, { name: "video", color: "white" });
     }
-    return React.createElement(React.Fragment, null);
+    return null;
 }
 function ProgressOverlay({ status, progress, onUploadComplete, styles, }) {
     const freezeProgressBar = status !== StatusCode.Completed && progress >= 0.9;
@@ -75,3 +90,22 @@ function ErrorOverlay({ styles, }) {
 function isVideo(fileType = "") {
     return fileType.includes("video");
 }
+function VideoPlaceholder({ a11yLabel, styleInGrid, surfaceColor, styles, isLoading, showOverlay, hasError, file, onUploadComplete, }) {
+    return (React.createElement(View, { accessible: true, accessibilityLabel: a11yLabel, style: [
+            styles.imageBackground,
+            styleInGrid ? styles.imageBackgroundGrid : styles.imageBackgroundFlat,
+            surfaceColor ? { backgroundColor: surfaceColor } : undefined,
+        ], testID: "format-file-video-placeholder" },
+        file.showFileTypeIndicator && React.createElement(Icon, { name: "videoFile", size: "large" }),
+        React.createElement(PlaceholderStatusOverlay, { isLoading: isLoading, showOverlay: showOverlay, hasError: hasError, file: file, onUploadComplete: onUploadComplete, styles: styles })));
+}
+function PlaceholderStatusOverlay({ isLoading, showOverlay, hasError, file, onUploadComplete, styles, }) {
+    if (isLoading)
+        return React.createElement(ActivityIndicator, null);
+    if (hasError)
+        return React.createElement(ErrorOverlay, { styles: styles });
+    if (showOverlay) {
+        return (React.createElement(ProgressOverlay, { status: file.status, progress: file.progress, onUploadComplete: onUploadComplete, styles: styles }));
+    }
+    return null;
+}

package/dist/src/FormatFile/components/MediaView/MediaView.test.js

@@ -199,4 +199,73 @@ describe("MediaView", () => {
             });
         }));
     });
+    describe("Video placeholder", () => {
+        const videoFile = Object.assign(Object.assign({}, mockFile), { type: "video/mp4", source: undefined, thumbnailUrl: undefined, name: "clip.mp4" });
+        it("renders the videoFile placeholder when a video has no URI", () => {
+            const { getByTestId, queryByTestId } = renderWithContext(Object.assign(Object.assign({}, defaultProps), { file: videoFile }));
+            expect(getByTestId("format-file-video-placeholder")).toBeTruthy();
+            expect(queryByTestId("test-image")).toBeNull();
+        });
+        it("falls back to the placeholder when the ImageBackground errors", () => {
+            const fileWithSource = Object.assign(Object.assign({}, videoFile), { source: "https://example.com/broken-video.mp4" });
+            const { getByTestId, queryByTestId } = renderWithContext(Object.assign(Object.assign({}, defaultProps), { file: fileWithSource }));
+            const image = getByTestId("test-image");
+            expect(queryByTestId("format-file-video-placeholder")).toBeNull();
+            fireEvent(image, "error");
+            expect(getByTestId("format-file-video-placeholder")).toBeTruthy();
+        });
+        it("clears the loading spinner and fires onLoadEnd when the decoder errors", () => {
+            const onLoadEnd = jest.fn();
+            const fileWithSource = Object.assign(Object.assign({}, videoFile), { source: "https://example.com/broken-video.mp4" });
+            const { getByTestId, queryByTestId } = renderWithContext(Object.assign(Object.assign({}, defaultProps), { file: fileWithSource, onLoadEnd }));
+            const image = getByTestId("test-image");
+            fireEvent(image, "loadStart");
+            expect(queryByTestId("ActivityIndicator")).toBeTruthy();
+            fireEvent(image, "error");
+            expect(onLoadEnd).toHaveBeenCalledTimes(1);
+            expect(queryByTestId("ActivityIndicator")).toBeNull();
+            expect(getByTestId("format-file-video-placeholder")).toBeTruthy();
+        });
+        it("only fires onLoadEnd once when an error is followed by loadEnd", () => {
+            const onLoadEnd = jest.fn();
+            const fileWithSource = Object.assign(Object.assign({}, videoFile), { source: "https://example.com/broken-video.mp4" });
+            const { getByTestId } = renderWithContext(Object.assign(Object.assign({}, defaultProps), { file: fileWithSource, onLoadEnd }));
+            const image = getByTestId("test-image");
+            fireEvent(image, "error");
+            fireEvent(image, "loadEnd");
+            expect(onLoadEnd).toHaveBeenCalledTimes(1);
+        });
+        it("does not render the placeholder for non-video files with no URI", () => {
+            const imageFileWithoutUri = Object.assign(Object.assign({}, mockFile), { source: undefined, thumbnailUrl: undefined });
+            const { queryByTestId } = renderWithContext(Object.assign(Object.assign({}, defaultProps), { file: imageFileWithoutUri }));
+            expect(queryByTestId("format-file-video-placeholder")).toBeNull();
+            expect(queryByTestId("test-image")).toBeTruthy();
+        });
+        it("renders the progress overlay on top of the placeholder during upload", () => {
+            const uploadingVideo = Object.assign(Object.assign({}, videoFile), { status: StatusCode.InProgress, progress: 0.4 });
+            const { getByTestId } = renderWithContext(Object.assign(Object.assign({}, defaultProps), { file: uploadingVideo, showOverlay: true }));
+            expect(getByTestId("format-file-video-placeholder")).toBeTruthy();
+            expect(getByTestId("format-file-progress-bar-container")).toBeTruthy();
+        });
+        it("renders the error overlay on top of the placeholder when the upload fails", () => {
+            const failedVideo = Object.assign(Object.assign({}, videoFile), { status: StatusCode.Failed, error: true });
+            const { getByTestId } = renderWithContext(Object.assign(Object.assign({}, defaultProps), { file: failedVideo, showError: true }));
+            expect(getByTestId("format-file-video-placeholder")).toBeTruthy();
+            expect(getByTestId("format-file-error-container")).toBeTruthy();
+        });
+        it("hides the videoFile placeholder icon when showFileTypeIndicator is false", () => {
+            const { getByTestId, queryByTestId } = renderWithContext(Object.assign(Object.assign({}, defaultProps), { file: Object.assign(Object.assign({}, videoFile), { showFileTypeIndicator: false }) }));
+            expect(getByTestId("format-file-video-placeholder")).toBeTruthy();
+            expect(queryByTestId("videoFile")).toBeNull();
+        });
+        it("paints the placeholder with surfaceColor when provided", () => {
+            const { getByTestId } = renderWithContext(Object.assign(Object.assign({}, defaultProps), { file: videoFile, surfaceColor: "#F4ECD9" }));
+            const placeholder = getByTestId("format-file-video-placeholder");
+            const styleArray = Array.isArray(placeholder.props.style)
+                ? placeholder.props.style.filter(Boolean)
+                : [placeholder.props.style];
+            const merged = Object.assign({}, ...styleArray);
+            expect(merged.backgroundColor).toBe("#F4ECD9");
+        });
+    });
 });

package/dist/src/FormatFile/constants.js

@@ -9,6 +9,66 @@ export const acceptedExtensions = [
 export const videoExtensions = [
     { type: "mov" },
     { type: "mp4" },
+    { type: "m4v" },
+    { type: "webm" },
+    { type: "mkv" },
+    { type: "avi" },
+    { type: "wmv" },
+    { type: "flv" },
+    { type: "mpg" },
+    { type: "mpeg" },
+    { type: "3gp" },
     { type: "3gpp" },
     { type: "hevc" },
 ];
+/**
+ * Extensions that should be treated as documents (Word-family + OpenDocument
+ * Text + RTF + Apple Pages + WordPerfect). Used to route to the document
+ * icon and the "document" file category.
+ */
+export const documentExtensions = [
+    { type: "doc" },
+    { type: "docx" },
+    { type: "odt" },
+    { type: "fodt" },
+    { type: "rtf" },
+    { type: "pages" },
+    { type: "wpd" },
+];
+/**
+ * Extensions that should be treated as spreadsheets (Excel-family +
+ * OpenDocument Spreadsheet + Apple Numbers + CSV). Used to route to the
+ * spreadsheet icon and the "spreadsheet" file category.
+ */
+export const spreadsheetExtensions = [
+    { type: "xls" },
+    { type: "xlsx" },
+    { type: "ods" },
+    { type: "fods" },
+    { type: "numbers" },
+    { type: "csv" },
+];
+/**
+ * Substring patterns matched against the `Content-Type` MIME string for
+ * documents. Substring rather than exact match because real-world MIMEs
+ * vary widely (e.g. `application/msword`,
+ * `application/vnd.openxmlformats-officedocument.wordprocessingml.document`,
+ * `application/vnd.oasis.opendocument.text`).
+ */
+export const documentMimePatterns = [
+    "msword",
+    "ms-word",
+    "wordprocessingml",
+    "opendocument.text",
+    "rtf",
+];
+/**
+ * Substring patterns matched against the `Content-Type` MIME string for
+ * spreadsheets.
+ */
+export const spreadsheetMimePatterns = [
+    "ms-excel",
+    "spreadsheetml",
+    "opendocument.spreadsheet",
+    "csv",
+];

package/dist/src/FormatFile/index.js

@@ -1,2 +1,3 @@
 export { FormatFile } from "./FormatFile";
 export { FormatFileThumbnail } from "./FormatFileThumbnail";
+export { getFileCategory, mapFileTypeToIconName, sanitizeFileName, truncateFileNameForLine, } from "./utils";

package/dist/src/FormatFile/utils/getFileCategory.js

@@ -0,0 +1,62 @@
+import { documentExtensions, documentMimePatterns, spreadsheetExtensions, spreadsheetMimePatterns, videoExtensions, } from "../constants";
+function extensionOf(fileName) {
+    const dot = fileName.lastIndexOf(".");
+    return dot < 0 ? "" : fileName.slice(dot + 1).toLowerCase();
+}
+function matchesAnyExtension(fileName, list) {
+    if (!fileName)
+        return false;
+    const ext = extensionOf(fileName);
+    if (!ext)
+        return false;
+    return list.some(({ type }) => type === ext);
+}
+function matchesAnyMimePattern(fileType, patterns) {
+    if (!fileType)
+        return false;
+    const lower = fileType.toLowerCase();
+    return patterns.some(pattern => lower.includes(pattern));
+}
+/**
+ * Bucket a file into one of the generic categories the design system
+ * recognises. Decoupled from icon names so that:
+ *
+ *   1. Consumers can use generic terminology in copy, accessibility
+ *      labels, and filter UI ("Document", "Spreadsheet") without
+ *      coupling to the brand-named icon assets (`word`, `excel`).
+ *   2. When `@jobber/design` adds generic-document / generic-spreadsheet
+ *      icons, the icon mapping can be updated without breaking
+ *      consumers who already use this categorisation.
+ *
+ * Detection precedence: `fileType` (MIME) first, then `fileName`
+ * extension. The extension lists cover OpenDocument Text / Spreadsheet,
+ * RTF, Apple Pages / Numbers, CSV, and WordPerfect alongside the
+ * Microsoft Office formats so callers do not have to enumerate them.
+ *
+ * `fileType` matching is case-insensitive and accepts both full MIME
+ * strings (`"video/mp4"`, `"image/jpeg"`) and coarse type strings
+ * (`"video"`, `"image"`) since `parseFile` collapses video MIMEs to
+ * the bare token `"video"` for external files.
+ */
+export function getFileCategory({ fileName, fileType, }) {
+    const normalizedType = fileType === null || fileType === void 0 ? void 0 : fileType.toLowerCase();
+    if ((normalizedType === null || normalizedType === void 0 ? void 0 : normalizedType.includes("pdf")) || (fileName === null || fileName === void 0 ? void 0 : fileName.match(/\.pdf$/i))) {
+        return "pdf";
+    }
+    if (normalizedType === null || normalizedType === void 0 ? void 0 : normalizedType.includes("image")) {
+        return "image";
+    }
+    if ((normalizedType === null || normalizedType === void 0 ? void 0 : normalizedType.includes("video")) ||
+        matchesAnyExtension(fileName, videoExtensions)) {
+        return "video";
+    }
+    if (matchesAnyMimePattern(normalizedType, documentMimePatterns) ||
+        matchesAnyExtension(fileName, documentExtensions)) {
+        return "document";
+    }
+    if (matchesAnyMimePattern(normalizedType, spreadsheetMimePatterns) ||
+        matchesAnyExtension(fileName, spreadsheetExtensions)) {
+        return "spreadsheet";
+    }
+    return "other";
+}

package/dist/src/FormatFile/utils/getFileCategory.test.js

@@ -0,0 +1,83 @@
+import { getFileCategory } from "./getFileCategory";
+describe("getFileCategory", () => {
+    it("returns 'other' when neither name nor type is provided", () => {
+        expect(getFileCategory({})).toBe("other");
+    });
+    it.each([
+        ["application/pdf", undefined, "pdf"],
+        [undefined, "report.pdf", "pdf"],
+        [undefined, "REPORT.PDF", "pdf"],
+    ])("pdf: type=%s fileName=%s → %s", (fileType, fileName, expected) => {
+        expect(getFileCategory({ fileType, fileName })).toBe(expected);
+    });
+    it.each([
+        ["image/jpeg", undefined, "image"],
+        ["image/png", "photo.png", "image"],
+    ])("image: type=%s fileName=%s → %s", (fileType, fileName, expected) => {
+        expect(getFileCategory({ fileType, fileName })).toBe(expected);
+    });
+    it.each([
+        ["video/mp4", undefined, "video"],
+        ["video/quicktime", undefined, "video"],
+        [undefined, "clip.mp4", "video"],
+        [undefined, "clip.mov", "video"],
+        [undefined, "clip.webm", "video"],
+        [undefined, "clip.mkv", "video"],
+        [undefined, "clip.avi", "video"],
+    ])("video: type=%s fileName=%s → %s", (fileType, fileName, expected) => {
+        expect(getFileCategory({ fileType, fileName })).toBe(expected);
+    });
+    it.each([
+        ["application/msword", undefined, "document"],
+        [
+            "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+            undefined,
+            "document",
+        ],
+        ["application/vnd.oasis.opendocument.text", undefined, "document"],
+        ["application/rtf", undefined, "document"],
+        ["text/rtf", undefined, "document"],
+        [undefined, "report.doc", "document"],
+        [undefined, "report.docx", "document"],
+        [undefined, "report.odt", "document"],
+        [undefined, "report.fodt", "document"],
+        [undefined, "memo.rtf", "document"],
+        [undefined, "notes.pages", "document"],
+        [undefined, "legacy.wpd", "document"],
+    ])("document: type=%s fileName=%s → %s", (fileType, fileName, expected) => {
+        expect(getFileCategory({ fileType, fileName })).toBe(expected);
+    });
+    it.each([
+        ["application/vnd.ms-excel", undefined, "spreadsheet"],
+        [
+            "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+            undefined,
+            "spreadsheet",
+        ],
+        [
+            "application/vnd.oasis.opendocument.spreadsheet",
+            undefined,
+            "spreadsheet",
+        ],
+        ["text/csv", undefined, "spreadsheet"],
+        [undefined, "data.xls", "spreadsheet"],
+        [undefined, "data.xlsx", "spreadsheet"],
+        [undefined, "data.ods", "spreadsheet"],
+        [undefined, "data.fods", "spreadsheet"],
+        [undefined, "data.numbers", "spreadsheet"],
+        [undefined, "data.csv", "spreadsheet"],
+    ])("spreadsheet: type=%s fileName=%s → %s", (fileType, fileName, expected) => {
+        expect(getFileCategory({ fileType, fileName })).toBe(expected);
+    });
+    it.each([
+        ["application/octet-stream", "unknown.bin", "other"],
+        [undefined, "no-extension", "other"],
+        [undefined, "presentation.pptx", "other"],
+        [undefined, "presentation.odp", "other"],
+    ])("other: type=%s fileName=%s → %s", (fileType, fileName, expected) => {
+        expect(getFileCategory({ fileType, fileName })).toBe(expected);
+    });
+    it("prefers MIME over extension when both are present and disagree", () => {
+        expect(getFileCategory({ fileType: "application/pdf", fileName: "weird.docx" })).toBe("pdf");
+    });
+});

package/dist/src/FormatFile/utils/index.js

@@ -1,2 +1,6 @@
 export { computeA11yLabel } from "./computeA11yLabel";
 export { parseFile, isMediaFile } from "./parseFile";
+export { mapFileTypeToIconName } from "./mapFileTypeToIconName";
+export { getFileCategory } from "./getFileCategory";
+export { sanitizeFileName } from "./sanitizeFileName";
+export { truncateFileNameForLine } from "./truncateFileNameForLine";

package/dist/src/FormatFile/utils/mapFileTypeToIconName.js

@@ -0,0 +1,31 @@
+import { getFileCategory } from "./getFileCategory";
+/**
+ * Pick the file-type icon name for a given file. Today the design system
+ * exposes brand-named icons (`word`, `excel`) which double-duty as the
+ * generic "document" / "spreadsheet" indicators; when generic icons land
+ * in `@jobber/design`, the mapping below is the one place that needs to
+ * change.
+ *
+ * The actual file-type detection lives in `getFileCategory` so consumers
+ * that need a generic category name (e.g. for accessibility labels or
+ * filter UI) do not have to thread brand vocabulary through their copy.
+ */
+export function mapFileTypeToIconName({ fileName, fileType, }) {
+    if (!fileName && !fileType) {
+        return "alert";
+    }
+    switch (getFileCategory({ fileName, fileType })) {
+        case "pdf":
+            return "pdf";
+        case "document":
+            return "word";
+        case "spreadsheet":
+            return "excel";
+        case "video":
+            return "videoFile";
+        case "image":
+        case "other":
+        default:
+            return "file";
+    }
+}