@telia-ace/widget-ui 1.0.11 → 1.0.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (84) hide show
  1. package/LICENSE.txt +5 -5
  2. package/README.md +3 -3
  3. package/dist/components/anchor-link.d.ts +4 -4
  4. package/dist/components/button.d.ts +4 -4
  5. package/dist/components/checkbox.d.ts +7 -7
  6. package/dist/components/drawer/drawer.d.ts +21 -21
  7. package/dist/components/drawer/index.d.ts +3 -3
  8. package/dist/components/dropdown/dropdown.d.ts +9 -9
  9. package/dist/components/dropdown/index.d.ts +4 -4
  10. package/dist/components/dropdown/use-position.d.ts +5 -5
  11. package/dist/components/empty.d.ts +4 -4
  12. package/dist/components/grid.d.ts +7 -7
  13. package/dist/components/html.d.ts +12 -12
  14. package/dist/components/icon.d.ts +7 -7
  15. package/dist/components/index.d.ts +59 -58
  16. package/dist/components/input.d.ts +10 -10
  17. package/dist/components/item-list.d.ts +10 -10
  18. package/dist/components/item-tree.d.ts +13 -13
  19. package/dist/components/lightbox.d.ts +6 -6
  20. package/dist/components/link.d.ts +11 -11
  21. package/dist/components/list.d.ts +9 -9
  22. package/dist/components/modal/confirm.d.ts +12 -12
  23. package/dist/components/modal/index.d.ts +4 -4
  24. package/dist/components/modal/modal.d.ts +10 -10
  25. package/dist/components/not-found.d.ts +9 -9
  26. package/dist/components/overlay.d.ts +8 -8
  27. package/dist/components/paragraph.d.ts +11 -11
  28. package/dist/components/portal.d.ts +8 -7
  29. package/dist/components/route-link.d.ts +11 -11
  30. package/dist/components/symbol-badge.d.ts +15 -15
  31. package/dist/components/tab-stop.d.ts +18 -18
  32. package/dist/components/text-link.d.ts +8 -8
  33. package/dist/components/text.d.ts +4 -4
  34. package/dist/components/timestamp.d.ts +13 -13
  35. package/dist/components/tooltip.d.ts +8 -8
  36. package/dist/components/transition-component.d.ts +30 -30
  37. package/dist/components/typography.d.ts +9 -9
  38. package/dist/components/widget-link.d.ts +10 -10
  39. package/dist/components/widget-overlay-outlet.d.ts +8 -0
  40. package/dist/contexts/index.d.ts +9 -9
  41. package/dist/create-react-component.d.ts +11 -11
  42. package/dist/hooks/index.d.ts +27 -27
  43. package/dist/hooks/use-action.d.ts +4 -4
  44. package/dist/hooks/use-children.d.ts +4 -4
  45. package/dist/hooks/use-columns.d.ts +2 -2
  46. package/dist/hooks/use-component-descriptor.d.ts +2 -2
  47. package/dist/hooks/use-component-node.d.ts +6 -6
  48. package/dist/hooks/use-component-platform.d.ts +4 -4
  49. package/dist/hooks/use-component.d.ts +3 -3
  50. package/dist/hooks/use-container.d.ts +2 -2
  51. package/dist/hooks/use-context.d.ts +3 -3
  52. package/dist/hooks/use-dispatch.d.ts +3 -3
  53. package/dist/hooks/use-event-listener.d.ts +2 -2
  54. package/dist/hooks/use-events.d.ts +3 -3
  55. package/dist/hooks/use-is-mounted.d.ts +3 -3
  56. package/dist/hooks/use-key-press.d.ts +2 -2
  57. package/dist/hooks/use-layout.d.ts +3 -3
  58. package/dist/hooks/use-previous.d.ts +2 -2
  59. package/dist/hooks/use-properties.d.ts +6 -6
  60. package/dist/hooks/use-render-state.d.ts +4 -4
  61. package/dist/hooks/use-route-data.d.ts +4 -4
  62. package/dist/hooks/use-router.d.ts +3 -3
  63. package/dist/hooks/use-scroll.d.ts +2 -2
  64. package/dist/hooks/use-settings.d.ts +3 -3
  65. package/dist/hooks/use-toggle.d.ts +2 -2
  66. package/dist/hooks/use-transition-end.d.ts +2 -2
  67. package/dist/hooks/use-unique-menu.d.ts +2 -2
  68. package/dist/hooks/use-widget-event.d.ts +3 -3
  69. package/dist/index.d.ts +9 -9
  70. package/dist/index.js +137 -27
  71. package/dist/index.js.map +1 -1
  72. package/dist/styles.d.ts +20 -19
  73. package/dist/utils/animations.d.ts +18 -18
  74. package/dist/utils/browser.d.ts +12 -12
  75. package/dist/utils/convert-to-string-attributes.d.ts +2 -2
  76. package/dist/utils/create-empty-component.d.ts +3 -3
  77. package/dist/utils/embedded-link-mapper.d.ts +3 -3
  78. package/dist/utils/filter-css-props.d.ts +8 -8
  79. package/dist/utils/generic-hash-link.d.ts +8 -8
  80. package/dist/utils/heading-styles.d.ts +1 -1
  81. package/dist/utils/index.d.ts +12 -12
  82. package/dist/utils/process-html-string.d.ts +4 -4
  83. package/dist/utils/render-instructions.d.ts +8 -8
  84. package/package.json +4 -4
