@jobber/components 8.14.1 → 8.16.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 (46) hide show
  1. package/dist/Autocomplete-es.js +1 -1
  2. package/dist/BottomSheet-cjs.js +109 -77
  3. package/dist/BottomSheet-es.js +103 -75
  4. package/dist/Card/index.cjs +2 -3
  5. package/dist/Card/index.mjs +2 -3
  6. package/dist/DataDump/index.cjs +2 -3
  7. package/dist/DataDump/index.mjs +2 -3
  8. package/dist/InputNumberExperimental-cjs.js +16 -17
  9. package/dist/InputNumberExperimental-es.js +2 -3
  10. package/dist/Menu/index.cjs +2 -3
  11. package/dist/Menu/index.mjs +2 -3
  12. package/dist/Menu-cjs.js +11 -56
  13. package/dist/Menu-es.js +4 -49
  14. package/dist/MenuSubmenuTrigger-cjs.js +1608 -1793
  15. package/dist/MenuSubmenuTrigger-es.js +1340 -1522
  16. package/dist/Modal/index.mjs +1 -1
  17. package/dist/NumberFieldInput-cjs.js +53 -54
  18. package/dist/NumberFieldInput-es.js +2 -3
  19. package/dist/Page/index.cjs +2 -3
  20. package/dist/Page/index.mjs +2 -3
  21. package/dist/{DrawerRoot-cjs.js → ScrollAreaViewport-cjs.js} +5488 -4449
  22. package/dist/{DrawerRoot-es.js → ScrollAreaViewport-es.js} +5423 -4393
  23. package/dist/{useValueChanged-cjs.js → clamp-cjs.js} +573 -321
  24. package/dist/{useValueChanged-es.js → clamp-es.js} +569 -322
  25. package/dist/floating-ui.react-es.js +1 -1
  26. package/dist/index.cjs +2 -3
  27. package/dist/index.mjs +2 -3
  28. package/dist/primitives/BottomSheet/BottomSheet.d.ts +15 -16
  29. package/dist/primitives/BottomSheet/BottomSheet.types.d.ts +27 -0
  30. package/dist/primitives/BottomSheet/BottomSheet.utils.d.ts +6 -0
  31. package/dist/primitives/BottomSheet/index.cjs +8 -3
  32. package/dist/primitives/BottomSheet/index.d.ts +1 -0
  33. package/dist/primitives/BottomSheet/index.mjs +8 -3
  34. package/dist/primitives/InputNumberExperimental/index.cjs +2 -3
  35. package/dist/primitives/InputNumberExperimental/index.mjs +2 -3
  36. package/dist/primitives/index.cjs +8 -9
  37. package/dist/primitives/index.mjs +8 -9
  38. package/dist/styles.css +62 -1
  39. package/dist/unstyledPrimitives/index.cjs +6373 -5868
  40. package/dist/unstyledPrimitives/index.d.ts +2 -0
  41. package/dist/unstyledPrimitives/index.mjs +6325 -5822
  42. package/dist/useRenderElement-cjs.js +30 -30
  43. package/dist/useRenderElement-es.js +31 -31
  44. package/package.json +2 -2
  45. package/dist/useBaseUiId-cjs.js +0 -275
  46. package/dist/useBaseUiId-es.js +0 -251
@@ -1,5 +1,5 @@
1
1
  import React__default, { useState, useRef, useEffect, useCallback, useMemo, forwardRef } from 'react';
2
- import { u as useFloating, j as useClick, k as useListNavigation, c as useDismiss, d as useInteractions, F as FloatingPortal, h as FloatingFocusManager, l as useTransitionStyles } from './floating-ui.react-es.js';
2
+ import { u as useFloating, k as useClick, g as useListNavigation, c as useDismiss, d as useInteractions, F as FloatingPortal, i as FloatingFocusManager, l as useTransitionStyles } from './floating-ui.react-es.js';
3
3
  import classnames from 'classnames';
4
4
  import { tokens } from '@jobber/design';
5
5
  import { useCallbackRef, useDebounce } from '@jobber/hooks';
@@ -3,94 +3,126 @@
3
3
  var tslib_es6 = require('./tslib.es6-cjs.js');
4
4
  var React = require('react');
5
5
  var classnames = require('classnames');
6
- var DrawerRoot = require('./DrawerRoot-cjs.js');
6
+ var Button = require('./Button-cjs.js');
7
+ var useRenderElement = require('./useRenderElement-cjs.js');
8
+ var ScrollAreaViewport = require('./ScrollAreaViewport-cjs.js');
7
9
 
