@t-headless-ui/react 1.1.2 → 1.1.4

package/dist/types/select/interface.d.ts

@@ -0,0 +1,360 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { InputTagProps, InputTagRootProps } from '../input-tag';
+/**
+ * @title Select.Root Props
+ */
+export interface SelectRootProps {
+    /**
+     * @zh 自定义类名
+     * @en Custom class name
+     */
+    className?: string;
+    /**
+     * @zh 下拉框选项的内容
+     * @en The content of dropdown options
+     */
+    children?: ReactNode;
+    /**
+     * @zh 是否禁用选择器
+     * @en Whether to disable the Select
+     */
+    disabled?: boolean;
+    /**
+     * @zh 是否只读
+     * @en Whether to set the Select as read-only
+     */
+    readOnly?: boolean;
+    /**
+     * @zh 是否能搜索
+     * @en Whether to enable search
+     */
+    showSearch?: boolean;
+    /**
+     * @zh 是否支持多选
+     * @en Whether to support multiple selection
+     */
+    isMultiple?: boolean;
+    /**
+     * @zh 选择框的键盘事件回调
+     * @en Keyboard event callback of the Select
+     */
+    onKeyDown?: (e: any) => void;
+    /**
+     * @zh 选择框的默认值
+     * @en To set default value
+     */
+    defaultValue?: string | string[] | number | number[] | LabeledValue | LabeledValue[];
+    /**
+     * @zh 选择器的值（受控模式）
+     * @en To set value
+     */
+    value?: string | string[] | number | number[] | LabeledValue | LabeledValue[];
+    /**
+     * @zh 输入框的值（受控模式）
+     * @en To set input value
+     */
+    inputValue?: string;
+    /**
+     * @zh 指定可选项
+     * @en Select options
+     */
+    options?: (string | number | {
+        label: string | number;
+        value: string | number;
+        disabled?: boolean;
+        extra?: any;
+        children?: OptionsType;
+    })[];
+    /**
+     * @zh 设置 `onChange` 回调中 `value` 的格式。默认是string，设置为true时候，value格式为： { label: string, value: string }
+     * @en Whether to embed label in value, turn the format of value from string to `{ value: string, label: ReactNode }`
+     */
+    labelInValue?: boolean;
+    /**
+     * @zh 是否根据输入的值筛选数据。如果传入函数的话，接收 `inputValue` 和 `option` 两个参数，当option符合筛选条件时，返回 `true`，反之返回 `false`。
+     * @en If it's true, filter options by input value. If it's a function, filter options base on the function.
+     * @default true
+     */
+    filterOption?: boolean | ((inputValue: string, option: {
+        label: any;
+        value: any;
+        disabled?: boolean;
+        extra?: any;
+    }) => boolean);
+    /**
+     * @zh
+     * 定制回显内容。返回值将会显示在下拉框内。若 `value` 对应的 `Option` 不存在，则第一个参数是 null
+     * @en
+     * Customize the content that will be displayed in the Select.
+     * If the `Option` corresponding to `value` does not exist, the first parameter will be `null`
+     */
+    renderFormat?: (option: OptionData | null, value: LabeledValue) => ReactNode;
+    /**
+     * @zh 是否在隐藏的时候销毁 DOM 结构
+     * @en Whether to destroy the DOM when hiding
+     * @default true
+     */
+    destroyOnClose?: boolean;
+    /**
+     * @zh 下拉框是否默认打开。
+     * @en Whether to show dropdown by default.
+     */
+    defaultPopupVisible?: boolean;
+    /**
+     * @zh 控制下拉框是否打开。
+     * @en Whether to show dropdown.
+     */
+    popupVisible?: boolean;
+    /**
+     * @zh 在多选模式下自动分词的分隔符。
+     * @en Separator used to tokenize on `multiple` mode.
+     */
+    tokenSeparators?: string[];
+    /**
+     * @zh 点击选择框的回调
+     * @en Callback when select an option or input value change.
+     */
+    onChange?: (value: any, option: OptionData | OptionData[]) => void;
+    /**
+     * @zh 选中选项时触发的回调，(只在 `multiple` 模式下触发)。
+     * @en Called when an option is selected. Only called for `multiple` mode.
+     */
+    onSelect?: (value: LabeledValue, option: OptionData) => void;
+    /**
+     * @zh 取消选中的时候触发的回调，(只在 `multiple` 模式下触发)。
+     * @en Called when an option is deselected. Only called for `multiple` mode.
+     */
+    onDeselect?: (value: LabeledValue, option: OptionData) => void;
+    /**
+     * @zh 点击清除时触发，参数是当前下拉框的展开状态。
+     * @en Called when clear
+     */
+    onClear?: (visible: boolean) => void;
+    /**
+     * @zh 搜索时的回调
+     * @en Callback when input changed
+     */
+    onSearch?: (value: string, reason: InputValueChangeReason) => void;
+    /**
+     * @zh 获得焦点时的回调
+     * @en Callback when get focus
+     */
+    onFocus?: (e: any) => void;
+    /**
+     * @zh 失去焦点时的回调
+     * @en Callback when lose focus
+     */
+    onBlur?: (e: any) => void;
+    /**
+     * @zh 下拉框收起展开时触发
+     * @en Callback when visibility of dropdown is changed.
+     */
+    onVisibleChange?: (visible: boolean) => void;
+    /**
+     * @zh 输入框文本改变的回调。
+     * @en Callback when the value of input is changed.
+     */
+    onInputValueChange?: (value: string, reason: InputValueChangeReason) => void;
+    /**
+     * @zh 输入框文本粘贴的回调。
+     * @en Callback when the you paste text in input box.
+     */
+    onPaste?: (e: any) => void;
+    /**
+     * @zh 选择框的引用对象
+     * @en Ref object of the Select
+     */
+    ref?: React.RefObject<SelectHandle>;
+    /**
+     * @zh 主轴方向上的距离偏移
+     * @en Offset distance of the dropdown position along the main axis
+     */
+    offsetDistance?: number;
+    /**
+     * @zh 副轴方向上的平移偏移
+     * @en Offset distance of the dropdown position along the cross axis
+     */
+    offsetSkidding?: number;
+}
+/**
+ * @title Select.View Props
+ */
+export interface SelectViewProps {
+    /**
+     * @zh 自定义类名
+     * @en Custom class name
+     */
+    id?: string;
+    /**
+     * @zh 自定义样式
+     * @en Custom style
+     */
+    style?: React.CSSProperties;
+    /**
+     * @zh 自定义类名
+     * @en Custom class name
+     */
+    className?: string;
+    /**
+     * @zh 选择框默认文字
+     * @en Default placeholder text
+     */
+    placeholder?: string;
+    /**
+     * @zh 最大标签数, 支持自定义渲染,请在 InputTag 组件中查看 maxTagCount 类型定义
+     * @en Maximum number of tags, support custom rendering, please check maxTagCount type definition in InputTag component
+     */
+    maxTagCount?: InputTagRootProps['maxTagCount'];
+    /**
+     * @zh 子元素
+     * @en Children
+     */
+    children?: React.ReactNode;
+}
+/**
+ * @title Select.Input Props
+ **/
+export interface SelectInputProps {
+    /**
+     * @zh 自定义类名,单选是给 input 元素添加类名，多选是给包裹 input 框的外层 div 添加类名
+     * @en Custom class name, in single selection mode, the class name is added to the input element, in multiple selection mode, the class name is added to the outer div that wraps the input box
+     */
+    className?: string;
+    /**
+     * @zh 子元素, 仅在多选模式下有效
+     * @en Children, only effective in multiple selection mode
+     */
+    children?: ReactNode;
+}
+/**
+ * @title Select.MultiInputRoot Props
+ **/
+export interface SelectMultiInputRootProps {
+    /**
+     * @zh 子元素
+     * @en Children
+     */
+    children: any;
+    /**
+     * @zh 自定义类名
+     * @en Custom class name
+     */
+    className: any;
+}
+/**
+ * @title Select.MultiTag Props
+ **/
+export interface SelectMultiTagProps {
+    /**
+     * @zh 自定义标签渲染，具体参数见 InputTag 组件的 renderTag 类型定义
+     * @en Custom tag rendering, see the renderTag type definition of InputTag component for specific parameters
+     */
+    renderTag: InputTagProps['renderTag'];
+}
+/**
+ * @title Select.Content Props
+ */
+export interface SelectContentProps {
+    /**
+     * @zh 自定义类名
+     * @en Custom class name
+     */
+    className?: string;
+    /**
+     * @zh 自定义样式
+     * @en Custom style
+     */
+    style?: React.CSSProperties;
+    /**
+     * @zh 下拉框挂载的父节点，默认挂载到 body 上, attach 会传入 document.querySelector 获取父节点。
+     * @en The dropdown’s parent container defaults to being mounted on body.The attach option accepts a document.querySelector result to specify the parent node.
+     * @default body
+     */
+    attach?: string;
+    /**
+     * @zh 下拉框选项的内容
+     * @en The content of dropdown options
+     */
+    children?: ReactNode;
+    /**
+     * @zh 下拉框最外层的类名
+     * @en Custom class name of the dropdown wrapper
+     */
+    wrapperClassName?: string;
+}
+/**
+ * @title Select.Option Props
+ */
+export interface SelectOptionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    children?: ReactNode;
+    item: OptionData;
+    activeClassName?: string;
+}
+export interface SelectListProps {
+    children: (props: OptionData) => ReactNode;
+}
+/**
+ * @title Select.Affix Props
+ */
+export interface SelectAffixProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    children?: ReactNode;
+}
+/**
+ * @title Select.Clear Props
+ */
+export interface SelectClearProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    children?: ReactNode;
+}
+/**
+ * @title Select.Empty Props
+ */
+export interface SelectEmptyProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    children?: ReactNode;
+}
+/**
+ * @title Option Data Type
+ */
+export interface OptionData {
+    label: string | number;
+    value: string | number;
+    disabled?: boolean;
+    extra?: any;
+    _key: string;
+    _index: number;
+    _origin: 'children' | 'options';
+    _valid: boolean;
+    isGroupTitle?: boolean;
+    grouped?: boolean | undefined;
+}
+/**
+ * @title Options Type
+ */
+export type OptionsType = SelectRootProps['options'];
+/**
+ * @title InputValueChangeReason
+ */
+export type InputValueChangeReason = 'manual' | 'optionChecked' | 'optionListHide' | 'tokenSeparator';
+export type LabeledValue = {
+    value: string | number;
+    label: string | number;
+};
+/**
+ * @title Select Reference Type
+ */
+export type SelectHandle = {
+    /**
+     * @zh DOM 节点
+     * @en DOM
+     */
+    dom: HTMLDivElement;
+    /**
+     * @zh 使选择框聚焦
+     * @en Focus Select
+     */
+    focus: () => void;
+    /**
+     * @zh 使选择框失焦
+     * @en Blur Select
+     */
+    blur: () => void;
+};

