@manuscripts/style-guide 3.5.31 → 3.6.0

package/README.md

@@ -1,4 +1,5 @@
 # Manuscripts Style Guide 
+# 2026-06-11 16:44:00
 
 React components for Manuscripts applications.
 
@@ -23,3 +24,4 @@ Run `yarn build` to build the `dist` folder for distribution.
 Run `yarn dev` to automatically rebuild when a file is changed.
 
 If a component needs new theme properties, add the types to `src/theme.ts` and add the corresponding values to `.storybook/theme.ts`. 
+

package/dist/cjs/components/Shortcut/index.js

@@ -0,0 +1,36 @@
+"use strict";
+/*!
+ * © 2025 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.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShortcutConnector = exports.Shortcut = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.Shortcut = styled_components_1.default.span `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 28px;
+  height: 28px;
+  border-radius: ${({ theme }) => theme.grid.radius.small};
+  background: ${({ theme }) => theme.colors.background.primary};
+  font-size: ${({ theme }) => theme.font.size.small};
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10);
+`;
+exports.ShortcutConnector = styled_components_1.default.span `
+  padding: 0 ${({ theme }) => theme.grid.unit * 2}px;
+`;

package/dist/cjs/components/StyledModal.js

@@ -40,7 +40,7 @@ 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 StyledModalContent = ({ isOpen, onRequestClose, shouldCloseOnOverlayClick = true, hideOverlay = false, pointerEventsOnBackdrop, children, className, style, }) => {
+const StyledModalContent = ({ isOpen, onRequestClose, shouldCloseOnOverlayClick = true, hideOverlay = false, pointerEventsOnBackdrop, children, className, style, ariaLabelledby, id, }) => {
     const dialogRef = (0, react_1.useRef)(null);
     const closedByCancelRef = (0, react_1.useRef)(false);
     (0, react_1.useEffect)(() => {
@@ -95,7 +95,7 @@ const StyledModalContent = ({ isOpen, onRequestClose, shouldCloseOnOverlayClick
     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 }));
+        }, "$hideOverlay": hideOverlay, "$pointerEventsOnBackdrop": pointerEventsOnBackdrop, className: className ? `Modal ${className}` : 'Modal', style: style?.content, "aria-labelledby": ariaLabelledby ? ariaLabelledby : undefined, id: id ? id : undefined, children: children }));
 };
 exports.StyledModalContent = StyledModalContent;
 const StyledModal = (props) => {

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

@@ -43,11 +43,14 @@ function trapFocus(e, element) {
         lastElement.focus();
     }
 }
-const useFocusCycle = (containerRef) => {
+const useFocusCycle = (containerRef, enabled = true) => {
     (0, react_1.useEffect)(() => {
+        if (!enabled) {
+            return;
+        }
         const handleKeyDown = (e) => trapFocus(e, containerRef.current);
         document.addEventListener('keydown', handleKeyDown);
         return () => document.removeEventListener('keydown', handleKeyDown);
-    }, [containerRef]);
+    }, [containerRef, enabled]);
 };
 exports.useFocusCycle = useFocusCycle;

package/dist/cjs/index.js

@@ -70,8 +70,9 @@ __exportStar(require("./components/Form"), exports);
 __exportStar(require("./components/MultiValueInput"), exports);
 __exportStar(require("./components/Resizer"), exports);
 __exportStar(require("./components/SaveStatus"), exports);
-__exportStar(require("./components/StyledModal"), exports);
+__exportStar(require("./components/Shortcut"), exports);
 __exportStar(require("./components/Sidebar"), exports);
+__exportStar(require("./components/StyledModal"), exports);
 __exportStar(require("./components/TextField"), exports);
 __exportStar(require("./components/FormFieldContainer"), exports);
 __exportStar(require("./components/FormCommon"), exports);

package/dist/es/components/Shortcut/index.js

@@ -0,0 +1,30 @@
+/*!
+ * © 2025 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.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import styled from 'styled-components';
+export const Shortcut = styled.span `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 28px;
+  height: 28px;
+  border-radius: ${({ theme }) => theme.grid.radius.small};
+  background: ${({ theme }) => theme.colors.background.primary};
+  font-size: ${({ theme }) => theme.font.size.small};
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10);
+`;
+export const ShortcutConnector = styled.span `
+  padding: 0 ${({ theme }) => theme.grid.unit * 2}px;
+`;

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 StyledModalContent = ({ isOpen, onRequestClose, shouldCloseOnOverlayClick = true, hideOverlay = false, pointerEventsOnBackdrop, children, className, style, }) => {
+export const StyledModalContent = ({ isOpen, onRequestClose, shouldCloseOnOverlayClick = true, hideOverlay = false, pointerEventsOnBackdrop, children, className, style, ariaLabelledby, id, }) => {
     const dialogRef = useRef(null);
     const closedByCancelRef = useRef(false);
     useEffect(() => {
@@ -59,7 +59,7 @@ export const StyledModalContent = ({ isOpen, onRequestClose, shouldCloseOnOverla
     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 }));
+        }, "$hideOverlay": hideOverlay, "$pointerEventsOnBackdrop": pointerEventsOnBackdrop, className: className ? `Modal ${className}` : 'Modal', style: style?.content, "aria-labelledby": ariaLabelledby ? ariaLabelledby : undefined, id: id ? id : undefined, children: children }));
 };
 export const StyledModal = (props) => {
     return createPortal(_jsx(StyledModalContent, { ...props }), document.body);

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

@@ -38,10 +38,13 @@ export function trapFocus(e, element) {
         lastElement.focus();
     }
 }
-export const useFocusCycle = (containerRef) => {
+export const useFocusCycle = (containerRef, enabled = true) => {
     useEffect(() => {
+        if (!enabled) {
+            return;
+        }
         const handleKeyDown = (e) => trapFocus(e, containerRef.current);
         document.addEventListener('keydown', handleKeyDown);
         return () => document.removeEventListener('keydown', handleKeyDown);
-    }, [containerRef]);
+    }, [containerRef, enabled]);
 };

package/dist/es/index.js

@@ -29,8 +29,9 @@ export * from './components/Form';
 export * from './components/MultiValueInput';
 export * from './components/Resizer';
 export * from './components/SaveStatus';
-export * from './components/StyledModal';
+export * from './components/Shortcut';
 export * from './components/Sidebar';
+export * from './components/StyledModal';
 export * from './components/TextField';
 export * from './components/FormFieldContainer';
 export * from './components/FormCommon';

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

@@ -50,7 +50,7 @@ export declare enum Category {
 export declare class Dialog extends React.Component<DialogProps, DialogState> {
     state: DialogState;
     componentDidMount(): void;
-    render(): import("react/jsx-runtime").JSX.Element;
+    render(): React.JSX.Element;
     private renderButtons;
     private checkInputValue;
     private setDisabledBtnState;

package/dist/types/components/Shortcut/index.d.ts

@@ -0,0 +1,17 @@
+/*!
+ * © 2025 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.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export declare const Shortcut: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const ShortcutConnector: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;

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

@@ -25,6 +25,8 @@ interface StyledModalProps {
     style?: {
         content?: React.CSSProperties;
     };
+    ariaLabelledby?: string;
+    id?: string;
 }
 export declare const StyledModalContent: React.FC<StyledModalProps>;
 export declare const StyledModal: React.FC<StyledModalProps>;

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

@@ -1,3 +1,3 @@
 import React from 'react';
 import { Tooltip as ReactTooltip } from 'react-tooltip';
-export declare const Tooltip: (props: React.ComponentProps<typeof ReactTooltip>) => import("react/jsx-runtime").JSX.Element;
+export declare const Tooltip: (props: React.ComponentProps<typeof ReactTooltip>) => React.JSX.Element;

package/dist/types/components/icons/add-author.d.ts

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import React from 'react';
 import { IconProps } from './types';
-declare const AddAuthorIcon: (props: IconProps) => import("react/jsx-runtime").JSX.Element;
+declare const AddAuthorIcon: (props: IconProps) => React.JSX.Element;
 export default AddAuthorIcon;

package/dist/types/components/icons/add-figure.d.ts

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import React from 'react';
 import { IconProps } from './types';
-declare const AddFigureIcon: (props: IconProps) => import("react/jsx-runtime").JSX.Element;
+declare const AddFigureIcon: (props: IconProps) => React.JSX.Element;
 export default AddFigureIcon;

package/dist/types/components/icons/affiliation-placeholder.d.ts

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import React from 'react';
 import { IconProps } from './types';
-declare const AffiliationPlaceholderIcon: (props: IconProps) => import("react/jsx-runtime").JSX.Element;
+declare const AffiliationPlaceholderIcon: (props: IconProps) => React.JSX.Element;
 export default AffiliationPlaceholderIcon;

package/dist/types/components/icons/author-placeholder.d.ts

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import React from 'react';
 import { IconProps } from './types';
-declare const AuthorPlaceholderIcon: (props: IconProps) => import("react/jsx-runtime").JSX.Element;
+declare const AuthorPlaceholderIcon: (props: IconProps) => React.JSX.Element;
 export default AuthorPlaceholderIcon;

package/dist/types/components/icons/danger.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { IconProps } from './types';
-declare const DangerIcon: (props: IconProps) => import("react/jsx-runtime").JSX.Element;
+declare const DangerIcon: (props: IconProps) => React.JSX.Element;
 export default DangerIcon;

package/dist/types/components/icons/section-category.d.ts

@@ -13,5 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-declare const SectionCategoryIcon: () => import("react/jsx-runtime").JSX.Element;
+import React from 'react';
+declare const SectionCategoryIcon: () => React.JSX.Element;
 export default SectionCategoryIcon;

package/dist/types/components/icons/x.d.ts

@@ -1,3 +1,3 @@
 import { IconProps } from './types';
-export declare const XIcon: ({ fill, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const XIcon: ({ fill, ...props }: IconProps) => import("react").JSX.Element;
 export default XIcon;

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

@@ -1,4 +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;
+export declare const useFocusCycle: (containerRef: RefObject<HTMLDivElement | null>, enabled?: boolean) => void;

package/dist/types/index.d.ts

@@ -30,8 +30,9 @@ export * from './components/Form';
 export * from './components/MultiValueInput';
 export * from './components/Resizer';
 export * from './components/SaveStatus';
-export * from './components/StyledModal';
+export * from './components/Shortcut';
 export * from './components/Sidebar';
+export * from './components/StyledModal';
 export * from './components/TextField';
 export * from './components/FormFieldContainer';
 export * from './components/FormCommon';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/style-guide",
   "description": "Shared components for Manuscripts applications",
-  "version": "3.5.31",
+  "version": "3.6.0",
   "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -18,92 +18,87 @@
     "**/*.css"
   ],
   "scripts": {
-    "build": "npm-run-all --parallel build:*",
+    "build": "npm-run-all2 --parallel build:*",
     "build:cjs": "tsc --outDir dist/cjs --module commonjs",
     "build:es": "tsc --outDir dist/es --declarationDir dist/types --declaration",
     "build-storybook": "storybook build",
-    "dev": "npm-run-all --parallel 'build:* --watch'",
+    "dev": "npm-run-all2 --parallel 'build:* --watch'",
     "lint": "eslint src stories --ext .ts,.tsx --max-warnings=0 --fix",
     "prebuild": "rimraf dist",
     "prettier": "prettier --write \"{src,stories}/**/*.{ts,tsx}\"",
-    "preversion": "npm-run-all --parallel lint typecheck test",
+    "preversion": "npm-run-all2 --parallel lint typecheck",
     "storybook": "storybook dev -p 6006",
     "test": "vitest run",
     "typecheck": "tsc --noEmit",
     "version": "pnpm build",
-    "unlink-all": "git checkout -- pnpm-workspace.yaml pnpm-lock.yaml && rm -rf node_modules && pnpm install",
-    "prepare": "husky install"
+    "prepare": "husky"
   },
   "dependencies": {
-    "@headlessui/react": "2.2.9",
-    "date-fns": "2.30.0",
-    "formik": "2.4.6",
-    "lodash": "4.17.21",
+    "@headlessui/react": "2.2.10",
+    "formik": "2.4.9",
     "prosemirror-commands": "1.7.1",
     "prosemirror-history": "1.4.1",
     "prosemirror-keymap": "1.2.3",
     "prosemirror-model": "1.25.0",
     "prosemirror-state": "1.4.3",
     "prosemirror-view": "1.41.0",
-    "react": "19.2.0",
+    "react": "19.2.6",
     "react-dnd": "16.0.1",
     "react-dnd-html5-backend": "16.0.1",
-    "react-dom": "19.2.0",
-    "react-is": "19.2.0",
+    "react-dom": "19.2.6",
     "react-router-dom": "5.3.4",
-    "react-select": "5.10.1",
-    "react-tooltip": "5.28.1",
+    "react-select": "5.10.2",
+    "react-tooltip": "6.0.2",
     "styled-components": "5.3.11"
   },
   "devDependencies": {
-    "@babel/core": "7.23.7",
-    "@babel/preset-env": "7.23.8",
-    "@babel/preset-react": "7.23.3",
-    "@babel/preset-typescript": "7.23.3",
-    "@eslint/eslintrc": "3.3.1",
-    "@eslint/js": "9.39.1",
+    "@babel/core": "7.29.0",
+    "@babel/preset-env": "7.29.5",
+    "@babel/preset-react": "7.28.5",
+    "@babel/preset-typescript": "7.28.5",
+    "@eslint/eslintrc": "3.3.5",
+    "@eslint/js": "9.39.4",
+    "@fontsource/lato": "5.2.7",
     "@manuscripts/eslint-config": "0.5.1",
-    "@storybook/addon-actions": "8.5.3",
-    "@storybook/addon-essentials": "8.5.3",
-    "@storybook/addon-interactions": "8.5.3",
-    "@storybook/addon-links": "8.5.3",
-    "@storybook/blocks": "8.5.3",
-    "@storybook/react": "8.5.3",
-    "@storybook/react-webpack5": "8.5.3",
-    "@storybook/test": "8.5.3",
-    "@vitest/coverage-v8": "4.1.6",
+    "@storybook/addon-actions": "8.6.18",
+    "@storybook/addon-essentials": "8.6.18",
+    "@storybook/addon-interactions": "8.6.18",
+    "@storybook/addon-links": "8.6.18",
+    "@storybook/blocks": "8.6.18",
+    "@storybook/react": "8.6.18",
+    "@storybook/react-webpack5": "8.6.18",
+    "@storybook/test": "8.6.18",
     "@types/lodash": "4.17.16",
     "@types/node": "^20.19.25",
-    "@types/react": "19.2.3",
+    "@types/react": "19.2.17",
     "@types/react-dom": "19.2.3",
     "@types/react-router-dom": "5.3.3",
-    "@types/styled-components": "5.1.34",
-    "@typescript-eslint/eslint-plugin": "8.46.4",
-    "@typescript-eslint/parser": "8.46.4",
-    "jsdom": "29.1.1",
-    "babel-loader": "9.1.3",
+    "@types/styled-components": "5.1.36",
+    "@typescript-eslint/eslint-plugin": "8.59.3",
+    "@typescript-eslint/parser": "8.59.3",
+    "@vitest/coverage-v8": "4.1.6",
+    "babel-loader": "10.1.1",
     "eslint": "9.39.1",
     "eslint-config-prettier": "10.1.8",
-    "eslint-plugin-diff": "2.0.3",
+    "eslint-plugin-diff": "2.1.7",
     "eslint-plugin-header": "3.1.1",
     "eslint-plugin-import": "2.32.0",
     "eslint-plugin-jsx-a11y": "6.10.2",
-    "eslint-plugin-mdx": "3.6.2",
-    "eslint-plugin-node": "11.1.0",
-    "eslint-plugin-prettier": "5.5.4",
-    "eslint-plugin-promise": "7.2.1",
+    "eslint-plugin-mdx": "3.7.0",
+    "eslint-plugin-prettier": "5.5.5",
+    "eslint-plugin-promise": "7.3.0",
     "eslint-plugin-react": "7.37.5",
-    "eslint-plugin-react-hooks": "7.0.1",
-    "eslint-plugin-simple-import-sort": "12.1.1",
-    "eslint-plugin-storybook": "10.0.6",
-    "husky": "8.0.3",
-    "vitest": "4.1.6",
-    "npm-run-all": "4.1.5",
-    "prettier": "3.6.2",
-    "rimraf": "6.0.1",
-    "storybook": "8.5.3",
-    "typeface-lato": "1.1.13",
-    "typescript": "5.9.2"
+    "eslint-plugin-react-hooks": "7.1.1",
+    "eslint-plugin-simple-import-sort": "13.0.0",
+    "eslint-plugin-storybook": "10.3.6",
+    "husky": "9.1.7",
+    "jsdom": "29.1.1",
+    "npm-run-all2": "8.0.4",
+    "prettier": "3.8.3",
+    "rimraf": "6.1.3",
+    "storybook": "8.6.18",
+    "typescript": "5.9.2",
+    "vitest": "4.1.7"
   },
   "engines": {
     "node": ">=22"