@jobber/components 7.10.0 → 7.11.0

package/dist/Page/index.cjs

@@ -20,6 +20,7 @@ require('@jobber/design');
 require('../Menu-cjs.js');
 require('framer-motion');
 require('../floating-ui.react-cjs.js');
+require('../floating-ui.utils.dom-cjs.js');
 require('../index.esm-cjs.js');
 require('react-dom');
 require('../floating-ui.react-dom-cjs.js');
@@ -28,9 +29,11 @@ require('../maxHeight-cjs.js');
 require('../useRenderElement-cjs.js');
 require('../BottomSheet-cjs.js');
 require('../DrawerRoot-cjs.js');
+require('../useValueChanged-cjs.js');
 require('../OverlaySeparator-cjs.js');
 require('../Separator-cjs.js');
 require('../MenuSubmenuTrigger-cjs.js');
+require('../useBaseUiId-cjs.js');
 require('../filterDataAttributes-cjs.js');
 
 

package/dist/Page/index.mjs

@@ -18,6 +18,7 @@ import '@jobber/design';
 import '../Menu-es.js';
 import 'framer-motion';
 import '../floating-ui.react-es.js';
+import '../floating-ui.utils.dom-es.js';
 import '../index.esm-es.js';
 import 'react-dom';
 import '../floating-ui.react-dom-es.js';
@@ -26,7 +27,9 @@ import '../maxHeight-es.js';
 import '../useRenderElement-es.js';
 import '../BottomSheet-es.js';
 import '../DrawerRoot-es.js';
+import '../useValueChanged-es.js';
 import '../OverlaySeparator-es.js';
 import '../Separator-es.js';
 import '../MenuSubmenuTrigger-es.js';
+import '../useBaseUiId-es.js';
 import '../filterDataAttributes-es.js';

package/dist/Popover/index.cjs

@@ -5,6 +5,7 @@ require('../tslib.es6-cjs.js');
 require('react');
 require('classnames');
 require('../floating-ui.react-cjs.js');
+require('../floating-ui.utils.dom-cjs.js');
 require('../index.esm-cjs.js');
 require('react/jsx-runtime');
 require('react-dom');

package/dist/Popover/index.mjs

@@ -3,6 +3,7 @@ import '../tslib.es6-es.js';
 import 'react';
 import 'classnames';
 import '../floating-ui.react-es.js';
+import '../floating-ui.utils.dom-es.js';
 import '../index.esm-es.js';
 import 'react/jsx-runtime';
 import 'react-dom';

package/dist/Tooltip/index.cjs

@@ -4,6 +4,7 @@ var Tooltip = require('../Tooltip-cjs.js');
 require('react');
 require('classnames');
 require('../floating-ui.react-cjs.js');
+require('../floating-ui.utils.dom-cjs.js');
 require('../index.esm-cjs.js');
 require('react/jsx-runtime');
 require('react-dom');

package/dist/Tooltip/index.mjs

@@ -2,6 +2,7 @@ export { T as Tooltip } from '../Tooltip-es.js';
 import 'react';
 import 'classnames';
 import '../floating-ui.react-es.js';
+import '../floating-ui.utils.dom-es.js';
 import '../index.esm-es.js';
 import 'react/jsx-runtime';
 import 'react-dom';

package/dist/docs/Menu/Menu.md

@@ -1,55 +1,215 @@
 # Menu
 
-A Menu is made up of 2 primary parts: the trigger, typically a Button, and the
-Menu container.
+## Summary
 
-The Menu container is not visible by default, interacting with the trigger will
-open the Menu.
+The menu displays a list of options for a user to choose from. It is activated
+by an interactive element such as a button or icon button.
 
-The Menu is meant to offer a list of actions for a user to choose from, though
-only one may be used at a time. The Menu will close after an action is invoked,
-the ESC key is pressed, or a click outside the Menu is registered.
+## Anatomy
 
-Menu does not have a selected state. The actions are ephemeral with no state
-persisting between opens making them well suited for actions such as navigating
-to a new page, or launching a Modal.
+| Part       | Description                                                 |
+| ---------- | ----------------------------------------------------------- |
+| Trigger    | An interactive element that opens the menu                  |
+| Container  | The floating panel or sheet that contains the list of items |
+| Label      | Primary text of an item                                     |
+| Prefix     | Optional leading slot                                       |
+| Suffix     | Optional trailing slot                                      |
+| GroupLabel | Optional subdued heading used to group related items        |
+| Separator  | Optional horizontal divider used to separate group of items |
 
