@bifrostui/react 2.0.0-alpha.2 → 2.0.0-alpha.21

package/es/Modal/useModal.js

@@ -36,7 +36,6 @@ function useModal(parameters) {
     onClose,
     open,
     rootRef,
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     children
   } = parameters;
   const modal = useRef({
@@ -59,12 +58,12 @@ function useModal(parameters) {
     }
     return modal.current;
   };
-  const isTopModal = () => modalManager.isTopModal(getModal());
-  const handleMounted = () => {
+  const isTopModal = useCallback(() => modalManager.isTopModal(getModal()), []);
+  const handleMounted = useCallback(() => {
     modalManager.mount(getModal(), {
       disableScrollLock
     });
-  };
+  }, [disableScrollLock]);
   const handleOpen = useEventCallback(() => {
     const resolvedContainer = getContainer(container) || document.body;
     modalManager.add(getModal(), resolvedContainer);
@@ -72,17 +71,20 @@ function useModal(parameters) {
       handleMounted();
     }
   });
-  const handlePortalRef = useEventCallback((node) => {
-    mountNodeRef.current = node;
-    if (!node) {
-      return;
-    }
-    if (open && isTopModal()) {
-      handleMounted();
-    } else if (modalRef.current) {
-      ariaHidden(modalRef.current, ariaHiddenProp);
-    }
-  });
+  const handlePortalRef = useCallback(
+    (node) => {
+      mountNodeRef.current = node;
+      if (!node) {
+        return;
+      }
+      if (open && isTopModal()) {
+        handleMounted();
+      } else if (modalRef.current) {
+        ariaHidden(modalRef.current, ariaHiddenProp);
+      }
+    },
+    [open, ariaHiddenProp, isTopModal, handleMounted]
+  );
   const handleClose = useCallback(() => {
     modalManager.remove(getModal(), ariaHiddenProp);
   }, [ariaHiddenProp]);
@@ -98,21 +100,17 @@ function useModal(parameters) {
       handleClose();
     }
   }, [open, handleClose, hasTransition, handleOpen]);