package/dist/types/select/utils/flat-children.d.ts

@@ -0,0 +1,14 @@
+import { SelectRootProps, OptionData } from '../interface';
+export type OptionInfoMap = Map<OptionData['value'], OptionData>;
+export declare function flatChildren({ options, filterOption }: Pick<SelectRootProps, 'options' | 'filterOption'>, { inputValue, }: {
+    inputValue: string;
+}, { optionInfoMap, optionValueList, customNodeCount, isGroup, }?: {
+    optionInfoMap?: OptionInfoMap;
+    optionValueList?: Array<OptionData['value']>;
+    customNodeCount?: number;
+    isGroup?: boolean;
+}): {
+    childrenList: OptionData[];
+    optionInfoMap: OptionInfoMap;
+    optionValueList: (string | number)[];
+};

package/dist/types/select/utils/get-child-value.d.ts

@@ -0,0 +1,2 @@
+import { ReactElement } from 'react';
+export declare const getChildValue: (child: ReactElement) => any;

package/dist/types/select/utils/get-valid-value.d.ts

@@ -0,0 +1,4 @@
+import { SelectRootProps } from '../interface';
+type SelectInnerStateValue = number | string | (number | string)[] | undefined;
+export declare function getValidValue(value: SelectRootProps['value'], isMultiple: boolean, labelInValue: boolean): SelectInnerStateValue;
+export {};

