@lumx/core 4.17.1-alpha.1 → 4.17.1-alpha.3

package/js/components/TextField/RawInputText.d.ts

@@ -1,24 +0,0 @@
-import type { HTMLInputTypeAttribute } from 'react';
-import { CommonRef, HasClassName, HasTheme } from '../../types';
-/**
- * Defines the props of the component.
- */
-export interface RawInputTextProps extends HasTheme, HasClassName {
-    value?: string;
-    type?: HTMLInputTypeAttribute;
-    name?: string | undefined;
-    ref?: CommonRef;
-    handleChange?: (value: string, name?: string, event?: any) => void;
-    handleInput?: (value: string, name?: string, event?: any) => void;
-    handleFocus?: (event?: any) => void;
-    handleBlur?: (event?: any) => void;
-}
-/**
- * Component default props.
- */
-export declare const DEFAULT_PROPS: Partial<RawInputTextProps>;
-/**
- * Raw input text component
- * (input element without any decoration)
- */
-export declare const RawInputText: (props: RawInputTextProps) => import("react").JSX.Element;

package/js/components/TextField/RawInputTextStories.d.ts

@@ -1,16 +0,0 @@
-import type { SetupStoriesOptions } from '@lumx/core/stories/types';
-export declare function setup({ component: RawInputText, decorators: { withValueOnChange, withWrapper }, }: SetupStoriesOptions<{
-    decorators: 'withValueOnChange' | 'withWrapper';
-}>): {
-    meta: {
-        component: any;
-        args: Partial<import("./RawInputText").RawInputTextProps>;
-        decorators: ((story: any, context: any) => any)[];
-    };
-    Default: {};
-    WithPlaceholder: {
-        args: {
-            placeholder: string;
-        };
-    };
-};

package/js/components/TextField/RawInputTextTests.d.ts

@@ -1,11 +0,0 @@
-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;
-    input: HTMLElement;
-    wrapper: Partial<import("../../../testing").SetupResult>;
-};
-declare const _default: (renderOptions: SetupOptions<any>) => void;
-export default _default;

package/js/components/TextField/RawInputTextarea.d.ts

@@ -1,23 +0,0 @@
-import { CommonRef, HasClassName, HasTheme } from '../../types';
-/**
- * Defines the props of the component.
- */
-export interface RawInputTextareaProps extends HasTheme, HasClassName {
-    value?: string;
-    rows?: number;
-    name?: string | undefined;
-    ref?: CommonRef;
-    handleChange?: (value: string, name?: string, event?: any) => void;
-    handleInput?: (value: string, name?: string, event?: any) => void;
-    handleFocus?: (event?: any) => void;
-    handleBlur?: (event?: any) => void;
-}
-/**
- * Component default props.
- */
-export declare const DEFAULT_PROPS: Partial<RawInputTextareaProps>;
-/**
- * Raw input textarea component
- * (textarea element without any decoration)
- */
-export declare const RawInputTextarea: (props: RawInputTextareaProps) => import("react").JSX.Element;

package/js/components/TextField/RawInputTextareaStories.d.ts

@@ -1,21 +0,0 @@
-import type { SetupStoriesOptions } from '@lumx/core/stories/types';
-export declare function setup({ component: RawInputTextarea, decorators: { withValueOnChange, withWrapper }, }: SetupStoriesOptions<{
-    decorators: 'withValueOnChange' | 'withWrapper';
-}>): {
-    meta: {
-        component: any;
-        args: Partial<import("./RawInputTextarea").RawInputTextareaProps>;
-        decorators: ((story: any, context: any) => any)[];
-    };
-    Default: {};
-    WithMinimumRows: {
-        args: {
-            rows: number;
-        };
-    };
-    WithPlaceholder: {
-        args: {
-            placeholder: string;
-        };
-    };
-};

package/js/components/TextField/RawInputTextareaTests.d.ts

@@ -1,11 +0,0 @@
-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;
-    textarea: HTMLElement;
-    wrapper: Partial<import("../../../testing").SetupResult>;
-};
-declare const _default: (renderOptions: SetupOptions<any>) => void;
-export default _default;

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