-  const createHandleBackdropClick = (
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (backdropHandlers = {}) => (event) => {
-      var _a;
-      (_a = backdropHandlers.onClick) == null ? void 0 : _a.call(backdropHandlers, event);
-      if (event.target !== event.currentTarget) {
-        return;
-      }
-      if (onClose) {
-        onClose(event, { from: "backdropClick" });
-      }
+  const createHandleBackdropClick = (backdropHandlers = {}) => (event) => {
+    var _a;
+    (_a = backdropHandlers.onClick) == null ? void 0 : _a.call(backdropHandlers, event);
+    if (event.target !== event.currentTarget) {
+      return;
     }
-  );
+    if (onClose) {
+      onClose(event, { from: "backdropClick" });
+    }
+  };
   const getRootProps = useCallback(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (rootHandlers) => {
       return __spreadProps(__spreadValues({
         role: "presentation"
@@ -123,7 +121,6 @@ function useModal(parameters) {
     [handleRef]
   );
   const getBackdropProps = useCallback(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (backdropHandlers = {}) => {
       const propsEventHandlers = {
         onClick: createHandleBackdropClick(backdropHandlers)

package/es/NavBar/NavBar.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { NavBarProps } from './NavBar.types';
 import './index.less';
 declare const NavBar: React.ForwardRefExoticComponent<Omit<NavBarProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/es/NavBar/NavBar.js

@@ -26,7 +26,7 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import React from "react";
+import * as React from "react";
 import clsx from "clsx";
 import { useForkRef, useSize } from "@bifrostui/utils";
 import { ArrowBackwardLargeIcon } from "@bifrostui/icons";

package/es/Picker/Picker.js

@@ -238,7 +238,6 @@ const Picker = /* @__PURE__ */ React.forwardRef((props, ref) => {
               [`${prefixCls}-confirm-disabled`]: disabled
             }),
             onClick: confirm,
-            type: "button",
             "aria-label": "Confirm",
             tabIndex: disabled ? -1 : 0
           },

package/es/Picker/Picker.types.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { OverrideProps } from '@bifrostui/types';
 import { DrawerProps } from '../Drawer/Drawer.types';
 export interface IPickerOptionItem {

package/es/Picker/__tests__/fixtures/A11yDemos.d.ts

@@ -1,2 +1,2 @@
-import React from 'react';
+import * as React from 'react';
 export declare const CalendarDemo: () => React.JSX.Element;

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

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import Picker from "../../Picker";
 const CalendarDemo = () => {
   return /* @__PURE__ */ React.createElement(

package/es/Popover/Popover.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { PopoverProps } from './Popover.types';
 import './index.less';
 declare const Popover: React.ForwardRefExoticComponent<Omit<PopoverProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/es/Popover/Popover.js

@@ -30,7 +30,7 @@ var __objRest = (source, exclude) => {
   return target;
 };
 import clsx from "clsx";
-import React from "react";
+import * as React from "react";
 import { useForkRef } from "@bifrostui/utils";
 import Portal from "../Portal";
 import Backdrop from "../Backdrop";

package/es/Popover/Popover.types.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { OverrideProps } from '@bifrostui/types';
 type triggerType = 'click' | 'hover' | 'none';
 export interface AnchorOrigin {

package/es/Popover/__tests__/fixtures/A11yDemos.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 /**
  * 自定义 Popover 组件 Demo 集合
  * 这个文件包含多个测试 demo，展示如何使用 getCustomDemoCodesFromFile 进行无障碍测试

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

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import Popover from "../../Popover";
 const basicPopoverDemo = () => {
   return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(

package/es/Portal/Portal.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { PortalProps } from './Portal.types';
 export declare const Portal: React.ForwardRefExoticComponent<PortalProps & React.RefAttributes<HTMLElement>>;
 export default Portal;

package/es/Portal/Portal.js

@@ -17,7 +17,7 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import React from "react";
+import * as React from "react";
 import PortalCore from "./PortalCore";
 const Portal = /* @__PURE__ */ React.forwardRef(
   (props, ref) => {

package/es/Portal/Portal.miniapp.js

@@ -18,19 +18,25 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import Taro from "@tarojs/taro";
-import React, { forwardRef, useEffect, useState } from "react";
+import React, { forwardRef, useLayoutEffect, useState, useMemo } from "react";
 import PortalCore from "./PortalCore";
 const Portal = forwardRef((props, ref) => {
   const { disablePortal } = props;
   const [rootWrapperElement, setRootWrapperElement] = useState();
-  useEffect(() => {
+  const initialPageInfo = useMemo(() => {
+    const currentPages = Taro.getCurrentPages() || [];
+    const currentPage = currentPages[currentPages.length - 1];
+    return {
+      path: currentPage == null ? void 0 : currentPage.$taroPath
+    };
+  }, []);
+  useLayoutEffect(() => {
     let root;
-    if (!disablePortal) {
-      const currentPages = Taro.getCurrentPages() || [];
-      const currentPage = currentPages[currentPages.length - 1];
-      const pageElement = currentPage == null ? void 0 : currentPage.$taroPath;
-      const rootElement = document.getElementById(pageElement);
-      const portalId = (rootElement == null ? void 0 : rootElement.sid) ? `${rootElement == null ? void 0 : rootElement.sid}_portalId` : `${pageElement}_portalId`;
+    if (!disablePortal && initialPageInfo.path) {
+      const { path } = initialPageInfo;
+      const rootElement = document.getElementById(path);
+      const elementWithSid = rootElement;
+      const portalId = (elementWithSid == null ? void 0 : elementWithSid.sid) ? `${elementWithSid.sid}_portalId` : `${path}_portalId`;
       const portalWrapperElement = document.getElementById(portalId);
       if (!portalWrapperElement) {
         const view = document.createElement("view");
@@ -42,7 +48,7 @@ const Portal = forwardRef((props, ref) => {
       }
     }
     setRootWrapperElement(root);
-  }, []);
+  }, [disablePortal, initialPageInfo.path]);
   return /* @__PURE__ */ React.createElement(PortalCore, __spreadProps(__spreadValues({}, props), { ref, rootElement: rootWrapperElement }));
 });
 Portal.displayName = "BuiPortal";

package/es/Portal/Portal.types.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 export interface PortalCoreProps {
     /**
      * container中渲染的元素

package/es/Progress/Progress.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { ProgressGradient, ProgressProps } from './Progress.types';
 import './index.less';
 export declare const handleGradient: (strokeColor: ProgressGradient) => {

package/es/Progress/Progress.js

@@ -27,7 +27,7 @@ var __objRest = (source, exclude) => {
   return target;
 };
 import clsx from "clsx";
-import React from "react";
+import * as React from "react";
 import { useLocaleText } from "../locales";
 import "./index.css";
 const prefixCls = "bui-progress";

package/es/Progress/Progress.types.d.ts

@@ -1,5 +1,5 @@
 import { OverrideProps } from '@bifrostui/types';
-import React from 'react';
+import * as React from 'react';
 export type ProgressStringGradients = {
     [percentage: string]: string;
 };

package/es/Progress/__tests__/fixtures/A11yDemos.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 /**
  * 自定义 Progress 组件 Demo 集合
  * 这个文件包含多个测试 demo，展示如何使用 getCustomDemoCodesFromFile 进行无障碍测试

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

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import Progress from "../../Progress";
 const basicProgressDemo = () => {
   return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Progress, { percent: 40 }));

package/es/Radio/RadioButtonIcon.d.ts

@@ -1,5 +1,5 @@
 import { ISvgIconProps } from '@bifrostui/icons';
-import React from 'react';
+import * as React from 'react';
 export interface IRadioButtonIconProps extends ISvgIconProps {
     checked: boolean;
 }

package/es/Radio/RadioButtonIcon.js

@@ -3,7 +3,7 @@ import {
   RadioCheckedFilledIcon as RadioButtonCheckedIcon
 } from "@bifrostui/icons";
 import clsx from "clsx";
-import React from "react";
+import * as React from "react";
 const prefixCls = "bui-radio-btn-icon";
 function RadioButtonIcon(props) {
   const {

package/es/Radio/RadioContext.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { RadioGroupContextProps } from './Radio.types';
 declare const RadioGroupContext: React.Context<RadioGroupContextProps>;
 export declare const RadioContextProvider: React.Provider<RadioGroupContextProps>;

package/es/Radio/RadioContext.js

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 const RadioGroupContext = React.createContext(void 0);
 const RadioContextProvider = RadioGroupContext.Provider;
 var RadioContext_default = RadioGroupContext;

package/es/Radio/__tests__/fixtures/A11yDemos.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 /**
  * 自定义 Radio 组件 Demo 集合
  * 这个文件包含多个测试 demo，展示如何使用 getCustomDemoCodesFromFile 进行无障碍测试

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

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import Radio from "../../Radio";
 const basicRadioDemo = () => {
   return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", null, /* @__PURE__ */ React.createElement(Radio, { checked: true }), "Radio"));

package/es/Rating/Rating.types.d.ts

@@ -1,5 +1,5 @@
 import { OverrideProps } from '@bifrostui/types';
-import React from 'react';
+import * as React from 'react';
 export type RatingSize = 'xsmall' | 'small' | 'medium' | 'large';
 export type RatingProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
     props: P & {

package/es/ScrollView/ScrollView.types.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { OverrideProps } from '@bifrostui/types';
 /**
  * 滚动事件详情
@@ -9,6 +9,22 @@ export interface ScrollViewScrollEvent extends Event {
         scrollTop: number;
         scrollHeight: number;
         scrollWidth: number;
+        deltaX?: number;
+        deltaY?: number;
+        isDrag?: boolean;
+    };
+}
+/**
+ * 拖拽事件详情
+ */
+export interface ScrollViewDragEvent extends Event {
+    detail?: {
+        /** 横向滚动条位置 */
+        scrollLeft?: number;
+        /** 竖向滚动条位置 */
+        scrollTop?: number;
+        /** 滚动速度 */
+        velocity?: number;
     };
 }
 /**
@@ -52,6 +68,134 @@ export type ScrollViewProps<D extends React.ElementType = 'div', P = {}> = Overr
          * @default false
          */
         scrollWithAnimation?: boolean;
+        /**
+         * 当 scroll-with-animation设置为 true 时，可以设置 scroll-animation-duration 来控制动画的执行时间，单位 ms。
+         */
+        scrollAnimationDuration?: number;
+        /**
+         * 滚动条返回顶部，只支持竖向
+         * 仅小程序可用
+         * @default false
+         */
+        enableBackToTop?: boolean;
+        /**
+         * 启用 flexbox 布局。开启后，当前节点声明了 `display: flex` 就会成为 flex container，并作用于其孩子节点。
+         * 仅小程序可用
+         * @default false
+         */
+        enableFlex?: boolean;
+        /**
+         * 开启 scroll anchoring 特性，即控制滚动位置不随内容变化而抖动，仅在 iOS 下生效，安卓下可参考 CSS `overflow-anchor` 属性。
+         * 仅小程序可用
+         * @default false
+         */
+        scrollAnchoring?: boolean;
+        /**
+         * 启用 scroll-view 增强特性
+         * 仅小程序可用
+         * @default false
+         */
+        enhanced?: boolean;
+        /**
+         * iOS 下 scroll-view 边界弹性控制 (同时开启 enhanced 属性后生效)
+         * 仅小程序可用
+         * @default true
+         */
+        bounces?: boolean;
+        /**
+         * 滚动条显隐控制 (同时开启 enhanced 属性后生效)
+         * 仅小程序可用
+         * @default true
+         */
+        showScrollbar?: boolean;
+        /**
+         * 分页滑动效果 (同时开启 enhanced 属性后生效)
+         * 仅小程序可用
+         * @default false
+         */
+        pagingEnabled?: boolean;
+        /**
+         * 滑动减速速率控制 (同时开启 enhanced 属性后生效)
+         * 仅小程序可用
+         * @default false
+         */
+        fastDeceleration?: boolean;
+        /**
+         * 纵向滚动时，当滚动到顶部或底部时，强制禁止触发页面滚动，仍然只触发 scroll-view 自身的滚动。
+         * 仅小程序可用
+         * @default false
+         */
+        trapScroll?: string;
+        /**
+         * 发生滚动前，对滚动方向进行判断，当方向是顶部/左边时，如果值为always将始终禁止滚动，如果值为out-of-bounds 且当前已经滚动到顶部/左边，禁止滚动。
+         * 仅小程序可用
+         */
+        disableLowerScroll?: string;
+        /**
+         * 发生滚动前，对滚动方向进行判断，当方向是底部/右边时，如果值为always将始终禁止滚动，如果值为out-of-bounds 且当前已经滚动到底部/右边，禁止滚动。
+         * 仅小程序可用
+         */
+        disableUpperScroll?: string;
+        /**
+         * 无障碍访问，（属性）元素的额外描述
+         * 仅小程序可用
+         */
+        ariaLabel?: string;
+        /**
+         * 开启 passive 特性，能优化一定的滚动性能
+         * 仅小程序可用
+         * @default false
+         */
+        enablePassive?: string;
+        /**
+         * 渲染模式
+         * list - 列表模式。只会渲染在屏节点，会根据直接子节点是否在屏来按需渲染，若只有一个直接子节点则性能会退化
+         * custom - 自定义模式。只会渲染在屏节点，子节点可以是 sticky-section list-view grid-view 等组件
+         * 仅小程序可用
+         * @default 'list'
+         */
+        type?: 'list' | 'custom';
+        /**
+         * 是否反向滚动。一般初始滚动位置是在顶部，反向滚动则是在底部。
+         * 仅小程序可用
+         * @default false
+         */
+        reverse?: boolean;
+        /**
+         * 指定视口外渲染区域的距离，默认情况下视口外节点不渲染。指定 cache-extent 可优化滚动体验和加载速度，但会提高内存占用且影响首屏速度，可按需启用。
+         * 仅小程序可用
+         */
+        cacheExtent?: number;
+        /**
+         * 只 scroll-into-view 到 cacheExtent 以内的目标节点，性能更佳
+         * 仅小程序可用
+         * @default false
+         */
+        scrollIntoViewWithinExtent?: boolean;
+        /**
+         * 开启自定义下拉刷新
+         * 仅小程序可用
+         * @default false
+         */
+        refresherEnabled?: boolean;
+        /**
+         * 设置自定义下拉刷新默认样式，支持设置 `black | white | none`， none 表示不使用默认样式
+         * 仅小程序可用
+         * @default 'black'
+         */
+        refresherDefaultStyle?: string;
+        /**
+         * 设置自定义下拉刷新区域背景颜色
+         * 仅小程序可用
+         * @default '#FFF'
+         */
+        refresherBackground?: string;
+        /**
+         * 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
+         * 仅小程序可用
+         * @default false
+         */
+        refresherTriggered?: boolean;
         /**
          * 距顶部/左边多远时（单位px），触发 onScrollToUpper 事件
          * @default 50
@@ -78,6 +222,71 @@ export type ScrollViewProps<D extends React.ElementType = 'div', P = {}> = Overr
          * 触摸移动时触发
          */
         onTouchMove?: (e: React.SyntheticEvent<HTMLDivElement, TouchEvent>) => void;
+        /**
+         * 滚动开始事件
+         * 仅小程序可用
+         */
+        onScrollStart?: (e: React.SyntheticEvent<HTMLDivElement, ScrollViewScrollEvent>) => void;
+        /**
+         * 滚动结束事件
+         * 仅小程序可用
+         */
+        onScrollEnd?: (e: React.SyntheticEvent<HTMLDivElement, ScrollViewScrollEvent>) => void;
+        /**
+         * 自定义下拉刷新控件被下拉
+         * 仅小程序可用
+         */
+        onRefresherPulling?: (e: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        /**
+         * 自定义下拉刷新被触发
+         * 仅小程序可用
+         */
+        onRefresherRefresh?: (e: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        /**
+         * 自定义下拉刷新被复位
+         * 仅小程序可用
+         */
+        onRefresherRestore?: (e: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        /**
+         * 自定义下拉刷新被中止
+         * 仅小程序可用
+         */
+        onRefresherAbort?: (e: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        /**
+         * 自定义下拉刷新即将触发刷新（拖动超过 refresher-threshold 时）的事件
+         * 仅小程序可用
+         */
+        onRefresherWillRefresh?: (e: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        /**
+         * 滑动开始事件 (同时开启 enhanced 属性后生效)
+         * 仅小程序可用
+         */
+        onDragStart?: (e: React.SyntheticEvent<HTMLDivElement, ScrollViewDragEvent>) => void;
+        /**
+         * 滑动事件 (同时开启 enhanced 属性后生效)
+         * 仅小程序可用
+         */
+        onDragging?: (e: React.SyntheticEvent<HTMLDivElement, ScrollViewDragEvent>) => void;
+        /**
+         * 滑动结束事件 (同时开启 enhanced 属性后生效)
+         * 仅小程序可用
+         */
+        onDragEnd?: (e: React.SyntheticEvent<HTMLDivElement, ScrollViewDragEvent>) => void;
+        /**
+         * 触摸动作开始。
+         * 仅小程序可用
+         */
+        onTouchStart?: (e: React.SyntheticEvent<HTMLDivElement, TouchEvent>) => void;
+        /**
+         * 触摸动作结束。
+         * 仅小程序可用
+         */
+        onTouchEnd?: (e: React.SyntheticEvent<HTMLDivElement, TouchEvent>) => void;
+        /**
+         * 触摸动作被打断，如来电提醒、弹窗。
+         * 仅小程序可用
+         */
+        onTouchCancel?: (e: React.SyntheticEvent<HTMLDivElement, TouchEvent>) => void;
     };
     defaultComponent: D;
 }, D>;

package/es/ScrollView/__tests__/fixtures/A11yDemos.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 export declare const BasicScrollViewDemo: React.FC;
 export declare const HorizontalScrollViewDemo: React.FC;
 export declare const ScrollEventsDemo: React.FC;

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

@@ -17,7 +17,7 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import React from "react";
+import * as 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(