@canlooks/can-ui 0.0.1

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

@@ -0,0 +1,190 @@
+import { useMemo, useRef, useCallback } from 'react';
+import { isUnset, toArray, useControlled, useDerivedState, useSync } from '../../utils';
+import { useSelectionContext } from './selectionContext';
+export function useTreeSelect({ ...props }) {
+    props.primaryKey ??= 'id';
+    props.childrenKey ??= 'children';
+    props.relation ??= 'dependent';
+    props.integration ??= 'shallowest';
+    const { options, primaryKey, childrenKey, relation, multiple, defaultValue, value, onChange, } = props;
+    let [innerValue, setInnerValue] = useControlled(defaultValue, value, onChange);
+    let [innerOptions, setInnerOptions] = useDerivedState(options);
+    /**
+     * ----------------------------------------------------------------
+     * 若嵌套在另个一SelectionContext内，取外层数据
+     */
+    const context = useSelectionContext();
+    if (context.inSelection) {
+        innerValue = context.innerValue;
+        setInnerValue = context.setInnerValue;
+        innerOptions = context.innerOptions;
+    }
+    const optionsMap = useMemo(() => {
+        if (context.inSelection) {
+            return context.optionsMap;
+        }
+        const map = new Map();
+        const fn = (arr, parentId) => {
+            // 有时arr可能不为数组，需要判断，如DataGrid组件的row.children
+            Array.isArray(arr) && arr.forEach(item => {
+                item._parentId = parentId;
+                const id = item[primaryKey];
+                !isUnset(id) && map.set(id, item);
+                fn(item[childrenKey], id);
+            });
+        };
+        fn(innerOptions.current);
+        return map;
+    }, [innerOptions.current, primaryKey, childrenKey, context.optionsMap]);
+    const syncProps = useSync(props);
+    const calSelectionStatus = (selectedSet = new Set(toArray(innerValue.current))) => {
+        const { multiple, relation, primaryKey, childrenKey } = syncProps.current;
+        const map = new Map();
+        for (const k of selectedSet) {
+            !isUnset(k) && map.set(k, 2);
+        }
+        if (multiple && relation === 'dependent') {
+            const fn = (arr, parentSelected) => {
+                // 双倍计数，便于处理半选状态
+                let doubleSelectedCount = 0;
+                // 有时arr可能不为数组，需要判断，如DataGrid组件的row.children
+                Array.isArray(arr) && arr.forEach(item => {
+                    const id = item[primaryKey];
+                    if (isUnset(id)) {
+                        return;
+                    }
+                    // 父节点选中则认为当前节点也选中
+                    let currentSelected = parentSelected || selectedSet.has(id);
+                    const children = item[childrenKey];
+                    const doubleSelectedChildren = fn(children, currentSelected);
+                    // 若子节点全部选中，当前节点状态也为选中
+                    currentSelected ||= doubleSelectedChildren > 0 && doubleSelectedChildren === (children.length || 0) * 2;
+                    if (currentSelected) {
+                        // 选中，计数加2
+                        map.set(id, 2);
+                        doubleSelectedCount += 2;
+                    }
+                    else if (doubleSelectedChildren > 0) {
+                        // 半选中，计数加1
+                        map.set(id, 1);
+                        doubleSelectedCount++;
+                    }
+                });
+                return doubleSelectedCount;
+            };
+            fn(innerOptions.current);
+        }
+        return map;
+    };
+    const preCalSelectionStatus = useRef();
+    const selectionStatus = useMemo(() => {
+        if (context.inSelection) {
+            return context.selectionStatus;
+        }
+        // 调用toggleSelected()方法后可能会预先计算selectionStatus
+        const ret = preCalSelectionStatus.current || calSelectionStatus();
+        preCalSelectionStatus.current = void 0;
+        return ret;
+    }, [innerValue.current, optionsMap, multiple, relation, context.selectionStatus]);
+    const syncSelectionStatus = useSync(selectionStatus);
+    const toggleSelected = useCallback((value, option) => {
+        if (context.inSelection) {
+            context.toggleSelected(value, option);
+            return;
+        }
+        const { disabled, onToggle, multiple, relation, integration, primaryKey, childrenKey, clearable } = syncProps.current;
+        if (disabled) {
+            return;
+        }
+        const selectionStatus = syncSelectionStatus.current;
+        const currentSelected = selectionStatus.get(value) === 2;
+        onToggle?.(!currentSelected, value, option);
+        if (!multiple) {
+            if (!currentSelected) {
+                setInnerValue(value);
+            }
+            else if (clearable) {
+                // 单选模式必须指定clearable才能清空选择
+                setInnerValue(void 0);
+            }
+            return;
+        }
+        // multiple
+        if (relation === 'standalone') {
+            setInnerValue((o) => {
+                const arr = toArray(o) || [];
+                return currentSelected
+                    ? arr.filter(v => v !== value)
+                    : [...arr, value];
+            });
+            return;
+        }
+        // relation === 'dependent'
+        /**
+         * 通用的递归方法
+         * @param callback
+         * @param arr
+         * @param payload
+         */
+        const loopOptions = (callback, arr = innerOptions.current, payload) => {
+            arr?.forEach(item => {
+                const id = item[primaryKey];
+                if (isUnset(id)) {
+                    return;
+                }
+                let children = item[childrenKey];
+                children = Array.isArray(children) && children.length ? children : null;
+                const ret = callback(id, children, payload);
+                children && loopOptions(callback, children, ret);
+            });
+        };
+        const deepestSelectedSet = new Set(toArray(innerValue.current));
+        loopOptions((id, children, parentModifiedTo) => {
+            // 父节点已修改，子节点同步修改；
+            const modifyTo = typeof parentModifiedTo === 'boolean' ? parentModifiedTo
+                // 当前为目标节点，直接修改
+                : id === value ? !currentSelected
+                    : void 0;
+            if (children) {
+                // 有children，优先向下递归，并从已选中删除
+                deepestSelectedSet.delete(id);
+            }
+            else if (modifyTo === false) {
+                deepestSelectedSet.delete(id);
+            }
+            else {
+                modifyTo === true || selectionStatus.get(id) === 2
+                    ? deepestSelectedSet.add(id)
+                    : deepestSelectedSet.delete(id);
+            }
+            return modifyTo;
+        });
+        if (integration !== 'deepest') {
+            const newStatus = preCalSelectionStatus.current = calSelectionStatus(deepestSelectedSet);
+            if (integration === 'shallowest') {
+                loopOptions((id, _, parentSelected) => {
+                    const selected = newStatus.get(id) === 2;
+                    !parentSelected && selected
+                        // 父节点未选中，子节点选中，表示该子节点为最上层选中节点，满足shallowest
+                        ? deepestSelectedSet.add(id)
+                        : deepestSelectedSet.delete(id);
+                    return parentSelected || selected;
+                });
+            }
+            else {
+                // integration === 'all'
+                for (const [id, status] of newStatus) {
+                    status === 2
+                        ? deepestSelectedSet.add(id)
+                        : deepestSelectedSet.delete(id);
+                }
+            }
+        }
+        setInnerValue([...deepestSelectedSet]);
+    }, [context.inSelection]);
+    return {
+        innerValue, setInnerValue,
+        innerOptions, setInnerOptions,
+        optionsMap, selectionStatus, toggleSelected
+    };
+}

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

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

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

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

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

