@progress/kendo-react-popup 4.14.0-dev.202201140931 → 4.14.1-dev.202201181415

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.
@@ -0,0 +1,449 @@
1
+ var __extends = (this && this.__extends) || (function () {
2
+ var extendStatics = function (d, b) {
3
+ extendStatics = Object.setPrototypeOf ||
4
+ ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
5
+ function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
6
+ return extendStatics(d, b);
7
+ };
8
+ return function (d, b) {
9
+ extendStatics(d, b);
10
+ function __() { this.constructor = d; }
11
+ d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
12
+ };
13
+ })();
14
+ var __assign = (this && this.__assign) || function () {
15
+ __assign = Object.assign || function(t) {
16
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
17
+ s = arguments[i];
18
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
19
+ t[p] = s[p];
20
+ }
21
+ return t;
22
+ };
23
+ return __assign.apply(this, arguments);
24
+ };
25
+ import * as React from 'react';
26
+ import * as ReactDOM from 'react-dom';
27
+ import * as PropTypes from 'prop-types';
28
+ import { slide } from './animation';
29
+ import { canUseDOM, ZIndexContext, validatePackage, classNames } from '@progress/kendo-react-common';
30
+ import { AlignPoint, alignElement, domUtils, positionElement, Collision as CollisionEnum } from '@progress/kendo-popup-common';
31
+ import { throttle, FRAME_DURATION } from './util';
32
+ import { packageMetadata } from './package-metadata';
33
+ var DEFAULT_POPUP_ZINDEX = 100;
34
+ var ZINDEX_POPUP_STEP = 1;
35
+ function isEquivalent(a, b) {
36
+ if (a === b) {
37
+ return true;
38
+ }
39
+ if (!!a !== !!b) {
40
+ return false;
41
+ }
42
+ var aProps = Object.getOwnPropertyNames(a);
43
+ var bProps = Object.getOwnPropertyNames(b);
44
+ if (aProps.length !== bProps.length) {
45
+ return false;
46
+ }
47
+ for (var i = 0; i < aProps.length; i++) {
48
+ var propName = aProps[i];
49
+ if (a[propName] !== b[propName]) {
50
+ return false;
51
+ }
52
+ }
53
+ return true;
54
+ }
55
+ var DEFAULT_OFFSET = {
56
+ left: -1000,
57
+ top: 0
58
+ };
59
+ var Status;
60
+ (function (Status) {
61
+ Status["hiding"] = "hiding";
62
+ Status["hidden"] = "hidden";
63
+ Status["showing"] = "showing";
64
+ Status["shown"] = "shown";
65
+ Status["reposition"] = "reposition";
66
+ })(Status || (Status = {}));
67
+ var ANIMATION_CONTAINER = 'k-animation-container';
68
+ var ANIMATION_CONTAINER_SHOWN = 'k-animation-container-shown';
69
+ var ANIMATION_CONTAINER_RELATIVE = 'k-animation-container-relative';
70
+ var ANIMATION_CONTAINER_CHILD = 'k-child-animation-container';
71
+ var K_POPUP = 'k-popup';
72
+ /**
73
+ * @hidden
74
+ */
75
+ var PopupWithoutContext = /** @class */ (function (_super) {
76
+ __extends(PopupWithoutContext, _super);
77
+ function PopupWithoutContext(props) {
78
+ var _this = _super.call(this, props) || this;
79
+ /**
80
+ * @hidden
81
+ */
82
+ _this.state = { current: Status.hidden, previous: Status.hidden, props: {} };
83
+ _this._popup = null;
84
+ _this.show = function (popup) {
85
+ _this.setPosition(popup);
86
+ _this.animate(popup.firstChild, 'enter', _this.onOpened);
87
+ _this.setState({ current: Status.shown, previous: _this.state.current });
88
+ };
89
+ _this.setPosition = function (popup) {
90
+ var _a = _this.props, anchorAlign = _a.anchorAlign, popupAlign = _a.popupAlign, collision = _a.collision, offset = _a.offset, anchor = _a.anchor, margin = _a.margin, scale = _a.scale, positionMode = _a.positionMode;
91
+ var alignedOffset = alignElement({
92
+ anchor: anchor,
93
+ anchorAlign: anchorAlign,
94
+ element: popup,
95
+ elementAlign: popupAlign,
96
+ offset: offset,
97
+ margin: margin,
98
+ positionMode: positionMode,
99
+ scale: scale
100
+ });
101
+ var position = positionElement({
102
+ anchor: anchor,
103
+ anchorAlign: anchorAlign,
104
+ element: popup,
105
+ elementAlign: popupAlign,
106
+ collisions: collision,
107
+ currentLocation: alignedOffset,
108
+ margin: _this.props.margin
109
+ });
110
+ popup.style.top = position.offset.top + 'px';
111
+ popup.style.left = position.offset.left + 'px';
112
+ _this._collisions = {
113
+ fit: position.fit,
114
+ fitted: position.fitted,
115
+ flip: position.flip,
116
+ flipped: position.flipped
117
+ };
118
+ if (_this.props.onPosition) {
119
+ var event_1 = {
120
+ target: _this,
121
+ flipped: position.flipped,
122
+ fitted: position.fitted
123
+ };
124
+ _this.props.onPosition.call(undefined, event_1);
125
+ }
126
+ };
127
+ _this.onOpened = function () {
128
+ var element = _this._popup;
129
+ if (!element) {
130
+ return;
131
+ }
132
+ if (_this.props.show) {
133
+ element.classList.add(ANIMATION_CONTAINER_SHOWN);
134
+ }
135
+ _this.attachRepositionHandlers(element);
136
+ if (_this.props.onOpen) {
137
+ _this.props.onOpen.call(undefined, { target: _this });
138
+ }
139
+ };
140
+ _this.animate = function (element, type, callback) {
141
+ if (!_this.props.popupAlign) {
142
+ return;
143
+ }
144
+ var animationDirection;
145
+ var _a = _this.props.popupAlign, horizontal = _a.horizontal, vertical = _a.vertical;
146
+ if (horizontal === 'left' && vertical === 'center') {
147
+ animationDirection = 'right';
148
+ }
149
+ else if (horizontal === 'right' && vertical === 'center') {
150
+ animationDirection = 'left';
151
+ }
152
+ else if (vertical === 'top') {
153
+ animationDirection = 'down';
154
+ }
155
+ else {
156
+ animationDirection = 'up';
157
+ }
158
+ var flipPositions = {
159
+ down: 'up',
160
+ up: 'down',
161
+ left: 'right',
162
+ right: 'left'
163
+ };
164
+ if (_this._collisions && _this._collisions.flipped) {
165
+ animationDirection = flipPositions[animationDirection];
166
+ }
167
+ slide(element, animationDirection, _this.animationDuration[type], type, callback);
168
+ };
169
+ _this.onClosing = function (popup) {
170
+ if (!_this.props.show) {
171
+ popup.classList.remove(ANIMATION_CONTAINER_SHOWN);
172
+ }
173
+ _this.detachRepositionHandlers();
174
+ };
175
+ _this.onClosed = function () {
176
+ if (_this.state.current === Status.hiding && _this.state.previous === Status.shown) {
177
+ _this.setState({ current: Status.hidden, previous: _this.state.current });
178
+ }
179
+ if (_this.props.onClose) {
180
+ _this.props.onClose.call(undefined, { target: _this });
181
+ }
182
+ };
183
+ _this.getCurrentZIndex = function () {
184
+ return _this.context ? _this.context + ZINDEX_POPUP_STEP : DEFAULT_POPUP_ZINDEX;
185
+ };
186
+ validatePackage(packageMetadata);
187
+ _this.reposition = throttle(_this.reposition.bind(_this), FRAME_DURATION);
188
+ return _this;
189
+ }
190
+ /**
191
+ * @hidden
192
+ */
193
+ PopupWithoutContext.getDerivedStateFromProps = function (props, state) {
194
+ var show = props.show, anchor = props.anchor, anchorAlign = props.anchorAlign, appendTo = props.appendTo, collision = props.collision, popupAlign = props.popupAlign, className = props.className, popupClass = props.popupClass, style = props.style, offset = props.offset, contentKey = props.contentKey;
195
+ var nextState = __assign({}, state, { props: {
196
+ show: show, anchor: anchor, anchorAlign: anchorAlign, appendTo: appendTo, collision: collision, popupAlign: popupAlign, className: className, popupClass: popupClass, style: style, offset: offset, contentKey: contentKey
197
+ } });
198
+ if (props.show) {
199
+ if (state.current === Status.hidden || state.current === Status.hiding) {
200
+ return __assign({}, nextState, { current: Status.showing, previous: state.current });
201
+ }
202
+ if (state.current === Status.showing) {
203
+ return __assign({}, nextState, { current: Status.shown, previous: state.current });
204
+ }
205
+ if (state.current === Status.shown &&
206
+ (!isEquivalent(offset, state.props.offset) ||
207
+ !isEquivalent(anchorAlign, state.props.anchorAlign) ||
208
+ !isEquivalent(appendTo, state.props.appendTo) ||
209
+ !isEquivalent(collision, state.props.collision) ||
210
+ !isEquivalent(popupAlign, state.props.popupAlign) ||
211
+ !isEquivalent(style, state.props.style) ||
212
+ anchor !== state.props.anchor ||
213
+ popupClass !== state.props.popupClass ||
214
+ className !== state.props.className)) {
215
+ return __assign({}, nextState, { current: Status.reposition, previous: state.current });
216
+ }
217
+ return nextState;
218
+ }
219
+ if (state.current === Status.hiding || state.current === Status.hidden) {
220
+ return __assign({}, nextState, { current: Status.hidden, previous: state.current });
221
+ }
222
+ return __assign({}, nextState, { current: Status.hiding, previous: state.current });
223
+ };
224
+ /**
225
+ * @hidden
226
+ */
227
+ PopupWithoutContext.prototype.componentDidUpdate = function (prevProps) {
228
+ if (this.state.current === Status.showing && this._popup) {
229
+ this.show(this._popup);
230
+ }
231
+ else if (this.state.current === Status.hiding && this._popup) {
232
+ this.onClosing(this._popup);
233
+ this.animate(this._popup.firstChild, 'exit', this.onClosed);
234
+ }
235
+ else if (this.state.current === Status.reposition && this.state.previous === Status.shown) {
236
+ this.setState({ current: Status.shown, previous: this.state.current });
237
+ }
238
+ else if (this.state.current === Status.shown &&
239
+ prevProps.contentKey !== this.props.contentKey && this._popup) {
240
+ this.setPosition(this._popup);
241
+ }
242
+ };
243
+ /**
244
+ * @hidden
245
+ */
246
+ PopupWithoutContext.prototype.componentDidMount = function () {
247
+ if (this.state.current === Status.showing && this._popup) {
248
+ this.show(this._popup);
249
+ }
250
+ };
251
+ /**
252
+ * @hidden
253
+ */
254
+ PopupWithoutContext.prototype.componentWillUnmount = function () {
255
+ this.detachRepositionHandlers();
256
+ };
257
+ /**
258
+ * @hidden
259
+ */
260
+ PopupWithoutContext.prototype.render = function () {
261
+ var _this = this;
262
+ var _a = this.props, children = _a.children, className = _a.className, popupClass = _a.popupClass, show = _a.show, id = _a.id, positionMode = _a.positionMode;
263
+ var appendTo = this.props.appendTo ?
264
+ this.props.appendTo :
265
+ canUseDOM ?
266
+ (this.props.anchor && this.props.anchor.ownerDocument ? this.props.anchor.ownerDocument.body : document.body)
267
+ : undefined;
268
+ if (this.state.current === Status.reposition && this.state.previous === Status.shown && this._popup) {
269
+ this.setPosition(this._popup);
270
+ }
271
+ var style = Object.assign({}, { position: positionMode, top: 0, left: -10000 }, this.props.style || {});
272
+ var closing = this.state.current === Status.hiding;
273
+ if ((show || closing) && appendTo) {
274
+ var currentZIndex = this.getCurrentZIndex();
275
+ var popupElement = (React.createElement(ZIndexContext.Provider, { value: currentZIndex },
276
+ React.createElement("div", { className: classNames(ANIMATION_CONTAINER, ANIMATION_CONTAINER_RELATIVE, className), id: id, ref: function (e) { return _this._popup = e; }, style: __assign({ zIndex: currentZIndex }, style) },
277
+ React.createElement("div", { className: classNames(K_POPUP, popupClass, ANIMATION_CONTAINER_CHILD), style: { transitionDelay: '0ms' } }, children))));
278
+ return ReactDOM.createPortal(popupElement, appendTo);
279
+ }
280
+ return null;
281
+ };
282
+ Object.defineProperty(PopupWithoutContext.prototype, "animationDuration", {
283
+ get: function () {
284
+ var animate = this.props.animate;
285
+ var enter = 0;
286
+ var exit = 0;
287
+ if (animate) {
288
+ if (animate === true) {
289
+ enter = exit = 300;
290
+ }
291
+ else {
292
+ enter = animate.openDuration || 0;
293
+ exit = animate.closeDuration || 0;
294
+ }
295
+ }
296
+ return { enter: enter, exit: exit };
297
+ },
298
+ enumerable: true,
299
+ configurable: true
300
+ });
301
+ PopupWithoutContext.prototype.attachRepositionHandlers = function (element) {
302
+ var _this = this;
303
+ this.detachRepositionHandlers();
304
+ this._scrollableParents = domUtils.scrollableParents(this.props.anchor || element);
305
+ this._scrollableParents.map(function (p) { return p.addEventListener('scroll', _this.reposition); });
306
+ window.addEventListener('resize', this.reposition);
307
+ };
308
+ PopupWithoutContext.prototype.detachRepositionHandlers = function () {
309
+ var _this = this;
310
+ if (this._scrollableParents) {
311
+ this._scrollableParents.map(function (p) { return p.removeEventListener('scroll', _this.reposition); });
312
+ this._scrollableParents = undefined;
313
+ }
314
+ window.removeEventListener('resize', this.reposition);
315
+ };
316
+ PopupWithoutContext.prototype.reposition = function () {
317
+ this.setState({ current: Status.reposition, previous: this.state.current });
318
+ };
319
+ /**
320
+ * @hidden
321
+ */
322
+ PopupWithoutContext.propTypes = {
323
+ anchor: function (props) {
324
+ var anchor = props.anchor;
325
+ if (anchor && typeof anchor.nodeType !== 'number') {
326
+ return new Error('Invalid prop `anchor` supplied to `Kendo React Popup`. Validation failed.');
327
+ }
328
+ return null;
329
+ },
330
+ appendTo: function (props) {
331
+ var element = props.appendTo;
332
+ if (element && typeof element.nodeType !== 'number') {
333
+ return new Error('Invalid prop `appendTo` supplied to `Kendo React Popup`. Validation failed.');
334
+ }
335
+ return null;
336
+ },
337
+ className: PropTypes.oneOfType([
338
+ PropTypes.string,
339
+ PropTypes.arrayOf(PropTypes.string),
340
+ PropTypes.object
341
+ ]),
342
+ id: PropTypes.string,
343
+ popupClass: PropTypes.oneOfType([
344
+ PropTypes.string,
345
+ PropTypes.arrayOf(PropTypes.string),
346
+ PropTypes.object
347
+ ]),
348
+ collision: PropTypes.shape({
349
+ horizontal: PropTypes.oneOf([
350
+ CollisionEnum.fit,
351
+ CollisionEnum.flip,
352
+ CollisionEnum.none
353
+ ]),
354
+ vertical: PropTypes.oneOf([
355
+ CollisionEnum.fit,
356
+ CollisionEnum.flip,
357
+ CollisionEnum.none
358
+ ])
359
+ }),
360
+ anchorAlign: PropTypes.shape({
361
+ horizontal: PropTypes.oneOf([
362
+ AlignPoint.left,
363
+ AlignPoint.center,
364
+ AlignPoint.right
365
+ ]),
366
+ vertical: PropTypes.oneOf([
367
+ AlignPoint.top,
368
+ AlignPoint.center,
369
+ AlignPoint.bottom
370
+ ])
371
+ }),
372
+ popupAlign: PropTypes.shape({
373
+ horizontal: PropTypes.oneOf([
374
+ AlignPoint.left,
375
+ AlignPoint.center,
376
+ AlignPoint.right
377
+ ]),
378
+ vertical: PropTypes.oneOf([
379
+ AlignPoint.top,
380
+ AlignPoint.center,
381
+ AlignPoint.bottom
382
+ ])
383
+ }),
384
+ offset: PropTypes.shape({
385
+ left: PropTypes.number,
386
+ top: PropTypes.number
387
+ }),
388
+ children: PropTypes.oneOfType([
389
+ PropTypes.element,
390
+ PropTypes.node
391
+ ]),
392
+ show: PropTypes.bool,
393
+ animate: PropTypes.oneOfType([
394
+ PropTypes.bool,
395
+ PropTypes.shape({
396
+ openDuration: PropTypes.number,
397
+ closeDuration: PropTypes.number
398
+ })
399
+ ]),
400
+ margin: PropTypes.shape({
401
+ horizontal: PropTypes.number,
402
+ vertical: PropTypes.number
403
+ }),
404
+ positionMode: PropTypes.oneOf([
405
+ 'fixed',
406
+ 'absolute'
407
+ ]),
408
+ scale: PropTypes.number,
409
+ style: PropTypes.object,
410
+ onClose: PropTypes.func,
411
+ onPosition: PropTypes.func,
412
+ onOpen: PropTypes.func
413
+ };
414
+ /**
415
+ * @hidden
416
+ */
417
+ PopupWithoutContext.defaultProps = {
418
+ collision: {
419
+ horizontal: CollisionEnum.fit,
420
+ vertical: CollisionEnum.flip
421
+ },
422
+ anchorAlign: {
423
+ horizontal: AlignPoint.left,
424
+ vertical: AlignPoint.bottom
425
+ },
426
+ popupAlign: {
427
+ horizontal: AlignPoint.left,
428
+ vertical: AlignPoint.top
429
+ },
430
+ offset: DEFAULT_OFFSET,
431
+ animate: true,
432
+ show: false,
433
+ margin: {
434
+ horizontal: 0,
435
+ vertical: 0
436
+ },
437
+ positionMode: 'absolute'
438
+ };
439
+ /**
440
+ * @hidden
441
+ */
442
+ PopupWithoutContext.contextType = ZIndexContext;
443
+ /**
444
+ * @hidden
445
+ */
446
+ PopupWithoutContext.displayName = 'PopupComponent';
447
+ return PopupWithoutContext;
448
+ }(React.Component));
449
+ export { PopupWithoutContext };
@@ -1,4 +1,4 @@
1
1
  /**
2
2
  * @hidden
3
3
  */