package/dist/types/select/utils/index.d.ts

@@ -0,0 +1,3 @@
+export { getValidValue } from './get-valid-value';
+export { isEmptyValue } from './is-empty-value';
+export { flatChildren } from './flat-children';

package/dist/types/select/utils/is-empty-value.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Check if Option's value is empty
+ */
+export declare function isEmptyValue(value: any, isMultiple: boolean): boolean;

package/dist/types/select/utils/is-select-opt-group.d.ts

@@ -0,0 +1 @@
+export declare function isSelectOptGroup(child: any): boolean;

package/dist/types/select/utils/is-select-option.d.ts

@@ -0,0 +1 @@
+export declare function isSelectOption(child: any): boolean;

package/dist/types/select-input/index.d.ts

@@ -0,0 +1,6 @@
+export { SelectInputRoot } from './select-input-root';
+export { SelectSingleInput } from './select-single-input';
+export { SelectMultiRoot } from './select-multi-root';
+export { SelectMultiTag } from './select-multi-tag';
+export { SelectMultiInput } from './select-multi-input';
+export * from './interface';

package/dist/types/select-input/inner-context.d.ts

@@ -0,0 +1,30 @@
+import { SelectViewCommonProps } from './interface';
+interface SelectInputInnerContext {
+    inputValue: SelectViewCommonProps['inputValue'];
+    isEmptyValue: SelectViewCommonProps['isEmptyValue'];
+    onRemoveCheckedItem: SelectViewCommonProps['onRemoveCheckedItem'];
+    placeholder: SelectViewCommonProps['placeholder'];
+    readOnly: SelectViewCommonProps['readOnly'];
+    disabled: SelectViewCommonProps['disabled'];
+    maxTagCount: SelectViewCommonProps['maxTagCount'];
+    renderTag: SelectViewCommonProps['renderTag'];
+    searchStatus: number;
+    mergedFocused: boolean;
+    canFocusInput: boolean;
+    inputEventHandlers: {
+        onPaste: (e: any) => void;
+        onKeyDown: (event: any) => void;
+        onFocus: (event: any) => void;
+        onBlur: (event: any) => void;
+        onChange: (newValue: any, event: any) => void;
+    };
+    refInput: React.RefObject<HTMLInputElement>;
+    showSearch: boolean;
+    focused: boolean;
+    renderText: SelectViewCommonProps['renderText'];
+    value: SelectViewCommonProps['value'];
+    popupVisible: SelectViewCommonProps['popupVisible'];
+}
+export declare const SelectInputInnerContext: import('react').Context<SelectInputInnerContext>;
+export declare const useSelectInnerContext: () => SelectInputInnerContext;
+export {};

package/dist/types/select-input/interface.d.ts

@@ -0,0 +1,123 @@
+import { CSSProperties, ReactNode } from 'react';
+import { InputTagRootProps, InputTagProps } from '../input-tag';
+import { InputProps } from '../input';
+export interface SelectViewCommonProps {
+    /**
+     * @zh 选择框的 id。
+     * @en The id of the select view.
+     */
+    id?: string;
+    /**
+     * @zh 是否为多选模式。
+     * @en Whether is multiple mode.
+     */
+    isMultiple?: boolean;
+    /**
+     * @zh 选择框的样式。
+     * @en The style of the select view.
+     */
+    style?: CSSProperties;
+    /**
+     * @zh 选择框的类名。
+     * @en The class name of the select view.
+     */
+    className?: string;
+    /**
+     * @zh 选择框的子元素。
+     * @en The children of the select view.
+     */
+    children?: ReactNode;
+    /**
+     * @zh 选择框的输入值。
+     * @en The input value of the select view.
+     */
+    inputValue?: string;
+    /**
+     * @zh 选择框的值。
+     * @en The value of the select view.
+     */
+    value?: any;
+    /**
+     * @zh 选择框的弹出层是否可见。
+     * @en Whether the popup layer of the select view is visible.
+     */
+    popupVisible?: boolean;
+    /**
+     * @zh 选择框是否为空值。
+     * @en Whether the select view is empty value.
+     */
+    isEmptyValue: boolean;
+    /**
+     * @zh 选择框的文本渲染函数。
+     * @en The text render function of the select view.
+     */
+    renderText: (value: any) => {
+        text: any;
+        disabled: any;
+    };
+    /**
+     * @zh 选择框的删除选中项回调函数。
+     * @en The remove checked item callback function of the select view.
+     */
+    onRemoveCheckedItem?: (item: any, index: number, e: any) => void;
+    /**
+     * @zh 选择框的输入值变化回调函数。
+     * @en The input value change callback function of the select view.
+     */
+    onChangeInputValue?: InputProps['onChange'];
+    onPaste?: (e: any) => void;
+    onClear?: (e: any) => void;
+    onFocus?: (e: any) => void;
+    onBlur?: (e: any) => void;
+    /**
+     * @zh 选择框默认文字。
+     * @en Placeholder of element
+     */
+    placeholder?: string;
+    /**
+     * @zh 使单选模式可搜索。
+     * @en Whether single mode Select is searchable.
+     */
+    showSearch?: boolean;
+    /**
+     * @zh 是否为禁用状态。
+     * @en Whether is disabled
+     */
+    disabled?: boolean;
+    /**
+     * @zh 是否为只读状态。
+     * @en Whether is read only
+     */
+    readOnly?: boolean;
+    /**
+     * @zh 最大标签数, 支持自定义渲染,请在 InputTag 组件中查看 maxTagCount 类型定义
+     * @en Maximum number of tags, support custom rendering, please check maxTagCount type definition in InputTag component
+     */
+    maxTagCount?: InputTagRootProps['maxTagCount'];
+    /**
+     * @zh 自定义标签渲染， 请在 InputTag 组件中查看 renderTag 类型定义
+     * @en Custom tag rendering, please check renderTag type definition in InputTag component
+     */
+    renderTag?: InputTagProps['renderTag'];
+    /**
+     * @zh 鼠标点击下拉框时的回调
+     * @en Callback when the mouse clicks on the drop-down box
+     */
+    onClick?: (e: any) => void;
+    /**
+     * @zh 键盘输入时的回调
+     * @en Callback when keyboard pressed
+   
+     */
+    onKeyDown?: (e: any) => void;
+    /**
+     * @zh 鼠标移入下拉框时的回调
+     * @en Callback when the mouse moves into the drop-down box
+     */
+    onMouseEnter?: (e: any) => void;
+    /**
+     * @zh 鼠标移出下拉框时的回调
+     * @en Callback when the mouse moves out of the drop-down box
+     */
+    onMouseLeave?: (e: any) => void;
+}

