@canlooks/can-ui 0.0.1

package/dist/cjs/components/tree/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./tree"), exports);
+tslib_1.__exportStar(require("./treeNode"), exports);

package/dist/cjs/components/tree/tree.d.ts

@@ -0,0 +1,48 @@
+import { ReactElement, ReactNode } from 'react';
+import { DIVProps, Id, Obj } from '../../../types';
+import { OptionType, SelectionContextBaseProps, SelectionContextMultipleProps, SelectionContextSingleProps } from '../selectionContext';
+import { InputProps } from '../input';
+import { TreeNode, TreeNodeProps } from './treeNode';
+export interface NodeType<V extends Id = Id> extends Omit<Partial<TreeNodeProps>, 'children'>, OptionType<V>, Obj {
+}
+export interface TreeBaseProps<N extends NodeType<V>, V extends Id = Id> extends Omit<SelectionContextBaseProps<N, V>, 'options'>, Omit<DIVProps, 'defaultValue' | 'onChange'> {
+    nodes?: N[];
+    labelKey?: keyof N;
+    searchTokenKey?: keyof N;
+    showLine?: boolean;
+    indent?: number;
+    renderExpandIcon?(nodeValue: V, isExpand: boolean, expanded: V[]): ReactNode;
+    showCheckbox?: boolean;
+    readOnly?: boolean;
+    /** 为true时，点击标签也会展开节点，@default false, 仅点击展开按钮才能展开节点 */
+    clickLabelToExpand?: boolean;
+    defaultExpanded?: V[];
+    expanded?: V[];
+    onExpandedChange?(expanded: V[], nodeValue: V, isExpand: boolean): void;
+    searchable?: boolean;
+    searchInputProps?: InputProps;
+    defaultSearchValue?: string;
+    searchValue?: string;
+    onSearchChange?(searchValue: string): void;
+}
+export interface TreeSingleProps<N extends NodeType<V>, V extends Id = Id> extends TreeBaseProps<N, V>, Omit<SelectionContextSingleProps<N, V>, 'options'> {
+}
+export interface TreeMultipleProps<N extends NodeType<V>, V extends Id = Id> extends TreeBaseProps<N, V>, Omit<SelectionContextMultipleProps<N, V>, 'options'> {
+}
+export type TreeProps<N extends NodeType<V>, V extends Id = Id> = TreeSingleProps<N, V> | TreeMultipleProps<N, V>;
+type TreeContext<V extends Id = Id> = {
+    expandedSet?: Set<V>;
+    toggleExpanded?(value: V): void;
+    indent?: number;
+    renderExpandIcon?: TreeBaseProps<any, V>['renderExpandIcon'];
+    showCheckbox?: boolean;
+    readOnly?: boolean;
+    disabled?: boolean;
+    clickLabelToExpand?: boolean;
+};
+export declare function useTreeContext<V extends Id = Id>(): TreeContext<V>;
+export declare const Tree: {
+    <N extends NodeType<V>, V extends Id = Id>(props: TreeProps<N, V>): ReactElement;
+    Node: typeof TreeNode;
+};
+export {};

