@basic-ui/core 0.0.60 → 0.0.61

package/src/MenuBar/MenuBar.tsx

@@ -0,0 +1,236 @@
+import type { ElementType, HTMLAttributes } from 'react';
+import { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
+
+import type {
+  MenuBarContextProps,
+  MenuBarOrientation,
+  MenuBarRegisteredMenu,
+} from './context';
+import { MenuBarProvider } from './context';
+
+export interface MenuBarProps extends HTMLAttributes<HTMLDivElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  disabled?: boolean;
+  loopFocus?: boolean;
+  orientation?: MenuBarOrientation;
+}
+
+type RegisteredButton = {
+  id: string;
+  element: HTMLElement;
+  disabled: boolean;
+};
+
+export const MenuBar = forwardRef<HTMLDivElement, MenuBarProps>(
+  function MenuBar(props, forwardedRef) {
+    const {
+      as: Comp = 'div',
+      innerAs,
+      disabled = false,
+      loopFocus = true,
+      orientation = 'horizontal',
+      ...otherProps
+    } = props;
+
+    const menusRef = useRef(new Map<string, MenuBarRegisteredMenu>());
+    const buttonsRef = useRef(new Map<string, RegisteredButton>());
+    const [activeMenuId, setActiveMenuId] = useState<string | null>(null);
+    const [openMenuIdState, setOpenMenuIdState] = useState<string | null>(null);
+
+    const getEnabledButtons = useCallback(() => {
+      if (disabled) {
+        return [];
+      }
+
+      return Array.from(buttonsRef.current.values()).filter(
+        (button) => !button.disabled && button.element.isConnected
+      );
+    }, [disabled]);
+
+    const syncActiveMenuId = useCallback(() => {
+      setActiveMenuId((currentId) => {
+        const current = currentId ? buttonsRef.current.get(currentId) : null;
+        if (current && !current.disabled && current.element.isConnected) {
+          return currentId;
+        }
+
+        return getEnabledButtons()[0]?.id ?? null;
+      });
+    }, [getEnabledButtons]);
+
+    const registerButton = useCallback<MenuBarContextProps['registerButton']>(
+      (id, element, buttonDisabled) => {
+        if (element) {
+          buttonsRef.current.set(id, {
+            id,
+            element,
+            disabled: buttonDisabled,
+          });
+        } else {
+          buttonsRef.current.delete(id);
+        }
+
+        syncActiveMenuId();
+      },
+      [syncActiveMenuId]
+    );
+
+    const registerMenu = useCallback<MenuBarContextProps['registerMenu']>(
+      (menu) => {
+        menusRef.current.set(menu.id, menu);
+
+        return () => {
+          menusRef.current.delete(menu.id);
+        };
+      },
+      []
+    );
+
+    const notifyMenuOpenChange = useCallback<
+      MenuBarContextProps['notifyMenuOpenChange']
+    >((id, isOpen) => {
+      setOpenMenuIdState((currentId) => {
+        if (isOpen) {
+          return id;
+        }
+
+        return currentId === id ? null : currentId;
+      });
+    }, []);
+
+    const focusMenu = useCallback((id: string) => {
+      const button = buttonsRef.current.get(id);
+      if (!button || button.disabled) {
+        return;
+      }
+
+      setActiveMenuId(id);
+      button.element.focus({ preventScroll: true });
+    }, []);
+
+    const openMenu = useCallback<MenuBarContextProps['openMenu']>(
+      (id, e, focusKey = null) => {
+        if (disabled) {
+          return;
+        }
+
+        if (openMenuIdState && openMenuIdState !== id) {
+          menusRef.current.get(openMenuIdState)?.onOpenChange(e, false);
+        }
+
+        const menu = menusRef.current.get(id);
+        if (!menu) {
+          return;
+        }
+
+        menu.openWithArrowKeyRef.current = focusKey;
+        menu.onOpenChange(e, true);
+        setActiveMenuId(id);
+        setOpenMenuIdState(id);
+      },
+      [disabled, openMenuIdState]
+    );
+
+    const closeMenu = useCallback<MenuBarContextProps['closeMenu']>((id, e) => {
+      menusRef.current.get(id)?.onOpenChange(e, false);
+      setOpenMenuIdState((currentId) => (currentId === id ? null : currentId));
+    }, []);
+
+    const moveFocus = useCallback<MenuBarContextProps['moveFocus']>(
+      (id, delta, e, options) => {
+        const buttons = getEnabledButtons();
+        if (buttons.length === 0) {
+          return;
+        }
+
+        const currentIndex = Math.max(
+          0,
+          buttons.findIndex((button) => button.id === id)
+        );
+        let nextIndex = currentIndex + delta;
+
+        if (loopFocus) {
+          nextIndex = (nextIndex + buttons.length) % buttons.length;
+        } else {
+          nextIndex = Math.max(0, Math.min(nextIndex, buttons.length - 1));
+        }
+
+        const nextButton = buttons[nextIndex];
+        if (!nextButton || nextButton.id === id) {
+          return;
+        }
+
+        focusMenu(nextButton.id);
+
+        if (options?.open) {
+          openMenu(nextButton.id, e, options.focusKey ?? 'ArrowDown');
+        }
+      },
+      [focusMenu, getEnabledButtons, loopFocus, openMenu]
+    );
+
+    const focusFirstMenu = useCallback(() => {
+      const firstButton = getEnabledButtons()[0];
+      if (firstButton) {
+        focusMenu(firstButton.id);
+      }
+    }, [focusMenu, getEnabledButtons]);
+
+    const focusLastMenu = useCallback(() => {
+      const buttons = getEnabledButtons();
+      const lastButton = buttons[buttons.length - 1];
+      if (lastButton) {
+        focusMenu(lastButton.id);
+      }
+    }, [focusMenu, getEnabledButtons]);
+
+    const value = useMemo<MenuBarContextProps>(
+      () => ({
+        activeMenuId,
+        disabled,
+        openMenuId: openMenuIdState,
+        orientation,
+        closeMenu,
+        focusFirstMenu,
+        focusLastMenu,
+        moveFocus,
+        notifyMenuOpenChange,
+        openMenu,
+        registerButton,
+        registerMenu,
+        setActiveMenuId,
+      }),
+      [
+        activeMenuId,
+        closeMenu,
+        disabled,
+        focusFirstMenu,
+        focusLastMenu,
+        moveFocus,
+        notifyMenuOpenChange,
+        openMenu,
+        openMenuIdState,
+        orientation,
+        registerButton,
+        registerMenu,
+      ]
+    );
+
+    return (
+      <MenuBarProvider value={value}>
+        <Comp
+          ref={forwardedRef}
+          as={innerAs}
+          role="menubar"
+          aria-orientation={orientation}
+          data-menubar=""
+          data-orientation={orientation}
+          data-disabled={disabled ? '' : undefined}
+          data-has-submenu-open={openMenuIdState ? '' : undefined}
+          {...otherProps}
+        />
+      </MenuBarProvider>
+    );
+  }
+);

