@basic-ui/core 0.0.50 → 0.0.52

package/src/Menu/Menu.tsx

@@ -1,83 +1,83 @@
-import type {
-  KeyboardEvent,
-  MouseEvent,
-  PointerEvent,
-  ReactNode,
-  ElementType,
-} from 'react';
-import { useState, forwardRef, useRef, Fragment, useId } from 'react';
-
-import type { MenuContextProps } from './context';
-import { MenuProvider } from './context';
-import { useControlledState } from '../hooks';
-import type { OffsetsFunction } from '../Popper';
-
-export interface MenuProps {
-  as?: ElementType<any>;
-  innerAs?: ElementType<any>;
-  children?: ReactNode;
-  onChange?: (
-    e:
-      | KeyboardEvent<HTMLElement>
-      | MouseEvent<HTMLElement>
-      | PointerEvent<HTMLElement>,
-    isOpen: boolean
-  ) => void;
-  open?: boolean;
-  defaultOpen?: boolean;
-}
-
-export const Menu = forwardRef<HTMLDivElement, MenuProps>(function Menu(
-  props,
-  forwardedRef
-) {
-  const {
-    as: Comp = Fragment,
-    innerAs,
-    open: openProp,
-    defaultOpen = false,
-    onChange: onChangeProp,
-    ...otherProps
-  } = props;
-  const menuListIdRef = useRef<string>();
-  const openWithArrowKeyRef = useRef<'ArrowUp' | 'ArrowDown' | null>(null);
-  const buttonRef = useRef<HTMLButtonElement>(null);
-  const [open, onChange] = useControlledState(
-    openProp,
-    onChangeProp,
-    defaultOpen,
-    (setState) => (e, isOpen) => {
-      setState(isOpen);
-    }
-  );
-  const [offsetFn, setOffsetFn] = useState<OffsetsFunction | undefined>(
-    undefined
-  );
-  menuListIdRef.current = useId();
-  const isContextMenu = useRef(false);
-
-  if (!open && offsetFn) {
-    setOffsetFn(undefined);
-  }
-
-  const value: MenuContextProps = {
-    menuListIdRef,
-    openWithArrowKeyRef,
-    open,
-    onChange,
-    buttonRef,
-    offsetFn,
-    setOffsetFn,
-    isContextMenu,
-  };
-
-  return (
-    <MenuProvider value={value}>
-      <Comp
-        {...(Comp !== Fragment ? { as: innerAs } : {})}
-        ref={forwardedRef}
-        {...otherProps}
-      />
-    </MenuProvider>
-  );
-});
+import type {
+  KeyboardEvent,
+  MouseEvent,
+  PointerEvent,
+  ReactNode,
+  ElementType,
+} from 'react';
+import { useState, forwardRef, useRef, Fragment, useId } from 'react';
+
+import type { MenuContextProps } from './context';
+import { MenuProvider } from './context';
+import { useControlledState } from '../hooks';
+import type { OffsetsFunction } from '../Popper';
+
+export interface MenuProps {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
+  onChange?: (
+    e:
+      | KeyboardEvent<HTMLElement>
+      | MouseEvent<HTMLElement>
+      | PointerEvent<HTMLElement>,
+    isOpen: boolean
+  ) => void;
+  open?: boolean;
+  defaultOpen?: boolean;
+}
+
+export const Menu = forwardRef<HTMLDivElement, MenuProps>(function Menu(
+  props,
+  forwardedRef
+) {
+  const {
+    as: Comp = Fragment,
+    innerAs,
+    open: openProp,
+    defaultOpen = false,
+    onChange: onChangeProp,
+    ...otherProps
+  } = props;
+  const menuListIdRef = useRef<string>();
+  const openWithArrowKeyRef = useRef<'ArrowUp' | 'ArrowDown' | null>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const [open, onChange] = useControlledState(
+    openProp,
+    onChangeProp,
+    defaultOpen,
+    (setState) => (e, isOpen) => {
+      setState(isOpen);
+    }
+  );
+  const [offsetFn, setOffsetFn] = useState<OffsetsFunction | undefined>(
+    undefined
+  );
+  menuListIdRef.current = useId();
+  const isContextMenu = useRef(false);
+
+  if (!open && offsetFn) {
+    setOffsetFn(undefined);
+  }
+
+  const value: MenuContextProps = {
+    menuListIdRef,
+    openWithArrowKeyRef,
+    open,
+    onChange,
+    buttonRef,
+    offsetFn,
+    setOffsetFn,
+    isContextMenu,
+  };
+
+  return (
+    <MenuProvider value={value}>
+      <Comp
+        {...(Comp !== Fragment ? { as: innerAs } : {})}
+        ref={forwardedRef}
+        {...otherProps}
+      />
+    </MenuProvider>
+  );
+});

package/src/Menu/MenuButton.tsx

