@jobber/components 6.56.1 → 6.58.0

package/dist/Thumbnail-es.js

@@ -0,0 +1,100 @@
+import React__default, { useState, useEffect } from 'react';
+import classnames from 'classnames';
+import { G as Glimmer } from './Glimmer-es.js';
+import { I as Icon } from './Icon-es.js';
+import { T as Typography } from './Typography-es.js';
+
+var styles$1 = {"content":"b9lhF-BkUnI-","hasName":"BJLJeUxloeQ-","large":"t5IzWH6-Sy0-","fileName":"tj--cPRjQfI-","base":"l2Vxo1qaR8U-","spinning":"LDAOyzklETo-"};
+
+var styles = {"image":"qOmZU-rbNf4-","fadeIn":"zB1aNhsmmqY-","hidden":"_2bihNsPs7w4-","spinning":"ZLMkLuZeH-o-"};
+
+function InternalThumbnailImage({ file, UNSAFE_className, UNSAFE_style, }) {
+    const { name, src } = file;
+    const [imageSource, setImageSource] = useState();
+    const [imageLoaded, setImageLoaded] = useState(false);
+    useEffect(() => {
+        src().then(url => setImageSource(url));
+    }, []);
+    return (React__default.createElement(React__default.Fragment, null,
+        !imageLoaded && React__default.createElement(Glimmer, { size: "auto" }),
+        React__default.createElement("img", { src: imageSource, onError: file.onImageLoadError, onLoad: handleImageLoad, alt: name, "data-testid": "internalThumbnailImage", className: classnames(styles.image, { [styles.hidden]: !imageLoaded }, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.container), style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.container })));
+    function handleImageLoad() {
+        setImageLoaded(true);
+    }
+}
+
+// This function comes from MDN: https://developer.mozilla.org/en-US/docs/Web/API/Window/navigator
+function getClientBrowser(userAgent) {
+    // The order matters here, and this may report false positives for unlisted browsers.
+    if (userAgent.includes("Firefox")) {
+        // "Mozilla/5.0 (X11; Linux i686; rv:104.0) Gecko/20100101 Firefox/104.0"
+        return "Mozilla Firefox";
+    }
+    else if (userAgent.includes("SamsungBrowser")) {
+        // "Mozilla/5.0 (Linux; Android 9; SAMSUNG SM-G955F Build/PPR1.180610.011) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/9.4 Chrome/67.0.3396.87 Mobile Safari/537.36"
+        return "Samsung Internet";
+    }
+    else if (userAgent.includes("Opera") || userAgent.includes("OPR")) {
+        // "Mozilla/5.0 (Macintosh; Intel Mac OS X 12_5_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36 OPR/90.0.4480.54"
+        return "Opera";
+    }
+    else if (userAgent.includes("Edge")) {
+        // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299"
+        return "Microsoft Edge (Legacy)";
+    }
+    else if (userAgent.includes("Edg")) {
+        // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36 Edg/104.0.1293.70"
+        return "Microsoft Edge (Chromium)";
+    }
+    else if (userAgent.includes("Chrome")) {
+        // "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36"
+        return "Google Chrome or Chromium";
+    }
+    else if (userAgent.includes("Safari")) {
+        // "Mozilla/5.0 (iPhone; CPU iPhone OS 15_6_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6 Mobile/15E148 Safari/604.1"
+        return "Apple Safari";
+    }
+    else {
+        return "unknown";
+    }
+}
+function isSafari(userAgent) {
+    return getClientBrowser(userAgent) === "Apple Safari";
+}
+
+function Thumbnail({ compact = false, size, file, UNSAFE_className, UNSAFE_style, }) {
+    const { name, type } = file;
+    const iconName = getIconNameFromType(type);
+    const hasName = Boolean(name) && compact;
+    if (type.startsWith("image/") && isSupportedImageType(file)) {
+        return (React__default.createElement(InternalThumbnailImage, { file: file, UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style }));
+    }
+    return (React__default.createElement("div", { className: classnames(styles$1.content, styles$1[size], {
+            [styles$1.hasName]: hasName,
+        }, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.container), style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.container },
+        React__default.createElement(Icon, { name: iconName, color: "greyBlue", size: size }),
+        hasName && (React__default.createElement("div", { className: styles$1.fileName },
+            React__default.createElement(Typography, { element: "span", textColor: "text", numberOfLines: 1 }, name)))));
+}
+function getIconNameFromType(mimeType) {
+    if (mimeType.startsWith("image/"))
+        return "image";
+    if (mimeType.startsWith("video/"))
+        return "video";
+    switch (mimeType) {
+        case "application/pdf":
+            return "pdf";
+        case "application/vnd.ms-excel":
+            return "excel";
+        default:
+            return "file";
+    }
+}
+function isSupportedImageType(file) {
+    const userAgent = typeof document === "undefined" ? "" : window.navigator.userAgent;
+    const nonHeicImage = !file.type.startsWith("image/heic");
+    const nonSVGImage = !file.type.startsWith("image/svg");
+    return (nonHeicImage || isSafari(userAgent)) && nonSVGImage;
+}
+
+export { Thumbnail as T, isSafari as i };

