@jobber/components 8.21.1 → 8.22.0

package/dist/unstyledPrimitives/index.cjs

@@ -5,13 +5,15 @@ var useButton = require('../useButton-cjs.js');
 var ComboboxChipRemove = require('../ComboboxChipRemove-cjs.js');
 var jsxRuntime = require('react/jsx-runtime');
 var Separator = require('../Separator-cjs.js');
+var DrawerDescription = require('../DrawerDescription-cjs.js');
+var DrawerTitle = require('../DrawerTitle-cjs.js');
 var ScrollAreaViewport = require('../ScrollAreaViewport-cjs.js');
-var MenuSubmenuTrigger = require('../MenuSubmenuTrigger-cjs.js');
 var useRenderElement = require('../useRenderElement-cjs.js');
 var floatingUi_utils_dom = require('../floating-ui.utils.dom-cjs.js');
 var clamp = require('../clamp-cjs.js');
 var InternalBackdrop = require('../InternalBackdrop-cjs.js');
 var ReactDOM = require('react-dom');
+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');
@@ -147,7 +149,7 @@ function AutocompleteValue(props) {
   });
 }
 
-var index_parts$5 = /*#__PURE__*/Object.freeze({
+var index_parts$6 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Arrow: ComboboxChipRemove.ComboboxArrow,
   Backdrop: ComboboxChipRemove.ComboboxBackdrop,
@@ -174,42 +176,22 @@ var index_parts$5 = /*#__PURE__*/Object.freeze({
   useFilteredItems: ComboboxChipRemove.useFilteredItems
 });
 
-/**
- * A paragraph with additional information about the dialog.
- * Renders a `<p>` element.
- *
- * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
- */
-const DialogDescription = /*#__PURE__*/React__namespace.forwardRef(function DialogDescription(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    id: idProp,
-    ...elementProps
-  } = componentProps;
-  const {
-    store
-  } = ScrollAreaViewport.useDialogRootContext();
-  const id = useButton.useBaseUiId(idProp);
-  store.useSyncedValueWithCleanup('descriptionElementId', id);
-  return useRenderElement.useRenderElement('p', componentProps, {
-    ref: forwardedRef,
-    props: [{
-      id
-    }, elementProps]
-  });
+var index_parts$5 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Backdrop: DrawerDescription.DialogBackdrop,
+  Close: DrawerTitle.DialogClose,
+  Description: DrawerDescription.DialogDescription,
+  Handle: DrawerDescription.DialogHandle,
+  Popup: DrawerDescription.DialogPopup,
+  Portal: ScrollAreaViewport.DialogPortal,
+  Root: ScrollAreaViewport.DialogRoot,
+  Title: DrawerTitle.DialogTitle,
+  Trigger: ScrollAreaViewport.DialogTrigger,
+  Viewport: DrawerDescription.DialogViewport,
+  createHandle: DrawerDescription.createDialogHandle
 });
-if (process.env.NODE_ENV !== "production") DialogDescription.displayName = "DialogDescription";
-
-/**
- * A paragraph with additional information about the drawer.
- * Renders a `<p>` element.
- *
- * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
- */
-const DrawerDescription = DialogDescription;
 
-const stateAttributesMapping$5 = {
+const stateAttributesMapping$3 = {
   active(value) {
     if (value) {
       return {
@@ -279,12 +261,12 @@ const DrawerIndent = /*#__PURE__*/React__namespace.forwardRef(function DrawerInd
         [ScrollAreaViewport.DrawerBackdropCssVars.swipeProgress]: '0'
       }
     }, elementProps],
-    stateAttributesMapping: stateAttributesMapping$5
+    stateAttributesMapping: stateAttributesMapping$3
   });
 });
 if (process.env.NODE_ENV !== "production") DrawerIndent.displayName = "DrawerIndent";
 