package/dist/index.d.ts CHANGED
@@ -1,9 +1,9 @@
1
- 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';
2
- import { ColumnContext, ComponentNodeContext, ComponentPropertyContext, ContainerContext, RoutingContext } from './contexts';
3
- import { default as createReactComponent } from './create-react-component';
4
- 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';
5
- import { borderTabStyle, buttonCss, contentBox, invertedHoverButton, itemList, linkTabStyle, list, paddedBorderTabStyle, StyledText } from './styles';
6
- import { browser, Browsers, convertToStringAttributes, createEmptyComponent, defaultRenderInstructions, embeddedLinkMapper, filterCssProps, filterCssPropsStyle, genericHashLink, GenericHashLinkProps, headingElement, processHtmlString, transitionComposer, TransitionStateSettings } from './utils';
7
- 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, 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, };
8
- 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, };
9
- export type { DispatchAction };
1
+ 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';
2
+ import { ColumnContext, ComponentNodeContext, ComponentPropertyContext, ContainerContext, RoutingContext } from './contexts';
3
+ import { default as createReactComponent } from './create-react-component';
4
+ 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';
5
+ import { borderTabStyle, buttonCss, contentBox, genericHtml, invertedHoverButton, itemList, linkTabStyle, list, paddedBorderTabStyle, StyledText } from './styles';
6
+ import { browser, Browsers, convertToStringAttributes, createEmptyComponent, defaultRenderInstructions, embeddedLinkMapper, filterCssProps, filterCssPropsStyle, genericHashLink, GenericHashLinkProps, headingElement, processHtmlString, transitionComposer, TransitionStateSettings } from './utils';
7
+ 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, };
8
+ 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, };
9
+ export type { DispatchAction };
package/dist/index.js CHANGED
@@ -31,7 +31,7 @@ var __objRest = (source, exclude) => {
31
31
  };
32
32
  import styled, { css } from "styled-components";
33
33
  import { kebabCase, appendClassNames, uuid, removeNullAndUndefinedValues } from "@telia-ace/widget-utilities";
34
- import React, { forwardRef, createContext, useContext as useContext$1, useState, useEffect, useRef, useCallback, useImperativeHandle, Component, lazy } from "react";
34
+ import React, { forwardRef, createContext, useContext as useContext$1, useState, useEffect, useRef, useCallback, useImperativeHandle, Component, useMemo, lazy } from "react";
35
35
  import { CSSTransition, Transition } from "react-transition-group";
36
36
  import { Container, WidgetState } from "@webprovisions/platform";
