@bifrostui/react 1.5.3 → 2.0.0-alpha.1

package/es/src/Tooltip/Tooltip.types.d.ts

@@ -0,0 +1,99 @@
+import React from 'react';
+import { OverrideProps } from '@bifrostui/types';
+/**
+ * 触发 Tooltip 显示的事件类型
+ */
+export type TooltipTriggerType = 'click' | 'hover';
+/**
+ * Tooltip 的位置选项
+ */
+export type TooltipPlacement = 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+/**
+ * onOpenChange 回调函数的数据参数
+ */
+export interface TooltipOpenChangeData {
+    /** 浮层显隐状态 */
+    open: boolean;
+}
+/**
+ * Tooltip 组件的属性接口
+ */
+export interface TooltipBaseProps {
+    /**
+     * 气泡浮层显示内容
+     * 支持文本、React 节点等
+     */
+    title?: React.ReactNode;
+    /**
+     * 默认是否显隐
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * 用于手动控制气泡浮层显隐
+     * 当提供此属性时，组件变为受控模式
+     */
+    open?: boolean;
+    /**
+     * 浮层与目标元素的偏移距离（像素）
+     * @default 0
+     */
+    offset?: number;
+    /**
+     * 气泡框相对于目标元素的位置
+     * @default 'top'
+     */
+    placement?: TooltipPlacement;
+    /**
+     * 触发 Tooltip 显示的事件类型
+     * - 'click': 点击触发
+     * - 'hover': 悬停触发
+     * - 可以传递数组来组合多种触发方式
+     * @default 'click'
+     */
+    trigger?: TooltipTriggerType | TooltipTriggerType[];
+    /**
+     * 显隐状态变化时的回调函数
+     * @param event - 触发事件
+     * @param data - 回调数据，包含当前的显隐状态
+     */
+    onOpenChange?: (event: React.SyntheticEvent, data: TooltipOpenChangeData) => void;
+    /**
+     * 子元素，必须是可以接收 ref 的 React 元素
+     */
+    children?: React.ReactElement;
+    /**
+     * 无障碍功能：Tooltip的角色
+     * @default 'tooltip'
+     */
+    role?: 'tooltip' | 'dialog' | 'status' | 'alert';
+    /**
+     * 无障碍功能：为Tooltip提供可访问的标签
+     */
+    'aria-label'?: string;
+    /**
+     * 无障碍功能：引用描述此Tooltip的元素ID
+     */
+    'aria-labelledby'?: string;
+    /**
+     * 无障碍功能：是否自动管理焦点
+     * 当为true时，Tooltip显示时会自动获取焦点，关闭时焦点返回到触发元素
+     * @default false
+     */
+    autoFocus?: boolean;
+    /**
+     * 无障碍功能：是否支持Escape键关闭
+     * @default false
+     */
+    closeOnEscape?: boolean;
+    /**
+     * 无障碍功能：是否对屏幕阅读器隐藏Tooltip
+     * 当为true时，Tooltip将被屏幕阅读器忽略
+     * @default false
+     */
+    'aria-hidden'?: boolean;
+}
+export type TooltipProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & TooltipBaseProps;
+    defaultComponent: D;
+}, D>;

package/es/src/Tooltip/__tests__/fixtures/A11yDemos.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+/**
+ * 自定义 Tooltip 组件 Demo 集合
+ * 这个文件包含多个测试 demo，展示如何使用 getCustomDemoCodesFromFile 进行无障碍测试
+ * 文件名必须是 A11yDemos.tsx（固定约定）
+ */
+export declare const basicTooltipDemo: () => React.JSX.Element;
+export declare const placementTooltipDemo: () => React.JSX.Element;
+export declare const triggerTooltipDemo: () => React.JSX.Element;
+export declare const accessibilityTooltipDemo: () => React.JSX.Element;
+export declare const complexInteractionTooltipDemo: () => React.JSX.Element;
+export declare const complexContentTooltipDemo: () => React.JSX.Element;
+export declare const offsetTooltipDemo: () => React.JSX.Element;
+export declare const edgeCaseTooltipDemo: () => React.JSX.Element;
+declare const _default: {
+    basicTooltipDemo: () => React.JSX.Element;
+    placementTooltipDemo: () => React.JSX.Element;
+    triggerTooltipDemo: () => React.JSX.Element;
+    accessibilityTooltipDemo: () => React.JSX.Element;
+    complexInteractionTooltipDemo: () => React.JSX.Element;
+    complexContentTooltipDemo: () => React.JSX.Element;
+    offsetTooltipDemo: () => React.JSX.Element;
+    edgeCaseTooltipDemo: () => React.JSX.Element;
+};
+export default _default;

