@lumx/react 4.7.1-alpha.4 → 4.8.0-alpha.0

package/README.md

@@ -22,10 +22,6 @@ npm install @lumx/react
 
 You can find an online version of the demo and documentation site at https://design.lumapps.com.
 
-## How to get help, contribute, or provide feedback
-
-Please refer to our [contributing guidelines](CONTRIBUTING.md).
-
 ## Copyright and license
 
 Code and documentation copyright 2019 LumApps. Code released under the [MIT license](LICENSE.md).

package/index.d.ts

@@ -1,10 +1,10 @@
-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, ColorWithVariants as ColorWithVariants$1, ColorVariant as ColorVariant$1, Typography as Typography$1, HasRequiredLinkHref as HasRequiredLinkHref$1, Emphasis as Emphasis$1 } from '@lumx/core/js/constants';
+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, 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 as GenericProps$1, HasTheme as HasTheme$1, ValueOf as ValueOf$1, PropsToOverride, HasCloseMode as HasCloseMode$1, HasClassName as HasClassName$1, JSXElement as JSXElement$1, CommonRef as CommonRef$1, Falsy, HeadingElement as HeadingElement$1, HasAriaDisabled as HasAriaDisabled$1, HasRequiredLinkHref as HasRequiredLinkHref$2, HasAriaLabelOrLabelledBy as HasAriaLabelOrLabelledBy$1 } from '@lumx/core/js/types';
+import { GenericProps as GenericProps$1, HasTheme as HasTheme$1, ValueOf as ValueOf$1, PropsToOverride, HasCloseMode as HasCloseMode$1, HasClassName as HasClassName$1, JSXElement as JSXElement$1, CommonRef as CommonRef$1, Falsy, HeadingElement as HeadingElement$1, HasAriaDisabled as HasAriaDisabled$1, HasRequiredLinkHref as HasRequiredLinkHref$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, CSSProperties, ImgHTMLAttributes, AriaAttributes as AriaAttributes$1, SetStateAction, Key, ComponentProps, ElementType as ElementType$1, HTMLInputTypeAttribute } from 'react';
+import React__default, { Ref, ReactElement, ReactNode, SyntheticEvent, MouseEventHandler, KeyboardEventHandler, RefObject, CSSProperties, ImgHTMLAttributes, AriaAttributes as AriaAttributes$1, SetStateAction, Key, ElementType as ElementType$1, HTMLInputTypeAttribute, ComponentProps } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 /** LumX Component Type. */
@@ -2416,19 +2416,29 @@ interface UseKeyboardListNavigationType {
 }
 type useKeyboardListNavigationType = <I>(items: I[], ref: RefObject<HTMLElement>, onListItemSelected: (itemSelected: I) => void, onListItemNavigated?: (itemSelected: I) => void, onEnterPressed?: (itemSelected: string) => void, onBackspacePressed?: Listener, keepFocusAfterSelection?: boolean, initialIndex?: number, preventTabOnEnteredValue?: boolean) => UseKeyboardListNavigationType;
 
+/** List item padding size. */
+type ListItemPadding = Extract<Size, 'big' | 'huge'>;
 /**
  * Defines the props of the component.
  */
