@telia-ace/widget-ui 1.0.0

package/LICENSE.txt

@@ -0,0 +1,6 @@
+Copyright © 2021, Telia Company AB. All rights reserved.
+
+THIS PACKAGE AND CONTAINING SOFTWARE IS PART OF
+THE HUMANY SERVICE. BY USING THIS SOFTWARE YOU
+AGREE TO THE FOLLOWING TERMS AND CONDITIONS:
+http://www.humany.com/legal

package/README.md

@@ -0,0 +1,3 @@
+# `@telia-ace/widget-ui`
+
+Generic UI components for ACE widgets.

package/lib/components/anchor-link.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { GenericHashLinkProps } from '../utils';
+declare const AnchorLink: React.SFC<GenericHashLinkProps>;
+export default AnchorLink;

package/lib/components/anchor-link.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var utils_1 = require("../utils");
+var AnchorLink = function (props) {
+    return (0, utils_1.genericHashLink)(props, 'a');
+};
+exports.default = AnchorLink;

package/lib/components/button.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare type Props = React.ComponentProps<'button'>;
+declare const _default: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & React.RefAttributes<HTMLButtonElement>>;
+export default _default;

package/lib/components/button.js

@@ -0,0 +1,64 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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_utilities_1 = require("@telia-ace/widget-utilities");
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var utils_1 = require("../utils");
+exports.default = (0, react_1.forwardRef)(function (_a, ref) {
+    var className = _a.className, children = _a.children, other = __rest(_a, ["className", "children"]);
+    return (react_1.default.createElement(StyledButton, __assign({ type: "button", className: (0, widget_utilities_1.appendClassNames)(className, 'humany-button') }, (0, utils_1.convertToStringAttributes)(other), { ref: ref }), children));
+});
+var StyledButton = styled_components_1.default.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    -webkit-appearance: button;\n    text-transform: none;\n    overflow: visible;\n    outline: none;\n    border: none;\n    background-color: transparent;\n    cursor: pointer;\n    font-family: inherit;\n    font-size: inherit;\n    line-height: normal;\n    margin: 0;\n    padding: 0;\n"], ["\n    -webkit-appearance: button;\n    text-transform: none;\n    overflow: visible;\n    outline: none;\n    border: none;\n    background-color: transparent;\n    cursor: pointer;\n    font-family: inherit;\n    font-size: inherit;\n    line-height: normal;\n    margin: 0;\n    padding: 0;\n"])));
+var templateObject_1;

package/lib/components/checkbox.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare type Props = Merge<React.ComponentProps<'input'>, {
+    onChange?: (value: string, checked: boolean) => void;
+    onEnter?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+}>;
+declare const Checkbox: React.SFC<Props>;
+export default Checkbox;

package/lib/components/checkbox.js

@@ -0,0 +1,39 @@
+"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 __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_utilities_1 = require("@telia-ace/widget-utilities");
+var react_1 = __importDefault(require("react"));
+var utils_1 = require("../utils");
+var Checkbox = function (_a) {
+    var _b = _a.onChange, onChange = _b === void 0 ? function () { } : _b, _c = _a.onEnter, onEnter = _c === void 0 ? function () { } : _c, className = _a.className, other = __rest(_a, ["onChange", "onEnter", "className"]);
+    return (react_1.default.createElement("input", __assign({ className: (0, widget_utilities_1.appendClassNames)(className, 'humany-checkbox'), onKeyDown: function (e) {
+            if (e.key === 'Enter') {
+                onEnter(e);
+            }
+        }, onChange: function (e) { return onChange(e.target.value, e.currentTarget.checked); } }, (0, utils_1.convertToStringAttributes)(other))));
+};
+exports.default = Checkbox;

