@jobber/components 8.21.0 → 8.22.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (59) hide show
  1. package/Dialog.d.ts +1 -0
  2. package/Dialog.js +17 -0
  3. package/dist/BottomSheet-cjs.js +34 -7
  4. package/dist/BottomSheet-es.js +34 -8
  5. package/dist/Card/index.cjs +1 -0
  6. package/dist/Card/index.mjs +1 -0
  7. package/dist/ComboboxChipRemove-es.js +3 -3
  8. package/dist/DataDump/index.cjs +1 -0
  9. package/dist/DataDump/index.mjs +1 -0
  10. package/dist/Dialog/Dialog.d.ts +3 -0
  11. package/dist/Dialog/Dialog.types.d.ts +205 -0
  12. package/dist/Dialog/DialogBottomSheet.d.ts +28 -0
  13. package/dist/Dialog/DialogModal.d.ts +20 -0
  14. package/dist/Dialog/constants.d.ts +1 -0
  15. package/dist/Dialog/dialogComposableShared.d.ts +53 -0
  16. package/dist/Dialog/dialogReturnFocus.d.ts +43 -0
  17. package/dist/Dialog/index.cjs +32 -0
  18. package/dist/Dialog/index.d.ts +4 -0
  19. package/dist/Dialog/index.mjs +24 -0
  20. package/dist/DrawerDescription-cjs.js +409 -0
  21. package/dist/DrawerDescription-es.js +382 -0
  22. package/dist/DrawerTitle-cjs.js +116 -0
  23. package/dist/DrawerTitle-es.js +92 -0
  24. package/dist/InputNumberExperimental-es.js +1 -1
  25. package/dist/InternalBackdrop-es.js +2 -2
  26. package/dist/Menu/index.cjs +1 -0
  27. package/dist/Menu/index.mjs +1 -0
  28. package/dist/Menu-cjs.js +5 -3
  29. package/dist/Menu-es.js +5 -3
  30. package/dist/MenuSubmenuTrigger-cjs.js +49 -91
  31. package/dist/MenuSubmenuTrigger-es.js +51 -91
  32. package/dist/NumberFieldInput-es.js +1 -1
  33. package/dist/Page/index.cjs +1 -0
  34. package/dist/Page/index.mjs +1 -0
  35. package/dist/ScrollAreaViewport-cjs.js +938 -935
  36. package/dist/ScrollAreaViewport-es.js +938 -938
  37. package/dist/dialogReturnFocus-cjs.js +427 -0
  38. package/dist/dialogReturnFocus-es.js +423 -0
  39. package/dist/docs/Icon/Icon.md +1 -0
  40. package/dist/index.cjs +13 -7
  41. package/dist/index.d.mts +1 -0
  42. package/dist/index.d.ts +1 -0
  43. package/dist/index.mjs +10 -7
  44. package/dist/primitives/BottomSheet/BottomSheet.d.ts +19 -1
  45. package/dist/primitives/BottomSheet/BottomSheet.types.d.ts +8 -0
  46. package/dist/primitives/BottomSheet/index.cjs +1 -0
  47. package/dist/primitives/BottomSheet/index.d.ts +1 -1
  48. package/dist/primitives/BottomSheet/index.mjs +1 -1
  49. package/dist/primitives/index.cjs +1 -0
  50. package/dist/primitives/index.mjs +1 -1
  51. package/dist/styles.css +360 -0
  52. package/dist/unstyledPrimitives/index.cjs +32 -249
  53. package/dist/unstyledPrimitives/index.d.ts +1 -0
  54. package/dist/unstyledPrimitives/index.mjs +30 -248
  55. package/dist/useButton-es.js +1 -1
  56. package/dist/useCompositeListItem-es.js +2 -2
  57. package/dist/useLabel-es.js +1 -1
  58. package/dist/utils/meta/meta.json +11 -1
  59. package/package.json +3 -3
package/Dialog.d.ts ADDED
@@ -0,0 +1 @@
1
+ export * from "./dist/Dialog";
package/Dialog.js ADDED
@@ -0,0 +1,17 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true,
5
+ });
6
+
7
+ var Dialog = require("./dist/Dialog");
8
+
9
+ Object.keys(Dialog).forEach(function(key) {
10
+ if (key === "default" || key === "__esModule") return;
11
+ Object.defineProperty(exports, key, {
12
+ enumerable: true,
13
+ get: function get() {
14
+ return Dialog[key];
15
+ },
16
+ });
17
+ });
@@ -35,6 +35,15 @@ function resolveBottomSheetTriggerRender({ children, render, }) {
35
35
  React.createElement(Button.Button.Label, null, children)));
36
36
  }
37
37
 