8
- var styles = {"backdrop":"Qf3IFhKJwQ0-","popup":"_868PDAA3U2M-","content":"eKuxReHyju8-","scrollArea":"_1I0eaFciaWo-","bottomFade":"BYEzqcZUGls-","spinning":"IJxq5fm5qdw-"};
9
-
10
- const BOTTOM_THRESHOLD = 1;
11
- const BottomSheetContext = React.createContext(null);
12
- function BottomSheetRoot(_a) {
13
- var { children, defaultOpen, onOpenChange, open } = _a, rootProps = tslib_es6.__rest(_a, ["children", "defaultOpen", "onOpenChange", "open"]);
14
- const isControlled = open !== undefined;
15
- const [internalOpen, setInternalOpen] = React.useState(defaultOpen !== null && defaultOpen !== void 0 ? defaultOpen : false);
16
- const isOpen = isControlled ? open : internalOpen;
17
- const handleOpenChange = React.useCallback((nextOpen, eventDetails) => {
18
- if (!isControlled) {
19
- setInternalOpen(nextOpen);
20
- }
21
- onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(nextOpen, eventDetails);
22
- }, [isControlled, onOpenChange]);
23
- return (React.createElement(BottomSheetContext.Provider, { value: { isOpen } },
24
- React.createElement(DrawerRoot.DrawerRoot, Object.assign({}, rootProps, { defaultOpen: defaultOpen, onOpenChange: handleOpenChange, open: open }), children)));
10
+ function assignRef(ref, instance) {
11
+ if (!ref) {
12
+ return;
13
+ }
14
+ if (typeof ref === "function") {
15
+ ref(instance);
16
+ return;
17
+ }
18
+ ref.current = instance;
25
19
  }
26
- const BottomSheetPopup = React.forwardRef(function BottomSheetPopup(_a, ref) {
27
- var { children, className, initialFocus, finalFocus } = _a, popupProps = tslib_es6.__rest(_a, ["children", "className", "initialFocus", "finalFocus"]);
28
- const scrollAreaRef = React.useRef(null);
29
- const [showBottomFade, setShowBottomFade] = React.useState(false);
30
- const bottomSheetContext = React.useContext(BottomSheetContext);
31
- const isOpen = bottomSheetContext === null || bottomSheetContext === void 0 ? void 0 : bottomSheetContext.isOpen;
32
- const syncBottomFade = React.useCallback(() => {
33
- const node = scrollAreaRef.current;
34
- if (!node)
35
- return;
36
- const hasOverflow = node.scrollHeight > node.clientHeight;
37
- const isAtBottom = node.scrollTop + node.clientHeight >=
38
- node.scrollHeight - BOTTOM_THRESHOLD;
39
- const nextShowBottomFade = hasOverflow && !isAtBottom;
40
- setShowBottomFade(nextShowBottomFade);
41
- }, []);
42
- const scheduleFadeUpdate = React.useCallback(() => {
43
- syncBottomFade();
44
- let firstAnimationFrame = 0;
45
- let secondAnimationFrame = 0;
46
- firstAnimationFrame = window.requestAnimationFrame(() => {
47
- syncBottomFade();
48
- secondAnimationFrame = window.requestAnimationFrame(() => {
49
- syncBottomFade();
50
- });
20
+ function mergeRefs(...refs) {
21
+ return (instance) => {
22
+ refs.forEach(ref => {
23
+ assignRef(ref, instance);
51
24
  });
52
- return () => {
53
- window.cancelAnimationFrame(firstAnimationFrame);
54
- window.cancelAnimationFrame(secondAnimationFrame);
55
- };
56
- }, [syncBottomFade]);
57
- React.useLayoutEffect(() => {
58
- if (isOpen === false) {
59
- setShowBottomFade(false);
60
- return;
25
+ };
26
+ }
27
+ function getElementRef(element) {
28
+ return element.ref;
29
+ }
30
+ function normalizeBaseUiButtonProps(props) {
31
+ const rest = tslib_es6.__rest(props, ["type"]);
32
+ return rest;
33
+ }
34
+ function isAtlantisButtonRenderTarget(element) {
35
+ return React.isValidElement(element) && element.type === Button.Button;
36
+ }
37
+ function renderAtlantisButtonTarget(element) {
38
+ return function renderButtonTarget(props) {
39
+ const mergedProps = useRenderElement.mergeProps(normalizeBaseUiButtonProps(props), element.props);
40
+ return (React.createElement(Button.Button, Object.assign({}, mergedProps, { ref: mergeRefs(props.ref, getElementRef(element)), key: element.key })));
41
+ };
42
+ }
43
+ function stripNativeTypeFromButtonRenderTarget(element) {
44
+ const nativeType = element.props.type;
45
+ if (nativeType !== "button" &&
46
+ nativeType !== "submit" &&
47
+ nativeType !== "reset") {
48
+ return element;
49
+ }
50
+ return React.cloneElement(element, {
51
+ type: undefined,
52
+ });
53
+ }
54
+
55
+ var styles = {"backdrop":"Qf3IFhKJwQ0-","popup":"_868PDAA3U2M-","content":"eKuxReHyju8-","scrollRoot":"V--tRnN-P0I-","scrollArea":"_1I0eaFciaWo-","bottomFade":"BYEzqcZUGls-","spinning":"IJxq5fm5qdw-"};
56
+
57
+ // `resolveBottomSheetTriggerRender` so an Atlantis `<Button>` works as a trigger
58
+ // via `children` or `render`. Raw text children are wrapped in a default Button.
59
+ function resolveBottomSheetTriggerRender({ children, render, }) {
60
+ if (render) {
61
+ if (typeof render === "function") {
62
+ return (props) => {
63
+ const renderedElement = render(normalizeBaseUiButtonProps(props));
64
+ return isAtlantisButtonRenderTarget(renderedElement)
65
+ ? stripNativeTypeFromButtonRenderTarget(renderedElement)
66
+ : renderedElement;
67
+ };
61
68
  }
62
- return scheduleFadeUpdate();
63
- }, [isOpen, scheduleFadeUpdate]);
64
- React.useEffect(() => {
65
- const node = scrollAreaRef.current;
66
- if (!node || typeof ResizeObserver === "undefined")
67
- return;
68
- const resizeObserver = new ResizeObserver(syncBottomFade);
69
- resizeObserver.observe(node);
70
- return () => {
71
- resizeObserver.disconnect();
72
- };
73
- }, [syncBottomFade]);
74
- return (React.createElement(DrawerRoot.DrawerPortal, null,
75
- React.createElement(DrawerRoot.DrawerBackdrop, { className: styles.backdrop }),
76
- React.createElement(DrawerRoot.DrawerPopup, Object.assign({}, popupProps, { ref: ref, className: classnames(styles.popup, className), initialFocus: initialFocus, finalFocus: finalFocus }),
77
- React.createElement("div", { className: styles.scrollArea, onScroll: syncBottomFade, ref: scrollAreaRef }, children),
78
- showBottomFade ? (React.createElement("div", { "aria-hidden": "true", className: styles.bottomFade })) : null)));
79
- });
80
- const BottomSheetContent = React.forwardRef(function BottomSheetContent(_a, ref) {
81
- var { children, className } = _a, contentProps = tslib_es6.__rest(_a, ["children", "className"]);
82
- return (React.createElement(DrawerRoot.DrawerContent, Object.assign({}, contentProps, { ref: ref, className: classnames(styles.content, className) }), children));
83
- });
84
- const BottomSheetComponent = React.forwardRef(function BottomSheet(_a, ref) {
85
- var { children, className, initialFocus, finalFocus, open, defaultOpen, onOpenChange } = _a, contentProps = tslib_es6.__rest(_a, ["children", "className", "initialFocus", "finalFocus", "open", "defaultOpen", "onOpenChange"]);
69
+ return isAtlantisButtonRenderTarget(render)
70
+ ? renderAtlantisButtonTarget(render)
71
+ : render;
72
+ }
73
+ if (isAtlantisButtonRenderTarget(children)) {
74
+ return renderAtlantisButtonTarget(children);
75
+ }
76
+ if (React.isValidElement(children)) {
77
+ return children;
78
+ }
79
+ return renderAtlantisButtonTarget(React.createElement(Button.Button, { type: "primary" },
80
+ React.createElement(Button.Button.Label, null, children)));
81
+ }
82
+
83
+ function BottomSheetTrigger(_a) {
84
+ var { children, render, className } = _a, triggerProps = tslib_es6.__rest(_a, ["children", "render", "className"]);
85
+ return (React.createElement(ScrollAreaViewport.DrawerTrigger, Object.assign({}, triggerProps, { className: className, render: resolveBottomSheetTriggerRender({ children, render }) })));
86
+ }
87
+ /**
88
+ * Thin pass-through to the Drawer root: a single owner manages open state, and
89
+ * all root props `handle`, `modal`, `disablePointerDismissal`, the payload
90
+ * render-function `children`, etc. — reach BaseUI unchanged.
91
+ */
92
+ function BottomSheetRoot(_a) {
93
+ var { children } = _a, rootProps = tslib_es6.__rest(_a, ["children"]);
94
+ return React.createElement(ScrollAreaViewport.DrawerRoot, Object.assign({}, rootProps), children);
95
+ }
96
+ function BottomSheetPopup(_a) {
97
+ var { children, className, initialFocus, finalFocus, ref } = _a, popupProps = tslib_es6.__rest(_a, ["children", "className", "initialFocus", "finalFocus", "ref"]);
98
+ return (React.createElement(ScrollAreaViewport.DrawerPortal, null,
99
+ React.createElement(ScrollAreaViewport.DrawerBackdrop, { forceRender: true, className: styles.backdrop }),
100
+ React.createElement(ScrollAreaViewport.DrawerPopup, Object.assign({}, popupProps, { ref: ref, className: classnames(styles.popup, className), initialFocus: initialFocus, finalFocus: finalFocus }),
101
+ React.createElement(ScrollAreaViewport.ScrollAreaRoot, { className: styles.scrollRoot },
102
+ React.createElement(ScrollAreaViewport.ScrollAreaViewport, { className: styles.scrollArea, "data-testid": "ATL-BottomSheet-ScrollArea",
103
+ // BaseUI sets overflow: scroll in the style prop by default. This is to override that because adding it to the className doesn't work.
104
+ style: { overflow: "auto" } }, children),
105
+ React.createElement("div", { "aria-hidden": "true", className: styles.bottomFade, "data-testid": "ATL-BottomSheet-Fade" })))));
106
+ }
107
+ function BottomSheetContent(_a) {
108
+ var { children, className, ref } = _a, contentProps = tslib_es6.__rest(_a, ["children", "className", "ref"]);
109
+ return (React.createElement(ScrollAreaViewport.DrawerContent, Object.assign({}, contentProps, { ref: ref, className: classnames(styles.content, className) }), children));
110
+ }
111
+ function BottomSheetComponent(_a) {
112
+ var { children, className, initialFocus, finalFocus, open, defaultOpen, onOpenChange, ref } = _a, contentProps = tslib_es6.__rest(_a, ["children", "className", "initialFocus", "finalFocus", "open", "defaultOpen", "onOpenChange", "ref"]);
86
113
  return (React.createElement(BottomSheetRoot, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange },
87
114
  React.createElement(BottomSheetPopup, { initialFocus: initialFocus, finalFocus: finalFocus },
88
115
  React.createElement(BottomSheetContent, Object.assign({}, contentProps, { ref: ref, className: className }), children))));
89
- });
116
+ }
90
117
  const BottomSheet = Object.assign(BottomSheetComponent, {
91
118
  Root: BottomSheetRoot,
119
+ Trigger: BottomSheetTrigger,
92
120
  Popup: BottomSheetPopup,
93
121
  Content: BottomSheetContent,
94
122
  });
95
123
 
96
124
  exports.BottomSheet = BottomSheet;
125
+ exports.isAtlantisButtonRenderTarget = isAtlantisButtonRenderTarget;
126
+ exports.normalizeBaseUiButtonProps = normalizeBaseUiButtonProps;
127
+ exports.renderAtlantisButtonTarget = renderAtlantisButtonTarget;
128
+ exports.stripNativeTypeFromButtonRenderTarget = stripNativeTypeFromButtonRenderTarget;
@@ -1,94 +1,122 @@
1
1
  import { _ as __rest } from './tslib.es6-es.js';
2
2
  import React__default from 'react';
3
3
  import classnames from 'classnames';
4
- import { D as DrawerPortal, a as DrawerBackdrop, b as DrawerPopup, c as DrawerContent, d as DrawerRoot } from './DrawerRoot-es.js';
4
+ import { B as Button } from './Button-es.js';
5
+ import { m as mergeProps } from './useRenderElement-es.js';
6
+ import { D as DrawerTrigger, a as DrawerRoot, b as DrawerPortal, c as DrawerBackdrop, d as DrawerPopup, S as ScrollAreaRoot, e as ScrollAreaViewport, f as DrawerContent } from './ScrollAreaViewport-es.js';
5
7
 
6
- var styles = {"backdrop":"Qf3IFhKJwQ0-","popup":"_868PDAA3U2M-","content":"eKuxReHyju8-","scrollArea":"_1I0eaFciaWo-","bottomFade":"BYEzqcZUGls-","spinning":"IJxq5fm5qdw-"};
7
-
8
- const BOTTOM_THRESHOLD = 1;
9
- const BottomSheetContext = React__default.createContext(null);
10
- function BottomSheetRoot(_a) {
11
- var { children, defaultOpen, onOpenChange, open } = _a, rootProps = __rest(_a, ["children", "defaultOpen", "onOpenChange", "open"]);
12
- const isControlled = open !== undefined;
13
- const [internalOpen, setInternalOpen] = React__default.useState(defaultOpen !== null && defaultOpen !== void 0 ? defaultOpen : false);
14
- const isOpen = isControlled ? open : internalOpen;
15
- const handleOpenChange = React__default.useCallback((nextOpen, eventDetails) => {
16
- if (!isControlled) {
17
- setInternalOpen(nextOpen);
18
- }
19
- onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(nextOpen, eventDetails);
20
- }, [isControlled, onOpenChange]);
21
- return (React__default.createElement(BottomSheetContext.Provider, { value: { isOpen } },
22
- React__default.createElement(DrawerRoot, Object.assign({}, rootProps, { defaultOpen: defaultOpen, onOpenChange: handleOpenChange, open: open }), children)));
8
+ function assignRef(ref, instance) {
9
+ if (!ref) {
10
+ return;
11
+ }
12
+ if (typeof ref === "function") {
13
+ ref(instance);
14
+ return;
15
+ }
16
+ ref.current = instance;
23
17
  }
24
- const BottomSheetPopup = React__default.forwardRef(function BottomSheetPopup(_a, ref) {
25
- var { children, className, initialFocus, finalFocus } = _a, popupProps = __rest(_a, ["children", "className", "initialFocus", "finalFocus"]);
26
- const scrollAreaRef = React__default.useRef(null);
27
- const [showBottomFade, setShowBottomFade] = React__default.useState(false);
28
- const bottomSheetContext = React__default.useContext(BottomSheetContext);
29
- const isOpen = bottomSheetContext === null || bottomSheetContext === void 0 ? void 0 : bottomSheetContext.isOpen;
30
- const syncBottomFade = React__default.useCallback(() => {
31
- const node = scrollAreaRef.current;
32
- if (!node)
33
- return;
34
- const hasOverflow = node.scrollHeight > node.clientHeight;
35
- const isAtBottom = node.scrollTop + node.clientHeight >=
36
- node.scrollHeight - BOTTOM_THRESHOLD;
37
- const nextShowBottomFade = hasOverflow && !isAtBottom;
38
- setShowBottomFade(nextShowBottomFade);
39
- }, []);
40
- const scheduleFadeUpdate = React__default.useCallback(() => {
41
- syncBottomFade();
42
- let firstAnimationFrame = 0;
43
- let secondAnimationFrame = 0;
44
- firstAnimationFrame = window.requestAnimationFrame(() => {
45
- syncBottomFade();
46
- secondAnimationFrame = window.requestAnimationFrame(() => {
47
- syncBottomFade();
48
- });
18
+ function mergeRefs(...refs) {
19
+ return (instance) => {
20
+ refs.forEach(ref => {
21
+ assignRef(ref, instance);
49
22
  });
50
- return () => {
51
- window.cancelAnimationFrame(firstAnimationFrame);
52
- window.cancelAnimationFrame(secondAnimationFrame);
53
- };
54
- }, [syncBottomFade]);
55
- React__default.useLayoutEffect(() => {
56
- if (isOpen === false) {
57
- setShowBottomFade(false);
58
- return;
23
+ };
24
+ }
25
+ function getElementRef(element) {
26
+ return element.ref;
27
+ }
28
+ function normalizeBaseUiButtonProps(props) {
29
+ const rest = __rest(props, ["type"]);
30
+ return rest;
31
+ }
32
+ function isAtlantisButtonRenderTarget(element) {
33
+ return React__default.isValidElement(element) && element.type === Button;
34
+ }
35
+ function renderAtlantisButtonTarget(element) {
36
+ return function renderButtonTarget(props) {
37
+ const mergedProps = mergeProps(normalizeBaseUiButtonProps(props), element.props);
38
+ return (React__default.createElement(Button, Object.assign({}, mergedProps, { ref: mergeRefs(props.ref, getElementRef(element)), key: element.key })));
39
+ };
40
+ }
41
+ function stripNativeTypeFromButtonRenderTarget(element) {
42
+ const nativeType = element.props.type;
43
+ if (nativeType !== "button" &&
44
+ nativeType !== "submit" &&
45
+ nativeType !== "reset") {
46
+ return element;
47
+ }
48
+ return React__default.cloneElement(element, {
49
+ type: undefined,
50
+ });
51
+ }
52
+
53
+ var styles = {"backdrop":"Qf3IFhKJwQ0-","popup":"_868PDAA3U2M-","content":"eKuxReHyju8-","scrollRoot":"V--tRnN-P0I-","scrollArea":"_1I0eaFciaWo-","bottomFade":"BYEzqcZUGls-","spinning":"IJxq5fm5qdw-"};
54
+
55
+ // `resolveBottomSheetTriggerRender` so an Atlantis `<Button>` works as a trigger
56
+ // via `children` or `render`. Raw text children are wrapped in a default Button.
57
+ function resolveBottomSheetTriggerRender({ children, render, }) {
58
+ if (render) {
59
+ if (typeof render === "function") {
60
+ return (props) => {
61
+ const renderedElement = render(normalizeBaseUiButtonProps(props));
62
+ return isAtlantisButtonRenderTarget(renderedElement)
63
+ ? stripNativeTypeFromButtonRenderTarget(renderedElement)
64
+ : renderedElement;
65
+ };
59
66
  }
60
- return scheduleFadeUpdate();
61
- }, [isOpen, scheduleFadeUpdate]);
62
- React__default.useEffect(() => {
63
- const node = scrollAreaRef.current;
64
- if (!node || typeof ResizeObserver === "undefined")
65
- return;
66
- const resizeObserver = new ResizeObserver(syncBottomFade);
67
- resizeObserver.observe(node);
68
- return () => {
69
- resizeObserver.disconnect();
70
- };
71
- }, [syncBottomFade]);
67
+ return isAtlantisButtonRenderTarget(render)
68
+ ? renderAtlantisButtonTarget(render)
69
+ : render;
70
+ }
71
+ if (isAtlantisButtonRenderTarget(children)) {
72
+ return renderAtlantisButtonTarget(children);
73
+ }
74
+ if (React__default.isValidElement(children)) {
75
+ return children;
76
+ }
77
+ return renderAtlantisButtonTarget(React__default.createElement(Button, { type: "primary" },
78
+ React__default.createElement(Button.Label, null, children)));
79
+ }
80
+
81
+ function BottomSheetTrigger(_a) {
82
+ var { children, render, className } = _a, triggerProps = __rest(_a, ["children", "render", "className"]);
83
+ return (React__default.createElement(DrawerTrigger, Object.assign({}, triggerProps, { className: className, render: resolveBottomSheetTriggerRender({ children, render }) })));
84
+ }
85
+ /**
86
+ * Thin pass-through to the Drawer root: a single owner manages open state, and
87
+ * all root props — `handle`, `modal`, `disablePointerDismissal`, the payload
88
+ * render-function `children`, etc. — reach BaseUI unchanged.
89
+ */
90
+ function BottomSheetRoot(_a) {
91
+ var { children } = _a, rootProps = __rest(_a, ["children"]);
92
+ return React__default.createElement(DrawerRoot, Object.assign({}, rootProps), children);
93
+ }
94
+ function BottomSheetPopup(_a) {
95
+ var { children, className, initialFocus, finalFocus, ref } = _a, popupProps = __rest(_a, ["children", "className", "initialFocus", "finalFocus", "ref"]);
72
96
  return (React__default.createElement(DrawerPortal, null,
73
- React__default.createElement(DrawerBackdrop, { className: styles.backdrop }),
97
+ React__default.createElement(DrawerBackdrop, { forceRender: true, className: styles.backdrop }),
74
98
  React__default.createElement(DrawerPopup, Object.assign({}, popupProps, { ref: ref, className: classnames(styles.popup, className), initialFocus: initialFocus, finalFocus: finalFocus }),
75
- React__default.createElement("div", { className: styles.scrollArea, onScroll: syncBottomFade, ref: scrollAreaRef }, children),
76
- showBottomFade ? (React__default.createElement("div", { "aria-hidden": "true", className: styles.bottomFade })) : null)));
77
- });
78
- const BottomSheetContent = React__default.forwardRef(function BottomSheetContent(_a, ref) {
79
- var { children, className } = _a, contentProps = __rest(_a, ["children", "className"]);
99
+ React__default.createElement(ScrollAreaRoot, { className: styles.scrollRoot },
100
+ React__default.createElement(ScrollAreaViewport, { className: styles.scrollArea, "data-testid": "ATL-BottomSheet-ScrollArea",
101
+ // BaseUI sets overflow: scroll in the style prop by default. This is to override that because adding it to the className doesn't work.
102
+ style: { overflow: "auto" } }, children),
103
+ React__default.createElement("div", { "aria-hidden": "true", className: styles.bottomFade, "data-testid": "ATL-BottomSheet-Fade" })))));
104
+ }
105
+ function BottomSheetContent(_a) {
106
+ var { children, className, ref } = _a, contentProps = __rest(_a, ["children", "className", "ref"]);
80
107
  return (React__default.createElement(DrawerContent, Object.assign({}, contentProps, { ref: ref, className: classnames(styles.content, className) }), children));
81
- });
82
- const BottomSheetComponent = React__default.forwardRef(function BottomSheet(_a, ref) {
83
- var { children, className, initialFocus, finalFocus, open, defaultOpen, onOpenChange } = _a, contentProps = __rest(_a, ["children", "className", "initialFocus", "finalFocus", "open", "defaultOpen", "onOpenChange"]);
108
+ }
109
+ function BottomSheetComponent(_a) {
110
+ var { children, className, initialFocus, finalFocus, open, defaultOpen, onOpenChange, ref } = _a, contentProps = __rest(_a, ["children", "className", "initialFocus", "finalFocus", "open", "defaultOpen", "onOpenChange", "ref"]);
84
111
  return (React__default.createElement(BottomSheetRoot, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange },
85
112
  React__default.createElement(BottomSheetPopup, { initialFocus: initialFocus, finalFocus: finalFocus },
86
113
  React__default.createElement(BottomSheetContent, Object.assign({}, contentProps, { ref: ref, className: className }), children))));
87
- });
114
+ }
88
115
  const BottomSheet = Object.assign(BottomSheetComponent, {
89
116
  Root: BottomSheetRoot,
117
+ Trigger: BottomSheetTrigger,
90
118
  Popup: BottomSheetPopup,
91
119
  Content: BottomSheetContent,
92
120
  });
93
121
 
94
- export { BottomSheet as B };
122
+ export { BottomSheet as B, isAtlantisButtonRenderTarget as i, normalizeBaseUiButtonProps as n, renderAtlantisButtonTarget as r, stripNativeTypeFromButtonRenderTarget as s };
@@ -23,12 +23,11 @@ require('../useFormFieldFocus-cjs.js');
23
23
  require('../maxHeight-cjs.js');
24
24
  require('../useRenderElement-cjs.js');
25
25
  require('../BottomSheet-cjs.js');
26
- require('../DrawerRoot-cjs.js');
27
- require('../useValueChanged-cjs.js');
26
+ require('../ScrollAreaViewport-cjs.js');
27
+ require('../clamp-cjs.js');
28
28
  require('../OverlaySeparator-cjs.js');
29
29
  require('../Separator-cjs.js');
30
30
  require('../MenuSubmenuTrigger-cjs.js');
31
- require('../useBaseUiId-cjs.js');
32
31
 
33
32
 
34
33
 
@@ -21,9 +21,8 @@ import '../useFormFieldFocus-es.js';
21
21
  import '../maxHeight-es.js';
22
22
  import '../useRenderElement-es.js';
23
23
  import '../BottomSheet-es.js';
24
- import '../DrawerRoot-es.js';
25
- import '../useValueChanged-es.js';
24
+ import '../ScrollAreaViewport-es.js';
25
+ import '../clamp-es.js';
26
26
  import '../OverlaySeparator-es.js';
27
27
  import '../Separator-es.js';
28
28
  import '../MenuSubmenuTrigger-es.js';
29
- import '../useBaseUiId-es.js';
@@ -24,12 +24,11 @@ require('../useFormFieldFocus-cjs.js');
24
24
  require('../maxHeight-cjs.js');
25
25
  require('../useRenderElement-cjs.js');
26
26
  require('../BottomSheet-cjs.js');
27
- require('../DrawerRoot-cjs.js');
28
- require('../useValueChanged-cjs.js');
27
+ require('../ScrollAreaViewport-cjs.js');
28
+ require('../clamp-cjs.js');
29
29
  require('../OverlaySeparator-cjs.js');
30
30
  require('../Separator-cjs.js');
31
31
  require('../MenuSubmenuTrigger-cjs.js');
32
- require('../useBaseUiId-cjs.js');
33
32
  require('../Content-cjs.js');
34
33
  require('../Emphasis-cjs.js');
35
34
 
@@ -22,11 +22,10 @@ import '../useFormFieldFocus-es.js';
22
22
  import '../maxHeight-es.js';
23
23
  import '../useRenderElement-es.js';
24
24
  import '../BottomSheet-es.js';
25
- import '../DrawerRoot-es.js';
26
- import '../useValueChanged-es.js';
25
+ import '../ScrollAreaViewport-es.js';
26
+ import '../clamp-es.js';
27
27
  import '../OverlaySeparator-es.js';
28
28
  import '../Separator-es.js';
29
29
  import '../MenuSubmenuTrigger-es.js';
30
- import '../useBaseUiId-es.js';
31
30
  import '../Content-es.js';
32
31
  import '../Emphasis-es.js';
@@ -5,11 +5,10 @@ var classnames = require('classnames');
5
5
  var ActivityIndicator = require('./ActivityIndicator-cjs.js');
6
6
  var Button = require('./Button-cjs.js');
7
7
  var Icon = require('./Icon-cjs.js');
8
- var useValueChanged = require('./useValueChanged-cjs.js');
8
+ var clamp = require('./clamp-cjs.js');
9
9
  var NumberFieldInput = require('./NumberFieldInput-cjs.js');
10
10
  var useRenderElement = require('./useRenderElement-cjs.js');
11
11
  var jsxRuntime = require('react/jsx-runtime');
12
- var useBaseUiId = require('./useBaseUiId-cjs.js');
13
12
 
14
13
  function _interopNamespaceDefault(e) {
15
14
  var n = Object.create(null);
@@ -45,7 +44,7 @@ function useFieldsetRootContext(optional = false) {
45
44
  }
46
45
 
47
46
  const LabelableProvider = function LabelableProvider(props) {
48
- const defaultId = useBaseUiId.useBaseUiId();
47
+ const defaultId = clamp.useBaseUiId();
49
48
  const initialControlId = props.controlId === undefined ? defaultId : props.controlId;
50
49
  const [controlId, setControlIdState] = React__namespace.useState(initialControlId);
51
50
  const [labelId, setLabelId] = React__namespace.useState(props.labelId);
@@ -54,7 +53,7 @@ const LabelableProvider = function LabelableProvider(props) {
54
53
  const {
55
54
  messageIds: parentMessageIds
56
55
  } = NumberFieldInput.useLabelableContext();
57
- const registerControlId = useValueChanged.useStableCallback((source, nextId) => {
56
+ const registerControlId = clamp.useStableCallback((source, nextId) => {
58
57
  const registrations = registrationsRef.current;
59
58
  if (nextId === undefined) {
60
59
  registrations.delete(source);
@@ -141,9 +140,9 @@ function useFieldValidation(params) {
141
140
  controlId,
142
141
  getDescriptionProps
143
142
  } = NumberFieldInput.useLabelableContext();
144
- const timeout = useValueChanged.useTimeout();
143
+ const timeout = clamp.useTimeout();
145
144
  const inputRef = React__namespace.useRef(null);
146
- const commit = useValueChanged.useStableCallback(async (value, revalidate = false) => {
145
+ const commit = clamp.useStableCallback(async (value, revalidate = false) => {
147
146
  const element = inputRef.current;
148
147
  if (!element) {
149
148
  return;
@@ -355,7 +354,7 @@ const FieldRootInner = /*#__PURE__*/React__namespace.forwardRef(function FieldRo
355
354
  const {
356
355
  disabled: disabledFieldset
357
356
  } = useFieldsetRootContext();
358
- const validate = useValueChanged.useStableCallback(validateProp || (() => null));
357
+ const validate = clamp.useStableCallback(validateProp || (() => null));
359
358
  const disabled = disabledFieldset || disabledProp;
360
359
  const [touchedState, setTouchedUnwrapped] = React__namespace.useState(false);
361
360
  const [dirtyState, setDirtyUnwrapped] = React__namespace.useState(false);
@@ -364,7 +363,7 @@ const FieldRootInner = /*#__PURE__*/React__namespace.forwardRef(function FieldRo
364
363
  const dirty = dirtyProp ?? dirtyState;
365
364
  const touched = touchedProp ?? touchedState;
366
365
  const markedDirtyRef = React__namespace.useRef(false);
367
- const setDirty = useValueChanged.useStableCallback(value => {
366
+ const setDirty = clamp.useStableCallback(value => {
368
367
  if (dirtyProp !== undefined) {
369
368
  return;
370
369
  }
@@ -373,13 +372,13 @@ const FieldRootInner = /*#__PURE__*/React__namespace.forwardRef(function FieldRo
373
372
  }
374
373
  setDirtyUnwrapped(value);
375
374
  });
376
- const setTouched = useValueChanged.useStableCallback(value => {
375
+ const setTouched = clamp.useStableCallback(value => {
377
376
  if (touchedProp !== undefined) {
378
377
  return;
379
378
  }
380
379
  setTouchedUnwrapped(value);
381
380
  });
382
- const shouldValidateOnChange = useValueChanged.useStableCallback(() => validationMode === 'onChange' || validationMode === 'onSubmit' && submitAttemptedRef.current);
381
+ const shouldValidateOnChange = clamp.useStableCallback(() => validationMode === 'onChange' || validationMode === 'onSubmit' && submitAttemptedRef.current);
383
382
  const hasFormError = !!name && Object.hasOwn(errors, name) && errors[name] !== undefined;
384
383
  const invalid = invalidProp === true || hasFormError;
385
384
  const [validityData, setValidityData] = React__namespace.useState({
@@ -469,7 +468,7 @@ if (process.env.NODE_ENV !== "production") FieldRoot.displayName = "FieldRoot";
469
468
 
470
469
  const stateAttributesMapping = {
471
470
  ...NumberFieldInput.fieldValidityMapping,
472
- ...useValueChanged.transitionStatusMapping
471
+ ...clamp.transitionStatusMapping
473
472
  };
474
473
 
475
474
  /**
@@ -486,7 +485,7 @@ const FieldError = /*#__PURE__*/React__namespace.forwardRef(function FieldError(
486
485
  match,
487
486
  ...elementProps
488
487
  } = componentProps;
489
- const id = useBaseUiId.useBaseUiId(idProp);
488
+ const id = clamp.useBaseUiId(idProp);
490
489
  const {
491
490
  validityData,
492
491
  state: fieldState,
@@ -511,8 +510,8 @@ const FieldError = /*#__PURE__*/React__namespace.forwardRef(function FieldError(
511
510
  mounted,
512
511
  transitionStatus,
513
512
  setMounted
514
- } = useValueChanged.useTransitionStatus(rendered);
515
- useValueChanged.useIsoLayoutEffect(() => {
513
+ } = clamp.useTransitionStatus(rendered);
514
+ clamp.useIsoLayoutEffect(() => {
516
515
  if (!rendered || !id) {
517
516
  return undefined;
518
517
  }
@@ -539,7 +538,7 @@ const FieldError = /*#__PURE__*/React__namespace.forwardRef(function FieldError(
539
538
  setLastRenderedMessageKey(errorKey);
540
539
  setLastRenderedMessage(errorMessage);
541
540
  }
542
- useValueChanged.useOpenChangeComplete({
541
+ clamp.useOpenChangeComplete({
543
542
  open: rendered,
544
543
  ref: errorRef,
545
544
  onComplete() {
@@ -582,12 +581,12 @@ const FieldDescription = /*#__PURE__*/React__namespace.forwardRef(function Field
582
581
  className,
583
582
  ...elementProps
584
583
  } = componentProps;
585
- const id = useBaseUiId.useBaseUiId(idProp);
584
+ const id = clamp.useBaseUiId(idProp);
586
585
  const fieldRootContext = NumberFieldInput.useFieldRootContext(false);
587
586
  const {
588
587
  setMessageIds
589
588
  } = NumberFieldInput.useLabelableContext();
590
- useValueChanged.useIsoLayoutEffect(() => {
589
+ clamp.useIsoLayoutEffect(() => {
591
590
  if (!id) {
592
591
  return undefined;
593
592
  }
@@ -4,11 +4,10 @@ import classnames from 'classnames';
4
4
  import { A as ActivityIndicator } from './ActivityIndicator-es.js';
5
5
  import { B as Button } from './Button-es.js';
6
6
  import { I as Icon } from './Icon-es.js';
7
- import { a as useStableCallback, c as useTimeout, t as transitionStatusMapping, d as useTransitionStatus, u as useIsoLayoutEffect, e as useOpenChangeComplete } from './useValueChanged-es.js';
7
+ import { u as useBaseUiId, a as useStableCallback, b as useTimeout, t as transitionStatusMapping, c as useTransitionStatus, d as useIsoLayoutEffect, e as useOpenChangeComplete } from './clamp-es.js';
8
8
  import { u as useLabelableContext, L as LabelableContext, a as useFormContext, D as DEFAULT_VALIDITY_STATE, g as getCombinedFieldValidityData, f as fieldValidityMapping, F as FieldRootContext, b as useFieldRootContext, N as NumberFieldRoot, c as NumberFieldGroup, d as NumberFieldInput, e as NumberFieldIncrement, h as NumberFieldDecrement } from './NumberFieldInput-es.js';
9
- import { f as formatErrorMessage, b as useRefWithInit, m as mergeProps, E as EMPTY_OBJECT, u as useRenderElement } from './useRenderElement-es.js';
9
+ import { f as formatErrorMessage, a as useRefWithInit, m as mergeProps, E as EMPTY_OBJECT, u as useRenderElement } from './useRenderElement-es.js';
10
10
  import { jsx } from 'react/jsx-runtime';
11
- import { u as useBaseUiId } from './useBaseUiId-es.js';
12
11
 
13
12
  const FieldsetRootContext = /*#__PURE__*/React.createContext({
14
13
  legendId: undefined,
@@ -21,12 +21,11 @@ require('../useFormFieldFocus-cjs.js');
21
21
  require('../maxHeight-cjs.js');
22
22
  require('../useRenderElement-cjs.js');
23
23
  require('../BottomSheet-cjs.js');
24
- require('../DrawerRoot-cjs.js');
25
- require('../useValueChanged-cjs.js');
24
+ require('../ScrollAreaViewport-cjs.js');
25
+ require('../clamp-cjs.js');
26
26
  require('../OverlaySeparator-cjs.js');
27
27
  require('../Separator-cjs.js');
28
28
  require('../MenuSubmenuTrigger-cjs.js');
29
- require('../useBaseUiId-cjs.js');
30
29
 
31
30
 
32
31