@lumx/react 4.3.2-alpha.3 → 4.3.2-alpha.30

package/_internal/DpdvhbTO.js

@@ -1,6 +1,6 @@
 import React__default, { useContext, useEffect, useMemo, useRef, createContext } from 'react';
 import { jsx, Fragment } from 'react/jsx-runtime';
-import isEmpty from 'lodash/isEmpty';
+import isEmpty from 'lodash/isEmpty.js';
 import { createPortal } from 'react-dom';
 
 const DisabledStateContext = /*#__PURE__*/React__default.createContext({

package/index.d.ts

@@ -1,12 +1,11 @@
 import { Kind as Kind$1, HorizontalAlignment as HorizontalAlignment$1, Size as Size$1, ColorPalette as ColorPalette$1, Theme as Theme$1, Orientation as Orientation$1, Alignment as Alignment$1, AspectRatio as AspectRatio$1, ColorWithVariants as ColorWithVariants$1, ColorVariant as ColorVariant$1, Typography as Typography$1, Emphasis as Emphasis$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, HasTheme as HasTheme$1, ValueOf as ValueOf$1, HasAriaDisabled as HasAriaDisabled$1, HasCloseMode, HasClassName as HasClassName$1, JSXElement as JSXElement$1, CommonRef as CommonRef$1, Falsy, HeadingElement as HeadingElement$1, HasRequiredLinkHref, HasAriaLabelOrLabelledBy } from '@lumx/core/js/types';
+import { GenericProps, HasTheme as HasTheme$1, ValueOf as ValueOf$1, PropsToOverride, HasAriaDisabled as HasAriaDisabled$1, HasCloseMode, HasClassName as HasClassName$1, JSXElement as JSXElement$1, CommonRef as CommonRef$1, Falsy, HeadingElement as HeadingElement$1, HasRequiredLinkHref, HasAriaLabelOrLabelledBy } 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, AriaAttributes, RefObject, CSSProperties, ImgHTMLAttributes, SetStateAction, Key, ElementType, ComponentProps } from 'react';
+import React__default, { Ref, ReactElement, ReactNode, SyntheticEvent, MouseEventHandler, KeyboardEventHandler, RefObject, CSSProperties, ImgHTMLAttributes, AriaAttributes as AriaAttributes$1, SetStateAction, Key, ElementType, ComponentProps } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Selector } from '@lumx/core/js/types/Selector';
 
 /** LumX Component Type. */
 type Comp<P, T = HTMLElement> = {
@@ -541,6 +540,47 @@ interface HasDisabled {
     disabled?: boolean;
 }
 
+/**
+ * ARIA attributes type for components.
+ * All attributes are optional.
+ *
+ * This is a custom interface containing only the ARIA attributes
+ * actually used in the @lumx/core components, avoiding dependency on React types.
+ */
+interface AriaAttributes {
+    /** Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. */
+    'aria-expanded'?: boolean | 'true' | 'false';
+    /** Indicates the availability and type of interactive popup element that can be triggered by the element. */
+    'aria-haspopup'?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
+    /** Indicates the current "pressed" state of toggle buttons. */
+    'aria-pressed'?: boolean | 'false' | 'mixed' | 'true';
+    /** Defines a string value that labels the current element. */
+    'aria-label'?: string;
+    /** Identifies the element (or elements) that labels the current element. */
+    'aria-labelledby'?: string;
+    /** Identifies the element (or elements) that describes the object. */
+    'aria-describedby'?: string;
+    /** Indicates whether the element is exposed to an accessibility API. */
+    'aria-hidden'?: boolean | 'true' | 'false';
+    /** Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. */
+    'aria-disabled'?: boolean | 'true' | 'false';
+    /** Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. */
+    'aria-checked'?: boolean | 'false' | 'mixed' | 'true';
+    /** Indicates whether items in a table or grid are sorted in ascending or descending order. */
+    'aria-sort'?: 'none' | 'ascending' | 'descending' | 'other';
+}
+
+type FunctionSelector<TObject, TValue> = (o: TObject) => TValue;
+type FieldSelector<TObject, TValue> = keyof {
+    [TKey in keyof TObject as TObject[TKey] extends TValue ? TKey : never]: TObject[TKey];
+};
+/**
+ * Value selector on an object
+ * - either via an object key
+ * - or a selector function
+ */
+type Selector<TObject, TValue = string> = FieldSelector<TObject, TValue> | FunctionSelector<TObject, TValue>;
+
 /**
  * Defines the props of the component.
  */
@@ -553,10 +593,19 @@ interface BadgeProps$1 extends HasClassName {
     ref?: CommonRef;
 }
 
+/**
+ * Props interface for components wrapped with ReactToJSX.
+ * It omits JSX-specific props like `children`
+ *
+ * @template Props - The base props type
+ * @template OmitProps - Additional props to omit beyond the defaults (children, className, ref)
+ */
+type ReactToJSX<Props, OmitProps extends keyof Props = never> = Omit<Props, PropsToOverride | OmitProps>;
+
 /**
  * Defines the props of the component.
  */
-interface BadgeProps extends Omit<BadgeProps$1, 'children'>, GenericProps {
+interface BadgeProps extends ReactToJSX<BadgeProps$1>, GenericProps {
     /** Badge content. */
     children?: ReactNode;
 }
@@ -578,7 +627,7 @@ interface BadgeWrapperProps$1 extends HasClassName {
     ref?: CommonRef;
 }
 
-interface BadgeWrapperProps extends GenericProps, Omit<BadgeWrapperProps$1, 'children' | 'badge'> {
+interface BadgeWrapperProps extends GenericProps, ReactToJSX<BadgeWrapperProps$1, 'children' | 'badge'> {
     /** Badge element to display */
     badge: ReactElement;
     /** Content to wrap with badge */
@@ -664,7 +713,9 @@ declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
  */
 declare const DEFAULT_PROPS: Partial<ButtonProps$1>;
 
-interface ButtonProps extends GenericProps, ButtonProps$1 {
+interface ButtonProps extends GenericProps, ReactToJSX<ButtonProps$1> {
+    /** callback for clicking on the button */
+    onClick?: (event: React.MouseEvent) => void;
 }
 /**
  * Button component.
@@ -673,7 +724,7 @@ interface ButtonProps extends GenericProps, ButtonProps$1 {
  * @param  ref   Component ref.
  * @return React element.
  */
-declare const Button: Comp<ButtonProps, HTMLAnchorElement | HTMLButtonElement>;
+declare const Button: Comp<ButtonProps, HTMLButtonElement | HTMLAnchorElement>;
 
 interface IconButtonProps$1 extends BaseButtonProps {
     /**
@@ -695,7 +746,7 @@ interface IconButtonProps$1 extends BaseButtonProps {
     title?: string;
 }
 
-interface IconButtonProps extends GenericProps, Omit<IconButtonProps$1, 'title' | 'children'> {
+interface IconButtonProps extends GenericProps, ReactToJSX<IconButtonProps$1, 'title' | 'children'> {
     /**
      * Props to pass to the tooltip.
      * If undefined or if tooltipProps.label is undefined, the label prop will be used as tooltip label.
@@ -703,6 +754,8 @@ interface IconButtonProps extends GenericProps, Omit<IconButtonProps$1, 'title'
     tooltipProps?: Partial<TooltipProps>;
     /** Whether the tooltip should be hidden or not. */
     hideTooltip?: boolean;
+    /** callback for clicking on the button */
+    onClick?: (event: React.MouseEvent) => void;
 }
 /**
  * IconButton component.
@@ -725,7 +778,7 @@ interface ButtonGroupProps$1 extends HasClassName {
     ref?: CommonRef;
 }
 
-interface ButtonGroupProps extends GenericProps, ButtonGroupProps$1 {
+interface ButtonGroupProps extends GenericProps, ReactToJSX<ButtonGroupProps$1> {
 }
 /**
  * ButtonGroup component.
@@ -765,7 +818,9 @@ interface CheckboxProps$1 extends HasTheme, HasClassName, HasAriaDisabled, HasDi
 /**
  * Defines the props of the component.
  */
-interface CheckboxProps extends GenericProps, Omit<CheckboxProps$1, 'inputId'> {
+interface CheckboxProps extends GenericProps, ReactToJSX<CheckboxProps$1, 'inputId'> {
+    /** On change callback. */
+    onChange?(isChecked: boolean, value?: string, name?: string, event?: React__default.ChangeEvent): void;
 }
 /**
  * Checkbox component.
@@ -1108,7 +1163,7 @@ interface DividerProps$1 extends HasTheme, HasClassName {
 /**
  * Defines the props of the component.
  */
-interface DividerProps extends GenericProps, DividerProps$1 {
+interface DividerProps extends GenericProps, ReactToJSX<DividerProps$1> {
 }
 /**
  * Divider component.
@@ -1413,7 +1468,7 @@ interface FlagProps$1 extends HasClassName, HasTheme {
     Text: (props: TextProps$1) => any;
 }
 
-interface FlagProps extends GenericProps, Omit<FlagProps$1, 'children' | 'Text'> {
+interface FlagProps extends GenericProps, ReactToJSX<FlagProps$1, 'children' | 'Text'> {
     /** Text label of the flag. */
     label: React.ReactNode;
 }
@@ -1459,7 +1514,7 @@ interface FlexBoxProps$1 extends HasClassName {
 /**
  * Defines the props of the component.
  */
-interface FlexBoxProps extends GenericProps, FlexBoxProps$1 {
+interface FlexBoxProps extends GenericProps, ReactToJSX<FlexBoxProps$1> {
     /** Customize the root element. */
     as?: React__default.ElementType;
 }
@@ -1488,7 +1543,7 @@ declare const GenericBlockGapSize: Pick<{
     readonly medium: "medium";
     readonly big: "big";
     readonly huge: "huge";
-}, "tiny" | "regular" | "medium" | "big" | "huge">;
+}, "medium" | "tiny" | "regular" | "big" | "huge">;
 type GenericBlockGapSize = ValueOf$1<typeof GenericBlockGapSize>;
 
 interface GenericBlockProps extends FlexBoxProps {
@@ -1658,22 +1713,35 @@ interface GridItemProps extends GenericProps {
  */
 declare const GridItem: Comp<GridItemProps, HTMLDivElement>;
 
-type GridColumnGapSize = Extract<Size$1, 'tiny' | 'regular' | 'big' | 'huge'>;
+type GridColumnGapSize = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;
 /**
  * Defines the props of the component.
  */
-interface GridColumnProps extends GenericProps {
+interface GridColumnProps$1 extends HasClassName {
     /** Customize the root element. */
-    as?: React.ElementType;
+    as?: any;
     /** Children elements. */
-    children?: ReactNode;
+    children?: JSXElement;
     /** Space between columns and rows. */
     gap?: GridColumnGapSize;
     /** Ideal number of columns. */
     maxColumns?: number;
     /** Minimum width for each item, reduce the number of column if there is not enough space. */
     itemMinWidth?: number;
+    /** Custom styles. */
+    style?: any;
+    /** reference to the root element */
+    ref?: CommonRef;
+}
+
+/**
+ * Defines the props of the component.
+ */
+interface GridColumnProps extends GenericProps, ReactToJSX<GridColumnProps$1> {
+    /** Customize the root element. */
+    as?: React.ElementType;
 }
+
 /**
  * The GridColumn is a layout component that can display children in a grid
  * with custom display properties. It also comes with a responsive design,
@@ -1713,7 +1781,7 @@ interface IconProps$1 extends HasClassName, HasTheme {
     ref?: CommonRef;
 }
 
-interface IconProps extends Omit<IconProps$1, 'children'>, GenericProps {
+interface IconProps extends ReactToJSX<IconProps$1>, GenericProps {
 }
 /**
  * Icon component.
@@ -1854,11 +1922,15 @@ type ThumbnailObjectFit = ValueOf$1<typeof ThumbnailObjectFit>;
 /**
  * Defines the props of the component.
  */
-interface ThumbnailProps extends GenericProps, Omit<ThumbnailProps$1, 'loadingState' | 'isAnyDisabled' | 'focusPointStyle' | 'disabledStateProps' | 'badge'> {
+interface ThumbnailProps extends GenericProps, ReactToJSX<ThumbnailProps$1, 'loadingState' | 'isAnyDisabled' | 'focusPointStyle' | 'disabledStateProps' | 'badge'> {
     /** Apply relative vertical and horizontal shift (from -1 to 1) on the image position inside the thumbnail. */
     focusPoint?: FocusPoint;
     /** Badge. */
     badge?: ReactElement | Falsy;
+    /** On click callback. */
+    onClick?: React__default.MouseEventHandler<HTMLDivElement>;
+    /** On key press callback. */
+    onKeyPress?: React__default.KeyboardEventHandler<HTMLDivElement>;
 }
 /**
  * Thumbnail component.
@@ -2039,7 +2111,7 @@ interface InputHelperProps$1 extends HasClassName, HasTheme {
     id?: string;
 }
 
-interface InputHelperProps extends InputHelperProps$1, GenericProps {
+interface InputHelperProps extends ReactToJSX<InputHelperProps$1>, GenericProps {
 }
 /**
  * InputHelper component.
@@ -2063,7 +2135,7 @@ interface InputLabelProps$1 extends HasClassName, HasTheme {
     ref?: CommonRef;
 }
 
-interface InputLabelProps extends InputLabelProps$1, GenericProps {
+interface InputLabelProps extends ReactToJSX<InputLabelProps$1>, GenericProps {
 }
 /**
  * InputLabel component.
@@ -2077,7 +2149,7 @@ declare const InputLabel: Comp<InputLabelProps, HTMLLabelElement>;
 /**
  * Defines the props of the component.
  */
-interface LightboxProps extends GenericProps, HasTheme$1, Pick<AriaAttributes, 'aria-label' | 'aria-labelledby'> {
+interface LightboxProps extends GenericProps, HasTheme$1, Pick<AriaAttributes$1, 'aria-label' | 'aria-labelledby'> {
     /** Props to pass to the close button (minus those already set by the Lightbox props). */
     closeButtonProps?: Pick<IconButtonProps, 'label'> & Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color'>;
     /** Whether the component is open or not. */
@@ -2142,7 +2214,7 @@ type HTMLAnchorProps = React__default.DetailedHTMLProps<React__default.AnchorHTM
 /**
  * Defines the props of the component.
  */
-interface LinkProps extends GenericProps, Omit<LinkProps$1, 'label'> {
+interface LinkProps extends GenericProps, ReactToJSX<LinkProps$1, 'label'> {
     /** Link href. */
     href?: HTMLAnchorProps['href'];
     /** Custom react component for the link (can be used to inject react router Link). */
@@ -2151,8 +2223,8 @@ interface LinkProps extends GenericProps, Omit<LinkProps$1, 'label'> {
     target?: HTMLAnchorProps['target'];
     /** Typography variant. */
     typography?: Typography$1;
-    /** Children */
-    children?: React__default.ReactNode;
+    /** Click handler. */
+    onClick?: (event: React__default.MouseEvent) => void;
 }
 /**
  * Link component.
@@ -2161,7 +2233,7 @@ interface LinkProps extends GenericProps, Omit<LinkProps$1, 'label'> {
  * @param  ref   Component ref.
  * @return React element.
  */
-declare const Link: Comp<LinkProps, HTMLAnchorElement | HTMLButtonElement>;
+declare const Link: Comp<LinkProps, HTMLButtonElement | HTMLAnchorElement>;
 
 /**
  * Defines the props of the component.
@@ -2334,9 +2406,7 @@ interface MessageProps$1 extends HasClassName {
     };
 }
 
-interface MessageProps extends GenericProps, Omit<MessageProps$1, 'children' | 'ref'> {
-    /** Content. */
-    children?: React.ReactNode;
+interface MessageProps extends GenericProps, ReactToJSX<MessageProps$1> {
 }
 /**
  * Message component.
@@ -2674,7 +2744,9 @@ interface RadioButtonProps$1 extends HasTheme, HasClassName, HasAriaDisabled, Ha
 /**
  * Defines the props of the component.
  */
-interface RadioButtonProps extends GenericProps, Omit<RadioButtonProps$1, 'inputId'> {
+interface RadioButtonProps extends GenericProps, ReactToJSX<RadioButtonProps$1, 'inputId'> {
+    /** On change callback. */
+    onChange?(value?: string, name?: string, event?: React.ChangeEvent): void;
 }
 /**
  * RadioButton component.
@@ -2688,9 +2760,17 @@ declare const RadioButton: Comp<RadioButtonProps, HTMLDivElement>;
 /**
  * Defines the props of the component.
  */
-interface RadioGroupProps extends GenericProps {
+interface RadioGroupProps$1 extends HasClassName {
     /** RadioButton elements */
-    children: ReactNode;
+    children?: JSXElement;
+    /** reference to the root element */
+    ref?: CommonRef;
+}
+
+/**
+ * Defines the props of the component.
+ */
+interface RadioGroupProps extends GenericProps, ReactToJSX<RadioGroupProps$1> {
 }
 /**
  * RadioGroup component.
@@ -2896,7 +2976,7 @@ interface SkeletonTypographyProps$1 extends HasTheme, HasClassName {
 /**
  * Defines the props of the component.
  */
-interface SkeletonCircleProps extends GenericProps, SkeletonCircleProps$1 {
+interface SkeletonCircleProps extends GenericProps, ReactToJSX<SkeletonCircleProps$1> {
 }
 /**
  * SkeletonCircle component.
@@ -2910,7 +2990,7 @@ declare const SkeletonCircle: Comp<SkeletonCircleProps, HTMLDivElement>;
 /**
  * Defines the props of the component.
  */
-interface SkeletonRectangleProps extends GenericProps, SkeletonRectangleProps$1 {
+interface SkeletonRectangleProps extends GenericProps, ReactToJSX<SkeletonRectangleProps$1> {
 }
 /**
  * SkeletonRectangle component.
@@ -2924,7 +3004,7 @@ declare const SkeletonRectangle: Comp<SkeletonRectangleProps, HTMLDivElement>;
 /**
  * Defines the props of the component.
  */
-interface SkeletonTypographyProps extends GenericProps, SkeletonTypographyProps$1 {
+interface SkeletonTypographyProps extends GenericProps, ReactToJSX<SkeletonTypographyProps$1> {
 }
 /**
  * SkeletonTypography component.
@@ -3219,9 +3299,9 @@ interface SwitchProps$1 extends HasTheme, HasClassName, HasAriaDisabled, HasDisa
 /**
  * Defines the props of the component.
  */
-interface SwitchProps extends GenericProps, Omit<SwitchProps$1, 'inputId' | 'label'> {
-    /** Children (label content). */
-    children?: React__default.ReactNode;
+interface SwitchProps extends GenericProps, ReactToJSX<SwitchProps$1, 'inputId' | 'label'> {
+    /** On change callback. */
+    onChange?(isChecked: boolean, value?: string, name?: string, event?: React__default.ChangeEvent): void;
 }
 /**
  * Switch component.
@@ -3503,7 +3583,7 @@ interface TabPanelProps extends GenericProps {
  */
 declare const TabPanel: Comp<TabPanelProps, HTMLDivElement>;
 
-interface TextProps extends TextProps$1, GenericProps {
+interface TextProps extends ReactToJSX<TextProps$1>, GenericProps {
 }
 /**
  * Text component.
@@ -3616,7 +3696,21 @@ declare const useFocusPointStyle: ({ image, aspectRatio, focusPoint, imgProps: {
 /**
  * Defines the props of the component.
  */
-interface ToolbarProps extends GenericProps {
+interface ToolbarProps$1 extends HasClassName {
+    /** After content (placed after the label). */
+    after?: JSXElement;
+    /** Before content (placed before the label). */
+    before?: JSXElement;
+    /** Label content. */
+    label?: JSXElement;
+    /** Component ref. */
+    ref?: CommonRef;
+}
+
+/**
+ * Defines the props of the component.
+ */
+interface ToolbarProps extends GenericProps, ReactToJSX<ToolbarProps$1> {
     /** After content (placed after the label). */
     after?: ReactNode;
     /** Before content (placed before the label). */