@lumx/core 4.5.1 → 4.5.2-alpha.1

package/js/components/Popover/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;
+    element: HTMLElement;
+    wrapper: Partial<import("../../../testing").SetupResult>;
+};
+declare const _default: (renderOptions: SetupOptions<any>) => void;
+export default _default;

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

@@ -0,0 +1,52 @@
+import { ValueOf } from '../../types/ValueOf';
+/**
+ * Different possible placements for the popover.
+ */
+export declare const Placement: {
+    readonly AUTO: "auto";
+    readonly AUTO_END: "auto-end";
+    readonly AUTO_START: "auto-start";
+    readonly TOP: "top";
+    readonly TOP_END: "top-end";
+    readonly TOP_START: "top-start";
+    readonly RIGHT: "right";
+    readonly RIGHT_END: "right-end";
+    readonly RIGHT_START: "right-start";
+    readonly BOTTOM: "bottom";
+    readonly BOTTOM_END: "bottom-end";
+    readonly BOTTOM_START: "bottom-start";
+    readonly LEFT: "left";
+    readonly LEFT_END: "left-end";
+    readonly LEFT_START: "left-start";
+};
+export type Placement = ValueOf<typeof Placement>;
+/**
+ * Offset of the popover.
+ */
+export interface Offset {
+    /** Offset size along the reference. */
+    along?: number;
+    /** Offset size away from the reference. */
+    away?: number;
+}
+/**
+ * Popover elevation index.
+ */
+export type Elevation = 1 | 2 | 3 | 4 | 5;
+/**
+ * Popover fit anchor width options.
+ */
+export declare const FitAnchorWidth: {
+    readonly MAX_WIDTH: "maxWidth";
+    readonly MIN_WIDTH: "minWidth";
+    readonly WIDTH: "width";
+};
+export type FitAnchorWidth = ValueOf<typeof FitAnchorWidth>;
+/**
+ * Arrow size (in pixel).
+ */
+export declare const ARROW_SIZE = 14;
+/**
+ * Popover default z-index
+ */
+export declare const POPOVER_ZINDEX = 9999;

package/js/components/Popover/popoverStyle.d.ts

@@ -0,0 +1,57 @@
+import { type Middleware, type Placement as FloatingPlacement, type MiddlewareData } from '@floating-ui/dom';
+import { type Offset, type Placement } from './constants';
+/**
+ * Parse a Popover placement into floating-ui placement or auto-placement config.
+ */
+export declare function parseAutoPlacement(placement?: Placement): {
+    isAuto: true;
+    autoAlignment?: undefined;
+    floatingPlacement?: undefined;
+} | {
+    isAuto: true;
+    autoAlignment: "start";
+    floatingPlacement?: undefined;
+} | {
+    isAuto: true;
+    autoAlignment: "end";
+    floatingPlacement?: undefined;
+} | {
+    floatingPlacement: FloatingPlacement;
+    isAuto: false;
+    autoAlignment?: undefined;
+};
+/**
+ * Parse the fitToAnchorWidth option into the CSS property name to apply.
+ */
+export declare function parseFitWidth(fitToAnchorWidth?: string | boolean): string | undefined;
+export interface BuildPopoverMiddlewareOptions {
+    /** Offset from the anchor element. */
+    offset?: Offset;
+    /** Whether the popover has an arrow. */
+    hasArrow?: boolean;
+    /** CSS property to fit to anchor width ('minWidth', 'maxWidth', 'width'). Already parsed via `parseFitWidth`. */
+    fitWidth?: string;
+    /** Whether to constrain height to viewport. */
+    fitWithinViewportHeight?: boolean;
+    /** Boundary element for overflow detection. */
+    boundary?: HTMLElement;
+    /** Parsed placement result from `parseAutoPlacement`. */
+    parsedPlacement: ReturnType<typeof parseAutoPlacement>;
+    /** Arrow element (required when hasArrow is true). */
+    arrowElement?: HTMLElement | null;
+}
+/**
+ * Build the floating-ui middleware array for popover positioning.
+ *
+ * Middleware order: offset → flip/autoPlacement → shift → size → arrow
+ */
+export declare function buildPopoverMiddleware(options: BuildPopoverMiddlewareOptions): Middleware[];
+/**
+ * Compute arrow CSS styles from floating-ui middleware data.
+ */
+export declare function computeArrowStyles(arrowData?: MiddlewareData['arrow']): Record<string, string> | undefined;
+/**
+ * Get the floating-ui placement from the parsed placement config.
+ * Returns undefined for auto-placement (floating-ui handles it via autoPlacement middleware).
+ */
+export declare function getFloatingPlacement(parsedPlacement: ReturnType<typeof parseAutoPlacement>): FloatingPlacement | undefined;

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