4
- export declare const slide: (element: HTMLElement, direction: string, duration: any, type: any, callback: any) => any;
4
+ export declare const slide: (element: HTMLElement, direction: NavigationReason, duration: number, type: "enter" | "exit", callback: any) => any;
package/dist/es/main.d.ts CHANGED
@@ -1,9 +1,11 @@
1
- import { Popup, PopupPropsContext } from './PopupWithContext';
1
+ import { Popup, PopupPropsContext } from './Popup';
2
2
  import { PopupProps } from './models/PopupProps';
3
- import { PopupSettings } from './models/PopupSettings';
4
3
  import { Align } from './models/Align';
5
4
  import { Collision } from './models/Collision';
6
5
  import { Offset } from './models/Offset';
7
6
  import { PopupAnimation } from './models/PopupAnimation';
8
7
  import { OpenEvent as PopupOpenEvent, CloseEvent as PopupCloseEvent } from './models/Events';
9
- export { Popup, PopupPropsContext, PopupProps, PopupSettings, Align, Collision, Offset, PopupAnimation, PopupOpenEvent, PopupCloseEvent };
8
+ import { Margin } from './models/Margin';
9
+ import { CollisionType } from './models/CollisionType';
10
+ import { PositionMode } from './models/PositionMode';
11
+ export { Popup, PopupPropsContext, PopupProps, Align, Collision, Offset, PopupAnimation, Margin, PositionMode, CollisionType, PopupOpenEvent, PopupCloseEvent };
package/dist/es/main.js CHANGED
@@ -1,2 +1,2 @@
1
- import { Popup, PopupPropsContext } from './PopupWithContext';
1
+ import { Popup, PopupPropsContext } from './Popup';
2
2
  export { Popup, PopupPropsContext };
