@lumx/react 4.11.0-next.7 → 4.11.0-next.8

package/index.d.ts

@@ -1,7 +1,7 @@
-import { Kind as Kind$1, HorizontalAlignment as HorizontalAlignment$1, Orientation as Orientation$1, Alignment as Alignment$1, Size as Size$1, AspectRatio as AspectRatio$1, Emphasis as Emphasis$1, Theme as Theme$1 } from '@lumx/core/js/constants';
+import { HorizontalAlignment as HorizontalAlignment$1, Orientation as Orientation$1, Alignment as Alignment$1, Size as Size$1, AspectRatio as AspectRatio$1, Kind as Kind$1, Emphasis as Emphasis$1, Theme as Theme$1 } from '@lumx/core/js/constants';
 export * from '@lumx/core/js/constants';
 import * as _lumx_core_js_types from '@lumx/core/js/types';
-import { GenericProps as GenericProps$1, HasTheme as HasTheme$1, ValueOf as ValueOf$1, PropsToOverride, HasAriaDisabled as HasAriaDisabled$1, HasRequiredLinkHref as HasRequiredLinkHref$1, HasClassName as HasClassName$1, HasCloseMode as HasCloseMode$1, JSXElement as JSXElement$1, CommonRef as CommonRef$1, Falsy, HeadingElement as HeadingElement$1, HasAriaLabelOrLabelledBy as HasAriaLabelOrLabelledBy$1 } from '@lumx/core/js/types';
+import { ValueOf as ValueOf$1, GenericProps as GenericProps$1, HasTheme as HasTheme$1, PropsToOverride, HasAriaDisabled as HasAriaDisabled$1, HasRequiredLinkHref as HasRequiredLinkHref$1, HasClassName as HasClassName$1, HasCloseMode as HasCloseMode$1, JSXElement as JSXElement$1, CommonRef as CommonRef$1, Falsy, HeadingElement as HeadingElement$1, HasAriaLabelOrLabelledBy as HasAriaLabelOrLabelledBy$1 } from '@lumx/core/js/types';
 export * from '@lumx/core/js/types';
 import * as React$1 from 'react';
 import React__default, { Ref, ReactElement, ReactNode, SyntheticEvent, MouseEventHandler, KeyboardEventHandler, RefObject, SetStateAction, Key, CSSProperties, ElementType as ElementType$1, HTMLInputTypeAttribute, ComponentProps, ImgHTMLAttributes, AriaAttributes as AriaAttributes$1 } from 'react';
@@ -39,260 +39,6 @@ type HasPolymorphicAs$1<E extends React.ElementType> = React.ComponentPropsWitho
     as?: E;
 };
 
