@basic-ui/material 1.0.0-alpha.5 → 1.0.0-alpha.51

package/src/Ripple/RippleBox.tsx

@@ -1,53 +1,52 @@
-import type { HTMLAttributes } from 'react';
-import { forwardRef } from 'react';
-import * as React from 'react';
-
-import type { UseRippleSurfaceOptions } from './useRippleSurface';
-import { useRippleSurface } from './useRippleSurface';
-import type { BoxProps } from '../Box';
-import { Box } from '../Box';
-
-export type RippleBoxProps<
-  H extends HTMLElement = HTMLDivElement,
-  Attr = React.HTMLAttributes<H>
-> = BoxProps<H, Attr> & UseRippleSurfaceOptions<H>;
-
-export const RippleBox: <
-  Props = RippleBoxProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>>
->(
-  props: Props
-) => JSX.Element = forwardRef<HTMLDivElement, RippleBoxProps>(
-  function RippleBox(props, forwardedRef) {
-    const {
-      as = 'div',
-      __css,
-      // Cherry picking the ripple props to prevent it from falling down to
-      // the Box component
-      onKeyDown, // eslint-disable-line @typescript-eslint/no-unused-vars
-      onPointerDown, // eslint-disable-line @typescript-eslint/no-unused-vars
-      baseOpacity, // eslint-disable-line @typescript-eslint/no-unused-vars
-      hoverOpacity, // eslint-disable-line @typescript-eslint/no-unused-vars
-      focusOpacity, // eslint-disable-line @typescript-eslint/no-unused-vars
-      pressedOpacity, // eslint-disable-line @typescript-eslint/no-unused-vars
-      rippleColor, // eslint-disable-line @typescript-eslint/no-unused-vars
-      center, // eslint-disable-line @typescript-eslint/no-unused-vars
-      disabled, // eslint-disable-line @typescript-eslint/no-unused-vars
-      rippleEnabled, // eslint-disable-line @typescript-eslint/no-unused-vars
-      style, // eslint-disable-line @typescript-eslint/no-unused-vars
-      ...otherProps
-    } = props;
-
-    const { __css: rippleCss, ...rippleProps } = useRippleSurface(props);
-
-    return (
-      <Box
-        as={as}
-        ref={forwardedRef}
-        __css={{ ...rippleCss, ...__css }}
-        {...{ disabled }}
-        {...otherProps}
-        {...rippleProps}
-      />
-    );
-  }
-) as any;
+import type { HTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+
+import type { UseRippleSurfaceOptions } from './useRippleSurface';
+import { useRippleSurface } from './useRippleSurface';
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+
+export type RippleBoxProps<
+  H extends HTMLElement = HTMLDivElement,
+  Attr = HTMLAttributes<H>
+> = BoxProps<H, Attr> & UseRippleSurfaceOptions<H>;
+
+export const RippleBox: <
+  Props = RippleBoxProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>>
+>(
+  props: Props
+) => JSX.Element = forwardRef<HTMLDivElement, RippleBoxProps>(
+  function RippleBox(props, forwardedRef) {
+    const {
+      as = 'div',
+      __css,
+      // Cherry picking the ripple props to prevent it from falling down to
+      // the Box component
+      onKeyDown, // eslint-disable-line @typescript-eslint/no-unused-vars
+      onPointerDown, // eslint-disable-line @typescript-eslint/no-unused-vars
+      baseOpacity, // eslint-disable-line @typescript-eslint/no-unused-vars
+      hoverOpacity, // eslint-disable-line @typescript-eslint/no-unused-vars
+      focusOpacity, // eslint-disable-line @typescript-eslint/no-unused-vars
+      pressedOpacity, // eslint-disable-line @typescript-eslint/no-unused-vars
+      rippleColor, // eslint-disable-line @typescript-eslint/no-unused-vars
+      center, // eslint-disable-line @typescript-eslint/no-unused-vars
+      disabled, // eslint-disable-line @typescript-eslint/no-unused-vars
+      rippleEnabled, // eslint-disable-line @typescript-eslint/no-unused-vars
+      style, // eslint-disable-line @typescript-eslint/no-unused-vars
+      ...otherProps
+    } = props;
+
+    const { __css: rippleCss, ...rippleProps } = useRippleSurface(props);
+
+    return (
+      <Box
+        as={as}
+        ref={forwardedRef}
+        __css={{ ...rippleCss, ...__css }}
+        {...{ disabled }}
+        {...otherProps}
+        {...rippleProps}
+      />
+    );
+  }
+) as any;

package/src/Ripple/constants.ts

@@ -1,15 +1,15 @@
-import hash from '@emotion/hash';
-
-export const RIPPLE_BACKGROUND_COLOR = `--css-${hash(
-  'basic-ui-ripple-fg-bg-color'
-)}`;
-export const RIPPLE_TRANSLATE_START = `--css-${hash(
-  'basic-ui-ripple-fg-translate-start'
-)}`;
-export const RIPPLE_TRANSLATE_END = `--css-${hash(
-  'basic-ui-ripple-fg-translate-end'
-)}`;
-export const RIPPLE_SCALE_END = `--css-${hash('basic-ui-ripple-fg-scale')}`;
-export const RIPPLE_OPACITY_END = `--css-${hash('basic-ui-ripple-fg-opacity')}`;
-export const RIPPLE_SIZE = `--css-${hash('basic-ui-ripple-fg-size')}`;
-export const RIPPLE_POSITION = `--css-${hash('basic-ui-ripple-fg-position')}`;
+import hash from '@emotion/hash';
+
+export const RIPPLE_BACKGROUND_COLOR = `--css-${hash(
+  'basic-ui-ripple-fg-bg-color'
+)}`;
+export const RIPPLE_TRANSLATE_START = `--css-${hash(
+  'basic-ui-ripple-fg-translate-start'
+)}`;
+export const RIPPLE_TRANSLATE_END = `--css-${hash(
+  'basic-ui-ripple-fg-translate-end'
+)}`;
+export const RIPPLE_SCALE_END = `--css-${hash('basic-ui-ripple-fg-scale')}`;
+export const RIPPLE_OPACITY_END = `--css-${hash('basic-ui-ripple-fg-opacity')}`;
+export const RIPPLE_SIZE = `--css-${hash('basic-ui-ripple-fg-size')}`;
+export const RIPPLE_POSITION = `--css-${hash('basic-ui-ripple-fg-position')}`;

package/src/Ripple/index.ts

@@ -1,5 +1,5 @@
-export * from './Ripple';
-export * from './RippleBox';
-export * from './useRipple';
-export * from './useRippleHandlers';
-export * from './useRippleSurface';
+export * from './Ripple';
+export * from './RippleBox';
+export * from './useRipple';
+export * from './useRippleHandlers';
+export * from './useRippleSurface';

package/src/Ripple/keyframes.ts

@@ -1,36 +1,36 @@
-import { keyframes } from '@emotion/react';
-import type { Keyframes } from '@emotion/serialize';
-
-import {
-  RIPPLE_TRANSLATE_START,
-  RIPPLE_TRANSLATE_END,
-  RIPPLE_OPACITY_END,
-  RIPPLE_SCALE_END,
-} from './constants';
-
-export const radiusIn: Keyframes = keyframes({
-  from: {
-    transform: `translate(var(${RIPPLE_TRANSLATE_START}, 0)) scale(1)`,
-  },
-  to: {
-    transform: `translate(var(${RIPPLE_TRANSLATE_END}, 0)) scale(var(${RIPPLE_SCALE_END}, 1))`,
-  },
-});
-
-export const opacityIn: Keyframes = keyframes({
-  from: {
-    opacity: '0',
-  },
-  to: {
-    opacity: `var(${RIPPLE_OPACITY_END})`,
-  },
-});
-
-export const opacityOut: Keyframes = keyframes({
-  from: {
-    opacity: `var(${RIPPLE_OPACITY_END})`,
-  },
-  to: {
-    opacity: '0',
-  },
-});
+import { keyframes } from '@emotion/react';
+import type { Keyframes } from '@emotion/serialize';
+
+import {
+  RIPPLE_TRANSLATE_START,
+  RIPPLE_TRANSLATE_END,
+  RIPPLE_OPACITY_END,
+  RIPPLE_SCALE_END,
+} from './constants';
+
+export const radiusIn: Keyframes = keyframes({
+  from: {
+    transform: `translate(var(${RIPPLE_TRANSLATE_START}, 0)) scale(1)`,
+  },
+  to: {
+    transform: `translate(var(${RIPPLE_TRANSLATE_END}, 0)) scale(var(${RIPPLE_SCALE_END}, 1))`,
+  },
+});
+
+export const opacityIn: Keyframes = keyframes({
+  from: {
+    opacity: '0',
+  },
+  to: {
+    opacity: `var(${RIPPLE_OPACITY_END})`,
+  },
+});
+
+export const opacityOut: Keyframes = keyframes({
+  from: {
+    opacity: `var(${RIPPLE_OPACITY_END})`,
+  },
+  to: {
+    opacity: '0',
+  },
+});

package/src/Ripple/useRipple.ts

@@ -1,209 +1,209 @@
-import { useState, useRef, useEffect } from 'react';
-
-import { radiusIn, opacityIn, opacityOut } from './keyframes';
-import {
-  RIPPLE_TRANSLATE_START,
-  RIPPLE_TRANSLATE_END,
-  RIPPLE_OPACITY_END,
-  RIPPLE_SCALE_END,
-  RIPPLE_SIZE,
-  RIPPLE_BACKGROUND_COLOR,
-  RIPPLE_POSITION,
-} from './constants';
-
-const defaultRipple = {
-  x: 0,
-  y: 0,
-  size: 0,
-  scale: 0,
-  centerX: 0,
-  centerY: 0,
-};
-
-// Surface diameter is treated differently for unbounded vs. bounded ripples.
-// Unbounded ripple diameter is calculated smaller since the surface is expected to already be padded appropriately
-// to extend the hitbox, and the ripple is expected to meet the edges of the padded hitbox (which is typically
-// square). Bounded ripples, on the other hand, are fully expected to expand beyond the surface's longest diameter
-// (calculated based on the diagonal plus a constant padding), and are clipped at the surface's border via
-// `overflow: hidden`.
-const getBoundedRadius = (rect: ClientRect, padding: number) => {
-  const hypotenuse = Math.sqrt(
-    Math.pow(rect.width, 2) + Math.pow(rect.height, 2)
-  );
-  return hypotenuse + padding;
-};
-
-function getScale(rect: ClientRect) {
-  const maxDim = Math.max(rect.height, rect.width);
-  const padding = 10;
-  const initialOriginScale = 0.6;
-  const maxRadius = getBoundedRadius(rect, padding);
-
-  // Ripple is sized as a fraction of the largest dimension of the surface, then scales up using a CSS scale transform
-  const initialSize = Math.floor(maxDim * initialOriginScale);
-
-  return {
-    size: initialSize,
-    scale: maxRadius / initialSize,
-    centerX: rect.width / 2,
-    centerY: rect.height / 2,
-  };
-}
-
-function calculateRipplePosition(
-  rect: ClientRect,
-  clientX: number,
-  clientY: number,
-  center = false
-) {
-  const rippleStart = center
-    ? {
-        x: rect.width / 2,
-        y: rect.height / 2,
-      }
-    : {
-        x: clientX - rect.left,
-        y: clientY - rect.top,
-      };
-
-  return {
-    state: 'entering' as const,
-    ...rippleStart,
-    ...getScale(rect),
-  };
-}
-
-export interface RippleOptions {
-  opacity: number;
-  backgroundColor: string;
-  enterDuration?: number;
-  leaveDuration?: number;
-  center?: boolean;
-  disabled?: boolean;
-}
-
-export const useRipple = (opts: RippleOptions) => {
-  const {
-    opacity,
-    backgroundColor,
-    enterDuration = 225,
-    leaveDuration = 150,
-  } = opts;
-
-  // rippleState must be a ref, because it accesses the current value
-  // inside closures... if we use state, it's gonna recapture
-  // the state variable and won't work correctly
-  const rippleState = useRef(
-    'left' as 'entering' | 'entered' | 'leaving' | 'left' | 'restart'
-  );
-  const [ripple, setRipple] = useState(defaultRipple);
-  const leavingTimeout = useRef<number>();
-  const enteringTimeout = useRef<number>();
-  const restartTimeout = useRef<number>();
-
-  const shouldLeave = useRef(false);
-
-  // clear timeouts to avoid setting state on unmounted component
-  useEffect(() => {
-    return () => {
-      restartTimeout.current && cancelAnimationFrame(restartTimeout.current);
-      clearTimeout(enteringTimeout.current);
-      clearTimeout(leavingTimeout.current);
-    };
-  }, []);
-
-  // State handling
-  const setLeft = () => {
-    rippleState.current = 'left';
-    setRipple({ ...defaultRipple });
-  };
-
-  const setLeaving = () => {
-    clearTimeout(enteringTimeout.current);
-    rippleState.current = 'leaving';
-    setRipple((ripple) => ({
-      ...ripple,
-    }));
-
-    leavingTimeout.current = window.setTimeout(setLeft, leaveDuration);
-  };
-
-  const setEntered = () => {
-    rippleState.current = 'entered';
-    setRipple((ripple) => ({
-      ...ripple,
-    }));
-
-    if (shouldLeave.current) {
-      setLeaving();
-    }
-  };
-
-  const deactivate = () => {
-    shouldLeave.current = true;
-    if (rippleState.current === 'entered') {
-      setLeaving();
-    }
-  };
-
-  const activate = (
-    rect: ClientRect,
-    clientX: number,
-    clientY: number,
-    center = false
-  ) => {
-    clearTimeout(leavingTimeout.current);
-    clearTimeout(enteringTimeout.current);
-    shouldLeave.current = false;
-
-    rippleState.current = 'restart';
-    setRipple({ ...defaultRipple });
-    restartTimeout.current = requestAnimationFrame(() => {
-      rippleState.current = 'entering';
-      setRipple(calculateRipplePosition(rect, clientX, clientY, center));
-
-      enteringTimeout.current = window.setTimeout(setEntered, enterDuration);
-    });
-  };
-
-  // Styling
-  let animation: string | undefined = undefined;
-  switch (rippleState.current) {
-    case 'entering':
-    case 'entered':
-      animation =
-        `${radiusIn} ${enterDuration}ms forwards,` +
-        `${opacityIn} ${enterDuration / 3}ms forwards`;
-      break;
-    case 'leaving':
-      animation =
-        `${radiusIn} ${enterDuration}ms forwards,` +
-        `${opacityOut} ${leaveDuration}ms forwards`;
-      break;
-  }
-
-  let style = {};
-  switch (rippleState.current) {
-    case 'entering':
-    case 'entered':
-    case 'leaving':
-      style = {
-        [RIPPLE_SIZE]: `${ripple.size}px`,
-        [RIPPLE_POSITION]: `${-ripple.size / 2}px`,
-        [RIPPLE_BACKGROUND_COLOR]: backgroundColor,
-        [RIPPLE_TRANSLATE_START]: `${ripple.x}px, ${ripple.y}px`,
-        [RIPPLE_TRANSLATE_END]: `${ripple.centerX}px, ${ripple.centerY}px`,
-        [RIPPLE_OPACITY_END]: opacity,
-        [RIPPLE_SCALE_END]: `${ripple.scale}`,
-      };
-      break;
-  }
-
-  return {
-    activate,
-    deactivate,
-    style,
-    animation,
-    // key: counter,
-  };
-};
+import { useState, useRef, useEffect } from 'react';
+
+import { radiusIn, opacityIn, opacityOut } from './keyframes';
+import {
+  RIPPLE_TRANSLATE_START,
+  RIPPLE_TRANSLATE_END,
+  RIPPLE_OPACITY_END,
+  RIPPLE_SCALE_END,
+  RIPPLE_SIZE,
+  RIPPLE_BACKGROUND_COLOR,
+  RIPPLE_POSITION,
+} from './constants';
+
+const defaultRipple = {
+  x: 0,
+  y: 0,
+  size: 0,
+  scale: 0,
+  centerX: 0,
+  centerY: 0,
+};
+
+// Surface diameter is treated differently for unbounded vs. bounded ripples.
+// Unbounded ripple diameter is calculated smaller since the surface is expected to already be padded appropriately
+// to extend the hitbox, and the ripple is expected to meet the edges of the padded hitbox (which is typically
+// square). Bounded ripples, on the other hand, are fully expected to expand beyond the surface's longest diameter
+// (calculated based on the diagonal plus a constant padding), and are clipped at the surface's border via
+// `overflow: hidden`.
+const getBoundedRadius = (rect: ClientRect, padding: number) => {
+  const hypotenuse = Math.sqrt(
+    Math.pow(rect.width, 2) + Math.pow(rect.height, 2)
+  );
+  return hypotenuse + padding;
+};
+
+function getScale(rect: ClientRect) {
+  const maxDim = Math.max(rect.height, rect.width);
+  const padding = 10;
+  const initialOriginScale = 0.6;
+  const maxRadius = getBoundedRadius(rect, padding);
+
+  // Ripple is sized as a fraction of the largest dimension of the surface, then scales up using a CSS scale transform
+  const initialSize = Math.floor(maxDim * initialOriginScale);
+
+  return {
+    size: initialSize,
+    scale: maxRadius / initialSize,
+    centerX: rect.width / 2,
+    centerY: rect.height / 2,
+  };
+}
+
+function calculateRipplePosition(
+  rect: ClientRect,
+  clientX: number,
+  clientY: number,
+  center = false
+) {
+  const rippleStart = center
+    ? {
+        x: rect.width / 2,
+        y: rect.height / 2,
+      }
+    : {
+        x: clientX - rect.left,
+        y: clientY - rect.top,
+      };
+
+  return {
+    state: 'entering' as const,
+    ...rippleStart,
+    ...getScale(rect),
+  };
+}
+
+export interface RippleOptions {
+  opacity: number;
+  backgroundColor: string;
+  enterDuration?: number;
+  leaveDuration?: number;
+  center?: boolean;
+  disabled?: boolean;
+}
+
+export const useRipple = (opts: RippleOptions) => {
+  const {
+    opacity,
+    backgroundColor,
+    enterDuration = 225,
+    leaveDuration = 150,
+  } = opts;
+
+  // rippleState must be a ref, because it accesses the current value
+  // inside closures... if we use state, it's gonna recapture
+  // the state variable and won't work correctly
+  const rippleState = useRef(
+    'left' as 'entering' | 'entered' | 'leaving' | 'left' | 'restart'
+  );
+  const [ripple, setRipple] = useState(defaultRipple);
+  const leavingTimeout = useRef<number>();
+  const enteringTimeout = useRef<number>();
+  const restartTimeout = useRef<number>();
+
+  const shouldLeave = useRef(false);
+
+  // clear timeouts to avoid setting state on unmounted component
+  useEffect(() => {
+    return () => {
+      restartTimeout.current && cancelAnimationFrame(restartTimeout.current);
+      clearTimeout(enteringTimeout.current);
+      clearTimeout(leavingTimeout.current);
+    };
+  }, []);
+
+  // State handling
+  const setLeft = () => {
+    rippleState.current = 'left';
+    setRipple({ ...defaultRipple });
+  };
+
+  const setLeaving = () => {
+    clearTimeout(enteringTimeout.current);
+    rippleState.current = 'leaving';
+    setRipple((ripple) => ({
+      ...ripple,
+    }));
+
+    leavingTimeout.current = window.setTimeout(setLeft, leaveDuration);
+  };
+
+  const setEntered = () => {
+    rippleState.current = 'entered';
+    setRipple((ripple) => ({
+      ...ripple,
+    }));
+
+    if (shouldLeave.current) {
+      setLeaving();
+    }
+  };
+
+  const deactivate = () => {
+    shouldLeave.current = true;
+    if (rippleState.current === 'entered') {
+      setLeaving();
+    }
+  };
+
+  const activate = (
+    rect: ClientRect,
+    clientX: number,
+    clientY: number,
+    center = false
+  ) => {
+    clearTimeout(leavingTimeout.current);
+    clearTimeout(enteringTimeout.current);
+    shouldLeave.current = false;
+
+    rippleState.current = 'restart';
+    setRipple({ ...defaultRipple });
+    restartTimeout.current = requestAnimationFrame(() => {
+      rippleState.current = 'entering';
+      setRipple(calculateRipplePosition(rect, clientX, clientY, center));
+
+      enteringTimeout.current = window.setTimeout(setEntered, enterDuration);
+    });
+  };
+
+  // Styling
+  let animation: string | undefined = undefined;
+  switch (rippleState.current) {
+    case 'entering':
+    case 'entered':
+      animation =
+        `${radiusIn} ${enterDuration}ms forwards,` +
+        `${opacityIn} ${enterDuration / 3}ms forwards`;
+      break;
+    case 'leaving':
+      animation =
+        `${radiusIn} ${enterDuration}ms forwards,` +
+        `${opacityOut} ${leaveDuration}ms forwards`;
+      break;
+  }
+
+  let style = {};
+  switch (rippleState.current) {
+    case 'entering':
+    case 'entered':
+    case 'leaving':
+      style = {
+        [RIPPLE_SIZE]: `${ripple.size}px`,
+        [RIPPLE_POSITION]: `${-ripple.size / 2}px`,
+        [RIPPLE_BACKGROUND_COLOR]: backgroundColor,
+        [RIPPLE_TRANSLATE_START]: `${ripple.x}px, ${ripple.y}px`,
+        [RIPPLE_TRANSLATE_END]: `${ripple.centerX}px, ${ripple.centerY}px`,
+        [RIPPLE_OPACITY_END]: opacity,
+        [RIPPLE_SCALE_END]: `${ripple.scale}`,
+      };
+      break;
+  }
+
+  return {
+    activate,
+    deactivate,
+    style,
+    animation,
+    // key: counter,
+  };
+};