@jobber/components-native 0.101.11 → 0.102.0

package/dist/types/src/FormatFile/FormatFile.d.ts

@@ -39,7 +39,8 @@ export interface FormatFileProps<T> {
      */
     readonly testID?: string;
     /**
-     * Set false to hide the filetype icon
+     * Set false to hide all file type iconography, including the video fallback
+     * placeholder icon.
      */
     readonly showFileTypeIndicator?: boolean;
     readonly createThumbnail?: CreateThumbnail;
@@ -60,12 +61,19 @@ interface FormatFileContentProps {
      */
     readonly skipContainerStyles?: boolean;
     /**
-     *  * @internal
+     * @internal
      * A function to be called when the media has loaded.
      * This is only used in FormatFileThumbnail.
      */
     readonly onMediaLoadEnd?: () => void;
+    /**
+     * Optional override for the tile's surface colour, forwarded to the
+     * underlying `FileView` or `MediaView`. Only meaningful when
+     * `skipContainerStyles` is true and the consumer (e.g.
+     * `FormatFileThumbnail`) is wrapping this content directly.
+     */
+    readonly surfaceColor?: string;
 }
-export declare function FormatFileContent({ accessibilityLabel, file, showOverlay, styleInGrid, onUploadComplete, isMedia, skipContainerStyles, onMediaLoadEnd, }: FormatFileContentProps): React.JSX.Element;
+export declare function FormatFileContent({ accessibilityLabel, file, showOverlay, styleInGrid, onUploadComplete, isMedia, skipContainerStyles, onMediaLoadEnd, surfaceColor, }: FormatFileContentProps): React.JSX.Element;
 export declare function FormatFile<T extends File | FileUpload>({ file, accessibilityLabel, accessibilityHint, onTap, onRemove, bottomSheetOptionsSuffix, styleInGrid, testID, showFileTypeIndicator, createThumbnail, onPreviewPress, }: FormatFileProps<T>): React.JSX.Element;
 export {};

package/dist/types/src/FormatFile/FormatFileThumbnail.d.ts

@@ -11,7 +11,8 @@ export interface FormatFileThumbnailProps<T> {
      */
     readonly accessibilityLabel?: string;
     /**
-     * Set false to hide the filetype icon.
+     * Set false to hide all file type iconography, including the video fallback
+     * placeholder icon.
      */
     readonly showFileTypeIndicator?: boolean;
     /**
@@ -35,6 +36,13 @@ export interface FormatFileThumbnailProps<T> {
      * Not to be used for Files
      */
     readonly onMediaLoadEnd?: () => void;
+    /**
+     * Optional override for the tile's surface colour. Defaults to the
+     * themed `color-surface--background` token. Use this when embedding
+     * the thumbnail inside surrounding chrome (e.g. a media gallery) so
+     * the tile background matches the surrounding container.
+     */
+    readonly surfaceColor?: string;
 }
 /**
  * A lightweight, visual-only file thumbnail component.
@@ -47,4 +55,4 @@ export interface FormatFileThumbnailProps<T> {
  * 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 declare function FormatFileThumbnail<T extends File | FileUpload>({ file, accessibilityLabel, showFileTypeIndicator, createThumbnail: createThumbnailProp, size, testID, onMediaLoadEnd, }: FormatFileThumbnailProps<T>): React.JSX.Element;
+export declare function FormatFileThumbnail<T extends File | FileUpload>({ file, accessibilityLabel, showFileTypeIndicator, createThumbnail: createThumbnailProp, size, testID, onMediaLoadEnd, surfaceColor, }: FormatFileThumbnailProps<T>): React.JSX.Element;

package/dist/types/src/FormatFile/components/FileView/FileView.d.ts

@@ -7,6 +7,7 @@ interface FileViewProps {
     readonly file: FormattedFile;
     readonly styleInGrid: boolean;
     readonly onUploadComplete: () => void;
+    readonly surfaceColor?: string;
 }
-export declare function FileView({ accessibilityLabel, styleInGrid, file, showOverlay, showError, onUploadComplete, }: FileViewProps): React.JSX.Element;
+export declare function FileView({ accessibilityLabel, styleInGrid, file, showOverlay, showError, onUploadComplete, surfaceColor, }: FileViewProps): React.JSX.Element;
 export {};

package/dist/types/src/FormatFile/components/FileView/FileView.style.d.ts

@@ -34,12 +34,14 @@ export declare const useStyles: () => {
         borderTopWidth: number;
         width: "100%";
         marginTop: number;
+        overflow: "hidden";
     };
     fileName: {
         alignItems: "center";
         borderTopColor: string;
         borderTopWidth: number;
         width: "100%";
+        overflow: "hidden";
     };
     fileNameGrid: {
         position: "absolute";

package/dist/types/src/FormatFile/components/MediaView/MediaView.d.ts

@@ -8,6 +8,7 @@ interface MediaViewProps {
     readonly styleInGrid: boolean;
     readonly onUploadComplete: () => void;
     readonly onLoadEnd?: () => void;
+    readonly surfaceColor?: string;
 }
-export declare function MediaView({ accessibilityLabel, showOverlay, showError, file, styleInGrid, onUploadComplete, onLoadEnd, }: MediaViewProps): React.JSX.Element;
+export declare function MediaView({ accessibilityLabel, showOverlay, showError, file, styleInGrid, onUploadComplete, onLoadEnd, surfaceColor, }: MediaViewProps): React.JSX.Element;
 export {};

package/dist/types/src/FormatFile/constants.d.ts

@@ -4,3 +4,32 @@ export declare const acceptedExtensions: {
 export declare const videoExtensions: {
     type: string;
 }[];
+/**
+ * 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 declare const documentExtensions: {
+    type: string;
+}[];
+/**
+ * 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 declare const spreadsheetExtensions: {
+    type: string;
+}[];
+/**
+ * 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 declare const documentMimePatterns: string[];
+/**
+ * Substring patterns matched against the `Content-Type` MIME string for
+ * spreadsheets.
+ */
+export declare const spreadsheetMimePatterns: string[];

package/dist/types/src/FormatFile/index.d.ts

@@ -2,5 +2,7 @@ export type { FormatFileProps } from "./FormatFile";
 export { FormatFile } from "./FormatFile";
 export type { FormatFileThumbnailProps } from "./FormatFileThumbnail";
 export { FormatFileThumbnail } from "./FormatFileThumbnail";
+export { getFileCategory, mapFileTypeToIconName, sanitizeFileName, truncateFileNameForLine, } from "./utils";
+export type { FileCategory } from "./utils";
 export type { FormattedFile, File, CreateThumbnail, CreateThumbnailResponse, FileUpload, StatusCode, } from "./types";
 export type { UseCreateThumbnail, UseCreateThumbnailResponse, } from "./context/types";

package/dist/types/src/FormatFile/utils/getFileCategory.d.ts

@@ -0,0 +1,28 @@
+export type FileCategory = "document" | "spreadsheet" | "pdf" | "video" | "image" | "other";
+interface GetFileCategoryParams {
+    readonly fileName?: string;
+    readonly fileType?: string;
+}
+/**
+ * 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 declare function getFileCategory({ fileName, fileType, }: GetFileCategoryParams): FileCategory;
+export {};

package/dist/types/src/FormatFile/utils/getFileCategory.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/FormatFile/utils/index.d.ts

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

package/dist/types/src/FormatFile/utils/mapFileTypeToIconName.d.ts

@@ -0,0 +1,18 @@
+import type { IconNames } from "@jobber/design";
+interface FileTypeToIconNameParams {
+    readonly fileName?: string;
+    readonly fileType?: string;
+}
+/**
+ * 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 declare function mapFileTypeToIconName({ fileName, fileType, }: FileTypeToIconNameParams): IconNames;
+export {};

package/dist/types/src/FormatFile/utils/mapFileTypeToIconName.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/FormatFile/utils/sanitizeFileName.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Collapse CR / LF in a filename to a single space so embedded line breaks
+ * never reach the rendered `Text` and cause vertical layout drift.
+ */
+export declare function sanitizeFileName(name?: string): string;

package/dist/types/src/FormatFile/utils/sanitizeFileName.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/FormatFile/utils/truncateFileNameForLine.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Truncate a filename so it fits a single line in the small file-type tile.
+ *
+ * Why this exists: on Android, RN's `Text` with `numberOfLines={1}` does not
+ * always enforce single-line layout for URL-shaped strings with no
+ * whitespace (e.g. `vertopal.com/converter`). They wrap to a second line
+ * which then bleeds outside the rounded tile border. Pre-truncating in JS
+ * guarantees the rendered string is short enough that single-line wrapping
+ * is never required.
+ *
+ * The truncation preserves the trailing file extension when one is
+ * detectable so the file type stays visible at a glance (examples below
+ * use the default 15-character budget):
+ *   `vertopal.com/converter`        → `vertopal.com/c…`
+ *   `file-sample_2_dx.docx`         → `file-samp….docx`
+ *   `quarterly-budget.numbers`      → `quarte….numbers`
+ *   `report.pdf`                    → `report.pdf` (unchanged)
+ *   `embedded\nname.txt`            → caller should pass through
+ *                                     `sanitizeFileName` first
+ *
+ * `maxLength` is clamped to a sensible minimum of 2 so a caller passing
+ * `0` or a negative value cannot violate the single-line guarantee.
+ */
+export declare function truncateFileNameForLine(name?: string, maxLength?: number): string;

package/dist/types/src/FormatFile/utils/truncateFileNameForLine.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.101.11",
+  "version": "0.102.0",
   "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": "1e7705b3834eb2027601b03d1d47cb7368eafd7d"
 }

