@react-spectrum/utils 3.0.0-nightly-641446f65-240905

package/src/Slots.tsx

@@ -0,0 +1,70 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {mergeProps} from '@react-aria/utils';
+import React, {useContext, useMemo} from 'react';
+
+interface SlotProps {
+  slot?: string
+}
+
+let SlotContext = React.createContext(null);
+
+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(props, mergeProps(slotProps, {id: props.id}));
+}
+
+export function cssModuleToSlots(cssModule) {
+  return Object.keys(cssModule).reduce((acc, slot) => {
+    acc[slot] = {UNSAFE_className: cssModule[slot]};
+    return acc;
+  }, {});
+}
+
+export function SlotProvider(props) {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  let parentSlots = useContext(SlotContext) || {};
+  let {slots = {}, children} = props;
+
+  // Merge props for each slot from parent context and props
+  let value = useMemo(() =>
+    Object.keys(parentSlots)
+      .concat(Object.keys(slots))
+      .reduce((o, p) => ({
+        ...o,
+        [p]: mergeProps(parentSlots[p] || {}, slots[p] || {})}), {})
+      , [parentSlots, slots]);
+
+  return (
+    <SlotContext.Provider value={value}>
+      {children}
+    </SlotContext.Provider>
+  );
+}
+
+export function ClearSlots(props) {
+  let {children, ...otherProps} = props;
+  let content = children;
+  if (React.Children.toArray(children).length <= 1) {
+    if (typeof children === 'function') { // need to know if the node is a string or something else that react can render that doesn't get props
+      content = React.cloneElement(React.Children.only(children), otherProps);
+    }
+  }
+  return (
+    <SlotContext.Provider value={{}}>
+      {content}
+    </SlotContext.Provider>
+  );
+}

package/src/classNames.ts

@@ -0,0 +1,56 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import _clsx from 'clsx';
+
+export let shouldKeepSpectrumClassNames = false;
+
+export function keepSpectrumClassNames() {
+  shouldKeepSpectrumClassNames = true;
+  console.warn(
+    'Legacy spectrum-prefixed class names enabled for backward compatibility. ' +
+    'We recommend replacing instances of CSS overrides targeting spectrum selectors ' +
+    'in your app with custom class names of your own, and disabling this flag.'
+  );
+}
+
+export function classNames(cssModule: {[key: string]: string}, ...values: Array<string | Object | undefined>): string {
+  let classes = [];
+  for (let value of values) {
+    if (typeof value === 'object' && value) {
+      let mapped = {};
+      for (let key in value) {
+        if (cssModule[key]) {
+          mapped[cssModule[key]] = value[key];
+        }
+
+        if (shouldKeepSpectrumClassNames || !cssModule[key]) {
+          mapped[key] = value[key];
+        }
+      }
+
+      classes.push(mapped);
+    } else if (typeof value === 'string') {
+      if (cssModule[value]) {
+        classes.push(cssModule[value]);
+      }
+
+      if (shouldKeepSpectrumClassNames || !cssModule[value]) {
+        classes.push(value);
+      }
+    } else {
+      classes.push(value);
+    }
+  }
+
+  return _clsx(...classes);
+}

package/src/getWrappedElement.tsx

@@ -0,0 +1,23 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import React, {JSXElementConstructor, ReactElement, ReactNode} from 'react';
+
+export function getWrappedElement(children: string | ReactElement | ReactNode): ReactElement<any, JSXElementConstructor<any>> {
+  let element;
+  if (typeof children === 'string') {
+    element = <span>{children}</span>;
+  } else {
+    element = React.Children.only(children);
+  }
+  return element;
+}

package/src/index.ts

@@ -0,0 +1,35 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/// <reference types="css-module-types" />
+
+export type {StyleHandlers} from './styleProps';
+export {shouldKeepSpectrumClassNames, keepSpectrumClassNames, classNames} from './classNames';
+export {getWrappedElement} from './getWrappedElement';
+export {useMediaQuery} from './useMediaQuery';
+export {createDOMRef, createFocusableRef, useDOMRef, useFocusableRef, unwrapDOMRef, useUnwrapDOMRef} from './useDOMRef';
+export {
+  baseStyleProps,
+  viewStyleProps,
+  dimensionValue,
+  responsiveDimensionValue,
+  convertStyleProps,
+  useStyleProps,
+  passthroughStyle,
+  getResponsiveProp
+} from './styleProps';
+export {useSlotProps, cssModuleToSlots, SlotProvider, ClearSlots} from './Slots';
+export {useHasChild} from './useHasChild';
+export {useIsMobileDevice} from './useIsMobileDevice';
+export {useValueEffect} from '@react-aria/utils';
+export {BreakpointProvider, useMatchedBreakpoints, useBreakpoint} from './BreakpointProvider';
+export {useResizeObserver} from '@react-aria/utils';

