@adamjanicki/ui 1.4.1 → 1.4.3

package/components/Hamburger/DoubleCross.d.ts

@@ -0,0 +1,3 @@
+import { type Props } from "./Hamburger";
+declare const DoubleCross: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default DoubleCross;

package/components/Hamburger/DoubleCross.js

@@ -0,0 +1,39 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import Hamburger, { defaultAngles } from "./Hamburger";
+var DoubleCross = function (props) {
+    var _a = props.direction, direction = _a === void 0 ? "left" : _a, rest = __rest(props, ["direction"]);
+    var openStyle = useMemo(function () {
+        var topAngle = defaultAngles[direction];
+        var topTransform = "rotate(".concat(topAngle, "deg)");
+        var bottomTransform = "rotate(".concat(-topAngle, "deg)");
+        return {
+            top: { transform: topTransform },
+            bottom: { transform: bottomTransform },
+        };
+    }, [direction]);
+    return _jsx(Hamburger, __assign({}, rest, { double: true, openStyle: openStyle }));
+};
+export default DoubleCross;

package/components/Hamburger/DoubleFlip.d.ts

@@ -0,0 +1,3 @@
+import { type Props } from "./Hamburger";
+declare const DoubleFlip: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default DoubleFlip;

package/components/Hamburger/DoubleFlip.js

@@ -0,0 +1,39 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import Hamburger, { flipAngles } from "./Hamburger";
+var DoubleFlip = function (props) {
+    var _a = props.direction, direction = _a === void 0 ? "left" : _a, rest = __rest(props, ["direction"]);
+    var openStyle = useMemo(function () {
+        var topAngle = flipAngles[direction];
+        var topTransform = "rotate(".concat(topAngle, "deg)");
+        var bottomTransform = "rotate(".concat(-topAngle, "deg)");
+        return {
+            top: { transform: topTransform },
+            bottom: { transform: bottomTransform },
+        };
+    }, [direction]);
+    return _jsx(Hamburger, __assign({}, rest, { double: true, openStyle: openStyle }));
+};
+export default DoubleFlip;

package/components/Hamburger/DoubleSpin.d.ts

@@ -0,0 +1,3 @@
+import { type Props } from "./Hamburger";
+declare const DoubleSpin: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default DoubleSpin;

package/components/Hamburger/DoubleSpin.js

@@ -0,0 +1,40 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import Hamburger, { defaultAngles } from "./Hamburger";
+var DoubleSpin = function (props) {
+    var _a = props.direction, direction = _a === void 0 ? "left" : _a, rest = __rest(props, ["direction"]);
+    var openStyle = useMemo(function () {
+        var topAngle = defaultAngles[direction];
+        var topTransform = "rotate(".concat(topAngle, "deg)");
+        var bottomTransform = "rotate(".concat(-topAngle, "deg)");
+        return {
+            top: { transform: topTransform },
+            bottom: { transform: bottomTransform },
+            outer: { transform: "rotate(180deg)" },
+        };
+    }, [direction]);
+    return _jsx(Hamburger, __assign({}, rest, { double: true, openStyle: openStyle }));
+};
+export default DoubleSpin;

package/components/Hamburger/Hamburger.d.ts

@@ -0,0 +1,58 @@
+export type Props = {
+    /**
+     * Size of the button in pixels
+     * @default 36
+     */
+    size?: number;
+    /**
+     * Direction the animation originates from;
+     * play around with this to see how it affects the animation because some of the animations are complicated
+     * @default "left"
+     */
+    direction?: "left" | "right";
+    /**
+     * Whether the button is open or closed
+     */
+    open: boolean;
+    /**
+     * Function to call when the button is clicked, usually should toggle the `open` state
+     */
+    onClick?: () => void;
+    /**
+     * Aria label for the button
+     */
+    "aria-label": string;
+    /**
+     * Duration of the animation in seconds
+     * @default 0.25
+     */
+    duration?: number;
+    /**
+     * [Optional] additional class name to apply to the button
+     */
+    className?: string;
+    /**
+     * [Optional] additional styles to apply to the button
+     */
+    style?: React.CSSProperties;
+};
+type OpenStyle = {
+    outer?: React.CSSProperties;
+    top: React.CSSProperties;
+    bottom: React.CSSProperties;
+    middle?: React.CSSProperties;
+};
+type InnerProps = Omit<Props, "variant" | "direction"> & {
+    double?: boolean;
+    openStyle: OpenStyle;
+};
+export declare const defaultAngles: {
+    readonly right: 45;
+    readonly left: -45;
+};
+export declare const flipAngles: {
+    readonly right: -135;
+    readonly left: -225;
+};
+declare const Hamburger: (props: InnerProps) => import("react/jsx-runtime").JSX.Element;
+export default Hamburger;

