@telia-ace/widget-ui 1.0.0

package/lib/hooks/use-dispatch.js

@@ -0,0 +1,64 @@
+"use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var widget_core_1 = require("@telia-ace/widget-core");
+var widget_utilities_1 = require("@telia-ace/widget-utilities");
+var react_1 = require("react");
+var use_component_descriptor_1 = __importDefault(require("./use-component-descriptor"));
+var use_component_platform_1 = __importDefault(require("./use-component-platform"));
+var useDispatch = function () {
+    var components = (0, use_component_platform_1.default)();
+    var descriptor = (0, use_component_descriptor_1.default)();
+    var _a = __read((0, react_1.useState)([]), 2), queue = _a[0], setQueue = _a[1];
+    var _b = __read((0, react_1.useState)(), 2), actions = _b[0], setActions = _b[1];
+    (0, react_1.useEffect)(function () {
+        if (components && descriptor) {
+            var component = new widget_core_1.ComponentQuery(components).withId(descriptor.id);
+            var actions_1 = components.actions(component, descriptor.type || (0, widget_utilities_1.uuid)());
+            setActions(actions_1);
+            // process the queue and set it to null
+            if (queue !== null) {
+                queue.forEach(function (item) {
+                    actions_1
+                        .dispatch(item.key, item.data)
+                        .then(function (value) { return item.resolve(value); })
+                        .catch(function (reason) { return item.reject(reason); });
+                });
+                setQueue(null);
+            }
+        }
+    }, [components, descriptor.id]);
+    return function (key, data) {
+        if (queue !== null) {
+            // if queue is available the actions controller is not yet created
+            return new Promise(function (resolve, reject) {
+                queue.push({
+                    key: key,
+                    data: data,
+                    resolve: resolve,
+                    reject: reject,
+                });
+            });
+        }
+        return actions.dispatch(key, data);
+    };
+};
+exports.default = useDispatch;

package/lib/hooks/use-event-listener.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (eventName: string, handler: Function, element?: HTMLElement | Window, condition?: () => boolean) => void;
+export default _default;

package/lib/hooks/use-event-listener.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+exports.default = (function (eventName, handler, element, condition) {
+    if (element === void 0) { element = window; }
+    if (condition === void 0) { condition = function () { return true; }; }
+    var savedHandler = (0, react_1.useRef)(function () { });
+    (0, react_1.useEffect)(function () {
+        savedHandler.current = handler;
+    }, [handler]);
+    (0, react_1.useEffect)(function () {
+        var isSupported = element && condition();
+        if (!isSupported)
+            return;
+        var eventListener = function (event) { return savedHandler.current(event); };
+        element.addEventListener(eventName, eventListener);
+        return function () {
+            element.removeEventListener(eventName, eventListener);
+        };
+    }, [eventName, element]);
+});

package/lib/hooks/use-events.d.ts

@@ -0,0 +1,3 @@
+import { Container, EventManager } from '@webprovisions/platform';
+declare const useEvents: (passedContainer?: Container | undefined) => EventManager;
+export default useEvents;

package/lib/hooks/use-events.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var use_container_1 = __importDefault(require("./use-container"));
+var useEvents = function (passedContainer) {
+    var container = (0, use_container_1.default)();
+    var events = (passedContainer || container).get('$widget').events;
+    return events;
+};
+exports.default = useEvents;

package/lib/hooks/use-is-mounted.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const useIsMounted: () => import("react").MutableRefObject<boolean>;
+export default useIsMounted;

package/lib/hooks/use-is-mounted.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var useIsMounted = function () {
+    var isMounted = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(function () {
+        isMounted.current = true;
+        return function () {
+            isMounted.current = false;
+        };
+    }, []);
+    return isMounted;
+};
+exports.default = useIsMounted;

package/lib/hooks/use-key-press.d.ts

@@ -0,0 +1,2 @@
+declare const useKeyPress: (targetKey: string, action?: ((event: KeyboardEvent) => void) | undefined) => boolean;
+export default useKeyPress;

package/lib/hooks/use-key-press.js