package/dist/cjs/components/tree/tree.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tree = void 0;
+exports.useTreeContext = useTreeContext;
+const react_1 = require("@emotion/react");
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_2 = require("react");
+const selectionContext_1 = require("../selectionContext");
+const input_1 = require("../input");
+const tree_style_1 = require("./tree.style");
+const utils_1 = require("../../utils");
+const icons_1 = require("@ant-design/icons");
+const highlight_1 = require("../highlight");
+const placeholder_1 = require("../placeholder");
+const treeNode_1 = require("./treeNode");
+const treeContext = (0, react_2.createContext)({});
+function useTreeContext() {
+    return (0, react_2.useContext)(treeContext);
+}
+exports.Tree = (0, react_2.memo)((0, react_2.forwardRef)(({ nodes, primaryKey = 'value', labelKey = 'label', searchTokenKey, showLine = true, indent = 24, renderExpandIcon, multiple, showCheckbox = !!multiple, readOnly, disabled, clickLabelToExpand, defaultExpanded, expanded, onExpandedChange, searchable, searchInputProps, defaultSearchValue, searchValue, onSearchChange, 
+// 从SelectionContext继承来的属性
+childrenKey = 'children', relation = 'dependent', integration = 'shallowest', defaultValue, value, onChange, ...props }, ref) => {
+    const selectionContextProps = {
+        options: nodes, primaryKey, childrenKey, relation, integration,
+        multiple, defaultValue, value, onChange, disabled
+    };
+    /**
+     * --------------------------------------------------------------
+     * 统一处理nodes与children
+     */
+    const actualTreeNodes = (0, react_2.useMemo)(() => {
+        if (nodes) {
+            return nodes;
+        }
+        const fn = (arr) => {
+            return arr?.map(node => {
+                if ((0, react_2.isValidElement)(node)) {
+                    const { props } = node;
+                    return {
+                        ...props,
+                        children: fn(react_2.Children.toArray(props.children))
+                    };
+                }
+                return node;
+            });
+        };
+        return fn(react_2.Children.toArray(props.children));
+    }, [nodes, props.children]);
+    /**
+     * ----------------------------------------------------------------
+     * 搜索与展开
+     */
+    const { innerSearchValue, setInnerSearchValue, filteredTreeData, deferredSearchValue, expandedSet, toggleExpanded } = (0, utils_1.useTreeSearch)({
+        nodes: actualTreeNodes, primaryKey, labelKey, searchTokenKey, childrenKey,
+        defaultExpanded, expanded, onExpandedChange,
+        defaultSearchValue, searchValue, onSearchChange
+    });
+    return ((0, jsx_runtime_1.jsx)(selectionContext_1.SelectionContext, { ...selectionContextProps, children: (0, jsx_runtime_1.jsxs)("div", { ...props, ref: ref, css: tree_style_1.style, className: (0, utils_1.classnames)(tree_style_1.classes.root, props.className), "data-show-line": showLine, children: [searchable &&
+                    (0, jsx_runtime_1.jsx)(input_1.Input, { className: tree_style_1.classes.search, prefix: (0, jsx_runtime_1.jsx)(icons_1.SearchOutlined, {}), placeholder: "\u641C\u7D22", value: innerSearchValue.current, ...searchInputProps, onChange: e => {
+                            searchInputProps?.onChange?.(e);
+                            setInnerSearchValue(e.target.value);
+                        } }), (0, jsx_runtime_1.jsx)(treeContext.Provider, { value: (0, react_2.useMemo)(() => ({
+                        expandedSet, toggleExpanded, indent, renderExpandIcon,
+                        showCheckbox, readOnly, disabled, clickLabelToExpand
+                    }), [
+                        expandedSet, indent, renderExpandIcon,
+                        showCheckbox, readOnly, disabled, clickLabelToExpand
+                    ]), children: (0, react_2.useMemo)(() => {
+                        if (filteredTreeData?.length) {
+                            const fn = (arr) => {
+                                return arr?.map(({ _parentId, ...nodeProps }) => {
+                                    const currentValue = nodeProps[primaryKey];
+                                    const label = nodeProps[labelKey];
+                                    return ((0, react_1.createElement)(treeNode_1.TreeNode, { ...nodeProps, key: currentValue, value: currentValue, label: typeof label === 'string' && deferredSearchValue
+                                            ? (0, jsx_runtime_1.jsx)(highlight_1.Highlight, { keywords: deferredSearchValue.split(' '), children: label })
+                                            : label }, fn(nodeProps[childrenKey])));
+                                });
+                            };
+                            return fn(filteredTreeData);
+                        }
+                        return (0, jsx_runtime_1.jsx)(placeholder_1.Placeholder, {});
+                    }, [filteredTreeData]) })] }) }));
+}));
+exports.Tree.Node = treeNode_1.TreeNode;

package/dist/cjs/components/tree/tree.style.d.ts