package/es/src/Tooltip/useTooltip.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { TooltipProps } from './Tooltip.types';
+export interface UseTooltipParameters {
+    title?: React.ReactNode;
+    defaultOpen?: boolean;
+    open?: boolean;
+    offset?: number;
+    placement?: TooltipProps['placement'];
+    trigger?: TooltipProps['trigger'];
+    onOpenChange?: TooltipProps['onOpenChange'];
+    autoFocus?: boolean;
+    closeOnEscape?: boolean;
+    children: React.ReactElement;
+    rootRef?: React.Ref<HTMLElement>;
+}
+export interface UseTooltipReturnValue {
+    getTooltipProps: (otherProps?: Record<string, unknown>) => Record<string, unknown>;
+    getChildProps: () => Record<string, unknown>;
+    getPortalProps: () => {
+        onMounted: () => void;
+    };
+    tooltipRef: React.RefCallback<HTMLElement>;
+    isOpen: boolean;
+    toolStyles: React.CSSProperties;
+    arrowDirection: string;
+    arrowLocation: string;
+    tooltipId: string;
+}
+export declare function useTooltip(parameters: UseTooltipParameters): UseTooltipReturnValue;

package/es/src/TransitionGroup/TransitionGroup.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { TransitionGroupProps } from './TransitionGroup.types';
+declare const TransitionGroup: {
+    (props: TransitionGroupProps): React.JSX.Element;
+    displayName: string;
+};
+export default TransitionGroup;

package/es/src/TransitionGroup/TransitionGroup.types.d.ts

@@ -0,0 +1,47 @@
+import { OverrideProps } from '@bifrostui/types';
+import React, { ReactElement, ReactNode } from 'react';
+export interface TransitionGroupBaseProps {
+    /**
+     * 一组 `<Transition>` 组件，它们在离开时会切换为 `in` 和 `out`。`<TransitionGroup>` 会注入特定的过渡属性，因此，
+     * 如果您像我们的 `<Fade>` 示例一样包装 `<Transition>`，请记住将它们分散开来。
+     * 虽然此组件适用于多个 `Transition` 或 `CSSTransition`子组件，但有时您可能希望只有一个过渡子组件，
+     * 其中包含您希望在更改其内容时过渡出和入的内容（例如，路由、图像等）。在这种情况下，您可以在更改过渡子组件的内容时更改其 `key` 属性，
+     * 这将导致`TransitionGroup` 将该子组件过渡出和入。
+     */
+    children?: ReactNode;
+    /**
+     * 启用或禁用所有子元素的出现动画
+     * 请注意，指定此项将覆盖单个子组件 Transitions 上设置的任何默认设置
+     */
+    appear?: boolean;
+    /**
+     * 用于启用或禁用所有子级的进入动画
+     * 请注意，指定此项将覆盖单个子组件 Transitions 上设置的任何默认设置
+     */
+    enter?: boolean;
+    /**
+     * 用于启用或禁用所有子组件的退出动画。
+     * 请注意，指定此项将覆盖单个子组件 Transitions 上设置的任何默认设置
+     */
+    exit?: boolean;
+    /**
+     * 您可能需要在子组件退出时对其进行响应式更新。
+     * 这通常通过使用 `cloneElement` 来实现，但是，如果子组件退出，该元素已被移除，消费者无法访问。
+     * 如果您确实需要在子组件退出时对其进行更新，则可以提供一个 `childFactory`
+     * 来包装每个子组件，即使是即将退出的子组件。
+     * @default (child) => child
+     */
+    childFactory?: (child: ReactElement) => ReactElement;
+}
+export type TransitionGroupProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & TransitionGroupBaseProps & {
+        /**
+         * `<TransitionGroup>` 默认渲染一个 `<div>`。您可以通过提供 `component` 属性来更改此行为。
+         * 如果您使用的是 React v16+，并且希望避免使用包裹的 `<div>` 元素，
+         * 您可以传入 `component={null}`。如果包裹的 div 破坏了您的 CSS 样式，这将非常有用。
+         * @default div
+         */
+        component?: D | null;
+    };
+    defaultComponent: D;
+}, D>;

