@telia-ace/widget-ui 1.0.8 → 1.0.11

package/lib-esm/components/widget-link.js

@@ -1,88 +0,0 @@
-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 __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;
-};
-import { WidgetRenderState } from '@telia-ace/widget-core';
-import { appendClassNames } from '@telia-ace/widget-utilities';
-import { WidgetState } from '@webprovisions/platform';
-import React, { forwardRef, useEffect } from 'react';
-import { useContainer } from '../hooks';
-import Link from './link';
-export default 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 = useContainer();
-    var getWidget = function () {
-        var implementation = container.get('$widget').implementation;
-        return implementation.widgets.get(widgetName);
-    };
-    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 === 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 === 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.createElement(Link, __assign({ className: appendClassNames(className, 'humany-widget-link'), onKeyDown: onEnter, onClick: function (e) {
-            onClick(e);
-            openWidget(e);
-        } }, other, { ref: ref }), children));
-});

package/lib-esm/contexts/index.d.ts

@@ -1,9 +0,0 @@
-/// <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-esm/contexts/index.js

@@ -1,12 +0,0 @@
-import { Container } from '@webprovisions/platform';
-import { createContext } from 'react';
-export var ContainerContext = createContext(new Container());
-export var ColumnContext = createContext(1);
-export var ComponentNodeContext = createContext({
-    id: '',
-    type: '',
-    name: '',
-    branch: '',
-});
-export var ComponentPropertyContext = createContext({});
-export var RoutingContext = createContext(null);

package/lib-esm/create-react-component.js

@@ -1,16 +0,0 @@
-import { extendComponent, } from '@telia-ace/widget-core';
-import { lazy } from '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, lazy(function () { return reactComponent; }));
-        return extendComponent(container, type, fn || (function () { }), type, options);
-    });
-};
-export default createReactComponent;

package/lib-esm/hooks/index.js

