@lumx/react 4.4.1-alpha.0 → 4.4.1-alpha.1

package/index.d.ts

@@ -1,4 +1,4 @@
-import { Kind as Kind$1, HorizontalAlignment as HorizontalAlignment$1, Size as Size$1, ColorPalette as ColorPalette$1, Theme as Theme$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, ColorPalette as ColorPalette$1, Size as Size$1, Theme as Theme$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';
 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, HasAriaDisabled as HasAriaDisabled$1, HasCloseMode, HasClassName as HasClassName$1, JSXElement as JSXElement$1, CommonRef as CommonRef$1, Falsy, HeadingElement as HeadingElement$1, HasRequiredLinkHref, HasAriaLabelOrLabelledBy } from '@lumx/core/js/types';
@@ -253,43 +253,12 @@ interface AutocompleteMultipleProps extends AutocompleteProps {
  */
 declare const AutocompleteMultiple: Comp<AutocompleteMultipleProps, HTMLDivElement>;
 
-/**
- * Avatar sizes.
- */
-type AvatarSize = Extract<Size$1, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
-/**
- * Defines the props of the component.
- */
-interface AvatarProps extends GenericProps$1, HasTheme$1 {
-    /** Action toolbar content. */
-    actions?: ReactNode;
-    /** Image alternative text. */
-    alt: string;
-    /** Badge. */
-    badge?: ReactElement;
-    /** Image URL. */
-    image: string;
-    /** Props to pass to the link wrapping the thumbnail. */
-    linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
-    /** Custom react component for the link (can be used to inject react router Link). */
-    linkAs?: 'a' | any;
-    /** On click callback. */
-    onClick?: MouseEventHandler<HTMLDivElement>;
-    /** On key press callback. */
-    onKeyPress?: KeyboardEventHandler<HTMLDivElement>;
-    /** Size variant. */
-    size?: AvatarSize;
-    /** Props to pass to the thumbnail (minus those already set by the Avatar props). */
-    thumbnailProps?: Omit<ThumbnailProps, 'image' | 'alt' | 'size' | 'theme' | 'align' | 'fillHeight' | 'variant' | 'aspectRatio'>;
+interface HasClassName {
+    /**
+     * Class name forwarded to the root element of the component.
+     */
+    className?: string;
 }
-/**
- * Avatar component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-declare const Avatar: Comp<AvatarProps, HTMLDivElement>;
 
 /**
  * Alignments.
@@ -478,13 +447,6 @@ type ColorVariant = ValueOf$1<typeof ColorVariant>;
 /** ColorPalette with all possible color variant combination */
 type ColorWithVariants = ColorPalette | Exclude<`${ColorPalette}-${ColorVariant}`, `light-D${number}` | `dark-D${number}`>;
 
-interface HasClassName {
-    /**
-     * Class name forwarded to the root element of the component.
-     */
-    className?: string;
-}
-
 interface HasTheme {
     /**
      * Theme adapting the component to light or dark background.
@@ -589,15 +551,23 @@ type FieldSelector<TObject, TValue> = keyof {
  */
 type Selector<TObject, TValue = string> = FieldSelector<TObject, TValue> | FunctionSelector<TObject, TValue>;
 
+/**
+ * Avatar sizes.
+ */
+type AvatarSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
 /**
  * Defines the props of the component.
  */
-interface BadgeProps$1 extends HasClassName {
-    /** Badge content. */
-    children?: JSXElement;
-    /** Color variant. */
-    color?: ColorPalette;
-    /** reference to the root element */
+interface AvatarProps$1 extends HasTheme, HasClassName {
+    /** Action toolbar content. */
+    actions?: JSXElement;
+    /** Badge. */
+    badge?: JSXElement;
+    /** Image URL. */
+    image: JSXElement;
+    /** Size variant. */
+    size?: AvatarSize;
+    /** Props to pass to the thumbnail (minus those already set by the Avatar props). */
     ref?: CommonRef;
 }
 
@@ -610,6 +580,46 @@ interface BadgeProps$1 extends HasClassName {
  */
 type ReactToJSX<Props, OmitProps extends keyof Props = never> = Omit<Props, PropsToOverride | OmitProps>;
 
+/**
+ * Defines the props of the component.
+ */
+interface AvatarProps extends GenericProps$1, ReactToJSX<AvatarProps$1, 'actions' | 'badge' | 'image'> {
+    /** Action toolbar content. */
+    actions?: ReactNode;
+    /** Props to pass to the link wrapping the thumbnail. */
+    linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
+    /** Custom react component for the link (can be used to inject react router Link). */
+    linkAs?: 'a' | any;
+    /** On click callback. */
+    onClick?: MouseEventHandler<HTMLDivElement>;
+    /** On key press callback. */
+    onKeyPress?: KeyboardEventHandler<HTMLDivElement>;
+    /** Image alternative text. */
+    alt: string;
+    /** Props to pass to the thumbnail (minus those already set by the Avatar props). */
+    thumbnailProps?: Omit<ThumbnailProps, 'image' | 'alt' | 'size' | 'theme' | 'align' | 'fillHeight' | 'variant' | 'aspectRatio'>;
+}
+/**
+ * Avatar component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const Avatar: Comp<AvatarProps, HTMLDivElement>;
+
+/**
+ * Defines the props of the component.
+ */
+interface BadgeProps$1 extends HasClassName {
+    /** Badge content. */
+    children?: JSXElement;
+    /** Color variant. */
+    color?: ColorPalette;
+    /** reference to the root element */
+    ref?: CommonRef;
+}
+
 /**
  * Defines the props of the component.
  */
@@ -1556,7 +1566,7 @@ declare const GenericBlockGapSize: Pick<{
     readonly medium: "medium";
     readonly big: "big";
     readonly huge: "huge";
-}, "medium" | "tiny" | "regular" | "big" | "huge">;
+}, "tiny" | "regular" | "medium" | "big" | "huge">;
 type GenericBlockGapSize = ValueOf$1<typeof GenericBlockGapSize>;
 
 interface GenericBlockProps extends FlexBoxProps {

package/index.js

@@ -1,4 +1,4 @@
-import { Kind as Kind$1, Size as Size$1, ColorPalette as ColorPalette$1, Emphasis as Emphasis$1, Theme as Theme$1, AspectRatio as AspectRatio$1, ColorVariant, DIALOG_TRANSITION_DURATION, Orientation as Orientation$1, Alignment, NOTIFICATION_TRANSITION_DURATION, TOOLTIP_LONG_PRESS_DELAY, TOOLTIP_HOVER_DELAY } from '@lumx/core/js/constants';
+import { Kind as Kind$1, Size as Size$1, ColorPalette as ColorPalette$1, Emphasis as Emphasis$1, ColorVariant, Theme as Theme$1, AspectRatio as AspectRatio$1, DIALOG_TRANSITION_DURATION, Orientation as Orientation$1, Alignment, NOTIFICATION_TRANSITION_DURATION, TOOLTIP_LONG_PRESS_DELAY, TOOLTIP_HOVER_DELAY } from '@lumx/core/js/constants';
 export * from '@lumx/core/js/constants';
 export * from '@lumx/core/js/types';
 import * as React from 'react';
@@ -553,149 +553,6 @@ AutocompleteMultiple.displayName = COMPONENT_NAME$1i;
 AutocompleteMultiple.className = CLASSNAME$1h;
 AutocompleteMultiple.defaultProps = DEFAULT_PROPS$18;
 
-/**
- * Component display name.
- */
-const COMPONENT_NAME$1h = 'Avatar';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME$1g = 'lumx-avatar';
-const {
-  block: block$13,
-  element: element$N
-} = classNames.bem(CLASSNAME$1g);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS$17 = {
-  size: Size$1.m
-};
-
-/**
- * Avatar component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const Avatar = forwardRef((props, ref) => {
-  const defaultTheme = useTheme() || Theme$1.light;
-  const {
-    actions,
-    alt,
-    badge,
-    className,
-    image,
-    linkProps,
-    linkAs,
-    onClick,
-    onKeyPress,
-    size = DEFAULT_PROPS$17.size,
-    theme = defaultTheme,
-    thumbnailProps,
-    ...forwardedProps
-  } = props;
-  return /*#__PURE__*/jsxs("div", {
-    ref: ref,
-    ...forwardedProps,
-    className: classNames.join(className, block$13({
-      [`size-${size}`]: Boolean(size),
-      [`theme-${theme}`]: Boolean(theme)
-    })),
-    children: [/*#__PURE__*/jsx(Thumbnail, {
-      linkProps: linkProps,
-      linkAs: linkAs,
-      className: element$N('thumbnail'),
-      onClick: onClick,
-      onKeyPress: onKeyPress,
-      ...thumbnailProps,
-      aspectRatio: AspectRatio$1.square,
-      size: size,
-      image: image,
-      alt: alt,
-      theme: theme
-    }), actions && /*#__PURE__*/jsx("div", {
-      className: element$N('actions'),
-      children: actions
-    }), badge && /*#__PURE__*/jsx("div", {
-      className: element$N('badge'),
-      children: badge
-    })]
-  });
-});
-Avatar.displayName = COMPONENT_NAME$1h;
-Avatar.className = CLASSNAME$1g;
-Avatar.defaultProps = DEFAULT_PROPS$17;
-
-/**
- * Alignments.
- */
-const Theme = {
-  light: 'light',
-  dark: 'dark'
-};
-const Size = {
-  xxs: 'xxs',
-  xs: 'xs',
-  s: 's',
-  m: 'm',
-  xl: 'xl',
-  xxl: 'xxl'};
-const Orientation = {
-  horizontal: 'horizontal'};
-const Emphasis = {
-  low: 'low',
-  high: 'high'
-};
-/**
- * List of typographies that can't be customized.
- */
-const TypographyInterface = {
-  overline: 'overline',
-  caption: 'caption',
-  body1: 'body1',
-  body2: 'body2',
-  subtitle1: 'subtitle1',
-  subtitle2: 'subtitle2',
-  title: 'title',
-  headline: 'headline',
-  display1: 'display1'
-};
-/**
- * List of all typographies.
- */
-const Typography = {
-  ...TypographyInterface};
-/**
- * All available aspect ratios.
- */
-const AspectRatio = {
-  /** Intrinsic content ratio. */
-  original: 'original'};
-/**
- * Semantic info about the purpose of the component
- */
-const Kind = {
-  info: 'info',
-  success: 'success',
-  warning: 'warning',
-  error: 'error'
-};
-/**
- * See SCSS variable $lumx-color-palette
- */
-const ColorPalette = {
-  primary: 'primary',
-  blue: 'blue',
-  dark: 'dark',
-  green: 'green',
-  yellow: 'yellow',
-  red: 'red',
-  light: 'light'};
-
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 }
@@ -856,7 +713,7 @@ function modifier$1(baseName, modifiers) {
  * block('button', { active: true, disabled: false }); // 'button button--active'
  */
 
-function block$12(baseName, modifiersOrAdditionalClasses, additionalClasses) {
+function block$13(baseName, modifiersOrAdditionalClasses, additionalClasses) {
   let modifiers;
   let classes;
   if (Array.isArray(modifiersOrAdditionalClasses)) {
@@ -891,11 +748,11 @@ function block$12(baseName, modifiersOrAdditionalClasses, additionalClasses) {
  * element('my-button', 'icon', { active: true }); // 'my-button__icon my-button__icon--active'
  */
 
-function element$M(baseClass, elem, modifiersOrAdditionalClasses, additionalClasses) {
+function element$N(baseClass, elem, modifiersOrAdditionalClasses, additionalClasses) {
   if (Array.isArray(modifiersOrAdditionalClasses)) {
-    return block$12(`${baseClass}__${elem}`, modifiersOrAdditionalClasses);
+    return block$13(`${baseClass}__${elem}`, modifiersOrAdditionalClasses);
   }
-  return block$12(`${baseClass}__${elem}`, modifiersOrAdditionalClasses, additionalClasses);
+  return block$13(`${baseClass}__${elem}`, modifiersOrAdditionalClasses, additionalClasses);
 }
 
 /**
@@ -904,15 +761,15 @@ function element$M(baseClass, elem, modifiersOrAdditionalClasses, additionalClas
 function bem(baseName) {
   function blockFn(modifiersOrAdditionalClasses, additionalClasses) {
     if (Array.isArray(modifiersOrAdditionalClasses)) {
-      return block$12(baseName, modifiersOrAdditionalClasses);
+      return block$13(baseName, modifiersOrAdditionalClasses);
     }
-    return block$12(baseName, modifiersOrAdditionalClasses, additionalClasses);
+    return block$13(baseName, modifiersOrAdditionalClasses, additionalClasses);
   }
   function elementFn(elem, modifiersOrAdditionalClasses, additionalClasses) {
     if (Array.isArray(modifiersOrAdditionalClasses)) {
-      return element$M(baseName, elem, modifiersOrAdditionalClasses);
+      return element$N(baseName, elem, modifiersOrAdditionalClasses);
     }
-    return element$M(baseName, elem, modifiersOrAdditionalClasses, additionalClasses);
+    return element$N(baseName, elem, modifiersOrAdditionalClasses, additionalClasses);
   }
   return {
     block: blockFn,
@@ -921,6 +778,179 @@ function bem(baseName) {
   };
 }
 
+/**
+ * Alignments.
+ */
+const Theme = {
+  light: 'light',
+  dark: 'dark'
+};
+const Size = {
+  xxs: 'xxs',
+  xs: 'xs',
+  s: 's',
+  m: 'm',
+  xl: 'xl',
+  xxl: 'xxl'};
+const Orientation = {
+  horizontal: 'horizontal'};
+const Emphasis = {
+  low: 'low',
+  high: 'high'
+};
+/**
+ * List of typographies that can't be customized.
+ */
+const TypographyInterface = {
+  overline: 'overline',
+  caption: 'caption',
+  body1: 'body1',
+  body2: 'body2',
+  subtitle1: 'subtitle1',
+  subtitle2: 'subtitle2',
+  title: 'title',
+  headline: 'headline',
+  display1: 'display1'
+};
+/**
+ * List of all typographies.
+ */
+const Typography = {
+  ...TypographyInterface};
+/**
+ * All available aspect ratios.
+ */
+const AspectRatio = {
+  /** Intrinsic content ratio. */
+  original: 'original'};
+/**
+ * Semantic info about the purpose of the component
+ */
+const Kind = {
+  info: 'info',
+  success: 'success',
+  warning: 'warning',
+  error: 'error'
+};
+/**
+ * See SCSS variable $lumx-color-palette
+ */
+const ColorPalette = {
+  primary: 'primary',
+  blue: 'blue',
+  dark: 'dark',
+  green: 'green',
+  yellow: 'yellow',
+  red: 'red',
+  light: 'light'};
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$1h = 'Avatar';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$1g = 'lumx-avatar';
+const {
+  block: block$12,
+  element: element$M
+} = bem(CLASSNAME$1g);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS$17 = {
+  size: Size.m
+};
+
+/**
+ * Avatar component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Avatar$1 = props => {
+  const {
+    actions,
+    badge,
+    className,
+    image,
+    size = DEFAULT_PROPS$17.size,
+    theme,
+    ref,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/jsxs("div", {
+    ref: ref,
+    ...forwardedProps,
+    className: classnames(className, block$12({
+      [`size-${size}`]: Boolean(size),
+      [`theme-${theme}`]: Boolean(theme)
+    })),
+    children: [image, actions && /*#__PURE__*/jsx("div", {
+      className: element$M('actions'),
+      children: actions
+    }), badge && /*#__PURE__*/jsx("div", {
+      className: element$M('badge'),
+      children: badge
+    })]
+  });
+};
+
+/**
+ * Avatar component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Avatar = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme$1.light;
+  const {
+    actions,
+    alt,
+    badge,
+    className,
+    image,
+    linkProps,
+    linkAs,
+    onClick,
+    onKeyPress,
+    size = DEFAULT_PROPS$17.size,
+    theme = defaultTheme,
+    thumbnailProps,
+    ...forwardedProps
+  } = props;
+  return Avatar$1({
+    ...forwardedProps,
+    className,
+    theme,
+    ref,
+    actions,
+    badge,
+    size,
+    image: /*#__PURE__*/jsx(Thumbnail, {
+      linkProps: linkProps,
+      linkAs: linkAs,
+      className: element$M('thumbnail'),
+      onClick: onClick,
+      onKeyPress: onKeyPress,
+      ...thumbnailProps,
+      aspectRatio: AspectRatio$1.square,
+      size: size,
+      image: image,
+      alt: alt,
+      theme: theme
+    })
+  });
+});
+Avatar.displayName = COMPONENT_NAME$1h;
+Avatar.className = CLASSNAME$1g;
+Avatar.defaultProps = DEFAULT_PROPS$17;
+
 /**
  * Component display name.
  */
