@basic-ui/core 0.0.52 → 0.0.53

package/src/Menu/MenuList.tsx

@@ -1,254 +1,254 @@
-import type { HTMLAttributes, ElementType, KeyboardEvent } from 'react';
-import {
-  useCallback,
-  forwardRef,
-  useEffect,
-  useRef,
-  useState,
-  useLayoutEffect,
-} from 'react';
-
-import { useMenuContext, MenuListProvider } from './context';
-import { assignMultipleRefs } from '../utils/assign-ref';
-import { useOnClickOutside } from '../hooks/useOnClickOutside';
-import { useScope } from '../hooks';
-import { queryScope } from './scope';
-import { getCircularIndex, wrapEvent } from '../utils';
-
-const useEnhancedEffect =
-  typeof window !== 'undefined' ? useLayoutEffect : useEffect;
-
-export interface MenuListProps extends HTMLAttributes<HTMLUListElement> {
-  as?: ElementType<any>;
-  innerAs?: ElementType<any>;
-  defaultActiveItemValue?: string | string[];
-}
-
-export const MenuList = forwardRef<HTMLUListElement, MenuListProps>(
-  function MenuList(props, forwardedRef) {
-    const {
-      as: Comp = 'ul',
-      innerAs,
-      onKeyDown,
-      id: preferredId,
-      defaultActiveItemValue,
-      ...otherProps
-    } = props;
-
-    const interactedOutside = useRef(false);
-    const itemSearchStr = useRef('');
-    const itemSearchClearTimeout = useRef<ReturnType<typeof setTimeout>>();
-
-    const {
-      menuListIdRef,
-      buttonRef,
-      onChange,
-      openWithArrowKeyRef,
-      open,
-      isContextMenu,
-    } = useMenuContext();
-
-    const [navigationItem, setNavigationItem] = useState<
-      HTMLElement | undefined
-    >();
-
-    const [mounted, setMounted] = useState(false);
-
-    const menuListRef = useRef<HTMLUListElement>();
-
-    const scope = useScope<HTMLLIElement, HTMLUListElement>(menuListRef);
-
-    const onNavigate = (el: HTMLElement) => {
-      el.focus();
-      setNavigationItem(el);
-    };
-
-    menuListIdRef.current = preferredId || menuListIdRef.current;
-
-    useEnhancedEffect(() => {
-      if (!mounted) {
-        const allItems = scope.current.queryAllNodes(queryScope);
-        let index = getCircularIndex(
-          openWithArrowKeyRef.current === 'ArrowUp' ? -1 : 0,
-          allItems.length
-        );
-
-        if (defaultActiveItemValue) {
-          if (typeof defaultActiveItemValue === 'string') {
-            for (let i = 0; i < allItems.length; i++) {
-              if (allItems[i].dataset.value === defaultActiveItemValue) {
-                index = i;
-                break;
-              }
-            }
-          } else if (Array.isArray(defaultActiveItemValue)) {
-            const set = new Set(defaultActiveItemValue);
-            for (let i = 0; i < allItems.length; i++) {
-              const val = allItems[i].dataset.value;
-              if (val && set.has(val)) {
-                index = i;
-                break;
-              }
-            }
-          }
-        }
-
-        if (index !== null) {
-          onNavigate && onNavigate(allItems[index]);
-        }
-      }
-
-      openWithArrowKeyRef.current = null;
-      setMounted(true);
-    }, [
-      mounted,
-      navigationItem,
-      onNavigate,
-      openWithArrowKeyRef,
-      scope,
-      defaultActiveItemValue,
-    ]);
-
-    const handleClickOutside = useCallback(
-      (e: PointerEvent) => {
-        if (isContextMenu.current) {
-          if (!interactedOutside.current && e.pointerType === 'touch') {
-            // First interaction should be ignored, because
-            // this is what triggered the context menu to open
-            interactedOutside.current = true;
-            return;
-          }
-
-          if (e.button === 0) {
-            onChange(e as any, false);
-          }
-        } else {
-          if (
-            e.target instanceof HTMLElement &&
-            e.target !== buttonRef.current &&
-            !buttonRef.current?.contains(e.target)
-          ) {
-            onChange(e as any, false);
-          }
-        }
-        e.preventDefault();
-      },
-      [buttonRef, isContextMenu, onChange]
-    );
-
-    useOnClickOutside(menuListRef, handleClickOutside, open);
-
-    function handleKeyDown(e: KeyboardEvent<HTMLUListElement>) {
-      switch (e.key) {
-        case 'Escape':
-        case 'Tab': {
-          onChange(e, false);
-          e.preventDefault(); // prevents focusing on next element, because we will be handling it
-          itemSearchStr.current = '';
-          buttonRef.current?.focus();
-          break;
-        }
-        case 'Home':
-        case 'End':
-        case 'ArrowDown':
-        case 'ArrowUp':
-          e.preventDefault();
-          itemSearchStr.current = '';
-          const allItems = scope ? scope.current.queryAllNodes(queryScope) : [];
-          const currentIndex = allItems.findIndex((e) => e === navigationItem);
-          if (allItems.length === 0) {
-            return;
-          }
-          let nextIndex: number = currentIndex;
-          switch (e.key) {
-            case 'ArrowUp':
-              nextIndex += -1;
-              break;
-            case 'ArrowDown':
-              nextIndex += 1;
-              break;
-            case 'Home':
-              nextIndex = 0;
-              break;
-            case 'End':
-              nextIndex = -1;
-              break;
-          }
-          // We already checked if allItems.length = 0 above
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          nextIndex = getCircularIndex(nextIndex, allItems.length)!;
-          onNavigate && onNavigate(allItems[nextIndex]);
-          break;
-        default: {
-          if (e.key.length === 1 && !e.ctrlKey && !e.altKey) {
-            // A-Z
-            e.preventDefault();
-
-            if (
-              itemSearchStr.current.length === 0 ||
-              itemSearchStr.current.slice(-1) !== e.key
-            ) {
-              itemSearchStr.current = itemSearchStr.current + e.key;
-            }
-            clearTimeout(itemSearchClearTimeout.current as any);
-            itemSearchClearTimeout.current = setTimeout(() => {
-              itemSearchStr.current = '';
-            }, 500);
-
-            const allItems = scope
-              ? scope.current.queryAllNodes(queryScope)
-              : [];
-            const currentIndex = allItems.findIndex(
-              (e) => e === navigationItem
-            );
-            const searchStr = itemSearchStr.current;
-            let nextIndex = -1;
-            for (
-              let i = searchStr.length === 1 ? 1 : 0;
-              i < allItems.length;
-              i++
-            ) {
-              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-              const idx = getCircularIndex(currentIndex + i, allItems.length)!;
-              const dom = allItems[idx];
-              const domText = dom.innerText.toLowerCase();
-              if (domText.length > 0 && domText.startsWith(searchStr)) {
-                nextIndex = idx;
-                break;
-              }
-            }
-            if (nextIndex >= 0 && nextIndex < allItems.length) {
-              onNavigate && onNavigate(allItems[nextIndex]);
-            }
-          }
-        }
-      }
-    }
-
-    if (!open) {
-      interactedOutside.current = false;
-      return null;
-    }
-
-    return (
-      <MenuListProvider
-        value={{
-          navigationItem,
-          onNavigate,
-        }}
-      >
-        <Comp
-          ref={assignMultipleRefs(forwardedRef, menuListRef)}
-          as={innerAs}
-          id={menuListIdRef.current}
-          role="menu"
-          aria-labelledby={buttonRef.current?.id}
-          data-menu-list=""
-          tabIndex="-1"
-          onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}
-          {...otherProps}
-        />
-      </MenuListProvider>
-    );
-  }
-);
+import type { HTMLAttributes, ElementType, KeyboardEvent } from 'react';
+import {
+  useCallback,
+  forwardRef,
+  useEffect,
+  useRef,
+  useState,
+  useLayoutEffect,
+} from 'react';
+
+import { useMenuContext, MenuListProvider } from './context';
+import { assignMultipleRefs } from '../utils/assign-ref';
+import { useOnClickOutside } from '../hooks/useOnClickOutside';
+import { useScope } from '../hooks';
+import { queryScope } from './scope';
+import { getCircularIndex, wrapEvent } from '../utils';
+
+const useEnhancedEffect =
+  typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
+export interface MenuListProps extends HTMLAttributes<HTMLUListElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  defaultActiveItemValue?: string | string[];
+}
+
+export const MenuList = forwardRef<HTMLUListElement, MenuListProps>(
+  function MenuList(props, forwardedRef) {
+    const {
+      as: Comp = 'ul',
+      innerAs,
+      onKeyDown,
+      id: preferredId,
+      defaultActiveItemValue,
+      ...otherProps
+    } = props;
+
+    const interactedOutside = useRef(false);
+    const itemSearchStr = useRef('');
+    const itemSearchClearTimeout = useRef<ReturnType<typeof setTimeout>>();
+
+    const {
+      menuListIdRef,
+      buttonRef,
+      onChange,
+      openWithArrowKeyRef,
+      open,
+      isContextMenu,
+    } = useMenuContext();
+
+    const [navigationItem, setNavigationItem] = useState<
+      HTMLElement | undefined
+    >();
+
+    const [mounted, setMounted] = useState(false);
+
+    const menuListRef = useRef<HTMLUListElement>();
+
+    const scope = useScope<HTMLLIElement, HTMLUListElement>(menuListRef);
+
+    const onNavigate = (el: HTMLElement) => {
+      el.focus();
+      setNavigationItem(el);
+    };
+
+    menuListIdRef.current = preferredId || menuListIdRef.current;
+
+    useEnhancedEffect(() => {
+      if (!mounted) {
+        const allItems = scope.current.queryAllNodes(queryScope);
+        let index = getCircularIndex(
+          openWithArrowKeyRef.current === 'ArrowUp' ? -1 : 0,
+          allItems.length
+        );
+
+        if (defaultActiveItemValue) {
+          if (typeof defaultActiveItemValue === 'string') {
+            for (let i = 0; i < allItems.length; i++) {
+              if (allItems[i].dataset.value === defaultActiveItemValue) {
+                index = i;
+                break;
+              }
+            }
+          } else if (Array.isArray(defaultActiveItemValue)) {
+            const set = new Set(defaultActiveItemValue);
+            for (let i = 0; i < allItems.length; i++) {
+              const val = allItems[i].dataset.value;
+              if (val && set.has(val)) {
+                index = i;
+                break;
+              }
+            }
+          }
+        }
+
+        if (index !== null) {
+          onNavigate && onNavigate(allItems[index]);
+        }
+      }
+
+      openWithArrowKeyRef.current = null;
+      setMounted(true);
+    }, [
+      mounted,
+      navigationItem,
+      onNavigate,
+      openWithArrowKeyRef,
+      scope,
+      defaultActiveItemValue,
+    ]);
+
+    const handleClickOutside = useCallback(
+      (e: PointerEvent) => {
+        if (isContextMenu.current) {
+          if (!interactedOutside.current && e.pointerType === 'touch') {
+            // First interaction should be ignored, because
+            // this is what triggered the context menu to open
+            interactedOutside.current = true;
+            return;
+          }
+
+          if (e.button === 0) {
+            onChange(e as any, false);
+          }
+        } else {
+          if (
+            e.target instanceof HTMLElement &&
+            e.target !== buttonRef.current &&
+            !buttonRef.current?.contains(e.target)
+          ) {
+            onChange(e as any, false);
+          }
+        }
+        e.preventDefault();
+      },
+      [buttonRef, isContextMenu, onChange]
+    );
+
+    useOnClickOutside(menuListRef, handleClickOutside, open);
+
+    function handleKeyDown(e: KeyboardEvent<HTMLUListElement>) {
+      switch (e.key) {
+        case 'Escape':
+        case 'Tab': {
+          onChange(e, false);
+          e.preventDefault(); // prevents focusing on next element, because we will be handling it
+          itemSearchStr.current = '';
+          buttonRef.current?.focus();
+          break;
+        }
+        case 'Home':
+        case 'End':
+        case 'ArrowDown':
+        case 'ArrowUp':
+          e.preventDefault();
+          itemSearchStr.current = '';
+          const allItems = scope ? scope.current.queryAllNodes(queryScope) : [];
+          const currentIndex = allItems.findIndex((e) => e === navigationItem);
+          if (allItems.length === 0) {
+            return;
+          }
+          let nextIndex: number = currentIndex;
+          switch (e.key) {
+            case 'ArrowUp':
+              nextIndex += -1;
+              break;
+            case 'ArrowDown':
+              nextIndex += 1;
+              break;
+            case 'Home':
+              nextIndex = 0;
+              break;
+            case 'End':
+              nextIndex = -1;
+              break;
+          }
+          // We already checked if allItems.length = 0 above
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          nextIndex = getCircularIndex(nextIndex, allItems.length)!;
+          onNavigate && onNavigate(allItems[nextIndex]);
+          break;
+        default: {
+          if (e.key.length === 1 && !e.ctrlKey && !e.altKey) {
+            // A-Z
+            e.preventDefault();
+
+            if (
+              itemSearchStr.current.length === 0 ||
+              itemSearchStr.current.slice(-1) !== e.key
+            ) {
+              itemSearchStr.current = itemSearchStr.current + e.key;
+            }
+            clearTimeout(itemSearchClearTimeout.current as any);
+            itemSearchClearTimeout.current = setTimeout(() => {
+              itemSearchStr.current = '';
+            }, 500);
+
+            const allItems = scope
+              ? scope.current.queryAllNodes(queryScope)
+              : [];
+            const currentIndex = allItems.findIndex(
+              (e) => e === navigationItem
+            );
+            const searchStr = itemSearchStr.current;
+            let nextIndex = -1;
+            for (
+              let i = searchStr.length === 1 ? 1 : 0;
+              i < allItems.length;
+              i++
+            ) {
+              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+              const idx = getCircularIndex(currentIndex + i, allItems.length)!;
+              const dom = allItems[idx];
+              const domText = dom.innerText.toLowerCase();
+              if (domText.length > 0 && domText.startsWith(searchStr)) {
+                nextIndex = idx;
+                break;
+              }
+            }
+            if (nextIndex >= 0 && nextIndex < allItems.length) {
+              onNavigate && onNavigate(allItems[nextIndex]);
+            }
+          }
+        }
+      }
+    }
+
+    if (!open) {
+      interactedOutside.current = false;
+      return null;
+    }
+
+    return (
+      <MenuListProvider
+        value={{
+          navigationItem,
+          onNavigate,
+        }}
+      >
+        <Comp
+          ref={assignMultipleRefs(forwardedRef, menuListRef)}
+          as={innerAs}
+          id={menuListIdRef.current}
+          role="menu"
+          aria-labelledby={buttonRef.current?.id}
+          data-menu-list=""
+          tabIndex="-1"
+          onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}
+          {...otherProps}
+        />
+      </MenuListProvider>
+    );
+  }
+);

