@bifrostui/react 1.5.3 → 2.0.0-alpha.1

package/dist/Collapse/Collapse.miniapp.js

@@ -61,8 +61,8 @@ __export(Collapse_miniapp_exports, {
 module.exports = __toCommonJS(Collapse_miniapp_exports);
 var import_react = __toESM(require("react"));
 var import_utils = require("@bifrostui/utils");
-var import_Transition = require("../Transition");
-var import_Collapse2 = require("./Collapse.css");
+var import_taro = __toESM(require("@tarojs/taro"));
+var import_index = require("./index.css");
 const defaultEasing = {
   enter: import_utils.easing.easeOut,
   exit: import_utils.easing.sharp
@@ -73,104 +73,182 @@ const defaultTimeout = {
 };
 const FIT_CONTENT = "fit-content";
 const Collapse = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
+  var _b;
   const _a = props, {
-    appear = false,
+    children,
     in: inProp,
+    style,
+    className,
+    appear = false,
+    enter = true,
+    exit = true,
+    delay = 0,
     easing: easingProp = defaultEasing,
-    direction = "vertical",
     timeout = defaultTimeout,
-    delay = 0,
+    direction = "vertical",
     collapsedSize: collapsedSizeProp = 0,
-    style,
-    className,
-    children
-  } = _a, other = __objRest(_a, [
-    "appear",
+    mountOnEnter: mountOnEnter,
+    unmountOnExit,
+    onEnter,
+    onEntering,
+    onEntered,
+    onExit,
+    onExiting,
+    onExited
+  } = _a, others = __objRest(_a, [
+    "children",
     "in",
+    "style",
+    "className",
+    "appear",
+    "enter",
+    "exit",
+    "delay",
     "easing",
-    "direction",
     "timeout",
-    "delay",
+    "direction",
     "collapsedSize",
-    "style",
-    "className",
-    "children"
+    // Lifecycle hooks
+    "mountOnEnter",
+    "unmountOnExit",
+    "onEnter",
+    "onEntering",
+    "onEntered",
+    "onExit",
+    "onExiting",
+    "onExited"
   ]);
-  const wrapperRef = (0, import_react.useRef)(null);
-  const collapseRef = (0, import_utils.useForkRef)(wrapperRef, ref);
-  const [wrapperSize, setWrapperSize] = (0, import_react.useState)("");
-  const transitions = (0, import_utils.createTransitions)();
-  const isHorizontal = direction === "horizontal";
+  const [isMounted, setIsMounted] = (0, import_react.useState)(inProp || !mountOnEnter);
+  const shouldAnimate = inProp && enter || !inProp && exit;
+  const [animation, setAnimation] = (0, import_react.useState)("none");
+  const shouldAnimateOnFirstMount = inProp && appear;
   const collapsedSize = typeof collapsedSizeProp === "number" ? `${collapsedSizeProp}px` : collapsedSizeProp;
-  const size = isHorizontal ? "width" : "height";
+  const [actualSize, setActualSize] = (0, import_react.useState)(() => {
+    if (!shouldAnimateOnFirstMount) {
+      return inProp ? FIT_CONTENT : collapsedSize;
+    }
+    return collapsedSize;
+  });
+  const elementRef = (0, import_react.useRef)(null);
+  const handleRef = (0, import_utils.useForkRef)(ref, children == null ? void 0 : children.ref, elementRef);
+  const getAnimation = (canAnimate) => {
+    const transitions = (0, import_utils.createTransitions)();
+    const mode = inProp ? "enter" : "exit";
+    const animationName = `bui-collapse-${mode}-${direction}`;
+    return transitions.create(
+      animationName,
+      (0, import_utils.getTransitionProps)(
+        {
+          timeout: canAnimate ? timeout : 0,
+          delay: canAnimate ? delay : 0,
+          style,
+          easing: easingProp
+        },
+        { mode: inProp ? "enter" : "exit" }
+      )
+    );
+  };
   const getCollapseWrapperSize = (reactNode) => {
     return new Promise((resolve) => {
       var _a2;
       const reactNodeChild = (_a2 = reactNode == null ? void 0 : reactNode.children) == null ? void 0 : _a2[0];
       if (!reactNodeChild) {
         resolve(FIT_CONTENT);
+        return;
       }
-      (0, import_utils.getBoundingClientRect)(reactNodeChild).then((res) => {
-        if (!res) {
-          resolve(FIT_CONTENT);
-          setWrapperSize(FIT_CONTENT);
-        } else {
-          setWrapperSize(isHorizontal ? `${res == null ? void 0 : res.width}px` : `${res == null ? void 0 : res.height}px`);
-        }
+      import_taro.default.nextTick(() => {
+        (0, import_utils.getBoundingClientRect)(reactNodeChild).then((res) => {
+          if (!res) {
+            resolve(FIT_CONTENT);
+          } else {
+            const isHorizontal = direction === "horizontal";
+            const newSize = isHorizontal ? `${res == null ? void 0 : res.width}px` : `${res == null ? void 0 : res.height}px`;
+            resolve(newSize);
+          }
+        });
       });
     });
   };
+  (0, import_utils.useDidMountEffect)(() => {
+    if (inProp && !isMounted) {
+      setActualSize(collapsedSize);
+      setIsMounted(true);
+      return;
+    }
+    getCollapseWrapperSize(elementRef.current).then((size) => {
+      setActualSize(size);
+      setAnimation(getAnimation(shouldAnimate));
+    });
+  }, [inProp, isMounted]);
   (0, import_react.useEffect)(() => {
-    if (appear === false && inProp === true && wrapperSize === FIT_CONTENT) {
-      getCollapseWrapperSize(wrapperRef.current).then((res) => {
-        setWrapperSize(res);
+    if (!shouldAnimateOnFirstMount)
+      return;
+    getCollapseWrapperSize(elementRef.current).then((size) => {
+      setActualSize(size);
+      setAnimation(getAnimation(true));
+    });
+  }, []);
+  (0, import_react.useEffect)(() => {
+    const shouldTriggerCallback = isMounted && shouldAnimate;
+    if (!shouldTriggerCallback)
+      return;
+    if (inProp) {
+      onEnter == null ? void 0 : onEnter(elementRef.current);
+    } else {
+      onExit == null ? void 0 : onExit(elementRef.current);
+    }
+  }, [inProp, isMounted]);
+  const handleAnimationStart = () => {
+    if (!shouldAnimate)
+      return;
+    if (inProp) {
+      onEntering == null ? void 0 : onEntering(elementRef.current);
+    } else {
+      onExiting == null ? void 0 : onExiting(elementRef.current);
+    }
+  };
+  const handleAnimationEnd = () => {
+    if (inProp) {
+      import_taro.default.nextTick(() => {
+        setActualSize("auto");
       });
+      onEntered == null ? void 0 : onEntered(elementRef.current);
+    } else {
+      onExited == null ? void 0 : onExited(elementRef.current);
+      if (unmountOnExit) {
+        setIsMounted(false);
+      }
     }
-  }, [appear, inProp]);
-  if (!children)
+  };
+  if (!children || !isMounted)
     return null;
-  return /* @__PURE__ */ import_react.default.createElement(
-    import_Transition.Transition,
-    __spreadProps(__spreadValues({}, other), {
-      in: inProp,
-      timeout,
-      delay,
-      appear
-    }),
-    (state, childProps) => {
-      var _a2;
-      const transition = transitions.create(
-        size,
-        (0, import_utils.getTransitionProps)(
-          { timeout, style, easing: easingProp, delay },
-          { mode: state }
-        )
-      );
-      if (state === "entering" || state === "entered") {
-        getCollapseWrapperSize(wrapperRef.current).then(
-          (res = FIT_CONTENT) => {
-            setWrapperSize(res);
-          }
-        );
-      } else {
-        setWrapperSize(collapsedSize);
-      }
-      return import_react.default.createElement(
-        "div",
-        __spreadProps(__spreadValues({
-          className: `bui-collapse ${className || ""}`,
-          style: __spreadValues(__spreadProps(__spreadValues({}, style), {
-            transition,
-            WebkitTransition: transition
-          }), isHorizontal ? { width: wrapperSize, WebKitWidth: wrapperSize } : { height: wrapperSize, WebKitHeight: wrapperSize })
-        }, childProps), {
-          ref: collapseRef
-        }),
-        import_react.default.cloneElement(children, {
-          style: __spreadValues({}, (_a2 = children.props) == null ? void 0 : _a2.style)
-        })
-      );
+  const cssVariables = {
+    "--collapse-size": actualSize,
+    "--collapse-collapsed-size": collapsedSize
+  };
+  const getClassName = () => {
+    const classes = ["bui-collapse"];
+    if (className) {
+      classes.push(className);
     }
+    classes.push(`bui-collapse-${direction}`);
+    return classes.join(" ");
+  };
+  return import_react.default.createElement(
+    "div",
+    __spreadProps(__spreadValues({}, others), {
+      className: getClassName(),
+      style: __spreadValues(__spreadValues({
+        animation,
+        animationFillMode: "both"
+      }, cssVariables), style),
+      onAnimationStart: handleAnimationStart,
+      onAnimationEnd: handleAnimationEnd,
+      ref: handleRef
+    }),
+    import_react.default.cloneElement(children, {
+      style: __spreadValues({}, (_b = children.props) == null ? void 0 : _b.style)
+    })
   );
 });
 Collapse.displayName = "BuiCollapse";

package/dist/Collapse/index.css

@@ -0,0 +1,45 @@
+.bui-collapse {
+  overflow: hidden;
+  height: fit-content;
+  width: fit-content;
+  --collapse-size: auto;
+  --collapse-collapsed-size: 0px;
+}
+.bui-collapse.bui-collapse-vertical {
+  height: var(--collapse-size);
+}
+.bui-collapse.bui-collapse-horizontal {
+  width: var(--collapse-size);
+}
+@keyframes bui-collapse-enter-vertical {
+  from {
+    height: var(--collapse-collapsed-size);
+  }
+  to {
+    height: var(--collapse-size);
+  }
+}
+@keyframes bui-collapse-exit-vertical {
+  from {
+    height: var(--collapse-size);
+  }
+  to {
+    height: var(--collapse-collapsed-size);
+  }
+}
+@keyframes bui-collapse-enter-horizontal {
+  from {
+    width: var(--collapse-collapsed-size);
+  }
+  to {
+    width: var(--collapse-size);
+  }
+}
+@keyframes bui-collapse-exit-horizontal {
+  from {
+    width: var(--collapse-size);
+  }
+  to {
+    width: var(--collapse-collapsed-size);
+  }
+}

package/dist/CollapsePanel/CollapsePanel.js

@@ -64,7 +64,7 @@ var import_clsx = __toESM(require("clsx"));
 var import_icons = require("@bifrostui/icons");
 var import_utils = require("@bifrostui/utils");
 var import_CollapsePanelItem = __toESM(require("./CollapsePanelItem"));
-var import_CollapsePanel2 = require("./CollapsePanel.css");
+var import_index = require("./index.css");
 const prefixCls = "bui-collapse-panel";
 const CollapsePanel = /* @__PURE__ */ import_react.default.forwardRef(
   (props, ref) => {

package/dist/CollapsePanel/CollapsePanelItem.js

@@ -60,53 +60,52 @@ var import_react = __toESM(require("react"));
 var import_clsx = __toESM(require("clsx"));
 var import_Collapse = require("../Collapse");
 const prefixCls = "bui-collapse-panel-item";
-const CollapsePanelItem = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
-  const _a = props, {
-    className,
-    style,
-    label,
-    children,
-    icon,
-    active,
-    onClick
-  } = _a, others = __objRest(_a, [
-    "className",
-    "style",
-    "label",
-    "children",
-    "icon",
-    "active",
-    "onClick"
-  ]);
-  const isControlledIcon = typeof icon === "function";
-  const getIcon = () => {
-    return typeof icon === "function" ? icon(active) : icon;
-  };
-  return /* @__PURE__ */ import_react.default.createElement(
-    "div",
-    __spreadValues({
-      className: (0, import_clsx.default)(prefixCls, active && `${prefixCls}-active`, className),
+const CollapsePanelItem = /* @__PURE__ */ import_react.default.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
       style,
-      ref
-    }, others),
-    /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-header`, onClick }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-header-label` }, label), /* @__PURE__ */ import_react.default.createElement(
+      label,
+      children,
+      icon,
+      active = false,
+      onClick
+    } = _b, others = __objRest(_b, [
+      "className",
+      "style",
+      "label",
+      "children",
+      "icon",
+      "active",
+      "onClick"
+    ]);
+    const isControlledIcon = typeof icon === "function";
+    const getIcon = () => {
+      return typeof icon === "function" ? icon(active) : icon;
+    };
+    return /* @__PURE__ */ import_react.default.createElement(
       "div",
-      {
-        className: (0, import_clsx.default)(
-          `${prefixCls}-header-icon`,
-          `${prefixCls}-header-icon-arrow`,
-          {
-            [`${prefixCls}-header-icon-arrow-active`]: !isControlledIcon && active
-          }
-        )
-      },
-      getIcon()
-    )),
-    /* @__PURE__ */ import_react.default.createElement(import_Collapse.Collapse, { in: active, direction: "vertical", timeout: 300 }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-content` }, children))
-  );
-});
+      __spreadValues({
+        className: (0, import_clsx.default)(prefixCls, active && `${prefixCls}-active`, className),
+        style,
+        ref
+      }, others),
+      /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-header`, onClick }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-header-label` }, label), /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: (0, import_clsx.default)(
+            `${prefixCls}-header-icon`,
+            `${prefixCls}-header-icon-arrow`,
+            {
+              [`${prefixCls}-header-icon-arrow-active`]: !isControlledIcon && active
+            }
+          )
+        },
+        getIcon()
+      )),
+      /* @__PURE__ */ import_react.default.createElement(import_Collapse.Collapse, { in: active, direction: "vertical", timeout: 300 }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-content` }, children))
+    );
+  }
+);
 CollapsePanelItem.displayName = "BuiCollapsePanelItem";
-CollapsePanelItem.defaultProps = {
-  active: false
-};
 var CollapsePanelItem_default = CollapsePanelItem;

package/dist/CollapsePanel/index.css

@@ -0,0 +1,36 @@
+:root,
+page,
+xhs-page {
+  --bui-collapse-panel-width: 100%;
+  --bui-collapse-panel-header-padding: var(--bui-spacing-lg) 0;
+  --bui-collapse-panel-content-padding: var(--bui-spacing-lg) 0;
+}
+.bui-collapse-panel {
+  width: var(--bui-collapse-panel-width);
+  background-color: var(--bui-color-bg-view);
+  color: var(--bui-color-fg-default);
+}
+.bui-collapse-panel-item-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: solid 1px #eee;
+  cursor: pointer;
+}
+.bui-collapse-panel-item-header-label {
+  padding: var(--bui-collapse-panel-header-padding);
+  font-size: var(--bui-title-size-3);
+}
+.bui-collapse-panel-item-header-icon-arrow {
+  transform: rotate(0deg);
+  transition: all 0.3s ease;
+}
+.bui-collapse-panel-item-header-icon-arrow-active {
+  transform: rotate(-180deg);
+}
+.bui-collapse-panel-item-content {
+  padding: var(--bui-collapse-panel-content-padding);
+  font-size: var(--bui-text-size-1);
+  transition: height 0.5s ease;
+  overflow: hidden;
+}

