@jobber/components 6.101.4 → 6.101.5-JOB-140604-4487daa.55

package/dist/InputText/index.mjs

@@ -1,13 +1,13 @@
 import React__default, { forwardRef, useRef, useImperativeHandle, useId } from 'react';
 import { useSafeLayoutEffect } from '@jobber/hooks';
-import { k as FormField, s as styles, j as useFormFieldWrapperStyles, b as useAtlantisFormFieldName, f as FormFieldWrapper, l as FormFieldPostFix, m as mergeRefs } from '../FormField-es.js';
+import { k as FormField, b as useAtlantisFormFieldName, l as formFieldStyles, n as mergeRefs, f as FormFieldWrapper, m as FormFieldPostFix } from '../FormField-es.js';
 import 'classnames';
-import { _ as __rest } from '../tslib.es6-es.js';
+import '../tslib.es6-es.js';
 import 'react-hook-form';
 import 'framer-motion';
 import '@jobber/design';
 import '../Button-es.js';
-import { o as omit } from '../omit-es.js';
+import { f as filterDataAttributes } from '../filterDataAttributes-es.js';
 import '../Icon-es.js';
 import '../Text-es.js';
 import '../Typography-es.js';
@@ -15,17 +15,6 @@ import '../useFormFieldFocus-es.js';
 import '../InputValidation-es.js';
 import '../Spinner-es.js';
 import 'react-router-dom';
