@manuscripts/style-guide 3.5.4 → 3.5.6

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

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFocusCycle = void 0;
+exports.getFocusableElements = getFocusableElements;
+exports.trapFocus = trapFocus;
+const react_1 = require("react");
+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');
+    });
+}
+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();
+    }
+}
+const useFocusCycle = (containerRef) => {
+    (0, react_1.useEffect)(() => {
+        const handleKeyDown = (e) => trapFocus(e, containerRef.current);
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [containerRef]);
+};
+exports.useFocusCycle = useFocusCycle;

package/dist/cjs/index.js

@@ -87,6 +87,7 @@ __exportStar(require("./components/Badge"), exports);
 __exportStar(require("./components/NavDropdown"), exports);
 __exportStar(require("./components/Dropdown"), exports);
 __exportStar(require("./components/LoadingOverlay"), exports);
+__exportStar(require("./components/List"), exports);
 __exportStar(require("./components/Text"), exports);
 __exportStar(require("./components/RelativeDate"), exports);
 __exportStar(require("./components/Menus"), exports);
@@ -97,5 +98,6 @@ __exportStar(require("./components/SelectedItemsBox"), exports);
 __exportStar(require("./hooks/use-dropdown"), exports);
 __exportStar(require("./hooks/use-menus"), exports);
 __exportStar(require("./hooks/use-scroll-detection"), exports);
+__exportStar(require("./hooks/use-focus-cycle"), exports);
 __exportStar(require("./lib/files"), exports);
 __exportStar(require("./lib/menus"), exports);

package/dist/es/components/Button.js

@@ -34,6 +34,12 @@ const miniBtnStyles = css `
   margin: 0 ${(props) => props.theme.grid.unit}px;
   line-height: 1;
 `;
+export const outlineStyle = css `
+  &:not([disabled]):focus-visible {
+    outline: 3px solid ${(props) => props.theme.colors.outline.focus};
+    outline-offset: 4px;
+  }
+`;
 const btnStyles = css `
   align-items: center;
   background: transparent;
@@ -68,6 +74,8 @@ const btnStyles = css `
   :disabled {
     ${disabledBtnStyles}
   }
+
+  ${outlineStyle}
 `;
 const btnColors = (color, bg, border, important) => `
     ${color && 'color: ' + color}
@@ -92,11 +100,6 @@ export const SecondaryButton = styled(ButtonTemplate) `
   &:not([disabled]):active {
     ${(props) => btnColors(props.theme.colors.button.secondary.color.active, props.theme.colors.button.secondary.background.active, props.theme.colors.button.secondary.border.active, false)}
   }
-
-  &:focus-visible {
-    outline: 3px solid ${(props) => props.theme.colors.outline.focus};
-    outline-offset: 4px;
-  }
 `;
 export const PrimaryButton = styled(ButtonTemplate) `
   ${(props) => btnColors(props.theme.colors.button.primary.color.default, props.theme.colors.button.primary.background.default, props.theme.colors.button.primary.border.default, false)}
@@ -105,11 +108,6 @@ export const PrimaryButton = styled(ButtonTemplate) `
     ${(props) => btnColors(props.theme.colors.button.primary.color.hover, props.theme.colors.button.primary.background.hover, props.theme.colors.button.primary.border.hover, false)}
   }
 
-  &:focus-visible {
-    outline: 3px solid ${(props) => props.theme.colors.outline.focus} !important;
-    outline-offset: 4px;
-  }
-
   &:not([disabled]):active {
     ${(props) => btnColors(props.theme.colors.button.primary.color.active, props.theme.colors.button.primary.background.active, props.theme.colors.button.primary.border.active, false)}
   }

package/dist/es/components/Checkbox.js

@@ -52,6 +52,7 @@ export const CheckboxLabel = styled.label `
       border: 1.5px solid ${(props) => props.theme.colors.border.field.default};
       border-radius: 3px;
       margin-right: 10px;
+      margin-left: 4px;
       text-align: center;
       background: ${(props) => props.theme.colors.background.primary};
     }
@@ -68,7 +69,8 @@ export const CheckboxLabel = styled.label `
   }
 
   input:focus-visible + div::before {
-    outline: none;
+    outline: 2px solid ${(props) => props.theme.colors.outline.focus};
+    outline-offset: 2px;
   }
 
   input:disabled + div::before {

package/dist/es/components/DraggableModal.js

@@ -46,9 +46,13 @@ export const DraggableModal = ({ children, isOpen, onRequestClose, hideOverlay }
             content: {
                 left: '0',
                 bottom: '0',
+                top: 'auto',
+                margin: '0',
                 transition: 'none',
                 position: 'fixed',
                 width: '100%',
+                maxWidth: '100%',
+                maxHeight: 'none',
             },
         }, children: _jsx(DraggableModalContainer, { onMouseDown: mouseDown, onMouseMove: mouseMove, "data-cy": "find-replace-modal", children: children }) }));
 };

