@eightshift/ui-components 0.0.1
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/README.md +27 -0
- package/dist/Checkbox-BLcVbhiO.js +178 -0
- package/dist/ColorSwatch-Cmlex_kT.js +66 -0
- package/dist/FieldError-wtMA4667.js +42 -0
- package/dist/FocusScope-1u9yyfIN.js +725 -0
- package/dist/Form-Cq3fu75_.js +5 -0
- package/dist/GridList-BZPXp3_O.js +1256 -0
- package/dist/Group-DyqpTRPe.js +49 -0
- package/dist/Input-jsbb4ugq.js +130 -0
- package/dist/Label-BPzS-sR7.js +17 -0
- package/dist/ListBox-w9gDaJkV.js +4423 -0
- package/dist/LiveAnnouncer-IsokfWQ5.js +73 -0
- package/dist/NumberFormatter-LzoKy975.js +160 -0
- package/dist/RSPContexts-CrNYmadY.js +14 -0
- package/dist/Select-49a62830.esm-C-RFtLiD.js +2541 -0
- package/dist/SelectionManager-mefd0ThJ.js +2155 -0
- package/dist/Separator-DHn0CwdK.js +325 -0
- package/dist/Slider-Pyh2V4bY.js +885 -0
- package/dist/Text-BM136LvS.js +17 -0
- package/dist/VisuallyHidden-BYRI1Lfo.js +51 -0
- package/dist/_commonjsHelpers-CUmg6egw.js +6 -0
- package/dist/ariaHideOutside-ByKBPHmX.js +113 -0
- package/dist/assets/style.css +1 -0
- package/dist/button-BkkdyHfJ.js +307 -0
- package/dist/components/animated-visibility/animated-visibility.js +7165 -0
- package/dist/components/base-control/base-control.js +97 -0
- package/dist/components/breakpoint-preview/breakpoint-preview.js +218 -0
- package/dist/components/button/button.js +10 -0
- package/dist/components/checkbox/checkbox.js +119 -0
- package/dist/components/color-pickers/color-picker.js +242 -0
- package/dist/components/color-pickers/color-swatch.js +62 -0
- package/dist/components/color-pickers/gradient-editor.js +516 -0
- package/dist/components/color-pickers/solid-color-picker.js +1633 -0
- package/dist/components/component-toggle/component-toggle.js +71 -0
- package/dist/components/container-panel/container-panel.js +39 -0
- package/dist/components/expandable/expandable.js +144 -0
- package/dist/components/input-field/input-field.js +224 -0
- package/dist/components/link-input/link-input.js +937 -0
- package/dist/components/list-box/list-box.js +152 -0
- package/dist/components/matrix-align/matrix-align.js +185 -0
- package/dist/components/menu/menu.js +1608 -0
- package/dist/components/notice/notice.js +119 -0
- package/dist/components/number-picker/number-picker.js +277 -0
- package/dist/components/popover/popover.js +9 -0
- package/dist/components/radio/radio.js +552 -0
- package/dist/components/repeater/repeater-item.js +127 -0
- package/dist/components/repeater/repeater.js +248 -0
- package/dist/components/responsive/responsive-legacy.js +326 -0
- package/dist/components/responsive/responsive.js +499 -0
- package/dist/components/responsive-preview/responsive-preview.js +119 -0
- package/dist/components/rich-label/rich-label.js +56 -0
- package/dist/components/select/async-multi-select.js +144 -0
- package/dist/components/select/async-single-select.js +126 -0
- package/dist/components/select/custom-select-default-components.js +38 -0
- package/dist/components/select/multi-select-components.js +8 -0
- package/dist/components/select/multi-select.js +134 -0
- package/dist/components/select/react-select-component-wrappers.js +90 -0
- package/dist/components/select/shared.js +45 -0
- package/dist/components/select/single-select.js +116 -0
- package/dist/components/select/styles.js +55 -0
- package/dist/components/slider/column-config-slider.js +225 -0
- package/dist/components/slider/slider.js +362 -0
- package/dist/components/slider/utils.js +45 -0
- package/dist/components/spacer/spacer.js +93 -0
- package/dist/components/tabs/tabs.js +626 -0
- package/dist/components/toggle/switch.js +140 -0
- package/dist/components/toggle/toggle.js +58 -0
- package/dist/components/toggle-button/toggle-button.js +206 -0
- package/dist/components/tooltip/tooltip.js +10 -0
- package/dist/context-jMy6xdVq.js +98 -0
- package/dist/default-i18n-BhE-OUmt.js +873 -0
- package/dist/filterDOMProps-DG2RfOUr.js +30 -0
- package/dist/focusSafely-C3K8zAKj.js +743 -0
- package/dist/hooks/use-cell-edit-mode.js +35 -0
- package/dist/icons/block-icon.js +42 -0
- package/dist/icons/generic-color-swatch.js +21 -0
- package/dist/icons/icons.js +3636 -0
- package/dist/index-Bfb9bWcb.js +28844 -0
- package/dist/index-a301f526.esm-Bioi4cGX.js +3576 -0
- package/dist/index.js +109 -0
- package/dist/intlStrings-CUhoK9EN.js +2484 -0
- package/dist/isScrollable-PcyglExV.js +10 -0
- package/dist/modifiers.esm-BuJQPI1X.js +31 -0
- package/dist/multi-select-components-CjVpCNko.js +3677 -0
- package/dist/number-rWqELA8W.js +39 -0
- package/dist/popover-Dx3vKXUX.js +1061 -0
- package/dist/react-select-async.esm-TFb_ZX6C.js +111 -0
- package/dist/react-select.esm-BjRWqf0E.js +15 -0
- package/dist/style.js +1 -0
- package/dist/textSelection-BosCCRVE.js +89 -0
- package/dist/tooltip-CkCndvTI.js +1094 -0
- package/dist/useButton-CuG5UzUw.js +74 -0
- package/dist/useEvent-DHv-yhOH.js +24 -0
- package/dist/useFocusRing-Cc-4eouh.js +41 -0
- package/dist/useFocusable-5q1Gek1J.js +81 -0
- package/dist/useFormReset-Buc9YJcv.js +23 -0
- package/dist/useFormValidationState-BAPPNXic.js +238 -0
- package/dist/useHasTabbableChild-D3uUNhJ0.js +37 -0
- package/dist/useLabel-CGlkoFG0.js +28 -0
- package/dist/useLabels-Dg62M_3P.js +25 -0
- package/dist/useListData-BelKu4kx.js +211 -0
- package/dist/useListState-Domq0blV.js +137 -0
- package/dist/useLocalizedStringFormatter-Prmz0h0A.js +130 -0
- package/dist/useNumberFieldState-BLU3uhSR.js +1253 -0
- package/dist/useNumberFormatter-BLc2xjZn.js +13 -0
- package/dist/usePress-BQgVor4T.js +698 -0
- package/dist/useToggle-C9ETOBaZ.js +58 -0
- package/dist/useToggleState-DJ_z5E2S.js +21 -0
- package/dist/utilities/classnames.js +16 -0
- package/dist/utilities/text-helpers.js +79 -0
- package/dist/utils-BsiH7-5Y.js +488 -0
- package/package.json +71 -0
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import { d as $3ef42575df84b30b$export$9d1611c77c2fe928 } from "./utils-BsiH7-5Y.js";
|
|
2
|
+
import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "./filterDOMProps-DG2RfOUr.js";
|
|
3
|
+
import { $ as $e6afbd83fe6ebbd2$export$4c014de7c8940b4c } from "./useFocusable-5q1Gek1J.js";
|
|
4
|
+
import { $ as $f6c31cce2adf654f$export$45712eceda6fad21 } from "./usePress-BQgVor4T.js";
|
|
5
|
+
function $701a24aa0da5b062$export$ea18c227d4417cc3(props, ref) {
|
|
6
|
+
let {
|
|
7
|
+
elementType = "button",
|
|
8
|
+
isDisabled,
|
|
9
|
+
onPress,
|
|
10
|
+
onPressStart,
|
|
11
|
+
onPressEnd,
|
|
12
|
+
onPressUp,
|
|
13
|
+
onPressChange,
|
|
14
|
+
preventFocusOnPress,
|
|
15
|
+
allowFocusWhenDisabled,
|
|
16
|
+
// @ts-ignore
|
|
17
|
+
onClick: deprecatedOnClick,
|
|
18
|
+
href,
|
|
19
|
+
target,
|
|
20
|
+
rel,
|
|
21
|
+
type = "button"
|
|
22
|
+
} = props;
|
|
23
|
+
let additionalProps;
|
|
24
|
+
if (elementType === "button")
|
|
25
|
+
additionalProps = {
|
|
26
|
+
type,
|
|
27
|
+
disabled: isDisabled
|
|
28
|
+
};
|
|
29
|
+
else
|
|
30
|
+
additionalProps = {
|
|
31
|
+
role: "button",
|
|
32
|
+
tabIndex: isDisabled ? void 0 : 0,
|
|
33
|
+
href: elementType === "a" && isDisabled ? void 0 : href,
|
|
34
|
+
target: elementType === "a" ? target : void 0,
|
|
35
|
+
type: elementType === "input" ? type : void 0,
|
|
36
|
+
disabled: elementType === "input" ? isDisabled : void 0,
|
|
37
|
+
"aria-disabled": !isDisabled || elementType === "input" ? void 0 : isDisabled,
|
|
38
|
+
rel: elementType === "a" ? rel : void 0
|
|
39
|
+
};
|
|
40
|
+
let { pressProps, isPressed } = $f6c31cce2adf654f$export$45712eceda6fad21({
|
|
41
|
+
onPressStart,
|
|
42
|
+
onPressEnd,
|
|
43
|
+
onPressChange,
|
|
44
|
+
onPress,
|
|
45
|
+
onPressUp,
|
|
46
|
+
isDisabled,
|
|
47
|
+
preventFocusOnPress,
|
|
48
|
+
ref
|
|
49
|
+
});
|
|
50
|
+
let { focusableProps } = $e6afbd83fe6ebbd2$export$4c014de7c8940b4c(props, ref);
|
|
51
|
+
if (allowFocusWhenDisabled)
|
|
52
|
+
focusableProps.tabIndex = isDisabled ? -1 : focusableProps.tabIndex;
|
|
53
|
+
let buttonProps = $3ef42575df84b30b$export$9d1611c77c2fe928(focusableProps, pressProps, $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
|
|
54
|
+
labelable: true
|
|
55
|
+
}));
|
|
56
|
+
return {
|
|
57
|
+
isPressed,
|
|
58
|
+
buttonProps: $3ef42575df84b30b$export$9d1611c77c2fe928(additionalProps, buttonProps, {
|
|
59
|
+
"aria-haspopup": props["aria-haspopup"],
|
|
60
|
+
"aria-expanded": props["aria-expanded"],
|
|
61
|
+
"aria-controls": props["aria-controls"],
|
|
62
|
+
"aria-pressed": props["aria-pressed"],
|
|
63
|
+
onClick: (e) => {
|
|
64
|
+
if (deprecatedOnClick) {
|
|
65
|
+
deprecatedOnClick(e);
|
|
66
|
+
console.warn("onClick is deprecated, please use onPress");
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
})
|
|
70
|
+
};
|
|
71
|
+
}
|
|
72
|
+
export {
|
|
73
|
+
$701a24aa0da5b062$export$ea18c227d4417cc3 as $
|
|
74
|
+
};
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { f as $8ae05eaa5c114e9c$export$7f54fc3180508a52 } from "./utils-BsiH7-5Y.js";
|
|
2
|
+
import { useEffect } from "react";
|
|
3
|
+
function $e9faafb641e167db$export$90fc3a17d93f704c(ref, event, handler, options) {
|
|
4
|
+
let handleEvent = $8ae05eaa5c114e9c$export$7f54fc3180508a52(handler);
|
|
5
|
+
let isDisabled = handler == null;
|
|
6
|
+
useEffect(() => {
|
|
7
|
+
if (isDisabled || !ref.current)
|
|
8
|
+
return;
|
|
9
|
+
let element = ref.current;
|
|
10
|
+
element.addEventListener(event, handleEvent, options);
|
|
11
|
+
return () => {
|
|
12
|
+
element.removeEventListener(event, handleEvent, options);
|
|
13
|
+
};
|
|
14
|
+
}, [
|
|
15
|
+
ref,
|
|
16
|
+
event,
|
|
17
|
+
options,
|
|
18
|
+
isDisabled,
|
|
19
|
+
handleEvent
|
|
20
|
+
]);
|
|
21
|
+
}
|
|
22
|
+
export {
|
|
23
|
+
$e9faafb641e167db$export$90fc3a17d93f704c as $
|
|
24
|
+
};
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { a as $507fabe10e71c6fb$export$b9b3dfddab17db27, b as $507fabe10e71c6fb$export$ec71b4b83ac08ec3, c as $a1ea59d68270f0dd$export$f8168d8dd8fd66e6, d as $9ab94262bd0047c7$export$420e68273165f4ec } from "./focusSafely-C3K8zAKj.js";
|
|
2
|
+
import { useRef, useState, useCallback } from "react";
|
|
3
|
+
function $f7dceffc5ad7768b$export$4e328f61c538687f(props = {}) {
|
|
4
|
+
let { autoFocus = false, isTextInput, within } = props;
|
|
5
|
+
let state = useRef({
|
|
6
|
+
isFocused: false,
|
|
7
|
+
isFocusVisible: autoFocus || $507fabe10e71c6fb$export$b9b3dfddab17db27()
|
|
8
|
+
});
|
|
9
|
+
let [isFocused, setFocused] = useState(false);
|
|
10
|
+
let [isFocusVisibleState, setFocusVisible] = useState(() => state.current.isFocused && state.current.isFocusVisible);
|
|
11
|
+
let updateState = useCallback(() => setFocusVisible(state.current.isFocused && state.current.isFocusVisible), []);
|
|
12
|
+
let onFocusChange = useCallback((isFocused2) => {
|
|
13
|
+
state.current.isFocused = isFocused2;
|
|
14
|
+
setFocused(isFocused2);
|
|
15
|
+
updateState();
|
|
16
|
+
}, [
|
|
17
|
+
updateState
|
|
18
|
+
]);
|
|
19
|
+
$507fabe10e71c6fb$export$ec71b4b83ac08ec3((isFocusVisible) => {
|
|
20
|
+
state.current.isFocusVisible = isFocusVisible;
|
|
21
|
+
updateState();
|
|
22
|
+
}, [], {
|
|
23
|
+
isTextInput
|
|
24
|
+
});
|
|
25
|
+
let { focusProps } = $a1ea59d68270f0dd$export$f8168d8dd8fd66e6({
|
|
26
|
+
isDisabled: within,
|
|
27
|
+
onFocusChange
|
|
28
|
+
});
|
|
29
|
+
let { focusWithinProps } = $9ab94262bd0047c7$export$420e68273165f4ec({
|
|
30
|
+
isDisabled: !within,
|
|
31
|
+
onFocusWithinChange: onFocusChange
|
|
32
|
+
});
|
|
33
|
+
return {
|
|
34
|
+
isFocused,
|
|
35
|
+
isFocusVisible: isFocusVisibleState,
|
|
36
|
+
focusProps: within ? focusWithinProps : focusProps
|
|
37
|
+
};
|
|
38
|
+
}
|
|
39
|
+
export {
|
|
40
|
+
$f7dceffc5ad7768b$export$4e328f61c538687f as $
|
|
41
|
+
};
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
import { c as $a1ea59d68270f0dd$export$f8168d8dd8fd66e6, h as $6a99195332edec8b$export$80f3e147d781571c, l as $e7801be82b4b2a53$export$4debdb1a3f0fa79e } from "./focusSafely-C3K8zAKj.js";
|
|
2
|
+
import { l as $df56164dff5785e2$export$4338b53315abf666, d as $3ef42575df84b30b$export$9d1611c77c2fe928 } from "./utils-BsiH7-5Y.js";
|
|
3
|
+
import React__default, { useRef, useEffect, useContext } from "react";
|
|
4
|
+
function $93925083ecbb358c$export$48d1ea6320830260(handler) {
|
|
5
|
+
if (!handler)
|
|
6
|
+
return void 0;
|
|
7
|
+
let shouldStopPropagation = true;
|
|
8
|
+
return (e) => {
|
|
9
|
+
let event = {
|
|
10
|
+
...e,
|
|
11
|
+
preventDefault() {
|
|
12
|
+
e.preventDefault();
|
|
13
|
+
},
|
|
14
|
+
isDefaultPrevented() {
|
|
15
|
+
return e.isDefaultPrevented();
|
|
16
|
+
},
|
|
17
|
+
stopPropagation() {
|
|
18
|
+
console.error("stopPropagation is now the default behavior for events in React Spectrum. You can use continuePropagation() to revert this behavior.");
|
|
19
|
+
},
|
|
20
|
+
continuePropagation() {
|
|
21
|
+
shouldStopPropagation = false;
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
handler(event);
|
|
25
|
+
if (shouldStopPropagation)
|
|
26
|
+
e.stopPropagation();
|
|
27
|
+
};
|
|
28
|
+
}
|
|
29
|
+
function $46d819fcbaf35654$export$8f71654801c2f7cd(props) {
|
|
30
|
+
return {
|
|
31
|
+
keyboardProps: props.isDisabled ? {} : {
|
|
32
|
+
onKeyDown: $93925083ecbb358c$export$48d1ea6320830260(props.onKeyDown),
|
|
33
|
+
onKeyUp: $93925083ecbb358c$export$48d1ea6320830260(props.onKeyUp)
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
}
|
|
37
|
+
let $e6afbd83fe6ebbd2$var$FocusableContext = /* @__PURE__ */ React__default.createContext(null);
|
|
38
|
+
function $e6afbd83fe6ebbd2$var$useFocusableContext(ref) {
|
|
39
|
+
let context = useContext($e6afbd83fe6ebbd2$var$FocusableContext) || {};
|
|
40
|
+
$e7801be82b4b2a53$export$4debdb1a3f0fa79e(context, ref);
|
|
41
|
+
let { ref: _, ...otherProps } = context;
|
|
42
|
+
return otherProps;
|
|
43
|
+
}
|
|
44
|
+
function $e6afbd83fe6ebbd2$var$FocusableProvider(props, ref) {
|
|
45
|
+
let { children, ...otherProps } = props;
|
|
46
|
+
let objRef = $df56164dff5785e2$export$4338b53315abf666(ref);
|
|
47
|
+
let context = {
|
|
48
|
+
...otherProps,
|
|
49
|
+
ref: objRef
|
|
50
|
+
};
|
|
51
|
+
return /* @__PURE__ */ React__default.createElement($e6afbd83fe6ebbd2$var$FocusableContext.Provider, {
|
|
52
|
+
value: context
|
|
53
|
+
}, children);
|
|
54
|
+
}
|
|
55
|
+
let $e6afbd83fe6ebbd2$export$13f3202a3e5ddd5 = /* @__PURE__ */ React__default.forwardRef($e6afbd83fe6ebbd2$var$FocusableProvider);
|
|
56
|
+
function $e6afbd83fe6ebbd2$export$4c014de7c8940b4c(props, domRef) {
|
|
57
|
+
let { focusProps } = $a1ea59d68270f0dd$export$f8168d8dd8fd66e6(props);
|
|
58
|
+
let { keyboardProps } = $46d819fcbaf35654$export$8f71654801c2f7cd(props);
|
|
59
|
+
let interactions = $3ef42575df84b30b$export$9d1611c77c2fe928(focusProps, keyboardProps);
|
|
60
|
+
let domProps = $e6afbd83fe6ebbd2$var$useFocusableContext(domRef);
|
|
61
|
+
let interactionProps = props.isDisabled ? {} : domProps;
|
|
62
|
+
let autoFocusRef = useRef(props.autoFocus);
|
|
63
|
+
useEffect(() => {
|
|
64
|
+
if (autoFocusRef.current && domRef.current)
|
|
65
|
+
$6a99195332edec8b$export$80f3e147d781571c(domRef.current);
|
|
66
|
+
autoFocusRef.current = false;
|
|
67
|
+
}, [
|
|
68
|
+
domRef
|
|
69
|
+
]);
|
|
70
|
+
return {
|
|
71
|
+
focusableProps: $3ef42575df84b30b$export$9d1611c77c2fe928({
|
|
72
|
+
...interactions,
|
|
73
|
+
tabIndex: props.excludeFromTabOrder && !props.isDisabled ? -1 : void 0
|
|
74
|
+
}, interactionProps)
|
|
75
|
+
};
|
|
76
|
+
}
|
|
77
|
+
export {
|
|
78
|
+
$e6afbd83fe6ebbd2$export$4c014de7c8940b4c as $,
|
|
79
|
+
$46d819fcbaf35654$export$8f71654801c2f7cd as a,
|
|
80
|
+
$e6afbd83fe6ebbd2$export$13f3202a3e5ddd5 as b
|
|
81
|
+
};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { f as $8ae05eaa5c114e9c$export$7f54fc3180508a52 } from "./utils-BsiH7-5Y.js";
|
|
2
|
+
import { useRef, useEffect } from "react";
|
|
3
|
+
function $99facab73266f662$export$5add1d006293d136(ref, initialValue, onReset) {
|
|
4
|
+
let resetValue = useRef(initialValue);
|
|
5
|
+
let handleReset = $8ae05eaa5c114e9c$export$7f54fc3180508a52(() => {
|
|
6
|
+
if (onReset)
|
|
7
|
+
onReset(resetValue.current);
|
|
8
|
+
});
|
|
9
|
+
useEffect(() => {
|
|
10
|
+
var _ref_current;
|
|
11
|
+
let form = ref === null || ref === void 0 ? void 0 : (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.form;
|
|
12
|
+
form === null || form === void 0 ? void 0 : form.addEventListener("reset", handleReset);
|
|
13
|
+
return () => {
|
|
14
|
+
form === null || form === void 0 ? void 0 : form.removeEventListener("reset", handleReset);
|
|
15
|
+
};
|
|
16
|
+
}, [
|
|
17
|
+
ref,
|
|
18
|
+
handleReset
|
|
19
|
+
]);
|
|
20
|
+
}
|
|
21
|
+
export {
|
|
22
|
+
$99facab73266f662$export$5add1d006293d136 as $
|
|
23
|
+
};
|
|
@@ -0,0 +1,238 @@
|
|
|
1
|
+
import { useEffect, createContext, useMemo, useContext, useState, useRef } from "react";
|
|
2
|
+
import { i as $507fabe10e71c6fb$export$8397ddfc504fdb9a } from "./focusSafely-C3K8zAKj.js";
|
|
3
|
+
import { g as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, f as $8ae05eaa5c114e9c$export$7f54fc3180508a52 } from "./utils-BsiH7-5Y.js";
|
|
4
|
+
function $e93e671b31057976$export$b8473d3665f3a75a(props, state, ref) {
|
|
5
|
+
let { validationBehavior, focus } = props;
|
|
6
|
+
$f0a04ccd8dbdd83b$export$e5c5a5f917a5871c(() => {
|
|
7
|
+
if (validationBehavior === "native" && (ref === null || ref === void 0 ? void 0 : ref.current)) {
|
|
8
|
+
let errorMessage = state.realtimeValidation.isInvalid ? state.realtimeValidation.validationErrors.join(" ") || "Invalid value." : "";
|
|
9
|
+
ref.current.setCustomValidity(errorMessage);
|
|
10
|
+
if (!ref.current.hasAttribute("title"))
|
|
11
|
+
ref.current.title = "";
|
|
12
|
+
if (!state.realtimeValidation.isInvalid)
|
|
13
|
+
state.updateValidation($e93e671b31057976$var$getNativeValidity(ref.current));
|
|
14
|
+
}
|
|
15
|
+
});
|
|
16
|
+
let onReset = $8ae05eaa5c114e9c$export$7f54fc3180508a52(() => {
|
|
17
|
+
state.resetValidation();
|
|
18
|
+
});
|
|
19
|
+
let onInvalid = $8ae05eaa5c114e9c$export$7f54fc3180508a52((e) => {
|
|
20
|
+
var _ref_current;
|
|
21
|
+
if (!state.displayValidation.isInvalid)
|
|
22
|
+
state.commitValidation();
|
|
23
|
+
let form = ref === null || ref === void 0 ? void 0 : (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.form;
|
|
24
|
+
if (!e.defaultPrevented && ref && form && $e93e671b31057976$var$getFirstInvalidInput(form) === ref.current) {
|
|
25
|
+
var _ref_current1;
|
|
26
|
+
if (focus)
|
|
27
|
+
focus();
|
|
28
|
+
else
|
|
29
|
+
(_ref_current1 = ref.current) === null || _ref_current1 === void 0 ? void 0 : _ref_current1.focus();
|
|
30
|
+
$507fabe10e71c6fb$export$8397ddfc504fdb9a("keyboard");
|
|
31
|
+
}
|
|
32
|
+
e.preventDefault();
|
|
33
|
+
});
|
|
34
|
+
let onChange = $8ae05eaa5c114e9c$export$7f54fc3180508a52(() => {
|
|
35
|
+
state.commitValidation();
|
|
36
|
+
});
|
|
37
|
+
useEffect(() => {
|
|
38
|
+
let input = ref === null || ref === void 0 ? void 0 : ref.current;
|
|
39
|
+
if (!input)
|
|
40
|
+
return;
|
|
41
|
+
let form = input.form;
|
|
42
|
+
input.addEventListener("invalid", onInvalid);
|
|
43
|
+
input.addEventListener("change", onChange);
|
|
44
|
+
form === null || form === void 0 ? void 0 : form.addEventListener("reset", onReset);
|
|
45
|
+
return () => {
|
|
46
|
+
input.removeEventListener("invalid", onInvalid);
|
|
47
|
+
input.removeEventListener("change", onChange);
|
|
48
|
+
form === null || form === void 0 ? void 0 : form.removeEventListener("reset", onReset);
|
|
49
|
+
};
|
|
50
|
+
}, [
|
|
51
|
+
ref,
|
|
52
|
+
onInvalid,
|
|
53
|
+
onChange,
|
|
54
|
+
onReset,
|
|
55
|
+
validationBehavior
|
|
56
|
+
]);
|
|
57
|
+
}
|
|
58
|
+
function $e93e671b31057976$var$getValidity(input) {
|
|
59
|
+
let validity = input.validity;
|
|
60
|
+
return {
|
|
61
|
+
badInput: validity.badInput,
|
|
62
|
+
customError: validity.customError,
|
|
63
|
+
patternMismatch: validity.patternMismatch,
|
|
64
|
+
rangeOverflow: validity.rangeOverflow,
|
|
65
|
+
rangeUnderflow: validity.rangeUnderflow,
|
|
66
|
+
stepMismatch: validity.stepMismatch,
|
|
67
|
+
tooLong: validity.tooLong,
|
|
68
|
+
tooShort: validity.tooShort,
|
|
69
|
+
typeMismatch: validity.typeMismatch,
|
|
70
|
+
valueMissing: validity.valueMissing,
|
|
71
|
+
valid: validity.valid
|
|
72
|
+
};
|
|
73
|
+
}
|
|
74
|
+
function $e93e671b31057976$var$getNativeValidity(input) {
|
|
75
|
+
return {
|
|
76
|
+
isInvalid: !input.validity.valid,
|
|
77
|
+
validationDetails: $e93e671b31057976$var$getValidity(input),
|
|
78
|
+
validationErrors: input.validationMessage ? [
|
|
79
|
+
input.validationMessage
|
|
80
|
+
] : []
|
|
81
|
+
};
|
|
82
|
+
}
|
|
83
|
+
function $e93e671b31057976$var$getFirstInvalidInput(form) {
|
|
84
|
+
for (let i = 0; i < form.elements.length; i++) {
|
|
85
|
+
let element = form.elements[i];
|
|
86
|
+
if (!element.validity.valid)
|
|
87
|
+
return element;
|
|
88
|
+
}
|
|
89
|
+
return null;
|
|
90
|
+
}
|
|
91
|
+
const $e5be200c675c3b3a$export$aca958c65c314e6c = {
|
|
92
|
+
badInput: false,
|
|
93
|
+
customError: false,
|
|
94
|
+
patternMismatch: false,
|
|
95
|
+
rangeOverflow: false,
|
|
96
|
+
rangeUnderflow: false,
|
|
97
|
+
stepMismatch: false,
|
|
98
|
+
tooLong: false,
|
|
99
|
+
tooShort: false,
|
|
100
|
+
typeMismatch: false,
|
|
101
|
+
valueMissing: false,
|
|
102
|
+
valid: true
|
|
103
|
+
};
|
|
104
|
+
const $e5be200c675c3b3a$var$CUSTOM_VALIDITY_STATE = {
|
|
105
|
+
...$e5be200c675c3b3a$export$aca958c65c314e6c,
|
|
106
|
+
customError: true,
|
|
107
|
+
valid: false
|
|
108
|
+
};
|
|
109
|
+
const $e5be200c675c3b3a$export$dad6ae84456c676a = {
|
|
110
|
+
isInvalid: false,
|
|
111
|
+
validationDetails: $e5be200c675c3b3a$export$aca958c65c314e6c,
|
|
112
|
+
validationErrors: []
|
|
113
|
+
};
|
|
114
|
+
const $e5be200c675c3b3a$export$571b5131b7e65c11 = createContext({});
|
|
115
|
+
const $e5be200c675c3b3a$export$a763b9476acd3eb = "__formValidationState" + Date.now();
|
|
116
|
+
function $e5be200c675c3b3a$export$fc1a364ae1f3ff10(props) {
|
|
117
|
+
if (props[$e5be200c675c3b3a$export$a763b9476acd3eb]) {
|
|
118
|
+
let { realtimeValidation, displayValidation, updateValidation, resetValidation, commitValidation } = props[$e5be200c675c3b3a$export$a763b9476acd3eb];
|
|
119
|
+
return {
|
|
120
|
+
realtimeValidation,
|
|
121
|
+
displayValidation,
|
|
122
|
+
updateValidation,
|
|
123
|
+
resetValidation,
|
|
124
|
+
commitValidation
|
|
125
|
+
};
|
|
126
|
+
}
|
|
127
|
+
return $e5be200c675c3b3a$var$useFormValidationStateImpl(props);
|
|
128
|
+
}
|
|
129
|
+
function $e5be200c675c3b3a$var$useFormValidationStateImpl(props) {
|
|
130
|
+
let { isInvalid, validationState, name, value, builtinValidation, validate, validationBehavior = "aria" } = props;
|
|
131
|
+
if (validationState)
|
|
132
|
+
isInvalid || (isInvalid = validationState === "invalid");
|
|
133
|
+
let controlledError = isInvalid !== void 0 ? {
|
|
134
|
+
isInvalid,
|
|
135
|
+
validationErrors: [],
|
|
136
|
+
validationDetails: $e5be200c675c3b3a$var$CUSTOM_VALIDITY_STATE
|
|
137
|
+
} : null;
|
|
138
|
+
let clientError = useMemo(() => $e5be200c675c3b3a$var$getValidationResult($e5be200c675c3b3a$var$runValidate(validate, value)), [
|
|
139
|
+
validate,
|
|
140
|
+
value
|
|
141
|
+
]);
|
|
142
|
+
if (builtinValidation === null || builtinValidation === void 0 ? void 0 : builtinValidation.validationDetails.valid)
|
|
143
|
+
builtinValidation = null;
|
|
144
|
+
let serverErrors = useContext($e5be200c675c3b3a$export$571b5131b7e65c11);
|
|
145
|
+
let serverErrorMessages = useMemo(() => {
|
|
146
|
+
if (name)
|
|
147
|
+
return Array.isArray(name) ? name.flatMap((name2) => $e5be200c675c3b3a$var$asArray(serverErrors[name2])) : $e5be200c675c3b3a$var$asArray(serverErrors[name]);
|
|
148
|
+
return [];
|
|
149
|
+
}, [
|
|
150
|
+
serverErrors,
|
|
151
|
+
name
|
|
152
|
+
]);
|
|
153
|
+
let [lastServerErrors, setLastServerErrors] = useState(serverErrors);
|
|
154
|
+
let [isServerErrorCleared, setServerErrorCleared] = useState(false);
|
|
155
|
+
if (serverErrors !== lastServerErrors) {
|
|
156
|
+
setLastServerErrors(serverErrors);
|
|
157
|
+
setServerErrorCleared(false);
|
|
158
|
+
}
|
|
159
|
+
let serverError = useMemo(() => $e5be200c675c3b3a$var$getValidationResult(isServerErrorCleared ? [] : serverErrorMessages), [
|
|
160
|
+
isServerErrorCleared,
|
|
161
|
+
serverErrorMessages
|
|
162
|
+
]);
|
|
163
|
+
let nextValidation = useRef($e5be200c675c3b3a$export$dad6ae84456c676a);
|
|
164
|
+
let [currentValidity, setCurrentValidity] = useState($e5be200c675c3b3a$export$dad6ae84456c676a);
|
|
165
|
+
let lastError = useRef($e5be200c675c3b3a$export$dad6ae84456c676a);
|
|
166
|
+
let commitValidation = () => {
|
|
167
|
+
if (!commitQueued)
|
|
168
|
+
return;
|
|
169
|
+
setCommitQueued(false);
|
|
170
|
+
let error = clientError || builtinValidation || nextValidation.current;
|
|
171
|
+
if (!$e5be200c675c3b3a$var$isEqualValidation(error, lastError.current)) {
|
|
172
|
+
lastError.current = error;
|
|
173
|
+
setCurrentValidity(error);
|
|
174
|
+
}
|
|
175
|
+
};
|
|
176
|
+
let [commitQueued, setCommitQueued] = useState(false);
|
|
177
|
+
useEffect(commitValidation);
|
|
178
|
+
let realtimeValidation = controlledError || serverError || clientError || builtinValidation || $e5be200c675c3b3a$export$dad6ae84456c676a;
|
|
179
|
+
let displayValidation = validationBehavior === "native" ? controlledError || serverError || currentValidity : controlledError || serverError || clientError || builtinValidation || currentValidity;
|
|
180
|
+
return {
|
|
181
|
+
realtimeValidation,
|
|
182
|
+
displayValidation,
|
|
183
|
+
updateValidation(value2) {
|
|
184
|
+
if (validationBehavior === "aria" && !$e5be200c675c3b3a$var$isEqualValidation(currentValidity, value2))
|
|
185
|
+
setCurrentValidity(value2);
|
|
186
|
+
else
|
|
187
|
+
nextValidation.current = value2;
|
|
188
|
+
},
|
|
189
|
+
resetValidation() {
|
|
190
|
+
let error = $e5be200c675c3b3a$export$dad6ae84456c676a;
|
|
191
|
+
if (!$e5be200c675c3b3a$var$isEqualValidation(error, lastError.current)) {
|
|
192
|
+
lastError.current = error;
|
|
193
|
+
setCurrentValidity(error);
|
|
194
|
+
}
|
|
195
|
+
if (validationBehavior === "native")
|
|
196
|
+
setCommitQueued(false);
|
|
197
|
+
setServerErrorCleared(true);
|
|
198
|
+
},
|
|
199
|
+
commitValidation() {
|
|
200
|
+
if (validationBehavior === "native")
|
|
201
|
+
setCommitQueued(true);
|
|
202
|
+
setServerErrorCleared(true);
|
|
203
|
+
}
|
|
204
|
+
};
|
|
205
|
+
}
|
|
206
|
+
function $e5be200c675c3b3a$var$asArray(v) {
|
|
207
|
+
if (!v)
|
|
208
|
+
return [];
|
|
209
|
+
return Array.isArray(v) ? v : [
|
|
210
|
+
v
|
|
211
|
+
];
|
|
212
|
+
}
|
|
213
|
+
function $e5be200c675c3b3a$var$runValidate(validate, value) {
|
|
214
|
+
if (typeof validate === "function") {
|
|
215
|
+
let e = validate(value);
|
|
216
|
+
if (e && typeof e !== "boolean")
|
|
217
|
+
return $e5be200c675c3b3a$var$asArray(e);
|
|
218
|
+
}
|
|
219
|
+
return [];
|
|
220
|
+
}
|
|
221
|
+
function $e5be200c675c3b3a$var$getValidationResult(errors) {
|
|
222
|
+
return errors.length ? {
|
|
223
|
+
isInvalid: true,
|
|
224
|
+
validationErrors: errors,
|
|
225
|
+
validationDetails: $e5be200c675c3b3a$var$CUSTOM_VALIDITY_STATE
|
|
226
|
+
} : null;
|
|
227
|
+
}
|
|
228
|
+
function $e5be200c675c3b3a$var$isEqualValidation(a, b) {
|
|
229
|
+
if (a === b)
|
|
230
|
+
return true;
|
|
231
|
+
return a && b && a.isInvalid === b.isInvalid && a.validationErrors.length === b.validationErrors.length && a.validationErrors.every((a2, i) => a2 === b.validationErrors[i]) && Object.entries(a.validationDetails).every(([k, v]) => b.validationDetails[k] === v);
|
|
232
|
+
}
|
|
233
|
+
export {
|
|
234
|
+
$e5be200c675c3b3a$export$fc1a364ae1f3ff10 as $,
|
|
235
|
+
$e93e671b31057976$export$b8473d3665f3a75a as a,
|
|
236
|
+
$e5be200c675c3b3a$export$dad6ae84456c676a as b,
|
|
237
|
+
$e5be200c675c3b3a$export$a763b9476acd3eb as c
|
|
238
|
+
};
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { a as $9bf71ea28793e738$export$2d6ec8fc375ceafa } from "./FocusScope-1u9yyfIN.js";
|
|
2
|
+
import { useState } from "react";
|
|
3
|
+
import { g as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c } from "./utils-BsiH7-5Y.js";
|
|
4
|
+
function $83013635b024ae3d$export$eac1895992b9f3d6(ref, options) {
|
|
5
|
+
let isDisabled = options === null || options === void 0 ? void 0 : options.isDisabled;
|
|
6
|
+
let [hasTabbableChild, setHasTabbableChild] = useState(false);
|
|
7
|
+
$f0a04ccd8dbdd83b$export$e5c5a5f917a5871c(() => {
|
|
8
|
+
if ((ref === null || ref === void 0 ? void 0 : ref.current) && !isDisabled) {
|
|
9
|
+
let update = () => {
|
|
10
|
+
if (ref.current) {
|
|
11
|
+
let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa(ref.current, {
|
|
12
|
+
tabbable: true
|
|
13
|
+
});
|
|
14
|
+
setHasTabbableChild(!!walker.nextNode());
|
|
15
|
+
}
|
|
16
|
+
};
|
|
17
|
+
update();
|
|
18
|
+
let observer = new MutationObserver(update);
|
|
19
|
+
observer.observe(ref.current, {
|
|
20
|
+
subtree: true,
|
|
21
|
+
childList: true,
|
|
22
|
+
attributes: true,
|
|
23
|
+
attributeFilter: [
|
|
24
|
+
"tabIndex",
|
|
25
|
+
"disabled"
|
|
26
|
+
]
|
|
27
|
+
});
|
|
28
|
+
return () => {
|
|
29
|
+
observer.disconnect();
|
|
30
|
+
};
|
|
31
|
+
}
|
|
32
|
+
});
|
|
33
|
+
return isDisabled ? false : hasTabbableChild;
|
|
34
|
+
}
|
|
35
|
+
export {
|
|
36
|
+
$83013635b024ae3d$export$eac1895992b9f3d6 as $
|
|
37
|
+
};
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { e as $bdb11010cef70236$export$f680877a34711e37 } from "./utils-BsiH7-5Y.js";
|
|
2
|
+
import { $ as $313b98861ee5dd6c$export$d6875122194c7b44 } from "./useLabels-Dg62M_3P.js";
|
|
3
|
+
function $d191a55c9702f145$export$8467354a121f1b9f(props) {
|
|
4
|
+
let { id, label, "aria-labelledby": ariaLabelledby, "aria-label": ariaLabel, labelElementType = "label" } = props;
|
|
5
|
+
id = $bdb11010cef70236$export$f680877a34711e37(id);
|
|
6
|
+
let labelId = $bdb11010cef70236$export$f680877a34711e37();
|
|
7
|
+
let labelProps = {};
|
|
8
|
+
if (label) {
|
|
9
|
+
ariaLabelledby = ariaLabelledby ? `${labelId} ${ariaLabelledby}` : labelId;
|
|
10
|
+
labelProps = {
|
|
11
|
+
id: labelId,
|
|
12
|
+
htmlFor: labelElementType === "label" ? id : void 0
|
|
13
|
+
};
|
|
14
|
+
} else if (!ariaLabelledby && !ariaLabel)
|
|
15
|
+
console.warn("If you do not provide a visible label, you must specify an aria-label or aria-labelledby attribute for accessibility");
|
|
16
|
+
let fieldProps = $313b98861ee5dd6c$export$d6875122194c7b44({
|
|
17
|
+
id,
|
|
18
|
+
"aria-label": ariaLabel,
|
|
19
|
+
"aria-labelledby": ariaLabelledby
|
|
20
|
+
});
|
|
21
|
+
return {
|
|
22
|
+
labelProps,
|
|
23
|
+
fieldProps
|
|
24
|
+
};
|
|
25
|
+
}
|
|
26
|
+
export {
|
|
27
|
+
$d191a55c9702f145$export$8467354a121f1b9f as $
|
|
28
|
+
};
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { e as $bdb11010cef70236$export$f680877a34711e37 } from "./utils-BsiH7-5Y.js";
|
|
2
|
+
function $313b98861ee5dd6c$export$d6875122194c7b44(props, defaultLabel) {
|
|
3
|
+
let { id, "aria-label": label, "aria-labelledby": labelledBy } = props;
|
|
4
|
+
id = $bdb11010cef70236$export$f680877a34711e37(id);
|
|
5
|
+
if (labelledBy && label) {
|
|
6
|
+
let ids = /* @__PURE__ */ new Set([
|
|
7
|
+
id,
|
|
8
|
+
...labelledBy.trim().split(/\s+/)
|
|
9
|
+
]);
|
|
10
|
+
labelledBy = [
|
|
11
|
+
...ids
|
|
12
|
+
].join(" ");
|
|
13
|
+
} else if (labelledBy)
|
|
14
|
+
labelledBy = labelledBy.trim().split(/\s+/).join(" ");
|
|
15
|
+
if (!label && !labelledBy && defaultLabel)
|
|
16
|
+
label = defaultLabel;
|
|
17
|
+
return {
|
|
18
|
+
id,
|
|
19
|
+
"aria-label": label,
|
|
20
|
+
"aria-labelledby": labelledBy
|
|
21
|
+
};
|
|
22
|
+
}
|
|
23
|
+
export {
|
|
24
|
+
$313b98861ee5dd6c$export$d6875122194c7b44 as $
|
|
25
|
+
};
|