package/components/Hamburger/Hamburger.js

@@ -0,0 +1,65 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { UnstyledButton } from "../Button";
+export var defaultAngles = {
+    right: 45,
+    left: -45,
+};
+export var flipAngles = {
+    right: -135,
+    left: -225,
+};
+var Hamburger = function (props) {
+    var _a = props.size, size = _a === void 0 ? 36 : _a, _b = props.duration, duration = _b === void 0 ? 0.25 : _b, double = props.double, openStyle = props.openStyle, open = props.open, style = props.style, buttonProps = __rest(props, ["size", "duration", "double", "openStyle", "open", "style"]);
+    var lineHeight = Math.max(1, Math.round(size / 20));
+    var buttonStyle = {
+        width: size,
+        height: size,
+        display: "flex",
+        position: "relative",
+        justifyContent: "center",
+        alignItems: "center",
+        transition: "all ".concat(duration, "s ease"),
+    };
+    var commonLineStyle = {
+        height: lineHeight,
+        width: size * 0.7,
+        backgroundColor: "currentColor",
+        position: "absolute",
+        transition: "all ".concat(duration, "s ease"),
+    };
+    var yTranslateMagnitude = useMemo(function () { return size / (double ? 7 : 4); }, [size, double]);
+    var outer = openStyle.outer, top = openStyle.top, middle = openStyle.middle, bottom = openStyle.bottom;
+    var outerStyle = open ? outer : {};
+    var topStyle = open
+        ? top
+        : { transform: "translateY(-".concat(yTranslateMagnitude, "px)") };
+    var bottomStyle = open
+        ? bottom
+        : { transform: "translateY(".concat(yTranslateMagnitude, "px)") };
+    var middleStyle = open ? middle : {};
+    return (_jsxs(UnstyledButton, __assign({ style: __assign(__assign(__assign({}, style), outerStyle), buttonStyle) }, buttonProps, { children: [_jsx("span", { style: __assign(__assign({}, commonLineStyle), topStyle) }), !double && _jsx("span", { style: __assign(__assign({}, commonLineStyle), middleStyle) }), _jsx("span", { style: __assign(__assign({}, commonLineStyle), bottomStyle) })] })));
+};
+export default Hamburger;

package/components/Hamburger/TripleFade.d.ts

@@ -0,0 +1,3 @@
+import { type Props } from "./Hamburger";
+declare const TripleFade: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default TripleFade;

package/components/Hamburger/TripleFade.js

@@ -0,0 +1,40 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import Hamburger, { defaultAngles } from "./Hamburger";
+var TripleFade = function (props) {
+    var _a = props.direction, direction = _a === void 0 ? "left" : _a, rest = __rest(props, ["direction"]);
+    var openStyle = useMemo(function () {
+        var topAngle = defaultAngles[direction];
+        var topTransform = "rotate(".concat(topAngle, "deg)");
+        var bottomTransform = "rotate(".concat(-topAngle, "deg)");
+        return {
+            top: { transform: topTransform },
+            middle: { opacity: 0 },
+            bottom: { transform: bottomTransform },
+        };
+    }, [direction]);
+    return _jsx(Hamburger, __assign({}, rest, { openStyle: openStyle }));
+};
+export default TripleFade;

package/components/Hamburger/TripleFlip.d.ts

