@momentum-design/components 0.133.31 → 0.133.32

package/dist/components/timepicker/timepicker.component.d.ts

@@ -198,6 +198,11 @@ declare class TimePicker extends TimePicker_base implements AssociatedFormContro
      * @internal
      */
     private focusMenuItemOnOpen;
+    /**
+     * Gets the option index that should receive focus when the menu opens.
+     * @internal
+     */
+    private getMenuItemFocusIndex;
     /**
      * Focuses the menu item at the current focusedOptionIndex.
      * @internal
@@ -243,11 +248,10 @@ declare class TimePicker extends TimePicker_base implements AssociatedFormContro
      */
     private handleDropdownClick;
     /**
-     * Handles clicking on the spinbutton area (not the dropdown button).
-     * Focuses the nearest spinbutton.
+     * Handles clicking on the base container.
      * @internal
      */
-    private handleSpinbuttonAreaClick;
+    private handleBaseContainerClick;
     /**
      * Handles keydown on the base container (when popover is closed).
      * @internal

package/dist/components/timepicker/timepicker.component.js

@@ -218,16 +218,25 @@ class TimePicker extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)
      * @internal
      */
     focusMenuItemOnOpen() {
-        const options = this.getTimeOptions();
-        const currentValue = this.internalToValue();
-        const selectedIndex = options.findIndex(opt => opt.value === currentValue);
-        this.focusedOptionIndex = selectedIndex >= 0 ? selectedIndex : 0;
+        this.focusedOptionIndex = this.getMenuItemFocusIndex();
         this.updateComplete
             .then(() => {
-            this.focusCurrentMenuItem();
+            window.requestAnimationFrame(() => {
+                this.focusCurrentMenuItem();
+            });
         })
             .catch(() => { });
     }
+    /**
+     * Gets the option index that should receive focus when the menu opens.
+     * @internal
+     */
+    getMenuItemFocusIndex() {
+        const options = this.getTimeOptions();
+        const currentValue = this.internalToValue();
+        const selectedIndex = options.findIndex(opt => opt.value === currentValue);
+        return selectedIndex >= 0 ? selectedIndex : 0;
+    }
     /**
      * Focuses the menu item at the current focusedOptionIndex.
      * @internal
@@ -238,8 +247,10 @@ class TimePicker extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)
         if (!listbox)
             return;
         const items = listbox.querySelectorAll('mdc-option');
-        if (items[this.focusedOptionIndex]) {
-            items[this.focusedOptionIndex].focus();
+        const item = items[this.focusedOptionIndex];
+        if (item) {
+            item.focus({ preventScroll: true });
+            item.scrollIntoView({ block: 'nearest' });
         }
     }
     /** @internal */
@@ -410,21 +421,27 @@ class TimePicker extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)
         event.stopPropagation();
     }
     /**
-     * Handles clicking on the spinbutton area (not the dropdown button).
-     * Focuses the nearest spinbutton.
+     * Handles clicking on the base container.
      * @internal
      */
-    handleSpinbuttonAreaClick(event) {
-        var _a, _b;
+    handleBaseContainerClick(event) {
+        var _a, _b, _c;
         if (this.disabled || this.softDisabled || this.readonly)
             return;
         const target = event.target;
         // If clicking on a spinbutton itself, let it handle focus
         if (target.getAttribute('role') === 'spinbutton')
             return;
+        // If clicking the non-editable blank area, treat it like the dropdown button.
+        if (target.getAttribute('part') === 'base-container' || target.getAttribute('part') === 'spinbutton-group') {
+            this.displayPopover = !this.displayPopover;
+            (_a = this.dropdownButton) === null || _a === void 0 ? void 0 : _a.focus();
+            event.stopPropagation();
+            return;
+        }
         // Otherwise focus the hours spinbutton
-        (_a = this.hoursInput) === null || _a === void 0 ? void 0 : _a.focus();
-        (_b = this.hoursInput) === null || _b === void 0 ? void 0 : _b.select();
+        (_b = this.hoursInput) === null || _b === void 0 ? void 0 : _b.focus();
+        (_c = this.hoursInput) === null || _c === void 0 ? void 0 : _c.select();
     }
     /**
      * Handles keydown on the base container (when popover is closed).
@@ -771,7 +788,7 @@ class TimePicker extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)
           id="${TRIGGER_ID}"
           part="base-container"
           class="mdc-focus-ring"
-          @click="${this.handleSpinbuttonAreaClick}"
+          @click="${this.handleBaseContainerClick}"
           @keydown="${this.handleBaseKeydown}"
         >
           <div part="spinbutton-group">
@@ -868,6 +885,7 @@ class TimePicker extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)
           hide-on-escape
           focus-back-to-trigger
           focus-trap
+          element-index-to-receive-focus="${this.getMenuItemFocusIndex()}"
           disable-aria-expanded
           size
           ?disable-flip="${this.disableFlip}"

package/dist/components/timepicker/timepicker.styles.js

@@ -9,6 +9,7 @@ const styles = css `
     --mdc-timepicker-width: fit-content;
     --mdc-timepicker-listbox-width: 100%;
     --mdc-timepicker-listbox-height: 15rem;
+    --mdc-timepicker-option-scroll-margin: 0.25rem;
 
     display: flex;
     flex-direction: column;
@@ -150,6 +151,10 @@ const styles = css `
     max-height: var(--mdc-popover-internal-available-height);
   }
 
+  :host mdc-option {
+    scroll-margin-block: var(--mdc-timepicker-option-scroll-margin);
+  }
+
   /* Help text border colors */
   :host([help-text-type='success'])::part(base-container),
   :host([help-text-type='warning'])::part(base-container),

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@momentum-design/components",
   "packageManager": "yarn@3.2.4",
-  "version": "0.133.31",
+  "version": "0.133.32",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"