@react-fabric/data 1.0.0-beta.0

package/dist/esm/virtual/List.js

@@ -0,0 +1,218 @@
+'use client';
+
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useDebounce, Skeleton } from '@react-fabric/core';
+import { debounce } from '@react-fabric/utilities';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import classNames from 'classnames';
+import memoizeOne from 'memoize-one';
+import { useDeferredValue, useMemo, useRef, useEffect, useCallback, useState, useLayoutEffect, useImperativeHandle, memo } from 'react';
+import { Scroller } from './Scroller.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var createItemList = memoizeOne(function (items) {
+  return items;
+});
+var _VirtualList = function _VirtualList(_ref) {
+  var _virtualItems$3, _virtualItems$4;
+  var items = _ref.items,
+    children = _ref.children,
+    fullWidth = _ref.fullWidth,
+    _ref$padding = _ref.padding,
+    padding = _ref$padding === void 0 ? "md" : _ref$padding,
+    _ref$orientation = _ref.orientation,
+    orientation = _ref$orientation === void 0 ? "vertical" : _ref$orientation,
+    _ref$defaultHeight = _ref.defaultHeight,
+    height = _ref$defaultHeight === void 0 ? 48 : _ref$defaultHeight,
+    _ref$defaultWidth = _ref.defaultWidth,
+    width = _ref$defaultWidth === void 0 ? 48 : _ref$defaultWidth,
+    hideScroller = _ref.hideScroller,
+    initialScroll = _ref.initialScroll,
+    loading = _ref.loading,
+    onLoadMore = _ref.onLoadMore,
+    onScroll = _ref.onScroll,
+    listRef = _ref.listRef;
+  var count = useDeferredValue(items.length);
+  var extraSize = useMemo(function () {
+    return onLoadMore ? 64 : 0;
+  }, [onLoadMore]);
+  var itemList = createItemList(items.map(function (item, idx) {
+    return {
+      index: idx,
+      data: item,
+      isLast: idx + 1 === items.length
+    };
+  }));
+  var scrollerRef = useRef(null);
+  var virtualizer = useVirtualizer({
+    count: count,
+    horizontal: orientation === "horizontal",
+    getScrollElement: function getScrollElement() {
+      return scrollerRef.current;
+    },
+    estimateSize: function estimateSize() {
+      return orientation === "horizontal" ? width : height;
+    }
+  });
+  var virtualItems = virtualizer.getVirtualItems();
+  var currentIndex = useRef(0);
+  useEffect(function () {
+    var _virtualItems$1$index, _virtualItems$;
+    currentIndex.current = (_virtualItems$1$index = (_virtualItems$ = virtualItems[1]) === null || _virtualItems$ === void 0 ? void 0 : _virtualItems$.index) !== null && _virtualItems$1$index !== void 0 ? _virtualItems$1$index : 0;
+    if (scrollerRef.current && virtualItems[0] && scrollerRef.current.scrollTop < virtualItems[0].size) currentIndex.current = 0;
+  }, [virtualItems]);
+  var calculateActiveScroll = useCallback(function () {
+    var _scrollerRef$current;
+    var _ref2 = (_scrollerRef$current = scrollerRef.current) !== null && _scrollerRef$current !== void 0 ? _scrollerRef$current : {},
+      _ref2$scrollTop = _ref2.scrollTop,
+      scrollTop = _ref2$scrollTop === void 0 ? 0 : _ref2$scrollTop,
+      _ref2$scrollLeft = _ref2.scrollLeft,
+      scrollLeft = _ref2$scrollLeft === void 0 ? 0 : _ref2$scrollLeft,
+      _ref2$scrollWidth = _ref2.scrollWidth,
+      scrollWidth = _ref2$scrollWidth === void 0 ? 0 : _ref2$scrollWidth,
+      _ref2$scrollHeight = _ref2.scrollHeight,
+      scrollHeight = _ref2$scrollHeight === void 0 ? 0 : _ref2$scrollHeight,
+      _ref2$offsetWidth = _ref2.offsetWidth,
+      offsetWidth = _ref2$offsetWidth === void 0 ? 0 : _ref2$offsetWidth,
+      _ref2$offsetHeight = _ref2.offsetHeight,
+      offsetHeight = _ref2$offsetHeight === void 0 ? 0 : _ref2$offsetHeight;
+    if (orientation === "vertical") {
+      if (scrollHeight === offsetHeight) return 0;
+      if (scrollTop === 0) return 1;
+      if (scrollTop >= scrollHeight - offsetHeight - extraSize * 2) return 2;
+    }
+    if (orientation === "horizontal") {
+      if (scrollWidth === offsetWidth) return 0;
+      if (Math.abs(scrollLeft) === 0) return 1;
+      if (Math.abs(scrollLeft) >= scrollWidth - offsetWidth - extraSize * 2) return 2;
+    }
+    return 3;
+  }, [orientation]);
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    scrollActive = _useState2[0],
+    setScrollActive = _useState2[1];
+  var fireScrollEvent = useDebounce(function () {
+    return onScroll === null || onScroll === void 0 ? void 0 : onScroll(currentIndex.current);
+  }, [onScroll]);
+  var handleScroll = useCallback(function () {
+    setScrollActive(calculateActiveScroll());
+    fireScrollEvent();
+  }, [orientation, onLoadMore]);
+  useEffect(function () {
+    setScrollActive(calculateActiveScroll());
+  }, [itemList, calculateActiveScroll]);
+  useEffect(function () {
+    var db = debounce(function () {
+      var lastItem = virtualItems === null || virtualItems === void 0 ? void 0 : virtualItems.slice(-1).pop();
+      if (lastItem && !loading && lastItem.index === count - 1) onLoadMore === null || onLoadMore === void 0 || onLoadMore();
+    });
+    db();
+    return function () {
+      return db.cancel();
+    };
+  }, [onLoadMore, loading, itemList, virtualItems, count]);
+  useEffect(function () {
+    var _virtualItems$2;
+    var firstItem = (_virtualItems$2 = virtualItems[0]) === null || _virtualItems$2 === void 0 ? void 0 : _virtualItems$2.index;
+    if (onLoadMore && firstItem !== undefined && items[firstItem] === null) {
+      var db = debounce(onLoadMore);
+      db(firstItem);
+      return function () {
+        return db.cancel();
+      };
+    }
+  }, [onLoadMore, items, virtualItems, count]);
+  useLayoutEffect(function () {
+    setTimeout(function () {
+      initialScroll && virtualizer.scrollToIndex(initialScroll, {
+        align: "start"
+      });
+    }, 100);
+  }, []);
+  useImperativeHandle(listRef, function () {
+    return {
+      scrollToItem: function scrollToItem(index) {
+        virtualizer.scrollToIndex(index, {
+          align: "start"
+        });
+      },
+      hilight: function hilight(index) {
+        var _scrollerRef$current2;
+        (_scrollerRef$current2 = scrollerRef.current) === null || _scrollerRef$current2 === void 0 || (_scrollerRef$current2 = _scrollerRef$current2.querySelector(".hilight")) === null || _scrollerRef$current2 === void 0 || _scrollerRef$current2.classList.remove("hilight", "ring-1");
+        virtualizer.scrollToIndex(Math.floor(index), {
+          align: "start"
+        });
+        setTimeout(function () {
+          var _scrollerRef$current3;
+          (_scrollerRef$current3 = scrollerRef.current) === null || _scrollerRef$current3 === void 0 || (_scrollerRef$current3 = _scrollerRef$current3.querySelector("[data-index=\"".concat(index, "\"]"))) === null || _scrollerRef$current3 === void 0 || _scrollerRef$current3.classList.add("hilight", "ring-1");
+        }, 100);
+      },
+      unhilight: function unhilight() {
+        var _scrollerRef$current4;
+        (_scrollerRef$current4 = scrollerRef.current) === null || _scrollerRef$current4 === void 0 || (_scrollerRef$current4 = _scrollerRef$current4.querySelector(".hilight")) === null || _scrollerRef$current4 === void 0 || _scrollerRef$current4.classList.remove("hilight", "ring-1");
+      }
+    };
+  }, [virtualizer]);
+  return /*#__PURE__*/jsx("div", {
+    ref: scrollerRef,
+    onScroll: handleScroll,
+    className: classNames("area-content bg-base overflow-auto contain-strict"),
+    children: /*#__PURE__*/jsxs("div", {
+      className: classNames("inline-flex flex-nowrap gap-2 justify-center min-h-full min-w-full", orientation === "horizontal" && "flex-col"),
+      children: [/*#__PURE__*/jsxs("div", {
+        className: classNames("box-content inline-flex flex-nowrap", orientation === "vertical" && "flex-col", orientation === "horizontal" && "flex-row", fullWidth && "flex-1", padding === "sm" && "p-1", padding === "md" && "p-2", padding === "lg" && "p-4"),
+        children: [/*#__PURE__*/jsxs("div", {
+          style: orientation === "vertical" ? {
+            height: virtualizer.getTotalSize()
+          } : {
+            width: virtualizer.getTotalSize()
+          },
+          children: [/*#__PURE__*/jsx("div", {
+            style: orientation === "vertical" ? {
+              height: (_virtualItems$3 = virtualItems[0]) === null || _virtualItems$3 === void 0 ? void 0 : _virtualItems$3.start
+            } : {
+              width: (_virtualItems$4 = virtualItems[0]) === null || _virtualItems$4 === void 0 ? void 0 : _virtualItems$4.start,
+              display: "inline-block"
+            }
+          }), virtualItems.map(function (_ref3) {
+            var key = _ref3.key,
+              index = _ref3.index;
+            return /*#__PURE__*/jsx("div", {
+              "data-index": index,
+              ref: virtualizer.measureElement,
+              className: classNames("rounded-capped", orientation === "horizontal" ? "inline-grid" : "grid"),
+              children: children(itemList[index])
+            }, key);
+          })]
+        }), onLoadMore && /*#__PURE__*/jsx("div", {
+          className: orientation === "horizontal" ? "min-w-16" : "h-16",
+          children: loading && /*#__PURE__*/jsx(Skeleton, {})
+        })]
+      }), !hideScroller && /*#__PURE__*/jsx("div", {
+        className: classNames(orientation === "vertical" && "self-end sticky bottom-2", orientation === "horizontal" && "self-end sticky end-2"),
+        children: /*#__PURE__*/jsx(Scroller, {
+          vertical: orientation === "vertical",
+          scrollActive: scrollActive,
+          onStart: function onStart() {
+            return virtualizer.scrollToIndex(0);
+          },
+          onPrevious: function onPrevious() {
+            return scrollerRef.current && virtualizer.scrollBy(-(orientation === "vertical" ? scrollerRef.current.offsetHeight : scrollerRef.current.offsetWidth));
+          },
+          onNext: function onNext() {
+            return scrollerRef.current && virtualizer.scrollBy(orientation === "vertical" ? scrollerRef.current.offsetHeight : scrollerRef.current.offsetWidth);
+          },
+          onEnd: function onEnd() {
+            return virtualizer.scrollToIndex(count - 1);
+          }
+        })
+      })]
+    })
+  });
+};
+_VirtualList.displayName = "VirtualList";
+var GenericMemo = memo;
+var VirtualList = GenericMemo(_VirtualList);
+
+export { VirtualList };

