@lumx/react 4.2.1-alpha.1 → 4.2.1-alpha.2

package/index.js

@@ -1018,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();
@@ -6449,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,
@@ -6460,6 +6457,7 @@ const Flag$1 = (props, nestedComponents) => {
     className,
     theme,
     truncate,
+    Text,
     ...forwardedProps
   } = props;
   const flagColor = color || (theme === Theme.light ? ColorPalette.dark : ColorPalette.light);
@@ -6476,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
@@ -6497,8 +6495,7 @@ const Flag = forwardRef((props, ref) => {
     ...props,
     theme: props.theme || defaultTheme,
     ref,
-    children: props.label
-  }, {
+    children: props.label,
     Text
   });
 });
@@ -7823,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;
     },
@@ -7851,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
@@ -8851,6 +8848,7 @@ const Message$1 = props => {
     kind,
     icon: customIcon,
     closeButtonProps,
+    ref,
     ...forwardedProps
   } = props;
   const {
@@ -8864,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
@@ -12076,7 +12075,7 @@ const InternalSlideshowControls = forwardRef((props, ref) => {
       className: element$9('navigation'),
       color: theme === Theme$1.dark ? 'light' : 'dark',
       emphasis: Emphasis$1.low,
-      onClick: onPreviousClick
+      onClick: () => onPreviousClick?.()
     }), /*#__PURE__*/jsx("div", {
       ref: paginationRef,
       className: element$9('pagination'),
@@ -12123,7 +12122,7 @@ const InternalSlideshowControls = forwardRef((props, ref) => {
       className: element$9('navigation'),
       color: theme === Theme$1.dark ? 'light' : 'dark',
       emphasis: Emphasis$1.low,
-      onClick: onNextClick
+      onClick: () => onNextClick?.()
     })]
   });
 });