package/src/styleProps.ts

@@ -0,0 +1,313 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {BackgroundColorValue, BorderColorValue, BorderRadiusValue, BorderSizeValue, ColorValue, ColorVersion, 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, colorVersion?: number) => string;
+export interface StyleHandlers {
+  [key: string]: [StyleName, StyleHandler]
+}
+
+export const baseStyleProps: StyleHandlers = {
+  margin: ['margin', dimensionValue],
+  marginStart: [rtl('marginLeft', 'marginRight'), dimensionValue],
+  marginEnd: [rtl('marginRight', 'marginLeft'), dimensionValue],
+  // marginLeft: ['marginLeft', dimensionValue],
+  // marginRight: ['marginRight', dimensionValue],
+  marginTop: ['marginTop', dimensionValue],
+  marginBottom: ['marginBottom', dimensionValue],
+  marginX: [['marginLeft', 'marginRight'], dimensionValue],
+  marginY: [['marginTop', 'marginBottom'], dimensionValue],
+  width: ['width', dimensionValue],
+  height: ['height', dimensionValue],
+  minWidth: ['minWidth', dimensionValue],
+  minHeight: ['minHeight', dimensionValue],
+  maxWidth: ['maxWidth', dimensionValue],
+  maxHeight: ['maxHeight', dimensionValue],
+  isHidden: ['display', hiddenValue],
+  alignSelf: ['alignSelf', passthroughStyle],
+  justifySelf: ['justifySelf', passthroughStyle],
+  position: ['position', anyValue],
+  zIndex: ['zIndex', anyValue],
+  top: ['top', dimensionValue],
+  bottom: ['bottom', dimensionValue],
+  start: [rtl('left', 'right'), dimensionValue],
+  end: [rtl('right', 'left'), dimensionValue],
+  left: ['left', dimensionValue],
+  right: ['right', dimensionValue],
+  order: ['order', anyValue],
+  flex: ['flex', flexValue],
+  flexGrow: ['flexGrow', passthroughStyle],
+  flexShrink: ['flexShrink', passthroughStyle],
+  flexBasis: ['flexBasis', passthroughStyle],
+  gridArea: ['gridArea', passthroughStyle],
+  gridColumn: ['gridColumn', passthroughStyle],
+  gridColumnEnd: ['gridColumnEnd', passthroughStyle],
+  gridColumnStart: ['gridColumnStart', passthroughStyle],
+  gridRow: ['gridRow', passthroughStyle],
+  gridRowEnd: ['gridRowEnd', passthroughStyle],
+  gridRowStart: ['gridRowStart', passthroughStyle]
+};
+
+export const viewStyleProps: StyleHandlers = {
+  ...baseStyleProps,
+  backgroundColor: ['backgroundColor', backgroundColorValue],
+  borderWidth: ['borderWidth', borderSizeValue],
+  borderStartWidth: [rtl('borderLeftWidth', 'borderRightWidth'), borderSizeValue],
+  borderEndWidth: [rtl('borderRightWidth', 'borderLeftWidth'), borderSizeValue],
+  borderLeftWidth: ['borderLeftWidth', borderSizeValue],
+  borderRightWidth: ['borderRightWidth', borderSizeValue],
+  borderTopWidth: ['borderTopWidth', borderSizeValue],
+  borderBottomWidth: ['borderBottomWidth', borderSizeValue],
+  borderXWidth: [['borderLeftWidth', 'borderRightWidth'], borderSizeValue],
+  borderYWidth: [['borderTopWidth', 'borderBottomWidth'], borderSizeValue],
+  borderColor: ['borderColor', borderColorValue],
+  borderStartColor: [rtl('borderLeftColor', 'borderRightColor'), borderColorValue],
+  borderEndColor: [rtl('borderRightColor', 'borderLeftColor'), borderColorValue],
+  borderLeftColor: ['borderLeftColor', borderColorValue],
+  borderRightColor: ['borderRightColor', borderColorValue],
+  borderTopColor: ['borderTopColor', borderColorValue],
+  borderBottomColor: ['borderBottomColor', borderColorValue],
+  borderXColor: [['borderLeftColor', 'borderRightColor'], borderColorValue],
+  borderYColor: [['borderTopColor', 'borderBottomColor'], borderColorValue],
+  borderRadius: ['borderRadius', borderRadiusValue],
+  borderTopStartRadius: [rtl('borderTopLeftRadius', 'borderTopRightRadius'), borderRadiusValue],
+  borderTopEndRadius: [rtl('borderTopRightRadius', 'borderTopLeftRadius'), borderRadiusValue],
+  borderBottomStartRadius: [rtl('borderBottomLeftRadius', 'borderBottomRightRadius'), borderRadiusValue],
+  borderBottomEndRadius: [rtl('borderBottomRightRadius', 'borderBottomLeftRadius'), borderRadiusValue],
+  borderTopLeftRadius: ['borderTopLeftRadius', borderRadiusValue],
+  borderTopRightRadius: ['borderTopRightRadius', borderRadiusValue],
+  borderBottomLeftRadius: ['borderBottomLeftRadius', borderRadiusValue],
+  borderBottomRightRadius: ['borderBottomRightRadius', borderRadiusValue],
+  padding: ['padding', dimensionValue],
+  paddingStart: [rtl('paddingLeft', 'paddingRight'), dimensionValue],
+  paddingEnd: [rtl('paddingRight', 'paddingLeft'), dimensionValue],
+  paddingLeft: ['paddingLeft', dimensionValue],
+  paddingRight: ['paddingRight', dimensionValue],
+  paddingTop: ['paddingTop', dimensionValue],
+  paddingBottom: ['paddingBottom', dimensionValue],
+  paddingX: [['paddingLeft', 'paddingRight'], dimensionValue],
+  paddingY: [['paddingTop', 'paddingBottom'], dimensionValue],
+  overflow: ['overflow', passthroughStyle]
+};
+
+const borderStyleProps = {
+  borderWidth: 'borderStyle',
+  borderLeftWidth: 'borderLeftStyle',
+  borderRightWidth: 'borderRightStyle',
+  borderTopWidth: 'borderTopStyle',
+  borderBottomWidth: 'borderBottomStyle'
+};
+
+function rtl(ltr: string, rtl: string) {
+  return (direction: Direction) => (
+    direction === 'rtl' ? rtl : ltr
+  );
+}
+
+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';
+  }
+
+  if (!value) {
+    return undefined;
+  }
+
+  if (UNIT_RE.test(value)) {
+    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', version = 5) {
+  if (version > 5) {
+    return `var(--spectrum-${value}, var(--spectrum-semantic-${value}-color-${type}))`;
+  }
+
+  return `var(--spectrum-legacy-color-${value}, var(--spectrum-global-color-${value}, var(--spectrum-semantic-${value}-color-${type})))`;
+}
+
+function backgroundColorValue(value: BackgroundColorValue, version = 5) {
+  if (!value) {
+    return undefined;
+  }
+
+  return `var(--spectrum-alias-background-color-${value}, ${colorValue(value as ColorValue, 'background', version)})`;
+}
+
+function borderColorValue(value: BorderColorValue, version = 5) {
+  if (!value)  {
+    return undefined;
+  }
+
+  if (value === 'default') {
+    return 'var(--spectrum-alias-border-color)';
+  }
+
+  return `var(--spectrum-alias-border-color-${value}, ${colorValue(value as ColorValue, 'border', version)})`;
+}
+
+function borderSizeValue(value?: BorderSizeValue | null) {
+  return value && value !== 'none'
+    ? `var(--spectrum-alias-border-size-${value})`
+    : '0';
+}
+
+function borderRadiusValue(value: BorderRadiusValue) {
+  if (!value) {
+    return undefined;
+  }
+
+  return `var(--spectrum-alias-border-radius-${value})`;
+}
+
+function hiddenValue(value: boolean) {
+  return value ? 'none' : undefined;
+}
+
+function anyValue(value: any) {
+  return value;
+}
+
+function flexValue(value: boolean | number | string) {
+  if (typeof value === 'boolean') {
+    return value ? '1' : undefined;
+  }
+
+  return '' + value;
+}
+
+export function convertStyleProps<C extends ColorVersion>(props: ViewStyleProps<C>, handlers: StyleHandlers, direction: Direction, matchedBreakpoints: Breakpoint[]) {
+  let style: CSSProperties = {};
+  for (let key in props) {
+    let styleProp = handlers[key];
+    if (!styleProp || props[key] == null) {
+      continue;
+    }
+
+    let [name, convert] = styleProp;
+    if (typeof name === 'function') {
+      name = name(direction);
+    }
+
+    let prop = getResponsiveProp(props[key], matchedBreakpoints);
+    let value = convert(prop, props.colorVersion);
+    if (Array.isArray(name)) {
+      for (let k of name) {
+        style[k] = value;
+      }
+    } else {
+      style[name] = value;
+    }
+  }
+
+  for (let prop in borderStyleProps) {
+    if (style[prop]) {
+      style[borderStyleProps[prop]] = 'solid';
+      style.boxSizing = 'border-box';
+    }
+  }
+
+  return style;
+}
+
+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 {
+    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 do something custom. ' +
+      'Note that this may break in future versions due to DOM structure changes.'
+    );
+  }
+
+  // @ts-ignore
+  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 do something custom. ' +
+      'Note that this may break in future versions due to DOM structure changes.'
+    );
+  }
+
+  let styleProps: HTMLAttributes<HTMLElement> = {
+    style,
+    className: UNSAFE_className
+  };
+
+  if (getResponsiveProp(props.isHidden, matchedBreakpoints)) {
+    styleProps.hidden = true;
+  }
+
+  return {
+    styleProps
+  };
+}
+
+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/useDOMRef.ts