37
37
  import { ComponentPlatform, asDescriptor, createEventSubscriber, ComponentQuery, WidgetRenderState, extendComponent } from "@telia-ace/widget-core";
@@ -1094,17 +1094,95 @@ const itemList = css`
1094
1094
  }
1095
1095
  `)}
1096
1096
  `;
1097
- const Portal = ({ elementId = "humany-portal-elements", children }) => {
1098
- const [container] = React.useState(() => {
1097
+ const genericHtml = css`
1098
+ font-size: ${(p) => {
1099
+ var _a;
1100
+ return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
1101
+ }};
1102
+ font-weight: 300;
1103
+ line-height: 1.5em;
1104
+ color: ${(p) => {
1105
+ var _a;
1106
+ return (_a = p.theme.colors) == null ? void 0 : _a.text;
1107
+ }};
1108
+
1109
+ h1,
1110
+ h2,
1111
+ h3,
1112
+ h4,
1113
+ h5,
1114
+ h6 {
1115
+ word-break: break-word;
1116
+ &:first-child {
1117
+ margin-top: 0;
1118
+ }
1119
+ &:only-child {
1120
+ margin: 0;
1121
+ }
1122
+ &:last-child {
1123
+ margin-bottom: 0;
1124
+ }
1125
+ }
1126
+
1127
+ a {
1128
+ color: ${(p) => {
1129
+ var _a;
1130
+ return (_a = p.theme.colors) == null ? void 0 : _a.link;
1131
+ }};
1132
+ &:focus {
1133
+ ${(p) => {
1134
+ var _a;
1135
+ return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && linkTabStyle;
1136
+ }};
1137
+ }
1138
+ }
1139
+
1140
+ img {
1141
+ max-width: 100% !important;
1142
+ height: auto !important;
1143
+ }
1144
+
1145
+ p {
1146
+ word-break: break-word;
1147
+ margin: ${(p) => {
1148
+ var _a;
1149
+ return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
1150
+ }} 0;
1151
+ }
1152
+
1153
+ p:first-child {
1154
+ margin: 0 0 ${(p) => {
1155
+ var _a;
1156
+ return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
1157
+ }};
1158
+ }
1159
+
1160
+ p:last-child {
1161
+ margin: ${(p) => {
1162
+ var _a;
1163
+ return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
1164
+ }} 0 0;
1165
+ }
1166
+
1167
+ p:only-child {
1168
+ margin: 0;
1169
+ }
1170
+ `;
1171
+ const Portal = ({
1172
+ elementId = "humany-portal-elements",
1173
+ parent = document.body,
1174
+ children
1175
+ }) => {
1176
+ const [container] = useState(() => {
1099
1177
  const el = document.getElementById(elementId) || document.createElement("div");
1100
1178
  el.id = elementId;
1101
1179
  return el;
1102
1180
  });
1103
1181
  useEffect(() => {
1104
- document.body.appendChild(container);
1182
+ parent.appendChild(container);
1105
1183
  return () => {
1106
1184
  if (container.childElementCount <= 1) {
1107
- document.body.removeChild(container);
1185
+ parent.removeChild(container);
1108
1186
  }
1109
1187
  };
1110
1188
  }, [container]);
@@ -1502,23 +1580,23 @@ const SymbolBadge = (_g) => {
1502
1580
  r: "12",
1503
1581
  fill: "currentColor"
1504
1582
  }), /* @__PURE__ */ React.createElement("path", {
1505
- "fill-rule": "evenodd",
1506
- "clip-rule": "evenodd",
1583
+ fillRule: "evenodd",
1584
+ clipRule: "evenodd",
1507
1585
  d: "M6.16663 7.33334C6.16663 6.68901 6.68896 6.16667 7.33329 6.16667H10.25C10.8943 6.16667 11.4166 6.68901 11.4166 7.33334V10.25C11.4166 10.8943 10.8943 11.4167 10.25 11.4167H7.33329C6.68896 11.4167 6.16663 10.8943 6.16663 10.25V7.33334ZM7.33329 7.04167H10.25C10.411 7.04167 10.5416 7.17226 10.5416 7.33334V10.25C10.5416 10.4111 10.411 10.5417 10.25 10.5417H7.33329C7.17221 10.5417 7.04163 10.4111 7.04163 10.25V7.33334C7.04163 7.17226 7.17221 7.04167 7.33329 7.04167Z",
1508
1586
  fill: "white"
1509
1587
  }), /* @__PURE__ */ React.createElement("path", {
1510
- "fill-rule": "evenodd",
1511
- "clip-rule": "evenodd",
1588
+ fillRule: "evenodd",
1589
+ clipRule: "evenodd",
1512
1590
  d: "M6.16663 13.75C6.16663 13.1057 6.68896 12.5833 7.33329 12.5833H10.25C10.8943 12.5833 11.4166 13.1057 11.4166 13.75V16.6667C11.4166 17.311 10.8943 17.8333 10.25 17.8333H7.33329C6.68896 17.8333 6.16663 17.311 6.16663 16.6667V13.75ZM7.33329 13.4583H10.25C10.411 13.4583 10.5416 13.5889 10.5416 13.75V16.6667C10.5416 16.8278 10.411 16.9583 10.25 16.9583H7.33329C7.17221 16.9583 7.04163 16.8278 7.04163 16.6667V13.75C7.04163 13.5889 7.17221 13.4583 7.33329 13.4583Z",
1513
1591
  fill: "white"
1514
1592
  }), /* @__PURE__ */ React.createElement("path", {
1515
- "fill-rule": "evenodd",
1516
- "clip-rule": "evenodd",
1593
+ fillRule: "evenodd",
1594
+ clipRule: "evenodd",
1517
1595
  d: "M13.75 6.16667C13.1056 6.16667 12.5833 6.68901 12.5833 7.33334V10.25C12.5833 10.8943 13.1056 11.4167 13.75 11.4167H16.6666C17.311 11.4167 17.8333 10.8943 17.8333 10.25V7.33334C17.8333 6.68901 17.311 6.16667 16.6666 6.16667H13.75ZM16.6666 7.04167H13.75C13.5889 7.04167 13.4583 7.17226 13.4583 7.33334V10.25C13.4583 10.4111 13.5889 10.5417 13.75 10.5417H16.6666C16.8277 10.5417 16.9583 10.4111 16.9583 10.25V7.33334C16.9583 7.17226 16.8277 7.04167 16.6666 7.04167Z",
1518
1596
  fill: "white"
1519
1597
  }), /* @__PURE__ */ React.createElement("path", {
1520
- "fill-rule": "evenodd",
1521
- "clip-rule": "evenodd",
1598
+ fillRule: "evenodd",
1599
+ clipRule: "evenodd",
1522
1600
  d: "M17.8333 15.2083C17.8333 16.6581 16.658 17.8333 15.2083 17.8333C13.7585 17.8333 12.5833 16.6581 12.5833 15.2083C12.5833 13.7586 13.7585 12.5833 15.2083 12.5833C16.658 12.5833 17.8333 13.7586 17.8333 15.2083ZM16.9583 15.2083C16.9583 16.1748 16.1748 16.9583 15.2083 16.9583C14.2418 16.9583 13.4583 16.1748 13.4583 15.2083C13.4583 14.2418 14.2418 13.4583 15.2083 13.4583C16.1748 13.4583 16.9583 14.2418 16.9583 15.2083Z",
1523
1601
  fill: "white"
1524
1602
  }));
@@ -1686,7 +1764,7 @@ const Drawer = ({
1686
1764
  "aria-expanded": visible
1687
1765
  }));
1688
1766
  };
1689
- const Wrapper$4 = styled.div`
1767
+ const Wrapper$5 = styled.div`
1690
1768
  font-family: ${(p) => {
1691
1769
  var _a;
1692
1770
  return (_a = p.theme.fonts) == null ? void 0 : _a.type;
@@ -1728,7 +1806,7 @@ const Header$1 = styled(Typography)`
1728
1806
  const AnimationBase = css`
1729
1807
  transition: ${(p) => p.duration}ms;
1730
1808
  `;