package/lib/components/drawer/drawer.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export declare enum AnimationType {
+    SlideInLeft = "slide-in-left",
+    SlideInRight = "slide-in-right",
+    SlideInBottom = "slide-in-bottom",
+    SlideInTop = "slide-in-top"
+}
+export declare type Props = {
+    header?: string | React.ReactNode;
+    className?: string;
+    animation?: {
+        type: AnimationType;
+        duration?: number;
+    };
+    trigger: React.ReactElement;
+    fullScreen?: boolean;
+    closeButtonAriaLabel?: string;
+    onToggle?: (visible: boolean) => void;
+};
+declare const Drawer: React.FC<Props>;
+export default Drawer;

package/lib/components/drawer/drawer.js

@@ -0,0 +1,150 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 __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 };
+};
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnimationType = void 0;
+var widget_utilities_1 = require("@telia-ace/widget-utilities");
+var react_1 = __importStar(require("react"));
+var react_transition_group_1 = require("react-transition-group");
+var styled_components_1 = __importStar(require("styled-components"));
+var hooks_1 = require("../../hooks");
+var styles_1 = require("../../styles");
+var portal_1 = __importDefault(require("../portal"));
+var symbol_badge_1 = __importDefault(require("../symbol-badge"));
+var typography_1 = __importDefault(require("../typography"));
+var AnimationType;
+(function (AnimationType) {
+    AnimationType["SlideInLeft"] = "slide-in-left";
+    AnimationType["SlideInRight"] = "slide-in-right";
+    AnimationType["SlideInBottom"] = "slide-in-bottom";
+    AnimationType["SlideInTop"] = "slide-in-top";
+    // Fade = 'fade',
+})(AnimationType = exports.AnimationType || (exports.AnimationType = {}));
+var defaultDuration = 300;
+var Drawer = function (_a) {
+    var className = _a.className, children = _a.children, header = _a.header, onToggle = _a.onToggle, trigger = _a.trigger, _b = _a.fullScreen, fullScreen = _b === void 0 ? false : _b, closeButtonAriaLabel = _a.closeButtonAriaLabel, _c = _a.animation, animation = _c === void 0 ? {
+        type: AnimationType.SlideInBottom,
+    } : _c;
+    var _d = animation.duration, duration = _d === void 0 ? defaultDuration : _d;
+    var closeButtonRef = (0, react_1.useRef)();
+    var triggerRef = (0, react_1.useRef)();
+    var _e = __read((0, hooks_1.useScroll)(true), 2), css = _e[0], ref = _e[1];
+    var _f = __read((0, hooks_1.useToggle)(), 2), visible = _f[0], toggleVisible = _f[1];
+    var previousVisible = (0, hooks_1.usePrevious)(visible);
+    var id = (0, react_1.useRef)((0, widget_utilities_1.uuid)());
+    (0, react_1.useEffect)(function () {
+        if (onToggle) {
+            onToggle(visible);
+        }
+    }, [visible]);
+    var esc = (0, hooks_1.useKeyPress)('Escape');
+    (0, react_1.useEffect)(function () {
+        if (esc) {
+            toggleVisible(false);
+        }
+    }, [esc]);
+    (0, hooks_1.useEventListener)('click', function (event) {
+        var target = event.target;
+        if (!triggerRef.current || !ref.current || !target) {
+            return;
+        }
+        if (triggerRef.current !== target &&
+            ref.current !== target &&
+            !ref.current.contains(target) &&
+            !triggerRef.current.contains(target)) {
+            toggleVisible(false);
+        }
+    }, window);
+    var closeMenus = (0, hooks_1.useUniqueMenu)(id.current, function () {
+        toggleVisible(false);
+    });
+    (0, hooks_1.useWidgetEvent)('router:changed', function () {
+        toggleVisible(false);
+    });
+    (0, react_1.useEffect)(function () {
+        if (visible && closeButtonRef.current) {
+            closeButtonRef.current.focus();
+        }
+        else if (!visible && triggerRef.current && previousVisible) {
+            triggerRef.current.focus();
+        }
+    }, [visible, closeButtonRef.current, triggerRef.current]);
+    var WrapperWithAnimation = animations[animation.type];
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(react_transition_group_1.CSSTransition, { in: visible, className: "humany-drawer-transition", classNames: "humany-drawer-transition", unmountOnExit: true, timeout: duration },
+            react_1.default.createElement(portal_1.default, null,
+                react_1.default.createElement(WrapperWithAnimation, { duration: duration, fullScreen: fullScreen, className: (0, widget_utilities_1.appendClassNames)(className, 'humany-drawer', "humany-drawer-".concat(id.current)), clientHeight: document.body.clientHeight, css: css, ref: ref },
+                    react_1.default.createElement(styles_1.CloseButton, { onClick: function () { return toggleVisible(false); }, tabIndex: 0, ref: closeButtonRef, "aria-label": closeButtonAriaLabel },
+                        react_1.default.createElement(symbol_badge_1.default, { symbol: { type: 'Svg', content: 'close' } })),
+                    !!header && (react_1.default.createElement(Header, { variant: "h1", className: "humany-drawer-header" }, header)),
+                    children))),
+        react_1.default.cloneElement(trigger, {
+            onClick: function (event) {
+                toggleVisible();
+                closeMenus();
+            },
+            ref: triggerRef,
+            'aria-label': trigger.props.title,
+            'aria-expanded': visible,
+        })));
+};
+exports.default = Drawer;
+var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    position: fixed;\n    bottom: 0;\n    left: 0;\n    border: ", ";\n    width: 100%;\n    box-shadow: ", ";\n    background: #ffffff;\n    ", "\n"], ["\n    font-family: ", ";\n    font-size: ", ";\n    position: fixed;\n    bottom: 0;\n    left: 0;\n    border: ", ";\n    width: 100%;\n    box-shadow: ", ";\n    background: #ffffff;\n    ", "\n"])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.type; }, function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { return p.theme.border; }, function (p) { return p.theme.boxShadow; }, function (p) { return p.css && p.css; });
+var Header = (0, styled_components_1.default)(typography_1.default)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    padding: ", ";\n    margin: 0;\n    text-align: center;\n    border-bottom: #eeeeee 1px solid;\n    background: #ffffff;\n    position: relative;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    font-weight: bold;\n    color: ", ";\n    font-size: ", ";\n    line-height: 1.2em;\n"], ["\n    padding: ", ";\n    margin: 0;\n    text-align: center;\n    border-bottom: #eeeeee 1px solid;\n    background: #ffffff;\n    position: relative;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    font-weight: bold;\n    color: ", ";\n    font-size: ", ";\n    line-height: 1.2em;\n"])), function (p) { return p.theme.sizes.normal; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; }, function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; });
+var AnimationBase = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    transition: ", "ms;\n"], ["\n    transition: ", "ms;\n"])), function (p) { return p.duration; });
+var WrapperWithSlideInBottom = (0, styled_components_1.default)(Wrapper)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    max-height: 0;\n    ", "\n\n    &.humany-drawer-transition-enter {\n        max-height: 0;\n    }\n    &.humany-drawer-transition-enter-active,\n    &.humany-drawer-transition-enter-done,\n    &.humany-drawer-transition-exit {\n        max-height: ", ";\n    }\n\n    &.humany-drawer-transition-exit-active,\n    &.humany-drawer-transition-exit-done {\n        max-height: 0;\n    }\n"], ["\n    max-height: 0;\n    ", "\n\n    &.humany-drawer-transition-enter {\n        max-height: 0;\n    }\n    &.humany-drawer-transition-enter-active,\n    &.humany-drawer-transition-enter-done,\n    &.humany-drawer-transition-exit {\n        max-height: ", ";\n    }\n\n    &.humany-drawer-transition-exit-active,\n    &.humany-drawer-transition-exit-done {\n        max-height: 0;\n    }\n"])), AnimationBase, function (p) { return (p.fullScreen ? '100%' : '400px'); });
+var WrapperWithSlideInRight = (0, styled_components_1.default)(Wrapper)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    ", "\n    transform: translateX(100%);\n    height: ", ";\n\n    &.humany-drawer-transition-enter {\n        transform: translateX(100%);\n    }\n    &.humany-drawer-transition-enter-active,\n    &.humany-drawer-transition-enter-done,\n    &.humany-drawer-transition-exit {\n        transform: translateX(0);\n    }\n\n    &.humany-drawer-transition-exit-active,\n    &.humany-drawer-transition-exit-done {\n        transform: translateX(100%);\n    }\n"], ["\n    ", "\n    transform: translateX(100%);\n    height: ", ";\n\n    &.humany-drawer-transition-enter {\n        transform: translateX(100%);\n    }\n    &.humany-drawer-transition-enter-active,\n    &.humany-drawer-transition-enter-done,\n    &.humany-drawer-transition-exit {\n        transform: translateX(0);\n    }\n\n    &.humany-drawer-transition-exit-active,\n    &.humany-drawer-transition-exit-done {\n        transform: translateX(100%);\n    }\n"])), AnimationBase, function (p) { return (p.fullScreen ? '100%' : 'auto'); });
+var WrapperWithSlideInLeft = (0, styled_components_1.default)(Wrapper)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    ", "\n    transform: translateX(-100%);\n    height: ", ";\n\n    &.humany-drawer-transition-enter {\n        transform: translateX(-100%);\n    }\n    &.humany-drawer-transition-enter-active,\n    &.humany-drawer-transition-enter-done,\n    &.humany-drawer-transition-exit {\n        transform: translateX(0);\n    }\n\n    &.humany-drawer-transition-exit-active,\n    &.humany-drawer-transition-exit-done {\n        transform: translateX(-100%);\n    }\n"], ["\n    ", "\n    transform: translateX(-100%);\n    height: ", ";\n\n    &.humany-drawer-transition-enter {\n        transform: translateX(-100%);\n    }\n    &.humany-drawer-transition-enter-active,\n    &.humany-drawer-transition-enter-done,\n    &.humany-drawer-transition-exit {\n        transform: translateX(0);\n    }\n\n    &.humany-drawer-transition-exit-active,\n    &.humany-drawer-transition-exit-done {\n        transform: translateX(-100%);\n    }\n"])), AnimationBase, function (p) { return (p.fullScreen ? '100%' : 'auto'); });
+var WrapperWithSlideInTop = (0, styled_components_1.default)(Wrapper)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    ", "\n    bottom: unset;\n    top: 0;\n    height: 0;\n\n    &.humany-drawer-transition-enter {\n        height: 0;\n    }\n    &.humany-drawer-transition-enter-active,\n    &.humany-drawer-transition-enter-done,\n    &.humany-drawer-transition-exit {\n        height: ", "px;\n    }\n\n    &.humany-drawer-transition-exit-active,\n    &.humany-drawer-transition-exit-done {\n        height: 0;\n    }\n"], ["\n    ", "\n    bottom: unset;\n    top: 0;\n    height: 0;\n\n    &.humany-drawer-transition-enter {\n        height: 0;\n    }\n    &.humany-drawer-transition-enter-active,\n    &.humany-drawer-transition-enter-done,\n    &.humany-drawer-transition-exit {\n        height: ", "px;\n    }\n\n    &.humany-drawer-transition-exit-active,\n    &.humany-drawer-transition-exit-done {\n        height: 0;\n    }\n"])), AnimationBase, function (p) { return p.clientHeight; });
+var animations = (_a = {},
+    _a[AnimationType.SlideInBottom] = WrapperWithSlideInBottom,
+    _a[AnimationType.SlideInRight] = WrapperWithSlideInRight,
+    _a[AnimationType.SlideInLeft] = WrapperWithSlideInLeft,
+    _a[AnimationType.SlideInTop] = WrapperWithSlideInTop,
+    _a);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/lib/components/drawer/index.d.ts

