@tale-ui/react 0.0.3

package/scroll-area/scrollbar/ScrollAreaScrollbar.js

@@ -0,0 +1,199 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ScrollAreaScrollbar = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _ScrollAreaRootContext = require("../root/ScrollAreaRootContext");
+var _ScrollAreaScrollbarContext = require("./ScrollAreaScrollbarContext");
+var _useRenderElement = require("../../utils/useRenderElement");
+var _getOffset = require("../utils/getOffset");
+var _ScrollAreaRootCssVars = require("../root/ScrollAreaRootCssVars");
+var _ScrollAreaScrollbarCssVars = require("./ScrollAreaScrollbarCssVars");
+var _DirectionContext = require("../../direction-provider/DirectionContext");
+var _stateAttributes = require("../root/stateAttributes");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * A vertical or horizontal scrollbar for the scroll area.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Tale UI Scroll Area](https://base-ui.com/react/components/scroll-area)
+ */
+const ScrollAreaScrollbar = exports.ScrollAreaScrollbar = /*#__PURE__*/React.forwardRef(function ScrollAreaScrollbar(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    orientation = 'vertical',
+    keepMounted = false,
+    ...elementProps
+  } = componentProps;
+  const {
+    hovering,
+    scrollingX,
+    scrollingY,
+    hiddenState,
+    overflowEdges,
+    scrollbarYRef,
+    scrollbarXRef,
+    viewportRef,
+    thumbYRef,
+    thumbXRef,
+    handlePointerDown,
+    handlePointerUp,
+    rootId,
+    thumbSize
+  } = (0, _ScrollAreaRootContext.useScrollAreaRootContext)();
+  const state = {
+    hovering,
+    scrolling: {
+      horizontal: scrollingX,
+      vertical: scrollingY
+    }[orientation],
+    orientation,
+    hasOverflowX: !hiddenState.x,
+    hasOverflowY: !hiddenState.y,
+    overflowXStart: overflowEdges.xStart,
+    overflowXEnd: overflowEdges.xEnd,
+    overflowYStart: overflowEdges.yStart,
+    overflowYEnd: overflowEdges.yEnd,
+    cornerHidden: hiddenState.corner
+  };
+  const direction = (0, _DirectionContext.useDirection)();
+  React.useEffect(() => {
+    const viewportEl = viewportRef.current;
+    const scrollbarEl = orientation === 'vertical' ? scrollbarYRef.current : scrollbarXRef.current;
+    if (!scrollbarEl) {
+      return undefined;
+    }
+    function handleWheel(event) {
+      if (!viewportEl || !scrollbarEl || event.ctrlKey) {
+        return;
+      }
+      event.preventDefault();
+      if (orientation === 'vertical') {
+        if (viewportEl.scrollTop === 0 && event.deltaY < 0) {
+          return;
+        }
+      } else if (viewportEl.scrollLeft === 0 && event.deltaX < 0) {
+        return;
+      }
+      if (orientation === 'vertical') {
+        if (viewportEl.scrollTop === viewportEl.scrollHeight - viewportEl.clientHeight && event.deltaY > 0) {
+          return;
+        }
+      } else if (viewportEl.scrollLeft === viewportEl.scrollWidth - viewportEl.clientWidth && event.deltaX > 0) {
+        return;
+      }
+      if (orientation === 'vertical') {
+        viewportEl.scrollTop += event.deltaY;
+      } else {
+        viewportEl.scrollLeft += event.deltaX;
+      }
+    }
+    scrollbarEl.addEventListener('wheel', handleWheel, {
+      passive: false
+    });
+    return () => {
+      scrollbarEl.removeEventListener('wheel', handleWheel);
+    };
+  }, [orientation, scrollbarXRef, scrollbarYRef, viewportRef]);
+  const props = {
+    ...(rootId && {
+      'data-id': `${rootId}-scrollbar`
+    }),
+    onPointerDown(event) {
+      if (event.button !== 0) {
+        return;
+      }
+
+      // Ignore clicks on thumb
+      if (event.currentTarget !== event.target) {
+        return;
+      }
+      if (!viewportRef.current) {
+        return;
+      }
+
+      // Handle Y-axis (vertical) scroll
+      if (thumbYRef.current && scrollbarYRef.current && orientation === 'vertical') {
+        const thumbYOffset = (0, _getOffset.getOffset)(thumbYRef.current, 'margin', 'y');
+        const scrollbarYOffset = (0, _getOffset.getOffset)(scrollbarYRef.current, 'padding', 'y');
+        const thumbHeight = thumbYRef.current.offsetHeight;
+        const trackRectY = scrollbarYRef.current.getBoundingClientRect();
+        const clickY = event.clientY - trackRectY.top - thumbHeight / 2 - scrollbarYOffset + thumbYOffset / 2;
+        const scrollableContentHeight = viewportRef.current.scrollHeight;
+        const viewportHeight = viewportRef.current.clientHeight;
+        const maxThumbOffsetY = scrollbarYRef.current.offsetHeight - thumbHeight - scrollbarYOffset - thumbYOffset;
+        const scrollRatioY = clickY / maxThumbOffsetY;
+        const newScrollTop = scrollRatioY * (scrollableContentHeight - viewportHeight);
+        viewportRef.current.scrollTop = newScrollTop;
+      }
+      if (thumbXRef.current && scrollbarXRef.current && orientation === 'horizontal') {
+        const thumbXOffset = (0, _getOffset.getOffset)(thumbXRef.current, 'margin', 'x');
+        const scrollbarXOffset = (0, _getOffset.getOffset)(scrollbarXRef.current, 'padding', 'x');
+        const thumbWidth = thumbXRef.current.offsetWidth;
+        const trackRectX = scrollbarXRef.current.getBoundingClientRect();
+        const clickX = event.clientX - trackRectX.left - thumbWidth / 2 - scrollbarXOffset + thumbXOffset / 2;
+        const scrollableContentWidth = viewportRef.current.scrollWidth;
+        const viewportWidth = viewportRef.current.clientWidth;
+        const maxThumbOffsetX = scrollbarXRef.current.offsetWidth - thumbWidth - scrollbarXOffset - thumbXOffset;
+        const scrollRatioX = clickX / maxThumbOffsetX;
+        let newScrollLeft;
+        if (direction === 'rtl') {
+          // In RTL, invert the scroll direction
+          newScrollLeft = (1 - scrollRatioX) * (scrollableContentWidth - viewportWidth);
+
+          // Adjust for browsers that use negative scrollLeft in RTL
+          if (viewportRef.current.scrollLeft <= 0) {
+            newScrollLeft = -newScrollLeft;
+          }
+        } else {
+          newScrollLeft = scrollRatioX * (scrollableContentWidth - viewportWidth);
+        }
+        viewportRef.current.scrollLeft = newScrollLeft;
+      }
+      handlePointerDown(event);
+    },
+    onPointerUp: handlePointerUp,
+    style: {
+      position: 'absolute',
+      touchAction: 'none',
+      WebkitUserSelect: 'none',
+      userSelect: 'none',
+      ...(orientation === 'vertical' && {
+        top: 0,
+        bottom: `var(${_ScrollAreaRootCssVars.ScrollAreaRootCssVars.scrollAreaCornerHeight})`,
+        insetInlineEnd: 0,
+        [_ScrollAreaScrollbarCssVars.ScrollAreaScrollbarCssVars.scrollAreaThumbHeight]: `${thumbSize.height}px`
+      }),
+      ...(orientation === 'horizontal' && {
+        insetInlineStart: 0,
+        insetInlineEnd: `var(${_ScrollAreaRootCssVars.ScrollAreaRootCssVars.scrollAreaCornerWidth})`,
+        bottom: 0,
+        [_ScrollAreaScrollbarCssVars.ScrollAreaScrollbarCssVars.scrollAreaThumbWidth]: `${thumbSize.width}px`
+      })
+    }
+  };
+  const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
+    ref: [forwardedRef, orientation === 'vertical' ? scrollbarYRef : scrollbarXRef],
+    state,
+    props: [props, elementProps],
+    stateAttributesMapping: _stateAttributes.scrollAreaStateAttributesMapping
+  });
+  const contextValue = React.useMemo(() => ({
+    orientation
+  }), [orientation]);
+  const isHidden = orientation === 'vertical' ? hiddenState.y : hiddenState.x;
+  const shouldRender = keepMounted || !isHidden;
+  if (!shouldRender) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollAreaScrollbarContext.ScrollAreaScrollbarContext.Provider, {
+    value: contextValue,
+    children: element
+  });
+});
+if (process.env.NODE_ENV !== "production") ScrollAreaScrollbar.displayName = "ScrollAreaScrollbar";

