@telia-ace/widget-ui 1.0.13 → 1.0.14

package/dist/components/index.d.ts

@@ -56,3 +56,4 @@ export { default as Typography } from './typography';
 export type { Props as TypographyProps } from './typography';
 export { default as WidgetLink } from './widget-link';
 export type { Props as WidgetLinkProps } from './widget-link';
+export { WidgetOverlayOutlet } from './widget-overlay-outlet';

package/dist/components/portal.d.ts

@@ -1,7 +1,8 @@
-import React from 'react';
+import { FC } from 'react';
 export declare type Props = {
     elementId?: string;
+    parent?: Element | HTMLElement;
     children?: any;
 };
-declare const Portal: React.FC<Props>;
+declare const Portal: FC<Props>;
 export default Portal;

package/dist/components/widget-overlay-outlet.d.ts

@@ -0,0 +1,8 @@
+import React, { ReactNode } from 'react';
+declare type Props = {
+    portalId: string;
+    className?: string;
+    children?: ReactNode;
+};
+export declare const WidgetOverlayOutlet: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/index.d.ts

@@ -1,9 +1,9 @@
-import { AnchorLink, Button, ButtonProps, Checkbox, CheckboxProps, Confirm, DateFormats, Drawer, DrawerAnimationType, Dropdown, DropdownProps, Empty, EmptyProps, Grid, GridProps, Html, HtmlIconProps, HtmlParseInstruction, HtmlProps, Icon, IconProps, Input, InputProps, ItemList, ItemListProps, ItemRenderer, ItemTree, ItemTreeProps, Lightbox, LightboxProps, Link, LinkProps, List, ListProps, Modal, ModalProps, NotFound, NotFoundProps, Overlay, OverlayProps, Paragraph, ParagraphProps, Portal, PortalProps, RouteLink, RouteLinkProps, Symbol, SymbolBadge, SymbolBadgeProps, TabStop, TabStopProps, Text, TextLink, TextLinkProps, TextProps, Timestamp, TimestampProps, Tooltip, TooltipProps, TransitionComponent, TransitionComponentProps, Typography, TypographyProps, WidgetLink, WidgetLinkProps } from './components';
+import { AnchorLink, Button, ButtonProps, Checkbox, CheckboxProps, Confirm, DateFormats, Drawer, DrawerAnimationType, Dropdown, DropdownProps, Empty, EmptyProps, Grid, GridProps, Html, HtmlIconProps, HtmlParseInstruction, HtmlProps, Icon, IconProps, Input, InputProps, ItemList, ItemListProps, ItemRenderer, ItemTree, ItemTreeProps, Lightbox, LightboxProps, Link, LinkProps, List, ListProps, Modal, ModalProps, NotFound, NotFoundProps, Overlay, OverlayProps, Paragraph, ParagraphProps, Portal, PortalProps, RouteLink, RouteLinkProps, Symbol, SymbolBadge, SymbolBadgeProps, TabStop, TabStopProps, Text, TextLink, TextLinkProps, TextProps, Timestamp, TimestampProps, Tooltip, TooltipProps, TransitionComponent, TransitionComponentProps, Typography, TypographyProps, WidgetLink, WidgetLinkProps, WidgetOverlayOutlet } from './components';
 import { ColumnContext, ComponentNodeContext, ComponentPropertyContext, ContainerContext, RoutingContext } from './contexts';
 import { default as createReactComponent } from './create-react-component';
 import { DispatchAction, useAction, useChildren, useColumns, useComponent, useComponentDescriptor, useComponentNode, useComponentPlatform, useContainer, useContext, useDispatch, useEventListener, useEvents, useIsMounted, useKeyPress, useLayout, usePrevious, useProperties, useRenderState, useRouteData, useRouter, useScroll, useSettings, useToggle, useTransitionEnd, useUniqueMenu, useWidgetEvent } from './hooks';
 import { borderTabStyle, buttonCss, contentBox, genericHtml, invertedHoverButton, itemList, linkTabStyle, list, paddedBorderTabStyle, StyledText } from './styles';
 import { browser, Browsers, convertToStringAttributes, createEmptyComponent, defaultRenderInstructions, embeddedLinkMapper, filterCssProps, filterCssPropsStyle, genericHashLink, GenericHashLinkProps, headingElement, processHtmlString, transitionComposer, TransitionStateSettings } from './utils';
