@jobber/components 8.3.0 → 8.5.0

package/ActivityIndicator.d.ts

@@ -0,0 +1 @@
+export * from "./dist/ActivityIndicator";

package/ActivityIndicator.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+var ActivityIndicator = require("./dist/ActivityIndicator");
+
+Object.keys(ActivityIndicator).forEach(function(key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return ActivityIndicator[key];
+    },
+  });
+});

package/dist/ActivityIndicator/ActivityIndicator.d.ts

@@ -0,0 +1,38 @@
+import React from "react";
+import type { CSSProperties } from "react";
+export interface ActivityIndicatorProps {
+    /**
+     * Visual size. `base` renders at 32px, `small` renders at 16px.
+     *
+     * @default "base"
+     */
+    readonly size?: "small" | "base";
+    /**
+     * Accessible label exposed via `aria-label` on the root element. Override
+     * to localize or to describe the specific activity (e.g. "Uploading file").
+     *
+     * @default "Loading"
+     */
+    readonly ariaLabel?: string;
+    /**
+     * Custom class name merged onto the root element alongside the component's
+     * own classes.
+     */
+    readonly className?: string;
+    /**
+     * Custom inline styles applied to the root element.
+     */
+    readonly style?: CSSProperties;
+}
+/**
+ * `ActivityIndicator` communicates an indeterminate activity that the user
+ * cannot directly control or measure — loading, fetching, or waiting on an
+ * external system.
+ *
+ * For determinate progress (a known fraction completed), use
+ * `ProgressIndicator` instead (forthcoming).
+ *
+ * For now, the legacy `Spinner` component also remains available; new code
+ * should prefer `ActivityIndicator`.
+ */
+export declare function ActivityIndicator({ size, ariaLabel, className, style, }: ActivityIndicatorProps): React.JSX.Element;

package/dist/ActivityIndicator/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var ActivityIndicator = require('../ActivityIndicator-cjs.js');
+require('react');
+require('classnames');
+
+
+
+exports.ActivityIndicator = ActivityIndicator.ActivityIndicator;

package/dist/ActivityIndicator/index.d.ts

@@ -0,0 +1,2 @@
+export { ActivityIndicator } from "./ActivityIndicator";
+export type { ActivityIndicatorProps } from "./ActivityIndicator";

package/dist/ActivityIndicator/index.mjs

@@ -0,0 +1,3 @@
+export { A as ActivityIndicator } from '../ActivityIndicator-es.js';
+import 'react';
+import 'classnames';

package/dist/ActivityIndicator-cjs.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+
+var styles = {"indicator":"YST686vLR3c-","screenReaderOnly":"MmNHh-oCyxc-","small":"_888S5Y2IeZ8-","svg":"Av9z-aLocss-","indicatorLinearRotate":"WvHFS--Nm80-","track":"VDTWabJptKI-","arc":"_9XO0290QNCY-","indicatorRotateArc":"SHHICknKvqA-","indicatorExpandArc":"_0m0Nzc5awnA-","indicatorReducedPulse":"_4dXQsbprq3s-","spinning":"IZCteJUCKio-"};
+
+/**
+ * `ActivityIndicator` communicates an indeterminate activity that the user
+ * cannot directly control or measure — loading, fetching, or waiting on an
+ * external system.
+ *
+ * For determinate progress (a known fraction completed), use
+ * `ProgressIndicator` instead (forthcoming).
+ *
+ * For now, the legacy `Spinner` component also remains available; new code
+ * should prefer `ActivityIndicator`.
+ */
+function ActivityIndicator({ size = "base", ariaLabel = "Loading", className, style, }) {
+    return (React.createElement("div", { role: "status", "aria-label": ariaLabel, className: classnames(styles.indicator, size === "small" && styles.small, className), style: style },
+        React.createElement("span", { className: styles.screenReaderOnly }, ariaLabel),
+        React.createElement("svg", { className: styles.svg, viewBox: "0 0 48 48", focusable: "false", "aria-hidden": "true" },
+            React.createElement("circle", { className: styles.track, cx: "24", cy: "24", r: "20" }),
+            React.createElement("circle", { className: styles.arc, cx: "24", cy: "24", r: "20" }))));
+}
+
+exports.ActivityIndicator = ActivityIndicator;

