@manuscripts/style-guide 3.5.5 → 3.5.6

package/dist/cjs/components/Button.js

@@ -48,7 +48,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.IconButtonGroup = exports.ButtonGroup = exports.SecondaryIconButton = exports.RoundIconButton = exports.IconButton = exports.ToggleButtonAlt = exports.ToggleButton = exports.IconTextButton = exports.TertiaryButton = exports.LoginButton = exports.PrimaryButton = exports.SecondaryButton = void 0;
+exports.IconButtonGroup = exports.ButtonGroup = exports.SecondaryIconButton = exports.RoundIconButton = exports.IconButton = exports.ToggleButtonAlt = exports.ToggleButton = exports.IconTextButton = exports.TertiaryButton = exports.LoginButton = exports.PrimaryButton = exports.SecondaryButton = exports.outlineStyle = void 0;
 const styled_components_1 = __importStar(require("styled-components"));
 const dangerBtnStyles = (0, styled_components_1.css) `
   ${(props) => btnColors(props.theme.colors.button.error.color.default, props.theme.colors.button.error.background.default, props.theme.colors.button.error.border.default, true)}
@@ -70,6 +70,12 @@ const miniBtnStyles = (0, styled_components_1.css) `
   margin: 0 ${(props) => props.theme.grid.unit}px;
   line-height: 1;
 `;
+exports.outlineStyle = (0, styled_components_1.css) `
+  &:not([disabled]):focus-visible {
+    outline: 3px solid ${(props) => props.theme.colors.outline.focus};
+    outline-offset: 4px;
+  }
+`;
 const btnStyles = (0, styled_components_1.css) `
   align-items: center;
   background: transparent;
@@ -104,6 +110,8 @@ const btnStyles = (0, styled_components_1.css) `
   :disabled {
     ${disabledBtnStyles}
   }
+
+  ${exports.outlineStyle}
 `;
 const btnColors = (color, bg, border, important) => `
     ${color && 'color: ' + color}
@@ -128,11 +136,6 @@ exports.SecondaryButton = (0, styled_components_1.default)(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;
-  }
 `;
 exports.PrimaryButton = (0, styled_components_1.default)(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)}
@@ -141,11 +144,6 @@ exports.PrimaryButton = (0, styled_components_1.default)(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/cjs/components/Checkbox.js

@@ -58,6 +58,7 @@ exports.CheckboxLabel = styled_components_1.default.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};
     }
@@ -74,7 +75,8 @@ exports.CheckboxLabel = styled_components_1.default.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/cjs/components/Drawer.js

