@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.
- package/dist/Autocomplete-es.js +1 -1
- package/dist/BottomSheet-cjs.js +109 -77
- package/dist/BottomSheet-es.js +103 -75
- package/dist/Card/index.cjs +2 -3
- package/dist/Card/index.mjs +2 -3
- package/dist/DataDump/index.cjs +2 -3
- package/dist/DataDump/index.mjs +2 -3
- package/dist/InputNumberExperimental-cjs.js +16 -17
- package/dist/InputNumberExperimental-es.js +2 -3
- package/dist/Menu/index.cjs +2 -3
- package/dist/Menu/index.mjs +2 -3
- package/dist/Menu-cjs.js +11 -56
- package/dist/Menu-es.js +4 -49
- package/dist/MenuSubmenuTrigger-cjs.js +1608 -1793
- package/dist/MenuSubmenuTrigger-es.js +1340 -1522
- package/dist/Modal/index.mjs +1 -1
- package/dist/NumberFieldInput-cjs.js +53 -54
- package/dist/NumberFieldInput-es.js +2 -3
- package/dist/Page/index.cjs +2 -3
- package/dist/Page/index.mjs +2 -3
- package/dist/{DrawerRoot-cjs.js → ScrollAreaViewport-cjs.js} +5488 -4449
- package/dist/{DrawerRoot-es.js → ScrollAreaViewport-es.js} +5423 -4393
- package/dist/{useValueChanged-cjs.js → clamp-cjs.js} +573 -321
- package/dist/{useValueChanged-es.js → clamp-es.js} +569 -322
- package/dist/floating-ui.react-es.js +1 -1
- package/dist/index.cjs +2 -3
- package/dist/index.mjs +2 -3
- package/dist/primitives/BottomSheet/BottomSheet.d.ts +15 -16
- package/dist/primitives/BottomSheet/BottomSheet.types.d.ts +27 -0
- package/dist/primitives/BottomSheet/BottomSheet.utils.d.ts +6 -0
- package/dist/primitives/BottomSheet/index.cjs +8 -3
- package/dist/primitives/BottomSheet/index.d.ts +1 -0
- package/dist/primitives/BottomSheet/index.mjs +8 -3
- package/dist/primitives/InputNumberExperimental/index.cjs +2 -3
- package/dist/primitives/InputNumberExperimental/index.mjs +2 -3
- package/dist/primitives/index.cjs +8 -9
- package/dist/primitives/index.mjs +8 -9
- package/dist/styles.css +62 -1
- package/dist/unstyledPrimitives/index.cjs +6373 -5868
- package/dist/unstyledPrimitives/index.d.ts +2 -0
- package/dist/unstyledPrimitives/index.mjs +6325 -5822
- package/dist/useRenderElement-cjs.js +30 -30
- package/dist/useRenderElement-es.js +31 -31
- package/package.json +2 -2
- package/dist/useBaseUiId-cjs.js +0 -275
- package/dist/useBaseUiId-es.js +0 -251
package/dist/Autocomplete-es.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React__default, { useState, useRef, useEffect, useCallback, useMemo, forwardRef } from 'react';
|
|
2
|
-
import { u as useFloating,
|
|
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';
|
package/dist/BottomSheet-cjs.js
CHANGED
|
@@ -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
|
|
6
|
+
var Button = require('./Button-cjs.js');
|
|
7
|
+
var useRenderElement = require('./useRenderElement-cjs.js');
|
|
8
|
+
var ScrollAreaViewport = require('./ScrollAreaViewport-cjs.js');
|
|
7
9
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
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
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
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
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
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
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
return
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
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;
|
package/dist/BottomSheet-es.js
CHANGED
|
@@ -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 {
|
|
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
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
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
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
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
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
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
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
return
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
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(
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
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
|
-
|
|
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 };
|
package/dist/Card/index.cjs
CHANGED
|
@@ -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('../
|
|
27
|
-
require('../
|
|
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
|
|
package/dist/Card/index.mjs
CHANGED
|
@@ -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 '../
|
|
25
|
-
import '../
|
|
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';
|
package/dist/DataDump/index.cjs
CHANGED
|
@@ -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('../
|
|
28
|
-
require('../
|
|
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
|
|
package/dist/DataDump/index.mjs
CHANGED
|
@@ -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 '../
|
|
26
|
-
import '../
|
|
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
|
|
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 =
|
|
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 =
|
|
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 =
|
|
143
|
+
const timeout = clamp.useTimeout();
|
|
145
144
|
const inputRef = React__namespace.useRef(null);
|
|
146
|
-
const commit =
|
|
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 =
|
|
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 =
|
|
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 =
|
|
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 =
|
|
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
|
-
...
|
|
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 =
|
|
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
|
-
} =
|
|
515
|
-
|
|
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
|
-
|
|
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 =
|
|
584
|
+
const id = clamp.useBaseUiId(idProp);
|
|
586
585
|
const fieldRootContext = NumberFieldInput.useFieldRootContext(false);
|
|
587
586
|
const {
|
|
588
587
|
setMessageIds
|
|
589
588
|
} = NumberFieldInput.useLabelableContext();
|
|
590
|
-
|
|
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,
|
|
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,
|
|
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,
|
package/dist/Menu/index.cjs
CHANGED
|
@@ -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('../
|
|
25
|
-
require('../
|
|
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
|
|