@manuscripts/style-guide 3.5.25 → 3.5.27

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/colors.js

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.zestOrange = exports.veryLightYellow = exports.contrastOrange = exports.butteryYellow = exports.wheatYellow = exports.contrastGreen = exports.veryLightGreen = exports.peppermintGreen = exports.springGreen = exports.killarneyGreen = exports.contrastRed = exports.darkRed = exports.chablisRed = exports.mandysRed = exports.punchRed = exports.veryLightBlue = exports.graphBlue1 = exports.focusBlue = exports.powderBlue = exports.aliceBlue = exports.jellyBeanBlue = exports.white = exports.alabasterGrey = exports.seashellGrey = exports.mercuryGrey = exports.greyLight = exports.greyMutedText = exports.greyMuted = exports.greyDark = exports.black = exports.manuscriptsSecondary = exports.manuscriptsXLight2 = exports.manuscriptsXLight = exports.manuscriptsLight = exports.manuscriptsIcons = exports.manuscriptsBlue = exports.manuscriptsBlueDark = void 0;
+exports.zestOrange = exports.veryLightYellow = exports.contrastOrange = exports.butteryYellow = exports.wheatYellow = exports.contrastGreen = exports.veryLightGreen = exports.peppermintGreen = exports.springGreen = exports.killarneyGreen = exports.contrastRed = exports.darkRed = exports.chablisRed = exports.mandysRed = exports.punchRed = exports.veryLightBlue = exports.graphBlue1 = exports.focusBlue = exports.powderBlue = exports.aliceBlue = exports.jellyBeanBlue = exports.disabled = exports.white = exports.alabasterGrey = exports.seashellGrey = exports.mercuryGrey = exports.greyLight = exports.greyMutedText = exports.greyMuted = exports.greyDark = exports.black = exports.manuscriptsSecondary = exports.manuscriptsXLight2 = exports.manuscriptsXLight = exports.manuscriptsLight = exports.manuscriptsIcons = exports.manuscriptsBlue = exports.manuscriptsBlueDark = void 0;
 exports.manuscriptsBlueDark = '#0b6bb8';
 exports.manuscriptsBlue = '#0d79d0';
 exports.manuscriptsIcons = '#1a9bc7';
@@ -32,6 +32,7 @@ exports.mercuryGrey = '#e2e2e2';
 exports.seashellGrey = '#f2f2f2';
 exports.alabasterGrey = '#fafafa';
 exports.white = '#fff';
+exports.disabled = '#f5f5f5';
 exports.jellyBeanBlue = '#2781a1';
 exports.aliceBlue = '#f2fbfc';
 exports.powderBlue = '#ddf3fa';

package/dist/cjs/components/DatePicker.js