@@ -0,0 +1,3 @@
+import { type Props } from "./Hamburger";
+declare const TripleFlip: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default TripleFlip;

package/components/Hamburger/TripleFlip.js

@@ -0,0 +1,40 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import Hamburger, { flipAngles } from "./Hamburger";
+var TripleFlip = function (props) {
+    var _a = props.direction, direction = _a === void 0 ? "left" : _a, rest = __rest(props, ["direction"]);
+    var openStyle = useMemo(function () {
+        var topAngle = flipAngles[direction];
+        var topTransform = "rotate(".concat(topAngle, "deg)");
+        var bottomTransform = "rotate(".concat(-topAngle, "deg)");
+        return {
+            top: { transform: topTransform },
+            middle: { transform: "scale(0)" },
+            bottom: { transform: bottomTransform },
+        };
+    }, [direction]);
+    return _jsx(Hamburger, __assign({}, rest, { openStyle: openStyle }));
+};
+export default TripleFlip;

package/components/Hamburger/TriplePrestige.d.ts

@@ -0,0 +1,3 @@
+import { type Props } from "./Hamburger";
+declare const TriplePrestige: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default TriplePrestige;

package/components/Hamburger/TriplePrestige.js

@@ -0,0 +1,40 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import Hamburger, { defaultAngles } from "./Hamburger";
+var TriplePrestige = function (props) {
+    var _a = props.direction, direction = _a === void 0 ? "left" : _a, rest = __rest(props, ["direction"]);
+    var openStyle = useMemo(function () {
+        var topAngle = defaultAngles[direction];
+        var topTransform = "rotate(".concat(topAngle, "deg)");
+        var bottomTransform = "rotate(".concat(-topAngle, "deg)");
+        return {
+            top: { transform: topTransform },
+            middle: { transform: "scale(0)" },
+            bottom: { transform: bottomTransform },
+        };
+    }, [direction]);
+    return _jsx(Hamburger, __assign({}, rest, { openStyle: openStyle }));
+};
+export default TriplePrestige;

package/components/Hamburger/TripleSpin.d.ts

@@ -0,0 +1,3 @@
+import { type Props } from "./Hamburger";
+declare const TripleSpin: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default TripleSpin;

package/components/Hamburger/TripleSpin.js

@@ -0,0 +1,41 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import Hamburger, { defaultAngles } from "./Hamburger";
+var TripleSpin = function (props) {
+    var _a = props.direction, direction = _a === void 0 ? "left" : _a, rest = __rest(props, ["direction"]);
+    var openStyle = useMemo(function () {
+        var topAngle = defaultAngles[direction];
+        var topTransform = "rotate(".concat(topAngle, "deg)");
+        var bottomTransform = "rotate(".concat(-topAngle, "deg)");
+        return {
+            top: { transform: topTransform },
+            middle: { opacity: 0 },
+            bottom: { transform: bottomTransform },
+            outer: { transform: "rotate(180deg)" },
+        };
+    }, [direction]);
+    return _jsx(Hamburger, __assign({}, rest, { openStyle: openStyle }));
+};
+export default TripleSpin;

package/components/Hamburger/index.d.ts

@@ -0,0 +1,9 @@
+import TriplePrestige from "./TriplePrestige";
+export { TriplePrestige };
+export default TriplePrestige;
+export { default as DoubleCross } from "./DoubleCross";
+export { default as DoubleFlip } from "./DoubleFlip";
+export { default as DoubleSpin } from "./DoubleSpin";
+export { default as TripleFade } from "./TripleFade";
+export { default as TripleFlip } from "./TripleFlip";
+export { default as TripleSpin } from "./TripleSpin";

package/components/Hamburger/index.js

@@ -0,0 +1,9 @@
+import TriplePrestige from "./TriplePrestige";
+export { TriplePrestige };
+export default TriplePrestige;
+export { default as DoubleCross } from "./DoubleCross";
+export { default as DoubleFlip } from "./DoubleFlip";
+export { default as DoubleSpin } from "./DoubleSpin";
+export { default as TripleFade } from "./TripleFade";
+export { default as TripleFlip } from "./TripleFlip";
+export { default as TripleSpin } from "./TripleSpin";

