@basic-ui/core 0.0.45 → 0.0.47

package/src/Menu/MenuComplex.story.tsx

@@ -0,0 +1,58 @@
+import type { MouseEvent, ReactNode } from 'react';
+
+import { Menu, MenuButton, MenuItem, MenuList, MenuPopover } from '.';
+import { countryList } from './fixtures/countryList';
+import './styles.css';
+
+export default {
+  title: 'components/Menu/Complex',
+};
+
+const Wrapper = ({ children }: { children: ReactNode }) => {
+  const handleLinkClick = (e: MouseEvent<HTMLAnchorElement>) => {
+    console.log('Clicked ' + e.currentTarget.innerText);
+    e.preventDefault();
+  };
+
+  return (
+    <div
+      style={{
+        boxSizing: 'border-box',
+        display: 'flex',
+        alignItems: 'flex-start',
+        justifyContent: 'space-around',
+        width: '100%',
+        position: 'relative',
+      }}
+    >
+      <a href="#" onClick={handleLinkClick}>
+        Link 1
+      </a>
+      <div style={{ minHeight: 120, width: 100 }}>{children}</div>
+      <a href="#" onClick={handleLinkClick}>
+        Link 2
+      </a>
+    </div>
+  );
+};
+
+const MenuControlled = () => {
+  return (
+    <Menu>
+      <MenuButton>Click me</MenuButton>
+      <MenuPopover>
+        <MenuList>
+          {countryList.map((country) => (
+            <MenuItem key={country}>{country}</MenuItem>
+          ))}
+        </MenuList>
+      </MenuPopover>
+    </Menu>
+  );
+};
+
+export const CountryList = () => (
+  <Wrapper>
+    <MenuControlled />
+  </Wrapper>
+);

package/src/Menu/MenuItem.tsx

