@manuscripts/style-guide 3.5.30 → 3.5.32

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

@@ -15,7 +15,7 @@ const Container = styled_components_1.default.div `
   flex-wrap: wrap;
   gap: 4px;
   align-items: center;
-  padding: 4px 8px;
+  padding: 0;
   background: ${(props) => props.theme.colors.background.primary};
 
   &:hover Input {
@@ -36,6 +36,7 @@ const Chip = styled_components_1.default.span `
   padding: ${(props) => props.theme.grid.unit}px;
   font-size: ${(props) => props.theme.font.size.small};
   line-height: ${(props) => props.theme.font.lineHeight.normal};
+  margin-left: 10px;
 
   & + Input {
     padding-left: 0;
@@ -70,7 +71,6 @@ const Input = styled_components_1.default.input `
   border: none;
   flex: 1;
   min-width: 6em;
-  padding: 10px 16px;
 
   appearance: none;
   -moz-appearance: textfield;

package/dist/cjs/components/SelectField.js

@@ -71,6 +71,7 @@ const selectStyles = (theme, error, variant, listMaxHeight) => ({
     }),
     menu: (base) => ({
         ...base,
+        marginTop: 2,
         borderRadius: 3,
         overflow: 'hidden',
         boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',

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

@@ -9,7 +9,7 @@ const Container = styled.div `
   flex-wrap: wrap;
   gap: 4px;
   align-items: center;
-  padding: 4px 8px;
+  padding: 0;
   background: ${(props) => props.theme.colors.background.primary};
 
   &:hover Input {
@@ -30,6 +30,7 @@ const Chip = styled.span `
   padding: ${(props) => props.theme.grid.unit}px;
   font-size: ${(props) => props.theme.font.size.small};
   line-height: ${(props) => props.theme.font.lineHeight.normal};
+  margin-left: 10px;
 
   & + Input {
     padding-left: 0;
@@ -64,7 +65,6 @@ const Input = styled.input `
   border: none;
   flex: 1;
   min-width: 6em;
-  padding: 10px 16px;
 
   appearance: none;
   -moz-appearance: textfield;

package/dist/es/components/SelectField.js

@@ -65,6 +65,7 @@ const selectStyles = (theme, error, variant, listMaxHeight) => ({
     }),
     menu: (base) => ({
         ...base,
+        marginTop: 2,
         borderRadius: 3,
         overflow: 'hidden',
         boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',

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/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/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.30",
+  "version": "3.5.32",
   "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -31,6 +31,7 @@
     "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"
   },
   "dependencies": {