@lumx/react 4.8.0-next.0 → 4.8.0-next.1

package/index.d.ts

@@ -1,4 +1,4 @@
-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';
+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, 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$1, HasAriaLabelOrLabelledBy as HasAriaLabelOrLabelledBy$1 } from '@lumx/core/js/types';
@@ -787,7 +787,7 @@ interface ButtonProps extends GenericProps$1, ReactToJSX<ButtonProps$1> {
  * @param  ref   Component ref.
  * @return React element.
  */
-declare const Button: Comp<ButtonProps, HTMLAnchorElement | HTMLButtonElement>;
+declare const Button: Comp<ButtonProps, HTMLButtonElement | HTMLAnchorElement>;
 
 interface IconButtonProps$1 extends BaseButtonProps {
     /**
@@ -2235,23 +2235,35 @@ declare const ImageLightbox: Comp<ImageLightboxProps, HTMLDivElement> & {
 /**
  * Defines the props of the component.
  */
-interface InlineListProps extends GenericProps$1 {
+interface InlineListProps$1 extends HasClassName {
+    /**
+     * List items to render.
+     */
+    items?: JSXElement[];
     /**
      * Text color.
      */
-    color?: ColorWithVariants$1;
+    color?: ColorWithVariants;
     /**
      * Lightened or darkened variant of the selected color.
      */
-    colorVariant?: ColorVariant$1;
+    colorVariant?: ColorVariant;
     /**
      * Typography variant.
      */
-    typography?: Typography$1;
+    typography?: Typography;
     /**
      * Activate line wrap on overflow.
      */
     wrap?: boolean;
+    /** reference to the root element */
+    ref?: CommonRef;
+}
+
+/**
+ * Defines the props of the component.
+ */
+interface InlineListProps extends GenericProps$1, ReactToJSX<InlineListProps$1, 'items'> {
     /**
      * Children
      */
@@ -2264,7 +2276,7 @@ interface InlineListProps extends GenericProps$1 {
  * @param  ref   Component ref.
  * @return React element.
  */
-declare const InlineList: Comp<InlineListProps, HTMLElement>;
+declare const InlineList: Comp<InlineListProps, HTMLUListElement>;
 
 /**
  * Defines the props of the component.
@@ -2397,7 +2409,7 @@ interface LinkProps extends GenericProps$1, ReactToJSX<LinkProps$1> {
  * @param  ref   Component ref.
  * @return React element.
  */
-declare const Link: Comp<LinkProps, HTMLAnchorElement | HTMLButtonElement>;
+declare const Link: Comp<LinkProps, HTMLButtonElement | HTMLAnchorElement>;
 
 /**
  * Defines the props of the component.

package/index.js

@@ -2,7 +2,7 @@ import { Kind as Kind$1, Size as Size$1, ColorPalette as ColorPalette$1, Emphasi
 export * from '@lumx/core/js/constants';
 export * from '@lumx/core/js/types';
 import * as React from 'react';
-import React__default, { useState, useEffect, useMemo, useRef, useCallback, Children, useLayoutEffect, cloneElement, createContext, isValidElement, useContext, useReducer } from 'react';
+import React__default, { useState, useEffect, useMemo, useRef, useCallback, Children, useLayoutEffect, cloneElement, createContext, useContext, useReducer } from 'react';
 import { mdiAlert } from '@lumx/icons/esm/alert.js';
 import { mdiAlertCircle } from '@lumx/icons/esm/alert-circle.js';
 import { mdiCheckCircle } from '@lumx/icons/esm/check-circle.js';
@@ -8838,7 +8838,7 @@ const CLASSNAME$O = 'lumx-inline-list';
 const {
   block: block$H,
   element: element$x
-} = classNames.bem(CLASSNAME$O);
+} = bem(CLASSNAME$O);
 
 /**
  * Component default props.
@@ -8849,17 +8849,17 @@ const DEFAULT_PROPS$N = {};
  * InlineList component.
  *
  * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
+ * @return JSX element.
  */
-const InlineList = forwardRef((props, ref) => {
+const InlineList$1 = props => {
   const {
     className,
     color,
     colorVariant,
-    typography,
-    children,
+    typography: typography$1,
+    items = [],
     wrap,
+    ref,
     ...forwardedProps
   } = props;
   return (
@@ -8868,31 +8868,53 @@ const InlineList = forwardRef((props, ref) => {
     jsx("ul", {
       ...forwardedProps,
       ref: ref,
-      className: classNames.join(className, block$H({
+      className: classnames(className, block$H({
         wrap: Boolean(wrap)
-      }), color && classNames.font(color, colorVariant), typography && classNames.typography(typography))
+      }), color && font(color, colorVariant), typography$1 && typography(typography$1))
       // Lists with removed bullet style can lose their a11y list role on some browsers
       ,
       role: "list",
-      children: Children.toArray(children).map((child, index) => {
-        const key = /*#__PURE__*/isValidElement(child) && child.key || index;
-        return (
-          /*#__PURE__*/
-          // We need to item is set as display: contents which removes the semantic.
-          // eslint-disable-next-line jsx-a11y/no-redundant-roles
-          jsxs("li", {
-            role: "listitem",
-            className: element$x('item'),
-            children: [index !== 0 && /*#__PURE__*/jsx("span", {
-              className: element$x('item-separator'),
-              "aria-hidden": "true",
-              children: '\u00A0•\u00A0'
-            }), child]
-          }, key)
-        );
-      })
+      children: items.map((item, index) =>
+      /*#__PURE__*/
+      // We need to item is set as display: contents which removes the semantic.
+      // eslint-disable-next-line jsx-a11y/no-redundant-roles
+      jsxs("li", {
+        role: "listitem",
+        className: element$x('item'),
+        children: [index !== 0 && /*#__PURE__*/jsx("span", {
+          className: element$x('item-separator'),
+          "aria-hidden": "true",
+          children: '\u00A0•\u00A0'
+        }), item]
+      }, index))
     })
   );
+};
+InlineList$1.displayName = COMPONENT_NAME$N;
+InlineList$1.className = CLASSNAME$O;
+InlineList$1.defaultProps = DEFAULT_PROPS$N;
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * InlineList component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const InlineList = forwardRef((props, ref) => {
+  const {
+    children,
+    ...rest
+  } = props;
+  return InlineList$1({
+    ...rest,
+    ref,
+    items: Children.toArray(children)
+  });
 });
 InlineList.displayName = COMPONENT_NAME$N;
 InlineList.className = CLASSNAME$O;