@jobber/components 8.14.1 → 8.15.0

package/dist/unstyledPrimitives/index.d.ts

@@ -12,6 +12,7 @@
  */
 export { Drawer } from "@base-ui/react/drawer";
 export { Menu } from "@base-ui/react/menu";
+export { ScrollArea } from "@base-ui/react/scroll-area";
 export { Combobox } from "@base-ui/react";
 export { NumberField } from "@base-ui/react/number-field";
 export { Separator } from "@base-ui/react/separator";

package/dist/unstyledPrimitives/index.mjs

@@ -1,9 +1,8 @@
-import { u as useDialogRootContext, am as useDrawerProviderContext, an as DrawerBackdropCssVars, ao as DrawerPopupCssVars, ap as DrawerProviderContext, aq as CommonPopupDataAttributes, N as popupStateMapping, ar as useDialogPortalContext, as as DialogStore, l as contains, g as getTarget, at as useDrawerRootContext, al as useTriggerRegistration, au as DrawerPopupDataAttributes, av as useDrawerSnapPoints, aw as DrawerViewportContext, ax as BASE_UI_SWIPE_IGNORE_SELECTOR, ay as DRAWER_CONTENT_ATTRIBUTE, a as DrawerBackdrop, c as DrawerContent, b as DrawerPopup, D as DrawerPortal, d as DrawerRoot, V as inertValue, Z as createSelector, az as useStore, a4 as useOpenInteractionType, a9 as useDismiss, J as useInteractions, a2 as useOnFirstRender, aA as Store, ai as pressableTriggerOpenStateMapping, L as triggerOpenStateMapping, R as FloatingPortal, a7 as useScrollLock, U as InternalBackdrop, X as DROPDOWN_COLLISION_AVOIDANCE, Q as FloatingFocusManager } from '../DrawerRoot-es.js';
-import { b as DrawerClose, a as DrawerTitle, D as DrawerTrigger, u as useMenuRootContext, p as useMenuPositionerContext, q as useContextMenuRootContext, r as useCompositeListItem, s as useMenuItem, R as REGULAR_ITEM, t as itemMapping, v as useDirection, w as MenuStore, m as MenuGroup, o as MenuGroupLabel, d as MenuItem, c as MenuLinkItem, k as MenuPopup, i as MenuPortal, j as MenuPositioner, l as MenuRadioGroup, e as MenuRadioItem, f as MenuRadioItemIndicator, h as MenuRoot, n as MenuSubmenuRoot, g as MenuSubmenuTrigger, M as MenuTrigger, x as useFloatingRootContext, y as useClick, z as useListNavigation, A as useTypeahead, B as getPseudoElementBounds, C as CompositeList, E as useAnchorPositioning, F as getDisabledMountTransitionStyles, I as IndexGuessBehavior } from '../MenuSubmenuTrigger-es.js';
+import { u as useDialogRootContext, aq as useDrawerProviderContext, ar as DrawerBackdropCssVars, as as DrawerPopupCssVars, at as DrawerProviderContext, au as CommonPopupDataAttributes, L as popupStateMapping, av as useDialogPortalContext, aw as DialogStore, o as contains, i as getTarget, ax as useDrawerRootContext, ao as useTriggerRegistration, ay as DrawerPopupDataAttributes, az as useDrawerSnapPoints, aA as DrawerViewportContext, aB as BASE_UI_SWIPE_IGNORE_SELECTOR, aC as DRAWER_CONTENT_ATTRIBUTE, c as DrawerBackdrop, f as DrawerContent, d as DrawerPopup, b as DrawerPortal, a as DrawerRoot, D as DrawerTrigger, Q as useDirection, V as inertValue, aD as useScrollAreaRootContext, aE as getOffset, aF as ScrollAreaRootCssVars, aG as scrollAreaStateAttributesMapping, aH as useScrollAreaViewportContext, S as ScrollAreaRoot, e as ScrollAreaViewport, Z as createSelector, aI as useStore, a4 as useOpenInteractionType, ag as useClick, a9 as useDismiss, ac as useInteractions, a2 as useOnFirstRender, aJ as Store, al as pressableTriggerOpenStateMapping, ap as triggerOpenStateMapping, O as FloatingPortal, a7 as useScrollLock, U as InternalBackdrop, X as DROPDOWN_COLLISION_AVOIDANCE, N as FloatingFocusManager } from '../ScrollAreaViewport-es.js';
+import { a as DrawerClose, D as DrawerTitle, u as useMenuRootContext, o as useMenuPositionerContext, p as useContextMenuRootContext, q as useCompositeListItem, r as useMenuItem, R as REGULAR_ITEM, s as itemMapping, t as MenuStore, l as MenuGroup, n as MenuGroupLabel, c as MenuItem, b as MenuLinkItem, j as MenuPopup, h as MenuPortal, i as MenuPositioner, k as MenuRadioGroup, d as MenuRadioItem, e as MenuRadioItemIndicator, g as MenuRoot, m as MenuSubmenuRoot, f as MenuSubmenuTrigger, M as MenuTrigger, v as useFloatingRootContext, w as useListNavigation, x as useTypeahead, y as getPseudoElementBounds, C as CompositeList, z as useAnchorPositioning, A as getDisabledMountTransitionStyles, I as IndexGuessBehavior } from '../MenuSubmenuTrigger-es.js';
 import * as React from 'react';
