@tedi-design-system/react 14.4.0-rc.1 → 14.4.0-rc.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +30 -14
- package/_virtual/index.es13.js +2 -2
- package/_virtual/index.es14.js +2 -2
- package/bundle-stats.html +1 -1
- package/external/react-is/index.cjs.js +1 -1
- package/external/react-is/index.es.js +1 -1
- package/external/toposort/index.cjs.js +1 -1
- package/external/toposort/index.es.js +1 -1
- package/index.css +1 -1
- package/package.json +1 -1
- package/src/tedi/components/buttons/collapse/collapse.cjs.js +1 -1
- package/src/tedi/components/buttons/collapse/collapse.d.ts +13 -8
- package/src/tedi/components/buttons/collapse/collapse.es.js +90 -66
- package/src/tedi/components/buttons/collapse/collapse.module.scss.cjs.js +1 -1
- package/src/tedi/components/buttons/collapse/collapse.module.scss.es.js +9 -2
- package/src/tedi/components/buttons/info-button/info-button.cjs.js +1 -1
- package/src/tedi/components/buttons/info-button/info-button.d.ts +5 -1
- package/src/tedi/components/buttons/info-button/info-button.es.js +14 -14
- package/src/tedi/components/content/label/label.cjs.js +1 -1
- package/src/tedi/components/content/label/label.es.js +24 -23
- package/src/tedi/components/form/checkbox/checkbox.cjs.js +1 -1
- package/src/tedi/components/form/checkbox/checkbox.es.js +40 -40
- package/src/tedi/components/form/file-dropzone/file-dropzone.cjs.js +1 -1
- package/src/tedi/components/form/file-dropzone/file-dropzone.es.js +69 -59
- package/src/tedi/components/form/file-dropzone/file-dropzone.module.scss.cjs.js +1 -1
- package/src/tedi/components/form/file-dropzone/file-dropzone.module.scss.es.js +1 -0
- package/src/tedi/components/form/file-upload/file-upload.cjs.js +1 -1
- package/src/tedi/components/form/file-upload/file-upload.es.js +109 -90
- package/src/tedi/components/form/file-upload/file-upload.module.scss.cjs.js +1 -1
- package/src/tedi/components/form/file-upload/file-upload.module.scss.es.js +3 -1
- package/src/tedi/components/form/search/search.cjs.js +1 -1
- package/src/tedi/components/form/search/search.d.ts +5 -0
- package/src/tedi/components/form/search/search.es.js +30 -28
- package/src/tedi/components/form/select/select.cjs.js +1 -1
- package/src/tedi/components/form/select/select.es.js +134 -131
- package/src/tedi/components/overlays/overlay/overlay-content.cjs.js +1 -1
- package/src/tedi/components/overlays/overlay/overlay-content.d.ts +27 -2
- package/src/tedi/components/overlays/overlay/overlay-content.es.js +37 -34
- package/src/tedi/components/overlays/overlay/overlay.cjs.js +1 -1
- package/src/tedi/components/overlays/overlay/overlay.es.js +72 -71
- package/src/tedi/components/overlays/popover/popover-content.cjs.js +1 -1
- package/src/tedi/components/overlays/popover/popover-content.es.js +31 -29
- package/src/tedi/components/overlays/popover/popover.cjs.js +1 -1
- package/src/tedi/components/overlays/popover/popover.es.js +1 -0
- package/src/tedi/helpers/hooks/use-file-upload.cjs.js +1 -1
- package/src/tedi/helpers/hooks/use-file-upload.d.ts +6 -0
- package/src/tedi/helpers/hooks/use-file-upload.es.js +67 -50
- package/src/tedi/providers/label-provider/labels-map.cjs.js +1 -1
- package/src/tedi/providers/label-provider/labels-map.d.ts +49 -0
- package/src/tedi/providers/label-provider/labels-map.es.js +56 -4
- package/src/tedi/providers/theme-provider/theme-provider.cjs.js +1 -1
- package/src/tedi/providers/theme-provider/theme-provider.d.ts +1 -2
- package/src/tedi/providers/theme-provider/theme-provider.es.js +26 -17
|
@@ -1,160 +1,163 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
1
|
+
import { jsx as s, jsxs as h } from "react/jsx-runtime";
|
|
2
|
+
import ge from "../../../../../external/classnames/index.es.js";
|
|
3
|
+
import p, { forwardRef as Se } from "react";
|
|
4
|
+
import Me from "../../../../../external/react-select/dist/react-select.esm.es.js";
|
|
5
5
|
import be from "../../../../../external/react-select/async/dist/react-select-async.esm.es.js";
|
|
6
|
-
import { FeedbackText as
|
|
7
|
-
import { FormLabel as
|
|
8
|
-
import { SelectClearIndicator as
|
|
6
|
+
import { FeedbackText as Ie } from "../feedback-text/feedback-text.es.js";
|
|
7
|
+
import { FormLabel as Oe } from "../form-label/form-label.es.js";
|
|
8
|
+
import { SelectClearIndicator as Ce } from "./components/select-clear-indicator.es.js";
|
|
9
9
|
import { SelectControl as ve } from "./components/select-control.es.js";
|
|
10
|
-
import { SelectDropDownIndicator as
|
|
11
|
-
import { SelectGroup as
|
|
12
|
-
import { SelectGroupHeading as
|
|
13
|
-
import { SelectIndicatorsContainer as
|
|
14
|
-
import { SelectInput as
|
|
15
|
-
import { SelectLoadingIndicator as
|
|
16
|
-
import { SelectMenu as
|
|
17
|
-
import { SelectMenuList as
|
|
18
|
-
import { SelectMenuPortal as
|
|
19
|
-
import { SelectMultiValue as
|
|
20
|
-
import { SelectMultiValueRemove as
|
|
21
|
-
import { SelectOption as
|
|
22
|
-
import { SelectValueContainer as
|
|
10
|
+
import { SelectDropDownIndicator as Le } from "./components/select-dropdown-indicator.es.js";
|
|
11
|
+
import { SelectGroup as he } from "./components/select-group.es.js";
|
|
12
|
+
import { SelectGroupHeading as ye } from "./components/select-group-heading.es.js";
|
|
13
|
+
import { SelectIndicatorsContainer as Ne } from "./components/select-indicators-container.es.js";
|
|
14
|
+
import { SelectInput as Ve } from "./components/select-input.es.js";
|
|
15
|
+
import { SelectLoadingIndicator as Re } from "./components/select-loading-indicator.es.js";
|
|
16
|
+
import { SelectMenu as we } from "./components/select-menu.es.js";
|
|
17
|
+
import { SelectMenuList as _e } from "./components/select-menu-list.es.js";
|
|
18
|
+
import { SelectMenuPortal as $e } from "./components/select-menu-portal.es.js";
|
|
19
|
+
import { SelectMultiValue as xe } from "./components/select-multi-value.es.js";
|
|
20
|
+
import { SelectMultiValueRemove as He } from "./components/select-multi-value-remove.es.js";
|
|
21
|
+
import { SelectOption as Pe } from "./components/select-option.es.js";
|
|
22
|
+
import { SelectValueContainer as Te } from "./components/select-value-container.es.js";
|
|
23
23
|
import o from "./select.module.scss.es.js";
|
|
24
|
-
import { useLabels as
|
|
25
|
-
const
|
|
26
|
-
(
|
|
24
|
+
import { useLabels as De } from "../../../providers/label-provider/use-labels.es.js";
|
|
25
|
+
const Fe = Se(
|
|
26
|
+
(y, N) => {
|
|
27
27
|
const {
|
|
28
|
-
options:
|
|
29
|
-
defaultOptions:
|
|
28
|
+
options: V,
|
|
29
|
+
defaultOptions: R,
|
|
30
30
|
id: a,
|
|
31
|
-
name:
|
|
32
|
-
iconName:
|
|
33
|
-
label:
|
|
34
|
-
required:
|
|
35
|
-
value:
|
|
36
|
-
defaultValue:
|
|
37
|
-
tagsDirection:
|
|
38
|
-
onChange:
|
|
39
|
-
onInputChange:
|
|
40
|
-
inputValue:
|
|
41
|
-
loadOptions:
|
|
42
|
-
isLoading:
|
|
43
|
-
openMenuOnFocus:
|
|
44
|
-
openMenuOnClick:
|
|
45
|
-
tabSelectsValue:
|
|
46
|
-
disabled:
|
|
47
|
-
className:
|
|
48
|
-
hideLabel:
|
|
31
|
+
name: w,
|
|
32
|
+
iconName: _ = "arrow_drop_down",
|
|
33
|
+
label: $,
|
|
34
|
+
required: f,
|
|
35
|
+
value: x,
|
|
36
|
+
defaultValue: H,
|
|
37
|
+
tagsDirection: g = "row",
|
|
38
|
+
onChange: c,
|
|
39
|
+
onInputChange: P,
|
|
40
|
+
inputValue: T,
|
|
41
|
+
loadOptions: D,
|
|
42
|
+
isLoading: F,
|
|
43
|
+
openMenuOnFocus: G = !1,
|
|
44
|
+
openMenuOnClick: j = !0,
|
|
45
|
+
tabSelectsValue: k = !1,
|
|
46
|
+
disabled: S = !1,
|
|
47
|
+
className: B,
|
|
48
|
+
hideLabel: E = !1,
|
|
49
49
|
helper: t,
|
|
50
|
-
placeholder:
|
|
51
|
-
invalid:
|
|
52
|
-
valid:
|
|
53
|
-
size:
|
|
54
|
-
async:
|
|
55
|
-
renderOption:
|
|
56
|
-
renderMessageListFooter:
|
|
50
|
+
placeholder: q,
|
|
51
|
+
invalid: z,
|
|
52
|
+
valid: A,
|
|
53
|
+
size: d,
|
|
54
|
+
async: W = !1,
|
|
55
|
+
renderOption: J,
|
|
56
|
+
renderMessageListFooter: M,
|
|
57
57
|
noOptionsMessage: K,
|
|
58
58
|
loadingMessage: Q,
|
|
59
|
-
multiple:
|
|
60
|
-
closeMenuOnSelect: U = !
|
|
61
|
-
blurInputOnSelect:
|
|
59
|
+
multiple: m = !1,
|
|
60
|
+
closeMenuOnSelect: U = !m,
|
|
61
|
+
blurInputOnSelect: b = !1,
|
|
62
62
|
autoFocus: X = !1,
|
|
63
63
|
isClearable: Y = !0,
|
|
64
64
|
isClearIndicatorVisible: Z = !1,
|
|
65
|
-
isSearchable:
|
|
65
|
+
isSearchable: I = !0,
|
|
66
66
|
menuIsOpen: ee,
|
|
67
67
|
onMenuClose: te,
|
|
68
68
|
onMenuOpen: oe,
|
|
69
69
|
onBlur: ae,
|
|
70
70
|
inputIsHidden: re,
|
|
71
|
-
isTagRemovable:
|
|
71
|
+
isTagRemovable: O = !1,
|
|
72
72
|
optionGroupHeadingText: ie = { modifiers: "small", color: "tertiary" },
|
|
73
73
|
cacheOptions: ne = !0,
|
|
74
74
|
showRadioButtons: le = !1,
|
|
75
75
|
renderWithoutLabel: se,
|
|
76
76
|
tooltip: ce,
|
|
77
|
-
classNames:
|
|
78
|
-
} =
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
() =>
|
|
77
|
+
classNames: C
|
|
78
|
+
} = y, v = t ? (t == null ? void 0 : t.id) ?? `${a}-helper` : void 0, i = p.useRef(null), { getLabel: L } = De();
|
|
79
|
+
p.useImperativeHandle(
|
|
80
|
+
N,
|
|
81
|
+
() => i.current
|
|
82
82
|
);
|
|
83
|
-
const de = (
|
|
84
|
-
|
|
85
|
-
var
|
|
86
|
-
return (
|
|
83
|
+
const de = (r) => {
|
|
84
|
+
c == null || c(r), !b && i.current && setTimeout(() => {
|
|
85
|
+
var n, l;
|
|
86
|
+
return (l = (n = i.current) == null ? void 0 : n.inputRef) == null ? void 0 : l.focus();
|
|
87
87
|
}, 0);
|
|
88
|
-
}, me = (
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
88
|
+
}, me = p.useCallback(
|
|
89
|
+
(r) => /* @__PURE__ */ s(_e, { ...r, renderMessageListFooter: M }),
|
|
90
|
+
[M]
|
|
91
|
+
), ue = () => {
|
|
92
|
+
const r = {
|
|
93
|
+
ClearIndicator: (e) => Ce({ isClearIndicatorVisible: Z, ...e }),
|
|
94
|
+
DropdownIndicator: () => Le({ iconName: _ }),
|
|
92
95
|
IndicatorSeparator: () => null,
|
|
93
|
-
MenuPortal:
|
|
94
|
-
Menu:
|
|
95
|
-
MenuList:
|
|
96
|
-
Option: (e) =>
|
|
96
|
+
MenuPortal: $e,
|
|
97
|
+
Menu: we,
|
|
98
|
+
MenuList: me,
|
|
99
|
+
Option: (e) => Pe({ renderOption: J, multiple: m, showRadioButtons: le, ...e }),
|
|
97
100
|
Control: ve,
|
|
98
|
-
Input:
|
|
99
|
-
MultiValue: (e) =>
|
|
100
|
-
MultiValueRemove:
|
|
101
|
-
Group:
|
|
102
|
-
GroupHeading: (e) =>
|
|
103
|
-
IndicatorsContainer:
|
|
104
|
-
ValueContainer:
|
|
105
|
-
LoadingIndicator:
|
|
106
|
-
},
|
|
107
|
-
return /* @__PURE__ */
|
|
108
|
-
|
|
101
|
+
Input: Ve,
|
|
102
|
+
MultiValue: (e) => xe({ isTagRemovable: O, ...e }),
|
|
103
|
+
MultiValueRemove: He,
|
|
104
|
+
Group: he,
|
|
105
|
+
GroupHeading: (e) => ye({ optionGroupHeadingText: ie, ...e }),
|
|
106
|
+
IndicatorsContainer: Ne,
|
|
107
|
+
ValueContainer: Te,
|
|
108
|
+
LoadingIndicator: Re
|
|
109
|
+
}, n = W ? be : Me, l = () => L("select.no-options"), fe = () => L("select.loading");
|
|
110
|
+
return /* @__PURE__ */ s(
|
|
111
|
+
n,
|
|
109
112
|
{
|
|
110
113
|
id: a,
|
|
111
|
-
"aria-describedby":
|
|
114
|
+
"aria-describedby": v,
|
|
112
115
|
autoFocus: X,
|
|
113
|
-
ref:
|
|
116
|
+
ref: i,
|
|
114
117
|
instanceId: a,
|
|
115
118
|
className: "tedi-select__wrapper",
|
|
116
|
-
name:
|
|
117
|
-
options:
|
|
118
|
-
defaultOptions:
|
|
119
|
-
value:
|
|
120
|
-
defaultValue:
|
|
119
|
+
name: w,
|
|
120
|
+
options: V,
|
|
121
|
+
defaultOptions: R,
|
|
122
|
+
value: x,
|
|
123
|
+
defaultValue: H,
|
|
121
124
|
cacheOptions: ne,
|
|
122
125
|
onChange: de,
|
|
123
|
-
onInputChange:
|
|
126
|
+
onInputChange: P,
|
|
124
127
|
onBlur: ae,
|
|
125
|
-
inputValue:
|
|
128
|
+
inputValue: T,
|
|
126
129
|
inputId: `${a}-input`,
|
|
127
|
-
loadOptions:
|
|
128
|
-
isLoading:
|
|
129
|
-
noOptionsMessage: K ||
|
|
130
|
-
loadingMessage: Q ||
|
|
130
|
+
loadOptions: D,
|
|
131
|
+
isLoading: F,
|
|
132
|
+
noOptionsMessage: K || l,
|
|
133
|
+
loadingMessage: Q || fe,
|
|
131
134
|
classNamePrefix: "select",
|
|
132
|
-
components:
|
|
133
|
-
isDisabled:
|
|
134
|
-
isSearchable:
|
|
135
|
+
components: r,
|
|
136
|
+
isDisabled: S,
|
|
137
|
+
isSearchable: I,
|
|
135
138
|
menuIsOpen: ee,
|
|
136
|
-
openMenuOnFocus:
|
|
137
|
-
openMenuOnClick:
|
|
138
|
-
tabSelectsValue:
|
|
139
|
+
openMenuOnFocus: G,
|
|
140
|
+
openMenuOnClick: j,
|
|
141
|
+
tabSelectsValue: k,
|
|
139
142
|
onMenuClose: te,
|
|
140
143
|
onMenuOpen: oe,
|
|
141
|
-
placeholder:
|
|
144
|
+
placeholder: q || "",
|
|
142
145
|
isClearable: Y,
|
|
143
|
-
backspaceRemovesValue:
|
|
146
|
+
backspaceRemovesValue: O,
|
|
144
147
|
menuShouldScrollIntoView: !0,
|
|
145
|
-
isMulti:
|
|
148
|
+
isMulti: m,
|
|
146
149
|
hideSelectedOptions: !1,
|
|
147
150
|
closeMenuOnSelect: U,
|
|
148
|
-
blurInputOnSelect:
|
|
151
|
+
blurInputOnSelect: b,
|
|
149
152
|
menuPlacement: "auto",
|
|
150
153
|
inputIsHidden: re,
|
|
151
|
-
required:
|
|
154
|
+
required: f,
|
|
152
155
|
menuPortalTarget: document.body,
|
|
153
156
|
menuPosition: "absolute",
|
|
154
|
-
classNames:
|
|
155
|
-
Object.entries(
|
|
157
|
+
classNames: C ? Object.fromEntries(
|
|
158
|
+
Object.entries(C).map(([e, u]) => [
|
|
156
159
|
e,
|
|
157
|
-
typeof
|
|
160
|
+
typeof u == "string" ? () => u : u
|
|
158
161
|
])
|
|
159
162
|
) : void 0,
|
|
160
163
|
theme: (e) => ({
|
|
@@ -174,38 +177,38 @@ const De = ge(
|
|
|
174
177
|
}
|
|
175
178
|
}
|
|
176
179
|
);
|
|
177
|
-
},
|
|
180
|
+
}, pe = ge(
|
|
178
181
|
o["tedi-select"],
|
|
179
|
-
|
|
180
|
-
{ [o["tedi-select--invalid"]]:
|
|
181
|
-
{ [o["tedi-select--valid"]]:
|
|
182
|
-
{ [o[`tedi-select--${
|
|
183
|
-
{ [o[`tedi-select--tags-${
|
|
184
|
-
{ [o["tedi-select--searchable"]]:
|
|
185
|
-
{ [o["tedi-select--disabled"]]:
|
|
182
|
+
B,
|
|
183
|
+
{ [o["tedi-select--invalid"]]: z || (t == null ? void 0 : t.type) === "error" },
|
|
184
|
+
{ [o["tedi-select--valid"]]: A || (t == null ? void 0 : t.type) === "valid" },
|
|
185
|
+
{ [o[`tedi-select--${d}`]]: d },
|
|
186
|
+
{ [o[`tedi-select--tags-${g}`]]: g },
|
|
187
|
+
{ [o["tedi-select--searchable"]]: I },
|
|
188
|
+
{ [o["tedi-select--disabled"]]: S }
|
|
186
189
|
);
|
|
187
|
-
return /* @__PURE__ */
|
|
188
|
-
/* @__PURE__ */
|
|
189
|
-
/* @__PURE__ */
|
|
190
|
-
|
|
190
|
+
return /* @__PURE__ */ h("div", { "data-name": "select", className: pe, children: [
|
|
191
|
+
/* @__PURE__ */ h("div", { className: o["tedi-select__inner"], children: [
|
|
192
|
+
/* @__PURE__ */ s(
|
|
193
|
+
Oe,
|
|
191
194
|
{
|
|
192
195
|
id: `${a}-input`,
|
|
193
|
-
label:
|
|
194
|
-
required:
|
|
195
|
-
hideLabel:
|
|
196
|
-
size:
|
|
196
|
+
label: $,
|
|
197
|
+
required: f,
|
|
198
|
+
hideLabel: E,
|
|
199
|
+
size: d,
|
|
197
200
|
renderWithoutLabel: se,
|
|
198
201
|
tooltip: ce
|
|
199
202
|
}
|
|
200
203
|
),
|
|
201
|
-
|
|
204
|
+
ue()
|
|
202
205
|
] }),
|
|
203
|
-
t && /* @__PURE__ */
|
|
206
|
+
t && /* @__PURE__ */ s(Ie, { ...t, id: v })
|
|
204
207
|
] });
|
|
205
208
|
}
|
|
206
209
|
);
|
|
207
|
-
|
|
210
|
+
Fe.displayName = "Select";
|
|
208
211
|
export {
|
|
209
|
-
|
|
210
|
-
|
|
212
|
+
Fe as Select,
|
|
213
|
+
Fe as default
|
|
211
214
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),r=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),d=require("react"),p=require("./overlay.cjs.js"),j=s=>{const{children:u,classNames:e,labelledBy:y,describedBy:f}=s,{open:n,x:m,y:h,strategy:g,focusManager:o,floating:b,arrowRef:v,getFloatingProps:x,placement:w,context:i,arrow:t,scrollLock:a}=d.useContext(p.OverlayContext);return d.useEffect(()=>{a&&(n?(document.documentElement.style.overflow="hidden",document.documentElement.scrollHeight>window.innerHeight&&(document.body.style.overflow="scroll")):(document.documentElement.style.overflow="",document.body.style.overflow=""))},[n,a]),n?l.jsx(r.FloatingPortal,{children:l.jsx(r.FloatingFocusManager,{modal:(o==null?void 0:o.modal)||!1,...o,context:i,children:l.jsxs("div",{...x({ref:b,tabIndex:-1,"aria-labelledby":y,"aria-describedby":f,style:{position:g,left:m,top:h},className:e==null?void 0:e.content}),"data-placement":w,"data-testid":"overlay-content",children:[l.jsx(r.FloatingArrow,{ref:c=>v.current=c,context:i,className:e==null?void 0:e.arrow,height:t==null?void 0:t.height,width:t==null?void 0:t.width,"data-testid":"overlay-arrow"}),u]})})}):null};exports.OverlayContent=j;
|
|
@@ -1,15 +1,40 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
2
|
export interface OverlayContentProps {
|
|
3
3
|
/**
|
|
4
|
-
*
|
|
4
|
+
* Overlay content.
|
|
5
|
+
* Can contain any valid React nodes (text, elements, components).
|
|
5
6
|
*/
|
|
6
7
|
children: ReactNode | ReactNode[];
|
|
7
8
|
/**
|
|
8
|
-
* Additional class names.
|
|
9
|
+
* Additional class names for styling overlay elements.
|
|
9
10
|
*/
|
|
10
11
|
classNames?: {
|
|
12
|
+
/**
|
|
13
|
+
* Class name applied to the floating content container.
|
|
14
|
+
*/
|
|
11
15
|
content: string;
|
|
16
|
+
/**
|
|
17
|
+
* Class name applied to the overlay arrow element.
|
|
18
|
+
*/
|
|
12
19
|
arrow: string;
|
|
13
20
|
};
|
|
21
|
+
/**
|
|
22
|
+
* ID of the element that labels the overlay content.
|
|
23
|
+
*
|
|
24
|
+
* This is used to set the `aria-labelledby` attribute on the overlay container,
|
|
25
|
+
* providing an accessible name for screen readers.
|
|
26
|
+
*
|
|
27
|
+
* Typically points to a heading element inside the overlay (e.g. a title).
|
|
28
|
+
*/
|
|
29
|
+
labelledBy?: string;
|
|
30
|
+
/**
|
|
31
|
+
* ID of the element that describes the overlay content.
|
|
32
|
+
*
|
|
33
|
+
* This is used to set the `aria-describedby` attribute on the overlay container,
|
|
34
|
+
* allowing screen readers to announce additional descriptive text.
|
|
35
|
+
*
|
|
36
|
+
* Useful for longer explanations or supporting content that complements the title.
|
|
37
|
+
*/
|
|
38
|
+
describedBy?: string;
|
|
14
39
|
}
|
|
15
40
|
export declare const OverlayContent: (props: OverlayContentProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -1,55 +1,58 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { FloatingPortal as
|
|
3
|
-
import { useContext as
|
|
4
|
-
import { OverlayContext as
|
|
5
|
-
const
|
|
6
|
-
const { children:
|
|
7
|
-
open:
|
|
8
|
-
x:
|
|
9
|
-
y
|
|
10
|
-
strategy:
|
|
1
|
+
import { jsx as n, jsxs as v } from "react/jsx-runtime";
|
|
2
|
+
import { FloatingPortal as w, FloatingFocusManager as x, FloatingArrow as F } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
|
|
3
|
+
import { useContext as E, useEffect as C } from "react";
|
|
4
|
+
import { OverlayContext as j } from "./overlay.es.js";
|
|
5
|
+
const S = (a) => {
|
|
6
|
+
const { children: c, classNames: e, labelledBy: s, describedBy: m } = a, {
|
|
7
|
+
open: l,
|
|
8
|
+
x: f,
|
|
9
|
+
y,
|
|
10
|
+
strategy: h,
|
|
11
11
|
focusManager: o,
|
|
12
|
-
floating:
|
|
13
|
-
arrowRef:
|
|
14
|
-
getFloatingProps:
|
|
15
|
-
placement:
|
|
12
|
+
floating: u,
|
|
13
|
+
arrowRef: b,
|
|
14
|
+
getFloatingProps: g,
|
|
15
|
+
placement: p,
|
|
16
16
|
context: r,
|
|
17
|
-
arrow:
|
|
17
|
+
arrow: t,
|
|
18
18
|
scrollLock: i
|
|
19
|
-
} =
|
|
20
|
-
return
|
|
21
|
-
i && (
|
|
22
|
-
}, [
|
|
19
|
+
} = E(j);
|
|
20
|
+
return C(() => {
|
|
21
|
+
i && (l ? (document.documentElement.style.overflow = "hidden", document.documentElement.scrollHeight > window.innerHeight && (document.body.style.overflow = "scroll")) : (document.documentElement.style.overflow = "", document.body.style.overflow = ""));
|
|
22
|
+
}, [l, i]), l ? /* @__PURE__ */ n(w, { children: /* @__PURE__ */ n(x, { modal: (o == null ? void 0 : o.modal) || !1, ...o, context: r, children: /* @__PURE__ */ v(
|
|
23
23
|
"div",
|
|
24
24
|
{
|
|
25
|
-
...
|
|
26
|
-
ref:
|
|
25
|
+
...g({
|
|
26
|
+
ref: u,
|
|
27
|
+
tabIndex: -1,
|
|
28
|
+
"aria-labelledby": s,
|
|
29
|
+
"aria-describedby": m,
|
|
27
30
|
style: {
|
|
28
|
-
position:
|
|
29
|
-
left:
|
|
30
|
-
top:
|
|
31
|
+
position: h,
|
|
32
|
+
left: f,
|
|
33
|
+
top: y
|
|
31
34
|
},
|
|
32
|
-
className:
|
|
35
|
+
className: e == null ? void 0 : e.content
|
|
33
36
|
}),
|
|
34
|
-
"data-placement":
|
|
37
|
+
"data-placement": p,
|
|
35
38
|
"data-testid": "overlay-content",
|
|
36
39
|
children: [
|
|
37
|
-
/* @__PURE__ */
|
|
38
|
-
|
|
40
|
+
/* @__PURE__ */ n(
|
|
41
|
+
F,
|
|
39
42
|
{
|
|
40
|
-
ref: (
|
|
43
|
+
ref: (d) => b.current = d,
|
|
41
44
|
context: r,
|
|
42
|
-
className:
|
|
43
|
-
height:
|
|
44
|
-
width:
|
|
45
|
+
className: e == null ? void 0 : e.arrow,
|
|
46
|
+
height: t == null ? void 0 : t.height,
|
|
47
|
+
width: t == null ? void 0 : t.width,
|
|
45
48
|
"data-testid": "overlay-arrow"
|
|
46
49
|
}
|
|
47
50
|
),
|
|
48
|
-
|
|
51
|
+
c
|
|
49
52
|
]
|
|
50
53
|
}
|
|
51
54
|
) }) }) : null;
|
|
52
55
|
};
|
|
53
56
|
export {
|
|
54
|
-
|
|
57
|
+
S as OverlayContent
|
|
55
58
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const A=require("react/jsx-runtime"),t=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),s=require("react"),G=require("./overlay-content.cjs.js"),H=require("./overlay-trigger.cjs.js"),z=require("../../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),a=require("../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),B=require("../../../helpers/hooks/use-is-touch-device.cjs.js"),J=require("../../../helpers/hooks/use-is-mounted.cjs.js"),K=3,M=s.createContext({open:!1,onOpenChange:()=>{},isMounted:!1,openWith:"hover",reference:()=>{},floating:()=>{},focusManager:{},arrowRef:{current:null},x:0,y:0,strategy:"absolute",getReferenceProps:()=>({}),getFloatingProps:()=>({}),arrow:{width:0,height:0,x:0,y:0,centerOffset:0},placement:"top",context:{},scrollLock:void 0}),c=x=>{const C=B.useIsTouchDevice(),{children:q,placement:w="top",openWith:i=C?"click":"hover",defaultOpen:F=!1,open:r,onToggle:o,role:P="tooltip",arrowDimensions:e,offset:R=K+((e==null?void 0:e.height)??0),focusManager:l,dismissible:u,scrollLock:b}=x,{order:k=["reference","content"],initialFocus:d,modal:f,...I}=l??{},T=d!==void 0?d:f?0:void 0,[g,p]=s.useState(F),h=s.useRef(null),_=J.useIsMounted(),v=s.useMemo(()=>o&&typeof r<"u"?r:g,[o,r,g]),y=s.useCallback(m=>{typeof r>"u"&&p(m),o==null||o(m)},[r,p,o]),{x:U,y:j,refs:O,strategy:S,context:n,middlewareData:D,placement:E}=t.useFloating({placement:w,open:v,onOpenChange:y,middleware:[a.offset(R),a.flip(),a.shift({padding:8}),a.arrow({element:h,padding:4})],whileElementsMounted:z.autoUpdate}),{getReferenceProps:L,getFloatingProps:W}=t.useInteractions([t.useHover(n,{enabled:i==="hover",handleClose:t.safePolygon()}),t.useClick(n,{toggle:u}),t.useFocus(n,{enabled:i==="hover"}),t.useRole(n,{role:P}),t.useDismiss(n,{enabled:u,outsidePressEvent:i==="click"?"mousedown":"pointerdown"})]);return A.jsx(M.Provider,{value:{open:v,onOpenChange:y,isMounted:_,openWith:i,reference:O.setReference,floating:O.setFloating,arrowRef:h,focusManager:l?{order:k,modal:f,initialFocus:T,...I}:void 0,x:U,y:j,strategy:S,getReferenceProps:L,getFloatingProps:W,arrow:{width:e==null?void 0:e.width,height:e==null?void 0:e.height,...D.arrow},context:n,placement:E,scrollLock:b},children:q})};c.Trigger=H.OverlayTrigger;c.Content=G.OverlayContent;exports.Overlay=c;exports.OverlayContext=M;exports.default=c;
|