@jobber/components 8.11.1 → 8.12.1

package/dist/InputNumberExperimental-cjs.js

@@ -726,22 +726,29 @@ function InputNumberExperimentalInputCompound(props = {}) {
     var _a;
     const ctx = useInputNumberExperimentalContext("Input");
     const labelText = (_a = props.placeholder) !== null && _a !== void 0 ? _a : ctx.placeholder;
-    return (React.createElement("div", { className: classnames(styles.inputWrapper, !ctx.showMiniLabel && styles.hideLabel, ctx.size !== "default" && styles[ctx.size], ctx.disabled && styles.disabled) },
+    const rootProps = useRenderElement.mergeProps({
+        className: classnames(styles.inputWrapper, !ctx.showMiniLabel && styles.hideLabel, ctx.size !== "default" && styles[ctx.size], ctx.disabled && styles.disabled),
+    }, { className: props.className, style: props.style });
+    return (React.createElement("div", Object.assign({}, rootProps),
         React.createElement(NumberFieldInput.NumberFieldInput, { "aria-busy": ctx.loading || undefined, autoComplete: resolveAutocomplete(ctx.autocomplete), className: styles.input, inputMode: ctx.keyboard, maxLength: ctx.maxLength, onBlur: ctx.onBlur, onFocus: ctx.onFocus, onKeyDown: ctx.onKeyDown, onKeyUp: ctx.onKeyUp, placeholder: " ", ref: ctx.innerInputRef }),
         labelText && (React.createElement("label", { className: styles.label, htmlFor: ctx.id }, labelText)),
         ctx.loading ? (React.createElement("div", { className: styles.loadingIndicator },
             React.createElement(ActivityIndicator.ActivityIndicator, { size: "small" }))) : (!ctx.compoundLayout && React.createElement(InputNumberExperimentalStepperCompound, null))));
 }
-function InputNumberExperimentalAffixCompound({ variation, label, icon, onClick, ariaLabel, }) {
+function InputNumberExperimentalAffixCompound({ variation, label, icon, onClick, ariaLabel, children, className, style, }) {
     const ctx = useInputNumberExperimentalContext("Affix");
-    if (!icon && !label) {
+    if (!icon && !label && !children) {
         return null;
     }
-    return (React.createElement("div", { className: classnames(styles.compoundAffix, variation === "suffix" && styles.suffix) },
+    const rootProps = useRenderElement.mergeProps({
+        className: classnames(styles.compoundAffix, variation === "suffix" && styles.suffix),
+    }, { className, style });
+    return (React.createElement("div", Object.assign({}, rootProps),
         icon && (React.createElement(AffixIconContent, { icon: icon, size: ctx.size, onClick: onClick, ariaLabel: ariaLabel })),
-        label && React.createElement("span", { className: styles.affixLabelText }, label)));
+        label && React.createElement("span", { className: styles.affixLabelText }, label),
+        children));
 }
-function InputNumberExperimentalStepperCompound({ incrementLabel, decrementLabel, } = {}) {
+function InputNumberExperimentalStepperCompound({ incrementLabel, decrementLabel, className, style, } = {}) {
     var _a;
     const ctx = useInputNumberExperimentalContext("Stepper");
     // Hidden while loading; the loading indicator renders in the input wrapper
@@ -752,7 +759,8 @@ function InputNumberExperimentalStepperCompound({ incrementLabel, decrementLabel
     const labelTarget = (_a = ctx.placeholder) !== null && _a !== void 0 ? _a : "value";
     const resolvedIncrementLabel = incrementLabel !== null && incrementLabel !== void 0 ? incrementLabel : `Increase ${labelTarget}`;
     const resolvedDecrementLabel = decrementLabel !== null && decrementLabel !== void 0 ? decrementLabel : `Decrease ${labelTarget}`;
-    return (React.createElement("div", { className: styles.stepper },
+    const rootProps = useRenderElement.mergeProps({ className: styles.stepper }, { className, style });
+    return (React.createElement("div", Object.assign({}, rootProps),
         React.createElement(NumberFieldInput.NumberFieldIncrement, { "aria-label": resolvedIncrementLabel, className: styles.stepperButton }, "\u25B2"),
         React.createElement(NumberFieldInput.NumberFieldDecrement, { "aria-label": resolvedDecrementLabel, className: styles.stepperButton }, "\u25BC")));
 }

package/dist/InputNumberExperimental-es.js

@@ -706,22 +706,29 @@ function InputNumberExperimentalInputCompound(props = {}) {
     var _a;
     const ctx = useInputNumberExperimentalContext("Input");
     const labelText = (_a = props.placeholder) !== null && _a !== void 0 ? _a : ctx.placeholder;
-    return (React__default.createElement("div", { className: classnames(styles.inputWrapper, !ctx.showMiniLabel && styles.hideLabel, ctx.size !== "default" && styles[ctx.size], ctx.disabled && styles.disabled) },
+    const rootProps = mergeProps({
+        className: classnames(styles.inputWrapper, !ctx.showMiniLabel && styles.hideLabel, ctx.size !== "default" && styles[ctx.size], ctx.disabled && styles.disabled),
+    }, { className: props.className, style: props.style });
+    return (React__default.createElement("div", Object.assign({}, rootProps),
         React__default.createElement(NumberFieldInput, { "aria-busy": ctx.loading || undefined, autoComplete: resolveAutocomplete(ctx.autocomplete), className: styles.input, inputMode: ctx.keyboard, maxLength: ctx.maxLength, onBlur: ctx.onBlur, onFocus: ctx.onFocus, onKeyDown: ctx.onKeyDown, onKeyUp: ctx.onKeyUp, placeholder: " ", ref: ctx.innerInputRef }),
         labelText && (React__default.createElement("label", { className: styles.label, htmlFor: ctx.id }, labelText)),
         ctx.loading ? (React__default.createElement("div", { className: styles.loadingIndicator },
             React__default.createElement(ActivityIndicator, { size: "small" }))) : (!ctx.compoundLayout && React__default.createElement(InputNumberExperimentalStepperCompound, null))));
 }
-function InputNumberExperimentalAffixCompound({ variation, label, icon, onClick, ariaLabel, }) {
+function InputNumberExperimentalAffixCompound({ variation, label, icon, onClick, ariaLabel, children, className, style, }) {
     const ctx = useInputNumberExperimentalContext("Affix");
-    if (!icon && !label) {
+    if (!icon && !label && !children) {
         return null;
     }
-    return (React__default.createElement("div", { className: classnames(styles.compoundAffix, variation === "suffix" && styles.suffix) },
+    const rootProps = mergeProps({
+        className: classnames(styles.compoundAffix, variation === "suffix" && styles.suffix),
+    }, { className, style });
+    return (React__default.createElement("div", Object.assign({}, rootProps),
         icon && (React__default.createElement(AffixIconContent, { icon: icon, size: ctx.size, onClick: onClick, ariaLabel: ariaLabel })),
-        label && React__default.createElement("span", { className: styles.affixLabelText }, label)));
+        label && React__default.createElement("span", { className: styles.affixLabelText }, label),
+        children));
 }
-function InputNumberExperimentalStepperCompound({ incrementLabel, decrementLabel, } = {}) {
+function InputNumberExperimentalStepperCompound({ incrementLabel, decrementLabel, className, style, } = {}) {
     var _a;
     const ctx = useInputNumberExperimentalContext("Stepper");
     // Hidden while loading; the loading indicator renders in the input wrapper
@@ -732,7 +739,8 @@ function InputNumberExperimentalStepperCompound({ incrementLabel, decrementLabel
     const labelTarget = (_a = ctx.placeholder) !== null && _a !== void 0 ? _a : "value";
     const resolvedIncrementLabel = incrementLabel !== null && incrementLabel !== void 0 ? incrementLabel : `Increase ${labelTarget}`;
     const resolvedDecrementLabel = decrementLabel !== null && decrementLabel !== void 0 ? decrementLabel : `Decrease ${labelTarget}`;
-    return (React__default.createElement("div", { className: styles.stepper },
+    const rootProps = mergeProps({ className: styles.stepper }, { className, style });
+    return (React__default.createElement("div", Object.assign({}, rootProps),
         React__default.createElement(NumberFieldIncrement, { "aria-label": resolvedIncrementLabel, className: styles.stepperButton }, "\u25B2"),
         React__default.createElement(NumberFieldDecrement, { "aria-label": resolvedDecrementLabel, className: styles.stepperButton }, "\u25BC")));
 }

package/dist/SideDrawer-cjs.js

@@ -128,7 +128,7 @@ function SideDrawer({ children, onRequestClose, open, variation = "base", scroll
             }, style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.container },
             React.createElement("div", { ref: sideDrawerRef, role: "dialog", className: classnames(styles.container, styles.hasShadow, {
                     [styles.subtle]: variation === "subtle",
-                }), tabIndex: 0, onKeyUp: handleKeyUp },
+                }), tabIndex: 0, onKeyDown: handleKeyDown },
                 React.createElement("div", { className: classnames(styles.header, {
                         [styles.hasShadow]: headerShadowRef.current && !noHeaderShadow,
                     }) },
@@ -153,8 +153,9 @@ function SideDrawer({ children, onRequestClose, open, variation = "base", scroll
         return SideDrawerRender;
     }
     return ReactDOM.createPortal(SideDrawerRender, container);
-    function handleKeyUp(event) {
+    function handleKeyDown(event) {
         if (event.key === "Escape") {
+            event.stopPropagation();
             onRequestClose();
         }
     }

package/dist/SideDrawer-es.js

@@ -126,7 +126,7 @@ function SideDrawer({ children, onRequestClose, open, variation = "base", scroll
             }, style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.container },
             React__default.createElement("div", { ref: sideDrawerRef, role: "dialog", className: classnames(styles.container, styles.hasShadow, {
                     [styles.subtle]: variation === "subtle",
-                }), tabIndex: 0, onKeyUp: handleKeyUp },
+                }), tabIndex: 0, onKeyDown: handleKeyDown },
                 React__default.createElement("div", { className: classnames(styles.header, {
                         [styles.hasShadow]: headerShadowRef.current && !noHeaderShadow,
                     }) },
@@ -151,8 +151,9 @@ function SideDrawer({ children, onRequestClose, open, variation = "base", scroll
         return SideDrawerRender;
     }
     return createPortal(SideDrawerRender, container);
-    function handleKeyUp(event) {
+    function handleKeyDown(event) {
         if (event.key === "Escape") {
+            event.stopPropagation();
             onRequestClose();
         }
     }

package/dist/Thumbnail-cjs.js

@@ -64,18 +64,29 @@ function isSafari(userAgent) {
     return getClientBrowser(userAgent) === "Apple Safari";
 }
 
+// Allowlist rather than denylist so unrecognized types fail safe (fall back to
+// a non-image preview) instead of handing a broken file to an <img>.
+const PREVIEWABLE_TYPES = new Set([
+    "image/jpeg",
+    "image/jpg",
+    "image/png",
+    "image/gif",
+    "image/webp",
+    "image/bmp",
+    "image/avif",
+]);
+const SAFARI_ONLY_TYPES = new Set(["image/heic", "image/heif"]);
 function isPreviewableImage(type) {
-    if (!type || !type.startsWith("image/"))
+    if (!type)
         return false;
-    const userAgent = typeof document === "undefined" ? "" : window.navigator.userAgent;
-    const isHeic = type.startsWith("image/heic");
-    const isSVG = type.startsWith("image/svg");
-    const isVendor = /^image\/(vnd[.-]|x-)/i.test(type);
-    if (isSVG || isVendor)
-        return false;
-    if (isHeic && !isSafari(userAgent))
-        return false;
-    return true;
+    const normalizedType = type.toLowerCase();
+    if (PREVIEWABLE_TYPES.has(normalizedType))
+        return true;
+    if (SAFARI_ONLY_TYPES.has(normalizedType)) {
+        const userAgent = typeof document === "undefined" ? "" : window.navigator.userAgent;
+        return isSafari(userAgent);
+    }
+    return false;
 }
 
 function Thumbnail({ compact = false, size, file, UNSAFE_className, UNSAFE_style, }) {

package/dist/Thumbnail-es.js

@@ -62,18 +62,29 @@ function isSafari(userAgent) {
     return getClientBrowser(userAgent) === "Apple Safari";
 }
 
+// Allowlist rather than denylist so unrecognized types fail safe (fall back to
+// a non-image preview) instead of handing a broken file to an <img>.
+const PREVIEWABLE_TYPES = new Set([
+    "image/jpeg",
+    "image/jpg",
+    "image/png",
+    "image/gif",
+    "image/webp",
+    "image/bmp",
+    "image/avif",
+]);
+const SAFARI_ONLY_TYPES = new Set(["image/heic", "image/heif"]);
 function isPreviewableImage(type) {
-    if (!type || !type.startsWith("image/"))
+    if (!type)
         return false;
-    const userAgent = typeof document === "undefined" ? "" : window.navigator.userAgent;
-    const isHeic = type.startsWith("image/heic");
-    const isSVG = type.startsWith("image/svg");
-    const isVendor = /^image\/(vnd[.-]|x-)/i.test(type);
-    if (isSVG || isVendor)
-        return false;
-    if (isHeic && !isSafari(userAgent))
-        return false;
-    return true;
+    const normalizedType = type.toLowerCase();
+    if (PREVIEWABLE_TYPES.has(normalizedType))
+        return true;
+    if (SAFARI_ONLY_TYPES.has(normalizedType)) {
+        const userAgent = typeof document === "undefined" ? "" : window.navigator.userAgent;
+        return isSafari(userAgent);
+    }
+    return false;
 }
 
 function Thumbnail({ compact = false, size, file, UNSAFE_className, UNSAFE_style, }) {

package/dist/primitives/InputNumberExperimental/InputNumberExperimental.d.ts

@@ -4,11 +4,11 @@ declare function InputNumberExperimentalInputCompound(props?: InputNumberExperim
 declare namespace InputNumberExperimentalInputCompound {
     var displayName: string;
 }
-declare function InputNumberExperimentalAffixCompound({ variation, label, icon, onClick, ariaLabel, }: InputNumberExperimentalAffixCompoundProps): React.JSX.Element | null;
+declare function InputNumberExperimentalAffixCompound({ variation, label, icon, onClick, ariaLabel, children, className, style, }: InputNumberExperimentalAffixCompoundProps): React.JSX.Element | null;
 declare namespace InputNumberExperimentalAffixCompound {
     var displayName: string;
 }
-declare function InputNumberExperimentalStepperCompound({ incrementLabel, decrementLabel, }?: InputNumberExperimentalStepperCompoundProps): React.JSX.Element | null;
+declare function InputNumberExperimentalStepperCompound({ incrementLabel, decrementLabel, className, style, }?: InputNumberExperimentalStepperCompoundProps): React.JSX.Element | null;
 declare namespace InputNumberExperimentalStepperCompound {
     var displayName: string;
 }

package/dist/primitives/InputNumberExperimental/types.d.ts

@@ -1,5 +1,13 @@
-import type { FocusEvent, KeyboardEvent, ReactNode } from "react";
+import type { CSSProperties, FocusEvent, KeyboardEvent, ReactNode } from "react";
 import type { IconNames } from "../../Icon";
+/**
+ * `className`/`style` shared by every `InputNumberExperimental` building block.
+ * Both compose with the block's internal styling rather than replacing it.
+ */
+export interface InputNumberExperimentalStyleProps {
+    readonly className?: string;
+    readonly style?: CSSProperties;
+}
 /**
  * Affix descriptor used by the `prefix` and `suffix` props on
  * `<InputNumberExperimental>` for the default (drop-in) render.
@@ -118,26 +126,30 @@ export interface InputNumberExperimentalRef {
     blur(): void;
     focus(): void;
 }
-export interface InputNumberExperimentalInputProps {
+export interface InputNumberExperimentalInputProps extends InputNumberExperimentalStyleProps {
     /**
      * Overrides the floating mini-label text. Falls back to the root component's
      * `placeholder` prop when omitted.
      */
     readonly placeholder?: string;
 }
-export interface InputNumberExperimentalAffixCompound {
+export interface InputNumberExperimentalAffixCompound extends InputNumberExperimentalStyleProps {
     readonly variation: "prefix" | "suffix";
     readonly label?: string;
     readonly icon?: IconNames;
     readonly ariaLabel?: never;
     readonly onClick?: never;
+    /** Arbitrary affix content, beyond the built-in `label`/`icon`. */
+    readonly children?: ReactNode;
 }
-export interface InputNumberExperimentalAffixCompoundClickable {
+export interface InputNumberExperimentalAffixCompoundClickable extends InputNumberExperimentalStyleProps {
     readonly variation: "prefix" | "suffix";
     readonly label?: string;
     readonly icon: IconNames;
     readonly ariaLabel: string;
     onClick(): void;
+    /** Arbitrary affix content, beyond the built-in `label`/`icon`. */
+    readonly children?: ReactNode;
 }
 /**
  * Compound `.Affix` props. Discriminated by whether `onClick` is set:
@@ -149,7 +161,7 @@ export interface InputNumberExperimentalAffixCompoundClickable {
  * back to the default API when you need that.
  */
 export type InputNumberExperimentalAffixCompoundProps = InputNumberExperimentalAffixCompound | InputNumberExperimentalAffixCompoundClickable;
-export interface InputNumberExperimentalStepperCompoundProps {
+export interface InputNumberExperimentalStepperCompoundProps extends InputNumberExperimentalStyleProps {
     /**
      * Override the increment button's accessible label.
      * Defaults to `Increase ${placeholder ?? "value"}`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "8.11.1",
+  "version": "8.12.1",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -556,5 +556,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "85613843d134dfa6dee673b87293f5e0ceb3bfa5"
+  "gitHead": "80813476ca22f110f6cc3a8bb1838279cd5dac3d"
 }