@jobber/components 7.15.3-progress-b-cc1652c.1 → 7.15.3
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/Card/index.cjs +3 -6
- package/dist/Card/index.mjs +3 -6
- package/dist/DataDump/index.cjs +3 -6
- package/dist/DataDump/index.mjs +3 -6
- package/dist/DrawerRoot-es.js +2 -2
- package/dist/InputNumberExperimental-cjs.js +4 -3
- package/dist/InputNumberExperimental-es.js +4 -3
- package/dist/Menu/index.cjs +3 -6
- package/dist/Menu/index.mjs +3 -6
- package/dist/Menu-cjs.js +1 -3
- package/dist/Menu-es.js +1 -3
- package/dist/MenuSubmenuTrigger-cjs.js +16 -16
- package/dist/MenuSubmenuTrigger-es.js +3 -3
- package/dist/NumberFieldInput-cjs.js +4 -252
- package/dist/NumberFieldInput-es.js +5 -249
- package/dist/Page/index.cjs +3 -5
- package/dist/Page/index.mjs +3 -5
- package/dist/index.cjs +3 -5
- package/dist/index.mjs +3 -5
- package/dist/primitives/InputNumberExperimental/index.cjs +1 -0
- package/dist/primitives/InputNumberExperimental/index.mjs +1 -0
- package/dist/primitives/index.cjs +1 -0
- package/dist/primitives/index.mjs +1 -0
- package/dist/styles.css +9617 -9617
- package/dist/unstyledPrimitives/index.cjs +14 -13
- package/dist/unstyledPrimitives/index.mjs +4 -3
- package/dist/useBaseUiId-cjs.js +275 -0
- package/dist/useBaseUiId-es.js +251 -0
- package/dist/useRenderElement-es.js +1 -1
- package/dist/useValueChanged-es.js +2 -2
- package/package.json +2 -2
|
@@ -4,6 +4,7 @@ var React = require('react');
|
|
|
4
4
|
var useValueChanged = require('./useValueChanged-cjs.js');
|
|
5
5
|
var useRenderElement = require('./useRenderElement-cjs.js');
|
|
6
6
|
var floatingUi_utils_dom = require('./floating-ui.utils.dom-cjs.js');
|
|
7
|
+
var useBaseUiId = require('./useBaseUiId-cjs.js');
|
|
7
8
|
var jsxRuntime = require('react/jsx-runtime');
|
|
8
9
|
var ReactDOM = require('react-dom');
|
|
9
10
|
|
|
@@ -27,251 +28,6 @@ function _interopNamespaceDefault(e) {
|
|
|
27
28
|
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
|
|
28
29
|
var ReactDOM__namespace = /*#__PURE__*/_interopNamespaceDefault(ReactDOM);
|
|
29
30
|
|
|
30
|
-
let set;
|
|
31
|
-
if (process.env.NODE_ENV !== 'production') {
|
|
32
|
-
set = new Set();
|
|
33
|
-
}
|
|
34
|
-
function error(...messages) {
|
|
35
|
-
if (process.env.NODE_ENV !== 'production') {
|
|
36
|
-
const messageKey = messages.join(' ');
|
|
37
|
-
if (!set.has(messageKey)) {
|
|
38
|
-
set.add(messageKey);
|
|
39
|
-
console.error(`Base UI: ${messageKey}`);
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
const CompositeRootContext = /*#__PURE__*/React__namespace.createContext(undefined);
|
|
45
|
-
if (process.env.NODE_ENV !== "production") CompositeRootContext.displayName = "CompositeRootContext";
|
|
46
|
-
function useCompositeRootContext(optional = false) {
|
|
47
|
-
const context = React__namespace.useContext(CompositeRootContext);
|
|
48
|
-
if (context === undefined && !optional) {
|
|
49
|
-
throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: CompositeRootContext is missing. Composite parts must be placed within <Composite.Root>.' : useRenderElement.formatErrorMessage(16));
|
|
50
|
-
}
|
|
51
|
-
return context;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
function useFocusableWhenDisabled(parameters) {
|
|
55
|
-
const {
|
|
56
|
-
focusableWhenDisabled,
|
|
57
|
-
disabled,
|
|
58
|
-
composite = false,
|
|
59
|
-
tabIndex: tabIndexProp = 0,
|
|
60
|
-
isNativeButton
|
|
61
|
-
} = parameters;
|
|
62
|
-
const isFocusableComposite = composite && focusableWhenDisabled !== false;
|
|
63
|
-
const isNonFocusableComposite = composite && focusableWhenDisabled === false;
|
|
64
|
-
|
|
65
|
-
// we can't explicitly assign `undefined` to any of these props because it
|
|
66
|
-
// would otherwise prevent subsequently merged props from setting them
|
|
67
|
-
const props = React__namespace.useMemo(() => {
|
|
68
|
-
const additionalProps = {
|
|
69
|
-
// allow Tabbing away from focusableWhenDisabled elements
|
|
70
|
-
onKeyDown(event) {
|
|
71
|
-
if (disabled && focusableWhenDisabled && event.key !== 'Tab') {
|
|
72
|
-
event.preventDefault();
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
};
|
|
76
|
-
if (!composite) {
|
|
77
|
-
additionalProps.tabIndex = tabIndexProp;
|
|
78
|
-
if (!isNativeButton && disabled) {
|
|
79
|
-
additionalProps.tabIndex = focusableWhenDisabled ? tabIndexProp : -1;
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
if (isNativeButton && (focusableWhenDisabled || isFocusableComposite) || !isNativeButton && disabled) {
|
|
83
|
-
additionalProps['aria-disabled'] = disabled;
|
|
84
|
-
}
|
|
85
|
-
if (isNativeButton && (!focusableWhenDisabled || isNonFocusableComposite)) {
|
|
86
|
-
additionalProps.disabled = disabled;
|
|
87
|
-
}
|
|
88
|
-
return additionalProps;
|
|
89
|
-
}, [composite, disabled, focusableWhenDisabled, isFocusableComposite, isNonFocusableComposite, isNativeButton, tabIndexProp]);
|
|
90
|
-
return {
|
|
91
|
-
props
|
|
92
|
-
};
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
function useButton(parameters = {}) {
|
|
96
|
-
const {
|
|
97
|
-
disabled = false,
|
|
98
|
-
focusableWhenDisabled,
|
|
99
|
-
tabIndex = 0,
|
|
100
|
-
native: isNativeButton = true,
|
|
101
|
-
composite: compositeProp
|
|
102
|
-
} = parameters;
|
|
103
|
-
const elementRef = React__namespace.useRef(null);
|
|
104
|
-
const compositeRootContext = useCompositeRootContext(true);
|
|
105
|
-
const isCompositeItem = compositeProp ?? compositeRootContext !== undefined;
|
|
106
|
-
const {
|
|
107
|
-
props: focusableWhenDisabledProps
|
|
108
|
-
} = useFocusableWhenDisabled({
|
|
109
|
-
focusableWhenDisabled,
|
|
110
|
-
disabled,
|
|
111
|
-
composite: isCompositeItem,
|
|
112
|
-
tabIndex,
|
|
113
|
-
isNativeButton
|
|
114
|
-
});
|
|
115
|
-
if (process.env.NODE_ENV !== 'production') {
|
|
116
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
117
|
-
React__namespace.useEffect(() => {
|
|
118
|
-
if (!elementRef.current) {
|
|
119
|
-
return;
|
|
120
|
-
}
|
|
121
|
-
const isButtonTag = isButtonElement(elementRef.current);
|
|
122
|
-
if (isNativeButton) {
|
|
123
|
-
if (!isButtonTag) {
|
|
124
|
-
const ownerStackMessage = useValueChanged.SafeReact.captureOwnerStack?.() || '';
|
|
125
|
-
const message = 'A component that acts as a button expected a native <button> because the ' + '`nativeButton` prop is true. Rendering a non-<button> removes native button ' + 'semantics, which can impact forms and accessibility. Use a real <button> in the ' + '`render` prop, or set `nativeButton` to `false`.';
|
|
126
|
-
error(`${message}${ownerStackMessage}`);
|
|
127
|
-
}
|
|
128
|
-
} else if (isButtonTag) {
|
|
129
|
-
const ownerStackMessage = useValueChanged.SafeReact.captureOwnerStack?.() || '';
|
|
130
|
-
const message = 'A component that acts as a button expected a non-<button> because the `nativeButton` ' + 'prop is false. Rendering a <button> keeps native behavior while Base UI applies ' + 'non-native attributes and handlers, which can add unintended extra attributes (such ' + 'as `role` or `aria-disabled`). Use a non-<button> in the `render` prop, or set ' + '`nativeButton` to `true`.';
|
|
131
|
-
error(`${message}${ownerStackMessage}`);
|
|
132
|
-
}
|
|
133
|
-
}, [isNativeButton]);
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
// handles a disabled composite button rendering another button, e.g.
|
|
137
|
-
// <Toolbar.Button disabled render={<Menu.Trigger />} />
|
|
138
|
-
// the `disabled` prop needs to pass through 2 `useButton`s then finally
|
|
139
|
-
// delete the `disabled` attribute from DOM
|
|
140
|
-
const updateDisabled = React__namespace.useCallback(() => {
|
|
141
|
-
const element = elementRef.current;
|
|
142
|
-
if (!isButtonElement(element)) {
|
|
143
|
-
return;
|
|
144
|
-
}
|
|
145
|
-
if (isCompositeItem && disabled && focusableWhenDisabledProps.disabled === undefined && element.disabled) {
|
|
146
|
-
element.disabled = false;
|
|
147
|
-
}
|
|
148
|
-
}, [disabled, focusableWhenDisabledProps.disabled, isCompositeItem]);
|
|
149
|
-
useValueChanged.useIsoLayoutEffect(updateDisabled, [updateDisabled]);
|
|
150
|
-
const getButtonProps = React__namespace.useCallback((externalProps = {}) => {
|
|
151
|
-
const {
|
|
152
|
-
onClick: externalOnClick,
|
|
153
|
-
onMouseDown: externalOnMouseDown,
|
|
154
|
-
onKeyUp: externalOnKeyUp,
|
|
155
|
-
onKeyDown: externalOnKeyDown,
|
|
156
|
-
onPointerDown: externalOnPointerDown,
|
|
157
|
-
...otherExternalProps
|
|
158
|
-
} = externalProps;
|
|
159
|
-
const type = isNativeButton ? 'button' : undefined;
|
|
160
|
-
return useRenderElement.mergeProps({
|
|
161
|
-
type,
|
|
162
|
-
onClick(event) {
|
|
163
|
-
if (disabled) {
|
|
164
|
-
event.preventDefault();
|
|
165
|
-
return;
|
|
166
|
-
}
|
|
167
|
-
externalOnClick?.(event);
|
|
168
|
-
},
|
|
169
|
-
onMouseDown(event) {
|
|
170
|
-
if (!disabled) {
|
|
171
|
-
externalOnMouseDown?.(event);
|
|
172
|
-
}
|
|
173
|
-
},
|
|
174
|
-
onKeyDown(event) {
|
|
175
|
-
if (disabled) {
|
|
176
|
-
return;
|
|
177
|
-
}
|
|
178
|
-
useRenderElement.makeEventPreventable(event);
|
|
179
|
-
externalOnKeyDown?.(event);
|
|
180
|
-
if (event.baseUIHandlerPrevented) {
|
|
181
|
-
return;
|
|
182
|
-
}
|
|
183
|
-
const isCurrentTarget = event.target === event.currentTarget;
|
|
184
|
-
const currentTarget = event.currentTarget;
|
|
185
|
-
const isButton = isButtonElement(currentTarget);
|
|
186
|
-
const isLink = !isNativeButton && isValidLinkElement(currentTarget);
|
|
187
|
-
const shouldClick = isCurrentTarget && (isNativeButton ? isButton : !isLink);
|
|
188
|
-
const isEnterKey = event.key === 'Enter';
|
|
189
|
-
const isSpaceKey = event.key === ' ';
|
|
190
|
-
const role = currentTarget.getAttribute('role');
|
|
191
|
-
const isTextNavigationRole = role?.startsWith('menuitem') || role === 'option' || role === 'gridcell';
|
|
192
|
-
if (isCurrentTarget && isCompositeItem && isSpaceKey) {
|
|
193
|
-
if (event.defaultPrevented && isTextNavigationRole) {
|
|
194
|
-
return;
|
|
195
|
-
}
|
|
196
|
-
event.preventDefault();
|
|
197
|
-
if (isLink || isNativeButton && isButton) {
|
|
198
|
-
currentTarget.click();
|
|
199
|
-
event.preventBaseUIHandler();
|
|
200
|
-
} else if (shouldClick) {
|
|
201
|
-
externalOnClick?.(event);
|
|
202
|
-
event.preventBaseUIHandler();
|
|
203
|
-
}
|
|
204
|
-
return;
|
|
205
|
-
}
|
|
206
|
-
|
|
207
|
-
// Keyboard accessibility for native and non-native elements.
|
|
208
|
-
if (shouldClick) {
|
|
209
|
-
if (!isNativeButton && (isSpaceKey || isEnterKey)) {
|
|
210
|
-
event.preventDefault();
|
|
211
|
-
}
|
|
212
|
-
if (!isNativeButton && isEnterKey) {
|
|
213
|
-
externalOnClick?.(event);
|
|
214
|
-
}
|
|
215
|
-
}
|
|
216
|
-
},
|
|
217
|
-
onKeyUp(event) {
|
|
218
|
-
if (disabled) {
|
|
219
|
-
return;
|
|
220
|
-
}
|
|
221
|
-
|
|
222
|
-
// calling preventDefault in keyUp on a <button> will not dispatch a click event if Space is pressed
|
|
223
|
-
// https://codesandbox.io/p/sandbox/button-keyup-preventdefault-dn7f0
|
|
224
|
-
useRenderElement.makeEventPreventable(event);
|
|
225
|
-
externalOnKeyUp?.(event);
|
|
226
|
-
if (event.target === event.currentTarget && isNativeButton && isCompositeItem && isButtonElement(event.currentTarget) && event.key === ' ') {
|
|
227
|
-
event.preventDefault();
|
|
228
|
-
return;
|
|
229
|
-
}
|
|
230
|
-
if (event.baseUIHandlerPrevented) {
|
|
231
|
-
return;
|
|
232
|
-
}
|
|
233
|
-
|
|
234
|
-
// Keyboard accessibility for non interactive elements
|
|
235
|
-
if (event.target === event.currentTarget && !isNativeButton && !isCompositeItem && event.key === ' ') {
|
|
236
|
-
externalOnClick?.(event);
|
|
237
|
-
}
|
|
238
|
-
},
|
|
239
|
-
onPointerDown(event) {
|
|
240
|
-
if (disabled) {
|
|
241
|
-
event.preventDefault();
|
|
242
|
-
return;
|
|
243
|
-
}
|
|
244
|
-
externalOnPointerDown?.(event);
|
|
245
|
-
}
|
|
246
|
-
}, !isNativeButton ? {
|
|
247
|
-
role: 'button'
|
|
248
|
-
} : undefined, focusableWhenDisabledProps, otherExternalProps);
|
|
249
|
-
}, [disabled, focusableWhenDisabledProps, isCompositeItem, isNativeButton]);
|
|
250
|
-
const buttonRef = useValueChanged.useStableCallback(element => {
|
|
251
|
-
elementRef.current = element;
|
|
252
|
-
updateDisabled();
|
|
253
|
-
});
|
|
254
|
-
return {
|
|
255
|
-
getButtonProps,
|
|
256
|
-
buttonRef
|
|
257
|
-
};
|
|
258
|
-
}
|
|
259
|
-
function isButtonElement(elem) {
|
|
260
|
-
return floatingUi_utils_dom.isHTMLElement(elem) && elem.tagName === 'BUTTON';
|
|
261
|
-
}
|
|
262
|
-
function isValidLinkElement(elem) {
|
|
263
|
-
return Boolean(elem?.tagName === 'A' && elem?.href);
|
|
264
|
-
}
|
|
265
|
-
|
|
266
|
-
/**
|
|
267
|
-
* Wraps `useId` and prefixes generated `id`s with `base-ui-`
|
|
268
|
-
* @param {string | undefined} idOverride overrides the generated id when provided
|
|
269
|
-
* @returns {string | undefined}
|
|
270
|
-
*/
|
|
271
|
-
function useBaseUiId(idOverride) {
|
|
272
|
-
return useValueChanged.useId(idOverride, 'base-ui');
|
|
273
|
-
}
|
|
274
|
-
|
|
275
31
|
/**
|
|
276
32
|
* Returns a function that forces a rerender.
|
|
277
33
|
*/
|
|
@@ -528,7 +284,7 @@ function useLabelableId(params = {}) {
|
|
|
528
284
|
controlId,
|
|
529
285
|
registerControlId
|
|
530
286
|
} = useLabelableContext();
|
|
531
|
-
const defaultId = useBaseUiId(id);
|
|
287
|
+
const defaultId = useBaseUiId.useBaseUiId(id);
|
|
532
288
|
const controlIdForEffect = implicit ? controlId : undefined;
|
|
533
289
|
const controlSourceRef = useRenderElement.useRefWithInit(() => Symbol('labelable-control'));
|
|
534
290
|
const hasRegisteredRef = React__namespace.useRef(false);
|
|
@@ -1638,7 +1394,7 @@ const NumberFieldIncrement = /*#__PURE__*/React__namespace.forwardRef(function N
|
|
|
1638
1394
|
const {
|
|
1639
1395
|
getButtonProps,
|
|
1640
1396
|
buttonRef
|
|
1641
|
-
} = useButton({
|
|
1397
|
+
} = useBaseUiId.useButton({
|
|
1642
1398
|
disabled,
|
|
1643
1399
|
native: nativeButton,
|
|
1644
1400
|
focusableWhenDisabled: true
|
|
@@ -1722,7 +1478,7 @@ const NumberFieldDecrement = /*#__PURE__*/React__namespace.forwardRef(function N
|
|
|
1722
1478
|
const {
|
|
1723
1479
|
getButtonProps,
|
|
1724
1480
|
buttonRef
|
|
1725
|
-
} = useButton({
|
|
1481
|
+
} = useBaseUiId.useButton({
|
|
1726
1482
|
disabled,
|
|
1727
1483
|
native: nativeButton,
|
|
1728
1484
|
focusableWhenDisabled: true
|
|
@@ -2061,13 +1817,9 @@ exports.NumberFieldGroup = NumberFieldGroup;
|
|
|
2061
1817
|
exports.NumberFieldIncrement = NumberFieldIncrement;
|
|
2062
1818
|
exports.NumberFieldInput = NumberFieldInput;
|
|
2063
1819
|
exports.NumberFieldRoot = NumberFieldRoot;
|
|
2064
|
-
exports.error = error;
|
|
2065
1820
|
exports.fieldValidityMapping = fieldValidityMapping;
|
|
2066
1821
|
exports.getCombinedFieldValidityData = getCombinedFieldValidityData;
|
|
2067
1822
|
exports.stateAttributesMapping = stateAttributesMapping$1;
|
|
2068
|
-
exports.useBaseUiId = useBaseUiId;
|
|
2069
|
-
exports.useButton = useButton;
|
|
2070
|
-
exports.useCompositeRootContext = useCompositeRootContext;
|
|
2071
1823
|
exports.useField = useField;
|
|
2072
1824
|
exports.useFieldRootContext = useFieldRootContext;
|
|
2073
1825
|
exports.useFormContext = useFormContext;
|
|
@@ -1,255 +1,11 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
2
|
+
import { a as useStableCallback, u as useIsoLayoutEffect, f as useOnMount, T as Timeout, g as clamp, h as useControlled, i as useValueAsRef, c as useTimeout, j as isIOS, k as createChangeEventDetails, n as none, v as visuallyHiddenInput, l as visuallyHidden, m as inputChange, o as inputClear, p as inputBlur, q as inputPaste, r as createGenericEventDetails, s as ownerDocument, w as incrementPress, x as decrementPress, y as useValueChanged, z as stopEvent, A as keyboard } from './useValueChanged-es.js';
|
|
3
|
+
import { N as NOOP, f as formatErrorMessage, E as EMPTY_OBJECT, b as useRefWithInit, c as useMergedRefs, u as useRenderElement } from './useRenderElement-es.js';
|
|
4
|
+
import { b as isElement, k as getWindow } from './floating-ui.utils.dom-es.js';
|
|
5
|
+
import { u as useBaseUiId, a as useButton } from './useBaseUiId-es.js';
|
|
5
6
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
6
7
|
import * as ReactDOM from 'react-dom';
|
|
7
8
|
|
|
8
|
-
let set;
|
|
9
|
-
if (process.env.NODE_ENV !== 'production') {
|
|
10
|
-
set = new Set();
|
|
11
|
-
}
|
|
12
|
-
function error(...messages) {
|
|
13
|
-
if (process.env.NODE_ENV !== 'production') {
|
|
14
|
-
const messageKey = messages.join(' ');
|
|
15
|
-
if (!set.has(messageKey)) {
|
|
16
|
-
set.add(messageKey);
|
|
17
|
-
console.error(`Base UI: ${messageKey}`);
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
const CompositeRootContext = /*#__PURE__*/React.createContext(undefined);
|
|
23
|
-
if (process.env.NODE_ENV !== "production") CompositeRootContext.displayName = "CompositeRootContext";
|
|
24
|
-
function useCompositeRootContext(optional = false) {
|
|
25
|
-
const context = React.useContext(CompositeRootContext);
|
|
26
|
-
if (context === undefined && !optional) {
|
|
27
|
-
throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: CompositeRootContext is missing. Composite parts must be placed within <Composite.Root>.' : formatErrorMessage(16));
|
|
28
|
-
}
|
|
29
|
-
return context;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
function useFocusableWhenDisabled(parameters) {
|
|
33
|
-
const {
|
|
34
|
-
focusableWhenDisabled,
|
|
35
|
-
disabled,
|
|
36
|
-
composite = false,
|
|
37
|
-
tabIndex: tabIndexProp = 0,
|
|
38
|
-
isNativeButton
|
|
39
|
-
} = parameters;
|
|
40
|
-
const isFocusableComposite = composite && focusableWhenDisabled !== false;
|
|
41
|
-
const isNonFocusableComposite = composite && focusableWhenDisabled === false;
|
|
42
|
-
|
|
43
|
-
// we can't explicitly assign `undefined` to any of these props because it
|
|
44
|
-
// would otherwise prevent subsequently merged props from setting them
|
|
45
|
-
const props = React.useMemo(() => {
|
|
46
|
-
const additionalProps = {
|
|
47
|
-
// allow Tabbing away from focusableWhenDisabled elements
|
|
48
|
-
onKeyDown(event) {
|
|
49
|
-
if (disabled && focusableWhenDisabled && event.key !== 'Tab') {
|
|
50
|
-
event.preventDefault();
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
};
|
|
54
|
-
if (!composite) {
|
|
55
|
-
additionalProps.tabIndex = tabIndexProp;
|
|
56
|
-
if (!isNativeButton && disabled) {
|
|
57
|
-
additionalProps.tabIndex = focusableWhenDisabled ? tabIndexProp : -1;
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
if (isNativeButton && (focusableWhenDisabled || isFocusableComposite) || !isNativeButton && disabled) {
|
|
61
|
-
additionalProps['aria-disabled'] = disabled;
|
|
62
|
-
}
|
|
63
|
-
if (isNativeButton && (!focusableWhenDisabled || isNonFocusableComposite)) {
|
|
64
|
-
additionalProps.disabled = disabled;
|
|
65
|
-
}
|
|
66
|
-
return additionalProps;
|
|
67
|
-
}, [composite, disabled, focusableWhenDisabled, isFocusableComposite, isNonFocusableComposite, isNativeButton, tabIndexProp]);
|
|
68
|
-
return {
|
|
69
|
-
props
|
|
70
|
-
};
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
function useButton(parameters = {}) {
|
|
74
|
-
const {
|
|
75
|
-
disabled = false,
|
|
76
|
-
focusableWhenDisabled,
|
|
77
|
-
tabIndex = 0,
|
|
78
|
-
native: isNativeButton = true,
|
|
79
|
-
composite: compositeProp
|
|
80
|
-
} = parameters;
|
|
81
|
-
const elementRef = React.useRef(null);
|
|
82
|
-
const compositeRootContext = useCompositeRootContext(true);
|
|
83
|
-
const isCompositeItem = compositeProp ?? compositeRootContext !== undefined;
|
|
84
|
-
const {
|
|
85
|
-
props: focusableWhenDisabledProps
|
|
86
|
-
} = useFocusableWhenDisabled({
|
|
87
|
-
focusableWhenDisabled,
|
|
88
|
-
disabled,
|
|
89
|
-
composite: isCompositeItem,
|
|
90
|
-
tabIndex,
|
|
91
|
-
isNativeButton
|
|
92
|
-
});
|
|
93
|
-
if (process.env.NODE_ENV !== 'production') {
|
|
94
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
95
|
-
React.useEffect(() => {
|
|
96
|
-
if (!elementRef.current) {
|
|
97
|
-
return;
|
|
98
|
-
}
|
|
99
|
-
const isButtonTag = isButtonElement(elementRef.current);
|
|
100
|
-
if (isNativeButton) {
|
|
101
|
-
if (!isButtonTag) {
|
|
102
|
-
const ownerStackMessage = SafeReact.captureOwnerStack?.() || '';
|
|
103
|
-
const message = 'A component that acts as a button expected a native <button> because the ' + '`nativeButton` prop is true. Rendering a non-<button> removes native button ' + 'semantics, which can impact forms and accessibility. Use a real <button> in the ' + '`render` prop, or set `nativeButton` to `false`.';
|
|
104
|
-
error(`${message}${ownerStackMessage}`);
|
|
105
|
-
}
|
|
106
|
-
} else if (isButtonTag) {
|
|
107
|
-
const ownerStackMessage = SafeReact.captureOwnerStack?.() || '';
|
|
108
|
-
const message = 'A component that acts as a button expected a non-<button> because the `nativeButton` ' + 'prop is false. Rendering a <button> keeps native behavior while Base UI applies ' + 'non-native attributes and handlers, which can add unintended extra attributes (such ' + 'as `role` or `aria-disabled`). Use a non-<button> in the `render` prop, or set ' + '`nativeButton` to `true`.';
|
|
109
|
-
error(`${message}${ownerStackMessage}`);
|
|
110
|
-
}
|
|
111
|
-
}, [isNativeButton]);
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
// handles a disabled composite button rendering another button, e.g.
|
|
115
|
-
// <Toolbar.Button disabled render={<Menu.Trigger />} />
|
|
116
|
-
// the `disabled` prop needs to pass through 2 `useButton`s then finally
|
|
117
|
-
// delete the `disabled` attribute from DOM
|
|
118
|
-
const updateDisabled = React.useCallback(() => {
|
|
119
|
-
const element = elementRef.current;
|
|
120
|
-
if (!isButtonElement(element)) {
|
|
121
|
-
return;
|
|
122
|
-
}
|
|
123
|
-
if (isCompositeItem && disabled && focusableWhenDisabledProps.disabled === undefined && element.disabled) {
|
|
124
|
-
element.disabled = false;
|
|
125
|
-
}
|
|
126
|
-
}, [disabled, focusableWhenDisabledProps.disabled, isCompositeItem]);
|
|
127
|
-
useIsoLayoutEffect(updateDisabled, [updateDisabled]);
|
|
128
|
-
const getButtonProps = React.useCallback((externalProps = {}) => {
|
|
129
|
-
const {
|
|
130
|
-
onClick: externalOnClick,
|
|
131
|
-
onMouseDown: externalOnMouseDown,
|
|
132
|
-
onKeyUp: externalOnKeyUp,
|
|
133
|
-
onKeyDown: externalOnKeyDown,
|
|
134
|
-
onPointerDown: externalOnPointerDown,
|
|
135
|
-
...otherExternalProps
|
|
136
|
-
} = externalProps;
|
|
137
|
-
const type = isNativeButton ? 'button' : undefined;
|
|
138
|
-
return mergeProps({
|
|
139
|
-
type,
|
|
140
|
-
onClick(event) {
|
|
141
|
-
if (disabled) {
|
|
142
|
-
event.preventDefault();
|
|
143
|
-
return;
|
|
144
|
-
}
|
|
145
|
-
externalOnClick?.(event);
|
|
146
|
-
},
|
|
147
|
-
onMouseDown(event) {
|
|
148
|
-
if (!disabled) {
|
|
149
|
-
externalOnMouseDown?.(event);
|
|
150
|
-
}
|
|
151
|
-
},
|
|
152
|
-
onKeyDown(event) {
|
|
153
|
-
if (disabled) {
|
|
154
|
-
return;
|
|
155
|
-
}
|
|
156
|
-
makeEventPreventable(event);
|
|
157
|
-
externalOnKeyDown?.(event);
|
|
158
|
-
if (event.baseUIHandlerPrevented) {
|
|
159
|
-
return;
|
|
160
|
-
}
|
|
161
|
-
const isCurrentTarget = event.target === event.currentTarget;
|
|
162
|
-
const currentTarget = event.currentTarget;
|
|
163
|
-
const isButton = isButtonElement(currentTarget);
|
|
164
|
-
const isLink = !isNativeButton && isValidLinkElement(currentTarget);
|
|
165
|
-
const shouldClick = isCurrentTarget && (isNativeButton ? isButton : !isLink);
|
|
166
|
-
const isEnterKey = event.key === 'Enter';
|
|
167
|
-
const isSpaceKey = event.key === ' ';
|
|
168
|
-
const role = currentTarget.getAttribute('role');
|
|
169
|
-
const isTextNavigationRole = role?.startsWith('menuitem') || role === 'option' || role === 'gridcell';
|
|
170
|
-
if (isCurrentTarget && isCompositeItem && isSpaceKey) {
|
|
171
|
-
if (event.defaultPrevented && isTextNavigationRole) {
|
|
172
|
-
return;
|
|
173
|
-
}
|
|
174
|
-
event.preventDefault();
|
|
175
|
-
if (isLink || isNativeButton && isButton) {
|
|
176
|
-
currentTarget.click();
|
|
177
|
-
event.preventBaseUIHandler();
|
|
178
|
-
} else if (shouldClick) {
|
|
179
|
-
externalOnClick?.(event);
|
|
180
|
-
event.preventBaseUIHandler();
|
|
181
|
-
}
|
|
182
|
-
return;
|
|
183
|
-
}
|
|
184
|
-
|
|
185
|
-
// Keyboard accessibility for native and non-native elements.
|
|
186
|
-
if (shouldClick) {
|
|
187
|
-
if (!isNativeButton && (isSpaceKey || isEnterKey)) {
|
|
188
|
-
event.preventDefault();
|
|
189
|
-
}
|
|
190
|
-
if (!isNativeButton && isEnterKey) {
|
|
191
|
-
externalOnClick?.(event);
|
|
192
|
-
}
|
|
193
|
-
}
|
|
194
|
-
},
|
|
195
|
-
onKeyUp(event) {
|
|
196
|
-
if (disabled) {
|
|
197
|
-
return;
|
|
198
|
-
}
|
|
199
|
-
|
|
200
|
-
// calling preventDefault in keyUp on a <button> will not dispatch a click event if Space is pressed
|
|
201
|
-
// https://codesandbox.io/p/sandbox/button-keyup-preventdefault-dn7f0
|
|
202
|
-
makeEventPreventable(event);
|
|
203
|
-
externalOnKeyUp?.(event);
|
|
204
|
-
if (event.target === event.currentTarget && isNativeButton && isCompositeItem && isButtonElement(event.currentTarget) && event.key === ' ') {
|
|
205
|
-
event.preventDefault();
|
|
206
|
-
return;
|
|
207
|
-
}
|
|
208
|
-
if (event.baseUIHandlerPrevented) {
|
|
209
|
-
return;
|
|
210
|
-
}
|
|
211
|
-
|
|
212
|
-
// Keyboard accessibility for non interactive elements
|
|
213
|
-
if (event.target === event.currentTarget && !isNativeButton && !isCompositeItem && event.key === ' ') {
|
|
214
|
-
externalOnClick?.(event);
|
|
215
|
-
}
|
|
216
|
-
},
|
|
217
|
-
onPointerDown(event) {
|
|
218
|
-
if (disabled) {
|
|
219
|
-
event.preventDefault();
|
|
220
|
-
return;
|
|
221
|
-
}
|
|
222
|
-
externalOnPointerDown?.(event);
|
|
223
|
-
}
|
|
224
|
-
}, !isNativeButton ? {
|
|
225
|
-
role: 'button'
|
|
226
|
-
} : undefined, focusableWhenDisabledProps, otherExternalProps);
|
|
227
|
-
}, [disabled, focusableWhenDisabledProps, isCompositeItem, isNativeButton]);
|
|
228
|
-
const buttonRef = useStableCallback(element => {
|
|
229
|
-
elementRef.current = element;
|
|
230
|
-
updateDisabled();
|
|
231
|
-
});
|
|
232
|
-
return {
|
|
233
|
-
getButtonProps,
|
|
234
|
-
buttonRef
|
|
235
|
-
};
|
|
236
|
-
}
|
|
237
|
-
function isButtonElement(elem) {
|
|
238
|
-
return isHTMLElement(elem) && elem.tagName === 'BUTTON';
|
|
239
|
-
}
|
|
240
|
-
function isValidLinkElement(elem) {
|
|
241
|
-
return Boolean(elem?.tagName === 'A' && elem?.href);
|
|
242
|
-
}
|
|
243
|
-
|
|
244
|
-
/**
|
|
245
|
-
* Wraps `useId` and prefixes generated `id`s with `base-ui-`
|
|
246
|
-
* @param {string | undefined} idOverride overrides the generated id when provided
|
|
247
|
-
* @returns {string | undefined}
|
|
248
|
-
*/
|
|
249
|
-
function useBaseUiId(idOverride) {
|
|
250
|
-
return useId(idOverride, 'base-ui');
|
|
251
|
-
}
|
|
252
|
-
|
|
253
9
|
/**
|
|
254
10
|
* Returns a function that forces a rerender.
|
|
255
11
|
*/
|
|
@@ -2029,4 +1785,4 @@ const NumberFieldInput = /*#__PURE__*/React.forwardRef(function NumberFieldInput
|
|
|
2029
1785
|
});
|
|
2030
1786
|
if (process.env.NODE_ENV !== "production") NumberFieldInput.displayName = "NumberFieldInput";
|
|
2031
1787
|
|
|
2032
|
-
export { DEFAULT_VALIDITY_STATE as D, FieldRootContext as F, LabelableContext as L, NumberFieldRoot as N,
|
|
1788
|
+
export { DEFAULT_VALIDITY_STATE as D, FieldRootContext as F, LabelableContext as L, NumberFieldRoot as N, useFormContext as a, useFieldRootContext as b, NumberFieldGroup as c, NumberFieldInput as d, NumberFieldIncrement as e, fieldValidityMapping as f, getCombinedFieldValidityData as g, NumberFieldDecrement as h, useLabelableId as i, useField as j, DEFAULT_FIELD_STATE_ATTRIBUTES as k, useNumberFieldRootContext as l, DEFAULT_STEP as m, stateAttributesMapping$1 as s, useLabelableContext as u };
|
package/dist/Page/index.cjs
CHANGED
|
@@ -27,15 +27,13 @@ require('../floating-ui.react-dom-cjs.js');
|
|
|
27
27
|
require('../useFormFieldFocus-cjs.js');
|
|
28
28
|
require('../maxHeight-cjs.js');
|
|
29
29
|
require('../useRenderElement-cjs.js');
|
|
30
|
-
require('../OverlaySeparator-cjs.js');
|
|
31
|
-
require('../Separator-cjs.js');
|
|
32
30
|
require('../BottomSheet-cjs.js');
|
|
33
31
|
require('../DrawerRoot-cjs.js');
|
|
34
32
|
require('../useValueChanged-cjs.js');
|
|
35
|
-
require('../
|
|
36
|
-
require('../
|
|
37
|
-
require('../NumberFieldInput-cjs.js');
|
|
33
|
+
require('../OverlaySeparator-cjs.js');
|
|
34
|
+
require('../Separator-cjs.js');
|
|
38
35
|
require('../MenuSubmenuTrigger-cjs.js');
|
|
36
|
+
require('../useBaseUiId-cjs.js');
|
|
39
37
|
require('../filterDataAttributes-cjs.js');
|
|
40
38
|
|
|
41
39
|
|
package/dist/Page/index.mjs
CHANGED
|
@@ -25,13 +25,11 @@ import '../floating-ui.react-dom-es.js';
|
|
|
25
25
|
import '../useFormFieldFocus-es.js';
|
|
26
26
|
import '../maxHeight-es.js';
|
|
27
27
|
import '../useRenderElement-es.js';
|
|
28
|
-
import '../OverlaySeparator-es.js';
|
|
29
|
-
import '../Separator-es.js';
|
|
30
28
|
import '../BottomSheet-es.js';
|
|
31
29
|
import '../DrawerRoot-es.js';
|
|
32
30
|
import '../useValueChanged-es.js';
|
|
33
|
-
import '../
|
|
34
|
-
import '../
|
|
35
|
-
import '../NumberFieldInput-es.js';
|
|
31
|
+
import '../OverlaySeparator-es.js';
|
|
32
|
+
import '../Separator-es.js';
|
|
36
33
|
import '../MenuSubmenuTrigger-es.js';
|
|
34
|
+
import '../useBaseUiId-es.js';
|
|
37
35
|
import '../filterDataAttributes-es.js';
|
package/dist/index.cjs
CHANGED
|
@@ -186,15 +186,13 @@ require('filesize');
|
|
|
186
186
|
require('./GridCell-cjs.js');
|
|
187
187
|
require('axios');
|
|
188
188
|
require('./useRenderElement-cjs.js');
|
|
189
|
-
require('./OverlaySeparator-cjs.js');
|
|
190
|
-
require('./Separator-cjs.js');
|
|
191
189
|
require('./BottomSheet-cjs.js');
|
|
192
190
|
require('./DrawerRoot-cjs.js');
|
|
193
191
|
require('./useValueChanged-cjs.js');
|
|
194
|
-
require('./
|
|
195
|
-
require('./
|
|
196
|
-
require('./NumberFieldInput-cjs.js');
|
|
192
|
+
require('./OverlaySeparator-cjs.js');
|
|
193
|
+
require('./Separator-cjs.js');
|
|
197
194
|
require('./MenuSubmenuTrigger-cjs.js');
|
|
195
|
+
require('./useBaseUiId-cjs.js');
|
|
198
196
|
require('./AtlantisPortalContent-cjs.js');
|
|
199
197
|
require('@jobber/formatters');
|
|
200
198
|
require('react-dom/client');
|
package/dist/index.mjs
CHANGED
|
@@ -184,15 +184,13 @@ import 'filesize';
|
|
|
184
184
|
import './GridCell-es.js';
|
|
185
185
|
import 'axios';
|
|
186
186
|
import './useRenderElement-es.js';
|
|
187
|
-
import './OverlaySeparator-es.js';
|
|
188
|
-
import './Separator-es.js';
|
|
189
187
|
import './BottomSheet-es.js';
|
|
190
188
|
import './DrawerRoot-es.js';
|
|
191
189
|
import './useValueChanged-es.js';
|
|
192
|
-
import './
|
|
193
|
-
import './
|
|
194
|
-
import './NumberFieldInput-es.js';
|
|
190
|
+
import './OverlaySeparator-es.js';
|
|
191
|
+
import './Separator-es.js';
|
|
195
192
|
import './MenuSubmenuTrigger-es.js';
|
|
193
|
+
import './useBaseUiId-es.js';
|
|
196
194
|
import './AtlantisPortalContent-es.js';
|
|
197
195
|
import '@jobber/formatters';
|
|
198
196
|
import 'react-dom/client';
|