package/scroll-area/scrollbar/ScrollAreaScrollbarContext.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export interface ScrollAreaScrollbarContext {
+  orientation: 'horizontal' | 'vertical';
+}
+export declare const ScrollAreaScrollbarContext: React.Context<ScrollAreaScrollbarContext | undefined>;
+export declare function useScrollAreaScrollbarContext(): ScrollAreaScrollbarContext;

package/scroll-area/scrollbar/ScrollAreaScrollbarContext.js

@@ -0,0 +1,19 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ScrollAreaScrollbarContext = void 0;
+exports.useScrollAreaScrollbarContext = useScrollAreaScrollbarContext;
+var React = _interopRequireWildcard(require("react"));
+const ScrollAreaScrollbarContext = exports.ScrollAreaScrollbarContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") ScrollAreaScrollbarContext.displayName = "ScrollAreaScrollbarContext";
+function useScrollAreaScrollbarContext() {
+  const context = React.useContext(ScrollAreaScrollbarContext);
+  if (context === undefined) {
+    throw /* FIXME (minify-errors-in-prod): Unminified error message in production build! */new Error('Tale UI: ScrollAreaScrollbarContext is missing. ScrollAreaScrollbar parts must be placed within <ScrollArea.Scrollbar>.');
+  }
+  return context;
+}