@@ -1,83 +1,83 @@
-import type {
-  ButtonHTMLAttributes,
-  ElementType,
-  KeyboardEvent,
-  MouseEvent,
-} from 'react';
-import { forwardRef, useId } from 'react';
-
-import { useMenuContext } from './context';
-import { wrapEvent } from '../utils/wrap-event';
-
-export type MenuButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
-  as?: ElementType<any>;
-  innerAs?: ElementType<any>;
-  onClick?: (
-    e: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>
-  ) => void;
-};
-
-export const MenuButton = forwardRef<HTMLButtonElement, MenuButtonProps>(
-  function MenuButton(props, forwardedRef) {
-    const {
-      as: Comp = 'button',
-      innerAs,
-      id: preferredId,
-      onClick,
-      onKeyDown,
-      disabled,
-      ...otherProps
-    } = props;
-    const { menuListIdRef, openWithArrowKeyRef, open, buttonRef, onChange } =
-      useMenuContext();
-
-    const buttonIdGenerated = useId();
-    const buttonId = preferredId || buttonIdGenerated;
-
-    const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {
-      if (disabled) {
-        return;
-      }
-      buttonRef.current = e.currentTarget;
-
-      const isArrowKey = () => ['ArrowUp', 'ArrowDown'].includes(e.key);
-      const isEnterKey = () => [' ', 'Enter'].includes(e.key);
-
-      const openedWithArrow = isArrowKey();
-      if (openedWithArrow || isEnterKey()) {
-        if (openedWithArrow) {
-          // Used to make it open at the end or begining of the list
-          openWithArrowKeyRef.current = e.key;
-        }
-        onChange(e, true);
-        e.preventDefault();
-      }
-    };
-
-    const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
-      if (disabled) {
-        return;
-      }
-      buttonRef.current = e.currentTarget;
-      onChange(e, !open);
-    };
-
-    return (
-      <Comp
-        ref={forwardedRef}
-        as={innerAs}
-        id={buttonId}
-        role="button"
-        type="button"
-        aria-haspopup={true}
-        aria-controls={menuListIdRef.current}
-        aria-expanded={open ? true : undefined}
-        data-menu-button=""
-        onClick={wrapEvent(onClick, handleClick)}
-        onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}
-        disabled={disabled}
-        {...otherProps}
-      />
-    );
-  }
-);
+import type {
+  ButtonHTMLAttributes,
+  ElementType,
+  KeyboardEvent,
+  MouseEvent,
+} from 'react';
+import { forwardRef, useId } from 'react';
+
+import { useMenuContext } from './context';
+import { wrapEvent } from '../utils/wrap-event';
+
+export type MenuButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  onClick?: (
+    e: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>
+  ) => void;
+};
+
+export const MenuButton = forwardRef<HTMLButtonElement, MenuButtonProps>(
+  function MenuButton(props, forwardedRef) {
+    const {
+      as: Comp = 'button',
+      innerAs,
+      id: preferredId,
+      onClick,
+      onKeyDown,
+      disabled,
+      ...otherProps
+    } = props;
+    const { menuListIdRef, openWithArrowKeyRef, open, buttonRef, onChange } =
+      useMenuContext();
+
+    const buttonIdGenerated = useId();
+    const buttonId = preferredId || buttonIdGenerated;
+
+    const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {
+      if (disabled) {
+        return;
+      }
+      buttonRef.current = e.currentTarget;
+
+      const isArrowKey = () => ['ArrowUp', 'ArrowDown'].includes(e.key);
+      const isEnterKey = () => [' ', 'Enter'].includes(e.key);
+
+      const openedWithArrow = isArrowKey();
+      if (openedWithArrow || isEnterKey()) {
+        if (openedWithArrow) {
+          // Used to make it open at the end or begining of the list
+          openWithArrowKeyRef.current = e.key;
+        }
+        onChange(e, true);
+        e.preventDefault();
+      }
+    };
+
+    const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
+      if (disabled) {
+        return;
+      }
+      buttonRef.current = e.currentTarget;
+      onChange(e, !open);
+    };
+
+    return (
+      <Comp
+        ref={forwardedRef}
+        as={innerAs}
+        id={buttonId}
+        role="button"
+        type="button"
+        aria-haspopup={true}
+        aria-controls={menuListIdRef.current}
+        aria-expanded={open ? true : undefined}
+        data-menu-button=""
+        onClick={wrapEvent(onClick, handleClick)}
+        onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}
+        disabled={disabled}
+        {...otherProps}
+      />
+    );
+  }
+);

package/src/Menu/MenuComplex.story.tsx

@@ -1,58 +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>
-);
+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