-Menu is navigable by keyboard with arrow keys. Because of this only one action
-may occur per row. Nesting additional interactive elements within a single Menu
-action prevents keyboard access. When the Trigger is activated by keyboard, we
-move focus to the first item in the Menu upon opening.
+## Behavior
 
-The other elements of a Menu are optional Sections, Separators and Headers.
-These elements are non interactive, nor focusable.
+#### Opening and closing the menu
 
-> Keep Menu item content simple. Aim for at most three columns per row: a
-> leading icon, a label, and one simple trailing element (e.g., a
-> `StatusIndicator`). More complex layouts increase cognitive load and can
-> introduce complexity with the Menu's built in alignment features.
+The menu opens when:
 
-### Small screens
+* The trigger is clicked or tapped
+* The trigger is triggered by keyboard E.g. Via Enter or Space keys
 
-When a user is on a small screen device (less than \~500px), the Menu when opened
-will display as a tray or bottom-sheet like interface, opening upward from the
-bottom of the screen.
+The menu closes when:
 
-It will have all the same elements as the standard version, and an additional
-Overlay covering the non-Menu area.
+* A action menu item is selected
+* A click or tap occurs outside the menu
+* The ESC key is pressed
 
-## Content guidelines
+Radio menu items remain open by default, but can be configured to close on
+selection.
 