package/dist/types/select-input/select-input-root.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { SelectViewCommonProps } from './interface';
+export type SelectViewHandle = {
+    dom: HTMLDivElement;
+    getRootDOMNode: () => HTMLDivElement;
+    focus: () => void;
+    blur: () => void;
+};
+export declare const SearchStatusEnum: {
+    SEARCHING: number;
+    NONE: number;
+};
+export declare const SelectInputRoot: React.ForwardRefExoticComponent<SelectViewCommonProps & React.RefAttributes<unknown>>;

package/dist/types/select-input/select-multi-input.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+export declare const SelectMultiInput: ({ className }: {
+    className?: string;
+}) => React.JSX.Element;

package/dist/types/select-input/select-multi-root.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { SelectMultiInputRootProps } from '../select/interface';
+export declare const SelectMultiRoot: ({ children, className, dataVisible }: SelectMultiInputRootProps & {
+    dataVisible?: boolean;
+}) => React.JSX.Element;

package/dist/types/select-input/select-multi-tag.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { SelectMultiTagProps } from '../select/interface';
+export declare const SelectMultiTag: ({ renderTag }: SelectMultiTagProps) => React.JSX.Element;

package/dist/types/select-input/select-single-input.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+export declare const SelectSingleInput: ({ className }: {
+    className?: string;
+}) => React.JSX.Element;

package/dist/types/toast/interface.d.ts

@@ -1,5 +1,6 @@
 import { JSX } from 'react';
-export type Direction = 'top-to-bottom' | 'bottom-to-top';
+import { DIRECTION } from './constants';
+export type Direction = (typeof DIRECTION)[keyof typeof DIRECTION];
 /**
  * @title Toast
  */

package/dist/types/utils/getHotkeyHandler.d.ts

@@ -0,0 +1,17 @@
+import { KeyboardEvent } from 'react';
+export interface Key {
+    /** Keyboard key code */
+    code: number;
+    /** Ctrl / ⌃ */
+    ctrl?: boolean;
+    /** Shift key */
+    shift?: boolean;
+    /** Alt / ⌥ */
+    alt?: boolean;
+    /** meta ⌘ / ⊞ */
+    meta?: boolean;
+}
+/**
+ * @param hotkeyMap - 快捷键描述对象
+ */
+export declare function getHotkeyHandler(hotkeyMap: Map<Key | number, (event: KeyboardEvent) => boolean | void>): (event: KeyboardEvent) => void;

package/dist/types/utils/index.d.ts

@@ -1,6 +1,7 @@
 export * from './classnames';
 export * from './is';
 export * from './throttle';
+export * from './debounce';
 export * from './omit';
 export * from './has-intersection';
 export * from './can-use-window';

package/dist/types/utils/keycode.d.ts

@@ -0,0 +1,36 @@
+export declare const Enter: {
+    key: string;
+    code: number;
+};
+export declare const Esc: {
+    key: string;
+    code: number;
+};
+export declare const Backspace: {
+    key: string;
+    code: number;
+};
+export declare const Tab: {
+    key: string;
+    code: number;
+};
+export declare const Space: {
+    key: string;
+    code: number;
+};
+export declare const ArrowUp: {
+    key: string;
+    code: number;
+};
+export declare const ArrowDown: {
+    key: string;
+    code: number;
+};
+export declare const ArrowLeft: {
+    key: string;
+    code: number;
+};
+export declare const ArrowRight: {
+    key: string;
+    code: number;
+};