package/dist/esm/virtual/Scroller.js

@@ -0,0 +1,77 @@
+'use client';
+
+import { ButtonGroup, Button, CoreIcons } from '@react-fabric/core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+var Scroller = function Scroller(_ref) {
+  var _ref$vertical = _ref.vertical,
+    vertical = _ref$vertical === void 0 ? true : _ref$vertical,
+    scrollActive = _ref.scrollActive,
+    onStart = _ref.onStart,
+    onEnd = _ref.onEnd,
+    onPrevious = _ref.onPrevious,
+    onNext = _ref.onNext;
+  return /*#__PURE__*/jsxs(ButtonGroup, {
+    vertical: vertical,
+    variant: "link",
+    className: "outline",
+    children: [/*#__PURE__*/jsx(Button, {
+      rtlFlip: true,
+      size: "sm",
+      variant: "link",
+      "aria-label": "scroll to top",
+      icon: vertical ? CoreIcons.chevronsUp : CoreIcons.chevronsLeft,
+      disabled: (scrollActive & 2) === 0,
+      onClick: onStart
+    }), /*#__PURE__*/jsx(Button, {
+      rtlFlip: true,
+      size: "sm",
+      variant: "link",
+      "aria-label": "scroll up",
+      icon: vertical ? CoreIcons.chevronUp : CoreIcons.chevronLeft,
+      disabled: (scrollActive & 2) === 0,
+      onClick: onPrevious
+    }), /*#__PURE__*/jsx(Button, {
+      rtlFlip: true,
+      size: "sm",
+      variant: "link",
+      "aria-label": "scroll down",
+      icon: vertical ? CoreIcons.chevronDown : CoreIcons.chevronRight,
+      disabled: scrollActive % 2 === 0,
+      onClick: onNext
+    }), /*#__PURE__*/jsx(Button, {
+      rtlFlip: true,
+      size: "sm",
+      variant: "link",
+      "aria-label": "scroll to bottom",
+      icon: vertical ? CoreIcons.chevronsDown : CoreIcons.chevronsRight,
+      disabled: scrollActive % 2 === 0,
+      onClick: onEnd
+    })]
+  });
+};
+
+export { Scroller };