@@ -0,0 +1,32 @@
+import { ReactElement } from 'react';
+import { DIVProps } from '../../../types';
+type SkeletonSharedProps = {
+    /** @default "rounded" */
+    variant?: 'circular' | 'rectangular' | 'rounded';
+    /** 是否播放动画，@default false */
+    animation?: boolean;
+};
+export interface SkeletonProps extends SkeletonSharedProps, DIVProps {
+    width?: string | number;
+    height?: string | number;
+}
+export declare const Skeleton: {
+    (props: SkeletonProps): ReactElement;
+    Card: typeof SkeletonCard;
+    Table: typeof SkeletonTable;
+};
+export interface SkeletonCardProps extends SkeletonSharedProps, DIVProps {
+    /** @default false */
+    showAvatar?: boolean;
+    /** @default true */
+    showTitle?: boolean;
+    /** @default 3 */
+    rows?: number;
+}
+export declare const SkeletonCard: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<SkeletonCardProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
+export interface SkeletonTableProps extends SkeletonSharedProps, Partial<JSX.IntrinsicElements['table']> {
+    columns?: number;
+    rows?: number;
+}
+export declare const SkeletonTable: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<SkeletonTableProps, "ref"> & import("react").RefAttributes<HTMLTableElement>>>;
+export {};

