@lumx/react 4.17.1-alpha.2 → 4.17.1-alpha.3

package/_internal/packages/lumx-core/src/js/components/Tooltip/index.d.ts

@@ -0,0 +1,25 @@
+import { HasCloseMode } from "../../types/HasCloseMode.js";
+import { ARIA_LINK_MODES } from "./constants.js";
+
+//#region ../lumx-core/src/js/components/Tooltip/index.d.ts
+/** Position of the tooltip relative to the anchor element. */
+type TooltipPlacement = 'top' | 'right' | 'bottom' | 'left';
+/**
+ * Framework-agnostic tooltip props (shared between React and Vue wrappers).
+ */
+interface TooltipProps extends HasCloseMode {
+  /** Delay (in ms) before closing the tooltip. */
+  delay?: number;
+  /** Whether the tooltip is displayed even without the mouse hovering the anchor. */
+  forceOpen?: boolean;
+  /** Label text. */
+  label?: string | null | false;
+  /** Placement of the tooltip relative to the anchor. */
+  placement?: TooltipPlacement;
+  /** Choose how the tooltip text should link to the anchor */
+  ariaLinkMode?: (typeof ARIA_LINK_MODES)[number];
+  /** Z-index for the tooltip */
+  zIndex?: number;
+}
+//#endregion
+export { TooltipPlacement, TooltipProps };

package/_internal/packages/lumx-core/src/js/components/Tooltip/index.js

@@ -0,0 +1,55 @@
+import { visuallyHidden } from "../../utils/classNames/visually-hidden/index.js";
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { TOOLTIP_ZINDEX } from "./constants.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region ../lumx-core/src/js/components/Tooltip/index.tsx
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {
+	placement: "bottom",
+	closeMode: "unmount",
+	ariaLinkMode: "aria-describedby",
+	zIndex: TOOLTIP_ZINDEX
+};
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "Tooltip";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-tooltip";
+var { block, element } = bem(CLASSNAME);
+/**
+* Tooltip popup rendering component.
+* Pure JSX template for the tooltip popup element (arrow + inner text + BEM classes).
+*
+* @param props Component props.
+* @return JSX element.
+*/
+var TooltipPopup = (props) => {
+	const { id, label, position, isHidden, style, zIndex = TOOLTIP_ZINDEX, className, ref, ...forwardedProps } = props;
+	const labelLines = label ? label.split("\n") : [];
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		...forwardedProps,
+		id,
+		role: "tooltip",
+		className: import_classnames.default(className, block({ [`position-${position}`]: Boolean(position) }), isHidden && visuallyHidden()),
+		style: {
+			...isHidden ? void 0 : style,
+			zIndex
+		},
+		"data-popper-placement": position,
+		children: [/* @__PURE__ */ jsx("div", { className: element("arrow") }), /* @__PURE__ */ jsx("div", {
+			className: element("inner"),
+			children: labelLines.map((line, index) => /* @__PURE__ */ jsx("p", { children: line }, index))
+		})]
+	});
+};
+TooltipPopup.displayName = COMPONENT_NAME;
+TooltipPopup.className = CLASSNAME;
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, TooltipPopup };

package/_internal/packages/lumx-core/src/js/components/Tooltip/tooltipOpenManager.js

