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

package/src/Ripple/useRippleHandlers.ts

@@ -1,54 +1,54 @@
-import { useRef } from 'react';
-import type * as React 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: React.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: React.KeyboardEvent<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,133 +1,155 @@
-import type { CSSProperties } 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;
-  disabled?: boolean;
-  style?: CSSProperties;
-  onPointerDown?: React.PointerEventHandler<T>;
-  onKeyDown?: React.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',
-  } = 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 css: SxStyleProp = {
-    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,
-    },
-    '&:focus-visible::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"]:focus-visible::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 }) },
-    }),
-  };
-
-  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 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,
+  };
+}

package/src/SearchBar/SearchBar.story.tsx

@@ -0,0 +1,98 @@
+import { useState } from 'react';
+
+import { Box } from '../Box';
+import { CheckBox } from '../CheckBox';
+import { Select, SelectItem } from '..';
+import { SearchBar } from './SearchBar';
+
+export default {
+  title: 'components/SearchBar',
+};
+
+const SearchIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height={20}
+    width={20}
+    viewBox="0 0 48 48"
+    fill="currentColor"
+  >
+    <path d="M39.8 41.95 26.65 28.8q-1.5 1.3-3.5 2.025-2 .725-4.25.725-5.4 0-9.15-3.75T6 18.75q0-5.3 3.75-9.05 3.75-3.75 9.1-3.75 5.3 0 9.025 3.75 3.725 3.75 3.725 9.05 0 2.15-.7 4.15-.7 2-2.1 3.75L42 39.75Zm-20.95-13.4q4.05 0 6.9-2.875Q28.6 22.8 28.6 18.75t-2.85-6.925Q22.9 8.95 18.85 8.95q-4.1 0-6.975 2.875T9 18.75q0 4.05 2.875 6.925t6.975 2.875Z" />
+  </svg>
+);
+
+const Example = () => {
+  const [error, setError] = useState<boolean | string>(false);
+  const [color, setColor] = useState<'primary' | 'secondary'>('primary');
+
+  return (
+    <Box p={3} display="flex" alignItems="center" flexDirection="column">
+      <Box>
+        <CheckBox
+          checked={Boolean(error)}
+          onChange={(e) =>
+            setError(e.target.checked ? 'This field is required' : false)
+          }
+        >
+          Has Error
+        </CheckBox>
+        <Box width={230} display="inline-block">
+          <Select
+            value={color}
+            onChange={(e, value: 'primary' | 'secondary') => setColor(value)}
+            label="Color"
+          >
+            <SelectItem value="primary">Primary</SelectItem>
+            <SelectItem value="secondary">Secondary</SelectItem>
+          </Select>
+        </Box>
+      </Box>
+      <Box
+        py={3}
+        backgroundColor="surface"
+        display="inline-flex"
+        flexWrap="wrap"
+        flexDirection="column"
+      >
+        <Box m={2} width={230} display="inline-block">
+          <SearchBar error={error} color={color} />
+        </Box>
+        <Box m={2} width={230} display="inline-block">
+          <SearchBar error={error} color={color} leadingIcon={<SearchIcon />} />
+        </Box>
+        <Box m={2} width={230} display="inline-block">
+          <SearchBar
+            error={error}
+            color={color}
+            trailingIcon={<SearchIcon />}
+          />
+        </Box>
+        <Box m={2} width={230} display="inline-block">
+          <SearchBar
+            error={error}
+            color={color}
+            placeholder="Search your messages..."
+          />
+        </Box>
+        <Box m={2} width={230} display="inline-block">
+          <SearchBar
+            error={error}
+            color={color}
+            placeholder="Search your messages..."
+            leadingIcon={<SearchIcon />}
+          />
+        </Box>
+        <Box m={2} width={230} display="inline-block">
+          <SearchBar
+            error={error}
+            color={color}
+            placeholder="Search your messages..."
+            trailingIcon={<SearchIcon />}
+          />
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export const Default = () => <Example />;

package/src/SearchBar/SearchBar.tsx

@@ -0,0 +1,105 @@
+import type { InputHTMLAttributes, ReactNode } from 'react';
+import { forwardRef, useId } from 'react';
+import { useControlledState } from '@basic-ui/core';
+import { rem } from 'polished';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+import { Input } from '../TextField/Input';
+import { IconContainer } from '../TextField/IconContainer';
+import { EASING_STANDARD } from '../motion';
+
+interface InputProps
+  extends BoxProps<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>> {
+  as?: 'input';
+}
+
+export type SearchBarProps = InputProps & {
+  containerProps?: Omit<BoxProps, 'color'>;
+  defaultValue?: string;
+  value?: string;
+  error?: boolean | string;
+  leadingIcon?: ReactNode;
+  trailingIcon?: ReactNode;
+};
+
+export const SearchBar = forwardRef<HTMLInputElement, SearchBarProps>(
+  function SearchBar(props, forwardedRef) {
+    const {
+      type = 'text',
+      id: idProp,
+      color = 'primary',
+      value: valueProp,
+      defaultValue = '',
+      error,
+      onChange: onChangeProp,
+      leadingIcon = null,
+      trailingIcon = null,
+      containerProps,
+      variant,
+      __css,
+      ...otherProps
+    } = props;
+    const { __css: __containerCss, ...otherContainerProps } =
+      containerProps || {};
+    const [value, onChange] = useControlledState(
+      valueProp,
+      onChangeProp,
+      defaultValue,
+      (setState) => (e) => {
+        setState(e.target.value);
+      }
+    );
+
+    const fallbackId = useId();
+
+    const hasError = Boolean(error);
+
+    const id = idProp || fallbackId;
+    const inputId = `${id}-search-bar`;
+
+    return (
+      <Box
+        __css={{
+          display: 'inline-flex',
+          position: 'relative',
+          ...__containerCss,
+        }}
+        {...otherContainerProps}
+      >
+        <Input
+          __css={{
+            borderRadius: 'full',
+            backgroundColor: 'surface-container-high',
+            height: rem(56),
+            pl: leadingIcon ? rem(48) : rem(24),
+            pr: trailingIcon ? rem(48) : rem(24),
+            py: 0,
+            transition: `outline-color .2s ${EASING_STANDARD}`,
+            outlineStyle: 'solid',
+            outlineWidth: rem(2),
+            outlineColor: 'transparent',
+            outlineOffset: rem(-1),
+            '&:focus': {
+              outlineColor: hasError ? ('error' as const) : (color as any),
+            },
+            ...__css,
+          }}
+          type={type}
+          ref={forwardedRef}
+          hasLabel={false}
+          id={inputId}
+          value={value}
+          onChange={onChange}
+          {...otherProps}
+        />
+        {leadingIcon && (
+          <IconContainer position="start">{leadingIcon}</IconContainer>
+        )}
+        {trailingIcon && (
+          <IconContainer position="end">{trailingIcon}</IconContainer>
+        )}
+      </Box>
+    );
+  }
+);

package/src/SearchBar/index.ts

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

package/src/Select/CustomContainerExample.tsx

@@ -0,0 +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>
+    );
+  }
+);