@jobber/components 6.90.2 → 6.90.4

package/dist/Autocomplete/index.mjs

@@ -1,5 +1,5 @@
 import React__default, { useState, useRef, useEffect, useCallback, useMemo, forwardRef } from 'react';
-import { u as useFloating, b as autoUpdate, o as offset, f as flip, e as size, r as useListNavigation, c as useDismiss, d as useInteractions, t as useTransitionStyles, F as FloatingPortal, q as FloatingFocusManager } from '../floating-ui.react-es.js';
+import { u as useFloating, b as autoUpdate, o as offset, f as flip, e as size, q as useListNavigation, c as useDismiss, d as useInteractions, r as useTransitionStyles, F as FloatingPortal, n as FloatingFocusManager } from '../floating-ui.react-es.js';
 import classnames from 'classnames';
 import { tokens } from '@jobber/design';
 import { a as useCallbackRef_2, u as useDebounce_2 } from '../useDebounce-es.js';

package/dist/DataTableTable-cjs.js

@@ -42,11 +42,11 @@ function SortIcon({ direction }) {
 var styles = {"container":"_1-DPmbxOkZ8-","tableElement":"kJeYcsgg700-","header":"_5d2OcsTVgzU-","headerCell":"LTx0tCU3F2I-","sortableButton":"WTQCrd2d8nw-","focusArea":"RipbH3rRU-E-","row":"sJQbtw-NEHU-","cell":"_1UpLYTK64uY-","footer":"qe-6UrAFLTo-","actions":"_2fZsLSaNPnI-","rowActions":"pElxuwpGmCI-","pagination":"thJ-CSoe0ps-","spinning":"EBpmC7cZzCs-"};
 
 function DataTableActions(props) {
-    return (React.createElement("div", Object.assign({ className: classnames(styles.actions, props.className) }, props), props.children));
+    return (React.createElement("div", Object.assign({}, props, { className: classnames(styles.actions, props.className) }), props.children));
 }
 
 function DataTableBody(props) {
-    return (React.createElement("tbody", Object.assign({ className: classnames(props.className) }, props), props.children));
+    return (React.createElement("tbody", Object.assign({}, props, { className: classnames(props.className) }), props.children));
 }
 
 const DataTableCell = React.forwardRef((props, ref) => {
@@ -55,18 +55,18 @@ const DataTableCell = React.forwardRef((props, ref) => {
 DataTableCell.displayName = "DataTableCell";
 
 function DataTableContainer(props) {
-    return (React.createElement("div", Object.assign({ className: classnames(styles.container, props.className) }, props), props.children));
+    return (React.createElement("div", Object.assign({}, props, { className: classnames(styles.container, props.className) }), props.children));
 }
 
 function DataTableFooter(_a) {
     var { children, className, colSpan } = _a, props = tslib_es6.__rest(_a, ["children", "className", "colSpan"]);
-    return (React.createElement("tfoot", Object.assign({ className: classnames(styles.footer, className) }, props),
+    return (React.createElement("tfoot", Object.assign({}, props, { className: classnames(styles.footer, className) }),
         React.createElement("tr", null,
             React.createElement("td", { colSpan: colSpan }, children))));
 }
 
 function DataTableHeader(props) {
-    return (React.createElement("thead", Object.assign({ className: classnames(styles.header, props.className) }, props),
+    return (React.createElement("thead", Object.assign({}, props, { className: classnames(styles.header, props.className) }),
         React.createElement("tr", null, props.children)));
 }
 
@@ -77,7 +77,7 @@ DataTableHeaderCell.displayName = "DataTableHeaderCell";
 
 function DataTablePagination(_a) {
     var { children, className } = _a, props = tslib_es6.__rest(_a, ["children", "className"]);
-    return (React.createElement("div", Object.assign({ className: classnames(styles.pagination, className) }, props), children));
+    return (React.createElement("div", Object.assign({}, props, { className: classnames(styles.pagination, className) }), children));
 }
 
 function DataTablePaginationButton({ direction, onClick, disabled = false, ariaLabel, }) {
@@ -86,7 +86,7 @@ function DataTablePaginationButton({ direction, onClick, disabled = false, ariaL
 }
 
 const DataTableRow = React.forwardRef((props, ref) => {
-    return (React.createElement("tr", Object.assign({ className: classnames(styles.row, props.className), ref: ref }, props), props.children));
+    return (React.createElement("tr", Object.assign({}, props, { className: classnames(styles.row, props.className), ref: ref }), props.children));
 });
 DataTableRow.displayName = "DataTableRow";
 
@@ -108,7 +108,7 @@ function DataTableSortableHeader(props) {
 }
 
 function DataTableTable(props) {
-    return (React.createElement("table", Object.assign({ className: classnames(styles.tableElement, props.className) }, props), props.children));
+    return (React.createElement("table", Object.assign({}, props, { className: classnames(styles.tableElement, props.className) }), props.children));
 }
 
 exports.DataTableActions = DataTableActions;

package/dist/DataTableTable-es.js

@@ -40,11 +40,11 @@ function SortIcon({ direction }) {
 var styles = {"container":"_1-DPmbxOkZ8-","tableElement":"kJeYcsgg700-","header":"_5d2OcsTVgzU-","headerCell":"LTx0tCU3F2I-","sortableButton":"WTQCrd2d8nw-","focusArea":"RipbH3rRU-E-","row":"sJQbtw-NEHU-","cell":"_1UpLYTK64uY-","footer":"qe-6UrAFLTo-","actions":"_2fZsLSaNPnI-","rowActions":"pElxuwpGmCI-","pagination":"thJ-CSoe0ps-","spinning":"EBpmC7cZzCs-"};
 
 function DataTableActions(props) {
-    return (React__default.createElement("div", Object.assign({ className: classnames(styles.actions, props.className) }, props), props.children));
+    return (React__default.createElement("div", Object.assign({}, props, { className: classnames(styles.actions, props.className) }), props.children));
 }
 
 function DataTableBody(props) {
-    return (React__default.createElement("tbody", Object.assign({ className: classnames(props.className) }, props), props.children));
+    return (React__default.createElement("tbody", Object.assign({}, props, { className: classnames(props.className) }), props.children));
 }
 
 const DataTableCell = forwardRef((props, ref) => {
@@ -53,18 +53,18 @@ const DataTableCell = forwardRef((props, ref) => {
 DataTableCell.displayName = "DataTableCell";
 
 function DataTableContainer(props) {
-    return (React__default.createElement("div", Object.assign({ className: classnames(styles.container, props.className) }, props), props.children));
+    return (React__default.createElement("div", Object.assign({}, props, { className: classnames(styles.container, props.className) }), props.children));
 }
 
 function DataTableFooter(_a) {
     var { children, className, colSpan } = _a, props = __rest(_a, ["children", "className", "colSpan"]);
-    return (React__default.createElement("tfoot", Object.assign({ className: classnames(styles.footer, className) }, props),
+    return (React__default.createElement("tfoot", Object.assign({}, props, { className: classnames(styles.footer, className) }),
         React__default.createElement("tr", null,
             React__default.createElement("td", { colSpan: colSpan }, children))));
 }
 
 function DataTableHeader(props) {
-    return (React__default.createElement("thead", Object.assign({ className: classnames(styles.header, props.className) }, props),
+    return (React__default.createElement("thead", Object.assign({}, props, { className: classnames(styles.header, props.className) }),
         React__default.createElement("tr", null, props.children)));
 }
 
@@ -75,7 +75,7 @@ DataTableHeaderCell.displayName = "DataTableHeaderCell";
 
 function DataTablePagination(_a) {
     var { children, className } = _a, props = __rest(_a, ["children", "className"]);
-    return (React__default.createElement("div", Object.assign({ className: classnames(styles.pagination, className) }, props), children));
+    return (React__default.createElement("div", Object.assign({}, props, { className: classnames(styles.pagination, className) }), children));
 }
 
 function DataTablePaginationButton({ direction, onClick, disabled = false, ariaLabel, }) {
@@ -84,7 +84,7 @@ function DataTablePaginationButton({ direction, onClick, disabled = false, ariaL
 }
 
 const DataTableRow = forwardRef((props, ref) => {
-    return (React__default.createElement("tr", Object.assign({ className: classnames(styles.row, props.className), ref: ref }, props), props.children));
+    return (React__default.createElement("tr", Object.assign({}, props, { className: classnames(styles.row, props.className), ref: ref }), props.children));
 });
 DataTableRow.displayName = "DataTableRow";
 
@@ -106,7 +106,7 @@ function DataTableSortableHeader(props) {
 }
 
 function DataTableTable(props) {
-    return (React__default.createElement("table", Object.assign({ className: classnames(styles.tableElement, props.className) }, props), props.children));
+    return (React__default.createElement("table", Object.assign({}, props, { className: classnames(styles.tableElement, props.className) }), props.children));
 }
 
 export { DataTableActions as D, SortIcon as S, SortDirection as a, DataTableBody as b, DataTableCell as c, DataTableContainer as d, DataTableFooter as e, DataTableHeader as f, DataTableHeaderCell as g, DataTablePagination as h, DataTablePaginationButton as i, DataTableRow as j, DataTableRowActions as k, DataTableSortableHeader as l, DataTableTable as m };

package/dist/DatePicker-es.js

@@ -1,7 +1,7 @@
 import React__default, { cloneElement, Component, createRef, useRef, useCallback, useEffect, createElement, forwardRef, isValidElement, useState } from 'react';
 import classnames from 'classnames';
 import { c as clsx } from './clsx-es.js';
-import { u as useFloating, b as autoUpdate, f as flip, o as offset, a as arrow, v as FloatingArrow } from './floating-ui.react-es.js';
+import { u as useFloating, b as autoUpdate, f as flip, o as offset, a as arrow, t as FloatingArrow } from './floating-ui.react-es.js';
 import ReactDOM__default from 'react-dom';
 import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-es.js';
 import { T as Typography } from './Typography-es.js';

package/dist/Modal/Modal.rebuilt.d.ts

@@ -7,5 +7,5 @@ export declare function ModalActivator({ children }: PropsWithChildren): React.J
 /**
  * Background overlay for the modal. Used in the ModalContent.
  */
-export declare function ModalOverlay(): React.JSX.Element;
+export declare function ModalOverlay({ children }: PropsWithChildren): React.JSX.Element;
 export declare function ModalContent({ children }: ModalContainerProps): React.JSX.Element;

package/dist/Modal/index.cjs

@@ -92,14 +92,13 @@ function useModal({ open, activatorRef: refProp, onRequestClose, }) {
         },
         open: open,
     });
-    const click = floatingUi_react.useClick(floatingContext);
     const dismiss = floatingUi_react.useDismiss(floatingContext, {
-        outsidePressEvent: "click",
+        outsidePressEvent: "pointerdown",
         escapeKey: true,
         bubbles: false,
     });
     const role = floatingUi_react.useRole(floatingContext);
-    const { getFloatingProps } = floatingUi_react.useInteractions([click, dismiss, role]);
+    const { getFloatingProps } = floatingUi_react.useInteractions([dismiss, role]);
     const parentId = floatingUi_react.useFloatingParentNodeId();
     return {
         floatingRefs,
@@ -192,25 +191,30 @@ function ModalActivator({ children }) {
 /**
  * Background overlay for the modal. Used in the ModalContent.
  */
-function ModalOverlay() {
-    const { onRequestClose } = useModalContext();
-    const { overlayBackground } = useModalStyles();
-    return (React.createElement(framerMotion.motion.div, { onClick: onRequestClose, className: overlayBackground, initial: { opacity: 0 }, animate: { opacity: 0.8 }, exit: { opacity: 0 }, transition: { duration: 0.2 } }));
+function ModalOverlay({ children }) {
+    const { overlay, overlayBackground } = useModalStyles();
+    const { floatingNodeId } = useModalContext();
+    return (React.createElement(floatingUi_react.FloatingOverlay, { lockScroll: true, className: overlay, "data-modal-node-id": floatingNodeId },
+        React.createElement(framerMotion.motion.div, { "aria-hidden": "true", className: overlayBackground, initial: { opacity: 0 }, animate: { opacity: 0.8 }, exit: { opacity: 0 }, transition: { duration: 0.2 }, "data-modal-node-id": floatingNodeId }),
+        children));
 }
 function ModalContent({ children }) {
     const { open, floatingContext, activatorRef, floatingRefs, size, floatingNodeId, modalLabelledBy, getFloatingProps, } = useModalContext();
-    const { modal, overlay } = useModalStyles(size);
+    const { modal } = useModalStyles(size);
     return (React.createElement(framerMotion.AnimatePresence, null, open && (React.createElement(floatingUi_react.FloatingNode, { id: floatingNodeId },
         React.createElement(floatingUi_react.FloatingPortal, null,
             React.createElement(AtlantisPortalContent.AtlantisPortalContent, null,
-                React.createElement(floatingUi_react.FloatingOverlay, { className: overlay },
-                    React.createElement(floatingUi_react.FloatingFocusManager, { context: floatingContext, returnFocus: (activatorRef === null || activatorRef === void 0 ? void 0 : activatorRef.current) ? activatorRef : true, initialFocus: floatingRefs === null || floatingRefs === void 0 ? void 0 : floatingRefs.floating },
-                        React.createElement("div", Object.assign({ ref: floatingRefs === null || floatingRefs === void 0 ? void 0 : floatingRefs.setFloating, role: "dialog", tabIndex: 0, "aria-labelledby": modalLabelledBy }, getFloatingProps()),
-                            React.createElement(ModalOverlay, null),
-                            React.createElement(framerMotion.motion.div, { "data-floating-ui-focusable": true, className: modal, initial: { scale: 0.9, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0.9, opacity: 0 }, transition: {
-                                    duration: 0.2,
-                                    ease: "easeInOut",
-                                } }, children))))))))));
+                React.createElement(ModalOverlay, null,
+                    React.createElement(floatingUi_react.FloatingFocusManager, { context: floatingContext, returnFocus: (activatorRef === null || activatorRef === void 0 ? void 0 : activatorRef.current) ? activatorRef : true, order: ["floating", "content"] },
+                        React.createElement(framerMotion.motion.div, { initial: { scale: 0.9, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0.9, opacity: 0 }, transition: {
+                                duration: 0.2,
+                                ease: "easeInOut",
+                            } },
+                            React.createElement("div", Object.assign({ ref: floatingRefs === null || floatingRefs === void 0 ? void 0 : floatingRefs.setFloating, "data-modal-node-id": floatingNodeId }, getFloatingProps({
+                                role: "dialog",
+                                className: modal,
+                                "aria-labelledby": modalLabelledBy,
+                            })), children))))))))));
 }
 
 function Modal(props) {

package/dist/Modal/index.mjs

@@ -9,7 +9,7 @@ import { H as Heading } from '../Heading-es.js';
 import { B as Button } from '../Button-es.js';
 import { B as ButtonDismiss } from '../ButtonDismiss-es.js';
 import { n as noop } from '../noop-es.js';
-import { h as useFloatingNodeId, u as useFloating, m as useClick, c as useDismiss, n as useRole, d as useInteractions, g as useFloatingParentNodeId, i as FloatingTree, j as FloatingNode, F as FloatingPortal, p as FloatingOverlay, q as FloatingFocusManager } from '../floating-ui.react-es.js';
+import { h as useFloatingNodeId, u as useFloating, c as useDismiss, m as useRole, d as useInteractions, g as useFloatingParentNodeId, i as FloatingTree, j as FloatingNode, F as FloatingPortal, n as FloatingFocusManager, p as FloatingOverlay } from '../floating-ui.react-es.js';
 import { b as identity } from '../identity-es.js';
 import { A as AtlantisPortalContent } from '../AtlantisPortalContent-es.js';
 import '../Typography-es.js';
@@ -90,14 +90,13 @@ function useModal({ open, activatorRef: refProp, onRequestClose, }) {
         },
         open: open,
     });
-    const click = useClick(floatingContext);
     const dismiss = useDismiss(floatingContext, {
-        outsidePressEvent: "click",
+        outsidePressEvent: "pointerdown",
         escapeKey: true,
         bubbles: false,
     });
     const role = useRole(floatingContext);
-    const { getFloatingProps } = useInteractions([click, dismiss, role]);
+    const { getFloatingProps } = useInteractions([dismiss, role]);
     const parentId = useFloatingParentNodeId();
     return {
         floatingRefs,
@@ -190,25 +189,30 @@ function ModalActivator({ children }) {
 /**
  * Background overlay for the modal. Used in the ModalContent.
  */
-function ModalOverlay() {
-    const { onRequestClose } = useModalContext();
-    const { overlayBackground } = useModalStyles();
-    return (React__default.createElement(motion.div, { onClick: onRequestClose, className: overlayBackground, initial: { opacity: 0 }, animate: { opacity: 0.8 }, exit: { opacity: 0 }, transition: { duration: 0.2 } }));
+function ModalOverlay({ children }) {
+    const { overlay, overlayBackground } = useModalStyles();
+    const { floatingNodeId } = useModalContext();
+    return (React__default.createElement(FloatingOverlay, { lockScroll: true, className: overlay, "data-modal-node-id": floatingNodeId },
+        React__default.createElement(motion.div, { "aria-hidden": "true", className: overlayBackground, initial: { opacity: 0 }, animate: { opacity: 0.8 }, exit: { opacity: 0 }, transition: { duration: 0.2 }, "data-modal-node-id": floatingNodeId }),
+        children));
 }
 function ModalContent({ children }) {
     const { open, floatingContext, activatorRef, floatingRefs, size, floatingNodeId, modalLabelledBy, getFloatingProps, } = useModalContext();
-    const { modal, overlay } = useModalStyles(size);
+    const { modal } = useModalStyles(size);
     return (React__default.createElement(AnimatePresence, null, open && (React__default.createElement(FloatingNode, { id: floatingNodeId },
         React__default.createElement(FloatingPortal, null,
             React__default.createElement(AtlantisPortalContent, null,
-                React__default.createElement(FloatingOverlay, { className: overlay },
-                    React__default.createElement(FloatingFocusManager, { context: floatingContext, returnFocus: (activatorRef === null || activatorRef === void 0 ? void 0 : activatorRef.current) ? activatorRef : true, initialFocus: floatingRefs === null || floatingRefs === void 0 ? void 0 : floatingRefs.floating },
-                        React__default.createElement("div", Object.assign({ ref: floatingRefs === null || floatingRefs === void 0 ? void 0 : floatingRefs.setFloating, role: "dialog", tabIndex: 0, "aria-labelledby": modalLabelledBy }, getFloatingProps()),
-                            React__default.createElement(ModalOverlay, null),
-                            React__default.createElement(motion.div, { "data-floating-ui-focusable": true, className: modal, initial: { scale: 0.9, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0.9, opacity: 0 }, transition: {
-                                    duration: 0.2,
-                                    ease: "easeInOut",
-                                } }, children))))))))));
+                React__default.createElement(ModalOverlay, null,
+                    React__default.createElement(FloatingFocusManager, { context: floatingContext, returnFocus: (activatorRef === null || activatorRef === void 0 ? void 0 : activatorRef.current) ? activatorRef : true, order: ["floating", "content"] },
+                        React__default.createElement(motion.div, { initial: { scale: 0.9, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0.9, opacity: 0 }, transition: {
+                                duration: 0.2,
+                                ease: "easeInOut",
+                            } },
+                            React__default.createElement("div", Object.assign({ ref: floatingRefs === null || floatingRefs === void 0 ? void 0 : floatingRefs.setFloating, "data-modal-node-id": floatingNodeId }, getFloatingProps({
+                                role: "dialog",
+                                className: modal,
+                                "aria-labelledby": modalLabelledBy,
+                            })), children))))))))));
 }
 
 function Modal(props) {

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

@@ -1064,15 +1064,6 @@ 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'];
-  if (!strict) {
-    values.push('', undefined);
-  }
-  return values.includes(pointerType);
-}
 
 var isClient$1 = typeof document !== 'undefined';
 
@@ -5924,114 +5915,6 @@ 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, true) && 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, true) && 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',
@@ -7413,7 +7296,6 @@ 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

@@ -1043,15 +1043,6 @@ 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'];
-  if (!strict) {
-    values.push('', undefined);
-  }
-  return values.includes(pointerType);
-}
 
 var isClient$1 = typeof document !== 'undefined';
 
@@ -5903,114 +5894,6 @@ 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, true) && 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, true) && 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',
@@ -7378,4 +7261,4 @@ function useTransitionStyles(context, props) {
   };
 }
 
-export { FloatingPortal as F, arrow as a, autoUpdate as b, useDismiss as c, useInteractions as d, size as e, flip as f, useFloatingParentNodeId as g, useFloatingNodeId as h, FloatingTree as i, FloatingNode as j, autoPlacement as k, limitShift as l, useClick as m, useRole as n, offset as o, FloatingOverlay as p, FloatingFocusManager as q, useListNavigation as r, shift as s, useTransitionStyles as t, useFloating as u, FloatingArrow as v };
+export { FloatingPortal as F, arrow as a, autoUpdate as b, useDismiss as c, useInteractions as d, size as e, flip as f, useFloatingParentNodeId as g, useFloatingNodeId as h, FloatingTree as i, FloatingNode as j, autoPlacement as k, limitShift as l, useRole as m, FloatingFocusManager as n, offset as o, FloatingOverlay as p, useListNavigation as q, useTransitionStyles as r, shift as s, FloatingArrow as t, useFloating as u };

package/dist/styles.css

@@ -4630,8 +4630,6 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 
 .cRhQeXmZobs- {
   display: grid;
-  z-index: 1001;
-  z-index: var(--elevation-modal);
   -ms-flex-align: center;
       align-items: center;
   justify-items: center;
@@ -4644,11 +4642,10 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: 1001;
-  z-index: var(--elevation-modal);
+  outline: none;
   background-color: rgba(0, 0, 0, 0.32);
   background-color: var(--color-overlay);
-  opacity: 0.8;
+  will-change: opacity;
 }
 
 .OiqCKNmbHZ0- {
@@ -4667,12 +4664,16 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   border: var(--border-base) solid var(--color-border);
   border-radius: 8px;
   border-radius: var(--radius-base);
+  outline: none;
   background-color: rgba(255, 255, 255, 1);
   background-color: var(--color-surface);
   -ms-flex: 0 0 auto;
       flex: 0 0 auto;
-  outline-color: hsl(198, 12%, 57%);
-  outline-color: var(--color-focus);
+}
+
+.OiqCKNmbHZ0-:focus-visible {
+  box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
+  box-shadow: var(--shadow-focus);
 }
 
 /* Adjust `Content` and `Tab` components public padding to match the modal */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.90.2",
+  "version": "6.90.4",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -541,5 +541,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "06a9b95690feb709536b820b4d1a6ffcd3a93255"
+  "gitHead": "613eb4a310fefc9f1d1ec4f8ae2bb398dcaaffff"
 }