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

package/dist/src/ThemeProvider/ThemeProvider.types.d.ts

@@ -0,0 +1,122 @@
+import React, { ReactNode } from 'react';
+import { OverrideProps } from '@bifrostui/types';
+import type { BaseLang } from '../locales/base';
+export interface Breakpoints {
+    /**
+     * 超小屏幕 (小于 576px，实际为了处理临界值，断点值为 575.98px)
+     * @default '575.98px'
+     */
+    xs?: string;
+    /**
+     * 小屏幕
+     * @default '576px'
+     */
+    sm?: string;
+    /**
+     * 中等屏幕
+     * @default '768px'
+     */
+    md?: string;
+    /**
+     * 大屏幕
+     * @default '992px'
+     */
+    lg?: string;
+    /**
+     * 超大屏幕
+     * @default '1200px'
+     */
+    xl?: string;
+}
+/**
+ * 响应式屏幕断点配置
+ */
+interface ResponsiveTokenOptions {
+    /**
+     * 超小屏幕 (小于 576px，实际为了处理临界值，断点值为 575.98px)
+     */
+    xs?: Record<string, string>;
+    /**
+     * 小屏幕 (≥ 576px)
+     */
+    sm?: Record<string, string>;
+    /**
+     * 中等屏幕 (≥ 768px)
+     */
+    md?: Record<string, string>;
+    /**
+     * 大屏幕 (≥ 992px)
+     */
+    lg?: Record<string, string>;
+    /**
+     * 超大屏幕 (≥ 1200px)
+     */
+    xl?: Record<string, string>;
+}
+interface ThemeProps {
+    /**
+     * 当前ThemeProvider是否为最顶层
+     * 若当前应用会出现嵌套的ThemeProvider，则需要将最外层的ThemeProvider isRoot属性设置为true
+     * @default false
+     */
+    isRoot?: boolean;
+    /**
+     * 挂载的容器
+     * @default root
+     */
+    container?: ReactNode;
+    /**
+     * 挂载容器的id
+     */
+    containerId?: string;
+    /**
+     * 语言
+     */
+    locale?: BaseLang;
+    /**
+     * 响应式屏幕断点配置
+     */
+    responsive?: ResponsiveTokenOptions;
+    /**
+     * 默认高亮主题Token
+     */
+    defaultLightToken?: Record<string, string>;
+    /**
+     * 默认暗黑主题Token
+     */
+    defaultDarkToken?: Record<string, string>;
+    /**
+     * 大麦高亮主题Token
+     */
+    dmLightToken?: Record<string, string>;
+    /**
+     * 先锋版高亮主题Token
+     */
+    pioneerLightToken?: Record<string, string>;
+    /**
+     * 组件Token
+     */
+    token?: Record<string, string>;
+}
+/**
+ * 复写内置主题Tokens
+ */
+type BuiltInThemesTokenOptions = Pick<ThemeProps, 'defaultLightToken' | 'defaultDarkToken' | 'dmLightToken' | 'pioneerLightToken'>;
+/**
+ * 挂载组件自定义Tokens参数
+ */
+export type MountComponentsTokenOptions = Pick<ThemeProps, 'isRoot' | 'container' | 'containerId' | 'token'>;
+export type MountResponsiveTokenOptions = Pick<ThemeProps, 'responsive'> & {
+    breakpoints?: Breakpoints;
+};
+/**
+ * 更新Tokens
+ */
+export type UpdateTokensOptions = Pick<ThemeProps, 'isRoot' | 'containerId' | 'container'> & {
+    rootString: string;
+};
+export type ThemeProviderProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & ThemeProps;
+    defaultComponent: D;
+}, D>;
+export { BaseLang, ResponsiveTokenOptions, ThemeProps, BuiltInThemesTokenOptions, };

package/dist/src/Toast/FunctionalToast.d.ts

@@ -0,0 +1,3 @@
+import { ToastInstance } from './Toast.types';
+declare const _default: ToastInstance;
+export default _default;

package/dist/src/Toast/Toast.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ToastProps } from './Toast.types';
+import './index.less';
+declare const ToastComponent: React.ForwardRefExoticComponent<Omit<Omit<Omit<ToastProps, "onClose">, "container">, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default ToastComponent;

package/dist/src/Toast/Toast.types.d.ts

@@ -0,0 +1,104 @@
+import React, { MutableRefObject } from 'react';
+import { FadeProps } from '../Fade/Fade.types';
+import { TransitionProps } from '../Transition';
+/**
+ * 提示类型
+ */
+export type ToastType = 'loading' | 'success' | 'fail' | 'warning';
+export interface ToastProps extends FadeProps {
+    /**
+     * 是否展示
+     */
+    open?: boolean;
+    /**
+     * 提示类型
+     */
+    type?: ToastType;
+    /**
+     * toast内容，支持使用`\n`换行
+     */
+    message?: string;
+    /**
+     * 展示时长(ms)，值为 0 时，toast 不会消失
+     * @default 2000
+     */
+    duration?: number;
+    /**
+     * 展示位置
+     * @default center
+     */
+    position?: 'top' | 'center' | 'bottom';
+    /**
+     * 是否允许同时存在多个Toast
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * 自定义图标
+     */
+    icon?: React.ReactNode;
+    /**
+     * 展示Toast时，页面内容是否可以点击
+     * @default false
+     */
+    disableClick?: boolean;
+    /**
+     * 渲染Toast的根容器
+     * @default document.body
+     */
+    container?: HTMLElement | (() => HTMLElement);
+    /**
+     * 关闭时的回调函数
+     */
+    onClose?: () => void;
+    /**
+     * Toast动画时长(ms)
+     */
+    transitionDuration?: TransitionProps['timeout'];
+    ref?: MutableRefObject<HTMLDivElement>;
+}
+/**
+ * 函数式调用配置参数
+ */
+export type ToastOptions = Omit<ToastProps, 'type' | 'open'> | string;
+/**
+ * 函数式调用返回值类型
+ */
+export type ToastReturnType = {
+    /**
+     * 关闭当前提示
+     */
+    close: () => void;
+};
+/**
+ * Toast Instance
+ */
+export interface ToastFunction {
+    (options: ToastOptions): ToastReturnType;
+    /**
+     * 警告提示
+     */
+    warning: (options: ToastOptions) => ToastReturnType;
+    /**
+     * 加载提示
+     */
+    loading: (options: ToastOptions) => ToastReturnType;
+    /**
+     * 成功提示
+     */
+    success: (options: ToastOptions) => ToastReturnType;
+    /**
+     * 失败提示
+     */
+    fail: (options: ToastOptions) => ToastReturnType;
+    /**
+     * 清空提示
+     */
+    clear: () => void;
+}
+export interface ToastInstance extends ToastFunction {
+    /**
+     * 获取toast静态方法 & contextHolder
+     */
+    useToast: () => [ToastFunction, React.JSX.Element];
+}

package/dist/src/Toast/__tests__/fixtures/A11yDemos.d.ts

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

package/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/src/TransitionGroup/index.d.ts

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

package/dist/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/dist/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/dist/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/es/Alert/Alert.js

@@ -95,7 +95,8 @@ const AlertAction = (props) => {
     {
       className: `${prefixCls}-action`,
       color,
-      onClick: onClose
+      onClick: onClose,
+      "aria-label": "\u5173\u95ED\u6309\u94AE"
     },
     /* @__PURE__ */ React.createElement(CloseIcon, null)
   );