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

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

@@ -0,0 +1,83 @@
+import React from 'react';
+import { OverrideProps } from '@bifrostui/types';
+/**
+ * 滚动事件详情
+ */
+export interface ScrollViewScrollEvent extends Event {
+    detail?: {
+        scrollLeft: number;
+        scrollTop: number;
+        scrollHeight: number;
+        scrollWidth: number;
+    };
+}
+/**
+ * ScrollIntoView 对齐方式
+ */
+export type ScrollIntoViewAlignment = 'start' | 'center' | 'end' | 'nearest';
+/**
+ * ScrollView 组件属性
+ */
+export type ScrollViewProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & {
+        /**
+         * 允许横向滚动
+         * @default false
+         */
+        scrollX?: boolean;
+        /**
+         * 允许纵向滚动
+         * @default false
+         */
+        scrollY?: boolean;
+        /**
+         * 设置竖向滚动条位置
+         */
+        scrollTop?: number;
+        /**
+         * 设置横向滚动条位置
+         */
+        scrollLeft?: number;
+        /**
+         * 滚动到指定元素（元素id，不能以数字开头）
+         */
+        scrollIntoView?: string;
+        /**
+         * 指定 scroll-into-view 目标节点在视口内的位置
+         * @default 'start'
+         */
+        scrollIntoViewAlignment?: ScrollIntoViewAlignment;
+        /**
+         * 在设置滚动条位置时使用动画过渡
+         * @default false
+         */
+        scrollWithAnimation?: boolean;
+        /**
+         * 距顶部/左边多远时（单位px），触发 onScrollToUpper 事件
+         * @default 50
+         */
+        upperThreshold?: number;
+        /**
+         * 距底部/右边多远时（单位px），触发 onScrollToLower 事件
+         * @default 50
+         */
+        lowerThreshold?: number;
+        /**
+         * 滚动到顶部/左边时触发
+         */
+        onScrollToUpper?: (e: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        /**
+         * 滚动到底部/右边时触发
+         */
+        onScrollToLower?: (e: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        /**
+         * 滚动时触发
+         */
+        onScroll?: (e: React.SyntheticEvent<HTMLDivElement, ScrollViewScrollEvent>) => void;
+        /**
+         * 触摸移动时触发
+         */
+        onTouchMove?: (e: React.SyntheticEvent<HTMLDivElement, TouchEvent>) => void;
+    };
+    defaultComponent: D;
+}, D>;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const BasicScrollViewDemo: React.FC;
+export declare const HorizontalScrollViewDemo: React.FC;
+export declare const ScrollEventsDemo: React.FC;
+export declare const ControlledScrollDemo: React.FC;
+export declare const BidirectionalScrollDemo: React.FC;
+export declare const ThresholdTestDemo: React.FC;

package/dist/src/ScrollView/useScrollView.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ScrollViewProps } from './ScrollView.types';
+export interface UseScrollViewParameters extends ScrollViewProps {
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface UseScrollViewReturnValue {
+    getRootProps: (otherHandlers?: Record<string, unknown>) => Record<string, unknown>;
+    containerRef: React.RefCallback<HTMLDivElement>;
+}
+export declare function useScrollView(parameters: UseScrollViewParameters): UseScrollViewReturnValue;

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

@@ -0,0 +1,104 @@
+import { OverrideProps } from '@bifrostui/types';
+import React, { ReactNode, Ref, SyntheticEvent } from 'react';
+import { BackdropProps } from '../Backdrop';
+export type BuiSelectValue = string | number;
+export interface BuiSelectContextProps {
+    /**
+     * 当前选中值
+     */
+    selectValue?: BuiSelectValue;
+    /**
+     * 设置根选择器展示内容
+     */
+    setRenderValue?: React.Dispatch<React.SetStateAction<ReactNode>>;
+    /**
+     * 选项点击的回调
+     */
+    handleOptionClick?: (event?: React.MouseEvent<HTMLDivElement>, value?: BuiSelectValue, label?: React.ReactNode) => void;
+}
+export type SelectOptionProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & {
+        /**
+         * 选项的值
+         */
+        value?: BuiSelectValue;
+        /**
+         * 回填内容
+         * 没传children时也作为选项内容
+         */
+        label?: React.ReactNode;
+        /**
+         * 禁用
+         */
+        disabled?: boolean;
+    };
+    defaultComponent: D;
+}, D>;
+export type SelectProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & {
+        /**
+         * inputRef
+         */
+        inputRef?: Ref<HTMLInputElement>;
+        /**
+         * inputProp
+         */
+        inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+        /**
+         * BackdropProp
+         */
+        BackdropProps?: BackdropProps;
+        /**
+         * input 名称标识
+         */
+        name?: string;
+        /**
+         * 当前值
+         */
+        value?: BuiSelectValue;
+        /**
+         * 默认值
+         */
+        defaultValue?: BuiSelectValue;
+        /**
+         * 没有选中时显示的内容
+         */
+        placeholder?: React.ReactNode;
+        /**
+         * 自定义图标
+         */
+        icon?: React.ReactNode;
+        /**
+         * 禁用
+         */
+        disabled?: boolean;
+        /**
+         * 是否展开下拉框
+         */
+        open?: boolean;
+        /**
+         * 滚动容器
+         * 下拉框元素和children将会被append到scrollContainer中
+         * 默认是页面的根节点
+         */
+        scrollContainer?: () => Element | null;
+        /**
+         * 自定义选中后展示的内容
+         */
+        /**
+         * 选中某一项时的回调，并将选中的值传递过去
+         */
+        onChange?: (e: SyntheticEvent, data: {
+            value: string;
+        }) => void;
+        /**
+         * 展开下拉框时的回调
+         */
+        onOpen?: () => void;
+        /**
+         * 折叠下拉框时的回调
+         */
+        onClose?: () => void;
+    };
+    defaultComponent: D;
+}, D>;

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