-Menu action labels should be sentence-cased. This means in general, capitalize
-only the first letter of the label unless there is a proper noun (such as a
-person's name) in the label.
+#### Width
 
-Jobber features, such as jobs, quotes, and invoices, are not proper nouns and
-[should not be capitalized.](/content/product-vocabulary)
+Menu width should by default match the trigger's width **or** hug the width of
+the menu items so that the label doesn't wrap. The menu's width can by adjusted
+manually however.
 
-| ✅ Do                             | ❌ Don't                          |
-| -------------------------------- | -------------------------------- |
-| Send as text message             | Send As Text Message             |
-| Collect signature                | COLLECT SIGNATURE                |
-| Assign Jasmine Williams to visit | Assign jasmine williams to visit |
+#### Positioning
+
+Menu is positioned below the element that triggered it by default. It should
+automatically reposition to appear on the left, right, above, or bottom of the
+element that triggers it if the menu is cut off.
+
+#### Submenus
+
+Submenu opens next to the main menu item. On small screens, tapping a submenu
+opens up a second sheet that displays the nested menu items.
+
+#### Small screens
+
+When a user is on a small screen such as a mobile device, the menu opens up as a
+sheet anchored to the bottom of the screen.
+
+## Variants
+
+#### Menu Items
+
+**1. Action:** Standard one-time actions such as navigating or triggering a
+modal
+
+**2. Radio:** Persistent choices like a filter of a view preference. Use when
+choice persists and the user needs to see which option is active.
+
+**3. Submenu:** Opens a nested menu of options on click and on hover. Use when
+related actions are better surfaced one level deeper.
+
+#### Menu Items: States
+
+* Default
+* Highlighted
+* Selected (radio items only)
+
+#### Group Label and Separator
+
+Group labels and separators can be used to separate and group menu items into
+scannable sections.
+
+#### Custom Content
+
+* Menus have custom slots that support more flexible item layouts
+* Custom menu items can appear anywhere in a menu
+* The padding of the menu container should not be altered
+* Menu items must represent a single action. Avoid nesting interactive elements
+  inside a menu item
+
+## Content Guidelines
+
+#### Sentence case
+
+Menu action labels should be sentence-cased. Capitalize only the first letter of
+the label unless there is a proper noun (such as a person's name). Jobber
+features like jobs, quotes, and invoices are not proper nouns and should not be
+capitalized.
+
+| ✅ Do                    | ❌ Don't                 |
+| ----------------------- | ----------------------- |
+| Send text message       | Send Text Message       |
+| Collect signature       | COLLECT SIGNATURE       |
+| Assign Jasmine Williams | Assign jasmine williams |
+
+#### Verb-first labels
+
+Menu items represent actions. Lead with the verb so the SP can scan quickly.
+
+| ✅ Do                 | ❌ Don't              |
+| -------------------- | -------------------- |
+| Edit client          | Client editing       |
+| Send as text message | Text message options |
+| Archive quote        | Quote archiving      |
+
+#### Keep labels concise
+
+Aim for 2-4 words. Menu items are scanned, not read carefully.
+
+| ✅ Do              | ❌ Don't                             |
+| ----------------- | ----------------------------------- |
+| Delete job        | Delete this job permanently         |
+| Collect signature | Collect a signature from the client |
+| Mark as complete  | Mark this visit as complete         |
+
+#### Don't repeat the trigger context
+
+If the menu is triggered from a button on a job card, the items don't need to
+say "job" in every label.
+
+| ✅ Do    | ❌ Don't     |
+| ------- | ----------- |
+| Edit    | Edit job    |
+| Archive | Archive job |
+| Delete  | Delete job  |
+
+#### Use consistent verb tense
+
+All items in a single menu should use the same grammatical form.
+
+| ✅ Do                                    | ❌ Don't                                  |
+| --------------------------------------- | ---------------------------------------- |
+| Edit client / Send invoice / Delete job | Edit client / Sending invoice / Archived |
+| Mark as complete / Assign to team       | Completed / Assign to team               |
+
+#### Group labels should describe, not instruct
+
+Keep group labels to 1-2 words that name the category.
+
+| ✅ Do          | ❌ Don't                         |
+| ------------- | ------------------------------- |
+| Communication | Choose how to communicate       |
+| Actions       | Things you can do               |
+| Scheduling    | Schedule options for this visit |
+
+#### Destructive items should be explicit
+
+Name what's being removed so the SP isn't guessing, especially when the menu
+acts on multiple object types.
+
+| ✅ Do             | ❌ Don't |
+| ---------------- | ------- |
+| Delete job       | Delete  |
+| Remove line item | Remove  |
+| Cancel visit     | Cancel  |
+
+## Do's and Don'ts
+
+#### Do
+
+* ✅ Sentence case for menu item labels and group labels
+* ✅ Labels should be short and action oriented
+* ✅ Keep menu items simple
+* ✅ Use icons only when they add clarity
+* ✅ Cluster similar menu items together
+
+#### Don't
+
+* ❌ Avoid adding too many items in a menu
+* ❌ Don't mix unrelated actions in the same menu, or use grouping when needed
+
+## Accessibility
+
+Users need to be able to navigate to, open, select menu items, and close a menu
+with assistive technology.
+
+#### Keyboard navigation
+
+| Key                   | Behavior                                                           |
+| --------------------- | ------------------------------------------------------------------ |
+| Tab                   | Moves focus to the trigger                                         |
+| Up and Down arrows    | Closed menus: Opens menu. Opened menus: Moves up and down the list |
+| Left and Right arrows | Opens and closes a submenu                                         |
+| Enter or Space        | Closed menus: Opens menu. Opened menus: Selects menu item          |
+| Esc                   | Closes the menu                                                    |
+
+#### Touch target
+
+Minimum menu item height:
+
+* **Large screens:** 40px
+* **Small screens:** 48px
+
+## Related components
+
+* To trigger a single action rather than presenting a list of options, use a
+  [Button](../Button/Button.md) or [IconButton](/components/IconButton)
+* To allow the user to choose a value from a predefined list within a form, use
+  a [Select](../Select/Select.md)
+* To allow the user to search and filter through a list of options, use a
+  [Combobox](../Combobox/Combobox.md)
 
 
 ## Composable Version (Web Only)

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

@@ -1,6 +1,7 @@
 'use strict';
 
 var React = require('react');
+var floatingUi_utils_dom = require('./floating-ui.utils.dom-cjs.js');
 var index_esm = require('./index.esm-cjs.js');
 var jsxRuntime = require('react/jsx-runtime');
 var ReactDOM = require('react-dom');
@@ -86,7 +87,7 @@ function contains(parent, child) {
   }
 
   // then fallback to custom implementation with Shadow DOM support
-  if (rootNode && index_esm.isShadowRoot(rootNode)) {
+  if (rootNode && floatingUi_utils_dom.isShadowRoot(rootNode)) {
     let next = child;
     while (next) {
       if (parent === next) {
@@ -128,7 +129,7 @@ function getDocument$1(node) {
   return (node == null ? void 0 : node.ownerDocument) || document;
 }
 function isTypeableElement(element) {
-  return index_esm.isHTMLElement(element) && element.matches(TYPEABLE_SELECTOR);
+  return floatingUi_utils_dom.isHTMLElement(element) && element.matches(TYPEABLE_SELECTOR);
 }
 function isTypeableCombobox(element) {
   if (!element) return false;
@@ -650,7 +651,7 @@ const FloatingArrow = /*#__PURE__*/React__namespace.forwardRef(function Floating
   // https://github.com/floating-ui/floating-ui/issues/2932
   index(() => {
     if (!floating) return;
-    const isRTL = index_esm.getComputedStyle(floating).direction === 'rtl';
+    const isRTL = floatingUi_utils_dom.getComputedStyle(floating).direction === 'rtl';
     if (isRTL) {
       setIsRTL(true);
     }
@@ -923,7 +924,7 @@ function applyAttributeToOthers(uncorrectedAvoidElements, body, ariaHidden, iner
       return;
     }
     [].forEach.call(parent.children, node => {
-      if (index_esm.getNodeName(node) === 'script') return;
+      if (floatingUi_utils_dom.getNodeName(node) === 'script') return;
       if (elementsToKeep.has(node)) {
         deep(node);
       } else {
@@ -1077,7 +1078,7 @@ function useFloatingPortalNode(props) {
     if (!uniqueId) return;
     if (portalNodeRef.current) return;
     let container = root || (portalContext == null ? void 0 : portalContext.portalNode);
-    if (container && !index_esm.isNode(container)) container = container.current;
+    if (container && !floatingUi_utils_dom.isNode(container)) container = container.current;
     container = container || document.body;
     let idWrapper = null;
     if (id) {
@@ -1225,7 +1226,7 @@ function clearDisconnectedPreviouslyFocusedElements() {
 }
 function addPreviouslyFocusedElement(element) {
   clearDisconnectedPreviouslyFocusedElements();
-  if (element && index_esm.getNodeName(element) !== 'body') {
+  if (element && floatingUi_utils_dom.getNodeName(element) !== 'body') {
     previouslyFocusedElements.push(element);
     if (previouslyFocusedElements.length > LIST_LIMIT) {
       previouslyFocusedElements = previouslyFocusedElements.slice(-20);
@@ -1431,13 +1432,13 @@ function FloatingFocusManager(props) {
         if (restoreFocus && currentTarget !== domReference && !(target != null && target.isConnected) && activeElement(getDocument$1(floatingFocusElement)) === getDocument$1(floatingFocusElement).body) {
           // Let `FloatingPortal` effect knows that focus is still inside the
           // floating tree.
-          if (index_esm.isHTMLElement(floatingFocusElement)) {
+          if (floatingUi_utils_dom.isHTMLElement(floatingFocusElement)) {
             floatingFocusElement.focus();
           }
           const prevTabbableIndex = tabbableIndexRef.current;
           const tabbableContent = getTabbableContent();
           const nodeToFocus = tabbableContent[prevTabbableIndex] || tabbableContent[tabbableContent.length - 1] || floatingFocusElement;
-          if (index_esm.isHTMLElement(nodeToFocus)) {
+          if (floatingUi_utils_dom.isHTMLElement(nodeToFocus)) {
             nodeToFocus.focus();
           }
         }
@@ -1466,7 +1467,7 @@ function FloatingFocusManager(props) {
         dataRef.current.insideReactTree = false;
       });
     }
-    if (floating && index_esm.isHTMLElement(domReference)) {
+    if (floating && floatingUi_utils_dom.isHTMLElement(domReference)) {
       domReference.addEventListener('focusout', handleFocusOutside);
       domReference.addEventListener('pointerdown', handlePointerDown);
       floating.addEventListener('focusout', handleFocusOutside);
@@ -1506,7 +1507,7 @@ function FloatingFocusManager(props) {
     };
   }, [disabled, domReference, floating, modal, orderRef, portalContext, isUntrappedTypeableCombobox, guards, useInert, tree, getNodeId, getInsideElements]);
   index(() => {
-    if (disabled || !index_esm.isHTMLElement(floatingFocusElement)) return;
+    if (disabled || !floatingUi_utils_dom.isHTMLElement(floatingFocusElement)) return;
     const doc = getDocument$1(floatingFocusElement);
     const previouslyFocusedElement = activeElement(doc);
 
@@ -1588,7 +1589,7 @@ function FloatingFocusManager(props) {
         const tabbableReturnElement = getFirstTabbableElement(returnElement);
         if (
         // eslint-disable-next-line react-hooks/exhaustive-deps
-        returnFocusRef.current && !preventReturnFocusRef.current && index_esm.isHTMLElement(tabbableReturnElement) && (
+        returnFocusRef.current && !preventReturnFocusRef.current && floatingUi_utils_dom.isHTMLElement(tabbableReturnElement) && (
         // If the focus moved somewhere else after mount, avoid returning focus
         // since it likely entered a different element which should be
         // respected: https://github.com/floating-ui/floating-ui/issues/2607
@@ -1779,10 +1780,10 @@ const FloatingOverlay = /*#__PURE__*/React__namespace.forwardRef(function Floati
 });
 
 function isButtonTarget(event) {
-  return index_esm.isHTMLElement(event.target) && event.target.tagName === 'BUTTON';
+  return floatingUi_utils_dom.isHTMLElement(event.target) && event.target.tagName === 'BUTTON';
 }
 function isAnchorTarget(event) {
-  return index_esm.isHTMLElement(event.target) && event.target.tagName === 'A';
+  return floatingUi_utils_dom.isHTMLElement(event.target) && event.target.tagName === 'A';
 }
 function isSpaceIgnored(element) {
   return isTypeableElement(element);
@@ -2007,10 +2008,10 @@ function useDismiss(context, props) {
     const target = getTarget(event);
     const inertSelector = "[" + createAttribute('inert') + "]";
     const markers = getDocument$1(elements.floating).querySelectorAll(inertSelector);
-    let targetRootAncestor = index_esm.isElement(target) ? target : null;
-    while (targetRootAncestor && !index_esm.isLastTraversableNode(targetRootAncestor)) {
-      const nextParent = index_esm.getParentNode(targetRootAncestor);
-      if (index_esm.isLastTraversableNode(nextParent) || !index_esm.isElement(nextParent)) {
+    let targetRootAncestor = floatingUi_utils_dom.isElement(target) ? target : null;
+    while (targetRootAncestor && !floatingUi_utils_dom.isLastTraversableNode(targetRootAncestor)) {
+      const nextParent = floatingUi_utils_dom.getParentNode(targetRootAncestor);
+      if (floatingUi_utils_dom.isLastTraversableNode(nextParent) || !floatingUi_utils_dom.isElement(nextParent)) {
         break;
       }
       targetRootAncestor = nextParent;
@@ -2018,7 +2019,7 @@ function useDismiss(context, props) {
 
     // Check if the click occurred on a third-party element injected after the
     // floating element rendered.
-    if (markers.length && index_esm.isElement(target) && !isRootElement(target) &&
+    if (markers.length && floatingUi_utils_dom.isElement(target) && !isRootElement(target) &&
     // Clicked on a direct ancestor (e.g. FloatingOverlay).
     !contains(target, elements.floating) &&
     // If the target root element contains none of the markers, then the
@@ -2028,9 +2029,9 @@ function useDismiss(context, props) {
     }
 
     // Check if the click occurred on the scrollbar
-    if (index_esm.isHTMLElement(target) && floating) {
-      const lastTraversableNode = index_esm.isLastTraversableNode(target);
-      const style = index_esm.getComputedStyle(target);
+    if (floatingUi_utils_dom.isHTMLElement(target) && floating) {
+      const lastTraversableNode = floatingUi_utils_dom.isLastTraversableNode(target);
+      const style = floatingUi_utils_dom.getComputedStyle(target);
       const scrollRe = /auto|scroll/;
       const isScrollableX = lastTraversableNode || scrollRe.test(style.overflowX);
       const isScrollableY = lastTraversableNode || scrollRe.test(style.overflowY);
@@ -2105,7 +2106,7 @@ function useDismiss(context, props) {
       },
       // 0ms or 1ms don't work in Safari. 5ms appears to consistently work.
       // Only apply to WebKit for the test to remain 0ms.
-      index_esm.isWebKit() ? 5 : 0);
+      floatingUi_utils_dom.isWebKit() ? 5 : 0);
     }
     const doc = getDocument$1(elements.floating);
     if (escapeKey) {
@@ -2116,14 +2117,14 @@ function useDismiss(context, props) {
     outsidePress && doc.addEventListener(outsidePressEvent, outsidePressCapture ? closeOnPressOutsideCapture : closeOnPressOutside, outsidePressCapture);
     let ancestors = [];
     if (ancestorScroll) {
-      if (index_esm.isElement(elements.domReference)) {
-        ancestors = index_esm.getOverflowAncestors(elements.domReference);
+      if (floatingUi_utils_dom.isElement(elements.domReference)) {
+        ancestors = floatingUi_utils_dom.getOverflowAncestors(elements.domReference);
       }
-      if (index_esm.isElement(elements.floating)) {
-        ancestors = ancestors.concat(index_esm.getOverflowAncestors(elements.floating));
+      if (floatingUi_utils_dom.isElement(elements.floating)) {
+        ancestors = ancestors.concat(floatingUi_utils_dom.getOverflowAncestors(elements.floating));
       }
-      if (!index_esm.isElement(elements.reference) && elements.reference && elements.reference.contextElement) {
-        ancestors = ancestors.concat(index_esm.getOverflowAncestors(elements.reference.contextElement));
+      if (!floatingUi_utils_dom.isElement(elements.reference) && elements.reference && elements.reference.contextElement) {
+        ancestors = ancestors.concat(floatingUi_utils_dom.getOverflowAncestors(elements.reference.contextElement));
       }
     }
 
@@ -2196,7 +2197,7 @@ function useFloatingRootContext(options) {
   const nested = useFloatingParentNodeId() != null;
   if (process.env.NODE_ENV !== "production") {
     const optionDomReference = elementsProp.reference;
-    if (optionDomReference && !index_esm.isElement(optionDomReference)) {
+    if (optionDomReference && !floatingUi_utils_dom.isElement(optionDomReference)) {
       error('Cannot pass a virtual element to the `elements.reference` option,', 'as it must be a real DOM element. Use `refs.setPositionReference()`', 'instead.');
     }
   }
@@ -2272,7 +2273,7 @@ function useFloating(options) {
     }
   });
   const setPositionReference = React__namespace.useCallback(node => {
-    const computedPositionReference = index_esm.isElement(node) ? {
+    const computedPositionReference = floatingUi_utils_dom.isElement(node) ? {
       getBoundingClientRect: () => node.getBoundingClientRect(),
       getClientRects: () => node.getClientRects(),
       contextElement: node
@@ -2283,18 +2284,18 @@ function useFloating(options) {
     position.refs.setReference(computedPositionReference);
   }, [position.refs]);
   const setReference = React__namespace.useCallback(node => {
-    if (index_esm.isElement(node) || node === null) {
+    if (floatingUi_utils_dom.isElement(node) || node === null) {
       domReferenceRef.current = node;
       setDomReference(node);
     }
 
     // Backwards-compatibility for passing a virtual element to `reference`
     // after it has set the DOM reference.
-    if (index_esm.isElement(position.refs.reference.current) || position.refs.reference.current === null ||
+    if (floatingUi_utils_dom.isElement(position.refs.reference.current) || position.refs.reference.current === null ||
     // Don't allow setting virtual elements using the old technique back to
     // `null` to support `positionReference` + an unstable `reference`
     // callback ref.
-    node !== null && !index_esm.isElement(node)) {
+    node !== null && !floatingUi_utils_dom.isElement(node)) {
       position.refs.setReference(node);
     }
   }, [position.refs]);
@@ -2767,7 +2768,7 @@ function useListNavigation(context, props) {
         stopEvent(event);
       }
       onOpenChange(false, event.nativeEvent, 'list-navigation');
-      if (index_esm.isHTMLElement(elements.domReference)) {
+      if (floatingUi_utils_dom.isHTMLElement(elements.domReference)) {
         if (virtual) {
           tree == null || tree.events.emit('virtualfocus', elements.domReference);
         } else {