@basic-ui/material 1.0.0-alpha.52 → 1.0.0-alpha.54

package/src/Ripple/useRippleHandlers.ts

@@ -1,54 +1,54 @@
-import type { KeyboardEvent as ReactKeyboardEvent, PointerEvent } from 'react';
-import { useRef } from 'react';
-
-import type { RippleOptions } from './useRipple';
-import { useRipple } from './useRipple';
-
-const disabledHandler = () => {
-  /* When disabled, we don't wanna handle neither keyDown, nor pointerDown */
-};
-
-export function useRippleHandlers<T extends HTMLElement>(opts: RippleOptions) {
-  const { activate, deactivate, ...rest } = useRipple(opts);
-
-  // Pointer activation
-  const handlePointerUp = () => {
-    window.removeEventListener('pointerup', handlePointerUp);
-    window.removeEventListener('pointercancel', handlePointerUp);
-    deactivate();
-  };
-
-  const handlePointerDown = (e: PointerEvent<T>) => {
-    const rect = e.currentTarget.getBoundingClientRect();
-    activate(rect, e.clientX, e.clientY, opts.center);
-    window.addEventListener('pointerup', handlePointerUp);
-    window.addEventListener('pointercancel', handlePointerUp);
-  };
-
-  // Keyboard activation
-  const keyReleased = useRef(true);
-  const handleKeyUp = (e: KeyboardEvent) => {
-    if (e.key !== ' ') {
-      return;
-    }
-    window.removeEventListener('keyup', handleKeyUp);
-    keyReleased.current = true;
-    deactivate();
-  };
-
-  const handleKeyDown = (e: ReactKeyboardEvent<T>) => {
-    if (e.key !== ' ' || !keyReleased.current) {
-      return;
-    }
-    const rect = e.currentTarget.getBoundingClientRect();
-    keyReleased.current = false;
-    activate(rect, 0, 0, true);
-    window.addEventListener('keyup', handleKeyUp);
-  };
-
-  return {
-    handleKeyDown: opts.disabled ? disabledHandler : handleKeyDown,
-    handlePointerDown: opts.disabled ? disabledHandler : handlePointerDown,
-    ...rest,
-  };
-}
+import type { KeyboardEvent as ReactKeyboardEvent, PointerEvent } from 'react';
+import { useRef } from 'react';
+
+import type { RippleOptions } from './useRipple';
+import { useRipple } from './useRipple';
+
+const disabledHandler = () => {
+  /* When disabled, we don't wanna handle neither keyDown, nor pointerDown */
+};
+
+export function useRippleHandlers<T extends HTMLElement>(opts: RippleOptions) {
+  const { activate, deactivate, ...rest } = useRipple(opts);
+
+  // Pointer activation
+  const handlePointerUp = () => {
+    window.removeEventListener('pointerup', handlePointerUp);
+    window.removeEventListener('pointercancel', handlePointerUp);
+    deactivate();
+  };
+
+  const handlePointerDown = (e: PointerEvent<T>) => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    activate(rect, e.clientX, e.clientY, opts.center);
+    window.addEventListener('pointerup', handlePointerUp);
+    window.addEventListener('pointercancel', handlePointerUp);
+  };
+
+  // Keyboard activation
+  const keyReleased = useRef(true);
+  const handleKeyUp = (e: KeyboardEvent) => {
+    if (e.key !== ' ') {
+      return;
+    }
+    window.removeEventListener('keyup', handleKeyUp);
+    keyReleased.current = true;
+    deactivate();
+  };
+
+  const handleKeyDown = (e: ReactKeyboardEvent<T>) => {
+    if (e.key !== ' ' || !keyReleased.current) {
+      return;
+    }
+    const rect = e.currentTarget.getBoundingClientRect();
+    keyReleased.current = false;
+    activate(rect, 0, 0, true);
+    window.addEventListener('keyup', handleKeyUp);
+  };
+
+  return {
+    handleKeyDown: opts.disabled ? disabledHandler : handleKeyDown,
+    handlePointerDown: opts.disabled ? disabledHandler : handlePointerDown,
+    ...rest,
+  };
+}

package/src/Ripple/useRippleSurface.ts