@@ -59,7 +59,6 @@ export const MenuItem = forwardRef<any, MenuItemProps>(function MenuItem(
   const handleKeyDown: KeyboardEventHandler<HTMLLIElement> = (e) => {
     switch (e.key) {
       case 'Enter':
-      case ' ':
         if (!disabled) {
           handleSelect(e);
         }

package/src/Menu/MenuList.tsx

@@ -33,8 +33,17 @@ export const MenuList = forwardRef<HTMLUListElement, MenuListProps>(
       ...otherProps
     } = props;
 
-    const { menuListIdRef, buttonRef, onChange, openWithArrowKeyRef, open } =
-      useMenuContext();
+    const itemSearchStr = useRef('');
+    const itemSearchClearTimeout = useRef<ReturnType<typeof setTimeout>>();
+
+    const {
+      menuListIdRef,
+      buttonRef,
+      onChange,
+      openWithArrowKeyRef,
+      open,
+      isContextMenu,
+    } = useMenuContext();
 
     const [navigationItem, setNavigationItem] = useState<
       HTMLElement | undefined
@@ -89,10 +98,12 @@ export const MenuList = forwardRef<HTMLUListElement, MenuListProps>(
     useOnClickOutside(
       menuListRef,
       (e) => {
+        console.log(isContextMenu.current);
         if (
-          e.target instanceof HTMLElement &&
-          e.target !== buttonRef.current &&
-          !buttonRef.current?.contains(e.target)
+          isContextMenu.current ||
+          (e.target instanceof HTMLElement &&
+            e.target !== buttonRef.current &&
+            !buttonRef.current?.contains(e.target))
         ) {
           onChange && onChange(e as any, false);
         }
@@ -107,6 +118,7 @@ export const MenuList = forwardRef<HTMLUListElement, MenuListProps>(
         case 'Tab': {
           onChange && onChange(e, false);
           e.preventDefault(); // prevents focusing on next element, because we will be handling it
+          itemSearchStr.current = '';
           buttonRef.current?.focus();
           break;
         }
@@ -115,6 +127,7 @@ export const MenuList = forwardRef<HTMLUListElement, MenuListProps>(
         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) {
@@ -141,23 +154,39 @@ export const MenuList = forwardRef<HTMLUListElement, MenuListProps>(
           onNavigate && onNavigate(allItems[nextIndex]);
           break;
         default: {
-          if (e.key.length === 1) {
+          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 firstLetter = e.key.toLowerCase();
+            const searchStr = itemSearchStr.current;
             let nextIndex = -1;
-            for (let i = 1; i < allItems.length; i++) {
+            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.charAt(0) === firstLetter) {
+              if (domText.length > 0 && domText.startsWith(searchStr)) {
                 nextIndex = idx;
                 break;
               }

package/src/Menu/MenuPopover.tsx

@@ -14,14 +14,21 @@ export interface MenuPopoverProps extends Omit<PopperProps, 'anchorEl'> {
 export const MenuPopover = forwardRef<HTMLDivElement, MenuPopoverProps>(
   function MenuPopover(props, forwardedRef) {
     const { as = 'div', ...otherProps } = props;
-    const { buttonRef, open } = useMenuContext();
+    const { buttonRef, open, offsetFn, isContextMenu } = useMenuContext();
 
     if (!open) {
       return null;
     }
 
     return (
-      <Popper as={as} ref={forwardedRef} anchorEl={buttonRef} {...otherProps} />
+      <Popper
+        as={as}
+        ref={forwardedRef}
+        anchorEl={buttonRef}
+        offsetFn={offsetFn}
+        placement={isContextMenu.current ? 'bottom-start' : undefined}
+        {...otherProps}
+      />
     );
   }
 );

package/src/Menu/context.ts

@@ -1,3 +1,4 @@
+import type { OffsetsFunction } from '@popperjs/core/lib/modifiers/offset';
 import type {
   KeyboardEvent,
   MouseEvent,
@@ -10,7 +11,7 @@ export type ItemObject = { text: string; value: any; id: string | undefined };
 
 // MenuRoot
 export interface MenuContextProps {
-  buttonRef: MutableRefObject<HTMLButtonElement | null>;
+  buttonRef: MutableRefObject<HTMLElement | null>;
   menuListIdRef: MutableRefObject<undefined | string>;
   openWithArrowKeyRef: MutableRefObject<string | null>;
   onChange?: (
@@ -21,6 +22,9 @@ export interface MenuContextProps {
     isOpen: boolean
   ) => void;
   open: boolean;
+  offset: MutableRefObject<[number, number]>;
+  offsetFn: OffsetsFunction;
+  isContextMenu: MutableRefObject<boolean>;
 }
 
 const menuContext = createContext<MenuContextProps>(null as any);

package/src/Menu/fixtures/countryList.ts

@@ -0,0 +1,198 @@
+export const countryList = [
+  'Afghanistan',
+  'Albania',
+  'Algeria',
+  'Andorra',
+  'Angola',
+  'Antigua and Barbuda',
+  'Argentina',
+  'Armenia',
+  'Australia',
+  'Austria',
+  'Azerbaijan',
+  'Bahamas',
+  'Bahrain',
+  'Bangladesh',
+  'Barbados',
+  'Belarus',
+  'Belgium',
+  'Belize',
+  'Benin',
+  'Bhutan',
+  'Bolivia',
+  'Bosnia and Herzegovina',
+  'Botswana',
+  'Brazil',
+  'Brunei',
+  'Bulgaria',
+  'Burkina Faso',
+  'Burundi',
+  "Côte d'Ivoire",
+  'Cabo Verde',
+  'Cambodia',
+  'Cameroon',
+  'Canada',
+  'Central African Republic',
+  'Central American Republic',
+  'Chad',
+  'Chile',
+  'China',
+  'Colombia',
+  'Comoros',
+  'Congo (Congo-Brazzaville)',
+  'Costa Rica',
+  'Croatia',
+  'Cuba',
+  'Cyprus',
+  'Czechia (Czech Republic)',
+  'Democratic Republic of the Congo',
+  'Denmark',
+  'Djibouti',
+  'Dominica',
+  'Dominican Republic',
+  'Ecuador',
+  'Egypt',
+  'El Salvador',
+  'Equatorial Guinea',
+  'Eritrea',
+  'Estonia',
+  'Eswatini (fmr. "Swaziland")',
+  'Ethiopia',
+  'Fiji',
+  'Finland',
+  'France',
+  'Gabon',
+  'Gambia',
+  'Georgia',
+  'Germany',
+  'Ghana',
+  'Greece',
+  'Grenada',
+  'Guatemala',
+  'Guinea',
+  'Guinea-Bissau',
+  'Guyana',
+  'Haiti',
+  'Holy See',
+  'Honduras',
+  'Hungary',
+  'Iceland',
+  'India',
+  'Indonesia',
+  'Iran',
+  'Iraq',
+  'Ireland',
+  'Israel',
+  'Italy',
+  'Jamaica',
+  'Japan',
+  'Jordan',
+  'Kazakhstan',
+  'Kenya',
+  'Kiribati',
+  'Kuwait',
+  'Kyrgyzstan',
+  'Laos',
+  'Latvia',
+  'Lebanon',
+  'Lesotho',
+  'Liberia',
+  'Libya',
+  'Liechtenstein',
+  'Lithuania',
+  'Luxembourg',
+  'Madagascar',
+  'Malawi',
+  'Malaysia',
+  'Maldives',
+  'Mali',
+  'Malta',
+  'Marshall Islands',
+  'Mauritania',
+  'Mauritius',
+  'Mexico',
+  'Micronesia',
+  'Moldova',
+  'Monaco',
+  'Mongolia',
+  'Montenegro',
+  'Morocco',
+  'Mozambique',
+  'Myanmar (formerly Burma)',
+  'Namibia',
+  'Nauru',
+  'Nepal',
+  'Netherlands',
+  'New Zealand',
+  'Nicaragua',
+  'Niger',
+  'Nigeria',
+  'North Korea',
+  'North Macedonia',
+  'Norway',
+  'Oman',
+  'Pakistan',
+  'Palau',
+  'Palestine State',
+  'Panama',
+  'Papua New Guinea',
+  'Paraguay',
+  'Peru',
+  'Philippines',
+  'Poland',
+  'Portugal',
+  'Qatar',
+  'Romania',
+  'Russia',
+  'Rwanda',
+  'Saint Kitts and Nevis',
+  'Saint Lucia',
+  'Saint Vincent and the Grenadines',
+  'Samoa',
+  'San Marino',
+  'Sao Tome and Principe',
+  'Saudi Arabia',
+  'Senegal',
+  'Serbia',
+  'Seychelles',
+  'Sierra Leone',
+  'Singapore',
+  'Slovakia',
+  'Slovenia',
+  'Solomon Islands',
+  'Somalia',
+  'South Africa',
+  'South Korea',
+  'South Sudan',
+  'Spain',
+  'Sri Lanka',
+  'Sudan',
+  'Suriname',
+  'Sweden',
+  'Switzerland',
+  'Syria',
+  'Tajikistan',
+  'Tanzania',
+  'Thailand',
+  'Timor-Leste',
+  'Togo',
+  'Tonga',
+  'Trinidad and Tobago',
+  'Tunisia',
+  'Turkey',
+  'Turkmenistan',
+  'Tuvalu',
+  'Uganda',
+  'Ukraine',
+  'United Arab Emirates',
+  'United Kingdom',
+  'United States of America',
+  'Uruguay',
+  'Uzbekistan',
+  'Vanuatu',
+  'Venezuela',
+  'Vietnam',
+  'Yemen',
+  'Zambia',
+  'Zimbabwe',
+];

package/src/Menu/index.ts

@@ -1,5 +1,6 @@
 export * from './Menu';
 export * from './MenuButton';
+export * from './ContextMenuTrigger';
 export * from './MenuItem';
 export * from './MenuList';
 export * from './MenuPopover';

package/src/hooks/useControlledState.ts

@@ -18,11 +18,17 @@ export function useControlledState<
 ): [V, CustomEventHandler<E, H>] {
   const isControlled = valueProp !== undefined;
   const wasControlled = useRef(isControlled);
+  const hasWarned = useRef(false);
   const [valueState, setValueState] = useState<V>(defaultValue);
 
   if (isControlled) {
-    if (wasControlled.current && process.env.NODE_ENV !== 'production') {
+    if (
+      wasControlled.current &&
+      process.env.NODE_ENV !== 'production' &&
+      !hasWarned.current
+    ) {
       console.warn('Trying to change from controlled to uncontrolled.');
+      hasWarned.current = true;
     }
     return [
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion