@xplortech/apollo-core 2.8.1 → 2.10.0

package/dist/collection/components/xpl-choicelist/xpl-choicelist.js

@@ -36,7 +36,7 @@ export class Choicelist {
         this.onChoicesPropChange(this.choices);
     }
     render() {
-        return (h(Host, { key: 'd2da0f5aeb424a36fb117711f34c0631c464ef6a', class: "xpl-choicelist-container" }, this.heading !== undefined || this.description !== undefined ? (h("div", { class: "xpl-choicelist-heading" }, this.heading && h("h3", null, this.heading), this.description && h("p", null, this.description))) : null, this.choices && (h("ul", { key: 'a40e08f0fd60a5268ed9f4d15a97b3fa677e2e46', class: {
+        return (h(Host, { key: 'b2a2b4630df394470daa56346215ad1193727557', class: "xpl-choicelist-container" }, this.heading !== undefined || this.description !== undefined ? (h("div", { class: "xpl-choicelist-heading" }, this.heading && h("h3", null, this.heading), this.description && h("p", null, this.description))) : null, this.choices && (h("ul", { key: 'd2329582e74d40946d23ae522b40130b1d780522', class: {
                 'xpl-choicelist': true,
                 'xpl-choicelist--styled': this.styled,
             } }, this.choices.map((choice, i) => {

package/dist/collection/components/xpl-content-area/xpl-content-area.js

@@ -4,7 +4,7 @@ export class ContentArea {
         this.size = 'wide';
     }
     render() {
-        return (h(Host, { key: '2fe4c1c077c12e47600c737cc9266ae2eff8aaec' }, h("main", { key: '2e6c6f4b83cea96d629bb5af65c4ce6a4d20570e', class: `xpl-content-area-wrapper xpl-content-area-wrapper__${this.size}` }, h("div", { key: '033e707fbc48ae523fafb25dd2952d3de9214908', class: "xpl-content-area" }, h("slot", { key: '04afc15969c2b1fb7e2feb3d8ae46248ee0f6e31' })))));
+        return (h(Host, { key: '9ae6e297af2b7cf5b40ae9848a1479d6e87b6a3e' }, h("main", { key: '2ca4359f4090262b7186689207b4725883e5378e', class: `xpl-content-area-wrapper xpl-content-area-wrapper__${this.size}` }, h("div", { key: '6e4e1e2947eb4e7e8d5d9201b48074cd9cb102ed', class: "xpl-content-area" }, h("slot", { key: 'bf8de84eb947b3ce40fd5df93169f382d3a896cf' })))));
     }
     static get is() { return "xpl-content-area"; }
     static get properties() {

package/dist/collection/components/xpl-dashboard/xpl-dashboard.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class Dashboard {
     render() {
-        return (h(Host, { key: 'ceeb8b27d9537c70e88360de21238c9ce2a3f90b' }, h("dl", { key: '3c4fcb92f472f14885053a1cb1db893618a6d8a8', class: "xpl-dashboard" }, h("slot", { key: 'fe4fa8fdec2ce84bdedc7aa404ab647abd189d11' }))));
+        return (h(Host, { key: 'e3736f9e707de77addac539a4e7f0950133d0e08' }, h("dl", { key: 'de1add10d2f37c0a541d2f60f7156cf920eabd69', class: "xpl-dashboard" }, h("slot", { key: 'acd2becab0a555bf2599d0b2db4ebe0c9d744744' }))));
     }
     static get is() { return "xpl-dashboard"; }
 }

package/dist/collection/components/xpl-data-card/xpl-data-card.js

@@ -31,8 +31,8 @@ export class DataCard {
             : this.smallStatVariant === 'negative'
                 ? 'arrow-down-right'
                 : 'dash';
-        return (h(Host, { key: '917b6ae82a30b849b100e878dc6be08eb4171214', role: "group", class: `xpl-data-card ${this.link ? 'xpl-data-card__link' : ''}`, tabindex: "0" }, h("dt", { key: '21573d19d14f861eea6562529f78e93affc1e5d2', class: headerClasses }, h("header", { key: '1af52bd082f4d12239db85e78eaf74ed2eb7e027' }, !!this.leadingIcon && this.icon && (h("span", { key: 'dfdcc25ae67fdc766ee3075a479fbfeeac2561ab', class: `xpl-data-card__icon--${this.variant}` }, h("xpl-icon", { key: '4072018714c05bd5bae20bfb9e5b6a04561474da', icon: this.icon, "background-color": bgColorHue, size: 20 }))), h("slot", { key: 'f81204887ad6c229cb50e8d3ff654c1aa4703368', name: "title" }, this.name)), this.link && (h("span", { key: '6d8d61f8611fdbc5cd09fc20ba15194e0e1e7b56', class: "xpl-data-card__header-arrow" }, h("xpl-icon", { key: '863e66734bbbd6aa178f140b22f8afb3dd401127', icon: "chevron-right", size: 16 })))), h("dd", { key: '08a5e4af6873c267336f7daff6d3455e75a2883e', class: "xpl-data-card__body" }, h("div", { key: 'ec8ff889fb93d99e7ef51361e041edbaaaf5cd62', class: "xpl-data-card__left" }, h("span", { key: '4787e6aadc3832830fe707ffc08e5614a7abde7b', class: "xpl-data-card-stat xpl-data-card-stat--long" }, this.stat), this.tooltipTextStat ? (h("xpl-tooltip", { text: this.tooltipTextStat }, h("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, this.shortStat ? this.shortStat : this.stat))) : (h("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, h("abbr", { title: this.stat }, this.shortStat ? this.shortStat : this.stat))), this.smallStatVariant ? (this.tooltipTextSmallStat ? (h("xpl-tooltip", { text: this.tooltipTextSmallStat }, h("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, h("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (h("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, h("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (this.smallStatIcon &&
-            (this.tooltipTextSmallStat ? (h("xpl-tooltip", { text: this.tooltipTextSmallStat }, h("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, h("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat))) : (h("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, h("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat)))), !!this.detail && h("span", { key: '2060dba53f12917e37747a6bc52c7f03fe4dadc7', class: "xpl-data-card__detail" }, this.detail)), hasContentSlot && (h("div", { key: '7a091cce8bc0abae2af7b15d6d1a63acd16854c5', class: "xpl-data-card__right" }, h("slot", { key: 'd83790136435a0d5427fd746d2cba5a08cf914eb', name: contentSlot }))))));
+        return (h(Host, { key: '6220a2a6ba1ac0744ba62e701c015964c05bdea9', role: "group", class: `xpl-data-card ${this.link ? 'xpl-data-card__link' : ''}`, tabindex: "0" }, h("dt", { key: '44da16abf81bc72a9c777f19d7c22ab998f55e94', class: headerClasses }, h("header", { key: '4ac3524629d31f3e74a245eef3e4ed6fc3a6832a' }, !!this.leadingIcon && this.icon && (h("span", { key: '53f7476c16eee3432e43a6bdebf744caeb9f9829', class: `xpl-data-card__icon--${this.variant}` }, h("xpl-icon", { key: 'af9ed04389ba00e4d0c79f978c1364a0530b1db7', icon: this.icon, "background-color": bgColorHue, size: 20 }))), h("slot", { key: '164396b94252374a1978cadf336ca74685fe9ba4', name: "title" }, this.name)), this.link && (h("span", { key: '31ce9874f295b1fef5705a28d81365d66a67a18b', class: "xpl-data-card__header-arrow" }, h("xpl-icon", { key: 'f5d169eeb150ed2eaa663ca1388e1075e61f6b7b', icon: "chevron-right", size: 16 })))), h("dd", { key: '59711740ae613b61ab5ae463cbfc2aaed500fdc9', class: "xpl-data-card__body" }, h("div", { key: '35571a65469ba1c413114a50233340057f5df200', class: "xpl-data-card__left" }, h("span", { key: 'b1409661fc43dea4126e423d5dc74fe4b0a5ef5f', class: "xpl-data-card-stat xpl-data-card-stat--long" }, this.stat), this.tooltipTextStat ? (h("xpl-tooltip", { text: this.tooltipTextStat }, h("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, this.shortStat ? this.shortStat : this.stat))) : (h("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, h("abbr", { title: this.stat }, this.shortStat ? this.shortStat : this.stat))), this.smallStatVariant ? (this.tooltipTextSmallStat ? (h("xpl-tooltip", { text: this.tooltipTextSmallStat }, h("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, h("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (h("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, h("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (this.smallStatIcon &&
+            (this.tooltipTextSmallStat ? (h("xpl-tooltip", { text: this.tooltipTextSmallStat }, h("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, h("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat))) : (h("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, h("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat)))), !!this.detail && h("span", { key: '634b386799ed06de06ca212005d20e6f79c54124', class: "xpl-data-card__detail" }, this.detail)), hasContentSlot && (h("div", { key: '9e88749b9c2efd65d22ec92881eaf316103ddb97', class: "xpl-data-card__right" }, h("slot", { key: '467388943d1c8a6bbfb334e6ab763dc7e92e59c8', name: contentSlot }))))));
     }
     static get is() { return "xpl-data-card"; }
     static get properties() {

package/dist/collection/components/xpl-divider/xpl-divider.js

@@ -3,7 +3,7 @@ export class Divider {
     render() {
         let className = 'xpl-divider';
         className += ` xpl-divider--${this.tier}`;
-        return (h(Host, { key: '213dc1893d64e06256ef2958b59b8377428d81d4', class: className }, h("span", { key: '2e03654076b9b76f2ce9e8475bb44068170c8a80' }, h("slot", { key: '5af40b6963beddbd0d1fe5fd05a9e62274ce3418' }))));
+        return (h(Host, { key: '8b6563d7c6c85814d5dc0527246c90eea82c0dbd', class: className }, h("span", { key: '2935de22e9c70183386b5f6e1e18ff6437a42a41' }, h("slot", { key: '10e4e4c5c861647302217f78af0a369ad330c410' }))));
     }
     static get is() { return "xpl-divider"; }
     static get properties() {

package/dist/collection/components/xpl-dropdown/xpl-dropdown-group/xpl-dropdown-group.js

@@ -20,7 +20,7 @@ export class DropdownGroup {
                 var { groupName: optsGroupName } = _a, properties = __rest(_a, ["groupName"]);
                 return optsGroupName ? (h("xpl-dropdown-group", Object.assign({ label: optsGroupName }, properties))) : (h("xpl-dropdown-option", Object.assign({}, properties)));
             });
-        return (h(Host, { key: 'b872cfc0a8eb2e3542f07f6ae17ebc15b6f965ab', role: "group", "aria-label": groupName }, h("li", { key: '8e475e45b5040bd78c7d37f8c58b0689a508f067', class: "xpl-dropdown-list-item" }, h("xpl-dropdown-heading", { key: '3b7b984646bdcc502aca2260a0b59494e0884f6c', label: groupName }), h("ul", { key: 'c75e710ebe06a23aacca57f34ce286516c98a8c5', class: "xpl-dropdown-list" }, mappedOptions || h("slot", { key: '6b72762b22f316561f7614e4841018c019a60681', name: "options" })))));
+        return (h(Host, { key: 'a33169d78e635bb53987322f02869ffc1f1a9908', role: "group", "aria-label": groupName }, h("li", { key: '58a1ff78bb923fec60eb51ef05a2026e03e3058b', class: "xpl-dropdown-list-item" }, h("xpl-dropdown-heading", { key: '6d8556e1d96cbfccd61038e5089e9669917b919e', label: groupName }), h("ul", { key: 'dd485e18b79920d9992e506fe83b36fcadb9e020', class: "xpl-dropdown-list" }, mappedOptions || h("slot", { key: '2eca2f6aa7c44aacdb67c3658029822b4ba1c0aa', name: "options" })))));
     }
     static get is() { return "xpl-dropdown-group"; }
     static get properties() {

package/dist/collection/components/xpl-dropdown/xpl-dropdown-heading/xpl-dropdown-heading.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class DropdownHeading {
     render() {
-        return (h(Host, { key: '70e5556188bd87fe5842256e4e145c3585f73409', class: { 'xpl-dropdown-heading': true }, role: "presentation" }, h("span", { key: '2d45f0191d9b158641da794ee1b9f246f9659717' }, this.label || h("slot", { key: '21cc81673e6a37f4b7ff896d12bd94916c3a92e7', name: "heading" }))));
+        return (h(Host, { key: '9b05e54ae226524434ac8485c51e7fccd4e5fe9e', class: { 'xpl-dropdown-heading': true }, role: "presentation" }, h("span", { key: 'c5ada81fbed76834515cff75f1fd1ce87b2ccbe3' }, this.label || h("slot", { key: 'dfe135bf2499e858e75ab1e87793ae75eb0982c6', name: "heading" }))));
     }
     static get is() { return "xpl-dropdown-heading"; }
     static get properties() {

package/dist/collection/components/xpl-dropdown/xpl-dropdown-option/xpl-dropdown-option.js

@@ -49,11 +49,11 @@ export class DropdownOptionCpnt {
     }
     render() {
         const { label, isSelected, isDisabled, value, subtitle, icon } = this;
-        return (h(Host, { key: '838f64dba15bc8d6c2f65a8685365c5618c24d5f', class: {
+        return (h(Host, { key: '4ff7cc350e34059ad4df757b88112756c7f5b83e', class: {
                 'xpl-dropdown-option': true,
                 'xpl-dropdown-option--disabled': isDisabled,
                 'xpl-dropdown-option--selected': isSelected,
-            }, role: "option", "aria-checked": isSelected, "aria-disabled": isDisabled, "aria-selected": isSelected, value: value }, h("li", { key: 'bc4b23054cd73a95ff5cf167c4195563a9e318ec', class: "xpl-dropdown-list-item" }, icon && (h("xpl-icon", { key: '797d92d1d80cb8c33500d8dfe8b1bf9396c767ca', class: "xpl-dropdown-list-item__icon", icon: icon, size: 20 })), label || h("slot", { key: '7a590a3abae38e7934f703929895be152b01816d', name: "option" }), subtitle && h("span", { key: '465fb73335df17864cd21e067f26cdba85d8135c', class: "xpl-dropdown-list-item__subtitle" }, subtitle))));
+            }, role: "option", "aria-checked": isSelected, "aria-disabled": isDisabled, "aria-selected": isSelected, value: value }, h("li", { key: 'a014d09116703f5477a48cace194ba1beef602d5', class: "xpl-dropdown-list-item" }, icon && (h("xpl-icon", { key: 'af16591b7f1195351facaafa67c07368ce42d072', class: "xpl-dropdown-list-item__icon", icon: icon, size: 20 })), label || h("slot", { key: '72c0dbd67ab7930924cb1ef3ee9f0b4b53cf28a6', name: "option" }), subtitle && h("span", { key: '0893e031740ebdd8fc8ca7de2cb10d0b4d7c95ae', class: "xpl-dropdown-list-item__subtitle" }, subtitle))));
     }
     static get is() { return "xpl-dropdown-option"; }
     static get properties() {

package/dist/collection/components/xpl-dropdown/xpl-dropdown.js

@@ -12,8 +12,25 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { h, Host, } from "@stencil/core";
 import { autoUpdate, computePosition, flip, hide, offset, size, } from "@floating-ui/dom";
+const VIRTUAL_LIST = {
+    rowHeight: 45,
+    overscan: 20,
+    virtualizeFrom: 200,
+};
+function renderOption(option, virtualIndex) {
+    const { groupName, options: opts, subtitle } = option, properties = __rest(option, ["groupName", "options", "subtitle"]);
+    if (groupName) {
+        return (h("xpl-dropdown-group", Object.assign({ groupName: groupName, options: opts }, properties)));
+    }
+    const isVirtual = virtualIndex !== undefined;
+    return (h("xpl-dropdown-option", Object.assign({ class: isVirtual ? 'xpl-dropdown-option--virtual' : undefined, style: isVirtual
+            ? { transform: `translateY(${virtualIndex * VIRTUAL_LIST.rowHeight}px)` }
+            : undefined, subtitle: subtitle }, properties)));
+}
 export class Dropdown {
     constructor() {
+        this.virtualEnd = 0;
+        this.virtualStart = 0;
         this.isOpen = false;
         this.closeOnSelect = true;
         this.mode = 'single';
@@ -21,6 +38,9 @@ export class Dropdown {
         this.placement = 'bottom-start';
         this.selectOnFocus = false;
         this.cleanupAutoUpdate = null;
+        this.virtualScrollRaf = null;
+        this.openAlignmentRaf = null;
+        this.previousOptionCount = 0;
         this.updateDropdownPosition = async (triggerEl) => {
             var _a, _b;
             const { x, y, placement, middlewareData } = await computePosition(triggerEl, this.hostElement, {
@@ -92,6 +112,64 @@ export class Dropdown {
                 this.isOpen = false;
             }
         };
+        this.handleVirtualScroll = () => {
+            if (this.virtualScrollRaf !== null)
+                return;
+            this.virtualScrollRaf = requestAnimationFrame(() => {
+                this.virtualScrollRaf = null;
+                this.updateVirtualRange();
+            });
+        };
+        this.setListEl = (el) => {
+            var _a, _b;
+            if (el === this.listEl)
+                return;
+            this.listEl = el;
+            (_a = this.listResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+            if (el && typeof ResizeObserver !== 'undefined') {
+                (_b = this.listResizeObserver) !== null && _b !== void 0 ? _b : (this.listResizeObserver = new ResizeObserver(() => {
+                    if (this.isVirtualized)
+                        this.handleVirtualScroll();
+                }));
+                this.listResizeObserver.observe(el);
+            }
+        };
+        this.scheduleOpenAlignment = () => {
+            if (this.openAlignmentRaf !== null)
+                return;
+            this.openAlignmentRaf = requestAnimationFrame(() => {
+                this.openAlignmentRaf = null;
+                this.scrollSelectedIntoView();
+                this.updateVirtualRange();
+            });
+        };
+    }
+    onOptionsChanged() {
+        var _a, _b, _c, _d;
+        const total = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+        const listReplaced = total !== this.previousOptionCount;
+        this.previousOptionCount = total;
+        if (!this.isVirtualized) {
+            this.virtualStart = 0;
+            this.virtualEnd = 0;
+            return;
+        }
+        const list = this.listEl;
+        if (list) {
+            const maxScroll = Math.max(0, total * VIRTUAL_LIST.rowHeight - list.clientHeight);
+            if (list.scrollTop > maxScroll) {
+                list.scrollTop = maxScroll;
+            }
+            if (this.isOpen && listReplaced) {
+                const selectedIndex = (_d = (_c = this.options) === null || _c === void 0 ? void 0 : _c.findIndex((option) => option.isSelected)) !== null && _d !== void 0 ? _d : -1;
+                const outOfWindow = selectedIndex >= 0 &&
+                    (selectedIndex < this.virtualStart || selectedIndex >= this.virtualEnd);
+                if (outOfWindow) {
+                    this.scrollSelectedIntoView();
+                }
+            }
+        }
+        this.updateVirtualRange();
     }
     onAnchorToTriggerChanged() {
         if (this.isOpen) {
@@ -115,7 +193,7 @@ export class Dropdown {
     }
     onSelectedValuesChanged(newValues, initialRender = false) {
         if (this.options && this.options.length > 0) {
-            const flatOptions = this.options.reduce((acc, curr) => [...acc, ...(curr.groupName ? curr.options : [curr])], []);
+            const flatOptions = this.options.flatMap((curr) => curr.groupName && curr.options ? curr.options : [curr]);
             flatOptions.forEach((option) => {
                 const optionValue = option.value || option.label;
                 if (this.mode === 'single') {
@@ -140,9 +218,13 @@ export class Dropdown {
         this.isOpenChange.emit(newValue);
         if (newValue) {
             this.startPositioning();
+            this.alignOnOpen();
         }
         else {
             this.stopPositioning();
+            this.cancelVirtualScroll();
+            this.virtualStart = 0;
+            this.virtualEnd = 0;
         }
     }
     connectedCallback() {
@@ -150,44 +232,68 @@ export class Dropdown {
         document.addEventListener('keydown', this.handleKeyDown);
     }
     disconnectedCallback() {
+        var _a;
         document.removeEventListener('mousedown', this.handleClickOutside);
         document.removeEventListener('keydown', this.handleKeyDown);
         this.stopPositioning();
+        this.cancelVirtualScroll();
+        (_a = this.listResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     componentWillLoad() {
+        var _a, _b;
         this.handleSelect = this.handleSelect.bind(this);
         if (this.selectedValues) {
             this.onSelectedValuesChanged(this.selectedValues, true);
         }
+        this.previousOptionCount = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
     }
     componentDidLoad() {
-        if (this.isOpen)
+        if (this.isOpen) {
             this.startPositioning();
+            this.alignOnOpen();
+        }
     }
     async handleSelect(e, { component }) {
         const { hostElement, mode, options, update } = this;
         const isSingle = mode === 'single';
         const isMulti = mode === 'multi';
         if (options) {
-            options
-                .reduce((acc, curr) => [...acc, ...(curr.groupName ? curr.options : [curr])], [])
-                .forEach((option) => {
-                const isMatch = (option.value || option.label) ===
-                    (component.hostElement.value || component.hostElement.label);
-                if (isSingle) {
-                    option.isSelected = isMatch;
-                    component.hostElement.isSelected = true;
-                }
-                else if (isMulti && isMatch) {
-                    option.isSelected = !option.isSelected;
-                    component.hostElement.isSelected = option.isSelected;
-                }
-            });
-            const mapOptions = (option) => {
-                option.options = option.groupName ? option.options.map(mapOptions) : undefined;
-                return option;
-            };
-            this.options = options.map(mapOptions);
+            const targetValue = component.hostElement.value || component.hostElement.label;
+            const hasGroups = options.some((option) => option.groupName);
+            if (!hasGroups) {
+                options.forEach((option) => {
+                    const isMatch = (option.value || option.label) === targetValue;
+                    if (isSingle) {
+                        option.isSelected = isMatch;
+                        if (isMatch)
+                            component.hostElement.isSelected = true;
+                    }
+                    else if (isMulti && isMatch) {
+                        option.isSelected = !option.isSelected;
+                        component.hostElement.isSelected = option.isSelected;
+                    }
+                });
+                this.options = [...options];
+            }
+            else {
+                const flatOptions = options.flatMap((curr) => curr.groupName && curr.options ? curr.options : [curr]);
+                flatOptions.forEach((option) => {
+                    const isMatch = (option.value || option.label) === targetValue;
+                    if (isSingle) {
+                        option.isSelected = isMatch;
+                        component.hostElement.isSelected = true;
+                    }
+                    else if (isMulti && isMatch) {
+                        option.isSelected = !option.isSelected;
+                        component.hostElement.isSelected = option.isSelected;
+                    }
+                });
+                const mapOptions = (option) => {
+                    option.options = option.groupName ? option.options.map(mapOptions) : undefined;
+                    return option;
+                };
+                this.options = options.map(mapOptions);
+            }
         }
         else if (isSingle) {
             const optionNodes = Array.from(hostElement.querySelectorAll('xpl-dropdown-option'));
@@ -226,21 +332,83 @@ export class Dropdown {
             .querySelector('.xpl-dropdown-list')) === null || _a === void 0 ? void 0 : _a.style.removeProperty('max-height');
         this.hostElement.classList.remove('xpl-dropdown--above', 'xpl-dropdown--below');
     }
+    cancelVirtualScroll() {
+        if (this.virtualScrollRaf !== null) {
+            cancelAnimationFrame(this.virtualScrollRaf);
+            this.virtualScrollRaf = null;
+        }
+        if (this.openAlignmentRaf !== null) {
+            cancelAnimationFrame(this.openAlignmentRaf);
+            this.openAlignmentRaf = null;
+        }
+    }
+    alignOnOpen() {
+        this.scrollSelectedIntoView();
+        this.updateVirtualRange();
+        this.scheduleOpenAlignment();
+    }
+    scrollSelectedIntoView() {
+        const { listEl: list, options } = this;
+        if (!list || !(options === null || options === void 0 ? void 0 : options.length) || !this.isVirtualized)
+            return;
+        const selectedIndex = options.findIndex((option) => option.isSelected);
+        if (selectedIndex < 0)
+            return;
+        const { rowHeight } = VIRTUAL_LIST;
+        const centered = selectedIndex * rowHeight - (list.clientHeight - rowHeight) / 2;
+        const maxScroll = Math.max(0, options.length * rowHeight - list.clientHeight);
+        list.scrollTop = Math.max(0, Math.min(centered, maxScroll));
+    }
+    updateVirtualRange() {
+        var _a, _b;
+        const list = this.listEl;
+        const total = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+        if (!list || !total)
+            return;
+        const { rowHeight, overscan } = VIRTUAL_LIST;
+        const firstVisible = Math.floor(list.scrollTop / rowHeight);
+        const visibleCount = Math.ceil(list.clientHeight / rowHeight) || 1;
+        const start = Math.max(0, firstVisible - overscan);
+        const end = Math.min(total, firstVisible + visibleCount + overscan);
+        if (start !== this.virtualStart || end !== this.virtualEnd) {
+            this.virtualStart = start;
+            this.virtualEnd = end;
+        }
+    }
+    get isVirtualized() {
+        const { options } = this;
+        return (!!options &&
+            options.length > VIRTUAL_LIST.virtualizeFrom &&
+            options.every((option) => !option.groupName && !option.subtitle));
+    }
     render() {
-        const { isOpen } = this;
-        const { mode, options } = this;
-        const hasOptions = options && options.length;
-        const mappedOptions = hasOptions &&
-            options.map((_a) => {
-                var { groupName, options: opts, subtitle } = _a, properties = __rest(_a, ["groupName", "options", "subtitle"]);
-                return groupName ? (h("xpl-dropdown-group", Object.assign({ groupName: groupName, options: opts }, properties))) : (h("xpl-dropdown-option", Object.assign({ subtitle: subtitle }, properties)));
-            });
-        return (h(Host, { key: '1ef465611f9a8501af41c17523352714a7921f29', "aria-expanded": isOpen ? 'true' : 'false', class: {
+        const { isOpen, mode, options } = this;
+        const hasOptions = !!(options && options.length);
+        const shouldVirtualize = this.isVirtualized;
+        let listContent;
+        if (!hasOptions) {
+            listContent = h("slot", { key: '859e13193ab2db2f10197aaf8b9699a177d480c6', name: "options" });
+        }
+        else if (shouldVirtualize) {
+            const { rowHeight, overscan } = VIRTUAL_LIST;
+            const total = options.length;
+            const start = Math.min(this.virtualStart, total);
+            const fallbackEnd = Math.min(total, Math.ceil(300 / rowHeight) + overscan * 2);
+            const end = this.virtualEnd > start ? this.virtualEnd : fallbackEnd;
+            listContent = (h("li", { key: '2e197eebf453591ec714ebbc60a6c8ba57646cb9', class: "xpl-dropdown__virtual-sizer", style: { height: `${total * rowHeight}px` } }, options.slice(start, end).map((option, i) => renderOption(option, start + i))));
+        }
+        else {
+            listContent = options.map((option) => renderOption(option));
+        }
+        return (h(Host, { key: '0ffdb0e5d1dc13c83b692244f8e5e65f70c9c745', "aria-expanded": isOpen ? 'true' : 'false', class: {
                 'xpl-dropdown': true,
                 'xpl-dropdown--multi': mode === 'multi',
                 'xpl-dropdown--open': isOpen,
                 'xpl-dropdown--anchor-to-trigger': this.anchorToTrigger,
-            }, role: "listbox" }, h("slot", { key: '118c8b34e72aa6ab018e6fa9ff29a18ae540b89e', name: "header" }), h("ul", { key: '01544e6aa8d785c48b4f677de102efe4ecc7b53a', class: "xpl-dropdown-list" }, mappedOptions || h("slot", { key: 'f70619995bed02540cef11deaeb6c3e5704165ff', name: "options" }))));
+                'xpl-dropdown--virtualized': shouldVirtualize,
+            }, role: "listbox" }, h("slot", { key: 'ff204bc8c903a5d0a47b95521781df2467c9b4a7', name: "header" }), h("ul", { key: '2685e64254a9424f9da75787c3d18ff182e9f7a1', class: "xpl-dropdown-list", ref: (el) => {
+                this.setListEl(el);
+            }, onScroll: shouldVirtualize ? this.handleVirtualScroll : undefined }, listContent)));
     }
     static get is() { return "xpl-dropdown"; }
     static get properties() {
@@ -482,6 +650,12 @@ export class Dropdown {
             }
         };
     }
+    static get states() {
+        return {
+            "virtualEnd": {},
+            "virtualStart": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "isOpenChange",
@@ -542,6 +716,9 @@ export class Dropdown {
     static get elementRef() { return "hostElement"; }
     static get watchers() {
         return [{
+                "propName": "options",
+                "methodName": "onOptionsChanged"
+            }, {
                 "propName": "anchorToTrigger",
                 "methodName": "onAnchorToTriggerChanged"
             }, {

package/dist/collection/components/xpl-dynamic-table/xpl-dynamic-table.js

@@ -51,7 +51,7 @@ export class DynamicTable {
         this.updateColumnCount();
     }
     render() {
-        return (h("div", { key: '8f33da5fa8815400447b1690172bdaddd1079c1a', role: "grid", class: "xpl-dynamic-table", "aria-colcount": this.colCount }, h("slot", { key: '221aced83acf1fc4c904533eaedb1cd79914c5d3', name: "header" }), h("slot", { key: '6087119ce1499e94a30d09a1917d9371331f6add', name: "body" })));
+        return (h("div", { key: '3d5c3e5aea065c98323fbdbf17392af63975c9dd', role: "grid", class: "xpl-dynamic-table", "aria-colcount": this.colCount }, h("slot", { key: 'f6076fef5e85fdf22b03e532e920396ce5f6ce63', name: "header" }), h("slot", { key: '3b94b04b8f6b7a1cca9277161c0c32b117ce315f', name: "body" })));
     }
     static get is() { return "xpl-dynamic-table"; }
     static get states() {

package/dist/collection/components/xpl-dynamic-table-cell/xpl-dynamic-table-cell.js

@@ -19,9 +19,9 @@ export class DynamicTableCell {
     }
     render() {
         const colIndex = Array.from(this.el.parentElement.children).indexOf(this.el) + 1;
-        return (h(Host, { key: '7cfa2d58f634e41ccf1604a581fcc83a2b51676f', role: "gridcell", "aria-colindex": colIndex, class: "xpl-dynamic-table-cell", ref: (el) => {
+        return (h(Host, { key: 'e6e9a3695c9d8ca3743b188284bc8e69f50f3397', role: "gridcell", "aria-colindex": colIndex, class: "xpl-dynamic-table-cell", ref: (el) => {
                 this.hostElement = el;
-            } }, h("slot", { key: 'c6a04082cb8aa1089d9f6cb82f3db8d7f0addf6e' })));
+            } }, h("slot", { key: 'abfa632a3ac88d663acaaacbc431d07c9da4b375' })));
     }
     static get is() { return "xpl-dynamic-table-cell"; }
     static get properties() {

package/dist/collection/components/xpl-dynamic-table-row/xpl-dynamic-table-row.js

@@ -24,9 +24,9 @@ export class DynamicTableRow {
         const classList = `xpl-dynamic-table-row
             ${this.isDisabled ? 'disabled' : ''}
             ${this.selected ? 'selected' : ''}`;
-        return (h(Host, { key: '0d099456d2016263a2bdcd42b46794e08adb64cf', role: "row", class: classList, ref: (el) => {
+        return (h(Host, { key: 'e070f32db6cee0bcbf0dd84e41e13e6d3b88e8a1', role: "row", class: classList, ref: (el) => {
                 this.hostElement = el;
-            } }, h("slot", { key: 'c923f7f8dc4bb8a4527693259d1a8b5932bb6c10' })));
+            } }, h("slot", { key: '78ea8e02e97e0017dc4aa35af4883446d4e4c4bf' })));
     }
     static get is() { return "xpl-dynamic-table-row"; }
     static get properties() {

package/dist/collection/components/xpl-grid/xpl-grid.js

@@ -22,7 +22,7 @@ export class Grid {
         });
     }
     render() {
-        return h(Host, { key: 'aeee950fb242a14f50ceda1d199cf427597b70f6', class: "xpl-grid" });
+        return h(Host, { key: '0036b594c89e75a9b302e7a7d9c99d4703a8b729', class: "xpl-grid" });
     }
     static get is() { return "xpl-grid"; }
     static get elementRef() { return "container"; }

package/dist/collection/components/xpl-grid-item/xpl-grid-item.js

@@ -12,7 +12,7 @@ export class GridItem {
         className += ` xpl-grid-item-sm-${this.sm}`;
         className += ` xpl-grid-item-md-${this.md}`;
         className += ` xpl-grid-item-lg-${this.lg}`;
-        return (h(Host, { key: '43cf6dd21d3d06e2d8012b716e5db5aeee676aac', class: className }, h("slot", { key: 'e08e03e4152007df7158d7122f883da1050dfde7' })));
+        return (h(Host, { key: 'bb28d83b6fd6ee92390ffcb5a505f5084f5624b9', class: className }, h("slot", { key: 'db3cf487db67044879425c830a14a44e06d19414' })));
     }
     static get is() { return "xpl-grid-item"; }
     static get properties() {

package/dist/collection/components/xpl-header-accordion/xpl-header-accordion.js

@@ -68,7 +68,7 @@ export class HeaderAccordion {
         this.applyBorderRadiusToLastRow();
     }
     render() {
-        return (h(Host, { key: '33b59f238ef5eabce7a83dec5e189459038ac2e0', class: "xpl-header-accordion" }, h("div", { key: '1269fe93be898a0300a1c840ad8919608c86bbff', class: `header-accordion header-accordion--${this.expanded ? 'expanded' : 'collapsed'}` }, this.hasCheckbox && (h("xpl-checkbox", { key: '16a93cbaab64072990502ed7d1bc2a496ad31425', class: "xpl-header-accordion__parent-checkbox", checked: this.parentChecked, disabled: this.disabled, indeterminate: this.parentIndeterminate, onCheckboxChange: (event) => this.handleParentCheckboxChange(event.detail) })), h("button", { key: '00e7024adcd3c8cef52cc5d11be8e4dc6319c1a8', "aria-expanded": this.expanded, "aria-controls": this.contentId, class: "toggle-area", onClick: this.toggleAccordion, type: "button" }, h("slot", { key: '16fc847fff7d27f73c589bff9670fdbdec9f58cc', name: "title" }), h("xpl-icon", { key: '44e27d19feb130c0903949d24a9c71f19f8475b6', size: 16, icon: "chevron-down", class: this.expanded && 'rotate' }))), h("div", { key: 'aa8bd514da7666ed09c72c5b271ea0eeda729ef8', id: this.contentId, role: "region", class: !this.expanded ? 'content--hidden' : 'content--shown' }, h("slot", { key: 'b8adf0af8ea58edad1036fc45277ef6621bc8fbb', name: "content" }))));
+        return (h(Host, { key: 'ec426d05bbf030c8e782e7e74fda505bc8b9011a', class: "xpl-header-accordion" }, h("div", { key: 'b9da9063757f65ab682f542dd138f3f8f8dc471f', class: `header-accordion header-accordion--${this.expanded ? 'expanded' : 'collapsed'}` }, this.hasCheckbox && (h("xpl-checkbox", { key: '8b97b3e36f49549dcd18978628bfde93f75a084e', class: "xpl-header-accordion__parent-checkbox", checked: this.parentChecked, disabled: this.disabled, indeterminate: this.parentIndeterminate, onCheckboxChange: (event) => this.handleParentCheckboxChange(event.detail) })), h("button", { key: '7bdf4043d478bb1c04f44de14717ac3753236e1a', "aria-expanded": this.expanded, "aria-controls": this.contentId, class: "toggle-area", onClick: this.toggleAccordion, type: "button" }, h("slot", { key: '0a6197fd9b5dabff14f1da4137d8a99c7a4cbc93', name: "title" }), h("xpl-icon", { key: '5a74ba13feb88a46df377f255eb134d5b609be53', size: 16, icon: "chevron-down", class: this.expanded && 'rotate' }))), h("div", { key: '8d048d3480f0185ed34440c3e6d84befb3cf4dee', id: this.contentId, role: "region", class: !this.expanded ? 'content--hidden' : 'content--shown' }, h("slot", { key: 'fa374cd9feba5ef3eb72d50f027651dc84f80ec8', name: "content" }))));
     }
     static get is() { return "xpl-header-accordion"; }
     static get properties() {

package/dist/collection/components/xpl-icon/xpl-icon.js

@@ -16,10 +16,10 @@ export class Icon {
         let wrapperClasses = 'xpl-icon__wrapper ';
         if (this.backgroundColor)
             wrapperClasses += `xpl-icon__wrapper--with-background xpl-icon__wrapper--with-background--${this.backgroundColor}`;
-        return (h(Host, { key: '07522771501e6e67b0ae91bbee9cc8699d79fb8b' }, h("figure", { key: '2acf41e3e20ff3998050c948fcae5d0990cb706a', class: wrapperClasses }, h("span", { key: '560b2e62366ee0842442c29280a7e37b53edf2be', "aria-label": this.icon, role: "img", class: "xpl-icon", style: {
+        return (h(Host, { key: 'cf84ae3e7ff4ae0b4ae8e1b1cf3b9331bc887c6c' }, h("figure", { key: '74e2727f9bf4ff8d710eff9b99632ffa669b84ae', class: wrapperClasses }, h("span", { key: '2d8be2bd318bd27e0bc4299cfe518668e424fffe', "aria-label": this.icon, role: "img", class: "xpl-icon", style: {
                 width: `${options.width}px`,
                 height: `${options.height}px`,
-            }, innerHTML: (_a = apolloIcons.getIcon(this.icon)) === null || _a === void 0 ? void 0 : _a.toSVG(options) }), h("figcaption", { key: '256c0d05be8026b24a139f8bfff4f00c65112030' }, this.icon, " icon"))));
+            }, innerHTML: (_a = apolloIcons.getIcon(this.icon)) === null || _a === void 0 ? void 0 : _a.toSVG(options) }), h("figcaption", { key: '3c7a383da59ac0766500273799b203a28c7c7ff3' }, this.icon, " icon"))));
     }
     static get is() { return "xpl-icon"; }
     static get originalStyleUrls() {

package/dist/collection/components/xpl-input/input.stories.js

@@ -244,7 +244,7 @@ Datepicker.args = {
     errorMessage: '',
     min: '01/01/2000',
     max: '12/31/2099',
-    required: true,
+    required: false,
     type: 'date',
 };
 Datepicker.parameters = {

package/dist/collection/components/xpl-input/xpl-input-color/xpl-input-color.js

@@ -61,7 +61,7 @@ export class InputColor {
         };
         this.onHexInputChange = (event) => {
             var _a;
-            const hex = event.detail;
+            const hex = event.detail ? event.detail.trim().replace(/#/g, '') : '';
             if (hex) {
                 const [r, g, b] = hexToRgb(hex);
                 this.colorValues = {
@@ -162,10 +162,12 @@ export class InputColor {
         const { r, g, b, a, hue, alpha, hex } = this.colorInputElements;
         hex.addEventListener('valueChange', (e) => {
             this.onHexInputChange(e);
+            e.stopPropagation();
         });
         [r, g, b, a].forEach((el) => {
             el.addEventListener('valueChange', (e) => {
                 this.onRgbaInputChange(el, e);
+                e.stopPropagation();
             });
         });
         [hue, alpha].forEach((el) => {
@@ -193,16 +195,16 @@ export class InputColor {
             top: `${y}px`,
             background: `rgb(${r}, ${g}, ${b})`,
         };
-        return (h(Host, { key: 'f665a747f8938212d0c9ada4f251a9fc880ba82c', class: "xpl-input-color" }, h("xpl-popover", { key: 'eac77d1e9f350b3b0dd66001a7a596d156a75a53', disabled: this.disabled, display: "menu" }, h("div", { key: '73d1468c4261fd9a8e957189129cc660757d849f', slot: "trigger" }, h("div", { key: 'fa098788863247a7c87e4efe628b5b47f0bb3113', class: {
+        return (h(Host, { key: 'eb7a6f1f77a5d184c05a7825f9f20829b8112d49', class: "xpl-input-color" }, h("xpl-popover", { key: '5f1588d21649cbbdfcadb0ab2bd46f848c7fc2d8', disabled: this.disabled, display: "menu" }, h("div", { key: 'cecec4d250e2c3b26fc364436f2d16fb97162dff', slot: "trigger" }, h("div", { key: '02a4945abec58618cb116eb04bca1c4672f16a4f', class: {
                 'xpl-input-color__display': true,
                 'xpl-input-color__display--disabled': this.disabled,
                 'xpl-input-color__display--error': !!this.hasErrorState,
-            } }, h("span", { key: 'd471146ff3ba7b026dba1424599361d0aa0fe49c', class: "xpl-input-color__color", style: {
+            } }, h("span", { key: '622be07c8fe6de7c5d714a8961146ff53160247d', class: "xpl-input-color__color", style: {
                 background: objectToStringColor(this.colorValues),
-            } }), this.colorValues.hex ? (h("span", { class: "xpl-input-color__value" }, objectToStringColor(this.colorValues))) : (h("span", { class: "xpl-input-color__placeholder" }, this.placeholder)), this.eyeDropperSupported && !this.hideEyeDropper && (h("xpl-icon", { key: '5cd87456ef093611b6be8906c24b235ea7f19524', size: 20, icon: "eye-dropper", class: "xpl-input-color__icon", onClick: (e) => {
+            } }), this.colorValues.hex ? (h("span", { class: "xpl-input-color__value" }, objectToStringColor(this.colorValues))) : (h("span", { class: "xpl-input-color__placeholder" }, this.placeholder)), this.eyeDropperSupported && !this.hideEyeDropper && (h("xpl-icon", { key: 'fd14c6b7aad4e33977008cf11b5cbff2352aab80', size: 20, icon: "eye-dropper", class: "xpl-input-color__icon", onClick: (e) => {
                 e.stopPropagation();
                 this.openEyeDropper();
-            } })))), h("div", { key: 'df7bdf567c9a697f8a5e737e5a8cb1b1b962dbb9', class: "xpl-input-color__menu" }, h("div", { key: 'ae630752b48e9d211273da6f3dadda8ace603ba2', class: "xpl-input-color__sl-grid", ref: (el) => {
+            } })))), h("div", { key: 'ad85b32a641a3bf0face2efa81fe14de17777fdf', class: "xpl-input-color__menu" }, h("div", { key: 'caaee0b4bf18c0c3dbc72745167df475b0cc91cc', class: "xpl-input-color__sl-grid", ref: (el) => {
                 this.colorInputElements.slGrid = el;
             }, style: {
                 background: [
@@ -210,9 +212,9 @@ export class InputColor {
                     `linear-gradient(to right, #fff, #fff0)`,
                     `rgb(${hueBaseColor.r} ${hueBaseColor.g} ${hueBaseColor.b})`,
                 ].join(', '),
-            }, onMouseDown: this.startDrag, onTouchStart: this.startDrag }, h("div", { key: '25ffc6bb94f0e861a3bc5a6da5c01e0901d1779e', class: "xpl-input-color__sl-thumb", style: slThumbStyle })), h("div", { key: '7d256baab084f96c56724b4eede835a13bee7055', class: "xpl-input-color__grid" }, h("input", { key: '227309d4590722c24c2d053c013a6d473e44a3ee', type: "range", min: "0", max: "360", value: this.hue, class: "xpl-input-color__slider xpl-input-color__hue", name: "color-hue-slider", ref: (el) => {
+            }, onMouseDown: this.startDrag, onTouchStart: this.startDrag }, h("div", { key: '34867bf1cbca3e4d56552e02ba99a112c061be64', class: "xpl-input-color__sl-thumb", style: slThumbStyle })), h("div", { key: '3070aa4d152d18944a7942dc7298538be432fb2c', class: "xpl-input-color__grid" }, h("input", { key: '557445a1167af6ebfb786fbe390b63167ac0c2bf', type: "range", min: "0", max: "360", value: this.hue, class: "xpl-input-color__slider xpl-input-color__hue", name: "color-hue-slider", ref: (el) => {
                 this.colorInputElements.hue = el;
-            } }), h("input", { key: '2d43e7c9f98fd5cdcccde7206c0cf4e5ae6bde6d', type: "range", min: "0", max: "1", step: "0.01", value: a, class: "xpl-input-color__slider xpl-input-color__alpha", name: "color-alpha-slider", ref: (el) => {
+            } }), h("input", { key: '86cabdd053207c6073592b46a85fe74ca74942fb', type: "range", min: "0", max: "1", step: "0.01", value: a, class: "xpl-input-color__slider xpl-input-color__alpha", name: "color-alpha-slider", ref: (el) => {
                 this.colorInputElements.alpha = el;
             }, style: {
                 backgroundImage: [
@@ -222,9 +224,9 @@ export class InputColor {
                     `linear-gradient(45deg, transparent 75%, #ccc 75%)`,
                     `linear-gradient(-45deg, transparent 75%, #ccc 75%)`,
                 ].join(', '),
-            } }), h("div", { key: '26a562a220b2458e0ee99906d27d8a11e38f2d02', class: "xpl-input-color__preview", style: {
+            } }), h("div", { key: 'bb9ee49e36d78441380248bdb021443f9abbb250', class: "xpl-input-color__preview", style: {
                 background: `rgba(${r}, ${g}, ${b}, ${a})`,
-            } })), h("div", { key: 'a77a7325f72ef73e6aa2d6968ae4afd1e010cf2c', class: "xpl-input-color__inputs" }, Object.entries(this.colorInputElements)
+            } })), h("div", { key: '08bc820781d2de091036289b50f9f5f3810db61b', class: "xpl-input-color__inputs" }, Object.entries(this.colorInputElements)
             .filter(([key]) => ['hex', 'r', 'g', 'b', 'a'].includes(key))
             .map(([key]) => (h("xpl-input", { key: key, label: key.toLocaleUpperCase(), name: `color-${key}-input`, placeholder: key === 'hex' ? '793EF7' : '0', value: this.colorValues[key], ref: (elRef) => {
                 this.colorInputElements[key] = elRef;