@lumx/react 4.2.1-alpha.1 → 4.2.1-alpha.11

package/README.md

@@ -1,7 +1,7 @@
 # LumApps Design System (LumX)
 
 The first official LumApps Design System for [React][react] applications.
-_LumX_ will help you design your applications faster and more easily. You will be able to use LumX with either the LumApps design styleguides or the [Google Material Design specifications][material].
+_LumX_ will help you design your applications faster and more easily. You will be able to use LumX with the LumApps design styleguides.
 
 ## Quick start
 
@@ -31,6 +31,5 @@ Please refer to our [contributing guidelines](CONTRIBUTING.md).
 Code and documentation copyright 2019 LumApps. Code released under the [MIT license](LICENSE.md).
 
 [react]: https://react.org/
-[material]: http://www.google.com/design/spec/material-design/introduction.html
 [react-release]: https://www.npmjs.com/package/@lumx/react
 [webpack]: https://webpack.js.org/

package/index.d.ts

@@ -1,16 +1,18 @@
-import { Kind as Kind$1, HorizontalAlignment as HorizontalAlignment$1, Size as Size$1, ColorPalette as ColorPalette$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, Theme as Theme$1 } from '@lumx/core/js/constants';
+import { Kind as Kind$1, HorizontalAlignment as HorizontalAlignment$1, Size as Size$1, ColorPalette as ColorPalette$1, GenericProps as GenericProps$2, 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, 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, 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, InputHTMLAttributes, RefObject, ImgHTMLAttributes, CSSProperties, SetStateAction, Key, ElementType, ComponentProps } from 'react';
+import React__default, { Ref, ReactElement, ReactNode, SyntheticEvent, MouseEventHandler, KeyboardEventHandler, InputHTMLAttributes, RefObject, CSSProperties, ImgHTMLAttributes, AriaAttributes as AriaAttributes$1, SetStateAction, Key, ElementType, ComponentProps } from 'react';
+import { GenericProps } from '@lumx/core/js/types/GenericProps';
+import { GenericProps as GenericProps$3 } from '@lumx/core/js/utils/disabledState';
 
 /** LumX Component Type. */
 type Comp<P, T = HTMLElement> = {
     (props: P & {
         ref?: Ref<T>;
-    }): ReactElement | null;
+    } & GenericProps): ReactElement | null;
     /** React component type. */
     readonly $$typeof: symbol;
     /** Component default props. */
@@ -499,16 +501,12 @@ interface HasTheme {
 }
 
 /**
- * Define a generic props types.
+ * Framework-agnostic type for renderable content.
+ * Vue components should cast VNode[] from slots to this type.
+ *
+ * Note: Uses type-only import to avoid runtime dependencies.
  */
-interface GenericProps extends HasClassName {
-    /**
-     * Any prop (particularly any supported prop for a HTML element).
-     */
-    [propName: string]: any;
-}
-
-type JSXElement = boolean | number | string | React__default.JSX.Element | React__default.ReactNode | Iterable<JSXElement> | undefined | null;
+type JSXElement = React__default.ReactNode;
 
 /** Union type of all heading elements */
 type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
@@ -522,6 +520,8 @@ type KebabCase<S> = S extends `${infer C}${infer T}` ? T extends Uncapitalize<T>
 /** Transform the component name into the lumx class name. */
 type LumxClassName<TComponentName extends string> = `lumx-${KebabCase<TComponentName>}`;
 