@@ -1,8 +1,10 @@
1
+ import { CollisionType as CollisionTypeBase } from '@progress/kendo-popup-common';
1
2
  /**
2
3
  * Defines the possible collision behavior when the Popup is not fully visible.
3
4
  *
4
5
  * The available options are:
5
6
  * - `fit`&mdash;Moves the Popup horizontally until it is fully displayed in the viewport.
6
7
  * - `flip`&mdash;Flips the Popup position based on the origin and the position properties.
8
+ * - `none`&mdash;The Popup is rendered at its original position.
7
9
  */
8
- export declare type CollisionType = 'fit' | 'flip';
10
+ export declare type CollisionType = CollisionTypeBase;
@@ -17,3 +17,20 @@ export interface CloseEvent {
17
17
  */
18
18
  target: Popup;
19
19
  }
20
+ /**
21
+ * Represents the object of the `Position` Popup event.
22
+ */
23
+ export interface PositionEvent {
24
+ /**
25
+ * An event target.
26
+ */
27
+ target: Popup;
28
+ /**
29
+ * Indicates if the position is fitted.
30
+ */
31
+ fitted: boolean;
32
+ /**
33
+ * Indicates if the position is flipped.
34
+ */
35
+ flipped: boolean;
36
+ }
@@ -1,9 +1,95 @@
1
1
  /// <reference types="react" />
