@ni/nimble-components 7.4.2 → 7.6.0

package/dist/all-components-bundle.js

@@ -14932,6 +14932,7 @@
             this.propertiesToWatch = ['hidden', 'location', 'state'];
             this.animationDurationMilliseconds = animationDurationWhenDisabledMilliseconds;
         }
+        /** @internal */
         connectedCallback() {
             // disable trapFocus before super.connectedCallback as FAST Dialog will immediately queue work to
             // change focus if it's true before connectedCallback
@@ -14949,6 +14950,7 @@
             this.propertyChangeSubscriber = subscriber;
             this.propertyChangeNotifier = notifier;
         }
+        /** @internal */
         disconnectedCallback() {
             super.disconnectedCallback();
             this.cancelCurrentAnimation();
@@ -14970,8 +14972,16 @@
             // Not calling super.hide() as that will immediately hide the drawer, whereas 'Closing' state will animate
             this.state = DrawerState.Closing;
         }
+        /**
+         * Handler for overlay clicks (user-initiated dismiss requests) only.
+         * @internal
+         */
         dismiss() {
-            if (!this.preventDismiss) {
+            const shouldDismiss = this.$emit('cancel', {}, 
+            // Aligned with the configuration of HTMLDialogElement cancel event:
+            // https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/cancel_event
+            { bubbles: false, cancelable: true, composed: false });
+            if (shouldDismiss && !this.preventDismiss) {
                 super.dismiss();
                 this.hide();
             }
@@ -17644,13 +17654,15 @@
     })(TextAreaAppearance || (TextAreaAppearance = {}));
 
     const styles$4 = css `
-    ${display('inline-block')}
+    ${display('inline-flex')}
 
     :host {
         font: ${bodyFont};
         outline: none;
         user-select: none;
         color: ${bodyFontColor};
+        flex-direction: column;
+        vertical-align: top;
     }
 
     :host([disabled]) {
@@ -17658,7 +17670,7 @@
     }
 
     .label {
-        display: flex;
+        display: block;
         color: ${controlLabelFontColor};
         font: ${controlLabelFont};
     }
@@ -17670,6 +17682,8 @@
     .control {
         -webkit-appearance: none;
         font: inherit;
+        width: 100%;
+        flex-grow: 1;
         outline: none;
         box-sizing: border-box;
         position: relative;
@@ -17719,6 +17733,14 @@
         color: ${controlLabelDisabledFontColor};
     }
 
+    :host([cols]) .control {
+        width: auto;
+    }
+
+    :host([rows]) .control {
+        flex: none;
+    }
+
     :host([resize='both']) .control {
         resize: both;
     }
@@ -17919,25 +17941,29 @@
     }
 
     [part='end'] {
+        display: contents;
+    }
+
+    .error-content {
         display: none;
     }
 
-    :host(.invalid) [part='end'] {
+    :host(.invalid) .error-content {
         display: contents;
     }
 
-    :host(.invalid) [part='end'] svg {
+    :host(.invalid) .error-content svg {
         height: ${iconSize};
         width: ${iconSize};
         padding-right: 8px;
         flex: none;
     }
 
-    :host(.invalid) [part='end'] path {
+    :host(.invalid) .error-content path {
         fill: ${failColor};
     }
 
-    :host([disabled]) [part='end'] path {
+    :host([disabled]) .error-content path {
         fill: ${bodyDisabledFontColor};
     }
 
@@ -17968,6 +17994,15 @@
     :host([disabled]) .errortext {
         color: ${bodyDisabledFontColor};
     }
+
+    [part='actions'] {
+        display: contents;
+    }
+
+    slot[name='actions']::slotted(*) {
+        margin-right: 8px;
+        ${controlHeight.cssCustomProperty}: 24px;
+    }
 `.withBehaviors(appearanceBehavior(TextFieldAppearance.Underline, css `
             .root {
                 --ni-private-bottom-border-width: 1px;
@@ -18074,10 +18109,13 @@
             delegatesFocus: true
         },
         end: html `
-        ${exclamationMark16X16.data}
+        <span class="error-content">${exclamationMark16X16.data}</span>
+        <span part="actions">
+            <slot name="actions"></slot>
+        </span>
         <div
             id="errortext"
-            class="errortext"
+            class="errortext error-content"
             title="${x => x.errorText}"
             aria-live="polite"
         >