@canlooks/can-ui 0.0.1

package/dist/esm/components/segmented/segmented.style.d.ts

@@ -0,0 +1,10 @@
+export declare const classes: {
+    prefix: string;
+    option: string;
+    label: string;
+    suffix: string;
+    indicator: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;

package/dist/esm/components/segmented/segmented.style.js

@@ -0,0 +1,121 @@
+import { css } from '@emotion/react';
+import { defineClasses, defineCss } from '../../utils';
+import Color from 'color';
+export const classes = defineClasses('segmented', [
+    'option',
+    'label',
+    'prefix',
+    'suffix',
+    'indicator'
+]);
+export const style = defineCss(({ mode, background, borderRadius, easing, text }) => {
+    const bgColor = Color(background.body);
+    const hoverBg = bgColor.darken(mode === 'light' ? .04 : .12).hex();
+    const activeBg = bgColor.darken(mode === 'light' ? .08 : .24).hex();
+    return css `
+        display: inline-flex;
+        background-color: ${background.body};
+        border-radius: ${borderRadius}px;
+        padding: 2px;
+        position: relative;
+
+        .${classes.option} {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 6px;
+            padding: 4px 12px;
+            border-radius: ${borderRadius}px;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            z-index: 1;
+            transition: background-color .3s ${easing.easeOut};
+
+            &[data-active=true] {
+                transition: background-color 0s;
+            }
+
+            &[data-orientation=vertical] {
+                flex-direction: column;
+            }
+
+            &[data-disabled=true] {
+                cursor: not-allowed;
+                color: ${text.disabled};
+            }
+        }
+
+        &[data-size=small] {
+            .${classes.option} {
+                padding: 3px 12px;
+            }
+        }
+
+        &[data-size=large] {
+            .${classes.option} {
+                padding: 11px 12px;
+            }
+        }
+
+        &[data-full-width=true] {
+            display: flex;
+
+            .${classes.option} {
+                flex: 1;
+            }
+        }
+
+        &[data-orientation=vertical] {
+            flex-direction: column;
+        }
+
+        .${classes.indicator} {
+            border-radius: ${borderRadius}px;
+            background-color: ${background.card};
+            box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
+            position: absolute;
+            transition: all .3s ${easing.bounce};
+        }
+
+        &[data-animating=true] {
+            .${classes.option} {
+                transition: background-color 0s;
+            }
+        }
+
+        &:not([data-animating=true]) {
+            .${classes.option}[data-active=true] {
+                background-color: ${background.card};
+                box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
+            }
+        }
+
+        &:not(:has([data-active=true])) {
+            .${classes.indicator} {
+                display: none;
+            }
+        }
+
+        &:not([data-read-only=true]):not([data-disabled=true]) {
+            \.${classes.option}:not([data-disabled=true]) {
+                cursor: pointer;
+                
+                &:not([data-active=true]):hover {
+                    background-color: ${hoverBg};
+                }
+            
+                &:not([data-active=true]):active {
+                    transition: background-color 0s;
+                    background-color: ${activeBg};
+                }
+            }
+        }
+
+        &[data-disabled=true] {
+            .${classes.option} {
+                cursor: not-allowed;
+            }
+        }
+    `;
+});

package/dist/esm/components/select/index.d.ts

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

package/dist/esm/components/select/index.js

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

package/dist/esm/components/select/select.d.ts

@@ -0,0 +1,44 @@
+import { ReactElement, ReactNode, Ref } from 'react';
+import { InputBaseProps } from '../inputBase';
+import { PopperProps, PopperRef } from '../popper';
+import { MenuItem } from '../menuItem';
+import { MenuOptionType, OptionsBaseSharedProps } from '../optionsBase';
+import { InputProps } from '../input';
+import { Id } from '../../../types';
+export interface SelectBaseProps<O extends MenuOptionType> extends OptionsBaseSharedProps<O>, Omit<InputBaseProps<'input'>, 'children' | 'defaultValue' | 'value' | 'onChange'> {
+    /** <select />内部由<input />实现 */
+    inputProps?: JSX.IntrinsicElements['input'];
+    inputRef?: Ref<HTMLInputElement>;
+    popperProps?: PopperProps;
+    popperRef?: Ref<PopperRef>;
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?(open: boolean): void;
+    sizeAdaptable?: boolean;
+    children?: ReactNode;
+    searchable?: boolean;
+    defaultSearchValue?: string;
+    searchValue?: string;
+    onSearchChange?(searchValue: string): void;
+    searchInputProps?: InputProps;
+}
+export interface SelectSingleProps<O extends MenuOptionType, V extends Id = Id> extends SelectBaseProps<O> {
+    multiple?: false;
+    defaultValue?: V;
+    value?: V;
+    onChange?(value: V): void;
+    renderBackfill?(selectedValue: V): ReactNode;
+}
+export interface SelectMultipleProps<O extends MenuOptionType, V extends Id = Id> extends SelectBaseProps<O> {
+    multiple: true;
+    defaultValue?: V[];
+    value?: V[];
+    onChange?(value: V[]): void;
+    renderBackfill?(selectedValue: V[]): ReactNode;
+}
+export type SelectProps<O extends MenuOptionType, V extends Id = Id> = SelectSingleProps<O, V> | SelectMultipleProps<O, V>;
+export declare const Select: {
+    <O extends MenuOptionType, V extends Id = Id>(props: SelectProps<O, V>): ReactElement;
+    Option: typeof MenuItem;
+};
+export declare const Option: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<import("../menuItem").MenuItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;

package/dist/esm/components/select/select.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+import { Children, forwardRef, isValidElement, memo, useCallback, useDeferredValue, useMemo, useRef } from 'react';
+import { InputBase } from '../inputBase';
+import { classnames, cloneRef, toArray, useControlled, useControlledSelect } from '../../utils';
+import { classes, style } from './select.style';
+import { Popper } from '../popper';
+import { MenuItem } from '../menuItem';
+import { CaretDownOutlined, SearchOutlined } from '@ant-design/icons';
+import { Tag } from '../tag';
+import { OptionsBase } from '../optionsBase';
+import { Input } from '../input';
+import { LoadingIndicator } from '../loadingIndicator';
+import { popperStyle } from '../popper/popper.style';
+export const Select = memo(forwardRef(({ inputProps, inputRef, popperProps, popperRef, defaultOpen = false, open, onOpenChange, sizeAdaptable = true, children, multiple, defaultValue, value, onChange, renderBackfill, searchable, defaultSearchValue = '', searchValue, onSearchChange, searchInputProps, 
+// 从OptionsBaseSharedProps继承的属性
+showCheckbox = !!multiple, loading, options, labelKey = 'label', primaryKey = 'value', searchTokenKey = 'searchToken', filterPredicate, ...props }, ref) => {
+    const [innerOpen, _setInnerOpen] = useControlled(defaultOpen, open, onOpenChange);
+    const setInnerOpen = (open) => {
+        _setInnerOpen(open);
+        if (!open && document.activeElement === searchInputRef.current) {
+            // 关闭下拉框时，如果焦点在搜索框上，需要移除焦点，避免影响下次打开下拉框
+            searchInputRef.current.blur();
+        }
+    };
+    const openChangeHandler = (open) => {
+        popperProps?.onOpenChange?.(open);
+        setInnerOpen(open);
+    };
+    const openChangeEnd = (open) => {
+        popperProps?.onOpenChangeEnd?.(open);
+        // 关闭动画结束后清空搜索框
+        !open && setInnerSearchValue('');
+    };
+    const searchInputRef = useRef(null);
+    const blurHandler = () => {
+        setTimeout(() => {
+            // 失去焦点后，如果不是聚焦在搜索框，则需要关闭弹框
+            searchInputRef.current !== document.activeElement && setInnerOpen(false);
+        });
+    };
+    const [innerValue, _toggleSelected, setInnerValue] = useControlledSelect({ multiple, defaultValue, value, onChange });
+    const toggleSelected = useCallback((value) => {
+        _toggleSelected(value);
+        // 单选模式下，选中一次就自动关闭弹框
+        !multiple && setInnerOpen(false);
+    }, [multiple]);
+    const clearHandler = () => {
+        props.onClear?.();
+        setInnerValue(multiple ? [] : void 0);
+    };
+    /**
+     * ------------------------------------------------------------------
+     * 搜索
+     */
+    const [innerSearchValue, setInnerSearchValue] = useControlled(defaultSearchValue, searchValue, onSearchChange);
+    const deferredSearchValue = useDeferredValue(innerSearchValue.current);
+    /**
+     * ------------------------------------------------------------------
+     * 渲染部分
+     */
+    const optionsArr = options || Children.map(children, c => isValidElement(c) ? c.props : c) || void 0;
+    const optionsMap = useMemo(() => {
+        const map = new Map();
+        optionsArr?.forEach(opt => {
+            opt && typeof opt === 'object' && map.set(opt[primaryKey], opt);
+        });
+        return map;
+    }, [optionsArr, primaryKey]);
+    const renderBackfillFn = () => {
+        if (renderBackfill) {
+            return renderBackfill(innerValue.current);
+        }
+        if (multiple) {
+            return innerValue.current?.map((v) => _jsx(Tag, { closable: true, onClose: () => toggleSelected(v), children: optionsMap.get(v)?.[labelKey] ?? v }, v));
+        }
+        return (_jsx("div", { className: classes.backfillWrap, children: optionsMap.get(innerValue.current)?.[labelKey] ?? innerValue.current }));
+    };
+    return (_jsx(Popper, { css: popperStyle, open: innerOpen.current, onOpenChange: openChangeHandler, onOpenChangeEnd: openChangeEnd, placement: "bottom", variant: "collapse", trigger: ['click', 'enter'], disabled: props.disabled || props.readOnly, sizeAdaptable: sizeAdaptable, content: _jsxs(_Fragment, { children: [searchable &&
+                    _jsx(Input, { inputRef: searchInputRef, prefix: _jsx(SearchOutlined, {}), placeholder: "\u641C\u7D22", value: innerSearchValue.current, ...searchInputProps, onChange: e => {
+                            searchInputProps?.onChange?.(e);
+                            setInnerSearchValue?.(e.target.value);
+                        }, onBlur: e => {
+                            searchInputProps?.onBlur?.(e);
+                            blurHandler();
+                        } }), _jsx(OptionsBase, { selectedValue: innerValue.current, onToggleSelected: toggleSelected, showCheckbox: showCheckbox, loading: loading, options: options, labelKey: labelKey, primaryKey: primaryKey, searchTokenKey: searchTokenKey, searchValue: deferredSearchValue, filterPredicate: filterPredicate, children: children })] }), ...popperProps, popperRef: popperRef, onPointerDown: e => {
+            popperProps?.onPointerDown?.(e);
+            e.preventDefault();
+        }, children: _jsx(InputBase, { clearable: !!multiple, ...props, ref: ref, css: style, className: classnames(classes.root, props.className), "data-focused": innerOpen.current, value: innerValue.current, onClear: clearHandler, onBlur: blurHandler, children: ({ ref, ...rest }) => _jsxs("div", { className: classes.contentWrap, children: [!toArray(innerValue.current)?.length
+                        ? _jsx("div", { className: classes.placeholder, children: props.placeholder ?? '请选择' })
+                        : _jsx("div", { className: classes.backfill, children: renderBackfillFn() }), _jsx("input", { size: 1, ...rest, ...inputProps, ref: cloneRef(ref, inputRef), "data-hidden": "true" }), _jsx("div", { className: classes.arrow, "data-open": innerOpen.current, children: loading
+                            ? _jsx(LoadingIndicator, {})
+                            : _jsx(CaretDownOutlined, {}) })] }) }) }));
+}));
+export const Option = Select.Option = MenuItem;

package/dist/esm/components/select/select.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/esm/components/select/select.style.js

@@ -0,0 +1,56 @@
+import { css } from '@emotion/react';
+import { defineCss, defineClasses } from '../../utils';
+import { classes as tagClasses } from '../tag/tag.style';
+export const classes = defineClasses('select', [
+    'contentWrap',
+    'placeholder',
+    'arrow',
+    'backfill',
+    'backfillWrap'
+]);
+export const style = defineCss(({ spacing, text, easing }) => css `
+    cursor: pointer;
+    position: relative;
+
+    .${classes.contentWrap} {
+        display: flex;
+        align-items: center;
+        gap: ${spacing[1]}px;
+    }
+
+    .${classes.placeholder} {
+        flex: 1;
+        color: ${text.placeholder};
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+
+    .${classes.arrow} {
+        color: ${text.placeholder};
+        transition: transform .2s ${easing.easeOut};
+
+        &[data-open=true] {
+            transform: rotate(180deg);
+        }
+    }
+
+    .${classes.backfill} {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-wrap: wrap;
+        gap: ${spacing[1]}px;
+
+        .${tagClasses.root} {
+            min-width: 0;
+        }
+
+        .${tagClasses.content},
+        .${classes.backfillWrap} {
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+    }
+`);

package/dist/esm/components/selectedList/index.d.ts

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

package/dist/esm/components/selectedList/index.js

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

package/dist/esm/components/selectedList/selectedList.d.ts

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+import { DIVProps, Id } from '../../../types';
+import { AlertProps } from '../alert';
+export interface SelectedListProps<V extends Id = Id> extends DIVProps {
+    value?: V[];
+    itemProps?(value: V, index: number): AlertProps | Promise<AlertProps>;
+    onClose?(value: V, index: number): void;
+}
+export declare const SelectedList: <V extends Id = Id>(props: SelectedListProps<V>) => ReactElement;

package/dist/esm/components/selectedList/selectedList.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef, memo, useMemo } from 'react';
+import { classnames, toArray, useLoading, useSyncState } from '../../utils';
+import { classes, style } from './selectedList.style';
+import { Alert } from '../alert';
+import { TransitionGroup } from 'react-transition-group';
+import { useSelectionContext } from '../selectionContext';
+import { Collapse } from '../transitionBase';
+export const SelectedList = memo(forwardRef(({ value, itemProps, onClose, ...props }, ref) => {
+    const { innerValue, setInnerValue } = useSelectionContext();
+    const arr = toArray(value || innerValue?.current);
+    const closeHandler = (v, i) => {
+        onClose?.(v, i);
+        setInnerValue?.(arr?.filter(_v => _v !== v));
+    };
+    return (_jsx(TransitionGroup, { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), children: arr?.map((v, i) => _jsx(SelectedItem, { value: v, index: i, itemProps: itemProps, onClose: closeHandler }, v)) }));
+}));
+function SelectedItem({ value, index, itemProps, onClose, ...collapseProps }) {
+    const [alertProps, setAlertProps] = useSyncState();
+    const [loading, requestFn] = useLoading(async () => {
+        itemProps && setAlertProps(await itemProps(value, index));
+    });
+    useMemo(requestFn, []);
+    const closeHandler = (e) => {
+        alertProps.current?.onClose?.(e);
+        onClose?.(value, index);
+    };
+    return (_jsx(Collapse, { ...collapseProps, className: classes.option, children: _jsx(Alert, { closable: true, color: "info", showIcon: false, ...alertProps.current, className: classnames(classes.optionWrap, alertProps.current?.className), onClose: closeHandler, loading: loading.current }) }));
+}

