@telia-ace/widget-ui 1.0.12 → 1.0.15
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.
- package/dist/components/index.d.ts +1 -0
- package/dist/components/portal.d.ts +3 -2
- package/dist/components/widget-overlay-outlet.d.ts +8 -0
- package/dist/index.d.ts +3 -3
- package/dist/index.js +161 -27
- package/dist/index.js.map +1 -1
- package/dist/styles.d.ts +1 -0
- package/package.json +4 -4
|
@@ -56,3 +56,4 @@ export { default as Typography } from './typography';
|
|
|
56
56
|
export type { Props as TypographyProps } from './typography';
|
|
57
57
|
export { default as WidgetLink } from './widget-link';
|
|
58
58
|
export type { Props as WidgetLinkProps } from './widget-link';
|
|
59
|
+
export { WidgetOverlayOutlet } from './widget-overlay-outlet';
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { FC } from 'react';
|
|
2
2
|
export declare type Props = {
|
|
3
3
|
elementId?: string;
|
|
4
|
+
parent?: Element | HTMLElement;
|
|
4
5
|
children?: any;
|
|
5
6
|
};
|
|
6
|
-
declare const Portal:
|
|
7
|
+
declare const Portal: FC<Props>;
|
|
7
8
|
export default Portal;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
|
+
declare type Props = {
|
|
3
|
+
portalId: string;
|
|
4
|
+
className?: string;
|
|
5
|
+
children?: ReactNode;
|
|
6
|
+
};
|
|
7
|
+
export declare const WidgetOverlayOutlet: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
|
|
8
|
+
export {};
|
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';
|
|
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
2
|
import { ColumnContext, ComponentNodeContext, ComponentPropertyContext, ContainerContext, RoutingContext } from './contexts';
|
|
3
3
|
import { default as createReactComponent } from './create-react-component';
|
|
4
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';
|
|
5
|
+
import { borderTabStyle, buttonCss, contentBox, genericHtml, invertedHoverButton, itemList, linkTabStyle, list, paddedBorderTabStyle, StyledText } from './styles';
|
|
6
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, };
|
|
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
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
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
|
|
1098
|
-
|
|
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
|
-
|
|
1182
|
+
parent.appendChild(container);
|
|
1105
1183
|
return () => {
|
|
1106
1184
|
if (container.childElementCount <= 1) {
|
|
1107
|
-
|
|
1185
|
+
parent.removeChild(container);
|
|
1108
1186
|
}
|
|
1109
1187
|
};
|
|
1110
1188
|
}, [container]);
|
|
@@ -1502,27 +1580,51 @@ const SymbolBadge = (_g) => {
|
|
|
1502
1580
|
r: "12",
|
|
1503
1581
|
fill: "currentColor"
|
|
1504
1582
|
}), /* @__PURE__ */ React.createElement("path", {
|
|
1505
|
-
|
|
1506
|
-
|
|
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
|
-
|
|
1511
|
-
|
|
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
|
-
|
|
1516
|
-
|
|
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
|
-
|
|
1521
|
-
|
|
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
|
}));
|
|
1525
1603
|
}
|
|
1604
|
+
case "video": {
|
|
1605
|
+
if (style.minWidth && typeof style.minWidth === "number") {
|
|
1606
|
+
style.minWidth = `${style.minWidth}px`;
|
|
1607
|
+
}
|
|
1608
|
+
return /* @__PURE__ */ React.createElement("svg", __spreadProps(__spreadValues({
|
|
1609
|
+
viewBox: "0 0 25 25"
|
|
1610
|
+
}, svgProps), {
|
|
1611
|
+
style
|
|
1612
|
+
}), /* @__PURE__ */ React.createElement("path", {
|
|
1613
|
+
d: "M16.8245 10.0758C18.7392 8.55799 21.3085 7.08973 21.7947 7.61552C22.5982 8.47863 22.5288 16.6929 21.7947 17.4766C21.3482 17.9627 18.7589 16.4945 16.8245 14.9866",
|
|
1614
|
+
stroke: "currentColor",
|
|
1615
|
+
strokeWidth: "1.5",
|
|
1616
|
+
strokeLinecap: "round",
|
|
1617
|
+
strokeLinejoin: "round"
|
|
1618
|
+
}), /* @__PURE__ */ React.createElement("path", {
|
|
1619
|
+
fillRule: "evenodd",
|
|
1620
|
+
clipRule: "evenodd",
|
|
1621
|
+
d: "M2.61914 12.5385C2.61914 7.12973 4.41578 5.32715 9.80764 5.32715C15.1985 5.32715 16.9952 7.12973 16.9952 12.5385C16.9952 17.9462 15.1985 19.7497 9.80764 19.7497C4.41578 19.7497 2.61914 17.9462 2.61914 12.5385Z",
|
|
1622
|
+
stroke: "currentColor",
|
|
1623
|
+
strokeWidth: "1.5",
|
|
1624
|
+
strokeLinecap: "round",
|
|
1625
|
+
strokeLinejoin: "round"
|
|
1626
|
+
}));
|
|
1627
|
+
}
|
|
1526
1628
|
case "star-empty": {
|
|
1527
1629
|
return /* @__PURE__ */ React.createElement("svg", __spreadValues({
|
|
1528
1630
|
viewBox: "0 0 13 12"
|
|
@@ -1686,7 +1788,7 @@ const Drawer = ({
|
|
|
1686
1788
|
"aria-expanded": visible
|
|
1687
1789
|
}));
|
|
1688
1790
|
};
|
|
1689
|
-
const Wrapper$
|
|
1791
|
+
const Wrapper$5 = styled.div`
|
|
1690
1792
|
font-family: ${(p) => {
|
|
1691
1793
|
var _a;
|
|
1692
1794
|
return (_a = p.theme.fonts) == null ? void 0 : _a.type;
|
|
@@ -1728,7 +1830,7 @@ const Header$1 = styled(Typography)`
|
|
|
1728
1830
|
const AnimationBase = css`
|
|
1729
1831
|
transition: ${(p) => p.duration}ms;
|
|
1730
1832
|
`;
|
|
1731
|
-
const WrapperWithSlideInBottom = styled(Wrapper$
|
|
1833
|
+
const WrapperWithSlideInBottom = styled(Wrapper$5)`
|
|
1732
1834
|
max-height: 0;
|
|
1733
1835
|
${AnimationBase}
|
|
1734
1836
|
|
|
@@ -1746,7 +1848,7 @@ const WrapperWithSlideInBottom = styled(Wrapper$4)`
|
|
|
1746
1848
|
max-height: 0;
|
|
1747
1849
|
}
|
|
1748
1850
|
`;
|
|
1749
|
-
const WrapperWithSlideInRight = styled(Wrapper$
|
|
1851
|
+
const WrapperWithSlideInRight = styled(Wrapper$5)`
|
|
1750
1852
|
${AnimationBase}
|
|
1751
1853
|
transform: translateX(100%);
|
|
1752
1854
|
height: ${(p) => p.fullScreen ? "100%" : "auto"};
|
|
@@ -1765,7 +1867,7 @@ const WrapperWithSlideInRight = styled(Wrapper$4)`
|
|
|
1765
1867
|
transform: translateX(100%);
|
|
1766
1868
|
}
|
|
1767
1869
|
`;
|
|
1768
|
-
const WrapperWithSlideInLeft = styled(Wrapper$
|
|
1870
|
+
const WrapperWithSlideInLeft = styled(Wrapper$5)`
|
|
1769
1871
|
${AnimationBase}
|
|
1770
1872
|
transform: translateX(-100%);
|
|
1771
1873
|
height: ${(p) => p.fullScreen ? "100%" : "auto"};
|
|
@@ -1784,7 +1886,7 @@ const WrapperWithSlideInLeft = styled(Wrapper$4)`
|
|
|
1784
1886
|
transform: translateX(-100%);
|
|
1785
1887
|
}
|
|
1786
1888
|
`;
|
|
1787
|
-
const WrapperWithSlideInTop = styled(Wrapper$
|
|
1889
|
+
const WrapperWithSlideInTop = styled(Wrapper$5)`
|
|
1788
1890
|
${AnimationBase}
|
|
1789
1891
|
bottom: unset;
|
|
1790
1892
|
top: 0;
|
|
@@ -1937,9 +2039,9 @@ const StyledDropdown = styled.div`
|
|
|
1937
2039
|
`;
|
|
1938
2040
|
const Empty = (_k) => {
|
|
1939
2041
|
var other = __objRest(_k, []);
|
|
1940
|
-
return /* @__PURE__ */ React.createElement(Wrapper$
|
|
2042
|
+
return /* @__PURE__ */ React.createElement(Wrapper$4, __spreadValues({}, other));
|
|
1941
2043
|
};
|
|
1942
|
-
const Wrapper$
|
|
2044
|
+
const Wrapper$4 = styled.div`
|
|
1943
2045
|
display: none;
|
|
1944
2046
|
`;
|
|
1945
2047
|
var grid = forwardRef((_l, ref) => {
|
|
@@ -2194,14 +2296,14 @@ const Overlay = (_z) => {
|
|
|
2194
2296
|
classNames: "humany-overlay-transition",
|
|
2195
2297
|
unmountOnExit: true,
|
|
2196
2298
|
timeout: duration
|
|
2197
|
-
}, /* @__PURE__ */ React.createElement(Portal, null, /* @__PURE__ */ React.createElement(Wrapper$
|
|
2299
|
+
}, /* @__PURE__ */ React.createElement(Portal, null, /* @__PURE__ */ React.createElement(Wrapper$3, __spreadValues({
|
|
2198
2300
|
className: "humany-overlay",
|
|
2199
2301
|
duration,
|
|
2200
2302
|
ref,
|
|
2201
2303
|
onClick: onOverlayClick
|
|
2202
2304
|
}, other), children)));
|
|
2203
2305
|
};
|
|
2204
|
-
const Wrapper$
|
|
2306
|
+
const Wrapper$3 = styled.div`
|
|
2205
2307
|
background: rgba(0, 0, 0, 0.6);
|
|
2206
2308
|
min-width: 100%;
|
|
2207
2309
|
min-height: 100%;
|
|
@@ -2464,7 +2566,7 @@ const Modal = forwardRef((_F, ref) => {
|
|
|
2464
2566
|
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Overlay, {
|
|
2465
2567
|
visible,
|
|
2466
2568
|
onClick: overlayClick
|
|
2467
|
-
}, /* @__PURE__ */ React.createElement(Wrapper$
|
|
2569
|
+
}, /* @__PURE__ */ React.createElement(Wrapper$2, __spreadProps(__spreadValues({
|
|
2468
2570
|
className: appendClassNames(className, "humany-modal", `humany-modal-${id.current}`),
|
|
2469
2571
|
css: css2,
|
|
2470
2572
|
tabIndex: -1
|
|
@@ -2483,7 +2585,7 @@ const Modal = forwardRef((_F, ref) => {
|
|
|
2483
2585
|
}
|
|
2484
2586
|
}));
|
|
2485
2587
|
});
|
|
2486
|
-
const Wrapper$
|
|
2588
|
+
const Wrapper$2 = styled.div`
|
|
2487
2589
|
font-family: ${(p) => {
|
|
2488
2590
|
var _a;
|
|
2489
2591
|
return (_a = p.theme.fonts) == null ? void 0 : _a.type;
|
|
@@ -2618,7 +2720,7 @@ const NotFound = ({
|
|
|
2618
2720
|
suggestionHeader = "",
|
|
2619
2721
|
suggestion = ""
|
|
2620
2722
|
}) => {
|
|
2621
|
-
return /* @__PURE__ */ React.createElement(Wrapper, null, /* @__PURE__ */ React.createElement(Status, null, /* @__PURE__ */ React.createElement(Typography, {
|
|
2723
|
+
return /* @__PURE__ */ React.createElement(Wrapper$1, null, /* @__PURE__ */ React.createElement(Status, null, /* @__PURE__ */ React.createElement(Typography, {
|
|
2622
2724
|
variant: "h2"
|
|
2623
2725
|
}, "404")), /* @__PURE__ */ React.createElement(Header, null, /* @__PURE__ */ React.createElement(Typography, {
|
|
2624
2726
|
variant: "h3"
|
|
@@ -2628,7 +2730,7 @@ const NotFound = ({
|
|
|
2628
2730
|
text: link
|
|
2629
2731
|
})), /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement("span", null, suggestionHeader), /* @__PURE__ */ React.createElement("ul", null, /* @__PURE__ */ React.createElement("li", null, suggestion))));
|
|
2630
2732
|
};
|
|
2631
|
-
const Wrapper = styled.div`
|
|
2733
|
+
const Wrapper$1 = styled.div`
|
|
2632
2734
|
display: flex;
|
|
2633
2735
|
flex-wrap: wrap;
|
|
2634
2736
|
`;
|
|
@@ -2977,6 +3079,38 @@ var WidgetLink = forwardRef((_L, ref) => {
|
|
|
2977
3079
|
ref
|
|
2978
3080
|
}), children);
|
|
2979
3081
|
});
|
|
3082
|
+
const WidgetOverlayOutlet = forwardRef(({ portalId = "humany-widget-overlay-portal", className, children }, ref) => {
|
|
3083
|
+
const container = useContainer();
|
|
3084
|
+
const parentElement = useMemo(() => {
|
|
3085
|
+
if (!container)
|
|
3086
|
+
return null;
|
|
3087
|
+
const widgetDOMElement = container.get("widgetDOMElement");
|
|
3088
|
+
if (!widgetDOMElement || !widgetDOMElement.childElementCount)
|
|
3089
|
+
return null;
|
|
3090
|
+
return widgetDOMElement.children[0];
|
|
3091
|
+
}, [container]);
|
|
3092
|
+
if (!parentElement) {
|
|
3093
|
+
return null;
|
|
3094
|
+
}
|
|
3095
|
+
return /* @__PURE__ */ React.createElement(Portal, {
|
|
3096
|
+
elementId: portalId,
|
|
3097
|
+
parent: parentElement
|
|
3098
|
+
}, /* @__PURE__ */ React.createElement(Wrapper, {
|
|
3099
|
+
className: appendClassNames("humany-widget-overlay-outlet", className),
|
|
3100
|
+
ref
|
|
3101
|
+
}, children));
|
|
3102
|
+
});
|
|
3103
|
+
const Wrapper = styled.div`
|
|
3104
|
+
background-color: #ffffff;
|
|
3105
|
+
position: absolute;
|
|
3106
|
+
top: 0;
|
|
3107
|
+
left: 0;
|
|
3108
|
+
bottom: 0;
|
|
3109
|
+
right: 0;
|
|
3110
|
+
z-index: 10;
|
|
3111
|
+
width: 100%;
|
|
3112
|
+
height: 100%;
|
|
3113
|
+
`;
|
|
2980
3114
|
const createReactComponent = (container, type, reactComponent, fn, options) => {
|
|
2981
3115
|
return container.getAsync("componentResolver").then((componentResolver) => {
|
|
2982
3116
|
componentResolver.registerComponent(type, lazy(() => reactComponent));
|
|
@@ -2984,5 +3118,5 @@ const createReactComponent = (container, type, reactComponent, fn, options) => {
|
|
|
2984
3118
|
}), type, options);
|
|
2985
3119
|
});
|
|
2986
3120
|
};
|
|
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 };
|
|
3121
|
+
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
3122
|
//# sourceMappingURL=index.js.map
|