@jobber/components 8.14.1 → 8.16.0

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

@@ -3233,4 +3233,4 @@ function useTransitionStyles(context, props) {
   };
 }
 
-export { FloatingPortal as F, useFloatingParentNodeId as a, useFloatingNodeId as b, useDismiss as c, useInteractions as d, FloatingTree as e, FloatingNode as f, useRole as g, FloatingFocusManager as h, FloatingOverlay as i, useClick as j, useListNavigation as k, useTransitionStyles as l, FloatingArrow as m, useFloating as u };
+export { FloatingPortal as F, useFloatingParentNodeId as a, useFloatingNodeId as b, useDismiss as c, useInteractions as d, FloatingTree as e, FloatingNode as f, useListNavigation as g, useRole as h, FloatingFocusManager as i, FloatingOverlay as j, useClick as k, useTransitionStyles as l, FloatingArrow as m, useFloating as u };

package/dist/index.cjs

@@ -177,12 +177,11 @@ require('./FormFieldPostFix-cjs.js');
 require('axios');
 require('./useRenderElement-cjs.js');
 require('./BottomSheet-cjs.js');
-require('./DrawerRoot-cjs.js');
-require('./useValueChanged-cjs.js');
+require('./ScrollAreaViewport-cjs.js');
+require('./clamp-cjs.js');
 require('./OverlaySeparator-cjs.js');
 require('./Separator-cjs.js');
 require('./MenuSubmenuTrigger-cjs.js');
-require('./useBaseUiId-cjs.js');
 require('./AtlantisPortalContent-cjs.js');
 require('@jobber/formatters');
 require('react-dom/client');

package/dist/index.mjs

@@ -175,12 +175,11 @@ import './FormFieldPostFix-es.js';
 import 'axios';
 import './useRenderElement-es.js';
 import './BottomSheet-es.js';
-import './DrawerRoot-es.js';
-import './useValueChanged-es.js';
+import './ScrollAreaViewport-es.js';
+import './clamp-es.js';
 import './OverlaySeparator-es.js';
 import './Separator-es.js';
 import './MenuSubmenuTrigger-es.js';
-import './useBaseUiId-es.js';
 import './AtlantisPortalContent-es.js';
 import '@jobber/formatters';
 import 'react-dom/client';

package/dist/primitives/BottomSheet/BottomSheet.d.ts

@@ -1,20 +1,19 @@
 import React from "react";