package/src/FormatFile/FormatFile.stories.tsx

@@ -1,6 +1,8 @@
 import type { ComponentProps } from "react";
+import React from "react";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { FormatFile } from "@jobber/components-native";
+import { FormatFile, FormatFileThumbnail } from "@jobber/components-native";
+import type { File, FormatFileThumbnailProps } from "@jobber/components-native";
 import { FormatFileBasic } from "./docs";
 
 const meta = {
@@ -13,6 +15,15 @@ const meta = {
 } satisfies Meta<typeof FormatFile>;
 export default meta;
 type Story = StoryObj<Partial<ComponentProps<typeof FormatFile>>>;
+type ThumbnailStory = StoryObj<Partial<FormatFileThumbnailProps<File>>>;
+
+const videoWithoutPreviewFile = {
+  fileName: "video.mp4",
+  contentType: "video/quicktime",
+  url: undefined,
+  thumbnailUrl: undefined,
+  fileSize: 1024,
+} satisfies File;
 
 export const Image: Story = {
   render: FormatFileBasic,
@@ -54,6 +65,13 @@ export const Video: Story = {
   },
 };
 
+export const VideoWithoutPreview: Story = {
+  render: FormatFileBasic,
+  args: {
+    file: videoWithoutPreviewFile,
+  },
+};
+
 export const PDF: Story = {
   render: FormatFileBasic,
   args: {
@@ -66,3 +84,25 @@ export const PDF: Story = {
     },
   },
 };
+
+export const ThumbnailSurfaceColor: ThumbnailStory = {
+  render: FormatFileThumbnailBasic,
+  args: {
+    file: videoWithoutPreviewFile,
+    size: { width: 96, height: 96 },
+    surfaceColor: "var(--color-surface)",
+    accessibilityLabel: "Video file without preview",
+  },
+};
+
+function FormatFileThumbnailBasic(
+  props: Partial<FormatFileThumbnailProps<File>>,
+) {
+  return (
+    <FormatFileThumbnail
+      file={videoWithoutPreviewFile}
+      size={{ width: 96, height: 96 }}
+      {...props}
+    />
+  );
+}

package/src/FormatFile/FormatFile.tsx

@@ -57,7 +57,8 @@ export interface FormatFileProps<T> {
   readonly testID?: string;
 
   /**
-   * Set false to hide the filetype icon
+   * Set false to hide all file type iconography, including the video fallback
+   * placeholder icon.
    */
   readonly showFileTypeIndicator?: boolean;
 
@@ -90,11 +91,19 @@ interface FormatFileContentProps {
   readonly skipContainerStyles?: boolean;
 
   /**
-   *  * @internal
+   * @internal
    * A function to be called when the media has loaded.
    * This is only used in FormatFileThumbnail.
    */
   readonly onMediaLoadEnd?: () => void;
+
+  /**
+   * Optional override for the tile's surface colour, forwarded to the
+   * underlying `FileView` or `MediaView`. Only meaningful when
+   * `skipContainerStyles` is true and the consumer (e.g.
+   * `FormatFileThumbnail`) is wrapping this content directly.
+   */
+  readonly surfaceColor?: string;
 }
 
 export function FormatFileContent({
@@ -106,6 +115,7 @@ export function FormatFileContent({
   isMedia,
   skipContainerStyles = false,
   onMediaLoadEnd,
+  surfaceColor,
 }: FormatFileContentProps) {
   const styles = useStyles();
 
@@ -118,6 +128,7 @@ export function FormatFileContent({
       styleInGrid={styleInGrid}
       onUploadComplete={onUploadComplete}
       onLoadEnd={onMediaLoadEnd}
+      surfaceColor={surfaceColor}
     />
   ) : (
     <FileView
@@ -127,6 +138,7 @@ export function FormatFileContent({
       showError={file.error}
       styleInGrid={styleInGrid}
       onUploadComplete={onUploadComplete}
+      surfaceColor={surfaceColor}
     />
   );
 

package/src/FormatFile/FormatFileThumbnail.test.tsx

@@ -290,3 +290,47 @@ function renderThumbnail(file: FileUpload | File) {
     />,
   );
 }
+
+describe("FormatFileThumbnail surfaceColor", () => {
+  it("applies the provided surfaceColor to the outer container", () => {
+    const { getByTestId } = render(
+      <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(
+      <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/src/FormatFile/FormatFileThumbnail.tsx

@@ -21,7 +21,8 @@ export interface FormatFileThumbnailProps<T> {
   readonly accessibilityLabel?: string;
 
   /**
-   * Set false to hide the filetype icon.
+   * Set false to hide all file type iconography, including the video fallback
+   * placeholder icon.
    */
   readonly showFileTypeIndicator?: boolean;
 
@@ -49,6 +50,14 @@ export interface FormatFileThumbnailProps<T> {
    * Not to be used for Files
    */
   readonly onMediaLoadEnd?: () => void;
+
+  /**
+   * Optional override for the tile's surface colour. Defaults to the
+   * themed `color-surface--background` token. Use this when embedding
+   * the thumbnail inside surrounding chrome (e.g. a media gallery) so
+   * the tile background matches the surrounding container.
+   */
+  readonly surfaceColor?: string;
 }
 
 /**
@@ -70,6 +79,7 @@ export function FormatFileThumbnail<T extends File | FileUpload>({
   size,
   testID,
   onMediaLoadEnd,
+  surfaceColor,
 }: FormatFileThumbnailProps<T>) {
   const formattedFile = useMemo(
     () => parseFile(file, showFileTypeIndicator),
@@ -95,6 +105,7 @@ export function FormatFileThumbnail<T extends File | FileUpload>({
           // that belongs to the consumer, not the thumbnail itself.
           { marginBottom: 0 },
           size && { width: size.width, height: size.height },
+          surfaceColor ? { backgroundColor: surfaceColor } : undefined,
         ]}
         testID={testID}
       >
@@ -107,6 +118,7 @@ export function FormatFileThumbnail<T extends File | FileUpload>({
           showOverlay={showOverlay}
           skipContainerStyles={true}
           onMediaLoadEnd={onMediaLoadEnd}
+          surfaceColor={surfaceColor}
         />
       </View>
     </AtlantisFormatFileContext.Provider>

package/src/FormatFile/components/FileView/FileView.style.ts

@@ -37,12 +37,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/src/FormatFile/components/FileView/FileView.tsx

@@ -1,12 +1,16 @@
 import React from "react";
 import { View } from "react-native";
-import type { IconNames } from "@jobber/design";
 import { useStyles } from "./FileView.style";
 import { Icon } from "../../../Icon";
 import { Text } from "../../../Text";
 import type { FormattedFile } from "../../types";
 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";
@@ -18,6 +22,7 @@ interface FileViewProps {
   readonly file: FormattedFile;
   readonly styleInGrid: boolean;
   readonly onUploadComplete: () => void;
+  readonly surfaceColor?: string;
 }
 
 export function FileView({
@@ -27,6 +32,7 @@ export function FileView({
   showOverlay,
   showError,
   onUploadComplete,
+  surfaceColor,
 }: FileViewProps) {
   const { t } = useAtlantisI18n();
   const styles = useStyles();
@@ -46,6 +52,7 @@ export function FileView({
       style={[
         styles.fileBackground,
         styleInGrid ? styles.fileBackgroundGrid : styles.fileBackgroundFlat,
+        surfaceColor ? { backgroundColor: surfaceColor } : undefined,
       ]}
       accessible={true}
       accessibilityLabel={a11yLabel}
@@ -74,7 +81,9 @@ export function FileView({
         ]}
       >
         <Text level="textSupporting" variation="subdued" maxLines="single">
-          {file.name}
+          {styleInGrid
+            ? truncateFileNameForLine(sanitizeFileName(file.name))
+            : sanitizeFileName(file.name)}
         </Text>
       </View>
       {!showError && showOverlay && (
@@ -106,29 +115,3 @@ export function FileView({
     </View>
   );
 }
-
-interface FileTypeToIconNameParams {
-  fileName?: string;
-  fileType?: string;
-}
-
-function mapFileTypeToIconName({
-  fileName,
-  fileType,
-}: FileTypeToIconNameParams): IconNames {
-  if (!fileName && !fileType) {
-    return "alert";
-  }
-
-  if (fileType?.includes("pdf") || fileName?.match(/\.pdf$/i)) {
-    return "pdf";
-  } else if (fileType?.includes("ms-word") || fileName?.match(/\.docx?$/i)) {
-    return "word";
-  } else if (fileType?.includes("ms-excel") || fileName?.match(/\.xlsx?$/i)) {
-    return "excel";
-  } else if (fileType?.includes("video") || fileName?.match(/\.mp4$/i)) {
-    return "video";
-  } else {
-    return "file";
-  }
-}