1731
- const WrapperWithSlideInBottom = styled(Wrapper$4)`
1809
+ const WrapperWithSlideInBottom = styled(Wrapper$5)`
1732
1810
  max-height: 0;
1733
1811
  ${AnimationBase}
1734
1812
 
@@ -1746,7 +1824,7 @@ const WrapperWithSlideInBottom = styled(Wrapper$4)`
1746
1824
  max-height: 0;
1747
1825
  }
1748
1826
  `;
1749
- const WrapperWithSlideInRight = styled(Wrapper$4)`
1827
+ const WrapperWithSlideInRight = styled(Wrapper$5)`
1750
1828
  ${AnimationBase}
1751
1829
  transform: translateX(100%);
1752
1830
  height: ${(p) => p.fullScreen ? "100%" : "auto"};
@@ -1765,7 +1843,7 @@ const WrapperWithSlideInRight = styled(Wrapper$4)`
1765
1843
  transform: translateX(100%);
1766
1844
  }
1767
1845
  `;
1768
- const WrapperWithSlideInLeft = styled(Wrapper$4)`
1846
+ const WrapperWithSlideInLeft = styled(Wrapper$5)`
1769
1847
  ${AnimationBase}
1770
1848
  transform: translateX(-100%);
1771
1849
  height: ${(p) => p.fullScreen ? "100%" : "auto"};