package/dist/types/histogram/Histogram.d.ts

@@ -0,0 +1,41 @@
+/// <reference types="react" />
+import { type ColorType, type PaletteType } from "@react-fabric/core/dist/types/types";
+interface HistogramItem {
+    id: string;
+    label: string;
+    count: number;
+    total?: number;
+    disabled?: boolean;
+}
+export interface HistogramProps {
+    /**
+     * histogram items list
+     */
+    items: HistogramItem[];
+    /**
+     * total count
+     */
+    total?: number;
+    /**
+     * histogram bar color
+     */
+    color?: ColorType | PaletteType;
+    /**
+     * sorted list
+     */
+    sortBy?: "label" | "count";
+    /**
+     * title when histo list is empty
+     */
+    emptyTitle?: string | JSX.Element;
+    /**
+     * message when histo list is empty
+     */
+    emptyMessage?: string | JSX.Element;
+    /**
+     * handle histo click
+     */
+    onClick?: (id: string, negative?: true) => void;
+}
+export declare const Histogram: ({ items, total, color, sortBy, emptyTitle, emptyMessage, onClick, }: HistogramProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/hooks/useFilteredList.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const useFilteredList: <T extends unknown = KeyValue<any>, Q extends unknown = string>(items: T[], matcher?: (item: T, query: Q) => boolean) => {
+    onSearch: import("react").Dispatch<import("react").SetStateAction<Q | undefined>>;
+    query: Q | undefined;
+    filteredList: T[];
+    isSearching: boolean;
+};

package/dist/types/hooks/usePagination.d.ts

@@ -0,0 +1,25 @@
+export interface PaginationOptions {
+    /**
+     * total record count
+     */
+    totalRecords: number;
+    /**
+     * current page (default 0)
+     */
+    currentPage?: number;
+    /**
+     * records per page
+     */
+    perPage?: number;
+    /**
+     * pagination change handler
+     */
+    onChange?: (page: number) => void;
+}
+export declare const usePagination: ({ totalRecords, currentPage, perPage, onChange, }: PaginationOptions) => {
+    page: number;
+    totalPages: number;
+    headLabel: import("react/jsx-runtime").JSX.Element;
+    ranges: number[][];
+    onPageChange: (page: number) => void;
+};

package/dist/types/i18n/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/index.d.ts

@@ -0,0 +1,10 @@
+import "./i18n";
+export { Histogram } from "./histogram/Histogram";
+export { JsonViewer } from "./json/JsonViewer";
+export { Pagination } from "./pagination/Pagination";
+export { Table } from "./table/Table";
+export { TreePanel } from "./tree/TreePanel";
+export { VirtualGallery, type VirtualGalleryRef } from "./virtual/Gallery";
+export { VirtualList, type VirtualListRef } from "./virtual/List";
+export * from "./hooks/useFilteredList";
+export * from "./hooks/usePagination";

package/dist/types/json/JsonViewer.d.ts

@@ -0,0 +1,59 @@
+/// <reference types="react" />
+import { type CssProp } from "@react-fabric/core/dist/types/types";
+export interface JsonViewProps<T> extends CssProp {
+    /**
+     * json value
+     */
+    json: T;
+    /**
+     * display inline
+     */
+    inline?: boolean;
+    /**
+     * label fixed width when using inline
+     */
+    labelWidth?: number | string;
+    /**
+     * display object properties as tree
+     * @default true
+     */
+    showPropertyTree?: boolean;
+    /**
+     * properties to format as dates
+     * (default format applied to property name containing `date` | `time`)
+     */
+    propertyScheme?: {
+        boolean?: string[];
+        date?: string[];
+        time?: string[];
+        number?: string[];
+        bytes?: string[];
+        percent?: string[];
+        phone?: string[];
+    };
+    /**
+     * enable value copy
+     */
+    copy?: true | string[];
+    /**
+     * enable filter callbacks
+     */
+    filters?: true | string[];
+    /**
+     * message for empty json
+     */
+    emptyMessage?: string;
+    /**
+     * on filter callback
+     */
+    onFilter?: (path: string, value: AnyObject, negate: boolean) => void;
+    /**
+     * render function for custom label display
+     */
+    labeler?: (path: string) => string | undefined;
+    /**
+     * render function for custom value display
+     */
+    formatter?: (path?: string, value?: AnyObject) => string | JSX.Element | undefined;
+}
+export declare const JsonViewer: <T extends KeyValue<any> = KeyValue<any>>({ className, json, copy, propertyScheme, filters, inline, labelWidth, formatter, labeler, onFilter, emptyMessage, showPropertyTree, ...rest }: JsonViewProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/pagination/Pagination.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+export interface PaginationProps {
+    /**
+     * currrent page number
+     */
+    page: number;
+    /**
+     * total page count
+     */
+    totalPages: number;
+    /**
+     * pagination sections [start, mid, end]
+     */
+    ranges: number[][];
+    /**
+     * minimal view
+     */
+    minimal?: boolean;
+    /**
+     * page change handler
+     */
+    onPageChange: (page: number) => void;
+}
+export declare const Pagination: import("react").MemoExoticComponent<({ page, ranges, totalPages, minimal, onPageChange }: PaginationProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/types/table/BodyCell.d.ts

@@ -0,0 +1,5 @@
+import { type ColumnType } from "./types";
+export declare const BodyCell: ({ column, item, }: {
+    column: ColumnType;
+    item: KeyValue;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/types/table/HeaderCell.d.ts

@@ -0,0 +1,2 @@
+import { type ColumnType } from "./types";
+export declare const HeaderCell: ({ label, icon, iconBg, iconColor, rtlFlip, actions, locked, resizable, width, maxWidth, minWidth, }: ColumnType) => import("react/jsx-runtime").JSX.Element;

package/dist/types/table/Table.d.ts

@@ -0,0 +1,2 @@
+import { type TableProps } from "./types";
+export declare const Table: <T extends KeyValue<any> = KeyValue<any>>({ data, columns, }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/table/types.d.ts

@@ -0,0 +1,26 @@
+import { type CssProp, type IconProps, type TestProps } from "@react-fabric/core/dist/types/types";
+import { type ReactElement } from "react";
+export interface ColumnType<T = KeyValue> extends CssProp, IconProps, TestProps {
+    id: keyof T;
+    label?: string;
+    actions?: ReactElement;
+    align?: "start" | "center" | "end";
+    locked?: "start" | "end";
+    hidden?: boolean;
+    hideable?: boolean;
+    resizable?: boolean;
+    sortable?: boolean;
+    filterable?: boolean;
+    filterList?: AnyObject[];
+    width?: string | number;
+    minWidth?: string | number;
+    maxWidth?: string | number;
+    dataType?: "string" | "number" | "boolean" | "datetime" | "date" | "time" | "unknown";
+    format?: string;
+    renderer?: (value: AnyObject, data: T) => void;
+}
+export interface TableProps<T = KeyValue> {
+    columns: Array<ColumnType<T>>;
+    data: T[];
+    autoColumns?: boolean;
+}

package/dist/types/table/useTableColumns.d.ts

@@ -0,0 +1,8 @@
+import { type ColumnType } from "./types";
+export declare const useTableColumns: (columns: ColumnType[]) => {
+    columnMap: {
+        start: ColumnType[];
+        end: ColumnType[];
+        cols: ColumnType[];
+    };
+};

package/dist/types/table/useVirtualTable.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const useVirtualTable: (data: KeyValue[]) => {
+    scrollerRef: import("react").RefObject<HTMLDivElement>;
+    items: import("@tanstack/virtual-core").VirtualItem<Element>[];
+    getData: (index: number) => KeyValue<any>;
+    totalSize: () => number;
+    measureElement: (node: Element | null | undefined) => void;
+};

package/dist/types/tree/TreeNode.d.ts

@@ -0,0 +1,2 @@
+import { type TreeNodeProps } from "./types";
+export declare const TreeNode: ({ node, noLines, expanders, checkable, selectable, defaultLeafIcon, defaultNodeIcon, onToggle, onSelect, onChecked, children, }: TreeNodeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/tree/TreePanel.d.ts

@@ -0,0 +1,2 @@
+import { type TreePanelProps } from "./types";
+export declare const TreePanel: <T extends KeyValue<any>>({ items, selected, checked, checkable, noLines, renderer, searchable, selectable, matcher, filterPlaceholder, defaultLeafIcon, defaultNodeIcon, expander, onChecked, onLoad, onSelect, ...aria }: TreePanelProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/tree/types.d.ts

@@ -0,0 +1,138 @@
+/// <reference types="react" />
+import { type BadgeType, type ChildProp, type CssProp, type Elements, type IconProps, type TestProps } from "@react-fabric/core/dist/types/types";
+interface TreeBaseNode<T> extends IconProps, CssProp, TestProps {
+    id: string;
+    /**
+     * display label
+     */
+    label: Elements<JSX.Element>;
+    /**
+     * full text to be used for querying purposes
+     */
+    queryable?: string;
+    /**
+     * element badge
+     */
+    badge?: string | number | BadgeType;
+    /**
+     * is element `node` or `leaf`
+     */
+    leaf?: boolean;
+    /**
+     * disable selection
+     */
+    disabled?: boolean;
+    data?: T;
+}
+export type TreeNodeType<T extends KeyValue = KeyValue> = TreeBaseNode<T> & ({
+    leaf: true;
+    children?: never;
+} | {
+    leaf?: false;
+    children?: Array<TreeNodeType<T>>;
+    open?: boolean;
+    iconOpen?: string;
+});
+export interface InternalNode extends IconProps, CssProp, TestProps {
+    id: string;
+    label: Elements<JSX.Element>;
+    queryable?: string;
+    badge?: string | number | BadgeType;
+    disabled?: boolean;
+    leaf: boolean;
+    open: boolean;
+    children?: InternalNode[];
+    level: number;
+    loading: boolean;
+    filtered: boolean;
+    childFiltered?: boolean;
+    parentFiltered?: boolean;
+    loaded: boolean;
+    parent?: string;
+    empty?: boolean;
+    errored?: string;
+    selected?: true;
+    childSelected?: true;
+    checked: 0 | 1 | 2;
+    data?: AnyObject;
+    last?: boolean;
+    lines: Array<0 | 1 | 2 | 3>;
+}
+export interface TreeNodeProps extends ChildProp {
+    node: InternalNode;
+    expanders: [string, string];
+    defaultNodeIcon?: string;
+    defaultLeafIcon?: string;
+    noLines?: boolean;
+    selectable?: true | "leafOnly";
+    checkable?: true | "leafOnly";
+    onToggle: (id: string) => void;
+    onSelect: (id: string) => void;
+    onChecked: (id: string) => void;
+}
+export interface TreePanelProps<T extends KeyValue = KeyValue> extends TestProps {
+    items?: Array<TreeNodeType<T>>;
+    /**
+     * make tree searchable
+     */
+    searchable?: boolean;
+    /**
+     * filter input placeholder
+     */
+    filterPlaceholder?: string;
+    /**
+     * enable select
+     */
+    selectable?: true | "leafOnly";
+    /**
+     * enable checkable
+     */
+    checkable?: true | "leafOnly";
+    /**
+     * selected item id
+     */
+    selected?: string;
+    /**
+     * checked items
+     */
+    checked?: string[];
+    /**
+     * default node icon
+     */
+    defaultNodeIcon?: string;
+    /**
+     * default leaf icon
+     */
+    defaultLeafIcon?: string;
+    /**
+     * hide level indicator lines
+     */
+    noLines?: boolean;
+    /**
+     * expander icons
+     */
+    expander?: "box" | "caret" | "chevron" | "folder";
+    /**
+     * callback for lazy loading tree items
+     */
+    onLoad?: (id: string) => Promise<Array<TreeNodeType<T>> | undefined> | Array<TreeNodeType<T>> | undefined;
+    /**
+     * callback on selection of tree node
+     */
+    onSelect?: (id: string) => void;
+    /**
+     * callback on change of checked list
+     */
+    onChecked?: (leafs: string[], nodes: string[]) => void;
+    /**
+     * item label renderer
+     */
+    renderer?: (data: T) => JSX.Element;
+    /**
+     * item filter matcher
+     */
+    matcher?: (data: T, query: string) => boolean;
+}
+export declare const iconExpandAll = "M12.984 9v6h3l-3.984 3.984-3.984-3.984h3v-6h-3l3.984-3.984 3.984 3.984h-3zM3.984 2.016h16.031v1.969h-16.031v-1.969zM3.984 20.016h16.031v1.969h-16.031v-1.969z";
+export declare const iconCollapseAll = "M3.984 11.016h16.031v1.969h-16.031v-1.969zM15.984 5.016l-3.984 3.984-3.984-3.984h3v-4.031h1.969v4.031h3zM8.016 18.984l3.984-3.984 3.984 3.984h-3v4.031h-1.969v-4.031h-3z";
+export {};