@bifrostui/react 1.5.3 → 2.0.0-alpha.1

package/es/Rating/Rating.js

@@ -30,7 +30,7 @@ import { StarFilledIcon } from "@bifrostui/icons";
 import { useValue } from "@bifrostui/utils";
 import clsx from "clsx";
 import React, { forwardRef } from "react";
-import "./Rating.css";
+import "./index.css";
 const classes = {
   root: "bui-rating",
   item: "bui-rating-item",
@@ -39,18 +39,18 @@ const classes = {
 const Rating = forwardRef((props, ref) => {
   const _a = props, {
     className,
-    size,
+    size = "medium",
     defaultValue,
-    allowHalf,
-    icon,
-    checkedIcon,
-    count,
-    readOnly,
-    disabled,
+    allowHalf = false,
+    icon = /* @__PURE__ */ React.createElement(StarFilledIcon, { color: "disabled" }),
+    checkedIcon = /* @__PURE__ */ React.createElement(StarFilledIcon, { color: "warning" }),
+    count = 5,
+    readOnly = false,
+    disabled = false,
     value,
     onChange,
     name,
-    disableClear
+    disableClear = false
   } = _a, others = __objRest(_a, [
     "className",
     "size",
@@ -134,16 +134,6 @@ const Rating = forwardRef((props, ref) => {
   );
 });
 Rating.displayName = "BuiRating";
-Rating.defaultProps = {
-  size: "medium",
-  count: 5,
-  icon: /* @__PURE__ */ React.createElement(StarFilledIcon, { htmlColor: "#ced1d6" }),
-  checkedIcon: /* @__PURE__ */ React.createElement(StarFilledIcon, { color: "warning" }),
-  readOnly: false,
-  disabled: false,
-  allowHalf: false,
-  disableClear: false
-};
 var Rating_default = Rating;
 export {
   Rating_default as default

package/es/Rating/index.css

@@ -0,0 +1,65 @@
+:root,
+page,
+xhs-page {
+  --bui-rating-xsmall-font-size: var(--bui-text-size-5);
+  --bui-rating-xsmall-margin: 0;
+  --bui-rating-small-margin: 0 0.5px 0 0;
+  --bui-rating-small-font-size: var(--bui-text-size-1);
+  --bui-rating-margin: 0 1px 0 0;
+  --bui-rating-font-size: var(--bui-title-size-3);
+  --bui-rating-large-margin: 0 2px 0 0;
+  --bui-rating-large-font-size: 22px;
+}
+.bui-rating {
+  display: flex;
+  flex-wrap: wrap;
+  font-family: var(--bui-font-family);
+}
+.bui-rating-disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+.bui-rating-container {
+  position: relative;
+  display: flex;
+}
+.bui-rating-container:last-child {
+  margin-right: 0;
+}
+.bui-rating-container-xsmall {
+  font-size: var(--bui-rating-xsmall-font-size);
+  margin: var(--bui-rating-xsmall-margin);
+}
+.bui-rating-container-small {
+  font-size: var(--bui-rating-small-font-size);
+  margin: var(--bui-rating-small-margin);
+}
+.bui-rating-container-medium {
+  font-size: var(--bui-rating-font-size);
+  margin: var(--bui-rating-margin);
+}
+.bui-rating-container-large {
+  font-size: var(--bui-rating-large-font-size);
+  margin: var(--bui-rating-large-margin);
+}
+.bui-rating-item {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  cursor: pointer;
+  color: var(--bui-color-fg-disabled);
+}
+.bui-rating-item-input {
+  display: none;
+}
+.bui-rating-item-half {
+  position: absolute;
+  top: 0;
+  width: 50%;
+}
+.bui-rating-item-readonly {
+  cursor: unset;
+}
+.bui-rating-item-active {
+  color: var(--bui-color-warning);
+}

package/es/ScrollView/ScrollView.js

@@ -1,169 +1,61 @@
-import { useForkRef } from "@bifrostui/utils";
-import clsx from "clsx";
-import React, { forwardRef, useCallback, useEffect, useRef } from "react";
-import "./ScrollView.css";
-function easeOutScroll(from, to, callback, dur) {
-  if (dur <= 0) {
-    dur = 500;
-  }
-  if (from === to || typeof from !== "number") {
-    return;
-  }
-  const change = to - from;
-  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;
+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]);
     }
-    callback == null ? void 0 : callback(stepFrom);
-    requestAnimationFrame(step);
-  }
-  step();
-}
+  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 clsx from "clsx";
+import React, { forwardRef } from "react";
+import "./index.css";
+import { useScrollView } from "./useScrollView";
 const classes = {
   root: "bui-scroll"
 };
 const ScrollView = forwardRef(
   (props, ref) => {
-    const {
+    const _a = props, {
       className,
       style = {},
-      onScroll,
-      onScrollToUpper,
-      onScrollToLower,
-      scrollTop: scrollTopProp,
-      scrollLeft: scrollLeftProp,
       scrollX,
       scrollY,
-      scrollIntoView,
-      onTouchMove: propsOnTouchMove,
-      scrollIntoViewAlignment,
-      children,
-      scrollAnimationDuration = 500
-    } = props;
-    const container = useRef(null);
-    const handleRef = useForkRef(ref, container);
-    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;
-          },
-          scrollAnimationDuration
-        );
-      } 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;
-          },
-          scrollAnimationDuration
-        );
-      } else if (container.current)
-        container.current.scrollLeft = left;
-    }, []);
-    const handleScroll = useCallback(
-      (isInit = false) => {
-        var _a, _b;
-        const isAnimation = props == null ? void 0 : props.scrollWithAnimation;
-        if (scrollIntoView && typeof scrollIntoView === "string" && ((_b = (_a = container == null ? void 0 : container.current) == null ? void 0 : _a.querySelector) == null ? void 0 : _b.call(_a, `#${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;
-              const center = (start + end) / 2;
-              scrollVertical(
-                { start, end, nearest, center }[alignment],
-                _isAnimation
-              );
-            }
-            if (scrollX) {
-              const start = target.offsetLeft;
-              const end = target.offsetLeft + target.offsetWidth - container.current.clientWidth;
-              let nearest;
-              if (container.current.scrollTop < end)
-                nearest = end;
-              else if (container.current.scrollTop > start)
-                nearest = start;
-              const center = (start + end) / 2;
-              scrollHorizontal(
-                { start, end, nearest, center }[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]
-    );
-    useEffect(() => {
-      handleScroll(true);
-    }, []);
-    useEffect(() => {
-      handleScroll();
-    }, [scrollIntoView, scrollY, scrollTopProp, scrollX, scrollLeftProp]);
-    let { upperThreshold = 50, lowerThreshold = 50 } = props;
+      children
+    } = _a, otherProps = __objRest(_a, [
+      "className",
+      "style",
+      "scrollX",
+      "scrollY",
+      "children"
+    ]);
+    const { getRootProps } = useScrollView(__spreadProps(__spreadValues({}, otherProps), {
+      scrollX,
+      scrollY,
+      ref
+    }));
     const cls = clsx(
       classes.root,
       {
@@ -172,62 +64,11 @@ const ScrollView = forwardRef(
       },
       className
     );
-    upperThreshold = Number(upperThreshold);
-    lowerThreshold = Number(lowerThreshold);
-    const upperLowerStatus = useRef(0);
-    const upperAndLower = (e) => {
-      if (!container.current)
-        return;
-      const {
-        offsetWidth,
-        offsetHeight,
-        scrollLeft,
-        scrollTop,
-        scrollHeight,
-        scrollWidth
-      } = container.current;
-      if (onScrollToLower && (scrollY && offsetHeight + scrollTop + lowerThreshold >= scrollHeight || scrollX && offsetWidth + scrollLeft + lowerThreshold >= scrollWidth)) {
-        if (upperLowerStatus.current !== -1)
-          onScrollToLower(e);
-        upperLowerStatus.current = -1;
-      } else if (onScrollToUpper && (scrollY && scrollTop <= upperThreshold || scrollX && scrollLeft <= 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 _a;
-      (_a = propsOnTouchMove || onTouchMove) == null ? void 0 : _a(e);
-    };
-    return /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        ref: handleRef,
-        style,
-        className: cls,
-        onScroll: onScrollHandler,
-        onTouchMove: onTouchMoveHandler
-      },
-      children
-    );
+    const rootProps = getRootProps({
+      style,
+      className: cls
+    });
+    return /* @__PURE__ */ React.createElement("div", __spreadValues({}, rootProps), children);
   }
 );
 ScrollView.displayName = "BuiScrollView";

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
+};