38
+ /**
39
+ * Whether `BottomSheet.Popup` renders its own built-in scroll area (with the
40
+ * bottom fade). Defaults to `true` — the popup wraps its `children` in a
41
+ * scrollable viewport. A consumer that manages its own scroll region (e.g.
42
+ * `Dialog`, which pins a header/footer outside a single scroll area) provides
43
+ * `false` to opt out. Mirrors how `Dialog.Body` decides whether to wrap itself
44
+ * via context rather than a prop.
45
+ */
46
+ const BottomSheetScrollAreaContext = React.createContext(true);
38
47
  function BottomSheetTrigger(_a) {
39
48
  var { children, render, className } = _a, triggerProps = tslib_es6.__rest(_a, ["children", "render", "className"]);
40
49
  return (React.createElement(ScrollAreaViewport.DrawerTrigger, Object.assign({}, triggerProps, { className: className, render: resolveBottomSheetTriggerRender({ children, render }) })));
@@ -50,14 +59,30 @@ function BottomSheetRoot(_a) {
50
59
  }
51
60
  function BottomSheetPopup(_a) {
52
61
  var { children, className, initialFocus, finalFocus, ref } = _a, popupProps = tslib_es6.__rest(_a, ["children", "className", "initialFocus", "finalFocus", "ref"]);
62
+ // Defaults to wrapping; a consumer managing its own scroll region provides
63
+ // `BottomSheetScrollAreaContext` = false.
64
+ const renderScrollArea = React.useContext(BottomSheetScrollAreaContext);
53
65
  return (React.createElement(ScrollAreaViewport.DrawerPortal, null,
54
- React.createElement(ScrollAreaViewport.DrawerBackdrop, { forceRender: true, className: styles.backdrop }),
55
- React.createElement(ScrollAreaViewport.DrawerPopup, Object.assign({}, popupProps, { ref: ref, className: classnames(styles.popup, className), initialFocus: initialFocus, finalFocus: finalFocus }),
56
- React.createElement(ScrollAreaViewport.ScrollAreaRoot, { className: styles.scrollRoot },
57
- React.createElement(ScrollAreaViewport.ScrollAreaViewport, { className: styles.scrollArea, "data-testid": "ATL-BottomSheet-ScrollArea",
58
- // BaseUI sets overflow: scroll in the style prop by default. This is to override that because adding it to the className doesn't work.
59
- style: { overflow: "auto" } }, children),
60
- React.createElement("div", { "aria-hidden": "true", className: styles.bottomFade, "data-testid": "ATL-BottomSheet-Fade" })))));
66
+ React.createElement(ScrollAreaViewport.DrawerBackdrop, { forceRender: true, className: styles.backdrop, "data-testid": "ATL-BottomSheet-Backdrop" }),
67
+ React.createElement(ScrollAreaViewport.DrawerPopup, Object.assign({}, popupProps, { ref: ref, className: classnames(styles.popup, className), initialFocus: initialFocus, finalFocus: finalFocus }), !renderScrollArea ? (
68
+ // The consumer manages its own scroll region (e.g. Dialog pins a
69
+ // header/footer outside a single scroll area) — often by composing
70
+ // `BottomSheet.ScrollArea` itself.
71
+ children) : (React.createElement(BottomSheetScrollArea, null, children)))));
72
+ }
73
+ /**
74
+ * The sheet's scroll region: a styled BaseUI `ScrollArea` (native scrollbar) with
75
+ * a bottom fade that hints at more content while the viewport can scroll further.
76
+ * `BottomSheet.Popup` renders this automatically unless a consumer opts out via
77
+ * `BottomSheetScrollAreaContext` and composes it (or its own scroll region)
78
+ * directly.
79
+ */
80
+ function BottomSheetScrollArea({ children, className, style, }) {
81
+ return (React.createElement(ScrollAreaViewport.ScrollAreaRoot, { className: classnames(styles.scrollRoot, className), style: style },
82
+ React.createElement(ScrollAreaViewport.ScrollAreaViewport, { className: styles.scrollArea, "data-testid": "ATL-BottomSheet-ScrollArea",
83
+ // BaseUI sets overflow: scroll in the style prop by default. This is to override that because adding it to the className doesn't work.
84
+ style: { overflow: "auto" } }, children),
85
+ React.createElement("div", { "aria-hidden": "true", className: styles.bottomFade, "data-testid": "ATL-BottomSheet-Fade" })));
61
86
  }
62
87
  function BottomSheetContent(_a) {
63
88
  var { children, className, ref } = _a, contentProps = tslib_es6.__rest(_a, ["children", "className", "ref"]);
@@ -74,6 +99,8 @@ const BottomSheet = Object.assign(BottomSheetComponent, {
74
99
  Trigger: BottomSheetTrigger,
75
100
  Popup: BottomSheetPopup,
76
101
  Content: BottomSheetContent,
102
+ ScrollArea: BottomSheetScrollArea,
77
103
  });
78
104
 
79
105
  exports.BottomSheet = BottomSheet;
106
+ exports.BottomSheetScrollAreaContext = BottomSheetScrollAreaContext;
@@ -33,6 +33,15 @@ function resolveBottomSheetTriggerRender({ children, render, }) {
33
33
  React__default.createElement(Button.Label, null, children)));
34
34
  }
35
35
 
