@uni-design-system/uni-angular 8.3.0 → 8.3.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @uni-design-system/uni-angular
 
+## 8.3.1
+
+### Patch Changes
+
+- [`66f4051`](https://github.com/uni-design-system/uni/commit/66f4051c69b6b55ed2c2b95425fd8aa1a1bccdcd) Thanks [@gaenglish](https://github.com/gaenglish)! - `uni-combobox` docs: "Allowing new values" — free text never commits implicitly (closed-set contract: typing filters, a non-matching draft reverts with `(rejected)`). The supported create-new pattern is now documented with a working story: drive `[options]` from the debounced `(query)` with `[filterLocally]="false"` and, when nothing matches exactly, append a sentinel option — `{ label: `Create "${text}"`, value: … }`. As a real option it commits through every normal path (arrow + Enter, click, Enter when the filter narrows to it alone); resolve it in `(selected)` by minting the entity and writing the model. Blur intentionally never commits the sentinel — creation takes an explicit Enter or click. Lighter alternative: listen to `(rejected: { query })` and offer creation outside the control. If most values are user-created, use `uni-tag-input` (open set) instead.
+
+- [`dc7aef9`](https://github.com/uni-design-system/uni/commit/dc7aef994abd4e7ac73de64bdea2d3ce5cb18db3) Thanks [@gaenglish](https://github.com/gaenglish)! - `uni-dropdown` (and everything riding it — the date picker popup, menus, multi-select): the open/close scale animation now originates from the corner actually touching the trigger. The origin was mapped statically from the _requested_ placement, but `position-try-fallbacks` lets the browser flip the panel at viewport edges — so a `bottom-end` date picker repositioned above its field still animated from the top-right corner. The panel is now measured on each toggle (open and close-start) and the transform origin follows the rendered position, via the new cdk helper `transformOriginFor(panelRect, triggerRect)`.
+
 ## 8.3.0
 
 ### Minor Changes

package/fesm2022/uni-design-system-uni-angular.mjs

@@ -637,6 +637,40 @@ function spotlightStyles(anchor, options = {}) {
         cover: { ...blocker, ...holeInset(0) },
     };
 }
+/**
+ * Transform origin for a panel's open/close scale animation, derived from
+ * where the panel **actually** rendered relative to its anchor — not from the
+ * requested placement. `position-try-fallbacks` lets the browser flip a panel
+ * at viewport edges, and a statically mapped origin then animates from the
+ * wrong corner (a `bottom-end` picker flipped above its field would still
+ * scale from `top right`). Measure after the popover is shown and apply the
+ * result as an inline style.
+ *
+ * Returns keyword pairs like `'top right'` / `'bottom center'`, or `null`
+ * when the panel has no box yet (e.g. `display: none`, or jsdom).
+ */
+function transformOriginFor(panel, trigger) {
+    if (!panel.width && !panel.height)
+        return null;
+    // Which side of the trigger the panel sits on wins; when it overlaps on an
+    // axis (aligned placements), the closer-aligned edge is the anchored one.
+    const axis = (panelStart, panelEnd, triggerStart, triggerEnd) => {
+        if (panelStart >= triggerEnd)
+            return 'start'; // panel after the trigger: grows away from its start edge
+        if (panelEnd <= triggerStart)
+            return 'end'; // panel before the trigger: grows toward its end edge
+        const startGap = Math.abs(panelStart - triggerStart);
+        const endGap = Math.abs(panelEnd - triggerEnd);
+        if (Math.abs(startGap - endGap) <= 1)
+            return 'center';
+        return startGap < endGap ? 'start' : 'end';
+    };
+    const y = axis(panel.top, panel.bottom, trigger.top, trigger.bottom);
+    const x = axis(panel.left, panel.right, trigger.left, trigger.right);
+    const vertical = y === 'start' ? 'top' : y === 'end' ? 'bottom' : 'center';
+    const horizontal = x === 'start' ? 'left' : x === 'end' ? 'right' : 'center';
+    return `${vertical} ${horizontal}`;
+}
 
 /**
  * Shared plumbing for top-layer overlays built on the native `popover`
@@ -4947,6 +4981,9 @@ class UniDropdownComponent extends BaseComponent {
     get _dropdown() {
         return this.dropdownRef.nativeElement;
     }
+    // Pre-measure default only: the requested placement's corner. The real
+    // origin is measured per toggle (syncTransformOrigin), because
+    // position-try fallbacks may have flipped the panel.
     transformOriginMap = {
         top: 'bottom center',
         right: 'center left',
@@ -5020,6 +5057,10 @@ class UniDropdownComponent extends BaseComponent {
         // Sync state if user invokes light-dismiss via outside click or Escape key
         this.renderer.listen(this._dropdown, 'toggle', (event) => {
             const isOpened = event.newState === 'open';
+            // Both edges: on open so the entry scale grows out of the trigger, and
+            // on close-start so a panel the browser flipped while open (scroll near
+            // a viewport edge) still collapses back toward the trigger.
+            this.syncTransformOrigin();
             this.showing.set(isOpened);
             this.renderer.setAttribute(this._focusTarget, 'aria-expanded', `${isOpened}`);
             if (isOpened) {
@@ -5031,6 +5072,19 @@ class UniDropdownComponent extends BaseComponent {
             }
         });
     }
+    /**
+     * Scale the open/close animation from the corner touching the trigger,
+     * wherever the browser actually placed the panel. The static
+     * `transformOriginMap` covers only the *requested* placement; with
+     * `position-try-fallbacks` the panel may have flipped at a viewport edge,
+     * and a `bottom-end` picker rendered above its field would otherwise still
+     * animate from the top-right corner.
+     */
+    syncTransformOrigin() {
+        const origin = transformOriginFor(this._dropdown.getBoundingClientRect(), this._trigger.getBoundingClientRect());
+        if (origin)
+            this.renderer.setStyle(this._dropdown, 'transform-origin', origin);
+    }
     /**
      * Returns focus to the trigger when the popover closes while focus was
      * inside it (or was dropped on <body> by the top layer closing), so
@@ -11225,5 +11279,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BodyRenderDirective, ConfirmationDialogComponent, DragAndDropDirective, FOCUSABLE_SELECTOR, ListboxNavigation, LocalStorageService, NotificationService, NotificationsComponent, RippleDirective, TRANSFORM_ORIGINS, ThemeService, UNI_THEMES, UniAlertComponent, UniAppBarComponent, UniAvatarComponent, UniAvatarGroupComponent, UniBackgroundComponent, UniBadgeComponent, UniBaseDatasource, UniBoxComponent, UniBreadcrumbComponent, UniButtonComponent, UniButtonGroupComponent, UniCalendarComponent, UniCalloutComponent, UniCardComponent, UniCardContentComponent, UniCardHeaderComponent, UniCenterComponent, UniCheckboxComponent, UniComboboxComponent, UniDataSearchComponent, UniDataTableComponent, UniDateInputComponent, UniDateTimeInputComponent, UniDebounceInputComponent, UniDialogButtonsComponent, UniDialogComponent, UniDialogHeaderComponent, UniDividerComponent, UniDrawerComponent, UniDropdownComponent, UniExpandAreaComponent, UniExpandComponent, UniExpandToggleComponent, UniFileDropZoneComponent, UniGridAreaComponent, UniGridComponent, UniIconButtonComponent, UniIconComponent, UniInputBoxComponent, UniInputComponent, UniJsonViewComponent, UniMenuComponent, UniMultiSelectComponent, UniMultiSelectDropdownComponent, UniNotificationBadgeComponent, UniPaginatorComponent, UniPopoverComponent, UniProgressBarComponent, UniProgressGaugeComponent, UniRadioComponent, UniRecordDatasource, UniRowComponent, UniScrollAreaComponent, UniSearchInputComponent, UniSelectComponent, UniServerSideDatasource, UniSkeletonComponent, UniSliderComponent, UniSnackbarComponent, UniSortHeaderComponent, UniStackComponent, UniStatComponent, UniSymbolComponent, UniTabComponent, UniTabsComponent, UniTagComponent, UniTagInputComponent, UniTextComponent, UniTextareaComponent, UniThemeBuilderComponent, UniThemeSwitchComponent, UniTimeInputComponent, UniToggleComponent, UniTooltipComponent, UniTourComponent, UniWrapComponent, acceptableFile, addDays, addMonths, anchorArrowStyles, anchorStyles, buildMonthGrid, clearAnchorName, createListboxNavigation, dayOfWeek, daysInMonth, discreteOverlayTransition, focusableElements, formatDate, formatMonthHeading, formatTime, getFileExtension, inclusiveDayCount, isDivider, isToggleOpen, isValidDate, isoDate, joinDateTime, listboxPopupStyles, localeDatePlaceholder, localeDefaultHour12, localeFieldOrder, localeMonthNames, localeWeekStart, monthOf, motionSafe, newAnchorName, parseDateText, parseTimeText, resolveElement, resolveFocusTarget, restoreOverlayFocus, setAnchorName, splitDateTime, spotlightStyles, timeSlots, todayIso, uniqueId, useTimer, visuallyHidden, weekdayNames };
+export { BodyRenderDirective, ConfirmationDialogComponent, DragAndDropDirective, FOCUSABLE_SELECTOR, ListboxNavigation, LocalStorageService, NotificationService, NotificationsComponent, RippleDirective, TRANSFORM_ORIGINS, ThemeService, UNI_THEMES, UniAlertComponent, UniAppBarComponent, UniAvatarComponent, UniAvatarGroupComponent, UniBackgroundComponent, UniBadgeComponent, UniBaseDatasource, UniBoxComponent, UniBreadcrumbComponent, UniButtonComponent, UniButtonGroupComponent, UniCalendarComponent, UniCalloutComponent, UniCardComponent, UniCardContentComponent, UniCardHeaderComponent, UniCenterComponent, UniCheckboxComponent, UniComboboxComponent, UniDataSearchComponent, UniDataTableComponent, UniDateInputComponent, UniDateTimeInputComponent, UniDebounceInputComponent, UniDialogButtonsComponent, UniDialogComponent, UniDialogHeaderComponent, UniDividerComponent, UniDrawerComponent, UniDropdownComponent, UniExpandAreaComponent, UniExpandComponent, UniExpandToggleComponent, UniFileDropZoneComponent, UniGridAreaComponent, UniGridComponent, UniIconButtonComponent, UniIconComponent, UniInputBoxComponent, UniInputComponent, UniJsonViewComponent, UniMenuComponent, UniMultiSelectComponent, UniMultiSelectDropdownComponent, UniNotificationBadgeComponent, UniPaginatorComponent, UniPopoverComponent, UniProgressBarComponent, UniProgressGaugeComponent, UniRadioComponent, UniRecordDatasource, UniRowComponent, UniScrollAreaComponent, UniSearchInputComponent, UniSelectComponent, UniServerSideDatasource, UniSkeletonComponent, UniSliderComponent, UniSnackbarComponent, UniSortHeaderComponent, UniStackComponent, UniStatComponent, UniSymbolComponent, UniTabComponent, UniTabsComponent, UniTagComponent, UniTagInputComponent, UniTextComponent, UniTextareaComponent, UniThemeBuilderComponent, UniThemeSwitchComponent, UniTimeInputComponent, UniToggleComponent, UniTooltipComponent, UniTourComponent, UniWrapComponent, acceptableFile, addDays, addMonths, anchorArrowStyles, anchorStyles, buildMonthGrid, clearAnchorName, createListboxNavigation, dayOfWeek, daysInMonth, discreteOverlayTransition, focusableElements, formatDate, formatMonthHeading, formatTime, getFileExtension, inclusiveDayCount, isDivider, isToggleOpen, isValidDate, isoDate, joinDateTime, listboxPopupStyles, localeDatePlaceholder, localeDefaultHour12, localeFieldOrder, localeMonthNames, localeWeekStart, monthOf, motionSafe, newAnchorName, parseDateText, parseTimeText, resolveElement, resolveFocusTarget, restoreOverlayFocus, setAnchorName, splitDateTime, spotlightStyles, timeSlots, todayIso, transformOriginFor, uniqueId, useTimer, visuallyHidden, weekdayNames };
 //# sourceMappingURL=uni-design-system-uni-angular.mjs.map