@brickclay-org/ui 0.1.72 → 0.1.73

package/index.d.ts

@@ -2614,13 +2614,27 @@ declare class BkMenu {
     activeItemId: string;
     /** Tint item icons: dark by default, white on the active (dark) row. */
     tintIcons: boolean;
+    /**
+     * Optional max height for the menu (e.g. '320px', '60vh', or a number of px).
+     * When set, the item list scrolls vertically once it exceeds this height.
+     * Pop-up fly-outs are positioned `fixed`, so they still escape the scroll box.
+     */
+    maxHeight: string | number | null;
     activeItemIdChange: EventEmitter<string>;
     itemClick: EventEmitter<MenuItem>;
     /** Ids of currently expanded/opened parent nodes. */
     private readonly openIds;
+    /** Viewport coordinates for each open fixed-position fly-out, keyed by id. */
+    readonly popupPos: Map<string, {
+        top: number;
+        left: number;
+    }>;
     constructor(host: ElementRef<HTMLElement>);
     get isVertical(): boolean;
     get isPopup(): boolean;
+    get maxHeightStyle(): string | null;
+    popupTop(item: MenuItem): number | null;
+    popupLeft(item: MenuItem): number | null;
     hasChildren(item: MenuItem): boolean;
     isOpen(item: MenuItem): boolean;
     isActive(item: MenuItem): boolean;
@@ -2628,13 +2642,15 @@ declare class BkMenu {
     isHighlighted(item: MenuItem): boolean;
     inlineIndent(level: number): number | null;
     onItemClick(item: MenuItem, siblings: MenuItem[], event: Event): void;
-    onItemEnter(item: MenuItem, siblings: MenuItem[]): void;
+    onItemEnter(item: MenuItem, siblings: MenuItem[], event: MouseEvent, level: number): void;
+    private computePopupPos;
     onItemLeave(item: MenuItem): void;
     private toggle;
     private closeBranch;
     onDocumentClick(event: MouseEvent): void;
+    onViewportChange(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<BkMenu, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BkMenu, "bk-menu", never, { "items": { "alias": "items"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "submenuMode": { "alias": "submenuMode"; "required": false; }; "singleOpen": { "alias": "singleOpen"; "required": false; }; "activeItemId": { "alias": "activeItemId"; "required": false; }; "tintIcons": { "alias": "tintIcons"; "required": false; }; }, { "activeItemIdChange": "activeItemIdChange"; "itemClick": "itemClick"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BkMenu, "bk-menu", never, { "items": { "alias": "items"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "submenuMode": { "alias": "submenuMode"; "required": false; }; "singleOpen": { "alias": "singleOpen"; "required": false; }; "activeItemId": { "alias": "activeItemId"; "required": false; }; "tintIcons": { "alias": "tintIcons"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; }, { "activeItemIdChange": "activeItemIdChange"; "itemClick": "itemClick"; }, never, never, true, never>;
 }
 
 export { BKTooltipDirective, BK_DEFAULT_DIALOG_CONFIG, BK_DIALOG_DATA, BK_DIALOG_GLOBAL_CONFIG, BkAvatar, BkAvatarUploader, BkBadge, BkButton, BkButtonGroup, BkCalendarManagerService, BkCheckbox, BkColumnFilterService, BkColumnSelect, BkCustomCalendar, BkDialogActions, BkDialogClose, BkDialogContent, BkDialogModule, BkDialogRef, BkDialogService, BkDialogTitle, BkDropdown, BkFileCard, BkFilePicker, BkGrid, BkHierarchicalSelect, BkIconButton, BkInput, BkInputChips, BkLoader, BkMenu, BkPagination, BkPill, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTabs, BkTextarea, BkTimePicker, BkToastr, BkToastrService, BkToggle, BkValidator, BrickclayIcons, BrickclayLib, CalendarModule, CalendarSelection, ColumnFilterOption, getDialogBackdropAnimation, getDialogPanelAnimation };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brickclay-org/ui",
-  "version": "0.1.72",
+  "version": "0.1.73",
   "schematics": "./schematics/collection.json",
   "ng-add": {
     "save": "dependencies"

package/src/lib/menu/menu.css

@@ -19,6 +19,7 @@
 
   display: block;
   width: 100%;
+  max-width: 100%;
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 500;
@@ -27,29 +28,11 @@
   color: var(--menu-text);
   border: 1px solid var(--menu-border);
   border-radius: var(--menu-radius);
-}
-
-/* Clip rounded corners for inline/default menus. Pop-up menus must NOT clip,
-   otherwise the fly-out panels get cut off at the menu's edge. */
-.bk-menu:not(.bk-menu--popup) {
+  /* Safe to clip to rounded corners: pop-up fly-outs are position:fixed and
+     escape this box entirely, so nothing gets cut off. */
   overflow: hidden;
 }
 
-/* Round the first/last top-level buttons in pop-up mode so the active/hover
-   background still respects the menu's corners without clipping fly-outs. */
-.bk-menu--popup.bk-menu--vertical > .bk-menu__list > .bk-menu__item:first-child > .bk-menu__button {
-  border-radius: 8px 8px 0 0;
-}
-.bk-menu--popup.bk-menu--vertical > .bk-menu__list > .bk-menu__item:last-child > .bk-menu__button {
-  border-radius: 0 0 8px 8px;
-}
-.bk-menu--popup.bk-menu--horizontal > .bk-menu__list > .bk-menu__item:first-child > .bk-menu__button {
-  border-radius: 8px 0 0 8px;
-}
-.bk-menu--popup.bk-menu--horizontal > .bk-menu__list > .bk-menu__item:last-child > .bk-menu__button {
-  border-radius: 0 8px 8px 0;
-}
-
 /* ---- Lists ---- */
 .bk-menu__list,
 .bk-menu__submenu {
@@ -58,16 +41,18 @@
   padding: 0;
 }
 
-/* Horizontal top-level row (menubar). */
+/* Scroll container: vertical scroll past max-height, horizontal scroll if a
+   deeply-indented inline row is wider than the menu. Fixed fly-outs escape it. */
+.bk-menu__list--scroll {
+  overflow: auto;
+}
+
+/* Horizontal top-level row (menubar). Scrolls when crowded — fixed fly-outs are
+   unaffected by the overflow. */
 .bk-menu--horizontal > .bk-menu__list {
   display: flex;
   flex-direction: row;
   align-items: stretch;
-}
-
-/* Scroll a crowded row only when NOT in pop-up mode — `overflow-x: auto`
-   forces `overflow-y` to `auto`, which would clip the drop-down fly-outs. */
-.bk-menu--horizontal:not(.bk-menu--popup) > .bk-menu__list {
   overflow-x: auto;
 }
 
@@ -145,10 +130,13 @@
 .bk-menu__label {
   flex: 1 1 auto;
   min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .bk-menu--horizontal > .bk-menu__list > .bk-menu__item > .bk-menu__button > .bk-menu__label {
   flex: 0 0 auto;
+  overflow: visible;
 }
 
 /* ---- Chevron ---- */
@@ -185,9 +173,14 @@
    Pop-up submenus — floating panels, hidden until open.
    ========================================================================= */
 .bk-menu__submenu--popup {
-  position: absolute;
-  z-index: 50;
+  /* Fixed so the fly-out escapes the menu's overflow/scroll box and renders
+     outside the nav. Coordinates are set inline (top/left) from JS. */
+  position: fixed;
+  z-index: 1000;
   min-width: 200px;
+  max-width: 280px;
+  max-height: calc(100vh - 16px);
+  overflow-y: auto;
   background: var(--menu-bg);
   border: 1px solid var(--menu-border);
   border-radius: 12px;
@@ -200,20 +193,6 @@
   display: block;
 }
 
-/* Fly out to the right (vertical menus and all deeper levels). */
-.bk-menu__submenu--popup-right {
-  top: 0;
-  left: 100%;
-  margin-left: 4px;
-}
-
-/* Drop down below (horizontal top-level items). */
-.bk-menu__submenu--popup-down {
-  top: 100%;
-  left: 0;
-  margin-top: 4px;
-}
-
 /* Invisible bridges spanning the gap between a parent and its fly-out, so the
    pointer stays "inside" the item while crossing — prevents hover flicker. */
 .bk-menu__submenu--popup-right::before {
@@ -244,12 +223,4 @@
   .bk-menu--horizontal > .bk-menu__list > .bk-menu__item > .bk-menu__button {
     width: 100%;
   }
-  /* On small screens, horizontal pop-ups behave like inline sections. */
-  .bk-menu--horizontal .bk-menu__submenu--popup-down {
-    position: static;
-    box-shadow: none;
-    border: 0;
-    margin: 0;
-    border-radius: 0;
-  }
 }