@jobber/components 6.104.0 → 6.105.0

package/dist/sharedHelpers/types.d.ts

@@ -1,3 +1,8 @@
+import type { AriaAttributes, ReactNode } from "react";
+import type React from "react";
+import type { XOR } from "ts-xor";
+import type { Clearable } from "@jobber/hooks";
+import type { IconNames } from "../Icon";
 export interface CommonAtlantisProps {
     /** Standard HTML data attributes. Accepts anything in a {{"data-key":"value"}} format. */
     dataAttributes?: {
@@ -10,8 +15,234 @@ export interface CommonAtlantisProps {
     /** Standard HTML id attribute. */
     id?: string;
 }
+/**
+ * Core ARIA attributes for input elements.
+ * Uses hyphenated naming to match HTML standard syntax.
+ * Based on React's canonical ARIA type definitions.
+ */
+export interface AriaInputProps {
+    /**
+     * Defines a string value that labels the current element.
+     * @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-label}
+     */
+    readonly "aria-label"?: AriaAttributes["aria-label"];
+    /**
+     * Identifies the element (or elements) that labels the current element.
+     * @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-labelledby}
+     */
+    readonly "aria-labelledby"?: AriaAttributes["aria-labelledby"];
+    /**
+     * Identifies the element (or elements) that describes the object.
+     * @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-describedby}
+     */
+    readonly "aria-describedby"?: AriaAttributes["aria-describedby"];
+    /**
+     * Identifies the element (or elements) that provide a detailed, extended description.
+     * @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-details}
+     */
+    readonly "aria-details"?: AriaAttributes["aria-details"];
+    /**
+     * ID of the currently active descendant element.
+     * Used for composite widgets like combobox or listbox.
+     * @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-activedescendant}
+     */
+    readonly "aria-activedescendant"?: AriaAttributes["aria-activedescendant"];
+    /**
+     * Indicates the element that controls the current element.
+     * @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-controls}
+     */
+    readonly "aria-controls"?: AriaAttributes["aria-controls"];
+    /**
+     * Indicates whether the element is expanded or collapsed.
+     * @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-expanded}
+     */
+    readonly "aria-expanded"?: AriaAttributes["aria-expanded"];
+    /**
+     * Indicates the type of autocomplete interaction.
+     * @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-autocomplete}
+     */
+    readonly "aria-autocomplete"?: AriaAttributes["aria-autocomplete"];
+    /**
+     * Indicates that user input is required before form submission.
+     * @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-required}
+     */
+    readonly "aria-required"?: AriaAttributes["aria-required"];
+}
+/**
+ * Focus event handlers for input elements.
+ * Generic interface that can be specialized for different element types.
+ */
+export interface FocusEvents<Target = HTMLElement> {
+    /**
+     * Focus event handler.
+     */
+    readonly onFocus?: (event: React.FocusEvent<Target>) => void;
+    /**
+     * Blur event handler.
+     */
+    readonly onBlur?: (event: React.FocusEvent<Target>) => void;
+}
+/**
+ * Mouse event handlers for input elements.
+ * Generic interface that can be specialized for different element types.
+ */
+export interface MouseEvents<Target = HTMLElement> {
+    /**
+     * Mouse down event handler.
+     */
+    readonly onMouseDown?: (event: React.MouseEvent<Target>) => void;
+    /**
+     * Mouse up event handler.
+     */
+    readonly onMouseUp?: (event: React.MouseEvent<Target>) => void;
+    /**
+     * Pointer down event handler.
+     */
+    readonly onPointerDown?: (event: React.PointerEvent<Target>) => void;
+    /**
+     * Pointer up event handler.
+     */
+    readonly onPointerUp?: (event: React.PointerEvent<Target>) => void;
+    /**
+     * Click event handler.
+     */
+    readonly onClick?: (event: React.MouseEvent<Target>) => void;
+}
+/**
+ * Keyboard event handlers for input elements.
+ * Generic interface that can be specialized for different element types.
+ */
+export interface KeyboardEvents<Target = HTMLElement> {
+    /**
+     * Key down event handler.
+     */
+    readonly onKeyDown?: (event: React.KeyboardEvent<Target>) => void;
+    /**
+     * Key up event handler.
+     */
+    readonly onKeyUp?: (event: React.KeyboardEvent<Target>) => void;
+}
+/**
+ * Curated set of HTML input attributes for rebuilt input components.
+ * This provides a whitelist of standard HTML/React props we want to support,
+ * avoiding the issues of extending React.InputHTMLAttributes directly.
+ * Note: Event handlers and ARIA attributes are separate - use FocusEvents, KeyboardEvents, and AriaInputProps.
+ */
+export interface HTMLInputBaseProps extends AriaInputProps {
+    /**
+     * The unique identifier for the input element.
+     */
+    readonly id?: string;
+    /**
+     * The name attribute for the input element.
+     */
+    readonly name?: string;
+    /**
+     * Whether the input is disabled.
+     */
+    readonly disabled?: boolean;
+    /**
+     * Whether the input is read-only (HTML standard casing).
+     */
+    readonly readOnly?: boolean;
+    /**
+     * Whether the input should be auto-focused (React casing).
+     */
+    readonly autoFocus?: boolean;
+    /**
+     * Autocomplete behavior for the input (React casing, string values only).
+     * Use standard HTML autocomplete values or "on"/"off".
+     */
+    readonly autoComplete?: string;
+    /**
+     * Validation pattern (regex) for the input.
+     */
+    readonly pattern?: string;
+    /**
+     * Input mode hint for virtual keyboards.
+     */
+    readonly inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search";
+    /**
+     * Role attribute for accessibility.
+     */
+    readonly role?: string;
+    /**
+     * Tab index for keyboard navigation.
+     */
+    readonly tabIndex?: number;
+}
+export interface Affix {
+    readonly label?: string;
+    readonly icon?: IconNames;
+}
+interface BaseSuffix extends Affix {
+    readonly icon: IconNames;
+    onClick?(): void;
+}
+export interface Suffix extends BaseSuffix {
+    onClick(): void;
+    readonly ariaLabel: string;
+}
+/**
+ * Common props shared across all rebuilt input components.
+ * These are Atlantis-specific features not part of standard HTML inputs.
+ */
+export interface RebuiltInputCommonProps {
+    /**
+     * Text that appears inside the input when empty and floats above the value
+     * as a mini label once the user enters a value.
+     * When showMiniLabel is false, this text only serves as a standard placeholder and
+     * disappears when the user types.
+     */
+    readonly placeholder?: string;
+    /**
+     * Error message to display. This also highlights the field red.
+     */
+    readonly error?: string;
+    /**
+     * Highlights the field red to indicate an error.
+     */
+    readonly invalid?: boolean;
+    /**
+     * Show a spinner to indicate loading.
+     */
+    readonly loading?: boolean;
+    /**
+     * Add a clear action on the input that clears the value.
+     */
+    readonly clearable?: Clearable;
+    /**
+     * Adjusts the interface to either have small or large spacing.
+     */
+    readonly size?: "small" | "large";
+    /**
+     * Adjusts the form field to go inline with content.
+     */
+    readonly inline?: boolean;
+    /**
+     * Determines the alignment of the text inside the input.
+     */
+    readonly align?: "center" | "right";
+    /**
+     * Adds a prefix label and icon to the field.
+     */
+    readonly prefix?: Affix;
+    /**
+     * Adds a suffix label and icon with an optional action to the field.
+     */
+    readonly suffix?: XOR<Affix, Suffix>;
+    /**
+     * Further description of the input, can be used for a hint.
+     */
+    readonly description?: ReactNode;
+    /**
+     * Version 2 is highly experimental. Avoid using it unless you have talked with Atlantis first.
+     */
+    readonly version: 2;
+}
 /** Represents a day of the week as a number where 0 = Sunday, 1 = Monday, etc. */
 export type DayOfWeek = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 export type CommonAllowedElements = "section" | "p" | "article" | "ul" | "li" | "div" | "span" | "dl" | "dd" | "dt";
 export type Spaces = "none" | "minuscule" | "slim" | "smallest" | "smaller" | "small" | "base" | "large" | "larger" | "largest" | "extravagant";
 export type GapSpacing = Spaces | (string & NonNullable<unknown>);
+export {};

package/dist/useScrollToActive-cjs.js

@@ -3,7 +3,7 @@
 var React = require('react');
 var _commonjsHelpers = require('./_commonjsHelpers-cjs.js');
 var _baseFlatten = require('./_baseFlatten-cjs.js');
-var _baseGet = require('./_baseGet-cjs.js');
+var _getAllKeys = require('./_getAllKeys-cjs.js');
 var _baseEach = require('./_baseEach-cjs.js');
 var isTypedArray = require('./isTypedArray-cjs.js');
 var isSymbol$1 = require('./isSymbol-cjs.js');
@@ -148,8 +148,8 @@ function compareMultiple$1(object, other, orders) {
 
 var _compareMultiple = compareMultiple$1;
 
-var arrayMap = _baseGet._arrayMap,
-    baseGet = _baseGet._baseGet,
+var arrayMap = _getAllKeys._arrayMap,
+    baseGet = _getAllKeys._baseGet,
     baseIteratee = _baseEach._baseIteratee,
     baseMap = _baseMap,
     baseSortBy = _baseSortBy,

package/dist/useScrollToActive-es.js

@@ -1,14 +1,14 @@
 import React__default, { useState, useId, useEffect, useRef } from 'react';
 import { g as getDefaultExportFromCjs } from './_commonjsHelpers-es.js';
 import { _ as _baseFlatten } from './_baseFlatten-es.js';
-import { a as _arrayMap, b as _baseGet } from './_baseGet-es.js';
+import { a as _arrayMap, b as _baseGet } from './_getAllKeys-es.js';
 import { _ as _baseEach, a as _baseIteratee } from './_baseEach-es.js';
 import { b as isArrayLike_1, k as _baseUnary, a as isArray_1 } from './isTypedArray-es.js';
 import { i as isSymbol_1 } from './isSymbol-es.js';
 import { i as identity_1 } from './identity-es.js';
 import { _ as _baseRest, a as _isIterateeCall } from './_isIterateeCall-es.js';
 import { useLiveAnnounce } from '@jobber/hooks';
-import { d as debounce } from './debounce-es.js';
+import { a as debounce } from './debounce-es.js';
 import { I as Icon } from './Icon-es.js';
 import { u as useFloating, o as offset, f as flip, c as size, b as autoUpdate } from './floating-ui.react-es.js';
 import { c as calculateMaxHeight } from './maxHeight-es.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.104.0",
+  "version": "6.105.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -538,5 +538,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "f8415d7accb1a1cd52fb25cb36ab4fe022a369ea"
+  "gitHead": "928e7dfed0ad62e2c9e54e94a84d04bb2e686b6e"
 }

package/dist/InputEmail/hooks/useInputEmailFormField.d.ts

@@ -1,32 +0,0 @@
-import type { ChangeEvent, FocusEvent, KeyboardEvent, ReactNode } from "react";
-export interface UseInputEmailFormFieldProps {
-    readonly id: string;
-    readonly name: string;
-    readonly disabled?: boolean;
-    readonly autofocus?: boolean;
-    readonly error?: string;
-    readonly inline?: boolean;
-    readonly description?: ReactNode;
-    readonly invalid?: boolean;
-    readonly value?: string;
-    readonly handleChange: (event: ChangeEvent<HTMLInputElement>) => void;
-    readonly handleBlur: (event?: FocusEvent<HTMLInputElement>) => void;
-    readonly handleFocus: (event: FocusEvent<HTMLInputElement>) => void;
-    readonly handleKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
-}
-export interface UseInputEmailFormFieldReturn {
-    readonly fieldProps: {
-        readonly id: string;
-        readonly name: string;
-        readonly disabled?: boolean;
-        readonly autofocus?: boolean;
-        readonly onChange: (event: ChangeEvent<HTMLInputElement>) => void;
-        readonly onBlur: (event?: FocusEvent<HTMLInputElement>) => void;
-        readonly onFocus: (event: FocusEvent<HTMLInputElement>) => void;
-        readonly onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
-        readonly value?: string;
-        readonly "aria-describedby"?: string;
-    };
-    readonly descriptionIdentifier: string;
-}
-export declare function useInputEmailFormField({ id, name, disabled, autofocus, description, inline, value, handleChange, handleBlur, handleFocus, handleKeyDown, error, ...rest }: UseInputEmailFormFieldProps): UseInputEmailFormFieldReturn;

package/dist/InputPhoneNumber/hooks/useInputPhoneFormField.d.ts

@@ -1,71 +0,0 @@
-import type { ChangeEvent, FocusEvent, KeyboardEvent, ReactNode } from "react";
-export interface useInputPhoneFormFieldProps {
-    /**
-     * The html id for the field
-     */
-    readonly id: string;
-    /**
-     * The auto-generated name for the html input field if a nameProp is not provided
-     */
-    readonly name: string;
-    /**
-     * The error message for the field
-     */
-    readonly error?: string;
-    /**
-     * Adjusts the form field to go inline with a content. This also silences the
-     * given `validations` prop. You'd have to used the `onValidate` prop to
-     * capture the message and render it somewhere else using the
-     * `InputValidation` component.
-     */
-    readonly inline?: boolean;
-    /**
-     * Further description of the input, can be used for a hint.
-     */
-    readonly description?: ReactNode;
-    /**
-     * Callback for when the field value changes
-     */
-    handleChange: (event: ChangeEvent<HTMLInputElement>) => void;
-    /**
-     * Callback for when the field loses focus
-     */
-    handleBlur: () => void;
-    /**
-     * Callback for when the field gains focus
-     */
-    handleFocus: (event: FocusEvent<HTMLInputElement>) => void;
-    /**
-     * Callback for when keydown event is triggered on the field
-     */
-    handleKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
-    readonly invalid?: boolean;
-    readonly disabled?: boolean;
-    readonly autofocus?: boolean;
-    readonly value?: string;
-    readonly readonly?: boolean;
-}
-export interface UseInputPhoneFormFieldReturn {
-    fieldProps: React.InputHTMLAttributes<HTMLInputElement>;
-}
-/**
- * Provides the props for the html fields rendered by the html input.
- *  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.
- */
-export declare function useInputPhoneFormField({ id, name, description, inline, handleChange, handleBlur, handleFocus, handleKeyDown, error, disabled, autofocus, value, readonly, ...rest }: useInputPhoneFormFieldProps): {
-    fieldProps: {
-        readOnly: boolean | undefined;
-        "aria-describedby"?: string | undefined;
-        id: string;
-        name: string;
-        disabled: boolean | undefined;
-        autoFocus: boolean | undefined;
-        onChange: (event: ChangeEvent<HTMLInputElement>) => void;
-        onBlur: () => void;
-        onFocus: (event: FocusEvent<HTMLInputElement>) => void;
-        onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
-        value: string | undefined;
-        invalid: string | undefined;
-    };
-    descriptionIdentifier: string;
-};