-const stateAttributesMapping$4 = {
+const stateAttributesMapping$2 = {
   active(value) {
     if (value) {
       return {
@@ -318,7 +300,7 @@ const DrawerIndentBackground = /*#__PURE__*/React__namespace.forwardRef(function
     ref: forwardedRef,
     state,
     props: elementProps,
-    stateAttributesMapping: stateAttributesMapping$4
+    stateAttributesMapping: stateAttributesMapping$2
   });
 });
 if (process.env.NODE_ENV !== "production") DrawerIndentBackground.displayName = "DrawerIndentBackground";
@@ -406,160 +388,6 @@ function createVisualStateStore() {
   };
 }
 
-let DialogViewportDataAttributes = function (DialogViewportDataAttributes) {
-  /**
-   * Present when the dialog is open.
-   */
-  DialogViewportDataAttributes[DialogViewportDataAttributes["open"] = InternalBackdrop.CommonPopupDataAttributes.open] = "open";
-  /**
-   * Present when the dialog is closed.
-   */
-  DialogViewportDataAttributes[DialogViewportDataAttributes["closed"] = InternalBackdrop.CommonPopupDataAttributes.closed] = "closed";
-  /**
-   * Present when the dialog is animating in.
-   */
-  DialogViewportDataAttributes[DialogViewportDataAttributes["startingStyle"] = InternalBackdrop.CommonPopupDataAttributes.startingStyle] = "startingStyle";
-  /**
-   * Present when the dialog is animating out.
-   */
-  DialogViewportDataAttributes[DialogViewportDataAttributes["endingStyle"] = InternalBackdrop.CommonPopupDataAttributes.endingStyle] = "endingStyle";
-  /**
-   * Present when the dialog is nested within another dialog.
-   */
-  DialogViewportDataAttributes["nested"] = "data-nested";
-  /**
-   * Present when the dialog has other open dialogs nested within it.
-   */
-  DialogViewportDataAttributes["nestedDialogOpen"] = "data-nested-dialog-open";
-  return DialogViewportDataAttributes;
-}({});
-
-const stateAttributesMapping$3 = {
-  ...InternalBackdrop.popupStateMapping,
-  ...useButton.transitionStatusMapping,
-  nested(value) {
-    return value ? {
-      [DialogViewportDataAttributes.nested]: ''
-    } : null;
-  },
-  nestedDialogOpen(value) {
-    return value ? {
-      [DialogViewportDataAttributes.nestedDialogOpen]: ''
-    } : null;
-  }
-};
-
-/**
- * A positioning container for the dialog popup that can be made scrollable.
- * Renders a `<div>` element.
- *
- * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
- */
-const DialogViewport = /*#__PURE__*/React__namespace.forwardRef(function DialogViewport(componentProps, forwardedRef) {
-  const {
-    className,
-    render,
-    children,
-    ...elementProps
-  } = componentProps;
-  const keepMounted = ScrollAreaViewport.useDialogPortalContext();
-  const {
-    store
-  } = ScrollAreaViewport.useDialogRootContext();
-  const open = store.useState('open');
-  const nested = store.useState('nested');
-  const transitionStatus = store.useState('transitionStatus');
-  const nestedOpenDialogCount = store.useState('nestedOpenDialogCount');
-  const mounted = store.useState('mounted');
-  const nestedDialogOpen = nestedOpenDialogCount > 0;
-  const state = {
-    open,
-    nested,
-    transitionStatus,
-    nestedDialogOpen
-  };
-  const shouldRender = keepMounted || mounted;
-  return useRenderElement.useRenderElement('div', componentProps, {
-    enabled: shouldRender,
-    state,
-    ref: [forwardedRef, store.useStateSetter('viewportElement')],
-    stateAttributesMapping: stateAttributesMapping$3,
-    props: [{
-      role: 'presentation',
-      hidden: !mounted,
-      style: {
-        pointerEvents: !open ? 'none' : undefined
-      },
-      children
-    }, elementProps]
-  });
-});
-if (process.env.NODE_ENV !== "production") DialogViewport.displayName = "DialogViewport";
-
-/**
- * A handle to control a Dialog imperatively and to associate detached triggers with it.
- */
-class DialogHandle {
-  /**
-   * Internal store holding the dialog state.
-   * @internal
-   */
-
-  constructor(store) {
-    this.store = store ?? new ScrollAreaViewport.DialogStore();
-  }
-
-  /**
-   * Opens the dialog and associates it with the trigger with the given id.
-   * The trigger, if provided, must be a Dialog.Trigger component with this handle passed as a prop.
-   *
-   * This method should only be called in an event handler or an effect (not during rendering).
-   *
-   * @param triggerId ID of the trigger to associate with the dialog. If null, the dialog will open without a trigger association.
-   */
-  open(triggerId) {
-    const triggerElement = triggerId ? this.store.context.triggerElements.getById(triggerId) : undefined;
-    if (process.env.NODE_ENV !== 'production') {
-      if (triggerId && !triggerElement) {
-        console.warn(`Base UI: DialogHandle.open: No trigger found with id "${triggerId}". The dialog will open, but the trigger will not be associated with the dialog.`);
-      }
-    }
-    this.store.setOpen(true, useButton.createChangeEventDetails(useButton.imperativeAction, undefined, triggerElement));
-  }
-
-  /**
-   * Opens the dialog and sets the payload.
-   * Does not associate the dialog with any trigger.
-   *
-   * @param payload Payload to set when opening the dialog.
-   */
-  openWithPayload(payload) {
-    this.store.set('payload', payload);
-    this.store.setOpen(true, useButton.createChangeEventDetails(useButton.imperativeAction, undefined, undefined));
-  }
-
-  /**
-   * Closes the dialog.
-   */
-  close() {
-    this.store.setOpen(false, useButton.createChangeEventDetails(useButton.imperativeAction, undefined, undefined));
-  }
-
-  /**
-   * Indicates whether the dialog is currently open.
-   */
-  get isOpen() {
-    return this.store.state.open;
-  }
-}
-
-/**
- * Creates a new handle to connect a Dialog.Root with detached Dialog.Trigger components.
- */
-function createDialogHandle() {
-  return new DialogHandle();
-}
-
 function isScrollable(element, axis) {
   const style = floatingUi_utils_dom.getComputedStyle(element);
   if (axis === 'vertical') {
@@ -1572,7 +1400,7 @@ const SWIPE_AREA_SWIPING_HOOK = {
 const SWIPE_AREA_DISABLED_HOOK = {
   [DrawerSwipeAreaDataAttributes.disabled]: ''
 };
-const stateAttributesMapping$2 = {
+const stateAttributesMapping$1 = {
   open(value) {
     return value ? SWIPE_AREA_OPEN_HOOK : SWIPE_AREA_CLOSED_HOOK;
   },
@@ -1877,7 +1705,7 @@ const DrawerSwipeArea = /*#__PURE__*/React__namespace.forwardRef(function Drawer
   return useRenderElement.useRenderElement('div', componentProps, {
     state,
     ref: [forwardedRef, swipeAreaRef, registerTrigger],
-    stateAttributesMapping: stateAttributesMapping$2,
+    stateAttributesMapping: stateAttributesMapping$1,
     props: [{
       role: 'presentation',
       'aria-hidden': true,
@@ -2593,7 +2421,7 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
     lastPointerTypeRef.current = '';
     ignoreNextTouchStartFromPenRef.current = false;
   }
-  return /*#__PURE__*/jsxRuntime.jsx(DialogViewport, {
+  return /*#__PURE__*/jsxRuntime.jsx(DrawerDescription.DialogViewport, {
     ref: forwardedRef,
     className: className,
     render: render,
@@ -2884,10 +2712,10 @@ function shouldDismissFromStartEdge(direction, axis) {
 var index_parts$4 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Backdrop: ScrollAreaViewport.DrawerBackdrop,
-  Close: MenuSubmenuTrigger.DrawerClose,
+  Close: DrawerTitle.DrawerClose,
   Content: ScrollAreaViewport.DrawerContent,
-  Description: DrawerDescription,
-  Handle: DialogHandle,
+  Description: DrawerDescription.DrawerDescription,
+  Handle: DrawerDescription.DialogHandle,
   Indent: DrawerIndent,
   IndentBackground: DrawerIndentBackground,
   Popup: ScrollAreaViewport.DrawerPopup,
@@ -2895,10 +2723,10 @@ var index_parts$4 = /*#__PURE__*/Object.freeze({
   Provider: DrawerProvider,
   Root: ScrollAreaViewport.DrawerRoot,
   SwipeArea: DrawerSwipeArea,
-  Title: MenuSubmenuTrigger.DrawerTitle,
+  Title: DrawerTitle.DrawerTitle,
   Trigger: ScrollAreaViewport.DrawerTrigger,
   Viewport: DrawerViewport,
-  createHandle: createDialogHandle
+  createHandle: DrawerDescription.createDialogHandle
 });
 
 /**
@@ -2943,52 +2771,6 @@ const MenuArrow = /*#__PURE__*/React__namespace.forwardRef(function MenuArrow(co
 });
 if (process.env.NODE_ENV !== "production") MenuArrow.displayName = "MenuArrow";
 
-const stateAttributesMapping$1 = {
-  ...InternalBackdrop.popupStateMapping,
-  ...useButton.transitionStatusMapping
-};
-
-/**
- * An overlay displayed beneath the menu popup.
- * Renders a `<div>` element.
- *
- * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
- */
-const MenuBackdrop = /*#__PURE__*/React__namespace.forwardRef(function MenuBackdrop(componentProps, forwardedRef) {
-  const {
-    className,
-    render,
-    ...elementProps
-  } = componentProps;
-  const {
-    store
-  } = MenuSubmenuTrigger.useMenuRootContext();
-  const open = store.useState('open');
-  const mounted = store.useState('mounted');
-  const transitionStatus = store.useState('transitionStatus');
-  const lastOpenChangeReason = store.useState('lastOpenChangeReason');
-  const contextMenuContext = MenuSubmenuTrigger.useContextMenuRootContext();
-  const state = {
-    open,
-    transitionStatus
-  };
-  return useRenderElement.useRenderElement('div', componentProps, {
-    ref: contextMenuContext?.backdropRef ? [forwardedRef, contextMenuContext.backdropRef] : forwardedRef,
-    state,
-    stateAttributesMapping: stateAttributesMapping$1,
-    props: [{
-      role: 'presentation',
-      hidden: !mounted,
-      style: {
-        pointerEvents: lastOpenChangeReason === useButton.triggerHover ? 'none' : undefined,
-        userSelect: 'none',
-        WebkitUserSelect: 'none'
-      }
-    }, elementProps]
-  });
-});
-if (process.env.NODE_ENV !== "production") MenuBackdrop.displayName = "MenuBackdrop";
-
 const MenuCheckboxItemContext = /*#__PURE__*/React__namespace.createContext(undefined);
 if (process.env.NODE_ENV !== "production") MenuCheckboxItemContext.displayName = "MenuCheckboxItemContext";
 function useMenuCheckboxItemContext() {
@@ -3696,7 +3478,7 @@ function createMenuHandle() {
 var index_parts$3 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Arrow: MenuArrow,
-  Backdrop: MenuBackdrop,
+  Backdrop: MenuSubmenuTrigger.MenuBackdrop,
   CheckboxItem: MenuCheckboxItem,
   CheckboxItemIndicator: MenuCheckboxItemIndicator,
   Group: MenuSubmenuTrigger.MenuGroup,
@@ -4495,8 +4277,9 @@ function useRender(params) {
 }
 
 exports.Separator = Separator.Separator;
-exports.Autocomplete = index_parts$5;
+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;

package/dist/unstyledPrimitives/index.d.ts

@@ -11,6 +11,7 @@
  * BaseUI docs: https://base-ui.com/react/components
  */
 export { Autocomplete } from "@base-ui/react/autocomplete";
+export { Dialog } from "@base-ui/react/dialog";
 export { Drawer } from "@base-ui/react/drawer";
 export { Menu } from "@base-ui/react/menu";
 export { ScrollArea } from "@base-ui/react/scroll-area";