@ni/spright-components 1.0.0 → 1.0.1

package/dist/all-components-bundle.js

@@ -16333,7 +16333,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Wed, 15 May 2024 18:39:02 GMT
+   * Generated on Wed, 15 May 2024 20:53:59 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -20755,7 +20755,7 @@
 
     .indicator {
         flex: none;
-        margin-inline-start: 1em;
+        margin-left: ${smallPadding};
         padding-right: 8px;
         display: flex;
         justify-content: center;
@@ -58639,8 +58639,15 @@ img.ProseMirror-separator {
         order: 1;
     }
 
-    [part='indicator'] {
+    .clear-button {
         order: 3;
+        width: auto;
+        height: auto;
+        margin-left: ${smallPadding};
+    }
+
+    [part='indicator'] {
+        order: 4;
     }
 
     .error-icon {
@@ -58776,7 +58783,6 @@ img.ProseMirror-separator {
         role="combobox"
         tabindex="${x => (!x.disabled ? '0' : null)}"
         @click="${(x, c) => x.clickHandler(c.event)}"
-        @change="${x => x.changeValueHandler()}"
         @contentchange="${x => x.updateDisplayValue()}"
         @focusin="${(x, c) => x.focusinHandler(c.event)}"
         @focusout="${(x, c) => x.focusoutHandler(c.event)}"
@@ -58795,6 +58801,17 @@ img.ProseMirror-separator {
                     <div class="selected-value ${x => (x.displayPlaceholder ? 'placeholder' : '')}" part="selected-value" ${overflow('hasOverflow')} title=${x => (x.hasOverflow && x.displayValue ? x.displayValue : null)}>
                         <slot name="selected-value">${x => x.displayValue}</slot>
                     </div>
+                    ${when(x => !x.disabled && x.clearable && !x.displayPlaceholder && x.selectedIndex >= 0, html `
+                        <${buttonTag} 
+                            class="clear-button"
+                            tabindex="-1"
+                            part="clear-button"
+                            content-hidden
+                            appearance="ghost"
+                            @click="${(x, c) => x.clearClickHandler(c.event)}">
+                            <${iconXmarkTag} slot="start"></${iconXmarkTag}>
+                        </${buttonTag}>
+                    `)}
                     <div aria-hidden="true" class="indicator" part="indicator">
                         <slot name="indicator">
                             ${definition.indicator || ''}
@@ -58889,6 +58906,9 @@ img.ProseMirror-separator {
   const isOptionSelectable = (el) => {
       return !el.visuallyHidden && !el.disabled && !el.hidden;
   };
+  const isOptionPlaceholder = (el) => {
+      return el.disabled && el.hidden;
+  };
   /**
    * A nimble-styled HTML select.
    */
@@ -58898,6 +58918,7 @@ img.ProseMirror-separator {
           this.appearance = DropdownAppearance.underline;
           this.errorVisible = false;
           this.filterMode = FilterMode.none;
+          this.clearable = false;
           /**
            * @internal
            */
@@ -58970,13 +58991,8 @@ img.ProseMirror-separator {
           if (prev !== newValue && !(this.open && this.selectedIndex < 0)) {
               this._value = newValue;
               super.valueChanged(prev, newValue);
-              if (!this.open) {
-                  this.committedSelectedOption = this.options.find(o => o.value === newValue);
-              }
               Observable.notify(this, 'value');
-              if (this.collapsible) {
-                  Observable.notify(this, 'displayValue');
-              }
+              this.updateDisplayValue();
           }
       }
       /**
@@ -58984,7 +59000,7 @@ img.ProseMirror-separator {
        */
       get displayValue() {
           Observable.track(this, 'displayValue');
-          return this.committedSelectedOption?.text ?? '';
+          return this.firstSelectedOption?.text ?? '';
       }
       /**
        * @internal
@@ -59028,7 +59044,6 @@ img.ProseMirror-separator {
           if (value) {
               this.value = value;
           }
-          this.committedSelectedOption = this.options[this.selectedIndex];
       }
       /**
        * @internal
@@ -59073,11 +59088,13 @@ img.ProseMirror-separator {
                   break;
               }
               case 'selected': {
-                  if (isNimbleListOption(sourceElement)) {
+                  if (isNimbleListOption(sourceElement)
+                      && sourceElement.selected) {
                       this.selectedIndex = this.options.indexOf(sourceElement);
                   }
-                  this.setSelectedOptions();
-                  this.updateDisplayValue();
+                  else {
+                      this.clearSelect();
+                  }
                   break;
               }
               case 'hidden': {
@@ -59134,24 +59151,25 @@ img.ProseMirror-separator {
       /**
        * @internal
        */
-      changeValueHandler() {
-          this.committedSelectedOption = this.options.find(option => option.selected);
+      clearClickHandler(e) {
+          this.open = false;
+          this.clearSelect();
+          this.updateValue(true);
+          e.stopPropagation();
       }
       /**
        * @internal
        */
       updateDisplayValue() {
-          if (this.committedSelectedOption?.disabled
-              && this.committedSelectedOption?.hidden
-              && this.committedSelectedOption?.selected) {
+          const placeholderOption = this.getPlaceholderOption();
+          if (placeholderOption
+              && this.firstSelectedOption === placeholderOption) {
               this.displayPlaceholder = true;
           }
           else {
               this.displayPlaceholder = false;
           }
-          if (this.collapsible) {
-              Observable.notify(this, 'displayValue');
-          }
+          Observable.notify(this, 'displayValue');
       }
       /**
        * Handle content changes on the control input.
@@ -59241,6 +59259,11 @@ img.ProseMirror-separator {
               }
               case keyEscape: {
                   if (!this.open) {
+                      if (this.clearable) {
+                          this.clearSelect();
+                          this.updateValue(true);
+                          return true;
+                      }
                       break;
                   }
                   if (this.collapsible && this.open) {
@@ -59385,10 +59408,10 @@ img.ProseMirror-separator {
           // for more info.
           this.options.push(option);
       }
-      // Prevents parent classes from resetting selectedIndex to a positive
-      // value while filtering, which can result in a disabled option being
-      // selected.
       setSelectedOptions() {
+          // Prevents parent classes from resetting selectedIndex to a positive
+          // value while filtering, which can result in a disabled option being
+          // selected.
           if (this.open && this.selectedIndex === -1) {
               return;
           }
@@ -59484,12 +59507,17 @@ img.ProseMirror-separator {
           };
           let selectedIndex = -1;
           let firstValidOptionIndex = -1;
+          let placeholderIndex = -1;
           for (let i = 0; i < options?.length; i++) {
               const option = options[i];
-              if (optionIsSelected(option) || option?.value === this.value) {
+              if (optionIsSelected(option) || option.value === this.value) {
                   selectedIndex = i;
+                  break;
               }
-              if (firstValidOptionIndex === -1
+              else if (placeholderIndex === -1 && isOptionPlaceholder(option)) {
+                  placeholderIndex = i;
+              }
+              else if (firstValidOptionIndex === -1
                   && isOptionSelectable(option)) {
                   firstValidOptionIndex = i;
               }
@@ -59497,13 +59525,15 @@ img.ProseMirror-separator {
           if (selectedIndex !== -1) {
               this.selectedIndex = selectedIndex;
           }
+          else if (placeholderIndex !== -1) {
+              this.selectedIndex = placeholderIndex;
+          }
           else if (firstValidOptionIndex !== -1) {
               this.selectedIndex = firstValidOptionIndex;
           }
           else {
               this.selectedIndex = 0;
           }
-          this.committedSelectedOption = options[this.selectedIndex];
       }
       setActiveOption(newActiveIndex) {
           const activeOption = this.options[newActiveIndex];
@@ -59539,8 +59569,8 @@ img.ProseMirror-separator {
               });
           }
       }
-      committedSelectedOptionChanged() {
-          this.updateDisplayValue();
+      getPlaceholderOption() {
+          return this.options.find(o => o.hidden && o.disabled);
       }
       setPositioning() {
           if (!this.$fastController.isConnected) {
@@ -59615,6 +59645,12 @@ img.ProseMirror-separator {
               });
           }
       }
+      clearSelect() {
+          const placeholder = this.getPlaceholderOption();
+          this.selectedIndex = placeholder
+              ? this.options.indexOf(placeholder)
+              : -1;
+      }
       /**
        * Resets and fills the proxy to match the component's options.
        *
@@ -59641,7 +59677,6 @@ img.ProseMirror-separator {
           this.updateListboxMaxHeightCssVariable();
       }
       initializeOpenState() {
-          this.committedSelectedOption = this.options[this.selectedIndex];
           this.setActiveOption(this.selectedIndex);
           this.ariaControls = this.listboxId;
           this.ariaExpanded = 'true';
@@ -59669,6 +59704,9 @@ img.ProseMirror-separator {
   __decorate$1([
       attr({ attribute: 'filter-mode' })
   ], Select.prototype, "filterMode", void 0);
+  __decorate$1([
+      attr({ attribute: 'clearable', mode: 'boolean' })
+  ], Select.prototype, "clearable", void 0);
   __decorate$1([
       observable
   ], Select.prototype, "displayPlaceholder", void 0);
@@ -59699,9 +59737,6 @@ img.ProseMirror-separator {
   __decorate$1([
       observable
   ], Select.prototype, "filter", void 0);
-  __decorate$1([
-      observable
-  ], Select.prototype, "committedSelectedOption", void 0);
   __decorate$1([
       observable
   ], Select.prototype, "maxHeight", void 0);