package/scroll-area/scrollbar/ScrollAreaScrollbarCssVars.d.ts

@@ -0,0 +1,12 @@
+export declare enum ScrollAreaScrollbarCssVars {
+  /**
+   * The scroll area thumb's height.
+   * @type {number}
+   */
+  scrollAreaThumbHeight = "--scroll-area-thumb-height",
+  /**
+   * The scroll area thumb's width.
+   * @type {number}
+   */
+  scrollAreaThumbWidth = "--scroll-area-thumb-width",
+}

package/scroll-area/scrollbar/ScrollAreaScrollbarCssVars.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ScrollAreaScrollbarCssVars = void 0;
+let ScrollAreaScrollbarCssVars = exports.ScrollAreaScrollbarCssVars = /*#__PURE__*/function (ScrollAreaScrollbarCssVars) {
+  /**
+   * The scroll area thumb's height.
+   * @type {number}
+   */
+  ScrollAreaScrollbarCssVars["scrollAreaThumbHeight"] = "--scroll-area-thumb-height";
+  /**
+   * The scroll area thumb's width.
+   * @type {number}
+   */
+  ScrollAreaScrollbarCssVars["scrollAreaThumbWidth"] = "--scroll-area-thumb-width";
+  return ScrollAreaScrollbarCssVars;
+}({});

package/scroll-area/scrollbar/ScrollAreaScrollbarDataAttributes.d.ts

@@ -0,0 +1,39 @@
+export declare enum ScrollAreaScrollbarDataAttributes {
+  /**
+   * Indicates the orientation of the scrollbar.
+   * @type {'horizontal' | 'vertical'}
+   */
+  orientation = "data-orientation",
+  /**
+   * Present when the pointer is over the scroll area.
+   */
+  hovering = "data-hovering",
+  /**
+   * Present when the user scrolls inside the scroll area.
+   */
+  scrolling = "data-scrolling",
+  /**
+   * Present when the scroll area content is wider than the viewport.
+   */
+  hasOverflowX = "data-has-overflow-x",
+  /**
+   * Present when the scroll area content is taller than the viewport.
+   */
+  hasOverflowY = "data-has-overflow-y",
+  /**
+   * Present when there is overflow on the horizontal start side.
+   */
+  overflowXStart = "data-overflow-x-start",
+  /**
+   * Present when there is overflow on the horizontal end side.
+   */
+  overflowXEnd = "data-overflow-x-end",
+  /**
+   * Present when there is overflow on the vertical start side.
+   */
+  overflowYStart = "data-overflow-y-start",
+  /**
+   * Present when there is overflow on the vertical end side.
+   */
+  overflowYEnd = "data-overflow-y-end",
+}

