import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo, useMemo } from 'react';
import { remToPx, stripUnit } from 'polished';
import { focusHeadingOrContainer, tryCatch } from '../../utils';
import Button from '../Button';
import Flex from '../Flex';
import { useI18n, useShortcutManager, useTheme } from '../../hooks';
import useKeyboardCommands, { KeyboardShortcut } from '../KeyboardCommands';
import { StyledLinkWithShortcut, StyledSkipLinks, StyledSkipLinksItems } from './SkipLinks.styles';
const SkipLinks = memo(function SkipLinks({ items }) {
    const bindings = useShortcutManager();
    const t = useI18n();
    const openKeyboardCommands = useKeyboardCommands();
    const { base: { spacing } } = useTheme();
    const padding = useMemo(() => tryCatch(() => Number(stripUnit(remToPx(spacing))) * 3, () => 24), [spacing]);
    return (_jsx(Flex, { as: StyledSkipLinks, portal: false, container: { direction: 'column' }, placement: 'bottom-end', target: {
            getBoundingClientRect: () => ({
                height: 0,
                width: 0,
                x: padding,
                y: padding,
                top: padding,
                bottom: padding,
                left: padding,
                right: padding
            })
        }, modifiers: [
            {
                name: 'placeAndContain',
                enabled: false
            },
            {
                name: 'offset',
                options: {
                    offset: [0, 0]
                }
            }
        ], "data-app-region": true, "aria-label": t('skip_navigation_menu_label'), children: _jsxs(Flex, { container: { direction: 'column', gap: 0.5, pad: 1 }, as: StyledSkipLinksItems, children: [items.map(item => (_jsx(Button, { variant: 'link', onClick: () => focusHeadingOrContainer(document.querySelector(item.target.selector) ?? document, item.target.ariaLabel), children: item.label }, item.label))), bindings.KeyboardCommands?.keyBinding && (_jsxs(StyledLinkWithShortcut, { children: [_jsx(Button, { variant: 'link', onClick: () => {
                                openKeyboardCommands();
                            }, children: t('keyboard_commands') }, 'Keyboard commands'), _jsx(KeyboardShortcut, { keyBinding: bindings.KeyboardCommands?.keyBinding })] }))] }) }));
});
export default SkipLinks;
//# sourceMappingURL=SkipLinks.js.map