package/dist/ActivityIndicator-es.js

@@ -0,0 +1,25 @@
+import React__default from 'react';
+import classnames from 'classnames';
+
+var styles = {"indicator":"YST686vLR3c-","screenReaderOnly":"MmNHh-oCyxc-","small":"_888S5Y2IeZ8-","svg":"Av9z-aLocss-","indicatorLinearRotate":"WvHFS--Nm80-","track":"VDTWabJptKI-","arc":"_9XO0290QNCY-","indicatorRotateArc":"SHHICknKvqA-","indicatorExpandArc":"_0m0Nzc5awnA-","indicatorReducedPulse":"_4dXQsbprq3s-","spinning":"IZCteJUCKio-"};
+
+/**
+ * `ActivityIndicator` communicates an indeterminate activity that the user
+ * cannot directly control or measure — loading, fetching, or waiting on an
+ * external system.
+ *
+ * For determinate progress (a known fraction completed), use
+ * `ProgressIndicator` instead (forthcoming).
+ *
+ * For now, the legacy `Spinner` component also remains available; new code
+ * should prefer `ActivityIndicator`.
+ */
+function ActivityIndicator({ size = "base", ariaLabel = "Loading", className, style, }) {
+    return (React__default.createElement("div", { role: "status", "aria-label": ariaLabel, className: classnames(styles.indicator, size === "small" && styles.small, className), style: style },
+        React__default.createElement("span", { className: styles.screenReaderOnly }, ariaLabel),
+        React__default.createElement("svg", { className: styles.svg, viewBox: "0 0 48 48", focusable: "false", "aria-hidden": "true" },
+            React__default.createElement("circle", { className: styles.track, cx: "24", cy: "24", r: "20" }),
+            React__default.createElement("circle", { className: styles.arc, cx: "24", cy: "24", r: "20" }))));
+}
+
+export { ActivityIndicator as A };

package/dist/Autocomplete/Autocomplete.d.ts

@@ -1,6 +1,8 @@
-import type { Ref, RefAttributes } from "react";
+import type { Ref } from "react";
 import React from "react";
-import { type AnyOption, type AutocompleteLegacyProps, type Option } from "./Autocomplete.types";
-declare function AutocompleteInternal<GenericOption extends AnyOption = AnyOption, GenericOptionValue extends Option = Option, GenericGetOptionsValue extends AnyOption = AnyOption>({ initialOptions, value, allowFreeForm, size, debounce: debounceRate, onChange, getOptions, placeholder, onBlur, onFocus, customRenderMenu, ...inputProps }: AutocompleteLegacyProps<GenericOption, GenericOptionValue, GenericGetOptionsValue>, ref: Ref<HTMLInputElement>): React.JSX.Element;
-export declare const Autocomplete: <GenericOption extends AnyOption = AnyOption, GenericOptionValue extends Option = Option, GenericGetOptionsValue extends AnyOption = AnyOption>(props: AutocompleteLegacyProps<GenericOption, GenericOptionValue, GenericGetOptionsValue> & RefAttributes<HTMLInputElement>) => ReturnType<typeof AutocompleteInternal>;
+import type { AutocompleteProps, OptionLike } from "./Autocomplete.types";
+export declare const Autocomplete: <Value extends OptionLike = OptionLike, Multiple extends boolean = false>(props: AutocompleteProps<Value, Multiple> & {
+    ref?: Ref<HTMLInputElement | HTMLTextAreaElement>;
+}) => ReturnType<typeof AutocompleteInternal>;
+declare function AutocompleteInternal<Value extends OptionLike, Multiple extends boolean = false>(props: AutocompleteProps<Value, Multiple>, forwardedRef: Ref<HTMLInputElement | HTMLTextAreaElement>): React.JSX.Element;
 export {};

