@apple-pie/slice 0.1.43 → 0.1.45

package/dist/esm/chunks/viewState-94AhBeDg.mjs

@@ -1,350 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-
-import React, { useState, useRef, useCallback, useEffect, useMemo } from "react";
-
-import { s as setStyle, a as accessibleKeyDown } from "./misc--ZyHIQmL.mjs";
-
-import { I as Icon } from "./Icon-qVUjH6UY.mjs";
-
-var styles = {
-    tableWrapper: "DataTable-module_tableWrapper__BzoJE",
-    resizeBar: "DataTable-module_resizeBar__LmzEF",
-    table: "DataTable-module_table__oL4Dz",
-    baseCell: "DataTable-module_baseCell__DQl-z",
-    baseCellWrapper: "DataTable-module_baseCellWrapper__WMgNm",
-    headerCellWrapper: "DataTable-module_headerCellWrapper__ytVYY",
-    colResizeHandle: "DataTable-module_colResizeHandle__dF5Es",
-    m: "DataTable-module_m__G9QOp type-module_body-m-regular__LuQBA",
-    scroll: "DataTable-module_scroll__grEU0 scrollBars-module_scrollbars__c-ZPl"
-};
-
-function createColumnHelper() {
-    return {
-        accessor: (accessor, def) => Object.assign({
-            accessor: accessor
-        }, def)
-    };
-}
-
-const resolveAlignValue = value => {
-    switch (value) {
-      case "start":
-        return "flex-start";
-
-      case "center":
-      default:
-        return "center";
-
-      case "end":
-        return "flex-end";
-    }
-}, resolveDragHandleXPos = elements => {
-    const {cell: cell, handle: handle, parent: parent} = null != elements ? elements : {};
-    if (!cell || !parent || !handle) return;
-    const {left: left, width: width} = cell.getBoundingClientRect(), x = left - parent.getBoundingClientRect().left - parent.clientLeft + parent.scrollLeft;
-    handle.style.left = `${x + width}px`;
-};
-
-function DataTable(props) {
-    const {backgroundColor: backgroundColor = "var(--core-surface-primary)", headerBackgroundColor: headerBackgroundColor = "var(--core-surface-secondary)", candyStripeBackgroundColor: candyStripeBackgroundColor = "var(--core-surface-primary-tint)", backgroundColorHoverRow: backgroundColorHoverRow = "var(--core-surface-primary-tint)", handleHoverColor: handleHoverColor = "var(--core-outline-special)", freezeColumn: freezeColumn = !1, headerSticky: headerSticky = !0, height: height = "auto", width: width = "100%", colResize: colResize = !0, borderColor: borderColor = "var(--core-outline-primary)", borderStyle: borderStyle = "box", columnDefinitions: columnDefinitions = [], tableData: tableData = [], getRowId: getRowId, filter: filter, caption: caption = "Data Table", onDoubleClick: onDoubleClick, onClick: onClick, onMouseOut: onMouseOut, onMouseOver: onMouseOver, sort: sort, onSortChange: onSortChange, onColumnResize: onColumnResize} = props, [hScroll, setHScroll] = useState(!1), [vScroll, setVScroll] = useState(!1), [hoveredRow, setHoveredRow] = useState(null), [sortKey, setSortKey] = useState(sort), [draggingCol, setDraggingCol] = useState(null), [columnWidths, setColumnWidths] = useState({}), wrapperRef = React.useRef(null), resizeBarRef = React.useRef(null), colRefs = React.useRef({}), handleResizeEnd = useCallback((id, width) => {
-        setColumnWidths(prev => Object.assign(Object.assign({}, prev), {
-            [id]: width
-        })), setDraggingCol(null), null == onColumnResize || onColumnResize(id, width);
-    }, [ onColumnResize ]);
-    !function(element, onResizeEnd) {
-        const [client, setClient] = useState(null), [dragging, setDragging] = useState(!1), didSetListenersRef = useRef(!1), colStartX = useRef(0), lastWidthRef = useRef(0), hasMovedRef = useRef(!1), resolveStartingXPos = useCallback(() => (null == element ? void 0 : element.cell) ? element.cell.getBoundingClientRect().left : 0, [ element ]), applyHandlePos = useCallback(show => {
-            const {cell: cell, handle: handle, parent: parent} = null != element ? element : {};
-            !show && handle ? handle.style.left = "-500px" : resolveDragHandleXPos({
-                cell: cell,
-                handle: handle,
-                parent: parent
-            });
-        }, [ element ]), applyWidth = useCallback(clientX => {
-            if (!(null == element ? void 0 : element.col)) return;
-            const newWidth = Math.max(0, clientX - colStartX.current);
-            element.col.style.width = `${newWidth}px`, lastWidthRef.current = newWidth, hasMovedRef.current = !0;
-        }, [ element ]), handleMouseMove = useCallback(e => {
-            e.stopPropagation(), e.preventDefault(), setDragging(!0);
-            const nextClientPos = (e => {
-                if (e.type.startsWith("touch")) {
-                    const touchEvent = e;
-                    return {
-                        x: touchEvent.touches[0].clientX,
-                        y: touchEvent.touches[0].clientY
-                    };
-                }
-                const mouseEvent = e;
-                return {
-                    x: mouseEvent.clientX,
-                    y: mouseEvent.clientY
-                };
-            })(e);
-            setClient(nextClientPos), applyWidth(nextClientPos.x), applyHandlePos(!0);
-        }, [ applyWidth, applyHandlePos ]), handleMouseUp = useCallback(e => {
-            e.stopPropagation(), e.preventDefault(), setDragging(!1), setClient(null), element && hasMovedRef.current && (null == onResizeEnd || onResizeEnd(element.id, lastWidthRef.current)), 
-            applyHandlePos(!1), clearListeners();
-        }, [ element, onResizeEnd, applyHandlePos ]), initListeners = useCallback(() => {
-            didSetListenersRef.current || (document.documentElement.addEventListener("mousemove", handleMouseMove, !1), 
-            document.documentElement.addEventListener("mouseup", handleMouseUp, !1), document.documentElement.addEventListener("touchmove", handleMouseMove, !1), 
-            document.documentElement.addEventListener("touchend", handleMouseUp, !1), document.documentElement.style.userSelect = "none", 
-            document.documentElement.style.webkitUserSelect = "none", document.documentElement.style.cursor = "col-resize", 
-            colStartX.current = resolveStartingXPos(), didSetListenersRef.current = !0);
-        }, [ handleMouseMove, handleMouseUp, resolveStartingXPos ]), clearListeners = useCallback(() => {
-            didSetListenersRef.current && (document.documentElement.removeEventListener("mousemove", handleMouseMove), 
-            document.documentElement.removeEventListener("mouseup", handleMouseUp), document.documentElement.removeEventListener("touchmove", handleMouseMove, !1), 
-            document.documentElement.removeEventListener("touchend", handleMouseUp, !1), document.documentElement.style.userSelect = "auto", 
-            document.documentElement.style.webkitUserSelect = "auto", document.documentElement.style.cursor = "default", 
-            colStartX.current = 0, lastWidthRef.current = 0, hasMovedRef.current = !1, didSetListenersRef.current = !1);
-        }, [ handleMouseMove, handleMouseUp ]);
-        useEffect(() => (element ? initListeners() : clearListeners(), () => clearListeners()), [ element, initListeners, clearListeners ]);
-    }(draggingCol, handleResizeEnd);
-    const cornerBoxShadow = useMemo(() => {
-        const shadows = [];
-        return hScroll && freezeColumn && shadows.push("1px 0 0 var(--core-outline-primary)", "5px 0 0 rgba(0,0,0,0.1)"), 
-        vScroll && headerSticky && shadows.push("0 1px 0 var(--core-outline-primary)"), 
-        vScroll && headerSticky && !hScroll && shadows.push("0 5px 0 rgba(0,0,0,0.1)"), 
-        shadows.length > 0 ? shadows.join(",") : "none";
-    }, [ hScroll, vScroll, freezeColumn, headerSticky ]), columnBoxShadow = useMemo(() => {
-        const shadows = [];
-        return hScroll && freezeColumn && shadows.push("1px 0 0 var(--core-outline-primary)", "5px 0 0 rgba(0,0,0,0.1)"), 
-        shadows.length > 0 ? shadows.join(",") : "none";
-    }, [ hScroll, freezeColumn ]), headerBoxShadow = useMemo(() => {
-        const shadows = [];
-        return vScroll && headerSticky && shadows.push("0 1px 0 var(--core-outline-primary)", "0 5px 0 rgba(0,0,0,0.1)"), 
-        shadows.length > 0 ? shadows.join(",") : "none";
-    }, [ vScroll, headerSticky ]), cssVars = useMemo(() => ({
-        "--table-width": setStyle(width),
-        "--table-height": setStyle(height),
-        "--table-background-color": backgroundColor,
-        "--table-column-box-shadow": columnBoxShadow,
-        "--table-header-box-shadow": headerBoxShadow,
-        "--table-corner-box-shadow": cornerBoxShadow,
-        "--table-header-background-color": headerBackgroundColor,
-        "--table-candy-stripe-background-color": candyStripeBackgroundColor,
-        "--table-freeze-column-position": freezeColumn ? "sticky" : "relative",
-        "--table-header-sticky-position": headerSticky ? "sticky" : "relative",
-        "--table-border-color": borderColor,
-        "--table-corner-position": freezeColumn || headerSticky ? "sticky" : "relative",
-        "--table-corner-left": freezeColumn ? "0px" : "unset",
-        "--table-border-width": "none" === borderStyle ? "0" : "1px",
-        "--table-border-sides": "box" === borderStyle ? "1px" : "0",
-        "--table-handle-hover-color": handleHoverColor
-    }), [ backgroundColor, headerBackgroundColor, candyStripeBackgroundColor, cornerBoxShadow, columnBoxShadow, headerBoxShadow, freezeColumn, headerSticky, width, height, borderColor, borderStyle, handleHoverColor ]), handleScroll = useCallback(() => {
-        var _a, _b, _c, _d;
-        const hScrollAmount = null !== (_b = null === (_a = wrapperRef.current) || void 0 === _a ? void 0 : _a.scrollLeft) && void 0 !== _b ? _b : 0, vScrollAmount = null !== (_d = null === (_c = wrapperRef.current) || void 0 === _c ? void 0 : _c.scrollTop) && void 0 !== _d ? _d : 0;
-        setHScroll(hScrollAmount > 0), setVScroll(vScrollAmount > 0);
-    }, []), rows = useMemo(() => [ ...filter ? tableData.filter((row, index, array) => filter(row, index, array)) : tableData ].sort((a, b) => {
-        if (!(null == sortKey ? void 0 : sortKey.key)) return 0;
-        const {key: key, dir: dir} = sortKey;
-        if (a[key] === b[key]) return 0;
-        return (a[key] > b[key] ? 1 : -1) * ("desc" === dir ? -1 : 1);
-    }), [ tableData, filter, sortKey ]), handleCellHover = useCallback((col, colId, row, rowId, over) => {
-        over ? (setHoveredRow(rowId), onMouseOver && onMouseOver(col, colId, row, rowId)) : (setHoveredRow(prev => prev === rowId ? null : prev), 
-        onMouseOut && onMouseOut(col, colId, row, rowId));
-    }, [ onMouseOut, onMouseOver ]), handleClick = useCallback((col, colId, row, rowId, dbl) => {
-        dbl && onDoubleClick ? onDoubleClick(col, colId, row, rowId) : onClick && onClick(col, colId, row, rowId);
-    }, [ onDoubleClick, onClick ]), resolveCellBG = useCallback(rowId => backgroundColorHoverRow && hoveredRow === rowId ? backgroundColorHoverRow : !!candyStripeBackgroundColor && rowId % 2 != 0 ? candyStripeBackgroundColor : backgroundColor, [ hoveredRow, backgroundColorHoverRow, candyStripeBackgroundColor, backgroundColor ]), handleSort = useCallback(key => {
-        if (!key) return;
-        const next = (null == sortKey ? void 0 : sortKey.key) === key ? {
-            key: key,
-            dir: "asc" === (null == sortKey ? void 0 : sortKey.dir) ? "desc" : "asc"
-        } : {
-            key: key,
-            dir: "asc"
-        };
-        let didChange = !0;
-        (null == sortKey ? void 0 : sortKey.key) === (null == next ? void 0 : next.key) && (null == sortKey ? void 0 : sortKey.dir) === (null == next ? void 0 : next.dir) && (didChange = !1), 
-        didChange && (setSortKey(next), null == onSortChange || onSortChange(next));
-    }, [ sortKey, onSortChange ]), renderHeader = useCallback((col, sortKey) => col.renderHeader ? col.renderHeader({
-        column: col,
-        sortKey: sortKey
-    }) : jsx(DefaultHeaderRenderer, {
-        col: col,
-        sortKey: sortKey
-    }), []), resolveAriaSort = useCallback(column => {
-        const sortable = void 0 !== column.sort, isSortedColumn = sortable && (null == sortKey ? void 0 : sortKey.key) === column.sort;
-        if (sortable) return isSortedColumn ? "asc" === (null == sortKey ? void 0 : sortKey.dir) ? "ascending" : "descending" : void 0;
-    }, [ sortKey ]), handleStartDrag = useCallback((id, e) => {
-        if (!colResize) return;
-        const cell = e.currentTarget.parentElement, col = colRefs.current[id], handle = resizeBarRef.current, parent = wrapperRef.current;
-        cell && col && parent && setDraggingCol({
-            id: id,
-            cell: cell,
-            col: col,
-            handle: handle,
-            parent: parent
-        });
-    }, [ colResize ]), handleHoverDragHandle = useCallback((show, e) => {
-        if (!colResize || draggingCol) return;
-        const cell = e.currentTarget.parentElement, handle = resizeBarRef.current, parent = wrapperRef.current;
-        !show && handle ? handle.style.left = "-500px" : resolveDragHandleXPos({
-            cell: cell,
-            handle: handle,
-            parent: parent
-        });
-    }, [ draggingCol, colResize ]), handleCreateRefs = useCallback((el, id) => {
-        colRefs.current[id] = el;
-    }, []);
-    return useEffect(() => {
-        setSortKey(prev => (null == prev ? void 0 : prev.key) === (null == sort ? void 0 : sort.key) && (null == prev ? void 0 : prev.dir) === (null == sort ? void 0 : sort.dir) ? prev : sort);
-    }, [ sort ]), jsxs("div", {
-        ref: wrapperRef,
-        className: `${styles.tableWrapper} ${styles.scroll}`,
-        style: cssVars,
-        onScroll: handleScroll,
-        children: [ jsx("div", {
-            className: styles.resizeBar,
-            ref: resizeBarRef
-        }), jsxs("table", {
-            className: styles.table,
-            children: [ jsx("caption", {
-                children: caption
-            }), jsx("colgroup", {
-                children: columnDefinitions.map(column => {
-                    var _a;
-                    return jsx("col", {
-                        ref: el => handleCreateRefs(el, column.id),
-                        style: {
-                            width: setStyle(null !== (_a = columnWidths[column.id]) && void 0 !== _a ? _a : column.width)
-                        }
-                    }, column.id);
-                })
-            }), jsx("thead", {
-                children: jsx("tr", {
-                    children: columnDefinitions.map(column => {
-                        const padding = setStyle(column.padding, 16), sortable = void 0 !== column.sort, cursor = sortable ? "pointer" : "default";
-                        return jsx("th", {
-                            "data-column-id": column.id,
-                            className: `${styles.baseCell} ${styles.headerCell} ${styles.m}`,
-                            onClick: () => handleSort(column.sort),
-                            onKeyDown: e => accessibleKeyDown(e, () => handleSort(column.sort)),
-                            style: {
-                                cursor: cursor
-                            },
-                            tabIndex: sortable ? 0 : void 0,
-                            role: sortable ? "columnheader" : void 0,
-                            "aria-sort": resolveAriaSort(column),
-                            children: jsx("div", {
-                                className: styles.headerCellWrapper,
-                                style: {
-                                    padding: padding
-                                },
-                                children: renderHeader(column, sortKey)
-                            })
-                        }, column.id);
-                    })
-                })
-            }), jsx("tbody", {
-                children: rows.map((row, rowIndex) => jsx("tr", {
-                    children: columnDefinitions.map((col, colIndex) => {
-                        var _a;
-                        const value = col.accessor(row), justifyContent = resolveAlignValue(col.justify), alignItems = resolveAlignValue(col.align), padding = setStyle(col.padding, 16), whiteSpace = col.nowrap ? "nowrap" : "", background = resolveCellBG(rowIndex), notLast = colIndex !== columnDefinitions.length - 1;
-                        return jsxs("td", {
-                            "data-column-id": `${colIndex}.${rowIndex}`,
-                            className: `${styles.baseCell} ${styles.m}`,
-                            onClick: () => handleClick(col, colIndex, row, rowIndex, !1),
-                            onDoubleClick: () => handleClick(col, colIndex, row, rowIndex, !0),
-                            onKeyDown: e => accessibleKeyDown(e, () => handleClick(col, colIndex, row, rowIndex, !1)),
-                            onMouseOver: () => handleCellHover(col, colIndex, row, rowIndex, !0),
-                            onFocus: () => handleCellHover(col, colIndex, row, rowIndex, !0),
-                            onMouseOut: () => handleCellHover(col, colIndex, row, rowIndex, !1),
-                            onBlur: () => handleCellHover(col, colIndex, row, rowIndex, !1),
-                            style: {
-                                background: background
-                            },
-                            children: [ notLast && colResize && jsx("div", {
-                                className: styles.colResizeHandle,
-                                onMouseDown: e => handleStartDrag(col.id, e),
-                                onMouseOver: e => handleHoverDragHandle(!0, e),
-                                onFocus: e => handleHoverDragHandle(!0, e),
-                                onMouseOut: e => handleHoverDragHandle(!1, e),
-                                onBlur: e => handleHoverDragHandle(!1, e)
-                            }), jsx("div", {
-                                className: styles.baseCellWrapper,
-                                style: {
-                                    justifyContent: justifyContent,
-                                    alignItems: alignItems,
-                                    padding: padding,
-                                    whiteSpace: whiteSpace
-                                },
-                                children: col.renderCell ? col.renderCell({
-                                    row: row,
-                                    value: value,
-                                    rowIndex: rowIndex
-                                }) : null !== (_a = null == value ? void 0 : value.toString()) && void 0 !== _a ? _a : ""
-                            }) ]
-                        }, col.id);
-                    })
-                }, getRowId ? getRowId(row, rowIndex) : rowIndex))
-            }) ]
-        }) ]
-    });
-}
-
-function DefaultHeaderRenderer(props) {
-    const {col: col, sortKey: sortKey} = props, sortable = !!col.sort, sorted = !(!(null == sortKey ? void 0 : sortKey.key) || sortKey.key !== col.sort), sortIcon = "asc" === (null == sortKey ? void 0 : sortKey.dir) ? "arrow up" : "arrow down", justifyContent = sortable ? "space-between" : resolveAlignValue(col.justify);
-    return jsxs("div", {
-        style: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: justifyContent,
-            width: "100%"
-        },
-        children: [ jsx("span", {
-            style: {
-                fontWeight: 540
-            },
-            children: col.title
-        }), sortable && jsx(Icon, {
-            name: sorted ? sortIcon : "blank",
-            size: 16
-        }) ]
-    });
-}
-
-function createDefaultViewState(columns) {
-    return {
-        columnOrder: columns.map(column => column.id)
-    };
-}
-
-function applyDataTableViewState(columns, state) {
-    var _a;
-    if (!state) return columns;
-    const byId = new Map(columns.map(column => [ column.id, column ])), hidden = new Set(null !== (_a = state.hiddenColumns) && void 0 !== _a ? _a : []), seen = new Set, ordered = [];
-    for (const id of state.columnOrder) {
-        if (seen.has(id) || hidden.has(id)) continue;
-        const column = byId.get(id);
-        column && (seen.add(id), ordered.push(column));
-    }
-    for (const column of columns) seen.has(column.id) || hidden.has(column.id) || (seen.add(column.id), 
-    ordered.push(column));
-    if (!state.columnWidths) return ordered;
-    const widths = state.columnWidths;
-    return ordered.map(column => column.id in widths ? Object.assign(Object.assign({}, column), {
-        width: widths[column.id]
-    }) : column);
-}
-
-function resolveSortFromViewState(columns, state) {
-    if (!(null == state ? void 0 : state.sort)) return;
-    const column = columns.find(c => {
-        var _a;
-        return c.id === (null === (_a = state.sort) || void 0 === _a ? void 0 : _a.columnId);
-    });
-    return (null == column ? void 0 : column.sort) ? {
-        key: column.sort,
-        dir: state.sort.dir
-    } : void 0;
-}
-
-function captureSortToViewState(columns, sort) {
-    if (!(null == sort ? void 0 : sort.key)) return;
-    const column = columns.find(c => c.sort === sort.key);
-    return column ? {
-        columnId: column.id,
-        dir: sort.dir
-    } : void 0;
-}
-
-export { DataTable as D, applyDataTableViewState as a, createColumnHelper as b, captureSortToViewState as c, createDefaultViewState as d, resolveSortFromViewState as r };

package/dist/types/components/DataTable/_useDragColumn.d.ts

@@ -1,14 +0,0 @@
-export type DragColumnElement = {
-    id: string;
-    cell: HTMLElement;
-    col: HTMLTableColElement;
-    handle?: HTMLDivElement | null;
-    parent?: HTMLDivElement | null;
-};
-export declare function useDragColumn(element: DragColumnElement | null, onResizeEnd?: (id: string, width: number) => void): {
-    client: {
-        x: number;
-        y: number;
-    } | null;
-    dragging: boolean;
-};