igniteui-webcomponents 4.5.0-beta.1 → 4.6.0

package/components/dropdown/dropdown.js

@@ -4,343 +4,250 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html, LitElement } from 'lit';
-import { property, query, queryAssignedElements, state, } from 'lit/decorators.js';
-import { styleMap } from 'lit/directives/style-map.js';
+import { html } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import IgcDropdownGroupComponent from './dropdown-group.js';
+import IgcDropdownHeaderComponent from './dropdown-header.js';
+import IgcDropdownItemComponent from './dropdown-item.js';
+import { all } from './themes/container.js';
+import { styles } from './themes/dropdown.base.css.js';
 import { themes } from '../../theming/theming-decorator.js';
+import { addKeybindings, arrowDown, arrowLeft, arrowRight, arrowUp, endKey, enterKey, escapeKey, homeKey, tabKey, } from '../common/controllers/key-bindings.js';
+import { addRootClickHandler } from '../common/controllers/root-click.js';
+import { addRootScrollHandler } from '../common/controllers/root-scroll.js';
 import { blazorAdditionalDependencies } from '../common/decorators/blazorAdditionalDependencies.js';
 import { blazorSuppress } from '../common/decorators/blazorSuppress.js';
 import { watch } from '../common/decorators/watch.js';
+import { registerComponent } from '../common/definitions/register.js';
+import { IgcBaseComboBoxLikeComponent, getActiveItems, getItems, getNextActiveItem, getPreviousActiveItem, setInitialSelectionState, } from '../common/mixins/combo-box.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { SizableMixin } from '../common/mixins/sizable.js';
-import { IgcToggleController } from '../toggle/toggle.controller.js';
-import { styles } from './themes/light/dropdown.base.css.js';
-import { styles as material } from './themes/light/dropdown.material.css.js';
-import { styles as bootstrap } from './themes/light/dropdown.bootstrap.css.js';
-import { styles as fluent } from './themes/light/dropdown.fluent.css.js';
-import { styles as indigo } from './themes/light/dropdown.indigo.css.js';
-import { defineComponents } from '../common/definitions/defineComponents.js';
-import IgcDropdownGroupComponent from './dropdown-group.js';
-import IgcDropdownHeaderComponent from './dropdown-header.js';
-import IgcDropdownItemComponent from './dropdown-item.js';
-defineComponents(IgcDropdownGroupComponent, IgcDropdownHeaderComponent, IgcDropdownItemComponent);
-let IgcDropdownComponent = class IgcDropdownComponent extends SizableMixin(EventEmitterMixin(LitElement)) {
-    get allItems() {
-        return [...this.items, ...this.groups.flatMap((group) => group.items)];
-    }
-    toggleDirectiveChange() {
-        var _a;
-        if (!this.target)
-            return;
-        this.toggleController.target = this.target;
-        this.requestUpdate();
-        if (this.open) {
-            document.addEventListener('keydown', this.handleKeyDown);
-            this.target.addEventListener('focusout', this.handleFocusout);
-            this.selectedItem = (_a = this.allItems.find((i) => i.selected)) !== null && _a !== void 0 ? _a : null;
-        }
-        else {
-            document.removeEventListener('keydown', this.handleKeyDown);
-            this.target.removeEventListener('focusout', this.handleFocusout);
+import { getElementByIdFromRoot } from '../common/util.js';
+import IgcPopoverComponent from '../popover/popover.js';
+let IgcDropdownComponent = class IgcDropdownComponent extends SizableMixin(EventEmitterMixin(IgcBaseComboBoxLikeComponent)) {
+    static register() {
+        registerComponent(this, IgcDropdownGroupComponent, IgcDropdownHeaderComponent, IgcDropdownItemComponent, IgcPopoverComponent);
+    }
+    get _activeItems() {
+        return Array.from(getActiveItems(this, IgcDropdownItemComponent.tagName));
+    }
+    get items() {
+        return Array.from(getItems(this, IgcDropdownItemComponent.tagName));
+    }
+    get groups() {
+        return Array.from(getItems(this, IgcDropdownGroupComponent.tagName));
+    }
+    get selectedItem() {
+        return this._selectedItem;
+    }
+    scrollStrategyChanged() {
+        this._rootScrollController.update({ resetListeners: true });
+    }
+    openStateChange() {
+        this._updateAnchorAccessibility(this._target);
+        this._rootClickController.update();
+        this._rootScrollController.update();
+        if (!this.open) {
+            this._target = undefined;
+            this._targetListeners?.unsubscribe();
+            this._rootClickController.update({ target: undefined });
         }
-        this.target.setAttribute('aria-expanded', this.open ? 'true' : 'false');
-    }
-    updateOptions() {
-        if (!this.toggleController)
-            return;
-        this.toggleController.update();
     }
     constructor() {
         super();
-        this.keyDownHandlers = new Map(Object.entries({
-            Escape: this.onEscapeKey,
-            Enter: this.onEnterKey,
-            ArrowUp: this.onArrowUpKeyDown,
-            ArrowDown: this.onArrowDownKeyDown,
-            ArrowLeft: this.onArrowUpKeyDown,
-            ArrowRight: this.onArrowDownKeyDown,
-            Home: this.onHomeKey,
-            End: this.onEndKey,
-        }));
-        this.keepOpenOnSelect = false;
-        this.open = false;
+        this._rootScrollController = addRootScrollHandler(this, {
+            hideCallback: () => this._hide(true),
+        });
+        this._rootClickController = addRootClickHandler(this, {
+            hideCallback: () => this._hide(true),
+        });
+        this._selectedItem = null;
         this.placement = 'bottom-start';
         this.positionStrategy = 'absolute';
         this.scrollStrategy = 'scroll';
         this.flip = false;
         this.distance = 0;
-        this.keepOpenOnOutsideClick = false;
         this.sameWidth = false;
-        this.handleKeyDown = (event) => {
-            var _a;
-            const path = event.composedPath();
-            if (!(path.includes(this.target) || path.includes(this.content)))
-                return;
-            if (this.keyDownHandlers.has(event.key)) {
-                event.preventDefault();
-                event.stopPropagation();
-                (_a = this.keyDownHandlers.get(event.key)) === null || _a === void 0 ? void 0 : _a.call(this);
-            }
-        };
-        this.handleTargetClick = async () => {
-            if (!this.open) {
-                if (!this.handleOpening())
-                    return;
-                this.show();
-                await this.updateComplete;
-                this.emitEvent('igcOpened');
-            }
-            else {
-                this._hide();
-            }
-        };
-        this.toggleController = new IgcToggleController(this, {
-            target: this.target,
-            closeCallback: () => this._hide(),
-        });
+        this._keyBindings = addKeybindings(this, {
+            skip: () => !this.open,
+            bindingDefaults: { preventDefault: true, triggers: ['keydownRepeat'] },
+        })
+            .set(tabKey, this.onTabKey, {
+            preventDefault: false,
+        })
+            .set(escapeKey, this.onEscapeKey)
+            .set(arrowUp, this.onArrowUp)
+            .set(arrowLeft, this.onArrowUp)
+            .set(arrowDown, this.onArrowDown)
+            .set(arrowRight, this.onArrowDown)
+            .set(enterKey, this.onEnterKey)
+            .set(homeKey, this.onHomeKey)
+            .set(endKey, this.onEndKey);
     }
     async firstUpdated() {
-        if (this.targetNodes.length) {
-            this.target = this.targetNodes[0];
-            this.target.setAttribute('aria-haspopup', 'listbox');
-        }
         await this.updateComplete;
-        this.toggleDirectiveChange();
-        this.setInitialSelection();
+        const selected = setInitialSelectionState(this.items);
+        if (selected) {
+            this._selectItem(selected, false);
+        }
     }
-    async getUpdateComplete() {
-        const result = await super.getUpdateComplete();
-        await this.toggleController.rendered;
-        return result;
+    disconnectedCallback() {
+        this._targetListeners?.unsubscribe();
+        super.disconnectedCallback();
     }
-    setInitialSelection() {
-        const item = this.allItems.filter((item) => item.selected).at(-1);
-        this.allItems.forEach((item) => (item.selected = false));
-        if (item) {
-            this.selectItem(item, false);
+    handleListBoxClick(event) {
+        const item = event.target;
+        if (this._activeItems.includes(item)) {
+            this._selectItem(item);
         }
     }
-    onHomeKey() {
-        this.navigateTo(this.allItems.filter((item) => !item.disabled).at(0).value);
-    }
-    onEndKey() {
-        this.navigateTo(this.allItems.filter((item) => !item.disabled).at(-1).value);
+    handleChange(item) {
+        this.emitEvent('igcChange', { detail: item });
     }
-    onEscapeKey() {
-        this._hide();
+    handleSlotChange() {
+        this._updateAnchorAccessibility();
     }
-    onEnterKey() {
-        this.selectItem(this.activeItem);
+    onArrowUp() {
+        this._navigateToActiveItem(getPreviousActiveItem(this.items, this._activeItem));
     }
-    handleClick(event) {
-        const item = event
-            .composedPath()
-            .find((e) => e instanceof IgcDropdownItemComponent);
-        if (!item || item.disabled)
-            return;
-        this.selectItem(item);
+    onArrowDown() {
+        this._navigateToActiveItem(getNextActiveItem(this.items, this._activeItem));
     }
-    handleOpening() {
-        const args = { cancelable: true };
-        return this.emitEvent('igcOpening', args);
+    onHomeKey() {
+        this._navigateToActiveItem(this._activeItems.at(0));
     }
-    handleClosing() {
-        const args = { cancelable: true };
-        return this.emitEvent('igcClosing', args);
+    onEndKey() {
+        this._navigateToActiveItem(this._activeItems.at(-1));
     }
-    handleChange(item) {
-        const args = { detail: item };
-        this.emitEvent('igcChange', args);
+    onTabKey() {
+        if (this._activeItem) {
+            this._selectItem(this._activeItem);
+        }
+        if (this.open) {
+            this._hide(true);
+        }
     }
-    handleSlotChange() {
-        if (!this.target)
-            return;
-        this.target.setAttribute('aria-expanded', this.open ? 'true' : 'false');
+    onEscapeKey() {
+        this._hide(true);
     }
-    handleFocusout(event) {
-        event.preventDefault();
-        event.target.focus();
+    onEnterKey() {
+        this._selectItem(this._activeItem);
     }
-    getItem(value) {
-        let itemIndex = -1;
-        let item;
-        this.allItems.find((i, index) => {
-            if (i.value === value) {
-                item = i;
-                itemIndex = index;
-            }
-        });
-        return { item: item, index: itemIndex };
+    activateItem(item) {
+        if (this._activeItem) {
+            this._activeItem.active = false;
+        }
+        this._activeItem = item;
+        this._activeItem.active = true;
     }
-    activateItem(value) {
-        if (!value)
-            return;
-        if (this.activeItem) {
-            this.activeItem.active = false;
+    _navigateToActiveItem(item) {
+        if (item) {
+            this.activateItem(item);
+            item.scrollIntoView({ behavior: 'auto', block: 'nearest' });
         }
-        this.activeItem = value;
-        this.activeItem.active = true;
-    }
-    selectItem(item, emit = true) {
-        if (!item)
-            return null;
-        if (this.selectedItem) {
-            this.selectedItem.selected = false;
+    }
+    _selectItem(item, emit = true) {
+        if (this._selectedItem) {
+            this._selectedItem.selected = false;
         }
         this.activateItem(item);
-        this.selectedItem = item;
-        this.selectedItem.selected = true;
+        this._selectedItem = item;
+        this._selectedItem.selected = true;
         if (emit)
-            this.handleChange(this.selectedItem);
+            this.handleChange(this._selectedItem);
         if (emit && !this.keepOpenOnSelect)
-            this._hide();
-        return this.selectedItem;
-    }
-    navigate(direction, currentIndex) {
-        var _a;
-        let index = -1;
-        if (this.activeItem) {
-            index = currentIndex
-                ? currentIndex
-                : (_a = [...this.allItems].indexOf(this.activeItem)) !== null && _a !== void 0 ? _a : index;
+            this._hide(true);
+        return this._selectedItem;
+    }
+    _updateAnchorAccessibility(anchor) {
+        const target = anchor ?? this.trigger.assignedElements({ flatten: true }).at(0);
+        if (target) {
+            target.setAttribute('aria-haspopup', 'true');
+            target.setAttribute('aria-expanded', this.open ? 'true' : 'false');
         }
-        const newIndex = this.getNearestSiblingFocusableItemIndex(index, direction);
-        this.navigateItem(newIndex);
     }
-    navigateItem(newIndex) {
-        if (!this.allItems) {
-            return null;
-        }
-        if (newIndex < 0 || newIndex >= this.allItems.length) {
-            return null;
-        }
-        const newItem = this.allItems[newIndex];
-        this.activateItem(newItem);
-        this.scrollToHiddenItem(newItem);
-        return newItem;
-    }
-    scrollToHiddenItem(newItem) {
-        const elementRect = newItem.getBoundingClientRect();
-        const parentRect = this.content.getBoundingClientRect();
-        if (parentRect.top > elementRect.top) {
-            this.content.scrollTop -= parentRect.top - elementRect.top;
-        }
-        if (parentRect.bottom < elementRect.bottom) {
-            this.content.scrollTop += elementRect.bottom - parentRect.bottom;
-        }
+    getItem(value) {
+        return this.items.find((item) => item.value === value);
     }
-    getNearestSiblingFocusableItemIndex(startIndex, direction) {
-        let index = startIndex;
-        const items = this.allItems;
-        if (!items) {
-            return -1;
-        }
-        while (items[index + direction] && items[index + direction].disabled) {
-            index += direction;
-        }
-        index += direction;
-        return index > -1 && index < items.length ? index : -1;
-    }
-    navigateNext() {
-        this.navigate(1);
-    }
-    navigatePrev() {
-        this.navigate(-1);
-    }
-    onArrowDownKeyDown() {
-        this.navigateNext();
-    }
-    onArrowUpKeyDown() {
-        this.navigatePrev();
-    }
-    async _hide(emit = true) {
-        if (!this.open)
-            return;
-        if (emit && !this.handleClosing())
-            return;
-        this.open = false;
-        if (emit) {
-            await this.updateComplete;
-            this.emitEvent('igcClosed');
-        }
+    _setTarget(anchor) {
+        const target = typeof anchor === 'string'
+            ? getElementByIdFromRoot(this, anchor)
+            : anchor;
+        this._target = target;
+        this._targetListeners = this._keyBindings.observeElement(target);
+        this._rootClickController.update({ target });
     }
     show(target) {
-        if (this.open && !target)
-            return;
-        if (target)
-            this.target = target;
-        this.open = true;
-    }
-    hide() {
-        this._hide(false);
+        if (target) {
+            this._setTarget(target);
+        }
+        super.show();
     }
     toggle(target) {
         this.open ? this.hide() : this.show(target);
     }
     navigateTo(value) {
-        const index = typeof value === 'string' ? this.getItem(value).index : value;
-        return this.navigateItem(index);
+        const item = typeof value === 'string' ? this.getItem(value) : this.items[value];
+        if (item) {
+            this._navigateToActiveItem(item);
+        }
+        return item ?? null;
     }
     select(value) {
-        const item = typeof value === 'string'
-            ? this.getItem(value).item
-            : this.allItems[value];
-        return this.selectItem(item, false);
+        const item = typeof value === 'string' ? this.getItem(value) : this.items[value];
+        return item ? this._selectItem(item, false) : null;
     }
     clearSelection() {
-        if (this.selectedItem) {
-            this.selectedItem.selected = false;
+        if (this._selectedItem) {
+            this._selectedItem.selected = false;
         }
-        this.selectedItem = null;
+        this._selectedItem = null;
     }
     render() {
-        return html `
+        return html `<igc-popover
+      ?open=${this.open}
+      ?flip=${this.flip}
+      ?same-width=${this.sameWidth}
+      .anchor=${this._target}
+      .strategy=${this.positionStrategy}
+      .offset=${this.distance}
+      .placement=${this.placement}
+      shift
+    >
       <slot
-        id="igcDDLTarget"
+        id="dropdown-target"
         name="target"
-        @click=${this.handleTargetClick}
+        slot="anchor"
+        @click=${this.handleAnchorClick}
         @slotchange=${this.handleSlotChange}
-      >
-      </slot>
-      <div
-        part="base"
-        style=${styleMap({ position: this.positionStrategy })}
-        @click=${this.handleClick}
-        ${this.toggleController.toggleDirective}
-      >
-        <div role="listbox" part="list" aria-labelledby="igcDDLTarget">
+      ></slot>
+      <div part="base" @click=${this.handleListBoxClick} .inert=${!this.open}>
+        <div
+          id="dropdown-list"
+          role="listbox"
+          part="list"
+          aria-labelledby="dropdown-target"
+        >
           <slot></slot>
         </div>
       </div>
-    `;
+    </igc-popover>`;
     }
 };
 IgcDropdownComponent.tagName = 'igc-dropdown';
 IgcDropdownComponent.styles = styles;
 __decorate([
     state()
-], IgcDropdownComponent.prototype, "activeItem", void 0);
-__decorate([
-    queryAssignedElements({ slot: 'target' })
-], IgcDropdownComponent.prototype, "targetNodes", void 0);
+], IgcDropdownComponent.prototype, "_selectedItem", void 0);
 __decorate([
-    query('[part="base"]')
-], IgcDropdownComponent.prototype, "content", void 0);
-__decorate([
-    query('[part="list"]')
-], IgcDropdownComponent.prototype, "scrollContainer", void 0);
-__decorate([
-    queryAssignedElements({ flatten: true, selector: 'igc-dropdown-item' })
-], IgcDropdownComponent.prototype, "items", void 0);
-__decorate([
-    queryAssignedElements({ flatten: true, selector: 'igc-dropdown-group' })
-], IgcDropdownComponent.prototype, "groups", void 0);
+    state()
+], IgcDropdownComponent.prototype, "_activeItem", void 0);
 __decorate([
-    property({ type: Boolean, attribute: 'keep-open-on-select' })
-], IgcDropdownComponent.prototype, "keepOpenOnSelect", void 0);
+    state()
+], IgcDropdownComponent.prototype, "_target", void 0);
 __decorate([
-    property({ type: Boolean })
-], IgcDropdownComponent.prototype, "open", void 0);
+    query('slot[name="target"]', true)
+], IgcDropdownComponent.prototype, "trigger", void 0);
 __decorate([
     property()
 ], IgcDropdownComponent.prototype, "placement", void 0);
@@ -356,29 +263,16 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], IgcDropdownComponent.prototype, "distance", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'keep-open-on-outside-click' })
-], IgcDropdownComponent.prototype, "keepOpenOnOutsideClick", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'same-width' })
 ], IgcDropdownComponent.prototype, "sameWidth", void 0);
 __decorate([
-    watch('open')
-], IgcDropdownComponent.prototype, "toggleDirectiveChange", null);
-__decorate([
-    watch('placement'),
-    watch('flip'),
-    watch('positionStrategy'),
-    watch('closeOnOutsideClick'),
-    watch('distance'),
-    watch('sameWidth')
-], IgcDropdownComponent.prototype, "updateOptions", null);
+    watch('scrollStrategy', { waitUntilFirstUpdate: true })
+], IgcDropdownComponent.prototype, "scrollStrategyChanged", null);
 __decorate([
-    blazorSuppress()
-], IgcDropdownComponent.prototype, "show", null);
-__decorate([
-    blazorSuppress()
-], IgcDropdownComponent.prototype, "toggle", null);
+    watch('open', { waitUntilFirstUpdate: true }),
+    watch('keepOpenOnOutsideClick', { waitUntilFirstUpdate: true })
+], IgcDropdownComponent.prototype, "openStateChange", null);
 __decorate([
     blazorSuppress()
 ], IgcDropdownComponent.prototype, "navigateTo", null);
@@ -386,8 +280,8 @@ __decorate([
     blazorSuppress()
 ], IgcDropdownComponent.prototype, "select", null);
 IgcDropdownComponent = __decorate([
-    themes({ bootstrap, fluent, indigo, material }),
-    blazorAdditionalDependencies('IgcDropdownItemComponent, IgcDropdownHeaderComponent, IgcDropdownGroupComponent')
+    themes(all),
+    blazorAdditionalDependencies('IgcDropdownItemComponent, IgcDropdownHeaderComponent, IgcDropdownGroupComponent, IgcPopoverComponent')
 ], IgcDropdownComponent);
 export default IgcDropdownComponent;
 //# sourceMappingURL=dropdown.js.map