@@ -0,0 +1,93 @@
+import { TOOLTIP_HOVER_DELAY, TOOLTIP_LONG_PRESS_DELAY } from "../../constants/components/index.js";
+import { IS_BROWSER } from "../../constants/browser/index.js";
+import { isFocusVisible } from "../../utils/browser/isFocusVisible.js";
+import { isHoverNotSupported } from "../../utils/browser/isHoverNotSupported.js";
+//#region ../lumx-core/src/js/components/Tooltip/tooltipOpenManager.ts
+/**
+* Framework-agnostic open/close state machine for tooltip.
+* Manages hover, touch, focus, timers, and escape key behavior.
+*/
+function createTooltipOpenManager(options) {
+	const { delay, onStateChange } = options;
+	let timer;
+	let openStartTime;
+	let shouldOpen;
+	let anchorController;
+	let popperController;
+	const deferUpdate = (duration) => {
+		if (timer) clearTimeout(timer);
+		const update = () => {
+			onStateChange(!!shouldOpen);
+		};
+		if (!IS_BROWSER) update();
+		else timer = setTimeout(update, duration);
+	};
+	const hoverNotSupported = isHoverNotSupported();
+	const hasTouch = typeof window !== "undefined" && "ontouchstart" in window;
+	const openDelay = delay || (hoverNotSupported ? TOOLTIP_LONG_PRESS_DELAY.open : TOOLTIP_HOVER_DELAY.open);
+	const closeDelay = hoverNotSupported ? TOOLTIP_LONG_PRESS_DELAY.close : TOOLTIP_HOVER_DELAY.close;
+	const open = () => {
+		if (shouldOpen && !timer) return;
+		shouldOpen = true;
+		openStartTime = Date.now();
+		deferUpdate(openDelay);
+	};
+	const getClose = (overrideDelay) => {
+		if (!shouldOpen && !timer) return;
+		shouldOpen = false;
+		deferUpdate(overrideDelay);
+	};
+	const close = () => getClose(closeDelay);
+	const closeImmediately = () => getClose(0);
+	return {
+		attachAnchor(anchorElement) {
+			anchorController = new AbortController();
+			const { signal } = anchorController;
+			if (hoverNotSupported) {
+				/**
+				* Handle touchend event.
+				* If end comes before the open delay => cancel tooltip (close immediate).
+				* Else if end comes after the open delay => tooltip takes priority, the anchor's default touch end event is prevented.
+				*/
+				const longPressEnd = (evt) => {
+					if (!openStartTime) return;
+					if (Date.now() - openStartTime >= openDelay) {
+						evt.stopPropagation();
+						evt.preventDefault();
+						anchorElement.focus();
+						close();
+					} else closeImmediately();
+				};
+				anchorElement.addEventListener(hasTouch ? "touchstart" : "mousedown", open, { signal });
+				anchorElement.addEventListener(hasTouch ? "touchend" : "mouseup", longPressEnd, { signal });
+			} else {
+				anchorElement.addEventListener("mouseenter", open, { signal });
+				anchorElement.addEventListener("mouseleave", close, { signal });
+				anchorElement.addEventListener("mouseup", closeImmediately, { signal });
+			}
+			anchorElement.addEventListener("focusin", (e) => {
+				if (!isFocusVisible(e.target)) return;
+				open();
+			}, { signal });
+			anchorElement.addEventListener("focusout", closeImmediately, { signal });
+		},
+		attachPopper(popperElement) {
+			popperController?.abort();
+			if (!popperElement || hoverNotSupported) return;
+			popperController = new AbortController();
+			const { signal } = popperController;
+			popperElement.addEventListener("mouseenter", open, { signal });
+			popperElement.addEventListener("mouseleave", close, { signal });
+		},
+		close() {
+			closeImmediately();
+		},
+		destroy() {
+			if (timer) clearTimeout(timer);
+			anchorController?.abort();
+			popperController?.abort();
+		}
+	};
+}
+//#endregion
+export { createTooltipOpenManager };

package/_internal/packages/lumx-core/src/js/components/Uploader/index.d.ts

@@ -0,0 +1,59 @@
+import { AspectRatio, Size } from "../../constants/enums/index.js";
+import { HasClassName } from "../../types/HasClassName.js";
+import { HasTheme } from "../../types/HasTheme.js";
+import { ValueOf } from "../../types/ValueOf.js";
+import { CommonRef } from "../../types/CommonRef.js";
+import { HasAriaDisabled } from "../../types/HasAriaDisabled.js";
+import { HasDisabled } from "../../types/HasDisabled.js";
+//#region ../lumx-core/src/js/components/Uploader/index.d.ts
+/**
+ * Uploader variants.
+ */
+declare const UploaderVariant: {
+  readonly square: "square";
+  readonly rounded: "rounded";
+  readonly circle: "circle";
+};
+type UploaderVariant = ValueOf<typeof UploaderVariant>;
+/**
+ * Uploader sizes.
+ */
+type UploaderSize = Extract<Size, 'xl' | 'xxl'>;
+/**
+ * Native input file props (framework-agnostic subset).
+ */
+type FileInputProps = Record<string, any>;
+/**
+ * Defines the props of the component.
+ */
+interface UploaderProps extends HasClassName, HasDisabled, HasTheme, HasAriaDisabled {
+  /** Image aspect ratio. */
+  aspectRatio?: AspectRatio;
+  /** Icon (SVG path). */
+  icon?: string;
+  /** Label text. */
+  label?: string;
+  /** Size variant. */
+  size?: UploaderSize;
+  /** Variant. */
+  variant?: UploaderVariant;
+  /** On click callback. */
+  handleClick?: (event: any) => void;
+  /** Handle file selection with a native input file. */
+  fileInputProps?: FileInputProps;
+  /** Forwarded ref to the root element. */
+  ref?: CommonRef;
+  /** Whether the component is disabled (computed from `isDisabled` and `aria-disabled`). */
+  isAnyDisabled?: boolean;
+  /** Id of the hidden file input (used to link the label `for` attribute). */
+  inputId: string;
+  /** Whether a file is currently being dragged over the input. */
+  isDragHovering?: boolean;
+  /** Callback fired when the file input value changes. */
+  handleChange?: (event: any) => void;
+  /** Root element tag or component (e.g. `'button'` or `'label'`). */
+  Component: 'button' | 'label';
+}
+type UploaderPropsToOverride = 'isAnyDisabled' | 'inputId' | 'isDragHovering' | 'fileInputProps' | 'Component';
+//#endregion
+export { UploaderProps, UploaderPropsToOverride, UploaderSize, UploaderVariant };

package/_internal/packages/lumx-core/src/js/components/Uploader/index.js

@@ -0,0 +1,79 @@
+import { AspectRatio, Size } from "../../constants/enums/index.js";
+import { visuallyHidden } from "../../utils/classNames/visually-hidden/index.js";
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { Icon } from "../Icon/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region ../lumx-core/src/js/components/Uploader/index.tsx
+/**
+* Uploader variants.
+*/
+var UploaderVariant = {
+	square: "square",
+	rounded: "rounded",
+	circle: "circle"
+};
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "Uploader";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-uploader";
+var { block, element } = bem(CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {
+	aspectRatio: AspectRatio.horizontal,
+	size: Size.xl,
+	variant: UploaderVariant.square
+};
+/**
+* Uploader component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var Uploader = (props) => {
+	const { aspectRatio = DEFAULT_PROPS.aspectRatio, className, label, icon, size = DEFAULT_PROPS.size, theme, variant = DEFAULT_PROPS.variant, isAnyDisabled, fileInputProps, inputId, isDragHovering, handleClick, handleChange, Component = "label", ref, ...forwardedProps } = props;
+	const adjustedAspectRatio = variant === UploaderVariant.circle ? AspectRatio.square : aspectRatio;
+	return /* @__PURE__ */ jsxs(Component, {
+		ref,
+		...forwardedProps,
+		onClick: handleClick,
+		className: import_classnames.default(className, block({
+			[`aspect-ratio-${adjustedAspectRatio}`]: Boolean(adjustedAspectRatio),
+			[`size-${size}`]: Boolean(size),
+			[`theme-${theme}`]: Boolean(theme),
+			[`variant-${variant}`]: Boolean(variant),
+			"is-drag-hovering": isDragHovering,
+			"is-disabled": isAnyDisabled
+		})),
+		children: [
+			/* @__PURE__ */ jsx("span", { className: element("background") }),
+			/* @__PURE__ */ jsxs("span", {
+				className: element("wrapper"),
+				children: [icon && Icon({
+					className: element("icon"),
+					icon,
+					size: Size.s
+				}), label && /* @__PURE__ */ jsx("span", {
+					className: element("label"),
+					children: label
+				})]
+			}),
+			fileInputProps && /* @__PURE__ */ jsx("input", {
+				type: "file",
+				id: inputId,
+				className: import_classnames.default(element("input"), visuallyHidden()),
+				...fileInputProps,
+				onChange: handleChange
+			})
+		]
+	});
+};
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, Uploader, UploaderVariant };

package/_internal/packages/lumx-core/src/js/components/UserBlock/index.d.ts

@@ -0,0 +1,124 @@
+import { Orientation, Size } from "../../constants/enums/index.js";
+import { HasClassName } from "../../types/HasClassName.js";
+import { HasTheme } from "../../types/HasTheme.js";
+import { GenericProps } from "../../types/GenericProps.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+//#region ../lumx-core/src/js/components/UserBlock/index.d.ts
+/**
+ * User block sizes.
+ */
+type UserBlockSize = Extract<Size, 'xs' | 's' | 'm' | 'l'>;
+/**
+ * Props for the UserBlock component.
+ *
+ * UserBlock displays user information with an avatar, name, and optional fields.
+ * Supports both horizontal and vertical orientations with customizable actions.
+ */
+interface UserBlockProps extends HasClassName, HasTheme {
+  /**
+   * Props to pass to the Avatar component.
+   * Configure the user's avatar appearance and behavior.
+   */
+  avatarProps?: GenericProps;
+  /**
+   * Additional fields to display below the user's name.
+   * Typically used for role, department, or other user metadata.
+   */
+  fields?: string[];
+  /**
+   * Props to pass to the Link component wrapping the avatar and/or name.
+   * Used to make the user block clickable with navigation.
+   */
+  linkProps?: GenericProps;
+  /**
+   * Custom component to use for the link element.
+   * Use this to inject a framework-specific router Link component (e.g., react-router Link).
+   * @default 'a'
+   */
+  linkAs?: 'a' | any;
+  /**
+   * Content for multiple actions displayed in the action toolbar.
+   * Only visible when orientation is vertical.
+   */
+  multipleActions?: JSXElement;
+  /**
+   * The user's display name.
+   * Can be a string or custom JSX element.
+   */
+  name?: JSXElement;
+  /**
+   * Props to pass to the name wrapper element.
+   * Used to customize the name block's appearance and behavior.
+   */
+  nameProps?: GenericProps;
+  /**
+   * Layout orientation of the user block.
+   * - horizontal: Avatar and info side by side (default)
+   * - vertical: Avatar and info stacked, forces size to 'l'
+   * @default Orientation.horizontal
+   */
+  orientation?: Orientation;
+  /**
+   * Content for a single action displayed in the action toolbar.
+   * Only visible when orientation is vertical.
+   */
+  simpleAction?: JSXElement;
+  /**
+   * Size variant of the component.
+   * Note: When orientation is vertical, size is automatically forced to 'l'.
+   * @default Size.m
+   */
+  size?: UserBlockSize;
+  /**
+   * Click event handler.
+   * Called when the user clicks on the clickable area (name/avatar).
+   */
+  handleClick?(): void;
+  /**
+   * Mouse enter event handler.
+   * Called when the mouse enters the component.
+   */
+  handleMouseEnter?(): void;
+  mouseEnterProp?: string;
+  /**
+   * Mouse leave event handler.
+   * Called when the mouse leaves the component.
+   */
+  handleMouseLeave?(): void;
+  mouseLeaveProp?: string;
+  /**
+   * Additional custom fields to display below the standard fields.
+   * Only visible when size is not 'xs' or 's'.
+   */
+  additionalFields?: JSXElement;
+  /**
+   * Content to display after the entire component.
+   * Position depends on orientation:
+   * - horizontal: displayed to the right
+   * - vertical: displayed at the bottom
+   */
+  after?: JSXElement;
+  /**
+   * Custom content to replace the default name block.
+   * When provided, replaces the default name rendering.
+   */
+  children?: JSXElement;
+  /**
+   * Ref to attach to the root element.
+   */
+  ref?: CommonRef;
+  /**
+   * Text component for rendering text content.
+   * Injected by the framework wrapper (React/Vue).
+   */
+  Text: (props: any) => any;
+  /**
+   * Avatar component for rendering the user avatar.
+   * Injected by the framework wrapper (React/Vue).
+   */
+  Avatar: (props: any) => any;
+}
+type UserBlockPropsToOverride = 'Avatar' | 'Text' | 'linkProps' | 'avatarProps' | 'mouseLeaveProp' | 'mouseEnterProp';
+//#endregion
+export { UserBlockProps, UserBlockPropsToOverride, UserBlockSize };

package/_internal/packages/lumx-core/src/js/components/UserBlock/index.js

