@bifrostui/react 2.0.0-alpha.0 → 2.0.0-alpha.10

package/es/ScrollView/__tests__/fixtures/A11yDemos.js

@@ -0,0 +1,283 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import React from "react";
+import ScrollView from "../../ScrollView";
+const BasicScrollViewDemo = () => {
+  return /* @__PURE__ */ React.createElement(ScrollView, { scrollY: true, style: { height: "300px", width: "100%" } }, Array.from({ length: 50 }, (_, index) => /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      key: index,
+      style: { padding: "10px", borderBottom: "1px solid #eee" }
+    },
+    "Item ",
+    index + 1
+  )));
+};
+const HorizontalScrollViewDemo = () => {
+  return /* @__PURE__ */ React.createElement(ScrollView, { scrollX: true, style: { width: "300px" } }, /* @__PURE__ */ React.createElement("div", { style: { display: "flex", width: "max-content" } }, Array.from({ length: 20 }, (_, index) => /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      key: index,
+      style: {
+        minWidth: "100px",
+        height: "80px",
+        margin: "0 5px",
+        padding: "10px",
+        backgroundColor: "#f0f0f0",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }
+    },
+    "Item ",
+    index + 1
+  ))));
+};
+const ScrollEventsDemo = () => {
+  const [scrollInfo, setScrollInfo] = React.useState({
+    scrollTop: 0,
+    atTop: false,
+    atBottom: false
+  });
+  const handleScroll = (e) => {
+    var _a;
+    const event = e;
+    const scrollTop = ((_a = event.detail) == null ? void 0 : _a.scrollTop) || 0;
+    setScrollInfo((prev) => __spreadProps(__spreadValues({}, prev), {
+      scrollTop
+    }));
+  };
+  const handleScrollToUpper = () => {
+    setScrollInfo((prev) => __spreadProps(__spreadValues({}, prev), { atTop: true, atBottom: false }));
+  };
+  const handleScrollToLower = () => {
+    setScrollInfo((prev) => __spreadProps(__spreadValues({}, prev), { atTop: false, atBottom: true }));
+  };
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      "data-testid": "scroll-info",
+      style: {
+        marginBottom: "10px",
+        padding: "10px",
+        backgroundColor: "#f9f9f9"
+      }
+    },
+    /* @__PURE__ */ React.createElement("p", null, "Scroll Top: ", scrollInfo.scrollTop),
+    /* @__PURE__ */ React.createElement("p", null, "At Top: ", scrollInfo.atTop ? "Yes" : "No"),
+    /* @__PURE__ */ React.createElement("p", null, "At Bottom: ", scrollInfo.atBottom ? "Yes" : "No")
+  ), /* @__PURE__ */ React.createElement(
+    ScrollView,
+    {
+      scrollY: true,
+      style: { height: "200px", width: "100%" },
+      onScroll: handleScroll,
+      onScrollToUpper: handleScrollToUpper,
+      onScrollToLower: handleScrollToLower,
+      upperThreshold: 30,
+      lowerThreshold: 30
+    },
+    Array.from({ length: 30 }, (_, index) => /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        key: index,
+        style: { padding: "15px", borderBottom: "1px solid #ddd" }
+      },
+      "Scroll Item ",
+      index + 1
+    ))
+  ));
+};
+const ControlledScrollDemo = () => {
+  const [scrollTop, setScrollTop] = React.useState(0);
+  const [scrollIntoView, setScrollIntoView] = React.useState("");
+  const scrollToPosition = (position) => {
+    setScrollIntoView("");
+    setScrollTop(position);
+  };
+  const scrollToElement = (elementId) => {
+    setScrollTop(0);
+    setScrollIntoView(elementId);
+  };
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        marginBottom: "10px",
+        padding: "10px",
+        backgroundColor: "#f5f5f5"
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: () => scrollToPosition(0),
+        style: { marginRight: "5px" }
+      },
+      "Top"
+    ),
+    /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: () => scrollToPosition(200),
+        style: { marginRight: "5px" }
+      },
+      "200px"
+    ),
+    /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: () => scrollToElement("item-10"),
+        style: { marginRight: "5px" }
+      },
+      "Item 10"
+    ),
+    /* @__PURE__ */ React.createElement("button", { type: "button", onClick: () => scrollToElement("item-20") }, "Item 20")
+  ), /* @__PURE__ */ React.createElement(
+    ScrollView,
+    {
+      scrollY: true,
+      style: { height: "250px", width: "100%" },
+      scrollTop,
+      scrollIntoView,
+      scrollWithAnimation: true
+    },
+    Array.from({ length: 30 }, (_, index) => /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        key: index,
+        id: `item-${index + 1}`,
+        style: {
+          padding: "20px",
+          borderBottom: "1px solid #ccc",
+          backgroundColor: (index + 1) % 10 === 0 ? "#e6f3ff" : "white"
+        }
+      },
+      "Item ",
+      index + 1,
+      " ",
+      (index + 1) % 10 === 0 && "(Highlighted)"
+    ))
+  ));
+};
+const BidirectionalScrollDemo = () => {
+  return /* @__PURE__ */ React.createElement(
+    ScrollView,
+    {
+      scrollX: true,
+      scrollY: true,
+      style: {
+        width: "300px",
+        height: "200px",
+        border: "1px solid #ddd",
+        borderRadius: "4px"
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          width: "600px",
+          height: "400px",
+          backgroundImage: "linear-gradient(45deg, #f0f0f0 25%, transparent 25%), linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f0f0f0 75%), linear-gradient(-45deg, transparent 75%, #f0f0f0 75%)",
+          backgroundSize: "20px 20px",
+          backgroundPosition: "0 0, 0 10px, 10px -10px, -10px 0px",
+          position: "relative"
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            padding: "20px",
+            backgroundColor: "white",
+            border: "2px solid #007acc",
+            borderRadius: "8px",
+            boxShadow: "0 2px 8px rgba(0,0,0,0.1)"
+          }
+        },
+        /* @__PURE__ */ React.createElement("h3", { style: { margin: "0 0 10px 0", color: "#007acc" } }, "Scroll in both directions!"),
+        /* @__PURE__ */ React.createElement("p", { style: { margin: 0, color: "#666" } }, "This content area is larger than the viewport")
+      )
+    )
+  );
+};
+const ThresholdTestDemo = () => {
+  const [thresholdEvents, setThresholdEvents] = React.useState([]);
+  const addEvent = (event) => {
+    setThresholdEvents((prev) => [
+      ...prev.slice(-4),
+      `${(/* @__PURE__ */ new Date()).toLocaleTimeString()}: ${event}`
+    ]);
+  };
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      "data-testid": "threshold-events",
+      style: {
+        marginBottom: "10px",
+        padding: "10px",
+        backgroundColor: "#f0f8ff",
+        minHeight: "80px"
+      }
+    },
+    /* @__PURE__ */ React.createElement("strong", null, "Threshold Events:"),
+    thresholdEvents.map((event, index) => /* @__PURE__ */ React.createElement("div", { key: index, style: { fontSize: "12px", color: "#666" } }, event))
+  ), /* @__PURE__ */ React.createElement(
+    ScrollView,
+    {
+      scrollY: true,
+      style: { height: "150px", width: "100%" },
+      upperThreshold: 20,
+      lowerThreshold: 20,
+      onScrollToUpper: () => addEvent("Reached upper threshold (20px)"),
+      onScrollToLower: () => addEvent("Reached lower threshold (20px)")
+    },
+    Array.from({ length: 20 }, (_, index) => /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        key: index,
+        style: {
+          padding: "12px",
+          borderBottom: "1px solid #eee",
+          backgroundColor: index === 0 || index === 19 ? "#fff3cd" : "white"
+        }
+      },
+      index === 0 && "First Item (Top Threshold Test)",
+      index === 19 && "Last Item (Bottom Threshold Test)",
+      index !== 0 && index !== 19 && `Item ${index + 1}`
+    ))
+  ));
+};
+export {
+  BasicScrollViewDemo,
+  BidirectionalScrollDemo,
+  ControlledScrollDemo,
+  HorizontalScrollViewDemo,
+  ScrollEventsDemo,
+  ThresholdTestDemo
+};

