@lumx/core 4.14.0-next.0 → 4.14.0-next.1

package/js/components/Uploader/index.d.ts

@@ -0,0 +1,79 @@
+import { AspectRatio, Size } from '../../constants';
+import type { HasClassName, HasDisabled, LumxClassName, HasTheme, ValueOf, HasAriaDisabled, CommonRef } from '../../types';
+/**
+ * Uploader variants.
+ */
+export declare const UploaderVariant: {
+    readonly square: "square";
+    readonly rounded: "rounded";
+    readonly circle: "circle";
+};
+export type UploaderVariant = ValueOf<typeof UploaderVariant>;
+/**
+ * Uploader sizes.
+ */
+export type UploaderSize = Extract<Size, 'xl' | 'xxl'>;
+/**
+ * Native input file props (framework-agnostic subset).
+ */
+type FileInputProps = Record<string, any>;
+/**
+ * Defines the props of the component.
+ */
+export 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';
+}
+export type UploaderPropsToOverride = 'isAnyDisabled' | 'inputId' | 'isDragHovering' | 'fileInputProps' | 'Component';
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "Uploader";
+/**
+ * Component default class name and class prefix.
+ */
+export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
+export declare const block: {
+    (additionalClasses: import("../../utils/classNames/bem/types").AdditionalClasses): string;
+    (modifiers?: import("../../utils/classNames/bem/types").Modifier, additionalClasses?: import("../../utils/classNames/bem/types").AdditionalClasses): string;
+}, element: {
+    (elem: string, additionalClasses: import("../../utils/classNames/bem/types").AdditionalClasses): string;
+    (elem: string, modifiers?: import("../../utils/classNames/bem/types").Modifier, additionalClasses?: import("../../utils/classNames/bem/types").AdditionalClasses): string;
+};
+/**
+ * Component default props.
+ */
+export declare const DEFAULT_PROPS: Partial<UploaderProps>;
+/**
+ * Uploader component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export declare const Uploader: (props: UploaderProps) => import("react").JSX.Element;
+export {};

package/js/components/UserBlock/Stories.d.ts

@@ -0,0 +1,153 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+/**
+ * Setup UserBlock stories for a specific framework (React or Vue).
+ * Framework-specific components are injected via `components`.
+ */
+export declare function setup({ component: UserBlock, components: { Text, Icon, IconButton, Badge, Link }, decorators: { withCombinations }, render, }: SetupStoriesOptions<{
+    decorators: 'withCombinations';
+    components: {
+        Text: any;
+        Icon: any;
+        IconButton: any;
+        Badge: any;
+        Link: any;
+    };
+}>): {
+    meta: {
+        component: any;
+        render: any;
+        argTypes: {
+            size: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("s" | "xs" | "m" | "l")[];
+                mapping: Record<string, "s" | "xs" | "m" | "l"> | undefined;
+            };
+            orientation: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("vertical" | "horizontal")[];
+                mapping: Record<string, "vertical" | "horizontal"> | undefined;
+            };
+        };
+        args: Partial<import(".").UserBlockProps>;
+    };
+    AvatarOnly: {
+        args: {
+            avatarProps: {
+                image: string;
+            };
+        };
+    };
+    AvatarAndName: {
+        args: {
+            name: string;
+            avatarProps: {
+                image: string;
+            };
+        };
+    };
+    AvatarAndCustomName: {
+        args: {
+            avatarProps: {
+                image: string;
+            };
+        };
+        render: (args: any) => import("react").JSX.Element;
+    };
+    AvatarAndNameAndSecondaryFields: {
+        args: {
+            fields: string[];
+            name: string;
+            avatarProps: {
+                image: string;
+            };
+        };
+    };
+    WithAfter: {
+        args: {
+            fields: string[];
+            name: string;
+            avatarProps: {
+                image: string;
+            };
+        };
+        render: (args: any) => import("react").JSX.Element;
+    };
+    WithAdditionalFields: {
+        args: {
+            name: string;
+            avatarProps: {
+                image: string;
+            };
+        };
+        render: (args: any) => import("react").JSX.Element;
+        parameters: {
+            wrapperProps: {
+                style: {
+                    width: string;
+                };
+            };
+        };
+    };
+    SizesAndOrientations: {
+        args: {
+            fields: string[];
+            name: string;
+            avatarProps: {
+                image: string;
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    WithConstrainedSize: {
+        args: {
+            fields: string[];
+            name: string;
+            avatarProps: {
+                image: string;
+            };
+        };
+        parameters: {
+            wrapperProps: {
+                style: {
+                    width: string;
+                    resize: string;
+                };
+            };
+        };
+    };
+    AsButton: {
+        args: {
+            fields: string[];
+            name: string;
+            avatarProps: {
+                image: string;
+            };
+        };
+    };
+    AsLink: {
+        args: {
+            linkProps: {
+                href: string;
+            };
+            fields: string[];
+            name: string;
+            avatarProps: {
+                image: string;
+            };
+        };
+    };
+    WithBadge: {
+        args: {
+            fields: string[];
+            name: string;
+            avatarProps: {
+                image: string;
+            };
+        };
+        render: (args: any) => import("react").JSX.Element;
+    };
+};

package/js/components/UserBlock/index.d.ts

@@ -0,0 +1,145 @@
+import type { HasClassName, LumxClassName, HasTheme, GenericProps, JSXElement, CommonRef } from '../../types';
+import { Orientation, Size } from '../../constants';
+/**
+ * User block sizes.
+ */
+export 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.
+ */
+export 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;
+}
+export type UserBlockPropsToOverride = 'Avatar' | 'Text' | 'linkProps' | 'avatarProps' | 'mouseLeaveProp' | 'mouseEnterProp';
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "UserBlock";
+/**
+ * Component default class name and class prefix.
+ */
+export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
+export declare const block: {
+    (additionalClasses: import("../../utils/classNames/bem/types").AdditionalClasses): string;
+    (modifiers?: import("../../utils/classNames/bem/types").Modifier, additionalClasses?: import("../../utils/classNames/bem/types").AdditionalClasses): string;
+}, element: {
+    (elem: string, additionalClasses: import("../../utils/classNames/bem/types").AdditionalClasses): string;
+    (elem: string, modifiers?: import("../../utils/classNames/bem/types").Modifier, additionalClasses?: import("../../utils/classNames/bem/types").AdditionalClasses): string;
+};
+/**
+ * Component default props.
+ */
+export declare const DEFAULT_PROPS: Partial<UserBlockProps>;
+export declare const isUserBlockClickeable: ({ linkAs, linkProps, handleClick, }: Pick<UserBlockProps, "linkAs" | "linkProps" | "handleClick">) => boolean;
+/**
+ * UserBlock component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export declare const UserBlock: (props: UserBlockProps) => import("react").JSX.Element;

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

@@ -0,0 +1,36 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+/**
+ * Setup ClickAwayProvider stories for a specific framework (React or Vue).
+ * Framework-specific components are injected via `components`.
+ */
+export declare function setup({ component: ClickAwayProvider, components: { PortalProvider, ButtonWithCard }, }: SetupStoriesOptions<{
+    components: {
+        PortalProvider: any;
+        /** A button that toggles a Card. Accepts: level, parentRef. */
+        ButtonWithCard: any;
+    };
+}>): {
+    meta: {
+        component: any;
+        parameters: {
+            chromatic: {
+                disable: boolean;
+            };
+        };
+        tags: string[];
+    };
+    NestedClickAway: {
+        render: () => import("react").JSX.Element;
+    };
+    InShadowDOM: {
+        render: () => import("react").JSX.Element;
+    };
+    TestClickAwayCloses: {
+        render: () => import("react").JSX.Element;
+        play(): Promise<void>;
+    };
+    TestNestedClickAway: {
+        render: () => import("react").JSX.Element;
+        play(): Promise<void>;
+    };
+};

package/js/utils/InfiniteScroll/TestStories.d.ts

@@ -0,0 +1,50 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+/**
+ * Setup InfiniteScroll test stories for a specific framework (React or Vue).
+ *
+ * @param component      The framework InfiniteScroll component.
+ * @param components     Framework-specific components:
+ *   - ScrollZone: a pre-wired component rendering a fixed-height scrollable container
+ *     with tall fake content and InfiniteScroll at the bottom. Accepts:
+ *       - `onLoad` callback (called when the sentinel intersects)
+ *       - `data-testid` forwarded to the scroll container div
+ */
+export declare function setup({ component: InfiniteScroll }: SetupStoriesOptions): {
+    meta: {
+        component: any;
+        tags: string[];
+        parameters: {
+            chromatic: {
+                disableSnapshot: boolean;
+            };
+        };
+        args: {
+            callback: () => void;
+        };
+    };
+    TestRendersSentinelDiv: {
+        render: (args: any) => import("react").JSX.Element;
+        play({ canvasElement }: any): Promise<void>;
+    };
+    TestDetectsScrollEnd: {
+        render: ({ callback }: any) => import("react").JSX.Element;
+        args: {
+            callback: import("storybook/test").Mock<(...args: any[]) => any>;
+        };
+        play({ canvas, args }: any): Promise<void>;
+    };
+    TestNoCallbackWithoutScroll: {
+        render: ({ callback }: any) => import("react").JSX.Element;
+        args: {
+            callback: import("storybook/test").Mock<(...args: any[]) => any>;
+        };
+        play({ canvas, args }: any): Promise<void>;
+    };
+    TestRetriggersOnSubsequentScrolls: {
+        render: ({ callback }: any) => import("react").JSX.Element;
+        args: {
+            callback: import("storybook/test").Mock<(...args: any[]) => any>;
+        };
+        play({ canvas, args }: any): Promise<void>;
+    };
+};

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

@@ -0,0 +1,21 @@
+import type { CommonRef } from '../../types';
+export { setupInfiniteScrollObserver } from './setupInfiniteScrollObserver';
+export declare const INFINITE_SCROLL_CLASSNAME = "lumx-infinite-scroll-anchor";
+export interface InfiniteScrollProps {
+    /** Callback when infinite scroll component is in view */
+    callback: (evt?: Event) => void;
+    /** Customize intersection observer option */
+    options?: IntersectionObserverInit;
+}
+/**
+ * Framework-agnostic InfiniteScroll sentinel component.
+ *
+ * Renders a tiny invisible div that triggers a callback when it enters the viewport
+ * (or intersects its root element) via IntersectionObserver.
+ *
+ * The div has a small height (4px) to avoid issues when a browser zoom is applied,
+ * where a zero-height element might not trigger IntersectionObserver reliably.
+ */
+export declare const InfiniteScroll: ({ ref }: {
+    ref?: CommonRef;
+}) => import("react").JSX.Element;

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

@@ -0,0 +1,29 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+/**
+ * Setup PortalProvider stories for a specific framework (React or Vue).
+ * Framework-specific components (Portal, Button) are injected via `components`.
+ */
+export declare function setup({ component: PortalProvider, components: { Portal, Button }, }: SetupStoriesOptions<{
+    components: {
+        Portal: any;
+        Button: any;
+    };
+}>): {
+    meta: {
+        component: any;
+        args: {
+            enabled: boolean;
+        };
+        parameters: {
+            chromatic: {
+                disable: boolean;
+            };
+        };
+        tags: string[];
+    };
+    RenderInShadowDOM: {
+        render: ({ enabled }: {
+            enabled: boolean;
+        }) => import("react").JSX.Element;
+    };
+};

package/js/utils/action-area/Stories.d.ts

@@ -0,0 +1,38 @@
+import { SetupStoriesOptions } from '@lumx/core/stories/types';
+export declare function setup({ classProp, components: { FlexBox, Heading, Link, Text, Button, IconButton }, decorators: { withCombinations, withThemedBackground }, }: SetupStoriesOptions<{
+    components: {
+        FlexBox: any;
+        Heading: any;
+        Link: any;
+        Text: any;
+        Button: any;
+        IconButton: any;
+    };
+    decorators: 'withCombinations' | 'withThemedBackground';
+}>): {
+    meta: {};
+    CardExample: {
+        render: ({ "data-lumx-hover": hover, "data-lumx-active": active, "data-focus-visible-added": focused, focusStyle, theme, hasOverlay, }: any) => import("react").JSX.Element;
+        argTypes: {
+            onClick: {
+                action: boolean;
+            };
+            hasOverlay: {
+                control: string;
+            };
+            focusStyle: {
+                control: {
+                    type: string;
+                };
+                options: (string | undefined)[];
+            };
+        };
+    };
+    OverlayStates: {
+        render: ({ "data-lumx-hover": hover, "data-lumx-active": active, "data-focus-visible-added": focused, focusStyle, theme, hasOverlay, }: any) => import("react").JSX.Element;
+        args: {
+            hasOverlay: boolean;
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+};

package/js/utils/select/renderSelectOptions.d.ts

@@ -0,0 +1,7 @@
+import type { JSXElement } from '../../types';
+import type { BaseSelectComponents, RenderSelectOptionsProps } from './types';
+/**
+ * Render options as ComboboxOption elements.
+ * Framework-specific components are passed as a second argument.
+ */
+export declare function renderSelectOptions<O>(props: RenderSelectOptionsProps<O>, components: BaseSelectComponents): JSXElement;

package/package.json

@@ -7,7 +7,7 @@
     },
     "dependencies": {
         "@floating-ui/dom": "^1.7.5",
-        "@lumx/icons": "^4.14.0-next.0",
+        "@lumx/icons": "^4.14.0-next.1",
         "classnames": "^2.3.2",
         "focus-visible": "^5.0.2",
         "lodash": "4.18.1",
@@ -69,7 +69,7 @@
         "update-version-changelog": "yarn version-changelog ../../CHANGELOG.md"
     },
     "sideEffects": false,
-    "version": "4.14.0-next.0",
+    "version": "4.14.0-next.1",
     "devDependencies": {
         "@rollup/plugin-typescript": "^12.3.0",
         "@testing-library/dom": "^10.4.1",

package/stories/utils/CombinationsTable.d.ts

@@ -0,0 +1,26 @@
+import { CombinationsOptions } from './combinations';
+/** Nested components injected by framework-specific wrappers */
+type NestedComponents = {
+    /** Provider that tracks heading nesting level */
+    HeadingLevelProvider: any;
+    /** Heading component that renders at the current level */
+    Heading: any;
+    /** Story component that renders a story with given args */
+    Story: any;
+};
+/** Parameters for the CombinationsTable function */
+type CombinationsTableParams = {
+    /** Storybook context */
+    ctx: any;
+    /** Combination options (layout, styles, combinations config) */
+    options: CombinationsOptions;
+    /** Framework-specific components */
+    nestedComponents: NestedComponents;
+};
+/**
+ * Generic JSX template that renders a matrix/table of story combinations.
+ * Framework-agnostic: works with both React and Vue JSX by receiving
+ * framework-specific components (HeadingLevelProvider, Heading, Story) as params.
+ */
+export declare function CombinationsTable({ ctx, options, nestedComponents }: CombinationsTableParams): import("react").JSX.Element;
+export {};

package/stories/utils/ThemingVariablesTable.d.ts

@@ -0,0 +1,29 @@
+import type { Entry, Variables } from './themeVariables';
+/** Framework-specific components injected by React/Vue decorators */
+type NestedComponents = {
+    /** FlexBox component for horizontal layout */
+    FlexBox: any;
+    /** Wrapper for details/summary disclosure widget */
+    DetailsContainer: any;
+};
+/** Parameters for the ThemingVariablesTable component */
+type ThemingVariablesTableParams = {
+    /** Current CSS variable values */
+    style: Variables;
+    /** Default CSS variable values (for placeholder display) */
+    defaultStyle: Variables;
+    /** Callback when a variable is changed */
+    onVariableChange: (entry: Entry) => void;
+    /** Framework-specific components */
+    nestedComponents: NestedComponents;
+};
+/**
+ * Framework-agnostic JSX component for rendering CSS variable editors.
+ * Similar to CombinationsTable, but renders a simpler disclosure widget
+ * with input fields for editing CSS custom properties.
+ *
+ * This component receives framework-specific components (FlexBox, DetailsContainer)
+ * as dependencies, allowing it to work with both React and Vue.
+ */
+export declare function ThemingVariablesTable({ style, defaultStyle, onVariableChange, nestedComponents, }: ThemingVariablesTableParams): import("react").JSX.Element;
+export {};