@@ -0,0 +1,3 @@
+import Drawer, { AnimationType } from './drawer';
+export { AnimationType };
+export default Drawer;

package/lib/components/drawer/index.js

@@ -0,0 +1,29 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnimationType = void 0;
+var drawer_1 = __importStar(require("./drawer"));
+Object.defineProperty(exports, "AnimationType", { enumerable: true, get: function () { return drawer_1.AnimationType; } });
+exports.default = drawer_1.default;

package/lib/components/dropdown/dropdown.d.ts

@@ -0,0 +1,9 @@
+import React, { ReactElement } from 'react';
+export declare type Props = {
+    className?: string;
+    children?: any;
+    trigger: ReactElement;
+    closeButtonAriaLabel?: string;
+};
+declare const Dropdown: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export default Dropdown;

package/lib/components/dropdown/dropdown.js

@@ -0,0 +1,155 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 __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 = __importStar(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var hooks_1 = require("../../hooks");
+var styles_1 = require("../../styles");
+var portal_1 = __importDefault(require("../portal"));
+var symbol_badge_1 = __importDefault(require("../symbol-badge"));
+var use_position_1 = __importDefault(require("./use-position"));
+var Dropdown = react_1.default.forwardRef(function (_a, ref) {
+    var _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.children, children = _c === void 0 ? null : _c, trigger = _a.trigger, closeButtonAriaLabel = _a.closeButtonAriaLabel, props = __rest(_a, ["className", "children", "trigger", "closeButtonAriaLabel"]);
+    var closeButtonRef = (0, react_1.useRef)();
+    var triggerRef = (0, react_1.useRef)();
+    var innerRef = (0, react_1.useRef)();
+    (0, react_1.useImperativeHandle)(ref, function () { return innerRef.current; }, [innerRef.current]);
+    var id = (0, react_1.useRef)((0, widget_utilities_1.uuid)());
+    var _d = __read((0, react_1.useState)(false), 2), visible = _d[0], setVisible = _d[1];
+    var previousVisible = (0, hooks_1.usePrevious)(visible);
+    var _e = __read((0, use_position_1.default)(visible, id.current, innerRef.current), 2), _f = _e[0], x = _f.x, y = _f.y, set = _e[1];
+    var esc = (0, hooks_1.useKeyPress)('Escape');
+    (0, react_1.useEffect)(function () {
+        if (esc) {
+            setVisible(false);
+        }
+    }, [esc]);
+    (0, react_1.useEffect)(function () {
+        if (visible && closeButtonRef.current) {
+            closeButtonRef.current.focus();
+        }
+        else if (!visible && triggerRef.current && previousVisible) {
+            triggerRef.current.focus();
+        }
+    }, [visible, closeButtonRef.current, triggerRef.current]);
+    (0, hooks_1.useEventListener)('click', function (event) {
+        var target = event.target;
+        if (!innerRef.current || !target) {
+            return;
+        }
+        if (innerRef.current !== target && !innerRef.current.contains(target)) {
+            setVisible(false);
+        }
+    }, window);
+    (0, hooks_1.useWidgetEvent)('router:changed', function () {
+        setVisible(false);
+    });
+    var closeMenus = (0, hooks_1.useUniqueMenu)(id.current, function () {
+        setVisible(false);
+    });
+    var onTriggerClick = (0, react_1.useCallback)(function (event) {
+        event.stopPropagation();
+        set(event, triggerRef.current);
+        setVisible(!visible);
+        closeMenus();
+    }, [closeMenus, set, setVisible]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        visible && (react_1.default.createElement(portal_1.default, null,
+            react_1.default.createElement(StyledDropdown, __assign({ className: (0, widget_utilities_1.appendClassNames)('humany-dropdown', "humany-dropdown-".concat(id.current), className) }, props, { x: x, y: y, ref: innerRef }),
+                react_1.default.createElement(styles_1.CloseButton, { onClick: function () { return setVisible(false); }, tabIndex: 0, ref: closeButtonRef, "aria-label": closeButtonAriaLabel },
+                    react_1.default.createElement(symbol_badge_1.default, { symbol: { type: 'Svg', content: 'close' } })),
+                children))),
+        react_1.default.cloneElement(trigger, {
+            onClick: onTriggerClick,
+            ref: triggerRef,
+            'aria-label': trigger.props.title,
+            'aria-expanded': visible,
+        })));
+});
+exports.default = Dropdown;
+var StyledDropdown = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    padding: ", ";\n    min-width: 150px;\n    position: absolute;\n    box-shadow: ", ";\n\n    ", ";\n"], ["\n    ", "\n    padding: ", ";\n    min-width: 150px;\n    position: absolute;\n    box-shadow: ", ";\n\n    ", ";\n"])), styles_1.contentBox, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.medium; }, function (p) { return p.theme.boxShadow; }, function (p) {
+    var _a, _b, _c;
+    var css = '';
+    if (p.y > 0) {
+        css += "top: calc(".concat(((_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small) || '0px', " + ").concat(p.y || '0', "px);");
+    }
+    else {
+        css += "bottom: ".concat(((_b = p.theme.sizes) === null || _b === void 0 ? void 0 : _b.normal) || '0px', ";");
+    }
+    if (p.x > 0) {
+        css += "right: ".concat(p.x || '0', "px;");
+    }
+    else {
+        css += "left: ".concat(((_c = p.theme.sizes) === null || _c === void 0 ? void 0 : _c.normal) || '0px', ";");
+    }
+    return css;
+});
+var templateObject_1;