package/dist/Countdown/Countdown.js

@@ -61,34 +61,38 @@ var import_react = __toESM(require("react"));
 var import_utils = require("@bifrostui/utils");
 var import_useCountdown = __toESM(require("./useCountdown"));
 var import_utils2 = require("./utils");
-var import_Countdown2 = require("./Countdown.css");
+var import_locales = require("../locales");
+var import_index = require("./index.css");
 const prefixCls = "bui-countdown";
 const Countdown = (0, import_react.forwardRef)((props, ref) => {
   const _a = props, {
     className,
     serverTimestamp,
     endTimestamp,
-    remainingTime,
-    format,
-    unitStyle,
-    valueStyle,
-    timeSliceStyle,
+    remainingTime = 0,
+    format = "HH:mm:ss",
     renderContent,
     onChange,
-    onFinish
+    onFinish,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-describedby": ariaDescribedby,
+    role = "timer"
   } = _a, others = __objRest(_a, [
     "className",
     "serverTimestamp",
     "endTimestamp",
     "remainingTime",
     "format",
-    "unitStyle",
-    "valueStyle",
-    "timeSliceStyle",
     "renderContent",
     "onChange",
-    "onFinish"
+    "onFinish",
+    "aria-label",
+    "aria-labelledby",
+    "aria-describedby",
+    "role"
   ]);
+  const { remain, remainTime, willEnd, hasEnd, timer } = (0, import_locales.useLocaleText)("countdown");
   const [startTime, setStartTime] = (0, import_react.useState)(
     () => serverTimestamp != null ? serverTimestamp : Date.now()
   );
@@ -117,9 +121,38 @@ const Countdown = (0, import_react.forwardRef)((props, ref) => {
       setEndTime(endTimestamp);
     }
   }, [serverTimestamp, endTimestamp]);
+  const getAccessibleTimeDescription = (timeIns) => {
+    const { years, months, days, hours, minutes, seconds, total } = timeIns;
+    if (total <= 0) {
+      return hasEnd;
+    }
+    const parts = [];
+    if (parseInt(years, 10) > 0)
+      parts.push(`${parseInt(years, 10)}${remain.year}`);
+    if (parseInt(months, 10) > 0)
+      parts.push(`${parseInt(months, 10)}${remain.month}`);
+    if (parseInt(days, 10) > 0)
+      parts.push(`${parseInt(days, 10)}${remain.day}`);
+    if (parseInt(hours, 10) > 0)
+      parts.push(`${parseInt(hours, 10)}${remain.hour}`);
+    if (parseInt(minutes, 10) > 0)
+      parts.push(`${parseInt(minutes, 10)}${remain.minute}`);
+    if (parseInt(seconds, 10) > 0)
+      parts.push(`${parseInt(seconds, 10)}${remain.second}`);
+    return parts.length > 0 ? `${remainTime}\uFF1A${parts.join("")}` : willEnd;
+  };
   const defaultRender = (timeIns) => {
     const { timeList } = (0, import_utils2.formatCountdown)(timeIns.total, format);
-    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, timeList.map((item, index) => {
+    const accessibleDescription = getAccessibleTimeDescription(timeIns);
+    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+      "span",
+      {
+        className: (0, import_clsx.default)(`${prefixCls}-sr-only`),
+        "aria-live": "polite",
+        "aria-atomic": "true"
+      },
+      accessibleDescription
+    ), timeList.map((item, index) => {
       const { unitText, valStr } = item;
       const valueList = valStr.split("");
       return /* @__PURE__ */ import_react.default.createElement(
@@ -127,36 +160,36 @@ const Countdown = (0, import_react.forwardRef)((props, ref) => {
         {
           key: `slice-${index}`,
           className: (0, import_clsx.default)(`${prefixCls}-slice`),
-          style: timeSliceStyle
+          "aria-hidden": "true"
         },
         /* @__PURE__ */ import_react.default.createElement("span", { className: (0, import_clsx.default)(`${prefixCls}-slice-item`) }, valueList.map((val, i) => /* @__PURE__ */ import_react.default.createElement(
           "span",
           {
             key: `slice-value-${i}`,
-            className: (0, import_clsx.default)(`${prefixCls}-slice-value`),
-            style: valueStyle[i]
+            className: (0, import_clsx.default)(`${prefixCls}-slice-value`)
           },
           val
         ))),
-        unitText && /* @__PURE__ */ import_react.default.createElement(
-          "span",
-          {
-            className: (0, import_clsx.default)(`${prefixCls}-slice-unit`),
-            style: unitStyle
-          },
-          unitText
-        )
+        unitText && /* @__PURE__ */ import_react.default.createElement("span", { className: (0, import_clsx.default)(`${prefixCls}-slice-unit`) }, unitText)
       );
     }));
   };
-  return /* @__PURE__ */ import_react.default.createElement("div", __spreadValues({ ref, className: (0, import_clsx.default)(prefixCls, className) }, others), renderContent ? renderContent(time) : defaultRender(time));
+  const ariaProps = {
+    role,
+    "aria-label": ariaLabel || `${timer}\uFF0C${getAccessibleTimeDescription(time)}`,
+    "aria-labelledby": ariaLabelledby,
+    "aria-describedby": ariaDescribedby,
+    "aria-live": "polite",
+    "aria-atomic": true
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    __spreadValues(__spreadValues({
+      ref,
+      className: (0, import_clsx.default)(prefixCls, className)
+    }, ariaProps), others),
+    renderContent ? renderContent(time) : defaultRender(time)
+  );
 });
 Countdown.displayName = "BuiCountdown";
-Countdown.defaultProps = {
-  format: "HH:mm:ss",
-  remainingTime: 0,
-  unitStyle: {},
-  valueStyle: [{}, {}],
-  timeSliceStyle: {}
-};
 var Countdown_default = Countdown;