-export { AnchorLink, borderTabStyle, Button, buttonCss, Checkbox, ColumnContext, ComponentNodeContext, ComponentPropertyContext, Confirm, ContainerContext, contentBox, createEmptyComponent, createReactComponent, DateFormats, Drawer, DrawerAnimationType, Dropdown, filterCssProps, filterCssPropsStyle, Grid, headingElement, Html, Icon, Input, genericHtml, invertedHoverButton, ItemList, ItemTree, Lightbox, Link, linkTabStyle, List, paddedBorderTabStyle, RoutingContext, SymbolBadge, Text, TextLink, TransitionComponent, transitionComposer, Typography, useChildren, useColumns, useComponent, useComponentDescriptor, useComponentNode, useComponentPlatform, useContainer, useContext, useDispatch, useIsMounted, useLayout, useProperties, useRenderState, useRouteData, useRouter, useScroll, useTransitionEnd, useAction, useEventListener, useEvents, useKeyPress, usePrevious, useSettings, useToggle, useUniqueMenu, useWidgetEvent, Empty, Modal, NotFound, Overlay, Paragraph, Portal, RouteLink, TabStop, Timestamp, Tooltip, WidgetLink, itemList, list, StyledText, browser, convertToStringAttributes, defaultRenderInstructions, embeddedLinkMapper, genericHashLink, processHtmlString, };
+export { AnchorLink, borderTabStyle, Button, buttonCss, Checkbox, ColumnContext, ComponentNodeContext, ComponentPropertyContext, Confirm, ContainerContext, contentBox, createEmptyComponent, createReactComponent, DateFormats, Drawer, DrawerAnimationType, Dropdown, filterCssProps, filterCssPropsStyle, Grid, headingElement, Html, Icon, Input, genericHtml, invertedHoverButton, ItemList, ItemTree, Lightbox, Link, linkTabStyle, List, paddedBorderTabStyle, RoutingContext, SymbolBadge, Text, TextLink, TransitionComponent, transitionComposer, Typography, useChildren, useColumns, useComponent, useComponentDescriptor, useComponentNode, useComponentPlatform, useContainer, useContext, useDispatch, useIsMounted, useLayout, useProperties, useRenderState, useRouteData, useRouter, useScroll, useTransitionEnd, useAction, useEventListener, useEvents, useKeyPress, usePrevious, useSettings, useToggle, useUniqueMenu, useWidgetEvent, Empty, Modal, NotFound, Overlay, Paragraph, Portal, RouteLink, TabStop, Timestamp, Tooltip, WidgetLink, WidgetOverlayOutlet, itemList, list, StyledText, browser, convertToStringAttributes, defaultRenderInstructions, embeddedLinkMapper, genericHashLink, processHtmlString, };
 export type { ButtonProps, CheckboxProps, DropdownProps, EmptyProps, GridProps, HtmlIconProps, HtmlParseInstruction, HtmlProps, IconProps, InputProps, ItemListProps, ItemRenderer, ItemTreeProps, LightboxProps, LinkProps, ListProps, ModalProps, NotFoundProps, OverlayProps, ParagraphProps, PortalProps, RouteLinkProps, Symbol, SymbolBadgeProps, TabStopProps, TextLinkProps, TextProps, TimestampProps, TooltipProps, TransitionComponentProps, TypographyProps, WidgetLinkProps, Browsers, GenericHashLinkProps, TransitionStateSettings, };
 export type { DispatchAction };

package/dist/index.js

@@ -31,7 +31,7 @@ var __objRest = (source, exclude) => {
 };
 import styled, { css } from "styled-components";
 import { kebabCase, appendClassNames, uuid, removeNullAndUndefinedValues } from "@telia-ace/widget-utilities";
-import React, { forwardRef, createContext, useContext as useContext$1, useState, useEffect, useRef, useCallback, useImperativeHandle, Component, lazy } from "react";
+import React, { forwardRef, createContext, useContext as useContext$1, useState, useEffect, useRef, useCallback, useImperativeHandle, Component, useMemo, lazy } from "react";
 import { CSSTransition, Transition } from "react-transition-group";
 import { Container, WidgetState } from "@webprovisions/platform";
 import { ComponentPlatform, asDescriptor, createEventSubscriber, ComponentQuery, WidgetRenderState, extendComponent } from "@telia-ace/widget-core";
@@ -1168,17 +1168,21 @@ const genericHtml = css`
         margin: 0;
     }
 `;
