@canlooks/can-ui 0.0.1

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

@@ -0,0 +1,193 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTreeSelect = useTreeSelect;
+const react_1 = require("react");
+const utils_1 = require("../../utils");
+const selectionContext_1 = require("./selectionContext");
+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] = (0, utils_1.useControlled)(defaultValue, value, onChange);
+    let [innerOptions, setInnerOptions] = (0, utils_1.useDerivedState)(options);
+    /**
+     * ----------------------------------------------------------------
+     * 若嵌套在另个一SelectionContext内，取外层数据
+     */
+    const context = (0, selectionContext_1.useSelectionContext)();
+    if (context.inSelection) {
+        innerValue = context.innerValue;
+        setInnerValue = context.setInnerValue;
+        innerOptions = context.innerOptions;
+    }
+    const optionsMap = (0, react_1.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];
+                !(0, utils_1.isUnset)(id) && map.set(id, item);
+                fn(item[childrenKey], id);
+            });
+        };
+        fn(innerOptions.current);
+        return map;
+    }, [innerOptions.current, primaryKey, childrenKey, context.optionsMap]);
+    const syncProps = (0, utils_1.useSync)(props);
+    const calSelectionStatus = (selectedSet = new Set((0, utils_1.toArray)(innerValue.current))) => {
+        const { multiple, relation, primaryKey, childrenKey } = syncProps.current;
+        const map = new Map();
+        for (const k of selectedSet) {
+            !(0, utils_1.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 ((0, utils_1.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 = (0, react_1.useRef)();
+    const selectionStatus = (0, react_1.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 = (0, utils_1.useSync)(selectionStatus);
+    const toggleSelected = (0, react_1.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 = (0, utils_1.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 ((0, utils_1.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((0, utils_1.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/cjs/components/skeleton/index.d.ts

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

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

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

package/dist/cjs/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/cjs/components/skeleton/skeleton.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SkeletonTable = exports.SkeletonCard = exports.Skeleton = void 0;
+const react_1 = require("@emotion/react");
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_2 = require("react");
+const utils_1 = require("../../utils");
+const skeleton_style_1 = require("./skeleton.style");
+exports.Skeleton = (0, react_2.memo)((0, react_2.forwardRef)(({ variant = 'rounded', animation = true, width, height, ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: ref, css: skeleton_style_1.style, className: (0, utils_1.classnames)(skeleton_style_1.classes.root, props.className), style: {
+            width,
+            height,
+            ...props.style
+        }, "data-variant": variant, "data-animation": animation, children: !!props.children &&
+            (0, jsx_runtime_1.jsx)("div", { className: skeleton_style_1.classes.children, children: props.children }) }));
+}));
+exports.SkeletonCard = (0, react_2.memo)((0, react_2.forwardRef)(({ showAvatar, showTitle = true, rows = 3, variant = 'rounded', animation = true, ...props }, ref) => {
+    const commonProps = { variant, animation };
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: ref, css: skeleton_style_1.articalStyle, className: (0, utils_1.classnames)(skeleton_style_1.classes.artical, props.className), children: [(0, jsx_runtime_1.jsx)("div", { className: skeleton_style_1.classes.avatar, children: (0, jsx_runtime_1.jsx)(exports.Skeleton, { variant: "circular" }) }), (0, jsx_runtime_1.jsxs)("div", { className: skeleton_style_1.classes.text, children: [showTitle &&
+                        (0, jsx_runtime_1.jsx)(exports.Skeleton, { ...commonProps, style: {
+                                width: '80%',
+                                height: 24,
+                                margin: '4px 0 2em'
+                            } }), Array(rows).fill(void 0).map((_, i) => (0, react_1.createElement)(exports.Skeleton, { ...commonProps, key: i, style: i === rows - 1 ? { width: '60%' } : void 0 }))] })] }));
+}));
+exports.Skeleton.Card = exports.SkeletonCard;
+exports.SkeletonTable = (0, react_2.memo)((0, react_2.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) => (0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)(exports.Skeleton, { ...commonProps }) }, i));
+    };
+    const renderRows = () => {
+        return Array(rows).fill(void 0).map((_, i) => (0, jsx_runtime_1.jsx)("tr", { children: renderCols() }, i));
+    };
+    return ((0, jsx_runtime_1.jsx)("table", { ...props, ref: ref, css: skeleton_style_1.tableStyle, className: (0, utils_1.classnames)(skeleton_style_1.classes.table, props.className), children: (0, jsx_runtime_1.jsx)("tbody", { children: renderRows() }) }));
+}));
+exports.Skeleton.Table = exports.SkeletonTable;

package/dist/cjs/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/cjs/components/skeleton/skeleton.style.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tableStyle = exports.articalStyle = exports.style = exports.classes = void 0;
+const react_1 = require("@emotion/react");
+const utils_1 = require("../../utils");
+exports.classes = (0, utils_1.defineClasses)('skeleton', [
+    'children',
+    'artical',
+    'avatar',
+    'text',
+    'table'
+]);
+exports.style = (0, utils_1.defineCss)(({ spacing, mode, gray, borderRadius }) => (0, react_1.css) `
+    display: flex;
+    background-color: ${gray(.08)};
+    position: relative;
+    overflow: hidden;
+
+    .${exports.classes.children} {
+        padding: ${spacing[1]}px ${spacing[4]}px;
+        z-index: 1;
+    }
+
+    &:not(:has(.${exports.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 = (0, react_1.keyframes) `
+    0% {
+        left: -100%;
+    }
+
+    100% {
+        left: 100%;
+    }
+`;
+exports.articalStyle = (0, utils_1.defineCss)(({ spacing }) => (0, react_1.css) `
+    display: flex;
+    gap: ${spacing[4]}px;
+
+    .${exports.classes.text} {
+        flex: 1
+    }
+`);
+exports.tableStyle = (0, utils_1.defineCss)(({ spacing }) => (0, react_1.css) `
+    width: 100%;
+    border-spacing: ${spacing[4]}px;
+
+    tr:first-of-type {
+        .${exports.classes.root} {
+            height: 24px;
+            margin-bottom: ${spacing[3]}px;
+        }
+    }
+
+    td {
+        padding: 0;
+
+        &:last-of-type {
+            width: 10%;
+        }
+    }
+`);

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

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

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

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

package/dist/cjs/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/cjs/components/slidableActions/slidableActions.js

@@ -0,0 +1,131 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SlidableActions = void 0;
+exports.useSlidableActionsContext = useSlidableActionsContext;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const clickAway_1 = require("../clickAway");
+const slidableActions_style_1 = require("./slidableActions.style");
+const utils_1 = require("../../utils");
+const slidableActionsAction_1 = require("./slidableActionsAction");
+const bezier = (0, utils_1.cubicBezier)(0, 0, 0, 1);
+const slidableActionsContext = (0, react_1.createContext)({
+    actionsContainer: [],
+    translate: 0,
+    maxDistance: 0
+});
+function useSlidableActionsContext() {
+    return (0, react_1.useContext)(slidableActionsContext);
+}
+exports.SlidableActions = (0, react_1.memo)((0, react_1.forwardRef)(({ bounceElementTranslate = 24, bounceDragDistance = 240, effectiveSpeed = 450, leftActions, rightActions, disabled, draggableOptions, ...props }, ref) => {
+    const leftActionsContainer = (0, react_1.useRef)([]);
+    const rightActionsContainer = (0, react_1.useRef)([]);
+    const [distanceRange, setDistanceRange] = (0, utils_1.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] = (0, react_1.useState)(0);
+    const [dragging, setDragging] = (0, react_1.useState)(false);
+    const startTranslate = (0, react_1.useRef)(0);
+    const draggableHandle = (0, utils_1.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 = (0, utils_1.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 (0, utils_1.toArray)(actions)?.map((child, _index) => {
+            return (0, react_1.isValidElement)(child)
+                ? (0, react_1.cloneElement)(child, {
+                    key: child.key || _index,
+                    _index
+                })
+                : typeof child === 'object' && child
+                    ? (0, jsx_runtime_1.jsx)(slidableActionsAction_1.SlidableActionsAction, { ...child, _index: _index }, _index)
+                    : child;
+        });
+    };
+    return ((0, jsx_runtime_1.jsx)(clickAway_1.ClickAway, { eventType: "pointerdown", onClickAway: onClickAway, children: (0, jsx_runtime_1.jsxs)("div", { ref: ref, css: slidableActions_style_1.style, className: (0, utils_1.classnames)(slidableActions_style_1.classes.root, props.className), "data-dragging": dragging, children: [(0, jsx_runtime_1.jsx)("div", { className: slidableActions_style_1.classes.content, ...draggableHandle, style: { translate: `${translate}px 0` }, children: props.children }), (0, jsx_runtime_1.jsxs)("div", { className: slidableActions_style_1.classes.actions, children: [(0, jsx_runtime_1.jsx)(slidableActionsContext.Provider, { value: (0, react_1.useMemo)(() => ({
+                                actionsContainer: leftActionsContainer.current,
+                                translate,
+                                maxDistance: distanceRange.current[1]
+                            }), [translate, distanceRange.current]), children: (0, jsx_runtime_1.jsx)("div", { className: slidableActions_style_1.classes.actionsLeft, children: !!leftActions &&
+                                    renderActions(leftActions) }) }), (0, jsx_runtime_1.jsx)(slidableActionsContext.Provider, { value: (0, react_1.useMemo)(() => ({
+                                actionsContainer: rightActionsContainer.current,
+                                translate,
+                                maxDistance: -distanceRange.current[0]
+                            }), [translate, distanceRange.current]), children: (0, jsx_runtime_1.jsx)("div", { className: slidableActions_style_1.classes.actionsRight, children: !!rightActions &&
+                                    renderActions(rightActions) }) })] })] }) }));
+}));
+exports.SlidableActions.Action = slidableActionsAction_1.SlidableActionsAction;

package/dist/cjs/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/cjs/components/slidableActions/slidableActions.style.js

@@ -0,0 +1,84 @@
+"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");
+exports.classes = (0, utils_1.defineClasses)('slidable-actions', [
+    'content',
+    'actions',
+    'actionsLeft',
+    'actionsRight',
+    'actionItem',
+    'actionItemWrap',
+    'actionItemIcon'
+]);
+exports.style = (0, utils_1.defineCss)(({ background }) => (0, react_1.css) `
+    position: relative;
+    overflow: hidden;
+    
+    .${exports.classes.content} {
+        touch-action: pan-y;
+        position: relative;
+        z-index: 1;
+    }
+    
+    .${exports.classes.actions} {
+        position: absolute;
+        inset: 0;
+    
+        .${exports.classes.actionsLeft}, .${exports.classes.actionsRight} {
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            top: 0;
+    
+            .${exports.classes.actionItem} {
+                width: 100%;
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                color: ${background.card};
+                position: absolute;
+                top: 0;
+    
+                .${exports.classes.actionItemWrap} {
+                    flex: 1;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    justify-content: center;
+                    padding: 0 18px;    
+                }
+    
+                .${exports.classes.actionItemIcon} {
+                    display: flex;
+                }
+            }
+        }
+    
+        .${exports.classes.actionsLeft} {
+            right: 100%;
+    
+            .${exports.classes.actionItem} {
+                align-items: flex-end;
+                right: 0;
+            }
+        }
+    
+        .${exports.classes.actionsRight} {
+            left: 100%;
+    
+            .${exports.classes.actionItem} {
+                align-items: flex-start;
+                left: 0;
+            }
+        }
+    }
+
+    &:not([data-dragging=true]) {
+        .${exports.classes.content}, .${exports.classes.actionItem} {
+            transition: translate .25s ease-out;
+        }
+    }
+`);

package/dist/cjs/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>>>;