@cptkokao/biletix-ui-kit 1.0.0 → 1.0.4-dev.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/index.d.ts +48 -1
- package/dist/index.esm.css +1 -1
- package/dist/index.esm.js +3290 -71
- package/dist/index.esm.js.map +1 -1
- package/package.json +4 -1
package/dist/index.esm.js
CHANGED
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
|
-
import { Root as Root$
|
|
2
|
+
import { Root as Root$5, Item as Item$1, Trigger as Trigger$3, Content as Content$3 } from '@radix-ui/react-accordion';
|
|
3
3
|
import * as React from 'react';
|
|
4
|
-
import React__default, { forwardRef, useState, useImperativeHandle } from 'react';
|
|
5
|
-
import IconCheck from '@shared/icons/checked.svg';
|
|
4
|
+
import React__default, { forwardRef, useState, useImperativeHandle, useLayoutEffect } from 'react';
|
|
6
5
|
|
|
7
|
-
var s$
|
|
6
|
+
var s$c = {"content":"styles-module_content__WKJF6"};
|
|
8
7
|
|
|
9
8
|
const Accordion = ({ itemClassName, items, ...props }) => {
|
|
10
|
-
return (jsx(Root$
|
|
9
|
+
return (jsx(Root$5, { ...props, children: items.map(({ triggerSlot, contentSlot, value }) => (jsxs(Item$1, { className: itemClassName, value: value, children: [jsx(Trigger$3, { asChild: true, children: triggerSlot }), jsx(Content$3, { className: s$c.content, children: jsx("div", { className: s$c.inner, children: contentSlot }) })] }, value))) }));
|
|
11
10
|
};
|
|
12
11
|
|
|
13
12
|
function getDefaultExportFromCjs (x) {
|
|
@@ -119,7 +118,7 @@ function requireLib () {
|
|
|
119
118
|
var libExports = requireLib();
|
|
120
119
|
var PhoneInput = /*@__PURE__*/getDefaultExportFromCjs(libExports);
|
|
121
120
|
|
|
122
|
-
var s$
|
|
121
|
+
var s$b = {"primary":"styles-module_primary__2julr","secondary":"styles-module_secondary__gROHS","large":"styles-module_large__H3pFl","input":"styles-module_input__Ld3tZ","big":"styles-module_big__7pz1J","medium":"styles-module_medium__t6INL","small":"styles-module_small__uRhwP","wrapper":"styles-module_wrapper__u8Nqe","error":"styles-module_error__IAdJu","inputWrapper":"styles-module_inputWrapper__cT5Sf","disabled":"styles-module_disabled__rsyOU","placeholder":"styles-module_placeholder__Nlw6Y","label":"styles-module_label__-rV9d","tooltip":"styles-module_tooltip__0zbuC","inputPhone":"styles-module_inputPhone__2r-IM","info":"styles-module_info__TsNHQ","errorText":"styles-module_errorText__2T1me","fadeIn":"styles-module_fadeIn__YucVP","hintText":"styles-module_hintText__Oy-6x","dropdown":"styles-module_dropdown__LCsW-"};
|
|
123
122
|
|
|
124
123
|
const InputPhone = ({ size = "small", theme = "primary", disabled, tooltip, label, icon, isError = false, isHint = false, error, hint, placeholder, placeholderSelection, wrapperClassName, dropdownClassName, labelClassName, className, style, onValidate, onBlur, ref, ...props }) => {
|
|
125
124
|
const validate = (value, data) => {
|
|
@@ -135,32 +134,47 @@ const InputPhone = ({ size = "small", theme = "primary", disabled, tooltip, labe
|
|
|
135
134
|
}
|
|
136
135
|
}, 0);
|
|
137
136
|
};
|
|
138
|
-
return (jsxs("div", { style: style, className: cn(s$
|
|
139
|
-
className: cn(s$
|
|
137
|
+
return (jsxs("div", { style: style, className: cn(s$b.wrapper, wrapperClassName, s$b[size], s$b[theme], { [s$b.error]: isError }, { [s$b.disabled]: disabled }), children: [label && jsx("span", { className: s$b.label, children: label }), tooltip && jsx("div", { className: s$b.tooltip, children: tooltip }), jsxs("label", { ref: ref, className: cn(s$b.inputWrapper, labelClassName), children: [icon, placeholder && jsx("span", { className: s$b.placeholder, children: placeholder }), jsx(PhoneInput, { country: "ru", containerClass: s$b.inputPhone, inputProps: {
|
|
138
|
+
className: cn(s$b.input, className),
|
|
140
139
|
disabled,
|
|
141
140
|
placeholder: placeholderSelection,
|
|
142
|
-
}, dropdownClass: cn(s$
|
|
141
|
+
}, dropdownClass: cn(s$b.dropdown, dropdownClassName), onMount: (e, data) => validate(e, data), onBlur: (e, data) => {
|
|
143
142
|
validate(e.currentTarget.value, data);
|
|
144
143
|
onBlur?.(e, data);
|
|
145
|
-
}, ...props })] }), jsxs("div", { className: s$
|
|
144
|
+
}, ...props })] }), jsxs("div", { className: s$b.info, children: [error && isError && jsx("span", { className: s$b.errorText, children: error }), hint && isHint && jsx("span", { className: s$b.hintText, children: hint })] })] }));
|
|
146
145
|
};
|
|
147
146
|
|
|
148
|
-
var s$
|
|
147
|
+
var s$a = {"medium":"styles-module_medium__UPwU3","small":"styles-module_small__3V02-","micro":"styles-module_micro__gCw8Y","nano":"styles-module_nano__wvp9X","pink":"styles-module_pink__buQ-1","blue":"styles-module_blue__VqTWP","blue-dark":"styles-module_blue-dark__-HQiq","pink-strong":"styles-module_pink-strong__1Er7k","green":"styles-module_green__kJCWD","orange":"styles-module_orange__YY5wt","negative":"styles-module_negative__btzCe","outline":"styles-module_outline__uJQmO","wrapper":"styles-module_wrapper__BuUK1","placeholder":"styles-module_placeholder__Q056N"};
|
|
149
148
|
|
|
150
149
|
const Badge = ({ text, iconStart, iconEnd, theme = 'blue', size = 'small', className, evenly = false, ...props }) => {
|
|
151
|
-
return (jsxs("span", { className: cn(s$
|
|
150
|
+
return (jsxs("span", { className: cn(s$a.wrapper, s$a[theme], s$a[size], className), ...props, children: [evenly && iconEnd && !iconStart ? jsx("div", { className: s$a.placeholder }) : null, iconStart, text, iconEnd, evenly && iconStart && !iconEnd ? jsx("div", { className: s$a.placeholder }) : null] }));
|
|
152
151
|
};
|
|
153
152
|
|
|
154
|
-
var s$
|
|
153
|
+
var s$9 = {"primary":"styles-module_primary__TRNPt","secondary":"styles-module_secondary__QKgly","tertiary":"styles-module_tertiary__wTxw3","clean":"styles-module_clean__qj08M","clean-outline":"styles-module_clean-outline__FMOLG","large":"styles-module_large__S6Yb5","extra-big":"styles-module_extra-big__KOoAv","big":"styles-module_big__pPMzh","medium":"styles-module_medium__XYUXp","small":"styles-module_small__2DhLR","fill":"styles-module_fill__pflr0","content":"styles-module_content__625YX","button":"styles-module_button__Sh-fr","placeholder":"styles-module_placeholder__w8cg4"};
|
|
155
154
|
|
|
156
155
|
const Button = ({ text, theme = 'primary', iconStart, iconEnd, size = 'large', mode = 'content', className, type, evenly = false, ...props }) => {
|
|
157
|
-
return (jsxs("button", { type: type || 'button', className: cn(s$
|
|
156
|
+
return (jsxs("button", { type: type || 'button', className: cn(s$9.button, s$9[mode], s$9[size], s$9[theme], className), ...props, children: [evenly && iconEnd && !iconStart ? jsx("div", { className: s$9.placeholder }) : null, iconStart, text, iconEnd, evenly && iconStart && !iconEnd ? jsx("div", { className: s$9.placeholder }) : null] }));
|
|
158
157
|
};
|
|
159
158
|
|
|
160
|
-
var
|
|
159
|
+
var _path$1;
|
|
160
|
+
function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
|
|
161
|
+
var SvgChecked = function SvgChecked(props) {
|
|
162
|
+
return /*#__PURE__*/React.createElement("svg", _extends$1({
|
|
163
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
164
|
+
fill: "none",
|
|
165
|
+
viewBox: "0 0 20 15"
|
|
166
|
+
}, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
|
|
167
|
+
fill: "currentColor",
|
|
168
|
+
fillRule: "evenodd",
|
|
169
|
+
d: "M19.637.86c.484.479.484 1.256 0 1.735L7.95 14.14a1.25 1.25 0 0 1-1.756 0L.363 8.366a1.217 1.217 0 0 1 .001-1.735 1.25 1.25 0 0 1 1.755.001l4.955 4.905L17.882.859a1.25 1.25 0 0 1 1.755 0",
|
|
170
|
+
clipRule: "evenodd"
|
|
171
|
+
})));
|
|
172
|
+
};
|
|
173
|
+
|
|
174
|
+
var s$8 = {"primary":"styles-module_primary__PmTHC","secondary":"styles-module_secondary__GcHma","big":"styles-module_big__xhDV-","medium":"styles-module_medium__Hhm6z","small":"styles-module_small__J8XMv","wrapper":"styles-module_wrapper__eOB0O","checkbox":"styles-module_checkbox__AVGTi"};
|
|
161
175
|
|
|
162
176
|
const Checkbox = forwardRef(({ theme = "primary", size = "big", label, wrapperClassName, className, ...props }, ref) => {
|
|
163
|
-
return (jsxs("label", { ref: ref, "data-state": !!props.checked ? "checked" : undefined, className: cn(s$
|
|
177
|
+
return (jsxs("label", { ref: ref, "data-state": !!props.checked ? "checked" : undefined, className: cn(s$8.wrapper, s$8[theme], s$8[size], wrapperClassName), children: [jsx("input", { type: "checkbox", ...props }), jsx("div", { className: cn(s$8.checkbox, className), children: jsx(SvgChecked, {}) }), label] }));
|
|
164
178
|
});
|
|
165
179
|
|
|
166
180
|
// src/primitive.tsx
|
|
@@ -1110,6 +1124,15 @@ function createSlotClone(ownerName) {
|
|
|
1110
1124
|
return SlotClone;
|
|
1111
1125
|
}
|
|
1112
1126
|
var SLOTTABLE_IDENTIFIER = Symbol("radix.slottable");
|
|
1127
|
+
// @__NO_SIDE_EFFECTS__
|
|
1128
|
+
function createSlottable(ownerName) {
|
|
1129
|
+
const Slottable2 = ({ children }) => {
|
|
1130
|
+
return /* @__PURE__ */ jsx(Fragment, { children });
|
|
1131
|
+
};
|
|
1132
|
+
Slottable2.displayName = `${ownerName}.Slottable`;
|
|
1133
|
+
Slottable2.__radixId = SLOTTABLE_IDENTIFIER;
|
|
1134
|
+
return Slottable2;
|
|
1135
|
+
}
|
|
1113
1136
|
function isSlottable(child) {
|
|
1114
1137
|
return React.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
|
|
1115
1138
|
}
|
|
@@ -1613,15 +1636,15 @@ function removeLinks(items) {
|
|
|
1613
1636
|
return items.filter((item) => item.tagName !== "A");
|
|
1614
1637
|
}
|
|
1615
1638
|
|
|
1616
|
-
var PORTAL_NAME$
|
|
1617
|
-
var Portal$
|
|
1639
|
+
var PORTAL_NAME$2 = "Portal";
|
|
1640
|
+
var Portal$2 = React.forwardRef((props, forwardedRef) => {
|
|
1618
1641
|
const { container: containerProp, ...portalProps } = props;
|
|
1619
1642
|
const [mounted, setMounted] = React.useState(false);
|
|
1620
1643
|
useLayoutEffect2(() => setMounted(true), []);
|
|
1621
1644
|
const container = containerProp || mounted && globalThis?.document?.body;
|
|
1622
1645
|
return container ? ReactDOM.createPortal(/* @__PURE__ */ jsx(Primitive.div, { ...portalProps, ref: forwardedRef }), container) : null;
|
|
1623
1646
|
});
|
|
1624
|
-
Portal$
|
|
1647
|
+
Portal$2.displayName = PORTAL_NAME$2;
|
|
1625
1648
|
|
|
1626
1649
|
function useStateMachine(initialState, machine) {
|
|
1627
1650
|
return React.useReducer((state, event) => {
|
|
@@ -2706,11 +2729,11 @@ var Dialog$1 = (props) => {
|
|
|
2706
2729
|
);
|
|
2707
2730
|
};
|
|
2708
2731
|
Dialog$1.displayName = DIALOG_NAME;
|
|
2709
|
-
var TRIGGER_NAME$
|
|
2732
|
+
var TRIGGER_NAME$2 = "DialogTrigger";
|
|
2710
2733
|
var DialogTrigger = React.forwardRef(
|
|
2711
2734
|
(props, forwardedRef) => {
|
|
2712
2735
|
const { __scopeDialog, ...triggerProps } = props;
|
|
2713
|
-
const context = useDialogContext(TRIGGER_NAME$
|
|
2736
|
+
const context = useDialogContext(TRIGGER_NAME$2, __scopeDialog);
|
|
2714
2737
|
const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);
|
|
2715
2738
|
return /* @__PURE__ */ jsx(
|
|
2716
2739
|
Primitive.button,
|
|
@@ -2727,21 +2750,21 @@ var DialogTrigger = React.forwardRef(
|
|
|
2727
2750
|
);
|
|
2728
2751
|
}
|
|
2729
2752
|
);
|
|
2730
|
-
DialogTrigger.displayName = TRIGGER_NAME$
|
|
2731
|
-
var PORTAL_NAME = "DialogPortal";
|
|
2732
|
-
var [PortalProvider, usePortalContext] = createDialogContext(PORTAL_NAME, {
|
|
2753
|
+
DialogTrigger.displayName = TRIGGER_NAME$2;
|
|
2754
|
+
var PORTAL_NAME$1 = "DialogPortal";
|
|
2755
|
+
var [PortalProvider$1, usePortalContext$1] = createDialogContext(PORTAL_NAME$1, {
|
|
2733
2756
|
forceMount: void 0
|
|
2734
2757
|
});
|
|
2735
2758
|
var DialogPortal = (props) => {
|
|
2736
2759
|
const { __scopeDialog, forceMount, children, container } = props;
|
|
2737
|
-
const context = useDialogContext(PORTAL_NAME, __scopeDialog);
|
|
2738
|
-
return /* @__PURE__ */ jsx(PortalProvider, { scope: __scopeDialog, forceMount, children: React.Children.map(children, (child) => /* @__PURE__ */ jsx(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx(Portal$
|
|
2760
|
+
const context = useDialogContext(PORTAL_NAME$1, __scopeDialog);
|
|
2761
|
+
return /* @__PURE__ */ jsx(PortalProvider$1, { scope: __scopeDialog, forceMount, children: React.Children.map(children, (child) => /* @__PURE__ */ jsx(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx(Portal$2, { asChild: true, container, children: child }) })) });
|
|
2739
2762
|
};
|
|
2740
|
-
DialogPortal.displayName = PORTAL_NAME;
|
|
2763
|
+
DialogPortal.displayName = PORTAL_NAME$1;
|
|
2741
2764
|
var OVERLAY_NAME = "DialogOverlay";
|
|
2742
2765
|
var DialogOverlay = React.forwardRef(
|
|
2743
2766
|
(props, forwardedRef) => {
|
|
2744
|
-
const portalContext = usePortalContext(OVERLAY_NAME, props.__scopeDialog);
|
|
2767
|
+
const portalContext = usePortalContext$1(OVERLAY_NAME, props.__scopeDialog);
|
|
2745
2768
|
const { forceMount = portalContext.forceMount, ...overlayProps } = props;
|
|
2746
2769
|
const context = useDialogContext(OVERLAY_NAME, props.__scopeDialog);
|
|
2747
2770
|
return context.modal ? /* @__PURE__ */ jsx(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx(DialogOverlayImpl, { ...overlayProps, ref: forwardedRef }) }) : null;
|
|
@@ -2768,19 +2791,19 @@ var DialogOverlayImpl = React.forwardRef(
|
|
|
2768
2791
|
);
|
|
2769
2792
|
}
|
|
2770
2793
|
);
|
|
2771
|
-
var CONTENT_NAME$
|
|
2794
|
+
var CONTENT_NAME$3 = "DialogContent";
|
|
2772
2795
|
var DialogContent = React.forwardRef(
|
|
2773
2796
|
(props, forwardedRef) => {
|
|
2774
|
-
const portalContext = usePortalContext(CONTENT_NAME$
|
|
2797
|
+
const portalContext = usePortalContext$1(CONTENT_NAME$3, props.__scopeDialog);
|
|
2775
2798
|
const { forceMount = portalContext.forceMount, ...contentProps } = props;
|
|
2776
|
-
const context = useDialogContext(CONTENT_NAME$
|
|
2799
|
+
const context = useDialogContext(CONTENT_NAME$3, props.__scopeDialog);
|
|
2777
2800
|
return /* @__PURE__ */ jsx(Presence, { present: forceMount || context.open, children: context.modal ? /* @__PURE__ */ jsx(DialogContentModal, { ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ jsx(DialogContentNonModal, { ...contentProps, ref: forwardedRef }) });
|
|
2778
2801
|
}
|
|
2779
2802
|
);
|
|
2780
|
-
DialogContent.displayName = CONTENT_NAME$
|
|
2803
|
+
DialogContent.displayName = CONTENT_NAME$3;
|
|
2781
2804
|
var DialogContentModal = React.forwardRef(
|
|
2782
2805
|
(props, forwardedRef) => {
|
|
2783
|
-
const context = useDialogContext(CONTENT_NAME$
|
|
2806
|
+
const context = useDialogContext(CONTENT_NAME$3, props.__scopeDialog);
|
|
2784
2807
|
const contentRef = React.useRef(null);
|
|
2785
2808
|
const composedRefs = useComposedRefs(forwardedRef, context.contentRef, contentRef);
|
|
2786
2809
|
React.useEffect(() => {
|
|
@@ -2814,7 +2837,7 @@ var DialogContentModal = React.forwardRef(
|
|
|
2814
2837
|
);
|
|
2815
2838
|
var DialogContentNonModal = React.forwardRef(
|
|
2816
2839
|
(props, forwardedRef) => {
|
|
2817
|
-
const context = useDialogContext(CONTENT_NAME$
|
|
2840
|
+
const context = useDialogContext(CONTENT_NAME$3, props.__scopeDialog);
|
|
2818
2841
|
const hasInteractedOutsideRef = React.useRef(false);
|
|
2819
2842
|
const hasPointerDownOutsideRef = React.useRef(false);
|
|
2820
2843
|
return /* @__PURE__ */ jsx(
|
|
@@ -2855,7 +2878,7 @@ var DialogContentNonModal = React.forwardRef(
|
|
|
2855
2878
|
var DialogContentImpl = React.forwardRef(
|
|
2856
2879
|
(props, forwardedRef) => {
|
|
2857
2880
|
const { __scopeDialog, trapFocus, onOpenAutoFocus, onCloseAutoFocus, ...contentProps } = props;
|
|
2858
|
-
const context = useDialogContext(CONTENT_NAME$
|
|
2881
|
+
const context = useDialogContext(CONTENT_NAME$3, __scopeDialog);
|
|
2859
2882
|
const contentRef = React.useRef(null);
|
|
2860
2883
|
const composedRefs = useComposedRefs(forwardedRef, contentRef);
|
|
2861
2884
|
useFocusGuards();
|
|
@@ -2930,7 +2953,7 @@ function getState$1(open) {
|
|
|
2930
2953
|
}
|
|
2931
2954
|
var TITLE_WARNING_NAME = "DialogTitleWarning";
|
|
2932
2955
|
var [WarningProvider, useWarningContext] = createContext2(TITLE_WARNING_NAME, {
|
|
2933
|
-
contentName: CONTENT_NAME$
|
|
2956
|
+
contentName: CONTENT_NAME$3,
|
|
2934
2957
|
titleName: TITLE_NAME,
|
|
2935
2958
|
docsSlug: "dialog"
|
|
2936
2959
|
});
|
|
@@ -2962,16 +2985,16 @@ var DescriptionWarning = ({ contentRef, descriptionId }) => {
|
|
|
2962
2985
|
}, [MESSAGE, contentRef, descriptionId]);
|
|
2963
2986
|
return null;
|
|
2964
2987
|
};
|
|
2965
|
-
var Root$
|
|
2966
|
-
var Trigger$
|
|
2967
|
-
var Portal = DialogPortal;
|
|
2988
|
+
var Root$4 = Dialog$1;
|
|
2989
|
+
var Trigger$2 = DialogTrigger;
|
|
2990
|
+
var Portal$1 = DialogPortal;
|
|
2968
2991
|
var Overlay = DialogOverlay;
|
|
2969
|
-
var Content$
|
|
2992
|
+
var Content$2 = DialogContent;
|
|
2970
2993
|
var Title = DialogTitle;
|
|
2971
2994
|
var Description = DialogDescription;
|
|
2972
2995
|
var Close = DialogClose;
|
|
2973
2996
|
|
|
2974
|
-
var s$
|
|
2997
|
+
var s$7 = {"overlay":"styles-module_overlay__TlEXp","content":"styles-module_content__lbaYQ","offAutoResponse":"styles-module_offAutoResponse__yfLDj","header":"styles-module_header__kDAb-","title":"styles-module_title__1--Ss","empty":"styles-module_empty__WNgjM","close":"styles-module_close__9tjJt","shadow":"styles-module_shadow__2UZ5C","description":"styles-module_description__-iPkH"};
|
|
2975
2998
|
|
|
2976
2999
|
const Dialog = forwardRef(({ autoResponse = true, title, triggerSlot, closeSlot, contentSlot, side = "center", easing = "overshoot-firm", overlayClassName, contentClassName, headerClassName, open = false, defaultOpen, onOpenChange, ...props }, ref) => {
|
|
2977
3000
|
// const isTablet = useMediaQuery("(max-width: 745px)");
|
|
@@ -2981,10 +3004,10 @@ const Dialog = forwardRef(({ autoResponse = true, title, triggerSlot, closeSlot,
|
|
|
2981
3004
|
onOpenChange?.(state);
|
|
2982
3005
|
};
|
|
2983
3006
|
useImperativeHandle(ref, () => ({ onToggle: handleOpenChange }), []);
|
|
2984
|
-
return (jsxs(Root$
|
|
3007
|
+
return (jsxs(Root$4, { open: defaultOpen || isOpen, onOpenChange: handleOpenChange, ...props, children: [jsx(Trigger$2, { asChild: true, children: triggerSlot }), jsxs(Portal$1, { children: [jsx(Overlay, { className: cn(s$7.overlay, overlayClassName) }), jsxs(Content$2, { onOpenAutoFocus: (e) => e.preventDefault(), className: cn(s$7.content, { [s$7.offAutoResponse]: !autoResponse },
|
|
2985
3008
|
// s[isTablet && autoResponse ? "bottom" : side],
|
|
2986
3009
|
// s[isTablet && autoResponse ? "spring-glide" : easing],
|
|
2987
|
-
contentClassName), children: [jsx(Description, { className: s$
|
|
3010
|
+
contentClassName), children: [jsx(Description, { className: s$7.description, children: "Dialog description" }), jsxs("div", { className: cn(s$7.header, headerClassName), children: [jsx(Title, { className: cn(s$7.title, { [s$7.empty]: !title }), children: title || "Dialog title" }), jsx(Close, { asChild: true, children: jsxs("div", { className: s$7.close, children: [jsx("span", { className: s$7.shadow }), closeSlot] }) })] }), contentSlot] })] })] }));
|
|
2988
3011
|
});
|
|
2989
3012
|
|
|
2990
3013
|
/** Checks if value is string */
|
|
@@ -7952,10 +7975,10 @@ const IMaskInputFn = (props, ref) => React__default.createElement(IMaskInputClas
|
|
|
7952
7975
|
;
|
|
7953
7976
|
const IMaskInput = React__default.forwardRef(IMaskInputFn);
|
|
7954
7977
|
|
|
7955
|
-
var s$
|
|
7978
|
+
var s$6 = {"primary":"styles-module_primary__OVXIt","secondary":"styles-module_secondary__u34zy","large":"styles-module_large__ZDNNN","input":"styles-module_input__KRJnF","big":"styles-module_big__CtmSH","medium":"styles-module_medium__OGjLF","small":"styles-module_small__WcpZK","wrapper":"styles-module_wrapper__JTZMt","error":"styles-module_error__UCrFp","inputWrapper":"styles-module_inputWrapper__6vUdk","disabled":"styles-module_disabled__NjJFs","placeholder":"styles-module_placeholder__QPTVO","label":"styles-module_label__-uPCz","tooltip":"styles-module_tooltip__kRtiD","info":"styles-module_info__vyky8","errorText":"styles-module_errorText__JTsOi","fadeIn":"styles-module_fadeIn__sXaJE","hintText":"styles-module_hintText__f8Dok"};
|
|
7956
7979
|
|
|
7957
7980
|
const Input = forwardRef(({ size = "small", theme = "primary", disabled, tooltip, label, icon, isError = false, isHint = false, error, hint, placeholder, placeholderSelection, wrapperClassName, labelClassName, className, style, ...props }, ref) => {
|
|
7958
|
-
return (jsxs("div", { style: style, className: cn(s$
|
|
7981
|
+
return (jsxs("div", { style: style, className: cn(s$6.wrapper, wrapperClassName, s$6[size], s$6[theme], { [s$6.error]: isError }, { [s$6.disabled]: disabled }), children: [label && jsx("span", { className: s$6.label, children: label }), tooltip && jsx("div", { className: s$6.tooltip, children: tooltip }), jsxs("label", { ref: ref, className: cn(s$6.inputWrapper, labelClassName), children: [icon, placeholder && jsx("span", { className: s$6.placeholder, children: placeholder }), !!props.mask ? (jsx(IMaskInput, { className: cn(s$6.input, className), placeholder: placeholderSelection, disabled: disabled, ...props })) : (jsx("input", { className: cn(s$6.input, className), placeholder: placeholderSelection, disabled: disabled, ...props }))] }), jsxs("div", { className: s$6.info, children: [error && isError && jsx("span", { className: s$6.errorText, children: error }), hint && isHint && jsx("span", { className: s$6.hintText, children: hint })] })] }));
|
|
7959
7982
|
});
|
|
7960
7983
|
|
|
7961
7984
|
var _path;
|
|
@@ -7971,10 +7994,10 @@ var SvgAirplaneBold = function SvgAirplaneBold(props) {
|
|
|
7971
7994
|
})));
|
|
7972
7995
|
};
|
|
7973
7996
|
|
|
7974
|
-
var s$
|
|
7997
|
+
var s$5 = {"loader":"styles-module_loader__MAx2e","track":"styles-module_track__45nAe"};
|
|
7975
7998
|
|
|
7976
7999
|
const Loader = ({ className, ...props }) => {
|
|
7977
|
-
return (jsx("span", { className: cn(s$
|
|
8000
|
+
return (jsx("span", { className: cn(s$5.loader, className), ...props, children: jsx("span", { className: s$5.track, children: jsx(SvgAirplaneBold, {}) }) }));
|
|
7978
8001
|
};
|
|
7979
8002
|
|
|
7980
8003
|
const Spinner = ({ className, ...props }) => {
|
|
@@ -8167,13 +8190,13 @@ SwitchBubbleInput.displayName = BUBBLE_INPUT_NAME;
|
|
|
8167
8190
|
function getState(checked) {
|
|
8168
8191
|
return checked ? "checked" : "unchecked";
|
|
8169
8192
|
}
|
|
8170
|
-
var Root$
|
|
8193
|
+
var Root$3 = Switch$1;
|
|
8171
8194
|
var Thumb = SwitchThumb;
|
|
8172
8195
|
|
|
8173
|
-
var s$
|
|
8196
|
+
var s$4 = {"primary":"styles-module_primary__lh9Bl","secondary":"styles-module_secondary__yyu2w","wrapper":"styles-module_wrapper__w4zOf","thumb":"styles-module_thumb__5Kt7f"};
|
|
8174
8197
|
|
|
8175
8198
|
const Switch = ({ theme = 'primary', className, ...props }) => {
|
|
8176
|
-
return (jsx(Root$
|
|
8199
|
+
return (jsx(Root$3, { className: cn(s$4.wrapper, s$4[theme], className), ...props, children: jsx(Thumb, { className: s$4.thumb }) }));
|
|
8177
8200
|
};
|
|
8178
8201
|
|
|
8179
8202
|
function createCollection(name) {
|
|
@@ -8351,7 +8374,7 @@ var RovingFocusGroupImpl = React.forwardRef((props, forwardedRef) => {
|
|
|
8351
8374
|
}
|
|
8352
8375
|
);
|
|
8353
8376
|
});
|
|
8354
|
-
var ITEM_NAME = "RovingFocusGroupItem";
|
|
8377
|
+
var ITEM_NAME$1 = "RovingFocusGroupItem";
|
|
8355
8378
|
var RovingFocusGroupItem = React.forwardRef(
|
|
8356
8379
|
(props, forwardedRef) => {
|
|
8357
8380
|
const {
|
|
@@ -8364,7 +8387,7 @@ var RovingFocusGroupItem = React.forwardRef(
|
|
|
8364
8387
|
} = props;
|
|
8365
8388
|
const autoId = useId();
|
|
8366
8389
|
const id = tabStopId || autoId;
|
|
8367
|
-
const context = useRovingFocusContext(ITEM_NAME, __scopeRovingFocusGroup);
|
|
8390
|
+
const context = useRovingFocusContext(ITEM_NAME$1, __scopeRovingFocusGroup);
|
|
8368
8391
|
const isCurrentTabStop = context.currentTabStopId === id;
|
|
8369
8392
|
const getItems = useCollection(__scopeRovingFocusGroup);
|
|
8370
8393
|
const { onFocusableItemAdd, onFocusableItemRemove, currentTabStopId } = context;
|
|
@@ -8421,7 +8444,7 @@ var RovingFocusGroupItem = React.forwardRef(
|
|
|
8421
8444
|
);
|
|
8422
8445
|
}
|
|
8423
8446
|
);
|
|
8424
|
-
RovingFocusGroupItem.displayName = ITEM_NAME;
|
|
8447
|
+
RovingFocusGroupItem.displayName = ITEM_NAME$1;
|
|
8425
8448
|
var MAP_KEY_TO_FOCUS_INTENT = {
|
|
8426
8449
|
ArrowLeft: "prev",
|
|
8427
8450
|
ArrowUp: "prev",
|
|
@@ -8453,14 +8476,14 @@ function focusFirst(candidates, preventScroll = false) {
|
|
|
8453
8476
|
function wrapArray(array, startIndex) {
|
|
8454
8477
|
return array.map((_, index) => array[(startIndex + index) % array.length]);
|
|
8455
8478
|
}
|
|
8456
|
-
var Root = RovingFocusGroup;
|
|
8479
|
+
var Root$2 = RovingFocusGroup;
|
|
8457
8480
|
var Item = RovingFocusGroupItem;
|
|
8458
8481
|
|
|
8459
8482
|
var TABS_NAME = "Tabs";
|
|
8460
8483
|
var [createTabsContext] = createContextScope(TABS_NAME, [
|
|
8461
8484
|
createRovingFocusGroupScope
|
|
8462
8485
|
]);
|
|
8463
|
-
var useRovingFocusGroupScope = createRovingFocusGroupScope();
|
|
8486
|
+
var useRovingFocusGroupScope$1 = createRovingFocusGroupScope();
|
|
8464
8487
|
var [TabsProvider, useTabsContext] = createTabsContext(TABS_NAME);
|
|
8465
8488
|
var Tabs$1 = React.forwardRef(
|
|
8466
8489
|
(props, forwardedRef) => {
|
|
@@ -8510,9 +8533,9 @@ var TabsList = React.forwardRef(
|
|
|
8510
8533
|
(props, forwardedRef) => {
|
|
8511
8534
|
const { __scopeTabs, loop = true, ...listProps } = props;
|
|
8512
8535
|
const context = useTabsContext(TAB_LIST_NAME, __scopeTabs);
|
|
8513
|
-
const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs);
|
|
8536
|
+
const rovingFocusGroupScope = useRovingFocusGroupScope$1(__scopeTabs);
|
|
8514
8537
|
return /* @__PURE__ */ jsx(
|
|
8515
|
-
Root,
|
|
8538
|
+
Root$2,
|
|
8516
8539
|
{
|
|
8517
8540
|
asChild: true,
|
|
8518
8541
|
...rovingFocusGroupScope,
|
|
@@ -8533,12 +8556,12 @@ var TabsList = React.forwardRef(
|
|
|
8533
8556
|
}
|
|
8534
8557
|
);
|
|
8535
8558
|
TabsList.displayName = TAB_LIST_NAME;
|
|
8536
|
-
var TRIGGER_NAME = "TabsTrigger";
|
|
8559
|
+
var TRIGGER_NAME$1 = "TabsTrigger";
|
|
8537
8560
|
var TabsTrigger = React.forwardRef(
|
|
8538
8561
|
(props, forwardedRef) => {
|
|
8539
8562
|
const { __scopeTabs, value, disabled = false, ...triggerProps } = props;
|
|
8540
|
-
const context = useTabsContext(TRIGGER_NAME, __scopeTabs);
|
|
8541
|
-
const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs);
|
|
8563
|
+
const context = useTabsContext(TRIGGER_NAME$1, __scopeTabs);
|
|
8564
|
+
const rovingFocusGroupScope = useRovingFocusGroupScope$1(__scopeTabs);
|
|
8542
8565
|
const triggerId = makeTriggerId(context.baseId, value);
|
|
8543
8566
|
const contentId = makeContentId(context.baseId, value);
|
|
8544
8567
|
const isSelected = value === context.value;
|
|
@@ -8584,12 +8607,12 @@ var TabsTrigger = React.forwardRef(
|
|
|
8584
8607
|
);
|
|
8585
8608
|
}
|
|
8586
8609
|
);
|
|
8587
|
-
TabsTrigger.displayName = TRIGGER_NAME;
|
|
8588
|
-
var CONTENT_NAME = "TabsContent";
|
|
8610
|
+
TabsTrigger.displayName = TRIGGER_NAME$1;
|
|
8611
|
+
var CONTENT_NAME$2 = "TabsContent";
|
|
8589
8612
|
var TabsContent = React.forwardRef(
|
|
8590
8613
|
(props, forwardedRef) => {
|
|
8591
8614
|
const { __scopeTabs, value, forceMount, children, ...contentProps } = props;
|
|
8592
|
-
const context = useTabsContext(CONTENT_NAME, __scopeTabs);
|
|
8615
|
+
const context = useTabsContext(CONTENT_NAME$2, __scopeTabs);
|
|
8593
8616
|
const triggerId = makeTriggerId(context.baseId, value);
|
|
8594
8617
|
const contentId = makeContentId(context.baseId, value);
|
|
8595
8618
|
const isSelected = value === context.value;
|
|
@@ -8619,27 +8642,3223 @@ var TabsContent = React.forwardRef(
|
|
|
8619
8642
|
) });
|
|
8620
8643
|
}
|
|
8621
8644
|
);
|
|
8622
|
-
TabsContent.displayName = CONTENT_NAME;
|
|
8645
|
+
TabsContent.displayName = CONTENT_NAME$2;
|
|
8623
8646
|
function makeTriggerId(baseId, value) {
|
|
8624
8647
|
return `${baseId}-trigger-${value}`;
|
|
8625
8648
|
}
|
|
8626
8649
|
function makeContentId(baseId, value) {
|
|
8627
8650
|
return `${baseId}-content-${value}`;
|
|
8628
8651
|
}
|
|
8629
|
-
var Root2 = Tabs$1;
|
|
8652
|
+
var Root2$2 = Tabs$1;
|
|
8630
8653
|
var List = TabsList;
|
|
8631
|
-
var Trigger = TabsTrigger;
|
|
8632
|
-
var Content = TabsContent;
|
|
8654
|
+
var Trigger$1 = TabsTrigger;
|
|
8655
|
+
var Content$1 = TabsContent;
|
|
8633
8656
|
|
|
8634
8657
|
const Tabs = ({ triggerSlotItems, contentSlotItems, listClassName, ...props }) => {
|
|
8635
|
-
return (jsxs(Root2, { ...props, children: [jsx(List, { className: listClassName, children: triggerSlotItems.map(({ triggerSlot, ...props }, i) => (jsx(Trigger, { ...props, children: triggerSlot }, i))) }), contentSlotItems.map(({ contentSlot, ...props }, i) => (jsx(Content, { ...props, children: contentSlot }, i)))] }));
|
|
8658
|
+
return (jsxs(Root2$2, { ...props, children: [jsx(List, { className: listClassName, children: triggerSlotItems.map(({ triggerSlot, ...props }, i) => (jsx(Trigger$1, { ...props, children: triggerSlot }, i))) }), contentSlotItems.map(({ contentSlot, ...props }, i) => (jsx(Content$1, { ...props, children: contentSlot }, i)))] }));
|
|
8636
8659
|
};
|
|
8637
8660
|
|
|
8638
|
-
var s = {"medium":"styles-module_medium__RRybo","small":"styles-module_small__-S8Nq","micro":"styles-module_micro__9kvUU","wrapper":"styles-module_wrapper__JZfQn"};
|
|
8661
|
+
var s$3 = {"medium":"styles-module_medium__RRybo","small":"styles-module_small__-S8Nq","micro":"styles-module_micro__9kvUU","wrapper":"styles-module_wrapper__JZfQn"};
|
|
8639
8662
|
|
|
8640
8663
|
const Tag = ({ text, iconStart, iconEnd, size = 'small', className, ...props }) => {
|
|
8641
|
-
return (jsxs("span", { className: cn(s.wrapper, s[size], className), ...props, children: [iconStart, text, iconEnd] }));
|
|
8664
|
+
return (jsxs("span", { className: cn(s$3.wrapper, s$3[size], className), ...props, children: [iconStart, text, iconEnd] }));
|
|
8665
|
+
};
|
|
8666
|
+
|
|
8667
|
+
var s$2 = {"large":"styles-module_large__oVXBS","textarea":"styles-module_textarea__LmnbQ","big":"styles-module_big__grLUK","medium":"styles-module_medium__QdQUg","small":"styles-module_small__vfL-j","wrapper":"styles-module_wrapper__ZP4wb","error":"styles-module_error__h9V4X","inputWrapper":"styles-module_inputWrapper__nCXOq","disabled":"styles-module_disabled__Vntvl","placeholder":"styles-module_placeholder__9GVi4","label":"styles-module_label__xONj0","tooltip":"styles-module_tooltip__ATNB7","options":"styles-module_options__Pe0iF","info":"styles-module_info__KVB-D","errorText":"styles-module_errorText__RI-rl","fadeIn":"styles-module_fadeIn__OIqgw","hintText":"styles-module_hintText__UAYjp"};
|
|
8668
|
+
|
|
8669
|
+
const Textarea = forwardRef(({ size = 'small', disabled, tooltip, label, icon, isError = false, isHint = false, error, hint, placeholder, placeholderSelection, wrapperClassName, labelClassName, className, style, ...props }, ref) => {
|
|
8670
|
+
return (jsxs("div", { style: style, className: cn(s$2.wrapper, wrapperClassName, s$2[size], { [s$2.error]: isError }, { [s$2.disabled]: disabled }), children: [label && jsx("span", { className: s$2.label, children: label }), tooltip && jsx("div", { className: s$2.tooltip }), jsxs("label", { ref: ref, className: cn(s$2.inputWrapper, labelClassName), children: [icon, placeholder && jsx("span", { className: s$2.placeholder, children: placeholder }), jsx("textarea", { className: cn(s$2.textarea, className), placeholder: placeholderSelection, disabled: disabled, ...props }), jsx("div", { className: s$2.options })] }), jsxs("div", { className: s$2.info, children: [error && isError && jsx("span", { className: s$2.errorText, children: error }), hint && isHint && jsx("span", { className: s$2.hintText, children: hint })] })] }));
|
|
8671
|
+
});
|
|
8672
|
+
|
|
8673
|
+
var NAME$2 = "Toggle";
|
|
8674
|
+
var Toggle$1 = React.forwardRef((props, forwardedRef) => {
|
|
8675
|
+
const { pressed: pressedProp, defaultPressed, onPressedChange, ...buttonProps } = props;
|
|
8676
|
+
const [pressed, setPressed] = useControllableState({
|
|
8677
|
+
prop: pressedProp,
|
|
8678
|
+
onChange: onPressedChange,
|
|
8679
|
+
defaultProp: defaultPressed ?? false,
|
|
8680
|
+
caller: NAME$2
|
|
8681
|
+
});
|
|
8682
|
+
return /* @__PURE__ */ jsx(
|
|
8683
|
+
Primitive.button,
|
|
8684
|
+
{
|
|
8685
|
+
type: "button",
|
|
8686
|
+
"aria-pressed": pressed,
|
|
8687
|
+
"data-state": pressed ? "on" : "off",
|
|
8688
|
+
"data-disabled": props.disabled ? "" : void 0,
|
|
8689
|
+
...buttonProps,
|
|
8690
|
+
ref: forwardedRef,
|
|
8691
|
+
onClick: composeEventHandlers(props.onClick, () => {
|
|
8692
|
+
if (!props.disabled) {
|
|
8693
|
+
setPressed(!pressed);
|
|
8694
|
+
}
|
|
8695
|
+
})
|
|
8696
|
+
}
|
|
8697
|
+
);
|
|
8698
|
+
});
|
|
8699
|
+
Toggle$1.displayName = NAME$2;
|
|
8700
|
+
|
|
8701
|
+
var TOGGLE_GROUP_NAME = "ToggleGroup";
|
|
8702
|
+
var [createToggleGroupContext] = createContextScope(TOGGLE_GROUP_NAME, [
|
|
8703
|
+
createRovingFocusGroupScope
|
|
8704
|
+
]);
|
|
8705
|
+
var useRovingFocusGroupScope = createRovingFocusGroupScope();
|
|
8706
|
+
var ToggleGroup = React__default.forwardRef((props, forwardedRef) => {
|
|
8707
|
+
const { type, ...toggleGroupProps } = props;
|
|
8708
|
+
if (type === "single") {
|
|
8709
|
+
const singleProps = toggleGroupProps;
|
|
8710
|
+
return /* @__PURE__ */ jsx(ToggleGroupImplSingle, { ...singleProps, ref: forwardedRef });
|
|
8711
|
+
}
|
|
8712
|
+
if (type === "multiple") {
|
|
8713
|
+
const multipleProps = toggleGroupProps;
|
|
8714
|
+
return /* @__PURE__ */ jsx(ToggleGroupImplMultiple, { ...multipleProps, ref: forwardedRef });
|
|
8715
|
+
}
|
|
8716
|
+
throw new Error(`Missing prop \`type\` expected on \`${TOGGLE_GROUP_NAME}\``);
|
|
8717
|
+
});
|
|
8718
|
+
ToggleGroup.displayName = TOGGLE_GROUP_NAME;
|
|
8719
|
+
var [ToggleGroupValueProvider, useToggleGroupValueContext] = createToggleGroupContext(TOGGLE_GROUP_NAME);
|
|
8720
|
+
var ToggleGroupImplSingle = React__default.forwardRef((props, forwardedRef) => {
|
|
8721
|
+
const {
|
|
8722
|
+
value: valueProp,
|
|
8723
|
+
defaultValue,
|
|
8724
|
+
onValueChange = () => {
|
|
8725
|
+
},
|
|
8726
|
+
...toggleGroupSingleProps
|
|
8727
|
+
} = props;
|
|
8728
|
+
const [value, setValue] = useControllableState({
|
|
8729
|
+
prop: valueProp,
|
|
8730
|
+
defaultProp: defaultValue ?? "",
|
|
8731
|
+
onChange: onValueChange,
|
|
8732
|
+
caller: TOGGLE_GROUP_NAME
|
|
8733
|
+
});
|
|
8734
|
+
return /* @__PURE__ */ jsx(
|
|
8735
|
+
ToggleGroupValueProvider,
|
|
8736
|
+
{
|
|
8737
|
+
scope: props.__scopeToggleGroup,
|
|
8738
|
+
type: "single",
|
|
8739
|
+
value: React__default.useMemo(() => value ? [value] : [], [value]),
|
|
8740
|
+
onItemActivate: setValue,
|
|
8741
|
+
onItemDeactivate: React__default.useCallback(() => setValue(""), [setValue]),
|
|
8742
|
+
children: /* @__PURE__ */ jsx(ToggleGroupImpl, { ...toggleGroupSingleProps, ref: forwardedRef })
|
|
8743
|
+
}
|
|
8744
|
+
);
|
|
8745
|
+
});
|
|
8746
|
+
var ToggleGroupImplMultiple = React__default.forwardRef((props, forwardedRef) => {
|
|
8747
|
+
const {
|
|
8748
|
+
value: valueProp,
|
|
8749
|
+
defaultValue,
|
|
8750
|
+
onValueChange = () => {
|
|
8751
|
+
},
|
|
8752
|
+
...toggleGroupMultipleProps
|
|
8753
|
+
} = props;
|
|
8754
|
+
const [value, setValue] = useControllableState({
|
|
8755
|
+
prop: valueProp,
|
|
8756
|
+
defaultProp: defaultValue ?? [],
|
|
8757
|
+
onChange: onValueChange,
|
|
8758
|
+
caller: TOGGLE_GROUP_NAME
|
|
8759
|
+
});
|
|
8760
|
+
const handleButtonActivate = React__default.useCallback(
|
|
8761
|
+
(itemValue) => setValue((prevValue = []) => [...prevValue, itemValue]),
|
|
8762
|
+
[setValue]
|
|
8763
|
+
);
|
|
8764
|
+
const handleButtonDeactivate = React__default.useCallback(
|
|
8765
|
+
(itemValue) => setValue((prevValue = []) => prevValue.filter((value2) => value2 !== itemValue)),
|
|
8766
|
+
[setValue]
|
|
8767
|
+
);
|
|
8768
|
+
return /* @__PURE__ */ jsx(
|
|
8769
|
+
ToggleGroupValueProvider,
|
|
8770
|
+
{
|
|
8771
|
+
scope: props.__scopeToggleGroup,
|
|
8772
|
+
type: "multiple",
|
|
8773
|
+
value,
|
|
8774
|
+
onItemActivate: handleButtonActivate,
|
|
8775
|
+
onItemDeactivate: handleButtonDeactivate,
|
|
8776
|
+
children: /* @__PURE__ */ jsx(ToggleGroupImpl, { ...toggleGroupMultipleProps, ref: forwardedRef })
|
|
8777
|
+
}
|
|
8778
|
+
);
|
|
8779
|
+
});
|
|
8780
|
+
ToggleGroup.displayName = TOGGLE_GROUP_NAME;
|
|
8781
|
+
var [ToggleGroupContext, useToggleGroupContext] = createToggleGroupContext(TOGGLE_GROUP_NAME);
|
|
8782
|
+
var ToggleGroupImpl = React__default.forwardRef(
|
|
8783
|
+
(props, forwardedRef) => {
|
|
8784
|
+
const {
|
|
8785
|
+
__scopeToggleGroup,
|
|
8786
|
+
disabled = false,
|
|
8787
|
+
rovingFocus = true,
|
|
8788
|
+
orientation,
|
|
8789
|
+
dir,
|
|
8790
|
+
loop = true,
|
|
8791
|
+
...toggleGroupProps
|
|
8792
|
+
} = props;
|
|
8793
|
+
const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeToggleGroup);
|
|
8794
|
+
const direction = useDirection(dir);
|
|
8795
|
+
const commonProps = { role: "group", dir: direction, ...toggleGroupProps };
|
|
8796
|
+
return /* @__PURE__ */ jsx(ToggleGroupContext, { scope: __scopeToggleGroup, rovingFocus, disabled, children: rovingFocus ? /* @__PURE__ */ jsx(
|
|
8797
|
+
Root$2,
|
|
8798
|
+
{
|
|
8799
|
+
asChild: true,
|
|
8800
|
+
...rovingFocusGroupScope,
|
|
8801
|
+
orientation,
|
|
8802
|
+
dir: direction,
|
|
8803
|
+
loop,
|
|
8804
|
+
children: /* @__PURE__ */ jsx(Primitive.div, { ...commonProps, ref: forwardedRef })
|
|
8805
|
+
}
|
|
8806
|
+
) : /* @__PURE__ */ jsx(Primitive.div, { ...commonProps, ref: forwardedRef }) });
|
|
8807
|
+
}
|
|
8808
|
+
);
|
|
8809
|
+
var ITEM_NAME = "ToggleGroupItem";
|
|
8810
|
+
var ToggleGroupItem = React__default.forwardRef(
|
|
8811
|
+
(props, forwardedRef) => {
|
|
8812
|
+
const valueContext = useToggleGroupValueContext(ITEM_NAME, props.__scopeToggleGroup);
|
|
8813
|
+
const context = useToggleGroupContext(ITEM_NAME, props.__scopeToggleGroup);
|
|
8814
|
+
const rovingFocusGroupScope = useRovingFocusGroupScope(props.__scopeToggleGroup);
|
|
8815
|
+
const pressed = valueContext.value.includes(props.value);
|
|
8816
|
+
const disabled = context.disabled || props.disabled;
|
|
8817
|
+
const commonProps = { ...props, pressed, disabled };
|
|
8818
|
+
const ref = React__default.useRef(null);
|
|
8819
|
+
return context.rovingFocus ? /* @__PURE__ */ jsx(
|
|
8820
|
+
Item,
|
|
8821
|
+
{
|
|
8822
|
+
asChild: true,
|
|
8823
|
+
...rovingFocusGroupScope,
|
|
8824
|
+
focusable: !disabled,
|
|
8825
|
+
active: pressed,
|
|
8826
|
+
ref,
|
|
8827
|
+
children: /* @__PURE__ */ jsx(ToggleGroupItemImpl, { ...commonProps, ref: forwardedRef })
|
|
8828
|
+
}
|
|
8829
|
+
) : /* @__PURE__ */ jsx(ToggleGroupItemImpl, { ...commonProps, ref: forwardedRef });
|
|
8830
|
+
}
|
|
8831
|
+
);
|
|
8832
|
+
ToggleGroupItem.displayName = ITEM_NAME;
|
|
8833
|
+
var ToggleGroupItemImpl = React__default.forwardRef(
|
|
8834
|
+
(props, forwardedRef) => {
|
|
8835
|
+
const { __scopeToggleGroup, value, ...itemProps } = props;
|
|
8836
|
+
const valueContext = useToggleGroupValueContext(ITEM_NAME, __scopeToggleGroup);
|
|
8837
|
+
const singleProps = { role: "radio", "aria-checked": props.pressed, "aria-pressed": void 0 };
|
|
8838
|
+
const typeProps = valueContext.type === "single" ? singleProps : void 0;
|
|
8839
|
+
return /* @__PURE__ */ jsx(
|
|
8840
|
+
Toggle$1,
|
|
8841
|
+
{
|
|
8842
|
+
...typeProps,
|
|
8843
|
+
...itemProps,
|
|
8844
|
+
ref: forwardedRef,
|
|
8845
|
+
onPressedChange: (pressed) => {
|
|
8846
|
+
if (pressed) {
|
|
8847
|
+
valueContext.onItemActivate(value);
|
|
8848
|
+
} else {
|
|
8849
|
+
valueContext.onItemDeactivate(value);
|
|
8850
|
+
}
|
|
8851
|
+
}
|
|
8852
|
+
}
|
|
8853
|
+
);
|
|
8854
|
+
}
|
|
8855
|
+
);
|
|
8856
|
+
var Root2$1 = ToggleGroup;
|
|
8857
|
+
var Item2 = ToggleGroupItem;
|
|
8858
|
+
|
|
8859
|
+
var s$1 = {"wrapper":"styles-module_wrapper__w34ig","item":"styles-module_item__ZnkRi"};
|
|
8860
|
+
|
|
8861
|
+
const Toggle = ({ wrapperClassName, className, items, ...props }) => {
|
|
8862
|
+
const item = ({ icon, text, ...props }, key) => (jsxs(Item2, { className: cn(s$1.item, className), ...props, children: [icon, text] }, key));
|
|
8863
|
+
return (jsx(Root2$1, { className: cn(s$1.wrapper, wrapperClassName), ...props, children: Array.isArray(items) ? items.map((props, i) => item(props, i)) : item(items) }));
|
|
8864
|
+
};
|
|
8865
|
+
|
|
8866
|
+
/**
|
|
8867
|
+
* Custom positioning reference element.
|
|
8868
|
+
* @see https://floating-ui.com/docs/virtual-elements
|
|
8869
|
+
*/
|
|
8870
|
+
|
|
8871
|
+
const sides = ['top', 'right', 'bottom', 'left'];
|
|
8872
|
+
const min = Math.min;
|
|
8873
|
+
const max = Math.max;
|
|
8874
|
+
const round = Math.round;
|
|
8875
|
+
const floor = Math.floor;
|
|
8876
|
+
const createCoords = v => ({
|
|
8877
|
+
x: v,
|
|
8878
|
+
y: v
|
|
8879
|
+
});
|
|
8880
|
+
const oppositeSideMap = {
|
|
8881
|
+
left: 'right',
|
|
8882
|
+
right: 'left',
|
|
8883
|
+
bottom: 'top',
|
|
8884
|
+
top: 'bottom'
|
|
8885
|
+
};
|
|
8886
|
+
const oppositeAlignmentMap = {
|
|
8887
|
+
start: 'end',
|
|
8888
|
+
end: 'start'
|
|
8889
|
+
};
|
|
8890
|
+
function clamp(start, value, end) {
|
|
8891
|
+
return max(start, min(value, end));
|
|
8892
|
+
}
|
|
8893
|
+
function evaluate(value, param) {
|
|
8894
|
+
return typeof value === 'function' ? value(param) : value;
|
|
8895
|
+
}
|
|
8896
|
+
function getSide(placement) {
|
|
8897
|
+
return placement.split('-')[0];
|
|
8898
|
+
}
|
|
8899
|
+
function getAlignment(placement) {
|
|
8900
|
+
return placement.split('-')[1];
|
|
8901
|
+
}
|
|
8902
|
+
function getOppositeAxis(axis) {
|
|
8903
|
+
return axis === 'x' ? 'y' : 'x';
|
|
8904
|
+
}
|
|
8905
|
+
function getAxisLength(axis) {
|
|
8906
|
+
return axis === 'y' ? 'height' : 'width';
|
|
8907
|
+
}
|
|
8908
|
+
const yAxisSides = /*#__PURE__*/new Set(['top', 'bottom']);
|
|
8909
|
+
function getSideAxis(placement) {
|
|
8910
|
+
return yAxisSides.has(getSide(placement)) ? 'y' : 'x';
|
|
8911
|
+
}
|
|
8912
|
+
function getAlignmentAxis(placement) {
|
|
8913
|
+
return getOppositeAxis(getSideAxis(placement));
|
|
8914
|
+
}
|
|
8915
|
+
function getAlignmentSides(placement, rects, rtl) {
|
|
8916
|
+
if (rtl === void 0) {
|
|
8917
|
+
rtl = false;
|
|
8918
|
+
}
|
|
8919
|
+
const alignment = getAlignment(placement);
|
|
8920
|
+
const alignmentAxis = getAlignmentAxis(placement);
|
|
8921
|
+
const length = getAxisLength(alignmentAxis);
|
|
8922
|
+
let mainAlignmentSide = alignmentAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top';
|
|
8923
|
+
if (rects.reference[length] > rects.floating[length]) {
|
|
8924
|
+
mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
|
|
8925
|
+
}
|
|
8926
|
+
return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
|
|
8927
|
+
}
|
|
8928
|
+
function getExpandedPlacements(placement) {
|
|
8929
|
+
const oppositePlacement = getOppositePlacement(placement);
|
|
8930
|
+
return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
|
|
8931
|
+
}
|
|
8932
|
+
function getOppositeAlignmentPlacement(placement) {
|
|
8933
|
+
return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]);
|
|
8934
|
+
}
|
|
8935
|
+
const lrPlacement = ['left', 'right'];
|
|
8936
|
+
const rlPlacement = ['right', 'left'];
|
|
8937
|
+
const tbPlacement = ['top', 'bottom'];
|
|
8938
|
+
const btPlacement = ['bottom', 'top'];
|
|
8939
|
+
function getSideList(side, isStart, rtl) {
|
|
8940
|
+
switch (side) {
|
|
8941
|
+
case 'top':
|
|
8942
|
+
case 'bottom':
|
|
8943
|
+
if (rtl) return isStart ? rlPlacement : lrPlacement;
|
|
8944
|
+
return isStart ? lrPlacement : rlPlacement;
|
|
8945
|
+
case 'left':
|
|
8946
|
+
case 'right':
|
|
8947
|
+
return isStart ? tbPlacement : btPlacement;
|
|
8948
|
+
default:
|
|
8949
|
+
return [];
|
|
8950
|
+
}
|
|
8951
|
+
}
|
|
8952
|
+
function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
|
|
8953
|
+
const alignment = getAlignment(placement);
|
|
8954
|
+
let list = getSideList(getSide(placement), direction === 'start', rtl);
|
|
8955
|
+
if (alignment) {
|
|
8956
|
+
list = list.map(side => side + "-" + alignment);
|
|
8957
|
+
if (flipAlignment) {
|
|
8958
|
+
list = list.concat(list.map(getOppositeAlignmentPlacement));
|
|
8959
|
+
}
|
|
8960
|
+
}
|
|
8961
|
+
return list;
|
|
8962
|
+
}
|
|
8963
|
+
function getOppositePlacement(placement) {
|
|
8964
|
+
return placement.replace(/left|right|bottom|top/g, side => oppositeSideMap[side]);
|
|
8965
|
+
}
|
|
8966
|
+
function expandPaddingObject(padding) {
|
|
8967
|
+
return {
|
|
8968
|
+
top: 0,
|
|
8969
|
+
right: 0,
|
|
8970
|
+
bottom: 0,
|
|
8971
|
+
left: 0,
|
|
8972
|
+
...padding
|
|
8973
|
+
};
|
|
8974
|
+
}
|
|
8975
|
+
function getPaddingObject(padding) {
|
|
8976
|
+
return typeof padding !== 'number' ? expandPaddingObject(padding) : {
|
|
8977
|
+
top: padding,
|
|
8978
|
+
right: padding,
|
|
8979
|
+
bottom: padding,
|
|
8980
|
+
left: padding
|
|
8981
|
+
};
|
|
8982
|
+
}
|
|
8983
|
+
function rectToClientRect(rect) {
|
|
8984
|
+
const {
|
|
8985
|
+
x,
|
|
8986
|
+
y,
|
|
8987
|
+
width,
|
|
8988
|
+
height
|
|
8989
|
+
} = rect;
|
|
8990
|
+
return {
|
|
8991
|
+
width,
|
|
8992
|
+
height,
|
|
8993
|
+
top: y,
|
|
8994
|
+
left: x,
|
|
8995
|
+
right: x + width,
|
|
8996
|
+
bottom: y + height,
|
|
8997
|
+
x,
|
|
8998
|
+
y
|
|
8999
|
+
};
|
|
9000
|
+
}
|
|
9001
|
+
|
|
9002
|
+
function computeCoordsFromPlacement(_ref, placement, rtl) {
|
|
9003
|
+
let {
|
|
9004
|
+
reference,
|
|
9005
|
+
floating
|
|
9006
|
+
} = _ref;
|
|
9007
|
+
const sideAxis = getSideAxis(placement);
|
|
9008
|
+
const alignmentAxis = getAlignmentAxis(placement);
|
|
9009
|
+
const alignLength = getAxisLength(alignmentAxis);
|
|
9010
|
+
const side = getSide(placement);
|
|
9011
|
+
const isVertical = sideAxis === 'y';
|
|
9012
|
+
const commonX = reference.x + reference.width / 2 - floating.width / 2;
|
|
9013
|
+
const commonY = reference.y + reference.height / 2 - floating.height / 2;
|
|
9014
|
+
const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;
|
|
9015
|
+
let coords;
|
|
9016
|
+
switch (side) {
|
|
9017
|
+
case 'top':
|
|
9018
|
+
coords = {
|
|
9019
|
+
x: commonX,
|
|
9020
|
+
y: reference.y - floating.height
|
|
9021
|
+
};
|
|
9022
|
+
break;
|
|
9023
|
+
case 'bottom':
|
|
9024
|
+
coords = {
|
|
9025
|
+
x: commonX,
|
|
9026
|
+
y: reference.y + reference.height
|
|
9027
|
+
};
|
|
9028
|
+
break;
|
|
9029
|
+
case 'right':
|
|
9030
|
+
coords = {
|
|
9031
|
+
x: reference.x + reference.width,
|
|
9032
|
+
y: commonY
|
|
9033
|
+
};
|
|
9034
|
+
break;
|
|
9035
|
+
case 'left':
|
|
9036
|
+
coords = {
|
|
9037
|
+
x: reference.x - floating.width,
|
|
9038
|
+
y: commonY
|
|
9039
|
+
};
|
|
9040
|
+
break;
|
|
9041
|
+
default:
|
|
9042
|
+
coords = {
|
|
9043
|
+
x: reference.x,
|
|
9044
|
+
y: reference.y
|
|
9045
|
+
};
|
|
9046
|
+
}
|
|
9047
|
+
switch (getAlignment(placement)) {
|
|
9048
|
+
case 'start':
|
|
9049
|
+
coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
|
|
9050
|
+
break;
|
|
9051
|
+
case 'end':
|
|
9052
|
+
coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
|
|
9053
|
+
break;
|
|
9054
|
+
}
|
|
9055
|
+
return coords;
|
|
9056
|
+
}
|
|
9057
|
+
|
|
9058
|
+
/**
|
|
9059
|
+
* Computes the `x` and `y` coordinates that will place the floating element
|
|
9060
|
+
* next to a given reference element.
|
|
9061
|
+
*
|
|
9062
|
+
* This export does not have any `platform` interface logic. You will need to
|
|
9063
|
+
* write one for the platform you are using Floating UI with.
|
|
9064
|
+
*/
|
|
9065
|
+
const computePosition$1 = async (reference, floating, config) => {
|
|
9066
|
+
const {
|
|
9067
|
+
placement = 'bottom',
|
|
9068
|
+
strategy = 'absolute',
|
|
9069
|
+
middleware = [],
|
|
9070
|
+
platform
|
|
9071
|
+
} = config;
|
|
9072
|
+
const validMiddleware = middleware.filter(Boolean);
|
|
9073
|
+
const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
|
|
9074
|
+
let rects = await platform.getElementRects({
|
|
9075
|
+
reference,
|
|
9076
|
+
floating,
|
|
9077
|
+
strategy
|
|
9078
|
+
});
|
|
9079
|
+
let {
|
|
9080
|
+
x,
|
|
9081
|
+
y
|
|
9082
|
+
} = computeCoordsFromPlacement(rects, placement, rtl);
|
|
9083
|
+
let statefulPlacement = placement;
|
|
9084
|
+
let middlewareData = {};
|
|
9085
|
+
let resetCount = 0;
|
|
9086
|
+
for (let i = 0; i < validMiddleware.length; i++) {
|
|
9087
|
+
const {
|
|
9088
|
+
name,
|
|
9089
|
+
fn
|
|
9090
|
+
} = validMiddleware[i];
|
|
9091
|
+
const {
|
|
9092
|
+
x: nextX,
|
|
9093
|
+
y: nextY,
|
|
9094
|
+
data,
|
|
9095
|
+
reset
|
|
9096
|
+
} = await fn({
|
|
9097
|
+
x,
|
|
9098
|
+
y,
|
|
9099
|
+
initialPlacement: placement,
|
|
9100
|
+
placement: statefulPlacement,
|
|
9101
|
+
strategy,
|
|
9102
|
+
middlewareData,
|
|
9103
|
+
rects,
|
|
9104
|
+
platform,
|
|
9105
|
+
elements: {
|
|
9106
|
+
reference,
|
|
9107
|
+
floating
|
|
9108
|
+
}
|
|
9109
|
+
});
|
|
9110
|
+
x = nextX != null ? nextX : x;
|
|
9111
|
+
y = nextY != null ? nextY : y;
|
|
9112
|
+
middlewareData = {
|
|
9113
|
+
...middlewareData,
|
|
9114
|
+
[name]: {
|
|
9115
|
+
...middlewareData[name],
|
|
9116
|
+
...data
|
|
9117
|
+
}
|
|
9118
|
+
};
|
|
9119
|
+
if (reset && resetCount <= 50) {
|
|
9120
|
+
resetCount++;
|
|
9121
|
+
if (typeof reset === 'object') {
|
|
9122
|
+
if (reset.placement) {
|
|
9123
|
+
statefulPlacement = reset.placement;
|
|
9124
|
+
}
|
|
9125
|
+
if (reset.rects) {
|
|
9126
|
+
rects = reset.rects === true ? await platform.getElementRects({
|
|
9127
|
+
reference,
|
|
9128
|
+
floating,
|
|
9129
|
+
strategy
|
|
9130
|
+
}) : reset.rects;
|
|
9131
|
+
}
|
|
9132
|
+
({
|
|
9133
|
+
x,
|
|
9134
|
+
y
|
|
9135
|
+
} = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
|
|
9136
|
+
}
|
|
9137
|
+
i = -1;
|
|
9138
|
+
}
|
|
9139
|
+
}
|
|
9140
|
+
return {
|
|
9141
|
+
x,
|
|
9142
|
+
y,
|
|
9143
|
+
placement: statefulPlacement,
|
|
9144
|
+
strategy,
|
|
9145
|
+
middlewareData
|
|
9146
|
+
};
|
|
9147
|
+
};
|
|
9148
|
+
|
|
9149
|
+
/**
|
|
9150
|
+
* Resolves with an object of overflow side offsets that determine how much the
|
|
9151
|
+
* element is overflowing a given clipping boundary on each side.
|
|
9152
|
+
* - positive = overflowing the boundary by that number of pixels
|
|
9153
|
+
* - negative = how many pixels left before it will overflow
|
|
9154
|
+
* - 0 = lies flush with the boundary
|
|
9155
|
+
* @see https://floating-ui.com/docs/detectOverflow
|
|
9156
|
+
*/
|
|
9157
|
+
async function detectOverflow(state, options) {
|
|
9158
|
+
var _await$platform$isEle;
|
|
9159
|
+
if (options === void 0) {
|
|
9160
|
+
options = {};
|
|
9161
|
+
}
|
|
9162
|
+
const {
|
|
9163
|
+
x,
|
|
9164
|
+
y,
|
|
9165
|
+
platform,
|
|
9166
|
+
rects,
|
|
9167
|
+
elements,
|
|
9168
|
+
strategy
|
|
9169
|
+
} = state;
|
|
9170
|
+
const {
|
|
9171
|
+
boundary = 'clippingAncestors',
|
|
9172
|
+
rootBoundary = 'viewport',
|
|
9173
|
+
elementContext = 'floating',
|
|
9174
|
+
altBoundary = false,
|
|
9175
|
+
padding = 0
|
|
9176
|
+
} = evaluate(options, state);
|
|
9177
|
+
const paddingObject = getPaddingObject(padding);
|
|
9178
|
+
const altContext = elementContext === 'floating' ? 'reference' : 'floating';
|
|
9179
|
+
const element = elements[altBoundary ? altContext : elementContext];
|
|
9180
|
+
const clippingClientRect = rectToClientRect(await platform.getClippingRect({
|
|
9181
|
+
element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))),
|
|
9182
|
+
boundary,
|
|
9183
|
+
rootBoundary,
|
|
9184
|
+
strategy
|
|
9185
|
+
}));
|
|
9186
|
+
const rect = elementContext === 'floating' ? {
|
|
9187
|
+
x,
|
|
9188
|
+
y,
|
|
9189
|
+
width: rects.floating.width,
|
|
9190
|
+
height: rects.floating.height
|
|
9191
|
+
} : rects.reference;
|
|
9192
|
+
const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
|
|
9193
|
+
const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
|
|
9194
|
+
x: 1,
|
|
9195
|
+
y: 1
|
|
9196
|
+
} : {
|
|
9197
|
+
x: 1,
|
|
9198
|
+
y: 1
|
|
9199
|
+
};
|
|
9200
|
+
const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
|
|
9201
|
+
elements,
|
|
9202
|
+
rect,
|
|
9203
|
+
offsetParent,
|
|
9204
|
+
strategy
|
|
9205
|
+
}) : rect);
|
|
9206
|
+
return {
|
|
9207
|
+
top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
|
|
9208
|
+
bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
|
|
9209
|
+
left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
|
|
9210
|
+
right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
|
|
9211
|
+
};
|
|
9212
|
+
}
|
|
9213
|
+
|
|
9214
|
+
/**
|
|
9215
|
+
* Provides data to position an inner element of the floating element so that it
|
|
9216
|
+
* appears centered to the reference element.
|
|
9217
|
+
* @see https://floating-ui.com/docs/arrow
|
|
9218
|
+
*/
|
|
9219
|
+
const arrow$3 = options => ({
|
|
9220
|
+
name: 'arrow',
|
|
9221
|
+
options,
|
|
9222
|
+
async fn(state) {
|
|
9223
|
+
const {
|
|
9224
|
+
x,
|
|
9225
|
+
y,
|
|
9226
|
+
placement,
|
|
9227
|
+
rects,
|
|
9228
|
+
platform,
|
|
9229
|
+
elements,
|
|
9230
|
+
middlewareData
|
|
9231
|
+
} = state;
|
|
9232
|
+
// Since `element` is required, we don't Partial<> the type.
|
|
9233
|
+
const {
|
|
9234
|
+
element,
|
|
9235
|
+
padding = 0
|
|
9236
|
+
} = evaluate(options, state) || {};
|
|
9237
|
+
if (element == null) {
|
|
9238
|
+
return {};
|
|
9239
|
+
}
|
|
9240
|
+
const paddingObject = getPaddingObject(padding);
|
|
9241
|
+
const coords = {
|
|
9242
|
+
x,
|
|
9243
|
+
y
|
|
9244
|
+
};
|
|
9245
|
+
const axis = getAlignmentAxis(placement);
|
|
9246
|
+
const length = getAxisLength(axis);
|
|
9247
|
+
const arrowDimensions = await platform.getDimensions(element);
|
|
9248
|
+
const isYAxis = axis === 'y';
|
|
9249
|
+
const minProp = isYAxis ? 'top' : 'left';
|
|
9250
|
+
const maxProp = isYAxis ? 'bottom' : 'right';
|
|
9251
|
+
const clientProp = isYAxis ? 'clientHeight' : 'clientWidth';
|
|
9252
|
+
const endDiff = rects.reference[length] + rects.reference[axis] - coords[axis] - rects.floating[length];
|
|
9253
|
+
const startDiff = coords[axis] - rects.reference[axis];
|
|
9254
|
+
const arrowOffsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(element));
|
|
9255
|
+
let clientSize = arrowOffsetParent ? arrowOffsetParent[clientProp] : 0;
|
|
9256
|
+
|
|
9257
|
+
// DOM platform can return `window` as the `offsetParent`.
|
|
9258
|
+
if (!clientSize || !(await (platform.isElement == null ? void 0 : platform.isElement(arrowOffsetParent)))) {
|
|
9259
|
+
clientSize = elements.floating[clientProp] || rects.floating[length];
|
|
9260
|
+
}
|
|
9261
|
+
const centerToReference = endDiff / 2 - startDiff / 2;
|
|
9262
|
+
|
|
9263
|
+
// If the padding is large enough that it causes the arrow to no longer be
|
|
9264
|
+
// centered, modify the padding so that it is centered.
|
|
9265
|
+
const largestPossiblePadding = clientSize / 2 - arrowDimensions[length] / 2 - 1;
|
|
9266
|
+
const minPadding = min(paddingObject[minProp], largestPossiblePadding);
|
|
9267
|
+
const maxPadding = min(paddingObject[maxProp], largestPossiblePadding);
|
|
9268
|
+
|
|
9269
|
+
// Make sure the arrow doesn't overflow the floating element if the center
|
|
9270
|
+
// point is outside the floating element's bounds.
|
|
9271
|
+
const min$1 = minPadding;
|
|
9272
|
+
const max = clientSize - arrowDimensions[length] - maxPadding;
|
|
9273
|
+
const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
|
|
9274
|
+
const offset = clamp(min$1, center, max);
|
|
9275
|
+
|
|
9276
|
+
// If the reference is small enough that the arrow's padding causes it to
|
|
9277
|
+
// to point to nothing for an aligned placement, adjust the offset of the
|
|
9278
|
+
// floating element itself. To ensure `shift()` continues to take action,
|
|
9279
|
+
// a single reset is performed when this is true.
|
|
9280
|
+
const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
|
|
9281
|
+
const alignmentOffset = shouldAddOffset ? center < min$1 ? center - min$1 : center - max : 0;
|
|
9282
|
+
return {
|
|
9283
|
+
[axis]: coords[axis] + alignmentOffset,
|
|
9284
|
+
data: {
|
|
9285
|
+
[axis]: offset,
|
|
9286
|
+
centerOffset: center - offset - alignmentOffset,
|
|
9287
|
+
...(shouldAddOffset && {
|
|
9288
|
+
alignmentOffset
|
|
9289
|
+
})
|
|
9290
|
+
},
|
|
9291
|
+
reset: shouldAddOffset
|
|
9292
|
+
};
|
|
9293
|
+
}
|
|
9294
|
+
});
|
|
9295
|
+
|
|
9296
|
+
/**
|
|
9297
|
+
* Optimizes the visibility of the floating element by flipping the `placement`
|
|
9298
|
+
* in order to keep it in view when the preferred placement(s) will overflow the
|
|
9299
|
+
* clipping boundary. Alternative to `autoPlacement`.
|
|
9300
|
+
* @see https://floating-ui.com/docs/flip
|
|
9301
|
+
*/
|
|
9302
|
+
const flip$2 = function (options) {
|
|
9303
|
+
if (options === void 0) {
|
|
9304
|
+
options = {};
|
|
9305
|
+
}
|
|
9306
|
+
return {
|
|
9307
|
+
name: 'flip',
|
|
9308
|
+
options,
|
|
9309
|
+
async fn(state) {
|
|
9310
|
+
var _middlewareData$arrow, _middlewareData$flip;
|
|
9311
|
+
const {
|
|
9312
|
+
placement,
|
|
9313
|
+
middlewareData,
|
|
9314
|
+
rects,
|
|
9315
|
+
initialPlacement,
|
|
9316
|
+
platform,
|
|
9317
|
+
elements
|
|
9318
|
+
} = state;
|
|
9319
|
+
const {
|
|
9320
|
+
mainAxis: checkMainAxis = true,
|
|
9321
|
+
crossAxis: checkCrossAxis = true,
|
|
9322
|
+
fallbackPlacements: specifiedFallbackPlacements,
|
|
9323
|
+
fallbackStrategy = 'bestFit',
|
|
9324
|
+
fallbackAxisSideDirection = 'none',
|
|
9325
|
+
flipAlignment = true,
|
|
9326
|
+
...detectOverflowOptions
|
|
9327
|
+
} = evaluate(options, state);
|
|
9328
|
+
|
|
9329
|
+
// If a reset by the arrow was caused due to an alignment offset being
|
|
9330
|
+
// added, we should skip any logic now since `flip()` has already done its
|
|
9331
|
+
// work.
|
|
9332
|
+
// https://github.com/floating-ui/floating-ui/issues/2549#issuecomment-1719601643
|
|
9333
|
+
if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
|
|
9334
|
+
return {};
|
|
9335
|
+
}
|
|
9336
|
+
const side = getSide(placement);
|
|
9337
|
+
const initialSideAxis = getSideAxis(initialPlacement);
|
|
9338
|
+
const isBasePlacement = getSide(initialPlacement) === initialPlacement;
|
|
9339
|
+
const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
|
|
9340
|
+
const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
|
|
9341
|
+
const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== 'none';
|
|
9342
|
+
if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
|
|
9343
|
+
fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
|
|
9344
|
+
}
|
|
9345
|
+
const placements = [initialPlacement, ...fallbackPlacements];
|
|
9346
|
+
const overflow = await detectOverflow(state, detectOverflowOptions);
|
|
9347
|
+
const overflows = [];
|
|
9348
|
+
let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
|
|
9349
|
+
if (checkMainAxis) {
|
|
9350
|
+
overflows.push(overflow[side]);
|
|
9351
|
+
}
|
|
9352
|
+
if (checkCrossAxis) {
|
|
9353
|
+
const sides = getAlignmentSides(placement, rects, rtl);
|
|
9354
|
+
overflows.push(overflow[sides[0]], overflow[sides[1]]);
|
|
9355
|
+
}
|
|
9356
|
+
overflowsData = [...overflowsData, {
|
|
9357
|
+
placement,
|
|
9358
|
+
overflows
|
|
9359
|
+
}];
|
|
9360
|
+
|
|
9361
|
+
// One or more sides is overflowing.
|
|
9362
|
+
if (!overflows.every(side => side <= 0)) {
|
|
9363
|
+
var _middlewareData$flip2, _overflowsData$filter;
|
|
9364
|
+
const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
|
|
9365
|
+
const nextPlacement = placements[nextIndex];
|
|
9366
|
+
if (nextPlacement) {
|
|
9367
|
+
const ignoreCrossAxisOverflow = checkCrossAxis === 'alignment' ? initialSideAxis !== getSideAxis(nextPlacement) : false;
|
|
9368
|
+
if (!ignoreCrossAxisOverflow ||
|
|
9369
|
+
// We leave the current main axis only if every placement on that axis
|
|
9370
|
+
// overflows the main axis.
|
|
9371
|
+
overflowsData.every(d => getSideAxis(d.placement) === initialSideAxis ? d.overflows[0] > 0 : true)) {
|
|
9372
|
+
// Try next placement and re-run the lifecycle.
|
|
9373
|
+
return {
|
|
9374
|
+
data: {
|
|
9375
|
+
index: nextIndex,
|
|
9376
|
+
overflows: overflowsData
|
|
9377
|
+
},
|
|
9378
|
+
reset: {
|
|
9379
|
+
placement: nextPlacement
|
|
9380
|
+
}
|
|
9381
|
+
};
|
|
9382
|
+
}
|
|
9383
|
+
}
|
|
9384
|
+
|
|
9385
|
+
// First, find the candidates that fit on the mainAxis side of overflow,
|
|
9386
|
+
// then find the placement that fits the best on the main crossAxis side.
|
|
9387
|
+
let resetPlacement = (_overflowsData$filter = overflowsData.filter(d => d.overflows[0] <= 0).sort((a, b) => a.overflows[1] - b.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement;
|
|
9388
|
+
|
|
9389
|
+
// Otherwise fallback.
|
|
9390
|
+
if (!resetPlacement) {
|
|
9391
|
+
switch (fallbackStrategy) {
|
|
9392
|
+
case 'bestFit':
|
|
9393
|
+
{
|
|
9394
|
+
var _overflowsData$filter2;
|
|
9395
|
+
const placement = (_overflowsData$filter2 = overflowsData.filter(d => {
|
|
9396
|
+
if (hasFallbackAxisSideDirection) {
|
|
9397
|
+
const currentSideAxis = getSideAxis(d.placement);
|
|
9398
|
+
return currentSideAxis === initialSideAxis ||
|
|
9399
|
+
// Create a bias to the `y` side axis due to horizontal
|
|
9400
|
+
// reading directions favoring greater width.
|
|
9401
|
+
currentSideAxis === 'y';
|
|
9402
|
+
}
|
|
9403
|
+
return true;
|
|
9404
|
+
}).map(d => [d.placement, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$filter2[0];
|
|
9405
|
+
if (placement) {
|
|
9406
|
+
resetPlacement = placement;
|
|
9407
|
+
}
|
|
9408
|
+
break;
|
|
9409
|
+
}
|
|
9410
|
+
case 'initialPlacement':
|
|
9411
|
+
resetPlacement = initialPlacement;
|
|
9412
|
+
break;
|
|
9413
|
+
}
|
|
9414
|
+
}
|
|
9415
|
+
if (placement !== resetPlacement) {
|
|
9416
|
+
return {
|
|
9417
|
+
reset: {
|
|
9418
|
+
placement: resetPlacement
|
|
9419
|
+
}
|
|
9420
|
+
};
|
|
9421
|
+
}
|
|
9422
|
+
}
|
|
9423
|
+
return {};
|
|
9424
|
+
}
|
|
9425
|
+
};
|
|
9426
|
+
};
|
|
9427
|
+
|
|
9428
|
+
function getSideOffsets(overflow, rect) {
|
|
9429
|
+
return {
|
|
9430
|
+
top: overflow.top - rect.height,
|
|
9431
|
+
right: overflow.right - rect.width,
|
|
9432
|
+
bottom: overflow.bottom - rect.height,
|
|
9433
|
+
left: overflow.left - rect.width
|
|
9434
|
+
};
|
|
9435
|
+
}
|
|
9436
|
+
function isAnySideFullyClipped(overflow) {
|
|
9437
|
+
return sides.some(side => overflow[side] >= 0);
|
|
9438
|
+
}
|
|
9439
|
+
/**
|
|
9440
|
+
* Provides data to hide the floating element in applicable situations, such as
|
|
9441
|
+
* when it is not in the same clipping context as the reference element.
|
|
9442
|
+
* @see https://floating-ui.com/docs/hide
|
|
9443
|
+
*/
|
|
9444
|
+
const hide$2 = function (options) {
|
|
9445
|
+
if (options === void 0) {
|
|
9446
|
+
options = {};
|
|
9447
|
+
}
|
|
9448
|
+
return {
|
|
9449
|
+
name: 'hide',
|
|
9450
|
+
options,
|
|
9451
|
+
async fn(state) {
|
|
9452
|
+
const {
|
|
9453
|
+
rects
|
|
9454
|
+
} = state;
|
|
9455
|
+
const {
|
|
9456
|
+
strategy = 'referenceHidden',
|
|
9457
|
+
...detectOverflowOptions
|
|
9458
|
+
} = evaluate(options, state);
|
|
9459
|
+
switch (strategy) {
|
|
9460
|
+
case 'referenceHidden':
|
|
9461
|
+
{
|
|
9462
|
+
const overflow = await detectOverflow(state, {
|
|
9463
|
+
...detectOverflowOptions,
|
|
9464
|
+
elementContext: 'reference'
|
|
9465
|
+
});
|
|
9466
|
+
const offsets = getSideOffsets(overflow, rects.reference);
|
|
9467
|
+
return {
|
|
9468
|
+
data: {
|
|
9469
|
+
referenceHiddenOffsets: offsets,
|
|
9470
|
+
referenceHidden: isAnySideFullyClipped(offsets)
|
|
9471
|
+
}
|
|
9472
|
+
};
|
|
9473
|
+
}
|
|
9474
|
+
case 'escaped':
|
|
9475
|
+
{
|
|
9476
|
+
const overflow = await detectOverflow(state, {
|
|
9477
|
+
...detectOverflowOptions,
|
|
9478
|
+
altBoundary: true
|
|
9479
|
+
});
|
|
9480
|
+
const offsets = getSideOffsets(overflow, rects.floating);
|
|
9481
|
+
return {
|
|
9482
|
+
data: {
|
|
9483
|
+
escapedOffsets: offsets,
|
|
9484
|
+
escaped: isAnySideFullyClipped(offsets)
|
|
9485
|
+
}
|
|
9486
|
+
};
|
|
9487
|
+
}
|
|
9488
|
+
default:
|
|
9489
|
+
{
|
|
9490
|
+
return {};
|
|
9491
|
+
}
|
|
9492
|
+
}
|
|
9493
|
+
}
|
|
9494
|
+
};
|
|
9495
|
+
};
|
|
9496
|
+
|
|
9497
|
+
const originSides = /*#__PURE__*/new Set(['left', 'top']);
|
|
9498
|
+
|
|
9499
|
+
// For type backwards-compatibility, the `OffsetOptions` type was also
|
|
9500
|
+
// Derivable.
|
|
9501
|
+
|
|
9502
|
+
async function convertValueToCoords(state, options) {
|
|
9503
|
+
const {
|
|
9504
|
+
placement,
|
|
9505
|
+
platform,
|
|
9506
|
+
elements
|
|
9507
|
+
} = state;
|
|
9508
|
+
const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
|
|
9509
|
+
const side = getSide(placement);
|
|
9510
|
+
const alignment = getAlignment(placement);
|
|
9511
|
+
const isVertical = getSideAxis(placement) === 'y';
|
|
9512
|
+
const mainAxisMulti = originSides.has(side) ? -1 : 1;
|
|
9513
|
+
const crossAxisMulti = rtl && isVertical ? -1 : 1;
|
|
9514
|
+
const rawValue = evaluate(options, state);
|
|
9515
|
+
|
|
9516
|
+
// eslint-disable-next-line prefer-const
|
|
9517
|
+
let {
|
|
9518
|
+
mainAxis,
|
|
9519
|
+
crossAxis,
|
|
9520
|
+
alignmentAxis
|
|
9521
|
+
} = typeof rawValue === 'number' ? {
|
|
9522
|
+
mainAxis: rawValue,
|
|
9523
|
+
crossAxis: 0,
|
|
9524
|
+
alignmentAxis: null
|
|
9525
|
+
} : {
|
|
9526
|
+
mainAxis: rawValue.mainAxis || 0,
|
|
9527
|
+
crossAxis: rawValue.crossAxis || 0,
|
|
9528
|
+
alignmentAxis: rawValue.alignmentAxis
|
|
9529
|
+
};
|
|
9530
|
+
if (alignment && typeof alignmentAxis === 'number') {
|
|
9531
|
+
crossAxis = alignment === 'end' ? alignmentAxis * -1 : alignmentAxis;
|
|
9532
|
+
}
|
|
9533
|
+
return isVertical ? {
|
|
9534
|
+
x: crossAxis * crossAxisMulti,
|
|
9535
|
+
y: mainAxis * mainAxisMulti
|
|
9536
|
+
} : {
|
|
9537
|
+
x: mainAxis * mainAxisMulti,
|
|
9538
|
+
y: crossAxis * crossAxisMulti
|
|
9539
|
+
};
|
|
9540
|
+
}
|
|
9541
|
+
|
|
9542
|
+
/**
|
|
9543
|
+
* Modifies the placement by translating the floating element along the
|
|
9544
|
+
* specified axes.
|
|
9545
|
+
* A number (shorthand for `mainAxis` or distance), or an axes configuration
|
|
9546
|
+
* object may be passed.
|
|
9547
|
+
* @see https://floating-ui.com/docs/offset
|
|
9548
|
+
*/
|
|
9549
|
+
const offset$2 = function (options) {
|
|
9550
|
+
if (options === void 0) {
|
|
9551
|
+
options = 0;
|
|
9552
|
+
}
|
|
9553
|
+
return {
|
|
9554
|
+
name: 'offset',
|
|
9555
|
+
options,
|
|
9556
|
+
async fn(state) {
|
|
9557
|
+
var _middlewareData$offse, _middlewareData$arrow;
|
|
9558
|
+
const {
|
|
9559
|
+
x,
|
|
9560
|
+
y,
|
|
9561
|
+
placement,
|
|
9562
|
+
middlewareData
|
|
9563
|
+
} = state;
|
|
9564
|
+
const diffCoords = await convertValueToCoords(state, options);
|
|
9565
|
+
|
|
9566
|
+
// If the placement is the same and the arrow caused an alignment offset
|
|
9567
|
+
// then we don't need to change the positioning coordinates.
|
|
9568
|
+
if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
|
|
9569
|
+
return {};
|
|
9570
|
+
}
|
|
9571
|
+
return {
|
|
9572
|
+
x: x + diffCoords.x,
|
|
9573
|
+
y: y + diffCoords.y,
|
|
9574
|
+
data: {
|
|
9575
|
+
...diffCoords,
|
|
9576
|
+
placement
|
|
9577
|
+
}
|
|
9578
|
+
};
|
|
9579
|
+
}
|
|
9580
|
+
};
|
|
9581
|
+
};
|
|
9582
|
+
|
|
9583
|
+
/**
|
|
9584
|
+
* Optimizes the visibility of the floating element by shifting it in order to
|
|
9585
|
+
* keep it in view when it will overflow the clipping boundary.
|
|
9586
|
+
* @see https://floating-ui.com/docs/shift
|
|
9587
|
+
*/
|
|
9588
|
+
const shift$2 = function (options) {
|
|
9589
|
+
if (options === void 0) {
|
|
9590
|
+
options = {};
|
|
9591
|
+
}
|
|
9592
|
+
return {
|
|
9593
|
+
name: 'shift',
|
|
9594
|
+
options,
|
|
9595
|
+
async fn(state) {
|
|
9596
|
+
const {
|
|
9597
|
+
x,
|
|
9598
|
+
y,
|
|
9599
|
+
placement
|
|
9600
|
+
} = state;
|
|
9601
|
+
const {
|
|
9602
|
+
mainAxis: checkMainAxis = true,
|
|
9603
|
+
crossAxis: checkCrossAxis = false,
|
|
9604
|
+
limiter = {
|
|
9605
|
+
fn: _ref => {
|
|
9606
|
+
let {
|
|
9607
|
+
x,
|
|
9608
|
+
y
|
|
9609
|
+
} = _ref;
|
|
9610
|
+
return {
|
|
9611
|
+
x,
|
|
9612
|
+
y
|
|
9613
|
+
};
|
|
9614
|
+
}
|
|
9615
|
+
},
|
|
9616
|
+
...detectOverflowOptions
|
|
9617
|
+
} = evaluate(options, state);
|
|
9618
|
+
const coords = {
|
|
9619
|
+
x,
|
|
9620
|
+
y
|
|
9621
|
+
};
|
|
9622
|
+
const overflow = await detectOverflow(state, detectOverflowOptions);
|
|
9623
|
+
const crossAxis = getSideAxis(getSide(placement));
|
|
9624
|
+
const mainAxis = getOppositeAxis(crossAxis);
|
|
9625
|
+
let mainAxisCoord = coords[mainAxis];
|
|
9626
|
+
let crossAxisCoord = coords[crossAxis];
|
|
9627
|
+
if (checkMainAxis) {
|
|
9628
|
+
const minSide = mainAxis === 'y' ? 'top' : 'left';
|
|
9629
|
+
const maxSide = mainAxis === 'y' ? 'bottom' : 'right';
|
|
9630
|
+
const min = mainAxisCoord + overflow[minSide];
|
|
9631
|
+
const max = mainAxisCoord - overflow[maxSide];
|
|
9632
|
+
mainAxisCoord = clamp(min, mainAxisCoord, max);
|
|
9633
|
+
}
|
|
9634
|
+
if (checkCrossAxis) {
|
|
9635
|
+
const minSide = crossAxis === 'y' ? 'top' : 'left';
|
|
9636
|
+
const maxSide = crossAxis === 'y' ? 'bottom' : 'right';
|
|
9637
|
+
const min = crossAxisCoord + overflow[minSide];
|
|
9638
|
+
const max = crossAxisCoord - overflow[maxSide];
|
|
9639
|
+
crossAxisCoord = clamp(min, crossAxisCoord, max);
|
|
9640
|
+
}
|
|
9641
|
+
const limitedCoords = limiter.fn({
|
|
9642
|
+
...state,
|
|
9643
|
+
[mainAxis]: mainAxisCoord,
|
|
9644
|
+
[crossAxis]: crossAxisCoord
|
|
9645
|
+
});
|
|
9646
|
+
return {
|
|
9647
|
+
...limitedCoords,
|
|
9648
|
+
data: {
|
|
9649
|
+
x: limitedCoords.x - x,
|
|
9650
|
+
y: limitedCoords.y - y,
|
|
9651
|
+
enabled: {
|
|
9652
|
+
[mainAxis]: checkMainAxis,
|
|
9653
|
+
[crossAxis]: checkCrossAxis
|
|
9654
|
+
}
|
|
9655
|
+
}
|
|
9656
|
+
};
|
|
9657
|
+
}
|
|
9658
|
+
};
|
|
9659
|
+
};
|
|
9660
|
+
/**
|
|
9661
|
+
* Built-in `limiter` that will stop `shift()` at a certain point.
|
|
9662
|
+
*/
|
|
9663
|
+
const limitShift$2 = function (options) {
|
|
9664
|
+
if (options === void 0) {
|
|
9665
|
+
options = {};
|
|
9666
|
+
}
|
|
9667
|
+
return {
|
|
9668
|
+
options,
|
|
9669
|
+
fn(state) {
|
|
9670
|
+
const {
|
|
9671
|
+
x,
|
|
9672
|
+
y,
|
|
9673
|
+
placement,
|
|
9674
|
+
rects,
|
|
9675
|
+
middlewareData
|
|
9676
|
+
} = state;
|
|
9677
|
+
const {
|
|
9678
|
+
offset = 0,
|
|
9679
|
+
mainAxis: checkMainAxis = true,
|
|
9680
|
+
crossAxis: checkCrossAxis = true
|
|
9681
|
+
} = evaluate(options, state);
|
|
9682
|
+
const coords = {
|
|
9683
|
+
x,
|
|
9684
|
+
y
|
|
9685
|
+
};
|
|
9686
|
+
const crossAxis = getSideAxis(placement);
|
|
9687
|
+
const mainAxis = getOppositeAxis(crossAxis);
|
|
9688
|
+
let mainAxisCoord = coords[mainAxis];
|
|
9689
|
+
let crossAxisCoord = coords[crossAxis];
|
|
9690
|
+
const rawOffset = evaluate(offset, state);
|
|
9691
|
+
const computedOffset = typeof rawOffset === 'number' ? {
|
|
9692
|
+
mainAxis: rawOffset,
|
|
9693
|
+
crossAxis: 0
|
|
9694
|
+
} : {
|
|
9695
|
+
mainAxis: 0,
|
|
9696
|
+
crossAxis: 0,
|
|
9697
|
+
...rawOffset
|
|
9698
|
+
};
|
|
9699
|
+
if (checkMainAxis) {
|
|
9700
|
+
const len = mainAxis === 'y' ? 'height' : 'width';
|
|
9701
|
+
const limitMin = rects.reference[mainAxis] - rects.floating[len] + computedOffset.mainAxis;
|
|
9702
|
+
const limitMax = rects.reference[mainAxis] + rects.reference[len] - computedOffset.mainAxis;
|
|
9703
|
+
if (mainAxisCoord < limitMin) {
|
|
9704
|
+
mainAxisCoord = limitMin;
|
|
9705
|
+
} else if (mainAxisCoord > limitMax) {
|
|
9706
|
+
mainAxisCoord = limitMax;
|
|
9707
|
+
}
|
|
9708
|
+
}
|
|
9709
|
+
if (checkCrossAxis) {
|
|
9710
|
+
var _middlewareData$offse, _middlewareData$offse2;
|
|
9711
|
+
const len = mainAxis === 'y' ? 'width' : 'height';
|
|
9712
|
+
const isOriginSide = originSides.has(getSide(placement));
|
|
9713
|
+
const limitMin = rects.reference[crossAxis] - rects.floating[len] + (isOriginSide ? ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse[crossAxis]) || 0 : 0) + (isOriginSide ? 0 : computedOffset.crossAxis);
|
|
9714
|
+
const limitMax = rects.reference[crossAxis] + rects.reference[len] + (isOriginSide ? 0 : ((_middlewareData$offse2 = middlewareData.offset) == null ? void 0 : _middlewareData$offse2[crossAxis]) || 0) - (isOriginSide ? computedOffset.crossAxis : 0);
|
|
9715
|
+
if (crossAxisCoord < limitMin) {
|
|
9716
|
+
crossAxisCoord = limitMin;
|
|
9717
|
+
} else if (crossAxisCoord > limitMax) {
|
|
9718
|
+
crossAxisCoord = limitMax;
|
|
9719
|
+
}
|
|
9720
|
+
}
|
|
9721
|
+
return {
|
|
9722
|
+
[mainAxis]: mainAxisCoord,
|
|
9723
|
+
[crossAxis]: crossAxisCoord
|
|
9724
|
+
};
|
|
9725
|
+
}
|
|
9726
|
+
};
|
|
9727
|
+
};
|
|
9728
|
+
|
|
9729
|
+
/**
|
|
9730
|
+
* Provides data that allows you to change the size of the floating element —
|
|
9731
|
+
* for instance, prevent it from overflowing the clipping boundary or match the
|
|
9732
|
+
* width of the reference element.
|
|
9733
|
+
* @see https://floating-ui.com/docs/size
|
|
9734
|
+
*/
|
|
9735
|
+
const size$2 = function (options) {
|
|
9736
|
+
if (options === void 0) {
|
|
9737
|
+
options = {};
|
|
9738
|
+
}
|
|
9739
|
+
return {
|
|
9740
|
+
name: 'size',
|
|
9741
|
+
options,
|
|
9742
|
+
async fn(state) {
|
|
9743
|
+
var _state$middlewareData, _state$middlewareData2;
|
|
9744
|
+
const {
|
|
9745
|
+
placement,
|
|
9746
|
+
rects,
|
|
9747
|
+
platform,
|
|
9748
|
+
elements
|
|
9749
|
+
} = state;
|
|
9750
|
+
const {
|
|
9751
|
+
apply = () => {},
|
|
9752
|
+
...detectOverflowOptions
|
|
9753
|
+
} = evaluate(options, state);
|
|
9754
|
+
const overflow = await detectOverflow(state, detectOverflowOptions);
|
|
9755
|
+
const side = getSide(placement);
|
|
9756
|
+
const alignment = getAlignment(placement);
|
|
9757
|
+
const isYAxis = getSideAxis(placement) === 'y';
|
|
9758
|
+
const {
|
|
9759
|
+
width,
|
|
9760
|
+
height
|
|
9761
|
+
} = rects.floating;
|
|
9762
|
+
let heightSide;
|
|
9763
|
+
let widthSide;
|
|
9764
|
+
if (side === 'top' || side === 'bottom') {
|
|
9765
|
+
heightSide = side;
|
|
9766
|
+
widthSide = alignment === ((await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating))) ? 'start' : 'end') ? 'left' : 'right';
|
|
9767
|
+
} else {
|
|
9768
|
+
widthSide = side;
|
|
9769
|
+
heightSide = alignment === 'end' ? 'top' : 'bottom';
|
|
9770
|
+
}
|
|
9771
|
+
const maximumClippingHeight = height - overflow.top - overflow.bottom;
|
|
9772
|
+
const maximumClippingWidth = width - overflow.left - overflow.right;
|
|
9773
|
+
const overflowAvailableHeight = min(height - overflow[heightSide], maximumClippingHeight);
|
|
9774
|
+
const overflowAvailableWidth = min(width - overflow[widthSide], maximumClippingWidth);
|
|
9775
|
+
const noShift = !state.middlewareData.shift;
|
|
9776
|
+
let availableHeight = overflowAvailableHeight;
|
|
9777
|
+
let availableWidth = overflowAvailableWidth;
|
|
9778
|
+
if ((_state$middlewareData = state.middlewareData.shift) != null && _state$middlewareData.enabled.x) {
|
|
9779
|
+
availableWidth = maximumClippingWidth;
|
|
9780
|
+
}
|
|
9781
|
+
if ((_state$middlewareData2 = state.middlewareData.shift) != null && _state$middlewareData2.enabled.y) {
|
|
9782
|
+
availableHeight = maximumClippingHeight;
|
|
9783
|
+
}
|
|
9784
|
+
if (noShift && !alignment) {
|
|
9785
|
+
const xMin = max(overflow.left, 0);
|
|
9786
|
+
const xMax = max(overflow.right, 0);
|
|
9787
|
+
const yMin = max(overflow.top, 0);
|
|
9788
|
+
const yMax = max(overflow.bottom, 0);
|
|
9789
|
+
if (isYAxis) {
|
|
9790
|
+
availableWidth = width - 2 * (xMin !== 0 || xMax !== 0 ? xMin + xMax : max(overflow.left, overflow.right));
|
|
9791
|
+
} else {
|
|
9792
|
+
availableHeight = height - 2 * (yMin !== 0 || yMax !== 0 ? yMin + yMax : max(overflow.top, overflow.bottom));
|
|
9793
|
+
}
|
|
9794
|
+
}
|
|
9795
|
+
await apply({
|
|
9796
|
+
...state,
|
|
9797
|
+
availableWidth,
|
|
9798
|
+
availableHeight
|
|
9799
|
+
});
|
|
9800
|
+
const nextDimensions = await platform.getDimensions(elements.floating);
|
|
9801
|
+
if (width !== nextDimensions.width || height !== nextDimensions.height) {
|
|
9802
|
+
return {
|
|
9803
|
+
reset: {
|
|
9804
|
+
rects: true
|
|
9805
|
+
}
|
|
9806
|
+
};
|
|
9807
|
+
}
|
|
9808
|
+
return {};
|
|
9809
|
+
}
|
|
9810
|
+
};
|
|
9811
|
+
};
|
|
9812
|
+
|
|
9813
|
+
function hasWindow() {
|
|
9814
|
+
return typeof window !== 'undefined';
|
|
9815
|
+
}
|
|
9816
|
+
function getNodeName(node) {
|
|
9817
|
+
if (isNode(node)) {
|
|
9818
|
+
return (node.nodeName || '').toLowerCase();
|
|
9819
|
+
}
|
|
9820
|
+
// Mocked nodes in testing environments may not be instances of Node. By
|
|
9821
|
+
// returning `#document` an infinite loop won't occur.
|
|
9822
|
+
// https://github.com/floating-ui/floating-ui/issues/2317
|
|
9823
|
+
return '#document';
|
|
9824
|
+
}
|
|
9825
|
+
function getWindow(node) {
|
|
9826
|
+
var _node$ownerDocument;
|
|
9827
|
+
return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
|
|
9828
|
+
}
|
|
9829
|
+
function getDocumentElement(node) {
|
|
9830
|
+
var _ref;
|
|
9831
|
+
return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
|
|
9832
|
+
}
|
|
9833
|
+
function isNode(value) {
|
|
9834
|
+
if (!hasWindow()) {
|
|
9835
|
+
return false;
|
|
9836
|
+
}
|
|
9837
|
+
return value instanceof Node || value instanceof getWindow(value).Node;
|
|
9838
|
+
}
|
|
9839
|
+
function isElement(value) {
|
|
9840
|
+
if (!hasWindow()) {
|
|
9841
|
+
return false;
|
|
9842
|
+
}
|
|
9843
|
+
return value instanceof Element || value instanceof getWindow(value).Element;
|
|
9844
|
+
}
|
|
9845
|
+
function isHTMLElement(value) {
|
|
9846
|
+
if (!hasWindow()) {
|
|
9847
|
+
return false;
|
|
9848
|
+
}
|
|
9849
|
+
return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
|
|
9850
|
+
}
|
|
9851
|
+
function isShadowRoot(value) {
|
|
9852
|
+
if (!hasWindow() || typeof ShadowRoot === 'undefined') {
|
|
9853
|
+
return false;
|
|
9854
|
+
}
|
|
9855
|
+
return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
|
|
9856
|
+
}
|
|
9857
|
+
const invalidOverflowDisplayValues = /*#__PURE__*/new Set(['inline', 'contents']);
|
|
9858
|
+
function isOverflowElement(element) {
|
|
9859
|
+
const {
|
|
9860
|
+
overflow,
|
|
9861
|
+
overflowX,
|
|
9862
|
+
overflowY,
|
|
9863
|
+
display
|
|
9864
|
+
} = getComputedStyle$1(element);
|
|
9865
|
+
return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !invalidOverflowDisplayValues.has(display);
|
|
9866
|
+
}
|
|
9867
|
+
const tableElements = /*#__PURE__*/new Set(['table', 'td', 'th']);
|
|
9868
|
+
function isTableElement(element) {
|
|
9869
|
+
return tableElements.has(getNodeName(element));
|
|
9870
|
+
}
|
|
9871
|
+
const topLayerSelectors = [':popover-open', ':modal'];
|
|
9872
|
+
function isTopLayer(element) {
|
|
9873
|
+
return topLayerSelectors.some(selector => {
|
|
9874
|
+
try {
|
|
9875
|
+
return element.matches(selector);
|
|
9876
|
+
} catch (_e) {
|
|
9877
|
+
return false;
|
|
9878
|
+
}
|
|
9879
|
+
});
|
|
9880
|
+
}
|
|
9881
|
+
const transformProperties = ['transform', 'translate', 'scale', 'rotate', 'perspective'];
|
|
9882
|
+
const willChangeValues = ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter'];
|
|
9883
|
+
const containValues = ['paint', 'layout', 'strict', 'content'];
|
|
9884
|
+
function isContainingBlock(elementOrCss) {
|
|
9885
|
+
const webkit = isWebKit();
|
|
9886
|
+
const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
|
|
9887
|
+
|
|
9888
|
+
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
|
|
9889
|
+
// https://drafts.csswg.org/css-transforms-2/#individual-transforms
|
|
9890
|
+
return transformProperties.some(value => css[value] ? css[value] !== 'none' : false) || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || willChangeValues.some(value => (css.willChange || '').includes(value)) || containValues.some(value => (css.contain || '').includes(value));
|
|
9891
|
+
}
|
|
9892
|
+
function getContainingBlock(element) {
|
|
9893
|
+
let currentNode = getParentNode(element);
|
|
9894
|
+
while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
|
|
9895
|
+
if (isContainingBlock(currentNode)) {
|
|
9896
|
+
return currentNode;
|
|
9897
|
+
} else if (isTopLayer(currentNode)) {
|
|
9898
|
+
return null;
|
|
9899
|
+
}
|
|
9900
|
+
currentNode = getParentNode(currentNode);
|
|
9901
|
+
}
|
|
9902
|
+
return null;
|
|
9903
|
+
}
|
|
9904
|
+
function isWebKit() {
|
|
9905
|
+
if (typeof CSS === 'undefined' || !CSS.supports) return false;
|
|
9906
|
+
return CSS.supports('-webkit-backdrop-filter', 'none');
|
|
9907
|
+
}
|
|
9908
|
+
const lastTraversableNodeNames = /*#__PURE__*/new Set(['html', 'body', '#document']);
|
|
9909
|
+
function isLastTraversableNode(node) {
|
|
9910
|
+
return lastTraversableNodeNames.has(getNodeName(node));
|
|
9911
|
+
}
|
|
9912
|
+
function getComputedStyle$1(element) {
|
|
9913
|
+
return getWindow(element).getComputedStyle(element);
|
|
9914
|
+
}
|
|
9915
|
+
function getNodeScroll(element) {
|
|
9916
|
+
if (isElement(element)) {
|
|
9917
|
+
return {
|
|
9918
|
+
scrollLeft: element.scrollLeft,
|
|
9919
|
+
scrollTop: element.scrollTop
|
|
9920
|
+
};
|
|
9921
|
+
}
|
|
9922
|
+
return {
|
|
9923
|
+
scrollLeft: element.scrollX,
|
|
9924
|
+
scrollTop: element.scrollY
|
|
9925
|
+
};
|
|
9926
|
+
}
|
|
9927
|
+
function getParentNode(node) {
|
|
9928
|
+
if (getNodeName(node) === 'html') {
|
|
9929
|
+
return node;
|
|
9930
|
+
}
|
|
9931
|
+
const result =
|
|
9932
|
+
// Step into the shadow DOM of the parent of a slotted node.
|
|
9933
|
+
node.assignedSlot ||
|
|
9934
|
+
// DOM Element detected.
|
|
9935
|
+
node.parentNode ||
|
|
9936
|
+
// ShadowRoot detected.
|
|
9937
|
+
isShadowRoot(node) && node.host ||
|
|
9938
|
+
// Fallback.
|
|
9939
|
+
getDocumentElement(node);
|
|
9940
|
+
return isShadowRoot(result) ? result.host : result;
|
|
9941
|
+
}
|
|
9942
|
+
function getNearestOverflowAncestor(node) {
|
|
9943
|
+
const parentNode = getParentNode(node);
|
|
9944
|
+
if (isLastTraversableNode(parentNode)) {
|
|
9945
|
+
return node.ownerDocument ? node.ownerDocument.body : node.body;
|
|
9946
|
+
}
|
|
9947
|
+
if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
|
|
9948
|
+
return parentNode;
|
|
9949
|
+
}
|
|
9950
|
+
return getNearestOverflowAncestor(parentNode);
|
|
9951
|
+
}
|
|
9952
|
+
function getOverflowAncestors(node, list, traverseIframes) {
|
|
9953
|
+
var _node$ownerDocument2;
|
|
9954
|
+
if (list === void 0) {
|
|
9955
|
+
list = [];
|
|
9956
|
+
}
|
|
9957
|
+
if (traverseIframes === void 0) {
|
|
9958
|
+
traverseIframes = true;
|
|
9959
|
+
}
|
|
9960
|
+
const scrollableAncestor = getNearestOverflowAncestor(node);
|
|
9961
|
+
const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
|
|
9962
|
+
const win = getWindow(scrollableAncestor);
|
|
9963
|
+
if (isBody) {
|
|
9964
|
+
const frameElement = getFrameElement(win);
|
|
9965
|
+
return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
|
|
9966
|
+
}
|
|
9967
|
+
return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
|
|
9968
|
+
}
|
|
9969
|
+
function getFrameElement(win) {
|
|
9970
|
+
return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
|
|
9971
|
+
}
|
|
9972
|
+
|
|
9973
|
+
function getCssDimensions(element) {
|
|
9974
|
+
const css = getComputedStyle$1(element);
|
|
9975
|
+
// In testing environments, the `width` and `height` properties are empty
|
|
9976
|
+
// strings for SVG elements, returning NaN. Fallback to `0` in this case.
|
|
9977
|
+
let width = parseFloat(css.width) || 0;
|
|
9978
|
+
let height = parseFloat(css.height) || 0;
|
|
9979
|
+
const hasOffset = isHTMLElement(element);
|
|
9980
|
+
const offsetWidth = hasOffset ? element.offsetWidth : width;
|
|
9981
|
+
const offsetHeight = hasOffset ? element.offsetHeight : height;
|
|
9982
|
+
const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
|
|
9983
|
+
if (shouldFallback) {
|
|
9984
|
+
width = offsetWidth;
|
|
9985
|
+
height = offsetHeight;
|
|
9986
|
+
}
|
|
9987
|
+
return {
|
|
9988
|
+
width,
|
|
9989
|
+
height,
|
|
9990
|
+
$: shouldFallback
|
|
9991
|
+
};
|
|
9992
|
+
}
|
|
9993
|
+
|
|
9994
|
+
function unwrapElement(element) {
|
|
9995
|
+
return !isElement(element) ? element.contextElement : element;
|
|
9996
|
+
}
|
|
9997
|
+
|
|
9998
|
+
function getScale(element) {
|
|
9999
|
+
const domElement = unwrapElement(element);
|
|
10000
|
+
if (!isHTMLElement(domElement)) {
|
|
10001
|
+
return createCoords(1);
|
|
10002
|
+
}
|
|
10003
|
+
const rect = domElement.getBoundingClientRect();
|
|
10004
|
+
const {
|
|
10005
|
+
width,
|
|
10006
|
+
height,
|
|
10007
|
+
$
|
|
10008
|
+
} = getCssDimensions(domElement);
|
|
10009
|
+
let x = ($ ? round(rect.width) : rect.width) / width;
|
|
10010
|
+
let y = ($ ? round(rect.height) : rect.height) / height;
|
|
10011
|
+
|
|
10012
|
+
// 0, NaN, or Infinity should always fallback to 1.
|
|
10013
|
+
|
|
10014
|
+
if (!x || !Number.isFinite(x)) {
|
|
10015
|
+
x = 1;
|
|
10016
|
+
}
|
|
10017
|
+
if (!y || !Number.isFinite(y)) {
|
|
10018
|
+
y = 1;
|
|
10019
|
+
}
|
|
10020
|
+
return {
|
|
10021
|
+
x,
|
|
10022
|
+
y
|
|
10023
|
+
};
|
|
10024
|
+
}
|
|
10025
|
+
|
|
10026
|
+
const noOffsets = /*#__PURE__*/createCoords(0);
|
|
10027
|
+
function getVisualOffsets(element) {
|
|
10028
|
+
const win = getWindow(element);
|
|
10029
|
+
if (!isWebKit() || !win.visualViewport) {
|
|
10030
|
+
return noOffsets;
|
|
10031
|
+
}
|
|
10032
|
+
return {
|
|
10033
|
+
x: win.visualViewport.offsetLeft,
|
|
10034
|
+
y: win.visualViewport.offsetTop
|
|
10035
|
+
};
|
|
10036
|
+
}
|
|
10037
|
+
function shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) {
|
|
10038
|
+
if (isFixed === void 0) {
|
|
10039
|
+
isFixed = false;
|
|
10040
|
+
}
|
|
10041
|
+
if (!floatingOffsetParent || isFixed && floatingOffsetParent !== getWindow(element)) {
|
|
10042
|
+
return false;
|
|
10043
|
+
}
|
|
10044
|
+
return isFixed;
|
|
10045
|
+
}
|
|
10046
|
+
|
|
10047
|
+
function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
|
|
10048
|
+
if (includeScale === void 0) {
|
|
10049
|
+
includeScale = false;
|
|
10050
|
+
}
|
|
10051
|
+
if (isFixedStrategy === void 0) {
|
|
10052
|
+
isFixedStrategy = false;
|
|
10053
|
+
}
|
|
10054
|
+
const clientRect = element.getBoundingClientRect();
|
|
10055
|
+
const domElement = unwrapElement(element);
|
|
10056
|
+
let scale = createCoords(1);
|
|
10057
|
+
if (includeScale) {
|
|
10058
|
+
if (offsetParent) {
|
|
10059
|
+
if (isElement(offsetParent)) {
|
|
10060
|
+
scale = getScale(offsetParent);
|
|
10061
|
+
}
|
|
10062
|
+
} else {
|
|
10063
|
+
scale = getScale(element);
|
|
10064
|
+
}
|
|
10065
|
+
}
|
|
10066
|
+
const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0);
|
|
10067
|
+
let x = (clientRect.left + visualOffsets.x) / scale.x;
|
|
10068
|
+
let y = (clientRect.top + visualOffsets.y) / scale.y;
|
|
10069
|
+
let width = clientRect.width / scale.x;
|
|
10070
|
+
let height = clientRect.height / scale.y;
|
|
10071
|
+
if (domElement) {
|
|
10072
|
+
const win = getWindow(domElement);
|
|
10073
|
+
const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
|
|
10074
|
+
let currentWin = win;
|
|
10075
|
+
let currentIFrame = getFrameElement(currentWin);
|
|
10076
|
+
while (currentIFrame && offsetParent && offsetWin !== currentWin) {
|
|
10077
|
+
const iframeScale = getScale(currentIFrame);
|
|
10078
|
+
const iframeRect = currentIFrame.getBoundingClientRect();
|
|
10079
|
+
const css = getComputedStyle$1(currentIFrame);
|
|
10080
|
+
const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
|
|
10081
|
+
const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
|
|
10082
|
+
x *= iframeScale.x;
|
|
10083
|
+
y *= iframeScale.y;
|
|
10084
|
+
width *= iframeScale.x;
|
|
10085
|
+
height *= iframeScale.y;
|
|
10086
|
+
x += left;
|
|
10087
|
+
y += top;
|
|
10088
|
+
currentWin = getWindow(currentIFrame);
|
|
10089
|
+
currentIFrame = getFrameElement(currentWin);
|
|
10090
|
+
}
|
|
10091
|
+
}
|
|
10092
|
+
return rectToClientRect({
|
|
10093
|
+
width,
|
|
10094
|
+
height,
|
|
10095
|
+
x,
|
|
10096
|
+
y
|
|
10097
|
+
});
|
|
10098
|
+
}
|
|
10099
|
+
|
|
10100
|
+
// If <html> has a CSS width greater than the viewport, then this will be
|
|
10101
|
+
// incorrect for RTL.
|
|
10102
|
+
function getWindowScrollBarX(element, rect) {
|
|
10103
|
+
const leftScroll = getNodeScroll(element).scrollLeft;
|
|
10104
|
+
if (!rect) {
|
|
10105
|
+
return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;
|
|
10106
|
+
}
|
|
10107
|
+
return rect.left + leftScroll;
|
|
10108
|
+
}
|
|
10109
|
+
|
|
10110
|
+
function getHTMLOffset(documentElement, scroll) {
|
|
10111
|
+
const htmlRect = documentElement.getBoundingClientRect();
|
|
10112
|
+
const x = htmlRect.left + scroll.scrollLeft - getWindowScrollBarX(documentElement, htmlRect);
|
|
10113
|
+
const y = htmlRect.top + scroll.scrollTop;
|
|
10114
|
+
return {
|
|
10115
|
+
x,
|
|
10116
|
+
y
|
|
10117
|
+
};
|
|
10118
|
+
}
|
|
10119
|
+
|
|
10120
|
+
function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
|
|
10121
|
+
let {
|
|
10122
|
+
elements,
|
|
10123
|
+
rect,
|
|
10124
|
+
offsetParent,
|
|
10125
|
+
strategy
|
|
10126
|
+
} = _ref;
|
|
10127
|
+
const isFixed = strategy === 'fixed';
|
|
10128
|
+
const documentElement = getDocumentElement(offsetParent);
|
|
10129
|
+
const topLayer = elements ? isTopLayer(elements.floating) : false;
|
|
10130
|
+
if (offsetParent === documentElement || topLayer && isFixed) {
|
|
10131
|
+
return rect;
|
|
10132
|
+
}
|
|
10133
|
+
let scroll = {
|
|
10134
|
+
scrollLeft: 0,
|
|
10135
|
+
scrollTop: 0
|
|
10136
|
+
};
|
|
10137
|
+
let scale = createCoords(1);
|
|
10138
|
+
const offsets = createCoords(0);
|
|
10139
|
+
const isOffsetParentAnElement = isHTMLElement(offsetParent);
|
|
10140
|
+
if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
|
|
10141
|
+
if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
|
|
10142
|
+
scroll = getNodeScroll(offsetParent);
|
|
10143
|
+
}
|
|
10144
|
+
if (isHTMLElement(offsetParent)) {
|
|
10145
|
+
const offsetRect = getBoundingClientRect(offsetParent);
|
|
10146
|
+
scale = getScale(offsetParent);
|
|
10147
|
+
offsets.x = offsetRect.x + offsetParent.clientLeft;
|
|
10148
|
+
offsets.y = offsetRect.y + offsetParent.clientTop;
|
|
10149
|
+
}
|
|
10150
|
+
}
|
|
10151
|
+
const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
|
|
10152
|
+
return {
|
|
10153
|
+
width: rect.width * scale.x,
|
|
10154
|
+
height: rect.height * scale.y,
|
|
10155
|
+
x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x + htmlOffset.x,
|
|
10156
|
+
y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y + htmlOffset.y
|
|
10157
|
+
};
|
|
10158
|
+
}
|
|
10159
|
+
|
|
10160
|
+
function getClientRects(element) {
|
|
10161
|
+
return Array.from(element.getClientRects());
|
|
10162
|
+
}
|
|
10163
|
+
|
|
10164
|
+
// Gets the entire size of the scrollable document area, even extending outside
|
|
10165
|
+
// of the `<html>` and `<body>` rect bounds if horizontally scrollable.
|
|
10166
|
+
function getDocumentRect(element) {
|
|
10167
|
+
const html = getDocumentElement(element);
|
|
10168
|
+
const scroll = getNodeScroll(element);
|
|
10169
|
+
const body = element.ownerDocument.body;
|
|
10170
|
+
const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
|
|
10171
|
+
const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
|
|
10172
|
+
let x = -scroll.scrollLeft + getWindowScrollBarX(element);
|
|
10173
|
+
const y = -scroll.scrollTop;
|
|
10174
|
+
if (getComputedStyle$1(body).direction === 'rtl') {
|
|
10175
|
+
x += max(html.clientWidth, body.clientWidth) - width;
|
|
10176
|
+
}
|
|
10177
|
+
return {
|
|
10178
|
+
width,
|
|
10179
|
+
height,
|
|
10180
|
+
x,
|
|
10181
|
+
y
|
|
10182
|
+
};
|
|
10183
|
+
}
|
|
10184
|
+
|
|
10185
|
+
// Safety check: ensure the scrollbar space is reasonable in case this
|
|
10186
|
+
// calculation is affected by unusual styles.
|
|
10187
|
+
// Most scrollbars leave 15-18px of space.
|
|
10188
|
+
const SCROLLBAR_MAX = 25;
|
|
10189
|
+
function getViewportRect(element, strategy) {
|
|
10190
|
+
const win = getWindow(element);
|
|
10191
|
+
const html = getDocumentElement(element);
|
|
10192
|
+
const visualViewport = win.visualViewport;
|
|
10193
|
+
let width = html.clientWidth;
|
|
10194
|
+
let height = html.clientHeight;
|
|
10195
|
+
let x = 0;
|
|
10196
|
+
let y = 0;
|
|
10197
|
+
if (visualViewport) {
|
|
10198
|
+
width = visualViewport.width;
|
|
10199
|
+
height = visualViewport.height;
|
|
10200
|
+
const visualViewportBased = isWebKit();
|
|
10201
|
+
if (!visualViewportBased || visualViewportBased && strategy === 'fixed') {
|
|
10202
|
+
x = visualViewport.offsetLeft;
|
|
10203
|
+
y = visualViewport.offsetTop;
|
|
10204
|
+
}
|
|
10205
|
+
}
|
|
10206
|
+
const windowScrollbarX = getWindowScrollBarX(html);
|
|
10207
|
+
// <html> `overflow: hidden` + `scrollbar-gutter: stable` reduces the
|
|
10208
|
+
// visual width of the <html> but this is not considered in the size
|
|
10209
|
+
// of `html.clientWidth`.
|
|
10210
|
+
if (windowScrollbarX <= 0) {
|
|
10211
|
+
const doc = html.ownerDocument;
|
|
10212
|
+
const body = doc.body;
|
|
10213
|
+
const bodyStyles = getComputedStyle(body);
|
|
10214
|
+
const bodyMarginInline = doc.compatMode === 'CSS1Compat' ? parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight) || 0 : 0;
|
|
10215
|
+
const clippingStableScrollbarWidth = Math.abs(html.clientWidth - body.clientWidth - bodyMarginInline);
|
|
10216
|
+
if (clippingStableScrollbarWidth <= SCROLLBAR_MAX) {
|
|
10217
|
+
width -= clippingStableScrollbarWidth;
|
|
10218
|
+
}
|
|
10219
|
+
} else if (windowScrollbarX <= SCROLLBAR_MAX) {
|
|
10220
|
+
// If the <body> scrollbar is on the left, the width needs to be extended
|
|
10221
|
+
// by the scrollbar amount so there isn't extra space on the right.
|
|
10222
|
+
width += windowScrollbarX;
|
|
10223
|
+
}
|
|
10224
|
+
return {
|
|
10225
|
+
width,
|
|
10226
|
+
height,
|
|
10227
|
+
x,
|
|
10228
|
+
y
|
|
10229
|
+
};
|
|
10230
|
+
}
|
|
10231
|
+
|
|
10232
|
+
const absoluteOrFixed = /*#__PURE__*/new Set(['absolute', 'fixed']);
|
|
10233
|
+
// Returns the inner client rect, subtracting scrollbars if present.
|
|
10234
|
+
function getInnerBoundingClientRect(element, strategy) {
|
|
10235
|
+
const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
|
|
10236
|
+
const top = clientRect.top + element.clientTop;
|
|
10237
|
+
const left = clientRect.left + element.clientLeft;
|
|
10238
|
+
const scale = isHTMLElement(element) ? getScale(element) : createCoords(1);
|
|
10239
|
+
const width = element.clientWidth * scale.x;
|
|
10240
|
+
const height = element.clientHeight * scale.y;
|
|
10241
|
+
const x = left * scale.x;
|
|
10242
|
+
const y = top * scale.y;
|
|
10243
|
+
return {
|
|
10244
|
+
width,
|
|
10245
|
+
height,
|
|
10246
|
+
x,
|
|
10247
|
+
y
|
|
10248
|
+
};
|
|
10249
|
+
}
|
|
10250
|
+
function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
|
|
10251
|
+
let rect;
|
|
10252
|
+
if (clippingAncestor === 'viewport') {
|
|
10253
|
+
rect = getViewportRect(element, strategy);
|
|
10254
|
+
} else if (clippingAncestor === 'document') {
|
|
10255
|
+
rect = getDocumentRect(getDocumentElement(element));
|
|
10256
|
+
} else if (isElement(clippingAncestor)) {
|
|
10257
|
+
rect = getInnerBoundingClientRect(clippingAncestor, strategy);
|
|
10258
|
+
} else {
|
|
10259
|
+
const visualOffsets = getVisualOffsets(element);
|
|
10260
|
+
rect = {
|
|
10261
|
+
x: clippingAncestor.x - visualOffsets.x,
|
|
10262
|
+
y: clippingAncestor.y - visualOffsets.y,
|
|
10263
|
+
width: clippingAncestor.width,
|
|
10264
|
+
height: clippingAncestor.height
|
|
10265
|
+
};
|
|
10266
|
+
}
|
|
10267
|
+
return rectToClientRect(rect);
|
|
10268
|
+
}
|
|
10269
|
+
function hasFixedPositionAncestor(element, stopNode) {
|
|
10270
|
+
const parentNode = getParentNode(element);
|
|
10271
|
+
if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
|
|
10272
|
+
return false;
|
|
10273
|
+
}
|
|
10274
|
+
return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
|
|
10275
|
+
}
|
|
10276
|
+
|
|
10277
|
+
// A "clipping ancestor" is an `overflow` element with the characteristic of
|
|
10278
|
+
// clipping (or hiding) child elements. This returns all clipping ancestors
|
|
10279
|
+
// of the given element up the tree.
|
|
10280
|
+
function getClippingElementAncestors(element, cache) {
|
|
10281
|
+
const cachedResult = cache.get(element);
|
|
10282
|
+
if (cachedResult) {
|
|
10283
|
+
return cachedResult;
|
|
10284
|
+
}
|
|
10285
|
+
let result = getOverflowAncestors(element, [], false).filter(el => isElement(el) && getNodeName(el) !== 'body');
|
|
10286
|
+
let currentContainingBlockComputedStyle = null;
|
|
10287
|
+
const elementIsFixed = getComputedStyle$1(element).position === 'fixed';
|
|
10288
|
+
let currentNode = elementIsFixed ? getParentNode(element) : element;
|
|
10289
|
+
|
|
10290
|
+
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
|
|
10291
|
+
while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
|
|
10292
|
+
const computedStyle = getComputedStyle$1(currentNode);
|
|
10293
|
+
const currentNodeIsContaining = isContainingBlock(currentNode);
|
|
10294
|
+
if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
|
|
10295
|
+
currentContainingBlockComputedStyle = null;
|
|
10296
|
+
}
|
|
10297
|
+
const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && absoluteOrFixed.has(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
|
|
10298
|
+
if (shouldDropCurrentNode) {
|
|
10299
|
+
// Drop non-containing blocks.
|
|
10300
|
+
result = result.filter(ancestor => ancestor !== currentNode);
|
|
10301
|
+
} else {
|
|
10302
|
+
// Record last containing block for next iteration.
|
|
10303
|
+
currentContainingBlockComputedStyle = computedStyle;
|
|
10304
|
+
}
|
|
10305
|
+
currentNode = getParentNode(currentNode);
|
|
10306
|
+
}
|
|
10307
|
+
cache.set(element, result);
|
|
10308
|
+
return result;
|
|
10309
|
+
}
|
|
10310
|
+
|
|
10311
|
+
// Gets the maximum area that the element is visible in due to any number of
|
|
10312
|
+
// clipping ancestors.
|
|
10313
|
+
function getClippingRect(_ref) {
|
|
10314
|
+
let {
|
|
10315
|
+
element,
|
|
10316
|
+
boundary,
|
|
10317
|
+
rootBoundary,
|
|
10318
|
+
strategy
|
|
10319
|
+
} = _ref;
|
|
10320
|
+
const elementClippingAncestors = boundary === 'clippingAncestors' ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);
|
|
10321
|
+
const clippingAncestors = [...elementClippingAncestors, rootBoundary];
|
|
10322
|
+
const firstClippingAncestor = clippingAncestors[0];
|
|
10323
|
+
const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
|
|
10324
|
+
const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy);
|
|
10325
|
+
accRect.top = max(rect.top, accRect.top);
|
|
10326
|
+
accRect.right = min(rect.right, accRect.right);
|
|
10327
|
+
accRect.bottom = min(rect.bottom, accRect.bottom);
|
|
10328
|
+
accRect.left = max(rect.left, accRect.left);
|
|
10329
|
+
return accRect;
|
|
10330
|
+
}, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy));
|
|
10331
|
+
return {
|
|
10332
|
+
width: clippingRect.right - clippingRect.left,
|
|
10333
|
+
height: clippingRect.bottom - clippingRect.top,
|
|
10334
|
+
x: clippingRect.left,
|
|
10335
|
+
y: clippingRect.top
|
|
10336
|
+
};
|
|
10337
|
+
}
|
|
10338
|
+
|
|
10339
|
+
function getDimensions(element) {
|
|
10340
|
+
const {
|
|
10341
|
+
width,
|
|
10342
|
+
height
|
|
10343
|
+
} = getCssDimensions(element);
|
|
10344
|
+
return {
|
|
10345
|
+
width,
|
|
10346
|
+
height
|
|
10347
|
+
};
|
|
10348
|
+
}
|
|
10349
|
+
|
|
10350
|
+
function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
|
|
10351
|
+
const isOffsetParentAnElement = isHTMLElement(offsetParent);
|
|
10352
|
+
const documentElement = getDocumentElement(offsetParent);
|
|
10353
|
+
const isFixed = strategy === 'fixed';
|
|
10354
|
+
const rect = getBoundingClientRect(element, true, isFixed, offsetParent);
|
|
10355
|
+
let scroll = {
|
|
10356
|
+
scrollLeft: 0,
|
|
10357
|
+
scrollTop: 0
|
|
10358
|
+
};
|
|
10359
|
+
const offsets = createCoords(0);
|
|
10360
|
+
|
|
10361
|
+
// If the <body> scrollbar appears on the left (e.g. RTL systems). Use
|
|
10362
|
+
// Firefox with layout.scrollbar.side = 3 in about:config to test this.
|
|
10363
|
+
function setLeftRTLScrollbarOffset() {
|
|
10364
|
+
offsets.x = getWindowScrollBarX(documentElement);
|
|
10365
|
+
}
|
|
10366
|
+
if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
|
|
10367
|
+
if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
|
|
10368
|
+
scroll = getNodeScroll(offsetParent);
|
|
10369
|
+
}
|
|
10370
|
+
if (isOffsetParentAnElement) {
|
|
10371
|
+
const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent);
|
|
10372
|
+
offsets.x = offsetRect.x + offsetParent.clientLeft;
|
|
10373
|
+
offsets.y = offsetRect.y + offsetParent.clientTop;
|
|
10374
|
+
} else if (documentElement) {
|
|
10375
|
+
setLeftRTLScrollbarOffset();
|
|
10376
|
+
}
|
|
10377
|
+
}
|
|
10378
|
+
if (isFixed && !isOffsetParentAnElement && documentElement) {
|
|
10379
|
+
setLeftRTLScrollbarOffset();
|
|
10380
|
+
}
|
|
10381
|
+
const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
|
|
10382
|
+
const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
|
|
10383
|
+
const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
|
|
10384
|
+
return {
|
|
10385
|
+
x,
|
|
10386
|
+
y,
|
|
10387
|
+
width: rect.width,
|
|
10388
|
+
height: rect.height
|
|
10389
|
+
};
|
|
10390
|
+
}
|
|
10391
|
+
|
|
10392
|
+
function isStaticPositioned(element) {
|
|
10393
|
+
return getComputedStyle$1(element).position === 'static';
|
|
10394
|
+
}
|
|
10395
|
+
|
|
10396
|
+
function getTrueOffsetParent(element, polyfill) {
|
|
10397
|
+
if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') {
|
|
10398
|
+
return null;
|
|
10399
|
+
}
|
|
10400
|
+
if (polyfill) {
|
|
10401
|
+
return polyfill(element);
|
|
10402
|
+
}
|
|
10403
|
+
let rawOffsetParent = element.offsetParent;
|
|
10404
|
+
|
|
10405
|
+
// Firefox returns the <html> element as the offsetParent if it's non-static,
|
|
10406
|
+
// while Chrome and Safari return the <body> element. The <body> element must
|
|
10407
|
+
// be used to perform the correct calculations even if the <html> element is
|
|
10408
|
+
// non-static.
|
|
10409
|
+
if (getDocumentElement(element) === rawOffsetParent) {
|
|
10410
|
+
rawOffsetParent = rawOffsetParent.ownerDocument.body;
|
|
10411
|
+
}
|
|
10412
|
+
return rawOffsetParent;
|
|
10413
|
+
}
|
|
10414
|
+
|
|
10415
|
+
// Gets the closest ancestor positioned element. Handles some edge cases,
|
|
10416
|
+
// such as table ancestors and cross browser bugs.
|
|
10417
|
+
function getOffsetParent(element, polyfill) {
|
|
10418
|
+
const win = getWindow(element);
|
|
10419
|
+
if (isTopLayer(element)) {
|
|
10420
|
+
return win;
|
|
10421
|
+
}
|
|
10422
|
+
if (!isHTMLElement(element)) {
|
|
10423
|
+
let svgOffsetParent = getParentNode(element);
|
|
10424
|
+
while (svgOffsetParent && !isLastTraversableNode(svgOffsetParent)) {
|
|
10425
|
+
if (isElement(svgOffsetParent) && !isStaticPositioned(svgOffsetParent)) {
|
|
10426
|
+
return svgOffsetParent;
|
|
10427
|
+
}
|
|
10428
|
+
svgOffsetParent = getParentNode(svgOffsetParent);
|
|
10429
|
+
}
|
|
10430
|
+
return win;
|
|
10431
|
+
}
|
|
10432
|
+
let offsetParent = getTrueOffsetParent(element, polyfill);
|
|
10433
|
+
while (offsetParent && isTableElement(offsetParent) && isStaticPositioned(offsetParent)) {
|
|
10434
|
+
offsetParent = getTrueOffsetParent(offsetParent, polyfill);
|
|
10435
|
+
}
|
|
10436
|
+
if (offsetParent && isLastTraversableNode(offsetParent) && isStaticPositioned(offsetParent) && !isContainingBlock(offsetParent)) {
|
|
10437
|
+
return win;
|
|
10438
|
+
}
|
|
10439
|
+
return offsetParent || getContainingBlock(element) || win;
|
|
10440
|
+
}
|
|
10441
|
+
|
|
10442
|
+
const getElementRects = async function (data) {
|
|
10443
|
+
const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
|
|
10444
|
+
const getDimensionsFn = this.getDimensions;
|
|
10445
|
+
const floatingDimensions = await getDimensionsFn(data.floating);
|
|
10446
|
+
return {
|
|
10447
|
+
reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),
|
|
10448
|
+
floating: {
|
|
10449
|
+
x: 0,
|
|
10450
|
+
y: 0,
|
|
10451
|
+
width: floatingDimensions.width,
|
|
10452
|
+
height: floatingDimensions.height
|
|
10453
|
+
}
|
|
10454
|
+
};
|
|
10455
|
+
};
|
|
10456
|
+
|
|
10457
|
+
function isRTL(element) {
|
|
10458
|
+
return getComputedStyle$1(element).direction === 'rtl';
|
|
10459
|
+
}
|
|
10460
|
+
|
|
10461
|
+
const platform = {
|
|
10462
|
+
convertOffsetParentRelativeRectToViewportRelativeRect,
|
|
10463
|
+
getDocumentElement,
|
|
10464
|
+
getClippingRect,
|
|
10465
|
+
getOffsetParent,
|
|
10466
|
+
getElementRects,
|
|
10467
|
+
getClientRects,
|
|
10468
|
+
getDimensions,
|
|
10469
|
+
getScale,
|
|
10470
|
+
isElement,
|
|
10471
|
+
isRTL
|
|
10472
|
+
};
|
|
10473
|
+
|
|
10474
|
+
function rectsAreEqual(a, b) {
|
|
10475
|
+
return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
|
|
10476
|
+
}
|
|
10477
|
+
|
|
10478
|
+
// https://samthor.au/2021/observing-dom/
|
|
10479
|
+
function observeMove(element, onMove) {
|
|
10480
|
+
let io = null;
|
|
10481
|
+
let timeoutId;
|
|
10482
|
+
const root = getDocumentElement(element);
|
|
10483
|
+
function cleanup() {
|
|
10484
|
+
var _io;
|
|
10485
|
+
clearTimeout(timeoutId);
|
|
10486
|
+
(_io = io) == null || _io.disconnect();
|
|
10487
|
+
io = null;
|
|
10488
|
+
}
|
|
10489
|
+
function refresh(skip, threshold) {
|
|
10490
|
+
if (skip === void 0) {
|
|
10491
|
+
skip = false;
|
|
10492
|
+
}
|
|
10493
|
+
if (threshold === void 0) {
|
|
10494
|
+
threshold = 1;
|
|
10495
|
+
}
|
|
10496
|
+
cleanup();
|
|
10497
|
+
const elementRectForRootMargin = element.getBoundingClientRect();
|
|
10498
|
+
const {
|
|
10499
|
+
left,
|
|
10500
|
+
top,
|
|
10501
|
+
width,
|
|
10502
|
+
height
|
|
10503
|
+
} = elementRectForRootMargin;
|
|
10504
|
+
if (!skip) {
|
|
10505
|
+
onMove();
|
|
10506
|
+
}
|
|
10507
|
+
if (!width || !height) {
|
|
10508
|
+
return;
|
|
10509
|
+
}
|
|
10510
|
+
const insetTop = floor(top);
|
|
10511
|
+
const insetRight = floor(root.clientWidth - (left + width));
|
|
10512
|
+
const insetBottom = floor(root.clientHeight - (top + height));
|
|
10513
|
+
const insetLeft = floor(left);
|
|
10514
|
+
const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px";
|
|
10515
|
+
const options = {
|
|
10516
|
+
rootMargin,
|
|
10517
|
+
threshold: max(0, min(1, threshold)) || 1
|
|
10518
|
+
};
|
|
10519
|
+
let isFirstUpdate = true;
|
|
10520
|
+
function handleObserve(entries) {
|
|
10521
|
+
const ratio = entries[0].intersectionRatio;
|
|
10522
|
+
if (ratio !== threshold) {
|
|
10523
|
+
if (!isFirstUpdate) {
|
|
10524
|
+
return refresh();
|
|
10525
|
+
}
|
|
10526
|
+
if (!ratio) {
|
|
10527
|
+
// If the reference is clipped, the ratio is 0. Throttle the refresh
|
|
10528
|
+
// to prevent an infinite loop of updates.
|
|
10529
|
+
timeoutId = setTimeout(() => {
|
|
10530
|
+
refresh(false, 1e-7);
|
|
10531
|
+
}, 1000);
|
|
10532
|
+
} else {
|
|
10533
|
+
refresh(false, ratio);
|
|
10534
|
+
}
|
|
10535
|
+
}
|
|
10536
|
+
if (ratio === 1 && !rectsAreEqual(elementRectForRootMargin, element.getBoundingClientRect())) {
|
|
10537
|
+
// It's possible that even though the ratio is reported as 1, the
|
|
10538
|
+
// element is not actually fully within the IntersectionObserver's root
|
|
10539
|
+
// area anymore. This can happen under performance constraints. This may
|
|
10540
|
+
// be a bug in the browser's IntersectionObserver implementation. To
|
|
10541
|
+
// work around this, we compare the element's bounding rect now with
|
|
10542
|
+
// what it was at the time we created the IntersectionObserver. If they
|
|
10543
|
+
// are not equal then the element moved, so we refresh.
|
|
10544
|
+
refresh();
|
|
10545
|
+
}
|
|
10546
|
+
isFirstUpdate = false;
|
|
10547
|
+
}
|
|
10548
|
+
|
|
10549
|
+
// Older browsers don't support a `document` as the root and will throw an
|
|
10550
|
+
// error.
|
|
10551
|
+
try {
|
|
10552
|
+
io = new IntersectionObserver(handleObserve, {
|
|
10553
|
+
...options,
|
|
10554
|
+
// Handle <iframe>s
|
|
10555
|
+
root: root.ownerDocument
|
|
10556
|
+
});
|
|
10557
|
+
} catch (_e) {
|
|
10558
|
+
io = new IntersectionObserver(handleObserve, options);
|
|
10559
|
+
}
|
|
10560
|
+
io.observe(element);
|
|
10561
|
+
}
|
|
10562
|
+
refresh(true);
|
|
10563
|
+
return cleanup;
|
|
10564
|
+
}
|
|
10565
|
+
|
|
10566
|
+
/**
|
|
10567
|
+
* Automatically updates the position of the floating element when necessary.
|
|
10568
|
+
* Should only be called when the floating element is mounted on the DOM or
|
|
10569
|
+
* visible on the screen.
|
|
10570
|
+
* @returns cleanup function that should be invoked when the floating element is
|
|
10571
|
+
* removed from the DOM or hidden from the screen.
|
|
10572
|
+
* @see https://floating-ui.com/docs/autoUpdate
|
|
10573
|
+
*/
|
|
10574
|
+
function autoUpdate(reference, floating, update, options) {
|
|
10575
|
+
if (options === void 0) {
|
|
10576
|
+
options = {};
|
|
10577
|
+
}
|
|
10578
|
+
const {
|
|
10579
|
+
ancestorScroll = true,
|
|
10580
|
+
ancestorResize = true,
|
|
10581
|
+
elementResize = typeof ResizeObserver === 'function',
|
|
10582
|
+
layoutShift = typeof IntersectionObserver === 'function',
|
|
10583
|
+
animationFrame = false
|
|
10584
|
+
} = options;
|
|
10585
|
+
const referenceEl = unwrapElement(reference);
|
|
10586
|
+
const ancestors = ancestorScroll || ancestorResize ? [...(referenceEl ? getOverflowAncestors(referenceEl) : []), ...getOverflowAncestors(floating)] : [];
|
|
10587
|
+
ancestors.forEach(ancestor => {
|
|
10588
|
+
ancestorScroll && ancestor.addEventListener('scroll', update, {
|
|
10589
|
+
passive: true
|
|
10590
|
+
});
|
|
10591
|
+
ancestorResize && ancestor.addEventListener('resize', update);
|
|
10592
|
+
});
|
|
10593
|
+
const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update) : null;
|
|
10594
|
+
let reobserveFrame = -1;
|
|
10595
|
+
let resizeObserver = null;
|
|
10596
|
+
if (elementResize) {
|
|
10597
|
+
resizeObserver = new ResizeObserver(_ref => {
|
|
10598
|
+
let [firstEntry] = _ref;
|
|
10599
|
+
if (firstEntry && firstEntry.target === referenceEl && resizeObserver) {
|
|
10600
|
+
// Prevent update loops when using the `size` middleware.
|
|
10601
|
+
// https://github.com/floating-ui/floating-ui/issues/1740
|
|
10602
|
+
resizeObserver.unobserve(floating);
|
|
10603
|
+
cancelAnimationFrame(reobserveFrame);
|
|
10604
|
+
reobserveFrame = requestAnimationFrame(() => {
|
|
10605
|
+
var _resizeObserver;
|
|
10606
|
+
(_resizeObserver = resizeObserver) == null || _resizeObserver.observe(floating);
|
|
10607
|
+
});
|
|
10608
|
+
}
|
|
10609
|
+
update();
|
|
10610
|
+
});
|
|
10611
|
+
if (referenceEl && !animationFrame) {
|
|
10612
|
+
resizeObserver.observe(referenceEl);
|
|
10613
|
+
}
|
|
10614
|
+
resizeObserver.observe(floating);
|
|
10615
|
+
}
|
|
10616
|
+
let frameId;
|
|
10617
|
+
let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
|
|
10618
|
+
if (animationFrame) {
|
|
10619
|
+
frameLoop();
|
|
10620
|
+
}
|
|
10621
|
+
function frameLoop() {
|
|
10622
|
+
const nextRefRect = getBoundingClientRect(reference);
|
|
10623
|
+
if (prevRefRect && !rectsAreEqual(prevRefRect, nextRefRect)) {
|
|
10624
|
+
update();
|
|
10625
|
+
}
|
|
10626
|
+
prevRefRect = nextRefRect;
|
|
10627
|
+
frameId = requestAnimationFrame(frameLoop);
|
|
10628
|
+
}
|
|
10629
|
+
update();
|
|
10630
|
+
return () => {
|
|
10631
|
+
var _resizeObserver2;
|
|
10632
|
+
ancestors.forEach(ancestor => {
|
|
10633
|
+
ancestorScroll && ancestor.removeEventListener('scroll', update);
|
|
10634
|
+
ancestorResize && ancestor.removeEventListener('resize', update);
|
|
10635
|
+
});
|
|
10636
|
+
cleanupIo == null || cleanupIo();
|
|
10637
|
+
(_resizeObserver2 = resizeObserver) == null || _resizeObserver2.disconnect();
|
|
10638
|
+
resizeObserver = null;
|
|
10639
|
+
if (animationFrame) {
|
|
10640
|
+
cancelAnimationFrame(frameId);
|
|
10641
|
+
}
|
|
10642
|
+
};
|
|
10643
|
+
}
|
|
10644
|
+
|
|
10645
|
+
/**
|
|
10646
|
+
* Modifies the placement by translating the floating element along the
|
|
10647
|
+
* specified axes.
|
|
10648
|
+
* A number (shorthand for `mainAxis` or distance), or an axes configuration
|
|
10649
|
+
* object may be passed.
|
|
10650
|
+
* @see https://floating-ui.com/docs/offset
|
|
10651
|
+
*/
|
|
10652
|
+
const offset$1 = offset$2;
|
|
10653
|
+
|
|
10654
|
+
/**
|
|
10655
|
+
* Optimizes the visibility of the floating element by shifting it in order to
|
|
10656
|
+
* keep it in view when it will overflow the clipping boundary.
|
|
10657
|
+
* @see https://floating-ui.com/docs/shift
|
|
10658
|
+
*/
|
|
10659
|
+
const shift$1 = shift$2;
|
|
10660
|
+
|
|
10661
|
+
/**
|
|
10662
|
+
* Optimizes the visibility of the floating element by flipping the `placement`
|
|
10663
|
+
* in order to keep it in view when the preferred placement(s) will overflow the
|
|
10664
|
+
* clipping boundary. Alternative to `autoPlacement`.
|
|
10665
|
+
* @see https://floating-ui.com/docs/flip
|
|
10666
|
+
*/
|
|
10667
|
+
const flip$1 = flip$2;
|
|
10668
|
+
|
|
10669
|
+
/**
|
|
10670
|
+
* Provides data that allows you to change the size of the floating element —
|
|
10671
|
+
* for instance, prevent it from overflowing the clipping boundary or match the
|
|
10672
|
+
* width of the reference element.
|
|
10673
|
+
* @see https://floating-ui.com/docs/size
|
|
10674
|
+
*/
|
|
10675
|
+
const size$1 = size$2;
|
|
10676
|
+
|
|
10677
|
+
/**
|
|
10678
|
+
* Provides data to hide the floating element in applicable situations, such as
|
|
10679
|
+
* when it is not in the same clipping context as the reference element.
|
|
10680
|
+
* @see https://floating-ui.com/docs/hide
|
|
10681
|
+
*/
|
|
10682
|
+
const hide$1 = hide$2;
|
|
10683
|
+
|
|
10684
|
+
/**
|
|
10685
|
+
* Provides data to position an inner element of the floating element so that it
|
|
10686
|
+
* appears centered to the reference element.
|
|
10687
|
+
* @see https://floating-ui.com/docs/arrow
|
|
10688
|
+
*/
|
|
10689
|
+
const arrow$2 = arrow$3;
|
|
10690
|
+
|
|
10691
|
+
/**
|
|
10692
|
+
* Built-in `limiter` that will stop `shift()` at a certain point.
|
|
10693
|
+
*/
|
|
10694
|
+
const limitShift$1 = limitShift$2;
|
|
10695
|
+
|
|
10696
|
+
/**
|
|
10697
|
+
* Computes the `x` and `y` coordinates that will place the floating element
|
|
10698
|
+
* next to a given reference element.
|
|
10699
|
+
*/
|
|
10700
|
+
const computePosition = (reference, floating, options) => {
|
|
10701
|
+
// This caches the expensive `getClippingElementAncestors` function so that
|
|
10702
|
+
// multiple lifecycle resets re-use the same result. It only lives for a
|
|
10703
|
+
// single call. If other functions become expensive, we can add them as well.
|
|
10704
|
+
const cache = new Map();
|
|
10705
|
+
const mergedOptions = {
|
|
10706
|
+
platform,
|
|
10707
|
+
...options
|
|
10708
|
+
};
|
|
10709
|
+
const platformWithCache = {
|
|
10710
|
+
...mergedOptions.platform,
|
|
10711
|
+
_c: cache
|
|
10712
|
+
};
|
|
10713
|
+
return computePosition$1(reference, floating, {
|
|
10714
|
+
...mergedOptions,
|
|
10715
|
+
platform: platformWithCache
|
|
10716
|
+
});
|
|
10717
|
+
};
|
|
10718
|
+
|
|
10719
|
+
var isClient = typeof document !== 'undefined';
|
|
10720
|
+
|
|
10721
|
+
var noop = function noop() {};
|
|
10722
|
+
var index = isClient ? useLayoutEffect : noop;
|
|
10723
|
+
|
|
10724
|
+
// Fork of `fast-deep-equal` that only does the comparisons we need and compares
|
|
10725
|
+
// functions
|
|
10726
|
+
function deepEqual(a, b) {
|
|
10727
|
+
if (a === b) {
|
|
10728
|
+
return true;
|
|
10729
|
+
}
|
|
10730
|
+
if (typeof a !== typeof b) {
|
|
10731
|
+
return false;
|
|
10732
|
+
}
|
|
10733
|
+
if (typeof a === 'function' && a.toString() === b.toString()) {
|
|
10734
|
+
return true;
|
|
10735
|
+
}
|
|
10736
|
+
let length;
|
|
10737
|
+
let i;
|
|
10738
|
+
let keys;
|
|
10739
|
+
if (a && b && typeof a === 'object') {
|
|
10740
|
+
if (Array.isArray(a)) {
|
|
10741
|
+
length = a.length;
|
|
10742
|
+
if (length !== b.length) return false;
|
|
10743
|
+
for (i = length; i-- !== 0;) {
|
|
10744
|
+
if (!deepEqual(a[i], b[i])) {
|
|
10745
|
+
return false;
|
|
10746
|
+
}
|
|
10747
|
+
}
|
|
10748
|
+
return true;
|
|
10749
|
+
}
|
|
10750
|
+
keys = Object.keys(a);
|
|
10751
|
+
length = keys.length;
|
|
10752
|
+
if (length !== Object.keys(b).length) {
|
|
10753
|
+
return false;
|
|
10754
|
+
}
|
|
10755
|
+
for (i = length; i-- !== 0;) {
|
|
10756
|
+
if (!{}.hasOwnProperty.call(b, keys[i])) {
|
|
10757
|
+
return false;
|
|
10758
|
+
}
|
|
10759
|
+
}
|
|
10760
|
+
for (i = length; i-- !== 0;) {
|
|
10761
|
+
const key = keys[i];
|
|
10762
|
+
if (key === '_owner' && a.$$typeof) {
|
|
10763
|
+
continue;
|
|
10764
|
+
}
|
|
10765
|
+
if (!deepEqual(a[key], b[key])) {
|
|
10766
|
+
return false;
|
|
10767
|
+
}
|
|
10768
|
+
}
|
|
10769
|
+
return true;
|
|
10770
|
+
}
|
|
10771
|
+
return a !== a && b !== b;
|
|
10772
|
+
}
|
|
10773
|
+
|
|
10774
|
+
function getDPR(element) {
|
|
10775
|
+
if (typeof window === 'undefined') {
|
|
10776
|
+
return 1;
|
|
10777
|
+
}
|
|
10778
|
+
const win = element.ownerDocument.defaultView || window;
|
|
10779
|
+
return win.devicePixelRatio || 1;
|
|
10780
|
+
}
|
|
10781
|
+
|
|
10782
|
+
function roundByDPR(element, value) {
|
|
10783
|
+
const dpr = getDPR(element);
|
|
10784
|
+
return Math.round(value * dpr) / dpr;
|
|
10785
|
+
}
|
|
10786
|
+
|
|
10787
|
+
function useLatestRef(value) {
|
|
10788
|
+
const ref = React.useRef(value);
|
|
10789
|
+
index(() => {
|
|
10790
|
+
ref.current = value;
|
|
10791
|
+
});
|
|
10792
|
+
return ref;
|
|
10793
|
+
}
|
|
10794
|
+
|
|
10795
|
+
/**
|
|
10796
|
+
* Provides data to position a floating element.
|
|
10797
|
+
* @see https://floating-ui.com/docs/useFloating
|
|
10798
|
+
*/
|
|
10799
|
+
function useFloating(options) {
|
|
10800
|
+
if (options === void 0) {
|
|
10801
|
+
options = {};
|
|
10802
|
+
}
|
|
10803
|
+
const {
|
|
10804
|
+
placement = 'bottom',
|
|
10805
|
+
strategy = 'absolute',
|
|
10806
|
+
middleware = [],
|
|
10807
|
+
platform,
|
|
10808
|
+
elements: {
|
|
10809
|
+
reference: externalReference,
|
|
10810
|
+
floating: externalFloating
|
|
10811
|
+
} = {},
|
|
10812
|
+
transform = true,
|
|
10813
|
+
whileElementsMounted,
|
|
10814
|
+
open
|
|
10815
|
+
} = options;
|
|
10816
|
+
const [data, setData] = React.useState({
|
|
10817
|
+
x: 0,
|
|
10818
|
+
y: 0,
|
|
10819
|
+
strategy,
|
|
10820
|
+
placement,
|
|
10821
|
+
middlewareData: {},
|
|
10822
|
+
isPositioned: false
|
|
10823
|
+
});
|
|
10824
|
+
const [latestMiddleware, setLatestMiddleware] = React.useState(middleware);
|
|
10825
|
+
if (!deepEqual(latestMiddleware, middleware)) {
|
|
10826
|
+
setLatestMiddleware(middleware);
|
|
10827
|
+
}
|
|
10828
|
+
const [_reference, _setReference] = React.useState(null);
|
|
10829
|
+
const [_floating, _setFloating] = React.useState(null);
|
|
10830
|
+
const setReference = React.useCallback(node => {
|
|
10831
|
+
if (node !== referenceRef.current) {
|
|
10832
|
+
referenceRef.current = node;
|
|
10833
|
+
_setReference(node);
|
|
10834
|
+
}
|
|
10835
|
+
}, []);
|
|
10836
|
+
const setFloating = React.useCallback(node => {
|
|
10837
|
+
if (node !== floatingRef.current) {
|
|
10838
|
+
floatingRef.current = node;
|
|
10839
|
+
_setFloating(node);
|
|
10840
|
+
}
|
|
10841
|
+
}, []);
|
|
10842
|
+
const referenceEl = externalReference || _reference;
|
|
10843
|
+
const floatingEl = externalFloating || _floating;
|
|
10844
|
+
const referenceRef = React.useRef(null);
|
|
10845
|
+
const floatingRef = React.useRef(null);
|
|
10846
|
+
const dataRef = React.useRef(data);
|
|
10847
|
+
const hasWhileElementsMounted = whileElementsMounted != null;
|
|
10848
|
+
const whileElementsMountedRef = useLatestRef(whileElementsMounted);
|
|
10849
|
+
const platformRef = useLatestRef(platform);
|
|
10850
|
+
const openRef = useLatestRef(open);
|
|
10851
|
+
const update = React.useCallback(() => {
|
|
10852
|
+
if (!referenceRef.current || !floatingRef.current) {
|
|
10853
|
+
return;
|
|
10854
|
+
}
|
|
10855
|
+
const config = {
|
|
10856
|
+
placement,
|
|
10857
|
+
strategy,
|
|
10858
|
+
middleware: latestMiddleware
|
|
10859
|
+
};
|
|
10860
|
+
if (platformRef.current) {
|
|
10861
|
+
config.platform = platformRef.current;
|
|
10862
|
+
}
|
|
10863
|
+
computePosition(referenceRef.current, floatingRef.current, config).then(data => {
|
|
10864
|
+
const fullData = {
|
|
10865
|
+
...data,
|
|
10866
|
+
// The floating element's position may be recomputed while it's closed
|
|
10867
|
+
// but still mounted (such as when transitioning out). To ensure
|
|
10868
|
+
// `isPositioned` will be `false` initially on the next open, avoid
|
|
10869
|
+
// setting it to `true` when `open === false` (must be specified).
|
|
10870
|
+
isPositioned: openRef.current !== false
|
|
10871
|
+
};
|
|
10872
|
+
if (isMountedRef.current && !deepEqual(dataRef.current, fullData)) {
|
|
10873
|
+
dataRef.current = fullData;
|
|
10874
|
+
reactDomExports.flushSync(() => {
|
|
10875
|
+
setData(fullData);
|
|
10876
|
+
});
|
|
10877
|
+
}
|
|
10878
|
+
});
|
|
10879
|
+
}, [latestMiddleware, placement, strategy, platformRef, openRef]);
|
|
10880
|
+
index(() => {
|
|
10881
|
+
if (open === false && dataRef.current.isPositioned) {
|
|
10882
|
+
dataRef.current.isPositioned = false;
|
|
10883
|
+
setData(data => ({
|
|
10884
|
+
...data,
|
|
10885
|
+
isPositioned: false
|
|
10886
|
+
}));
|
|
10887
|
+
}
|
|
10888
|
+
}, [open]);
|
|
10889
|
+
const isMountedRef = React.useRef(false);
|
|
10890
|
+
index(() => {
|
|
10891
|
+
isMountedRef.current = true;
|
|
10892
|
+
return () => {
|
|
10893
|
+
isMountedRef.current = false;
|
|
10894
|
+
};
|
|
10895
|
+
}, []);
|
|
10896
|
+
index(() => {
|
|
10897
|
+
if (referenceEl) referenceRef.current = referenceEl;
|
|
10898
|
+
if (floatingEl) floatingRef.current = floatingEl;
|
|
10899
|
+
if (referenceEl && floatingEl) {
|
|
10900
|
+
if (whileElementsMountedRef.current) {
|
|
10901
|
+
return whileElementsMountedRef.current(referenceEl, floatingEl, update);
|
|
10902
|
+
}
|
|
10903
|
+
update();
|
|
10904
|
+
}
|
|
10905
|
+
}, [referenceEl, floatingEl, update, whileElementsMountedRef, hasWhileElementsMounted]);
|
|
10906
|
+
const refs = React.useMemo(() => ({
|
|
10907
|
+
reference: referenceRef,
|
|
10908
|
+
floating: floatingRef,
|
|
10909
|
+
setReference,
|
|
10910
|
+
setFloating
|
|
10911
|
+
}), [setReference, setFloating]);
|
|
10912
|
+
const elements = React.useMemo(() => ({
|
|
10913
|
+
reference: referenceEl,
|
|
10914
|
+
floating: floatingEl
|
|
10915
|
+
}), [referenceEl, floatingEl]);
|
|
10916
|
+
const floatingStyles = React.useMemo(() => {
|
|
10917
|
+
const initialStyles = {
|
|
10918
|
+
position: strategy,
|
|
10919
|
+
left: 0,
|
|
10920
|
+
top: 0
|
|
10921
|
+
};
|
|
10922
|
+
if (!elements.floating) {
|
|
10923
|
+
return initialStyles;
|
|
10924
|
+
}
|
|
10925
|
+
const x = roundByDPR(elements.floating, data.x);
|
|
10926
|
+
const y = roundByDPR(elements.floating, data.y);
|
|
10927
|
+
if (transform) {
|
|
10928
|
+
return {
|
|
10929
|
+
...initialStyles,
|
|
10930
|
+
transform: "translate(" + x + "px, " + y + "px)",
|
|
10931
|
+
...(getDPR(elements.floating) >= 1.5 && {
|
|
10932
|
+
willChange: 'transform'
|
|
10933
|
+
})
|
|
10934
|
+
};
|
|
10935
|
+
}
|
|
10936
|
+
return {
|
|
10937
|
+
position: strategy,
|
|
10938
|
+
left: x,
|
|
10939
|
+
top: y
|
|
10940
|
+
};
|
|
10941
|
+
}, [strategy, transform, elements.floating, data.x, data.y]);
|
|
10942
|
+
return React.useMemo(() => ({
|
|
10943
|
+
...data,
|
|
10944
|
+
update,
|
|
10945
|
+
refs,
|
|
10946
|
+
elements,
|
|
10947
|
+
floatingStyles
|
|
10948
|
+
}), [data, update, refs, elements, floatingStyles]);
|
|
10949
|
+
}
|
|
10950
|
+
|
|
10951
|
+
/**
|
|
10952
|
+
* Provides data to position an inner element of the floating element so that it
|
|
10953
|
+
* appears centered to the reference element.
|
|
10954
|
+
* This wraps the core `arrow` middleware to allow React refs as the element.
|
|
10955
|
+
* @see https://floating-ui.com/docs/arrow
|
|
10956
|
+
*/
|
|
10957
|
+
const arrow$1 = options => {
|
|
10958
|
+
function isRef(value) {
|
|
10959
|
+
return {}.hasOwnProperty.call(value, 'current');
|
|
10960
|
+
}
|
|
10961
|
+
return {
|
|
10962
|
+
name: 'arrow',
|
|
10963
|
+
options,
|
|
10964
|
+
fn(state) {
|
|
10965
|
+
const {
|
|
10966
|
+
element,
|
|
10967
|
+
padding
|
|
10968
|
+
} = typeof options === 'function' ? options(state) : options;
|
|
10969
|
+
if (element && isRef(element)) {
|
|
10970
|
+
if (element.current != null) {
|
|
10971
|
+
return arrow$2({
|
|
10972
|
+
element: element.current,
|
|
10973
|
+
padding
|
|
10974
|
+
}).fn(state);
|
|
10975
|
+
}
|
|
10976
|
+
return {};
|
|
10977
|
+
}
|
|
10978
|
+
if (element) {
|
|
10979
|
+
return arrow$2({
|
|
10980
|
+
element,
|
|
10981
|
+
padding
|
|
10982
|
+
}).fn(state);
|
|
10983
|
+
}
|
|
10984
|
+
return {};
|
|
10985
|
+
}
|
|
10986
|
+
};
|
|
10987
|
+
};
|
|
10988
|
+
|
|
10989
|
+
/**
|
|
10990
|
+
* Modifies the placement by translating the floating element along the
|
|
10991
|
+
* specified axes.
|
|
10992
|
+
* A number (shorthand for `mainAxis` or distance), or an axes configuration
|
|
10993
|
+
* object may be passed.
|
|
10994
|
+
* @see https://floating-ui.com/docs/offset
|
|
10995
|
+
*/
|
|
10996
|
+
const offset = (options, deps) => ({
|
|
10997
|
+
...offset$1(options),
|
|
10998
|
+
options: [options, deps]
|
|
10999
|
+
});
|
|
11000
|
+
|
|
11001
|
+
/**
|
|
11002
|
+
* Optimizes the visibility of the floating element by shifting it in order to
|
|
11003
|
+
* keep it in view when it will overflow the clipping boundary.
|
|
11004
|
+
* @see https://floating-ui.com/docs/shift
|
|
11005
|
+
*/
|
|
11006
|
+
const shift = (options, deps) => ({
|
|
11007
|
+
...shift$1(options),
|
|
11008
|
+
options: [options, deps]
|
|
11009
|
+
});
|
|
11010
|
+
|
|
11011
|
+
/**
|
|
11012
|
+
* Built-in `limiter` that will stop `shift()` at a certain point.
|
|
11013
|
+
*/
|
|
11014
|
+
const limitShift = (options, deps) => ({
|
|
11015
|
+
...limitShift$1(options),
|
|
11016
|
+
options: [options, deps]
|
|
11017
|
+
});
|
|
11018
|
+
|
|
11019
|
+
/**
|
|
11020
|
+
* Optimizes the visibility of the floating element by flipping the `placement`
|
|
11021
|
+
* in order to keep it in view when the preferred placement(s) will overflow the
|
|
11022
|
+
* clipping boundary. Alternative to `autoPlacement`.
|
|
11023
|
+
* @see https://floating-ui.com/docs/flip
|
|
11024
|
+
*/
|
|
11025
|
+
const flip = (options, deps) => ({
|
|
11026
|
+
...flip$1(options),
|
|
11027
|
+
options: [options, deps]
|
|
11028
|
+
});
|
|
11029
|
+
|
|
11030
|
+
/**
|
|
11031
|
+
* Provides data that allows you to change the size of the floating element —
|
|
11032
|
+
* for instance, prevent it from overflowing the clipping boundary or match the
|
|
11033
|
+
* width of the reference element.
|
|
11034
|
+
* @see https://floating-ui.com/docs/size
|
|
11035
|
+
*/
|
|
11036
|
+
const size = (options, deps) => ({
|
|
11037
|
+
...size$1(options),
|
|
11038
|
+
options: [options, deps]
|
|
11039
|
+
});
|
|
11040
|
+
|
|
11041
|
+
/**
|
|
11042
|
+
* Provides data to hide the floating element in applicable situations, such as
|
|
11043
|
+
* when it is not in the same clipping context as the reference element.
|
|
11044
|
+
* @see https://floating-ui.com/docs/hide
|
|
11045
|
+
*/
|
|
11046
|
+
const hide = (options, deps) => ({
|
|
11047
|
+
...hide$1(options),
|
|
11048
|
+
options: [options, deps]
|
|
11049
|
+
});
|
|
11050
|
+
|
|
11051
|
+
/**
|
|
11052
|
+
* Provides data to position an inner element of the floating element so that it
|
|
11053
|
+
* appears centered to the reference element.
|
|
11054
|
+
* This wraps the core `arrow` middleware to allow React refs as the element.
|
|
11055
|
+
* @see https://floating-ui.com/docs/arrow
|
|
11056
|
+
*/
|
|
11057
|
+
const arrow = (options, deps) => ({
|
|
11058
|
+
...arrow$1(options),
|
|
11059
|
+
options: [options, deps]
|
|
11060
|
+
});
|
|
11061
|
+
|
|
11062
|
+
// src/arrow.tsx
|
|
11063
|
+
var NAME$1 = "Arrow";
|
|
11064
|
+
var Arrow$1 = React.forwardRef((props, forwardedRef) => {
|
|
11065
|
+
const { children, width = 10, height = 5, ...arrowProps } = props;
|
|
11066
|
+
return /* @__PURE__ */ jsx(
|
|
11067
|
+
Primitive.svg,
|
|
11068
|
+
{
|
|
11069
|
+
...arrowProps,
|
|
11070
|
+
ref: forwardedRef,
|
|
11071
|
+
width,
|
|
11072
|
+
height,
|
|
11073
|
+
viewBox: "0 0 30 10",
|
|
11074
|
+
preserveAspectRatio: "none",
|
|
11075
|
+
children: props.asChild ? children : /* @__PURE__ */ jsx("polygon", { points: "0,0 30,0 15,10" })
|
|
11076
|
+
}
|
|
11077
|
+
);
|
|
11078
|
+
});
|
|
11079
|
+
Arrow$1.displayName = NAME$1;
|
|
11080
|
+
var Root$1 = Arrow$1;
|
|
11081
|
+
|
|
11082
|
+
var POPPER_NAME = "Popper";
|
|
11083
|
+
var [createPopperContext, createPopperScope] = createContextScope(POPPER_NAME);
|
|
11084
|
+
var [PopperProvider, usePopperContext] = createPopperContext(POPPER_NAME);
|
|
11085
|
+
var Popper = (props) => {
|
|
11086
|
+
const { __scopePopper, children } = props;
|
|
11087
|
+
const [anchor, setAnchor] = React.useState(null);
|
|
11088
|
+
return /* @__PURE__ */ jsx(PopperProvider, { scope: __scopePopper, anchor, onAnchorChange: setAnchor, children });
|
|
11089
|
+
};
|
|
11090
|
+
Popper.displayName = POPPER_NAME;
|
|
11091
|
+
var ANCHOR_NAME = "PopperAnchor";
|
|
11092
|
+
var PopperAnchor = React.forwardRef(
|
|
11093
|
+
(props, forwardedRef) => {
|
|
11094
|
+
const { __scopePopper, virtualRef, ...anchorProps } = props;
|
|
11095
|
+
const context = usePopperContext(ANCHOR_NAME, __scopePopper);
|
|
11096
|
+
const ref = React.useRef(null);
|
|
11097
|
+
const composedRefs = useComposedRefs(forwardedRef, ref);
|
|
11098
|
+
const anchorRef = React.useRef(null);
|
|
11099
|
+
React.useEffect(() => {
|
|
11100
|
+
const previousAnchor = anchorRef.current;
|
|
11101
|
+
anchorRef.current = virtualRef?.current || ref.current;
|
|
11102
|
+
if (previousAnchor !== anchorRef.current) {
|
|
11103
|
+
context.onAnchorChange(anchorRef.current);
|
|
11104
|
+
}
|
|
11105
|
+
});
|
|
11106
|
+
return virtualRef ? null : /* @__PURE__ */ jsx(Primitive.div, { ...anchorProps, ref: composedRefs });
|
|
11107
|
+
}
|
|
11108
|
+
);
|
|
11109
|
+
PopperAnchor.displayName = ANCHOR_NAME;
|
|
11110
|
+
var CONTENT_NAME$1 = "PopperContent";
|
|
11111
|
+
var [PopperContentProvider, useContentContext] = createPopperContext(CONTENT_NAME$1);
|
|
11112
|
+
var PopperContent = React.forwardRef(
|
|
11113
|
+
(props, forwardedRef) => {
|
|
11114
|
+
const {
|
|
11115
|
+
__scopePopper,
|
|
11116
|
+
side = "bottom",
|
|
11117
|
+
sideOffset = 0,
|
|
11118
|
+
align = "center",
|
|
11119
|
+
alignOffset = 0,
|
|
11120
|
+
arrowPadding = 0,
|
|
11121
|
+
avoidCollisions = true,
|
|
11122
|
+
collisionBoundary = [],
|
|
11123
|
+
collisionPadding: collisionPaddingProp = 0,
|
|
11124
|
+
sticky = "partial",
|
|
11125
|
+
hideWhenDetached = false,
|
|
11126
|
+
updatePositionStrategy = "optimized",
|
|
11127
|
+
onPlaced,
|
|
11128
|
+
...contentProps
|
|
11129
|
+
} = props;
|
|
11130
|
+
const context = usePopperContext(CONTENT_NAME$1, __scopePopper);
|
|
11131
|
+
const [content, setContent] = React.useState(null);
|
|
11132
|
+
const composedRefs = useComposedRefs(forwardedRef, (node) => setContent(node));
|
|
11133
|
+
const [arrow$1, setArrow] = React.useState(null);
|
|
11134
|
+
const arrowSize = useSize(arrow$1);
|
|
11135
|
+
const arrowWidth = arrowSize?.width ?? 0;
|
|
11136
|
+
const arrowHeight = arrowSize?.height ?? 0;
|
|
11137
|
+
const desiredPlacement = side + (align !== "center" ? "-" + align : "");
|
|
11138
|
+
const collisionPadding = typeof collisionPaddingProp === "number" ? collisionPaddingProp : { top: 0, right: 0, bottom: 0, left: 0, ...collisionPaddingProp };
|
|
11139
|
+
const boundary = Array.isArray(collisionBoundary) ? collisionBoundary : [collisionBoundary];
|
|
11140
|
+
const hasExplicitBoundaries = boundary.length > 0;
|
|
11141
|
+
const detectOverflowOptions = {
|
|
11142
|
+
padding: collisionPadding,
|
|
11143
|
+
boundary: boundary.filter(isNotNull),
|
|
11144
|
+
// with `strategy: 'fixed'`, this is the only way to get it to respect boundaries
|
|
11145
|
+
altBoundary: hasExplicitBoundaries
|
|
11146
|
+
};
|
|
11147
|
+
const { refs, floatingStyles, placement, isPositioned, middlewareData } = useFloating({
|
|
11148
|
+
// default to `fixed` strategy so users don't have to pick and we also avoid focus scroll issues
|
|
11149
|
+
strategy: "fixed",
|
|
11150
|
+
placement: desiredPlacement,
|
|
11151
|
+
whileElementsMounted: (...args) => {
|
|
11152
|
+
const cleanup = autoUpdate(...args, {
|
|
11153
|
+
animationFrame: updatePositionStrategy === "always"
|
|
11154
|
+
});
|
|
11155
|
+
return cleanup;
|
|
11156
|
+
},
|
|
11157
|
+
elements: {
|
|
11158
|
+
reference: context.anchor
|
|
11159
|
+
},
|
|
11160
|
+
middleware: [
|
|
11161
|
+
offset({ mainAxis: sideOffset + arrowHeight, alignmentAxis: alignOffset }),
|
|
11162
|
+
avoidCollisions && shift({
|
|
11163
|
+
mainAxis: true,
|
|
11164
|
+
crossAxis: false,
|
|
11165
|
+
limiter: sticky === "partial" ? limitShift() : void 0,
|
|
11166
|
+
...detectOverflowOptions
|
|
11167
|
+
}),
|
|
11168
|
+
avoidCollisions && flip({ ...detectOverflowOptions }),
|
|
11169
|
+
size({
|
|
11170
|
+
...detectOverflowOptions,
|
|
11171
|
+
apply: ({ elements, rects, availableWidth, availableHeight }) => {
|
|
11172
|
+
const { width: anchorWidth, height: anchorHeight } = rects.reference;
|
|
11173
|
+
const contentStyle = elements.floating.style;
|
|
11174
|
+
contentStyle.setProperty("--radix-popper-available-width", `${availableWidth}px`);
|
|
11175
|
+
contentStyle.setProperty("--radix-popper-available-height", `${availableHeight}px`);
|
|
11176
|
+
contentStyle.setProperty("--radix-popper-anchor-width", `${anchorWidth}px`);
|
|
11177
|
+
contentStyle.setProperty("--radix-popper-anchor-height", `${anchorHeight}px`);
|
|
11178
|
+
}
|
|
11179
|
+
}),
|
|
11180
|
+
arrow$1 && arrow({ element: arrow$1, padding: arrowPadding }),
|
|
11181
|
+
transformOrigin({ arrowWidth, arrowHeight }),
|
|
11182
|
+
hideWhenDetached && hide({ strategy: "referenceHidden", ...detectOverflowOptions })
|
|
11183
|
+
]
|
|
11184
|
+
});
|
|
11185
|
+
const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);
|
|
11186
|
+
const handlePlaced = useCallbackRef$1(onPlaced);
|
|
11187
|
+
useLayoutEffect2(() => {
|
|
11188
|
+
if (isPositioned) {
|
|
11189
|
+
handlePlaced?.();
|
|
11190
|
+
}
|
|
11191
|
+
}, [isPositioned, handlePlaced]);
|
|
11192
|
+
const arrowX = middlewareData.arrow?.x;
|
|
11193
|
+
const arrowY = middlewareData.arrow?.y;
|
|
11194
|
+
const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;
|
|
11195
|
+
const [contentZIndex, setContentZIndex] = React.useState();
|
|
11196
|
+
useLayoutEffect2(() => {
|
|
11197
|
+
if (content) setContentZIndex(window.getComputedStyle(content).zIndex);
|
|
11198
|
+
}, [content]);
|
|
11199
|
+
return /* @__PURE__ */ jsx(
|
|
11200
|
+
"div",
|
|
11201
|
+
{
|
|
11202
|
+
ref: refs.setFloating,
|
|
11203
|
+
"data-radix-popper-content-wrapper": "",
|
|
11204
|
+
style: {
|
|
11205
|
+
...floatingStyles,
|
|
11206
|
+
transform: isPositioned ? floatingStyles.transform : "translate(0, -200%)",
|
|
11207
|
+
// keep off the page when measuring
|
|
11208
|
+
minWidth: "max-content",
|
|
11209
|
+
zIndex: contentZIndex,
|
|
11210
|
+
["--radix-popper-transform-origin"]: [
|
|
11211
|
+
middlewareData.transformOrigin?.x,
|
|
11212
|
+
middlewareData.transformOrigin?.y
|
|
11213
|
+
].join(" "),
|
|
11214
|
+
// hide the content if using the hide middleware and should be hidden
|
|
11215
|
+
// set visibility to hidden and disable pointer events so the UI behaves
|
|
11216
|
+
// as if the PopperContent isn't there at all
|
|
11217
|
+
...middlewareData.hide?.referenceHidden && {
|
|
11218
|
+
visibility: "hidden",
|
|
11219
|
+
pointerEvents: "none"
|
|
11220
|
+
}
|
|
11221
|
+
},
|
|
11222
|
+
dir: props.dir,
|
|
11223
|
+
children: /* @__PURE__ */ jsx(
|
|
11224
|
+
PopperContentProvider,
|
|
11225
|
+
{
|
|
11226
|
+
scope: __scopePopper,
|
|
11227
|
+
placedSide,
|
|
11228
|
+
onArrowChange: setArrow,
|
|
11229
|
+
arrowX,
|
|
11230
|
+
arrowY,
|
|
11231
|
+
shouldHideArrow: cannotCenterArrow,
|
|
11232
|
+
children: /* @__PURE__ */ jsx(
|
|
11233
|
+
Primitive.div,
|
|
11234
|
+
{
|
|
11235
|
+
"data-side": placedSide,
|
|
11236
|
+
"data-align": placedAlign,
|
|
11237
|
+
...contentProps,
|
|
11238
|
+
ref: composedRefs,
|
|
11239
|
+
style: {
|
|
11240
|
+
...contentProps.style,
|
|
11241
|
+
// if the PopperContent hasn't been placed yet (not all measurements done)
|
|
11242
|
+
// we prevent animations so that users's animation don't kick in too early referring wrong sides
|
|
11243
|
+
animation: !isPositioned ? "none" : void 0
|
|
11244
|
+
}
|
|
11245
|
+
}
|
|
11246
|
+
)
|
|
11247
|
+
}
|
|
11248
|
+
)
|
|
11249
|
+
}
|
|
11250
|
+
);
|
|
11251
|
+
}
|
|
11252
|
+
);
|
|
11253
|
+
PopperContent.displayName = CONTENT_NAME$1;
|
|
11254
|
+
var ARROW_NAME$1 = "PopperArrow";
|
|
11255
|
+
var OPPOSITE_SIDE = {
|
|
11256
|
+
top: "bottom",
|
|
11257
|
+
right: "left",
|
|
11258
|
+
bottom: "top",
|
|
11259
|
+
left: "right"
|
|
11260
|
+
};
|
|
11261
|
+
var PopperArrow = React.forwardRef(function PopperArrow2(props, forwardedRef) {
|
|
11262
|
+
const { __scopePopper, ...arrowProps } = props;
|
|
11263
|
+
const contentContext = useContentContext(ARROW_NAME$1, __scopePopper);
|
|
11264
|
+
const baseSide = OPPOSITE_SIDE[contentContext.placedSide];
|
|
11265
|
+
return (
|
|
11266
|
+
// we have to use an extra wrapper because `ResizeObserver` (used by `useSize`)
|
|
11267
|
+
// doesn't report size as we'd expect on SVG elements.
|
|
11268
|
+
// it reports their bounding box which is effectively the largest path inside the SVG.
|
|
11269
|
+
/* @__PURE__ */ jsx(
|
|
11270
|
+
"span",
|
|
11271
|
+
{
|
|
11272
|
+
ref: contentContext.onArrowChange,
|
|
11273
|
+
style: {
|
|
11274
|
+
position: "absolute",
|
|
11275
|
+
left: contentContext.arrowX,
|
|
11276
|
+
top: contentContext.arrowY,
|
|
11277
|
+
[baseSide]: 0,
|
|
11278
|
+
transformOrigin: {
|
|
11279
|
+
top: "",
|
|
11280
|
+
right: "0 0",
|
|
11281
|
+
bottom: "center 0",
|
|
11282
|
+
left: "100% 0"
|
|
11283
|
+
}[contentContext.placedSide],
|
|
11284
|
+
transform: {
|
|
11285
|
+
top: "translateY(100%)",
|
|
11286
|
+
right: "translateY(50%) rotate(90deg) translateX(-50%)",
|
|
11287
|
+
bottom: `rotate(180deg)`,
|
|
11288
|
+
left: "translateY(50%) rotate(-90deg) translateX(50%)"
|
|
11289
|
+
}[contentContext.placedSide],
|
|
11290
|
+
visibility: contentContext.shouldHideArrow ? "hidden" : void 0
|
|
11291
|
+
},
|
|
11292
|
+
children: /* @__PURE__ */ jsx(
|
|
11293
|
+
Root$1,
|
|
11294
|
+
{
|
|
11295
|
+
...arrowProps,
|
|
11296
|
+
ref: forwardedRef,
|
|
11297
|
+
style: {
|
|
11298
|
+
...arrowProps.style,
|
|
11299
|
+
// ensures the element can be measured correctly (mostly for if SVG)
|
|
11300
|
+
display: "block"
|
|
11301
|
+
}
|
|
11302
|
+
}
|
|
11303
|
+
)
|
|
11304
|
+
}
|
|
11305
|
+
)
|
|
11306
|
+
);
|
|
11307
|
+
});
|
|
11308
|
+
PopperArrow.displayName = ARROW_NAME$1;
|
|
11309
|
+
function isNotNull(value) {
|
|
11310
|
+
return value !== null;
|
|
11311
|
+
}
|
|
11312
|
+
var transformOrigin = (options) => ({
|
|
11313
|
+
name: "transformOrigin",
|
|
11314
|
+
options,
|
|
11315
|
+
fn(data) {
|
|
11316
|
+
const { placement, rects, middlewareData } = data;
|
|
11317
|
+
const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;
|
|
11318
|
+
const isArrowHidden = cannotCenterArrow;
|
|
11319
|
+
const arrowWidth = isArrowHidden ? 0 : options.arrowWidth;
|
|
11320
|
+
const arrowHeight = isArrowHidden ? 0 : options.arrowHeight;
|
|
11321
|
+
const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);
|
|
11322
|
+
const noArrowAlign = { start: "0%", center: "50%", end: "100%" }[placedAlign];
|
|
11323
|
+
const arrowXCenter = (middlewareData.arrow?.x ?? 0) + arrowWidth / 2;
|
|
11324
|
+
const arrowYCenter = (middlewareData.arrow?.y ?? 0) + arrowHeight / 2;
|
|
11325
|
+
let x = "";
|
|
11326
|
+
let y = "";
|
|
11327
|
+
if (placedSide === "bottom") {
|
|
11328
|
+
x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
|
|
11329
|
+
y = `${-arrowHeight}px`;
|
|
11330
|
+
} else if (placedSide === "top") {
|
|
11331
|
+
x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
|
|
11332
|
+
y = `${rects.floating.height + arrowHeight}px`;
|
|
11333
|
+
} else if (placedSide === "right") {
|
|
11334
|
+
x = `${-arrowHeight}px`;
|
|
11335
|
+
y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
|
|
11336
|
+
} else if (placedSide === "left") {
|
|
11337
|
+
x = `${rects.floating.width + arrowHeight}px`;
|
|
11338
|
+
y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
|
|
11339
|
+
}
|
|
11340
|
+
return { data: { x, y } };
|
|
11341
|
+
}
|
|
11342
|
+
});
|
|
11343
|
+
function getSideAndAlignFromPlacement(placement) {
|
|
11344
|
+
const [side, align = "center"] = placement.split("-");
|
|
11345
|
+
return [side, align];
|
|
11346
|
+
}
|
|
11347
|
+
var Root2 = Popper;
|
|
11348
|
+
var Anchor = PopperAnchor;
|
|
11349
|
+
var Content = PopperContent;
|
|
11350
|
+
var Arrow = PopperArrow;
|
|
11351
|
+
|
|
11352
|
+
// src/visually-hidden.tsx
|
|
11353
|
+
var VISUALLY_HIDDEN_STYLES = Object.freeze({
|
|
11354
|
+
// See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss
|
|
11355
|
+
position: "absolute",
|
|
11356
|
+
border: 0,
|
|
11357
|
+
width: 1,
|
|
11358
|
+
height: 1,
|
|
11359
|
+
padding: 0,
|
|
11360
|
+
margin: -1,
|
|
11361
|
+
overflow: "hidden",
|
|
11362
|
+
clip: "rect(0, 0, 0, 0)",
|
|
11363
|
+
whiteSpace: "nowrap",
|
|
11364
|
+
wordWrap: "normal"
|
|
11365
|
+
});
|
|
11366
|
+
var NAME = "VisuallyHidden";
|
|
11367
|
+
var VisuallyHidden = React.forwardRef(
|
|
11368
|
+
(props, forwardedRef) => {
|
|
11369
|
+
return /* @__PURE__ */ jsx(
|
|
11370
|
+
Primitive.span,
|
|
11371
|
+
{
|
|
11372
|
+
...props,
|
|
11373
|
+
ref: forwardedRef,
|
|
11374
|
+
style: { ...VISUALLY_HIDDEN_STYLES, ...props.style }
|
|
11375
|
+
}
|
|
11376
|
+
);
|
|
11377
|
+
}
|
|
11378
|
+
);
|
|
11379
|
+
VisuallyHidden.displayName = NAME;
|
|
11380
|
+
var Root = VisuallyHidden;
|
|
11381
|
+
|
|
11382
|
+
var [createTooltipContext] = createContextScope("Tooltip", [
|
|
11383
|
+
createPopperScope
|
|
11384
|
+
]);
|
|
11385
|
+
var usePopperScope = createPopperScope();
|
|
11386
|
+
var PROVIDER_NAME = "TooltipProvider";
|
|
11387
|
+
var DEFAULT_DELAY_DURATION = 700;
|
|
11388
|
+
var TOOLTIP_OPEN = "tooltip.open";
|
|
11389
|
+
var [TooltipProviderContextProvider, useTooltipProviderContext] = createTooltipContext(PROVIDER_NAME);
|
|
11390
|
+
var TooltipProvider = (props) => {
|
|
11391
|
+
const {
|
|
11392
|
+
__scopeTooltip,
|
|
11393
|
+
delayDuration = DEFAULT_DELAY_DURATION,
|
|
11394
|
+
skipDelayDuration = 300,
|
|
11395
|
+
disableHoverableContent = false,
|
|
11396
|
+
children
|
|
11397
|
+
} = props;
|
|
11398
|
+
const isOpenDelayedRef = React.useRef(true);
|
|
11399
|
+
const isPointerInTransitRef = React.useRef(false);
|
|
11400
|
+
const skipDelayTimerRef = React.useRef(0);
|
|
11401
|
+
React.useEffect(() => {
|
|
11402
|
+
const skipDelayTimer = skipDelayTimerRef.current;
|
|
11403
|
+
return () => window.clearTimeout(skipDelayTimer);
|
|
11404
|
+
}, []);
|
|
11405
|
+
return /* @__PURE__ */ jsx(
|
|
11406
|
+
TooltipProviderContextProvider,
|
|
11407
|
+
{
|
|
11408
|
+
scope: __scopeTooltip,
|
|
11409
|
+
isOpenDelayedRef,
|
|
11410
|
+
delayDuration,
|
|
11411
|
+
onOpen: React.useCallback(() => {
|
|
11412
|
+
window.clearTimeout(skipDelayTimerRef.current);
|
|
11413
|
+
isOpenDelayedRef.current = false;
|
|
11414
|
+
}, []),
|
|
11415
|
+
onClose: React.useCallback(() => {
|
|
11416
|
+
window.clearTimeout(skipDelayTimerRef.current);
|
|
11417
|
+
skipDelayTimerRef.current = window.setTimeout(
|
|
11418
|
+
() => isOpenDelayedRef.current = true,
|
|
11419
|
+
skipDelayDuration
|
|
11420
|
+
);
|
|
11421
|
+
}, [skipDelayDuration]),
|
|
11422
|
+
isPointerInTransitRef,
|
|
11423
|
+
onPointerInTransitChange: React.useCallback((inTransit) => {
|
|
11424
|
+
isPointerInTransitRef.current = inTransit;
|
|
11425
|
+
}, []),
|
|
11426
|
+
disableHoverableContent,
|
|
11427
|
+
children
|
|
11428
|
+
}
|
|
11429
|
+
);
|
|
11430
|
+
};
|
|
11431
|
+
TooltipProvider.displayName = PROVIDER_NAME;
|
|
11432
|
+
var TOOLTIP_NAME = "Tooltip";
|
|
11433
|
+
var [TooltipContextProvider, useTooltipContext] = createTooltipContext(TOOLTIP_NAME);
|
|
11434
|
+
var Tooltip$1 = (props) => {
|
|
11435
|
+
const {
|
|
11436
|
+
__scopeTooltip,
|
|
11437
|
+
children,
|
|
11438
|
+
open: openProp,
|
|
11439
|
+
defaultOpen,
|
|
11440
|
+
onOpenChange,
|
|
11441
|
+
disableHoverableContent: disableHoverableContentProp,
|
|
11442
|
+
delayDuration: delayDurationProp
|
|
11443
|
+
} = props;
|
|
11444
|
+
const providerContext = useTooltipProviderContext(TOOLTIP_NAME, props.__scopeTooltip);
|
|
11445
|
+
const popperScope = usePopperScope(__scopeTooltip);
|
|
11446
|
+
const [trigger, setTrigger] = React.useState(null);
|
|
11447
|
+
const contentId = useId();
|
|
11448
|
+
const openTimerRef = React.useRef(0);
|
|
11449
|
+
const disableHoverableContent = disableHoverableContentProp ?? providerContext.disableHoverableContent;
|
|
11450
|
+
const delayDuration = delayDurationProp ?? providerContext.delayDuration;
|
|
11451
|
+
const wasOpenDelayedRef = React.useRef(false);
|
|
11452
|
+
const [open, setOpen] = useControllableState({
|
|
11453
|
+
prop: openProp,
|
|
11454
|
+
defaultProp: defaultOpen ?? false,
|
|
11455
|
+
onChange: (open2) => {
|
|
11456
|
+
if (open2) {
|
|
11457
|
+
providerContext.onOpen();
|
|
11458
|
+
document.dispatchEvent(new CustomEvent(TOOLTIP_OPEN));
|
|
11459
|
+
} else {
|
|
11460
|
+
providerContext.onClose();
|
|
11461
|
+
}
|
|
11462
|
+
onOpenChange?.(open2);
|
|
11463
|
+
},
|
|
11464
|
+
caller: TOOLTIP_NAME
|
|
11465
|
+
});
|
|
11466
|
+
const stateAttribute = React.useMemo(() => {
|
|
11467
|
+
return open ? wasOpenDelayedRef.current ? "delayed-open" : "instant-open" : "closed";
|
|
11468
|
+
}, [open]);
|
|
11469
|
+
const handleOpen = React.useCallback(() => {
|
|
11470
|
+
window.clearTimeout(openTimerRef.current);
|
|
11471
|
+
openTimerRef.current = 0;
|
|
11472
|
+
wasOpenDelayedRef.current = false;
|
|
11473
|
+
setOpen(true);
|
|
11474
|
+
}, [setOpen]);
|
|
11475
|
+
const handleClose = React.useCallback(() => {
|
|
11476
|
+
window.clearTimeout(openTimerRef.current);
|
|
11477
|
+
openTimerRef.current = 0;
|
|
11478
|
+
setOpen(false);
|
|
11479
|
+
}, [setOpen]);
|
|
11480
|
+
const handleDelayedOpen = React.useCallback(() => {
|
|
11481
|
+
window.clearTimeout(openTimerRef.current);
|
|
11482
|
+
openTimerRef.current = window.setTimeout(() => {
|
|
11483
|
+
wasOpenDelayedRef.current = true;
|
|
11484
|
+
setOpen(true);
|
|
11485
|
+
openTimerRef.current = 0;
|
|
11486
|
+
}, delayDuration);
|
|
11487
|
+
}, [delayDuration, setOpen]);
|
|
11488
|
+
React.useEffect(() => {
|
|
11489
|
+
return () => {
|
|
11490
|
+
if (openTimerRef.current) {
|
|
11491
|
+
window.clearTimeout(openTimerRef.current);
|
|
11492
|
+
openTimerRef.current = 0;
|
|
11493
|
+
}
|
|
11494
|
+
};
|
|
11495
|
+
}, []);
|
|
11496
|
+
return /* @__PURE__ */ jsx(Root2, { ...popperScope, children: /* @__PURE__ */ jsx(
|
|
11497
|
+
TooltipContextProvider,
|
|
11498
|
+
{
|
|
11499
|
+
scope: __scopeTooltip,
|
|
11500
|
+
contentId,
|
|
11501
|
+
open,
|
|
11502
|
+
stateAttribute,
|
|
11503
|
+
trigger,
|
|
11504
|
+
onTriggerChange: setTrigger,
|
|
11505
|
+
onTriggerEnter: React.useCallback(() => {
|
|
11506
|
+
if (providerContext.isOpenDelayedRef.current) handleDelayedOpen();
|
|
11507
|
+
else handleOpen();
|
|
11508
|
+
}, [providerContext.isOpenDelayedRef, handleDelayedOpen, handleOpen]),
|
|
11509
|
+
onTriggerLeave: React.useCallback(() => {
|
|
11510
|
+
if (disableHoverableContent) {
|
|
11511
|
+
handleClose();
|
|
11512
|
+
} else {
|
|
11513
|
+
window.clearTimeout(openTimerRef.current);
|
|
11514
|
+
openTimerRef.current = 0;
|
|
11515
|
+
}
|
|
11516
|
+
}, [handleClose, disableHoverableContent]),
|
|
11517
|
+
onOpen: handleOpen,
|
|
11518
|
+
onClose: handleClose,
|
|
11519
|
+
disableHoverableContent,
|
|
11520
|
+
children
|
|
11521
|
+
}
|
|
11522
|
+
) });
|
|
11523
|
+
};
|
|
11524
|
+
Tooltip$1.displayName = TOOLTIP_NAME;
|
|
11525
|
+
var TRIGGER_NAME = "TooltipTrigger";
|
|
11526
|
+
var TooltipTrigger = React.forwardRef(
|
|
11527
|
+
(props, forwardedRef) => {
|
|
11528
|
+
const { __scopeTooltip, ...triggerProps } = props;
|
|
11529
|
+
const context = useTooltipContext(TRIGGER_NAME, __scopeTooltip);
|
|
11530
|
+
const providerContext = useTooltipProviderContext(TRIGGER_NAME, __scopeTooltip);
|
|
11531
|
+
const popperScope = usePopperScope(__scopeTooltip);
|
|
11532
|
+
const ref = React.useRef(null);
|
|
11533
|
+
const composedRefs = useComposedRefs(forwardedRef, ref, context.onTriggerChange);
|
|
11534
|
+
const isPointerDownRef = React.useRef(false);
|
|
11535
|
+
const hasPointerMoveOpenedRef = React.useRef(false);
|
|
11536
|
+
const handlePointerUp = React.useCallback(() => isPointerDownRef.current = false, []);
|
|
11537
|
+
React.useEffect(() => {
|
|
11538
|
+
return () => document.removeEventListener("pointerup", handlePointerUp);
|
|
11539
|
+
}, [handlePointerUp]);
|
|
11540
|
+
return /* @__PURE__ */ jsx(Anchor, { asChild: true, ...popperScope, children: /* @__PURE__ */ jsx(
|
|
11541
|
+
Primitive.button,
|
|
11542
|
+
{
|
|
11543
|
+
"aria-describedby": context.open ? context.contentId : void 0,
|
|
11544
|
+
"data-state": context.stateAttribute,
|
|
11545
|
+
...triggerProps,
|
|
11546
|
+
ref: composedRefs,
|
|
11547
|
+
onPointerMove: composeEventHandlers(props.onPointerMove, (event) => {
|
|
11548
|
+
if (event.pointerType === "touch") return;
|
|
11549
|
+
if (!hasPointerMoveOpenedRef.current && !providerContext.isPointerInTransitRef.current) {
|
|
11550
|
+
context.onTriggerEnter();
|
|
11551
|
+
hasPointerMoveOpenedRef.current = true;
|
|
11552
|
+
}
|
|
11553
|
+
}),
|
|
11554
|
+
onPointerLeave: composeEventHandlers(props.onPointerLeave, () => {
|
|
11555
|
+
context.onTriggerLeave();
|
|
11556
|
+
hasPointerMoveOpenedRef.current = false;
|
|
11557
|
+
}),
|
|
11558
|
+
onPointerDown: composeEventHandlers(props.onPointerDown, () => {
|
|
11559
|
+
if (context.open) {
|
|
11560
|
+
context.onClose();
|
|
11561
|
+
}
|
|
11562
|
+
isPointerDownRef.current = true;
|
|
11563
|
+
document.addEventListener("pointerup", handlePointerUp, { once: true });
|
|
11564
|
+
}),
|
|
11565
|
+
onFocus: composeEventHandlers(props.onFocus, () => {
|
|
11566
|
+
if (!isPointerDownRef.current) context.onOpen();
|
|
11567
|
+
}),
|
|
11568
|
+
onBlur: composeEventHandlers(props.onBlur, context.onClose),
|
|
11569
|
+
onClick: composeEventHandlers(props.onClick, context.onClose)
|
|
11570
|
+
}
|
|
11571
|
+
) });
|
|
11572
|
+
}
|
|
11573
|
+
);
|
|
11574
|
+
TooltipTrigger.displayName = TRIGGER_NAME;
|
|
11575
|
+
var PORTAL_NAME = "TooltipPortal";
|
|
11576
|
+
var [PortalProvider, usePortalContext] = createTooltipContext(PORTAL_NAME, {
|
|
11577
|
+
forceMount: void 0
|
|
11578
|
+
});
|
|
11579
|
+
var TooltipPortal = (props) => {
|
|
11580
|
+
const { __scopeTooltip, forceMount, children, container } = props;
|
|
11581
|
+
const context = useTooltipContext(PORTAL_NAME, __scopeTooltip);
|
|
11582
|
+
return /* @__PURE__ */ jsx(PortalProvider, { scope: __scopeTooltip, forceMount, children: /* @__PURE__ */ jsx(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx(Portal$2, { asChild: true, container, children }) }) });
|
|
11583
|
+
};
|
|
11584
|
+
TooltipPortal.displayName = PORTAL_NAME;
|
|
11585
|
+
var CONTENT_NAME = "TooltipContent";
|
|
11586
|
+
var TooltipContent = React.forwardRef(
|
|
11587
|
+
(props, forwardedRef) => {
|
|
11588
|
+
const portalContext = usePortalContext(CONTENT_NAME, props.__scopeTooltip);
|
|
11589
|
+
const { forceMount = portalContext.forceMount, side = "top", ...contentProps } = props;
|
|
11590
|
+
const context = useTooltipContext(CONTENT_NAME, props.__scopeTooltip);
|
|
11591
|
+
return /* @__PURE__ */ jsx(Presence, { present: forceMount || context.open, children: context.disableHoverableContent ? /* @__PURE__ */ jsx(TooltipContentImpl, { side, ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ jsx(TooltipContentHoverable, { side, ...contentProps, ref: forwardedRef }) });
|
|
11592
|
+
}
|
|
11593
|
+
);
|
|
11594
|
+
var TooltipContentHoverable = React.forwardRef((props, forwardedRef) => {
|
|
11595
|
+
const context = useTooltipContext(CONTENT_NAME, props.__scopeTooltip);
|
|
11596
|
+
const providerContext = useTooltipProviderContext(CONTENT_NAME, props.__scopeTooltip);
|
|
11597
|
+
const ref = React.useRef(null);
|
|
11598
|
+
const composedRefs = useComposedRefs(forwardedRef, ref);
|
|
11599
|
+
const [pointerGraceArea, setPointerGraceArea] = React.useState(null);
|
|
11600
|
+
const { trigger, onClose } = context;
|
|
11601
|
+
const content = ref.current;
|
|
11602
|
+
const { onPointerInTransitChange } = providerContext;
|
|
11603
|
+
const handleRemoveGraceArea = React.useCallback(() => {
|
|
11604
|
+
setPointerGraceArea(null);
|
|
11605
|
+
onPointerInTransitChange(false);
|
|
11606
|
+
}, [onPointerInTransitChange]);
|
|
11607
|
+
const handleCreateGraceArea = React.useCallback(
|
|
11608
|
+
(event, hoverTarget) => {
|
|
11609
|
+
const currentTarget = event.currentTarget;
|
|
11610
|
+
const exitPoint = { x: event.clientX, y: event.clientY };
|
|
11611
|
+
const exitSide = getExitSideFromRect(exitPoint, currentTarget.getBoundingClientRect());
|
|
11612
|
+
const paddedExitPoints = getPaddedExitPoints(exitPoint, exitSide);
|
|
11613
|
+
const hoverTargetPoints = getPointsFromRect(hoverTarget.getBoundingClientRect());
|
|
11614
|
+
const graceArea = getHull([...paddedExitPoints, ...hoverTargetPoints]);
|
|
11615
|
+
setPointerGraceArea(graceArea);
|
|
11616
|
+
onPointerInTransitChange(true);
|
|
11617
|
+
},
|
|
11618
|
+
[onPointerInTransitChange]
|
|
11619
|
+
);
|
|
11620
|
+
React.useEffect(() => {
|
|
11621
|
+
return () => handleRemoveGraceArea();
|
|
11622
|
+
}, [handleRemoveGraceArea]);
|
|
11623
|
+
React.useEffect(() => {
|
|
11624
|
+
if (trigger && content) {
|
|
11625
|
+
const handleTriggerLeave = (event) => handleCreateGraceArea(event, content);
|
|
11626
|
+
const handleContentLeave = (event) => handleCreateGraceArea(event, trigger);
|
|
11627
|
+
trigger.addEventListener("pointerleave", handleTriggerLeave);
|
|
11628
|
+
content.addEventListener("pointerleave", handleContentLeave);
|
|
11629
|
+
return () => {
|
|
11630
|
+
trigger.removeEventListener("pointerleave", handleTriggerLeave);
|
|
11631
|
+
content.removeEventListener("pointerleave", handleContentLeave);
|
|
11632
|
+
};
|
|
11633
|
+
}
|
|
11634
|
+
}, [trigger, content, handleCreateGraceArea, handleRemoveGraceArea]);
|
|
11635
|
+
React.useEffect(() => {
|
|
11636
|
+
if (pointerGraceArea) {
|
|
11637
|
+
const handleTrackPointerGrace = (event) => {
|
|
11638
|
+
const target = event.target;
|
|
11639
|
+
const pointerPosition = { x: event.clientX, y: event.clientY };
|
|
11640
|
+
const hasEnteredTarget = trigger?.contains(target) || content?.contains(target);
|
|
11641
|
+
const isPointerOutsideGraceArea = !isPointInPolygon(pointerPosition, pointerGraceArea);
|
|
11642
|
+
if (hasEnteredTarget) {
|
|
11643
|
+
handleRemoveGraceArea();
|
|
11644
|
+
} else if (isPointerOutsideGraceArea) {
|
|
11645
|
+
handleRemoveGraceArea();
|
|
11646
|
+
onClose();
|
|
11647
|
+
}
|
|
11648
|
+
};
|
|
11649
|
+
document.addEventListener("pointermove", handleTrackPointerGrace);
|
|
11650
|
+
return () => document.removeEventListener("pointermove", handleTrackPointerGrace);
|
|
11651
|
+
}
|
|
11652
|
+
}, [trigger, content, pointerGraceArea, onClose, handleRemoveGraceArea]);
|
|
11653
|
+
return /* @__PURE__ */ jsx(TooltipContentImpl, { ...props, ref: composedRefs });
|
|
11654
|
+
});
|
|
11655
|
+
var [VisuallyHiddenContentContextProvider, useVisuallyHiddenContentContext] = createTooltipContext(TOOLTIP_NAME, { isInside: false });
|
|
11656
|
+
var Slottable = createSlottable("TooltipContent");
|
|
11657
|
+
var TooltipContentImpl = React.forwardRef(
|
|
11658
|
+
(props, forwardedRef) => {
|
|
11659
|
+
const {
|
|
11660
|
+
__scopeTooltip,
|
|
11661
|
+
children,
|
|
11662
|
+
"aria-label": ariaLabel,
|
|
11663
|
+
onEscapeKeyDown,
|
|
11664
|
+
onPointerDownOutside,
|
|
11665
|
+
...contentProps
|
|
11666
|
+
} = props;
|
|
11667
|
+
const context = useTooltipContext(CONTENT_NAME, __scopeTooltip);
|
|
11668
|
+
const popperScope = usePopperScope(__scopeTooltip);
|
|
11669
|
+
const { onClose } = context;
|
|
11670
|
+
React.useEffect(() => {
|
|
11671
|
+
document.addEventListener(TOOLTIP_OPEN, onClose);
|
|
11672
|
+
return () => document.removeEventListener(TOOLTIP_OPEN, onClose);
|
|
11673
|
+
}, [onClose]);
|
|
11674
|
+
React.useEffect(() => {
|
|
11675
|
+
if (context.trigger) {
|
|
11676
|
+
const handleScroll = (event) => {
|
|
11677
|
+
const target = event.target;
|
|
11678
|
+
if (target?.contains(context.trigger)) onClose();
|
|
11679
|
+
};
|
|
11680
|
+
window.addEventListener("scroll", handleScroll, { capture: true });
|
|
11681
|
+
return () => window.removeEventListener("scroll", handleScroll, { capture: true });
|
|
11682
|
+
}
|
|
11683
|
+
}, [context.trigger, onClose]);
|
|
11684
|
+
return /* @__PURE__ */ jsx(
|
|
11685
|
+
DismissableLayer,
|
|
11686
|
+
{
|
|
11687
|
+
asChild: true,
|
|
11688
|
+
disableOutsidePointerEvents: false,
|
|
11689
|
+
onEscapeKeyDown,
|
|
11690
|
+
onPointerDownOutside,
|
|
11691
|
+
onFocusOutside: (event) => event.preventDefault(),
|
|
11692
|
+
onDismiss: onClose,
|
|
11693
|
+
children: /* @__PURE__ */ jsxs(
|
|
11694
|
+
Content,
|
|
11695
|
+
{
|
|
11696
|
+
"data-state": context.stateAttribute,
|
|
11697
|
+
...popperScope,
|
|
11698
|
+
...contentProps,
|
|
11699
|
+
ref: forwardedRef,
|
|
11700
|
+
style: {
|
|
11701
|
+
...contentProps.style,
|
|
11702
|
+
// re-namespace exposed content custom properties
|
|
11703
|
+
...{
|
|
11704
|
+
"--radix-tooltip-content-transform-origin": "var(--radix-popper-transform-origin)",
|
|
11705
|
+
"--radix-tooltip-content-available-width": "var(--radix-popper-available-width)",
|
|
11706
|
+
"--radix-tooltip-content-available-height": "var(--radix-popper-available-height)",
|
|
11707
|
+
"--radix-tooltip-trigger-width": "var(--radix-popper-anchor-width)",
|
|
11708
|
+
"--radix-tooltip-trigger-height": "var(--radix-popper-anchor-height)"
|
|
11709
|
+
}
|
|
11710
|
+
},
|
|
11711
|
+
children: [
|
|
11712
|
+
/* @__PURE__ */ jsx(Slottable, { children }),
|
|
11713
|
+
/* @__PURE__ */ jsx(VisuallyHiddenContentContextProvider, { scope: __scopeTooltip, isInside: true, children: /* @__PURE__ */ jsx(Root, { id: context.contentId, role: "tooltip", children: ariaLabel || children }) })
|
|
11714
|
+
]
|
|
11715
|
+
}
|
|
11716
|
+
)
|
|
11717
|
+
}
|
|
11718
|
+
);
|
|
11719
|
+
}
|
|
11720
|
+
);
|
|
11721
|
+
TooltipContent.displayName = CONTENT_NAME;
|
|
11722
|
+
var ARROW_NAME = "TooltipArrow";
|
|
11723
|
+
var TooltipArrow = React.forwardRef(
|
|
11724
|
+
(props, forwardedRef) => {
|
|
11725
|
+
const { __scopeTooltip, ...arrowProps } = props;
|
|
11726
|
+
const popperScope = usePopperScope(__scopeTooltip);
|
|
11727
|
+
const visuallyHiddenContentContext = useVisuallyHiddenContentContext(
|
|
11728
|
+
ARROW_NAME,
|
|
11729
|
+
__scopeTooltip
|
|
11730
|
+
);
|
|
11731
|
+
return visuallyHiddenContentContext.isInside ? null : /* @__PURE__ */ jsx(Arrow, { ...popperScope, ...arrowProps, ref: forwardedRef });
|
|
11732
|
+
}
|
|
11733
|
+
);
|
|
11734
|
+
TooltipArrow.displayName = ARROW_NAME;
|
|
11735
|
+
function getExitSideFromRect(point, rect) {
|
|
11736
|
+
const top = Math.abs(rect.top - point.y);
|
|
11737
|
+
const bottom = Math.abs(rect.bottom - point.y);
|
|
11738
|
+
const right = Math.abs(rect.right - point.x);
|
|
11739
|
+
const left = Math.abs(rect.left - point.x);
|
|
11740
|
+
switch (Math.min(top, bottom, right, left)) {
|
|
11741
|
+
case left:
|
|
11742
|
+
return "left";
|
|
11743
|
+
case right:
|
|
11744
|
+
return "right";
|
|
11745
|
+
case top:
|
|
11746
|
+
return "top";
|
|
11747
|
+
case bottom:
|
|
11748
|
+
return "bottom";
|
|
11749
|
+
default:
|
|
11750
|
+
throw new Error("unreachable");
|
|
11751
|
+
}
|
|
11752
|
+
}
|
|
11753
|
+
function getPaddedExitPoints(exitPoint, exitSide, padding = 5) {
|
|
11754
|
+
const paddedExitPoints = [];
|
|
11755
|
+
switch (exitSide) {
|
|
11756
|
+
case "top":
|
|
11757
|
+
paddedExitPoints.push(
|
|
11758
|
+
{ x: exitPoint.x - padding, y: exitPoint.y + padding },
|
|
11759
|
+
{ x: exitPoint.x + padding, y: exitPoint.y + padding }
|
|
11760
|
+
);
|
|
11761
|
+
break;
|
|
11762
|
+
case "bottom":
|
|
11763
|
+
paddedExitPoints.push(
|
|
11764
|
+
{ x: exitPoint.x - padding, y: exitPoint.y - padding },
|
|
11765
|
+
{ x: exitPoint.x + padding, y: exitPoint.y - padding }
|
|
11766
|
+
);
|
|
11767
|
+
break;
|
|
11768
|
+
case "left":
|
|
11769
|
+
paddedExitPoints.push(
|
|
11770
|
+
{ x: exitPoint.x + padding, y: exitPoint.y - padding },
|
|
11771
|
+
{ x: exitPoint.x + padding, y: exitPoint.y + padding }
|
|
11772
|
+
);
|
|
11773
|
+
break;
|
|
11774
|
+
case "right":
|
|
11775
|
+
paddedExitPoints.push(
|
|
11776
|
+
{ x: exitPoint.x - padding, y: exitPoint.y - padding },
|
|
11777
|
+
{ x: exitPoint.x - padding, y: exitPoint.y + padding }
|
|
11778
|
+
);
|
|
11779
|
+
break;
|
|
11780
|
+
}
|
|
11781
|
+
return paddedExitPoints;
|
|
11782
|
+
}
|
|
11783
|
+
function getPointsFromRect(rect) {
|
|
11784
|
+
const { top, right, bottom, left } = rect;
|
|
11785
|
+
return [
|
|
11786
|
+
{ x: left, y: top },
|
|
11787
|
+
{ x: right, y: top },
|
|
11788
|
+
{ x: right, y: bottom },
|
|
11789
|
+
{ x: left, y: bottom }
|
|
11790
|
+
];
|
|
11791
|
+
}
|
|
11792
|
+
function isPointInPolygon(point, polygon) {
|
|
11793
|
+
const { x, y } = point;
|
|
11794
|
+
let inside = false;
|
|
11795
|
+
for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
|
|
11796
|
+
const ii = polygon[i];
|
|
11797
|
+
const jj = polygon[j];
|
|
11798
|
+
const xi = ii.x;
|
|
11799
|
+
const yi = ii.y;
|
|
11800
|
+
const xj = jj.x;
|
|
11801
|
+
const yj = jj.y;
|
|
11802
|
+
const intersect = yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi;
|
|
11803
|
+
if (intersect) inside = !inside;
|
|
11804
|
+
}
|
|
11805
|
+
return inside;
|
|
11806
|
+
}
|
|
11807
|
+
function getHull(points) {
|
|
11808
|
+
const newPoints = points.slice();
|
|
11809
|
+
newPoints.sort((a, b) => {
|
|
11810
|
+
if (a.x < b.x) return -1;
|
|
11811
|
+
else if (a.x > b.x) return 1;
|
|
11812
|
+
else if (a.y < b.y) return -1;
|
|
11813
|
+
else if (a.y > b.y) return 1;
|
|
11814
|
+
else return 0;
|
|
11815
|
+
});
|
|
11816
|
+
return getHullPresorted(newPoints);
|
|
11817
|
+
}
|
|
11818
|
+
function getHullPresorted(points) {
|
|
11819
|
+
if (points.length <= 1) return points.slice();
|
|
11820
|
+
const upperHull = [];
|
|
11821
|
+
for (let i = 0; i < points.length; i++) {
|
|
11822
|
+
const p = points[i];
|
|
11823
|
+
while (upperHull.length >= 2) {
|
|
11824
|
+
const q = upperHull[upperHull.length - 1];
|
|
11825
|
+
const r = upperHull[upperHull.length - 2];
|
|
11826
|
+
if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) upperHull.pop();
|
|
11827
|
+
else break;
|
|
11828
|
+
}
|
|
11829
|
+
upperHull.push(p);
|
|
11830
|
+
}
|
|
11831
|
+
upperHull.pop();
|
|
11832
|
+
const lowerHull = [];
|
|
11833
|
+
for (let i = points.length - 1; i >= 0; i--) {
|
|
11834
|
+
const p = points[i];
|
|
11835
|
+
while (lowerHull.length >= 2) {
|
|
11836
|
+
const q = lowerHull[lowerHull.length - 1];
|
|
11837
|
+
const r = lowerHull[lowerHull.length - 2];
|
|
11838
|
+
if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) lowerHull.pop();
|
|
11839
|
+
else break;
|
|
11840
|
+
}
|
|
11841
|
+
lowerHull.push(p);
|
|
11842
|
+
}
|
|
11843
|
+
lowerHull.pop();
|
|
11844
|
+
if (upperHull.length === 1 && lowerHull.length === 1 && upperHull[0].x === lowerHull[0].x && upperHull[0].y === lowerHull[0].y) {
|
|
11845
|
+
return upperHull;
|
|
11846
|
+
} else {
|
|
11847
|
+
return upperHull.concat(lowerHull);
|
|
11848
|
+
}
|
|
11849
|
+
}
|
|
11850
|
+
var Provider = TooltipProvider;
|
|
11851
|
+
var Root3 = Tooltip$1;
|
|
11852
|
+
var Trigger = TooltipTrigger;
|
|
11853
|
+
var Portal = TooltipPortal;
|
|
11854
|
+
var Content2 = TooltipContent;
|
|
11855
|
+
var Arrow2 = TooltipArrow;
|
|
11856
|
+
|
|
11857
|
+
var s = {"content":"styles-module_content__l9ues","wrapper":"styles-module_wrapper__s-xzi","title":"styles-module_title__ksDH8","trigger":"styles-module_trigger__wJ2S1","arrow":"styles-module_arrow__uDzUu"};
|
|
11858
|
+
|
|
11859
|
+
const Tooltip = ({ text, title, contentProps, wrapperClassName, triggerSlot, ...props }) => {
|
|
11860
|
+
return (jsx(Provider, { children: jsxs(Root3, { delayDuration: 0, ...props, children: [jsx(Trigger, { className: s.trigger, asChild: true, children: triggerSlot }), jsx(Portal, { children: jsxs(Content2, { sideOffset: 4, ...contentProps, className: cn(s.content, contentProps?.className), children: [jsxs("div", { className: cn(s.wrapper, wrapperClassName), children: [title && jsx("span", { className: s.title, children: title }), text] }), jsx(Arrow2, { className: s.arrow })] }) })] }) }));
|
|
8642
11861
|
};
|
|
8643
11862
|
|
|
8644
|
-
export { Accordion, Badge, Button, Checkbox, Dialog, Input, InputPhone, Loader, Spinner, Switch, Tabs, Tag };
|
|
11863
|
+
export { Accordion, Badge, Button, Checkbox, Dialog, Input, InputPhone, Loader, Spinner, Switch, Tabs, Tag, Textarea, Toggle, Tooltip };
|
|
8645
11864
|
//# sourceMappingURL=index.esm.js.map
|