@@ -0,0 +1,46 @@
+"use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var use_event_listener_1 = __importDefault(require("./use-event-listener"));
+var useKeyPress = function (targetKey, action) {
+    // State for keeping track of whether key is pressed
+    var _a = __read((0, react_1.useState)(false), 2), keyPressed = _a[0], setKeyPressed = _a[1];
+    var onKeyDown = (0, react_1.useCallback)(function (event) {
+        var key = event.key;
+        if (key === targetKey) {
+            setKeyPressed(true);
+            if (action) {
+                action(event);
+            }
+        }
+    }, [setKeyPressed, action]);
+    var onKeyUp = (0, react_1.useCallback)(function (_a) {
+        var key = _a.key;
+        if (key === targetKey) {
+            setKeyPressed(false);
+        }
+    }, [setKeyPressed]);
+    (0, use_event_listener_1.default)('keydown', onKeyDown, window);
+    (0, use_event_listener_1.default)('keyup', onKeyUp, window);
+    return keyPressed;
+};
+exports.default = useKeyPress;

package/lib/hooks/use-layout.d.ts

@@ -0,0 +1,3 @@
+import { ComponentNodeLayout } from '@telia-ace/widget-core';
+declare const useLayout: (id?: string | undefined) => ComponentNodeLayout;
+export default useLayout;

package/lib/hooks/use-layout.js

@@ -0,0 +1,50 @@
+"use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var use_component_node_1 = __importDefault(require("./use-component-node"));
+var use_component_platform_1 = __importDefault(require("./use-component-platform"));
+var use_is_mounted_1 = __importDefault(require("./use-is-mounted"));
+var useLayout = function (id) {
+    var node = (0, use_component_node_1.default)(id);
+    var components = (0, use_component_platform_1.default)();
+    var _a = __read((0, react_1.useState)({}), 2), layout = _a[0], setLayout = _a[1];
+    var isMounted = (0, use_is_mounted_1.default)();
+    (0, react_1.useEffect)(function () {
+        if (node && isMounted.current) {
+            setLayout(node.attributes.layout);
+        }
+    }, [node, isMounted]);
+    (0, react_1.useEffect)(function () {
+        if (components) {
+            var unsubscribe_1 = components.events.subscribe('components:layout-changed', function (event, data) {
+                if (node === data.node && isMounted.current) {
+                    setLayout(data.node.attributes.layout);
+                }
+            });
+            return function () {
+                unsubscribe_1();
+            };
+        }
+    }, [components, isMounted]);
+    return layout;
+};
+exports.default = useLayout;

package/lib/hooks/use-previous.d.ts

@@ -0,0 +1,2 @@
+declare const usePrevious: <T>(value: T) => T | undefined;
+export default usePrevious;

package/lib/hooks/use-previous.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var usePrevious = function (value) {
+    var ref = (0, react_1.useRef)();
+    (0, react_1.useEffect)(function () {
+        ref.current = value;
+    });
+    return ref.current;
+};
+exports.default = usePrevious;

package/lib/hooks/use-properties.d.ts

@@ -0,0 +1,6 @@
+import { ComponentNodeProperties } from '@telia-ace/widget-core';
+declare type DataProperties = {
+    loading?: boolean;
+};
+declare const useProperties: <T extends ComponentNodeProperties>() => Merge<DataProperties, T>;
+export default useProperties;

package/lib/hooks/use-properties.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var contexts_1 = require("../contexts");
+var useProperties = function () {
+    var properties = (0, react_1.useContext)(contexts_1.ComponentPropertyContext);
+    return properties;
+};
+exports.default = useProperties;

package/lib/hooks/use-render-state.d.ts

@@ -0,0 +1,4 @@
+import { WidgetRenderState } from '@telia-ace/widget-core';
+import { Container } from '@webprovisions/platform';
+declare const useRenderState: (passedContainer?: Container | undefined) => WidgetRenderState | undefined;
+export default useRenderState;

package/lib/hooks/use-render-state.js