package/dist/esm/components/selectedList/selectedList.style.d.ts

@@ -0,0 +1,7 @@
+export declare const classes: {
+    option: string;
+    optionWrap: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;

package/dist/esm/components/selectedList/selectedList.style.js

@@ -0,0 +1,18 @@
+import { css } from '@emotion/react';
+import { defineClasses, defineCss } from '../../utils';
+import { classes as alertClasses } from '../alert/alert.style';
+export const classes = defineClasses('selected-list', [
+    'option',
+    'optionWrap'
+]);
+export const style = defineCss(({ spacing }) => css `
+    \.${classes.option}:not(:last-of-type) .${classes.optionWrap} {
+        margin-bottom: ${spacing[3]}px;
+    }
+
+    .${alertClasses.title}, .${alertClasses.description} {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+`);

package/dist/esm/components/selectionContext/index.d.ts

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

package/dist/esm/components/selectionContext/index.js

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

package/dist/esm/components/selectionContext/selectionContext.d.ts

@@ -0,0 +1,59 @@
+import { Dispatch, MutableRefObject, ReactNode, SetStateAction } from 'react';
+import { Id, Obj } from '../../../types';
+export interface OptionType<V extends Id = Id> extends Obj {
+    children?: OptionType<V>[];
+    _parentId?: V;
+}
+export type SelectionContextBaseProps<O extends OptionType<V>, V extends Id = Id> = {
+    options?: O[];
+    /** @default "id" */
+    primaryKey?: keyof O;
+    childrenKey?: keyof O;
+    /**
+     * 节点之间的关系
+     * @enum {"dependent"}：会自动判断子父节点的选中关系。
+     * @enum {"standalone"}：所有节点相互独立。
+     * @default "dependent"
+     */
+    relation?: 'dependent' | 'standalone';
+    /**
+     * 选中值的整合方式，relation为'dependent'时生效
+     * @enum {"shallowest"}：尽可能向上归集。
+     * @enum {"deepest"}：尽可能向下展开。
+     * @enum {"all"}：所有选中的值。
+     * @default "shallowest"
+     */
+    integration?: 'shallowest' | 'deepest' | 'all';
+    /** 单选模式必须指定clearable才能清空选择 */
+    clearable?: boolean;
+    disabled?: boolean;
+    onToggle?(checked: boolean, value: V, option?: O): void;
+    children?: ReactNode;
+};
+export interface SelectionContextSingleProps<O extends OptionType<V>, V extends Id = Id> extends SelectionContextBaseProps<O, V> {
+    multiple?: false;
+    defaultValue?: V;
+    value?: V;
+    onChange?(value: V): void;
+}
+export interface SelectionContextMultipleProps<O extends OptionType<V>, V extends Id = Id> extends SelectionContextBaseProps<O, V> {
+    multiple: true;
+    defaultValue?: V[];
+    value?: V[];
+    onChange?(value: V[]): void;
+}
+export type SelectionContextProps<O extends OptionType<V>, V extends Id = Id> = SelectionContextSingleProps<O, V> | SelectionContextMultipleProps<O, V>;
+export type ISelectionContext<O extends OptionType<V>, V extends Id = Id> = {
+    inSelection?: true;
+    disabled?: boolean;
+    innerValue?: MutableRefObject<undefined | V | V[]>;
+    setInnerValue?: Dispatch<SetStateAction<undefined | V | V[]>>;
+    innerOptions?: MutableRefObject<undefined | O[]>;
+    setInnerOptions?: Dispatch<SetStateAction<undefined | O[]>>;
+    optionsMap?: Map<V, O>;
+    selectionStatus?: Map<V, 1 | 2>;
+    toggleSelected?(value: V, option?: O): void;
+    onToggle?(checked: boolean, value: V, option?: O): void;
+};
+export declare function useSelectionContext<O extends OptionType<V>, V extends Id = Id>(): ISelectionContext<O, V>;
+export declare function SelectionContext<O extends OptionType<V>, V extends Id = Id>(props: SelectionContextProps<O, V>): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/esm/components/selectionContext/selectionContext.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { createContext, useContext, useMemo } from 'react';
+import { useTreeSelect } from './selectionHook';
+const selectionContext = createContext({});
+export function useSelectionContext() {
+    return useContext(selectionContext);
+}
+export function SelectionContext(props) {
+    const treeSelect = useTreeSelect(props);
+    return (_jsx(selectionContext.Provider, { value: useMemo(() => ({
+            inSelection: true, disabled: props.disabled,
+            ...treeSelect
+        }), [treeSelect.selectionStatus, props.disabled]), children: props.children }));
+}

package/dist/esm/components/selectionContext/selectionHook.d.ts

@@ -0,0 +1,11 @@
+import { OptionType, SelectionContextProps } from './selectionContext';
+import { Id } from '../../../types';
+export declare function useTreeSelect<O extends OptionType<V>, V extends Id = Id>({ ...props }: Omit<SelectionContextProps<O, V>, 'children'>): {
+    innerValue: import("react").MutableRefObject<V | V[] | undefined>;
+    setInnerValue: import("react").Dispatch<import("react").SetStateAction<V | V[] | undefined>>;
+    innerOptions: import("react").MutableRefObject<O[] | undefined>;
+    setInnerOptions: import("react").Dispatch<import("react").SetStateAction<O[] | undefined>>;
+    optionsMap: Map<V, O>;
+    selectionStatus: Map<V, 1 | 2>;
+    toggleSelected: (value: V, option?: O) => void;
+};