@lumx/react 4.9.0-next.1 → 4.9.0-next.2

package/index.d.ts

@@ -4173,41 +4173,131 @@ declare const Uploader: Comp<UploaderProps, HTMLElement>;
 /**
  * User block sizes.
  */
-type UserBlockSize = Extract<Size$1, 'xs' | 's' | 'm' | 'l'>;
+type UserBlockSize = Extract<Size, 'xs' | 's' | 'm' | 'l'>;
+/**
+ * Props for the UserBlock component.
+ *
+ * UserBlock displays user information with an avatar, name, and optional fields.
+ * Supports both horizontal and vertical orientations with customizable actions.
+ */
+interface UserBlockProps$1 extends HasClassName, HasTheme {
+    /**
+     * Props to pass to the Avatar component.
+     * Configure the user's avatar appearance and behavior.
+     */
+    avatarProps?: GenericProps;
+    /**
+     * Additional fields to display below the user's name.
+     * Typically used for role, department, or other user metadata.
+     */
+    fields?: string[];
+    /**
+     * Props to pass to the Link component wrapping the avatar and/or name.
+     * Used to make the user block clickable with navigation.
+     */
+    linkProps?: GenericProps;
+    /**
+     * Custom component to use for the link element.
+     * Use this to inject a framework-specific router Link component (e.g., react-router Link).
+     * @default 'a'
+     */
+    linkAs?: 'a' | any;
+    /**
+     * Content for multiple actions displayed in the action toolbar.
+     * Only visible when orientation is vertical.
+     */
+    multipleActions?: JSXElement;
+    /**
+     * The user's display name.
+     * Can be a string or custom JSX element.
+     */
+    name?: JSXElement;
+    /**
+     * Props to pass to the name wrapper element.
+     * Used to customize the name block's appearance and behavior.
+     */
+    nameProps?: GenericProps;
+    /**
+     * Layout orientation of the user block.
+     * - horizontal: Avatar and info side by side (default)
+     * - vertical: Avatar and info stacked, forces size to 'l'
+     * @default Orientation.horizontal
+     */
+    orientation?: Orientation;
+    /**
+     * Content for a single action displayed in the action toolbar.
+     * Only visible when orientation is vertical.
+     */
+    simpleAction?: JSXElement;
+    /**
+     * Size variant of the component.
+     * Note: When orientation is vertical, size is automatically forced to 'l'.
+     * @default Size.m
+     */
+    size?: UserBlockSize;
+    /**
+     * Click event handler.
+     * Called when the user clicks on the clickable area (name/avatar).
+     */
+    handleClick?(): void;
+    /**
+     * Mouse enter event handler.
+     * Called when the mouse enters the component.
+     */
+    handleMouseEnter?(): void;
+    /**
+     * Mouse leave event handler.
+     * Called when the mouse leaves the component.
+     */
+    handleMouseLeave?(): void;
+    /**
+     * Additional custom fields to display below the standard fields.
+     * Only visible when size is not 'xs' or 's'.
+     */
+    additionalFields?: JSXElement;
+    /**
+     * Content to display after the entire component.
+     * Position depends on orientation:
+     * - horizontal: displayed to the right
+     * - vertical: displayed at the bottom
+     */
+    after?: JSXElement;
+    /**
+     * Custom content to replace the default name block.
+     * When provided, replaces the default name rendering.
+     */
+    children?: JSXElement;
+    /**
+     * Ref to attach to the root element.
+     */
+    ref?: CommonRef;
+    /**
+     * Text component for rendering text content.
+     * Injected by the framework wrapper (React/Vue).
+     */
+    Text: (props: any) => any;
+    /**
+     * Avatar component for rendering the user avatar.
+     * Injected by the framework wrapper (React/Vue).
+     */
+    Avatar: (props: any) => any;
+}
+type UserBlockPropsToOverride = 'Avatar' | 'Text' | 'nameProps' | 'linkProps' | 'avatarProps';
+
 /**
  * Defines the props of the component.
  */