@@ -0,0 +1,14 @@
+export declare const classes: {
+    search: string;
+    prefix: string;
+    checkbox: string;
+    label: string;
+    icon: string;
+    suffix: string;
+    indent: string;
+    expand: string;
+    node: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;

package/dist/cjs/components/tree/tree.style.js

@@ -0,0 +1,113 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.style = exports.classes = void 0;
+const tslib_1 = require("tslib");
+const react_1 = require("@emotion/react");
+const utils_1 = require("../../utils");
+const color_1 = tslib_1.__importDefault(require("color"));
+exports.classes = (0, utils_1.defineClasses)('tree', [
+    'search',
+    'node',
+    'indent',
+    'expand',
+    'checkbox',
+    'icon',
+    'label',
+    'prefix',
+    'suffix'
+]);
+exports.style = (0, utils_1.defineCss)(({ spacing, mode, borderRadius, text, easing, gray, divider, colors }) => {
+    const c = (0, color_1.default)(colors.primary);
+    const hover = gray(mode === 'light' ? .05 : .2);
+    const active = gray(mode === 'light' ? .1 : .12);
+    const selectedBg = c.alpha(mode === 'light' ? .1 : .2).string();
+    const selectedHover = c.alpha(mode === 'light' ? .07 : .17).string();
+    const selectedActive = c.alpha(mode === 'light' ? .13 : .23).string();
+    return (0, react_1.css) `
+        .${exports.classes.search} {
+            margin-bottom: ${spacing[3]}px;
+        }
+
+        .${exports.classes.node} {
+            display: flex;
+            align-items: center;
+            padding-right: ${spacing[2]}px;
+            margin-bottom: 1px;
+            cursor: pointer;
+            border-radius: ${borderRadius}px;
+            transition: background-color .2s ${easing.easeOut};
+
+            &[data-disabled=true] {
+                color: ${text.disabled};
+                cursor: not-allowed;
+            }
+
+            &[data-selected=true] {
+                background-color: ${selectedBg};
+
+                &:hover {
+                    background-color: ${selectedHover};
+                }
+
+                &:active {
+                    transition: background-color 0s;
+                    background-color: ${selectedActive};
+                }
+            }
+            
+            &:not([data-disabled=true]):not([data-selected=true]):hover {
+                background-color: ${hover};
+            }
+
+            &:not([data-disabled=true]):not([data-selected=true]):active {
+                transition: background-color 0s;
+                background-color: ${active};
+            }
+
+            .${exports.classes.indent} {
+                align-self: stretch;
+                display: flex;
+            }
+
+            .${exports.classes.expand} {
+                width: 29px;
+                align-self: stretch;
+                align-items: center;
+                justify-content: center;
+
+                .${exports.classes.icon} > svg {
+                    transition: transform .2s ${easing.easeOut};
+                }
+            }
+
+            .${exports.classes.checkbox} {
+                margin-right: ${spacing[3]}px;
+            }
+
+            .${exports.classes.label} {
+                flex: 1;
+                padding: 5px 0;
+            }
+
+            .${exports.classes.prefix} {
+                color: ${text.secondary};
+                margin-right: ${spacing[2]}px;
+            }
+
+            .${exports.classes.suffix} {
+                color: ${text.disabled};
+                margin-left: ${spacing[2]}px;
+            }
+        }
+
+        &[data-show-line=true] {
+            \.${exports.classes.indent}:after {
+                content: '';
+                width: 1px;
+                height: 100%;
+                margin-left: 14px;
+                background-color: ${divider};
+            }
+        }
+    `;
+});

package/dist/cjs/components/tree/treeNode.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { DIVProps, Id } from '../../../types';
+export interface TreeNodeProps extends Omit<DIVProps, 'prefix'> {
+    value: Id;
+    label?: ReactNode;
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    disabled?: boolean;
+    /** @private 内部使用，表明该节点的层级 */
+    _level?: number;
+}
+export declare const TreeNode: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<TreeNodeProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;

package/dist/cjs/components/tree/treeNode.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TreeNode = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const tree_style_1 = require("./tree.style");
+const utils_1 = require("../../utils");
+const transitionBase_1 = require("../transitionBase");
+const icons_1 = require("@ant-design/icons");
+const button_1 = require("../button");
+const checkbox_1 = require("../checkbox");
+const tree_1 = require("./tree");
+const selectionContext_1 = require("../selectionContext");
+exports.TreeNode = (0, react_1.memo)((0, react_1.forwardRef)(({ value, label, prefix, suffix, disabled, _level = 0, ...props }, ref) => {
+    const { expandedSet = new Set(), toggleExpanded, indent, renderExpandIcon, showCheckbox, readOnly, clickLabelToExpand, ...context } = (0, tree_1.useTreeContext)();
+    disabled ??= context.disabled;
+    const { selectionStatus, toggleSelected } = (0, selectionContext_1.useSelectionContext)();
+    const currentExpanded = expandedSet?.has(value);
+    const status = selectionStatus?.get(value);
+    const clickHandler = () => {
+        !readOnly && !disabled && toggleSelected(value);
+        clickLabelToExpand && toggleExpanded?.(value);
+    };
+    const hasChildren = !!props.children && (!Array.isArray(props.children) || props.children.length > 0);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { ...props, ref: ref, className: (0, utils_1.classnames)(tree_style_1.classes.node, props.className), "data-selected": status === 2, "data-read-only": readOnly, "data-disabled": disabled, onClick: clickHandler, children: [Array(_level).fill(void 0).map((_, i) => (0, jsx_runtime_1.jsx)("div", { className: tree_style_1.classes.indent, style: { width: indent } }, i)), (0, jsx_runtime_1.jsx)(button_1.Button, { className: tree_style_1.classes.expand, variant: "plain", color: "text", onClick: e => {
+                            e.stopPropagation();
+                            toggleExpanded?.(value);
+                        }, children: renderExpandIcon
+                            ? renderExpandIcon(value, !!currentExpanded, [...expandedSet])
+                            : hasChildren &&
+                                (0, jsx_runtime_1.jsx)(icons_1.RightOutlined, { className: tree_style_1.classes.icon, rotate: currentExpanded ? 90 : 0 }) }), showCheckbox &&
+                        (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { className: tree_style_1.classes.checkbox, checked: status === 2, indeterminate: status === 1, onClick: e => {
+                                e.stopPropagation();
+                                clickHandler();
+                            } }), !!prefix &&
+                        (0, jsx_runtime_1.jsx)("div", { className: tree_style_1.classes.prefix, children: prefix }), (0, jsx_runtime_1.jsx)("div", { className: tree_style_1.classes.label, children: label }), !!suffix &&
+                        (0, jsx_runtime_1.jsx)("div", { className: tree_style_1.classes.suffix, children: suffix })] }), hasChildren &&
+                (0, jsx_runtime_1.jsx)(transitionBase_1.Collapse, { in: currentExpanded, children: react_1.Children.map(props.children, child => {
+                        return (0, react_1.isValidElement)(child)
+                            ? (0, react_1.cloneElement)(child, { _level: _level + 1 })
+                            : child;
+                    }) })] }));
+}));