@@ -38,6 +38,7 @@ export declare const Size: {
 };
 export type Size = ValueOf<typeof Size>;
 export type GlobalSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
+export type AbstractSize = Extract<Size, 'tiny' | 'regular' | 'medium' | 'big' | 'huge'>;
 export declare const Orientation: {
     readonly horizontal: "horizontal";
     readonly vertical: "vertical";

package/js/types/jsx/PropsToOverride.d.ts

@@ -1,2 +1,2 @@
 /** list of generic props defined on JSX that need to be redefined for each framework */
-export type PropsToOverride = 'ref' | 'handleClick' | 'handleChange' | 'handleKeyPress';
+export type PropsToOverride = 'ref' | 'handleClick' | 'handleChange' | 'handleKeyPress' | 'handleClose';

package/js/utils/classNames/spacing/index.d.ts

@@ -1,5 +1,5 @@
 import type { Direction, Spacing } from '@lumx/core/js/types';
-import type { Size } from '@lumx/core/js/constants';
+import { type AbstractSize } from '@lumx/core/js/constants';
 /**
  * Returns a lumx classname for the given type, direction and size. For example, for
  * arguments type='padding', direction='right', size='regular' it returns lumx-spacing-padding-right-regular
@@ -8,7 +8,8 @@ import type { Size } from '@lumx/core/js/constants';
  * @param size - Size
  * @returns string
  */
-export declare function spacing(type: Spacing, direction?: Direction, size?: Size | null): string;
+export declare function spacing(type: Spacing, size: AbstractSize | null): string;
+export declare function spacing(type: Spacing, direction?: Direction, size?: AbstractSize | null): string;
 /**
  * Returns a list of lumx classnames for the given types, directions and sizes. For example, for
  * arguments [
@@ -22,16 +23,19 @@ export declare function spacing(type: Spacing, direction?: Direction, size?: Siz
 export declare const spacings: (spacingConfigs: {
     type: Spacing;
     direction?: Direction;
-    size?: Size | null;
+    size?: AbstractSize | null;
 }[]) => string;
 /**
  * Returns a lumx margin classname for the given direction and size. For example, for
  * arguments direction='right', size='regular' it returns lumx-spacing-margin-right-regular
+ *
+ * Can also be called with just a size: margin('regular') is equivalent to margin('all', 'regular').
  * @param direction - Direction
  * @param size - Size
  * @returns string
  */
-export declare const margin: (direction?: Direction, size?: Size | null) => string;
+export declare function margin(size: AbstractSize | null): string;
+export declare function margin(direction?: Direction, size?: AbstractSize | null): string;
 /**
  * Returns a list of lumx margin classnames for the given directions and sizes. For example, for
  * arguments [
@@ -44,16 +48,19 @@ export declare const margin: (direction?: Direction, size?: Size | null) => stri
  */
 export declare const margins: (marginConfigs: {
     direction?: Direction;
-    size?: Size | null;
+    size?: AbstractSize | null;
 }[]) => string;
 /**
  * Returns a lumx padding classname for the given direction and size. For example, for
  * arguments direction='right', size='regular' it returns lumx-spacing-padding-right-regular
+ *
+ * Can also be called with just a size: padding('regular') is equivalent to padding('all', 'regular').
  * @param direction - Direction
  * @param size - Size
  * @returns string
  */
-export declare const padding: (direction?: Direction, size?: Size | null) => string;
+export declare function padding(size: AbstractSize | null): string;
+export declare function padding(direction?: Direction, size?: AbstractSize | null): string;
 /**
  * Returns a list of lumx padding classnames for the given directions and sizes. For example, for
  * arguments [
@@ -66,5 +73,5 @@ export declare const padding: (direction?: Direction, size?: Size | null) => str
  */
 export declare const paddings: (paddingConfigs: {
     direction?: Direction;
-    size?: Size | null;
+    size?: AbstractSize | null;
 }[]) => string;

package/js/utils/classNames/spacing/index.js

@@ -1,22 +1,25 @@
 import classnames from 'classnames';
+import { Size } from '../../../constants/enums/index.js';
+import '../../../constants/browser/index.js';
 
-/**
- * Returns a lumx classname for the given type, direction and size. For example, for
- * arguments type='padding', direction='right', size='regular' it returns lumx-spacing-padding-right-regular
- * @param type - margin or padding
- * @param direction - Direction
- * @param size - Size
- * @returns string
- */
-function spacing(type, direction, size) {
+/** Set of valid AbstractSize values for runtime detection. */
+const ABSTRACT_SIZES = new Set([Size.tiny, Size.regular, Size.medium, Size.big, Size.huge]);
+function isAbstractSize(value) {
+    return typeof value === 'string' && ABSTRACT_SIZES.has(value);
+}
+function spacing(type, directionOrSize, size) {
+    // Resolve shorthand: spacing(type, size) => spacing(type, undefined, size)
+    const isShorthand = isAbstractSize(directionOrSize) || (directionOrSize === null && size === undefined);
+    const direction = isShorthand ? undefined : directionOrSize ?? undefined;
+    const resolvedSize = isShorthand ? directionOrSize : size;
     let baseClass = `lumx-spacing-${type}`;
     if (direction && direction !== 'all') {
         baseClass = `${baseClass}-${direction}`;
     }
-    if (size) {
-        baseClass = `${baseClass}-${size}`;
+    if (resolvedSize) {
+        baseClass = `${baseClass}-${resolvedSize}`;
     }
-    else if (size === null) {
+    else if (resolvedSize === null) {
         baseClass = `${baseClass}-none`;
     }
     return baseClass;
@@ -32,14 +35,12 @@ function spacing(type, direction, size) {
  * @returns string
  */
 const spacings = (spacingConfigs) => classnames(spacingConfigs.map((spa) => spacing(spa.type, spa.direction, spa.size)));
-/**
- * Returns a lumx margin classname for the given direction and size. For example, for
- * arguments direction='right', size='regular' it returns lumx-spacing-margin-right-regular
- * @param direction - Direction
- * @param size - Size
- * @returns string
- */
-const margin = (direction, size) => spacing('margin', direction, size);
+function margin(directionOrSize, size) {
+    if (isAbstractSize(directionOrSize) || (directionOrSize === null && size === undefined)) {
+        return spacing('margin', directionOrSize);
+    }
+    return spacing('margin', directionOrSize ?? undefined, size);
+}
 /**
  * Returns a list of lumx margin classnames for the given directions and sizes. For example, for
  * arguments [
@@ -51,14 +52,12 @@ const margin = (direction, size) => spacing('margin', direction, size);
  * @returns string
  */
 const margins = (marginConfigs) => spacings(marginConfigs.map(({ direction, size }) => ({ type: 'margin', direction, size })));
-/**
- * Returns a lumx padding classname for the given direction and size. For example, for
- * arguments direction='right', size='regular' it returns lumx-spacing-padding-right-regular
- * @param direction - Direction
- * @param size - Size
- * @returns string
- */
-const padding = (direction, size) => spacing('padding', direction, size);
+function padding(directionOrSize, size) {
+    if (isAbstractSize(directionOrSize) || (directionOrSize === null && size === undefined)) {
+        return spacing('padding', directionOrSize);
+    }
+    return spacing('padding', directionOrSize ?? undefined, size);
+}
 /**
  * Returns a list of lumx padding classnames for the given directions and sizes. For example, for
  * arguments [

package/js/utils/focus/constants.d.ts

@@ -0,0 +1,4 @@
+/** CSS selector listing all tabbable elements. */
+export declare const TABBABLE_ELEMENTS_SELECTOR = "a[href], button, textarea, input:not([type=\"hidden\"]):not([hidden]), [tabindex]";
+/** CSS selector matching element that are disabled (should not receive focus). */
+export declare const DISABLED_SELECTOR = "[hidden], [tabindex=\"-1\"], [disabled]:not([disabled=\"false\"]), [aria-disabled]:not([aria-disabled=\"false\"])";

package/js/utils/focus/getFirstAndLastFocusable.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Get first and last elements focusable in an element.
+ *
+ * @param parentElement The element in which to search focusable elements.
+ * @return first and last focusable elements
+ */
+export declare function getFirstAndLastFocusable(parentElement: HTMLElement | ShadowRoot): {
+    first: HTMLElement;
+    last: HTMLElement;
+} | {
+    first?: undefined;
+    last?: undefined;
+};

package/js/utils/focus/getFocusableElements.d.ts

@@ -0,0 +1 @@
+export declare function getFocusableElements(element: HTMLElement | ShadowRoot): HTMLElement[];

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

@@ -0,0 +1,3 @@
+export { getFirstAndLastFocusable } from './getFirstAndLastFocusable';
+export { getFocusableElements } from './getFocusableElements';
+export { TABBABLE_ELEMENTS_SELECTOR, DISABLED_SELECTOR } from './constants';

package/lumx.css

@@ -8712,8 +8712,11 @@ table {
 /* Item link
    ========================================================================== */
 .lumx-list-item__link {
+  all: unset;
+  box-sizing: border-box;
   color: var(--lumx-color-dark-N);
   background-color: transparent;
+  width: 100%;
   cursor: pointer;
 }
 .lumx-list-item__link[data-focus-visible-added] {
@@ -10407,8 +10410,11 @@ table {
 /* Item link states
    ========================================================================== */
 .lumx-side-navigation-item__link {
+  all: unset;
+  box-sizing: border-box;
   color: var(--lumx-color-dark-N);
   background-color: transparent;
+  width: 100%;
   cursor: pointer;
 }
 .lumx-side-navigation-item__link[data-focus-visible-added] {

package/package.json

@@ -6,7 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/icons": "^4.5.1",
+        "@floating-ui/dom": "^1.7.5",
+        "@lumx/icons": "^4.5.2-alpha.1",
         "classnames": "^2.3.2",
         "focus-visible": "^5.0.2",
         "lodash": "4.17.23",
@@ -66,7 +67,7 @@
         "update-version-changelog": "yarn version-changelog ../../CHANGELOG.md"
     },
     "sideEffects": false,
-    "version": "4.5.1",
+    "version": "4.5.2-alpha.1",
     "devDependencies": {
         "@rollup/plugin-typescript": "^12.3.0",
         "@testing-library/dom": "^10.4.1",
@@ -89,5 +90,6 @@
         "vite": "^7.3.1",
         "vite-tsconfig-paths": "^5.1.4",
         "vitest": "^4.0.18"
-    }
+    },
+    "stableVersion": "4.5.1"
 }

package/scss/components/list/_mixins.scss

@@ -25,8 +25,11 @@
 }
 
 @mixin lumx-list-item-clickable() {
+    all: unset;
+    box-sizing: border-box;
     @include lumx-state(lumx-base-const("state", "DEFAULT"), lumx-base-const("emphasis", "LOW"), "dark");
 
+    width: 100%;
     cursor: pointer;
 
     &[data-focus-visible-added] {