npm - @shoper/phoenix_design_system - Versions diffs - 1.18.12-0 → 1.18.12-2 - Mend

@shoper/phoenix_design_system 1.18.12-0 → 1.18.12-2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/build/cjs/packages/phoenix/src/components/accordion/accordion_content.js CHANGED Viewed

@@ -18,23 +18,9 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
     constructor() {
         super();
         this.transitionName = 'accordion-toggle';
-        this.isDevAccordionOptimizationFlagEnabled = false;
-        this._resizeObserver = null;
-        this._isTransitioning = false;
         this._resizeDebounceTimer = null;
         this._mutationDebounceTimer = null;
         this._mutationObserver = null;
-        this._handleResizeObserver = () => {
-            if (this._isTransitioning || this.hidden || this.style.height === '0px')
-                return;
-            this._setOriginalHeightValue(this.scrollHeight);
-        };
-        this._updateOriginalHeight = () => {
-            const previousDisplay = this.style.display;
-            this.style.setProperty('display', 'block', 'important');
-            this._setOriginalHeightValue(this.scrollHeight);
-            this.style.display = previousDisplay;
-        };
         this._handleResize = () => {
             if (this._resizeDebounceTimer !== null) {
                 window.cancelAnimationFrame(this._resizeDebounceTimer);
@@ -51,17 +37,12 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
                 this.style.setProperty('display', 'block', 'important');
                 this.style.height = 'auto';
                 requestAnimationFrame(() => {
-                    this._setOriginalHeightValue(this.getBoundingClientRect().height);
+                    this._setOriginalHeightValue();
                     this.style.display = previousDisplay;
                     this.style.height = this.hidden ? '0px' : this._originalHeight;
                 });
             });
         };