package/dist/es/components/Drawer.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled, { keyframes } from 'styled-components';
+import { SecondaryButton } from './Button';
+import { withFocusTrap, withListNavigation, withNavigableListItem, } from './List';
 const slideIn = keyframes `
   from {
     transform: translateX(100%);
@@ -8,7 +10,7 @@ const slideIn = keyframes `
     transform: translateX(0);
   }
 `;
-const DrawerContainer = styled.div `
+const DrawerContainer = withFocusTrap(styled.div `
   width: ${(props) => props.width || '300px'};
   background: ${(props) => props.theme.colors.background.primary};
   height: 100%;
@@ -19,9 +21,10 @@ const DrawerContainer = styled.div `
   right: 0;
   top: 0;
   z-index: 1;
-`;
-const DrawerBackButton = styled.button `
-  padding: 8px 16px;
+`);
+const DrawerBackButton = styled(SecondaryButton) `
+  margin: 0 12px;
+  padding: 8px 4px;
   border: none;
   background: none;
   font-weight: ${(props) => props.theme.font.weight.normal};
@@ -30,7 +33,7 @@ const DrawerBackButton = styled.button `
   color: ${(props) => props.theme.colors.brand.default};
   cursor: pointer;
   display: flex;
-  align-items: center;
+  justify-content: start;
   gap: 4px;
 
   &:hover {
@@ -38,13 +41,13 @@ const DrawerBackButton = styled.button `
     opacity: 0.8;
   }
 `;
-export const DrawerItemsList = styled.ul `
+export const DrawerItemsList = withListNavigation(styled.ul `
   list-style: none;
-  padding: 0;
+  padding: 8px;
   margin: 0;
   overflow-y: auto;
-`;
-export const DrawerListItem = styled.li `
+`);
+export const DrawerListItem = withNavigableListItem(styled.li `
   padding: 8px 16px;
   cursor: pointer;
   display: flex;
@@ -59,7 +62,7 @@ export const DrawerListItem = styled.li `
   &:last-child {
     border-bottom: none;
   }
-`;
+`);
 export const DrawerIcon = styled.span `
   width: 20px;
   height: 20px;

package/dist/es/components/Inspector.js

@@ -73,6 +73,11 @@ export const InspectorTab = styled(Tab) `
       border-color: ${(props) => props.theme.colors.brand.default};
       color: ${(props) => props.theme.colors.brand.default};
     }
+
+    &[data-headlessui-state~='selected'][data-headlessui-state~='focus'] {
+      outline: 2px solid ${(props) => props.theme.colors.outline.focus};
+      outline-offset: -2px;
+    }
   }
 `;
 export const InspectorTabPanelHeading = styled.div `

package/dist/es/components/List.js

