@manuscripts/style-guide 3.5.4 → 3.5.6

package/dist/es/components/StyledModal.js

@@ -1,21 +1,115 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import ReactModal from 'react-modal';
-import styled from 'styled-components';
+import { useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import styled, { css } from 'styled-components';
 import { RoundIconButton } from './Button';
 import { SidebarStyles } from './Sidebar';
-const totalTransitionTime = 800;
-const transitionDelay = 300;
-const delayedTransitionTime = totalTransitionTime - transitionDelay;
-const ReactModalAdapter = ({ className, modalClassName, ...props }) => {
-    props.style = props.style || {};
-    if (props.pointerEventsOnBackdrop == 'none') {
-        props.style.content = {
-            ...props.style.content,
-            pointerEvents: 'all',
+export const StyledModal = ({ isOpen, onRequestClose, shouldCloseOnOverlayClick = true, hideOverlay = false, pointerEventsOnBackdrop, children, className, style, }) => {
+    const dialogRef = useRef(null);
+    const closedByCancelRef = useRef(false);
+    useEffect(() => {
+        const dialog = dialogRef.current;
+        if (!dialog) {
+            return;
+        }
+        if (isOpen && !dialog.open) {
+            dialog.showModal();
+        }
+        else if (!isOpen && dialog.open) {
+            dialog.close();
+        }
+    }, [isOpen]);
+    useEffect(() => {
+        const dialog = dialogRef.current;
+        if (!dialog) {
+            return;
+        }
+        const handleNativeClose = (wasOpen) => {
+            if (wasOpen && !closedByCancelRef.current) {
+                onRequestClose?.();
+            }
+            closedByCancelRef.current = false;
         };
-    }
-    return (_jsx(ReactModal, { className: modalClassName, portalClassName: className, closeTimeoutMS: totalTransitionTime, preventScroll: true, appElement: document.getElementById('root'), ...props }));
+        const listener = () => handleNativeClose(isOpen);
+        dialog.addEventListener('close', listener);
+        return () => dialog.removeEventListener('close', listener);
+    }, [isOpen, onRequestClose]);
+    useEffect(() => {
+        const dialog = dialogRef.current;
+        if (!dialog) {
+            return;
+        }
+        const handleCancel = (e) => {
+            closedByCancelRef.current = true;
+            onRequestClose?.(e);
+        };
+        dialog.addEventListener('cancel', handleCancel);
+        return () => dialog.removeEventListener('cancel', handleCancel);
+    }, [onRequestClose]);
+    const handleBackdropClick = (e) => {
+        if (shouldCloseOnOverlayClick && e.target === dialogRef.current) {
+            onRequestClose?.();
+        }
+    };
+    return createPortal(_jsx(Dialog, { ref: dialogRef, onClick: handleBackdropClick, "$hideOverlay": hideOverlay, "$pointerEventsOnBackdrop": pointerEventsOnBackdrop, className: className, style: style?.content, children: children }), document.body);
 };
+const Dialog = styled.dialog `
+  background: transparent;
+  border: none;
+  position: relative;
+  outline: none;
+  padding: 0;
+  overflow: visible;
+  opacity: 1;
+  transition:
+    opacity 0.5s ease-in-out,
+    display 0.5s ease allow-discrete,
+    overlay 0.5s ease allow-discrete;
+
+  &:not([open]) {
+    opacity: 0;
+  }
+
+  @starting-style {
+    &[open] {
+      opacity: 0;
+    }
+  }
+
+  &::backdrop {
+    ${(props) => {
+    if (props.$hideOverlay) {
+        return css `
+          background: transparent;
+        `;
+    }
+    if (props.$pointerEventsOnBackdrop === 'none') {
+        return css `
+          background: rgba(0, 0, 0, 0.1);
+        `;
+    }
+    return css `
+        background: ${props.theme.colors.background.dark};
+      `;
+}}
+    opacity: 1;
+    pointer-events: ${(props) => props.$pointerEventsOnBackdrop || 'auto'};
+    transition:
+      opacity 0.5s ease-in-out,
+      display 0.5s ease allow-discrete,
+      overlay 0.5s ease allow-discrete;
+  }
+
+  &:not([open])::backdrop {
+    opacity: 0;
+  }
+
+  @starting-style {
+    &[open]::backdrop {
+      opacity: 0;
+    }
+  }
+`;
 export const ModalContainer = styled.div `
   background: ${(props) => props.theme.colors.background.primary};
   border-radius: ${(props) => props.theme.grid.radius.default};
@@ -113,67 +207,3 @@ export const ModalTitle = styled.h2 `
   color: ${(props) => props.theme.colors.text.primary};
   margin: 0 0 20px 0;
 `;
-export const StyledModal = styled(ReactModalAdapter).attrs({
-    closeTimeoutMS: totalTransitionTime,
-    overlayClassName: {
-        base: 'Overlay',
-        afterOpen: 'Overlay--after-open',
-        beforeClose: 'Overlay--before-close',
-    },
-    modalClassName: {
-        base: 'Modal',
-        afterOpen: 'Modal--after-open',
-        beforeClose: 'Modal--before-close',
-    },
-}) `
-  .Overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: ${(props) => props.hideOverlay
-    ? 'transparent'
-    : props.pointerEventsOnBackdrop === 'none'
-        ? 'rgba(0,0,0,0.1)'
-        : props.theme.colors.background.dark};
-    z-index: 1000;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    opacity: 0;
-    pointer-events: ${(props) => props.pointerEventsOnBackdrop || 'auto'};
-
-    &--after-open {
-      transition: opacity ${totalTransitionTime}ms ease-in-out;
-      opacity: 1;
-    }
-
-    &--before-close {
-      transition: opacity ${delayedTransitionTime}ms ease-in-out;
-      transition-delay: ${transitionDelay}ms;
-      opacity: 0;
-    }
-  }
-
-  .Modal {
-    background: transparent;
-    border: none;
-    position: relative;
-    outline: none;
-    opacity: 0;
-    transition:
-      opacity ${delayedTransitionTime}ms ease-in-out,
-      top ${delayedTransitionTime}ms ease-in-out;
-    transition-delay: ${transitionDelay}ms;
-
-    &--after-open {
-      opacity: 1;
-    }
-
-    &--before-close {
-      transition-delay: 0ms;
-      opacity: 0;
-    }
-  }
-`;

package/dist/es/hooks/use-focus-cycle.js

@@ -0,0 +1,47 @@
+import { useEffect } from 'react';
+export function getFocusableElements(element) {
+    const selectors = [
+        'button:not([disabled])',
+        'input:not([disabled])',
+        'textarea:not([disabled])',
+        'select:not([disabled])',
+        'a[href]',
+        '[tabindex]:not([tabindex="-1"])',
+    ];
+    return Array.from(element.querySelectorAll(selectors.join(','))).filter((el) => {
+        const style = window.getComputedStyle(el);
+        return (el instanceof HTMLElement &&
+            el.offsetParent &&
+            style.visibility !== 'hidden' &&
+            style.display !== 'none');
+    });
+}
+export function trapFocus(e, element) {
+    if (e.key !== 'Tab' ||
+        !element ||
+        !element?.contains(document.activeElement)) {
+        return;
+    }
+    const focusableElements = getFocusableElements(element);
+    if (focusableElements.length === 0) {
+        return;
+    }
+    const firstElement = focusableElements[0];
+    const lastElement = focusableElements[focusableElements.length - 1];
+    const activeElement = document.activeElement;
+    if (!e.shiftKey && activeElement === lastElement) {
+        e.preventDefault();
+        firstElement.focus();
+    }
+    else if (e.shiftKey && activeElement === firstElement) {
+        e.preventDefault();
+        lastElement.focus();
+    }
+}
+export const useFocusCycle = (containerRef) => {
+    useEffect(() => {
+        const handleKeyDown = (e) => trapFocus(e, containerRef.current);
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [containerRef]);
+};

package/dist/es/index.js

@@ -44,6 +44,7 @@ export * from './components/Badge';
 export * from './components/NavDropdown';
 export * from './components/Dropdown';
 export * from './components/LoadingOverlay';
+export * from './components/List';
 export * from './components/Text';
 export * from './components/RelativeDate';
 export * from './components/Menus';
@@ -54,5 +55,6 @@ export * from './components/SelectedItemsBox';
 export * from './hooks/use-dropdown';
 export * from './hooks/use-menus';
 export * from './hooks/use-scroll-detection';
+export * from './hooks/use-focus-cycle';
 export * from './lib/files';
 export * from './lib/menus';

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

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+export declare const outlineStyle: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
 export declare const SecondaryButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
     type: "button" | "submit" | "reset";
 } & {

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

@@ -5,10 +5,26 @@ export interface DrawerProps {
     width?: string;
     children: React.ReactNode;
 }
-export declare const DrawerItemsList: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
-export declare const DrawerListItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {
-    selected?: boolean;
-}, never>;
+export declare const DrawerItemsList: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<Omit<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: import("styled-components").DefaultTheme | undefined;
+} & {
+    as?: string | React.ComponentType<any> | undefined;
+    forwardedAs?: string | React.ComponentType<any> | undefined;
+}, "ref"> & React.RefAttributes<HTMLElement>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const DrawerListItem: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<Omit<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: import("styled-components").DefaultTheme | undefined;
+} & {
+    as?: string | React.ComponentType<any> | undefined;
+    forwardedAs?: string | React.ComponentType<any> | undefined;
+}, "ref"> & React.RefAttributes<HTMLElement>>, import("styled-components").DefaultTheme, {}, never>;
 export declare const DrawerIcon: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
 export declare const DrawerLabelContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const DrawerItemLabel: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;

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

@@ -0,0 +1,4 @@
+import React, { ComponentType } from 'react';
+export declare function withListNavigation<P extends object>(Component: ComponentType<P>): import("styled-components").StyledComponent<React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<HTMLElement>>, import("styled-components").DefaultTheme, {}, never>;
+export declare function withNavigableListItem<P extends object>(Component: ComponentType<P>): import("styled-components").StyledComponent<React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<HTMLElement>>, import("styled-components").DefaultTheme, {}, never>;
+export declare function withFocusTrap<P extends object>(Component: ComponentType<P>): React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<HTMLElement>>;

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

@@ -1,5 +1,5 @@
 /*!
- * © 2019 Atypon Systems LLC
+ * © 2026 Atypon Systems LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -14,13 +14,19 @@
  * limitations under the License.
  */
 import React from 'react';
-import ReactModal from 'react-modal';
-import { ThemeProps } from 'styled-components';
-interface Props {
-    modalClassName?: ReactModal.Classes;
-    pointerEventsOnBackdrop?: 'all' | 'none' | 'auto';
+interface StyledModalProps {
+    isOpen: boolean;
+    onRequestClose?: (e?: Event) => void;
+    shouldCloseOnOverlayClick?: boolean;
     hideOverlay?: boolean;
+    pointerEventsOnBackdrop?: 'all' | 'none' | 'auto';
+    children: React.ReactNode;
+    className?: string;
+    style?: {
+        content?: React.CSSProperties;
+    };
 }
+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>;
 export declare const CloseButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
@@ -48,17 +54,4 @@ export declare const ModalCardBody: import("styled-components").StyledComponent<
     width?: number | string;
 }, never>;
 export declare const ModalTitle: import("styled-components").StyledComponent<"h2", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledModal: import("styled-components").StyledComponent<React.FC<ReactModal.Props & ThemeProps<ReactModal> & Props>, import("styled-components").DefaultTheme, {
-    closeTimeoutMS: 800;
-    overlayClassName: {
-        base: string;
-        afterOpen: string;
-        beforeClose: string;
-    };
-    modalClassName: {
-        base: string;
-        afterOpen: string;
-        beforeClose: string;
-    };
-}, "modalClassName" | "overlayClassName" | "closeTimeoutMS">;
 export {};

package/dist/types/hooks/use-focus-cycle.d.ts

@@ -0,0 +1,4 @@
+import { RefObject } from 'react';
+export declare function getFocusableElements(element: HTMLElement): HTMLElement[];
+export declare function trapFocus(e: KeyboardEvent, element: HTMLElement | null): void;
+export declare const useFocusCycle: (containerRef: RefObject<HTMLDivElement | null>) => void;

package/dist/types/index.d.ts

@@ -45,6 +45,7 @@ export * from './components/Badge';
 export * from './components/NavDropdown';
 export * from './components/Dropdown';
 export * from './components/LoadingOverlay';
+export * from './components/List';
 export * from './components/Text';
 export * from './components/RelativeDate';
 export * from './components/Menus';
@@ -55,5 +56,6 @@ export * from './components/SelectedItemsBox';
 export * from './hooks/use-dropdown';
 export * from './hooks/use-menus';
 export * from './hooks/use-scroll-detection';
+export * from './hooks/use-focus-cycle';
 export * from './lib/files';
 export * from './lib/menus';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/style-guide",
   "description": "Shared components for Manuscripts applications",
-  "version": "3.5.4",
+  "version": "3.5.6",
   "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -47,7 +47,6 @@
     "react-dnd-html5-backend": "16.0.1",
     "react-dom": "19.2.0",
     "react-is": "19.2.0",
-    "react-modal": "3.16.3",
     "react-router-dom": "5.3.4",
     "react-select": "5.10.1",
     "react-tooltip": "5.28.1",
@@ -75,7 +74,6 @@
     "@types/react": "19.2.3",
     "@types/react-datepicker": "^7.0.0",
     "@types/react-dom": "19.2.3",
-    "@types/react-modal": "3.16.3",
     "@types/react-router-dom": "5.3.3",
     "@types/styled-components": "5.1.34",
     "@typescript-eslint/eslint-plugin": "8.46.4",