-interface ListProps extends GenericProps$1 {
-    /** List content (should be ListItem, ListSubheader or ListDivider). */
-    children: ReactNode;
+interface ListProps$1 extends HasClassName {
+    /** List content (should be ListItem, ListDivider, etc.). */
+    children?: JSXElement;
+    /** Item padding size. */
+    itemPadding?: ListItemPadding;
+    /** ref to the root element */
+    ref?: CommonRef;
+}
+
+/**
+ * Defines the props of the component.
+ */
+interface ListProps extends GenericProps$1, ReactToJSX<ListProps$1> {
     /**
      * Whether the list items are clickable.
      * @deprecated not needed anymore.
      */
     isClickable?: boolean;
-    /** Item padding size. */
-    itemPadding?: Extract<Size$1, 'big' | 'huge'>;
     /** Tab index of the list. */
     tabIndex?: number;
     /** @deprecated not supported since v4.0.0 */
@@ -2443,43 +2453,58 @@ declare const List: Comp<ListProps, HTMLUListElement> & {
  */
 type ListItemActionProps<E extends ClickableElement = 'button'> = RawClickableProps<E> & HasClassName;
 
-type ListItemSize = Extract<Size$1, 'tiny' | 'regular' | 'big' | 'huge'>;
+/** ListItem size variants. */
+type ListItemSize = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;
 /**
  * Defines the props of the component.
  */
-interface ListItemProps extends GenericProps$1, HasAriaDisabled$1 {
+interface ListItemProps$1 extends HasClassName, HasAriaDisabled {
     /** A component to be rendered after the content. */
-    after?: ReactNode;
+    after?: JSXElement;
     /** A component to be rendered before the content. */
-    before?: ReactNode;
+    before?: JSXElement;
     /** Content. */
-    children: string | ReactNode;
+    children?: JSXElement;
     /** Whether the list item should be highlighted or not. */
     isHighlighted?: boolean;
     /** Whether the component is selected or not. */
     isSelected?: boolean;
     /** Whether link/button is disabled or not. */
     isDisabled?: boolean;
-    /** Reference to the <li> element. */
-    listItemRef?: Ref<HTMLLIElement>;
-    /** Custom react component for the link (can be used to inject react router Link). */
+    /** Custom component for the link (can be used to inject router Link). */
     linkAs?: 'a' | any;
-    /** Props that will be passed on to the Link */
-    linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
+    /** Props that will be passed on to the Link. */
+    linkProps?: GenericProps;
     /** Reference to the link element. */
-    linkRef?: Ref<HTMLAnchorElement>;
+    linkRef?: CommonRef;
     /** Size variant. */
     size?: ListItemSize;
+    /** ref to the root <li> element */
+    ref?: CommonRef;
+    /** On click callback. */
+    handleClick?: (event: any) => void;
+}
+type ListItemPropsToOverride = 'after' | 'before' | 'children' | 'handleClick';
+
+/**
+ * Defines the props of the component.
+ */
+interface ListItemProps extends GenericProps$1, HasAriaDisabled$1, ReactToJSX<ListItemProps$1, ListItemPropsToOverride> {
+    /** A component to be rendered after the content. */
+    after?: ReactNode;
+    /** A component to be rendered before the content. */
+    before?: ReactNode;
+    /** Content. */
+    children: string | ReactNode;
+    /** Reference to the <li> element. */
+    listItemRef?: Ref<HTMLLIElement>;
+    /** Reference to the link element. */
+    linkRef?: Ref<HTMLAnchorElement>;
     /** On click callback. */
     onClick?(event: SyntheticEvent): void;
     /** @alias onClick */
     onItemSelected?(evt: SyntheticEvent): void;
 }
-/**
- * Check if the list item is clickable.
- * @return `true` if the list item is clickable; `false` otherwise.
- */
-declare function isClickable({ linkAs, linkProps, onItemSelected }: Partial<ListItemProps>): boolean;
 /**
  * ListItem component with Action sub-component.
  */
@@ -2487,7 +2512,7 @@ declare const ListItem: Comp<ListItemProps, HTMLLIElement> & {
     /** Sub-component that renders the default action (button or link) for the action area pattern. */
     Action: (<E extends React$1.ElementType = "button">(props: React$1.PropsWithoutRef<React$1.ComponentProps<E>> & {
         as?: E | undefined;
-    } & GenericProps$1 & ReactToJSX<ListItemActionProps, "children"> & HasRequiredLinkHref$1<E> & {
+    } & GenericProps$1 & ReactToJSX<ListItemActionProps, "children"> & _lumx_core_js_types.HasRequiredLinkHref<E> & {
         children: ReactNode;
         onClick?(evt: SyntheticEvent): void;
     } & React$1.ComponentProps<E> & {
@@ -2502,7 +2527,15 @@ declare const ListItem: Comp<ListItemProps, HTMLLIElement> & {
 /**
  * Defines the props of the component.
  */
-type ListDividerProps = GenericProps$1;
+interface ListDividerProps$1 extends HasClassName {
+    /** ref to the root element */
+    ref?: CommonRef;
+}
+
+/**
+ * Defines the props of the component.
+ */
+type ListDividerProps = GenericProps$1 & ReactToJSX<ListDividerProps$1>;
 /**
  * ListDivider component.
  * Purely decorative, consider a `ListSection` with label for a better list structure.
@@ -2511,7 +2544,7 @@ type ListDividerProps = GenericProps$1;
  * @param  ref   Component ref.
  * @return React element.
  */
-declare const ListDivider: Comp<GenericProps$1, HTMLLIElement>;
+declare const ListDivider: Comp<ListDividerProps, HTMLLIElement>;
 
 /**
  * Defines the props of the component.
@@ -2524,7 +2557,7 @@ interface ListSectionProps$1 extends HasClassName {
     /** List items (should be ListItem, ListDivider, etc.). */
     children: JSXElement;
     /** Items wrapper forwarded props */
-    itemsWrapperProps?: ComponentProps<'ul'>;
+    itemsWrapperProps?: Record<string, any>;
     /** ID for the label element (used for aria-labelledby). */
     id: string;
     /** ref to the root element */
@@ -2642,7 +2675,7 @@ type BaseNavigationItemProps = {
 };
 declare const NavigationItem: (<E extends ElementType$1 = "a">(props: React$1.PropsWithoutRef<React$1.ComponentProps<E>> & {
     as?: E | undefined;
-} & HasTheme$1 & HasClassName$1 & BaseNavigationItemProps & HasRequiredLinkHref$2<E> & React$1.ComponentProps<E> & {
+} & HasTheme$1 & HasClassName$1 & BaseNavigationItemProps & HasRequiredLinkHref$1<E> & React$1.ComponentProps<E> & {
     ref?: ComponentRef<E> | undefined;
 }) => React.JSX.Element) & {
     displayName: string;
@@ -3862,7 +3895,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' | 'isFocus';
+type TextFieldPropsToOverride = 'input' | 'IconButton' | 'labelProps' | 'textFieldRef' | 'clearButtonProps' | 'helperId' | 'errorId' | 'isAnyDisabled' | 'isFocus';
 
 /**
  * Defines the props of the component.
@@ -4032,27 +4065,23 @@ declare const UploaderVariant: {
     readonly rounded: "rounded";
     readonly circle: "circle";
 };
-type UploaderVariant = ValueOf$1<typeof UploaderVariant>;
+type UploaderVariant = ValueOf<typeof UploaderVariant>;
 /**
  * Uploader sizes.
  */
-type UploaderSize = Extract<Size$1, 'xl' | 'xxl'>;
+type UploaderSize = Extract<Size, 'xl' | 'xxl'>;
 /**
- * Extend native HTML input props with specialized `onChange` providing the a `File` array.
+ * Native input file props (framework-agnostic subset).
  */
-interface FileInputProps extends Omit<React__default.ComponentProps<'input'>, 'onChange'> {
-    onChange(files: File[], evt: React__default.ChangeEvent<HTMLInputElement>): void;
-}
+type FileInputProps = Record<string, any>;
 /**
  * Defines the props of the component.
  */
-interface UploaderProps extends GenericProps$1, HasTheme$1, HasAriaDisabled$1 {
+interface UploaderProps$1 extends HasClassName, HasDisabled, HasTheme, HasAriaDisabled {
     /** Image aspect ratio. */
-    aspectRatio?: AspectRatio$1;
+    aspectRatio?: AspectRatio;
     /** Icon (SVG path). */
     icon?: string;
-    /** Disabled state */
-    isDisabled?: boolean;
     /** Label text. */
     label?: string;
     /** Size variant. */
@@ -4060,9 +4089,35 @@ interface UploaderProps extends GenericProps$1, HasTheme$1, HasAriaDisabled$1 {
     /** Variant. */
     variant?: UploaderVariant;
     /** On click callback. */
-    onClick?: MouseEventHandler;
+    handleClick?: (event: any) => void;
     /** Handle file selection with a native input file. */
     fileInputProps?: FileInputProps;
+    /** Forwarded ref to the root element. */
+    ref?: CommonRef;
+    /** Whether the component is disabled (computed from `isDisabled` and `aria-disabled`). */
+    isAnyDisabled?: boolean;
+    /** Id of the hidden file input (used to link the label `for` attribute). */
+    inputId: string;
+    /** Whether a file is currently being dragged over the input. */
+    isDragHovering?: boolean;
+    /** Callback fired when the file input value changes. */
+    handleChange?: (event: any) => void;
+    /** Root element tag or component (e.g. `'button'` or `'label'`). */
+    Component: 'button' | 'label';
+}
+type UploaderPropsToOverride = 'isAnyDisabled' | 'inputId' | 'isDragHovering' | 'fileInputProps' | 'Component';
+
+interface ReactFileInputProps extends Omit<React__default.ComponentProps<'input'>, 'onChange'> {
+    onChange?(files: File[], evt: React__default.ChangeEvent<HTMLInputElement>): void;
+}
+/**
+ * Defines the props of the component.
+ */
+interface UploaderProps extends GenericProps$1, ReactToJSX<UploaderProps$1, UploaderPropsToOverride> {
+    /** On click callback. */
+    onClick?: MouseEventHandler;
+    /** Handle file selection with a native input file. */
+    fileInputProps?: ReactFileInputProps;
 }
 /**
  * Uploader component.
@@ -4130,5 +4185,5 @@ declare const ThemeProvider: React__default.FC<{
 /** Get the theme in the current context. */
 declare function useTheme(): ThemeContextValue;
 
-export { AlertDialog, Autocomplete, AutocompleteMultiple, Avatar, Badge, BadgeWrapper, Button, ButtonEmphasis, ButtonGroup, CLASSNAME, COMPONENT_NAME, Checkbox, Chip, ChipGroup, CommentBlock, CommentBlockVariant, DEFAULT_PROPS, DatePicker, DatePickerControlled, DatePickerField, Dialog, Divider, DragHandle, Dropdown, ExpansionPanel, Flag, FlexBox, GenericBlock, GenericBlockGapSize, Grid, GridColumn, GridItem, Heading, HeadingLevelProvider, Icon, IconButton, ImageBlock, ImageBlockCaptionPosition, ImageLightbox, InlineList, InputHelper, InputLabel, Lightbox, Link, LinkPreview, List, ListDivider, ListItem, ListSection, ListSubheader, Message, Mosaic, Navigation, Notification, Placement, Popover, PopoverDialog, PostBlock, Progress, ProgressCircular, ProgressLinear, ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressVariant, RadioButton, RadioGroup, RawInputText, RawInputTextarea, Select, SelectMultiple, SelectMultipleField, SelectVariant, SelectionChipGroup, SideNavigation, SideNavigationItem, SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography, Slider, Slides, Slideshow, SlideshowControls, SlideshowItem, Switch, Tab, TabList, TabListLayout, TabPanel, TabProvider, Table, TableBody, TableCell, TableCellVariant, TableCellVariant as TableCellVariantType, TableHeader, TableRow, Text, TextField, ThOrder, ThOrder as ThOrderType, ThemeProvider, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant, Toolbar, Tooltip, Uploader, UploaderVariant, UserBlock, clamp, isClickable, useFocusPointStyle, useHeadingLevel, useTheme };
+export { AlertDialog, Autocomplete, AutocompleteMultiple, Avatar, Badge, BadgeWrapper, Button, ButtonEmphasis, ButtonGroup, CLASSNAME, COMPONENT_NAME, Checkbox, Chip, ChipGroup, CommentBlock, CommentBlockVariant, DEFAULT_PROPS, DatePicker, DatePickerControlled, DatePickerField, Dialog, Divider, DragHandle, Dropdown, ExpansionPanel, Flag, FlexBox, GenericBlock, GenericBlockGapSize, Grid, GridColumn, GridItem, Heading, HeadingLevelProvider, Icon, IconButton, ImageBlock, ImageBlockCaptionPosition, ImageLightbox, InlineList, InputHelper, InputLabel, Lightbox, Link, LinkPreview, List, ListDivider, ListItem, ListSection, ListSubheader, Message, Mosaic, Navigation, Notification, Placement, Popover, PopoverDialog, PostBlock, Progress, ProgressCircular, ProgressLinear, ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressVariant, RadioButton, RadioGroup, RawInputText, RawInputTextarea, Select, SelectMultiple, SelectMultipleField, SelectVariant, SelectionChipGroup, SideNavigation, SideNavigationItem, SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography, Slider, Slides, Slideshow, SlideshowControls, SlideshowItem, Switch, Tab, TabList, TabListLayout, TabPanel, TabProvider, Table, TableBody, TableCell, TableCellVariant, TableCellVariant as TableCellVariantType, TableHeader, TableRow, Text, TextField, ThOrder, ThOrder as ThOrderType, ThemeProvider, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant, Toolbar, Tooltip, Uploader, UploaderVariant, UserBlock, clamp, useFocusPointStyle, useHeadingLevel, useTheme };
 export type { AlertDialogProps, AutocompleteMultipleProps, AutocompleteProps, AvatarProps, AvatarSize, BadgeProps, BadgeWrapperProps, BaseButtonProps, ButtonGroupProps, ButtonProps, ButtonSize, CheckboxProps, ChipGroupProps, ChipProps, CommentBlockProps, DatePickerControlledProps, DatePickerFieldProps, DatePickerProps, DialogProps, DialogSizes, DividerProps, DragHandleProps, DropdownProps, Elevation, ExpansionPanelProps, FlagProps, FlexBoxProps, FlexHorizontalAlignment, FlexVerticalAlignment, FocusPoint, GapSize, GenericBlockProps, GridColumnGapSize, GridColumnProps, GridItemProps, GridProps, HeadingLevelProviderProps, HeadingProps, IconButtonProps, IconProps, IconSizes, ImageBlockProps, ImageBlockSize, ImageLightboxProps, InlineListProps, InputHelperProps, InputLabelProps, LightboxProps, LinkPreviewProps, LinkProps, ListDividerProps, ListItemProps, ListItemSize, ListProps, ListSectionProps, ListSubheaderProps, MarginAutoAlignment, MessageProps, MosaicProps, NavigationProps, NotificationProps, Offset, PopoverDialogProps, PopoverProps, PostBlockProps, ProgressCircularProps, ProgressCircularSize, ProgressLinearProps, ProgressProps, ProgressTrackerProps, ProgressTrackerProviderProps, ProgressTrackerStepPanelProps, ProgressTrackerStepProps, RadioButtonProps, RadioGroupProps, RawInputTextProps, RawInputTextareaProps, SelectMultipleProps, SelectProps, SelectionChipGroupProps, SideNavigationItemProps, SideNavigationProps, SkeletonCircleProps, SkeletonRectangleProps, SkeletonTypographyProps, SliderProps, SlidesProps, SlideshowControlsProps, SlideshowItemProps, SlideshowProps, SwitchProps, TabListProps, TabPanelProps, TabProps, TabProviderProps, TableBodyProps, TableCellProps, TableHeaderProps, TableProps, TableRowProps, TextFieldProps, TextProps, ThumbnailProps, ThumbnailSize, ToolbarProps, TooltipPlacement, TooltipProps, UploaderProps, UploaderSize, UserBlockProps, UserBlockSize };