-        this._setOriginalHeightValue = (height) => {
-            if (height !== 0 || this.children.length === 0) {
-                this._originalHeight = `${height}px`;
-            }
-        };
         this._handleMutation = () => {
             if (this._mutationDebounceTimer !== null) {
                 window.clearTimeout(this._mutationDebounceTimer);
@@ -70,7 +51,7 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
                 requestAnimationFrame(() => {
                     this.style.height = 'auto';
                     requestAnimationFrame(() => {
-                        this._setOriginalHeightValue(this.getBoundingClientRect().height);
+                        this._setOriginalHeightValue();
                         if (this.hidden) {
                             this.style.height = '0px';
                         }
@@ -81,43 +62,31 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
                 });
             }, MUTATION_DEBOUNCE_MS);
         };
-        this._expand = () => {
-            if (this.isDevAccordionOptimizationFlagEnabled) {
-                this._setOriginalHeightValue(this.scrollHeight);
-                this._isTransitioning = true;
+        this._setOriginalHeightValue = () => {
+            const newHeight = this.getBoundingClientRect().height;
+            if (newHeight !== 0 || this.children.length === 0) {
+                this._originalHeight = `${newHeight}px`;
             }
+        };
+        this._expand = () => {
             this._setHeight(this._originalHeight);
         };
         this._handleTransitionEnd = (e) => {
             if (e.propertyName !== 'height' || e.target !== this) {
                 return;
             }
-            if (this.isDevAccordionOptimizationFlagEnabled) {
-                this._isTransitioning = false;
-            }
             if (!this.hidden && this.style.height !== '0px') {
                 this.style.height = 'auto';
             }
         };
         this._collapse = () => {
-            if (this.isDevAccordionOptimizationFlagEnabled) {
-                this._isTransitioning = true;
-            }
             const currentHeight = this.getBoundingClientRect().height;
             this._setHeight(`${currentHeight}px`);
-            if (this.isDevAccordionOptimizationFlagEnabled) {
-                void this.offsetHeight;
+            requestAnimationFrame(() => {
                 requestAnimationFrame(() => {
                     this._setHeight('0px');
                 });
-            }
-            else {
-                requestAnimationFrame(() => {
-                    requestAnimationFrame(() => {
-                        this._setHeight('0px');
-                    });
-                });
-            }
+            });
         };
         this.setAttribute('role', 'region');
         this._boundHandleTransitionEnd = this._handleTransitionEnd.bind(this);
@@ -127,24 +96,12 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
         this._contextConsumer = new context_consumer_controller.ContextConsumerController(this);
         this._transitionController = new transition_controller.TransitionController(this, this.transitionName);
         this._subscribeObserver();
-        if (this.isDevAccordionOptimizationFlagEnabled) {
-            this._resizeObserver = new ResizeObserver(this._handleResizeObserver);
-            this._resizeObserver.observe(this);
-        }
-        else {
-            window.addEventListener('resize', this._handleResize, { passive: true });
-        }
+        window.addEventListener('resize', this._handleResize, { passive: true });
         this.addEventListener('transitionend', this._boundHandleTransitionEnd);
     }
     firstUpdated(props) {
         super.firstUpdated(props);
-        if (this.isDevAccordionOptimizationFlagEnabled) {
-            this._updateOriginalHeight();
-            this.style.height = this.hidden ? '0px' : this._originalHeight;
-        }
-        else {
-            this._setStylingOptions();
-        }
+        this._setStylingOptions();
     }
     async _subscribeObserver() {
         this._accordionGroupProps = await this._contextConsumer.consumeAsync(accordion_constants.ACCORDION_CONTEXTS.accordionGroupProps);
@@ -153,10 +110,8 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
             accordionProps.opened ? this._transitionController.show(this._expand) : this._transitionController.hide(this._collapse);
         });
         this._accordionGroupProps.subscribe(this._accordionGroupPropsObserver);
-        if (!this.isDevAccordionOptimizationFlagEnabled) {
-            this._mutationObserver = new MutationObserver(this._handleMutation);
-            this._mutationObserver.observe(this, { childList: true, subtree: true });
-        }
+        this._mutationObserver = new MutationObserver(this._handleMutation);
+        this._mutationObserver.observe(this, { childList: true, subtree: true });
     }
     _setHeight(height) {
         this.style.height = height;
@@ -166,33 +121,24 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
         this.setAttribute('labelledby', regionId);
     }
     disconnectedCallback() {
-        var _a, _b, _c;
+        var _a, _b;
         super.disconnectedCallback();
         (_a = this._accordionGroupProps) === null || _a === void 0 ? void 0 : _a.unsubscribe(this._accordionGroupPropsObserver);
-        if (this.isDevAccordionOptimizationFlagEnabled) {
-            (_b = this._resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+        (_b = this._mutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+        window.removeEventListener('resize', this._handleResize);
+        this.removeEventListener('transitionend', this._boundHandleTransitionEnd);
+        if (this._resizeDebounceTimer !== null) {
+            window.cancelAnimationFrame(this._resizeDebounceTimer);
         }
-        else {
-            (_c = this._mutationObserver) === null || _c === void 0 ? void 0 : _c.disconnect();
-            window.removeEventListener('resize', this._handleResize);
-            if (this._resizeDebounceTimer !== null) {
-                window.cancelAnimationFrame(this._resizeDebounceTimer);
-            }
-            if (this._mutationDebounceTimer !== null) {
-                window.clearTimeout(this._mutationDebounceTimer);
-            }
+        if (this._mutationDebounceTimer !== null) {
+            window.clearTimeout(this._mutationDebounceTimer);
         }
-        this.removeEventListener('transitionend', this._boundHandleTransitionEnd);
     }
 };
 tslib_es6.__decorate([
     decorators.property(),
     tslib_es6.__metadata("design:type", Object)
 ], exports.HAccordionContent.prototype, "transitionName", void 0);
-tslib_es6.__decorate([
-    decorators.property({ type: Boolean, attribute: 'is-dev-accordion-optimization-flag-enabled' }),
-    tslib_es6.__metadata("design:type", Boolean)
-], exports.HAccordionContent.prototype, "isDevAccordionOptimizationFlagEnabled", void 0);
 exports.HAccordionContent = tslib_es6.__decorate([
     phoenix_custom_element.phoenixCustomElement('h-accordion-content'),
     tslib_es6.__metadata("design:paramtypes", [])

package/build/cjs/packages/phoenix/src/components/accordion/accordion_content.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1	+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/form/select/select.js CHANGED Viewed

@@ -44,6 +44,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
         this.noDeselect = false;
         this.assistiveTitleId = '';
         this.isDevSelectPlaceholderFlagEnabled = false;
+        this.isReactiveSelectionFlagEnabled = false;
         this.translations = {};
         this._selectOptionsId = v4['default']();
         this._searchValue = '';
@@ -59,9 +60,9 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
             this._$options = $options.reduce((acc, $option) => {
                 const value = $option.getAttribute('value');
                 if (value === null || value === undefined)
-                    throw Error('Select option must hava a value');
+                    throw Error('Select option must have a value');
                 if (acc.has(value))
-                    throw Error('Select options must hava a unique values.');
+                    throw Error('Select options must have a unique values.');
                 return acc.set(value, $option);
             }, new Map());
             const options = $options.map(select_option_mapper.SelectOptionMapper.toModel);
@@ -185,7 +186,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
         const $options = Array.from(this.querySelectorAll(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.option));
         $options.forEach(($option) => $option.setAttribute('slot', select_constants.SELECT_SLOT_NAMES.content));
         const $placeholderEl = this.querySelector(`[slot="${select_components_constatns.SELECT_INPUT_PLACEHOLDER_SLOT_NAME}"]`);
-        this.$placeholder = ($placeholderEl && ((_a = $placeholderEl.textContent) === null || _a === void 0 ? void 0 : _a.trim())) ? $placeholderEl : 'Select';
+        this.$placeholder = $placeholderEl && ((_a = $placeholderEl.textContent) === null || _a === void 0 ? void 0 : _a.trim()) ? $placeholderEl : 'Select';
         if (this.multiple)
             this.type = select_constants.SELECT_TYPES.multiple;
     }
@@ -287,6 +288,12 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
         }
         this._setupEvents();
     }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        if (this.isReactiveSelectionFlagEnabled) {
+            this._setupMutationObserver();
+        }
+    }
     attributeChangedCallback(name, _old, value) {
         super.attributeChangedCallback(name, _old, value);
         switch (name) {
@@ -305,19 +312,19 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
         this._updateOptions();
     }
     get _canAddPlaceholder() {
-        var _a;
         if (this.multiple || this.required)
             return false;
-        const hasSelection = (((_a = this._selectController.selectedOptions$.getValue()) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0;
-        if (hasSelection)
-            return false;
         const hasExistingPlaceholder = !!this.querySelector('h-option[placeholder]');
         return !hasExistingPlaceholder;
     }
     _createPlaceholderOption() {
+        var _a;
         const $option = document.createElement('h-option');
         $option.setAttribute('value', '');
-        $option.setAttribute('selected', 'true');
+        const hasSelection = (((_a = this._selectController.selectedOptions$.getValue()) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0;
+        if (!hasSelection) {
+            $option.setAttribute('selected', 'true');
+        }
         $option.setAttribute('placeholder', 'true');
         $option.setAttribute('slot', select_constants.SELECT_SLOT_NAMES.content);
         const $content = document.createElement(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.optionContent);
@@ -325,7 +332,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
             $content.textContent = this.$placeholder;
         }
         else if (this.$placeholder instanceof Node) {
-            Array.from(this.$placeholder.childNodes).forEach(node => {
+            Array.from(this.$placeholder.childNodes).forEach((node) => {
                 $content.appendChild(node.cloneNode(true));
             });
         }
@@ -334,8 +341,8 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
     }
     _injectOptionIntoDOM($option) {
         const $firstOption = this.querySelector(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.option);
-        if ($firstOption) {
-            this.insertBefore($option, $firstOption);
+        if ($firstOption && $firstOption.parentNode) {
+            $firstOption.parentNode.insertBefore($option, $firstOption);
         }
         else {
             this.appendChild($option);
@@ -345,6 +352,53 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
         this.addEventListener(select_constants.SELECT_EVENT_NAMES.deselectOption, this._handleOptionDeselect);
         this.addEventListener(select_components_constatns.SELECT_CLOSE_BTN_EVENT_NAMES.close, this._closeSelect);
     }
+    _setupMutationObserver() {
+        this._optionsMutationObserver = new MutationObserver((mutations) => {
+            let newlySelectedValue = null;
+            const shouldUpdate = mutations.some((mutation) => {
+                const target = mutation.target;
+                if (mutation.type === 'attributes' &&
+                    mutation.attributeName === 'selected' &&
+                    target.tagName &&
+                    target.tagName.toLowerCase() === 'h-option') {
+                    if (target.hasAttribute('selected')) {
+                        newlySelectedValue = target.getAttribute('value');
+                    }
+                    return true;
+                }
+                return false;
+            });
+            if (shouldUpdate) {
+                const options = Array.from(this._$options.values()).map(($el) => select_option_mapper.SelectOptionMapper.toModel($el));
+                if (!this.multiple && newlySelectedValue !== null) {
+                    options.forEach((opt) => {
+                        opt.selected = opt.value === newlySelectedValue;
+                    });
+                }
+                this._selectController.options$.notify(options);
+                let selectedOptions = options.filter((opt) => opt.selected);
+                if (selectedOptions.length === 0) {
+                    const placeholder = options.find((opt) => opt.isPlaceholder || !opt.value);
+                    if (placeholder) {
+                        placeholder.selected = true;
+                        const $placeholderHtml = this._$options.get(placeholder.value);
+                        if ($placeholderHtml) {
+                            $placeholderHtml.setAttribute('selected', 'true');
+                        }
+                        selectedOptions = [placeholder];
+                    }
+                }
+                this._selectController.selectedOptions$.notify(selectedOptions);
+            }
+        });
+        if (this._$optionsList.value) {
+            this._optionsMutationObserver.observe(this._$optionsList.value, {
+                attributes: true,
+                attributeFilter: ['selected'],
+                subtree: true
+            });
+        }
+    }
     _appendNewHTMLOption(option, position) {
         const $list = this._$optionsList.value;
         if (!$list)
@@ -405,9 +459,11 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
         this._selectController.select(option);
     }
     disconnectedCallback() {
+        var _a;
         super.disconnectedCallback();
         this._selectController.options$.unsubscribe(this._optionsObserver);
         this._$options.clear();
+        (_a = this._optionsMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     _getClonedPlaceholderElement() {
         return this.$placeholder instanceof HTMLElement ? this.$placeholder.cloneNode(true) : this.$placeholder;
@@ -459,9 +515,9 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
                     <h-select-close-btn class="${select_constants.SELECT_CSS_CLASSES.selectCloseMobileButton}" @close=${this._closeSelect}></h-select-close-btn>
                     <div class=${select_constants.SELECT_CSS_CLASSES.selectLabel}>
-                        ${this.isDevSelectPlaceholderFlagEnabled ?
-            (_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.cloneNode(true) :
-            lit.html `${this._getClonedPlaceholderElement()}`}
+                        ${this.isDevSelectPlaceholderFlagEnabled
+            ? (_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.cloneNode(true)
+            : lit.html `${this._getClonedPlaceholderElement()}`}
                     </div>
                     ${isSearchEnabled
@@ -581,6 +637,10 @@ tslib_es6.__decorate([
     decorators_js.property({ type: Boolean, attribute: 'is-dev-select-placeholder-flag-enabled' }),
     tslib_es6.__metadata("design:type", Boolean)
 ], exports.HSelect.prototype, "isDevSelectPlaceholderFlagEnabled", void 0);
+tslib_es6.__decorate([
+    decorators_js.property({ type: Boolean, attribute: 'is-reactive-selection-flag-enabled' }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HSelect.prototype, "isReactiveSelectionFlagEnabled", void 0);
 tslib_es6.__decorate([
     decorators_js.property({
         converter: {

package/build/cjs/packages/phoenix/src/components/form/select/select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,wDAA4D;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1	+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,wDAA4D;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/accordion/accordion_content.d.ts CHANGED Viewed

@@ -2,14 +2,11 @@ import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/pho
 import { PropertyValues } from 'lit';
 export declare class HAccordionContent extends PhoenixLightLitElement {
     transitionName: string;
-    isDevAccordionOptimizationFlagEnabled: boolean;
     private _transitionController;
     private _contextConsumer;
     private _accordionGroupProps;
     private _accordionGroupPropsObserver;
     private _originalHeight;
-    private _resizeObserver;
-    private _isTransitioning;
     private _resizeDebounceTimer;
     private _mutationDebounceTimer;
     private _mutationObserver;
@@ -17,13 +14,11 @@ export declare class HAccordionContent extends PhoenixLightLitElement {
     constructor();
     connectedCallback(): void;
     firstUpdated(props: PropertyValues): void;
-    private _handleResizeObserver;
-    private _updateOriginalHeight;
     private _handleResize;
     private _setStylingOptions;
-    private _setOriginalHeightValue;
-    private _handleMutation;
     private _subscribeObserver;
+    private _handleMutation;
+    private _setOriginalHeightValue;
     private _expand;
     private _handleTransitionEnd;
     private _collapse;

package/build/esm/packages/phoenix/src/components/accordion/accordion_content.js CHANGED Viewed

@@ -14,23 +14,9 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
     constructor() {
         super();
         this.transitionName = 'accordion-toggle';
-        this.isDevAccordionOptimizationFlagEnabled = false;
-        this._resizeObserver = null;
-        this._isTransitioning = false;
         this._resizeDebounceTimer = null;
         this._mutationDebounceTimer = null;
         this._mutationObserver = null;
-        this._handleResizeObserver = () => {
-            if (this._isTransitioning || this.hidden || this.style.height === '0px')
-                return;
-            this._setOriginalHeightValue(this.scrollHeight);
-        };
-        this._updateOriginalHeight = () => {
-            const previousDisplay = this.style.display;
-            this.style.setProperty('display', 'block', 'important');
-            this._setOriginalHeightValue(this.scrollHeight);
-            this.style.display = previousDisplay;
-        };
         this._handleResize = () => {
             if (this._resizeDebounceTimer !== null) {
                 window.cancelAnimationFrame(this._resizeDebounceTimer);
@@ -47,17 +33,12 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
                 this.style.setProperty('display', 'block', 'important');
                 this.style.height = 'auto';
                 requestAnimationFrame(() => {
-                    this._setOriginalHeightValue(this.getBoundingClientRect().height);
+                    this._setOriginalHeightValue();
                     this.style.display = previousDisplay;
                     this.style.height = this.hidden ? '0px' : this._originalHeight;
                 });
             });
         };
-        this._setOriginalHeightValue = (height) => {
-            if (height !== 0 || this.children.length === 0) {
-                this._originalHeight = `${height}px`;
-            }
-        };
         this._handleMutation = () => {
             if (this._mutationDebounceTimer !== null) {
                 window.clearTimeout(this._mutationDebounceTimer);
@@ -66,7 +47,7 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
                 requestAnimationFrame(() => {
                     this.style.height = 'auto';
                     requestAnimationFrame(() => {
-                        this._setOriginalHeightValue(this.getBoundingClientRect().height);
+                        this._setOriginalHeightValue();
                         if (this.hidden) {
                             this.style.height = '0px';
                         }
@@ -77,43 +58,31 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
                 });
             }, MUTATION_DEBOUNCE_MS);
         };
-        this._expand = () => {
-            if (this.isDevAccordionOptimizationFlagEnabled) {
-                this._setOriginalHeightValue(this.scrollHeight);
-                this._isTransitioning = true;
+        this._setOriginalHeightValue = () => {
+            const newHeight = this.getBoundingClientRect().height;
+            if (newHeight !== 0 || this.children.length === 0) {
+                this._originalHeight = `${newHeight}px`;
             }
+        };
+        this._expand = () => {
             this._setHeight(this._originalHeight);
         };
         this._handleTransitionEnd = (e) => {
             if (e.propertyName !== 'height' || e.target !== this) {
                 return;
             }
-            if (this.isDevAccordionOptimizationFlagEnabled) {
-                this._isTransitioning = false;
-            }
             if (!this.hidden && this.style.height !== '0px') {
                 this.style.height = 'auto';
             }
         };
         this._collapse = () => {
-            if (this.isDevAccordionOptimizationFlagEnabled) {
-                this._isTransitioning = true;
-            }
             const currentHeight = this.getBoundingClientRect().height;
             this._setHeight(`${currentHeight}px`);
-            if (this.isDevAccordionOptimizationFlagEnabled) {
-                void this.offsetHeight;
+            requestAnimationFrame(() => {
                 requestAnimationFrame(() => {
                     this._setHeight('0px');
                 });
-            }
-            else {
-                requestAnimationFrame(() => {
-                    requestAnimationFrame(() => {
-                        this._setHeight('0px');
-                    });
-                });
-            }
+            });
         };
         this.setAttribute('role', 'region');
         this._boundHandleTransitionEnd = this._handleTransitionEnd.bind(this);
@@ -123,24 +92,12 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
         this._contextConsumer = new ContextConsumerController(this);
         this._transitionController = new TransitionController(this, this.transitionName);
         this._subscribeObserver();
-        if (this.isDevAccordionOptimizationFlagEnabled) {
-            this._resizeObserver = new ResizeObserver(this._handleResizeObserver);
-            this._resizeObserver.observe(this);
-        }
-        else {
-            window.addEventListener('resize', this._handleResize, { passive: true });
-        }
+        window.addEventListener('resize', this._handleResize, { passive: true });
         this.addEventListener('transitionend', this._boundHandleTransitionEnd);
     }
     firstUpdated(props) {
         super.firstUpdated(props);
-        if (this.isDevAccordionOptimizationFlagEnabled) {
-            this._updateOriginalHeight();
-            this.style.height = this.hidden ? '0px' : this._originalHeight;
-        }
-        else {
-            this._setStylingOptions();
-        }
+        this._setStylingOptions();
     }
     async _subscribeObserver() {
         this._accordionGroupProps = await this._contextConsumer.consumeAsync(ACCORDION_CONTEXTS.accordionGroupProps);
@@ -149,10 +106,8 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
             accordionProps.opened ? this._transitionController.show(this._expand) : this._transitionController.hide(this._collapse);
         });
         this._accordionGroupProps.subscribe(this._accordionGroupPropsObserver);
-        if (!this.isDevAccordionOptimizationFlagEnabled) {
-            this._mutationObserver = new MutationObserver(this._handleMutation);
-            this._mutationObserver.observe(this, { childList: true, subtree: true });
-        }
+        this._mutationObserver = new MutationObserver(this._handleMutation);
+        this._mutationObserver.observe(this, { childList: true, subtree: true });
     }
     _setHeight(height) {
         this.style.height = height;
@@ -162,33 +117,24 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
         this.setAttribute('labelledby', regionId);
     }
     disconnectedCallback() {
-        var _a, _b, _c;
+        var _a, _b;
         super.disconnectedCallback();
         (_a = this._accordionGroupProps) === null || _a === void 0 ? void 0 : _a.unsubscribe(this._accordionGroupPropsObserver);
-        if (this.isDevAccordionOptimizationFlagEnabled) {
-            (_b = this._resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+        (_b = this._mutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+        window.removeEventListener('resize', this._handleResize);
+        this.removeEventListener('transitionend', this._boundHandleTransitionEnd);
+        if (this._resizeDebounceTimer !== null) {
+            window.cancelAnimationFrame(this._resizeDebounceTimer);
         }
-        else {
-            (_c = this._mutationObserver) === null || _c === void 0 ? void 0 : _c.disconnect();
-            window.removeEventListener('resize', this._handleResize);
-            if (this._resizeDebounceTimer !== null) {
-                window.cancelAnimationFrame(this._resizeDebounceTimer);
-            }
-            if (this._mutationDebounceTimer !== null) {
-                window.clearTimeout(this._mutationDebounceTimer);
-            }
+        if (this._mutationDebounceTimer !== null) {
+            window.clearTimeout(this._mutationDebounceTimer);
         }
-        this.removeEventListener('transitionend', this._boundHandleTransitionEnd);
     }
 };
 __decorate([
     property(),
     __metadata("design:type", Object)
 ], HAccordionContent.prototype, "transitionName", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'is-dev-accordion-optimization-flag-enabled' }),
-    __metadata("design:type", Boolean)
-], HAccordionContent.prototype, "isDevAccordionOptimizationFlagEnabled", void 0);
 HAccordionContent = __decorate([
     phoenixCustomElement('h-accordion-content'),
     __metadata("design:paramtypes", [])

package/build/esm/packages/phoenix/src/components/accordion/accordion_content.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1	+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/form/select/select.d.ts CHANGED Viewed

@@ -24,6 +24,7 @@ export declare class HSelect extends PhoenixLightLitElement {
     noDeselect: boolean;
     assistiveTitleId: string;
     isDevSelectPlaceholderFlagEnabled: boolean;
+    isReactiveSelectionFlagEnabled: boolean;
     translations: Record<string, string>;
     private _selectOptionsId;
     get selectedIndex(): number;
@@ -47,10 +48,12 @@ export declare class HSelect extends PhoenixLightLitElement {
     private _selectedOptionsAriaObserver;
     private $placeholder;
     private $searchLabel;
+    private _optionsMutationObserver?;
     constructor();
     updated(changedProperties: PropertyValues): void;
     private _focusElementAfterSelectOpened;
     connectedCallback(): void;
+    firstUpdated(changedProperties: PropertyValues): void;
     attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
     private _updateOptions;
     private _getOptions;
@@ -59,6 +62,7 @@ export declare class HSelect extends PhoenixLightLitElement {
     private _createPlaceholderOption;
     private _injectOptionIntoDOM;
     private _setupEvents;
+    private _setupMutationObserver;
     private _handleOptionDeselect;
     private _updateOptionsView;
     private _updateLabelAria;

package/build/esm/packages/phoenix/src/components/form/select/select.js CHANGED Viewed

@@ -40,6 +40,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         this.noDeselect = false;
         this.assistiveTitleId = '';
         this.isDevSelectPlaceholderFlagEnabled = false;
+        this.isReactiveSelectionFlagEnabled = false;
         this.translations = {};
         this._selectOptionsId = v4();
         this._searchValue = '';
@@ -55,9 +56,9 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
             this._$options = $options.reduce((acc, $option) => {
                 const value = $option.getAttribute('value');
                 if (value === null || value === undefined)
-                    throw Error('Select option must hava a value');
+                    throw Error('Select option must have a value');
                 if (acc.has(value))
-                    throw Error('Select options must hava a unique values.');
+                    throw Error('Select options must have a unique values.');
                 return acc.set(value, $option);
             }, new Map());
             const options = $options.map(SelectOptionMapper.toModel);
@@ -181,7 +182,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         const $options = Array.from(this.querySelectorAll(SELECT_RELATED_COMPONENTS_NAMES.option));
         $options.forEach(($option) => $option.setAttribute('slot', SELECT_SLOT_NAMES.content));
         const $placeholderEl = this.querySelector(`[slot="${SELECT_INPUT_PLACEHOLDER_SLOT_NAME}"]`);
-        this.$placeholder = ($placeholderEl && ((_a = $placeholderEl.textContent) === null || _a === void 0 ? void 0 : _a.trim())) ? $placeholderEl : 'Select';
+        this.$placeholder = $placeholderEl && ((_a = $placeholderEl.textContent) === null || _a === void 0 ? void 0 : _a.trim()) ? $placeholderEl : 'Select';
         if (this.multiple)
             this.type = SELECT_TYPES.multiple;
     }
@@ -283,6 +284,12 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         }
         this._setupEvents();
     }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        if (this.isReactiveSelectionFlagEnabled) {
+            this._setupMutationObserver();
+        }
+    }
     attributeChangedCallback(name, _old, value) {
         super.attributeChangedCallback(name, _old, value);
         switch (name) {
@@ -301,19 +308,19 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         this._updateOptions();
     }
     get _canAddPlaceholder() {
-        var _a;
         if (this.multiple || this.required)
             return false;
-        const hasSelection = (((_a = this._selectController.selectedOptions$.getValue()) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0;
-        if (hasSelection)
-            return false;
         const hasExistingPlaceholder = !!this.querySelector('h-option[placeholder]');
         return !hasExistingPlaceholder;
     }
     _createPlaceholderOption() {
+        var _a;
         const $option = document.createElement('h-option');
         $option.setAttribute('value', '');
-        $option.setAttribute('selected', 'true');
+        const hasSelection = (((_a = this._selectController.selectedOptions$.getValue()) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0;
+        if (!hasSelection) {
+            $option.setAttribute('selected', 'true');
+        }
         $option.setAttribute('placeholder', 'true');
         $option.setAttribute('slot', SELECT_SLOT_NAMES.content);
         const $content = document.createElement(SELECT_RELATED_COMPONENTS_NAMES.optionContent);
@@ -321,7 +328,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
             $content.textContent = this.$placeholder;
         }
         else if (this.$placeholder instanceof Node) {
-            Array.from(this.$placeholder.childNodes).forEach(node => {
+            Array.from(this.$placeholder.childNodes).forEach((node) => {
                 $content.appendChild(node.cloneNode(true));
             });
         }
@@ -330,8 +337,8 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
     }
     _injectOptionIntoDOM($option) {
         const $firstOption = this.querySelector(SELECT_RELATED_COMPONENTS_NAMES.option);
-        if ($firstOption) {
-            this.insertBefore($option, $firstOption);
+        if ($firstOption && $firstOption.parentNode) {
+            $firstOption.parentNode.insertBefore($option, $firstOption);
         }
         else {
             this.appendChild($option);
@@ -341,6 +348,53 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         this.addEventListener(SELECT_EVENT_NAMES.deselectOption, this._handleOptionDeselect);
         this.addEventListener(SELECT_CLOSE_BTN_EVENT_NAMES.close, this._closeSelect);
     }
+    _setupMutationObserver() {
+        this._optionsMutationObserver = new MutationObserver((mutations) => {
+            let newlySelectedValue = null;
+            const shouldUpdate = mutations.some((mutation) => {
+                const target = mutation.target;
+                if (mutation.type === 'attributes' &&
+                    mutation.attributeName === 'selected' &&
+                    target.tagName &&
+                    target.tagName.toLowerCase() === 'h-option') {
+                    if (target.hasAttribute('selected')) {
+                        newlySelectedValue = target.getAttribute('value');
+                    }
+                    return true;
+                }
+                return false;
+            });
+            if (shouldUpdate) {
+                const options = Array.from(this._$options.values()).map(($el) => SelectOptionMapper.toModel($el));
+                if (!this.multiple && newlySelectedValue !== null) {
+                    options.forEach((opt) => {
+                        opt.selected = opt.value === newlySelectedValue;
+                    });
+                }
+                this._selectController.options$.notify(options);
+                let selectedOptions = options.filter((opt) => opt.selected);
+                if (selectedOptions.length === 0) {
+                    const placeholder = options.find((opt) => opt.isPlaceholder || !opt.value);
+                    if (placeholder) {
+                        placeholder.selected = true;
+                        const $placeholderHtml = this._$options.get(placeholder.value);
+                        if ($placeholderHtml) {
+                            $placeholderHtml.setAttribute('selected', 'true');
+                        }
+                        selectedOptions = [placeholder];
+                    }
+                }
+                this._selectController.selectedOptions$.notify(selectedOptions);
+            }
+        });
+        if (this._$optionsList.value) {
+            this._optionsMutationObserver.observe(this._$optionsList.value, {
+                attributes: true,
+                attributeFilter: ['selected'],
+                subtree: true
+            });
+        }
+    }
     _appendNewHTMLOption(option, position) {
         const $list = this._$optionsList.value;
         if (!$list)
@@ -401,9 +455,11 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         this._selectController.select(option);
     }
     disconnectedCallback() {
+        var _a;
         super.disconnectedCallback();
         this._selectController.options$.unsubscribe(this._optionsObserver);
         this._$options.clear();
+        (_a = this._optionsMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     _getClonedPlaceholderElement() {
         return this.$placeholder instanceof HTMLElement ? this.$placeholder.cloneNode(true) : this.$placeholder;
@@ -455,9 +511,9 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
                     <h-select-close-btn class="${SELECT_CSS_CLASSES.selectCloseMobileButton}" @close=${this._closeSelect}></h-select-close-btn>
                     <div class=${SELECT_CSS_CLASSES.selectLabel}>
-                        ${this.isDevSelectPlaceholderFlagEnabled ?
-            (_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.cloneNode(true) :
-            html `${this._getClonedPlaceholderElement()}`}
+                        ${this.isDevSelectPlaceholderFlagEnabled
+            ? (_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.cloneNode(true)
+            : html `${this._getClonedPlaceholderElement()}`}
                     </div>
                     ${isSearchEnabled
@@ -577,6 +633,10 @@ __decorate([
     property({ type: Boolean, attribute: 'is-dev-select-placeholder-flag-enabled' }),
     __metadata("design:type", Boolean)
 ], HSelect.prototype, "isDevSelectPlaceholderFlagEnabled", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'is-reactive-selection-flag-enabled' }),
+    __metadata("design:type", Boolean)
+], HSelect.prototype, "isReactiveSelectionFlagEnabled", void 0);
 __decorate([
     property({
         converter: {

package/build/esm/packages/phoenix/src/components/form/select/select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,wDAA4D;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1	+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,wDAA4D;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/package.json CHANGED Viewed

@@ -2,7 +2,7 @@
   "name": "@shoper/phoenix_design_system",
   "packageManager": "yarn@3.2.0",
   "sideEffects": false,
-  "version": "1.18.12-0",
+  "version": "1.18.12-2",
   "description": "phoenix design system",
   "author": "zefirek",
   "license": "MIT",