-import '../_commonjsHelpers-es.js';
-import '../_baseGet-es.js';
-import '../isTypedArray-es.js';
-import '../isObjectLike-es.js';
-import '../identity-es.js';
-import '../_getTag-es.js';
-import '../isSymbol-es.js';
-import '../keysIn-es.js';
-import '../_baseAssignValue-es.js';
-import '../_baseFlatten-es.js';
-import '../_setToString-es.js';
 
 /**
  * Hook for resizing a textarea based on its content. The textarea will grow up to the max number of rows specified.
@@ -157,10 +146,9 @@ function insertAtCursor(input, newText) {
  * 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, }) {
+function useInputTextActions({ onChange, inputRef, onEnter, onFocus, onBlur, onKeyDown, onKeyUp, onMouseDown, onMouseUp, onPointerDown, onPointerUp, onClick, }) {
     function handleClear() {
         var _a;
-        handleBlur();
         onChange && onChange("");
         (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }
@@ -179,38 +167,48 @@ function useInputTextActions({ onChange, inputRef, onEnter, onFocus, onBlur, onK
         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,
     };
 }
 
-/**
- * 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.
- */
-function useInputTextFormField(_a) {
-    var { id, name, description, inline, handleChange, handleBlur, handleFocus, handleKeyDown, error } = _a, rest = __rest(_a, ["id", "name", "description", "inline", "handleChange", "handleBlur", "handleFocus", "handleKeyDown", "error"]);
-    const descriptionIdentifier = `descriptionUUID--${id}`;
-    const fieldProps = Object.assign(Object.assign(Object.assign(Object.assign({}, rest), { id, className: styles.input, name, disabled: rest.disabled, inputMode: rest.inputMode, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus }), (description &&
-        !inline && { "aria-describedby": descriptionIdentifier })), { "aria-invalid": rest["aria-invalid"] || error || rest.invalid ? true : undefined, autoFocus: rest.autoFocus, invalid: error || rest.invalid ? "true" : undefined, onKeyDown: handleKeyDown });
-    return { fieldProps, descriptionIdentifier };
-}
-
-const InputTextSPAR = forwardRef(function InputTextInternal(props, inputRefs) {
+const InputTextSPAR = forwardRef(function InputTextInternal(props, inputRef) {
     var _a, _b, _c;
-    const inputTextRef = React__default.useRef(null);
-    const wrapperRef = React__default.useRef(null);
-    const legacyPropHelper = Object.assign(Object.assign({}, props), { version: 1 });
+    const inputTextRef = React__default.useRef(null), wrapperRef = React__default.useRef(null);
     const id = useInputTextId(props);
     const { rowRange } = useTextAreaResize({
         rows: props.rows,
@@ -218,54 +216,48 @@ const InputTextSPAR = forwardRef(function InputTextInternal(props, inputRefs) {
         inputRef: inputTextRef,
         wrapperRef: wrapperRef,
     });
-    const type = props.multiline ? "textarea" : "text";
-    const { inputStyle } = useFormFieldWrapperStyles(legacyPropHelper);
     const { name } = useAtlantisFormFieldName({
         nameProp: props.name,
         id: id,
     });
-    const { handleChange, handleBlur, handleFocus, handleKeyDown, handleClear } = useInputTextActions({
+    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 inputProps = omit(props, [
-        "onChange",
-        "onBlur",
-        "onFocus",
-        "onEnter",
-        "size",
-        "placeholder",
-        "multiline",
-        "prefix",
-        "suffix",
-        "version",
-    ]);
-    const { fieldProps, descriptionIdentifier } = useInputTextFormField(Object.assign(Object.assign({}, inputProps), { id,
-        name,
-        handleChange,
-        handleBlur,
-        handleFocus,
-        handleKeyDown }));
-    return (React__default.createElement(FormFieldWrapper, { disabled: props.disabled, size: props.size, align: props.align, inline: props.inline, autofocus: props.autoFocus, 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, rows: rowRange.min, toolbar: props.toolbar, toolbarVisibility: props.toolbarVisibility },
+    const descriptionIdentifier = `descriptionUUID--${id}`;
+    const descriptionVisible = props.description && !props.inline;
+    const isInvalid = Boolean(props.error || props.invalid);
+    const dataAttrs = filterDataAttributes(props);
+    // 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, 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: mergeRefs([inputRef, inputTextRef]) }, 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 },
         React__default.createElement(React__default.Fragment, null,
-            type === "textarea" ? (React__default.createElement(TextArea, { fieldProps: fieldProps, rowRange: rowRange, inputRefs: [inputRefs, inputTextRef], value: props.value, inputStyle: inputStyle })) : (React__default.createElement(TextInput, { fieldProps: fieldProps, inputRefs: [inputRefs, inputTextRef], value: props.value, inputStyle: inputStyle })),
-            React__default.createElement(FormFieldPostFix, { variation: "spinner", visible: (_c = props.loading) !== null && _c !== void 0 ? _c : false }),
-            props.children)));
+            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;
 }
-function TextArea({ fieldProps, rowRange, inputRefs, value, inputStyle, }) {
-    return (React__default.createElement("textarea", Object.assign({}, fieldProps, { rows: rowRange.min, ref: mergeRefs(inputRefs), className: inputStyle, value: value })));
-}
-function TextInput({ fieldProps, inputRefs, value, inputStyle, }) {
-    return (React__default.createElement("input", Object.assign({}, fieldProps, { ref: mergeRefs(inputRefs), className: inputStyle, value: value })));
-}
+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 }));
+});
 
 function isNewInputTextProps(props) {
     return props.version === 2;

package/dist/InputText/useInputTextActions.d.ts

@@ -1,16 +1,22 @@
-import type { ChangeEvent, FocusEvent, KeyboardEvent } from "react";
+import type { ChangeEvent, FocusEvent, KeyboardEvent, MouseEvent, PointerEvent } from "react";
 import type { InputTextRebuiltProps } from "./InputText.types";
-export interface useInputTextActionsProps extends Pick<InputTextRebuiltProps, "onChange" | "onEnter" | "onFocus" | "onBlur" | "onKeyDown"> {
-    inputRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement>;
+export interface useInputTextActionsProps extends Pick<InputTextRebuiltProps, "onChange" | "onEnter" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "onMouseDown" | "onMouseUp" | "onPointerDown" | "onPointerUp" | "onClick"> {
+    inputRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement | null>;
 }
 /**
  * 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.
  */
-export declare function useInputTextActions({ onChange, inputRef, onEnter, onFocus, onBlur, onKeyDown, }: useInputTextActionsProps): {
+export declare function useInputTextActions({ onChange, inputRef, onEnter, onFocus, onBlur, onKeyDown, onKeyUp, onMouseDown, onMouseUp, onPointerDown, onPointerUp, onClick, }: useInputTextActionsProps): {
     handleClear: () => void;
     handleChange: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     handleKeyDown: (event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    handleKeyUp: (event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     handleFocus: (event: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
-    handleBlur: (event?: FocusEvent) => void;
+    handleBlur: (event: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    handleMouseDown: (event: MouseEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    handleMouseUp: (event: MouseEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    handlePointerDown: (event: PointerEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    handlePointerUp: (event: PointerEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    handleClick: (event: MouseEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
 };

package/dist/InputText/useTextAreaResize.d.ts

@@ -6,8 +6,8 @@ import type { RowRange } from "./InputText.types";
 export declare function useTextAreaResize({ rows, value, inputRef, wrapperRef, }: {
     rows?: number | RowRange;
     value: string | number | Date | undefined;
-    inputRef: RefObject<HTMLTextAreaElement | HTMLInputElement>;
-    wrapperRef: RefObject<HTMLDivElement>;
+    inputRef: RefObject<HTMLTextAreaElement | HTMLInputElement | null>;
+    wrapperRef: RefObject<HTMLDivElement | null>;
 }): {
     resize: () => void;
     rowRange: RowRange;

package/dist/InputTime/InputTime.rebuilt.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import type { InputTimeRebuiltProps } from "./InputTime.types";
-export declare function InputTimeRebuilt({ value, onChange, ...params }: InputTimeRebuiltProps): React.JSX.Element;
+export declare function InputTimeRebuilt({ value, onChange, readOnly, autoComplete, inputRef, ...props }: InputTimeRebuiltProps): React.JSX.Element;

package/dist/InputTime/InputTime.types.d.ts

@@ -1,4 +1,5 @@
 import type { CommonFormFieldProps, FormFieldProps } from "../FormField";
+import type { FocusEvents, HTMLInputBaseProps, KeyboardEvents, MouseEvents, RebuiltInputCommonProps } from "../sharedHelpers/types";
 export interface InputTimeProps extends Pick<CommonFormFieldProps, "id" | "align" | "description" | "disabled" | "invalid" | "inline" | "loading" | "name" | "onValidation" | "placeholder" | "size" | "clearable">, Pick<FormFieldProps, "maxLength" | "readonly" | "autocomplete" | "max" | "min" | "onEnter" | "onFocus" | "onBlur" | "inputRef" | "validations"> {
     /**
      * Intial value of the input. Only use this when you need to prepopulate the
@@ -18,10 +19,18 @@ export interface InputTimeProps extends Pick<CommonFormFieldProps, "id" | "align
 export interface InputTimeLegacyProps extends InputTimeProps {
     version?: 1;
 }
-export interface InputTimeRebuiltProps extends Omit<InputTimeProps, "defaultValue" | "version" | "validations" | "onValidation"> {
+export interface InputTimeRebuiltProps extends HTMLInputBaseProps, FocusEvents<HTMLInputElement>, KeyboardEvents<HTMLInputElement>, MouseEvents<HTMLInputElement>, RebuiltInputCommonProps, Pick<InputTimeProps, "value" | "onChange"> {
     /**
-     * Version 2 is highly experimental, avoid using it unless you have talked with Atlantis first.
+     * Maximum numerical or date value.
      */
-    version: 2;
-    error?: string;
+    readonly max?: number;
+    /**
+     * Minimum numerical or date value.
+     */
+    readonly min?: number;
+    readonly inputRef?: FormFieldProps["inputRef"];
+    /**
+     * @deprecated Use `onKeyDown` or `onKeyUp` instead.
+     */
+    readonly onEnter?: FormFieldProps["onEnter"];
 }

package/dist/InputTime/hooks/useInputTimeActions.d.ts

@@ -0,0 +1,21 @@
+import type { ChangeEvent, FocusEvent, KeyboardEvent, MouseEvent, PointerEvent } from "react";
+import type { InputTimeRebuiltProps } from "../InputTime.types";
+export interface UseInputTimeActionsProps extends Pick<InputTimeRebuiltProps, "onChange" | "onFocus" | "onBlur" | "onKeyDown" | "onClick" | "onMouseDown" | "onMouseUp" | "onPointerDown" | "onPointerUp"> {
+    readonly value?: Date;
+    readonly readOnly?: boolean;
+    readonly disabled?: boolean;
+    readonly inputRef?: React.RefObject<HTMLInputElement | null>;
+}
+export declare function useInputTimeActions({ onChange, value, inputRef, onFocus, onBlur, onKeyDown, onClick, onMouseDown, onMouseUp, onPointerDown, onPointerUp, }: UseInputTimeActionsProps): {
+    handleChangeEvent: (event: ChangeEvent<HTMLInputElement>) => void;
+    handleChange: (newValue: string) => void;
+    handleBlur: (event: FocusEvent<HTMLInputElement>) => void;
+    handleClear: () => void;
+    handleFocus: (event: FocusEvent<HTMLInputElement>) => void;
+    handleKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
+    handleClick: (event: MouseEvent<HTMLInputElement>) => void;
+    handleMouseDown: (event: MouseEvent<HTMLInputElement>) => void;
+    handleMouseUp: (event: MouseEvent<HTMLInputElement>) => void;
+    handlePointerDown: (event: PointerEvent<HTMLInputElement>) => void;
+    handlePointerUp: (event: PointerEvent<HTMLInputElement>) => void;
+};

package/dist/InputTime/index.cjs

@@ -8,6 +8,7 @@ require('classnames');
 require('@jobber/design');
 require('react-hook-form');
 require('../Button-cjs.js');
+var filterDataAttributes = require('../filterDataAttributes-cjs.js');
 var omit = require('../omit-cjs.js');
 require('@jobber/hooks');
 require('framer-motion');
@@ -21,7 +22,7 @@ require('../useFormFieldFocus-cjs.js');
 require('../InputValidation-cjs.js');
 require('../Spinner-cjs.js');
 require('react-router-dom');
-require('../_baseGet-cjs.js');
+require('../_getAllKeys-cjs.js');
 require('../isTypedArray-cjs.js');
 require('../identity-cjs.js');
 require('../_getTag-cjs.js');
@@ -204,23 +205,7 @@ function timeStringToDate(timeString, baseDate) {
     }
 }
 
-function InputTimeRebuilt(_a) {
-    var _b, _c;
-    var { value, onChange } = _a, params = tslib_es6.__rest(_a, ["value", "onChange"]);
-    const ref = (_b = params.inputRef) !== null && _b !== void 0 ? _b : React.useRef(null);
-    const { setTypedTime } = useTimePredict({
-        value,
-        handleChange,
-    });
-    const { inputStyle } = FormField.useFormFieldWrapperStyles(params);
-    const wrapperRef = React.useRef(null);
-    const id = getId(params);
-    return (React.createElement(FormField.FormFieldWrapper, { disabled: params.disabled, size: params.size, align: params.align, inline: params.inline, name: params.name, error: params.error || "", identifier: id, descriptionIdentifier: `descriptionUUID--${id}`, invalid: Boolean(params.invalid), description: params.description, clearable: (_c = params.clearable) !== null && _c !== void 0 ? _c : "never", onClear: handleClear, type: "time", readonly: params.readonly, placeholder: params.placeholder, value: dateToTimeString(value), wrapperRef: wrapperRef },
-        React.createElement("input", { ref: ref, type: "time", name: params.name, className: inputStyle, onBlur: handleBlur, id: id, disabled: params.disabled, readOnly: params.readonly, onChange: handleChangeEvent, onFocus: handleFocus, "data-testid": "ATL-InputTime-input", onKeyUp: e => {
-                if (params.disabled || params.readonly)
-                    return;
-                !isNaN(parseInt(e.key, 10)) && setTypedTime(prev => prev + e.key);
-            }, value: dateToTimeString(value) })));
+function useInputTimeActions({ onChange, value, inputRef, onFocus, onBlur, onKeyDown, onClick, onMouseDown, onMouseUp, onPointerDown, onPointerUp, }) {
     function handleChangeEvent(event) {
         handleChange(event.target.value);
     }
@@ -228,28 +213,103 @@ function InputTimeRebuilt(_a) {
         onChange === null || onChange === void 0 ? void 0 : onChange(timeStringToDate(newValue, value));
     }
     function handleBlur(event) {
-        var _a;
-        (_a = params.onBlur) === null || _a === void 0 ? void 0 : _a.call(params, event);
-        if (ref.current) {
-            if (!ref.current.checkValidity()) {
-                ref.current.value = "";
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+        if (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) {
+            if (!inputRef.current.checkValidity()) {
+                inputRef.current.value = "";
             }
         }
     }
     function handleClear() {
         var _a;
-        handleBlur();
+        // Clear the value and refocus without triggering blur event
         onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
-        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
+        (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }
     function handleFocus(event) {
-        var _a;
-        (_a = params.onFocus) === null || _a === void 0 ? void 0 : _a.call(params, event);
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+    }
+    function handleKeyDown(event) {
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+    }
+    function handleClick(event) {
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
     }
-    function getId(props) {
-        const generatedId = React.useId();
-        return props.id || generatedId;
+    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);
+    }
+    return {
+        handleChangeEvent,
+        handleChange,
+        handleBlur,
+        handleClear,
+        handleFocus,
+        handleKeyDown,
+        handleClick,
+        handleMouseDown,
+        handleMouseUp,
+        handlePointerDown,
+        handlePointerUp,
+    };
+}
+
+function InputTimeRebuilt(_a) {
+    var _b;
+    var { value, onChange, readOnly, autoComplete, inputRef } = _a, props = tslib_es6.__rest(_a, ["value", "onChange", "readOnly", "autoComplete", "inputRef"]);
+    const { internalRef, mergedRef, wrapperRef } = useInputTimeRefs(inputRef);
+    const generatedId = React.useId();
+    const id = props.id || generatedId;
+    const { handleChangeEvent, handleChange, handleBlur, handleClear, handleFocus, handleKeyDown, handleClick, handleMouseDown, handleMouseUp, handlePointerDown, handlePointerUp, } = useInputTimeActions({
+        onChange,
+        value,
+        readOnly,
+        disabled: props.disabled,
+        inputRef: internalRef,
+        onFocus: props.onFocus,
+        onBlur: props.onBlur,
+        onKeyDown: props.onKeyDown,
+        onClick: props.onClick,
+        onMouseDown: props.onMouseDown,
+        onMouseUp: props.onMouseUp,
+        onPointerDown: props.onPointerDown,
+        onPointerUp: props.onPointerUp,
+    });
+    const { setTypedTime } = useTimePredict({
+        value,
+        handleChange,
+    });
+    // Kept outside the useInputTimeActions hook to avoid circular dependency via setTypedTime and handleChange
+    function handleKeyUp(event) {
+        var _a;
+        (_a = props.onKeyUp) === null || _a === void 0 ? void 0 : _a.call(props, event);
+        if (props.disabled || readOnly)
+            return;
+        !isNaN(parseInt(event.key, 10)) && setTypedTime(prev => prev + event.key);
+    }
+    const dataAttrs = filterDataAttributes.filterDataAttributes(props);
+    const descriptionIdentifier = `descriptionUUID--${id}`;
+    const descriptionVisible = props.description && !props.inline;
+    const isInvalid = Boolean(props.error || props.invalid);
+    return (React.createElement(FormField.FormFieldWrapper, { disabled: props.disabled, size: props.size, align: props.align, inline: props.inline, name: props.name, error: props.error || "", identifier: id, descriptionIdentifier: descriptionIdentifier, invalid: props.invalid, description: props.description, clearable: (_b = props.clearable) !== null && _b !== void 0 ? _b : "never", onClear: handleClear, type: "time", readonly: readOnly, placeholder: props.placeholder, value: dateToTimeString(value), wrapperRef: wrapperRef },
+        React.createElement("input", Object.assign({ ref: mergedRef, type: "time", name: props.name, className: FormField.formFieldStyles.input, id: id, disabled: props.disabled, readOnly: readOnly, autoComplete: autoComplete, autoFocus: props.autoFocus, max: props.max, min: props.min, value: dateToTimeString(value), onChange: handleChangeEvent, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onClick: handleClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, "data-testid": "ATL-InputTime-input", "aria-label": props["aria-label"], "aria-describedby": descriptionVisible ? descriptionIdentifier : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-required": props["aria-required"] }, dataAttrs))));
+}
+function useInputTimeRefs(inputRef) {
+    const internalRef = React.useRef(null);
+    const mergedRef = FormField.mergeRefs([
+        internalRef,
+        inputRef,
+    ]);
+    const wrapperRef = React.useRef(null);
+    return { internalRef, mergedRef, wrapperRef };
 }
 
 function InputTime$1(_a) {

package/dist/InputTime/index.mjs

@@ -1,11 +1,12 @@
-import React__default, { useState, useCallback, useEffect, useRef, useId } from 'react';
+import React__default, { useState, useCallback, useEffect, useId, useRef } from 'react';
 import { _ as __rest } from '../tslib.es6-es.js';
-import { d as debounce } from '../debounce-es.js';
-import { j as useFormFieldWrapperStyles, f as FormFieldWrapper, k as FormField } from '../FormField-es.js';
+import { a as debounce } from '../debounce-es.js';
+import { f as FormFieldWrapper, l as formFieldStyles, n as mergeRefs, k as FormField } from '../FormField-es.js';
 import 'classnames';
 import '@jobber/design';
 import 'react-hook-form';
 import '../Button-es.js';
+import { f as filterDataAttributes } from '../filterDataAttributes-es.js';
 import { o as omit } from '../omit-es.js';
 import '@jobber/hooks';
 import 'framer-motion';
@@ -19,7 +20,7 @@ import '../useFormFieldFocus-es.js';
 import '../InputValidation-es.js';
 import '../Spinner-es.js';
 import 'react-router-dom';
-import '../_baseGet-es.js';
+import '../_getAllKeys-es.js';
 import '../isTypedArray-es.js';
 import '../identity-es.js';
 import '../_getTag-es.js';
@@ -202,23 +203,7 @@ function timeStringToDate(timeString, baseDate) {
     }
 }
 
-function InputTimeRebuilt(_a) {
-    var _b, _c;
-    var { value, onChange } = _a, params = __rest(_a, ["value", "onChange"]);
-    const ref = (_b = params.inputRef) !== null && _b !== void 0 ? _b : useRef(null);
-    const { setTypedTime } = useTimePredict({
-        value,
-        handleChange,
-    });
-    const { inputStyle } = useFormFieldWrapperStyles(params);
-    const wrapperRef = React__default.useRef(null);
-    const id = getId(params);
-    return (React__default.createElement(FormFieldWrapper, { disabled: params.disabled, size: params.size, align: params.align, inline: params.inline, name: params.name, error: params.error || "", identifier: id, descriptionIdentifier: `descriptionUUID--${id}`, invalid: Boolean(params.invalid), description: params.description, clearable: (_c = params.clearable) !== null && _c !== void 0 ? _c : "never", onClear: handleClear, type: "time", readonly: params.readonly, placeholder: params.placeholder, value: dateToTimeString(value), wrapperRef: wrapperRef },
-        React__default.createElement("input", { ref: ref, type: "time", name: params.name, className: inputStyle, onBlur: handleBlur, id: id, disabled: params.disabled, readOnly: params.readonly, onChange: handleChangeEvent, onFocus: handleFocus, "data-testid": "ATL-InputTime-input", onKeyUp: e => {
-                if (params.disabled || params.readonly)
-                    return;
-                !isNaN(parseInt(e.key, 10)) && setTypedTime(prev => prev + e.key);
-            }, value: dateToTimeString(value) })));
+function useInputTimeActions({ onChange, value, inputRef, onFocus, onBlur, onKeyDown, onClick, onMouseDown, onMouseUp, onPointerDown, onPointerUp, }) {
     function handleChangeEvent(event) {
         handleChange(event.target.value);
     }
@@ -226,28 +211,103 @@ function InputTimeRebuilt(_a) {
         onChange === null || onChange === void 0 ? void 0 : onChange(timeStringToDate(newValue, value));
     }
     function handleBlur(event) {
-        var _a;
-        (_a = params.onBlur) === null || _a === void 0 ? void 0 : _a.call(params, event);
-        if (ref.current) {
-            if (!ref.current.checkValidity()) {
-                ref.current.value = "";
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+        if (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) {
+            if (!inputRef.current.checkValidity()) {
+                inputRef.current.value = "";
             }
         }
     }
     function handleClear() {
         var _a;
-        handleBlur();
+        // Clear the value and refocus without triggering blur event
         onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
-        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
+        (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }
     function handleFocus(event) {
-        var _a;
-        (_a = params.onFocus) === null || _a === void 0 ? void 0 : _a.call(params, event);
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+    }
+    function handleKeyDown(event) {
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+    }
+    function handleClick(event) {
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
     }
-    function getId(props) {
-        const generatedId = useId();
-        return props.id || generatedId;
+    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);
+    }
+    return {
+        handleChangeEvent,
+        handleChange,
+        handleBlur,
+        handleClear,
+        handleFocus,
+        handleKeyDown,
+        handleClick,
+        handleMouseDown,
+        handleMouseUp,
+        handlePointerDown,
+        handlePointerUp,
+    };
+}
+
+function InputTimeRebuilt(_a) {
+    var _b;
+    var { value, onChange, readOnly, autoComplete, inputRef } = _a, props = __rest(_a, ["value", "onChange", "readOnly", "autoComplete", "inputRef"]);
+    const { internalRef, mergedRef, wrapperRef } = useInputTimeRefs(inputRef);
+    const generatedId = useId();
+    const id = props.id || generatedId;
+    const { handleChangeEvent, handleChange, handleBlur, handleClear, handleFocus, handleKeyDown, handleClick, handleMouseDown, handleMouseUp, handlePointerDown, handlePointerUp, } = useInputTimeActions({
+        onChange,
+        value,
+        readOnly,
+        disabled: props.disabled,
+        inputRef: internalRef,
+        onFocus: props.onFocus,
+        onBlur: props.onBlur,
+        onKeyDown: props.onKeyDown,
+        onClick: props.onClick,
+        onMouseDown: props.onMouseDown,
+        onMouseUp: props.onMouseUp,
+        onPointerDown: props.onPointerDown,
+        onPointerUp: props.onPointerUp,
+    });
+    const { setTypedTime } = useTimePredict({
+        value,
+        handleChange,
+    });
+    // Kept outside the useInputTimeActions hook to avoid circular dependency via setTypedTime and handleChange
+    function handleKeyUp(event) {
+        var _a;
+        (_a = props.onKeyUp) === null || _a === void 0 ? void 0 : _a.call(props, event);
+        if (props.disabled || readOnly)
+            return;
+        !isNaN(parseInt(event.key, 10)) && setTypedTime(prev => prev + event.key);
+    }
+    const dataAttrs = filterDataAttributes(props);
+    const descriptionIdentifier = `descriptionUUID--${id}`;
+    const descriptionVisible = props.description && !props.inline;
+    const isInvalid = Boolean(props.error || props.invalid);
+    return (React__default.createElement(FormFieldWrapper, { disabled: props.disabled, size: props.size, align: props.align, inline: props.inline, name: props.name, error: props.error || "", identifier: id, descriptionIdentifier: descriptionIdentifier, invalid: props.invalid, description: props.description, clearable: (_b = props.clearable) !== null && _b !== void 0 ? _b : "never", onClear: handleClear, type: "time", readonly: readOnly, placeholder: props.placeholder, value: dateToTimeString(value), wrapperRef: wrapperRef },
+        React__default.createElement("input", Object.assign({ ref: mergedRef, type: "time", name: props.name, className: formFieldStyles.input, id: id, disabled: props.disabled, readOnly: readOnly, autoComplete: autoComplete, autoFocus: props.autoFocus, max: props.max, min: props.min, value: dateToTimeString(value), onChange: handleChangeEvent, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onClick: handleClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, "data-testid": "ATL-InputTime-input", "aria-label": props["aria-label"], "aria-describedby": descriptionVisible ? descriptionIdentifier : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-required": props["aria-required"] }, dataAttrs))));
+}
+function useInputTimeRefs(inputRef) {
+    const internalRef = useRef(null);
+    const mergedRef = mergeRefs([
+        internalRef,
+        inputRef,
+    ]);
+    const wrapperRef = React__default.useRef(null);
+    return { internalRef, mergedRef, wrapperRef };
 }
 
 function InputTime$1(_a) {

package/dist/InternalChipDismissible-cjs.js

@@ -14,9 +14,9 @@ var Chip = require('./Chip-cjs.js');
 require('./tslib.es6-cjs.js');
 
 function InternalChip({ label, active = false, disabled = false, invalid = false, prefix, suffix, tabIndex, ariaLabel, onClick, onKeyDown, }) {
-    return (React.createElement(Chip.ChipNamespace, { disabled: disabled, invalid: invalid, onKeyDown: onKeyDown, testID: "ATL-InternalChip", ariaLabel: ariaLabel, tabIndex: tabIndex, variation: active ? "base" : "subtle", role: tabIndex !== undefined ? "option" : undefined, onClick: onClick ? (_, ev) => onClick(ev) : undefined, label: label },
-        prefix && React.createElement(Chip.ChipNamespace.Prefix, null, prefix),
-        suffix && React.createElement(Chip.ChipNamespace.Suffix, null, suffix)));
+    return (React.createElement(Chip.Chip, { disabled: disabled, invalid: invalid, onKeyDown: onKeyDown, testID: "ATL-InternalChip", ariaLabel: ariaLabel, tabIndex: tabIndex, variation: active ? "base" : "subtle", role: tabIndex !== undefined ? "option" : undefined, onClick: onClick ? (_, ev) => onClick(ev) : undefined, label: label },
+        prefix && React.createElement(Chip.Chip.Prefix, null, prefix),
+        suffix && React.createElement(Chip.Chip.Suffix, null, suffix)));
 }
 
 var styles = {"wrapper":"XRnU90M2-fs-","input":"Dq-yFHd1zK0-","menu":"F7CpurjKzBI-","menuListOption":"_9SAK31TqNDY-","loadingIndicator":"s5vFJVv0t0Q-","activeOption":"_8d0w-JzgzS4-","spinning":"hDJGLX6kE-U-"};