@imposium-hub/components 2.2.38 → 2.2.40-0

package/dist/styles.less

@@ -2977,3 +2977,148 @@ h3{
 	}
 }
 
+.contextmenu {
+	background: #161616;
+    position: absolute;
+    top: 20px;
+    min-width: 125px;
+    padding: 3px;
+    z-index: 1000;
+	.submenu {
+		position: relative;
+		&:hover>.contextmenu__item {
+			background-color: #f1f1f1;
+		}
+	}
+	.submenu__item {
+		background-color: #ffffff;
+		border-radius: 4px;
+		border: solid 1px #cccccc;
+		left: 100%;
+		opacity: 0;
+		padding: 5px 0;
+		position: absolute;
+		top: 0;
+		visibility: hidden;
+		width: 100%;
+	}
+	.submenu>.contextmenu__item {
+		&:after {
+			border-color: transparent transparent transparent #000000;
+			border-style: solid;
+			border-width: 5px 8px;
+			content: '';
+			height: 0;
+			position: absolute;
+			right: 0px;
+			top: 50%;
+			transform: translateY(-50%);
+			transition: 0.2s;
+			width: 0;
+		}
+	}
+}
+.contextmenu__item {
+	padding: 3px;
+    box-sizing: border-box; 
+    cursor: pointer;
+	&:hover {
+		&:not(.contextmenu__item--disabled) {
+			background-color: #393939;
+		}
+	}
+}
+.contextmenu__item--disabled {
+	cursor: no-drop;
+	opacity: 0.5;
+}
+.fade-enter {
+	opacity: 0;
+}
+.fade-enter-active {
+	opacity: 1;
+	transition: opacity 200ms;
+}
+.fade-exit {
+	opacity: 1;
+}
+.fade-exit-active {
+	opacity: 0;
+	transition: opacity 200ms;
+}
+.zoom-enter {
+	opacity: 0;
+	transform-origin: top left;
+	transform: scale(0.8);
+}
+.zoom-enter-active {
+	opacity: 1;
+	transform-origin: top left;
+	transform: scale(1);
+	transition: opacity 200ms, transform 200ms;
+}
+.zoom-exit {
+	opacity: 1;
+	transform-origin: top left;
+	transform: scale(1);
+}
+.zoom-exit-active {
+	opacity: 0;
+	transform-origin: top left;
+	transform: scale(0.8);
+	transition: opacity 200ms, transform 200ms;
+}
+.toTopLeft-enter {
+	opacity: 0;
+	transform: translate(10px, 10px);
+}
+.toTopLeft-enter-active {
+	opacity: 1;
+	transform: translate(0px, 0px);
+	transition: opacity 200ms, transform 200ms;
+}
+.toTopLeft-exit {
+	opacity: 1;
+	transform: translate(0px, 0px);
+}
+.toTopLeft-exit-active {
+	opacity: 0;
+	transform: translate(10px, 10px);
+	transition: opacity 200ms, transform 200ms;
+}
+.rightToLeft-enter {
+	opacity: 0;
+	transform: translateX(10px);
+}
+.rightToLeft-enter-active {
+	opacity: 1;
+	transform: translateX(0px);
+	transition: opacity 200ms, transform 200ms;
+}
+.rightToLeft-exit {
+	opacity: 1;
+	transform: translateX(0px);
+}
+.rightToLeft-exit-active {
+	opacity: 0;
+	transform: translateX(10px);
+	transition: opacity 200ms, transform 200ms;
+}
+.pop-enter {
+	opacity: 0;
+	transform: scale(0.8);
+}
+.pop-enter-active {
+	opacity: 1;
+	transform: scale(1);
+	transition: opacity 200ms, transform 200ms;
+}
+.pop-exit {
+	opacity: 1;
+	transform: scale(1);
+}
+.pop-exit-active {
+	opacity: 0;
+	transform: scale(0.8);
+	transition: opacity 200ms, transform 200ms;
+}