@@ -0,0 +1,21 @@
+import React from 'react';
+/**
+ * 自定义 Select 组件 Demo 集合
+ * 这个文件包含多个测试 demo，展示如何使用 getCustomDemoCodesFromFile 进行无障碍测试
+ * 文件名必须是 A11yDemos.tsx（固定约定）
+ */
+export declare const basicSelectDemo: () => React.JSX.Element;
+export declare const ControlledSelectDemo: () => React.JSX.Element;
+export declare const disabledSelectDemo: () => React.JSX.Element;
+export declare const selectWithDisabledOptionsDemo: () => React.JSX.Element;
+export declare const defaultValueSelectDemo: () => React.JSX.Element;
+export declare const complexInteractionSelectDemo: () => React.JSX.Element;
+declare const _default: {
+    basicSelectDemo: () => React.JSX.Element;
+    ControlledSelectDemo: () => React.JSX.Element;
+    disabledSelectDemo: () => React.JSX.Element;
+    selectWithDisabledOptionsDemo: () => React.JSX.Element;
+    defaultValueSelectDemo: () => React.JSX.Element;
+    complexInteractionSelectDemo: () => React.JSX.Element;
+};
+export default _default;

package/dist/src/Select/selectContext.d.ts

@@ -0,0 +1,3 @@
+import { BuiSelectContextProps } from './Select.types';
+declare const BuiSelectContext: import("react").Context<BuiSelectContextProps>;
+export default BuiSelectContext;

package/dist/src/Slide/Slide.miniapp.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Slide Animation Component
+ * @description A component that implements slide in/out animation effects for elements
+ * @component Slide
+ */
+import React from 'react';
+import type { SlideProps } from './Slide.types';
+import './index.less';
+/**
+ * Slide Component
+ * @component
+ */
+declare const Slide: React.ForwardRefExoticComponent<SlideProps & React.RefAttributes<HTMLElement>>;
+export default Slide;

package/dist/src/SwipeAction/SwipeAction.d.ts

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

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

@@ -0,0 +1,75 @@
+import { OverrideProps, ThemeColor } from '@bifrostui/types';
+import React from 'react';
+import { SideTypeEnum } from './constants';
+export type SwipeActionProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & {
+        /**
+         * 右侧的操作按钮列表区域
+         */
+        rightActions?: React.ReactNode;
+        /**
+         * 左侧的操作按钮列表区域
+         */
+        leftActions?: React.ReactNode;
+        /**
+         * 是否在点击按钮区自动归位
+         */
+        closeOnClickActionItem?: boolean;
+        /**
+         * 是否在点击其他区域时自动归位
+         */
+        closeOnClickContainer?: boolean;
+        /**
+         * 操作按钮展开时触发
+         */
+        onActionsReveal?: (params: RevealParams) => void;
+        /**
+         * 是否禁用拖动
+         */
+        disabled?: boolean;
+    };
+    defaultComponent: D;
+}, D>;
+interface RevealParams {
+    side: SideTypeEnum | '';
+}
+export type SwipeActionItemProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & {
+        /**
+         * 颜色风格
+         */
+        color?: ThemeColor | 'vip';
+        /**
+         * id
+         */
+        id?: string | number;
+        /**
+         * 点击事件
+         */
+        onClick?: (e: React.SyntheticEvent, item: {
+            id: string | number;
+            color: ThemeColor | 'vip';
+            text: React.ReactNode;
+        }) => void;
+    };
+    defaultComponent: D;
+}, D>;
+export interface BuiSwipeActionContextProps {
+    /**
+     * 是否在点击操作按钮时自动归位
+     */
+    closeOnClickActionItem?: boolean;
+    /**
+     * 关闭函数
+     */
+    close: () => void;
+}
+export type SwipeActionRef = {
+    close: () => void;
+    show: (params?: {
+        side: SideTypeEnum;
+    }) => void;
+    open: boolean;
+    ref?: HTMLDivElement;
+};
+export {};