@@ -0,0 +1,66 @@
+"use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var widget_core_1 = require("@telia-ace/widget-core");
+var react_1 = require("react");
+var use_container_1 = __importDefault(require("./use-container"));
+var use_is_mounted_1 = __importDefault(require("./use-is-mounted"));
+var useRenderState = function (passedContainer) {
+    var _a = __read((0, react_1.useState)(), 2), renderState = _a[0], setRenderState = _a[1];
+    var container = (0, use_container_1.default)();
+    var isMounted = (0, use_is_mounted_1.default)();
+    (0, react_1.useEffect)(function () {
+        var unsubscribe;
+        var _a = (passedContainer || container).get('$widget'), name = _a.name, invoke = _a.invoke;
+        invoke('renderState').then(function (renderState) {
+            if (isMounted.current) {
+                setRenderState(renderState);
+            }
+        });
+        (passedContainer || container)
+            .getAsync('actionResolver')
+            .then(function (actionResolver) {
+            unsubscribe = actionResolver.subscribe(name, function (origin, action) {
+                switch (action) {
+                    case 'close':
+                    case 'open':
+                        if (isMounted.current) {
+                            setRenderState(action === 'open'
+                                ? widget_core_1.WidgetRenderState.open
+                                : widget_core_1.WidgetRenderState.closed);
+                        }
+                        break;
+                    case 'hide':
+                        if (isMounted.current) {
+                            setRenderState(widget_core_1.WidgetRenderState.hidden);
+                        }
+                }
+            });
+        });
+        return function () {
+            if (unsubscribe) {
+                unsubscribe();
+            }
+        };
+    }, [isMounted]);
+    return renderState;
+};
+exports.default = useRenderState;

package/lib/hooks/use-route-data.d.ts

@@ -0,0 +1,4 @@
+import { RouteData } from '@telia-ace/widget-routing';
+import { Container } from '@webprovisions/platform';
+declare const useRouteData: (passedContainer?: Container | undefined) => RouteData;
+export default useRouteData;

package/lib/hooks/use-route-data.js

@@ -0,0 +1,54 @@
+"use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var widget_utilities_1 = require("@telia-ace/widget-utilities");
+var react_1 = require("react");
+var use_container_1 = __importDefault(require("./use-container"));
+var use_is_mounted_1 = __importDefault(require("./use-is-mounted"));
+var use_router_1 = __importDefault(require("./use-router"));
+var useRouteData = function (passedContainer) {
+    var container = (0, use_container_1.default)();
+    var router = (0, use_router_1.default)();
+    var _a = __read((0, react_1.useState)({ name: '', params: {} }), 2), routeData = _a[0], setRouteData = _a[1];
+    var isMounted = (0, use_is_mounted_1.default)();
+    (0, react_1.useEffect)(function () {
+        var events = (passedContainer || container).get('$widget').events;
+        var unsubscribe = events.subscribe('router:change', function (e, _a) {
+            var routeData = _a.next.routeData;
+            if (isMounted.current) {
+                var name_1 = routeData.name, params = routeData.params;
+                (0, widget_utilities_1.removeNullAndUndefinedValues)(params);
+                setRouteData({ name: name_1, params: params });
+            }
+        });
+        return unsubscribe;
+    }, [isMounted]);
+    (0, react_1.useEffect)(function () {
+        if (router && router.history && isMounted.current) {
+            var routeData_1 = router.getRouteData();
+            var name_2 = routeData_1.name, params = routeData_1.params;
+            (0, widget_utilities_1.removeNullAndUndefinedValues)(params);
+            setRouteData({ name: name_2, params: params });
+        }
+    }, [router, isMounted]);
+    return routeData;
+};
+exports.default = useRouteData;

package/lib/hooks/use-router.d.ts

@@ -0,0 +1,3 @@
+import { RoutingService } from '@telia-ace/widget-routing';
+declare const useRouter: () => RoutingService | null;
+export default useRouter;

package/lib/hooks/use-router.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var contexts_1 = require("../contexts");
+var useRouter = function () {
+    var router = (0, react_1.useContext)(contexts_1.RoutingContext);
+    return router;
+};
+exports.default = useRouter;

package/lib/hooks/use-scroll.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (scrollable: boolean) => [string, React.MutableRefObject<any>];
+export default _default;

package/lib/hooks/use-scroll.js