package/dist/Tiles/Tiles.d.ts

@@ -1,2 +1,3 @@
+import React from "react";
 import { TilesProps } from "./types";
-export declare function Tiles({ children, minSize, gap, autoWidth, as: Tag, dataAttributes, ariaAttributes, role, id, UNSAFE_className, UNSAFE_style, align, }: TilesProps): JSX.Element;
+export declare function Tiles({ children, minSize, gap, autoWidth, as: Tag, dataAttributes, ariaAttributes, role, id, UNSAFE_className, UNSAFE_style, align, }: TilesProps): React.JSX.Element;

package/dist/Toast/Toast.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { XOR } from "ts-xor";
 interface BaseToastProps {
     readonly variation?: "info" | "success" | "error";
@@ -21,5 +22,5 @@ type ToastPropsInternal = Omit<ToastProps, "id">;
 export interface ToastRef {
     add(props: ToastProps): void;
 }
-export declare function Toast({ message, variation, action, actionLabel, }: ToastPropsInternal): JSX.Element;
+export declare function Toast({ message, variation, action, actionLabel, }: ToastPropsInternal): React.JSX.Element;
 export {};

package/dist/Tooltip/Tooltip.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement } from "react";
+import React, { ReactElement } from "react";
 import { Placement } from "./Tooltip.types";
 interface TooltipProps {
     readonly children: ReactElement;
@@ -13,5 +13,5 @@ interface TooltipProps {
     readonly preferredPlacement?: Placement;
     readonly setTabIndex?: boolean;
 }
-export declare function Tooltip({ message, children, preferredPlacement, setTabIndex, }: TooltipProps): JSX.Element;
+export declare function Tooltip({ message, children, preferredPlacement, setTabIndex, }: TooltipProps): React.JSX.Element;
 export {};

package/dist/Typography/Typography.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, ReactNode } from "react";
+import React, { CSSProperties, ReactNode } from "react";
 import fontSizes from "./css/FontSizes.module.css";
 import fontWeights from "./css/FontWeights.module.css";
 import textCases from "./css/TextCases.module.css";
@@ -60,4 +60,4 @@ export interface TypographyProps {
     };
 }
 export type TypographyOptions = Omit<TypographyProps, "children">;
-export declare function Typography({ id, children, element: Tag, size, align, fontWeight, textCase, textColor, emphasisType, numberOfLines, fontFamily, underline, UNSAFE_className, UNSAFE_style, }: TypographyProps): JSX.Element;
+export declare function Typography({ id, children, element: Tag, size, align, fontWeight, textCase, textColor, emphasisType, numberOfLines, fontFamily, underline, UNSAFE_className, UNSAFE_style, }: TypographyProps): React.JSX.Element;