package/es/src/TransitionGroup/demo/TransitionGroupDemo.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './index.less';
+declare const TransitionGroupDemo: () => React.JSX.Element;
+export default TransitionGroupDemo;

package/es/src/TransitionGroup/index.d.ts

@@ -0,0 +1,2 @@
+export { default, default as TransitionGroup } from './TransitionGroup';
+export * from './TransitionGroup.types';

package/es/src/TransitionGroup/utils/childMapping.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Given `this.props.children`, return an object mapping key to child.
+ *
+ * @param {*} children `this.props.children`
+ * @return {object} Mapping of key to child
+ */
+export declare const getChildMapping: (children: any, mapFn?: any) => any;
+/**
+ * When you're adding or removing children some may be added or removed in the
+ * same render pass. We want to show *both* since we want to simultaneously
+ * animate elements in and out. This function takes a previous set of keys
+ * and a new set of keys and merges them with its best guess of the correct
+ * ordering. In the future we may expose some of the utilities in
+ * ReactMultiChild to make this easy, but for now React itself does not
+ * directly have this concept of the union of prevChildren and nextChildren
+ * so we implement it here.
+ *
+ * @param {object} prev prev children as returned from
+ * `ReactTransitionChildMapping.getChildMapping()`.
+ * @param {object} next next children as returned from
+ * `ReactTransitionChildMapping.getChildMapping()`.
+ * @return {object} a key set that contains all keys in `prev` and all keys
+ * in `next` in a reasonable order.
+ */
+export declare const mergeChildMappings: (prev: any, next: any) => {};
+export declare const getInitialChildMapping: (props: any, onExited: any) => any;
+export declare const getNextChildMapping: (nextProps: any, prevChildMapping: any, onExited: any) => {};

package/es/src/index.d.ts

@@ -0,0 +1,58 @@
+export * from './ActionSheet';
+export * from './Alert';
+export * from './Avatar';
+export * from './Backdrop';
+export * from './Badge';
+export * from './Button';
+export * from './Calendar';
+export * from './Card';
+export * from './Checkbox';
+export * from './Collapse';
+export * from './DatePicker';
+export * from './DesktopDatePicker';
+export * from './DesktopTimePicker';
+export * from './DesktopDateTimePicker';
+export * from './DesktopPicker';
+export * from './Divider';
+export * from './Drawer';
+export * from './Fade';
+export * from './IconButton';
+export * from './Image';
+export * from './Input';
+export * from './List';
+export * from './Modal';
+export * from './Popover';
+export * from './Portal';
+export * from './Progress';
+export * from './Radio';
+export * from './Rating';
+export * from './ScrollView';
+export * from './Select';
+export * from './Skeleton';
+export * from './Slide';
+export * from './Slider';
+export * from './Stack';
+export * from './Steps';
+export * from './Swiper';
+export * from './Switch';
+export * from './Tabs';
+export * from './Tag';
+export * from './TextArea';
+export * from './Transition';
+export * from './Tooltip';
+export * from './NavBar';
+export * from './Loading';
+export * from './TabBar';
+export * from './Countdown';
+export * from './CitySelector';
+export * from './ItemSelector';
+export * from './Picker';
+export * from './CollapsePanel';
+export * from './Breadcrumb';
+export * from './Toast';
+export * from './Dialog';
+export * from './ThemeProvider';
+export * from './locales';
+export * from './SwipeAction';
+export * from './CSSTransition';
+export * from './TransitionGroup';

