@bifrostui/react 1.5.3 → 2.0.0-alpha.1

package/dist/List/ListItem.css

@@ -10,13 +10,13 @@
   color: var(--bui-color-fg-subtle);
 }
 .bui-list-small .bui-list-item {
-  padding: var(--small-item-padding);
+  padding: var(--bui-list-small-item-padding);
 }
 .bui-list-medium .bui-list-item {
-  padding: var(--medium-item-padding);
+  padding: var(--bui-list-medium-item-padding);
 }
 .bui-list-large .bui-list-item {
-  padding: var(--large-item-padding);
+  padding: var(--bui-list-large-item-padding);
 }
 .bui-list-item-divider:not(:last-child) {
   border-bottom: 1px solid var(--bui-color-border-default);

package/dist/List/ListItem.js

@@ -63,50 +63,48 @@ var import_ListContext = __toESM(require("./ListContext"));
 var import_ListItemFooter = __toESM(require("./ListItemFooter"));
 var import_ListItem2 = require("./ListItem.css");
 const prefixCls = "bui-list-item";
-const ListItem = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
-  const _a = props, {
-    children,
-    className,
-    hideDivider,
-    disabled,
-    onClick,
-    endIcon,
-    component: Component
-  } = _a, others = __objRest(_a, [
-    "children",
-    "className",
-    "hideDivider",
-    "disabled",
-    "onClick",
-    "endIcon",
-    "component"
-  ]);
-  let chevron;
-  if (typeof endIcon === "boolean") {
-    chevron = endIcon && /* @__PURE__ */ import_react.default.createElement(import_icons.ArrowForwardIcon, { size: "small" });
-  } else if (import_react.default.isValidElement(endIcon)) {
-    chevron = endIcon;
-  } else {
-    chevron = onClick && /* @__PURE__ */ import_react.default.createElement(import_icons.ArrowForwardIcon, { size: "small" });
-  }
-  const context = import_react.default.useContext(import_ListContext.default);
-  return /* @__PURE__ */ import_react.default.createElement(
-    Component,
-    __spreadValues({
-      className: (0, import_clsx.default)(prefixCls, className, {
-        [`${prefixCls}-divider`]: !(hideDivider || context.hideDivider),
-        [`${prefixCls}-disabled`]: disabled
-      }),
+const ListItem = /* @__PURE__ */ import_react.default.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      children,
+      className,
+      hideDivider = false,
+      disabled,
       onClick,
-      ref
-    }, others),
-    children,
-    chevron && /* @__PURE__ */ import_react.default.createElement(import_ListItemFooter.default, null, chevron)
-  );
-});
+      endIcon,
+      component: Component = "div"
+    } = _b, others = __objRest(_b, [
+      "children",
+      "className",
+      "hideDivider",
+      "disabled",
+      "onClick",
+      "endIcon",
+      "component"
+    ]);
+    let chevron;
+    if (typeof endIcon === "boolean") {
+      chevron = endIcon && /* @__PURE__ */ import_react.default.createElement(import_icons.ArrowForwardIcon, { size: "small" });
+    } else if (import_react.default.isValidElement(endIcon)) {
+      chevron = endIcon;
+    } else {
+      chevron = onClick && /* @__PURE__ */ import_react.default.createElement(import_icons.ArrowForwardIcon, { size: "small" });
+    }
+    const context = import_react.default.useContext(import_ListContext.default);
+    return /* @__PURE__ */ import_react.default.createElement(
+      Component,
+      __spreadValues({
+        className: (0, import_clsx.default)(prefixCls, className, {
+          [`${prefixCls}-divider`]: !(hideDivider || context.hideDivider),
+          [`${prefixCls}-disabled`]: disabled
+        }),
+        onClick,
+        ref
+      }, others),
+      children,
+      chevron && /* @__PURE__ */ import_react.default.createElement(import_ListItemFooter.default, null, chevron)
+    );
+  }
+);
 ListItem.displayName = "BuiListItem";
-ListItem.defaultProps = {
-  component: "div",
-  hideDivider: false
-};
 var ListItem_default = ListItem;

package/dist/List/ListItemContent.js

