@1771technologies/lytenyte-pro 2.0.0-dev.0 → 2.0.0-dev.1

package/dist/components/checkbox/checkbox.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useSlot } from "../../hooks/use-slot/index.js";
+import { useControlled, useEvent } from "@1771technologies/lytenyte-core/internal";
+function CheckboxBase({ indeterminate, renderMarker, onCheckChange: onCheck, ...props }, ref) {
+    const [checked, setChecked] = useControlled({
+        controlled: props.checked,
+        default: props.initialChecked ?? false,
+    });
+    const onCheckChanged = useEvent((b) => {
+        setChecked(b);
+        onCheck?.(b);
+    });
+    const marker = useSlot({
+        slot: renderMarker ?? (checked ? _jsx(CheckIcon, {}) : indeterminate ? _jsx(DashIcon, {}) : _jsx(_Fragment, {})),
+        state: {
+            indeterminate: indeterminate ?? false,
+            checked,
+        },
+    });
+    return (_jsxs("div", { "data-ln-checkbox": true, "data-ln-checked": checked, "data-ln-indeterminate": indeterminate, "data-ln-disabled": props.disabled, style: { position: "relative" }, children: [marker, _jsx("input", { "data-ln-checkbox-input": true, onChange: (e) => {
+                    props.onChange?.(e);
+                    if (e.defaultPrevented || e.isPropagationStopped())
+                        return;
+                    onCheckChanged(e.target.checked);
+                }, type: "checkbox", ref: ref, ...props, style: {
+                    width: "100%",
+                    height: "100%",
+                    opacity: 0,
+                    margin: 0,
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                } })] }));
+}
+function CheckIcon(props) {
+    return (_jsx("svg", { width: "11", height: "11", viewBox: "0 0 10 9", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: _jsx("path", { d: "M1.00024 4.34783C2.53871 5.26087 3.76948 7.08696 4.07717 8C5.61563 4.34783 7.76948 1.91304 9.00024 1", stroke: "currentcolor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+function DashIcon(props) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentcolor", viewBox: "0 0 256 256", ...props, children: _jsx("path", { d: "M228,128a12,12,0,0,1-12,12H40a12,12,0,0,1,0-24H216A12,12,0,0,1,228,128Z" }) }));
+}
+export const Checkbox = forwardRef(CheckboxBase);

package/dist/components/checkbox/checkbox.play.d.ts

@@ -0,0 +1,2 @@
+import "../../../css/light-dark.css";
+export default function Play(): import("react/jsx-runtime").JSX.Element;

package/dist/components/checkbox/checkbox.play.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "../../../css/light-dark.css";
+import { Checkbox } from "./checkbox.js";
+export default function Play() {
+    return _jsx(Checkbox, {});
+}

package/dist/components/column-manager/column-manager.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from "react";
+import type { Column, GridSpec, RowNode } from "../../types";
+import type { Grid } from "../..";
+export interface ColumnManagerProps<Spec extends GridSpec = GridSpec> {
+    readonly columns: Column<Spec>[];
+    readonly onColumnsChange: (change: Column<Spec>[]) => void;
+    readonly base?: Grid.ColumnBase<Spec>;
+    readonly endElement?: (params: {
+        columns: Column<Spec>[];
+        row: RowNode<Spec["data"]>;
+    }) => ReactNode;
+}
+export declare function ColumnManager<Spec extends GridSpec = GridSpec>({ columns, base, onColumnsChange, endElement, }: ColumnManagerProps<Spec>): import("react/jsx-runtime").JSX.Element;

package/dist/components/column-manager/column-manager.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { TreeView } from "../tree-view/index.js";
+import { Checkbox } from "../checkbox/checkbox.js";
+export function ColumnManager({ columns, base, onColumnsChange, endElement, }) {
+    const items = useMemo(() => {
+        return columns.map((x) => ({ id: x.id, path: x.groupPath ?? [], name: x.name, column: x }));
+    }, [columns]);
+    return (_jsx(TreeView, { items: items, rowSelectionEnabled: false, draggable: true, rowHeight: 30, rowSelectAllShow: false, defaultExpansion: true, onItemsReordered: (x) => {
+            const columns = x.map((x) => x.column);
+            onColumnsChange(columns);
+        }, children: ({ row, leafs, toggle, dragProps, isOver, isBefore }) => {
+            const depth = row.depth;
+            const items = leafs();
+            const end = endElement?.({ columns: items.map((x) => x.column), row });
+            const isSelected = items.every((x) => !(x.column.hide ?? base?.hide));
+            const isIndeterminate = !isSelected && items.some((x) => !(x.column.hide ?? base?.hide));
+            const draggable = !!dragProps.draggable;
+            const checkbox = (_jsx(Checkbox, { checked: isSelected, indeterminate: isIndeterminate, onChange: () => {
+                    if (isSelected) {
+                        onColumnsChange(columns.map((x) => {
+                            const c = items.find((c) => x.id === c.column.id);
+                            if (!c)
+                                return x;
+                            return { ...c.column, hide: true };
+                        }));
+                    }
+                    else {
+                        onColumnsChange(columns.map((x) => {
+                            const c = items.find((c) => x.id === c.column.id);
+                            if (!c)
+                                return x;
+                            return { ...c.column, hide: false };
+                        }));
+                    }
+                } }));
+            if (row.kind === "branch")
+                return (_jsxs("div", { "data-ln-tree-view-cell": row.kind, "data-ln-tree-view-cell-expanded": row.kind === "branch" && row.expanded, "data-ln-tree-view-cell-expandable": row.kind === "branch" ? row.expandable : undefined, "data-ln-tree-over": isOver, "data-ln-tree-before": isBefore, style: { "--ln-row-depth": depth }, ...dragProps, children: [row.kind === "branch" && row.expandable && (_jsx("button", { "data-ln-tree-view-cell-expander": true, "aria-label": "toggle the row group expansion state", onClick: () => toggle(), children: !row.loadingGroup && _jsx(CaretRight, {}) })), draggable && (_jsx("div", { children: _jsx(DragDots, {}) })), checkbox, _jsx("div", { style: { flex: "1" }, children: row.key }), end] }));
+            return (_jsxs("div", { "data-ln-tree-view-cell": row.kind, "data-ln-tree-over": isOver, "data-ln-tree-before": isBefore, style: { "--ln-row-depth": depth }, ...dragProps, children: [draggable && (_jsx("div", { children: _jsx(DragDots, {}) })), checkbox, _jsx("div", { style: { flex: "1" }, children: row.data.name ?? row.data.id }), end] }));
+        } }));
+}
+function CaretRight() {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentcolor", viewBox: "0 0 256 256", children: _jsx("path", { d: "M181.66,133.66l-80,80A8,8,0,0,1,88,208V48a8,8,0,0,1,13.66-5.66l80,80A8,8,0,0,1,181.66,133.66Z" }) }));
+}
+function DragDots() {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentcolor", viewBox: "0 0 256 256", children: _jsx("path", { d: "M104,60A12,12,0,1,1,92,48,12,12,0,0,1,104,60Zm60,12a12,12,0,1,0-12-12A12,12,0,0,0,164,72ZM92,116a12,12,0,1,0,12,12A12,12,0,0,0,92,116Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,116ZM92,184a12,12,0,1,0,12,12A12,12,0,0,0,92,184Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,184Z" }) }));
+}

package/dist/components/external/clsx.d.ts

@@ -0,0 +1,2 @@
+export function clsx(...args: any[]): string;
+export default clsx;

package/dist/components/external/clsx.js

@@ -0,0 +1,44 @@
+function toVal(mix) {
+    var k, y, str = "";
+    if (typeof mix === "string" || typeof mix === "number") {
+        str += mix;
+    }
+    else if (typeof mix === "object") {
+        if (Array.isArray(mix)) {
+            var len = mix.length;
+            for (k = 0; k < len; k++) {
+                if (mix[k]) {
+                    if ((y = toVal(mix[k]))) {
+                        if (str)
+                            str += " ";
+                        str += y;
+                    }
+                }
+            }
+        }
+        else {
+            for (y in mix) {
+                if (mix[y]) {
+                    if (str)
+                        str += " ";
+                    str += y;
+                }
+            }
+        }
+    }
+    return str;
+}
+export function clsx() {
+    var i = 0, tmp, x, str = "", len = arguments.length;
+    for (; i < len; i++) {
+        if ((tmp = arguments[i])) {
+            if ((x = toVal(tmp))) {
+                if (str)
+                    str += " ";
+                str += x;
+            }
+        }
+    }
+    return str;
+}
+export default clsx;

package/dist/components/external/floating-ui.d.ts

@@ -0,0 +1,268 @@
+/**
+ * Provides data to position an inner element of the floating element so that it
+ * appears centered to the reference element.
+ * @see https://floating-ui.com/docs/arrow
+ */
+export function arrow(options: any): {
+    name: string;
+    options: any;
+    fn(state: any): Promise<{
+        data?: undefined;
+        reset?: undefined;
+    } | {
+        [x: string]: any;
+        data: {
+            alignmentOffset?: number | undefined;
+            centerOffset: number;
+        };
+        reset: boolean;
+    }>;
+};
+/**
+ * Optimizes the visibility of the floating element by choosing the placement
+ * that has the most space available automatically, without needing to specify a
+ * preferred placement. Alternative to `flip`.
+ * @see https://floating-ui.com/docs/autoPlacement
+ */
+export function autoPlacement(options: any): {
+    name: string;
+    options: any;
+    fn(state: any): Promise<{
+        reset?: undefined;
+        data?: undefined;
+    } | {
+        reset: {
+            placement: any;
+        };
+        data?: undefined;
+    } | {
+        data: {
+            index: any;
+            overflows: any[];
+        };
+        reset: {
+            placement: any;
+        };
+    }>;
+};
+/**
+ * Automatically updates the position of the floating element when necessary.
+ * Should only be called when the floating element is mounted on the DOM or
+ * visible on the screen.
+ * @returns cleanup function that should be invoked when the floating element is
+ * removed from the DOM or hidden from the screen.
+ * @see https://floating-ui.com/docs/autoUpdate
+ */
+export function autoUpdate(reference: any, floating: any, update: any, options: any): () => void;
+/**
+ * Computes the `x` and `y` coordinates that will place the floating element
+ * next to a given reference element.
+ */
+export function computePosition(reference: any, floating: any, options: any): Promise<{
+    x: any;
+    y: any;
+    placement: any;
+    strategy: any;
+    middlewareData: {};
+}>;
+/**
+ * Resolves with an object of overflow side offsets that determine how much the
+ * element is overflowing a given clipping boundary on each side.
+ * - positive = overflowing the boundary by that number of pixels
+ * - negative = how many pixels left before it will overflow
+ * - 0 = lies flush with the boundary
+ * @see https://floating-ui.com/docs/detectOverflow
+ */
+export function detectOverflow(state: any, options: any): Promise<{
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+}>;
+/**
+ * Optimizes the visibility of the floating element by flipping the `placement`
+ * in order to keep it in view when the preferred placement(s) will overflow the
+ * clipping boundary. Alternative to `autoPlacement`.
+ * @see https://floating-ui.com/docs/flip
+ */
+export function flip(options: any): {
+    name: string;
+    options: any;
+    fn(state: any): Promise<{
+        data?: undefined;
+        reset?: undefined;
+    } | {
+        data: {
+            index: any;
+            overflows: any;
+        };
+        reset: {
+            placement: any;
+        };
+    } | {
+        reset: {
+            placement: any;
+        };
+        data?: undefined;
+    }>;
+};
+export function getOverflowAncestors(node: any, list: any, traverseIframes: any): any;
+/**
+ * Provides data to hide the floating element in applicable situations, such as
+ * when it is not in the same clipping context as the reference element.
+ * @see https://floating-ui.com/docs/hide
+ */
+export function hide(options: any): {
+    name: string;
+    options: any;
+    fn(state: any): Promise<{
+        data: {
+            referenceHiddenOffsets: {
+                top: number;
+                right: number;
+                bottom: number;
+                left: number;
+            };
+            referenceHidden: boolean;
+            escapedOffsets?: undefined;
+            escaped?: undefined;
+        };
+    } | {
+        data: {
+            escapedOffsets: {
+                top: number;
+                right: number;
+                bottom: number;
+                left: number;
+            };
+            escaped: boolean;
+            referenceHiddenOffsets?: undefined;
+            referenceHidden?: undefined;
+        };
+    } | {
+        data?: undefined;
+    }>;
+};
+/**
+ * Provides improved positioning for inline reference elements that can span
+ * over multiple lines, such as hyperlinks or range selections.
+ * @see https://floating-ui.com/docs/inline
+ */
+export function inline(options: any): {
+    name: string;
+    options: any;
+    fn(state: any): Promise<{
+        reset: {
+            rects: any;
+        };
+    } | {
+        reset?: undefined;
+    }>;
+};
+/**
+ * Built-in `limiter` that will stop `shift()` at a certain point.
+ */
+export function limitShift(options: any): {
+    options: any;
+    fn(state: any): {
+        [x: string]: any;
+    };
+};
+/**
+ * Modifies the placement by translating the floating element along the
+ * specified axes.
+ * A number (shorthand for `mainAxis` or distance), or an axes configuration
+ * object may be passed.
+ * @see https://floating-ui.com/docs/offset
+ */
+export function offset(options: any): {
+    name: string;
+    options: any;
+    fn(state: any): Promise<{
+        x?: undefined;
+        y?: undefined;
+        data?: undefined;
+    } | {
+        x: any;
+        y: any;
+        data: {
+            placement: any;
+            x: number;
+            y: number;
+        };
+    }>;
+};
+export namespace platform {
+    export { convertOffsetParentRelativeRectToViewportRelativeRect };
+    export { getDocumentElement };
+    export { getClippingRect };
+    export { getOffsetParent };
+    export { getElementRects };
+    export { getClientRects };
+    export { getDimensions };
+    export { getScale };
+    export { isElement };
+    export { isRTL };
+}
+/**
+ * Optimizes the visibility of the floating element by shifting it in order to
+ * keep it in view when it will overflow the clipping boundary.
+ * @see https://floating-ui.com/docs/shift
+ */
+export function shift(options: any): {
+    name: string;
+    options: any;
+    fn(state: any): Promise<any>;
+};
+/**
+ * Provides data that allows you to change the size of the floating element —
+ * for instance, prevent it from overflowing the clipping boundary or match the
+ * width of the reference element.
+ * @see https://floating-ui.com/docs/size
+ */
+export function size(options: any): {
+    name: string;
+    options: any;
+    fn(state: any): Promise<{
+        reset: {
+            rects: boolean;
+        };
+    } | {
+        reset?: undefined;
+    }>;
+};
+declare function convertOffsetParentRelativeRectToViewportRelativeRect(_ref: any): any;
+declare function getDocumentElement(node: any): any;
+declare function getClippingRect(_ref: any): {
+    width: number;
+    height: number;
+    x: any;
+    y: any;
+};
+declare function getOffsetParent(element: any, polyfill: any): any;
+declare function getElementRects(data: any): Promise<{
+    reference: {
+        x: number;
+        y: number;
+        width: any;
+        height: any;
+    };
+    floating: {
+        x: number;
+        y: number;
+        width: any;
+        height: any;
+    };
+}>;
+declare function getClientRects(element: any): any[];
+declare function getDimensions(element: any): {
+    width: number;
+    height: number;
+};
+declare function getScale(element: any): {
+    x: any;
+    y: any;
+};
+declare function isElement(value: any): boolean;
+declare function isRTL(element: any): boolean;
+export {};