package/es/src/locales/base.d.ts

@@ -0,0 +1,79 @@
+export interface BaseLang {
+    dialog?: {
+        cancel?: string;
+        ok?: string;
+        placeholder?: string;
+    };
+    picker?: {
+        cancel?: string;
+        confirm?: string;
+    };
+    calendar?: {
+        Monday?: string;
+        Tuesday?: string;
+        Wednesday?: string;
+        Thursday?: string;
+        Friday?: string;
+        Saturday?: string;
+        Sunday?: string;
+    };
+    input?: {
+        placeholder?: string;
+    };
+    textarea?: {
+        labelName?: string;
+        placeholder?: string;
+        remaining?: string;
+        characters?: string;
+    };
+    selector?: {
+        select?: string;
+    };
+    citySelector?: {
+        selectedCityGroupName?: string;
+        currentCityGroupName?: string;
+        hotCitiesGroupName?: string;
+        located?: string;
+        current?: string;
+        hot?: string;
+        gpsType?: Record<string, string>;
+        currentType?: Record<string, string>;
+        hotCityType?: Record<string, string>;
+    };
+    desktopDatePicker?: {
+        month?: Record<number, string>;
+    };
+    datePicker?: {
+        year: string;
+        month: string;
+        day: string;
+        hour: string;
+        minute: string;
+        second: string;
+    };
+    countdown?: {
+        remain?: {
+            year?: string;
+            month?: string;
+            day?: string;
+            hour?: string;
+            minute?: string;
+            second?: string;
+        };
+        remainTime?: string;
+        hasEnd?: string;
+        willEnd?: string;
+        timer?: string;
+    };
+    progress?: {
+        labelName?: string;
+        notStarted?: string;
+        justBegun?: string;
+        gettingStarted?: string;
+        inProgress?: string;
+        moreThanHalfway?: string;
+        almostComplete?: string;
+        complete?: string;
+        nearingCompletion?: string;
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bifrostui/react",
-  "version": "1.5.3",
+  "version": "2.0.0-alpha.1",
   "description": "React components for building mobile application",
   "homepage": "http://bui.taopiaopiao.com",
   "license": "MIT",
@@ -10,6 +10,14 @@
   "directories": {
     "test": "__tests__"
   },
+  "exports": {
+    ".": {
+      "import": "./es/index.js",
+      "module": "./es/index.js",
+      "require": "./dist/index.js"
+    },
+    "./css/*": "./es/*/index.css"
+  },
   "files": [
     "dist",
     "es",
@@ -25,18 +33,20 @@
     "*.less"
   ],
   "devDependencies": {
+    "@rspack/cli": "^1.4.4",
+    "@rspack/core": "^1.4.4",
     "esbuild-plugin-less": "1.3.10",
     "fs-extra": "^11.2.0",
     "glob": "11.0.0"
   },
   "dependencies": {
-    "clsx": "^1.2.1",
+    "clsx": "^2.1.1",
     "dayjs": "^1.11.7",
     "swiper": "^8.1.5",
-    "@bifrostui/icons": "1.5.3",
-    "@bifrostui/styles": "1.5.3",
-    "@bifrostui/types": "1.5.3",
-    "@bifrostui/utils": "1.5.3"
+    "@bifrostui/icons": "2.0.0-alpha.1",
+    "@bifrostui/styles": "2.0.0-alpha.1",
+    "@bifrostui/types": "2.0.0-alpha.1",
+    "@bifrostui/utils": "2.0.0-alpha.1"
   },
   "peerDependencies": {
     "@tarojs/components": "^3.0.0",
@@ -46,6 +56,7 @@
     "react-dom": "^17.0.0 || ^18.0.0"
   },
   "scripts": {
-    "build": "node esbuild.config.js"
+    "build": "node esbuild.config.js",
+    "build:benchmark": "rspack build"
   }
 }

package/dist/ActionSheet/ActionSheetItem.types.d.ts

@@ -1,38 +0,0 @@
-import { OverrideProps, ThemeColor } from '@bifrostui/types';
-import React from 'react';
-export type ActionSheetItemProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
-    props: P & {
-        /**
-         * 是否禁用
-         * @default false
-         */
-        disabled?: boolean;
-        /**
-         * 颜色
-         * @default 'default'
-         */
-        color?: ThemeColor | 'default';
-        /**
-         * 是否加粗
-         * @default false
-         */
-        bold?: boolean;
-        /**
-         * 描述内容
-         */
-        description?: React.ReactNode;
-        /**
-         * 索引标记
-         */
-        index?: string | number;
-        /**
-         * 点击事件回调方法
-         * @param event
-         * @param data
-         */
-        onClick?: (event: React.MouseEvent<HTMLDivElement>, data?: {
-            index: string | number;
-        }) => void;
-    };
-    defaultComponent: D;
-}, D>;

