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

package/dist/floating-ui.react-es.js

@@ -1044,6 +1044,12 @@ function isVirtualPointerEvent(event) {
   // iOS VoiceOver returns 0.333• for width/height.
   event.width < 1 && event.height < 1 && event.pressure === 0 && event.detail === 0 && event.pointerType === 'touch';
 }
+function isMouseLikePointerType(pointerType, strict) {
+  // On some Linux machines with Chromium, mouse inputs return a `pointerType`
+  // of "pen": https://github.com/floating-ui/floating-ui/issues/2015
+  const values = ['mouse', 'pen'];
+  return values.includes(pointerType);
+}
 
 var isClient$1 = typeof document !== 'undefined';
 
@@ -4541,6 +4547,114 @@ const FloatingOverlay = /*#__PURE__*/React.forwardRef(function FloatingOverlay(p
   });
 });
 
+function isButtonTarget(event) {
+  return isHTMLElement(event.target) && event.target.tagName === 'BUTTON';
+}
+function isAnchorTarget(event) {
+  return isHTMLElement(event.target) && event.target.tagName === 'A';
+}
+function isSpaceIgnored(element) {
+  return isTypeableElement(element);
+}
+/**
+ * Opens or closes the floating element when clicking the reference element.
+ * @see https://floating-ui.com/docs/useClick
+ */
+function useClick(context, props) {
+  if (props === void 0) {
+    props = {};
+  }
+  const {
+    open,
+    onOpenChange,
+    dataRef,
+    elements: {
+      domReference
+    }
+  } = context;
+  const {
+    enabled = true,
+    event: eventOption = 'click',
+    toggle = true,
+    ignoreMouse = false,
+    keyboardHandlers = true,
+    stickIfOpen = true
+  } = props;
+  const pointerTypeRef = React.useRef();
+  const didKeyDownRef = React.useRef(false);
+  const reference = React.useMemo(() => ({
+    onPointerDown(event) {
+      pointerTypeRef.current = event.pointerType;
+    },
+    onMouseDown(event) {
+      const pointerType = pointerTypeRef.current;
+
+      // Ignore all buttons except for the "main" button.
+      // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
+      if (event.button !== 0) return;
+      if (eventOption === 'click') return;
+      if (isMouseLikePointerType(pointerType) && ignoreMouse) return;
+      if (open && toggle && (dataRef.current.openEvent && stickIfOpen ? dataRef.current.openEvent.type === 'mousedown' : true)) {
+        onOpenChange(false, event.nativeEvent, 'click');
+      } else {
+        // Prevent stealing focus from the floating element
+        event.preventDefault();
+        onOpenChange(true, event.nativeEvent, 'click');
+      }
+    },
+    onClick(event) {
+      const pointerType = pointerTypeRef.current;
+      if (eventOption === 'mousedown' && pointerTypeRef.current) {
+        pointerTypeRef.current = undefined;
+        return;
+      }
+      if (isMouseLikePointerType(pointerType) && ignoreMouse) return;
+      if (open && toggle && (dataRef.current.openEvent && stickIfOpen ? dataRef.current.openEvent.type === 'click' : true)) {
+        onOpenChange(false, event.nativeEvent, 'click');
+      } else {
+        onOpenChange(true, event.nativeEvent, 'click');
+      }
+    },
+    onKeyDown(event) {
+      pointerTypeRef.current = undefined;
+      if (event.defaultPrevented || !keyboardHandlers || isButtonTarget(event)) {
+        return;
+      }
+      if (event.key === ' ' && !isSpaceIgnored(domReference)) {
+        // Prevent scrolling
+        event.preventDefault();
+        didKeyDownRef.current = true;
+      }
+      if (isAnchorTarget(event)) {
+        return;
+      }
+      if (event.key === 'Enter') {
+        if (open && toggle) {
+          onOpenChange(false, event.nativeEvent, 'click');
+        } else {
+          onOpenChange(true, event.nativeEvent, 'click');
+        }
+      }
+    },
+    onKeyUp(event) {
+      if (event.defaultPrevented || !keyboardHandlers || isButtonTarget(event) || isSpaceIgnored(domReference)) {
+        return;
+      }
+      if (event.key === ' ' && didKeyDownRef.current) {
+        didKeyDownRef.current = false;
+        if (open && toggle) {
+          onOpenChange(false, event.nativeEvent, 'click');
+        } else {
+          onOpenChange(true, event.nativeEvent, 'click');
+        }
+      }
+    }
+  }), [dataRef, domReference, eventOption, ignoreMouse, keyboardHandlers, onOpenChange, open, stickIfOpen, toggle]);
+  return React.useMemo(() => enabled ? {
+    reference
+  } : {}, [enabled, reference]);
+}
+
 const bubbleHandlerKeys = {
   pointerdown: 'onPointerDown',
   mousedown: 'onMouseDown',
@@ -5908,4 +6022,4 @@ function useTransitionStyles(context, props) {
   };
 }
 
