@jobber/components 6.117.0 → 6.118.0

package/dist/InputDate/InputDate.types.d.ts

@@ -1,6 +1,6 @@
 import type { CommonFormFieldProps, FormFieldProps } from "../FormField";
 import type { FocusEvents, HTMLInputBaseProps, KeyboardEvents, RebuiltInputCommonProps } from "../sharedHelpers/types";
-export interface InputDateRebuiltProps extends HTMLInputBaseProps, FocusEvents<HTMLInputElement | HTMLTextAreaElement>, KeyboardEvents<HTMLInputElement | HTMLTextAreaElement>, Omit<RebuiltInputCommonProps, "clearable" | "prefix" | "suffix"> {
+export interface InputDateRebuiltProps extends Omit<HTMLInputBaseProps, "maxLength">, FocusEvents<HTMLInputElement | HTMLTextAreaElement>, KeyboardEvents<HTMLInputElement | HTMLTextAreaElement>, Omit<RebuiltInputCommonProps, "clearable" | "prefix" | "suffix" | "showMiniLabel"> {
     /**
      * A Date object value
      * (e.g., `new Date("11/11/2011")`)

package/dist/InputDate/index.cjs

@@ -159,7 +159,7 @@ const InputDateRebuilt = React.forwardRef((props, forwardedRef) => {
         return (
         // We prevent the picker from opening on focus for keyboard navigation, so to maintain a good UX for mouse users we want to open the picker on click
         React.createElement("div", { onClick: onClick },
-            React.createElement(InputText_index.InputText, { "aria-describedby": activatorProps.ariaDescribedBy, "aria-labelledby": activatorProps.ariaLabelledBy, "aria-required": activatorProps.ariaRequired === "true" ? true : false, autoFocus: props.autoFocus, id: activatorProps.id, autoComplete: props.autoComplete, disabled: props.disabled, error: props.error, readOnly: props.readOnly, placeholder: props.placeholder, size: props.size, inline: props.inline, align: props.align, description: props.description, invalid: props.invalid, name: props.name, version: 2, value: showEmptyValueLabel ? props.emptyValueLabel || "" : value || "", ref: forwardedRef, suffix: suffix, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: event => {
+            React.createElement(InputText_index.InputText, { "aria-describedby": activatorProps.ariaDescribedBy, "aria-labelledby": activatorProps.ariaLabelledBy, "aria-required": activatorProps.ariaRequired === "true" ? true : false, autoFocus: props.autoFocus, id: activatorProps.id, autoComplete: props.autoComplete, disabled: props.disabled, error: props.error, readOnly: props.readOnly, placeholder: props.placeholder, size: props.size, inline: props.inline, align: props.align, description: props.description, invalid: props.invalid, required: props.required, name: props.name, version: 2, value: showEmptyValueLabel ? props.emptyValueLabel || "" : value || "", ref: forwardedRef, suffix: suffix, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: event => {
                     var _a, _b;
                     if (props.showIcon === false && event.key === "ArrowDown") {
                         (_a = activatorProps.onClick) === null || _a === void 0 ? void 0 : _a.call(activatorProps);

package/dist/InputDate/index.mjs

@@ -157,7 +157,7 @@ const InputDateRebuilt = forwardRef((props, forwardedRef) => {
         return (
         // We prevent the picker from opening on focus for keyboard navigation, so to maintain a good UX for mouse users we want to open the picker on click
         React__default.createElement("div", { onClick: onClick },
-            React__default.createElement(InputText, { "aria-describedby": activatorProps.ariaDescribedBy, "aria-labelledby": activatorProps.ariaLabelledBy, "aria-required": activatorProps.ariaRequired === "true" ? true : false, autoFocus: props.autoFocus, id: activatorProps.id, autoComplete: props.autoComplete, disabled: props.disabled, error: props.error, readOnly: props.readOnly, placeholder: props.placeholder, size: props.size, inline: props.inline, align: props.align, description: props.description, invalid: props.invalid, name: props.name, version: 2, value: showEmptyValueLabel ? props.emptyValueLabel || "" : value || "", ref: forwardedRef, suffix: suffix, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: event => {
+            React__default.createElement(InputText, { "aria-describedby": activatorProps.ariaDescribedBy, "aria-labelledby": activatorProps.ariaLabelledBy, "aria-required": activatorProps.ariaRequired === "true" ? true : false, autoFocus: props.autoFocus, id: activatorProps.id, autoComplete: props.autoComplete, disabled: props.disabled, error: props.error, readOnly: props.readOnly, placeholder: props.placeholder, size: props.size, inline: props.inline, align: props.align, description: props.description, invalid: props.invalid, required: props.required, name: props.name, version: 2, value: showEmptyValueLabel ? props.emptyValueLabel || "" : value || "", ref: forwardedRef, suffix: suffix, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: event => {
                     var _a, _b;
                     if (props.showIcon === false && event.key === "ArrowDown") {
                         (_a = activatorProps.onClick) === null || _a === void 0 ? void 0 : _a.call(activatorProps);

package/dist/InputEmail/InputEmail.types.d.ts

@@ -10,7 +10,7 @@ export type InputEmailVersion = 1 | 2 | undefined;
  * Experimental version 2 of the InputEmail component.
  * Do not use unless you have talked with Atlantis first.
  */
-export interface InputEmailRebuiltProps extends HTMLInputBaseProps, FocusEvents<HTMLInputElement>, KeyboardEvents<HTMLInputElement>, MouseEvents<HTMLInputElement>, RebuiltInputCommonProps {
+export interface InputEmailRebuiltProps extends HTMLInputBaseProps, FocusEvents<HTMLInputElement>, KeyboardEvents<HTMLInputElement>, MouseEvents<HTMLInputElement>, Omit<RebuiltInputCommonProps, "showMiniLabel"> {
     /**
      * The current value of the input.
      */

package/dist/InputEmail/index.cjs

@@ -125,7 +125,7 @@ const InputEmailRebuilt = React.forwardRef(function InputEmailInternal(props, re
     const isInvalid = Boolean(props.error || props.invalid);
     const dataAttrs = filterDataAttributes.filterDataAttributes(props);
     return (React.createElement(FormField.FormFieldWrapper, { error: props.error || "", invalid: props.invalid, identifier: id, descriptionIdentifier: descriptionIdentifier, size: props.size, inline: props.inline, align: props.align, prefix: props.prefix, suffix: props.suffix, description: props.description, clearable: (_b = props.clearable) !== null && _b !== void 0 ? _b : "never", onClear: handleClear, readonly: props.readOnly, wrapperRef: wrapperRef, disabled: props.disabled, type: "email", value: props.value, placeholder: props.placeholder, name: name },
-        React.createElement("input", Object.assign({ id: id, name: name, type: "email", ref: inputRef, className: FormField.formFieldStyles.input, value: props.value, disabled: props.disabled, readOnly: props.readOnly, autoFocus: props.autoFocus, autoComplete: props.autoComplete, pattern: props.pattern, inputMode: props.inputMode, tabIndex: props.tabIndex, 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, onClick: handleClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, "data-testid": "ATL-InputEmail-input" }, dataAttrs)),
+        React.createElement("input", Object.assign({ id: id, name: name, type: "email", ref: inputRef, className: FormField.formFieldStyles.input, value: props.value, disabled: props.disabled, readOnly: props.readOnly, autoFocus: props.autoFocus, autoComplete: props.autoComplete, pattern: props.pattern, inputMode: props.inputMode, tabIndex: props.tabIndex, maxLength: props.maxLength, required: props.required, 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, onClick: handleClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, "data-testid": "ATL-InputEmail-input" }, dataAttrs)),
         React.createElement(FormField.FormFieldPostFix, { variation: "spinner", visible: (_c = props.loading) !== null && _c !== void 0 ? _c : false })));
 });
 

package/dist/InputEmail/index.mjs

@@ -123,7 +123,7 @@ const InputEmailRebuilt = forwardRef(function InputEmailInternal(props, ref) {
     const isInvalid = Boolean(props.error || props.invalid);
     const dataAttrs = filterDataAttributes(props);
     return (React__default.createElement(FormFieldWrapper, { error: props.error || "", invalid: props.invalid, identifier: id, descriptionIdentifier: descriptionIdentifier, size: props.size, inline: props.inline, align: props.align, prefix: props.prefix, suffix: props.suffix, description: props.description, clearable: (_b = props.clearable) !== null && _b !== void 0 ? _b : "never", onClear: handleClear, readonly: props.readOnly, wrapperRef: wrapperRef, disabled: props.disabled, type: "email", value: props.value, placeholder: props.placeholder, name: name },
-        React__default.createElement("input", Object.assign({ id: id, name: name, type: "email", ref: inputRef, className: formFieldStyles.input, value: props.value, disabled: props.disabled, readOnly: props.readOnly, autoFocus: props.autoFocus, autoComplete: props.autoComplete, pattern: props.pattern, inputMode: props.inputMode, tabIndex: props.tabIndex, 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, onClick: handleClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, "data-testid": "ATL-InputEmail-input" }, dataAttrs)),
+        React__default.createElement("input", Object.assign({ id: id, name: name, type: "email", ref: inputRef, className: formFieldStyles.input, value: props.value, disabled: props.disabled, readOnly: props.readOnly, autoFocus: props.autoFocus, autoComplete: props.autoComplete, pattern: props.pattern, inputMode: props.inputMode, tabIndex: props.tabIndex, maxLength: props.maxLength, required: props.required, 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, onClick: handleClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, "data-testid": "ATL-InputEmail-input" }, dataAttrs)),
         React__default.createElement(FormFieldPostFix, { variation: "spinner", visible: (_c = props.loading) !== null && _c !== void 0 ? _c : false })));
 });
 

package/dist/InputPhoneNumber/InputPhoneNumber.types.d.ts

@@ -19,7 +19,7 @@ export interface InputPhoneNumberLegacyProps extends Omit<CommonFormFieldProps,
      */
     readonly required?: boolean;
 }
-export interface InputPhoneNumberRebuiltProps extends Omit<HTMLInputBaseProps, "type" | "maxLength" | "minLength">, FocusEvents<HTMLInputElement>, KeyboardEvents<HTMLInputElement>, MouseEvents<HTMLInputElement>, RebuiltInputCommonProps {
+export interface InputPhoneNumberRebuiltProps extends Omit<HTMLInputBaseProps, "type" | "maxLength" | "minLength">, FocusEvents<HTMLInputElement>, KeyboardEvents<HTMLInputElement>, MouseEvents<HTMLInputElement>, Omit<RebuiltInputCommonProps, "showMiniLabel"> {
     /**
      * The current value of the input.
      */

package/dist/InputPhoneNumber/index.cjs

@@ -205,7 +205,7 @@ const InputPhoneNumberRebuilt = React.forwardRef(function InputPhoneNumberIntern
     return (React.createElement(FormField.FormFieldWrapper, { disabled: props.disabled, size: props.size, inline: props.inline, wrapperRef: wrapperRef, error: (_c = props.error) !== null && _c !== void 0 ? _c : "", invalid: Boolean(props.error || props.invalid), identifier: id, descriptionIdentifier: descriptionIdentifier, description: props.description, clearable: (_d = props.clearable) !== null && _d !== void 0 ? _d : "never", onClear: handleClear, type: "tel", placeholder: props.placeholder, value: formattedValue, prefix: props.prefix, suffix: props.suffix, readonly: props.readOnly, loading: props.loading },
         React.createElement("input", Object.assign({ id: id, name: name, type: "tel", ref: inputPhoneNumberRef, className: classnames(FormField.formFieldStyles.input, {
                 [styles.emptyValue]: inputValue.length === 0 && pattern[0] === "(",
-            }), value: formattedValue, disabled: props.disabled, readOnly: props.readOnly, autoFocus: props.autoFocus, autoComplete: props.autoComplete, inputMode: props.inputMode, tabIndex: props.tabIndex, role: props.role, "aria-label": props["aria-label"], "aria-describedby": descriptionVisible
+            }), value: formattedValue, disabled: props.disabled, readOnly: props.readOnly, autoFocus: props.autoFocus, autoComplete: props.autoComplete, inputMode: props.inputMode, tabIndex: props.tabIndex, required: props.required, 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, onClick: handleClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp }, dataAttrs)),
         React.createElement(MaskElement, { isMasking: isMasking, formattedValue: formattedValue, placeholderMask: placeholderMask }),

package/dist/InputPhoneNumber/index.mjs

@@ -203,7 +203,7 @@ const InputPhoneNumberRebuilt = forwardRef(function InputPhoneNumberInternal(_a,
     return (React__default.createElement(FormFieldWrapper, { disabled: props.disabled, size: props.size, inline: props.inline, wrapperRef: wrapperRef, error: (_c = props.error) !== null && _c !== void 0 ? _c : "", invalid: Boolean(props.error || props.invalid), identifier: id, descriptionIdentifier: descriptionIdentifier, description: props.description, clearable: (_d = props.clearable) !== null && _d !== void 0 ? _d : "never", onClear: handleClear, type: "tel", placeholder: props.placeholder, value: formattedValue, prefix: props.prefix, suffix: props.suffix, readonly: props.readOnly, loading: props.loading },
         React__default.createElement("input", Object.assign({ id: id, name: name, type: "tel", ref: inputPhoneNumberRef, className: classnames(formFieldStyles.input, {
                 [styles.emptyValue]: inputValue.length === 0 && pattern[0] === "(",
-            }), value: formattedValue, disabled: props.disabled, readOnly: props.readOnly, autoFocus: props.autoFocus, autoComplete: props.autoComplete, inputMode: props.inputMode, tabIndex: props.tabIndex, role: props.role, "aria-label": props["aria-label"], "aria-describedby": descriptionVisible
+            }), value: formattedValue, disabled: props.disabled, readOnly: props.readOnly, autoFocus: props.autoFocus, autoComplete: props.autoComplete, inputMode: props.inputMode, tabIndex: props.tabIndex, required: props.required, 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, onClick: handleClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp }, dataAttrs)),
         React__default.createElement(MaskElement, { isMasking: isMasking, formattedValue: formattedValue, placeholderMask: placeholderMask }),

package/dist/InputText/InputText.d.ts

@@ -24,11 +24,11 @@ export declare const InputText: React.ForwardRefExoticComponent<({
     readonly toolbar?: React.ReactNode;
     readonly defaultValue?: (string | Date) | undefined;
     readonly prefix?: import("../FormField").Affix | undefined;
+    readonly maxLength?: number | undefined;
     readonly autofocus?: boolean | undefined;
     readonly autocomplete?: (boolean | import("../FormField").AutocompleteTypes) | undefined;
     inputRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | null> | undefined;
     readonly keyboard?: ("numeric" | "decimal") | undefined;
-    readonly maxLength?: number | undefined;
     readonly suffix?: import("ts-xor").XOR<import("../FormField").Affix, import("../FormField").Suffix> | undefined;
     onEnter?: ((event: React.KeyboardEvent) => void) | undefined;
     readonly readonly?: boolean | undefined;
@@ -58,11 +58,11 @@ export declare const InputText: React.ForwardRefExoticComponent<({
     readonly toolbar?: React.ReactNode;
     readonly defaultValue?: (string | Date) | undefined;
     readonly prefix?: import("../FormField").Affix | undefined;
+    readonly maxLength?: number | undefined;
     readonly autofocus?: boolean | undefined;
     readonly autocomplete?: (boolean | import("../FormField").AutocompleteTypes) | undefined;
     inputRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | null> | undefined;
     readonly keyboard?: ("numeric" | "decimal") | undefined;
-    readonly maxLength?: number | undefined;
     readonly suffix?: import("ts-xor").XOR<import("../FormField").Affix, import("../FormField").Suffix> | undefined;
     onEnter?: ((event: React.KeyboardEvent) => void) | undefined;
     readonly readonly?: boolean | undefined;

package/dist/InputText/InputText.types.d.ts

@@ -22,6 +22,13 @@ export type InputTextVersion = 1 | 2 | undefined;
  * Do not use unless you have talked with Atlantis first.
  */
 export interface InputTextRebuiltProps extends HTMLInputBaseProps, MouseEvents<HTMLInputElement | HTMLTextAreaElement>, FocusEvents<HTMLInputElement | HTMLTextAreaElement>, KeyboardEvents<HTMLInputElement | HTMLTextAreaElement>, RebuiltInputCommonProps, InputLengthConstraint {
+    /**
+     * When false, the placeholder text only serves as a standard placeholder and
+     * disappears when the user types, instead of floating above the value as a
+     * mini label.
+     * @default true
+     */
+    readonly showMiniLabel?: boolean;
     /**
      * Use this when you're expecting a long answer.
      */

package/dist/InputText/index.cjs

@@ -245,10 +245,10 @@ const InputTextSPAR = React.forwardRef(function InputTextInternal(props, inputRe
     const mergedRef = React.useMemo(() => FormField.mergeRefs([inputRef, inputTextRef]), []);
     // Shared props for both TextArea and TextInput
     const commonInputProps = Object.assign({ id,
-        name, className: FormField.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
+        name, className: FormField.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, required: props.required, 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: mergedRef }, dataAttrs);
-    return (React.createElement(FormField.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 },
+    return (React.createElement(FormField.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, showMiniLabel: props.showMiniLabel },
         React.createElement(React.Fragment, null,
             props.multiline ? (React.createElement(TextArea, Object.assign({}, commonInputProps, { rows: rowRange.min }))) : (React.createElement(TextInput, Object.assign({}, commonInputProps, { pattern: props.pattern }))),
             React.createElement(FormField.FormFieldPostFix, { variation: "spinner", visible: (_c = props.loading) !== null && _c !== void 0 ? _c : false }))));

package/dist/InputText/index.mjs

@@ -243,10 +243,10 @@ const InputTextSPAR = forwardRef(function InputTextInternal(props, inputRef) {
     const mergedRef = useMemo(() => mergeRefs([inputRef, inputTextRef]), []);
     // 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
+        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, required: props.required, 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: mergedRef }, 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 },
+    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, showMiniLabel: props.showMiniLabel },
         React__default.createElement(React__default.Fragment, null,
             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 }))));

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

@@ -23,7 +23,7 @@ export interface InputTimeProps extends Pick<CommonFormFieldProps, "id" | "align
 export interface InputTimeLegacyProps extends InputTimeProps {
     version?: 1;
 }
-export interface InputTimeRebuiltProps extends HTMLInputBaseProps, FocusEvents<HTMLInputElement>, KeyboardEvents<HTMLInputElement>, MouseEvents<HTMLInputElement>, RebuiltInputCommonProps, Pick<InputTimeProps, "value" | "onChange"> {
+export interface InputTimeRebuiltProps extends Omit<HTMLInputBaseProps, "maxLength">, FocusEvents<HTMLInputElement>, KeyboardEvents<HTMLInputElement>, MouseEvents<HTMLInputElement>, Omit<RebuiltInputCommonProps, "showMiniLabel">, Pick<InputTimeProps, "value" | "onChange"> {
     /**
      * Maximum numerical or date value.
      */

package/dist/InputTime/index.cjs

@@ -303,7 +303,7 @@ function InputTimeRebuilt(_a) {
     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))));
+        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, required: props.required, 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);

package/dist/InputTime/index.mjs

@@ -301,7 +301,7 @@ function InputTimeRebuilt(_a) {
     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))));
+        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, 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);

package/dist/Page/types.d.ts

@@ -114,6 +114,9 @@ export interface PageMenuProps {
     readonly children: ReactNode;
     readonly triggerLabel?: string;
 }
+export interface PageContextValue {
+    readonly width: PageComposableProps["width"];
+}
 export interface PageBodyProps {
     readonly children: ReactNode;
 }

package/dist/Page-cjs.js

@@ -15,18 +15,24 @@ var filterDataAttributes = require('./filterDataAttributes-cjs.js');
 
 var styles = {"page":"BLYnKItuM3c-","fill":"n5WRRhMkoLs-","standard":"WziKEWW9nA8-","narrow":"qgGzgDyS2NY-","titleBar":"lbmoDvdtQO4-","titleRow":"k9y5NuqTcks-","actionGroup":"_7t53-bnzh98-","large":"SH0aNOLVhE8-","medium":"Lc7Z0FsBa6w-","small":"iF5IA1SYKoA-","primaryAction":"g-H7CKkX-LA-","actionButton":"RSP7jHjP-mw-","subtitle":"EqsNMrZVL-8-","spinning":"MJZVhEmx6h4-"};
 
+const PageContext = React.createContext({ width: undefined });
+function usePageContext() {
+    return React.useContext(PageContext);
+}
 /** Discriminates between the props-based API and the composable children API. */
 function isLegacy(props) {
     return "title" in props;
 }
 function Page(props) {
     var _a;
-    const pageStyles = classnames(styles.page, styles[(_a = props.width) !== null && _a !== void 0 ? _a : "standard"]);
+    const width = (_a = props.width) !== null && _a !== void 0 ? _a : "standard";
+    const pageStyles = classnames(styles.page, styles[width]);
     if (isLegacy(props)) {
         return React.createElement(PageLegacy, Object.assign({}, props, { pageStyles: pageStyles }));
     }
-    return (React.createElement("div", { className: pageStyles },
-        React.createElement(Content.Content, null, props.children)));
+    return (React.createElement(PageContext.Provider, { value: { width } },
+        React.createElement("div", { className: pageStyles },
+            React.createElement(Content.Content, null, props.children))));
 }
 /** Props-based renderer. Preserves the original Page behavior for existing consumers. */
 function PageLegacy(_a) {
@@ -163,11 +169,13 @@ function PageSecondaryButton(_a) {
 function PageMenu(_a) {
     var { children, triggerLabel = "More Actions" } = _a, rest = tslib_es6.__rest(_a, ["children", "triggerLabel"]);
     const dataAttrs = filterDataAttributes.filterDataAttributes(rest);
+    const { width } = usePageContext();
+    const preferredPlacement = width === "fill" ? "bottom end" : undefined;
     return (React.createElement("div", Object.assign({}, dataAttrs),
         React.createElement(Menu.Menu, null,
             React.createElement(Menu.Menu.Trigger, { UNSAFE_style: { display: "block" } },
                 React.createElement(Button.Button, { icon: "more", label: triggerLabel, type: "secondary", fullWidth: true })),
-            React.createElement(Menu.Menu.Content, null, children))));
+            React.createElement(Menu.Menu.Content, { preferredPlacement: preferredPlacement }, children))));
 }
 /** Main content area of the page. */
 function PageBody({ children }) {

package/dist/Page-es.js

@@ -1,5 +1,5 @@
 import { _ as __rest } from './tslib.es6-es.js';
-import React__default from 'react';
+import React__default, { createContext, useContext } from 'react';
 import classnames from 'classnames';
 import { useResizeObserver, Breakpoints } from '@jobber/hooks';
 import { H as Heading } from './Heading-es.js';
@@ -13,18 +13,24 @@ import { f as filterDataAttributes } from './filterDataAttributes-es.js';
 
 var styles = {"page":"BLYnKItuM3c-","fill":"n5WRRhMkoLs-","standard":"WziKEWW9nA8-","narrow":"qgGzgDyS2NY-","titleBar":"lbmoDvdtQO4-","titleRow":"k9y5NuqTcks-","actionGroup":"_7t53-bnzh98-","large":"SH0aNOLVhE8-","medium":"Lc7Z0FsBa6w-","small":"iF5IA1SYKoA-","primaryAction":"g-H7CKkX-LA-","actionButton":"RSP7jHjP-mw-","subtitle":"EqsNMrZVL-8-","spinning":"MJZVhEmx6h4-"};
 
+const PageContext = createContext({ width: undefined });
+function usePageContext() {
+    return useContext(PageContext);
+}
 /** Discriminates between the props-based API and the composable children API. */
 function isLegacy(props) {
     return "title" in props;
 }
 function Page(props) {
     var _a;
-    const pageStyles = classnames(styles.page, styles[(_a = props.width) !== null && _a !== void 0 ? _a : "standard"]);
+    const width = (_a = props.width) !== null && _a !== void 0 ? _a : "standard";
+    const pageStyles = classnames(styles.page, styles[width]);
     if (isLegacy(props)) {
         return React__default.createElement(PageLegacy, Object.assign({}, props, { pageStyles: pageStyles }));
     }
-    return (React__default.createElement("div", { className: pageStyles },
-        React__default.createElement(Content, null, props.children)));
+    return (React__default.createElement(PageContext.Provider, { value: { width } },
+        React__default.createElement("div", { className: pageStyles },
+            React__default.createElement(Content, null, props.children))));
 }
 /** Props-based renderer. Preserves the original Page behavior for existing consumers. */
 function PageLegacy(_a) {
@@ -161,11 +167,13 @@ function PageSecondaryButton(_a) {
 function PageMenu(_a) {
     var { children, triggerLabel = "More Actions" } = _a, rest = __rest(_a, ["children", "triggerLabel"]);
     const dataAttrs = filterDataAttributes(rest);
+    const { width } = usePageContext();
+    const preferredPlacement = width === "fill" ? "bottom end" : undefined;
     return (React__default.createElement("div", Object.assign({}, dataAttrs),
         React__default.createElement(Menu, null,
             React__default.createElement(Menu.Trigger, { UNSAFE_style: { display: "block" } },
                 React__default.createElement(Button, { icon: "more", label: triggerLabel, type: "secondary", fullWidth: true })),
-            React__default.createElement(Menu.Content, null, children))));
+            React__default.createElement(Menu.Content, { preferredPlacement: preferredPlacement }, children))));
 }
 /** Main content area of the page. */
 function PageBody({ children }) {

package/dist/Select/Select.types.d.ts

@@ -13,7 +13,7 @@ export interface SelectLegacyProps extends Pick<CommonFormFieldProps, "id" | "al
 /**
  * Rebuilt version of the Select component without React Hook Form dependency.
  */
-export interface SelectRebuiltProps extends Omit<HTMLInputBaseProps, "readOnly">, FocusEvents<HTMLSelectElement>, Omit<RebuiltInputCommonProps, "clearable" | "prefix" | "suffix" | "align">, Pick<SelectLegacyProps, "prefix" | "suffix" | "align" | "children"> {
+export interface SelectRebuiltProps extends Omit<HTMLInputBaseProps, "readOnly" | "maxLength">, FocusEvents<HTMLSelectElement>, Omit<RebuiltInputCommonProps, "clearable" | "prefix" | "suffix" | "align" | "showMiniLabel">, Pick<SelectLegacyProps, "prefix" | "suffix" | "align" | "children"> {
     defaultValue?: never;
     readonly value?: string | number;
     onChange?(newValue?: string | number): void;

package/dist/Select/index.cjs

@@ -79,7 +79,7 @@ function SelectRebuilt(props) {
     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: 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, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, value: props.value, "aria-label": props["aria-label"], "aria-describedby": descriptionVisible
+            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(FormField.formFieldStyles.input, props.UNSAFE_experimentalStyles && styles.select) }, dataAttrs), props.children),
             React.createElement(FormField.FormFieldPostFix, { variation: "select", className: styles.selectPostfix }))));

package/dist/Select/index.mjs

@@ -77,7 +77,7 @@ function SelectRebuilt(props) {
     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: 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__default.createElement(React__default.Fragment, null,
-            React__default.createElement("select", Object.assign({ id: id, name: name, disabled: props.disabled, autoFocus: props.autoFocus, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, value: props.value, "aria-label": props["aria-label"], "aria-describedby": descriptionVisible
+            React__default.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(formFieldStyles.input, props.UNSAFE_experimentalStyles && styles.select) }, dataAttrs), props.children),
             React__default.createElement(FormFieldPostFix, { variation: "select", className: styles.selectPostfix }))));

package/dist/sharedHelpers/types.d.ts

@@ -170,6 +170,14 @@ export interface HTMLInputBaseProps extends AriaInputProps {
      * Tab index for keyboard navigation.
      */
     readonly tabIndex?: number;
+    /**
+     * Maximum number of characters allowed in the input.
+     */
+    readonly maxLength?: number;
+    /**
+     * Whether the input is required before form submission.
+     */
+    readonly required?: boolean;
 }
 export interface Affix {
     readonly label?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.117.0",
+  "version": "6.118.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -541,5 +541,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "9e6be14fefe016c5d2cebae54d087531dac6e248"
+  "gitHead": "f1eb424003be7b98eb885b0f10dce37e072c7bda"
 }