@@ -0,0 +1,101 @@
+import { Orientation, Size } from "../../constants/enums/index.js";
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region ../lumx-core/src/js/components/UserBlock/index.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "UserBlock";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-user-block";
+var { block, element } = bem(CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {
+	orientation: Orientation.horizontal,
+	size: Size.m
+};
+var isUserBlockClickeable = ({ linkAs, linkProps, handleClick }) => {
+	const isLink = Boolean(linkProps?.href || linkAs);
+	return !!handleClick || isLink;
+};
+/**
+* UserBlock component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var UserBlock = (props) => {
+	const { avatarProps, className, fields, linkProps, linkAs, ref, multipleActions, mouseEnterProp = "onMouseEnter", mouseLeaveProp = "onMouseLeave", name, nameProps, handleClick, handleMouseEnter, handleMouseLeave, orientation = DEFAULT_PROPS.orientation, simpleAction, size = DEFAULT_PROPS.size, theme, children, additionalFields, after, Text, Avatar, ...forwardedProps } = props;
+	let componentSize = size;
+	if (orientation === Orientation.vertical) componentSize = Size.l;
+	const shouldDisplayActions = orientation === Orientation.vertical;
+	const isClickable = isUserBlockClickeable({
+		handleClick,
+		linkAs,
+		linkProps
+	});
+	const shouldDisplayFields = componentSize !== Size.s && componentSize !== Size.xs;
+	const fieldsBlock = fields && shouldDisplayFields && /* @__PURE__ */ jsx("div", {
+		className: element("fields"),
+		children: fields.map((field, idx) => /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			className: element("field"),
+			children: field
+		}, idx))
+	});
+	const eventHandlers = {
+		...handleMouseEnter && { [mouseEnterProp]: handleMouseEnter },
+		...handleMouseLeave && { [mouseLeaveProp]: handleMouseLeave }
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		...forwardedProps,
+		...eventHandlers,
+		className: import_classnames.default(className, block({
+			[`orientation-${orientation}`]: Boolean(orientation),
+			[`size-${componentSize}`]: Boolean(componentSize),
+			[`theme-${theme}`]: Boolean(theme),
+			"is-clickable": isClickable
+		})),
+		children: [
+			avatarProps && /* @__PURE__ */ jsx(Avatar, {
+				linkAs,
+				linkProps,
+				alt: "",
+				...avatarProps,
+				className: import_classnames.default(element("avatar"), avatarProps.className),
+				size: componentSize,
+				onClick: handleClick,
+				theme
+			}),
+			(fields || name || children || additionalFields) && /* @__PURE__ */ jsxs("div", {
+				className: element("wrapper"),
+				children: [
+					children,
+					fieldsBlock,
+					shouldDisplayFields ? additionalFields : null
+				]
+			}),
+			shouldDisplayActions && simpleAction && /* @__PURE__ */ jsx("div", {
+				className: element("action"),
+				children: simpleAction
+			}),
+			shouldDisplayActions && multipleActions && /* @__PURE__ */ jsx("div", {
+				className: element("actions"),
+				children: multipleActions
+			}),
+			after ? /* @__PURE__ */ jsx("div", {
+				className: element("after"),
+				children: after
+			}) : null
+		]
+	});
+};
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, UserBlock, element, isUserBlockClickeable };

package/_internal/packages/lumx-core/src/js/constants/browser/index.js

@@ -0,0 +1,7 @@
+//#region ../lumx-core/src/js/constants/browser/index.ts
+/**
+* Check if we are running in a true browser (not SSR and not jsdom test environment).
+*/
+var IS_BROWSER = typeof window !== "undefined" && !window.navigator.userAgent.includes("jsdom");
+//#endregion
+export { IS_BROWSER };

package/_internal/packages/lumx-core/src/js/constants/components/index.js

@@ -0,0 +1,19 @@
+//#region ../lumx-core/src/js/constants/components/index.ts
+/**
+* Delay on hover after which we open or close the tooltip.
+* Only applies to devices supporting pointer hover.
+*/
+var TOOLTIP_HOVER_DELAY = {
+	open: 500,
+	close: 500
+};
+/**
+* Delay on long press after which we open or close the tooltip.
+* Only applies to devices not supporting pointer hover.
+*/
+var TOOLTIP_LONG_PRESS_DELAY = {
+	open: 250,
+	close: 3e3
+};
+//#endregion
+export { TOOLTIP_HOVER_DELAY, TOOLTIP_LONG_PRESS_DELAY };