@telia-ace/widget-ui 1.0.0

package/lib/components/widget-link.js

@@ -0,0 +1,116 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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 platform_1 = require("@webprovisions/platform");
+var react_1 = __importStar(require("react"));
+var hooks_1 = require("../hooks");
+var link_1 = __importDefault(require("./link"));
+exports.default = (0, react_1.forwardRef)(function (_a, ref) {
+    var className = _a.className, children = _a.children, _b = _a.onClick, onClick = _b === void 0 ? function () { } : _b, widgetName = _a.widgetName, activationOptions = _a.activationOptions, other = __rest(_a, ["className", "children", "onClick", "widgetName", "activationOptions"]);
+    var container = (0, hooks_1.useContainer)();
+    var getWidget = function () {
+        var implementation = container.get('$widget').implementation;
+        return implementation.widgets.get(widgetName);
+    };
+    (0, react_1.useEffect)(function () {
+        var widget = getWidget();
+        widget === null || widget === void 0 ? void 0 : widget.activate(activationOptions).then(function () { return widget.invoke('attach'); });
+        return function () {
+            widget === null || widget === void 0 ? void 0 : widget.deactivate();
+        };
+    }, [widgetName]);
+    var openWidget = function (e) {
+        var widget = getWidget();
+        var target = e.currentTarget;
+        if (widget) {
+            var toggle = function () {
+                widget
+                    .invoke('renderState')
+                    .then(function (renderState) {
+                    return renderState === widget_core_1.WidgetRenderState.open
+                        ? widget.invoke('close')
+                        : widget.invoke('open');
+                })
+                    .then(function () {
+                    widget.events.subscribeOnce('widget:area-rendered', function (event, data) {
+                        var widgetDOMElement = container.get('widgetDOMElement');
+                        if (widgetDOMElement) {
+                            widget.events.dispatch('widget:modal-opened', {
+                                name: widget.name,
+                                ref: target,
+                            });
+                        }
+                    });
+                });
+            };
+            if (widget.state === platform_1.WidgetState.Deactivated) {
+                widget
+                    .activate(activationOptions)
+                    .then(function () { return widget.invoke('attach'); })
+                    .then(toggle);
+            }
+            else {
+                toggle();
+            }
+        }
+    };
+    var onEnter = function (e) {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            openWidget(e);
+        }
+    };
+    return (react_1.default.createElement(link_1.default, __assign({ className: (0, widget_utilities_1.appendClassNames)(className, 'humany-widget-link'), onKeyDown: onEnter, onClick: function (e) {
+            onClick(e);
+            openWidget(e);
+        } }, other, { ref: ref }), children));
+});

package/lib/contexts/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ComponentDescriptor, ComponentNodeProperties } from '@telia-ace/widget-core';
+import { RoutingService } from '@telia-ace/widget-routing';
+import { Container } from '@webprovisions/platform';
+export declare const ContainerContext: import("react").Context<Container>;
+export declare const ColumnContext: import("react").Context<number>;
+export declare const ComponentNodeContext: import("react").Context<ComponentDescriptor>;
+export declare const ComponentPropertyContext: import("react").Context<ComponentNodeProperties>;
+export declare const RoutingContext: import("react").Context<RoutingService | null>;

package/lib/contexts/index.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RoutingContext = exports.ComponentPropertyContext = exports.ComponentNodeContext = exports.ColumnContext = exports.ContainerContext = void 0;
+var platform_1 = require("@webprovisions/platform");
+var react_1 = require("react");
+exports.ContainerContext = (0, react_1.createContext)(new platform_1.Container());
+exports.ColumnContext = (0, react_1.createContext)(1);
+exports.ComponentNodeContext = (0, react_1.createContext)({
+    id: '',
+    type: '',
+    name: '',
+    branch: '',
+});
+exports.ComponentPropertyContext = (0, react_1.createContext)({});
+exports.RoutingContext = (0, react_1.createContext)(null);

package/lib/create-react-component.d.ts