@@ -1,87 +1,88 @@
-import type {
-  LiHTMLAttributes,
-  ElementType,
-  MouseEvent,
-  KeyboardEvent,
-  KeyboardEventHandler,
-} from 'react';
-import { forwardRef, useRef, useId } from 'react';
-
-import { useMenuContext, useMenuListContext } from './context';
-import { assignMultipleRefs } from '../utils/assign-ref';
-import { wrapEvent } from '../utils';
-
-export interface MenuItemProps extends LiHTMLAttributes<HTMLLIElement> {
-  as?: ElementType<any>;
-  innerAs?: ElementType<any>;
-  onSelect?: (
-    e: MouseEvent<HTMLLIElement> | KeyboardEvent<HTMLLIElement>
-  ) => void;
-  disabled?: boolean;
-}
-
-export const MenuItem = forwardRef<any, MenuItemProps>(function MenuItem(
-  props,
-  forwardedRef
-) {
-  const {
-    as: Comp = 'li',
-    innerAs,
-    disabled,
-    onSelect,
-    onClick,
-    onKeyDown,
-    ...otherProps
-  } = props;
-  const { onChange, buttonRef } = useMenuContext();
-  const { navigationItem, onNavigate } = useMenuListContext();
-  const ref = useRef<HTMLLIElement>();
-  const itemId = useId();
-
-  const isActive = ref.current && ref.current === navigationItem;
-
-  const handleSelect = wrapEvent(
-    onSelect,
-    (e: KeyboardEvent<HTMLLIElement> | MouseEvent<HTMLLIElement>) => {
-      onChange(e, false);
-      buttonRef.current?.focus();
-      e.preventDefault();
-    }
-  );
-
-  const handleClick = (e: MouseEvent<HTMLLIElement>) => {
-    if (!disabled) {
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      onNavigate && onNavigate(ref.current!);
-      handleSelect(e);
-    }
-  };
-
-  const handleKeyDown: KeyboardEventHandler<HTMLLIElement> = (e) => {
-    switch (e.key) {
-      case 'Enter':
-        if (!disabled) {
-          handleSelect(e);
-        }
-        break;
-    }
-  };
-
-  return (
-    <Comp
-      ref={assignMultipleRefs(ref, forwardedRef)}
-      as={innerAs}
-      id={disabled ? undefined : itemId}
-      data-menu-item=""
-      data-highlighted={isActive ? '' : undefined}
-      role="menuitem"
-      onClick={wrapEvent(onClick, handleClick)}
-      tabIndex={disabled ? -1 : 0}
-      onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}
-      data-disabled={disabled ? '' : undefined}
-      aria-disabled={disabled ? '' : undefined}
-      disabled={disabled}
-      {...otherProps}
-    />
-  );
-});
+import type {
+  LiHTMLAttributes,
+  ElementType,
+  MouseEvent,
+  KeyboardEvent,
+  KeyboardEventHandler,
+} from 'react';
+import { forwardRef, useRef, useId } from 'react';
+
+import { useMenuContext, useMenuListContext } from './context';
+import { assignMultipleRefs } from '../utils/assign-ref';
+import { wrapEvent } from '../utils';
+
+export interface MenuItemProps extends LiHTMLAttributes<HTMLLIElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  onSelect?: (
+    e: MouseEvent<HTMLLIElement> | KeyboardEvent<HTMLLIElement>
+  ) => void;
+  disabled?: boolean;
+}
+
+export const MenuItem = forwardRef<any, MenuItemProps>(function MenuItem(
+  props,
+  forwardedRef
+) {
+  const {
+    as: Comp = 'li',
+    innerAs,
+    disabled,
+    onSelect,
+    onClick,
+    onKeyDown,
+    ...otherProps
+  } = props;
+  const { onChange, buttonRef } = useMenuContext();
+  const { navigationItem, onNavigate } = useMenuListContext();
+  const ref = useRef<HTMLLIElement>();
+  const itemId = useId();
+
+  const isActive = ref.current && ref.current === navigationItem;
+
+  const handleSelect = wrapEvent(
+    onSelect,
+    (e: KeyboardEvent<HTMLLIElement> | MouseEvent<HTMLLIElement>) => {
+      onChange(e, false);
+      buttonRef.current?.focus();
+      e.preventDefault();
+    }
+  );
+
+  const handleClick = (e: MouseEvent<HTMLLIElement>) => {
+    if (!disabled) {
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      onNavigate && onNavigate(ref.current!);
+      handleSelect(e);
+    }
+  };
+
+  const handleKeyDown: KeyboardEventHandler<HTMLLIElement> = (e) => {
+    switch (e.key) {
+      case ' ':
+      case 'Enter':
+        if (!disabled) {
+          handleSelect(e);
+        }
+        break;
+    }
+  };
+
+  return (
+    <Comp
+      ref={assignMultipleRefs(ref, forwardedRef)}
+      as={innerAs}
+      id={disabled ? undefined : itemId}
+      data-menu-item=""
+      data-highlighted={isActive ? '' : undefined}
+      role="menuitem"
+      onClick={wrapEvent(onClick, handleClick)}
+      tabIndex={disabled ? -1 : 0}
+      onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}
+      data-disabled={disabled ? '' : undefined}
+      aria-disabled={disabled ? '' : undefined}
+      disabled={disabled}
+      {...otherProps}
+    />
+  );
+});