@@ -1784,7 +1862,7 @@ const WrapperWithSlideInLeft = styled(Wrapper$4)`
1784
1862
  transform: translateX(-100%);
1785
1863
  }
1786
1864
  `;
1787
- const WrapperWithSlideInTop = styled(Wrapper$4)`
1865
+ const WrapperWithSlideInTop = styled(Wrapper$5)`
1788
1866
  ${AnimationBase}
1789
1867
  bottom: unset;
1790
1868
  top: 0;
@@ -1937,9 +2015,9 @@ const StyledDropdown = styled.div`
1937
2015
  `;
1938
2016
  const Empty = (_k) => {
1939
2017
  var other = __objRest(_k, []);
1940
- return /* @__PURE__ */ React.createElement(Wrapper$3, __spreadValues({}, other));
2018
+ return /* @__PURE__ */ React.createElement(Wrapper$4, __spreadValues({}, other));
1941
2019
  };
1942
- const Wrapper$3 = styled.div`
2020
+ const Wrapper$4 = styled.div`
1943
2021
  display: none;
1944
2022
  `;
1945
2023
  var grid = forwardRef((_l, ref) => {
@@ -2194,14 +2272,14 @@ const Overlay = (_z) => {
2194
2272
  classNames: "humany-overlay-transition",
2195
2273
  unmountOnExit: true,
2196
2274
  timeout: duration
2197
- }, /* @__PURE__ */ React.createElement(Portal, null, /* @__PURE__ */ React.createElement(Wrapper$2, __spreadValues({
2275
+ }, /* @__PURE__ */ React.createElement(Portal, null, /* @__PURE__ */ React.createElement(Wrapper$3, __spreadValues({
2198
2276
  className: "humany-overlay",
2199
2277
  duration,
2200
2278
  ref,
2201
2279
  onClick: onOverlayClick
2202
2280
  }, other), children)));
2203
2281
  };
2204
- const Wrapper$2 = styled.div`
2282
+ const Wrapper$3 = styled.div`
2205
2283
  background: rgba(0, 0, 0, 0.6);
2206
2284
  min-width: 100%;
2207
2285
  min-height: 100%;
@@ -2464,7 +2542,7 @@ const Modal = forwardRef((_F, ref) => {
2464
2542
  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Overlay, {
2465
2543
  visible,
2466
2544
  onClick: overlayClick
2467
- }, /* @__PURE__ */ React.createElement(Wrapper$1, __spreadProps(__spreadValues({
2545
+ }, /* @__PURE__ */ React.createElement(Wrapper$2, __spreadProps(__spreadValues({
2468
2546
  className: appendClassNames(className, "humany-modal", `humany-modal-${id.current}`),
2469
2547
  css: css2,
2470
2548
  tabIndex: -1
@@ -2483,7 +2561,7 @@ const Modal = forwardRef((_F, ref) => {
2483
2561
  }
2484
2562
  }));
2485
2563
  });
2486
- const Wrapper$1 = styled.div`
2564
+ const Wrapper$2 = styled.div`
2487
2565
  font-family: ${(p) => {
2488
2566
  var _a;
2489
2567
  return (_a = p.theme.fonts) == null ? void 0 : _a.type;
@@ -2618,7 +2696,7 @@ const NotFound = ({
2618
2696
  suggestionHeader = "",
2619
2697
  suggestion = ""
2620
2698
  }) => {
2621
- return /* @__PURE__ */ React.createElement(Wrapper, null, /* @__PURE__ */ React.createElement(Status, null, /* @__PURE__ */ React.createElement(Typography, {
2699
+ return /* @__PURE__ */ React.createElement(Wrapper$1, null, /* @__PURE__ */ React.createElement(Status, null, /* @__PURE__ */ React.createElement(Typography, {
2622
2700
  variant: "h2"
2623
2701
  }, "404")), /* @__PURE__ */ React.createElement(Header, null, /* @__PURE__ */ React.createElement(Typography, {
2624
2702
  variant: "h3"
@@ -2628,7 +2706,7 @@ const NotFound = ({
2628
2706
  text: link
2629
2707
  })), /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement("span", null, suggestionHeader), /* @__PURE__ */ React.createElement("ul", null, /* @__PURE__ */ React.createElement("li", null, suggestion))));
2630
2708
  };
2631
- const Wrapper = styled.div`
2709
+ const Wrapper$1 = styled.div`
2632
2710
  display: flex;
2633
2711
  flex-wrap: wrap;
2634
2712
  `;