package/dist/cjs/components/treeSelect/index.d.ts

@@ -0,0 +1 @@
+export * from './treeSelect';

package/dist/cjs/components/treeSelect/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./treeSelect"), exports);

package/dist/cjs/components/treeSelect/treeSelect.d.ts

@@ -0,0 +1,35 @@
+import { ReactElement, ReactNode, Ref } from 'react';
+import { PopperProps, PopperRef } from '../popper';
+import { NodeType, TreeBaseProps, TreeMultipleProps, TreeNode, TreeSingleProps } from '../tree';
+import { Id } from '../../../types';
+interface TreeSelectBaseProps<N extends NodeType<V>, V extends Id = Id> extends TreeBaseProps<N, V> {
+    /** <select />内部由<input />实现 */
+    inputProps?: JSX.IntrinsicElements['input'];
+    inputRef?: Ref<HTMLInputElement>;
+    popperProps?: PopperProps;
+    popperRef?: Ref<PopperRef>;
+    options?: N[];
+    sizeAdaptable?: boolean;
+    loading?: boolean;
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?(open: boolean): void;
+    /** 以下属性转发至<InputBase/> */
+    placeholder?: string;
+    autoFocus?: boolean;
+    clearable?: boolean;
+    onClear?(): void;
+}
+export interface TreeSelectSingleProps<N extends NodeType<V>, V extends Id = Id> extends TreeSelectBaseProps<N, V>, TreeSingleProps<N, V> {
+    renderBackfill?(selectedValue: V): ReactNode;
+}
+export interface TreeSelectMultipleProps<N extends NodeType<V>, V extends Id = Id> extends TreeSelectBaseProps<N, V>, TreeMultipleProps<N, V> {
+    renderBackfill?(selectedValue: V[]): ReactNode;
+}
+export type TreeSelectProps<N extends NodeType<V>, V extends Id = Id> = TreeSelectSingleProps<N, V> | TreeSelectMultipleProps<N, V>;
+export declare const TreeSelect: {
+    <N extends NodeType<V>, V extends Id = Id>(props: TreeSelectProps<N, V>): ReactElement;
+    Option: typeof TreeNode;
+    Node: typeof TreeNode;
+};
+export {};