@@ -0,0 +1,11 @@
+import { ExtendComponentHandler, ExtendComponentOptions, ReactComponent } from '@telia-ace/widget-core';
+import { Container } from '@webprovisions/platform';
+/**
+ * Registers a React component on the component platform.
+ * @param container Container to register the component on.
+ * @param type Type name to resolve the component from configuration.
+ * @param reactComponent Promise resolving to the React component for rendering.
+ * @param fn Handler for controlling the component.
+ */
+declare const createReactComponent: (container: Container, type: string, reactComponent: ReactComponent, fn?: ExtendComponentHandler | undefined, options?: ExtendComponentOptions | undefined) => Promise<void>;
+export default createReactComponent;

package/lib/create-react-component.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var widget_core_1 = require("@telia-ace/widget-core");
+var react_1 = require("react");
+/**
+ * Registers a React component on the component platform.
+ * @param container Container to register the component on.
+ * @param type Type name to resolve the component from configuration.
+ * @param reactComponent Promise resolving to the React component for rendering.
+ * @param fn Handler for controlling the component.
+ */
+var createReactComponent = function (container, type, reactComponent, fn, options) {
+    return container.getAsync('componentResolver').then(function (componentResolver) {
+        componentResolver.registerComponent(type, (0, react_1.lazy)(function () { return reactComponent; }));
+        return (0, widget_core_1.extendComponent)(container, type, fn || (function () { }), type, options);
+    });
+};
+exports.default = createReactComponent;

package/lib/hooks/index.d.ts

@@ -0,0 +1,27 @@
+export { default as useAction } from './use-action';
+export { default as useChildren } from './use-children';
+export { default as useColumns } from './use-columns';
+export { default as useComponent } from './use-component';
+export { default as useComponentDescriptor } from './use-component-descriptor';
+export { default as useComponentNode } from './use-component-node';
+export { default as useComponentPlatform } from './use-component-platform';
+export { default as useContainer } from './use-container';
+export { default as useContext } from './use-context';
+export { default as useDispatch } from './use-dispatch';
+export type { DispatchAction } from './use-dispatch';
+export { default as useEventListener } from './use-event-listener';
+export { default as useEvents } from './use-events';
+export { default as useIsMounted } from './use-is-mounted';
+export { default as useKeyPress } from './use-key-press';
+export { default as useLayout } from './use-layout';
+export { default as usePrevious } from './use-previous';
+export { default as useProperties } from './use-properties';
+export { default as useRenderState } from './use-render-state';
+export { default as useRouteData } from './use-route-data';
+export { default as useRouter } from './use-router';
+export { default as useScroll } from './use-scroll';
+export { default as useSettings } from './use-settings';
+export { default as useToggle } from './use-toggle';
+export { default as useTransitionEnd } from './use-transition-end';
+export { default as useUniqueMenu } from './use-unique-menu';
+export { default as useWidgetEvent } from './use-widget-event';

package/lib/hooks/index.js