-export { FloatingPortal as F, arrow as a, autoUpdate as b, size as c, useDismiss as d, useListNavigation as e, flip as f, useInteractions as g, useFloatingParentNodeId as h, useFloatingNodeId as i, FloatingTree as j, FloatingNode as k, limitShift as l, autoPlacement as m, useRole as n, offset as o, FloatingFocusManager as p, FloatingOverlay as q, useTransitionStyles as r, shift as s, FloatingArrow as t, useFloating as u };
+export { FloatingPortal as F, arrow as a, autoUpdate as b, size as c, useDismiss as d, useListNavigation as e, flip as f, useInteractions as g, useFloatingParentNodeId as h, useFloatingNodeId as i, FloatingTree as j, FloatingNode as k, limitShift as l, autoPlacement as m, useRole as n, offset as o, FloatingFocusManager as p, FloatingOverlay as q, useClick as r, shift as s, useTransitionStyles as t, useFloating as u, FloatingArrow as v };

package/dist/helpers-cjs.js

@@ -23,7 +23,7 @@ var jobberHooks__namespace = /*#__PURE__*/_interopNamespaceDefault(jobberHooks);
 
 const mockContainerWidth = (exactWidth) => {
     jest.spyOn(jobberHooks__namespace, "useResizeObserver").mockReturnValue([
-        { current: null },
+        { current: document.createElement("div") },
         {
             width: 1200,
             height: 800,

package/dist/helpers-es.js

@@ -2,7 +2,7 @@ import * as jobberHooks from '@jobber/hooks';
 
 const mockContainerWidth = (exactWidth) => {
     jest.spyOn(jobberHooks, "useResizeObserver").mockReturnValue([
-        { current: null },
+        { current: document.createElement("div") },
         {
             width: 1200,
             height: 800,

package/dist/index.cjs

@@ -112,6 +112,7 @@ require('react/jsx-runtime');
 require('react-dom');
 require('classnames');
 require('./maxHeight-cjs.js');
+require('./filterDataAttributes-cjs.js');
 require('./tslib.es6-cjs.js');
 require('color');
 require('react-router-dom');
@@ -121,9 +122,9 @@ require('./useChildComponent-cjs.js');
 require('./InternalChipDismissible-cjs.js');
 require('./useScrollToActive-cjs.js');
 require('./_baseFlatten-cjs.js');
-require('./_baseGet-cjs.js');
-require('./_getTag-cjs.js');
+require('./_getAllKeys-cjs.js');
 require('./isSymbol-cjs.js');
+require('./_getTag-cjs.js');
 require('./_baseEach-cjs.js');
 require('./debounce-cjs.js');
 require('./ComboboxContent-cjs.js');
@@ -219,7 +220,7 @@ exports.Cluster = Cluster.Cluster;
 exports.Container = Container.Container;
 exports.Cover = Cover.Cover;
 exports.Checkbox = Checkbox_index.Checkbox;
-exports.Chip = Chip.ChipNamespace;
+exports.Chip = Chip.Chip;
 exports.ChipDismissible = ChipDismissible.ChipDismissible;
 exports.ChipSelectable = ChipDismissible.ChipSelectable;
 exports.Icon = Icon.Icon;

package/dist/index.mjs

@@ -110,6 +110,7 @@ import 'react/jsx-runtime';
 import 'react-dom';
 import 'classnames';
 import './maxHeight-es.js';
+import './filterDataAttributes-es.js';
 import './tslib.es6-es.js';
 import 'color';
 import 'react-router-dom';
@@ -119,9 +120,9 @@ import './useChildComponent-es.js';
 import './InternalChipDismissible-es.js';
 import './useScrollToActive-es.js';
 import './_baseFlatten-es.js';
-import './_baseGet-es.js';
-import './_getTag-es.js';
+import './_getAllKeys-es.js';
 import './isSymbol-es.js';
+import './_getTag-es.js';
 import './_baseEach-es.js';
 import './debounce-es.js';
 import './ComboboxContent-es.js';

package/dist/omit-cjs.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var _commonjsHelpers = require('./_commonjsHelpers-cjs.js');
-var _baseGet = require('./_baseGet-cjs.js');
+var _getAllKeys = require('./_getAllKeys-cjs.js');
 var identity = require('./identity-cjs.js');
 var keysIn$3 = require('./keysIn-cjs.js');
 var _getTag = require('./_getTag-cjs.js');
@@ -35,7 +35,7 @@ function arrayEach$1(array, iteratee) {
 var _arrayEach = arrayEach$1;
 
 var copyObject$4 = keysIn$3._copyObject,
-    keys$1 = _baseGet.keys_1;
+    keys$1 = _getAllKeys.keys_1;
 
 /**
  * The base implementation of `_.assign` without support for multiple sources
@@ -71,7 +71,7 @@ function baseAssignIn$1(object, source) {
 var _baseAssignIn = baseAssignIn$1;
 
 var copyObject$2 = keysIn$3._copyObject,
-    getSymbols$1 = _baseGet._getSymbols;
+    getSymbols$1 = _getAllKeys._getSymbols;
 
 /**
  * Copies own symbols of `source` to `object`.
@@ -87,10 +87,10 @@ function copySymbols$1(source, object) {
 
 var _copySymbols = copySymbols$1;
 
-var arrayPush = _baseGet._arrayPush,
+var arrayPush = _getAllKeys._arrayPush,
     getPrototype = keysIn$3._getPrototype,
-    getSymbols = _baseGet._getSymbols,
-    stubArray = _baseGet.stubArray_1;
+    getSymbols = _getAllKeys._getSymbols,
+    stubArray = _getAllKeys.stubArray_1;
 
 /* Built-in method references for those with the same name as other `lodash` methods. */
 var nativeGetSymbols = Object.getOwnPropertySymbols;
@@ -130,7 +130,7 @@ function copySymbolsIn$1(source, object) {
 
 var _copySymbolsIn = copySymbolsIn$1;
 
-var baseGetAllKeys = _baseGet._baseGetAllKeys,
+var baseGetAllKeys = _getAllKeys._baseGetAllKeys,
     getSymbolsIn = _getSymbolsIn,
     keysIn$1 = keysIn$3.keysIn_1;
 
@@ -412,7 +412,7 @@ var Stack = identity._Stack,
     copyArray = keysIn$3._copyArray,
     copySymbols = _copySymbols,
     copySymbolsIn = _copySymbolsIn,
-    getAllKeys = _baseGet._getAllKeys,
+    getAllKeys = _getAllKeys._getAllKeys,
     getAllKeysIn$1 = _getAllKeysIn,
     getTag = _getTag._getTag,
     initCloneArray = _initCloneArray,
@@ -423,7 +423,7 @@ var Stack = identity._Stack,
     isMap = isMap_1,
     isObject = isObjectLike$2.isObject_1,
     isSet = isSet_1,
-    keys = _baseGet.keys_1,
+    keys = _getAllKeys.keys_1,
     keysIn = keysIn$3.keysIn_1;
 
 /** Used to compose bitmasks for cloning. */
@@ -625,7 +625,7 @@ function baseSlice$1(array, start, end) {
 
 var _baseSlice = baseSlice$1;
 
-var baseGet = _baseGet._baseGet,
+var baseGet = _getAllKeys._baseGet,
     baseSlice = _baseSlice;
 
 /**
@@ -642,10 +642,10 @@ function parent$1(object, path) {
 
 var _parent = parent$1;
 
-var castPath$1 = _baseGet._castPath,
+var castPath$1 = _getAllKeys._castPath,
     last = last_1,
     parent = _parent,
-    toKey = _baseGet._toKey;
+    toKey = _getAllKeys._toKey;
 
 /**
  * The base implementation of `_.unset`.
@@ -720,10 +720,10 @@ function flatRest$1(func) {
 
 var _flatRest = flatRest$1;
 
-var arrayMap = _baseGet._arrayMap,
+var arrayMap = _getAllKeys._arrayMap,
     baseClone = _baseClone,
     baseUnset = _baseUnset,
-    castPath = _baseGet._castPath,
+    castPath = _getAllKeys._castPath,
     copyObject = keysIn$3._copyObject,
     customOmitClone = _customOmitClone,
     flatRest = _flatRest,

package/dist/omit-es.js

@@ -1,5 +1,5 @@
 import { g as getDefaultExportFromCjs } from './_commonjsHelpers-es.js';
-import { k as keys_1, c as _getSymbols, _ as _arrayPush, s as stubArray_1, d as _baseGetAllKeys, e as _getAllKeys, b as _baseGet, f as _castPath, g as _toKey, a as _arrayMap } from './_baseGet-es.js';
+import { k as keys_1, c as _getSymbols, _ as _arrayPush, s as stubArray_1, d as _baseGetAllKeys, e as _getAllKeys, b as _baseGet, f as _castPath, g as _toKey, a as _arrayMap } from './_getAllKeys-es.js';
 import { c as _Stack } from './identity-es.js';
 import { _ as _copyObject, k as keysIn_1, e as _getPrototype, f as _cloneArrayBuffer, b as _cloneTypedArray, a as _cloneBufferExports, c as _copyArray, d as _initCloneObject, g as _assignValue, i as isPlainObject_1 } from './keysIn-es.js';
 import { a as _getTag } from './_getTag-es.js';

package/dist/sharedHelpers/filterDataAttributes.d.ts

@@ -0,0 +1,17 @@
+type DataAttributes = Partial<Record<`data-${string}`, unknown>>;
+/**
+ * Filters and returns all data-* attributes from props.
+ * This allows components to accept standard HTML data attributes
+ * in their natural hyphenated syntax (e.g., data-test-id, data-loading).
+ *
+ * @param props - The component props object
+ * @returns An object containing only the data-* attributes
+ *
+ * @example
+ * ```tsx
+ * const dataAttrs = filterDataAttributes(props);
+ * return <input {...dataAttrs} />;
+ * ```
+ */
+export declare function filterDataAttributes<T extends object>(props: T): DataAttributes;
+export {};

package/dist/sharedHelpers/types.d.ts

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

package/dist/showToast-cjs.js

@@ -84,8 +84,8 @@ function showToast(props) {
 }
 const ToastContainer = React.forwardRef(ToastInternal);
 function ToasterOven(props) {
-    const toastRef = React.useRef();
-    React.useEffect(() => toastRef.current.add(props));
+    const toastRef = React.useRef(null);
+    React.useEffect(() => { var _a; return (_a = toastRef.current) === null || _a === void 0 ? void 0 : _a.add(props); });
     return React.createElement(ToastContainer, { ref: toastRef });
 }
 function ToastInternal(_, ref) {

package/dist/showToast-es.js

@@ -82,8 +82,8 @@ function showToast(props) {
 }
 const ToastContainer = forwardRef(ToastInternal);
 function ToasterOven(props) {
-    const toastRef = useRef();
-    useEffect(() => toastRef.current.add(props));
+    const toastRef = useRef(null);
+    useEffect(() => { var _a; return (_a = toastRef.current) === null || _a === void 0 ? void 0 : _a.add(props); });
     return React__default.createElement(ToastContainer, { ref: toastRef });
 }
 function ToastInternal(_, ref) {