@imposium-hub/components 2.14.0 → 2.14.2

package/less/components/header.less

@@ -72,7 +72,7 @@
 }
 
 .anchor {
-    .font-style;
+    .font-style();
     cursor: pointer;
     font-size: @fontSizeDefault;
     text-decoration: none;
@@ -87,7 +87,7 @@
 }
 
 .circle-style {
-    .no-select;
+    .no-select();
     border-radius: 50%;
     width: 28px;
     height: 28px;
@@ -105,12 +105,12 @@
     cursor: pointer;
     outline: none;
     box-sizing: border-box;
-    .no-select;
-    .font-style;
+    .no-select();
+    .font-style();
 }
 
 .faux-select {
-    .btn-reset;
+    .btn-reset();
     display: flex;
     align-items: center;
     font-size: 14px;
@@ -128,7 +128,7 @@
 }
 
 .imposium-header {
-    .flex-row;
+    .flex-row();
     z-index: 100000;
     position: absolute;
     top: 0px;
@@ -141,17 +141,17 @@
     line-height: 1.5;
 
     .inner-content {
-        .flex-row;
+        .flex-row();
         width: 100%;
         max-width: @defaultMaxWidth;
         justify-content: space-between;
         margin: 0px 15px;
 
         .inner-left {
-            .flex-row;
+            .flex-row();
 
             .title {
-                .flex-row;
+                .flex-row();
                 margin-right: 20px;
                 text-decoration: none;
 
@@ -174,7 +174,7 @@
                 }
 
                 .heading {
-                    .font-style;
+                    .font-style();
                     margin: 0;
                     font-size: 20px;
                     font-weight: normal;
@@ -182,12 +182,12 @@
             }
 
             .btn-toggle-services {
-                .faux-select;
+                .faux-select();
             }
         }
 
         .inner-right {
-            .flex-row;
+            .flex-row();
 
             a{
                 border:none;
@@ -204,22 +204,22 @@
             }
             
             .btn-help {
-                .circle-style;
+                .circle-style();
                 margin-left: 15px;
                 font-size:28px;
             }
             
             .btn-toggle-orgs {
-                .btn-reset;
-                .circle-style;
+                .btn-reset();
+                .circle-style();
                 margin-left: 15px;
             }
             
             .btn-toggle-story {
-                .faux-select;
+                .faux-select();
 
                 .story-name {
-                    .ellipsis;
+                    .ellipsis();
                     text-transform: none;
                     font-size: 17px;
                     max-width: 220px;
@@ -227,7 +227,7 @@
             }
 
             .btn-logout {
-                .btn-reset;
+                .btn-reset();
                 padding: 10px 0px;
                 font-size: 14px;
             }
@@ -248,7 +248,7 @@
             box-sizing: border-box;
 
             .service-menu-heading {
-                .secondary-font-style;
+                .secondary-font-style();
                 font-size: @fontSizeDefault;
                 text-transform: uppercase;
                 color: #b1b1b1;
@@ -273,7 +273,7 @@
                     }
 
                     a {
-                        .anchor;
+                        .anchor();
                         display: flex;
                         align-items: center;
                         color: white;
@@ -334,14 +334,14 @@
             color: white
         }
         .orgs-menu-active-org {
-            .font-style;
-            .flex-row;
+            .font-style();
+            .flex-row();
             padding: 10px;
             border-bottom: 1px solid @defaultBorderColor;
             background-color: @defaultBorderColor;
 
             .active-first-char {
-                .circle-style;
+                .circle-style();
                 width: 40px;
                 height: 40px;
                 font-size: 18px;
@@ -353,7 +353,7 @@
             color: white;
         }
         .menu-item, .react-select__option {
-            .btn-reset;
+            .btn-reset();
             width: 100%;
             padding: 10px;
             font-size: 12px;
@@ -363,12 +363,12 @@
                 background-color: #494949
             }
             .inactive-first-char {
-               .circle-style;
+               .circle-style();
                margin-right: 10px;
             }
 
             &.inactive-org-button {
-                .flex-row;
+                .flex-row();
                 box-sizing: border-box;
                 padding: 10px;
             }
@@ -379,13 +379,13 @@
         }
 
         .orgs-menu-footer {
-            .flex-row;
+            .flex-row();
             justify-content: space-between;
             border-top: 1px solid @defaultBorderColor;
 
             .email {
-                .secondary-font-style;
-                .ellipsis;
+                .secondary-font-style();
+                .ellipsis();
                 color: #b1b1b1;
                 font-size: 12px;
                 text-transform: lowercase;
@@ -393,7 +393,7 @@
             }
 
             .btn-logout {
-                .btn-reset;
+                .btn-reset();
                 font-size: 12px;
                 padding: 10px 15px;
             }

package/less/components/modal.less

@@ -4,10 +4,10 @@
 .modal{
 	
 	z-index:10000;
-	.layer;
+	.layer();
 
 	.modal-bg{
-		.layer;
+		.layer();
 		background: fadeout(@backgroundDark, 20%);
 	}
 

package/less/components/player.less

@@ -1,6 +1,6 @@
 .media-player{
 
-	.layer;
+	.layer();
 
 	.inner-viewer{
 		position:absolute;
@@ -9,7 +9,7 @@
 			width:100%;
 			height:100%;
 			outline:1px solid darken(@backgroundDark, 10%);
-			.chess
+			.chess()
 		}
 
 		video{

package/less/components/section.less

@@ -6,7 +6,7 @@
 @headerPadding:2px;
 
 .section{
-	.layer;
+	.layer();
 
 	.section-header{
 		background:lighten(@backgroundLight, 10%);
@@ -65,7 +65,7 @@
 	}
 
 	.section-content{
-		.layer;
+		.layer();
 		top:@sectionHeaderHeight;
 		height:calc(100% - @sectionHeaderHeight);
 		padding:@sectionPadding;

package/less/components/static-composition-editor.less

@@ -3,7 +3,7 @@
 
 .static-composition-editor{
 
-	.layer;
+	.layer();
 
 	.composition-config{
 		position: absolute;
@@ -18,14 +18,14 @@
 	}
 
 	.composition-preview{
-		.layer;
+		.layer();
 		left:@compConfigWidth;
 		width:calc(100% - @compConfigWidth);
 	}
 }
 
 .static-composition-renderer{
-	.layer;
+	.layer();
 	font-family:'Arial';
 	border:2px solid @backgroundLight;
 }
@@ -37,7 +37,7 @@
 
 .composition-text-layer{
 	will-change:transform;
-	.layer;
+	.layer();
 
 	.inner-text{
 		display: inline-block;

package/less/components/story-previewer.less

@@ -160,7 +160,7 @@
 
 .story-viewer{
     
-    .layer;
+    .layer();
     
     background:@backgroundDark;
 
@@ -176,7 +176,7 @@
     }
     
     .log{
-        .layer;
+        .layer();
         overflow-y: scroll;
         padding:10px;
         box-sizing:border-box;
@@ -216,7 +216,7 @@
         width:calc(100% - @storyViewerVarWidth);
 
         .content-header{
-            .layer;
+            .layer();
             box-sizing: border-box;
             padding-top:4px;
             padding-left:4px;
@@ -252,7 +252,7 @@
         }
 
         .content-wrapper{
-            .layer;
+            .layer();
             background-color: rgb(35,35,35);
             top:@storyViewerHeaderHeight;
             height:calc(100% - @storyViewerHeaderHeight);

package/less/components/tabs.less

@@ -3,7 +3,7 @@
 @tabWidth:80px;
 
 .tabs{
-    .layer;
+    .layer();
     .tab-header{
         white-space: nowrap;
         position: absolute;
@@ -49,12 +49,12 @@
     }
     .tab-content{
         overflow-y: auto;
-        .layer;
+        .layer();
         top:@tabHeight;
         height:calc(100% - @tabHeight);
 
         .tab-content-wrapper{
-            .layer;
+            .layer();
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@imposium-hub/components",
-    "version": "2.14.0",
+    "version": "2.14.2",
     "description": "React & Typescript component / asset library for Imposium front-ends",
     "main": "./dist/cjs/index.js",
     "module": "./dist/esm/index.js",
@@ -66,13 +66,13 @@
         "axios": "^1.9.0",
         "hotkeys-js": "^3.6.12",
         "localforage": "^1.7.3",
-        "react": "^17.0.1",
+        "react": "^18.0.0",
         "react-dnd": "^16.0.1",
         "react-dnd-html5-backend": "^16.0.1",
-        "react-dom": "^17.0.2",
+        "react-dom": "^18.0.0",
         "react-dropzone": "^10.1.6",
         "react-redux": "^5.0.7",
-        "react-resize-detector": "^6.7.1",
+        "react-resize-detector": "^12.0.0",
         "react-router": "^3.2.6",
         "react-spinners": "^0.6.1",
         "react-table": "^7.7.0",
@@ -101,7 +101,7 @@
         "@storybook/testing-library": "^0.2.1",
         "@types/hoist-non-react-statics": "^3.3.1",
         "@types/offscreencanvas": "^2019.6.4",
-        "@types/react": "^17.0.37",
+        "@types/react": "^18.0.0",
         "@types/resize-observer-browser": "^0.1.5",
         "@typescript-eslint/eslint-plugin": "^5.26.0",
         "@typescript-eslint/parser": "^5.26.0",
@@ -120,13 +120,13 @@
         "np": "^10.2.0",
         "onchange": "^7.1.0",
         "prettier": "^2.6.2",
-        "react": "^17.0.1",
+        "react": "^18.0.0",
         "react-dnd": "^16.0.1",
         "react-dnd-html5-backend": "^16.0.1",
-        "react-dom": "^17.0.2",
+        "react-dom": "^18.0.0",
         "react-dropzone": "^10.1.6",
         "react-redux": "^5.0.7",
-        "react-resize-detector": "^6.7.1",
+        "react-resize-detector": "^12.0.0",
         "react-router": "^3.2.6",
         "react-spinners": "^0.6.1",
         "react-table": "^7.7.0",

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

@@ -5,13 +5,18 @@ import { ConfirmModal } from '../confirm-modal/ConfirmModal';
 import { IImposiumAPI } from '../../services/API';
 import { ICrmApi } from '../../services/CrmApi';
 import { useAuth0 } from '@auth0/auth0-react';
-import { replaceRoute } from '../../utils/routing';
+import { configureHistory, replaceRoute } from '../../utils/routing';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faExclamationTriangle } from '@fortawesome/pro-light-svg-icons';
 import { initPendo } from '../../utils/pendo';
 import { TOKEN_TYPE, FlagsProvider } from '@innovid/feature-flags-react';
 import { useMemo } from 'react';
 
+export interface ICompatibleHistory {
+    push: (route: string) => void;
+    replace: (route: string) => void;
+}
+
 export interface IAppWrapperProps {
     appLabel: string;
     environment: string;
@@ -32,6 +37,8 @@ export interface IAppWrapperProps {
     hideDocs?: boolean;
     hideOrgPicker?: boolean;
     growthBookId?: string;
+    history: ICompatibleHistory;
+    children?: React.ReactNode;
 }
 
 export const APP_WRAPPER_ERROR_STATES = {
@@ -62,13 +69,16 @@ export const AppWrapper: React.FC<IAppWrapperProps> = (props) => {
         environment,
         appLabel,
         allowNoStories,
-        growthBookId
+        growthBookId,
+        history
     } = props;
     const { isAuthenticated, isLoading, getAccessTokenSilently, loginWithRedirect, logout, user } =
         useAuth0();
     const [errorState, setErrorState] = React.useState(null);
     const [auth0Token, setAuth0Token] = React.useState(null);
 
+    configureHistory(history);
+
     React.useEffect(() => {
         void getAccessTokenSilently().then((token) => {
             if (token) {
@@ -179,7 +189,10 @@ export const AppWrapper: React.FC<IAppWrapperProps> = (props) => {
                 onAuthenticated(organization_id, story_id);
 
                 if (!hideStoryPicker) {
-                    replaceRoute(`/${organization_id}/${story_id}`);
+                    const route = story_id
+                        ? `/${organization_id}/${story_id}`
+                        : `/${organization_id}`;
+                    replaceRoute(route);
                 } else {
                     replaceRoute(`/${organization_id}`);
                 }
@@ -275,7 +288,7 @@ export const AppWrapper: React.FC<IAppWrapperProps> = (props) => {
             // If we're not loading, and we're not authenticated, call login, and cache story + org ID from URL if it's there
         } else if (!isLoading && !isAuthenticated) {
             void loginWithRedirect({
-                appState: { returnTo: window.location.href }
+                appState: { returnTo: window.location.pathname + window.location.search }
             });
         }
     };

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

@@ -5,6 +5,7 @@ interface IAnimateComponentProps {
     isVisible: boolean;
     timeout: number;
     className: string;
+    children?: React.ReactNode;
 }
 
 const AnimateComponent: React.FC<IAnimateComponentProps> = ({

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

@@ -14,20 +14,23 @@ interface IContextMenuProps {
     preventHideOnScroll?: boolean;
     preventHideOnResize?: boolean;
     animation?: string;
+    children: React.ReactNode;
 }
 
-const ContextMenu: React.FC<IContextMenuProps> = ({
-    id,
-    children,
-    appendTo,
-    hideOnLeave,
-    onMouseLeave,
-    onHide,
-    onShow,
-    preventHideOnScroll,
-    preventHideOnResize,
-    animation
-}) => {
+const ContextMenu: React.FC<IContextMenuProps> = (props: IContextMenuProps) => {
+    const {
+        id,
+        children,
+        appendTo,
+        hideOnLeave,
+        onMouseLeave,
+        onHide,
+        onShow,
+        preventHideOnScroll,
+        preventHideOnResize,
+        animation
+    } = props;
+
     const contextMenuEl = useRef(null);
     const [isVisible, setVisible] = useState(false);
     const [top, setTop] = useState('');
@@ -172,7 +175,6 @@ const ContextMenu: React.FC<IContextMenuProps> = ({
 };
 
 export default ContextMenu;
-
 ContextMenu.defaultProps = {
     appendTo: null,
     hideOnLeave: false,

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

@@ -5,6 +5,7 @@ interface IContextMenuItemProps {
     onClick?(e: React.MouseEvent): void;
     disabled?: boolean;
     preventClose?: boolean;
+    children?: React.ReactNode;
 }
 
 const ContextMenuItem: React.FC<IContextMenuItemProps> = ({

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

@@ -5,6 +5,7 @@ interface IContextMenuTriggerProps {
     id: string;
     disableWhileShiftPressed?: boolean;
     disable?: boolean;
+    children?: React.ReactNode;
 }
 
 const ContextMenuTrigger: React.FC<IContextMenuTriggerProps> = ({

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

@@ -3,6 +3,7 @@ import ContextMenuItem from './ContextMenuItem';
 
 interface ISubmenuProps {
     title: string;
+    children?: React.ReactNode;
 }
 
 const Submenu: React.FC<ISubmenuProps> = ({ children, title }) => {

package/src/components/number-field/NumberField.tsx

@@ -2,6 +2,14 @@ import * as React from 'react';
 import FieldWrapper from '../field-wrapper/FieldWrapper';
 import { IToolTipConfig } from '../Tooltip';
 
+export const validateNumInput = (val: number, min: number, max: number) => {
+    if (val < min || val > max) {
+        return false;
+    } else {
+        return true;
+    }
+};
+
 interface INumberFieldProps {
     buttons?: any;
     label?: any;
@@ -60,30 +68,25 @@ class NumberField extends React.PureComponent<INumberFieldProps, INumberFieldSta
 
     public componentDidUpdate(prevProps): void {
         if (prevProps.value !== this.props.value) {
-            this.setState({
-                error: false,
-                value: this.props.value
-            });
+            this.setState(
+                {
+                    value: this.props.value
+                },
+                () => {
+                    this.validateValue(this.props.value);
+                }
+            );
         }
     }
 
-    private validate(e) {
+    private validateValue(val) {
         const { max, min } = this.props;
-        const val = e.target.value;
-        this.setState({ value: val });
-        if (min || max) {
-            if (val < min || val > max) {
-                this.setState({ error: true });
-            } else {
-                this.setState({ error: false });
-                this.onChange(e);
-            }
-        } else {
-            this.onChange(e);
-        }
+        const error = validateNumInput(val, min, max);
+        this.setState({ error: !error });
     }
 
     private onChange(e) {
+        this.validateValue(e.target.value);
         let val = e.target.value;
         if (val === '' || val === null) {
             val = this.props.min;
@@ -201,7 +204,7 @@ class NumberField extends React.PureComponent<INumberFieldProps, INumberFieldSta
                     onKeyDown={(e) => this.onKeyDownHandler(e)}
                     onFocus={() => this.onSelectFocus()}
                     onBlur={(e) => this.onSelectBlur(e)}
-                    onChange={(e) => this.validate(e)}
+                    onChange={(e) => this.onChange(e)}
                 />
             </FieldWrapper>
         );

package/src/components/portal/Portal.tsx

@@ -8,6 +8,7 @@ import { createPortal } from 'react-dom';
 
 interface IPortalProps {
     id: string;
+    children?: React.ReactNode;
 }
 
 const Portal: React.FC<IPortalProps> = ({ children, id }): ReactPortal => {

package/src/components/publish-wizard/PublishWizard.tsx

@@ -742,7 +742,7 @@ export const BigButton: React.FC<IBigButtonProps> = (p) => (
     </div>
 );
 
-export const TabContent: React.FC = ({ children }) => (
+export const TabContent: React.FC<React.PropsWithChildren> = ({ children }) => (
     <div className='tab-content'>
         <div className='settings-tab'>
             <div className='integration-details'>{children}</div>

package/src/components/story-previewer/StoryPreviewer.tsx

@@ -20,7 +20,7 @@ import ImagePlayer from '../players/ImagePlayer';
 import { saveAs } from 'file-saver';
 import MediaVariableField from '../media-variable-field/MediaVariableField';
 import { IExperience } from '../../interfaces/experience';
-import ReactResizeDetector from 'react-resize-detector';
+import { useResizeDetector } from 'react-resize-detector';
 import { ERROR, previewer as copy } from '../../constants/copy';
 import { formattedTime } from '../../Util';
 import Timer from '../../services/Timer';
@@ -30,6 +30,17 @@ import { ICON_DOWNLOAD, ICON_CLIPBOARD } from '../../constants/icons';
 import AudioPlayer from '../players/AudioPlayer';
 import ColorField from '../color-field/ColorField';
 
+const ResizeDetectorWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+    const { ref } = useResizeDetector<HTMLDivElement>({ handleWidth: true, handleHeight: true });
+    return (
+        <div
+            ref={ref}
+            style={{ width: '100%', height: '100%' }}>
+            {children}
+        </div>
+    );
+};
+
 interface IStoryPreviewerProps {
     api: IImposiumAPI;
     storyId: string;
@@ -786,13 +797,7 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
                 );
             }
 
-            return (
-                <ReactResizeDetector
-                    handleWidth
-                    handleHeight>
-                    {player}
-                </ReactResizeDetector>
-            );
+            return <ResizeDetectorWrapper>{player}</ResizeDetectorWrapper>;
         }
 
         return null;