@manuscripts/style-guide 3.5.25 → 3.5.26

package/README.md

@@ -1,6 +1,6 @@
 # Manuscripts Style Guide 
 
-React components for Manuscripts applications. 
+React components for Manuscripts applications.
 
 ## Example usage 
 

package/dist/cjs/components/Resizer/Resizer.js

@@ -1,11 +1,8 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Resizer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
+const react_1 = require("react");
 const ResizerButton_1 = require("./ResizerButton");
 const ResizerInner_1 = require("./ResizerInner");
 const inners = {
@@ -18,92 +15,93 @@ const inners = {
         start: ResizerInner_1.HorizontalStartResizerInner,
     },
 };
-class Resizer extends react_1.default.Component {
-    constructor() {
-        super(...arguments);
-        this.resizerRef = react_1.default.createRef();
-        this.state = {
-            isHovering: false,
-            isResizing: false,
-            startPosition: 0,
-        };
-        this.scheduleResize = (delta) => {
-            if (this.state.isResizing && delta) {
-                this.props.onResize(delta);
-            }
-        };
-        this.mouseDownHandler = (e) => {
-            e.preventDefault();
-            if (!this.resizerRef.current || e.target !== this.resizerRef.current) {
-                return;
+const DISABLE_RESIZE_NODE_NAMES = new Set([
+    'IFRAME',
+    'HTML',
+    null,
+]);
+const OUT_OF_BOUNDS_OFFSET = 32;
+const Resizer = ({ collapsed, direction, onResize, onResizeButton, onResizeEnd, side, buttonInner, }) => {
+    const resizerRef = (0, react_1.useRef)(null);
+    const [isHovering, setIsHovering] = (0, react_1.useState)(false);
+    const isResizingRef = (0, react_1.useRef)(false);
+    const startPositionRef = (0, react_1.useRef)(0);
+    const cleanupRef = (0, react_1.useRef)(null);
+    const onResizeRef = (0, react_1.useRef)(onResize);
+    const onResizeButtonRef = (0, react_1.useRef)(onResizeButton);
+    const onResizeEndRef = (0, react_1.useRef)(onResizeEnd);
+    const directionRef = (0, react_1.useRef)(direction);
+    const sideRef = (0, react_1.useRef)(side);
+    (0, react_1.useEffect)(() => {
+        onResizeRef.current = onResize;
+        onResizeButtonRef.current = onResizeButton;
+        onResizeEndRef.current = onResizeEnd;
+        directionRef.current = direction;
+        sideRef.current = side;
+    }, [onResize, onResizeButton, onResizeEnd, direction, side]);
+    const getPosition = (0, react_1.useCallback)((e) => directionRef.current === 'row' ? e.screenX : e.screenY, []);
+    const getDelta = (0, react_1.useCallback)((position) => {
+        return sideRef.current === 'end'
+            ? position - startPositionRef.current
+            : startPositionRef.current - position;
+    }, []);
+    const detachListeners = (0, react_1.useCallback)(() => {
+        if (cleanupRef.current) {
+            cleanupRef.current();
+            cleanupRef.current = null;
+        }
+    }, []);
+    (0, react_1.useEffect)(() => {
+        return () => detachListeners();
+    }, [detachListeners]);
+    const mouseUpHandler = (0, react_1.useCallback)((e, outOfBounds = false) => {
+        detachListeners();
+        isResizingRef.current = false;
+        const position = getPosition(e);
+        const adjustedPosition = outOfBounds
+            ? position - OUT_OF_BOUNDS_OFFSET
+            : position;
+        const delta = getDelta(adjustedPosition);
+        if (delta === 0) {
+            onResizeButtonRef.current();
+        }
+        onResizeRef.current(delta);
+        onResizeEndRef.current(delta);
+    }, [detachListeners, getPosition, getDelta]);
+    const mouseMoveHandler = (0, react_1.useCallback)((e) => {
+        if (isResizingRef.current) {
+            const delta = getDelta(getPosition(e));
+            if (delta) {
+                onResizeRef.current(delta);
             }
-            if (this.state.isResizing) {
-                return;
-            }
-            this.setState({
-                isResizing: true,
-                startPosition: this.getPosition(e),
-            });
-            window.addEventListener('mousemove', this.mouseMoveHandler);
-            window.addEventListener('mouseup', this.mouseUpHandler);
-            window.addEventListener('mouseout', this.handleOutofBounds);
-        };
-        this.mouseUpHandler = (e, outOfBounds = false) => {
-            window.removeEventListener('mousemove', this.mouseMoveHandler);
-            window.removeEventListener('mouseup', this.mouseUpHandler);
-            window.removeEventListener('mouseout', this.handleOutofBounds);
-            this.setState({
-                isResizing: false,
-            });
-            const position = this.getPosition(e);
-            const adjustedPosition = outOfBounds ? position - 32 : position;
-            const delta = this.getDelta(adjustedPosition);
-            if (delta === 0) {
-                this.props.onResizeButton();
-            }
-            this.props.onResize(delta);
-            this.props.onResizeEnd(delta);
-        };
-        this.mouseMoveHandler = (e) => {
-            const position = this.getPosition(e);
-            const delta = this.getDelta(position);
-            this.scheduleResize(delta);
+        }
+    }, [getPosition, getDelta]);
+    const handleOutOfBounds = (0, react_1.useCallback)((e) => {
+        if (isResizingRef.current &&
+            DISABLE_RESIZE_NODE_NAMES.has(e.relatedTarget ? e.relatedTarget.nodeName : null)) {
+            mouseUpHandler(e, true);
+        }
+    }, [mouseUpHandler]);
+    const mouseDownHandler = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+        if (!resizerRef.current || e.target !== resizerRef.current) {
+            return;
+        }
+        if (isResizingRef.current) {
+            return;
+        }
+        isResizingRef.current = true;
+        startPositionRef.current = getPosition(e);
+        window.addEventListener('mousemove', mouseMoveHandler);
+        window.addEventListener('mouseup', mouseUpHandler);
+        window.addEventListener('mouseout', handleOutOfBounds);
+        cleanupRef.current = () => {
+            window.removeEventListener('mousemove', mouseMoveHandler);
+            window.removeEventListener('mouseup', mouseUpHandler);
+            window.removeEventListener('mouseout', handleOutOfBounds);
         };
-        this.mouseEnterHandler = () => {
-            this.setState({
-                isHovering: true,
-            });
-        };
-        this.mouseLeaveHandler = () => {
-            this.setState({
-                isHovering: false,
-            });
-        };
-        this.handleOutofBounds = (e) => {
-            const disableResizeNodes = [
-                'IFRAME',
-                'HTML',
-                null,
-            ];
-            if (this.state.isResizing &&
-                disableResizeNodes.includes(e.relatedTarget && e.relatedTarget.nodeName)) {
-                this.mouseUpHandler(e, true);
-            }
-        };
-        this.getDelta = (delta) => {
-            const { startPosition } = this.state;
-            return this.props.side === 'end'
-                ? delta - startPosition
-                : startPosition - delta;
-        };
-        this.getPosition = (e) => {
-            return this.props.direction === 'row' ? e.screenX : e.screenY;
-        };
-    }
-    render() {
-        const { buttonInner, direction, side } = this.props;
-        const ResizerInner = inners[direction][side];
-        return ((0, jsx_runtime_1.jsx)(ResizerInner, { ref: this.resizerRef, onMouseDown: this.mouseDownHandler, onMouseEnter: this.mouseEnterHandler, onMouseLeave: this.mouseLeaveHandler, children: (0, jsx_runtime_1.jsx)(ResizerButton_1.ResizerButton, { direction: direction, isCollapsed: this.props.collapsed, isVisible: this.state.isHovering, onClick: this.props.onResizeButton, side: side, buttonInner: buttonInner }) }));
-    }
-}
+    }, [getPosition, mouseMoveHandler, mouseUpHandler, handleOutOfBounds]);
+    const ResizerInner = inners[direction][side];
+    return ((0, jsx_runtime_1.jsx)(ResizerInner, { ref: resizerRef, onMouseDown: mouseDownHandler, onMouseEnter: () => setIsHovering(true), onMouseLeave: () => setIsHovering(false), children: (0, jsx_runtime_1.jsx)(ResizerButton_1.ResizerButton, { direction: direction, isCollapsed: collapsed, isVisible: isHovering, onClick: onResizeButton, side: side, buttonInner: buttonInner }) }));
+};
 exports.Resizer = Resizer;