package/src/MenuBar/context.ts

@@ -0,0 +1,46 @@
+import type { MutableRefObject } from 'react';
+import { createContext, useContext } from 'react';
+
+import type { MenuTriggerEvent } from '../Menu/context';
+
+export type MenuBarOrientation = 'horizontal' | 'vertical';
+
+export interface MenuBarRegisteredMenu {
+  id: string;
+  openWithArrowKeyRef: MutableRefObject<string | null>;
+  onOpenChange: (e: MenuTriggerEvent, isOpen: boolean) => void;
+}
+
+export interface MenuBarContextProps {
+  activeMenuId: string | null;
+  disabled: boolean;
+  openMenuId: string | null;
+  orientation: MenuBarOrientation;
+  closeMenu: (id: string, e: MenuTriggerEvent) => void;
+  focusFirstMenu: () => void;
+  focusLastMenu: () => void;
+  moveFocus: (
+    id: string,
+    delta: 1 | -1,
+    e: MenuTriggerEvent,
+    options?: { open?: boolean; focusKey?: 'ArrowUp' | 'ArrowDown' | null }
+  ) => void;
+  notifyMenuOpenChange: (id: string, isOpen: boolean) => void;
+  openMenu: (
+    id: string,
+    e: MenuTriggerEvent,
+    focusKey?: 'ArrowUp' | 'ArrowDown' | null
+  ) => void;
+  registerButton: (
+    id: string,
+    element: HTMLElement | null,
+    disabled: boolean
+  ) => void;
+  registerMenu: (menu: MenuBarRegisteredMenu) => () => void;
+  setActiveMenuId: (id: string | null) => void;
+}
+
+const menuBarContext = createContext<MenuBarContextProps | null>(null);
+
+export const { Provider: MenuBarProvider } = menuBarContext;
+export const useOptionalMenuBarContext = () => useContext(menuBarContext);

