@jobber/components 6.38.4 → 6.39.0

package/dist/Chip/Chip.d.ts

@@ -1,8 +1,8 @@
 import { ChipPrefix } from "./components/ChipPrefix/Chip.Prefix";
 import { ChipSuffix } from "./components/ChipSuffix/Chip.Suffix";
 import { ChipProps } from "./Chip.types";
-export declare const Chip: {
-    ({ ariaLabel, disabled, heading, invalid, label, value, testID, onClick, onKeyDown, children, role, tabIndex, variation, }: ChipProps): JSX.Element;
-    Prefix: typeof ChipPrefix;
-    Suffix: typeof ChipSuffix;
-};
+export declare function Chip({ ariaLabel, disabled, heading, invalid, label, value, testID, onClick, onKeyDown, children, role, tabIndex, variation, }: ChipProps): JSX.Element;
+export declare namespace Chip {
+    var Prefix: typeof ChipPrefix;
+    var Suffix: typeof ChipSuffix;
+}

package/dist/Chip/Chip.types.d.ts

@@ -0,0 +1,64 @@
+import React, { PropsWithChildren } from "react";
+export interface ChipProps extends PropsWithChildren {
+    /**
+     * Accessible label, which can be different from the primary label.
+     */
+    readonly ariaLabel?: string;
+    /**
+     * The testing id for the chip if necessary.
+     */
+    testID?: string;
+    /**
+     * Disables both mouse and keyboard functionality, and updates the visual style of the Chip to appear disabled.
+     */
+    readonly disabled?: boolean;
+    /**
+     * Adds more prominent text to act as a heading. Will be displayed on the left with a | separator.
+     */
+    readonly heading?: string;
+    /**
+     * Changes Chip styling to inform the user of an issue.
+     */
+    readonly invalid?: boolean;
+    /**
+     * The content of the chip. Will be displayed on the right if you include a heading.
+     */
+    readonly label: string;
+    /**
+     * The accessible role the Chip is fulfilling. Defaults to 'button'
+     */
+    readonly role?: string;
+    /**
+     * Used for accessibility purpopses, specifically using the tab key as navigation.
+     * @default 0
+     */
+    readonly tabIndex?: number;
+    /**
+     * Will be passed to onClick, when the user clicks on this Chip.
+     */
+    readonly value?: string | number;
+    /**
+     * Button style variation. Does not affect functionality.
+     * @default "base"
+     */
+    readonly variation?: ChipVariations;
+    /**
+     * Chip Click Callback. Sends an event and sometimes a value (SelectableChip).
+     */
+    readonly onClick?: (value: string | number | undefined, ev: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;
+    /**
+     * Callback. Called when you keydown on Chip. Ships the event, so you can get the key pushed.
+     */
+    readonly onKeyDown?: (ev: React.KeyboardEvent<HTMLButtonElement | HTMLDivElement>) => void;
+}
+export type ChipVariations = "subtle" | "base";
+export interface ChipSelectableProps extends ChipProps {
+    /**
+     * Is Chip selected?
+     */
+    readonly selected?: boolean;
+    /**
+     * Send this back onClick. Good for determining which Chip was clicked.
+     */
+    readonly value?: string | number;
+}

package/dist/Chip/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./Chip";
 export * from "./components/ChipSelectable/ChipSelectable";
 export * from "./components/ChipDismissible/ChipDismissible";
+export * from "./Chip.types";

package/dist/Chip-cjs.js

@@ -75,7 +75,7 @@ const allowedSuffixIcons = [
     "arrowDown",
 ];
 
-const Chip = ({ ariaLabel, disabled, heading, invalid, label, value, testID, onClick, onKeyDown, children, role = "button", tabIndex = 0, variation = "base", }) => {
+function Chip({ ariaLabel, disabled, heading, invalid, label, value, testID, onClick, onKeyDown, children, role = "button", tabIndex = 0, variation = "base", }) {
     const classes = classnames(styles$1.chip, {
         [styles$1.invalid]: invalid,
         [styles$1.base]: variation === "base",
@@ -103,7 +103,7 @@ const Chip = ({ ariaLabel, disabled, heading, invalid, label, value, testID, onC
                 !labelFullyVisible && (React.createElement("div", { className: styles$1.truncateGradient, "data-testid": "ATL-Chip-Truncation-Gradient" },
                     React.createElement("span", null)))),
             suffix)));
-};
+}
 function getTooltipMessage(labelFullyVisible, headingFullyVisible, label, heading) {
     let message = "";
     if (heading && !headingFullyVisible) {

package/dist/Chip-es.js

@@ -73,7 +73,7 @@ const allowedSuffixIcons = [
     "arrowDown",
 ];
 
-const Chip = ({ ariaLabel, disabled, heading, invalid, label, value, testID, onClick, onKeyDown, children, role = "button", tabIndex = 0, variation = "base", }) => {
+function Chip({ ariaLabel, disabled, heading, invalid, label, value, testID, onClick, onKeyDown, children, role = "button", tabIndex = 0, variation = "base", }) {
     const classes = classnames(styles$1.chip, {
         [styles$1.invalid]: invalid,
         [styles$1.base]: variation === "base",
@@ -101,7 +101,7 @@ const Chip = ({ ariaLabel, disabled, heading, invalid, label, value, testID, onC
                 !labelFullyVisible && (React__default.createElement("div", { className: styles$1.truncateGradient, "data-testid": "ATL-Chip-Truncation-Gradient" },
                     React__default.createElement("span", null)))),
             suffix)));
-};
+}
 function getTooltipMessage(labelFullyVisible, headingFullyVisible, label, heading) {
     let message = "";
     if (heading && !headingFullyVisible) {

package/dist/Chips/ChipsTypes.d.ts

@@ -86,6 +86,18 @@ export interface ChipDismissibleProps extends ChipFoundationProps {
      * @param searchValue - The input value
      */
     onLoadMore?(searchValue: string): void;
+    /**
+     * Control whether the menu only appears once the user types.
+     * @default false
+     */
+    readonly onlyShowMenuOnSearch?: boolean;
+    /**
+     * If true, automatically selects an option based on the current search value when the input loses focus.
+     * The automatic selection order is: an exact match of the search value if available, a custom option if
+     * onCustomOptionSelect is provided, or the closest match.
+     * @default false
+     */
+    readonly autoSelectOnClickOutside?: boolean;
 }
 export type ChipsProps = ChipSingleSelectProps | (ChipMultiSelectProps | ChipDismissibleProps);
 export {};

package/dist/Chips/InternalChipDismissible/InternalChipDismissibleTypes.d.ts

@@ -6,6 +6,18 @@ export interface ChipDismissibleInputProps extends Pick<InternalChipDismissibleP
     readonly options: ChipProps[];
     onCustomOptionSelect?(value: string): void;
     onOptionSelect(value: string): void;
+    /**
+     * Control whether the menu only appears once the user types.
+     * @default false
+     */
+    readonly onlyShowMenuOnSearch?: boolean;
+    /**
+     * If true, automatically selects an option based on the current search value when the input loses focus.
+     * The automatic selection order is: an exact match of the search value if available, a custom option if
+     * onCustomOptionSelect is provided, or the closest match.
+     * @default false
+     */
+    readonly autoSelectOnClickOutside?: boolean;
 }
 export interface ChipDismissibleInputOptionProps extends ChipProps {
     readonly custom: boolean;

package/dist/Chips/InternalChipDismissible/hooks/useInternalChipDismissibleInput.d.ts

@@ -1,8 +1,9 @@
 import React, { ChangeEvent, KeyboardEvent } from "react";
 import { ChipDismissibleInputOptionProps, ChipDismissibleInputProps } from "../InternalChipDismissibleTypes";
 import { ChipProps } from "../../Chip";
-export declare function useInternalChipDismissibleInput({ options, isLoadingMore, onCustomOptionSelect, onOptionSelect, onSearch, }: ChipDismissibleInputProps): {
+export declare function useInternalChipDismissibleInput({ options, isLoadingMore, onCustomOptionSelect, onOptionSelect, onSearch, onlyShowMenuOnSearch, autoSelectOnClickOutside, }: ChipDismissibleInputProps): {
     menuOpen: boolean;
+    showInput: boolean;
     searchValue: string;
     shouldCancelBlur: boolean;
     menuId: string;
@@ -20,9 +21,11 @@ export declare function useInternalChipDismissibleInput({ options, isLoadingMore
     handleCancelBlur: () => void;
     handleEnableBlur: () => void;
     handleBlur: () => void;
+    handleFocus: () => void;
     handleSearchChange: (event: ChangeEvent<HTMLInputElement>) => void;
     handleSetActiveOnMouseOver: (index: number) => () => void;
     handleSelectOption: (selected: ChipDismissibleInputOptionProps) => void;
+    handleShowInput: () => void;
     handleKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
     handleDebouncedSearch: import("lodash").DebouncedFunc<(newSearchValue: string, newOptions?: ChipProps[]) => void>;
 };

package/dist/FormField/FormFieldWrapper.d.ts

@@ -8,8 +8,9 @@ export interface FormFieldWrapperProps extends FormFieldProps {
     readonly clearable: Clearable;
     readonly onClear: () => void;
     readonly showMiniLabel?: boolean;
+    readonly readonly?: boolean;
 }
-export declare function FormFieldWrapper({ align, description, descriptionIdentifier, placeholder, value, children, invalid, error, size, prefix, suffix, max, maxLength, type, disabled, inline, identifier, clearable, onClear, toolbar, toolbarVisibility, showMiniLabel, wrapperRef, }: PropsWithChildren<FormFieldWrapperProps>): JSX.Element;
+export declare function FormFieldWrapper({ align, description, descriptionIdentifier, placeholder, value, children, invalid, error, size, prefix, suffix, max, maxLength, type, disabled, inline, identifier, clearable, onClear, readonly, toolbar, toolbarVisibility, showMiniLabel, wrapperRef, }: PropsWithChildren<FormFieldWrapperProps>): JSX.Element;
 /**
  * @internal Reach out to UX Foundations if using this component since it is possible it might change
  */

package/dist/FormField-cjs.js

@@ -17,12 +17,12 @@ var useShowClear$1 = {};
 
 Object.defineProperty(useShowClear$1, "__esModule", { value: true });
 var useShowClear_2 = useShowClear$1.useShowClear = useShowClear;
-function useShowClear({ clearable, multiline, focused, hasValue, disabled = false, }) {
+function useShowClear({ clearable, multiline, focused, hasValue, readonly, disabled = false, }) {
     if (multiline && clearable !== "never") {
         throw new Error("Multiline inputs can not be clearable");
     }
     // Do not show if there is no value
-    if (!hasValue || clearable === "never" || disabled) {
+    if (!hasValue || clearable === "never" || disabled || readonly) {
         return false;
     }
     switch (clearable) {
@@ -79,7 +79,7 @@ var styles = {"clearInput":"YmRTd-KeXv4-","spinning":"B25z9B8I3gs-"};
 function ClearAction({ onClick, visible, }) {
     if (!visible)
         return null;
-    return (React.createElement("button", { className: styles.clearInput, onClick: onClick, type: "button", "aria-label": "Clear input" },
+    return (React.createElement("button", { className: styles.clearInput, onClick: onClick, type: "button", "aria-label": "Clear input", "data-testid": "ATL-FormField-clearButton" },
         React.createElement(Icon.Icon, { name: "remove", size: "small" })));
 }
 
@@ -169,7 +169,7 @@ function getAffixPaddding({ value, type, prefixWidth, suffixWidth, }) {
     return newPadding;
 }
 
-function FormFieldWrapper({ align, description, descriptionIdentifier, placeholder, value, children, invalid, error, size, prefix, suffix, max, maxLength, type, disabled, inline, identifier, clearable, onClear, toolbar, toolbarVisibility = "while-editing", showMiniLabel = true, wrapperRef, }) {
+function FormFieldWrapper({ align, description, descriptionIdentifier, placeholder, value, children, invalid, error, size, prefix, suffix, max, maxLength, type, disabled, inline, identifier, clearable, onClear, readonly, toolbar, toolbarVisibility = "while-editing", showMiniLabel = true, wrapperRef, }) {
     const prefixRef = React.useRef();
     const suffixRef = React.useRef();
     const { wrapperClasses, containerClasses, wrapperInlineStyle, labelStyle } = useFormFieldWrapperStyles({
@@ -195,6 +195,7 @@ function FormFieldWrapper({ align, description, descriptionIdentifier, placehold
         focused,
         hasValue: Boolean(value),
         disabled,
+        readonly,
     });
     const { isToolbarVisible, toolbarAnimationEnd, toolbarAnimationStart } = useToolbar({
         focused,

package/dist/FormField-es.js

@@ -15,12 +15,12 @@ var useShowClear$1 = {};
 
 Object.defineProperty(useShowClear$1, "__esModule", { value: true });
 var useShowClear_2 = useShowClear$1.useShowClear = useShowClear;
-function useShowClear({ clearable, multiline, focused, hasValue, disabled = false, }) {
+function useShowClear({ clearable, multiline, focused, hasValue, readonly, disabled = false, }) {
     if (multiline && clearable !== "never") {
         throw new Error("Multiline inputs can not be clearable");
     }
     // Do not show if there is no value
-    if (!hasValue || clearable === "never" || disabled) {
+    if (!hasValue || clearable === "never" || disabled || readonly) {
         return false;
     }
     switch (clearable) {
@@ -77,7 +77,7 @@ var styles = {"clearInput":"YmRTd-KeXv4-","spinning":"B25z9B8I3gs-"};
 function ClearAction({ onClick, visible, }) {
     if (!visible)
         return null;
-    return (React__default.createElement("button", { className: styles.clearInput, onClick: onClick, type: "button", "aria-label": "Clear input" },
+    return (React__default.createElement("button", { className: styles.clearInput, onClick: onClick, type: "button", "aria-label": "Clear input", "data-testid": "ATL-FormField-clearButton" },
         React__default.createElement(Icon, { name: "remove", size: "small" })));
 }
 
@@ -167,7 +167,7 @@ function getAffixPaddding({ value, type, prefixWidth, suffixWidth, }) {
     return newPadding;
 }
 
-function FormFieldWrapper({ align, description, descriptionIdentifier, placeholder, value, children, invalid, error, size, prefix, suffix, max, maxLength, type, disabled, inline, identifier, clearable, onClear, toolbar, toolbarVisibility = "while-editing", showMiniLabel = true, wrapperRef, }) {
+function FormFieldWrapper({ align, description, descriptionIdentifier, placeholder, value, children, invalid, error, size, prefix, suffix, max, maxLength, type, disabled, inline, identifier, clearable, onClear, readonly, toolbar, toolbarVisibility = "while-editing", showMiniLabel = true, wrapperRef, }) {
     const prefixRef = useRef();
     const suffixRef = useRef();
     const { wrapperClasses, containerClasses, wrapperInlineStyle, labelStyle } = useFormFieldWrapperStyles({
@@ -193,6 +193,7 @@ function FormFieldWrapper({ align, description, descriptionIdentifier, placehold
         focused,
         hasValue: Boolean(value),
         disabled,
+        readonly,
     });
     const { isToolbarVisible, toolbarAnimationEnd, toolbarAnimationStart } = useToolbar({
         focused,

package/dist/InputTime/InputTime.d.ts

@@ -1,3 +1,2 @@
-import { InputTimeProps } from "./InputTimeProps";
+import { InputTimeProps } from "./InputTime.types";
 export declare function InputTime({ defaultValue, value, onChange, ...params }: InputTimeProps): JSX.Element;
-export declare function timeStringToDate(timeString: string): Date | undefined;

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

@@ -0,0 +1,2 @@
+import { InputTimeRebuiltProps } from "./InputTime.types";
+export declare function InputTimeRebuilt({ value, onChange, ...params }: InputTimeRebuiltProps): JSX.Element;

package/dist/InputTime/{InputTimeProps.d.ts → InputTime.types.d.ts}

@@ -14,4 +14,13 @@ export interface InputTimeProps extends Pick<CommonFormFieldProps, "id" | "align
      * Function called when user changes input value.
      */
     onChange?(newValue?: Date): void;
+    /**
+     * The version of the component.
+     */
+    version?: 1 | 2;
+}
+export interface InputTimeRebuiltProps extends Omit<InputTimeProps, "defaultValue" | "version"> {
+    defaultValue?: never;
+    version: 2;
+    error?: string;
 }

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

@@ -1,4 +1,4 @@
-import { InputTimeProps } from "../InputTimeProps";
+import { InputTimeProps } from "../InputTime.types";
 interface UseTimePredictProps extends Pick<InputTimeProps, "value"> {
     readonly handleChange: (value: string) => void;
 }

package/dist/InputTime/index.cjs

@@ -1,26 +1,288 @@
 'use strict';
 
-var InputTime = require('../InputTime-cjs.js');
-require('../tslib.es6-cjs.js');
-require('react');
-require('../debounce-cjs.js');
-require('../_commonjsHelpers-cjs.js');
-require('../isObjectLike-cjs.js');
-require('../isSymbol-cjs.js');
-require('../FormField-cjs.js');
-require('framer-motion');
+var React = require('react');
+var tslib_es6 = require('../tslib.es6-cjs.js');
+var debounce = require('../debounce-cjs.js');
+var FormField = require('../FormField-cjs.js');
 require('@jobber/design');
 require('classnames');
+require('react-hook-form');
 require('../Button-cjs.js');
-require('react-router-dom');
+var omit = require('../omit-cjs.js');
+require('framer-motion');
+require('../_commonjsHelpers-cjs.js');
+require('../isObjectLike-cjs.js');
+require('../isSymbol-cjs.js');
 require('../Icon-cjs.js');
-require('../Typography-cjs.js');
 require('../Text-cjs.js');
+require('../Typography-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../InputValidation-cjs.js');
 require('../Spinner-cjs.js');
-require('react-hook-form');
+require('react-router-dom');
+require('../_baseGet-cjs.js');
+require('../isTypedArray-cjs.js');
+require('../identity-cjs.js');
+require('../_getTag-cjs.js');
+require('../keysIn-cjs.js');
+require('../_baseAssignValue-cjs.js');
+require('../_baseFlatten-cjs.js');
+require('../_setToString-cjs.js');
+
+const DEBOUNCE_TIME = 300;
+function useTimePredict({ value, handleChange }) {
+    const [IS_12_HOUR_FORMAT, set12HourFormat] = React.useState(false);
+    const [typedTime, setTypedTime] = React.useState("");
+    const predictTime = React.useCallback(debounce.debounce(() => {
+        if (value)
+            return;
+        handleChange(predictHours(typedTime, IS_12_HOUR_FORMAT));
+    }, DEBOUNCE_TIME), [typedTime, value, handleChange, IS_12_HOUR_FORMAT]);
+    React.useEffect(() => {
+        set12HourFormat(Boolean(Intl.DateTimeFormat(navigator.language, {
+            hour: "numeric",
+        }).resolvedOptions().hour12));
+    }, []);
+    /**
+     * Predict the hour when user types a number
+     */
+    React.useEffect(() => {
+        /**
+         * Don't try to predict if the user types 0 as the user would almost always
+         * type another number after 0.
+         */
+        if (typedTime && typedTime !== "0") {
+            predictTime();
+            if ((IS_12_HOUR_FORMAT && typedTime !== "1") || typedTime.length === 2) {
+                // Immediately predict the hour
+                predictTime.flush();
+            }
+        }
+        return predictTime.cancel;
+    }, [typedTime]);
+    /**
+     * Reset typed time when the value changed
+     */
+    React.useEffect(() => {
+        setTypedTime("");
+    }, [value]);
+    return {
+        setTypedTime,
+    };
+}
+function predictHours(time, is12HourFormat = false) {
+    const today = new Date();
+    const currentHour = today.getHours();
+    const parsedTime = parseInt(time, 10);
+    let predictedTime;
+    if (is12HourFormat) {
+        predictedTime = predict12Hours(parsedTime, currentHour);
+    }
+    else {
+        predictedTime = predict24Hours(time, parsedTime, currentHour);
+    }
+    return formatHour(predictedTime);
+}
+function predict12Hours(parsedTime, currentHour) {
+    /**
+     * We need to predict what the user wants when they type 1 since it could be
+     * 10, 11, 12, or 1.
+     *
+     * If the current hour is over 12PM, we can skip this and go to the next logic.
+     */
+    if (parsedTime === 1 && currentHour < 12) {
+        if (currentHour < 10) {
+            return 10;
+        }
+        else {
+            return currentHour + 1;
+        }
+    }
+    /**
+     * Typing 1-5 predicts that the user want that exact hour on the afternoon.
+     */
+    if (parsedTime <= 5) {
+        return parsedTime + 12;
+    }
+    /**
+     * Typing 13-15 predicts that the user want the 2nd number as the minute interval.
+     */
+    if (parsedTime > 12 && parsedTime <= 15) {
+        const timeArray = parsedTime.toString().split("").map(Number); // 13 -> [1, 3]
+        const convertToHoursAndMinutes = timeArray.map((time, i) => {
+            if (i === 0)
+                return time + 12; // 1 -> 13 as 1PM
+            if (i === 1)
+                return time * 10; // 3 -> 30 as 30 minutes
+        });
+        return Number(convertToHoursAndMinutes.join("")); // [13, 30] -> 1330
+    }
+    /**
+     * Anything after 5 will be predicted to be set as AM.
+     */
+    return parsedTime;
+}
+function predict24Hours(time, parsedTime, currentHour) {
+    /**
+     * Typing 1 could be predicted from 10 to 19.
+     * Typing 01 skips this logic and sets the time to 01:00.
+     */
+    if (parsedTime === 1 && time !== "01") {
+        if (currentHour < 10 || currentHour > 19) {
+            return 10;
+        }
+        else {
+            return currentHour + 1;
+        }
+    }
+    /**
+     * Typing 2 could be predicted from 20 to 24.
+     * Typing 02 skips this logic and sets the time to 02:00.
+     */
+    if (parsedTime === 2 && time !== "02") {
+        if (currentHour < 20) {
+            return 20;
+        }
+        else {
+            return currentHour + 1;
+        }
+    }
+    /**
+     * Typing 24 or 00 is set to midnight. This ensures the time doesn't get set
+     * to 24 as that would be invalid.
+     */
+    if (parsedTime === 24 || time === "00") {
+        return 0;
+    }
+    return parsedTime;
+}
+function formatHour(time) {
+    if (time > 99) {
+        const splitTime = time.toString().split("");
+        if (splitTime.length === 3)
+            splitTime.unshift("0"); // 130 -> 0130
+        splitTime.splice(2, 0, ":"); // 0130 -> 01:30
+        return splitTime.join("");
+    }
+    if (time < 10) {
+        return `0${time}:00`;
+    }
+    return `${time}:00`;
+}
+
+function dateToTimeString(date) {
+    if (!(date instanceof Date)) {
+        return "";
+    }
+    // Extract hours and minutes from the Date object
+    const hours = date.getHours().toString().padStart(2, "0");
+    const minutes = date.getMinutes().toString().padStart(2, "0");
+    // Return the time string in HH:MM format
+    return `${hours}:${minutes}`;
+}
+function timeStringToDate(timeString) {
+    try {
+        const [hours, minutes] = timeString.split(":").map(Number);
+        if (isNaN(hours) ||
+            isNaN(minutes) ||
+            hours < 0 ||
+            hours > 24 ||
+            minutes < 0 ||
+            minutes > 60) {
+            return undefined;
+        }
+        const date = new Date();
+        date.setHours(hours, minutes, 0, 0);
+        return date;
+    }
+    catch (_a) {
+        return undefined;
+    }
+}
+
+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 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) },
+        React.createElement("input", { ref: ref, type: "time", name: params.name, className: inputStyle, onBlur: handleBlur, 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 handleChangeEvent(event) {
+        handleChange(event.target.value);
+    }
+    function handleChange(newValue) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(timeStringToDate(newValue));
+    }
+    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 = "";
+            }
+        }
+    }
+    function handleClear() {
+        var _a;
+        handleBlur();
+        onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
+        (_a = ref.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);
+    }
+    function getId(props) {
+        const generatedId = React.useId();
+        return props.id || generatedId;
+    }
+}
 
+function InputTime$1(_a) {
+    var { defaultValue, value, onChange } = _a, params = tslib_es6.__rest(_a, ["defaultValue", "value", "onChange"]);
+    const ref = React.useRef(null);
+    const { setTypedTime } = useTimePredict({ value, handleChange });
+    const fieldProps = omit.omit(Object.assign(Object.assign(Object.assign({ onChange: handleChange }, (defaultValue && { defaultValue: dateToTimeString(defaultValue) })), (!defaultValue && { value: dateToTimeString(value) })), params), ["version"]);
+    return (React.createElement(FormField.FormField, Object.assign({ inputRef: ref, type: "time" }, fieldProps, { onBlur: handleBlur, onKeyUp: e => {
+            var _a;
+            (_a = fieldProps.onKeyUp) === null || _a === void 0 ? void 0 : _a.call(fieldProps, e);
+            !isNaN(parseInt(e.key, 10)) && setTypedTime(prev => prev + e.key);
+        } })));
+    function handleChange(newValue) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(timeStringToDate(newValue));
+    }
+    function handleBlur() {
+        var _a;
+        (_a = params.onBlur) === null || _a === void 0 ? void 0 : _a.call(params);
+        // Time inputs doesn't clear the typed value when it's invalid. This should
+        // force it to reset the input value when the typed value is invalid.
+        if (ref.current) {
+            if (!ref.current.checkValidity()) {
+                ref.current.value = "";
+            }
+        }
+    }
+}
 
+function isNewInputTimeProps(props) {
+    return props.version === 2;
+}
+function InputTime(props) {
+    if (isNewInputTimeProps(props)) {
+        return React.createElement(InputTimeRebuilt, Object.assign({}, props));
+    }
+    else {
+        return React.createElement(InputTime$1, Object.assign({}, props));
+    }
+}
 
-exports.InputTime = InputTime.InputTime;
+exports.InputTime = InputTime;

package/dist/InputTime/index.d.ts

@@ -1 +1,3 @@
-export { InputTime } from "./InputTime";
+import { InputTimeProps, InputTimeRebuiltProps } from "./InputTime.types";
+export type InputTimeShimProps = InputTimeProps | InputTimeRebuiltProps;
+export declare function InputTime(props: InputTimeShimProps): JSX.Element;