@@ -0,0 +1,187 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback, useLayoutEffect, useRef, } from 'react';
+import styled from 'styled-components';
+import { outlineStyle } from './Button';
+import { getFocusableElements, trapFocus } from '../hooks/use-focus-cycle';
+function mergeRefs(...refs) {
+    return (value) => {
+        refs.forEach((ref) => {
+            if (typeof ref === 'function') {
+                ref(value);
+            }
+            else if (ref != null) {
+                ;
+                ref.current = value;
+            }
+        });
+    };
+}
+function handleTabWithinListItem(e, items) {
+    if (e.key !== 'Tab') {
+        return false;
+    }
+    const activeElement = document.activeElement;
+    const currentItem = activeElement.closest('[data-list-item]');
+    const isOnInternalElement = currentItem &&
+        currentItem !== activeElement &&
+        currentItem.contains(activeElement);
+    if (currentItem && isOnInternalElement) {
+        const focusableElements = getFocusableElements(currentItem);
+        const currentIndex = focusableElements.indexOf(activeElement);
+        const isFirstElement = currentIndex === 0;
+        const isLastElement = currentIndex === focusableElements.length - 1;
+        if (e.shiftKey && isFirstElement) {
+            e.preventDefault();
+            currentItem.focus();
+            return true;
+        }
+        else if (!e.shiftKey && isLastElement) {
+            const currentIndex = items.indexOf(currentItem);
+            const nextItem = items[currentIndex + 1];
+            if (nextItem) {
+                e.preventDefault();
+                nextItem.focus();
+                return true;
+            }
+        }
+    }
+    return false;
+}
+export function withListNavigation(Component) {
+    return styled(forwardRef((props, forwardedRef) => {
+        const containerRef = useRef(null);
+        const tappingOutIndex = useRef(0);
+        const getListItems = useCallback(() => {
+            const element = containerRef.current;
+            if (!element) {
+                return [];
+            }
+            return Array.from(element.querySelectorAll('[data-list-item]'));
+        }, []);
+        const getColumnCount = useCallback(() => {
+            const element = containerRef.current;
+            if (!element) {
+                return 1;
+            }
+            const gridStyle = window.getComputedStyle(element);
+            return gridStyle
+                .getPropertyValue('grid-template-columns')
+                .split(' ')
+                .filter((val) => val !== '').length;
+        }, []);
+        const handleKeyDown = useCallback((e) => {
+            const items = getListItems();
+            const handled = handleTabWithinListItem(e, items);
+            if (handled) {
+                return;
+            }
+            const currentIndex = items.indexOf(document.activeElement);
+            const element = containerRef.current;
+            const columnCount = getColumnCount();
+            if (currentIndex === -1 || !element) {
+                return;
+            }
+            let newIndex = currentIndex;
+            switch (e.key) {
+                case 'ArrowUp': {
+                    e.preventDefault();
+                    newIndex =
+                        (currentIndex - columnCount + items.length) % items.length;
+                    break;
+                }
+                case 'ArrowDown': {
+                    e.preventDefault();
+                    newIndex = (currentIndex + columnCount) % items.length;
+                    break;
+                }
+                case 'ArrowLeft': {
+                    if (columnCount > 1) {
+                        e.preventDefault();
+                        newIndex = (currentIndex - 1 + items.length) % items.length;
+                    }
+                    break;
+                }
+                case 'ArrowRight': {
+                    if (columnCount > 1) {
+                        e.preventDefault();
+                        newIndex = (currentIndex + 1) % items.length;
+                    }
+                    break;
+                }
+                case 'Tab': {
+                    tappingOutIndex.current = currentIndex;
+                    break;
+                }
+            }
+            if (currentIndex !== newIndex) {
+                items[currentIndex].setAttribute('tabindex', '-1');
+                items[newIndex].setAttribute('tabindex', '0');
+                items[newIndex].focus();
+            }
+        }, [getListItems, getColumnCount, containerRef]);
+        const handelOnBlur = useCallback(() => {
+            if (tappingOutIndex.current) {
+                const items = getListItems();
+                items[tappingOutIndex.current].setAttribute('tabindex', '-1');
+                items[0].setAttribute('tabindex', '0');
+                tappingOutIndex.current = 0;
+            }
+        }, [getListItems]);
+        useLayoutEffect(() => {
+            const element = containerRef.current;
+            if (!element) {
+                return;
+            }
+            const firstItem = element.querySelector('[data-list-item]');
+            if (!firstItem) {
+                return;
+            }
+            if (firstItem.tabIndex === 0) {
+                return;
+            }
+            const tabbedElement = element.querySelector('[data-list-item][tabindex="0"]');
+            if (tabbedElement) {
+                tabbedElement.tabIndex = -1;
+            }
+            firstItem.tabIndex = 0;
+        });
+        return (_jsx(Component, { ref: mergeRefs(containerRef, forwardedRef), ...props, onKeyDown: handleKeyDown, onBlur: handelOnBlur }));
+    })) `
+    outline: none;
+  `;
+}
+export function withNavigableListItem(Component) {
+    return styled(forwardRef((props, forwardedRef) => {
+        const listItemRef = useRef(null);
+        const handleKeyDown = useCallback((e) => {
+            const listItem = listItemRef.current;
+            const element = e.target;
+            if (element && listItem && element === listItem && e.key === 'Enter') {
+                const interactiveElements = [
+                    'BUTTON',
+                    'A',
+                    'INPUT',
+                    'TEXTAREA',
+                    'SELECT',
+                ];
+                if (!interactiveElements.includes(listItem.tagName)) {
+                    e.preventDefault();
+                    listItem.click();
+                }
+            }
+        }, []);
+        return (_jsx(Component, { tabIndex: -1, "data-list-item": true, ref: mergeRefs(listItemRef, forwardedRef), onKeyDown: handleKeyDown, ...props }));
+    })) `
+    &:not([disabled]):focus-visible {
+      background-color: ${(props) => props.theme.colors.background.fifth};
+    }
+    ${outlineStyle}
+  `;
+}
+export function withFocusTrap(Component) {
+    return forwardRef((props, forwardedRef) => {
+        const containerRef = useRef(null);
+        const handleKeyDown = useCallback((e) => trapFocus(e, containerRef.current), []);
+        return (_jsx(Component, { ref: mergeRefs(containerRef, forwardedRef), onKeyDown: handleKeyDown, ...props }));
+    });
+}