-import { u as useRenderElement, m as mergeProps, f as formatErrorMessage, N as NOOP, E as EMPTY_OBJECT, d as EMPTY_ARRAY, b as useRefWithInit, c as useMergedRefs } from '../useRenderElement-es.js';
-import { u as useBaseUiId, a as useButton, e as error } from '../useBaseUiId-es.js';
-import { u as useIsoLayoutEffect, a as useStableCallback, t as transitionStatusMapping, k as createChangeEventDetails, V as imperativeAction, s as ownerDocument, g as clamp, c as useTimeout, a3 as swipe, D as useAnimationFrame, X as TransitionStatusDataAttributes, K as triggerHover, h as useControlled, P as itemPress, d as useTransitionStatus, e as useOpenChangeComplete, R as useAnimationsFinished, i as useValueAsRef, r as createGenericEventDetails, o as inputClear, m as inputChange, M as focusOut, Q as outsidePress, y as useValueChanged, n as none, a4 as inputPress, v as visuallyHiddenInput, l as visuallyHidden, z as stopEvent, L as listNavigation, B as closePress, a1 as isAndroid, a5 as isFirefox, J as escapeKey, a6 as clearPress, S as SafeReact, a7 as chipRemovePress, a8 as scrub, _ as isWebKit } from '../useValueChanged-es.js';
+import { u as useRenderElement, m as mergeProps, f as formatErrorMessage, N as NOOP, E as EMPTY_OBJECT, d as EMPTY_ARRAY, a as useRefWithInit, b as useMergedRefs } from '../useRenderElement-es.js';
+import { u as useBaseUiId, d as useIsoLayoutEffect, a as useStableCallback, t as transitionStatusMapping, k as createChangeEventDetails, U as imperativeAction, s as ownerDocument, g as clamp, b as useTimeout, a5 as swipe, Z as useAnimationFrame, X as TransitionStatusDataAttributes, K as triggerHover, h as useControlled, P as itemPress, c as useTransitionStatus, e as useOpenChangeComplete, R as useAnimationsFinished, i as useValueAsRef, r as createGenericEventDetails, o as inputClear, m as inputChange, M as focusOut, Q as outsidePress, z as useValueChanged, n as none, a6 as inputPress, v as visuallyHiddenInput, l as visuallyHidden, y as useButton, A as stopEvent, L as listNavigation, C as closePress, a3 as isAndroid, a7 as isFirefox, J as escapeKey, a8 as clearPress, a9 as SafeReact, aa as error, ab as chipRemovePress, ac as scrub, $ as isWebKit } from '../useValueChanged-es.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { a as isHTMLElement, f as getComputedStyle, b as isElement, k as getWindow } from '../floating-ui.utils.dom-es.js';
 import * as ReactDOM from 'react-dom';