-interface UserBlockProps extends GenericProps$1, HasTheme$1 {
+interface UserBlockProps extends GenericProps$1, ReactToJSX<UserBlockProps$1, UserBlockPropsToOverride> {
     /** Props to pass to the avatar. */
     avatarProps?: Omit<AvatarProps, 'alt'>;
-    /** Additional fields used to describe the user. */
-    fields?: string[];
     /** Props to pass to the link wrapping the avatar thumbnail. */
     linkProps?: React__default.DetailedHTMLProps<React__default.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
-    /** Custom react component for the link (can be used to inject react router Link). */
-    linkAs?: 'a' | any;
-    /** Multiple action toolbar content. */
-    multipleActions?: ReactNode;
-    /** User name. */
-    name?: React__default.ReactNode;
-    /** Props to pass to the name block. */
-    nameProps?: GenericProps$1;
-    /** Orientation. */
-    orientation?: Orientation$1;
-    /** Simple action toolbar content. */
-    simpleAction?: ReactNode;
-    /** Size variant. */
-    size?: UserBlockSize;
     /** On click callback. */
     onClick?(): void;
     /** On mouse enter callback. */
     onMouseEnter?(): void;
     /** On mouse leave callback. */
     onMouseLeave?(): void;
-    /** Display additional fields below the original name and fields */
-    additionalFields?: React__default.ReactNode;
-    /** Display an additional element after the entire component. (to the right if orientation is horizontal, at the bottom if orientation is vertical) */
-    after?: React__default.ReactNode;
 }
 /**
  * UserBlock component.

package/index.js

@@ -16319,14 +16319,23 @@ const CLASSNAME = 'lumx-user-block';
 const {
   block,
   element
-} = classNames.bem(CLASSNAME);
+} = bem(CLASSNAME);
 
 /**
  * Component default props.
  */
 const DEFAULT_PROPS = {
-  orientation: Orientation$1.horizontal,
-  size: Size$1.m
+  orientation: Orientation.horizontal,
+  size: Size.m
+};
+const isUserBlockClickeable = ({
+  linkAs,
+  linkProps,
+  handleClick
+}) => {
+  const isLink = Boolean(linkProps?.href || linkAs);
+  const isClickable = !!handleClick || isLink;
+  return isClickable;
 };
 
 /**
@@ -16336,69 +16345,44 @@ const DEFAULT_PROPS = {
  * @param  ref   Component ref.
  * @return React element.
  */
-const UserBlock = forwardRef((props, ref) => {
-  const defaultTheme = useTheme() || Theme$1.light;
+const UserBlock$1 = props => {
   const {
     avatarProps,
     className,
     fields,
     linkProps,
     linkAs,
+    ref,
     multipleActions,
     name,
     nameProps,
-    onClick,
-    onMouseEnter,
-    onMouseLeave,
+    handleClick,
+    handleMouseEnter,
+    handleMouseLeave,
     orientation = DEFAULT_PROPS.orientation,
     simpleAction,
     size = DEFAULT_PROPS.size,
-    theme = defaultTheme,
+    theme,
     children,
     additionalFields,
     after,
+    Text,
+    Avatar,
     ...forwardedProps
   } = props;
   let componentSize = size;
 
   // Special case - When using vertical orientation force the size to be Sizes.l.
-  if (orientation === Orientation$1.vertical) {
-    componentSize = Size$1.l;
+  if (orientation === Orientation.vertical) {
+    componentSize = Size.l;
   }
-  const shouldDisplayActions = orientation === Orientation$1.vertical;
-  const isLink = Boolean(linkProps?.href || linkAs);
-  const isClickable = !!onClick || isLink;
-  const nameBlock = React__default.useMemo(() => {
-    if (isEmpty(name)) {
-      return null;
-    }
-    let NameComponent = 'span';
-    const nProps = {
-      ...nameProps,
-      className: classNames.join(element('name'), linkProps?.className, nameProps?.className)
-    };
-    if (isClickable) {
-      NameComponent = Link;
-      Object.assign(nProps, {
-        ...linkProps,
-        onClick,
-        linkAs,
-        color: ColorPalette$1.dark
-      });
-    }
-    // Disable avatar focus since the name block is the same link / same button.
-    if (avatarProps) {
-      set(avatarProps, ['thumbnailProps', 'tabIndex'], -1);
-    }
-    return /*#__PURE__*/jsx(NameComponent, {
-      ...nProps,
-      children: /*#__PURE__*/jsx(Text, {
-        as: "span",
-        children: name
-      })
-    });
-  }, [avatarProps, isClickable, linkAs, linkProps, name, nameProps, onClick]);
-  const shouldDisplayFields = componentSize !== Size$1.s && componentSize !== Size$1.xs;
+  const shouldDisplayActions = orientation === Orientation.vertical;
+  const isClickable = isUserBlockClickeable({
+    handleClick,
+    linkAs,
+    linkProps
+  });
+  const shouldDisplayFields = componentSize !== Size.s && componentSize !== Size.xs;
   const fieldsBlock = fields && shouldDisplayFields && /*#__PURE__*/jsx("div", {
     className: element('fields'),
     children: fields.map((field, idx) => /*#__PURE__*/jsx(Text, {
@@ -16410,26 +16394,26 @@ const UserBlock = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, block({
+    className: classnames(className, block({
       [`orientation-${orientation}`]: Boolean(orientation),
       [`size-${componentSize}`]: Boolean(componentSize),
       [`theme-${theme}`]: Boolean(theme),
       'is-clickable': isClickable
     })),
-    onMouseLeave: onMouseLeave,
-    onMouseEnter: onMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    onMouseEnter: handleMouseEnter,
     children: [avatarProps && /*#__PURE__*/jsx(Avatar, {
       linkAs: linkAs,
       linkProps: linkProps,
       alt: "",
       ...avatarProps,
-      className: classNames.join(element('avatar'), avatarProps.className),
+      className: classnames(element('avatar'), avatarProps.className),
       size: componentSize,
-      onClick: onClick,
+      onClick: handleClick,
       theme: theme
     }), (fields || name || children || additionalFields) && /*#__PURE__*/jsxs("div", {
       className: element('wrapper'),
-      children: [children || nameBlock, fieldsBlock, shouldDisplayFields ? additionalFields : null]
+      children: [children, fieldsBlock, shouldDisplayFields ? additionalFields : null]
     }), shouldDisplayActions && simpleAction && /*#__PURE__*/jsx("div", {
       className: element('action'),
       children: simpleAction
@@ -16441,6 +16425,87 @@ const UserBlock = forwardRef((props, ref) => {
       children: after
     }) : null]
   });
+};
+
+/**
+ * UserBlock component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const UserBlock = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme$1.light;
+  const {
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    theme = defaultTheme,
+    nameProps,
+    avatarProps,
+    name,
+    linkProps,
+    linkAs,
+    children,
+    ...forwardedProps
+  } = props;
+  const isClickable = isUserBlockClickeable({
+    linkAs,
+    linkProps,
+    handleClick: onClick
+  });
+
+  /**
+   * This logic needs to occur on the wrapper level, since core templates cannot manage
+   * the render of dynamically determined components. So `NameComponent`, if moved to core,
+   * it will return an `undefined`
+   */
+  const nameBlock = React__default.useMemo(() => {
+    if (isEmpty(name)) {
+      return null;
+    }
+    let NameComponent = 'span';
+    const nProps = {
+      ...nameProps,
+      className: classNames.join(element('name'), linkProps?.className, nameProps?.className)
+    };
+    if (isClickable) {
+      NameComponent = Link;
+      Object.assign(nProps, {
+        ...linkProps,
+        onClick,
+        linkAs,
+        color: ColorPalette$1.dark
+      });
+    }
+    // Disable avatar focus since the name block is the same link / same button.
+    if (avatarProps) {
+      set(avatarProps, ['thumbnailProps', 'tabIndex'], -1);
+    }
+    return /*#__PURE__*/jsx(NameComponent, {
+      ...nProps,
+      children: /*#__PURE__*/jsx(Text, {
+        as: "span",
+        children: name
+      })
+    });
+  }, [avatarProps, isClickable, linkAs, linkProps, name, nameProps, onClick]);
+  return UserBlock$1({
+    Avatar,
+    ref,
+    Text,
+    handleClick: onClick,
+    handleMouseEnter: onMouseEnter,
+    handleMouseLeave: onMouseLeave,
+    theme,
+    nameProps,
+    avatarProps,
+    name,
+    linkProps,
+    linkAs,
+    ...forwardedProps,
+    children: children || nameBlock
+  });
 });
 UserBlock.displayName = COMPONENT_NAME;
 UserBlock.className = CLASSNAME;