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

package/CONTRIBUTING.md

@@ -41,18 +41,6 @@ Before opening a Pull Request, please see the Submission Guidelines below.
 You can request a new feature by submitting an issue to our [GitHub Repository](https://github.com/lumapps/design-system/issues).
 If you would like to implement a new feature then consider what kind of change it is, discuss it with us before hand in your issue, so that we can better coordinate our efforts, prevent duplication of work, and help you to craft the change so that it is successfully accepted into the project.
 
-## <a name="create-a-new-react-component-"></a> Want to create a new React Component?
-
-The first step to create a new React component is to run:
-
-```
-yarn scaffold
-```
-
-This script will generate a TSX file for the component code, a TSX file for the component tests and an MDX file to demo this component.
-
-To export your component into the `@lumx/react` NPM package, you also have to make sure to update the `src/index.tsx` file.
-
 ## <a name="submission-guidelines"></a> Submission guidelines
 
 ### Submitting an issue

package/index.d.ts

@@ -1,7 +1,7 @@
 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, Falsy, HasClassName as HasClassName$1, HeadingElement as HeadingElement$1, HasRequiredLinkHref, HasAriaLabelOrLabelledBy } 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';
 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';
@@ -294,32 +294,6 @@ interface AvatarProps extends GenericProps, HasTheme$1 {
  */
 declare const Avatar: Comp<AvatarProps, HTMLDivElement>;
 
-/**
- * Defines the props of the component.
- */
-interface BadgeProps extends GenericProps {
-    /** Badge content. */
-    children?: ReactNode;
-    /** Color variant. */
-    color?: ColorPalette$1;
-}
-/**
- * Badge component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-declare const Badge: Comp<BadgeProps, HTMLDivElement>;
-
-interface BadgeWrapperProps extends GenericProps {
-    /** Badge. */
-    badge: ReactElement;
-    /** Node to display the badge on */
-    children: ReactNode;
-}
-declare const BadgeWrapper: Comp<BadgeWrapperProps, HTMLDivElement>;
-
 /**
  * Alignments.
  */
@@ -567,6 +541,51 @@ interface HasDisabled {
     disabled?: boolean;
 }
 
