@jobber/components 7.14.2 → 7.15.0

package/dist/InputTime-es.js

@@ -0,0 +1,298 @@
+import { _ as __rest } from './tslib.es6-es.js';
+import React__default, { useState, useCallback, useEffect, useId, useRef } from 'react';
+import { d as debounce } from './debounce-es.js';
+import { c as FormFieldWrapper, g as formFieldStyles } from './FormFieldWrapper-es.js';
+import 'classnames';
+import '@jobber/design';
+import 'react-hook-form';
+import { m as mergeRefs } from './mergeRefs-es.js';
+import './Button-es.js';
+import { f as filterDataAttributes } from './filterDataAttributes-es.js';
+
+const DEBOUNCE_TIME = 300;
+function useTimePredict({ value, handleChange }) {
+    const [IS_12_HOUR_FORMAT, set12HourFormat] = useState(false);
+    const [typedTime, setTypedTime] = useState("");
+    const predictTime = useCallback(debounce(() => {
+        if (value)
+            return;
+        handleChange(predictHours(typedTime, IS_12_HOUR_FORMAT));
+    }, DEBOUNCE_TIME), [typedTime, value, handleChange, IS_12_HOUR_FORMAT]);
+    useEffect(() => {
+        set12HourFormat(Boolean(Intl.DateTimeFormat(navigator.language, {
+            hour: "numeric",
+        }).resolvedOptions().hour12));
+    }, []);
+    /**
+     * Predict the hour when user types a number
+     */
+    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
+     */
+    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, includeSeconds = false) {
+    if (!(date instanceof Date)) {
+        return "";
+    }
+    const hours = date.getHours().toString().padStart(2, "0");
+    const minutes = date.getMinutes().toString().padStart(2, "0");
+    if (includeSeconds) {
+        const seconds = date.getSeconds().toString().padStart(2, "0");
+        return `${hours}:${minutes}:${seconds}`;
+    }
+    return `${hours}:${minutes}`;
+}
+function timeStringToDate(timeString, baseDate) {
+    try {
+        const [hours, minutes, seconds = 0] = timeString.split(":").map(Number);
+        if (isNaN(hours) ||
+            isNaN(minutes) ||
+            isNaN(seconds) ||
+            hours < 0 ||
+            hours > 24 ||
+            minutes < 0 ||
+            minutes > 60 ||
+            seconds < 0 ||
+            seconds > 60) {
+            return undefined;
+        }
+        // Try to preserve the Date part of the Date object as long as it is valid
+        const date = baseDate instanceof Date && !isNaN(baseDate.getTime())
+            ? new Date(baseDate)
+            : new Date();
+        date.setHours(hours, minutes, seconds, 0);
+        return date;
+    }
+    catch (_a) {
+        return undefined;
+    }
+}
+
+function useInputTimeActions({ onChange, value, inputRef, onFocus, onBlur, onKeyDown, onClick, onMouseDown, onMouseUp, onPointerDown, onPointerUp, }) {
+    function handleChangeEvent(event) {
+        handleChange(event.target.value);
+    }
+    function handleChange(newValue) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(timeStringToDate(newValue, value));
+    }
+    function handleBlur(event) {
+        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 = "";
+                inputRef.current.valueAsDate = null;
+                // Remove validation error. This is mainly needed for Safari
+                inputRef.current.setCustomValidity("");
+            }
+        }
+    }
+    function handleClear() {
+        var _a;
+        // Clear the value and refocus without triggering blur event
+        onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
+        (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    function handleFocus(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 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 InputTime(_a) {
+    var _b;
+    var { value, onChange, readOnly, autoComplete, inputRef, step = 60 } = _a, props = __rest(_a, ["value", "onChange", "readOnly", "autoComplete", "inputRef", "step"]);
+    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, step % 60 !== 0), 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, required: props.required, max: props.max, min: props.min, step: step, value: dateToTimeString(value, step % 60 !== 0), 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 = useRef(null);
+    return { internalRef, mergedRef, wrapperRef };
+}
+
+export { InputTime as I };

package/dist/RecurringSelect/index.cjs

@@ -7,7 +7,7 @@ require('../Text-cjs.js');
 require('../Typography-cjs.js');
 require('classnames');
 require('../Select-cjs.js');
-require('../FormFieldPostFix-cjs.js');
+require('../FormFieldWrapper-cjs.js');
 require('@jobber/hooks');
 require('framer-motion');
 require('@jobber/design');
@@ -17,6 +17,7 @@ require('react-router-dom');
 require('../Icon-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../InputValidation-cjs.js');
+require('../FormFieldPostFix-cjs.js');
 require('../Spinner-cjs.js');
 require('../useAtlantisFormFieldName-cjs.js');
 require('react-hook-form');

package/dist/RecurringSelect/index.mjs

@@ -5,7 +5,7 @@ import '../Text-es.js';
 import '../Typography-es.js';
 import 'classnames';
 import '../Select-es.js';
-import '../FormFieldPostFix-es.js';
+import '../FormFieldWrapper-es.js';
 import '@jobber/hooks';
 import 'framer-motion';
 import '@jobber/design';
@@ -15,6 +15,7 @@ import 'react-router-dom';
 import '../Icon-es.js';
 import '../useFormFieldFocus-es.js';
 import '../InputValidation-es.js';
+import '../FormFieldPostFix-es.js';
 import '../Spinner-es.js';
 import '../useAtlantisFormFieldName-es.js';
 import 'react-hook-form';

package/dist/Select/index.cjs

@@ -3,7 +3,7 @@
 var Select = require('../Select-cjs.js');
 require('react');
 require('classnames');
-require('../FormFieldPostFix-cjs.js');
+require('../FormFieldWrapper-cjs.js');
 require('@jobber/hooks');
 require('framer-motion');
 require('@jobber/design');
@@ -15,6 +15,7 @@ require('../Typography-cjs.js');
 require('../Text-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../InputValidation-cjs.js');
+require('../FormFieldPostFix-cjs.js');
 require('../Spinner-cjs.js');
 require('../useAtlantisFormFieldName-cjs.js');
 require('react-hook-form');

package/dist/Select/index.mjs

@@ -1,7 +1,7 @@
 export { S as Option, a as Select } from '../Select-es.js';
 import 'react';
 import 'classnames';
-import '../FormFieldPostFix-es.js';
+import '../FormFieldWrapper-es.js';
 import '@jobber/hooks';
 import 'framer-motion';
 import '@jobber/design';
@@ -13,6 +13,7 @@ import '../Typography-es.js';
 import '../Text-es.js';
 import '../useFormFieldFocus-es.js';
 import '../InputValidation-es.js';
+import '../FormFieldPostFix-es.js';
 import '../Spinner-es.js';
 import '../useAtlantisFormFieldName-es.js';
 import 'react-hook-form';

package/dist/Select-cjs.js

@@ -2,6 +2,7 @@
 
 var React = require('react');
 var classnames = require('classnames');
+var FormFieldWrapper = require('./FormFieldWrapper-cjs.js');
 var FormFieldPostFix = require('./FormFieldPostFix-cjs.js');
 var useAtlantisFormFieldName = require('./useAtlantisFormFieldName-cjs.js');
 require('./tslib.es6-cjs.js');
@@ -60,11 +61,11 @@ function Select(props) {
     });
     const descriptionVisible = props.description && !props.inline;
     const isInvalid = Boolean(props.error || props.invalid);
-    return (React.createElement(FormFieldPostFix.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: props.invalid, identifier: id, descriptionIdentifier: descriptionIdentifier, description: props.description, type: "select", placeholder: props.placeholder, value: props.value, prefix: props.prefix, suffix: props.suffix, clearable: "never" },
+    return (React.createElement(FormFieldWrapper.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: props.invalid, identifier: id, descriptionIdentifier: descriptionIdentifier, description: props.description, type: "select", placeholder: props.placeholder, value: props.value, prefix: props.prefix, suffix: props.suffix, clearable: "never" },
         React.createElement(React.Fragment, null,
             React.createElement("select", Object.assign({ id: id, name: name, disabled: props.disabled, autoFocus: props.autoFocus, required: props.required, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, value: props.value, "aria-label": props["aria-label"], "aria-describedby": descriptionVisible
                     ? descriptionIdentifier
-                    : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-required": props["aria-required"], ref: mergedRef, className: classnames(FormFieldPostFix.formFieldStyles.input, props.UNSAFE_experimentalStyles && styles.select) }, dataAttrs), props.children),
+                    : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-required": props["aria-required"], ref: mergedRef, className: classnames(FormFieldWrapper.formFieldStyles.input, props.UNSAFE_experimentalStyles && styles.select) }, dataAttrs), props.children),
             React.createElement(FormFieldPostFix.FormFieldPostFix, { variation: "select", className: styles.selectPostfix }))));
 }
 function useSelectRefs(inputRef) {

package/dist/Select-es.js

@@ -1,6 +1,7 @@
 import React__default, { useId, useRef } from 'react';
 import classnames from 'classnames';
-import { c as FormFieldWrapper, g as formFieldStyles, h as FormFieldPostFix } from './FormFieldPostFix-es.js';
+import { c as FormFieldWrapper, g as formFieldStyles } from './FormFieldWrapper-es.js';
+import { F as FormFieldPostFix } from './FormFieldPostFix-es.js';
 import { u as useAtlantisFormFieldName } from './useAtlantisFormFieldName-es.js';
 import './tslib.es6-es.js';
 import 'react-hook-form';

package/dist/Tabs-es.js

@@ -1,7 +1,7 @@
 import React__default, { useState, useRef, useCallback, useEffect } from 'react';
 import classnames from 'classnames';
 import { g as getDefaultExportFromCjs } from './_commonjsHelpers-es.js';
-import { d as debounce_1 } from './debounce-es.js';
+import { a as debounce_1 } from './debounce-es.js';
 import { a as isObject_1 } from './isObjectLike-es.js';
 import { T as Typography } from './Typography-es.js';
 

package/dist/_baseEach-es.js

@@ -1,8 +1,8 @@
 import { g as _MapCache, d as _Uint8Array, e as eq_1, c as _Stack, a as _isIndex, i as identity_1 } from './identity-es.js';
 import { b as _Symbol, i as isObjectLike_1, a as isObject_1 } from './isObjectLike-es.js';
-import { e as _getAllKeys, k as keys_1, b as _baseGet, f as _castPath, g as _toKey, h as _isKey } from './_getAllKeys-es.js';
+import { c as _getAllKeys, k as keys_1, b as _baseGet, d as _castPath, e as _toKey, f as _isKey } from './_getAllKeys-es.js';
 import { a as _getTag } from './_getTag-es.js';
-import { c as isBufferExports, d as isTypedArray_1, a as isArray_1, i as isArguments_1, m as isLength_1, b as isArrayLike_1 } from './isTypedArray-es.js';
+import { c as isBufferExports, d as isTypedArray_1, a as isArray_1, i as isArguments_1, l as isLength_1, b as isArrayLike_1 } from './isTypedArray-es.js';
 import { g as getDefaultExportFromCjs } from './_commonjsHelpers-es.js';
 import { _ as _baseFor } from './_baseFor-es.js';
 

package/dist/_getAllKeys-es.js

@@ -503,4 +503,4 @@ function getAllKeys(object) {
 
 var _getAllKeys = getAllKeys;
 
-export { _arrayPush as _, _arrayMap as a, _baseGet as b, _getSymbols as c, _baseGetAllKeys as d, _getAllKeys as e, _castPath as f, _toKey as g, _isKey as h, keys_1 as k, stubArray_1 as s };
+export { _arrayPush as _, _arrayMap as a, _baseGet as b, _getAllKeys as c, _castPath as d, _toKey as e, _isKey as f, _getSymbols as g, _baseGetAllKeys as h, keys_1 as k, stubArray_1 as s };

package/dist/debounce-es.js

@@ -326,4 +326,4 @@ var debounce_1 = debounce;
 
 var debounce$1 = /*@__PURE__*/getDefaultExportFromCjs(debounce_1);
 
-export { debounce$1 as a, debounce_1 as d };
+export { debounce_1 as a, debounce$1 as d };

package/dist/docs/InputTime/InputTime.md

@@ -22,16 +22,12 @@ state will indicate that the input is not valid. This can be used when the input
 is required and the user has not entered a value.
 
 
-## Controlled & Uncontrolled
+## Time typeahead
 
-### Controlled component
-
-Web's
-[Controlled](/storybook/web/?path=/story/components-forms-and-inputs-inputtime--controlled)
-version includes a type-ahead feature where typing at least 1 number
-automatically fills in the rest of the time. For example, typing `2` will fill
-in `2:00 PM` and typing `1` waits for a few milliseconds in case the user wants
-to type `10`, `11`, or `12`.
+The InputTime component includes a type-ahead feature where typing at least 1
+number automatically fills in the rest of the time. For example, typing `2` will
+fill in `2:00 PM` and typing `1` waits for a few milliseconds in case the user
+wants to type `10`, `11`, or `12`.
 
 
 ## Props
@@ -41,27 +37,49 @@ to type `10`, `11`, or `12`.
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `align` | `"center" | "right"` | No | — | Determines the alignment of the text inside the input. |
-| `autocomplete` | `AutocompleteTypes | boolean` | No | — | Determines if browser form autocomplete is enabled. Note that "one-time-code" is experimental and should not be used ... |
-| `clearable` | `Clearable` | No | — | Add a clear action on the input that clears the value.  You should always use `while-editing` if you want the input t... |
-| `defaultValue` | `Date` | No | — | Intial value of the input. Only use this when you need to prepopulate the field with a data that is not controlled by... |
+| `aria-activedescendant` | `string` | No | — | ID of the currently active descendant element. Used for composite widgets like combobox or listbox. @see {@link https... |
+| `aria-autocomplete` | `"both" | "inline" | "list" | "none"` | No | — | Indicates the type of autocomplete interaction. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-autocomplete} |
+| `aria-controls` | `string` | No | — | Indicates the element that controls the current element. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-controls} |
+| `aria-describedby` | `string` | No | — | Identifies the element (or elements) that describes the object. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-... |
+| `aria-details` | `string` | No | — | Identifies the element (or elements) that provide a detailed, extended description. @see {@link https://www.w3.org/TR... |
+| `aria-expanded` | `Booleanish` | No | — | Indicates whether the element is expanded or collapsed. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-expanded} |
+| `aria-label` | `string` | No | — | Defines a string value that labels the current element. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-label} |
+| `aria-labelledby` | `string` | No | — | Identifies the element (or elements) that labels the current element. @see {@link https://www.w3.org/TR/wai-aria-1.2/... |
+| `aria-required` | `Booleanish` | No | — | Indicates that user input is required before form submission. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-re... |
+| `autoComplete` | `string` | No | — | Autocomplete behavior for the input (React casing, string values only). Use standard HTML autocomplete values or "on"... |
+| `autoFocus` | `boolean` | No | — | Whether the input should be auto-focused (React casing). |
+| `clearable` | `Clearable` | No | — | Add a clear action on the input that clears the value. |
 | `description` | `ReactNode` | No | — | Further description of the input, can be used for a hint. |
-| `disabled` | `boolean` | No | — | Disable the input |
-| `id` | `string` | No | — | A unique identifier for the input. |
-| `inline` | `boolean` | No | — | Adjusts the form field to go inline with a content. This also silences the given `validations` prop. You'd have to us... |
-| `inputRef` | `RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>` | No | — |  |
+| `disabled` | `boolean` | No | — | Whether the input is disabled. |
+| `error` | `string` | No | — | Error message to display. This also highlights the field red. |
+| `id` | `string` | No | — | The unique identifier for the input element. |
+| `inline` | `boolean` | No | — | Adjusts the form field to go inline with content. |
+| `inputMode` | `"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url"` | No | — | Input mode hint for virtual keyboards. |
+| `inputRef` | `Ref<HTMLInputElement>` | No | — |  |
 | `invalid` | `boolean` | No | — | Highlights the field red to indicate an error. |
-| `loading` | `boolean` | No | — | Show a spinner to indicate loading |
-| `max` | `number` | No | — | Specifies the maximum numerical or date value that a user can type |
-| `maxLength` | `number` | No | — | Maximum character length for an input. This also changes the width to roughly the same size as the max length. This i... |
-| `min` | `number` | No | — | Specifies the minimum numerical or date value that a user can type |
-| `name` | `string` | No | — | Name of the input. |
-| `onBlur` | `(event?: FocusEvent<Element, Element>) => void` | No | — | Blur callback. |
+| `loading` | `boolean` | No | — | Show a spinner to indicate loading. |
+| `max` | `number` | No | — | Maximum numerical or date value. |
+| `min` | `number` | No | — | Minimum numerical or date value. |
+| `name` | `string` | No | — | The name attribute for the input element. |
+| `onBlur` | `(event: FocusEvent<HTMLInputElement, Element>) => void` | No | — | Blur event handler. |
 | `onChange` | `(newValue?: Date) => void` | No | — | Function called when user changes input value. |
-| `onEnter` | `(event: KeyboardEvent<Element>) => void` | No | — | A callback to handle "Enter" keypress. This will only run if Enter is the only key. Will not run if Shift or Control ... |
-| `onFocus` | `(event?: FocusEvent<Element, Element>) => void` | No | — | Focus callback. |
-| `onValidation` | `(message: string) => void` | No | — | Callback to get the the status and message when validating a field @param message |
+| `onClick` | `(event: MouseEvent<HTMLInputElement, MouseEvent>) => void` | No | — | Click event handler. |
+| `onEnter` | `(event: KeyboardEvent<Element>) => void` | No | — | @deprecated Use `onKeyDown` or `onKeyUp` instead. |
+| `onFocus` | `(event: FocusEvent<HTMLInputElement, Element>) => void` | No | — | Focus event handler. |
+| `onKeyDown` | `(event: KeyboardEvent<HTMLInputElement>) => void` | No | — | Key down event handler. |
+| `onKeyUp` | `(event: KeyboardEvent<HTMLInputElement>) => void` | No | — | Key up event handler. |
+| `onMouseDown` | `(event: MouseEvent<HTMLInputElement, MouseEvent>) => void` | No | — | Mouse down event handler. |
+| `onMouseUp` | `(event: MouseEvent<HTMLInputElement, MouseEvent>) => void` | No | — | Mouse up event handler. |
+| `onPointerDown` | `(event: PointerEvent<HTMLInputElement>) => void` | No | — | Pointer down event handler. |
+| `onPointerUp` | `(event: PointerEvent<HTMLInputElement>) => void` | No | — | Pointer up event handler. |
+| `pattern` | `string` | No | — | Validation pattern (regex) for the input. |
 | `placeholder` | `string` | No | — | Text that appears inside the input when empty and floats above the value as a mini label once the user enters a value... |
-| `readonly` | `boolean` | No | — | Prevents users from editing the value. |
+| `prefix` | `Affix` | No | — | Adds a prefix label and icon to the field. |
+| `readOnly` | `boolean` | No | — | Whether the input is read-only (HTML standard casing). |
+| `required` | `boolean` | No | — | Whether the input is required before form submission. |
+| `role` | `string` | No | — | Role attribute for accessibility. |
 | `size` | `"large" | "small"` | No | — | Adjusts the interface to either have small or large spacing. |
-| `validations` | `RegisterOptions` | No | — | Show an error message above the field. This also highlights the the field red if an error message shows up. |
+| `step` | `number` | No | `60` | Granularity of the time input, in seconds. Matches the native HTML `step` attribute. Defaults to `60` so the input di... |
+| `suffix` | `{ onClick: () => void; readonly ariaLabel: string; readonly icon: IconNames; readonly label?: string; } | { onClick?: never; ariaLabel?: never; readonly label?: string; readonly icon?: IconNames; }` | No | — | Adds a suffix label and icon with an optional action to the field. |
+| `tabIndex` | `number` | No | — | Tab index for keyboard navigation. |
 | `value` | `Date` | No | — | Set the component to the given value. |

package/dist/docs/usage-guidelines/usage-guidelines.md

@@ -16,7 +16,6 @@ deprecated.
 | Autocomplete | `import { Autocomplete } from "@jobber/components/Autocomplete"` | `version={2}` — fully controlled, async support   |
 | InputNumber  | `import { InputNumber } from "@jobber/components/InputNumber"`   | `version={2}`                                     |
 | InputText    | `import { InputText } from "@jobber/components/InputText"`       | `version={2}`                                     |
-| InputTime    | `import { InputTime } from "@jobber/components/InputTime"`       | `version={2}`                                     |
 | Modal        | `import { Modal } from "@jobber/components/Modal"`               | `version={2}` — uses `Modal.Provider` composition |
 
 ## Deprecated components — do not use

package/dist/index.cjs

@@ -44,7 +44,7 @@ var Flex = require('./Flex-cjs.js');
 var Form = require('./Form-cjs.js');
 var FormField = require('./FormField-cjs.js');
 var useAtlantisFormFieldName = require('./useAtlantisFormFieldName-cjs.js');
-var FormFieldPostFix = require('./FormFieldPostFix-cjs.js');
+var FormFieldWrapper = require('./FormFieldWrapper-cjs.js');
 var FormatDate = require('./FormatDate-cjs.js');
 var FormatEmail = require('./FormatEmail-cjs.js');
 var FormatFile = require('./FormatFile-cjs.js');
@@ -65,7 +65,7 @@ var InputNumber_index = require('./InputNumber/index.cjs');
 var InputPassword = require('./InputPassword-cjs.js');
 var InputPhoneNumber = require('./InputPhoneNumber-cjs.js');
 var InputText_index = require('./InputText/index.cjs');
-var InputTime_index = require('./InputTime/index.cjs');
+var InputTime = require('./InputTime-cjs.js');
 var InputValidation = require('./InputValidation-cjs.js');
 var LightBox = require('./LightBox-cjs.js');
 var Link = require('./Link-cjs.js');
@@ -180,7 +180,7 @@ require('./DataListAction-cjs.js');
 require('./DataListLayoutActions-cjs.js');
 require('./DataListStatusBar-cjs.js');
 require('./clsx-cjs.js');
-require('./omit-cjs.js');
+require('./FormFieldPostFix-cjs.js');
 require('./useFormFieldFocus-cjs.js');
 require('filesize');
 require('./GridCell-cjs.js');
@@ -266,15 +266,15 @@ exports.useAtlantisFormField = FormField.useAtlantisFormField;
 exports.useAtlantisFormFieldActions = FormField.useAtlantisFormFieldActions;
 exports.useAtlantisReactHookForm = FormField.useAtlantisReactHookForm;
 exports.useAtlantisFormFieldName = useAtlantisFormFieldName.useAtlantisFormFieldName;
-exports.AffixIcon = FormFieldPostFix.AffixIcon;
-exports.AffixLabel = FormFieldPostFix.AffixLabel;
-exports.FormFieldInputHorizontalWrapper = FormFieldPostFix.FormFieldInputHorizontalWrapper;
-exports.FormFieldInputWrapperStyles = FormFieldPostFix.FormFieldInputWrapperStyles;
-exports.FormFieldLabel = FormFieldPostFix.FormFieldLabel;
-exports.FormFieldWrapper = FormFieldPostFix.FormFieldWrapper;
-exports.FormFieldWrapperMain = FormFieldPostFix.FormFieldWrapperMain;
-exports.FormFieldWrapperToolbar = FormFieldPostFix.FormFieldWrapperToolbar;
-exports.useFormFieldWrapperStyles = FormFieldPostFix.useFormFieldWrapperStyles;
+exports.AffixIcon = FormFieldWrapper.AffixIcon;
+exports.AffixLabel = FormFieldWrapper.AffixLabel;
+exports.FormFieldInputHorizontalWrapper = FormFieldWrapper.FormFieldInputHorizontalWrapper;
+exports.FormFieldInputWrapperStyles = FormFieldWrapper.FormFieldInputWrapperStyles;
+exports.FormFieldLabel = FormFieldWrapper.FormFieldLabel;
+exports.FormFieldWrapper = FormFieldWrapper.FormFieldWrapper;
+exports.FormFieldWrapperMain = FormFieldWrapper.FormFieldWrapperMain;
+exports.FormFieldWrapperToolbar = FormFieldWrapper.FormFieldWrapperToolbar;
+exports.useFormFieldWrapperStyles = FormFieldWrapper.useFormFieldWrapperStyles;
 exports.FormatDate = FormatDate.FormatDate;
 exports.strFormatDate = FormatDate.strFormatDate;
 exports.FormatEmail = FormatEmail.FormatEmail;
@@ -303,7 +303,7 @@ exports.InputNumber = InputNumber_index.InputNumber;
 exports.InputPassword = InputPassword.InputPassword;
 exports.InputPhoneNumber = InputPhoneNumber.InputPhoneNumber;
 exports.InputText = InputText_index.InputText;
-exports.InputTime = InputTime_index.InputTime;
+exports.InputTime = InputTime.InputTime;
 exports.InputValidation = InputValidation.InputValidation;
 exports.LightBox = LightBox.LightBox;
 exports.useLightBoxContext = LightBox.useLightBoxContext;

package/dist/index.mjs

@@ -42,7 +42,7 @@ export { F as Flex } from './Flex-es.js';
 export { F as Form } from './Form-es.js';
 export { F as FormField, u as useAtlantisFormField, a as useAtlantisFormFieldActions, b as useAtlantisReactHookForm } from './FormField-es.js';
 export { u as useAtlantisFormFieldName } from './useAtlantisFormFieldName-es.js';
-export { A as AffixIcon, f as AffixLabel, F as FormFieldInputHorizontalWrapper, a as FormFieldInputWrapperStyles, b as FormFieldLabel, c as FormFieldWrapper, d as FormFieldWrapperMain, e as FormFieldWrapperToolbar, u as useFormFieldWrapperStyles } from './FormFieldPostFix-es.js';
+export { A as AffixIcon, f as AffixLabel, F as FormFieldInputHorizontalWrapper, a as FormFieldInputWrapperStyles, b as FormFieldLabel, c as FormFieldWrapper, d as FormFieldWrapperMain, e as FormFieldWrapperToolbar, u as useFormFieldWrapperStyles } from './FormFieldWrapper-es.js';
 export { F as FormatDate, s as strFormatDate } from './FormatDate-es.js';
 export { F as FormatEmail } from './FormatEmail-es.js';
 export { F as FormatFile, u as useFormatFile, a as useFormatFileStyles } from './FormatFile-es.js';
@@ -63,7 +63,7 @@ export { InputNumber } from './InputNumber/index.mjs';
 export { I as InputPassword } from './InputPassword-es.js';
 export { I as InputPhoneNumber } from './InputPhoneNumber-es.js';
 export { InputText } from './InputText/index.mjs';
-export { InputTime } from './InputTime/index.mjs';
+export { I as InputTime } from './InputTime-es.js';
 export { I as InputValidation } from './InputValidation-es.js';
 export { L as LightBox, u as useLightBoxContext } from './LightBox-es.js';
 export { L as Link } from './Link-es.js';
@@ -178,7 +178,7 @@ import './DataListAction-es.js';
 import './DataListLayoutActions-es.js';
 import './DataListStatusBar-es.js';
 import './clsx-es.js';
-import './omit-es.js';
+import './FormFieldPostFix-es.js';
 import './useFormFieldFocus-es.js';
 import 'filesize';
 import './GridCell-es.js';

package/dist/isTypedArray-es.js

@@ -586,4 +586,4 @@ var isTypedArray = nodeIsTypedArray ? baseUnary(nodeIsTypedArray) : baseIsTypedA
 
 var isTypedArray_1 = isTypedArray;
 
-export { _isPrototype as _, isArray_1 as a, isArrayLike_1 as b, isBufferExports as c, isTypedArray_1 as d, _overArg as e, _getNative as f, _Map as g, _toSource as h, isArguments_1 as i, isFunction_1 as j, _baseUnary as k, _nodeUtilExports as l, isLength_1 as m };
+export { _isPrototype as _, isArray_1 as a, isArrayLike_1 as b, isBufferExports as c, isTypedArray_1 as d, _overArg as e, _getNative as f, _Map as g, _toSource as h, isArguments_1 as i, isFunction_1 as j, _baseUnary as k, isLength_1 as l, _nodeUtilExports as m };