@@ -1,155 +1,162 @@
-import type {
-  CSSProperties,
-  KeyboardEventHandler,
-  PointerEventHandler,
-} from 'react';
-import { useMemo } from 'react';
-import { get } from '@styled-system/css';
-import { wrapEvent } from '@basic-ui/core';
-
-import { useTheme } from '../theme';
-import { rippleStyle } from './Ripple';
-import { useRippleHandlers } from './useRippleHandlers';
-import type { SxStyleProp } from '../Box';
-
-export interface UseRippleSurfaceOptions<T extends HTMLElement> {
-  baseOpacity?: number;
-  hoverOpacity?: number;
-  focusOpacity?: number;
-  pressedOpacity?: number;
-  rippleColor?: string;
-  rippleEnabled?: boolean;
-  center?: boolean;
-  mouseFocus?: boolean;
-  disabled?: boolean;
-  style?: CSSProperties;
-  onPointerDown?: PointerEventHandler<T>;
-  onKeyDown?: KeyboardEventHandler<T>;
-}
-
-export function useRippleSurface<T extends HTMLElement>(
-  opts: UseRippleSurfaceOptions<T> = {}
-) {
-  let {
-    // eslint-disable-next-line prefer-const
-    baseOpacity = 0,
-    hoverOpacity = 0.04,
-    focusOpacity = 0.12,
-    pressedOpacity = 0.12,
-    rippleColor = 'on.surface',
-    // eslint-disable-next-line prefer-const
-    mouseFocus = false,
-  } = opts;
-  const {
-    onKeyDown,
-    onPointerDown,
-    style = {},
-    disabled,
-    rippleEnabled = true,
-    ...rippleProps
-  } = opts;
-
-  const theme = useTheme();
-  rippleColor = get(theme, `colors.${rippleColor}`) || rippleColor;
-
-  if (disabled) {
-    hoverOpacity = baseOpacity;
-    focusOpacity = baseOpacity;
-    pressedOpacity = baseOpacity;
-  }
-
-  const {
-    handleKeyDown,
-    handlePointerDown,
-    style: animationStyle,
-    animation,
-  } = useRippleHandlers({
-    opacity: Number(pressedOpacity),
-    backgroundColor: rippleColor,
-    disabled,
-    ...rippleProps,
-  });
-
-  const focusPseudoClass = mouseFocus ? 'focus' : 'focus-visible';
-
-  const css: SxStyleProp = useMemo(
-    () => ({
-      overflow: 'hidden',
-      position: 'relative',
-      cursor: 'pointer',
-      // fix overflow: hidden + borderRadius in Safari
-      // https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b#gistcomment-2359479
-      willChange: 'transform,opacity',
-      WebkitTapHighlightColor: 'transparent',
-      // ripple overlay
-      '&::before': {
-        backgroundColor: rippleColor,
-        boxSizing: 'content-box',
-        position: 'absolute',
-        content: '""',
-        opacity: baseOpacity,
-        pointerEvents: 'none',
-        top: '0',
-        left: '0',
-        width: '100%',
-        height: '100%',
-        transition: 'opacity 75ms linear',
-      },
-      '&:hover::before': {
-        opacity: hoverOpacity,
-      },
-      [`&:${focusPseudoClass}::before`]: {
-        opacity: focusOpacity,
-      },
-      ...(!rippleEnabled && {
-        '&:active::before': {
-          opacity: pressedOpacity,
-        },
-      }),
-      '&[aria-pressed="true"]::before': {
-        opacity: baseOpacity + pressedOpacity,
-      },
-      '&[aria-pressed="true"]:hover::before': {
-        opacity: pressedOpacity + hoverOpacity,
-      },
-      [`&[aria-pressed="true"]:${focusPseudoClass}::before`]: {
-        opacity: pressedOpacity + focusOpacity,
-      },
-      ...(!rippleEnabled && {
-        '&[aria-pressed="true"]:active::before': {
-          opacity: pressedOpacity + pressedOpacity,
-        },
-      }),
-      ['&:disabled::before,&:disabled:hover::before,&:disabled:focus::before,&:disabled:active::before,' +
-      '&[data-disabled]::before,&[data-disabled]:hover::before,&[data-disabled]:focus::before,' +
-      '&[data-disabled]:active::before,&:disabled[aria-pressed="true"]::before']:
-        {
-          opacity: 0,
-        },
-      '&:disabled,&[data-disabled]': {
-        cursor: 'default',
-      },
-      // ripple
-      ...(rippleEnabled && {
-        '&::after': { ...rippleStyle({ animation }) },
-      }),
-    }),
-    [
-      animation,
-      baseOpacity,
-      focusOpacity,
-      focusPseudoClass,
-      hoverOpacity,
-      pressedOpacity,
-      rippleColor,
-      rippleEnabled,
-    ]
-  );
-
-  return {
-    style: { ...animationStyle, ...style },
-    onKeyDown: wrapEvent(onKeyDown, handleKeyDown),
-    onPointerDown: wrapEvent(onPointerDown, handlePointerDown),
-    __css: css,
-  };
-}
+import type {
+  CSSProperties,
+  KeyboardEventHandler,
+  PointerEventHandler,
+} from 'react';
+import { useMemo } from 'react';
+import { get } from '@styled-system/css';
+import { wrapEvent } from '@basic-ui/core';
+
+import { useTheme } from '../theme';
+import { rippleStyle } from './Ripple';
+import { useRippleHandlers } from './useRippleHandlers';
+import type { SxStyleProp } from '../Box';
+
+export interface UseRippleSurfaceOptions<T extends HTMLElement> {
+  baseOpacity?: number;
+  hoverOpacity?: number;
+  focusOpacity?: number;
+  pressedOpacity?: number;
+  rippleColor?: string;
+  rippleEnabled?: boolean;
+  center?: boolean;
+  mouseFocus?: boolean;
+  disabled?: boolean;
+  style?: CSSProperties;
+  onPointerDown?: PointerEventHandler<T>;
+  onKeyDown?: KeyboardEventHandler<T>;
+}
+
+export interface UseRippleSurfaceResult<T extends HTMLElement> {
+  style: CSSProperties;
+  onKeyDown: KeyboardEventHandler<T>;
+  onPointerDown: PointerEventHandler<T>;
+  __css: Record<string, any>;
+}
+
+export function useRippleSurface<T extends HTMLElement>(
+  opts: UseRippleSurfaceOptions<T> = {}
+): UseRippleSurfaceResult<T> {
+  let {
+    // eslint-disable-next-line prefer-const
+    baseOpacity = 0,
+    hoverOpacity = 0.04,
+    focusOpacity = 0.12,
+    pressedOpacity = 0.12,
+    rippleColor = 'on.surface',
+    // eslint-disable-next-line prefer-const
+    mouseFocus = false,
+  } = opts;
+  const {
+    onKeyDown,
+    onPointerDown,
+    style = {},
+    disabled,
+    rippleEnabled = true,
+    ...rippleProps
+  } = opts;
+
+  const theme = useTheme();
+  rippleColor = get(theme, `colors.${rippleColor}`) || rippleColor;
+
+  if (disabled) {
+    hoverOpacity = baseOpacity;
+    focusOpacity = baseOpacity;
+    pressedOpacity = baseOpacity;
+  }
+
+  const {
+    handleKeyDown,
+    handlePointerDown,
+    style: animationStyle,
+    animation,
+  } = useRippleHandlers({
+    opacity: Number(pressedOpacity),
+    backgroundColor: rippleColor,
+    disabled,
+    ...rippleProps,
+  });
+
+  const focusPseudoClass = mouseFocus ? 'focus' : 'focus-visible';
+
+  const css: SxStyleProp = useMemo(
+    () => ({
+      overflow: 'hidden',
+      position: 'relative',
+      cursor: 'pointer',
+      // fix overflow: hidden + borderRadius in Safari
+      // https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b#gistcomment-2359479
+      willChange: 'transform,opacity',
+      WebkitTapHighlightColor: 'transparent',
+      // ripple overlay
+      '&::before': {
+        backgroundColor: rippleColor,
+        boxSizing: 'content-box',
+        position: 'absolute',
+        content: '""',
+        opacity: baseOpacity,
+        pointerEvents: 'none',
+        top: '0',
+        left: '0',
+        width: '100%',
+        height: '100%',
+        transition: 'opacity 75ms linear',
+      },
+      '&:hover::before': {
+        opacity: hoverOpacity,
+      },
+      [`&:${focusPseudoClass}::before`]: {
+        opacity: focusOpacity,
+      },
+      ...(!rippleEnabled && {
+        '&:active::before': {
+          opacity: pressedOpacity,
+        },
+      }),
+      '&[aria-pressed="true"]::before': {
+        opacity: baseOpacity + pressedOpacity,
+      },
+      '&[aria-pressed="true"]:hover::before': {
+        opacity: pressedOpacity + hoverOpacity,
+      },
+      [`&[aria-pressed="true"]:${focusPseudoClass}::before`]: {
+        opacity: pressedOpacity + focusOpacity,
+      },
+      ...(!rippleEnabled && {
+        '&[aria-pressed="true"]:active::before': {
+          opacity: pressedOpacity + pressedOpacity,
+        },
+      }),
+      ['&:disabled::before,&:disabled:hover::before,&:disabled:focus::before,&:disabled:active::before,' +
+      '&[data-disabled]::before,&[data-disabled]:hover::before,&[data-disabled]:focus::before,' +
+      '&[data-disabled]:active::before,&:disabled[aria-pressed="true"]::before']:
+        {
+          opacity: 0,
+        },
+      '&:disabled,&[data-disabled]': {
+        cursor: 'default',
+      },
+      // ripple
+      ...(rippleEnabled && {
+        '&::after': { ...rippleStyle({ animation }) },
+      }),
+    }),
+    [
+      animation,
+      baseOpacity,
+      focusOpacity,
+      focusPseudoClass,
+      hoverOpacity,
+      pressedOpacity,
+      rippleColor,
+      rippleEnabled,
+    ]
+  );
+
+  return {
+    style: { ...animationStyle, ...style },
+    onKeyDown: wrapEvent(onKeyDown, handleKeyDown),
+    onPointerDown: wrapEvent(onPointerDown, handlePointerDown),
+    __css: css,
+  };
+}

