@react-spectrum/utils 3.5.2 → 3.6.3

package/src/BreakpointProvider.tsx

@@ -0,0 +1,91 @@
+import React, {ReactNode, useContext, useEffect, useState} from 'react';
+import {useIsSSR} from '@react-aria/ssr';
+
+interface Breakpoints {
+  S?: number,
+  M?: number,
+  L?: number,
+  [custom: string]: number | undefined
+}
+
+interface BreakpointContext {
+  matchedBreakpoints: string[]
+}
+
+const Context = React.createContext<BreakpointContext>(null);
+Context.displayName = 'BreakpointContext';
+
+interface BreakpointProviderProps {
+  children?: ReactNode,
+  matchedBreakpoints: string[]
+}
+
+export function BreakpointProvider(props: BreakpointProviderProps) {
+  let {
+    children,
+    matchedBreakpoints
+  } = props;
+  return (
+    <Context.Provider
+      value={{matchedBreakpoints}} >
+      {children}
+    </Context.Provider>
+  );
+}
+
+export function useMatchedBreakpoints(breakpoints: Breakpoints): string[] {
+  let entries = Object.entries(breakpoints).sort(([, valueA], [, valueB]) => valueB - valueA);
+  let breakpointQueries = entries.map(([, value]) => `(min-width: ${value}px)`);
+
+  let supportsMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia === 'function';
+  let getBreakpointHandler = () => {
+    let matched = [];
+    for (let i in breakpointQueries) {
+      let query = breakpointQueries[i];
+      if (window.matchMedia(query).matches) {
+        matched.push(entries[i][0]);
+      }
+    }
+    matched.push('base');
+    return matched;
+  };
+
+  let [breakpoint, setBreakpoint] = useState(() =>
+    supportsMatchMedia
+      ? getBreakpointHandler()
+      : ['base']
+  );
+
+  useEffect(() => {
+    if (!supportsMatchMedia) {
+      return;
+    }
+
+    let onResize = () => {
+      const breakpointHandler = getBreakpointHandler();
+
+      setBreakpoint(previousBreakpointHandler => {
+        if (previousBreakpointHandler.length !== breakpointHandler.length ||
+          previousBreakpointHandler.some((breakpoint, idx) => breakpoint !== breakpointHandler[idx])) {
+          return [...breakpointHandler]; // Return a new array to force state change
+        }
+
+        return previousBreakpointHandler;
+      });
+    };
+
+    window.addEventListener('resize', onResize);
+    return () => {
+      window.removeEventListener('resize', onResize);
+    };
+  }, [supportsMatchMedia]);
+
+  // If in SSR, the media query should never match. Once the page hydrates,
+  // this will update and the real value will be returned.
+  let isSSR = useIsSSR();
+  return isSSR ? ['base'] : breakpoint;
+}
+
+export function useBreakpoint(): BreakpointContext {
+  return useContext(Context);
+}

package/src/Slots.tsx