package/dist/Autocomplete/Autocomplete.types.d.ts

@@ -1,8 +1,7 @@
-import type { CSSProperties, Key, Ref, RefObject } from "react";
+import type { CSSProperties, Key, Ref } from "react";
 import type { UseAutocompleteListNavReturn } from "./hooks/useAutocompleteListNav";
 import type { createInteractionPointerDownHandler } from "./utils/interactionUtils";
 import type { AriaInputProps, FocusEvents, HTMLInputBaseProps, RebuiltInputCommonProps } from "../sharedHelpers/types";
-import type { FormFieldProps } from "../FormField";
 import type { InputTextProps } from "../InputText";
 /**
  * ARIA attributes for Autocomplete with managed/orchestrated behavior.
@@ -12,139 +11,6 @@ import type { InputTextProps } from "../InputText";
 interface AriaInputPropsManaged extends Omit<AriaInputProps, "aria-controls" | "aria-expanded" | "aria-activedescendant" | "aria-autocomplete"> {
 }
 export type ExtraProps = Record<string, unknown>;
-type OptionValue = string | number;
-export interface BaseOption {
-    label: string;
-}
-export interface Option extends BaseOption {
-    value?: OptionValue;
-    description?: string;
-    details?: string;
-}
-export interface GroupOption extends BaseOption {
-    options: Option[];
-}
-export type OptionCollection = AnyOption[];
-export type AnyOption<GenericOption extends Option | GroupOption = Option | GroupOption> = GenericOption;
-export type OptionInGroup<T extends AnyOption> = T extends GroupOption ? T["options"][number] : T;
-export interface AutocompleteBaseProps<GenericOption extends AnyOption = AnyOption, GenericOptionValue extends Option = Option, GenericGetOptionsValue extends AnyOption = AnyOption> extends Pick<FormFieldProps, "clearable" | "description" | "invalid" | "name" | "onBlur" | "onFocus" | "prefix" | "size" | "suffix"> {
-    /**
-     * @deprecated
-     * Use `ref` instead.
-     */
-    readonly inputRef?: FormFieldProps["inputRef"];
-    readonly initialOptions?: GenericOption[];
-    /**
-     * Set Autocomplete value.
-     */
-    readonly value: GenericOptionValue | undefined;
-    /**
-     * Allow the autocomplete to use values not from the drop down menu.
-     *
-     * @default true
-     */
-    readonly allowFreeForm?: boolean;
-    /**
-     * Debounce in milliseconds for getOptions
-     *
-     * @default 300
-     */
-    readonly debounce?: number;
-    /**
-     * Simplified onChange handler that only provides the new value.
-     * @param newValue
-     */
-    onChange(newValue?: GenericOptionValue): void;
-    /**
-     * Called as the user types in the input. The autocomplete will display what
-     * is returned from this method to the user as available options.
-     * @param newInputText
-     */
-    getOptions(newInputText: string): Array<GenericGetOptionsValue | GenericOption> | Promise<Array<GenericGetOptionsValue | GenericOption>>;
-    /**
-     * Hint text that goes above the value once the form is filled out.
-     */
-    readonly placeholder: string;
-    /**
-     * Override the content rendered in the menu.
-     */
-    readonly customRenderMenu?: (props: CustomOptionsMenuProp<GenericOption | GenericGetOptionsValue, GenericOptionValue>) => React.ReactElement;
-}
-/**
- * @deprecated Use the v2 Autocomplete component instead (version={2}).
- */
-export interface AutocompleteLegacyProps<GenericOption extends AnyOption = AnyOption, GenericOptionValue extends Option = Option, GenericGetOptionsValue extends AnyOption = AnyOption> extends AutocompleteBaseProps<GenericOption, GenericOptionValue, GenericGetOptionsValue> {
-    /**
-     * Version of the component to use.
-     * @default 1
-     */
-    readonly version?: 1;
-    /**
-     * @deprecated
-     * Use `ref` instead.
-     */
-    readonly inputRef?: FormFieldProps["inputRef"];
-    /**
-     * Initial options to display in the autocomplete.
-     */
-    readonly initialOptions?: GenericOption[];
-    /**
-     * Called as the user types in the input. The autocomplete will display what
-     * is returned from this method to the user as available options.
-     * @param newInputText
-     */
-    readonly getOptions: (newInputText: string) => Array<GenericGetOptionsValue | GenericOption> | Promise<Array<GenericGetOptionsValue | GenericOption>>;
-}
-export type AutocompleteProps<GenericOption extends AnyOption = AnyOption, GenericOptionValue extends Option = Option, GenericGetOptionsValue extends AnyOption = AnyOption> = AutocompleteLegacyProps<GenericOption, GenericOptionValue, GenericGetOptionsValue>;
-export type CustomOptionsMenuType<GenericOption extends AnyOption = AnyOption> = (props: CustomOptionsMenuProp<GenericOption>) => React.ReactElement;
-export interface MenuProps<GenericOption extends AnyOption = AnyOption, GenericOptionValue extends Option = Option> {
-    readonly options: GenericOption[];
-    readonly selectedOption?: GenericOptionValue;
-    readonly inputFocused: boolean;
-    /**
-     * Element that the menu is attached to when the menu opens.
-     */
-    readonly attachTo: HTMLDivElement | null;
-    /**
-     * Ref to the TextInput element.
-     */
-    readonly inputRef: RefObject<HTMLInputElement | null>;
-    onOptionSelect(chosenOption?: GenericOptionValue): void;
-    readonly customRenderMenu?: (props: CustomOptionsMenuProp<GenericOption, GenericOptionValue>) => React.ReactElement;
-}
-export interface CustomOptionsMenuProp<GenericOption extends AnyOption = AnyOption, GenericOptionValue extends Option = Option> {
-    /**
-     * The options to display in the menu
-     */
-    options: Array<OptionInGroup<GenericOption> | GenericOption>;
-    /**
-     * The currently selected option
-     */
-    selectedOption?: GenericOptionValue;
-    /**
-     * The HTML element that wraps the menu content. Used for handling keyboard scroll behavior.
-     */
-    readonly menuRef: HTMLElement | null | undefined;
-    /**
-     * Callback to select an option
-     */
-    readonly onOptionSelect: (chosenOption?: GenericOptionValue) => void;
-    /**
-     * Determine if the input is focused. Can be used to conditionally render the menu.
-     */
-    readonly inputFocused: boolean;
-    /**
-     * Ref to the TextInput element.
-     */
-    readonly inputRef: RefObject<HTMLInputElement | HTMLTextAreaElement | null>;
-    /**
-     * Component that wraps the menu content. Used for handling keyboard scroll behavior.
-     */
-    readonly MenuWrapper: (props: {
-        children: React.ReactNode;
-        visible: boolean;
-    }) => React.ReactElement;
-}
 export interface OptionLike {
     label: string;
     /**
@@ -230,7 +96,7 @@ export type MenuFooter<Extra extends object = ExtraProps> = Extra & {
 };
 export type MenuItem<T extends OptionLike, SectionExtra extends object = ExtraProps, ActionExtra extends object = ExtraProps> = MenuSection<T, SectionExtra, ActionExtra> | MenuOptions<T, ActionExtra> | MenuHeader<ActionExtra> | MenuFooter<ActionExtra>;
 export type AutocompleteValue<Value extends OptionLike, Multiple extends boolean> = Multiple extends true ? Value[] : Value | undefined;
-interface AutocompleteRebuiltBaseProps<Value extends OptionLike, Multiple extends boolean, SectionExtra extends object, ActionExtra extends object> extends AriaInputPropsManaged, Pick<HTMLInputBaseProps, "name" | "disabled" | "readOnly" | "autoFocus">, Pick<RebuiltInputCommonProps, "placeholder" | "error" | "invalid" | "loading" | "clearable" | "description" | "size" | "prefix" | "suffix" | "version">, FocusEvents<HTMLInputElement | HTMLTextAreaElement> {
+interface AutocompleteBaseProps<Value extends OptionLike, Multiple extends boolean, SectionExtra extends object, ActionExtra extends object> extends AriaInputPropsManaged, Pick<HTMLInputBaseProps, "name" | "disabled" | "readOnly" | "autoFocus">, Pick<RebuiltInputCommonProps, "placeholder" | "error" | "invalid" | "loading" | "clearable" | "description" | "size" | "prefix" | "suffix">, FocusEvents<HTMLInputElement | HTMLTextAreaElement> {
     /**
      * Whether the autocomplete allows multiple selections.
      * When true, selected values are displayed as dismissible chips above the input.
@@ -486,7 +352,7 @@ interface FreeFormOn<Value extends OptionLike, Multiple extends boolean> {
     readonly onChange: (value: AutocompleteValue<Value, Multiple>) => void;
 }
 export type ActionOrigin = "menu" | "empty";
-export type AutocompleteRebuiltProps<Value extends OptionLike = OptionLike, Multiple extends boolean = false, SectionExtra extends object = ExtraProps, ActionExtra extends object = ExtraProps> = AutocompleteRebuiltBaseProps<Value, Multiple, SectionExtra, ActionExtra> & (FreeFormOn<Value, Multiple> | FreeFormOff<Value, Multiple>);
+export type AutocompleteProps<Value extends OptionLike = OptionLike, Multiple extends boolean = false, SectionExtra extends object = ExtraProps, ActionExtra extends object = ExtraProps> = AutocompleteBaseProps<Value, Multiple, SectionExtra, ActionExtra> & (FreeFormOn<Value, Multiple> | FreeFormOff<Value, Multiple>);
 export declare const menuOptions: <T extends OptionLike, ActionExtra extends object = ExtraProps>(options: T[], actions?: MenuAction<ActionExtra>[]) => MenuOptions<T, ActionExtra>;
 export declare const menuSection: <T extends OptionLike, SectionExtra extends object = ExtraProps, ActionExtra extends object = ExtraProps>(label: string, options: T[], actions?: MenuAction<ActionExtra>[], extra?: SectionExtra) => MenuSection<T, SectionExtra, ActionExtra>;
 export declare function defineMenu<T extends OptionLike, S extends object = ExtraProps, A extends object = ExtraProps>(menu: MenuItem<T, S, A>[]): MenuItem<T, S, A>[];

package/dist/Autocomplete/components/FloatingMenu.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import type { UseFloatingReturn, UseInteractionsReturn } from "@floating-ui/react";
-import type { ActionConfig, AutocompleteRebuiltProps, MenuFooter, MenuHeader, OptionLike, RenderItem } from "../Autocomplete.types";
+import type { ActionConfig, AutocompleteProps, MenuFooter, MenuHeader, OptionLike, RenderItem } from "../Autocomplete.types";
 interface FloatingMenuProps<Value extends OptionLike> {
     readonly context: UseFloatingReturn["context"];
     readonly getFloatingProps: UseInteractionsReturn["getFloatingProps"];
@@ -27,11 +27,11 @@ interface FloatingMenuProps<Value extends OptionLike> {
     readonly showEmptyStateMessage: boolean;
     readonly emptyStateMessage?: React.ReactNode;
     readonly customRenderLoading?: React.ReactNode;
-    readonly customRenderOption?: AutocompleteRebuiltProps<Value, false>["customRenderOption"];
-    readonly customRenderSection?: AutocompleteRebuiltProps<Value, false>["customRenderSection"];
-    readonly customRenderAction?: AutocompleteRebuiltProps<Value, false>["customRenderAction"];
-    readonly customRenderHeader?: AutocompleteRebuiltProps<Value, false>["customRenderHeader"];
-    readonly customRenderFooter?: AutocompleteRebuiltProps<Value, false>["customRenderFooter"];
+    readonly customRenderOption?: AutocompleteProps<Value, false>["customRenderOption"];
+    readonly customRenderSection?: AutocompleteProps<Value, false>["customRenderSection"];
+    readonly customRenderAction?: AutocompleteProps<Value, false>["customRenderAction"];
+    readonly customRenderHeader?: AutocompleteProps<Value, false>["customRenderHeader"];
+    readonly customRenderFooter?: AutocompleteProps<Value, false>["customRenderFooter"];
     readonly slotOverrides?: {
         option?: {
             className?: string;

package/dist/Autocomplete/components/MenuList.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { ActionConfig, AutocompleteRebuiltProps, OptionLike, RenderItem } from "../Autocomplete.types";
+import type { ActionConfig, AutocompleteProps, OptionLike, RenderItem } from "../Autocomplete.types";
 interface MenuListProps<T extends OptionLike> {
     readonly items: Array<RenderItem<T>>;
     readonly activeIndex: number | null;
@@ -7,9 +7,9 @@ interface MenuListProps<T extends OptionLike> {
     readonly getItemProps: (userProps?: Record<string, unknown>) => Record<string, unknown>;
     readonly listRef: React.RefObject<Array<HTMLElement | null>>;
     readonly listboxId: string;
-    readonly customRenderOption?: AutocompleteRebuiltProps<T, false>["customRenderOption"];
-    readonly customRenderSection?: AutocompleteRebuiltProps<T, false>["customRenderSection"];
-    readonly customRenderAction?: AutocompleteRebuiltProps<T, false>["customRenderAction"];
+    readonly customRenderOption?: AutocompleteProps<T, false>["customRenderOption"];
+    readonly customRenderSection?: AutocompleteProps<T, false>["customRenderSection"];
+    readonly customRenderAction?: AutocompleteProps<T, false>["customRenderAction"];
     readonly getOptionLabel: (option: T) => string;
     readonly onSelect: (option: T) => void;
     readonly onAction: (action: ActionConfig) => void;

package/dist/Autocomplete/components/PersistentRegion.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { ActionConfig, AutocompleteRebuiltProps, MenuFooter, MenuHeader, OptionLike } from "../Autocomplete.types";
+import type { ActionConfig, AutocompleteProps, MenuFooter, MenuHeader, OptionLike } from "../Autocomplete.types";
 interface PersistentRegionProps<T extends OptionLike> {
     readonly items: Array<MenuHeader<Record<string, unknown>> | MenuFooter<Record<string, unknown>>>;
     readonly position: "header" | "footer";
@@ -8,8 +8,8 @@ interface PersistentRegionProps<T extends OptionLike> {
     readonly listboxId?: string;
     readonly getItemProps: (args?: Record<string, unknown>) => Record<string, unknown>;
     readonly listRef: React.RefObject<Array<HTMLElement | null>>;
-    readonly customRenderHeader?: AutocompleteRebuiltProps<T, false>["customRenderHeader"];
-    readonly customRenderFooter?: AutocompleteRebuiltProps<T, false>["customRenderFooter"];
+    readonly customRenderHeader?: AutocompleteProps<T, false>["customRenderHeader"];
+    readonly customRenderFooter?: AutocompleteProps<T, false>["customRenderFooter"];
     readonly className?: string;
     readonly style?: React.CSSProperties;
     readonly onAction: (action: ActionConfig) => void;