@yewdiel21/motion-kit 0.18.0 → 0.19.1

package/src/components/scroll-area/engine.ts

@@ -0,0 +1,528 @@
+import { gsap, EASE, registerMotion } from '../../core/gsap';
+import { requestFrame } from '../../core/frame';
+import { reduced } from '../../core/reduced';
+import { createScope } from '../../core/scope';
+import { TIMING } from '../../core/timing';
+import { inert, warnOnce, type Instance } from '../../core/types';
+import { blurIn, blurOut, press } from '../../motion/micro';
+import { iconSvg } from '../icons';
+
+/*
+ * Scroll area: the scroller keeps its native scrolling (keyboard, touch,
+ * momentum, snap, find in page) and hides its system bar; the kit's bars ride
+ * on top. At rest a bar is a 6 px pill without a rail; it shows while the
+ * pointer is over the area or the content scrolls and fades .9 s after. Over
+ * the bar a tonal rail comes in and the pill swells to 10 px on Melonmind's
+ * swing (CSS, so it is interrupted at once); grabbing it presses it
+ * (buttonClickAnimation) and turns it the accent while it follows the pointer
+ * with no easing. A click on the rail glides there (0.6 s, signature), cut
+ * short by the wheel, a touch, a key or another grab. The edges with more
+ * content fade out (a mask as deep as what is hidden, up to 24 px), and an
+ * optional "back to top" pill pops in out of a blur once the view has gone a
+ * screen down. The content is wrapped in a viewport, or an existing scroller
+ * inside the root is used as it is; destroy() leaves the DOM as it was.
+ */
+
+export type ScrollAreaVisibility = 'hover' | 'scroll' | 'always';
+export type ScrollAreaAxis = 'x' | 'y' | 'both';
+
+export interface ScrollAreaOptions {
+  /** When the bars show: 'hover' (pointer over the area or scrolling, default), 'scroll' (only scrolling) or 'always'. */
+  visibility?: ScrollAreaVisibility;
+  /** Which bars it can draw (default 'both'); each one shows only when its axis overflows. */
+  axis?: ScrollAreaAxis;
+  /** ms the bars stay after the last scroll or the pointer leaving (default 900). */
+  idle?: number;
+  /** Fade the edges that have more content: true (24 px, default), false, or the depth in px. */
+  fade?: boolean | number;
+  /** A "back to top" button: true (after one view's height), or the scroll distance in px that shows it. */
+  backToTop?: boolean | number;
+  /** Accessible name of the scrolling region. */
+  label?: string;
+  /** The viewport takes Tab focus so the keyboard can scroll it (default true); false when its content is focusable (a menu). */
+  focusable?: boolean;
+  /** Keep the bars out of assistive tech (default false): inside a menu or a listbox, whose children must be its items. */
+  decorative?: boolean;
+  /** An existing scroller inside the root; without it the root's content is wrapped in one. */
+  viewport?: HTMLElement | null;
+  /** Each scroll, with the progress along each axis (0 → 1). */
+  onScroll?: (progress: { x: number; y: number }) => void;
+}
+
+export interface ScrollAreaInstance extends Instance {
+  /** Scroll to a position in px; it glides unless `animate` is false or motion is reduced. */
+  scrollTo(position: { top?: number; left?: number }, options?: { animate?: boolean }): void;
+  /** Measure again (after the content or the size changed without the observers noticing). */
+  refresh(): void;
+  /** The element that scrolls. */
+  readonly viewport: HTMLElement | null;
+}
+
+type Axis = 'x' | 'y';
+
+interface Bar {
+  axis: Axis;
+  rail: HTMLElement;
+  thumb: HTMLElement;
+  pill: HTMLElement;
+  overflow: boolean;
+  /** Length of the rail and of the thumb, in px. */
+  track: number;
+  size: number;
+}
+
+let sequence = 0;
+const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));
+
+export function createScrollArea(root: HTMLElement | null, options: ScrollAreaOptions = {}): ScrollAreaInstance {
+  if (!root) {
+    warnOnce('scroll-area: missing root');
+    return inert({ scrollTo() {}, refresh() {}, viewport: null });
+  }
+  registerMotion();
+  const scope = createScope();
+  const visibility: ScrollAreaVisibility = options.visibility === 'scroll' || options.visibility === 'always' ? options.visibility : 'hover';
+  const axis: ScrollAreaAxis = options.axis === 'x' || options.axis === 'y' ? options.axis : 'both';
+  const idle = Number.isFinite(options.idle) ? Math.max(0, options.idle!) : TIMING.scrollArea.idleMs;
+  const fade = options.fade === false ? 0 : typeof options.fade === 'number' && Number.isFinite(options.fade) ? Math.max(0, options.fade) : TIMING.scrollArea.fade;
+
+  let viewport = options.viewport && options.viewport !== root && root.contains(options.viewport) ? options.viewport : null;
+  if (!viewport) {
+    const own = document.createElement('div');
+    own.append(...root.childNodes);
+    root.append(own);
+    // Last out: the rails and the button are gone by then, so the content goes back alone.
+    scope.add(() => own.replaceWith(...own.childNodes));
+    viewport = own;
+  }
+  const view = viewport;
+  // The mask depths and a held scroll-behavior are written inline: the original style comes back.
+  scope.attr(view, 'style', view.getAttribute('style'));
+  scope.attr(view, 'data-mk-scroll-viewport', '');
+  // aria-controls needs it; decorative bars do not, and a dialog's closing copy would repeat it.
+  if (!options.decorative && !view.id) scope.attr(view, 'id', `mk-scroll-${++sequence}`);
+  if (options.focusable !== false && !view.hasAttribute('tabindex')) scope.attr(view, 'tabindex', '0');
+  if (options.label) {
+    scope.attr(view, 'role', 'region');
+    scope.attr(view, 'aria-label', options.label);
+  }
+  scope.attr(root, 'data-mk-scroll-area', '');
+  scope.attr(root, 'data-mk-scroll-axis', axis);
+  if (fade) scope.attr(root, 'data-mk-fade', '');
+  // The bars are placed against the root: a static one becomes their containing block.
+  if (getComputedStyle(root).position === 'static') scope.attr(root, 'data-mk-scroll-anchor', '');
+  scope.attr(root, 'data-mk-ready', '');
+  scope.add(() => {
+    for (const name of ['data-mk-active', 'data-mk-dragging', 'data-mk-overflow-x', 'data-mk-overflow-y']) root.removeAttribute(name);
+  });
+
+  const effects = new Set<gsap.core.Animation>();
+  const keep = (animation: gsap.core.Animation | null) => {
+    if (!animation) return;
+    effects.add(animation);
+    // Finished ones leave as new ones arrive: the animation's own onComplete stays untouched.
+    for (const effect of effects) if (effect.totalProgress() === 1) effects.delete(effect);
+  };
+  scope.add(() => {
+    for (const effect of effects) effect.kill();
+    effects.clear();
+  });
+
+  const makeBar = (which: Axis): Bar => {
+    const rail = document.createElement('div');
+    rail.dataset.mkScrollRail = '';
+    rail.dataset.mkAxis = which;
+    if (options.decorative) rail.setAttribute('aria-hidden', 'true');
+    else {
+      rail.setAttribute('role', 'scrollbar');
+      rail.setAttribute('aria-controls', view.id);
+      rail.setAttribute('aria-orientation', which === 'y' ? 'vertical' : 'horizontal');
+      rail.setAttribute('aria-valuemin', '0');
+      rail.setAttribute('aria-valuemax', '100');
+      rail.setAttribute('aria-valuenow', '0');
+    }
+    rail.hidden = true;
+    // A dialog being dragged to close leaves its bars to the scroll.
+    rail.setAttribute('data-mk-no-drag', '');
+    const thumb = document.createElement('div');
+    thumb.dataset.mkScrollThumb = '';
+    const pill = document.createElement('span');
+    pill.dataset.mkScrollPill = '';
+    thumb.append(pill);
+    rail.append(thumb);
+    root.append(rail);
+    scope.add(() => rail.remove());
+    return { axis: which, rail, thumb, pill, overflow: false, track: 0, size: 0 };
+  };
+  const bars = (axis === 'both' ? (['y', 'x'] as const) : [axis]).map(makeBar);
+
+  let rtl = false;
+  const range = (which: Axis) => Math.max(0, which === 'y' ? view.scrollHeight - view.clientHeight : view.scrollWidth - view.clientWidth);
+  /** Distance from the start of the axis (the right edge in right-to-left text). */
+  const travelled = (which: Axis) => (which === 'y' ? view.scrollTop : rtl ? -view.scrollLeft : view.scrollLeft);
+  const progress = (which: Axis) => {
+    const total = range(which);
+    return total > 0 ? clamp(travelled(which) / total, 0, 1) : 0;
+  };
+  /** The scroll position for a share of the axis (0 = start). */
+  const positionAt = (which: Axis, share: number) => {
+    const at = clamp(share, 0, 1) * range(which);
+    return which === 'x' && rtl ? -at : at;
+  };
+
+  // Visibility.
+  let hideTimer: ReturnType<typeof setTimeout> | undefined;
+  scope.add(() => clearTimeout(hideTimer));
+  let hovering = false;
+  let overRail: HTMLElement | null = null;
+  let drag: { bar: Bar; id: number; offset: number; start: number } | null = null;
+  const anyOverflow = () => bars.some((bar) => bar.overflow);
+  const show = () => {
+    if (!anyOverflow()) return;
+    clearTimeout(hideTimer);
+    root.setAttribute('data-mk-active', '');
+  };
+  const settle = () => {
+    clearTimeout(hideTimer);
+    if (visibility === 'always') return;
+    hideTimer = setTimeout(() => {
+      if (drag || overRail || (visibility === 'hover' && hovering)) return;
+      root.removeAttribute('data-mk-active');
+    }, idle);
+  };
+
+  // A drag or a glide moves the scroll directly even when the page asks for smooth scrolling.
+  let held: { value: string; priority: string } | null = null;
+  const holdBehavior = () => {
+    if (held) return;
+    held = { value: view.style.getPropertyValue('scroll-behavior'), priority: view.style.getPropertyPriority('scroll-behavior') };
+    view.style.setProperty('scroll-behavior', 'auto', 'important');
+  };
+  const releaseBehavior = () => {
+    if (!held) return;
+    if (held.value) view.style.setProperty('scroll-behavior', held.value, held.priority);
+    else view.style.removeProperty('scroll-behavior');
+    held = null;
+  };
+
+  let glide: gsap.core.Tween | null = null;
+  const stopGlide = () => {
+    if (!glide) return;
+    glide.kill();
+    glide = null;
+    releaseBehavior();
+  };
+  scope.add(stopGlide);
+  const glideTo = (top: number | undefined, left: number | undefined, animate = true) => {
+    stopGlide();
+    const to = { top: top === undefined ? view.scrollTop : top, left: left === undefined ? view.scrollLeft : left };
+    if (!animate || reduced()) {
+      view.scrollTop = to.top;
+      view.scrollLeft = to.left;
+      return;
+    }
+    holdBehavior();
+    const at = { top: view.scrollTop, left: view.scrollLeft };
+    glide = gsap.to(at, {
+      ...to,
+      duration: TIMING.scrollArea.glide,
+      ease: EASE.signature,
+      onUpdate: () => {
+        view.scrollTop = at.top;
+        view.scrollLeft = at.left;
+      },
+      onComplete: () => {
+        glide = null;
+        releaseBehavior();
+      },
+    });
+  };
+  // The wheel, a touch, a key or a press on the content takes over from a glide.
+  for (const type of ['wheel', 'touchstart', 'keydown', 'pointerdown']) scope.on(view, type, stopGlide, { passive: true });
+
+  // Back to top.
+  let topButton: HTMLButtonElement | null = null;
+  let topShown = false;
+  if (options.backToTop) {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.dataset.mkScrollTop = '';
+    button.setAttribute('aria-label', 'Volver arriba');
+    button.innerHTML = iconSvg('toTop', 20);
+    button.hidden = true;
+    button.setAttribute('data-mk-no-drag', '');
+    root.append(button);
+    scope.add(() => button.remove());
+    scope.on(button, 'click', () => {
+      keep(press(button));
+      glideTo(0, undefined);
+    });
+    topButton = button;
+  }
+  const topThreshold = () => (typeof options.backToTop === 'number' && Number.isFinite(options.backToTop) ? Math.max(0, options.backToTop) : view.clientHeight);
+  const toggleTop = (next: boolean) => {
+    const button = topButton;
+    if (!button || next === topShown) return;
+    topShown = next;
+    gsap.killTweensOf(button);
+    if (next) {
+      gsap.set(button, { clearProps: 'opacity,transform,filter' });
+      button.hidden = false;
+      keep(blurIn(button, { from: 'pop' }));
+      return;
+    }
+    // Focus on a button that goes away would fall to the page: it stays in the area.
+    if (document.activeElement === button) (view.hasAttribute('tabindex') ? view : root).focus({ preventScroll: true });
+    const hide = () => {
+      if (topShown) return;
+      button.hidden = true;
+      gsap.set(button, { clearProps: 'opacity,transform,filter' });
+    };
+    const out = reduced() ? null : blurOut(button, { to: 'down', onComplete: hide });
+    if (out) keep(out);
+    else hide();
+  };
+
+  // Geometry.
+  /**
+   * Where the viewport sits inside the root (a palette's list between its field and its footer, a dialog's body):
+   * the bars and the button are placed against its box. Layout offsets, so a surface still scaling in measures right.
+   */
+  const placeOverlays = () => {
+    let top = 0;
+    let left = 0;
+    for (let node: HTMLElement | null = view; node && node !== root; ) {
+      top += node.offsetTop;
+      left += node.offsetLeft;
+      const parent = node.offsetParent as HTMLElement | null;
+      node = parent && root.contains(parent) ? parent : null;
+    }
+    const edges = {
+      top,
+      left,
+      right: root.clientWidth - left - view.offsetWidth,
+      bottom: root.clientHeight - top - view.offsetHeight,
+    };
+    for (const element of [...bars.map((bar) => bar.rail), topButton]) {
+      if (!element) continue;
+      for (const [edge, value] of Object.entries(edges)) element.style.setProperty(`--mk-scroll-view-${edge}`, `${Math.max(0, Math.round(value))}px`);
+    }
+  };
+
+  let measured = false;
+  const measure = () => {
+    rtl = getComputedStyle(view).direction === 'rtl';
+    const had = anyOverflow();
+    for (const bar of bars) {
+      bar.overflow = range(bar.axis) > 1;
+      bar.rail.hidden = !bar.overflow;
+      root.toggleAttribute(`data-mk-overflow-${bar.axis}`, bar.overflow);
+    }
+    placeOverlays();
+    // Read the rails once both are in place: each one stops short of the other in the corner.
+    for (const bar of bars) {
+      if (!bar.overflow) continue;
+      const vertical = bar.axis === 'y';
+      bar.track = vertical ? bar.rail.clientHeight : bar.rail.clientWidth;
+      const seen = vertical ? view.clientHeight : view.clientWidth;
+      const total = vertical ? view.scrollHeight : view.scrollWidth;
+      bar.size = clamp((bar.track * seen) / Math.max(1, total), Math.min(TIMING.scrollArea.minThumb, bar.track), bar.track);
+      bar.thumb.style[vertical ? 'height' : 'width'] = `${bar.size}px`;
+    }
+    const now = anyOverflow();
+    if (!now) {
+      clearTimeout(hideTimer);
+      root.removeAttribute('data-mk-active');
+    } else if (visibility === 'always') show();
+    else if (measured && !had) {
+      // Content that starts to overflow (a menu opening) shows its bar for a moment.
+      show();
+      settle();
+    }
+    measured = true;
+  };
+
+  const paint = () => {
+    for (const bar of bars) {
+      if (!bar.overflow) continue;
+      const share = progress(bar.axis);
+      const room = Math.max(0, bar.track - bar.size);
+      const offset = bar.axis === 'x' && rtl ? room * (1 - share) : room * share;
+      bar.thumb.style.transform = bar.axis === 'y' ? `translate3d(0, ${offset}px, 0)` : `translate3d(${offset}px, 0, 0)`;
+      if (!options.decorative) bar.rail.setAttribute('aria-valuenow', String(Math.round(share * 100)));
+    }
+    if (fade) {
+      const down = range('y');
+      const across = range('x');
+      const fromStart = Math.max(0, travelled('x'));
+      const depth = (hidden: number) => `${Math.round(clamp(hidden, 0, fade))}px`;
+      view.style.setProperty('--mk-scroll-fade-top', depth(view.scrollTop));
+      view.style.setProperty('--mk-scroll-fade-bottom', depth(down - view.scrollTop));
+      view.style.setProperty('--mk-scroll-fade-left', depth(rtl ? across - fromStart : fromStart));
+      view.style.setProperty('--mk-scroll-fade-right', depth(rtl ? fromStart : across - fromStart));
+    }
+    if (topButton) toggleTop(view.scrollTop > topThreshold());
+  };
+
+  let cancelFrame: (() => void) | null = null;
+  const schedule = () => {
+    if (cancelFrame) return;
+    cancelFrame = requestFrame(() => {
+      cancelFrame = null;
+      if (scope.disposed) return;
+      measure();
+      paint();
+    });
+  };
+  scope.add(() => cancelFrame?.());
+
+  scope.on(
+    view,
+    'scroll',
+    () => {
+      paint();
+      if (visibility !== 'always') {
+        show();
+        settle();
+      }
+      const detail = { x: progress('x'), y: progress('y') };
+      options.onScroll?.(detail);
+      root.dispatchEvent(new CustomEvent('mk:scroll', { bubbles: true, detail }));
+    },
+    { passive: true },
+  );
+
+  // Pointer: the area shows its bars while hovered; a bar under the pointer always shows.
+  scope.on(root, 'pointerenter', (event) => {
+    if ((event as PointerEvent).pointerType === 'touch') return;
+    hovering = true;
+    if (visibility === 'hover') show();
+  });
+  scope.on(root, 'pointerleave', () => {
+    hovering = false;
+    settle();
+  });
+
+  for (const bar of bars) {
+    const vertical = bar.axis === 'y';
+    scope.on(bar.rail, 'pointerenter', (event) => {
+      if ((event as PointerEvent).pointerType === 'touch') return;
+      overRail = bar.rail;
+      show();
+    });
+    scope.on(bar.rail, 'pointerleave', () => {
+      if (overRail === bar.rail) overRail = null;
+      settle();
+    });
+    // Grab: the scroll follows the pointer from where the thumb was taken.
+    scope.on(bar.thumb, 'pointerdown', (event) => {
+      const down = event as PointerEvent;
+      if (down.button !== 0) return;
+      down.preventDefault();
+      down.stopPropagation();
+      stopGlide();
+      holdBehavior();
+      const thumbBox = bar.thumb.getBoundingClientRect();
+      const railBox = bar.rail.getBoundingClientRect();
+      drag = {
+        bar,
+        id: down.pointerId,
+        offset: vertical ? down.clientY - thumbBox.top : down.clientX - thumbBox.left,
+        start: vertical ? railBox.top : railBox.left,
+      };
+      bar.rail.setAttribute('data-mk-dragging', '');
+      root.setAttribute('data-mk-dragging', '');
+      try {
+        bar.thumb.setPointerCapture(down.pointerId);
+      } catch {
+        // jsdom and synthetic events have no active pointer to capture.
+      }
+      show();
+      keep(press(bar.pill));
+    });
+    // A click on the rail glides so the thumb lands centred under the pointer.
+    scope.on(bar.rail, 'pointerdown', (event) => {
+      const down = event as PointerEvent;
+      if (down.button !== 0 || bar.thumb.contains(down.target as Node)) return;
+      down.preventDefault();
+      const box = bar.rail.getBoundingClientRect();
+      const at = vertical ? down.clientY - box.top : down.clientX - box.left;
+      const share = (at - bar.size / 2) / Math.max(1, bar.track - bar.size);
+      const target = positionAt(bar.axis, bar.axis === 'x' && rtl ? 1 - share : share);
+      if (vertical) glideTo(target, undefined);
+      else glideTo(undefined, target);
+    });
+  }
+
+  scope.on(window, 'pointermove', (event) => {
+    const move = event as PointerEvent;
+    if (!drag || move.pointerId !== drag.id) return;
+    const { bar } = drag;
+    const at = (bar.axis === 'y' ? move.clientY : move.clientX) - drag.start - drag.offset;
+    const share = at / Math.max(1, bar.track - bar.size);
+    const target = positionAt(bar.axis, bar.axis === 'x' && rtl ? 1 - share : share);
+    if (bar.axis === 'y') view.scrollTop = target;
+    else view.scrollLeft = target;
+    // The thumb answers in this same event, not when the scroll event comes.
+    paint();
+  });
+  const endDrag = () => {
+    if (!drag) return;
+    const { bar, id } = drag;
+    drag = null;
+    try {
+      if (bar.thumb.hasPointerCapture?.(id)) bar.thumb.releasePointerCapture(id);
+    } catch {
+      // Already released.
+    }
+    bar.rail.removeAttribute('data-mk-dragging');
+    root.removeAttribute('data-mk-dragging');
+    releaseBehavior();
+    if (!scope.disposed) settle();
+  };
+  const release = (event: Event) => {
+    if (drag && (event as PointerEvent).pointerId === drag.id) endDrag();
+  };
+  scope.on(window, 'pointerup', release);
+  scope.on(window, 'pointercancel', release);
+  for (const bar of bars) scope.on(bar.thumb, 'lostpointercapture', release);
+  scope.add(() => {
+    endDrag();
+    releaseBehavior();
+  });
+
+  // Size changes of the viewport or its content, and content added later.
+  if (typeof ResizeObserver === 'function') {
+    const resize = scope.observe(new ResizeObserver(schedule));
+    const watch = () => {
+      resize.observe(view);
+      for (const child of view.children) resize.observe(child);
+    };
+    watch();
+    if (typeof MutationObserver === 'function')
+      scope
+        .observe(
+          new MutationObserver(() => {
+            watch();
+            schedule();
+          }),
+        )
+        .observe(view, { childList: true });
+  }
+  scope.on(window, 'resize', schedule);
+
+  measure();
+  paint();
+
+  return {
+    scrollTo: ({ top, left } = {}, { animate = true } = {}) => glideTo(top, left, animate),
+    refresh: () => {
+      measure();
+      paint();
+    },
+    get viewport() {
+      return view;
+    },
+    destroy: () => scope.dispose(),
+  };
+}

