@lumx/core 4.4.1-alpha.1 → 4.4.1-alpha.2

package/js/components/Tooltip/Tests.d.ts

@@ -0,0 +1,11 @@
+import { SetupOptions } from '../../../testing';
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+export declare const setup: (propsOverride: any | undefined, { render, ...options }: SetupOptions<any>) => {
+    props: any;
+    tooltip: Element | null;
+    wrapper: Partial<import("../../../testing").SetupResult>;
+};
+declare const _default: (renderOptions: SetupOptions<any>) => void;
+export default _default;

package/js/components/Tooltip/constants.d.ts

@@ -0,0 +1,10 @@
+export declare const ARIA_LINK_MODES: readonly ["aria-describedby", "aria-labelledby"];
+/**
+ * Arrow size (in pixel).
+ */
+export declare const ARROW_SIZE = 8;
+/**
+ * Make sure tooltip appear above popovers.
+ * Hardcoded as POPOVER_ZINDEX (9999) + 1.
+ */
+export declare const TOOLTIP_ZINDEX = 10000;

package/js/components/Tooltip/tooltipOpenManager.d.ts

@@ -0,0 +1,21 @@
+export interface TooltipOpenManagerOptions {
+    /** Delay in millisecond to display the tooltip. */
+    delay?: number;
+    /** Callback to update the open state. */
+    onStateChange: (isOpen: boolean) => void;
+}
+export interface TooltipOpenManager {
+    /** Attach event listeners to the anchor element. */
+    attachAnchor(anchorElement: HTMLElement): void;
+    /** Attach event listeners to the popper element (for hover support). */
+    attachPopper(popperElement: HTMLElement | null): void;
+    /** Close the tooltip immediately (for escape key integration). */
+    close(): void;
+    /** Destroy the manager, clearing all timers and detaching events. */
+    destroy(): void;
+}
+/**
+ * Framework-agnostic open/close state machine for tooltip.
+ * Manages hover, touch, focus, timers, and escape key behavior.
+ */
+export declare function createTooltipOpenManager(options: TooltipOpenManagerOptions): TooltipOpenManager;

package/js/constants/browser/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Check if we are running in a true browser (not SSR and not jsdom test environment).
+ */
+export declare const IS_BROWSER: boolean;
+/**
+ * Optional global `window` instance (not defined when running SSR).
+ */
+export declare const WINDOW: (Window & typeof globalThis) | undefined;
+/**
+ * Optional global `document` instance (not defined when running SSR).
+ */
+export declare const DOCUMENT: Document | undefined;

package/js/constants/browser/index.js

@@ -0,0 +1,14 @@
+/**
+ * Check if we are running in a true browser (not SSR and not jsdom test environment).
+ */
+const IS_BROWSER = typeof window !== 'undefined' && !window.navigator.userAgent.includes('jsdom');
+/**
+ * Optional global `window` instance (not defined when running SSR).
+ */
+const WINDOW = typeof window !== 'undefined' ? window : undefined;
+/**
+ * Optional global `document` instance (not defined when running SSR).
+ */
+const DOCUMENT = typeof document !== 'undefined' ? document : undefined;
+
+export { DOCUMENT, IS_BROWSER, WINDOW };

package/js/constants/index.d.ts

@@ -2,3 +2,4 @@ export * from './keycodes';
 export * from './components';
 export * from './enums';
 export * from './className';
+export * from './browser';

package/js/constants/index.js

