@lumx/react 4.2.1-alpha.0 → 4.2.1-alpha.10

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, ColorVariant, DIALOG_TRANSITION_DURATION, Orientation, 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, Theme as Theme$1, AspectRatio, ColorVariant, 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';
@@ -717,6 +717,8 @@ const Size = {
   m: 'm',
   xl: 'xl',
   xxl: 'xxl'};
+const Orientation = {
+  horizontal: 'horizontal'};
 const Emphasis = {
   low: 'low',
   high: 'high'
@@ -1016,9 +1018,9 @@ const RawClickable$1 = props => {
     };
   }
   return /*#__PURE__*/jsx(Component, {
-    "aria-disabled": isAnyDisabled || undefined,
     ...forwardedProps,
     ...clickableProps,
+    "aria-disabled": isAnyDisabled || undefined,
     onClick: event => {
       if (isAnyDisabled) {
         event.stopPropagation();
@@ -6447,10 +6449,7 @@ const {
  * @param  props Component props.
  * @return JSX element.
  */
-const Flag$1 = (props, nestedComponents) => {
-  const {
-    Text
-  } = nestedComponents || {};
+const Flag$1 = props => {
   const {
     children,
     icon,
@@ -6458,6 +6457,7 @@ const Flag$1 = (props, nestedComponents) => {
     className,
     theme,
     truncate,
+    Text,
     ...forwardedProps
   } = props;
   const flagColor = color || (theme === Theme.light ? ColorPalette.dark : ColorPalette.light);
@@ -6474,7 +6474,7 @@ const Flag$1 = (props, nestedComponents) => {
       className: element$B('icon')
     }), /*#__PURE__*/jsx(Text, {
       as: "span",
-      truncate: !!props.truncate,
+      truncate: !!truncate,
       typography: "overline",
       className: element$B('label'),
       children: children
@@ -6495,8 +6495,7 @@ const Flag = forwardRef((props, ref) => {
     ...props,
     theme: props.theme || defaultTheme,
     ref,
-    children: props.label
-  }, {
+    children: props.label,
     Text
   });
 });
@@ -6504,6 +6503,10 @@ Flag.displayName = COMPONENT_NAME$Y;
 Flag.className = CLASSNAME$Y;
 Flag.defaultProps = DEFAULT_PROPS$P;
 
+/**
+ * Defines the props of the component.
+ */
+
 /**
  * Component display name.
  */
@@ -6515,19 +6518,16 @@ const COMPONENT_NAME$X = 'FlexBox';
 const CLASSNAME$X = 'lumx-flex-box';
 const {
   block: block$O
-} = classNames.bem(CLASSNAME$X);
+} = bem(CLASSNAME$X);
 
 /**
- * FlexBox component.
+ * Get FlexBox component props (className computation).
  *
  * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
+ * @return Computed props with className.
  */
-const FlexBox = forwardRef((props, ref) => {
+function getFlexBoxProps(props) {
   const {
-    as: Component = 'div',
-    children,
     className,
     fillSpace,
     gap,
@@ -6540,10 +6540,9 @@ const FlexBox = forwardRef((props, ref) => {
     ...forwardedProps
   } = props;
   const adjustedOrientation = orientation ?? (wrap || hAlign || vAlign ? Orientation.horizontal : null);
-  return /*#__PURE__*/jsx(Component, {
-    ref: ref,
+  return {
     ...forwardedProps,
-    className: classNames.join(className, block$O({
+    className: classnames(className, block$O({
       [`orientation-${adjustedOrientation}`]: Boolean(adjustedOrientation),
       [`v-align-${vAlign}`]: Boolean(vAlign),
       [`h-align-${hAlign}`]: Boolean(hAlign),
@@ -6552,7 +6551,26 @@ const FlexBox = forwardRef((props, ref) => {
       'fill-space': fillSpace,
       'no-shrink': noShrink,
       ...Object.fromEntries(castArray(marginAuto).filter(Boolean).map(align => [`margin-auto-${align}`, true]))
-    })),
+    }))
+  };
+}
+
+/**
+ * FlexBox component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const FlexBox = forwardRef((props, ref) => {
+  const {
+    as: Component = 'div',
+    children,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/jsx(Component, {
+    ref: ref,
+    ...getFlexBoxProps(forwardedProps),
     children: children
   });
 });
@@ -6578,7 +6596,7 @@ const {
  */
 const DEFAULT_PROPS$O = {
   gap: Size$1.big,
-  orientation: Orientation.horizontal
+  orientation: Orientation$1.horizontal
 };
 const Figure = noop.bind({});
 const isFigure = isComponentType(Figure);
@@ -6640,7 +6658,7 @@ const BaseGenericBlock = forwardRef((props, ref) => {
       children: [figure, sections.figureChildProps?.children]
     }), (sections.contentChildProps?.children || sections.otherChildren.length > 0) && /*#__PURE__*/jsxs(FlexBox, {
       ref: sections.contentChild?.ref,
-      orientation: Orientation.vertical,
+      orientation: Orientation$1.vertical,
       fillSpace: true,
       vAlign: forwardedProps.vAlign,
       hAlign: forwardedProps.hAlign,
@@ -6986,7 +7004,7 @@ const {
  * Component default props.
  */
 const DEFAULT_PROPS$L = {
-  orientation: Orientation.horizontal,
+  orientation: Orientation$1.horizontal,
   wrap: 'nowrap'
 };
 
@@ -7802,7 +7820,7 @@ function setupViewTransitionName(elementRef, name) {
   return {
     set() {
       const element = unref(elementRef);
-      if (!element) return;
+      if (!element || !name) return;
       originalName = element.style.viewTransitionName;
       element.style.viewTransitionName = name;
     },
@@ -7830,15 +7848,15 @@ async function startViewTransition({
   const {
     flushSync
   } = ReactDOM;
-  if (prefersReducedMotion || !start || !flushSync || !viewTransitionName?.source || !viewTransitionName?.target) {
+  if (prefersReducedMotion || !start || !flushSync || viewTransitionName && (!viewTransitionName?.source || !viewTransitionName?.target)) {
     // Skip, apply changes without a transition
     changes();
     return;
   }
 
   // Setup set/unset transition name on source & target
-  const sourceTransitionName = setupViewTransitionName(viewTransitionName.source, viewTransitionName.name);
-  const targetTransitionName = setupViewTransitionName(viewTransitionName.target, viewTransitionName.name);
+  const sourceTransitionName = setupViewTransitionName(viewTransitionName?.source, viewTransitionName?.name);
+  const targetTransitionName = setupViewTransitionName(viewTransitionName?.target, viewTransitionName?.name);
   sourceTransitionName.set();
 
   // Start view transition, apply changes & flush to DOM
@@ -8830,6 +8848,7 @@ const Message$1 = props => {
     kind,
     icon: customIcon,
     closeButtonProps,
+    ref,
     ...forwardedProps
   } = props;
   const {
@@ -8843,6 +8862,7 @@ const Message$1 = props => {
   const isCloseButtonDisplayed = hasBackground && kind === 'info' && onClick && closeButtonLabel;
   return /*#__PURE__*/jsxs("div", {
     ...forwardedProps,
+    ref: ref,
     className: classnames(className, block$B({
       [`color-${color}`]: Boolean(color),
       'has-background': hasBackground
@@ -8970,7 +8990,7 @@ Mosaic.className = CLASSNAME$E;
 Mosaic.defaultProps = DEFAULT_PROPS$D;
 
 const NavigationContext = /*#__PURE__*/createContext({
-  orientation: Orientation.vertical
+  orientation: Orientation$1.vertical
 });
 
 /**
@@ -9015,7 +9035,7 @@ const NavigationSection = forwardRef((props, ref) => {
     orientation
   } = useContext(NavigationContext) || {};
   const theme = useTheme();
-  const isDropdown = orientation === Orientation.horizontal;
+  const isDropdown = orientation === Orientation$1.horizontal;
   return /*#__PURE__*/jsxs("li", {
     className: classNames.join(className, sectionBlock(), itemBlock({
       [`theme-${theme}`]: Boolean(theme)
@@ -9065,7 +9085,7 @@ const NavigationSection = forwardRef((props, ref) => {
           id: sectionId,
           children: /*#__PURE__*/jsx(NavigationContext.Provider, {
             value: {
-              orientation: Orientation.vertical
+              orientation: Orientation$1.vertical
             },
             children: children
           })
@@ -9157,7 +9177,7 @@ const {
  * Component default props
  */
 const DEFAULT_PROPS$C = {
-  orientation: Orientation.vertical
+  orientation: Orientation$1.vertical
 };
 const Navigation = forwardRef((props, ref) => {
   const defaultTheme = useTheme() || Theme$1.light;
@@ -9404,7 +9424,7 @@ const {
  * Component default props.
  */
 const DEFAULT_PROPS$z = {
-  orientation: Orientation.horizontal
+  orientation: Orientation$1.horizontal
 };
 
 /**
@@ -14276,7 +14296,7 @@ const {
  * Component default props.
  */
 const DEFAULT_PROPS = {
-  orientation: Orientation.horizontal,
+  orientation: Orientation$1.horizontal,
   size: Size$1.m
 };
 
@@ -14313,10 +14333,10 @@ const UserBlock = forwardRef((props, ref) => {
   let componentSize = size;
 
   // Special case - When using vertical orientation force the size to be Sizes.l.
-  if (orientation === Orientation.vertical) {
+  if (orientation === Orientation$1.vertical) {
     componentSize = Size$1.l;
   }
-  const shouldDisplayActions = orientation === Orientation.vertical;
+  const shouldDisplayActions = orientation === Orientation$1.vertical;
   const isLink = Boolean(linkProps?.href || linkAs);
   const isClickable = !!onClick || isLink;
   const nameBlock = React__default.useMemo(() => {