package/dist/cjs/components/Resizer/ResizerButton.js

@@ -1,11 +1,41 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ResizerButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const ResizerButtonInner_1 = require("./ResizerButtonInner");
 const inners = {
     column: {
@@ -17,15 +47,9 @@ const inners = {
         start: ResizerButtonInner_1.HorizontalStartResizerButtonInner,
     },
 };
-class ResizerButton extends react_1.default.PureComponent {
-    render() {
-        const { buttonInner, direction, side, isCollapsed, onClick, isVisible } = this.props;
-        const ResizerButtonInner = buttonInner || inners[direction][side];
-        return ((0, jsx_runtime_1.jsx)(ResizerButtonInner, { "aria-expanded": !isCollapsed, isCollapsed: isCollapsed, isVisible: isVisible, onClick: onClick, onMouseDown: (event) => event.preventDefault(), tabIndex: 0 }));
-    }
-}
-exports.ResizerButton = ResizerButton;
-ResizerButton.defaultProps = {
-    isCollapsed: false,
-    isVisible: false,
-};
+exports.ResizerButton = react_1.default.memo(({ buttonInner, direction, side, isCollapsed = false, isVisible = false, onClick, }) => {
+    const preventMouseDown = (0, react_1.useCallback)((event) => event.preventDefault(), []);
+    const ResizerButtonInner = buttonInner || inners[direction][side];
+    return ((0, jsx_runtime_1.jsx)(ResizerButtonInner, { "aria-expanded": !isCollapsed, isCollapsed: isCollapsed, isVisible: isVisible, onClick: onClick, onMouseDown: preventMouseDown, tabIndex: 0 }));
+});
+exports.ResizerButton.displayName = 'ResizerButton';

package/dist/es/components/Resizer/Resizer.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { ResizerButton } from './ResizerButton';
 import { HorizontalEndResizerInner, HorizontalStartResizerInner, VerticalEndResizerInner, VerticalStartResizerInner, } from './ResizerInner';
 const inners = {
@@ -12,91 +12,92 @@ const inners = {
         start: HorizontalStartResizerInner,
     },
 };
-export class Resizer extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.resizerRef = React.createRef();
-        this.state = {
-            isHovering: false,
-            isResizing: false,
-            startPosition: 0,
-        };
-        this.scheduleResize = (delta) => {
-            if (this.state.isResizing && delta) {
-                this.props.onResize(delta);
-            }
-        };
-        this.mouseDownHandler = (e) => {
-            e.preventDefault();
-            if (!this.resizerRef.current || e.target !== this.resizerRef.current) {
-                return;
-            }
-            if (this.state.isResizing) {
-                return;
-            }
-            this.setState({
-                isResizing: true,
-                startPosition: this.getPosition(e),
-            });
-            window.addEventListener('mousemove', this.mouseMoveHandler);
-            window.addEventListener('mouseup', this.mouseUpHandler);
-            window.addEventListener('mouseout', this.handleOutofBounds);
-        };
-        this.mouseUpHandler = (e, outOfBounds = false) => {
-            window.removeEventListener('mousemove', this.mouseMoveHandler);
-            window.removeEventListener('mouseup', this.mouseUpHandler);
-            window.removeEventListener('mouseout', this.handleOutofBounds);
-            this.setState({
-                isResizing: false,
-            });
-            const position = this.getPosition(e);
-            const adjustedPosition = outOfBounds ? position - 32 : position;
-            const delta = this.getDelta(adjustedPosition);
-            if (delta === 0) {
-                this.props.onResizeButton();
-            }
-            this.props.onResize(delta);
-            this.props.onResizeEnd(delta);
-        };
-        this.mouseMoveHandler = (e) => {
-            const position = this.getPosition(e);
-            const delta = this.getDelta(position);
-            this.scheduleResize(delta);
-        };
-        this.mouseEnterHandler = () => {
-            this.setState({
-                isHovering: true,
-            });
-        };
-        this.mouseLeaveHandler = () => {
-            this.setState({
-                isHovering: false,
-            });
-        };
-        this.handleOutofBounds = (e) => {
-            const disableResizeNodes = [
-                'IFRAME',
-                'HTML',
-                null,
-            ];
-            if (this.state.isResizing &&
-                disableResizeNodes.includes(e.relatedTarget && e.relatedTarget.nodeName)) {
-                this.mouseUpHandler(e, true);
+const DISABLE_RESIZE_NODE_NAMES = new Set([
+    'IFRAME',
+    'HTML',
+    null,
+]);
+const OUT_OF_BOUNDS_OFFSET = 32;
+export const Resizer = ({ collapsed, direction, onResize, onResizeButton, onResizeEnd, side, buttonInner, }) => {
+    const resizerRef = useRef(null);
+    const [isHovering, setIsHovering] = useState(false);
+    const isResizingRef = useRef(false);
+    const startPositionRef = useRef(0);
+    const cleanupRef = useRef(null);
+    const onResizeRef = useRef(onResize);
+    const onResizeButtonRef = useRef(onResizeButton);
+    const onResizeEndRef = useRef(onResizeEnd);
+    const directionRef = useRef(direction);
+    const sideRef = useRef(side);
+    useEffect(() => {
+        onResizeRef.current = onResize;
+        onResizeButtonRef.current = onResizeButton;
+        onResizeEndRef.current = onResizeEnd;
+        directionRef.current = direction;
+        sideRef.current = side;
+    }, [onResize, onResizeButton, onResizeEnd, direction, side]);
+    const getPosition = useCallback((e) => directionRef.current === 'row' ? e.screenX : e.screenY, []);
+    const getDelta = useCallback((position) => {
+        return sideRef.current === 'end'
+            ? position - startPositionRef.current
+            : startPositionRef.current - position;
+    }, []);
+    const detachListeners = useCallback(() => {
+        if (cleanupRef.current) {
+            cleanupRef.current();
+            cleanupRef.current = null;
+        }
+    }, []);
+    useEffect(() => {
+        return () => detachListeners();
+    }, [detachListeners]);
+    const mouseUpHandler = useCallback((e, outOfBounds = false) => {
+        detachListeners();
+        isResizingRef.current = false;
+        const position = getPosition(e);
+        const adjustedPosition = outOfBounds
+            ? position - OUT_OF_BOUNDS_OFFSET
+            : position;
+        const delta = getDelta(adjustedPosition);
+        if (delta === 0) {
+            onResizeButtonRef.current();
+        }
+        onResizeRef.current(delta);
+        onResizeEndRef.current(delta);
+    }, [detachListeners, getPosition, getDelta]);
+    const mouseMoveHandler = useCallback((e) => {
+        if (isResizingRef.current) {
+            const delta = getDelta(getPosition(e));
+            if (delta) {
+                onResizeRef.current(delta);
             }
+        }
+    }, [getPosition, getDelta]);
+    const handleOutOfBounds = useCallback((e) => {
+        if (isResizingRef.current &&
+            DISABLE_RESIZE_NODE_NAMES.has(e.relatedTarget ? e.relatedTarget.nodeName : null)) {
+            mouseUpHandler(e, true);
+        }
+    }, [mouseUpHandler]);
+    const mouseDownHandler = useCallback((e) => {
+        e.preventDefault();
+        if (!resizerRef.current || e.target !== resizerRef.current) {
+            return;
+        }
+        if (isResizingRef.current) {
+            return;
+        }
+        isResizingRef.current = true;
+        startPositionRef.current = getPosition(e);
+        window.addEventListener('mousemove', mouseMoveHandler);
+        window.addEventListener('mouseup', mouseUpHandler);
+        window.addEventListener('mouseout', handleOutOfBounds);
+        cleanupRef.current = () => {
+            window.removeEventListener('mousemove', mouseMoveHandler);
+            window.removeEventListener('mouseup', mouseUpHandler);
+            window.removeEventListener('mouseout', handleOutOfBounds);
         };
-        this.getDelta = (delta) => {
-            const { startPosition } = this.state;
-            return this.props.side === 'end'
-                ? delta - startPosition
-                : startPosition - delta;
-        };
-        this.getPosition = (e) => {
-            return this.props.direction === 'row' ? e.screenX : e.screenY;
-        };
-    }
-    render() {
-        const { buttonInner, direction, side } = this.props;
-        const ResizerInner = inners[direction][side];
-        return (_jsx(ResizerInner, { ref: this.resizerRef, onMouseDown: this.mouseDownHandler, onMouseEnter: this.mouseEnterHandler, onMouseLeave: this.mouseLeaveHandler, children: _jsx(ResizerButton, { direction: direction, isCollapsed: this.props.collapsed, isVisible: this.state.isHovering, onClick: this.props.onResizeButton, side: side, buttonInner: buttonInner }) }));
-    }
-}
+    }, [getPosition, mouseMoveHandler, mouseUpHandler, handleOutOfBounds]);
+    const ResizerInner = inners[direction][side];
+    return (_jsx(ResizerInner, { ref: resizerRef, onMouseDown: mouseDownHandler, onMouseEnter: () => setIsHovering(true), onMouseLeave: () => setIsHovering(false), children: _jsx(ResizerButton, { direction: direction, isCollapsed: collapsed, isVisible: isHovering, onClick: onResizeButton, side: side, buttonInner: buttonInner }) }));
+};

package/dist/es/components/Resizer/ResizerButton.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
+import React, { useCallback } from 'react';
 import { HorizontalEndResizerButtonInner, HorizontalStartResizerButtonInner, VerticalEndResizerButtonInner, VerticalStartResizerButtonInner, } from './ResizerButtonInner';
 const inners = {
     column: {
@@ -11,14 +11,9 @@ const inners = {
         start: HorizontalStartResizerButtonInner,
     },
 };
-export class ResizerButton extends React.PureComponent {
-    render() {
-        const { buttonInner, direction, side, isCollapsed, onClick, isVisible } = this.props;
-        const ResizerButtonInner = buttonInner || inners[direction][side];
-        return (_jsx(ResizerButtonInner, { "aria-expanded": !isCollapsed, isCollapsed: isCollapsed, isVisible: isVisible, onClick: onClick, onMouseDown: (event) => event.preventDefault(), tabIndex: 0 }));
-    }
-}
-ResizerButton.defaultProps = {
-    isCollapsed: false,
-    isVisible: false,
-};
+export const ResizerButton = React.memo(({ buttonInner, direction, side, isCollapsed = false, isVisible = false, onClick, }) => {
+    const preventMouseDown = useCallback((event) => event.preventDefault(), []);
+    const ResizerButtonInner = buttonInner || inners[direction][side];
+    return (_jsx(ResizerButtonInner, { "aria-expanded": !isCollapsed, isCollapsed: isCollapsed, isVisible: isVisible, onClick: onClick, onMouseDown: preventMouseDown, tabIndex: 0 }));
+});
+ResizerButton.displayName = 'ResizerButton';

package/dist/types/components/Resizer/Resizer.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ResizerButtonInnerProps } from './ResizerButtonInner';
 import { ResizerDirection, ResizerSide } from './types';
-interface Props {
+interface ResizerProps {
     collapsed: boolean;
     direction: ResizerDirection;
     onResize: (resizeDelta: number) => void;
@@ -10,27 +10,5 @@ interface Props {
     side: ResizerSide;
     buttonInner?: React.ComponentType<ResizerButtonInnerProps>;
 }
-interface State {
-    isHovering: boolean;
-    isResizing: boolean;
-    startPosition: number;
-}
-export declare class Resizer extends React.Component<Props, State> {
-    resizerRef: React.RefObject<HTMLDivElement | null>;
-    state: {
-        isHovering: boolean;
-        isResizing: boolean;
-        startPosition: number;
-    };
-    render(): import("react/jsx-runtime").JSX.Element;
-    private scheduleResize;
-    private mouseDownHandler;
-    private mouseUpHandler;
-    private mouseMoveHandler;
-    private mouseEnterHandler;
-    private mouseLeaveHandler;
-    private handleOutofBounds;
-    private getDelta;
-    private getPosition;
-}
+export declare const Resizer: React.FC<ResizerProps>;
 export {};

package/dist/types/components/Resizer/ResizerButton.d.ts

@@ -1,18 +1,13 @@
 import React from 'react';
 import { ResizerButtonInnerProps } from './ResizerButtonInner';
 import { ResizerDirection, ResizerSide } from './types';
-interface Props extends React.HTMLProps<HTMLButtonElement> {
+interface ResizerButtonProps {
     direction: ResizerDirection;
-    isCollapsed: boolean;
-    isVisible: boolean;
+    isCollapsed?: boolean;
+    isVisible?: boolean;
+    onClick?: React.MouseEventHandler;
     side: ResizerSide;
     buttonInner?: React.ComponentType<ResizerButtonInnerProps>;
 }
-export declare class ResizerButton extends React.PureComponent<Props> {
-    static defaultProps: {
-        isCollapsed: boolean;
-        isVisible: boolean;
-    };
-    render(): import("react/jsx-runtime").JSX.Element;
-}
+export declare const ResizerButton: React.FC<ResizerButtonProps>;
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/style-guide",
   "description": "Shared components for Manuscripts applications",
-  "version": "3.5.25",
+  "version": "3.5.26",
   "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
   "license": "Apache-2.0",
   "main": "dist/cjs",