@@ -65,7 +65,7 @@ const ListItemContent = /* @__PURE__ */ import_react.default.forwardRef(
     const _a = props, {
       children,
       className,
-      component: Component,
+      component: Component = "div",
       primary,
       secondary
     } = _a, others = __objRest(_a, [
@@ -79,7 +79,4 @@ const ListItemContent = /* @__PURE__ */ import_react.default.forwardRef(
   }
 );
 ListItemContent.displayName = "BuiListItemContent";
-ListItemContent.defaultProps = {
-  component: "div"
-};
 var ListItemContent_default = ListItemContent;

package/dist/List/ListItemExtra.js

@@ -62,12 +62,17 @@ var import_ListItemExtra2 = require("./ListItemExtra.css");
 const prefixCls = "bui-list-item-extra";
 const ListItemExtra = /* @__PURE__ */ import_react.default.forwardRef(
   (props, ref) => {
-    const _a = props, { children, className, component: Component } = _a, others = __objRest(_a, ["children", "className", "component"]);
+    const _a = props, {
+      children,
+      className,
+      component: Component = "div"
+    } = _a, others = __objRest(_a, [
+      "children",
+      "className",
+      "component"
+    ]);
     return /* @__PURE__ */ import_react.default.createElement(Component, __spreadValues({ className: (0, import_clsx.default)(prefixCls, className), ref }, others), children);
   }
 );
 ListItemExtra.displayName = "BuiListItemExtra";
-ListItemExtra.defaultProps = {
-  component: "div"
-};
 var ListItemExtra_default = ListItemExtra;

package/dist/List/ListItemFooter.js

@@ -62,12 +62,17 @@ var import_ListItemFooter2 = require("./ListItemFooter.css");
 const prefixCls = "bui-list-item-footer";
 const ListItemFooter = /* @__PURE__ */ import_react.default.forwardRef(
   (props, ref) => {
-    const _a = props, { children, className, component: Component } = _a, others = __objRest(_a, ["children", "className", "component"]);
+    const _a = props, {
+      children,
+      className,
+      component: Component = "div"
+    } = _a, others = __objRest(_a, [
+      "children",
+      "className",
+      "component"
+    ]);
     return /* @__PURE__ */ import_react.default.createElement(Component, __spreadValues({ className: (0, import_clsx.default)(prefixCls, className), ref }, others), children);
   }
 );
 ListItemFooter.displayName = "BuiListItemFooter";
-ListItemFooter.defaultProps = {
-  component: "div"
-};
 var ListItemFooter_default = ListItemFooter;

package/dist/List/ListItemHeader.js

@@ -62,12 +62,17 @@ var import_ListItemHeader2 = require("./ListItemHeader.css");
 const prefixCls = "bui-list-item-header";
 const ListItemHeader = /* @__PURE__ */ import_react.default.forwardRef(
   (props, ref) => {
-    const _a = props, { children, className, component: Component } = _a, others = __objRest(_a, ["children", "className", "component"]);
+    const _a = props, {
+      children,
+      className,
+      component: Component = "div"
+    } = _a, others = __objRest(_a, [
+      "children",
+      "className",
+      "component"
+    ]);
     return /* @__PURE__ */ import_react.default.createElement(Component, __spreadValues({ className: (0, import_clsx.default)(prefixCls, className), ref }, others), children);
   }
 );
 ListItemHeader.displayName = "BuiListItemHeader";
-ListItemHeader.defaultProps = {
-  component: "div"
-};
 var ListItemHeader_default = ListItemHeader;

package/dist/List/index.css

@@ -0,0 +1,80 @@
+:root,
+page,
+xhs-page {
+  --bui-list-small-item-padding: 5px 12px;
+  --bui-list-medium-item-padding: 18px 12px;
+  --bui-list-large-item-padding: 20px 12px;
+}
+.bui-list {
+  background: var(--bui-color-bg-view);
+  font-size: var(--bui-title-size-3);
+  font-family: var(--bui-font-family);
+  list-style: none;
+}
+.bui-list .bui-divider:last-of-type {
+  display: none;
+}
+.bui-list-item,
+.bui-list-item-contained {
+  display: flex;
+  align-items: center;
+  font-family: var(--bui-font-family);
+}
+.bui-list-item-disabled {
+  pointer-events: none;
+  background-color: var(--bui-color-bg-default);
+  color: var(--bui-color-fg-subtle);
+}
+.bui-list-small .bui-list-item {
+  padding: var(--bui-list-small-item-padding);
+}
+.bui-list-medium .bui-list-item {
+  padding: var(--bui-list-medium-item-padding);
+}
+.bui-list-large .bui-list-item {
+  padding: var(--bui-list-large-item-padding);
+}
+.bui-list-item-divider:not(:last-child) {
+  border-bottom: 1px solid var(--bui-color-border-default);
+}
+.bui-list-item-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex: 1 1 auto;
+  width: 100%;
+  font-family: var(--bui-font-family);
+}
+.bui-list-small .bui-list-item-content {
+  font-size: var(--bui-text-size-2);
+}
+.bui-list-item-content-primary {
+  flex: 1 1 auto;
+}
+.bui-list-item-content-secondary {
+  font-size: var(--bui-text-size-2);
+  color: var(--bui-color-fg-muted);
+}
+.bui-list-item-extra {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  color: var(--bui-color-fg-subtle);
+  font-family: var(--bui-font-family);
+}
+.bui-list-item-footer {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  font-family: var(--bui-font-family);
+}
+.bui-list-item-footer .bui-svg-icon {
+  color: var(--bui-color-fg-subtle);
+}
+.bui-list-item-header {
+  flex: 0 0 auto;
+  margin-right: var(--bui-spacing-sm);
+  display: flex;
+  align-items: center;
+  font-family: var(--bui-font-family);
+}

package/dist/Loading/Loading.js

@@ -59,10 +59,22 @@ module.exports = __toCommonJS(Loading_exports);
 var import_react = __toESM(require("react"));
 var import_clsx = __toESM(require("clsx"));
 var import_icons = require("@bifrostui/icons");
-var import_Loading2 = require("./Loading.css");
+var import_index = require("./index.css");
 const prefixCls = "bui-loading";
 const Loading = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
-  const _a = props, { className, icon, IconProps, children, direction } = _a, otherProps = __objRest(_a, ["className", "icon", "IconProps", "children", "direction"]);
+  const _a = props, {
+    className,
+    icon,
+    IconProps,
+    children,
+    direction = "vertical"
+  } = _a, otherProps = __objRest(_a, [
+    "className",
+    "icon",
+    "IconProps",
+    "children",
+    "direction"
+  ]);
   const renderIcon = () => {
     return icon != null ? icon : /* @__PURE__ */ import_react.default.createElement(
       import_icons.LoadingThreeQuartersOutlinedIcon,
@@ -82,7 +94,4 @@ const Loading = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
   );
 });
 Loading.displayName = "BuiLoading";
