@bifrostui/react 2.0.0-alpha.0 → 2.0.0-alpha.1

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": "2.0.0-alpha.0",
+  "version": "2.0.0-alpha.1",
   "description": "React components for building mobile application",
   "homepage": "http://bui.taopiaopiao.com",
   "license": "MIT",
@@ -33,6 +33,8 @@
     "*.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"
@@ -41,10 +43,10 @@
     "clsx": "^2.1.1",
     "dayjs": "^1.11.7",
     "swiper": "^8.1.5",
-    "@bifrostui/icons": "2.0.0-alpha.0",
-    "@bifrostui/types": "2.0.0-alpha.0",
-    "@bifrostui/utils": "2.0.0-alpha.0",
-    "@bifrostui/styles": "2.0.0-alpha.0"
+    "@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",
@@ -54,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/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>;

package/dist/Badge/Badge.types.d.ts

@@ -1,27 +0,0 @@
-import { OverrideProps, ThemeColor } from '@bifrostui/types';
-import React, { ReactNode } from 'react';
-export type BadgeProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
-    props: P & {
-        /**
-         *徽章内容
-         */
-        content?: ReactNode;
-        /**
-         * 颜色
-         */
-        color?: Exclude<ThemeColor, 'neutral'>;
-        /**
-         * 最大值
-         */
-        maxCount?: number;
-        /**
-         *徽章类型
-         */
-        variant?: 'contained' | 'outlined';
-        /**
-         * 徽章形状
-         */
-        type?: 'dot' | 'standard' | 'bubble';
-    };
-    defaultComponent: D;
-}, D>;

package/dist/Calendar/Calendar.types.d.ts

@@ -1,97 +0,0 @@
-import { OverrideProps } from '@bifrostui/types';
-import React from 'react';
-export interface ICalendarInstance {
-    /** 日期对象 */
-    day: Date;
-    /** 是否禁用 */
-    disabled: boolean;
-}
-export interface ICalendarMonthChangeData {
-    /** 切换后的月份 */
-    month: string;
-    /** 操作类型，prev: 点击上个月 next: 点击下个月 */
-    type: 'prev' | 'next';
-}
-export interface ICustomIconProps {
-    /** 是否为可选范围内的最小月份 */
-    isMinMonth?: boolean;
-    /** 是否为可选范围内的最大月份 */
-    isMaxMonth?: boolean;
-}
-export type ICalendarMode = 'single' | 'range';
-export type ICalendarValue = Date | Date[] | null;
-export type CalendarProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
-    props: P & {
-        /**
-         * 默认选中的值，当组件非受控时使用
-         */
-        defaultValue?: ICalendarValue;
-        /**
-         * 选中的值，当组件受控时使用
-         */
-        value?: ICalendarValue;
-        /**
-         * 可选择的最小日期，默认为当前日期
-         * 渲染指定月时：value=null并指定minDate
-         */
-        minDate?: Date;
-        /**
-         * 可选择的最大日期，默认为当前日期的一年后
-         */
-        maxDate?: Date;
-        /**
-         * 选择类型，默认为single
-         * single 表示选择单个日期
-         * range 表示选择日期区间
-         */
-        mode?: ICalendarMode;
-        /**
-         * 是否隐藏当前月之外的日期，默认为false
-         */
-        hideDaysOutsideCurrentMonth?: boolean;
-        /**
-         * 头部操作栏日期显示格式
-         * @default YYYY/MM
-         */
-        headerBarFormat?: string;
-        /**
-         * 头部操作栏左边图标
-         * @defaultReturn <CaretLeftIcon />
-         */
-        headerBarLeftIcon?: (options: ICustomIconProps) => React.ReactNode;
-        /**
-         * 头部操作栏右边图标
-         * @defaultReturn <CaretRightIcon />
-         */
-        headerBarRightIcon?: (options: ICustomIconProps) => React.ReactNode;
-        /**
-         * 不可选择的日期
-         */
-        disabledDate?: (currentDate: Date) => boolean;
-        /**
-         * 高亮的日期，默认为today
-         * today 若选中的非当天，则当天高亮显示，若选中的是当天，则当天展示选中态
-         * weekend 可选的周末高亮显示
-         */
-        highlightDate?: 'today' | 'weekend';
-        /**
-         * 自定义日期单元格的内容
-         */
-        dateRender?: (currentDate: ICalendarInstance) => React.ReactNode;
-        /**
-         * 自定义周单元格的内容
-         */
-        weekRender?: (week: string) => React.ReactNode;
-        /**
-         * 月份发生变化的回调
-         */
-        onMonthChange?: (e: React.SyntheticEvent, data: ICalendarMonthChangeData) => void;
-        /**
-         * 日期发生变化的回调
-         */
-        onChange?: (e: React.SyntheticEvent, data: {
-            value: ICalendarValue;
-        }) => void;
-    };
-    defaultComponent: D;
-}, D>;

package/dist/Calendar/utils.d.ts