@@ -2977,6 +3055,38 @@ var WidgetLink = forwardRef((_L, ref) => {
2977
3055
  ref
2978
3056
  }), children);
2979
3057
  });
3058
+ const WidgetOverlayOutlet = forwardRef(({ portalId = "humany-widget-overlay-portal", className, children }, ref) => {
3059
+ const container = useContainer();
3060
+ const parentElement = useMemo(() => {
3061
+ if (!container)
3062
+ return null;
3063
+ const widgetDOMElement = container.get("widgetDOMElement");
3064
+ if (!widgetDOMElement || !widgetDOMElement.childElementCount)
3065
+ return null;
3066
+ return widgetDOMElement.children[0];
3067
+ }, [container]);
3068
+ if (!parentElement) {
3069
+ return null;
3070
+ }
3071
+ return /* @__PURE__ */ React.createElement(Portal, {
3072
+ elementId: portalId,
3073
+ parent: parentElement
3074
+ }, /* @__PURE__ */ React.createElement(Wrapper, {
3075
+ className: appendClassNames("humany-widget-overlay-outlet", className),
3076
+ ref
3077
+ }, children));
3078
+ });
3079
+ const Wrapper = styled.div`
3080
+ background-color: #ffffff;
3081
+ position: absolute;
3082
+ top: 0;
3083
+ left: 0;
3084
+ bottom: 0;
3085
+ right: 0;
3086
+ z-index: 10;
3087
+ width: 100%;
3088
+ height: 100%;
3089
+ `;
2980
3090
  const createReactComponent = (container, type, reactComponent, fn, options) => {
2981
3091
  return container.getAsync("componentResolver").then((componentResolver) => {
2982
3092
  componentResolver.registerComponent(type, lazy(() => reactComponent));
@@ -2984,5 +3094,5 @@ const createReactComponent = (container, type, reactComponent, fn, options) => {
2984
3094
  }), type, options);
2985
3095
  });
2986
3096
  };
2987
- 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, 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 };
3097
+ 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 };
2988
3098
  //# sourceMappingURL=index.js.map