package/dist/Alert/Alert.types.d.ts

@@ -1,61 +0,0 @@
-import { OverrideProps, ThemeColor } from '@bifrostui/types';
-import React, { SyntheticEvent } from 'react';
-export type AlertProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
-    props: P & {
-        /**
-         * 指定警告提示的样式
-         */
-        color?: ThemeColor;
-        /**
-         * 自定义图标，icon为false时隐藏图标
-         */
-        icon?: React.ReactNode | boolean;
-        /**
-         *  警告提示操作区
-         */
-        action?: React.ReactNode;
-        /**
-         * 警告模式
-         */
-        variant?: 'standard' | 'outlined';
-        /**
-         * 内容是否滚动（内容只能单行）
-         */
-        marquee?: boolean;
-        /**
-         *  关闭回调
-         */
-        onClose?: (e?: SyntheticEvent) => void;
-    };
-    defaultComponent: D;
-}, D>;
-export type AlertIconProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
-    props: P & {
-        /**
-         * 指定警告提示的样式
-         */
-        color?: ThemeColor;
-        /**
-         * 自定义图标，icon为false时隐藏图标
-         */
-        icon?: React.ReactNode | boolean;
-    };
-    defaultComponent: D;
-}, D>;
-export type AlertActionProps<D extends React.ElementType = React.ElementType, P = {}> = OverrideProps<{
-    props: P & {
-        /**
-         * 指定警告提示的样式
-         */
-        color?: ThemeColor;
-        /**
-         *  警告提示操作区
-         */
-        action?: React.ReactNode;
-        /**
-         *  关闭回调,
-         */
-        onClose?: (e?: SyntheticEvent) => void;
-    };
-    defaultComponent: D;
-}, D>;

package/dist/Backdrop/Backdrop.css

@@ -1,15 +0,0 @@
-.bui-backdrop {
-  --background-color: var(--bui-backdrop-background-color, rgba(0, 0, 0, 0.68));
-  position: fixed;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  top: 0;
-  background-color: var(--background-color);
-}
-.bui-backdrop-invisible {
-  background-color: transparent;
-}

package/dist/Backdrop/Backdrop.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import './Backdrop.less';
-import { BackdropProps } from './Backdrop.types';
-declare const Backdrop: React.ForwardRefExoticComponent<Omit<BackdropProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export default Backdrop;

package/dist/Backdrop/Backdrop.types.d.ts

@@ -1,17 +0,0 @@
-import { OverrideProps } from '@bifrostui/types';
-import React from 'react';
-import { FadeProps } from '../Fade/Fade.types';
-import { TransitionProps } from '../Transition';
-export interface BackdropTypeMap<D extends React.ElementType = 'div', P = {}> {
-    props: P & {
-        open?: boolean;
-        /**
-         * 是否透明不可见
-         * - default:false
-         */
-        invisible?: boolean;
-        transitionDuration?: TransitionProps['timeout'];
-    } & Omit<FadeProps, 'children'>;
-    defaultComponent: D;
-}
-export type BackdropProps<D extends React.ElementType = BackdropTypeMap['defaultComponent'], P = {}> = OverrideProps<BackdropTypeMap<D, P>, D>;