@workday/canvas-kit-popup-stack 6.8.9 → 6.9.0-next.5
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/commonjs/index.js +11 -4
- package/dist/commonjs/lib/PopupStack.d.ts +1 -91
- package/dist/commonjs/lib/PopupStack.d.ts.map +1 -1
- package/dist/commonjs/lib/PopupStack.js +4 -2
- package/dist/es6/lib/PopupStack.d.ts +1 -91
- package/dist/es6/lib/PopupStack.d.ts.map +1 -1
- package/dist/es6/lib/PopupStack.js +1 -1
- package/lib/PopupStack.ts +1 -2
- package/package.json +7 -15
- package/ts3.5/dist/commonjs/index.d.ts +0 -2
- package/ts3.5/dist/commonjs/lib/PopupStack.d.ts +0 -237
- package/ts3.5/dist/es6/index.d.ts +0 -2
- package/ts3.5/dist/es6/lib/PopupStack.d.ts +0 -237
package/dist/commonjs/index.js
CHANGED
|
@@ -1,6 +1,13 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
function
|
|
3
|
-
|
|
4
|
-
}
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
5
|
+
}) : (function(o, m, k, k2) {
|
|
6
|
+
if (k2 === undefined) k2 = k;
|
|
7
|
+
o[k2] = m[k];
|
|
8
|
+
}));
|
|
9
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
10
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
11
|
+
};
|
|
5
12
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
|
|
13
|
+
__exportStar(require("./lib/PopupStack"), exports);
|
|
@@ -142,96 +142,6 @@ export declare function resetStack(): void;
|
|
|
142
142
|
*
|
|
143
143
|
* @param adapter The parts of the PopupStack that we want to override
|
|
144
144
|
*/
|
|
145
|
-
export declare const createAdapter: (adapter: Partial<
|
|
146
|
-
/**
|
|
147
|
-
* Create a HTMLElement as the container for the popup stack item. The returned element reference
|
|
148
|
-
* will be the reference to be passed to all other methods. The Popup Stack will control when this
|
|
149
|
-
* element is added and removed from the DOM as well as the `z-index` style property. Your content
|
|
150
|
-
* should be added to this element.
|
|
151
|
-
*/
|
|
152
|
-
createContainer(): HTMLElement;
|
|
153
|
-
/**
|
|
154
|
-
* Adds a PopupStackItem to the stack. This should only be called when the item is rendered to the
|
|
155
|
-
* page. Z-indexes are set when the item is added to the stack. If your application requires
|
|
156
|
-
* popups to be registered initially, but rendered when the user triggers some event, call this
|
|
157
|
-
* method when the event triggers.
|
|
158
|
-
*/
|
|
159
|
-
add(item: PopupStackItem): void;
|
|
160
|
-
/**
|
|
161
|
-
* Removes an item from a stack by its `HTMLElement` reference. This should be called when a popup
|
|
162
|
-
* is "closed" or when the element is removed from the page entirely to ensure proper memory
|
|
163
|
-
* cleanup. A popup will be removed from the stack it is a part of. This will not automatically be
|
|
164
|
-
* called when the element is removed from the DOM. This method will reset z-index values of the
|
|
165
|
-
* stack.
|
|
166
|
-
*/
|
|
167
|
-
remove(element: HTMLElement): void;
|
|
168
|
-
/**
|
|
169
|
-
* Returns true when the provided `element` is at the top of the stack. It will return false if it
|
|
170
|
-
* is not the top of the stack or is not found in the stack. The `element` should be the same
|
|
171
|
-
* reference that was passed to `add`
|
|
172
|
-
*/
|
|
173
|
-
isTopmost(element: HTMLElement): boolean;
|
|
174
|
-
/**
|
|
175
|
-
* Returns an array of elements defined by the `element` passed to `add`. This method return
|
|
176
|
-
* elements in the order of lowest z-index to highest z-index. Some popup behaviors will need to
|
|
177
|
-
* make decisions based on z-index order.
|
|
178
|
-
*/
|
|
179
|
-
getElements(stackOverride?: Stack | undefined): HTMLElement[];
|
|
180
|
-
/**
|
|
181
|
-
* Bring the element to the top of the stack. This is useful for persistent popups to place them
|
|
182
|
-
* on top of the stack when clicked. If an `owner` was provided to an item when it was added and
|
|
183
|
-
* that owner is a DOM child of another item in the stack, that item will be considered a "parent"
|
|
184
|
-
* to this item. If the previous are true, all "children" stack items will be brought to top as
|
|
185
|
-
* well and will be on top of the element passed to `bringToTop`. This maintains stack item
|
|
186
|
-
* "hierarchy" so that stack items like Popups and Tooltips don't get pushed behind elements they
|
|
187
|
-
* are supposed to be on top of.
|
|
188
|
-
*
|
|
189
|
-
* This does not need to be called when a popup is added since added popups are already place on
|
|
190
|
-
* the top of the stack.
|
|
191
|
-
*/
|
|
192
|
-
bringToTop(element: HTMLElement): void;
|
|
193
|
-
/**
|
|
194
|
-
* Compares a Popup by its element reference against the event target and the stack. An event
|
|
195
|
-
* target is considered to be "contained" by an element under the following conditions:
|
|
196
|
-
* - The `eventTarget` is a DOM child of the popup element
|
|
197
|
-
* - The `eventTarget` is the `owner` element passed when it was added to the stack
|
|
198
|
-
* - The `eventTarget` is a DOM child of the `owner` element
|
|
199
|
-
*
|
|
200
|
-
* This method should be used instead of `element.contains` so that clicking a popup target can
|
|
201
|
-
* opt-in to toggling. Otherwise there is no way to opt-out of toggle behavior (because the target
|
|
202
|
-
* is not inside `element`).
|
|
203
|
-
*/
|
|
204
|
-
contains(element: HTMLElement, eventTarget: HTMLElement): boolean;
|
|
205
|
-
/**
|
|
206
|
-
* Add a new stack context for popups. This method could be called with the same element multiple
|
|
207
|
-
* times, but should only push a new stack context once. The most common use-case for calling
|
|
208
|
-
* `pushStackContext` is when entering fullscreen, but multiple fullscreen listeners could be
|
|
209
|
-
* pushing the same element which is very difficult to ensure only one stack is used. To mitigate,
|
|
210
|
-
* this method filters out multiple calls to push the same element as a new stack context.
|
|
211
|
-
*/
|
|
212
|
-
pushStackContext(container: HTMLElement): void;
|
|
213
|
-
/**
|
|
214
|
-
* Remove the topmost stack context. The stack context will only be removed if the top stack
|
|
215
|
-
* context container element matches to guard against accidental remove of other stack contexts
|
|
216
|
-
* you don't own.
|
|
217
|
-
*/
|
|
218
|
-
popStackContext(container: HTMLElement): void;
|
|
219
|
-
/**
|
|
220
|
-
* Transfer the popup stack item into the current popup stack context.
|
|
221
|
-
*
|
|
222
|
-
* An example might be a popup
|
|
223
|
-
* that is opened and an element goes into fullscreen. The default popup stack context is
|
|
224
|
-
* `document.body`, but the [Fullscreen
|
|
225
|
-
* API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API) will only render elements
|
|
226
|
-
* that are children of the fullscreen element. If the popup isn't transferred to the current
|
|
227
|
-
* popup stack context, the popup will remain open, but will no longer be rendered. This method
|
|
228
|
-
* will transfer that popup to the fullscreen element so that it will render. Popups created while
|
|
229
|
-
* in a fullscreen context that need to be transferred back when fullscreen is exited should also
|
|
230
|
-
* call this method. While popups may still render when fullscreen is exited, popups will be
|
|
231
|
-
* members of different popup stack contexts which will cause unspecified results (like the escape
|
|
232
|
-
* key will choose the wrong popup as the "topmost").
|
|
233
|
-
*/
|
|
234
|
-
transferToCurrentContext(item: PopupStackItem): void;
|
|
235
|
-
}>) => void;
|
|
145
|
+
export declare const createAdapter: (adapter: Partial<typeof PopupStack>) => void;
|
|
236
146
|
export {};
|
|
237
147
|
//# sourceMappingURL=PopupStack.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PopupStack.d.ts","sourceRoot":"","sources":["../../../lib/PopupStack.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,OAAO,EAAE,WAAW,CAAC;IACrB;;;;;;;;;;;;;;;OAeG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;CACrB;AASD;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAO9D;
|
|
1
|
+
{"version":3,"file":"PopupStack.d.ts","sourceRoot":"","sources":["../../../lib/PopupStack.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,OAAO,EAAE,WAAW,CAAC;IACrB;;;;;;;;;;;;;;;OAeG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;CACrB;AASD;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAO9D;AAyDD,UAAU,KAAK;IACb,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,WAAW,CAAC;IAC9B,MAAM,EAAE;QACN,GAAG,EAAE,MAAM,CAAC;QACZ,GAAG,EAAE,MAAM,CAAC;QACZ,QAAQ,EAAE,OAAO,QAAQ,CAAC;KAC3B,CAAC;IACF,QAAQ,EAAE,OAAO,CAAC,OAAO,UAAU,CAAC,CAAC;CACtC;AAwFD,eAAO,MAAM,UAAU;IACrB;;;;;OAKG;uBACgB,WAAW;IAS9B;;;;;OAKG;cACO,cAAc,GAAG,IAAI;IAY/B;;;;;;OAMG;oBACa,WAAW,GAAG,IAAI;IAkBlC;;;;OAIG;uBACgB,WAAW,GAAG,OAAO;IAaxC;;;;OAIG;oDACiC,WAAW,EAAE;IAQjD;;;;;;;;;;;OAWG;wBACiB,WAAW,GAAG,IAAI;IA6BtC;;;;;;;;;;OAUG;sBACe,WAAW,eAAe,WAAW,GAAG,OAAO;IA2BjE;;;;;;OAMG;gCACyB,WAAW,GAAG,IAAI;IAoB9C;;;;OAIG;+BACwB,WAAW,GAAG,IAAI;IAY7C;;;;;;;;;;;;;;OAcG;mCAC4B,cAAc,GAAG,IAAI;CAqBrD,CAAC;AAEF;;;GAGG;AACH,wBAAgB,UAAU,SAEzB;AAED;;;GAGG;AACH,eAAO,MAAM,aAAa,YAAa,QAAQ,iBAAiB,CAAC,SAEhE,CAAC"}
|
|
@@ -10,6 +10,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
10
10
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
11
11
|
};
|
|
12
12
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
13
|
+
exports.createAdapter = exports.resetStack = exports.PopupStack = exports.getValue = void 0;
|
|
13
14
|
var screenfull_1 = __importDefault(require("screenfull"));
|
|
14
15
|
function getLast(items) {
|
|
15
16
|
if (items.length) {
|
|
@@ -32,7 +33,7 @@ function getValue(index, length) {
|
|
|
32
33
|
}
|
|
33
34
|
exports.getValue = getValue;
|
|
34
35
|
// IE11 doesn't support Array.prototype.find, so we'll polyfill here
|
|
35
|
-
function find(items, predicate
|
|
36
|
+
function find(items, predicate) {
|
|
36
37
|
var length = items.length;
|
|
37
38
|
for (var i = 0; i < length; i++) {
|
|
38
39
|
if (predicate(items[i], i, items)) {
|
|
@@ -397,9 +398,10 @@ exports.resetStack = resetStack;
|
|
|
397
398
|
*
|
|
398
399
|
* @param adapter The parts of the PopupStack that we want to override
|
|
399
400
|
*/
|
|
400
|
-
|
|
401
|
+
var createAdapter = function (adapter) {
|
|
401
402
|
stack._adapter = adapter;
|
|
402
403
|
};
|
|
404
|
+
exports.createAdapter = createAdapter;
|
|
403
405
|
// keep track of the element ourselves to avoid accidentally popping off someone else's stack
|
|
404
406
|
// context
|
|
405
407
|
var element = null;
|
|
@@ -142,96 +142,6 @@ export declare function resetStack(): void;
|
|
|
142
142
|
*
|
|
143
143
|
* @param adapter The parts of the PopupStack that we want to override
|
|
144
144
|
*/
|
|
145
|
-
export declare const createAdapter: (adapter: Partial<
|
|
146
|
-
/**
|
|
147
|
-
* Create a HTMLElement as the container for the popup stack item. The returned element reference
|
|
148
|
-
* will be the reference to be passed to all other methods. The Popup Stack will control when this
|
|
149
|
-
* element is added and removed from the DOM as well as the `z-index` style property. Your content
|
|
150
|
-
* should be added to this element.
|
|
151
|
-
*/
|
|
152
|
-
createContainer(): HTMLElement;
|
|
153
|
-
/**
|
|
154
|
-
* Adds a PopupStackItem to the stack. This should only be called when the item is rendered to the
|
|
155
|
-
* page. Z-indexes are set when the item is added to the stack. If your application requires
|
|
156
|
-
* popups to be registered initially, but rendered when the user triggers some event, call this
|
|
157
|
-
* method when the event triggers.
|
|
158
|
-
*/
|
|
159
|
-
add(item: PopupStackItem): void;
|
|
160
|
-
/**
|
|
161
|
-
* Removes an item from a stack by its `HTMLElement` reference. This should be called when a popup
|
|
162
|
-
* is "closed" or when the element is removed from the page entirely to ensure proper memory
|
|
163
|
-
* cleanup. A popup will be removed from the stack it is a part of. This will not automatically be
|
|
164
|
-
* called when the element is removed from the DOM. This method will reset z-index values of the
|
|
165
|
-
* stack.
|
|
166
|
-
*/
|
|
167
|
-
remove(element: HTMLElement): void;
|
|
168
|
-
/**
|
|
169
|
-
* Returns true when the provided `element` is at the top of the stack. It will return false if it
|
|
170
|
-
* is not the top of the stack or is not found in the stack. The `element` should be the same
|
|
171
|
-
* reference that was passed to `add`
|
|
172
|
-
*/
|
|
173
|
-
isTopmost(element: HTMLElement): boolean;
|
|
174
|
-
/**
|
|
175
|
-
* Returns an array of elements defined by the `element` passed to `add`. This method return
|
|
176
|
-
* elements in the order of lowest z-index to highest z-index. Some popup behaviors will need to
|
|
177
|
-
* make decisions based on z-index order.
|
|
178
|
-
*/
|
|
179
|
-
getElements(stackOverride?: Stack | undefined): HTMLElement[];
|
|
180
|
-
/**
|
|
181
|
-
* Bring the element to the top of the stack. This is useful for persistent popups to place them
|
|
182
|
-
* on top of the stack when clicked. If an `owner` was provided to an item when it was added and
|
|
183
|
-
* that owner is a DOM child of another item in the stack, that item will be considered a "parent"
|
|
184
|
-
* to this item. If the previous are true, all "children" stack items will be brought to top as
|
|
185
|
-
* well and will be on top of the element passed to `bringToTop`. This maintains stack item
|
|
186
|
-
* "hierarchy" so that stack items like Popups and Tooltips don't get pushed behind elements they
|
|
187
|
-
* are supposed to be on top of.
|
|
188
|
-
*
|
|
189
|
-
* This does not need to be called when a popup is added since added popups are already place on
|
|
190
|
-
* the top of the stack.
|
|
191
|
-
*/
|
|
192
|
-
bringToTop(element: HTMLElement): void;
|
|
193
|
-
/**
|
|
194
|
-
* Compares a Popup by its element reference against the event target and the stack. An event
|
|
195
|
-
* target is considered to be "contained" by an element under the following conditions:
|
|
196
|
-
* - The `eventTarget` is a DOM child of the popup element
|
|
197
|
-
* - The `eventTarget` is the `owner` element passed when it was added to the stack
|
|
198
|
-
* - The `eventTarget` is a DOM child of the `owner` element
|
|
199
|
-
*
|
|
200
|
-
* This method should be used instead of `element.contains` so that clicking a popup target can
|
|
201
|
-
* opt-in to toggling. Otherwise there is no way to opt-out of toggle behavior (because the target
|
|
202
|
-
* is not inside `element`).
|
|
203
|
-
*/
|
|
204
|
-
contains(element: HTMLElement, eventTarget: HTMLElement): boolean;
|
|
205
|
-
/**
|
|
206
|
-
* Add a new stack context for popups. This method could be called with the same element multiple
|
|
207
|
-
* times, but should only push a new stack context once. The most common use-case for calling
|
|
208
|
-
* `pushStackContext` is when entering fullscreen, but multiple fullscreen listeners could be
|
|
209
|
-
* pushing the same element which is very difficult to ensure only one stack is used. To mitigate,
|
|
210
|
-
* this method filters out multiple calls to push the same element as a new stack context.
|
|
211
|
-
*/
|
|
212
|
-
pushStackContext(container: HTMLElement): void;
|
|
213
|
-
/**
|
|
214
|
-
* Remove the topmost stack context. The stack context will only be removed if the top stack
|
|
215
|
-
* context container element matches to guard against accidental remove of other stack contexts
|
|
216
|
-
* you don't own.
|
|
217
|
-
*/
|
|
218
|
-
popStackContext(container: HTMLElement): void;
|
|
219
|
-
/**
|
|
220
|
-
* Transfer the popup stack item into the current popup stack context.
|
|
221
|
-
*
|
|
222
|
-
* An example might be a popup
|
|
223
|
-
* that is opened and an element goes into fullscreen. The default popup stack context is
|
|
224
|
-
* `document.body`, but the [Fullscreen
|
|
225
|
-
* API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API) will only render elements
|
|
226
|
-
* that are children of the fullscreen element. If the popup isn't transferred to the current
|
|
227
|
-
* popup stack context, the popup will remain open, but will no longer be rendered. This method
|
|
228
|
-
* will transfer that popup to the fullscreen element so that it will render. Popups created while
|
|
229
|
-
* in a fullscreen context that need to be transferred back when fullscreen is exited should also
|
|
230
|
-
* call this method. While popups may still render when fullscreen is exited, popups will be
|
|
231
|
-
* members of different popup stack contexts which will cause unspecified results (like the escape
|
|
232
|
-
* key will choose the wrong popup as the "topmost").
|
|
233
|
-
*/
|
|
234
|
-
transferToCurrentContext(item: PopupStackItem): void;
|
|
235
|
-
}>) => void;
|
|
145
|
+
export declare const createAdapter: (adapter: Partial<typeof PopupStack>) => void;
|
|
236
146
|
export {};
|
|
237
147
|
//# sourceMappingURL=PopupStack.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PopupStack.d.ts","sourceRoot":"","sources":["../../../lib/PopupStack.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,OAAO,EAAE,WAAW,CAAC;IACrB;;;;;;;;;;;;;;;OAeG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;CACrB;AASD;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAO9D;
|
|
1
|
+
{"version":3,"file":"PopupStack.d.ts","sourceRoot":"","sources":["../../../lib/PopupStack.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,OAAO,EAAE,WAAW,CAAC;IACrB;;;;;;;;;;;;;;;OAeG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;CACrB;AASD;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAO9D;AAyDD,UAAU,KAAK;IACb,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,WAAW,CAAC;IAC9B,MAAM,EAAE;QACN,GAAG,EAAE,MAAM,CAAC;QACZ,GAAG,EAAE,MAAM,CAAC;QACZ,QAAQ,EAAE,OAAO,QAAQ,CAAC;KAC3B,CAAC;IACF,QAAQ,EAAE,OAAO,CAAC,OAAO,UAAU,CAAC,CAAC;CACtC;AAwFD,eAAO,MAAM,UAAU;IACrB;;;;;OAKG;uBACgB,WAAW;IAS9B;;;;;OAKG;cACO,cAAc,GAAG,IAAI;IAY/B;;;;;;OAMG;oBACa,WAAW,GAAG,IAAI;IAkBlC;;;;OAIG;uBACgB,WAAW,GAAG,OAAO;IAaxC;;;;OAIG;oDACiC,WAAW,EAAE;IAQjD;;;;;;;;;;;OAWG;wBACiB,WAAW,GAAG,IAAI;IA6BtC;;;;;;;;;;OAUG;sBACe,WAAW,eAAe,WAAW,GAAG,OAAO;IA2BjE;;;;;;OAMG;gCACyB,WAAW,GAAG,IAAI;IAoB9C;;;;OAIG;+BACwB,WAAW,GAAG,IAAI;IAY7C;;;;;;;;;;;;;;OAcG;mCAC4B,cAAc,GAAG,IAAI;CAqBrD,CAAC;AAEF;;;GAGG;AACH,wBAAgB,UAAU,SAEzB;AAED;;;GAGG;AACH,eAAO,MAAM,aAAa,YAAa,QAAQ,iBAAiB,CAAC,SAEhE,CAAC"}
|
|
@@ -26,7 +26,7 @@ export function getValue(index, length) {
|
|
|
26
26
|
return Math.max(min, max - (length - index) + 1);
|
|
27
27
|
}
|
|
28
28
|
// IE11 doesn't support Array.prototype.find, so we'll polyfill here
|
|
29
|
-
function find(items, predicate
|
|
29
|
+
function find(items, predicate) {
|
|
30
30
|
var length = items.length;
|
|
31
31
|
for (var i = 0; i < length; i++) {
|
|
32
32
|
if (predicate(items[i], i, items)) {
|
package/lib/PopupStack.ts
CHANGED
|
@@ -53,8 +53,7 @@ export function getValue(index: number, length: number): number {
|
|
|
53
53
|
// IE11 doesn't support Array.prototype.find, so we'll polyfill here
|
|
54
54
|
function find<T>(
|
|
55
55
|
items: T[],
|
|
56
|
-
predicate: (value: T, index: number, obj: T[]) => boolean
|
|
57
|
-
thisArg?: any
|
|
56
|
+
predicate: (value: T, index: number, obj: T[]) => boolean
|
|
58
57
|
): T | undefined {
|
|
59
58
|
const length = items.length;
|
|
60
59
|
for (let i = 0; i < length; i++) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-popup-stack",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.9.0-next.5+1b09db00",
|
|
4
4
|
"description": "Stack for managing popup UIs to coordinate global concerns like escape key handling and rendering order",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -10,29 +10,21 @@
|
|
|
10
10
|
"types": "dist/es6/index.d.ts",
|
|
11
11
|
"repository": {
|
|
12
12
|
"type": "git",
|
|
13
|
-
"url": "https://github.com/
|
|
13
|
+
"url": "https://github.com/workday/canvas-kit.git",
|
|
14
|
+
"directory": "modules/popup-stack"
|
|
14
15
|
},
|
|
15
16
|
"files": [
|
|
16
17
|
"dist/",
|
|
17
18
|
"lib/",
|
|
18
|
-
"index.ts"
|
|
19
|
-
"ts3.5/**/*"
|
|
19
|
+
"index.ts"
|
|
20
20
|
],
|
|
21
|
-
"typesVersions": {
|
|
22
|
-
"<=3.5": {
|
|
23
|
-
"*": [
|
|
24
|
-
"ts3.5/*"
|
|
25
|
-
]
|
|
26
|
-
}
|
|
27
|
-
},
|
|
28
21
|
"scripts": {
|
|
29
22
|
"watch": "yarn build:es6 -w",
|
|
30
|
-
"clean": "rimraf dist && rimraf
|
|
23
|
+
"clean": "rimraf dist && rimraf .build-info && mkdirp dist",
|
|
31
24
|
"build:cjs": "tsc -p tsconfig.cjs.json",
|
|
32
25
|
"build:es6": "tsc -p tsconfig.es6.json",
|
|
33
26
|
"build:rebuild": "npm-run-all clean build",
|
|
34
|
-
"build
|
|
35
|
-
"build": "npm-run-all --parallel build:cjs build:es6 --sequential build:downlevel-dts",
|
|
27
|
+
"build": "npm-run-all --parallel build:cjs build:es6",
|
|
36
28
|
"depcheck": "node ../../utils/check-dependencies-exist.js",
|
|
37
29
|
"typecheck:src": "tsc -p . --noEmit --incremental false"
|
|
38
30
|
},
|
|
@@ -45,5 +37,5 @@
|
|
|
45
37
|
"dependencies": {
|
|
46
38
|
"screenfull": "^5.2.0"
|
|
47
39
|
},
|
|
48
|
-
"gitHead": "
|
|
40
|
+
"gitHead": "1b09db0053a1c1698eb243c94ce80655f7527a63"
|
|
49
41
|
}
|
|
@@ -1,237 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* This type is purposely an interface so that it can be extended for a specific use-case.
|
|
3
|
-
*/
|
|
4
|
-
export interface PopupStackItem {
|
|
5
|
-
/**
|
|
6
|
-
* All items in the stack are identified by their DOM element reference. A DOM element is
|
|
7
|
-
* framework agnostic.
|
|
8
|
-
*/
|
|
9
|
-
element: HTMLElement;
|
|
10
|
-
/**
|
|
11
|
-
* An owner is typically a trigger or anchor target. For example, it will be a HTMLButtonElement
|
|
12
|
-
* that opened a dropdown menu. If an owner is provided, _and_ that owner element is part of
|
|
13
|
-
* another stack item, it will be considered a "parent" of the provided stack item. This reference
|
|
14
|
-
* helps in the following ways:
|
|
15
|
-
* - Click outside detection typically will use `PopupStack.contains()` which includes this
|
|
16
|
-
* element. If you wish to close a popup when the target is clicked, add a click handler to do
|
|
17
|
-
* so.
|
|
18
|
-
* - `PopupStack.bringToTop()` will also bring children to top as well using the `owner` reference
|
|
19
|
-
* to map a "child" popup back to its parent. This is useful for "Window" or other persistent
|
|
20
|
-
* popups that are brought to the front when clicked. This will prevent the "Window" from
|
|
21
|
-
* rendering on top of child popups as they will be brought along also.
|
|
22
|
-
* - Synthetic event systems like in React will bubble events through "portals". This is
|
|
23
|
-
* inconsistent with DOM event bubbling. This reference helps normalize that behavior across
|
|
24
|
-
* different frameworks.
|
|
25
|
-
*/
|
|
26
|
-
owner?: HTMLElement;
|
|
27
|
-
}
|
|
28
|
-
/**
|
|
29
|
-
* Calculate the zIndex value of a given index in the stack. The range is 20 where 30 is the minimum
|
|
30
|
-
* and 50 is the maximum. If there are more than 20 items in the stack, we'll have multiple zIndexes
|
|
31
|
-
* of 30 at the bottom of the stack since the user probably can't tell the difference with that many
|
|
32
|
-
* popups.
|
|
33
|
-
*/
|
|
34
|
-
export declare function getValue(index: number, length: number): number;
|
|
35
|
-
interface Stack {
|
|
36
|
-
items: PopupStackItem[];
|
|
37
|
-
container?: () => HTMLElement;
|
|
38
|
-
zIndex: {
|
|
39
|
-
min: number;
|
|
40
|
-
max: number;
|
|
41
|
-
getValue: typeof getValue;
|
|
42
|
-
};
|
|
43
|
-
_adapter: Partial<typeof PopupStack>;
|
|
44
|
-
}
|
|
45
|
-
export declare const PopupStack: {
|
|
46
|
-
/**
|
|
47
|
-
* Create a HTMLElement as the container for the popup stack item. The returned element reference
|
|
48
|
-
* will be the reference to be passed to all other methods. The Popup Stack will control when this
|
|
49
|
-
* element is added and removed from the DOM as well as the `z-index` style property. Your content
|
|
50
|
-
* should be added to this element.
|
|
51
|
-
*/
|
|
52
|
-
createContainer(): HTMLElement;
|
|
53
|
-
/**
|
|
54
|
-
* Adds a PopupStackItem to the stack. This should only be called when the item is rendered to the
|
|
55
|
-
* page. Z-indexes are set when the item is added to the stack. If your application requires
|
|
56
|
-
* popups to be registered initially, but rendered when the user triggers some event, call this
|
|
57
|
-
* method when the event triggers.
|
|
58
|
-
*/
|
|
59
|
-
add(item: PopupStackItem): void;
|
|
60
|
-
/**
|
|
61
|
-
* Removes an item from a stack by its `HTMLElement` reference. This should be called when a popup
|
|
62
|
-
* is "closed" or when the element is removed from the page entirely to ensure proper memory
|
|
63
|
-
* cleanup. A popup will be removed from the stack it is a part of. This will not automatically be
|
|
64
|
-
* called when the element is removed from the DOM. This method will reset z-index values of the
|
|
65
|
-
* stack.
|
|
66
|
-
*/
|
|
67
|
-
remove(element: HTMLElement): void;
|
|
68
|
-
/**
|
|
69
|
-
* Returns true when the provided `element` is at the top of the stack. It will return false if it
|
|
70
|
-
* is not the top of the stack or is not found in the stack. The `element` should be the same
|
|
71
|
-
* reference that was passed to `add`
|
|
72
|
-
*/
|
|
73
|
-
isTopmost(element: HTMLElement): boolean;
|
|
74
|
-
/**
|
|
75
|
-
* Returns an array of elements defined by the `element` passed to `add`. This method return
|
|
76
|
-
* elements in the order of lowest z-index to highest z-index. Some popup behaviors will need to
|
|
77
|
-
* make decisions based on z-index order.
|
|
78
|
-
*/
|
|
79
|
-
getElements(stackOverride?: Stack | undefined): HTMLElement[];
|
|
80
|
-
/**
|
|
81
|
-
* Bring the element to the top of the stack. This is useful for persistent popups to place them
|
|
82
|
-
* on top of the stack when clicked. If an `owner` was provided to an item when it was added and
|
|
83
|
-
* that owner is a DOM child of another item in the stack, that item will be considered a "parent"
|
|
84
|
-
* to this item. If the previous are true, all "children" stack items will be brought to top as
|
|
85
|
-
* well and will be on top of the element passed to `bringToTop`. This maintains stack item
|
|
86
|
-
* "hierarchy" so that stack items like Popups and Tooltips don't get pushed behind elements they
|
|
87
|
-
* are supposed to be on top of.
|
|
88
|
-
*
|
|
89
|
-
* This does not need to be called when a popup is added since added popups are already place on
|
|
90
|
-
* the top of the stack.
|
|
91
|
-
*/
|
|
92
|
-
bringToTop(element: HTMLElement): void;
|
|
93
|
-
/**
|
|
94
|
-
* Compares a Popup by its element reference against the event target and the stack. An event
|
|
95
|
-
* target is considered to be "contained" by an element under the following conditions:
|
|
96
|
-
* - The `eventTarget` is a DOM child of the popup element
|
|
97
|
-
* - The `eventTarget` is the `owner` element passed when it was added to the stack
|
|
98
|
-
* - The `eventTarget` is a DOM child of the `owner` element
|
|
99
|
-
*
|
|
100
|
-
* This method should be used instead of `element.contains` so that clicking a popup target can
|
|
101
|
-
* opt-in to toggling. Otherwise there is no way to opt-out of toggle behavior (because the target
|
|
102
|
-
* is not inside `element`).
|
|
103
|
-
*/
|
|
104
|
-
contains(element: HTMLElement, eventTarget: HTMLElement): boolean;
|
|
105
|
-
/**
|
|
106
|
-
* Add a new stack context for popups. This method could be called with the same element multiple
|
|
107
|
-
* times, but should only push a new stack context once. The most common use-case for calling
|
|
108
|
-
* `pushStackContext` is when entering fullscreen, but multiple fullscreen listeners could be
|
|
109
|
-
* pushing the same element which is very difficult to ensure only one stack is used. To mitigate,
|
|
110
|
-
* this method filters out multiple calls to push the same element as a new stack context.
|
|
111
|
-
*/
|
|
112
|
-
pushStackContext(container: HTMLElement): void;
|
|
113
|
-
/**
|
|
114
|
-
* Remove the topmost stack context. The stack context will only be removed if the top stack
|
|
115
|
-
* context container element matches to guard against accidental remove of other stack contexts
|
|
116
|
-
* you don't own.
|
|
117
|
-
*/
|
|
118
|
-
popStackContext(container: HTMLElement): void;
|
|
119
|
-
/**
|
|
120
|
-
* Transfer the popup stack item into the current popup stack context.
|
|
121
|
-
*
|
|
122
|
-
* An example might be a popup
|
|
123
|
-
* that is opened and an element goes into fullscreen. The default popup stack context is
|
|
124
|
-
* `document.body`, but the [Fullscreen
|
|
125
|
-
* API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API) will only render elements
|
|
126
|
-
* that are children of the fullscreen element. If the popup isn't transferred to the current
|
|
127
|
-
* popup stack context, the popup will remain open, but will no longer be rendered. This method
|
|
128
|
-
* will transfer that popup to the fullscreen element so that it will render. Popups created while
|
|
129
|
-
* in a fullscreen context that need to be transferred back when fullscreen is exited should also
|
|
130
|
-
* call this method. While popups may still render when fullscreen is exited, popups will be
|
|
131
|
-
* members of different popup stack contexts which will cause unspecified results (like the escape
|
|
132
|
-
* key will choose the wrong popup as the "topmost").
|
|
133
|
-
*/
|
|
134
|
-
transferToCurrentContext(item: PopupStackItem): void;
|
|
135
|
-
};
|
|
136
|
-
/**
|
|
137
|
-
* Reset all the items in the stack. This should only be used for testing or if the page doesn't
|
|
138
|
-
* properly tear down each item in the stack when switching views.
|
|
139
|
-
*/
|
|
140
|
-
export declare function resetStack(): void;
|
|
141
|
-
/**
|
|
142
|
-
*
|
|
143
|
-
* @param adapter The parts of the PopupStack that we want to override
|
|
144
|
-
*/
|
|
145
|
-
export declare const createAdapter: (adapter: Partial<{
|
|
146
|
-
/**
|
|
147
|
-
* Create a HTMLElement as the container for the popup stack item. The returned element reference
|
|
148
|
-
* will be the reference to be passed to all other methods. The Popup Stack will control when this
|
|
149
|
-
* element is added and removed from the DOM as well as the `z-index` style property. Your content
|
|
150
|
-
* should be added to this element.
|
|
151
|
-
*/
|
|
152
|
-
createContainer(): HTMLElement;
|
|
153
|
-
/**
|
|
154
|
-
* Adds a PopupStackItem to the stack. This should only be called when the item is rendered to the
|
|
155
|
-
* page. Z-indexes are set when the item is added to the stack. If your application requires
|
|
156
|
-
* popups to be registered initially, but rendered when the user triggers some event, call this
|
|
157
|
-
* method when the event triggers.
|
|
158
|
-
*/
|
|
159
|
-
add(item: PopupStackItem): void;
|
|
160
|
-
/**
|
|
161
|
-
* Removes an item from a stack by its `HTMLElement` reference. This should be called when a popup
|
|
162
|
-
* is "closed" or when the element is removed from the page entirely to ensure proper memory
|
|
163
|
-
* cleanup. A popup will be removed from the stack it is a part of. This will not automatically be
|
|
164
|
-
* called when the element is removed from the DOM. This method will reset z-index values of the
|
|
165
|
-
* stack.
|
|
166
|
-
*/
|
|
167
|
-
remove(element: HTMLElement): void;
|
|
168
|
-
/**
|
|
169
|
-
* Returns true when the provided `element` is at the top of the stack. It will return false if it
|
|
170
|
-
* is not the top of the stack or is not found in the stack. The `element` should be the same
|
|
171
|
-
* reference that was passed to `add`
|
|
172
|
-
*/
|
|
173
|
-
isTopmost(element: HTMLElement): boolean;
|
|
174
|
-
/**
|
|
175
|
-
* Returns an array of elements defined by the `element` passed to `add`. This method return
|
|
176
|
-
* elements in the order of lowest z-index to highest z-index. Some popup behaviors will need to
|
|
177
|
-
* make decisions based on z-index order.
|
|
178
|
-
*/
|
|
179
|
-
getElements(stackOverride?: Stack | undefined): HTMLElement[];
|
|
180
|
-
/**
|
|
181
|
-
* Bring the element to the top of the stack. This is useful for persistent popups to place them
|
|
182
|
-
* on top of the stack when clicked. If an `owner` was provided to an item when it was added and
|
|
183
|
-
* that owner is a DOM child of another item in the stack, that item will be considered a "parent"
|
|
184
|
-
* to this item. If the previous are true, all "children" stack items will be brought to top as
|
|
185
|
-
* well and will be on top of the element passed to `bringToTop`. This maintains stack item
|
|
186
|
-
* "hierarchy" so that stack items like Popups and Tooltips don't get pushed behind elements they
|
|
187
|
-
* are supposed to be on top of.
|
|
188
|
-
*
|
|
189
|
-
* This does not need to be called when a popup is added since added popups are already place on
|
|
190
|
-
* the top of the stack.
|
|
191
|
-
*/
|
|
192
|
-
bringToTop(element: HTMLElement): void;
|
|
193
|
-
/**
|
|
194
|
-
* Compares a Popup by its element reference against the event target and the stack. An event
|
|
195
|
-
* target is considered to be "contained" by an element under the following conditions:
|
|
196
|
-
* - The `eventTarget` is a DOM child of the popup element
|
|
197
|
-
* - The `eventTarget` is the `owner` element passed when it was added to the stack
|
|
198
|
-
* - The `eventTarget` is a DOM child of the `owner` element
|
|
199
|
-
*
|
|
200
|
-
* This method should be used instead of `element.contains` so that clicking a popup target can
|
|
201
|
-
* opt-in to toggling. Otherwise there is no way to opt-out of toggle behavior (because the target
|
|
202
|
-
* is not inside `element`).
|
|
203
|
-
*/
|
|
204
|
-
contains(element: HTMLElement, eventTarget: HTMLElement): boolean;
|
|
205
|
-
/**
|
|
206
|
-
* Add a new stack context for popups. This method could be called with the same element multiple
|
|
207
|
-
* times, but should only push a new stack context once. The most common use-case for calling
|
|
208
|
-
* `pushStackContext` is when entering fullscreen, but multiple fullscreen listeners could be
|
|
209
|
-
* pushing the same element which is very difficult to ensure only one stack is used. To mitigate,
|
|
210
|
-
* this method filters out multiple calls to push the same element as a new stack context.
|
|
211
|
-
*/
|
|
212
|
-
pushStackContext(container: HTMLElement): void;
|
|
213
|
-
/**
|
|
214
|
-
* Remove the topmost stack context. The stack context will only be removed if the top stack
|
|
215
|
-
* context container element matches to guard against accidental remove of other stack contexts
|
|
216
|
-
* you don't own.
|
|
217
|
-
*/
|
|
218
|
-
popStackContext(container: HTMLElement): void;
|
|
219
|
-
/**
|
|
220
|
-
* Transfer the popup stack item into the current popup stack context.
|
|
221
|
-
*
|
|
222
|
-
* An example might be a popup
|
|
223
|
-
* that is opened and an element goes into fullscreen. The default popup stack context is
|
|
224
|
-
* `document.body`, but the [Fullscreen
|
|
225
|
-
* API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API) will only render elements
|
|
226
|
-
* that are children of the fullscreen element. If the popup isn't transferred to the current
|
|
227
|
-
* popup stack context, the popup will remain open, but will no longer be rendered. This method
|
|
228
|
-
* will transfer that popup to the fullscreen element so that it will render. Popups created while
|
|
229
|
-
* in a fullscreen context that need to be transferred back when fullscreen is exited should also
|
|
230
|
-
* call this method. While popups may still render when fullscreen is exited, popups will be
|
|
231
|
-
* members of different popup stack contexts which will cause unspecified results (like the escape
|
|
232
|
-
* key will choose the wrong popup as the "topmost").
|
|
233
|
-
*/
|
|
234
|
-
transferToCurrentContext(item: PopupStackItem): void;
|
|
235
|
-
}>) => void;
|
|
236
|
-
export {};
|
|
237
|
-
//# sourceMappingURL=PopupStack.d.ts.map
|
|
@@ -1,237 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* This type is purposely an interface so that it can be extended for a specific use-case.
|
|
3
|
-
*/
|
|
4
|
-
export interface PopupStackItem {
|
|
5
|
-
/**
|
|
6
|
-
* All items in the stack are identified by their DOM element reference. A DOM element is
|
|
7
|
-
* framework agnostic.
|
|
8
|
-
*/
|
|
9
|
-
element: HTMLElement;
|
|
10
|
-
/**
|
|
11
|
-
* An owner is typically a trigger or anchor target. For example, it will be a HTMLButtonElement
|
|
12
|
-
* that opened a dropdown menu. If an owner is provided, _and_ that owner element is part of
|
|
13
|
-
* another stack item, it will be considered a "parent" of the provided stack item. This reference
|
|
14
|
-
* helps in the following ways:
|
|
15
|
-
* - Click outside detection typically will use `PopupStack.contains()` which includes this
|
|
16
|
-
* element. If you wish to close a popup when the target is clicked, add a click handler to do
|
|
17
|
-
* so.
|
|
18
|
-
* - `PopupStack.bringToTop()` will also bring children to top as well using the `owner` reference
|
|
19
|
-
* to map a "child" popup back to its parent. This is useful for "Window" or other persistent
|
|
20
|
-
* popups that are brought to the front when clicked. This will prevent the "Window" from
|
|
21
|
-
* rendering on top of child popups as they will be brought along also.
|
|
22
|
-
* - Synthetic event systems like in React will bubble events through "portals". This is
|
|
23
|
-
* inconsistent with DOM event bubbling. This reference helps normalize that behavior across
|
|
24
|
-
* different frameworks.
|
|
25
|
-
*/
|
|
26
|
-
owner?: HTMLElement;
|
|
27
|
-
}
|
|
28
|
-
/**
|
|
29
|
-
* Calculate the zIndex value of a given index in the stack. The range is 20 where 30 is the minimum
|
|
30
|
-
* and 50 is the maximum. If there are more than 20 items in the stack, we'll have multiple zIndexes
|
|
31
|
-
* of 30 at the bottom of the stack since the user probably can't tell the difference with that many
|
|
32
|
-
* popups.
|
|
33
|
-
*/
|
|
34
|
-
export declare function getValue(index: number, length: number): number;
|
|
35
|
-
interface Stack {
|
|
36
|
-
items: PopupStackItem[];
|
|
37
|
-
container?: () => HTMLElement;
|
|
38
|
-
zIndex: {
|
|
39
|
-
min: number;
|
|
40
|
-
max: number;
|
|
41
|
-
getValue: typeof getValue;
|
|
42
|
-
};
|
|
43
|
-
_adapter: Partial<typeof PopupStack>;
|
|
44
|
-
}
|
|
45
|
-
export declare const PopupStack: {
|
|
46
|
-
/**
|
|
47
|
-
* Create a HTMLElement as the container for the popup stack item. The returned element reference
|
|
48
|
-
* will be the reference to be passed to all other methods. The Popup Stack will control when this
|
|
49
|
-
* element is added and removed from the DOM as well as the `z-index` style property. Your content
|
|
50
|
-
* should be added to this element.
|
|
51
|
-
*/
|
|
52
|
-
createContainer(): HTMLElement;
|
|
53
|
-
/**
|
|
54
|
-
* Adds a PopupStackItem to the stack. This should only be called when the item is rendered to the
|
|
55
|
-
* page. Z-indexes are set when the item is added to the stack. If your application requires
|
|
56
|
-
* popups to be registered initially, but rendered when the user triggers some event, call this
|
|
57
|
-
* method when the event triggers.
|
|
58
|
-
*/
|
|
59
|
-
add(item: PopupStackItem): void;
|
|
60
|
-
/**
|
|
61
|
-
* Removes an item from a stack by its `HTMLElement` reference. This should be called when a popup
|
|
62
|
-
* is "closed" or when the element is removed from the page entirely to ensure proper memory
|
|
63
|
-
* cleanup. A popup will be removed from the stack it is a part of. This will not automatically be
|
|
64
|
-
* called when the element is removed from the DOM. This method will reset z-index values of the
|
|
65
|
-
* stack.
|
|
66
|
-
*/
|
|
67
|
-
remove(element: HTMLElement): void;
|
|
68
|
-
/**
|
|
69
|
-
* Returns true when the provided `element` is at the top of the stack. It will return false if it
|
|
70
|
-
* is not the top of the stack or is not found in the stack. The `element` should be the same
|
|
71
|
-
* reference that was passed to `add`
|
|
72
|
-
*/
|
|
73
|
-
isTopmost(element: HTMLElement): boolean;
|
|
74
|
-
/**
|
|
75
|
-
* Returns an array of elements defined by the `element` passed to `add`. This method return
|
|
76
|
-
* elements in the order of lowest z-index to highest z-index. Some popup behaviors will need to
|
|
77
|
-
* make decisions based on z-index order.
|
|
78
|
-
*/
|
|
79
|
-
getElements(stackOverride?: Stack | undefined): HTMLElement[];
|
|
80
|
-
/**
|
|
81
|
-
* Bring the element to the top of the stack. This is useful for persistent popups to place them
|
|
82
|
-
* on top of the stack when clicked. If an `owner` was provided to an item when it was added and
|
|
83
|
-
* that owner is a DOM child of another item in the stack, that item will be considered a "parent"
|
|
84
|
-
* to this item. If the previous are true, all "children" stack items will be brought to top as
|
|
85
|
-
* well and will be on top of the element passed to `bringToTop`. This maintains stack item
|
|
86
|
-
* "hierarchy" so that stack items like Popups and Tooltips don't get pushed behind elements they
|
|
87
|
-
* are supposed to be on top of.
|
|
88
|
-
*
|
|
89
|
-
* This does not need to be called when a popup is added since added popups are already place on
|
|
90
|
-
* the top of the stack.
|
|
91
|
-
*/
|
|
92
|
-
bringToTop(element: HTMLElement): void;
|
|
93
|
-
/**
|
|
94
|
-
* Compares a Popup by its element reference against the event target and the stack. An event
|
|
95
|
-
* target is considered to be "contained" by an element under the following conditions:
|
|
96
|
-
* - The `eventTarget` is a DOM child of the popup element
|
|
97
|
-
* - The `eventTarget` is the `owner` element passed when it was added to the stack
|
|
98
|
-
* - The `eventTarget` is a DOM child of the `owner` element
|
|
99
|
-
*
|
|
100
|
-
* This method should be used instead of `element.contains` so that clicking a popup target can
|
|
101
|
-
* opt-in to toggling. Otherwise there is no way to opt-out of toggle behavior (because the target
|
|
102
|
-
* is not inside `element`).
|
|
103
|
-
*/
|
|
104
|
-
contains(element: HTMLElement, eventTarget: HTMLElement): boolean;
|
|
105
|
-
/**
|
|
106
|
-
* Add a new stack context for popups. This method could be called with the same element multiple
|
|
107
|
-
* times, but should only push a new stack context once. The most common use-case for calling
|
|
108
|
-
* `pushStackContext` is when entering fullscreen, but multiple fullscreen listeners could be
|
|
109
|
-
* pushing the same element which is very difficult to ensure only one stack is used. To mitigate,
|
|
110
|
-
* this method filters out multiple calls to push the same element as a new stack context.
|
|
111
|
-
*/
|
|
112
|
-
pushStackContext(container: HTMLElement): void;
|
|
113
|
-
/**
|
|
114
|
-
* Remove the topmost stack context. The stack context will only be removed if the top stack
|
|
115
|
-
* context container element matches to guard against accidental remove of other stack contexts
|
|
116
|
-
* you don't own.
|
|
117
|
-
*/
|
|
118
|
-
popStackContext(container: HTMLElement): void;
|
|
119
|
-
/**
|
|
120
|
-
* Transfer the popup stack item into the current popup stack context.
|
|
121
|
-
*
|
|
122
|
-
* An example might be a popup
|
|
123
|
-
* that is opened and an element goes into fullscreen. The default popup stack context is
|
|
124
|
-
* `document.body`, but the [Fullscreen
|
|
125
|
-
* API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API) will only render elements
|
|
126
|
-
* that are children of the fullscreen element. If the popup isn't transferred to the current
|
|
127
|
-
* popup stack context, the popup will remain open, but will no longer be rendered. This method
|
|
128
|
-
* will transfer that popup to the fullscreen element so that it will render. Popups created while
|
|
129
|
-
* in a fullscreen context that need to be transferred back when fullscreen is exited should also
|
|
130
|
-
* call this method. While popups may still render when fullscreen is exited, popups will be
|
|
131
|
-
* members of different popup stack contexts which will cause unspecified results (like the escape
|
|
132
|
-
* key will choose the wrong popup as the "topmost").
|
|
133
|
-
*/
|
|
134
|
-
transferToCurrentContext(item: PopupStackItem): void;
|
|
135
|
-
};
|
|
136
|
-
/**
|
|
137
|
-
* Reset all the items in the stack. This should only be used for testing or if the page doesn't
|
|
138
|
-
* properly tear down each item in the stack when switching views.
|
|
139
|
-
*/
|
|
140
|
-
export declare function resetStack(): void;
|
|
141
|
-
/**
|
|
142
|
-
*
|
|
143
|
-
* @param adapter The parts of the PopupStack that we want to override
|
|
144
|
-
*/
|
|
145
|
-
export declare const createAdapter: (adapter: Partial<{
|
|
146
|
-
/**
|
|
147
|
-
* Create a HTMLElement as the container for the popup stack item. The returned element reference
|
|
148
|
-
* will be the reference to be passed to all other methods. The Popup Stack will control when this
|
|
149
|
-
* element is added and removed from the DOM as well as the `z-index` style property. Your content
|
|
150
|
-
* should be added to this element.
|
|
151
|
-
*/
|
|
152
|
-
createContainer(): HTMLElement;
|
|
153
|
-
/**
|
|
154
|
-
* Adds a PopupStackItem to the stack. This should only be called when the item is rendered to the
|
|
155
|
-
* page. Z-indexes are set when the item is added to the stack. If your application requires
|
|
156
|
-
* popups to be registered initially, but rendered when the user triggers some event, call this
|
|
157
|
-
* method when the event triggers.
|
|
158
|
-
*/
|
|
159
|
-
add(item: PopupStackItem): void;
|
|
160
|
-
/**
|
|
161
|
-
* Removes an item from a stack by its `HTMLElement` reference. This should be called when a popup
|
|
162
|
-
* is "closed" or when the element is removed from the page entirely to ensure proper memory
|
|
163
|
-
* cleanup. A popup will be removed from the stack it is a part of. This will not automatically be
|
|
164
|
-
* called when the element is removed from the DOM. This method will reset z-index values of the
|
|
165
|
-
* stack.
|
|
166
|
-
*/
|
|
167
|
-
remove(element: HTMLElement): void;
|
|
168
|
-
/**
|
|
169
|
-
* Returns true when the provided `element` is at the top of the stack. It will return false if it
|
|
170
|
-
* is not the top of the stack or is not found in the stack. The `element` should be the same
|
|
171
|
-
* reference that was passed to `add`
|
|
172
|
-
*/
|
|
173
|
-
isTopmost(element: HTMLElement): boolean;
|
|
174
|
-
/**
|
|
175
|
-
* Returns an array of elements defined by the `element` passed to `add`. This method return
|
|
176
|
-
* elements in the order of lowest z-index to highest z-index. Some popup behaviors will need to
|
|
177
|
-
* make decisions based on z-index order.
|
|
178
|
-
*/
|
|
179
|
-
getElements(stackOverride?: Stack | undefined): HTMLElement[];
|
|
180
|
-
/**
|
|
181
|
-
* Bring the element to the top of the stack. This is useful for persistent popups to place them
|
|
182
|
-
* on top of the stack when clicked. If an `owner` was provided to an item when it was added and
|
|
183
|
-
* that owner is a DOM child of another item in the stack, that item will be considered a "parent"
|
|
184
|
-
* to this item. If the previous are true, all "children" stack items will be brought to top as
|
|
185
|
-
* well and will be on top of the element passed to `bringToTop`. This maintains stack item
|
|
186
|
-
* "hierarchy" so that stack items like Popups and Tooltips don't get pushed behind elements they
|
|
187
|
-
* are supposed to be on top of.
|
|
188
|
-
*
|
|
189
|
-
* This does not need to be called when a popup is added since added popups are already place on
|
|
190
|
-
* the top of the stack.
|
|
191
|
-
*/
|
|
192
|
-
bringToTop(element: HTMLElement): void;
|
|
193
|
-
/**
|
|
194
|
-
* Compares a Popup by its element reference against the event target and the stack. An event
|
|
195
|
-
* target is considered to be "contained" by an element under the following conditions:
|
|
196
|
-
* - The `eventTarget` is a DOM child of the popup element
|
|
197
|
-
* - The `eventTarget` is the `owner` element passed when it was added to the stack
|
|
198
|
-
* - The `eventTarget` is a DOM child of the `owner` element
|
|
199
|
-
*
|
|
200
|
-
* This method should be used instead of `element.contains` so that clicking a popup target can
|
|
201
|
-
* opt-in to toggling. Otherwise there is no way to opt-out of toggle behavior (because the target
|
|
202
|
-
* is not inside `element`).
|
|
203
|
-
*/
|
|
204
|
-
contains(element: HTMLElement, eventTarget: HTMLElement): boolean;
|
|
205
|
-
/**
|
|
206
|
-
* Add a new stack context for popups. This method could be called with the same element multiple
|
|
207
|
-
* times, but should only push a new stack context once. The most common use-case for calling
|
|
208
|
-
* `pushStackContext` is when entering fullscreen, but multiple fullscreen listeners could be
|
|
209
|
-
* pushing the same element which is very difficult to ensure only one stack is used. To mitigate,
|
|
210
|
-
* this method filters out multiple calls to push the same element as a new stack context.
|
|
211
|
-
*/
|
|
212
|
-
pushStackContext(container: HTMLElement): void;
|
|
213
|
-
/**
|
|
214
|
-
* Remove the topmost stack context. The stack context will only be removed if the top stack
|
|
215
|
-
* context container element matches to guard against accidental remove of other stack contexts
|
|
216
|
-
* you don't own.
|
|
217
|
-
*/
|
|
218
|
-
popStackContext(container: HTMLElement): void;
|
|
219
|
-
/**
|
|
220
|
-
* Transfer the popup stack item into the current popup stack context.
|
|
221
|
-
*
|
|
222
|
-
* An example might be a popup
|
|
223
|
-
* that is opened and an element goes into fullscreen. The default popup stack context is
|
|
224
|
-
* `document.body`, but the [Fullscreen
|
|
225
|
-
* API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API) will only render elements
|
|
226
|
-
* that are children of the fullscreen element. If the popup isn't transferred to the current
|
|
227
|
-
* popup stack context, the popup will remain open, but will no longer be rendered. This method
|
|
228
|
-
* will transfer that popup to the fullscreen element so that it will render. Popups created while
|
|
229
|
-
* in a fullscreen context that need to be transferred back when fullscreen is exited should also
|
|
230
|
-
* call this method. While popups may still render when fullscreen is exited, popups will be
|
|
231
|
-
* members of different popup stack contexts which will cause unspecified results (like the escape
|
|
232
|
-
* key will choose the wrong popup as the "topmost").
|
|
233
|
-
*/
|
|
234
|
-
transferToCurrentContext(item: PopupStackItem): void;
|
|
235
|
-
}>) => void;
|
|
236
|
-
export {};
|
|
237
|
-
//# sourceMappingURL=PopupStack.d.ts.map
|