@progress/kendo-react-popup 9.0.0-develop.9 → 9.0.1-develop.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,321 +0,0 @@
1
- /**
2
- * @license
3
- *-------------------------------------------------------------------------------------------
4
- * Copyright © 2024 Progress Software Corporation. All rights reserved.
5
- * Licensed under commercial license. See LICENSE.md in the package root for more information
6
- *-------------------------------------------------------------------------------------------
7
- */
8
- "use client";
9
- import * as v from "react";
10
- import * as A from "react-dom";
11
- import e from "prop-types";
12
- import { slide as C } from "./animation.mjs";
13
- import { classNames as P, uPopup as O, validatePackage as E, ZIndexContext as D, canUseDOM as x } from "@progress/kendo-react-common";
14
- import { alignElement as M, positionElement as N, Collision as d, AlignPoint as p, domUtils as z } from "@progress/kendo-popup-common";
15
- import { throttle as R, FRAME_DURATION as L } from "./util.mjs";
16
- import { packageMetadata as I } from "./package-metadata.mjs";
17
- const S = 100, U = 1;
18
- function w(b, o) {
19
- if (b === o)
20
- return !0;
21
- if (!!b != !!o)
22
- return !1;
23
- const t = Object.getOwnPropertyNames(b), s = Object.getOwnPropertyNames(o);
24
- if (t.length !== s.length)
25
- return !1;
26
- for (let n = 0; n < t.length; n++) {
27
- const i = t[n];
28
- if (b[i] !== o[i])
29
- return !1;
30
- }
31
- return !0;
32
- }
33
- const K = {
34
- left: -1e3,
35
- top: 0
36
- }, y = class y extends v.Component {
37
- constructor(o) {
38
- super(o), this.context = 0, this.state = { current: "hidden", previous: "hidden", props: {} }, this._popup = null, this.show = (t) => {
39
- window == null || window.addEventListener("mousedown", this.handleMouseDown), this.setPosition(t), this.animate(t.firstChild, "enter", this.onOpened), this.setState({ current: "shown", previous: this.state.current });
40
- }, this.setPosition = (t) => {
41
- const { anchorAlign: s, popupAlign: n, collision: i, offset: a, anchor: l, margin: h, scale: c, positionMode: u } = this.props, { width: m, height: f } = t.style;
42
- t.style.width = t.offsetWidth + "px", t.style.height = t.offsetHeight + "px";
43
- const g = M({
44
- anchor: l,
45
- anchorAlign: s,
46
- element: t,
47
- elementAlign: n,
48
- offset: a,
49
- margin: h,
50
- positionMode: u,
51
- scale: c
52
- }), r = N({
53
- anchor: l,
54
- anchorAlign: s,
55
- element: t,
56
- elementAlign: n,
57
- collisions: i,
58
- currentLocation: g,
59
- margin: this.props.margin
60
- });
61
- if (t.style.top = r.offset.top + "px", t.style.left = r.offset.left + "px", t.style.width = m, t.style.height = f, this._collisions = {
62
- fit: r.fit,
63
- fitted: r.fitted,
64
- flip: r.flip,
65
- flipped: r.flipped
66
- }, this.props.onPosition) {
67
- const T = {
68
- target: this,
69
- flipped: r.flipped,
70
- fitted: r.fitted
71
- };
72
- this.props.onPosition.call(void 0, T);
73
- }
74
- }, this.onOpened = () => {
75
- const t = this._popup;
76
- if (t) {
77
- if (this.props.show) {
78
- const { unstyled: s } = this.props, n = s && s.uPopup;
79
- t.classList.add(
80
- ...P(O.animationContainerShown({ c: n })).split(" ").filter((i) => i)
81
- );
82
- }
83
- this.attachRepositionHandlers(t), this.props.onOpen && this.props.onOpen.call(void 0, { target: this });
84
- }
85
- }, this.animate = (t, s, n) => {
86
- if (!this.props.popupAlign)
87
- return;
88
- let i;
89
- const { horizontal: a, vertical: l } = this.props.popupAlign;
90
- a === "left" && l === "center" ? i = "right" : a === "right" && l === "center" ? i = "left" : l === "top" ? i = "down" : i = "up";
91
- const h = {
92
- down: "up",
93
- up: "down",
94
- left: "right",
95
- right: "left"
96
- };
97
- this._collisions && this._collisions.flipped && (i = h[i]);
98
- const { unstyled: c } = this.props, u = c && c.uPopup;
99
- C(t, i, this.animationDuration[s], s, n, u);
100
- }, this.handleMouseDown = (t) => {
101
- var i, a;
102
- const s = ((i = t == null ? void 0 : t.target) == null ? void 0 : i.closest(".k-animation-container")) === null, n = ((a = this.props.anchor) == null ? void 0 : a.contains(t == null ? void 0 : t.target)) || !1;
103
- if (s) {
104
- if (this.props.onMouseDownOutside) {
105
- const l = {
106
- target: this,
107
- event: t,
108
- state: this.state,
109
- isAnchorClicked: n
110
- };
111
- this.props.onMouseDownOutside.call(void 0, l);
112
- }
113
- window == null || window.removeEventListener("mousedown", this.handleMouseDown);
114
- }
115
- }, this.onClosing = (t) => {
116
- if (!this.props.show) {
117
- const { unstyled: s } = this.props, n = s && s.uPopup;
118
- t.classList.remove(
119
- ...P(O.animationContainerShown({ c: n })).split(" ").filter((i) => i)
120
- );
121
- }
122
- this.detachRepositionHandlers();
123
- }, this.onClosed = () => {
124
- this.state.current === "hiding" && this.state.previous === "shown" && this.setState({ current: "hidden", previous: this.state.current }), this.props.onClose && this.props.onClose.call(void 0, { target: this });
125
- }, this.getCurrentZIndex = () => this.context ? this.context + U : S, E(I), this.reposition = R(this.reposition.bind(this), L);
126
- }
127
- /**
128
- * Represents the Popup DOM element.
129
- */
130
- get element() {
131
- return this._popup;
132
- }
133
- /**
134
- * @hidden
135
- */
136
- static getDerivedStateFromProps(o, t) {
137
- const {
138
- show: s,
139
- anchor: n,
140
- anchorAlign: i,
141
- appendTo: a,
142
- collision: l,
143
- popupAlign: h,
144
- className: c,
145
- popupClass: u,
146
- style: m,
147
- offset: f,
148
- contentKey: g
149
- } = o, r = {
150
- ...t,
151
- props: {
152
- show: s,
153
- anchor: n,
154
- anchorAlign: i,
155
- appendTo: a,
156
- collision: l,
157
- popupAlign: h,
158
- className: c,
159
- popupClass: u,
160
- style: m,
161
- offset: f,
162
- contentKey: g
163
- }
164
- };
165
- return o.show ? t.current === "hidden" || t.current === "hiding" ? { ...r, current: "showing", previous: t.current } : t.current === "showing" ? { ...r, current: "shown", previous: t.current } : t.current === "shown" && (!w(f, t.props.offset) || !w(i, t.props.anchorAlign) || !w(a, t.props.appendTo) || !w(l, t.props.collision) || !w(h, t.props.popupAlign) || !w(m, t.props.style) || n !== t.props.anchor || u !== t.props.popupClass || c !== t.props.className) ? { ...r, current: "reposition", previous: t.current } : r : t.current === "hiding" || t.current === "hidden" ? { ...r, current: "hidden", previous: t.current } : { ...r, current: "hiding", previous: t.current };
166
- }
167
- /**
168
- *
169
- * @hidden
170
- */
171
- componentDidUpdate(o) {
172
- this.state.current === "showing" && this._popup ? this.show(this._popup) : this.state.current === "hiding" && this._popup ? (this.onClosing(this._popup), this.animate(this._popup.firstChild, "exit", this.onClosed)) : this.state.current === "reposition" && this.state.previous === "shown" ? setTimeout(() => {
173
- this.setState({ current: "shown", previous: this.state.current });
174
- }, 0) : this.state.current === "shown" && o.contentKey !== this.props.contentKey && this._popup && this.setPosition(this._popup);
175
- }
176
- /**
177
- * @hidden
178
- */
179
- componentDidMount() {
180
- this.state.current === "showing" && this._popup && this.show(this._popup);
181
- }
182
- /**
183
- * @hidden
184
- */
185
- componentWillUnmount() {
186
- this.detachRepositionHandlers();
187
- }
188
- /**
189
- * @hidden
190
- */
191
- render() {
192
- const { children: o, className: t, popupClass: s, unstyled: n, show: i, id: a, positionMode: l } = this.props, h = n && n.uPopup, c = this.props.appendTo ? this.props.appendTo : x ? this.props.anchor && this.props.anchor.ownerDocument ? this.props.anchor.ownerDocument.body : document.body : void 0;
193
- this.state.current === "reposition" && this.state.previous === "shown" && this._popup && this.setPosition(this._popup);
194
- const u = Object.assign(
195
- {},
196
- { position: l, top: 0, left: -1e4 },
197
- this.props.style || {}
198
- ), m = this.state.current === "hiding";
199
- if ((i || m) && c) {
200
- const f = this.getCurrentZIndex(), g = /* @__PURE__ */ v.createElement(D.Provider, { value: f }, /* @__PURE__ */ v.createElement(
201
- "div",
202
- {
203
- onKeyDown: this.props.onKeyDown,
204
- className: P(O.animationContainer({ c: h }), t),
205
- id: a,
206
- ref: (r) => this._popup = r,
207
- style: {
208
- zIndex: f,
209
- ...u
210
- }
211
- },
212
- /* @__PURE__ */ v.createElement(
213
- "div",
214
- {
215
- className: P(O.animationChild({ c: h })),
216
- style: { transitionDelay: "0ms" }
217
- },
218
- /* @__PURE__ */ v.createElement(
219
- "div",
220
- {
221
- role: this.props.role,
222
- className: P(O.popup({ c: h }), s)
223
- },
224
- o
225
- )
226
- )
227
- ));
228
- return this.props.appendTo !== null ? A.createPortal(g, c) : g;
229
- }
230
- return null;
231
- }
232
- get animationDuration() {
233
- const o = this.props.animate;
234
- let t = 0, s = 0;
235
- return o && (o === !0 ? t = s = 300 : (t = o.openDuration || 0, s = o.closeDuration || 0)), { enter: t, exit: s };
236
- }
237
- attachRepositionHandlers(o) {
238
- this.detachRepositionHandlers(), this._scrollableParents = z.scrollableParents(this.props.anchor || o), this._scrollableParents && this._scrollableParents.map((t) => t.addEventListener("scroll", this.reposition)), window.addEventListener("resize", this.reposition);
239
- }
240
- detachRepositionHandlers() {
241
- this._scrollableParents && (this._scrollableParents.map((o) => o.removeEventListener("scroll", this.reposition)), this._scrollableParents = void 0), window.removeEventListener("resize", this.reposition);
242
- }
243
- reposition() {
244
- this.setState({ current: "reposition", previous: this.state.current });
245
- }
246
- };
247
- y.propTypes = {
248
- anchor: function(o) {
249
- const t = o.anchor;
250
- return t && typeof t.nodeType != "number" ? new Error("Invalid prop `anchor` supplied to `Kendo React Popup`. Validation failed.") : null;
251
- },
252
- appendTo: function(o) {
253
- const t = o.appendTo;
254
- return t && typeof t.nodeType != "number" ? new Error("Invalid prop `appendTo` supplied to `Kendo React Popup`. Validation failed.") : null;
255
- },
256
- className: e.oneOfType([e.string, e.arrayOf(e.string), e.object]),
257
- id: e.string,
258
- popupClass: e.oneOfType([e.string, e.arrayOf(e.string), e.object]),
259
- collision: e.shape({
260
- horizontal: e.oneOf([d.fit, d.flip, d.none]),
261
- vertical: e.oneOf([d.fit, d.flip, d.none])
262
- }),
263
- anchorAlign: e.shape({
264
- horizontal: e.oneOf([p.left, p.center, p.right]),
265
- vertical: e.oneOf([p.top, p.center, p.bottom])
266
- }),
267
- popupAlign: e.shape({
268
- horizontal: e.oneOf([p.left, p.center, p.right]),
269
- vertical: e.oneOf([p.top, p.center, p.bottom])
270
- }),
271
- offset: e.shape({
272
- left: e.number,
273
- top: e.number
274
- }),
275
- children: e.oneOfType([e.element, e.node]),
276
- show: e.bool,
277
- animate: e.oneOfType([
278
- e.bool,
279
- e.shape({
280
- openDuration: e.number,
281
- closeDuration: e.number
282
- })
283
- ]),
284
- margin: e.shape({
285
- horizontal: e.number,
286
- vertical: e.number
287
- }),
288
- positionMode: e.oneOf(["fixed", "absolute"]),
289
- scale: e.number,
290
- style: e.object,
291
- onClose: e.func,
292
- onPosition: e.func,
293
- onOpen: e.func,
294
- onKeyPress: e.func,
295
- onMouseDownOutside: e.func
296
- }, y.defaultProps = {
297
- collision: {
298
- horizontal: d.fit,
299
- vertical: d.flip
300
- },
301
- anchorAlign: {
302
- horizontal: p.left,
303
- vertical: p.bottom
304
- },
305
- popupAlign: {
306
- horizontal: p.left,
307
- vertical: p.top
308
- },
309
- offset: K,
310
- animate: !0,
311
- show: !1,
312
- margin: {
313
- horizontal: 0,
314
- vertical: 0
315
- },
316
- positionMode: "absolute"
317
- }, y.contextType = D, y.displayName = "PopupComponent";
318
- let _ = y;
319
- export {
320
- _ as PopupWithoutContext
321
- };