package/scroll-area/scrollbar/ScrollAreaScrollbarDataAttributes.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ScrollAreaScrollbarDataAttributes = void 0;
+let ScrollAreaScrollbarDataAttributes = exports.ScrollAreaScrollbarDataAttributes = /*#__PURE__*/function (ScrollAreaScrollbarDataAttributes) {
+  /**
+   * Indicates the orientation of the scrollbar.
+   * @type {'horizontal' | 'vertical'}
+   */
+  ScrollAreaScrollbarDataAttributes["orientation"] = "data-orientation";
+  /**
+   * Present when the pointer is over the scroll area.
+   */
+  ScrollAreaScrollbarDataAttributes["hovering"] = "data-hovering";
+  /**
+   * Present when the user scrolls inside the scroll area.
+   */
+  ScrollAreaScrollbarDataAttributes["scrolling"] = "data-scrolling";
+  /**
+   * Present when the scroll area content is wider than the viewport.
+   */
+  ScrollAreaScrollbarDataAttributes["hasOverflowX"] = "data-has-overflow-x";
+  /**
+   * Present when the scroll area content is taller than the viewport.
+   */
+  ScrollAreaScrollbarDataAttributes["hasOverflowY"] = "data-has-overflow-y";
+  /**
+   * Present when there is overflow on the horizontal start side.
+   */
+  ScrollAreaScrollbarDataAttributes["overflowXStart"] = "data-overflow-x-start";
+  /**
+   * Present when there is overflow on the horizontal end side.
+   */
+  ScrollAreaScrollbarDataAttributes["overflowXEnd"] = "data-overflow-x-end";
+  /**
+   * Present when there is overflow on the vertical start side.
+   */
+  ScrollAreaScrollbarDataAttributes["overflowYStart"] = "data-overflow-y-start";
+  /**
+   * Present when there is overflow on the vertical end side.
+   */
+  ScrollAreaScrollbarDataAttributes["overflowYEnd"] = "data-overflow-y-end";
+  return ScrollAreaScrollbarDataAttributes;
+}({});

package/scroll-area/thumb/ScrollAreaThumb.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { TaleUIComponentProps } from "../../utils/types.js";
+/**
+ * The draggable part of the scrollbar that indicates the current scroll position.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Tale UI Scroll Area](https://base-ui.com/react/components/scroll-area)
+ */
+export declare const ScrollAreaThumb: React.ForwardRefExoticComponent<Omit<ScrollAreaThumbProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface ScrollAreaThumbState {
+  orientation?: 'horizontal' | 'vertical' | undefined;
+}
+export interface ScrollAreaThumbProps extends TaleUIComponentProps<'div', ScrollAreaThumb.State> {}
+export declare namespace ScrollAreaThumb {
+  type State = ScrollAreaThumbState;
+  type Props = ScrollAreaThumbProps;
+}

package/scroll-area/thumb/ScrollAreaThumb.js

@@ -0,0 +1,68 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ScrollAreaThumb = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _ScrollAreaRootContext = require("../root/ScrollAreaRootContext");
+var _ScrollAreaScrollbarContext = require("../scrollbar/ScrollAreaScrollbarContext");
+var _ScrollAreaScrollbarCssVars = require("../scrollbar/ScrollAreaScrollbarCssVars");
+var _useRenderElement = require("../../utils/useRenderElement");
+/**
+ * The draggable part of the scrollbar that indicates the current scroll position.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Tale UI Scroll Area](https://base-ui.com/react/components/scroll-area)
+ */
+const ScrollAreaThumb = exports.ScrollAreaThumb = /*#__PURE__*/React.forwardRef(function ScrollAreaThumb(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    ...elementProps
+  } = componentProps;
+  const {
+    thumbYRef,
+    thumbXRef,
+    handlePointerDown,
+    handlePointerMove,
+    handlePointerUp,
+    setScrollingX,
+    setScrollingY
+  } = (0, _ScrollAreaRootContext.useScrollAreaRootContext)();
+  const {
+    orientation
+  } = (0, _ScrollAreaScrollbarContext.useScrollAreaScrollbarContext)();
+  const state = {
+    orientation
+  };
+  const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
+    ref: [forwardedRef, orientation === 'vertical' ? thumbYRef : thumbXRef],
+    state,
+    props: [{
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp(event) {
+        if (orientation === 'vertical') {
+          setScrollingY(false);
+        }
+        if (orientation === 'horizontal') {
+          setScrollingX(false);
+        }
+        handlePointerUp(event);
+      },
+      style: {
+        ...(orientation === 'vertical' && {
+          height: `var(${_ScrollAreaScrollbarCssVars.ScrollAreaScrollbarCssVars.scrollAreaThumbHeight})`
+        }),
+        ...(orientation === 'horizontal' && {
+          width: `var(${_ScrollAreaScrollbarCssVars.ScrollAreaScrollbarCssVars.scrollAreaThumbWidth})`
+        })
+      }
+    }, elementProps]
+  });
+  return element;
+});
+if (process.env.NODE_ENV !== "production") ScrollAreaThumb.displayName = "ScrollAreaThumb";

package/scroll-area/thumb/ScrollAreaThumbDataAttributes.d.ts

