@jobber/components 8.22.0 → 8.23.0

package/dist/unstyledPrimitives/index.cjs

@@ -3,6 +3,7 @@
 var React = require('react');
 var useButton = require('../useButton-cjs.js');
 var ComboboxChipRemove = require('../ComboboxChipRemove-cjs.js');
+var resolveAriaLabelledBy = require('../resolveAriaLabelledBy-cjs.js');
 var jsxRuntime = require('react/jsx-runtime');
 var Separator = require('../Separator-cjs.js');
 var DrawerDescription = require('../DrawerDescription-cjs.js');
@@ -17,7 +18,11 @@ var MenuSubmenuTrigger = require('../MenuSubmenuTrigger-cjs.js');
 var useCompositeListItem = require('../useCompositeListItem-cjs.js');
 var index_esm = require('../index.esm-cjs.js');
 var NumberFieldInput = require('../NumberFieldInput-cjs.js');
-require('../useLabel-cjs.js');
+var SelectGroupLabel = require('../SelectGroupLabel-cjs.js');
+var useLabelableId = require('../useLabelableId-cjs.js');
+var useLabel = require('../useLabel-cjs.js');
+require('../CSPContext-cjs.js');
+require('../ToolbarRootContext-cjs.js');
 require('../floating-ui.react-dom-cjs.js');
 
 function _interopNamespaceDefault(e) {
@@ -110,7 +115,7 @@ function AutocompleteRoot(props) {
       if (highlightedValue == null) {
         setInlineInputValue('');
       } else {
-        setInlineInputValue(ComboboxChipRemove.stringifyAsLabel(highlightedValue, itemToStringValue));
+        setInlineInputValue(resolveAriaLabelledBy.stringifyAsLabel(highlightedValue, itemToStringValue));
       }
     } else {
       setInlineInputValue('');
@@ -149,7 +154,7 @@ function AutocompleteValue(props) {
   });
 }
 
