vira 25.7.3 → 25.9.0

package/dist/elements/pop-up/vira-pop-up-trigger.element.js

@@ -0,0 +1,235 @@
+import { assert } from '@augment-vir/assert';
+import { NavController } from 'device-navigation';
+import { classMap, css, defineElementEvent, html, listen, renderIf } from 'element-vir';
+import { createFocusStyles, viraFocusCssVars } from '../../styles/focus.js';
+import { viraFormCssVars } from '../../styles/form-themes.js';
+import { noNativeFormStyles, noUserSelect, viraDisabledStyles } from '../../styles/index.js';
+import { HidePopUpEvent, NavSelectEvent, PopUpManager, } from '../../util/pop-up-manager.js';
+import { defineViraElement } from '../define-vira-element.js';
+import { triggerPopUpState } from './pop-up-helpers.js';
+/**
+ * An element with slots for a pop-up trigger and pop-up contents.
+ *
+ * @category PopUp
+ * @category Elements
+ * @see https://electrovir.github.io/element-vir/vira/book/elements/vira-pop-up-trigger
+ */
+export const ViraPopUpTrigger = defineViraElement()({
+    tagName: 'vira-pop-up-trigger',
+    state({ host }) {
+        return {
+            /** `undefined` means the pop up is not currently showing. */
+            showPopUpResult: undefined,
+            popUpManager: new PopUpManager(new NavController(host, { activateOnMouseUp: true })),
+        };
+    },
+    slotNames: [
+        'trigger',
+        'popUp',
+    ],
+    hostClasses: {
+        'vira-pop-up-trigger-disabled': ({ inputs }) => !!inputs.isDisabled,
+    },
+    styles: ({ hostClasses }) => css `
+        :host {
+            display: inline-flex;
+            box-sizing: border-box;
+            vertical-align: middle;
+            ${viraFocusCssVars['vira-focus-outline-color'].name}: ${viraFormCssVars['vira-form-focus-color'].value};
+            position: relative;
+            max-width: 100%;
+        }
+
+        .dropdown-wrapper {
+            ${noNativeFormStyles};
+            cursor: pointer;
+            max-width: 100%;
+            position: relative;
+            outline: none;
+            flex-grow: 1;
+            box-sizing: border-box;
+        }
+
+        ${createFocusStyles({
+        selector: '.dropdown-wrapper:focus',
+        elementBorderSize: 1,
+    })}
+
+        .dropdown-trigger {
+            box-sizing: border-box;
+            ${noUserSelect};
+        }
+
+        ${hostClasses['vira-pop-up-trigger-disabled'].selector} {
+            ${viraDisabledStyles}
+            pointer-events: auto;
+        }
+
+        ${hostClasses['vira-pop-up-trigger-disabled'].selector} .dropdown-wrapper {
+            pointer-events: none;
+        }
+
+        .pop-up-positioner {
+            position: absolute;
+            pointer-events: none;
+            display: flex;
+            flex-direction: column;
+
+            /* highest possible z-index */
+            z-index: 2147483647;
+            left: 0;
+            right: 0;
+
+            & > * {
+                pointer-events: auto;
+            }
+        }
+
+        .open-upwards .pop-up-positioner {
+            flex-direction: column-reverse;
+        }
+    `,
+    events: {
+        navSelect: defineElementEvent(),
+        /**
+         * - `undefined` indicates that the pop-up just closed.
+         * - {@link ShowPopUpResult} indicates that the pop-up just opened.
+         */
+        openChange: defineElementEvent(),
+        init: defineElementEvent(),
+    },
+    cleanup({ state, updateState }) {
+        updateState({ showPopUpResult: undefined });
+        state.popUpManager.destroy();
+    },
+    init({ state, updateState, host, inputs, dispatch, events }) {
+        /** Refocus the trigger and set the result to `undefined` when the pop up closes. */
+        state.popUpManager.listen(HidePopUpEvent, () => {
+            updateState({ showPopUpResult: undefined });
+            dispatch(new events.openChange(undefined));
+            if (!inputs.isDisabled) {
+                const dropdownWrapper = host.shadowRoot.querySelector('.dropdown-wrapper');
+                assert.instanceOf(dropdownWrapper, HTMLButtonElement, 'failed to find dropdown wrapper child');
+                dropdownWrapper.focus();
+            }
+        });
+        state.popUpManager.listen(NavSelectEvent, (event) => {
+            if (!inputs.keepOpenAfterInteraction) {
+                triggerPopUpState({
+                    open: false,
+                    callback(showPopUpResult) {
+                        updateState({
+                            showPopUpResult,
+                        });
+                    },
+                    host,
+                    popUpManager: state.popUpManager,
+                });
+            }
+            dispatch(new events.navSelect(event.detail));
+        });
+        dispatch(new events.init({
+            navController: state.popUpManager.navController,
+            popUpManager: state.popUpManager,
+        }));
+    },
+    render({ dispatch, events, state, inputs, updateState, host, slotNames }) {
+        function triggerPopUp({ emitEvent, open }, event) {
+            if (state.showPopUpResult && inputs.keepOpenAfterInteraction && event) {
+                const dropdownTrigger = host.shadowRoot.querySelector('.dropdown-trigger');
+                if (dropdownTrigger && !event.composedPath().includes(dropdownTrigger)) {
+                    /**
+                     * Prevent closing the pop-up when `keepOpenAfterInteraction` is turned on and
+                     * the pop-up was interacted with.
+                     */
+                    return;
+                }
+            }
+            triggerPopUpState({
+                open,
+                callback(showPopUpResult) {
+                    updateState({ showPopUpResult });
+                    if (emitEvent) {
+                        dispatch(new events.openChange(showPopUpResult));
+                    }
+                },
+                host,
+                popUpManager: state.popUpManager,
+            });
+        }
+        if (inputs.isDisabled) {
+            triggerPopUp({ open: false, emitEvent: false }, undefined);
+        }
+        else if (inputs.z_debug_forceOpenState != undefined) {
+            if (!inputs.z_debug_forceOpenState && state.showPopUpResult) {
+                triggerPopUp({ emitEvent: false, open: false }, undefined);
+            }
+            else if (inputs.z_debug_forceOpenState && !state.showPopUpResult) {
+                triggerPopUp({ emitEvent: false, open: true }, undefined);
+            }
+        }
+        /**
+         * These styles do _not_ account for window resizing while the menu is open. I decided this
+         * was not a major enough problem to tackle. If it becomes major enough in the future,
+         * you'll need to hook into a window _or_ container resize listener inside `PopUpManager`
+         * and emit a new `ShowPopUpResult` instance when it changes.
+         */
+        const positionerStyles = state.showPopUpResult
+            ? state.showPopUpResult.popDown
+                ? /** Dropdown going down position. */
+                    css `
+                      bottom: -${state.showPopUpResult.positions.diff.bottom}px;
+                      top: calc(100% + ${inputs.popUpOffset?.vertical || 0}px);
+                      left: ${inputs.popUpOffset?.left || 0}px;
+                      right: ${inputs.popUpOffset?.right || 0}px;
+                  `
+                : /** Dropdown going up position. */
+                    css `
+                      top: -${state.showPopUpResult.positions.diff.top}px;
+                      bottom: calc(100% + ${inputs.popUpOffset?.vertical || 0}px);
+                      left: ${inputs.popUpOffset?.left || 0}px;
+                      right: ${inputs.popUpOffset?.right || 0}px;
+                  `
+            : undefined;
+        function respondToClick(event) {
+            triggerPopUp({ emitEvent: true, open: !state.showPopUpResult }, event);
+        }
+        return html `
+            <button
+                ?disabled=${!!inputs.isDisabled}
+                class="dropdown-wrapper ${classMap({
+            open: !!state.showPopUpResult,
+            'open-upwards': !state.showPopUpResult?.popDown,
+        })}"
+                role="listbox"
+                aria-expanded=${!!state.showPopUpResult}
+                ${listen('keydown', (event) => {
+            if (!state.showPopUpResult && event.code.startsWith('Arrow')) {
+                triggerPopUp({ emitEvent: true, open: true }, event);
+            }
+        })}
+                ${listen('click', (event) => {
+            /** Detail is 0 if it was a keyboard key (like Enter) that triggered this click. */
+            if (event.detail === 0) {
+                respondToClick(event);
+            }
+        })}
+                ${listen('mousedown', (event) => {
+            /** Ignore any clicks that aren't the main button. */
+            if (event.button === 0) {
+                respondToClick(event);
+            }
+        })}
+            >
+                <div class="dropdown-trigger">
+                    <slot name=${slotNames.trigger}></slot>
+                </div>
+                <div class="pop-up-positioner" style=${positionerStyles}>
+                    ${renderIf(!!state.showPopUpResult, html `
+                            <slot name=${slotNames.popUp}></slot>
+                        `)}
+                </div>
+            </button>
+        `;
+    },
+});