package/less/components/context-menu.less

@@ -0,0 +1,145 @@
+.contextmenu {
+	background: #161616;
+    position: absolute;
+    top: 20px;
+    min-width: 125px;
+    padding: 3px;
+    z-index: 1000;
+	.submenu {
+		position: relative;
+		&:hover>.contextmenu__item {
+			background-color: #f1f1f1;
+		}
+	}
+	.submenu__item {
+		background-color: #ffffff;
+		border-radius: 4px;
+		border: solid 1px #cccccc;
+		left: 100%;
+		opacity: 0;
+		padding: 5px 0;
+		position: absolute;
+		top: 0;
+		visibility: hidden;
+		width: 100%;
+	}
+	.submenu>.contextmenu__item {
+		&:after {
+			border-color: transparent transparent transparent #000000;
+			border-style: solid;
+			border-width: 5px 8px;
+			content: '';
+			height: 0;
+			position: absolute;
+			right: 0px;
+			top: 50%;
+			transform: translateY(-50%);
+			transition: 0.2s;
+			width: 0;
+		}
+	}
+}
+.contextmenu__item {
+	padding: 3px;
+    box-sizing: border-box; 
+    cursor: pointer;
+	&:hover {
+		&:not(.contextmenu__item--disabled) {
+			background-color: #393939;
+		}
+	}
+}
+.contextmenu__item--disabled {
+	cursor: no-drop;
+	opacity: 0.5;
+}
+.fade-enter {
+	opacity: 0;
+}
+.fade-enter-active {
+	opacity: 1;
+	transition: opacity 200ms;
+}
+.fade-exit {
+	opacity: 1;
+}
+.fade-exit-active {
+	opacity: 0;
+	transition: opacity 200ms;
+}
+.zoom-enter {
+	opacity: 0;
+	transform-origin: top left;
+	transform: scale(0.8);
+}
+.zoom-enter-active {
+	opacity: 1;
+	transform-origin: top left;
+	transform: scale(1);
+	transition: opacity 200ms, transform 200ms;
+}
+.zoom-exit {
+	opacity: 1;
+	transform-origin: top left;
+	transform: scale(1);
+}
+.zoom-exit-active {
+	opacity: 0;
+	transform-origin: top left;
+	transform: scale(0.8);
+	transition: opacity 200ms, transform 200ms;
+}
+.toTopLeft-enter {
+	opacity: 0;
+	transform: translate(10px, 10px);
+}
+.toTopLeft-enter-active {
+	opacity: 1;
+	transform: translate(0px, 0px);
+	transition: opacity 200ms, transform 200ms;
+}
+.toTopLeft-exit {
+	opacity: 1;
+	transform: translate(0px, 0px);
+}
+.toTopLeft-exit-active {
+	opacity: 0;
+	transform: translate(10px, 10px);
+	transition: opacity 200ms, transform 200ms;
+}
+.rightToLeft-enter {
+	opacity: 0;
+	transform: translateX(10px);
+}
+.rightToLeft-enter-active {
+	opacity: 1;
+	transform: translateX(0px);
+	transition: opacity 200ms, transform 200ms;
+}
+.rightToLeft-exit {
+	opacity: 1;
+	transform: translateX(0px);
+}
+.rightToLeft-exit-active {
+	opacity: 0;
+	transform: translateX(10px);
+	transition: opacity 200ms, transform 200ms;
+}
+.pop-enter {
+	opacity: 0;
+	transform: scale(0.8);
+}
+.pop-enter-active {
+	opacity: 1;
+	transform: scale(1);
+	transition: opacity 200ms, transform 200ms;
+}
+.pop-exit {
+	opacity: 1;
+	transform: scale(1);
+}
+.pop-exit-active {
+	opacity: 0;
+	transform: scale(0.8);
+	transition: opacity 200ms, transform 200ms;
+}

package/less/entry.less

@@ -36,4 +36,5 @@
 @import (inline) "components/variable-default-upload.less";
 @import (inline) "components/anchor-field.less";
 @import (inline) "components/advanced-number-field.less";
-@import (inline) "components/font-picker.less";
+@import (inline) "components/font-picker.less";
+@import (inline) "components/context-menu.less";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@imposium-hub/components",
-    "version": "2.2.38",
+    "version": "2.2.40-0",
     "description": "React & Typescript component / asset library for Imposium front-ends",
     "main": "./dist/cjs/index.js",
     "module": "./dist/esm/index.js",
@@ -17,7 +17,7 @@
         "watch-ts-cjs": "npm run build-ts-cjs -- --watch",
         "lint": "npx eslint \"./src/**/*.*\"",
         "lint-fix": "npm run lint -- --fix",
-        "deploy": "npx np --no-tests --message 'v%s'",
+        "deploy": "npx np --no-tests --any-branch --message 'v%s'",
         "release": "npm run check-formatting && npm run lint && npm run build && npm run deploy",
         "format": "prettier --write \"**/*.{,js,json,jsx,ts,tsx,md}\"",
         "check-formatting": "prettier --check \"**/*.{,js,json,jsx,ts,tsx,md}\"",
@@ -45,7 +45,8 @@
         "moment": "^2.29.1",
         "react-color": "^2.18.0",
         "react-merge-refs": "^1.1.0",