@@ -0,0 +1,58 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useWidgetEvent = exports.useUniqueMenu = exports.useTransitionEnd = exports.useToggle = exports.useSettings = exports.useScroll = exports.useRouter = exports.useRouteData = exports.useRenderState = exports.useProperties = exports.usePrevious = exports.useLayout = exports.useKeyPress = exports.useIsMounted = exports.useEvents = exports.useEventListener = exports.useDispatch = exports.useContext = exports.useContainer = exports.useComponentPlatform = exports.useComponentNode = exports.useComponentDescriptor = exports.useComponent = exports.useColumns = exports.useChildren = exports.useAction = void 0;
+var use_action_1 = require("./use-action");
+Object.defineProperty(exports, "useAction", { enumerable: true, get: function () { return __importDefault(use_action_1).default; } });
+var use_children_1 = require("./use-children");
+Object.defineProperty(exports, "useChildren", { enumerable: true, get: function () { return __importDefault(use_children_1).default; } });
+var use_columns_1 = require("./use-columns");
+Object.defineProperty(exports, "useColumns", { enumerable: true, get: function () { return __importDefault(use_columns_1).default; } });
+var use_component_1 = require("./use-component");
+Object.defineProperty(exports, "useComponent", { enumerable: true, get: function () { return __importDefault(use_component_1).default; } });
+var use_component_descriptor_1 = require("./use-component-descriptor");
+Object.defineProperty(exports, "useComponentDescriptor", { enumerable: true, get: function () { return __importDefault(use_component_descriptor_1).default; } });
+var use_component_node_1 = require("./use-component-node");
+Object.defineProperty(exports, "useComponentNode", { enumerable: true, get: function () { return __importDefault(use_component_node_1).default; } });
+var use_component_platform_1 = require("./use-component-platform");
+Object.defineProperty(exports, "useComponentPlatform", { enumerable: true, get: function () { return __importDefault(use_component_platform_1).default; } });
+var use_container_1 = require("./use-container");
+Object.defineProperty(exports, "useContainer", { enumerable: true, get: function () { return __importDefault(use_container_1).default; } });
+var use_context_1 = require("./use-context");
+Object.defineProperty(exports, "useContext", { enumerable: true, get: function () { return __importDefault(use_context_1).default; } });
+var use_dispatch_1 = require("./use-dispatch");
+Object.defineProperty(exports, "useDispatch", { enumerable: true, get: function () { return __importDefault(use_dispatch_1).default; } });
+var use_event_listener_1 = require("./use-event-listener");
+Object.defineProperty(exports, "useEventListener", { enumerable: true, get: function () { return __importDefault(use_event_listener_1).default; } });
+var use_events_1 = require("./use-events");
+Object.defineProperty(exports, "useEvents", { enumerable: true, get: function () { return __importDefault(use_events_1).default; } });
+var use_is_mounted_1 = require("./use-is-mounted");
+Object.defineProperty(exports, "useIsMounted", { enumerable: true, get: function () { return __importDefault(use_is_mounted_1).default; } });
+var use_key_press_1 = require("./use-key-press");
+Object.defineProperty(exports, "useKeyPress", { enumerable: true, get: function () { return __importDefault(use_key_press_1).default; } });
+var use_layout_1 = require("./use-layout");
+Object.defineProperty(exports, "useLayout", { enumerable: true, get: function () { return __importDefault(use_layout_1).default; } });
+var use_previous_1 = require("./use-previous");
+Object.defineProperty(exports, "usePrevious", { enumerable: true, get: function () { return __importDefault(use_previous_1).default; } });
+var use_properties_1 = require("./use-properties");
+Object.defineProperty(exports, "useProperties", { enumerable: true, get: function () { return __importDefault(use_properties_1).default; } });
+var use_render_state_1 = require("./use-render-state");
+Object.defineProperty(exports, "useRenderState", { enumerable: true, get: function () { return __importDefault(use_render_state_1).default; } });
+var use_route_data_1 = require("./use-route-data");
+Object.defineProperty(exports, "useRouteData", { enumerable: true, get: function () { return __importDefault(use_route_data_1).default; } });
+var use_router_1 = require("./use-router");
+Object.defineProperty(exports, "useRouter", { enumerable: true, get: function () { return __importDefault(use_router_1).default; } });
+var use_scroll_1 = require("./use-scroll");
+Object.defineProperty(exports, "useScroll", { enumerable: true, get: function () { return __importDefault(use_scroll_1).default; } });
+var use_settings_1 = require("./use-settings");
+Object.defineProperty(exports, "useSettings", { enumerable: true, get: function () { return __importDefault(use_settings_1).default; } });
+var use_toggle_1 = require("./use-toggle");
+Object.defineProperty(exports, "useToggle", { enumerable: true, get: function () { return __importDefault(use_toggle_1).default; } });
+var use_transition_end_1 = require("./use-transition-end");
+Object.defineProperty(exports, "useTransitionEnd", { enumerable: true, get: function () { return __importDefault(use_transition_end_1).default; } });
+var use_unique_menu_1 = require("./use-unique-menu");
+Object.defineProperty(exports, "useUniqueMenu", { enumerable: true, get: function () { return __importDefault(use_unique_menu_1).default; } });
+var use_widget_event_1 = require("./use-widget-event");
+Object.defineProperty(exports, "useWidgetEvent", { enumerable: true, get: function () { return __importDefault(use_widget_event_1).default; } });

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

