@manuscripts/style-guide 3.5.26 → 3.5.28

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

@@ -33,14 +33,14 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModalTitle = exports.ModalCardBody = exports.ScrollableModalContent = exports.ModelContent = exports.ModalSidebarTitle = exports.ModalSidebarHeader = exports.ModalSidebar = exports.ModalBody = exports.CloseButton = exports.ModalHeader = exports.ModalContainer = exports.StyledModal = void 0;
+exports.ModalTitle = exports.ModalCardBody = exports.ScrollableModalContent = exports.ModelContent = exports.ModalSidebarTitle = exports.ModalSidebarHeader = exports.ModalSidebar = exports.ModalBody = exports.CloseButton = exports.ModalHeader = exports.ModalContainer = exports.StyledModal = exports.StyledModalContent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_dom_1 = require("react-dom");
 const styled_components_1 = __importStar(require("styled-components"));
 const Button_1 = require("./Button");
 const Sidebar_1 = require("./Sidebar");
-const StyledModal = ({ isOpen, onRequestClose, shouldCloseOnOverlayClick = true, hideOverlay = false, pointerEventsOnBackdrop, children, className, style, }) => {
+const StyledModalContent = ({ isOpen, onRequestClose, shouldCloseOnOverlayClick = true, hideOverlay = false, pointerEventsOnBackdrop, children, className, style, }) => {
     const dialogRef = (0, react_1.useRef)(null);
     const closedByCancelRef = (0, react_1.useRef)(false);
     (0, react_1.useEffect)(() => {
@@ -49,7 +49,12 @@ const StyledModal = ({ isOpen, onRequestClose, shouldCloseOnOverlayClick = true,
             return;
         }
         if (isOpen && !dialog.open) {
-            dialog.showModal();
+            if (hideOverlay) {
+                dialog.show();
+            }
+            else {
+                dialog.showModal();
+            }
         }
         else if (!isOpen && dialog.open) {
             dialog.close();
@@ -87,7 +92,14 @@ const StyledModal = ({ isOpen, onRequestClose, shouldCloseOnOverlayClick = true,
             onRequestClose?.();
         }
     };
-    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(Dialog, { ref: dialogRef, onClick: handleBackdropClick, "$hideOverlay": hideOverlay, "$pointerEventsOnBackdrop": pointerEventsOnBackdrop, className: className ? `Modal ${className}` : 'Modal', style: style?.content, children: children }), document.body);
+    return ((0, jsx_runtime_1.jsx)(Dialog, { ref: dialogRef, onClick: e => {
+            e.stopPropagation();
+            handleBackdropClick(e);
+        }, "$hideOverlay": hideOverlay, "$pointerEventsOnBackdrop": pointerEventsOnBackdrop, className: className ? `Modal ${className}` : 'Modal', style: style?.content, children: children }));
+};
+exports.StyledModalContent = StyledModalContent;
+const StyledModal = (props) => {
+    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(exports.StyledModalContent, { ...props }), document.body);
 };
 exports.StyledModal = StyledModal;
 const Dialog = styled_components_1.default.dialog `
@@ -97,6 +109,7 @@ const Dialog = styled_components_1.default.dialog `
   outline: none;
   padding: 0;
   overflow: visible;
+  z-index: 100;
   opacity: 1;
   transition:
     opacity 0.5s ease-in-out,

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

@@ -4,7 +4,7 @@ import { createPortal } from 'react-dom';
 import styled, { css } from 'styled-components';
 import { RoundIconButton } from './Button';
 import { SidebarStyles } from './Sidebar';
-export const StyledModal = ({ isOpen, onRequestClose, shouldCloseOnOverlayClick = true, hideOverlay = false, pointerEventsOnBackdrop, children, className, style, }) => {
+export const StyledModalContent = ({ isOpen, onRequestClose, shouldCloseOnOverlayClick = true, hideOverlay = false, pointerEventsOnBackdrop, children, className, style, }) => {
     const dialogRef = useRef(null);
     const closedByCancelRef = useRef(false);
     useEffect(() => {
@@ -13,7 +13,12 @@ export const StyledModal = ({ isOpen, onRequestClose, shouldCloseOnOverlayClick
             return;
         }
         if (isOpen && !dialog.open) {
-            dialog.showModal();
+            if (hideOverlay) {
+                dialog.show();
+            }
+            else {
+                dialog.showModal();
+            }
         }
         else if (!isOpen && dialog.open) {
             dialog.close();
@@ -51,7 +56,13 @@ export const StyledModal = ({ isOpen, onRequestClose, shouldCloseOnOverlayClick
             onRequestClose?.();
         }
     };
-    return createPortal(_jsx(Dialog, { ref: dialogRef, onClick: handleBackdropClick, "$hideOverlay": hideOverlay, "$pointerEventsOnBackdrop": pointerEventsOnBackdrop, className: className ? `Modal ${className}` : 'Modal', style: style?.content, children: children }), document.body);
+    return (_jsx(Dialog, { ref: dialogRef, onClick: e => {
+            e.stopPropagation();
+            handleBackdropClick(e);
+        }, "$hideOverlay": hideOverlay, "$pointerEventsOnBackdrop": pointerEventsOnBackdrop, className: className ? `Modal ${className}` : 'Modal', style: style?.content, children: children }));
+};
+export const StyledModal = (props) => {
+    return createPortal(_jsx(StyledModalContent, { ...props }), document.body);
 };
 const Dialog = styled.dialog `
   background: transparent;
@@ -60,6 +71,7 @@ const Dialog = styled.dialog `
   outline: none;
   padding: 0;
   overflow: visible;
+  z-index: 100;
   opacity: 1;
   transition:
     opacity 0.5s ease-in-out,

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/StyledModal.d.ts

@@ -26,6 +26,7 @@ interface StyledModalProps {
         content?: React.CSSProperties;
     };
 }
+export declare const StyledModalContent: React.FC<StyledModalProps>;
 export declare const StyledModal: React.FC<StyledModalProps>;
 export declare const ModalContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const ModalHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

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.26",
+  "version": "3.5.28",
   "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
   "license": "Apache-2.0",
   "main": "dist/cjs",