-        "react-moveable": "^0.26.1"
+        "react-moveable": "^0.26.1",
+        "react-transition-group": "^4.4.5"
     },
     "peerDependencies": {
         "@fortawesome/fontawesome-svg-core": "^6.1.1",

package/src/components/app-wrapper/AppWrapper.tsx

@@ -11,6 +11,7 @@ import { checkStoryId, getLastModifiedStoryInOrg, validateAccessLevel } from '..
 
 export interface IAppWrapperProps {
     children: React.ReactChildren;
+    auth0Domain: string;
     auth0ClientId: string;
     organizationId: string;
     baseUrl: string;
@@ -59,10 +60,10 @@ class AppWrapper extends React.Component<IAppWrapperProps, IAppWrapperState> {
     }
 
     public componentDidMount = (): void => {
-        const { auth, access, auth0ClientId, isFreshUser } = this.props;
+        const { auth, access, auth0ClientId, auth0Domain, isFreshUser } = this.props;
         const session: IHubSession = SessionService.getSession();
 
-        AuthService.bindToClient(auth0ClientId);
+        AuthService.bindToClient(auth0ClientId, auth0Domain);
 
         // If cookie, auth or access data is missing / mismatched,
         // silently check auth0 session and refresh flow on success

package/src/components/auth-gate/AuthGate.tsx

@@ -9,6 +9,7 @@ import { cacheAccessData } from '../../redux/actions/access';
 
 interface IAuthGateProps {
     auth0ClientId: string;
+    auth0Domain: string;
     auth0Hash: string;
     onAuthenticated: () => any;
     baseUrl?: string;
@@ -24,9 +25,9 @@ class AuthGate extends React.PureComponent<IAuthGateProps> {
     }
 
     public componentDidMount = (): void => {
-        const { auth0ClientId, auth0Hash, onAuthenticated, baseUrl } = this.props;
+        const { auth0ClientId, auth0Hash, auth0Domain, onAuthenticated, baseUrl } = this.props;
 
-        AuthService.bindToClient(auth0ClientId);
+        AuthService.bindToClient(auth0ClientId, auth0Domain);
 
         if (!auth0Hash) {
             AuthService.login();

package/src/components/context-menu/AnimateComponent.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import CSSTransition from 'react-transition-group/CSSTransition';
+
+const AnimateComponent = ({ children, isVisible, timeout, className }) => {
+    const nodeRef = React.useRef(null);
+
+    return (
+        <CSSTransition
+            nodeRef={nodeRef}
+            in={isVisible}
+            timeout={timeout}
+            classNames={className}
+            unmountOnExit>
+            {children}
+        </CSSTransition>
+    );
+};
+
+export default AnimateComponent;

package/src/components/context-menu/ContextMenu.tsx

@@ -0,0 +1,172 @@
+import React, { useRef, useEffect, useState, useCallback } from 'react';
+import ReactDOM from 'react-dom';
+import { registerEvent, callHideEvent } from './registerEvent';
+import AnimateComponent from './AnimateComponent';
+import { throttle } from './helper';
+
+const ContextMenu = ({
+    children,
+    id,
+    appendTo,
+    hideOnLeave,
+    onMouseLeave,
+    onHide,
+    onShow,
+    preventHideOnScroll,
+    preventHideOnResize,
+    attributes,
+    animation
+}) => {
+    const contextMenuEl = useRef(null);
+    const [isVisible, setVisible] = useState(false);
+    const [clientPosition, setClientPosition] = useState(null);
+
+    const showMenu = (e) => {
+        const { position } = e;
+
+        setVisible(true);
+        setClientPosition(position);
+    };
+
+    const hideMenu = () => {
+        setVisible(false);
+        if (onHide) onHide();
+    };
+
+    const handleMouseLeave = useCallback((e) => {
+        e.preventDefault();
+
+        onMouseLeave(e);
+
+        if (hideOnLeave) callHideEvent(id);
+    }, []);
+
+    const clickOutsideCallback = (event) => {
+        if (contextMenuEl.current && !contextMenuEl.current.contains(event.target)) {
+            callHideEvent(id);
+        }
+    };
+
+    const contextMenuCallback = (event) => {
+        let targetElement = event.target;
+
+        do {
+            if (targetElement.classList && targetElement.classList.contains('menu-trigger')) {
+                return;
+            }
+            targetElement = targetElement.parentNode;
+        } while (targetElement);
+
+        callHideEvent(id);
+    };
+
+    const onScrollHideCallback = throttle(() => {
+        callHideEvent(id);
+    }, 200);
+
+    const onResizeHideCallback = throttle(() => {
+        callHideEvent(id);
+    }, 200);
+
+    useEffect(() => {
+        registerEvent(id, showMenu, hideMenu);
+
+        // detect click outside
+        document.addEventListener('mousedown', clickOutsideCallback);
+
+        // detect right click outside
+        document.addEventListener('contextmenu', contextMenuCallback);
+
+        // on scroll hide handled
+        if (!preventHideOnScroll) {
+            window.addEventListener('scroll', onScrollHideCallback);
+        }
+
+        // on resize hide handled
+        if (!preventHideOnResize) {
+            window.addEventListener('resize', onResizeHideCallback);
+        }
+
+        return () => {
+            document.removeEventListener('mousedown', clickOutsideCallback);
+            document.removeEventListener('contextmenu', contextMenuCallback);
+            window.removeEventListener('scroll', onScrollHideCallback);
+            window.removeEventListener('resize', onResizeHideCallback);
+        };
+    }, []);
+
+    useEffect(() => {
+        if (isVisible) {
+            const { clientY, clientX } = clientPosition;
+            const { innerHeight: windowInnerHeight, innerWidth: windowInnerWidth } = window;
+            const { offsetHeight: elemHeight, offsetWidth: elemWidth } = contextMenuEl.current;
+
+            let newClientY = clientY;
+            let newClientX = clientX;
+
+            if (windowInnerHeight < clientY + elemHeight) newClientY = clientY - elemHeight;
+            if (windowInnerWidth < clientX + elemWidth) newClientX = clientX - elemWidth;
+
+            contextMenuEl.current.style.top = `${newClientY + 2}px`;
+            contextMenuEl.current.style.left = `${newClientX + 2}px`;
+
+            if (onShow) onShow();
+        }
+    }, [isVisible, clientPosition]);
+
+    const childrenWithProps = React.Children.map(children, (child) =>
+        React.cloneElement(child, { id })
+    );
+
+    const ContextComponent = () => (
+        <div
+            className={`contextmenu`}
+            ref={contextMenuEl}
+            onMouseLeave={handleMouseLeave}
+            {...attributes}>
+            {childrenWithProps}
+        </div>
+    );
+
+    const PortalContextComponent = () =>
+        ReactDOM.createPortal(<ContextComponent />, document.querySelector(appendTo));
+
+    if (document.readyState === 'complete' && appendTo) {
+        return animation ? (
+            <AnimateComponent
+                isVisible={isVisible}
+                timeout={200}
+                className={animation}>
+                <PortalContextComponent />
+            </AnimateComponent>
+        ) : (
+            <PortalContextComponent />
+        );
+    }
+
+    return animation ? (
+        <AnimateComponent
+            isVisible={isVisible}
+            timeout={200}
+            className={animation}>
+            <ContextComponent />
+        </AnimateComponent>
+    ) : (
+        <ContextComponent />
+    );
+};
+
+export default ContextMenu;
+
+ContextMenu.defaultProps = {
+    appendTo: null,
+    hideOnLeave: false,
+    preventHideOnResize: false,
+    preventHideOnScroll: false,
+    attributes: {},
+    className: '',
+    animation: 'fade',
+    onMouseLeave: () => null,
+    onHide: () => null,
+    onShow: () => null
+};

package/src/components/context-menu/ContextMenuItem.tsx

@@ -0,0 +1,34 @@
+import React, { useCallback, useRef } from 'react';
+import { callHideEvent } from './registerEvent';
+
+const ContextMenuItem = ({ children, onClick, disabled, preventClose, attributes, className }) => {
+    const contextMenuItem = useRef(null);
+
+    const handleClickEvent = useCallback((e) => {
+        if (disabled) return;
+        onClick(e);
+
+        if (!preventClose) callHideEvent('ID_NOT_REQUIRED');
+    }, []);
+
+    return (
+        <div
+            className={`${disabled ? 'contextmenu__item--disabled' : 'contextmenu__item'}`}
+            onClick={handleClickEvent}
+            {...attributes}
+            ref={contextMenuItem}>
+            {children}
+        </div>
+    );
+};
+
+export default ContextMenuItem;
+
+ContextMenuItem.defaultProps = {
+    disabled: false,
+    preventClose: false,
+    attributes: {},
+    className: '',
+    onClick: () => null,
+    onItemHover: () => null
+};

package/src/components/context-menu/ContextMenuTrigger.tsx

@@ -0,0 +1,47 @@
+import React, { useRef, useCallback } from 'react';
+import { callShowEvent, callHideEvent } from './registerEvent';
+
+const ContextMenuTrigger = ({ children, id, disableWhileShiftPressed, attributes, disable }) => {
+    const menuTrigger = useRef(null);
+
+    const handleContextMenu = useCallback((e) => {
+        if (disable) return;
+        if (disableWhileShiftPressed && e.nativeEvent.shiftKey) {
+            callHideEvent(id);
+            return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+
+        const { clientX, clientY } = e.nativeEvent;
+        const opts = {
+            position: {
+                clientY,
+                clientX
+            },
+            id
+        };
+
+        callShowEvent(opts);
+    }, []);
+
+    return (
+        <div
+            className='menu-trigger'
+            ref={menuTrigger}
+            {...attributes}
+            onContextMenu={(e) => handleContextMenu(e)}>
+            {children}
+        </div>
+    );
+};
+
+export default ContextMenuTrigger;
+
+ContextMenuTrigger.defaultProps = {
+    attributes: {},
+    disable: false,
+    renderTag: 'div',
+    disableWhileShiftPressed: false,
+    className: ''
+};