-import { Drawer as BaseDrawer } from "../../unstyledPrimitives";
-export type BottomSheetRootProps = React.ComponentProps<typeof BaseDrawer.Root>;
-type BottomSheetPopupBaseProps = Omit<React.ComponentPropsWithoutRef<typeof BaseDrawer.Popup>, "className">;
-export interface BottomSheetPopupProps extends BottomSheetPopupBaseProps {
-    readonly className?: string;
-}
-type BottomSheetContentBaseProps = Omit<React.ComponentPropsWithoutRef<typeof BaseDrawer.Content>, "className">;
-export interface BottomSheetContentProps extends BottomSheetContentBaseProps {
-    readonly className?: string;
-}
-export interface BottomSheetProps extends Pick<BottomSheetRootProps, "open" | "defaultOpen" | "onOpenChange">, BottomSheetContentProps, Pick<BottomSheetPopupProps, "initialFocus" | "finalFocus"> {
-}
-declare function BottomSheetRoot({ children, defaultOpen, onOpenChange, open, ...rootProps }: BottomSheetRootProps): React.JSX.Element;
-export declare const BottomSheet: React.ForwardRefExoticComponent<BottomSheetProps & React.RefAttributes<HTMLDivElement>> & {
+import type { BottomSheetContentProps, BottomSheetPopupProps, BottomSheetProps, BottomSheetRootProps, BottomSheetTriggerProps } from "./BottomSheet.types";
+declare function BottomSheetTrigger({ children, render, className, ...triggerProps }: BottomSheetTriggerProps): React.JSX.Element;
+/**
+ * Thin pass-through to the Drawer root: a single owner manages open state, and
+ * all root props — `handle`, `modal`, `disablePointerDismissal`, the payload
+ * render-function `children`, etc. — reach BaseUI unchanged.
+ */
+declare function BottomSheetRoot({ children, ...rootProps }: BottomSheetRootProps): React.JSX.Element;
+declare function BottomSheetPopup({ children, className, initialFocus, finalFocus, ref, ...popupProps }: BottomSheetPopupProps): React.JSX.Element;
+declare function BottomSheetContent({ children, className, ref, ...contentProps }: BottomSheetContentProps): React.JSX.Element;
+declare function BottomSheetComponent({ children, className, initialFocus, finalFocus, open, defaultOpen, onOpenChange, ref, ...contentProps }: BottomSheetProps): React.JSX.Element;
+export declare const BottomSheet: typeof BottomSheetComponent & {
     Root: typeof BottomSheetRoot;
-    Popup: React.ForwardRefExoticComponent<BottomSheetPopupProps & React.RefAttributes<HTMLDivElement>>;
-    Content: React.ForwardRefExoticComponent<BottomSheetContentProps & React.RefAttributes<HTMLDivElement>>;
+    Trigger: typeof BottomSheetTrigger;
+    Popup: typeof BottomSheetPopup;
+    Content: typeof BottomSheetContent;
 };
 export {};

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

@@ -0,0 +1,27 @@
+import type { Drawer as BaseDrawer } from "../../unstyledPrimitives";
+export type BottomSheetRootProps = React.ComponentProps<typeof BaseDrawer.Root>;
+type BottomSheetPopupBaseProps = Omit<React.ComponentPropsWithRef<typeof BaseDrawer.Popup>, "className">;
+export interface BottomSheetPopupProps extends BottomSheetPopupBaseProps {
+    readonly className?: string;
+}
+type BottomSheetContentBaseProps = Omit<React.ComponentPropsWithRef<typeof BaseDrawer.Content>, "className">;
+export interface BottomSheetContentProps extends BottomSheetContentBaseProps {
+    readonly className?: string;
+}
+export type BottomSheetTriggerRenderProps = React.ComponentPropsWithRef<"button">;
+export type BottomSheetTriggerRender = React.ReactElement | ((props: BottomSheetTriggerRenderProps) => React.ReactElement);
+type BottomSheetTriggerSharedProps = Omit<React.ComponentPropsWithRef<typeof BaseDrawer.Trigger>, "className" | "render" | "children"> & {
+    readonly className?: string;
+};
+interface BottomSheetTriggerDefaultProps extends BottomSheetTriggerSharedProps {
+    readonly children: React.ReactNode;
+    readonly render?: undefined;
+}
+interface BottomSheetTriggerCustomRenderProps extends BottomSheetTriggerSharedProps {
+    readonly children?: React.ReactNode;
+    readonly render: BottomSheetTriggerRender;
+}
+export type BottomSheetTriggerProps = BottomSheetTriggerDefaultProps | BottomSheetTriggerCustomRenderProps;
+export interface BottomSheetProps extends Pick<BottomSheetRootProps, "open" | "defaultOpen" | "onOpenChange">, BottomSheetContentProps, Pick<BottomSheetPopupProps, "initialFocus" | "finalFocus"> {
+}
+export {};

package/dist/primitives/BottomSheet/BottomSheet.utils.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import type { BottomSheetTriggerRender } from "./BottomSheet.types";
+export declare function resolveBottomSheetTriggerRender({ children, render, }: {
+    readonly children?: React.ReactNode;
+    readonly render?: BottomSheetTriggerRender;
+}): React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | ((props: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>) => React.JSX.Element);

package/dist/primitives/BottomSheet/index.cjs

@@ -4,13 +4,18 @@ var BottomSheet = require('../../BottomSheet-cjs.js');
 require('../../tslib.es6-cjs.js');
 require('react');
 require('classnames');
-require('../../DrawerRoot-cjs.js');
+require('../../Button-cjs.js');
+require('react-router-dom');
+require('../../Icon-cjs.js');
+require('@jobber/design');
+require('../../Typography-cjs.js');
 require('../../useRenderElement-cjs.js');
-require('../../useValueChanged-cjs.js');
+require('../../ScrollAreaViewport-cjs.js');
+require('../../clamp-cjs.js');
 require('react-dom');
+require('../../floating-ui.utils.dom-cjs.js');
 require('react/jsx-runtime');
 require('../../index.esm-cjs.js');
-require('../../floating-ui.utils.dom-cjs.js');
 
 
 

package/dist/primitives/BottomSheet/index.d.ts

@@ -1 +1,2 @@
 export * from "./BottomSheet";
+export type { BottomSheetRootProps, BottomSheetPopupProps, BottomSheetContentProps, BottomSheetTriggerProps, BottomSheetProps, } from "./BottomSheet.types";

package/dist/primitives/BottomSheet/index.mjs

@@ -2,10 +2,15 @@ export { B as BottomSheet } from '../../BottomSheet-es.js';
 import '../../tslib.es6-es.js';
 import 'react';
 import 'classnames';
-import '../../DrawerRoot-es.js';
+import '../../Button-es.js';
+import 'react-router-dom';
+import '../../Icon-es.js';
+import '@jobber/design';
+import '../../Typography-es.js';
 import '../../useRenderElement-es.js';
-import '../../useValueChanged-es.js';
+import '../../ScrollAreaViewport-es.js';
+import '../../clamp-es.js';
 import 'react-dom';
+import '../../floating-ui.utils.dom-es.js';
 import 'react/jsx-runtime';
 import '../../index.esm-es.js';
-import '../../floating-ui.utils.dom-es.js';

package/dist/primitives/InputNumberExperimental/index.cjs

@@ -10,12 +10,11 @@ require('react-router-dom');
 require('../../Icon-cjs.js');
 require('@jobber/design');
 require('../../Typography-cjs.js');
-require('../../useValueChanged-cjs.js');
+require('../../clamp-cjs.js');
 require('../../useRenderElement-cjs.js');
 require('react-dom');
-require('../../NumberFieldInput-cjs.js');
 require('../../floating-ui.utils.dom-cjs.js');
-require('../../useBaseUiId-cjs.js');
+require('../../NumberFieldInput-cjs.js');
 require('react/jsx-runtime');
 
 

package/dist/primitives/InputNumberExperimental/index.mjs

@@ -8,10 +8,9 @@ import 'react-router-dom';
 import '../../Icon-es.js';
 import '@jobber/design';
 import '../../Typography-es.js';
-import '../../useValueChanged-es.js';
+import '../../clamp-es.js';
 import '../../useRenderElement-es.js';
 import 'react-dom';
-import '../../NumberFieldInput-es.js';
 import '../../floating-ui.utils.dom-es.js';
-import '../../useBaseUiId-es.js';
+import '../../NumberFieldInput-es.js';
 import 'react/jsx-runtime';

package/dist/primitives/index.cjs

@@ -9,21 +9,20 @@ require('react');
 require('classnames');
 require('../Separator-cjs.js');
 require('../useRenderElement-cjs.js');
-require('../DrawerRoot-cjs.js');
-require('../useValueChanged-cjs.js');
+require('../Button-cjs.js');
+require('react-router-dom');
+require('../Icon-cjs.js');
+require('@jobber/design');
+require('../Typography-cjs.js');
+require('../ScrollAreaViewport-cjs.js');
+require('../clamp-cjs.js');
 require('react-dom');
+require('../floating-ui.utils.dom-cjs.js');
 require('react/jsx-runtime');
 require('../index.esm-cjs.js');
-require('../floating-ui.utils.dom-cjs.js');
 require('../Text-cjs.js');
-require('../Typography-cjs.js');
-require('../Icon-cjs.js');
-require('@jobber/design');
 require('../ActivityIndicator-cjs.js');
-require('../Button-cjs.js');
-require('react-router-dom');
 require('../NumberFieldInput-cjs.js');
-require('../useBaseUiId-cjs.js');
 
 
 

package/dist/primitives/index.mjs

@@ -7,18 +7,17 @@ import 'react';
 import 'classnames';
 import '../Separator-es.js';
 import '../useRenderElement-es.js';
-import '../DrawerRoot-es.js';
-import '../useValueChanged-es.js';
+import '../Button-es.js';
+import 'react-router-dom';
+import '../Icon-es.js';
+import '@jobber/design';
+import '../Typography-es.js';
+import '../ScrollAreaViewport-es.js';
+import '../clamp-es.js';
 import 'react-dom';
+import '../floating-ui.utils.dom-es.js';
 import 'react/jsx-runtime';
 import '../index.esm-es.js';
-import '../floating-ui.utils.dom-es.js';
 import '../Text-es.js';
-import '../Typography-es.js';
-import '../Icon-es.js';
-import '@jobber/design';
 import '../ActivityIndicator-es.js';
-import '../Button-es.js';
-import 'react-router-dom';
 import '../NumberFieldInput-es.js';
-import '../useBaseUiId-es.js';

package/dist/styles.css

@@ -4005,12 +4005,33 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   right: 0;
   bottom: 0;
   left: 0;
+
+  /*
+   * Use a high (modal) z-index so the sheet and its dimmed backdrop render on top
+   * of the app's nav bars, headers, and other fixed UI instead of behind them.
+   * Every sheet renders its own backdrop at this same elevation (see the
+   * `forceRender` in BottomSheet.tsx), so the frontmost sheet — portaled last —
+   * wins by DOM order: it both catches the dismissing outside press and lays its
+   * dim over the sheets beneath it.
+   */
   z-index: 1001;
   z-index: var(--elevation-modal);
   background-color: rgba(0, 0, 0, 0.32);
   background-color: var(--color-overlay);
+
+  /*
+   * Only the frontmost sheet shows the dim overlay. When a sheet has a nested
+   * sheet open above it, Base UI marks its popup with `data-nested-drawer-open`;
+   * we make that sheet's backdrop transparent so the dim is supplied solely by
+   * the frontmost sheet's backdrop. This keeps the dimming from compounding as
+   * sheets stack.
+   */
 }
 