+/**
+ * Defines the props of the component.
+ */
+interface BadgeProps$1 extends HasClassName {
+    /** Badge content. */
+    children?: JSXElement;
+    /** Color variant. */
+    color?: ColorPalette;
+    /** reference to the root element */
+    ref?: CommonRef;
+}
+
+/**
+ * Defines the props of the component.
+ */
+interface BadgeProps extends Omit<BadgeProps$1, 'children'>, GenericProps {
+    /** Badge content. */
+    children?: ReactNode;
+}
+/**
+ * Badge component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const Badge: Comp<BadgeProps, HTMLDivElement>;
+
+interface BadgeWrapperProps$1 extends HasClassName {
+    /** Badge element to display */
+    badge?: JSXElement;
+    /** Content to wrap with badge */
+    children?: JSXElement;
+    /** Ref forwarding */
+    ref?: CommonRef;
+}
+
+interface BadgeWrapperProps extends GenericProps, Omit<BadgeWrapperProps$1, 'children' | 'badge'> {
+    /** Badge element to display */
+    badge: ReactElement;
+    /** Content to wrap with badge */
+    children: ReactNode;
+}
+declare const BadgeWrapper: Comp<BadgeWrapperProps, HTMLDivElement>;
+
 interface BaseClickableProps extends HasDisabled, HasAriaDisabled {
     children?: JSXElement;
     onClick?: (event?: any) => void;
@@ -654,7 +673,7 @@ interface ButtonProps extends GenericProps, ButtonProps$1 {
  * @param  ref   Component ref.
  * @return React element.
  */
-declare const Button: Comp<ButtonProps, HTMLButtonElement | HTMLAnchorElement>;
+declare const Button: Comp<ButtonProps, HTMLAnchorElement | HTMLButtonElement>;
 
 interface IconButtonProps$1 extends BaseButtonProps {
     /**
@@ -1469,7 +1488,7 @@ declare const GenericBlockGapSize: Pick<{
     readonly medium: "medium";
     readonly big: "big";
     readonly huge: "huge";
-}, "medium" | "tiny" | "regular" | "big" | "huge">;
+}, "tiny" | "regular" | "medium" | "big" | "huge">;
 type GenericBlockGapSize = ValueOf$1<typeof GenericBlockGapSize>;
 
 interface GenericBlockProps extends FlexBoxProps {
@@ -1705,54 +1724,42 @@ interface IconProps extends Omit<IconProps$1, 'children'>, GenericProps {
  */
 declare const Icon: Comp<IconProps, HTMLElement>;
 
-/**
- *  Focal point using vertical alignment, horizontal alignment or coordinates (from -1 to 1).
- */
-type FocusPoint = {
-    x?: number;
-    y?: number;
-};
 /**
  * Loading attribute is not yet supported in typescript, so we need
  * to add it in order to avoid a ts error.
  * https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/blob/master/ADVANCED.md#adding-non-standard-attributes
  */
 declare module 'react' {
-    interface ImgHTMLAttributes<T> extends React__default.HTMLAttributes<T> {
+    interface ImgHTMLAttributes<T> extends React.HTMLAttributes<T> {
         loading?: 'eager' | 'lazy';
     }
 }
-/**
- * All available aspect ratios.
- * @deprecated
- */
-declare const ThumbnailAspectRatio: Record<string, AspectRatio$1>;
 /**
  *  Thumbnail sizes.
  */
-type ThumbnailSize = Extract<Size$1, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
+type ThumbnailSize$1 = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
 /**
  * Thumbnail variants.
  */
-declare const ThumbnailVariant: {
+declare const ThumbnailVariant$1: {
     readonly squared: "squared";
     readonly rounded: "rounded";
 };
-type ThumbnailVariant = ValueOf$1<typeof ThumbnailVariant>;
+type ThumbnailVariant$1 = ValueOf<typeof ThumbnailVariant$1>;
 /**
  * Thumbnail object fit.
  */
-declare const ThumbnailObjectFit: {
+declare const ThumbnailObjectFit$1: {
     readonly cover: "cover";
     readonly contain: "contain";
 };
-type ThumbnailObjectFit = ValueOf$1<typeof ThumbnailObjectFit>;
+type ThumbnailObjectFit$1 = ValueOf<typeof ThumbnailObjectFit$1>;
 
 type ImgHTMLProps = ImgHTMLAttributes<HTMLImageElement>;
 /**
  * Defines the props of the component.
  */
-interface ThumbnailProps extends GenericProps, HasTheme$1 {
+interface ThumbnailProps$1 extends HasTheme$1, HasClassName$1 {
     /** Alignment of the thumbnail in it's parent (requires flex parent). */
     align?: HorizontalAlignment$1;
     /** Image alternative text. */
@@ -1760,41 +1767,98 @@ interface ThumbnailProps extends GenericProps, HasTheme$1 {
     /** Image aspect ratio. */
     aspectRatio?: AspectRatio$1;
     /** Badge. */
-    badge?: ReactElement | Falsy;
+    badge?: JSXElement$1;
     /** Image cross origin resource policy. */
     crossOrigin?: ImgHTMLProps['crossOrigin'];
     /** Fallback icon (SVG path) or react node when image fails to load. */
-    fallback?: string | ReactNode;
+    fallback?: string | JSXElement$1;
     /** Whether the thumbnail should fill it's parent size (requires flex parent) or not. */
     fillHeight?: boolean;
-    /** Apply relative vertical and horizontal shift (from -1 to 1) on the image position inside the thumbnail. */
-    focusPoint?: FocusPoint;
     /** Image URL. */
     image: string;
+    loadingState: string;
     /** Props to inject into the native <img> element. */
     imgProps?: ImgHTMLProps;
     /** Reference to the native <img> element. */
-    imgRef?: Ref<HTMLImageElement>;
+    imgRef?: CommonRef$1;
+    ref?: CommonRef$1;
     /** Set to true to force the display of the loading skeleton. */
     isLoading?: boolean;
     /** Set how the image should fit when its aspect ratio is constrained */
-    objectFit?: ThumbnailObjectFit;
+    objectFit?: ThumbnailObjectFit$1;
     /** Size variant of the component. */
-    size?: ThumbnailSize;
+    size?: ThumbnailSize$1;
     /** Image loading mode. */
-    loading?: ImgHTMLProps['loading'];
+    loading?: 'eager' | 'lazy';
     /** Ref of an existing placeholder image to display while loading. */
-    loadingPlaceholderImageRef?: React__default.RefObject<HTMLImageElement>;
+    loadingPlaceholderImageRef?: React.RefObject<HTMLImageElement>;
     /** On click callback. */
-    onClick?: MouseEventHandler<HTMLDivElement>;
+    onClick?: (event: any) => void;
     /** On key press callback. */
-    onKeyPress?: KeyboardEventHandler<HTMLDivElement>;
+    onKeyPress?: (event: any) => void;
     /** Variant of the component. */
-    variant?: ThumbnailVariant;
+    variant?: ThumbnailVariant$1;
     /** Props to pass to the link wrapping the thumbnail. */
-    linkProps?: React__default.DetailedHTMLProps<React__default.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
+    linkProps?: GenericProps;
+    focusPointStyle?: GenericProps;
+    disabledStateProps?: GenericProps;
+    isAnyDisabled?: boolean;
     /** Custom react component for the link (can be used to inject react router Link). */
     linkAs?: 'a' | any;
+    'aria-label'?: string;
+}
+
+/**
+ *  Focal point using vertical alignment, horizontal alignment or coordinates (from -1 to 1).
+ */
+type FocusPoint = {
+    x?: number;
+    y?: number;
+};
+/**
+ * Loading attribute is not yet supported in typescript, so we need
+ * to add it in order to avoid a ts error.
+ * https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/blob/master/ADVANCED.md#adding-non-standard-attributes
+ */
+declare module 'react' {
+    interface ImgHTMLAttributes<T> extends React__default.HTMLAttributes<T> {
+        loading?: 'eager' | 'lazy';
+    }
+}
+/**
+ * All available aspect ratios.
+ * @deprecated
+ */
+declare const ThumbnailAspectRatio: Record<string, AspectRatio$1>;
+/**
+ *  Thumbnail sizes.
+ */
+type ThumbnailSize = Extract<Size$1, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
+/**
+ * Thumbnail variants.
+ */
+declare const ThumbnailVariant: {
+    readonly squared: "squared";
+    readonly rounded: "rounded";
+};
+type ThumbnailVariant = ValueOf$1<typeof ThumbnailVariant>;
+/**
+ * Thumbnail object fit.
+ */
+declare const ThumbnailObjectFit: {
+    readonly cover: "cover";
+    readonly contain: "contain";
+};
+type ThumbnailObjectFit = ValueOf$1<typeof ThumbnailObjectFit>;
+
+/**
+ * Defines the props of the component.
+ */
+interface ThumbnailProps extends GenericProps, Omit<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;
 }
 /**
  * Thumbnail component.
@@ -2097,7 +2161,7 @@ interface LinkProps extends GenericProps, Omit<LinkProps$1, 'label'> {
  * @param  ref   Component ref.
  * @return React element.
  */
-declare const Link: Comp<LinkProps, HTMLButtonElement | HTMLAnchorElement>;
+declare const Link: Comp<LinkProps, HTMLAnchorElement | HTMLButtonElement>;
 
 /**
  * Defines the props of the component.
@@ -3171,11 +3235,21 @@ declare const Switch: Comp<SwitchProps, HTMLDivElement>;
 /**
  * Defines the props of the component.
  */
-interface TableProps extends GenericProps, HasTheme$1 {
+interface TableProps$1 extends HasTheme, HasClassName {
     /** Whether the table has checkbox or thumbnail on first cell or not. */
     hasBefore?: boolean;
     /** Whether the table has dividers or not. */
     hasDividers?: boolean;
+    /** Children */
+    children?: JSXElement;
+    /** reference to the root element */
+    ref?: CommonRef;
+}
+
+/**
+ * Defines the props of the component.
+ */
+interface TableProps extends GenericProps, Omit<TableProps$1, 'ref'> {
     /** Children */
     children?: React.ReactNode;
 }
@@ -3191,7 +3265,17 @@ declare const Table: Comp<TableProps, HTMLTableElement>;
 /**
  * Defines the props of the component.
  */
-interface TableBodyProps extends GenericProps {
+interface TableBodyProps$1 extends HasClassName {
+    /** Children */
+    children?: JSXElement;
+    /** reference to the root element */
+    ref?: CommonRef;
+}
+
+/**
+ * Defines the props of the component.
+ */
+interface TableBodyProps extends GenericProps, Omit<TableBodyProps$1, 'ref'> {
     /** Children */
     children?: React.ReactNode;
 }
@@ -3211,7 +3295,7 @@ declare const ThOrder: {
     readonly asc: "asc";
     readonly desc: "desc";
 };
-type ThOrder = ValueOf$1<typeof ThOrder>;
+type ThOrder = ValueOf<typeof ThOrder>;
 /**
  * Table cell variants.
  */
@@ -3219,11 +3303,11 @@ declare const TableCellVariant: {
     readonly body: "body";
     readonly head: "head";
 };
-type TableCellVariant = ValueOf$1<typeof TableCellVariant>;
+type TableCellVariant = ValueOf<typeof TableCellVariant>;
 /**
  * Defines the props of the component.
  */
-interface TableCellProps extends GenericProps {
+interface TableCellProps$1 extends HasClassName {
     /** Icon (SVG path).(thead only). */
     icon?: string;
     /** Whether the column is sortable or not (thead only). */
@@ -3234,6 +3318,16 @@ interface TableCellProps extends GenericProps {
     variant?: TableCellVariant;
     /** On header cell click callback. */
     onHeaderClick?(): void;
+    /** Children */
+    children?: JSXElement;
+    /** reference to the root element */
+    ref?: CommonRef;
+}
+
+/**
+ * Defines the props of the component.
+ */
+interface TableCellProps extends GenericProps, Omit<TableCellProps$1, 'ref'> {
     /** Children */
     children?: React.ReactNode;
 }
@@ -3249,7 +3343,17 @@ declare const TableCell: Comp<TableCellProps, HTMLTableCellElement>;
 /**
  * Defines the props of the component.
  */
-interface TableHeaderProps extends GenericProps {
+interface TableHeaderProps$1 extends HasClassName {
+    /** Children */
+    children?: JSXElement;
+    /** reference to the root element */
+    ref?: CommonRef;
+}
+
+/**
+ * Defines the props of the component.
+ */
+interface TableHeaderProps extends GenericProps, Omit<TableHeaderProps$1, 'ref'> {
     /** Children */
     children?: React.ReactNode;
 }
@@ -3265,13 +3369,25 @@ declare const TableHeader: Comp<TableHeaderProps, HTMLTableSectionElement>;
 /**
  * Defines the props of the component.
  */
-interface TableRowProps extends GenericProps {
+interface TableRowProps$1 extends HasClassName, HasAriaDisabled {
     /** Whether the component is clickable or not. */
     isClickable?: boolean;
-    /** Whether the component is disabled or not. */
-    isDisabled?: boolean;
     /** Whether the component is selected or not. */
     isSelected?: boolean;
+    /** Tab index */
+    tabIndex?: number;
+    /** Children */
+    children?: JSXElement;
+    /** reference to the root element */
+    ref?: CommonRef;
+}
+
+/**
+ * Defines the props of the component.
+ */
+interface TableRowProps extends GenericProps, Omit<TableRowProps$1, 'ref' | 'tabIndex' | 'aria-disabled'> {
+    /** Whether the component is disabled or not. */
+    isDisabled?: boolean;
     /** Children */
     children?: React.ReactNode;
 }
@@ -3653,5 +3769,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, 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, TableHeader, TableRow, Text, TextField, ThOrder, 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, 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 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, 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 };