vira 32.4.0 → 33.1.0

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

@@ -1,18 +1,23 @@
 import { check } from '@augment-vir/assert';
 import { filterMap, randomString } from '@augment-vir/common';
 import { extractEventTarget } from '@augment-vir/web';
-import { classMap, css, defineElementEvent, html, ifDefined, listen, nothing, testId, } from 'element-vir';
+import { nav, NavDirection } from 'device-navigation';
+import { attributes, classMap, css, defineElementEvent, html, ifDefined, listen, nothing, testId, } from 'element-vir';
 import { ChevronUp16Icon } from '../icons/index.js';
+import { createFocusStyles } from '../styles/focus.js';
 import { viraFormCssVars } from '../styles/form-styles.js';
-import { noUserSelect, viraAnimationDurations } from '../styles/index.js';
+import { ViraSize, viraSizeHeights } from '../styles/form-variants.js';
+import { noNativeFormStyles, noUserSelect, viraAnimationDurations } from '../styles/index.js';
 import { defineViraElement } from '../util/define-vira-element.js';
-import { renderMenuItemEntries } from '../util/pop-up-helpers.js';
-import { ViraMenuItem } from './pop-up/vira-menu-item.element.js';
-import { ViraMenu, ViraMenuPopUpDirection } from './pop-up/vira-menu.element.js';
-import { HorizontalAnchor, ViraPopUpTrigger, } from './pop-up/vira-pop-up-trigger.element.js';
+import { fuzzyMatch } from '../util/fuzzy-match.js';
+import { renderMenuItemEntries } from '../util/menu-helpers.js';
+import { isViraDropdownOptionGroup, } from '../util/vira-dropdown-option.js';
+import { ViraMenuItem } from './popover/vira-menu-item.element.js';
+import { ViraMenu, ViraMenuCornerStyle } from './popover/vira-menu.element.js';
+import { ViraPopoverTrigger } from './popover/vira-popover-trigger.element.js';
 import { ViraIcon } from './vira-icon.element.js';
 /**
- * A dropdown element that uses pop-up menus.
+ * A dropdown element that uses popover menus.
  *
  * @category Dropdown
  * @category Elements
@@ -23,18 +28,19 @@ export const ViraDropdown = defineViraElement()({
     testIds: [
         'leadingIcon',
         'prefixText',
+        'searchInput',
         'trigger',
     ],
     styles: css `
         :host {
             display: inline-flex;
             vertical-align: middle;
-            width: 256px;
+            width: 224px;
             position: relative;
             max-width: 100%;
         }
 
-        ${ViraPopUpTrigger} {
+        ${ViraPopoverTrigger} {
             width: 100%;
         }
 
@@ -44,6 +50,38 @@ export const ViraDropdown = defineViraElement()({
             white-space: nowrap;
         }
 
+        .search-input {
+            ${noNativeFormStyles};
+            flex-grow: 1;
+            min-width: 0;
+            align-self: stretch;
+            text-overflow: ellipsis;
+            cursor: inherit;
+            user-select: text;
+            -webkit-user-select: text;
+            outline: none;
+
+            &::placeholder {
+                color: inherit;
+                opacity: 0.4;
+            }
+        }
+
+        .open .search-input {
+            cursor: text;
+        }
+
+        .dropdown-trigger:has(.search-input:focus-visible:not([disabled])) {
+            position: relative;
+
+            &::after {
+                ${createFocusStyles({
+        elementBorderSize: '1px',
+        noNesting: true,
+    })}
+            }
+        }
+
         .trigger-icon {
             width: 24px;
             aspect-ratio: 1;
@@ -60,18 +98,8 @@ export const ViraDropdown = defineViraElement()({
             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;
-            }
+        .open .trigger-icon {
+            transform: rotate(0);
         }
 
         .dropdown-trigger {
@@ -84,13 +112,50 @@ export const ViraDropdown = defineViraElement()({
             gap: 8px;
             text-align: left;
             align-items: center;
-            padding: 3px;
-            padding-left: 10px;
+            min-height: ${viraSizeHeights[ViraSize.Medium]}px;
+            padding: 0 3px 0 10px;
             border-radius: ${viraFormCssVars['vira-form-radius'].value};
             background-color: ${viraFormCssVars['vira-form-background-color'].value};
             color: ${viraFormCssVars['vira-form-foreground-color'].value};
         }
 
+        .dropdown-wrapper {
+            display: flex;
+            width: 100%;
+        }
+
+        .has-error .dropdown-trigger {
+            border-color: ${viraFormCssVars['vira-form-error-color'].value};
+        }
+
+        .option-group-label,
+        .no-options {
+            ${noUserSelect};
+            /* Aligns with the label text of each ViraMenuItem, past its check icon. */
+            padding: 8px 12px 4px
+                calc(${ViraMenuItem.cssVars['vira-menu-item-icon-gap'].value} * 3 + 16px);
+            opacity: 0.6;
+            text-align: left;
+        }
+
+        .option-group-label {
+            font-weight: ${viraFormCssVars['vira-form-label-font-weight'].value};
+        }
+
+        .no-options {
+            cursor: default;
+            padding-bottom: 8px;
+        }
+
+        ${ViraMenuItem}.option-group-label {
+            padding: 0 0 0 calc(${ViraMenuItem.cssVars['vira-menu-item-icon-gap'].value} * 2);
+            ${ViraMenuItem.cssVars['vira-menu-item-padding'].name}: 8px 12px 4px 0;
+        }
+
+        .readonly-value {
+            overflow-wrap: anywhere;
+        }
+
         .using-placeholder {
             opacity: 0.4;
         }