package/lib/components/dropdown/index.d.ts

@@ -0,0 +1,4 @@
+import Dropdown from './dropdown';
+export type { Props } from './dropdown';
+export { default as useCursorPosition } from './use-position';
+export default Dropdown;

package/lib/components/dropdown/index.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCursorPosition = void 0;
+var dropdown_1 = __importDefault(require("./dropdown"));
+var use_position_1 = require("./use-position");
+Object.defineProperty(exports, "useCursorPosition", { enumerable: true, get: function () { return __importDefault(use_position_1).default; } });
+exports.default = dropdown_1.default;

package/lib/components/dropdown/use-position.d.ts

@@ -0,0 +1,5 @@
+export declare const usePosition: (visible: boolean, id: string, element?: HTMLDivElement | undefined) => [{
+    x: number;
+    y: number;
+}, (event: React.MouseEvent, trigger?: HTMLElement | undefined) => void];
+export default usePosition;

package/lib/components/dropdown/use-position.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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePosition = void 0;
+var react_1 = require("react");
+var usePosition = function (visible, id, element) {
+    var _a = __read((0, react_1.useState)(0), 2), posX = _a[0], setPosX = _a[1];
+    var _b = __read((0, react_1.useState)(0), 2), posY = _b[0], setPosY = _b[1];
+    var set = (0, react_1.useCallback)(function (event, trigger) {
+        event.preventDefault();
+        if (trigger) {
+            var clientRect = trigger.getBoundingClientRect();
+            setPosX(Math.max(document.body.clientWidth - clientRect.right, 1));
+            setPosY(clientRect.bottom + window.scrollY);
+        }
+    }, [posX, posY, setPosX, setPosY]);
+    (0, react_1.useEffect)(function () {
+        if (!element || !visible) {
+            return;
+        }
+        var clientRect = element.getBoundingClientRect();
+        var newPos = {
+            x: posX,
+            y: posY,
+        };
+        if (clientRect.left < 0) {
+            newPos.x = 0;
+        }
+        if (clientRect.bottom > window.innerHeight) {
+            newPos.y = 0;
+        }
+        if (newPos.x !== posX) {
+            setPosX(newPos.x);
+        }
+        if (newPos.y !== posY) {
+            setPosY(newPos.y);
+        }
+    }, [element, visible, id]);
+    return [{ x: posX, y: posY }, set];
+};
+exports.usePosition = usePosition;
+exports.default = exports.usePosition;

package/lib/components/empty.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare type Props = {};
+declare const Empty: React.SFC<Props>;
+export default Empty;