-const Portal = ({ elementId = "humany-portal-elements", children }) => {
-  const [container] = React.useState(() => {
+const Portal = ({
+  elementId = "humany-portal-elements",
+  parent = document.body,
+  children
+}) => {
+  const [container] = useState(() => {
     const el = document.getElementById(elementId) || document.createElement("div");
     el.id = elementId;
     return el;
   });
   useEffect(() => {
-    document.body.appendChild(container);
+    parent.appendChild(container);
     return () => {
       if (container.childElementCount <= 1) {
-        document.body.removeChild(container);
+        parent.removeChild(container);
       }
     };
   }, [container]);
@@ -1760,7 +1764,7 @@ const Drawer = ({
     "aria-expanded": visible
   }));
 };
-const Wrapper$4 = styled.div`
+const Wrapper$5 = styled.div`
     font-family: ${(p) => {
   var _a;
   return (_a = p.theme.fonts) == null ? void 0 : _a.type;
@@ -1802,7 +1806,7 @@ const Header$1 = styled(Typography)`
 const AnimationBase = css`
     transition: ${(p) => p.duration}ms;
 `;
-const WrapperWithSlideInBottom = styled(Wrapper$4)`
+const WrapperWithSlideInBottom = styled(Wrapper$5)`
     max-height: 0;
     ${AnimationBase}
 
@@ -1820,7 +1824,7 @@ const WrapperWithSlideInBottom = styled(Wrapper$4)`
         max-height: 0;
     }
 `;
-const WrapperWithSlideInRight = styled(Wrapper$4)`
+const WrapperWithSlideInRight = styled(Wrapper$5)`
     ${AnimationBase}
     transform: translateX(100%);
     height: ${(p) => p.fullScreen ? "100%" : "auto"};
@@ -1839,7 +1843,7 @@ const WrapperWithSlideInRight = styled(Wrapper$4)`
         transform: translateX(100%);
     }
 `;
-const WrapperWithSlideInLeft = styled(Wrapper$4)`
+const WrapperWithSlideInLeft = styled(Wrapper$5)`
     ${AnimationBase}
     transform: translateX(-100%);
     height: ${(p) => p.fullScreen ? "100%" : "auto"};
@@ -1858,7 +1862,7 @@ const WrapperWithSlideInLeft = styled(Wrapper$4)`
         transform: translateX(-100%);
     }
 `;
-const WrapperWithSlideInTop = styled(Wrapper$4)`
+const WrapperWithSlideInTop = styled(Wrapper$5)`
     ${AnimationBase}
     bottom: unset;
     top: 0;
@@ -2011,9 +2015,9 @@ const StyledDropdown = styled.div`
 `;
 const Empty = (_k) => {
   var other = __objRest(_k, []);
-  return /* @__PURE__ */ React.createElement(Wrapper$3, __spreadValues({}, other));
+  return /* @__PURE__ */ React.createElement(Wrapper$4, __spreadValues({}, other));
 };
-const Wrapper$3 = styled.div`
+const Wrapper$4 = styled.div`
     display: none;
 `;
 var grid = forwardRef((_l, ref) => {
@@ -2268,14 +2272,14 @@ const Overlay = (_z) => {
     classNames: "humany-overlay-transition",
     unmountOnExit: true,
     timeout: duration
-  }, /* @__PURE__ */ React.createElement(Portal, null, /* @__PURE__ */ React.createElement(Wrapper$2, __spreadValues({
+  }, /* @__PURE__ */ React.createElement(Portal, null, /* @__PURE__ */ React.createElement(Wrapper$3, __spreadValues({
     className: "humany-overlay",
     duration,
     ref,
     onClick: onOverlayClick
   }, other), children)));
 };
-const Wrapper$2 = styled.div`
+const Wrapper$3 = styled.div`
     background: rgba(0, 0, 0, 0.6);
     min-width: 100%;
     min-height: 100%;
@@ -2538,7 +2542,7 @@ const Modal = forwardRef((_F, ref) => {
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Overlay, {
     visible,
     onClick: overlayClick
-  }, /* @__PURE__ */ React.createElement(Wrapper$1, __spreadProps(__spreadValues({
+  }, /* @__PURE__ */ React.createElement(Wrapper$2, __spreadProps(__spreadValues({
     className: appendClassNames(className, "humany-modal", `humany-modal-${id.current}`),
     css: css2,
     tabIndex: -1
@@ -2557,7 +2561,7 @@ const Modal = forwardRef((_F, ref) => {
     }
   }));
 });
-const Wrapper$1 = styled.div`
+const Wrapper$2 = styled.div`
     font-family: ${(p) => {
   var _a;
   return (_a = p.theme.fonts) == null ? void 0 : _a.type;
@@ -2692,7 +2696,7 @@ const NotFound = ({
   suggestionHeader = "",
   suggestion = ""
 }) => {
-  return /* @__PURE__ */ React.createElement(Wrapper, null, /* @__PURE__ */ React.createElement(Status, null, /* @__PURE__ */ React.createElement(Typography, {
+  return /* @__PURE__ */ React.createElement(Wrapper$1, null, /* @__PURE__ */ React.createElement(Status, null, /* @__PURE__ */ React.createElement(Typography, {
     variant: "h2"
   }, "404")), /* @__PURE__ */ React.createElement(Header, null, /* @__PURE__ */ React.createElement(Typography, {
     variant: "h3"
@@ -2702,7 +2706,7 @@ const NotFound = ({
     text: link
   })), /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement("span", null, suggestionHeader), /* @__PURE__ */ React.createElement("ul", null, /* @__PURE__ */ React.createElement("li", null, suggestion))));
 };
-const Wrapper = styled.div`
+const Wrapper$1 = styled.div`
     display: flex;
     flex-wrap: wrap;
 `;
@@ -3051,6 +3055,38 @@ var WidgetLink = forwardRef((_L, ref) => {
     ref
   }), children);
 });
+const WidgetOverlayOutlet = forwardRef(({ portalId = "humany-widget-overlay-portal", className, children }, ref) => {
+  const container = useContainer();
+  const parentElement = useMemo(() => {
+    if (!container)
+      return null;
+    const widgetDOMElement = container.get("widgetDOMElement");
+    if (!widgetDOMElement || !widgetDOMElement.childElementCount)
+      return null;
+    return widgetDOMElement.children[0];
+  }, [container]);
+  if (!parentElement) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(Portal, {
+    elementId: portalId,
+    parent: parentElement
+  }, /* @__PURE__ */ React.createElement(Wrapper, {
+    className: appendClassNames("humany-widget-overlay-outlet", className),
+    ref
+  }, children));
+});
+const Wrapper = styled.div`
+    background-color: #ffffff;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 10;
+    width: 100%;
+    height: 100%;
+`;
 const createReactComponent = (container, type, reactComponent, fn, options) => {
   return container.getAsync("componentResolver").then((componentResolver) => {
     componentResolver.registerComponent(type, lazy(() => reactComponent));
@@ -3058,5 +3094,5 @@ const createReactComponent = (container, type, reactComponent, fn, options) => {
     }), type, options);
   });
 };
-export { AnchorLink, Button, Checkbox, ColumnContext, ComponentNodeContext, ComponentPropertyContext, Confirm, ContainerContext, DateFormats, Drawer, AnimationType as DrawerAnimationType, Dropdown, Empty, grid as Grid, Html, Icon, input as Input, ItemList, ItemTree, Lightbox, Link, List, Modal, NotFound, Overlay, Paragraph, Portal, RouteLink, RoutingContext, StyledText, SymbolBadge, TabStop, Text, TextLink, Timestamp, Tooltip, TransitionComponent, Typography, WidgetLink, borderTabStyle, browser, buttonCss, contentBox, convertToStringAttributes, createEmptyComponent, createReactComponent, defaultRenderInstructions, embeddedLinkMapper, filterCssProps, filterCssPropsStyle, genericHashLink, genericHtml, headingElement, invertedHoverButton, itemList, linkTabStyle, list, paddedBorderTabStyle, parseHtmlString as processHtmlString, transitionComposer, useAction, useChildren, useColumns, useComponent, useComponentDescriptor, useComponentNode, useComponentPlatform, useContainer, useContext, useDispatch, useEventListener, useEvents, useIsMounted, useKeyPress, useLayout, usePrevious, useProperties, useRenderState, useRouteData, useRouter, useScroll, useSettings, useToggle, useTransitionEnd, useUniqueMenu, useWidgetEvent };
+export { AnchorLink, Button, Checkbox, ColumnContext, ComponentNodeContext, ComponentPropertyContext, Confirm, ContainerContext, DateFormats, Drawer, AnimationType as DrawerAnimationType, Dropdown, Empty, grid as Grid, Html, Icon, input as Input, ItemList, ItemTree, Lightbox, Link, List, Modal, NotFound, Overlay, Paragraph, Portal, RouteLink, RoutingContext, StyledText, SymbolBadge, TabStop, Text, TextLink, Timestamp, Tooltip, TransitionComponent, Typography, WidgetLink, WidgetOverlayOutlet, borderTabStyle, browser, buttonCss, contentBox, convertToStringAttributes, createEmptyComponent, createReactComponent, defaultRenderInstructions, embeddedLinkMapper, filterCssProps, filterCssPropsStyle, genericHashLink, genericHtml, headingElement, invertedHoverButton, itemList, linkTabStyle, list, paddedBorderTabStyle, parseHtmlString as processHtmlString, transitionComposer, useAction, useChildren, useColumns, useComponent, useComponentDescriptor, useComponentNode, useComponentPlatform, useContainer, useContext, useDispatch, useEventListener, useEvents, useIsMounted, useKeyPress, useLayout, usePrevious, useProperties, useRenderState, useRouteData, useRouter, useScroll, useSettings, useToggle, useTransitionEnd, useUniqueMenu, useWidgetEvent };
 //# sourceMappingURL=index.js.map