36
+ /**
37
+ * Whether `BottomSheet.Popup` renders its own built-in scroll area (with the
38
+ * bottom fade). Defaults to `true` — the popup wraps its `children` in a
39
+ * scrollable viewport. A consumer that manages its own scroll region (e.g.
40
+ * `Dialog`, which pins a header/footer outside a single scroll area) provides
41
+ * `false` to opt out. Mirrors how `Dialog.Body` decides whether to wrap itself
42
+ * via context rather than a prop.
43
+ */
44
+ const BottomSheetScrollAreaContext = React__default.createContext(true);
36
45
  function BottomSheetTrigger(_a) {
37
46
  var { children, render, className } = _a, triggerProps = __rest(_a, ["children", "render", "className"]);
38
47
  return (React__default.createElement(DrawerTrigger, Object.assign({}, triggerProps, { className: className, render: resolveBottomSheetTriggerRender({ children, render }) })));
@@ -48,14 +57,30 @@ function BottomSheetRoot(_a) {
48
57
  }
49
58
  function BottomSheetPopup(_a) {
50
59
  var { children, className, initialFocus, finalFocus, ref } = _a, popupProps = __rest(_a, ["children", "className", "initialFocus", "finalFocus", "ref"]);
60
+ // Defaults to wrapping; a consumer managing its own scroll region provides
61
+ // `BottomSheetScrollAreaContext` = false.
62
+ const renderScrollArea = React__default.useContext(BottomSheetScrollAreaContext);
51
63
  return (React__default.createElement(DrawerPortal, null,
52
- React__default.createElement(DrawerBackdrop, { forceRender: true, className: styles.backdrop }),
53
- React__default.createElement(DrawerPopup, Object.assign({}, popupProps, { ref: ref, className: classnames(styles.popup, className), initialFocus: initialFocus, finalFocus: finalFocus }),
54
- React__default.createElement(ScrollAreaRoot, { className: styles.scrollRoot },
55
- React__default.createElement(ScrollAreaViewport, { className: styles.scrollArea, "data-testid": "ATL-BottomSheet-ScrollArea",
56
- // BaseUI sets overflow: scroll in the style prop by default. This is to override that because adding it to the className doesn't work.
57
- style: { overflow: "auto" } }, children),
58
- React__default.createElement("div", { "aria-hidden": "true", className: styles.bottomFade, "data-testid": "ATL-BottomSheet-Fade" })))));
64
+ React__default.createElement(DrawerBackdrop, { forceRender: true, className: styles.backdrop, "data-testid": "ATL-BottomSheet-Backdrop" }),
65
+ React__default.createElement(DrawerPopup, Object.assign({}, popupProps, { ref: ref, className: classnames(styles.popup, className), initialFocus: initialFocus, finalFocus: finalFocus }), !renderScrollArea ? (
66
+ // The consumer manages its own scroll region (e.g. Dialog pins a
67
+ // header/footer outside a single scroll area) — often by composing
68
+ // `BottomSheet.ScrollArea` itself.
69
+ children) : (React__default.createElement(BottomSheetScrollArea, null, children)))));
70
+ }
71
+ /**
72
+ * The sheet's scroll region: a styled BaseUI `ScrollArea` (native scrollbar) with
73
+ * a bottom fade that hints at more content while the viewport can scroll further.
74
+ * `BottomSheet.Popup` renders this automatically unless a consumer opts out via
75
+ * `BottomSheetScrollAreaContext` and composes it (or its own scroll region)
76
+ * directly.
77
+ */
78
+ function BottomSheetScrollArea({ children, className, style, }) {
79
+ return (React__default.createElement(ScrollAreaRoot, { className: classnames(styles.scrollRoot, className), style: style },
80
+ React__default.createElement(ScrollAreaViewport, { className: styles.scrollArea, "data-testid": "ATL-BottomSheet-ScrollArea",
81
+ // BaseUI sets overflow: scroll in the style prop by default. This is to override that because adding it to the className doesn't work.
82
+ style: { overflow: "auto" } }, children),
83
+ React__default.createElement("div", { "aria-hidden": "true", className: styles.bottomFade, "data-testid": "ATL-BottomSheet-Fade" })));
59
84
  }
