payload 1.15.5 → 2.0.0-beta.0

package/dist/admin/components/elements/Popup/index.js

@@ -1,134 +1,195 @@
 "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(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
     }
-    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 __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const window_info_1 = require("@faceless-ui/window-info");
-const PopupButton_1 = __importDefault(require("./PopupButton"));
-const useIntersect_1 = __importDefault(require("../../../hooks/useIntersect"));
+const _windowinfo = require("@faceless-ui/window-info");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _useIntersect = /*#__PURE__*/ _interop_require_default(require("../../../hooks/useIntersect"));
+const _PopupTrigger = require("./PopupTrigger");
 require("./index.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
 const baseClass = 'popup';
-const Popup = (props) => {
-    const { className, buttonClassName, render, size = 'small', color = 'light', button, buttonType = 'default', children, showOnHover = false, horizontalAlign: horizontalAlignFromProps = 'left', verticalAlign: verticalAlignFromProps = 'top', initActive = false, onToggleOpen, padding, forceOpen, boundingRef, showScrollbar = false, } = props;
-    const { width: windowWidth, height: windowHeight } = (0, window_info_1.useWindowInfo)();
-    const [intersectionRef, intersectionEntry] = (0, useIntersect_1.default)({
-        threshold: 1,
+const Popup = (props)=>{
+    const { boundingRef, button, buttonClassName, buttonType = 'default', caret = true, children, className, forceOpen, horizontalAlign: horizontalAlignFromProps = 'left', initActive = false, onToggleOpen, render, showOnHover = false, showScrollbar = false, size = 'medium', verticalAlign: verticalAlignFromProps = 'top' } = props;
+    const { height: windowHeight, width: windowWidth } = (0, _windowinfo.useWindowInfo)();
+    const [intersectionRef, intersectionEntry] = (0, _useIntersect.default)({
+        root: boundingRef?.current || null,
         rootMargin: '-100px 0px 0px 0px',
-        root: (boundingRef === null || boundingRef === void 0 ? void 0 : boundingRef.current) || null,
+        threshold: 1
     });
-    const buttonRef = (0, react_1.useRef)(null);
-    const contentRef = (0, react_1.useRef)(null);
-    const [active, setActive] = (0, react_1.useState)(initActive);
-    const [verticalAlign, setVerticalAlign] = (0, react_1.useState)(verticalAlignFromProps);
-    const [horizontalAlign, setHorizontalAlign] = (0, react_1.useState)(horizontalAlignFromProps);
-    const setPosition = (0, react_1.useCallback)(({ horizontal = false, vertical = false }) => {
+    const contentRef = (0, _react.useRef)(null);
+    const [active, setActive] = (0, _react.useState)(initActive);
+    const [verticalAlign, setVerticalAlign] = (0, _react.useState)(verticalAlignFromProps);
+    const [horizontalAlign, setHorizontalAlign] = (0, _react.useState)(horizontalAlignFromProps);
+    const setPosition = (0, _react.useCallback)(({ horizontal = false, vertical = false })=>{
         if (contentRef.current) {
             const bounds = contentRef.current.getBoundingClientRect();
-            const { left: contentLeftPos, right: contentRightPos, top: contentTopPos, bottom: contentBottomPos, } = bounds;
+            const { bottom: contentBottomPos, left: contentLeftPos, right: contentRightPos, top: contentTopPos } = bounds;
             let boundingTopPos = 100;
-            let boundingRightPos = window.innerWidth;
-            let boundingBottomPos = window.innerHeight;
+            let boundingRightPos = document.documentElement.clientWidth;
+            let boundingBottomPos = document.documentElement.clientHeight;
             let boundingLeftPos = 0;
-            if (boundingRef === null || boundingRef === void 0 ? void 0 : boundingRef.current) {
-                ({
-                    top: boundingTopPos,
-                    right: boundingRightPos,
-                    bottom: boundingBottomPos,
-                    left: boundingLeftPos,
-                } = boundingRef.current.getBoundingClientRect());
+            if (boundingRef?.current) {
+                ({ bottom: boundingBottomPos, left: boundingLeftPos, right: boundingRightPos, top: boundingTopPos } = boundingRef.current.getBoundingClientRect());
             }
             if (horizontal) {
                 if (contentRightPos > boundingRightPos && contentLeftPos > boundingLeftPos) {
                     setHorizontalAlign('right');
-                }
-                else if (contentLeftPos < boundingLeftPos && contentRightPos < boundingRightPos) {
+                } else if (contentLeftPos < boundingLeftPos && contentRightPos < boundingRightPos) {
                     setHorizontalAlign('left');
                 }
             }
             if (vertical) {
                 if (contentTopPos < boundingTopPos && contentBottomPos < boundingBottomPos) {
                     setVerticalAlign('bottom');
-                }
-                else if (contentBottomPos > boundingBottomPos && contentTopPos > boundingTopPos) {
+                } else if (contentBottomPos > boundingBottomPos && contentTopPos > boundingTopPos) {
                     setVerticalAlign('top');
                 }
             }
         }
-    }, [boundingRef]);
-    const handleClickOutside = (0, react_1.useCallback)((e) => {
+    }, [
+        boundingRef
+    ]);
+    const handleClickOutside = (0, _react.useCallback)((e)=>{
         if (contentRef.current.contains(e.target)) {
             return;
         }
         setActive(false);
-    }, [contentRef]);
-    (0, react_1.useEffect)(() => {
-        setPosition({ horizontal: true });
-    }, [intersectionEntry, setPosition, windowWidth]);
-    (0, react_1.useEffect)(() => {
-        setPosition({ vertical: true });
-    }, [intersectionEntry, setPosition, windowHeight]);
-    (0, react_1.useEffect)(() => {
-        if (typeof onToggleOpen === 'function')
-            onToggleOpen(active);
+    }, [
+        contentRef
+    ]);
+    (0, _react.useEffect)(()=>{
+        setPosition({
+            horizontal: true
+        });
+    }, [
+        intersectionEntry,
+        setPosition,
+        windowWidth
+    ]);
+    (0, _react.useEffect)(()=>{
+        setPosition({
+            vertical: true
+        });
+    }, [
+        intersectionEntry,
+        setPosition,
+        windowHeight
+    ]);
+    (0, _react.useEffect)(()=>{
+        if (typeof onToggleOpen === 'function') onToggleOpen(active);
         if (active) {
             document.addEventListener('mousedown', handleClickOutside);
-        }
-        else {
+        } else {
             document.removeEventListener('mousedown', handleClickOutside);
         }
-        return () => {
+        return ()=>{
             document.removeEventListener('mousedown', handleClickOutside);
         };
-    }, [active, handleClickOutside, onToggleOpen]);
-    (0, react_1.useEffect)(() => {
+    }, [
+        active,
+        handleClickOutside,
+        onToggleOpen
+    ]);
+    (0, _react.useEffect)(()=>{
         setActive(forceOpen);
-    }, [forceOpen]);
+    }, [
+        forceOpen
+    ]);
     const classes = [
         baseClass,
         className,
         `${baseClass}--size-${size}`,
-        `${baseClass}--color-${color}`,
         `${baseClass}--v-align-${verticalAlign}`,
         `${baseClass}--h-align-${horizontalAlign}`,
         active && `${baseClass}--active`,
-        showScrollbar && `${baseClass}--show-scrollbar`,
+        showScrollbar && `${baseClass}--show-scrollbar`
     ].filter(Boolean).join(' ');
-    return (react_1.default.createElement("div", { className: classes },
-        react_1.default.createElement("div", { ref: buttonRef, className: `${baseClass}__wrapper` }, showOnHover
-            ? (react_1.default.createElement("div", { className: `${baseClass}__on-hover-watch`, onMouseEnter: () => setActive(true), onMouseLeave: () => setActive(false) },
-                react_1.default.createElement(PopupButton_1.default, { className: buttonClassName, buttonType, button, setActive, active })))
-            : (react_1.default.createElement(PopupButton_1.default, { className: buttonClassName, buttonType, button, setActive, active }))),
-        react_1.default.createElement("div", { className: `${baseClass}__content`, ref: contentRef },
-            react_1.default.createElement("div", { className: `${baseClass}__wrap`, ref: intersectionRef },
-                react_1.default.createElement("div", { className: `${baseClass}__scroll`, style: {
-                        padding,
-                    } },
-                    render && render({ close: () => setActive(false) }),
-                    children && children)))));
+    return /*#__PURE__*/ _react.default.createElement("div", {
+        className: classes
+    }, /*#__PURE__*/ _react.default.createElement("div", {
+        className: `${baseClass}__trigger-wrap`
+    }, showOnHover ? /*#__PURE__*/ _react.default.createElement("div", {
+        className: `${baseClass}__on-hover-watch`,
+        onMouseEnter: ()=>setActive(true),
+        onMouseLeave: ()=>setActive(false)
+    }, /*#__PURE__*/ _react.default.createElement(_PopupTrigger.PopupTrigger, {
+        active,
+        button,
+        buttonType,
+        className: buttonClassName,
+        setActive
+    })) : /*#__PURE__*/ _react.default.createElement(_PopupTrigger.PopupTrigger, {
+        active,
+        button,
+        buttonType,
+        className: buttonClassName,
+        setActive
+    })), /*#__PURE__*/ _react.default.createElement("div", {
+        className: `${baseClass}__content`,
+        ref: contentRef
+    }, /*#__PURE__*/ _react.default.createElement("div", {
+        className: `${baseClass}__hide-scrollbar`,
+        ref: intersectionRef
+    }, /*#__PURE__*/ _react.default.createElement("div", {
+        className: `${baseClass}__scroll-container`
+    }, /*#__PURE__*/ _react.default.createElement("div", {
+        className: `${baseClass}__scroll-content`
+    }, render && render({
+        close: ()=>setActive(false)
+    }), children && children))), caret && /*#__PURE__*/ _react.default.createElement("div", {
+        className: `${baseClass}__caret`
+    })));
 };
-exports.default = Popup;
-//# sourceMappingURL=index.js.map
+const _default = Popup;
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9hZG1pbi9jb21wb25lbnRzL2VsZW1lbnRzL1BvcHVwL2luZGV4LnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyB1c2VXaW5kb3dJbmZvIH0gZnJvbSAnQGZhY2VsZXNzLXVpL3dpbmRvdy1pbmZvJ1xuaW1wb3J0IFJlYWN0LCB7IHVzZUNhbGxiYWNrLCB1c2VFZmZlY3QsIHVzZVJlZiwgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCdcblxuaW1wb3J0IHR5cGUgeyBQcm9wcyB9IGZyb20gJy4vdHlwZXMnXG5cbmltcG9ydCB1c2VJbnRlcnNlY3QgZnJvbSAnLi4vLi4vLi4vaG9va3MvdXNlSW50ZXJzZWN0J1xuaW1wb3J0IHsgUG9wdXBUcmlnZ2VyIH0gZnJvbSAnLi9Qb3B1cFRyaWdnZXInXG5pbXBvcnQgJy4vaW5kZXguc2NzcydcblxuY29uc3QgYmFzZUNsYXNzID0gJ3BvcHVwJ1xuXG5jb25zdCBQb3B1cDogUmVhY3QuRkM8UHJvcHM+ID0gKHByb3BzKSA9PiB7XG4gIGNvbnN0IHtcbiAgICBib3VuZGluZ1JlZixcbiAgICBidXR0b24sXG4gICAgYnV0dG9uQ2xhc3NOYW1lLFxuICAgIGJ1dHRvblR5cGUgPSAnZGVmYXVsdCcsXG4gICAgY2FyZXQgPSB0cnVlLFxuICAgIGNoaWxkcmVuLFxuICAgIGNsYXNzTmFtZSxcbiAgICBmb3JjZU9wZW4sXG4gICAgaG9yaXpvbnRhbEFsaWduOiBob3Jpem9udGFsQWxpZ25Gcm9tUHJvcHMgPSAnbGVmdCcsXG4gICAgaW5pdEFjdGl2ZSA9IGZhbHNlLFxuICAgIG9uVG9nZ2xlT3BlbixcbiAgICByZW5kZXIsXG4gICAgc2hvd09uSG92ZXIgPSBmYWxzZSxcbiAgICBzaG93U2Nyb2xsYmFyID0gZmFsc2UsXG4gICAgc2l6ZSA9ICdtZWRpdW0nLFxuICAgIHZlcnRpY2FsQWxpZ246IHZlcnRpY2FsQWxpZ25Gcm9tUHJvcHMgPSAndG9wJyxcbiAgfSA9IHByb3BzXG5cbiAgY29uc3QgeyBoZWlnaHQ6IHdpbmRvd0hlaWdodCwgd2lkdGg6IHdpbmRvd1dpZHRoIH0gPSB1c2VXaW5kb3dJbmZvKClcbiAgY29uc3QgW2ludGVyc2VjdGlvblJlZiwgaW50ZXJzZWN0aW9uRW50cnldID0gdXNlSW50ZXJzZWN0KHtcbiAgICByb290OiBib3VuZGluZ1JlZj8uY3VycmVudCB8fCBudWxsLFxuICAgIHJvb3RNYXJnaW46ICctMTAwcHggMHB4IDBweCAwcHgnLFxuICAgIHRocmVzaG9sZDogMSxcbiAgfSlcblxuICBjb25zdCBjb250ZW50UmVmID0gdXNlUmVmKG51bGwpXG4gIGNvbnN0IFthY3RpdmUsIHNldEFjdGl2ZV0gPSB1c2VTdGF0ZShpbml0QWN0aXZlKVxuICBjb25zdCBbdmVydGljYWxBbGlnbiwgc2V0VmVydGljYWxBbGlnbl0gPSB1c2VTdGF0ZSh2ZXJ0aWNhbEFsaWduRnJvbVByb3BzKVxuICBjb25zdCBbaG9yaXpvbnRhbEFsaWduLCBzZXRIb3Jpem9udGFsQWxpZ25dID0gdXNlU3RhdGUoaG9yaXpvbnRhbEFsaWduRnJvbVByb3BzKVxuXG4gIGNvbnN0IHNldFBvc2l0aW9uID0gdXNlQ2FsbGJhY2soXG4gICAgKHsgaG9yaXpvbnRhbCA9IGZhbHNlLCB2ZXJ0aWNhbCA9IGZhbHNlIH0pID0+IHtcbiAgICAgIGlmIChjb250ZW50UmVmLmN1cnJlbnQpIHtcbiAgICAgICAgY29uc3QgYm91bmRzID0gY29udGVudFJlZi5jdXJyZW50LmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpXG5cbiAgICAgICAgY29uc3Qge1xuICAgICAgICAgIGJvdHRvbTogY29udGVudEJvdHRvbVBvcyxcbiAgICAgICAgICBsZWZ0OiBjb250ZW50TGVmdFBvcyxcbiAgICAgICAgICByaWdodDogY29udGVudFJpZ2h0UG9zLFxuICAgICAgICAgIHRvcDogY29udGVudFRvcFBvcyxcbiAgICAgICAgfSA9IGJvdW5kc1xuXG4gICAgICAgIGxldCBib3VuZGluZ1RvcFBvcyA9IDEwMFxuICAgICAgICBsZXQgYm91bmRpbmdSaWdodFBvcyA9IGRvY3VtZW50LmRvY3VtZW50RWxlbWVudC5jbGllbnRXaWR0aFxuICAgICAgICBsZXQgYm91bmRpbmdCb3R0b21Qb3MgPSBkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQuY2xpZW50SGVpZ2h0XG4gICAgICAgIGxldCBib3VuZGluZ0xlZnRQb3MgPSAwXG5cbiAgICAgICAgaWYgKGJvdW5kaW5nUmVmPy5jdXJyZW50KSB7XG4gICAgICAgICAgOyh7XG4gICAgICAgICAgICBib3R0b206IGJvdW5kaW5nQm90dG9tUG9zLFxuICAgICAgICAgICAgbGVmdDogYm91bmRpbmdMZWZ0UG9zLFxuICAgICAgICAgICAgcmlnaHQ6IGJvdW5kaW5nUmlnaHRQb3MsXG4gICAgICAgICAgICB0b3A6IGJvdW5kaW5nVG9wUG9zLFxuICAgICAgICAgIH0gPSBib3VuZGluZ1JlZi5jdXJyZW50LmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpKVxuICAgICAgICB9XG5cbiAgICAgICAgaWYgKGhvcml6b250YWwpIHtcbiAgICAgICAgICBpZiAoY29udGVudFJpZ2h0UG9zID4gYm91bmRpbmdSaWdodFBvcyAmJiBjb250ZW50TGVmdFBvcyA+IGJvdW5kaW5nTGVmdFBvcykge1xuICAgICAgICAgICAgc2V0SG9yaXpvbnRhbEFsaWduKCdyaWdodCcpXG4gICAgICAgICAgfSBlbHNlIGlmIChjb250ZW50TGVmdFBvcyA8IGJvdW5kaW5nTGVmdFBvcyAmJiBjb250ZW50UmlnaHRQb3MgPCBib3VuZGluZ1JpZ2h0UG9zKSB7XG4gICAgICAgICAgICBzZXRIb3Jpem9udGFsQWxpZ24oJ2xlZnQnKVxuICAgICAgICAgIH1cbiAgICAgICAgfVxuXG4gICAgICAgIGlmICh2ZXJ0aWNhbCkge1xuICAgICAgICAgIGlmIChjb250ZW50VG9wUG9zIDwgYm91bmRpbmdUb3BQb3MgJiYgY29udGVudEJvdHRvbVBvcyA8IGJvdW5kaW5nQm90dG9tUG9zKSB7XG4gICAgICAgICAgICBzZXRWZXJ0aWNhbEFsaWduKCdib3R0b20nKVxuICAgICAgICAgIH0gZWxzZSBpZiAoY29udGVudEJvdHRvbVBvcyA+IGJvdW5kaW5nQm90dG9tUG9zICYmIGNvbnRlbnRUb3BQb3MgPiBib3VuZGluZ1RvcFBvcykge1xuICAgICAgICAgICAgc2V0VmVydGljYWxBbGlnbigndG9wJylcbiAgICAgICAgICB9XG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9LFxuICAgIFtib3VuZGluZ1JlZl0sXG4gIClcblxuICBjb25zdCBoYW5kbGVDbGlja091dHNpZGUgPSB1c2VDYWxsYmFjayhcbiAgICAoZSkgPT4ge1xuICAgICAgaWYgKGNvbnRlbnRSZWYuY3VycmVudC5jb250YWlucyhlLnRhcmdldCkpIHtcbiAgICAgICAgcmV0dXJuXG4gICAgICB9XG5cbiAgICAgIHNldEFjdGl2ZShmYWxzZSlcbiAgICB9LFxuICAgIFtjb250ZW50UmVmXSxcbiAgKVxuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgc2V0UG9zaXRpb24oeyBob3Jpem9udGFsOiB0cnVlIH0pXG4gIH0sIFtpbnRlcnNlY3Rpb25FbnRyeSwgc2V0UG9zaXRpb24sIHdpbmRvd1dpZHRoXSlcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIHNldFBvc2l0aW9uKHsgdmVydGljYWw6IHRydWUgfSlcbiAgfSwgW2ludGVyc2VjdGlvbkVudHJ5LCBzZXRQb3NpdGlvbiwgd2luZG93SGVpZ2h0XSlcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGlmICh0eXBlb2Ygb25Ub2dnbGVPcGVuID09PSAnZnVuY3Rpb24nKSBvblRvZ2dsZU9wZW4oYWN0aXZlKVxuXG4gICAgaWYgKGFjdGl2ZSkge1xuICAgICAgZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcignbW91c2Vkb3duJywgaGFuZGxlQ2xpY2tPdXRzaWRlKVxuICAgIH0gZWxzZSB7XG4gICAgICBkb2N1bWVudC5yZW1vdmVFdmVudExpc3RlbmVyKCdtb3VzZWRvd24nLCBoYW5kbGVDbGlja091dHNpZGUpXG4gICAgfVxuXG4gICAgcmV0dXJuICgpID0+IHtcbiAgICAgIGRvY3VtZW50LnJlbW92ZUV2ZW50TGlzdGVuZXIoJ21vdXNlZG93bicsIGhhbmRsZUNsaWNrT3V0c2lkZSlcbiAgICB9XG4gIH0sIFthY3RpdmUsIGhhbmRsZUNsaWNrT3V0c2lkZSwgb25Ub2dnbGVPcGVuXSlcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIHNldEFjdGl2ZShmb3JjZU9wZW4pXG4gIH0sIFtmb3JjZU9wZW5dKVxuXG4gIGNvbnN0IGNsYXNzZXMgPSBbXG4gICAgYmFzZUNsYXNzLFxuICAgIGNsYXNzTmFtZSxcbiAgICBgJHtiYXNlQ2xhc3N9LS1zaXplLSR7c2l6ZX1gLFxuICAgIGAke2Jhc2VDbGFzc30tLXYtYWxpZ24tJHt2ZXJ0aWNhbEFsaWdufWAsXG4gICAgYCR7YmFzZUNsYXNzfS0taC1hbGlnbi0ke2hvcml6b250YWxBbGlnbn1gLFxuICAgIGFjdGl2ZSAmJiBgJHtiYXNlQ2xhc3N9LS1hY3RpdmVgLFxuICAgIHNob3dTY3JvbGxiYXIgJiYgYCR7YmFzZUNsYXNzfS0tc2hvdy1zY3JvbGxiYXJgLFxuICBdXG4gICAgLmZpbHRlcihCb29sZWFuKVxuICAgIC5qb2luKCcgJylcblxuICByZXR1cm4gKFxuICAgIDxkaXYgY2xhc3NOYW1lPXtjbGFzc2VzfT5cbiAgICAgIDxkaXYgY2xhc3NOYW1lPXtgJHtiYXNlQ2xhc3N9X190cmlnZ2VyLXdyYXBgfT5cbiAgICAgICAge3Nob3dPbkhvdmVyID8gKFxuICAgICAgICAgIDxkaXZcbiAgICAgICAgICAgIGNsYXNzTmFtZT17YCR7YmFzZUNsYXNzfV9fb24taG92ZXItd2F0Y2hgfVxuICAgICAgICAgICAgb25Nb3VzZUVudGVyPXsoKSA9PiBzZXRBY3RpdmUodHJ1ZSl9XG4gICAgICAgICAgICBvbk1vdXNlTGVhdmU9eygpID0+IHNldEFjdGl2ZShmYWxzZSl9XG4gICAgICAgICAgPlxuICAgICAgICAgICAgPFBvcHVwVHJpZ2dlclxuICAgICAgICAgICAgICB7Li4ueyBhY3RpdmUsIGJ1dHRvbiwgYnV0dG9uVHlwZSwgY2xhc3NOYW1lOiBidXR0b25DbGFzc05hbWUsIHNldEFjdGl2ZSB9fVxuICAgICAgICAgICAgLz5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgKSA6IChcbiAgICAgICAgICA8UG9wdXBUcmlnZ2VyXG4gICAgICAgICAgICB7Li4ueyBhY3RpdmUsIGJ1dHRvbiwgYnV0dG9uVHlwZSwgY2xhc3NOYW1lOiBidXR0b25DbGFzc05hbWUsIHNldEFjdGl2ZSB9fVxuICAgICAgICAgIC8+XG4gICAgICAgICl9XG4gICAgICA8L2Rpdj5cblxuICAgICAgPGRpdiBjbGFzc05hbWU9e2Ake2Jhc2VDbGFzc31fX2NvbnRlbnRgfSByZWY9e2NvbnRlbnRSZWZ9PlxuICAgICAgICA8ZGl2IGNsYXNzTmFtZT17YCR7YmFzZUNsYXNzfV9faGlkZS1zY3JvbGxiYXJgfSByZWY9e2ludGVyc2VjdGlvblJlZn0+XG4gICAgICAgICAgPGRpdiBjbGFzc05hbWU9e2Ake2Jhc2VDbGFzc31fX3Njcm9sbC1jb250YWluZXJgfT5cbiAgICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPXtgJHtiYXNlQ2xhc3N9X19zY3JvbGwtY29udGVudGB9PlxuICAgICAgICAgICAgICB7cmVuZGVyICYmIHJlbmRlcih7IGNsb3NlOiAoKSA9PiBzZXRBY3RpdmUoZmFsc2UpIH0pfVxuICAgICAgICAgICAgICB7Y2hpbGRyZW4gJiYgY2hpbGRyZW59XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG5cbiAgICAgICAge2NhcmV0ICYmIDxkaXYgY2xhc3NOYW1lPXtgJHtiYXNlQ2xhc3N9X19jYXJldGB9IC8+fVxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gIClcbn1cblxuZXhwb3J0IGRlZmF1bHQgUG9wdXBcbiJdLCJuYW1lcyI6WyJiYXNlQ2xhc3MiLCJQb3B1cCIsInByb3BzIiwiYm91bmRpbmdSZWYiLCJidXR0b24iLCJidXR0b25DbGFzc05hbWUiLCJidXR0b25UeXBlIiwiY2FyZXQiLCJjaGlsZHJlbiIsImNsYXNzTmFtZSIsImZvcmNlT3BlbiIsImhvcml6b250YWxBbGlnbiIsImhvcml6b250YWxBbGlnbkZyb21Qcm9wcyIsImluaXRBY3RpdmUiLCJvblRvZ2dsZU9wZW4iLCJyZW5kZXIiLCJzaG93T25Ib3ZlciIsInNob3dTY3JvbGxiYXIiLCJzaXplIiwidmVydGljYWxBbGlnbiIsInZlcnRpY2FsQWxpZ25Gcm9tUHJvcHMiLCJoZWlnaHQiLCJ3aW5kb3dIZWlnaHQiLCJ3aWR0aCIsIndpbmRvd1dpZHRoIiwidXNlV2luZG93SW5mbyIsImludGVyc2VjdGlvblJlZiIsImludGVyc2VjdGlvbkVudHJ5IiwidXNlSW50ZXJzZWN0Iiwicm9vdCIsImN1cnJlbnQiLCJyb290TWFyZ2luIiwidGhyZXNob2xkIiwiY29udGVudFJlZiIsInVzZVJlZiIsImFjdGl2ZSIsInNldEFjdGl2ZSIsInVzZVN0YXRlIiwic2V0VmVydGljYWxBbGlnbiIsInNldEhvcml6b250YWxBbGlnbiIsInNldFBvc2l0aW9uIiwidXNlQ2FsbGJhY2siLCJob3Jpem9udGFsIiwidmVydGljYWwiLCJib3VuZHMiLCJnZXRCb3VuZGluZ0NsaWVudFJlY3QiLCJib3R0b20iLCJjb250ZW50Qm90dG9tUG9zIiwibGVmdCIsImNvbnRlbnRMZWZ0UG9zIiwicmlnaHQiLCJjb250ZW50UmlnaHRQb3MiLCJ0b3AiLCJjb250ZW50VG9wUG9zIiwiYm91bmRpbmdUb3BQb3MiLCJib3VuZGluZ1JpZ2h0UG9zIiwiZG9jdW1lbnQiLCJkb2N1bWVudEVsZW1lbnQiLCJjbGllbnRXaWR0aCIsImJvdW5kaW5nQm90dG9tUG9zIiwiY2xpZW50SGVpZ2h0IiwiYm91bmRpbmdMZWZ0UG9zIiwiaGFuZGxlQ2xpY2tPdXRzaWRlIiwiZSIsImNvbnRhaW5zIiwidGFyZ2V0IiwidXNlRWZmZWN0IiwiYWRkRXZlbnRMaXN0ZW5lciIsInJlbW92ZUV2ZW50TGlzdGVuZXIiLCJjbGFzc2VzIiwiZmlsdGVyIiwiQm9vbGVhbiIsImpvaW4iLCJkaXYiLCJvbk1vdXNlRW50ZXIiLCJvbk1vdXNlTGVhdmUiLCJQb3B1cFRyaWdnZXIiLCJyZWYiLCJjbG9zZSJdLCJtYXBwaW5ncyI6Ijs7OzsrQkE4S0E7OztlQUFBOzs7NEJBOUs4QjsrREFDa0M7cUVBSXZDOzhCQUNJO1FBQ3RCOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFFUCxNQUFNQSxZQUFZO0FBRWxCLE1BQU1DLFFBQXlCLENBQUNDO0lBQzlCLE1BQU0sRUFDSkMsV0FBVyxFQUNYQyxNQUFNLEVBQ05DLGVBQWUsRUFDZkMsYUFBYSxTQUFTLEVBQ3RCQyxRQUFRLElBQUksRUFDWkMsUUFBUSxFQUNSQyxTQUFTLEVBQ1RDLFNBQVMsRUFDVEMsaUJBQWlCQywyQkFBMkIsTUFBTSxFQUNsREMsYUFBYSxLQUFLLEVBQ2xCQyxZQUFZLEVBQ1pDLE1BQU0sRUFDTkMsY0FBYyxLQUFLLEVBQ25CQyxnQkFBZ0IsS0FBSyxFQUNyQkMsT0FBTyxRQUFRLEVBQ2ZDLGVBQWVDLHlCQUF5QixLQUFLLEVBQzlDLEdBQUdsQjtJQUVKLE1BQU0sRUFBRW1CLFFBQVFDLFlBQVksRUFBRUMsT0FBT0MsV0FBVyxFQUFFLEdBQUdDLElBQUFBLHlCQUFhO0lBQ2xFLE1BQU0sQ0FBQ0MsaUJBQWlCQyxrQkFBa0IsR0FBR0MsSUFBQUEscUJBQVksRUFBQztRQUN4REMsTUFBTTFCLGFBQWEyQixXQUFXO1FBQzlCQyxZQUFZO1FBQ1pDLFdBQVc7SUFDYjtJQUVBLE1BQU1DLGFBQWFDLElBQUFBLGFBQU0sRUFBQztJQUMxQixNQUFNLENBQUNDLFFBQVFDLFVBQVUsR0FBR0MsSUFBQUEsZUFBUSxFQUFDeEI7SUFDckMsTUFBTSxDQUFDTSxlQUFlbUIsaUJBQWlCLEdBQUdELElBQUFBLGVBQVEsRUFBQ2pCO0lBQ25ELE1BQU0sQ0FBQ1QsaUJBQWlCNEIsbUJBQW1CLEdBQUdGLElBQUFBLGVBQVEsRUFBQ3pCO0lBRXZELE1BQU00QixjQUFjQyxJQUFB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

package/dist/admin/components/elements/Popup/index.scss

@@ -1,41 +1,48 @@
 @import '../../../scss/styles.scss';
 
 .popup {
+  --popup-button-highlight: var(--theme-elevation-200);
+  --popup-bg: var(--theme-input-bg);
+  --popup-text: var(--theme-text);
+  --popup-caret-size: 10px;
+  --popup-x-padding: calc(var(--base) * 0.33);
+  --popup-padding: calc(var(--base) * 0.5);
   position: relative;
 
   &__content {
     position: absolute;
-    background: var(--theme-input-bg);
+    background: var(--popup-bg);
     opacity: 0;
     visibility: hidden;
     pointer-events: none;
     z-index: var(--z-popup);
     max-width: calc(100vw - #{$baseline});
-
-    &:after {
-      content: ' ';
-      position: absolute;
-      top: calc(100% - 1px);
-      border: 12px solid transparent;
-      border-top-color: var(--theme-input-bg);
-    }
+    color: var(--popup-text);
+    border-radius: 4px;
+    padding-left: var(--popup-padding);
+    padding-right: var(--popup-padding);
+    min-width: var(--popup-width, auto);
   }
 
-  &__wrap {
+  &__hide-scrollbar {
     overflow: hidden;
   }
 
-  .popup__scroll {
-    padding: $baseline;
+  &__scroll-container {
     overflow-y: auto;
     white-space: nowrap;
-    padding-right: calc(var(--scrollbar-width) + #{$baseline});
     width: calc(100% + var(--scrollbar-width));
+    padding-top: var(--popup-padding);
+    padding-bottom: var(--popup-padding);
+  }
+
+  &__scroll-content {
+    width: calc(100% - var(--scrollbar-width));
   }
 
   &--show-scrollbar {
-    .popup__scroll {
-      padding-right: 0;
+    .popup__scroll-container,
+    .popup__scroll-content {
       width: 100%;
     }
   }
@@ -50,57 +57,23 @@
   ////////////////////////////////
 
   &--size-small {
-    .popup__scroll {
-      padding: base(.75) calc(var(--scrollbar-width) + #{base(.75)}) base(.75) base(.75);
-    }
-
+    --popup-width: 100px;
     .popup__content {
       @include shadow-m;
     }
-
-    &.popup--h-align-left {
-      .popup__content {
-        left: - base(.5);
-
-        &:after {
-          left: base(.425);
-        }
-      }
-    }
   }
 
-  &--size-large {
+  &--size-medium {
+    --popup-width: 150px;
     .popup__content {
       @include shadow-lg;
     }
-
-    .popup__scroll {
-      padding: base(1.5) calc(var(--scrollbar-width) + #{base(1.5)}) base(1) base(1.5);
-    }
   }
 
-  &--size-wide {
+  &--size-large {
+    --popup-width: 200px;
     .popup__content {
-      @include shadow-m;
-
-      &:after {
-        border: 12px solid transparent;
-        border-top-color: var(--theme-input-bg);
-      }
-    }
-
-    .popup__scroll {
-      padding: base(.25) base(.5);
-    }
-
-    &.popup--align-left {
-      .popup__content {
-        left: - base(.5);
-
-        &:after {
-          left: base(.425);
-        }
-      }
+      @include shadow-lg;
     }
   }
 
@@ -109,12 +82,8 @@
   ////////////////////////////////
 
   &--h-align-left {
-    .popup__content {
-      left: - base(1.75);
-
-      &:after {
-        left: base(1.75);
-      }
+    .popup__caret {
+      left: var(--popup-padding);
     }
   }
 
@@ -122,21 +91,21 @@
     .popup__content {
       left: 50%;
       transform: translateX(-50%);
+    }
 
-      &:after {
-        left: 50%;
-        transform: translateX(-50%);
-      }
+    .popup__caret {
+      left: 50%;
+      transform: translateX(-50%);
     }
   }
 
   &--h-align-right {
     .popup__content {
-      right: - base(1.75);
+      right: 0;
+    }
 
-      &:after {
-        right: base(1.75);
-      }
+    .popup__caret {
+      right: var(--popup-padding);
     }
   }
 
@@ -144,46 +113,32 @@
   // VERTICAL ALIGNMENT
   ////////////////////////////////
 
+  &__caret {
+    position: absolute;
+    border: var(--popup-caret-size) solid transparent;
+  }
+
   &--v-align-top {
     .popup__content {
-      bottom: calc(100% + #{$baseline});
+      @include shadow-lg;
+      bottom: calc(100% + var(--popup-caret-size));
+    }
+
+    .popup__caret {
+      top: calc(100% - 1px);
+      border-top-color: var(--popup-bg);
     }
   }
 
   &--v-align-bottom {
     .popup__content {
       @include shadow-lg-top;
-      top: calc(100% + #{base(.5)});
-
-      &:after {
-        top: unset;
-        bottom: calc(100% - 1px);
-        border-top-color: transparent !important;
-        border-bottom-color: var(--theme-input-bg);
-      }
+      top: calc(100% + var(--popup-caret-size));
     }
 
-    &.popup--color-dark {
-      .popup__content {
-        &:after {
-          border-bottom-color: var(--theme-elevation-800);
-        }
-      }
-    }
-  }
-
-  ////////////////////////////////
-  // COLOR
-  ////////////////////////////////
-
-  &--color-dark {
-    .popup__content {
-      background: var(--theme-elevation-800);
-      color: var(--theme-input-bg);
-
-      &:after {
-        border-top-color: var(--theme-elevation-800);
-      }
+    .popup__caret {
+      bottom: calc(100% - 1px);
+      border-bottom-color: var(--popup-bg);
     }
   }
 
@@ -200,70 +155,55 @@
   }
 
   @include mid-break {
-
-    &__scroll,
-    &--size-large .popup__scroll {
-      padding: base(.75);
-      padding-right: calc(var(--scrollbar-width) + #{base(.75)});
-    }
-
-    &--h-align-left {
-      .popup__content {
-        left: - base(.5);
-
-        &:after {
-          left: base(.5);
-        }
-      }
-    }
+    --popup-padding: calc(var(--base) * 0.25);
 
     &--h-align-center {
       .popup__content {
         left: 50%;
         transform: translateX(-0%);
+      }
 
-        &:after {
-          left: 50%;
-          transform: translateX(-0%);
-        }
+      .popup__caret {
+        left: 50%;
+        transform: translateX(-0%);
       }
     }
 
     &--h-align-right {
       .popup__content {
-        right: - base(.5);
+        right: 0;
+      }
 
-        &:after {
-          right: base(.5);
-        }
+      .popup__caret {
+        right: var(--popup-padding);
       }
     }
 
     &--force-h-align-left {
       .popup__content {
-        left: - base(.5);
+        left: 0;
         right: unset;
         transform: unset;
+      }
 
-        &:after {
-          left: base(.5);
-          right: unset;
-          transform: unset;
-        }
+      .popup__caret {
+        left: var(--popup-padding);
+        right: unset;
+        transform: unset;
       }
     }
 
     &--force-h-align-right {
       .popup__content {
-        right: - base(.5);
+        right: 0;
         left: unset;
         transform: unset;
+      }
 
-        &:after {
-          right: base(.5);
-          left: unset;
-          transform: unset;
-        }
+      .popup__caret {
+        right: var(--popup-padding);
+        left: unset;
+        transform: unset;
       }
     }
   }

package/dist/admin/components/elements/Popup/types.js

@@ -1,3 +1,6 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=types.js.map
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiJ9