@trimble-oss/moduswebcomponents
Version:
Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust
35 lines (34 loc) • 2.3 kB
TypeScript
/**
* WithTreeMenu story behavior split by theme.
*
* | Concern | Connect | Modern / Classic |
* |---------|---------|-------------------|
* | Navbar ↔ side-nav sync (`handleMenuOpenChange`) | Shared | Shared |
* | Stale `mainMenuOpenChange` after click-outside collapse (`suppressNextMenuOpen`) | Shared | Shared |
* | `expandedChange` submenu cleanup | Flyout + `blockExpand` | `collapseSubmenu()` only |
* | Data row start slot | Flyout dropdown | `master_data` icon |
* | `hideFlyout` / flyout timers | Yes | No |
* | Collapsed rail CSS (hide labels, end slot, grid) | Yes | No |
* | `min-width` 5rem collapsed rail | Story arg (Connect layout) | Default 4rem when arg omitted |
*/
/** Side-nav width transition (modus-wc-side-navigation.scss). */
export declare const WITH_TREE_MENU_SIDE_NAV_COLLAPSE_MS = 220;
export type WithTreeMenuFlyoutState = {
dataIconDropdown: HTMLElement | null;
flyoutOpenTimer: ReturnType<typeof setTimeout> | null;
collapseFlyoutTimer: ReturnType<typeof setTimeout> | null;
};
export type WithTreeMenuMenuOpenSuppress = {
get: () => boolean;
set: (value: boolean) => void;
};
export declare const hideWithTreeMenuFlyout: (state: WithTreeMenuFlyoutState) => void;
export declare const setWithTreeMenuDataFlyoutDisabled: (state: WithTreeMenuFlyoutState, disabled: boolean) => void;
export declare const openWithTreeMenuDataFlyout: (state: WithTreeMenuFlyoutState, defer?: boolean) => void;
/** Modern/Classic: same pattern as WithSubmenu — no flyout or blockExpand. */
export declare const handleWithTreeMenuExpandedChangeClassicModern: (e: CustomEvent<boolean>, eventSource: HTMLElement, menuOpenSuppress: WithTreeMenuMenuOpenSuppress) => void;
/** Connect: flyout, blockExpand, and inline submenu coordination. */
export declare const handleWithTreeMenuExpandedChangeConnect: (e: CustomEvent<boolean>, eventSource: HTMLElement, flyoutState: WithTreeMenuFlyoutState, menuOpenSuppress: WithTreeMenuMenuOpenSuppress) => void;
/** Navbar hamburger ↔ side-nav expanded (all themes). */
export declare const handleWithTreeMenuMenuOpenChange: (e: CustomEvent<boolean>, menuOpenSuppress: WithTreeMenuMenuOpenSuppress) => void;
export declare const resetWithTreeMenuForNonConnectTheme: (flyoutState: WithTreeMenuFlyoutState) => void;