@@ -0,0 +1,4 @@
+import { Container } from '@webprovisions/platform';
+export declare type Action = (action: string, value?: any) => void;
+export declare const useAction: (passedOrigin?: string | undefined, passedContainer?: Container | undefined) => Action;
+export default useAction;

package/lib/hooks/use-action.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAction = void 0;
+var use_component_descriptor_1 = __importDefault(require("./use-component-descriptor"));
+var use_container_1 = __importDefault(require("./use-container"));
+var useAction = function (passedOrigin, passedContainer) {
+    var origin = (0, use_component_descriptor_1.default)().id;
+    var container = (0, use_container_1.default)();
+    return function (action, value) {
+        (passedContainer || container)
+            .getAsync('actionResolver')
+            .then(function (resolver) {
+            resolver.action(passedOrigin || origin, action, value);
+        });
+    };
+};
+exports.useAction = useAction;
+exports.default = exports.useAction;

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

@@ -0,0 +1,4 @@
+import { ComponentDescriptor } from '@telia-ace/widget-core';
+export declare type SetPropertiesAction<T> = (key: string, value: Partial<T>) => void;
+declare const useChildren: () => ComponentDescriptor[];
+export default useChildren;

package/lib/hooks/use-children.js

@@ -0,0 +1,70 @@
+"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_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 useChildren = function () {
+    var node = (0, use_component_node_1.default)();
+    var components = (0, use_component_platform_1.default)();
+    var _a = __read((0, react_1.useState)([]), 2), children = _a[0], setChildren = _a[1];
+    var isMounted = (0, use_is_mounted_1.default)();
+    var updateChildren = (0, react_1.useCallback)(function (node) {
+        if (components && isMounted.current) {
+            var branch = components.getBranch(node);
+            var children_1 = node.getChildren(branch).map(function (child) { return (0, widget_core_1.asDescriptor)(child); });
+            setChildren(children_1);
+        }
+    }, [isMounted, components, setChildren]);
+    (0, react_1.useEffect)(function () {
+        if (node) {
+            updateChildren(node);
+        }
+    }, [node, components]);
+    (0, react_1.useEffect)(function () {
+        if (components) {
+            var _a = __read((0, widget_core_1.createEventSubscriber)(components.events), 2), subscribe = _a[0], unsubscribe_1 = _a[1];
+            subscribe('components:set-layout', function (event, data) {
+                if (node === data.node.parent || data.node.parent === components.nodes.root) {
+                    updateChildren(data.node.parent);
+                }
+            });
+            subscribe('components:node-appended', function (event, data) {
+                if (node === data.node.parent || data.node.parent === components.nodes.root) {
+                    updateChildren(data.node.parent);
+                }
+            });
+            subscribe('components:node-removed', function (event, _a) {
+                var parentNode = _a.parentNode;
+                if (parentNode === node || parentNode === components.nodes.root) {
+                    updateChildren(parentNode);
+                }
+            });
+            return function () {
+                unsubscribe_1();
+            };
+        }
+    }, [node, components, updateChildren]);
+    return children;
+};
+exports.default = useChildren;

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

@@ -0,0 +1,2 @@
+declare const useColumns: () => number;
+export default useColumns;

package/lib/hooks/use-columns.js

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

package/lib/hooks/use-component-descriptor.d.ts

@@ -0,0 +1,2 @@
+declare const useComponentDescriptor: () => import("@telia-ace/widget-core").ComponentDescriptor;
+export default useComponentDescriptor;

package/lib/hooks/use-component-descriptor.js

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

package/lib/hooks/use-component-node.d.ts

@@ -0,0 +1,6 @@
+import { ComponentNode } from '@telia-ace/widget-core';
+/**
+ * Provides the `ComponentNode` for the current context.
+ */
+declare const useComponentNode: (id?: string | undefined) => ComponentNode | undefined;
+export default useComponentNode;

package/lib/hooks/use-component-node.js