-interface AlertDialogProps extends Omit<DialogProps, 'header' | 'footer'> {
-    /** Message variant. */
-    kind?: Kind$1;
-    /** Dialog title. */
-    title?: string;
-    /** Props forwarded to the confirm button */
-    confirmProps: ButtonProps & {
-        label: string;
-    };
-    /**
-     * Props forwarded to the cancel button.
-     * Will not render a cancel button if undefined.
-     */
-    cancelProps?: ButtonProps & {
-        label: string;
-    };
-    /**
-     * Children
-     */
-    children?: React__default.ReactNode;
-}
-/**
- * AlertDialog component.
- *
- * An alert dialog is a modal dialog that interrupts the user's workflow to
- * communicate an important message and acquire a response.
- *
- * It should not have a complex content.
- * Children of this component should only be strings, paragraphs or links.
- */
-declare const AlertDialog: Comp<AlertDialogProps, HTMLDivElement>;
-
-/**
- * Defines the props of the component.
- */
-interface AutocompleteProps extends GenericProps$1, HasTheme$1 {
-    /**
-     * Whether the suggestions list should display anchored to the input or to the wrapper.
-     * @see {@link DropdownProps#anchorToInput}
-     */
-    anchorToInput?: boolean;
-    /**
-     * Props to pass to the clear button (minus those already set by the TextField props).
-     * If not specified, the button won't be displayed.
-     * @see {@link TextFieldProps#clearButtonProps}
-     */
-    clearButtonProps?: Pick<IconButtonProps, 'label'> & Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;
-    /**
-     * Reference to the <input> or <textarea> element.
-     * @see {@link TextFieldProps#inputRef}
-     */
-    inputRef?: TextFieldProps['inputRef'];
-    /**
-     * The offset that will be applied to the Dropdown position.
-     * @see {@link DropdownProps#offset}
-     */
-    offset?: Offset;
-    /**
-     * The preferred Dropdown location against the anchor element.
-     * @see {@link DropdownProps#placement}
-     */
-    placement?: Placement;
-    /**
-     * Manage dropdown width:
-     *   - `maxWidth`: dropdown not bigger than anchor
-     *   - `minWidth` or `true`: dropdown not smaller than anchor
-     *   - `width`: dropdown equal to the anchor.
-     * @see {@link DropdownProps#fitToAnchorWidth}
-     */
-    fitToAnchorWidth?: DropdownProps['fitToAnchorWidth'];
-    /**
-     * The error related to the component.
-     * @see {@link TextFieldProps#error}
-     */
-    error?: string | ReactNode;
-    /**
-     * Whether the text field is displayed with error style or not.
-     * @see {@link TextFieldProps#hasError}
-     */
-    hasError?: boolean;
-    /**
-     * Whether the text box should be focused upon closing the suggestions or not.
-     */
-    shouldFocusOnClose?: boolean;
-    /**
-     * The helper message of the text field.
-     * @see {@link TextFieldProps#helper}
-     */
-    helper?: string;
-    /**
-     * The icon of the text field (SVG path).
-     * @see {@link TextFieldProps#icon}
-     */
-    icon?: string;
-    /**
-     * Whether the component is disabled or not.
-     * @see {@link TextFieldProps#isDisabled}
-     */
-    isDisabled?: boolean;
-    /**
-     * Whether the component is required or not.
-     * @see {@link TextFieldProps#isRequired}
-     */
-    isRequired?: boolean;
-    /**
-     * Whether the text field is displayed with valid style or not.
-     * @see {@link TextFieldProps#isValid}
-     */
-    isValid?: boolean;
-    /**
-     * The label of the text field displayed in a label tag.
-     * @see {@link TextFieldProps#label}
-     */
-    label?: string;
-    /**
-     * The placeholder message of the text field.
-     * @see {@link TextFieldProps#placeholder}
-     */
-    placeholder?: string;
-    /** List of suggestions to display during autocomplete. */
-    children: React.ReactNode;
-    /**
-     * The list of chips to be displayed before the text field input.
-     */
-    chips?: React.ReactNode;
-    /**
-     * The value of the text field.
-     * @see {@link TextFieldProps#value}
-     */
-    value: string;
-    /**
-     * Whether the suggestions from the autocomplete should be displayed or not.
-     * @see {@link DropdownProps#isOpen}
-     */
-    isOpen: boolean;
-    /**
-     * The native input name property.
-     * @see {@link TextFieldProps#name}
-     */
-    name?: string;
-    /**
-     * Whether a click in the Autocomplete dropdown would close it or not.
-     * @see {@link DropdownProps#closeOnClick}
-     */
-    closeOnClick?: boolean;
-    /**
-     * Whether a click anywhere out of the Autocomplete would close it or not.
-     * @see {@link DropdownProps#closeOnClickAway}
-     */
-    closeOnClickAway?: boolean;
-    /**
-     * Whether an escape key press would close the Autocomplete or not.
-     * @see {@link DropdownProps#closeOnEscape}
-     */
-    closeOnEscape?: boolean;
-    /**
-     * Whether the focus should go back on the anchor when dropdown closes and focus is within.
-     * @see {@link DropdownProps#focusAnchorOnClose}
-     */
-    focusAnchorOnClose?: DropdownProps['focusAnchorOnClose'];
-    /**
-     * The function called on blur.
-     * @see {@link TextFieldProps#onBlur}
-     */
-    onBlur?(event: React.FocusEvent): void;
-    /**
-     * On change callback.
-     * @see {@link TextFieldProps#onChange}
-     */
-    onChange(value: string, name?: string, event?: SyntheticEvent): void;
-    /**
-     * The function called on close.
-     * @see {@link DropdownProps#onClose}
-     */
-    onClose?(): void;
-    /**
-     * The function called on focus.
-     * @see {@link TextFieldProps#onFocus}
-     */
-    onFocus?(event: React.FocusEvent): void;
-    /**
-     * The function called when the bottom of the dropdown is reached.
-     * @see {@link DropdownProps#onInfiniteScroll}
-     */
-    onInfiniteScroll?(): void;
-    /**
-     * Props forwarded to the underlying TextField component.
-     * Only the props not managed by the Autocomplete can be set.
-     * @see {@link TextFieldProps}
-     */
-    textFieldProps?: Partial<TextFieldProps>;
-}
-/**
- * Autocomplete component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-declare const Autocomplete: Comp<AutocompleteProps, HTMLDivElement>;
-
-/**
- * Defines the props of the component.
- */
-interface AutocompleteMultipleProps extends AutocompleteProps {
-    /** Selected values. */
-    values: any[];
-    /** Alignment of the chips in the autocomplete. */
-    chipsAlignment?: HorizontalAlignment$1;
-    /** Selected value render function. Default: Renders the value inside of a Chip. */
-    selectedChipRender(choice: any, index: number, onClear?: (event?: React.MouseEvent, val?: any) => void, isDisabled?: boolean): ReactNode | string;
-}
-/**
- * AutocompleteMultiple component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-declare const AutocompleteMultiple: Comp<AutocompleteMultipleProps, HTMLDivElement>;
-
-/**
- * Require either `aria-label` or `arial-labelledby` prop.
- * If none are set, the order will prioritize `aria-labelledby` over `aria-label` as it
- * needs a visible element.
- */
-type HasAriaLabelOrLabelledBy<T = string | undefined> = T extends string ? {
-    /**
-     * The id of the element to use as title of the dialog. Can be within or out of the dialog.
-     * Although it is not recommended, aria-label can be used instead if no visible element is available.
-     */
-    'aria-labelledby': T;
-    /** The label of the dialog. */
-    'aria-label'?: undefined;
-} : {
-    'aria-label': string;
-    'aria-labelledby'?: undefined;
-};
-
-interface HasClassName {
-    /**
-     * Class name forwarded to the root element of the component.
-     */
-    className?: string;
-}
-
-interface HasCloseMode {
-    /**
-     * Choose how the children are hidden when closed
-     * ('hide' keeps the children in DOM but hide them, 'unmount' remove the children from the DOM).
-     */
-    closeMode?: 'hide' | 'unmount';
-}
-
 /**
  * Alignments.
  */