package/src/Menu/MenuPopover.tsx

@@ -1,35 +1,35 @@
-import type { ElementType, ReactNode } from 'react';
-import { forwardRef } from 'react';
-
-import type { PopperProps } from '../Popper';
-import { Popper } from '../Popper';
-import { useMenuContext } from './context';
-
-export interface MenuPopoverProps extends Omit<PopperProps, 'anchorEl'> {
-  as?: ElementType<any>;
-  innerAs?: ElementType<any>;
-  children?: ReactNode;
-}
-
-export const MenuPopover = forwardRef<HTMLDivElement, MenuPopoverProps>(
-  function MenuPopover(props, forwardedRef) {
-    const { as = 'div', innerAs, ...otherProps } = props;
-    const { buttonRef, open, offsetFn, isContextMenu } = useMenuContext();
-
-    if (!open) {
-      return null;
-    }
-
-    return (
-      <Popper
-        as={as}
-        innerAs={innerAs}
-        ref={forwardedRef}
-        anchorEl={buttonRef}
-        offsetFn={offsetFn}
-        placement={isContextMenu.current ? 'bottom-start' : undefined}
-        {...otherProps}
-      />
-    );
-  }
-);
+import type { ElementType, ReactNode } from 'react';
+import { forwardRef } from 'react';
+
+import type { PopperProps } from '../Popper';
+import { Popper } from '../Popper';
+import { useMenuContext } from './context';
+
+export interface MenuPopoverProps extends Omit<PopperProps, 'anchorEl'> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
+}
+
+export const MenuPopover = forwardRef<HTMLDivElement, MenuPopoverProps>(
+  function MenuPopover(props, forwardedRef) {
+    const { as = 'div', innerAs, ...otherProps } = props;
+    const { buttonRef, open, offsetFn, isContextMenu } = useMenuContext();
+
+    if (!open) {
+      return null;
+    }
+
+    return (
+      <Popper
+        as={as}
+        innerAs={innerAs}
+        ref={forwardedRef}
+        anchorEl={buttonRef}
+        offsetFn={offsetFn}
+        placement={isContextMenu.current ? 'bottom-start' : undefined}
+        {...otherProps}
+      />
+    );
+  }
+);

