@simoneggert/react-modal-sheet 5.4.3

package/src/styles.ts

@@ -0,0 +1,110 @@
+import type { CSSProperties } from 'react';
+
+export const styles = {
+  root: {
+    base: {
+      position: 'fixed',
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+      overflow: 'hidden',
+      pointerEvents: 'none',
+    },
+    decorative: {},
+  },
+  backdrop: {
+    base: {
+      zIndex: 1,
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+      touchAction: 'none',
+      userSelect: 'none',
+    },
+    decorative: {
+      backgroundColor: 'rgba(0, 0, 0, 0.2)',
+      border: 'none',
+      WebkitTapHighlightColor: 'transparent',
+    },
+  },
+  container: {
+    base: {
+      zIndex: 2,
+      position: 'absolute',
+      left: 0,
+      bottom: 0,
+      width: '100%',
+      pointerEvents: 'auto',
+      display: 'flex',
+      flexDirection: 'column',
+    },
+    decorative: {
+      backgroundColor: '#fff',
+      borderTopRightRadius: '8px',
+      borderTopLeftRadius: '8px',
+      boxShadow: '0px -2px 16px rgba(0, 0, 0, 0.3)',
+    },
+  },
+  headerWrapper: {
+    base: {
+      width: '100%',
+    },
+    decorative: {},
+  },
+  header: {
+    base: {
+      width: '100%',
+      position: 'relative',
+    },
+    decorative: {
+      height: '40px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+  },
+  indicatorWrapper: {
+    base: {
+      display: 'flex',
+    },
+    decorative: {},
+  },
+  indicator: {
+    base: {
+      display: 'inline-block',
+    },
+    decorative: {
+      width: '18px',
+      height: '4px',
+      borderRadius: '99px',
+      backgroundColor: '#ddd',
+    },
+  },
+  content: {
+    base: {
+      minHeight: '0px',
+      position: 'relative',
+      flexGrow: 1,
+      display: 'flex',
+      flexDirection: 'column',
+    },
+    decorative: {},
+  },
+  scroller: {
+    base: {
+      height: '100%',
+      overflowY: 'auto',
+      overscrollBehaviorY: 'none',
+    },
+    decorative: {},
+  },
+} satisfies Record<
+  string,
+  {
+    base: CSSProperties;
+    decorative: CSSProperties;
+  }
+>;

package/src/types.tsx

@@ -0,0 +1,154 @@
+import {
+  type DragHandler,
+  type EasingDefinition,
+  type MotionProps,
+  type MotionValue,
+  type motion,
+} from 'motion/react';
+import {
+  type ComponentPropsWithoutRef,
+  type ForwardRefExoticComponent,
+  type FunctionComponent,
+  type HTMLAttributes,
+  type ReactNode,
+  type RefAttributes,
+  type RefObject,
+} from 'react';
+
+export type SheetDetent = 'default' | 'full' | 'content';
+
+type CommonProps = {
+  className?: string;
+  unstyled?: boolean;
+};
+
+type MotionDivProps = ComponentPropsWithoutRef<typeof motion.div>;
+
+type MotionCommonProps = Omit<MotionDivProps, 'initial' | 'animate' | 'exit'>;
+
+export interface SheetTweenConfig {
+  ease: EasingDefinition;
+  duration: number;
+}
+
+export type SheetProps = {
+  unstyled?: boolean;
+  avoidKeyboard?: boolean;
+  children: ReactNode;
+  detent?: SheetDetent;
+  disableDismiss?: boolean;
+  disableDrag?: boolean;
+  disableScrollLocking?: boolean;
+  dragCloseThreshold?: number;
+  dragVelocityThreshold?: number;
+  initialSnap?: number; // index of snap points array
+  isOpen: boolean;
+  modalEffectRootId?: string;
+  modalEffectThreshold?: number;
+  mountPoint?: Element;
+  prefersReducedMotion?: boolean;
+  snapPoints?: number[];
+  tweenConfig?: SheetTweenConfig;
+  onClose: () => void;
+  onCloseEnd?: () => void;
+  onCloseStart?: () => void;
+  onOpenEnd?: () => void;
+  onOpenStart?: () => void;
+  onSnap?: (index: number) => void;
+} & MotionCommonProps;
+
+export type SheetContainerProps = MotionCommonProps &
+  CommonProps & {
+    children: ReactNode;
+  };
+
+export type SheetHeaderProps = MotionCommonProps &
+  CommonProps & {
+    children?: ReactNode;
+    disableDrag?: boolean;
+  };
+
+export type SheetContentProps = MotionCommonProps &
+  CommonProps & {
+    disableDrag?: boolean | ((args: SheetStateInfo) => boolean);
+    disableScroll?: boolean | ((args: SheetStateInfo) => boolean);
+    scrollRef?: RefObject<HTMLDivElement | null>;
+    scrollClassName?: string;
+    scrollStyle?: MotionProps['style'];
+  };
+
+export type SheetBackdropProps = MotionDivProps & CommonProps;
+
+export type SheetDragIndicatorProps = HTMLAttributes<HTMLDivElement> &
+  CommonProps;
+
+export interface SheetDragProps {
+  drag: 'y';
+  dragElastic: number;
+  dragMomentum: boolean;
+  dragPropagation: boolean;
+  onDrag: DragHandler;
+  onDragStart: DragHandler;
+  onDragEnd: DragHandler;
+}
+
+export type SheetStateInfo = {
+  scrollPosition?: 'top' | 'bottom' | 'middle';
+  currentSnap?: number;
+};
+
+export type SheetSnapPoint = {
+  snapIndex: number;
+  snapValue: number; // Absolute value from the bottom of the sheet
+  snapValueY: number; // Y value is inverted as `y = 0` means sheet is at the top
+};
+
+export interface SheetContextType {
+  currentSnap?: number;
+  detent: SheetDetent;
+  disableDrag: boolean;
+  dragProps: SheetDragProps;
+  indicatorRotation: MotionValue<number>;
+  avoidKeyboard: boolean;
+  prefersReducedMotion: boolean;
+  sheetBoundsRef: (node: HTMLDivElement | null) => void;
+  sheetRef: RefObject<any>;
+  unstyled: boolean;
+  y: MotionValue<any>;
+}
+
+export interface SheetScrollerContextType {
+  disableDrag: boolean;
+  setDragDisabled: () => void;
+  setDragEnabled: () => void;
+}
+
+type SheetComponent = ForwardRefExoticComponent<
+  SheetProps & RefAttributes<any>
+>;
+
+type ContainerComponent = ForwardRefExoticComponent<
+  SheetContainerProps & RefAttributes<any>
+>;
+
+type HeaderComponent = ForwardRefExoticComponent<
+  SheetHeaderProps & RefAttributes<any>
+>;
+
+type BackdropComponent = ForwardRefExoticComponent<
+  SheetBackdropProps & RefAttributes<any>
+>;
+
+type ContentComponent = ForwardRefExoticComponent<
+  SheetContentProps & RefAttributes<any>
+>;
+
+interface SheetCompoundComponent {
+  Container: ContainerComponent;
+  Header: HeaderComponent;
+  DragIndicator: FunctionComponent<SheetDragIndicatorProps>;
+  Content: ContentComponent;
+  Backdrop: BackdropComponent;
+}
+
+export type SheetCompound = SheetComponent & SheetCompoundComponent;

package/src/utils.ts

@@ -0,0 +1,116 @@
+import { type CSSProperties, type ForwardedRef, type RefCallback } from 'react';
+import { IS_SSR } from './constants';
+
+export function applyStyles(
+  styles: { base: CSSProperties; decorative: CSSProperties },
+  unstyled: boolean
+) {
+  return unstyled ? styles.base : { ...styles.base, ...styles.decorative };
+}
+
+export function isAscendingOrder(arr: number[]) {
+  for (let i = 0; i < arr.length; i++) {
+    if (arr[i + 1] < arr[i]) return false;
+  }
+  return true;
+}
+
+export function mergeRefs<T = any>(refs: ForwardedRef<T>[]): RefCallback<T> {
+  return (value: any) => {
+    refs.forEach((ref: any) => {
+      if (typeof ref === 'function') {
+        ref(value);
+      } else if (ref) {
+        ref.current = value;
+      }
+    });
+  };
+}
+
+export function isTouchDevice() {
+  if (IS_SSR) return false;
+  return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+}
+
+function testPlatform(re: RegExp) {
+  return typeof window !== 'undefined' && window.navigator != null
+    ? re.test(
+        // @ts-expect-error
+        window.navigator.userAgentData?.platform || window.navigator.platform
+      )
+    : false;
+}
+
+function cached(fn: () => boolean) {
+  let res: boolean | null = null;
+  return () => {
+    if (res == null) {
+      res = fn();
+    }
+    return res;
+  };
+}
+
+const isMac = cached(function () {
+  return testPlatform(/^Mac/i);
+});
+
+const isIPhone = cached(function () {
+  return testPlatform(/^iPhone/i);
+});
+
+const isIPad = cached(function () {
+  // iPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
+  return testPlatform(/^iPad/i) || (isMac() && navigator.maxTouchPoints > 1);
+});
+
+export const isIOS = cached(function () {
+  return isIPhone() || isIPad();
+});
+
+/** Wait for an element to be rendered and visible */
+export function waitForElement(
+  className: string,
+  interval = 50,
+  maxAttempts = 20
+) {
+  return new Promise<HTMLElement | null>((resolve) => {
+    let attempts = 0;
+    const timer = setInterval(() => {
+      const element = document.getElementsByClassName(
+        className
+      )[0] as HTMLElement;
+      attempts++;
+      if (element || attempts >= maxAttempts) {
+        clearInterval(timer);
+        resolve(element);
+      }
+    }, interval);
+  });
+}
+
+// HTML input types that do not cause the software keyboard to appear.
+const nonTextInputTypes = new Set([
+  'checkbox',
+  'radio',
+  'range',
+  'color',
+  'file',
+  'image',
+  'button',
+  'submit',
+  'reset',
+]);
+
+export function willOpenKeyboard(target: Element) {
+  return (
+    (target instanceof HTMLInputElement &&
+      !nonTextInputTypes.has(target.type)) ||
+    target instanceof HTMLTextAreaElement ||
+    (target instanceof HTMLElement && target.isContentEditable)
+  );
+}
+
+export function isHTTPS() {
+  return typeof window !== 'undefined' && window.isSecureContext;
+}