+type CommonRef = any;
+
 type Booleanish = boolean | 'true' | 'false';
 
 interface HasAriaDisabled {
@@ -529,11 +529,37 @@ interface HasAriaDisabled {
     'aria-disabled'?: Booleanish;
 }
 
+interface AriaAttributes {
+    /** Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. */
+    'aria-expanded'?: Booleanish | undefined;
+    /** Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. */
+    'aria-haspopup'?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | undefined;
+    /**
+     * Defines a string value that labels the current element.
+     * @see aria-labelledby.
+     */
+    'aria-label'?: string | undefined;
+    /**
+     * Indicates the current "pressed" state of toggle buttons.
+     * @see aria-checked @see aria-selected.
+     */
+    'aria-pressed'?: boolean | 'false' | 'mixed' | 'true' | undefined;
+}
+
+interface BaseClickableProps {
+    children?: JSXElement;
+    isDisabled?: boolean;
+    disabled?: boolean;
+    'aria-disabled'?: Booleanish;
+    onClick?: (event?: any) => void;
+    ref?: CommonRef;
+}
+
 /**
  * Button size definition.
  */
 type ButtonSize = Extract<Size, 's' | 'm'>;
-interface BaseButtonProps extends GenericProps, Pick<AriaAttributes, 'aria-expanded' | 'aria-haspopup' | 'aria-pressed' | 'aria-label'>, HasTheme, HasAriaDisabled {
+interface BaseButtonProps extends AriaAttributes, HasClassName, HasTheme, HasAriaDisabled, BaseClickableProps {
     /** Color variant. */
     color?: ColorPalette;
     /** Emphasis variant. */
@@ -556,6 +582,14 @@ interface BaseButtonProps extends GenericProps, Pick<AriaAttributes, 'aria-expan
     type?: 'submit' | 'reset' | 'button' | undefined;
     /** Custom component for the link (can be used to inject router Link). */
     linkAs?: 'a' | any;
+    /** whether the button is dispalyed in full width or not */
+    fullWidth?: boolean;
+    /** whether the button is currently active or not */
+    isActive?: boolean;
+    /** whether the button is currently focused or not */
+    isFocused?: boolean;
+    /** whether the button is currently focused or not */
+    isHovered?: boolean;
 }
 
 /**
@@ -570,7 +604,7 @@ declare const ButtonEmphasis: {
 /**
  * Defines the props of the component.
  */
-interface ButtonProps extends /* @vue-ignore */ BaseButtonProps {
+interface ButtonProps$1 extends BaseButtonProps {
     /** Left icon (SVG path). */
     leftIcon?: string;
     /** Right icon (SVG path). */
@@ -591,8 +625,14 @@ declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
 /**
  * Component default props.
  */
-declare const DEFAULT_PROPS: Partial<ButtonProps>;
+declare const DEFAULT_PROPS: Partial<ButtonProps$1>;
 
+interface ButtonProps extends ButtonProps$1 {
+    /**
+     * Any prop (particularly any supported prop for a HTML element).
+     */
+    [propName: string]: any;
+}
 /**
  * Button component.
  *
@@ -602,7 +642,7 @@ declare const DEFAULT_PROPS: Partial<ButtonProps>;
  */
 declare const Button: Comp<ButtonProps, HTMLButtonElement | HTMLAnchorElement>;
 
-interface IconButtonProps$1 extends /* @vue-ignore */ BaseButtonProps {
+interface IconButtonProps$1 extends BaseButtonProps {
     /**
      * Icon (SVG path).
      * If `image` is also set, `image` will be used instead.
@@ -618,9 +658,17 @@ interface IconButtonProps$1 extends /* @vue-ignore */ BaseButtonProps {
      * If you really don't want an aria-label, you can set an empty label (this is not recommended).
      */
     label: string;
+    /**
+     * optional text to be displayed as the title of the HTML element
+     */
+    title?: string;
 }
 
 interface IconButtonProps extends IconButtonProps$1 {
+    /**
+     * Any prop (particularly any supported prop for a HTML element).
+     */
+    [propName: string]: any;
     /**
      * Props to pass to the tooltip.
      * If undefined or if tooltipProps.label is undefined, the label prop will be used as tooltip label.
@@ -641,13 +689,17 @@ declare const IconButton: Comp<IconButtonProps, HTMLButtonElement>;
 /**
  * Defines the props of the component
  */
-interface ButtonGroupProps extends GenericProps {
+interface ButtonGroupProps$1 extends HasClassName {
     /**
      * Children
      */
     children?: JSXElement;
+    /** reference to the root element */
+    ref?: CommonRef;
 }
 
+interface ButtonGroupProps extends ButtonGroupProps$1, GenericProps$1 {
+}
 /**
  * ButtonGroup component.
  *
@@ -1202,7 +1254,54 @@ interface ExpansionPanelProps extends GenericProps$1, HasCloseMode, HasTheme$1 {
  */
 declare const ExpansionPanel: Comp<ExpansionPanelProps, HTMLDivElement>;
 
-interface FlagProps$1 extends GenericProps, HasTheme {
+/**
+ * Defines the props of the component.
+ */
+interface TextProps$1 extends HasClassName {
+    /**
+     * Color variant.
+     */
+    color?: ColorWithVariants;
+    /**
+     * Lightened or darkened variant of the selected color.
+     */
+    colorVariant?: ColorVariant;
+    /**
+     * Typography variant.
+     */
+    typography?: Typography;
+    /**
+     * Custom component to render the text.
+     */
+    as: TextElement;
+    /**
+     * Control whether the text should truncate or not.
+     * Setting as `true` will make the text truncate on a single line.
+     * Setting as `{ lines: number }` will make the text truncate on a multiple lines.
+     */
+    truncate?: boolean | {
+        lines: number;
+    };
+    /**
+     * Prevents text to wrap on multiple lines
+     * (automatically activated when single line text truncate is activated).
+     */
+    noWrap?: boolean;
+    /**
+     * WhiteSpace variant
+     * Ignored when `noWrap` is set to true
+     * Ignored when `truncate` is set to true or lines: 1
+     * */
+    whiteSpace?: WhiteSpace;
+    /**
+     * Children
+     */
+    children?: JSXElement;
+    /** list of styles to apply */
+    style?: CSSProperties;
+}
+
+interface FlagProps$1 extends HasClassName, HasTheme {
     /** Color of the component. */
     color?: ColorPalette;
     /** Icon to use before the label. */
@@ -1211,9 +1310,13 @@ interface FlagProps$1 extends GenericProps, HasTheme {
     children: JSXElement;
     /** Enable text truncate on overflow */
     truncate?: boolean;
+    /** ref to the root element */
+    ref?: CommonRef;
+    /** Text component to use for rendering the label */
+    Text: (props: TextProps$1) => any;
 }
 
-interface FlagProps extends Omit<FlagProps$1, 'children'> {
+interface FlagProps extends GenericProps$2, Omit<FlagProps$1, 'children' | 'Text'> {
     label: React.ReactNode;
 }
 /**
@@ -1234,7 +1337,7 @@ type FlexHorizontalAlignment = HorizontalAlignment | SpaceAlignment;
 /**
  * Defines the props of the component.
  */
-interface FlexBoxProps$1 extends GenericProps {
+interface FlexBoxProps$1 extends HasClassName {
     /** Children elements. */
     children?: JSXElement;
     /** Whether the "content filling space" is enabled or not. */
@@ -1258,7 +1361,7 @@ interface FlexBoxProps$1 extends GenericProps {
 /**
  * Defines the props of the component.
  */
-interface FlexBoxProps extends FlexBoxProps$1 {
+interface FlexBoxProps extends FlexBoxProps$1, GenericProps$1 {
     /** Customize the root element. */
     as?: React__default.ElementType;
 }
@@ -1375,58 +1478,15 @@ declare const GenericBlock: GenericBlock;
 /**
  * Defines the props of the component.
  */
-interface TextProps extends GenericProps {
-    /**
-     * Color variant.
-     */
-    color?: ColorWithVariants;
-    /**
-     * Lightened or darkened variant of the selected color.
-     */
-    colorVariant?: ColorVariant;
-    /**
-     * Typography variant.
-     */
-    typography?: Typography;
-    /**
-     * Custom component to render the text.
-     */
-    as: TextElement;
-    /**
-     * Control whether the text should truncate or not.
-     * Setting as `true` will make the text truncate on a single line.
-     * Setting as `{ lines: number }` will make the text truncate on a multiple lines.
-     */
-    truncate?: boolean | {
-        lines: number;
-    };
-    /**
-     * Prevents text to wrap on multiple lines
-     * (automatically activated when single line text truncate is activated).
-     */
-    noWrap?: boolean;
-    /**
-     * WhiteSpace variant
-     * Ignored when `noWrap` is set to true
-     * Ignored when `truncate` is set to true or lines: 1
-     * */
-    whiteSpace?: WhiteSpace;
-    /**
-     * Children
-     */
-    children?: JSXElement;
-}
-
-/**
- * Defines the props of the component.
- */
-interface HeadingProps extends Partial<TextProps> {
+interface HeadingProps$1 extends Partial<TextProps$1> {
     /**
      * Display a specific heading level instead of the one provided by parent context provider.
      */
     as?: HeadingElement;
 }
 
+interface HeadingProps extends HeadingProps$1, GenericProps$1 {
+}
 /**
  * Renders a heading component.
  * Extends the `Text` Component with the heading level automatically computed based on
@@ -1533,7 +1593,7 @@ type IconSizes = (typeof ICON_SIZES)[number];
 /**
  * Defines the props of the component.
  */
-interface IconProps extends GenericProps, HasTheme {
+interface IconProps$1 extends HasClassName, HasTheme {
     /** Color variant. */
     color?: ColorWithVariants;
     /** Lightened or darkened variant of the selected icon color. */
@@ -1551,8 +1611,12 @@ interface IconProps extends GenericProps, HasTheme {
     alt?: string;
     /** Vertical alignment of the icon (only applies for icons nested in Text/Heading). */
     verticalAlign?: null | 'middle';
+    /** reference to the root element */
+    ref?: CommonRef;
 }
 
+interface IconProps extends IconProps$1, GenericProps$1 {
+}
 /**
  * Icon component.
  *
@@ -1821,13 +1885,17 @@ declare const InlineList: Comp<InlineListProps, HTMLElement>;
 /**
  * Defines the props of the component.
  */
-interface InputHelperProps extends GenericProps, HasTheme {
+interface InputHelperProps$1 extends HasClassName, HasTheme {
     /** Helper content. */
     children: JSXElement;
     /** Helper variant. */
     kind?: Kind;
+    /** ref to the root element `p` */
+    ref?: CommonRef;
 }
 
+interface InputHelperProps extends InputHelperProps$1, GenericProps$3 {
+}
 /**
  * InputHelper component.
  *
@@ -1837,7 +1905,7 @@ interface InputHelperProps extends GenericProps, HasTheme {
  */
 declare const InputHelper: Comp<InputHelperProps, HTMLParagraphElement>;
 
-interface InputLabelProps extends GenericProps, HasTheme {
+interface InputLabelProps$1 extends HasClassName, HasTheme {
     /** Typography variant. */
     typography?: Typography;
     /** Label content. */
@@ -1846,8 +1914,12 @@ interface InputLabelProps extends GenericProps, HasTheme {
     htmlFor: string;
     /** Whether the component is required or not. */
     isRequired?: boolean;
+    /** ref to the root element */
+    ref?: CommonRef;
 }
 
+interface InputLabelProps extends InputLabelProps$1, GenericProps$2 {
+}
 /**
  * InputLabel component.
  *
@@ -1860,7 +1932,7 @@ declare const InputLabel: Comp<InputLabelProps, HTMLLabelElement>;
 /**
  * Defines the props of the component.
  */
-interface LightboxProps extends GenericProps$1, HasTheme$1, Pick<AriaAttributes, 'aria-label' | 'aria-labelledby'> {
+interface LightboxProps extends GenericProps$1, 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. */
@@ -2075,7 +2147,7 @@ declare const ListSubheader: Comp<ListSubheaderProps, HTMLLIElement>;
 /**
  * Defines the props of the component.
  */
-interface MessageProps extends GenericProps {
+interface MessageProps$1 extends HasClassName {
     /** Content. */
     children?: JSXElement;
     /** Whether the message has a background or not. */
@@ -2084,6 +2156,8 @@ interface MessageProps extends GenericProps {
     kind?: Kind;
     /** Message custom icon SVG path. */
     icon?: string;
+    /** Reference to the message container element. */
+    ref?: CommonRef;
     /**
      * Displays a close button.
      *
@@ -2097,6 +2171,10 @@ interface MessageProps extends GenericProps {
     };
 }
 
+interface MessageProps extends Omit<MessageProps$1, 'children' | 'ref'> {
+    /** Content. */
+    children?: React.ReactNode;
+}
 /**
  * Message component.
  *
@@ -3166,6 +3244,8 @@ interface TabPanelProps extends GenericProps$1 {
  */
 declare const TabPanel: Comp<TabPanelProps, HTMLDivElement>;
 
+interface TextProps extends TextProps$1, GenericProps$1 {
+}
 /**
  * Text component.
  *

package/index.js

@@ -1018,9 +1018,9 @@ const RawClickable$1 = props => {
     };
   }
   return /*#__PURE__*/jsx(Component, {
-    "aria-disabled": isAnyDisabled || undefined,
     ...forwardedProps,
     ...clickableProps,
+    "aria-disabled": isAnyDisabled || undefined,
     onClick: event => {
       if (isAnyDisabled) {
         event.stopPropagation();
@@ -6449,10 +6449,7 @@ const {
  * @param  props Component props.
  * @return JSX element.
  */
-const Flag$1 = (props, nestedComponents) => {
-  const {
-    Text
-  } = nestedComponents || {};
+const Flag$1 = props => {
   const {
     children,
     icon,
@@ -6460,6 +6457,7 @@ const Flag$1 = (props, nestedComponents) => {
     className,
     theme,
     truncate,
+    Text,
     ...forwardedProps
   } = props;
   const flagColor = color || (theme === Theme.light ? ColorPalette.dark : ColorPalette.light);
@@ -6476,7 +6474,7 @@ const Flag$1 = (props, nestedComponents) => {
       className: element$B('icon')
     }), /*#__PURE__*/jsx(Text, {
       as: "span",
-      truncate: !!props.truncate,
+      truncate: !!truncate,
       typography: "overline",
       className: element$B('label'),
       children: children
@@ -6497,8 +6495,7 @@ const Flag = forwardRef((props, ref) => {
     ...props,
     theme: props.theme || defaultTheme,
     ref,
-    children: props.label
-  }, {
+    children: props.label,
     Text
   });
 });
@@ -7823,7 +7820,7 @@ function setupViewTransitionName(elementRef, name) {
   return {
     set() {
       const element = unref(elementRef);
-      if (!element) return;
+      if (!element || !name) return;
       originalName = element.style.viewTransitionName;
       element.style.viewTransitionName = name;
     },
@@ -7851,15 +7848,15 @@ async function startViewTransition({
   const {
     flushSync
   } = ReactDOM;
-  if (prefersReducedMotion || !start || !flushSync || !viewTransitionName?.source || !viewTransitionName?.target) {
+  if (prefersReducedMotion || !start || !flushSync || viewTransitionName && (!viewTransitionName?.source || !viewTransitionName?.target)) {
     // Skip, apply changes without a transition
     changes();
     return;
   }
 
   // Setup set/unset transition name on source & target
-  const sourceTransitionName = setupViewTransitionName(viewTransitionName.source, viewTransitionName.name);
-  const targetTransitionName = setupViewTransitionName(viewTransitionName.target, viewTransitionName.name);
+  const sourceTransitionName = setupViewTransitionName(viewTransitionName?.source, viewTransitionName?.name);
+  const targetTransitionName = setupViewTransitionName(viewTransitionName?.target, viewTransitionName?.name);
   sourceTransitionName.set();
 
   // Start view transition, apply changes & flush to DOM
@@ -8851,6 +8848,7 @@ const Message$1 = props => {
     kind,
     icon: customIcon,
     closeButtonProps,
+    ref,
     ...forwardedProps
   } = props;
   const {
@@ -8864,6 +8862,7 @@ const Message$1 = props => {
   const isCloseButtonDisplayed = hasBackground && kind === 'info' && onClick && closeButtonLabel;
   return /*#__PURE__*/jsxs("div", {
     ...forwardedProps,
+    ref: ref,
     className: classnames(className, block$B({
       [`color-${color}`]: Boolean(color),
       'has-background': hasBackground