onekijs-ui 0.19.24 → 0.19.26

package/dist/components/accordion/typings.d.ts

@@ -1,57 +1,164 @@
 import { AnonymousObject, AnyFunction, FCC } from 'onekijs-framework';
+/**
+ * @group Accordion
+ * @category types
+ */
 export type AccordionPanelProps<T = string> = {
+    /**
+     * Indicates if the panel is active. This value cannot be changed afterwards since it's managed by the accordion
+     * Active and expand are similar if it's "single-expand" accordion. For a multi-expand accordion, the active panel is the last expanded one
+     * Only one panel can be active at the same time
+     *
+     * @defaultValue false
+     */
     initialActive?: boolean;
+    /**
+     * Indicates if the panel is expanded. This value cannot be changed afterwards since it's managed by the accordion
+     *
+     * @defaultValue false
+     */
     initialExpand?: boolean;
+    /**
+     * The title of the panel. This value is rendered by the property Component
+     *
+     * @remarks #important#
+     */
     title: T;
+    /**
+     * The component used to render the title
+     *
+     * @defaultValue AccordionPanelTitle
+     */
     Component?: FCC<AccordionPanelTitleProps<T>>;
+    /**
+     * Used to redirect the user to an URL instead of expanding a content
+     *
+     * @example  /users
+     */
     link?: string;
 };
+/**
+ * @group Accordion
+ * @category types
+ */
 export type AccordionPanelTitleProps<T = string> = {
+    /**
+     * The title that must be rendered by the Component
+     */
     title: T;
+    /**
+     * Indicates that the panel is the active one
+     */
     active: boolean;
+    /**
+     * Listener that is called when the user clicks on the title
+     */
     onClick: AnyFunction;
+    /**
+     * Indicates that a click on the title should redirect the user to an URL instead of expanding a content
+     */
     link?: string;
 };
+/**
+ * Defines the state of an accordion panel
+ *
+ * @group Accordion
+ * @category types
+ */
 export type AccordionPanelState = {
+    /**
+     * Indicates if the panel is active.
+     * Active and expand are similar if it's "single-expand" accordion. For a multi-expand accordion, the active panel is the last expanded one
+     * Only one panel can be active at the same time
+     */
     active: boolean;
+    /**
+     * a unique id auto-generated for each panel
+     */
     uid: string;
+    /**
+     * Indicates if the panel is collapsing (only useful when there are some animations)
+     */
     collapsing?: boolean;
+    /**
+     * Indicates if the panel is expanding (only useful when there are some animations)
+     */
     expanding?: boolean;
+    /**
+     * Indicates whether the panel is expanded or collapsed
+     */
     expanded?: boolean;
 };
 /**
+ * Defines the props of an Accordion
+ *
  * @group Accordion
  * @category types
  */
 export type AccordionProps = {
     /**
-     * a flag to indicate if the border is visible or not
+     * a flag to indicate whether the border of the accordion is visible or not
      *
-     * @example false
      * @defaultValue true
      */
     border?: boolean;
+    /**
+     * The unstyled component that is used to render the accordion
+     *
+     * @defaultValue AccordionComponent
+     */
     Component?: FCC<Omit<AccordionProps, 'Component'>>;
+    /**
+     * A CSS class name that is attached to the accordion root element
+     * Multiple class names must be separated by commas
+     *
+     */
     className?: string;
     /**
+     * Indicates if multiple panels can be expanded at the same time
+     *
      * @defaultValue false
      */
     multiExpand?: boolean;
     /**
+     * The animation duration when a panel is expanded or collapse
+     * A value of 0 disables the animation
+     *
      * @defaultValue 150
      */
     animate?: number;
     /**
-     * push means that the height of the accordion panel is derived from the height of its content
-     * pushToBottom means that the height of the accordion panel is the remaining space given by the accordion's container after removing the space taken by the other accordion panel titles (do not work if multiExpand is true)
+     * `push` means that the height of an accordion panel is derived from the height of its content
+     * `pushToBottom` means that the height of the accordion panel is the remaining space given by the accordion's container after removing the space taken by the other accordion panel titles (does not work if multiExpand is true)
      *
      * @defaultValue push
      */
     mode?: 'push' | 'pushToBottom';
 };