package/dist/esm/components/skeleton/skeleton.js

@@ -0,0 +1,34 @@
+import { createElement as _createElement } from "@emotion/react";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { forwardRef, memo } from 'react';
+import { classnames } from '../../utils';
+import { articalStyle, classes, style, tableStyle } from './skeleton.style';
+export const Skeleton = memo(forwardRef(({ variant = 'rounded', animation = true, width, height, ...props }, ref) => {
+    return (_jsx("div", { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), style: {
+            width,
+            height,
+            ...props.style
+        }, "data-variant": variant, "data-animation": animation, children: !!props.children &&
+            _jsx("div", { className: classes.children, children: props.children }) }));
+}));
+export const SkeletonCard = memo(forwardRef(({ showAvatar, showTitle = true, rows = 3, variant = 'rounded', animation = true, ...props }, ref) => {
+    const commonProps = { variant, animation };
+    return (_jsxs("div", { ...props, ref: ref, css: articalStyle, className: classnames(classes.artical, props.className), children: [_jsx("div", { className: classes.avatar, children: _jsx(Skeleton, { variant: "circular" }) }), _jsxs("div", { className: classes.text, children: [showTitle &&
+                        _jsx(Skeleton, { ...commonProps, style: {
+                                width: '80%',
+                                height: 24,
+                                margin: '4px 0 2em'
+                            } }), Array(rows).fill(void 0).map((_, i) => _createElement(Skeleton, { ...commonProps, key: i, style: i === rows - 1 ? { width: '60%' } : void 0 }))] })] }));
+}));
+Skeleton.Card = SkeletonCard;
+export const SkeletonTable = memo(forwardRef(({ columns = 3, rows = 4, variant = 'rounded', animation = true, ...props }, ref) => {
+    const commonProps = { variant, animation };
+    const renderCols = () => {
+        return Array(columns).fill(void 0).map((_, i) => _jsx("td", { children: _jsx(Skeleton, { ...commonProps }) }, i));
+    };
+    const renderRows = () => {
+        return Array(rows).fill(void 0).map((_, i) => _jsx("tr", { children: renderCols() }, i));
+    };
+    return (_jsx("table", { ...props, ref: ref, css: tableStyle, className: classnames(classes.table, props.className), children: _jsx("tbody", { children: renderRows() }) }));
+}));
+Skeleton.Table = SkeletonTable;

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