package/src/MenuBar/index.ts

@@ -0,0 +1 @@
+export * from './MenuBar';

package/src/MenuBar/styles.css

@@ -0,0 +1,78 @@
+.MenuBarStory-frame {
+  min-height: 360px;
+  padding: 48px;
+  font-family: sans-serif;
+}
+
+.MenuBarStory-frame [data-menubar] {
+  display: flex;
+  align-items: center;
+  width: max-content;
+  border: 1px solid #d8d8d8;
+  background: white;
+}
+
+.MenuBarStory-frame [data-menubar-menu-button] {
+  box-sizing: border-box;
+  height: 2rem;
+  margin: 0;
+  padding: 0 0.75rem;
+  border: 0;
+  background: transparent;
+  color: #1f1f1f;
+  font: inherit;
+  cursor: default;
+  user-select: none;
+}
+
+.MenuBarStory-frame [data-menubar-menu-button]:hover:not([disabled]),
+.MenuBarStory-frame [data-menubar-menu-button]:focus-visible,
+.MenuBarStory-frame [data-menubar-menu-button][aria-expanded='true'] {
+  background: #f0f0f0;
+}
+
+.MenuBarStory-frame [data-popper-placement] {
+  outline: 0;
+}
+
+.MenuBarStory-frame [data-menu-list] {
+  min-width: 180px;
+  margin: 0;
+  padding: 4px 0;
+  border: 1px solid #d8d8d8;
+  background: white;
+  color: #1f1f1f;
+  box-shadow: 4px 4px 0 rgb(0 0 0 / 10%);
+  list-style: none;
+}
+
+.MenuBarStory-frame [data-menu-item],
+.MenuBarStory-frame [data-menu-submenu-trigger] {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.5rem 1rem;
+  outline: 0;
+  cursor: default;
+  user-select: none;
+}
+
+.MenuBarStory-frame [data-menu-submenu-trigger] {
+  padding-right: 0.5rem;
+}
+
+.MenuBarStory-frame [data-menu-submenu-trigger] > span:first-child {
+  margin-right: auto;
+}
+
+.MenuBarStory-frame [data-menu-item][data-highlighted],
+.MenuBarStory-frame [data-menu-submenu-trigger][data-highlighted] {
+  background: #1f1f1f;
+  color: white;
+}
+
+.MenuBarStory-frame [role='separator'] {
+  height: 1px;
+  margin: 4px;
+  background: #d8d8d8;
+}

package/src/Slider/Slider.story.tsx