@@ -0,0 +1,7 @@
+export declare enum ScrollAreaThumbDataAttributes {
+  /**
+   * Indicates the orientation of the scrollbar.
+   * @type {'horizontal' | 'vertical'}
+   */
+  orientation = "data-orientation",
+}

package/scroll-area/thumb/ScrollAreaThumbDataAttributes.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ScrollAreaThumbDataAttributes = void 0;
+let ScrollAreaThumbDataAttributes = exports.ScrollAreaThumbDataAttributes = /*#__PURE__*/function (ScrollAreaThumbDataAttributes) {
+  /**
+   * Indicates the orientation of the scrollbar.
+   * @type {'horizontal' | 'vertical'}
+   */
+  ScrollAreaThumbDataAttributes["orientation"] = "data-orientation";
+  return ScrollAreaThumbDataAttributes;
+}({});

package/scroll-area/utils/getOffset.d.ts

@@ -0,0 +1 @@
+export declare function getOffset(element: Element | null, prop: 'margin' | 'padding', axis: 'x' | 'y'): number;

package/scroll-area/utils/getOffset.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getOffset = getOffset;
+function getOffset(element, prop, axis) {
+  if (!element) {
+    return 0;
+  }
+  const styles = getComputedStyle(element);
+  const propAxis = axis === 'x' ? 'Inline' : 'Block';
+
+  // Safari misreports `marginInlineEnd` in RTL.
+  // We have to assume the start/end values are symmetrical, which is likely.
+  if (axis === 'x' && prop === 'margin') {
+    return parseFloat(styles[`${prop}InlineStart`]) * 2;
+  }
+  return parseFloat(styles[`${prop}${propAxis}Start`]) + parseFloat(styles[`${prop}${propAxis}End`]);
+}

package/scroll-area/utils/onVisible.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Executes a callback when an element becomes visible.
+ */
+export declare function onVisible(element: HTMLElement, callback: () => void): () => void;

package/scroll-area/utils/onVisible.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.onVisible = onVisible;
+/**
+ * Executes a callback when an element becomes visible.
+ */
+function onVisible(element, callback) {
+  if (typeof IntersectionObserver === 'undefined') {
+    return () => {};
+  }
+  const observer = new IntersectionObserver(entries => {
+    entries.forEach(entry => {
+      if (entry.intersectionRatio > 0) {
+        callback();
+        observer.disconnect();
+      }
+    });
+  });
+  observer.observe(element);
+  return () => {
+    observer.disconnect();
+  };
+}

package/scroll-area/utils/scrollEdges.d.ts

@@ -0,0 +1,2 @@
+export declare const SCROLL_EDGE_TOLERANCE_PX = 1;
+export declare function normalizeScrollOffset(value: number, max: number): number;

package/scroll-area/utils/scrollEdges.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SCROLL_EDGE_TOLERANCE_PX = void 0;
+exports.normalizeScrollOffset = normalizeScrollOffset;
+var _clamp = require("../../utils/clamp");
+const SCROLL_EDGE_TOLERANCE_PX = exports.SCROLL_EDGE_TOLERANCE_PX = 1;
+function normalizeScrollOffset(value, max) {
+  if (max <= 0) {
+    return 0;
+  }
+  const clamped = (0, _clamp.clamp)(value, 0, max);
+  const startDistance = clamped;
+  const endDistance = max - clamped;
+  const withinStartTolerance = startDistance <= SCROLL_EDGE_TOLERANCE_PX;
+  const withinEndTolerance = endDistance <= SCROLL_EDGE_TOLERANCE_PX;
+  if (withinStartTolerance && withinEndTolerance) {
+    return startDistance <= endDistance ? 0 : max;
+  }
+  if (withinStartTolerance) {
+    return 0;
+  }
+  if (withinEndTolerance) {
+    return max;
+  }
+  return clamped;
+}

package/scroll-area/viewport/ScrollAreaViewport.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { TaleUIComponentProps } from "../../utils/types.js";
+import type { ScrollAreaRoot } from "../root/ScrollAreaRoot.js";
+/**
+ * The actual scrollable container of the scroll area.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Tale UI Scroll Area](https://base-ui.com/react/components/scroll-area)
+ */
+export declare const ScrollAreaViewport: React.ForwardRefExoticComponent<Omit<ScrollAreaViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface ScrollAreaViewportProps extends TaleUIComponentProps<'div', ScrollAreaViewport.State> {}
+export interface ScrollAreaViewportState extends ScrollAreaRoot.State {}
+export declare namespace ScrollAreaViewport {
+  type Props = ScrollAreaViewportProps;
+  type State = ScrollAreaViewportState;
+}