@jobber/components 8.2.0 → 8.4.0

package/dist/InputText-es.js

@@ -0,0 +1,197 @@
+import React__default, { forwardRef, useMemo, useId } from 'react';
+import { useSafeLayoutEffect } from '@jobber/hooks';
+import { g as formFieldStyles, c as FormFieldWrapper } from './FormFieldWrapper-es.js';
+import { F as FormFieldPostFix } from './FormFieldPostFix-es.js';
+import 'classnames';
+import { u as useAtlantisFormFieldName } from './useAtlantisFormFieldName-es.js';
+import './tslib.es6-es.js';
+import 'react-hook-form';
+import { m as mergeRefs } from './mergeRefs-es.js';
+import './Button-es.js';
+import '@jobber/design';
+import { f as filterDataAttributes } from './filterDataAttributes-es.js';
+
+/**
+ * Hook for resizing a textarea based on its content. The textarea will grow up to the max number of rows specified.
+ */
+function useTextAreaResize({ rows, value, inputRef, wrapperRef, }) {
+    const rowRange = getRowRange(rows);
+    useSafeLayoutEffect(() => {
+        if (inputRef &&
+            inputRef.current instanceof HTMLTextAreaElement &&
+            wrapperRef &&
+            wrapperRef.current instanceof HTMLDivElement) {
+            resize();
+        }
+    }, [inputRef.current, wrapperRef.current]);
+    // When the consumer passes a new controlled value, we need to recheck the size.
+    // The timeout ensures the DOM has a enough time to render the new text before
+    // we access the height.
+    useSafeLayoutEffect(() => {
+        setTimeout(() => {
+            if (inputRef &&
+                inputRef.current instanceof HTMLTextAreaElement &&
+                wrapperRef &&
+                wrapperRef.current instanceof HTMLDivElement) {
+                resize();
+            }
+        }, 0);
+    }, [value]);
+    function resize() {
+        if (inputRef &&
+            inputRef.current instanceof HTMLTextAreaElement &&
+            wrapperRef &&
+            (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) instanceof HTMLDivElement) {
+            if (rowRange.min === rowRange.max)
+                return;
+            inputRef.current.style.flexBasis = "auto";
+            wrapperRef.current.style.height = "auto";
+            inputRef.current.style.flexBasis =
+                textAreaHeight(inputRef.current) + "px";
+        }
+    }
+    function textAreaHeight(textArea) {
+        const { lineHeight, borderBottomWidth, borderTopWidth, paddingBottom, paddingTop, } = window.getComputedStyle(textArea);
+        const maxHeight = rowRange.max * parseFloat(lineHeight) +
+            parseFloat(borderTopWidth) +
+            parseFloat(borderBottomWidth) +
+            parseFloat(paddingTop) +
+            parseFloat(paddingBottom);
+        const scrollHeight = textArea.scrollHeight +
+            parseFloat(borderTopWidth) +
+            parseFloat(borderBottomWidth);
+        return Math.min(scrollHeight, maxHeight);
+    }
+    return { resize, rowRange };
+}
+function getRowRange(rows) {
+    if (rows === undefined) {
+        return { min: 3, max: 3 };
+    }
+    else if (typeof rows === "object") {
+        return { min: rows.min, max: rows.max };
+    }
+    else {
+        return { min: rows, max: rows };
+    }
+}
+
+/**
+ * Combines the actions on the InputText such as onChange, onEnter, onFocus, onBlur, and onClear to forward information to the consumers of the InputText.
+ * DO not repeat this pattern. We are doing this as a proof of concept relating to the refactoring of Form inputs to see what can be removed.
+ */
+function useInputTextActions({ onChange, inputRef, onEnter, onFocus, onBlur, onKeyDown, onKeyUp, onMouseDown, onMouseUp, onPointerDown, onPointerUp, onClick, }) {
+    function handleClear() {
+        var _a;
+        onChange && onChange("");
+        (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    function handleChange(event) {
+        const newValue = event.currentTarget.value;
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValue, event);
+    }
+    function handleKeyDown(event) {
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+        if (!onEnter)
+            return;
+        if (event.key !== "Enter")
+            return;
+        if (event.shiftKey || event.ctrlKey)
+            return;
+        event.preventDefault();
+        onEnter && onEnter(event);
+    }
+    function handleKeyUp(event) {
+        onKeyUp === null || onKeyUp === void 0 ? void 0 : onKeyUp(event);
+    }
+    function handleFocus(event) {
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+    }
+    function handleBlur(event) {
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    }
+    function handleMouseDown(event) {
+        onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event);
+    }
+    function handleMouseUp(event) {
+        onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(event);
+    }
+    function handlePointerDown(event) {
+        onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(event);
+    }
+    function handlePointerUp(event) {
+        onPointerUp === null || onPointerUp === void 0 ? void 0 : onPointerUp(event);
+    }
+    function handleClick(event) {
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    }
+    return {
+        handleClear,
+        handleChange,
+        handleKeyDown,
+        handleKeyUp,
+        handleFocus,
+        handleBlur,
+        handleMouseDown,
+        handleMouseUp,
+        handlePointerDown,
+        handlePointerUp,
+        handleClick,
+    };
+}
+
+const InputText = forwardRef(function InputTextInternal(props, inputRef) {
+    var _a, _b, _c;
+    const inputTextRef = React__default.useRef(null), wrapperRef = React__default.useRef(null);
+    const id = useInputTextId(props);
+    const { rowRange } = useTextAreaResize({
+        rows: props.rows,
+        value: props.value,
+        inputRef: inputTextRef,
+        wrapperRef: wrapperRef,
+    });
+    const { name } = useAtlantisFormFieldName({
+        nameProp: props.name,
+        id: id,
+    });
+    const { handleChange, handleBlur, handleFocus, handleKeyDown, handleKeyUp, handleClear, handleMouseDown, handleMouseUp, handlePointerDown, handlePointerUp, handleClick, } = useInputTextActions({
+        onChange: props.onChange,
+        onBlur: props.onBlur,
+        onFocus: props.onFocus,
+        onMouseDown: props.onMouseDown,
+        onMouseUp: props.onMouseUp,
+        onPointerDown: props.onPointerDown,
+        onPointerUp: props.onPointerUp,
+        onClick: props.onClick,
+        onKeyDown: props.onKeyDown,
+        onKeyUp: props.onKeyUp,
+        onEnter: props.onEnter,
+        inputRef: inputTextRef,
+    });
+    const descriptionIdentifier = `descriptionUUID--${id}`;
+    const descriptionVisible = props.description && !props.inline;
+    const isInvalid = Boolean(props.error || props.invalid);
+    const dataAttrs = filterDataAttributes(props);
+    const mergedRef = useMemo(() => mergeRefs([inputRef, inputTextRef]), []);
+    // Shared props for both TextArea and TextInput
+    const commonInputProps = Object.assign({ id,
+        name, className: formFieldStyles.input, value: props.value, disabled: props.disabled, readOnly: props.readOnly, autoFocus: props.autoFocus, autoComplete: props.autoComplete, inputMode: props.inputMode, tabIndex: props.tabIndex, maxLength: props.maxLength, required: props.required, role: props.role, "aria-label": props["aria-label"], "aria-describedby": descriptionVisible
+            ? descriptionIdentifier
+            : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-controls": props["aria-controls"], "aria-expanded": props["aria-expanded"], "aria-activedescendant": props["aria-activedescendant"], "aria-autocomplete": props["aria-autocomplete"], "aria-required": props["aria-required"], onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onClick: handleClick, ref: mergedRef }, dataAttrs);
+    return (React__default.createElement(FormFieldWrapper, { disabled: props.disabled, size: props.size, align: props.align, inline: props.inline, name: name, wrapperRef: wrapperRef, error: (_a = props.error) !== null && _a !== void 0 ? _a : "", invalid: Boolean(props.error || props.invalid), identifier: id, descriptionIdentifier: descriptionIdentifier, description: props.description, clearable: (_b = props.clearable) !== null && _b !== void 0 ? _b : "never", onClear: handleClear, type: props.multiline ? "textarea" : "text", placeholder: props.placeholder, value: props.value, prefix: props.prefix, suffix: props.suffix, readonly: props.readOnly, rows: rowRange.min, toolbar: props.toolbar, toolbarVisibility: props.toolbarVisibility, showMiniLabel: props.showMiniLabel },
+        React__default.createElement(React__default.Fragment, null,
+            props.multiline ? (React__default.createElement(TextArea, Object.assign({}, commonInputProps, { rows: rowRange.min }))) : (React__default.createElement(TextInput, Object.assign({}, commonInputProps, { pattern: props.pattern }))),
+            React__default.createElement(FormFieldPostFix, { variation: "spinner", visible: (_c = props.loading) !== null && _c !== void 0 ? _c : false }))));
+});
+function useInputTextId(props) {
+    const generatedId = useId();
+    return props.id || generatedId;
+}
+const TextArea = forwardRef(function TextArea(props, ref) {
+    return React__default.createElement("textarea", Object.assign({}, props, { ref: ref }));
+});
+const TextInput = forwardRef(function TextInput(props, ref) {
+    return React__default.createElement("input", Object.assign({}, props, { ref: ref }));
+});
+
+export { InputText as I };

package/dist/Spinner/Spinner.d.ts

@@ -1,4 +1,7 @@
 import React from "react";
+/**
+ * @deprecated Use `ActivityIndicator` instead.
+ */
 interface SpinnerProps {
     /**
      * Specifies the size of the spinner
@@ -12,5 +15,8 @@ interface SpinnerProps {
      */
     readonly inline?: boolean;
 }
+/**
+ * @deprecated Use `ActivityIndicator` instead.
+ */
 export declare function Spinner({ size, inline }: SpinnerProps): React.JSX.Element;
 export {};

package/dist/Spinner-cjs.js

@@ -5,6 +5,9 @@ var classnames = require('classnames');
 
 var styles = {"spinner":"_6hfmGZoXNyg-","animationSpin":"aT3CETCJ4hQ-","small":"bMfynkzmlL4-","inline":"NA68eWblbLo-","spinning":"aCBq1WrkI4M-"};
 
+/**
+ * @deprecated Use `ActivityIndicator` instead.
+ */
 function Spinner({ size = "base", inline }) {
     const spinnerStyles = classnames(styles.spinner, {
         [styles.small]: size === "small",

package/dist/Spinner-es.js

@@ -3,6 +3,9 @@ import classnames from 'classnames';
 
 var styles = {"spinner":"_6hfmGZoXNyg-","animationSpin":"aT3CETCJ4hQ-","small":"bMfynkzmlL4-","inline":"NA68eWblbLo-","spinning":"aCBq1WrkI4M-"};
 
+/**
+ * @deprecated Use `ActivityIndicator` instead.
+ */
 function Spinner({ size = "base", inline }) {
     const spinnerStyles = classnames(styles.spinner, {
         [styles.small]: size === "small",

package/dist/docs/ActivityIndicator/ActivityIndicator.md

@@ -0,0 +1,67 @@
+# Activity Indicator
+
+`ActivityIndicator` is used to communicate an **indeterminate** activity the
+user cannot directly control or measure — loading, fetching, or waiting on an
+external system.
+
+Use `ActivityIndicator` when the loading time or fraction of progress is
+unknown. If you know the fraction of progress (for example, "3 of 4 files
+uploaded"), use `ProgressBar` instead. A `ProgressIndicator` counterpart that
+will subsume `ProgressBar` under the new naming is forthcoming.
+
+## Design & usage guidelines
+
+The default `ActivityIndicator` size is `base` (32px) and can be used in most
+cases. The `small` size (16px) should be used on individual elements of an
+interface (e.g. inside a `Button` or `Card`) or when sitting next to short
+inline text.
+
+Layout is the consumer's responsibility — `ActivityIndicator` does not expose
+an `inline` prop. Place it inside your own flex / inline-block container, or
+pass a `className` / `style`, to control surrounding layout.
+
+## Accessibility
+
+`ActivityIndicator` announces itself politely to assistive technology:
+
+* `role="status"` marks the element as a polite live region, appropriate for
+  a non-urgent loading state.
+* `aria-label` defaults to the literal English string `"Loading"`. Pass a
+  custom `ariaLabel` to localize or to describe the specific activity
+  (e.g. `ariaLabel="Uploading file"`).
+
+The indicator does not participate in the keyboard tab order.
+
+### Reduced motion
+
+When the user's operating system reports
+[`prefers-reduced-motion: reduce`](https://developer.mozilla.org/docs/Web/CSS/@media/prefers-reduced-motion),
+the indicator hides its rocking and rotating layers, repaints a single
+static ring in the icon foreground colour, and gently pulses its opacity so
+the indicator still reads as "busy" without rotational motion.
+
+## Relationship to Spinner
+
+The legacy [Spinner](../Spinner/Spinner.md) component remains available and
+unchanged. New code should prefer `ActivityIndicator`. A follow-up change is
+expected to deprecate `Spinner` in favour of `ActivityIndicator`.
+
+## Mobile
+
+On mobile (`@jobber/components-native`), `ActivityIndicator` uses the
+[ActivityIndicator](https://reactnative.dev/docs/activityIndicator) core
+component from React Native.
+
+## Mockup
+
+
+## Props
+
+### Web
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `ariaLabel` | `string` | No | `Loading` | Accessible label exposed via `aria-label` on the root element. Override to localize or to describe the specific activ... |
+| `className` | `string` | No | — | Custom class name merged onto the root element alongside the component's own classes. |
+| `size` | `"base" | "small"` | No | `base` | Visual size. `base` renders at 32px, `small` renders at 16px. |
+| `style` | `CSSProperties` | No | — | Custom inline styles applied to the root element. |

package/dist/docs/Autocomplete/AutocompleteV1.md

@@ -1322,8 +1322,7 @@ is, focus the extra element and if not it will focus the input.
 | `onBlur` | `(event?: FocusEvent<Element, Element>) => void` | No | — | Blur callback. |
 | `onFocus` | `(event?: FocusEvent<Element, Element>) => void` | No | — | Focus callback. |
 | `prefix` | `Affix` | No | — | Adds a prefix label and icon to the field |
-| `ref` | `Ref<InputTextRef>` | No | — | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (... |
+| `ref` | `Ref<HTMLInputElement>` | No | — | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (... |
 | `size` | `"large" | "small"` | No | — | Adjusts the interface to either have small or large spacing. |
 | `suffix` | `{ onClick: () => void; readonly ariaLabel: string; readonly icon: IconNames; readonly label?: string; } | { onClick?: never; ariaLabel?: never; readonly label?: string; readonly icon?: IconNames; }` | No | — | Adds a suffix label and icon with an optional action to the field |
-| `validations` | `RegisterOptions` | No | — | Validations to run on the input. |
 | `version` | `1` | No | `1` | Version of the component to use. |

package/dist/docs/Autocomplete/AutocompleteV2.md

@@ -781,7 +781,7 @@ This is not yet implemented fully. Avoid using.
 | `customRenderAction` | `(args: { value: MenuAction<ExtraProps>; isActive: boolean; origin?: ActionOrigin; }) => ReactNode` | No | — | Render prop to customize the rendering of an action. @param args.value - The action value including all extra keys fr... |
 | `customRenderFooter` | `(args: { value: MenuFooter<ExtraProps>; isActive?: boolean; }) => ReactNode` | No | — | Render prop to customize the rendering of footer items. |
 | `customRenderHeader` | `(args: { value: MenuHeader<ExtraProps>; isActive?: boolean; }) => ReactNode` | No | — | Render prop to customize the rendering of header items. |
-| `customRenderInput` | `(props: { inputRef: Ref<HTMLInputElement | HTMLTextAreaElement>; inputProps: InputTextRebuiltProps; }) => ReactNode` | No | — | Render prop to customize the rendering of the input. @param props.inputRef - The ref to the input element @param prop... |
+| `customRenderInput` | `(props: { inputRef: Ref<HTMLInputElement | HTMLTextAreaElement>; inputProps: InputTextProps; }) => ReactNode` | No | — | Render prop to customize the rendering of the input. @param props.inputRef - The ref to the input element @param prop... |
 | `customRenderLoading` | `ReactNode` | No | — | Custom render prop for content to render when `loading` is true. |
 | `customRenderOption` | `(args: { value: Value; isActive: boolean; isSelected: boolean; }) => ReactNode` | No | — | Render prop to customize the rendering of an option. @param args.value - The option value including all extra keys fr... |
 | `customRenderSection` | `(section: MenuSection<Value, ExtraProps, ExtraProps>) => ReactNode` | No | — | Render prop to customize the rendering of a section. @param args.section - The section value including all extra keys... |

package/dist/docs/Banner/Banner.md

@@ -441,8 +441,8 @@ Use `UNSAFE_style` to apply inline custom styles to the Banner.
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `backgroundColor` | `"event" | "invoice" | "job" | "quote" | "request" | "task" | "text" | "visit" | "warning" | "icon" | "disabled" | "success" | "base-grey--100" | "base-grey--200" | "base-grey--300" | ... 269 more ... | "client--onSurface"` | No | — | Sets the background color of the icon. |
-| `color` | `"task" | "text" | "warning" | "icon" | "disabled" | "success" | "blue" | "green" | "yellow" | "red" | "grey" | "white" | "greyBlue" | "lightBlue" | "orange" | "navy" | "interactive" | ... 32 more ... | "brandHighlight"` | No | — | Determines the color of the icon. Some icons have a default system colour like quotes, jobs, and invoices. Others tha... |
+| `backgroundColor` | `"event" | "invoice" | "job" | "quote" | "request" | "task" | "text" | "visit" | "warning" | "icon" | "success" | "base-grey--100" | "base-grey--200" | "base-grey--300" | "base-grey--400" | ... 269 more ... | "client--onSurface"` | No | — | Sets the background color of the icon. |
+| `color` | `"task" | "text" | "warning" | "icon" | "success" | "blue" | "green" | "yellow" | "red" | "grey" | "white" | "greyBlue" | "lightBlue" | "orange" | "navy" | "interactive" | "destructive" | ... 32 more ... | "brandHighlight"` | No | — | Determines the color of the icon. Some icons have a default system colour like quotes, jobs, and invoices. Others tha... |
 | `customColor` | `string` | No | — | Sets a custom color for the icon. Can be a rgb() or hex value. |
 | `name` | `IconNames` | No | — | The icon to show. |
 | `size` | `"base" | "large" | "small"` | No | `base` | Changes the size to small or large. |

package/dist/docs/Box/Box.md

@@ -206,9 +206,9 @@ defaults to respecting theme/modes.
 | `alignItems` | `AlignItems` | No | — | This feature is well established and works across many devices and browser versions. It’s been available across brows... |
 | `alignSelf` | `AlignSelf` | No | — | This feature is well established and works across many devices and browser versions. It’s been available across brows... |
 | `as` | `"article" | "aside" | "div" | "main" | "section" | "span"` | No | `div` |  |
-| `background` | `"event" | "invoice" | "job" | "quote" | "request" | "task" | "text" | "visit" | "warning" | "icon" | "disabled" | "success" | "base-grey--100" | "base-grey--200" | "base-grey--300" | ... 269 more ... | "client--onSurface"` | No | — |  |
+| `background` | `"event" | "invoice" | "job" | "quote" | "request" | "task" | "text" | "visit" | "warning" | "icon" | "success" | "base-grey--100" | "base-grey--200" | "base-grey--300" | "base-grey--400" | ... 269 more ... | "client--onSurface"` | No | — |  |
 | `border` | `"base" | "thick" | "thicker" | "thickest" | BoxBorderWidth` | No | — |  |
-| `borderColor` | `"event" | "invoice" | "job" | "quote" | "request" | "task" | "text" | "visit" | "warning" | "icon" | "disabled" | "success" | "base-grey--100" | "base-grey--200" | "base-grey--300" | ... 269 more ... | "client--onSurface"` | No | — |  |
+| `borderColor` | `"event" | "invoice" | "job" | "quote" | "request" | "task" | "text" | "visit" | "warning" | "icon" | "success" | "base-grey--100" | "base-grey--200" | "base-grey--300" | "base-grey--400" | ... 269 more ... | "client--onSurface"` | No | — |  |
 | `direction` | `FlexDirection` | No | — |  |
 | `gap` | `"base" | "extravagant" | "large" | "larger" | "largest" | "minuscule" | "slim" | "small" | "smaller" | "smallest"` | No | — |  |
 | `height` | `BoxDimension` | No | `auto` |  |

package/dist/docs/Glimmer/Glimmer.md

@@ -158,7 +158,7 @@ export function GlimmerSemanticBlocksExample() {
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `level` | `1 | 2 | 5 | 3 | 4` | No | `3` | Adjust the size of the `Glimmer.Header`. |
+| `level` | `1 | 2 | 3 | 4 | 5` | No | `3` | Adjust the size of the `Glimmer.Header`. |
 | `reverseTheme` | `boolean` | No | — | Use on surfaces with dark backgrounds. |
 | `timing` | `"base" | "fast"` | No | — | Control how fast the shine moves from left to right. This is useful when the glimmer is used on smaller spaces. |
 | `width` | `number` | No | — | Adjust the width of the glimmer in px values. |

package/dist/docs/Icon/Icon.md

@@ -582,7 +582,7 @@ necessary.
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `name` | `IconNames` | Yes | — | The icon to show. |
-| `color` | `"task" | "text" | "warning" | "icon" | "disabled" | "success" | "blue" | "green" | "yellow" | "red" | "grey" | "white" | "greyBlue" | "lightBlue" | "orange" | "navy" | "interactive" | ... 32 more ... | "brandHighlight"` | No | — | Determines the color of the icon. Some icons have a default system colour like quotes, jobs, and invoices. Others tha... |
+| `color` | `"task" | "text" | "warning" | "icon" | "success" | "blue" | "green" | "yellow" | "red" | "grey" | "white" | "greyBlue" | "lightBlue" | "orange" | "navy" | "interactive" | "destructive" | ... 32 more ... | "brandHighlight"` | No | — | Determines the color of the icon. Some icons have a default system colour like quotes, jobs, and invoices. Others tha... |
 | `customColor` | `string` | No | — | Sets a custom color for the icon. Can be a rgb() or hex value. |
 | `size` | `"base" | "large" | "small"` | No | `base` | Changes the size to small or large. |
 | `testID` | `string` | No | — | Used to locate this view in end-to-end tests |