@@ -0,0 +1,57 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {DOMRef, DOMRefValue, FocusableElement, FocusableRef, FocusableRefValue, RefObject} from '@react-types/shared';
+import {useImperativeHandle, useMemo, useRef} from 'react';
+
+export function createDOMRef<T extends HTMLElement = HTMLElement>(ref: RefObject<T | null>): DOMRefValue<T> {
+  return {
+    UNSAFE_getDOMNode() {
+      return ref.current;
+    }
+  };
+}
+
+export function createFocusableRef<T extends HTMLElement = HTMLElement>(domRef: RefObject<T | null>, focusableRef: RefObject<FocusableElement | null> = domRef): FocusableRefValue<T> {
+  return {
+    ...createDOMRef(domRef),
+    focus() {
+      if (focusableRef.current) {
+        focusableRef.current.focus();
+      }
+    }
+  };
+}
+
+export function useDOMRef<T extends HTMLElement = HTMLElement>(ref: DOMRef<T>): RefObject<T | null> {
+  let domRef = useRef<T>(null);
+  useImperativeHandle(ref, () => createDOMRef(domRef));
+  return domRef;
+}
+
+export function useFocusableRef<T extends HTMLElement = HTMLElement>(ref: FocusableRef<T>, focusableRef?: RefObject<FocusableElement | null>): RefObject<T | null> {
+  let domRef = useRef<T>(null);
+  useImperativeHandle(ref, () => createFocusableRef(domRef, focusableRef));
+  return domRef;
+}
+
+export function unwrapDOMRef<T extends HTMLElement>(ref: RefObject<DOMRefValue<T> | null>): RefObject<T | null> {
+  return {
+    get current() {
+      return ref.current && ref.current.UNSAFE_getDOMNode();
+    }
+  };
+}
+
+export function useUnwrapDOMRef<T extends HTMLElement>(ref: RefObject<DOMRefValue<T> | null>) : RefObject<T | null> {
+  return useMemo(() => unwrapDOMRef(ref), [ref]);
+}