-Loading.defaultProps = {
-  direction: "vertical"
-};
 var Loading_default = Loading;

package/dist/Loading/index.css

@@ -0,0 +1,37 @@
+:root,
+page,
+xhs-page {
+  --bui-loading-icon-font-size: 30px;
+  --bui-loading-text-padding: 10px;
+  --bui-loading-animation-duration: 1.6s;
+}
+.bui-loading {
+  width: fit-content;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: var(--bui-spacing-md);
+  font-family: var(--bui-font-family);
+}
+.bui-loading-icon {
+  font-size: var(--bui-loading-icon-font-size);
+  animation: loading var(--bui-loading-animation-duration) linear infinite;
+}
+.bui-loading-text {
+  padding: var(--bui-loading-text-padding);
+  font-size: var(--bui-title-size-3);
+}
+.bui-loading-vertical {
+  flex-direction: row;
+}
+.bui-loading-horizontal {
+  flex-direction: column;
+}
+@keyframes loading {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/dist/Modal/Modal.js

@@ -59,25 +59,25 @@ __export(Modal_exports, {
   default: () => Modal_default
 });
 module.exports = __toCommonJS(Modal_exports);
-var import_utils = require("@bifrostui/utils");
 var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
 var import_Backdrop = __toESM(require("../Backdrop"));
 var import_Portal = __toESM(require("../Portal"));
-var import_Modal = require("./Modal.css");
+var import_useModal = require("./useModal");
+var import_index = require("./index.css");
 const prefixCls = "bui-modal";
 const Modal = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   const _a = props, {
     className,
-    open,
+    open = false,
     BackdropProps,
     children,
     container,
-    disablePortal,
-    disableScrollLock,
-    hideBackdrop,
+    disablePortal = false,
+    disableScrollLock = false,
+    hideBackdrop = false,
     onClose,
-    keepMounted
+    keepMounted = false
   } = _a, others = __objRest(_a, [
     "className",
     "open",
@@ -90,56 +90,50 @@ const Modal = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
     "onClose",
     "keepMounted"
   ]);
-  const modalRef = import_react.default.useRef(null);
-  const handleRef = (0, import_utils.useForkRef)(modalRef, ref);
-  const [backdropExited, setBackDropExited] = (0, import_react.useState)(hideBackdrop || !open);
-  const mounted = open || !backdropExited || keepMounted;
-  const handleBackdropClick = (event) => {
-    if (import_utils.isMini && event.target.id !== event.currentTarget.id) {
-      return;
-    }
-    if (!import_utils.isMini && event.target !== event.currentTarget) {
-      return;
+  const {
+    getRootProps,
+    getBackdropProps,
+    getTransitionProps,
+    portalRef,
+    exited,
+    hasTransition
+  } = (0, import_useModal.useModal)(__spreadProps(__spreadValues({}, props), {
+    container,
+    disableScrollLock,
+    children: import_react.default.isValidElement(children) ? children : void 0,
+    open,
+    onClose,
+    rootRef: ref
+  }));
+  if (!keepMounted && !open && (!hasTransition || exited)) {
+    return null;
+  }
+  const rootProps = getRootProps(__spreadProps(__spreadValues({}, others), {
+    className: (0, import_clsx.default)(
+      prefixCls,
+      {
+        [`${prefixCls}-hidden`]: !open && exited
+      },
+      className
+    )
+  }));
+  const backdropProps = getBackdropProps(__spreadProps(__spreadValues({}, BackdropProps), {
+    className: (0, import_clsx.default)(`${prefixCls}-backdrop`, BackdropProps == null ? void 0 : BackdropProps.className)
+  }));
+  const transitionProps = hasTransition ? getTransitionProps() : {};
+  const renderChildren = () => {
+    if (!children) {
+      return null;
     }
-    if (onClose) {
-      onClose(event, { from: "backdrop" });
+    if (import_react.default.isValidElement(children)) {
+      const childProps = children.props || {};
+      return import_react.default.cloneElement(children, __spreadValues(__spreadValues({
+        tabIndex: -1
+      }, childProps), transitionProps));
     }
+    return children;
   };
-  (0, import_react.useEffect)(() => {
-    let cleanup;
-    if (!import_utils.isMini && !disableScrollLock)
-      setTimeout(() => {
-        try {
-          if (open && modalRef.current) {
-            cleanup = (0, import_utils.blockTouch)(modalRef.current);
-          }
-        } catch (e) {
-        }
-      }, 0);
-    return () => {
-      cleanup == null ? void 0 : cleanup();
-    };
-  }, [open, disableScrollLock]);
-  if (!mounted) {
-    return null;
-  }
-  return /* @__PURE__ */ import_react.default.createElement(import_Portal.default, { container, disablePortal }, /* @__PURE__ */ import_react.default.createElement("div", __spreadValues({ className: (0, import_clsx.default)(prefixCls, className), ref: handleRef }, others), !hideBackdrop ? /* @__PURE__ */ import_react.default.createElement(
-    import_Backdrop.default,
-    __spreadProps(__spreadValues({
-      open,
-      onClick: handleBackdropClick,
-      onEnter: () => setBackDropExited(false),
-      onExited: () => setBackDropExited(true)
-    }, BackdropProps), {
-      className: (0, import_clsx.default)(`${prefixCls}-backdrop`, BackdropProps == null ? void 0 : BackdropProps.className)
-    })
-  ) : null, (open || keepMounted) && children));
+  return /* @__PURE__ */ import_react.default.createElement(import_Portal.default, { container, disablePortal, ref: portalRef }, /* @__PURE__ */ import_react.default.createElement("div", __spreadValues({}, rootProps), !hideBackdrop && /* @__PURE__ */ import_react.default.createElement(import_Backdrop.default, __spreadValues({}, backdropProps)), renderChildren()));
 });
 Modal.displayName = "BuiModal";
-Modal.defaultProps = {
-  open: false,
-  disablePortal: false,
-  disableScrollLock: false,
-  hideBackdrop: false
-};
 var Modal_default = Modal;

package/dist/Modal/Modal.miniapp.js

@@ -59,25 +59,25 @@ __export(Modal_miniapp_exports, {
   default: () => Modal_miniapp_default
 });
 module.exports = __toCommonJS(Modal_miniapp_exports);
-var import_utils = require("@bifrostui/utils");
 var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
 var import_components = require("@tarojs/components");
 var import_Backdrop = __toESM(require("../Backdrop"));
 var import_Portal = __toESM(require("../Portal"));
-var import_Modal = require("./Modal.css");
+var import_useModal = require("./useModal");
+var import_index = require("./index.css");
 const prefixCls = "bui-modal";
 const Modal = /* @__PURE__ */ import_react.default.forwardRef(
   (props, ref) => {
     const _a = props, {
       className,
-      open,
+      open = false,
       BackdropProps,
       children,
       container,
-      disablePortal,
-      disableScrollLock,
-      hideBackdrop,
+      disablePortal = false,
+      disableScrollLock = false,
+      hideBackdrop = false,
       onClose,
       onClick,
       keepMounted
@@ -94,54 +94,59 @@ const Modal = /* @__PURE__ */ import_react.default.forwardRef(
       "onClick",
       "keepMounted"
     ]);
-    const modalRef = import_react.default.useRef(null);
-    const handleRef = (0, import_utils.useForkRef)(modalRef, ref);
-    const [backdropExited, setBackDropExited] = (0, import_react.useState)(hideBackdrop || !open);
-    const mounted = open || !backdropExited || keepMounted;
-    const handleBackdropClick = (event) => {
-      if (event.target.id !== event.currentTarget.id) {
-        return;
+    const {
+      getRootProps,
+      getBackdropProps,
+      getTransitionProps,
+      exited,
+      hasTransition
+    } = (0, import_useModal.useModal)(__spreadProps(__spreadValues({}, props), {
+      disableScrollLock,
+      children: import_react.default.isValidElement(children) ? children : void 0,
+      open,
+      onClose,
+      rootRef: ref
+    }));
+    if (!keepMounted && !open && (!hasTransition || exited)) {
+      return null;
+    }
+    const rootProps = getRootProps(__spreadProps(__spreadValues({}, others), {
+      className: (0, import_clsx.default)(
+        prefixCls,
+        {
+          [`${prefixCls}-hidden`]: !open && exited
+        },
+        className
+      )
+    }));
+    const backdropProps = getBackdropProps(__spreadProps(__spreadValues({}, BackdropProps), {
+      className: (0, import_clsx.default)(`${prefixCls}-backdrop`, BackdropProps == null ? void 0 : BackdropProps.className)
+    }));
+    const transitionProps = hasTransition ? getTransitionProps() : {};
+    const renderChildren = () => {
+      if (!children) {
+        return null;
       }
-      if (onClose) {
-        onClose(event, { from: "backdrop" });
+      if (import_react.default.isValidElement(children)) {
+        return import_react.default.cloneElement(children, __spreadValues(__spreadProps(__spreadValues({}, transitionProps), {
+          tabIndex: -1
+        }), children.props));
       }
+      return children;
     };
-    if (!mounted) {
-      return null;
-    }
     return /* @__PURE__ */ import_react.default.createElement(import_Portal.default, { container, disablePortal }, /* @__PURE__ */ import_react.default.createElement(
       import_components.View,
-      __spreadValues({
-        className: (0, import_clsx.default)(prefixCls, className),
-        ref: handleRef,
-        catchMove: !disableScrollLock,
+      __spreadProps(__spreadValues({
+        catchMove: !disableScrollLock
+      }, rootProps), {
         onClick: (event) => {
           onClick == null ? void 0 : onClick(event);
         }
-      }, others),
-      !hideBackdrop ? /* @__PURE__ */ import_react.default.createElement(
-        import_Backdrop.default,
-        __spreadProps(__spreadValues({
-          open,
-          onClick: handleBackdropClick,
-          onEnter: () => setBackDropExited(false),
-          onExited: () => setBackDropExited(true)
-        }, BackdropProps), {
-          className: (0, import_clsx.default)(
-            `${prefixCls}-backdrop`,
-            BackdropProps == null ? void 0 : BackdropProps.className
-          )
-        })
-      ) : null,
-      (open || keepMounted) && children
+      }),
+      !hideBackdrop && /* @__PURE__ */ import_react.default.createElement(import_Backdrop.default, __spreadValues({}, backdropProps)),
+      renderChildren()
     ));
   }
 );
 Modal.displayName = "BuiModal";
-Modal.defaultProps = {
-  open: false,
-  disablePortal: false,
-  disableScrollLock: false,
-  hideBackdrop: false
-};
 var Modal_miniapp_default = Modal;