+/**
+ * Defines the state of an Accordion.
+ * Used internally by the AccordionService
+ *
+ * @group Accordion
+ * @category types
+ */
 export type AccordionState = {
+    /**
+     * The state of each panel member of the Accordion
+     */
     panels: AnonymousObject<AccordionPanelState>;
+    /**
+     * Indicates if multiple panels can be expanded at the same time
+     */
     multiExpand?: boolean;
+    /**
+     * The animation duration when a panel is expanded or collapse
+     * A value of 0 disables the animation
+     */
     animate: number;
+    /**
+     * `push` means that the height of an accordion panel is derived from the height of its content
+     * `pushToBottom` means that the height of the accordion panel is the remaining space given by the accordion's container after removing the space taken by the other accordion panel titles (does not work if multiExpand is true)
+     */
     mode?: 'push' | 'pushToBottom';
 };

package/dist/components/field/typings.d.ts

@@ -34,25 +34,165 @@ export type FieldHelpProps = {
     layout?: FormLayout;
 };
 export type FieldLayoutProps = {
+    /**
+     * A CSS class name to be added to the field's root element
+     * Each internal element is generally associated with a class name to let you can easily style it via CSS
+     *
+     * Multiple classNames must be separated by commas
+     */
     className?: string;
+    /**
+     * A quick description of the field (should not be too long)
+     * This message is rendered below the field
+     *
+     * @remarks #important#
+     */
     description?: ReactNode;
+    /**
+     * Indicates if the field is disabled.
+     * If the field is managed by a form, changing this value will have no effect, and this property should only be used to set the initial value.
+     * If the field is container
+     *   * if it's disabled, any field inside the container will also be disabled
+     *   * if it's enabled, any field inside the container will be disabled or enabled depending on their own disabled property
+     *
+     * @defaultValue false
+     * @remarks #important#
+     */
     disabled?: boolean;
+    /**
+     * Replace the default component used to display the description
+     *
+     * @defaultValue FieldDescription
+     */
     DescriptionComponent?: React.FC<FieldDescriptionProps>;
+    /**
+     * A message describing the field.
+     * It can be a long message since the content is displayed in a tooltip
+     *
+     * @remarks #important#
+     */
     help?: ReactNode;
+    /**
+     * Replace the default component used to display the help message
+     *
+     * @defaultValue FieldHelp
+     */
     HelpComponent?: React.FC<FieldHelpProps>;
+    /**
+     * The id of the field. Must be unique within the app
+     * This id is attached to the HTML object and can be used to manipulate the field via standard JS methods
+     *
+     */
     id?: string | number;
+    /**
+     * The label is placed in front of the field (if the layout is horizontal) or above the field (if the layout is vertical).
+     * It should describe in one word the value expected by the field
+     * The label is not rendered if the noLabel option is active. If the noLabel option is not active, an empty label always takes up space in the form (to maintain alignment).
+     *
+     * @example First Name
+     * @remarks #important#
+     */
     label?: string;
+    /**
+     * Replace the default component used to display the label
+     *
+     * @defaultValue Label
+     */
     LabelComponent?: React.FC<LabelProps>;
+    /**
+     * The width reserved for the label. It only makes sense if the layout is horizontal.
+     * The expected value is between 1 and 12 (see the grid component)
+     * The "width" value can be replaced by a breakpoint width (used to specify a different "width" value for a smartphone or desktop computer, for example).
+     *
+     * Note that the labelWidth can be defined at the form level (every field inside the form will inherit the value) or in the settings file (for every form)
+     *
+     * @defaultValue 3
+     */
     labelWidth?: GridSize;
+    /**
+     * The width reserved for the label for extra small screen. It only makes sense if the layout is horizontal.
+     * The expected value is between 1 and 12 (see the grid component)
+     * If it's not defined, the labelWidth is used for extra small screen
+     * By default, the breakpoint for very small screens is 576px, but this can be modified by a custom theme.
+     *
+     * Note that the xsLabelWidth can be defined at the form level (every field inside the form will inherit the value) or in the settings file (for every form)
+     */
     xsLabelWidth?: GridSize;
+    /**
+     * The width reserved for the label for small screens. It only makes sense if the layout is horizontal.
+     * The expected value is between 1 and 12 (see the grid component)
+     * If it's not defined, the labelWidth is used for small screens
+     * By default, the breakpoint for small screens is 768px, but this can be modified by a custom theme.
+     *
+     * Note that the smLabelWidth can be defined at the form level (every field inside the form will inherit the value) or in the settings file (for every form)
+     */
     smLabelWidth?: GridSize;
+    /**
+     * The width reserved for the label for medium screens. It only makes sense if the layout is horizontal.
+     * The expected value is between 1 and 12 (see the grid component)
+     * If it's not defined, the labelWidth is used for medium screens
+     * By default, the breakpoint for medium screens is 992px, but this can be modified by a custom theme.
+     *
+     * Note that the mdLabelWidth can be defined at the form level (every field inside the form will inherit the value) or in the settings file (for every form)
+     */
     mdLabelWidth?: GridSize;
+    /**
+     * The width reserved for the label for large screens. It only makes sense if the layout is horizontal.
+     * The expected value is between 1 and 12 (see the grid component)
+     * If it's not defined, the labelWidth is used for large screens
+     * By default, the breakpoint for large screens is 1200px, but this can be modified by a custom theme.
+     *
+     * Note that the lgLabelWidth can be defined at the form level (every field inside the form will inherit the value) or in the settings file (for every form)
+     */
     lgLabelWidth?: GridSize;
+    /**
+     * The width reserved for the label for extra large screens. It only makes sense if the layout is horizontal.
+     * The expected value is between 1 and 12 (see the grid component)
+     * If it's not defined, the labelWidth is used for extra large screens
+     * By default, the breakpoint for extra large screens is 1850px, but this can be modified by a custom theme.
+     *
+     * Note that the lgLabelWidth can be defined at the form level (every field inside the form will inherit the value) or in the settings file (for every form)
+     */
     xlLabelWidth?: GridSize;
+    /**
+     * The layout of the field. Can be vertical or horizontal
+     * If the layout is horizontal, the label is displayed in front of the field
+     * If the layout is vertical, the label is diplayed above the field
+     *
+     * Note that the layout can be defined at the form level (every field inside the form will inherit the value) or in the settings file (for every form)
+     */
     layout?: FormLayout;
+    /**
+     * Indicates if the field is mandatory
+     * If a field is mandatory, a small red star will be visible next to the label.
+     * If a field is disabled, the required property is automatically removed
+     *
+     * @remarks #important#
+     */
     required?: boolean;
+    /**
+     * The size of the field
+     * Valid values are:
+     *   * small
+     *   * medium
+     *   * large
+     *   * xlarge
+     *
+     * @defaultValue medium
+     */
     size?: TshirtSize;
+    /**
+     * The status of the validation of the field
+     * If the field is managed by a form, this property is ignored (since everything is controlled by the form)
+     */
     validation?: FieldValidation | ContainerValidation;
+    /**
+     * The visibility of the field
+     * If the field is managed by a form, changing this value will have no effect, and this property should only be used to set the initial visibility.
+     *
+     * @defaultValue true
+     * @remarks #important#
+     */
     visible?: boolean;
 };
 export type UseFieldLayoutProps<T extends AnonymousObject> = T & FormFieldProps & FieldLayoutProps & {

package/dist/components/icon/util.d.ts

@@ -9,7 +9,7 @@ export declare const getIconDivProps: (props: IconProps) => {
     checked?: boolean | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     disabled?: boolean | undefined;
-    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
+    enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
     form?: string | undefined;
     formAction?: string | undefined;
     formEncType?: string | undefined;
@@ -80,7 +80,7 @@ export declare const getIconDivProps: (props: IconProps) => {
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "none" | "search" | "email" | "tel" | "text" | "url" | "numeric" | "decimal" | undefined;
+    inputMode?: "search" | "text" | "email" | "tel" | "url" | "none" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: (boolean | "true" | "false") | undefined;
@@ -94,17 +94,17 @@ export declare const getIconDivProps: (props: IconProps) => {
     'aria-colindextext'?: string | undefined;
     'aria-colspan'?: number | undefined;
     'aria-controls'?: string | undefined;
-    'aria-current'?: boolean | "step" | "date" | "time" | "true" | "false" | "page" | "location" | undefined;
+    'aria-current'?: boolean | "time" | "step" | "date" | "true" | "false" | "page" | "location" | undefined;
     'aria-describedby'?: string | undefined;
     'aria-description'?: string | undefined;
     'aria-details'?: string | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
-    'aria-dropeffect'?: "none" | "link" | "copy" | "execute" | "move" | "popup" | undefined;
+    'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
     'aria-errormessage'?: string | undefined;
     'aria-expanded'?: (boolean | "true" | "false") | undefined;
     'aria-flowto'?: string | undefined;
     'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-    'aria-haspopup'?: boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree" | undefined;
+    'aria-haspopup'?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
     'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined;
@@ -121,7 +121,7 @@ export declare const getIconDivProps: (props: IconProps) => {
     'aria-posinset'?: number | undefined;
     'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
     'aria-readonly'?: (boolean | "true" | "false") | undefined;
-    'aria-relevant'?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    'aria-relevant'?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
     'aria-required'?: (boolean | "true" | "false") | undefined;
     'aria-roledescription'?: string | undefined;
     'aria-rowcount'?: number | undefined;

package/dist/components/input/FormInput.d.ts

@@ -1,4 +1,21 @@
 import { FC } from 'react';
 import { FormInputProps } from './typings';
+/**
+ * `<FormInput/>` is a Input component designed to be managed by a Form.
+ * It must therefore be a nested component of a Form
+ *
+ * This component displays standard HTML input (and therefore supports all the HTML properties of an input component), but some properties are handled entirely by a form controller.
+ *   * value
+ *   * onChange
+ *   * onFocus
+ *   * onBlur
+ *   * validations
+ *   * visibility
+ *   * disabled
+ * The value is synchronized in both directions (it can be modified manually by the user or by the controller).
+ *
+ * @group Form
+ * @category Components
+ */
 declare const FormInput: FC<FormInputProps>;
 export default FormInput;

package/dist/components/input/typings.d.ts

@@ -3,13 +3,61 @@ import { TshirtSize } from '../../styles/typings';
 import { FieldDisplayerProps, FieldLayoutProps } from '../field/typings';
 import React from 'react';
 export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & {
+    /**
+     * A component rendered in front of the input component (actually inside the border of the input component)
+     */
     PrefixComponent?: React.FC<InputProps>;
+    /**
+     * A component rendered in after the input component (actually inside the border of the input component)
+     */
     SuffixComponent?: React.FC<InputProps>;
+    /**
+     * The status of the input
+     * Valid values are:
+     *   * ValidationStatus.Loading
+     *   * ValidationStatus.Error
+     *   * ValidationStatus.Warning
+     *   * ValidationStatus.OK
+     *   * ValidationStatus.None
+     * If the input is used in a form, the status is controlled by the form and this prop is ignored
+     *
+     * @defaultValue ValidationStatus.None
+     */
     status?: ValidationStatus;
+    /**
+     * The size of the input
+     * Valid values are:
+     *   * small
+     *   * medium
+     *   * large
+     *   * xlarge
+     *
+     * @defaultValue medium
+     */
     size?: TshirtSize;
 };
 export type FormInputProps = InputProps & FormFieldProps & FieldLayoutProps & {
+    /**
+     * The default value of the field if no specific value has been specified
+     * A value can be passed to field
+     *   * either manually by the user filling the form
+     *   * via the setValue of the form controller (if the field is inside a <Form> component)
+     *   * via an initial value transmitted to the form
+     *
+     * @remarks #important#
+     */
     defaultValue?: string;
+    /**
+     * Replace the default component that display the input
+     *
+     * @defaultValue Input
+     */
     FieldComponent?: React.FC<InputProps>;
+    /**
+     * There are three components used to display the value of an FormInput in the summary step
+     *   * Displayer: display (label + value)
+     *   * FieldDisplayer: extract the value from the field and display it
+     *   * ValueDisplayer: customize how the value is displayed
+     */
     FieldDisplayer?: React.FC<FieldDisplayerProps>;
 };

package/dist/components/select/SelectService.d.ts

@@ -5,15 +5,15 @@ declare class SelectService<T = any, I extends SelectItem<T> = SelectItem<T>, S
     protected lastCheckQuery: Query | undefined;
     get defaultValue(): T | T[] | null | undefined;
     get defaultValueLoading(): boolean | undefined;
-    check(): Generator<void | import("redux-saga/effects").AllEffect<import("redux-saga/effects").CallEffect<Generator<I[] | Generator<void | import("redux-saga/effects").ForkEffect<Generator<void | import("redux-saga/effects").CallEffect<true>, void, unknown>> | import("redux-saga/effects").CancelEffect | CollectionFetcherResult<T> | Promise<CollectionFetcherResult<T> | undefined>, CollectionFetcherResult<T>, (import("redux-saga").Task<any> | null) & CollectionFetcherResult<T> & (CollectionFetcherResult<T> | undefined)>, I | undefined, I[] & CollectionFetcherResult<T>>>> | import("redux-saga/effects").AllEffect<Generator<I[] | Generator<void | import("redux-saga/effects").ForkEffect<Generator<void | import("redux-saga/effects").CallEffect<true>, void, unknown>> | import("redux-saga/effects").CancelEffect | CollectionFetcherResult<T> | Promise<CollectionFetcherResult<T> | undefined>, CollectionFetcherResult<T>, (import("redux-saga").Task<any> | null) & CollectionFetcherResult<T> & (CollectionFetcherResult<T> | undefined)>, I | undefined, I[] & CollectionFetcherResult<T>>> | import("redux-saga/effects").CallEffect<void>, void, (I | undefined)[]>;
+    check(): Generator<void | import("redux-saga/effects").AllEffect<import("redux-saga/effects").CallEffect<Generator<I[] | Generator<void | import("redux-saga/effects").CancelEffect | import("redux-saga/effects").ForkEffect<Generator<void | import("redux-saga/effects").CallEffect<true>, void, unknown>> | CollectionFetcherResult<T> | Promise<CollectionFetcherResult<T> | undefined>, CollectionFetcherResult<T>, (import("redux-saga").Task<any> | null) & CollectionFetcherResult<T> & (CollectionFetcherResult<T> | undefined)>, I | undefined, I[] & CollectionFetcherResult<T>>>> | import("redux-saga/effects").AllEffect<Generator<I[] | Generator<void | import("redux-saga/effects").CancelEffect | import("redux-saga/effects").ForkEffect<Generator<void | import("redux-saga/effects").CallEffect<true>, void, unknown>> | CollectionFetcherResult<T> | Promise<CollectionFetcherResult<T> | undefined>, CollectionFetcherResult<T>, (import("redux-saga").Task<any> | null) & CollectionFetcherResult<T> & (CollectionFetcherResult<T> | undefined)>, I | undefined, I[] & CollectionFetcherResult<T>>> | import("redux-saga/effects").CallEffect<void>, void, (I | undefined)[]>;
     setData(data: T[], query?: Query): void;
-    setDefaultValue(value: T | T[] | null | undefined): Generator<void | Generator<void | import("redux-saga/effects").AllEffect<import("redux-saga/effects").CallEffect<Generator<I[] | Generator<void | import("redux-saga/effects").ForkEffect<Generator<void | import("redux-saga/effects").CallEffect<true>, void, unknown>> | import("redux-saga/effects").CancelEffect | CollectionFetcherResult<T> | Promise<CollectionFetcherResult<T> | undefined>, CollectionFetcherResult<T>, (import("redux-saga").Task<any> | null) & CollectionFetcherResult<T> & (CollectionFetcherResult<T> | undefined)>, I | undefined, I[] & CollectionFetcherResult<T>>>> | import("redux-saga/effects").AllEffect<Generator<I[] | Generator<void | import("redux-saga/effects").ForkEffect<Generator<void | import("redux-saga/effects").CallEffect<true>, void, unknown>> | import("redux-saga/effects").CancelEffect | CollectionFetcherResult<T> | Promise<CollectionFetcherResult<T> | undefined>, CollectionFetcherResult<T>, (import("redux-saga").Task<any> | null) & CollectionFetcherResult<T> & (CollectionFetcherResult<T> | undefined)>, I | undefined, I[] & CollectionFetcherResult<T>>> | import("redux-saga/effects").CallEffect<void>, void, (I | undefined)[]>, void, unknown>;
+    setDefaultValue(value: T | T[] | null | undefined): Generator<void | Generator<void | import("redux-saga/effects").AllEffect<import("redux-saga/effects").CallEffect<Generator<I[] | Generator<void | import("redux-saga/effects").CancelEffect | import("redux-saga/effects").ForkEffect<Generator<void | import("redux-saga/effects").CallEffect<true>, void, unknown>> | CollectionFetcherResult<T> | Promise<CollectionFetcherResult<T> | undefined>, CollectionFetcherResult<T>, (import("redux-saga").Task<any> | null) & CollectionFetcherResult<T> & (CollectionFetcherResult<T> | undefined)>, I | undefined, I[] & CollectionFetcherResult<T>>>> | import("redux-saga/effects").AllEffect<Generator<I[] | Generator<void | import("redux-saga/effects").CancelEffect | import("redux-saga/effects").ForkEffect<Generator<void | import("redux-saga/effects").CallEffect<true>, void, unknown>> | CollectionFetcherResult<T> | Promise<CollectionFetcherResult<T> | undefined>, CollectionFetcherResult<T>, (import("redux-saga").Task<any> | null) & CollectionFetcherResult<T> & (CollectionFetcherResult<T> | undefined)>, I | undefined, I[] & CollectionFetcherResult<T>>> | import("redux-saga/effects").CallEffect<void>, void, (I | undefined)[]>, void, unknown>;
     setDefaultValueLoading(loading: boolean): void;
     setItemWidth(_item: I, value: number): void;
     setValue(value: null | T | T[]): void;
     setUrl(url: string, query?: Query): void;
     _buildItem(data: T | null | undefined, adaptee: unknown, context?: AnonymousObject): I;
-    _filterItem(item: I | undefined, query: Query, valid: boolean): Generator<I[] | Generator<void | import("redux-saga/effects").ForkEffect<Generator<void | import("redux-saga/effects").CallEffect<true>, void, unknown>> | import("redux-saga/effects").CancelEffect | CollectionFetcherResult<T> | Promise<CollectionFetcherResult<T> | undefined>, CollectionFetcherResult<T>, (import("redux-saga").Task<any> | null) & CollectionFetcherResult<T> & (CollectionFetcherResult<T> | undefined)>, I | undefined, I[] & CollectionFetcherResult<T>>;
+    _filterItem(item: I | undefined, query: Query, valid: boolean): Generator<I[] | Generator<void | import("redux-saga/effects").CancelEffect | import("redux-saga/effects").ForkEffect<Generator<void | import("redux-saga/effects").CallEffect<true>, void, unknown>> | CollectionFetcherResult<T> | Promise<CollectionFetcherResult<T> | undefined>, CollectionFetcherResult<T>, (import("redux-saga").Task<any> | null) & CollectionFetcherResult<T> & (CollectionFetcherResult<T> | undefined)>, I | undefined, I[] & CollectionFetcherResult<T>>;
     _compareItem(a: I | undefined, b: I | undefined): boolean;
     _setDefaultValue(value: T | T[] | null | undefined): void;
     _setValidDefaultValue(value: T | T[] | null): void;

package/dist/components/table/typings.d.ts

@@ -11,7 +11,7 @@ import TableService from './TableService';
 export type ArrayTableProps<T = any, I extends TableItem<T> = TableItem<T>> = TableConfig<T, I> & {
     adapter?: TableItemAdapter<T>;
     columns?: TableColumn<T, I>[];
-    dataSource?: string | T[];
+    dataSource?: string | T[] | (() => T[] | Promise<T[]>);
     fetchOnce?: boolean;
     selected?: T[];
 };
@@ -252,7 +252,7 @@ export type TableProps<T = any, I extends TableItem<T> = TableItem<T>, S extends
     adapter?: TableItemAdapter<T>;
     controller?: CollectionProxy<T, I, S, C>;
     columns?: TableColumn<T, I>[];
-    dataSource?: string | T[];
+    dataSource?: string | T[] | (() => T[] | Promise<T[]>);
     fetchOnce?: boolean;
     selected?: T[];
 };

package/dist/index.js

@@ -4401,6 +4401,23 @@ const Password = styled(PasswordComponent$1) `
 const FormInputValueDisplayer = ({ value }) => {
     return React.createElement("span", { className: "o-input-displayer-value" }, value ?? '');
 };
+/**
+ * `<FormInput/>` is a Input component designed to be managed by a Form.
+ * It must therefore be a nested component of a Form
+ *
+ * This component displays standard HTML input (and therefore supports all the HTML properties of an input component), but some properties are handled entirely by a form controller.
+ *   * value
+ *   * onChange
+ *   * onFocus
+ *   * onBlur
+ *   * validations
+ *   * visibility
+ *   * disabled
+ * The value is synchronized in both directions (it can be modified manually by the user or by the controller).
+ *
+ * @group Form
+ * @category Components
+ */
 const FormInput = React.memo((props) => {
     const [fieldLayoutProps, fieldComponentProps] = useFieldLayout(Object.assign({}, props, {
         defaultValue: props.defaultValue === undefined ? '' : props.defaultValue,
@@ -6275,6 +6292,7 @@ const propertiesStyle = ({ theme }) => {
     .o-property {
       ${paddingY(t.paddingY)}
       ${flexWrap('wrap')}
+      ${alignItems('flex-start')}
     }
     .o-property-name {
       ${fontWeight(t.fontWeight)}
@@ -6629,13 +6647,15 @@ const SelectTokensComponent = ({ tokens, onRemove, maxDisplayTokens, }) => {
     };
     const onEntering = (node) => {
         const width = node.getBoundingClientRect().width;
-        node.style.width = '0px';
-        node.style.opacity = '0';
-        node.style.transition = 'all 150ms';
-        setTimeout(() => {
-            node.style.width = `${width}px`;
-            node.style.opacity = '1';
-        }, 0);
+        if (width) {
+            node.style.width = '0px';
+            node.style.opacity = '0';
+            node.style.transition = 'all 150ms';
+            setTimeout(() => {
+                node.style.width = `${width}px`;
+                node.style.opacity = '1';
+            }, 0);
+        }
     };
     if (tokens !== undefined) {
         if (!maxDisplayTokens || tokens.length <= maxDisplayTokens) {
@@ -10460,10 +10480,30 @@ const ControllerTableComponent = ({ autoRefresh, controller, className, bodyClas
 ControllerTableComponent.displayName = 'Table';
 
 const ArrayTableComponent = (props) => {
-    const controller = useTableController(props.dataSource, props.columns, {
+    let dataSource = undefined;
+    if (props.dataSource && !(typeof props.dataSource === 'string') && !Array.isArray(props.dataSource)) {
+        // dataSource is an async function
+        // we force it to be undefined and we are going to load the dataSource asynchronously
+        dataSource = undefined;
+    }
+    else {
+        dataSource = props.dataSource;
+    }
+    const controller = useTableController(dataSource, props.columns, {
         adapter: props.adapter,
         fetchOnce: props.fetchOnce,
     });
+    React.useEffect(() => {
+        const loadDataSource = (async () => {
+            if (props.dataSource && !(typeof props.dataSource === 'string') && !Array.isArray(props.dataSource)) {
+                const data = await props.dataSource();
+                controller.setData(data);
+            }
+        });
+        if (dataSource === undefined && props.dataSource !== undefined) {
+            loadDataSource();
+        }
+    }, []);
     return React.createElement(ControllerTableComponent, { ...props, controller: controller });
 };