package/src/components/scroll-area/react.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import { useRef, type CSSProperties, type HTMLAttributes, type MutableRefObject } from 'react';
+import { useIsomorphicLayoutEffect, useLatest } from '../../react/use-recipe';
+import { createScrollArea, type ScrollAreaInstance, type ScrollAreaOptions } from './engine';
+
+export interface ScrollAreaProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onScroll'>, Omit<ScrollAreaOptions, 'viewport'> {
+  /** Class and style of the element that scrolls (padding, gap, layout of the content). */
+  viewportClassName?: string;
+  viewportStyle?: CSSProperties;
+  unstyled?: boolean;
+  instanceRef?: MutableRefObject<ScrollAreaInstance | null>;
+}
+
+/**
+ * <ScrollArea style={{ height: 320 }} backToTop>…</ScrollArea>: the children scroll in a viewport with the kit's bars.
+ */
+export function ScrollArea({
+  visibility,
+  axis,
+  idle,
+  fade,
+  backToTop,
+  label,
+  focusable,
+  decorative,
+  onScroll,
+  viewportClassName,
+  viewportStyle,
+  unstyled,
+  instanceRef,
+  className,
+  children,
+  ...props
+}: ScrollAreaProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const viewport = useRef<HTMLDivElement>(null);
+  const scrolled = useLatest(onScroll);
+  useIsomorphicLayoutEffect(() => {
+    const instance = createScrollArea(ref.current, {
+      visibility,
+      axis,
+      idle,
+      fade,
+      backToTop,
+      label,
+      focusable,
+      decorative,
+      viewport: viewport.current,
+      onScroll: (progress) => scrolled.current?.(progress),
+    });
+    if (instanceRef) instanceRef.current = instance;
+    return () => {
+      instance.destroy();
+      if (instanceRef) instanceRef.current = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [visibility, axis, idle, fade, backToTop, label, focusable, decorative]);
+  const classes = [unstyled ? null : 'mk-scroll-area', className].filter(Boolean).join(' ');
+  return (
+    <div {...props} ref={ref} className={classes || undefined}>
+      <div ref={viewport} data-mk-scroll-viewport="" className={viewportClassName} style={viewportStyle}>
+        {children}
+      </div>
+    </div>
+  );
+}