@jobber/components 8.21.1 → 8.23.0

package/dist/DrawerDescription-es.js

@@ -0,0 +1,383 @@
+import * as React from 'react';
+import { u as useDialogRootContext, j as useDialogPortalContext, k as DialogStore } from './ScrollAreaViewport-es.js';
+import { u as useRenderElement } from './useRenderElement-es.js';
+import { p as popupStateMapping, C as CommonPopupDataAttributes, F as FloatingFocusManager } from './InternalBackdrop-es.js';
+import { t as transitionStatusMapping, u as useBaseUiId, f as useOpenChangeComplete, d as createChangeEventDetails, i as imperativeAction } from './useButton-es.js';
+import { C as COMPOSITE_KEYS } from './CSPContext-es.js';
+import { jsx } from 'react/jsx-runtime';
+
+const stateAttributesMapping$2 = {
+  ...popupStateMapping,
+  ...transitionStatusMapping
+};
+
+/**
+ * An overlay displayed beneath the popup.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
+ */
+const DialogBackdrop = /*#__PURE__*/React.forwardRef(function DialogBackdrop(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    forceRender = false,
+    ...elementProps
+  } = componentProps;
+  const {
+    store
+  } = useDialogRootContext();
+  const open = store.useState('open');
+  const nested = store.useState('nested');
+  const mounted = store.useState('mounted');
+  const transitionStatus = store.useState('transitionStatus');
+  const state = {
+    open,
+    transitionStatus
+  };
+  return useRenderElement('div', componentProps, {
+    state,
+    ref: [store.context.backdropRef, forwardedRef],
+    stateAttributesMapping: stateAttributesMapping$2,
+    props: [{
+      role: 'presentation',
+      hidden: !mounted,
+      style: {
+        userSelect: 'none',
+        WebkitUserSelect: 'none'
+      }
+    }, elementProps],
+    enabled: forceRender || !nested
+  });
+});
+if (process.env.NODE_ENV !== "production") DialogBackdrop.displayName = "DialogBackdrop";
+
+/**
+ * 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.forwardRef(function DialogDescription(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    id: idProp,
+    ...elementProps
+  } = componentProps;
+  const {
+    store
+  } = useDialogRootContext();
+  const id = useBaseUiId(idProp);
+  store.useSyncedValueWithCleanup('descriptionElementId', id);
+  return useRenderElement('p', componentProps, {
+    ref: forwardedRef,
+    props: [{
+      id
+    }, elementProps]
+  });
+});
+if (process.env.NODE_ENV !== "production") DialogDescription.displayName = "DialogDescription";
+
+let DialogPopupCssVars = /*#__PURE__*/function (DialogPopupCssVars) {
+  /**
+   * Indicates how many dialogs are nested within.
+   * @type {number}
+   */
+  DialogPopupCssVars["nestedDialogs"] = "--nested-dialogs";
+  return DialogPopupCssVars;
+}({});
+
+let DialogPopupDataAttributes = function (DialogPopupDataAttributes) {
+  /**
+   * Present when the dialog is open.
+   */
+  DialogPopupDataAttributes[DialogPopupDataAttributes["open"] = CommonPopupDataAttributes.open] = "open";
+  /**
+   * Present when the dialog is closed.
+   */
+  DialogPopupDataAttributes[DialogPopupDataAttributes["closed"] = CommonPopupDataAttributes.closed] = "closed";
+  /**
+   * Present when the dialog is animating in.
+   */
+  DialogPopupDataAttributes[DialogPopupDataAttributes["startingStyle"] = CommonPopupDataAttributes.startingStyle] = "startingStyle";
+  /**
+   * Present when the dialog is animating out.
+   */
+  DialogPopupDataAttributes[DialogPopupDataAttributes["endingStyle"] = CommonPopupDataAttributes.endingStyle] = "endingStyle";
+  /**
+   * Present when the dialog is nested within another dialog.
+   */
+  DialogPopupDataAttributes["nested"] = "data-nested";
+  /**
+   * Present when the dialog has other open dialogs nested within it.
+   */
+  DialogPopupDataAttributes["nestedDialogOpen"] = "data-nested-dialog-open";
+  return DialogPopupDataAttributes;
+}({});
+
+const stateAttributesMapping$1 = {
+  ...popupStateMapping,
+  ...transitionStatusMapping,
+  nestedDialogOpen(value) {
+    return value ? {
+      [DialogPopupDataAttributes.nestedDialogOpen]: ''
+    } : null;
+  }
+};
+
+/**
+ * A container for the dialog contents.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
+ */
+const DialogPopup = /*#__PURE__*/React.forwardRef(function DialogPopup(componentProps, forwardedRef) {
+  const {
+    className,
+    finalFocus,
+    initialFocus,
+    render,
+    ...elementProps
+  } = componentProps;
+  const {
+    store
+  } = useDialogRootContext();
+  const descriptionElementId = store.useState('descriptionElementId');
+  const disablePointerDismissal = store.useState('disablePointerDismissal');
+  const floatingRootContext = store.useState('floatingRootContext');
+  const rootPopupProps = store.useState('popupProps');
+  const modal = store.useState('modal');
+  const mounted = store.useState('mounted');
+  const nested = store.useState('nested');
+  const nestedOpenDialogCount = store.useState('nestedOpenDialogCount');
+  const open = store.useState('open');
+  const openMethod = store.useState('openMethod');
+  const titleElementId = store.useState('titleElementId');
+  const transitionStatus = store.useState('transitionStatus');
+  const role = store.useState('role');
+  useDialogPortalContext();
+  useOpenChangeComplete({
+    open,
+    ref: store.context.popupRef,
+    onComplete() {
+      if (open) {
+        store.context.onOpenChangeComplete?.(true);
+      }
+    }
+  });
+
+  // Default initial focus logic:
+  // If opened by touch, focus the popup element to prevent the virtual keyboard from opening
+  // (this is required for Android specifically as iOS handles this automatically).
+  function defaultInitialFocus(interactionType) {
+    if (interactionType === 'touch') {
+      return store.context.popupRef.current;
+    }
+    return true;
+  }
+  const resolvedInitialFocus = initialFocus === undefined ? defaultInitialFocus : initialFocus;
+  const nestedDialogOpen = nestedOpenDialogCount > 0;
+  const state = {
+    open,
+    nested,
+    transitionStatus,
+    nestedDialogOpen
+  };
+  const element = useRenderElement('div', componentProps, {
+    state,
+    props: [rootPopupProps, {
+      'aria-labelledby': titleElementId ?? undefined,
+      'aria-describedby': descriptionElementId ?? undefined,
+      role,
+      tabIndex: -1,
+      hidden: !mounted,
+      onKeyDown(event) {
+        if (COMPOSITE_KEYS.has(event.key)) {
+          event.stopPropagation();
+        }
+      },
+      style: {
+        [DialogPopupCssVars.nestedDialogs]: nestedOpenDialogCount
+      }
+    }, elementProps],
+    ref: [forwardedRef, store.context.popupRef, store.useStateSetter('popupElement')],
+    stateAttributesMapping: stateAttributesMapping$1
+  });
+  return /*#__PURE__*/jsx(FloatingFocusManager, {
+    context: floatingRootContext,
+    openInteractionType: openMethod,
+    disabled: !mounted,
+    closeOnFocusOut: !disablePointerDismissal,
+    initialFocus: resolvedInitialFocus,
+    returnFocus: finalFocus,
+    modal: modal !== false,
+    restoreFocus: "popup",
+    children: element
+  });
+});
+if (process.env.NODE_ENV !== "production") DialogPopup.displayName = "DialogPopup";
+
+let DialogViewportDataAttributes = function (DialogViewportDataAttributes) {
+  /**
+   * Present when the dialog is open.
+   */
+  DialogViewportDataAttributes[DialogViewportDataAttributes["open"] = CommonPopupDataAttributes.open] = "open";
+  /**
+   * Present when the dialog is closed.
+   */
+  DialogViewportDataAttributes[DialogViewportDataAttributes["closed"] = CommonPopupDataAttributes.closed] = "closed";
+  /**
+   * Present when the dialog is animating in.
+   */
+  DialogViewportDataAttributes[DialogViewportDataAttributes["startingStyle"] = CommonPopupDataAttributes.startingStyle] = "startingStyle";
+  /**
+   * Present when the dialog is animating out.
+   */
+  DialogViewportDataAttributes[DialogViewportDataAttributes["endingStyle"] = 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 = {
+  ...popupStateMapping,
+  ...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.forwardRef(function DialogViewport(componentProps, forwardedRef) {
+  const {
+    className,
+    render,
+    children,
+    ...elementProps
+  } = componentProps;
+  const keepMounted = useDialogPortalContext();
+  const {
+    store
+  } = 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('div', componentProps, {
+    enabled: shouldRender,
+    state,
+    ref: [forwardedRef, store.useStateSetter('viewportElement')],
+    stateAttributesMapping,
+    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 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, createChangeEventDetails(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, createChangeEventDetails(imperativeAction, undefined, undefined));
+  }
+
+  /**
+   * Closes the dialog.
+   */
+  close() {
+    this.store.setOpen(false, createChangeEventDetails(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();
+}
+
+/**
+ * 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;
+
+export { DrawerDescription as D, DialogBackdrop as a, DialogViewport as b, DialogPopup as c, DialogDescription as d, createDialogHandle as e, DialogHandle as f };

package/dist/DrawerTitle-cjs.js

@@ -0,0 +1,116 @@
+'use strict';
+
+var React = require('react');
+var ScrollAreaViewport = require('./ScrollAreaViewport-cjs.js');
+var useRenderElement = require('./useRenderElement-cjs.js');
+var useButton = require('./useButton-cjs.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+/**
+ * A button that closes the dialog.
+ * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
+ */
+const DialogClose = /*#__PURE__*/React__namespace.forwardRef(function DialogClose(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    disabled = false,
+    nativeButton = true,
+    ...elementProps
+  } = componentProps;
+  const {
+    store
+  } = ScrollAreaViewport.useDialogRootContext();
+  const open = store.useState('open');
+  function handleClick(event) {
+    if (open) {
+      store.setOpen(false, useButton.createChangeEventDetails(useButton.closePress, event.nativeEvent));
+    }
+  }
+  const {
+    getButtonProps,
+    buttonRef
+  } = useButton.useButton({
+    disabled,
+    native: nativeButton
+  });
+  const state = {
+    disabled
+  };
+  return useRenderElement.useRenderElement('button', componentProps, {
+    state,
+    ref: [forwardedRef, buttonRef],
+    props: [{
+      onClick: handleClick
+    }, elementProps, getButtonProps]
+  });
+});
+if (process.env.NODE_ENV !== "production") DialogClose.displayName = "DialogClose";
+
+/**
+ * A heading that labels the dialog.
+ * Renders an `<h2>` element.
+ *
+ * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
+ */
+const DialogTitle = /*#__PURE__*/React__namespace.forwardRef(function DialogTitle(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    id: idProp,
+    ...elementProps
+  } = componentProps;
+  const {
+    store
+  } = ScrollAreaViewport.useDialogRootContext();
+  const id = useButton.useBaseUiId(idProp);
+  store.useSyncedValueWithCleanup('titleElementId', id);
+  return useRenderElement.useRenderElement('h2', componentProps, {
+    ref: forwardedRef,
+    props: [{
+      id
+    }, elementProps]
+  });
+});
+if (process.env.NODE_ENV !== "production") DialogTitle.displayName = "DialogTitle";
+
+/**
+ * A button that closes the drawer.
+ * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
+ */
+const DrawerClose = DialogClose;
+
+/**
+ * A heading that labels the drawer.
+ * Renders an `<h2>` element.
+ *
+ * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
+ */
+const DrawerTitle = DialogTitle;
+
+exports.DialogClose = DialogClose;
+exports.DialogTitle = DialogTitle;
+exports.DrawerClose = DrawerClose;
+exports.DrawerTitle = DrawerTitle;

package/dist/DrawerTitle-es.js

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import { u as useDialogRootContext } from './ScrollAreaViewport-es.js';
+import { u as useRenderElement } from './useRenderElement-es.js';
+import { c as useButton, d as createChangeEventDetails, e as closePress, u as useBaseUiId } from './useButton-es.js';
+
+/**
+ * A button that closes the dialog.
+ * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
+ */
+const DialogClose = /*#__PURE__*/React.forwardRef(function DialogClose(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    disabled = false,
+    nativeButton = true,
+    ...elementProps
+  } = componentProps;
+  const {
+    store
+  } = useDialogRootContext();
+  const open = store.useState('open');
+  function handleClick(event) {
+    if (open) {
+      store.setOpen(false, createChangeEventDetails(closePress, event.nativeEvent));
+    }
+  }
+  const {
+    getButtonProps,
+    buttonRef
+  } = useButton({
+    disabled,
+    native: nativeButton
+  });
+  const state = {
+    disabled
+  };
+  return useRenderElement('button', componentProps, {
+    state,
+    ref: [forwardedRef, buttonRef],
+    props: [{
+      onClick: handleClick
+    }, elementProps, getButtonProps]
+  });
+});
+if (process.env.NODE_ENV !== "production") DialogClose.displayName = "DialogClose";
+
+/**
+ * A heading that labels the dialog.
+ * Renders an `<h2>` element.
+ *
+ * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
+ */
+const DialogTitle = /*#__PURE__*/React.forwardRef(function DialogTitle(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    id: idProp,
+    ...elementProps
+  } = componentProps;
+  const {
+    store
+  } = useDialogRootContext();
+  const id = useBaseUiId(idProp);
+  store.useSyncedValueWithCleanup('titleElementId', id);
+  return useRenderElement('h2', componentProps, {
+    ref: forwardedRef,
+    props: [{
+      id
+    }, elementProps]
+  });
+});
+if (process.env.NODE_ENV !== "production") DialogTitle.displayName = "DialogTitle";
+
+/**
+ * A button that closes the drawer.
+ * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
+ */
+const DrawerClose = DialogClose;
+
+/**
+ * A heading that labels the drawer.
+ * Renders an `<h2>` element.
+ *
+ * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
+ */
+const DrawerTitle = DialogTitle;
+
+export { DrawerTitle as D, DrawerClose as a, DialogTitle as b, DialogClose as c };