@@ -2719,7 +2718,7 @@ function shouldDismissFromStartEdge(direction, axis) {
   return null;
 }
 
-var index_parts$3 = /*#__PURE__*/Object.freeze({
+var index_parts$4 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Backdrop: DrawerBackdrop,
   Close: DrawerClose,
@@ -3531,7 +3530,7 @@ function createMenuHandle() {
   return new MenuHandle();
 }
 
-var index_parts$2 = /*#__PURE__*/Object.freeze({
+var index_parts$3 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Arrow: MenuArrow,
   Backdrop: MenuBackdrop,
@@ -3557,6 +3556,374 @@ var index_parts$2 = /*#__PURE__*/Object.freeze({
   createHandle: createMenuHandle
 });
 
+const ScrollAreaScrollbarContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") ScrollAreaScrollbarContext.displayName = "ScrollAreaScrollbarContext";
+function useScrollAreaScrollbarContext() {
+  const context = React.useContext(ScrollAreaScrollbarContext);
+  if (context === undefined) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: ScrollAreaScrollbarContext is missing. ScrollAreaScrollbar parts must be placed within <ScrollArea.Scrollbar>.' : formatErrorMessage(54));
+  }
+  return context;
+}
+
+let ScrollAreaScrollbarCssVars = /*#__PURE__*/function (ScrollAreaScrollbarCssVars) {
+  /**
+   * The scroll area thumb's height.
+   * @type {number}
+   */
+  ScrollAreaScrollbarCssVars["scrollAreaThumbHeight"] = "--scroll-area-thumb-height";
+  /**
+   * The scroll area thumb's width.
+   * @type {number}
+   */
+  ScrollAreaScrollbarCssVars["scrollAreaThumbWidth"] = "--scroll-area-thumb-width";
+  return ScrollAreaScrollbarCssVars;
+}({});
+
+/**
+ * A vertical or horizontal scrollbar for the scroll area.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Scroll Area](https://base-ui.com/react/components/scroll-area)
+ */
+const ScrollAreaScrollbar = /*#__PURE__*/React.forwardRef(function ScrollAreaScrollbar(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    orientation = 'vertical',
+    keepMounted = false,
+    ...elementProps
+  } = componentProps;
+  const {
+    hovering,
+    scrollingX,
+    scrollingY,
+    hiddenState,
+    overflowEdges,
+    scrollbarYRef,
+    scrollbarXRef,
+    viewportRef,
+    thumbYRef,
+    thumbXRef,
+    handlePointerDown,
+    handlePointerUp,
+    rootId,
+    thumbSize,
+    hasMeasuredScrollbar
+  } = useScrollAreaRootContext();
+  const state = {
+    hovering,
+    scrolling: {
+      horizontal: scrollingX,
+      vertical: scrollingY
+    }[orientation],
+    orientation,
+    hasOverflowX: !hiddenState.x,
+    hasOverflowY: !hiddenState.y,
+    overflowXStart: overflowEdges.xStart,
+    overflowXEnd: overflowEdges.xEnd,
+    overflowYStart: overflowEdges.yStart,
+    overflowYEnd: overflowEdges.yEnd,
+    cornerHidden: hiddenState.corner
+  };
+  const direction = useDirection();
+  const hideTrackUntilMeasured = !hasMeasuredScrollbar && !keepMounted;
+  React.useEffect(() => {
+    const viewportEl = viewportRef.current;
+    const scrollbarEl = orientation === 'vertical' ? scrollbarYRef.current : scrollbarXRef.current;
+    if (!scrollbarEl) {
+      return undefined;
+    }
+    function handleWheel(event) {
+      if (!viewportEl || !scrollbarEl || event.ctrlKey) {
+        return;
+      }
+      event.preventDefault();
+      if (orientation === 'vertical') {
+        if (viewportEl.scrollTop === 0 && event.deltaY < 0) {
+          return;
+        }
+      } else if (viewportEl.scrollLeft === 0 && event.deltaX < 0) {
+        return;
+      }
+      if (orientation === 'vertical') {
+        if (viewportEl.scrollTop === viewportEl.scrollHeight - viewportEl.clientHeight && event.deltaY > 0) {
+          return;
+        }
+      } else if (viewportEl.scrollLeft === viewportEl.scrollWidth - viewportEl.clientWidth && event.deltaX > 0) {
+        return;
+      }
+      if (orientation === 'vertical') {
+        viewportEl.scrollTop += event.deltaY;
+      } else {
+        viewportEl.scrollLeft += event.deltaX;
+      }
+    }
+    scrollbarEl.addEventListener('wheel', handleWheel, {
+      passive: false
+    });
+    return () => {
+      scrollbarEl.removeEventListener('wheel', handleWheel);
+    };
+  }, [orientation, scrollbarXRef, scrollbarYRef, viewportRef]);
+  const props = {
+    ...(rootId && {
+      'data-id': `${rootId}-scrollbar`
+    }),
+    onPointerDown(event) {
+      if (event.button !== 0) {
+        return;
+      }
+
+      // Ignore clicks on thumb
+      if (event.currentTarget !== event.target) {
+        return;
+      }
+      if (!viewportRef.current) {
+        return;
+      }
+
+      // Handle Y-axis (vertical) scroll
+      if (thumbYRef.current && scrollbarYRef.current && orientation === 'vertical') {
+        const thumbYOffset = getOffset(thumbYRef.current, 'margin', 'y');
+        const scrollbarYOffset = getOffset(scrollbarYRef.current, 'padding', 'y');
+        const thumbHeight = thumbYRef.current.offsetHeight;
+        const trackRectY = scrollbarYRef.current.getBoundingClientRect();
+        const clickY = event.clientY - trackRectY.top - thumbHeight / 2 - scrollbarYOffset + thumbYOffset / 2;
+        const scrollableContentHeight = viewportRef.current.scrollHeight;
+        const viewportHeight = viewportRef.current.clientHeight;
+        const maxThumbOffsetY = scrollbarYRef.current.offsetHeight - thumbHeight - scrollbarYOffset - thumbYOffset;
+        const scrollRatioY = clickY / maxThumbOffsetY;
+        const newScrollTop = scrollRatioY * (scrollableContentHeight - viewportHeight);
+        viewportRef.current.scrollTop = newScrollTop;
+      }
+      if (thumbXRef.current && scrollbarXRef.current && orientation === 'horizontal') {
+        const thumbXOffset = getOffset(thumbXRef.current, 'margin', 'x');
+        const scrollbarXOffset = getOffset(scrollbarXRef.current, 'padding', 'x');
+        const thumbWidth = thumbXRef.current.offsetWidth;
+        const trackRectX = scrollbarXRef.current.getBoundingClientRect();
+        const clickX = event.clientX - trackRectX.left - thumbWidth / 2 - scrollbarXOffset + thumbXOffset / 2;
+        const scrollableContentWidth = viewportRef.current.scrollWidth;
+        const viewportWidth = viewportRef.current.clientWidth;
+        const maxThumbOffsetX = scrollbarXRef.current.offsetWidth - thumbWidth - scrollbarXOffset - thumbXOffset;
+        const scrollRatioX = clickX / maxThumbOffsetX;
+        let newScrollLeft;
+        if (direction === 'rtl') {
+          // In RTL, invert the scroll direction
+          newScrollLeft = (1 - scrollRatioX) * (scrollableContentWidth - viewportWidth);
+
+          // Adjust for browsers that use negative scrollLeft in RTL
+          if (viewportRef.current.scrollLeft <= 0) {
+            newScrollLeft = -newScrollLeft;
+          }
+        } else {
+          newScrollLeft = scrollRatioX * (scrollableContentWidth - viewportWidth);
+        }
+        viewportRef.current.scrollLeft = newScrollLeft;
+      }
+      handlePointerDown(event);
+    },
+    onPointerUp: handlePointerUp,
+    style: {
+      position: 'absolute',
+      touchAction: 'none',
+      WebkitUserSelect: 'none',
+      userSelect: 'none',
+      visibility: hideTrackUntilMeasured ? 'hidden' : undefined,
+      ...(orientation === 'vertical' && {
+        top: 0,
+        bottom: `var(${ScrollAreaRootCssVars.scrollAreaCornerHeight})`,
+        insetInlineEnd: 0,
+        [ScrollAreaScrollbarCssVars.scrollAreaThumbHeight]: `${thumbSize.height}px`
+      }),
+      ...(orientation === 'horizontal' && {
+        insetInlineStart: 0,
+        insetInlineEnd: `var(${ScrollAreaRootCssVars.scrollAreaCornerWidth})`,
+        bottom: 0,
+        [ScrollAreaScrollbarCssVars.scrollAreaThumbWidth]: `${thumbSize.width}px`
+      })
+    }
+  };
+  const element = useRenderElement('div', componentProps, {
+    ref: [forwardedRef, orientation === 'vertical' ? scrollbarYRef : scrollbarXRef],
+    state,
+    props: [props, elementProps],
+    stateAttributesMapping: scrollAreaStateAttributesMapping
+  });
+  const contextValue = React.useMemo(() => ({
+    orientation
+  }), [orientation]);
+  const isHidden = orientation === 'vertical' ? hiddenState.y : hiddenState.x;
+  const shouldRender = keepMounted || !isHidden;
+  if (!shouldRender) {
+    return null;
+  }
+  return /*#__PURE__*/jsx(ScrollAreaScrollbarContext.Provider, {
+    value: contextValue,
+    children: element
+  });
+});
+if (process.env.NODE_ENV !== "production") ScrollAreaScrollbar.displayName = "ScrollAreaScrollbar";
+
+/**
+ * A container for the content of the scroll area.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Scroll Area](https://base-ui.com/react/components/scroll-area)
+ */
+const ScrollAreaContent = /*#__PURE__*/React.forwardRef(function ScrollAreaContent(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    ...elementProps
+  } = componentProps;
+  const contentWrapperRef = React.useRef(null);
+  const {
+    computeThumbPosition
+  } = useScrollAreaViewportContext();
+  const {
+    viewportState
+  } = useScrollAreaRootContext();
+  useIsoLayoutEffect(() => {
+    if (typeof ResizeObserver === 'undefined') {
+      return undefined;
+    }
+    let hasInitialized = false;
+    const ro = new ResizeObserver(() => {
+      // ResizeObserver fires once upon observing, so we skip the initial call
+      // to avoid double-calculating the thumb position on mount.
+      if (!hasInitialized) {
+        hasInitialized = true;
+        return;
+      }
+      computeThumbPosition();
+    });
+    if (contentWrapperRef.current) {
+      ro.observe(contentWrapperRef.current);
+    }
+    return () => {
+      ro.disconnect();
+    };
+  }, [computeThumbPosition]);
+  const element = useRenderElement('div', componentProps, {
+    ref: [forwardedRef, contentWrapperRef],
+    state: viewportState,
+    stateAttributesMapping: scrollAreaStateAttributesMapping,
+    props: [{
+      role: 'presentation',
+      style: {
+        minWidth: 'fit-content'
+      }
+    }, elementProps]
+  });
+  return element;
+});
+if (process.env.NODE_ENV !== "production") ScrollAreaContent.displayName = "ScrollAreaContent";
+
+/**
+ * The draggable part of the scrollbar that indicates the current scroll position.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Scroll Area](https://base-ui.com/react/components/scroll-area)
+ */
+const ScrollAreaThumb = /*#__PURE__*/React.forwardRef(function ScrollAreaThumb(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    ...elementProps
+  } = componentProps;
+  const {
+    thumbYRef,
+    thumbXRef,
+    handlePointerDown,
+    handlePointerMove,
+    handlePointerUp,
+    setScrollingX,
+    setScrollingY,
+    hasMeasuredScrollbar
+  } = useScrollAreaRootContext();
+  const {
+    orientation
+  } = useScrollAreaScrollbarContext();
+  const state = {
+    orientation
+  };
+  const element = useRenderElement('div', componentProps, {
+    ref: [forwardedRef, orientation === 'vertical' ? thumbYRef : thumbXRef],
+    state,
+    props: [{
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp(event) {
+        if (orientation === 'vertical') {
+          setScrollingY(false);
+        }
+        if (orientation === 'horizontal') {
+          setScrollingX(false);
+        }
+        handlePointerUp(event);
+      },
+      style: {
+        visibility: hasMeasuredScrollbar ? undefined : 'hidden',
+        ...(orientation === 'vertical' && {
+          height: `var(${ScrollAreaScrollbarCssVars.scrollAreaThumbHeight})`
+        }),
+        ...(orientation === 'horizontal' && {
+          width: `var(${ScrollAreaScrollbarCssVars.scrollAreaThumbWidth})`
+        })
+      }
+    }, elementProps]
+  });
+  return element;
+});
+if (process.env.NODE_ENV !== "production") ScrollAreaThumb.displayName = "ScrollAreaThumb";
+
+/**
+ * A small rectangular area that appears at the intersection of horizontal and vertical scrollbars.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Scroll Area](https://base-ui.com/react/components/scroll-area)
+ */
+const ScrollAreaCorner = /*#__PURE__*/React.forwardRef(function ScrollAreaCorner(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    ...elementProps
+  } = componentProps;
+  const {
+    cornerRef,
+    cornerSize,
+    hiddenState
+  } = useScrollAreaRootContext();
+  const element = useRenderElement('div', componentProps, {
+    ref: [forwardedRef, cornerRef],
+    props: [{
+      style: {
+        position: 'absolute',
+        bottom: 0,
+        insetInlineEnd: 0,
+        width: cornerSize.width,
+        height: cornerSize.height
+      }
+    }, elementProps]
+  });
+  if (hiddenState.corner) {
+    return null;
+  }
+  return element;
+});
+if (process.env.NODE_ENV !== "production") ScrollAreaCorner.displayName = "ScrollAreaCorner";
+
+var index_parts$2 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Content: ScrollAreaContent,
+  Corner: ScrollAreaCorner,
+  Root: ScrollAreaRoot,
+  Scrollbar: ScrollAreaScrollbar,
+  Thumb: ScrollAreaThumb,
+  Viewport: ScrollAreaViewport
+});
+
 const ComboboxRootContext = /*#__PURE__*/React.createContext(undefined);
 if (process.env.NODE_ENV !== "production") ComboboxRootContext.displayName = "ComboboxRootContext";
 const ComboboxFloatingContext = /*#__PURE__*/React.createContext(undefined);
@@ -7398,4 +7765,4 @@ function useRender(params) {
   return useRenderElement(params.defaultTagName ?? 'div', params, params);
 }
 
-export { index_parts$1 as Combobox, index_parts$3 as Drawer, index_parts$2 as Menu, index_parts as NumberField, Separator, useRender };
+export { index_parts$1 as Combobox, index_parts$4 as Drawer, index_parts$3 as Menu, index_parts as NumberField, index_parts$2 as ScrollArea, Separator, useRender };

package/dist/useRenderElement-es.js

@@ -566,4 +566,4 @@ function renderTag(Tag, props) {
   return /*#__PURE__*/React.createElement(Tag, props);
 }
 
-export { EMPTY_OBJECT as E, NOOP as N, makeEventPreventable as a, useRefWithInit as b, useMergedRefs as c, EMPTY_ARRAY as d, formatErrorMessage as f, isReactVersionAtLeast as i, mergeProps as m, useRenderElement as u };
+export { EMPTY_OBJECT as E, NOOP as N, useRefWithInit as a, useMergedRefs as b, makeEventPreventable as c, EMPTY_ARRAY as d, formatErrorMessage as f, isReactVersionAtLeast as i, mergeProps as m, useRenderElement as u };