package/hooks/index.d.ts

@@ -1,6 +1,6 @@
 export { default as useScrollLock } from "./useScrollLock";
 export { default as useMediaQuery } from "./useMediaQuery";
-export { default as useWatchScroll } from "./useWatchScroll";
+export { default as useScroll } from "./useScroll";
 export { default as useFocusTrap } from "./useFocusTrap";
 export { default as useScrollToHash } from "./useScrollToHash";
 export { default as useWindowResize } from "./useWindowResize";

package/hooks/index.js

@@ -1,6 +1,6 @@
 export { default as useScrollLock } from "./useScrollLock";
 export { default as useMediaQuery } from "./useMediaQuery";
-export { default as useWatchScroll } from "./useWatchScroll";
+export { default as useScroll } from "./useScroll";
 export { default as useFocusTrap } from "./useFocusTrap";
 export { default as useScrollToHash } from "./useScrollToHash";
 export { default as useWindowResize } from "./useWindowResize";

package/hooks/useScroll.d.ts

@@ -0,0 +1,9 @@
+/**
+ * A hook getting the current scroll position of the window.
+ * @returns an object containing the current scroll position of the window.
+ */
+declare const useScroll: () => {
+    scrollX: number;
+    scrollY: number;
+};
+export default useScroll;

package/hooks/useScroll.js

@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react";
+/**
+ * A hook getting the current scroll position of the window.
+ * @returns an object containing the current scroll position of the window.
+ */
+var useScroll = function () {
+    var _a = useState({
+        scrollX: window.scrollX,
+        scrollY: window.scrollY,
+    }), scroll = _a[0], setScroll = _a[1];
+    useEffect(function () {
+        var onScroll = function () {
+            setScroll({
+                scrollX: window.scrollX,
+                scrollY: window.scrollY,
+            });
+        };
+        window.addEventListener("scroll", onScroll);
+        return function () { return window.removeEventListener("scroll", onScroll); };
+    }, []);
+    return scroll;
+};
+export default useScroll;

package/index.d.ts

@@ -8,6 +8,8 @@ export { default as Alert } from "./components/Alert";
 export { default as Animated } from "./components/Animated";
 export { default as Badge } from "./components/Badge";
 export { default as Banner } from "./components/Banner";
+export * from "./components/Hamburger";
+export { default as Hamburger } from "./components/Hamburger";
 export { default as Select } from "./components/Select";
 export { default as ClickOutside } from "./components/ClickOutside";
 export { default as Layer } from "./components/Layer";

package/index.js

@@ -9,6 +9,8 @@ export { default as Alert } from "./components/Alert";
 export { default as Animated } from "./components/Animated";
 export { default as Badge } from "./components/Badge";
 export { default as Banner } from "./components/Banner";
+export * from "./components/Hamburger";
+export { default as Hamburger } from "./components/Hamburger";
 export { default as Select } from "./components/Select";
 export { default as ClickOutside } from "./components/ClickOutside";
 export { default as Layer } from "./components/Layer";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adamjanicki/ui",
-  "version": "1.4.1",
+  "version": "1.4.3",
   "description": "Basic UI components and hooks for React in TypeScript",
   "main": "./index.js",
   "types": "./index.d.ts",

package/hooks/useWatchScroll.d.ts

@@ -1,7 +0,0 @@
-/**
- * A hook for watching the window scroll.
- *
- * @param onScroll the callback for when the window is scrolled
- */
-declare const useWatchScroll: (onScroll: () => void) => void;
-export default useWatchScroll;

package/hooks/useWatchScroll.js

@@ -1,13 +0,0 @@
-import { useEffect } from "react";
-/**
- * A hook for watching the window scroll.
- *
- * @param onScroll the callback for when the window is scrolled
- */
-var useWatchScroll = function (onScroll) {
-    useEffect(function () {
-        window.addEventListener("scroll", onScroll);
-        return function () { return window.removeEventListener("scroll", onScroll); };
-    }, [onScroll]);
-};
-export default useWatchScroll;