@@ -0,0 +1,71 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var utils_1 = require("../utils");
+var use_event_listener_1 = __importDefault(require("./use-event-listener"));
+exports.default = (function (scrollable) {
+    var elem = (0, react_1.useRef)();
+    var previousY = (0, react_1.useRef)(0);
+    var timeoutId;
+    var onScroll = (0, react_1.useCallback)(function () {
+        var _a;
+        (_a = elem.current) === null || _a === void 0 ? void 0 : _a.classList.add('humany-scrolling');
+        clearTimeout(timeoutId);
+        timeoutId = setTimeout(function () {
+            var _a;
+            (_a = elem.current) === null || _a === void 0 ? void 0 : _a.classList.remove('humany-scrolling');
+        }, 500);
+    }, [elem]);
+    var onTouchStart = (0, react_1.useCallback)(function (event) {
+        previousY.current = event.touches[0].clientY;
+    }, [elem]);
+    var traverseScrollable = function (element) {
+        if (isScrollable(element)) {
+            if (element === elem.current) {
+                return element;
+            }
+            return null;
+        }
+        if (element.parentElement) {
+            return traverseScrollable(element.parentElement);
+        }
+        return null;
+    };
+    var isScrollable = function (element) {
+        return (element.scrollWidth > element.clientWidth || element.scrollHeight > element.clientHeight);
+    };
+    var onTouchMove = (0, react_1.useCallback)(function (event) {
+        if (!event.cancelable) {
+            return;
+        }
+        var top = event.touches[0].clientY;
+        var firstScrollable = traverseScrollable(event.target);
+        if (!firstScrollable) {
+            return;
+        }
+        var scrollTop = firstScrollable.scrollTop;
+        var direction = previousY.current - top < 0 ? 'up' : 'down';
+        var isAtTop = scrollTop <= 0 && direction === 'up';
+        var isAtBottom = scrollTop >= firstScrollable.scrollHeight - firstScrollable.offsetHeight &&
+            direction === 'down';
+        if (isAtTop || isAtBottom) {
+            // Don't scroll up if already at top,
+            // and don't scroll down if bottom has been reached
+            event.preventDefault();
+        }
+        previousY.current = top;
+    }, [elem, previousY]);
+    (0, use_event_listener_1.default)('scroll', onScroll, elem.current, function () { return elem.current && scrollable; });
+    // This will prevent scrolling causing browser
+    // to freeze on Safari / Chrome on iOS
+    (0, use_event_listener_1.default)('touchstart', onTouchStart, elem.current, function () { return elem.current && scrollable; });
+    (0, use_event_listener_1.default)('touchmove', onTouchMove, elem.current, function () { return elem.current && scrollable; });
+    if (!scrollable) {
+        return ['', elem];
+    }
+    return [styling, elem];
+});
+var styling = "\n    overflow-y: ".concat((0, utils_1.browser)() === utils_1.Browsers.Chrome || (0, utils_1.browser)() === utils_1.Browsers.EdgeChromium ? 'overlay' : 'auto', ";\n    overflow-x: hidden;\n    -ms-overflow-style: none; /* IE 10+ */\n    scrollbar-width: thin; /* Firefox */\n    scrollbar-color: transparent transparent; /* Firefox */\n\n    ::-webkit-scrollbar {\n        width: 3px !important;\n        background-color: transparent;\n        border-left: none;\n    }\n    ::-webkit-scrollbar-thumb {\n        background-color: transparent;\n    }\n    ::-webkit-scrollbar-track {\n        -webkit-box-shadow: none !important;\n        background-color: transparent;\n    }\n    &.humany-scrolling {\n        scrollbar-color: #7F7F7F transparent;\n        scrollbar-width: thin; /* Firefox */\n        -ms-overflow-style: none; /* IE 10+ */\n\n        ::-webkit-scrollbar-thumb {\n            background-color: #7F7F7F;\n        }\n    }\n");

package/lib/hooks/use-settings.d.ts

@@ -0,0 +1,3 @@
+import { WidgetSettings } from '@telia-ace/widget-core';
+declare const useSettings: () => WidgetSettings | null;
+export default useSettings;

package/lib/hooks/use-settings.js