package/src/Select/CustomContainerExample.tsx

@@ -1,59 +1,59 @@
-import { forwardRef } from 'react';
-
-import { alpha } from '../color';
-import { Box } from '../Box';
-import type { FilledContainerProps } from '../';
-import { FilledContainerOverlay } from '../';
-
-export const CustomContainer = forwardRef<HTMLDivElement, FilledContainerProps>(
-  function CustomContainer(props, forwardedRef) {
-    const {
-      label,
-      labelIsFloating,
-      inputId,
-      hasFocus,
-      color: colorProp,
-      children,
-      error = false,
-      disabled = false,
-      forceActive = false,
-      leadingIcon,
-      ...otherProps
-    } = props;
-
-    const active = hasFocus || forceActive;
-
-    return (
-      <Box
-        ref={forwardedRef}
-        disabled={disabled}
-        active={active || error}
-        __css={{
-          variant: 'text.label-small',
-          position: 'relative',
-          lineHeight: 0,
-          width: '100%',
-          height: 32,
-          overflow: 'hidden',
-          boxSizing: 'border-box',
-          borderRadius: 'full',
-          color: alpha('on.surface-variant', 0.87),
-          ...(disabled && {
-            backgroundColor: alpha('on.surface-variant', 0.08),
-            color: alpha('on.surface-variant', 0.38),
-          }),
-          ...(active && { color: 'primary' }),
-          '& > [role="button"]': {
-            variant: 'text.label-medium',
-            minHeight: 32,
-            py: 0,
-          },
-        }}
-        {...otherProps}
-      >
-        {children}
-        <FilledContainerOverlay forceActive={active} />
-      </Box>
-    );
-  }
-);
+import { forwardRef } from 'react';
+
+import { alpha } from '../color';
+import { Box } from '../Box';
+import type { FilledContainerProps } from '../';
+import { FilledContainerOverlay } from '../';
+
+export const CustomContainer = forwardRef<HTMLDivElement, FilledContainerProps>(
+  function CustomContainer(props, forwardedRef) {
+    const {
+      label,
+      labelIsFloating,
+      inputId,
+      hasFocus,
+      color: colorProp,
+      children,
+      error = false,
+      disabled = false,
+      forceActive = false,
+      leadingIcon,
+      ...otherProps
+    } = props;
+
+    const active = hasFocus || forceActive;
+
+    return (
+      <Box
+        ref={forwardedRef}
+        disabled={disabled}
+        active={active || error}
+        __css={{
+          variant: 'text.label-small',
+          position: 'relative',
+          lineHeight: 0,
+          width: '100%',
+          height: 32,
+          overflow: 'hidden',
+          boxSizing: 'border-box',
+          borderRadius: 'full',
+          color: alpha('on.surface-variant', 0.87),
+          ...(disabled && {
+            backgroundColor: alpha('on.surface-variant', 0.08),
+            color: alpha('on.surface-variant', 0.38),
+          }),
+          ...(active && { color: 'primary' }),
+          '& > [role="button"]': {
+            variant: 'text.label-medium',
+            minHeight: 32,
+            py: 0,
+          },
+        }}
+        {...otherProps}
+      >
+        {children}
+        <FilledContainerOverlay forceActive={active} />
+      </Box>
+    );
+  }
+);