@@ -114,22 +179,29 @@ export const ViraDropdown = defineViraElement()({
     events: {
         /** Emits all currently selected values. */
         selectedValuesChange: defineElementEvent(),
+        /** `true` when the popover just opened, `false` when it just closed. */
         openChange: defineElementEvent(),
     },
     state() {
         return {
-            /** `undefined` means the pop up is not currently showing. */
-            showPopUpResult: undefined,
+            isOpen: false,
             shouldSelectOnMouseUp: false,
             /**
              * Used to couple the label and trigger together. This is not applied if no label is
              * provided.
              */
             randomId: randomString(32),
+            /** The text typed into the search input while the dropdown is open. */
+            searchText: '',
+            navController: undefined,
+            popoverManager: undefined,
         };
     },
-    render({ state, inputs, dispatch, events, updateState, testIds }) {
-        const selectedOptions = filterMap(inputs.selected, (selectedValue) => inputs.options.find((option) => option.value === selectedValue), check.isTruthy);
+    render({ state, inputs, dispatch, events, updateState, testIds, host }) {
+        const flatOptions = inputs.options.flatMap((entry) => {
+            return isViraDropdownOptionGroup(entry) ? entry.options : [entry];
+        });
+        const selectedOptions = filterMap(inputs.selected, (selectedValue) => flatOptions.find((option) => option.value === selectedValue), check.isTruthy);
         const leadingIconTemplate = inputs.icon
             ? html `
                   <${ViraIcon.assign({
@@ -165,13 +237,115 @@ export const ViraDropdown = defineViraElement()({
                 detail: newSelectedValues,
             }));
         }
+        const filteredOptions = state.searchText
+            ? filterMap(inputs.options, (entry) => {
+                return isViraDropdownOptionGroup(entry)
+                    ? {
+                        ...entry,
+                        options: entry.options.filter((option) => {
+                            return fuzzyMatch({
+                                search: state.searchText,
+                                text: option.label,
+                            });
+                        }),
+                    }
+                    : entry;
+            }, (entry) => {
+                return isViraDropdownOptionGroup(entry)
+                    ? !!entry.options.length
+                    : fuzzyMatch({
+                        search: state.searchText,
+                        text: entry.label,
+                    });
+            })
+            : inputs.options;
+        const filteredFlatOptions = filteredOptions.flatMap((entry) => {
+            return isViraDropdownOptionGroup(entry) ? entry.options : [entry];
+        });
+        function findSearchInput() {
+            const searchInput = host.shadowRoot.querySelector('.search-input');
+            return searchInput instanceof HTMLInputElement ? searchInput : undefined;
+        }
+        function clearSearch(searchInput) {
+            /** Set directly because the `.value` binding skips values it has already committed. */
+            searchInput.value = '';
+            updateState({
+                searchText: '',
+            });
+        }
+        function toggleGroup(group) {
+            const enabledGroupOptions = group.options.filter((option) => !option.disabled);
+            const isGroupSelected = enabledGroupOptions.every((option) => {
+                return selectedOptions.includes(option);
+            });
+            dispatch(new events.selectedValuesChange({
+                detail: (isGroupSelected
+                    ? selectedOptions.filter((option) => !enabledGroupOptions.includes(option))
+                    : [
+                        ...selectedOptions,
+                        ...enabledGroupOptions.filter((option) => {
+                            return !selectedOptions.includes(option);
+                        }),
+                    ]).map((option) => option.value),
+            }));
+        }
+        function renderGroupLabel(group) {
+            return inputs.isMultiSelect
+                ? html `
+                      <${ViraMenuItem.assign({
+                    disablePointerStyles: true,
+                })}
+                          class="option-group-label"
+                          ${state.navController ? nav(state.navController) : nothing}
+                          ${listen('click', () => {
+                    toggleGroup(group);
+                })}
+                      >
+                          ${group.groupName}
+                      </${ViraMenuItem}>
+                  `
+                : html `
+                      <div class="option-group-label">${group.groupName}</div>
+                  `;
+        }
+        /** Drag-select actions in the same order as the rendered menu items. */
+        const menuItemActions = filteredOptions.flatMap((entry) => {
+            const options = isViraDropdownOptionGroup(entry) ? entry.options : [entry];
+            const optionActions = options.map((option) => {
+                return option.disabled
+                    ? undefined
+                    : () => {
+                        selectOption(option);
+                    };
+            });
+            return isViraDropdownOptionGroup(entry) && inputs.isMultiSelect
+                ? [
+                    () => {
+                        toggleGroup(entry);
+                    },
+                    ...optionActions,
+                ]
+                : optionActions;
+        });
+        function renderOptionEntries(options) {
+            return renderMenuItemEntries(options.map((option) => {
+                return {
+                    content: option.label,
+                    onClick() {
+                        selectOption(option);
+                    },
+                    disabled: option.disabled,
+                    selected: selectedOptions.includes(option),
+                };
+            }), state.navController);
+        }
+        const isMenuShown = state.isOpen && (!!filteredFlatOptions.length || !!inputs.noOptionsText);
         const menuTemplate = html `
             <${ViraMenu.assign({
-            direction: state.showPopUpResult?.popDown
-                ? ViraMenuPopUpDirection.Downwards
-                : ViraMenuPopUpDirection.Upwards,
+            cornerStyle: ViraMenuCornerStyle.Round,
+            hoverScrollSpeed: inputs.menuHoverScrollSpeed,
         })}
-                slot=${ViraPopUpTrigger.slotNames['vira-pop-up-trigger-pop-up']}
+                slot=${ViraPopoverTrigger.slotNames['vira-popover-trigger-popover']}
                 ${listen('mouseup', (event) => {
             if (state.shouldSelectOnMouseUp) {
                 const menuItem = event
@@ -179,47 +353,82 @@ export const ViraDropdown = defineViraElement()({
                     .find((eventTarget) => {
                     return eventTarget instanceof ViraMenuItem;
                 });
-                const option = menuItem
-                    ? inputs.options[Array.from(extractEventTarget(event, ViraMenu).querySelectorAll(ViraMenuItem.tagName)).indexOf(menuItem)]
+                const menuItemAction = menuItem
+                    ? menuItemActions[Array.from(extractEventTarget(event, ViraMenu).querySelectorAll(ViraMenuItem.tagName)).indexOf(menuItem)]
                     : undefined;
-                if (check.isDefined(option) && !option.disabled) {
-                    selectOption(option);
-                }
+                menuItemAction?.();
             }
         })}
             >
-                ${renderMenuItemEntries(inputs.options.map((option) => {
-            return {
-                content: option.label,
-                onClick() {
-                    selectOption(option);
-                },
-                disabled: option.disabled,
-                selected: selectedOptions.includes(option),
-            };
-        }))}
+                ${filteredFlatOptions.length
+            ? filteredOptions.map((entry) => {
+                return isViraDropdownOptionGroup(entry)
+                    ? html `
+                                    ${renderGroupLabel(entry)} ${renderOptionEntries(entry.options)}
+                                `
+                    : renderOptionEntries([entry]);
+            })
+            : html `
+                          <div class="no-options">${inputs.noOptionsText}</div>
+                      `}
             </${ViraMenu}>
         `;
         const triggerTemplate = html `
-            <${ViraPopUpTrigger.assign({
+            <${ViraPopoverTrigger.assign({
             ...inputs,
             keepOpenAfterInteraction: inputs.isMultiSelect,
             focusOnClose: true,
-            popUpOffset: {
+            popoverOffset: {
                 vertical: -1,
                 right: 24,
             },
-            horizontalAnchor: inputs.horizontalAnchor || HorizontalAnchor.Both,
         })}
-                ${listen(ViraPopUpTrigger.events.openChange, (event) => {
-            if (!!state.showPopUpResult !== !!event.detail) {
+                ${listen(ViraPopoverTrigger.events.init, (event) => {
+            updateState({
+                navController: event.detail.navController,
+                popoverManager: event.detail.popoverManager,
+            });
+        })}
+                ${listen(ViraPopoverTrigger.events.openChange, (event) => {
+            if (state.isOpen !== event.detail) {
                 dispatch(new events.openChange({
                     detail: event.detail,
                 }));
             }
             updateState({
-                showPopUpResult: event.detail,
+                isOpen: event.detail,
             });
+            const searchInput = findSearchInput();
+            if (!searchInput) {
+                return;
+            }
+            else if (event.detail) {
+                searchInput.focus();
+            }
+            else {
+                clearSearch(searchInput);
+            }
+        })}
+                ${listen('keydown', (event) => {
+            const searchInput = findSearchInput();
+            const isSearchKey = event.key === 'Backspace' ||
+                (event.key.length === 1 &&
+                    event.key !== ' ' &&
+                    !event.ctrlKey &&
+                    !event.metaKey &&
+                    !event.altKey);
+            if (!searchInput || !isSearchKey) {
+                return;
+            }
+            if (!state.isOpen) {
+                clearSearch(searchInput);
+            }
+            /**
+             * Focusing during keydown makes the browser type the pressed key into the
+             * search input, even when the key was pressed on the trigger or a menu item.
+             */
+            searchInput.focus();
+            state.popoverManager?.show();
         })}
                 ${listen('mouseup', () => {
             if (state.shouldSelectOnMouseUp) {
@@ -231,15 +440,15 @@ export const ViraDropdown = defineViraElement()({
             >
                 <div
                     class="dropdown-trigger ${classMap({
-            open: !!state.showPopUpResult,
-            'open-upwards': !state.showPopUpResult?.popDown,
+            open: state.isOpen,
         })}"
-                    slot=${ViraPopUpTrigger.slotNames['vira-pop-up-trigger-trigger']}
+                    slot=${ViraPopoverTrigger.slotNames['vira-popover-trigger-trigger']}
                     id=${ifDefined(inputs.label ? state.randomId : undefined)}
                     aria-label=${ifDefined((check.isString(inputs.label) && inputs.label) || undefined)}
+                    ${attributes(inputs.attributePassthrough)}
                     ${testId(testIds.trigger)}
                     ${listen('mousedown', () => {
-            if (!state.showPopUpResult) {
+            if (!state.isOpen) {
                 updateState({
                     shouldSelectOnMouseUp: true,
                 });
@@ -247,14 +456,93 @@ export const ViraDropdown = defineViraElement()({
         })}
                 >
                     ${leadingIconTemplate}
-                    <span
-                        class="selection-display ${classMap({
-            'using-placeholder': shouldUsePlaceholder,
-        })}"
-                        title=${ifDefined(shouldUsePlaceholder ? undefined : selectionDisplay)}
-                    >
-                        ${prefixTemplate} ${selectionDisplay}
-                    </span>
+                    ${inputs.isSearchable
+            ? html `
+                              ${state.isOpen ? nothing : prefixTemplate}
+                              <input
+                                  class="search-input"
+                                  ${testId(testIds.searchInput)}
+                                  tabindex="-1"
+                                  autocomplete="off"
+                                  spellcheck="false"
+                                  aria-label=${ifDefined((check.isString(inputs.label) && inputs.label) || undefined)}
+                                  ?disabled=${!!inputs.isDisabled}
+                                  title=${ifDefined(shouldUsePlaceholder || state.isOpen
+                ? undefined
+                : selectionDisplay)}
+                                  placeholder=${state.isOpen && !shouldUsePlaceholder
+                ? selectionDisplay
+                : inputs.placeholder || ''}
+                                  .value=${state.isOpen
+                ? state.searchText
+                : shouldUsePlaceholder
+                    ? ''
+                    : selectionDisplay}
+                                  ${listen('mousedown', (event) => {
+                /** Keeps the popover open when clicking into the input. */
+                if (state.isOpen) {
+                    event.stopPropagation();
+                }
+            })}
+                                  ${listen('input', (event) => {
+                updateState({
+                    searchText: extractEventTarget(event, HTMLInputElement)
+                        .value,
+                });
+                state.popoverManager?.show();
+            })}
+                                  ${listen('keydown', (event) => {
+                if (!state.isOpen) {
+                    return;
+                }
+                else if (event.key === 'ArrowDown' ||
+                    event.key === 'ArrowUp') {
+                    event.preventDefault();
+                    state.navController?.navigate({
+                        direction: event.key === 'ArrowDown'
+                            ? NavDirection.Down
+                            : NavDirection.Up,
+                        allowWrapping: false,
+                    });
+                }
+                else if (event.key === 'Tab' && !event.shiftKey) {
+                    /**
+                     * Without this, browsers move focus from this input past
+                     * the menu items (sometimes closing the menu).
+                     */
+                    const firstMenuItem = Array.from(host.shadowRoot.querySelectorAll(ViraMenuItem.tagName)).find((menuItem) => menuItem.tabIndex >= 0);
+                    if (firstMenuItem) {
+                        event.preventDefault();
+                        firstMenuItem.focus();
+                    }
+                }
+                else if (event.key === 'Enter') {
+                    const firstOption = filteredFlatOptions.find((option) => !option.disabled);
+                    if (!firstOption) {
+                        return;
+                    }
+                    event.preventDefault();
+                    selectOption(firstOption);
+                    if (inputs.isMultiSelect) {
+                        clearSearch(extractEventTarget(event, HTMLInputElement));
+                    }
+                    else {
+                        state.popoverManager?.hide();
+                    }
+                }
+            })}
+                              />
+                          `
+            : html `
+                              <span
+                                  class="selection-display ${classMap({
+                'using-placeholder': shouldUsePlaceholder,
+            })}"
+                                  title=${ifDefined(shouldUsePlaceholder ? undefined : selectionDisplay)}
+                              >
+                                  ${prefixTemplate} ${selectionDisplay}
+                              </span>
+                          `}
 
                     <span class="trigger-icon-wrapper">
                         <${ViraIcon.assign({
@@ -264,19 +552,37 @@ export const ViraDropdown = defineViraElement()({
                         ></${ViraIcon}>
                     </span>
                 </div>
-                ${state.showPopUpResult ? menuTemplate : nothing}
-            </${ViraPopUpTrigger}>
+                ${isMenuShown ? menuTemplate : nothing}
+            </${ViraPopoverTrigger}>
         `;
+        const contentTemplate = inputs.isReadonly
+            ? html `
+                  <span class="readonly-value">${selectionDisplay}</span>
+              `
+            : triggerTemplate;
         if (inputs.label) {
             return html `
-                <label for=${state.randomId}>
+                <label
+                    for=${ifDefined(inputs.isReadonly ? undefined : state.randomId)}
+                    class=${classMap({
+                'has-error': !!inputs.hasError,
+            })}
+                >
                     <span class="dropdown-label">${inputs.label}</span>
-                    ${triggerTemplate}
+                    ${contentTemplate}
                 </label>
             `;
         }
         else {
-            return triggerTemplate;
+            return html `
+                <span
+                    class="dropdown-wrapper ${classMap({
+                'has-error': !!inputs.hasError,
+            })}"
+                >
+                    ${contentTemplate}
+                </span>
+            `;
         }
     },
 });

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

@@ -6,8 +6,8 @@ import { defineViraElement } from '../util/define-vira-element.js';
 import { applyRequiredLabel, areFormFieldsValid, ViraFormFieldType, } from '../util/vira-form-fields.js';
 import { ViraCheckbox } from './vira-checkbox.element.js';
 import { ViraDateInput } from './vira-date-input.element.js';
+import { ViraDropdown } from './vira-dropdown.element.js';
 import { ViraInput, ViraInputType } from './vira-input.element.js';
-import { ViraSelect } from './vira-select.element.js';
 import { ViraTextArea } from './vira-text-area.element.js';
 /**
  * A form element.
@@ -70,9 +70,9 @@ export const ViraForm = defineViraElement()({
                     &
                     > ${ViraDateInput},
                     &
-                    > ${ViraInput},
+                    > ${ViraDropdown},
                     &
-                    > ${ViraSelect},
+                    > ${ViraInput},
                     &
                     > ${ViraTextArea} {
                     width: 100%;
@@ -159,34 +159,28 @@ export const ViraForm = defineViraElement()({
                 return wrapFormField({
                     label,
                     fieldTemplate: html `
-                            <${ViraSelect.assign({
+                            <${ViraDropdown.assign({
                         options: field.options,
-                        value: field.value,
+                        selected: field.value ? [field.value] : [],
                         placeholder: field.placeholder,
-                        disabled: isDisabled,
+                        isDisabled,
                         isReadonly: inputs.isReadonly,
                         label: childLabel,
                         hasError: field.hasError,
                         icon: field.icon,
-                        ...(inputs.useHorizontalLabels && label
-                            ? {
-                                attributePassthrough: {
-                                    select: horizontalLabelAttributes,
-                                },
-                            }
-                            : {}),
+                        attributePassthrough: horizontalLabelAttributes,
                     })}
                                 ${field.testId ? testId(field.testId) : nothing}
-                                ${listen(ViraSelect.events.valueChange, (event) => {
+                                ${listen(ViraDropdown.events.selectedValuesChange, (event) => {
                         dispatch(new events.valueChange({
                             detail: {
                                 key,
                                 ...field,
-                                value: event.detail,
+                                value: event.detail[0],
                             },
                         }));
                     })}
-                            ></${ViraSelect}>
+                            ></${ViraDropdown}>
                         `,
                 });
             }