@jobber/components 8.26.3 → 8.27.1

package/dist/primitives/SelectPrimitive/types.d.ts

@@ -1,4 +1,5 @@
 import type React from "react";
+import type { ReactNode } from "react";
 import type { Select } from "../../unstyledPrimitives";
 import type { OverlaySeparator } from "../OverlaySeparator";
 export type SelectPrimitiveRootProps = React.ComponentPropsWithoutRef<typeof Select.Root>;
@@ -14,3 +15,17 @@ export type SelectPrimitiveItemIndicatorProps = React.ComponentPropsWithoutRef<t
 export type SelectPrimitiveGroupProps = React.ComponentPropsWithoutRef<typeof Select.Group>;
 export type SelectPrimitiveGroupLabelProps = React.ComponentPropsWithoutRef<typeof Select.GroupLabel>;
 export type SelectPrimitiveSeparatorProps = React.ComponentPropsWithoutRef<typeof OverlaySeparator>;
+/**
+ * Context-free, presentational trigger surface (field button + chevron). Render
+ * it via Base UI's `Select.Trigger` (or any trigger's `render` prop) so the
+ * field chrome can be reused outside a `Select.Root` — e.g. a bottom sheet.
+ */
+export interface SelectPrimitiveFieldTriggerProps extends React.ComponentPropsWithRef<"button"> {
+    /** The value/placeholder display element rendered before the chevron. */
+    readonly valueSlot?: ReactNode;
+}
+/**
+ * Presentational value text (the `.value` styling) for triggers rendered
+ * outside a `Select.Root`, where `SelectPrimitive.Value` can't be used.
+ */
+export type SelectPrimitiveValueTextProps = React.ComponentPropsWithRef<"span">;

package/dist/primitives/index.cjs

@@ -32,8 +32,10 @@ require('../useLabelableId-cjs.js');
 require('../useCompositeListItem-cjs.js');
 require('../floating-ui.react-dom-cjs.js');
 require('../resolveAriaLabelledBy-cjs.js');
+require('../stringifyLocale-cjs.js');
 require('../useLabel-cjs.js');
 require('../ActivityIndicator-cjs.js');
+require('../FieldDescription-cjs.js');
 require('../NumberFieldInput-cjs.js');
 require('../SelectGroupLabel-cjs.js');
 require('../isElementDisabled-cjs.js');

package/dist/primitives/index.mjs

@@ -30,8 +30,10 @@ import '../useLabelableId-es.js';
 import '../useCompositeListItem-es.js';
 import '../floating-ui.react-dom-es.js';
 import '../resolveAriaLabelledBy-es.js';
+import '../stringifyLocale-es.js';
 import '../useLabel-es.js';
 import '../ActivityIndicator-es.js';
+import '../FieldDescription-es.js';
 import '../NumberFieldInput-es.js';
 import '../SelectGroupLabel-es.js';
 import '../isElementDisabled-es.js';

package/dist/stringifyLocale-cjs.js

@@ -0,0 +1,13 @@
+'use strict';
+
+function stringifyLocale(locale) {
+  if (Array.isArray(locale)) {
+    return locale.map(value => stringifyLocale(value)).join(',');
+  }
+  if (locale == null) {
+    return '';
+  }
+  return String(locale);
+}
+
+exports.stringifyLocale = stringifyLocale;

package/dist/stringifyLocale-es.js

@@ -0,0 +1,11 @@
+function stringifyLocale(locale) {
+  if (Array.isArray(locale)) {
+    return locale.map(value => stringifyLocale(value)).join(',');
+  }
+  if (locale == null) {
+    return '';
+  }
+  return String(locale);
+}
+
+export { stringifyLocale as s };

package/dist/styles.css

@@ -4055,7 +4055,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
    */
 }
 
-.Qf3IFhKJwQ0-:has(~ ._868PDAA3U2M-[data-nested-drawer-open]) {
+.Qf3IFhKJwQ0-:has(~ .U069n8h0urk- ._868PDAA3U2M-[data-nested-drawer-open]) {
     background-color: transparent;
   }
 
@@ -4154,6 +4154,24 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   }
 }
 