package/es/ScrollView/useScrollView.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ScrollViewProps } from './ScrollView.types';
+export interface UseScrollViewParameters extends ScrollViewProps {
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface UseScrollViewReturnValue {
+    getRootProps: (otherHandlers?: Record<string, unknown>) => Record<string, unknown>;
+    containerRef: React.RefCallback<HTMLDivElement>;
+}
+export declare function useScrollView(parameters: UseScrollViewParameters): UseScrollViewReturnValue;

package/es/ScrollView/useScrollView.js

@@ -0,0 +1,279 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { useForkRef } from "@bifrostui/utils";
+import { useCallback, useEffect, useRef } from "react";
+function easeOutScroll(from, to, callback) {
+  if (from === to || typeof from !== "number") {
+    return;
+  }
+  const change = to - from;
+  const dur = 500;
+  const sTime = +/* @__PURE__ */ new Date();
+  function linear(t, b, c, d) {
+    return c * t / d + b;
+  }
+  const isLarger = to >= from;
+  function step() {
+    const stepFrom = linear(+/* @__PURE__ */ new Date() - sTime, from, change, dur);
+    if (isLarger && stepFrom >= to || !isLarger && to >= stepFrom) {
+      callback == null ? void 0 : callback(to);
+      return;
+    }
+    callback == null ? void 0 : callback(stepFrom);
+    requestAnimationFrame(step);
+  }
+  step();
+}
+function useScrollView(parameters) {
+  const _a = parameters, {
+    ref,
+    onScroll,
+    onScrollToUpper,
+    onScrollToLower,
+    scrollTop: scrollTopProp,
+    scrollLeft: scrollLeftProp,
+    scrollX,
+    scrollY,
+    scrollIntoView,
+    onTouchMove: propsOnTouchMove,
+    scrollIntoViewAlignment,
+    upperThreshold = 50,
+    lowerThreshold = 50,
+    scrollWithAnimation
+  } = _a, otherProps = __objRest(_a, [
+    "ref",
+    "onScroll",
+    "onScrollToUpper",
+    "onScrollToLower",
+    "scrollTop",
+    "scrollLeft",
+    "scrollX",
+    "scrollY",
+    "scrollIntoView",
+    "onTouchMove",
+    "scrollIntoViewAlignment",
+    "upperThreshold",
+    "lowerThreshold",
+    "scrollWithAnimation"
+  ]);
+  const container = useRef(null);
+  const handleRef = useForkRef(ref, container);
+  const upperLowerStatus = useRef(0);
+  const onTouchMove = (_e) => {
+  };
+  const scrollVertical = useCallback((top, isAnimation) => {
+    if (top === void 0)
+      return;
+    if (isAnimation) {
+      easeOutScroll(container.current.scrollTop, top, (pos) => {
+        if (container.current)
+          container.current.scrollTop = pos;
+      });
+    } else if (container.current)
+      container.current.scrollTop = top;
+  }, []);
+  const scrollHorizontal = useCallback(
+    (left, isAnimation) => {
+      if (left === void 0)
+        return;
+      if (isAnimation) {
+        easeOutScroll(container.current.scrollLeft, left, (pos) => {
+          if (container.current)
+            container.current.scrollLeft = pos;
+        });
+      } else if (container.current)
+        container.current.scrollLeft = left;
+    },
+    []
+  );
+  const handleScroll = useCallback(
+    (isInit = false) => {
+      var _a2, _b;
+      const isAnimation = scrollWithAnimation;
+      if (scrollIntoView && typeof scrollIntoView === "string" && ((_b = (_a2 = container == null ? void 0 : container.current) == null ? void 0 : _a2.querySelector) == null ? void 0 : _b.call(_a2, `#${scrollIntoView}`))) {
+        const doScrollIntoView = (id, alignment = "start", _isAnimation = isAnimation) => {
+          const target = container.current.querySelector(
+            `#${id}`
+          );
+          if (scrollY) {
+            const start = target.offsetTop;
+            const end = target.offsetTop + target.offsetHeight - container.current.clientHeight;
+            let nearest;
+            if (container.current.scrollTop < end)
+              nearest = end;
+            else if (container.current.scrollTop > start)
+              nearest = start;
+            else
+              nearest = container.current.scrollTop;
+            const center = (start + end) / 2;
+            const positions = { start, end, nearest, center };
+            scrollVertical(
+              positions[alignment],
+              _isAnimation
+            );
+          }
+          if (scrollX) {
+            const start = target.offsetLeft;
+            const end = target.offsetLeft + target.offsetWidth - container.current.clientWidth;
+            let nearest;
+            if (container.current.scrollLeft < end)
+              nearest = end;
+            else if (container.current.scrollLeft > start)
+              nearest = start;
+            else
+              nearest = container.current.scrollLeft;
+            const center = (start + end) / 2;
+            const positions = { start, end, nearest, center };
+            scrollHorizontal(
+              positions[alignment],
+              _isAnimation
+            );
+          }
+        };
+        if (isInit) {
+          setTimeout(
+            () => doScrollIntoView(
+              scrollIntoView,
+              scrollIntoViewAlignment,
+              isAnimation
+            ),
+            500
+          );
+        } else {
+          doScrollIntoView(
+            scrollIntoView,
+            scrollIntoViewAlignment,
+            isAnimation
+          );
+        }
+      } else {
+        if (scrollY && typeof scrollTopProp === "number" && scrollTopProp !== container.current.scrollTop) {
+          if (isInit) {
+            setTimeout(() => scrollVertical(scrollTopProp, isAnimation), 10);
+          } else {
+            scrollVertical(scrollTopProp, isAnimation);
+          }
+        }
+        if (scrollX && typeof scrollLeftProp === "number" && scrollLeftProp !== container.current.scrollLeft) {
+          if (isInit) {
+            setTimeout(() => scrollHorizontal(scrollLeftProp, isAnimation), 10);
+          } else {
+            scrollHorizontal(scrollLeftProp, isAnimation);
+          }
+        }
+      }
+    },
+    [
+      scrollIntoView,
+      scrollY,
+      scrollTopProp,
+      scrollX,
+      scrollLeftProp,
+      scrollVertical,
+      scrollHorizontal,
+      scrollWithAnimation,
+      scrollIntoViewAlignment
+    ]
+  );
+  useEffect(() => {
+    handleScroll(true);
+  }, []);
+  useEffect(() => {
+    handleScroll();
+  }, [
+    scrollIntoView,
+    scrollY,
+    scrollTopProp,
+    scrollX,
+    scrollLeftProp,
+    handleScroll
+  ]);
+  const upperAndLower = (e) => {
+    if (!container.current)
+      return;
+    const {
+      offsetWidth,
+      offsetHeight,
+      scrollLeft,
+      scrollTop,
+      scrollHeight,
+      scrollWidth
+    } = container.current;
+    if (onScrollToLower && (scrollY && offsetHeight + scrollTop + Number(lowerThreshold) >= scrollHeight || scrollX && offsetWidth + scrollLeft + Number(lowerThreshold) >= scrollWidth)) {
+      if (upperLowerStatus.current !== -1)
+        onScrollToLower(e);
+      upperLowerStatus.current = -1;
+    } else if (onScrollToUpper && (scrollY && scrollTop <= Number(upperThreshold) || scrollX && scrollLeft <= Number(upperThreshold))) {
+      if (upperLowerStatus.current !== 1)
+        onScrollToUpper(e);
+      upperLowerStatus.current = 1;
+    } else {
+      upperLowerStatus.current = 0;
+    }
+  };
+  const onScrollHandler = (e) => {
+    const { scrollLeft, scrollTop, scrollHeight, scrollWidth } = container.current;
+    Object.defineProperty(e, "detail", {
+      enumerable: true,
+      writable: true,
+      value: {
+        scrollLeft,
+        scrollTop,
+        scrollHeight,
+        scrollWidth
+      }
+    });
+    upperAndLower(e);
+    onScroll == null ? void 0 : onScroll(e);
+  };
+  const onTouchMoveHandler = (e) => {
+    var _a2;
+    (_a2 = propsOnTouchMove || onTouchMove) == null ? void 0 : _a2(e);
+  };
+  const getRootProps = useCallback(
+    (rootHandlers) => {
+      return __spreadProps(__spreadValues(__spreadValues({}, otherProps), rootHandlers), {
+        ref: handleRef,
+        onScroll: onScrollHandler,
+        onTouchMove: onTouchMoveHandler
+      });
+    },
+    [otherProps, handleRef, onScrollHandler, onTouchMoveHandler]
+  );
+  return {
+    getRootProps,
+    containerRef: handleRef
+  };
+}
+export {
+  useScrollView
+};