package/dist/cjs/components/treeSelect/treeSelect.js

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TreeSelect = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const popper_1 = require("../popper");
+const tree_1 = require("../tree");
+const icons_1 = require("@ant-design/icons");
+const utils_1 = require("../../utils");
+const inputBase_1 = require("../inputBase");
+const loadingIndicator_1 = require("../loadingIndicator");
+const popper_style_1 = require("../popper/popper.style");
+const tag_1 = require("../tag");
+const treeSelect_style_1 = require("./treeSelect.style");
+const selectionHook_1 = require("../selectionContext/selectionHook");
+exports.TreeSelect = (0, react_1.memo)((0, react_1.forwardRef)(({ inputProps, inputRef, popperProps, popperRef, nodes, options, defaultValue, value, onChange, sizeAdaptable, loading, defaultOpen, open, onOpenChange, renderBackfill, 
+// 以下属性转发至<InputBase/>
+placeholder = '请选择', autoFocus, clearable, onClear, ...props }, ref) => {
+    props.labelKey ??= 'label';
+    const [innerOpen, setInnerOpen] = (0, utils_1.useControlled)(defaultOpen, open, onOpenChange);
+    const openChangeHandler = (open) => {
+        popperProps?.onOpenChange?.(open);
+        setInnerOpen(open);
+    };
+    const actualOptions = (0, react_1.useMemo)(() => {
+        if (options) {
+            return options;
+        }
+        if (nodes) {
+            return nodes;
+        }
+        const fn = (arr) => {
+            return arr?.map(node => {
+                if ((0, react_1.isValidElement)(node)) {
+                    const { props } = node;
+                    return {
+                        ...props,
+                        children: fn(react_1.Children.toArray(props.children))
+                    };
+                }
+                return node;
+            });
+        };
+        return fn(react_1.Children.toArray(props.children));
+    }, [options, nodes, props.children]);
+    const { innerValue, setInnerValue, toggleSelected, optionsMap } = (0, selectionHook_1.useTreeSelect)({
+        options: actualOptions,
+        primaryKey: props.primaryKey ?? 'value',
+        childrenKey: props.childrenKey ?? 'children',
+        clearable: !!props.multiple,
+        multiple: props.multiple,
+        defaultValue: defaultValue,
+        value,
+        onChange
+    });
+    (0, react_1.useMemo)(() => {
+        // 单选模式下，选中一次就自动关闭弹框
+        !props.multiple && setInnerOpen(false);
+    }, [innerValue.current, props.multiple]);
+    const clearHandler = () => {
+        onClear?.();
+        setInnerValue(props.multiple ? [] : void 0);
+    };
+    const renderBackfillFn = () => {
+        if (renderBackfill) {
+            return renderBackfill(innerValue.current);
+        }
+        if (props.multiple) {
+            return (0, utils_1.toArray)(innerValue.current)?.map(v => (0, jsx_runtime_1.jsx)(tag_1.Tag, { closable: true, onClose: () => toggleSelected(v), children: optionsMap.get(v)?.[props.labelKey] ?? v }, v));
+        }
+        return ((0, jsx_runtime_1.jsx)("div", { className: treeSelect_style_1.classes.backfillWrap, children: optionsMap.get(innerValue.current)?.[props.labelKey] ?? innerValue.current }));
+    };
+    return ((0, jsx_runtime_1.jsx)(popper_1.Popper, { css: popper_style_1.popperStyle, open: innerOpen.current, onOpenChange: openChangeHandler, placement: "bottom", variant: "collapse", trigger: ['click', 'enter'], disabled: props.disabled || props.readOnly, sizeAdaptable: sizeAdaptable, content: (0, jsx_runtime_1.jsx)(tree_1.Tree, { ...props, nodes: options, value: innerValue.current, onChange: setInnerValue }), ...popperProps, popperRef: popperRef, onPointerDown: e => {
+            popperProps?.onPointerDown?.(e);
+            e.preventDefault();
+        }, children: (0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { clearable: !!props.multiple, ref: ref, css: treeSelect_style_1.style, className: (0, utils_1.classnames)(treeSelect_style_1.classes.root, props.className), "data-focused": open, value: innerValue.current, onClear: clearHandler, placeholder: placeholder, autoFocus: autoFocus, disabled: props.disabled, readOnly: props.readOnly, children: ({ ref, ...rest }) => (0, jsx_runtime_1.jsxs)("div", { className: treeSelect_style_1.classes.contentWrap, children: [!(0, utils_1.toArray)(innerValue.current)?.length
+                        ? (0, jsx_runtime_1.jsx)("div", { className: treeSelect_style_1.classes.placeholder, children: placeholder })
+                        : (0, jsx_runtime_1.jsx)("div", { className: treeSelect_style_1.classes.backfill, children: renderBackfillFn() }), (0, jsx_runtime_1.jsx)("input", { size: 1, ...rest, ...inputProps, ref: (0, utils_1.cloneRef)(ref, inputRef), "data-hidden": "true" }), (0, jsx_runtime_1.jsx)("div", { className: treeSelect_style_1.classes.arrow, "data-open": open, children: loading
+                            ? (0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, {})
+                            : (0, jsx_runtime_1.jsx)(icons_1.CaretDownOutlined, {}) })] }) }) }));
+}));
+exports.TreeSelect.Option = exports.TreeSelect.Node = tree_1.TreeNode;