package/src/useHasChild.ts

@@ -0,0 +1,23 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {RefObject} from '@react-types/shared';
+import {useLayoutEffect} from '@react-aria/utils';
+import {useState} from 'react';
+
+export function useHasChild(query: string, ref: RefObject<HTMLElement | null>) {
+  let [hasChild, setHasChild] = useState(true);
+  useLayoutEffect(() => {
+    setHasChild(!!(ref.current && ref.current.querySelector(query)));
+  }, [setHasChild, query, ref]);
+  return hasChild;
+}

package/src/useIsMobileDevice.ts

@@ -0,0 +1,24 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {useIsSSR} from '@react-aria/ssr';
+
+const MOBILE_SCREEN_WIDTH = 700;
+
+export function useIsMobileDevice(): boolean {
+  let isSSR = useIsSSR();
+  if (isSSR || typeof window === 'undefined') {
+    return false;
+  }
+
+  return window.screen.width <= MOBILE_SCREEN_WIDTH;
+}

package/src/useMediaQuery.ts

@@ -0,0 +1,44 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {useEffect, useState} from 'react';
+import {useIsSSR} from '@react-aria/ssr';
+
+export function useMediaQuery(query: string) {
+  let supportsMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia === 'function';
+  let [matches, setMatches] = useState(() =>
+    supportsMatchMedia
+      ? window.matchMedia(query).matches
+      : false
+  );
+
+  useEffect(() => {
+    if (!supportsMatchMedia) {
+      return;
+    }
+
+    let mq = window.matchMedia(query);
+    let onChange = (evt) => {
+      setMatches(evt.matches);
+    };
+
+    mq.addListener(onChange);
+    return () => {
+      mq.removeListener(onChange);
+    };
+  }, [supportsMatchMedia, query]);
+
+  // 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 ? false : matches;
+}