package/dist/es/components/LoadingOverlay.js

@@ -1,26 +1,17 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import Modal from 'react-modal';
-export const LoadingOverlay = ({ children, }) => (_jsx(_Fragment, { children: _jsx(Modal, { isOpen: true, style: {
-            overlay: {
-                position: 'fixed',
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                backgroundColor: 'white',
-                zIndex: 20,
-            },
-            content: {
-                position: 'fixed',
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                background: 'white',
-                display: 'flex',
-                flexDirection: 'column',
-                padding: 0,
-                overflow: 'auto',
-                border: 'none',
-            },
-        }, children: _jsx(_Fragment, { children: children }) }) }));
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from 'styled-components';
+export const LoadingOverlay = ({ children, }) => _jsx(Overlay, { children: children });
+const Overlay = styled.div `
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: white;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  overflow: auto;
+  border: none;
+  z-index: 20;
+`;

package/dist/es/components/MultiValueInput.js

@@ -53,6 +53,11 @@ const RemoveButton = styled.button `
   &:hover {
     background: black;
   }
+
+  &:not([disabled]):focus-visible {
+    outline: 1px solid ${(props) => props.theme.colors.outline.focus};
+    outline-offset: 2px;
+  }
 `;
 const Input = styled.input `
   ${commonStyles}
@@ -115,5 +120,5 @@ export const MultiValueInput = ({ id, inputType, placeholder = '', initialValues
         : inputType === 'number'
             ? 'Enter number and press enter'
             : 'Enter text and press enter';
-    return (_jsxs(Container, { children: [values.map((value, index) => (_jsxs(Chip, { children: [value, _jsx(RemoveButton, { onMouseUp: () => handleRemoveValue(index), children: "\u00D7" })] }, index))), _jsx(Input, { id: id, type: inputType, value: currentValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onBlur: handleBlur, placeholder: xplaceholder })] }));
+    return (_jsxs(Container, { children: [values.map((value, index) => (_jsxs(Chip, { children: [value, _jsx(RemoveButton, { type: 'button', onClick: () => handleRemoveValue(index), children: "\u00D7" })] }, index))), _jsx(Input, { id: id, type: inputType, value: currentValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onBlur: handleBlur, placeholder: xplaceholder })] }));
 };

package/dist/es/components/SelectedItemsBox.js

@@ -52,6 +52,11 @@ const RemoveButton = styled.button `
   padding: 0;
   font-family: ${(props) => props.theme.font.family.sans};
   font-weight: ${(props) => props.theme.font.weight.light};
+
+  &:not([disabled]):focus-visible {
+    outline: 1px solid ${(props) => props.theme.colors.outline.focus};
+    outline-offset: 2px;
+  }
 `;
 export const SelectedItemsBox = ({ items, onRemove, placeholder = 'No items selected', ...props }) => {
     return (_jsx(BoxContainer, { ...props, children: items.length > 0 ? (_jsx(ItemsList, { children: items.map((item) => (_jsxs(Item, { "data-cy": "item", children: [item.label, _jsx(RemoveButton, { onClick: () => onRemove(item.id), "aria-label": `Remove ${item.label}`, children: "x" })] }, item.id))) })) : (_jsx(EmptyContainer, { children: _jsx(Placeholder, { children: placeholder }) })) }));