@@ -1,101 +0,0 @@
-import type { SetupStoriesOptions } from '@lumx/core/stories/types';
-export declare function setup({ component: TextField, components: { Chip, IconButton, Typography }, decorators: { withValueOnChange, withCombinations }, }: SetupStoriesOptions<{
-    decorators: 'withValueOnChange' | 'withCombinations';
-    components: {
-        Chip: any;
-        IconButton: any;
-        Typography: any;
-    };
-}>): {
-    meta: {
-        component: any;
-        argTypes: {
-            clearButtonProps: {
-                control: boolean;
-            };
-            chips: {
-                control: boolean;
-            };
-            afterElement: {
-                control: boolean;
-            };
-            onClear: {
-                action: boolean;
-            };
-        };
-        decorators: ((story: any, context: any) => any)[];
-    };
-    Default: {
-        args: {
-            value: string;
-        };
-    };
-    Placeholder: {
-        args: {
-            value: string;
-            placeholder: string;
-        };
-    };
-    LabelAndHelper: {
-        args: {
-            label: string;
-            helper: string;
-            value: string;
-        };
-    };
-    CustomLabelAndHelper: {
-        render: (args: any) => import("react").JSX.Element;
-    };
-    NumberField: {
-        args: {
-            value: string;
-            type: string;
-        };
-    };
-    TextareaField: {
-        args: {
-            value: string;
-            multiline: boolean;
-            minimumRows: number;
-        };
-    };
-    Error: {
-        args: {
-            hasError: boolean;
-            error: string;
-            label: string;
-            helper: string;
-            value: string;
-        };
-    };
-    Valid: {
-        args: {
-            isValid: boolean;
-            label: string;
-            helper: string;
-            value: string;
-        };
-    };
-    MaxLength: {
-        args: {
-            value: string;
-            maxLength: number;
-            label: string;
-            helper: string;
-        };
-    };
-    WithAfterElement: {
-        render: (args: any) => import("react").JSX.Element;
-    };
-    WithChips: {
-        render: (args: any) => import("react").JSX.Element;
-    };
-    Disabled: {
-        args: {
-            value: string;
-            label: string;
-            helper: string;
-        };
-        decorators: ((story: any, context: any) => any)[];
-    };
-};

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

@@ -1,14 +0,0 @@
-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;
-    inputNative: HTMLInputElement | HTMLTextAreaElement;
-    error: HTMLElement;
-    helper: HTMLElement;
-    wrapper: Partial<import("../../../testing").SetupResult>;
-};
-declare const _default: (renderOptions: SetupOptions<any>) => void;
-export default _default;

package/js/components/TextField/TextField.d.ts

