@apple-pie/slice 0.1.43 → 0.1.45

package/dist/cjs/chunks/viewState-DmgjHoOp.js

@@ -1,332 +0,0 @@
-"use strict";
-
-var jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-BD1HRncd.js"), Icon = require("./Icon-8QuM6PRf.js"), 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"
-};
-
-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 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 jsxRuntime.jsxs("div", {
-        style: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: justifyContent,
-            width: "100%"
-        },
-        children: [ jsxRuntime.jsx("span", {
-            style: {
-                fontWeight: 540
-            },
-            children: col.title
-        }), sortable && jsxRuntime.jsx(Icon.Icon, {
-            name: sorted ? sortIcon : "blank",
-            size: 16
-        }) ]
-    });
-}
-
-exports.DataTable = function(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] = React.useState(!1), [vScroll, setVScroll] = React.useState(!1), [hoveredRow, setHoveredRow] = React.useState(null), [sortKey, setSortKey] = React.useState(sort), [draggingCol, setDraggingCol] = React.useState(null), [columnWidths, setColumnWidths] = React.useState({}), wrapperRef = React.useRef(null), resizeBarRef = React.useRef(null), colRefs = React.useRef({}), handleResizeEnd = React.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] = React.useState(null), [dragging, setDragging] = React.useState(!1), didSetListenersRef = React.useRef(!1), colStartX = React.useRef(0), lastWidthRef = React.useRef(0), hasMovedRef = React.useRef(!1), resolveStartingXPos = React.useCallback(() => (null == element ? void 0 : element.cell) ? element.cell.getBoundingClientRect().left : 0, [ element ]), applyHandlePos = React.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 = React.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 = React.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 = React.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 = React.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 = React.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 ]);
-        React.useEffect(() => (element ? initListeners() : clearListeners(), () => clearListeners()), [ element, initListeners, clearListeners ]);
-    }(draggingCol, handleResizeEnd);
-    const cornerBoxShadow = React.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 = React.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 = React.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 = React.useMemo(() => ({
-        "--table-width": misc.setStyle(width),
-        "--table-height": misc.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 = React.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 = React.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 = React.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 = React.useCallback((col, colId, row, rowId, dbl) => {
-        dbl && onDoubleClick ? onDoubleClick(col, colId, row, rowId) : onClick && onClick(col, colId, row, rowId);
-    }, [ onDoubleClick, onClick ]), resolveCellBG = React.useCallback(rowId => backgroundColorHoverRow && hoveredRow === rowId ? backgroundColorHoverRow : !!candyStripeBackgroundColor && rowId % 2 != 0 ? candyStripeBackgroundColor : backgroundColor, [ hoveredRow, backgroundColorHoverRow, candyStripeBackgroundColor, backgroundColor ]), handleSort = React.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 = React.useCallback((col, sortKey) => col.renderHeader ? col.renderHeader({
-        column: col,
-        sortKey: sortKey
-    }) : jsxRuntime.jsx(DefaultHeaderRenderer, {
-        col: col,
-        sortKey: sortKey
-    }), []), resolveAriaSort = React.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 = React.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 = React.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 = React.useCallback((el, id) => {
-        colRefs.current[id] = el;
-    }, []);
-    return React.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 ]), jsxRuntime.jsxs("div", {
-        ref: wrapperRef,
-        className: `${styles.tableWrapper} ${styles.scroll}`,
-        style: cssVars,
-        onScroll: handleScroll,
-        children: [ jsxRuntime.jsx("div", {
-            className: styles.resizeBar,
-            ref: resizeBarRef
-        }), jsxRuntime.jsxs("table", {
-            className: styles.table,
-            children: [ jsxRuntime.jsx("caption", {
-                children: caption
-            }), jsxRuntime.jsx("colgroup", {
-                children: columnDefinitions.map(column => {
-                    var _a;
-                    return jsxRuntime.jsx("col", {
-                        ref: el => handleCreateRefs(el, column.id),
-                        style: {
-                            width: misc.setStyle(null !== (_a = columnWidths[column.id]) && void 0 !== _a ? _a : column.width)
-                        }
-                    }, column.id);
-                })
-            }), jsxRuntime.jsx("thead", {
-                children: jsxRuntime.jsx("tr", {
-                    children: columnDefinitions.map(column => {
-                        const padding = misc.setStyle(column.padding, 16), sortable = void 0 !== column.sort, cursor = sortable ? "pointer" : "default";
-                        return jsxRuntime.jsx("th", {
-                            "data-column-id": column.id,
-                            className: `${styles.baseCell} ${styles.headerCell} ${styles.m}`,
-                            onClick: () => handleSort(column.sort),
-                            onKeyDown: e => misc.accessibleKeyDown(e, () => handleSort(column.sort)),
-                            style: {
-                                cursor: cursor
-                            },
-                            tabIndex: sortable ? 0 : void 0,
-                            role: sortable ? "columnheader" : void 0,
-                            "aria-sort": resolveAriaSort(column),
-                            children: jsxRuntime.jsx("div", {
-                                className: styles.headerCellWrapper,
-                                style: {
-                                    padding: padding
-                                },
-                                children: renderHeader(column, sortKey)
-                            })
-                        }, column.id);
-                    })
-                })
-            }), jsxRuntime.jsx("tbody", {
-                children: rows.map((row, rowIndex) => jsxRuntime.jsx("tr", {
-                    children: columnDefinitions.map((col, colIndex) => {
-                        var _a;
-                        const value = col.accessor(row), justifyContent = resolveAlignValue(col.justify), alignItems = resolveAlignValue(col.align), padding = misc.setStyle(col.padding, 16), whiteSpace = col.nowrap ? "nowrap" : "", background = resolveCellBG(rowIndex), notLast = colIndex !== columnDefinitions.length - 1;
-                        return jsxRuntime.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 => misc.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 && jsxRuntime.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)
-                            }), jsxRuntime.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))
-            }) ]
-        }) ]
-    });
-}, exports.applyDataTableViewState = function(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);
-}, exports.captureSortToViewState = function(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;
-}, exports.createColumnHelper = function() {
-    return {
-        accessor: (accessor, def) => Object.assign({
-            accessor: accessor
-        }, def)
-    };
-}, exports.createDefaultViewState = function(columns) {
-    return {
-        columnOrder: columns.map(column => column.id)
-    };
-}, exports.resolveSortFromViewState = function(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;
-};