@@ -0,0 +1,38 @@
+"use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var use_container_1 = __importDefault(require("./use-container"));
+var use_is_mounted_1 = __importDefault(require("./use-is-mounted"));
+var useSettings = function () {
+    var _a = __read((0, react_1.useState)(null), 2), settings = _a[0], setSettings = _a[1];
+    var container = (0, use_container_1.default)();
+    var isMounted = (0, use_is_mounted_1.default)();
+    (0, react_1.useEffect)(function () {
+        container.get('settings').then(function (settings) {
+            if (isMounted.current) {
+                setSettings(settings);
+            }
+        });
+    }, [isMounted]);
+    return settings;
+};
+exports.default = useSettings;

package/lib/hooks/use-toggle.d.ts

@@ -0,0 +1,2 @@
+declare const useToggle: (initialValue?: boolean) => [boolean, (forced?: boolean | undefined) => void];
+export default useToggle;

package/lib/hooks/use-toggle.js

@@ -0,0 +1,28 @@
+"use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var useToggle = function (initialValue) {
+    if (initialValue === void 0) { initialValue = false; }
+    var _a = __read((0, react_1.useState)(initialValue), 2), value = _a[0], setValue = _a[1];
+    var toggle = (0, react_1.useCallback)(function (forced) {
+        setValue(typeof forced === 'boolean' ? forced : function (v) { return !v; });
+    }, []);
+    return [value, toggle];
+};
+exports.default = useToggle;

package/lib/hooks/use-transition-end.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (handler: (...args: any[]) => void) => void;
+export default _default;

package/lib/hooks/use-transition-end.js

@@ -0,0 +1,62 @@
+"use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var _1 = require(".");
+exports.default = (function (handler) {
+    var container = (0, _1.useContainer)();
+    var components = (0, _1.useComponentPlatform)();
+    var widgetDOMElement = container.get('widgetDOMElement');
+    var _a = __read((0, react_1.useState)(null), 2), viewDOMElement = _a[0], setViewDOMElement = _a[1];
+    var _b = __read((0, react_1.useState)(null), 2), rootDOMElement = _b[0], setRootDOMElement = _b[1];
+    var isMounted = (0, _1.useIsMounted)();
+    (0, react_1.useEffect)(function () {
+        if (components && isMounted.current) {
+            var rootArea = components.nodes.all.find(function (n) { return n.name === 'root-area'; });
+            var view = components.nodes.all.find(function (n) { return n.type === 'view'; });
+            if (!(view === null || view === void 0 ? void 0 : view.attributes.properties.animation) &&
+                !(rootArea === null || rootArea === void 0 ? void 0 : rootArea.attributes.properties.animation)) {
+                // if view and root does not use animations, call handler on render
+                handler();
+            }
+            else {
+                // else add elements to state for transitionend-event handling
+                var getElement = function (id) {
+                    if (id === void 0) { id = ''; }
+                    return widgetDOMElement === null || widgetDOMElement === void 0 ? void 0 : widgetDOMElement.querySelector("[data-node-id=\"".concat(id, "\"]"));
+                };
+                var viewDOMElement_1 = getElement(view === null || view === void 0 ? void 0 : view.id);
+                if (viewDOMElement_1) {
+                    setViewDOMElement(viewDOMElement_1);
+                }
+                var rootDOMElement_1 = getElement(rootArea === null || rootArea === void 0 ? void 0 : rootArea.id);
+                if (rootDOMElement_1) {
+                    setRootDOMElement(rootDOMElement_1);
+                }
+            }
+        }
+    }, [components, container, isMounted]);
+    var eventListener = (0, react_1.useCallback)(function (event) {
+        if (isMounted.current &&
+            (event.target === viewDOMElement || event.target === rootDOMElement)) {
+            handler();
+        }
+    }, [handler, isMounted, viewDOMElement, rootDOMElement]);
+    (0, _1.useEventListener)('transitionend', eventListener, viewDOMElement);
+    (0, _1.useEventListener)('transitionend', eventListener, rootDOMElement);
+});

package/lib/hooks/use-unique-menu.d.ts

@@ -0,0 +1,2 @@
+declare const useUniqueMenu: (id: string, callback: () => void) => Function;
+export default useUniqueMenu;