@@ -0,0 +1,12 @@
+export declare const classes: {
+    text: string;
+    children: string;
+    table: string;
+    artical: string;
+    avatar: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;
+export declare const articalStyle: () => import("@emotion/react").SerializedStyles;
+export declare const tableStyle: () => import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,87 @@
+import { css, keyframes } from '@emotion/react';
+import { defineClasses, defineCss } from '../../utils';
+export const classes = defineClasses('skeleton', [
+    'children',
+    'artical',
+    'avatar',
+    'text',
+    'table'
+]);
+export const style = defineCss(({ spacing, mode, gray, borderRadius }) => css `
+    display: flex;
+    background-color: ${gray(.08)};
+    position: relative;
+    overflow: hidden;
+
+    .${classes.children} {
+        padding: ${spacing[1]}px ${spacing[4]}px;
+        z-index: 1;
+    }
+
+    &:not(:has(.${classes.children})) {
+        height: 1em;
+    }
+
+    &:not([data-variant=circular]):not(:first-of-type) {
+        margin-top: 1em;
+    }
+
+    &[data-variant=rounded] {
+        border-radius: ${borderRadius}px;
+    }
+
+    &[data-variant=circular] {
+        display: inline-flex;
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+    }
+
+    &[data-animation=true] {
+        &:after {
+            content: '';
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            top: 0;
+            background-image: linear-gradient(90deg, transparent, ${mode === 'light' ? '#ffffff' : gray(.2)}, transparent);
+            animation: ${anim} 1.8s infinite;
+        }
+    }
+`);
+const anim = keyframes `
+    0% {
+        left: -100%;
+    }
+
+    100% {
+        left: 100%;
+    }
+`;
+export const articalStyle = defineCss(({ spacing }) => css `
+    display: flex;
+    gap: ${spacing[4]}px;
+
+    .${classes.text} {
+        flex: 1
+    }
+`);
+export const tableStyle = defineCss(({ spacing }) => css `
+    width: 100%;
+    border-spacing: ${spacing[4]}px;
+
+    tr:first-of-type {
+        .${classes.root} {
+            height: 24px;
+            margin-bottom: ${spacing[3]}px;
+        }
+    }
+
+    td {
+        padding: 0;
+
+        &:last-of-type {
+            width: 10%;
+        }
+    }
+`);

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

@@ -0,0 +1,2 @@
+export * from './slidableActions';
+export * from './slidableActionsAction';

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

@@ -0,0 +1,2 @@
+export * from './slidableActions';
+export * from './slidableActionsAction';

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

@@ -0,0 +1,27 @@
+import { ReactElement } from 'react';
+import { DIVProps } from '../../../types';
+import { DraggableOptions } from '../../utils';
+import { SlidableActionsAction, SlidableActionsActionProps } from './slidableActionsAction';
+export declare function useSlidableActionsContext(): {
+    actionsContainer: (HTMLElement | null)[];
+    translate: number;
+    maxDistance: number;
+};
+type ActionType = SlidableActionsActionProps | ReactElement;
+export interface SlidableActionsProps extends DIVProps {
+    /** 元素弹性移动距离，@default 24 */
+    bounceElementTranslate?: number;
+    /** 手指弹性拖拽距离，@default 240 */
+    bounceDragDistance?: number;
+    /** 滑动生效的速度，@default 450 (px/s) */
+    effectiveSpeed?: number;
+    leftActions?: ActionType | ActionType[];
+    rightActions?: ActionType | ActionType[];
+    disabled?: boolean;
+    draggableOptions?: DraggableOptions<HTMLDivElement>;
+}
+export declare const SlidableActions: {
+    (props: SlidableActionsProps): ReactElement;
+    Action: typeof SlidableActionsAction;
+};
+export {};

package/dist/esm/components/slidableActions/slidableActions.js

@@ -0,0 +1,127 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { cloneElement, createContext, forwardRef, isValidElement, memo, useContext, useMemo, useRef, useState } from 'react';
+import { ClickAway } from '../clickAway';
+import { classes, style } from './slidableActions.style';
+import { cubicBezier, classnames, useSyncState, range, useDraggableHandle, toArray } from '../../utils';
+import { SlidableActionsAction } from './slidableActionsAction';
+const bezier = cubicBezier(0, 0, 0, 1);
+const slidableActionsContext = createContext({
+    actionsContainer: [],
+    translate: 0,
+    maxDistance: 0
+});
+export function useSlidableActionsContext() {
+    return useContext(slidableActionsContext);
+}
+export const SlidableActions = memo(forwardRef(({ bounceElementTranslate = 24, bounceDragDistance = 240, effectiveSpeed = 450, leftActions, rightActions, disabled, draggableOptions, ...props }, ref) => {
+    const leftActionsContainer = useRef([]);
+    const rightActionsContainer = useRef([]);
+    const [distanceRange, setDistanceRange] = useSyncState([0, 0]);
+    const getDistanceRange = () => {
+        const fn = (container) => {
+            return container.reduce((prev, el) => {
+                return prev + (el?.offsetWidth || 0);
+            }, 0);
+        };
+        setDistanceRange([
+            -fn(rightActionsContainer.current),
+            fn(leftActionsContainer.current)
+        ]);
+    };
+    const [translate, setTranslate] = useState(0);
+    const [dragging, setDragging] = useState(false);
+    const startTranslate = useRef(0);
+    const draggableHandle = useDraggableHandle({
+        ...draggableOptions,
+        disabled,
+        disableNativeTouchMove: true,
+        onDragStart(e) {
+            draggableOptions?.onDragStart?.(e);
+            setDragging(true);
+            startTranslate.current = translate;
+            getDistanceRange();
+        },
+        onDrag(info, e) {
+            draggableOptions?.onDrag?.(info, e);
+            const [min, max] = distanceRange.current;
+            const bounceMin = min < 0 ? min - bounceDragDistance : min;
+            const bounceMax = max > 0 ? max + bounceDragDistance : max;
+            let newTranslate = range(startTranslate.current + info.deltaX, bounceMin, bounceMax);
+            // 拖拽超过正常距离，模拟弹性
+            if (newTranslate < min) {
+                newTranslate = min - bezier(-(newTranslate - min) / bounceDragDistance) * bounceElementTranslate;
+            }
+            else if (newTranslate > max) {
+                newTranslate = max + bezier((newTranslate - max) / bounceDragDistance) * bounceElementTranslate;
+            }
+            setTranslate(newTranslate);
+        },
+        onDragEnd(info) {
+            draggableOptions?.onDragEnd?.(info);
+            setDragging(false);
+            const start = startTranslate.current;
+            const [min, max] = distanceRange.current;
+            const isSpeedSatisfied = () => effectiveSpeed && info.speedX * 1000 >= effectiveSpeed;
+            // 拖拽距离达到一半，或者满足速度要求
+            if (start < 0) {
+                if (translate > start && (translate >= min / 2 || isSpeedSatisfied())) {
+                    return translate <= max / 2
+                        // 原本在左边，右划满足条件，还原为0
+                        ? setTranslate(0)
+                        // 直接从最左边滑动至最右边
+                        : setTranslate(max);
+                }
+            }
+            else if (start > 0) {
+                if (translate < start && (translate <= max / 2 || isSpeedSatisfied())) {
+                    return translate >= min / 2
+                        ? setTranslate(0)
+                        : setTranslate(min);
+                }
+            }
+            else {
+                // 原本在中间
+                if (translate < min / 2 || translate > max / 2 || isSpeedSatisfied()) {
+                    return setTranslate(info.deltaX > 0 ? max : min);
+                }
+            }
+            // 未满足条件，返回原位
+            setTranslate(startTranslate.current);
+        },
+        onDragCancel(info) {
+            draggableOptions?.onDragCancel?.(info);
+            setDragging(false);
+            const [min, max] = distanceRange.current;
+            translate < min / 2 && translate > max / 2
+                ? setTranslate(translate > 0 ? max : min)
+                : setTranslate(0);
+        }
+    });
+    const onClickAway = () => {
+        translate && setTranslate(0);
+    };
+    const renderActions = (actions) => {
+        return toArray(actions)?.map((child, _index) => {
+            return isValidElement(child)
+                ? cloneElement(child, {
+                    key: child.key || _index,
+                    _index
+                })
+                : typeof child === 'object' && child
+                    ? _jsx(SlidableActionsAction, { ...child, _index: _index }, _index)
+                    : child;
+        });
+    };
+    return (_jsx(ClickAway, { eventType: "pointerdown", onClickAway: onClickAway, children: _jsxs("div", { ref: ref, css: style, className: classnames(classes.root, props.className), "data-dragging": dragging, children: [_jsx("div", { className: classes.content, ...draggableHandle, style: { translate: `${translate}px 0` }, children: props.children }), _jsxs("div", { className: classes.actions, children: [_jsx(slidableActionsContext.Provider, { value: useMemo(() => ({
+                                actionsContainer: leftActionsContainer.current,
+                                translate,
+                                maxDistance: distanceRange.current[1]
+                            }), [translate, distanceRange.current]), children: _jsx("div", { className: classes.actionsLeft, children: !!leftActions &&
+                                    renderActions(leftActions) }) }), _jsx(slidableActionsContext.Provider, { value: useMemo(() => ({
+                                actionsContainer: rightActionsContainer.current,
+                                translate,
+                                maxDistance: -distanceRange.current[0]
+                            }), [translate, distanceRange.current]), children: _jsx("div", { className: classes.actionsRight, children: !!rightActions &&
+                                    renderActions(rightActions) }) })] })] }) }));
+}));
+SlidableActions.Action = SlidableActionsAction;

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

@@ -0,0 +1,12 @@
+export declare const classes: {
+    content: string;
+    actions: string;
+    actionsLeft: string;
+    actionsRight: string;
+    actionItem: string;
+    actionItemWrap: string;
+    actionItemIcon: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,81 @@
+import { css } from '@emotion/react';
+import { defineClasses, defineCss } from '../../utils';
+export const classes = defineClasses('slidable-actions', [
+    'content',
+    'actions',
+    'actionsLeft',
+    'actionsRight',
+    'actionItem',
+    'actionItemWrap',
+    'actionItemIcon'
+]);
+export const style = defineCss(({ background }) => css `
+    position: relative;
+    overflow: hidden;
+    
+    .${classes.content} {
+        touch-action: pan-y;
+        position: relative;
+        z-index: 1;
+    }
+    
+    .${classes.actions} {
+        position: absolute;
+        inset: 0;
+    
+        .${classes.actionsLeft}, .${classes.actionsRight} {
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            top: 0;
+    
+            .${classes.actionItem} {
+                width: 100%;
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                color: ${background.card};
+                position: absolute;
+                top: 0;
+    
+                .${classes.actionItemWrap} {
+                    flex: 1;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    justify-content: center;
+                    padding: 0 18px;    
+                }
+    
+                .${classes.actionItemIcon} {
+                    display: flex;
+                }
+            }
+        }
+    
+        .${classes.actionsLeft} {
+            right: 100%;
+    
+            .${classes.actionItem} {
+                align-items: flex-end;
+                right: 0;
+            }
+        }
+    
+        .${classes.actionsRight} {
+            left: 100%;
+    
+            .${classes.actionItem} {
+                align-items: flex-start;
+                left: 0;
+            }
+        }
+    }
+
+    &:not([data-dragging=true]) {
+        .${classes.content}, .${classes.actionItem} {
+            transition: translate .25s ease-out;
+        }
+    }
+`);

package/dist/esm/components/slidableActions/slidableActionsAction.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode, Ref } from 'react';
+import { ColorPropsValue, DIVProps } from '../../../types';
+import { ButtonProps } from '../button';
+export interface SlidableActionsActionProps extends DIVProps {
+    color?: ColorPropsValue;
+    label?: ReactNode;
+    icon?: ReactNode;
+    buttonProps?: Omit<ButtonProps, 'onClick'>;
+    buttonRef?: Ref<HTMLButtonElement>;
+    /** @private */
+    _index?: number;
+}
+export declare const SlidableActionsAction: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<SlidableActionsActionProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;

package/dist/esm/components/slidableActions/slidableActionsAction.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef, memo, useEffect, useMemo, useRef } from 'react';
+import { Button } from '../button';
+import { classes } from './slidableActions.style';
+import { classnames, cloneRef, colorTransfer } from '../../utils';
+import { useTheme } from '../app';
+import { useSlidableActionsContext } from './slidableActions';
+export const SlidableActionsAction = memo(forwardRef(({ color = 'default', label, icon, buttonProps, buttonRef, _index, ...props }, ref) => {
+    const { actionsContainer, translate, maxDistance } = useSlidableActionsContext();
+    const innerButtonRef = useRef(null);
+    useEffect(() => {
+        actionsContainer[_index] = innerButtonRef.current;
+        return () => {
+            actionsContainer[_index] = null;
+        };
+    });
+    const currentTranslate = useMemo(() => {
+        if (!maxDistance) {
+            return 0;
+        }
+        const prevWidth = actionsContainer.slice(0, _index).reduce((prevWidth, currentEl) => {
+            return currentEl ? prevWidth + currentEl.offsetWidth : prevWidth;
+        }, 0);
+        return (1 - prevWidth / maxDistance) * translate;
+    }, [translate, maxDistance, _index]);
+    const theme = useTheme();
+    const backgroundColor = useMemo(() => {
+        return color === 'default'
+            ? '#aaaaaa'
+            : colorTransfer(color, theme);
+    }, [color, theme]);
+    return (_jsx("div", { ...props, ref: ref, className: classes.actionItem, style: {
+            translate: `${currentTranslate}px 0`,
+            backgroundColor
+        }, children: _jsx(Button, { ref: cloneRef(buttonRef, innerButtonRef), ...buttonProps, className: classnames(classes.actionItemWrap, buttonProps?.className), prefix: icon, variant: "plain", color: "inverse", children: label }) }));
+}));