2
- import { PopupSettings } from './PopupSettings';
2
+ import { Collision } from './Collision';
3
+ import { Align } from './Align';
4
+ import { OpenEvent, CloseEvent, PositionEvent } from './Events';
5
+ import { Offset } from './Offset';
6
+ import { PopupAnimation } from './PopupAnimation';
7
+ import { Margin } from './Margin';
8
+ import { PositionMode } from './PositionMode';
9
+ import { PopupSettings } from '@progress/kendo-popup-common';
3
10
  /**
4
11
  * Represents the props of the [KendoReact Popup component]({% slug overview_popup %}).
5
12
  */
6
13
  export interface PopupProps extends PopupSettings {
14
+ /**
15
+ * Controls the Popup animation ([see example]({% slug animations_popup %})). By default, the opening and closing animations are enabled.
16
+ */
17
+ animate?: boolean | PopupAnimation;
18
+ /**
19
+ * Specifies the element which will be used as an anchor ([see example]({% slug alignmentpositioning_popup %})). The Popup opens next to that element.
20
+ */
21
+ anchor?: HTMLElement | null;
22
+ /**
23
+ * Defines the container to which the Popup will be appended. Defaults to [`body`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body).
24
+ */
25
+ appendTo?: HTMLElement | null;
26
+ /**
27
+ * Specifies the pivot point of the anchor ([see example]({% slug alignmentpositioning_popup %})).
28
+ */
29
+ anchorAlign?: Align;
30
+ /**
31
+ * Configures the collision behavior of the Popup ([see example]({% slug viewportboundarydetection_popup %})).
32
+ */
33
+ collision?: Collision;
34
+ /**
35
+ * Configures the margin value that will be added to the popup dimensions
36
+ * in pixels and leaves a blank space between the popup and the anchor.
37
+ */
38
+ margin?: Margin;
39
+ /**
40
+ * Specifies the position mode of the component. By default, the Popup uses fixed positioning.
41
+ * To make the Popup acquire absolute positioning, set this option to `absolute`.
42
+ *
43
+ * > If you need to support mobile browsers with the zoom option, use the `absolute` positioning of the Popup.
44
+ */
45
+ positionMode?: PositionMode;
46
+ /**
47
+ * Used to set the document scale when using a [scale transform](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale).
48
+ *
49
+ * The document or container scale is required to compute the popup position correctly. Detecting the scale is not reliable and must be set by providing a value for SCALE. See [Support for Document Scale]({% slug documentscale_popup %}).
50
+ *
51
+ * > Using this token is not necessary for user-applied browser zoom.
52
+ *
53
+ */
54
+ scale?: number;
55
+ /**
56
+ * Specifies the pivot point of the Popup ([see example]({% slug alignmentpositioning_popup %})).
57
+ */
58
+ popupAlign?: Align;
59
+ /**
60
+ * Specifies the absolute position of the element ([see example]({% slug alignmentpositioning_popup %})). The Popup opens next to that point. The pivot point of the Popup is defined by the `popupAlign` configuration option. The boundary detection is applied by using the window viewport.
61
+ */
62
+ offset?: Offset;
63
+ /**
64
+ * Specifies a list of CSS classes that will be added to the internal animated element ([see example]({% slug appearance_popup %})).
65
+ */
66
+ popupClass?: string | Array<string> | {
67
+ [key: string]: boolean;
68
+ };
69
+ /**
70
+ * Specifies a list of CSS classes that will be added to the Popup element.
71
+ */
72
+ className?: string | Array<string>;
73
+ /**
74
+ * Specifies the id that will be added to the Popup element.
75
+ */
76
+ id?: string;
77
+ /**
78
+ * Represents the styles that are applied to the Popup.
79
+ */
80
+ style?: React.CSSProperties;
81
+ /**
82
+ * Fires after the Popup is opened and the opening animation ends.
83
+ */
84
+ onOpen?: (event: OpenEvent) => void;
85
+ /**
86
+ * Fires after the Popup is closed.
87
+ */
88
+ onClose?: (event: CloseEvent) => void;
89
+ /**
90
+ * Fires after the Popup position is set.
91
+ */
92
+ onPosition?: (event: PositionEvent) => void;
7
93
  /**
8
94
  * Controls the Popup visibility ([see example]({% slug hidden_popup %})). Defaults to `false`.
9
95
  */
@@ -18,4 +104,8 @@ export interface PopupProps extends PopupSettings {
18
104
  * @hidden
19
105
  */
20
106
  children?: React.ReactNode;
107
+ /**
108
+ * @hidden
109
+ */
110
+ useBaseStyles?: boolean;
21
111
  }
@@ -5,7 +5,7 @@ export var packageMetadata = {
5
5
  name: '@progress/kendo-react-popup',
6
6
  productName: 'KendoReact',
7
7
  productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
8
- publishDate: 1642151026,
8
+ publishDate: 1642513600,
9
9
  version: '',
10
10
  licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
11
11
  };
package/dist/es/util.d.ts CHANGED
@@ -11,13 +11,6 @@ export declare const hasBoundingRect: (elem: HTMLElement) => boolean;
11
11
  * @hidden
12
12
  */
13
13
  export declare const FRAME_DURATION: number;
14
- /**
15
- * @hidden
16
- */
17
- export declare const CollisionType: {
18
- fit: string;
19
- flip: string;
20
- };
21
14
  /**
22
15
  * @hidden
23
16
  */
package/dist/es/util.js CHANGED
@@ -14,13 +14,6 @@ export var hasBoundingRect = function (elem) { return !!elem.getBoundingClientRe
14
14
  * @hidden
15
15
  */
16
16
  export var FRAME_DURATION = 1000 / 60; // 1000ms divided by 60fps
17
- /**
18
- * @hidden
19
- */
20
- export var CollisionType = {
21
- fit: 'fit',
22
- flip: 'flip'
23
- };
24
17
  /**
25
18
  * @hidden
26
19
  */