web-ui-pack/dropdownElement.d.ts

Web package with UI elements

import WUPBaseElement from "./baseElement";
import WUPPopupElement from "./popup/popupElement";
import { PopupAnimations, PopupCloseCases, PopupOpenCases } from "./popup/popupElement.types";
declare const tagName = "wup-dropdown";
declare global {
    namespace WUP.Dropdown {
        interface Options extends WUP.Popup.Options {
            /** Animation applied to popup;
             * @defaultValue `PopupAnimations.drawer`
             * @tutorial Troubleshooting
             * * to change option for specific element change it for `<wup-popup/>` directly after timeout
             * @example setTimeout(() => this.$refPopup.$options.animation = PopupAnimations.stack) */
            animation: PopupAnimations;
            /** Case when popup need to show;
             * @defaultValue `PopupOpenCases.onClick | PopupOpenCases.onFocus`
             * @tutorial Troubleshooting
             * * to change option for specific element change it for `<wup-popup/>` directly after timeout
             * @example setTimeout(() => this.$refPopup.$options.openCase = PopupOpenCases.onFocus | PopupOpenCases.onClick) */
            openCase: PopupOpenCases;
            /** Close menu on popup click
             * @defaultValue true */
            closeOnPopupClick: boolean;
            /** Placement rules relative to target;
             * @defaultValue `[
                  WUPPopupElement.$placements.$bottom.$start,
                  WUPPopupElement.$placements.$bottom.$end,
                  WUPPopupElement.$placements.$top.$start,
                  WUPPopupElement.$placements.$top.$end,
                  WUPPopupElement.$placements.$bottom.$start.$resizeHeight,
                  WUPPopupElement.$placements.$bottom.$end.$resizeHeight,
                  WUPPopupElement.$placements.$top.$start.$resizeHeight,
                  WUPPopupElement.$placements.$top.$end.$resizeHeight ]` */
            placement: Array<WUP.Popup.Place.PlaceFunc>;
            /** Sets minWidth 100% of targetWidth; it can't be more than css-style min-width
             * @defaultValue true */
            minWidthByTarget: boolean;
            /** Sets minHeight 100% of targetWidth; it can't be more than css-style min-height
             *  @defaultValue true */
            minHeightByTarget: boolean;
        }
        interface JSXProps {
            /** Close menu on popup click
             * @defaultValue true */
            "w-closeOnPopupClick"?: boolean;
        }
    }
    interface HTMLElementTagNameMap {
        [tagName]: WUPDropdownElement;
    }
}
declare module "react" {
    namespace JSX {
        interface IntrinsicElements {
            /** Dropdown element
             *  @see {@link WUPDropdownElement} */
            [tagName]: WUP.Base.ReactHTML<WUPDropdownElement> & WUP.Dropdown.JSXProps;
        }
    }
}
declare module "preact/jsx-runtime" {
    namespace JSX {
        interface HTMLAttributes<RefType> {
        }
        interface IntrinsicElements {
            /** Dropdown element
             *  @see {@link WUPDropdownElement} */
            [tagName]: HTMLAttributes<WUPDropdownElement> & WUP.Dropdown.JSXProps;
        }
    }
}
/** Dropdown element
 * @see demo {@link https://yegorich555.github.io/web-ui-pack/dropdown}
 * @example
 * ```html
  <wup-dropdown class="custom">
    <button type="button">Click Me</button>
    <wup-popup w-placement="bottom-middle" w-animation="stack">
      <ul>
        <li><button type="button">A</button></li>
        <li><button type="button">B</button></li>
        <li><button type="button">C</button></li>
      </ul>
    </wup-popup>
  </wup-dropdown>
 * ```
 * @tutorial Troubleshooting
 * * in comparison with Combobox Dropdown doesn't contain input but can contain in popup any items (like nav-menu etc.) */
export default class WUPDropdownElement<TOptions extends WUP.Dropdown.Options = WUP.Dropdown.Options> extends WUPBaseElement<TOptions> {
    #private;
    static get $style(): string;
    /** Default options applied to every element. Change it to configure default behavior
     * * @tutorial Troubleshooting
     * * Popup-related options are not observed so to change it use `WUPDropdownElement.$defaults` or `element.$refPopup.$options` directly */
    static $defaults: WUP.Dropdown.Options;
    /** Reference to nested HTMLElement tied with $options.label */
    $refTitle: HTMLElement;
    /** Reference to popupMenu */
    $refPopup: WUPPopupElement;
    /** Reference to list */
    $refMenu: HTMLElement;
    protected gotReady(): void;
    /** Custom function to override default `WUPPopupElement.prototype.goClose` */
    protected goOpenPopup(openCase: PopupOpenCases, ev: MouseEvent | FocusEvent | null): Promise<boolean>;
    /** Custom function to override default `WUPPopupElement.prototype.goClose` */
    protected goClosePopup(closeCase: PopupCloseCases, ev: MouseEvent | FocusEvent | KeyboardEvent | null): Promise<boolean>;
}
export {};