@lumx/react 4.3.1 → 4.3.2-alpha.1

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, ColorWithVariants as ColorWithVariants$1, ColorVariant as ColorVariant$1, Typography as Typography$1, Emphasis as Emphasis$1, GlobalSize, TypographyInterface as TypographyInterface$1 } from '@lumx/core/js/constants';
+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, 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, Falsy, HasClassName as HasClassName$1, 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.
  */
@@ -335,14 +309,14 @@ declare const Alignment: {
     readonly start: "start";
     readonly top: "top";
 };
-type Alignment = ValueOf<typeof Alignment>;
+type Alignment = ValueOf$1<typeof Alignment>;
 type VerticalAlignment = Extract<Alignment, 'top' | 'center' | 'bottom'>;
 type HorizontalAlignment = Extract<Alignment, 'right' | 'center' | 'left'>;
 declare const Theme: {
     readonly light: "light";
     readonly dark: "dark";
 };
-type Theme = ValueOf<typeof Theme>;
+type Theme = ValueOf$1<typeof Theme>;
 declare const Size: {
     readonly xxs: "xxs";
     readonly xs: "xs";
@@ -357,18 +331,19 @@ declare const Size: {
     readonly big: "big";
     readonly huge: "huge";
 };
-type Size = ValueOf<typeof Size>;
+type Size = ValueOf$1<typeof Size>;
+type GlobalSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
 declare const Orientation: {
     readonly horizontal: "horizontal";
     readonly vertical: "vertical";
 };
-type Orientation = ValueOf<typeof Orientation>;
+type Orientation = ValueOf$1<typeof Orientation>;
 declare const Emphasis: {
     readonly low: "low";
     readonly medium: "medium";
     readonly high: "high";
 };
-type Emphasis = ValueOf<typeof Emphasis>;
+type Emphasis = ValueOf$1<typeof Emphasis>;
 /**
  * List of typographies that can't be customized.
  */
@@ -383,7 +358,7 @@ declare const TypographyInterface: {
     readonly headline: "headline";
     readonly display1: "display1";
 };
-type TypographyInterface = ValueOf<typeof TypographyInterface>;
+type TypographyInterface = ValueOf$1<typeof TypographyInterface>;
 /**
  * List of typographies that can be customized (via CSS variables).
  */
@@ -401,7 +376,7 @@ declare const TypographyCustom: {
     readonly title5: "custom-title5";
     readonly title6: "custom-title6";
 };
-type TypographyCustom = ValueOf<typeof TypographyCustom>;
+type TypographyCustom = ValueOf$1<typeof TypographyCustom>;
 /**
  * List of all typographies.
  */
@@ -431,6 +406,26 @@ declare const Typography: {
     readonly display1: "display1";
 };
 type Typography = TypographyInterface | TypographyCustom;
+/**
+ * All available aspect ratios.
+ */
+declare const AspectRatio: {
+    /** Intrinsic content ratio. */
+    readonly original: "original";
+    /** Ratio 3:1 */
+    readonly panoramic: "panoramic";
+    /** Ratio 16:9 */
+    readonly wide: "wide";
+    /** Ratio 3:2 */
+    readonly horizontal: "horizontal";
+    /** Ratio 3:2 */
+    readonly vertical: "vertical";
+    /** Ratio 1:1 */
+    readonly square: "square";
+    /** Ratio constrained by the parent. */
+    readonly free: "free";
+};
+type AspectRatio = ValueOf$1<typeof AspectRatio>;
 /**
  * Semantic info about the purpose of the component
  */
@@ -440,7 +435,7 @@ declare const Kind: {
     readonly warning: "warning";
     readonly error: "error";
 };
-type Kind = ValueOf<typeof Kind>;
+type Kind = ValueOf$1<typeof Kind>;
 /**
  * All available white-space values
  * */
@@ -452,7 +447,7 @@ declare const WhiteSpace: {
     'pre-line': string;
     'break-spaces': string;
 };
-type WhiteSpace = ValueOf<typeof WhiteSpace>;
+type WhiteSpace = ValueOf$1<typeof WhiteSpace>;
 /**
  * See SCSS variable $lumx-color-palette
  */
@@ -467,7 +462,7 @@ declare const ColorPalette: {
     readonly light: "light";
     readonly grey: "grey";
 };
-type ColorPalette = ValueOf<typeof ColorPalette>;
+type ColorPalette = ValueOf$1<typeof ColorPalette>;
 /**
  * See SCSS variable $lumx-color-variants
  */
@@ -482,7 +477,7 @@ declare const ColorVariant: {
     readonly L6: "L6";
     readonly N: "N";
 };
-type ColorVariant = ValueOf<typeof ColorVariant>;
+type ColorVariant = ValueOf$1<typeof ColorVariant>;
 /** ColorPalette with all possible color variant combination */
 type ColorWithVariants = ColorPalette | Exclude<`${ColorPalette}-${ColorVariant}`, `light-D${number}` | `dark-D${number}`>;
 
@@ -514,6 +509,9 @@ type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 /** Union type of all text elements */
 type TextElement = 'span' | 'p' | HeadingElement;
 
+/** Get types of the values of a record. */
+type ValueOf<T extends Record<any, any>> = T[keyof T];
+
 /** Transform a string literal into kebab case */
 type KebabCase<S> = S extends `${infer C}${infer T}` ? T extends Uncapitalize<T> ? `${Uncapitalize<C>}${KebabCase<T>}` : `${Uncapitalize<C>}-${KebabCase<T>}` : S;
 
@@ -529,14 +527,70 @@ interface HasAriaDisabled {
     'aria-disabled'?: Booleanish;
 }
 
-type BaseClickableProps = {
-    children?: JSXElement;
+interface HasChecked<C = boolean> {
+    /** Component checked state. */
+    isChecked?: C;
+    /** @alias isChecked */
+    checked?: boolean;
+}
+
+interface HasDisabled {
+    /** Whether the component is disabled or not. */
     isDisabled?: boolean;
+    /** @alias isDisabled */
     disabled?: boolean;
-    'aria-disabled'?: Booleanish;
+}
+
+/**
+ * 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;
     ref?: CommonRef;
-};
+}
 
 /**
  * Button size definition.
@@ -685,16 +739,11 @@ declare const ButtonGroup: Comp<ButtonGroupProps, HTMLDivElement>;
 /**
  * Defines the props of the component.
  */
-interface CheckboxProps$1 extends HasTheme, HasClassName, HasAriaDisabled {
+interface CheckboxProps$1 extends HasTheme, HasClassName, HasAriaDisabled, HasDisabled, HasChecked<boolean | 'intermediate'> {
     /** Helper text. */
     helper?: string;
     /** Native input id property. */
     id?: string;
-    /** Whether it is checked or not or intermediate. */
-    isChecked?: boolean | 'intermediate';
-    checked?: boolean;
-    /** Whether the component is disabled or not. */
-    isDisabled?: boolean;
     /** Label text. */
     label?: JSXElement;
     /** Native input name property. */
@@ -856,7 +905,7 @@ declare const CommentBlockVariant: {
     readonly indented: "indented";
     readonly linear: "linear";
 };
-type CommentBlockVariant = ValueOf<typeof CommentBlockVariant>;
+type CommentBlockVariant = ValueOf$1<typeof CommentBlockVariant>;
 /**
  * Defines the props of the component.
  */
@@ -1051,7 +1100,15 @@ declare const Dialog: Comp<DialogProps, HTMLDivElement>;
 /**
  * Defines the props of the component.
  */
-interface DividerProps extends GenericProps, HasTheme$1 {
+interface DividerProps$1 extends HasTheme, HasClassName {
+    /** reference to the root element */
+    ref?: CommonRef;
+}
+
+/**
+ * Defines the props of the component.
+ */
+interface DividerProps extends GenericProps, DividerProps$1 {
 }
 /**
  * Divider component.
@@ -1096,7 +1153,7 @@ declare const Placement: {
     readonly LEFT_END: "left-end";
     readonly LEFT_START: "left-start";
 };
-type Placement = ValueOf<typeof Placement>;
+type Placement = ValueOf$1<typeof Placement>;
 /**
  * Offset of the popover.
  */
@@ -1118,7 +1175,7 @@ declare const FitAnchorWidth: {
     readonly MIN_WIDTH: "minWidth";
     readonly WIDTH: "width";
 };
-type FitAnchorWidth = ValueOf<typeof FitAnchorWidth>;
+type FitAnchorWidth = ValueOf$1<typeof FitAnchorWidth>;
 
 /**
  * Defines the props of the component.
@@ -1432,7 +1489,7 @@ declare const GenericBlockGapSize: Pick<{
     readonly big: "big";
     readonly huge: "huge";
 }, "medium" | "tiny" | "regular" | "big" | "huge">;
-type GenericBlockGapSize = ValueOf<typeof GenericBlockGapSize>;
+type GenericBlockGapSize = ValueOf$1<typeof GenericBlockGapSize>;
 
 interface GenericBlockProps extends FlexBoxProps {
     /**
@@ -1688,7 +1745,7 @@ declare module 'react' {
  * All available aspect ratios.
  * @deprecated
  */
-declare const ThumbnailAspectRatio: Record<string, AspectRatio>;
+declare const ThumbnailAspectRatio: Record<string, AspectRatio$1>;
 /**
  *  Thumbnail sizes.
  */
@@ -1700,7 +1757,7 @@ declare const ThumbnailVariant: {
     readonly squared: "squared";
     readonly rounded: "rounded";
 };
-type ThumbnailVariant = ValueOf<typeof ThumbnailVariant>;
+type ThumbnailVariant = ValueOf$1<typeof ThumbnailVariant>;
 /**
  * Thumbnail object fit.
  */
@@ -1708,7 +1765,7 @@ declare const ThumbnailObjectFit: {
     readonly cover: "cover";
     readonly contain: "contain";
 };
-type ThumbnailObjectFit = ValueOf<typeof ThumbnailObjectFit>;
+type ThumbnailObjectFit = ValueOf$1<typeof ThumbnailObjectFit>;
 
 type ImgHTMLProps = ImgHTMLAttributes<HTMLImageElement>;
 /**
@@ -1720,7 +1777,7 @@ interface ThumbnailProps extends GenericProps, HasTheme$1 {
     /** Image alternative text. */
     alt: string;
     /** Image aspect ratio. */
-    aspectRatio?: AspectRatio;
+    aspectRatio?: AspectRatio$1;
     /** Badge. */
     badge?: ReactElement | Falsy;
     /** Image cross origin resource policy. */
@@ -1792,7 +1849,7 @@ declare const ImageBlockCaptionPosition: {
     readonly below: "below";
     readonly over: "over";
 };
-type ImageBlockCaptionPosition = ValueOf<typeof ImageBlockCaptionPosition>;
+type ImageBlockCaptionPosition = ValueOf$1<typeof ImageBlockCaptionPosition>;
 /**
  *  Image block sizes.
  */
@@ -2370,7 +2427,7 @@ declare const ProgressVariant: {
     readonly linear: "linear";
     readonly circular: "circular";
 };
-type ProgressVariant = ValueOf<typeof ProgressVariant>;
+type ProgressVariant = ValueOf$1<typeof ProgressVariant>;
 /**
  * Defines the props of the component.
  */
@@ -2528,16 +2585,11 @@ declare const ProgressTrackerStepPanel: Comp<ProgressTrackerStepPanelProps, HTML
 /**
  * Defines the props of the component.
  */
-interface RadioButtonProps$1 extends HasTheme, HasClassName, HasAriaDisabled {
+interface RadioButtonProps$1 extends HasTheme, HasClassName, HasAriaDisabled, HasDisabled, HasChecked {
     /** Helper text. */
     helper?: string;
     /** Native input id property. */
     id?: string;
-    /** Whether it is checked or not. */
-    isChecked?: boolean;
-    checked?: boolean;
-    /** Whether the component is disabled or not. */
-    isDisabled?: boolean;
     /** Label content. */
     label?: JSXElement;
     /** Native input name property. */
@@ -2593,7 +2645,7 @@ declare const SelectVariant: {
     readonly input: "input";
     readonly chip: "chip";
 };
-type SelectVariant = ValueOf<typeof SelectVariant>;
+type SelectVariant = ValueOf$1<typeof SelectVariant>;
 interface CoreSelectProps extends GenericProps, HasTheme$1 {
     /** Props to pass to the clear button (minus those already set by the Select props). If not specified, the button won't be displayed. */
     clearButtonProps?: Pick<IconButtonProps, 'label'> & Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;
@@ -2726,20 +2778,14 @@ declare const SideNavigationItem: Comp<SideNavigationItemProps, HTMLLIElement>;
 /**
  * Defines the props of the component.
  */
-interface SkeletonCircleProps extends GenericProps, HasTheme$1 {
+interface SkeletonCircleProps$1 extends HasTheme, HasClassName {
     /** Size variant. */
     size: GlobalSize;
     /** The color of the skeleton. */
-    color?: ColorPalette$1;
+    color?: ColorPalette;
+    /** Reference to the root element. */
+    ref?: CommonRef;
 }
-/**
- * SkeletonCircle component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-declare const SkeletonCircle: Comp<SkeletonCircleProps, HTMLDivElement>;
 
 /**
  * Skeleton variants.
@@ -2753,7 +2799,7 @@ type SkeletonRectangleVariant = ValueOf<typeof SkeletonRectangleVariant>;
 /**
  * Defines the props of the component.
  */
-interface SkeletonRectangleProps extends GenericProps, HasTheme$1 {
+interface SkeletonRectangleProps$1 extends HasTheme, HasClassName {
     /** Aspect ratio (use with width and not height). */
     aspectRatio?: Extract<AspectRatio, 'square' | 'horizontal' | 'vertical' | 'wide'>;
     /** Height size. */
@@ -2763,7 +2809,45 @@ interface SkeletonRectangleProps extends GenericProps, HasTheme$1 {
     /** Width size. */
     width?: GlobalSize;
     /** The color of the skeleton. */
-    color?: ColorPalette$1;
+    color?: ColorPalette;
+    /** Reference to the root element. */
+    ref?: CommonRef;
+}
+
+/**
+ * Defines the props of the component.
+ */
+interface SkeletonTypographyProps$1 extends HasTheme, HasClassName {
+    /** Typography variant. */
+    typography: TypographyInterface;
+    /** Width CSS property. */
+    width?: CSSProperties['width'];
+    /** The color of the skeleton. */
+    color?: ColorPalette;
+    /** Reference to the root element. */
+    ref?: CommonRef;
+    /** Style object. */
+    style?: CSSProperties;
+}
+
+/**
+ * Defines the props of the component.
+ */
+interface SkeletonCircleProps extends GenericProps, SkeletonCircleProps$1 {
+}
+/**
+ * SkeletonCircle component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const SkeletonCircle: Comp<SkeletonCircleProps, HTMLDivElement>;
+
+/**
+ * Defines the props of the component.
+ */
+interface SkeletonRectangleProps extends GenericProps, SkeletonRectangleProps$1 {
 }
 /**
  * SkeletonRectangle component.
@@ -2777,13 +2861,7 @@ declare const SkeletonRectangle: Comp<SkeletonRectangleProps, HTMLDivElement>;
 /**
  * Defines the props of the component.
  */
-interface SkeletonTypographyProps extends GenericProps, HasTheme$1 {
-    /** Typography variant. */
-    typography: TypographyInterface$1;
-    /** Width CSS property. */
-    width?: CSSProperties['width'];
-    /** The color of the skeleton. */
-    color?: ColorPalette$1;
+interface SkeletonTypographyProps extends GenericProps, SkeletonTypographyProps$1 {
 }
 /**
  * SkeletonTypography component.
@@ -2851,7 +2929,7 @@ declare const SlideMode: {
     /** Move slides native scroll snap (available only on supported browsers) */
     readonly scrollSnap: "scroll-snap";
 };
-type SlideMode = ValueOf<typeof SlideMode>;
+type SlideMode = ValueOf$1<typeof SlideMode>;
 
 /**
  * Defines the props of the component.
@@ -3050,16 +3128,11 @@ declare const Slides: Comp<SlidesProps, HTMLDivElement>;
 /**
  * Defines the props of the component.
  */
-interface SwitchProps$1 extends HasTheme, HasClassName, HasAriaDisabled {
+interface SwitchProps$1 extends HasTheme, HasClassName, HasAriaDisabled, HasDisabled, HasChecked {
     /** Helper text. */
     helper?: string;
     /** Native input id property. */
     id?: string;
-    /** Whether it is checked or not. */
-    isChecked?: boolean;
-    checked?: boolean;
-    /** Whether the component is disabled or not. */
-    isDisabled?: boolean;
     /** Label text. */
     label?: JSXElement;
     /** Native input name property. */
@@ -3139,7 +3212,7 @@ declare const ThOrder: {
     readonly asc: "asc";
     readonly desc: "desc";
 };
-type ThOrder = ValueOf<typeof ThOrder>;
+type ThOrder = ValueOf$1<typeof ThOrder>;
 /**
  * Table cell variants.
  */
@@ -3147,7 +3220,7 @@ declare const TableCellVariant: {
     readonly body: "body";
     readonly head: "head";
 };
-type TableCellVariant = ValueOf<typeof TableCellVariant>;
+type TableCellVariant = ValueOf$1<typeof TableCellVariant>;
 /**
  * Defines the props of the component.
  */
@@ -3483,7 +3556,7 @@ declare const UploaderVariant: {
     readonly rounded: "rounded";
     readonly circle: "circle";
 };
-type UploaderVariant = ValueOf<typeof UploaderVariant>;
+type UploaderVariant = ValueOf$1<typeof UploaderVariant>;
 /**
  * Uploader sizes.
  */
@@ -3499,7 +3572,7 @@ interface FileInputProps extends Omit<React__default.ComponentProps<'input'>, 'o
  */
 interface UploaderProps extends GenericProps, HasTheme$1, HasAriaDisabled$1 {
     /** Image aspect ratio. */
-    aspectRatio?: AspectRatio;
+    aspectRatio?: AspectRatio$1;
     /** Icon (SVG path). */
     icon?: string;
     /** Disabled state */