@lark-apaas/client-toolkit 1.0.4 → 1.0.6

package/lib/components/User/UserSelect.js

@@ -1,61 +1,10 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo, useRef, useState } from "react";
-import { Avatar, Select, Spin } from "antd";
-import { LoaderCircle } from "lucide-react";
-import { debounce } from "lodash";
+import { jsx } from "react/jsx-runtime";
+import react from "react";
 import { getDataloom } from "../../integrations/dataloom.js";
-import "./UserSelect.css";
-import { UserWithAvatar } from "./UserWithAvatar.js";
-const mapValueToOptions = (value)=>{
-    if (!value) return [];
-    const unifiedValue = Array.isArray(value) ? value : [
-        value
-    ];
-    return unifiedValue.map((user)=>({
-            value: user.user_id,
-            label: /*#__PURE__*/ jsx(UserWithAvatar, {
-                data: user,
-                mode: "plain",
-                className: "p-[1px] pr-0"
-            }),
-            avatar: user.avatar,
-            name: user.name,
-            rawValue: user
-        }));
-};
-const mapValueToSelectValue = (value)=>{
-    if (!value) return;
-    if (Array.isArray(value)) return value.map((user)=>({
-            value: user.user_id,
-            label: /*#__PURE__*/ jsx(UserWithAvatar, {
-                data: user,
-                mode: "plain",
-                className: "p-[1px] pr-0"
-            }),
-            avatar: user.avatar,
-            name: user.name,
-            rawValue: user
-        }));
-    return {
-        value: value.user_id,
-        label: /*#__PURE__*/ jsx(UserWithAvatar, {
-            data: value,
-            mode: "plain",
-            className: "p-[1px] pr-0"
-        }),
-        avatar: value.avatar,
-        name: value.name,
-        rawValue: value
-    };
-};
-const UserSelect = ({ mode = 'single', defaultValue, value, onChange, placeholder })=>{
-    const defaultOptions = useMemo(()=>mapValueToOptions(defaultValue), [
-        defaultValue
-    ]);
-    const [options, setOptions] = useState(defaultOptions);
-    const [fetching, setFetching] = useState(false);
-    const fetchRef = useRef(0);
-    const fetchUsers = async (search)=>{
+import { UserSelectUI } from "./UserSelectUI/index.js";
+const UserSelect = ({ mode = 'single', defaultValue, value, onChange, placeholder, fetchUsers })=>{
+    const fetchUsersImpl = react.useCallback(async (search)=>{
+        if (fetchUsers) return fetchUsers(search);
         try {
             const dataloom = await getDataloom();
             const { data } = await dataloom.service.user.search({
@@ -74,98 +23,23 @@ const UserSelect = ({ mode = 'single', defaultValue, value, onChange, placeholde
             console.error('Failed to fetch users:', error);
             return [];
         }
-    };
-    const debounceFetcher = useMemo(()=>{
-        const loadOptions = (value)=>{
-            if (!value) return;
-            fetchRef.current += 1;
-            const fetchId = fetchRef.current;
-            setOptions([]);
-            setFetching(true);
-            fetchUsers(value).then((newOptions)=>{
-                if (fetchId !== fetchRef.current) return;
-                setOptions(newOptions.map((v)=>({
-                        value: v.user_id,
-                        label: /*#__PURE__*/ jsx(UserWithAvatar, {
-                            data: v,
-                            mode: "plain",
-                            className: "p-[1px] pr-0"
-                        }),
-                        avatar: v.avatar,
-                        name: v.name,
-                        rawValue: v
-                    })));
-                setFetching(false);
-            });
-        };
-        return debounce(loadOptions, 500);
-    }, []);
-    const optionRender = (option)=>{
-        const user = option.data;
-        return /*#__PURE__*/ jsxs("div", {
-            className: "flex items-center gap-2",
-            children: [
-                /*#__PURE__*/ jsx(Avatar, {
-                    src: user.avatar,
-                    size: "small",
-                    className: "shrink-0 !border-0"
-                }),
-                /*#__PURE__*/ jsx("span", {
-                    className: "text-sm",
-                    children: user.name
-                })
-            ]
-        });
-    };
+    }, [
+        fetchUsers
+    ]);
     const selectMode = 'multiple' === mode ? 'multiple' : void 0;
     return /*#__PURE__*/ jsx("div", {
         className: "user-select-container",
-        children: /*#__PURE__*/ jsx(Select, {
-            labelInValue: true,
-            showSearch: true,
-            className: "w-full",
-            maxTagCount: "responsive",
-            defaultValue: defaultOptions,
+        children: /*#__PURE__*/ jsx(UserSelectUI, {
+            defaultValue: defaultValue,
             mode: selectMode,
-            filterOption: false,
-            onSearch: debounceFetcher,
+            onSearch: fetchUsersImpl,
             allowClear: true,
             placeholder: placeholder,
-            notFoundContent: fetching ? /*#__PURE__*/ jsx("div", {
-                className: "flex items-center justify-center",
-                children: /*#__PURE__*/ jsx(Spin, {
-                    size: "small",
-                    indicator: /*#__PURE__*/ jsx(LoaderCircle, {
-                        className: "!text-[16px] animate-spin"
-                    })
-                })
-            }) : /*#__PURE__*/ jsx("span", {
-                className: "py-[1px] px-1 text-[#8F959E]",
-                children: "无结果，建议更换搜索词"
-            }),
-            optionRender: optionRender,
-            options: options,
-            dropdownStyle: {
-                boxShadow: '0px 8px 24px 8px rgba(31, 35, 41, 0.04), 0px 6px 12px 0px rgba(31, 35, 41, 0.04), 0px 4px 8px -8px rgba(31, 35, 41, 0.06)',
-                padding: '3px'
-            },
-            value: mapValueToSelectValue(value),
-            maxTagPlaceholder: (omittedValues)=>/*#__PURE__*/ jsxs("span", {
-                    className: "pl-2",
-                    children: [
-                        "+ ",
-                        omittedValues.length
-                    ]
-                }),
-            onChange: onChange ? (_, options)=>{
-                if (Array.isArray(options)) {
-                    const selectedUsers = options.map((opt)=>opt.rawValue);
-                    onChange(selectedUsers);
-                } else {
-                    const selectedUser = options?.rawValue;
-                    if (selectedUser) onChange(selectedUser);
-                }
-            } : void 0
+            value: value,
+            onChange: (value)=>{
+                if ('multiple' === selectMode) onChange?.(value ?? []);
+                else onChange?.(value);
+            }
         })
     });
 };

package/lib/components/User/UserSelectUI/ActionButtons.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+interface ActionButtonsProps {
+    loading: boolean;
+    canClear: boolean;
+    isOpen: boolean;
+    disabled: boolean;
+    onClear: (event: React.MouseEvent) => void;
+    onToggle: () => void;
+}
+export declare const ActionButtons: React.ForwardRefExoticComponent<ActionButtonsProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/User/UserSelectUI/ActionButtons.js

@@ -0,0 +1,44 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { ChevronDown, X } from "lucide-react";
+import { clsxWithTw } from "../../../utils/utils.js";
+import { Spinner } from "./Spinner.js";
+const ActionButtons_ActionButtons = /*#__PURE__*/ forwardRef(function({ loading, canClear, isOpen, disabled, onClear, onToggle }, ref) {
+    return /*#__PURE__*/ jsxs("div", {
+        ref: ref,
+        className: "flex flex-shrink-0 items-center gap-1 pr-2.5 ml-auto",
+        children: [
+            loading && /*#__PURE__*/ jsx(Spinner, {
+                className: "text-muted-foreground"
+            }),
+            canClear && /*#__PURE__*/ jsx("button", {
+                type: "button",
+                onClick: onClear,
+                "data-select-interactive": "true",
+                className: clsxWithTw('flex size-3 items-center justify-center rounded-full bg-foreground/60 transition-colors duration-200', 'cursor-pointer hover:bg-primary', 'opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto'),
+                children: /*#__PURE__*/ jsx(X, {
+                    size: 11,
+                    strokeWidth: 3,
+                    className: "text-white"
+                })
+            }),
+            /*#__PURE__*/ jsx("button", {
+                type: "button",
+                "data-select-interactive": "true",
+                className: clsxWithTw('flex size-3 items-center justify-center rounded-full text-muted-foreground transition-all duration-200 cursor-pointer', {
+                    'rotate-180': isOpen,
+                    'opacity-50 cursor-not-allowed': disabled
+                }),
+                onClick: ()=>{
+                    if (!disabled) onToggle();
+                },
+                children: /*#__PURE__*/ jsx(ChevronDown, {
+                    size: 12,
+                    strokeWidth: 3
+                })
+            })
+        ]
+    });
+});
+ActionButtons_ActionButtons.displayName = 'ActionButtons';
+export { ActionButtons_ActionButtons as ActionButtons };

package/lib/components/User/UserSelectUI/Dropdown.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { IUserProfile } from '../../../apis/udt-types';
+interface DropdownProps {
+    isOpen: boolean;
+    fetching: boolean;
+    searchResults: IUserProfile[];
+    onSelect: (user: IUserProfile) => void;
+    isSelected: (userId: string) => boolean;
+    onOptionMouseDown?: () => void;
+}
+export declare function Dropdown({ isOpen, fetching, searchResults, onSelect, isSelected, onOptionMouseDown, }: DropdownProps): React.JSX.Element;
+export {};

package/lib/components/User/UserSelectUI/Dropdown.js

@@ -0,0 +1,66 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { Avatar, AvatarFallback, AvatarImage } from "../../ui/avatar.js";
+import { clsxWithTw } from "../../../utils/utils.js";
+import { Check } from "lucide-react";
+import { Spinner } from "./Spinner.js";
+function Dropdown({ isOpen, fetching, searchResults, onSelect, isSelected, onOptionMouseDown }) {
+    if (!isOpen) return null;
+    return /*#__PURE__*/ jsx("div", {
+        className: "absolute top-full left-0 right-0 z-50 mt-1 rounded-md border border-solid border-border bg-card shadow-lg",
+        children: /*#__PURE__*/ jsx("div", {
+            className: "max-h-[165px] overflow-y-auto p-[3px]",
+            children: fetching ? /*#__PURE__*/ jsx("div", {
+                className: "flex items-center justify-center px-3 py-2",
+                children: /*#__PURE__*/ jsx(Spinner, {
+                    className: "text-primary"
+                })
+            }) : 0 === searchResults.length ? /*#__PURE__*/ jsx("div", {
+                className: "px-2 py-[5px] text-[14px] leading-[22px] text-muted-foreground",
+                children: "无结果，建议更换搜索词"
+            }) : searchResults.map((user)=>{
+                const selected = isSelected(user.user_id);
+                const displayName = user.name?.trim() || '无效人员';
+                return /*#__PURE__*/ jsxs("div", {
+                    className: "relative flex cursor-pointer items-center gap-2 rounded-sm py-1 pl-3 pr-[7px] text-foreground transition-colors hover:bg-foreground/8",
+                    onMouseDown: (event)=>{
+                        onOptionMouseDown?.();
+                        event.preventDefault();
+                    },
+                    onClick: ()=>onSelect(user),
+                    children: [
+                        /*#__PURE__*/ jsxs("div", {
+                            className: "flex min-w-0 flex-1 items-center gap-2",
+                            children: [
+                                /*#__PURE__*/ jsxs(Avatar, {
+                                    className: "h-6 w-6 flex-shrink-0",
+                                    children: [
+                                        /*#__PURE__*/ jsx(AvatarImage, {
+                                            src: user.avatar,
+                                            alt: displayName
+                                        }),
+                                        /*#__PURE__*/ jsx(AvatarFallback, {
+                                            className: "bg-muted text-[12px] text-foreground",
+                                            children: displayName.slice(0, 1)
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsx("span", {
+                                    className: clsxWithTw('truncate text-[14px] leading-[20px]', selected ? 'text-primary' : void 0),
+                                    title: displayName,
+                                    children: displayName
+                                })
+                            ]
+                        }),
+                        selected ? /*#__PURE__*/ jsx(Check, {
+                            size: 12,
+                            className: "text-primary",
+                            strokeWidth: 3
+                        }) : null
+                    ]
+                }, user.user_id);
+            })
+        })
+    });
+}
+export { Dropdown };

package/lib/components/User/UserSelectUI/MultipleSelectionTags.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { IUserProfile } from '../../../apis/udt-types';
+interface MultipleSelectionTagsProps {
+    displayUsers: IUserProfile[];
+    allUsers: IUserProfile[];
+    hiddenCount: number;
+    onRemove: (userId: string, event: React.MouseEvent) => void;
+    containerRef?: React.RefObject<HTMLDivElement>;
+    measureRef?: React.RefObject<HTMLDivElement>;
+    moreIndicatorRef?: React.RefObject<HTMLSpanElement>;
+    maxWidth?: number | null;
+}
+export declare function MultipleSelectionTags({ displayUsers, onRemove, }: MultipleSelectionTagsProps): React.JSX.Element;
+export {};

package/lib/components/User/UserSelectUI/MultipleSelectionTags.js

@@ -0,0 +1,48 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { clsxWithTw } from "../../../utils/utils.js";
+import { Avatar, AvatarFallback, AvatarImage } from "../../ui/avatar.js";
+import { Badge } from "../../ui/badge.js";
+import { Button } from "../../ui/button.js";
+import { X } from "lucide-react";
+function MultipleSelectionTags({ displayUsers, onRemove }) {
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: displayUsers?.map((user, index)=>/*#__PURE__*/ jsxs(Badge, {
+                variant: "secondary",
+                "data-user-tag": true,
+                className: clsxWithTw('cursor-pointer flex items-center pl-0.5 pr-2 max-w-[200px] group bg-foreground/10 hover:bg-foreground/10 transition-colors rounded-full whitespace-nowrap my-[3px]', index > 0 ? 'ml-0' : ''),
+                children: [
+                    /*#__PURE__*/ jsxs(Avatar, {
+                        className: "size-[20px] flex-shrink-0",
+                        children: [
+                            /*#__PURE__*/ jsx(AvatarImage, {
+                                src: user.avatar
+                            }),
+                            /*#__PURE__*/ jsx(AvatarFallback, {
+                                className: "bg-primary/10 text-[10px]",
+                                children: user.name.slice(0, 1)
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        className: "inline-block truncate text-foreground text-[14px] leading-[20px]",
+                        title: user.name,
+                        children: user.name
+                    }),
+                    /*#__PURE__*/ jsx(Button, {
+                        variant: "ghost",
+                        size: "sm",
+                        "data-select-interactive": "true",
+                        className: "h-3 w-3 p-0 rounded-full opacity-60 hover:opacity-100 transition-all duration-200 cursor-pointer flex-shrink-0",
+                        onClick: (e)=>onRemove(user.user_id, e),
+                        title: `移除 ${user.name}`,
+                        children: /*#__PURE__*/ jsx(X, {
+                            size: 10,
+                            strokeWidth: 3
+                        })
+                    })
+                ]
+            }, user.user_id))
+    });
+}
+export { MultipleSelectionTags };

package/lib/components/User/UserSelectUI/SingleSelectionPreview.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { IUserProfile } from '../../../apis/udt-types';
+interface SingleSelectionPreviewProps {
+    user: IUserProfile;
+    canClear: boolean;
+    isOpen: boolean;
+}
+export declare function SingleSelectionPreview({ user, canClear, isOpen, }: SingleSelectionPreviewProps): React.JSX.Element;
+export {};

package/lib/components/User/UserSelectUI/SingleSelectionPreview.js

@@ -0,0 +1,37 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { Avatar, AvatarFallback, AvatarImage } from "../../ui/avatar.js";
+import { clsxWithTw } from "../../../utils/utils.js";
+function SingleSelectionPreview({ user, canClear, isOpen }) {
+    const displayName = user.name?.trim() ?? '';
+    return /*#__PURE__*/ jsxs("div", {
+        className: clsxWithTw('pointer-events-none absolute top-1/2 z-0 flex -translate-y-1/2 items-center gap-1 rounded-md text-sm text-foreground/70', {
+            'opacity-50': isOpen
+        }),
+        style: {
+            left: 'calc(0.75rem + 1px)',
+            right: canClear ? '3.5rem' : '2.5rem',
+            maxWidth: canClear ? 'calc(100% - 3.5rem)' : 'calc(100% - 2.5rem)'
+        },
+        children: [
+            /*#__PURE__*/ jsxs(Avatar, {
+                className: "h-5 w-5 flex-shrink-0",
+                children: [
+                    /*#__PURE__*/ jsx(AvatarImage, {
+                        src: user.avatar
+                    }),
+                    /*#__PURE__*/ jsx(AvatarFallback, {
+                        className: "text-[11px] text-foreground",
+                        children: displayName.slice(0, 1)
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx("span", {
+                className: "truncate text-[14px] leading-[20px] text-foreground",
+                title: displayName,
+                children: displayName
+            })
+        ]
+    });
+}
+export { SingleSelectionPreview };

package/lib/components/User/UserSelectUI/Spinner.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare function Spinner({ className }: React.ComponentProps<'svg'>): React.JSX.Element;

package/lib/components/User/UserSelectUI/Spinner.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Loader2Icon } from "lucide-react";
+import { clsxWithTw } from "../../../utils/utils.js";
+function Spinner({ className }) {
+    return /*#__PURE__*/ jsx(Loader2Icon, {
+        role: "status",
+        "aria-label": "Loading",
+        strokeWidth: 2,
+        className: clsxWithTw('size-4 animate-spin', className)
+    });
+}
+export { Spinner };

package/lib/components/User/UserSelectUI/UserSelectUI.d.ts

@@ -0,0 +1,5 @@
+/** biome-ignore-all lint/a11y/noStaticElementInteractions: <explanation> */
+/** biome-ignore-all lint/a11y/useKeyWithClickEvents: <explanation> */
+import React from 'react';
+import type { UserSelectProps } from './types';
+export declare const UserSelectUI: React.FC<UserSelectProps>;