@@ -1,84 +0,0 @@
-import { HasTheme, HasAriaDisabled, HasClassName, JSXElement, CommonRef, GenericProps, HasDisabled } from '../../types';
-import { InputLabelProps } from '../InputLabel';
-/**
- * Defines the props of the component.
- */
-export interface TextFieldProps extends HasClassName, HasTheme, HasAriaDisabled, HasDisabled {
-    /** Chip Group to be rendered before the main text input. */
-    chips?: JSXElement;
-    /** Props to pass to the clear button (minus those already set by the TextField props). If not specified, the button won't be displayed. */
-    clearButtonProps?: GenericProps;
-    /** Error message. */
-    error?: string | JSXElement;
-    /** Whether we force the focus style or not. */
-    forceFocusStyle?: boolean;
-    /** Whether the text field is displayed with error style or not. */
-    hasError?: boolean;
-    /** Additional element to put at the end of the text field. */
-    afterElement?: JSXElement;
-    /** Helper text. */
-    helper?: string | JSXElement;
-    /** Icon (SVG path). */
-    icon?: string;
-    /** Native input id property (generated if not provided to link the label element). */
-    id?: string;
-    /** Generated helper id for accessibility attributes. */
-    helperId?: string;
-    /** Generated error id for accessibility attributes. */
-    errorId?: string;
-    /** Generated label id for accessibility attributes (used to link the clear button to the field label). */
-    labelId?: string;
-    /** Whether the component is required or not. */
-    isRequired?: boolean;
-    /** Whether the text field is displayed with valid style or not. */
-    isValid?: boolean;
-    /** Label text. */
-    label?: string;
-    /** Additional label props. */
-    labelProps?: InputLabelProps;
-    /** Max string length the input accepts (constrains the input and displays a character counter). */
-    maxLength?: number;
-    /** Whether the text field is a textarea or an input. */
-    multiline?: boolean;
-    /** Placeholder text. */
-    placeholder?: string;
-    /** Reference to the wrapper. */
-    textFieldRef?: CommonRef;
-    /** Value. */
-    value?: string;
-    /** Whether any part is disabled. */
-    isAnyDisabled?: boolean;
-    /** The input element (input or textarea). */
-    input: JSXElement;
-    /** Whether the input is focused. */
-    isFocus?: boolean;
-    /** IconButton component. */
-    IconButton: (props: Record<string, any>) => any;
-    /** Ref to the component root. */
-    ref?: CommonRef;
-}
-export type TextFieldPropsToOverride = 'input' | 'IconButton' | 'labelProps' | 'textFieldRef' | 'clearButtonProps' | 'helperId' | 'errorId' | 'labelId' | 'isAnyDisabled' | 'isFocus';
-/**
- * Generate unique accessibility IDs for helper and error texts.
- * Combines them with any existing aria-describedby in priority order (error > helper > existing).
- *
- * @param helper Helper text content
- * @param error Error text content
- * @param generatedId Unique ID for this text field instance
- * @param existingAriaDescribedBy Existing aria-describedby value to merge
- * @return Object containing helperId, errorId, and combined describedById
- */
-export declare function generateAccessibilityIds(helper: TextFieldProps['helper'], error: TextFieldProps['error'], generatedId: string, existingAriaDescribedBy?: string, label?: TextFieldProps['label']): {
-    helperId?: string;
-    errorId?: string;
-    describedById?: string;
-    labelId?: string;
-};
-/**
- * TextField component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export declare const TextField: (props: TextFieldProps) => import("react").JSX.Element;

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

@@ -1,13 +0,0 @@
-import { LumxClassName } from '@lumx/core/js/types';
-/**
- * Component display name.
- */
-export declare const COMPONENT_NAME = "TextField";
-/**
- * Component default class name and class prefix.
- */
-export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
-/**
- * Input native element class name.
- */
-export declare const INPUT_NATIVE_CLASSNAME: string;

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