@@ -10,7 +10,7 @@ const react_1 = require("react");
 const react_datepicker_1 = __importDefault(require("react-datepicker"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const icons_1 = require("./icons");
-const DatePicker = ({ id, originalDate, date, handleDateChange, placeholder, showTimeSelect, required, }) => {
+const DatePicker = ({ id, originalDate, date, handleDateChange, placeholder, showTimeSelect, required, disabled, }) => {
     const [selectedDate, setSelectedDate] = (0, react_1.useState)(date || null);
     (0, react_1.useEffect)(() => {
         setSelectedDate(date ?? null);
@@ -22,7 +22,7 @@ const DatePicker = ({ id, originalDate, date, handleDateChange, placeholder, sho
     const format = showTimeSelect
         ? 'd MMM yyyy, EEEE h:mm aa'
         : 'd MMM yyyy, EEEE';
-    return ((0, jsx_runtime_1.jsxs)(Calendar, { children: [(0, jsx_runtime_1.jsx)(react_datepicker_1.default, { id: id, selected: selectedDate, onChange: handleChange, placeholderText: placeholder, minDate: originalDate, showTimeSelect: showTimeSelect, dateFormat: format, className: "calendar-input", popperPlacement: "bottom", required: required }), (0, jsx_runtime_1.jsx)(IconWrapper, { children: (0, jsx_runtime_1.jsx)(icons_1.CalendarIcon, { width: 16, height: 16 }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(Calendar, { children: [(0, jsx_runtime_1.jsx)(react_datepicker_1.default, { id: id, selected: selectedDate, onChange: handleChange, placeholderText: placeholder, minDate: originalDate, showTimeSelect: showTimeSelect, dateFormat: format, className: "calendar-input", popperPlacement: "bottom", required: required, disabled: disabled }), (0, jsx_runtime_1.jsx)(IconWrapper, { children: (0, jsx_runtime_1.jsx)(icons_1.CalendarIcon, { width: 16, height: 16 }) })] }));
 };
 exports.DatePicker = DatePicker;
 const Calendar = styled_components_1.default.div `
@@ -177,6 +177,18 @@ const Calendar = styled_components_1.default.div `
       border-color: ${(props) => props.theme.colors.text.greyMuted};
       background-color: #f2fbfc;
     }
+
+    &:disabled {
+      cursor: not-allowed;
+      background-color: ${(props) => props.theme.colors.background.disabled};
+      border-color: ${(props) => props.theme.colors.border.field.default};
+      color: ${(props) => props.theme.colors.text.secondary};
+
+      &:hover {
+        border-color: ${(props) => props.theme.colors.border.field.default};
+        background-color: ${(props) => props.theme.colors.background.disabled};
+      }
+    }
   }
 `;
 const IconWrapper = styled_components_1.default.div `

package/dist/cjs/components/ExpandableSection.js

@@ -46,7 +46,8 @@ const ContentOuter = styled_components_1.default.div `
   display: grid;
   grid-template-rows: ${(props) => (props.open ? '1fr' : '0fr')};
   overflow: ${(props) => (props.open ? 'visible' : 'hidden')};
-  transition: grid-template-rows 0.25s ease,
+  transition:
+    grid-template-rows 0.25s ease,
     overflow 0s ${(props) => (props.open ? '0.25s' : '0s')} allow-discrete;
 `;
 const ContentInner = styled_components_1.default.div `

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/cjs/components/SelectField.js

@@ -8,6 +8,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_select_1 = __importDefault(require("react-select"));
 const styled_components_1 = require("styled-components");
 const selectStyles = (theme, error, variant, listMaxHeight) => ({
+    container: (base, state) => ({
+        ...base,
+        cursor: state.isDisabled ? 'not-allowed' : 'default',
+        pointerEvents: state.isDisabled ? 'auto' : base.pointerEvents,
+    }),
     control: (base, state) => ({
         ...base,
         minHeight: variant === 'large' ? 40 : 32,
@@ -37,6 +42,7 @@ const selectStyles = (theme, error, variant, listMaxHeight) => ({
                 : theme.colors.background.primary,
         transition: 'border-color 120ms ease, box-shadow 120ms ease',
         cursor: state.isDisabled ? 'not-allowed' : 'pointer',
+        pointerEvents: state.isDisabled ? 'none' : base.pointerEvents,
     }),
     valueContainer: (base) => ({
         ...base,

package/dist/cjs/defaultTheme.js

@@ -67,6 +67,7 @@ exports.defaultTheme = {
             warning: colors.veryLightYellow,
             selected: colors.aliceBlue,
             muted: colors.greyMuted,
+            disabled: colors.disabled,
             tracked: {
                 active: colors.veryLightBlue,
                 default: colors.white,

package/dist/es/colors.js

@@ -29,6 +29,7 @@ export const mercuryGrey = '#e2e2e2';
 export const seashellGrey = '#f2f2f2';
 export const alabasterGrey = '#fafafa';
 export const white = '#fff';
+export const disabled = '#f5f5f5';
 export const jellyBeanBlue = '#2781a1';
 export const aliceBlue = '#f2fbfc';
 export const powderBlue = '#ddf3fa';

package/dist/es/components/DatePicker.js

@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react';
 import ReactDatePicker from 'react-datepicker';
 import styled from 'styled-components';
 import { CalendarIcon } from './icons';
-export const DatePicker = ({ id, originalDate, date, handleDateChange, placeholder, showTimeSelect, required, }) => {
+export const DatePicker = ({ id, originalDate, date, handleDateChange, placeholder, showTimeSelect, required, disabled, }) => {
     const [selectedDate, setSelectedDate] = useState(date || null);
     useEffect(() => {
         setSelectedDate(date ?? null);
@@ -16,7 +16,7 @@ export const DatePicker = ({ id, originalDate, date, handleDateChange, placehold
     const format = showTimeSelect
         ? 'd MMM yyyy, EEEE h:mm aa'
         : 'd MMM yyyy, EEEE';
-    return (_jsxs(Calendar, { children: [_jsx(ReactDatePicker, { id: id, selected: selectedDate, onChange: handleChange, placeholderText: placeholder, minDate: originalDate, showTimeSelect: showTimeSelect, dateFormat: format, className: "calendar-input", popperPlacement: "bottom", required: required }), _jsx(IconWrapper, { children: _jsx(CalendarIcon, { width: 16, height: 16 }) })] }));
+    return (_jsxs(Calendar, { children: [_jsx(ReactDatePicker, { id: id, selected: selectedDate, onChange: handleChange, placeholderText: placeholder, minDate: originalDate, showTimeSelect: showTimeSelect, dateFormat: format, className: "calendar-input", popperPlacement: "bottom", required: required, disabled: disabled }), _jsx(IconWrapper, { children: _jsx(CalendarIcon, { width: 16, height: 16 }) })] }));
 };
 const Calendar = styled.div `
   width: 100%;
@@ -170,6 +170,18 @@ const Calendar = styled.div `
       border-color: ${(props) => props.theme.colors.text.greyMuted};
       background-color: #f2fbfc;
     }
+
+    &:disabled {
+      cursor: not-allowed;
+      background-color: ${(props) => props.theme.colors.background.disabled};
+      border-color: ${(props) => props.theme.colors.border.field.default};
+      color: ${(props) => props.theme.colors.text.secondary};
+
+      &:hover {
+        border-color: ${(props) => props.theme.colors.border.field.default};
+        background-color: ${(props) => props.theme.colors.background.disabled};
+      }
+    }
   }
 `;
 const IconWrapper = styled.div `

package/dist/es/components/ExpandableSection.js

@@ -39,7 +39,8 @@ const ContentOuter = styled.div `
   display: grid;
   grid-template-rows: ${(props) => (props.open ? '1fr' : '0fr')};
   overflow: ${(props) => (props.open ? 'visible' : 'hidden')};
-  transition: grid-template-rows 0.25s ease,
+  transition:
+    grid-template-rows 0.25s ease,
     overflow 0s ${(props) => (props.open ? '0.25s' : '0s')} allow-discrete;
 `;
 const ContentInner = styled.div `

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/es/components/SelectField.js

@@ -2,6 +2,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import Select from 'react-select';
 import { useTheme } from 'styled-components';
 const selectStyles = (theme, error, variant, listMaxHeight) => ({
+    container: (base, state) => ({
+        ...base,
+        cursor: state.isDisabled ? 'not-allowed' : 'default',
+        pointerEvents: state.isDisabled ? 'auto' : base.pointerEvents,
+    }),
     control: (base, state) => ({
         ...base,
         minHeight: variant === 'large' ? 40 : 32,
@@ -31,6 +36,7 @@ const selectStyles = (theme, error, variant, listMaxHeight) => ({
                 : theme.colors.background.primary,
         transition: 'border-color 120ms ease, box-shadow 120ms ease',
         cursor: state.isDisabled ? 'not-allowed' : 'pointer',
+        pointerEvents: state.isDisabled ? 'none' : base.pointerEvents,
     }),
     valueContainer: (base) => ({
         ...base,

package/dist/es/defaultTheme.js

@@ -31,6 +31,7 @@ export const defaultTheme = {
             warning: colors.veryLightYellow,
             selected: colors.aliceBlue,
             muted: colors.greyMuted,
+            disabled: colors.disabled,
             tracked: {
                 active: colors.veryLightBlue,
                 default: colors.white,

package/dist/types/colors.d.ts

@@ -29,6 +29,7 @@ export declare const mercuryGrey = "#e2e2e2";
 export declare const seashellGrey = "#f2f2f2";
 export declare const alabasterGrey = "#fafafa";
 export declare const white = "#fff";
+export declare const disabled = "#f5f5f5";
 export declare const jellyBeanBlue = "#2781a1";
 export declare const aliceBlue = "#f2fbfc";
 export declare const powderBlue = "#ddf3fa";

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

@@ -23,5 +23,6 @@ export interface DatePickerProps {
     placeholder?: string;
     showTimeSelect?: boolean;
     required?: boolean;
+    disabled?: boolean;
 }
 export declare const DatePicker: React.FC<DatePickerProps>;

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/dist/types/theme.d.ts

@@ -85,6 +85,7 @@ interface Background {
     selected: string;
     tracked: States;
     muted: string;
+    disabled: string;
 }
 interface Border {
     field: States;

package/package.json

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