@@ -1,26 +0,0 @@
-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 { 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-esm/hooks/use-action.d.ts

@@ -1,4 +0,0 @@
-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-esm/hooks/use-action.js

@@ -1,14 +0,0 @@
-import useComponentDescriptor from './use-component-descriptor';
-import useContainer from './use-container';
-export var useAction = function (passedOrigin, passedContainer) {
-    var origin = useComponentDescriptor().id;
-    var container = useContainer();
-    return function (action, value) {
-        (passedContainer || container)
-            .getAsync('actionResolver')
-            .then(function (resolver) {
-            resolver.action(passedOrigin || origin, action, value);
-        });
-    };
-};
-export default useAction;

package/lib-esm/hooks/use-children.js

@@ -1,65 +0,0 @@
-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;
-};
-import { asDescriptor, createEventSubscriber, } from '@telia-ace/widget-core';
-import { useCallback, useEffect, useState } from 'react';
-import useComponentNode from './use-component-node';
-import useComponentPlatform from './use-component-platform';
-import useIsMounted from './use-is-mounted';
-var useChildren = function () {
-    var node = useComponentNode();
-    var components = useComponentPlatform();
-    var _a = __read(useState([]), 2), children = _a[0], setChildren = _a[1];
-    var isMounted = useIsMounted();
-    var updateChildren = useCallback(function (node) {
-        if (components && isMounted.current) {
-            var branch = components.getBranch(node);
-            var children_1 = node.getChildren(branch).map(function (child) { return asDescriptor(child); });
-            setChildren(children_1);
-        }
-    }, [isMounted, components, setChildren]);
-    useEffect(function () {
-        if (node) {
-            updateChildren(node);
-        }
-    }, [node, components]);
-    useEffect(function () {
-        if (components) {
-            var _a = __read(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;
-};
-export default useChildren;

package/lib-esm/hooks/use-columns.js

@@ -1,4 +0,0 @@
-import { useContext } from 'react';
-import { ColumnContext } from '../contexts';
-var useColumns = function () { return useContext(ColumnContext); };
-export default useColumns;

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

@@ -1,4 +0,0 @@
-import { useContext } from 'react';
-import { ComponentNodeContext } from '../contexts';
-var useComponentDescriptor = function () { return useContext(ComponentNodeContext); };
-export default useComponentDescriptor;

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

@@ -1,35 +0,0 @@
-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;
-};
-import { useContext, useEffect, useState } from 'react';
-import { useComponentPlatform } from '.';
-import { ComponentNodeContext } from '../contexts';
-/**
- * Provides the `ComponentNode` for the current context.
- */
-var useComponentNode = function (id) {
-    var descriptor = useContext(ComponentNodeContext);
-    var components = useComponentPlatform();
-    var _a = __read(useState(), 2), node = _a[0], setNode = _a[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;
-};
-export default useComponentNode;

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

@@ -1,4 +0,0 @@
-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-esm/hooks/use-component-platform.js

@@ -1,34 +0,0 @@
-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;
-};
-import { ComponentPlatform } from '@telia-ace/widget-core';
-import { useEffect, useState } from 'react';
-import useContainer from './use-container';
-import useIsMounted from './use-is-mounted';
-var useComponentPlatform = function (passedContainer) {
-    var container = useContainer();
-    var _a = __read(useState(null), 2), componentPlatform = _a[0], setComponentPlatform = _a[1];
-    var isMounted = useIsMounted();
-    useEffect(function () {
-        ComponentPlatform.getInstance(passedContainer || container).then(function (platform) {
-            if (isMounted.current) {
-                setComponentPlatform(platform);
-            }
-        });
-    }, [isMounted]);
-    return componentPlatform;
-};
-export default useComponentPlatform;

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

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

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

@@ -1,52 +0,0 @@
-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;
-};
-import { useEffect, useState } from 'react';
-import useComponentDescriptor from './use-component-descriptor';
-import useContainer from './use-container';
-import useIsMounted from './use-is-mounted';
-var useComponent = function (passedType, passedContainer) {
-    var descriptor = useComponentDescriptor();
-    var container = useContainer();
-    var _a = __read(useState(undefined), 2), component = _a[0], setComponent = _a[1];
-    var isMounted = useIsMounted();
-    var type = passedType || descriptor.type || '';
-    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;
-};
-export default useComponent;

package/lib-esm/hooks/use-container.js

@@ -1,4 +0,0 @@
-import { useContext } from 'react';
-import { ContainerContext } from '../contexts';
-var useContainer = function () { return useContext(ContainerContext); };
-export default useContainer;

package/lib-esm/hooks/use-context.js

@@ -1,45 +0,0 @@
-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;
-};
-import { useEffect, useState } from 'react';
-import useComponentNode from './use-component-node';
-import useComponentPlatform from './use-component-platform';
-import useIsMounted from './use-is-mounted';
-var useContext = function (id) {
-    var node = useComponentNode(id);
-    var components = useComponentPlatform();
-    var _a = __read(useState({}), 2), context = _a[0], setContext = _a[1];
-    var isMounted = useIsMounted();
-    useEffect(function () {
-        if (node && isMounted.current) {
-            setContext(node.attributes.context);
-        }
-    }, [isMounted, node]);
-    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;
-};
-export default useContext;

package/lib-esm/hooks/use-dispatch.js

@@ -1,59 +0,0 @@
-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;
-};
-import { ComponentQuery } from '@telia-ace/widget-core';
-import { uuid } from '@telia-ace/widget-utilities';
-import { useEffect, useState } from 'react';
-import useComponentDescriptor from './use-component-descriptor';
-import useComponentPlatform from './use-component-platform';
-var useDispatch = function () {
-    var components = useComponentPlatform();
-    var descriptor = useComponentDescriptor();
-    var _a = __read(useState([]), 2), queue = _a[0], setQueue = _a[1];
-    var _b = __read(useState(), 2), actions = _b[0], setActions = _b[1];
-    useEffect(function () {
-        if (components && descriptor) {
-            var component = new ComponentQuery(components).withId(descriptor.id);
-            var actions_1 = components.actions(component, descriptor.type || 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);
-    };
-};
-export default useDispatch;

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

@@ -1,19 +0,0 @@
-import { useEffect, useRef } from 'react';
-export default (function (eventName, handler, element, condition) {
-    if (element === void 0) { element = window; }
-    if (condition === void 0) { condition = function () { return true; }; }
-    var savedHandler = useRef(function () { });
-    useEffect(function () {
-        savedHandler.current = handler;
-    }, [handler]);
-    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-esm/hooks/use-events.js

@@ -1,7 +0,0 @@
-import useContainer from './use-container';
-var useEvents = function (passedContainer) {
-    var container = useContainer();
-    var events = (passedContainer || container).get('$widget').events;
-    return events;
-};
-export default useEvents;

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

@@ -1,12 +0,0 @@
-import { useEffect, useRef } from 'react';
-var useIsMounted = function () {
-    var isMounted = useRef(false);
-    useEffect(function () {
-        isMounted.current = true;
-        return function () {
-            isMounted.current = false;
-        };
-    }, []);
-    return isMounted;
-};
-export default useIsMounted;

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

@@ -1,41 +0,0 @@
-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;
-};
-import { useCallback, useState } from 'react';
-import useEventListener from './use-event-listener';
-var useKeyPress = function (targetKey, action) {
-    // State for keeping track of whether key is pressed
-    var _a = __read(useState(false), 2), keyPressed = _a[0], setKeyPressed = _a[1];
-    var onKeyDown = useCallback(function (event) {
-        var key = event.key;
-        if (key === targetKey) {
-            setKeyPressed(true);
-            if (action) {
-                action(event);
-            }
-        }
-    }, [setKeyPressed, action]);
-    var onKeyUp = useCallback(function (_a) {
-        var key = _a.key;
-        if (key === targetKey) {
-            setKeyPressed(false);
-        }
-    }, [setKeyPressed]);
-    useEventListener('keydown', onKeyDown, window);
-    useEventListener('keyup', onKeyUp, window);
-    return keyPressed;
-};
-export default useKeyPress;

package/lib-esm/hooks/use-layout.js

@@ -1,45 +0,0 @@
-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;
-};
-import { useEffect, useState } from 'react';
-import useComponentNode from './use-component-node';
-import useComponentPlatform from './use-component-platform';
-import useIsMounted from './use-is-mounted';
-var useLayout = function (id) {
-    var node = useComponentNode(id);
-    var components = useComponentPlatform();
-    var _a = __read(useState({}), 2), layout = _a[0], setLayout = _a[1];
-    var isMounted = useIsMounted();
-    useEffect(function () {
-        if (node && isMounted.current) {
-            setLayout(node.attributes.layout);
-        }
-    }, [node, isMounted]);
-    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;
-};
-export default useLayout;

package/lib-esm/hooks/use-previous.js

@@ -1,9 +0,0 @@
-import { useEffect, useRef } from 'react';
-var usePrevious = function (value) {
-    var ref = useRef();
-    useEffect(function () {
-        ref.current = value;
-    });
-    return ref.current;
-};
-export default usePrevious;

package/lib-esm/hooks/use-properties.js

@@ -1,7 +0,0 @@
-import { useContext } from 'react';
-import { ComponentPropertyContext } from '../contexts';
-var useProperties = function () {
-    var properties = useContext(ComponentPropertyContext);
-    return properties;
-};
-export default useProperties;