@lumx/react 4.9.0 → 4.10.0-next.1

package/index.d.ts

@@ -3358,21 +3358,38 @@ declare const Link: Comp<LinkProps, HTMLButtonElement | HTMLAnchorElement>;
 /**
  * Defines the props of the component.
  */
-interface LinkPreviewProps extends GenericProps$1, HasTheme$1 {
+interface LinkPreviewProps$1 extends HasClassName, HasTheme {
     /** Description. */
     description?: string;
     /** Link URL. */
     link: string;
-    /** Custom react component for the link (can be used to inject react router Link). */
+    /** Custom component for the link (can be used to inject a router Link). */
     linkAs?: 'a' | any;
     /** Props to pass to the link (minus those already set by the LinkPreview props). */
-    linkProps?: Omit<LinkProps, 'color' | 'colorVariant' | 'href' | 'target'>;
+    linkProps?: GenericProps;
     /** Size variant. */
-    size?: Extract<Size$1, 'regular' | 'big'>;
+    size?: Extract<Size, 'regular' | 'big'>;
     /** Thumbnail for the link preview. */
-    thumbnailProps?: ThumbnailProps;
+    thumbnailProps?: GenericProps;
     /** Title. */
     title?: string;
+    /** Ref forwarded to the root article element. */
+    ref?: CommonRef;
+    /** Heading element used to wrap the title. */
+    TitleHeading: any;
+    /** Link component injected by the framework wrapper. */
+    Link: any;
+    /** Thumbnail component injected by the framework wrapper. */
+    Thumbnail: any;
+}
+type LinkPreviewPropsToOverride = 'linkProps' | 'TitleHeading' | 'Link' | 'Thumbnail' | 'thumbnailProps';
+
+/**
+ * Defines the props of the component.
+ */
+interface LinkPreviewProps extends GenericProps$1, ReactToJSX<LinkPreviewProps$1, LinkPreviewPropsToOverride> {
+    /** Props to pass to the link (minus those already set by the LinkPreview props). */
+    linkProps?: Omit<LinkProps, 'color' | 'colorVariant' | 'href' | 'target'>;
     /** Customize the title heading tag. */
     titleHeading?: HeadingElement$1;
 }

package/index.js

@@ -1,4 +1,4 @@
-import { Kind as Kind$1, Size as Size$1, ColorPalette as ColorPalette$1, Emphasis as Emphasis$1, ColorVariant, VISUALLY_HIDDEN, Theme as Theme$1, AspectRatio as AspectRatio$1, DOCUMENT, IS_BROWSER as IS_BROWSER$1, WINDOW, DIALOG_TRANSITION_DURATION, Orientation as Orientation$1, NOTIFICATION_TRANSITION_DURATION, Alignment as Alignment$1 } from '@lumx/core/js/constants';
+import { Kind as Kind$1, Size as Size$1, ColorPalette as ColorPalette$1, Emphasis as Emphasis$1, ColorVariant as ColorVariant$1, VISUALLY_HIDDEN, Theme as Theme$1, AspectRatio as AspectRatio$1, DOCUMENT, IS_BROWSER as IS_BROWSER$1, WINDOW, DIALOG_TRANSITION_DURATION, Orientation as Orientation$1, NOTIFICATION_TRANSITION_DURATION, Alignment as Alignment$1 } from '@lumx/core/js/constants';
 export * from '@lumx/core/js/constants';
 export * from '@lumx/core/js/types';
 import * as React from 'react';
@@ -725,7 +725,7 @@ function resolveColorWithVariants(colorWithVariants, colorVariant) {
  * color('font', undefined); // undefined
  */
 function color(type, propColor, propColorVariant) {
-  const [cColor, cColorVariant = ColorVariant.N] = resolveColorWithVariants(propColor, propColorVariant);
+  const [cColor, cColorVariant = ColorVariant$1.N] = resolveColorWithVariants(propColor, propColorVariant);
   return `lumx-color-${type}-${cColor}-${cColorVariant}`;
 }
 
@@ -972,6 +972,12 @@ const ColorPalette = {
   yellow: 'yellow',
   red: 'red',
   light: 'light'};
+/**
+ * See SCSS variable $lumx-color-variants
+ */
+const ColorVariant = {
+  N: 'N'
+};
 
 /** ColorPalette with all possible color variant combination */
 
@@ -13609,13 +13615,13 @@ const CLASSNAME$E = 'lumx-link-preview';
 const {
   block: block$x,
   element: element$p
-} = classNames.bem(CLASSNAME$E);
+} = bem(CLASSNAME$E);
 
 /**
  * Component default props.
  */
 const DEFAULT_PROPS$D = {
-  size: Size$1.regular,
+  size: Size.regular,
   titleHeading: 'h2'
 };
 
@@ -13626,8 +13632,7 @@ const DEFAULT_PROPS$D = {
  * @param  ref   Component ref.
  * @return React element.
  */
-const LinkPreview = forwardRef((props, ref) => {
-  const defaultTheme = useTheme() || Theme$1.light;
+const LinkPreview$1 = props => {
   const {
     className,
     description,
@@ -13635,19 +13640,21 @@ const LinkPreview = forwardRef((props, ref) => {
     linkAs,
     linkProps,
     size = DEFAULT_PROPS$D.size,
-    theme = defaultTheme,
+    theme,
     thumbnailProps,
+    ref,
     title,
-    titleHeading = DEFAULT_PROPS$D.titleHeading,
+    TitleHeading,
+    Link,
+    Thumbnail,
     ...forwardedProps
   } = props;
   // Use title heading as title wrapper (see DEFAULT_PROPS for the default value).
-  const TitleHeading = titleHeading;
-  const adjustedSize = size === Size$1.big && thumbnailProps ? Size$1.big : Size$1.regular;
+  const adjustedSize = size === Size.big && thumbnailProps ? Size.big : Size.regular;
   return /*#__PURE__*/jsx("article", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, block$x({
+    className: classnames(className, block$x({
       [`size-${adjustedSize}`]: Boolean(adjustedSize),
       [`theme-${theme}`]: Boolean(theme)
     })),
@@ -13665,7 +13672,7 @@ const LinkPreview = forwardRef((props, ref) => {
             // Avoid redundant links in focus order
             tabIndex: -1
           },
-          aspectRatio: AspectRatio$1.free,
+          aspectRatio: AspectRatio.free,
           fillHeight: true
         })
       }), /*#__PURE__*/jsxs("div", {
@@ -13677,7 +13684,7 @@ const LinkPreview = forwardRef((props, ref) => {
             linkAs: linkAs,
             target: "_blank",
             href: link,
-            color: theme === Theme$1.light ? ColorPalette$1.dark : ColorPalette$1.light,
+            color: theme === Theme.light ? ColorPalette.dark : ColorPalette.light,
             colorVariant: ColorVariant.N,
             children: title
           })
@@ -13689,10 +13696,10 @@ const LinkPreview = forwardRef((props, ref) => {
           children: /*#__PURE__*/jsx(Link, {
             ...linkProps,
             linkAs: linkAs,
-            className: classNames.join(element$p('link'), linkProps?.className),
+            className: classnames(element$p('link'), linkProps?.className),
             target: "_blank",
             href: link,
-            color: theme === Theme$1.light ? ColorPalette$1.primary : ColorPalette$1.light,
+            color: theme === Theme.light ? ColorPalette.primary : ColorPalette.light,
             colorVariant: ColorVariant.N
             // Avoid redundant links in focus order
             ,
@@ -13703,6 +13710,36 @@ const LinkPreview = forwardRef((props, ref) => {
       })]
     })
   });
+};
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * LinkPreview component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const LinkPreview = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme$1.light;
+  const {
+    theme = defaultTheme,
+    titleHeading = DEFAULT_PROPS$D.titleHeading,
+    ...forwardedProps
+  } = props;
+  // Use title heading as title wrapper (see DEFAULT_PROPS for the default value).
+  const TitleHeading = titleHeading;
+  return LinkPreview$1({
+    theme,
+    TitleHeading,
+    ref,
+    Link,
+    Thumbnail,
+    ...forwardedProps
+  });
 });
 LinkPreview.displayName = COMPONENT_NAME$D;
 LinkPreview.className = CLASSNAME$E;