-var index_parts$6 = /*#__PURE__*/Object.freeze({
+var index_parts$7 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Arrow: ComboboxChipRemove.ComboboxArrow,
   Backdrop: ComboboxChipRemove.ComboboxBackdrop,
@@ -176,7 +181,7 @@ var index_parts$6 = /*#__PURE__*/Object.freeze({
   useFilteredItems: ComboboxChipRemove.useFilteredItems
 });
 
-var index_parts$5 = /*#__PURE__*/Object.freeze({
+var index_parts$6 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Backdrop: DrawerDescription.DialogBackdrop,
   Close: DrawerTitle.DialogClose,
@@ -191,7 +196,7 @@ var index_parts$5 = /*#__PURE__*/Object.freeze({
   createHandle: DrawerDescription.createDialogHandle
 });
 
-const stateAttributesMapping$3 = {
+const stateAttributesMapping$5 = {
   active(value) {
     if (value) {
       return {
@@ -261,12 +266,12 @@ const DrawerIndent = /*#__PURE__*/React__namespace.forwardRef(function DrawerInd
         [ScrollAreaViewport.DrawerBackdropCssVars.swipeProgress]: '0'
       }
     }, elementProps],
-    stateAttributesMapping: stateAttributesMapping$3
+    stateAttributesMapping: stateAttributesMapping$5
   });
 });
 if (process.env.NODE_ENV !== "production") DrawerIndent.displayName = "DrawerIndent";
 
-const stateAttributesMapping$2 = {
+const stateAttributesMapping$4 = {
   active(value) {
     if (value) {
       return {
@@ -300,7 +305,7 @@ const DrawerIndentBackground = /*#__PURE__*/React__namespace.forwardRef(function
     ref: forwardedRef,
     state,
     props: elementProps,
-    stateAttributesMapping: stateAttributesMapping$2
+    stateAttributesMapping: stateAttributesMapping$4
   });
 });
 if (process.env.NODE_ENV !== "production") DrawerIndentBackground.displayName = "DrawerIndentBackground";
@@ -1400,7 +1405,7 @@ const SWIPE_AREA_SWIPING_HOOK = {
 const SWIPE_AREA_DISABLED_HOOK = {
   [DrawerSwipeAreaDataAttributes.disabled]: ''
 };
-const stateAttributesMapping$1 = {
+const stateAttributesMapping$3 = {
   open(value) {
     return value ? SWIPE_AREA_OPEN_HOOK : SWIPE_AREA_CLOSED_HOOK;
   },
@@ -1705,7 +1710,7 @@ const DrawerSwipeArea = /*#__PURE__*/React__namespace.forwardRef(function Drawer
   return useRenderElement.useRenderElement('div', componentProps, {
     state,
     ref: [forwardedRef, swipeAreaRef, registerTrigger],
-    stateAttributesMapping: stateAttributesMapping$1,
+    stateAttributesMapping: stateAttributesMapping$3,
     props: [{
       role: 'presentation',
       'aria-hidden': true,
@@ -2709,7 +2714,7 @@ function shouldDismissFromStartEdge(direction, axis) {
   return null;
 }
 
-var index_parts$4 = /*#__PURE__*/Object.freeze({
+var index_parts$5 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Backdrop: ScrollAreaViewport.DrawerBackdrop,
   Close: DrawerTitle.DrawerClose,
@@ -3376,7 +3381,7 @@ let MenuViewportCssVars = /*#__PURE__*/function (MenuViewportCssVars) {
   return MenuViewportCssVars;
 }({});
 
-const stateAttributesMapping = {
+const stateAttributesMapping$2 = {
   activationDirection: value => value ? {
     'data-activation-direction': value
   } : null
@@ -3424,7 +3429,7 @@ const MenuViewport = /*#__PURE__*/React__namespace.forwardRef(function MenuViewp
     props: [elementProps, {
       children: childrenToRender
     }],
-    stateAttributesMapping
+    stateAttributesMapping: stateAttributesMapping$2
   });
 });
 if (process.env.NODE_ENV !== "production") MenuViewport.displayName = "MenuViewport";
@@ -3475,7 +3480,7 @@ function createMenuHandle() {
   return new MenuHandle();
 }
 
-var index_parts$3 = /*#__PURE__*/Object.freeze({
+var index_parts$4 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Arrow: MenuArrow,
   Backdrop: MenuSubmenuTrigger.MenuBackdrop,
@@ -3859,7 +3864,7 @@ const ScrollAreaCorner = /*#__PURE__*/React__namespace.forwardRef(function Scrol
 });
 if (process.env.NODE_ENV !== "production") ScrollAreaCorner.displayName = "ScrollAreaCorner";
 
-var index_parts$2 = /*#__PURE__*/Object.freeze({
+var index_parts$3 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Content: ScrollAreaContent,
   Corner: ScrollAreaCorner,
@@ -3869,7 +3874,7 @@ var index_parts$2 = /*#__PURE__*/Object.freeze({
   Viewport: ScrollAreaViewport.ScrollAreaViewport
 });
 
-var index_parts$1 = /*#__PURE__*/Object.freeze({
+var index_parts$2 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Arrow: ComboboxChipRemove.ComboboxArrow,
   Backdrop: ComboboxChipRemove.ComboboxBackdrop,
@@ -4256,7 +4261,7 @@ const NumberFieldScrubAreaCursor = /*#__PURE__*/React__namespace.forwardRef(func
 });
 if (process.env.NODE_ENV !== "production") NumberFieldScrubAreaCursor.displayName = "NumberFieldScrubAreaCursor";
 
-var index_parts = /*#__PURE__*/Object.freeze({
+var index_parts$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Decrement: NumberFieldInput.NumberFieldDecrement,
   Group: NumberFieldInput.NumberFieldGroup,
@@ -4267,6 +4272,392 @@ var index_parts = /*#__PURE__*/Object.freeze({
   ScrubAreaCursor: NumberFieldScrubAreaCursor
 });
 
+/**
+ * An accessible label that is automatically associated with the select trigger.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
+ */
+const SelectLabel = /*#__PURE__*/React__namespace.forwardRef(function SelectLabel(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    ...elementProps
+  } = componentProps;
+  // Keep label id derived from the root and ignore runtime `id` overrides from untyped consumers.
+  const elementPropsWithoutId = elementProps;
+  delete elementPropsWithoutId.id;
+  const fieldRootContext = useLabelableId.useFieldRootContext();
+  const {
+    store
+  } = SelectGroupLabel.useSelectRootContext();
+  const triggerElement = InternalBackdrop.useStore(store, SelectGroupLabel.selectors.triggerElement);
+  const rootId = InternalBackdrop.useStore(store, SelectGroupLabel.selectors.id);
+  const defaultLabelId = resolveAriaLabelledBy.getDefaultLabelId(rootId);
+  const labelProps = useLabel.useLabel({
+    id: defaultLabelId,
+    fallbackControlId: triggerElement?.id ?? rootId,
+    setLabelId(nextLabelId) {
+      store.set('labelId', nextLabelId);
+    }
+  });
+  return useRenderElement.useRenderElement('div', componentProps, {
+    ref: forwardedRef,
+    state: fieldRootContext.state,
+    props: [labelProps, elementProps],
+    stateAttributesMapping: useLabelableId.fieldValidityMapping
+  });
+});
+if (process.env.NODE_ENV !== "production") SelectLabel.displayName = "SelectLabel";
+
+/**
+ * An icon that indicates that the trigger button opens a select popup.
+ * Renders a `<span>` element.
+ *
+ * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
+ */
+const SelectIcon = /*#__PURE__*/React__namespace.forwardRef(function SelectIcon(componentProps, forwardedRef) {
+  const {
+    className,
+    render,
+    ...elementProps
+  } = componentProps;
+  const {
+    store
+  } = SelectGroupLabel.useSelectRootContext();
+  const open = InternalBackdrop.useStore(store, SelectGroupLabel.selectors.open);
+  const state = {
+    open
+  };
+  const element = useRenderElement.useRenderElement('span', componentProps, {
+    state,
+    ref: forwardedRef,
+    props: [{
+      'aria-hidden': true,
+      children: '▼'
+    }, elementProps],
+    stateAttributesMapping: InternalBackdrop.triggerOpenStateMapping
+  });
+  return element;
+});
+if (process.env.NODE_ENV !== "production") SelectIcon.displayName = "SelectIcon";
+
+const stateAttributesMapping$1 = {
+  ...InternalBackdrop.popupStateMapping,
+  ...useButton.transitionStatusMapping
+};
+
+/**
+ * An overlay displayed beneath the menu popup.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
+ */
+const SelectBackdrop = /*#__PURE__*/React__namespace.forwardRef(function SelectBackdrop(componentProps, forwardedRef) {
+  const {
+    className,
+    render,
+    ...elementProps
+  } = componentProps;
+  const {
+    store
+  } = SelectGroupLabel.useSelectRootContext();
+  const open = InternalBackdrop.useStore(store, SelectGroupLabel.selectors.open);
+  const mounted = InternalBackdrop.useStore(store, SelectGroupLabel.selectors.mounted);
+  const transitionStatus = InternalBackdrop.useStore(store, SelectGroupLabel.selectors.transitionStatus);
+  const state = {
+    open,
+    transitionStatus
+  };
+  const element = useRenderElement.useRenderElement('div', componentProps, {
+    state,
+    ref: forwardedRef,
+    props: [{
+      role: 'presentation',
+      hidden: !mounted,
+      style: {
+        userSelect: 'none',
+        WebkitUserSelect: 'none'
+      }
+    }, elementProps],
+    stateAttributesMapping: stateAttributesMapping$1
+  });
+  return element;
+});
+if (process.env.NODE_ENV !== "production") SelectBackdrop.displayName = "SelectBackdrop";
+
+const stateAttributesMapping = {
+  ...InternalBackdrop.popupStateMapping,
+  ...useButton.transitionStatusMapping
+};
+
+/**
+ * Displays an element positioned against the select popup anchor.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
+ */
+const SelectArrow = /*#__PURE__*/React__namespace.forwardRef(function SelectArrow(componentProps, forwardedRef) {
+  const {
+    className,
+    render,
+    ...elementProps
+  } = componentProps;
+  const {
+    store
+  } = SelectGroupLabel.useSelectRootContext();
+  const {
+    side,
+    align,
+    arrowRef,
+    arrowStyles,
+    arrowUncentered,
+    alignItemWithTriggerActive
+  } = SelectGroupLabel.useSelectPositionerContext();
+  const open = InternalBackdrop.useStore(store, SelectGroupLabel.selectors.open, true);
+  const state = {
+    open,
+    side,
+    align,
+    uncentered: arrowUncentered
+  };
+  const element = useRenderElement.useRenderElement('div', componentProps, {
+    state,
+    ref: [arrowRef, forwardedRef],
+    props: [{
+      style: arrowStyles,
+      'aria-hidden': true
+    }, elementProps],
+    stateAttributesMapping
+  });
+  if (alignItemWithTriggerActive) {
+    return null;
+  }
+  return element;
+});
+if (process.env.NODE_ENV !== "production") SelectArrow.displayName = "SelectArrow";
+
+/**
+ * @internal
+ */
+const SelectScrollArrow = /*#__PURE__*/React__namespace.forwardRef(function SelectScrollArrow(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    direction,
+    keepMounted = false,
+    ...elementProps
+  } = componentProps;
+  const {
+    store,
+    popupRef,
+    listRef,
+    handleScrollArrowVisibility,
+    scrollArrowsMountedCountRef
+  } = SelectGroupLabel.useSelectRootContext();
+  const {
+    side,
+    scrollDownArrowRef,
+    scrollUpArrowRef
+  } = SelectGroupLabel.useSelectPositionerContext();
+  const visibleSelector = direction === 'up' ? SelectGroupLabel.selectors.scrollUpArrowVisible : SelectGroupLabel.selectors.scrollDownArrowVisible;
+  const stateVisible = InternalBackdrop.useStore(store, visibleSelector);
+  const openMethod = InternalBackdrop.useStore(store, SelectGroupLabel.selectors.openMethod);
+
+  // Scroll arrows are disabled for touch modality as they are a hover-only element.
+  const visible = stateVisible && openMethod !== 'touch';
+  const timeout = useButton.useTimeout();
+  const scrollArrowRef = direction === 'up' ? scrollUpArrowRef : scrollDownArrowRef;
+  const {
+    transitionStatus,
+    setMounted
+  } = useButton.useTransitionStatus(visible);
+  useButton.useIsoLayoutEffect(() => {
+    scrollArrowsMountedCountRef.current += 1;
+    if (!store.state.hasScrollArrows) {
+      store.set('hasScrollArrows', true);
+    }
+    return () => {
+      scrollArrowsMountedCountRef.current = Math.max(0, scrollArrowsMountedCountRef.current - 1);
+      if (scrollArrowsMountedCountRef.current === 0 && store.state.hasScrollArrows) {
+        store.set('hasScrollArrows', false);
+      }
+    };
+  }, [store, scrollArrowsMountedCountRef]);
+  useButton.useOpenChangeComplete({
+    open: visible,
+    ref: scrollArrowRef,
+    onComplete() {
+      if (!visible) {
+        setMounted(false);
+      }
+    }
+  });
+  const state = {
+    direction,
+    visible,
+    side,
+    transitionStatus
+  };
+  const defaultProps = {
+    'aria-hidden': true,
+    children: direction === 'up' ? '▲' : '▼',
+    style: {
+      position: 'absolute'
+    },
+    onMouseMove(event) {
+      if (event.movementX === 0 && event.movementY === 0 || timeout.isStarted()) {
+        return;
+      }
+      store.set('activeIndex', null);
+      function scrollNextItem() {
+        const scroller = store.state.listElement ?? popupRef.current;
+        if (!scroller) {
+          return;
+        }
+        store.set('activeIndex', null);
+        handleScrollArrowVisibility();
+        const isScrolledToTop = scroller.scrollTop === 0;
+        const isScrolledToBottom = Math.round(scroller.scrollTop + scroller.clientHeight) >= scroller.scrollHeight;
+        const list = listRef.current;
+
+        // Fallback when there are no items registered yet.
+        if (list.length === 0) {
+          if (direction === 'up') {
+            store.set('scrollUpArrowVisible', !isScrolledToTop);
+          } else {
+            store.set('scrollDownArrowVisible', !isScrolledToBottom);
+          }
+        }
+        if (direction === 'up' && isScrolledToTop || direction === 'down' && isScrolledToBottom) {
+          timeout.clear();
+          return;
+        }
+        if ((store.state.listElement || popupRef.current) && listRef.current && listRef.current.length > 0) {
+          const items = listRef.current;
+          const scrollArrowHeight = scrollArrowRef.current?.offsetHeight || 0;
+          if (direction === 'up') {
+            let firstVisibleIndex = 0;
+            const scrollTop = scroller.scrollTop + scrollArrowHeight;
+            for (let i = 0; i < items.length; i += 1) {
+              const item = items[i];
+              if (item) {
+                const itemTop = item.offsetTop;
+                if (itemTop >= scrollTop) {
+                  firstVisibleIndex = i;
+                  break;
+                }
+              }
+            }
+            const targetIndex = Math.max(0, firstVisibleIndex - 1);
+            if (targetIndex < firstVisibleIndex) {
+              const targetItem = items[targetIndex];
+              if (targetItem) {
+                scroller.scrollTop = Math.max(0, targetItem.offsetTop - scrollArrowHeight);
+              }
+            } else {
+              // Already at the first item; ensure we reach the absolute top to account for group labels.
+              scroller.scrollTop = 0;
+            }
+          } else {
+            let lastVisibleIndex = items.length - 1;
+            const scrollBottom = scroller.scrollTop + scroller.clientHeight - scrollArrowHeight;
+            for (let i = 0; i < items.length; i += 1) {
+              const item = items[i];
+              if (item) {
+                const itemBottom = item.offsetTop + item.offsetHeight;
+                if (itemBottom > scrollBottom) {
+                  lastVisibleIndex = Math.max(0, i - 1);
+                  break;
+                }
+              }
+            }
+            const targetIndex = Math.min(items.length - 1, lastVisibleIndex + 1);
+            if (targetIndex > lastVisibleIndex) {
+              const targetItem = items[targetIndex];
+              if (targetItem) {
+                scroller.scrollTop = targetItem.offsetTop + targetItem.offsetHeight - scroller.clientHeight + scrollArrowHeight;
+              }
+            } else {
+              // Already at the last item; ensure we reach the true bottom.
+              scroller.scrollTop = scroller.scrollHeight - scroller.clientHeight;
+            }
+          }
+        }
+        timeout.start(40, scrollNextItem);
+      }
+      timeout.start(40, scrollNextItem);
+    },
+    onMouseLeave() {
+      timeout.clear();
+    }
+  };
+  const element = useRenderElement.useRenderElement('div', componentProps, {
+    ref: [forwardedRef, scrollArrowRef],
+    state,
+    props: [defaultProps, elementProps]
+  });
+  const shouldRender = visible || keepMounted;
+  if (!shouldRender) {
+    return null;
+  }
+  return element;
+});
+if (process.env.NODE_ENV !== "production") SelectScrollArrow.displayName = "SelectScrollArrow";
+
+/**
+ * An element that scrolls the select popup down when hovered. Does not render when using touch input.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
+ */
+const SelectScrollDownArrow = /*#__PURE__*/React__namespace.forwardRef(function SelectScrollDownArrow(props, forwardedRef) {
+  return /*#__PURE__*/jsxRuntime.jsx(SelectScrollArrow, {
+    ...props,
+    ref: forwardedRef,
+    direction: "down"
+  });
+});
+if (process.env.NODE_ENV !== "production") SelectScrollDownArrow.displayName = "SelectScrollDownArrow";
+
+/**
+ * An element that scrolls the select popup up when hovered. Does not render when using touch input.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
+ */
+const SelectScrollUpArrow = /*#__PURE__*/React__namespace.forwardRef(function SelectScrollUpArrow(props, forwardedRef) {
+  return /*#__PURE__*/jsxRuntime.jsx(SelectScrollArrow, {
+    ...props,
+    ref: forwardedRef,
+    direction: "up"
+  });
+});
+if (process.env.NODE_ENV !== "production") SelectScrollUpArrow.displayName = "SelectScrollUpArrow";
+
+var index_parts = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Arrow: SelectArrow,
+  Backdrop: SelectBackdrop,
+  Group: SelectGroupLabel.SelectGroup,
+  GroupLabel: SelectGroupLabel.SelectGroupLabel,
+  Icon: SelectIcon,
+  Item: SelectGroupLabel.SelectItem,
+  ItemIndicator: SelectGroupLabel.SelectItemIndicator,
+  ItemText: SelectGroupLabel.SelectItemText,
+  Label: SelectLabel,
+  List: SelectGroupLabel.SelectList,
+  Popup: SelectGroupLabel.SelectPopup,
+  Portal: SelectGroupLabel.SelectPortal,
+  Positioner: SelectGroupLabel.SelectPositioner,
+  Root: SelectGroupLabel.SelectRoot,
+  ScrollDownArrow: SelectScrollDownArrow,
+  ScrollUpArrow: SelectScrollUpArrow,
+  Separator: Separator.Separator,
+  Trigger: SelectGroupLabel.SelectTrigger,
+  Value: SelectGroupLabel.SelectValue
+});
+
 /**
  * Renders a Base UI element.
  *
@@ -4277,11 +4668,12 @@ function useRender(params) {
 }
 
 exports.Separator = Separator.Separator;
-exports.Autocomplete = index_parts$6;
-exports.Combobox = index_parts$1;
-exports.Dialog = index_parts$5;
-exports.Drawer = index_parts$4;
-exports.Menu = index_parts$3;
-exports.NumberField = index_parts;
-exports.ScrollArea = index_parts$2;
+exports.Autocomplete = index_parts$7;
+exports.Combobox = index_parts$2;
+exports.Dialog = index_parts$6;
+exports.Drawer = index_parts$5;
+exports.Menu = index_parts$4;
+exports.NumberField = index_parts$1;
+exports.ScrollArea = index_parts$3;
+exports.Select = index_parts;
 exports.useRender = useRender;

package/dist/unstyledPrimitives/index.d.ts

@@ -17,5 +17,6 @@ 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 { Select } from "@base-ui/react/select";
 export { Separator } from "@base-ui/react/separator";
 export { useRender } from "@base-ui/react/use-render";