@jobber/components 6.98.2 → 6.100.0

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

@@ -5908,4 +5908,4 @@ function useTransitionStyles(context, props) {
   };
 }
 
-export { FloatingPortal as F, useDismiss as a, useInteractions as b, autoUpdate as c, shift as d, arrow 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, size 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, useTransitionStyles as r, shift as s, FloatingArrow as t, useFloating as u };

package/dist/index.cjs

@@ -178,6 +178,7 @@ require('./useFormFieldFocus-cjs.js');
 require('filesize');
 require('./GridCell-cjs.js');
 require('axios');
+require('./Tree-cjs.js');
 require('./AtlantisPortalContent-cjs.js');
 require('@jobber/formatters');
 require('react-dom/client');

package/dist/index.mjs

@@ -176,6 +176,7 @@ import './useFormFieldFocus-es.js';
 import 'filesize';
 import './GridCell-es.js';
 import 'axios';
+import './Tree-es.js';
 import './AtlantisPortalContent-es.js';
 import '@jobber/formatters';
 import 'react-dom/client';

package/dist/styles.css

@@ -2886,6 +2886,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   padding-bottom: calc(env(safe-area-inset-bottom) + var(--menu-space));
   border-radius: 8px 8px 0 0;
   border-radius: var(--radius-base) var(--radius-base) 0 0;
+  outline: none;
   overflow-y: scroll;
   background-color: rgba(255, 255, 255, 1);
   background-color: var(--color-surface);
@@ -2942,19 +2943,85 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 }
   }
 
-.X0W9r8kjA6Q- {
+.VsRRunpS6Yo- {
   padding: var(--menu-space) 0;
+}
+
+.VsRRunpS6Yo-,
+.jnggqK3YTIU- {
   border-bottom: 1px solid hsl(200, 13%, 87%);
   border-bottom: var(--border-base) solid var(--color-border);
 }
 
-.X0W9r8kjA6Q-:first-of-type {
+.VsRRunpS6Yo-:last-of-type {
+  padding-bottom: 0;
+  border-bottom: none;
+}
+
+.VsRRunpS6Yo-:first-of-type {
   padding-top: 0;
 }
 
-.X0W9r8kjA6Q-:last-of-type {
-  padding-bottom: 0;
-  border-bottom: none;
+.jnggqK3YTIU- {
+  margin: 8px 0;
+  margin: var(--space-small) 0;
+  grid-column: 1 / -1;
+}
+
+.oRQQVVq-yxA- {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  outline: none;
+}
+
+.QInUBKqkrl0- {
+  display: grid;
+  max-height: inherit;
+  grid-template-columns: auto 1fr auto;
+}
+
+.bWR8m7-LKg4- {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 1 / -1;
+  -ms-flex-align: center;
+      align-items: center;
+  grid-gap: var(--menu-space);
+  gap: var(--menu-space);
+}
+
+.bWR8m7-LKg4- > [data-menu-slot="icon"] {
+  grid-column-start: 1;
+  grid-row-start: 1;
+}
+
+.bWR8m7-LKg4- > [data-menu-slot="label"] {
+  grid-column-start: 2;
+}
+
+.PH5vvtLgvXI- {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 1 / -1;
+  grid-column-start: 1;
+}
+
+.QInUBKqkrl0- .PH5vvtLgvXI-:not(:first-child) {
+  margin-top: 8px;
+  margin-top: var(--space-small);
+}
+
+/* When a section follows a separator, avoid doubling vertical spacing.
+   Grid items don't collapse margins, so the section's top margin would add
+   to the separator's bottom margin. Remove the section margin in this case. */
+
+.QInUBKqkrl0- .jnggqK3YTIU- + .PH5vvtLgvXI- {
+  margin-top: 0;
+}
+
+.iJjIifpa9bk- {
+  grid-column: 1 / -1;
+  grid-column-start: 1;
 }
 
 .Bq7pLWj3jm4- {
@@ -2965,10 +3032,26 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   padding: calc(var(--menu-space) * 1.5) var(--menu-space);
 }
 
-.M1BgN-oCmKw- {
+.P4Sdaq0-lZs- {
   display: -ms-flexbox;
   display: flex;
+  gap: var(--menu-space);
+  -ms-flex-align: center;
+      align-items: center;
   width: 100%;
+}
+
+/* Legacy variant focus-visible styling */
+
+.P4Sdaq0-lZs-: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);
+  background-color: hsl(53, 21%, 93%);
+  background-color: var(--color-surface--hover);
+}
+
+.M1BgN-oCmKw- {
+  box-sizing: border-box;
   padding: var(--menu-space);
   border: none;
   border-radius: 8px;
@@ -2977,28 +3060,41 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   text-align: left;
   background-color: transparent;
   cursor: pointer;
-  gap: var(--menu-space);
-  -ms-flex-align: center;
-      align-items: center;
+
   transition:
     background-color 200ms ease-out,
     box-shadow 200ms ease-out;
+
   transition:
     background-color var(--timing-base) ease-out,
     box-shadow var(--timing-base) ease-out;
 }
 
-.M1BgN-oCmKw-:hover,
-.M1BgN-oCmKw-:focus-visible {
+.M1BgN-oCmKw-:hover {
   background-color: hsl(53, 21%, 93%);
   background-color: var(--color-surface--hover);
 }
 
-.M1BgN-oCmKw-:focus-visible {
+/* Background on both legacy (:focus-visible) and RAC ([data-focused]) */
+
+.M1BgN-oCmKw-[data-focused] {
+  background-color: hsl(53, 21%, 93%);
+  background-color: var(--color-surface--hover);
+}
+
+/* Focus ring for legacy and RAC keyboard focus */
+
+.M1BgN-oCmKw-[data-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);
 }
 
+/* Do not show focus ring when item is hovered (pointer interaction) */
+
+.M1BgN-oCmKw-[data-hovered][data-focus-visible] {
+  box-shadow: none;
+}
+
 .M1BgN-oCmKw- span {
   /* match appearance of Button labels */
   -webkit-font-smoothing: antialiased;

package/dist/useScrollToActive-es.js

@@ -10,7 +10,7 @@ import { _ as _baseRest, a as _isIterateeCall } from './_isIterateeCall-es.js';
 import { useLiveAnnounce } from '@jobber/hooks';
 import { d as debounce } from './debounce-es.js';
 import { I as Icon } from './Icon-es.js';
-import { u as useFloating, o as offset, f as flip, s as size, c as autoUpdate } from './floating-ui.react-es.js';
+import { u as useFloating, o as offset, f as flip, c as size, b as autoUpdate } from './floating-ui.react-es.js';
 import { c as calculateMaxHeight } from './maxHeight-es.js';
 
 var baseEach = _baseEach,

package/dist/utils/meta/meta.json

@@ -140,6 +140,15 @@
     "ListItem",
     "Markdown",
     "Menu",
+    "Menu.Content",
+    "Menu.Header",
+    "Menu.HeaderLabel",
+    "Menu.Item",
+    "Menu.ItemIcon",
+    "Menu.ItemLabel",
+    "Menu.Section",
+    "Menu.Separator",
+    "Menu.Trigger",
     "Modal",
     "Modal.Actions",
     "Modal.Activator",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.98.2",
+  "version": "6.100.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -541,5 +541,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "95465eeb4db204e9597812410bb8c5efbe20b507"
+  "gitHead": "5bcaa9501cf3a3ef044db8b59d68fff62e5a3409"
 }