26 | Edit
27 | ({ theme: theming, itemTransition }), [theming, itemTransition]),
44 | className
45 | })}
46 | style={{ position: 'absolute', ...containerProps?.style }}
47 | ref={containerRef}
48 | >
49 | {children}
50 |
51 | );
52 | };
53 |
--------------------------------------------------------------------------------
/src/components/MenuGroup.js:
--------------------------------------------------------------------------------
1 | import { forwardRef, useContext, useRef, useState } from 'react';
2 | import { useBEM, useLayoutEffect, useCombinedRef } from '../hooks';
3 | import { menuClass, menuGroupClass, MenuListContext } from '../utils';
4 | import { getNormalizedClientRect } from '../positionUtils';
5 |
6 | export const MenuGroup = forwardRef(function MenuGroup(
7 | { className, style, takeOverflow, ...restProps },
8 | externalRef
9 | ) {
10 | const ref = useRef(null);
11 | const [overflowStyle, setOverflowStyle] = useState();
12 | const { overflow, overflowAmt } = useContext(MenuListContext);
13 |
14 | useLayoutEffect(() => {
15 | let maxHeight;
16 | if (takeOverflow && overflowAmt >= 0) {
17 | maxHeight = getNormalizedClientRect(ref.current).height - overflowAmt;
18 | if (maxHeight < 0) maxHeight = 0;
19 | }
20 | setOverflowStyle(maxHeight >= 0 ? { maxHeight, overflow } : undefined);
21 | }, [takeOverflow, overflow, overflowAmt]);
22 |
23 | useLayoutEffect(() => {
24 | if (overflowStyle) ref.current.scrollTop = 0;
25 | }, [overflowStyle]);
26 |
27 | return (
28 |
34 | );
35 | });
36 |
--------------------------------------------------------------------------------
/src/styles/transitions/zoom.scss:
--------------------------------------------------------------------------------
1 | @use 'sass:list';
2 | @use 'sass:string';
3 |
4 | $menu: 'szh-menu';
5 | $duration: 0.125s;
6 | $scale: 0.95;
7 |
8 | $origins: (
9 | ('left', 'start', 'right top'),
10 | ('left', 'center', 'right center'),
11 | ('left', 'end', 'right bottom'),
12 | ('right', 'start', 'left top'),
13 | ('right', 'center', 'left center'),
14 | ('right', 'end', 'left bottom'),
15 | ('top', 'start', 'left bottom'),
16 | ('top', 'center', 'center bottom'),
17 | ('top', 'end', 'right bottom'),
18 | ('bottom', 'start', 'left top'),
19 | ('bottom', 'center', 'center top'),
20 | ('bottom', 'end', 'right top')
21 | );
22 |
23 | @mixin zoom {
24 | opacity: 0.1;
25 | transform: scale($scale);
26 | }
27 |
28 | @keyframes #{$menu}-show-zoom {
29 | from {
30 | @include zoom;
31 | }
32 | }
33 |
34 | @keyframes #{$menu}-hide-zoom {
35 | to {
36 | @include zoom;
37 | }
38 | }
39 |
40 | .#{$menu}--state-opening {
41 | animation: #{$menu}-show-zoom $duration ease-out;
42 | }
43 |
44 | .#{$menu}--state-closing {
45 | animation: #{$menu}-hide-zoom $duration ease-in forwards;
46 | }
47 |
48 | @each $item in $origins {
49 | $dir: list.nth($item, 1);
50 | $align: list.nth($item, 2);
51 | $origin: list.nth($item, 3);
52 |
53 | .#{$menu}--dir-#{$dir}.#{$menu}--align-#{$align} {
54 | transform-origin: string.unquote($origin);
55 | }
56 | }
57 |
--------------------------------------------------------------------------------
/dist/cjs/hooks/useMenuState.cjs:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var react = require('react');
4 | var reactTransitionState = require('react-transition-state');
5 | var utils = require('../utils/utils.cjs');
6 | var constants = require('../utils/constants.cjs');
7 |
8 | const useMenuState = ({
9 | initialOpen,
10 | initialMounted,
11 | unmountOnClose,
12 | transition,
13 | transitionTimeout = 500,
14 | onMenuChange
15 | } = {}) => {
16 | const enter = utils.getTransition(transition, 'open');
17 | const exit = utils.getTransition(transition, 'close');
18 | const [{
19 | status
20 | }, toggleMenu, endTransition] = reactTransitionState.useTransitionState({
21 | initialEntered: initialOpen,
22 | mountOnEnter: !initialMounted,
23 | unmountOnExit: unmountOnClose,
24 | timeout: transitionTimeout,
25 | enter,
26 | exit,
27 | onStateChange: react.useCallback(({
28 | current: {
29 | isEnter,
30 | isResolved
31 | }
32 | }) => {
33 | if (!onMenuChange || isEnter && enter && isResolved || !isEnter && exit && isResolved) {
34 | return;
35 | }
36 | onMenuChange({
37 | open: isEnter
38 | });
39 | }, [onMenuChange, enter, exit])
40 | });
41 | return [{
42 | state: constants.MenuStateMap[status],
43 | endTransition
44 | }, toggleMenu];
45 | };
46 |
47 | exports.useMenuState = useMenuState;
48 |
--------------------------------------------------------------------------------
/example/src/utils/index.js:
--------------------------------------------------------------------------------
1 | import { useEffect, useLayoutEffect } from 'react';
2 | import { useTheme } from '../store';
3 |
4 | export const version = '4.5.1';
5 | export const build = '146';
6 |
7 | export const bem = (block, element, modifiers = {}) => {
8 | let blockElement = element ? `${block}__${element}` : block;
9 | let className = blockElement;
10 | for (const name of Object.keys(modifiers)) {
11 | const value = modifiers[name];
12 | if (value) {
13 | className += ` ${blockElement}--`;
14 | className += value === true ? name : `${name}-${value}`;
15 | }
16 | }
17 |
18 | return className;
19 | };
20 |
21 | export const withPresetProps = (MenuComponent) => (props) => (
22 | - {
24 | expect(renderToString(getMenu({ portal: true }))).toContain(
25 | '
-
45 |
{name} 46 |
47 | ))}
48 | - 71 | {renderChildren} 72 | 73 | ); 74 | } 75 | ); 76 | -------------------------------------------------------------------------------- /dist/esm/positionUtils/placeLeftorRight.mjs: -------------------------------------------------------------------------------- 1 | import { placeArrowVertical } from './placeArrowVertical.mjs'; 2 | 3 | const placeLeftorRight = ({ 4 | anchorRect, 5 | containerRect, 6 | menuRect, 7 | placeLeftorRightY, 8 | placeLeftX, 9 | placeRightX, 10 | getLeftOverflow, 11 | getRightOverflow, 12 | confineHorizontally, 13 | confineVertically, 14 | arrowRef, 15 | arrow, 16 | direction, 17 | position 18 | }) => { 19 | let computedDirection = direction; 20 | let y = placeLeftorRightY; 21 | if (position !== 'initial') { 22 | y = confineVertically(y); 23 | if (position === 'anchor') { 24 | y = Math.min(y, anchorRect.bottom - containerRect.top); 25 | y = Math.max(y, anchorRect.top - containerRect.top - menuRect.height); 26 | } 27 | } 28 | let x, leftOverflow, rightOverflow; 29 | if (computedDirection === 'left') { 30 | x = placeLeftX; 31 | if (position !== 'initial') { 32 | leftOverflow = getLeftOverflow(x); 33 | if (leftOverflow < 0) { 34 | rightOverflow = getRightOverflow(placeRightX); 35 | if (rightOverflow <= 0 || -leftOverflow > rightOverflow) { 36 | x = placeRightX; 37 | computedDirection = 'right'; 38 | } 39 | } 40 | } 41 | } else { 42 | x = placeRightX; 43 | if (position !== 'initial') { 44 | rightOverflow = getRightOverflow(x); 45 | if (rightOverflow > 0) { 46 | leftOverflow = getLeftOverflow(placeLeftX); 47 | if (leftOverflow >= 0 || -leftOverflow < rightOverflow) { 48 | x = placeLeftX; 49 | computedDirection = 'left'; 50 | } 51 | } 52 | } 53 | } 54 | if (position === 'auto') x = confineHorizontally(x); 55 | const arrowY = arrow ? placeArrowVertical({ 56 | menuY: y, 57 | arrowRef, 58 | anchorRect, 59 | containerRect, 60 | menuRect 61 | }) : undefined; 62 | return { 63 | arrowY, 64 | x, 65 | y, 66 | computedDirection 67 | }; 68 | }; 69 | 70 | export { placeLeftorRight }; 71 | -------------------------------------------------------------------------------- /dist/esm/components/FocusableItem.mjs: -------------------------------------------------------------------------------- 1 | import { useRef, useContext, useMemo } from 'react'; 2 | import { jsx } from 'react/jsx-runtime'; 3 | import { useItemState } from '../hooks/useItemState.mjs'; 4 | import { useBEM } from '../hooks/useBEM.mjs'; 5 | import { useCombinedRef } from '../hooks/useCombinedRef.mjs'; 6 | import { withHovering } from '../utils/withHovering.mjs'; 7 | import { EventHandlersContext, roleMenuitem, menuClass, menuItemClass } from '../utils/constants.mjs'; 8 | import { safeCall, mergeProps, commonProps } from '../utils/utils.mjs'; 9 | 10 | const FocusableItem = /*#__PURE__*/withHovering('FocusableItem', function FocusableItem({ 11 | className, 12 | disabled, 13 | children, 14 | isHovering, 15 | itemRef, 16 | externalRef, 17 | ...restProps 18 | }) { 19 | const isDisabled = !!disabled; 20 | const ref = useRef(null); 21 | const { 22 | mouseOver, 23 | setHover, 24 | onPointerLeave, 25 | ...restStateProps 26 | } = useItemState(itemRef, ref, isHovering, isDisabled); 27 | const { 28 | handleClose 29 | } = useContext(EventHandlersContext); 30 | const modifiers = useMemo(() => ({ 31 | disabled: isDisabled, 32 | hover: mouseOver || isHovering, 33 | focusable: true 34 | }), [isDisabled, isHovering, mouseOver]); 35 | const renderChildren = useMemo(() => safeCall(children, { 36 | ...modifiers, 37 | ref, 38 | closeMenu: handleClose 39 | }), [children, modifiers, handleClose]); 40 | const mergedProps = mergeProps({ 41 | ...restStateProps, 42 | onPointerLeave: e => onPointerLeave(e, true), 43 | onFocus: setHover 44 | }, restProps); 45 | return /*#__PURE__*/jsx("li", { 46 | role: roleMenuitem, 47 | ...commonProps(isDisabled), 48 | ...mergedProps, 49 | ref: useCombinedRef(externalRef, itemRef), 50 | className: useBEM({ 51 | block: menuClass, 52 | element: menuItemClass, 53 | modifiers, 54 | className 55 | }), 56 | children: renderChildren 57 | }); 58 | }); 59 | 60 | export { FocusableItem }; 61 | -------------------------------------------------------------------------------- /dist/esm/positionUtils/placeToporBottom.mjs: -------------------------------------------------------------------------------- 1 | import { placeArrowHorizontal } from './placeArrowHorizontal.mjs'; 2 | 3 | const placeToporBottom = ({ 4 | anchorRect, 5 | containerRect, 6 | menuRect, 7 | placeToporBottomX, 8 | placeTopY, 9 | placeBottomY, 10 | getTopOverflow, 11 | getBottomOverflow, 12 | confineHorizontally, 13 | confineVertically, 14 | arrowRef, 15 | arrow, 16 | direction, 17 | position 18 | }) => { 19 | let computedDirection = direction === 'top' ? 'top' : 'bottom'; 20 | let x = placeToporBottomX; 21 | if (position !== 'initial') { 22 | x = confineHorizontally(x); 23 | if (position === 'anchor') { 24 | x = Math.min(x, anchorRect.right - containerRect.left); 25 | x = Math.max(x, anchorRect.left - containerRect.left - menuRect.width); 26 | } 27 | } 28 | let y, topOverflow, bottomOverflow; 29 | if (computedDirection === 'top') { 30 | y = placeTopY; 31 | if (position !== 'initial') { 32 | topOverflow = getTopOverflow(y); 33 | if (topOverflow < 0) { 34 | bottomOverflow = getBottomOverflow(placeBottomY); 35 | if (bottomOverflow <= 0 || -topOverflow > bottomOverflow) { 36 | y = placeBottomY; 37 | computedDirection = 'bottom'; 38 | } 39 | } 40 | } 41 | } else { 42 | y = placeBottomY; 43 | if (position !== 'initial') { 44 | bottomOverflow = getBottomOverflow(y); 45 | if (bottomOverflow > 0) { 46 | topOverflow = getTopOverflow(placeTopY); 47 | if (topOverflow >= 0 || -topOverflow < bottomOverflow) { 48 | y = placeTopY; 49 | computedDirection = 'top'; 50 | } 51 | } 52 | } 53 | } 54 | if (position === 'auto') y = confineVertically(y); 55 | const arrowX = arrow ? placeArrowHorizontal({ 56 | menuX: x, 57 | arrowRef, 58 | anchorRect, 59 | containerRect, 60 | menuRect 61 | }) : undefined; 62 | return { 63 | arrowX, 64 | x, 65 | y, 66 | computedDirection 67 | }; 68 | }; 69 | 70 | export { placeToporBottom }; 71 | -------------------------------------------------------------------------------- /dist/transitions/slide.css: -------------------------------------------------------------------------------- 1 | @keyframes szh-menu-show-slide-left { 2 | from { 3 | opacity: 0; 4 | transform: translateX(0.75rem); 5 | } 6 | } 7 | @keyframes szh-menu-hide-slide-left { 8 | to { 9 | opacity: 0; 10 | transform: translateX(0.75rem); 11 | } 12 | } 13 | @keyframes szh-menu-show-slide-right { 14 | from { 15 | opacity: 0; 16 | transform: translateX(-0.75rem); 17 | } 18 | } 19 | @keyframes szh-menu-hide-slide-right { 20 | to { 21 | opacity: 0; 22 | transform: translateX(-0.75rem); 23 | } 24 | } 25 | @keyframes szh-menu-show-slide-top { 26 | from { 27 | opacity: 0; 28 | transform: translateY(0.75rem); 29 | } 30 | } 31 | @keyframes szh-menu-hide-slide-top { 32 | to { 33 | opacity: 0; 34 | transform: translateY(0.75rem); 35 | } 36 | } 37 | @keyframes szh-menu-show-slide-bottom { 38 | from { 39 | opacity: 0; 40 | transform: translateY(-0.75rem); 41 | } 42 | } 43 | @keyframes szh-menu-hide-slide-bottom { 44 | to { 45 | opacity: 0; 46 | transform: translateY(-0.75rem); 47 | } 48 | } 49 | .szh-menu--state-opening.szh-menu--dir-left { 50 | animation: szh-menu-show-slide-left 0.15s ease-out; 51 | } 52 | 53 | .szh-menu--state-closing.szh-menu--dir-left { 54 | animation: szh-menu-hide-slide-left 0.15s ease-in forwards; 55 | } 56 | 57 | .szh-menu--state-opening.szh-menu--dir-right { 58 | animation: szh-menu-show-slide-right 0.15s ease-out; 59 | } 60 | 61 | .szh-menu--state-closing.szh-menu--dir-right { 62 | animation: szh-menu-hide-slide-right 0.15s ease-in forwards; 63 | } 64 | 65 | .szh-menu--state-opening.szh-menu--dir-top { 66 | animation: szh-menu-show-slide-top 0.15s ease-out; 67 | } 68 | 69 | .szh-menu--state-closing.szh-menu--dir-top { 70 | animation: szh-menu-hide-slide-top 0.15s ease-in forwards; 71 | } 72 | 73 | .szh-menu--state-opening.szh-menu--dir-bottom { 74 | animation: szh-menu-show-slide-bottom 0.15s ease-out; 75 | } 76 | 77 | .szh-menu--state-closing.szh-menu--dir-bottom { 78 | animation: szh-menu-hide-slide-bottom 0.15s ease-in forwards; 79 | } 80 | -------------------------------------------------------------------------------- /eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | 3 | import eslint from '@eslint/js'; 4 | import globals from 'globals'; 5 | import prettier from 'eslint-config-prettier'; 6 | import jest from 'eslint-plugin-jest'; 7 | import react from 'eslint-plugin-react'; 8 | import reactHooks from 'eslint-plugin-react-hooks'; 9 | import reactHooksAddons from 'eslint-plugin-react-hooks-addons'; 10 | 11 | export default [ 12 | eslint.configs.recommended, 13 | prettier, 14 | jest.configs['flat/recommended'], 15 | jest.configs['flat/style'], 16 | react.configs.flat.recommended, 17 | react.configs.flat['jsx-runtime'], 18 | reactHooksAddons.configs.recommended, 19 | { 20 | ignores: [ 21 | '**/coverage/', 22 | '**/dist/', 23 | '**/types/', 24 | '**/build/', 25 | '**/static/', 26 | '**/.next/', 27 | '**/*.d.ts' 28 | ] 29 | }, 30 | { 31 | languageOptions: { 32 | ecmaVersion: 'latest', 33 | sourceType: 'module', 34 | parserOptions: { 35 | ecmaFeatures: { 36 | jsx: true 37 | } 38 | }, 39 | globals: { 40 | ...globals.browser, 41 | ...globals.node, 42 | ...globals.jest 43 | } 44 | }, 45 | settings: { 46 | react: { 47 | version: 'detect' 48 | } 49 | }, 50 | plugins: { 51 | 'react-hooks': reactHooks 52 | }, 53 | rules: { 54 | 'no-console': ['error', { allow: ['warn', 'error'] }], 55 | 'no-unused-vars': [ 56 | 'error', 57 | { 58 | argsIgnorePattern: '^_\\d?$' 59 | } 60 | ], 61 | 'jest/expect-expect': [ 62 | 'error', 63 | { 64 | assertFunctionNames: ['expect', 'utils.expect*'] 65 | } 66 | ], 67 | 'react/prop-types': 0, 68 | 'react-hooks/rules-of-hooks': 'error', 69 | 'react-hooks/exhaustive-deps': 'error', 70 | 'react-hooks-addons/no-unused-deps': 'error' 71 | } 72 | }, 73 | { 74 | files: ['example/**/*'], 75 | rules: { 76 | 'react/display-name': 0 77 | } 78 | } 79 | ]; 80 | -------------------------------------------------------------------------------- /dist/cjs/positionUtils/placeLeftorRight.cjs: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var placeArrowVertical = require('./placeArrowVertical.cjs'); 4 | 5 | const placeLeftorRight = ({ 6 | anchorRect, 7 | containerRect, 8 | menuRect, 9 | placeLeftorRightY, 10 | placeLeftX, 11 | placeRightX, 12 | getLeftOverflow, 13 | getRightOverflow, 14 | confineHorizontally, 15 | confineVertically, 16 | arrowRef, 17 | arrow, 18 | direction, 19 | position 20 | }) => { 21 | let computedDirection = direction; 22 | let y = placeLeftorRightY; 23 | if (position !== 'initial') { 24 | y = confineVertically(y); 25 | if (position === 'anchor') { 26 | y = Math.min(y, anchorRect.bottom - containerRect.top); 27 | y = Math.max(y, anchorRect.top - containerRect.top - menuRect.height); 28 | } 29 | } 30 | let x, leftOverflow, rightOverflow; 31 | if (computedDirection === 'left') { 32 | x = placeLeftX; 33 | if (position !== 'initial') { 34 | leftOverflow = getLeftOverflow(x); 35 | if (leftOverflow < 0) { 36 | rightOverflow = getRightOverflow(placeRightX); 37 | if (rightOverflow <= 0 || -leftOverflow > rightOverflow) { 38 | x = placeRightX; 39 | computedDirection = 'right'; 40 | } 41 | } 42 | } 43 | } else { 44 | x = placeRightX; 45 | if (position !== 'initial') { 46 | rightOverflow = getRightOverflow(x); 47 | if (rightOverflow > 0) { 48 | leftOverflow = getLeftOverflow(placeLeftX); 49 | if (leftOverflow >= 0 || -leftOverflow < rightOverflow) { 50 | x = placeLeftX; 51 | computedDirection = 'left'; 52 | } 53 | } 54 | } 55 | } 56 | if (position === 'auto') x = confineHorizontally(x); 57 | const arrowY = arrow ? placeArrowVertical.placeArrowVertical({ 58 | menuY: y, 59 | arrowRef, 60 | anchorRect, 61 | containerRect, 62 | menuRect 63 | }) : undefined; 64 | return { 65 | arrowY, 66 | x, 67 | y, 68 | computedDirection 69 | }; 70 | }; 71 | 72 | exports.placeLeftorRight = placeLeftorRight; 73 | -------------------------------------------------------------------------------- /example/src/styles/_table-contents.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:color'; 2 | @use 'var'; 3 | @use 'mixins'; 4 | 5 | #content .table-contents { 6 | white-space: nowrap; 7 | li a { 8 | display: block; 9 | border-radius: var.$border-radius-medium; 10 | padding: 0.5rem 1rem; 11 | color: var.$navbar-dark; 12 | @include mixins.transition((color, background-color), 0.15s); 13 | 14 | &:hover { 15 | text-decoration: none; 16 | background-color: var.$border-light; 17 | } 18 | } 19 | 20 | nav { 21 | @include mixins.remove-focus; 22 | } 23 | 24 | &__header { 25 | display: none; 26 | } 27 | 28 | [class^='contents-list'] { 29 | @include mixins.reset-list; 30 | li { 31 | line-height: 1.1; 32 | } 33 | } 34 | 35 | .contents-list-lv1 { 36 | overflow-x: hidden; 37 | overflow-y: auto; 38 | font-size: 1.1rem; 39 | font-weight: bold; 40 | box-sizing: border-box; 41 | padding: 0.5rem 1rem 2rem 1rem; 42 | 43 | @include mixins.scrollbar(6px); 44 | &:not(:hover) { 45 | &::-webkit-scrollbar-thumb { 46 | background-color: transparent; 47 | } 48 | &::-webkit-scrollbar-track { 49 | background-color: transparent; 50 | } 51 | } 52 | > li { 53 | margin: 0.5rem 0; 54 | } 55 | } 56 | 57 | .contents-list-lv2 { 58 | font-size: 1rem; 59 | font-weight: normal; 60 | & > li > a:has(+ .contents-list-lv3) { 61 | margin-top: 2rem; 62 | font-weight: bold; 63 | } 64 | } 65 | 66 | .contents-list-lv3 a { 67 | font-size: 0.95rem; 68 | &:not(:hover) { 69 | color: color.scale(var.$navbar-dark, $lightness: 15%); 70 | } 71 | } 72 | 73 | &--theme-dark { 74 | li a { 75 | color: var.$navbar-light; 76 | &:hover { 77 | background-color: var.$border-dark; 78 | } 79 | } 80 | .contents-list-lv3 a:not(:hover) { 81 | color: color.scale(var.$navbar-light, $lightness: -15%); 82 | } 83 | 84 | .contents-list-lv1 { 85 | @include mixins.scrollbar-dark; 86 | } 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /src/__tests__/styling.test.js: -------------------------------------------------------------------------------- 1 | import { screen, fireEvent } from '@testing-library/react'; 2 | import * as utils from './utils'; 3 | 4 | const { queryByRole } = screen; 5 | 6 | test('className and style props', () => { 7 | const menuClassName = 'my-class1 my-class2'; 8 | const itemClassName = 'my-class3 my-class4'; 9 | const menuStyle = { 10 | color: 'green', 11 | fontSize: '1.1rem' 12 | }; 13 | const itemStyle = { 14 | backgroundColor: 'yellow', 15 | fontSize: '1.2rem' 16 | }; 17 | 18 | utils.renderMenu( 19 | { menuClassName, menuStyle }, 20 | { className: itemClassName, style: itemStyle, type: 'checkbox' } 21 | ); 22 | utils.clickMenuButton(); 23 | const menu = utils.queryMenu(); 24 | expect(menu).toHaveClass(menuClassName); 25 | expect(menu).toHaveStyle(menuStyle); 26 | 27 | const menuItem = queryByRole('menuitemcheckbox', { name: 'Middle' }); 28 | expect(menuItem).toHaveClass(itemClassName); 29 | expect(menuItem).toHaveStyle(itemStyle); 30 | }); 31 | 32 | test('className as functions', () => { 33 | const menuClassName = jest.fn(); 34 | const itemClassName = jest.fn(); 35 | utils.renderMenu({ menuClassName }, { className: itemClassName }, false); 36 | utils.clickMenuButton(); 37 | expect(menuClassName).toHaveBeenLastCalledWith( 38 | expect.objectContaining({ 39 | state: 'open', 40 | dir: 'bottom' 41 | }) 42 | ); 43 | expect(itemClassName).toHaveBeenLastCalledWith( 44 | expect.objectContaining({ 45 | hover: false 46 | }) 47 | ); 48 | 49 | // For testing className memorisation 50 | fireEvent.pointerMove(queryByRole('menuitem', { name: 'First' })); 51 | fireEvent.pointerMove(queryByRole('menuitem', { name: 'Last' })); 52 | 53 | const menuItem = queryByRole('menuitem', { name: 'Middle' }); 54 | fireEvent.pointerMove(menuItem); 55 | expect(itemClassName).toHaveBeenLastCalledWith( 56 | expect.objectContaining({ 57 | hover: true 58 | }) 59 | ); 60 | 61 | expect(menuClassName).toHaveBeenCalledTimes(1); 62 | expect(itemClassName).toHaveBeenCalledTimes(2); 63 | }); 64 | -------------------------------------------------------------------------------- /src/hooks/useItemState.js: -------------------------------------------------------------------------------- 1 | import { useContext, useEffect } from 'react'; 2 | import { SettingsContext, MenuListItemContext, HoverActionTypes } from '../utils'; 3 | import { useItemEffect } from './useItemEffect'; 4 | import { useMouseOver } from './useMouseOver'; 5 | 6 | // This hook includes some common stateful logic in MenuItem and FocusableItem 7 | export const useItemState = (itemRef, focusRef, isHovering, isDisabled) => { 8 | const [mouseOver, mouseOverStart, mouseOverEnd] = useMouseOver(isHovering); 9 | const { submenuCloseDelay } = useContext(SettingsContext); 10 | const { isParentOpen, submenuCtx, dispatch, updateItems } = useContext(MenuListItemContext); 11 | 12 | const setHover = () => { 13 | !isHovering && !isDisabled && dispatch(HoverActionTypes.SET, itemRef.current); 14 | }; 15 | 16 | const unsetHover = () => { 17 | !isDisabled && dispatch(HoverActionTypes.UNSET, itemRef.current); 18 | }; 19 | 20 | const onBlur = (e) => { 21 | // Focus has moved out of the entire item 22 | // It handles situation such as clicking on a sibling disabled menu item 23 | if (isHovering && !e.currentTarget.contains(e.relatedTarget)) unsetHover(); 24 | }; 25 | 26 | const onPointerMove = (e) => { 27 | if (!isDisabled) { 28 | e.stopPropagation(); 29 | mouseOverStart(); 30 | submenuCtx.on(submenuCloseDelay, setHover, setHover); 31 | } 32 | }; 33 | 34 | const onPointerLeave = (_, keepHover) => { 35 | mouseOverEnd(); 36 | submenuCtx.off(); 37 | !keepHover && unsetHover(); 38 | }; 39 | 40 | useItemEffect(isDisabled, itemRef, updateItems); 41 | 42 | useEffect(() => { 43 | // Don't set focus when parent menu is closed, otherwise focus will be lost 44 | // and onBlur event will be fired with relatedTarget setting as null. 45 | if (isHovering && isParentOpen) { 46 | focusRef.current && focusRef.current.focus(); 47 | } 48 | }, [focusRef, isHovering, isParentOpen]); 49 | 50 | return { 51 | mouseOver, 52 | setHover, 53 | onBlur, 54 | onPointerMove, 55 | onPointerLeave 56 | }; 57 | }; 58 | -------------------------------------------------------------------------------- /dist/cjs/components/FocusableItem.cjs: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var react = require('react'); 4 | var jsxRuntime = require('react/jsx-runtime'); 5 | var useItemState = require('../hooks/useItemState.cjs'); 6 | var useBEM = require('../hooks/useBEM.cjs'); 7 | var useCombinedRef = require('../hooks/useCombinedRef.cjs'); 8 | var withHovering = require('../utils/withHovering.cjs'); 9 | var constants = require('../utils/constants.cjs'); 10 | var utils = require('../utils/utils.cjs'); 11 | 12 | const FocusableItem = /*#__PURE__*/withHovering.withHovering('FocusableItem', function FocusableItem({ 13 | className, 14 | disabled, 15 | children, 16 | isHovering, 17 | itemRef, 18 | externalRef, 19 | ...restProps 20 | }) { 21 | const isDisabled = !!disabled; 22 | const ref = react.useRef(null); 23 | const { 24 | mouseOver, 25 | setHover, 26 | onPointerLeave, 27 | ...restStateProps 28 | } = useItemState.useItemState(itemRef, ref, isHovering, isDisabled); 29 | const { 30 | handleClose 31 | } = react.useContext(constants.EventHandlersContext); 32 | const modifiers = react.useMemo(() => ({ 33 | disabled: isDisabled, 34 | hover: mouseOver || isHovering, 35 | focusable: true 36 | }), [isDisabled, isHovering, mouseOver]); 37 | const renderChildren = react.useMemo(() => utils.safeCall(children, { 38 | ...modifiers, 39 | ref, 40 | closeMenu: handleClose 41 | }), [children, modifiers, handleClose]); 42 | const mergedProps = utils.mergeProps({ 43 | ...restStateProps, 44 | onPointerLeave: e => onPointerLeave(e, true), 45 | onFocus: setHover 46 | }, restProps); 47 | return /*#__PURE__*/jsxRuntime.jsx("li", { 48 | role: constants.roleMenuitem, 49 | ...utils.commonProps(isDisabled), 50 | ...mergedProps, 51 | ref: useCombinedRef.useCombinedRef(externalRef, itemRef), 52 | className: useBEM.useBEM({ 53 | block: constants.menuClass, 54 | element: constants.menuItemClass, 55 | modifiers, 56 | className 57 | }), 58 | children: renderChildren 59 | }); 60 | }); 61 | 62 | exports.FocusableItem = FocusableItem; 63 | -------------------------------------------------------------------------------- /dist/cjs/positionUtils/placeToporBottom.cjs: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var placeArrowHorizontal = require('./placeArrowHorizontal.cjs'); 4 | 5 | const placeToporBottom = ({ 6 | anchorRect, 7 | containerRect, 8 | menuRect, 9 | placeToporBottomX, 10 | placeTopY, 11 | placeBottomY, 12 | getTopOverflow, 13 | getBottomOverflow, 14 | confineHorizontally, 15 | confineVertically, 16 | arrowRef, 17 | arrow, 18 | direction, 19 | position 20 | }) => { 21 | let computedDirection = direction === 'top' ? 'top' : 'bottom'; 22 | let x = placeToporBottomX; 23 | if (position !== 'initial') { 24 | x = confineHorizontally(x); 25 | if (position === 'anchor') { 26 | x = Math.min(x, anchorRect.right - containerRect.left); 27 | x = Math.max(x, anchorRect.left - containerRect.left - menuRect.width); 28 | } 29 | } 30 | let y, topOverflow, bottomOverflow; 31 | if (computedDirection === 'top') { 32 | y = placeTopY; 33 | if (position !== 'initial') { 34 | topOverflow = getTopOverflow(y); 35 | if (topOverflow < 0) { 36 | bottomOverflow = getBottomOverflow(placeBottomY); 37 | if (bottomOverflow <= 0 || -topOverflow > bottomOverflow) { 38 | y = placeBottomY; 39 | computedDirection = 'bottom'; 40 | } 41 | } 42 | } 43 | } else { 44 | y = placeBottomY; 45 | if (position !== 'initial') { 46 | bottomOverflow = getBottomOverflow(y); 47 | if (bottomOverflow > 0) { 48 | topOverflow = getTopOverflow(placeTopY); 49 | if (topOverflow >= 0 || -topOverflow < bottomOverflow) { 50 | y = placeTopY; 51 | computedDirection = 'top'; 52 | } 53 | } 54 | } 55 | } 56 | if (position === 'auto') y = confineVertically(y); 57 | const arrowX = arrow ? placeArrowHorizontal.placeArrowHorizontal({ 58 | menuX: x, 59 | arrowRef, 60 | anchorRect, 61 | containerRect, 62 | menuRect 63 | }) : undefined; 64 | return { 65 | arrowX, 66 | x, 67 | y, 68 | computedDirection 69 | }; 70 | }; 71 | 72 | exports.placeToporBottom = placeToporBottom; 73 | -------------------------------------------------------------------------------- /example/src/components/TableContents.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect, useRef } from 'react'; 2 | import { useSnapshot } from 'reactish-state'; 3 | import { bem } from '../utils'; 4 | import { isTocOpenState, useDomInfo, useTheme } from '../store'; 5 | import { TableContentsList } from './TableContentsList'; 6 | import { Logo } from './Logo'; 7 | import { ThemeSwitch } from './ThemeSwitch'; 8 | 9 | const blockName = 'table-contents'; 10 | 11 | export const TableContents = React.memo(function TableContents({ children }) { 12 | const ref = useRef(null); 13 | const headerRef = useRef(null); 14 | const domInfo = useDomInfo(); 15 | const { theme } = useTheme(); 16 | const isTocOpen = useSnapshot(isTocOpenState); 17 | const [maxHeight, setMaxHeight] = useState(); 18 | const [top, setTop] = useState(); 19 | 20 | useEffect(() => { 21 | if (isTocOpen) ref.current.focus(); 22 | }, [isTocOpen]); 23 | 24 | useEffect(() => { 25 | if (!domInfo.navbarHeight) return; 26 | const offset = isTocOpen ? headerRef.current.offsetHeight : domInfo.navbarHeight; 27 | setMaxHeight(domInfo.vHeight - offset); 28 | 29 | setTop( 30 | getComputedStyle(document.querySelector('.table-contents')).getPropertyValue('position') === 31 | 'sticky' 32 | ? domInfo.navbarHeight 33 | : undefined 34 | ); 35 | }, [domInfo, isTocOpen]); 36 | 37 | const handleClose = (e) => { 38 | if (e.currentTarget === e.target) isTocOpenState.set(false); 39 | }; 40 | 41 | return ( 42 | 57 | ); 58 | }); 59 | -------------------------------------------------------------------------------- /docs/migration/v4.md: -------------------------------------------------------------------------------- 1 | # Migrating to v4 2 | 3 | React-Menu v4.0.0 has reduced its package bundle size by around 10%. It's also shipped with a few API optimisations which introduced BREAKING changes as below: 4 | 5 | ## The new `gap` and `shift` props 6 | 7 | These two props on menu components have replaced the old `offsetX` and `offsetY` props. When adjusting a menu's position relating to its anchor element, the new props will take into account the menu's placing direction. 8 | 9 | Let's say you want to create a 10-pixel gap between a menu and its anchor, you had to apply either `offsetX` or `offsetY` based on directions of the menu: 10 | 11 | ```jsx 12 | 16 | ``` 17 | 18 | Using the new props, you can simply specify the gap value: 19 | 20 | ```jsx 21 | 22 | ``` 23 | 24 | The same benefit applies to the `shift` prop. 25 | 26 | ## The new `arrowProps` prop 27 | 28 | This new prop on menu components have replaced the old `arrowClassName` and `arrowStyle` props. `arrowProps` can be used to pass any attributes or events onto the arrow element of a menu. 29 | 30 | If you have used the old props to apply styling to arrow elements as below: 31 | 32 | ```jsx 33 | 37 | ``` 38 | 39 | Using the new `arrowProps`, the updated code would be: 40 | 41 | ```jsx 42 | 48 | ``` 49 | 50 | ## Dropping ES5 support 51 | 52 | To align with most libraries within the React ecosystem, the package distribution files have been transpiled to target ES6+. If you still need to support older environments such as IE 11, you need to config your bundling process to transpile this package in node_modules into ES5 code. Here is [an example](https://github.com/babel/babel-loader#some-files-in-my-node_modules-are-not-transpiled-for-ie-11) for webpack/babel configuration. 53 | -------------------------------------------------------------------------------- /dist/esm/positionUtils/getPositionHelpers.mjs: -------------------------------------------------------------------------------- 1 | import { getNormalizedClientRect } from './getNormalizedClientRect.mjs'; 2 | import { parsePadding } from '../utils/utils.mjs'; 3 | 4 | const getPositionHelpers = (containerElt, menuElt, menuScroll, boundingBoxPadding) => { 5 | const menuRect = getNormalizedClientRect(menuElt); 6 | const containerRect = containerElt.getBoundingClientRect(); 7 | const boundingRect = menuScroll === window ? { 8 | left: 0, 9 | top: 0, 10 | right: document.documentElement.clientWidth, 11 | bottom: window.innerHeight 12 | } : menuScroll.getBoundingClientRect(); 13 | const padding = parsePadding(boundingBoxPadding); 14 | const getLeftOverflow = x => x + containerRect.left - boundingRect.left - padding.left; 15 | const getRightOverflow = x => x + containerRect.left + menuRect.width - boundingRect.right + padding.right; 16 | const getTopOverflow = y => y + containerRect.top - boundingRect.top - padding.top; 17 | const getBottomOverflow = y => y + containerRect.top + menuRect.height - boundingRect.bottom + padding.bottom; 18 | const confineHorizontally = x => { 19 | let leftOverflow = getLeftOverflow(x); 20 | if (leftOverflow < 0) { 21 | x -= leftOverflow; 22 | } else { 23 | const rightOverflow = getRightOverflow(x); 24 | if (rightOverflow > 0) { 25 | x -= rightOverflow; 26 | leftOverflow = getLeftOverflow(x); 27 | if (leftOverflow < 0) x -= leftOverflow; 28 | } 29 | } 30 | return x; 31 | }; 32 | const confineVertically = y => { 33 | let topOverflow = getTopOverflow(y); 34 | if (topOverflow < 0) { 35 | y -= topOverflow; 36 | } else { 37 | const bottomOverflow = getBottomOverflow(y); 38 | if (bottomOverflow > 0) { 39 | y -= bottomOverflow; 40 | topOverflow = getTopOverflow(y); 41 | if (topOverflow < 0) y -= topOverflow; 42 | } 43 | } 44 | return y; 45 | }; 46 | return { 47 | menuRect, 48 | containerRect, 49 | getLeftOverflow, 50 | getRightOverflow, 51 | getTopOverflow, 52 | getBottomOverflow, 53 | confineHorizontally, 54 | confineVertically 55 | }; 56 | }; 57 | 58 | export { getPositionHelpers }; 59 | -------------------------------------------------------------------------------- /dist/cjs/positionUtils/getPositionHelpers.cjs: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var getNormalizedClientRect = require('./getNormalizedClientRect.cjs'); 4 | var utils = require('../utils/utils.cjs'); 5 | 6 | const getPositionHelpers = (containerElt, menuElt, menuScroll, boundingBoxPadding) => { 7 | const menuRect = getNormalizedClientRect.getNormalizedClientRect(menuElt); 8 | const containerRect = containerElt.getBoundingClientRect(); 9 | const boundingRect = menuScroll === window ? { 10 | left: 0, 11 | top: 0, 12 | right: document.documentElement.clientWidth, 13 | bottom: window.innerHeight 14 | } : menuScroll.getBoundingClientRect(); 15 | const padding = utils.parsePadding(boundingBoxPadding); 16 | const getLeftOverflow = x => x + containerRect.left - boundingRect.left - padding.left; 17 | const getRightOverflow = x => x + containerRect.left + menuRect.width - boundingRect.right + padding.right; 18 | const getTopOverflow = y => y + containerRect.top - boundingRect.top - padding.top; 19 | const getBottomOverflow = y => y + containerRect.top + menuRect.height - boundingRect.bottom + padding.bottom; 20 | const confineHorizontally = x => { 21 | let leftOverflow = getLeftOverflow(x); 22 | if (leftOverflow < 0) { 23 | x -= leftOverflow; 24 | } else { 25 | const rightOverflow = getRightOverflow(x); 26 | if (rightOverflow > 0) { 27 | x -= rightOverflow; 28 | leftOverflow = getLeftOverflow(x); 29 | if (leftOverflow < 0) x -= leftOverflow; 30 | } 31 | } 32 | return x; 33 | }; 34 | const confineVertically = y => { 35 | let topOverflow = getTopOverflow(y); 36 | if (topOverflow < 0) { 37 | y -= topOverflow; 38 | } else { 39 | const bottomOverflow = getBottomOverflow(y); 40 | if (bottomOverflow > 0) { 41 | y -= bottomOverflow; 42 | topOverflow = getTopOverflow(y); 43 | if (topOverflow < 0) y -= topOverflow; 44 | } 45 | } 46 | return y; 47 | }; 48 | return { 49 | menuRect, 50 | containerRect, 51 | getLeftOverflow, 52 | getRightOverflow, 53 | getTopOverflow, 54 | getBottomOverflow, 55 | confineHorizontally, 56 | confineVertically 57 | }; 58 | }; 59 | 60 | exports.getPositionHelpers = getPositionHelpers; 61 | -------------------------------------------------------------------------------- /dist/esm/utils/constants.mjs: -------------------------------------------------------------------------------- 1 | import { createContext } from 'react'; 2 | 3 | const menuContainerClass = 'szh-menu-container'; 4 | const menuClass = 'szh-menu'; 5 | const menuButtonClass = 'szh-menu-button'; 6 | const menuArrowClass = 'arrow'; 7 | const menuItemClass = 'item'; 8 | const menuDividerClass = 'divider'; 9 | const menuHeaderClass = 'header'; 10 | const menuGroupClass = 'group'; 11 | const subMenuClass = 'submenu'; 12 | const radioGroupClass = 'radio-group'; 13 | const HoverItemContext = /*#__PURE__*/createContext(); 14 | const MenuListItemContext = /*#__PURE__*/createContext({}); 15 | const MenuListContext = /*#__PURE__*/createContext({}); 16 | const EventHandlersContext = /*#__PURE__*/createContext({}); 17 | const RadioGroupContext = /*#__PURE__*/createContext({}); 18 | const SettingsContext = /*#__PURE__*/createContext({}); 19 | const Keys = /*#__PURE__*/Object.freeze({ 20 | ENTER: 'Enter', 21 | ESC: 'Escape', 22 | SPACE: ' ', 23 | HOME: 'Home', 24 | END: 'End', 25 | LEFT: 'ArrowLeft', 26 | RIGHT: 'ArrowRight', 27 | UP: 'ArrowUp', 28 | DOWN: 'ArrowDown' 29 | }); 30 | const HoverActionTypes = /*#__PURE__*/Object.freeze({ 31 | RESET: 0, 32 | SET: 1, 33 | UNSET: 2, 34 | INCREASE: 3, 35 | DECREASE: 4, 36 | FIRST: 5, 37 | LAST: 6, 38 | SET_INDEX: 7 39 | }); 40 | const CloseReason = /*#__PURE__*/Object.freeze({ 41 | CLICK: 'click', 42 | CANCEL: 'cancel', 43 | BLUR: 'blur', 44 | SCROLL: 'scroll' 45 | }); 46 | const FocusPositions = /*#__PURE__*/Object.freeze({ 47 | FIRST: 'first', 48 | LAST: 'last' 49 | }); 50 | const MenuStateMap = /*#__PURE__*/Object.freeze({ 51 | entering: 'opening', 52 | entered: 'open', 53 | exiting: 'closing', 54 | exited: 'closed' 55 | }); 56 | const positionAbsolute = 'absolute'; 57 | const roleNone = 'none'; 58 | const roleMenuitem = 'menuitem'; 59 | const noScrollFocus = { 60 | preventScroll: true 61 | }; 62 | 63 | export { CloseReason, EventHandlersContext, FocusPositions, HoverActionTypes, HoverItemContext, Keys, MenuListContext, MenuListItemContext, MenuStateMap, RadioGroupContext, SettingsContext, menuArrowClass, menuButtonClass, menuClass, menuContainerClass, menuDividerClass, menuGroupClass, menuHeaderClass, menuItemClass, noScrollFocus, positionAbsolute, radioGroupClass, roleMenuitem, roleNone, subMenuClass }; 64 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React-Menu 2 | 3 | > An accessible, keyboard-friendly React menu library 4 | 5 | **[Live examples and docs](https://szhsin.github.io/react-menu/)** 6 | 7 | [](https://www.npmjs.com/package/@szhsin/react-menu) 8 | [](https://www.npmjs.com/package/@szhsin/react-menu) 9 | [](https://bundlephobia.com/package/@szhsin/react-menu) 10 | [](https://snyk.io/test/github/szhsin/react-menu) 11 | 12 | ## Features 13 | 14 | - [Lightweight](https://bundlephobia.com/package/@szhsin/react-menu), unstyled React menu components 15 | - Unlimited submenu nesting 16 | - Supports dropdown, hover, and context menus 17 | - Radio and checkbox menu items 18 | - Flexible positioning options 19 | - Full keyboard interaction support 20 | - Compatible with React 18+ concurrent rendering 21 | - Supports server-side rendering 22 | - Implements [WAI-ARIA menu](https://www.w3.org/WAI/ARIA/apg/patterns/menu/) pattern 23 | 24 | ## Install 25 | 26 | with npm 27 | 28 | ```bash 29 | npm install @szhsin/react-menu 30 | ``` 31 | 32 | or with Yarn 33 | 34 | ```bash 35 | yarn add @szhsin/react-menu 36 | ``` 37 | 38 | ## Usage 39 | 40 | ```jsx 41 | import { Menu, MenuItem, MenuButton, SubMenu } from '@szhsin/react-menu'; 42 | 43 | export default function App() { 44 | return ( 45 | 55 | ); 56 | } 57 | ``` 58 | 59 | **[Edit on CodeSandbox](https://codesandbox.io/s/react-menu-starter-3ez3c)**
- 65 | 66 | {children} 67 | 68 | 69 | ); 70 | } 71 | -------------------------------------------------------------------------------- /src/positionUtils/placeLeftorRight.js: -------------------------------------------------------------------------------- 1 | import { placeArrowVertical } from './placeArrowVertical'; 2 | 3 | export const placeLeftorRight = ({ 4 | anchorRect, 5 | containerRect, 6 | menuRect, 7 | placeLeftorRightY, 8 | placeLeftX, 9 | placeRightX, 10 | getLeftOverflow, 11 | getRightOverflow, 12 | confineHorizontally, 13 | confineVertically, 14 | arrowRef, 15 | arrow, 16 | direction, 17 | position 18 | }) => { 19 | let computedDirection = direction; 20 | let y = placeLeftorRightY; 21 | if (position !== 'initial') { 22 | y = confineVertically(y); 23 | if (position === 'anchor') { 24 | // restrict menu to the edge of anchor element 25 | y = Math.min(y, anchorRect.bottom - containerRect.top); 26 | y = Math.max(y, anchorRect.top - containerRect.top - menuRect.height); 27 | } 28 | } 29 | 30 | let x, leftOverflow, rightOverflow; 31 | if (computedDirection === 'left') { 32 | x = placeLeftX; 33 | 34 | if (position !== 'initial') { 35 | // if menu overflows to the left, 36 | // try to reposition it to the right of the anchor. 37 | leftOverflow = getLeftOverflow(x); 38 | if (leftOverflow < 0) { 39 | // if menu overflows to the right after repositioning, 40 | // choose a side which has less overflow 41 | rightOverflow = getRightOverflow(placeRightX); 42 | if (rightOverflow <= 0 || -leftOverflow > rightOverflow) { 43 | x = placeRightX; 44 | computedDirection = 'right'; 45 | } 46 | } 47 | } 48 | } else { 49 | // Opposite logic to the 'left' direction above 50 | x = placeRightX; 51 | 52 | if (position !== 'initial') { 53 | rightOverflow = getRightOverflow(x); 54 | if (rightOverflow > 0) { 55 | leftOverflow = getLeftOverflow(placeLeftX); 56 | if (leftOverflow >= 0 || -leftOverflow < rightOverflow) { 57 | x = placeLeftX; 58 | computedDirection = 'left'; 59 | } 60 | } 61 | } 62 | } 63 | 64 | if (position === 'auto') x = confineHorizontally(x); 65 | const arrowY = arrow 66 | ? placeArrowVertical({ 67 | menuY: y, 68 | arrowRef, 69 | anchorRect, 70 | containerRect, 71 | menuRect 72 | }) 73 | : undefined; 74 | return { arrowY, x, y, computedDirection }; 75 | }; 76 | -------------------------------------------------------------------------------- /src/positionUtils/placeToporBottom.js: -------------------------------------------------------------------------------- 1 | import { placeArrowHorizontal } from './placeArrowHorizontal'; 2 | 3 | export const placeToporBottom = ({ 4 | anchorRect, 5 | containerRect, 6 | menuRect, 7 | placeToporBottomX, 8 | placeTopY, 9 | placeBottomY, 10 | getTopOverflow, 11 | getBottomOverflow, 12 | confineHorizontally, 13 | confineVertically, 14 | arrowRef, 15 | arrow, 16 | direction, 17 | position 18 | }) => { 19 | // make sure invalid direction is treated as 'bottom' 20 | let computedDirection = direction === 'top' ? 'top' : 'bottom'; 21 | let x = placeToporBottomX; 22 | if (position !== 'initial') { 23 | x = confineHorizontally(x); 24 | if (position === 'anchor') { 25 | // restrict menu to the edge of anchor element 26 | x = Math.min(x, anchorRect.right - containerRect.left); 27 | x = Math.max(x, anchorRect.left - containerRect.left - menuRect.width); 28 | } 29 | } 30 | 31 | let y, topOverflow, bottomOverflow; 32 | if (computedDirection === 'top') { 33 | y = placeTopY; 34 | 35 | if (position !== 'initial') { 36 | // if menu overflows to the top, 37 | // try to reposition it to the bottom of the anchor. 38 | topOverflow = getTopOverflow(y); 39 | if (topOverflow < 0) { 40 | // if menu overflows to the bottom after repositioning, 41 | // choose a side which has less overflow 42 | bottomOverflow = getBottomOverflow(placeBottomY); 43 | if (bottomOverflow <= 0 || -topOverflow > bottomOverflow) { 44 | y = placeBottomY; 45 | computedDirection = 'bottom'; 46 | } 47 | } 48 | } 49 | } else { 50 | // Opposite logic to the 'top' direction above 51 | y = placeBottomY; 52 | 53 | if (position !== 'initial') { 54 | bottomOverflow = getBottomOverflow(y); 55 | if (bottomOverflow > 0) { 56 | topOverflow = getTopOverflow(placeTopY); 57 | if (topOverflow >= 0 || -topOverflow < bottomOverflow) { 58 | y = placeTopY; 59 | computedDirection = 'top'; 60 | } 61 | } 62 | } 63 | } 64 | 65 | if (position === 'auto') y = confineVertically(y); 66 | const arrowX = arrow 67 | ? placeArrowHorizontal({ 68 | menuX: x, 69 | arrowRef, 70 | anchorRect, 71 | containerRect, 72 | menuRect 73 | }) 74 | : undefined; 75 | return { arrowX, x, y, computedDirection }; 76 | }; 77 | -------------------------------------------------------------------------------- /dist/esm/utils/utils.mjs: -------------------------------------------------------------------------------- 1 | import { unstable_batchedUpdates } from 'react-dom'; 2 | 3 | const isMenuOpen = state => !!state && state[0] === 'o'; 4 | const batchedUpdates = unstable_batchedUpdates; 5 | const getTransition = (transition, name) => transition === true || !!(transition && transition[name]); 6 | const safeCall = (fn, arg) => typeof fn === 'function' ? fn(arg) : fn; 7 | const internalKey = '_szhsinMenu'; 8 | const getName = component => component[internalKey]; 9 | const defineName = (name, component) => Object.defineProperty(component, internalKey, { 10 | value: name 11 | }); 12 | const mergeProps = (target, source) => { 13 | source && Object.keys(source).forEach(key => { 14 | const targetProp = target[key]; 15 | const sourceProp = source[key]; 16 | if (typeof sourceProp === 'function' && targetProp) { 17 | target[key] = (...arg) => { 18 | sourceProp(...arg); 19 | targetProp(...arg); 20 | }; 21 | } else { 22 | target[key] = sourceProp; 23 | } 24 | }); 25 | return target; 26 | }; 27 | const parsePadding = paddingStr => { 28 | if (typeof paddingStr !== 'string') return { 29 | top: 0, 30 | right: 0, 31 | bottom: 0, 32 | left: 0 33 | }; 34 | const padding = paddingStr.trim().split(/\s+/, 4).map(parseFloat); 35 | const top = !isNaN(padding[0]) ? padding[0] : 0; 36 | const right = !isNaN(padding[1]) ? padding[1] : top; 37 | return { 38 | top, 39 | right, 40 | bottom: !isNaN(padding[2]) ? padding[2] : top, 41 | left: !isNaN(padding[3]) ? padding[3] : right 42 | }; 43 | }; 44 | const getScrollAncestor = node => { 45 | while (node) { 46 | node = node.parentNode; 47 | if (!node || node === document.body || !node.parentNode) return; 48 | const { 49 | overflow, 50 | overflowX, 51 | overflowY 52 | } = getComputedStyle(node); 53 | if (/auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX)) return node; 54 | } 55 | }; 56 | function commonProps(isDisabled, isHovering) { 57 | return { 58 | 'aria-disabled': isDisabled || undefined, 59 | tabIndex: isHovering ? 0 : -1 60 | }; 61 | } 62 | function indexOfNode(nodeList, node) { 63 | for (let i = 0; i < nodeList.length; i++) { 64 | if (nodeList[i] === node) return i; 65 | } 66 | return -1; 67 | } 68 | 69 | export { batchedUpdates, commonProps, defineName, getName, getScrollAncestor, getTransition, indexOfNode, isMenuOpen, mergeProps, parsePadding, safeCall }; 70 | -------------------------------------------------------------------------------- /src/positionUtils/positionMenu.js: -------------------------------------------------------------------------------- 1 | import { placeLeftorRight } from './placeLeftorRight'; 2 | import { placeToporBottom } from './placeToporBottom'; 3 | 4 | export const positionMenu = ({ 5 | arrow, 6 | align, 7 | direction, 8 | gap, 9 | shift, 10 | position, 11 | anchorRect, 12 | arrowRef, 13 | positionHelpers 14 | }) => { 15 | const { menuRect, containerRect } = positionHelpers; 16 | 17 | const isHorizontal = direction === 'left' || direction === 'right'; 18 | let horizontalOffset = isHorizontal ? gap : shift; 19 | let verticalOffset = isHorizontal ? shift : gap; 20 | if (arrow) { 21 | const arrowElt = arrowRef.current; 22 | if (isHorizontal) { 23 | horizontalOffset += arrowElt.offsetWidth; 24 | } else { 25 | verticalOffset += arrowElt.offsetHeight; 26 | } 27 | } 28 | 29 | const placeLeftX = anchorRect.left - containerRect.left - menuRect.width - horizontalOffset; 30 | const placeRightX = anchorRect.right - containerRect.left + horizontalOffset; 31 | const placeTopY = anchorRect.top - containerRect.top - menuRect.height - verticalOffset; 32 | const placeBottomY = anchorRect.bottom - containerRect.top + verticalOffset; 33 | 34 | let placeToporBottomX, placeLeftorRightY; 35 | if (align === 'end') { 36 | placeToporBottomX = anchorRect.right - containerRect.left - menuRect.width; 37 | placeLeftorRightY = anchorRect.bottom - containerRect.top - menuRect.height; 38 | } else if (align === 'center') { 39 | placeToporBottomX = 40 | anchorRect.left - containerRect.left - (menuRect.width - anchorRect.width) / 2; 41 | placeLeftorRightY = 42 | anchorRect.top - containerRect.top - (menuRect.height - anchorRect.height) / 2; 43 | } else { 44 | placeToporBottomX = anchorRect.left - containerRect.left; 45 | placeLeftorRightY = anchorRect.top - containerRect.top; 46 | } 47 | placeToporBottomX += horizontalOffset; 48 | placeLeftorRightY += verticalOffset; 49 | 50 | const options = { 51 | ...positionHelpers, 52 | anchorRect, 53 | placeLeftX, 54 | placeRightX, 55 | placeLeftorRightY, 56 | placeTopY, 57 | placeBottomY, 58 | placeToporBottomX, 59 | arrowRef, 60 | arrow, 61 | direction, 62 | position 63 | }; 64 | 65 | switch (direction) { 66 | case 'left': 67 | case 'right': 68 | return placeLeftorRight(options); 69 | 70 | case 'top': 71 | case 'bottom': 72 | default: 73 | return placeToporBottom(options); 74 | } 75 | }; 76 | -------------------------------------------------------------------------------- /dist/esm/positionUtils/positionMenu.mjs: -------------------------------------------------------------------------------- 1 | import { placeLeftorRight } from './placeLeftorRight.mjs'; 2 | import { placeToporBottom } from './placeToporBottom.mjs'; 3 | 4 | const positionMenu = ({ 5 | arrow, 6 | align, 7 | direction, 8 | gap, 9 | shift, 10 | position, 11 | anchorRect, 12 | arrowRef, 13 | positionHelpers 14 | }) => { 15 | const { 16 | menuRect, 17 | containerRect 18 | } = positionHelpers; 19 | const isHorizontal = direction === 'left' || direction === 'right'; 20 | let horizontalOffset = isHorizontal ? gap : shift; 21 | let verticalOffset = isHorizontal ? shift : gap; 22 | if (arrow) { 23 | const arrowElt = arrowRef.current; 24 | if (isHorizontal) { 25 | horizontalOffset += arrowElt.offsetWidth; 26 | } else { 27 | verticalOffset += arrowElt.offsetHeight; 28 | } 29 | } 30 | const placeLeftX = anchorRect.left - containerRect.left - menuRect.width - horizontalOffset; 31 | const placeRightX = anchorRect.right - containerRect.left + horizontalOffset; 32 | const placeTopY = anchorRect.top - containerRect.top - menuRect.height - verticalOffset; 33 | const placeBottomY = anchorRect.bottom - containerRect.top + verticalOffset; 34 | let placeToporBottomX, placeLeftorRightY; 35 | if (align === 'end') { 36 | placeToporBottomX = anchorRect.right - containerRect.left - menuRect.width; 37 | placeLeftorRightY = anchorRect.bottom - containerRect.top - menuRect.height; 38 | } else if (align === 'center') { 39 | placeToporBottomX = anchorRect.left - containerRect.left - (menuRect.width - anchorRect.width) / 2; 40 | placeLeftorRightY = anchorRect.top - containerRect.top - (menuRect.height - anchorRect.height) / 2; 41 | } else { 42 | placeToporBottomX = anchorRect.left - containerRect.left; 43 | placeLeftorRightY = anchorRect.top - containerRect.top; 44 | } 45 | placeToporBottomX += horizontalOffset; 46 | placeLeftorRightY += verticalOffset; 47 | const options = { 48 | ...positionHelpers, 49 | anchorRect, 50 | placeLeftX, 51 | placeRightX, 52 | placeLeftorRightY, 53 | placeTopY, 54 | placeBottomY, 55 | placeToporBottomX, 56 | arrowRef, 57 | arrow, 58 | direction, 59 | position 60 | }; 61 | switch (direction) { 62 | case 'left': 63 | case 'right': 64 | return placeLeftorRight(options); 65 | case 'top': 66 | case 'bottom': 67 | default: 68 | return placeToporBottom(options); 69 | } 70 | }; 71 | 72 | export { positionMenu }; 73 | -------------------------------------------------------------------------------- /src/utils/utils.js: -------------------------------------------------------------------------------- 1 | import { unstable_batchedUpdates } from 'react-dom'; 2 | 3 | export const isMenuOpen = (state) => !!state && state[0] === 'o'; 4 | export const batchedUpdates = unstable_batchedUpdates; 5 | export const floatEqual = (a, b, diff = 0.0001) => Math.abs(a - b) < diff; 6 | export const getTransition = (transition, name) => 7 | transition === true || !!(transition && transition[name]); 8 | export const safeCall = (fn, arg) => (typeof fn === 'function' ? fn(arg) : fn); 9 | 10 | const internalKey = '_szhsinMenu'; 11 | export const getName = (component) => component[internalKey]; 12 | export const defineName = (name, component) => 13 | Object.defineProperty(component, internalKey, { value: name }); 14 | 15 | export const mergeProps = (target, source) => { 16 | source && 17 | Object.keys(source).forEach((key) => { 18 | const targetProp = target[key]; 19 | const sourceProp = source[key]; 20 | if (typeof sourceProp === 'function' && targetProp) { 21 | target[key] = (...arg) => { 22 | sourceProp(...arg); 23 | targetProp(...arg); 24 | }; 25 | } else { 26 | target[key] = sourceProp; 27 | } 28 | }); 29 | 30 | return target; 31 | }; 32 | 33 | export const parsePadding = (paddingStr) => { 34 | if (typeof paddingStr !== 'string') return { top: 0, right: 0, bottom: 0, left: 0 }; 35 | 36 | const padding = paddingStr.trim().split(/\s+/, 4).map(parseFloat); 37 | const top = !isNaN(padding[0]) ? padding[0] : 0; 38 | const right = !isNaN(padding[1]) ? padding[1] : top; 39 | return { 40 | top, 41 | right, 42 | bottom: !isNaN(padding[2]) ? padding[2] : top, 43 | left: !isNaN(padding[3]) ? padding[3] : right 44 | }; 45 | }; 46 | 47 | // Adapted from https://github.com/popperjs/popper-core/tree/v2.9.1/src/dom-utils 48 | export const getScrollAncestor = (node) => { 49 | while (node) { 50 | node = node.parentNode; 51 | if (!node || node === document.body || !node.parentNode) return; 52 | const { overflow, overflowX, overflowY } = getComputedStyle(node); 53 | if (/auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX)) return node; 54 | } 55 | }; 56 | 57 | export function commonProps(isDisabled, isHovering) { 58 | return { 59 | 'aria-disabled': isDisabled || undefined, 60 | tabIndex: isHovering ? 0 : -1 61 | }; 62 | } 63 | 64 | export function indexOfNode(nodeList, node) { 65 | for (let i = 0; i < nodeList.length; i++) { 66 | if (nodeList[i] === node) return i; 67 | } 68 | return -1; 69 | } 70 | -------------------------------------------------------------------------------- /dist/cjs/positionUtils/positionMenu.cjs: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var placeLeftorRight = require('./placeLeftorRight.cjs'); 4 | var placeToporBottom = require('./placeToporBottom.cjs'); 5 | 6 | const positionMenu = ({ 7 | arrow, 8 | align, 9 | direction, 10 | gap, 11 | shift, 12 | position, 13 | anchorRect, 14 | arrowRef, 15 | positionHelpers 16 | }) => { 17 | const { 18 | menuRect, 19 | containerRect 20 | } = positionHelpers; 21 | const isHorizontal = direction === 'left' || direction === 'right'; 22 | let horizontalOffset = isHorizontal ? gap : shift; 23 | let verticalOffset = isHorizontal ? shift : gap; 24 | if (arrow) { 25 | const arrowElt = arrowRef.current; 26 | if (isHorizontal) { 27 | horizontalOffset += arrowElt.offsetWidth; 28 | } else { 29 | verticalOffset += arrowElt.offsetHeight; 30 | } 31 | } 32 | const placeLeftX = anchorRect.left - containerRect.left - menuRect.width - horizontalOffset; 33 | const placeRightX = anchorRect.right - containerRect.left + horizontalOffset; 34 | const placeTopY = anchorRect.top - containerRect.top - menuRect.height - verticalOffset; 35 | const placeBottomY = anchorRect.bottom - containerRect.top + verticalOffset; 36 | let placeToporBottomX, placeLeftorRightY; 37 | if (align === 'end') { 38 | placeToporBottomX = anchorRect.right - containerRect.left - menuRect.width; 39 | placeLeftorRightY = anchorRect.bottom - containerRect.top - menuRect.height; 40 | } else if (align === 'center') { 41 | placeToporBottomX = anchorRect.left - containerRect.left - (menuRect.width - anchorRect.width) / 2; 42 | placeLeftorRightY = anchorRect.top - containerRect.top - (menuRect.height - anchorRect.height) / 2; 43 | } else { 44 | placeToporBottomX = anchorRect.left - containerRect.left; 45 | placeLeftorRightY = anchorRect.top - containerRect.top; 46 | } 47 | placeToporBottomX += horizontalOffset; 48 | placeLeftorRightY += verticalOffset; 49 | const options = { 50 | ...positionHelpers, 51 | anchorRect, 52 | placeLeftX, 53 | placeRightX, 54 | placeLeftorRightY, 55 | placeTopY, 56 | placeBottomY, 57 | placeToporBottomX, 58 | arrowRef, 59 | arrow, 60 | direction, 61 | position 62 | }; 63 | switch (direction) { 64 | case 'left': 65 | case 'right': 66 | return placeLeftorRight.placeLeftorRight(options); 67 | case 'top': 68 | case 'bottom': 69 | default: 70 | return placeToporBottom.placeToporBottom(options); 71 | } 72 | }; 73 | 74 | exports.positionMenu = positionMenu; 75 | -------------------------------------------------------------------------------- /src/style-utils/index.js: -------------------------------------------------------------------------------- 1 | import { 2 | menuContainerClass, 3 | menuButtonClass, 4 | menuClass, 5 | menuArrowClass, 6 | menuItemClass, 7 | menuDividerClass, 8 | menuHeaderClass, 9 | menuGroupClass, 10 | radioGroupClass, 11 | subMenuClass 12 | } from '../utils'; 13 | 14 | const bem = (block) => (element) => (modifier) => { 15 | let selector = `.${block}`; 16 | if (element) selector += `__${element}`; 17 | if (modifier) selector += `--${modifier}`; 18 | return selector; 19 | }; 20 | 21 | const createSelector = (blockElement, modifiers = []) => { 22 | const selectorObj = {}; 23 | Object.defineProperty(selectorObj, 'name', { 24 | value: blockElement(), 25 | enumerable: true 26 | }); 27 | 28 | modifiers.forEach((modifier) => { 29 | const selector = modifier 30 | .split('-') 31 | .reduce((prev, curr) => `${prev}${curr[0].toUpperCase()}${curr.slice(1)}`); 32 | Object.defineProperty(selectorObj, selector, { 33 | value: blockElement(modifier), 34 | enumerable: true 35 | }); 36 | }); 37 | 38 | return selectorObj; 39 | }; 40 | 41 | const createModifiers = (name, values) => values.map((value) => `${name}-${value}`); 42 | 43 | const directions = createModifiers('dir', ['left', 'right', 'top', 'bottom']); 44 | const menuBlock = bem(menuClass); 45 | const menuSelector = createSelector(menuBlock(), [ 46 | ...createModifiers('state', ['opening', 'open', 'closing', 'closed']), 47 | ...createModifiers('align', ['start', 'center', 'end']), 48 | ...directions 49 | ]); 50 | const menuArrowSelector = createSelector(menuBlock(menuArrowClass), directions); 51 | const menuItemSelector = createSelector(menuBlock(menuItemClass), [ 52 | 'hover', 53 | 'disabled', 54 | 'anchor', 55 | 'checked', 56 | 'open', 57 | 'submenu', 58 | 'focusable', 59 | 'type-radio', 60 | 'type-checkbox' 61 | ]); 62 | 63 | const menuDividerSelector = createSelector(menuBlock(menuDividerClass)); 64 | const menuHeaderSelector = createSelector(menuBlock(menuHeaderClass)); 65 | const menuGroupSelector = createSelector(menuBlock(menuGroupClass)); 66 | const radioGroupSelector = createSelector(menuBlock(radioGroupClass)); 67 | const submenuSelector = createSelector(menuBlock(subMenuClass)); 68 | const menuContainerSelector = createSelector(bem(menuContainerClass)(), ['itemTransition']); 69 | const menuButtonSelector = createSelector(bem(menuButtonClass)(), ['open']); 70 | 71 | export { 72 | menuContainerSelector, 73 | menuButtonSelector, 74 | menuSelector, 75 | menuArrowSelector, 76 | menuItemSelector, 77 | menuDividerSelector, 78 | menuHeaderSelector, 79 | menuGroupSelector, 80 | radioGroupSelector, 81 | submenuSelector 82 | }; 83 | -------------------------------------------------------------------------------- /dist/cjs/utils/utils.cjs: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var reactDom = require('react-dom'); 4 | 5 | const isMenuOpen = state => !!state && state[0] === 'o'; 6 | const batchedUpdates = reactDom.unstable_batchedUpdates; 7 | const getTransition = (transition, name) => transition === true || !!(transition && transition[name]); 8 | const safeCall = (fn, arg) => typeof fn === 'function' ? fn(arg) : fn; 9 | const internalKey = '_szhsinMenu'; 10 | const getName = component => component[internalKey]; 11 | const defineName = (name, component) => Object.defineProperty(component, internalKey, { 12 | value: name 13 | }); 14 | const mergeProps = (target, source) => { 15 | source && Object.keys(source).forEach(key => { 16 | const targetProp = target[key]; 17 | const sourceProp = source[key]; 18 | if (typeof sourceProp === 'function' && targetProp) { 19 | target[key] = (...arg) => { 20 | sourceProp(...arg); 21 | targetProp(...arg); 22 | }; 23 | } else { 24 | target[key] = sourceProp; 25 | } 26 | }); 27 | return target; 28 | }; 29 | const parsePadding = paddingStr => { 30 | if (typeof paddingStr !== 'string') return { 31 | top: 0, 32 | right: 0, 33 | bottom: 0, 34 | left: 0 35 | }; 36 | const padding = paddingStr.trim().split(/\s+/, 4).map(parseFloat); 37 | const top = !isNaN(padding[0]) ? padding[0] : 0; 38 | const right = !isNaN(padding[1]) ? padding[1] : top; 39 | return { 40 | top, 41 | right, 42 | bottom: !isNaN(padding[2]) ? padding[2] : top, 43 | left: !isNaN(padding[3]) ? padding[3] : right 44 | }; 45 | }; 46 | const getScrollAncestor = node => { 47 | while (node) { 48 | node = node.parentNode; 49 | if (!node || node === document.body || !node.parentNode) return; 50 | const { 51 | overflow, 52 | overflowX, 53 | overflowY 54 | } = getComputedStyle(node); 55 | if (/auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX)) return node; 56 | } 57 | }; 58 | function commonProps(isDisabled, isHovering) { 59 | return { 60 | 'aria-disabled': isDisabled || undefined, 61 | tabIndex: isHovering ? 0 : -1 62 | }; 63 | } 64 | function indexOfNode(nodeList, node) { 65 | for (let i = 0; i < nodeList.length; i++) { 66 | if (nodeList[i] === node) return i; 67 | } 68 | return -1; 69 | } 70 | 71 | exports.batchedUpdates = batchedUpdates; 72 | exports.commonProps = commonProps; 73 | exports.defineName = defineName; 74 | exports.getName = getName; 75 | exports.getScrollAncestor = getScrollAncestor; 76 | exports.getTransition = getTransition; 77 | exports.indexOfNode = indexOfNode; 78 | exports.isMenuOpen = isMenuOpen; 79 | exports.mergeProps = mergeProps; 80 | exports.parsePadding = parsePadding; 81 | exports.safeCall = safeCall; 82 | -------------------------------------------------------------------------------- /src/components/Menu.js: -------------------------------------------------------------------------------- 1 | import { 2 | cloneElement, 3 | Fragment, 4 | forwardRef, 5 | useRef, 6 | useCallback, 7 | useImperativeHandle, 8 | version as REACT_VERSION 9 | } from 'react'; 10 | import { ControlledMenu } from './ControlledMenu'; 11 | import { useMenuStateAndFocus, useCombinedRef, useClick } from '../hooks'; 12 | import { getName, mergeProps, safeCall, isMenuOpen, Keys, FocusPositions } from '../utils'; 13 | 14 | const isLegacyReact = parseInt(REACT_VERSION) < 19; 15 | 16 | export const Menu = forwardRef(function Menu( 17 | { 18 | 'aria-label': ariaLabel, 19 | captureFocus: _, 20 | initialOpen: _1, 21 | menuButton, 22 | instanceRef, 23 | onMenuChange, 24 | ...restProps 25 | }, 26 | externalRef 27 | ) { 28 | const [stateProps, toggleMenu, openMenu] = useMenuStateAndFocus({ ...restProps, onMenuChange }); 29 | const { state } = stateProps; 30 | const isOpen = isMenuOpen(state); 31 | const buttonRef = useRef(null); 32 | 33 | // Focus (hover) the first menu item when onClick event is trigger by keyboard 34 | const anchorProps = useClick(state, (_, e) => 35 | openMenu(!e.detail ? FocusPositions.FIRST : undefined) 36 | ); 37 | 38 | const handleClose = useCallback( 39 | (e) => { 40 | toggleMenu(false); 41 | if (e.key) buttonRef.current.focus(); 42 | }, 43 | [toggleMenu] 44 | ); 45 | 46 | const onKeyDown = (e) => { 47 | switch (e.key) { 48 | case Keys.UP: 49 | openMenu(FocusPositions.LAST); 50 | break; 51 | 52 | case Keys.DOWN: 53 | openMenu(FocusPositions.FIRST); 54 | break; 55 | 56 | default: 57 | return; 58 | } 59 | 60 | e.preventDefault(); 61 | }; 62 | 63 | const button = safeCall(menuButton, { open: isOpen }); 64 | if (!button || !button.type) throw new Error('Menu requires a menuButton prop.'); 65 | 66 | const buttonProps = { 67 | ...mergeProps({ onKeyDown, ...anchorProps }, button.props), 68 | ref: useCombinedRef(isLegacyReact ? button.ref : button.props.ref, buttonRef) 69 | }; 70 | if (getName(button.type) === 'MenuButton') { 71 | buttonProps.isOpen = isOpen; 72 | } 73 | const renderButton = cloneElement(button, buttonProps); 74 | 75 | useImperativeHandle(instanceRef, () => ({ 76 | openMenu, 77 | closeMenu: () => toggleMenu(false) 78 | })); 79 | 80 | return ( 81 |
- {
30 | expect(renderToString(getMenu({ portal: { target: null } }))).toContain(
31 | '
- {
36 | expect(renderToString(getMenu({ portal: { stablePosition: true } }))).toContain(
37 | ''
38 | );
39 | });
40 |
41 | test('initialMounted is false', () => {
42 | expect(renderToString(getMenu({ initialMounted: false }))).toContain('');
43 | });
44 | });
45 |
--------------------------------------------------------------------------------
/example/src/components/Icons.js:
--------------------------------------------------------------------------------
1 | export const ExternalLinkIcon = () => (
2 |
19 | );
20 |
21 | export const CodeSandboxIcon = () => (
22 |
43 | );
44 |
--------------------------------------------------------------------------------
/example/src/components/Logo.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Menu, MenuItem, MenuDivider, MenuHeader } from '@szhsin/react-menu';
3 | import { useTheme } from '../store';
4 | import { version } from '../utils';
5 |
6 | export const Logo = React.memo(function Logo() {
7 | const menuButton = (
8 |
9 | React-Menu
10 |
13 | );
14 |
15 | return (
16 | v{version}
11 | arrow_drop_down
12 | -
43 | {styleExamples.map(({ name, link }) => (
44 |
50 | All styles are locally scoped to the components except in the CSS/SASS example. 51 |
52 | 53 | ); 54 | }); 55 | -------------------------------------------------------------------------------- /dist/transitions/zoom.css: -------------------------------------------------------------------------------- 1 | @keyframes szh-menu-show-zoom { 2 | from { 3 | opacity: 0.1; 4 | transform: scale(0.95); 5 | } 6 | } 7 | @keyframes szh-menu-hide-zoom { 8 | to { 9 | opacity: 0.1; 10 | transform: scale(0.95); 11 | } 12 | } 13 | .szh-menu--state-opening { 14 | animation: szh-menu-show-zoom 0.125s ease-out; 15 | } 16 | 17 | .szh-menu--state-closing { 18 | animation: szh-menu-hide-zoom 0.125s ease-in forwards; 19 | } 20 | 21 | .szh-menu--dir-left.szh-menu--align-start { 22 | transform-origin: right top; 23 | } 24 | 25 | .szh-menu--dir-left.szh-menu--align-center { 26 | transform-origin: right center; 27 | } 28 | 29 | .szh-menu--dir-left.szh-menu--align-end { 30 | transform-origin: right bottom; 31 | } 32 | 33 | .szh-menu--dir-right.szh-menu--align-start { 34 | transform-origin: left top; 35 | } 36 | 37 | .szh-menu--dir-right.szh-menu--align-center { 38 | transform-origin: left center; 39 | } 40 | 41 | .szh-menu--dir-right.szh-menu--align-end { 42 | transform-origin: left bottom; 43 | } 44 | 45 | .szh-menu--dir-top.szh-menu--align-start { 46 | transform-origin: left bottom; 47 | } 48 | 49 | .szh-menu--dir-top.szh-menu--align-center { 50 | transform-origin: center bottom; 51 | } 52 | 53 | .szh-menu--dir-top.szh-menu--align-end { 54 | transform-origin: right bottom; 55 | } 56 | 57 | .szh-menu--dir-bottom.szh-menu--align-start { 58 | transform-origin: left top; 59 | } 60 | 61 | .szh-menu--dir-bottom.szh-menu--align-center { 62 | transform-origin: center top; 63 | } 64 | 65 | .szh-menu--dir-bottom.szh-menu--align-end { 66 | transform-origin: right top; 67 | } 68 | -------------------------------------------------------------------------------- /src/styles/index.scss: -------------------------------------------------------------------------------- 1 | @use 'var'; 2 | @use 'core'; 3 | 4 | .szh-menu { 5 | user-select: none; 6 | color: var.$color; 7 | border: none; 8 | border-radius: 0.25rem; 9 | box-shadow: 10 | 0 3px 7px rgba(0, 0, 0, 0.133), 11 | 0 0.6px 2px rgba(0, 0, 0, 0.1); 12 | min-width: 10rem; 13 | padding: 0.5rem 0; 14 | 15 | &__item { 16 | display: flex; 17 | align-items: center; 18 | position: relative; 19 | padding: 0.375rem 1.5rem; 20 | 21 | .szh-menu-container--itemTransition & { 22 | transition: { 23 | property: background-color, color; 24 | duration: 0.15s; 25 | timing-function: ease-in-out; 26 | } 27 | } 28 | 29 | &--type-radio { 30 | padding-left: 2.2rem; 31 | &::before { 32 | content: '\25cb'; 33 | position: absolute; 34 | left: 0.8rem; 35 | top: 0.55rem; 36 | font-size: 0.8rem; 37 | } 38 | } 39 | 40 | &--type-radio#{&}--checked::before { 41 | content: '\25cf'; 42 | } 43 | 44 | &--type-checkbox { 45 | padding-left: 2.2rem; 46 | &::before { 47 | position: absolute; 48 | left: 0.8rem; 49 | } 50 | } 51 | 52 | &--type-checkbox#{&}--checked::before { 53 | content: '\2714'; 54 | } 55 | } 56 | 57 | &__submenu > .szh-menu__item { 58 | padding-right: 2.5rem; 59 | &::after { 60 | content: '\276f'; 61 | position: absolute; 62 | right: 1rem; 63 | } 64 | } 65 | 66 | &__header { 67 | color: var.$header-color; 68 | font-size: 0.8rem; 69 | padding: 0.2rem 1.5rem; 70 | text-transform: uppercase; 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /dist/cjs/components/MenuContainer.cjs: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var react = require('react'); 4 | var jsxRuntime = require('react/jsx-runtime'); 5 | var useBEM = require('../hooks/useBEM.cjs'); 6 | var utils = require('../utils/utils.cjs'); 7 | var constants = require('../utils/constants.cjs'); 8 | 9 | const MenuContainer = ({ 10 | className, 11 | containerRef, 12 | containerProps, 13 | children, 14 | isOpen, 15 | theming, 16 | transition, 17 | onClose 18 | }) => { 19 | const itemTransition = utils.getTransition(transition, 'item'); 20 | const onKeyDown = ({ 21 | key 22 | }) => { 23 | switch (key) { 24 | case constants.Keys.ESC: 25 | utils.safeCall(onClose, { 26 | key, 27 | reason: constants.CloseReason.CANCEL 28 | }); 29 | break; 30 | } 31 | }; 32 | const onBlur = e => { 33 | if (isOpen && !e.currentTarget.contains(e.relatedTarget)) { 34 | utils.safeCall(onClose, { 35 | reason: constants.CloseReason.BLUR 36 | }); 37 | } 38 | }; 39 | return /*#__PURE__*/jsxRuntime.jsx("div", { 40 | ...utils.mergeProps({ 41 | onKeyDown, 42 | onBlur 43 | }, containerProps), 44 | className: useBEM.useBEM({ 45 | block: constants.menuContainerClass, 46 | modifiers: react.useMemo(() => ({ 47 | theme: theming, 48 | itemTransition 49 | }), [theming, itemTransition]), 50 | className 51 | }), 52 | style: { 53 | position: 'absolute', 54 | ...containerProps?.style 55 | }, 56 | ref: containerRef, 57 | children: children 58 | }); 59 | }; 60 | 61 | exports.MenuContainer = MenuContainer; 62 | -------------------------------------------------------------------------------- /example/src/styles/_mixins.scss: -------------------------------------------------------------------------------- 1 | @use 'var'; 2 | @use 'sass:color'; 3 | 4 | @mixin reset-list { 5 | margin: 0; 6 | padding: 0; 7 | list-style: none; 8 | } 9 | 10 | @mixin remove-focus { 11 | &:focus { 12 | outline: none; 13 | } 14 | } 15 | 16 | @mixin focus($width: 1px, $color: var.$focus-light) { 17 | &:focus-visible { 18 | border-color: $color; 19 | box-shadow: 0 0 0 $width $color; 20 | } 21 | 22 | @supports not selector(:focus-visible) { 23 | &:focus { 24 | border-color: $color; 25 | box-shadow: 0 0 0 $width $color; 26 | } 27 | } 28 | } 29 | 30 | @mixin transition($property: background-color, $duration: 0.15s, $timing-function: ease-in-out) { 31 | transition-property: $property; 32 | transition-duration: $duration; 33 | transition-timing-function: $timing-function; 34 | } 35 | 36 | @mixin border($border: 'border', $width: 1px, $transition: false) { 37 | #{$border}: $width solid var.$border-light; 38 | @if $transition { 39 | @include transition(border-color); 40 | } 41 | } 42 | 43 | @mixin scrollbar($size: 7px, $dimension: 'width') { 44 | // Chrome, Safari, Edge 45 | &::-webkit-scrollbar { 46 | #{$dimension}: $size; 47 | } 48 | &::-webkit-scrollbar-thumb { 49 | background-color: color.scale(var.$border-light, $lightness: -15%); 50 | } 51 | &::-webkit-scrollbar-track { 52 | background-color: var.$border-light; 53 | } 54 | } 55 | 56 | @mixin scrollbar-dark { 57 | &::-webkit-scrollbar-thumb { 58 | background-color: color.scale(var.$border-dark, $lightness: 25%); 59 | } 60 | &::-webkit-scrollbar-track { 61 | background-color: var.$border-dark; 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /dist/core.css: -------------------------------------------------------------------------------- 1 | .szh-menu { 2 | margin: 0; 3 | padding: 0; 4 | list-style: none; 5 | box-sizing: border-box; 6 | width: max-content; 7 | z-index: 100; 8 | border: 1px solid rgba(0, 0, 0, 0.1); 9 | background-color: #fff; 10 | } 11 | .szh-menu:focus { 12 | outline: none; 13 | } 14 | .szh-menu__arrow { 15 | box-sizing: border-box; 16 | width: 0.75rem; 17 | height: 0.75rem; 18 | background-color: #fff; 19 | border: 1px solid transparent; 20 | border-left-color: rgba(0, 0, 0, 0.1); 21 | border-top-color: rgba(0, 0, 0, 0.1); 22 | z-index: -1; 23 | } 24 | .szh-menu__arrow--dir-left { 25 | right: -0.375rem; 26 | transform: translateY(-50%) rotate(135deg); 27 | } 28 | .szh-menu__arrow--dir-right { 29 | left: -0.375rem; 30 | transform: translateY(-50%) rotate(-45deg); 31 | } 32 | .szh-menu__arrow--dir-top { 33 | bottom: -0.375rem; 34 | transform: translateX(-50%) rotate(-135deg); 35 | } 36 | .szh-menu__arrow--dir-bottom { 37 | top: -0.375rem; 38 | transform: translateX(-50%) rotate(45deg); 39 | } 40 | .szh-menu__item { 41 | cursor: pointer; 42 | } 43 | .szh-menu__item:focus { 44 | outline: none; 45 | } 46 | .szh-menu__item--hover { 47 | background-color: #ebebeb; 48 | } 49 | .szh-menu__item--focusable { 50 | cursor: default; 51 | background-color: inherit; 52 | } 53 | .szh-menu__item--disabled { 54 | cursor: default; 55 | color: #aaa; 56 | } 57 | .szh-menu__group { 58 | box-sizing: border-box; 59 | } 60 | .szh-menu__radio-group { 61 | margin: 0; 62 | padding: 0; 63 | list-style: none; 64 | } 65 | .szh-menu__divider { 66 | height: 1px; 67 | margin: 0.5rem 0; 68 | background-color: rgba(0, 0, 0, 0.12); 69 | } 70 | 71 | .szh-menu-button { 72 | box-sizing: border-box; 73 | } 74 | -------------------------------------------------------------------------------- /example/src/components/Footer.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import { basePath } from '../../next.config'; 3 | import { useTheme } from '../store'; 4 | import { version, build } from '../utils'; 5 | 6 | export const Footer = React.memo(function Footer() { 7 | const { isDark } = useTheme(); 8 | const [starCount, setStarCount] = useState('-'); 9 | 10 | useEffect(() => { 11 | fetch('https://api.github.com/repos/szhsin/react-menu') 12 | .then((response) => response.json()) 13 | .then(({ stargazers_count }) => setStarCount(stargazers_count.toLocaleString('en-US'))) 14 | .catch((err) => console.error(err)); 15 | }, []); 16 | 17 | return ( 18 | 51 | ); 52 | }); 53 | -------------------------------------------------------------------------------- /dist/esm/components/MenuGroup.mjs: -------------------------------------------------------------------------------- 1 | import { forwardRef, useRef, useState, useContext } from 'react'; 2 | import { jsx } from 'react/jsx-runtime'; 3 | import { useLayoutEffect as useIsomorphicLayoutEffect } from '../hooks/useIsomorphicLayoutEffect.mjs'; 4 | import { getNormalizedClientRect } from '../positionUtils/getNormalizedClientRect.mjs'; 5 | import { useBEM } from '../hooks/useBEM.mjs'; 6 | import { useCombinedRef } from '../hooks/useCombinedRef.mjs'; 7 | import { MenuListContext, menuClass, menuGroupClass } from '../utils/constants.mjs'; 8 | 9 | const MenuGroup = /*#__PURE__*/forwardRef(function MenuGroup({ 10 | className, 11 | style, 12 | takeOverflow, 13 | ...restProps 14 | }, externalRef) { 15 | const ref = useRef(null); 16 | const [overflowStyle, setOverflowStyle] = useState(); 17 | const { 18 | overflow, 19 | overflowAmt 20 | } = useContext(MenuListContext); 21 | useIsomorphicLayoutEffect(() => { 22 | let maxHeight; 23 | if (takeOverflow && overflowAmt >= 0) { 24 | maxHeight = getNormalizedClientRect(ref.current).height - overflowAmt; 25 | if (maxHeight < 0) maxHeight = 0; 26 | } 27 | setOverflowStyle(maxHeight >= 0 ? { 28 | maxHeight, 29 | overflow 30 | } : undefined); 31 | }, [takeOverflow, overflow, overflowAmt]); 32 | useIsomorphicLayoutEffect(() => { 33 | if (overflowStyle) ref.current.scrollTop = 0; 34 | }, [overflowStyle]); 35 | return /*#__PURE__*/jsx("div", { 36 | ...restProps, 37 | ref: useCombinedRef(externalRef, ref), 38 | className: useBEM({ 39 | block: menuClass, 40 | element: menuGroupClass, 41 | className 42 | }), 43 | style: { 44 | ...style, 45 | ...overflowStyle 46 | } 47 | }); 48 | }); 49 | 50 | export { MenuGroup }; 51 | -------------------------------------------------------------------------------- /dist/esm/hooks/useItemState.mjs: -------------------------------------------------------------------------------- 1 | import { useContext, useEffect } from 'react'; 2 | import { useItemEffect } from './useItemEffect.mjs'; 3 | import { useMouseOver } from './useMouseOver.mjs'; 4 | import { SettingsContext, MenuListItemContext, HoverActionTypes } from '../utils/constants.mjs'; 5 | 6 | const useItemState = (itemRef, focusRef, isHovering, isDisabled) => { 7 | const [mouseOver, mouseOverStart, mouseOverEnd] = useMouseOver(isHovering); 8 | const { 9 | submenuCloseDelay 10 | } = useContext(SettingsContext); 11 | const { 12 | isParentOpen, 13 | submenuCtx, 14 | dispatch, 15 | updateItems 16 | } = useContext(MenuListItemContext); 17 | const setHover = () => { 18 | !isHovering && !isDisabled && dispatch(HoverActionTypes.SET, itemRef.current); 19 | }; 20 | const unsetHover = () => { 21 | !isDisabled && dispatch(HoverActionTypes.UNSET, itemRef.current); 22 | }; 23 | const onBlur = e => { 24 | if (isHovering && !e.currentTarget.contains(e.relatedTarget)) unsetHover(); 25 | }; 26 | const onPointerMove = e => { 27 | if (!isDisabled) { 28 | e.stopPropagation(); 29 | mouseOverStart(); 30 | submenuCtx.on(submenuCloseDelay, setHover, setHover); 31 | } 32 | }; 33 | const onPointerLeave = (_, keepHover) => { 34 | mouseOverEnd(); 35 | submenuCtx.off(); 36 | !keepHover && unsetHover(); 37 | }; 38 | useItemEffect(isDisabled, itemRef, updateItems); 39 | useEffect(() => { 40 | if (isHovering && isParentOpen) { 41 | focusRef.current && focusRef.current.focus(); 42 | } 43 | }, [focusRef, isHovering, isParentOpen]); 44 | return { 45 | mouseOver, 46 | setHover, 47 | onBlur, 48 | onPointerMove, 49 | onPointerLeave 50 | }; 51 | }; 52 | 53 | export { useItemState }; 54 | -------------------------------------------------------------------------------- /dist/cjs/hooks/useItemState.cjs: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var react = require('react'); 4 | var useItemEffect = require('./useItemEffect.cjs'); 5 | var useMouseOver = require('./useMouseOver.cjs'); 6 | var constants = require('../utils/constants.cjs'); 7 | 8 | const useItemState = (itemRef, focusRef, isHovering, isDisabled) => { 9 | const [mouseOver, mouseOverStart, mouseOverEnd] = useMouseOver.useMouseOver(isHovering); 10 | const { 11 | submenuCloseDelay 12 | } = react.useContext(constants.SettingsContext); 13 | const { 14 | isParentOpen, 15 | submenuCtx, 16 | dispatch, 17 | updateItems 18 | } = react.useContext(constants.MenuListItemContext); 19 | const setHover = () => { 20 | !isHovering && !isDisabled && dispatch(constants.HoverActionTypes.SET, itemRef.current); 21 | }; 22 | const unsetHover = () => { 23 | !isDisabled && dispatch(constants.HoverActionTypes.UNSET, itemRef.current); 24 | }; 25 | const onBlur = e => { 26 | if (isHovering && !e.currentTarget.contains(e.relatedTarget)) unsetHover(); 27 | }; 28 | const onPointerMove = e => { 29 | if (!isDisabled) { 30 | e.stopPropagation(); 31 | mouseOverStart(); 32 | submenuCtx.on(submenuCloseDelay, setHover, setHover); 33 | } 34 | }; 35 | const onPointerLeave = (_, keepHover) => { 36 | mouseOverEnd(); 37 | submenuCtx.off(); 38 | !keepHover && unsetHover(); 39 | }; 40 | useItemEffect.useItemEffect(isDisabled, itemRef, updateItems); 41 | react.useEffect(() => { 42 | if (isHovering && isParentOpen) { 43 | focusRef.current && focusRef.current.focus(); 44 | } 45 | }, [focusRef, isHovering, isParentOpen]); 46 | return { 47 | mouseOver, 48 | setHover, 49 | onBlur, 50 | onPointerMove, 51 | onPointerLeave 52 | }; 53 | }; 54 | 55 | exports.useItemState = useItemState; 56 | -------------------------------------------------------------------------------- /dist/cjs/components/MenuGroup.cjs: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var react = require('react'); 4 | var jsxRuntime = require('react/jsx-runtime'); 5 | var useIsomorphicLayoutEffect = require('../hooks/useIsomorphicLayoutEffect.cjs'); 6 | var getNormalizedClientRect = require('../positionUtils/getNormalizedClientRect.cjs'); 7 | var useBEM = require('../hooks/useBEM.cjs'); 8 | var useCombinedRef = require('../hooks/useCombinedRef.cjs'); 9 | var constants = require('../utils/constants.cjs'); 10 | 11 | const MenuGroup = /*#__PURE__*/react.forwardRef(function MenuGroup({ 12 | className, 13 | style, 14 | takeOverflow, 15 | ...restProps 16 | }, externalRef) { 17 | const ref = react.useRef(null); 18 | const [overflowStyle, setOverflowStyle] = react.useState(); 19 | const { 20 | overflow, 21 | overflowAmt 22 | } = react.useContext(constants.MenuListContext); 23 | useIsomorphicLayoutEffect.useLayoutEffect(() => { 24 | let maxHeight; 25 | if (takeOverflow && overflowAmt >= 0) { 26 | maxHeight = getNormalizedClientRect.getNormalizedClientRect(ref.current).height - overflowAmt; 27 | if (maxHeight < 0) maxHeight = 0; 28 | } 29 | setOverflowStyle(maxHeight >= 0 ? { 30 | maxHeight, 31 | overflow 32 | } : undefined); 33 | }, [takeOverflow, overflow, overflowAmt]); 34 | useIsomorphicLayoutEffect.useLayoutEffect(() => { 35 | if (overflowStyle) ref.current.scrollTop = 0; 36 | }, [overflowStyle]); 37 | return /*#__PURE__*/jsxRuntime.jsx("div", { 38 | ...restProps, 39 | ref: useCombinedRef.useCombinedRef(externalRef, ref), 40 | className: useBEM.useBEM({ 41 | block: constants.menuClass, 42 | element: constants.menuGroupClass, 43 | className 44 | }), 45 | style: { 46 | ...style, 47 | ...overflowStyle 48 | } 49 | }); 50 | }); 51 | 52 | exports.MenuGroup = MenuGroup; 53 | -------------------------------------------------------------------------------- /src/styles/core.scss: -------------------------------------------------------------------------------- 1 | @use 'var'; 2 | @use 'mixins'; 3 | 4 | .szh-menu { 5 | @include mixins.reset-list; 6 | box-sizing: border-box; 7 | width: max-content; 8 | z-index: 100; 9 | border: 1px solid var.$border-color; 10 | background-color: var.$background-color; 11 | @include mixins.remove-focus; 12 | 13 | &__arrow { 14 | box-sizing: border-box; 15 | width: var.$arrow-size; 16 | height: var.$arrow-size; 17 | background-color: var.$background-color; 18 | border: 1px solid transparent; 19 | border-left-color: var.$border-color; 20 | border-top-color: var.$border-color; 21 | z-index: -1; 22 | 23 | &--dir-left { 24 | right: var.$arrow-pos; 25 | transform: translateY(-50%) rotate(135deg); 26 | } 27 | 28 | &--dir-right { 29 | left: var.$arrow-pos; 30 | transform: translateY(-50%) rotate(-45deg); 31 | } 32 | 33 | &--dir-top { 34 | bottom: var.$arrow-pos; 35 | transform: translateX(-50%) rotate(-135deg); 36 | } 37 | 38 | &--dir-bottom { 39 | top: var.$arrow-pos; 40 | transform: translateX(-50%) rotate(45deg); 41 | } 42 | } 43 | 44 | &__item { 45 | cursor: pointer; 46 | @include mixins.remove-focus; 47 | 48 | &--hover { 49 | background-color: var.$background-color-hover; 50 | } 51 | 52 | &--focusable { 53 | cursor: default; 54 | background-color: inherit; 55 | } 56 | 57 | &--disabled { 58 | cursor: default; 59 | color: var.$color-disabled; 60 | } 61 | } 62 | 63 | &__group { 64 | box-sizing: border-box; 65 | } 66 | 67 | &__radio-group { 68 | @include mixins.reset-list; 69 | } 70 | 71 | &__divider { 72 | height: 1px; 73 | margin: 0.5rem 0; 74 | background-color: var.$divider-color; 75 | } 76 | } 77 | 78 | .szh-menu-button { 79 | box-sizing: border-box; 80 | } 81 | -------------------------------------------------------------------------------- /src/utils/constants.js: -------------------------------------------------------------------------------- 1 | import { createContext } from 'react'; 2 | 3 | export const menuContainerClass = 'szh-menu-container'; 4 | export const menuClass = 'szh-menu'; 5 | export const menuButtonClass = 'szh-menu-button'; 6 | export const menuArrowClass = 'arrow'; 7 | export const menuItemClass = 'item'; 8 | export const menuDividerClass = 'divider'; 9 | export const menuHeaderClass = 'header'; 10 | export const menuGroupClass = 'group'; 11 | export const subMenuClass = 'submenu'; 12 | export const radioGroupClass = 'radio-group'; 13 | 14 | export const HoverItemContext = createContext(); 15 | export const MenuListItemContext = createContext({}); 16 | export const MenuListContext = createContext({}); 17 | export const EventHandlersContext = createContext({}); 18 | export const RadioGroupContext = createContext({}); 19 | export const SettingsContext = createContext({}); 20 | 21 | export const Keys = Object.freeze({ 22 | ENTER: 'Enter', 23 | ESC: 'Escape', 24 | SPACE: ' ', 25 | HOME: 'Home', 26 | END: 'End', 27 | LEFT: 'ArrowLeft', 28 | RIGHT: 'ArrowRight', 29 | UP: 'ArrowUp', 30 | DOWN: 'ArrowDown' 31 | }); 32 | 33 | export const HoverActionTypes = Object.freeze({ 34 | RESET: 0, 35 | SET: 1, 36 | UNSET: 2, 37 | INCREASE: 3, 38 | DECREASE: 4, 39 | FIRST: 5, 40 | LAST: 6, 41 | SET_INDEX: 7 42 | }); 43 | 44 | export const CloseReason = Object.freeze({ 45 | CLICK: 'click', 46 | CANCEL: 'cancel', 47 | BLUR: 'blur', 48 | SCROLL: 'scroll' 49 | }); 50 | 51 | export const FocusPositions = Object.freeze({ 52 | FIRST: 'first', 53 | LAST: 'last' 54 | }); 55 | 56 | export const MenuStateMap = Object.freeze({ 57 | entering: 'opening', 58 | entered: 'open', 59 | exiting: 'closing', 60 | exited: 'closed' 61 | }); 62 | 63 | export const positionAbsolute = 'absolute'; 64 | export const roleNone = 'none'; 65 | export const roleMenuitem = 'menuitem'; 66 | export const noScrollFocus = { preventScroll: true }; 67 | -------------------------------------------------------------------------------- /example/src/components/App.js: -------------------------------------------------------------------------------- 1 | import { useEffect } from 'react'; 2 | import { useSnapshot } from 'reactish-state'; 3 | import { useRouter } from 'next/router'; 4 | import { bem, useLayoutEffect } from '../utils'; 5 | import { hydrate, domInfoState, isTocOpenState, toastState, showBannerState } from '../store'; 6 | import { Header } from './Header'; 7 | import { Footer } from './Footer'; 8 | 9 | const App = ({ children }) => { 10 | const showBanner = useSnapshot(showBannerState); 11 | const toast = useSnapshot(toastState); 12 | 13 | useLayoutEffect(() => { 14 | hydrate(); 15 | }, []); 16 | 17 | useEffect(() => { 18 | const handleResize = () => { 19 | const info = { 20 | // Viewport size 21 | vWidth: document.documentElement.clientWidth, 22 | vHeight: window.innerHeight, 23 | navbarHeight: document.querySelector('#header').offsetHeight 24 | }; 25 | 26 | if (info.vWidth > 950) isTocOpenState.set(false); 27 | domInfoState.set(info); 28 | }; 29 | 30 | handleResize(); 31 | window.addEventListener('resize', handleResize); 32 | 33 | return () => { 34 | window.removeEventListener('resize', handleResize); 35 | }; 36 | }, [/* effect dep */ showBanner]); 37 | 38 | useEffect(() => { 39 | if (!toast) return; 40 | const id = setTimeout(() => toastState.set(null), 2500); 41 | return () => clearTimeout(id); 42 | }, [toast]); 43 | 44 | const router = useRouter(); 45 | useEffect(() => { 46 | isTocOpenState.set(false); 47 | }, [/* effect dep */ router]); 48 | 49 | return ( 50 | <> 51 |
53 | {children}
54 |
55 |
56 | {toast && (
57 |
58 | {toast}
59 |
60 | )}
61 |
62 | );
63 | };
64 |
65 | export default App;
66 |
--------------------------------------------------------------------------------
/src/components/FocusableItem.js:
--------------------------------------------------------------------------------
1 | import { useContext, useMemo, useRef } from 'react';
2 | import { useBEM, useCombinedRef, useItemState } from '../hooks';
3 | import {
4 | mergeProps,
5 | commonProps,
6 | safeCall,
7 | menuClass,
8 | menuItemClass,
9 | roleMenuitem,
10 | withHovering,
11 | EventHandlersContext
12 | } from '../utils';
13 |
14 | export const FocusableItem = withHovering(
15 | 'FocusableItem',
16 | function FocusableItem({
17 | className,
18 | disabled,
19 | children,
20 | isHovering,
21 | itemRef,
22 | externalRef,
23 | ...restProps
24 | }) {
25 | const isDisabled = !!disabled;
26 | const ref = useRef(null);
27 | const { mouseOver, setHover, onPointerLeave, ...restStateProps } = useItemState(
28 | itemRef,
29 | ref,
30 | isHovering,
31 | isDisabled
32 | );
33 | const { handleClose } = useContext(EventHandlersContext);
34 |
35 | const modifiers = useMemo(
36 | () => ({
37 | disabled: isDisabled,
38 | hover: mouseOver || isHovering,
39 | focusable: true
40 | }),
41 | [isDisabled, isHovering, mouseOver]
42 | );
43 |
44 | const renderChildren = useMemo(
45 | () =>
46 | safeCall(children, {
47 | ...modifiers,
48 | ref,
49 | closeMenu: handleClose
50 | }),
51 | [children, modifiers, handleClose]
52 | );
53 |
54 | const mergedProps = mergeProps(
55 | {
56 | ...restStateProps,
57 | onPointerLeave: (e) => onPointerLeave(e, true),
58 | onFocus: setHover
59 | },
60 | restProps
61 | );
62 |
63 | return (
64 | 60 | **[Visit more examples and docs](https://szhsin.github.io/react-menu/)**
61 | **[FAQs](docs/FAQs.md)**
62 | Still on an old version? Please checkout our [migration guides](docs/migration/index.md). 63 | 64 | ## License 65 | 66 | [MIT](https://github.com/szhsin/react-menu/blob/master/LICENSE) Licensed. 67 | -------------------------------------------------------------------------------- /example/src/components/Header.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { useRouter } from 'next/router'; 3 | import Link from 'next/link'; 4 | import { useSnapshot } from 'reactish-state'; 5 | import { basePath } from '../../next.config'; 6 | import { bem } from '../utils'; 7 | import { isTocOpenState, showBannerState, useTheme } from '../store'; 8 | import { Logo } from './Logo'; 9 | import { HeaderBanner } from './HeaderBanner'; 10 | import { ThemeSwitch } from './ThemeSwitch'; 11 | 12 | const blockName = 'navbar'; 13 | 14 | export const Header = React.memo(function Header() { 15 | const { theme, isDark } = useTheme(); 16 | const showBanner = useSnapshot(showBannerState); 17 | 18 | return ( 19 |