@ni/nimble-components 11.7.0 → 11.7.1

package/dist/all-components-bundle.js

@@ -278,30 +278,6 @@
         },
     });
 
-    function spilloverSubscribe(subscriber) {
-        const spillover = this.spillover;
-        const index = spillover.indexOf(subscriber);
-        if (index === -1) {
-            spillover.push(subscriber);
-        }
-    }
-    function spilloverUnsubscribe(subscriber) {
-        const spillover = this.spillover;
-        const index = spillover.indexOf(subscriber);
-        if (index !== -1) {
-            spillover.splice(index, 1);
-        }
-    }
-    function spilloverNotifySubscribers(args) {
-        const spillover = this.spillover;
-        const source = this.source;
-        for (let i = 0, ii = spillover.length; i < ii; ++i) {
-            spillover[i].handleChange(source, args);
-        }
-    }
-    function spilloverHas(subscriber) {
-        return this.spillover.indexOf(subscriber) !== -1;
-    }
     /**
      * An implementation of {@link Notifier} that efficiently keeps track of
      * subscribers interested in a specific change notification on an
@@ -331,42 +307,58 @@
          * @param subscriber - The subscriber to test for inclusion in this set.
          */
         has(subscriber) {
-            return this.sub1 === subscriber || this.sub2 === subscriber;
+            return this.spillover === void 0
+                ? this.sub1 === subscriber || this.sub2 === subscriber
+                : this.spillover.indexOf(subscriber) !== -1;
         }
         /**
          * Subscribes to notification of changes in an object's state.
          * @param subscriber - The object that is subscribing for change notification.
          */
         subscribe(subscriber) {
-            if (this.has(subscriber)) {
-                return;
-            }
-            if (this.sub1 === void 0) {
-                this.sub1 = subscriber;
-                return;
+            const spillover = this.spillover;
+            if (spillover === void 0) {
+                if (this.has(subscriber)) {
+                    return;
+                }
+                if (this.sub1 === void 0) {
+                    this.sub1 = subscriber;
+                    return;
+                }
+                if (this.sub2 === void 0) {
+                    this.sub2 = subscriber;
+                    return;
+                }
+                this.spillover = [this.sub1, this.sub2, subscriber];
+                this.sub1 = void 0;
+                this.sub2 = void 0;
             }
-            if (this.sub2 === void 0) {
-                this.sub2 = subscriber;
-                return;
+            else {
+                const index = spillover.indexOf(subscriber);
+                if (index === -1) {
+                    spillover.push(subscriber);
+                }
             }
-            this.spillover = [this.sub1, this.sub2, subscriber];
-            this.subscribe = spilloverSubscribe;
-            this.unsubscribe = spilloverUnsubscribe;
-            this.notify = spilloverNotifySubscribers;
-            this.has = spilloverHas;
-            this.sub1 = void 0;
-            this.sub2 = void 0;
         }
         /**
          * Unsubscribes from notification of changes in an object's state.
          * @param subscriber - The object that is unsubscribing from change notification.
          */
         unsubscribe(subscriber) {
-            if (this.sub1 === subscriber) {
-                this.sub1 = void 0;
+            const spillover = this.spillover;
+            if (spillover === void 0) {
+                if (this.sub1 === subscriber) {
+                    this.sub1 = void 0;
+                }
+                else if (this.sub2 === subscriber) {
+                    this.sub2 = void 0;
+                }
             }
-            else if (this.sub2 === subscriber) {
-                this.sub2 = void 0;
+            else {
+                const index = spillover.indexOf(subscriber);
+                if (index !== -1) {
+                    spillover.splice(index, 1);
+                }
             }
         }
         /**
@@ -374,14 +366,22 @@
          * @param args - Data passed along to subscribers during notification.
          */
         notify(args) {
-            const sub1 = this.sub1;
-            const sub2 = this.sub2;
+            const spillover = this.spillover;
             const source = this.source;
-            if (sub1 !== void 0) {
-                sub1.handleChange(source, args);
+            if (spillover === void 0) {
+                const sub1 = this.sub1;
+                const sub2 = this.sub2;
+                if (sub1 !== void 0) {
+                    sub1.handleChange(source, args);
+                }
+                if (sub2 !== void 0) {
+                    sub2.handleChange(source, args);
+                }
             }
-            if (sub2 !== void 0) {
-                sub2.handleChange(source, args);
+            else {
+                for (let i = 0, ii = spillover.length; i < ii; ++i) {
+                    spillover[i].handleChange(source, args);
+                }
             }
         }
     }
@@ -6745,8 +6745,14 @@
              * @internal
              */
             this.keypressHandler = (e) => {
+                if (this.readOnly) {
+                    return;
+                }
                 switch (e.key) {
                     case keySpace:
+                        if (this.indeterminate) {
+                            this.indeterminate = false;
+                        }
                         this.checked = !this.checked;
                         break;
                 }
@@ -6756,6 +6762,9 @@
              */
             this.clickHandler = (e) => {
                 if (!this.disabled && !this.readOnly) {
+                    if (this.indeterminate) {
+                        this.indeterminate = false;
+                    }
                     this.checked = !this.checked;
                 }
             };
@@ -7780,7 +7789,7 @@
          * @internal
          */
         focusoutHandler(e) {
-            this.updateValue();
+            this.syncValue();
             if (!this.open) {
                 return true;
             }
@@ -7802,7 +7811,12 @@
         inputHandler(e) {
             this.filter = this.control.value;
             this.filterOptions();
-            if (e.inputType === "deleteContentBackward" || !this.filter.length) {
+            if (!this.isAutocompleteInline) {
+                this.selectedIndex = this.options
+                    .map(option => option.text)
+                    .indexOf(this.control.value);
+            }
+            if (e.inputType.includes("deleteContent") || !this.filter.length) {
                 return true;
             }
             if (this.isAutocompleteList && !this.open) {
@@ -7828,7 +7842,7 @@
             }
             switch (key) {
                 case "Enter": {
-                    this.updateValue(true);
+                    this.syncValue();
                     if (this.isAutocompleteInline) {
                         this.filter = this.value;
                     }
@@ -7851,7 +7865,7 @@
                     break;
                 }
                 case "Tab": {
-                    this.updateValue();
+                    this.setInputToSelection();
                     if (!this.open) {
                         return true;
                     }
@@ -7870,7 +7884,6 @@
                         super.keydownHandler(e);
                     }
                     if (this.isAutocompleteInline) {
-                        this.updateValue();
                         this.setInlineSelection();
                     }
                     break;
@@ -7951,18 +7964,37 @@
             }
         }
         /**
-         * Focus and select the content of the control based on the first selected option.
+         * Focus and set the content of the control based on the first selected option.
          *
-         * @param start - The index for the starting range
          * @internal
          */
-        setInlineSelection() {
+        setInputToSelection() {
             if (this.firstSelectedOption) {
                 this.control.value = this.firstSelectedOption.text;
                 this.control.focus();
+            }
+        }
+        /**
+         * Focus, set and select the content of the control based on the first selected option.
+         *
+         * @internal
+         */
+        setInlineSelection() {
+            if (this.firstSelectedOption) {
+                this.setInputToSelection();
                 this.control.setSelectionRange(this.filter.length, this.control.value.length, "backward");
             }
         }
+        /**
+         * Determines if a value update should involve emitting a change event, then updates the value.
+         *
+         * @internal
+         */
+        syncValue() {
+            var _a;
+            const newValue = this.selectedIndex > -1 ? (_a = this.firstSelectedOption) === null || _a === void 0 ? void 0 : _a.text : this.control.value;
+            this.updateValue(this.value !== newValue);
+        }
         /**
          * Calculate and apply listbox positioning based on available viewport space.
          *
@@ -8024,6 +8056,7 @@
             var _a;
             if (this.$fastController.isConnected) {
                 this.value = ((_a = this.firstSelectedOption) === null || _a === void 0 ? void 0 : _a.text) || this.control.value;
+                this.control.value = this.value;
             }
             if (shouldEmit) {
                 this.$emit("change");
@@ -11894,7 +11927,7 @@
                 this.updateValue(true);
                 this.indexWhenOpened = this.selectedIndex;
             }
-            return !(key in ArrowKeys);
+            return !(key === keyArrowDown || key === keyArrowUp);
         }
         connectedCallback() {
             super.connectedCallback();
@@ -12866,6 +12899,12 @@
         @click="${(x, c) => x.clickHandler(c.event)}"
         @focusin="${(x, c) => x.focusinHandler(c.event)}"
         @keydown="${(x, c) => x.keydownHandler(c.event)}"
+        ${children({
+    property: "childItems",
+    attributeFilter: ["disabled", "hidden"],
+    filter: elements(),
+    subtree: true,
+})}
     >
         <slot name="label"></slot>
         <div class="positioning-region" part="positioning-region">
@@ -12942,11 +12981,6 @@
              * HTML Attribute: `orientation`
              */
             this.orientation = Orientation.horizontal;
-            this.startEndSlotChange = () => {
-                if (this.$fastController.isConnected) {
-                    this.reduceFocusableElements();
-                }
-            };
         }
         /**
          * The index of the currently focused element, clamped between 0 and the last element.
@@ -12981,22 +13015,17 @@
             }
             return true;
         }
+        childItemsChanged(prev, next) {
+            if (this.$fastController.isConnected) {
+                this.reduceFocusableElements();
+            }
+        }
         /**
          * @internal
          */
         connectedCallback() {
             super.connectedCallback();
             this.direction = getDirection(this);
-            this.start.addEventListener("slotchange", this.startEndSlotChange);
-            this.end.addEventListener("slotchange", this.startEndSlotChange);
-        }
-        /**
-         * @internal
-         */
-        disconnectedCallback() {
-            super.disconnectedCallback();
-            this.start.removeEventListener("slotchange", this.startEndSlotChange);
-            this.end.removeEventListener("slotchange", this.startEndSlotChange);
         }
         /**
          * When the toolbar receives focus, set the currently active element as focused.
@@ -13059,7 +13088,13 @@
          * @internal
          */
         reduceFocusableElements() {
+            var _a;
+            const previousFocusedElement = (_a = this.focusableElements) === null || _a === void 0 ? void 0 : _a[this.activeIndex];
             this.focusableElements = this.allSlottedItems.reduce(Toolbar$1.reduceFocusableItems, []);
+            // If the previously active item is still focusable, adjust the active index to the
+            // index of that item.
+            const adjustedActiveIndex = this.focusableElements.indexOf(previousFocusedElement);
+            this.activeIndex = Math.max(0, adjustedActiveIndex);
             this.setFocusableElements();
         }
         /**
@@ -13087,10 +13122,12 @@
             const isRoleRadio = element.getAttribute("role") === "radio";
             const isFocusableFastElement = (_b = (_a = element.$fastController) === null || _a === void 0 ? void 0 : _a.definition.shadowOptions) === null || _b === void 0 ? void 0 : _b.delegatesFocus;
             const hasFocusableShadow = Array.from((_d = (_c = element.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelectorAll("*")) !== null && _d !== void 0 ? _d : []).some(x => isFocusable(x));
-            if (isFocusable(element) ||
-                isRoleRadio ||
-                isFocusableFastElement ||
-                hasFocusableShadow) {
+            if (!element.hasAttribute("disabled") &&
+                !element.hasAttribute("hidden") &&
+                (isFocusable(element) ||
+                    isRoleRadio ||
+                    isFocusableFastElement ||
+                    hasFocusableShadow)) {
                 elements.push(element);
                 return elements;
             }
@@ -13122,6 +13159,9 @@
     __decorate$1([
         observable
     ], Toolbar$1.prototype, "slottedLabel", void 0);
+    __decorate$1([
+        observable
+    ], Toolbar$1.prototype, "childItems", void 0);
     /**
      * Includes ARIA states and properties relating to the ARIA toolbar role
      *