package/dist/src/SwipeAction/SwipeActionContext.d.ts

@@ -0,0 +1,3 @@
+import { BuiSwipeActionContextProps } from './SwipeAction.types';
+declare const BuiSwipeActionContext: import("react").Context<BuiSwipeActionContextProps>;
+export default BuiSwipeActionContext;

package/dist/src/SwipeAction/SwipeActionItem.d.ts

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

package/dist/src/SwipeAction/constants.d.ts

@@ -0,0 +1,9 @@
+export declare enum SideTypeEnum {
+    LEFT = "left",
+    RIGHT = "right"
+}
+export declare enum DragPhaseEnum {
+    START = 1,
+    MOVE = 2,
+    END = 3
+}

package/dist/src/SwipeAction/index.d.ts

@@ -0,0 +1,5 @@
+export * from './SwipeAction.types';
+export { default } from './SwipeAction';
+export { default as SwipeAction } from './SwipeAction';
+export { default as SwipeActionItem } from './SwipeActionItem';
+export { SideTypeEnum, DragPhaseEnum } from './constants';

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

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

package/dist/src/Tabs/Tab.types.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { OverrideProps } from '@bifrostui/types';
+import { ITabItem, TabChangeEvent } from './Tabs.types';
+export type TabProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & Partial<Omit<ITabItem, 'title'>> & {
+        /**
+         * 点击Tab的回调
+         */
+        onClick?: TabChangeEvent;
+    };
+    defaultComponent: D;
+}, D>;

package/dist/src/Tabs/TabPanel.d.ts

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

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

@@ -0,0 +1,35 @@
+import React, { SyntheticEvent } from 'react';
+import { OverrideProps } from '@bifrostui/types';
+export interface TabHeaderItem {
+    title: React.ReactNode;
+    index: string;
+    disabled?: boolean;
+}
+export interface ITabsChangeData {
+    /** 切换后的tab索引 */
+    index: string;
+}
+export type TabChangeEvent = (e?: SyntheticEvent, data?: ITabsChangeData) => void;
+export interface ITabItem {
+    title: React.ReactNode;
+    index: string;
+    disabled?: boolean;
+}
+export type ITabAlign = 'start' | 'center';
+export type TabsProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & {
+        /**
+         * 当前选中面板的索引值，与tabs.index对应
+         */
+        value?: string;
+        /**
+         * 切换面板的数据
+         */
+        tabs?: ITabItem[];
+        /**
+         * 切换面板的回调
+         */
+        onChange?: TabChangeEvent;
+    };
+    defaultComponent: D;
+}, D>;

package/dist/src/Tabs/TabsContext.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { TabChangeEvent, TabsProps } from './Tabs.types';
+type TabsContextValueType = Omit<TabsProps, 'onChange'> & {
+    triggerChange: TabChangeEvent;
+};
+declare const TabsContext: React.Context<TabsContextValueType>;
+export declare const TabsContextProvider: React.Provider<TabsContextValueType>;
+export default TabsContext;

package/dist/src/Tabs/utils/scroll.d.ts

@@ -0,0 +1,2 @@
+declare const scrollLeftTo: (scroller: HTMLElement, to: number, duration: number) => void;
+export default scrollLeftTo;

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