@@ -480,6 +226,39 @@ type ColorVariant = ValueOf$1<typeof ColorVariant>;
 /** ColorPalette with all possible color variant combination */
 type ColorWithVariants = ColorPalette | Exclude<`${ColorPalette}-${ColorVariant}`, `light-D${number}` | `dark-D${number}`>;
 
+/**
+ * Require either `aria-label` or `arial-labelledby` prop.
+ * If none are set, the order will prioritize `aria-labelledby` over `aria-label` as it
+ * needs a visible element.
+ */
+type HasAriaLabelOrLabelledBy<T = string | undefined> = T extends string ? {
+    /**
+     * The id of the element to use as title of the dialog. Can be within or out of the dialog.
+     * Although it is not recommended, aria-label can be used instead if no visible element is available.
+     */
+    'aria-labelledby': T;
+    /** The label of the dialog. */
+    'aria-label'?: undefined;
+} : {
+    'aria-label': string;
+    'aria-labelledby'?: undefined;
+};
+
+interface HasClassName {
+    /**
+     * Class name forwarded to the root element of the component.
+     */
+    className?: string;
+}
+
+interface HasCloseMode {
+    /**
+     * Choose how the children are hidden when closed
+     * ('hide' keeps the children in DOM but hide them, 'unmount' remove the children from the DOM).
+     */
+    closeMode?: 'hide' | 'unmount';
+}
+
 interface HasTheme {
     /**
      * Theme adapting the component to light or dark background.
@@ -596,6 +375,246 @@ type FieldSelector<TObject, TValue> = keyof {
  */
 type Selector<TObject, TValue = string> = FieldSelector<TObject, TValue> | FunctionSelector<TObject, TValue>;
 
+interface BaseDialogProps {
+    /** Footer content. */
+    footer?: JSXElement;
+    /** Whether the divider between the dialog content and the footer is always displayed (instead of showing it on scroll). */
+    forceFooterDivider?: boolean;
+    /** Header content. */
+    header?: JSXElement;
+    /** Whether the divider between the dialog content and the header is always displayed (instead of showing it on scroll). */
+    forceHeaderDivider?: boolean;
+    /** Whether the indefinite progress indicator over the dialog content is displayed or not. */
+    isLoading?: boolean;
+    /** Whether the component is open or not. */
+    isOpen?: boolean;
+}
+type DialogSizes = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;
+
+interface BaseAlertDialogProps {
+    /** Message variant. */
+    kind?: Kind;
+    /** Dialog title. */
+    title?: string;
+    /**
+     * Children
+     */
+    children?: JSXElement;
+}
+
+interface AlertDialogProps extends Omit<DialogProps, 'header' | 'footer'>, BaseAlertDialogProps {
+    /** Props forwarded to the confirm button */
+    confirmProps: ButtonProps & {
+        label: string;
+    };
+    /**
+     * Props forwarded to the cancel button.
+     * Will not render a cancel button if undefined.
+     */
+    cancelProps?: ButtonProps & {
+        label: string;
+    };
+}
+/**
+ * AlertDialog component.
+ *
+ * An alert dialog is a modal dialog that interrupts the user's workflow to
+ * communicate an important message and acquire a response.
+ *
+ * It should not have a complex content.
+ * Children of this component should only be strings, paragraphs or links.
+ */
+declare const AlertDialog: Comp<AlertDialogProps, HTMLDivElement>;
+
+/**
+ * Defines the props of the component.
+ */
+interface AutocompleteProps extends GenericProps$1, HasTheme$1 {
+    /**
+     * Whether the suggestions list should display anchored to the input or to the wrapper.
+     * @see {@link DropdownProps#anchorToInput}
+     */
+    anchorToInput?: boolean;
+    /**
+     * Props to pass to the clear button (minus those already set by the TextField props).
+     * If not specified, the button won't be displayed.
+     * @see {@link TextFieldProps#clearButtonProps}
+     */
+    clearButtonProps?: Pick<IconButtonProps, 'label'> & Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;
+    /**
+     * Reference to the <input> or <textarea> element.
+     * @see {@link TextFieldProps#inputRef}
+     */
+    inputRef?: TextFieldProps['inputRef'];
+    /**
+     * The offset that will be applied to the Dropdown position.
+     * @see {@link DropdownProps#offset}
+     */
+    offset?: Offset;
+    /**
+     * The preferred Dropdown location against the anchor element.
+     * @see {@link DropdownProps#placement}
+     */
+    placement?: Placement;
+    /**
+     * Manage dropdown width:
+     *   - `maxWidth`: dropdown not bigger than anchor
+     *   - `minWidth` or `true`: dropdown not smaller than anchor
+     *   - `width`: dropdown equal to the anchor.
+     * @see {@link DropdownProps#fitToAnchorWidth}
+     */
+    fitToAnchorWidth?: DropdownProps['fitToAnchorWidth'];
+    /**
+     * The error related to the component.
+     * @see {@link TextFieldProps#error}
+     */
+    error?: string | ReactNode;
+    /**
+     * Whether the text field is displayed with error style or not.
+     * @see {@link TextFieldProps#hasError}
+     */
+    hasError?: boolean;
+    /**
+     * Whether the text box should be focused upon closing the suggestions or not.
+     */
+    shouldFocusOnClose?: boolean;
+    /**
+     * The helper message of the text field.
+     * @see {@link TextFieldProps#helper}
+     */
+    helper?: string;
+    /**
+     * The icon of the text field (SVG path).
+     * @see {@link TextFieldProps#icon}
+     */
+    icon?: string;
+    /**
+     * Whether the component is disabled or not.
+     * @see {@link TextFieldProps#isDisabled}
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether the component is required or not.
+     * @see {@link TextFieldProps#isRequired}
+     */
+    isRequired?: boolean;
+    /**
+     * Whether the text field is displayed with valid style or not.
+     * @see {@link TextFieldProps#isValid}
+     */
+    isValid?: boolean;
+    /**
+     * The label of the text field displayed in a label tag.
+     * @see {@link TextFieldProps#label}
+     */
+    label?: string;
+    /**
+     * The placeholder message of the text field.
+     * @see {@link TextFieldProps#placeholder}
+     */
+    placeholder?: string;
+    /** List of suggestions to display during autocomplete. */
+    children: React.ReactNode;
+    /**
+     * The list of chips to be displayed before the text field input.
+     */
+    chips?: React.ReactNode;
+    /**
+     * The value of the text field.
+     * @see {@link TextFieldProps#value}
+     */
+    value: string;
+    /**
+     * Whether the suggestions from the autocomplete should be displayed or not.
+     * @see {@link DropdownProps#isOpen}
+     */
+    isOpen: boolean;
+    /**
+     * The native input name property.
+     * @see {@link TextFieldProps#name}
+     */
+    name?: string;
+    /**
+     * Whether a click in the Autocomplete dropdown would close it or not.
+     * @see {@link DropdownProps#closeOnClick}
+     */
+    closeOnClick?: boolean;
+    /**
+     * Whether a click anywhere out of the Autocomplete would close it or not.
+     * @see {@link DropdownProps#closeOnClickAway}
+     */
+    closeOnClickAway?: boolean;
+    /**
+     * Whether an escape key press would close the Autocomplete or not.
+     * @see {@link DropdownProps#closeOnEscape}
+     */
+    closeOnEscape?: boolean;
+    /**
+     * Whether the focus should go back on the anchor when dropdown closes and focus is within.
+     * @see {@link DropdownProps#focusAnchorOnClose}
+     */
+    focusAnchorOnClose?: DropdownProps['focusAnchorOnClose'];
+    /**
+     * The function called on blur.
+     * @see {@link TextFieldProps#onBlur}
+     */
+    onBlur?(event: React.FocusEvent): void;
+    /**
+     * On change callback.
+     * @see {@link TextFieldProps#onChange}
+     */
+    onChange(value: string, name?: string, event?: SyntheticEvent): void;
+    /**
+     * The function called on close.
+     * @see {@link DropdownProps#onClose}
+     */
+    onClose?(): void;
+    /**
+     * The function called on focus.
+     * @see {@link TextFieldProps#onFocus}
+     */
+    onFocus?(event: React.FocusEvent): void;
+    /**
+     * The function called when the bottom of the dropdown is reached.
+     * @see {@link DropdownProps#onInfiniteScroll}
+     */
+    onInfiniteScroll?(): void;
+    /**
+     * Props forwarded to the underlying TextField component.
+     * Only the props not managed by the Autocomplete can be set.
+     * @see {@link TextFieldProps}
+     */
+    textFieldProps?: Partial<TextFieldProps>;
+}
+/**
+ * Autocomplete component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const Autocomplete: Comp<AutocompleteProps, HTMLDivElement>;
+
+/**
+ * Defines the props of the component.
+ */
+interface AutocompleteMultipleProps extends AutocompleteProps {
+    /** Selected values. */
+    values: any[];
+    /** Alignment of the chips in the autocomplete. */
+    chipsAlignment?: HorizontalAlignment$1;
+    /** Selected value render function. Default: Renders the value inside of a Chip. */
+    selectedChipRender(choice: any, index: number, onClear?: (event?: React.MouseEvent, val?: any) => void, isDisabled?: boolean): ReactNode | string;
+}
+/**
+ * AutocompleteMultiple component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const AutocompleteMultiple: Comp<AutocompleteMultipleProps, HTMLDivElement>;
+
 /**
  * Avatar sizes.
  */
@@ -2281,22 +2300,6 @@ interface DatePickerFieldProps extends Omit<TextFieldProps, 'value' | 'onChange'
  */
 declare const DatePickerField: Comp<DatePickerFieldProps, HTMLDivElement>;
 
-interface BaseDialogProps {
-    /** Footer content. */
-    footer?: JSXElement;
-    /** Whether the divider between the dialog content and the footer is always displayed (instead of showing it on scroll). */
-    forceFooterDivider?: boolean;
-    /** Header content. */
-    header?: JSXElement;
-    /** Whether the divider between the dialog content and the header is always displayed (instead of showing it on scroll). */
-    forceHeaderDivider?: boolean;
-    /** Whether the indefinite progress indicator over the dialog content is displayed or not. */
-    isLoading?: boolean;
-    /** Whether the component is open or not. */
-    isOpen?: boolean;
-}
-type DialogSizes = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;
-
 /**
  * Defines the props of the component.
  */