@lumx/react 4.10.0 → 4.11.0-alpha.0

package/index.d.ts

@@ -1,4 +1,4 @@
-import { Kind as Kind$1, HorizontalAlignment as HorizontalAlignment$1, Theme as Theme$1, Size as Size$1, Orientation as Orientation$1, Alignment as Alignment$1, AspectRatio as AspectRatio$1, Emphasis as Emphasis$1 } from '@lumx/core/js/constants';
+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';
 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';
@@ -1018,61 +1018,50 @@ declare const ChipGroup: Comp<ChipGroupProps, HTMLDivElement> & {
     useChipGroupNavigation: useChipGroupNavigationType<any>;
 };
 
-interface SelectionChipGroupProps<O> extends GenericProps$1 {
-    /**
-     * Option object id selector (either the property name or a function to get the id)
-     */
+/**
+ * Defines the props of the component.
+ */
+interface SelectionChipGroupProps$1<O> extends HasClassName, HasTheme {
+    /** Option object id selector (either a property name or a function to get the id) */
     getOptionId: Selector<O>;
-    /**
-     * Option object name selector (either the property name or a function to get the name)
-     * Fallbacks on the ID if not defined
-     */
+    /** Option object name selector. Falls back to the id if not defined */
     getOptionName?: Selector<O, string | undefined | null>;
-    /**
-     * Selected options array
-     */
+    /** Selected options array */
     value?: O[];
-    /**
-     * Callback on option array selected
-     */
+    /** Label for accessibility (aria-label on the listbox) */
+    label: string;
+    /** Label for the remove action (visually hidden text appended to each chip) */
+    chipRemoveLabel?: string;
+    /** Disabled state for all chips */
+    isDisabled?: boolean;
+    /** Customize chip props per option */
+    getChipProps?: (option: O) => Partial<ChipProps$1>;
+    /** Ref for the container element */
+    ref?: any;
+}
+
+/**
+ * Defines the props of the component.
+ */
+interface SelectionChipGroupProps<O> extends GenericProps$1, ReactToJSX<SelectionChipGroupProps$1<O>> {
+    /** Callback on option array selected */
     onChange?(newValue?: O[]): void;
-    /**
-     * Input ref to restore focus
-     */
+    /** Input ref to restore focus */
     inputRef?: React__default.RefObject<HTMLInputElement>;
-    /**
-     * Input label, used to generate the chip group aria description
-     */
-    inputLabel?: string;
-    /**
-     * Customize how chips should render
-     */
+    /** Customize how chips should render (return a <Chip> element to override chip props) */
     renderChip?: (option: O) => React__default.ReactNode;
-    /**
-     * Scope for tracking purposes
-     */
-    scope?: string;
-    /**
-     * LumX theme
-     */
-    theme?: Theme$1;
-    /**
-     * Disabled state
-     */
-    isDisabled?: boolean;
-    /** label to be used for accessibility purposes */
-    label: string;
-    /** callback for generating the tooltip for each individual chip */
-    chipTooltipLabel: (chip: string) => string;
 }
 /**
  * SelectionChipGroup component.
  *
  * @param  props Component props.
- * @param  ref   Component ref.
  * @return React element.
  */
-declare const SelectionChipGroup: <O>({ onChange, value, getOptionId, getOptionName, inputRef, inputLabel, renderChip, theme, isDisabled, chipTooltipLabel, label, ...forwardedProps }: SelectionChipGroupProps<O>) => react_jsx_runtime.JSX.Element;
+declare const SelectionChipGroup: {
+    <O>({ onChange, value, getOptionId, getOptionName, inputRef, renderChip, getChipProps: getChipPropsProp, theme, isDisabled, label, chipRemoveLabel, ...forwardedProps }: SelectionChipGroupProps<O>): react_jsx_runtime.JSX.Element | null;
+    displayName: string;
+    className: "lumx-selection-chip-group";
+};
 
 type Listener = (evt: KeyboardEvent) => void;
 interface UseKeyboardListNavigationType {
@@ -1781,6 +1770,8 @@ interface InputLabelProps$1 extends HasClassName, HasTheme {
     children: JSXElement;
     /** Native htmlFor property. */
     htmlFor: string;
+    /** Native id property. */
+    id?: string;
     /** Whether the component is required or not. */
     isRequired?: boolean;
     /** ref to the root element */
@@ -1813,6 +1804,8 @@ interface TextFieldProps$1 extends HasClassName, HasTheme, HasAriaDisabled, HasD
     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. */
@@ -1842,7 +1835,7 @@ interface TextFieldProps$1 extends HasClassName, HasTheme, HasAriaDisabled, HasD
     /** Ref to the component root. */
     ref?: CommonRef;
 }
-type TextFieldPropsToOverride = 'input' | 'IconButton' | 'labelProps' | 'textFieldRef' | 'clearButtonProps' | 'helperId' | 'errorId' | 'isAnyDisabled' | 'isFocus';
+type TextFieldPropsToOverride = 'input' | 'IconButton' | 'labelProps' | 'textFieldRef' | 'clearButtonProps' | 'helperId' | 'errorId' | 'labelId' | 'isAnyDisabled' | 'isFocus';
 
 /**
  * Defines the props of the component.
@@ -1950,13 +1943,22 @@ interface ComboboxInputProps extends TextFieldProps {
         value: string;
     }) => void;
     /**
-     * When true (default), the combobox automatically filters options as the user types.
-     * Each `Combobox.Option` registers itself and hides when it doesn't match the input value.
+     * Controls how the combobox filters options as the user types.
      *
-     * Set to false when you handle filtering yourself (e.g. async search, consumer-side
-     * pre-filtering). Options will not be auto-filtered.
+     * - `'auto'` (default) — Options are automatically filtered client-side.
+     * - `'manual'` — Filtering is the consumer's responsibility.
+     * - `'off'` — Like `'manual'`, but the input is rendered as `readOnly`
+     *   and `openOnFocus` defaults to `true`.
      */
-    autoFilter?: boolean;
+    filter?: 'auto' | 'manual' | 'off';
+    /**
+     * When true, the combobox opens automatically when the input receives focus.
+     * When false (default, unless `filter` is `'off'`), the combobox only opens
+     * on click, typing, or keyboard navigation.
+     *
+     * @default false (true when filter is 'off')
+     */
+    openOnFocus?: boolean;
 }
 
 /**
@@ -2279,22 +2281,26 @@ interface DatePickerFieldProps extends Omit<TextFieldProps, 'value' | 'onChange'
  */
 declare const DatePickerField: Comp<DatePickerFieldProps, HTMLDivElement>;
 
-/**
- * Defines the props of the component.
- */
-interface DialogProps extends GenericProps$1, HasCloseMode$1 {
+interface BaseDialogProps {
     /** Footer content. */
-    footer?: ReactNode;
+    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?: ReactNode;
-    /** Whether the divider between the dialog content and the footer is always displayed (instead of showing it on scroll). */
+    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.
+ */
+interface DialogProps extends GenericProps$1, HasCloseMode$1, BaseDialogProps {
     /** Reference to the parent element that triggered modal opening (will get back focus on close). */
     parentElement?: RefObject<HTMLElement>;
     /** Reference to the dialog content element. */
@@ -2322,7 +2328,7 @@ interface DialogProps extends GenericProps$1, HasCloseMode$1 {
     /** Children */
     children?: React__default.ReactNode;
 }
-type DialogSizes = Extract<Size$1, 'tiny' | 'regular' | 'big' | 'huge'>;
+
 /**
  * Dialog component.
  *