@@ -0,0 +1,37 @@
+"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(".");
+var contexts_1 = require("../contexts");
+/**
+ * Provides the `ComponentNode` for the current context.
+ */
+var useComponentNode = function (id) {
+    var descriptor = (0, react_1.useContext)(contexts_1.ComponentNodeContext);
+    var components = (0, _1.useComponentPlatform)();
+    var _a = __read((0, react_1.useState)(), 2), node = _a[0], setNode = _a[1];
+    (0, react_1.useEffect)(function () {
+        if ((id || descriptor.id) && components) {
+            var node_1 = components.nodes.get(id || descriptor.id);
+            setNode(node_1);
+        }
+    }, [id, descriptor.id, components]);
+    return node;
+};
+exports.default = useComponentNode;

package/lib/hooks/use-component-platform.d.ts

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

package/lib/hooks/use-component-platform.js

@@ -0,0 +1,39 @@
+"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 useComponentPlatform = function (passedContainer) {
+    var container = (0, use_container_1.default)();
+    var _a = __read((0, react_1.useState)(null), 2), componentPlatform = _a[0], setComponentPlatform = _a[1];
+    var isMounted = (0, use_is_mounted_1.default)();
+    (0, react_1.useEffect)(function () {
+        widget_core_1.ComponentPlatform.getInstance(passedContainer || container).then(function (platform) {
+            if (isMounted.current) {
+                setComponentPlatform(platform);
+            }
+        });
+    }, [isMounted]);
+    return componentPlatform;
+};
+exports.default = useComponentPlatform;

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

@@ -0,0 +1,3 @@
+import { Container } from '@webprovisions/platform';
+declare const useComponent: (passedType?: string | undefined, passedContainer?: Container | undefined) => void | any | null;
+export default useComponent;

package/lib/hooks/use-component.js

@@ -0,0 +1,57 @@
+"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_descriptor_1 = __importDefault(require("./use-component-descriptor"));
+var use_container_1 = __importDefault(require("./use-container"));
+var use_is_mounted_1 = __importDefault(require("./use-is-mounted"));
+var useComponent = function (passedType, passedContainer) {
+    var descriptor = (0, use_component_descriptor_1.default)();
+    var container = (0, use_container_1.default)();
+    var _a = __read((0, react_1.useState)(undefined), 2), component = _a[0], setComponent = _a[1];
+    var isMounted = (0, use_is_mounted_1.default)();
+    var type = passedType || descriptor.type || '';
+    (0, react_1.useEffect)(function () {
+        if (type) {
+            var unsubscribe_1;
+            (passedContainer || container)
+                .getAsync('componentResolver')
+                .then(function (resolver) {
+                if (isMounted.current) {
+                    var component_1 = resolver.getComponent(type);
+                    setComponent(component_1);
+                }
+                unsubscribe_1 = resolver.registerResolver(type, function (component) {
+                    if (isMounted.current) {
+                        setComponent(component);
+                    }
+                });
+            });
+            return function () {
+                if (unsubscribe_1) {
+                    unsubscribe_1();
+                }
+            };
+        }
+    }, [isMounted, type, passedContainer, container]);
+    return component;
+};
+exports.default = useComponent;

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

@@ -0,0 +1,2 @@
+declare const useContainer: () => import("@webprovisions/platform").Container;
+export default useContainer;

package/lib/hooks/use-container.js

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

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

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

package/lib/hooks/use-context.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 useContext = 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), context = _a[0], setContext = _a[1];
+    var isMounted = (0, use_is_mounted_1.default)();
+    (0, react_1.useEffect)(function () {
+        if (node && isMounted.current) {
+            setContext(node.attributes.context);
+        }
+    }, [isMounted, node]);
+    (0, react_1.useEffect)(function () {
+        if (components) {
+            var unsubscribe_1 = components.events.subscribe('components:context-changed', function (event, data) {
+                if (node === data.node && isMounted.current) {
+                    setContext(data.node.attributes.context);
+                }
+            });
+            return function () {
+                unsubscribe_1();
+            };
+        }
+    }, [isMounted, components]);
+    return context;
+};
+exports.default = useContext;

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

@@ -0,0 +1,3 @@
+export declare type DispatchAction = (key: string, data?: any) => Promise<any>;
+declare const useDispatch: () => DispatchAction;
+export default useDispatch;