1 | import WUPBaseElement from "./baseElement";
|
2 | import WUPPopupElement from "./popup/popupElement";
|
3 | import { PopupAnimations, PopupCloseCases, PopupOpenCases } from "./popup/popupElement.types";
|
4 | declare const tagName = "wup-dropdown";
|
5 | declare global {
|
6 | namespace WUP.Dropdown {
|
7 | interface Options extends WUP.Popup.Options {
|
8 | /** Animation applied to popup;
|
9 | * @defaultValue `PopupAnimations.drawer`
|
10 | * @tutorial Troubleshooting
|
11 | * * to change option for specific element change it for `<wup-popup/>` directly after timeout
|
12 | * @example setTimeout(() => this.$refPopup.$options.animation = PopupAnimations.stack) */
|
13 | animation: PopupAnimations;
|
14 | /** Case when popup need to show;
|
15 | * @defaultValue `PopupOpenCases.onClick | PopupOpenCases.onFocus`
|
16 | * @tutorial Troubleshooting
|
17 | * * to change option for specific element change it for `<wup-popup/>` directly after timeout
|
18 | * @example setTimeout(() => this.$refPopup.$options.openCase = PopupOpenCases.onFocus | PopupOpenCases.onClick) */
|
19 | openCase: PopupOpenCases;
|
20 | /** Close menu on popup click
|
21 | * @defaultValue true */
|
22 | closeOnPopupClick: boolean;
|
23 | /** Placement rules relative to target;
|
24 | * @defaultValue `[
|
25 | WUPPopupElement.$placements.$bottom.$start,
|
26 | WUPPopupElement.$placements.$bottom.$end,
|
27 | WUPPopupElement.$placements.$top.$start,
|
28 | WUPPopupElement.$placements.$top.$end,
|
29 | WUPPopupElement.$placements.$bottom.$start.$resizeHeight,
|
30 | WUPPopupElement.$placements.$bottom.$end.$resizeHeight,
|
31 | WUPPopupElement.$placements.$top.$start.$resizeHeight,
|
32 | WUPPopupElement.$placements.$top.$end.$resizeHeight ]` */
|
33 | placement: Array<WUP.Popup.Place.PlaceFunc>;
|
34 | /** Sets minWidth 100% of targetWidth; it can't be more than css-style min-width
|
35 | * @defaultValue true */
|
36 | minWidthByTarget: boolean;
|
37 | /** Sets minHeight 100% of targetWidth; it can't be more than css-style min-height
|
38 | * @defaultValue true */
|
39 | minHeightByTarget: boolean;
|
40 | }
|
41 | interface JSXProps {
|
42 | /** Close menu on popup click
|
43 | * @defaultValue true */
|
44 | "w-closeOnPopupClick"?: boolean;
|
45 | }
|
46 | }
|
47 | interface HTMLElementTagNameMap {
|
48 | [tagName]: WUPDropdownElement;
|
49 | }
|
50 | namespace JSX {
|
51 | interface IntrinsicElements {
|
52 | /** Dropdown element
|
53 | * @see {@link WUPDropdownElement} */
|
54 | [tagName]: WUP.Base.ReactHTML<WUPDropdownElement> & WUP.Dropdown.JSXProps;
|
55 | }
|
56 | }
|
57 | }
|
58 | declare module "preact/jsx-runtime" {
|
59 | namespace JSX {
|
60 | interface HTMLAttributes<RefType> {
|
61 | }
|
62 | interface IntrinsicElements {
|
63 | /** Dropdown element
|
64 | * @see {@link WUPDropdownElement} */
|
65 | [tagName]: HTMLAttributes<WUPDropdownElement> & WUP.Dropdown.JSXProps;
|
66 | }
|
67 | }
|
68 | }
|
69 | /** Dropdown element
|
70 | * @example
|
71 | * ```html
|
72 | <wup-dropdown class="custom">
|
73 | <button type="button">Click Me</button>
|
74 | <wup-popup w-placement="bottom-middle" w-animation="stack">
|
75 | <ul>
|
76 | <li><button type="button">A</button></li>
|
77 | <li><button type="button">B</button></li>
|
78 | <li><button type="button">C</button></li>
|
79 | </ul>
|
80 | </wup-popup>
|
81 | </wup-dropdown>
|
82 | * ```
|
83 | * @tutorial Troubleshooting
|
84 | * * in comparison with Combobox Dropdown doesn't contain input but can contain in popup any items (like nav-menu etc.) */
|
85 | export default class WUPDropdownElement<TOptions extends WUP.Dropdown.Options = WUP.Dropdown.Options> extends WUPBaseElement<TOptions> {
|
86 | #private;
|
87 | static get $style(): string;
|
88 | /** Default options applied to every element. Change it to configure default behavior
|
89 | * * @tutorial Troubleshooting
|
90 | * * Popup-related options are not observed so to change it use `WUPDropdownElement.$defaults` or `element.$refPopup.$options` directly */
|
91 | static $defaults: WUP.Dropdown.Options;
|
92 | /** Reference to nested HTMLElement tied with $options.label */
|
93 | $refTitle: HTMLElement;
|
94 | /** Reference to popupMenu */
|
95 | $refPopup: WUPPopupElement<WUP.Popup.Options, WUP.Popup.EventMap>;
|
96 | /** Reference to list */
|
97 | $refMenu: HTMLElement;
|
98 | protected gotReady(): void;
|
99 | /** Custom function to override default `WUPPopupElement.prototype.goClose` */
|
100 | protected goOpenPopup(openCase: PopupOpenCases, ev: MouseEvent | FocusEvent | null): Promise<boolean>;
|
101 | /** Custom function to override default `WUPPopupElement.prototype.goClose` */
|
102 | protected goClosePopup(closeCase: PopupCloseCases, ev: MouseEvent | FocusEvent | KeyboardEvent | null): Promise<boolean>;
|
103 | }
|
104 | export {};
|