@@ -7,7 +7,7 @@ export default { title: 'components/Slider' };
 export function Basic() {
   return (
     <div>
-      <Slider id="gee-whiz">
+      <Slider id="gee-whiz" resetValue={50}>
         <SliderMarker value={10}>
           <span>10</span>
         </SliderMarker>

package/src/Slider/Slider.tsx

@@ -49,8 +49,9 @@ const noop = () => {
 type SliderOrientation = 'horizontal' | 'vertical';
 type SliderHandleAlignment = 'center' | 'contain';
 
-const [SliderProvider, useSliderContext] =
-  createContext<ISliderContext>('Slider');
+const _sliderCtx = createContext<ISliderContext>('Slider');
+const SliderProvider = _sliderCtx[0];
+export const useSliderContext = _sliderCtx[1];
 
 ////////////////////////////////////////////////////////////////////////////////
 
@@ -92,6 +93,10 @@ interface SliderProps {
    * @see Docs https://reach.tech/slider#slider-defaultvalue
    */
   defaultValue?: number;
+  /**
+   * Sets the value that the filled range starts from. Defaults to `min`.
+   */
+  fillOffset?: number;
   /**
    * @see Docs https://reach.tech/slider#slider-disabled
    */
@@ -102,6 +107,11 @@ interface SliderProps {
    * @see Docs https://reach.tech/slider#slider-value
    */
   value?: number;
+  /**
+   * When set, double clicking or double tapping the slider handle will reset
+   * the value.
+   */
+  resetValue?: number;
   /**
    * A function used to set a human-readable name for the slider.
    *
@@ -209,6 +219,8 @@ const SliderInput = forwardRef(function SliderInput(
     innerAs,
     defaultValue,
     disabled = false,
+    fillOffset,
+    resetValue,
     value: controlledValue,
     getAriaLabel,
     getAriaValueText,
@@ -257,6 +269,16 @@ const SliderInput = forwardRef(function SliderInput(
   );
   const value = clamp(_value, min, max);
   const trackPercent = valueToPercent(value, min, max);
+  const hasFillOffset = fillOffset !== undefined;
+  const fillOffsetPercent = valueToPercent(fillOffset ?? min, min, max);
+  const fillStartPercent = Math.min(trackPercent, fillOffsetPercent);
+  const fillEndPercent = Math.max(trackPercent, fillOffsetPercent);
+  const fillDirection =
+    !hasFillOffset || trackPercent === fillOffsetPercent
+      ? 'none'
+      : trackPercent > fillOffsetPercent
+        ? 'right'
+        : 'left';
   const isVertical = orientation === 'vertical';
 
   const handleSize = isVertical
@@ -343,7 +365,10 @@ const SliderInput = forwardRef(function SliderInput(
     ? getAriaValueText(value)
     : ariaValueTextProp;
 
-  const rangeStyle = { [isVertical ? 'height' : 'width']: `${trackPercent}%` };
+  const rangeStyle = {
+    [isVertical ? 'bottom' : 'left']: `${fillStartPercent}%`,
+    [isVertical ? 'height' : 'width']: `${fillEndPercent - fillStartPercent}%`,
+  };
 
   // Slide events!
   // We will try to use pointer events if they are supported to leverage
@@ -577,8 +602,14 @@ const SliderInput = forwardRef(function SliderInput(
       handlePosition={handlePosition}
       handleRef={handleRef}
       hasFocus={hasFocus}
+      fillDirection={fillDirection}
+      fillEndPercent={fillEndPercent}
+      fillStartPercent={fillStartPercent}
       onKeyDown={onKeyDown}
       setHasFocus={setHasFocus}
+      resetValue={
+        resetValue === undefined ? undefined : clamp(resetValue, min, max)
+      }
       sliderId={id}
       sliderMax={max}
       sliderMin={min}
@@ -609,6 +640,10 @@ const SliderInput = forwardRef(function SliderInput(
               min,
               value,
               ariaValueText,
+              fillEndPercent,
+              fillOffsetPercent,
+              fillStartPercent,
+              valuePercent: trackPercent,
             })
           : children}
         {name && (
@@ -700,7 +735,8 @@ const SliderRangeImpl = forwardRef(function SliderRange(
   { as: Comp = 'div', innerAs, children, style = {}, ...props },
   forwardedRef
 ) {
-  const { disabled, orientation, rangeStyle } = useSliderContext('SliderRange');
+  const { disabled, fillDirection, orientation, rangeStyle } =
+    useSliderContext('SliderRange');
   return (
     <Comp
       ref={forwardedRef}
@@ -710,6 +746,7 @@ const SliderRangeImpl = forwardRef(function SliderRange(
       {...props}
       data-reach-slider-range=""
       data-disabled={disabled ? '' : undefined}
+      data-fill-direction={fillDirection}
       data-orientation={orientation}
     />
   );
@@ -762,12 +799,92 @@ const SliderHandleImpl = forwardRef(function SliderHandle(
     isVertical,
     handleKeyDown,
     orientation,
+    resetValue,
     setHasFocus,
     sliderMin,
     sliderMax,
+    updateValue,
     value,
   } = useSliderContext('SliderHandle');
 
+  const lastTouchEndRef = useRef<{
+    time: number;
+    x: number;
+    y: number;
+  } | null>(null);
+  const resetHandleValue = useStableLayoutCallback(
+    (event: MouseEvent | TouchEvent) => {
+      if (!disabled && resetValue !== undefined) {
+        updateValue(event, resetValue);
+      }
+    }
+  );
+
+  const handleResetTouchEnd = useStableLayoutCallback((event: TouchEvent) => {
+    if (disabled || resetValue === undefined) {
+      return;
+    }
+
+    const touch = event.changedTouches[0];
+    if (!touch) {
+      return;
+    }
+
+    const now = event.timeStamp;
+    const lastTouchEnd = lastTouchEndRef.current;
+
+    if (
+      lastTouchEnd &&
+      now - lastTouchEnd.time <= 300 &&
+      Math.abs(touch.clientX - lastTouchEnd.x) <= 20 &&
+      Math.abs(touch.clientY - lastTouchEnd.y) <= 20
+    ) {
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+      lastTouchEndRef.current = null;
+      updateValue(event, resetValue);
+      event.preventDefault();
+      return;
+    }
+
+    lastTouchEndRef.current = {
+      time: now,
+      x: touch.clientX,
+      y: touch.clientY,
+    };
+  });
+
+  useEffect(() => {
+    const handle = handleRef.current;
+    if (!handle) {
+      return noop;
+    }
+
+    const mouseDownListener = (event: MouseEvent) => {
+      if (event.detail < 2) {
+        return;
+      }
+
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+      resetHandleValue(event);
+      event.preventDefault();
+    };
+    const doubleClickListener = (event: MouseEvent) => {
+      resetHandleValue(event);
+    };
+
+    handle.addEventListener('mousedown', mouseDownListener);
+    handle.addEventListener('dblclick', doubleClickListener);
+    handle.addEventListener('touchend', handleResetTouchEnd);
+
+    return () => {
+      handle.removeEventListener('mousedown', mouseDownListener);
+      handle.removeEventListener('dblclick', doubleClickListener);
+      handle.removeEventListener('touchend', handleResetTouchEnd);
+    };
+  }, [handleRef, handleResetTouchEnd, resetHandleValue]);
+
   return (
     <Comp
       // @ts-ignore
@@ -860,6 +977,8 @@ const SliderMarkerImpl = forwardRef(function SliderMarker(
     sliderMin,
     sliderMax,
     value: sliderValue,
+    fillEndPercent,
+    fillStartPercent,
   } = useSliderContext('SliderMarker');
 
   const inRange = value >= sliderMin && value <= sliderMax;
@@ -868,13 +987,18 @@ const SliderMarkerImpl = forwardRef(function SliderMarker(
     sliderMin,
     sliderMax
   )}%`;
+  const markerPercent = valueToPercent(value, sliderMin, sliderMax);
+  const fillState =
+    markerPercent >= fillStartPercent && markerPercent <= fillEndPercent
+      ? 'in-range'
+      : 'out-of-range';
 
   const state =
     value < sliderValue
       ? 'under-value'
       : value === sliderValue
-      ? 'at-value'
-      : 'over-value';
+        ? 'at-value'
+        : 'over-value';
 
   return inRange ? (
     <Comp
@@ -891,6 +1015,7 @@ const SliderMarkerImpl = forwardRef(function SliderMarker(
       {...props}
       data-reach-slider-marker=""
       data-disabled={disabled ? '' : undefined}
+      data-fill-state={fillState}
       data-orientation={orientation}
       data-state={state}
       data-value={value}
@@ -1041,7 +1166,11 @@ function useDimensions(ref: React.RefObject<HTMLElement | null>) {
 }
 
 function valueToPercent(value: number, min: number, max: number) {
-  return ((value - min) * 100) / (max - min);
+  if (max === min) {
+    return 0;
+  }
+
+  return Math.min(100, Math.max(0, ((value - min) * 100) / (max - min)));
 }
 
 ////////////////////////////////////////////////////////////////////////////////
@@ -1052,7 +1181,7 @@ type HandleRef = React.RefObject<HTMLDivElement | null>;
 type SliderRef = React.RefObject<HTMLDivElement | null>;
 type TouchIdRef = React.MutableRefObject<number | undefined>;
 
-type SomePointerEvent = TouchEvent | MouseEvent;
+type SomePointerEvent = TouchEvent | MouseEvent | PointerEvent;
 
 interface ISliderContext {
   ariaLabel: string | undefined;
@@ -1065,8 +1194,12 @@ interface ISliderContext {
   handlePosition: string;
   handleRef: HandleRef;
   hasFocus: boolean;
+  fillDirection: 'left' | 'none' | 'right';
+  fillEndPercent: number;
+  fillStartPercent: number;
   onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
   handleKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+  resetValue: number | undefined;
   setHasFocus: React.Dispatch<React.SetStateAction<boolean>>;
   sliderId: string | undefined;
   sliderMax: number;
@@ -1086,9 +1219,13 @@ type SliderChildrenRender = (props: {
   hasFocus?: boolean;
   id?: string | undefined;
   sliderId?: string | undefined;
+  fillEndPercent?: number;
+  fillOffsetPercent?: number;
+  fillStartPercent?: number;
   max?: number;
   min?: number;
   value?: number;
+  valuePercent?: number;
 }) => ReactElement;
 
 ////////////////////////////////////////////////////////////////////////////////

package/src/Toggle/Toggle.story.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { Toggle } from './Toggle';
+import './styles.css';
+
+export default {
+  title: 'components/Toggle',
+};
+
+export const Basic = () => (
+  <div className="toggle-demo">
+    <Toggle>Toggle me</Toggle>
+  </div>
+);
+
+export const Disabled = () => (
+  <div className="toggle-demo">
+    <Toggle disabled>Disabled Toggle</Toggle>
+  </div>
+);
+
+export const Controlled = () => {
+  const [pressed, setPressed] = React.useState(false);
+
+  return (
+    <div className="toggle-demo">
+      <Toggle pressed={pressed} onPressedChange={setPressed}>
+        {pressed ? 'ON' : 'OFF'}
+      </Toggle>
+      <p>State: {pressed ? 'Pressed' : 'Not Pressed'}</p>
+    </div>
+  );
+};
+
+export const Multiple = () => (
+  <div className="toggle-demo">
+    <div style={{ display: 'flex', gap: 8 }}>
+      <Toggle>Bold</Toggle>
+      <Toggle>Italic</Toggle>
+      <Toggle>Underline</Toggle>
+    </div>
+  </div>
+);