@@ -0,0 +1,21 @@
+import React from 'react';
+/**
+ * 自定义 Tag 组件 Demo 集合
+ * 这个文件包含多个测试 demo，展示如何使用 getCustomDemoCodesFromFile 进行无障碍测试
+ * 文件名必须是 A11yDemos.tsx（固定约定）
+ */
+export declare const basicTagDemo: () => React.JSX.Element;
+export declare const variantTagDemo: () => React.JSX.Element;
+export declare const ClickableTagDemo: () => React.JSX.Element;
+export declare const customColorTagDemo: () => React.JSX.Element;
+export declare const ariaLabelTagDemo: () => React.JSX.Element;
+export declare const complexTagListDemo: () => React.JSX.Element;
+declare const _default: {
+    basicTagDemo: () => React.JSX.Element;
+    variantTagDemo: () => React.JSX.Element;
+    ClickableTagDemo: () => React.JSX.Element;
+    customColorTagDemo: () => React.JSX.Element;
+    ariaLabelTagDemo: () => React.JSX.Element;
+    complexTagListDemo: () => React.JSX.Element;
+};
+export default _default;

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

@@ -0,0 +1,98 @@
+import { OverrideProps } from '@bifrostui/types';
+import React, { Ref, TextareaHTMLAttributes } from 'react';
+interface AutoSizeType {
+    minHeight?: number;
+    maxHeight?: number;
+}
+export type TextAreaProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & {
+        /**
+         * 输入框内容，受控时使用
+         */
+        value?: string;
+        /**
+         * 默认输入框内容，非受控时使用
+         */
+        defaultValue?: string;
+        /**
+         * 内部<textarea>标签的标准属性
+         */
+        textareaProps?: TextareaHTMLAttributes<HTMLTextAreaElement>;
+        /**
+         * 内部<textarea>标签的ref
+         */
+        textareaRef?: Ref<HTMLTextAreaElement>;
+        /**
+         * 内部<textarea>名称标识
+         */
+        name?: string;
+        /**
+         * 占位内容
+         */
+        placeholder?: string;
+        /**
+         * 是否禁用，默认为false
+         */
+        disabled?: boolean;
+        /**
+         * 文本框行数，默认为2
+         */
+        rows?: number;
+        /**
+         * 内容最大长度
+         */
+        maxLength?: number;
+        /**
+         * 自适应内容高度，可设置为 true | false 或对象：{
+         *     minHeight?: number;
+         *     maxHeight?: number;
+         *   }，单位为px，默认为false
+         * 支持H5、微信小程序，支付宝小程序不支持
+         */
+        autoSize?: boolean | AutoSizeType;
+        /**
+         * 是否自动聚焦，默认为false
+         */
+        autoFocus?: boolean;
+        /**
+         * 展示字数，默认为false
+         */
+        showCount?: boolean;
+        /**
+         * 文本框内容变化时的回调
+         */
+        onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>, data: {
+            value: string;
+        }) => void;
+        /**
+         * 无障碍功能：ARIA标签
+         */
+        'aria-label'?: string;
+        /**
+         * 无障碍功能：是否隐藏元素
+         */
+        'aria-hidden'?: boolean;
+        /**
+         * 无障碍功能：元素在无障碍树中的细节程度
+         */
+        'aria-details'?: string;
+        /**
+         * 无障碍功能：当前元素是否为必填
+         */
+        'aria-required'?: boolean;
+        /**
+         * 无障碍功能：当前元素是否为只读
+         */
+        'aria-readonly'?: boolean;
+        /**
+         * 无障碍功能：多行文本框的第一行索引
+         */
+        'aria-rowindex'?: number;
+        /**
+         * 无障碍功能：多行文本框的列数
+         */
+        'aria-colcount'?: number;
+    };
+    defaultComponent: D;
+}, D>;
+export {};

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

@@ -0,0 +1,19 @@
+import React from 'react';
+/**
+ * 自定义 TextArea 组件 Demo 集合
+ * 这个文件包含多个测试 demo，展示如何使用 getCustomDemoCodesFromFile 进行无障碍测试
+ * 文件名必须是 customDemoComponent.tsx（固定约定）
+ */
+export declare const basicTextAreaDemo: () => React.JSX.Element;
+export declare const ariaLabelTextAreaDemo: () => React.JSX.Element;
+export declare const requiredAndReadonlyTextAreaDemo: () => React.JSX.Element;
+export declare const showCountTextAreaDemo: () => React.JSX.Element;
+export declare const autoFocusTextAreaDemo: () => React.JSX.Element;
+declare const _default: {
+    basicTextAreaDemo: () => React.JSX.Element;
+    ariaLabelTextAreaDemo: () => React.JSX.Element;
+    requiredAndReadonlyTextAreaDemo: () => React.JSX.Element;
+    showCountTextAreaDemo: () => React.JSX.Element;
+    autoFocusTextAreaDemo: () => React.JSX.Element;
+};
+export default _default;