@@ -1,25 +0,0 @@
-import { ICalendarMode, ICalendarValue } from './Calendar.types';
-/**
- * 判断日期是否相同
- */
-export declare const isSame: (start: Date, end: Date) => boolean;
-/**
- * 计算日期差
- */
-export declare const geteDateDiff: (a: Date, b: Date) => number;
-/**
- * 判断是否在日期区间内
- */
-export declare const isRange: (current: Date, start: Date, end: Date) => boolean;
-/**
- * 取数组第一个日期为开始日期，最后一个日期为结束日期
- */
-export declare const generateRangeDate: (value: Date[]) => {
-    start: Date;
-    end: Date;
-};
-/**
- * 格式化初始日期
- * @return undefined | Array<Date|null>
- */
-export declare const formatDate: (mode: ICalendarMode, value: ICalendarValue, minDate: Date, maxDate: Date) => any[] | Date;

package/dist/CitySelector/CitySelector.types.d.ts

@@ -1,47 +0,0 @@
-/// <reference types="react" />
-import { OverrideProps } from '@bifrostui/types';
-export type cityType = {
-    /** 城市名 */
-    name: string;
-    /** 城市名id */
-    code: string;
-};
-export type allCityItemType = {
-    /** 城市列表 */
-    cities: cityType[];
-    /** 索引字母 */
-    groupName: string;
-};
-export type CitySelectorProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
-    props: P & {
-        /** 当前城市信息 */
-        selectedCity?: cityType;
-        /** 当前城市栏的title */
-        selectedCityGroupName?: string;
-        /** 定位城市信息 */
-        currentCity?: cityType;
-        /** 定位城市栏的title */
-        currentCityGroupName?: string;
-        /** 热门城市信息 */
-        hotCities?: cityType[];
-        /** 热门城市栏的title */
-        hotCitiesGroupName?: string;
-        /** 城市列表 */
-        cities: allCityItemType[];
-        /** 禁用展示索引 默认false 即展示索引 */
-        disableIndex?: boolean;
-        /** 头部标题 */
-        title?: string;
-        /** 选择城市回调 */
-        onSelect: (e: React.SyntheticEvent, data: {
-            city: cityType;
-        }) => void;
-        /** 和title配合使用，头部右侧的关闭回调 */
-        onClose?: (e: React.SyntheticEvent) => void;
-    };
-    defaultComponent: D;
-}, D>;
-export type CitySelectorCoreProps = CitySelectorProps & {
-    touchHandler: any;
-    height?: string;
-};

package/dist/Collapse/Collapse.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import { CollapseProps } from './Collapse.types';
-import './index.less';
-declare const Collapse: React.ForwardRefExoticComponent<CollapseProps & React.RefAttributes<unknown>>;
-export default Collapse;

package/dist/Countdown/Countdown.types.d.ts

@@ -1,123 +0,0 @@
-import { OverrideProps } from '@bifrostui/types';
-import React, { CSSProperties } from 'react';
-/**
- * 当前时间
- */
-export type CurrentTime = {
-    /**
-     * 剩余总时间，单位毫秒
-     */
-    total: number;
-    /**
-     * 剩余年数
-     */
-    years: string;
-    /**
-     * 剩余月数
-     */
-    months: string;
-    /**
-     * 剩余天数
-     */
-    days: string;
-    /**
-     * 剩余小时
-     */
-    hours: string;
-    /**
-     * 剩余分钟
-     */
-    minutes: string;
-    /**
-     * 剩余秒数
-     */
-    seconds: string;
-    /**
-     * 剩余整数天余下的小时
-     */
-    hoursWithDays: string;
-};
-export type CountdownProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
-    props: P & {
-        /**
-         * 倒计时剩余时间，是一个时间段（单位毫秒），与endTimestamp互斥
-         * @default 0
-         */
-        remainingTime?: number;
-        /**
-         * 倒计时结束时间戳，是一个时间点，与remainingTime互斥，优先级比remainingTime高
-         */
-        endTimestamp?: number;
-        /**
-         * 服务器时间戳，是一个时间点，可与endTimestamp配合使用
-         */
-        serverTimestamp?: number;
-        /**
-         * 格式化倒计时展示，参考 dayjs
-         * @default HH:mm:ss
-         */
-        format?: string;
-        /**
-         * 时间单位的样式
-         */
-        unitStyle?: CSSProperties;
-        /**
-         * 倒计时位数的样式，用于定制第一、第二位数字的样式
-         */
-        valueStyle?: CSSProperties[];
-        /**
-         * 各时间区块的样式，用于定制各个时间块的样式，若第一、第二位数字的样式相同，则可替代valueStyle
-         */
-        timeSliceStyle?: CSSProperties;
-        /**
-         * 倒计时完成时触发
-         */
-        onFinish?: () => void;
-        /**
-         * 倒计时时间变化时触发
-         */
-        onChange?: (data: {
-            value: number;
-        }) => void;
-        /**
-         * 自定义render内容
-         */
-        renderContent?: (data: CurrentTime) => React.ReactNode;
-    };
-    defaultComponent: D;
-}, D>;
-/**
- * 倒计时格式化后分割项
- */
-interface CountdownItem {
-    /**
-     * 倒计时切片字符串
-     */
-    valStr: string;
-    /**
-     * 倒计时切片数值
-     */
-    value: number;
-    /**
-     * 倒计时切片是否为零
-     */
-    isZero: boolean;
-    /**
-     * 倒计时切片单位
-     */
-    unitText: string;
-}
-/**
- * 格式化倒计时
- */
-export type FormatedCountdown = {
-    /**
-     * 剩余总时间
-     */
-    timeStr: string;
-    /**
-     * 倒计时切片数组
-     */
-    timeList: CountdownItem[];
-};
-export {};

package/dist/Dialog/Dialog.d.ts

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