+/*
+ * Positioning container for the popup, spanning the whole screen. Base UI's
+ * Drawer expects the popup to render within a viewport (it enables swipe
+ * handling and touch scroll locking). The popup positions itself (fixed, pinned
+ * to the bottom); the viewport only establishes the full-screen area above the
+ * backdrop.
+ */
+
+.U069n8h0urk- {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1001;
+  z-index: var(--elevation-modal);
+}
+
 .yL7--3ni8BM- {
   display: -ms-flexbox;
   display: flex;
@@ -10381,8 +10399,14 @@ h2.react-datepicker__current-month {
   --dialog-popup-max-width: 1032px;
 }
 .nJoCr8oWJ7w- {
-  --dialog-popup-width: 100vw;
-  --dialog-popup-max-width: 100vw;
+  /* Use 100% (not 100vw) so the popup fills the viewport's scrollable content
+     box rather than the full vw since the vertical scrollbar takes up layout space */
+  --dialog-popup-width: 100%;
+  --dialog-popup-max-width: 100%;
+  /* Always cap the popup to the viewport height for full-screen, regardless of
+     whether any region is sticky. Without this, the "nothing-sticky" scroll
+     composition will not be able to scroll. */
+  --dialog-popup-max-height: 100dvh;
   --dialog-popup-min-height: 100dvh;
   /* No margins full screen — the viewport also drops its padding-block for
      fullScreen (below) so the popup sits flush against every edge. Zeroing the
@@ -10456,12 +10480,8 @@ h2.react-datepicker__current-month {
   padding: 0 24px 24px;
   padding: 0 var(--space-large) var(--space-large);
 }
-/* Slide the bottom sheet up from the bottom on open/close. */
+/* Slide the sheet up on open, down on close. */
 .vmcZRwOcNMo- {
-  -webkit-transform: translateY(0px);
-  -webkit-transform: translateY(var(--drawer-swipe-movement-y, 0px));
-          transform: translateY(0px);
-          transform: translateY(var(--drawer-swipe-movement-y, 0px));
   transition: -webkit-transform 200ms ease;
   transition: -webkit-transform var(--timing-base) ease;
   transition: transform 200ms ease;
@@ -10474,12 +10494,44 @@ h2.react-datepicker__current-month {
     -webkit-transform: translateY(100%);
             transform: translateY(100%);
   }
+/*
+   * Only transform the sheet mid-swipe, never while it's just sitting open.
+   * Why it matters: any transform on this element makes its `position: fixed`
+   * children size themselves to the sheet instead of the screen. FilterPicker's
+   * click-away layer is one of those fixed, full-screen children — with a
+   * transform here it shrinks to the sheet's box, so tapping the backdrop misses
+   * it, hits the sheet, and closes the whole sheet instead of just the picker.
+   * A swipe is the one time we need the transform, and there's no open picker to
+   * break then. base-ui adds `data-swiping` and updates the movement variable
+   * while a swipe is happening.
+   */
+.vmcZRwOcNMo-[data-swiping] {
+    -webkit-transform: translateY(0px);
+    -webkit-transform: translateY(var(--drawer-swipe-movement-y, 0px));
+            transform: translateY(0px);
+            transform: translateY(var(--drawer-swipe-movement-y, 0px));
+  }
 /* Full-screen bottom sheet */
 .vmcZRwOcNMo-[data-size="fullScreen"] {
   height: 100dvh;
   max-height: 100dvh;
   border-radius: 0;
 }
+/* The sheet content renders inside a `Drawer.Content` region (`data-drawer-content`,
+   swipe-ignored so a nested floater can catch an outside press). It's a direct
+   child of the popup, so pass the popup's flex column through it — otherwise the
+   Header/ScrollArea/Footer no longer flex against the popup and the scroll region
+   can't fill/scroll (most visibly on fullScreen at 100dvh). */
+.vmcZRwOcNMo- > [data-drawer-content] {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex: 1 1 auto;
+      flex: 1 1 auto;
+  min-height: 0;
+  -ms-flex-direction: column;
+      flex-direction: column;
+  overflow: hidden;
+}
 /* Scroll divider — shown on a sticky Header/Footer only while the scroll region
    actually overflows (BaseUI sets `data-has-overflow-y` on the ScrollArea root
    when its content overflows). */
@@ -10548,8 +10600,12 @@ h2.react-datepicker__current-month {
     background-color: transparent;
     backdrop-filter: none;
   }
-/* Bottom sheet backdrop */
-[data-testid="ATL-BottomSheet-Backdrop"]:has(~ [data-dialog-variant="sheet"]) {
+/* Bottom sheet backdrop. The sheet popup (`data-dialog-variant="sheet"`) renders
+   inside the drawer viewport, which is the backdrop's following sibling, so
+   target the viewport by its testid then match the sheet popup within it. */
+[data-testid="ATL-BottomSheet-Backdrop"]:has(
+    ~ [data-testid="ATL-BottomSheet-Viewport"] [data-dialog-variant="sheet"]
+  ) {
   background-color: rgba(121, 119, 114, 0.48);
   backdrop-filter: blur(2px);
 }
@@ -13487,6 +13543,240 @@ input.oOrjwubmsVA- {
   left: calc(100% / var(--segmentedControl--option-count) * 4);
 }
 
+.cWI-uFeNWWw- {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: column;
+      flex-direction: column;
+  gap: 4px;
+  gap: var(--space-smaller);
+  width: 100%;
+}
+
+.ddkBixixBz4- {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  width: auto;
+  vertical-align: middle;
+}
+
+._-1-lIAkgLuo- {
+  position: relative;
+  width: 100%;
+}
+
+.cWI-uFeNWWw-.ddkBixixBz4- ._-1-lIAkgLuo- {
+  width: auto;
+}
+
+.cWI-uFeNWWw- ._7rwBeCqTgRY- {
+  --field--height: calc(var(--space-largest) + 2 * var(--border-base));
+
+  transition: border-color 200ms ease-out;
+
+  transition: border-color var(--timing-base) ease-out;
+}
+
+.cWI-uFeNWWw-.ddkBixixBz4- ._7rwBeCqTgRY- {
+  width: auto;
+}
+
+/* ------ Size variants ------ */
+
+.cWI-uFeNWWw-._5QeBX5VxX6o- ._7rwBeCqTgRY- {
+  --field--height: calc(var(--space-larger) + var(--space-smaller));
+  --field--padding-x: var(--space-slim);
+}
+
+.cWI-uFeNWWw-.Pp5nj1nxejw- ._7rwBeCqTgRY- {
+  --field--height: var(--space-extravagant);
+  --field--padding-x: var(--space-large);
+}
+
+/* ------ Floating label ------ */
+
+.M1IjAW17-OE- {
+  position: absolute;
+  top: calc(2px + 1px);
+  top: calc(var(--space-smallest) + var(--border-base));
+  left: 0;
+  z-index: 1;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0 calc(16px + 1px);
+  padding: 0 calc(var(--space-base) + var(--border-base));
+  overflow: hidden;
+  color: hsl(197, 21%, 36%);
+  color: var(--color-text--secondary);
+  font-size: 12px;
+  font-size: var(--typography--fontSize-small);
+  line-height: calc(16px * 1.25);
+  line-height: calc(var(--base-unit) * 1.25);
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  pointer-events: none;
+
+  transition: top 100ms ease-out,
+    font-size 100ms ease-out,
+    -webkit-transform 100ms ease-out;
+
+  transition: top var(--timing-quick) ease-out,
+    font-size var(--timing-quick) ease-out,
+    -webkit-transform var(--timing-quick) ease-out;
+
+  transition: top 100ms ease-out,
+    font-size 100ms ease-out,
+    transform 100ms ease-out;
+
+  transition: top var(--timing-quick) ease-out,
+    font-size var(--timing-quick) ease-out,
+    transform var(--timing-quick) ease-out;
+
+  transition: top 100ms ease-out,
+    font-size 100ms ease-out,
+    transform 100ms ease-out,
+    -webkit-transform 100ms ease-out;
+
+  transition: top var(--timing-quick) ease-out,
+    font-size var(--timing-quick) ease-out,
+    transform var(--timing-quick) ease-out,
+    -webkit-transform var(--timing-quick) ease-out;
+}
+
+.cWI-uFeNWWw-.Pp5nj1nxejw- .M1IjAW17-OE- {
+  padding: 0 calc(24px + 1px);
+  padding: 0 calc(var(--space-large) + var(--border-base));
+}
+
+._-1-lIAkgLuo-:has(._7rwBeCqTgRY-[data-placeholder]) .M1IjAW17-OE- {
+  top: 50%;
+  font-size: 14px;
+  font-size: var(--typography--fontSize-base);
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+}
+
+.M1IjAW17-OE-[data-disabled] {
+  color: hsl(0, 0%, 58%);
+  color: var(--color-disabled);
+}
+
+.cWI-uFeNWWw-._1rx-nSAJT0U-:not(._5QeBX5VxX6o-) ._7rwBeCqTgRY- {
+  padding-top: calc(16px + 4px);
+  padding-top: calc(var(--space-base) + var(--space-smaller));
+  padding-bottom: 8px;
+  padding-bottom: var(--space-small);
+}
+
+.cWI-uFeNWWw-._1rx-nSAJT0U-.Pp5nj1nxejw- ._7rwBeCqTgRY- {
+  padding-top: calc(24px + 4px);
+  padding-top: calc(var(--space-large) + var(--space-smaller));
+}
+
+.cWI-uFeNWWw-._5QeBX5VxX6o-._1rx-nSAJT0U- .M1IjAW17-OE- {
+  display: none;
+}
+
+/* ------ Mobile bottom sheet ------ */
+
+.AVkCcDISAio- {
+  --sheet-item-gap: var(--space-small);
+  --sheet-item-min-height: calc(var(--base-unit) * 3);
+  --sheet-item-padding-y: var(--space-small);
+  --sheet-item-padding-x: var(--space-small);
+
+  display: -ms-flexbox;
+
+  display: flex;
+  -ms-flex-direction: column;
+      flex-direction: column;
+  padding: 16px;
+  padding: var(--space-base);
+  outline: none;
+}
+
+._35H33txs5QU- {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+      align-items: center;
+  gap: var(--sheet-item-gap);
+  min-height: var(--sheet-item-min-height);
+  box-sizing: border-box;
+  padding: var(--sheet-item-padding-y) var(--sheet-item-padding-x);
+  border-radius: 8px;
+  border-radius: var(--radius-base);
+  outline: none;
+  color: hsl(197, 90%, 12%);
+  color: var(--color-heading);
+  font-size: 14px;
+  font-size: var(--typography--fontSize-base);
+  cursor: pointer;
+}
+
+._35H33txs5QU-:focus-visible,
+._35H33txs5QU-:hover {
+  background-color: hsl(43, 18%, 92%);
+  background-color: var(--color-surface--hover);
+}
+
+.uL9j4OZn-3c- {
+  -ms-flex: 1;
+      flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+._7NHtDHZnkG8- {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  -ms-flex-align: center;
+      align-items: center;
+}
+
+.UQ1tsDd1NFs- {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: column;
+      flex-direction: column;
+}
+
+.UQ1tsDd1NFs-:not(:last-child) {
+  padding-bottom: 8px;
+  padding-bottom: var(--space-small);
+  border-bottom: 1px solid hsl(200, 13%, 87%);
+  border-bottom: var(--border-base) solid var(--color-border);
+}
+
+.UQ1tsDd1NFs-:not(:first-child) {
+  margin-top: 8px;
+  margin-top: var(--space-small);
+}
+
+._0kBfkWoRI5c- {
+  padding: var(--sheet-item-padding-y) var(--sheet-item-padding-x)
+    4px;
+  padding: var(--sheet-item-padding-y) var(--sheet-item-padding-x)
+    var(--space-smaller);
+  color: hsl(197, 21%, 36%);
+  color: var(--color-text--secondary);
+  font-size: 14px;
+  font-size: var(--typography--fontSize-base);
+}
+
+.RPsN9vqlzRw- {
+  margin: 8px 0;
+  margin: var(--space-small) 0;
+  border: none;
+  border-bottom: 1px solid hsl(200, 13%, 87%);
+  border-bottom: var(--border-base) solid var(--color-border);
+}
+
 .cCwRgRAz4qk- {
   --sideDrawer--base-padding: var(--space-base);
   --sideDrawer--background: var(--color-surface);