60
85
  function BottomSheetContent(_a) {
61
86
  var { children, className, ref } = _a, contentProps = __rest(_a, ["children", "className", "ref"]);
@@ -72,6 +97,7 @@ const BottomSheet = Object.assign(BottomSheetComponent, {
72
97
  Trigger: BottomSheetTrigger,
73
98
  Popup: BottomSheetPopup,
74
99
  Content: BottomSheetContent,
100
+ ScrollArea: BottomSheetScrollArea,
75
101
  });
76
102
 
77
- export { BottomSheet as B };
103
+ export { BottomSheetScrollAreaContext as B, BottomSheet as a };
@@ -30,6 +30,7 @@ require('../useButton-cjs.js');
30
30
  require('../clamp-cjs.js');
31
31
  require('../OverlaySeparator-cjs.js');
32
32
  require('../Separator-cjs.js');
33
+ require('../DrawerTitle-cjs.js');
33
34
  require('../MenuSubmenuTrigger-cjs.js');
34
35
  require('../useCompositeListItem-cjs.js');
35
36
 
@@ -28,5 +28,6 @@ import '../useButton-es.js';
28
28
  import '../clamp-es.js';
29
29
  import '../OverlaySeparator-es.js';
30
30
  import '../Separator-es.js';
31
+ import '../DrawerTitle-es.js';
31
32
  import '../MenuSubmenuTrigger-es.js';
32
33
  import '../useCompositeListItem-es.js';
@@ -1,9 +1,9 @@
1
1
  import * as React from 'react';
2
- import { B as useControlled, a as useStableCallback, j as useValueAsRef, c as useTransitionStatus, d as useIsoLayoutEffect, K as createGenericEventDetails, H as inputClear, G as inputChange, n as createChangeEventDetails, v as focusOut, a7 as outsidePress, g as getTarget, a6 as itemPress, f as useOpenChangeComplete, O as useValueChanged, D as none, an as inputPress, E as visuallyHiddenInput, F as visuallyHidden, m as contains, b as useTimeout, N as useButton, o as ownerDocument, s as stopEvent, p as listNavigation, a5 as closePress, u as useBaseUiId, R as isAndroid, ao as isFirefox, a2 as escapeKey, ap as clearPress, t as transitionStatusMapping, S as SafeReact, e as error, aq as chipRemovePress } from './useButton-es.js';
3
- import { f as formatErrorMessage, d as EMPTY_ARRAY, a as useRefWithInit, b as useMergedRefs, N as NOOP, E as EMPTY_OBJECT, u as useRenderElement } from './useRenderElement-es.js';
2
+ import { E as useControlled, e as useStableCallback, n as useValueAsRef, h as useTransitionStatus, j as useIsoLayoutEffect, N as createGenericEventDetails, K as inputClear, J as inputChange, c as createChangeEventDetails, y as focusOut, a4 as outsidePress, k as getTarget, a3 as itemPress, d as useOpenChangeComplete, Q as useValueChanged, G as none, ar as inputPress, H as visuallyHiddenInput, I as visuallyHidden, r as contains, f as useTimeout, u as useButton, o as ownerDocument, s as stopEvent, v as listNavigation, a as closePress, b as useBaseUiId, ag as isAndroid, ad as isFirefox, a0 as escapeKey, as as clearPress, t as transitionStatusMapping, S as SafeReact, g as error, at as chipRemovePress } from './useButton-es.js';
3
+ import { f as formatErrorMessage, d as EMPTY_ARRAY, a as useRefWithInit, N as NOOP, E as EMPTY_OBJECT, b as useMergedRefs, u as useRenderElement } from './useRenderElement-es.js';
4
4
  import { a as useFormContext, b as useFieldRootContext, d as useLabelableId, e as useField, f as fieldValidityMapping, u as useLabelableContext, h as DEFAULT_FIELD_STATE_ATTRIBUTES, c as useLabel } from './useLabel-es.js';
5
5
  import { f as useFloatingRootContext, c as useListNavigation, d as useTypeahead, e as getPseudoElementBounds, C as CompositeList, a as useAnchorPositioning, g as getDisabledMountTransitionStyles, u as useCompositeListItem, I as IndexGuessBehavior } from './useCompositeListItem-es.js';
6
- import { n as createSelector, Z as useStore, s as useOpenInteractionType, y as useClick, t as useDismiss, w as useInteractions, x as useOnFirstRender, _ as Store, W as pressableTriggerOpenStateMapping, m as useDirection, A as triggerOpenStateMapping, q as FloatingPortal, p as popupStateMapping, v as useScrollLock, I as InternalBackdrop, r as inertValue, J as DROPDOWN_COLLISION_AVOIDANCE, o as FloatingFocusManager } from './InternalBackdrop-es.js';
6
+ import { x as createSelector, _ as Store, $ as useStore, E as useOpenInteractionType, M as useClick, H as useDismiss, J as useInteractions, A as useOnFirstRender, U as pressableTriggerOpenStateMapping, n as useDirection, X as triggerOpenStateMapping, r as FloatingPortal, p as popupStateMapping, G as useScrollLock, I as InternalBackdrop, t as inertValue, w as DROPDOWN_COLLISION_AVOIDANCE, F as FloatingFocusManager } from './InternalBackdrop-es.js';
7
7
  import { jsx, jsxs } from 'react/jsx-runtime';
8
8
  import * as ReactDOM from 'react-dom';
9
9
 
@@ -31,6 +31,7 @@ require('../useButton-cjs.js');
31
31
  require('../clamp-cjs.js');
32
32
  require('../OverlaySeparator-cjs.js');
33
33
  require('../Separator-cjs.js');
34
+ require('../DrawerTitle-cjs.js');
34
35
  require('../MenuSubmenuTrigger-cjs.js');
35
36
  require('../useCompositeListItem-cjs.js');
36
37
  require('../Content-cjs.js');
@@ -29,6 +29,7 @@ import '../useButton-es.js';
29
29
  import '../clamp-es.js';
30
30
  import '../OverlaySeparator-es.js';
31
31
  import '../Separator-es.js';
32
+ import '../DrawerTitle-es.js';
32
33
  import '../MenuSubmenuTrigger-es.js';
33
34
  import '../useCompositeListItem-es.js';
34
35
  import '../Content-es.js';
@@ -0,0 +1,3 @@
1
+ import type { DialogComponent } from "./Dialog.types";
2
+ declare const Dialog: DialogComponent;
3
+ export { Dialog };
@@ -0,0 +1,205 @@
1
+ import type { CSSProperties, ComponentPropsWithRef, ComponentPropsWithoutRef, FunctionComponent, ReactElement, ReactNode } from "react";
2
+ import type { Dialog as BaseDialog } from "../unstyledPrimitives";
3
+ import type { ButtonProps } from "../Button";
4
+ type BaseUIPropsToExclude = "render" | "className" | "style" | "ref" | "children";
5
+ /** Width of the dialog; `fullScreen` fills the viewport. */
6
+ export type DialogSize = "small" | "base" | "large" | "fullScreen";
7
+ /** `alertdialog` blocks outside/backdrop dismissal; `dialog` allows it. */
8
+ export type DialogType = "dialog" | "alertdialog";
9
+ /**
10
+ * Shared `className`/`style` contract for the composable Dialog parts.
11
+ */
12
+ export interface DialogBaseProps {
13
+ /** Class name applied to the part's root element. */
14
+ readonly className?: string;
15
+ /** Inline styles applied to the part's root element. */
16
+ readonly style?: CSSProperties;
17
+ }
18
+ export type DialogHandle<Payload = unknown> = BaseDialog.Handle<Payload>;
19
+ export interface DialogRootProps<Payload = unknown> extends Pick<BaseDialog.Root.Props<Payload>, "open" | "onOpenChange" | "handle" | "triggerId" | "defaultTriggerId" | "onOpenChangeComplete"> {
20
+ /**
21
+ * Called when the user asks to close (escape, backdrop, dismiss button).
22
+ * Receives BaseUI's change-event details (reason + originating event),
23
+ * matching how BaseUI types its open/close callbacks.
24
+ */
25
+ readonly onRequestClose?: (eventDetails: BaseDialog.Root.ChangeEventDetails) => void;
26
+ /**
27
+ * Width of the dialog.
28
+ * On mobile when this is set to "fullScreen" the bottom sheet will be full screen (100% height).
29
+ * @default "base"
30
+ */
31
+ readonly size?: DialogSize;
32
+ /**
33
+ * Type of the dialog. An `alertdialog` requires the user to choose an action
34
+ * before it can be closed (no outside/backdrop dismissal).
35
+ * @default "dialog"
36
+ */
37
+ readonly type?: DialogType;
38
+ /**
39
+ * @see {@link https://base-ui.com/react/components/dialog#DialogPopup-finalFocus}
40
+ * */
41
+ readonly finalFocus?: BaseDialog.Popup.Props["finalFocus"];
42
+ /**
43
+ * The content of the dialog. This can be a regular React node or a render function that receives the payload of the active trigger.
44
+ */
45
+ readonly children?: ReactNode | ((state: {
46
+ payload: Payload | undefined;
47
+ }) => ReactNode);
48
+ }
49
+ /** Props BaseUI passes to a `Dialog.Trigger` `render` callback. */
50
+ export type DialogTriggerRenderProps = ComponentPropsWithRef<"button">;
51
+ /** A custom trigger element, or a function that renders one from BaseUI props. */
52
+ export type DialogTriggerRender = ReactElement | ((props: DialogTriggerRenderProps) => ReactElement);
53
+ interface DialogTriggerSharedProps<Payload> extends DialogBaseProps, Omit<BaseDialog.Trigger.Props, BaseUIPropsToExclude | "handle" | "payload"> {
54
+ /**
55
+ * Links a detached trigger to a `Dialog` with the matching `handle`, when the
56
+ * trigger can't be nested inside the `Dialog`.
57
+ */
58
+ readonly handle?: DialogHandle<Payload>;
59
+ /**
60
+ * Data passed to the dialog when this trigger opens it (used with `handle`).
61
+ */
62
+ readonly payload?: Payload;
63
+ }
64
+ interface DialogTriggerDefaultProps<Payload> extends DialogTriggerSharedProps<Payload> {
65
+ /** Trigger content; an Atlantis `<Button>` or raw text. */
66
+ readonly children: ReactNode;
67
+ readonly render?: undefined;
68
+ }
69
+ interface DialogTriggerCustomRenderProps<Payload> extends DialogTriggerSharedProps<Payload> {
70
+ /** Optional content forwarded to the rendered element. */
71
+ readonly children?: ReactNode;
72
+ /** Renders a custom trigger element in place of the default `<Button>`. */
73
+ readonly render: DialogTriggerRender;
74
+ }
75
+ /**
76
+ * Either the default
77
+ * (`children` required, `render` omitted) or custom-render (`render` required,
78
+ * `children` optional).
79
+ */
80
+ export type DialogTriggerProps<Payload = unknown> = DialogTriggerDefaultProps<Payload> | DialogTriggerCustomRenderProps<Payload>;
81
+ export interface DialogContentProps extends DialogBaseProps, Omit<BaseDialog.Popup.Props, BaseUIPropsToExclude | "role" | "finalFocus" | "initialFocus"> {
82
+ readonly children: ReactNode;
83
+ /**
84
+ * @see {@link https://base-ui.com/react/components/dialog#DialogPopup-render}
85
+ */
86
+ readonly render?: BaseDialog.Popup.Props["render"];
87
+ }
88
+ export interface DialogHeaderProps extends DialogBaseProps, Omit<ComponentPropsWithoutRef<"div">, BaseUIPropsToExclude> {
89
+ /**
90
+ * Header content — commonly a `Dialog.Title` and a `Dialog.Close`. The header
91
+ * only owns layout; it does not impose typography or actions.
92
+ */
93
+ readonly children: ReactNode;
94
+ }
95
+ export interface DialogTitleProps extends DialogBaseProps, Omit<BaseDialog.Title.Props, BaseUIPropsToExclude> {
96
+ /**
97
+ * Title text. Rendered as a `Heading` and auto-wired to the dialog's
98
+ * `aria-labelledby`.
99
+ */
100
+ readonly children: ReactNode;
101
+ }
102
+ /** Props BaseUI passes to a `Dialog.Close` `render` callback. */
103
+ export type DialogCloseRenderProps = ComponentPropsWithRef<"button">;
104
+ /** A custom dismiss element, or a function that renders one from BaseUI props. */
105
+ export type DialogCloseRender = ReactElement | ((props: DialogCloseRenderProps) => ReactElement);
106
+ export interface DialogCloseProps extends DialogBaseProps, Omit<BaseDialog.Close.Props, BaseUIPropsToExclude> {
107
+ /**
108
+ * Optional content for the dismiss control. An Atlantis `<Button>` is adapted
109
+ * automatically; any other valid element is used as-is. The default ButtonDismiss is used if no children or render is provided.
110
+ */
111
+ readonly children?: ReactNode;
112
+ /**
113
+ * Renders a custom dismiss element in place of the default `ButtonDismiss`
114
+ * Pass an element or a function that receives the
115
+ * BaseUI close props (so the element stays wired to close the dialog).
116
+ */
117
+ readonly render?: DialogCloseRender;
118
+ }
119
+ export interface DialogBodyProps extends DialogBaseProps, Omit<BaseDialog.Description.Props, BaseUIPropsToExclude> {
120
+ /** Body content; describes the dialog (wired to `aria-describedby`). */
121
+ readonly children: ReactNode;
122
+ /**
123
+ * Removes body padding
124
+ * @default false
125
+ */
126
+ readonly fullBleed?: boolean;
127
+ }
128
+ export interface DialogFooterProps extends DialogBaseProps, Omit<ComponentPropsWithoutRef<"div">, BaseUIPropsToExclude> {
129
+ /**
130
+ * Footer content. Commonly a `Dialog.Actions`, but the footer is a generic
131
+ * region — it can hold anything (a note, a checkbox, a custom layout).
132
+ */
133
+ readonly children: ReactNode;
134
+ }
135
+ /**
136
+ * `Dialog.ScrollArea` — the advanced scroll region. Content placed inside it
137
+ * scrolls (and owns the scrollbar); parts left as siblings of it in
138
+ * `Dialog.Content` stay pinned. Most dialogs don't need it — `Dialog.Body` is
139
+ * the scroll region for the common case.
140
+ */
141
+ export interface DialogScrollAreaProps extends DialogBaseProps {
142
+ /**
143
+ * Content that scrolls together — typically a `Dialog.Body` and a non-pinned
144
+ * `Dialog.Header`/`Dialog.Footer`.
145
+ */
146
+ readonly children: ReactNode;
147
+ }
148
+ export type DialogShellRootProps = BaseDialog.Root.Props;
149
+ /** Value shared with the Dialog parts via context. */
150
+ export interface DialogContextValue {
151
+ /** Dialog vs. alertdialog mode. */
152
+ readonly type: DialogType;
153
+ /** Configured dialog width. */
154
+ readonly size: DialogSize;
155
+ /**
156
+ * Whether the dialog should present as a mobile bottom sheet. Computed once at
157
+ * the root (like Menu's shell selection) and read by the parts.
158
+ */
159
+ readonly isMobile: boolean;
160
+ readonly finalFocus?: BaseDialog.Popup.Props["finalFocus"];
161
+ }
162
+ export interface DialogProviderProps extends DialogContextValue {
163
+ readonly children: ReactNode;
164
+ }
165
+ /** The assembled `Dialog` component: a root with the parts attached. */
166
+ export interface DialogComponent {
167
+ <Payload = unknown>(props: DialogRootProps<Payload>): ReactElement;
168
+ Trigger: <Payload = unknown>(props: DialogTriggerProps<Payload>) => ReactElement;
169
+ Content: FunctionComponent<DialogContentProps>;
170
+ Header: FunctionComponent<DialogHeaderProps>;
171
+ Title: FunctionComponent<DialogTitleProps>;
172
+ Close: FunctionComponent<DialogCloseProps>;
173
+ Body: FunctionComponent<DialogBodyProps>;
174
+ Footer: FunctionComponent<DialogFooterProps>;
175
+ Actions: FunctionComponent<DialogActionsProps>;
176
+ ScrollArea: FunctionComponent<DialogScrollAreaProps>;
177
+ createHandle: <Payload = unknown>() => DialogHandle<Payload>;
178
+ }
179
+ export type DialogActionsAlign = "left" | "right" | "fullWidth";
180
+ interface DialogActionsBaseProps extends DialogBaseProps, Omit<ComponentPropsWithoutRef<"div">, "className" | "style" | "children"> {
181
+ /** Primary action (right). */
182
+ readonly primary?: ButtonProps | ReactElement;
183
+ /** Secondary action (right, subtle). */
184
+ readonly secondary?: ButtonProps | ReactElement;
185
+ /** Tertiary/destructive action (left). */
186
+ readonly tertiary?: ButtonProps | ReactElement;
187
+ /**
188
+ * Layout for the right-hand action group.
189
+ * @default "right"
190
+ */
191
+ readonly align?: DialogActionsAlign;
192
+ }
193
+ /**
194
+ * At least one of `primary`, `secondary`, or `tertiary` is required; any other
195
+ * combination of the three is allowed. Modeled as a union where each member
196
+ * pins one action as required while the rest stay optional from the base.
197
+ */
198
+ export type DialogActionsProps = (DialogActionsBaseProps & {
199
+ readonly primary: ButtonProps | ReactElement;
200
+ }) | (DialogActionsBaseProps & {
201
+ readonly secondary: ButtonProps | ReactElement;
202
+ }) | (DialogActionsBaseProps & {
203
+ readonly tertiary: ButtonProps | ReactElement;
204
+ });
205
+ export {};
@@ -0,0 +1,28 @@
1
+ import React from "react";
2
+ import type { DialogBodyProps, DialogCloseProps, DialogContentProps, DialogScrollAreaProps, DialogShellRootProps, DialogTitleProps, DialogTriggerProps } from "./Dialog.types";
3
+ import { SharedDialogFooter, SharedDialogHeader } from "./dialogComposableShared";
4
+ declare function DialogBottomSheetRoot(props: DialogShellRootProps): React.JSX.Element;
5
+ declare function DialogBottomSheetTrigger<Payload = unknown>(props: DialogTriggerProps<Payload>): React.JSX.Element;
6
+ declare function DialogBottomSheetContent({ children, className, style, ...rest }: DialogContentProps): React.JSX.Element;
7
+ declare function DialogBottomSheetTitle({ children, ...rest }: DialogTitleProps): React.JSX.Element;
8
+ declare function DialogBottomSheetClose({ children, render, ...rest }: DialogCloseProps): React.JSX.Element;
9
+ /**
10
+ * The sheet's scroll region — backed by the BottomSheet primitive's styled
11
+ * scroll area (native scrollbar + bottom fade). Marks its content as inside a
12
+ * scroll area so a nested `Dialog.Body` renders plain and sticky regions know
13
+ * they scroll.
14
+ */
15
+ declare function DialogBottomSheetScrollArea({ children, className, style, }: DialogScrollAreaProps): React.JSX.Element;
16
+ declare function DialogBottomSheetBody({ children, fullBleed, className, style, ...rest }: DialogBodyProps): React.JSX.Element;
17
+ /** Mobile shell: a bottom sheet built on the BottomSheet/Drawer primitives. */
18
+ export declare const DialogBottomSheet: typeof DialogBottomSheetRoot & {
19
+ Trigger: typeof DialogBottomSheetTrigger;
20
+ Content: typeof DialogBottomSheetContent;
21
+ Header: typeof SharedDialogHeader;
22
+ Title: typeof DialogBottomSheetTitle;
23
+ Close: typeof DialogBottomSheetClose;
24
+ Body: typeof DialogBottomSheetBody;
25
+ Footer: typeof SharedDialogFooter;
26
+ ScrollArea: typeof DialogBottomSheetScrollArea;
27
+ };
28
+ export {};
@@ -0,0 +1,20 @@
1
+ import React from "react";
2
+ import type { DialogBodyProps, DialogCloseProps, DialogContentProps, DialogShellRootProps, DialogTitleProps, DialogTriggerProps } from "./Dialog.types";
3
+ import { DialogScrollArea, SharedDialogFooter, SharedDialogHeader } from "./dialogComposableShared";
4
+ declare function DialogModalRoot(props: DialogShellRootProps): React.JSX.Element;
5
+ declare function DialogModalTrigger<Payload = unknown>({ children, render, handle, payload, className, style, ...rest }: DialogTriggerProps<Payload>): React.JSX.Element;
6
+ declare function DialogModalContent({ children, className, style, ...rest }: DialogContentProps): React.JSX.Element;
7
+ declare function DialogModalTitle({ children, ...rest }: DialogTitleProps): React.JSX.Element;
8
+ declare function DialogModalClose({ children, render, ...rest }: DialogCloseProps): React.JSX.Element;
9
+ declare function DialogModalBody({ children, fullBleed, className, style, ...rest }: DialogBodyProps): React.JSX.Element;
10
+ export declare const DialogModal: typeof DialogModalRoot & {
11
+ Trigger: typeof DialogModalTrigger;
12
+ Content: typeof DialogModalContent;
13
+ Header: typeof SharedDialogHeader;
14
+ Title: typeof DialogModalTitle;
15
+ Close: typeof DialogModalClose;
16
+ Body: typeof DialogModalBody;
17
+ Footer: typeof SharedDialogFooter;
18
+ ScrollArea: typeof DialogScrollArea;
19
+ };
20
+ export {};
@@ -0,0 +1 @@
1
+ export declare const SMALL_SCREEN_BREAKPOINT = 490;
@@ -0,0 +1,53 @@
1
+ import React from "react";
2
+ import type { DialogActionsProps, DialogCloseRender, DialogContextValue, DialogFooterProps, DialogHeaderProps, DialogProviderProps, DialogScrollAreaProps, DialogTriggerRender } from "./Dialog.types";
3
+ /**
4
+ * Resolves the trigger element for `Dialog.Trigger`. Copied from Menu's
5
+ * `resolveMenuTriggerRender` so an Atlantis `<Button>` works as a trigger via
6
+ * `children` or `render` identically in both shells. Raw text children are
7
+ * wrapped in a default `Button`.
8
+ */
9
+ export declare function resolveComposableTriggerRender({ children, render, }: {
10
+ readonly children?: React.ReactNode;
11
+ readonly render?: DialogTriggerRender;
12
+ }): React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | ((props: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>) => React.JSX.Element);
13
+ /**
14
+ * Resolves the dismiss element for `Dialog.Close`, mirroring
15
+ * `resolveComposableTriggerRender` so a custom render works in both shells.
16
+ * Falls back to the subtle "remove" `ButtonDismiss` when neither `render` nor
17
+ * `children` are supplied. An Atlantis `<Button>`/`<ButtonDismiss>` passed via
18
+ * `render` or `children` is adapted; any other valid element is used as-is.
19
+ */
20
+ export declare function resolveComposableCloseRender({ children, render, }: {
21
+ readonly children?: React.ReactNode;
22
+ readonly render?: DialogCloseRender;
23
+ }): React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | ((props: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>) => React.JSX.Element);
24
+ /** Supplies the static config (type/size/isMobile/finalFocus) to the parts. */
25
+ export declare function DialogProvider({ children, type, size, isMobile, finalFocus, }: DialogProviderProps): React.JSX.Element;
26
+ /** Reads the Dialog config; throws if a part is used outside `<Dialog>`. */
27
+ export declare function useDialogContext(): DialogContextValue;
28
+ /**
29
+ * True when the current parts render inside a `Dialog.ScrollArea` (or the scroll
30
+ * region a `Dialog.Body` wraps itself in). Header/Footer read it to know whether
31
+ * they are sticky (not nested inside a `Dialog.ScrollArea`) or scroll (nested inside a `Dialog.ScrollArea`); `Dialog.Body`
32
+ * reads it to avoid creating a nested scroller.
33
+ */
34
+ export declare const DialogScrollAreaContext: React.Context<boolean>;
35
+ /** Whether the current part is nested inside a `Dialog.ScrollArea`. */
36
+ export declare function useInsideDialogScrollArea(): boolean;
37
+ /**
38
+ * The modal's scroll region — a BaseUI `ScrollArea` that scrolls its content
39
+ * with the browser's native scrollbar (re-enabled in Dialog.module.css). Content
40
+ * placed inside it scrolls and owns the scrollbar; `Dialog.Body` used on its own
41
+ * wraps itself in one. (The bottom sheet uses `DialogBottomSheetScrollArea`,
42
+ * backed by the BottomSheet primitive's scroll area, for its fade.)
43
+ */
44
+ export declare function DialogScrollArea({ children, className, style, }: DialogScrollAreaProps): React.JSX.Element;
45
+ /** Layout-only header row; sticky unless nested inside a `Dialog.ScrollArea`. */
46
+ export declare function SharedDialogHeader({ children, className, style, ...rest }: DialogHeaderProps): React.JSX.Element;
47
+ /** Generic footer region; sticky unless nested inside a `Dialog.ScrollArea`. */
48
+ export declare function SharedDialogFooter({ children, className, style, ...rest }: DialogFooterProps): React.JSX.Element;
49
+ /**
50
+ * The action-button layout: tertiary on the left, primary/secondary grouped on
51
+ * the right. Drop it inside a `Dialog.Footer`.
52
+ */
53
+ export declare function DialogActions({ primary, secondary, tertiary, align, className, style, ...rest }: DialogActionsProps): React.JSX.Element;
@@ -0,0 +1,43 @@
1
+ import type { RefObject } from "react";
2
+ /**
3
+ * The first focusable element within `container` (the container itself counts if
4
+ * it is focusable). Skips hidden elements. Returns `null` when nothing inside is
5
+ * focusable.
6
+ */
7
+ export declare function getFirstFocusableWithin(container: HTMLElement | null): HTMLElement | null;
8
+ /** Options for {@link getDialogReturnFocus}. */
9
+ export interface DialogReturnFocusOptions {
10
+ /**
11
+ * The element focus should return to when it is still in the DOM at close
12
+ * time — typically the trigger (an autocomplete/combobox input, a button).
13
+ */
14
+ readonly trigger?: RefObject<HTMLElement | null> | null;
15
+ /**
16
+ * A container that stays mounted while the trigger may unmount. When the
17
+ * trigger is gone, focus returns to the first focusable element inside it —
18
+ * e.g. the card that replaced the trigger. Keep it scoped tightly around the
19
+ * region that swaps so the "closest" element is the one the user expects.
20
+ */
21
+ readonly boundary: RefObject<HTMLElement | null>;
22
+ }
23
+ /**
24
+ * Builds a `finalFocus` callback for `Dialog` that keeps keyboard focus near the
25
+ * trigger even when the trigger unmounts while the dialog is open (e.g. an
26
+ * autocomplete "Create" action whose row is replaced by a card on save).
27
+ *
28
+ * Resolution order on close:
29
+ * 1. the `trigger`, if it is still connected;
30
+ * 2. otherwise the first focusable element inside `boundary` (the "closest"
31
+ * landing spot);
32
+ * 3. otherwise `null`, which lets BaseUI fall back to its default behavior.
33
+ *
34
+ * @example
35
+ * const triggerRef = useRef<HTMLInputElement>(null);
36
+ * const boundaryRef = useRef<HTMLDivElement>(null);
37
+ * <div ref={boundaryRef}>…</div>
38
+ * <Dialog
39
+ * handle={handle}
40
+ * finalFocus={getDialogReturnFocus({ trigger: triggerRef, boundary: boundaryRef })}
41
+ * >
42
+ */
43
+ export declare function getDialogReturnFocus({ trigger, boundary, }: DialogReturnFocusOptions): () => HTMLElement | null;
@@ -0,0 +1,32 @@
1
+ 'use strict';
2
+
3
+ var dialogReturnFocus = require('../dialogReturnFocus-cjs.js');
4
+ require('../tslib.es6-cjs.js');
5
+ require('react');
6
+ require('@jobber/hooks');
7
+ require('classnames');
8
+ require('../buttonRenderAdapter-cjs.js');
9
+ require('../Button-cjs.js');
10
+ require('react-router-dom');
11
+ require('../Icon-cjs.js');
12
+ require('@jobber/design');
13
+ require('../Typography-cjs.js');
14
+ require('../useRenderElement-cjs.js');
15
+ require('../ScrollAreaViewport-cjs.js');
16
+ require('../InternalBackdrop-cjs.js');
17
+ require('../index.esm-cjs.js');
18
+ require('../floating-ui.utils.dom-cjs.js');
19
+ require('../useButton-cjs.js');
20
+ require('react-dom');
21
+ require('react/jsx-runtime');
22
+ require('../clamp-cjs.js');
23
+ require('../Heading-cjs.js');
24
+ require('../BottomSheet-cjs.js');
25
+ require('../DrawerTitle-cjs.js');
26
+ require('../DrawerDescription-cjs.js');
27
+
28
+
29
+
30
+ exports.Dialog = dialogReturnFocus.Dialog;
31
+ exports.getDialogReturnFocus = dialogReturnFocus.getDialogReturnFocus;
32
+ exports.getFirstFocusableWithin = dialogReturnFocus.getFirstFocusableWithin;
@@ -0,0 +1,4 @@
1
+ export { Dialog } from "./Dialog";
2
+ export { getDialogReturnFocus, getFirstFocusableWithin, } from "./dialogReturnFocus";
3
+ export type { DialogReturnFocusOptions } from "./dialogReturnFocus";
4
+ export type { DialogBodyProps, DialogCloseProps, DialogCloseRender, DialogContentProps, DialogFooterProps, DialogHandle, DialogHeaderProps, DialogRootProps, DialogSize, DialogTitleProps, DialogTriggerProps, DialogTriggerRender, DialogType, } from "./Dialog.types";
@@ -0,0 +1,24 @@
1
+ export { D as Dialog, g as getDialogReturnFocus, a as getFirstFocusableWithin } from '../dialogReturnFocus-es.js';
2
+ import '../tslib.es6-es.js';
3
+ import 'react';
4
+ import '@jobber/hooks';
5
+ import 'classnames';
6
+ import '../buttonRenderAdapter-es.js';
7
+ import '../Button-es.js';
8
+ import 'react-router-dom';
9
+ import '../Icon-es.js';
10
+ import '@jobber/design';
11
+ import '../Typography-es.js';
12
+ import '../useRenderElement-es.js';
13
+ import '../ScrollAreaViewport-es.js';
14
+ import '../InternalBackdrop-es.js';
15
+ import '../index.esm-es.js';
16
+ import '../floating-ui.utils.dom-es.js';
17
+ import '../useButton-es.js';
18
+ import 'react-dom';
19
+ import 'react/jsx-runtime';
20
+ import '../clamp-es.js';
21
+ import '../Heading-es.js';
22
+ import '../BottomSheet-es.js';
23
+ import '../DrawerTitle-es.js';
24
+ import '../DrawerDescription-es.js';