package/src/Menu/context.ts

@@ -1,44 +1,44 @@
-import type { OffsetsFunction } from '@popperjs/core/lib/modifiers/offset';
-import type {
-  Dispatch,
-  KeyboardEvent,
-  MouseEvent,
-  MutableRefObject,
-  PointerEvent,
-  SetStateAction,
-} from 'react';
-import { createContext, useContext } from 'react';
-
-export type ItemObject = { text: string; value: any; id: string | undefined };
-
-// MenuRoot
-export interface MenuContextProps {
-  buttonRef: MutableRefObject<HTMLElement | null>;
-  menuListIdRef: MutableRefObject<undefined | string>;
-  openWithArrowKeyRef: MutableRefObject<string | null>;
-  onChange: (
-    e:
-      | KeyboardEvent<HTMLElement>
-      | MouseEvent<HTMLElement>
-      | PointerEvent<HTMLElement>,
-    isOpen: boolean
-  ) => void;
-  open: boolean;
-  offsetFn: OffsetsFunction | undefined;
-  setOffsetFn: Dispatch<SetStateAction<OffsetsFunction | undefined>>;
-  isContextMenu: MutableRefObject<boolean>;
-}
-
-const menuContext = createContext<MenuContextProps>(null as any);
-export const { Provider: MenuProvider } = menuContext;
-export const useMenuContext = () => useContext(menuContext);
-
-// MenuList
-export interface MenuListContextProps {
-  navigationItem: HTMLElement | undefined;
-  onNavigate: undefined | ((idx: HTMLElement) => void);
-}
-
-const menuListContext = createContext<MenuListContextProps>(null as any);
-export const MenuListProvider = menuListContext.Provider;
-export const useMenuListContext = () => useContext(menuListContext);
+import type { OffsetsFunction } from '@popperjs/core/lib/modifiers/offset';
+import type {
+  Dispatch,
+  KeyboardEvent,
+  MouseEvent,
+  MutableRefObject,
+  PointerEvent,
+  SetStateAction,
+} from 'react';
+import { createContext, useContext } from 'react';
+
+export type ItemObject = { text: string; value: any; id: string | undefined };
+
+// MenuRoot
+export interface MenuContextProps {
+  buttonRef: MutableRefObject<HTMLElement | null>;
+  menuListIdRef: MutableRefObject<undefined | string>;
+  openWithArrowKeyRef: MutableRefObject<string | null>;
+  onChange: (
+    e:
+      | KeyboardEvent<HTMLElement>
+      | MouseEvent<HTMLElement>
+      | PointerEvent<HTMLElement>,
+    isOpen: boolean
+  ) => void;
+  open: boolean;
+  offsetFn: OffsetsFunction | undefined;
+  setOffsetFn: Dispatch<SetStateAction<OffsetsFunction | undefined>>;
+  isContextMenu: MutableRefObject<boolean>;
+}
+
+const menuContext = createContext<MenuContextProps>(null as any);
+export const { Provider: MenuProvider } = menuContext;
+export const useMenuContext = () => useContext(menuContext);
+
+// MenuList
+export interface MenuListContextProps {
+  navigationItem: HTMLElement | undefined;
+  onNavigate: undefined | ((idx: HTMLElement) => void);
+}
+
+const menuListContext = createContext<MenuListContextProps>(null as any);
+export const MenuListProvider = menuListContext.Provider;
+export const useMenuListContext = () => useContext(menuListContext);