@mtes-mct/monitor-ui 5.6.0 → 5.7.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [5.6.0](https://github.com/MTES-MCT/monitor-ui/compare/v5.5.0...v5.6.0) (2023-04-28)
+
+
+### Features
+
+* **icons:** add expand icon ([3376d0f](https://github.com/MTES-MCT/monitor-ui/commit/3376d0f2e8244effafc5722ae6f4bea0dc46c65b))
+
 # [5.5.0](https://github.com/MTES-MCT/monitor-ui/compare/v5.4.0...v5.5.0) (2023-04-27)
 
 

package/components/NewWindow/index.d.ts

@@ -1,14 +1,51 @@
+import { PureComponent, ReactNode } from 'react';
 import type { Promisable } from 'type-fest';
 export type NewWindowProps = {
-    center?: 'parent' | 'screen';
-    children: any;
-    height?: number;
-    isStoryBook?: boolean;
-    name?: string;
-    onOpen?: (window: Window) => Promisable<void>;
-    onUnload?: () => Promisable<void>;
-    title?: string;
-    url?: string;
-    width?: number;
+    center?: 'parent' | 'screen' | undefined;
+    children?: ReactNode | undefined;
+    closeOnUnmount?: boolean | undefined;
+    copyStyles?: boolean | undefined;
+    features?: Partial<{
+        height: number;
+        left: number;
+        top: number;
+        width: number;
+    }> | undefined;
+    name?: string | undefined;
+    onBlock?: ((a: null) => Promisable<void>) | undefined;
+    onChangeFocus?: ((visibility: 'hidden' | 'visible') => Promisable<void>) | undefined;
+    onOpen?: ((window: Window) => Promisable<void>) | undefined;
+    onUnload?: ((a: null) => Promisable<void>) | undefined;
+    shouldHaveFocus?: boolean | undefined;
+    showPrompt?: boolean | undefined;
+    title?: string | undefined;
+    url?: string | undefined;
 };
-export declare function NewWindow({ center, children, height, isStoryBook, name, onOpen, onUnload, title, url, width }: NewWindowProps): JSX.Element;
+type NewWindowState = {
+    mounted: boolean;
+};
+export declare class NewWindow extends PureComponent<NewWindowProps, NewWindowState> {
+    private container;
+    private released;
+    private window;
+    private windowCheckerInterval;
+    constructor(props: NewWindowProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: any): void;
+    /**
+     * Closes the opened window (if any) when NewWindow will unmount if the
+     * prop {closeOnUnmount} is true, otherwise the NewWindow will remain open
+     */
+    componentWillUnmount(): void;
+    beforeUnloadListener(event: BeforeUnloadEvent): "blocked" | null;
+    /**
+     * Create the new window when NewWindow component mount.
+     */
+    openChild(): void;
+    /**
+     * Release the new window and anything that was bound to it.
+     */
+    release(): void;
+    render(): any;
+}
+export {};

package/hooks/useNewWindow/context.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { NewWindowContextValue } from './types';
+export declare const NewWindowContext: import("react").Context<NewWindowContextValue>;

package/hooks/useNewWindow/index.d.ts

@@ -0,0 +1,5 @@
+import { NewWindowContext } from './context';
+import type { NewWindowContextValue } from './types';
+export { NewWindowContext };
+export declare function useNewWindow(): NewWindowContextValue;
+export type { NewWindowContextValue };

package/hooks/useNewWindow/types.d.ts

@@ -0,0 +1,4 @@
+import type { MutableRefObject } from 'react';
+export type NewWindowContextValue = {
+    newWindowContainerRef: MutableRefObject<HTMLDivElement>;
+};

package/index.d.ts

@@ -11,6 +11,7 @@ export { OnlyFontGlobalStyle } from './OnlyFontGlobalStyle';
 export { THEME } from './theme';
 export { ThemeProvider } from './ThemeProvider';
 export { Dropdown } from './components/Dropdown';
+export { NewWindow } from './components/NewWindow';
 export { SingleTag } from './components/SingleTag';
 export { Button } from './elements/Button';
 export { Field } from './elements/Field';
@@ -51,6 +52,7 @@ export { useClickOutsideEffect } from './hooks/useClickOutsideEffect';
 export { useFieldControl } from './hooks/useFieldControl';
 export { useForceUpdate } from './hooks/useForceUpdate';
 export { useKey } from './hooks/useKey';
+export { NewWindowContext, useNewWindow } from './hooks/useNewWindow';
 export { usePrevious } from './hooks/usePrevious';
 export { customDayjs } from './utils/customDayjs';
 export { getCoordinates, coordinatesAreDistinct } from './utils/coordinates';
@@ -63,6 +65,7 @@ export { stopMouseEventPropagation } from './utils/stopMouseEventPropagation';
 export type { PartialTheme, Theme } from './theme';
 export type { Coordinates, DateAsStringRange, DateRange, Defined, IconProps, Option, OptionValueType, Undefine } from './types';
 export type { DropdownProps, DropdownItemProps } from './components/Dropdown';
+export type { NewWindowProps } from './components/NewWindow';
 export type { SingleTagProps } from './components/SingleTag';
 export type { ButtonProps } from './elements/Button';
 export type { FieldProps } from './elements/Field';
@@ -98,3 +101,4 @@ export type { FormikNumberInputProps } from './formiks/FormikNumberInput';
 export type { FormikSelectProps } from './formiks/FormikSelect';
 export type { FormikTextareaProps } from './formiks/FormikTextarea';
 export type { FormikTextInputProps } from './formiks/FormikTextInput';
+export type { NewWindowContextValue } from './hooks/useNewWindow';

package/index.js

@@ -1,7 +1,8 @@
 import styled, { createGlobalStyle, ThemeProvider as ThemeProvider$1, css } from 'styled-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React, { useMemo, useCallback, useRef, useEffect, useReducer, useState, forwardRef, useImperativeHandle } from 'react';
+import React, { useMemo, PureComponent, useCallback, useRef, useEffect, useReducer, useState, forwardRef, useImperativeHandle, createContext, useContext } from 'react';
 import { Dropdown as Dropdown$1, AutoComplete, Checkbox as Checkbox$1, DatePicker as DatePicker$1, DateRangePicker as DateRangePicker$1, TagPicker, Radio, Input, SelectPicker } from 'rsuite';
+import ReactDOM from 'react-dom';
 import { useField, useFormikContext } from 'formik';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -2245,6 +2246,297 @@ const Dropdown = Object.assign(RawDropdown, {
     Item
 });
 
+/* eslint-disable no-null/no-null, @typescript-eslint/naming-convention */
+class NewWindow extends PureComponent {
+    container;
+    released;
+    window;
+    windowCheckerInterval;
+    constructor(props) {
+        super(props);
+        this.container = null;
+        this.window = null;
+        this.windowCheckerInterval = undefined;
+        this.released = false;
+        this.state = {
+            mounted: false
+        };
+        this.beforeUnloadListener = this.beforeUnloadListener.bind(this);
+    }
+    componentDidMount() {
+        const { onChangeFocus } = this.props;
+        this.openChild();
+        this.setState({ mounted: true });
+        this.window?.addEventListener('beforeunload', this.beforeUnloadListener, { capture: true });
+        this.window?.addEventListener('blur', () => {
+            onChangeFocus('hidden');
+        });
+        this.window?.addEventListener('focus', () => {
+            onChangeFocus('visible');
+        });
+    }
+    componentDidUpdate(prevProps) {
+        const { shouldHaveFocus } = this.props;
+        if (prevProps.shouldHaveFocus !== shouldHaveFocus && shouldHaveFocus) {
+            this.window?.focus();
+        }
+    }
+    /**
+     * Closes the opened window (if any) when NewWindow will unmount if the
+     * prop {closeOnUnmount} is true, otherwise the NewWindow will remain open
+     */
+    componentWillUnmount() {
+        const { children, closeOnUnmount } = this.props;
+        if (this.window) {
+            if (closeOnUnmount) {
+                this.window.close();
+            }
+            else if (children) {
+                // Clone any children so they aren't removed when react stops rendering
+                const clone = this.container?.cloneNode(true);
+                clone?.setAttribute('id', 'new-window-container-static');
+                this.window.document.body.appendChild(clone);
+            }
+        }
+        this.window?.removeEventListener('beforeunload', this.beforeUnloadListener, { capture: true });
+    }
+    beforeUnloadListener(event) {
+        const { showPrompt } = this.props;
+        if (showPrompt) {
+            event.preventDefault();
+            // eslint-disable-next-line no-param-reassign, no-return-assign
+            return (event.returnValue = 'blocked');
+        }
+        // eslint-disable-next-line no-return-assign, no-param-reassign
+        return null;
+    }
+    /**
+     * Create the new window when NewWindow component mount.
+     */
+    openChild() {
+        const { center, copyStyles, features, name, onBlock, onOpen, title, url } = this.props;
+        // Prepare position of the new window to be centered against the 'parent' window or 'screen'.
+        if (typeof center === 'string' && (features.width === undefined || features.height === undefined)) {
+            console.warn('width and height window features must be present when a center prop is provided');
+        }
+        else if (center === 'parent') {
+            if (!window.top) {
+                console.error('`window.top` is null.');
+                return;
+            }
+            features.left = window.top.outerWidth / 2 + window.top.screenX - features.width / 2;
+            features.top = window.top.outerHeight / 2 + window.top.screenY - features.height / 2;
+        }
+        else if (center === 'screen') {
+            // eslint-disable-next-line no-nested-ternary
+            const width = window.innerWidth
+                ? window.innerWidth
+                : document.documentElement.clientWidth
+                    ? document.documentElement.clientWidth
+                    : window.screen.width;
+            // eslint-disable-next-line no-nested-ternary
+            const height = window.innerHeight
+                ? window.innerHeight
+                : document.documentElement.clientHeight
+                    ? document.documentElement.clientHeight
+                    : window.screen.height;
+            features.left = width / 2 - features.width / 2 + window.screenLeft;
+            features.top = height / 2 - features.height / 2 + window.screenTop;
+        }
+        // Open a new window.
+        this.window = window.open(url, name, toWindowFeatures(features));
+        this.container = this.window?.document.createElement('div');
+        // When a new window use content from a cross-origin there's no way we can attach event
+        // to it. Therefore, we need to detect in a interval when the new window was destroyed
+        // or was closed.
+        this.windowCheckerInterval = setInterval(() => {
+            if (!this.window || this.window.closed) {
+                this.release();
+            }
+        }, 50);
+        // Check if the new window was succesfully opened.
+        if (this.window) {
+            this.window.document.title = title;
+            // Check if the container already exists as the window may have been already open
+            this.container = this.window.document.getElementById('new-window-container');
+            if (this.container === null) {
+                this.container = this.window.document.createElement('div');
+                this.container.setAttribute('id', 'new-window-container');
+                this.window.document.body.appendChild(this.container);
+            }
+            else {
+                // Remove any existing content
+                const staticContainer = this.window.document.getElementById('new-window-container-static');
+                if (staticContainer) {
+                    this.window.document.body.removeChild(staticContainer);
+                }
+            }
+            // If specified, copy styles from parent window's document.
+            if (copyStyles) {
+                setTimeout(() => onCopyStyles(document, this.window?.document), 0);
+            }
+            if (typeof onOpen === 'function') {
+                onOpen(this.window);
+            }
+            // Release anything bound to this component before the new window unload.
+        }
+        else if (typeof onBlock === 'function') {
+            // Handle error on opening of new window.
+            onBlock(null);
+        }
+        else {
+            console.warn('A new window could not be opened. Maybe it was blocked.');
+        }
+    }
+    /**
+     * Release the new window and anything that was bound to it.
+     */
+    release() {
+        // This method can be called once.
+        if (this.released) {
+            return;
+        }
+        this.released = true;
+        // Remove checker interval.
+        clearInterval(this.windowCheckerInterval);
+        // Call any function bound to the `onUnload` prop.
+        const { onUnload } = this.props;
+        if (typeof onUnload === 'function') {
+            onUnload(null);
+        }
+    }
+    render() {
+        const { mounted } = this.state;
+        const { children } = this.props;
+        if (!mounted || !this.container) {
+            return null;
+        }
+        return ReactDOM.createPortal(children, this.container);
+    }
+}
+NewWindow.defaultProps = {
+    center: 'parent',
+    closeOnUnmount: true,
+    copyStyles: true,
+    features: { height: '640px', width: '600px' },
+    name: '',
+    onBlock: null,
+    onChangeFocus: () => { },
+    onOpen: null,
+    onUnload: null,
+    shouldHaveFocus: false,
+    showPrompt: false,
+    title: '',
+    url: ''
+};
+/**
+ * Utility functions.
+ * @private
+ */
+/**
+ * Copy styles from a source document to a target.
+ */
+function onCopyStyles(source, target) {
+    if (!target) {
+        console.error('`target` is undefined.');
+        return;
+    }
+    // Store style tags, avoid reflow in the loop
+    const headFrag = target.createDocumentFragment();
+    Array.from(source.styleSheets).forEach(styleSheet => {
+        // For <style> elements
+        let rules;
+        try {
+            rules = styleSheet.cssRules;
+        }
+        catch (err) {
+            console.error(err);
+        }
+        if (rules) {
+            // IE11 is very slow for appendChild, so use plain string here
+            const ruleText = [];
+            // Write the text of each rule into the body of the style element
+            Array.from(styleSheet.cssRules).forEach(cssRule => {
+                const { type } = cssRule;
+                let returnText = '';
+                if (type === CSSRule.KEYFRAMES_RULE) {
+                    // IE11 will throw error when trying to access cssText property, so we
+                    // need to assemble them
+                    returnText = getKeyFrameText(cssRule);
+                }
+                else if ([CSSRule.IMPORT_RULE, CSSRule.FONT_FACE_RULE].includes(type)) {
+                    // Check if the cssRule type is CSSImportRule (3) or CSSFontFaceRule (5)
+                    // to handle local imports on a about:blank page
+                    // '/custom.css' turns to 'http://my-site.com/custom.css'
+                    returnText = fixUrlForRule(cssRule);
+                }
+                else {
+                    returnText = cssRule.cssText;
+                }
+                ruleText.push(returnText);
+            });
+            const newStyleEl = target.createElement('style');
+            newStyleEl.textContent = ruleText.join('\n');
+            headFrag.appendChild(newStyleEl);
+        }
+        else if (styleSheet.href) {
+            // for <link> elements loading CSS from a URL
+            const newLinkEl = target.createElement('link');
+            newLinkEl.rel = 'stylesheet';
+            newLinkEl.href = styleSheet.href;
+            headFrag.appendChild(newLinkEl);
+        }
+    });
+    target.head.appendChild(headFrag);
+}
+/**
+ * Make keyframe rules.
+ */
+// This should be `CSSRule` instead of `any` but this code is a bit tedious.
+function getKeyFrameText(cssRule /** CSSRule */) {
+    const tokens = ['@keyframes', cssRule.name, '{'];
+    Array.from(cssRule.cssRules).forEach((keyframesCssRule) => {
+        // type === CSSRule.KEYFRAME_RULE should always be true
+        tokens.push(keyframesCssRule.keyText, '{', keyframesCssRule.style.cssText, '}');
+    });
+    tokens.push('}');
+    return tokens.join(' ');
+}
+/**
+ * Handle local import urls.
+ */
+function fixUrlForRule(cssRule) {
+    return cssRule.cssText
+        .split('url(')
+        .map(line => {
+        if (line[1] === '/') {
+            return `${line.slice(0, 1)}${window.location.origin}${line.slice(1)}`;
+        }
+        return line;
+    })
+        .join('url(');
+}
+/**
+ * Convert features props to window features format (name=value, other=value).
+ */
+function toWindowFeatures(features) {
+    if (!features) {
+        return '';
+    }
+    return Object.keys(features)
+        .reduce((featuresAsStrings, name) => {
+        const value = features[name];
+        if (typeof value === 'boolean') {
+            featuresAsStrings.push(`${name}=${value ? 'yes' : 'no'}`);
+        }
+        else {
+            featuresAsStrings.push(`${name}=${value}`);
+        }
+        return featuresAsStrings;
+    }, [])
+        .join(',');
+}
+
 function stopMouseEventPropagation(event) {
     event.stopPropagation();
 }
@@ -32071,5 +32363,16 @@ function useFieldControl(value, onChange, defaultValueWhenUndefined) {
     return { controlledOnChange, controlledValue };
 }
 
-export { Accent, Button, Checkbox, CoordinatesFormat, CoordinatesInput, DatePicker, DateRangePicker, Dropdown, Field$2 as Field, Fieldset, FormikCheckbox, FormikCoordinatesInput, FormikDatePicker, FormikDateRangePicker, FormikEffect, FormikMultiCheckbox, FormikMultiRadio, FormikMultiSelect, FormikNumberInput, FormikSearch, FormikSelect, FormikTextInput, FormikTextarea, GlobalStyle, index as Icon, IconButton, Label, Legend, MultiCheckbox, MultiRadio, MultiSelect, MultiZoneEditor, NumberInput, OPENLAYERS_PROJECTION, OnlyFontGlobalStyle, Search, Select, SingleTag, Size, THEME, Tag, TagBullet, TagGroup, TextInput, Textarea, ThemeProvider, WSG84_PROJECTION, coordinatesAreDistinct, customDayjs, getCoordinates, getLocalizedDayjs, getPseudoRandomString, getUtcizedDayjs, isNumeric, noop, stopMouseEventPropagation, useClickOutsideEffect, useFieldControl, useForceUpdate, useKey, usePrevious };
+const NewWindowContext = createContext({
+    newWindowContainerRef: {
+        current: window.document.createElement('div')
+    }
+});
+
+function useNewWindow() {
+    const contextValue = useContext(NewWindowContext);
+    return contextValue;
+}
+
+export { Accent, Button, Checkbox, CoordinatesFormat, CoordinatesInput, DatePicker, DateRangePicker, Dropdown, Field$2 as Field, Fieldset, FormikCheckbox, FormikCoordinatesInput, FormikDatePicker, FormikDateRangePicker, FormikEffect, FormikMultiCheckbox, FormikMultiRadio, FormikMultiSelect, FormikNumberInput, FormikSearch, FormikSelect, FormikTextInput, FormikTextarea, GlobalStyle, index as Icon, IconButton, Label, Legend, MultiCheckbox, MultiRadio, MultiSelect, MultiZoneEditor, NewWindow, NewWindowContext, NumberInput, OPENLAYERS_PROJECTION, OnlyFontGlobalStyle, Search, Select, SingleTag, Size, THEME, Tag, TagBullet, TagGroup, TextInput, Textarea, ThemeProvider, WSG84_PROJECTION, coordinatesAreDistinct, customDayjs, getCoordinates, getLocalizedDayjs, getPseudoRandomString, getUtcizedDayjs, isNumeric, noop, stopMouseEventPropagation, useClickOutsideEffect, useFieldControl, useForceUpdate, useKey, useNewWindow, usePrevious };
 //# sourceMappingURL=index.js.map