@@ -1,178 +0,0 @@
-import type { SetupStoriesOptions } from '@lumx/core/stories/types';
-import { AspectRatio } from '../../constants';
-import { ThumbnailObjectFit, ThumbnailVariant } from './types';
-/**
- * Setup Thumbnail stories for a specific framework (React or Vue).
- * This function creates all the stories with the appropriate decorators.
- */
-export declare function setup({ component: Thumbnail, decorators: { withNestedProps, withWrapper, withCombinations }, }: SetupStoriesOptions<{
-    decorators: 'withNestedProps' | 'withWrapper' | 'withCombinations';
-}>): {
-    meta: {
-        component: any;
-        render: (args: any) => import("react").JSX.Element;
-        argTypes: {
-            image: {
-                control: {
-                    type: "select" | "inline-radio";
-                };
-                options: string[];
-                mapping: Record<string, string> | undefined;
-            };
-            align: {
-                control: {
-                    type: "select" | "inline-radio";
-                };
-                options: ("center" | "right" | "left")[];
-                mapping: Record<string, "center" | "right" | "left"> | undefined;
-            };
-            variant: {
-                control: {
-                    type: "select" | "inline-radio";
-                };
-                options: ("squared" | "rounded")[];
-                mapping: Record<string, "squared" | "rounded"> | undefined;
-            };
-            aspectRatio: {
-                control: {
-                    type: "select" | "inline-radio";
-                };
-                options: ("vertical" | "horizontal" | "original" | "panoramic" | "wide" | "square" | "free")[];
-                mapping: Record<string, "vertical" | "horizontal" | "original" | "panoramic" | "wide" | "square" | "free"> | undefined;
-            };
-            fallback: {
-                control: boolean;
-            };
-            'focusPoint.x': {
-                control: {
-                    type: string;
-                    max: number;
-                    min: number;
-                    step: number;
-                };
-            };
-            'focusPoint.y': {
-                control: {
-                    type: string;
-                    max: number;
-                    min: number;
-                    step: number;
-                };
-            };
-        };
-        decorators: ((story: any, context: any) => any)[];
-        args: {
-            align?: import("../../constants").HorizontalAlignment | undefined;
-            alt?: string | undefined;
-            aspectRatio?: AspectRatio | undefined;
-            badge?: import("react").ReactNode;
-            crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
-            fallback?: import("react").ReactNode;
-            fillHeight?: boolean | undefined;
-            image?: string | undefined;
-            loadingState?: string | undefined;
-            imgProps?: import("react").ImgHTMLAttributes<HTMLImageElement> | undefined;
-            imgRef?: import("../../types").CommonRef;
-            ref?: import("../../types").CommonRef;
-            isLoading?: boolean | undefined;
-            objectFit?: ThumbnailObjectFit | undefined;
-            size?: import("./types").ThumbnailSize | undefined;
-            loading?: "eager" | "lazy" | undefined;
-            loadingPlaceholderImageRef?: React.RefObject<HTMLImageElement> | undefined;
-            handleClick?: ((event: any) => void) | undefined;
-            handleKeyPress?: ((event: any) => void) | undefined;
-            variant?: ThumbnailVariant | undefined;
-            linkProps?: import("../../types").GenericProps | undefined;
-            focusPointStyle?: import("../../types").GenericProps | undefined;
-            disabledStateProps?: import("../../types").GenericProps | undefined;
-            isAnyDisabled?: boolean | undefined;
-            linkAs?: "a" | any;
-            'aria-label'?: string | undefined;
-            theme?: import("../../constants").Theme | undefined;
-            className?: string | undefined;
-        };
-    };
-    /** Simple thumbnail taking the size of the original image */
-    Simple: {
-        args: {
-            image: string;
-        };
-        decorators: ((story: any, context: any) => any)[];
-    };
-    /** Loading state */
-    IsLoading: {
-        args: {
-            image: string;
-            isLoading: boolean;
-        };
-    };
-    WithoutSource: {
-        args: {
-            image: string;
-            size: "xxl";
-            aspectRatio: "square";
-        };
-    };
-    /** Demonstrate the focus point X on a vertical thumbnail containing an horizontal image */
-    FocusPointVertical: {
-        args: {
-            aspectRatio: "vertical";
-            size: "xxl";
-            image: string;
-            'focusPoint.x': number;
-        };
-    };
-    /** Demonstrate the focus point Y on a horizontal thumbnail containing an vertical image */
-    FocusPointHorizontal: {
-        args: {
-            aspectRatio: "horizontal";
-            size: "xxl";
-            image: string;
-            'focusPoint.y': number;
-        };
-    };
-    /** Setting `onClick` to turn the thumbnail into a button */
-    AsButton: {
-        args: {
-            image: string;
-        };
-        argTypes: {
-            onClick: {
-                action: boolean;
-            };
-        };
-    };
-    /** Setting `linkProps.href` to turn the thumbnail into a link */
-    AsLink: {
-        args: {
-            image: string;
-            linkProps: {
-                href: string;
-            };
-        };
-    };
-    /** Combinations of fillHeight and ratios */
-    FillHeightAndRatio: {
-        args: {
-            image: string;
-            fillHeight: boolean;
-        };
-        decorators: ((story: any, context: any) => any)[];
-    };
-    /** Simple thumbnail with svg image */
-    WithSvgImages: {
-        args: {
-            image: string;
-            size: "xxl";
-            fillHeight: boolean;
-            'focusPoint.x': number;
-        };
-    };
-    /** Thumbnail letter-boxing */
-    ObjectFit: {
-        args: {
-            size: "xl";
-        };
-        decorators: ((story: any, context: any) => any)[];
-    };
-};

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

@@ -1,11 +0,0 @@
-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;
-    thumbnail: HTMLElement;
-    wrapper: Partial<import("../../../testing").SetupResult>;
-};
-declare const _default: (renderOptions: SetupOptions<any>) => void;
-export default _default;

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