@@ -2,3 +2,4 @@ export { BACKSPACE_KEY_CODE, DOWN_KEY_CODE, ENTER_KEY_CODE, ESCAPE_KEY_CODE, LEF
 export { DIALOG_TRANSITION_DURATION, EXPANSION_PANEL_TRANSITION_DURATION, NOTIFICATION_TRANSITION_DURATION, SLIDESHOW_TRANSITION_DURATION, TOOLTIP_HOVER_DELAY, TOOLTIP_LONG_PRESS_DELAY } from './components/index.js';
 export { Alignment, AspectRatio, ColorPalette, ColorVariant, Emphasis, Kind, Orientation, REAL_SIZE_FOR_LUMX_SIZE, Size, Theme, Typography, TypographyCustom, TypographyInterface, TypographyTitleCustom, WhiteSpace } from './enums/index.js';
 export { VISUALLY_HIDDEN } from './className/index.js';
+export { DOCUMENT, IS_BROWSER, WINDOW } from './browser/index.js';

package/js/utils/ClickAway/index.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Shared types and logic for ClickAway detection.
+ *
+ * ClickAway detects clicks outside a set of elements and triggers a callback.
+ * The core logic (event listening + target checking) is framework-agnostic.
+ * Framework-specific wrappers (React hook, Vue composable) and context providers
+ * (React context, Vue provide/inject) are implemented in each framework package.
+ */
+import type { Falsy } from '@lumx/core/js/types';
+/** Event types that trigger click away detection. */
+export declare const CLICK_AWAY_EVENT_TYPES: readonly ["mousedown", "touchstart"];
+/** Callback triggered when a click away is detected. */
+export type ClickAwayCallback = EventListener | Falsy;
+/**
+ * Check if the click event targets are outside all the given elements.
+ *
+ * @param targets - The event target elements (from `event.target` and `event.composedPath()`).
+ * @param elements - The elements considered "inside" the click away context.
+ * @returns `true` if the click is outside all elements (i.e. a click away).
+ */
+export declare function isClickAway(targets: HTMLElement[], elements: HTMLElement[]): boolean;
+/**
+ * Imperative setup for click away detection.
+ * Adds mousedown/touchstart listeners on `document` and calls the callback when a click
+ * occurs outside the elements returned by `getElements`.
+ *
+ * @param getElements - Getter returning the current list of elements considered "inside".
+ * @param callback - Callback to invoke on click away.
+ * @returns A teardown function that removes the event listeners.
+ */
+export declare function setupClickAway(getElements: () => HTMLElement[], callback: ClickAwayCallback): (() => void) | undefined;

package/js/utils/Portal/Tests.d.ts

@@ -0,0 +1,25 @@
+import type { Screen } from '@testing-library/dom';
+import type { PortalInit } from '.';
+export interface PortalTestOptions {
+    screen: Screen;
+    /**
+     * Render Portal with a child element (a div with `data-testid="portal-child"` containing "Hello from portal").
+     * Return the render result (must have a `container` property for wrapper queries and `unmount` for cleanup).
+     */
+    renderPortal(options: {
+        enabled?: boolean;
+        /** Wrap the Portal in a PortalProvider with this value */
+        portalInit?: PortalInit;
+        /** Wrap the Portal + PortalProvider in a div#wrapper */
+        wrapInDiv?: boolean;
+    }): {
+        container: Element;
+        unmount: () => void;
+    };
+}
+/**
+ * Shared Portal + PortalProvider tests.
+ * Framework-specific render logic is injected via `renderPortal`.
+ */
+declare const _default: ({ screen, renderPortal }: PortalTestOptions) => void;
+export default _default;

package/js/utils/Portal/index.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Shared types for Portal and PortalProvider.
+ *
+ * Portal renders children in a subtree outside the current DOM hierarchy.
+ * PortalProvider customizes where Portal children render.
+ *
+ * Unlike other core components, Portal has no shared render function
+ * since the implementation is entirely framework-specific
+ * (React's createPortal vs Vue's Teleport).
+ */
+export type Container = DocumentFragment | Element | string;
+/**
+ * Portal initializing function.
+ * If it does not provide a container, the Portal children will render in the standard component tree and not in a portal.
+ */
+export type PortalInit = () => {
+    container?: Container;
+    teardown?: () => void;
+};
+export interface PortalProps {
+    enabled?: boolean;
+}
+export interface PortalProviderProps {
+    value: PortalInit;
+}

package/js/utils/browser/isFocusVisible.d.ts

@@ -0,0 +1,2 @@
+/** Check if the focus is visible on the given element */
+export declare const isFocusVisible: (element?: HTMLElement) => boolean | undefined;

package/js/utils/browser/isHoverNotSupported.d.ts

@@ -0,0 +1,2 @@
+/** Return true if the browser does not support pointer hover */
+export declare const isHoverNotSupported: () => boolean;

package/js/utils/classNames/color/index.js

@@ -1,4 +1,5 @@
 import { ColorVariant } from '../../../constants/enums/index.js';
+import '../../../constants/browser/index.js';
 import { resolveColorWithVariants } from '../../../../_internal/DPnPEC08.js';
 
 /**

package/js/utils/classNames/visually-hidden/index.js

@@ -1,5 +1,6 @@
 import '../../../constants/enums/index.js';
 import { VISUALLY_HIDDEN } from '../../../constants/className/index.js';
+import '../../../constants/browser/index.js';
 
 /**
  * Visually hidden class name.

package/js/utils/function/listenerTower.d.ts

@@ -0,0 +1,13 @@
+export type Listener = {
+    enable(): void;
+    disable(): void;
+};
+/**
+ * Keep track of listeners, only the last registered listener gets activated at any point (previously registered
+ * listener are disabled).
+ * When a listener gets unregistered, the previously registered listener gets enabled again.
+ */
+export declare function makeListenerTowerContext(): {
+    register(listener: Listener): void;
+    unregister(listener: Listener): void;
+};

package/package.json

@@ -6,7 +6,7 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/icons": "^4.4.1-alpha.1",
+        "@lumx/icons": "^4.4.1-alpha.2",
         "classnames": "^2.3.2",
         "focus-visible": "^5.0.2",
         "lodash": "4.17.23",
@@ -66,7 +66,7 @@
         "update-version-changelog": "yarn version-changelog ../../CHANGELOG.md"
     },
     "sideEffects": false,
-    "version": "4.4.1-alpha.1",
+    "version": "4.4.1-alpha.2",
     "devDependencies": {
         "@rollup/plugin-typescript": "^12.3.0",
         "@testing-library/dom": "^10.4.1",

package/stories/types.d.ts

@@ -13,6 +13,13 @@ interface StoryDecorators {
     withNestedProps?: () => Decorator;
     /** Decorator wrapping story in a resizable box */
     withResizableBox?: (options?: Record<string, any>) => Decorator;
+    /** Decorator managing a local state for a value prop, updating it via onChange */
+    withValueOnChange?: (options?: {
+        valueProp?: string;
+        valueTransform?: (v: any) => any;
+    }) => Decorator;
+    /** Decorator forcing a minimum screen size for Chromatic snapshots */
+    withChromaticForceScreenSize?: () => Decorator;
 }
 /** A partial Storybook story object (args, argTypes, render, decorators, etc.) */
 type StoryOverride = Record<string, any>;