@jobber/components 6.104.1 → 6.105.1

package/dist/InputTime/index.cjs

@@ -205,7 +205,7 @@ function timeStringToDate(timeString, baseDate) {
     }
 }
 
-function useInputTimeActions({ onChange, value, inputRef, onFocus, onBlur, onKeyDown, }) {
+function useInputTimeActions({ onChange, value, inputRef, onFocus, onBlur, onKeyDown, onClick, onMouseDown, onMouseUp, onPointerDown, onPointerUp, }) {
     function handleChangeEvent(event) {
         handleChange(event.target.value);
     }
@@ -232,6 +232,21 @@ function useInputTimeActions({ onChange, value, inputRef, onFocus, onBlur, onKey
     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,
@@ -239,6 +254,11 @@ function useInputTimeActions({ onChange, value, inputRef, onFocus, onBlur, onKey
         handleClear,
         handleFocus,
         handleKeyDown,
+        handleClick,
+        handleMouseDown,
+        handleMouseUp,
+        handlePointerDown,
+        handlePointerUp,
     };
 }
 
@@ -249,7 +269,7 @@ function InputTimeRebuilt(_a) {
     const generatedId = React.useId();
     const id = props.id || generatedId;
     const { inputStyle } = FormField.useFormFieldWrapperStyles(props);
-    const { handleChangeEvent, handleChange, handleBlur, handleClear, handleFocus, handleKeyDown, } = useInputTimeActions({
+    const { handleChangeEvent, handleChange, handleBlur, handleClear, handleFocus, handleKeyDown, handleClick, handleMouseDown, handleMouseUp, handlePointerDown, handlePointerUp, } = useInputTimeActions({
         onChange,
         value,
         readOnly,
@@ -258,6 +278,11 @@ function InputTimeRebuilt(_a) {
         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,
@@ -276,7 +301,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: inputStyle, 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, "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: inputStyle, id: id, disabled: props.disabled, readOnly: readOnly, autoComplete: autoComplete, autoFocus: props.autoFocus, max: props.max, min: props.min, value: dateToTimeString(value), onChange: handleChangeEvent, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onClick: handleClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, "data-testid": "ATL-InputTime-input", "aria-label": props["aria-label"], "aria-describedby": descriptionVisible ? descriptionIdentifier : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-required": props["aria-required"] }, dataAttrs))));
 }
 function useInputTimeRefs(inputRef) {
     const internalRef = React.useRef(null);

package/dist/InputTime/index.mjs

@@ -203,7 +203,7 @@ function timeStringToDate(timeString, baseDate) {
     }
 }
 
-function useInputTimeActions({ onChange, value, inputRef, onFocus, onBlur, onKeyDown, }) {
+function useInputTimeActions({ onChange, value, inputRef, onFocus, onBlur, onKeyDown, onClick, onMouseDown, onMouseUp, onPointerDown, onPointerUp, }) {
     function handleChangeEvent(event) {
         handleChange(event.target.value);
     }
@@ -230,6 +230,21 @@ function useInputTimeActions({ onChange, value, inputRef, onFocus, onBlur, onKey
     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,
@@ -237,6 +252,11 @@ function useInputTimeActions({ onChange, value, inputRef, onFocus, onBlur, onKey
         handleClear,
         handleFocus,
         handleKeyDown,
+        handleClick,
+        handleMouseDown,
+        handleMouseUp,
+        handlePointerDown,
+        handlePointerUp,
     };
 }
 
@@ -247,7 +267,7 @@ function InputTimeRebuilt(_a) {
     const generatedId = useId();
     const id = props.id || generatedId;
     const { inputStyle } = useFormFieldWrapperStyles(props);
-    const { handleChangeEvent, handleChange, handleBlur, handleClear, handleFocus, handleKeyDown, } = useInputTimeActions({
+    const { handleChangeEvent, handleChange, handleBlur, handleClear, handleFocus, handleKeyDown, handleClick, handleMouseDown, handleMouseUp, handlePointerDown, handlePointerUp, } = useInputTimeActions({
         onChange,
         value,
         readOnly,
@@ -256,6 +276,11 @@ function InputTimeRebuilt(_a) {
         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,
@@ -274,7 +299,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: inputStyle, 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, "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: inputStyle, id: id, disabled: props.disabled, readOnly: readOnly, autoComplete: autoComplete, autoFocus: props.autoFocus, max: props.max, min: props.min, value: dateToTimeString(value), onChange: handleChangeEvent, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onClick: handleClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, "data-testid": "ATL-InputTime-input", "aria-label": props["aria-label"], "aria-describedby": descriptionVisible ? descriptionIdentifier : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-required": props["aria-required"] }, dataAttrs))));
 }
 function useInputTimeRefs(inputRef) {
     const internalRef = useRef(null);

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

@@ -1065,6 +1065,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';
 
@@ -4562,6 +4568,114 @@ const FloatingOverlay = /*#__PURE__*/React__namespace.forwardRef(function Floati
   });
 });
 
+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__namespace.useRef();
+  const didKeyDownRef = React__namespace.useRef(false);
+  const reference = React__namespace.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__namespace.useMemo(() => enabled ? {
+    reference
+  } : {}, [enabled, reference]);
+}
+
 const bubbleHandlerKeys = {
   pointerdown: 'onPointerDown',
   mousedown: 'onMouseDown',
@@ -5943,6 +6057,7 @@ exports.limitShift = limitShift;
 exports.offset = offset;
 exports.shift = shift;
 exports.size = size;
+exports.useClick = useClick;
 exports.useDismiss = useDismiss;
 exports.useFloating = useFloating;
 exports.useFloatingNodeId = useFloatingNodeId;

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/sharedHelpers/types.d.ts

@@ -82,6 +82,32 @@ export interface FocusEvents<Target = HTMLElement> {
      */
     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.

package/dist/styles.css

@@ -99,11 +99,13 @@
   padding: var(--space-small) 0 var(--space-smaller) var(--space-small);
   border-bottom: 1px solid hsl(200, 13%, 87%);
   border-bottom: var(--border-base) solid var(--color-border);
+  cursor: default;
 }
 
 .Twgjn26oldE- {
   padding: 8px 16px;
   padding: var(--space-small) var(--space-base);
+  cursor: default;
 }
 
 .mc1-CEwZtHE- {
@@ -132,6 +134,7 @@
 .vxk57ZhP8GU- {
   padding: 8px 0 4px 8px;
   padding: var(--space-small) 0 var(--space-smaller) var(--space-small);
+  cursor: default;
 }
 
 .j4h-0Mxa5gk- {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.104.1",
+  "version": "6.105.1",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -538,5 +538,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "9e41c4bf3138e65ca312054132210f5f7fc572b4"
+  "gitHead": "2e40c551d4af9f4de5d134287b55928b73a518b9"
 }