+.Qf3IFhKJwQ0-:has(~ ._868PDAA3U2M-[data-nested-drawer-open]) {
+    background-color: transparent;
+  }
+
 ._868PDAA3U2M- {
   display: -ms-flexbox;
   display: flex;
@@ -4046,15 +4067,40 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
       flex: 1 1 auto;
 }
 
+.V--tRnN-P0I- {
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  -ms-flex: 1 1 auto;
+      flex: 1 1 auto;
+  min-height: 0;
+  -ms-flex-direction: column;
+      flex-direction: column;
+}
+
+/* The ScrollArea.Viewport — the scrollable element. */
+
 ._1I0eaFciaWo- {
   -ms-flex: 1 1 auto;
       flex: 1 1 auto;
   min-height: 0;
   padding-bottom: env(safe-area-inset-bottom);
-  overflow-y: auto;
   -webkit-overflow-scrolling: touch;
 }
 
+/* Re-enable the browser's native scrollbar — BaseUI hides it by default for its
+   own custom scrollbar, which we are not using. */
+
+.V--tRnN-P0I- ._1I0eaFciaWo- {
+  scrollbar-width: auto;
+}
+
+.V--tRnN-P0I- ._1I0eaFciaWo-::-webkit-scrollbar {
+  display: revert;
+}
+
+/* Bottom fade — shown only while there is content below the current scroll. */
+
 .BYEzqcZUGls- {
   position: absolute;
   right: 0;
@@ -4064,6 +4110,21 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 1));
   background: linear-gradient(to bottom, transparent, var(--color-surface));
   pointer-events: none;
+  opacity: 0;
+  transition: opacity 200ms ease;
+  transition: opacity var(--timing-base) ease;
+}
+
+.V--tRnN-P0I-[data-overflow-y-end] .BYEzqcZUGls- {
+  opacity: 1;
+}
+
+/* Honor reduced-motion: drop the bottom fade transition. */
+
+@media (prefers-reduced-motion: reduce) {
+  .BYEzqcZUGls- {
+    transition: none;
+  }
 }
 
 .yL7--3ni8BM- {