@@ -36,6 +36,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Drawer = exports.DrawerItemMeta = exports.DrawerItemLabel = exports.DrawerLabelContainer = exports.DrawerIcon = exports.DrawerListItem = exports.DrawerItemsList = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const styled_components_1 = __importStar(require("styled-components"));
+const Button_1 = require("./Button");
+const List_1 = require("./List");
 const slideIn = (0, styled_components_1.keyframes) `
   from {
     transform: translateX(100%);
@@ -44,7 +46,7 @@ const slideIn = (0, styled_components_1.keyframes) `
     transform: translateX(0);
   }
 `;
-const DrawerContainer = styled_components_1.default.div `
+const DrawerContainer = (0, List_1.withFocusTrap)(styled_components_1.default.div `
   width: ${(props) => props.width || '300px'};
   background: ${(props) => props.theme.colors.background.primary};
   height: 100%;
@@ -55,9 +57,10 @@ const DrawerContainer = styled_components_1.default.div `
   right: 0;
   top: 0;
   z-index: 1;
-`;
-const DrawerBackButton = styled_components_1.default.button `
-  padding: 8px 16px;
+`);
+const DrawerBackButton = (0, styled_components_1.default)(Button_1.SecondaryButton) `
+  margin: 0 12px;
+  padding: 8px 4px;
   border: none;
   background: none;
   font-weight: ${(props) => props.theme.font.weight.normal};
@@ -66,7 +69,7 @@ const DrawerBackButton = styled_components_1.default.button `
   color: ${(props) => props.theme.colors.brand.default};
   cursor: pointer;
   display: flex;
-  align-items: center;
+  justify-content: start;
   gap: 4px;
 
   &:hover {
@@ -74,13 +77,13 @@ const DrawerBackButton = styled_components_1.default.button `
     opacity: 0.8;
   }
 `;
-exports.DrawerItemsList = styled_components_1.default.ul `
+exports.DrawerItemsList = (0, List_1.withListNavigation)(styled_components_1.default.ul `
   list-style: none;
-  padding: 0;
+  padding: 8px;
   margin: 0;
   overflow-y: auto;
-`;
-exports.DrawerListItem = styled_components_1.default.li `
+`);
+exports.DrawerListItem = (0, List_1.withNavigableListItem)(styled_components_1.default.li `
   padding: 8px 16px;
   cursor: pointer;
   display: flex;
@@ -95,7 +98,7 @@ exports.DrawerListItem = styled_components_1.default.li `
   &:last-child {
     border-bottom: none;
   }
-`;
+`);
 exports.DrawerIcon = styled_components_1.default.span `
   width: 20px;
   height: 20px;

package/dist/cjs/components/Inspector.js

@@ -79,6 +79,11 @@ exports.InspectorTab = (0, styled_components_1.default)(react_1.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;
+    }
   }
 `;
 exports.InspectorTabPanelHeading = styled_components_1.default.div `

package/dist/cjs/components/List.js

@@ -0,0 +1,195 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withListNavigation = withListNavigation;
+exports.withNavigableListItem = withNavigableListItem;
+exports.withFocusTrap = withFocusTrap;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styled_components_1 = __importDefault(require("styled-components"));
+const Button_1 = require("./Button");
+const use_focus_cycle_1 = require("../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 = (0, use_focus_cycle_1.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;
+}
+function withListNavigation(Component) {
+    return (0, styled_components_1.default)((0, react_1.forwardRef)((props, forwardedRef) => {
+        const containerRef = (0, react_1.useRef)(null);
+        const tappingOutIndex = (0, react_1.useRef)(0);
+        const getListItems = (0, react_1.useCallback)(() => {
+            const element = containerRef.current;
+            if (!element) {
+                return [];
+            }
+            return Array.from(element.querySelectorAll('[data-list-item]'));
+        }, []);
+        const getColumnCount = (0, react_1.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 = (0, react_1.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 = (0, react_1.useCallback)(() => {
+            if (tappingOutIndex.current) {
+                const items = getListItems();
+                items[tappingOutIndex.current].setAttribute('tabindex', '-1');
+                items[0].setAttribute('tabindex', '0');
+                tappingOutIndex.current = 0;
+            }
+        }, [getListItems]);
+        (0, react_1.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 ((0, jsx_runtime_1.jsx)(Component, { ref: mergeRefs(containerRef, forwardedRef), ...props, onKeyDown: handleKeyDown, onBlur: handelOnBlur }));
+    })) `
+    outline: none;
+  `;
+}
+function withNavigableListItem(Component) {
+    return (0, styled_components_1.default)((0, react_1.forwardRef)((props, forwardedRef) => {
+        const listItemRef = (0, react_1.useRef)(null);
+        const handleKeyDown = (0, react_1.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 ((0, jsx_runtime_1.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};
+    }
+    ${Button_1.outlineStyle}
+  `;
+}
+function withFocusTrap(Component) {
+    return (0, react_1.forwardRef)((props, forwardedRef) => {
+        const containerRef = (0, react_1.useRef)(null);
+        const handleKeyDown = (0, react_1.useCallback)((e) => (0, use_focus_cycle_1.trapFocus)(e, containerRef.current), []);
+        return ((0, jsx_runtime_1.jsx)(Component, { ref: mergeRefs(containerRef, forwardedRef), onKeyDown: handleKeyDown, ...props }));
+    });
+}

package/dist/cjs/components/MultiValueInput.js

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

package/dist/cjs/components/SelectedItemsBox.js

@@ -58,6 +58,11 @@ const RemoveButton = styled_components_1.default.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;
+  }
 `;
 const SelectedItemsBox = ({ items, onRemove, placeholder = 'No items selected', ...props }) => {
     return ((0, jsx_runtime_1.jsx)(BoxContainer, { ...props, children: items.length > 0 ? ((0, jsx_runtime_1.jsx)(ItemsList, { children: items.map((item) => ((0, jsx_runtime_1.jsxs)(Item, { "data-cy": "item", children: [item.label, (0, jsx_runtime_1.jsx)(RemoveButton, { onClick: () => onRemove(item.id), "aria-label": `Remove ${item.label}`, children: "x" })] }, item.id))) })) : ((0, jsx_runtime_1.jsx)(EmptyContainer, { children: (0, jsx_runtime_1.jsx)(Placeholder, { children: placeholder }) })) }));

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/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/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 }) })) }));

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