@@ -6352,7 +6382,7 @@ function usePopoverStyle({
     }
 
     // Arrow middleware
-    if (hasArrow) {
+    if (hasArrow && arrowElement) {
       mw.push(arrow({
         element: arrowElement,
         padding: ARROW_SIZE$1 / 2
@@ -6395,10 +6425,6 @@ function usePopoverStyle({
       zIndex
     };
   }, [style, floatingStyles, zIndex]);
-
-  // Stable setter wrapping useState setter (already stable but typed for consistency)
-  const setPopperElementCallback = useCallback(el => setPopperElement(el), []);
-  const setArrowElementCallback = useCallback(el => setArrowElement(el), []);
   return {
     styles: {
       arrow: arrowStyles,
@@ -6406,8 +6432,8 @@ function usePopoverStyle({
     },
     isPositioned,
     position: position,
-    setArrowElement: setArrowElementCallback,
-    setPopperElement: setPopperElementCallback,
+    setArrowElement,
+    setPopperElement,
     popperElement
   };
 }
@@ -6508,7 +6534,6 @@ const _InnerPopover = forwardRef((props, ref) => {
         [`theme-${theme}`]: Boolean(theme),
         [`elevation-${adjustedElevation}`]: Boolean(adjustedElevation),
         [`position-${position}`]: Boolean(position)
-        //'is-initializing': !isPositioned,
       })),
       style: styles.popover,
       "data-popper-placement": position,
@@ -15048,9 +15073,7 @@ const Tooltip = forwardRef((props, ref) => {
   const [anchorElement, setAnchorElement] = useState(null);
   const {
     floatingStyles,
-    placement: resolvedPlacement,
-    isPositioned,
-    update
+    placement: resolvedPlacement
   } = useFloating({
     placement: placement,
     whileElementsMounted: autoUpdate,
@@ -15076,12 +15099,6 @@ const Tooltip = forwardRef((props, ref) => {
     label,
     ariaLinkMode: ariaLinkMode
   });
-
-  // Update on open
-  // React.useEffect(() => {
-  //    if (isOpen || popperElement) update?.();
-  // }, [isOpen, update, popperElement]);
-
   const labelLines = label ? label.split('\n') : [];
   const tooltipRef = useMergeRefs(ref, setPopperElement, onPopperMount);
   return /*#__PURE__*/jsxs(Fragment, {
@@ -15095,7 +15112,6 @@ const Tooltip = forwardRef((props, ref) => {
         role: "tooltip",
         className: classNames.join(className, block$2({
           [`position-${position}`]: Boolean(position)
-          //'is-initializing': !isPositioned,
         }), isHidden && classNames.visuallyHidden()),
         style: {
           ...(isHidden ? undefined : floatingStyles),