package/dist/elements/vira-bold-text.element.js

@@ -1,6 +1,7 @@
-import { css, defineElement, html } from 'element-vir';
+import { css, html } from 'element-vir';
+import { defineViraElement } from './define-vira-element.js';
 /** Use this element to reserve space for bolded text, even if it isn't bold yet. */
-export const ViraBoldText = defineElement()({
+export const ViraBoldText = defineViraElement()({
     tagName: 'vira-bold',
     cssVars: {
         'vira-bold-bold-weight': 'bold',

package/dist/elements/{dropdown/vira-dropdown.element.d.ts → vira-dropdown.element.d.ts}

@@ -1,7 +1,7 @@
 import { type PartialWithUndefined } from '@augment-vir/common';
-import { type ViraIconSvg } from '../../icons/icon-svg.js';
-import { PopUpManager, type ShowPopUpResult } from '../../util/pop-up-manager.js';
-import { type ViraDropdownOption } from './vira-dropdown-item.element.js';
+import { type ViraIconSvg } from '../icons/icon-svg.js';
+import { type ShowPopUpResult } from '../util/pop-up-manager.js';
+import { type MenuItem } from './pop-up/pop-up-menu-item.js';
 /**
  * Test ids for {@link ViraDropdown}.
  *
@@ -11,17 +11,16 @@ export declare const viraDropdownTestIds: {
     trigger: string;
     icon: string;
     prefix: string;
-    options: string;
 };
 /**
- * The main dropdown element that should be use directly.
+ * A dropdown element that uses pop-up menus.
  *
  * @category Dropdown
  * @category Elements
  * @see https://electrovir.github.io/element-vir/vira/book/elements/dropdown/vira-dropdown
  */
 export declare const ViraDropdown: import("element-vir").DeclarativeElementDefinition<"vira-dropdown", {
-    options: ReadonlyArray<Readonly<ViraDropdownOption>>;
+    options: ReadonlyArray<Readonly<MenuItem>>;
     /** The selected id from the given options. */
     selected: ReadonlyArray<PropertyKey>;
 } & PartialWithUndefined<{
@@ -32,6 +31,11 @@ export declare const ViraDropdown: import("element-vir").DeclarativeElementDefin
      * multiple.
      */
     isMultiSelect: boolean;
+    /**
+     * Shows the selection quantity rather than a list of selections. Only used when
+     * `isMultiSelect` is `true`.
+     */
+    showSelectionCount: boolean;
     icon: ViraIconSvg;
     selectionPrefix: string;
     isDisabled: boolean;
@@ -40,8 +44,7 @@ export declare const ViraDropdown: import("element-vir").DeclarativeElementDefin
 }>, {
     /** `undefined` means the pop up is not currently showing. */
     showPopUpResult: ShowPopUpResult | undefined;
-    popUpManager: PopUpManager;
 }, {
     selectedChange: import("element-vir").DefineEvent<PropertyKey[]>;
-    openChange: import("element-vir").DefineEvent<boolean>;
-}, "vira-dropdown-disabled", "vira-dropdown-", readonly []>;
+    openChange: import("element-vir").DefineEvent<ShowPopUpResult | undefined>;
+}, "vira-dropdown-", "vira-dropdown-", readonly []>;

package/dist/elements/vira-dropdown.element.js

@@ -0,0 +1,185 @@
+import { check } from '@augment-vir/assert';
+import { filterMap } from '@augment-vir/common';
+import { classMap, css, defineElementEvent, html, ifDefined, listen, nothing, testId, } from 'element-vir';
+import { ChevronUp24Icon } from '../icons/index.js';
+import { viraBorders } from '../styles/border.js';
+import { viraFocusCssVars } from '../styles/focus.js';
+import { viraFormCssVars } from '../styles/form-themes.js';
+import { noUserSelect, viraAnimationDurations } from '../styles/index.js';
+import { defineViraElement } from './define-vira-element.js';
+import { ViraMenuTrigger } from './pop-up/vira-menu-trigger.element.js';
+import { ViraIcon } from './vira-icon.element.js';
+/**
+ * Test ids for {@link ViraDropdown}.
+ *
+ * @category Internal
+ */
+export const viraDropdownTestIds = {
+    trigger: 'dropdown-trigger',
+    icon: 'dropdown-icon',
+    prefix: 'dropdown-prefix',
+};
+/**
+ * A dropdown element that uses pop-up menus.
+ *
+ * @category Dropdown
+ * @category Elements
+ * @see https://electrovir.github.io/element-vir/vira/book/elements/dropdown/vira-dropdown
+ */
+export const ViraDropdown = defineViraElement()({
+    tagName: 'vira-dropdown',
+    styles: css `
+        :host {
+            display: inline-flex;
+            vertical-align: middle;
+            width: 256px;
+            ${viraFocusCssVars['vira-focus-outline-color'].name}: ${viraFormCssVars['vira-form-focus-color'].value};
+            position: relative;
+            max-width: 100%;
+        }
+
+        ${ViraMenuTrigger} {
+            width: 100%;
+        }
+
+        .selection-display {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .trigger-icon {
+            align-self: flex-start;
+            will-change: transform;
+            transform: rotate(180deg);
+            transition: transform
+                ${viraAnimationDurations['vira-interaction-animation-duration'].value} linear;
+        }
+
+        .trigger-icon-wrapper {
+            flex-grow: 1;
+            display: flex;
+            justify-content: flex-end;
+        }
+
+        .open {
+            & .trigger-icon {
+                transform: rotate(0);
+            }
+
+            &:not(.open-upwards).dropdown-trigger {
+                border-bottom-left-radius: 0;
+            }
+
+            &.open-upwards.dropdown-trigger {
+                border-top-left-radius: 0;
+            }
+        }
+
+        .dropdown-trigger {
+            ${noUserSelect};
+            border: 1px solid ${viraFormCssVars['vira-form-border-color'].value};
+            height: 100%;
+            width: 100%;
+            box-sizing: border-box;
+            display: flex;
+            gap: 8px;
+            text-align: left;
+            align-items: center;
+            padding: 3px;
+            padding-left: 10px;
+            border-radius: ${viraBorders['vira-form-input-radius'].value};
+            background-color: ${viraFormCssVars['vira-form-background-color'].value};
+            color: ${viraFormCssVars['vira-form-foreground-color'].value};
+        }
+
+        .using-placeholder {
+            opacity: 0.4;
+        }
+    `,
+    events: {
+        selectedChange: defineElementEvent(),
+        openChange: defineElementEvent(),
+    },
+    state() {
+        return {
+            /** `undefined` means the pop up is not currently showing. */
+            showPopUpResult: undefined,
+        };
+    },
+    render({ state, inputs, dispatch, events, updateState }) {
+        const selectedOptions = filterMap(inputs.selected, (selectedId) => inputs.options.find((option) => option.id === selectedId), check.isTruthy);
+        const leadingIconTemplate = inputs.icon
+            ? html `
+                  <${ViraIcon.assign({
+                icon: inputs.icon,
+            })}
+                      ${testId(viraDropdownTestIds.icon)}
+                  ></${ViraIcon}>
+              `
+            : nothing;
+        const shouldUsePlaceholder = !selectedOptions.length;
+        const prefixTemplate = inputs.selectionPrefix && !shouldUsePlaceholder
+            ? html `
+                      <span class="selected-label-prefix" ${testId(viraDropdownTestIds.prefix)}>
+                          ${inputs.selectionPrefix}
+                      </span>
+                  `
+            : nothing;
+        const selectionDisplay = shouldUsePlaceholder
+            ? inputs.placeholder || ''
+            : inputs.isMultiSelect && inputs.showSelectionCount
+                ? `${selectedOptions.length} Selected`
+                : inputs.isMultiSelect
+                    ? selectedOptions.map((item) => item.label).join(', ')
+                    : selectedOptions[0]?.label || '';
+        return html `
+            <${ViraMenuTrigger.assign({
+            items: inputs.options,
+            selected: inputs.selected,
+            isDisabled: inputs.isDisabled,
+            isMultiSelect: inputs.isMultiSelect,
+            z_debug_forceOpenState: inputs.z_debug_forceOpenState,
+            popUpOffset: {
+                vertical: -1,
+                right: 24,
+            },
+        })}
+                ${listen(ViraMenuTrigger.events.openChange, (event) => {
+            updateState({ showPopUpResult: event.detail });
+            dispatch(new events.openChange(event.detail));
+        })}
+                ${listen(ViraMenuTrigger.events.itemActivate, (event) => {
+            dispatch(new events.selectedChange(event.detail));
+        })}
+            >
+                <div
+                    slot=${ViraMenuTrigger.slotNames.trigger}
+                    class="dropdown-trigger ${classMap({
+            open: !!state.showPopUpResult,
+            'open-upwards': !state.showPopUpResult?.popDown,
+        })}"
+                    ${testId(viraDropdownTestIds.trigger)}
+                >
+                    ${leadingIconTemplate}
+                    <span
+                        class="selection-display ${classMap({
+            'using-placeholder': shouldUsePlaceholder,
+        })}"
+                        title=${ifDefined(shouldUsePlaceholder ||
+            (inputs.isMultiSelect && inputs.showSelectionCount)
+            ? undefined
+            : selectionDisplay)}
+                    >
+                        ${prefixTemplate} ${selectionDisplay}
+                    </span>
+                    <span class="trigger-icon-wrapper">
+                        <${ViraIcon.assign({ icon: ChevronUp24Icon })}
+                            class="trigger-icon"
+                        ></${ViraIcon}>
+                    </span>
+                </div>
+            </${ViraMenuTrigger}>
+        `;
+    },
+});

package/dist/styles/focus.d.ts

@@ -26,5 +26,4 @@ export declare function createFocusStyles({ selector, elementBorderSize, outline
     elementBorderSize: number;
     outlineGap?: number;
     outlineWidth?: number;
-    borderRadius?: number;
 }): import("element-vir").CSSResult;

package/dist/util/pop-up-manager.d.ts

@@ -122,7 +122,7 @@ export type PopUpManagerEvents = HidePopUpEvent | NavSelectEvent;
 export declare class PopUpManager {
     readonly navController: NavController;
     private listenTarget;
-    private options;
+    options: PopUpManagerOptions;
     private cleanupCallbacks;
     private lastRootElement;
     constructor(navController: NavController, options?: Partial<PopUpManagerOptions> | undefined);

package/dist/util/pop-up-manager.js

@@ -1,7 +1,7 @@
 import { assert } from '@augment-vir/assert';
 import { mapObjectValues } from '@augment-vir/common';
 import { findOverflowAncestor } from '@augment-vir/web';
-import { NavDirection } from 'device-navigation';
+import { NavActivateEvent, NavDirection } from 'device-navigation';
 import { listenToPageActivation } from 'page-active';
 import { ListenTarget, defineTypedCustomEvent, defineTypedEvent, listenToGlobal, } from 'typed-event-target';
 /**
@@ -56,6 +56,14 @@ export class PopUpManager {
                     this.removePopUp();
                 }
             }),
+            this.navController.listen(NavActivateEvent, (event) => {
+                if (event.detail.success) {
+                    this.listenTarget.dispatch(new NavSelectEvent({ detail: event.detail.coords }));
+                    this.navController.currentNavEntry?.entry.focus(true);
+                    event.stopImmediatePropagation();
+                    event.preventDefault();
+                }
+            }),
             listenToGlobal('mousedown', (event) => {
                 if (this.lastRootElement &&
                     event.composedPath().includes(this.lastRootElement)) {
@@ -102,13 +110,10 @@ export class PopUpManager {
                             allowWrapping: false,
                         });
                     }
-                    else if (keyCode === 'Enter' || keyCode === 'Return') {
-                        const result = this.navController.enterInto({ fallbackToActivate: true });
-                        if (result.success) {
-                            this.listenTarget.dispatch(new NavSelectEvent({ detail: result.coords }));
-                            event.stopImmediatePropagation();
-                            event.preventDefault();
-                        }
+                    else if ((keyCode === 'Enter' || keyCode === 'Return' || keyCode === 'Space') &&
+                        this.navController.enterInto({ fallbackToActivate: true }).success) {
+                        event.stopImmediatePropagation();
+                        event.preventDefault();
                     }
                 }
             }),
@@ -152,7 +157,13 @@ export class PopUpManager {
         const diff = mapObjectValues(emptyPositionRect, (key) => {
             const containerDimension = containerPosition[key];
             const hostDimension = rootPosition[key];
-            return Math.abs(containerDimension - hostDimension);
+            /**
+             * Chrome will trigger a scroll bar sometimes if the PopUp is too close to the bottom,
+             * even if clearly isn't overflowing. The value here was found by experimentation to be
+             * the lowest value that wouldn't trigger that.
+             */
+            const additionalOffset = key === 'bottom' ? -51 : 0;
+            return Math.abs(containerDimension - hostDimension + additionalOffset);
         });
         const useUp = diff.top > diff.bottom + currentOptions.verticalDiffThreshold &&
             diff.bottom < currentOptions.minDownSpace;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "25.7.3",
+    "version": "25.9.0",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",
@@ -25,6 +25,7 @@
         "name": "electrovir",
         "url": "https://github.com/electrovir"
     },
+    "sideEffects": false,
     "type": "module",
     "main": "dist/index.js",
     "module": "dist/index.js",
@@ -37,36 +38,36 @@
         "test:docs": "virmator docs check"
     },
     "dependencies": {
-        "@augment-vir/assert": "^31.20.0",
-        "@augment-vir/common": "^31.20.0",
-        "@augment-vir/web": "^31.20.0",
+        "@augment-vir/assert": "^31.21.0",
+        "@augment-vir/common": "^31.21.0",
+        "@augment-vir/web": "^31.21.0",
         "colorjs.io": "^0.5.2",
         "date-vir": "^7.3.1",
-        "device-navigation": "^4.4.0",
+        "device-navigation": "^4.5.5",
         "lit-css-vars": "^3.0.11",
         "observavir": "^2.0.5",
         "page-active": "^1.0.1",
-        "spa-router-vir": "^5.3.1",
+        "spa-router-vir": "^5.5.0",
         "type-fest": "^4.41.0",
         "typed-event-target": "^4.1.0"
     },
     "devDependencies": {
-        "@augment-vir/test": "^31.20.0",
+        "@augment-vir/test": "^31.21.0",
         "@web/dev-server-esbuild": "^1.0.4",
         "@web/test-runner": "^0.20.2",
         "@web/test-runner-commands": "^0.9.0",
         "@web/test-runner-playwright": "^0.11.0",
         "@web/test-runner-visual-regression": "^0.10.0",
-        "esbuild": "^0.25.4",
+        "esbuild": "^0.25.5",
         "istanbul-smart-text-reporter": "^1.1.5",
         "markdown-code-example-inserter": "^3.0.3",
-        "typedoc": "^0.28.4",
+        "typedoc": "^0.28.5",
         "typescript": "5.8.3",
         "vite": "^6.3.5",
         "vite-tsconfig-paths": "^5.1.4"
     },
     "peerDependencies": {
-        "element-vir": "^25.7.3"
+        "element-vir": "^25.9.0"
     },
     "engines": {
         "node": ">=22"

package/dist/elements/dropdown/dropdown-helpers.d.ts

@@ -1,45 +0,0 @@
-import { type PopUpManager, type ShowPopUpResult } from '../../util/pop-up-manager.js';
-import { type ViraDropdownOption } from './vira-dropdown-item.element.js';
-/**
- * Filters an array of {@link ViraDropdownOption} based on the given selection.
- *
- * @category Internal
- */
-export declare function filterToSelectedOptions({ selected, options, isMultiSelect, }: Readonly<{
-    selected: ReadonlyArray<PropertyKey>;
-    isMultiSelect?: boolean | undefined;
-    options: ReadonlyArray<Readonly<ViraDropdownOption>>;
-}>): ViraDropdownOption[];
-/**
- * Verifies that all options have unique ids.
- *
- * @category Internal
- */
-export declare function assertUniqueIdProps(options: ReadonlyArray<Readonly<{
-    id: PropertyKey;
-}>>): void;
-/**
- * Creates a new array of selections based on the current selection and new selection id. This
- * behaves differently when multi select is enabled, hence this function.
- *
- * @category Internal
- */
-export declare function createNewSelection(
-/** The id of the option that should be newly selected. */
-id: PropertyKey, currentSelection: ReadonlyArray<PropertyKey>, isMultiSelect: boolean): PropertyKey[];
-/**
- * Handles toggles pop up state for `ViraDropdown`.
- *
- * @category Internal
- */
-export declare function triggerPopUpState({ open, emitEvent }: {
-    open: boolean;
-    emitEvent: boolean;
-}, { updateState, popUpManager, dispatch, host, }: {
-    updateState: (params: {
-        showPopUpResult: ShowPopUpResult | undefined;
-    }) => void;
-    popUpManager: PopUpManager;
-    dispatch: (open: boolean) => void;
-    host: HTMLElement;
-}): void;