package/dist/cjs/components/treeSelect/treeSelect.style.d.ts

@@ -0,0 +1,10 @@
+export declare const classes: {
+    placeholder: string;
+    arrow: string;
+    contentWrap: string;
+    backfill: string;
+    backfillWrap: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;

package/dist/cjs/components/treeSelect/treeSelect.style.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.style = exports.classes = void 0;
+const react_1 = require("@emotion/react");
+const utils_1 = require("../../utils");
+const tag_style_1 = require("../tag/tag.style");
+exports.classes = (0, utils_1.defineClasses)('tree-select', [
+    'contentWrap',
+    'placeholder',
+    'backfill',
+    'backfillWrap',
+    'arrow'
+]);
+exports.style = (0, utils_1.defineCss)(({ spacing, text, easing }) => (0, react_1.css) `
+    cursor: pointer;
+    position: relative;
+
+    .${exports.classes.contentWrap} {
+        display: flex;
+        align-items: center;
+        gap: ${spacing[1]}px;
+    }
+
+    .${exports.classes.placeholder} {
+        flex: 1;
+        color: ${text.placeholder};
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+
+    .${exports.classes.backfill} {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-wrap: wrap;
+        gap: ${spacing[1]}px;
+
+        .${tag_style_1.classes.root} {
+            min-width: 0;
+        }
+
+        .${tag_style_1.classes.content},
+        .${exports.classes.backfillWrap} {
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+    }
+
+    .${exports.classes.arrow} {
+        color: ${text.placeholder};
+        transition: transform .2s ${easing.easeOut};
+
+        &[data-open=true] {
+            transform: rotate(180deg);
+        }
+    }
+`);

package/dist/cjs/components/typography/index.d.ts

@@ -0,0 +1 @@
+export * from './typography';

package/dist/cjs/components/typography/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./typography"), exports);

package/dist/cjs/components/typography/typography.d.ts

@@ -0,0 +1,36 @@
+import { CSSProperties, ReactNode } from 'react';
+import { ColorPropsValue, OverridableProps } from '../../../types';
+import { ButtonProps } from '../button';
+import { InputProps } from '../input';
+import { TextareaProps } from '../textarea';
+export type TypographyProps = {
+    color?: ColorPropsValue;
+    editable?: boolean;
+    onEditFinish?(text: string): void;
+    copyable?: boolean;
+    onCopy?(text: string): void;
+    editComponentProps?: InputProps | TextareaProps;
+    ellipsisRows?: number;
+    wordBreak?: CSSProperties['wordBreak'];
+    expandable?: boolean;
+    expandButtonProps?: ButtonProps;
+};
+export type OverridedTypographyProps<C> = TypographyProps & Omit<OverridableProps<C>, 'onCopy'>;
+type TypographyComponent<C extends keyof JSX.IntrinsicElements = 'p'> = (props: OverridedTypographyProps<C>) => ReactNode;
+export declare const Typography: TypographyComponent & {
+    h1: TypographyComponent<"h1">;
+    h2: TypographyComponent<"h2">;
+    h3: TypographyComponent<"h3">;
+    h4: TypographyComponent<"h4">;
+    h5: TypographyComponent<"h5">;
+    h6: TypographyComponent<"h6">;
+    mark: TypographyComponent<"mark">;
+    code: TypographyComponent<"code">;
+    kbd: TypographyComponent<"kbd">;
+    a: TypographyComponent<"a">;
+    i: TypographyComponent<"i">;
+    b: TypographyComponent<"b">;
+    u: TypographyComponent<"u">;
+    del: TypographyComponent<"del">;
+};
+export {};