@lumx/react 3.6.3-alpha.0 → 3.6.3-alpha.2

package/index.d.ts

@@ -748,7 +748,7 @@ declare type FitAnchorWidth = ValueOf<typeof FitAnchorWidth>;
 /**
  * Defines the props of the component.
  */
-interface PopoverProps extends GenericProps {
+interface PopoverProps extends GenericProps, HasTheme {
     /** Reference to the DOM element used to set the position of the popover. */
     anchorRef: React.RefObject<HTMLElement>;
     /** Customize the root element. (Must accept ref forwarding and props forwarding!). */
@@ -1743,6 +1743,8 @@ interface NotificationProps extends GenericProps, HasTheme {
     onActionClick?(): void;
     /** On click callback. */
     onClick?(): void;
+    /** Whether the notification should be rendered into a DOM node that exists outside the DOM hierarchy of the parent component. */
+    usePortal?: boolean;
 }
 /**
  * Notification component.

package/index.js

@@ -6199,7 +6199,7 @@ const FitAnchorWidth = {
 /**
  * Arrow size (in pixel).
  */
-const ARROW_SIZE = 8;
+const ARROW_SIZE = 14;
 
 /**
  * Popper js modifier to fit popover min width to the anchor width.
@@ -6318,7 +6318,7 @@ function usePopoverStyle(_ref5) {
       name: 'arrow',
       options: {
         element: arrowElement,
-        padding: ARROW_SIZE
+        padding: ARROW_SIZE / 2
       }
     });
   }
@@ -6387,7 +6387,7 @@ function usePopoverStyle(_ref5) {
   };
 }
 
-const _excluded$m = ["anchorRef", "as", "children", "className", "closeOnClickAway", "closeOnEscape", "elevation", "focusElement", "hasArrow", "isOpen", "onClose", "parentElement", "usePortal", "focusAnchorOnClose", "withFocusTrap", "boundaryRef", "fitToAnchorWidth", "fitWithinViewportHeight", "offset", "placement", "style", "zIndex"];
+const _excluded$m = ["anchorRef", "as", "children", "className", "closeOnClickAway", "closeOnEscape", "elevation", "focusElement", "hasArrow", "isOpen", "onClose", "parentElement", "usePortal", "focusAnchorOnClose", "withFocusTrap", "boundaryRef", "fitToAnchorWidth", "fitWithinViewportHeight", "offset", "placement", "style", "theme", "zIndex"];
 
 /**
  * Defines the props of the component.
@@ -6442,6 +6442,7 @@ const _InnerPopover = /*#__PURE__*/forwardRef((props, ref) => {
       offset,
       placement,
       style,
+      theme,
       zIndex
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$m);
@@ -6521,6 +6522,7 @@ const _InnerPopover = /*#__PURE__*/forwardRef((props, ref) => {
     ref: mergeRefs(setPopperElement, ref, clickAwayRef, contentRef),
     className: classnames(className, handleBasicClasses({
       prefix: CLASSNAME$i,
+      theme,
       elevation: Math.min(elevation || 0, 5),
       position
     })),
@@ -6532,7 +6534,12 @@ const _InnerPopover = /*#__PURE__*/forwardRef((props, ref) => {
     ref: setArrowElement,
     className: `${CLASSNAME$i}__arrow`,
     style: styles.arrow
-  }), children)), usePortal) : null;
+  }, /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 14 14",
+    "aria-hidden": true
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M8 3.49C7.62 2.82 6.66 2.82 6.27 3.48L.04 14 14.04 14 8 3.49Z"
+  }))), children)), usePortal) : null;
 });
 _InnerPopover.displayName = COMPONENT_NAME$l;
 
@@ -8570,7 +8577,7 @@ const NOTIFICATION_CONFIGURATION = {
   }
 };
 
-const _excluded$M = ["actionLabel", "className", "content", "isOpen", "onActionClick", "onClick", "theme", "type", "zIndex"];
+const _excluded$M = ["actionLabel", "className", "content", "isOpen", "onActionClick", "onClick", "theme", "type", "zIndex", "usePortal", "style"];
 
 /**
  * Defines the props of the component.
@@ -8591,7 +8598,8 @@ const CLASSNAME$I = getRootClassName(COMPONENT_NAME$L);
  */
 const DEFAULT_PROPS$w = {
   theme: Theme.light,
-  zIndex: 9999
+  zIndex: 9999,
+  usePortal: true
 };
 
 /* eslint-disable react-hooks/rules-of-hooks, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
@@ -8612,7 +8620,9 @@ const Notification = /*#__PURE__*/forwardRef((props, ref) => {
       onClick,
       theme,
       type,
-      zIndex
+      zIndex,
+      usePortal,
+      style
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$M);
   if (!DOCUMENT) {
@@ -8632,7 +8642,10 @@ const Notification = /*#__PURE__*/forwardRef((props, ref) => {
     }
     evt.stopPropagation();
   };
-  return type && isVisible ? /*#__PURE__*/createPortal(
+  if (!type || !isVisible) {
+    return null;
+  }
+  const notification =
   /*#__PURE__*/
   // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
   React.createElement("div", _extends({
@@ -8646,9 +8659,9 @@ const Notification = /*#__PURE__*/forwardRef((props, ref) => {
       prefix: CLASSNAME$I
     })),
     onClick: onClick,
-    style: {
+    style: _objectSpread2(_objectSpread2({}, style), {}, {
       zIndex
-    }
+    })
   }), /*#__PURE__*/React.createElement("div", {
     className: `${CLASSNAME$I}__icon`
   }, /*#__PURE__*/React.createElement(Icon, {
@@ -8662,7 +8675,8 @@ const Notification = /*#__PURE__*/forwardRef((props, ref) => {
     emphasis: Emphasis.medium,
     theme: theme,
     onClick: handleCallback
-  }, /*#__PURE__*/React.createElement("span", null, actionLabel)))), document.body) : null;
+  }, /*#__PURE__*/React.createElement("span", null, actionLabel))));
+  return usePortal ? /*#__PURE__*/createPortal(notification, document.body) : notification;
 });
 Notification.displayName = COMPONENT_NAME$L;
 Notification.className = CLASSNAME$I;