@mezzanine-ui/react 1.0.0-beta.0 → 1.0.0-beta.1

package/Navigation/NavigationSubMenu.d.ts

@@ -1,22 +0,0 @@
-import { ReactElement } from 'react';
-import { NavigationItemProps } from './NavigationItem';
-export type NavigationSubMenuChild = ReactElement<NavigationItemProps>;
-export type NavigationSubMenuChildren = NavigationSubMenuChild | NavigationSubMenuChild[];
-export interface NavigationSubMenuProps extends Omit<NavigationItemProps, 'onClick' | 'eventKey' | 'key'> {
-    /**
-     * Strict children with `NavigationItem`.
-     * @default []
-     */
-    children?: NavigationSubMenuChildren;
-    /**
-     * Set display title for sub-menu item.
-     */
-    title?: string;
-    /**
-     * Open menu as default
-     * @default false
-     */
-    defaultOpen?: boolean;
-}
-declare const NavigationSubMenu: import("react").ForwardRefExoticComponent<NavigationSubMenuProps & import("react").RefAttributes<HTMLLIElement>>;
-export default NavigationSubMenu;

package/Navigation/NavigationSubMenu.js

@@ -1,50 +0,0 @@
-'use client';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useState, useRef, useContext } from 'react';
-import { navigationSubMenuClasses } from '@mezzanine-ui/core/navigation';
-import { ChevronUpIcon, ChevronDownIcon } from '@mezzanine-ui/icons';
-import { offset, size } from '@floating-ui/react-dom';
-import { useClickAway } from '../hooks/useClickAway.js';
-import { useComposeRefs } from '../hooks/useComposeRefs.js';
-import NavigationItem from './NavigationItem.js';
-import { NavigationContext } from './NavigationContext.js';
-import Icon from '../Icon/Icon.js';
-import Popper from '../Popper/Popper.js';
-import Collapse from '../Transition/Collapse.js';
-import cx from 'clsx';
-
-// Middleware to make the submenu have the same width as the reference element
-const sameWidthMiddleware = size({
-    apply({ rects, elements }) {
-        Object.assign(elements.floating.style, {
-            width: `${rects.reference.width}px`,
-        });
-    },
-});
-const NavigationSubMenu = forwardRef((props, ref) => {
-    const { active, className, children = [], defaultOpen = false, icon, title, ...rest } = props;
-    const [open, setOpen] = useState(defaultOpen);
-    const nodeRef = useRef(null);
-    const composedNodeRef = useComposeRefs([ref, nodeRef]);
-    const { orientation } = useContext(NavigationContext);
-    const GroupToggleIcon = open ? ChevronUpIcon : ChevronDownIcon;
-    useClickAway(() => {
-        if (!open || orientation === 'vertical') {
-            return;
-        }
-        return () => {
-            setOpen(!open);
-        };
-    }, nodeRef, [open, orientation]);
-    const WrapChildren = jsx("ul", { className: navigationSubMenuClasses.group, children: children });
-    return (jsxs(NavigationItem, { ...rest, ref: composedNodeRef, className: cx(navigationSubMenuClasses.host, active && navigationSubMenuClasses.active, open && navigationSubMenuClasses.open, icon && orientation === 'vertical' && navigationSubMenuClasses.indent, className), onClick: () => setOpen(!open), children: [jsxs("div", { className: navigationSubMenuClasses.title, children: [icon && jsx(Icon, { className: navigationSubMenuClasses.icon, icon: icon }), title, jsx(Icon, { className: navigationSubMenuClasses.toggleIcon, icon: GroupToggleIcon })] }), orientation === 'horizontal' && (jsx(Popper, { anchor: nodeRef, disablePortal: true, open: !!open, options: {
-                    middleware: [
-                        offset({ mainAxis: 0, crossAxis: 0 }),
-                        sameWidthMiddleware,
-                    ],
-                }, children: WrapChildren })), orientation === 'vertical' && (jsx(Collapse, { style: {
-                    width: '100%',
-                }, in: !!open, children: WrapChildren }))] }));
-});
-
-export { NavigationSubMenu as default };