@@ -19,10 +19,11 @@ interface SlotProps {
 
 let SlotContext = React.createContext(null);
 
-export function useSlotProps<T>(props: T, defaultSlot?: string): T {
+export function useSlotProps<T>(props: T & {id?: string}, defaultSlot?: string): T {
   let slot = (props as SlotProps).slot || defaultSlot;
   let {[slot]: slotProps = {}} = useContext(SlotContext) || {};
-  return mergeProps(slotProps, props);
+
+  return mergeProps(props, mergeProps(slotProps, {id: props.id}));
 }
 
 export function cssModuleToSlots(cssModule) {
@@ -37,7 +38,7 @@ export function SlotProvider(props) {
   let {slots = {}, children} = props;
 
   // Merge props for each slot from parent context and props
-  let value = useMemo(() => 
+  let value = useMemo(() =>
     Object.keys(parentSlots)
       .concat(Object.keys(slots))
       .reduce((o, p) => ({

package/src/index.ts

@@ -23,3 +23,4 @@ export * from './useHasChild';
 export * from './useResizeObserver';
 export * from './useIsMobileDevice';
 export * from './useValueEffect';
+export * from './BreakpointProvider';

package/src/styleProps.ts

@@ -10,10 +10,12 @@
  * governing permissions and limitations under the License.
  */
 
-import {BackgroundColorValue, BorderColorValue, BorderRadiusValue, BorderSizeValue, ColorValue, DimensionValue, Direction, StyleProps, ViewStyleProps} from '@react-types/shared';
+import {BackgroundColorValue, BorderColorValue, BorderRadiusValue, BorderSizeValue, ColorValue, DimensionValue, Direction, Responsive, ResponsiveProp, StyleProps, ViewStyleProps} from '@react-types/shared';
 import {CSSProperties, HTMLAttributes} from 'react';
+import {useBreakpoint} from './BreakpointProvider';
 import {useLocale} from '@react-aria/i18n';
 
+type Breakpoint = 'base' | 'S' | 'M' | 'L' | string;
 type StyleName = string | string[] | ((dir: Direction) => string);
 type StyleHandler = (value: any) => string;
 export interface StyleHandlers {
@@ -118,6 +120,9 @@ function rtl(ltr: string, rtl: string) {
 }
 
 const UNIT_RE = /(%|px|em|rem|vw|vh|auto|cm|mm|in|pt|pc|ex|ch|rem|vmin|vmax|fr)$/;
+const FUNC_RE = /^\s*\w+\(/;
+const SPECTRUM_VARIABLE_RE = /(static-)?size-\d+|single-line-(height|width)/g;
+
 export function dimensionValue(value: DimensionValue) {
   if (typeof value === 'number') {
     return value + 'px';
@@ -127,9 +132,18 @@ export function dimensionValue(value: DimensionValue) {
     return value;
   }
 
+  if (FUNC_RE.test(value)) {
+    return value.replace(SPECTRUM_VARIABLE_RE, 'var(--spectrum-global-dimension-$&, var(--spectrum-alias-$&))');
+  }
+
   return `var(--spectrum-global-dimension-${value}, var(--spectrum-alias-${value}))`;
 }
 
+export function responsiveDimensionValue(value: Responsive<DimensionValue>, matchedBreakpoints: Breakpoint[]) {
+  value = getResponsiveProp(value, matchedBreakpoints);
+  return dimensionValue(value);
+}
+
 type ColorType = 'default' | 'background' | 'border' | 'icon' | 'status';
 function colorValue(value: ColorValue, type: ColorType = 'default') {
   return `var(--spectrum-global-color-${value}, var(--spectrum-semantic-${value}-color-${type}))`;
@@ -171,7 +185,7 @@ function flexValue(value: boolean | number | string) {
   return '' + value;
 }
 
-export function convertStyleProps(props: ViewStyleProps, handlers: StyleHandlers, direction: Direction) {
+export function convertStyleProps(props: ViewStyleProps, handlers: StyleHandlers, direction: Direction, matchedBreakpoints: Breakpoint[]) {
   let style: CSSProperties = {};
   for (let key in props) {
     let styleProp = handlers[key];
@@ -184,7 +198,8 @@ export function convertStyleProps(props: ViewStyleProps, handlers: StyleHandlers
       name = name(direction);
     }
 
-    let value = convert(props[key]);
+    let prop = getResponsiveProp(props[key], matchedBreakpoints);
+    let value = convert(prop);
     if (Array.isArray(name)) {
       for (let k of name) {
         style[k] = value;
@@ -204,21 +219,33 @@ export function convertStyleProps(props: ViewStyleProps, handlers: StyleHandlers
   return style;
 }
 
-export function useStyleProps<T extends StyleProps>(props: T, handlers: StyleHandlers = baseStyleProps) {
+type StylePropsOptions = {
+  matchedBreakpoints?: Breakpoint[]
+};
+
+export function useStyleProps<T extends StyleProps>(
+  props: T,
+  handlers: StyleHandlers = baseStyleProps,
+  options: StylePropsOptions = {}
+) {
   let {
     UNSAFE_className,
     UNSAFE_style,
     ...otherProps
   } = props;
+  let breakpointProvider = useBreakpoint();
   let {direction} = useLocale();
-  let styles = convertStyleProps(props, handlers, direction);
+  let {
+    matchedBreakpoints = breakpointProvider?.matchedBreakpoints || ['base']
+  } = options;
+  let styles = convertStyleProps(props, handlers, direction, matchedBreakpoints);
   let style = {...UNSAFE_style, ...styles};
 
   // @ts-ignore
   if (otherProps.className) {
     console.warn(
       'The className prop is unsafe and is unsupported in React Spectrum v3. ' +
-      'Please use style props with Spectrum variables, or UNSAFE_className if you absolutely must to something custom. ' +
+      'Please use style props with Spectrum variables, or UNSAFE_className if you absolutely must do something custom. ' +
       'Note that this may break in future versions due to DOM structure changes.'
     );
   }
@@ -227,7 +254,7 @@ export function useStyleProps<T extends StyleProps>(props: T, handlers: StyleHan
   if (otherProps.style) {
     console.warn(
       'The style prop is unsafe and is unsupported in React Spectrum v3. ' +
-      'Please use style props with Spectrum variables, or UNSAFE_style if you absolutely must to something custom. ' +
+      'Please use style props with Spectrum variables, or UNSAFE_style if you absolutely must do something custom. ' +
       'Note that this may break in future versions due to DOM structure changes.'
     );
   }
@@ -237,7 +264,7 @@ export function useStyleProps<T extends StyleProps>(props: T, handlers: StyleHan
     className: UNSAFE_className
   };
 
-  if (props.isHidden) {
+  if (getResponsiveProp(props.isHidden, matchedBreakpoints)) {
     styleProps.hidden = true;
   }
 
@@ -249,3 +276,16 @@ export function useStyleProps<T extends StyleProps>(props: T, handlers: StyleHan
 export function passthroughStyle(value) {
   return value;
 }
+
+export function getResponsiveProp<T>(prop: Responsive<T>, matchedBreakpoints: Breakpoint[]): T {
+  if (prop && typeof prop === 'object' && !Array.isArray(prop)) {
+    for (let i = 0; i < matchedBreakpoints.length; i++) {
+      let breakpoint = matchedBreakpoints[i];
+      if (prop[breakpoint] != null) {
+        return prop[breakpoint];
+      }
+    }
+    return (prop as ResponsiveProp<T>).base;
+  }
+  return prop as T;
+}

package/src/useValueEffect.ts

@@ -10,53 +10,6 @@
  * governing permissions and limitations under the License.
  */
 
-import {Dispatch, useCallback, useRef, useState} from 'react';
-import {useLayoutEffect} from '@react-aria/utils';
+import {useValueEffect} from '@react-aria/utils';
 
-type SetValueAction = () => Generator<any, void, unknown>;
-
-// This hook works like `useState`, but when setting the value, you pass a generator function
-// that can yield multiple values. Each yielded value updates the state and waits for the next
-// layout effect, then continues the generator. This allows sequential updates to state to be
-// written linearly.
-export function useValueEffect<S>(defaultValue: S | (() => S)): [S, Dispatch<SetValueAction>] {
-  let [value, setValue] = useState(defaultValue);
-  let effect = useRef(null);
-
-  // Store the function in a ref so we can always access the current version
-  // which has the proper `value` in scope.
-  let nextRef = useRef(null);
-  nextRef.current = () => {
-    // Run the generator to the next yield.
-    let newValue = effect.current.next();
-
-    // If the generator is done, reset the effect.
-    if (newValue.done) {
-      effect.current = null;
-      return;
-    }
-
-    // If the value is the same as the current value,
-    // then continue to the next yield. Otherwise,
-    // set the value in state and wait for the next layout effect.
-    if (value === newValue.value) {
-      nextRef.current();
-    } else {
-      setValue(newValue.value);
-    }
-  };
-
-  useLayoutEffect(() => {
-    // If there is an effect currently running, continue to the next yield.
-    if (effect.current) {
-      nextRef.current();
-    }
-  });
-
-  let queue = useCallback(fn => {
-    effect.current = fn();
-    nextRef.current();
-  }, [effect, nextRef]);
-
-  return [value, queue];
-}
+export {useValueEffect};