package/dist/index.cjs

@@ -95,6 +95,7 @@ var Stack = require('./Stack-cjs.js');
 var Switch = require('./Switch-cjs.js');
 var Body = require('./Body-cjs.js');
 var Tabs = require('./Tabs-cjs.js');
+var Thumbnail = require('./Thumbnail-cjs.js');
 var Tiles = require('./Tiles-cjs.js');
 var showToast = require('./showToast-cjs.js');
 var Tooltip = require('./Tooltip-cjs.js');
@@ -271,6 +272,8 @@ exports.FormatDate = FormatDate.FormatDate;
 exports.strFormatDate = FormatDate.strFormatDate;
 exports.FormatEmail = FormatEmail.FormatEmail;
 exports.FormatFile = FormatFile.FormatFile;
+exports.useFormatFile = FormatFile.useFormatFile;
+exports.useFormatFileStyles = FormatFile.useFormatFileStyles;
 exports.FormatRelativeDateTime = FormatRelativeDateTime.FormatRelativeDateTime;
 exports.FormatTime = FormatTime.FormatTime;
 exports.Frame = Frame.Frame;
@@ -344,6 +347,7 @@ exports.Row = Body.Row;
 exports.Table = Body.Table;
 exports.Tab = Tabs.Tab;
 exports.Tabs = Tabs.Tabs;
+exports.Thumbnail = Thumbnail.Thumbnail;
 exports.Tiles = Tiles.Tiles;
 exports.Toast = showToast.Toast;
 exports.showToast = showToast.showToast;

package/dist/index.d.mts

@@ -81,6 +81,7 @@ export * from "./Switch";
 export * from "./Table";
 export * from "./Tabs";
 export * from "./Text";
+export * from "./Thumbnail";
 export * from "./Tiles";
 export * from "./Toast";
 export * from "./Tooltip";

package/dist/index.d.ts

@@ -81,6 +81,7 @@ export * from "./Switch";
 export * from "./Table";
 export * from "./Tabs";
 export * from "./Text";
+export * from "./Thumbnail";
 export * from "./Tiles";
 export * from "./Toast";
 export * from "./Tooltip";

package/dist/index.mjs

@@ -49,7 +49,7 @@ export { F as Form } from './Form-es.js';
 export { A as AffixIcon, i as AffixLabel, k as FormField, F as FormFieldInputHorizontalWrapper, d as FormFieldInputWrapperStyles, e as FormFieldLabel, f as FormFieldWrapper, g as FormFieldWrapperMain, h as FormFieldWrapperToolbar, u as useAtlantisFormField, a as useAtlantisFormFieldActions, b as useAtlantisFormFieldName, c as useAtlantisReactHookForm, j as useFormFieldWrapperStyles } from './FormField-es.js';
 export { F as FormatDate, s as strFormatDate } from './FormatDate-es.js';
 export { F as FormatEmail } from './FormatEmail-es.js';
-export { F as FormatFile } from './FormatFile-es.js';
+export { F as FormatFile, u as useFormatFile, a as useFormatFileStyles } from './FormatFile-es.js';
 export { F as FormatRelativeDateTime } from './FormatRelativeDateTime-es.js';
 export { F as FormatTime } from './FormatTime-es.js';
 export { F as Frame } from './Frame-es.js';
@@ -93,6 +93,7 @@ export { S as Stack } from './Stack-es.js';
 export { S as Switch } from './Switch-es.js';
 export { B as Body, C as Cell, b as CellCurrency, a as CellNumeric, F as Footer, H as Header, R as Row, T as Table } from './Body-es.js';
 export { a as Tab, T as Tabs } from './Tabs-es.js';
+export { T as Thumbnail } from './Thumbnail-es.js';
 export { T as Tiles } from './Tiles-es.js';
 export { T as Toast, s as showToast } from './showToast-es.js';
 export { T as Tooltip } from './Tooltip-es.js';