@lumx/react 4.2.1-alpha.13 → 4.2.1-alpha.14

package/index.d.ts

@@ -4,7 +4,7 @@ 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';
 export * from '@lumx/core/js/types';
 import * as React$1 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 React__default, { Ref, ReactElement, ReactNode, SyntheticEvent, MouseEventHandler, KeyboardEventHandler, AriaAttributes, InputHTMLAttributes, RefObject, CSSProperties, ImgHTMLAttributes, SetStateAction, Key, ElementType, ComponentProps } from 'react';
 
 /** LumX Component Type. */
 type Comp<P, T = HTMLElement> = {
@@ -527,23 +527,6 @@ 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;
-}
-
 type BaseClickableProps = {
     children?: JSXElement;
     isDisabled?: boolean;
@@ -557,7 +540,7 @@ type BaseClickableProps = {
  * Button size definition.
  */
 type ButtonSize = Extract<Size, 's' | 'm'>;
-interface BaseButtonProps extends AriaAttributes, HasClassName, HasTheme, HasAriaDisabled, BaseClickableProps {
+interface BaseButtonProps extends Pick<AriaAttributes, 'aria-expanded' | 'aria-haspopup' | 'aria-pressed' | 'aria-label'>, HasClassName, HasTheme, HasAriaDisabled, BaseClickableProps {
     /** Color variant. */
     color?: ColorPalette;
     /** Emphasis variant. */
@@ -602,7 +585,7 @@ declare const ButtonEmphasis: {
 /**
  * Defines the props of the component.
  */
-interface ButtonProps$1 extends BaseButtonProps {
+interface ButtonProps$1 extends /* @vue-ignore */ BaseButtonProps {
     /** Left icon (SVG path). */
     leftIcon?: string;
     /** Right icon (SVG path). */
@@ -625,7 +608,7 @@ declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
  */
 declare const DEFAULT_PROPS: Partial<ButtonProps$1>;
 
-interface ButtonProps extends ButtonProps$1, GenericProps {
+interface ButtonProps extends GenericProps, ButtonProps$1 {
 }
 /**
  * Button component.
@@ -634,9 +617,9 @@ interface ButtonProps extends ButtonProps$1, GenericProps {
  * @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 {
+interface IconButtonProps$1 extends /* @vue-ignore */ BaseButtonProps {
     /**
      * Icon (SVG path).
      * If `image` is also set, `image` will be used instead.
@@ -652,13 +635,9 @@ interface IconButtonProps$1 extends 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 GenericProps, Omit<IconButtonProps$1, 'children'> {
+interface IconButtonProps extends GenericProps, IconButtonProps$1 {
     /**
      * Props to pass to the tooltip.
      * If undefined or if tooltipProps.label is undefined, the label prop will be used as tooltip label.
@@ -688,7 +667,7 @@ interface ButtonGroupProps$1 extends HasClassName {
     ref?: CommonRef;
 }
 
-interface ButtonGroupProps extends ButtonGroupProps$1, GenericProps {
+interface ButtonGroupProps extends GenericProps, ButtonGroupProps$1 {
 }
 /**
  * ButtonGroup component.
@@ -1244,53 +1223,6 @@ interface ExpansionPanelProps extends GenericProps, HasCloseMode, HasTheme$1 {
  */
 declare const ExpansionPanel: Comp<ExpansionPanelProps, HTMLDivElement>;
 
-/**
- * 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;
@@ -1302,11 +1234,9 @@ interface FlagProps$1 extends HasClassName, HasTheme {
     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 GenericProps, Omit<FlagProps$1, 'children' | 'Text'> {
+interface FlagProps extends GenericProps, Omit<FlagProps$1, 'children'> {
     /** Text label of the flag. */
     label: React.ReactNode;
 }
@@ -1352,7 +1282,7 @@ interface FlexBoxProps$1 extends HasClassName {
 /**
  * Defines the props of the component.
  */
-interface FlexBoxProps extends FlexBoxProps$1, GenericProps {
+interface FlexBoxProps extends GenericProps, FlexBoxProps$1 {
     /** Customize the root element. */
     as?: React__default.ElementType;
 }
@@ -1466,6 +1396,53 @@ interface GenericBlock extends BaseGenericBlock {
 }
 declare const GenericBlock: GenericBlock;
 
+/**
+ * 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;
+}
+
 /**
  * Defines the props of the component.
  */
@@ -1476,7 +1453,7 @@ interface HeadingProps$1 extends Partial<TextProps$1> {
     as?: HeadingElement;
 }
 
-interface HeadingProps extends HeadingProps$1, GenericProps {
+interface HeadingProps extends GenericProps, HeadingProps$1 {
 }
 /**
  * Renders a heading component.
@@ -1923,7 +1900,7 @@ declare const InputLabel: Comp<InputLabelProps, HTMLLabelElement>;
 /**
  * Defines the props of the component.
  */
-interface LightboxProps extends GenericProps, HasTheme$1, Pick<AriaAttributes$1, 'aria-label' | 'aria-labelledby'> {
+interface LightboxProps extends GenericProps, HasTheme$1, Pick<AriaAttributes, '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. */
@@ -1989,7 +1966,7 @@ interface LinkProps extends GenericProps, HasAriaDisabled$1 {
  * @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.
@@ -2156,13 +2133,13 @@ interface MessageProps$1 extends HasClassName {
      */
     closeButtonProps?: {
         /** The callback called when the button is clicked */
-        onClick: (event: any) => void;
+        onClick: () => void;
         /** The label of the close button. */
         label: string;
     };
 }
 
-interface MessageProps extends Omit<MessageProps$1, 'children' | 'ref'> {
+interface MessageProps extends GenericProps, Omit<MessageProps$1, 'children' | 'ref'> {
     /** Content. */
     children?: React.ReactNode;
 }
@@ -2246,9 +2223,9 @@ interface NotificationProps extends GenericProps, HasTheme$1 {
     /** Z-axis position. */
     zIndex?: number;
     /** On action button click callback. */
-    onActionClick?(event: any): void | null;
+    onActionClick?(): void;
     /** On click callback. */
-    onClick?(event: any): void | null;
+    onClick?(): void;
     /** Whether the notification should be rendered into a DOM node that exists outside the DOM hierarchy of the parent component. */
     usePortal?: boolean;
 }

package/index.js

@@ -6449,7 +6449,10 @@ const {
  * @param  props Component props.
  * @return JSX element.
  */
-const Flag$1 = props => {
+const Flag$1 = (props, nestedComponents) => {
+  const {
+    Text
+  } = nestedComponents || {};
   const {
     children,
     icon,
@@ -6457,7 +6460,6 @@ const Flag$1 = props => {
     className,
     theme,
     truncate,
-    Text,
     ...forwardedProps
   } = props;
   const flagColor = color || (theme === Theme.light ? ColorPalette.dark : ColorPalette.light);
@@ -6474,7 +6476,7 @@ const Flag$1 = props => {
       className: element$B('icon')
     }), /*#__PURE__*/jsx(Text, {
       as: "span",
-      truncate: !!truncate,
+      truncate: !!props.truncate,
       typography: "overline",
       className: element$B('label'),
       children: children
@@ -6495,7 +6497,8 @@ const Flag = forwardRef((props, ref) => {
     ...props,
     theme: props.theme || defaultTheme,
     ref,
-    children: props.label,
+    children: props.label
+  }, {
     Text
   });
 });
@@ -9298,7 +9301,7 @@ const Notification = forwardRef((props, ref) => {
   const hasAction = Boolean(onActionClick) && Boolean(actionLabel);
   const handleCallback = evt => {
     if (isFunction(onActionClick)) {
-      onActionClick(evt);
+      onActionClick();
     }
     evt.stopPropagation();
   };