@@ -1,84 +0,0 @@
-import type { ImgHTMLAttributes } from 'react';
-import { AspectRatio, HorizontalAlignment } from '@lumx/core/js/constants';
-import type { GenericProps, HasTheme, CommonRef, JSXElement, LumxClassName, HasClassName } from '@lumx/core/js/types';
-import { ThumbnailSize, ThumbnailVariant, ThumbnailObjectFit } from './types';
-type ImgHTMLProps = ImgHTMLAttributes<HTMLImageElement>;
-/**
- * Defines the props of the component.
- */
-export interface ThumbnailProps extends HasTheme, HasClassName {
-    /** Alignment of the thumbnail in it's parent (requires flex parent). */
-    align?: HorizontalAlignment;
-    /** Image alternative text. */
-    alt: string;
-    /** Image aspect ratio. */
-    aspectRatio?: AspectRatio;
-    /** Badge. */
-    badge?: JSXElement;
-    /** Image cross origin resource policy. */
-    crossOrigin?: ImgHTMLProps['crossOrigin'];
-    /** Fallback icon (SVG path) or react node when image fails to load. */
-    fallback?: string | JSXElement;
-    /** Whether the thumbnail should fill it's parent size (requires flex parent) or not. */
-    fillHeight?: boolean;
-    /** Image URL. */
-    image: string;
-    loadingState: string;
-    /** Props to inject into the native <img> element. */
-    imgProps?: ImgHTMLProps;
-    /** Reference to the native <img> element. */
-    imgRef?: CommonRef;
-    ref?: CommonRef;
-    /** Set to true to force the display of the loading skeleton. */
-    isLoading?: boolean;
-    /** Set how the image should fit when its aspect ratio is constrained */
-    objectFit?: ThumbnailObjectFit;
-    /** Size variant of the component. */
-    size?: ThumbnailSize;
-    /** Image loading mode. */
-    loading?: 'eager' | 'lazy';
-    /** Ref of an existing placeholder image to display while loading. */
-    loadingPlaceholderImageRef?: React.RefObject<HTMLImageElement>;
-    /** On click callback. */
-    handleClick?: (event: any) => void;
-    /** On key press callback. */
-    handleKeyPress?: (event: any) => void;
-    /** Variant of the component. */
-    variant?: ThumbnailVariant;
-    /** Props to pass to the link wrapping the thumbnail. */
-    linkProps?: GenericProps;
-    focusPointStyle?: GenericProps;
-    disabledStateProps?: GenericProps;
-    isAnyDisabled?: boolean;
-    /** Custom react component for the link (can be used to inject react router Link). */
-    linkAs?: 'a' | any;
-    'aria-label'?: string;
-}
-/**
- * Component display name.
- */
-export declare const COMPONENT_NAME = "Thumbnail";
-/**
- * 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<ThumbnailProps>;
-/**
- * Thumbnail component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export declare const Thumbnail: (props: ThumbnailProps) => import("react").JSX.Element;
-export * from './utils';

package/js/components/Thumbnail/types.d.ts

@@ -1,45 +0,0 @@
-import { AspectRatio, Size } from '../../constants';
-import { ValueOf } from '../../types';
-/**
- *  Focal point using vertical alignment, horizontal alignment or coordinates (from -1 to 1).
- */
-export type FocusPoint = {
-    x?: number;
-    y?: number;
-};
-/**
- * Loading attribute is not yet supported in typescript, so we need
- * to add it in order to avoid a ts error.
- * https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/blob/master/ADVANCED.md#adding-non-standard-attributes
- */
-declare module 'react' {
-    interface ImgHTMLAttributes<T> extends React.HTMLAttributes<T> {
-        loading?: 'eager' | 'lazy';
-    }
-}
-/**
- * All available aspect ratios.
- * @deprecated
- */
-export declare const ThumbnailAspectRatio: Record<string, AspectRatio>;
-/**
- *  Thumbnail sizes.
- */
-export type ThumbnailSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
-/**
- * Thumbnail variants.
- */
-export declare const ThumbnailVariant: {
-    readonly squared: "squared";
-    readonly rounded: "rounded";
-};
-export type ThumbnailVariant = ValueOf<typeof ThumbnailVariant>;
-/**
- * Thumbnail object fit.
- */
-export declare const ThumbnailObjectFit: {
-    readonly cover: "cover";
-    readonly contain: "contain";
-};
-export type ThumbnailObjectFit = ValueOf<typeof ThumbnailObjectFit>;
-export type LoadingState = 'isLoading' | 'isLoaded' | 'hasError';